@hfunlabs/hypurr-connect 0.1.1 → 0.1.2

package/src/HypurrConnectProvider.tsx

@@ -1,23 +1,33 @@
 import {
   ExchangeClient,
   HttpTransport,
-  InfoClient,
+  type IRequestTransport,
 } from "@hfunlabs/hyperliquid";
+import { approveAgent as sdkApproveAgent } from "@hfunlabs/hyperliquid/api/exchange";
 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 type {
+  TelegramUser as HypurrTelegramUser,
+  TelegramChatWalletPack,
+} from "hypurr-grpc/ts/hypurr/user";
+import type { HyperliquidWallet } from "hypurr-grpc/ts/hypurr/wallet";
 import {
   createContext,
   useCallback,
   useContext,
   useEffect,
   useMemo,
+  useRef,
   useState,
   type ReactNode,
 } from "react";
 import {
+  AGENT_NAME,
   clearAgent as clearStoredAgent,
+  fetchActiveAgent,
   generateAgentKey,
+  isAgentValid,
+  isDeadAgentError,
   loadAgent,
   saveAgent,
 } from "./agent";
@@ -33,6 +43,11 @@ import type {
   TelegramLoginData,
 } from "./types";
 
+/** @internal context value — extends the public type with fields used only by library internals */
+interface InternalConnectState extends HypurrConnectState {
+  loginTelegram: (data: TelegramLoginData) => void;
+}
+
 const TELEGRAM_STORAGE_KEY = "hypurr-connect-tg-user";
 
 function toAuthDataMap(data: TelegramLoginData): Record<string, string> {
@@ -48,7 +63,7 @@ function toAuthDataMap(data: TelegramLoginData): Record<string, string> {
   return map;
 }
 
-const HypurrConnectContext = createContext<HypurrConnectState | null>(null);
+const HypurrConnectContext = createContext<InternalConnectState | null>(null);
 
 export function useHypurrConnect(): HypurrConnectState {
   const ctx = useContext(HypurrConnectContext);
@@ -59,6 +74,16 @@ export function useHypurrConnect(): HypurrConnectState {
   return ctx;
 }
 
+/** @internal — gives library components access to fields not on the public API */
+export function useHypurrConnectInternal(): InternalConnectState {
+  const ctx = useContext(HypurrConnectContext);
+  if (!ctx)
+    throw new Error(
+      "useHypurrConnectInternal must be used within <HypurrConnectProvider>",
+    );
+  return ctx;
+}
+
 export function HypurrConnectProvider({
   config,
   children,
@@ -89,6 +114,8 @@ export function HypurrConnectProvider({
     [tgLoginData],
   );
 
+  const [tgUserTick, setTgUserTick] = useState(0);
+
   useEffect(() => {
     if (!tgLoginData) return;
     let cancelled = false;
@@ -98,9 +125,7 @@ export 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 as TelegramUserResponse).user ?? null);
       } catch (err) {
@@ -115,19 +140,13 @@ export function HypurrConnectProvider({
     return () => {
       cancelled = true;
     };
-  }, [tgLoginData, tgClient]);
+  }, [tgLoginData, tgClient, tgUserTick]);
 
   // ── 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]);
+  const [eoaLoading, setEoaLoading] = useState(false);
+  const [eoaError, setEoaError] = useState<string | null>(null);
 
   // ── Derived auth ─────────────────────────────────────────────
   const authMethod: AuthMethod = tgLoginData
@@ -136,19 +155,59 @@ export function HypurrConnectProvider({
       ? "eoa"
       : null;
 
-  const tgWallet = tgUser?.wallet ?? (tgUser?.wallets ?? [])[0] ?? null;
+  // ── Multi-wallet state (Telegram) ─────────────────────────────
+  const [wallets, setWallets] = useState<HyperliquidWallet[]>([]);
+  const [selectedWalletId, setSelectedWalletId] = useState<number>(0);
+  const [packs, setPacks] = useState<TelegramChatWalletPack[]>([]);
+
+  const refreshWallets = useCallback(() => setTgUserTick((t) => t + 1), []);
+
+  useEffect(() => {
+    if (authMethod !== "telegram" || !tgUser) {
+      setWallets([]);
+      setSelectedWalletId(0);
+      setPacks([]);
+      return;
+    }
+
+    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: number) => {
+      if (wallets.some((w) => w.id === walletId)) {
+        setSelectedWalletId(walletId);
+      }
+    },
+    [wallets],
+  );
 
   const user = useMemo<HypurrUser | null>(() => {
-    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),
+        hfunScore: tgUser?.reputation?.hfunScore,
+        reputationScore: tgUser?.reputation?.reputationScore,
       };
     }
     if (eoaAddress && authMethod === "eoa") {
@@ -160,11 +219,24 @@ export function HypurrConnectProvider({
       };
     }
     return null;
-  }, [tgLoginData, tgUser, tgWallet, eoaAddress, authMethod]);
+  }, [tgLoginData, selectedWallet, eoaAddress, authMethod, tgUser]);
 
   // ── Exchange client ──────────────────────────────────────────
   // Telegram: GrpcExchangeTransport → HyperliquidCoreAction (server signs)
   // EOA: HttpTransport + agent wallet (SDK signs locally)
+
+  const onDeadAgentRef = useRef<((address: `0x${string}`) => void) | null>(
+    null,
+  );
+  onDeadAgentRef.current = (addr: `0x${string}`) => {
+    clearStoredAgent(addr);
+    setAgent(null);
+    setEoaError("Agent expired or was deregistered. Please reconnect.");
+  };
+
+  const agentReady =
+    authMethod === "telegram" || (authMethod === "eoa" && !!agent);
+
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const exchange = useMemo<ExchangeClient<any> | null>(() => {
     if (authMethod === "telegram" && user?.address) {
@@ -181,150 +253,153 @@ export function HypurrConnectProvider({
       });
     }
 
-    if (authMethod === "eoa" && agent) {
+    if (authMethod === "eoa" && eoaAddress) {
+      if (!agent) {
+        const noAgentTransport: IRequestTransport = {
+          isTestnet: config.isTestnet ?? false,
+          request(): Promise<never> {
+            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: IRequestTransport = {
+        isTestnet: inner.isTestnet,
+        async request<T>(
+          endpoint: "info" | "exchange" | "explorer",
+          payload: unknown,
+          signal?: AbortSignal,
+        ): Promise<T> {
+          try {
+            return await inner.request<T>(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]);
-
-  // ── 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), []);
+  }, [
+    authMethod,
+    user,
+    agent,
+    eoaAddress,
+    config.isTestnet,
+    tgClient,
+    authDataMap,
+  ]);
 
-  useEffect(() => {
-    const addr = user?.address;
-    if (!addr) {
-      setUsdcBalance(null);
-      return;
+  const handleClearAgent = useCallback(() => {
+    if (eoaAddress) {
+      clearStoredAgent(eoaAddress);
+      setAgent(null);
     }
+  }, [eoaAddress]);
 
-    let cancelled = false;
-    setUsdcBalanceLoading(true);
+  // ── Wallet management (Telegram only) ───────────────────────
+  const createWallet = useCallback(
+    async (name: string): Promise<HyperliquidWallet> => {
+      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],
+  );
 
-    (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);
+  const deleteWallet = useCallback(
+    async (walletId: number): Promise<void> => {
+      await tgClient.hyperliquidWalletDelete({
+        authData: authDataMap,
+        walletId,
+      });
+      if (walletId === selectedWalletId) {
+        const remaining = wallets.filter((w) => w.id !== walletId);
+        setSelectedWalletId(remaining[0]?.id ?? 0);
       }
-    })();
-
-    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" },
-        ],
-      };
+      refreshWallets();
+    },
+    [tgClient, authDataMap, selectedWalletId, wallets, refreshWallets],
+  );
 
-      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 createWalletPack = useCallback(
+    async (name: string): Promise<number> => {
+      const { response } = await tgClient.telegramChatWalletPackCreate({
+        authData: authDataMap,
+        name,
       });
+      refreshWallets();
+      return response.packId;
+    },
+    [tgClient, authDataMap, refreshWallets],
+  );
 
-      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 addPackLabel = useCallback(
+    async (params: {
+      walletAddress: string;
+      walletLabel: string;
+      packId: number;
+    }): Promise<void> => {
+      await tgClient.telegramChatWalletPackLabelAdd({
+        authData: authDataMap,
+        ...params,
       });
+      refreshWallets();
+    },
+    [tgClient, authDataMap, refreshWallets],
+  );
 
-      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);
+  const modifyPackLabel = useCallback(
+    async (params: {
+      walletLabelOld: string;
+      walletLabelNew: string;
+      packId: number;
+    }): Promise<void> => {
+      await tgClient.telegramChatWalletPackLabelModify({
+        authData: authDataMap,
+        ...params,
+      });
+      refreshWallets();
     },
-    [eoaAddress, config.isTestnet],
+    [tgClient, authDataMap, refreshWallets],
   );
 
-  const handleClearAgent = useCallback(() => {
-    if (eoaAddress) {
-      clearStoredAgent(eoaAddress);
-      setAgent(null);
-    }
-  }, [eoaAddress]);
+  const removePackLabel = useCallback(
+    async (params: { walletLabel: string; packId: number }): Promise<void> => {
+      await tgClient.telegramChatWalletPackLabelRemove({
+        authData: authDataMap,
+        ...params,
+      });
+      refreshWallets();
+    },
+    [tgClient, authDataMap, refreshWallets],
+  );
 
   // ── Login modal state ────────────────────────────────────────
   const [loginModalOpen, setLoginModalOpen] = useState(false);
@@ -337,50 +412,134 @@ export function HypurrConnectProvider({
     localStorage.setItem(TELEGRAM_STORAGE_KEY, JSON.stringify(data));
     setEoaAddress(null);
     setAgent(null);
+    setEoaError(null);
   }, []);
 
-  const loginEoa = useCallback((address: `0x${string}`) => {
+  const connectEoa = useCallback((address: `0x${string}`) => {
     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) clearStoredAgent(address);
+      setAgent(null);
+    }
   }, []);
 
+  const approveAgentFn = useCallback(
+    async (signTypedDataAsync: SignTypedDataFn, chainId: number) => {
+      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 isTestnet = config.isTestnet ?? false;
+          const valid = await isAgentValid(existing, eoaAddress, isTestnet);
+          if (valid) {
+            setAgent(existing);
+            return;
+          }
+          clearStoredAgent(eoaAddress);
+        }
+
+        const { privateKey, address: agentAddress } = await generateAgentKey();
+        const isTestnet = config.isTestnet ?? false;
+
+        const wallet = {
+          signTypedData: signTypedDataAsync,
+          getAddresses: async () => [eoaAddress] as `0x${string}`[],
+          getChainId: async () => chainId,
+        };
+        const transport = new HttpTransport({ isTestnet });
+
+        await sdkApproveAgent(
+          { transport, wallet },
+          {
+            agentAddress: agentAddress.toLowerCase() as `0x${string}`,
+            agentName: AGENT_NAME,
+          },
+        );
+
+        const remote = await fetchActiveAgent(eoaAddress, isTestnet);
+        const validUntil =
+          remote?.validUntil ?? Date.now() + 7 * 24 * 60 * 60 * 1000;
+
+        const stored: StoredAgent = {
+          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);
   }, []);
 
   // ── Context value ────────────────────────────────────────────
-  const value = useMemo<HypurrConnectState>(
+  const value = useMemo<InternalConnectState>(
     () => ({
       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 ?? "",
@@ -392,20 +551,31 @@ export 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,

package/src/LoginModal.tsx

@@ -11,7 +11,7 @@ import {
   type CSSProperties,
   type ReactNode,
 } from "react";
-import { useHypurrConnect } from "./HypurrConnectProvider";
+import { useHypurrConnectInternal } from "./HypurrConnectProvider";
 import { MetaMaskColorIcon } from "./icons/MetaMaskColorIcon";
 import { TelegramColorIcon } from "./icons/TelegramColorIcon";
 import type { TelegramLoginData } from "./types";
@@ -131,7 +131,7 @@ function HoverButton({
 
 export function LoginModal({ onConnectWallet, walletIcon }: LoginModalProps) {
   const { loginTelegram, loginModalOpen, closeLoginModal, botId } =
-    useHypurrConnect();
+    useHypurrConnectInternal();
 
   const handleTelegramAuth = useCallback(
     (user: TelegramLoginData) => {