@hfunlabs/hypurr-connect 0.1.24 → 0.1.26

package/README.md

@@ -126,7 +126,7 @@ interface HypurrConnectConfig {
   isTestnet?: boolean; // Use testnet endpoints (default: false)
   telegram: {
     authHubUrl?: string; // Auth hub URL (default: https://auth.hypurr.fun/login)
-    returnTo?: string | (() => string); // Callback URL (default: current page)
+    redirectUri?: string | (() => string); // OAuth redirect URI (default: current page)
     scope?: string | string[]; // Requested JWT scopes
   };
 }
@@ -148,15 +148,15 @@ for generated protobuf service clients.
 
 1. User clicks "Telegram" in the `LoginModal`.
 2. The SDK opens the configured auth hub in a popup with `client_id`,
-   `return_to`, `state`, requested `scope`, `code_challenge`, and
-   `code_challenge_method=S256`.
-3. The auth hub performs Telegram login and redirects back to `return_to` with
+   `redirect_uri`, `return_to`, `state`, requested `scope`, `code_challenge`,
+   and `code_challenge_method=S256`.
+3. The auth hub performs Telegram login and redirects back to `redirect_uri` with
    either a legacy scoped JWT or an authorization code.
 4. The popup callback page posts `{ token, state }` or `{ code, state }` to the
    opener with `postMessage` and closes.
 5. The opener validates `state`. Legacy tokens are stored directly; auth codes
    are exchanged at the OAuth metadata `token_endpoint` with the stored PKCE
-   verifier.
+   verifier and the original callback URL as `redirect_uri`.
 6. The SDK calls the Hypurr gRPC backend with `Authorization: Bearer <jwt>`
    metadata.
 7. An `ExchangeClient` is created with `GrpcExchangeTransport`; exchange
@@ -164,8 +164,8 @@ for generated protobuf service clients.
 8. The JWT session is persisted in localStorage (`hypurr-connect-tg-jwt`).
 
 If the popup is blocked, the SDK falls back to a full-page redirect. The
-default `returnTo` is the current page with auth query params removed; custom
-`returnTo` URLs should load the app and mount `HypurrConnectProvider` so the
+default `redirectUri` is the current page with auth query params removed; custom
+`redirectUri` URLs should load the app and mount `HypurrConnectProvider` so the
 popup callback bridge can run.
 
 ### EOA Wallet Login

package/dist/index.d.ts

