decane-connect-kit 2.2.4 → 2.2.5

package/dist/index.cjs

@@ -4888,7 +4888,10 @@ function SignInView({
   authMethods,
   resumeHint,
   customAuthLabel,
-  onCustomAuthSignIn
+  onCustomAuthSignIn,
+  canUsePasskey,
+  passkeyAddress,
+  onPasskeySignIn
 }) {
   const [googleLoading, setGoogleLoading] = (0, import_react3.useState)(false);
   const [email, setEmail] = (0, import_react3.useState)("");
@@ -4896,7 +4899,25 @@ function SignInView({
   const [emailSent, setEmailSent] = (0, import_react3.useState)(false);
   const [emailLoading, setEmailLoading] = (0, import_react3.useState)(false);
   const [customLoading, setCustomLoading] = (0, import_react3.useState)(false);
+  const [passkeyLoading, setPasskeyLoading] = (0, import_react3.useState)(false);
+  const [showOtherMethods, setShowOtherMethods] = (0, import_react3.useState)(false);
   const [error, setError] = (0, import_react3.useState)("");
+  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);
@@ -4956,7 +4977,47 @@ function SignInView({
     fontFamily: "inherit",
     boxSizing: "border-box"
   };
-  return /* @__PURE__ */ import_react3.default.createElement("div", { style: { padding: "0 16px 16px" } }, resumeHint && /* @__PURE__ */ import_react3.default.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__ */ import_react3.default.createElement(
+  return /* @__PURE__ */ import_react3.default.createElement("div", { style: { padding: "0 16px 16px" } }, resumeHint && !passkeyFirst && /* @__PURE__ */ import_react3.default.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__ */ import_react3.default.createElement("div", null, /* @__PURE__ */ import_react3.default.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__ */ import_react3.default.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__ */ import_react3.default.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__ */ import_react3.default.createElement("div", { style: { marginTop: 10, fontSize: 12, color: "var(--dc-danger, #ff5533)" } }, error)), !passkeyFirst && authMethods.includes("google") && /* @__PURE__ */ import_react3.default.createElement(
     "button",
     {
       onClick: handleGoogle,
@@ -4977,7 +5038,7 @@ function SignInView({
       }
     },
     googleLoading ? "Redirecting\u2026" : "Continue with Google"
-  ), authMethods.includes("email") && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, authMethods.includes("google") && /* @__PURE__ */ import_react3.default.createElement("div", { style: { textAlign: "center", color: "var(--dc-text-muted)", fontSize: 12, margin: "10px 0" } }, "\u2014 or \u2014"), !emailSent ? /* @__PURE__ */ import_react3.default.createElement("form", { onSubmit: handleEmailStart, style: { display: "flex", gap: 8 } }, /* @__PURE__ */ import_react3.default.createElement(
+  ), !passkeyFirst && authMethods.includes("email") && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, authMethods.includes("google") && /* @__PURE__ */ import_react3.default.createElement("div", { style: { textAlign: "center", color: "var(--dc-text-muted)", fontSize: 12, margin: "10px 0" } }, "\u2014 or \u2014"), !emailSent ? /* @__PURE__ */ import_react3.default.createElement("form", { onSubmit: handleEmailStart, style: { display: "flex", gap: 8 } }, /* @__PURE__ */ import_react3.default.createElement(
     "input",
     {
       type: "email",
@@ -5016,7 +5077,7 @@ function SignInView({
     fontWeight: 700,
     cursor: "pointer",
     fontFamily: "inherit"
-  } }, emailLoading ? "\u2026" : "Verify"))), customAuthLabel && onCustomAuthSignIn && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, (authMethods.includes("google") || authMethods.includes("email")) && /* @__PURE__ */ import_react3.default.createElement("div", { style: { textAlign: "center", color: "var(--dc-text-muted)", fontSize: 12, margin: "10px 0" } }, "\u2014 or \u2014"), /* @__PURE__ */ import_react3.default.createElement(
+  } }, emailLoading ? "\u2026" : "Verify"))), !passkeyFirst && customAuthLabel && onCustomAuthSignIn && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, (authMethods.includes("google") || authMethods.includes("email")) && /* @__PURE__ */ import_react3.default.createElement("div", { style: { textAlign: "center", color: "var(--dc-text-muted)", fontSize: 12, margin: "10px 0" } }, "\u2014 or \u2014"), /* @__PURE__ */ import_react3.default.createElement(
     "button",
     {
       onClick: handleCustomAuth,
@@ -5155,6 +5216,9 @@ function SocialWalletModal({
   authMethods = ["google", "email"],
   customAuthLabel,
   onCustomAuthSignIn,
+  canUsePasskey,
+  passkeyAddress,
+  onPasskeySignIn,
   onRotateShares,
   onExportPortableBackup,
   rpcUrls,
@@ -5285,7 +5349,10 @@ function SocialWalletModal({
         authMethods,
         resumeHint: socialAuth.needsReconnect ? "your wallet" : void 0,
         customAuthLabel,
-        onCustomAuthSignIn
+        onCustomAuthSignIn,
+        canUsePasskey,
+        passkeyAddress,
+        onPasskeySignIn
       }
     ) : /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, /* @__PURE__ */ import_react3.default.createElement("div", { style: {
       margin: "0 16px 14px",
@@ -5673,6 +5740,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,
@@ -5702,6 +5772,7 @@ function useSocialAuth() {
     connectWithToken,
     customAuthLabel,
     connectWithCustomAuth,
+    signInWithPasskey: ctxSignInWithPasskey,
     socialUnlock,
     socialDisconnect
   } = useDecaneContext();
@@ -5770,6 +5841,15 @@ function useSocialAuth() {
       setCustomLoading(false);
     }
   }, [connectWithCustomAuth]);
+  const signInWithPasskey = (0, import_react5.useCallback)(async () => {
+    setError(null);
+    try {
+      await ctxSignInWithPasskey();
+    } catch (e) {
+      setError(e.message);
+      throw e;
+    }
+  }, [ctxSignInWithPasskey]);
   const unlock = (0, import_react5.useCallback)(async () => {
     setError(null);
     try {
@@ -5794,6 +5874,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
@@ -5811,6 +5893,7 @@ function useSocialAuth() {
     confirmEmailCode,
     signInWithToken,
     signInWithCustomAuth: connectWithCustomAuth ? signInWithCustomAuth : void 0,
+    signInWithPasskey,
     unlock,
     disconnect
   };