@hfunlabs/hypurr-connect 0.1.1 → 0.1.3

package/src/HypurrConnectProvider.tsx

@@ -1,23 +1,32 @@
 import {
   ExchangeClient,
   HttpTransport,
-  InfoClient,
+  type IRequestTransport,
 } from "@hfunlabs/hyperliquid";
-import { PrivateKeySigner } from "@hfunlabs/hyperliquid/signing";
+import { PrivateKeySigner, signUserSignedAction } 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";
@@ -25,6 +34,7 @@ import { createStaticClient, createTelegramClient } from "./grpc";
 import { GrpcExchangeTransport } from "./GrpcExchangeTransport";
 import type {
   AuthMethod,
+  EoaSigner,
   HypurrConnectConfig,
   HypurrConnectState,
   HypurrUser,
@@ -33,6 +43,13 @@ 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;
+  botUsername: string;
+  useWidget: boolean;
+}
+
 const TELEGRAM_STORAGE_KEY = "hypurr-connect-tg-user";
 
 function toAuthDataMap(data: TelegramLoginData): Record<string, string> {
@@ -48,7 +65,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 +76,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 +116,8 @@ export function HypurrConnectProvider({
     [tgLoginData],
   );
 
+  const [tgUserTick, setTgUserTick] = useState(0);
+
   useEffect(() => {
     if (!tgLoginData) return;
     let cancelled = false;
@@ -98,9 +127,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 +142,14 @@ 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);
+  const eoaSignerRef = useRef<EoaSigner | null>(null);
 
   // ── Derived auth ─────────────────────────────────────────────
   const authMethod: AuthMethod = tgLoginData
@@ -136,19 +158,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 +222,43 @@ 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)
+  // EOA: dual wallet — agent key for L1 actions, master signer for user-signed
+  //   actions (transfers, withdrawals, etc.). The dual wallet inspects the
+  //   EIP-712 domain name to decide which key signs each request.
+  //   When a signer is available but no agent exists yet, the dual wallet
+  //   auto-provisions an agent on the first L1 action (triggers one extra
+  //   wallet popup for the approveAgent user-signed action).
+
+  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.");
+  };
+
+  // Mutable slot for the agent signer — the dual wallet reads this so it can
+  // pick up a newly provisioned agent without waiting for a React re-render.
+  const agentSignerRef = useRef<PrivateKeySigner | null>(
+    agent ? new PrivateKeySigner(agent.privateKey) : null,
+  );
+  useEffect(() => {
+    agentSignerRef.current = agent
+      ? new PrivateKeySigner(agent.privateKey)
+      : null;
+  }, [agent]);
+
+  // Lock to prevent concurrent auto-provisioning attempts
+  const provisioningRef = useRef<Promise<PrivateKeySigner> | null>(null);
+
+  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 +275,304 @@ export function HypurrConnectProvider({
       });
     }
 
