@hfunlabs/hypurr-connect 0.1.0

package/src/HypurrConnectProvider.tsx

@@ -0,0 +1,418 @@
+import { ExchangeClient, HttpTransport, InfoClient } from "@hfunlabs/hyperliquid";
+import { PrivateKeySigner } from "@hfunlabs/hyperliquid/signing";
+import type { TelegramUserResponse } from "hypurr-grpc/ts/hypurr/telegram/telegram_service";
+import type { TelegramUser as HypurrTelegramUser } from "hypurr-grpc/ts/hypurr/user";
+import {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+import {
+  clearAgent as clearStoredAgent,
+  generateAgentKey,
+  loadAgent,
+  saveAgent,
+} from "./agent";
+import { createStaticClient, createTelegramClient } from "./grpc";
+import { GrpcExchangeTransport } from "./GrpcExchangeTransport";
+import type {
+  AuthMethod,
+  HypurrConnectConfig,
+  HypurrConnectState,
+  HypurrUser,
+  SignTypedDataFn,
+  StoredAgent,
+  TelegramLoginData,
+} from "./types";
+
+const TELEGRAM_STORAGE_KEY = "hypurr-connect-tg-user";
+
+function toAuthDataMap(data: TelegramLoginData): Record<string, string> {
+  const map: Record<string, string> = {
+    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;
+}
+
+const HypurrConnectContext = createContext<HypurrConnectState | null>(null);
+
+export function useHypurrConnect(): HypurrConnectState {
+  const ctx = useContext(HypurrConnectContext);
+  if (!ctx)
+    throw new Error(
+      "useHypurrConnect must be used within <HypurrConnectProvider>",
+    );
+  return ctx;
+}
+
+export function HypurrConnectProvider({
+  config,
+  children,
+}: {
+  config: HypurrConnectConfig;
+  children: ReactNode;
+}) {
+  const tgClient = useMemo(() => createTelegramClient(config), [config]);
+  const staticClient = useMemo(() => createStaticClient(config), [config]);
+
+  // ── Telegram auth state ──────────────────────────────────────
+  const [tgLoginData, setTgLoginData] = useState<TelegramLoginData | null>(
+    () => {
+      try {
+        const stored = localStorage.getItem(TELEGRAM_STORAGE_KEY);
+        return stored ? JSON.parse(stored) : null;
+      } catch {
+        return null;
+      }
+    },
+  );
+  const [tgUser, setTgUser] = useState<HypurrTelegramUser | null>(null);
+  const [tgLoading, setTgLoading] = useState(false);
+  const [tgError, setTgError] = useState<string | null>(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 as TelegramUserResponse).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]);
+
+  // ── EOA auth state ───────────────────────────────────────────
+  const [eoaAddress, setEoaAddress] = useState<`0x${string}` | null>(null);
+  const [agent, setAgent] = useState<StoredAgent | null>(null);
+
+  useEffect(() => {
+    if (eoaAddress) {
+      setAgent(loadAgent(eoaAddress));
+    } else {
+      setAgent(null);
+    }
+  }, [eoaAddress]);
+
+  // ── Derived auth ─────────────────────────────────────────────
+  const authMethod: AuthMethod = tgLoginData
+    ? "telegram"
+    : eoaAddress
+      ? "eoa"
+      : null;
+
+  const tgWallet = tgUser?.wallet ?? (tgUser?.wallets ?? [])[0] ?? null;
+
+  const user = useMemo<HypurrUser | null>(() => {
+    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]);
+
+  // ── Exchange client ──────────────────────────────────────────
+  // Telegram: GrpcExchangeTransport → HyperliquidCoreAction (server signs)
+  // EOA: HttpTransport + agent wallet (SDK signs locally)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const exchange = useMemo<ExchangeClient<any> | null>(() => {
+    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 as `0x${string}`,
+      });
+    }
+
+    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]);
+
+  // ── USDC balance from Hyperliquid ──────────────────────────────
+  const infoClient = useMemo(
+    () =>
+      new InfoClient({
+        transport: new HttpTransport({
+          isTestnet: config.isTestnet ?? false,
+        }),
+      }),
+    [config.isTestnet],
+  );
+
+  const [usdcBalance, setUsdcBalance] = useState<string | null>(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 as `0x${string}`,
+        });
+        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]);
+
+  // ── Agent approval (EOA flow) ────────────────────────────────
+  const approveAgent = useCallback(
+    async (signTypedDataAsync: SignTypedDataFn) => {
+      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() as `0x${string}`,
+        agentName: null as string | 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: StoredAgent = {
+        privateKey,
+        address: agentAddress,
+        approvedAt: Date.now(),
+      };
+      saveAgent(eoaAddress, stored);
+      setAgent(stored);
+    },
+    [eoaAddress, config.isTestnet],
+  );
+
+  const handleClearAgent = useCallback(() => {
+    if (eoaAddress) {
+      clearStoredAgent(eoaAddress);
+      setAgent(null);
+    }
+  }, [eoaAddress]);
+
+  // ── Login modal state ────────────────────────────────────────
+  const [loginModalOpen, setLoginModalOpen] = useState(false);
+  const openLoginModal = useCallback(() => setLoginModalOpen(true), []);
+  const closeLoginModal = useCallback(() => setLoginModalOpen(false), []);
+
+  // ── Auth actions ─────────────────────────────────────────────
+  const loginTelegram = useCallback((data: TelegramLoginData) => {
+    setTgLoginData(data);
+    localStorage.setItem(TELEGRAM_STORAGE_KEY, JSON.stringify(data));
+    setEoaAddress(null);
+    setAgent(null);
+  }, []);
+
+  const loginEoa = useCallback((address: `0x${string}`) => {
+    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);
+  }, []);
+
+  // ── Context value ────────────────────────────────────────────
+  const value = useMemo<HypurrConnectState>(
+    () => ({
+      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 (
+    <HypurrConnectContext.Provider value={value}>
+      {children}
+    </HypurrConnectContext.Provider>
+  );
+}

package/src/LoginModal.tsx

@@ -0,0 +1,230 @@
+import {
+  AnimatePresence,
+  motion,
+  useAnimationControls,
+  type PanInfo,
+} from "framer-motion";
+import {
+  useCallback,
+  useEffect,
+  useSyncExternalStore,
+  type ReactNode,
+} from "react";
+import { useHypurrConnect } from "./HypurrConnectProvider";
+import { MetaMaskColorIcon } from "./icons/MetaMaskColorIcon";
+import { TelegramColorIcon } from "./icons/TelegramColorIcon";
+import type { TelegramLoginData } from "./types";
+
+export interface LoginModalProps {
+  onConnectWallet: () => void;
+  walletIcon?: ReactNode;
+}
+
+const MOBILE_BREAKPOINT = 640;
+
+const 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";
+
+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);
+}
+
+export function LoginModal({ onConnectWallet, walletIcon }: LoginModalProps) {
+  const { loginTelegram, loginModalOpen, closeLoginModal, botId } =
+    useHypurrConnect();
+
+  const handleTelegramAuth = useCallback(
+    (user: TelegramLoginData) => {
+      loginTelegram(user);
+      closeLoginModal();
+    },
+    [loginTelegram, closeLoginModal],
+  );
+
+  useEffect(() => {
+    if (!loginModalOpen) return;
+    function onMessage(e: MessageEvent) {
+      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 ?? undefined,
+            username: r.username ?? undefined,
+            photo_url: r.photo_url ?? undefined,
+            auth_date: r.auth_date,
+            hash: r.hash,
+          });
+        }
+      } catch {
+        /* ignore non-JSON */
+      }
+    }
+    window.addEventListener("message", onMessage);
+    return () => window.removeEventListener("message", onMessage);
+  }, [loginModalOpen, handleTelegramAuth]);
+
+  const openTelegramOAuth = useCallback(() => {
+    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 = (
+    <>
+      <div className="flex w-full flex-col items-center gap-2 overflow-hidden">
+        <button type="button" onClick={openTelegramOAuth} className={btnClass}>
+          <TelegramColorIcon className="size-5" />
+          Telegram
+        </button>
+      </div>
+
+      <div className="h-px w-full bg-white/5" />
+
+      <button
+        type="button"
+        onClick={() => {
+          closeLoginModal();
+          onConnectWallet();
+        }}
+        className={btnClass}
+      >
+        {walletIcon ?? <MetaMaskColorIcon className="size-5" />}
+        Wallet
+      </button>
+    </>
+  );
+
+  return (
+    <AnimatePresence>
+      {loginModalOpen &&
+        (isMobile ? (
+          <MobileDrawer key="drawer" onClose={closeLoginModal}>
+            {modalContent}
+          </MobileDrawer>
+        ) : (
+          <>
+            <motion.div
+              key="backdrop"
+              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}
+            />
+            <motion.div
+              key="modal-wrapper"
+              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}
+            >
+              <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()}
+              >
+                <p className="text-base font-bold tracking-tight text-white">
+                  Connect
+                </p>
+                {modalContent}
+              </motion.div>
+            </motion.div>
+          </>
+        ))}
+    </AnimatePresence>
+  );
+}
+
+function MobileDrawer({
+  children,
+  onClose,
+}: {
+  children: ReactNode;
+  onClose: () => void;
+}) {
+  const controls = useAnimationControls();
+
+  const handleDragEnd = useCallback(
+    (_: unknown, info: PanInfo) => {
+      if (info.offset.y > 100 || info.velocity.y > 500) {
+        onClose();
+      } else {
+        controls.start({ y: 0 });
+      }
+    },
+    [onClose, controls],
+  );
+
+  return (
+    <>
+      <motion.div
+        key="drawer-backdrop"
+        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}
+      />
+
+      <motion.div
+        key="drawer-sheet"
+        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}
+      >
+        <div className="absolute inset-x-0 top-0 bottom-[-100vh] -z-10 bg-[#282828] rounded-t-xl" />
+
+        <div className="w-full cursor-grab pt-0 pb-1 active:cursor-grabbing">
+          <div className="mx-auto h-1 w-[100px] rounded-full bg-white/5" />
+        </div>
+
+        <p className="text-base font-bold tracking-tight text-white">
+          Connect
+        </p>
+
+        {children}
+      </motion.div>
+    </>
+  );
+}

