@swype-org/react-sdk 0.1.16 → 0.1.18

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;
@@ -104,7 +104,8 @@ function SwypeProvider({
       appId: SWYPE_PRIVY_APP_ID,
       config: {
         appearance: {
-          theme
+          theme,
+          accentColor: getTheme(theme).accent
         }
       },
       children: /* @__PURE__ */ jsx(SwypeContext.Provider, { value, children })
@@ -1287,10 +1288,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"
             }
           }
         ),
@@ -1321,7 +1324,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,
@@ -1340,7 +1343,7 @@ function ProviderCard({ provider, selected, onClick }) {
             style: {
               width: 32,
               height: 32,
-              borderRadius: "8px",
+              borderRadius: "50%",
               objectFit: "contain"
             }
           }
@@ -1350,7 +1353,7 @@ function ProviderCard({ provider, selected, onClick }) {
             style: {
               width: 32,
               height: 32,
-              borderRadius: "8px",
+              borderRadius: "50%",
               background: tokens.accent + "30",
               display: "flex",
               alignItems: "center",
@@ -1456,10 +1459,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",
@@ -1516,7 +1520,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",
@@ -1575,8 +1579,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"
                               },
@@ -1791,7 +1795,7 @@ function AdvancedSettings({
           marginTop: "10px",
           padding: "14px",
           background: tokens.bgInput,
-          borderRadius: tokens.radius,
+          borderRadius: tokens.radiusLg,
           border: `1px solid ${tokens.border}`
         },
         children: [
@@ -1821,13 +1825,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",
@@ -1865,13 +1869,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",
@@ -1892,9 +1896,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",
@@ -2516,7 +2520,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,
@@ -2524,24 +2528,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,
@@ -2550,15 +2556,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
   };
@@ -2568,7 +2575,8 @@ function SwypePayment({
       style: {
         display: "flex",
         alignItems: "center",
-        gap: "8px",
+        justifyContent: "center",
+        gap: "10px",
         marginBottom: "20px"
       },
       children: [
@@ -2576,10 +2584,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
             }
           }
         ),
@@ -2769,8 +2789,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: [
@@ -2817,9 +2837,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"
               }
@@ -2945,7 +2966,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: [
@@ -3144,9 +3166,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",
@@ -3185,9 +3207,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",
@@ -3230,7 +3252,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: [
@@ -3421,7 +3443,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
           },