@hfunlabs/hypurr-connect 0.1.0 → 0.1.2

package/dist/index.js

@@ -1,5 +1,9 @@
 // src/HypurrConnectProvider.tsx
-import { ExchangeClient, HttpTransport, InfoClient } from "@hfunlabs/hyperliquid";
+import {
+  ExchangeClient,
+  HttpTransport
+} from "@hfunlabs/hyperliquid";
+import { approveAgent as sdkApproveAgent } from "@hfunlabs/hyperliquid/api/exchange";
 import { PrivateKeySigner } from "@hfunlabs/hyperliquid/signing";
 import {
   createContext,
@@ -7,10 +11,12 @@ import {
   useContext,
   useEffect,
   useMemo,
+  useRef,
   useState
 } from "react";
 
 // src/agent.ts
+var AGENT_NAME = "hypurr-connect";
 var AGENT_STORAGE_PREFIX = "hypurr-connect-agent";
 function storageKey(masterAddress) {
   return `${AGENT_STORAGE_PREFIX}:${masterAddress.toLowerCase()}`;
@@ -37,6 +43,39 @@ async function generateAgentKey() {
   const signer = new PrivateKeySigner2(privateKey);
   return { privateKey, address: signer.address };
 }
+async function fetchActiveAgent(userAddress, isTestnet) {
+  const url = isTestnet ? "https://api.hyperliquid-testnet.xyz/info" : "https://api.hyperliquid.xyz/info";
+  const res = await fetch(url, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ type: "extraAgents", user: userAddress })
+  });
+  if (!res.ok) return null;
+  const agents = await res.json();
+  if (!Array.isArray(agents)) return null;
+  const nowMs = Date.now();
+  const match = agents.find(
+    (a) => a.name === AGENT_NAME && a.validUntil * 1e3 > nowMs
+  );
+  if (!match) return null;
+  return { ...match, validUntil: match.validUntil * 1e3 };
+}
+async function isAgentValid(stored, userAddress, isTestnet) {
+  if (stored.validUntil <= Date.now()) return false;
+  const remote = await fetchActiveAgent(userAddress, isTestnet);
+  if (!remote) return false;
+  return remote.address.toLowerCase() === stored.address.toLowerCase() && remote.validUntil > Date.now();
+}
+var DEAD_AGENT_PATTERNS = [
+  /agent address .+ is not valid/i,
+  /unknown signer/i,
+  /not authorized/i,
+  /not an agent/i
+];
+function isDeadAgentError(err) {
+  const msg = err instanceof Error ? err.message : typeof err === "object" && err !== null && "message" in err ? String(err.message) : String(err);
+  return DEAD_AGENT_PATTERNS.some((p) => p.test(msg));
+}
 
 // src/grpc.ts
 import { GrpcWebFetchTransport } from "@protobuf-ts/grpcweb-transport";
@@ -148,6 +187,14 @@ function useHypurrConnect() {
     );
   return ctx;
 }
