@waaskey/react 0.3.1 → 0.4.0

package/dist/index.js

@@ -1,8 +1,144 @@
+'use client';
 import { Waaskey } from '@waaskey/sdk';
 export * from '@waaskey/sdk';
-import { createContext, useContext, useMemo, createElement, useState, useCallback, useEffect, useRef } from 'react';
+import { createContext, useContext, useRef, useMemo, createElement, useState, useCallback, useEffect } from 'react';
 
 // src/provider.ts
+var AuthContext = createContext(null);
+var STORAGE_KEY = "waaskey.session";
+function webSessionStore(area) {
+  const storage = () => {
+    try {
+      if (typeof window === "undefined") return void 0;
+      return area === "local" ? window.localStorage : window.sessionStorage;
+    } catch {
+      return void 0;
+    }
+  };
+  return {
+    load() {
+      try {
+        const raw = storage()?.getItem(STORAGE_KEY);
+        if (!raw) return void 0;
+        const parsed = JSON.parse(raw);
+        return parsed?.token ? parsed : void 0;
+      } catch {
+        return void 0;
+      }
+    },
+    save(session) {
+      try {
+        storage()?.setItem(STORAGE_KEY, JSON.stringify(session));
+      } catch {
+      }
+    },
+    clear() {
+      try {
+        storage()?.removeItem(STORAGE_KEY);
+      } catch {
+      }
+    }
+  };
+}
+function resolveStore(persistence) {
+  if (persistence === "none") return void 0;
+  if (persistence === "session" || persistence === "local") return webSessionStore(persistence);
+  return persistence;
+}
+function isUnauthenticated(error) {
+  const code = error?.code;
+  const status = error?.status;
+  return code === "unauthenticated" || status === 401;
+}
+function useAuthStore(client, persistence) {
+  const store = useMemo(() => resolveStore(persistence), [persistence]);
+  const [session, setSessionState] = useState();
+  const [user, setUser] = useState();
+  const [error, setError] = useState();
+  const [loading, setLoading] = useState(false);
+  const [ready, setReady] = useState(!store);
+  const mounted = useRef(true);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const setSession = useCallback(
+    (next) => {
+      if (next) {
+        client.auth.restore(next);
+        void store?.save(next);
+      } else {
+        client.auth.logout();
+        void store?.clear();
+      }
+      setSessionState(next);
+      setUser(next?.endUser);
+      setError(void 0);
+    },
+    [client, store]
+  );
+  const logout = useCallback(() => setSession(void 0), [setSession]);
+  const refreshUser = useCallback(async () => {
+    if (!client.auth.isAuthenticated) return;
+    setLoading(true);
+    try {
+      const me = await client.auth.me();
+      if (mounted.current) setUser(me);
+    } catch (e) {
+      if (!mounted.current) return;
+      if (isUnauthenticated(e)) setSession(void 0);
+      else setError(e);
+    } finally {
+      if (mounted.current) setLoading(false);
+    }
+  }, [client, setSession]);
+  useEffect(() => {
+    if (session && !client.auth.isAuthenticated) client.auth.restore(session);
+  }, [client, session]);
+  useEffect(() => {
+    if (!store) {
+      setReady(true);
+      return;
+    }
+    let cancelled = false;
+    setReady(false);
+    void (async () => {
+      let restored;
+      try {
+        restored = await store.load();
+      } catch {
+        restored = void 0;
+      }
+      if (cancelled) return;
+      if (restored) {
+        client.auth.restore(restored);
+        setSessionState(restored);
+        setUser(restored.endUser);
+      }
+      setReady(true);
+      if (restored) {
+        try {
+          const me = await client.auth.me();
+          if (!cancelled && mounted.current) setUser(me);
+        } catch (e) {
+          if (cancelled || !mounted.current) return;
+          if (isUnauthenticated(e)) {
+            client.auth.logout();
+            void store.clear();
+            setSessionState(void 0);
+            setUser(void 0);
+          }
+        }
+      }
+    })();
+    return () => {
+      cancelled = true;
+    };
+  }, [client, store]);
+  return useMemo(() => ({ session, user, ready, loading, error, setSession, refreshUser, logout }), [session, user, ready, loading, error, setSession, refreshUser, logout]);
+}
 var WaaskeyContext = createContext(null);
 
 // src/theme.ts
