@hfunlabs/hypurr-connect 0.1.0

package/dist/index.js

@@ -0,0 +1,767 @@
+// src/HypurrConnectProvider.tsx
+import { ExchangeClient, HttpTransport, InfoClient } from "@hfunlabs/hyperliquid";
+import { PrivateKeySigner } from "@hfunlabs/hyperliquid/signing";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState
+} from "react";
+
+// src/agent.ts
+var AGENT_STORAGE_PREFIX = "hypurr-connect-agent";
+function storageKey(masterAddress) {
+  return `${AGENT_STORAGE_PREFIX}:${masterAddress.toLowerCase()}`;
+}
+function loadAgent(masterAddress) {
+  try {
+    const raw = localStorage.getItem(storageKey(masterAddress));
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
+}
+function saveAgent(masterAddress, agent) {
+  localStorage.setItem(storageKey(masterAddress), JSON.stringify(agent));
+}
+function clearAgent(masterAddress) {
+  localStorage.removeItem(storageKey(masterAddress));
+}
+async function generateAgentKey() {
+  const bytes = crypto.getRandomValues(new Uint8Array(32));
+  const hex = Array.from(bytes).map((b) => b.toString(16).padStart(2, "0")).join("");
+  const privateKey = `0x${hex}`;
+  const { PrivateKeySigner: PrivateKeySigner2 } = await import("@hfunlabs/hyperliquid/signing");
+  const signer = new PrivateKeySigner2(privateKey);
+  return { privateKey, address: signer.address };
+}
+
+// src/grpc.ts
+import { GrpcWebFetchTransport } from "@protobuf-ts/grpcweb-transport";
+import { StaticClient } from "hypurr-grpc/ts/hypurr/static/static_service.client";
+import { TelegramClient } from "hypurr-grpc/ts/hypurr/telegram/telegram_service.client";
+var GRPC_URL = "https://grpc.hypurr.fun";
+function createTransport(config) {
+  return new GrpcWebFetchTransport({
+    baseUrl: GRPC_URL,
+    timeout: config.grpcTimeout ?? 15e3
+  });
+}
+function createTelegramClient(config) {
+  return new TelegramClient(createTransport(config));
+}
+function createStaticClient(config) {
+  return new StaticClient(createTransport(config));
+}
+
+// src/GrpcExchangeTransport.ts
+var GrpcExchangeTransport = class {
+  isTestnet;
+  telegramClient;
+  authDataMap;
+  walletId;
+  infoUrl;
+  constructor(config) {
+    this.isTestnet = config.isTestnet ?? false;
+    this.telegramClient = config.telegramClient;
+    this.authDataMap = config.authDataMap;
+    this.walletId = config.walletId;
+    this.infoUrl = this.isTestnet ? "https://api.hyperliquid-testnet.xyz" : "https://api.hyperliquid.xyz";
+  }
+  async request(endpoint, payload, signal) {
+    if (endpoint === "exchange") {
+      return this.exchangeViaGrpc(payload, signal);
+    }
+    return this.directRequest(endpoint, payload, signal);
+  }
+  async exchangeViaGrpc(payload, signal) {
+    if (signal?.aborted) {
+      throw new DOMException("Request aborted", "AbortError");
+    }
+    const actionBytes = new TextEncoder().encode(
+      JSON.stringify(payload.action)
+    );
+    console.debug("[GrpcExchangeTransport] sending action:", payload.action);
+    const { response } = await this.telegramClient.hyperliquidCoreAction({
+      authData: this.authDataMap,
+      walletId: this.walletId,
+      action: actionBytes,
+      nonce: payload.nonce || Date.now()
+    });
+    if (signal?.aborted) {
+      throw new DOMException("Request aborted", "AbortError");
+    }
+    const { status, result, error } = response;
+    console.debug(
+      "[GrpcExchangeTransport] gRPC status:",
+      status,
+      "error:",
+      error
+    );
+    if (error) {
+      throw new Error(`GrpcExchangeTransport: ${error}`);
+    }
+    if (result && result.length > 0) {
+      const parsed = JSON.parse(new TextDecoder().decode(result));
+      console.debug("[GrpcExchangeTransport] parsed result:", parsed);
+      return parsed;
+    }
+    return { status: "ok", response: status };
+  }
+  async directRequest(endpoint, payload, signal) {
+    const res = await fetch(`${this.infoUrl}/${endpoint}`, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(payload),
+      signal
+    });
+    if (!res.ok) {
+      throw new Error(`HTTP ${res.status}: ${await res.text()}`);
+    }
+    return await res.json();
+  }
+};
+
+// src/HypurrConnectProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var TELEGRAM_STORAGE_KEY = "hypurr-connect-tg-user";
+function toAuthDataMap(data) {
+  const map = {
+    id: String(data.id),
+    first_name: data.first_name,
+    auth_date: String(data.auth_date),
+    hash: data.hash
+  };
+  if (data.last_name) map.last_name = data.last_name;
+  if (data.username) map.username = data.username;
+  if (data.photo_url) map.photo_url = data.photo_url;
+  return map;
+}
+var HypurrConnectContext = createContext(null);
+function useHypurrConnect() {
+  const ctx = useContext(HypurrConnectContext);
+  if (!ctx)
+    throw new Error(
+      "useHypurrConnect must be used within <HypurrConnectProvider>"
+    );
+  return ctx;
+}
+function HypurrConnectProvider({
+  config,
+  children
+}) {
+  const tgClient = useMemo(() => createTelegramClient(config), [config]);
+  const staticClient = useMemo(() => createStaticClient(config), [config]);
+  const [tgLoginData, setTgLoginData] = useState(
+    () => {
+      try {
+        const stored = localStorage.getItem(TELEGRAM_STORAGE_KEY);
+        return stored ? JSON.parse(stored) : null;
+      } catch {
+        return null;
+      }
+    }
+  );
+  const [tgUser, setTgUser] = useState(null);
+  const [tgLoading, setTgLoading] = useState(false);
+  const [tgError, setTgError] = useState(null);
+  const authDataMap = useMemo(
+    () => tgLoginData ? toAuthDataMap(tgLoginData) : {},
+    [tgLoginData]
+  );
+  useEffect(() => {
+    if (!tgLoginData) return;
+    let cancelled = false;
+    setTgLoading(true);
+    setTgError(null);
+    (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) {
+        if (cancelled) return;
+        console.error("[HypurrConnect] gRPC TelegramUser failed:", err);
+        setTgError(err instanceof Error ? err.message : String(err));
+      } finally {
+        if (!cancelled) setTgLoading(false);
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [tgLoginData, tgClient]);
+  const [eoaAddress, setEoaAddress] = useState(null);
+  const [agent, setAgent] = useState(null);
+  useEffect(() => {
+    if (eoaAddress) {
+      setAgent(loadAgent(eoaAddress));
+    } else {
+      setAgent(null);
+    }
+  }, [eoaAddress]);
+  const authMethod = tgLoginData ? "telegram" : eoaAddress ? "eoa" : null;
+  const tgWallet = tgUser?.wallet ?? (tgUser?.wallets ?? [])[0] ?? null;
+  const user = useMemo(() => {
+    if (tgLoginData && authMethod === "telegram") {
+      return {
+        address: tgWallet?.ethereumAddress ?? "",
+        walletId: tgUser?.walletId ?? tgWallet?.id ?? 0,
+        displayName: tgLoginData.username ? `@${tgLoginData.username}` : tgLoginData.first_name,
+        photoUrl: tgLoginData.photo_url,
+        authMethod: "telegram",
+        telegramId: String(tgLoginData.id)
+      };
+    }
+    if (eoaAddress && authMethod === "eoa") {
+      return {
+        address: eoaAddress,
+        walletId: 0,
+        displayName: `${eoaAddress.slice(0, 6)}...${eoaAddress.slice(-4)}`,
+        authMethod: "eoa"
+      };
+    }
+    return null;
+  }, [tgLoginData, tgUser, tgWallet, eoaAddress, authMethod]);
+  const exchange = useMemo(() => {
+    if (authMethod === "telegram" && user?.address) {
+      const transport = new GrpcExchangeTransport({
+        isTestnet: config.isTestnet ?? false,
+        telegramClient: tgClient,
+        authDataMap,
+        walletId: user.walletId
+      });
+      return new ExchangeClient({
+        transport,
+        externalSigning: true,
+        userAddress: user.address
+      });
+    }
+    if (authMethod === "eoa" && agent) {
+      const wallet = new PrivateKeySigner(agent.privateKey);
+      return new ExchangeClient({
+        transport: new HttpTransport({
+          isTestnet: config.isTestnet ?? false
+        }),
+        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]
+  );
+  const handleClearAgent = useCallback(() => {
+    if (eoaAddress) {
+      clearAgent(eoaAddress);
+      setAgent(null);
+    }
+  }, [eoaAddress]);
+  const [loginModalOpen, setLoginModalOpen] = useState(false);
+  const openLoginModal = useCallback(() => setLoginModalOpen(true), []);
+  const closeLoginModal = useCallback(() => setLoginModalOpen(false), []);
+  const loginTelegram = useCallback((data) => {
+    setTgLoginData(data);
+    localStorage.setItem(TELEGRAM_STORAGE_KEY, JSON.stringify(data));
+    setEoaAddress(null);
+    setAgent(null);
+  }, []);
+  const loginEoa = useCallback((address) => {
+    setEoaAddress(address);
+    setTgLoginData(null);
+    setTgUser(null);
+    setTgError(null);
+    localStorage.removeItem(TELEGRAM_STORAGE_KEY);
+  }, []);
+  const logout = useCallback(() => {
+    setTgLoginData(null);
+    setTgUser(null);
+    setTgError(null);
+    setEoaAddress(null);
+    setAgent(null);
+    localStorage.removeItem(TELEGRAM_STORAGE_KEY);
+  }, []);
+  const value = useMemo(
+    () => ({
+      user,
+      isLoggedIn: !!user,
+      isLoading: tgLoading,
+      error: tgError,
+      authMethod,
+      exchange,
+      usdcBalance,
+      usdcBalanceLoading,
+      refreshBalance,
+      loginModalOpen,
+      openLoginModal,
+      closeLoginModal,
+      loginTelegram,
+      loginEoa,
+      logout,
+      agent,
+      agentReady: authMethod === "telegram" || !!agent,
+      approveAgent,
+      clearAgent: handleClearAgent,
+      botId: config.telegram?.botId ?? "",
+      authDataMap,
+      telegramClient: tgClient,
+      staticClient
+    }),
+    [
+      user,
+      tgLoading,
+      tgError,
+      authMethod,
+      exchange,
+      usdcBalance,
+      usdcBalanceLoading,
+      refreshBalance,
+      loginModalOpen,
+      openLoginModal,
+      closeLoginModal,
+      loginTelegram,
+      loginEoa,
+      logout,
+      agent,
+      approveAgent,
+      handleClearAgent,
+      config.telegram?.botId,
+      authDataMap,
+      tgClient,
+      staticClient
+    ]
+  );
+  return /* @__PURE__ */ jsx(HypurrConnectContext.Provider, { value, children });
+}
+
+// src/LoginModal.tsx
+import {
+  AnimatePresence,
+  motion,
+  useAnimationControls
+} from "framer-motion";
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect2,
+  useSyncExternalStore
+} from "react";
+
+// src/icons/MetaMaskColorIcon.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+function MetaMaskColorIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      className,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsxs("g", { "clip-path": "url(#clip0_2567_1088)", children: [
+          /* @__PURE__ */ jsx2(
+            "path",
+            {
+              d: "M19.8188 19.418L15.9421 18.2871L13.0186 19.9994L10.9788 19.9985L8.05356 18.2871L4.17862 19.418L3 15.5193L4.17875 11.1924L3 7.5341L4.17875 3L10.2336 6.54437H13.7639L19.8188 3L20.9976 7.5341L19.8188 11.1924L20.9976 15.5193L19.8188 19.418Z",
+              fill: "#FF5C16"
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "path",
+            {
+              d: "M4.17969 3L10.2347 6.54685L9.99394 8.98101L4.17969 3ZM8.05476 15.5209L10.7189 17.5093L8.05476 18.2869V15.5209ZM10.5059 12.2335L9.99394 8.98275L6.71642 11.1934L6.71464 11.1925V11.1941L6.72479 13.4695L8.05387 12.2336L10.5059 12.2335ZM19.819 3L13.7641 6.54685L14.004 8.98101L19.819 3ZM15.9441 15.5209L13.2798 17.5093L15.9441 18.2869V15.5209ZM17.2833 11.194V11.1924L17.2825 11.1932L14.0049 8.98275L13.4929 12.2335H15.944L17.2739 13.4693L17.2833 11.194Z",
+              fill: "#FF5C16"
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "path",
+            {
+              d: "M8.05369 18.2867L4.17875 19.4177L3 15.5207H8.05369V18.2867ZM10.5049 12.2324L11.245 16.9321L10.2191 14.319L6.72296 13.4691L8.0528 12.2325L10.5049 12.2324ZM15.9438 18.2867L19.8188 19.4177L20.9976 15.5206H15.9438C15.9438 15.5207 15.9438 18.2867 15.9438 18.2867ZM13.4927 12.2324L12.7526 16.9321L13.7783 14.319L17.2748 13.4691L15.944 12.2325L13.4927 12.2324Z",
+              fill: "#E34807"
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "path",
+            {
+              d: "M3 15.5194L4.17875 11.1924H6.71358L6.72283 13.4686L10.2194 14.3185L11.2451 16.9315L10.7178 17.5069L8.05369 15.5185H3V15.5194ZM20.9976 15.5194L19.8188 11.1924H17.2839L17.2746 13.4686L13.7783 14.3185L12.7524 16.9315L13.2796 17.5069L15.9439 15.5185H20.9976V15.5194ZM13.7639 6.54443H10.2336L9.99389 8.97859L11.2453 16.9289H12.7526L14.0047 8.97859L13.7639 6.54443Z",
+              fill: "#FF8D5D"
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "path",
+            {
+              d: "M4.17875 3L3 7.5341L4.17875 11.1924H6.71358L9.99287 8.98114L4.17875 3ZM9.77231 13.1766H8.62399L7.9988 13.7771L10.2202 14.3166L9.77231 13.1757V13.1766ZM19.8188 3L20.9976 7.5341L19.8188 11.1924H17.2839L14.0047 8.98114L19.8188 3ZM14.2269 13.1766H15.3769L16.0021 13.7778L13.7782 14.3184L14.2269 13.1757V13.1766ZM13.0178 18.4484L13.2798 17.5086L12.7524 16.9332H11.244L10.7168 17.5086L10.9787 18.4484",
+              fill: "#661800"
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "path",
+            {
+              d: "M13.0173 18.4482V20.0001H10.9785V18.4482H13.0173Z",
+              fill: "#C0C4CD"
+            }
+          ),
+          /* @__PURE__ */ jsx2(
+            "path",
+            {
+              d: "M8.05469 18.2854L10.9807 19.9994V18.4475L10.7187 17.5078L8.05469 18.2854ZM15.944 18.2854L13.0179 19.9994V18.4475L13.2799 17.5078L15.944 18.2854Z",
+              fill: "#E7EBF6"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx2("defs", { children: /* @__PURE__ */ jsx2("clipPath", { id: "clip0_2567_1088", children: /* @__PURE__ */ jsx2(
+          "rect",
+          {
+            width: "18",
+            height: "17",
+            fill: "white",
+            transform: "translate(3 3)"
+          }
+        ) }) })
+      ]
+    }
+  );
+}
+
+// src/icons/TelegramColorIcon.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+function TelegramColorIcon({ className }) {
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      className,
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx3(
+          "path",
+          {
+            d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z",
+            fill: "url(#paint0_linear_2571_1084)"
+          }
+        ),
+        /* @__PURE__ */ jsx3(
+          "path",
+          {
+            "fill-rule": "evenodd",
+            "clip-rule": "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"
+          }
+        ),
+        /* @__PURE__ */ jsx3("defs", { children: /* @__PURE__ */ jsxs2(
+          "linearGradient",
+          {
+            id: "paint0_linear_2571_1084",
+            x1: "903",
+            y1: "3",
+            x2: "903",
+            y2: "1789.65",
+            gradientUnits: "userSpaceOnUse",
+            children: [
+              /* @__PURE__ */ jsx3("stop", { "stop-color": "#2AABEE" }),
+              /* @__PURE__ */ jsx3("stop", { offset: "1", "stop-color": "#229ED9" })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// 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 mobileQuery = typeof window !== "undefined" ? window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT}px)`) : null;
+function subscribeMobile(cb) {
+  mobileQuery?.addEventListener("change", cb);
+  return () => mobileQuery?.removeEventListener("change", cb);
+}
+function getSnapshotMobile() {
+  return mobileQuery?.matches ?? false;
+}
+function useIsMobile() {
+  return useSyncExternalStore(subscribeMobile, getSnapshotMobile, () => false);
+}
+function LoginModal({ onConnectWallet, walletIcon }) {
+  const { loginTelegram, loginModalOpen, closeLoginModal, botId } = useHypurrConnect();
+  const handleTelegramAuth = useCallback2(
+    (user) => {
+      loginTelegram(user);
+      closeLoginModal();
+    },
+    [loginTelegram, closeLoginModal]
+  );
+  useEffect2(() => {
+    if (!loginModalOpen) return;
+    function onMessage(e) {
+      if (e.origin !== "https://oauth.telegram.org") return;
+      try {
+        const data = typeof e.data === "string" ? JSON.parse(e.data) : e.data;
+        if (data?.event === "auth_result" && data.result) {
+          const r = data.result;
+          handleTelegramAuth({
+            id: r.id,
+            first_name: r.first_name ?? "",
+            last_name: r.last_name ?? void 0,
+            username: r.username ?? void 0,
+            photo_url: r.photo_url ?? void 0,
+            auth_date: r.auth_date,
+            hash: r.hash
+          });
+        }
+      } catch {
+      }
+    }
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [loginModalOpen, handleTelegramAuth]);
+  const openTelegramOAuth = useCallback2(() => {
+    const origin = encodeURIComponent(window.location.origin);
+    const url = `https://oauth.telegram.org/auth?bot_id=${botId}&origin=${origin}&request_access=write`;
+    const w = 550;
+    const h = 470;
+    const left = window.screenX + (window.outerWidth - w) / 2;
+    const top = window.screenY + (window.outerHeight - h) / 2;
+    window.open(
+      url,
+      "telegram_auth",
+      `width=${w},height=${h},left=${left},top=${top}`
+    );
+  }, [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__ */ jsxs3(
+      "button",
+      {
+        type: "button",
+        onClick: () => {
+          closeLoginModal();
+          onConnectWallet();
+        },
+        className: btnClass,
+        children: [
+          walletIcon ?? /* @__PURE__ */ jsx4(MetaMaskColorIcon, { className: "size-5" }),
+          "Wallet"
+        ]
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx4(AnimatePresence, { children: loginModalOpen && (isMobile ? /* @__PURE__ */ jsx4(MobileDrawer, { onClose: closeLoginModal, children: modalContent }, "drawer") : /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx4(
+      motion.div,
+      {
+        className: "fixed inset-0 z-[100] bg-black/60 backdrop-blur-[2px]",
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.15 },
+        onClick: closeLoginModal
+      },
+      "backdrop"
+    ),
+    /* @__PURE__ */ jsx4(
+      motion.div,
+      {
+        className: "fixed inset-0 z-[101] flex items-center justify-center p-4",
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.05 },
+        onClick: closeLoginModal,
+        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",
+            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" }),
+              modalContent
+            ]
+          }
+        )
+      },
+      "modal-wrapper"
+    )
+  ] })) });
+}
+function MobileDrawer({
+  children,
+  onClose
+}) {
+  const controls = useAnimationControls();
+  const handleDragEnd = useCallback2(
+    (_, info) => {
+      if (info.offset.y > 100 || info.velocity.y > 500) {
+        onClose();
+      } else {
+        controls.start({ y: 0 });
+      }
+    },
+    [onClose, controls]
+  );
+  return /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx4(
+      motion.div,
+      {
+        className: "fixed inset-0 z-[100] bg-black/60 backdrop-blur-[2px]",
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        transition: { duration: 0.15 },
+        onClick: onClose
+      },
+      "drawer-backdrop"
+    ),
+    /* @__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",
+        initial: { y: "100%" },
+        animate: { y: 0 },
+        exit: { y: "100%" },
+        transition: { type: "tween", duration: 0.3, ease: [0.32, 0.72, 0, 1] },
+        drag: "y",
+        dragConstraints: { top: 0, bottom: 0 },
+        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" }),
+          children
+        ]
+      },
+      "drawer-sheet"
+    )
+  ] });
+}
+export {
+  GrpcExchangeTransport,
+  HypurrConnectProvider,
+  LoginModal,
+  createStaticClient,
+  createTelegramClient,
+  useHypurrConnect
+};
+//# sourceMappingURL=index.js.map