+function useHypurrConnectInternal() {
+  const ctx = useContext(HypurrConnectContext);
+  if (!ctx)
+    throw new Error(
+      "useHypurrConnectInternal must be used within <HypurrConnectProvider>"
+    );
+  return ctx;
+}
 function HypurrConnectProvider({
   config,
   children
@@ -171,6 +218,7 @@ function HypurrConnectProvider({
     () => tgLoginData ? toAuthDataMap(tgLoginData) : {},
     [tgLoginData]
   );
+  const [tgUserTick, setTgUserTick] = useState(0);
   useEffect(() => {
     if (!tgLoginData) return;
     let cancelled = false;
@@ -179,9 +227,7 @@ function HypurrConnectProvider({
     (async () => {
       try {
         const authData = toAuthDataMap(tgLoginData);
-        console.log(authData);
         const { response } = await tgClient.telegramUser({ authData });
-        console.log(response);
         if (cancelled) return;
         setTgUser(response.user ?? null);
       } catch (err) {
@@ -195,27 +241,55 @@ function HypurrConnectProvider({
     return () => {
       cancelled = true;
     };
-  }, [tgLoginData, tgClient]);
+  }, [tgLoginData, tgClient, tgUserTick]);
   const [eoaAddress, setEoaAddress] = useState(null);
   const [agent, setAgent] = useState(null);
+  const [eoaLoading, setEoaLoading] = useState(false);
+  const [eoaError, setEoaError] = useState(null);
+  const authMethod = tgLoginData ? "telegram" : eoaAddress ? "eoa" : null;
+  const [wallets, setWallets] = useState([]);
+  const [selectedWalletId, setSelectedWalletId] = useState(0);
+  const [packs, setPacks] = useState([]);
+  const refreshWallets = useCallback(() => setTgUserTick((t) => t + 1), []);
   useEffect(() => {
-    if (eoaAddress) {
-      setAgent(loadAgent(eoaAddress));
-    } else {
-      setAgent(null);
+    if (authMethod !== "telegram" || !tgUser) {
+      setWallets([]);
+      setSelectedWalletId(0);
+      setPacks([]);
+      return;
     }
-  }, [eoaAddress]);
-  const authMethod = tgLoginData ? "telegram" : eoaAddress ? "eoa" : null;
-  const tgWallet = tgUser?.wallet ?? (tgUser?.wallets ?? [])[0] ?? null;
+    const userWallets = tgUser.wallets ?? [];
+    setWallets(userWallets);
+    setPacks(tgUser.packs ?? []);
+    const defaultId = tgUser.walletId || userWallets[0]?.id || 0;
+    setSelectedWalletId((prev) => {
+      if (prev && userWallets.some((w) => w.id === prev)) return prev;
+      return defaultId;
+    });
+  }, [authMethod, tgUser]);
+  const selectedWallet = useMemo(
+    () => wallets.find((w) => w.id === selectedWalletId) ?? wallets[0] ?? null,
+    [wallets, selectedWalletId]
+  );
+  const selectWallet = useCallback(
+    (walletId) => {
+      if (wallets.some((w) => w.id === walletId)) {
+        setSelectedWalletId(walletId);
+      }
+    },
+    [wallets]
+  );
   const user = useMemo(() => {
-    if (tgLoginData && authMethod === "telegram") {
+    if (tgLoginData && authMethod === "telegram" && selectedWallet) {
       return {
-        address: tgWallet?.ethereumAddress ?? "",
-        walletId: tgUser?.walletId ?? tgWallet?.id ?? 0,
+        address: selectedWallet.ethereumAddress,
+        walletId: selectedWallet.id,
         displayName: tgLoginData.username ? `@${tgLoginData.username}` : tgLoginData.first_name,
         photoUrl: tgLoginData.photo_url,
         authMethod: "telegram",
-        telegramId: String(tgLoginData.id)
+        telegramId: String(tgLoginData.id),
+        hfunScore: tgUser?.reputation?.hfunScore,
+        reputationScore: tgUser?.reputation?.reputationScore
       };
     }
     if (eoaAddress && authMethod === "eoa") {
@@ -227,7 +301,16 @@ function HypurrConnectProvider({
       };
     }
     return null;
-  }, [tgLoginData, tgUser, tgWallet, eoaAddress, authMethod]);
+  }, [tgLoginData, selectedWallet, eoaAddress, authMethod, tgUser]);
+  const onDeadAgentRef = useRef(
+    null
+  );
+  onDeadAgentRef.current = (addr) => {
+    clearAgent(addr);
+    setAgent(null);
+    setEoaError("Agent expired or was deregistered. Please reconnect.");
+  };
+  const agentReady = authMethod === "telegram" || authMethod === "eoa" && !!agent;
   const exchange = useMemo(() => {
     if (authMethod === "telegram" && user?.address) {
       const transport = new GrpcExchangeTransport({
@@ -242,127 +325,129 @@ function HypurrConnectProvider({
         userAddress: user.address
       });
     }
-    if (authMethod === "eoa" && agent) {
+    if (authMethod === "eoa" && eoaAddress) {
+      if (!agent) {
+        const noAgentTransport = {
+          isTestnet: config.isTestnet ?? false,
+          request() {
+            throw new Error(
+              "[HypurrConnect] No agent key approved. Call approveAgent(signTypedDataAsync) before using the exchange client. This is required for EOA wallets to sign transactions on Hyperliquid."
+            );
+          }
+        };
+        return new ExchangeClient({
+          transport: noAgentTransport,
+          externalSigning: true,
+          userAddress: eoaAddress
+        });
+      }
+      const inner = new HttpTransport({
+        isTestnet: config.isTestnet ?? false
+      });
+      const deadAgentAddr = eoaAddress;
+      const guardedTransport = {
+        isTestnet: inner.isTestnet,
+        async request(endpoint, payload, signal) {
+          try {
+            return await inner.request(endpoint, payload, signal);
+          } catch (err) {
+            if (endpoint === "exchange" && isDeadAgentError(err)) {
+              onDeadAgentRef.current?.(deadAgentAddr);
+            }
+            throw err;
+          }
+        }
+      };
       const wallet = new PrivateKeySigner(agent.privateKey);
       return new ExchangeClient({
-        transport: new HttpTransport({
-          isTestnet: config.isTestnet ?? false
-        }),
+        transport: guardedTransport,
         wallet
       });
     }
     return null;
-  }, [authMethod, user, agent, config.isTestnet, tgClient, authDataMap]);
-  const infoClient = useMemo(
-    () => new InfoClient({
-      transport: new HttpTransport({
-        isTestnet: config.isTestnet ?? false
-      })
-    }),
-    [config.isTestnet]
-  );
-  const [usdcBalance, setUsdcBalance] = useState(null);
-  const [usdcBalanceLoading, setUsdcBalanceLoading] = useState(false);
-  const [balanceTick, setBalanceTick] = useState(0);
-  const refreshBalance = useCallback(() => setBalanceTick((t) => t + 1), []);
-  useEffect(() => {
-    const addr = user?.address;
-    if (!addr) {
-      setUsdcBalance(null);
-      return;
-    }
-    let cancelled = false;
-    setUsdcBalanceLoading(true);
-    (async () => {
-      try {
-        const state = await infoClient.clearinghouseState({
-          user: addr
-        });
-        if (!cancelled) {
-          setUsdcBalance(state.withdrawable);
-        }
-      } catch (err) {
-        console.error("[HypurrConnect] Failed to fetch USDC balance:", err);
-        if (!cancelled) setUsdcBalance(null);
-      } finally {
-        if (!cancelled) setUsdcBalanceLoading(false);
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [user?.address, infoClient, balanceTick]);
-  const approveAgent = useCallback(
-    async (signTypedDataAsync) => {
-      if (!eoaAddress) throw new Error("No EOA address connected");
-      const { privateKey, address: agentAddress } = await generateAgentKey();
-      const isTestnet = config.isTestnet ?? false;
-      const nonce = Date.now();
-      const action = {
-        type: "approveAgent",
-        signatureChainId: isTestnet ? "0x66eee" : "0xa4b1",
-        hyperliquidChain: isTestnet ? "Testnet" : "Mainnet",
-        agentAddress: agentAddress.toLowerCase(),
-        agentName: null,
-        nonce
-      };
-      const types = {
-        "HyperliquidTransaction:ApproveAgent": [
-          { name: "hyperliquidChain", type: "string" },
-          { name: "agentAddress", type: "address" },
-          { name: "agentName", type: "string" },
-          { name: "nonce", type: "uint64" }
-        ]
-      };
-      const signature = await signTypedDataAsync({
-        domain: {
-          name: "HyperliquidSignTransaction",
-          version: "1",
-          chainId: isTestnet ? 421614 : 42161,
-          verifyingContract: "0x0000000000000000000000000000000000000000"
-        },
-        types,
-        primaryType: "HyperliquidTransaction:ApproveAgent",
-        message: {
-          hyperliquidChain: action.hyperliquidChain,
-          agentAddress: action.agentAddress,
-          agentName: "",
-          nonce: BigInt(nonce)
-        }
-      });
-      const r = `0x${signature.slice(2, 66)}`;
-      const s = `0x${signature.slice(66, 130)}`;
-      const v = parseInt(signature.slice(130, 132), 16);
-      const url = isTestnet ? "https://api.hyperliquid-testnet.xyz/exchange" : "https://api.hyperliquid.xyz/exchange";
-      const res = await fetch(url, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          action,
-          nonce,
-          signature: { r, s, v }
-        })
-      });
-      const body = await res.json();
-      if (body?.status !== "ok") {
-        throw new Error(`approveAgent failed: ${JSON.stringify(body)}`);
-      }
-      const stored = {
-        privateKey,
-        address: agentAddress,
-        approvedAt: Date.now()
-      };
-      saveAgent(eoaAddress, stored);
-      setAgent(stored);
-    },
-    [eoaAddress, config.isTestnet]
-  );
+  }, [
+    authMethod,
+    user,
+    agent,
+    eoaAddress,
+    config.isTestnet,
+    tgClient,
+    authDataMap
+  ]);
   const handleClearAgent = useCallback(() => {
     if (eoaAddress) {
       clearAgent(eoaAddress);
       setAgent(null);
     }
   }, [eoaAddress]);
+  const createWallet = useCallback(
+    async (name) => {
+      const { response } = await tgClient.hyperliquidWalletCreate({
+        authData: authDataMap,
+        name
+      });
+      refreshWallets();
+      if (!response.wallet)
+        throw new Error("Wallet creation returned no wallet");
+      return response.wallet;
+    },
+    [tgClient, authDataMap, refreshWallets]
+  );
+  const deleteWallet = useCallback(
+    async (walletId) => {
+      await tgClient.hyperliquidWalletDelete({
+        authData: authDataMap,
+        walletId
+      });
+      if (walletId === selectedWalletId) {
+        const remaining = wallets.filter((w) => w.id !== walletId);
+        setSelectedWalletId(remaining[0]?.id ?? 0);
+      }
+      refreshWallets();
+    },
+    [tgClient, authDataMap, selectedWalletId, wallets, refreshWallets]
+  );
+  const createWalletPack = useCallback(
+    async (name) => {
+      const { response } = await tgClient.telegramChatWalletPackCreate({
+        authData: authDataMap,
+        name
+      });
+      refreshWallets();
+      return response.packId;
+    },
+    [tgClient, authDataMap, refreshWallets]
+  );
+  const addPackLabel = useCallback(
+    async (params) => {
+      await tgClient.telegramChatWalletPackLabelAdd({
+        authData: authDataMap,
+        ...params
+      });
+      refreshWallets();
+    },
+    [tgClient, authDataMap, refreshWallets]
+  );
+  const modifyPackLabel = useCallback(
+    async (params) => {
+      await tgClient.telegramChatWalletPackLabelModify({
+        authData: authDataMap,
+        ...params
+      });
+      refreshWallets();
+    },
+    [tgClient, authDataMap, refreshWallets]
+  );
+  const removePackLabel = useCallback(
+    async (params) => {
+      await tgClient.telegramChatWalletPackLabelRemove({
+        authData: authDataMap,
+        ...params
+      });
+      refreshWallets();
+    },
+    [tgClient, authDataMap, refreshWallets]
+  );
   const [loginModalOpen, setLoginModalOpen] = useState(false);
   const openLoginModal = useCallback(() => setLoginModalOpen(true), []);
   const closeLoginModal = useCallback(() => setLoginModalOpen(false), []);
@@ -371,42 +456,115 @@ function HypurrConnectProvider({
     localStorage.setItem(TELEGRAM_STORAGE_KEY, JSON.stringify(data));
     setEoaAddress(null);
     setAgent(null);
+    setEoaError(null);
   }, []);
-  const loginEoa = useCallback((address) => {
+  const connectEoa = useCallback((address) => {
     setEoaAddress(address);
     setTgLoginData(null);
     setTgUser(null);
     setTgError(null);
+    setEoaError(null);
     localStorage.removeItem(TELEGRAM_STORAGE_KEY);
+    const existing = loadAgent(address);
+    if (existing && existing.validUntil > Date.now()) {
+      setAgent(existing);
+    } else {
+      if (existing) clearAgent(address);
+      setAgent(null);
+    }
   }, []);
+  const approveAgentFn = useCallback(
+    async (signTypedDataAsync, chainId) => {
+      if (!eoaAddress) {
+        throw new Error(
+          "[HypurrConnect] Cannot approve agent: no EOA wallet connected. Call connectEoa(address) first."
+        );
+      }
+      setEoaLoading(true);
+      setEoaError(null);
+      try {
+        const existing = loadAgent(eoaAddress);
+        if (existing) {
+          const isTestnet2 = config.isTestnet ?? false;
+          const valid = await isAgentValid(existing, eoaAddress, isTestnet2);
+          if (valid) {
+            setAgent(existing);
+            return;
+          }
+          clearAgent(eoaAddress);
+        }
+        const { privateKey, address: agentAddress } = await generateAgentKey();
+        const isTestnet = config.isTestnet ?? false;
+        const wallet = {
+          signTypedData: signTypedDataAsync,
+          getAddresses: async () => [eoaAddress],
+          getChainId: async () => chainId
+        };
+        const transport = new HttpTransport({ isTestnet });
+        await sdkApproveAgent(
+          { transport, wallet },
+          {
+            agentAddress: agentAddress.toLowerCase(),
+            agentName: AGENT_NAME
+          }
+        );
+        const remote = await fetchActiveAgent(eoaAddress, isTestnet);
+        const validUntil = remote?.validUntil ?? Date.now() + 7 * 24 * 60 * 60 * 1e3;
+        const stored = {
+          privateKey,
+          address: agentAddress,
+          approvedAt: Date.now(),
+          validUntil
+        };
+        saveAgent(eoaAddress, stored);
+        setAgent(stored);
+      } catch (err) {
+        console.error("[HypurrConnect] EOA agent approval failed:", err);
+        setEoaError(err instanceof Error ? err.message : String(err));
+        setAgent(null);
+      } finally {
+        setEoaLoading(false);
+      }
+    },
+    [eoaAddress, config.isTestnet]
+  );
   const logout = useCallback(() => {
     setTgLoginData(null);
     setTgUser(null);
     setTgError(null);
     setEoaAddress(null);
     setAgent(null);
+    setEoaError(null);
     localStorage.removeItem(TELEGRAM_STORAGE_KEY);
   }, []);
   const value = useMemo(
     () => ({
       user,
       isLoggedIn: !!user,
-      isLoading: tgLoading,
-      error: tgError,
+      isLoading: tgLoading || eoaLoading,
+      error: tgError ?? eoaError,
       authMethod,
       exchange,
-      usdcBalance,
-      usdcBalanceLoading,
-      refreshBalance,
+      wallets,
+      selectedWalletId,
+      selectWallet,
+      createWallet,
+      deleteWallet,
+      refreshWallets,
+      packs,
+      createWalletPack,
+      addPackLabel,
+      modifyPackLabel,
+      removePackLabel,
       loginModalOpen,
       openLoginModal,
       closeLoginModal,
       loginTelegram,
-      loginEoa,
+      connectEoa,
+      approveAgent: approveAgentFn,
       logout,
       agent,
-      agentReady: authMethod === "telegram" || !!agent,
-      approveAgent,
+      agentReady,
       clearAgent: handleClearAgent,
       botId: config.telegram?.botId ?? "",
       authDataMap,
@@ -416,20 +574,31 @@ function HypurrConnectProvider({
     [
       user,
       tgLoading,
+      eoaLoading,
       tgError,
+      eoaError,
       authMethod,
       exchange,
-      usdcBalance,
-      usdcBalanceLoading,
-      refreshBalance,
+      wallets,
+      selectedWalletId,
+      selectWallet,
+      createWallet,
+      deleteWallet,
+      refreshWallets,
+      packs,
+      createWalletPack,
+      addPackLabel,
+      modifyPackLabel,
+      removePackLabel,
       loginModalOpen,
       openLoginModal,
       closeLoginModal,
       loginTelegram,
-      loginEoa,
+      connectEoa,
+      approveAgentFn,
       logout,
       agent,
-      approveAgent,
+      agentReady,
       handleClearAgent,
       config.telegram?.botId,
       authDataMap,
@@ -454,18 +623,18 @@ import {
 
 // src/icons/MetaMaskColorIcon.tsx
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-function MetaMaskColorIcon({ className }) {
+function MetaMaskColorIcon({ style }) {
   return /* @__PURE__ */ jsxs(
     "svg",
     {
       width: "24",
       height: "24",
       viewBox: "0 0 24 24",
-      className,
+      style,
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
-        /* @__PURE__ */ jsxs("g", { "clip-path": "url(#clip0_2567_1088)", children: [
+        /* @__PURE__ */ jsxs("g", { clipPath: "url(#clip0_2567_1088)", children: [
           /* @__PURE__ */ jsx2(
             "path",
             {
@@ -532,14 +701,14 @@ function MetaMaskColorIcon({ className }) {
 
 // src/icons/TelegramColorIcon.tsx
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
-function TelegramColorIcon({ className }) {
+function TelegramColorIcon({ style }) {
   return /* @__PURE__ */ jsxs2(
     "svg",
     {
       width: "24",
       height: "24",
       viewBox: "0 0 24 24",
-      className,
+      style,
       fill: "none",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
@@ -553,8 +722,8 @@ function TelegramColorIcon({ className }) {
         /* @__PURE__ */ jsx3(
           "path",
           {
-            "fill-rule": "evenodd",
-            "clip-rule": "evenodd",
+            fillRule: "evenodd",
+            clipRule: "evenodd",
             d: "M7.07426 11.905C9.69794 10.7619 11.4475 10.0083 12.3229 9.64417C14.8222 8.60458 15.3416 8.424 15.6801 8.41803C15.7546 8.41672 15.921 8.43517 16.0289 8.52267C16.1199 8.59655 16.145 8.69635 16.1569 8.7664C16.1689 8.83645 16.1839 8.99602 16.172 9.1207C16.0366 10.5438 15.4505 13.9973 15.1523 15.5912C15.0262 16.2657 14.7778 16.4918 14.5373 16.514C14.0146 16.562 13.6178 16.1686 13.1115 15.8367C12.3194 15.3175 11.8719 14.9943 11.103 14.4876C10.2145 13.902 10.7905 13.5802 11.2969 13.0542C11.4294 12.9166 13.7322 10.822 13.7768 10.632C13.7824 10.6082 13.7875 10.5196 13.7349 10.4729C13.6823 10.4261 13.6046 10.4421 13.5486 10.4548C13.4691 10.4728 12.2037 11.3092 9.75232 12.964C9.39313 13.2106 9.06779 13.3308 8.7763 13.3245C8.45496 13.3176 7.83681 13.1428 7.37729 12.9934C6.81366 12.8102 6.3657 12.7134 6.40471 12.4022C6.42503 12.2401 6.64821 12.0744 7.07426 11.905Z",
             fill: "white"
           }
@@ -569,8 +738,8 @@ function TelegramColorIcon({ className }) {
             y2: "1789.65",
             gradientUnits: "userSpaceOnUse",
             children: [
-              /* @__PURE__ */ jsx3("stop", { "stop-color": "#2AABEE" }),
-              /* @__PURE__ */ jsx3("stop", { offset: "1", "stop-color": "#229ED9" })
+              /* @__PURE__ */ jsx3("stop", { stopColor: "#2AABEE" }),
+              /* @__PURE__ */ jsx3("stop", { offset: "1", stopColor: "#229ED9" })
             ]
           }
         ) })
@@ -582,7 +751,67 @@ function TelegramColorIcon({ className }) {
 // src/LoginModal.tsx
 import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 var MOBILE_BREAKPOINT = 640;
-var btnClass = "flex h-[53px] w-full items-center gap-3 overflow-hidden rounded bg-white/5 px-6 text-sm font-semibold tracking-tight text-white cursor-pointer transition-colors duration-150 hover:bg-white/10";
+var btnStyle = {
+  display: "flex",
+  height: 53,
+  width: "100%",
+  alignItems: "center",
+  gap: 12,
+  overflow: "hidden",
+  borderRadius: 6,
+  background: "rgba(255,255,255,0.05)",
+  padding: "0 24px",
+  fontSize: 14,
+  fontWeight: 600,
+  letterSpacing: "-0.01em",
+  color: "#fff",
+  cursor: "pointer",
+  border: "none",
+  transition: "background 150ms"
+};
+var btnHoverBg = { background: "rgba(255,255,255,0.1)" };
+var backdropStyle = {
+  position: "fixed",
+  inset: 0,
+  zIndex: 100,
+  background: "rgba(0,0,0,0.6)",
+  backdropFilter: "blur(2px)",
+  WebkitBackdropFilter: "blur(2px)"
+};
+var modalWrapperStyle = {
+  position: "fixed",
+  inset: 0,
+  zIndex: 101,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  padding: 16
+};
+var modalBoxStyle = {
+  display: "flex",
+  width: 400,
+  flexDirection: "column",
+  alignItems: "center",
+  gap: 16,
+  overflow: "hidden",
+  borderRadius: 12,
+  border: "1px solid rgba(255,255,255,0.1)",
+  background: "#282828",
+  padding: 24
+};
+var headingStyle = {
+  fontSize: 16,
+  fontWeight: 700,
+  letterSpacing: "-0.025em",
+  color: "#fff",
+  margin: 0
+};
+var dividerStyle = {
+  height: 1,
+  width: "100%",
+  background: "rgba(255,255,255,0.05)"
+};
+var iconSize = { width: 20, height: 20 };
 var mobileQuery = typeof window !== "undefined" ? window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT}px)`) : null;
 function subscribeMobile(cb) {
   mobileQuery?.addEventListener("change", cb);
@@ -594,8 +823,23 @@ function getSnapshotMobile() {
 function useIsMobile() {
   return useSyncExternalStore(subscribeMobile, getSnapshotMobile, () => false);
 }
+function HoverButton({
+  onClick,
+  children
+}) {
+  return /* @__PURE__ */ jsx4(
+    motion.button,
+    {
+      type: "button",
+      onClick,
+      style: btnStyle,
+      whileHover: btnHoverBg,
+      children
+    }
+  );
+}
 function LoginModal({ onConnectWallet, walletIcon }) {
-  const { loginTelegram, loginModalOpen, closeLoginModal, botId } = useHypurrConnect();
+  const { loginTelegram, loginModalOpen, closeLoginModal, botId } = useHypurrConnectInternal();
   const handleTelegramAuth = useCallback2(
     (user) => {
       loginTelegram(user);
@@ -642,22 +886,33 @@ function LoginModal({ onConnectWallet, walletIcon }) {
   }, [botId]);
   const isMobile = useIsMobile();
   const modalContent = /* @__PURE__ */ jsxs3(Fragment, { children: [
-    /* @__PURE__ */ jsx4("div", { className: "flex w-full flex-col items-center gap-2 overflow-hidden", children: /* @__PURE__ */ jsxs3("button", { type: "button", onClick: openTelegramOAuth, className: btnClass, children: [
-      /* @__PURE__ */ jsx4(TelegramColorIcon, { className: "size-5" }),
-      "Telegram"
-    ] }) }),
-    /* @__PURE__ */ jsx4("div", { className: "h-px w-full bg-white/5" }),
+    /* @__PURE__ */ jsx4(
+      "div",
+      {
+        style: {
+          display: "flex",
+          width: "100%",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 8,
+          overflow: "hidden"
+        },
+        children: /* @__PURE__ */ jsxs3(HoverButton, { onClick: openTelegramOAuth, children: [
+          /* @__PURE__ */ jsx4(TelegramColorIcon, { style: iconSize }),
+          "Telegram"
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx4("div", { style: dividerStyle }),
     /* @__PURE__ */ jsxs3(
-      "button",
+      HoverButton,
       {
-        type: "button",
         onClick: () => {
           closeLoginModal();
           onConnectWallet();
         },
-        className: btnClass,
         children: [
-          walletIcon ?? /* @__PURE__ */ jsx4(MetaMaskColorIcon, { className: "size-5" }),
+          walletIcon ?? /* @__PURE__ */ jsx4(MetaMaskColorIcon, { style: iconSize }),
           "Wallet"
         ]
       }
@@ -667,7 +922,7 @@ function LoginModal({ onConnectWallet, walletIcon }) {
     /* @__PURE__ */ jsx4(
       motion.div,
       {
-        className: "fixed inset-0 z-[100] bg-black/60 backdrop-blur-[2px]",
+        style: backdropStyle,
         initial: { opacity: 0 },
         animate: { opacity: 1 },
         exit: { opacity: 0 },
@@ -679,7 +934,7 @@ function LoginModal({ onConnectWallet, walletIcon }) {
     /* @__PURE__ */ jsx4(
       motion.div,
       {
-        className: "fixed inset-0 z-[101] flex items-center justify-center p-4",
+        style: modalWrapperStyle,
         initial: { opacity: 0 },
         animate: { opacity: 1 },
         exit: { opacity: 0 },
@@ -688,14 +943,14 @@ function LoginModal({ onConnectWallet, walletIcon }) {
         children: /* @__PURE__ */ jsxs3(
           motion.div,
           {
-            className: "flex w-[400px] flex-col items-center gap-4 overflow-hidden rounded-xl border border-white/10 bg-[#282828] p-6",
+            style: modalBoxStyle,
             initial: { opacity: 0, scale: 0.95, y: 10 },
             animate: { opacity: 1, scale: 1, y: 0 },
             exit: { opacity: 0, scale: 0.95, y: 10 },
             transition: { duration: 0.2, ease: "easeOut" },
             onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ jsx4("p", { className: "text-base font-bold tracking-tight text-white", children: "Connect" }),
+              /* @__PURE__ */ jsx4("p", { style: headingStyle, children: "Connect" }),
               modalContent
             ]
           }
@@ -705,6 +960,47 @@ function LoginModal({ onConnectWallet, walletIcon }) {
     )
   ] })) });
 }
+var drawerSheetStyle = {
+  position: "fixed",
+  left: 0,
+  right: 0,
+  bottom: 0,
+  zIndex: 101,
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  gap: 16,
+  borderTopLeftRadius: 12,
+  borderTopRightRadius: 12,
+  borderLeft: "1px solid rgba(255,255,255,0.1)",
+  borderRight: "1px solid rgba(255,255,255,0.1)",
+  borderTop: "1px solid rgba(255,255,255,0.1)",
+  background: "#282828",
+  padding: "12px 24px max(24px, env(safe-area-inset-bottom))"
+};
+var drawerBgStyle = {
+  position: "absolute",
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: "-100vh",
+  zIndex: -1,
+  background: "#282828",
+  borderTopLeftRadius: 12,
+  borderTopRightRadius: 12
+};
+var grabHandleAreaStyle = {
+  width: "100%",
+  cursor: "grab",
+  paddingBottom: 4
+};
+var grabHandleStyle = {
+  margin: "0 auto",
+  height: 4,
+  width: 100,
+  borderRadius: 9999,
+  background: "rgba(255,255,255,0.05)"
+};
 function MobileDrawer({
   children,
   onClose
@@ -724,7 +1020,7 @@ function MobileDrawer({
     /* @__PURE__ */ jsx4(
       motion.div,
       {
-        className: "fixed inset-0 z-[100] bg-black/60 backdrop-blur-[2px]",
+        style: backdropStyle,
         initial: { opacity: 0 },
         animate: { opacity: 1 },
         exit: { opacity: 0 },
@@ -736,7 +1032,7 @@ function MobileDrawer({
     /* @__PURE__ */ jsxs3(
       motion.div,
       {
-        className: "fixed inset-x-0 bottom-0 z-[101] flex flex-col items-center gap-4 rounded-t-xl border-x border-t border-white/10 bg-[#282828] px-6 pb-[max(24px,env(safe-area-inset-bottom))] pt-3",
+        style: drawerSheetStyle,
         initial: { y: "100%" },
         animate: { y: 0 },
         exit: { y: "100%" },
@@ -746,9 +1042,9 @@ function MobileDrawer({
         dragElastic: { top: 0, bottom: 0.4 },
         onDragEnd: handleDragEnd,
         children: [
-          /* @__PURE__ */ jsx4("div", { className: "absolute inset-x-0 top-0 bottom-[-100vh] -z-10 bg-[#282828] rounded-t-xl" }),
-          /* @__PURE__ */ jsx4("div", { className: "w-full cursor-grab pt-0 pb-1 active:cursor-grabbing", children: /* @__PURE__ */ jsx4("div", { className: "mx-auto h-1 w-[100px] rounded-full bg-white/5" }) }),
-          /* @__PURE__ */ jsx4("p", { className: "text-base font-bold tracking-tight text-white", children: "Connect" }),
+          /* @__PURE__ */ jsx4("div", { style: drawerBgStyle }),
+          /* @__PURE__ */ jsx4("div", { style: grabHandleAreaStyle, children: /* @__PURE__ */ jsx4("div", { style: grabHandleStyle }) }),
+          /* @__PURE__ */ jsx4("p", { style: headingStyle, children: "Connect" }),
           children
         ]
       },