@swype-org/react-sdk 0.1.15 → 0.1.17

package/dist/index.d.cts

@@ -308,6 +308,18 @@ declare function createPasskeyCredential(userIdentifier: string): Promise<{
     credentialId: string;
     publicKey: string;
 }>;
+/**
+ * Checks whether the current device's platform authenticator holds a passkey
+ * matching the given credential ID.
+ *
+ * Uses `navigator.credentials.get()` with a throwaway challenge and a short
+ * timeout. If the authenticator responds, the device has the key. If it
+ * throws (NotAllowedError, timeout, etc.), the device does not.
+ *
+ * @param credentialId - Base64-encoded WebAuthn credential ID from the server.
+ * @returns `true` if the device can authenticate with this credential.
+ */
+declare function deviceHasPasskey(credentialId: string): Promise<boolean>;
 interface UseTransferPollingResult {
     transfer: Transfer | null;
     error: string | null;
@@ -449,4 +461,4 @@ declare namespace api {
   export { type api_CreateTransferParams as CreateTransferParams, api_createTransfer as createTransfer, api_fetchAccounts as fetchAccounts, api_fetchAuthorizationSession as fetchAuthorizationSession, api_fetchChains as fetchChains, api_fetchProviders as fetchProviders, api_fetchTransfer as fetchTransfer, api_fetchUserConfig as fetchUserConfig, api_registerPasskey as registerPasskey, api_reportActionCompletion as reportActionCompletion, api_signTransfer as signTransfer, api_updateUserConfig as updateUserConfig, api_updateUserConfigBySession as updateUserConfigBySession };
 }
 
-export { type Account, type ActionExecutionResult, type AdvancedSettings, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, type Destination, type ErrorResponse, type ListResponse, type PaymentStep, type Provider, type SourceOption, type SourceSelection, type SourceType, SwypePayment, type SwypePaymentProps, SwypeProvider, type SwypeProviderProps, type ThemeMode, type ThemeTokens, type TokenBalance, type Transfer, type TransferDestination, type UserConfig, type Wallet, type WalletSource, type WalletToken, createPasskeyCredential, darkTheme, getTheme, lightTheme, api as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
+export { type Account, type ActionExecutionResult, type AdvancedSettings, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, type Destination, type ErrorResponse, type ListResponse, type PaymentStep, type Provider, type SourceOption, type SourceSelection, type SourceType, SwypePayment, type SwypePaymentProps, SwypeProvider, type SwypeProviderProps, type ThemeMode, type ThemeTokens, type TokenBalance, type Transfer, type TransferDestination, type UserConfig, type Wallet, type WalletSource, type WalletToken, createPasskeyCredential, darkTheme, deviceHasPasskey, getTheme, lightTheme, api as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };

package/dist/index.d.ts

@@ -308,6 +308,18 @@ declare function createPasskeyCredential(userIdentifier: string): Promise<{
     credentialId: string;
     publicKey: string;
 }>;
+/**
+ * Checks whether the current device's platform authenticator holds a passkey
+ * matching the given credential ID.
+ *
+ * Uses `navigator.credentials.get()` with a throwaway challenge and a short
+ * timeout. If the authenticator responds, the device has the key. If it
+ * throws (NotAllowedError, timeout, etc.), the device does not.
+ *
+ * @param credentialId - Base64-encoded WebAuthn credential ID from the server.
+ * @returns `true` if the device can authenticate with this credential.
+ */
+declare function deviceHasPasskey(credentialId: string): Promise<boolean>;
 interface UseTransferPollingResult {
     transfer: Transfer | null;
     error: string | null;
@@ -449,4 +461,4 @@ declare namespace api {
   export { type api_CreateTransferParams as CreateTransferParams, api_createTransfer as createTransfer, api_fetchAccounts as fetchAccounts, api_fetchAuthorizationSession as fetchAuthorizationSession, api_fetchChains as fetchChains, api_fetchProviders as fetchProviders, api_fetchTransfer as fetchTransfer, api_fetchUserConfig as fetchUserConfig, api_registerPasskey as registerPasskey, api_reportActionCompletion as reportActionCompletion, api_signTransfer as signTransfer, api_updateUserConfig as updateUserConfig, api_updateUserConfigBySession as updateUserConfigBySession };
 }
 
-export { type Account, type ActionExecutionResult, type AdvancedSettings, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, type Destination, type ErrorResponse, type ListResponse, type PaymentStep, type Provider, type SourceOption, type SourceSelection, type SourceType, SwypePayment, type SwypePaymentProps, SwypeProvider, type SwypeProviderProps, type ThemeMode, type ThemeTokens, type TokenBalance, type Transfer, type TransferDestination, type UserConfig, type Wallet, type WalletSource, type WalletToken, createPasskeyCredential, darkTheme, getTheme, lightTheme, api as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
+export { type Account, type ActionExecutionResult, type AdvancedSettings, type Amount, type AuthorizationAction, type AuthorizationSession, type AuthorizationSessionDetail, type Chain, type Destination, type ErrorResponse, type ListResponse, type PaymentStep, type Provider, type SourceOption, type SourceSelection, type SourceType, SwypePayment, type SwypePaymentProps, SwypeProvider, type SwypeProviderProps, type ThemeMode, type ThemeTokens, type TokenBalance, type Transfer, type TransferDestination, type UserConfig, type Wallet, type WalletSource, type WalletToken, createPasskeyCredential, darkTheme, deviceHasPasskey, getTheme, lightTheme, api as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };

package/dist/index.js

@@ -15,52 +15,52 @@ var __export = (target, all) => {
 
 // src/theme.ts
 var darkTheme = {
-  bg: "#0a0a0a",
-  bgCard: "#141414",
-  bgInput: "#1e1e1e",
-  bgHover: "#252525",
-  bgOverlay: "rgba(0, 0, 0, 0.6)",
-  text: "#f5f5f5",
-  textSecondary: "#a1a1aa",
-  textMuted: "#71717a",
-  textInverse: "#09090b",
-  border: "#27272a",
-  borderFocus: "#3b82f6",
-  accent: "#3b82f6",
-  accentHover: "#2563eb",
+  bg: "#071216",
+  bgCard: "#101c22",
+  bgInput: "#17272f",
+  bgHover: "#20343d",
+  bgOverlay: "rgba(3, 10, 13, 0.7)",
+  text: "#ecfeff",
+  textSecondary: "#b7d3dd",
+  textMuted: "#7fa4b0",
+  textInverse: "#052027",
+  border: "#2b4551",
+  borderFocus: "#2ec4cf",
+  accent: "#2eb6c2",
+  accentHover: "#239ba6",
   accentText: "#ffffff",
-  success: "#22c55e",
-  successBg: "#052e16",
-  error: "#ef4444",
-  errorBg: "#450a0a",
-  shadow: "0 1px 3px rgba(0,0,0,0.4)",
-  shadowLg: "0 8px 32px rgba(0,0,0,0.5)",
-  radius: "10px",
-  radiusLg: "16px"
+  success: "#0f9d73",
+  successBg: "#0f2f2a",
+  error: "#d46a72",
+  errorBg: "#301d21",
+  shadow: "0 1px 4px rgba(0,0,0,0.35)",
+  shadowLg: "0 18px 44px rgba(0,0,0,0.42)",
+  radius: "14px",
+  radiusLg: "24px"
 };
 var lightTheme = {
-  bg: "#f8fafc",
-  bgCard: "#ffffff",
-  bgInput: "#f1f5f9",
-  bgHover: "#e2e8f0",
-  bgOverlay: "rgba(0, 0, 0, 0.3)",
-  text: "#0f172a",
-  textSecondary: "#475569",
-  textMuted: "#94a3b8",
+  bg: "#ebf9fb",
+  bgCard: "#f9fdff",
+  bgInput: "#f1f8fb",
+  bgHover: "#e7f4f7",
+  bgOverlay: "rgba(7, 18, 22, 0.18)",
+  text: "#12222b",
+  textSecondary: "#4b6772",
+  textMuted: "#7d97a1",
   textInverse: "#ffffff",
-  border: "#e2e8f0",
-  borderFocus: "#3b82f6",
-  accent: "#3b82f6",
-  accentHover: "#2563eb",
+  border: "#d2e4ea",
+  borderFocus: "#2eb6c2",
+  accent: "#2eb6c2",
+  accentHover: "#259da7",
   accentText: "#ffffff",
-  success: "#16a34a",
-  successBg: "#f0fdf4",
-  error: "#dc2626",
-  errorBg: "#fef2f2",
-  shadow: "0 1px 3px rgba(0,0,0,0.08)",
-  shadowLg: "0 8px 32px rgba(0,0,0,0.12)",
-  radius: "10px",
-  radiusLg: "16px"
+  success: "#0f9d73",
+  successBg: "#e6f7f1",
+  error: "#ce6670",
+  errorBg: "#fdf1f2",
+  shadow: "0 1px 3px rgba(12, 31, 39, 0.08)",
+  shadowLg: "0 20px 48px rgba(19, 61, 75, 0.14)",
+  radius: "14px",
+  radiusLg: "24px"
 };
 function getTheme(mode) {
   return mode === "dark" ? darkTheme : lightTheme;
@@ -735,6 +735,28 @@ async function createPasskeyCredential(userIdentifier) {
     publicKey: publicKeyBytes ? toBase64(publicKeyBytes) : ""
   };
 }
+async function deviceHasPasskey(credentialId) {
+  try {
+    const challenge = new Uint8Array(32);
+    crypto.getRandomValues(challenge);
+    await waitForDocumentFocus();
+    const assertion = await navigator.credentials.get({
+      publicKey: {
+        challenge,
+        rpId: resolvePasskeyRpId(),
+        allowCredentials: [{
+          type: "public-key",
+          id: base64ToBytes(credentialId)
+        }],
+        userVerification: "required",
+        timeout: 3e4
+      }
+    });
+    return assertion != null;
+  } catch {
+    return false;
+  }
+}
 function useTransferPolling(intervalMs = 3e3) {
   const { apiBaseUrl } = useSwypeConfig();
   const { getAccessToken } = usePrivy();
@@ -1265,10 +1287,12 @@ function Spinner({ size = 40, label }) {
             style: {
               width: size,
               height: size,
-              border: `3px solid ${tokens.border}`,
+              border: `4px solid ${tokens.bgInput}`,
               borderTopColor: tokens.accent,
+              borderRightColor: tokens.accent + "66",
               borderRadius: "50%",
-              animation: "swype-spin 0.8s linear infinite"
+              boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.1)",
+              animation: "swype-spin 0.9s linear infinite"
             }
           }
         ),
@@ -1299,7 +1323,7 @@ function ProviderCard({ provider, selected, onClick }) {
         padding: "14px 16px",
         background: selected ? tokens.accent + "18" : hovered ? tokens.bgHover : tokens.bgInput,
         border: `1.5px solid ${selected ? tokens.accent : tokens.border}`,
-        borderRadius: tokens.radius,
+        borderRadius: tokens.radiusLg,
         cursor: "pointer",
         transition: "all 0.15s ease",
         color: tokens.text,
@@ -1318,7 +1342,7 @@ function ProviderCard({ provider, selected, onClick }) {
             style: {
               width: 32,
               height: 32,
-              borderRadius: "8px",
+              borderRadius: "50%",
               objectFit: "contain"
             }
           }
@@ -1328,7 +1352,7 @@ function ProviderCard({ provider, selected, onClick }) {
             style: {
               width: 32,
               height: 32,
-              borderRadius: "8px",
+              borderRadius: "50%",
               background: tokens.accent + "30",
               display: "flex",
               alignItems: "center",
@@ -1434,10 +1458,11 @@ function AccountDropdown({
           display: "flex",
           alignItems: "center",
           gap: "6px",
-          background: "transparent",
-          border: "none",
+          background: tokens.bgCard,
+          border: `1px solid ${tokens.border}`,
           cursor: "pointer",
-          padding: "4px 0",
+          padding: "7px 10px",
+          borderRadius: "999px",
           color: tokens.textSecondary,
           fontFamily: "inherit",
           fontSize: "0.85rem",
@@ -1494,7 +1519,7 @@ function AccountDropdown({
           marginTop: "4px",
           background: tokens.bgCard,
           border: `1px solid ${tokens.border}`,
-          borderRadius: tokens.radius,
+          borderRadius: tokens.radiusLg,
           boxShadow: tokens.shadowLg,
           zIndex: 50,
           overflow: "hidden",
@@ -1553,8 +1578,8 @@ function AccountDropdown({
                                 fontWeight: 600,
                                 color: tokens.success,
                                 background: tokens.successBg,
-                                padding: "1px 5px",
-                                borderRadius: "3px",
+                                padding: "2px 7px",
+                                borderRadius: "999px",
                                 textTransform: "uppercase",
                                 letterSpacing: "0.03em"
                               },
@@ -1769,7 +1794,7 @@ function AdvancedSettings({
           marginTop: "10px",
           padding: "14px",
           background: tokens.bgInput,
-          borderRadius: tokens.radius,
+          borderRadius: tokens.radiusLg,
           border: `1px solid ${tokens.border}`
         },
         children: [
@@ -1799,13 +1824,13 @@ function AdvancedSettings({
                     asset: isSelected ? null : asset
                   }),
                   style: {
-                    padding: "6px 14px",
+                    padding: "7px 14px",
                     fontSize: "0.8rem",
                     fontWeight: 600,
                     fontFamily: "inherit",
-                    borderRadius: "6px",
+                    borderRadius: "999px",
                     border: `1.5px solid ${isSelected ? tokens.accent : tokens.border}`,
-                    background: isSelected ? tokens.accent + "18" : "transparent",
+                    background: isSelected ? tokens.accent + "18" : tokens.bgCard,
                     color: isSelected ? tokens.accent : tokens.text,
                     cursor: "pointer",
                     outline: "none",
@@ -1843,13 +1868,13 @@ function AdvancedSettings({
                     chain: isSelected ? null : chain.name
                   }),
                   style: {
-                    padding: "6px 14px",
+                    padding: "7px 14px",
                     fontSize: "0.8rem",
                     fontWeight: 600,
                     fontFamily: "inherit",
-                    borderRadius: "6px",
+                    borderRadius: "999px",
                     border: `1.5px solid ${isSelected ? tokens.accent : tokens.border}`,
-                    background: isSelected ? tokens.accent + "18" : "transparent",
+                    background: isSelected ? tokens.accent + "18" : tokens.bgCard,
                     color: isSelected ? tokens.accent : tokens.text,
                     cursor: "pointer",
                     outline: "none",
@@ -1870,9 +1895,9 @@ function AdvancedSettings({
                 display: "flex",
                 alignItems: "center",
                 gap: "6px",
-                background: "transparent",
+                background: tokens.bgCard,
                 border: `1px dashed ${tokens.border}`,
-                borderRadius: tokens.radius,
+                borderRadius: "999px",
                 padding: "10px 14px",
                 width: "100%",
                 cursor: connectingNewAccount ? "not-allowed" : "pointer",
@@ -2138,12 +2163,27 @@ function SwypePayment({
         if (!token || cancelled) return;
         const { config } = await fetchUserConfig(apiBaseUrl, token);
         if (cancelled) return;
-        if (!config.passkey || !activeCredentialId) {
-          setStep("register-passkey");
-        } else if (depositAmount != null && depositAmount > 0) {
-          setStep("ready");
+        if (config.passkey?.credentialId) {
+          const hasKey = activeCredentialId ? activeCredentialId === config.passkey.credentialId : await deviceHasPasskey(config.passkey.credentialId);
+          if (cancelled) return;
+          if (hasKey) {
+            if (!activeCredentialId) {
+              setActiveCredentialId(config.passkey.credentialId);
+              window.localStorage.setItem(
+                ACTIVE_CREDENTIAL_STORAGE_KEY,
+                config.passkey.credentialId
+              );
+            }
+            if (depositAmount != null && depositAmount > 0) {
+              setStep("ready");
+            } else {
+              setStep("enter-amount");
+            }
+          } else {
+            setStep("register-passkey");
+          }
         } else {
-          setStep("enter-amount");
+          setStep("register-passkey");
         }
       } catch {
         if (!cancelled) {
@@ -2479,7 +2519,7 @@ function SwypePayment({
     background: tokens.bgCard,
     borderRadius: tokens.radiusLg,
     border: `1px solid ${tokens.border}`,
-    padding: "28px 24px",
+    padding: "30px 24px 24px",
     maxWidth: 420,
     width: "100%",
     boxShadow: tokens.shadowLg,
@@ -2487,24 +2527,26 @@ function SwypePayment({
     color: tokens.text
   };
   const headingStyle = {
-    fontSize: "1.2rem",
-    fontWeight: 600,
-    margin: "0 0 20px 0",
+    fontSize: "2rem",
+    fontWeight: 700,
+    margin: "0 0 18px 0",
+    letterSpacing: "-0.02em",
     color: tokens.text,
     textAlign: "center"
   };
   const btnPrimary = {
     width: "100%",
-    padding: "14px",
-    background: tokens.accent,
+    padding: "15px 18px",
+    background: `linear-gradient(180deg, ${tokens.accent}, ${tokens.accentHover})`,
     color: tokens.accentText,
     border: "none",
-    borderRadius: tokens.radius,
-    fontSize: "1rem",
-    fontWeight: 600,
+    borderRadius: "999px",
+    fontSize: "1.03rem",
+    fontWeight: 700,
     cursor: "pointer",
-    transition: "background 0.15s ease",
-    fontFamily: "inherit"
+    transition: "filter 0.15s ease, transform 0.15s ease",
+    fontFamily: "inherit",
+    boxShadow: "0 8px 18px rgba(46, 182, 194, 0.28)"
   };
   const btnDisabled = {
     ...btnPrimary,
@@ -2513,15 +2555,16 @@ function SwypePayment({
   };
   ({
     ...btnPrimary,
+    background: tokens.bgCard,
     color: tokens.textSecondary,
     border: `1px solid ${tokens.border}`});
   const errorStyle = {
     background: tokens.errorBg,
-    border: `1px solid ${tokens.error}`,
-    borderRadius: tokens.radius,
-    padding: "10px 14px",
+    border: `1px solid ${tokens.error}66`,
+    borderRadius: tokens.radiusLg,
+    padding: "11px 14px",
     color: tokens.error,
-    fontSize: "0.825rem",
+    fontSize: "0.86rem",
     marginBottom: "14px",
     lineHeight: 1.5
   };
@@ -2531,7 +2574,8 @@ function SwypePayment({
       style: {
         display: "flex",
         alignItems: "center",
-        gap: "8px",
+        justifyContent: "center",
+        gap: "10px",
         marginBottom: "20px"
       },
       children: [
@@ -2539,10 +2583,22 @@ function SwypePayment({
           "div",
           {
             style: {
-              width: 6,
-              height: 6,
-              borderRadius: "50%",
-              background: tokens.accent
+              width: 28,
+              height: 7,
+              borderRadius: 999,
+              background: tokens.accent,
+              opacity: 0.95
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: 8,
+              height: 8,
+              borderRadius: 999,
+              background: tokens.border
             }
           }
         ),
@@ -2732,8 +2788,8 @@ function SwypePayment({
             gap: "8px",
             background: tokens.bgInput,
             border: `1px solid ${tokens.border}`,
-            borderRadius: tokens.radius,
-            padding: "4px 14px 4px 4px",
+            borderRadius: tokens.radiusLg,
+            padding: "6px 14px 6px 8px",
             marginBottom: "8px"
           },
           children: [
@@ -2780,9 +2836,10 @@ function SwypePayment({
                   fontSize: "0.825rem",
                   fontWeight: 600,
                   color: tokens.textMuted,
-                  background: tokens.bgHover,
-                  padding: "4px 10px",
-                  borderRadius: "6px"
+                  background: tokens.bgCard,
+                  padding: "6px 12px",
+                  border: `1px solid ${tokens.border}`,
+                  borderRadius: "999px"
                 },
                 children: "USD"
               }
@@ -2908,7 +2965,8 @@ function SwypePayment({
               marginBottom: "16px",
               padding: "12px 14px",
               background: tokens.bgInput,
-              borderRadius: tokens.radius,
+              borderRadius: tokens.radiusLg,
+              border: `1px solid ${tokens.border}`,
               lineHeight: 1.7
             },
             children: [
@@ -3107,9 +3165,9 @@ function SwypePayment({
                     width: "100%",
                     marginBottom: "12px",
                     padding: "10px 12px",
-                    borderRadius: tokens.radius,
+                    borderRadius: tokens.radiusLg,
                     border: `1px solid ${tokens.border}`,
-                    background: tokens.bgCard,
+                    background: tokens.bgInput,
                     color: tokens.text,
                     fontFamily: "inherit",
                     fontSize: "0.875rem",
@@ -3148,9 +3206,9 @@ function SwypePayment({
                   style: {
                     width: "100%",
                     padding: "10px 12px",
-                    borderRadius: tokens.radius,
+                    borderRadius: tokens.radiusLg,
                     border: `1px solid ${tokens.border}`,
-                    background: tokens.bgCard,
+                    background: tokens.bgInput,
                     color: tokens.text,
                     fontFamily: "inherit",
                     fontSize: "0.875rem",
@@ -3193,7 +3251,7 @@ function SwypePayment({
         ] }),
         /* @__PURE__ */ jsx("h2", { style: { ...headingStyle, marginBottom: "8px" }, children: "Authorize Transfer" }),
         /* @__PURE__ */ jsx("p", { style: { fontSize: "0.85rem", color: tokens.textSecondary, margin: "0 0 16px 0", lineHeight: 1.5 }, children: "Use your passkey to confirm this payment." }),
-        /* @__PURE__ */ jsxs("div", { style: { fontSize: "0.825rem", color: tokens.textSecondary, padding: "12px 14px", background: tokens.bgInput, borderRadius: tokens.radius, textAlign: "left", lineHeight: 1.7, marginBottom: "16px" }, children: [
+        /* @__PURE__ */ jsxs("div", { style: { fontSize: "0.825rem", color: tokens.textSecondary, padding: "12px 14px", background: tokens.bgInput, borderRadius: tokens.radiusLg, border: `1px solid ${tokens.border}`, textAlign: "left", lineHeight: 1.7, marginBottom: "16px" }, children: [
           payload.amount && payload.tokenSymbol && /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
             /* @__PURE__ */ jsx("span", { children: "Amount" }),
             /* @__PURE__ */ jsxs("span", { style: { fontWeight: 600, color: tokens.text }, children: [
@@ -3384,7 +3442,8 @@ function SwypePayment({
             margin: "0 0 24px 0",
             padding: "14px",
             background: tokens.bgInput,
-            borderRadius: tokens.radius,
+            borderRadius: tokens.radiusLg,
+            border: `1px solid ${tokens.border}`,
             textAlign: "left",
             lineHeight: 1.8
           },
@@ -3455,6 +3514,6 @@ function SwypePayment({
   return null;
 }
 
-export { SwypePayment, SwypeProvider, createPasskeyCredential, darkTheme, getTheme, lightTheme, api_exports as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
+export { SwypePayment, SwypeProvider, createPasskeyCredential, darkTheme, deviceHasPasskey, getTheme, lightTheme, api_exports as swypeApi, useAuthorizationExecutor, useSwypeConfig, useSwypeDepositAmount, useTransferPolling, useTransferSigning };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map