package/src/agent.ts

@@ -0,0 +1,43 @@
+import type { StoredAgent } from "./types";
+
+const AGENT_STORAGE_PREFIX = "hypurr-connect-agent";
+
+function storageKey(masterAddress: string): string {
+  return `${AGENT_STORAGE_PREFIX}:${masterAddress.toLowerCase()}`;
+}
+
+export function loadAgent(masterAddress: string): StoredAgent | null {
+  try {
+    const raw = localStorage.getItem(storageKey(masterAddress));
+    return raw ? JSON.parse(raw) : null;
+  } catch {
+    return null;
+  }
+}
+
+export function saveAgent(masterAddress: string, agent: StoredAgent): void {
+  localStorage.setItem(storageKey(masterAddress), JSON.stringify(agent));
+}
+
+export function clearAgent(masterAddress: string): void {
+  localStorage.removeItem(storageKey(masterAddress));
+}
+
+/**
+ * Generate a random 32-byte private key and derive its address using the
+ * SDK's PrivateKeySigner (no viem dependency needed).
+ */
+export async function generateAgentKey(): Promise<{
+  privateKey: `0x${string}`;
+  address: `0x${string}`;
+}> {
+  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}` as `0x${string}`;
+
+  const { PrivateKeySigner } = await import("@hfunlabs/hyperliquid/signing");
+  const signer = new PrivateKeySigner(privateKey);
+  return { privateKey, address: signer.address };
+}

package/src/grpc.ts

@@ -0,0 +1,23 @@
+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";
+import type { HypurrConnectConfig } from "./types";
+
+const GRPC_URL = "https://grpc.hypurr.fun";
+
+function createTransport(config: HypurrConnectConfig) {
+  return new GrpcWebFetchTransport({
+    baseUrl: GRPC_URL,
+    timeout: config.grpcTimeout ?? 15_000,
+  });
+}
+
+export function createTelegramClient(
+  config: HypurrConnectConfig,
+): TelegramClient {
+  return new TelegramClient(createTransport(config));
+}
+
+export function createStaticClient(config: HypurrConnectConfig): StaticClient {
+  return new StaticClient(createTransport(config));
+}