@@ -39,12 +175,89 @@ function useTheme() {
 
 // src/provider.ts
 function WaaskeyProvider(props) {
-  const source = "client" in props ? props.client : props.options;
-  const client = useMemo(() => "client" in props ? props.client : new Waaskey(props.options), [source]);
+  const externalClient = "client" in props ? props.client : void 0;
+  const options = "client" in props ? void 0 : props.options;
+  const optionsKey = options ? optionsIdentity(options) : "";
+  const held = useRef(void 0);
+  if (!held.current || held.current.key !== optionsKey || externalClient !== void 0 && held.current.client !== externalClient) {
+    if (held.current) warnClientReplaced(externalClient !== void 0);
+    held.current = { key: optionsKey, client: externalClient ?? new Waaskey(options) };
+  }
+  const { client } = held.current;
   const theme = useMemo(() => resolveTheme(props.theme), [props.theme]);
-  return createElement(WaaskeyContext.Provider, { value: client }, createElement(ThemeContext.Provider, { value: theme }, props.children));
+  const auth = useAuthStore(client, props.persistSession ?? "none");
+  return createElement(
+    WaaskeyContext.Provider,
+    { value: client },
+    createElement(AuthContext.Provider, { value: auth }, createElement(ThemeContext.Provider, { value: theme }, props.children))
+  );
 }
 var WaasProvider = WaaskeyProvider;
+var objectIds = /* @__PURE__ */ new WeakMap();
+var nextObjectId = 0;
+function idOf(value) {
+  let id = objectIds.get(value);
+  if (id === void 0) {
+    id = ++nextObjectId;
+    objectIds.set(value, id);
+  }
+  return id;
+}
+function optionsIdentity(options) {
+  const record = options;
+  return Object.keys(record).sort().map((key) => {
+    const value = record[key];
+    if (value === null || typeof value !== "object" && typeof value !== "function") return `${key}=${String(value)}`;
+    return `${key}#${idOf(value)}`;
+  }).join("|");
+}
+function warnClientReplaced(external) {
+  try {
+    if (typeof process !== "undefined" && process.env?.NODE_ENV === "production") return;
+  } catch {
+  }
+  const cause = external ? "the `client` prop changed" : "an option value changed identity";
+  console.warn(
+    `[waaskey] WaaskeyProvider replaced its client because ${cause}. Any in-flight ceremony is abandoned and cached state is lost (the end-user session is re-adopted automatically). Enriching the options once after login is expected; a replacement on every render means the options are rebuilt inline \u2014 hoist or memoize them.`
+  );
+}
+function useAsyncResource(load) {
+  const [state, setState] = useState({ loading: load !== void 0 });
+  const active = useRef(void 0);
+  const mounted = useRef(true);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+      active.current?.abort();
+    };
+  }, []);
+  const refresh = useCallback(async () => {
+    if (!load) return;
+    active.current?.abort();
+    const controller = new AbortController();
+    active.current = controller;
+    setState((prev) => ({ ...prev, loading: true, error: void 0 }));
+    try {
+      const data = await load(controller.signal);
+      if (controller.signal.aborted || !mounted.current) return;
+      setState({ loading: false, data });
+    } catch (error) {
+      if (controller.signal.aborted || !mounted.current) return;
+      setState({ loading: false, error });
+    }
+  }, [load]);
+  useEffect(() => {
+    if (!load) {
+      setState((prev) => prev.data === void 0 && prev.error === void 0 && !prev.loading ? prev : { loading: false });
+      return;
+    }
+    void refresh();
+  }, [load, refresh]);
+  return { ...state, refresh };
+}
+
+// src/hooks.ts
 function useWaaskey() {
   const client = useContext(WaaskeyContext);
   if (!client) throw new Error("useWaaskey must be used within a <WaaskeyProvider>.");
@@ -76,70 +289,41 @@ function useCreateWallet() {
 }
 function useWallet(id) {
   const waaskey = useWaaskey();
-  const [state, setState] = useState({ loading: Boolean(id) });
-  const refresh = useCallback(async () => {
-    if (!id) return;
-    setState({ loading: true });
-    try {
-      setState({ loading: false, data: await waaskey.wallets.get(id) });
-    } catch (error) {
-      setState({ loading: false, error });
-    }
-  }, [waaskey, id]);
-  useEffect(() => {
-    void refresh();
-  }, [refresh]);
-  return { ...state, refresh };
+  const load = useCallback((signal) => waaskey.wallets.get(id, { signal }), [waaskey, id]);
+  return useAsyncResource(id ? load : void 0);
+}
+function useWallets(query = {}) {
+  const waaskey = useWaaskey();
+  const { page, limit } = query;
+  const load = useCallback((signal) => waaskey.wallets.list({ page, limit }, { signal }), [waaskey, page, limit]);
+  const { data, ...rest } = useAsyncResource(load);
+  return { ...rest, data: data?.items, total: data?.total };
 }
 function useBalance(chain, address) {
   const waaskey = useWaaskey();
-  const [state, setState] = useState({ loading: Boolean(chain && address) });
-  const refresh = useCallback(async () => {
-    if (!chain || !address) return;
-    setState({ loading: true });
-    try {
-      setState({ loading: false, data: await waaskey.balances.getBalance(chain, address) });
-    } catch (error) {
-      setState({ loading: false, error });
-    }
-  }, [waaskey, chain, address]);
-  useEffect(() => {
-    void refresh();
-  }, [refresh]);
-  return { ...state, refresh };
+  const load = useCallback(() => waaskey.balances.getBalance(chain, address), [waaskey, chain, address]);
+  return useAsyncResource(chain && address ? load : void 0);
 }
 function useBalances(chains, address) {
   const waaskey = useWaaskey();
-  const [state, setState] = useState({ loading: Boolean(address && chains.length) });
   const key = chains.join(",");
-  const refresh = useCallback(async () => {
-    if (!address || !key) return;
-    setState({ loading: true });
-    try {
-      const data = await Promise.all(key.split(",").map((chain) => waaskey.balances.getBalance(chain, address)));
-      setState({ loading: false, data });
-    } catch (error) {
-      setState({ loading: false, error });
-    }
-  }, [waaskey, key, address]);
-  useEffect(() => {
-    void refresh();
-  }, [refresh]);
-  return { ...state, refresh };
+  const list = useMemo(() => key ? key.split(",") : [], [key]);
+  const load = useCallback(() => Promise.all(list.map((chain) => waaskey.balances.getBalance(chain, address))), [waaskey, list, address]);
+  return useAsyncResource(address && list.length ? load : void 0);
 }
-function useSend(walletId) {
+function useSend(wallet) {
   const waaskey = useWaaskey();
   const [status, setStatus] = useState("idle");
   const [result, setResult] = useState();
   const [error, setError] = useState();
   const send = useCallback(
     async (params) => {
-      if (!walletId) throw new Error("useSend: no wallet id.");
+      if (!wallet) throw new Error("useSend: no wallet.");
       setStatus("pending");
       setError(void 0);
       try {
-        const wallet = await waaskey.wallets.get(walletId);
-        const res = await wallet.send(params);
+        const target = typeof wallet === "string" ? await waaskey.wallets.get(wallet) : wallet;
+        const res = await target.send(params);
         setResult(res);
         setStatus("sent");
         return res;
@@ -149,7 +333,7 @@ function useSend(walletId) {
         throw e;
       }
     },
-    [waaskey, walletId]
+    [waaskey, wallet]
   );
   const reset = useCallback(() => {
     setStatus("idle");
@@ -158,69 +342,124 @@ function useSend(walletId) {
   }, []);
   return { send, status, result, error, reset };
 }
-function useSignatures(walletId) {
+function useSignatures(wallet) {
   const waaskey = useWaaskey();
-  const [state, setState] = useState({ loading: Boolean(walletId) });
-  const refresh = useCallback(async () => {
-    if (!walletId) return;
-    setState({ loading: true });
-    try {
-      const wallet = await waaskey.wallets.get(walletId);
-      const page = await wallet.signatures();
-      setState({ loading: false, data: page.items });
-    } catch (error) {
-      setState({ loading: false, error });
-    }
-  }, [waaskey, walletId]);
-  useEffect(() => {
-    void refresh();
-  }, [refresh]);
-  return { ...state, refresh };
+  const load = useCallback(
+    async (signal) => {
+      const target = typeof wallet === "string" ? await waaskey.wallets.get(wallet, { signal }) : wallet;
+      const page = await target.signatures({}, { signal });
+      return page.items;
+    },
+    [waaskey, wallet]
+  );
+  return useAsyncResource(wallet ? load : void 0);
+}
+function useAuth() {
+  const store = useAuthStoreContext();
+  return {
+    session: store.session,
+    user: store.user,
+    isAuthenticated: store.session !== void 0,
+    ready: store.ready,
+    loading: store.loading,
+    error: store.error,
+    setSession: store.setSession,
+    refreshUser: store.refreshUser,
+    logout: store.logout
+  };
+}
+function useUser() {
+  return useAuthStoreContext().user;
+}
+function useAuthStoreContext() {
+  const store = useContext(AuthContext);
+  if (!store) throw new Error("useAuth must be used within a <WaaskeyProvider>.");
+  return store;
 }
 function useLogin() {
   const waaskey = useWaaskey();
+  const auth = useAuthStoreContext();
   const [step, setStep] = useState("email");
+  const [method, setMethod] = useState("email");
   const [email, setEmail] = useState("");
+  const [phone, setPhone] = useState("");
   const [session, setSession] = useState();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState();
-  const start = useCallback(
-    async (e) => {
-      setLoading(true);
-      setError(void 0);
-      try {
-        await waaskey.auth.email.start(e);
-        setEmail(e);
-        setStep("code");
-      } catch (err) {
-        setError(err);
-      } finally {
-        setLoading(false);
-      }
+  const run = useCallback(async (action) => {
+    setLoading(true);
+    setError(void 0);
+    try {
+      await action();
+    } catch (err) {
+      setError(err);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+  const complete = useCallback(
+    (next) => {
+      setSession(next);
+      setStep("done");
+      auth.setSession(next);
     },
-    [waaskey]
+    [auth]
+  );
+  const start = useCallback(
+    (value) => run(async () => {
+      await waaskey.auth.email.start(value);
+      setMethod("email");
+      setEmail(value);
+      setPhone("");
+      setStep("code");
+    }),
+    [run, waaskey]
+  );
+  const startPhone = useCallback(
+    (value) => run(async () => {
+      await waaskey.auth.phone.start(value);
+      setMethod("phone");
+      setPhone(value);
+      setEmail("");
+      setStep("code");
+    }),
+    [run, waaskey]
   );
   const verify = useCallback(
-    async (code) => {
-      setLoading(true);
-      setError(void 0);
-      try {
-        const s = await waaskey.auth.email.verify(email, code);
-        setSession(s);
-        setStep("done");
-      } catch (err) {
-        setError(err);
-      } finally {
-        setLoading(false);
-      }
-    },
-    [waaskey, email]
+    (code) => run(async () => {
+      complete(method === "phone" ? await waaskey.auth.phone.verify(phone, code) : await waaskey.auth.email.verify(email, code));
+    }),
+    [run, waaskey, method, email, phone, complete]
+  );
+  const loginWithGoogle = useCallback(
+    (idToken) => run(async () => {
+      setMethod("google");
+      complete(await waaskey.auth.social.google(idToken));
+    }),
+    [run, waaskey, complete]
+  );
+  const loginWithFirebase = useCallback(
+    (idToken) => run(async () => {
+      complete(await waaskey.auth.social.firebase(idToken));
+    }),
+    [run, waaskey, complete]
+  );
+  const loginWithPasskey = useCallback(
+    (ceremony) => run(async () => {
+      setMethod("passkey");
+      complete(await waaskey.auth.passkey.login(ceremony));
+    }),
+    [run, waaskey, complete]
   );
   const reset = useCallback(() => {
     setStep("email");
+    setMethod("email");
+    setEmail("");
+    setPhone("");
+    setSession(void 0);
     setError(void 0);
   }, []);
-  return { step, email, session, loading, error, start, verify, reset };
+  return { step, method, email, phone, session, loading, error, start, startPhone, verify, loginWithGoogle, loginWithFirebase, loginWithPasskey, reset };
 }
 function useQrCode(text) {
   const [dataUrl, setDataUrl] = useState();
@@ -242,26 +481,54 @@ function useQrCode(text) {
   }, [text]);
   return dataUrl;
 }
-function ConnectModal({ open, onClose, onConnect, title = "Sign in", theme }) {
+var METHOD_LABEL = {
+  email: "Continue with email",
+  phone: "Continue with phone",
+  google: "Continue with Google",
+  passkey: "Continue with a passkey"
+};
+function ConnectModal({ open, onClose, onConnect, title = "Sign in", methods = ["email"], googleIdToken, theme }) {
   const base = useTheme();
   const t = { ...base, ...theme };
-  const { step, email, session, loading, error, start, verify, reset } = useLogin();
-  const [emailInput, setEmailInput] = useState("");
+  const login = useLogin();
+  const { step, method, email, phone, session, loading, error, start, startPhone, verify, loginWithGoogle, loginWithPasskey, reset } = login;
+  const [identifier, setIdentifier] = useState("");
   const [codeInput, setCodeInput] = useState("");
+  const [active, setActive] = useState(methods.includes("email") || !methods.includes("phone") ? "email" : "phone");
+  const [localError, setLocalError] = useState();
   const firstFieldRef = useRef(null);
+  const announced = useRef(void 0);
+  const onConnectRef = useRef(onConnect);
+  onConnectRef.current = onConnect;
   useEffect(() => {
-    if (step === "done" && session) onConnect?.(session);
-  }, [step, session, onConnect]);
+    if (step !== "done" || !session || announced.current === session.token) return;
+    announced.current = session.token;
+    onConnectRef.current?.(session);
+  }, [step, session]);
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
   useEffect(() => {
     if (!open) return;
     const onKey = (e) => {
-      if (e.key === "Escape") onClose();
+      if (e.key === "Escape") onCloseRef.current();
     };
     document.addEventListener("keydown", onKey);
-    firstFieldRef.current?.focus();
     return () => document.removeEventListener("keydown", onKey);
-  }, [open, step, onClose]);
+  }, [open]);
+  useEffect(() => {
+    if (open) firstFieldRef.current?.focus();
+  }, [open, step, active]);
+  const useGoogle = useCallback(async () => {
+    if (!googleIdToken) return;
+    setLocalError(void 0);
+    try {
+      await loginWithGoogle(await googleIdToken());
+    } catch (e) {
+      setLocalError(e);
+    }
+  }, [googleIdToken, loginWithGoogle]);
   if (!open) return null;
+  const shown = error ?? localError;
   const overlay = { position: "fixed", inset: 0, background: "rgba(0,0,0,0.4)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 1e3 };
   const card = {
     background: t.background,
@@ -270,6 +537,7 @@ function ConnectModal({ open, onClose, onConnect, title = "Sign in", theme }) {
     padding: 24,
     width: 360,
     maxWidth: "90vw",
+    fontFamily: t.fontFamily,
     boxShadow: "0 10px 40px rgba(0,0,0,0.2)"
   };
   const input = { width: "100%", boxSizing: "border-box", padding: "10px 12px", border: `1px solid ${t.border}`, borderRadius: "8px", fontSize: 14, marginTop: 8 };
@@ -286,43 +554,70 @@ function ConnectModal({ open, onClose, onConnect, title = "Sign in", theme }) {
     cursor: loading ? "default" : "pointer",
     opacity: loading ? 0.6 : 1
   };
+  const alt = { ...button, background: "none", color: t.accent, border: `1px solid ${t.border}`, fontWeight: 500, marginTop: 8 };
   const link = { background: "none", border: "none", color: t.muted, fontSize: 13, marginTop: 12, cursor: "pointer" };
   const errText = { color: t.danger, fontSize: 13, marginTop: 8 };
-  const onSubmitEmail = (e) => {
+  const onSubmitIdentifier = (e) => {
     e.preventDefault();
-    if (emailInput.trim()) void start(emailInput.trim());
+    const value = identifier.trim();
+    if (!value) return;
+    void (active === "phone" ? startPhone(value) : start(value));
   };
   const onSubmitCode = (e) => {
     e.preventDefault();
     if (codeInput.trim()) void verify(codeInput.trim());
   };
-  const close = () => {
-    onClose();
-  };
+  const close = () => onClose();
+  const alternatives = () => methods.filter((m) => m !== active && (m !== "google" || googleIdToken)).map(
+    (m) => createElement(
+      "button",
+      {
+        key: m,
+        type: "button",
+        style: alt,
+        disabled: loading,
+        onClick: () => {
+          setLocalError(void 0);
+          if (m === "email" || m === "phone") {
+            setActive(m);
+            setIdentifier("");
+          } else if (m === "passkey") void loginWithPasskey();
+          else void useGoogle();
+        }
+      },
+      METHOD_LABEL[m]
+    )
+  );
   let body;
   if (step === "email") {
+    const isPhone = active === "phone";
     body = createElement(
-      "form",
-      { onSubmit: onSubmitEmail, key: "email" },
-      createElement("label", { style: { fontSize: 13, color: t.muted }, htmlFor: "waaskey-email" }, "Email"),
-      createElement("input", {
-        id: "waaskey-email",
-        ref: firstFieldRef,
-        style: input,
-        type: "email",
-        placeholder: "you@example.com",
-        value: emailInput,
-        onChange: (e) => setEmailInput(e.target.value),
-        disabled: loading
-      }),
-      error ? createElement("div", { style: errText, role: "alert" }, error.message) : null,
-      createElement("button", { style: button, type: "submit", disabled: loading }, loading ? "Sending\u2026" : "Send code")
+      "div",
+      { key: "identifier" },
+      createElement(
+        "form",
+        { onSubmit: onSubmitIdentifier },
+        createElement("label", { style: { fontSize: 13, color: t.muted }, htmlFor: "waaskey-identifier" }, isPhone ? "Phone" : "Email"),
+        createElement("input", {
+          id: "waaskey-identifier",
+          ref: firstFieldRef,
+          style: input,
+          type: isPhone ? "tel" : "email",
+          placeholder: isPhone ? "+15551234567" : "you@example.com",
+          value: identifier,
+          onChange: (e) => setIdentifier(e.target.value),
+          disabled: loading
+        }),
+        shown ? createElement("div", { style: errText, role: "alert" }, shown.message) : null,
+        createElement("button", { style: button, type: "submit", disabled: loading }, loading ? "Sending\u2026" : "Send code")
+      ),
+      ...alternatives()
     );
   } else if (step === "code") {
     body = createElement(
       "form",
       { onSubmit: onSubmitCode, key: "code" },
-      createElement("div", { style: { fontSize: 13, color: t.muted } }, `Enter the code sent to ${email}`),
+      createElement("div", { style: { fontSize: 13, color: t.muted } }, `Enter the code sent to ${method === "phone" ? phone : email}`),
       createElement("input", {
         id: "waaskey-code",
         ref: firstFieldRef,
@@ -333,7 +628,7 @@ function ConnectModal({ open, onClose, onConnect, title = "Sign in", theme }) {
         onChange: (e) => setCodeInput(e.target.value),
         disabled: loading
       }),
-      error ? createElement("div", { style: errText, role: "alert" }, error.message) : null,
+      shown ? createElement("div", { style: errText, role: "alert" }, shown.message) : null,
       createElement("button", { style: button, type: "submit", disabled: loading }, loading ? "Verifying\u2026" : "Verify"),
       createElement(
         "button",
@@ -342,10 +637,11 @@ function ConnectModal({ open, onClose, onConnect, title = "Sign in", theme }) {
           type: "button",
           onClick: () => {
             setCodeInput("");
+            setIdentifier("");
             reset();
           }
         },
-        "\u2190 Use a different email"
+        method === "phone" ? "\u2190 Use a different number" : "\u2190 Use a different email"
       )
     );
   } else {
@@ -398,8 +694,10 @@ function WalletWidget({ walletId, chains, sendChainId = "evm:1", sendDecimals =
       { style: s.body },
       tab === "assets" && createElement(AssetsTab, { chains, address, loading: wallet.loading, s }),
       tab === "receive" && createElement(ReceiveTab, { address, s }),
-      tab === "send" && createElement(SendTab, { walletId, sendChainId, sendDecimals, onSent, s }),
-      tab === "activity" && createElement(ActivityTab, { walletId, s })
+      // Pass the loaded wallet (not the id) so the Send/Activity tabs reuse it instead of
+      // each issuing its own `wallets.get` for the wallet this widget already holds.
+      tab === "send" && createElement(SendTab, { wallet: wallet.data ?? walletId, sendChainId, sendDecimals, onSent, s }),
+      tab === "activity" && createElement(ActivityTab, { wallet: wallet.data ?? walletId, s })
     )
   );
 }
@@ -428,13 +726,13 @@ function ReceiveTab({ address, s }) {
   );
 }
 function SendTab({
-  walletId,
+  wallet,
   sendChainId,
   sendDecimals,
   onSent,
   s
 }) {
-  const { send, status, result, error, reset } = useSend(walletId);
+  const { send, status, result, error, reset } = useSend(wallet);
   const [to, setTo] = useState("");
   const [amount, setAmount] = useState("");
   const onSubmit = (e) => {
@@ -446,8 +744,10 @@ function SendTab({
     return createElement(
       "div",
       { style: { textAlign: "center" } },
-      createElement("div", { style: { fontWeight: 600, marginBottom: 8 } }, "Signed \u2713"),
+      createElement("div", { style: { fontWeight: 600, marginBottom: 4 } }, "Signed \u2713"),
+      createElement("div", { style: { ...s.muted, fontSize: 13, marginBottom: 8 } }, "Not broadcast yet \u2014 submit the signed transaction to a node."),
       createElement("div", { style: { ...s.muted, wordBreak: "break-all", fontFamily: "monospace" } }, result.txHash),
+      createElement("button", { type: "button", style: s.secondaryButton, onClick: () => void navigator.clipboard?.writeText(result.signedTx) }, "Copy signed tx"),
       createElement("button", { type: "button", style: s.secondaryButton, onClick: reset }, "Send another")
     );
   }
@@ -471,8 +771,8 @@ function SendTab({
     createElement("button", { type: "submit", style: s.button, disabled: pending }, pending ? "Sending\u2026" : "Send")
   );
 }
-function ActivityTab({ walletId, s }) {
-  const { data, error, loading } = useSignatures(walletId);
+function ActivityTab({ wallet, s }) {
+  const { data, error, loading } = useSignatures(wallet);
   if (loading) return createElement("div", { style: s.muted }, "Loading activity\u2026");
   if (error) return createElement("div", { style: s.error, role: "alert" }, error.message);
   if (!data || data.length === 0) return createElement("div", { style: s.empty }, "No signing activity yet.");
@@ -698,6 +998,6 @@ function FundWidget({ walletAddress, chainId, cryptoCurrency = "ETH", fiatCurren
   );
 }
 
-export { ConnectModal, FundWidget, SignPrompt, ThemeContext, WaasProvider, WaaskeyContext, WaaskeyProvider, WalletWidget, darkTheme, defaultTheme, lightTheme, resolveTheme, useBalance, useBalances, useCreateWallet, useLogin, useQrCode, useSend, useSignPrompt, useSignatures, useTheme, useWaas, useWaaskey, useWallet };
+export { AuthContext, ConnectModal, FundWidget, SignPrompt, ThemeContext, WaasProvider, WaaskeyContext, WaaskeyProvider, WalletWidget, darkTheme, defaultTheme, lightTheme, resolveTheme, useAuth, useBalance, useBalances, useCreateWallet, useLogin, useQrCode, useSend, useSignPrompt, useSignatures, useTheme, useUser, useWaas, useWaaskey, useWallet, useWallets };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map