decane-connect-kit 2.2.3 → 2.2.5

package/dist/index.d.cts

@@ -752,6 +752,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 +766,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 +790,7 @@ declare function useSocialAuth(): {
         solana?: string;
     } | null;
     sessionExpiresAt: number | null;
+    canUsePasskey: boolean;
     needsReconnect: boolean;
     googleLoading: boolean;
     emailLoading: boolean;
@@ -804,6 +808,7 @@ declare function useSocialAuth(): {
         providerId?: string;
     }) => Promise<void>;
     signInWithCustomAuth: (() => Promise<void>) | undefined;
+    signInWithPasskey: () => Promise<void>;
     unlock: () => Promise<void>;
     disconnect: () => Promise<void>;
 };

package/dist/index.d.ts

@@ -752,6 +752,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 +766,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 +790,7 @@ declare function useSocialAuth(): {
         solana?: string;
     } | null;
     sessionExpiresAt: number | null;
+    canUsePasskey: boolean;
     needsReconnect: boolean;
     googleLoading: boolean;
     emailLoading: boolean;
@@ -804,6 +808,7 @@ declare function useSocialAuth(): {
         providerId?: string;
     }) => Promise<void>;
     signInWithCustomAuth: (() => Promise<void>) | undefined;
+    signInWithPasskey: () => Promise<void>;
     unlock: () => Promise<void>;
     disconnect: () => Promise<void>;
 };

package/dist/index.js

