@swype-org/react-sdk 0.1.16 → 0.1.18

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;
@@ -107,7 +107,8 @@ function SwypeProvider({
       appId: SWYPE_PRIVY_APP_ID,
       config: {
         appearance: {
-          theme
+          theme,
+          accentColor: getTheme(theme).accent
         }
       },
       children: /* @__PURE__ */ jsxRuntime.jsx(SwypeContext.Provider, { value, children })
@@ -1290,10 +1291,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"
             }
           }
         ),
@@ -1324,7 +1327,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,
@@ -1343,7 +1346,7 @@ function ProviderCard({ provider, selected, onClick }) {
             style: {
               width: 32,
               height: 32,
-              borderRadius: "8px",
+              borderRadius: "50%",
               objectFit: "contain"
             }
           }
@@ -1353,7 +1356,7 @@ function ProviderCard({ provider, selected, onClick }) {
             style: {
               width: 32,
               height: 32,
-              borderRadius: "8px",
+              borderRadius: "50%",
               background: tokens.accent + "30",
               display: "flex",
               alignItems: "center",
@@ -1459,10 +1462,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",
@@ -1519,7 +1523,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",
@@ -1578,8 +1582,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"
                               },
@@ -1794,7 +1798,7 @@ function AdvancedSettings({
           marginTop: "10px",
           padding: "14px",
           background: tokens.bgInput,
-          borderRadius: tokens.radius,
+          borderRadius: tokens.radiusLg,
           border: `1px solid ${tokens.border}`
         },
         children: [
@@ -1824,13 +1828,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",
@@ -1868,13 +1872,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",
@@ -1895,9 +1899,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",
@@ -2519,7 +2523,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,
@@ -2527,24 +2531,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,
@@ -2553,15 +2559,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
   };
@@ -2571,7 +2578,8 @@ function SwypePayment({
       style: {
         display: "flex",
         alignItems: "center",
-        gap: "8px",
+        justifyContent: "center",
+        gap: "10px",
         marginBottom: "20px"
       },
       children: [
@@ -2579,10 +2587,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
             }
           }
         ),
@@ -2772,8 +2792,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: [
@@ -2820,9 +2840,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"
               }
@@ -2948,7 +2969,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: [
@@ -3147,9 +3169,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",
@@ -3188,9 +3210,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",
@@ -3233,7 +3255,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: [
@@ -3424,7 +3446,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
           },