@unifold/connect-react 0.1.42 → 0.1.44
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.d.mts +22 -2
- package/dist/index.d.ts +22 -2
- package/dist/index.js +1782 -514
- package/dist/index.mjs +1785 -510
- package/dist/styles-base.css +1 -1
- package/dist/styles.css +1 -1
- package/package.json +4 -4
package/dist/index.js
CHANGED
|
@@ -1185,7 +1185,7 @@ __export(index_exports, {
|
|
|
1185
1185
|
module.exports = __toCommonJS(index_exports);
|
|
1186
1186
|
|
|
1187
1187
|
// src/provider.tsx
|
|
1188
|
-
var
|
|
1188
|
+
var import_react32 = __toESM(require("react"));
|
|
1189
1189
|
|
|
1190
1190
|
// ../react-provider/dist/index.mjs
|
|
1191
1191
|
var import_react = require("react");
|
|
@@ -1334,6 +1334,12 @@ var ArrowLeft = createLucideIcon("ArrowLeft", [
|
|
|
1334
1334
|
["path", { d: "M19 12H5", key: "x3x0zl" }]
|
|
1335
1335
|
]);
|
|
1336
1336
|
|
|
1337
|
+
// ../../node_modules/.pnpm/lucide-react@0.454.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/arrow-right.js
|
|
1338
|
+
var ArrowRight = createLucideIcon("ArrowRight", [
|
|
1339
|
+
["path", { d: "M5 12h14", key: "1ays0h" }],
|
|
1340
|
+
["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
|
|
1341
|
+
]);
|
|
1342
|
+
|
|
1337
1343
|
// ../../node_modules/.pnpm/lucide-react@0.454.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/arrow-up-down.js
|
|
1338
1344
|
var ArrowUpDown = createLucideIcon("ArrowUpDown", [
|
|
1339
1345
|
["path", { d: "m21 16-4 4-4-4", key: "f6ql7i" }],
|
|
@@ -6536,6 +6542,28 @@ async function verifyRecipientAddress(request, publishableKey) {
|
|
|
6536
6542
|
}
|
|
6537
6543
|
return response.json();
|
|
6538
6544
|
}
|
|
6545
|
+
async function checkHypercoreActivation(request, publishableKey) {
|
|
6546
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
6547
|
+
validatePublishableKey(pk);
|
|
6548
|
+
const response = await fetch(
|
|
6549
|
+
`${API_BASE_URL}/v1/public/addresses/hypercore/activation`,
|
|
6550
|
+
{
|
|
6551
|
+
method: "POST",
|
|
6552
|
+
headers: {
|
|
6553
|
+
accept: "application/json",
|
|
6554
|
+
"x-publishable-key": pk,
|
|
6555
|
+
"Content-Type": "application/json"
|
|
6556
|
+
},
|
|
6557
|
+
body: JSON.stringify(request)
|
|
6558
|
+
}
|
|
6559
|
+
);
|
|
6560
|
+
if (!response.ok) {
|
|
6561
|
+
throw new Error(
|
|
6562
|
+
`HyperCore activation check failed: ${response.statusText}`
|
|
6563
|
+
);
|
|
6564
|
+
}
|
|
6565
|
+
return response.json();
|
|
6566
|
+
}
|
|
6539
6567
|
async function getExchanges(query, publishableKey) {
|
|
6540
6568
|
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
6541
6569
|
validatePublishableKey(pk);
|
|
@@ -6620,6 +6648,119 @@ async function sendSolanaTransaction(request, publishableKey) {
|
|
|
6620
6648
|
}
|
|
6621
6649
|
return response.json();
|
|
6622
6650
|
}
|
|
6651
|
+
async function retrievePaymentIntent(clientSecret, publishableKey) {
|
|
6652
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
6653
|
+
validatePublishableKey(pk);
|
|
6654
|
+
const response = await fetch(
|
|
6655
|
+
`${API_BASE_URL}/v1/public/payment_intents/retrieve`,
|
|
6656
|
+
{
|
|
6657
|
+
method: "POST",
|
|
6658
|
+
headers: {
|
|
6659
|
+
accept: "application/json",
|
|
6660
|
+
"x-publishable-key": pk,
|
|
6661
|
+
"Content-Type": "application/json"
|
|
6662
|
+
},
|
|
6663
|
+
body: JSON.stringify({ client_secret: clientSecret })
|
|
6664
|
+
}
|
|
6665
|
+
);
|
|
6666
|
+
if (!response.ok) {
|
|
6667
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
6668
|
+
throw new Error(
|
|
6669
|
+
`Failed to retrieve payment intent: ${error.message || response.statusText}`
|
|
6670
|
+
);
|
|
6671
|
+
}
|
|
6672
|
+
return response.json();
|
|
6673
|
+
}
|
|
6674
|
+
async function listPaymentIntentExecutions(clientSecret, publishableKey) {
|
|
6675
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
6676
|
+
validatePublishableKey(pk);
|
|
6677
|
+
const response = await fetch(
|
|
6678
|
+
`${API_BASE_URL}/v1/public/payment_intents/executions`,
|
|
6679
|
+
{
|
|
6680
|
+
method: "POST",
|
|
6681
|
+
headers: {
|
|
6682
|
+
accept: "application/json",
|
|
6683
|
+
"x-publishable-key": pk,
|
|
6684
|
+
"Content-Type": "application/json"
|
|
6685
|
+
},
|
|
6686
|
+
body: JSON.stringify({ client_secret: clientSecret })
|
|
6687
|
+
}
|
|
6688
|
+
);
|
|
6689
|
+
if (!response.ok) {
|
|
6690
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
6691
|
+
throw new Error(
|
|
6692
|
+
`Failed to list payment intent executions: ${error.message || response.statusText}`
|
|
6693
|
+
);
|
|
6694
|
+
}
|
|
6695
|
+
return response.json();
|
|
6696
|
+
}
|
|
6697
|
+
async function getDepositQuote(request, publishableKey) {
|
|
6698
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
6699
|
+
validatePublishableKey(pk);
|
|
6700
|
+
const response = await fetch(`${API_BASE_URL}/v1/public/quotes`, {
|
|
6701
|
+
method: "POST",
|
|
6702
|
+
headers: {
|
|
6703
|
+
accept: "application/json",
|
|
6704
|
+
"x-publishable-key": pk,
|
|
6705
|
+
"Content-Type": "application/json"
|
|
6706
|
+
},
|
|
6707
|
+
body: JSON.stringify(request)
|
|
6708
|
+
});
|
|
6709
|
+
if (!response.ok) {
|
|
6710
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
6711
|
+
throw new Error(
|
|
6712
|
+
`Failed to get deposit quote: ${error.message || response.statusText}`
|
|
6713
|
+
);
|
|
6714
|
+
}
|
|
6715
|
+
const json = await response.json();
|
|
6716
|
+
return json.data;
|
|
6717
|
+
}
|
|
6718
|
+
async function buildHypercoreTransaction(request, publishableKey) {
|
|
6719
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
6720
|
+
validatePublishableKey(pk);
|
|
6721
|
+
const response = await fetch(
|
|
6722
|
+
`${API_BASE_URL}/v1/public/transactions/hypercore/build`,
|
|
6723
|
+
{
|
|
6724
|
+
method: "POST",
|
|
6725
|
+
headers: {
|
|
6726
|
+
accept: "application/json",
|
|
6727
|
+
"x-publishable-key": pk,
|
|
6728
|
+
"Content-Type": "application/json"
|
|
6729
|
+
},
|
|
6730
|
+
body: JSON.stringify(request)
|
|
6731
|
+
}
|
|
6732
|
+
);
|
|
6733
|
+
if (!response.ok) {
|
|
6734
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
6735
|
+
throw new Error(
|
|
6736
|
+
`Failed to build HyperCore transaction: ${error.message || response.statusText}`
|
|
6737
|
+
);
|
|
6738
|
+
}
|
|
6739
|
+
return response.json();
|
|
6740
|
+
}
|
|
6741
|
+
async function sendHypercoreTransaction(request, publishableKey) {
|
|
6742
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
6743
|
+
validatePublishableKey(pk);
|
|
6744
|
+
const response = await fetch(
|
|
6745
|
+
`${API_BASE_URL}/v1/public/transactions/hypercore/send`,
|
|
6746
|
+
{
|
|
6747
|
+
method: "POST",
|
|
6748
|
+
headers: {
|
|
6749
|
+
accept: "application/json",
|
|
6750
|
+
"x-publishable-key": pk,
|
|
6751
|
+
"Content-Type": "application/json"
|
|
6752
|
+
},
|
|
6753
|
+
body: JSON.stringify(request)
|
|
6754
|
+
}
|
|
6755
|
+
);
|
|
6756
|
+
if (!response.ok) {
|
|
6757
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
6758
|
+
throw new Error(
|
|
6759
|
+
`Failed to send HyperCore transaction: ${error.message || response.statusText}`
|
|
6760
|
+
);
|
|
6761
|
+
}
|
|
6762
|
+
return response.json();
|
|
6763
|
+
}
|
|
6623
6764
|
function useUserIp() {
|
|
6624
6765
|
const {
|
|
6625
6766
|
data: userIpInfo,
|
|
@@ -10961,19 +11102,23 @@ var import_jsx_runtime68 = require("react/jsx-runtime");
|
|
|
10961
11102
|
var import_react26 = require("react");
|
|
10962
11103
|
var import_react_query11 = require("@tanstack/react-query");
|
|
10963
11104
|
var import_react_query12 = require("@tanstack/react-query");
|
|
11105
|
+
var import_jsx_runtime69 = require("react/jsx-runtime");
|
|
11106
|
+
var import_react27 = require("react");
|
|
10964
11107
|
var import_react_query13 = require("@tanstack/react-query");
|
|
10965
11108
|
var import_react_query14 = require("@tanstack/react-query");
|
|
10966
|
-
var import_react27 = require("react");
|
|
10967
|
-
var import_jsx_runtime69 = require("react/jsx-runtime");
|
|
10968
|
-
var import_react28 = require("react");
|
|
10969
11109
|
var import_react_query15 = require("@tanstack/react-query");
|
|
11110
|
+
var import_react_query16 = require("@tanstack/react-query");
|
|
11111
|
+
var import_react28 = require("react");
|
|
10970
11112
|
var import_jsx_runtime70 = require("react/jsx-runtime");
|
|
10971
|
-
var import_jsx_runtime71 = require("react/jsx-runtime");
|
|
10972
11113
|
var import_react29 = require("react");
|
|
11114
|
+
var import_react_query17 = require("@tanstack/react-query");
|
|
11115
|
+
var import_jsx_runtime71 = require("react/jsx-runtime");
|
|
10973
11116
|
var import_jsx_runtime72 = require("react/jsx-runtime");
|
|
10974
|
-
var import_jsx_runtime73 = require("react/jsx-runtime");
|
|
10975
11117
|
var import_react30 = require("react");
|
|
11118
|
+
var import_jsx_runtime73 = require("react/jsx-runtime");
|
|
10976
11119
|
var import_jsx_runtime74 = require("react/jsx-runtime");
|
|
11120
|
+
var import_react31 = require("react");
|
|
11121
|
+
var import_jsx_runtime75 = require("react/jsx-runtime");
|
|
10977
11122
|
function cn(...inputs) {
|
|
10978
11123
|
return twMerge(clsx(inputs));
|
|
10979
11124
|
}
|
|
@@ -12284,6 +12429,7 @@ var CUTOFF_BUFFER_MS = 6e4;
|
|
|
12284
12429
|
function useDepositPolling({
|
|
12285
12430
|
userId,
|
|
12286
12431
|
publishableKey,
|
|
12432
|
+
clientSecret,
|
|
12287
12433
|
depositConfirmationMode = "auto_ui",
|
|
12288
12434
|
depositWalletId,
|
|
12289
12435
|
enabled = true,
|
|
@@ -12341,11 +12487,12 @@ function useDepositPolling({
|
|
|
12341
12487
|
depositWalletId
|
|
12342
12488
|
]);
|
|
12343
12489
|
(0, import_react12.useEffect)(() => {
|
|
12344
|
-
if (!
|
|
12490
|
+
if (!enabled) return;
|
|
12491
|
+
if (!clientSecret && !userId) return;
|
|
12345
12492
|
const modalOpenedAt = modalOpenedAtRef.current;
|
|
12346
12493
|
const poll = async () => {
|
|
12347
12494
|
try {
|
|
12348
|
-
const response = await queryExecutions(userId, publishableKey, ActionType.Deposit);
|
|
12495
|
+
const response = clientSecret ? await listPaymentIntentExecutions(clientSecret, publishableKey) : await queryExecutions(userId, publishableKey, ActionType.Deposit);
|
|
12349
12496
|
const cutoff = new Date(modalOpenedAt.getTime() - CUTOFF_BUFFER_MS);
|
|
12350
12497
|
const sortedExecutions = [...response.data].sort((a, b) => {
|
|
12351
12498
|
const timeA = a.created_at ? new Date(a.created_at).getTime() : 0;
|
|
@@ -12429,7 +12576,7 @@ function useDepositPolling({
|
|
|
12429
12576
|
clearInterval(pollInterval);
|
|
12430
12577
|
setIsPolling(false);
|
|
12431
12578
|
};
|
|
12432
|
-
}, [userId, publishableKey, enabled]);
|
|
12579
|
+
}, [userId, publishableKey, clientSecret, enabled]);
|
|
12433
12580
|
(0, import_react12.useEffect)(() => {
|
|
12434
12581
|
if (!pollingEnabled || !depositWalletId) return;
|
|
12435
12582
|
const triggerPoll = async () => {
|
|
@@ -18938,6 +19085,7 @@ var parseChainKey = (chainKey) => {
|
|
|
18938
19085
|
function TransferCryptoSingleInput({
|
|
18939
19086
|
userId,
|
|
18940
19087
|
publishableKey,
|
|
19088
|
+
clientSecret,
|
|
18941
19089
|
recipientAddress,
|
|
18942
19090
|
destinationChainType,
|
|
18943
19091
|
destinationChainId,
|
|
@@ -18950,7 +19098,9 @@ function TransferCryptoSingleInput({
|
|
|
18950
19098
|
onExecutionsChange,
|
|
18951
19099
|
onDepositSuccess,
|
|
18952
19100
|
onDepositError,
|
|
18953
|
-
wallets: externalWallets
|
|
19101
|
+
wallets: externalWallets,
|
|
19102
|
+
onSourceTokenChange,
|
|
19103
|
+
checkoutQuote
|
|
18954
19104
|
}) {
|
|
18955
19105
|
const { themeClass, colors: colors2, fonts, components } = useTheme();
|
|
18956
19106
|
const isDarkMode = themeClass.includes("uf-dark");
|
|
@@ -19017,12 +19167,28 @@ function TransferCryptoSingleInput({
|
|
|
19017
19167
|
} = useDepositPolling({
|
|
19018
19168
|
userId,
|
|
19019
19169
|
publishableKey,
|
|
19170
|
+
clientSecret,
|
|
19020
19171
|
depositConfirmationMode,
|
|
19021
19172
|
depositWalletId: currentWallet?.id,
|
|
19022
19173
|
enabled: true,
|
|
19023
19174
|
onDepositSuccess,
|
|
19024
19175
|
onDepositError
|
|
19025
19176
|
});
|
|
19177
|
+
(0, import_react18.useEffect)(() => {
|
|
19178
|
+
if (!onSourceTokenChange || !token || !chain || !initialSelectionDone) return;
|
|
19179
|
+
const { chainType, chainId } = parseChainKey(chain);
|
|
19180
|
+
const matchedToken = supportedTokens.find((t11) => t11.symbol === token);
|
|
19181
|
+
const matchedChain = matchedToken?.chains.find(
|
|
19182
|
+
(c) => c.chain_type === chainType && c.chain_id === chainId
|
|
19183
|
+
);
|
|
19184
|
+
onSourceTokenChange({
|
|
19185
|
+
symbol: token,
|
|
19186
|
+
chainType,
|
|
19187
|
+
chainId,
|
|
19188
|
+
tokenAddress: matchedChain?.token_address ?? "",
|
|
19189
|
+
minimumDepositAmountUsd: matchedChain?.minimum_deposit_amount_usd ?? 0
|
|
19190
|
+
});
|
|
19191
|
+
}, [token, chain, initialSelectionDone, onSourceTokenChange, supportedTokens]);
|
|
19026
19192
|
(0, import_react18.useEffect)(() => {
|
|
19027
19193
|
if (onExecutionsChange) {
|
|
19028
19194
|
onExecutionsChange(depositExecutions);
|
|
@@ -19169,6 +19335,53 @@ function TransferCryptoSingleInput({
|
|
|
19169
19335
|
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { children: "Retrying automatically every 5 seconds..." })
|
|
19170
19336
|
] })
|
|
19171
19337
|
] }),
|
|
19338
|
+
checkoutQuote && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
|
|
19339
|
+
"div",
|
|
19340
|
+
{
|
|
19341
|
+
className: "uf-rounded-xl uf-px-3 uf-py-2 uf-flex uf-items-center uf-justify-between",
|
|
19342
|
+
style: {
|
|
19343
|
+
backgroundColor: components.card.backgroundColor,
|
|
19344
|
+
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`,
|
|
19345
|
+
borderRadius: components.card.borderRadius
|
|
19346
|
+
},
|
|
19347
|
+
children: [
|
|
19348
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
19349
|
+
"span",
|
|
19350
|
+
{
|
|
19351
|
+
className: "uf-text-xs",
|
|
19352
|
+
style: { color: components.card.subtitleColor, fontFamily: fonts.regular },
|
|
19353
|
+
children: "You send"
|
|
19354
|
+
}
|
|
19355
|
+
),
|
|
19356
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
|
|
19357
|
+
"span",
|
|
19358
|
+
{
|
|
19359
|
+
className: "uf-text-sm uf-font-semibold",
|
|
19360
|
+
style: { color: components.card.titleColor, fontFamily: fonts.semibold },
|
|
19361
|
+
children: [
|
|
19362
|
+
(Number(checkoutQuote.sourceAmount) / 10 ** checkoutQuote.sourceTokenDecimals).toFixed(
|
|
19363
|
+
Math.min(checkoutQuote.sourceTokenDecimals, 6)
|
|
19364
|
+
),
|
|
19365
|
+
" ",
|
|
19366
|
+
checkoutQuote.sourceTokenSymbol,
|
|
19367
|
+
checkoutQuote.sourceAmountUsd && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
|
|
19368
|
+
"span",
|
|
19369
|
+
{
|
|
19370
|
+
className: "uf-text-xs uf-font-normal uf-ml-1.5",
|
|
19371
|
+
style: { color: components.card.subtitleColor },
|
|
19372
|
+
children: [
|
|
19373
|
+
"($",
|
|
19374
|
+
checkoutQuote.sourceAmountUsd,
|
|
19375
|
+
")"
|
|
19376
|
+
]
|
|
19377
|
+
}
|
|
19378
|
+
)
|
|
19379
|
+
]
|
|
19380
|
+
}
|
|
19381
|
+
)
|
|
19382
|
+
]
|
|
19383
|
+
}
|
|
19384
|
+
),
|
|
19172
19385
|
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-pt-2", children: [
|
|
19173
19386
|
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1", style: { color: components.card.labelColor }, children: "Intent address" }),
|
|
19174
19387
|
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "uf-shadow-lg", style: { borderRadius: components.card.borderRadius, border: `${components.card.borderWidth}px solid ${components.card.borderColor}` }, children: loading || tokensLoading || !initialSelectionDone ? (
|
|
@@ -19990,9 +20203,16 @@ function SelectTokenView({
|
|
|
19990
20203
|
onBack,
|
|
19991
20204
|
onClose,
|
|
19992
20205
|
onDisconnectWallet,
|
|
19993
|
-
isDisconnectingWallet = false
|
|
20206
|
+
isDisconnectingWallet = false,
|
|
20207
|
+
checkoutAmountUsd,
|
|
20208
|
+
checkoutReceivedUsd
|
|
19994
20209
|
}) {
|
|
19995
20210
|
const { colors: colors2, fonts, components } = useTheme();
|
|
20211
|
+
const isCheckout = !!checkoutAmountUsd;
|
|
20212
|
+
const headerSubtitle = isCheckout ? parseFloat(checkoutReceivedUsd || "0") > 0 ? `$${checkoutReceivedUsd} / $${checkoutAmountUsd} received` : `Amount due: $${checkoutAmountUsd}` : formatBalanceDisplay(
|
|
20213
|
+
`$${totalBalanceUsd || "0.00"}`,
|
|
20214
|
+
projectName
|
|
20215
|
+
);
|
|
19996
20216
|
return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
|
|
19997
20217
|
"div",
|
|
19998
20218
|
{
|
|
@@ -20001,11 +20221,8 @@ function SelectTokenView({
|
|
|
20001
20221
|
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
|
|
20002
20222
|
DepositHeader,
|
|
20003
20223
|
{
|
|
20004
|
-
title: "Select Token",
|
|
20005
|
-
subtitle:
|
|
20006
|
-
`$${totalBalanceUsd || "0.00"}`,
|
|
20007
|
-
projectName
|
|
20008
|
-
),
|
|
20224
|
+
title: isCheckout ? "Select Token" : "Select Token",
|
|
20225
|
+
subtitle: headerSubtitle,
|
|
20009
20226
|
showBack: true,
|
|
20010
20227
|
onBack,
|
|
20011
20228
|
onClose
|
|
@@ -20233,10 +20450,19 @@ function EnterAmountView({
|
|
|
20233
20450
|
onReview,
|
|
20234
20451
|
onBack,
|
|
20235
20452
|
onClose,
|
|
20236
|
-
quickSelectMode
|
|
20453
|
+
quickSelectMode,
|
|
20454
|
+
checkoutAmountUsd,
|
|
20455
|
+
checkoutReceivedUsd
|
|
20237
20456
|
}) {
|
|
20238
20457
|
const { colors: colors2, fonts, components } = useTheme();
|
|
20458
|
+
const isCheckout = !!checkoutAmountUsd;
|
|
20239
20459
|
const balanceSubtitle = selectedBalance?.amount_usd ? `Balance: $${parseFloat(selectedBalance.amount_usd).toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} (${formatTokenAmount(selectedBalance.amount, selectedToken.decimals, selectedToken.symbol)} ${selectedToken.symbol})` : `Balance: ${formatTokenAmount(selectedBalance.amount, selectedToken.decimals, selectedToken.symbol)} ${selectedToken.symbol}`;
|
|
20460
|
+
const checkoutRemainingUsd = isCheckout ? Math.max(
|
|
20461
|
+
parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0"),
|
|
20462
|
+
0
|
|
20463
|
+
).toFixed(2) : null;
|
|
20464
|
+
const headerTitle = isCheckout ? `Pay $${checkoutRemainingUsd}` : "Enter Amount";
|
|
20465
|
+
const headerSubtitle = isCheckout ? parseFloat(checkoutReceivedUsd || "0") > 0 ? `$${checkoutReceivedUsd} / $${checkoutAmountUsd} received` : null : balanceSubtitle;
|
|
20240
20466
|
const usePercentageChips = quickSelectMode === "percentage" && maxUsdAmount > 0;
|
|
20241
20467
|
const chipButtonClass = "uf-flex-1 uf-min-w-0 uf-basis-0 uf-py-2 uf-px-1 uf-rounded-lg uf-text-sm uf-font-medium uf-transition-colors hover:uf-opacity-80 uf-whitespace-nowrap";
|
|
20242
20468
|
return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
|
|
@@ -20250,14 +20476,27 @@ function EnterAmountView({
|
|
|
20250
20476
|
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
20251
20477
|
DepositHeader,
|
|
20252
20478
|
{
|
|
20253
|
-
title:
|
|
20254
|
-
subtitle:
|
|
20479
|
+
title: headerTitle,
|
|
20480
|
+
subtitle: headerSubtitle ?? void 0,
|
|
20255
20481
|
showBack: true,
|
|
20256
20482
|
onBack,
|
|
20257
20483
|
onClose
|
|
20258
20484
|
}
|
|
20259
20485
|
),
|
|
20260
|
-
walletInfoProp ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "uf-flex uf-w-full uf-justify-center uf-mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime63.
|
|
20486
|
+
walletInfoProp ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "uf-flex uf-w-full uf-justify-center uf-mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-gap-1", children: [
|
|
20487
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)(WalletWithNetworkBadge, { walletInfo: walletInfoProp }),
|
|
20488
|
+
isCheckout && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
20489
|
+
"span",
|
|
20490
|
+
{
|
|
20491
|
+
className: "uf-text-xs",
|
|
20492
|
+
style: {
|
|
20493
|
+
color: colors2.foregroundMuted,
|
|
20494
|
+
fontFamily: fonts.regular
|
|
20495
|
+
},
|
|
20496
|
+
children: balanceSubtitle
|
|
20497
|
+
}
|
|
20498
|
+
)
|
|
20499
|
+
] }) }) : null,
|
|
20261
20500
|
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "uf-flex uf-min-h-0 uf-flex-1 uf-flex-col", children: [
|
|
20262
20501
|
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "uf-min-h-0 uf-flex-1", children: [
|
|
20263
20502
|
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "uf-text-center uf-py-8", children: [
|
|
@@ -20280,7 +20519,9 @@ function EnterAmountView({
|
|
|
20280
20519
|
inputMode: "decimal",
|
|
20281
20520
|
placeholder: "0",
|
|
20282
20521
|
value: amountUsd,
|
|
20522
|
+
readOnly: isCheckout,
|
|
20283
20523
|
onChange: (e) => {
|
|
20524
|
+
if (isCheckout) return;
|
|
20284
20525
|
const value = e.target.value;
|
|
20285
20526
|
if (value === "" || /^\d*\.?\d*$/.test(value)) {
|
|
20286
20527
|
const decimalIndex = value.indexOf(".");
|
|
@@ -20291,7 +20532,7 @@ function EnterAmountView({
|
|
|
20291
20532
|
onAmountChange(value);
|
|
20292
20533
|
}
|
|
20293
20534
|
},
|
|
20294
|
-
className:
|
|
20535
|
+
className: `uf-bg-transparent uf-outline-none uf-text-center uf-font-normal uf-w-auto uf-min-w-[60px] ${isCheckout ? "uf-cursor-default" : ""}`,
|
|
20295
20536
|
style: {
|
|
20296
20537
|
fontSize: `${Math.max(3.75 - (amountUsd || "0").length * 0.15, 2)}rem`,
|
|
20297
20538
|
color: components.input.textColor,
|
|
@@ -20313,7 +20554,7 @@ function EnterAmountView({
|
|
|
20313
20554
|
}
|
|
20314
20555
|
)
|
|
20315
20556
|
] }),
|
|
20316
|
-
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "uf-mb-4 uf-flex uf-w-full uf-min-w-0 uf-flex-nowrap uf-gap-1.5 uf-overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: usePercentageChips ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
|
|
20557
|
+
!isCheckout && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "uf-mb-4 uf-flex uf-w-full uf-min-w-0 uf-flex-nowrap uf-gap-1.5 uf-overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: usePercentageChips ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
|
|
20317
20558
|
PERCENT_QUICK_AMOUNTS.map((pct) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
|
|
20318
20559
|
"button",
|
|
20319
20560
|
{
|
|
@@ -20382,7 +20623,46 @@ function EnterAmountView({
|
|
|
20382
20623
|
}
|
|
20383
20624
|
)
|
|
20384
20625
|
] }) }),
|
|
20385
|
-
tokenChainDetails && tokenChainDetails.minimum_deposit_amount_usd > 0 && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
|
|
20626
|
+
tokenChainDetails && tokenChainDetails.minimum_deposit_amount_usd > 0 && (isCheckout && checkoutAmountUsd && inputUsdNum > parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0") + 5e-3 ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
|
|
20627
|
+
"div",
|
|
20628
|
+
{
|
|
20629
|
+
className: "uf-rounded-lg uf-px-3 uf-py-2 uf-mb-3 uf-text-center",
|
|
20630
|
+
style: {
|
|
20631
|
+
backgroundColor: colors2.warning + "15",
|
|
20632
|
+
border: `1px solid ${colors2.warning}30`,
|
|
20633
|
+
borderRadius: components.card.borderRadius,
|
|
20634
|
+
animation: "uf-fadeSlideIn 0.4s ease-out"
|
|
20635
|
+
},
|
|
20636
|
+
children: [
|
|
20637
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
|
|
20638
|
+
"div",
|
|
20639
|
+
{
|
|
20640
|
+
className: "uf-text-xs uf-font-medium",
|
|
20641
|
+
style: { color: colors2.warning, fontFamily: fonts.medium },
|
|
20642
|
+
children: [
|
|
20643
|
+
"Minimum for ",
|
|
20644
|
+
selectedToken.symbol,
|
|
20645
|
+
" on ",
|
|
20646
|
+
selectedToken.chain_name,
|
|
20647
|
+
" is $",
|
|
20648
|
+
tokenChainDetails.minimum_deposit_amount_usd.toFixed(2)
|
|
20649
|
+
]
|
|
20650
|
+
}
|
|
20651
|
+
),
|
|
20652
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
|
|
20653
|
+
"div",
|
|
20654
|
+
{
|
|
20655
|
+
className: "uf-text-xs uf-mt-0.5",
|
|
20656
|
+
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
20657
|
+
children: [
|
|
20658
|
+
"Amount adjusted from remaining $",
|
|
20659
|
+
(parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0")).toFixed(2)
|
|
20660
|
+
]
|
|
20661
|
+
}
|
|
20662
|
+
)
|
|
20663
|
+
]
|
|
20664
|
+
}
|
|
20665
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
|
|
20386
20666
|
"div",
|
|
20387
20667
|
{
|
|
20388
20668
|
className: "uf-text-center uf-text-xs uf-mb-3",
|
|
@@ -20392,7 +20672,7 @@ function EnterAmountView({
|
|
|
20392
20672
|
tokenChainDetails.minimum_deposit_amount_usd.toFixed(2)
|
|
20393
20673
|
]
|
|
20394
20674
|
}
|
|
20395
|
-
),
|
|
20675
|
+
)),
|
|
20396
20676
|
inputUsdNum > 0 && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_jsx_runtime63.Fragment, { children: inputUsdNum > maxUsdAmount ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
20397
20677
|
"div",
|
|
20398
20678
|
{
|
|
@@ -20407,7 +20687,44 @@ function EnterAmountView({
|
|
|
20407
20687
|
style: { color: colors2.error },
|
|
20408
20688
|
children: error
|
|
20409
20689
|
}
|
|
20410
|
-
) })
|
|
20690
|
+
) }),
|
|
20691
|
+
isCheckout && selectedToken.icon_url && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2 uf-py-2", children: [
|
|
20692
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "uf-relative", children: [
|
|
20693
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
20694
|
+
"img",
|
|
20695
|
+
{
|
|
20696
|
+
src: selectedToken.icon_url,
|
|
20697
|
+
alt: selectedToken.symbol,
|
|
20698
|
+
width: 20,
|
|
20699
|
+
height: 20,
|
|
20700
|
+
className: "uf-w-5 uf-h-5 uf-rounded-full"
|
|
20701
|
+
}
|
|
20702
|
+
),
|
|
20703
|
+
selectedToken.chain_icon_url && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
20704
|
+
"img",
|
|
20705
|
+
{
|
|
20706
|
+
src: selectedToken.chain_icon_url,
|
|
20707
|
+
alt: selectedToken.chain_name,
|
|
20708
|
+
width: 10,
|
|
20709
|
+
height: 10,
|
|
20710
|
+
className: "uf-w-2.5 uf-h-2.5 uf-rounded-full uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-border",
|
|
20711
|
+
style: { borderColor: colors2.background }
|
|
20712
|
+
}
|
|
20713
|
+
)
|
|
20714
|
+
] }),
|
|
20715
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
|
|
20716
|
+
"span",
|
|
20717
|
+
{
|
|
20718
|
+
className: "uf-text-xs",
|
|
20719
|
+
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
20720
|
+
children: [
|
|
20721
|
+
selectedToken.symbol,
|
|
20722
|
+
" on ",
|
|
20723
|
+
selectedToken.chain_name
|
|
20724
|
+
]
|
|
20725
|
+
}
|
|
20726
|
+
)
|
|
20727
|
+
] })
|
|
20411
20728
|
] }),
|
|
20412
20729
|
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "uf-shrink-0 uf-pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
20413
20730
|
"button",
|
|
@@ -20431,6 +20748,18 @@ function EnterAmountView({
|
|
|
20431
20748
|
}
|
|
20432
20749
|
);
|
|
20433
20750
|
}
|
|
20751
|
+
var WALLET_ICONS2 = {
|
|
20752
|
+
metamask: MetamaskIcon,
|
|
20753
|
+
phantom: PhantomIcon,
|
|
20754
|
+
coinbase: CoinbaseIcon,
|
|
20755
|
+
trust: TrustIcon,
|
|
20756
|
+
rainbow: RainbowIcon,
|
|
20757
|
+
rabby: RabbyIcon,
|
|
20758
|
+
okx: OkxIcon,
|
|
20759
|
+
solflare: SolflareIcon,
|
|
20760
|
+
backpack: BackpackIcon,
|
|
20761
|
+
glow: GlowIcon
|
|
20762
|
+
};
|
|
20434
20763
|
function ReviewView({
|
|
20435
20764
|
walletInfo,
|
|
20436
20765
|
recipientAddress,
|
|
@@ -20465,30 +20794,17 @@ function ReviewView({
|
|
|
20465
20794
|
),
|
|
20466
20795
|
/* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "uf-flex uf-min-h-0 uf-flex-1 uf-flex-col", children: [
|
|
20467
20796
|
/* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "uf-min-h-0 uf-flex-1 uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: [
|
|
20468
|
-
/* @__PURE__ */ (0, import_jsx_runtime64.
|
|
20469
|
-
|
|
20470
|
-
|
|
20471
|
-
|
|
20472
|
-
|
|
20473
|
-
|
|
20474
|
-
|
|
20475
|
-
|
|
20476
|
-
|
|
20477
|
-
|
|
20478
|
-
|
|
20479
|
-
),
|
|
20480
|
-
formattedTokenAmount && /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
|
|
20481
|
-
"div",
|
|
20482
|
-
{
|
|
20483
|
-
className: "uf-text-sm uf-mt-2",
|
|
20484
|
-
style: { color: colors2.foregroundMuted },
|
|
20485
|
-
children: [
|
|
20486
|
-
"\u2248 ",
|
|
20487
|
-
formattedTokenAmount
|
|
20488
|
-
]
|
|
20489
|
-
}
|
|
20490
|
-
)
|
|
20491
|
-
] }),
|
|
20797
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "uf-text-center", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
|
|
20798
|
+
"div",
|
|
20799
|
+
{
|
|
20800
|
+
className: "uf-text-4xl uf-font-medium",
|
|
20801
|
+
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
20802
|
+
children: [
|
|
20803
|
+
"$",
|
|
20804
|
+
amountUsd || "0"
|
|
20805
|
+
]
|
|
20806
|
+
}
|
|
20807
|
+
) }),
|
|
20492
20808
|
/* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
|
|
20493
20809
|
"div",
|
|
20494
20810
|
{
|
|
@@ -20505,29 +20821,48 @@ function ReviewView({
|
|
|
20505
20821
|
{
|
|
20506
20822
|
className: "uf-text-sm",
|
|
20507
20823
|
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
20508
|
-
children: "
|
|
20824
|
+
children: "From"
|
|
20509
20825
|
}
|
|
20510
20826
|
),
|
|
20511
20827
|
/* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
20512
|
-
|
|
20513
|
-
|
|
20828
|
+
WALLET_ICONS2[walletInfo.icon] && (() => {
|
|
20829
|
+
const Icon22 = WALLET_ICONS2[walletInfo.icon];
|
|
20830
|
+
return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "uf-w-5 uf-h-5 uf-rounded-full uf-overflow-hidden uf-flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Icon22, { size: 20, variant: "color" }) });
|
|
20831
|
+
})(),
|
|
20832
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
|
|
20833
|
+
"span",
|
|
20514
20834
|
{
|
|
20515
|
-
|
|
20516
|
-
|
|
20517
|
-
|
|
20518
|
-
}
|
|
20835
|
+
className: "uf-text-sm uf-font-medium",
|
|
20836
|
+
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
20837
|
+
children: walletInfo.name
|
|
20838
|
+
}
|
|
20839
|
+
)
|
|
20840
|
+
] })
|
|
20841
|
+
] }),
|
|
20842
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "uf-flex uf-justify-between uf-items-center", children: [
|
|
20843
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
|
|
20844
|
+
"span",
|
|
20845
|
+
{
|
|
20846
|
+
className: "uf-text-sm",
|
|
20847
|
+
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
20848
|
+
children: "You send"
|
|
20849
|
+
}
|
|
20850
|
+
),
|
|
20851
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
20852
|
+
getIconUrl2(selectedToken.icon_url, assetCdnUrl) && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
|
|
20853
|
+
"img",
|
|
20854
|
+
{
|
|
20855
|
+
src: getIconUrl2(selectedToken.icon_url, assetCdnUrl),
|
|
20856
|
+
alt: selectedToken.symbol,
|
|
20857
|
+
className: "uf-w-5 uf-h-5 uf-rounded-full"
|
|
20858
|
+
}
|
|
20519
20859
|
),
|
|
20520
|
-
/* @__PURE__ */ (0, import_jsx_runtime64.
|
|
20860
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
|
|
20521
20861
|
"span",
|
|
20522
20862
|
{
|
|
20523
20863
|
className: "uf-text-sm uf-font-medium",
|
|
20524
20864
|
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
20525
|
-
children:
|
|
20526
|
-
walletInfo.name,
|
|
20527
|
-
" (",
|
|
20528
|
-
truncateAddress2(walletInfo.address),
|
|
20529
|
-
")"
|
|
20530
|
-
]
|
|
20865
|
+
children: formattedTokenAmount || `$${amountUsd}`
|
|
20531
20866
|
}
|
|
20532
20867
|
)
|
|
20533
20868
|
] })
|
|
@@ -20690,7 +21025,10 @@ function ReviewView({
|
|
|
20690
21025
|
borderRadius: components.button.borderRadius,
|
|
20691
21026
|
border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
|
|
20692
21027
|
},
|
|
20693
|
-
children: isConfirming ? "
|
|
21028
|
+
children: isConfirming ? /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2", children: [
|
|
21029
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
|
|
21030
|
+
"Confirming..."
|
|
21031
|
+
] }) : "Confirm Order"
|
|
20694
21032
|
}
|
|
20695
21033
|
) })
|
|
20696
21034
|
] })
|
|
@@ -20699,17 +21037,35 @@ function ReviewView({
|
|
|
20699
21037
|
}
|
|
20700
21038
|
);
|
|
20701
21039
|
}
|
|
21040
|
+
var SETTLE_FALLBACK_MS = 15e3;
|
|
20702
21041
|
function ConfirmingView({
|
|
20703
21042
|
isConfirming,
|
|
20704
21043
|
onClose,
|
|
20705
21044
|
executions = [],
|
|
20706
|
-
isPolling = false
|
|
21045
|
+
isPolling = false,
|
|
21046
|
+
onNewDeposit,
|
|
21047
|
+
onDone,
|
|
21048
|
+
paymentIntentStatus,
|
|
21049
|
+
amountReceivedUsd,
|
|
21050
|
+
amountReceivedUsdAtSubmission
|
|
20707
21051
|
}) {
|
|
20708
|
-
const { colors: colors2, fonts } = useTheme();
|
|
21052
|
+
const { colors: colors2, fonts, components } = useTheme();
|
|
20709
21053
|
const [containerEl, setContainerEl] = (0, import_react25.useState)(null);
|
|
20710
21054
|
const containerCallbackRef = (0, import_react25.useCallback)((el) => {
|
|
20711
21055
|
setContainerEl(el);
|
|
20712
21056
|
}, []);
|
|
21057
|
+
const [fallbackSettled, setFallbackSettled] = (0, import_react25.useState)(false);
|
|
21058
|
+
const hasExecution = executions.length > 0;
|
|
21059
|
+
const isCheckoutMode = paymentIntentStatus != null;
|
|
21060
|
+
const isPaymentComplete = paymentIntentStatus === "succeeded";
|
|
21061
|
+
const amountChanged = amountReceivedUsdAtSubmission != null && amountReceivedUsd != null && amountReceivedUsd !== amountReceivedUsdAtSubmission;
|
|
21062
|
+
const piSettled = !isCheckoutMode || isPaymentComplete || amountChanged || fallbackSettled;
|
|
21063
|
+
(0, import_react25.useEffect)(() => {
|
|
21064
|
+
if (!hasExecution || piSettled) return;
|
|
21065
|
+
const timeout = setTimeout(() => setFallbackSettled(true), SETTLE_FALLBACK_MS);
|
|
21066
|
+
return () => clearTimeout(timeout);
|
|
21067
|
+
}, [hasExecution, piSettled]);
|
|
21068
|
+
const showButtons = hasExecution && piSettled;
|
|
20713
21069
|
return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(PortalContainerProvider, { value: containerEl, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
20714
21070
|
"div",
|
|
20715
21071
|
{
|
|
@@ -20722,8 +21078,8 @@ function ConfirmingView({
|
|
|
20722
21078
|
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
20723
21079
|
DepositHeader,
|
|
20724
21080
|
{
|
|
20725
|
-
title: isConfirming ? "Confirming..." : "Processing",
|
|
20726
|
-
onClose
|
|
21081
|
+
title: isConfirming ? "Confirming..." : hasExecution && isPaymentComplete ? "Payment Complete" : hasExecution ? "Deposit Received" : "Processing",
|
|
21082
|
+
onClose: isPaymentComplete && onDone ? onDone : onClose
|
|
20727
21083
|
}
|
|
20728
21084
|
),
|
|
20729
21085
|
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "uf-flex uf-flex-1 uf-flex-col uf-items-center uf-justify-center uf-py-8", children: isConfirming ? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
|
|
@@ -20750,11 +21106,70 @@ function ConfirmingView({
|
|
|
20750
21106
|
children: "Please confirm the transaction in your wallet"
|
|
20751
21107
|
}
|
|
20752
21108
|
)
|
|
20753
|
-
] }) : /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
|
|
21109
|
+
] }) : hasExecution ? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
|
|
20754
21110
|
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
20755
21111
|
CircleCheck,
|
|
20756
21112
|
{
|
|
20757
21113
|
className: "uf-w-12 uf-h-12 uf-mb-4",
|
|
21114
|
+
style: { color: "rgb(34, 197, 94)" }
|
|
21115
|
+
}
|
|
21116
|
+
),
|
|
21117
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
21118
|
+
"div",
|
|
21119
|
+
{
|
|
21120
|
+
className: "uf-text-lg uf-font-medium",
|
|
21121
|
+
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
21122
|
+
children: isPaymentComplete ? "Payment Complete" : "Deposit Received"
|
|
21123
|
+
}
|
|
21124
|
+
),
|
|
21125
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
21126
|
+
"div",
|
|
21127
|
+
{
|
|
21128
|
+
className: "uf-text-sm uf-mt-2 uf-text-center uf-px-6",
|
|
21129
|
+
style: { color: colors2.foregroundMuted },
|
|
21130
|
+
children: isPaymentComplete ? "Your payment has been fulfilled." : showButtons ? "Your deposit is being processed." : "Checking payment status..."
|
|
21131
|
+
}
|
|
21132
|
+
),
|
|
21133
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "uf-mt-6 uf-flex uf-flex-col uf-items-center uf-gap-3", children: !showButtons ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
21134
|
+
LoaderCircle,
|
|
21135
|
+
{
|
|
21136
|
+
className: "uf-w-5 uf-h-5 uf-animate-spin",
|
|
21137
|
+
style: { color: colors2.foregroundMuted }
|
|
21138
|
+
}
|
|
21139
|
+
) : isPaymentComplete && onDone ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
21140
|
+
"button",
|
|
21141
|
+
{
|
|
21142
|
+
onClick: onDone,
|
|
21143
|
+
className: "uf-w-full uf-py-3 uf-px-8 uf-text-sm uf-font-medium uf-transition-opacity hover:uf-opacity-80",
|
|
21144
|
+
style: {
|
|
21145
|
+
backgroundColor: colors2.primary,
|
|
21146
|
+
color: colors2.primaryForeground,
|
|
21147
|
+
fontFamily: fonts.medium,
|
|
21148
|
+
borderRadius: components.button.borderRadius
|
|
21149
|
+
},
|
|
21150
|
+
children: "Done"
|
|
21151
|
+
}
|
|
21152
|
+
) : onNewDeposit ? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
21153
|
+
"button",
|
|
21154
|
+
{
|
|
21155
|
+
onClick: onNewDeposit,
|
|
21156
|
+
className: "uf-flex uf-items-center uf-gap-2 uf-px-5 uf-py-2.5 uf-rounded-lg uf-text-sm uf-font-medium uf-transition-opacity hover:uf-opacity-80",
|
|
21157
|
+
style: {
|
|
21158
|
+
backgroundColor: colors2.primary,
|
|
21159
|
+
color: colors2.primaryForeground,
|
|
21160
|
+
fontFamily: fonts.medium
|
|
21161
|
+
},
|
|
21162
|
+
children: [
|
|
21163
|
+
"Make another deposit",
|
|
21164
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)(ArrowRight, { className: "uf-w-4 uf-h-4" })
|
|
21165
|
+
]
|
|
21166
|
+
}
|
|
21167
|
+
) : null })
|
|
21168
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
|
|
21169
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
21170
|
+
LoaderCircle,
|
|
21171
|
+
{
|
|
21172
|
+
className: "uf-w-12 uf-h-12 uf-animate-spin uf-mb-4",
|
|
20758
21173
|
style: { color: colors2.primary }
|
|
20759
21174
|
}
|
|
20760
21175
|
),
|
|
@@ -20771,7 +21186,7 @@ function ConfirmingView({
|
|
|
20771
21186
|
{
|
|
20772
21187
|
className: "uf-text-sm uf-mt-2 uf-text-center uf-px-6",
|
|
20773
21188
|
style: { color: colors2.foregroundMuted },
|
|
20774
|
-
children: "
|
|
21189
|
+
children: "Waiting for your deposit to be detected..."
|
|
20775
21190
|
}
|
|
20776
21191
|
)
|
|
20777
21192
|
] }) }),
|
|
@@ -20795,6 +21210,7 @@ function BrowserWalletModal({
|
|
|
20795
21210
|
depositWallet,
|
|
20796
21211
|
userId,
|
|
20797
21212
|
publishableKey,
|
|
21213
|
+
clientSecret,
|
|
20798
21214
|
assetCdnUrl,
|
|
20799
21215
|
projectName,
|
|
20800
21216
|
theme = "dark",
|
|
@@ -20803,7 +21219,13 @@ function BrowserWalletModal({
|
|
|
20803
21219
|
onDepositSuccess,
|
|
20804
21220
|
onDepositError,
|
|
20805
21221
|
amountQuickSelect = "percentage",
|
|
20806
|
-
onWalletDisconnect
|
|
21222
|
+
onWalletDisconnect,
|
|
21223
|
+
prefillAmountUsd,
|
|
21224
|
+
checkoutAmountUsd,
|
|
21225
|
+
checkoutReceivedUsd,
|
|
21226
|
+
onNewDeposit,
|
|
21227
|
+
onDone,
|
|
21228
|
+
paymentIntentStatus
|
|
20807
21229
|
}) {
|
|
20808
21230
|
const { colors: colors2, fonts, components } = useTheme();
|
|
20809
21231
|
const [step, setStep] = React262.useState("select-token");
|
|
@@ -20821,6 +21243,7 @@ function BrowserWalletModal({
|
|
|
20821
21243
|
const [tokenChainDetails, setTokenChainDetails] = React262.useState(null);
|
|
20822
21244
|
const [loadingTokenDetails, setLoadingTokenDetails] = React262.useState(false);
|
|
20823
21245
|
const [showTransactionDetails, setShowTransactionDetails] = React262.useState(false);
|
|
21246
|
+
const [receivedUsdAtSubmission, setReceivedUsdAtSubmission] = React262.useState(null);
|
|
20824
21247
|
const themeClass = theme === "dark" ? "uf-dark" : "";
|
|
20825
21248
|
const chainType = depositWallet.chain_type;
|
|
20826
21249
|
const recipientAddress = depositWallet.address;
|
|
@@ -20828,15 +21251,19 @@ function BrowserWalletModal({
|
|
|
20828
21251
|
const { executions: depositExecutions, isPolling } = useDepositPolling({
|
|
20829
21252
|
userId,
|
|
20830
21253
|
publishableKey,
|
|
21254
|
+
clientSecret,
|
|
20831
21255
|
enabled: open && hasSignedTransaction,
|
|
20832
21256
|
onDepositSuccess,
|
|
20833
21257
|
onDepositError
|
|
20834
21258
|
});
|
|
21259
|
+
const prevOpenRef = React262.useRef(false);
|
|
20835
21260
|
React262.useEffect(() => {
|
|
20836
|
-
|
|
21261
|
+
const wasOpen = prevOpenRef.current;
|
|
21262
|
+
prevOpenRef.current = open;
|
|
21263
|
+
if (open && !wasOpen) {
|
|
20837
21264
|
setStep("select-token");
|
|
20838
21265
|
setSelectedBalance(null);
|
|
20839
|
-
setAmountUsd("");
|
|
21266
|
+
setAmountUsd(prefillAmountUsd ?? "");
|
|
20840
21267
|
setError(null);
|
|
20841
21268
|
setIsConfirming(false);
|
|
20842
21269
|
setTokenChainDetails(null);
|
|
@@ -20844,7 +21271,15 @@ function BrowserWalletModal({
|
|
|
20844
21271
|
setHasSignedTransaction(false);
|
|
20845
21272
|
setIsDisconnectingWallet(false);
|
|
20846
21273
|
}
|
|
20847
|
-
}, [open]);
|
|
21274
|
+
}, [open, prefillAmountUsd]);
|
|
21275
|
+
React262.useEffect(() => {
|
|
21276
|
+
if (!prefillAmountUsd || !tokenChainDetails || step !== "input-amount") return;
|
|
21277
|
+
const minDeposit = tokenChainDetails.minimum_deposit_amount_usd || 0;
|
|
21278
|
+
const currentAmount = parseFloat(amountUsd) || 0;
|
|
21279
|
+
if (currentAmount > 0 && currentAmount < minDeposit) {
|
|
21280
|
+
setAmountUsd(minDeposit.toFixed(2));
|
|
21281
|
+
}
|
|
21282
|
+
}, [tokenChainDetails, step, prefillAmountUsd]);
|
|
20848
21283
|
React262.useEffect(() => {
|
|
20849
21284
|
if (step === "review") {
|
|
20850
21285
|
setShowTransactionDetails(false);
|
|
@@ -20962,7 +21397,7 @@ function BrowserWalletModal({
|
|
|
20962
21397
|
setError(null);
|
|
20963
21398
|
if (step === "input-amount") {
|
|
20964
21399
|
setStep("select-token");
|
|
20965
|
-
setAmountUsd("");
|
|
21400
|
+
setAmountUsd(prefillAmountUsd ?? "");
|
|
20966
21401
|
setTokenChainDetails(null);
|
|
20967
21402
|
} else if (step === "review") {
|
|
20968
21403
|
setStep("input-amount");
|
|
@@ -21048,7 +21483,6 @@ function BrowserWalletModal({
|
|
|
21048
21483
|
}
|
|
21049
21484
|
}
|
|
21050
21485
|
setIsConfirming(true);
|
|
21051
|
-
setStep("confirming");
|
|
21052
21486
|
setError(null);
|
|
21053
21487
|
try {
|
|
21054
21488
|
let txHash;
|
|
@@ -21066,16 +21500,17 @@ function BrowserWalletModal({
|
|
|
21066
21500
|
} else {
|
|
21067
21501
|
txHash = await sendEthereumTransaction(token, tokenAmount.toString());
|
|
21068
21502
|
}
|
|
21503
|
+
setReceivedUsdAtSubmission(checkoutReceivedUsd ?? "0");
|
|
21069
21504
|
setHasSignedTransaction(true);
|
|
21070
|
-
onSuccess?.(txHash);
|
|
21071
21505
|
setIsConfirming(false);
|
|
21506
|
+
setStep("confirming");
|
|
21507
|
+
onSuccess?.(txHash);
|
|
21072
21508
|
} catch (err) {
|
|
21073
21509
|
console.error("[BrowserWalletModal] Transaction error:", err);
|
|
21074
21510
|
const errorMessage = err instanceof Error ? err.message : "Transaction failed";
|
|
21075
21511
|
setError(errorMessage);
|
|
21076
21512
|
onError?.(err instanceof Error ? err : new Error(errorMessage));
|
|
21077
21513
|
setIsConfirming(false);
|
|
21078
|
-
setStep("review");
|
|
21079
21514
|
}
|
|
21080
21515
|
};
|
|
21081
21516
|
const sendEthereumTransaction = async (token, amountStr) => {
|
|
@@ -21324,7 +21759,9 @@ function BrowserWalletModal({
|
|
|
21324
21759
|
onBack: handleClose,
|
|
21325
21760
|
onClose: handleFullClose,
|
|
21326
21761
|
onDisconnectWallet: onWalletDisconnect ? () => void handleDisconnectFromSelectToken() : void 0,
|
|
21327
|
-
isDisconnectingWallet
|
|
21762
|
+
isDisconnectingWallet,
|
|
21763
|
+
checkoutAmountUsd,
|
|
21764
|
+
checkoutReceivedUsd
|
|
21328
21765
|
}
|
|
21329
21766
|
),
|
|
21330
21767
|
step === "input-amount" && selectedToken && selectedBalance && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
@@ -21345,7 +21782,9 @@ function BrowserWalletModal({
|
|
|
21345
21782
|
onReview: handleReview,
|
|
21346
21783
|
onBack: handleBack,
|
|
21347
21784
|
onClose: handleFullClose,
|
|
21348
|
-
quickSelectMode: amountQuickSelect
|
|
21785
|
+
quickSelectMode: amountQuickSelect,
|
|
21786
|
+
checkoutAmountUsd,
|
|
21787
|
+
checkoutReceivedUsd
|
|
21349
21788
|
}
|
|
21350
21789
|
),
|
|
21351
21790
|
step === "review" && selectedToken && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
@@ -21374,7 +21813,12 @@ function BrowserWalletModal({
|
|
|
21374
21813
|
isConfirming,
|
|
21375
21814
|
onClose: handleFullClose,
|
|
21376
21815
|
executions: depositExecutions,
|
|
21377
|
-
isPolling
|
|
21816
|
+
isPolling,
|
|
21817
|
+
onNewDeposit,
|
|
21818
|
+
onDone,
|
|
21819
|
+
paymentIntentStatus,
|
|
21820
|
+
amountReceivedUsd: checkoutReceivedUsd,
|
|
21821
|
+
amountReceivedUsdAtSubmission: receivedUsdAtSubmission
|
|
21378
21822
|
}
|
|
21379
21823
|
)
|
|
21380
21824
|
] })
|
|
@@ -21383,7 +21827,7 @@ function BrowserWalletModal({
|
|
|
21383
21827
|
}
|
|
21384
21828
|
) });
|
|
21385
21829
|
}
|
|
21386
|
-
var
|
|
21830
|
+
var WALLET_ICONS3 = {
|
|
21387
21831
|
metamask: MetamaskIcon,
|
|
21388
21832
|
phantom: PhantomIcon,
|
|
21389
21833
|
coinbase: CoinbaseIcon,
|
|
@@ -21822,10 +22266,10 @@ function WalletSelectionModal({
|
|
|
21822
22266
|
},
|
|
21823
22267
|
children: [
|
|
21824
22268
|
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
|
|
21825
|
-
|
|
22269
|
+
WALLET_ICONS3[wallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
21826
22270
|
WalletIconWithNetwork,
|
|
21827
22271
|
{
|
|
21828
|
-
WalletIcon:
|
|
22272
|
+
WalletIcon: WALLET_ICONS3[wallet.id],
|
|
21829
22273
|
networks: wallet.networks,
|
|
21830
22274
|
size: 40,
|
|
21831
22275
|
className: "uf-rounded-lg"
|
|
@@ -21896,10 +22340,10 @@ function WalletSelectionModal({
|
|
|
21896
22340
|
style: { minHeight: WALLET_STEP_BODY_MIN_HEIGHT },
|
|
21897
22341
|
children: [
|
|
21898
22342
|
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-pb-4 uf-shrink-0", children: [
|
|
21899
|
-
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "uf-mb-2", children:
|
|
22343
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "uf-mb-2", children: WALLET_ICONS3[selectedWallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
21900
22344
|
WalletIconWithNetwork,
|
|
21901
22345
|
{
|
|
21902
|
-
WalletIcon:
|
|
22346
|
+
WalletIcon: WALLET_ICONS3[selectedWallet.id],
|
|
21903
22347
|
networks: selectedWallet.networks,
|
|
21904
22348
|
size: 48,
|
|
21905
22349
|
className: "uf-rounded-lg"
|
|
@@ -22698,137 +23142,795 @@ function DepositModal({
|
|
|
22698
23142
|
}
|
|
22699
23143
|
) });
|
|
22700
23144
|
}
|
|
22701
|
-
function
|
|
23145
|
+
function usePaymentIntent(params) {
|
|
23146
|
+
const {
|
|
23147
|
+
clientSecret,
|
|
23148
|
+
publishableKey,
|
|
23149
|
+
enabled = true,
|
|
23150
|
+
pollingInterval = 5e3
|
|
23151
|
+
} = params;
|
|
22702
23152
|
return (0, import_react_query11.useQuery)({
|
|
22703
|
-
queryKey: ["unifold", "
|
|
22704
|
-
queryFn: () =>
|
|
22705
|
-
|
|
22706
|
-
|
|
22707
|
-
|
|
22708
|
-
refetchOnWindowFocus:
|
|
22709
|
-
|
|
23153
|
+
queryKey: ["unifold", "paymentIntent", clientSecret, publishableKey],
|
|
23154
|
+
queryFn: () => retrievePaymentIntent(clientSecret, publishableKey),
|
|
23155
|
+
enabled: enabled && !!clientSecret && !!publishableKey,
|
|
23156
|
+
staleTime: 0,
|
|
23157
|
+
refetchInterval: pollingInterval || false,
|
|
23158
|
+
refetchOnWindowFocus: true,
|
|
23159
|
+
retry: 3,
|
|
23160
|
+
retryDelay: (attempt) => Math.min(1e3 * 2 ** attempt, 1e4)
|
|
22710
23161
|
});
|
|
22711
23162
|
}
|
|
22712
|
-
function
|
|
23163
|
+
function useDepositQuote(params) {
|
|
22713
23164
|
const {
|
|
23165
|
+
publishableKey,
|
|
22714
23166
|
sourceChainType,
|
|
22715
23167
|
sourceChainId,
|
|
22716
23168
|
sourceTokenAddress,
|
|
22717
|
-
|
|
22718
|
-
|
|
23169
|
+
destinationAmount,
|
|
23170
|
+
destinationChainType,
|
|
23171
|
+
destinationChainId,
|
|
23172
|
+
destinationTokenAddress,
|
|
22719
23173
|
enabled = true
|
|
22720
23174
|
} = params;
|
|
22721
|
-
const
|
|
23175
|
+
const request = {
|
|
23176
|
+
source_chain_type: sourceChainType,
|
|
23177
|
+
source_chain_id: sourceChainId,
|
|
23178
|
+
source_token_address: sourceTokenAddress,
|
|
23179
|
+
destination_amount: destinationAmount,
|
|
23180
|
+
destination_chain_type: destinationChainType,
|
|
23181
|
+
destination_chain_id: destinationChainId,
|
|
23182
|
+
destination_token_address: destinationTokenAddress
|
|
23183
|
+
};
|
|
22722
23184
|
return (0, import_react_query12.useQuery)({
|
|
22723
23185
|
queryKey: [
|
|
22724
23186
|
"unifold",
|
|
22725
|
-
"
|
|
22726
|
-
sourceChainType
|
|
22727
|
-
sourceChainId
|
|
22728
|
-
sourceTokenAddress
|
|
23187
|
+
"depositQuote",
|
|
23188
|
+
sourceChainType,
|
|
23189
|
+
sourceChainId,
|
|
23190
|
+
sourceTokenAddress,
|
|
23191
|
+
destinationAmount,
|
|
23192
|
+
destinationChainType,
|
|
23193
|
+
destinationChainId,
|
|
23194
|
+
destinationTokenAddress,
|
|
22729
23195
|
publishableKey
|
|
22730
23196
|
],
|
|
22731
|
-
queryFn:
|
|
22732
|
-
|
|
22733
|
-
|
|
22734
|
-
|
|
22735
|
-
|
|
22736
|
-
|
|
22737
|
-
|
|
22738
|
-
(token) => token.chains.some((chain) => {
|
|
22739
|
-
const match = chain.chain_type === sourceChainType && chain.chain_id === sourceChainId && chain.token_address.toLowerCase() === sourceTokenAddress.toLowerCase();
|
|
22740
|
-
if (match) {
|
|
22741
|
-
matchedMinUsd = chain.minimum_deposit_amount_usd;
|
|
22742
|
-
matchedProcessingTime = chain.estimated_processing_time;
|
|
22743
|
-
matchedSlippage = chain.max_slippage_percent;
|
|
22744
|
-
matchedPriceImpact = chain.estimated_price_impact_percent;
|
|
22745
|
-
}
|
|
22746
|
-
return match;
|
|
22747
|
-
})
|
|
22748
|
-
);
|
|
22749
|
-
return {
|
|
22750
|
-
isSupported: found,
|
|
22751
|
-
minimumAmountUsd: matchedMinUsd,
|
|
22752
|
-
estimatedProcessingTime: matchedProcessingTime,
|
|
22753
|
-
maxSlippagePercent: matchedSlippage,
|
|
22754
|
-
priceImpactPercent: matchedPriceImpact,
|
|
22755
|
-
errorMessage: found ? null : `${sourceTokenSymbol || "Source token"} is not a supported withdrawal token. Supported tokens include USDC, USDT, and other stablecoins.`
|
|
22756
|
-
};
|
|
22757
|
-
},
|
|
22758
|
-
enabled: enabled && hasParams,
|
|
22759
|
-
staleTime: 1e3 * 60 * 5,
|
|
22760
|
-
gcTime: 1e3 * 60 * 30,
|
|
22761
|
-
refetchOnMount: false,
|
|
22762
|
-
refetchOnWindowFocus: false
|
|
23197
|
+
queryFn: () => getDepositQuote(request, publishableKey),
|
|
23198
|
+
enabled: enabled && !!publishableKey && !!sourceChainType && !!sourceChainId && !!sourceTokenAddress && !!destinationAmount && destinationAmount !== "0" && !!destinationChainType && !!destinationChainId && !!destinationTokenAddress,
|
|
23199
|
+
staleTime: 6e4,
|
|
23200
|
+
gcTime: 5 * 6e4,
|
|
23201
|
+
refetchOnWindowFocus: false,
|
|
23202
|
+
retry: 2,
|
|
23203
|
+
retryDelay: (attempt) => Math.min(1e3 * 2 ** attempt, 5e3)
|
|
22763
23204
|
});
|
|
22764
23205
|
}
|
|
22765
|
-
function
|
|
23206
|
+
function mapDepositAddressesToWallets(depositAddresses, pi) {
|
|
23207
|
+
return depositAddresses.map((da, idx) => ({
|
|
23208
|
+
id: da.id,
|
|
23209
|
+
chain_type: da.chain_type,
|
|
23210
|
+
address_type: da.address_type,
|
|
23211
|
+
address: da.address,
|
|
23212
|
+
destination_chain_type: pi.destination_chain_type,
|
|
23213
|
+
destination_chain_id: pi.destination_chain_id,
|
|
23214
|
+
destination_token_address: pi.destination_token_address,
|
|
23215
|
+
recipient_address: pi.recipient_address,
|
|
23216
|
+
is_primary: idx === 0
|
|
23217
|
+
}));
|
|
23218
|
+
}
|
|
23219
|
+
function SkeletonButton2() {
|
|
23220
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-w-full uf-bg-secondary uf-rounded-xl uf-p-3 uf-flex uf-items-center uf-justify-between uf-animate-pulse", children: [
|
|
23221
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
|
|
23222
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-bg-muted uf-rounded-lg uf-w-9 uf-h-9" }),
|
|
23223
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-space-y-1.5", children: [
|
|
23224
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-h-3.5 uf-w-24 uf-bg-muted uf-rounded" }),
|
|
23225
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-h-3 uf-w-32 uf-bg-muted uf-rounded" })
|
|
23226
|
+
] })
|
|
23227
|
+
] }),
|
|
23228
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ChevronRight, { className: "uf-w-4 uf-h-4 uf-text-muted" }) })
|
|
23229
|
+
] });
|
|
23230
|
+
}
|
|
23231
|
+
function CheckoutModal({
|
|
23232
|
+
open,
|
|
23233
|
+
onOpenChange,
|
|
23234
|
+
clientSecret,
|
|
23235
|
+
publishableKey,
|
|
23236
|
+
modalTitle,
|
|
23237
|
+
enableConnectWallet = false,
|
|
23238
|
+
theme = "dark",
|
|
23239
|
+
onCheckoutSuccess,
|
|
23240
|
+
onCheckoutError
|
|
23241
|
+
}) {
|
|
23242
|
+
const { colors: colors2, fonts, components } = useTheme();
|
|
23243
|
+
const [view, setView] = (0, import_react26.useState)("main");
|
|
23244
|
+
const resetViewTimeoutRef = (0, import_react26.useRef)(
|
|
23245
|
+
null
|
|
23246
|
+
);
|
|
23247
|
+
const [browserWalletModalOpen, setBrowserWalletModalOpen] = (0, import_react26.useState)(false);
|
|
23248
|
+
const [browserWalletInfo, setBrowserWalletInfo] = (0, import_react26.useState)(null);
|
|
23249
|
+
const [walletSelectionModalOpen, setWalletSelectionModalOpen] = (0, import_react26.useState)(false);
|
|
23250
|
+
const [browserWalletChainType, setBrowserWalletChainType] = (0, import_react26.useState)(() => getStoredWalletChainType());
|
|
23251
|
+
const isMobileView = useIsMobileViewport();
|
|
23252
|
+
const [resolvedTheme, setResolvedTheme] = (0, import_react26.useState)(
|
|
23253
|
+
theme === "auto" ? "dark" : theme
|
|
23254
|
+
);
|
|
23255
|
+
(0, import_react26.useEffect)(() => {
|
|
23256
|
+
if (theme === "auto") {
|
|
23257
|
+
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
23258
|
+
setResolvedTheme(mediaQuery.matches ? "dark" : "light");
|
|
23259
|
+
const handler = (e) => {
|
|
23260
|
+
setResolvedTheme(e.matches ? "dark" : "light");
|
|
23261
|
+
};
|
|
23262
|
+
mediaQuery.addEventListener("change", handler);
|
|
23263
|
+
return () => mediaQuery.removeEventListener("change", handler);
|
|
23264
|
+
} else {
|
|
23265
|
+
setResolvedTheme(theme);
|
|
23266
|
+
}
|
|
23267
|
+
}, [theme]);
|
|
23268
|
+
const themeClass = resolvedTheme === "dark" ? "uf-dark" : "";
|
|
22766
23269
|
const {
|
|
22767
|
-
|
|
22768
|
-
|
|
22769
|
-
|
|
22770
|
-
|
|
23270
|
+
data: paymentIntent,
|
|
23271
|
+
isLoading: piLoading,
|
|
23272
|
+
error: piError
|
|
23273
|
+
} = usePaymentIntent({
|
|
23274
|
+
clientSecret,
|
|
22771
23275
|
publishableKey,
|
|
22772
|
-
enabled
|
|
22773
|
-
|
|
22774
|
-
|
|
22775
|
-
|
|
22776
|
-
|
|
22777
|
-
|
|
22778
|
-
|
|
22779
|
-
|
|
22780
|
-
|
|
22781
|
-
|
|
22782
|
-
|
|
22783
|
-
|
|
22784
|
-
|
|
22785
|
-
|
|
22786
|
-
|
|
22787
|
-
|
|
22788
|
-
|
|
22789
|
-
|
|
22790
|
-
|
|
22791
|
-
|
|
23276
|
+
enabled: open && !!clientSecret,
|
|
23277
|
+
pollingInterval: 5e3
|
|
23278
|
+
});
|
|
23279
|
+
const { projectConfig } = useProjectConfig({
|
|
23280
|
+
publishableKey,
|
|
23281
|
+
enabled: open
|
|
23282
|
+
});
|
|
23283
|
+
const prevStatusRef = (0, import_react26.useRef)(null);
|
|
23284
|
+
(0, import_react26.useEffect)(() => {
|
|
23285
|
+
if (!paymentIntent) return;
|
|
23286
|
+
const prev = prevStatusRef.current;
|
|
23287
|
+
prevStatusRef.current = paymentIntent.status;
|
|
23288
|
+
if (prev && prev !== paymentIntent.status && paymentIntent.status === "succeeded") {
|
|
23289
|
+
if (!browserWalletModalOpen) {
|
|
23290
|
+
setView("main");
|
|
23291
|
+
}
|
|
23292
|
+
onCheckoutSuccess?.({
|
|
23293
|
+
paymentIntentId: paymentIntent.id,
|
|
23294
|
+
status: paymentIntent.status
|
|
23295
|
+
});
|
|
23296
|
+
}
|
|
23297
|
+
}, [paymentIntent, onCheckoutSuccess, browserWalletModalOpen]);
|
|
23298
|
+
const wallets = (0, import_react26.useMemo)(() => {
|
|
23299
|
+
if (!paymentIntent) return [];
|
|
23300
|
+
return mapDepositAddressesToWallets(
|
|
23301
|
+
paymentIntent.deposit_addresses,
|
|
23302
|
+
paymentIntent
|
|
23303
|
+
);
|
|
23304
|
+
}, [paymentIntent]);
|
|
23305
|
+
const formatCryptoAmount = (0, import_react26.useMemo)(() => {
|
|
23306
|
+
if (!paymentIntent) return (_) => "";
|
|
23307
|
+
const decimals = paymentIntent.destination_token_decimals ?? 6;
|
|
23308
|
+
const symbol = paymentIntent.currency.toUpperCase();
|
|
23309
|
+
return (baseUnits) => {
|
|
23310
|
+
const num = Number(baseUnits) / 10 ** decimals;
|
|
23311
|
+
const formatted = num % 1 === 0 ? num.toFixed(0) : num.toFixed(2);
|
|
23312
|
+
return `${formatted} ${symbol}`;
|
|
23313
|
+
};
|
|
23314
|
+
}, [paymentIntent]);
|
|
23315
|
+
const remainingAmountUsd = (0, import_react26.useMemo)(() => {
|
|
23316
|
+
if (!paymentIntent) return void 0;
|
|
23317
|
+
const total = parseFloat(paymentIntent.amount_usd);
|
|
23318
|
+
const received = parseFloat(paymentIntent.amount_received_usd);
|
|
23319
|
+
if (isNaN(total) || isNaN(received)) return paymentIntent.amount_usd;
|
|
23320
|
+
const remaining = total - received;
|
|
23321
|
+
return remaining > 0 ? remaining.toFixed(2) : "0.00";
|
|
23322
|
+
}, [paymentIntent]);
|
|
23323
|
+
const remainingCrypto = (0, import_react26.useMemo)(() => {
|
|
23324
|
+
if (!paymentIntent) return void 0;
|
|
23325
|
+
const total = BigInt(paymentIntent.amount);
|
|
23326
|
+
const received = BigInt(paymentIntent.amount_received);
|
|
23327
|
+
const remaining = total - received;
|
|
23328
|
+
return remaining > 0n ? remaining.toString() : "0";
|
|
23329
|
+
}, [paymentIntent]);
|
|
23330
|
+
const [selectedSource, setSelectedSource] = (0, import_react26.useState)(null);
|
|
23331
|
+
const quoteDestinationAmount = (0, import_react26.useMemo)(() => {
|
|
23332
|
+
if (!paymentIntent || !selectedSource) return "0";
|
|
23333
|
+
const remaining = BigInt(paymentIntent.amount) - BigInt(paymentIntent.amount_received);
|
|
23334
|
+
const totalBaseUnits = Number(paymentIntent.amount);
|
|
23335
|
+
const totalUsd = parseFloat(paymentIntent.amount_usd);
|
|
23336
|
+
const baseUnitsPerUsd = totalUsd > 0 ? totalBaseUnits / totalUsd : 0;
|
|
23337
|
+
const minUsd = Math.max(selectedSource.minimumDepositAmountUsd, 3);
|
|
23338
|
+
const minDepositBaseUnits = BigInt(Math.ceil(minUsd * baseUnitsPerUsd));
|
|
23339
|
+
const effective = remaining > minDepositBaseUnits ? remaining : minDepositBaseUnits;
|
|
23340
|
+
return effective > 0n ? effective.toString() : "0";
|
|
23341
|
+
}, [paymentIntent, selectedSource]);
|
|
23342
|
+
const { data: sourceQuote } = useDepositQuote({
|
|
23343
|
+
publishableKey,
|
|
23344
|
+
sourceChainType: selectedSource?.chainType ?? "",
|
|
23345
|
+
sourceChainId: selectedSource?.chainId ?? "",
|
|
23346
|
+
sourceTokenAddress: selectedSource?.tokenAddress ?? "",
|
|
23347
|
+
destinationAmount: quoteDestinationAmount,
|
|
23348
|
+
destinationChainType: paymentIntent?.destination_chain_type ?? "",
|
|
23349
|
+
destinationChainId: paymentIntent?.destination_chain_id ?? "",
|
|
23350
|
+
destinationTokenAddress: paymentIntent?.destination_token_address ?? "",
|
|
23351
|
+
enabled: open && view === "transfer" && !!paymentIntent && !!selectedSource && quoteDestinationAmount !== "0"
|
|
23352
|
+
});
|
|
23353
|
+
const handleBrowserWalletClick = (0, import_react26.useCallback)(
|
|
23354
|
+
(walletInfo) => {
|
|
23355
|
+
const walletChainType = walletInfo.type === "phantom-solana" || walletInfo.type === "solflare" || walletInfo.type === "backpack" || walletInfo.type === "glow" ? "solana" : "ethereum";
|
|
23356
|
+
setStoredWalletChainType(walletChainType);
|
|
23357
|
+
setBrowserWalletChainType(walletChainType);
|
|
23358
|
+
const matchingDepositWallet = wallets.find(
|
|
23359
|
+
(w) => w.chain_type === walletChainType
|
|
22792
23360
|
);
|
|
22793
|
-
if (
|
|
22794
|
-
|
|
22795
|
-
|
|
22796
|
-
|
|
22797
|
-
|
|
22798
|
-
|
|
22799
|
-
const whole = raw / divisor;
|
|
22800
|
-
const frac = raw % divisor;
|
|
22801
|
-
const fracStr = frac.toString().padStart(decimals, "0").replace(/0+$/, "");
|
|
22802
|
-
const balanceHuman = fracStr ? `${whole}.${fracStr}` : whole.toString();
|
|
22803
|
-
return {
|
|
22804
|
-
balanceBaseUnit: baseUnit,
|
|
22805
|
-
balanceHuman,
|
|
22806
|
-
balanceUsd: res.balance.amount_usd,
|
|
22807
|
-
exchangeRate: res.balance.exchange_rate,
|
|
22808
|
-
decimals,
|
|
22809
|
-
symbol
|
|
22810
|
-
};
|
|
23361
|
+
if (!matchingDepositWallet) {
|
|
23362
|
+
onCheckoutError?.({
|
|
23363
|
+
message: `Unable to pay from ${walletChainType}. Please try a different wallet.`,
|
|
23364
|
+
code: "NO_DEPOSIT_ADDRESS"
|
|
23365
|
+
});
|
|
23366
|
+
return;
|
|
22811
23367
|
}
|
|
22812
|
-
|
|
23368
|
+
setBrowserWalletInfo({
|
|
23369
|
+
...walletInfo,
|
|
23370
|
+
depositWallet: matchingDepositWallet
|
|
23371
|
+
});
|
|
23372
|
+
setBrowserWalletModalOpen(true);
|
|
22813
23373
|
},
|
|
22814
|
-
|
|
22815
|
-
|
|
22816
|
-
|
|
22817
|
-
|
|
22818
|
-
|
|
22819
|
-
|
|
22820
|
-
|
|
22821
|
-
|
|
22822
|
-
|
|
22823
|
-
|
|
22824
|
-
|
|
22825
|
-
|
|
22826
|
-
|
|
22827
|
-
|
|
22828
|
-
|
|
22829
|
-
|
|
22830
|
-
|
|
22831
|
-
|
|
23374
|
+
[wallets, onCheckoutError]
|
|
23375
|
+
);
|
|
23376
|
+
const handleWalletConnectClick = (0, import_react26.useCallback)(() => {
|
|
23377
|
+
setWalletSelectionModalOpen(true);
|
|
23378
|
+
}, []);
|
|
23379
|
+
const handleWalletConnected = (0, import_react26.useCallback)(
|
|
23380
|
+
(walletInfo) => {
|
|
23381
|
+
const walletChainType = walletInfo.type === "phantom-solana" || walletInfo.type === "solflare" || walletInfo.type === "backpack" || walletInfo.type === "glow" ? "solana" : "ethereum";
|
|
23382
|
+
setStoredWalletChainType(walletChainType);
|
|
23383
|
+
setBrowserWalletChainType(walletChainType);
|
|
23384
|
+
const matchingDepositWallet = wallets.find(
|
|
23385
|
+
(w) => w.chain_type === walletChainType
|
|
23386
|
+
);
|
|
23387
|
+
if (!matchingDepositWallet) {
|
|
23388
|
+
onCheckoutError?.({
|
|
23389
|
+
message: `Unable to pay from ${walletChainType}. Please try a different wallet.`,
|
|
23390
|
+
code: "NO_DEPOSIT_ADDRESS"
|
|
23391
|
+
});
|
|
23392
|
+
setWalletSelectionModalOpen(false);
|
|
23393
|
+
return;
|
|
23394
|
+
}
|
|
23395
|
+
setBrowserWalletInfo({
|
|
23396
|
+
...walletInfo,
|
|
23397
|
+
depositWallet: matchingDepositWallet
|
|
23398
|
+
});
|
|
23399
|
+
setWalletSelectionModalOpen(false);
|
|
23400
|
+
setBrowserWalletModalOpen(true);
|
|
23401
|
+
},
|
|
23402
|
+
[wallets, onCheckoutError]
|
|
23403
|
+
);
|
|
23404
|
+
const handleWalletDisconnect = (0, import_react26.useCallback)(() => {
|
|
23405
|
+
setUserDisconnectedWallet(true);
|
|
23406
|
+
clearStoredWalletChainType();
|
|
23407
|
+
setBrowserWalletChainType(void 0);
|
|
23408
|
+
setBrowserWalletInfo(null);
|
|
23409
|
+
setBrowserWalletModalOpen(false);
|
|
23410
|
+
}, []);
|
|
23411
|
+
const handleClose = (0, import_react26.useCallback)(() => {
|
|
23412
|
+
onOpenChange(false);
|
|
23413
|
+
if (resetViewTimeoutRef.current) {
|
|
23414
|
+
clearTimeout(resetViewTimeoutRef.current);
|
|
23415
|
+
}
|
|
23416
|
+
resetViewTimeoutRef.current = setTimeout(() => {
|
|
23417
|
+
setView("main");
|
|
23418
|
+
setBrowserWalletInfo(null);
|
|
23419
|
+
resetViewTimeoutRef.current = null;
|
|
23420
|
+
}, 200);
|
|
23421
|
+
}, [onOpenChange]);
|
|
23422
|
+
(0, import_react26.useLayoutEffect)(() => {
|
|
23423
|
+
if (!open) return;
|
|
23424
|
+
if (resetViewTimeoutRef.current) {
|
|
23425
|
+
clearTimeout(resetViewTimeoutRef.current);
|
|
23426
|
+
resetViewTimeoutRef.current = null;
|
|
23427
|
+
}
|
|
23428
|
+
setView("main");
|
|
23429
|
+
setBrowserWalletInfo(null);
|
|
23430
|
+
}, [open]);
|
|
23431
|
+
(0, import_react26.useEffect)(
|
|
23432
|
+
() => () => {
|
|
23433
|
+
if (resetViewTimeoutRef.current) {
|
|
23434
|
+
clearTimeout(resetViewTimeoutRef.current);
|
|
23435
|
+
}
|
|
23436
|
+
},
|
|
23437
|
+
[]
|
|
23438
|
+
);
|
|
23439
|
+
const handleBack = (0, import_react26.useCallback)(() => {
|
|
23440
|
+
setView("main");
|
|
23441
|
+
}, []);
|
|
23442
|
+
const poweredByFooter = /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23443
|
+
PoweredByUnifold,
|
|
23444
|
+
{
|
|
23445
|
+
color: colors2.foregroundMuted,
|
|
23446
|
+
className: "uf-flex uf-justify-center uf-shrink-0"
|
|
23447
|
+
}
|
|
23448
|
+
) });
|
|
23449
|
+
const progressSection = paymentIntent ? (() => {
|
|
23450
|
+
const received = parseFloat(paymentIntent.amount_received_usd);
|
|
23451
|
+
const total = parseFloat(paymentIntent.amount_usd);
|
|
23452
|
+
const remaining = Math.max(total - received, 0);
|
|
23453
|
+
const pct = total > 0 ? Math.min(received / total * 100, 100) : 0;
|
|
23454
|
+
const hasPartial = received > 0;
|
|
23455
|
+
const amountStr = paymentIntent.amount_usd;
|
|
23456
|
+
const dynamicFontSize = `${Math.max(3.75 - amountStr.length * 0.15, 2)}rem`;
|
|
23457
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-text-center uf-py-2 uf-space-y-1", children: [
|
|
23458
|
+
paymentIntent.description && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23459
|
+
"div",
|
|
23460
|
+
{
|
|
23461
|
+
className: "uf-text-xs",
|
|
23462
|
+
style: {
|
|
23463
|
+
color: colors2.foregroundMuted,
|
|
23464
|
+
fontFamily: fonts.regular
|
|
23465
|
+
},
|
|
23466
|
+
children: paymentIntent.description
|
|
23467
|
+
}
|
|
23468
|
+
),
|
|
23469
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-center", children: [
|
|
23470
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23471
|
+
"span",
|
|
23472
|
+
{
|
|
23473
|
+
className: "uf-mr-1",
|
|
23474
|
+
style: {
|
|
23475
|
+
fontSize: `calc(${dynamicFontSize} * 0.6)`,
|
|
23476
|
+
color: colors2.foregroundMuted,
|
|
23477
|
+
fontFamily: fonts.regular
|
|
23478
|
+
},
|
|
23479
|
+
children: "$"
|
|
23480
|
+
}
|
|
23481
|
+
),
|
|
23482
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23483
|
+
"span",
|
|
23484
|
+
{
|
|
23485
|
+
style: {
|
|
23486
|
+
fontSize: dynamicFontSize,
|
|
23487
|
+
color: colors2.foreground,
|
|
23488
|
+
fontFamily: fonts.regular,
|
|
23489
|
+
lineHeight: 1.1
|
|
23490
|
+
},
|
|
23491
|
+
children: amountStr
|
|
23492
|
+
}
|
|
23493
|
+
)
|
|
23494
|
+
] }),
|
|
23495
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23496
|
+
"div",
|
|
23497
|
+
{
|
|
23498
|
+
className: "uf-text-xs",
|
|
23499
|
+
style: {
|
|
23500
|
+
color: colors2.foregroundMuted,
|
|
23501
|
+
fontFamily: fonts.regular
|
|
23502
|
+
},
|
|
23503
|
+
children: paymentIntent.currency.toUpperCase()
|
|
23504
|
+
}
|
|
23505
|
+
),
|
|
23506
|
+
hasPartial && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-pt-2 uf-space-y-1.5", children: [
|
|
23507
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23508
|
+
"div",
|
|
23509
|
+
{
|
|
23510
|
+
className: "uf-w-full uf-h-1.5 uf-rounded-full uf-overflow-hidden",
|
|
23511
|
+
style: { backgroundColor: colors2.border },
|
|
23512
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23513
|
+
"div",
|
|
23514
|
+
{
|
|
23515
|
+
className: "uf-h-full uf-rounded-full uf-transition-all uf-duration-500",
|
|
23516
|
+
style: {
|
|
23517
|
+
width: `${pct}%`,
|
|
23518
|
+
backgroundColor: paymentIntent.status === "succeeded" ? "rgb(34, 197, 94)" : colors2.primary
|
|
23519
|
+
}
|
|
23520
|
+
}
|
|
23521
|
+
)
|
|
23522
|
+
}
|
|
23523
|
+
),
|
|
23524
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
|
|
23525
|
+
"div",
|
|
23526
|
+
{
|
|
23527
|
+
className: "uf-text-xs",
|
|
23528
|
+
style: {
|
|
23529
|
+
color: colors2.foregroundMuted,
|
|
23530
|
+
fontFamily: fonts.regular
|
|
23531
|
+
},
|
|
23532
|
+
children: [
|
|
23533
|
+
"$",
|
|
23534
|
+
paymentIntent.amount_received_usd,
|
|
23535
|
+
" / $",
|
|
23536
|
+
amountStr,
|
|
23537
|
+
" received",
|
|
23538
|
+
remaining > 0 && paymentIntent.status !== "succeeded" && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("span", { style: { color: colors2.foreground, fontFamily: fonts.medium }, children: [
|
|
23539
|
+
" ",
|
|
23540
|
+
"\xB7 $",
|
|
23541
|
+
remaining.toFixed(2),
|
|
23542
|
+
" remaining"
|
|
23543
|
+
] })
|
|
23544
|
+
]
|
|
23545
|
+
}
|
|
23546
|
+
)
|
|
23547
|
+
] }),
|
|
23548
|
+
paymentIntent.status !== "requires_payment" && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23549
|
+
"span",
|
|
23550
|
+
{
|
|
23551
|
+
className: "uf-text-xs uf-font-medium uf-px-2.5 uf-py-1 uf-rounded-full uf-inline-block",
|
|
23552
|
+
style: {
|
|
23553
|
+
backgroundColor: paymentIntent.status === "succeeded" ? "rgba(34, 197, 94, 0.15)" : paymentIntent.status === "processing" ? "rgba(59, 130, 246, 0.15)" : "rgba(239, 68, 68, 0.15)",
|
|
23554
|
+
color: paymentIntent.status === "succeeded" ? "rgb(34, 197, 94)" : paymentIntent.status === "processing" ? "rgb(59, 130, 246)" : "rgb(239, 68, 68)",
|
|
23555
|
+
fontFamily: fonts.medium
|
|
23556
|
+
},
|
|
23557
|
+
children: paymentIntent.status === "succeeded" ? "Payment Complete" : paymentIntent.status === "processing" ? "Partial Payment Received" : paymentIntent.status === "canceled" ? "Canceled" : paymentIntent.status === "expired" ? "Expired" : paymentIntent.status
|
|
23558
|
+
}
|
|
23559
|
+
) })
|
|
23560
|
+
] });
|
|
23561
|
+
})() : null;
|
|
23562
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(PortalContainerProvider, { value: null, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(Dialog2, { open, onOpenChange: handleClose, modal: true, children: [
|
|
23563
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23564
|
+
DialogContent2,
|
|
23565
|
+
{
|
|
23566
|
+
className: `sm:uf-max-w-[400px] uf-border-secondary uf-text-foreground uf-gap-0 [&>button]:uf-hidden uf-p-0 uf-overflow-visible ${view === "main" ? "!uf-top-auto !uf-h-auto !uf-max-h-[60vh] sm:!uf-max-h-none sm:!uf-top-[50%]" : "!uf-top-0 !uf-h-full sm:!uf-h-auto sm:!uf-top-[50%]"} ${themeClass}`,
|
|
23567
|
+
style: { backgroundColor: colors2.background },
|
|
23568
|
+
onPointerDownOutside: (e) => e.preventDefault(),
|
|
23569
|
+
onInteractOutside: (e) => e.preventDefault(),
|
|
23570
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ThemeStyleInjector, { children: view === "main" ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
|
|
23571
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23572
|
+
DepositHeader,
|
|
23573
|
+
{
|
|
23574
|
+
title: modalTitle || "Checkout",
|
|
23575
|
+
showClose: true,
|
|
23576
|
+
onClose: handleClose
|
|
23577
|
+
}
|
|
23578
|
+
),
|
|
23579
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
|
|
23580
|
+
piLoading ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-space-y-3", children: [
|
|
23581
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23582
|
+
"div",
|
|
23583
|
+
{
|
|
23584
|
+
className: "uf-rounded-xl uf-p-4 uf-animate-pulse",
|
|
23585
|
+
style: {
|
|
23586
|
+
backgroundColor: components.card.backgroundColor,
|
|
23587
|
+
borderRadius: components.card.borderRadius,
|
|
23588
|
+
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
23589
|
+
},
|
|
23590
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-gap-2", children: [
|
|
23591
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23592
|
+
"div",
|
|
23593
|
+
{
|
|
23594
|
+
className: "uf-h-8 uf-w-24 uf-rounded",
|
|
23595
|
+
style: {
|
|
23596
|
+
backgroundColor: components.card.borderColor
|
|
23597
|
+
}
|
|
23598
|
+
}
|
|
23599
|
+
),
|
|
23600
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23601
|
+
"div",
|
|
23602
|
+
{
|
|
23603
|
+
className: "uf-h-4 uf-w-16 uf-rounded",
|
|
23604
|
+
style: {
|
|
23605
|
+
backgroundColor: components.card.borderColor
|
|
23606
|
+
}
|
|
23607
|
+
}
|
|
23608
|
+
)
|
|
23609
|
+
] })
|
|
23610
|
+
}
|
|
23611
|
+
),
|
|
23612
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(SkeletonButton2, {}),
|
|
23613
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(SkeletonButton2, {})
|
|
23614
|
+
] }) : piError ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
|
|
23615
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(TriangleAlert, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
|
|
23616
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23617
|
+
"h3",
|
|
23618
|
+
{
|
|
23619
|
+
className: "uf-text-lg uf-font-semibold uf-mb-2",
|
|
23620
|
+
style: {
|
|
23621
|
+
color: colors2.foreground,
|
|
23622
|
+
fontFamily: fonts.semibold
|
|
23623
|
+
},
|
|
23624
|
+
children: "Unable to Load Checkout"
|
|
23625
|
+
}
|
|
23626
|
+
),
|
|
23627
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23628
|
+
"p",
|
|
23629
|
+
{
|
|
23630
|
+
className: "uf-text-sm uf-max-w-[280px]",
|
|
23631
|
+
style: {
|
|
23632
|
+
color: colors2.foregroundMuted,
|
|
23633
|
+
fontFamily: fonts.regular
|
|
23634
|
+
},
|
|
23635
|
+
children: piError instanceof Error ? piError.message : "Something went wrong. Please try again."
|
|
23636
|
+
}
|
|
23637
|
+
)
|
|
23638
|
+
] }) : paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-space-y-3", children: [
|
|
23639
|
+
progressSection,
|
|
23640
|
+
(paymentIntent.status === "requires_payment" || paymentIntent.status === "processing") && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
|
|
23641
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23642
|
+
TransferCryptoButton,
|
|
23643
|
+
{
|
|
23644
|
+
onClick: () => setView("transfer"),
|
|
23645
|
+
title: "Transfer Crypto",
|
|
23646
|
+
subtitle: "Send from any wallet or exchange",
|
|
23647
|
+
featuredTokens: projectConfig?.transfer_crypto.networks
|
|
23648
|
+
}
|
|
23649
|
+
),
|
|
23650
|
+
enableConnectWallet && !isMobileView && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23651
|
+
BrowserWalletButton,
|
|
23652
|
+
{
|
|
23653
|
+
onClick: handleBrowserWalletClick,
|
|
23654
|
+
onConnectClick: handleWalletConnectClick,
|
|
23655
|
+
onDisconnect: handleWalletDisconnect,
|
|
23656
|
+
chainType: browserWalletChainType,
|
|
23657
|
+
publishableKey
|
|
23658
|
+
}
|
|
23659
|
+
)
|
|
23660
|
+
] })
|
|
23661
|
+
] }) : null,
|
|
23662
|
+
poweredByFooter
|
|
23663
|
+
] })
|
|
23664
|
+
] }) : view === "transfer" ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
|
|
23665
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23666
|
+
DepositHeader,
|
|
23667
|
+
{
|
|
23668
|
+
title: `Pay $${remainingAmountUsd ?? paymentIntent?.amount_usd ?? ""}`,
|
|
23669
|
+
showBack: true,
|
|
23670
|
+
onBack: handleBack,
|
|
23671
|
+
onClose: handleClose
|
|
23672
|
+
}
|
|
23673
|
+
),
|
|
23674
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
|
|
23675
|
+
paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
|
|
23676
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
|
|
23677
|
+
"div",
|
|
23678
|
+
{
|
|
23679
|
+
className: "uf-rounded-lg uf-px-3 uf-py-2 uf-flex uf-items-center uf-justify-between",
|
|
23680
|
+
style: {
|
|
23681
|
+
backgroundColor: components.card.backgroundColor,
|
|
23682
|
+
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`,
|
|
23683
|
+
borderRadius: components.card.borderRadius
|
|
23684
|
+
},
|
|
23685
|
+
children: [
|
|
23686
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23687
|
+
"span",
|
|
23688
|
+
{
|
|
23689
|
+
className: "uf-text-xs",
|
|
23690
|
+
style: {
|
|
23691
|
+
color: colors2.foregroundMuted,
|
|
23692
|
+
fontFamily: fonts.regular
|
|
23693
|
+
},
|
|
23694
|
+
children: parseFloat(paymentIntent.amount_received_usd) > 0 ? `$${paymentIntent.amount_received_usd} / $${paymentIntent.amount_usd} received` : "Amount due"
|
|
23695
|
+
}
|
|
23696
|
+
),
|
|
23697
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
|
|
23698
|
+
"span",
|
|
23699
|
+
{
|
|
23700
|
+
className: "uf-text-sm uf-font-semibold",
|
|
23701
|
+
style: {
|
|
23702
|
+
color: colors2.foreground,
|
|
23703
|
+
fontFamily: fonts.semibold
|
|
23704
|
+
},
|
|
23705
|
+
children: [
|
|
23706
|
+
formatCryptoAmount(remainingCrypto ?? paymentIntent.amount),
|
|
23707
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
|
|
23708
|
+
"span",
|
|
23709
|
+
{
|
|
23710
|
+
className: "uf-text-xs uf-font-normal uf-ml-1",
|
|
23711
|
+
style: { color: colors2.foregroundMuted },
|
|
23712
|
+
children: [
|
|
23713
|
+
"($",
|
|
23714
|
+
remainingAmountUsd ?? paymentIntent.amount_usd,
|
|
23715
|
+
")"
|
|
23716
|
+
]
|
|
23717
|
+
}
|
|
23718
|
+
)
|
|
23719
|
+
]
|
|
23720
|
+
}
|
|
23721
|
+
)
|
|
23722
|
+
]
|
|
23723
|
+
}
|
|
23724
|
+
),
|
|
23725
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23726
|
+
TransferCryptoSingleInput,
|
|
23727
|
+
{
|
|
23728
|
+
userId: paymentIntent.user_id || "",
|
|
23729
|
+
publishableKey,
|
|
23730
|
+
clientSecret,
|
|
23731
|
+
recipientAddress: paymentIntent.recipient_address,
|
|
23732
|
+
destinationChainType: paymentIntent.destination_chain_type,
|
|
23733
|
+
destinationChainId: paymentIntent.destination_chain_id,
|
|
23734
|
+
destinationTokenAddress: paymentIntent.destination_token_address,
|
|
23735
|
+
depositConfirmationMode: "auto_ui",
|
|
23736
|
+
wallets,
|
|
23737
|
+
onSourceTokenChange: setSelectedSource,
|
|
23738
|
+
checkoutQuote: sourceQuote ? {
|
|
23739
|
+
sourceAmount: sourceQuote.source_amount,
|
|
23740
|
+
sourceTokenDecimals: sourceQuote.source_token_decimals,
|
|
23741
|
+
sourceTokenSymbol: sourceQuote.source_token_symbol,
|
|
23742
|
+
sourceAmountUsd: sourceQuote.source_amount_usd
|
|
23743
|
+
} : null
|
|
23744
|
+
}
|
|
23745
|
+
)
|
|
23746
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(SkeletonButton2, {}),
|
|
23747
|
+
poweredByFooter
|
|
23748
|
+
] })
|
|
23749
|
+
] }) : null })
|
|
23750
|
+
}
|
|
23751
|
+
),
|
|
23752
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23753
|
+
WalletSelectionModal,
|
|
23754
|
+
{
|
|
23755
|
+
open: walletSelectionModalOpen,
|
|
23756
|
+
onOpenChange: setWalletSelectionModalOpen,
|
|
23757
|
+
onWalletConnected: handleWalletConnected,
|
|
23758
|
+
onClose: () => setWalletSelectionModalOpen(false),
|
|
23759
|
+
theme: resolvedTheme
|
|
23760
|
+
}
|
|
23761
|
+
),
|
|
23762
|
+
browserWalletInfo && browserWalletInfo.depositWallet && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23763
|
+
BrowserWalletModal,
|
|
23764
|
+
{
|
|
23765
|
+
open: browserWalletModalOpen,
|
|
23766
|
+
onOpenChange: setBrowserWalletModalOpen,
|
|
23767
|
+
onFullClose: handleClose,
|
|
23768
|
+
walletInfo: browserWalletInfo,
|
|
23769
|
+
depositWallet: browserWalletInfo.depositWallet,
|
|
23770
|
+
userId: paymentIntent?.user_id || "",
|
|
23771
|
+
publishableKey,
|
|
23772
|
+
clientSecret,
|
|
23773
|
+
theme: resolvedTheme,
|
|
23774
|
+
prefillAmountUsd: remainingAmountUsd,
|
|
23775
|
+
checkoutAmountUsd: paymentIntent?.amount_usd,
|
|
23776
|
+
checkoutReceivedUsd: paymentIntent?.amount_received_usd,
|
|
23777
|
+
onSuccess: (txHash) => {
|
|
23778
|
+
onCheckoutSuccess?.({
|
|
23779
|
+
paymentIntentId: paymentIntent?.id || "",
|
|
23780
|
+
status: "processing"
|
|
23781
|
+
});
|
|
23782
|
+
},
|
|
23783
|
+
onError: (error) => {
|
|
23784
|
+
onCheckoutError?.({
|
|
23785
|
+
message: error.message,
|
|
23786
|
+
error
|
|
23787
|
+
});
|
|
23788
|
+
},
|
|
23789
|
+
onWalletDisconnect: handleWalletDisconnect,
|
|
23790
|
+
onNewDeposit: () => {
|
|
23791
|
+
setBrowserWalletModalOpen(false);
|
|
23792
|
+
setView("main");
|
|
23793
|
+
},
|
|
23794
|
+
onDone: () => {
|
|
23795
|
+
setBrowserWalletModalOpen(false);
|
|
23796
|
+
setView("main");
|
|
23797
|
+
},
|
|
23798
|
+
paymentIntentStatus: paymentIntent?.status
|
|
23799
|
+
}
|
|
23800
|
+
)
|
|
23801
|
+
] }) });
|
|
23802
|
+
}
|
|
23803
|
+
function useSupportedDestinationTokens(publishableKey, enabled = true) {
|
|
23804
|
+
return (0, import_react_query13.useQuery)({
|
|
23805
|
+
queryKey: ["unifold", "supportedDestinationTokens", publishableKey],
|
|
23806
|
+
queryFn: () => getSupportedDestinationTokens(publishableKey),
|
|
23807
|
+
staleTime: 1e3 * 60 * 5,
|
|
23808
|
+
gcTime: 1e3 * 60 * 30,
|
|
23809
|
+
refetchOnMount: false,
|
|
23810
|
+
refetchOnWindowFocus: false,
|
|
23811
|
+
enabled
|
|
23812
|
+
});
|
|
23813
|
+
}
|
|
23814
|
+
function useSourceTokenValidation(params) {
|
|
23815
|
+
const {
|
|
23816
|
+
sourceChainType,
|
|
23817
|
+
sourceChainId,
|
|
23818
|
+
sourceTokenAddress,
|
|
23819
|
+
sourceTokenSymbol,
|
|
23820
|
+
publishableKey,
|
|
23821
|
+
enabled = true
|
|
23822
|
+
} = params;
|
|
23823
|
+
const hasParams = !!sourceChainType && !!sourceChainId && !!sourceTokenAddress;
|
|
23824
|
+
return (0, import_react_query14.useQuery)({
|
|
23825
|
+
queryKey: [
|
|
23826
|
+
"unifold",
|
|
23827
|
+
"sourceTokenValidation",
|
|
23828
|
+
sourceChainType ?? null,
|
|
23829
|
+
sourceChainId ?? null,
|
|
23830
|
+
sourceTokenAddress ?? null,
|
|
23831
|
+
publishableKey
|
|
23832
|
+
],
|
|
23833
|
+
queryFn: async () => {
|
|
23834
|
+
const res = await getSupportedDepositTokens(publishableKey);
|
|
23835
|
+
let matchedMinUsd = null;
|
|
23836
|
+
let matchedProcessingTime = null;
|
|
23837
|
+
let matchedSlippage = null;
|
|
23838
|
+
let matchedPriceImpact = null;
|
|
23839
|
+
const found = res.data.some(
|
|
23840
|
+
(token) => token.chains.some((chain) => {
|
|
23841
|
+
const match = chain.chain_type === sourceChainType && chain.chain_id === sourceChainId && chain.token_address.toLowerCase() === sourceTokenAddress.toLowerCase();
|
|
23842
|
+
if (match) {
|
|
23843
|
+
matchedMinUsd = chain.minimum_deposit_amount_usd;
|
|
23844
|
+
matchedProcessingTime = chain.estimated_processing_time;
|
|
23845
|
+
matchedSlippage = chain.max_slippage_percent;
|
|
23846
|
+
matchedPriceImpact = chain.estimated_price_impact_percent;
|
|
23847
|
+
}
|
|
23848
|
+
return match;
|
|
23849
|
+
})
|
|
23850
|
+
);
|
|
23851
|
+
return {
|
|
23852
|
+
isSupported: found,
|
|
23853
|
+
minimumAmountUsd: matchedMinUsd,
|
|
23854
|
+
estimatedProcessingTime: matchedProcessingTime,
|
|
23855
|
+
maxSlippagePercent: matchedSlippage,
|
|
23856
|
+
priceImpactPercent: matchedPriceImpact,
|
|
23857
|
+
errorMessage: found ? null : `${sourceTokenSymbol || "Source token"} is not a supported withdrawal token. Supported tokens include USDC, USDT, and other stablecoins.`
|
|
23858
|
+
};
|
|
23859
|
+
},
|
|
23860
|
+
enabled: enabled && hasParams,
|
|
23861
|
+
staleTime: 1e3 * 60 * 5,
|
|
23862
|
+
gcTime: 1e3 * 60 * 30,
|
|
23863
|
+
refetchOnMount: false,
|
|
23864
|
+
refetchOnWindowFocus: false
|
|
23865
|
+
});
|
|
23866
|
+
}
|
|
23867
|
+
function useAddressBalance(params) {
|
|
23868
|
+
const {
|
|
23869
|
+
address,
|
|
23870
|
+
chainType,
|
|
23871
|
+
chainId,
|
|
23872
|
+
tokenAddress,
|
|
23873
|
+
publishableKey,
|
|
23874
|
+
enabled = true
|
|
23875
|
+
} = params;
|
|
23876
|
+
const hasParams = !!address && !!chainType && !!chainId && !!tokenAddress;
|
|
23877
|
+
return (0, import_react_query15.useQuery)({
|
|
23878
|
+
queryKey: [
|
|
23879
|
+
"unifold",
|
|
23880
|
+
"addressBalance",
|
|
23881
|
+
address ?? null,
|
|
23882
|
+
chainType ?? null,
|
|
23883
|
+
chainId ?? null,
|
|
23884
|
+
tokenAddress ?? null,
|
|
23885
|
+
publishableKey
|
|
23886
|
+
],
|
|
23887
|
+
queryFn: async () => {
|
|
23888
|
+
const res = await getAddressBalance(
|
|
23889
|
+
address,
|
|
23890
|
+
chainType,
|
|
23891
|
+
chainId,
|
|
23892
|
+
tokenAddress,
|
|
23893
|
+
publishableKey
|
|
23894
|
+
);
|
|
23895
|
+
if (res.balance) {
|
|
23896
|
+
const decimals = res.balance.token?.decimals ?? 6;
|
|
23897
|
+
const symbol = res.balance.token?.symbol ?? "";
|
|
23898
|
+
const baseUnit = res.balance.amount;
|
|
23899
|
+
const raw = BigInt(baseUnit);
|
|
23900
|
+
const divisor = BigInt(10 ** decimals);
|
|
23901
|
+
const whole = raw / divisor;
|
|
23902
|
+
const frac = raw % divisor;
|
|
23903
|
+
const fracStr = frac.toString().padStart(decimals, "0").replace(/0+$/, "");
|
|
23904
|
+
const balanceHuman = fracStr ? `${whole}.${fracStr}` : whole.toString();
|
|
23905
|
+
return {
|
|
23906
|
+
balanceBaseUnit: baseUnit,
|
|
23907
|
+
balanceHuman,
|
|
23908
|
+
balanceUsd: res.balance.amount_usd,
|
|
23909
|
+
exchangeRate: res.balance.exchange_rate,
|
|
23910
|
+
decimals,
|
|
23911
|
+
symbol
|
|
23912
|
+
};
|
|
23913
|
+
}
|
|
23914
|
+
return { balanceBaseUnit: "0", balanceHuman: "0", balanceUsd: "0", exchangeRate: null, decimals: 6, symbol: "" };
|
|
23915
|
+
},
|
|
23916
|
+
enabled: enabled && hasParams,
|
|
23917
|
+
staleTime: 1e3 * 30,
|
|
23918
|
+
gcTime: 1e3 * 60 * 5,
|
|
23919
|
+
refetchInterval: 1e3 * 30,
|
|
23920
|
+
refetchOnMount: "always",
|
|
23921
|
+
refetchOnWindowFocus: false
|
|
23922
|
+
});
|
|
23923
|
+
}
|
|
23924
|
+
function useExecutions(userId, publishableKey, options) {
|
|
23925
|
+
const actionType = options?.actionType ?? ActionType.Deposit;
|
|
23926
|
+
return (0, import_react_query16.useQuery)({
|
|
23927
|
+
queryKey: ["unifold", "executions", actionType, userId, publishableKey],
|
|
23928
|
+
queryFn: () => queryExecutions(userId, publishableKey, actionType),
|
|
23929
|
+
enabled: (options?.enabled ?? true) && !!userId,
|
|
23930
|
+
refetchInterval: options?.refetchInterval ?? 3e3,
|
|
23931
|
+
staleTime: 0,
|
|
23932
|
+
gcTime: 1e3 * 60 * 5,
|
|
23933
|
+
refetchOnWindowFocus: false
|
|
22832
23934
|
});
|
|
22833
23935
|
}
|
|
22834
23936
|
var POLL_INTERVAL_MS2 = 2500;
|
|
@@ -22842,20 +23944,20 @@ function useWithdrawPolling({
|
|
|
22842
23944
|
onWithdrawSuccess,
|
|
22843
23945
|
onWithdrawError
|
|
22844
23946
|
}) {
|
|
22845
|
-
const [executions, setExecutions] = (0,
|
|
22846
|
-
const [isPolling, setIsPolling] = (0,
|
|
22847
|
-
const enabledAtRef = (0,
|
|
22848
|
-
const trackedRef = (0,
|
|
22849
|
-
const prevEnabledRef = (0,
|
|
22850
|
-
const onSuccessRef = (0,
|
|
22851
|
-
const onErrorRef = (0,
|
|
22852
|
-
(0,
|
|
23947
|
+
const [executions, setExecutions] = (0, import_react28.useState)([]);
|
|
23948
|
+
const [isPolling, setIsPolling] = (0, import_react28.useState)(false);
|
|
23949
|
+
const enabledAtRef = (0, import_react28.useRef)(/* @__PURE__ */ new Date());
|
|
23950
|
+
const trackedRef = (0, import_react28.useRef)(/* @__PURE__ */ new Map());
|
|
23951
|
+
const prevEnabledRef = (0, import_react28.useRef)(false);
|
|
23952
|
+
const onSuccessRef = (0, import_react28.useRef)(onWithdrawSuccess);
|
|
23953
|
+
const onErrorRef = (0, import_react28.useRef)(onWithdrawError);
|
|
23954
|
+
(0, import_react28.useEffect)(() => {
|
|
22853
23955
|
onSuccessRef.current = onWithdrawSuccess;
|
|
22854
23956
|
}, [onWithdrawSuccess]);
|
|
22855
|
-
(0,
|
|
23957
|
+
(0, import_react28.useEffect)(() => {
|
|
22856
23958
|
onErrorRef.current = onWithdrawError;
|
|
22857
23959
|
}, [onWithdrawError]);
|
|
22858
|
-
(0,
|
|
23960
|
+
(0, import_react28.useEffect)(() => {
|
|
22859
23961
|
if (enabled && !prevEnabledRef.current) {
|
|
22860
23962
|
enabledAtRef.current = /* @__PURE__ */ new Date();
|
|
22861
23963
|
trackedRef.current.clear();
|
|
@@ -22865,7 +23967,7 @@ function useWithdrawPolling({
|
|
|
22865
23967
|
}
|
|
22866
23968
|
prevEnabledRef.current = enabled;
|
|
22867
23969
|
}, [enabled]);
|
|
22868
|
-
(0,
|
|
23970
|
+
(0, import_react28.useEffect)(() => {
|
|
22869
23971
|
if (!userId || !enabled) return;
|
|
22870
23972
|
const enabledAt = enabledAtRef.current;
|
|
22871
23973
|
const poll = async () => {
|
|
@@ -22927,7 +24029,7 @@ function useWithdrawPolling({
|
|
|
22927
24029
|
setIsPolling(false);
|
|
22928
24030
|
};
|
|
22929
24031
|
}, [userId, publishableKey, enabled]);
|
|
22930
|
-
(0,
|
|
24032
|
+
(0, import_react28.useEffect)(() => {
|
|
22931
24033
|
if (!enabled || !depositWalletId) return;
|
|
22932
24034
|
const trigger = async () => {
|
|
22933
24035
|
try {
|
|
@@ -22955,8 +24057,8 @@ function WithdrawDoubleInput({
|
|
|
22955
24057
|
const isDarkMode = useTheme().themeClass.includes("uf-dark");
|
|
22956
24058
|
const selectedToken = selectedTokenSymbol ? tokens.find((t11) => t11.symbol === selectedTokenSymbol) : void 0;
|
|
22957
24059
|
const availableChainsForToken = selectedToken?.chains || [];
|
|
22958
|
-
const renderTokenItem = (tokenData) => /* @__PURE__ */ (0,
|
|
22959
|
-
/* @__PURE__ */ (0,
|
|
24060
|
+
const renderTokenItem = (tokenData) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
24061
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
22960
24062
|
"img",
|
|
22961
24063
|
{
|
|
22962
24064
|
src: tokenData.icon_url,
|
|
@@ -22967,10 +24069,10 @@ function WithdrawDoubleInput({
|
|
|
22967
24069
|
className: "uf-rounded-full uf-flex-shrink-0"
|
|
22968
24070
|
}
|
|
22969
24071
|
),
|
|
22970
|
-
/* @__PURE__ */ (0,
|
|
24072
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "uf-text-xs uf-font-normal", children: tokenData.symbol })
|
|
22971
24073
|
] });
|
|
22972
|
-
const renderChainItem = (chainData) => /* @__PURE__ */ (0,
|
|
22973
|
-
/* @__PURE__ */ (0,
|
|
24074
|
+
const renderChainItem = (chainData) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
24075
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
22974
24076
|
"img",
|
|
22975
24077
|
{
|
|
22976
24078
|
src: chainData.icon_url,
|
|
@@ -22981,14 +24083,14 @@ function WithdrawDoubleInput({
|
|
|
22981
24083
|
className: "uf-rounded-full uf-flex-shrink-0"
|
|
22982
24084
|
}
|
|
22983
24085
|
),
|
|
22984
|
-
/* @__PURE__ */ (0,
|
|
24086
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "uf-text-xs uf-font-normal", children: chainData.chain_name })
|
|
22985
24087
|
] });
|
|
22986
24088
|
const currentChainData = selectedChainKey ? availableChainsForToken.find(
|
|
22987
24089
|
(c) => getChainKey4(c.chain_id, c.chain_type) === selectedChainKey
|
|
22988
24090
|
) : void 0;
|
|
22989
|
-
return /* @__PURE__ */ (0,
|
|
22990
|
-
/* @__PURE__ */ (0,
|
|
22991
|
-
/* @__PURE__ */ (0,
|
|
24091
|
+
return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "uf-grid uf-grid-cols-2 uf-gap-2.5", children: [
|
|
24092
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { children: [
|
|
24093
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
22992
24094
|
"div",
|
|
22993
24095
|
{
|
|
22994
24096
|
className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1",
|
|
@@ -22996,14 +24098,14 @@ function WithdrawDoubleInput({
|
|
|
22996
24098
|
children: t7.receiveToken
|
|
22997
24099
|
}
|
|
22998
24100
|
),
|
|
22999
|
-
/* @__PURE__ */ (0,
|
|
24101
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
|
|
23000
24102
|
Select2,
|
|
23001
24103
|
{
|
|
23002
24104
|
value: selectedTokenSymbol ?? "",
|
|
23003
24105
|
onValueChange: onTokenChange,
|
|
23004
24106
|
disabled: isLoading || tokens.length === 0,
|
|
23005
24107
|
children: [
|
|
23006
|
-
/* @__PURE__ */ (0,
|
|
24108
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
23007
24109
|
SelectTrigger2,
|
|
23008
24110
|
{
|
|
23009
24111
|
className: "uf-h-10 hover:uf-opacity-90 uf-text-foreground disabled:uf-opacity-50",
|
|
@@ -23011,10 +24113,10 @@ function WithdrawDoubleInput({
|
|
|
23011
24113
|
backgroundColor: components.card.backgroundColor,
|
|
23012
24114
|
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
23013
24115
|
},
|
|
23014
|
-
children: /* @__PURE__ */ (0,
|
|
24116
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(SelectValue2, { children: isLoading || !selectedTokenSymbol ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t7.loading }) : selectedToken ? renderTokenItem(selectedToken) : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "uf-text-xs uf-font-normal", children: selectedTokenSymbol }) })
|
|
23015
24117
|
}
|
|
23016
24118
|
),
|
|
23017
|
-
/* @__PURE__ */ (0,
|
|
24119
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
23018
24120
|
SelectContent2,
|
|
23019
24121
|
{
|
|
23020
24122
|
className: "uf-bg-secondary uf-border uf-text-foreground uf-max-h-[300px]",
|
|
@@ -23022,7 +24124,7 @@ function WithdrawDoubleInput({
|
|
|
23022
24124
|
border: `1px solid ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)"}`,
|
|
23023
24125
|
...fonts.regular ? { "--uf-font-family": fonts.regular } : {}
|
|
23024
24126
|
},
|
|
23025
|
-
children: tokens.map((tokenData) => /* @__PURE__ */ (0,
|
|
24127
|
+
children: tokens.map((tokenData) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
23026
24128
|
SelectItem2,
|
|
23027
24129
|
{
|
|
23028
24130
|
value: tokenData.symbol,
|
|
@@ -23037,8 +24139,8 @@ function WithdrawDoubleInput({
|
|
|
23037
24139
|
}
|
|
23038
24140
|
)
|
|
23039
24141
|
] }),
|
|
23040
|
-
/* @__PURE__ */ (0,
|
|
23041
|
-
/* @__PURE__ */ (0,
|
|
24142
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { children: [
|
|
24143
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
23042
24144
|
"div",
|
|
23043
24145
|
{
|
|
23044
24146
|
className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1",
|
|
@@ -23046,14 +24148,14 @@ function WithdrawDoubleInput({
|
|
|
23046
24148
|
children: t7.receiveChain
|
|
23047
24149
|
}
|
|
23048
24150
|
),
|
|
23049
|
-
/* @__PURE__ */ (0,
|
|
24151
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
|
|
23050
24152
|
Select2,
|
|
23051
24153
|
{
|
|
23052
24154
|
value: selectedChainKey ?? "",
|
|
23053
24155
|
onValueChange: onChainChange,
|
|
23054
24156
|
disabled: isLoading || availableChainsForToken.length === 0,
|
|
23055
24157
|
children: [
|
|
23056
|
-
/* @__PURE__ */ (0,
|
|
24158
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
23057
24159
|
SelectTrigger2,
|
|
23058
24160
|
{
|
|
23059
24161
|
className: "uf-h-10 hover:uf-opacity-90 uf-text-foreground disabled:uf-opacity-50",
|
|
@@ -23061,10 +24163,10 @@ function WithdrawDoubleInput({
|
|
|
23061
24163
|
backgroundColor: components.card.backgroundColor,
|
|
23062
24164
|
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
23063
24165
|
},
|
|
23064
|
-
children: /* @__PURE__ */ (0,
|
|
24166
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(SelectValue2, { children: isLoading || !selectedChainKey ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t7.loading }) : currentChainData ? renderChainItem(currentChainData) : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "uf-text-xs uf-font-normal", children: selectedChainKey }) })
|
|
23065
24167
|
}
|
|
23066
24168
|
),
|
|
23067
|
-
/* @__PURE__ */ (0,
|
|
24169
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
23068
24170
|
SelectContent2,
|
|
23069
24171
|
{
|
|
23070
24172
|
align: "end",
|
|
@@ -23073,9 +24175,9 @@ function WithdrawDoubleInput({
|
|
|
23073
24175
|
border: `1px solid ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)"}`,
|
|
23074
24176
|
...fonts.regular ? { "--uf-font-family": fonts.regular } : {}
|
|
23075
24177
|
},
|
|
23076
|
-
children: availableChainsForToken.length === 0 ? /* @__PURE__ */ (0,
|
|
24178
|
+
children: availableChainsForToken.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "uf-px-2 uf-py-3 uf-text-xs uf-text-muted-foreground uf-text-center", children: "No chains available" }) : availableChainsForToken.map((chainData) => {
|
|
23077
24179
|
const chainKey = getChainKey4(chainData.chain_id, chainData.chain_type);
|
|
23078
|
-
return /* @__PURE__ */ (0,
|
|
24180
|
+
return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
23079
24181
|
SelectItem2,
|
|
23080
24182
|
{
|
|
23081
24183
|
value: chainKey,
|
|
@@ -23104,7 +24206,7 @@ function useVerifyRecipientAddress(params) {
|
|
|
23104
24206
|
} = params;
|
|
23105
24207
|
const trimmedAddress = recipientAddress?.trim() || "";
|
|
23106
24208
|
const hasAllParams = !!chainType && !!chainId && !!tokenAddress && trimmedAddress.length > 0;
|
|
23107
|
-
return (0,
|
|
24209
|
+
return (0, import_react_query17.useQuery)({
|
|
23108
24210
|
queryKey: [
|
|
23109
24211
|
"unifold",
|
|
23110
24212
|
"verifyRecipientAddress",
|
|
@@ -23240,9 +24342,56 @@ async function sendSolanaWithdraw(params) {
|
|
|
23240
24342
|
);
|
|
23241
24343
|
return sendResponse.signature;
|
|
23242
24344
|
}
|
|
24345
|
+
var HYPERCORE_CHAIN_ID = "1337";
|
|
24346
|
+
var HYPERCORE_SPOT_USDC_ADDRESS = "0x6d1e7cde53ba9467b783cb7c530ce054";
|
|
24347
|
+
function isHypercoreChain(chainId) {
|
|
24348
|
+
return chainId === HYPERCORE_CHAIN_ID;
|
|
24349
|
+
}
|
|
24350
|
+
async function sendHypercoreWithdraw(params) {
|
|
24351
|
+
const {
|
|
24352
|
+
provider,
|
|
24353
|
+
fromAddress,
|
|
24354
|
+
depositWalletAddress,
|
|
24355
|
+
sourceTokenAddress,
|
|
24356
|
+
amount,
|
|
24357
|
+
tokenSymbol,
|
|
24358
|
+
publishableKey
|
|
24359
|
+
} = params;
|
|
24360
|
+
const isSpot = sourceTokenAddress.toLowerCase() === HYPERCORE_SPOT_USDC_ADDRESS;
|
|
24361
|
+
const currentChainHex = await provider.request({
|
|
24362
|
+
method: "eth_chainId",
|
|
24363
|
+
params: []
|
|
24364
|
+
});
|
|
24365
|
+
const activeChainId = String(parseInt(currentChainHex, 16));
|
|
24366
|
+
const buildResult = await buildHypercoreTransaction(
|
|
24367
|
+
{
|
|
24368
|
+
action_type: isSpot ? "spot_send" : "usd_send",
|
|
24369
|
+
signature_chain_type: "ethereum",
|
|
24370
|
+
signature_chain_id: activeChainId,
|
|
24371
|
+
recipient_address: depositWalletAddress,
|
|
24372
|
+
token_address: sourceTokenAddress,
|
|
24373
|
+
token_symbol: tokenSymbol || void 0,
|
|
24374
|
+
amount
|
|
24375
|
+
},
|
|
24376
|
+
publishableKey
|
|
24377
|
+
);
|
|
24378
|
+
const signature = await provider.request({
|
|
24379
|
+
method: "eth_signTypedData_v4",
|
|
24380
|
+
params: [fromAddress, JSON.stringify(buildResult.typed_data)]
|
|
24381
|
+
});
|
|
24382
|
+
await sendHypercoreTransaction(
|
|
24383
|
+
{
|
|
24384
|
+
action_payload: buildResult.action_payload,
|
|
24385
|
+
signature,
|
|
24386
|
+
nonce: buildResult.nonce
|
|
24387
|
+
},
|
|
24388
|
+
publishableKey
|
|
24389
|
+
);
|
|
24390
|
+
}
|
|
23243
24391
|
async function detectBrowserWallet(chainType, senderAddress) {
|
|
23244
24392
|
const win = typeof window !== "undefined" ? window : null;
|
|
23245
24393
|
if (!win || !senderAddress) return null;
|
|
24394
|
+
if (getUserDisconnectedWallet()) return null;
|
|
23246
24395
|
const anyWin = win;
|
|
23247
24396
|
if (chainType === "solana") {
|
|
23248
24397
|
const solProviders = [];
|
|
@@ -23276,28 +24425,44 @@ async function detectBrowserWallet(chainType, senderAddress) {
|
|
|
23276
24425
|
evmProviders.push({ provider: p, name });
|
|
23277
24426
|
}
|
|
23278
24427
|
};
|
|
23279
|
-
|
|
23280
|
-
|
|
23281
|
-
add(anyWin.trustwallet?.ethereum, "Trust Wallet");
|
|
23282
|
-
add(anyWin.okxwallet, "OKX Wallet");
|
|
23283
|
-
if (anyWin.__eip6963Providers) {
|
|
23284
|
-
for (const detail of anyWin.__eip6963Providers) {
|
|
23285
|
-
const rdns = detail.info?.rdns || "";
|
|
23286
|
-
let name = detail.info?.name || "Wallet";
|
|
23287
|
-
if (rdns.includes("metamask")) name = "MetaMask";
|
|
23288
|
-
else if (rdns.includes("rabby")) name = "Rabby";
|
|
23289
|
-
else if (rdns.includes("rainbow")) name = "Rainbow";
|
|
23290
|
-
add(detail.provider, name);
|
|
23291
|
-
}
|
|
24428
|
+
if (!anyWin.__eip6963Providers) {
|
|
24429
|
+
anyWin.__eip6963Providers = [];
|
|
23292
24430
|
}
|
|
23293
|
-
|
|
23294
|
-
const
|
|
23295
|
-
|
|
23296
|
-
|
|
23297
|
-
|
|
23298
|
-
|
|
23299
|
-
|
|
23300
|
-
|
|
24431
|
+
const handleAnnouncement = (event) => {
|
|
24432
|
+
const { detail } = event;
|
|
24433
|
+
if (!detail?.info || !detail?.provider) return;
|
|
24434
|
+
const exists = anyWin.__eip6963Providers.some((p) => p.info.uuid === detail.info.uuid);
|
|
24435
|
+
if (!exists) anyWin.__eip6963Providers.push(detail);
|
|
24436
|
+
};
|
|
24437
|
+
win.addEventListener("eip6963:announceProvider", handleAnnouncement);
|
|
24438
|
+
win.dispatchEvent(new Event("eip6963:requestProvider"));
|
|
24439
|
+
win.removeEventListener("eip6963:announceProvider", handleAnnouncement);
|
|
24440
|
+
for (const detail of anyWin.__eip6963Providers) {
|
|
24441
|
+
const rdns = detail.info?.rdns || "";
|
|
24442
|
+
let name = detail.info?.name || "Wallet";
|
|
24443
|
+
if (rdns.includes("metamask")) name = "MetaMask";
|
|
24444
|
+
else if (rdns.includes("phantom")) name = "Phantom";
|
|
24445
|
+
else if (rdns.includes("coinbase")) name = "Coinbase";
|
|
24446
|
+
else if (rdns.includes("rabby")) name = "Rabby";
|
|
24447
|
+
else if (rdns.includes("rainbow")) name = "Rainbow";
|
|
24448
|
+
else if (rdns.includes("okx")) name = "OKX Wallet";
|
|
24449
|
+
else if (rdns.includes("trust")) name = "Trust Wallet";
|
|
24450
|
+
add(detail.provider, name);
|
|
24451
|
+
}
|
|
24452
|
+
if (evmProviders.length === 0) {
|
|
24453
|
+
add(anyWin.phantom?.ethereum, "Phantom");
|
|
24454
|
+
add(anyWin.coinbaseWalletExtension, "Coinbase");
|
|
24455
|
+
add(anyWin.trustwallet?.ethereum, "Trust Wallet");
|
|
24456
|
+
add(anyWin.okxwallet, "OKX Wallet");
|
|
24457
|
+
if (evmProviders.length === 0 && win.ethereum) {
|
|
24458
|
+
const eth = win.ethereum;
|
|
24459
|
+
let name = "Wallet";
|
|
24460
|
+
if (eth.isMetaMask && !eth.isPhantom && !eth.isRabby) name = "MetaMask";
|
|
24461
|
+
else if (eth.isRabby) name = "Rabby";
|
|
24462
|
+
else if (eth.isRainbow) name = "Rainbow";
|
|
24463
|
+
else if (eth.isCoinbaseWallet) name = "Coinbase";
|
|
24464
|
+
add(eth, name);
|
|
24465
|
+
}
|
|
23301
24466
|
}
|
|
23302
24467
|
for (const { provider, name } of evmProviders) {
|
|
23303
24468
|
try {
|
|
@@ -23350,12 +24515,9 @@ function WithdrawForm({
|
|
|
23350
24515
|
estimatedProcessingTime,
|
|
23351
24516
|
maxSlippagePercent,
|
|
23352
24517
|
priceImpactPercent,
|
|
23353
|
-
|
|
24518
|
+
senderAddress,
|
|
23354
24519
|
sourceChainId,
|
|
23355
24520
|
sourceTokenAddress,
|
|
23356
|
-
isWalletMatch,
|
|
23357
|
-
connectedWalletName,
|
|
23358
|
-
canWithdraw,
|
|
23359
24521
|
onWithdraw,
|
|
23360
24522
|
onWithdrawError,
|
|
23361
24523
|
onDepositWalletCreation,
|
|
@@ -23363,22 +24525,22 @@ function WithdrawForm({
|
|
|
23363
24525
|
footerLeft
|
|
23364
24526
|
}) {
|
|
23365
24527
|
const { colors: colors2, fonts, components } = useTheme();
|
|
23366
|
-
const [recipientAddress, setRecipientAddress] = (0,
|
|
23367
|
-
const [amount, setAmount] = (0,
|
|
23368
|
-
const [inputUnit, setInputUnit] = (0,
|
|
23369
|
-
const [isSubmitting, setIsSubmitting] = (0,
|
|
23370
|
-
const [submitError, setSubmitError] = (0,
|
|
23371
|
-
const [detailsExpanded, setDetailsExpanded] = (0,
|
|
23372
|
-
const [glossaryOpen, setGlossaryOpen] = (0,
|
|
23373
|
-
(0,
|
|
24528
|
+
const [recipientAddress, setRecipientAddress] = (0, import_react29.useState)(recipientAddressProp || "");
|
|
24529
|
+
const [amount, setAmount] = (0, import_react29.useState)("");
|
|
24530
|
+
const [inputUnit, setInputUnit] = (0, import_react29.useState)("crypto");
|
|
24531
|
+
const [isSubmitting, setIsSubmitting] = (0, import_react29.useState)(false);
|
|
24532
|
+
const [submitError, setSubmitError] = (0, import_react29.useState)(null);
|
|
24533
|
+
const [detailsExpanded, setDetailsExpanded] = (0, import_react29.useState)(false);
|
|
24534
|
+
const [glossaryOpen, setGlossaryOpen] = (0, import_react29.useState)(false);
|
|
24535
|
+
(0, import_react29.useEffect)(() => {
|
|
23374
24536
|
setRecipientAddress(recipientAddressProp || "");
|
|
23375
24537
|
setAmount("");
|
|
23376
24538
|
setInputUnit("crypto");
|
|
23377
24539
|
setSubmitError(null);
|
|
23378
24540
|
}, [recipientAddressProp]);
|
|
23379
24541
|
const trimmedAddress = recipientAddress.trim();
|
|
23380
|
-
const [debouncedAddress, setDebouncedAddress] = (0,
|
|
23381
|
-
(0,
|
|
24542
|
+
const [debouncedAddress, setDebouncedAddress] = (0, import_react29.useState)(trimmedAddress);
|
|
24543
|
+
(0, import_react29.useEffect)(() => {
|
|
23382
24544
|
const id = setTimeout(() => setDebouncedAddress(trimmedAddress), 500);
|
|
23383
24545
|
return () => clearTimeout(id);
|
|
23384
24546
|
}, [trimmedAddress]);
|
|
@@ -23395,7 +24557,7 @@ function WithdrawForm({
|
|
|
23395
24557
|
enabled: debouncedAddress.length > 5 && !!selectedChain
|
|
23396
24558
|
});
|
|
23397
24559
|
const isDebouncing = trimmedAddress !== debouncedAddress;
|
|
23398
|
-
const addressError = (0,
|
|
24560
|
+
const addressError = (0, import_react29.useMemo)(() => {
|
|
23399
24561
|
if (!trimmedAddress || trimmedAddress.length <= 5) return null;
|
|
23400
24562
|
if (isDebouncing || isVerifyingAddress) return null;
|
|
23401
24563
|
if (verifyError) return t8.invalidAddress;
|
|
@@ -23409,47 +24571,47 @@ function WithdrawForm({
|
|
|
23409
24571
|
return null;
|
|
23410
24572
|
}, [trimmedAddress, isDebouncing, isVerifyingAddress, verifyError, addressVerification, selectedChain, selectedToken]);
|
|
23411
24573
|
const isAddressValid = !isDebouncing && !!addressVerification?.valid && !addressError;
|
|
23412
|
-
const exchangeRate = (0,
|
|
24574
|
+
const exchangeRate = (0, import_react29.useMemo)(() => {
|
|
23413
24575
|
if (!balanceData?.exchangeRate) return 0;
|
|
23414
24576
|
return parseFloat(balanceData.exchangeRate);
|
|
23415
24577
|
}, [balanceData]);
|
|
23416
|
-
const balanceCrypto = (0,
|
|
24578
|
+
const balanceCrypto = (0, import_react29.useMemo)(() => {
|
|
23417
24579
|
if (!balanceData?.balanceHuman) return 0;
|
|
23418
24580
|
return parseFloat(balanceData.balanceHuman);
|
|
23419
24581
|
}, [balanceData]);
|
|
23420
|
-
const balanceUsdNum = (0,
|
|
24582
|
+
const balanceUsdNum = (0, import_react29.useMemo)(() => {
|
|
23421
24583
|
if (!balanceData?.balanceUsd) return 0;
|
|
23422
24584
|
return parseFloat(balanceData.balanceUsd);
|
|
23423
24585
|
}, [balanceData]);
|
|
23424
24586
|
const tokenSymbol = sourceTokenSymbol || balanceData?.symbol || "TOKEN";
|
|
23425
24587
|
const sourceDecimals = balanceData?.decimals ?? 6;
|
|
23426
|
-
const cryptoAmountFromInput = (0,
|
|
24588
|
+
const cryptoAmountFromInput = (0, import_react29.useMemo)(() => {
|
|
23427
24589
|
const val = parseFloat(amount);
|
|
23428
24590
|
if (!val || val <= 0) return 0;
|
|
23429
24591
|
if (inputUnit === "crypto") return val;
|
|
23430
24592
|
return exchangeRate > 0 ? val / exchangeRate : 0;
|
|
23431
24593
|
}, [amount, inputUnit, exchangeRate]);
|
|
23432
|
-
const fiatAmountFromInput = (0,
|
|
24594
|
+
const fiatAmountFromInput = (0, import_react29.useMemo)(() => {
|
|
23433
24595
|
const val = parseFloat(amount);
|
|
23434
24596
|
if (!val || val <= 0) return 0;
|
|
23435
24597
|
if (inputUnit === "fiat") return val;
|
|
23436
24598
|
return val * exchangeRate;
|
|
23437
24599
|
}, [amount, inputUnit, exchangeRate]);
|
|
23438
|
-
const convertedDisplay = (0,
|
|
24600
|
+
const convertedDisplay = (0, import_react29.useMemo)(() => {
|
|
23439
24601
|
if (!amount || parseFloat(amount) <= 0) return null;
|
|
23440
24602
|
if (inputUnit === "crypto") {
|
|
23441
24603
|
return `$${fiatAmountFromInput.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
23442
24604
|
}
|
|
23443
24605
|
return `${cryptoAmountFromInput.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 6 })} ${tokenSymbol}`;
|
|
23444
24606
|
}, [amount, inputUnit, fiatAmountFromInput, cryptoAmountFromInput, tokenSymbol]);
|
|
23445
|
-
const balanceDisplay = (0,
|
|
24607
|
+
const balanceDisplay = (0, import_react29.useMemo)(() => {
|
|
23446
24608
|
if (isLoadingBalance || !balanceData) return null;
|
|
23447
24609
|
if (inputUnit === "crypto") {
|
|
23448
24610
|
return `${balanceCrypto.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ${tokenSymbol}`;
|
|
23449
24611
|
}
|
|
23450
24612
|
return `$${balanceUsdNum.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
23451
24613
|
}, [isLoadingBalance, balanceData, inputUnit, balanceCrypto, balanceUsdNum, tokenSymbol]);
|
|
23452
|
-
const handleSwitchUnit = (0,
|
|
24614
|
+
const handleSwitchUnit = (0, import_react29.useCallback)(() => {
|
|
23453
24615
|
const val = parseFloat(amount);
|
|
23454
24616
|
if (!val || val <= 0 || exchangeRate <= 0) {
|
|
23455
24617
|
setInputUnit((u) => u === "crypto" ? "fiat" : "crypto");
|
|
@@ -23466,7 +24628,7 @@ function WithdrawForm({
|
|
|
23466
24628
|
setInputUnit("crypto");
|
|
23467
24629
|
}
|
|
23468
24630
|
}, [amount, inputUnit, exchangeRate, sourceDecimals]);
|
|
23469
|
-
const handleMaxClick = (0,
|
|
24631
|
+
const handleMaxClick = (0, import_react29.useCallback)(() => {
|
|
23470
24632
|
if (inputUnit === "crypto") {
|
|
23471
24633
|
if (balanceCrypto <= 0) return;
|
|
23472
24634
|
setAmount(balanceData?.balanceHuman ?? "0");
|
|
@@ -23478,7 +24640,7 @@ function WithdrawForm({
|
|
|
23478
24640
|
const isBelowMinimum = minimumWithdrawAmountUsd !== null && fiatAmountFromInput > 0 && fiatAmountFromInput < minimumWithdrawAmountUsd;
|
|
23479
24641
|
const isOverBalance = inputUnit === "crypto" ? cryptoAmountFromInput > 0 && balanceCrypto > 0 && cryptoAmountFromInput > balanceCrypto : fiatAmountFromInput > 0 && balanceUsdNum > 0 && fiatAmountFromInput > balanceUsdNum;
|
|
23480
24642
|
const isFormValid = trimmedAddress.length > 0 && amount.trim().length > 0 && cryptoAmountFromInput > 0 && isAddressValid && !isBelowMinimum && !isOverBalance && !!balanceData;
|
|
23481
|
-
const handleWithdraw = (0,
|
|
24643
|
+
const handleWithdraw = (0, import_react29.useCallback)(async () => {
|
|
23482
24644
|
if (!selectedToken || !selectedChain) return;
|
|
23483
24645
|
if (!isFormValid) return;
|
|
23484
24646
|
setIsSubmitting(true);
|
|
@@ -23490,12 +24652,43 @@ function WithdrawForm({
|
|
|
23490
24652
|
destinationTokenAddress: selectedChain.token_address,
|
|
23491
24653
|
recipientAddress: trimmedAddress
|
|
23492
24654
|
});
|
|
23493
|
-
|
|
24655
|
+
let amountBaseUnit = computeBaseUnit(
|
|
23494
24656
|
balanceData.balanceBaseUnit,
|
|
23495
24657
|
parseFloat(amount),
|
|
23496
24658
|
inputUnit === "crypto" ? balanceCrypto : balanceUsdNum
|
|
23497
24659
|
);
|
|
23498
|
-
|
|
24660
|
+
let humanAmount = toSafeDecimalString(cryptoAmountFromInput, sourceDecimals);
|
|
24661
|
+
if (isHypercoreChain(sourceChainId)) {
|
|
24662
|
+
try {
|
|
24663
|
+
const check = await checkHypercoreActivation(
|
|
24664
|
+
{
|
|
24665
|
+
source_address: senderAddress,
|
|
24666
|
+
recipient_address: depositWallet.address
|
|
24667
|
+
},
|
|
24668
|
+
publishableKey
|
|
24669
|
+
);
|
|
24670
|
+
if (!check.user_exists) {
|
|
24671
|
+
const fee = check.activation_fee;
|
|
24672
|
+
const maxSendable = balanceCrypto - fee;
|
|
24673
|
+
if (maxSendable <= 0) {
|
|
24674
|
+
throw new Error(
|
|
24675
|
+
`Insufficient balance. A ${fee} USDC activation fee is required for the first transfer to this address.`
|
|
24676
|
+
);
|
|
24677
|
+
}
|
|
24678
|
+
const requestedAmount = parseFloat(humanAmount);
|
|
24679
|
+
if (requestedAmount > maxSendable) {
|
|
24680
|
+
humanAmount = toSafeDecimalString(maxSendable, sourceDecimals);
|
|
24681
|
+
amountBaseUnit = computeBaseUnit(
|
|
24682
|
+
balanceData.balanceBaseUnit,
|
|
24683
|
+
maxSendable,
|
|
24684
|
+
balanceCrypto
|
|
24685
|
+
);
|
|
24686
|
+
}
|
|
24687
|
+
}
|
|
24688
|
+
} catch (e) {
|
|
24689
|
+
if (e instanceof Error && e.message.includes("activation fee")) throw e;
|
|
24690
|
+
}
|
|
24691
|
+
}
|
|
23499
24692
|
const txInfo = {
|
|
23500
24693
|
sourceChainType,
|
|
23501
24694
|
sourceChainId,
|
|
@@ -23510,33 +24703,67 @@ function WithdrawForm({
|
|
|
23510
24703
|
withdrawIntentAddress: depositWallet.address,
|
|
23511
24704
|
recipientAddress: trimmedAddress
|
|
23512
24705
|
};
|
|
23513
|
-
|
|
23514
|
-
|
|
23515
|
-
|
|
23516
|
-
|
|
23517
|
-
|
|
23518
|
-
|
|
23519
|
-
|
|
24706
|
+
const wallet = await detectBrowserWallet(sourceChainType, senderAddress);
|
|
24707
|
+
console.log("browser wallet", wallet);
|
|
24708
|
+
if (wallet) {
|
|
24709
|
+
try {
|
|
24710
|
+
if (wallet.chainFamily === "evm" && isHypercoreChain(sourceChainId)) {
|
|
24711
|
+
await sendHypercoreWithdraw({
|
|
24712
|
+
provider: wallet.provider,
|
|
24713
|
+
fromAddress: wallet.address,
|
|
24714
|
+
depositWalletAddress: depositWallet.address,
|
|
24715
|
+
sourceTokenAddress,
|
|
24716
|
+
amount: humanAmount,
|
|
24717
|
+
tokenSymbol,
|
|
24718
|
+
publishableKey
|
|
24719
|
+
});
|
|
24720
|
+
} else if (wallet.chainFamily === "evm") {
|
|
24721
|
+
await sendEvmWithdraw({
|
|
24722
|
+
provider: wallet.provider,
|
|
24723
|
+
fromAddress: wallet.address,
|
|
24724
|
+
depositWalletAddress: depositWallet.address,
|
|
24725
|
+
sourceTokenAddress,
|
|
24726
|
+
sourceChainId,
|
|
24727
|
+
amountBaseUnit
|
|
24728
|
+
});
|
|
24729
|
+
} else if (wallet.chainFamily === "solana") {
|
|
24730
|
+
await sendSolanaWithdraw({
|
|
24731
|
+
provider: wallet.provider,
|
|
24732
|
+
fromAddress: wallet.address,
|
|
24733
|
+
depositWalletAddress: depositWallet.address,
|
|
24734
|
+
sourceTokenAddress,
|
|
24735
|
+
amountBaseUnit,
|
|
24736
|
+
publishableKey
|
|
24737
|
+
});
|
|
24738
|
+
}
|
|
24739
|
+
} catch (walletErr) {
|
|
24740
|
+
console.error("[Unifold] Browser wallet send failed:", walletErr, {
|
|
24741
|
+
wallet: `${wallet.name} (${wallet.chainFamily})`,
|
|
23520
24742
|
sourceChainId,
|
|
23521
|
-
|
|
23522
|
-
});
|
|
23523
|
-
} else if (detectedWallet.chainFamily === "solana") {
|
|
23524
|
-
await sendSolanaWithdraw({
|
|
23525
|
-
provider: detectedWallet.provider,
|
|
23526
|
-
fromAddress: detectedWallet.address,
|
|
23527
|
-
depositWalletAddress: depositWallet.address,
|
|
23528
|
-
sourceTokenAddress,
|
|
24743
|
+
amount: humanAmount,
|
|
23529
24744
|
amountBaseUnit,
|
|
23530
|
-
|
|
24745
|
+
depositWallet: depositWallet.address
|
|
23531
24746
|
});
|
|
24747
|
+
throw walletErr;
|
|
23532
24748
|
}
|
|
23533
24749
|
} else if (onWithdraw) {
|
|
23534
|
-
|
|
24750
|
+
try {
|
|
24751
|
+
await onWithdraw(txInfo);
|
|
24752
|
+
} catch (callbackErr) {
|
|
24753
|
+
console.error("[Unifold] onWithdraw callback failed:", callbackErr, {
|
|
24754
|
+
sourceChainId,
|
|
24755
|
+
amount: humanAmount,
|
|
24756
|
+
amountBaseUnit,
|
|
24757
|
+
depositWallet: depositWallet.address
|
|
24758
|
+
});
|
|
24759
|
+
throw callbackErr;
|
|
24760
|
+
}
|
|
23535
24761
|
} else {
|
|
23536
24762
|
throw new Error("No withdrawal method available. Please connect a wallet.");
|
|
23537
24763
|
}
|
|
23538
24764
|
onWithdrawSubmitted?.(txInfo);
|
|
23539
24765
|
} catch (err) {
|
|
24766
|
+
console.error("[Unifold] Withdrawal failed:", err);
|
|
23540
24767
|
const raw = err instanceof Error ? err.message : "Withdrawal failed. Please try again.";
|
|
23541
24768
|
setSubmitError(raw.length > 120 ? "Withdrawal failed. Please try again." : raw);
|
|
23542
24769
|
onWithdrawError?.({
|
|
@@ -23547,10 +24774,10 @@ function WithdrawForm({
|
|
|
23547
24774
|
} finally {
|
|
23548
24775
|
setIsSubmitting(false);
|
|
23549
24776
|
}
|
|
23550
|
-
}, [selectedToken, selectedChain, isFormValid, cryptoAmountFromInput, sourceDecimals, trimmedAddress, publishableKey, onWithdraw,
|
|
23551
|
-
return /* @__PURE__ */ (0,
|
|
23552
|
-
/* @__PURE__ */ (0,
|
|
23553
|
-
/* @__PURE__ */ (0,
|
|
24777
|
+
}, [selectedToken, selectedChain, isFormValid, cryptoAmountFromInput, sourceDecimals, trimmedAddress, publishableKey, onWithdraw, sourceChainType, senderAddress, sourceTokenAddress, sourceChainId, onWithdrawError, onDepositWalletCreation, onWithdrawSubmitted, amount, inputUnit, balanceCrypto, balanceUsdNum, balanceData]);
|
|
24778
|
+
return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
|
|
24779
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { children: [
|
|
24780
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
23554
24781
|
"div",
|
|
23555
24782
|
{
|
|
23556
24783
|
className: "uf-text-xs uf-mb-1.5",
|
|
@@ -23558,7 +24785,7 @@ function WithdrawForm({
|
|
|
23558
24785
|
children: t8.recipientAddress
|
|
23559
24786
|
}
|
|
23560
24787
|
),
|
|
23561
|
-
/* @__PURE__ */ (0,
|
|
24788
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
23562
24789
|
"style",
|
|
23563
24790
|
{
|
|
23564
24791
|
dangerouslySetInnerHTML: {
|
|
@@ -23566,7 +24793,7 @@ function WithdrawForm({
|
|
|
23566
24793
|
}
|
|
23567
24794
|
}
|
|
23568
24795
|
),
|
|
23569
|
-
/* @__PURE__ */ (0,
|
|
24796
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
|
|
23570
24797
|
"div",
|
|
23571
24798
|
{
|
|
23572
24799
|
className: "uf-flex uf-items-center uf-gap-1 uf-pr-2",
|
|
@@ -23576,7 +24803,7 @@ function WithdrawForm({
|
|
|
23576
24803
|
border: `${components.input.borderWidth}px solid ${addressError ? colors2.error : components.input.borderColor}`
|
|
23577
24804
|
},
|
|
23578
24805
|
children: [
|
|
23579
|
-
/* @__PURE__ */ (0,
|
|
24806
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
23580
24807
|
"input",
|
|
23581
24808
|
{
|
|
23582
24809
|
type: "text",
|
|
@@ -23593,7 +24820,7 @@ function WithdrawForm({
|
|
|
23593
24820
|
}
|
|
23594
24821
|
}
|
|
23595
24822
|
),
|
|
23596
|
-
/* @__PURE__ */ (0,
|
|
24823
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
23597
24824
|
"button",
|
|
23598
24825
|
{
|
|
23599
24826
|
type: "button",
|
|
@@ -23610,27 +24837,27 @@ function WithdrawForm({
|
|
|
23610
24837
|
className: "uf-flex-shrink-0 uf-p-1 uf-rounded uf-transition-colors hover:uf-opacity-70",
|
|
23611
24838
|
style: { color: colors2.foregroundMuted },
|
|
23612
24839
|
title: "Paste from clipboard",
|
|
23613
|
-
children: /* @__PURE__ */ (0,
|
|
24840
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ClipboardPaste, { className: "uf-w-4 uf-h-4" })
|
|
23614
24841
|
}
|
|
23615
24842
|
)
|
|
23616
24843
|
]
|
|
23617
24844
|
}
|
|
23618
24845
|
),
|
|
23619
|
-
(isDebouncing || isVerifyingAddress) && trimmedAddress.length > 5 && /* @__PURE__ */ (0,
|
|
23620
|
-
/* @__PURE__ */ (0,
|
|
23621
|
-
/* @__PURE__ */ (0,
|
|
24846
|
+
(isDebouncing || isVerifyingAddress) && trimmedAddress.length > 5 && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-1.5", children: [
|
|
24847
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(LoaderCircle, { className: "uf-w-3 uf-h-3 uf-animate-spin", style: { color: colors2.foregroundMuted } }),
|
|
24848
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: t8.verifyingAddress })
|
|
23622
24849
|
] }),
|
|
23623
|
-
addressError && /* @__PURE__ */ (0,
|
|
23624
|
-
/* @__PURE__ */ (0,
|
|
23625
|
-
/* @__PURE__ */ (0,
|
|
24850
|
+
addressError && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-1.5", children: [
|
|
24851
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TriangleAlert, { className: "uf-w-3 uf-h-3", style: { color: colors2.error } }),
|
|
24852
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "uf-text-xs", style: { color: colors2.error, fontFamily: fonts.regular }, children: addressError })
|
|
23626
24853
|
] })
|
|
23627
24854
|
] }),
|
|
23628
|
-
/* @__PURE__ */ (0,
|
|
23629
|
-
/* @__PURE__ */ (0,
|
|
24855
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { children: [
|
|
24856
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-text-xs uf-mb-1.5", style: { color: components.card.labelColor, fontFamily: fonts.medium }, children: [
|
|
23630
24857
|
t8.amount,
|
|
23631
|
-
minimumWithdrawAmountUsd != null && minimumWithdrawAmountUsd > 0 && /* @__PURE__ */ (0,
|
|
24858
|
+
minimumWithdrawAmountUsd != null && minimumWithdrawAmountUsd > 0 && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { style: { color: colors2.warning, fontFamily: fonts.regular }, children: ` ($${minimumWithdrawAmountUsd.toFixed(2)} min)` })
|
|
23632
24859
|
] }),
|
|
23633
|
-
/* @__PURE__ */ (0,
|
|
24860
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
23634
24861
|
"style",
|
|
23635
24862
|
{
|
|
23636
24863
|
dangerouslySetInnerHTML: {
|
|
@@ -23638,7 +24865,7 @@ function WithdrawForm({
|
|
|
23638
24865
|
}
|
|
23639
24866
|
}
|
|
23640
24867
|
),
|
|
23641
|
-
/* @__PURE__ */ (0,
|
|
24868
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
|
|
23642
24869
|
"div",
|
|
23643
24870
|
{
|
|
23644
24871
|
className: "uf-flex uf-items-center uf-gap-2 uf-px-3 uf-py-2.5",
|
|
@@ -23648,7 +24875,7 @@ function WithdrawForm({
|
|
|
23648
24875
|
border: `${components.input.borderWidth}px solid ${components.input.borderColor}`
|
|
23649
24876
|
},
|
|
23650
24877
|
children: [
|
|
23651
|
-
/* @__PURE__ */ (0,
|
|
24878
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
23652
24879
|
"input",
|
|
23653
24880
|
{
|
|
23654
24881
|
type: "text",
|
|
@@ -23669,8 +24896,8 @@ function WithdrawForm({
|
|
|
23669
24896
|
}
|
|
23670
24897
|
}
|
|
23671
24898
|
),
|
|
23672
|
-
/* @__PURE__ */ (0,
|
|
23673
|
-
/* @__PURE__ */ (0,
|
|
24899
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "uf-text-sm uf-shrink-0", style: { color: colors2.foregroundMuted, fontFamily: fonts.medium }, children: inputUnit === "crypto" ? tokenSymbol : "USD" }),
|
|
24900
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
23674
24901
|
"button",
|
|
23675
24902
|
{
|
|
23676
24903
|
type: "button",
|
|
@@ -23683,10 +24910,10 @@ function WithdrawForm({
|
|
|
23683
24910
|
]
|
|
23684
24911
|
}
|
|
23685
24912
|
),
|
|
23686
|
-
/* @__PURE__ */ (0,
|
|
23687
|
-
/* @__PURE__ */ (0,
|
|
23688
|
-
/* @__PURE__ */ (0,
|
|
23689
|
-
exchangeRate > 0 && /* @__PURE__ */ (0,
|
|
24913
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-mt-1.5 uf-px-3", children: [
|
|
24914
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
|
|
24915
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: convertedDisplay || (inputUnit === "crypto" ? "$0.00" : `0.00 ${tokenSymbol}`) }),
|
|
24916
|
+
exchangeRate > 0 && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
23690
24917
|
"button",
|
|
23691
24918
|
{
|
|
23692
24919
|
type: "button",
|
|
@@ -23694,49 +24921,49 @@ function WithdrawForm({
|
|
|
23694
24921
|
className: "uf-p-0.5 uf-rounded uf-transition-colors hover:uf-opacity-70",
|
|
23695
24922
|
style: { color: colors2.foregroundMuted },
|
|
23696
24923
|
title: "Switch unit",
|
|
23697
|
-
children: /* @__PURE__ */ (0,
|
|
24924
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ArrowUpDown, { className: "uf-w-3 uf-h-3" })
|
|
23698
24925
|
}
|
|
23699
24926
|
)
|
|
23700
24927
|
] }),
|
|
23701
|
-
/* @__PURE__ */ (0,
|
|
23702
|
-
balanceDisplay && /* @__PURE__ */ (0,
|
|
24928
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { children: [
|
|
24929
|
+
balanceDisplay && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: [
|
|
23703
24930
|
t8.balance,
|
|
23704
24931
|
": ",
|
|
23705
24932
|
balanceDisplay
|
|
23706
24933
|
] }),
|
|
23707
|
-
isLoadingBalance && /* @__PURE__ */ (0,
|
|
24934
|
+
isLoadingBalance && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "uf-h-3 uf-w-16 uf-bg-muted uf-rounded uf-animate-pulse" })
|
|
23708
24935
|
] })
|
|
23709
24936
|
] })
|
|
23710
24937
|
] }),
|
|
23711
|
-
/* @__PURE__ */ (0,
|
|
23712
|
-
/* @__PURE__ */ (0,
|
|
24938
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-px-2.5", style: { backgroundColor: components.card.backgroundColor, borderRadius: components.card.borderRadius, border: `${components.card.borderWidth}px solid ${components.card.borderColor}` }, children: [
|
|
24939
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
|
|
23713
24940
|
"button",
|
|
23714
24941
|
{
|
|
23715
24942
|
type: "button",
|
|
23716
24943
|
onClick: () => setDetailsExpanded(!detailsExpanded),
|
|
23717
24944
|
className: "uf-w-full uf-flex uf-items-center uf-justify-between uf-py-2.5",
|
|
23718
24945
|
children: [
|
|
23719
|
-
/* @__PURE__ */ (0,
|
|
23720
|
-
/* @__PURE__ */ (0,
|
|
23721
|
-
/* @__PURE__ */ (0,
|
|
24946
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
24947
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Clock, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
|
|
24948
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
|
|
23722
24949
|
tCrypto.processingTime.label,
|
|
23723
24950
|
":",
|
|
23724
24951
|
" ",
|
|
23725
|
-
/* @__PURE__ */ (0,
|
|
24952
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: formatProcessingTime2(estimatedProcessingTime) })
|
|
23726
24953
|
] })
|
|
23727
24954
|
] }),
|
|
23728
|
-
detailsExpanded ? /* @__PURE__ */ (0,
|
|
24955
|
+
detailsExpanded ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ChevronUp, { className: "uf-w-4 uf-h-4", style: { color: components.card.actionColor } }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ChevronDown, { className: "uf-w-4 uf-h-4", style: { color: components.card.actionColor } })
|
|
23729
24956
|
]
|
|
23730
24957
|
}
|
|
23731
24958
|
),
|
|
23732
|
-
detailsExpanded && /* @__PURE__ */ (0,
|
|
23733
|
-
/* @__PURE__ */ (0,
|
|
23734
|
-
/* @__PURE__ */ (0,
|
|
23735
|
-
/* @__PURE__ */ (0,
|
|
24959
|
+
detailsExpanded && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-pb-3 uf-space-y-2.5", children: [
|
|
24960
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
24961
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ShieldCheck, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
|
|
24962
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
|
|
23736
24963
|
tCrypto.slippage.label,
|
|
23737
24964
|
":",
|
|
23738
24965
|
" ",
|
|
23739
|
-
/* @__PURE__ */ (0,
|
|
24966
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: [
|
|
23740
24967
|
tCrypto.slippage.auto,
|
|
23741
24968
|
" \u2022 ",
|
|
23742
24969
|
(maxSlippagePercent ?? 0.25).toFixed(2),
|
|
@@ -23744,13 +24971,13 @@ function WithdrawForm({
|
|
|
23744
24971
|
] })
|
|
23745
24972
|
] })
|
|
23746
24973
|
] }),
|
|
23747
|
-
/* @__PURE__ */ (0,
|
|
23748
|
-
/* @__PURE__ */ (0,
|
|
23749
|
-
/* @__PURE__ */ (0,
|
|
24974
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
24975
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(DollarSign, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
|
|
24976
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
|
|
23750
24977
|
tCrypto.priceImpact.label,
|
|
23751
24978
|
":",
|
|
23752
24979
|
" ",
|
|
23753
|
-
/* @__PURE__ */ (0,
|
|
24980
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: [
|
|
23754
24981
|
(priceImpactPercent ?? 0).toFixed(2),
|
|
23755
24982
|
"%"
|
|
23756
24983
|
] })
|
|
@@ -23758,23 +24985,12 @@ function WithdrawForm({
|
|
|
23758
24985
|
] })
|
|
23759
24986
|
] })
|
|
23760
24987
|
] }),
|
|
23761
|
-
|
|
23762
|
-
"div",
|
|
23763
|
-
{
|
|
23764
|
-
className: "uf-flex uf-items-start uf-gap-2.5 uf-p-3 uf-rounded-xl",
|
|
23765
|
-
style: { backgroundColor: colors2.card, border: `1px solid ${colors2.border}` },
|
|
23766
|
-
children: [
|
|
23767
|
-
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Wallet, { className: "uf-w-4 uf-h-4 uf-flex-shrink-0 uf-mt-0.5", style: { color: colors2.warning } }),
|
|
23768
|
-
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: "No connected wallet detected. Please connect a wallet that matches your account to withdraw." })
|
|
23769
|
-
]
|
|
23770
|
-
}
|
|
23771
|
-
),
|
|
23772
|
-
isWalletMatch && connectedWalletName ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
24988
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
23773
24989
|
"button",
|
|
23774
24990
|
{
|
|
23775
24991
|
type: "button",
|
|
23776
24992
|
onClick: handleWithdraw,
|
|
23777
|
-
disabled: !isFormValid ||
|
|
24993
|
+
disabled: !isFormValid || isSubmitting || !selectedToken || !selectedChain,
|
|
23778
24994
|
className: "uf-w-full uf-py-3 uf-text-sm uf-font-medium uf-transition-colors disabled:uf-opacity-50 disabled:uf-cursor-not-allowed uf-flex uf-items-center uf-justify-center uf-gap-2",
|
|
23779
24995
|
style: {
|
|
23780
24996
|
backgroundColor: colors2.primary,
|
|
@@ -23783,40 +24999,20 @@ function WithdrawForm({
|
|
|
23783
24999
|
borderRadius: components.button.borderRadius,
|
|
23784
25000
|
border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
|
|
23785
25001
|
},
|
|
23786
|
-
children: isSubmitting ? /* @__PURE__ */ (0,
|
|
23787
|
-
/* @__PURE__ */ (0,
|
|
25002
|
+
children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
|
|
25003
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
|
|
23788
25004
|
"Processing..."
|
|
23789
|
-
] }) : isOverBalance ? /* @__PURE__ */ (0,
|
|
23790
|
-
/* @__PURE__ */ (0,
|
|
23791
|
-
|
|
23792
|
-
connectedWalletName
|
|
25005
|
+
] }) : isOverBalance ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_jsx_runtime71.Fragment, { children: "Insufficient balance" }) : isBelowMinimum ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_jsx_runtime71.Fragment, { children: "Minimum amount not met" }) : submitError ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_jsx_runtime71.Fragment, { children: "Withdrawal failed. Try again" }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
|
|
25006
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Wallet, { className: "uf-w-4 uf-h-4" }),
|
|
25007
|
+
t8.withdraw
|
|
23793
25008
|
] })
|
|
23794
25009
|
}
|
|
23795
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
23796
|
-
"button",
|
|
23797
|
-
{
|
|
23798
|
-
type: "button",
|
|
23799
|
-
onClick: handleWithdraw,
|
|
23800
|
-
disabled: !isFormValid || !canWithdraw || isSubmitting || !selectedToken || !selectedChain,
|
|
23801
|
-
className: "uf-w-full uf-py-3 uf-text-sm uf-font-medium uf-transition-colors disabled:uf-opacity-50 disabled:uf-cursor-not-allowed",
|
|
23802
|
-
style: {
|
|
23803
|
-
backgroundColor: colors2.primary,
|
|
23804
|
-
color: colors2.primaryForeground,
|
|
23805
|
-
fontFamily: fonts.medium,
|
|
23806
|
-
borderRadius: components.button.borderRadius,
|
|
23807
|
-
border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
|
|
23808
|
-
},
|
|
23809
|
-
children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("span", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2", children: [
|
|
23810
|
-
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
|
|
23811
|
-
"Processing..."
|
|
23812
|
-
] }) : isOverBalance ? "Insufficient balance" : isBelowMinimum ? "Minimum amount not met" : submitError ? "Withdrawal failed. Try again" : t8.withdraw
|
|
23813
|
-
}
|
|
23814
25010
|
),
|
|
23815
|
-
/* @__PURE__ */ (0,
|
|
23816
|
-
/* @__PURE__ */ (0,
|
|
23817
|
-
/* @__PURE__ */ (0,
|
|
25011
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-text-xs uf-pt-1", children: [
|
|
25012
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { children: footerLeft }),
|
|
25013
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(DepositFooterLinks, { onGlossaryClick: () => setGlossaryOpen(true) })
|
|
23818
25014
|
] }),
|
|
23819
|
-
/* @__PURE__ */ (0,
|
|
25015
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
23820
25016
|
GlossaryModal,
|
|
23821
25017
|
{
|
|
23822
25018
|
open: glossaryOpen,
|
|
@@ -23862,7 +25058,7 @@ function WithdrawExecutionItem({
|
|
|
23862
25058
|
return "$0.00";
|
|
23863
25059
|
}
|
|
23864
25060
|
};
|
|
23865
|
-
return /* @__PURE__ */ (0,
|
|
25061
|
+
return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
|
|
23866
25062
|
"button",
|
|
23867
25063
|
{
|
|
23868
25064
|
onClick,
|
|
@@ -23873,8 +25069,8 @@ function WithdrawExecutionItem({
|
|
|
23873
25069
|
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
23874
25070
|
},
|
|
23875
25071
|
children: [
|
|
23876
|
-
/* @__PURE__ */ (0,
|
|
23877
|
-
/* @__PURE__ */ (0,
|
|
25072
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "uf-relative uf-flex-shrink-0 uf-w-9 uf-h-9", children: [
|
|
25073
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
23878
25074
|
"img",
|
|
23879
25075
|
{
|
|
23880
25076
|
src: execution.destination_token_metadata?.icon_url || getIconUrl("/icons/tokens/svg/usdc.svg"),
|
|
@@ -23885,12 +25081,12 @@ function WithdrawExecutionItem({
|
|
|
23885
25081
|
className: "uf-rounded-full uf-w-9 uf-h-9"
|
|
23886
25082
|
}
|
|
23887
25083
|
),
|
|
23888
|
-
isPending ? /* @__PURE__ */ (0,
|
|
25084
|
+
isPending ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
23889
25085
|
"div",
|
|
23890
25086
|
{
|
|
23891
25087
|
className: "uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-rounded-full uf-p-0.5",
|
|
23892
25088
|
style: { backgroundColor: colors2.warning },
|
|
23893
|
-
children: /* @__PURE__ */ (0,
|
|
25089
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
23894
25090
|
"svg",
|
|
23895
25091
|
{
|
|
23896
25092
|
width: "10",
|
|
@@ -23898,7 +25094,7 @@ function WithdrawExecutionItem({
|
|
|
23898
25094
|
viewBox: "0 0 12 12",
|
|
23899
25095
|
fill: "none",
|
|
23900
25096
|
className: "uf-animate-spin uf-block",
|
|
23901
|
-
children: /* @__PURE__ */ (0,
|
|
25097
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
23902
25098
|
"path",
|
|
23903
25099
|
{
|
|
23904
25100
|
d: "M6 1V3M6 9V11M1 6H3M9 6H11M2.5 2.5L4 4M8 8L9.5 9.5M2.5 9.5L4 8M8 4L9.5 2.5",
|
|
@@ -23910,12 +25106,12 @@ function WithdrawExecutionItem({
|
|
|
23910
25106
|
}
|
|
23911
25107
|
)
|
|
23912
25108
|
}
|
|
23913
|
-
) : /* @__PURE__ */ (0,
|
|
25109
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
23914
25110
|
"div",
|
|
23915
25111
|
{
|
|
23916
25112
|
className: "uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-rounded-full uf-p-0.5",
|
|
23917
25113
|
style: { backgroundColor: colors2.success },
|
|
23918
|
-
children: /* @__PURE__ */ (0,
|
|
25114
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
23919
25115
|
"svg",
|
|
23920
25116
|
{
|
|
23921
25117
|
width: "10",
|
|
@@ -23923,7 +25119,7 @@ function WithdrawExecutionItem({
|
|
|
23923
25119
|
viewBox: "0 0 12 12",
|
|
23924
25120
|
fill: "none",
|
|
23925
25121
|
className: "uf-block",
|
|
23926
|
-
children: /* @__PURE__ */ (0,
|
|
25122
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
23927
25123
|
"path",
|
|
23928
25124
|
{
|
|
23929
25125
|
d: "M10 3L4.5 8.5L2 6",
|
|
@@ -23938,8 +25134,8 @@ function WithdrawExecutionItem({
|
|
|
23938
25134
|
}
|
|
23939
25135
|
)
|
|
23940
25136
|
] }),
|
|
23941
|
-
/* @__PURE__ */ (0,
|
|
23942
|
-
/* @__PURE__ */ (0,
|
|
25137
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "uf-flex-1 uf-min-w-0", children: [
|
|
25138
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
23943
25139
|
"h3",
|
|
23944
25140
|
{
|
|
23945
25141
|
className: "uf-font-medium uf-text-sm uf-leading-tight",
|
|
@@ -23950,7 +25146,7 @@ function WithdrawExecutionItem({
|
|
|
23950
25146
|
children: isPending ? "Withdrawal processing" : "Withdrawal completed"
|
|
23951
25147
|
}
|
|
23952
25148
|
),
|
|
23953
|
-
/* @__PURE__ */ (0,
|
|
25149
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
23954
25150
|
"p",
|
|
23955
25151
|
{
|
|
23956
25152
|
className: "uf-text-xs uf-leading-tight",
|
|
@@ -23962,7 +25158,7 @@ function WithdrawExecutionItem({
|
|
|
23962
25158
|
}
|
|
23963
25159
|
)
|
|
23964
25160
|
] }),
|
|
23965
|
-
/* @__PURE__ */ (0,
|
|
25161
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
23966
25162
|
"span",
|
|
23967
25163
|
{
|
|
23968
25164
|
className: "uf-font-medium uf-text-sm uf-flex-shrink-0",
|
|
@@ -23973,7 +25169,7 @@ function WithdrawExecutionItem({
|
|
|
23973
25169
|
children: formatUsdAmount2(execution.source_amount_usd || "0")
|
|
23974
25170
|
}
|
|
23975
25171
|
),
|
|
23976
|
-
/* @__PURE__ */ (0,
|
|
25172
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
23977
25173
|
ChevronRight,
|
|
23978
25174
|
{
|
|
23979
25175
|
className: "uf-w-4 uf-h-4 uf-flex-shrink-0",
|
|
@@ -23996,9 +25192,9 @@ function WithdrawConfirmingView({
|
|
|
23996
25192
|
onViewTracker
|
|
23997
25193
|
}) {
|
|
23998
25194
|
const { colors: colors2, fonts, components } = useTheme();
|
|
23999
|
-
const [showButton, setShowButton] = (0,
|
|
25195
|
+
const [showButton, setShowButton] = (0, import_react30.useState)(false);
|
|
24000
25196
|
const latestExecution = executions.length > 0 ? executions[executions.length - 1] : null;
|
|
24001
|
-
(0,
|
|
25197
|
+
(0, import_react30.useEffect)(() => {
|
|
24002
25198
|
if (latestExecution) return;
|
|
24003
25199
|
const timer = setTimeout(() => setShowButton(true), SHOW_BUTTON_DELAY_MS);
|
|
24004
25200
|
return () => clearTimeout(timer);
|
|
@@ -24006,11 +25202,11 @@ function WithdrawConfirmingView({
|
|
|
24006
25202
|
const btnRadius = components.button.borderRadius;
|
|
24007
25203
|
const btnBorder = `${components.button.borderWidth}px solid ${components.button.borderColor}`;
|
|
24008
25204
|
if (latestExecution) {
|
|
24009
|
-
return /* @__PURE__ */ (0,
|
|
24010
|
-
/* @__PURE__ */ (0,
|
|
24011
|
-
/* @__PURE__ */ (0,
|
|
24012
|
-
/* @__PURE__ */ (0,
|
|
24013
|
-
/* @__PURE__ */ (0,
|
|
25205
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
|
|
25206
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(DepositHeader, { title: "Withdrawal Details", showClose: true, onClose }),
|
|
25207
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(DepositDetailContent, { execution: latestExecution, variant: "withdraw" }),
|
|
25208
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-gap-2 uf-px-2 uf-pt-2", children: [
|
|
25209
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
24014
25210
|
"button",
|
|
24015
25211
|
{
|
|
24016
25212
|
type: "button",
|
|
@@ -24026,7 +25222,7 @@ function WithdrawConfirmingView({
|
|
|
24026
25222
|
children: "Withdrawal History"
|
|
24027
25223
|
}
|
|
24028
25224
|
),
|
|
24029
|
-
/* @__PURE__ */ (0,
|
|
25225
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
24030
25226
|
"button",
|
|
24031
25227
|
{
|
|
24032
25228
|
type: "button",
|
|
@@ -24043,7 +25239,7 @@ function WithdrawConfirmingView({
|
|
|
24043
25239
|
}
|
|
24044
25240
|
)
|
|
24045
25241
|
] }),
|
|
24046
|
-
/* @__PURE__ */ (0,
|
|
25242
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
24047
25243
|
PoweredByUnifold,
|
|
24048
25244
|
{
|
|
24049
25245
|
color: colors2.foregroundMuted,
|
|
@@ -24052,15 +25248,15 @@ function WithdrawConfirmingView({
|
|
|
24052
25248
|
) })
|
|
24053
25249
|
] });
|
|
24054
25250
|
}
|
|
24055
|
-
return /* @__PURE__ */ (0,
|
|
24056
|
-
/* @__PURE__ */ (0,
|
|
24057
|
-
/* @__PURE__ */ (0,
|
|
24058
|
-
/* @__PURE__ */ (0,
|
|
25251
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
|
|
25252
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(DepositHeader, { title: "Withdrawal Status", showClose: true, onClose }),
|
|
25253
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-16 uf-px-4", children: [
|
|
25254
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
24059
25255
|
"div",
|
|
24060
25256
|
{
|
|
24061
25257
|
className: "uf-w-20 uf-h-20 uf-rounded-full uf-flex uf-items-center uf-justify-center uf-mb-6",
|
|
24062
25258
|
style: { backgroundColor: `${colors2.primary}20` },
|
|
24063
|
-
children: /* @__PURE__ */ (0,
|
|
25259
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
24064
25260
|
"svg",
|
|
24065
25261
|
{
|
|
24066
25262
|
width: "40",
|
|
@@ -24068,7 +25264,7 @@ function WithdrawConfirmingView({
|
|
|
24068
25264
|
viewBox: "0 0 24 24",
|
|
24069
25265
|
fill: "none",
|
|
24070
25266
|
className: "uf-animate-spin",
|
|
24071
|
-
children: /* @__PURE__ */ (0,
|
|
25267
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
24072
25268
|
"path",
|
|
24073
25269
|
{
|
|
24074
25270
|
d: "M21 12a9 9 0 1 1-6.22-8.56",
|
|
@@ -24081,7 +25277,7 @@ function WithdrawConfirmingView({
|
|
|
24081
25277
|
)
|
|
24082
25278
|
}
|
|
24083
25279
|
),
|
|
24084
|
-
/* @__PURE__ */ (0,
|
|
25280
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
24085
25281
|
"h3",
|
|
24086
25282
|
{
|
|
24087
25283
|
className: "uf-text-xl uf-mb-2",
|
|
@@ -24089,7 +25285,7 @@ function WithdrawConfirmingView({
|
|
|
24089
25285
|
children: "Checking Withdrawal"
|
|
24090
25286
|
}
|
|
24091
25287
|
),
|
|
24092
|
-
/* @__PURE__ */ (0,
|
|
25288
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
|
|
24093
25289
|
"p",
|
|
24094
25290
|
{
|
|
24095
25291
|
className: "uf-text-sm uf-text-center",
|
|
@@ -24105,7 +25301,7 @@ function WithdrawConfirmingView({
|
|
|
24105
25301
|
}
|
|
24106
25302
|
)
|
|
24107
25303
|
] }),
|
|
24108
|
-
showButton && /* @__PURE__ */ (0,
|
|
25304
|
+
showButton && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-px-1 uf-pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
24109
25305
|
"button",
|
|
24110
25306
|
{
|
|
24111
25307
|
type: "button",
|
|
@@ -24121,7 +25317,7 @@ function WithdrawConfirmingView({
|
|
|
24121
25317
|
children: "Withdrawal History"
|
|
24122
25318
|
}
|
|
24123
25319
|
) }),
|
|
24124
|
-
/* @__PURE__ */ (0,
|
|
25320
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
24125
25321
|
PoweredByUnifold,
|
|
24126
25322
|
{
|
|
24127
25323
|
color: colors2.foregroundMuted,
|
|
@@ -24151,14 +25347,14 @@ function WithdrawModal({
|
|
|
24151
25347
|
hideOverlay = false
|
|
24152
25348
|
}) {
|
|
24153
25349
|
const { colors: colors2, fonts, components } = useTheme();
|
|
24154
|
-
const [containerEl, setContainerEl] = (0,
|
|
24155
|
-
const containerCallbackRef = (0,
|
|
25350
|
+
const [containerEl, setContainerEl] = (0, import_react27.useState)(null);
|
|
25351
|
+
const containerCallbackRef = (0, import_react27.useCallback)((el) => {
|
|
24156
25352
|
setContainerEl(el);
|
|
24157
25353
|
}, []);
|
|
24158
|
-
const [resolvedTheme, setResolvedTheme] = (0,
|
|
25354
|
+
const [resolvedTheme, setResolvedTheme] = (0, import_react27.useState)(
|
|
24159
25355
|
theme === "auto" ? "dark" : theme
|
|
24160
25356
|
);
|
|
24161
|
-
(0,
|
|
25357
|
+
(0, import_react27.useEffect)(() => {
|
|
24162
25358
|
if (theme === "auto") {
|
|
24163
25359
|
const mq = window.matchMedia("(prefers-color-scheme: dark)");
|
|
24164
25360
|
setResolvedTheme(mq.matches ? "dark" : "light");
|
|
@@ -24187,28 +25383,12 @@ function WithdrawModal({
|
|
|
24187
25383
|
publishableKey,
|
|
24188
25384
|
enabled: open
|
|
24189
25385
|
});
|
|
24190
|
-
const [selectedToken, setSelectedToken] = (0,
|
|
24191
|
-
const [selectedChain, setSelectedChain] = (0,
|
|
24192
|
-
const [
|
|
24193
|
-
const
|
|
24194
|
-
const
|
|
24195
|
-
(0,
|
|
24196
|
-
if (!senderAddress || !open) {
|
|
24197
|
-
setDetectedWallet(null);
|
|
24198
|
-
return;
|
|
24199
|
-
}
|
|
24200
|
-
let cancelled = false;
|
|
24201
|
-
detectBrowserWallet(sourceChainType, senderAddress).then((wallet) => {
|
|
24202
|
-
if (!cancelled) setDetectedWallet(wallet);
|
|
24203
|
-
});
|
|
24204
|
-
return () => {
|
|
24205
|
-
cancelled = true;
|
|
24206
|
-
};
|
|
24207
|
-
}, [senderAddress, sourceChainType, open]);
|
|
24208
|
-
const [view, setView] = (0, import_react26.useState)("form");
|
|
24209
|
-
const [withdrawDepositWalletId, setWithdrawDepositWalletId] = (0, import_react26.useState)();
|
|
24210
|
-
const [selectedExecution, setSelectedExecution] = (0, import_react26.useState)(null);
|
|
24211
|
-
const [submittedTxInfo, setSubmittedTxInfo] = (0, import_react26.useState)(null);
|
|
25386
|
+
const [selectedToken, setSelectedToken] = (0, import_react27.useState)(null);
|
|
25387
|
+
const [selectedChain, setSelectedChain] = (0, import_react27.useState)(null);
|
|
25388
|
+
const [view, setView] = (0, import_react27.useState)("form");
|
|
25389
|
+
const [withdrawDepositWalletId, setWithdrawDepositWalletId] = (0, import_react27.useState)();
|
|
25390
|
+
const [selectedExecution, setSelectedExecution] = (0, import_react27.useState)(null);
|
|
25391
|
+
const [submittedTxInfo, setSubmittedTxInfo] = (0, import_react27.useState)(null);
|
|
24212
25392
|
const { executions: realtimeExecutions } = useWithdrawPolling({
|
|
24213
25393
|
userId: externalUserId,
|
|
24214
25394
|
publishableKey,
|
|
@@ -24223,7 +25403,7 @@ function WithdrawModal({
|
|
|
24223
25403
|
refetchInterval: view === "tracker" || view === "detail" ? 5e3 : 15e3
|
|
24224
25404
|
});
|
|
24225
25405
|
const allWithdrawals = allWithdrawalsData?.data ?? [];
|
|
24226
|
-
const handleDepositWalletCreation = (0,
|
|
25406
|
+
const handleDepositWalletCreation = (0, import_react27.useCallback)(async (params) => {
|
|
24227
25407
|
const { data: wallets } = await createDepositAddress(
|
|
24228
25408
|
{
|
|
24229
25409
|
external_user_id: externalUserId,
|
|
@@ -24242,11 +25422,11 @@ function WithdrawModal({
|
|
|
24242
25422
|
setWithdrawDepositWalletId(depositWallet.id);
|
|
24243
25423
|
return depositWallet;
|
|
24244
25424
|
}, [externalUserId, publishableKey, sourceChainType]);
|
|
24245
|
-
const handleWithdrawSubmitted = (0,
|
|
25425
|
+
const handleWithdrawSubmitted = (0, import_react27.useCallback)((txInfo) => {
|
|
24246
25426
|
setSubmittedTxInfo(txInfo);
|
|
24247
25427
|
setView("confirming");
|
|
24248
25428
|
}, []);
|
|
24249
|
-
(0,
|
|
25429
|
+
(0, import_react27.useEffect)(() => {
|
|
24250
25430
|
if (!destinationTokens.length || selectedToken) return;
|
|
24251
25431
|
const first = destinationTokens[0];
|
|
24252
25432
|
if (first?.chains.length > 0) {
|
|
@@ -24254,8 +25434,8 @@ function WithdrawModal({
|
|
|
24254
25434
|
setSelectedChain(first.chains[0]);
|
|
24255
25435
|
}
|
|
24256
25436
|
}, [destinationTokens, selectedToken]);
|
|
24257
|
-
const resetViewTimeoutRef = (0,
|
|
24258
|
-
const handleClose = (0,
|
|
25437
|
+
const resetViewTimeoutRef = (0, import_react27.useRef)(null);
|
|
25438
|
+
const handleClose = (0, import_react27.useCallback)(() => {
|
|
24259
25439
|
onOpenChange(false);
|
|
24260
25440
|
if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
|
|
24261
25441
|
resetViewTimeoutRef.current = setTimeout(() => {
|
|
@@ -24268,7 +25448,7 @@ function WithdrawModal({
|
|
|
24268
25448
|
resetViewTimeoutRef.current = null;
|
|
24269
25449
|
}, 200);
|
|
24270
25450
|
}, [onOpenChange]);
|
|
24271
|
-
(0,
|
|
25451
|
+
(0, import_react27.useLayoutEffect)(() => {
|
|
24272
25452
|
if (!open) return;
|
|
24273
25453
|
if (resetViewTimeoutRef.current) {
|
|
24274
25454
|
clearTimeout(resetViewTimeoutRef.current);
|
|
@@ -24281,26 +25461,25 @@ function WithdrawModal({
|
|
|
24281
25461
|
setSubmittedTxInfo(null);
|
|
24282
25462
|
setWithdrawDepositWalletId(void 0);
|
|
24283
25463
|
}, [open]);
|
|
24284
|
-
(0,
|
|
25464
|
+
(0, import_react27.useEffect)(() => () => {
|
|
24285
25465
|
if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
|
|
24286
25466
|
}, []);
|
|
24287
|
-
const handleTokenSymbolChange = (0,
|
|
25467
|
+
const handleTokenSymbolChange = (0, import_react27.useCallback)((symbol) => {
|
|
24288
25468
|
const tok = destinationTokens.find((t11) => t11.symbol === symbol);
|
|
24289
25469
|
if (tok) {
|
|
24290
25470
|
setSelectedToken(tok);
|
|
24291
25471
|
if (tok.chains.length > 0) setSelectedChain(tok.chains[0]);
|
|
24292
25472
|
}
|
|
24293
25473
|
}, [destinationTokens]);
|
|
24294
|
-
const handleChainKeyChange = (0,
|
|
25474
|
+
const handleChainKeyChange = (0, import_react27.useCallback)((chainKey) => {
|
|
24295
25475
|
if (!selectedToken) return;
|
|
24296
25476
|
const chain = selectedToken.chains.find((c) => getChainKey5(c.chain_id, c.chain_type) === chainKey);
|
|
24297
25477
|
if (chain) setSelectedChain(chain);
|
|
24298
25478
|
}, [selectedToken]);
|
|
24299
25479
|
const isSourceSupported = sourceValidation?.isSupported ?? null;
|
|
24300
|
-
const canWithdraw = !!onWithdraw || isWalletMatch;
|
|
24301
25480
|
const isAnyLoading = tokensLoading || isCheckingSourceToken;
|
|
24302
|
-
const withdrawPoweredByFooter = /* @__PURE__ */ (0,
|
|
24303
|
-
return /* @__PURE__ */ (0,
|
|
25481
|
+
const withdrawPoweredByFooter = /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(PoweredByUnifold, { color: colors2.foregroundMuted, className: "uf-flex uf-justify-center uf-shrink-0" }) });
|
|
25482
|
+
return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(PortalContainerProvider, { value: hideOverlay ? containerEl : null, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Dialog2, { open: hideOverlay || open, onOpenChange: hideOverlay ? void 0 : handleClose, modal: !hideOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
24304
25483
|
DialogContent2,
|
|
24305
25484
|
{
|
|
24306
25485
|
ref: hideOverlay ? containerCallbackRef : void 0,
|
|
@@ -24309,7 +25488,7 @@ function WithdrawModal({
|
|
|
24309
25488
|
style: { backgroundColor: colors2.background },
|
|
24310
25489
|
onPointerDownOutside: (e) => e.preventDefault(),
|
|
24311
25490
|
onInteractOutside: (e) => e.preventDefault(),
|
|
24312
|
-
children: /* @__PURE__ */ (0,
|
|
25491
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(ThemeStyleInjector, { children: view === "confirming" && submittedTxInfo ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
24313
25492
|
WithdrawConfirmingView,
|
|
24314
25493
|
{
|
|
24315
25494
|
txInfo: submittedTxInfo,
|
|
@@ -24317,18 +25496,18 @@ function WithdrawModal({
|
|
|
24317
25496
|
onClose: handleClose,
|
|
24318
25497
|
onViewTracker: () => setView("tracker")
|
|
24319
25498
|
}
|
|
24320
|
-
) : view === "detail" && selectedExecution ? /* @__PURE__ */ (0,
|
|
24321
|
-
/* @__PURE__ */ (0,
|
|
25499
|
+
) : view === "detail" && selectedExecution ? /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
|
|
25500
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(DepositHeader, { title: "Withdrawal Details", showBack: true, showClose: !hideOverlay, onBack: () => {
|
|
24322
25501
|
setSelectedExecution(null);
|
|
24323
25502
|
setView("tracker");
|
|
24324
25503
|
}, onClose: handleClose }),
|
|
24325
|
-
/* @__PURE__ */ (0,
|
|
25504
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(DepositDetailContent, { execution: selectedExecution, variant: "withdraw" }),
|
|
24326
25505
|
withdrawPoweredByFooter
|
|
24327
25506
|
] }) : view === "tracker" ? (
|
|
24328
25507
|
/* ---------- Tracker view: execution list ---------- */
|
|
24329
|
-
/* @__PURE__ */ (0,
|
|
24330
|
-
/* @__PURE__ */ (0,
|
|
24331
|
-
/* @__PURE__ */ (0,
|
|
25508
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
|
|
25509
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(DepositHeader, { title: "Withdrawal History", showBack: true, showClose: !hideOverlay, onBack: () => setView("form"), onClose: handleClose }),
|
|
25510
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "uf-h-[460px] uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "uf-flex uf-flex-col uf-gap-2", children: allWithdrawals.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "uf-flex uf-items-center uf-justify-center uf-py-8", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: "uf-text-sm", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: "No withdrawals to track yet" }) }) : allWithdrawals.map((ex) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
24332
25511
|
WithdrawExecutionItem,
|
|
24333
25512
|
{
|
|
24334
25513
|
execution: ex,
|
|
@@ -24338,20 +25517,20 @@ function WithdrawModal({
|
|
|
24338
25517
|
}
|
|
24339
25518
|
},
|
|
24340
25519
|
ex.id
|
|
24341
|
-
)) }),
|
|
25520
|
+
)) }) }),
|
|
24342
25521
|
withdrawPoweredByFooter
|
|
24343
25522
|
] })
|
|
24344
25523
|
) : (
|
|
24345
25524
|
/* ---------- Form view (default) ---------- */
|
|
24346
|
-
/* @__PURE__ */ (0,
|
|
24347
|
-
/* @__PURE__ */ (0,
|
|
24348
|
-
/* @__PURE__ */ (0,
|
|
24349
|
-
isAnyLoading ? /* @__PURE__ */ (0,
|
|
24350
|
-
/* @__PURE__ */ (0,
|
|
24351
|
-
/* @__PURE__ */ (0,
|
|
24352
|
-
/* @__PURE__ */ (0,
|
|
24353
|
-
] }) : /* @__PURE__ */ (0,
|
|
24354
|
-
/* @__PURE__ */ (0,
|
|
25525
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
|
|
25526
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(DepositHeader, { title: modalTitle || t9.title, showClose: !hideOverlay, onClose: handleClose }),
|
|
25527
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-3", children: [
|
|
25528
|
+
isAnyLoading ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "uf-space-y-3", children: [1, 2, 3].map((i) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "uf-w-full uf-bg-secondary uf-rounded-xl uf-p-3 uf-flex uf-items-center uf-animate-pulse", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "uf-bg-muted uf-rounded-lg uf-w-full uf-h-10" }) }, i)) }) : isSourceSupported === false ? /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
|
|
25529
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(TriangleAlert, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
|
|
25530
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-mb-2", style: { color: colors2.foreground, fontFamily: fonts.medium }, children: "Unsupported Source Token" }),
|
|
25531
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: "uf-text-sm uf-max-w-[280px]", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: sourceValidation?.errorMessage })
|
|
25532
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
|
|
25533
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
24355
25534
|
WithdrawDoubleInput,
|
|
24356
25535
|
{
|
|
24357
25536
|
tokens: destinationTokens,
|
|
@@ -24362,7 +25541,7 @@ function WithdrawModal({
|
|
|
24362
25541
|
isLoading: tokensLoading
|
|
24363
25542
|
}
|
|
24364
25543
|
),
|
|
24365
|
-
/* @__PURE__ */ (0,
|
|
25544
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
24366
25545
|
WithdrawForm,
|
|
24367
25546
|
{
|
|
24368
25547
|
publishableKey,
|
|
@@ -24378,26 +25557,23 @@ function WithdrawModal({
|
|
|
24378
25557
|
estimatedProcessingTime: sourceValidation?.estimatedProcessingTime ?? null,
|
|
24379
25558
|
maxSlippagePercent: sourceValidation?.maxSlippagePercent ?? null,
|
|
24380
25559
|
priceImpactPercent: sourceValidation?.priceImpactPercent ?? null,
|
|
24381
|
-
|
|
25560
|
+
senderAddress,
|
|
24382
25561
|
sourceChainId,
|
|
24383
25562
|
sourceTokenAddress,
|
|
24384
|
-
isWalletMatch,
|
|
24385
|
-
connectedWalletName,
|
|
24386
|
-
canWithdraw,
|
|
24387
25563
|
onWithdraw,
|
|
24388
25564
|
onWithdrawError,
|
|
24389
25565
|
onDepositWalletCreation: handleDepositWalletCreation,
|
|
24390
25566
|
onWithdrawSubmitted: handleWithdrawSubmitted,
|
|
24391
|
-
footerLeft: /* @__PURE__ */ (0,
|
|
25567
|
+
footerLeft: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
|
|
24392
25568
|
"button",
|
|
24393
25569
|
{
|
|
24394
25570
|
onClick: () => setView("tracker"),
|
|
24395
25571
|
className: "uf-flex uf-items-center uf-gap-1 uf-transition-colors hover:uf-opacity-70",
|
|
24396
25572
|
style: { color: colors2.foregroundMuted },
|
|
24397
25573
|
children: [
|
|
24398
|
-
/* @__PURE__ */ (0,
|
|
25574
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Clock, { className: "uf-w-3.5 uf-h-3.5" }),
|
|
24399
25575
|
"Withdrawal History",
|
|
24400
|
-
/* @__PURE__ */ (0,
|
|
25576
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(ChevronRight, { className: "uf-w-3 uf-h-3" })
|
|
24401
25577
|
]
|
|
24402
25578
|
}
|
|
24403
25579
|
)
|
|
@@ -24414,27 +25590,31 @@ function WithdrawModal({
|
|
|
24414
25590
|
var t10 = i18n2.withdrawModal;
|
|
24415
25591
|
|
|
24416
25592
|
// src/provider.tsx
|
|
24417
|
-
var
|
|
25593
|
+
var import_jsx_runtime76 = require("react/jsx-runtime");
|
|
24418
25594
|
function UnifoldProvider2({
|
|
24419
25595
|
children,
|
|
24420
25596
|
publishableKey,
|
|
24421
25597
|
config
|
|
24422
25598
|
}) {
|
|
24423
|
-
const [isOpen, setIsOpen] = (0,
|
|
24424
|
-
const [depositConfig, setDepositConfig] = (0,
|
|
25599
|
+
const [isOpen, setIsOpen] = (0, import_react32.useState)(false);
|
|
25600
|
+
const [depositConfig, setDepositConfig] = (0, import_react32.useState)(
|
|
25601
|
+
null
|
|
25602
|
+
);
|
|
25603
|
+
const [isCheckoutOpen, setIsCheckoutOpen] = (0, import_react32.useState)(false);
|
|
25604
|
+
const [checkoutConfig, setCheckoutConfig] = (0, import_react32.useState)(
|
|
24425
25605
|
null
|
|
24426
25606
|
);
|
|
24427
|
-
const [isWithdrawOpen, setIsWithdrawOpen] = (0,
|
|
24428
|
-
const [withdrawConfig, setWithdrawConfig] = (0,
|
|
25607
|
+
const [isWithdrawOpen, setIsWithdrawOpen] = (0, import_react32.useState)(false);
|
|
25608
|
+
const [withdrawConfig, setWithdrawConfig] = (0, import_react32.useState)(
|
|
24429
25609
|
null
|
|
24430
25610
|
);
|
|
24431
|
-
const [resolvedTheme, setResolvedTheme] =
|
|
24432
|
-
(0,
|
|
25611
|
+
const [resolvedTheme, setResolvedTheme] = import_react32.default.useState("dark");
|
|
25612
|
+
(0, import_react32.useEffect)(() => {
|
|
24433
25613
|
if (publishableKey) {
|
|
24434
25614
|
setApiConfig({ publishableKey });
|
|
24435
25615
|
}
|
|
24436
25616
|
}, [publishableKey]);
|
|
24437
|
-
|
|
25617
|
+
import_react32.default.useEffect(() => {
|
|
24438
25618
|
const appearance = config?.appearance || "dark";
|
|
24439
25619
|
if (appearance === "auto") {
|
|
24440
25620
|
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
@@ -24449,17 +25629,17 @@ function UnifoldProvider2({
|
|
|
24449
25629
|
setResolvedTheme(appearance);
|
|
24450
25630
|
}
|
|
24451
25631
|
}, [config?.appearance]);
|
|
24452
|
-
const depositPromiseRef =
|
|
24453
|
-
const depositConfigRef =
|
|
25632
|
+
const depositPromiseRef = import_react32.default.useRef(null);
|
|
25633
|
+
const depositConfigRef = import_react32.default.useRef(null);
|
|
24454
25634
|
depositConfigRef.current = depositConfig;
|
|
24455
|
-
const closeTimeoutRef =
|
|
24456
|
-
const closeGuardRef =
|
|
24457
|
-
const withdrawPromiseRef =
|
|
24458
|
-
const withdrawConfigRef =
|
|
25635
|
+
const closeTimeoutRef = import_react32.default.useRef(null);
|
|
25636
|
+
const closeGuardRef = import_react32.default.useRef(false);
|
|
25637
|
+
const withdrawPromiseRef = import_react32.default.useRef(null);
|
|
25638
|
+
const withdrawConfigRef = import_react32.default.useRef(null);
|
|
24459
25639
|
withdrawConfigRef.current = withdrawConfig;
|
|
24460
|
-
const withdrawCloseTimeoutRef =
|
|
24461
|
-
const withdrawCloseGuardRef =
|
|
24462
|
-
const beginDeposit = (0,
|
|
25640
|
+
const withdrawCloseTimeoutRef = import_react32.default.useRef(null);
|
|
25641
|
+
const withdrawCloseGuardRef = import_react32.default.useRef(false);
|
|
25642
|
+
const beginDeposit = (0, import_react32.useCallback)((config2) => {
|
|
24463
25643
|
if (closeTimeoutRef.current) {
|
|
24464
25644
|
clearTimeout(closeTimeoutRef.current);
|
|
24465
25645
|
closeTimeoutRef.current = null;
|
|
@@ -24482,7 +25662,7 @@ function UnifoldProvider2({
|
|
|
24482
25662
|
setIsOpen(true);
|
|
24483
25663
|
return promise;
|
|
24484
25664
|
}, []);
|
|
24485
|
-
const closeDeposit = (0,
|
|
25665
|
+
const closeDeposit = (0, import_react32.useCallback)(() => {
|
|
24486
25666
|
if (closeGuardRef.current) {
|
|
24487
25667
|
return;
|
|
24488
25668
|
}
|
|
@@ -24504,7 +25684,7 @@ function UnifoldProvider2({
|
|
|
24504
25684
|
closeTimeoutRef.current = null;
|
|
24505
25685
|
}, 200);
|
|
24506
25686
|
}, []);
|
|
24507
|
-
const handleDepositSuccess = (0,
|
|
25687
|
+
const handleDepositSuccess = (0, import_react32.useCallback)((data) => {
|
|
24508
25688
|
if (depositConfig?.onSuccess) {
|
|
24509
25689
|
depositConfig.onSuccess(data);
|
|
24510
25690
|
}
|
|
@@ -24513,7 +25693,7 @@ function UnifoldProvider2({
|
|
|
24513
25693
|
depositPromiseRef.current = null;
|
|
24514
25694
|
}
|
|
24515
25695
|
}, [depositConfig]);
|
|
24516
|
-
const handleDepositError = (0,
|
|
25696
|
+
const handleDepositError = (0, import_react32.useCallback)((error) => {
|
|
24517
25697
|
console.error("[UnifoldProvider] Deposit error:", error);
|
|
24518
25698
|
if (depositConfig?.onError) {
|
|
24519
25699
|
depositConfig.onError(error);
|
|
@@ -24523,7 +25703,76 @@ function UnifoldProvider2({
|
|
|
24523
25703
|
depositPromiseRef.current = null;
|
|
24524
25704
|
}
|
|
24525
25705
|
}, [depositConfig]);
|
|
24526
|
-
const
|
|
25706
|
+
const checkoutPromiseRef = import_react32.default.useRef(null);
|
|
25707
|
+
const checkoutConfigRef = import_react32.default.useRef(null);
|
|
25708
|
+
checkoutConfigRef.current = checkoutConfig;
|
|
25709
|
+
const checkoutCloseTimeoutRef = import_react32.default.useRef(null);
|
|
25710
|
+
const checkoutCloseGuardRef = import_react32.default.useRef(false);
|
|
25711
|
+
const beginCheckout = (0, import_react32.useCallback)((config2) => {
|
|
25712
|
+
if (checkoutCloseTimeoutRef.current) {
|
|
25713
|
+
clearTimeout(checkoutCloseTimeoutRef.current);
|
|
25714
|
+
checkoutCloseTimeoutRef.current = null;
|
|
25715
|
+
}
|
|
25716
|
+
checkoutCloseGuardRef.current = false;
|
|
25717
|
+
if (checkoutPromiseRef.current) {
|
|
25718
|
+
console.warn("[UnifoldProvider] A checkout is already in progress. Cancelling previous checkout.");
|
|
25719
|
+
checkoutPromiseRef.current.reject({
|
|
25720
|
+
message: "Checkout cancelled - new checkout started",
|
|
25721
|
+
code: "CHECKOUT_SUPERSEDED"
|
|
25722
|
+
});
|
|
25723
|
+
checkoutPromiseRef.current = null;
|
|
25724
|
+
}
|
|
25725
|
+
const promise = new Promise((resolve, reject) => {
|
|
25726
|
+
checkoutPromiseRef.current = { resolve, reject };
|
|
25727
|
+
});
|
|
25728
|
+
promise.catch(() => {
|
|
25729
|
+
});
|
|
25730
|
+
setCheckoutConfig(config2);
|
|
25731
|
+
setIsCheckoutOpen(true);
|
|
25732
|
+
return promise;
|
|
25733
|
+
}, []);
|
|
25734
|
+
const closeCheckout = (0, import_react32.useCallback)(() => {
|
|
25735
|
+
if (checkoutCloseGuardRef.current) {
|
|
25736
|
+
return;
|
|
25737
|
+
}
|
|
25738
|
+
checkoutCloseGuardRef.current = true;
|
|
25739
|
+
const promiseToReject = checkoutPromiseRef.current;
|
|
25740
|
+
checkoutPromiseRef.current = null;
|
|
25741
|
+
if (checkoutConfigRef.current?.onClose) {
|
|
25742
|
+
checkoutConfigRef.current.onClose();
|
|
25743
|
+
}
|
|
25744
|
+
if (promiseToReject) {
|
|
25745
|
+
promiseToReject.reject({
|
|
25746
|
+
message: "Checkout cancelled by user",
|
|
25747
|
+
code: "CHECKOUT_CANCELLED"
|
|
25748
|
+
});
|
|
25749
|
+
}
|
|
25750
|
+
setIsCheckoutOpen(false);
|
|
25751
|
+
checkoutCloseTimeoutRef.current = setTimeout(() => {
|
|
25752
|
+
setCheckoutConfig(null);
|
|
25753
|
+
checkoutCloseTimeoutRef.current = null;
|
|
25754
|
+
}, 200);
|
|
25755
|
+
}, []);
|
|
25756
|
+
const handleCheckoutSuccess = (0, import_react32.useCallback)((data) => {
|
|
25757
|
+
if (checkoutConfig?.onSuccess) {
|
|
25758
|
+
checkoutConfig.onSuccess(data);
|
|
25759
|
+
}
|
|
25760
|
+
if (checkoutPromiseRef.current) {
|
|
25761
|
+
checkoutPromiseRef.current.resolve(data);
|
|
25762
|
+
checkoutPromiseRef.current = null;
|
|
25763
|
+
}
|
|
25764
|
+
}, [checkoutConfig]);
|
|
25765
|
+
const handleCheckoutError = (0, import_react32.useCallback)((error) => {
|
|
25766
|
+
console.error("[UnifoldProvider] Checkout error:", error);
|
|
25767
|
+
if (checkoutConfig?.onError) {
|
|
25768
|
+
checkoutConfig.onError(error);
|
|
25769
|
+
}
|
|
25770
|
+
if (checkoutPromiseRef.current) {
|
|
25771
|
+
checkoutPromiseRef.current.reject(error);
|
|
25772
|
+
checkoutPromiseRef.current = null;
|
|
25773
|
+
}
|
|
25774
|
+
}, [checkoutConfig]);
|
|
25775
|
+
const beginWithdraw = (0, import_react32.useCallback)((config2) => {
|
|
24527
25776
|
if (withdrawCloseTimeoutRef.current) {
|
|
24528
25777
|
clearTimeout(withdrawCloseTimeoutRef.current);
|
|
24529
25778
|
withdrawCloseTimeoutRef.current = null;
|
|
@@ -24546,7 +25795,7 @@ function UnifoldProvider2({
|
|
|
24546
25795
|
setIsWithdrawOpen(true);
|
|
24547
25796
|
return promise;
|
|
24548
25797
|
}, []);
|
|
24549
|
-
const closeWithdraw = (0,
|
|
25798
|
+
const closeWithdraw = (0, import_react32.useCallback)(() => {
|
|
24550
25799
|
if (withdrawCloseGuardRef.current) {
|
|
24551
25800
|
return;
|
|
24552
25801
|
}
|
|
@@ -24568,7 +25817,7 @@ function UnifoldProvider2({
|
|
|
24568
25817
|
withdrawCloseTimeoutRef.current = null;
|
|
24569
25818
|
}, 200);
|
|
24570
25819
|
}, []);
|
|
24571
|
-
const handleWithdrawSuccess = (0,
|
|
25820
|
+
const handleWithdrawSuccess = (0, import_react32.useCallback)((data) => {
|
|
24572
25821
|
if (withdrawConfigRef.current?.onSuccess) {
|
|
24573
25822
|
withdrawConfigRef.current.onSuccess(data);
|
|
24574
25823
|
}
|
|
@@ -24577,7 +25826,7 @@ function UnifoldProvider2({
|
|
|
24577
25826
|
withdrawPromiseRef.current = null;
|
|
24578
25827
|
}
|
|
24579
25828
|
}, []);
|
|
24580
|
-
const handleWithdrawError = (0,
|
|
25829
|
+
const handleWithdrawError = (0, import_react32.useCallback)((error) => {
|
|
24581
25830
|
console.error("[UnifoldProvider] Withdraw error:", error);
|
|
24582
25831
|
if (withdrawConfigRef.current?.onError) {
|
|
24583
25832
|
withdrawConfigRef.current.onError(error);
|
|
@@ -24587,20 +25836,20 @@ function UnifoldProvider2({
|
|
|
24587
25836
|
withdrawPromiseRef.current = null;
|
|
24588
25837
|
}
|
|
24589
25838
|
}, []);
|
|
24590
|
-
const contextValue = (0,
|
|
25839
|
+
const contextValue = (0, import_react32.useMemo)(
|
|
24591
25840
|
() => ({
|
|
24592
25841
|
beginDeposit,
|
|
24593
25842
|
closeDeposit,
|
|
24594
|
-
|
|
24595
|
-
|
|
25843
|
+
beginCheckout,
|
|
25844
|
+
closeCheckout,
|
|
24596
25845
|
beginWithdraw,
|
|
24597
25846
|
closeWithdraw,
|
|
24598
25847
|
handleWithdrawSuccess,
|
|
24599
25848
|
handleWithdrawError
|
|
24600
25849
|
}),
|
|
24601
|
-
[beginDeposit, closeDeposit,
|
|
25850
|
+
[beginDeposit, closeDeposit, beginCheckout, closeCheckout, beginWithdraw, closeWithdraw, handleWithdrawSuccess, handleWithdrawError]
|
|
24602
25851
|
);
|
|
24603
|
-
return /* @__PURE__ */ (0,
|
|
25852
|
+
return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(UnifoldProvider, { publishableKey, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ConnectContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
|
|
24604
25853
|
ThemeProvider,
|
|
24605
25854
|
{
|
|
24606
25855
|
mode: resolvedTheme,
|
|
@@ -24611,7 +25860,20 @@ function UnifoldProvider2({
|
|
|
24611
25860
|
components: config?.components,
|
|
24612
25861
|
children: [
|
|
24613
25862
|
children,
|
|
24614
|
-
|
|
25863
|
+
checkoutConfig && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
25864
|
+
CheckoutModal,
|
|
25865
|
+
{
|
|
25866
|
+
open: isCheckoutOpen,
|
|
25867
|
+
onOpenChange: closeCheckout,
|
|
25868
|
+
clientSecret: checkoutConfig.clientSecret,
|
|
25869
|
+
publishableKey,
|
|
25870
|
+
enableConnectWallet: config?.enableConnectWallet,
|
|
25871
|
+
theme: resolvedTheme,
|
|
25872
|
+
onCheckoutSuccess: handleCheckoutSuccess,
|
|
25873
|
+
onCheckoutError: handleCheckoutError
|
|
25874
|
+
}
|
|
25875
|
+
),
|
|
25876
|
+
withdrawConfig && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
24615
25877
|
WithdrawModal,
|
|
24616
25878
|
{
|
|
24617
25879
|
open: isWithdrawOpen,
|
|
@@ -24631,7 +25893,7 @@ function UnifoldProvider2({
|
|
|
24631
25893
|
theme: resolvedTheme
|
|
24632
25894
|
}
|
|
24633
25895
|
),
|
|
24634
|
-
depositConfig && /* @__PURE__ */ (0,
|
|
25896
|
+
depositConfig && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
24635
25897
|
DepositModal,
|
|
24636
25898
|
{
|
|
24637
25899
|
open: isOpen,
|
|
@@ -24672,16 +25934,19 @@ function UnifoldProvider2({
|
|
|
24672
25934
|
}
|
|
24673
25935
|
) }) });
|
|
24674
25936
|
}
|
|
24675
|
-
var ConnectContext =
|
|
25937
|
+
var ConnectContext = import_react32.default.createContext(null);
|
|
24676
25938
|
function useUnifold2() {
|
|
24677
25939
|
const baseContext = useUnifold();
|
|
24678
|
-
const connectContext =
|
|
25940
|
+
const connectContext = import_react32.default.useContext(ConnectContext);
|
|
24679
25941
|
if (typeof window === "undefined") {
|
|
24680
25942
|
return {
|
|
24681
25943
|
publishableKey: "",
|
|
24682
25944
|
beginDeposit: () => Promise.reject(new Error("SSR not supported")),
|
|
24683
25945
|
closeDeposit: () => {
|
|
24684
25946
|
},
|
|
25947
|
+
beginCheckout: () => Promise.reject(new Error("SSR not supported")),
|
|
25948
|
+
closeCheckout: () => {
|
|
25949
|
+
},
|
|
24685
25950
|
beginWithdraw: () => Promise.reject(new Error("SSR not supported")),
|
|
24686
25951
|
closeWithdraw: () => {
|
|
24687
25952
|
}
|
|
@@ -24694,6 +25959,8 @@ function useUnifold2() {
|
|
|
24694
25959
|
publishableKey: baseContext.publishableKey,
|
|
24695
25960
|
beginDeposit: connectContext.beginDeposit,
|
|
24696
25961
|
closeDeposit: connectContext.closeDeposit,
|
|
25962
|
+
beginCheckout: connectContext.beginCheckout,
|
|
25963
|
+
closeCheckout: connectContext.closeCheckout,
|
|
24697
25964
|
beginWithdraw: connectContext.beginWithdraw,
|
|
24698
25965
|
closeWithdraw: connectContext.closeWithdraw
|
|
24699
25966
|
};
|
|
@@ -24742,6 +26009,7 @@ lucide-react/dist/esm/Icon.js:
|
|
|
24742
26009
|
lucide-react/dist/esm/createLucideIcon.js:
|
|
24743
26010
|
lucide-react/dist/esm/icons/arrow-left-right.js:
|
|
24744
26011
|
lucide-react/dist/esm/icons/arrow-left.js:
|
|
26012
|
+
lucide-react/dist/esm/icons/arrow-right.js:
|
|
24745
26013
|
lucide-react/dist/esm/icons/arrow-up-down.js:
|
|
24746
26014
|
lucide-react/dist/esm/icons/check.js:
|
|
24747
26015
|
lucide-react/dist/esm/icons/chevron-down.js:
|