@hfunlabs/hypurr-connect 0.1.24 → 0.1.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hfunlabs/hypurr-connect",
-  "version": "0.1.24",
+  "version": "0.1.26",
   "type": "module",
   "packageManager": "pnpm@10.10.0",
   "main": "./dist/index.js",

package/src/HypurrConnectProvider.tsx

@@ -55,14 +55,16 @@ import type {
 /** @internal context value — extends the public type with fields used only by library internals */
 interface InternalConnectState extends HypurrConnectState {
   loginTelegram: () => void;
+  /** Connected EOA owner address (EOA auth only); null otherwise. */
+  eoaAddress: `0x${string}` | null;
 }
 
 const TELEGRAM_STORAGE_KEY = "hypurr-connect-tg-jwt";
 const LEGACY_TELEGRAM_STORAGE_KEY = "hypurr-connect-tg-user";
 const TELEGRAM_AUTH_STATE_KEY = "hypurr-connect-auth-state";
-const TELEGRAM_AUTH_CODE_VERIFIER_PREFIX =
-  "hypurr-connect-auth-code-verifier:";
-const TELEGRAM_AUTH_RETURN_TO_PREFIX = "hypurr-connect-auth-return-to:";
+const TELEGRAM_AUTH_CODE_VERIFIER_PREFIX = "hypurr-connect-auth-code-verifier:";
+const TELEGRAM_AUTH_REDIRECT_URI_PREFIX =
+  "hypurr-connect-auth-redirect-uri:";
 const TELEGRAM_AUTH_MESSAGE = "hypurr-connect:telegram-auth";
 const DEFAULT_AUTH_HUB_URL = "https://auth.hypurr.fun/login";
 const DEFAULT_MEDIA_URL = "https://media.hypurr.fun";
@@ -239,7 +241,7 @@ function withExpectedFrom(
   return transaction.from ? transaction : { ...transaction, from: address };
 }
 
-function currentReturnTo(): string {
+function currentRedirectUri(): string {
   const url = new URL(window.location.href);
   for (const param of [
     "code",
@@ -325,54 +327,52 @@ function codeVerifierStorageKey(state: string): string {
   return `${TELEGRAM_AUTH_CODE_VERIFIER_PREFIX}${state}`;
 }
 
-function returnToStorageKey(state: string): string {
-  return `${TELEGRAM_AUTH_RETURN_TO_PREFIX}${state}`;
+function redirectUriStorageKey(state: string): string {
+  return `${TELEGRAM_AUTH_REDIRECT_URI_PREFIX}${state}`;
 }
 
 function storeTelegramAuthSession(
   state: string,
   codeVerifier: string,
-  returnTo: string,
+  redirectUri: string,
 ): void {
   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: string): void {
   sessionStorage.removeItem(TELEGRAM_AUTH_STATE_KEY);
   sessionStorage.removeItem(codeVerifierStorageKey(state));
-  sessionStorage.removeItem(returnToStorageKey(state));
+  sessionStorage.removeItem(redirectUriStorageKey(state));
 }
 
-function takeTelegramAuthSession(state: string):
-  | {
-      codeVerifier: string | null;
-      returnTo: string | null;
-    }
-  | null {
+function takeTelegramAuthSession(state: string): {
+  codeVerifier: string | null;
+  redirectUri: string | null;
+} | null {
   const expectedState = sessionStorage.getItem(TELEGRAM_AUTH_STATE_KEY);
   sessionStorage.removeItem(TELEGRAM_AUTH_STATE_KEY);
   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?: string): string {
@@ -455,20 +455,20 @@ async function exchangeTelegramAuthCode({
   clientId,
   code,
   codeVerifier,
-  returnTo,
+  redirectUri,
 }: {
   authHubUrl?: string;
   clientId: string;
   code: string;
   codeVerifier: string;
-  returnTo: string;
+  redirectUri: string;
 }): Promise<string> {
   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), {
@@ -640,7 +640,7 @@ export function HypurrConnectProvider({
           clientId: normalizeClientId(config.clientId),
           code: callback.code,
           codeVerifier: authSession.codeVerifier,
-          returnTo: authSession.returnTo || currentReturnTo(),
+          redirectUri: authSession.redirectUri || currentRedirectUri(),
         })
           .then(acceptTelegramToken)
           .catch((err) =>
@@ -1643,12 +1643,12 @@ export function HypurrConnectProvider({
     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;
@@ -1676,7 +1676,8 @@ export 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",
@@ -1704,7 +1705,7 @@ export function HypurrConnectProvider({
   }, [
     config.clientId,
     config.telegram?.authHubUrl,
-    config.telegram?.returnTo,
+    config.telegram?.redirectUri,
     config.telegram?.scope,
   ]);
 
@@ -1898,6 +1899,7 @@ export function HypurrConnectProvider({
       agent,
       agentReady,
       clearAgent: handleClearAgent,
+      eoaAddress,
 
       authDataMap,
       authToken: tgAuthToken,
@@ -1942,6 +1944,7 @@ export function HypurrConnectProvider({
       agent,
       agentReady,
       handleClearAgent,
+      eoaAddress,
       authDataMap,
       tgAuthToken,
       telegramRpcOptions,

package/src/UserProfileModal.tsx

@@ -2,6 +2,8 @@ import { AnimatePresence, motion } from "framer-motion";
 import type { HyperliquidWallet } from "hypurr-grpc/ts/hypurr/wallet";
 import {
   useCallback,
+  useEffect,
+  useMemo,
   useState,
   type CSSProperties,
   type ReactNode,
@@ -13,7 +15,12 @@ import {
 import { DeleteWalletModal } from "./DeleteWalletModal";
 import { useHypurrConnectInternal } from "./HypurrConnectProvider";
 import { RenameWalletModal } from "./RenameWalletModal";
-import { getAgentExpiryTitle } from "./agentWallet";
+import {
+  clearAgent as clearStoredAgent,
+  loadAllAgents,
+  type LocalApprovedAgent,
+} from "./agent";
+import { formatAgentExpiry, getAgentExpiryTitle } from "./agentWallet";
 import {
   Bot,
   Copy,
@@ -314,6 +321,9 @@ export function UserProfileModal({
     deleteWallet,
     renameWallet,
     authMethod,
+    agent,
+    eoaAddress,
+    clearAgent: clearContextAgent,
   } = useHypurrConnectInternal();
 
   const [settingsTab, setSettingsTab] = useState<SettingsTab>("ui");
@@ -321,6 +331,41 @@ export function UserProfileModal({
     useState<HyperliquidWallet | null>(null);
   const [walletToRename, setWalletToRename] =
     useState<HyperliquidWallet | null>(null);
+  const [storedAgents, setStoredAgents] = useState<LocalApprovedAgent[]>([]);
+
+  // Local approved agents live in localStorage; refresh whenever the modal opens.
+  useEffect(() => {
+    if (isOpen) setStoredAgents(loadAllAgents());
+  }, [isOpen]);
+
+  // Merge the localStorage scan with the reactive context agent (the currently
+  // connected EOA's approved agent), deduped by owner address.
+  const localAgents = useMemo(() => {
+    const byOwner = new Map<string, LocalApprovedAgent>();
+    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 = useCallback(
+    (masterAddress: string) => {
+      if (
+        eoaAddress &&
+        masterAddress.toLowerCase() === eoaAddress.toLowerCase()
+      ) {
+        clearContextAgent();
+      } else {
+        clearStoredAgent(masterAddress);
+      }
+      setStoredAgents(loadAllAgents());
+    },
+    [eoaAddress, clearContextAgent],
+  );
 
   const profilePic = user?.photoUrl || "";
   const displayName = user?.displayName || "";
@@ -347,10 +392,12 @@ export function UserProfileModal({
   );
 
   const handleCopyAddress = useCallback(() => {
-    if (!displayName) return;
-    navigator.clipboard.writeText(displayName);
+    // Copy the full address, not the truncated display name.
+    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 (
     <div className="hypurr-connect" style={{ display: "contents" }}>
@@ -798,6 +845,48 @@ export function UserProfileModal({
                         {wallets.length} wallet
                         {wallets.length !== 1 ? "s" : ""} linked
                       </p>
+
+                      {localAgents.length > 0 && (
+                        <div style={{ marginTop: 8 }}>
+                          <p
+                            style={{
+                              margin: "0 0 8px",
+                              color: profileColors.muted,
+                              ...upperLabelStyle,
+                            }}
+                          >
+                            Agent wallets
+                          </p>
+                          <div
+                            style={{
+                              display: "flex",
+                              flexDirection: "column",
+                              gap: 6,
+                            }}
+                          >
+                            {localAgents.map((agent) => (
+                              <LocalAgentRow
+                                key={agent.masterAddress}
+                                agent={agent}
+                                onRemove={() =>
+                                  handleRemoveLocalAgent(agent.masterAddress)
+                                }
+                              />
+                            ))}
+                          </div>
+                          <p
+                            style={{
+                              margin: "8px 0 0",
+                              fontSize: 12.5,
+                              lineHeight: "1rem",
+                              color: profileColors.subdued,
+                              textAlign: "center",
+                            }}
+                          >
+                            Approved on this device
+                          </p>
+                        </div>
+                      )}
                     </div>
                   )}
                 </div>
@@ -1039,6 +1128,118 @@ function WalletRow({
   );
 }
 
+function shortAddress(address: string): string {
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+}
+
+// Older builds stored validUntil scaled ×1000 (µs). Coerce those back to ms.
+function normalizeExpiryMs(validUntil: number): number {
+  return validUntil > 1e14 ? Math.round(validUntil / 1000) : validUntil;
+}
+
+function LocalAgentRow({
+  agent,
+  onRemove,
+}: {
+  agent: LocalApprovedAgent;
+  onRemove: () => void;
+}) {
+  const [hovered, setHovered] = useState(false);
+  const expiresAtMs = normalizeExpiryMs(agent.validUntil);
+  const isExpired = expiresAtMs <= Date.now();
+  const agentTypeColor = "rgb(var(--blue-500))";
+  return (
+    <div
+      style={{
+        ...walletRowStyle,
+        background: hovered
+          ? profileColors.surfaceBtnHover
+          : profileColors.surfaceBtn,
+        borderColor: hovered
+          ? profileColors.surfaceBdHover
+          : profileColors.surfaceBd,
+      }}
+      onMouseEnter={() => setHovered(true)}
+      onMouseLeave={() => setHovered(false)}
+    >
+      <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,
+        }}
+      >
+        <Bot size={15} />
+      </div>
+      <div style={{ flex: 1, minWidth: 0 }}>
+        <p
+          style={{
+            margin: 0,
+            fontSize: 12.5,
+            lineHeight: "1rem",
+            fontWeight: 500,
+            color: profileColors.text,
+            fontFamily: fontFamily.mono,
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+          }}
+        >
+          {shortAddress(agent.address)}
+        </p>
+        <p
+          style={{
+            margin: "2px 0 0",
+            fontSize: 12.5,
+            lineHeight: "1rem",
+            color: isExpired ? EXPIRED_AGENT_COLOR : profileColors.muted,
+          }}
+        >
+          {isExpired ? "Expired" : "Valid until"}{" "}
+          {formatAgentExpiry(expiresAtMs)}
+        </p>
+        <p
+          style={{
+            margin: "2px 0 0",
+            fontSize: 12.5,
+            lineHeight: "1rem",
+            color: profileColors.subdued,
+            fontFamily: fontFamily.mono,
+          }}
+        >
+          Owner {shortAddress(agent.masterAddress)}
+        </p>
+      </div>
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          flexShrink: 0,
+          opacity: hovered ? 1 : 0,
+          transition: "opacity 120ms",
+        }}
+      >
+        <IconBtn
+          color="#ef4444"
+          hoverBackgroundColor="rgba(239,68,68,0.1)"
+          title="Remove local agent"
+          ariaLabel={`Remove local agent for ${shortAddress(agent.masterAddress)}`}
+          onClick={onRemove}
+        >
+          <Trash2 size={13} />
+        </IconBtn>
+      </div>
+    </div>
+  );
+}
+
 function IconBtn({
   children,
   color,

package/src/agent.ts

@@ -26,6 +26,39 @@ export function clearAgent(masterAddress: string): void {
   localStorage.removeItem(storageKey(masterAddress));
 }
 
+/** A locally-stored agent alongside the master address it was approved for. */
+export interface LocalApprovedAgent extends StoredAgent {
+  masterAddress: string;
+}
+
+/**
+ * Enumerate every agent approved and stored locally on this device by scanning
+ * localStorage for the agent storage prefix. Newest approvals first.
+ */
+export function loadAllAgents(): LocalApprovedAgent[] {
+  const agents: LocalApprovedAgent[] = [];
+  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) as StoredAgent;
+        agents.push({
+          ...agent,
+          masterAddress: key.slice(key.indexOf(":") + 1),
+        });
+      } catch {
+        // Skip malformed entries.
+      }
+    }
+  } catch {
+    return [];
+  }
+  return agents.sort((a, b) => b.approvedAt - a.approvedAt);
+}
+
 /**
  * Generate a random 32-byte private key and derive its address using the
  * local PrivateKeySigner compatibility wrapper.
@@ -73,10 +106,8 @@ async function fetchExtraAgents(
   const agents: unknown = await res.json();
   if (!Array.isArray(agents)) return [];
 
-  return (agents as ExtraAgent[]).map((agent) => ({
-    ...agent,
-    validUntil: agent.validUntil * 1000,
-  }));
+  // The extraAgents API already returns validUntil in epoch ms.
+  return agents as ExtraAgent[];
 }
 
 /**

package/src/types.ts

@@ -33,8 +33,8 @@ export 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. */