@swype-org/react-sdk 0.1.15 → 0.1.17

package/dist/index.cjs

@@ -18,52 +18,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;
@@ -738,6 +738,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 } = reactAuth.usePrivy();
@@ -1268,10 +1290,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"
             }
           }
         ),
@@ -1302,7 +1326,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,
@@ -1321,7 +1345,7 @@ function ProviderCard({ provider, selected, onClick }) {
             style: {
               width: 32,
               height: 32,
-              borderRadius: "8px",
+              borderRadius: "50%",
               objectFit: "contain"
             }
           }
@@ -1331,7 +1355,7 @@ function ProviderCard({ provider, selected, onClick }) {
             style: {
               width: 32,
               height: 32,
-              borderRadius: "8px",
+              borderRadius: "50%",
               background: tokens.accent + "30",
               display: "flex",
               alignItems: "center",
@@ -1437,10 +1461,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",
@@ -1497,7 +1522,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",
@@ -1556,8 +1581,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"
                               },
@@ -1772,7 +1797,7 @@ function AdvancedSettings({
           marginTop: "10px",
           padding: "14px",
           background: tokens.bgInput,
-          borderRadius: tokens.radius,
+          borderRadius: tokens.radiusLg,
           border: `1px solid ${tokens.border}`
         },
         children: [
@@ -1802,13 +1827,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",
@@ -1846,13 +1871,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",
@@ -1873,9 +1898,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",
@@ -2141,12 +2166,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) {
@@ -2482,7 +2522,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,
@@ -2490,24 +2530,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,
@@ -2516,15 +2558,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
   };
@@ -2534,7 +2577,8 @@ function SwypePayment({
       style: {
         display: "flex",
         alignItems: "center",
-        gap: "8px",
+        justifyContent: "center",
+        gap: "10px",
         marginBottom: "20px"
       },
       children: [
@@ -2542,10 +2586,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__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              width: 8,
+              height: 8,
+              borderRadius: 999,
+              background: tokens.border
             }
           }
         ),
@@ -2735,8 +2791,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: [
@@ -2783,9 +2839,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"
               }
@@ -2911,7 +2968,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: [
@@ -3110,9 +3168,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",
@@ -3151,9 +3209,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",
@@ -3196,7 +3254,7 @@ function SwypePayment({
         ] }),
         /* @__PURE__ */ jsxRuntime.jsx("h2", { style: { ...headingStyle, marginBottom: "8px" }, children: "Authorize Transfer" }),
         /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Amount" }),
             /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 600, color: tokens.text }, children: [
@@ -3387,7 +3445,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
           },
@@ -3462,6 +3521,7 @@ exports.SwypePayment = SwypePayment;
 exports.SwypeProvider = SwypeProvider;
 exports.createPasskeyCredential = createPasskeyCredential;
 exports.darkTheme = darkTheme;
+exports.deviceHasPasskey = deviceHasPasskey;
 exports.getTheme = getTheme;
 exports.lightTheme = lightTheme;
 exports.swypeApi = api_exports;