@hfunlabs/hypurr-connect 0.1.16 → 0.1.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hfunlabs/hypurr-connect",
-  "version": "0.1.16",
+  "version": "0.1.19",
   "type": "module",
   "packageManager": "pnpm@10.10.0",
   "main": "./dist/index.js",

package/src/AddWalletModal.tsx

@@ -86,9 +86,9 @@ const tabClass = (selected: boolean) =>
   }`;
 
 const inputClass = (hasError?: boolean) =>
-  `w-full bg-surface-btn/90 border ${
-    hasError ? "border-trade-down/50" : "border-surface-bd"
-  } rounded-lg px-3 py-2.5 text-white placeholder-gray-600 focus:outline-none font-mono text-base`;
+  `input ${
+    hasError ? "input-error" : ""
+  } w-full rounded-lg px-3 py-2.5 text-content placeholder-content-faint focus:outline-none font-mono text-base`;
 
 const formatAddress = (address: string) =>
   `${address.slice(0, 6)}...${address.slice(-4)}`;
@@ -359,28 +359,31 @@ export function AddWalletModal({
         <motion.div className="hypurr-connect" style={{ display: "contents" }}>
           <SpinKeyframes />
           <motion.div
-            className="fixed inset-0 z-[100] bg-black/70 backdrop-blur-sm"
+            className="fixed inset-0 z-[100] bg-overlay/70 backdrop-blur-sm"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
             transition={{ duration: 0.15 }}
             onClick={handleClose}
           />
-          <div className="fixed inset-0 z-[101] flex items-center justify-center p-4">
+          <div
+            className="fixed inset-0 z-[101] flex items-center justify-center p-4"
+            onClick={handleClose}
+          >
             <motion.div
-              className="relative w-full max-w-md overflow-hidden rounded-lg border border-surface-bd bg-surface-modal font-sans shadow-modal"
+              className="relative w-full max-w-md overflow-hidden rounded-lg border border-line bg-surface-modal font-sans shadow-modal"
               initial={{ opacity: 0, y: 8 }}
               animate={{ opacity: 1, y: 0 }}
               exit={{ opacity: 0, y: 8 }}
               transition={{ duration: 0.18, ease: "easeOut" }}
               onClick={(event) => event.stopPropagation()}
             >
-              <div className="relative flex items-center justify-center border-b border-white/[0.06] px-6 pb-5 pt-6">
-                <h3 className="text-lg font-semibold text-white">Add Wallet</h3>
+              <div className="relative flex items-center justify-center border-b border-line px-6 pb-5 pt-6">
+                <h3 className="text-lg font-medium text-content">Add Wallet</h3>
                 <button
                   onClick={handleClose}
                   disabled={isProcessing}
-                  className="absolute right-6 text-gray-400 transition-colors hover:text-white disabled:cursor-not-allowed disabled:opacity-40"
+                  className="absolute right-6 text-content-muted transition-colors hover:text-content disabled:cursor-not-allowed disabled:opacity-40"
                   aria-label="Close"
                 >
                   <X size={16} />
@@ -422,7 +425,7 @@ export function AddWalletModal({
               <div className="px-6 pb-6 pt-5">
                 {activeTab === "generate" && (
                   <section className="space-y-4">
-                    <p className="text-base text-gray-400">
+                    <p className="text-base text-content-muted">
                       Create a new Hyperliquid wallet.
                     </p>
                     <WalletNameInput
@@ -457,7 +460,7 @@ export function AddWalletModal({
 
                 {activeTab === "import" && (
                   <section className="space-y-4">
-                    <p className="text-base text-gray-400">
+                    <p className="text-base text-content-muted">
                       Import a Hyperliquid wallet with its private key.
                     </p>
                     <WalletNameInput
@@ -468,7 +471,7 @@ export function AddWalletModal({
                       placeholder="MyImportedWallet"
                     />
                     <div>
-                      <label className="mb-2 block text-base uppercase tracking-[0.1em] text-gray-400">
+                      <label className="mb-2 block text-base uppercase tracking-[0.1em] text-content-muted">
                         Private Key
                       </label>
                       <div className="relative">
@@ -491,7 +494,7 @@ export function AddWalletModal({
                           onClick={() =>
                             setShowImportPrivateKey((visible) => !visible)
                           }
-                          className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-gray-500 transition-colors hover:text-gray-300"
+                          className="absolute right-2 top-1/2 -translate-y-1/2 p-1.5 text-content-subtle transition-colors hover:text-content-tertiary"
                           aria-label={
                             showImportPrivateKey
                               ? "Hide private key"
@@ -513,12 +516,12 @@ export function AddWalletModal({
                         !isValidImportWalletName ||
                         !isValidImportPrivateKey
                       }
-                      className={`flex w-full items-center justify-center gap-2 rounded-lg border bg-transparent py-2 text-base font-medium transition-colors ${
+                      className={`flex w-full items-center justify-center gap-2 rounded-lg py-2 text-base font-medium ${
                         !isProcessing &&
                         isValidImportWalletName &&
                         isValidImportPrivateKey
-                          ? "border-purple-500 text-purple-400 hover:bg-purple-500/10"
-                          : "cursor-not-allowed border-gray-700 text-gray-600"
+                          ? "btn-raised-accent"
+                          : "btn-raised-disabled"
                       }`}
                     >
                       {isProcessing ? (
@@ -537,7 +540,7 @@ export function AddWalletModal({
 
                 {activeTab === "api" && (
                   <section className="space-y-4">
-                    <p className="text-base text-gray-400">
+                    <p className="text-base text-content-muted">
                       Connect your wallet and sign to link it for trading.
                     </p>
                     {!isWalletConnected || !ownerAddress ? (
@@ -549,13 +552,15 @@ export function AddWalletModal({
                       </button>
                     ) : (
                       <>
-                        <div className="flex items-center gap-3 rounded-lg border border-white/[0.06] bg-white/[0.03] px-3 py-2.5">
-                          <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-white/[0.08] bg-white/[0.06]">
-                            <Wallet size={14} className="text-gray-400" />
+                        <div className="flex items-center gap-3 rounded-lg border border-line bg-surface-btn px-3 py-2.5">
+                          <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-line-strong bg-surface-btn-hover">
+                            <Wallet size={14} className="text-content-muted" />
                           </div>
                           <div className="min-w-0 flex-1">
-                            <p className="text-base text-gray-400">Connected</p>
-                            <p className="font-mono text-base text-white">
+                            <p className="text-base text-content-muted">
+                              Connected
+                            </p>
+                            <p className="font-mono text-base text-content">
                               {formatAddress(ownerAddress)}
                             </p>
                           </div>
@@ -597,7 +602,7 @@ export function AddWalletModal({
                         {onDisconnectWallet && (
                           <button
                             onClick={onDisconnectWallet}
-                            className="w-full py-1.5 text-base text-gray-400 transition-colors hover:text-gray-300"
+                            className="w-full py-1.5 text-base text-content-muted transition-colors hover:text-content-tertiary"
                           >
                             Disconnect & use different wallet
                           </button>
@@ -610,11 +615,11 @@ export function AddWalletModal({
 
                 {activeTab === "readonly" && onAddReadOnlyWallet && (
                   <section className="space-y-4">
-                    <p className="text-base text-gray-400">
+                    <p className="text-base text-content-muted">
                       View positions and balances without trading access.
                     </p>
                     <div>
-                      <label className="mb-2 block text-base uppercase tracking-[0.1em] text-gray-400">
+                      <label className="mb-2 block text-base uppercase tracking-[0.1em] text-content-muted">
                         Wallet Address
                       </label>
                       <input
@@ -673,7 +678,7 @@ function WalletNameInput({
 }) {
   return (
     <div>
-      <label className="mb-2 block text-base uppercase tracking-[0.1em] text-gray-400">
+      <label className="mb-2 block text-base uppercase tracking-[0.1em] text-content-muted">
         Wallet Name
       </label>
       <input
@@ -689,7 +694,7 @@ function WalletNameInput({
         placeholder={placeholder}
         className={inputClass(!!value && !isValid)}
       />
-      <p className="mt-1.5 text-base text-gray-600">
+      <p className="mt-1.5 text-base text-content-faint">
         Letters, numbers, and / only
       </p>
     </div>
@@ -709,7 +714,7 @@ function ApprovalDurationPicker({
 }) {
   return (
     <div>
-      <label className="mb-2 block text-base uppercase tracking-[0.1em] text-gray-400">
+      <label className="mb-2 block text-base uppercase tracking-[0.1em] text-content-muted">
         Approval Duration
       </label>
       <div className="grid grid-cols-4 gap-1.5">
@@ -719,8 +724,10 @@ function ApprovalDurationPicker({
             type="button"
             onClick={() => onChange(option.durationMs)}
             disabled={disabled}
-            className={`rounded py-1.5 text-base font-medium disabled:cursor-not-allowed disabled:opacity-50 ${
-              value === option.durationMs ? "btn-raised-active" : "btn-raised"
+            className={`rounded border py-1.5 text-base font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${
+              value === option.durationMs
+                ? "bg-surface-btn-active text-content border-surface-bd-active"
+                : "bg-surface-btn text-content-muted border-surface-bd hover:bg-surface-btn-hover hover:border-surface-bd-hover hover:text-content-tertiary"
             }`}
           >
             {option.label}

package/src/DeleteWalletModal.tsx

@@ -46,7 +46,7 @@ const panelStyle: CSSProperties = {
 };
 const headerStyle: CSSProperties = {
   ...modalHeaderStyle,
-  borderBottom: "1px solid rgba(255,255,255,0.06)",
+  borderBottom: "1px solid rgb(var(--line))",
 };
 
 const bodyStyle: CSSProperties = {
@@ -68,8 +68,8 @@ const warningBoxStyle: CSSProperties = {
 
 const infoBoxStyle: CSSProperties = {
   padding: "10px 12px",
-  background: "rgba(255,255,255,0.03)",
-  border: "1px solid rgba(255,255,255,0.06)",
+  background: "rgb(var(--btn-bevel) / 0.03)",
+  border: "1px solid rgb(var(--line))",
   borderRadius: 8,
 };
 
@@ -83,18 +83,14 @@ const labelStyle: CSSProperties = {
 
 const inputStyle = (disabled: boolean): CSSProperties => ({
   width: "100%",
-  background: "rgba(13,18,25,0.9)",
-  border: `1px solid ${profileColors.surfaceBd}`,
   borderRadius: 8,
   padding: "10px 12px",
-  color: profileColors.text,
   fontFamily: fontFamily.mono,
   fontSize: 12.5,
   lineHeight: "1rem",
   outline: "none",
   opacity: disabled ? 0.5 : 1,
   boxSizing: "border-box",
-  transition: "border-color 150ms, background-color 150ms",
 });
 
 const footerStyle: CSSProperties = {
@@ -173,7 +169,7 @@ export function DeleteWalletModal({
             transition={{ duration: 0.15 }}
             onClick={handleClose}
           />
-          <div style={wrapperStyle}>
+          <div style={wrapperStyle} onClick={handleClose}>
             <motion.div
               key="panel"
               style={panelStyle}
@@ -282,6 +278,7 @@ export function DeleteWalletModal({
                     onChange={(e) => setConfirmName(e.target.value)}
                     placeholder={walletName}
                     disabled={isDeleting}
+                    className="input text-content placeholder-content-faint"
                     style={inputStyle(isDeleting)}
                   />
                 </div>

package/src/HypurrConnectProvider.tsx

@@ -593,6 +593,7 @@ export function HypurrConnectProvider({
         telegramId: String(tgUser.telegramId),
         hfunScore: tgUser?.reputation?.hfunScore,
         reputationScore: tgUser?.reputation?.reputationScore,
+        addressBook: tgUser.addressBook,
       };
     }
     if (eoaAddress && authMethod === "eoa") {

package/src/LoginModal.tsx

@@ -4,13 +4,9 @@ import {
   useAnimationControls,
   type PanInfo,
 } from "framer-motion";
-import {
-  useCallback,
-  useSyncExternalStore,
-  type CSSProperties,
-  type ReactNode,
-} from "react";
+import { useCallback, type CSSProperties, type ReactNode } from "react";
 import { useHypurrConnectInternal } from "./HypurrConnectProvider";
+import { useIsMobile } from "./useIsMobile";
 import { MetaMaskColorIcon } from "./icons/MetaMaskColorIcon";
 import { TelegramColorIcon } from "./icons/TelegramColorIcon";
 
@@ -21,8 +17,6 @@ export interface LoginModalProps {
   backgroundColor?: string;
 }
 
-const MOBILE_BREAKPOINT = 640;
-
 const DEFAULT_BACKGROUND_COLOR = "rgba(20,20,20,0.95)";
 
 const btnStyle: CSSProperties = {
@@ -93,24 +87,6 @@ const dividerStyle: CSSProperties = {
 
 const iconSize: CSSProperties = { width: 26, height: 26 };
 
-const mobileQuery =
-  typeof window !== "undefined"
-    ? window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT}px)`)
-    : null;
-
-function subscribeMobile(cb: () => void) {
-  mobileQuery?.addEventListener("change", cb);
-  return () => mobileQuery?.removeEventListener("change", cb);
-}
-
-function getSnapshotMobile() {
-  return mobileQuery?.matches ?? false;
-}
-
-function useIsMobile() {
-  return useSyncExternalStore(subscribeMobile, getSnapshotMobile, () => false);
-}
-
 function HoverButton({
   onClick,
   children,

package/src/RenameWalletModal.tsx

@@ -22,7 +22,6 @@ import {
   modalPanelStyle,
   modalWrapperStyle,
   profileColors,
-  raisedButtonStyle,
   titleStyle,
   upperLabelStyle,
 } from "./profileStyles";
@@ -48,7 +47,7 @@ const panelStyle: CSSProperties = {
 };
 const headerStyle: CSSProperties = {
   ...modalHeaderStyle,
-  borderBottom: "1px solid rgba(255,255,255,0.06)",
+  borderBottom: "1px solid rgb(var(--line))",
 };
 
 const bodyStyle: CSSProperties = {
@@ -60,8 +59,8 @@ const bodyStyle: CSSProperties = {
 
 const infoBoxStyle: CSSProperties = {
   padding: "10px 12px",
-  background: "rgba(255,255,255,0.03)",
-  border: "1px solid rgba(255,255,255,0.06)",
+  background: "rgb(var(--btn-bevel) / 0.03)",
+  border: "1px solid rgb(var(--line))",
   borderRadius: 8,
 };
 
@@ -73,33 +72,23 @@ const labelStyle: CSSProperties = {
   marginBottom: 8,
 };
 
-const inputStyle = (hasError: boolean, disabled: boolean): CSSProperties => ({
+const inputStyle = (disabled: boolean): CSSProperties => ({
   width: "100%",
-  background: "rgba(13,18,25,0.9)",
-  border: `1px solid ${
-    hasError ? "rgba(248,113,113,0.5)" : profileColors.surfaceBd
-  }`,
   borderRadius: 8,
   padding: "10px 12px",
-  color: profileColors.text,
   fontFamily: fontFamily.mono,
   fontSize: 12.5,
   lineHeight: "1rem",
   outline: "none",
   opacity: disabled ? 0.5 : 1,
   boxSizing: "border-box",
-  transition: "border-color 150ms, background-color 150ms",
 });
 
 const footerStyle: CSSProperties = {
   padding: "0 24px 24px",
 };
 
-const saveButtonStyle = (
-  enabled: boolean,
-  hovered: boolean,
-): CSSProperties => ({
-  ...raisedButtonStyle(enabled ? (hovered ? "hover" : "default") : "disabled"),
+const saveButtonStyle: CSSProperties = {
   width: "100%",
   padding: "8px 0",
   borderRadius: 8,
@@ -110,7 +99,7 @@ const saveButtonStyle = (
   alignItems: "center",
   justifyContent: "center",
   gap: 8,
-});
+};
 
 export function RenameWalletModal({
   isOpen,
@@ -122,7 +111,6 @@ export function RenameWalletModal({
   const [name, setName] = useState("");
   const [isRenaming, setIsRenaming] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [saveHovered, setSaveHovered] = useState(false);
 
   const currentName = wallet?.name || "Unnamed";
   const displayAddress = wallet?.ethereumAddress;
@@ -180,7 +168,7 @@ export function RenameWalletModal({
             transition={{ duration: 0.15 }}
             onClick={handleClose}
           />
-          <div style={wrapperStyle}>
+          <div style={wrapperStyle} onClick={handleClose}>
             <motion.div
               key="panel"
               style={panelStyle}
@@ -252,8 +240,11 @@ export function RenameWalletModal({
                       if (e.key === "Escape") handleClose();
                     }}
                     disabled={isRenaming}
-                    autoFocus
-                    style={inputStyle(!!error, isRenaming)}
+                    placeholder="Wallet name"
+                    className={`input text-content placeholder-content-faint ${
+                      error ? "input-error" : ""
+                    }`}
+                    style={inputStyle(isRenaming)}
                   />
                   <p
                     style={{
@@ -302,9 +293,8 @@ export function RenameWalletModal({
                 <button
                   onClick={handleRename}
                   disabled={!canSubmit}
-                  onMouseEnter={() => setSaveHovered(true)}
-                  onMouseLeave={() => setSaveHovered(false)}
-                  style={saveButtonStyle(canSubmit, saveHovered)}
+                  className={canSubmit ? "btn-raised" : "btn-raised-disabled"}
+                  style={saveButtonStyle}
                 >
                   {isRenaming ? (
                     <>

package/src/RenewAgentModal.tsx

@@ -168,30 +168,33 @@ export function RenewAgentModal({
         <motion.div className="hypurr-connect" style={{ display: "contents" }}>
           <SpinKeyframes />
           <motion.div
-            className="fixed inset-0 z-[110] bg-black/70 backdrop-blur-sm"
+            className="fixed inset-0 z-[110] bg-overlay/70 backdrop-blur-sm"
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
             transition={{ duration: 0.15 }}
             onClick={handleClose}
           />
-          <div className="fixed inset-0 z-[111] flex items-center justify-center p-4">
+          <div
+            className="fixed inset-0 z-[111] flex items-center justify-center p-4"
+            onClick={handleClose}
+          >
             <motion.div
-              className="relative w-full max-w-md overflow-hidden rounded-lg border border-surface-bd bg-surface-modal font-sans shadow-modal"
+              className="relative w-full max-w-md overflow-hidden rounded-lg border border-line bg-surface-modal font-sans shadow-modal"
               initial={{ opacity: 0, y: 8 }}
               animate={{ opacity: 1, y: 0 }}
               exit={{ opacity: 0, y: 8 }}
               transition={{ duration: 0.18, ease: "easeOut" }}
               onClick={(event) => event.stopPropagation()}
             >
-              <div className="relative flex items-center justify-center border-b border-white/[0.06] px-6 pb-5 pt-6">
-                <h3 className="text-lg font-semibold text-white">
+              <div className="relative flex items-center justify-center border-b border-line px-6 pb-5 pt-6">
+                <h3 className="text-lg font-medium text-content">
                   Renew Agent Wallet
                 </h3>
                 <button
                   onClick={handleClose}
                   disabled={isRenewing}
-                  className="absolute right-6 text-gray-400 transition-colors hover:text-white disabled:cursor-not-allowed disabled:opacity-40"
+                  className="absolute right-6 text-content-muted transition-colors hover:text-content disabled:cursor-not-allowed disabled:opacity-40"
                   aria-label="Close"
                 >
                   <X size={16} />
@@ -214,16 +217,16 @@ export function RenewAgentModal({
                   </p>
                 </div>
 
-                <div className="rounded-lg border border-white/[0.06] bg-white/[0.03] p-3">
-                  <p className="mb-1.5 text-base uppercase tracking-[0.1em] text-gray-400">
+                <div className="rounded-lg border border-line bg-surface-btn p-3">
+                  <p className="mb-1.5 text-base uppercase tracking-[0.1em] text-content-muted">
                     Agent address
                   </p>
                   <div className="flex items-center justify-between gap-3">
                     <div className="min-w-0">
-                      <p className="truncate text-base font-medium text-white">
+                      <p className="truncate text-base font-medium text-content">
                         {wallet.name || "Unnamed Wallet"}
                       </p>
-                      <p className="font-mono text-base text-gray-400">
+                      <p className="font-mono text-base text-content-muted">
                         {hasAgentAddress
                           ? formatAddress(agentAddress)
                           : "Missing agent address"}
@@ -237,15 +240,15 @@ export function RenewAgentModal({
                 </div>
 
                 {ownerReady ? (
-                  <div className="flex items-center gap-3 rounded-lg border border-white/[0.06] bg-white/[0.03] px-3 py-2.5">
-                    <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-white/[0.08] bg-white/[0.06]">
-                      <Wallet size={14} className="text-gray-400" />
+                  <div className="flex items-center gap-3 rounded-lg border border-line bg-surface-btn px-3 py-2.5">
+                    <div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-md border border-line-strong bg-surface-btn-hover">
+                      <Wallet size={14} className="text-content-muted" />
                     </div>
                     <div className="min-w-0 flex-1">
-                      <p className="text-base text-gray-400">
+                      <p className="text-base text-content-muted">
                         Owner wallet connected
                       </p>
-                      <p className="font-mono text-base text-white">
+                      <p className="font-mono text-base text-content">
                         {formatAddress(ownerAddress)}
                       </p>
                     </div>
@@ -262,10 +265,10 @@ export function RenewAgentModal({
                         <p className="text-base text-trade-down">
                           Wrong owner wallet connected
                         </p>
-                        <p className="mt-1 font-mono text-base text-gray-400">
+                        <p className="mt-1 font-mono text-base text-content-muted">
                           Connected {formatAddress(ownerAddress)}
                         </p>
-                        <p className="font-mono text-base text-gray-400">
+                        <p className="font-mono text-base text-content-muted">
                           Required {formatAddress(expectedOwnerAddress)}
                         </p>
                       </div>
@@ -330,7 +333,7 @@ export function RenewAgentModal({
                   <button
                     onClick={onDisconnectWallet}
                     disabled={isRenewing}
-                    className="w-full py-1.5 text-base text-gray-400 transition-colors hover:text-gray-300 disabled:cursor-not-allowed disabled:opacity-40"
+                    className="w-full py-1.5 text-base text-content-muted transition-colors hover:text-content-tertiary disabled:cursor-not-allowed disabled:opacity-40"
                   >
                     Disconnect & use different owner
                   </button>
@@ -357,7 +360,7 @@ function ApprovalDurationPicker({
 }) {
   return (
     <div>
-      <label className="mb-2 block text-base uppercase tracking-[0.1em] text-gray-400">
+      <label className="mb-2 block text-base uppercase tracking-[0.1em] text-content-muted">
         Approval Duration
       </label>
       <div className="grid grid-cols-4 gap-1.5">
@@ -367,8 +370,10 @@ function ApprovalDurationPicker({
             type="button"
             onClick={() => onChange(option.durationMs)}
             disabled={disabled}
-            className={`rounded py-1.5 text-base font-medium disabled:cursor-not-allowed disabled:opacity-50 ${
-              value === option.durationMs ? "btn-raised-active" : "btn-raised"
+            className={`rounded border py-1.5 text-base font-medium transition-colors disabled:cursor-not-allowed disabled:opacity-50 ${
+              value === option.durationMs
+                ? "bg-surface-btn-active text-content border-surface-bd-active"
+                : "bg-surface-btn text-content-muted border-surface-bd hover:bg-surface-btn-hover hover:border-surface-bd-hover hover:text-content-tertiary"
             }`}
           >
             {option.label}