@swype-org/react-sdk 0.1.172 → 0.1.180
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 +467 -351
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +12 -2
- package/dist/index.d.ts +12 -2
- package/dist/index.js +465 -352
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -30,9 +30,9 @@ var darkTheme = {
|
|
|
30
30
|
textInverse: "#052027",
|
|
31
31
|
border: "#2b4551",
|
|
32
32
|
borderFocus: "#28b67a",
|
|
33
|
-
accent: "#
|
|
34
|
-
accentHover: "#
|
|
35
|
-
accentText: "#
|
|
33
|
+
accent: "#B2FF93",
|
|
34
|
+
accentHover: "#8FD974",
|
|
35
|
+
accentText: "#1B4332",
|
|
36
36
|
success: "#0f9d73",
|
|
37
37
|
successBg: "#0f2f2a",
|
|
38
38
|
error: "#d46a72",
|
|
@@ -57,9 +57,9 @@ var lightTheme = {
|
|
|
57
57
|
textInverse: "#ffffff",
|
|
58
58
|
border: "#d2e4ea",
|
|
59
59
|
borderFocus: "#28b67a",
|
|
60
|
-
accent: "#
|
|
61
|
-
accentHover: "#
|
|
62
|
-
accentText: "#
|
|
60
|
+
accent: "#B2FF93",
|
|
61
|
+
accentHover: "#8FD974",
|
|
62
|
+
accentText: "#1B4332",
|
|
63
63
|
success: "#0f9d73",
|
|
64
64
|
successBg: "#e6f7f1",
|
|
65
65
|
error: "#ce6670",
|
|
@@ -2217,6 +2217,16 @@ var SWYPE_SVG = `<svg width="100" height="100" viewBox="0 0 100 100" fill="none"
|
|
|
2217
2217
|
</defs>
|
|
2218
2218
|
</svg>`;
|
|
2219
2219
|
var SWYPE_LOGO = svgToDataUri(SWYPE_SVG);
|
|
2220
|
+
var SWYPE_MASCOT_SVG = `<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2221
|
+
<path d="M64.0138 36.6191C68.3952 36.7025 70.2512 42.3038 65.1932 44.0399C61.4251 44.2617 60.8419 41.8557 61.3059 38.6113C62.3258 37.4916 62.6562 37.2326 64.0138 36.6191Z" fill="#1a5c2a"/>
|
|
2222
|
+
<path d="M34.7441 36.6714C36.6646 36.3309 38.4839 37.6898 38.813 39.71C39.1407 41.7302 37.8542 43.6499 35.9352 43.9994C34.7427 44.2169 33.5274 43.7774 32.7154 42.8325C31.8492 41.8262 31.5728 40.4029 31.9959 39.1191C32.419 37.8367 33.4719 36.8979 34.7441 36.6714Z" fill="#1a5c2a"/>
|
|
2223
|
+
<path d="M37.719 72.0299C39.0372 70.605 40.611 68.9843 41.7888 67.4312L50.1528 61.6651L57.6601 61.4468C57.4965 63.5289 61.7342 75.3729 61.6981 77.5158C62.154 77.0628 63.0658 76.3318 63.567 75.9876C65.9954 74.3365 68.8384 73.8223 71.4833 74.5554C72.8167 74.9328 73.9331 75.9251 74.58 77.3075C75.2967 78.8451 75.3771 80.3207 74.9127 82.0281C73.8912 85.7844 71.5792 88.6365 68.624 90.5357C66.125 92.1415 61.7077 93.9276 58.9822 93.0828C58.078 92.7956 56.4567 92.015 55.9204 91.1399C55.1385 89.8648 54.5613 88.8907 54.1469 87.3736C53.3686 84.4709 53.3459 86.0793 52.7439 77.9085C52.8102 75.0919 52.9961 69.1199 52.9088 66.782C52.1044 67.8121 48.6686 72.1053 47.7896 73.7937L43.7186 79.5555C45.2316 79.4947 47.0626 79.5314 48.354 80.4535C49.2813 81.1277 49.9192 82.2144 50.1273 83.4755C50.2332 83.8294 50.3132 84.6855 50.3258 85.0634C50.4307 88.2051 49.4337 91.7462 46.8974 93.4764C45.8189 94.2126 44.2654 94.598 43.01 94.7341C37.9909 95.3115 33.0817 93.5835 29.3502 89.9257C28.3222 88.8994 27.4875 87.705 27.4333 86.0333C27.4046 85.1165 27.6099 84.1963 28.0241 83.3859C28.6301 82.2147 30.2471 80.3005 31.0794 79.3156C33.2057 76.7997 35.4975 74.4306 37.719 72.0299Z" fill="#4ABA5A"/>
|
|
2224
|
+
<path d="M25.2815 30.5666C25.6441 30.6182 25.869 30.0928 25.5864 29.8598C23.1701 27.868 21.5484 25.4469 21.0444 22.6545C20.3641 19.1251 21.516 15.5212 24.2422 12.6488C26.8514 9.91783 30.7518 8.12575 35.0552 7.68041C40.5681 7.11357 44.9544 9.44386 49.0355 11.908C49.1016 11.9479 49.1793 11.964 49.2559 11.9535L49.6641 11.8975C49.7772 11.882 49.8729 11.8099 49.9313 11.7118C50.7042 10.4132 53.3609 9.13558 54.9428 8.55183C63.274 5.47733 72.1015 8.67608 75.6217 15.0543C77.4169 18.3043 77.4637 21.9922 75.7515 25.2845C74.8719 26.99 73.8277 28.1868 72.3742 29.4156C72.1074 29.6412 72.3057 30.099 72.652 30.0534C78.3434 29.3036 83.6958 29.6535 88.1602 33.0995C88.1743 33.1104 88.1896 33.1204 88.2051 33.1289C94.9326 36.8336 95.4063 45.4019 90.8735 50.5016C88.6438 53.0434 85.3883 54.9193 81.641 55.8268C81.4786 55.8662 81.3675 56.017 81.3778 56.1837C81.627 60.2197 80.6407 63.7049 77.0957 66.8558C74.3594 69.31 72.2572 70.905 68.1242 71.1594C66.1317 71.2671 64.5824 71.0823 61.0405 69.4728C57.7759 67.9894 53.6996 61.9918 52.509 57.7058C52.4204 57.3871 51.9326 57.3204 51.7644 57.6052C49.4075 61.5961 43.2088 67.6787 38.7227 69.4728C35.1404 70.8919 32.2895 71.8779 28.5005 70.8789C24.3706 69.7951 20.9698 67.4623 19.0499 64.3964C18.0021 62.7282 16.7577 59.3144 17.4723 57.5087C17.4921 57.4587 17.5023 57.4056 17.4951 57.3522C17.4647 57.1259 17.359 56.7067 17.1377 56.6504C8.17592 54.367 2.58735 48.0815 5.03045 40.4013C6.14562 36.9784 8.95444 34.0395 12.8321 32.2381C16.7957 30.3763 20.9323 29.9475 25.2815 30.5666Z" fill="#4ABA5A"/>
|
|
2225
|
+
<rect x="44.3433" y="56.4863" width="10.1195" height="9.10751" fill="#4ABA5A"/>
|
|
2226
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M45.6929 25.6221C49.2323 25.6223 52.1021 31.512 52.1021 38.7773C52.102 46.0426 49.2323 51.9323 45.6929 51.9326C42.2373 51.9326 39.4213 46.3188 39.2896 39.292C41.4308 38.8166 43.9097 38.7264 46.1079 39.1299C47.0121 39.2956 47.8949 38.5389 47.4956 37.7109C46.0273 34.6668 42.4111 34.0327 39.686 34.1816C40.5942 29.1824 42.9408 25.6221 45.6929 25.6221Z" fill="#1a5c2a"/>
|
|
2227
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M63.2471 25.6216C66.7865 25.6219 69.6562 31.5116 69.6562 38.7769C69.6562 46.0422 66.7865 51.9319 63.2471 51.9321C59.7916 51.9321 56.9756 46.319 56.8438 39.2925C58.985 38.8171 61.4639 38.7259 63.6621 39.1294C64.5663 39.2952 65.4491 38.5394 65.0498 37.7114C63.5816 34.6669 59.9654 34.0322 57.2402 34.1812C58.1484 29.1821 60.4951 25.6216 63.2471 25.6216Z" fill="#1a5c2a"/>
|
|
2228
|
+
</svg>`;
|
|
2229
|
+
var SWYPE_MASCOT = svgToDataUri(SWYPE_MASCOT_SVG);
|
|
2220
2230
|
var BASE_LOGO = svgToDataUri(BASE_SVG);
|
|
2221
2231
|
var METAMASK_LOGO = svgToDataUri(METAMASK_SVG);
|
|
2222
2232
|
var TRUST_WALLET_LOGO = svgToDataUri(TRUST_WALLET_SVG);
|
|
@@ -2244,7 +2254,7 @@ var containerStyle2 = (bg) => ({
|
|
|
2244
2254
|
maxWidth: 420,
|
|
2245
2255
|
width: "100%",
|
|
2246
2256
|
margin: "0 auto",
|
|
2247
|
-
background: bg
|
|
2257
|
+
background: `linear-gradient(to top, rgba(178, 255, 147, 0.15), transparent 40%), ${bg}`,
|
|
2248
2258
|
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
|
|
2249
2259
|
boxSizing: "border-box"
|
|
2250
2260
|
});
|
|
@@ -2262,14 +2272,69 @@ var footerStyle = {
|
|
|
2262
2272
|
paddingRight: 24,
|
|
2263
2273
|
marginTop: "auto"
|
|
2264
2274
|
};
|
|
2275
|
+
var FlowPhaseContext = react.createContext(null);
|
|
2276
|
+
function FlowPhaseProvider({
|
|
2277
|
+
phase,
|
|
2278
|
+
children
|
|
2279
|
+
}) {
|
|
2280
|
+
return /* @__PURE__ */ jsxRuntime.jsx(FlowPhaseContext.Provider, { value: phase, children });
|
|
2281
|
+
}
|
|
2282
|
+
function useFlowPhase() {
|
|
2283
|
+
return react.useContext(FlowPhaseContext);
|
|
2284
|
+
}
|
|
2285
|
+
function StepProgress({ phase }) {
|
|
2286
|
+
const { tokens } = useSwypeConfig();
|
|
2287
|
+
if (phase === "deposit") {
|
|
2288
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle3, children: [
|
|
2289
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: dotStyle(tokens.textMuted) }),
|
|
2290
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle(tokens.textMuted), children: "Link" }),
|
|
2291
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: lineStyle(tokens.textMuted) }),
|
|
2292
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: dotStyle(tokens.accent) }),
|
|
2293
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle(tokens.text), children: "Deposit" })
|
|
2294
|
+
] });
|
|
2295
|
+
}
|
|
2296
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle3, children: [
|
|
2297
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: dotStyle(tokens.accent) }),
|
|
2298
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle(tokens.text), children: "Link" }),
|
|
2299
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: lineStyle(tokens.textMuted) }),
|
|
2300
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: dotStyle(tokens.textMuted) }),
|
|
2301
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle(tokens.textMuted), children: "Deposit" })
|
|
2302
|
+
] });
|
|
2303
|
+
}
|
|
2304
|
+
var containerStyle3 = {
|
|
2305
|
+
display: "flex",
|
|
2306
|
+
alignItems: "center",
|
|
2307
|
+
gap: 6
|
|
2308
|
+
};
|
|
2309
|
+
var dotStyle = (color) => ({
|
|
2310
|
+
width: 8,
|
|
2311
|
+
height: 8,
|
|
2312
|
+
borderRadius: "50%",
|
|
2313
|
+
backgroundColor: color,
|
|
2314
|
+
flexShrink: 0
|
|
2315
|
+
});
|
|
2316
|
+
var lineStyle = (color) => ({
|
|
2317
|
+
width: 32,
|
|
2318
|
+
height: 0,
|
|
2319
|
+
borderTop: `2px dashed ${color}`,
|
|
2320
|
+
opacity: 0.4,
|
|
2321
|
+
flexShrink: 0
|
|
2322
|
+
});
|
|
2323
|
+
var labelStyle = (color) => ({
|
|
2324
|
+
fontSize: "0.82rem",
|
|
2325
|
+
fontWeight: 600,
|
|
2326
|
+
color,
|
|
2327
|
+
whiteSpace: "nowrap"
|
|
2328
|
+
});
|
|
2265
2329
|
function ScreenHeader({ title, right, onBack, badge }) {
|
|
2266
2330
|
const { tokens } = useSwypeConfig();
|
|
2331
|
+
const flowPhase = useFlowPhase();
|
|
2267
2332
|
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerStyle, children: [
|
|
2268
2333
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: leftSlotStyle, children: onBack && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: onBack, style: backButtonStyle(tokens.text), "aria-label": "Go back", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 18l-6-6 6-6", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) }) }),
|
|
2269
|
-
/* @__PURE__ */ jsxRuntime.
|
|
2334
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: centerSlotStyle, children: flowPhase ? /* @__PURE__ */ jsxRuntime.jsx(StepProgress, { phase: flowPhase }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
2270
2335
|
title && /* @__PURE__ */ jsxRuntime.jsx("span", { style: titleStyle(tokens.text), children: title }),
|
|
2271
2336
|
badge && /* @__PURE__ */ jsxRuntime.jsx("span", { style: badgeStyle(tokens.textMuted), children: badge })
|
|
2272
|
-
] }),
|
|
2337
|
+
] }) }),
|
|
2273
2338
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: rightSlotStyle, children: right })
|
|
2274
2339
|
] });
|
|
2275
2340
|
}
|
|
@@ -2311,7 +2376,7 @@ var badgeStyle = (color) => ({
|
|
|
2311
2376
|
});
|
|
2312
2377
|
function PoweredByFooter() {
|
|
2313
2378
|
const { tokens } = useSwypeConfig();
|
|
2314
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
2379
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle4(tokens.textMuted), children: [
|
|
2315
2380
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: rowStyle, children: [
|
|
2316
2381
|
/* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2317
2382
|
"path",
|
|
@@ -2325,7 +2390,7 @@ function PoweredByFooter() {
|
|
|
2325
2390
|
/* @__PURE__ */ jsxRuntime.jsx("span", { style: pillStyle(tokens.textMuted, tokens.border), children: "Beta Version" })
|
|
2326
2391
|
] });
|
|
2327
2392
|
}
|
|
2328
|
-
var
|
|
2393
|
+
var containerStyle4 = (color) => ({
|
|
2329
2394
|
display: "flex",
|
|
2330
2395
|
flexDirection: "column",
|
|
2331
2396
|
alignItems: "center",
|
|
@@ -2378,7 +2443,7 @@ var buttonStyle = (tokens, disabled) => ({
|
|
|
2378
2443
|
opacity: disabled ? 0.5 : 1,
|
|
2379
2444
|
transition: "filter 0.15s ease, transform 0.15s ease",
|
|
2380
2445
|
fontFamily: "inherit",
|
|
2381
|
-
boxShadow: "0 8px 18px rgba(
|
|
2446
|
+
boxShadow: "0 8px 18px rgba(178, 255, 147, 0.35)",
|
|
2382
2447
|
display: "flex",
|
|
2383
2448
|
alignItems: "center",
|
|
2384
2449
|
justifyContent: "center",
|
|
@@ -2424,12 +2489,12 @@ var defaultIcon = /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "
|
|
|
2424
2489
|
) });
|
|
2425
2490
|
function InfoBanner({ children, icon }) {
|
|
2426
2491
|
const { tokens } = useSwypeConfig();
|
|
2427
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
2492
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle5(tokens.accent), children: [
|
|
2428
2493
|
/* @__PURE__ */ jsxRuntime.jsx("span", { style: iconStyle, children: icon ?? defaultIcon }),
|
|
2429
2494
|
/* @__PURE__ */ jsxRuntime.jsx("span", { style: textStyle, children })
|
|
2430
2495
|
] });
|
|
2431
2496
|
}
|
|
2432
|
-
var
|
|
2497
|
+
var containerStyle5 = (accent) => ({
|
|
2433
2498
|
display: "flex",
|
|
2434
2499
|
alignItems: "flex-start",
|
|
2435
2500
|
gap: 10,
|
|
@@ -2447,7 +2512,7 @@ var iconStyle = {
|
|
|
2447
2512
|
};
|
|
2448
2513
|
var textStyle = { flex: 1 };
|
|
2449
2514
|
function WarningBanner({ title, children }) {
|
|
2450
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
2515
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle6, children: [
|
|
2451
2516
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerStyle2, children: [
|
|
2452
2517
|
/* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", style: iconStyle2, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z", fill: "#F57C00" }) }),
|
|
2453
2518
|
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: title })
|
|
@@ -2455,7 +2520,7 @@ function WarningBanner({ title, children }) {
|
|
|
2455
2520
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: bodyStyle2, children })
|
|
2456
2521
|
] });
|
|
2457
2522
|
}
|
|
2458
|
-
var
|
|
2523
|
+
var containerStyle6 = {
|
|
2459
2524
|
padding: "14px 16px",
|
|
2460
2525
|
background: "#FFF8E1",
|
|
2461
2526
|
border: "1px solid #FFE082",
|
|
@@ -2534,7 +2599,7 @@ function OtpInput({ value, onChange, length = 6, disabled }) {
|
|
|
2534
2599
|
onChange(pasted);
|
|
2535
2600
|
focusInput(Math.min(pasted.length, length - 1));
|
|
2536
2601
|
}, [onChange, length, focusInput]);
|
|
2537
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { style:
|
|
2602
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { style: containerStyle7, children: digits.map((digit, i) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2538
2603
|
"input",
|
|
2539
2604
|
{
|
|
2540
2605
|
ref: (el) => {
|
|
@@ -2555,7 +2620,7 @@ function OtpInput({ value, onChange, length = 6, disabled }) {
|
|
|
2555
2620
|
i
|
|
2556
2621
|
)) });
|
|
2557
2622
|
}
|
|
2558
|
-
var
|
|
2623
|
+
var containerStyle7 = {
|
|
2559
2624
|
display: "flex",
|
|
2560
2625
|
gap: 8,
|
|
2561
2626
|
justifyContent: "center",
|
|
@@ -2946,7 +3011,7 @@ function StepList({ steps }) {
|
|
|
2946
3011
|
}
|
|
2947
3012
|
),
|
|
2948
3013
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: labelContainerStyle, children: [
|
|
2949
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { style:
|
|
3014
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: labelStyle2(isComplete || isActive ? tokens.text : tokens.textMuted), children: step.label }),
|
|
2950
3015
|
step.detail && /* @__PURE__ */ jsxRuntime.jsx("span", { style: detailStyle(tokens.textMuted), children: step.detail })
|
|
2951
3016
|
] })
|
|
2952
3017
|
] }, i);
|
|
@@ -2982,7 +3047,7 @@ var labelContainerStyle = {
|
|
|
2982
3047
|
display: "flex",
|
|
2983
3048
|
flexDirection: "column"
|
|
2984
3049
|
};
|
|
2985
|
-
var
|
|
3050
|
+
var labelStyle2 = (color) => ({
|
|
2986
3051
|
fontSize: "0.9rem",
|
|
2987
3052
|
fontWeight: 500,
|
|
2988
3053
|
color
|
|
@@ -3006,7 +3071,7 @@ function SettingsMenu({ onLogout }) {
|
|
|
3006
3071
|
document.addEventListener("mousedown", handleClickOutside);
|
|
3007
3072
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
3008
3073
|
}, [open]);
|
|
3009
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: menuRef, style:
|
|
3074
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: menuRef, style: containerStyle8, children: [
|
|
3010
3075
|
/* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", onClick: toggle, style: triggerStyle(tokens.text), "aria-label": "Settings", children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: [
|
|
3011
3076
|
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "5", r: "2", fill: "currentColor" }),
|
|
3012
3077
|
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "2", fill: "currentColor" }),
|
|
@@ -3033,7 +3098,7 @@ function SettingsMenu({ onLogout }) {
|
|
|
3033
3098
|
) })
|
|
3034
3099
|
] });
|
|
3035
3100
|
}
|
|
3036
|
-
var
|
|
3101
|
+
var containerStyle8 = {
|
|
3037
3102
|
position: "relative"
|
|
3038
3103
|
};
|
|
3039
3104
|
var triggerStyle = (color) => ({
|
|
@@ -3118,7 +3183,7 @@ function LoginScreen({
|
|
|
3118
3183
|
),
|
|
3119
3184
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle2, children: [
|
|
3120
3185
|
/* @__PURE__ */ jsxRuntime.jsx("img", { src: SWYPE_LOGO, alt: "Swype", style: logoStyle }),
|
|
3121
|
-
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle(tokens.text), children: "Your Money
|
|
3186
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle(tokens.text), children: "Your Money. Any App.\nOne Tap." }),
|
|
3122
3187
|
error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorStyle(tokens), children: error }),
|
|
3123
3188
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3124
3189
|
"input",
|
|
@@ -3160,8 +3225,8 @@ var contentStyle2 = {
|
|
|
3160
3225
|
justifyContent: "center"
|
|
3161
3226
|
};
|
|
3162
3227
|
var logoStyle = {
|
|
3163
|
-
width:
|
|
3164
|
-
height:
|
|
3228
|
+
width: 50,
|
|
3229
|
+
height: 50
|
|
3165
3230
|
};
|
|
3166
3231
|
var headingStyle = (color) => ({
|
|
3167
3232
|
fontSize: "1.45rem",
|
|
@@ -3799,15 +3864,12 @@ var dividerTextStyle = (color) => ({
|
|
|
3799
3864
|
});
|
|
3800
3865
|
var DEFAULT_MAX = 1e7;
|
|
3801
3866
|
var ABSOLUTE_MIN = 0.01;
|
|
3867
|
+
var PRESETS = [100, 250, 1e3];
|
|
3802
3868
|
function SetupScreen({
|
|
3803
3869
|
availableBalance,
|
|
3804
|
-
tokenCount,
|
|
3805
|
-
sourceName,
|
|
3806
3870
|
onSetupOneTap,
|
|
3807
3871
|
onBack,
|
|
3808
|
-
onLogout,
|
|
3809
3872
|
onAdvanced,
|
|
3810
|
-
selectedSourceLabel,
|
|
3811
3873
|
loading,
|
|
3812
3874
|
error
|
|
3813
3875
|
}) {
|
|
@@ -3830,6 +3892,14 @@ function SetupScreen({
|
|
|
3830
3892
|
}
|
|
3831
3893
|
setEditing(false);
|
|
3832
3894
|
}, [inputValue, effectiveMax, effectiveMin]);
|
|
3895
|
+
const selectPreset = (value) => {
|
|
3896
|
+
setLimit(Math.min(value, effectiveMax));
|
|
3897
|
+
};
|
|
3898
|
+
const selectMax = () => {
|
|
3899
|
+
setLimit(Math.min(availableBalance, effectiveMax));
|
|
3900
|
+
};
|
|
3901
|
+
const isPresetActive = (value) => Math.abs(limit - value) < 5e-3;
|
|
3902
|
+
const isMaxActive = Math.abs(limit - Math.min(availableBalance, effectiveMax)) < 5e-3 && !PRESETS.some((p) => isPresetActive(p));
|
|
3833
3903
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3834
3904
|
ScreenLayout,
|
|
3835
3905
|
{
|
|
@@ -3846,45 +3916,11 @@ function SetupScreen({
|
|
|
3846
3916
|
/* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
|
|
3847
3917
|
] }),
|
|
3848
3918
|
children: [
|
|
3849
|
-
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, {
|
|
3919
|
+
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack }),
|
|
3850
3920
|
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle5(tokens.text), children: "Set Spending Limit" }),
|
|
3851
3921
|
error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle3(tokens), children: error }),
|
|
3852
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
3853
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
3854
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: coinIconStyle(tokens.accent), children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [
|
|
3855
|
-
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor" }),
|
|
3856
|
-
/* @__PURE__ */ jsxRuntime.jsx("text", { x: "12", y: "16", textAnchor: "middle", fontSize: "12", fill: "#fff", fontWeight: "700", children: "$" })
|
|
3857
|
-
] }) }),
|
|
3858
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
3859
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: balanceLabelStyle(tokens.textMuted), children: "Available" }),
|
|
3860
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: balanceValueStyle(tokens.text), children: [
|
|
3861
|
-
"$",
|
|
3862
|
-
availableBalance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
|
3863
|
-
] })
|
|
3864
|
-
] })
|
|
3865
|
-
] }),
|
|
3866
|
-
tokenCount > 0 && /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3867
|
-
"button",
|
|
3868
|
-
{
|
|
3869
|
-
type: "button",
|
|
3870
|
-
onClick: onAdvanced,
|
|
3871
|
-
style: tokenBadgeButtonStyle(tokens, !!onAdvanced),
|
|
3872
|
-
children: [
|
|
3873
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { style: tokenDotStyle(tokens.accent) }),
|
|
3874
|
-
tokenCount,
|
|
3875
|
-
" ",
|
|
3876
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { style: chevronStyle, children: ">" })
|
|
3877
|
-
]
|
|
3878
|
-
}
|
|
3879
|
-
)
|
|
3880
|
-
] }),
|
|
3881
|
-
selectedSourceLabel && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: selectedSourceStyle(tokens.textSecondary), children: [
|
|
3882
|
-
"Source: ",
|
|
3883
|
-
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: selectedSourceLabel })
|
|
3884
|
-
] }),
|
|
3885
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: limitSectionStyle, children: [
|
|
3886
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: limitLabelStyle(tokens.textMuted), children: "Your One-Tap limit" }),
|
|
3887
|
-
editing ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: limitValueStyle(tokens.text), children: [
|
|
3922
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: amountRowStyle, children: [
|
|
3923
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: { flex: 1 }, children: editing ? /* @__PURE__ */ jsxRuntime.jsxs("div", { style: limitValueStyle(tokens.text), children: [
|
|
3888
3924
|
"$",
|
|
3889
3925
|
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3890
3926
|
"input",
|
|
@@ -3909,12 +3945,53 @@ function SetupScreen({
|
|
|
3909
3945
|
onClick: startEditing,
|
|
3910
3946
|
children: [
|
|
3911
3947
|
"$",
|
|
3912
|
-
limit.
|
|
3913
|
-
|
|
3914
|
-
|
|
3915
|
-
|
|
3916
|
-
|
|
3948
|
+
limit.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
|
3949
|
+
]
|
|
3950
|
+
}
|
|
3951
|
+
) }),
|
|
3952
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
3953
|
+
"button",
|
|
3954
|
+
{
|
|
3955
|
+
type: "button",
|
|
3956
|
+
onClick: onAdvanced,
|
|
3957
|
+
style: tokenIconButtonStyle(!!onAdvanced),
|
|
3958
|
+
children: [
|
|
3959
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: tokenIconWrapStyle, children: [
|
|
3960
|
+
/* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", children: [
|
|
3961
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "18", cy: "18", r: "18", fill: "#2DB84B" }),
|
|
3962
|
+
/* @__PURE__ */ jsxRuntime.jsx("text", { x: "18", y: "23", textAnchor: "middle", fontSize: "18", fill: "#fff", fontWeight: "700", children: "$" })
|
|
3963
|
+
] }),
|
|
3964
|
+
/* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: checkBadgeStyle, children: [
|
|
3965
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "8", fill: "#2775CA" }),
|
|
3966
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 8l2 2 4-4", stroke: "#fff", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
3967
|
+
] })
|
|
3968
|
+
] }),
|
|
3969
|
+
/* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", style: { opacity: 0.5 }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6", stroke: tokens.textMuted, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
3970
|
+
]
|
|
3971
|
+
}
|
|
3972
|
+
)
|
|
3973
|
+
] }),
|
|
3974
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: presetsRowStyle, children: [
|
|
3975
|
+
PRESETS.map((value) => /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3976
|
+
"button",
|
|
3977
|
+
{
|
|
3978
|
+
type: "button",
|
|
3979
|
+
onClick: () => selectPreset(value),
|
|
3980
|
+
style: presetButtonStyle(tokens, isPresetActive(value)),
|
|
3981
|
+
children: [
|
|
3982
|
+
"$",
|
|
3983
|
+
value.toLocaleString()
|
|
3917
3984
|
]
|
|
3985
|
+
},
|
|
3986
|
+
value
|
|
3987
|
+
)),
|
|
3988
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3989
|
+
"button",
|
|
3990
|
+
{
|
|
3991
|
+
type: "button",
|
|
3992
|
+
onClick: selectMax,
|
|
3993
|
+
style: presetButtonStyle(tokens, isMaxActive),
|
|
3994
|
+
children: "Max"
|
|
3918
3995
|
}
|
|
3919
3996
|
)
|
|
3920
3997
|
] })
|
|
@@ -3923,11 +4000,11 @@ function SetupScreen({
|
|
|
3923
4000
|
);
|
|
3924
4001
|
}
|
|
3925
4002
|
var headingStyle5 = (color) => ({
|
|
3926
|
-
fontSize: "1.
|
|
4003
|
+
fontSize: "1.1rem",
|
|
3927
4004
|
fontWeight: 700,
|
|
3928
4005
|
letterSpacing: "-0.02em",
|
|
3929
4006
|
color,
|
|
3930
|
-
margin: "
|
|
4007
|
+
margin: "8px 0 24px",
|
|
3931
4008
|
textAlign: "center"
|
|
3932
4009
|
});
|
|
3933
4010
|
var errorBannerStyle3 = (tokens) => ({
|
|
@@ -3940,148 +4017,113 @@ var errorBannerStyle3 = (tokens) => ({
|
|
|
3940
4017
|
marginBottom: 14,
|
|
3941
4018
|
lineHeight: 1.5
|
|
3942
4019
|
});
|
|
3943
|
-
var
|
|
4020
|
+
var amountRowStyle = {
|
|
3944
4021
|
display: "flex",
|
|
3945
4022
|
alignItems: "center",
|
|
3946
4023
|
justifyContent: "space-between",
|
|
3947
|
-
marginBottom: 24
|
|
3948
|
-
|
|
3949
|
-
var balanceLeftStyle = {
|
|
3950
|
-
display: "flex",
|
|
3951
|
-
alignItems: "center",
|
|
3952
|
-
gap: 10
|
|
3953
|
-
};
|
|
3954
|
-
var coinIconStyle = (color) => ({
|
|
3955
|
-
color,
|
|
3956
|
-
display: "flex",
|
|
3957
|
-
alignItems: "center"
|
|
3958
|
-
});
|
|
3959
|
-
var balanceLabelStyle = (color) => ({
|
|
3960
|
-
fontSize: "0.72rem",
|
|
3961
|
-
color,
|
|
3962
|
-
fontWeight: 500
|
|
3963
|
-
});
|
|
3964
|
-
var balanceValueStyle = (color) => ({
|
|
3965
|
-
fontSize: "1.1rem",
|
|
3966
|
-
fontWeight: 700,
|
|
3967
|
-
color
|
|
3968
|
-
});
|
|
3969
|
-
var tokenBadgeButtonStyle = (tokens, clickable) => ({
|
|
3970
|
-
display: "flex",
|
|
3971
|
-
alignItems: "center",
|
|
3972
|
-
gap: 4,
|
|
3973
|
-
fontSize: "0.78rem",
|
|
3974
|
-
color: tokens.textMuted,
|
|
3975
|
-
border: `1px solid ${tokens.border}`,
|
|
3976
|
-
borderRadius: 999,
|
|
3977
|
-
padding: "4px 10px",
|
|
3978
|
-
background: "transparent",
|
|
3979
|
-
fontFamily: "inherit",
|
|
3980
|
-
cursor: clickable ? "pointer" : "default"
|
|
3981
|
-
});
|
|
3982
|
-
var selectedSourceStyle = (color) => ({
|
|
3983
|
-
fontSize: "0.8rem",
|
|
3984
|
-
color,
|
|
3985
|
-
marginBottom: 16,
|
|
3986
|
-
textAlign: "center"
|
|
3987
|
-
});
|
|
3988
|
-
var tokenDotStyle = (color) => ({
|
|
3989
|
-
width: 8,
|
|
3990
|
-
height: 8,
|
|
3991
|
-
borderRadius: "50%",
|
|
3992
|
-
background: color,
|
|
3993
|
-
display: "inline-block"
|
|
3994
|
-
});
|
|
3995
|
-
var chevronStyle = { fontSize: "0.68rem", marginLeft: 2 };
|
|
3996
|
-
var limitSectionStyle = {
|
|
3997
|
-
textAlign: "center",
|
|
3998
|
-
marginBottom: 24
|
|
4024
|
+
marginBottom: 24,
|
|
4025
|
+
gap: 12
|
|
3999
4026
|
};
|
|
4000
|
-
var limitLabelStyle = (color) => ({
|
|
4001
|
-
fontSize: "0.8rem",
|
|
4002
|
-
color,
|
|
4003
|
-
marginBottom: 4
|
|
4004
|
-
});
|
|
4005
4027
|
var limitValueStyle = (color) => ({
|
|
4006
|
-
fontSize: "2.
|
|
4028
|
+
fontSize: "2.4rem",
|
|
4007
4029
|
fontWeight: 700,
|
|
4008
4030
|
color,
|
|
4009
|
-
|
|
4031
|
+
letterSpacing: "-0.02em",
|
|
4032
|
+
display: "flex",
|
|
4033
|
+
alignItems: "baseline"
|
|
4010
4034
|
});
|
|
4011
4035
|
var editableLimitStyle = (color) => ({
|
|
4012
4036
|
...limitValueStyle(color),
|
|
4013
|
-
cursor: "pointer"
|
|
4014
|
-
display: "inline-flex",
|
|
4015
|
-
alignItems: "center",
|
|
4016
|
-
gap: 6
|
|
4017
|
-
});
|
|
4018
|
-
var pencilIconStyle = (color) => ({
|
|
4019
|
-
color,
|
|
4020
|
-
opacity: 0.6,
|
|
4021
|
-
flexShrink: 0
|
|
4037
|
+
cursor: "pointer"
|
|
4022
4038
|
});
|
|
4023
4039
|
var limitInputStyle = (color) => ({
|
|
4024
|
-
fontSize: "2.
|
|
4040
|
+
fontSize: "2.4rem",
|
|
4025
4041
|
fontWeight: 700,
|
|
4026
4042
|
color,
|
|
4027
4043
|
background: "transparent",
|
|
4028
4044
|
border: "none",
|
|
4029
4045
|
borderBottom: "2px solid currentColor",
|
|
4030
4046
|
outline: "none",
|
|
4031
|
-
|
|
4032
|
-
width: "5ch",
|
|
4047
|
+
width: "6ch",
|
|
4033
4048
|
fontFamily: "inherit",
|
|
4034
|
-
padding: 0
|
|
4049
|
+
padding: 0,
|
|
4050
|
+
letterSpacing: "-0.02em"
|
|
4051
|
+
});
|
|
4052
|
+
var tokenIconButtonStyle = (clickable) => ({
|
|
4053
|
+
display: "flex",
|
|
4054
|
+
alignItems: "center",
|
|
4055
|
+
gap: 4,
|
|
4056
|
+
background: "transparent",
|
|
4057
|
+
border: "none",
|
|
4058
|
+
cursor: clickable ? "pointer" : "default",
|
|
4059
|
+
padding: 0,
|
|
4060
|
+
flexShrink: 0
|
|
4061
|
+
});
|
|
4062
|
+
var tokenIconWrapStyle = {
|
|
4063
|
+
position: "relative",
|
|
4064
|
+
width: 36,
|
|
4065
|
+
height: 36
|
|
4066
|
+
};
|
|
4067
|
+
var checkBadgeStyle = {
|
|
4068
|
+
position: "absolute",
|
|
4069
|
+
bottom: -1,
|
|
4070
|
+
right: -3
|
|
4071
|
+
};
|
|
4072
|
+
var presetsRowStyle = {
|
|
4073
|
+
display: "flex",
|
|
4074
|
+
gap: 10,
|
|
4075
|
+
marginBottom: 24
|
|
4076
|
+
};
|
|
4077
|
+
var presetButtonStyle = (tokens, active) => ({
|
|
4078
|
+
flex: 1,
|
|
4079
|
+
padding: "10px 0",
|
|
4080
|
+
borderRadius: 999,
|
|
4081
|
+
fontSize: "0.88rem",
|
|
4082
|
+
fontWeight: 600,
|
|
4083
|
+
fontFamily: "inherit",
|
|
4084
|
+
cursor: "pointer",
|
|
4085
|
+
transition: "background 0.15s ease, border-color 0.15s ease",
|
|
4086
|
+
...active ? {
|
|
4087
|
+
background: `${tokens.accent}30`,
|
|
4088
|
+
border: `1.5px solid ${tokens.accent}`,
|
|
4089
|
+
color: tokens.text
|
|
4090
|
+
} : {
|
|
4091
|
+
background: "transparent",
|
|
4092
|
+
border: `1.5px solid ${tokens.border}`,
|
|
4093
|
+
color: tokens.text
|
|
4094
|
+
}
|
|
4035
4095
|
});
|
|
4036
4096
|
function SetupStatusScreen({
|
|
4037
4097
|
complete,
|
|
4038
|
-
limit,
|
|
4039
|
-
tokensApproved,
|
|
4040
|
-
merchantName,
|
|
4041
4098
|
onContinue,
|
|
4042
4099
|
onLogout,
|
|
4043
4100
|
error
|
|
4044
4101
|
}) {
|
|
4045
4102
|
const { tokens } = useSwypeConfig();
|
|
4046
|
-
|
|
4047
|
-
{
|
|
4048
|
-
|
|
4049
|
-
|
|
4050
|
-
|
|
4051
|
-
|
|
4052
|
-
|
|
4053
|
-
|
|
4054
|
-
|
|
4055
|
-
|
|
4056
|
-
|
|
4057
|
-
},
|
|
4103
|
+
if (complete) {
|
|
4104
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { footer: /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {}), children: [
|
|
4105
|
+
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack: onContinue }),
|
|
4106
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle5, children: [
|
|
4107
|
+
/* @__PURE__ */ jsxRuntime.jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotStyle }),
|
|
4108
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle6(tokens.text), children: "Done!" }),
|
|
4109
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle3(tokens.textSecondary), children: "Return to the app to try one-tap deposits." })
|
|
4110
|
+
] })
|
|
4111
|
+
] });
|
|
4112
|
+
}
|
|
4113
|
+
const steps = [
|
|
4114
|
+
{ label: "Setting up Wallet", status: "active" },
|
|
4058
4115
|
{ label: "Done", status: "pending" }
|
|
4059
4116
|
];
|
|
4060
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4061
|
-
|
|
4062
|
-
{
|
|
4063
|
-
|
|
4064
|
-
|
|
4065
|
-
|
|
4066
|
-
|
|
4067
|
-
children:
|
|
4068
|
-
|
|
4069
|
-
|
|
4070
|
-
complete ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
4071
|
-
/* @__PURE__ */ jsxRuntime.jsx(IconCircle, { variant: "success", size: 64, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z", fill: tokens.success }) }) }),
|
|
4072
|
-
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle6(tokens.text), children: "You're all set!" })
|
|
4073
|
-
] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
4074
|
-
/* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
|
|
4075
|
-
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle6(tokens.text), children: "Setting up One-Tap..." })
|
|
4076
|
-
] }),
|
|
4077
|
-
error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle4(tokens), children: error }),
|
|
4078
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: stepsWrapStyle, children: /* @__PURE__ */ jsxRuntime.jsx(StepList, { steps }) }),
|
|
4079
|
-
!complete && /* @__PURE__ */ jsxRuntime.jsx("p", { style: waitHintStyle(tokens.textMuted), children: "Usually takes a few seconds" }),
|
|
4080
|
-
complete && /* @__PURE__ */ jsxRuntime.jsx("p", { style: readyHintStyle(tokens.textSecondary), children: "You can now deposit instantly from any partner app." })
|
|
4081
|
-
] })
|
|
4082
|
-
]
|
|
4083
|
-
}
|
|
4084
|
-
);
|
|
4117
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { children: [
|
|
4118
|
+
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
|
|
4119
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle5, children: [
|
|
4120
|
+
/* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
|
|
4121
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle6(tokens.text), children: "Setting up One-Tap..." }),
|
|
4122
|
+
error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle4(tokens), children: error }),
|
|
4123
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: stepsWrapStyle, children: /* @__PURE__ */ jsxRuntime.jsx(StepList, { steps }) }),
|
|
4124
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: waitHintStyle(tokens.textMuted), children: "Usually takes a few seconds" })
|
|
4125
|
+
] })
|
|
4126
|
+
] });
|
|
4085
4127
|
}
|
|
4086
4128
|
var contentStyle5 = {
|
|
4087
4129
|
flex: 1,
|
|
@@ -4092,12 +4134,23 @@ var contentStyle5 = {
|
|
|
4092
4134
|
textAlign: "center",
|
|
4093
4135
|
padding: "0 24px 32px"
|
|
4094
4136
|
};
|
|
4137
|
+
var mascotStyle = {
|
|
4138
|
+
width: 56,
|
|
4139
|
+
height: 56
|
|
4140
|
+
};
|
|
4095
4141
|
var headingStyle6 = (color) => ({
|
|
4096
4142
|
fontSize: "1.45rem",
|
|
4097
4143
|
fontWeight: 700,
|
|
4098
4144
|
letterSpacing: "-0.02em",
|
|
4099
4145
|
color,
|
|
4100
|
-
margin: "20px 0
|
|
4146
|
+
margin: "20px 0 8px"
|
|
4147
|
+
});
|
|
4148
|
+
var subtitleStyle3 = (color) => ({
|
|
4149
|
+
fontSize: "0.9rem",
|
|
4150
|
+
color,
|
|
4151
|
+
margin: "0 0 28px",
|
|
4152
|
+
lineHeight: 1.5,
|
|
4153
|
+
maxWidth: 260
|
|
4101
4154
|
});
|
|
4102
4155
|
var errorBannerStyle4 = (tokens) => ({
|
|
4103
4156
|
background: tokens.errorBg,
|
|
@@ -4122,19 +4175,6 @@ var waitHintStyle = (color) => ({
|
|
|
4122
4175
|
color,
|
|
4123
4176
|
margin: 0
|
|
4124
4177
|
});
|
|
4125
|
-
var readyHintStyle = (color) => ({
|
|
4126
|
-
fontSize: "0.88rem",
|
|
4127
|
-
color,
|
|
4128
|
-
margin: "8px 0 0",
|
|
4129
|
-
lineHeight: 1.5,
|
|
4130
|
-
maxWidth: 280
|
|
4131
|
-
});
|
|
4132
|
-
var swipeHintStyle = (color) => ({
|
|
4133
|
-
textAlign: "center",
|
|
4134
|
-
fontSize: "0.8rem",
|
|
4135
|
-
color,
|
|
4136
|
-
margin: "12px 0 0"
|
|
4137
|
-
});
|
|
4138
4178
|
var MIN_DEPOSIT = 0.25;
|
|
4139
4179
|
function DepositScreen({
|
|
4140
4180
|
merchantName,
|
|
@@ -4145,8 +4185,6 @@ function DepositScreen({
|
|
|
4145
4185
|
remainingLimit,
|
|
4146
4186
|
tokenCount,
|
|
4147
4187
|
initialAmount,
|
|
4148
|
-
estimatedFeePct,
|
|
4149
|
-
estimatedFeeUsd,
|
|
4150
4188
|
processing,
|
|
4151
4189
|
error,
|
|
4152
4190
|
onDeposit,
|
|
@@ -4195,19 +4233,19 @@ function DepositScreen({
|
|
|
4195
4233
|
onAddProvider
|
|
4196
4234
|
}
|
|
4197
4235
|
),
|
|
4198
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style:
|
|
4236
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: lowBalanceAmountDisplayStyle, children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: lowBalanceAmountStyle, children: [
|
|
4199
4237
|
"$",
|
|
4200
4238
|
amount.toFixed(2)
|
|
4201
4239
|
] }) }),
|
|
4202
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
4203
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
4204
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style:
|
|
4240
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: lowBalanceRowStyle, children: [
|
|
4241
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: lowBalanceLeftStyle, children: [
|
|
4242
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: lowBalanceCoinStyle(tokens.warning), children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: [
|
|
4205
4243
|
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", fill: "currentColor" }),
|
|
4206
4244
|
/* @__PURE__ */ jsxRuntime.jsx("text", { x: "12", y: "16", textAnchor: "middle", fontSize: "12", fill: "#fff", fontWeight: "700", children: "$" })
|
|
4207
4245
|
] }) }),
|
|
4208
4246
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
|
|
4209
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style:
|
|
4210
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: {
|
|
4247
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: lowBalanceLabelStyle(tokens.textMuted), children: selectedSourceLabel ?? "Available" }),
|
|
4248
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: { fontSize: "1rem", fontWeight: 700, color: tokens.warning }, children: [
|
|
4211
4249
|
"$",
|
|
4212
4250
|
availableBalance.toFixed(2)
|
|
4213
4251
|
] })
|
|
@@ -4226,6 +4264,7 @@ function DepositScreen({
|
|
|
4226
4264
|
}
|
|
4227
4265
|
);
|
|
4228
4266
|
}
|
|
4267
|
+
const providerLogo = KNOWN_LOGOS[sourceName.toLowerCase()];
|
|
4229
4268
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
4230
4269
|
ScreenLayout,
|
|
4231
4270
|
{
|
|
@@ -4239,138 +4278,150 @@ function DepositScreen({
|
|
|
4239
4278
|
remainingLimit.toFixed(2),
|
|
4240
4279
|
". Increase your limit to continue."
|
|
4241
4280
|
] })
|
|
4242
|
-
] }) : /* @__PURE__ */ jsxRuntime.jsx(
|
|
4243
|
-
"Deposit $",
|
|
4244
|
-
amount.toFixed(2)
|
|
4245
|
-
] }) }),
|
|
4281
|
+
] }) : /* @__PURE__ */ jsxRuntime.jsx(PrimaryButton, { onClick: () => onDeposit(amount), disabled: !canDeposit, loading: processing, children: "Confirm" }),
|
|
4246
4282
|
/* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
|
|
4247
4283
|
] }),
|
|
4248
4284
|
children: [
|
|
4249
|
-
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, {
|
|
4250
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
4251
|
-
|
|
4252
|
-
{
|
|
4253
|
-
|
|
4254
|
-
|
|
4255
|
-
|
|
4256
|
-
|
|
4257
|
-
|
|
4258
|
-
|
|
4259
|
-
|
|
4260
|
-
|
|
4261
|
-
|
|
4262
|
-
|
|
4263
|
-
|
|
4264
|
-
|
|
4265
|
-
|
|
4266
|
-
|
|
4267
|
-
|
|
4268
|
-
|
|
4269
|
-
|
|
4270
|
-
|
|
4271
|
-
|
|
4272
|
-
|
|
4273
|
-
|
|
4274
|
-
|
|
4275
|
-
|
|
4276
|
-
|
|
4277
|
-
|
|
4278
|
-
|
|
4279
|
-
] })
|
|
4280
|
-
] })
|
|
4285
|
+
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack }),
|
|
4286
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: mascotWrapStyle, children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: SWYPE_MASCOT, alt: "Swype", style: mascotStyle2 }) }),
|
|
4287
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: depositCardStyle(tokens), children: [
|
|
4288
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: depositLabelStyle(tokens.textMuted), children: "Depositing" }),
|
|
4289
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: amountRowStyle2, children: [
|
|
4290
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: amountValueStyle(tokens.text), children: [
|
|
4291
|
+
"$",
|
|
4292
|
+
amount.toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 2 })
|
|
4293
|
+
] }),
|
|
4294
|
+
/* @__PURE__ */ jsxRuntime.jsxs(
|
|
4295
|
+
"button",
|
|
4296
|
+
{
|
|
4297
|
+
type: "button",
|
|
4298
|
+
onClick: onSelectToken,
|
|
4299
|
+
style: tokenIconButtonStyle2(!!onSelectToken),
|
|
4300
|
+
children: [
|
|
4301
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: tokenIconWrapStyle2, children: [
|
|
4302
|
+
/* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "36", height: "36", viewBox: "0 0 36 36", fill: "none", children: [
|
|
4303
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "18", cy: "18", r: "18", fill: "#2DB84B" }),
|
|
4304
|
+
/* @__PURE__ */ jsxRuntime.jsx("text", { x: "18", y: "23", textAnchor: "middle", fontSize: "18", fill: "#fff", fontWeight: "700", children: "$" })
|
|
4305
|
+
] }),
|
|
4306
|
+
/* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", style: checkBadgeStyle2, children: [
|
|
4307
|
+
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "8", fill: "#2775CA" }),
|
|
4308
|
+
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 8l2 2 4-4", stroke: "#fff", strokeWidth: "1.6", strokeLinecap: "round", strokeLinejoin: "round" })
|
|
4309
|
+
] })
|
|
4310
|
+
] }),
|
|
4311
|
+
/* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", style: { opacity: 0.5 }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 9l6 6 6-6", stroke: tokens.textMuted, strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
4312
|
+
]
|
|
4313
|
+
}
|
|
4314
|
+
)
|
|
4281
4315
|
] }),
|
|
4282
|
-
|
|
4283
|
-
"
|
|
4284
|
-
{
|
|
4285
|
-
|
|
4286
|
-
|
|
4287
|
-
|
|
4288
|
-
|
|
4289
|
-
|
|
4290
|
-
tokenCount,
|
|
4291
|
-
" ",
|
|
4292
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { style: chevronInlineStyle, children: ">" })
|
|
4293
|
-
]
|
|
4294
|
-
}
|
|
4295
|
-
)
|
|
4316
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: walletBalanceRowStyle, children: [
|
|
4317
|
+
providerLogo ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: providerLogo, alt: sourceName, style: providerLogoStyle }) : /* @__PURE__ */ jsxRuntime.jsx("div", { style: providerFallbackStyle(tokens.textMuted), children: sourceName.charAt(0) }),
|
|
4318
|
+
/* @__PURE__ */ jsxRuntime.jsxs("span", { style: walletBalanceStyle(tokens.text), children: [
|
|
4319
|
+
"$",
|
|
4320
|
+
availableBalance.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
|
4321
|
+
] }),
|
|
4322
|
+
/* @__PURE__ */ jsxRuntime.jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", style: { opacity: 0.4 }, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7 10l5-5 5 5M7 14l5 5 5-5", stroke: tokens.textMuted, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
|
|
4323
|
+
] })
|
|
4296
4324
|
] }),
|
|
4297
|
-
/* @__PURE__ */ jsxRuntime.
|
|
4298
|
-
"
|
|
4325
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: spendingLimitStyle(tokens.textMuted), children: [
|
|
4326
|
+
"Spending Limit",
|
|
4327
|
+
" ",
|
|
4299
4328
|
/* @__PURE__ */ jsxRuntime.jsxs("strong", { style: { color: tokens.text }, children: [
|
|
4300
4329
|
"$",
|
|
4301
|
-
remainingLimit.
|
|
4330
|
+
remainingLimit.toLocaleString("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 0 })
|
|
4302
4331
|
] })
|
|
4303
|
-
] })
|
|
4332
|
+
] }),
|
|
4304
4333
|
error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle5(tokens), children: error })
|
|
4305
4334
|
]
|
|
4306
4335
|
}
|
|
4307
4336
|
);
|
|
4308
4337
|
}
|
|
4309
|
-
var
|
|
4310
|
-
textAlign: "center",
|
|
4311
|
-
padding: "20px 0 8px"
|
|
4312
|
-
};
|
|
4313
|
-
var amountStyle = (opts) => ({
|
|
4314
|
-
fontSize: "2.5rem",
|
|
4315
|
-
fontWeight: 700,
|
|
4316
|
-
color: opts.dimmed ? "#ccc" : opts.text ?? "#12222b",
|
|
4317
|
-
letterSpacing: "-0.02em"
|
|
4318
|
-
});
|
|
4319
|
-
var balanceRowStyle2 = {
|
|
4338
|
+
var mascotWrapStyle = {
|
|
4320
4339
|
display: "flex",
|
|
4321
|
-
|
|
4322
|
-
justifyContent: "space-between",
|
|
4340
|
+
justifyContent: "center",
|
|
4323
4341
|
marginBottom: 16
|
|
4324
4342
|
};
|
|
4325
|
-
var
|
|
4326
|
-
|
|
4327
|
-
|
|
4328
|
-
gap: 10
|
|
4343
|
+
var mascotStyle2 = {
|
|
4344
|
+
width: 36,
|
|
4345
|
+
height: 36
|
|
4329
4346
|
};
|
|
4330
|
-
var
|
|
4331
|
-
|
|
4332
|
-
|
|
4333
|
-
|
|
4347
|
+
var depositCardStyle = (tokens) => ({
|
|
4348
|
+
background: tokens.bgInput,
|
|
4349
|
+
border: `1px solid ${tokens.border}`,
|
|
4350
|
+
borderRadius: tokens.radiusLg,
|
|
4351
|
+
padding: "16px 20px",
|
|
4352
|
+
marginBottom: 20
|
|
4334
4353
|
});
|
|
4335
|
-
var
|
|
4336
|
-
fontSize: "0.
|
|
4354
|
+
var depositLabelStyle = (color) => ({
|
|
4355
|
+
fontSize: "0.75rem",
|
|
4356
|
+
fontWeight: 500,
|
|
4337
4357
|
color,
|
|
4338
|
-
|
|
4358
|
+
marginBottom: 4
|
|
4339
4359
|
});
|
|
4340
|
-
var
|
|
4341
|
-
|
|
4342
|
-
|
|
4360
|
+
var amountRowStyle2 = {
|
|
4361
|
+
display: "flex",
|
|
4362
|
+
alignItems: "center",
|
|
4363
|
+
justifyContent: "space-between",
|
|
4364
|
+
marginBottom: 12
|
|
4343
4365
|
};
|
|
4344
|
-
var
|
|
4366
|
+
var amountValueStyle = (color) => ({
|
|
4367
|
+
fontSize: "2.4rem",
|
|
4368
|
+
fontWeight: 700,
|
|
4369
|
+
letterSpacing: "-0.02em",
|
|
4370
|
+
color
|
|
4371
|
+
});
|
|
4372
|
+
var tokenIconButtonStyle2 = (clickable) => ({
|
|
4345
4373
|
display: "flex",
|
|
4346
4374
|
alignItems: "center",
|
|
4347
4375
|
gap: 4,
|
|
4348
|
-
fontSize: "0.78rem",
|
|
4349
|
-
color: tokens.textMuted,
|
|
4350
|
-
border: `1px solid ${tokens.border}`,
|
|
4351
|
-
borderRadius: 999,
|
|
4352
|
-
padding: "4px 10px",
|
|
4353
4376
|
background: "transparent",
|
|
4354
|
-
|
|
4355
|
-
cursor: clickable ? "pointer" : "default"
|
|
4377
|
+
border: "none",
|
|
4378
|
+
cursor: clickable ? "pointer" : "default",
|
|
4379
|
+
padding: 0,
|
|
4380
|
+
flexShrink: 0
|
|
4356
4381
|
});
|
|
4357
|
-
var
|
|
4358
|
-
|
|
4359
|
-
|
|
4382
|
+
var tokenIconWrapStyle2 = {
|
|
4383
|
+
position: "relative",
|
|
4384
|
+
width: 36,
|
|
4385
|
+
height: 36
|
|
4386
|
+
};
|
|
4387
|
+
var checkBadgeStyle2 = {
|
|
4388
|
+
position: "absolute",
|
|
4389
|
+
bottom: -1,
|
|
4390
|
+
right: -3
|
|
4391
|
+
};
|
|
4392
|
+
var walletBalanceRowStyle = {
|
|
4393
|
+
display: "flex",
|
|
4394
|
+
alignItems: "center",
|
|
4395
|
+
gap: 8
|
|
4396
|
+
};
|
|
4397
|
+
var providerLogoStyle = {
|
|
4398
|
+
width: 18,
|
|
4399
|
+
height: 18,
|
|
4400
|
+
borderRadius: "50%",
|
|
4401
|
+
objectFit: "contain"
|
|
4402
|
+
};
|
|
4403
|
+
var providerFallbackStyle = (color) => ({
|
|
4404
|
+
width: 18,
|
|
4405
|
+
height: 18,
|
|
4360
4406
|
borderRadius: "50%",
|
|
4361
|
-
|
|
4362
|
-
|
|
4407
|
+
display: "flex",
|
|
4408
|
+
alignItems: "center",
|
|
4409
|
+
justifyContent: "center",
|
|
4410
|
+
fontSize: "0.65rem",
|
|
4411
|
+
fontWeight: 700,
|
|
4412
|
+
color,
|
|
4413
|
+
flexShrink: 0
|
|
4414
|
+
});
|
|
4415
|
+
var walletBalanceStyle = (color) => ({
|
|
4416
|
+
fontSize: "0.9rem",
|
|
4417
|
+
fontWeight: 600,
|
|
4418
|
+
color
|
|
4363
4419
|
});
|
|
4364
|
-
var
|
|
4365
|
-
var detailsStyle = {
|
|
4420
|
+
var spendingLimitStyle = (color) => ({
|
|
4366
4421
|
textAlign: "center",
|
|
4367
|
-
|
|
4368
|
-
marginBottom: 8
|
|
4369
|
-
};
|
|
4370
|
-
var detailRowStyle = (color) => ({
|
|
4371
|
-
fontSize: "0.8rem",
|
|
4422
|
+
fontSize: "0.84rem",
|
|
4372
4423
|
color,
|
|
4373
|
-
marginBottom:
|
|
4424
|
+
marginBottom: 8
|
|
4374
4425
|
});
|
|
4375
4426
|
var errorBannerStyle5 = (tokens) => ({
|
|
4376
4427
|
background: tokens.errorBg,
|
|
@@ -4398,6 +4449,37 @@ var switchHintStyle = (color) => ({
|
|
|
4398
4449
|
var outlineBtnWrapStyle = {
|
|
4399
4450
|
marginBottom: 8
|
|
4400
4451
|
};
|
|
4452
|
+
var lowBalanceAmountDisplayStyle = {
|
|
4453
|
+
textAlign: "center",
|
|
4454
|
+
padding: "20px 0 8px"
|
|
4455
|
+
};
|
|
4456
|
+
var lowBalanceAmountStyle = {
|
|
4457
|
+
fontSize: "2.5rem",
|
|
4458
|
+
fontWeight: 700,
|
|
4459
|
+
color: "#ccc",
|
|
4460
|
+
letterSpacing: "-0.02em"
|
|
4461
|
+
};
|
|
4462
|
+
var lowBalanceRowStyle = {
|
|
4463
|
+
display: "flex",
|
|
4464
|
+
alignItems: "center",
|
|
4465
|
+
justifyContent: "space-between",
|
|
4466
|
+
marginBottom: 16
|
|
4467
|
+
};
|
|
4468
|
+
var lowBalanceLeftStyle = {
|
|
4469
|
+
display: "flex",
|
|
4470
|
+
alignItems: "center",
|
|
4471
|
+
gap: 10
|
|
4472
|
+
};
|
|
4473
|
+
var lowBalanceCoinStyle = (color) => ({
|
|
4474
|
+
color,
|
|
4475
|
+
display: "flex",
|
|
4476
|
+
alignItems: "center"
|
|
4477
|
+
});
|
|
4478
|
+
var lowBalanceLabelStyle = (color) => ({
|
|
4479
|
+
fontSize: "0.72rem",
|
|
4480
|
+
color,
|
|
4481
|
+
fontWeight: 500
|
|
4482
|
+
});
|
|
4401
4483
|
function SuccessScreen({
|
|
4402
4484
|
amount,
|
|
4403
4485
|
currency,
|
|
@@ -4467,14 +4549,14 @@ function SuccessScreen({
|
|
|
4467
4549
|
amount.toFixed(2),
|
|
4468
4550
|
" deposited"
|
|
4469
4551
|
] }),
|
|
4470
|
-
merchantName && /* @__PURE__ */ jsxRuntime.jsxs("p", { style:
|
|
4552
|
+
merchantName && /* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle4(tokens.textSecondary), children: [
|
|
4471
4553
|
"to ",
|
|
4472
4554
|
merchantName
|
|
4473
4555
|
] })
|
|
4474
4556
|
] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
4475
4557
|
/* @__PURE__ */ jsxRuntime.jsx(IconCircle, { variant: "error", size: 64, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "32", height: "32", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z", fill: tokens.error }) }) }),
|
|
4476
4558
|
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle7(tokens.text), children: "Transfer failed" }),
|
|
4477
|
-
error && /* @__PURE__ */ jsxRuntime.jsx("p", { style:
|
|
4559
|
+
error && /* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle4(tokens.error), children: error })
|
|
4478
4560
|
] }),
|
|
4479
4561
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: summaryCardStyle(tokens), children: [
|
|
4480
4562
|
sourceName && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: summaryRowStyle, children: [
|
|
@@ -4520,7 +4602,7 @@ var headingStyle7 = (color) => ({
|
|
|
4520
4602
|
color,
|
|
4521
4603
|
margin: "20px 0 4px"
|
|
4522
4604
|
});
|
|
4523
|
-
var
|
|
4605
|
+
var subtitleStyle4 = (color) => ({
|
|
4524
4606
|
fontSize: "0.9rem",
|
|
4525
4607
|
color,
|
|
4526
4608
|
margin: "0 0 20px"
|
|
@@ -4628,8 +4710,8 @@ function SelectSourceScreen({
|
|
|
4628
4710
|
right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout })
|
|
4629
4711
|
}
|
|
4630
4712
|
),
|
|
4631
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { style:
|
|
4632
|
-
/* @__PURE__ */ jsxRuntime.jsx("label", { style:
|
|
4713
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle5(tokens.textMuted), children: "Choose which chain and token to pay from." }),
|
|
4714
|
+
/* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle3(tokens.textSecondary), children: "Chain" }),
|
|
4633
4715
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: optionListStyle, children: choices.map((chain) => {
|
|
4634
4716
|
const isSelected = chain.chainName === selectedChainName;
|
|
4635
4717
|
const isRecommended = chain.chainName === recommended?.chainName;
|
|
@@ -4657,7 +4739,7 @@ function SelectSourceScreen({
|
|
|
4657
4739
|
);
|
|
4658
4740
|
}) }),
|
|
4659
4741
|
tokenChoices.length > 0 && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
4660
|
-
/* @__PURE__ */ jsxRuntime.jsx("label", { style:
|
|
4742
|
+
/* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle3(tokens.textSecondary), children: "Token" }),
|
|
4661
4743
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: optionListStyle, children: tokenChoices.map((token) => {
|
|
4662
4744
|
const isSelected = token.tokenSymbol === selectedTokenSymbol;
|
|
4663
4745
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -4685,13 +4767,13 @@ function SelectSourceScreen({
|
|
|
4685
4767
|
}
|
|
4686
4768
|
);
|
|
4687
4769
|
}
|
|
4688
|
-
var
|
|
4770
|
+
var subtitleStyle5 = (color) => ({
|
|
4689
4771
|
fontSize: "0.85rem",
|
|
4690
4772
|
color,
|
|
4691
4773
|
margin: "0 0 20px",
|
|
4692
4774
|
lineHeight: 1.5
|
|
4693
4775
|
});
|
|
4694
|
-
var
|
|
4776
|
+
var labelStyle3 = (color) => ({
|
|
4695
4777
|
display: "block",
|
|
4696
4778
|
fontSize: "0.75rem",
|
|
4697
4779
|
fontWeight: 600,
|
|
@@ -4801,8 +4883,8 @@ function AdvancedSourceScreen({
|
|
|
4801
4883
|
}
|
|
4802
4884
|
),
|
|
4803
4885
|
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle8(tokens.text), children: "Set up One-Tap deposits" }),
|
|
4804
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { style:
|
|
4805
|
-
/* @__PURE__ */ jsxRuntime.jsx("label", { style:
|
|
4886
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle6(tokens.textSecondary), children: "Select a token source for your One-Tap deposits." }),
|
|
4887
|
+
/* @__PURE__ */ jsxRuntime.jsx("label", { style: labelStyle4(tokens.textSecondary), children: "Select tokens to approve" }),
|
|
4806
4888
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: chainListStyle, children: choices.map((chain) => {
|
|
4807
4889
|
const isExpanded = expandedChain === chain.chainName;
|
|
4808
4890
|
const chainHasSelection = localChain === chain.chainName;
|
|
@@ -4871,13 +4953,13 @@ var headingStyle8 = (color) => ({
|
|
|
4871
4953
|
color,
|
|
4872
4954
|
margin: "8px 0 4px"
|
|
4873
4955
|
});
|
|
4874
|
-
var
|
|
4956
|
+
var subtitleStyle6 = (color) => ({
|
|
4875
4957
|
fontSize: "0.86rem",
|
|
4876
4958
|
color,
|
|
4877
4959
|
margin: "0 0 20px",
|
|
4878
4960
|
lineHeight: 1.5
|
|
4879
4961
|
});
|
|
4880
|
-
var
|
|
4962
|
+
var labelStyle4 = (color) => ({
|
|
4881
4963
|
display: "block",
|
|
4882
4964
|
fontSize: "0.75rem",
|
|
4883
4965
|
fontWeight: 600,
|
|
@@ -4992,19 +5074,17 @@ function buildSteps(phase) {
|
|
|
4992
5074
|
}
|
|
4993
5075
|
function TransferStatusScreen({
|
|
4994
5076
|
phase,
|
|
4995
|
-
error
|
|
4996
|
-
onLogout
|
|
5077
|
+
error
|
|
4997
5078
|
}) {
|
|
4998
5079
|
const { tokens } = useSwypeConfig();
|
|
4999
5080
|
const steps = buildSteps(phase);
|
|
5000
|
-
return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { children: [
|
|
5001
|
-
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, {
|
|
5081
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { footer: /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {}), children: [
|
|
5082
|
+
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, {}),
|
|
5002
5083
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle7, children: [
|
|
5003
|
-
/* @__PURE__ */ jsxRuntime.jsx(Spinner, { size:
|
|
5004
|
-
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle9(tokens.text), children: "
|
|
5084
|
+
/* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 64 }),
|
|
5085
|
+
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle9(tokens.text), children: "Depositing your money..." }),
|
|
5005
5086
|
error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle6(tokens), children: error }),
|
|
5006
|
-
/* @__PURE__ */ jsxRuntime.jsx("div", { style: stepsWrapStyle2, children: /* @__PURE__ */ jsxRuntime.jsx(StepList, { steps }) })
|
|
5007
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { style: waitHintStyle2(tokens.textMuted), children: "Usually takes a few seconds" })
|
|
5087
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: stepsWrapStyle2, children: /* @__PURE__ */ jsxRuntime.jsx(StepList, { steps }) })
|
|
5008
5088
|
] })
|
|
5009
5089
|
] });
|
|
5010
5090
|
}
|
|
@@ -5042,11 +5122,6 @@ var stepsWrapStyle2 = {
|
|
|
5042
5122
|
textAlign: "left",
|
|
5043
5123
|
marginBottom: 16
|
|
5044
5124
|
};
|
|
5045
|
-
var waitHintStyle2 = (color) => ({
|
|
5046
|
-
fontSize: "0.82rem",
|
|
5047
|
-
color,
|
|
5048
|
-
margin: 0
|
|
5049
|
-
});
|
|
5050
5125
|
|
|
5051
5126
|
// src/deeplink.ts
|
|
5052
5127
|
var IFRAME_CLEANUP_DELAY_MS = 3e3;
|
|
@@ -5103,14 +5178,15 @@ function OpenWalletScreen({
|
|
|
5103
5178
|
displayName
|
|
5104
5179
|
] }),
|
|
5105
5180
|
error && onRetryStatus && /* @__PURE__ */ jsxRuntime.jsx(OutlineButton, { onClick: onRetryStatus, children: "Retry status check" }),
|
|
5106
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { style: hintStyle(tokens.textMuted), children: loading ? "Preparing authorization..." : error ? "Retry the status check after returning to the browser, or reopen your wallet if needed." : "If your wallet didn't open automatically, tap the button above" })
|
|
5181
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: hintStyle(tokens.textMuted), children: loading ? "Preparing authorization..." : error ? "Retry the status check after returning to the browser, or reopen your wallet if needed." : "If your wallet didn't open automatically, tap the button above" }),
|
|
5182
|
+
/* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {})
|
|
5107
5183
|
] }),
|
|
5108
5184
|
children: [
|
|
5109
5185
|
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack, right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
|
|
5110
5186
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle8, children: [
|
|
5111
|
-
logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle2 }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size:
|
|
5187
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: logoCircleStyle(tokens.bgInput), children: logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle2 }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 32 }) }),
|
|
5112
5188
|
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle10(tokens.text), children: loading ? "Connecting..." : `Open ${displayName}` }),
|
|
5113
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { style:
|
|
5189
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle7(tokens.textSecondary), children: loading ? "Creating transfer and preparing your wallet link..." : `Continue in ${displayName} to authorize this connection.` }),
|
|
5114
5190
|
!loading && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: waitingBadgeStyle(tokens), children: [
|
|
5115
5191
|
/* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 14 }),
|
|
5116
5192
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Waiting for authorization..." })
|
|
@@ -5134,10 +5210,20 @@ var footerContentStyle = {
|
|
|
5134
5210
|
flexDirection: "column",
|
|
5135
5211
|
gap: 12
|
|
5136
5212
|
};
|
|
5213
|
+
var logoCircleStyle = (bg) => ({
|
|
5214
|
+
width: 80,
|
|
5215
|
+
height: 80,
|
|
5216
|
+
borderRadius: "50%",
|
|
5217
|
+
background: bg,
|
|
5218
|
+
display: "flex",
|
|
5219
|
+
alignItems: "center",
|
|
5220
|
+
justifyContent: "center",
|
|
5221
|
+
flexShrink: 0
|
|
5222
|
+
});
|
|
5137
5223
|
var logoStyle2 = {
|
|
5138
|
-
width:
|
|
5139
|
-
height:
|
|
5140
|
-
borderRadius:
|
|
5224
|
+
width: 48,
|
|
5225
|
+
height: 48,
|
|
5226
|
+
borderRadius: 12,
|
|
5141
5227
|
objectFit: "contain"
|
|
5142
5228
|
};
|
|
5143
5229
|
var headingStyle10 = (color) => ({
|
|
@@ -5147,7 +5233,7 @@ var headingStyle10 = (color) => ({
|
|
|
5147
5233
|
color,
|
|
5148
5234
|
margin: "20px 0 8px"
|
|
5149
5235
|
});
|
|
5150
|
-
var
|
|
5236
|
+
var subtitleStyle7 = (color) => ({
|
|
5151
5237
|
fontSize: "0.9rem",
|
|
5152
5238
|
color,
|
|
5153
5239
|
margin: "0 0 24px",
|
|
@@ -5194,7 +5280,7 @@ function ConfirmSignScreen({
|
|
|
5194
5280
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle9, children: [
|
|
5195
5281
|
logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle3 }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
|
|
5196
5282
|
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle11(tokens.text), children: "Wallet authorized" }),
|
|
5197
|
-
/* @__PURE__ */ jsxRuntime.jsxs("p", { style:
|
|
5283
|
+
/* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle8(tokens.textSecondary), children: [
|
|
5198
5284
|
displayName,
|
|
5199
5285
|
" approved the connection. Tap below to confirm your payment."
|
|
5200
5286
|
] }),
|
|
@@ -5229,7 +5315,7 @@ var headingStyle11 = (color) => ({
|
|
|
5229
5315
|
color,
|
|
5230
5316
|
margin: "20px 0 8px"
|
|
5231
5317
|
});
|
|
5232
|
-
var
|
|
5318
|
+
var subtitleStyle8 = (color) => ({
|
|
5233
5319
|
fontSize: "0.9rem",
|
|
5234
5320
|
color,
|
|
5235
5321
|
margin: "0 0 24px",
|
|
@@ -5327,7 +5413,7 @@ function TokenPickerScreen({
|
|
|
5327
5413
|
] }),
|
|
5328
5414
|
children: [
|
|
5329
5415
|
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { title: "Select Token", onBack }),
|
|
5330
|
-
/* @__PURE__ */ jsxRuntime.jsx("p", { style:
|
|
5416
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle9(themeTokens.textSecondary), children: "Choose a token to deposit with. Tokens that haven't been authorized yet will require a one-time wallet approval." }),
|
|
5331
5417
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: chainListStyle2, children: [...chainGroups.entries()].map(([chainName, chainEntries]) => {
|
|
5332
5418
|
const isExpanded = expandedChain === chainName;
|
|
5333
5419
|
const chainTotal = chainEntries.reduce((sum, e) => sum + e.balance, 0);
|
|
@@ -5346,7 +5432,7 @@ function TokenPickerScreen({
|
|
|
5346
5432
|
chainTotal.toLocaleString("en-US", { minimumFractionDigits: 2, maximumFractionDigits: 2 })
|
|
5347
5433
|
] })
|
|
5348
5434
|
] }),
|
|
5349
|
-
/* @__PURE__ */ jsxRuntime.jsx("span", { style:
|
|
5435
|
+
/* @__PURE__ */ jsxRuntime.jsx("span", { style: chevronStyle(themeTokens.textMuted), children: isExpanded ? "\u25BE" : "\u25B8" })
|
|
5350
5436
|
]
|
|
5351
5437
|
}
|
|
5352
5438
|
),
|
|
@@ -5383,7 +5469,7 @@ function TokenPickerScreen({
|
|
|
5383
5469
|
}
|
|
5384
5470
|
);
|
|
5385
5471
|
}
|
|
5386
|
-
var
|
|
5472
|
+
var subtitleStyle9 = (color) => ({
|
|
5387
5473
|
fontSize: "0.86rem",
|
|
5388
5474
|
color,
|
|
5389
5475
|
margin: "0 0 20px",
|
|
@@ -5426,7 +5512,7 @@ var chainBalanceStyle2 = (color) => ({
|
|
|
5426
5512
|
fontSize: "0.76rem",
|
|
5427
5513
|
color
|
|
5428
5514
|
});
|
|
5429
|
-
var
|
|
5515
|
+
var chevronStyle = (color) => ({
|
|
5430
5516
|
fontSize: "0.9rem",
|
|
5431
5517
|
color
|
|
5432
5518
|
});
|
|
@@ -5494,7 +5580,34 @@ var radioDotStyle3 = (color) => ({
|
|
|
5494
5580
|
borderRadius: "50%",
|
|
5495
5581
|
background: color
|
|
5496
5582
|
});
|
|
5497
|
-
|
|
5583
|
+
var LINK_STEPS = /* @__PURE__ */ new Set([
|
|
5584
|
+
"create-passkey",
|
|
5585
|
+
"verify-passkey",
|
|
5586
|
+
"wallet-picker",
|
|
5587
|
+
"open-wallet",
|
|
5588
|
+
"setup-status",
|
|
5589
|
+
"setup",
|
|
5590
|
+
"confirm-sign"
|
|
5591
|
+
]);
|
|
5592
|
+
var DEPOSIT_STEPS = /* @__PURE__ */ new Set([
|
|
5593
|
+
"deposit",
|
|
5594
|
+
"low-balance",
|
|
5595
|
+
"processing",
|
|
5596
|
+
"success"
|
|
5597
|
+
]);
|
|
5598
|
+
function getFlowPhase(step, previousStep) {
|
|
5599
|
+
if (LINK_STEPS.has(step)) return "link";
|
|
5600
|
+
if (DEPOSIT_STEPS.has(step)) return "deposit";
|
|
5601
|
+
if (step === "token-picker" || step === "select-source") {
|
|
5602
|
+
return previousStep === "setup" ? "link" : "deposit";
|
|
5603
|
+
}
|
|
5604
|
+
return null;
|
|
5605
|
+
}
|
|
5606
|
+
function StepRenderer(props) {
|
|
5607
|
+
const phase = getFlowPhase(props.state.step, props.state.previousStep);
|
|
5608
|
+
return /* @__PURE__ */ jsxRuntime.jsx(FlowPhaseProvider, { phase, children: /* @__PURE__ */ jsxRuntime.jsx(StepRendererContent, { ...props }) });
|
|
5609
|
+
}
|
|
5610
|
+
function StepRendererContent({
|
|
5498
5611
|
state,
|
|
5499
5612
|
ready,
|
|
5500
5613
|
authenticated,
|
|
@@ -5841,7 +5954,7 @@ var PaymentErrorBoundary = class extends react.Component {
|
|
|
5841
5954
|
if (!this.state.hasError) {
|
|
5842
5955
|
return this.props.children;
|
|
5843
5956
|
}
|
|
5844
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
5957
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle9, children: [
|
|
5845
5958
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: iconStyle4, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", children: [
|
|
5846
5959
|
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "#ef4444", strokeWidth: "1.5" }),
|
|
5847
5960
|
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 8v5", stroke: "#ef4444", strokeWidth: "1.5", strokeLinecap: "round" }),
|
|
@@ -5853,7 +5966,7 @@ var PaymentErrorBoundary = class extends react.Component {
|
|
|
5853
5966
|
] });
|
|
5854
5967
|
}
|
|
5855
5968
|
};
|
|
5856
|
-
var
|
|
5969
|
+
var containerStyle9 = {
|
|
5857
5970
|
display: "flex",
|
|
5858
5971
|
flexDirection: "column",
|
|
5859
5972
|
alignItems: "center",
|
|
@@ -7831,6 +7944,7 @@ function SwypePaymentInner({
|
|
|
7831
7944
|
}
|
|
7832
7945
|
|
|
7833
7946
|
exports.AdvancedSourceScreen = AdvancedSourceScreen;
|
|
7947
|
+
exports.FlowPhaseProvider = FlowPhaseProvider;
|
|
7834
7948
|
exports.IconCircle = IconCircle;
|
|
7835
7949
|
exports.InfoBanner = InfoBanner;
|
|
7836
7950
|
exports.OutlineButton = OutlineButton;
|
|
@@ -7838,6 +7952,8 @@ exports.PasskeyIframeBlockedError = PasskeyIframeBlockedError;
|
|
|
7838
7952
|
exports.PasskeyScreen = PasskeyScreen;
|
|
7839
7953
|
exports.PoweredByFooter = PoweredByFooter;
|
|
7840
7954
|
exports.PrimaryButton = PrimaryButton;
|
|
7955
|
+
exports.SWYPE_LOGO = SWYPE_LOGO;
|
|
7956
|
+
exports.SWYPE_MASCOT = SWYPE_MASCOT;
|
|
7841
7957
|
exports.ScreenHeader = ScreenHeader;
|
|
7842
7958
|
exports.ScreenLayout = ScreenLayout;
|
|
7843
7959
|
exports.SelectSourceScreen = SelectSourceScreen;
|