@@ -3790,11 +3790,25 @@ var CSS_VARS = {
 
 // src/ui/icons.tsx
 import React from "react";
-var DECAGON_OUTER = "12,2 17.88,3.91 21.51,8.91 21.51,15.09 17.88,20.09 12,22 6.12,20.09 2.49,15.09 2.49,8.91 6.12,3.91";
-var DECAGON_INNER = "12,7.4 14.7,8.28 16.37,10.58 16.37,13.42 14.7,15.72 12,16.6 9.3,15.72 7.63,13.42 7.63,10.58 9.3,8.28";
-function DecaneMark({ size = 24, muted = false }) {
-  const color = muted ? "var(--dc-text-muted)" : "var(--dc-accent)";
-  return /* @__PURE__ */ React.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", "aria-hidden": true, style: { flexShrink: 0, display: "block" } }, /* @__PURE__ */ React.createElement("polygon", { points: DECAGON_OUTER, fill: color, fillOpacity: muted ? 0.08 : 0.1, stroke: color, strokeWidth: "1.4", strokeLinejoin: "round" }), /* @__PURE__ */ React.createElement("polygon", { points: DECAGON_INNER, fill: color, fillOpacity: muted ? 0.55 : 0.95 }));
+function DecaneMark({ size = 28, muted = false }) {
+  const uid = React.useId().replace(/:/g, "");
+  const fid = `dl_logo_f_${uid}`;
+  const w = size;
+  const h = Math.round(size * 64 / 68);
+  return /* @__PURE__ */ React.createElement(
+    "svg",
+    {
+      width: w,
+      height: h,
+      viewBox: "0 0 68 64",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": true,
+      style: { display: "block", flexShrink: 0, opacity: muted ? 0.55 : 1 }
+    },
+    /* @__PURE__ */ React.createElement("g", { filter: `url(#${fid})` }, /* @__PURE__ */ React.createElement("path", { d: "M32.8031 10.2986C33.1971 9.68929 34.0886 9.68929 34.4826 10.2986L35.7297 12.2273C36.1599 12.8926 35.6823 13.7703 34.89 13.7703H32.3957C31.6034 13.7703 31.1257 12.8926 31.556 12.2273L32.8031 10.2986Z", fill: "#FFD700" }), /* @__PURE__ */ React.createElement("path", { d: "M16.6095 20.8798C25.5139 8.28662 47.0755 12.2298 51.4641 20.5617C54.9502 24.0479 55.2167 30.8018 55.2167 30.8018C55.2167 30.8018 58.8421 37.862 57.4428 41.3601C55.7891 56.7522 13.9381 57.0066 11.3304 41.3601C9.93111 37.0351 13.4293 31.3744 13.4293 31.3744C13.4293 31.3744 12.9841 27.2404 16.6095 20.8798Z", fill: "#FFD700" }), /* @__PURE__ */ React.createElement("ellipse", { cx: "48.9999", cy: "39.2669", rx: "2.38155", ry: "1.89957", transform: "rotate(-22.395 48.9999 39.2669)", fill: "#FFE55F", fillOpacity: "0.45" }), /* @__PURE__ */ React.createElement("ellipse", { cx: "18.9785", cy: "39.2671", rx: "2.38155", ry: "1.89958", transform: "rotate(15.8893 18.9785 39.2671)", fill: "#FFE55F", fillOpacity: "0.26" }), /* @__PURE__ */ React.createElement("path", { d: "M43.5977 30.7344C43.1619 30.7344 42.6943 30.9653 42.3027 31.4824C41.9107 32.0001 41.6388 32.7597 41.6387 33.6406C41.6387 34.5217 41.9107 35.2821 42.3027 35.7998C42.6943 36.3168 43.1619 36.5479 43.5977 36.5479C44.0332 36.5477 44.5002 36.3166 44.8916 35.7998C45.2837 35.2821 45.5557 34.5217 45.5557 33.6406C45.5556 32.7597 45.2836 32.0001 44.8916 31.4824C44.5002 30.9656 44.0333 30.7345 43.5977 30.7344Z", fill: "#1A1A1A", stroke: "#F4EBBC", strokeWidth: "2" }), /* @__PURE__ */ React.createElement("path", { d: "M25.1514 30.7344C25.5871 30.7344 26.0547 30.9653 26.4463 31.4824C26.8383 32.0001 27.1103 32.7597 27.1104 33.6406C27.1104 34.5217 26.8384 35.2821 26.4463 35.7998C26.0547 36.3168 25.5871 36.5479 25.1514 36.5479C24.7158 36.5477 24.2489 36.3166 23.8574 35.7998C23.4654 35.2821 23.1934 34.5217 23.1934 33.6406C23.1934 32.7597 23.4654 32.0001 23.8574 31.4824C24.2489 30.9656 24.7157 30.7345 25.1514 30.7344Z", fill: "#1A1A1A", stroke: "#F4EBBC", strokeWidth: "2" }), /* @__PURE__ */ React.createElement("path", { d: "M26.0107 41.6924C26.0107 41.6924 28.0937 46.399 34.759 46.399C41.008 46.399 43.3109 41.6924 43.3109 41.6924", stroke: "#1A1A1A", strokeLinecap: "round" })),
+    /* @__PURE__ */ React.createElement("defs", null, /* @__PURE__ */ React.createElement("filter", { id: fid, x: "0.589964", y: "0.334365", width: "66.5809", height: "62.9754", filterUnits: "userSpaceOnUse", colorInterpolationFilters: "sRGB" }, /* @__PURE__ */ React.createElement("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }), /* @__PURE__ */ React.createElement("feColorMatrix", { in: "SourceAlpha", type: "matrix", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0", result: "hardAlpha" }), /* @__PURE__ */ React.createElement("feOffset", { dx: "-0.501447", dy: "0.401157" }), /* @__PURE__ */ React.createElement("feGaussianBlur", { stdDeviation: "4.95429" }), /* @__PURE__ */ React.createElement("feComposite", { in2: "hardAlpha", operator: "out" }), /* @__PURE__ */ React.createElement("feColorMatrix", { type: "matrix", values: "0 0 0 0 0.996078 0 0 0 0 0.996078 0 0 0 0 0.996078 0 0 0 0.12 0" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in2: "BackgroundImageFix", result: "effect1_dropShadow" }), /* @__PURE__ */ React.createElement("feBlend", { mode: "normal", in: "SourceGraphic", in2: "effect1_dropShadow", result: "shape" })))
+  );
 }
 function DecaneWordmark({ size = 15, muted = false }) {
   return /* @__PURE__ */ React.createElement(
@@ -4803,7 +4817,10 @@ function SignInView({
   authMethods,
   resumeHint,
   customAuthLabel,
-  onCustomAuthSignIn
+  onCustomAuthSignIn,
+  canUsePasskey,
+  passkeyAddress,
+  onPasskeySignIn
 }) {
   const [googleLoading, setGoogleLoading] = useState2(false);
   const [email, setEmail] = useState2("");
@@ -4811,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);
@@ -4871,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,
@@ -4892,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",
@@ -4931,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,
@@ -5070,6 +5145,9 @@ function SocialWalletModal({
   authMethods = ["google", "email"],
   customAuthLabel,
   onCustomAuthSignIn,
+  canUsePasskey,
+  passkeyAddress,
+  onPasskeySignIn,
   onRotateShares,
   onExportPortableBackup,
   rpcUrls,
@@ -5171,17 +5249,7 @@ function SocialWalletModal({
       top: 0,
       zIndex: 1,
       background: "linear-gradient(90deg, transparent, var(--dc-accent) 30%, var(--dc-accent) 70%, transparent)"
-    } }), /* @__PURE__ */ React3.createElement("div", { style: { padding: "18px 20px 16px", display: "flex", alignItems: "center", gap: 11 } }, /* @__PURE__ */ React3.createElement("div", { style: {
-      width: 38,
-      height: 38,
-      borderRadius: 11,
-      background: "var(--dc-surface)",
-      border: "1px solid var(--dc-border)",
-      display: "flex",
-      alignItems: "center",
-      justifyContent: "center",
-      flexShrink: 0
-    } }, /* @__PURE__ */ React3.createElement(DecaneMark, { size: 22 })), /* @__PURE__ */ React3.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", alignItems: "baseline", gap: 6 } }, /* @__PURE__ */ React3.createElement(DecaneWordmark, { size: 15 }), /* @__PURE__ */ React3.createElement("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--dc-text-muted)", letterSpacing: "-0.01em" } }, "wallet")), /* @__PURE__ */ React3.createElement("div", { style: { fontSize: 11, color: "var(--dc-text-muted)", marginTop: 2 } }, "Non-custodial \xB7 key split three ways")), /* @__PURE__ */ React3.createElement(
+    } }), /* @__PURE__ */ React3.createElement("div", { style: { padding: "18px 20px 16px", display: "flex", alignItems: "center", gap: 11 } }, /* @__PURE__ */ React3.createElement(DecaneMark, { size: 38 }), /* @__PURE__ */ React3.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ React3.createElement("div", { style: { display: "flex", alignItems: "baseline", gap: 6 } }, /* @__PURE__ */ React3.createElement(DecaneWordmark, { size: 15 }), /* @__PURE__ */ React3.createElement("span", { style: { fontSize: 13, fontWeight: 700, color: "var(--dc-text-muted)", letterSpacing: "-0.01em" } }, "wallet")), /* @__PURE__ */ React3.createElement("div", { style: { fontSize: 11, color: "var(--dc-text-muted)", marginTop: 2 } }, "Non-custodial \xB7 key split three ways")), /* @__PURE__ */ React3.createElement(
       "button",
       {
         onClick: onClose,
@@ -5210,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",
@@ -5605,6 +5676,9 @@ 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,
@@ -5634,6 +5708,7 @@ function useSocialAuth() {
     connectWithToken,
     customAuthLabel,
     connectWithCustomAuth,
+    signInWithPasskey: ctxSignInWithPasskey,
     socialUnlock,
     socialDisconnect
   } = useDecaneContext();
@@ -5702,6 +5777,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 {
@@ -5726,6 +5810,8 @@ 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,
     // 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
@@ -5743,6 +5829,7 @@ function useSocialAuth() {
     confirmEmailCode,
     signInWithToken,
     signInWithCustomAuth: connectWithCustomAuth ? signInWithCustomAuth : void 0,
+    signInWithPasskey,
     unlock,
     disconnect
   };