@hfunlabs/hypurr-connect 0.1.2 → 0.1.3

package/dist/index.js

@@ -3,8 +3,7 @@ import {
   ExchangeClient,
   HttpTransport
 } from "@hfunlabs/hyperliquid";
-import { approveAgent as sdkApproveAgent } from "@hfunlabs/hyperliquid/api/exchange";
-import { PrivateKeySigner } from "@hfunlabs/hyperliquid/signing";
+import { PrivateKeySigner, signUserSignedAction } from "@hfunlabs/hyperliquid/signing";
 import {
   createContext,
   useCallback,
@@ -246,6 +245,7 @@ function HypurrConnectProvider({
   const [agent, setAgent] = useState(null);
   const [eoaLoading, setEoaLoading] = useState(false);
   const [eoaError, setEoaError] = useState(null);
+  const eoaSignerRef = useRef(null);
   const authMethod = tgLoginData ? "telegram" : eoaAddress ? "eoa" : null;
   const [wallets, setWallets] = useState([]);
   const [selectedWalletId, setSelectedWalletId] = useState(0);
@@ -310,6 +310,13 @@ function HypurrConnectProvider({
     setAgent(null);
     setEoaError("Agent expired or was deregistered. Please reconnect.");
   };
+  const agentSignerRef = useRef(
+    agent ? new PrivateKeySigner(agent.privateKey) : null
+  );
+  useEffect(() => {
+    agentSignerRef.current = agent ? new PrivateKeySigner(agent.privateKey) : null;
+  }, [agent]);
+  const provisioningRef = useRef(null);
   const agentReady = authMethod === "telegram" || authMethod === "eoa" && !!agent;
   const exchange = useMemo(() => {
     if (authMethod === "telegram" && user?.address) {
@@ -326,12 +333,13 @@ function HypurrConnectProvider({
       });
     }
     if (authMethod === "eoa" && eoaAddress) {
-      if (!agent) {
+      const hasSigner = !!eoaSignerRef.current;
+      if (!agent && !hasSigner) {
         const noAgentTransport = {
           isTestnet: config.isTestnet ?? false,
           request() {
             throw new Error(
-              "[HypurrConnect] No agent key approved. Call approveAgent(signTypedDataAsync) before using the exchange client. This is required for EOA wallets to sign transactions on Hyperliquid."
+              "[HypurrConnect] No agent key approved and no wallet signer available. Either call approveAgent(signTypedDataAsync) or pass a signer to connectEoa(address, { signTypedData, chainId })."
             );
           }
         };
@@ -341,9 +349,8 @@ function HypurrConnectProvider({
           userAddress: eoaAddress
         });
       }
-      const inner = new HttpTransport({
-        isTestnet: config.isTestnet ?? false
-      });
+      const isTestnet = config.isTestnet ?? false;
+      const inner = new HttpTransport({ isTestnet });
       const deadAgentAddr = eoaAddress;
       const guardedTransport = {
         isTestnet: inner.isTestnet,
@@ -358,10 +365,110 @@ function HypurrConnectProvider({
           }
         }
       };
-      const wallet = new PrivateKeySigner(agent.privateKey);
+      const signerRef = eoaSignerRef;
+      const agentRef = agentSignerRef;
+      const provRef = provisioningRef;
+      const ownerAddress = eoaAddress;
+      const ensureAgent = async () => {
+        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)}`;
+            const nonce = Date.now();
+            const action = {
+              type: "approveAgent",
+              signatureChainId: chainIdHex,
+              hyperliquidChain: isTestnet ? "Testnet" : "Mainnet",
+              agentAddress: agentAddress.toLowerCase(),
+              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) {
+                return signer.signTypedData(params);
+              },
+              getAddresses: async () => [ownerAddress],
+              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 * 1e3;
+            const stored = {
+              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 dualWallet = {
+        address: ownerAddress,
+        async signTypedData(params) {
+          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
+            );
+          }
+          const agentSigner = await ensureAgent();
+          return agentSigner.signTypedData(params);
+        }
+      };
       return new ExchangeClient({
         transport: guardedTransport,
-        wallet
+        wallet: dualWallet,
+        signatureChainId: () => {
+          const id = signerRef.current?.chainId ?? 42161;
+          return `0x${id.toString(16)}`;
+        }
       });
     }
     return null;
@@ -458,21 +565,25 @@ function HypurrConnectProvider({
     setAgent(null);
     setEoaError(null);
   }, []);
-  const connectEoa = useCallback((address) => {
-    setEoaAddress(address);
-    setTgLoginData(null);
-    setTgUser(null);
-    setTgError(null);
-    setEoaError(null);
-    localStorage.removeItem(TELEGRAM_STORAGE_KEY);
-    const existing = loadAgent(address);
-    if (existing && existing.validUntil > Date.now()) {
-      setAgent(existing);
-    } else {
-      if (existing) clearAgent(address);
-      setAgent(null);
-    }
-  }, []);
+  const connectEoa = useCallback(
+    (address, signer) => {
+      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) clearAgent(address);
+        setAgent(null);
+      }
+    },
+    []
+  );
   const approveAgentFn = useCallback(
     async (signTypedDataAsync, chainId) => {
       if (!eoaAddress) {
@@ -480,6 +591,7 @@ function HypurrConnectProvider({
           "[HypurrConnect] Cannot approve agent: no EOA wallet connected. Call connectEoa(address) first."
         );
       }
+      eoaSignerRef.current = { signTypedData: signTypedDataAsync, chainId };
       setEoaLoading(true);
       setEoaError(null);
       try {
@@ -495,19 +607,49 @@ function HypurrConnectProvider({
         }
         const { privateKey, address: agentAddress } = await generateAgentKey();
         const isTestnet = config.isTestnet ?? false;
+        const chainIdHex = `0x${chainId.toString(16)}`;
+        const nonce = Date.now();
+        const action = {
+          type: "approveAgent",
+          signatureChainId: chainIdHex,
+          hyperliquidChain: isTestnet ? "Testnet" : "Mainnet",
+          agentAddress: agentAddress.toLowerCase(),
+          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 = {
-          signTypedData: signTypedDataAsync,
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          signTypedData(params) {
+            return signTypedDataAsync(params);
+          },
           getAddresses: async () => [eoaAddress],
           getChainId: async () => chainId
         };
-        const transport = new HttpTransport({ isTestnet });
-        await sdkApproveAgent(
-          { transport, wallet },
-          {
-            agentAddress: agentAddress.toLowerCase(),
-            agentName: AGENT_NAME
-          }
-        );
+        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 * 1e3;
         const stored = {
@@ -535,6 +677,7 @@ function HypurrConnectProvider({
     setEoaAddress(null);
     setAgent(null);
     setEoaError(null);
+    eoaSignerRef.current = null;
     localStorage.removeItem(TELEGRAM_STORAGE_KEY);
   }, []);
   const value = useMemo(
@@ -567,6 +710,8 @@ function HypurrConnectProvider({
       agentReady,
       clearAgent: handleClearAgent,
       botId: config.telegram?.botId ?? "",
+      botUsername: config.telegram?.botUsername ?? "",
+      useWidget: config.telegram?.useWidget ?? false,
       authDataMap,
       telegramClient: tgClient,
       staticClient
@@ -601,6 +746,8 @@ function HypurrConnectProvider({
       agentReady,
       handleClearAgent,
       config.telegram?.botId,
+      config.telegram?.botUsername,
+      config.telegram?.useWidget,
       authDataMap,
       tgClient,
       staticClient
@@ -617,7 +764,7 @@ import {
 } from "framer-motion";
 import {
   useCallback as useCallback2,
-  useEffect as useEffect2,
+  useEffect as useEffect3,
   useSyncExternalStore
 } from "react";
 
@@ -748,8 +895,53 @@ function TelegramColorIcon({ style }) {
   );
 }
 
+// src/TelegramLoginWidget.tsx
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var WIDGET_SCRIPT_URL = "https://telegram.org/js/telegram-widget.js?22";
+var CALLBACK_NAME = "__hypurrConnectTelegramAuth";
+function TelegramLoginWidget({
+  botUsername,
+  onAuth,
+  buttonSize = "large",
+  cornerRadius,
+  showUserPhoto = true,
+  requestAccess = true
+}) {
+  const containerRef = useRef2(null);
+  const onAuthRef = useRef2(onAuth);
+  onAuthRef.current = onAuth;
+  useEffect2(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    window[CALLBACK_NAME] = (user) => {
+      onAuthRef.current(user);
+    };
+    const script = document.createElement("script");
+    script.src = WIDGET_SCRIPT_URL;
+    script.async = true;
+    script.setAttribute("data-telegram-login", botUsername);
+    script.setAttribute("data-size", buttonSize);
+    script.setAttribute("data-onauth", `${CALLBACK_NAME}(user)`);
+    script.setAttribute("data-userpic", String(showUserPhoto));
+    if (requestAccess) {
+      script.setAttribute("data-request-access", "write");
+    }
+    if (cornerRadius !== void 0) {
+      script.setAttribute("data-radius", String(cornerRadius));
+    }
+    container.innerHTML = "";
+    container.appendChild(script);
+    return () => {
+      container.innerHTML = "";
+      delete window[CALLBACK_NAME];
+    };
+  }, [botUsername, buttonSize, cornerRadius, showUserPhoto, requestAccess]);
+  return /* @__PURE__ */ jsx4("div", { ref: containerRef });
+}
+
 // src/LoginModal.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var MOBILE_BREAKPOINT = 640;
 var btnStyle = {
   display: "flex",
@@ -827,7 +1019,7 @@ function HoverButton({
   onClick,
   children
 }) {
-  return /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(
     motion.button,
     {
       type: "button",
@@ -839,7 +1031,14 @@ function HoverButton({
   );
 }
 function LoginModal({ onConnectWallet, walletIcon }) {
-  const { loginTelegram, loginModalOpen, closeLoginModal, botId } = useHypurrConnectInternal();
+  const {
+    loginTelegram,
+    loginModalOpen,
+    closeLoginModal,
+    botId,
+    botUsername,
+    useWidget
+  } = useHypurrConnectInternal();
   const handleTelegramAuth = useCallback2(
     (user) => {
       loginTelegram(user);
@@ -847,7 +1046,7 @@ function LoginModal({ onConnectWallet, walletIcon }) {
     },
     [loginTelegram, closeLoginModal]
   );
-  useEffect2(() => {
+  useEffect3(() => {
     if (!loginModalOpen) return;
     function onMessage(e) {
       if (e.origin !== "https://oauth.telegram.org") return;
@@ -886,7 +1085,7 @@ function LoginModal({ onConnectWallet, walletIcon }) {
   }, [botId]);
   const isMobile = useIsMobile();
   const modalContent = /* @__PURE__ */ jsxs3(Fragment, { children: [
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       "div",
       {
         style: {
@@ -897,13 +1096,19 @@ function LoginModal({ onConnectWallet, walletIcon }) {
           gap: 8,
           overflow: "hidden"
         },
-        children: /* @__PURE__ */ jsxs3(HoverButton, { onClick: openTelegramOAuth, children: [
-          /* @__PURE__ */ jsx4(TelegramColorIcon, { style: iconSize }),
+        children: useWidget && botUsername ? /* @__PURE__ */ jsx5(
+          TelegramLoginWidget,
+          {
+            botUsername,
+            onAuth: handleTelegramAuth
+          }
+        ) : /* @__PURE__ */ jsxs3(HoverButton, { onClick: openTelegramOAuth, children: [
+          /* @__PURE__ */ jsx5(TelegramColorIcon, { style: iconSize }),
           "Telegram"
         ] })
       }
     ),
-    /* @__PURE__ */ jsx4("div", { style: dividerStyle }),
+    /* @__PURE__ */ jsx5("div", { style: dividerStyle }),
     /* @__PURE__ */ jsxs3(
       HoverButton,
       {
@@ -912,14 +1117,14 @@ function LoginModal({ onConnectWallet, walletIcon }) {
           onConnectWallet();
         },
         children: [
-          walletIcon ?? /* @__PURE__ */ jsx4(MetaMaskColorIcon, { style: iconSize }),
+          walletIcon ?? /* @__PURE__ */ jsx5(MetaMaskColorIcon, { style: iconSize }),
           "Wallet"
         ]
       }
     )
   ] });
-  return /* @__PURE__ */ jsx4(AnimatePresence, { children: loginModalOpen && (isMobile ? /* @__PURE__ */ jsx4(MobileDrawer, { onClose: closeLoginModal, children: modalContent }, "drawer") : /* @__PURE__ */ jsxs3(Fragment, { children: [
-    /* @__PURE__ */ jsx4(
+  return /* @__PURE__ */ jsx5(AnimatePresence, { children: loginModalOpen && (isMobile ? /* @__PURE__ */ jsx5(MobileDrawer, { onClose: closeLoginModal, children: modalContent }, "drawer") : /* @__PURE__ */ jsxs3(Fragment, { children: [
+    /* @__PURE__ */ jsx5(
       motion.div,
       {
         style: backdropStyle,
@@ -931,7 +1136,7 @@ function LoginModal({ onConnectWallet, walletIcon }) {
       },
       "backdrop"
     ),
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       motion.div,
       {
         style: modalWrapperStyle,
@@ -950,7 +1155,7 @@ function LoginModal({ onConnectWallet, walletIcon }) {
             transition: { duration: 0.2, ease: "easeOut" },
             onClick: (e) => e.stopPropagation(),
             children: [
-              /* @__PURE__ */ jsx4("p", { style: headingStyle, children: "Connect" }),
+              /* @__PURE__ */ jsx5("p", { style: headingStyle, children: "Connect" }),
               modalContent
             ]
           }
@@ -1017,7 +1222,7 @@ function MobileDrawer({
     [onClose, controls]
   );
   return /* @__PURE__ */ jsxs3(Fragment, { children: [
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       motion.div,
       {
         style: backdropStyle,
@@ -1042,9 +1247,9 @@ function MobileDrawer({
         dragElastic: { top: 0, bottom: 0.4 },
         onDragEnd: handleDragEnd,
         children: [
-          /* @__PURE__ */ jsx4("div", { style: drawerBgStyle }),
-          /* @__PURE__ */ jsx4("div", { style: grabHandleAreaStyle, children: /* @__PURE__ */ jsx4("div", { style: grabHandleStyle }) }),
-          /* @__PURE__ */ jsx4("p", { style: headingStyle, children: "Connect" }),
+          /* @__PURE__ */ jsx5("div", { style: drawerBgStyle }),
+          /* @__PURE__ */ jsx5("div", { style: grabHandleAreaStyle, children: /* @__PURE__ */ jsx5("div", { style: grabHandleStyle }) }),
+          /* @__PURE__ */ jsx5("p", { style: headingStyle, children: "Connect" }),
           children
         ]
       },
@@ -1052,10 +1257,21 @@ function MobileDrawer({
     )
   ] });
 }
+
+// src/types.ts
+function createEoaSigner(signTypedDataAsync, chainId) {
+  const resolve = typeof signTypedDataAsync === "function" ? signTypedDataAsync : (args) => signTypedDataAsync.current(args);
+  return {
+    signTypedData: (params) => resolve(params),
+    chainId
+  };
+}
 export {
   GrpcExchangeTransport,
   HypurrConnectProvider,
   LoginModal,
+  TelegramLoginWidget,
+  createEoaSigner,
   createStaticClient,
   createTelegramClient,
   useHypurrConnect