@swype-org/react-sdk 0.1.107 → 0.1.109
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 +187 -110
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +3 -1
- package/dist/index.d.ts +3 -1
- package/dist/index.js +187 -111
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1811,43 +1811,71 @@ function clearMobileFlowState() {
|
|
|
1811
1811
|
} catch {
|
|
1812
1812
|
}
|
|
1813
1813
|
}
|
|
1814
|
-
function
|
|
1815
|
-
|
|
1816
|
-
|
|
1817
|
-
|
|
1818
|
-
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
|
|
1822
|
-
|
|
1823
|
-
|
|
1824
|
-
|
|
1825
|
-
|
|
1814
|
+
function getWalletAddress(wallet) {
|
|
1815
|
+
const address = wallet.name.trim();
|
|
1816
|
+
return address.length > 0 ? address : null;
|
|
1817
|
+
}
|
|
1818
|
+
function getAddressableWallets(account) {
|
|
1819
|
+
return account.wallets.filter((wallet) => getWalletAddress(wallet) != null);
|
|
1820
|
+
}
|
|
1821
|
+
function hasActiveDepositWallet(account) {
|
|
1822
|
+
return getAddressableWallets(account).some((wallet) => wallet.status === "ACTIVE");
|
|
1823
|
+
}
|
|
1824
|
+
function getPreferredDepositWallet(account, transferAmount) {
|
|
1825
|
+
const wallets = getAddressableWallets(account);
|
|
1826
|
+
if (wallets.length === 0) return null;
|
|
1827
|
+
for (const wallet of wallets) {
|
|
1828
|
+
if (wallet.status === "ACTIVE" && wallet.sources.some((source) => source.balance.available.amount >= transferAmount)) {
|
|
1829
|
+
return wallet;
|
|
1826
1830
|
}
|
|
1827
1831
|
}
|
|
1828
|
-
let bestAccount = null;
|
|
1829
1832
|
let bestWallet = null;
|
|
1830
1833
|
let bestBalance = -1;
|
|
1831
1834
|
let bestIsActive = false;
|
|
1832
|
-
for (const
|
|
1833
|
-
|
|
1834
|
-
|
|
1835
|
-
|
|
1836
|
-
|
|
1837
|
-
|
|
1838
|
-
|
|
1839
|
-
bestWallet = wallet;
|
|
1840
|
-
bestIsActive = isActive;
|
|
1841
|
-
}
|
|
1835
|
+
for (const wallet of wallets) {
|
|
1836
|
+
const walletBal = wallet.balance.available.amount;
|
|
1837
|
+
const isActive = wallet.status === "ACTIVE";
|
|
1838
|
+
if (walletBal > bestBalance || walletBal === bestBalance && isActive && !bestIsActive) {
|
|
1839
|
+
bestBalance = walletBal;
|
|
1840
|
+
bestWallet = wallet;
|
|
1841
|
+
bestIsActive = isActive;
|
|
1842
1842
|
}
|
|
1843
1843
|
}
|
|
1844
|
-
|
|
1845
|
-
|
|
1846
|
-
|
|
1847
|
-
|
|
1848
|
-
|
|
1844
|
+
return bestWallet ?? wallets[0];
|
|
1845
|
+
}
|
|
1846
|
+
function getDepositEligibleAccounts(accounts) {
|
|
1847
|
+
return accounts.filter((account) => getAddressableWallets(account).length > 0);
|
|
1848
|
+
}
|
|
1849
|
+
function resolveDepositSelection(accounts, transferAmount, selectedAccountId) {
|
|
1850
|
+
const eligibleAccounts = getDepositEligibleAccounts(accounts);
|
|
1851
|
+
if (eligibleAccounts.length === 0) return null;
|
|
1852
|
+
if (selectedAccountId) {
|
|
1853
|
+
const selectedAccount = eligibleAccounts.find((account) => account.id === selectedAccountId);
|
|
1854
|
+
if (selectedAccount) {
|
|
1855
|
+
const preferredWallet = getPreferredDepositWallet(selectedAccount, transferAmount);
|
|
1856
|
+
return {
|
|
1857
|
+
accountId: selectedAccount.id,
|
|
1858
|
+
walletId: preferredWallet?.id ?? null
|
|
1859
|
+
};
|
|
1860
|
+
}
|
|
1861
|
+
}
|
|
1862
|
+
for (const account of eligibleAccounts) {
|
|
1863
|
+
const fullyEligibleWallet = getAddressableWallets(account).find(
|
|
1864
|
+
(wallet) => wallet.status === "ACTIVE" && wallet.sources.some((source) => source.balance.available.amount >= transferAmount)
|
|
1865
|
+
);
|
|
1866
|
+
if (fullyEligibleWallet) {
|
|
1867
|
+
return {
|
|
1868
|
+
accountId: account.id,
|
|
1869
|
+
walletId: fullyEligibleWallet.id
|
|
1870
|
+
};
|
|
1871
|
+
}
|
|
1849
1872
|
}
|
|
1850
|
-
|
|
1873
|
+
const fallbackAccount = eligibleAccounts[0];
|
|
1874
|
+
const fallbackWallet = getPreferredDepositWallet(fallbackAccount, transferAmount);
|
|
1875
|
+
return {
|
|
1876
|
+
accountId: fallbackAccount.id,
|
|
1877
|
+
walletId: fallbackWallet?.id ?? null
|
|
1878
|
+
};
|
|
1851
1879
|
}
|
|
1852
1880
|
function parseRawBalance(rawBalance, decimals) {
|
|
1853
1881
|
const parsed = Number(rawBalance);
|
|
@@ -2160,56 +2188,65 @@ function paymentReducer(state, action) {
|
|
|
2160
2188
|
return state;
|
|
2161
2189
|
}
|
|
2162
2190
|
}
|
|
2163
|
-
|
|
2164
|
-
|
|
2165
|
-
|
|
2166
|
-
|
|
2167
|
-
{
|
|
2168
|
-
style:
|
|
2169
|
-
|
|
2170
|
-
|
|
2171
|
-
|
|
2172
|
-
|
|
2173
|
-
},
|
|
2174
|
-
children: [
|
|
2175
|
-
/* @__PURE__ */ jsxRuntime.jsx(
|
|
2176
|
-
"div",
|
|
2177
|
-
{
|
|
2178
|
-
style: {
|
|
2179
|
-
width: size,
|
|
2180
|
-
height: size,
|
|
2181
|
-
border: `4px solid ${tokens.bgInput}`,
|
|
2182
|
-
borderTopColor: tokens.accent,
|
|
2183
|
-
borderRightColor: tokens.accent + "66",
|
|
2184
|
-
borderRadius: "50%",
|
|
2185
|
-
boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.1)",
|
|
2186
|
-
animation: "swype-spin 0.9s linear infinite"
|
|
2187
|
-
}
|
|
2188
|
-
}
|
|
2189
|
-
),
|
|
2190
|
-
label && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: tokens.textSecondary, fontSize: "0.875rem", margin: 0 }, children: label }),
|
|
2191
|
-
/* @__PURE__ */ jsxRuntime.jsx("style", { children: `
|
|
2192
|
-
@keyframes swype-spin {
|
|
2191
|
+
var ACCENT = "#28b67a";
|
|
2192
|
+
var BG_RING = "#d2e4ea";
|
|
2193
|
+
function SwypeLoadingScreen() {
|
|
2194
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle, children: [
|
|
2195
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle, children: [
|
|
2196
|
+
/* @__PURE__ */ jsxRuntime.jsx("p", { style: wordmarkStyle, children: "swype" }),
|
|
2197
|
+
/* @__PURE__ */ jsxRuntime.jsx("div", { style: spinnerStyle })
|
|
2198
|
+
] }),
|
|
2199
|
+
/* @__PURE__ */ jsxRuntime.jsx("style", { children: `
|
|
2200
|
+
@keyframes swype-loading-spin {
|
|
2193
2201
|
to { transform: rotate(360deg); }
|
|
2194
2202
|
}
|
|
2195
2203
|
` })
|
|
2196
|
-
|
|
2197
|
-
}
|
|
2198
|
-
);
|
|
2204
|
+
] });
|
|
2199
2205
|
}
|
|
2206
|
+
var containerStyle = {
|
|
2207
|
+
display: "flex",
|
|
2208
|
+
alignItems: "center",
|
|
2209
|
+
justifyContent: "center",
|
|
2210
|
+
minHeight: "100%",
|
|
2211
|
+
flex: 1,
|
|
2212
|
+
background: "transparent"
|
|
2213
|
+
};
|
|
2214
|
+
var contentStyle = {
|
|
2215
|
+
display: "flex",
|
|
2216
|
+
flexDirection: "column",
|
|
2217
|
+
alignItems: "center",
|
|
2218
|
+
gap: 16
|
|
2219
|
+
};
|
|
2220
|
+
var wordmarkStyle = {
|
|
2221
|
+
fontSize: 28,
|
|
2222
|
+
fontWeight: 700,
|
|
2223
|
+
letterSpacing: "-0.04em",
|
|
2224
|
+
color: ACCENT,
|
|
2225
|
+
margin: 0,
|
|
2226
|
+
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
|
|
2227
|
+
};
|
|
2228
|
+
var spinnerStyle = {
|
|
2229
|
+
width: 44,
|
|
2230
|
+
height: 44,
|
|
2231
|
+
border: `4px solid ${BG_RING}`,
|
|
2232
|
+
borderTopColor: ACCENT,
|
|
2233
|
+
borderRightColor: `${ACCENT}66`,
|
|
2234
|
+
borderRadius: "50%",
|
|
2235
|
+
animation: "swype-loading-spin 0.9s linear infinite"
|
|
2236
|
+
};
|
|
2200
2237
|
var FOOTER_CSS = `
|
|
2201
2238
|
.swype-screen-footer {
|
|
2202
2239
|
padding-bottom: max(24px, env(safe-area-inset-bottom, 24px));
|
|
2203
2240
|
}`;
|
|
2204
2241
|
function ScreenLayout({ children, footer }) {
|
|
2205
2242
|
const { tokens } = useSwypeConfig();
|
|
2206
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
2243
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle2(tokens.bgCard), children: [
|
|
2207
2244
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: bodyStyle, children }),
|
|
2208
2245
|
footer && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "swype-screen-footer", style: footerStyle, children: footer }),
|
|
2209
2246
|
/* @__PURE__ */ jsxRuntime.jsx("style", { children: FOOTER_CSS })
|
|
2210
2247
|
] });
|
|
2211
2248
|
}
|
|
2212
|
-
var
|
|
2249
|
+
var containerStyle2 = (bg) => ({
|
|
2213
2250
|
display: "flex",
|
|
2214
2251
|
flexDirection: "column",
|
|
2215
2252
|
minHeight: "100%",
|
|
@@ -2279,7 +2316,7 @@ var badgeStyle = (color) => ({
|
|
|
2279
2316
|
});
|
|
2280
2317
|
function PoweredByFooter() {
|
|
2281
2318
|
const { tokens } = useSwypeConfig();
|
|
2282
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
2319
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle3(tokens.textMuted), children: [
|
|
2283
2320
|
/* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
2284
2321
|
"path",
|
|
2285
2322
|
{
|
|
@@ -2292,7 +2329,7 @@ function PoweredByFooter() {
|
|
|
2292
2329
|
/* @__PURE__ */ jsxRuntime.jsx("span", { children: "Non-custodial" })
|
|
2293
2330
|
] });
|
|
2294
2331
|
}
|
|
2295
|
-
var
|
|
2332
|
+
var containerStyle3 = (color) => ({
|
|
2296
2333
|
display: "flex",
|
|
2297
2334
|
alignItems: "center",
|
|
2298
2335
|
justifyContent: "center",
|
|
@@ -2378,12 +2415,12 @@ var defaultIcon = /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "18", height: "
|
|
|
2378
2415
|
) });
|
|
2379
2416
|
function InfoBanner({ children, icon }) {
|
|
2380
2417
|
const { tokens } = useSwypeConfig();
|
|
2381
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
2418
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle4(tokens.accent), children: [
|
|
2382
2419
|
/* @__PURE__ */ jsxRuntime.jsx("span", { style: iconStyle, children: icon ?? defaultIcon }),
|
|
2383
2420
|
/* @__PURE__ */ jsxRuntime.jsx("span", { style: textStyle, children })
|
|
2384
2421
|
] });
|
|
2385
2422
|
}
|
|
2386
|
-
var
|
|
2423
|
+
var containerStyle4 = (accent) => ({
|
|
2387
2424
|
display: "flex",
|
|
2388
2425
|
alignItems: "flex-start",
|
|
2389
2426
|
gap: 10,
|
|
@@ -2401,7 +2438,7 @@ var iconStyle = {
|
|
|
2401
2438
|
};
|
|
2402
2439
|
var textStyle = { flex: 1 };
|
|
2403
2440
|
function WarningBanner({ title, children }) {
|
|
2404
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
2441
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle5, children: [
|
|
2405
2442
|
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerStyle2, children: [
|
|
2406
2443
|
/* @__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" }) }),
|
|
2407
2444
|
/* @__PURE__ */ jsxRuntime.jsx("strong", { children: title })
|
|
@@ -2409,7 +2446,7 @@ function WarningBanner({ title, children }) {
|
|
|
2409
2446
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: bodyStyle2, children })
|
|
2410
2447
|
] });
|
|
2411
2448
|
}
|
|
2412
|
-
var
|
|
2449
|
+
var containerStyle5 = {
|
|
2413
2450
|
padding: "14px 16px",
|
|
2414
2451
|
background: "#FFF8E1",
|
|
2415
2452
|
border: "1px solid #FFE082",
|
|
@@ -2481,7 +2518,7 @@ function OtpInput({ value, onChange, length = 6, disabled }) {
|
|
|
2481
2518
|
onChange(pasted);
|
|
2482
2519
|
focusInput(Math.min(pasted.length, length - 1));
|
|
2483
2520
|
}, [onChange, length, focusInput]);
|
|
2484
|
-
return /* @__PURE__ */ jsxRuntime.jsx("div", { style:
|
|
2521
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", { style: containerStyle6, children: digits.map((digit, i) => /* @__PURE__ */ jsxRuntime.jsx(
|
|
2485
2522
|
"input",
|
|
2486
2523
|
{
|
|
2487
2524
|
ref: (el) => {
|
|
@@ -2502,7 +2539,7 @@ function OtpInput({ value, onChange, length = 6, disabled }) {
|
|
|
2502
2539
|
i
|
|
2503
2540
|
)) });
|
|
2504
2541
|
}
|
|
2505
|
-
var
|
|
2542
|
+
var containerStyle6 = {
|
|
2506
2543
|
display: "flex",
|
|
2507
2544
|
gap: 8,
|
|
2508
2545
|
justifyContent: "center",
|
|
@@ -2574,9 +2611,6 @@ var KNOWN_LOGOS = {
|
|
|
2574
2611
|
base: BASE_LOGO,
|
|
2575
2612
|
"trust wallet": TRUST_WALLET_LOGO
|
|
2576
2613
|
};
|
|
2577
|
-
function hasActiveWallet2(account) {
|
|
2578
|
-
return account.wallets.some((w) => w.status === "ACTIVE");
|
|
2579
|
-
}
|
|
2580
2614
|
function SourceCard({
|
|
2581
2615
|
name,
|
|
2582
2616
|
address,
|
|
@@ -2665,10 +2699,11 @@ function SourceCard({
|
|
|
2665
2699
|
] }),
|
|
2666
2700
|
open && hasDropdown && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: dropdownStyle(tokens), children: [
|
|
2667
2701
|
accounts.map((account) => {
|
|
2668
|
-
const
|
|
2702
|
+
const preferredWallet = getPreferredDepositWallet(account, depositAmount ?? 0);
|
|
2703
|
+
const active = hasActiveDepositWallet(account);
|
|
2669
2704
|
const isSelected = account.id === selectedAccountId;
|
|
2670
2705
|
const displayName = account.nickname ?? account.name;
|
|
2671
|
-
const walletAddress =
|
|
2706
|
+
const walletAddress = preferredWallet ? getWalletAddress(preferredWallet) : null;
|
|
2672
2707
|
const hasAllowance = active && account.remainingAllowance != null;
|
|
2673
2708
|
const exceedsLimit = hasAllowance && depositAmount != null && depositAmount > account.remainingAllowance;
|
|
2674
2709
|
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
@@ -3004,7 +3039,7 @@ function SettingsMenu({ onLogout }) {
|
|
|
3004
3039
|
document.addEventListener("mousedown", handleClickOutside);
|
|
3005
3040
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
3006
3041
|
}, [open]);
|
|
3007
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: menuRef, style:
|
|
3042
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: menuRef, style: containerStyle7, children: [
|
|
3008
3043
|
/* @__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: [
|
|
3009
3044
|
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "5", r: "2", fill: "currentColor" }),
|
|
3010
3045
|
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "2", fill: "currentColor" }),
|
|
@@ -3031,7 +3066,7 @@ function SettingsMenu({ onLogout }) {
|
|
|
3031
3066
|
) })
|
|
3032
3067
|
] });
|
|
3033
3068
|
}
|
|
3034
|
-
var
|
|
3069
|
+
var containerStyle7 = {
|
|
3035
3070
|
position: "relative"
|
|
3036
3071
|
};
|
|
3037
3072
|
var triggerStyle = (color) => ({
|
|
@@ -3118,7 +3153,7 @@ function LoginScreen({
|
|
|
3118
3153
|
right: merchantInitials ? /* @__PURE__ */ jsxRuntime.jsx("div", { style: avatarStyle(tokens), children: merchantInitials }) : void 0
|
|
3119
3154
|
}
|
|
3120
3155
|
),
|
|
3121
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
3156
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle2, children: [
|
|
3122
3157
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: iconBoxStyle(tokens.accent), children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: iconLetterStyle, children: "S" }) }),
|
|
3123
3158
|
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle(tokens.text), children: "One-time setup.\nOne-tap deposits after." }),
|
|
3124
3159
|
/* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle(tokens.textSecondary), children: "Protected by Face ID." }),
|
|
@@ -3161,7 +3196,7 @@ function socialLabel(provider) {
|
|
|
3161
3196
|
return "X";
|
|
3162
3197
|
}
|
|
3163
3198
|
}
|
|
3164
|
-
var
|
|
3199
|
+
var contentStyle2 = {
|
|
3165
3200
|
textAlign: "center",
|
|
3166
3201
|
flex: 1,
|
|
3167
3202
|
display: "flex",
|
|
@@ -3337,7 +3372,7 @@ function OtpVerifyScreen({
|
|
|
3337
3372
|
}, [cooldown, onResend]);
|
|
3338
3373
|
return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { footer: /* @__PURE__ */ jsxRuntime.jsx(PoweredByFooter, {}), children: [
|
|
3339
3374
|
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack }),
|
|
3340
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
3375
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle3, children: [
|
|
3341
3376
|
/* @__PURE__ */ jsxRuntime.jsx(IconCircle, { variant: "accent", size: 56, children: /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "28", height: "28", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
3342
3377
|
"path",
|
|
3343
3378
|
{
|
|
@@ -3370,7 +3405,7 @@ function OtpVerifyScreen({
|
|
|
3370
3405
|
] })
|
|
3371
3406
|
] });
|
|
3372
3407
|
}
|
|
3373
|
-
var
|
|
3408
|
+
var contentStyle3 = {
|
|
3374
3409
|
textAlign: "center",
|
|
3375
3410
|
display: "flex",
|
|
3376
3411
|
flexDirection: "column",
|
|
@@ -3444,7 +3479,7 @@ function CreatePasskeyScreen({
|
|
|
3444
3479
|
] }),
|
|
3445
3480
|
children: [
|
|
3446
3481
|
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { onBack }),
|
|
3447
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
3482
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle4, children: [
|
|
3448
3483
|
/* @__PURE__ */ jsxRuntime.jsx(IconCircle, { variant: "accent", size: 64, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "36", height: "36", viewBox: "0 0 24 24", fill: "none", children: [
|
|
3449
3484
|
/* @__PURE__ */ jsxRuntime.jsx("rect", { x: "4", y: "4", width: "16", height: "16", rx: "3", stroke: tokens.accent, strokeWidth: "1.5", strokeDasharray: "3 2" }),
|
|
3450
3485
|
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "9", cy: "10", r: "1", fill: tokens.accent }),
|
|
@@ -3460,7 +3495,7 @@ function CreatePasskeyScreen({
|
|
|
3460
3495
|
}
|
|
3461
3496
|
);
|
|
3462
3497
|
}
|
|
3463
|
-
var
|
|
3498
|
+
var contentStyle4 = {
|
|
3464
3499
|
textAlign: "center",
|
|
3465
3500
|
flex: 1,
|
|
3466
3501
|
display: "flex",
|
|
@@ -3494,6 +3529,43 @@ var errorBannerStyle2 = (tokens) => ({
|
|
|
3494
3529
|
width: "100%",
|
|
3495
3530
|
textAlign: "left"
|
|
3496
3531
|
});
|
|
3532
|
+
function Spinner({ size = 40, label }) {
|
|
3533
|
+
const { tokens } = useSwypeConfig();
|
|
3534
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
3535
|
+
"div",
|
|
3536
|
+
{
|
|
3537
|
+
style: {
|
|
3538
|
+
display: "flex",
|
|
3539
|
+
flexDirection: "column",
|
|
3540
|
+
alignItems: "center",
|
|
3541
|
+
gap: "12px"
|
|
3542
|
+
},
|
|
3543
|
+
children: [
|
|
3544
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
3545
|
+
"div",
|
|
3546
|
+
{
|
|
3547
|
+
style: {
|
|
3548
|
+
width: size,
|
|
3549
|
+
height: size,
|
|
3550
|
+
border: `4px solid ${tokens.bgInput}`,
|
|
3551
|
+
borderTopColor: tokens.accent,
|
|
3552
|
+
borderRightColor: tokens.accent + "66",
|
|
3553
|
+
borderRadius: "50%",
|
|
3554
|
+
boxShadow: "inset 0 0 0 1px rgba(255,255,255,0.1)",
|
|
3555
|
+
animation: "swype-spin 0.9s linear infinite"
|
|
3556
|
+
}
|
|
3557
|
+
}
|
|
3558
|
+
),
|
|
3559
|
+
label && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { color: tokens.textSecondary, fontSize: "0.875rem", margin: 0 }, children: label }),
|
|
3560
|
+
/* @__PURE__ */ jsxRuntime.jsx("style", { children: `
|
|
3561
|
+
@keyframes swype-spin {
|
|
3562
|
+
to { transform: rotate(360deg); }
|
|
3563
|
+
}
|
|
3564
|
+
` })
|
|
3565
|
+
]
|
|
3566
|
+
}
|
|
3567
|
+
);
|
|
3568
|
+
}
|
|
3497
3569
|
var WALLET_EMOJIS = {
|
|
3498
3570
|
rabby: "\u{1F430}",
|
|
3499
3571
|
ora: "\u2666\uFE0F",
|
|
@@ -4335,7 +4407,7 @@ function SuccessScreen({
|
|
|
4335
4407
|
right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout })
|
|
4336
4408
|
}
|
|
4337
4409
|
),
|
|
4338
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
4410
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle5, children: [
|
|
4339
4411
|
succeeded ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
|
|
4340
4412
|
/* @__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 }) }) }),
|
|
4341
4413
|
/* @__PURE__ */ jsxRuntime.jsxs("h2", { style: headingStyle6(tokens.text), children: [
|
|
@@ -4382,7 +4454,7 @@ function SuccessScreen({
|
|
|
4382
4454
|
}
|
|
4383
4455
|
);
|
|
4384
4456
|
}
|
|
4385
|
-
var
|
|
4457
|
+
var contentStyle5 = {
|
|
4386
4458
|
flex: 1,
|
|
4387
4459
|
display: "flex",
|
|
4388
4460
|
flexDirection: "column",
|
|
@@ -4873,7 +4945,7 @@ function TransferStatusScreen({
|
|
|
4873
4945
|
const steps = buildSteps(phase);
|
|
4874
4946
|
return /* @__PURE__ */ jsxRuntime.jsxs(ScreenLayout, { children: [
|
|
4875
4947
|
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
|
|
4876
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
4948
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle6, children: [
|
|
4877
4949
|
/* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
|
|
4878
4950
|
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle8(tokens.text), children: "Processing Transfer..." }),
|
|
4879
4951
|
error && /* @__PURE__ */ jsxRuntime.jsx("div", { style: errorBannerStyle5(tokens), children: error }),
|
|
@@ -4882,7 +4954,7 @@ function TransferStatusScreen({
|
|
|
4882
4954
|
] })
|
|
4883
4955
|
] });
|
|
4884
4956
|
}
|
|
4885
|
-
var
|
|
4957
|
+
var contentStyle6 = {
|
|
4886
4958
|
flex: 1,
|
|
4887
4959
|
display: "flex",
|
|
4888
4960
|
flexDirection: "column",
|
|
@@ -4958,7 +5030,7 @@ function OpenWalletScreen({
|
|
|
4958
5030
|
] }),
|
|
4959
5031
|
children: [
|
|
4960
5032
|
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
|
|
4961
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
5033
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle7, children: [
|
|
4962
5034
|
logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
|
|
4963
5035
|
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle9(tokens.text), children: loading ? "Connecting..." : `Open ${displayName}` }),
|
|
4964
5036
|
/* @__PURE__ */ jsxRuntime.jsx("p", { style: subtitleStyle9(tokens.textSecondary), children: loading ? "Creating transfer and preparing your wallet link..." : `Continue in ${displayName} to authorize this connection.` }),
|
|
@@ -4971,7 +5043,7 @@ function OpenWalletScreen({
|
|
|
4971
5043
|
}
|
|
4972
5044
|
);
|
|
4973
5045
|
}
|
|
4974
|
-
var
|
|
5046
|
+
var contentStyle7 = {
|
|
4975
5047
|
flex: 1,
|
|
4976
5048
|
display: "flex",
|
|
4977
5049
|
flexDirection: "column",
|
|
@@ -5042,7 +5114,7 @@ function ConfirmSignScreen({
|
|
|
5042
5114
|
] }),
|
|
5043
5115
|
children: [
|
|
5044
5116
|
/* @__PURE__ */ jsxRuntime.jsx(ScreenHeader, { right: /* @__PURE__ */ jsxRuntime.jsx(SettingsMenu, { onLogout }) }),
|
|
5045
|
-
/* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
5117
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { style: contentStyle8, children: [
|
|
5046
5118
|
logoSrc ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: logoSrc, alt: displayName, style: logoStyle2 }) : /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size: 48 }),
|
|
5047
5119
|
/* @__PURE__ */ jsxRuntime.jsx("h2", { style: headingStyle10(tokens.text), children: "Wallet authorized" }),
|
|
5048
5120
|
/* @__PURE__ */ jsxRuntime.jsxs("p", { style: subtitleStyle10(tokens.textSecondary), children: [
|
|
@@ -5058,7 +5130,7 @@ function ConfirmSignScreen({
|
|
|
5058
5130
|
}
|
|
5059
5131
|
);
|
|
5060
5132
|
}
|
|
5061
|
-
var
|
|
5133
|
+
var contentStyle8 = {
|
|
5062
5134
|
flex: 1,
|
|
5063
5135
|
display: "flex",
|
|
5064
5136
|
flexDirection: "column",
|
|
@@ -5114,9 +5186,6 @@ var errorStyle2 = (color) => ({
|
|
|
5114
5186
|
color: "#ef4444",
|
|
5115
5187
|
margin: "8px 0 0"
|
|
5116
5188
|
});
|
|
5117
|
-
function CenteredSpinner({ label }) {
|
|
5118
|
-
return /* @__PURE__ */ jsxRuntime.jsx(ScreenLayout, { children: /* @__PURE__ */ jsxRuntime.jsx("div", { style: { textAlign: "center", padding: "48px 0", flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }, children: /* @__PURE__ */ jsxRuntime.jsx(Spinner, { label }) }) });
|
|
5119
|
-
}
|
|
5120
5189
|
function StepRenderer({
|
|
5121
5190
|
state,
|
|
5122
5191
|
ready,
|
|
@@ -5128,6 +5197,7 @@ function StepRenderer({
|
|
|
5128
5197
|
transferSigningSigning,
|
|
5129
5198
|
transferSigningError,
|
|
5130
5199
|
pendingConnections,
|
|
5200
|
+
depositEligibleAccounts,
|
|
5131
5201
|
sourceName,
|
|
5132
5202
|
sourceAddress,
|
|
5133
5203
|
sourceVerified,
|
|
@@ -5149,7 +5219,7 @@ function StepRenderer({
|
|
|
5149
5219
|
}) {
|
|
5150
5220
|
const { step } = state;
|
|
5151
5221
|
if (!ready) {
|
|
5152
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
5222
|
+
return /* @__PURE__ */ jsxRuntime.jsx(SwypeLoadingScreen, {});
|
|
5153
5223
|
}
|
|
5154
5224
|
if (step === "login" && !authenticated) {
|
|
5155
5225
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -5237,7 +5307,7 @@ function StepRenderer({
|
|
|
5237
5307
|
}
|
|
5238
5308
|
if (step === "deposit") {
|
|
5239
5309
|
if (state.loadingData) {
|
|
5240
|
-
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
5310
|
+
return /* @__PURE__ */ jsxRuntime.jsx(SwypeLoadingScreen, {});
|
|
5241
5311
|
}
|
|
5242
5312
|
const parsedAmt = depositAmount != null ? depositAmount : 5;
|
|
5243
5313
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -5259,7 +5329,7 @@ function StepRenderer({
|
|
|
5259
5329
|
onLogout: handlers.onLogout,
|
|
5260
5330
|
onIncreaseLimit: handlers.onIncreaseLimit,
|
|
5261
5331
|
increasingLimit: state.increasingLimit,
|
|
5262
|
-
accounts:
|
|
5332
|
+
accounts: depositEligibleAccounts,
|
|
5263
5333
|
selectedAccountId: state.selectedAccountId,
|
|
5264
5334
|
onSelectAccount: handlers.onSelectAccount,
|
|
5265
5335
|
onAuthorizeAccount: handlers.onContinueConnection,
|
|
@@ -5335,7 +5405,7 @@ function StepRenderer({
|
|
|
5335
5405
|
onSwitchWallet: () => handlers.onNavigate("wallet-picker"),
|
|
5336
5406
|
onBack: onBack ?? (() => handlers.onLogout()),
|
|
5337
5407
|
onLogout: handlers.onLogout,
|
|
5338
|
-
accounts:
|
|
5408
|
+
accounts: depositEligibleAccounts,
|
|
5339
5409
|
selectedAccountId: state.selectedAccountId,
|
|
5340
5410
|
onSelectAccount: handlers.onSelectAccount,
|
|
5341
5411
|
onAuthorizeAccount: handlers.onContinueConnection,
|
|
@@ -5364,7 +5434,7 @@ var PaymentErrorBoundary = class extends react.Component {
|
|
|
5364
5434
|
if (!this.state.hasError) {
|
|
5365
5435
|
return this.props.children;
|
|
5366
5436
|
}
|
|
5367
|
-
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style:
|
|
5437
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: containerStyle8, children: [
|
|
5368
5438
|
/* @__PURE__ */ jsxRuntime.jsx("div", { style: iconStyle4, children: /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "48", height: "48", viewBox: "0 0 24 24", fill: "none", children: [
|
|
5369
5439
|
/* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "10", stroke: "#ef4444", strokeWidth: "1.5" }),
|
|
5370
5440
|
/* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 8v5", stroke: "#ef4444", strokeWidth: "1.5", strokeLinecap: "round" }),
|
|
@@ -5376,7 +5446,7 @@ var PaymentErrorBoundary = class extends react.Component {
|
|
|
5376
5446
|
] });
|
|
5377
5447
|
}
|
|
5378
5448
|
};
|
|
5379
|
-
var
|
|
5449
|
+
var containerStyle8 = {
|
|
5380
5450
|
display: "flex",
|
|
5381
5451
|
flexDirection: "column",
|
|
5382
5452
|
alignItems: "center",
|
|
@@ -5493,6 +5563,10 @@ function SwypePaymentInner({
|
|
|
5493
5563
|
),
|
|
5494
5564
|
[state.accounts]
|
|
5495
5565
|
);
|
|
5566
|
+
const depositEligibleAccounts = react.useMemo(
|
|
5567
|
+
() => getDepositEligibleAccounts(state.accounts),
|
|
5568
|
+
[state.accounts]
|
|
5569
|
+
);
|
|
5496
5570
|
const maxSourceBalance = react.useMemo(() => {
|
|
5497
5571
|
let max = 0;
|
|
5498
5572
|
for (const acct of state.accounts) {
|
|
@@ -5703,9 +5777,9 @@ function SwypePaymentInner({
|
|
|
5703
5777
|
fetchProviders(apiBaseUrl, token)
|
|
5704
5778
|
]);
|
|
5705
5779
|
const parsedAmt = depositAmount != null ? depositAmount : 0;
|
|
5706
|
-
const defaults =
|
|
5780
|
+
const defaults = resolveDepositSelection(accts, parsedAmt, state.selectedAccountId);
|
|
5707
5781
|
dispatch({ type: "ACCOUNTS_RELOADED", accounts: accts, providers: prov, defaults });
|
|
5708
|
-
}, [getAccessToken, state.activeCredentialId, apiBaseUrl, depositAmount]);
|
|
5782
|
+
}, [getAccessToken, state.activeCredentialId, state.selectedAccountId, apiBaseUrl, depositAmount]);
|
|
5709
5783
|
const handleAuthorizedMobileReturn = react.useCallback(async (authorizedTransfer, isSetup) => {
|
|
5710
5784
|
if (handlingMobileReturnRef.current) return;
|
|
5711
5785
|
handlingMobileReturnRef.current = true;
|
|
@@ -5761,10 +5835,10 @@ function SwypePaymentInner({
|
|
|
5761
5835
|
let effectiveSourceId = sourceOverrides?.sourceId ?? sourceId;
|
|
5762
5836
|
if (effectiveSourceType === "accountId") {
|
|
5763
5837
|
const acct = state.accounts.find((a) => a.id === effectiveSourceId);
|
|
5764
|
-
const
|
|
5765
|
-
if (
|
|
5838
|
+
const preferredWallet = acct ? getPreferredDepositWallet(acct, payAmount) : null;
|
|
5839
|
+
if (preferredWallet?.status === "ACTIVE") {
|
|
5766
5840
|
effectiveSourceType = "walletId";
|
|
5767
|
-
effectiveSourceId =
|
|
5841
|
+
effectiveSourceId = preferredWallet.id;
|
|
5768
5842
|
}
|
|
5769
5843
|
}
|
|
5770
5844
|
const t = await createTransfer(apiBaseUrl, token, {
|
|
@@ -5990,14 +6064,14 @@ function SwypePaymentInner({
|
|
|
5990
6064
|
(accountId) => {
|
|
5991
6065
|
const acct = state.accounts.find((a) => a.id === accountId);
|
|
5992
6066
|
if (!acct) return;
|
|
5993
|
-
const activeWallet = acct
|
|
6067
|
+
const activeWallet = getPreferredDepositWallet(acct, depositAmount ?? 0);
|
|
5994
6068
|
dispatch({
|
|
5995
6069
|
type: "SELECT_ACCOUNT",
|
|
5996
6070
|
accountId,
|
|
5997
6071
|
walletId: activeWallet?.id ?? null
|
|
5998
6072
|
});
|
|
5999
6073
|
},
|
|
6000
|
-
[state.accounts]
|
|
6074
|
+
[state.accounts, depositAmount]
|
|
6001
6075
|
);
|
|
6002
6076
|
const handleNewPayment = react.useCallback(() => {
|
|
6003
6077
|
clearMobileFlowState();
|
|
@@ -6271,7 +6345,7 @@ function SwypePaymentInner({
|
|
|
6271
6345
|
]);
|
|
6272
6346
|
if (cancelled) return;
|
|
6273
6347
|
const parsedAmt = depositAmount != null ? depositAmount : 0;
|
|
6274
|
-
const defaults =
|
|
6348
|
+
const defaults = resolveDepositSelection(accts, parsedAmt, state.selectedAccountId);
|
|
6275
6349
|
const persisted = loadMobileFlowState();
|
|
6276
6350
|
const resolved = resolvePostAuthStep({
|
|
6277
6351
|
hasPasskey: !!state.activeCredentialId,
|
|
@@ -6318,6 +6392,7 @@ function SwypePaymentInner({
|
|
|
6318
6392
|
apiBaseUrl,
|
|
6319
6393
|
getAccessToken,
|
|
6320
6394
|
state.activeCredentialId,
|
|
6395
|
+
state.selectedAccountId,
|
|
6321
6396
|
depositAmount
|
|
6322
6397
|
]);
|
|
6323
6398
|
react.useEffect(() => {
|
|
@@ -6514,6 +6589,7 @@ function SwypePaymentInner({
|
|
|
6514
6589
|
transferSigningSigning: transferSigning.signing,
|
|
6515
6590
|
transferSigningError: transferSigning.error,
|
|
6516
6591
|
pendingConnections,
|
|
6592
|
+
depositEligibleAccounts,
|
|
6517
6593
|
sourceName,
|
|
6518
6594
|
sourceAddress,
|
|
6519
6595
|
sourceVerified,
|
|
@@ -6551,6 +6627,7 @@ exports.SettingsMenu = SettingsMenu;
|
|
|
6551
6627
|
exports.SetupScreen = SetupScreen;
|
|
6552
6628
|
exports.Spinner = Spinner;
|
|
6553
6629
|
exports.StepList = StepList;
|
|
6630
|
+
exports.SwypeLoadingScreen = SwypeLoadingScreen;
|
|
6554
6631
|
exports.SwypePayment = SwypePayment;
|
|
6555
6632
|
exports.SwypeProvider = SwypeProvider;
|
|
6556
6633
|
exports.buildPasskeyPopupOptions = buildPasskeyPopupOptions;
|