@@ -27,8 +27,8 @@ interface HypurrConnectConfig {
     telegram?: {
         /** Auth hub login URL. Defaults to https://auth.hypurr.fun/login. */
         authHubUrl?: string;
-        /** Optional callback URL. Defaults to the current page without auth query params. */
-        returnTo?: string | (() => string);
+        /** Optional OAuth redirect URI. Defaults to the current page without auth query params. */
+        redirectUri?: string | (() => string);
         /** Requested hub scopes. Defaults to the scopes required by this SDK. */
         scope?: string | string[];
         /** @deprecated Telegram login is handled by the auth hub; this option is ignored. */

package/dist/index.js

@@ -80,6 +80,28 @@ function saveAgent(masterAddress, agent) {
 function clearAgent(masterAddress) {
   localStorage.removeItem(storageKey(masterAddress));
 }
+function loadAllAgents() {
+  const agents = [];
+  try {
+    for (let i = 0; i < localStorage.length; i++) {
+      const key = localStorage.key(i);
+      if (!key || !key.startsWith(`${AGENT_STORAGE_PREFIX}:`)) continue;
+      const raw = localStorage.getItem(key);
+      if (!raw) continue;
+      try {
+        const agent = JSON.parse(raw);
+        agents.push({
+          ...agent,
+          masterAddress: key.slice(key.indexOf(":") + 1)
+        });
+      } catch {
+      }
+    }
+  } catch {
+    return [];
+  }
+  return agents.sort((a, b) => b.approvedAt - a.approvedAt);
+}
 async function generateAgentKey() {
   const bytes = crypto.getRandomValues(new Uint8Array(32));
   const hex = Array.from(bytes).map((b) => b.toString(16).padStart(2, "0")).join("");
@@ -100,10 +122,7 @@ async function fetchExtraAgents(userAddress, isTestnet) {
   if (!res.ok) return [];
   const agents = await res.json();
   if (!Array.isArray(agents)) return [];
-  return agents.map((agent) => ({
-    ...agent,
-    validUntil: agent.validUntil * 1e3
-  }));
+  return agents;
 }
 async function fetchActiveAgent(userAddress, isTestnet) {
   const nowMs = Date.now();
@@ -296,7 +315,7 @@ var TELEGRAM_STORAGE_KEY = "hypurr-connect-tg-jwt";
 var LEGACY_TELEGRAM_STORAGE_KEY = "hypurr-connect-tg-user";
 var TELEGRAM_AUTH_STATE_KEY = "hypurr-connect-auth-state";
 var TELEGRAM_AUTH_CODE_VERIFIER_PREFIX = "hypurr-connect-auth-code-verifier:";
-var TELEGRAM_AUTH_RETURN_TO_PREFIX = "hypurr-connect-auth-return-to:";
+var TELEGRAM_AUTH_REDIRECT_URI_PREFIX = "hypurr-connect-auth-redirect-uri:";
 var TELEGRAM_AUTH_MESSAGE = "hypurr-connect:telegram-auth";
 var DEFAULT_AUTH_HUB_URL = "https://auth.hypurr.fun/login";
 var DEFAULT_MEDIA_URL = "https://media.hypurr.fun";
@@ -429,7 +448,7 @@ function withExpectedFrom(transaction, address) {
   }
   return transaction.from ? transaction : { ...transaction, from: address };
 }
-function currentReturnTo() {
+function currentRedirectUri() {
   const url = new URL(window.location.href);
   for (const param of [
     "code",
@@ -506,23 +525,23 @@ function normalizeClientId(clientId) {
 function codeVerifierStorageKey(state) {
   return `${TELEGRAM_AUTH_CODE_VERIFIER_PREFIX}${state}`;
 }
-function returnToStorageKey(state) {
-  return `${TELEGRAM_AUTH_RETURN_TO_PREFIX}${state}`;
+function redirectUriStorageKey(state) {
+  return `${TELEGRAM_AUTH_REDIRECT_URI_PREFIX}${state}`;
 }
-function storeTelegramAuthSession(state, codeVerifier, returnTo) {
+function storeTelegramAuthSession(state, codeVerifier, redirectUri) {
   const previousState = sessionStorage.getItem(TELEGRAM_AUTH_STATE_KEY);
   if (previousState) {
     sessionStorage.removeItem(codeVerifierStorageKey(previousState));
-    sessionStorage.removeItem(returnToStorageKey(previousState));
+    sessionStorage.removeItem(redirectUriStorageKey(previousState));
   }
   sessionStorage.setItem(TELEGRAM_AUTH_STATE_KEY, state);
   sessionStorage.setItem(codeVerifierStorageKey(state), codeVerifier);
-  sessionStorage.setItem(returnToStorageKey(state), returnTo);
+  sessionStorage.setItem(redirectUriStorageKey(state), redirectUri);
 }
 function clearTelegramAuthSession(state) {
   sessionStorage.removeItem(TELEGRAM_AUTH_STATE_KEY);
   sessionStorage.removeItem(codeVerifierStorageKey(state));
-  sessionStorage.removeItem(returnToStorageKey(state));
+  sessionStorage.removeItem(redirectUriStorageKey(state));
 }
 function takeTelegramAuthSession(state) {
   const expectedState = sessionStorage.getItem(TELEGRAM_AUTH_STATE_KEY);
@@ -530,17 +549,17 @@ function takeTelegramAuthSession(state) {
   if (!expectedState || state !== expectedState) {
     if (expectedState) {
       sessionStorage.removeItem(codeVerifierStorageKey(expectedState));
-      sessionStorage.removeItem(returnToStorageKey(expectedState));
+      sessionStorage.removeItem(redirectUriStorageKey(expectedState));
     }
     return null;
   }
   const codeVerifierKey = codeVerifierStorageKey(state);
-  const returnToKey = returnToStorageKey(state);
+  const redirectUriKey = redirectUriStorageKey(state);
   const codeVerifier = sessionStorage.getItem(codeVerifierKey);
-  const returnTo = sessionStorage.getItem(returnToKey);
+  const redirectUri = sessionStorage.getItem(redirectUriKey);
   sessionStorage.removeItem(codeVerifierKey);
-  sessionStorage.removeItem(returnToKey);
-  return { codeVerifier, returnTo };
+  sessionStorage.removeItem(redirectUriKey);
+  return { codeVerifier, redirectUri };
 }
 function fallbackAuthTokenUrl(authHubUrl) {
   const url = new URL(authHubUrl || DEFAULT_AUTH_HUB_URL);
@@ -604,14 +623,14 @@ async function exchangeTelegramAuthCode({
   clientId,
   code,
   codeVerifier,
-  returnTo
+  redirectUri
 }) {
   const body = new URLSearchParams({
     client_id: clientId,
     code,
     code_verifier: codeVerifier,
     grant_type: "authorization_code",
-    return_to: returnTo
+    redirect_uri: redirectUri
   });
   const response = await fetch(await resolveAuthTokenUrl(authHubUrl), {
     method: "POST",
@@ -730,7 +749,7 @@ function HypurrConnectProvider({
           clientId: normalizeClientId(config.clientId),
           code: callback.code,
           codeVerifier: authSession.codeVerifier,
-          returnTo: authSession.returnTo || currentReturnTo()
+          redirectUri: authSession.redirectUri || currentRedirectUri()
         }).then(acceptTelegramToken).catch(
           (err) => setTgError(err instanceof Error ? err.message : String(err))
         ).finally(() => setTgLoading(false));
@@ -1529,9 +1548,9 @@ function HypurrConnectProvider({
   const loginTelegram = useCallback(() => {
     const state = randomState();
     const codeVerifier = randomCodeVerifier();
-    const configuredReturnTo = config.telegram?.returnTo;
-    const returnTo = typeof configuredReturnTo === "function" ? configuredReturnTo() : configuredReturnTo || currentReturnTo();
-    storeTelegramAuthSession(state, codeVerifier, returnTo);
+    const configuredRedirectUri = config.telegram?.redirectUri;
+    const redirectUri = typeof configuredRedirectUri === "function" ? configuredRedirectUri() : configuredRedirectUri || currentRedirectUri();
+    storeTelegramAuthSession(state, codeVerifier, redirectUri);
     const width = 520;
     const height = 720;
     const left = window.screenX + Math.max(0, (window.outerWidth - width) / 2);
@@ -1557,7 +1576,8 @@ function HypurrConnectProvider({
           "client_id",
           normalizeClientId(config.clientId)
         );
-        authUrl.searchParams.set("return_to", returnTo);
+        authUrl.searchParams.set("redirect_uri", redirectUri);
+        authUrl.searchParams.set("return_to", redirectUri);
         authUrl.searchParams.set("state", state);
         authUrl.searchParams.set(
           "scope",
@@ -1583,7 +1603,7 @@ function HypurrConnectProvider({
   }, [
     config.clientId,
     config.telegram?.authHubUrl,
-    config.telegram?.returnTo,
+    config.telegram?.redirectUri,
     config.telegram?.scope
   ]);
   const connectEoa = useCallback(
@@ -1746,6 +1766,7 @@ function HypurrConnectProvider({
       agent,
       agentReady,
       clearAgent: handleClearAgent,
+      eoaAddress,
       authDataMap,
       authToken: tgAuthToken,
       telegramRpcOptions,
@@ -1789,6 +1810,7 @@ function HypurrConnectProvider({
       agent,
       agentReady,
       handleClearAgent,
+      eoaAddress,
       authDataMap,
       tgAuthToken,
       telegramRpcOptions,
@@ -3296,7 +3318,7 @@ import { AnimatePresence as AnimatePresence7, motion as motion7 } from "framer-m
 import {
   Fragment as Fragment8,
   useCallback as useCallback9,
-  useMemo as useMemo3,
+  useMemo as useMemo4,
   useState as useState8
 } from "react";
 
@@ -3402,6 +3424,8 @@ function AgentExpiryWarningIcon({
 import { AnimatePresence as AnimatePresence6, motion as motion6 } from "framer-motion";
 import {
   useCallback as useCallback8,
+  useEffect as useEffect3,
+  useMemo as useMemo3,
   useState as useState7
 } from "react";
 
@@ -4360,11 +4384,40 @@ function UserProfileModal({
     wallets: userWallets,
     deleteWallet,
     renameWallet,
-    authMethod
+    authMethod,
+    agent,
+    eoaAddress,
+    clearAgent: clearContextAgent
   } = useHypurrConnectInternal();
   const [settingsTab, setSettingsTab] = useState7("ui");
   const [walletToDelete, setWalletToDelete] = useState7(null);
   const [walletToRename, setWalletToRename] = useState7(null);
+  const [storedAgents, setStoredAgents] = useState7([]);
+  useEffect3(() => {
+    if (isOpen) setStoredAgents(loadAllAgents());
+  }, [isOpen]);
+  const localAgents = useMemo3(() => {
+    const byOwner = /* @__PURE__ */ new Map();
+    for (const a of storedAgents) byOwner.set(a.masterAddress.toLowerCase(), a);
+    if (agent && eoaAddress && !byOwner.has(eoaAddress.toLowerCase())) {
+      byOwner.set(eoaAddress.toLowerCase(), {
+        ...agent,
+        masterAddress: eoaAddress
+      });
+    }
+    return [...byOwner.values()].sort((a, b) => b.approvedAt - a.approvedAt);
+  }, [storedAgents, agent, eoaAddress]);
+  const handleRemoveLocalAgent = useCallback8(
+    (masterAddress) => {
+      if (eoaAddress && masterAddress.toLowerCase() === eoaAddress.toLowerCase()) {
+        clearContextAgent();
+      } else {
+        clearAgent(masterAddress);
+      }
+      setStoredAgents(loadAllAgents());
+    },
+    [eoaAddress, clearContextAgent]
+  );
   const profilePic = user?.photoUrl || "";
   const displayName = user?.displayName || "";
   const hfunScore = user?.hfunScore ?? null;
@@ -4387,10 +4440,11 @@ function UserProfileModal({
     [renameWallet, onWalletRenamed]
   );
   const handleCopyAddress = useCallback8(() => {
-    if (!displayName) return;
-    navigator.clipboard.writeText(displayName);
+    const address = user?.address || eoaAddress || displayName;
+    if (!address) return;
+    navigator.clipboard.writeText(address);
     onNotify?.({ type: "success", message: "Address copied" });
-  }, [displayName, onNotify]);
+  }, [user?.address, eoaAddress, displayName, onNotify]);
   return /* @__PURE__ */ jsxs10("div", { className: "hypurr-connect", style: { display: "contents" }, children: [
     /* @__PURE__ */ jsx11(AnimatePresence6, { children: isOpen && /* @__PURE__ */ jsxs10(Fragment7, { children: [
       /* @__PURE__ */ jsx11(SpinKeyframes, {}),
@@ -4904,7 +4958,51 @@ function UserProfileModal({
                           " linked"
                         ]
                       }
-                    )
+                    ),
+                    localAgents.length > 0 && /* @__PURE__ */ jsxs10("div", { style: { marginTop: 8 }, children: [
+                      /* @__PURE__ */ jsx11(
+                        "p",
+                        {
+                          style: {
+                            margin: "0 0 8px",
+                            color: profileColors.muted,
+                            ...upperLabelStyle
+                          },
+                          children: "Agent wallets"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx11(
+                        "div",
+                        {
+                          style: {
+                            display: "flex",
+                            flexDirection: "column",
+                            gap: 6
+                          },
+                          children: localAgents.map((agent2) => /* @__PURE__ */ jsx11(
+                            LocalAgentRow,
+                            {
+                              agent: agent2,
+                              onRemove: () => handleRemoveLocalAgent(agent2.masterAddress)
+                            },
+                            agent2.masterAddress
+                          ))
+                        }
+                      ),
+                      /* @__PURE__ */ jsx11(
+                        "p",
+                        {
+                          style: {
+                            margin: "8px 0 0",
+                            fontSize: 12.5,
+                            lineHeight: "1rem",
+                            color: profileColors.subdued,
+                            textAlign: "center"
+                          },
+                          children: "Approved on this device"
+                        }
+                      )
+                    ] })
                   ]
                 }
               )
@@ -5148,6 +5246,127 @@ function WalletRow({
     }
   );
 }
+function shortAddress(address) {
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+}
+function normalizeExpiryMs(validUntil) {
+  return validUntil > 1e14 ? Math.round(validUntil / 1e3) : validUntil;
+}
+function LocalAgentRow({
+  agent,
+  onRemove
+}) {
+  const [hovered, setHovered] = useState7(false);
+  const expiresAtMs = normalizeExpiryMs(agent.validUntil);
+  const isExpired = expiresAtMs <= Date.now();
+  const agentTypeColor = "rgb(var(--blue-500))";
+  return /* @__PURE__ */ jsxs10(
+    "div",
+    {
+      style: {
+        ...walletRowStyle,
+        background: hovered ? profileColors.surfaceBtnHover : profileColors.surfaceBtn,
+        borderColor: hovered ? profileColors.surfaceBdHover : profileColors.surfaceBd
+      },
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      children: [
+        /* @__PURE__ */ jsx11(
+          "div",
+          {
+            style: {
+              width: 32,
+              height: 32,
+              borderRadius: 6,
+              background: "rgb(var(--blue-500) / 0.16)",
+              border: "1px solid rgb(var(--blue-500) / 0.34)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              flexShrink: 0,
+              color: agentTypeColor
+            },
+            children: /* @__PURE__ */ jsx11(Bot, { size: 15 })
+          }
+        ),
+        /* @__PURE__ */ jsxs10("div", { style: { flex: 1, minWidth: 0 }, children: [
+          /* @__PURE__ */ jsx11(
+            "p",
+            {
+              style: {
+                margin: 0,
+                fontSize: 12.5,
+                lineHeight: "1rem",
+                fontWeight: 500,
+                color: profileColors.text,
+                fontFamily: fontFamily.mono,
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                whiteSpace: "nowrap"
+              },
+              children: shortAddress(agent.address)
+            }
+          ),
+          /* @__PURE__ */ jsxs10(
+            "p",
+            {
+              style: {
+                margin: "2px 0 0",
+                fontSize: 12.5,
+                lineHeight: "1rem",
+                color: isExpired ? EXPIRED_AGENT_COLOR : profileColors.muted
+              },
+              children: [
+                isExpired ? "Expired" : "Valid until",
+                " ",
+                formatAgentExpiry(expiresAtMs)
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs10(
+            "p",
+            {
+              style: {
+                margin: "2px 0 0",
+                fontSize: 12.5,
+                lineHeight: "1rem",
+                color: profileColors.subdued,
+                fontFamily: fontFamily.mono
+              },
+              children: [
+                "Owner ",
+                shortAddress(agent.masterAddress)
+              ]
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx11(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              flexShrink: 0,
+              opacity: hovered ? 1 : 0,
+              transition: "opacity 120ms"
+            },
+            children: /* @__PURE__ */ jsx11(
+              IconBtn,
+              {
+                color: "#ef4444",
+                hoverBackgroundColor: "rgba(239,68,68,0.1)",
+                title: "Remove local agent",
+                ariaLabel: `Remove local agent for ${shortAddress(agent.masterAddress)}`,
+                onClick: onRemove,
+                children: /* @__PURE__ */ jsx11(Trash2, { size: 13 })
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
+}
 function IconBtn({
   children,
   color,
@@ -5322,7 +5541,7 @@ function WalletSelectorDropdown({
     setProfileOpen(true);
     onClose();
   }, [onClose]);
-  const walletListEntries = useMemo3(
+  const walletListEntries = useMemo4(
     () => buildWalletListEntries(Array.isArray(wallets) ? wallets : void 0),
     [wallets]
   );