-    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]);
+    if (authMethod === "eoa" && eoaAddress) {
+      const hasSigner = !!eoaSignerRef.current;
 
-  // ── USDC balance from Hyperliquid ──────────────────────────────
-  const infoClient = useMemo(
-    () =>
-      new InfoClient({
-        transport: new HttpTransport({
+      if (!agent && !hasSigner) {
+        const noAgentTransport: IRequestTransport = {
           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}`,
+          request(): Promise<never> {
+            throw new Error(
+              "[HypurrConnect] No agent key approved and no wallet signer available. " +
+                "Either call approveAgent(signTypedDataAsync) or pass a signer to " +
+                "connectEoa(address, { signTypedData, chainId }).",
+            );
+          },
+        };
+        return new ExchangeClient({
+          transport: noAgentTransport,
+          externalSigning: true,
+          userAddress: eoaAddress,
         });
-        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 inner = new HttpTransport({ isTestnet });
+      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 types = {
-        "HyperliquidTransaction:ApproveAgent": [
-          { name: "hyperliquidChain", type: "string" },
-          { name: "agentAddress", type: "address" },
-          { name: "agentName", type: "string" },
-          { name: "nonce", type: "uint64" },
-        ],
+
+      const signerRef = eoaSignerRef;
+      const agentRef = agentSignerRef;
+      const provRef = provisioningRef;
+      const ownerAddress = eoaAddress;
+
+      /**
+       * Auto-provision an agent key when one doesn't exist yet.
+       *
+       * Bypasses the SDK's `executeUserSignedAction` (and its per-address
+       * semaphore) to avoid deadlocking when called from inside
+       * `dualWallet.signTypedData`, which is already inside the SDK's
+       * `executeL1Action` lock for the same address.
+       */
+      const ensureAgent = async (): Promise<PrivateKeySigner> => {
+        const existing = agentRef.current;
+        if (existing) return existing;
+
+        if (provRef.current) return provRef.current;
+
+        const signer = signerRef.current;
+        if (!signer) {
+          throw new Error(
+            "[HypurrConnect] No wallet signer available to auto-provision agent. " +
+              "Pass a signer to connectEoa(address, { signTypedData, chainId }).",
+          );
+        }
+
+        provRef.current = (async () => {
+          try {
+            const { privateKey, address: agentAddress } =
+              await generateAgentKey();
+
+            const chainIdHex = `0x${signer.chainId.toString(16)}` as `0x${string}`;
+            const nonce = Date.now();
+            const action = {
+              type: "approveAgent" as const,
+              signatureChainId: chainIdHex,
+              hyperliquidChain: (isTestnet ? "Testnet" : "Mainnet") as
+                | "Testnet"
+                | "Mainnet",
+              agentAddress: agentAddress.toLowerCase() as `0x${string}`,
+              agentName: AGENT_NAME,
+              nonce,
+            };
+
+            const approveAgentTypes = {
+              "HyperliquidTransaction:ApproveAgent": [
+                { name: "hyperliquidChain", type: "string" },
+                { name: "agentAddress", type: "address" },
+                { name: "agentName", type: "string" },
+                { name: "nonce", type: "uint64" },
+              ],
+            };
+
+            const wallet = {
+              // eslint-disable-next-line @typescript-eslint/no-explicit-any
+              signTypedData(params: any) {
+                return signer.signTypedData(params);
+              },
+              getAddresses: async () => [ownerAddress] as `0x${string}`[],
+              getChainId: async () => signer.chainId,
+            };
+
+            const signature = await signUserSignedAction({
+              wallet,
+              action,
+              types: approveAgentTypes,
+            });
+
+            const apiUrl = isTestnet
+              ? "https://api.hyperliquid-testnet.xyz/exchange"
+              : "https://api.hyperliquid.xyz/exchange";
+
+            const res = await fetch(apiUrl, {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({ action, signature, nonce }),
+            });
+
+            const body = await res.json();
+            if (body?.status === "err") {
+              throw new Error(
+                `approveAgent API error: ${body.response ?? JSON.stringify(body)}`,
+              );
+            }
+
+            const remote = await fetchActiveAgent(ownerAddress, isTestnet);
+            const validUntil =
+              remote?.validUntil ?? Date.now() + 7 * 24 * 60 * 60 * 1000;
+
+            const stored: StoredAgent = {
+              privateKey,
+              address: agentAddress,
+              approvedAt: Date.now(),
+              validUntil,
+            };
+            saveAgent(ownerAddress, stored);
+
+            const newSigner = new PrivateKeySigner(privateKey);
+            agentRef.current = newSigner;
+            setAgent(stored);
+
+            return newSigner;
+          } finally {
+            provRef.current = null;
+          }
+        })();
+
+        return provRef.current;
       };
 
-      const signature = await signTypedDataAsync({
-        domain: {
-          name: "HyperliquidSignTransaction",
-          version: "1",
-          chainId: isTestnet ? 421614 : 42161,
-          verifyingContract: "0x0000000000000000000000000000000000000000",
+      // Dual wallet: routes signing based on the EIP-712 domain.
+      // "Exchange" domain → L1 action → agent key signs (auto-provisions if needed).
+      // "HyperliquidSignTransaction" domain → user-signed → master wallet (popup).
+      const dualWallet = {
+        address: ownerAddress,
+        async signTypedData(params: {
+          domain: {
+            name?: string;
+            version?: string;
+            chainId?: number;
+            verifyingContract?: `0x${string}`;
+            salt?: `0x${string}`;
+          };
+          types: Record<string, { name: string; type: string }[]>;
+          primaryType: string;
+          message: Record<string, unknown>;
+        }): Promise<`0x${string}`> {
+          if (params.domain.name === "HyperliquidSignTransaction") {
+            const signer = signerRef.current;
+            if (!signer) {
+              throw new Error(
+                "[HypurrConnect] No wallet signer available for user-signed actions. " +
+                  "Pass a signer to connectEoa(address, { signTypedData, chainId }).",
+              );
+            }
+            return signer.signTypedData(
+              params as Parameters<typeof signer.signTypedData>[0],
+            );
+          }
+
+          const agentSigner = await ensureAgent();
+          return agentSigner.signTypedData(params);
         },
-        types,
-        primaryType: "HyperliquidTransaction:ApproveAgent",
-        message: {
-          hyperliquidChain: action.hyperliquidChain,
-          agentAddress: action.agentAddress,
-          agentName: "",
-          nonce: BigInt(nonce),
+      };
+
+      return new ExchangeClient({
+        transport: guardedTransport,
+        wallet: dualWallet,
+        signatureChainId: () => {
+          const id = signerRef.current?.chainId ?? 42161;
+          return `0x${id.toString(16)}` as `0x${string}`;
         },
       });
+    }
 
-      const r = `0x${signature.slice(2, 66)}`;
-      const s = `0x${signature.slice(66, 130)}`;
-      const v = parseInt(signature.slice(130, 132), 16);
+    return null;
+  }, [
+    authMethod,
+    user,
+    agent,
+    eoaAddress,
+    config.isTestnet,
+    tgClient,
+    authDataMap,
+  ]);
 
-      const url = isTestnet
-        ? "https://api.hyperliquid-testnet.xyz/exchange"
-        : "https://api.hyperliquid.xyz/exchange";
+  const handleClearAgent = useCallback(() => {
+    if (eoaAddress) {
+      clearStoredAgent(eoaAddress);
+      setAgent(null);
+    }
+  }, [eoaAddress]);
 
-      const res = await fetch(url, {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({
-          action,
-          nonce,
-          signature: { r, s, v },
-        }),
+  // ── 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],
+  );
 
-      const body = await res.json();
-      if (body?.status !== "ok") {
-        throw new Error(`approveAgent failed: ${JSON.stringify(body)}`);
+  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);
       }
+      refreshWallets();
+    },
+    [tgClient, authDataMap, selectedWalletId, wallets, refreshWallets],
+  );
 
-      const stored: StoredAgent = {
-        privateKey,
-        address: agentAddress,
-        approvedAt: Date.now(),
-      };
-      saveAgent(eoaAddress, stored);
-      setAgent(stored);
+  const createWalletPack = useCallback(
+    async (name: string): Promise<number> => {
+      const { response } = await tgClient.telegramChatWalletPackCreate({
+        authData: authDataMap,
+        name,
+      });
+      refreshWallets();
+      return response.packId;
     },
-    [eoaAddress, config.isTestnet],
+    [tgClient, authDataMap, refreshWallets],
   );
 
-  const handleClearAgent = useCallback(() => {
-    if (eoaAddress) {
-      clearStoredAgent(eoaAddress);
-      setAgent(null);
-    }
-  }, [eoaAddress]);
+  const addPackLabel = useCallback(
+    async (params: {
+      walletAddress: string;
+      walletLabel: string;
+      packId: number;
+    }): Promise<void> => {
+      await tgClient.telegramChatWalletPackLabelAdd({
+        authData: authDataMap,
+        ...params,
+      });
+      refreshWallets();
+    },
+    [tgClient, authDataMap, refreshWallets],
+  );
+
+  const modifyPackLabel = useCallback(
+    async (params: {
+      walletLabelOld: string;
+      walletLabelNew: string;
+      packId: number;
+    }): Promise<void> => {
+      await tgClient.telegramChatWalletPackLabelModify({
+        authData: authDataMap,
+        ...params,
+      });
+      refreshWallets();
+    },
+    [tgClient, authDataMap, refreshWallets],
+  );
+
+  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,15 +585,133 @@ export function HypurrConnectProvider({
     localStorage.setItem(TELEGRAM_STORAGE_KEY, JSON.stringify(data));
     setEoaAddress(null);
     setAgent(null);
+    setEoaError(null);
   }, []);
 
-  const loginEoa = useCallback((address: `0x${string}`) => {
-    setEoaAddress(address);
-    setTgLoginData(null);
-    setTgUser(null);
-    setTgError(null);
-    localStorage.removeItem(TELEGRAM_STORAGE_KEY);
-  }, []);
+  const connectEoa = useCallback(
+    (address: `0x${string}`, signer?: EoaSigner) => {
+      eoaSignerRef.current = signer ?? null;
+      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.",
+        );
+      }
+
+      eoaSignerRef.current = { signTypedData: signTypedDataAsync, chainId };
+
+      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 chainIdHex = `0x${chainId.toString(16)}` as `0x${string}`;
+        const nonce = Date.now();
+        const action = {
+          type: "approveAgent" as const,
+          signatureChainId: chainIdHex,
+          hyperliquidChain: (isTestnet ? "Testnet" : "Mainnet") as
+            | "Testnet"
+            | "Mainnet",
+          agentAddress: agentAddress.toLowerCase() as `0x${string}`,
+          agentName: AGENT_NAME,
+          nonce,
+        };
+
+        const approveAgentTypes = {
+          "HyperliquidTransaction:ApproveAgent": [
+            { name: "hyperliquidChain", type: "string" },
+            { name: "agentAddress", type: "address" },
+            { name: "agentName", type: "string" },
+            { name: "nonce", type: "uint64" },
+          ],
+        };
+
+        const wallet = {
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          signTypedData(params: any) {
+            return signTypedDataAsync(params);
+          },
+          getAddresses: async () => [eoaAddress] as `0x${string}`[],
+          getChainId: async () => chainId,
+        };
+
+        const signature = await signUserSignedAction({
+          wallet,
+          action,
+          types: approveAgentTypes,
+        });
+
+        const apiUrl = isTestnet
+          ? "https://api.hyperliquid-testnet.xyz/exchange"
+          : "https://api.hyperliquid.xyz/exchange";
+
+        const res = await fetch(apiUrl, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ action, signature, nonce }),
+        });
+
+        const body = await res.json();
+        if (body?.status === "err") {
+          throw new Error(
+            `approveAgent API error: ${body.response ?? JSON.stringify(body)}`,
+          );
+        }
+
+        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);
@@ -353,37 +719,51 @@ export function HypurrConnectProvider({
     setTgError(null);
     setEoaAddress(null);
     setAgent(null);
+    setEoaError(null);
+    eoaSignerRef.current = 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 ?? "",
+      botUsername: config.telegram?.botUsername ?? "",
+      useWidget: config.telegram?.useWidget ?? false,
 
       authDataMap,
       telegramClient: tgClient,
@@ -392,22 +772,35 @@ 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,
+      config.telegram?.botUsername,
+      config.telegram?.useWidget,
       authDataMap,
       tgClient,
       staticClient,