@swype-org/react-sdk 0.1.16 → 0.1.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +115 -93
- package/dist/index.cjs.map +1 -1
- package/dist/index.js +115 -93
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -18,52 +18,52 @@ var __export = (target, all) => {
|
|
|
18
18
|
|
|
19
19
|
// src/theme.ts
|
|
20
20
|
var darkTheme = {
|
|
21
|
-
bg: "#
|
|
22
|
-
bgCard: "#
|
|
23
|
-
bgInput: "#
|
|
24
|
-
bgHover: "#
|
|
25
|
-
bgOverlay: "rgba(
|
|
26
|
-
text: "#
|
|
27
|
-
textSecondary: "#
|
|
28
|
-
textMuted: "#
|
|
29
|
-
textInverse: "#
|
|
30
|
-
border: "#
|
|
31
|
-
borderFocus: "#
|
|
32
|
-
accent: "#
|
|
33
|
-
accentHover: "#
|
|
21
|
+
bg: "#071216",
|
|
22
|
+
bgCard: "#101c22",
|
|
23
|
+
bgInput: "#17272f",
|
|
24
|
+
bgHover: "#20343d",
|
|
25
|
+
bgOverlay: "rgba(3, 10, 13, 0.7)",
|
|
26
|
+
text: "#ecfeff",
|
|
27
|
+
textSecondary: "#b7d3dd",
|
|
28
|
+
textMuted: "#7fa4b0",
|
|
29
|
+
textInverse: "#052027",
|
|
30
|
+
border: "#2b4551",
|
|
31
|
+
borderFocus: "#2ec4cf",
|
|
32
|
+
accent: "#2eb6c2",
|
|
33
|
+
accentHover: "#239ba6",
|
|
34
34
|
accentText: "#ffffff",
|
|
35
|
-
success: "#
|
|
36
|
-
successBg: "#
|
|
37
|
-
error: "#
|
|
38
|
-
errorBg: "#
|
|
39
|
-
shadow: "0 1px
|
|
40
|
-
shadowLg: "0
|
|
41
|
-
radius: "
|
|
42
|
-
radiusLg: "
|
|
35
|
+
success: "#0f9d73",
|
|
36
|
+
successBg: "#0f2f2a",
|
|
37
|
+
error: "#d46a72",
|
|
38
|
+
errorBg: "#301d21",
|
|
39
|
+
shadow: "0 1px 4px rgba(0,0,0,0.35)",
|
|
40
|
+
shadowLg: "0 18px 44px rgba(0,0,0,0.42)",
|
|
41
|
+
radius: "14px",
|
|
42
|
+
radiusLg: "24px"
|
|
43
43
|
};
|
|
44
44
|
var lightTheme = {
|
|
45
|
-
bg: "#
|
|
46
|
-
bgCard: "#
|
|
47
|
-
bgInput: "#
|
|
48
|
-
bgHover: "#
|
|
49
|
-
bgOverlay: "rgba(
|
|
50
|
-
text: "#
|
|
51
|
-
textSecondary: "#
|
|
52
|
-
textMuted: "#
|
|
45
|
+
bg: "#ebf9fb",
|
|
46
|
+
bgCard: "#f9fdff",
|
|
47
|
+
bgInput: "#f1f8fb",
|
|
48
|
+
bgHover: "#e7f4f7",
|
|
49
|
+
bgOverlay: "rgba(7, 18, 22, 0.18)",
|
|
50
|
+
text: "#12222b",
|
|
51
|
+
textSecondary: "#4b6772",
|
|
52
|
+
textMuted: "#7d97a1",
|
|
53
53
|
textInverse: "#ffffff",
|
|
54
|
-
border: "#
|
|
55
|
-
borderFocus: "#
|
|
56
|
-
accent: "#
|
|
57
|
-
accentHover: "#
|
|
54
|
+
border: "#d2e4ea",
|
|
55
|
+
borderFocus: "#2eb6c2",
|
|
56
|
+
accent: "#2eb6c2",
|
|
57
|
+
accentHover: "#259da7",
|
|
58
58
|
accentText: "#ffffff",
|
|
59
|
-
success: "#
|
|
60
|
-
successBg: "#
|
|
61
|
-
error: "#
|
|
62
|
-
errorBg: "#
|
|
63
|
-
shadow: "0 1px 3px rgba(
|
|
64
|
-
shadowLg: "0
|
|
65
|
-
radius: "
|
|
66
|
-
radiusLg: "
|
|
59
|
+
success: "#0f9d73",
|
|
60
|
+
successBg: "#e6f7f1",
|
|
61
|
+
error: "#ce6670",
|
|
62
|
+
errorBg: "#fdf1f2",
|
|
63
|
+
shadow: "0 1px 3px rgba(12, 31, 39, 0.08)",
|
|
64
|
+
shadowLg: "0 20px 48px rgba(19, 61, 75, 0.14)",
|
|
65
|
+
radius: "14px",
|
|
66
|
+
radiusLg: "24px"
|
|
67
67
|
};
|
|
68
68
|
function getTheme(mode) {
|
|
69
69
|
return mode === "dark" ? darkTheme : lightTheme;
|
|
@@ -1290,10 +1290,12 @@ function Spinner({ size = 40, label }) {
|
|
|
1290
1290
|
style: {
|
|
1291
1291
|
width: size,
|
|
1292
1292
|
height: size,
|
|
1293
|
-
border: `
|
|
1293
|
+
border: `4px solid ${tokens.bgInput}`,
|
|
1294
1294
|
borderTopColor: tokens.accent,
|
|
1295
|
+
borderRightColor: tokens.accent + "66",
|
|
1295
1296
|
borderRadius: "50%",
|
|
1296
|
-
|
|
1297
|
+
boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.1)",
|
|
1298
|
+
animation: "swype-spin 0.9s linear infinite"
|
|
1297
1299
|
}
|
|
1298
1300
|
}
|
|
1299
1301
|
),
|
|
@@ -1324,7 +1326,7 @@ function ProviderCard({ provider, selected, onClick }) {
|
|
|
1324
1326
|
padding: "14px 16px",
|
|
1325
1327
|
background: selected ? tokens.accent + "18" : hovered ? tokens.bgHover : tokens.bgInput,
|
|
1326
1328
|
border: `1.5px solid ${selected ? tokens.accent : tokens.border}`,
|
|
1327
|
-
borderRadius: tokens.
|
|
1329
|
+
borderRadius: tokens.radiusLg,
|
|
1328
1330
|
cursor: "pointer",
|
|
1329
1331
|
transition: "all 0.15s ease",
|
|
1330
1332
|
color: tokens.text,
|
|
@@ -1343,7 +1345,7 @@ function ProviderCard({ provider, selected, onClick }) {
|
|
|
1343
1345
|
style: {
|
|
1344
1346
|
width: 32,
|
|
1345
1347
|
height: 32,
|
|
1346
|
-
borderRadius: "
|
|
1348
|
+
borderRadius: "50%",
|
|
1347
1349
|
objectFit: "contain"
|
|
1348
1350
|
}
|
|
1349
1351
|
}
|
|
@@ -1353,7 +1355,7 @@ function ProviderCard({ provider, selected, onClick }) {
|
|
|
1353
1355
|
style: {
|
|
1354
1356
|
width: 32,
|
|
1355
1357
|
height: 32,
|
|
1356
|
-
borderRadius: "
|
|
1358
|
+
borderRadius: "50%",
|
|
1357
1359
|
background: tokens.accent + "30",
|
|
1358
1360
|
display: "flex",
|
|
1359
1361
|
alignItems: "center",
|
|
@@ -1459,10 +1461,11 @@ function AccountDropdown({
|
|
|
1459
1461
|
display: "flex",
|
|
1460
1462
|
alignItems: "center",
|
|
1461
1463
|
gap: "6px",
|
|
1462
|
-
background:
|
|
1463
|
-
border:
|
|
1464
|
+
background: tokens.bgCard,
|
|
1465
|
+
border: `1px solid ${tokens.border}`,
|
|
1464
1466
|
cursor: "pointer",
|
|
1465
|
-
padding: "
|
|
1467
|
+
padding: "7px 10px",
|
|
1468
|
+
borderRadius: "999px",
|
|
1466
1469
|
color: tokens.textSecondary,
|
|
1467
1470
|
fontFamily: "inherit",
|
|
1468
1471
|
fontSize: "0.85rem",
|
|
@@ -1519,7 +1522,7 @@ function AccountDropdown({
|
|
|
1519
1522
|
marginTop: "4px",
|
|
1520
1523
|
background: tokens.bgCard,
|
|
1521
1524
|
border: `1px solid ${tokens.border}`,
|
|
1522
|
-
borderRadius: tokens.
|
|
1525
|
+
borderRadius: tokens.radiusLg,
|
|
1523
1526
|
boxShadow: tokens.shadowLg,
|
|
1524
1527
|
zIndex: 50,
|
|
1525
1528
|
overflow: "hidden",
|
|
@@ -1578,8 +1581,8 @@ function AccountDropdown({
|
|
|
1578
1581
|
fontWeight: 600,
|
|
1579
1582
|
color: tokens.success,
|
|
1580
1583
|
background: tokens.successBg,
|
|
1581
|
-
padding: "
|
|
1582
|
-
borderRadius: "
|
|
1584
|
+
padding: "2px 7px",
|
|
1585
|
+
borderRadius: "999px",
|
|
1583
1586
|
textTransform: "uppercase",
|
|
1584
1587
|
letterSpacing: "0.03em"
|
|
1585
1588
|
},
|
|
@@ -1794,7 +1797,7 @@ function AdvancedSettings({
|
|
|
1794
1797
|
marginTop: "10px",
|
|
1795
1798
|
padding: "14px",
|
|
1796
1799
|
background: tokens.bgInput,
|
|
1797
|
-
borderRadius: tokens.
|
|
1800
|
+
borderRadius: tokens.radiusLg,
|
|
1798
1801
|
border: `1px solid ${tokens.border}`
|
|
1799
1802
|
},
|
|
1800
1803
|
children: [
|
|
@@ -1824,13 +1827,13 @@ function AdvancedSettings({
|
|
|
1824
1827
|
asset: isSelected ? null : asset
|
|
1825
1828
|
}),
|
|
1826
1829
|
style: {
|
|
1827
|
-
padding: "
|
|
1830
|
+
padding: "7px 14px",
|
|
1828
1831
|
fontSize: "0.8rem",
|
|
1829
1832
|
fontWeight: 600,
|
|
1830
1833
|
fontFamily: "inherit",
|
|
1831
|
-
borderRadius: "
|
|
1834
|
+
borderRadius: "999px",
|
|
1832
1835
|
border: `1.5px solid ${isSelected ? tokens.accent : tokens.border}`,
|
|
1833
|
-
background: isSelected ? tokens.accent + "18" :
|
|
1836
|
+
background: isSelected ? tokens.accent + "18" : tokens.bgCard,
|
|
1834
1837
|
color: isSelected ? tokens.accent : tokens.text,
|
|
1835
1838
|
cursor: "pointer",
|
|
1836
1839
|
outline: "none",
|
|
@@ -1868,13 +1871,13 @@ function AdvancedSettings({
|
|
|
1868
1871
|
chain: isSelected ? null : chain.name
|
|
1869
1872
|
}),
|
|
1870
1873
|
style: {
|
|
1871
|
-
padding: "
|
|
1874
|
+
padding: "7px 14px",
|
|
1872
1875
|
fontSize: "0.8rem",
|
|
1873
1876
|
fontWeight: 600,
|
|
1874
1877
|
fontFamily: "inherit",
|
|
1875
|
-
borderRadius: "
|
|
1878
|
+
borderRadius: "999px",
|
|
1876
1879
|
border: `1.5px solid ${isSelected ? tokens.accent : tokens.border}`,
|
|
1877
|
-
background: isSelected ? tokens.accent + "18" :
|
|
1880
|
+
background: isSelected ? tokens.accent + "18" : tokens.bgCard,
|
|
1878
1881
|
color: isSelected ? tokens.accent : tokens.text,
|
|
1879
1882
|
cursor: "pointer",
|
|
1880
1883
|
outline: "none",
|
|
@@ -1895,9 +1898,9 @@ function AdvancedSettings({
|
|
|
1895
1898
|
display: "flex",
|
|
1896
1899
|
alignItems: "center",
|
|
1897
1900
|
gap: "6px",
|
|
1898
|
-
background:
|
|
1901
|
+
background: tokens.bgCard,
|
|
1899
1902
|
border: `1px dashed ${tokens.border}`,
|
|
1900
|
-
borderRadius:
|
|
1903
|
+
borderRadius: "999px",
|
|
1901
1904
|
padding: "10px 14px",
|
|
1902
1905
|
width: "100%",
|
|
1903
1906
|
cursor: connectingNewAccount ? "not-allowed" : "pointer",
|
|
@@ -2519,7 +2522,7 @@ function SwypePayment({
|
|
|
2519
2522
|
background: tokens.bgCard,
|
|
2520
2523
|
borderRadius: tokens.radiusLg,
|
|
2521
2524
|
border: `1px solid ${tokens.border}`,
|
|
2522
|
-
padding: "
|
|
2525
|
+
padding: "30px 24px 24px",
|
|
2523
2526
|
maxWidth: 420,
|
|
2524
2527
|
width: "100%",
|
|
2525
2528
|
boxShadow: tokens.shadowLg,
|
|
@@ -2527,24 +2530,26 @@ function SwypePayment({
|
|
|
2527
2530
|
color: tokens.text
|
|
2528
2531
|
};
|
|
2529
2532
|
const headingStyle = {
|
|
2530
|
-
fontSize: "
|
|
2531
|
-
fontWeight:
|
|
2532
|
-
margin: "0 0
|
|
2533
|
+
fontSize: "2rem",
|
|
2534
|
+
fontWeight: 700,
|
|
2535
|
+
margin: "0 0 18px 0",
|
|
2536
|
+
letterSpacing: "-0.02em",
|
|
2533
2537
|
color: tokens.text,
|
|
2534
2538
|
textAlign: "center"
|
|
2535
2539
|
};
|
|
2536
2540
|
const btnPrimary = {
|
|
2537
2541
|
width: "100%",
|
|
2538
|
-
padding: "
|
|
2539
|
-
background: tokens.accent,
|
|
2542
|
+
padding: "15px 18px",
|
|
2543
|
+
background: `linear-gradient(180deg, ${tokens.accent}, ${tokens.accentHover})`,
|
|
2540
2544
|
color: tokens.accentText,
|
|
2541
2545
|
border: "none",
|
|
2542
|
-
borderRadius:
|
|
2543
|
-
fontSize: "
|
|
2544
|
-
fontWeight:
|
|
2546
|
+
borderRadius: "999px",
|
|
2547
|
+
fontSize: "1.03rem",
|
|
2548
|
+
fontWeight: 700,
|
|
2545
2549
|
cursor: "pointer",
|
|
2546
|
-
transition: "
|
|
2547
|
-
fontFamily: "inherit"
|
|
2550
|
+
transition: "filter 0.15s ease, transform 0.15s ease",
|
|
2551
|
+
fontFamily: "inherit",
|
|
2552
|
+
boxShadow: "0 8px 18px rgba(46, 182, 194, 0.28)"
|
|
2548
2553
|
};
|
|
2549
2554
|
const btnDisabled = {
|
|
2550
2555
|
...btnPrimary,
|
|
@@ -2553,15 +2558,16 @@ function SwypePayment({
|
|
|
2553
2558
|
};
|
|
2554
2559
|
({
|
|
2555
2560
|
...btnPrimary,
|
|
2561
|
+
background: tokens.bgCard,
|
|
2556
2562
|
color: tokens.textSecondary,
|
|
2557
2563
|
border: `1px solid ${tokens.border}`});
|
|
2558
2564
|
const errorStyle = {
|
|
2559
2565
|
background: tokens.errorBg,
|
|
2560
|
-
border: `1px solid ${tokens.error}`,
|
|
2561
|
-
borderRadius: tokens.
|
|
2562
|
-
padding: "
|
|
2566
|
+
border: `1px solid ${tokens.error}66`,
|
|
2567
|
+
borderRadius: tokens.radiusLg,
|
|
2568
|
+
padding: "11px 14px",
|
|
2563
2569
|
color: tokens.error,
|
|
2564
|
-
fontSize: "0.
|
|
2570
|
+
fontSize: "0.86rem",
|
|
2565
2571
|
marginBottom: "14px",
|
|
2566
2572
|
lineHeight: 1.5
|
|
2567
2573
|
};
|
|
@@ -2571,7 +2577,8 @@ function SwypePayment({
|
|
|
2571
2577
|
style: {
|
|
2572
2578
|
display: "flex",
|
|
2573
2579
|
alignItems: "center",
|
|
2574
|
-
|
|
2580
|
+
justifyContent: "center",
|
|
2581
|
+
gap: "10px",
|
|
2575
2582
|
marginBottom: "20px"
|
|
2576
2583
|
},
|
|
2577
2584
|
children: [
|
|
@@ -2579,10 +2586,22 @@ function SwypePayment({
|
|
|
2579
2586
|
"div",
|
|
2580
2587
|
{
|
|
2581
2588
|
style: {
|
|
2582
|
-
width:
|
|
2583
|
-
height:
|
|
2584
|
-
borderRadius:
|
|
2585
|
-
background: tokens.accent
|
|
2589
|
+
width: 28,
|
|
2590
|
+
height: 7,
|
|
2591
|
+
borderRadius: 999,
|
|
2592
|
+
background: tokens.accent,
|
|
2593
|
+
opacity: 0.95
|
|
2594
|
+
}
|
|
2595
|
+
}
|
|
2596
|
+
),
|
|
2597
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2598
|
+
"div",
|
|
2599
|
+
{
|
|
2600
|
+
style: {
|
|
2601
|
+
width: 8,
|
|
2602
|
+
height: 8,
|
|
2603
|
+
borderRadius: 999,
|
|
2604
|
+
background: tokens.border
|
|
2586
2605
|
}
|
|
2587
2606
|
}
|
|
2588
2607
|
),
|
|
@@ -2772,8 +2791,8 @@ function SwypePayment({
|
|
|
2772
2791
|
gap: "8px",
|
|
2773
2792
|
background: tokens.bgInput,
|
|
2774
2793
|
border: `1px solid ${tokens.border}`,
|
|
2775
|
-
borderRadius: tokens.
|
|
2776
|
-
padding: "
|
|
2794
|
+
borderRadius: tokens.radiusLg,
|
|
2795
|
+
padding: "6px 14px 6px 8px",
|
|
2777
2796
|
marginBottom: "8px"
|
|
2778
2797
|
},
|
|
2779
2798
|
children: [
|
|
@@ -2820,9 +2839,10 @@ function SwypePayment({
|
|
|
2820
2839
|
fontSize: "0.825rem",
|
|
2821
2840
|
fontWeight: 600,
|
|
2822
2841
|
color: tokens.textMuted,
|
|
2823
|
-
background: tokens.
|
|
2824
|
-
padding: "
|
|
2825
|
-
|
|
2842
|
+
background: tokens.bgCard,
|
|
2843
|
+
padding: "6px 12px",
|
|
2844
|
+
border: `1px solid ${tokens.border}`,
|
|
2845
|
+
borderRadius: "999px"
|
|
2826
2846
|
},
|
|
2827
2847
|
children: "USD"
|
|
2828
2848
|
}
|
|
@@ -2948,7 +2968,8 @@ function SwypePayment({
|
|
|
2948
2968
|
marginBottom: "16px",
|
|
2949
2969
|
padding: "12px 14px",
|
|
2950
2970
|
background: tokens.bgInput,
|
|
2951
|
-
borderRadius: tokens.
|
|
2971
|
+
borderRadius: tokens.radiusLg,
|
|
2972
|
+
border: `1px solid ${tokens.border}`,
|
|
2952
2973
|
lineHeight: 1.7
|
|
2953
2974
|
},
|
|
2954
2975
|
children: [
|
|
@@ -3147,9 +3168,9 @@ function SwypePayment({
|
|
|
3147
3168
|
width: "100%",
|
|
3148
3169
|
marginBottom: "12px",
|
|
3149
3170
|
padding: "10px 12px",
|
|
3150
|
-
borderRadius: tokens.
|
|
3171
|
+
borderRadius: tokens.radiusLg,
|
|
3151
3172
|
border: `1px solid ${tokens.border}`,
|
|
3152
|
-
background: tokens.
|
|
3173
|
+
background: tokens.bgInput,
|
|
3153
3174
|
color: tokens.text,
|
|
3154
3175
|
fontFamily: "inherit",
|
|
3155
3176
|
fontSize: "0.875rem",
|
|
@@ -3188,9 +3209,9 @@ function SwypePayment({
|
|
|
3188
3209
|
style: {
|
|
3189
3210
|
width: "100%",
|
|
3190
3211
|
padding: "10px 12px",
|
|
3191
|
-
borderRadius: tokens.
|
|
3212
|
+
borderRadius: tokens.radiusLg,
|
|
3192
3213
|
border: `1px solid ${tokens.border}`,
|
|
3193
|
-
background: tokens.
|
|
3214
|
+
background: tokens.bgInput,
|
|
3194
3215
|
color: tokens.text,
|
|
3195
3216
|
fontFamily: "inherit",
|
|
3196
3217
|
fontSize: "0.875rem",
|
|
@@ -3233,7 +3254,7 @@ function SwypePayment({
|
|
|
3233
3254
|
] }),
|
|
3234
3255
|
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: { ...headingStyle, marginBottom: "8px" }, children: "Authorize Transfer" }),
|
|
3235
3256
|
/* @__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." }),
|
|
3236
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: "0.825rem", color: tokens.textSecondary, padding: "12px 14px", background: tokens.bgInput, borderRadius: tokens.
|
|
3257
|
+
/* @__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: [
|
|
3237
3258
|
payload.amount && payload.tokenSymbol && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
|
|
3238
3259
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Amount" }),
|
|
3239
3260
|
/* @__PURE__ */ jsxRuntime.jsxs("span", { style: { fontWeight: 600, color: tokens.text }, children: [
|
|
@@ -3424,7 +3445,8 @@ function SwypePayment({
|
|
|
3424
3445
|
margin: "0 0 24px 0",
|
|
3425
3446
|
padding: "14px",
|
|
3426
3447
|
background: tokens.bgInput,
|
|
3427
|
-
borderRadius: tokens.
|
|
3448
|
+
borderRadius: tokens.radiusLg,
|
|
3449
|
+
border: `1px solid ${tokens.border}`,
|
|
3428
3450
|
textAlign: "left",
|
|
3429
3451
|
lineHeight: 1.8
|
|
3430
3452
|
},
|