decane-connect-kit 2.2.4 → 2.2.6

package/dist/index.d.cts

@@ -387,7 +387,7 @@ interface SignTypedDataRequest {
     message: Record<string, unknown>;
     primaryType?: string;
 }
-type SdkEvent = 'connected' | 'disconnected' | 'session-expired' | 'session-started';
+type SdkEvent = 'connected' | 'disconnected' | 'session-expired' | 'session-started' | 'wallet-creating' | 'wallet-unlocking';
 interface DecaneConnect {
     connect(): Promise<ConnectResult>;
     connectWithGoogle(): Promise<ConnectResult>;
@@ -730,6 +730,12 @@ interface SocialAuthState {
      * user, so signing back in costs one passkey prompt and nothing else.
      */
     canUsePasskey: boolean;
+    /**
+     * Long-running work in progress, so the UI can show a status screen instead
+     * of appearing frozen. 'creating' = first-time key generation (several
+     * seconds); 'unlocking' = reopening the TEE session for a returning user.
+     */
+    phase: "creating" | "unlocking" | null;
 }
 interface DecaneKitProps {
     config?: DecaneConfig;
@@ -752,6 +758,9 @@ interface SocialWalletModalProps {
     authMethods?: Array<"google" | "email">;
     customAuthLabel?: string;
     onCustomAuthSignIn?: () => Promise<void>;
+    canUsePasskey?: boolean;
+    passkeyAddress?: string | null;
+    onPasskeySignIn?: () => Promise<unknown>;
     onRotateShares: (opts: {
         password: string;
         passwordHint?: string;
@@ -763,7 +772,7 @@ interface SocialWalletModalProps {
     rpcUrls?: Record<string, string>;
     chains?: string[];
 }
-declare function SocialWalletModal({ open, onClose, theme, socialAuth, onUnlock, onDisconnect, onGoogleSignIn, onEmailStart, onEmailVerify, authMethods, customAuthLabel, onCustomAuthSignIn, onRotateShares, onExportPortableBackup, rpcUrls, chains, }: SocialWalletModalProps): React.ReactPortal | null;
+declare function SocialWalletModal({ open, onClose, theme, socialAuth, onUnlock, onDisconnect, onGoogleSignIn, onEmailStart, onEmailVerify, authMethods, customAuthLabel, onCustomAuthSignIn, canUsePasskey, passkeyAddress, onPasskeySignIn, onRotateShares, onExportPortableBackup, rpcUrls, chains, }: SocialWalletModalProps): React.ReactPortal | null;
 
 declare function DecaneMark({ size, muted }: {
     size?: number;
@@ -787,6 +796,9 @@ declare function useSocialAuth(): {
         solana?: string;
     } | null;
     sessionExpiresAt: number | null;
+    canUsePasskey: boolean;
+    phase: "creating" | "unlocking" | null;
+    isCreatingWallet: boolean;
     needsReconnect: boolean;
     googleLoading: boolean;
     emailLoading: boolean;
@@ -804,6 +816,7 @@ declare function useSocialAuth(): {
         providerId?: string;
     }) => Promise<void>;
     signInWithCustomAuth: (() => Promise<void>) | undefined;
+    signInWithPasskey: () => Promise<void>;
     unlock: () => Promise<void>;
     disconnect: () => Promise<void>;
 };
@@ -817,6 +830,8 @@ declare function useSocialWallet(): {
     } | null;
     sessionExpiresAt: number | null;
     needsReconnect: boolean;
+    phase: "creating" | "unlocking" | null;
+    isCreatingWallet: boolean;
     modalOpen: boolean;
     openModal: () => void;
     closeModal: () => void;

package/dist/index.d.ts

@@ -387,7 +387,7 @@ interface SignTypedDataRequest {
     message: Record<string, unknown>;
     primaryType?: string;
 }
-type SdkEvent = 'connected' | 'disconnected' | 'session-expired' | 'session-started';
+type SdkEvent = 'connected' | 'disconnected' | 'session-expired' | 'session-started' | 'wallet-creating' | 'wallet-unlocking';
 interface DecaneConnect {
     connect(): Promise<ConnectResult>;
     connectWithGoogle(): Promise<ConnectResult>;
@@ -730,6 +730,12 @@ interface SocialAuthState {
      * user, so signing back in costs one passkey prompt and nothing else.
      */
     canUsePasskey: boolean;
+    /**
+     * Long-running work in progress, so the UI can show a status screen instead
+     * of appearing frozen. 'creating' = first-time key generation (several
+     * seconds); 'unlocking' = reopening the TEE session for a returning user.
+     */
+    phase: "creating" | "unlocking" | null;
 }
 interface DecaneKitProps {
     config?: DecaneConfig;
@@ -752,6 +758,9 @@ interface SocialWalletModalProps {
     authMethods?: Array<"google" | "email">;
     customAuthLabel?: string;
     onCustomAuthSignIn?: () => Promise<void>;
+    canUsePasskey?: boolean;
+    passkeyAddress?: string | null;
+    onPasskeySignIn?: () => Promise<unknown>;
     onRotateShares: (opts: {
         password: string;
         passwordHint?: string;
@@ -763,7 +772,7 @@ interface SocialWalletModalProps {
     rpcUrls?: Record<string, string>;
     chains?: string[];
 }
-declare function SocialWalletModal({ open, onClose, theme, socialAuth, onUnlock, onDisconnect, onGoogleSignIn, onEmailStart, onEmailVerify, authMethods, customAuthLabel, onCustomAuthSignIn, onRotateShares, onExportPortableBackup, rpcUrls, chains, }: SocialWalletModalProps): React.ReactPortal | null;
+declare function SocialWalletModal({ open, onClose, theme, socialAuth, onUnlock, onDisconnect, onGoogleSignIn, onEmailStart, onEmailVerify, authMethods, customAuthLabel, onCustomAuthSignIn, canUsePasskey, passkeyAddress, onPasskeySignIn, onRotateShares, onExportPortableBackup, rpcUrls, chains, }: SocialWalletModalProps): React.ReactPortal | null;
 
 declare function DecaneMark({ size, muted }: {
     size?: number;
@@ -787,6 +796,9 @@ declare function useSocialAuth(): {
         solana?: string;
     } | null;
     sessionExpiresAt: number | null;
+    canUsePasskey: boolean;
+    phase: "creating" | "unlocking" | null;
+    isCreatingWallet: boolean;
     needsReconnect: boolean;
     googleLoading: boolean;
     emailLoading: boolean;
@@ -804,6 +816,7 @@ declare function useSocialAuth(): {
         providerId?: string;
     }) => Promise<void>;
     signInWithCustomAuth: (() => Promise<void>) | undefined;
+    signInWithPasskey: () => Promise<void>;
     unlock: () => Promise<void>;
     disconnect: () => Promise<void>;
 };
@@ -817,6 +830,8 @@ declare function useSocialWallet(): {
     } | null;
     sessionExpiresAt: number | null;
     needsReconnect: boolean;
+    phase: "creating" | "unlocking" | null;
+    isCreatingWallet: boolean;
     modalOpen: boolean;
     openModal: () => void;
     closeModal: () => void;

package/dist/index.js

@@ -2548,9 +2548,6 @@ function validatePin(pin) {
 // src/social/crypto/passkey.ts
 init_errors();
 import { startRegistration, startAuthentication as startAuthentication2 } from "@simplewebauthn/browser";
-function b64u(u) {
-  return btoa(String.fromCharCode(...u)).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
-}
 function fromB64u(s) {
   return Uint8Array.from(atob(s.replace(/-/g, "+").replace(/_/g, "/")), (c) => c.charCodeAt(0));
 }
@@ -2585,7 +2582,7 @@ async function authenticateWithPasskey(opts) {
     ...opts.optionsJSON,
     extensions: {
       ...opts.optionsJSON.extensions,
-      prf: { eval: { first: b64u(opts.prfSalt) } }
+      prf: { eval: { first: buf3(opts.prfSalt) } }
     }
   };
   let response;
@@ -3268,6 +3265,7 @@ async function createDecaneConnect(config) {
   }
   async function passkeyLogin(stored) {
     const userId = stored.userId;
+    events.emit("wallet-unlocking");
     const options = await api.getWebAuthnLoginOptions(userId, rpId);
     if (!options) {
       throw new NewDeviceError();
@@ -3301,8 +3299,10 @@ async function createDecaneConnect(config) {
   async function handleAuthResult(result) {
     let addresses;
     if (!result.hasShare) {
+      events.emit("wallet-creating");
       addresses = await firstTimeSetup(result.userId, result.jwt);
     } else {
+      events.emit("wallet-unlocking");
       addresses = await returningUserUnlock(result.userId, result.jwt);
     }
     auth = { jwt: result.jwt, userId: result.userId, addresses };
@@ -3641,8 +3641,8 @@ async function createDecaneConnect(config) {
 function bufferToB64u(buf6) {
   return btoa(String.fromCharCode(...buf6)).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
 }
-function b64uToBuffer(b64u2) {
-  const b644 = b64u2.replace(/-/g, "+").replace(/_/g, "/");
+function b64uToBuffer(b64u) {
+  const b644 = b64u.replace(/-/g, "+").replace(/_/g, "/");
   return Uint8Array.from(atob(b644), (c) => c.charCodeAt(0));
 }
 function toHex(bytes) {
@@ -4817,7 +4817,10 @@ function SignInView({
   authMethods,
   resumeHint,
   customAuthLabel,
-  onCustomAuthSignIn
+  onCustomAuthSignIn,
+  canUsePasskey,
+  passkeyAddress,
+  onPasskeySignIn
 }) {
   const [googleLoading, setGoogleLoading] = useState2(false);
   const [email, setEmail] = useState2("");
@@ -4825,7 +4828,25 @@ function SignInView({
   const [emailSent, setEmailSent] = useState2(false);
   const [emailLoading, setEmailLoading] = useState2(false);
   const [customLoading, setCustomLoading] = useState2(false);
+  const [passkeyLoading, setPasskeyLoading] = useState2(false);
+  const [showOtherMethods, setShowOtherMethods] = useState2(false);
   const [error, setError] = useState2("");
+  const passkeyFirst = !!canUsePasskey && !!onPasskeySignIn && !showOtherMethods;
+  async function handlePasskey() {
+    if (!onPasskeySignIn) return;
+    setError("");
+    setPasskeyLoading(true);
+    try {
+      await onPasskeySignIn();
+    } catch (e) {
+      const err = e;
+      if (err?.name !== "UserCancelledError") {
+        setError(err?.message ?? "Passkey sign-in failed");
+        setShowOtherMethods(true);
+      }
+      setPasskeyLoading(false);
+    }
+  }
   async function handleGoogle() {
     setError("");
     setGoogleLoading(true);
@@ -4885,7 +4906,47 @@ function SignInView({
     fontFamily: "inherit",
     boxSizing: "border-box"
   };
-  return /* @__PURE__ */ React3.createElement("div", { style: { padding: "0 16px 16px" } }, resumeHint && /* @__PURE__ */ React3.createElement("div", { style: { fontSize: 12, color: "var(--dc-text-muted)", marginBottom: 12, textAlign: "center" } }, "Welcome back \u2014 sign in again to resume ", resumeHint), authMethods.includes("google") && /* @__PURE__ */ React3.createElement(
+  return /* @__PURE__ */ React3.createElement("div", { style: { padding: "0 16px 16px" } }, resumeHint && !passkeyFirst && /* @__PURE__ */ React3.createElement("div", { style: { fontSize: 12, color: "var(--dc-text-muted)", marginBottom: 12, textAlign: "center" } }, "Welcome back \u2014 sign in again to resume ", resumeHint), passkeyFirst && /* @__PURE__ */ React3.createElement("div", null, /* @__PURE__ */ React3.createElement("div", { style: { fontSize: 12, color: "var(--dc-text-muted)", marginBottom: 12, textAlign: "center" } }, "Welcome back \u2014 unlock to resume", passkeyAddress ? ` ${passkeyAddress.slice(0, 6)}\u2026${passkeyAddress.slice(-4)}` : ""), /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      onClick: handlePasskey,
+      disabled: passkeyLoading,
+      style: {
+        width: "100%",
+        padding: "11px 0",
+        background: "var(--dc-accent)",
+        color: "var(--dc-accent-text)",
+        border: "none",
+        borderRadius: 10,
+        fontSize: 13,
+        fontWeight: 700,
+        cursor: passkeyLoading ? "not-allowed" : "pointer",
+        opacity: passkeyLoading ? 0.7 : 1,
+        fontFamily: "inherit",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 7
+      }
+    },
+    passkeyLoading ? "Verifying\u2026" : "\u{1F513} Continue with passkey"
+  ), /* @__PURE__ */ React3.createElement(
+    "button",
+    {
+      onClick: () => setShowOtherMethods(true),
+      style: {
+        width: "100%",
+        marginTop: 10,
+        background: "none",
+        border: "none",
+        color: "var(--dc-text-muted)",
+        fontSize: 12,
+        cursor: "pointer",
+        fontFamily: "inherit"
+      }
+    },
+    "Use email or Google instead"
+  ), error && /* @__PURE__ */ React3.createElement("div", { style: { marginTop: 10, fontSize: 12, color: "var(--dc-danger, #ff5533)" } }, error)), !passkeyFirst && authMethods.includes("google") && /* @__PURE__ */ React3.createElement(
     "button",
     {
       onClick: handleGoogle,
@@ -4906,7 +4967,7 @@ function SignInView({
       }
     },
     googleLoading ? "Redirecting\u2026" : "Continue with Google"
-  ), authMethods.includes("email") && /* @__PURE__ */ React3.createElement(React3.Fragment, null, authMethods.includes("google") && /* @__PURE__ */ React3.createElement("div", { style: { textAlign: "center", color: "var(--dc-text-muted)", fontSize: 12, margin: "10px 0" } }, "\u2014 or \u2014"), !emailSent ? /* @__PURE__ */ React3.createElement("form", { onSubmit: handleEmailStart, style: { display: "flex", gap: 8 } }, /* @__PURE__ */ React3.createElement(
+  ), !passkeyFirst && authMethods.includes("email") && /* @__PURE__ */ React3.createElement(React3.Fragment, null, authMethods.includes("google") && /* @__PURE__ */ React3.createElement("div", { style: { textAlign: "center", color: "var(--dc-text-muted)", fontSize: 12, margin: "10px 0" } }, "\u2014 or \u2014"), !emailSent ? /* @__PURE__ */ React3.createElement("form", { onSubmit: handleEmailStart, style: { display: "flex", gap: 8 } }, /* @__PURE__ */ React3.createElement(
     "input",
     {
       type: "email",
@@ -4945,7 +5006,7 @@ function SignInView({
     fontWeight: 700,
     cursor: "pointer",
     fontFamily: "inherit"
-  } }, emailLoading ? "\u2026" : "Verify"))), customAuthLabel && onCustomAuthSignIn && /* @__PURE__ */ React3.createElement(React3.Fragment, null, (authMethods.includes("google") || authMethods.includes("email")) && /* @__PURE__ */ React3.createElement("div", { style: { textAlign: "center", color: "var(--dc-text-muted)", fontSize: 12, margin: "10px 0" } }, "\u2014 or \u2014"), /* @__PURE__ */ React3.createElement(
+  } }, emailLoading ? "\u2026" : "Verify"))), !passkeyFirst && customAuthLabel && onCustomAuthSignIn && /* @__PURE__ */ React3.createElement(React3.Fragment, null, (authMethods.includes("google") || authMethods.includes("email")) && /* @__PURE__ */ React3.createElement("div", { style: { textAlign: "center", color: "var(--dc-text-muted)", fontSize: 12, margin: "10px 0" } }, "\u2014 or \u2014"), /* @__PURE__ */ React3.createElement(
     "button",
     {
       onClick: handleCustomAuth,
@@ -5084,6 +5145,9 @@ function SocialWalletModal({
   authMethods = ["google", "email"],
   customAuthLabel,
   onCustomAuthSignIn,
+  canUsePasskey,
+  passkeyAddress,
+  onPasskeySignIn,
   onRotateShares,
   onExportPortableBackup,
   rpcUrls,
@@ -5214,7 +5278,10 @@ function SocialWalletModal({
         authMethods,
         resumeHint: socialAuth.needsReconnect ? "your wallet" : void 0,
         customAuthLabel,
-        onCustomAuthSignIn
+        onCustomAuthSignIn,
+        canUsePasskey,
+        passkeyAddress,
+        onPasskeySignIn
       }
     ) : /* @__PURE__ */ React3.createElement(React3.Fragment, null, /* @__PURE__ */ React3.createElement("div", { style: {
       margin: "0 16px 14px",
@@ -5301,21 +5368,103 @@ function SocialWalletModal({
 }
 
 // src/ui/context.tsx
-import React4, {
+import React5, {
   createContext,
   useCallback as useCallback3,
   useContext,
-  useEffect as useEffect3,
+  useEffect as useEffect4,
   useRef,
   useState as useState3
 } from "react";
+
+// src/ui/StatusOverlay.tsx
+import React4, { useEffect as useEffect3 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
+function injectTokens3(theme) {
+  if (typeof document === "undefined") return;
+  const resolved = theme === "auto" ? window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light" : theme;
+  let el = document.getElementById("decane-tokens");
+  if (!el) {
+    el = document.createElement("style");
+    el.id = "decane-tokens";
+    document.head.appendChild(el);
+  }
+  el.textContent = `:root { ${CSS_VARS[resolved]} }`;
+}
+function WalletStatusOverlay({
+  phase,
+  theme = "auto"
+}) {
+  useEffect3(() => {
+    if (!phase) return;
+    injectTokens3(theme);
+    if (theme !== "auto") return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const h = () => injectTokens3("auto");
+    mq.addEventListener("change", h);
+    return () => mq.removeEventListener("change", h);
+  }, [phase, theme]);
+  if (!phase || typeof document === "undefined") return null;
+  const title = phase === "creating" ? "Creating your wallet" : "Unlocking your wallet";
+  const sub = phase === "creating" ? "Generating your keys and splitting them across three shares so no single party ever holds your wallet. This takes a few seconds \u2014 please keep this tab open." : "Reopening your secure session\u2026";
+  return createPortal3(
+    /* @__PURE__ */ React4.createElement(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": title,
+        style: {
+          position: "fixed",
+          inset: 0,
+          zIndex: 1e4,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: 16,
+          fontFamily: "var(--dc-font-sans, system-ui, sans-serif)"
+        }
+      },
+      /* @__PURE__ */ React4.createElement("div", { style: {
+        position: "absolute",
+        inset: 0,
+        background: "var(--dc-bg-overlay, rgba(0,0,0,0.75))",
+        backdropFilter: "blur(8px)",
+        WebkitBackdropFilter: "blur(8px)"
+      } }),
+      /* @__PURE__ */ React4.createElement("div", { style: {
+        position: "relative",
+        background: "var(--dc-bg, #0D0D0B)",
+        border: "1px solid var(--dc-border, #3D3C39)",
+        borderRadius: 20,
+        width: "100%",
+        maxWidth: 340,
+        padding: "30px 26px",
+        textAlign: "center",
+        boxShadow: "0 24px 64px rgba(0,0,0,0.6)"
+      } }, /* @__PURE__ */ React4.createElement("div", { style: { display: "flex", justifyContent: "center", marginBottom: 18 } }, /* @__PURE__ */ React4.createElement("div", { style: { position: "relative", width: 60, height: 60, display: "flex", alignItems: "center", justifyContent: "center" } }, /* @__PURE__ */ React4.createElement("span", { style: {
+        position: "absolute",
+        inset: 0,
+        borderRadius: "50%",
+        border: "2px solid var(--dc-border, #3D3C39)",
+        borderTopColor: "var(--dc-accent, #F5C800)",
+        animation: "dc-status-spin 0.8s linear infinite"
+      } }), /* @__PURE__ */ React4.createElement(DecaneMark, { size: 32 }))), /* @__PURE__ */ React4.createElement("div", { style: { fontSize: 16, fontWeight: 800, color: "var(--dc-text, #F9F9F7)", letterSpacing: "-0.02em", marginBottom: 7 } }, title), /* @__PURE__ */ React4.createElement("div", { style: { fontSize: 12, color: "var(--dc-text-muted, #8A8884)", lineHeight: 1.55 } }, sub), /* @__PURE__ */ React4.createElement("div", { style: { marginTop: 20, paddingTop: 14, borderTop: "1px solid var(--dc-border, #3D3C39)", display: "flex", alignItems: "center", justifyContent: "center", gap: 6 } }, /* @__PURE__ */ React4.createElement(DecaneMark, { size: 13, muted: true }), /* @__PURE__ */ React4.createElement(DecaneWordmark, { size: 11, muted: true }))),
+      /* @__PURE__ */ React4.createElement("style", null, `@keyframes dc-status-spin { to { transform: rotate(360deg); } }`)
+    ),
+    document.body
+  );
+}
+
+// src/ui/context.tsx
 var DEFAULT_SOCIAL = {
   addresses: null,
   isNewUser: false,
   isUnlocked: false,
   sessionExpiresAt: null,
   needsReconnect: false,
-  canUsePasskey: false
+  canUsePasskey: false,
+  phase: null
 };
 var DecaneContext = createContext(null);
 function hasSocial(mode) {
@@ -5352,7 +5501,7 @@ function DecaneKit({ config, children }) {
   const closeSelector = useCallback3(() => setSelectorOpen(false), []);
   const openSocialModal = useCallback3(() => setSocialModalOpen(true), []);
   const closeSocialModal = useCallback3(() => setSocialModalOpen(false), []);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!socialAuth.isUnlocked) return;
     const id = setInterval(() => {
       const sdk = socialRef.current;
@@ -5365,7 +5514,7 @@ function DecaneKit({ config, children }) {
     }, 1e4);
     return () => clearInterval(id);
   }, [socialAuth.isUnlocked]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!hasSocial(mode) || !config?.social || socialInitialized.current) return;
     socialInitialized.current = true;
     const {
@@ -5393,6 +5542,9 @@ function DecaneKit({ config, children }) {
         () => setSocialAuth((p) => ({ ...p, isUnlocked: false, sessionExpiresAt: null }))
       );
       sdk.on("disconnected", () => setSocialAuth(DEFAULT_SOCIAL));
+      sdk.on("wallet-creating", () => setSocialAuth((p) => ({ ...p, phase: "creating" })));
+      sdk.on("wallet-unlocking", () => setSocialAuth((p) => ({ ...p, phase: "unlocking" })));
+      sdk.on("connected", () => setSocialAuth((p) => ({ ...p, phase: null })));
       const saved = sdk.getAddresses();
       if (saved) {
         setSocialAuth((p) => ({ ...p, addresses: saved, isUnlocked: false, needsReconnect: true }));
@@ -5401,7 +5553,10 @@ function DecaneKit({ config, children }) {
       });
       const params = new URLSearchParams(window.location.search);
       if (params.has("decane_jwt") || params.has("decane_error")) {
-        sdk.connectWithGoogle().then(applyResult).catch(console.error);
+        sdk.connectWithGoogle().then(applyResult).catch((e) => {
+          setSocialAuth((p) => p.phase ? { ...p, phase: null } : p);
+          console.error(e);
+        });
       }
     }).catch(console.error);
   }, []);
@@ -5413,19 +5568,26 @@ function DecaneKit({ config, children }) {
       isUnlocked: sdk?.isUnlocked() ?? false,
       sessionExpiresAt: sdk?.sessionExpiresAt() ?? null,
       needsReconnect: false,
-      canUsePasskey: false
+      canUsePasskey: false,
+      phase: null
     });
     sdk?.canSignInWithPasskey().then((can) => setSocialAuth((p) => ({ ...p, canUsePasskey: can }))).catch(() => {
     });
   }
+  const clearPhase = useCallback3(() => setSocialAuth((p) => p.phase ? { ...p, phase: null } : p), []);
   const signInWithPasskey = useCallback3(async () => {
     const sdk = socialRef.current;
     if (!sdk) throw new Error("Social sign-in not configured");
-    const result = await sdk.signInWithPasskey();
-    applyResult(result);
-    setSelectorOpen(false);
-    return result;
-  }, []);
+    try {
+      const result = await sdk.signInWithPasskey();
+      applyResult(result);
+      setSelectorOpen(false);
+      return result;
+    } catch (e) {
+      clearPhase();
+      throw e;
+    }
+  }, [clearPhase]);
   const connectWithGoogle = useCallback3(async () => {
     const sdk = socialRef.current;
     if (!sdk) throw new Error("Social sign-in not configured");
@@ -5439,17 +5601,27 @@ function DecaneKit({ config, children }) {
   const verifyEmailCode2 = useCallback3(async (email, code) => {
     const sdk = socialRef.current;
     if (!sdk) throw new Error("Social sign-in not configured");
-    const result = await sdk.verifyEmailCode(email, code);
-    applyResult(result);
-    setSelectorOpen(false);
-  }, []);
+    try {
+      const result = await sdk.verifyEmailCode(email, code);
+      applyResult(result);
+      setSelectorOpen(false);
+    } catch (e) {
+      clearPhase();
+      throw e;
+    }
+  }, [clearPhase]);
   const connectWithToken = useCallback3(async (token, opts) => {
     const sdk = socialRef.current;
     if (!sdk) throw new Error("Social sign-in not configured");
-    const result = await sdk.connectWithToken(token, opts);
-    applyResult(result);
-    setSelectorOpen(false);
-  }, []);
+    try {
+      const result = await sdk.connectWithToken(token, opts);
+      applyResult(result);
+      setSelectorOpen(false);
+    } catch (e) {
+      clearPhase();
+      throw e;
+    }
+  }, [clearPhase]);
   const customAuthConfig = config?.social?.customAuth;
   const connectWithCustomAuth = useCallback3(async () => {
     if (!customAuthConfig) throw new Error("Custom auth not configured");
@@ -5459,14 +5631,21 @@ function DecaneKit({ config, children }) {
   const socialUnlock = useCallback3(async () => {
     const sdk = socialRef.current;
     if (!sdk) return;
-    await sdk.unlock();
-    setSocialAuth((p) => ({
-      ...p,
-      isUnlocked: sdk.isUnlocked(),
-      sessionExpiresAt: sdk.sessionExpiresAt(),
-      needsReconnect: false
-    }));
-  }, []);
+    setSocialAuth((p) => ({ ...p, phase: "unlocking" }));
+    try {
+      await sdk.unlock();
+      setSocialAuth((p) => ({
+        ...p,
+        isUnlocked: sdk.isUnlocked(),
+        sessionExpiresAt: sdk.sessionExpiresAt(),
+        needsReconnect: false,
+        phase: null
+      }));
+    } catch (e) {
+      clearPhase();
+      throw e;
+    }
+  }, [clearPhase]);
   const socialDisconnect = useCallback3(async () => {
     const sdk = socialRef.current;
     if (!sdk) return;
@@ -5535,7 +5714,7 @@ function DecaneKit({ config, children }) {
     []
   );
   const networks = deriveNetworks(mode, config?.networks);
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React5.createElement(
     DecaneContext.Provider,
     {
       value: {
@@ -5573,7 +5752,7 @@ function DecaneKit({ config, children }) {
       }
     },
     children,
-    /* @__PURE__ */ React4.createElement(
+    /* @__PURE__ */ React5.createElement(
       WalletSelector,
       {
         provider: walletRef.current,
@@ -5594,7 +5773,7 @@ function DecaneKit({ config, children }) {
         onCustomAuthSignIn: customAuthConfig ? connectWithCustomAuth : void 0
       }
     ),
-    /* @__PURE__ */ React4.createElement(
+    /* @__PURE__ */ React5.createElement(
       SocialWalletModal,
       {
         open: socialModalOpen,
@@ -5609,12 +5788,16 @@ function DecaneKit({ config, children }) {
         onEmailStart: connectWithEmail,
         onEmailVerify: verifyEmailCode2,
         authMethods: config?.social?.authMethods ?? ["google", "email"],
+        canUsePasskey: socialAuth.canUsePasskey,
+        passkeyAddress: socialAuth.addresses?.evm ?? socialAuth.addresses?.solana ?? null,
+        onPasskeySignIn: signInWithPasskey,
         onRotateShares: socialRotateShares,
         onExportPortableBackup: socialExportPortableBackup,
         rpcUrls: config?.social?.rpcUrls,
         chains: config?.social?.chains
       }
-    )
+    ),
+    /* @__PURE__ */ React5.createElement(WalletStatusOverlay, { phase: socialAuth.phase, theme })
   );
 }
 function useDecaneContext() {
@@ -5628,7 +5811,7 @@ function useDecaneContext() {
 }
 
 // src/ui/hooks.ts
-import { useState as useState4, useEffect as useEffect4, useCallback as useCallback4 } from "react";
+import { useState as useState4, useEffect as useEffect5, useCallback as useCallback4 } from "react";
 function useSocialAuth() {
   const {
     socialAuth,
@@ -5638,6 +5821,7 @@ function useSocialAuth() {
     connectWithToken,
     customAuthLabel,
     connectWithCustomAuth,
+    signInWithPasskey: ctxSignInWithPasskey,
     socialUnlock,
     socialDisconnect
   } = useDecaneContext();
@@ -5706,6 +5890,15 @@ function useSocialAuth() {
       setCustomLoading(false);
     }
   }, [connectWithCustomAuth]);
+  const signInWithPasskey = useCallback4(async () => {
+    setError(null);
+    try {
+      await ctxSignInWithPasskey();
+    } catch (e) {
+      setError(e.message);
+      throw e;
+    }
+  }, [ctxSignInWithPasskey]);
   const unlock = useCallback4(async () => {
     setError(null);
     try {
@@ -5730,6 +5923,11 @@ function useSocialAuth() {
     isNewUser: socialAuth.isNewUser,
     addresses: socialAuth.addresses,
     sessionExpiresAt: socialAuth.sessionExpiresAt,
+    // True when this device can skip the full sign-in and resume with a passkey.
+    canUsePasskey: socialAuth.canUsePasskey,
+    // Long-running work in progress, for driving your own status UI.
+    phase: socialAuth.phase,
+    isCreatingWallet: socialAuth.phase === "creating",
     // True when addresses are known (from a previous visit) but there's no
     // live session — unlock() will always throw in this state (every
     // unlock requires a fresh JWT, and JWTs are never persisted). Route
@@ -5747,6 +5945,7 @@ function useSocialAuth() {
     confirmEmailCode,
     signInWithToken,
     signInWithCustomAuth: connectWithCustomAuth ? signInWithCustomAuth : void 0,
+    signInWithPasskey,
     unlock,
     disconnect
   };
@@ -5860,6 +6059,10 @@ function useSocialWallet() {
     // unlock requires a fresh JWT, and JWTs are never persisted). Route
     // this into a real reconnect (signInWithGoogle / sendEmailCode), not unlock().
     needsReconnect: socialAuth.needsReconnect,
+    // Long-running work in progress ('creating' | 'unlocking' | null), for
+    // driving your own status UI in addition to the SDK's built-in overlay.
+    phase: socialAuth.phase,
+    isCreatingWallet: socialAuth.phase === "creating",
     // Modal
     modalOpen: socialModalOpen,
     openModal: openSocialModal,
@@ -5908,7 +6111,7 @@ function useSocialBalance(chain) {
       setLoading(false);
     }
   }, [socialGetBalance, chain, socialAuth.addresses]);
-  useEffect4(() => {
+  useEffect5(() => {
     let cancelled = false;
     if (!socialAuth.addresses) {
       setBalance(null);
@@ -5940,7 +6143,7 @@ function toDecaneError(err) {
 function useDecane() {
   const { provider, theme, setTheme } = useDecaneContext();
   const [, forceUpdate] = useState4(0);
-  useEffect4(() => {
+  useEffect5(() => {
     const refresh = () => forceUpdate((n) => n + 1);
     const events = [
       "connect",
@@ -5982,7 +6185,7 @@ function useChainSwitch() {
   const [, forceUpdate] = useState4(0);
   const [loading, setLoading] = useState4(false);
   const [error, setError] = useState4(null);
-  useEffect4(() => {
+  useEffect5(() => {
     const refresh = () => forceUpdate((n) => n + 1);
     provider.on("connect", refresh);
     provider.on("disconnect", refresh);