@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.js
CHANGED
|
@@ -15,52 +15,52 @@ var __export = (target, all) => {
|
|
|
15
15
|
|
|
16
16
|
// src/theme.ts
|
|
17
17
|
var darkTheme = {
|
|
18
|
-
bg: "#
|
|
19
|
-
bgCard: "#
|
|
20
|
-
bgInput: "#
|
|
21
|
-
bgHover: "#
|
|
22
|
-
bgOverlay: "rgba(
|
|
23
|
-
text: "#
|
|
24
|
-
textSecondary: "#
|
|
25
|
-
textMuted: "#
|
|
26
|
-
textInverse: "#
|
|
27
|
-
border: "#
|
|
28
|
-
borderFocus: "#
|
|
29
|
-
accent: "#
|
|
30
|
-
accentHover: "#
|
|
18
|
+
bg: "#071216",
|
|
19
|
+
bgCard: "#101c22",
|
|
20
|
+
bgInput: "#17272f",
|
|
21
|
+
bgHover: "#20343d",
|
|
22
|
+
bgOverlay: "rgba(3, 10, 13, 0.7)",
|
|
23
|
+
text: "#ecfeff",
|
|
24
|
+
textSecondary: "#b7d3dd",
|
|
25
|
+
textMuted: "#7fa4b0",
|
|
26
|
+
textInverse: "#052027",
|
|
27
|
+
border: "#2b4551",
|
|
28
|
+
borderFocus: "#2ec4cf",
|
|
29
|
+
accent: "#2eb6c2",
|
|
30
|
+
accentHover: "#239ba6",
|
|
31
31
|
accentText: "#ffffff",
|
|
32
|
-
success: "#
|
|
33
|
-
successBg: "#
|
|
34
|
-
error: "#
|
|
35
|
-
errorBg: "#
|
|
36
|
-
shadow: "0 1px
|
|
37
|
-
shadowLg: "0
|
|
38
|
-
radius: "
|
|
39
|
-
radiusLg: "
|
|
32
|
+
success: "#0f9d73",
|
|
33
|
+
successBg: "#0f2f2a",
|
|
34
|
+
error: "#d46a72",
|
|
35
|
+
errorBg: "#301d21",
|
|
36
|
+
shadow: "0 1px 4px rgba(0,0,0,0.35)",
|
|
37
|
+
shadowLg: "0 18px 44px rgba(0,0,0,0.42)",
|
|
38
|
+
radius: "14px",
|
|
39
|
+
radiusLg: "24px"
|
|
40
40
|
};
|
|
41
41
|
var lightTheme = {
|
|
42
|
-
bg: "#
|
|
43
|
-
bgCard: "#
|
|
44
|
-
bgInput: "#
|
|
45
|
-
bgHover: "#
|
|
46
|
-
bgOverlay: "rgba(
|
|
47
|
-
text: "#
|
|
48
|
-
textSecondary: "#
|
|
49
|
-
textMuted: "#
|
|
42
|
+
bg: "#ebf9fb",
|
|
43
|
+
bgCard: "#f9fdff",
|
|
44
|
+
bgInput: "#f1f8fb",
|
|
45
|
+
bgHover: "#e7f4f7",
|
|
46
|
+
bgOverlay: "rgba(7, 18, 22, 0.18)",
|
|
47
|
+
text: "#12222b",
|
|
48
|
+
textSecondary: "#4b6772",
|
|
49
|
+
textMuted: "#7d97a1",
|
|
50
50
|
textInverse: "#ffffff",
|
|
51
|
-
border: "#
|
|
52
|
-
borderFocus: "#
|
|
53
|
-
accent: "#
|
|
54
|
-
accentHover: "#
|
|
51
|
+
border: "#d2e4ea",
|
|
52
|
+
borderFocus: "#2eb6c2",
|
|
53
|
+
accent: "#2eb6c2",
|
|
54
|
+
accentHover: "#259da7",
|
|
55
55
|
accentText: "#ffffff",
|
|
56
|
-
success: "#
|
|
57
|
-
successBg: "#
|
|
58
|
-
error: "#
|
|
59
|
-
errorBg: "#
|
|
60
|
-
shadow: "0 1px 3px rgba(
|
|
61
|
-
shadowLg: "0
|
|
62
|
-
radius: "
|
|
63
|
-
radiusLg: "
|
|
56
|
+
success: "#0f9d73",
|
|
57
|
+
successBg: "#e6f7f1",
|
|
58
|
+
error: "#ce6670",
|
|
59
|
+
errorBg: "#fdf1f2",
|
|
60
|
+
shadow: "0 1px 3px rgba(12, 31, 39, 0.08)",
|
|
61
|
+
shadowLg: "0 20px 48px rgba(19, 61, 75, 0.14)",
|
|
62
|
+
radius: "14px",
|
|
63
|
+
radiusLg: "24px"
|
|
64
64
|
};
|
|
65
65
|
function getTheme(mode) {
|
|
66
66
|
return mode === "dark" ? darkTheme : lightTheme;
|
|
@@ -1287,10 +1287,12 @@ function Spinner({ size = 40, label }) {
|
|
|
1287
1287
|
style: {
|
|
1288
1288
|
width: size,
|
|
1289
1289
|
height: size,
|
|
1290
|
-
border: `
|
|
1290
|
+
border: `4px solid ${tokens.bgInput}`,
|
|
1291
1291
|
borderTopColor: tokens.accent,
|
|
1292
|
+
borderRightColor: tokens.accent + "66",
|
|
1292
1293
|
borderRadius: "50%",
|
|
1293
|
-
|
|
1294
|
+
boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.1)",
|
|
1295
|
+
animation: "swype-spin 0.9s linear infinite"
|
|
1294
1296
|
}
|
|
1295
1297
|
}
|
|
1296
1298
|
),
|
|
@@ -1321,7 +1323,7 @@ function ProviderCard({ provider, selected, onClick }) {
|
|
|
1321
1323
|
padding: "14px 16px",
|
|
1322
1324
|
background: selected ? tokens.accent + "18" : hovered ? tokens.bgHover : tokens.bgInput,
|
|
1323
1325
|
border: `1.5px solid ${selected ? tokens.accent : tokens.border}`,
|
|
1324
|
-
borderRadius: tokens.
|
|
1326
|
+
borderRadius: tokens.radiusLg,
|
|
1325
1327
|
cursor: "pointer",
|
|
1326
1328
|
transition: "all 0.15s ease",
|
|
1327
1329
|
color: tokens.text,
|
|
@@ -1340,7 +1342,7 @@ function ProviderCard({ provider, selected, onClick }) {
|
|
|
1340
1342
|
style: {
|
|
1341
1343
|
width: 32,
|
|
1342
1344
|
height: 32,
|
|
1343
|
-
borderRadius: "
|
|
1345
|
+
borderRadius: "50%",
|
|
1344
1346
|
objectFit: "contain"
|
|
1345
1347
|
}
|
|
1346
1348
|
}
|
|
@@ -1350,7 +1352,7 @@ function ProviderCard({ provider, selected, onClick }) {
|
|
|
1350
1352
|
style: {
|
|
1351
1353
|
width: 32,
|
|
1352
1354
|
height: 32,
|
|
1353
|
-
borderRadius: "
|
|
1355
|
+
borderRadius: "50%",
|
|
1354
1356
|
background: tokens.accent + "30",
|
|
1355
1357
|
display: "flex",
|
|
1356
1358
|
alignItems: "center",
|
|
@@ -1456,10 +1458,11 @@ function AccountDropdown({
|
|
|
1456
1458
|
display: "flex",
|
|
1457
1459
|
alignItems: "center",
|
|
1458
1460
|
gap: "6px",
|
|
1459
|
-
background:
|
|
1460
|
-
border:
|
|
1461
|
+
background: tokens.bgCard,
|
|
1462
|
+
border: `1px solid ${tokens.border}`,
|
|
1461
1463
|
cursor: "pointer",
|
|
1462
|
-
padding: "
|
|
1464
|
+
padding: "7px 10px",
|
|
1465
|
+
borderRadius: "999px",
|
|
1463
1466
|
color: tokens.textSecondary,
|
|
1464
1467
|
fontFamily: "inherit",
|
|
1465
1468
|
fontSize: "0.85rem",
|
|
@@ -1516,7 +1519,7 @@ function AccountDropdown({
|
|
|
1516
1519
|
marginTop: "4px",
|
|
1517
1520
|
background: tokens.bgCard,
|
|
1518
1521
|
border: `1px solid ${tokens.border}`,
|
|
1519
|
-
borderRadius: tokens.
|
|
1522
|
+
borderRadius: tokens.radiusLg,
|
|
1520
1523
|
boxShadow: tokens.shadowLg,
|
|
1521
1524
|
zIndex: 50,
|
|
1522
1525
|
overflow: "hidden",
|
|
@@ -1575,8 +1578,8 @@ function AccountDropdown({
|
|
|
1575
1578
|
fontWeight: 600,
|
|
1576
1579
|
color: tokens.success,
|
|
1577
1580
|
background: tokens.successBg,
|
|
1578
|
-
padding: "
|
|
1579
|
-
borderRadius: "
|
|
1581
|
+
padding: "2px 7px",
|
|
1582
|
+
borderRadius: "999px",
|
|
1580
1583
|
textTransform: "uppercase",
|
|
1581
1584
|
letterSpacing: "0.03em"
|
|
1582
1585
|
},
|
|
@@ -1791,7 +1794,7 @@ function AdvancedSettings({
|
|
|
1791
1794
|
marginTop: "10px",
|
|
1792
1795
|
padding: "14px",
|
|
1793
1796
|
background: tokens.bgInput,
|
|
1794
|
-
borderRadius: tokens.
|
|
1797
|
+
borderRadius: tokens.radiusLg,
|
|
1795
1798
|
border: `1px solid ${tokens.border}`
|
|
1796
1799
|
},
|
|
1797
1800
|
children: [
|
|
@@ -1821,13 +1824,13 @@ function AdvancedSettings({
|
|
|
1821
1824
|
asset: isSelected ? null : asset
|
|
1822
1825
|
}),
|
|
1823
1826
|
style: {
|
|
1824
|
-
padding: "
|
|
1827
|
+
padding: "7px 14px",
|
|
1825
1828
|
fontSize: "0.8rem",
|
|
1826
1829
|
fontWeight: 600,
|
|
1827
1830
|
fontFamily: "inherit",
|
|
1828
|
-
borderRadius: "
|
|
1831
|
+
borderRadius: "999px",
|
|
1829
1832
|
border: `1.5px solid ${isSelected ? tokens.accent : tokens.border}`,
|
|
1830
|
-
background: isSelected ? tokens.accent + "18" :
|
|
1833
|
+
background: isSelected ? tokens.accent + "18" : tokens.bgCard,
|
|
1831
1834
|
color: isSelected ? tokens.accent : tokens.text,
|
|
1832
1835
|
cursor: "pointer",
|
|
1833
1836
|
outline: "none",
|
|
@@ -1865,13 +1868,13 @@ function AdvancedSettings({
|
|
|
1865
1868
|
chain: isSelected ? null : chain.name
|
|
1866
1869
|
}),
|
|
1867
1870
|
style: {
|
|
1868
|
-
padding: "
|
|
1871
|
+
padding: "7px 14px",
|
|
1869
1872
|
fontSize: "0.8rem",
|
|
1870
1873
|
fontWeight: 600,
|
|
1871
1874
|
fontFamily: "inherit",
|
|
1872
|
-
borderRadius: "
|
|
1875
|
+
borderRadius: "999px",
|
|
1873
1876
|
border: `1.5px solid ${isSelected ? tokens.accent : tokens.border}`,
|
|
1874
|
-
background: isSelected ? tokens.accent + "18" :
|
|
1877
|
+
background: isSelected ? tokens.accent + "18" : tokens.bgCard,
|
|
1875
1878
|
color: isSelected ? tokens.accent : tokens.text,
|
|
1876
1879
|
cursor: "pointer",
|
|
1877
1880
|
outline: "none",
|
|
@@ -1892,9 +1895,9 @@ function AdvancedSettings({
|
|
|
1892
1895
|
display: "flex",
|
|
1893
1896
|
alignItems: "center",
|
|
1894
1897
|
gap: "6px",
|
|
1895
|
-
background:
|
|
1898
|
+
background: tokens.bgCard,
|
|
1896
1899
|
border: `1px dashed ${tokens.border}`,
|
|
1897
|
-
borderRadius:
|
|
1900
|
+
borderRadius: "999px",
|
|
1898
1901
|
padding: "10px 14px",
|
|
1899
1902
|
width: "100%",
|
|
1900
1903
|
cursor: connectingNewAccount ? "not-allowed" : "pointer",
|
|
@@ -2516,7 +2519,7 @@ function SwypePayment({
|
|
|
2516
2519
|
background: tokens.bgCard,
|
|
2517
2520
|
borderRadius: tokens.radiusLg,
|
|
2518
2521
|
border: `1px solid ${tokens.border}`,
|
|
2519
|
-
padding: "
|
|
2522
|
+
padding: "30px 24px 24px",
|
|
2520
2523
|
maxWidth: 420,
|
|
2521
2524
|
width: "100%",
|
|
2522
2525
|
boxShadow: tokens.shadowLg,
|
|
@@ -2524,24 +2527,26 @@ function SwypePayment({
|
|
|
2524
2527
|
color: tokens.text
|
|
2525
2528
|
};
|
|
2526
2529
|
const headingStyle = {
|
|
2527
|
-
fontSize: "
|
|
2528
|
-
fontWeight:
|
|
2529
|
-
margin: "0 0
|
|
2530
|
+
fontSize: "2rem",
|
|
2531
|
+
fontWeight: 700,
|
|
2532
|
+
margin: "0 0 18px 0",
|
|
2533
|
+
letterSpacing: "-0.02em",
|
|
2530
2534
|
color: tokens.text,
|
|
2531
2535
|
textAlign: "center"
|
|
2532
2536
|
};
|
|
2533
2537
|
const btnPrimary = {
|
|
2534
2538
|
width: "100%",
|
|
2535
|
-
padding: "
|
|
2536
|
-
background: tokens.accent,
|
|
2539
|
+
padding: "15px 18px",
|
|
2540
|
+
background: `linear-gradient(180deg, ${tokens.accent}, ${tokens.accentHover})`,
|
|
2537
2541
|
color: tokens.accentText,
|
|
2538
2542
|
border: "none",
|
|
2539
|
-
borderRadius:
|
|
2540
|
-
fontSize: "
|
|
2541
|
-
fontWeight:
|
|
2543
|
+
borderRadius: "999px",
|
|
2544
|
+
fontSize: "1.03rem",
|
|
2545
|
+
fontWeight: 700,
|
|
2542
2546
|
cursor: "pointer",
|
|
2543
|
-
transition: "
|
|
2544
|
-
fontFamily: "inherit"
|
|
2547
|
+
transition: "filter 0.15s ease, transform 0.15s ease",
|
|
2548
|
+
fontFamily: "inherit",
|
|
2549
|
+
boxShadow: "0 8px 18px rgba(46, 182, 194, 0.28)"
|
|
2545
2550
|
};
|
|
2546
2551
|
const btnDisabled = {
|
|
2547
2552
|
...btnPrimary,
|
|
@@ -2550,15 +2555,16 @@ function SwypePayment({
|
|
|
2550
2555
|
};
|
|
2551
2556
|
({
|
|
2552
2557
|
...btnPrimary,
|
|
2558
|
+
background: tokens.bgCard,
|
|
2553
2559
|
color: tokens.textSecondary,
|
|
2554
2560
|
border: `1px solid ${tokens.border}`});
|
|
2555
2561
|
const errorStyle = {
|
|
2556
2562
|
background: tokens.errorBg,
|
|
2557
|
-
border: `1px solid ${tokens.error}`,
|
|
2558
|
-
borderRadius: tokens.
|
|
2559
|
-
padding: "
|
|
2563
|
+
border: `1px solid ${tokens.error}66`,
|
|
2564
|
+
borderRadius: tokens.radiusLg,
|
|
2565
|
+
padding: "11px 14px",
|
|
2560
2566
|
color: tokens.error,
|
|
2561
|
-
fontSize: "0.
|
|
2567
|
+
fontSize: "0.86rem",
|
|
2562
2568
|
marginBottom: "14px",
|
|
2563
2569
|
lineHeight: 1.5
|
|
2564
2570
|
};
|
|
@@ -2568,7 +2574,8 @@ function SwypePayment({
|
|
|
2568
2574
|
style: {
|
|
2569
2575
|
display: "flex",
|
|
2570
2576
|
alignItems: "center",
|
|
2571
|
-
|
|
2577
|
+
justifyContent: "center",
|
|
2578
|
+
gap: "10px",
|
|
2572
2579
|
marginBottom: "20px"
|
|
2573
2580
|
},
|
|
2574
2581
|
children: [
|
|
@@ -2576,10 +2583,22 @@ function SwypePayment({
|
|
|
2576
2583
|
"div",
|
|
2577
2584
|
{
|
|
2578
2585
|
style: {
|
|
2579
|
-
width:
|
|
2580
|
-
height:
|
|
2581
|
-
borderRadius:
|
|
2582
|
-
background: tokens.accent
|
|
2586
|
+
width: 28,
|
|
2587
|
+
height: 7,
|
|
2588
|
+
borderRadius: 999,
|
|
2589
|
+
background: tokens.accent,
|
|
2590
|
+
opacity: 0.95
|
|
2591
|
+
}
|
|
2592
|
+
}
|
|
2593
|
+
),
|
|
2594
|
+
/* @__PURE__ */ jsx(
|
|
2595
|
+
"div",
|
|
2596
|
+
{
|
|
2597
|
+
style: {
|
|
2598
|
+
width: 8,
|
|
2599
|
+
height: 8,
|
|
2600
|
+
borderRadius: 999,
|
|
2601
|
+
background: tokens.border
|
|
2583
2602
|
}
|
|
2584
2603
|
}
|
|
2585
2604
|
),
|
|
@@ -2769,8 +2788,8 @@ function SwypePayment({
|
|
|
2769
2788
|
gap: "8px",
|
|
2770
2789
|
background: tokens.bgInput,
|
|
2771
2790
|
border: `1px solid ${tokens.border}`,
|
|
2772
|
-
borderRadius: tokens.
|
|
2773
|
-
padding: "
|
|
2791
|
+
borderRadius: tokens.radiusLg,
|
|
2792
|
+
padding: "6px 14px 6px 8px",
|
|
2774
2793
|
marginBottom: "8px"
|
|
2775
2794
|
},
|
|
2776
2795
|
children: [
|
|
@@ -2817,9 +2836,10 @@ function SwypePayment({
|
|
|
2817
2836
|
fontSize: "0.825rem",
|
|
2818
2837
|
fontWeight: 600,
|
|
2819
2838
|
color: tokens.textMuted,
|
|
2820
|
-
background: tokens.
|
|
2821
|
-
padding: "
|
|
2822
|
-
|
|
2839
|
+
background: tokens.bgCard,
|
|
2840
|
+
padding: "6px 12px",
|
|
2841
|
+
border: `1px solid ${tokens.border}`,
|
|
2842
|
+
borderRadius: "999px"
|
|
2823
2843
|
},
|
|
2824
2844
|
children: "USD"
|
|
2825
2845
|
}
|
|
@@ -2945,7 +2965,8 @@ function SwypePayment({
|
|
|
2945
2965
|
marginBottom: "16px",
|
|
2946
2966
|
padding: "12px 14px",
|
|
2947
2967
|
background: tokens.bgInput,
|
|
2948
|
-
borderRadius: tokens.
|
|
2968
|
+
borderRadius: tokens.radiusLg,
|
|
2969
|
+
border: `1px solid ${tokens.border}`,
|
|
2949
2970
|
lineHeight: 1.7
|
|
2950
2971
|
},
|
|
2951
2972
|
children: [
|
|
@@ -3144,9 +3165,9 @@ function SwypePayment({
|
|
|
3144
3165
|
width: "100%",
|
|
3145
3166
|
marginBottom: "12px",
|
|
3146
3167
|
padding: "10px 12px",
|
|
3147
|
-
borderRadius: tokens.
|
|
3168
|
+
borderRadius: tokens.radiusLg,
|
|
3148
3169
|
border: `1px solid ${tokens.border}`,
|
|
3149
|
-
background: tokens.
|
|
3170
|
+
background: tokens.bgInput,
|
|
3150
3171
|
color: tokens.text,
|
|
3151
3172
|
fontFamily: "inherit",
|
|
3152
3173
|
fontSize: "0.875rem",
|
|
@@ -3185,9 +3206,9 @@ function SwypePayment({
|
|
|
3185
3206
|
style: {
|
|
3186
3207
|
width: "100%",
|
|
3187
3208
|
padding: "10px 12px",
|
|
3188
|
-
borderRadius: tokens.
|
|
3209
|
+
borderRadius: tokens.radiusLg,
|
|
3189
3210
|
border: `1px solid ${tokens.border}`,
|
|
3190
|
-
background: tokens.
|
|
3211
|
+
background: tokens.bgInput,
|
|
3191
3212
|
color: tokens.text,
|
|
3192
3213
|
fontFamily: "inherit",
|
|
3193
3214
|
fontSize: "0.875rem",
|
|
@@ -3230,7 +3251,7 @@ function SwypePayment({
|
|
|
3230
3251
|
] }),
|
|
3231
3252
|
/* @__PURE__ */ jsx("h2", { style: { ...headingStyle, marginBottom: "8px" }, children: "Authorize Transfer" }),
|
|
3232
3253
|
/* @__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." }),
|
|
3233
|
-
/* @__PURE__ */ jsxs("div", { style: { fontSize: "0.825rem", color: tokens.textSecondary, padding: "12px 14px", background: tokens.bgInput, borderRadius: tokens.
|
|
3254
|
+
/* @__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: [
|
|
3234
3255
|
payload.amount && payload.tokenSymbol && /* @__PURE__ */ jsxs("div", { style: { display: "flex", justifyContent: "space-between" }, children: [
|
|
3235
3256
|
/* @__PURE__ */ jsx("span", { children: "Amount" }),
|
|
3236
3257
|
/* @__PURE__ */ jsxs("span", { style: { fontWeight: 600, color: tokens.text }, children: [
|
|
@@ -3421,7 +3442,8 @@ function SwypePayment({
|
|
|
3421
3442
|
margin: "0 0 24px 0",
|
|
3422
3443
|
padding: "14px",
|
|
3423
3444
|
background: tokens.bgInput,
|
|
3424
|
-
borderRadius: tokens.
|
|
3445
|
+
borderRadius: tokens.radiusLg,
|
|
3446
|
+
border: `1px solid ${tokens.border}`,
|
|
3425
3447
|
textAlign: "left",
|
|
3426
3448
|
lineHeight: 1.8
|
|
3427
3449
|
},
|