decane-connect-kit 2.2.5 → 2.2.7

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;
@@ -791,6 +797,8 @@ declare function useSocialAuth(): {
     } | null;
     sessionExpiresAt: number | null;
     canUsePasskey: boolean;
+    phase: "creating" | "unlocking" | null;
+    isCreatingWallet: boolean;
     needsReconnect: boolean;
     googleLoading: boolean;
     emailLoading: boolean;
@@ -822,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;
@@ -791,6 +797,8 @@ declare function useSocialAuth(): {
     } | null;
     sessionExpiresAt: number | null;
     canUsePasskey: boolean;
+    phase: "creating" | "unlocking" | null;
+    isCreatingWallet: boolean;
     needsReconnect: boolean;
     googleLoading: boolean;
     emailLoading: boolean;
@@ -822,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;
@@ -2968,7 +2965,7 @@ function formatBalanceDisplay(value) {
 // src/social/client.ts
 var DEFAULT_API_BASE = "https://backend.decane.app";
 var DEFAULT_TEE_URL = "https://4405742df08d19abc549a05ade2a7154d98bd87f-8443.dstack-pha-prod9.phala.network";
-var DEFAULT_SESSION_MINUTES = 30;
+var DEFAULT_SESSION_MINUTES = 120;
 function makePersistKey(apiKey) {
   return `decane:social:${apiKey.slice(0, 20)}`;
 }
@@ -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) {
@@ -5368,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) {
@@ -5419,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;
@@ -5432,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 {
@@ -5460,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 }));
@@ -5468,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);
   }, []);
@@ -5480,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");
@@ -5506,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");
@@ -5526,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;
@@ -5602,7 +5714,7 @@ function DecaneKit({ config, children }) {
     []
   );
   const networks = deriveNetworks(mode, config?.networks);
-  return /* @__PURE__ */ React4.createElement(
+  return /* @__PURE__ */ React5.createElement(
     DecaneContext.Provider,
     {
       value: {
@@ -5640,7 +5752,7 @@ function DecaneKit({ config, children }) {
       }
     },
     children,
-    /* @__PURE__ */ React4.createElement(
+    /* @__PURE__ */ React5.createElement(
       WalletSelector,
       {
         provider: walletRef.current,
@@ -5661,7 +5773,7 @@ function DecaneKit({ config, children }) {
         onCustomAuthSignIn: customAuthConfig ? connectWithCustomAuth : void 0
       }
     ),
-    /* @__PURE__ */ React4.createElement(
+    /* @__PURE__ */ React5.createElement(
       SocialWalletModal,
       {
         open: socialModalOpen,
@@ -5684,7 +5796,8 @@ function DecaneKit({ config, children }) {
         rpcUrls: config?.social?.rpcUrls,
         chains: config?.social?.chains
       }
-    )
+    ),
+    /* @__PURE__ */ React5.createElement(WalletStatusOverlay, { phase: socialAuth.phase, theme })
   );
 }
 function useDecaneContext() {
@@ -5698,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,
@@ -5812,6 +5925,9 @@ function useSocialAuth() {
     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
@@ -5943,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,
@@ -5991,7 +6111,7 @@ function useSocialBalance(chain) {
       setLoading(false);
     }
   }, [socialGetBalance, chain, socialAuth.addresses]);
-  useEffect4(() => {
+  useEffect5(() => {
     let cancelled = false;
     if (!socialAuth.addresses) {
       setBalance(null);
@@ -6023,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",
@@ -6065,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);