@unifold/connect-react 0.1.42 → 0.1.43
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 +1540 -312
- package/dist/index.mjs +1550 -315
- 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" }],
|
|
@@ -6620,6 +6626,119 @@ async function sendSolanaTransaction(request, publishableKey) {
|
|
|
6620
6626
|
}
|
|
6621
6627
|
return response.json();
|
|
6622
6628
|
}
|
|
6629
|
+
async function retrievePaymentIntent(clientSecret, publishableKey) {
|
|
6630
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
6631
|
+
validatePublishableKey(pk);
|
|
6632
|
+
const response = await fetch(
|
|
6633
|
+
`${API_BASE_URL}/v1/public/payment_intents/retrieve`,
|
|
6634
|
+
{
|
|
6635
|
+
method: "POST",
|
|
6636
|
+
headers: {
|
|
6637
|
+
accept: "application/json",
|
|
6638
|
+
"x-publishable-key": pk,
|
|
6639
|
+
"Content-Type": "application/json"
|
|
6640
|
+
},
|
|
6641
|
+
body: JSON.stringify({ client_secret: clientSecret })
|
|
6642
|
+
}
|
|
6643
|
+
);
|
|
6644
|
+
if (!response.ok) {
|
|
6645
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
6646
|
+
throw new Error(
|
|
6647
|
+
`Failed to retrieve payment intent: ${error.message || response.statusText}`
|
|
6648
|
+
);
|
|
6649
|
+
}
|
|
6650
|
+
return response.json();
|
|
6651
|
+
}
|
|
6652
|
+
async function listPaymentIntentExecutions(clientSecret, publishableKey) {
|
|
6653
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
6654
|
+
validatePublishableKey(pk);
|
|
6655
|
+
const response = await fetch(
|
|
6656
|
+
`${API_BASE_URL}/v1/public/payment_intents/executions`,
|
|
6657
|
+
{
|
|
6658
|
+
method: "POST",
|
|
6659
|
+
headers: {
|
|
6660
|
+
accept: "application/json",
|
|
6661
|
+
"x-publishable-key": pk,
|
|
6662
|
+
"Content-Type": "application/json"
|
|
6663
|
+
},
|
|
6664
|
+
body: JSON.stringify({ client_secret: clientSecret })
|
|
6665
|
+
}
|
|
6666
|
+
);
|
|
6667
|
+
if (!response.ok) {
|
|
6668
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
6669
|
+
throw new Error(
|
|
6670
|
+
`Failed to list payment intent executions: ${error.message || response.statusText}`
|
|
6671
|
+
);
|
|
6672
|
+
}
|
|
6673
|
+
return response.json();
|
|
6674
|
+
}
|
|
6675
|
+
async function getDepositQuote(request, publishableKey) {
|
|
6676
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
6677
|
+
validatePublishableKey(pk);
|
|
6678
|
+
const response = await fetch(`${API_BASE_URL}/v1/public/quotes`, {
|
|
6679
|
+
method: "POST",
|
|
6680
|
+
headers: {
|
|
6681
|
+
accept: "application/json",
|
|
6682
|
+
"x-publishable-key": pk,
|
|
6683
|
+
"Content-Type": "application/json"
|
|
6684
|
+
},
|
|
6685
|
+
body: JSON.stringify(request)
|
|
6686
|
+
});
|
|
6687
|
+
if (!response.ok) {
|
|
6688
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
6689
|
+
throw new Error(
|
|
6690
|
+
`Failed to get deposit quote: ${error.message || response.statusText}`
|
|
6691
|
+
);
|
|
6692
|
+
}
|
|
6693
|
+
const json = await response.json();
|
|
6694
|
+
return json.data;
|
|
6695
|
+
}
|
|
6696
|
+
async function buildHypercoreTransaction(request, publishableKey) {
|
|
6697
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
6698
|
+
validatePublishableKey(pk);
|
|
6699
|
+
const response = await fetch(
|
|
6700
|
+
`${API_BASE_URL}/v1/public/transactions/hypercore/build`,
|
|
6701
|
+
{
|
|
6702
|
+
method: "POST",
|
|
6703
|
+
headers: {
|
|
6704
|
+
accept: "application/json",
|
|
6705
|
+
"x-publishable-key": pk,
|
|
6706
|
+
"Content-Type": "application/json"
|
|
6707
|
+
},
|
|
6708
|
+
body: JSON.stringify(request)
|
|
6709
|
+
}
|
|
6710
|
+
);
|
|
6711
|
+
if (!response.ok) {
|
|
6712
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
6713
|
+
throw new Error(
|
|
6714
|
+
`Failed to build HyperCore transaction: ${error.message || response.statusText}`
|
|
6715
|
+
);
|
|
6716
|
+
}
|
|
6717
|
+
return response.json();
|
|
6718
|
+
}
|
|
6719
|
+
async function sendHypercoreTransaction(request, publishableKey) {
|
|
6720
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
6721
|
+
validatePublishableKey(pk);
|
|
6722
|
+
const response = await fetch(
|
|
6723
|
+
`${API_BASE_URL}/v1/public/transactions/hypercore/send`,
|
|
6724
|
+
{
|
|
6725
|
+
method: "POST",
|
|
6726
|
+
headers: {
|
|
6727
|
+
accept: "application/json",
|
|
6728
|
+
"x-publishable-key": pk,
|
|
6729
|
+
"Content-Type": "application/json"
|
|
6730
|
+
},
|
|
6731
|
+
body: JSON.stringify(request)
|
|
6732
|
+
}
|
|
6733
|
+
);
|
|
6734
|
+
if (!response.ok) {
|
|
6735
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
6736
|
+
throw new Error(
|
|
6737
|
+
`Failed to send HyperCore transaction: ${error.message || response.statusText}`
|
|
6738
|
+
);
|
|
6739
|
+
}
|
|
6740
|
+
return response.json();
|
|
6741
|
+
}
|
|
6623
6742
|
function useUserIp() {
|
|
6624
6743
|
const {
|
|
6625
6744
|
data: userIpInfo,
|
|
@@ -10961,19 +11080,23 @@ var import_jsx_runtime68 = require("react/jsx-runtime");
|
|
|
10961
11080
|
var import_react26 = require("react");
|
|
10962
11081
|
var import_react_query11 = require("@tanstack/react-query");
|
|
10963
11082
|
var import_react_query12 = require("@tanstack/react-query");
|
|
11083
|
+
var import_jsx_runtime69 = require("react/jsx-runtime");
|
|
11084
|
+
var import_react27 = require("react");
|
|
10964
11085
|
var import_react_query13 = require("@tanstack/react-query");
|
|
10965
11086
|
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
11087
|
var import_react_query15 = require("@tanstack/react-query");
|
|
11088
|
+
var import_react_query16 = require("@tanstack/react-query");
|
|
11089
|
+
var import_react28 = require("react");
|
|
10970
11090
|
var import_jsx_runtime70 = require("react/jsx-runtime");
|
|
10971
|
-
var import_jsx_runtime71 = require("react/jsx-runtime");
|
|
10972
11091
|
var import_react29 = require("react");
|
|
11092
|
+
var import_react_query17 = require("@tanstack/react-query");
|
|
11093
|
+
var import_jsx_runtime71 = require("react/jsx-runtime");
|
|
10973
11094
|
var import_jsx_runtime72 = require("react/jsx-runtime");
|
|
10974
|
-
var import_jsx_runtime73 = require("react/jsx-runtime");
|
|
10975
11095
|
var import_react30 = require("react");
|
|
11096
|
+
var import_jsx_runtime73 = require("react/jsx-runtime");
|
|
10976
11097
|
var import_jsx_runtime74 = require("react/jsx-runtime");
|
|
11098
|
+
var import_react31 = require("react");
|
|
11099
|
+
var import_jsx_runtime75 = require("react/jsx-runtime");
|
|
10977
11100
|
function cn(...inputs) {
|
|
10978
11101
|
return twMerge(clsx(inputs));
|
|
10979
11102
|
}
|
|
@@ -12284,6 +12407,7 @@ var CUTOFF_BUFFER_MS = 6e4;
|
|
|
12284
12407
|
function useDepositPolling({
|
|
12285
12408
|
userId,
|
|
12286
12409
|
publishableKey,
|
|
12410
|
+
clientSecret,
|
|
12287
12411
|
depositConfirmationMode = "auto_ui",
|
|
12288
12412
|
depositWalletId,
|
|
12289
12413
|
enabled = true,
|
|
@@ -12341,11 +12465,12 @@ function useDepositPolling({
|
|
|
12341
12465
|
depositWalletId
|
|
12342
12466
|
]);
|
|
12343
12467
|
(0, import_react12.useEffect)(() => {
|
|
12344
|
-
if (!
|
|
12468
|
+
if (!enabled) return;
|
|
12469
|
+
if (!clientSecret && !userId) return;
|
|
12345
12470
|
const modalOpenedAt = modalOpenedAtRef.current;
|
|
12346
12471
|
const poll = async () => {
|
|
12347
12472
|
try {
|
|
12348
|
-
const response = await queryExecutions(userId, publishableKey, ActionType.Deposit);
|
|
12473
|
+
const response = clientSecret ? await listPaymentIntentExecutions(clientSecret, publishableKey) : await queryExecutions(userId, publishableKey, ActionType.Deposit);
|
|
12349
12474
|
const cutoff = new Date(modalOpenedAt.getTime() - CUTOFF_BUFFER_MS);
|
|
12350
12475
|
const sortedExecutions = [...response.data].sort((a, b) => {
|
|
12351
12476
|
const timeA = a.created_at ? new Date(a.created_at).getTime() : 0;
|
|
@@ -12429,7 +12554,7 @@ function useDepositPolling({
|
|
|
12429
12554
|
clearInterval(pollInterval);
|
|
12430
12555
|
setIsPolling(false);
|
|
12431
12556
|
};
|
|
12432
|
-
}, [userId, publishableKey, enabled]);
|
|
12557
|
+
}, [userId, publishableKey, clientSecret, enabled]);
|
|
12433
12558
|
(0, import_react12.useEffect)(() => {
|
|
12434
12559
|
if (!pollingEnabled || !depositWalletId) return;
|
|
12435
12560
|
const triggerPoll = async () => {
|
|
@@ -18938,6 +19063,7 @@ var parseChainKey = (chainKey) => {
|
|
|
18938
19063
|
function TransferCryptoSingleInput({
|
|
18939
19064
|
userId,
|
|
18940
19065
|
publishableKey,
|
|
19066
|
+
clientSecret,
|
|
18941
19067
|
recipientAddress,
|
|
18942
19068
|
destinationChainType,
|
|
18943
19069
|
destinationChainId,
|
|
@@ -18950,7 +19076,9 @@ function TransferCryptoSingleInput({
|
|
|
18950
19076
|
onExecutionsChange,
|
|
18951
19077
|
onDepositSuccess,
|
|
18952
19078
|
onDepositError,
|
|
18953
|
-
wallets: externalWallets
|
|
19079
|
+
wallets: externalWallets,
|
|
19080
|
+
onSourceTokenChange,
|
|
19081
|
+
checkoutQuote
|
|
18954
19082
|
}) {
|
|
18955
19083
|
const { themeClass, colors: colors2, fonts, components } = useTheme();
|
|
18956
19084
|
const isDarkMode = themeClass.includes("uf-dark");
|
|
@@ -19017,12 +19145,28 @@ function TransferCryptoSingleInput({
|
|
|
19017
19145
|
} = useDepositPolling({
|
|
19018
19146
|
userId,
|
|
19019
19147
|
publishableKey,
|
|
19148
|
+
clientSecret,
|
|
19020
19149
|
depositConfirmationMode,
|
|
19021
19150
|
depositWalletId: currentWallet?.id,
|
|
19022
19151
|
enabled: true,
|
|
19023
19152
|
onDepositSuccess,
|
|
19024
19153
|
onDepositError
|
|
19025
19154
|
});
|
|
19155
|
+
(0, import_react18.useEffect)(() => {
|
|
19156
|
+
if (!onSourceTokenChange || !token || !chain || !initialSelectionDone) return;
|
|
19157
|
+
const { chainType, chainId } = parseChainKey(chain);
|
|
19158
|
+
const matchedToken = supportedTokens.find((t11) => t11.symbol === token);
|
|
19159
|
+
const matchedChain = matchedToken?.chains.find(
|
|
19160
|
+
(c) => c.chain_type === chainType && c.chain_id === chainId
|
|
19161
|
+
);
|
|
19162
|
+
onSourceTokenChange({
|
|
19163
|
+
symbol: token,
|
|
19164
|
+
chainType,
|
|
19165
|
+
chainId,
|
|
19166
|
+
tokenAddress: matchedChain?.token_address ?? "",
|
|
19167
|
+
minimumDepositAmountUsd: matchedChain?.minimum_deposit_amount_usd ?? 0
|
|
19168
|
+
});
|
|
19169
|
+
}, [token, chain, initialSelectionDone, onSourceTokenChange, supportedTokens]);
|
|
19026
19170
|
(0, import_react18.useEffect)(() => {
|
|
19027
19171
|
if (onExecutionsChange) {
|
|
19028
19172
|
onExecutionsChange(depositExecutions);
|
|
@@ -19169,6 +19313,53 @@ function TransferCryptoSingleInput({
|
|
|
19169
19313
|
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { children: "Retrying automatically every 5 seconds..." })
|
|
19170
19314
|
] })
|
|
19171
19315
|
] }),
|
|
19316
|
+
checkoutQuote && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
|
|
19317
|
+
"div",
|
|
19318
|
+
{
|
|
19319
|
+
className: "uf-rounded-xl uf-px-3 uf-py-2 uf-flex uf-items-center uf-justify-between",
|
|
19320
|
+
style: {
|
|
19321
|
+
backgroundColor: components.card.backgroundColor,
|
|
19322
|
+
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`,
|
|
19323
|
+
borderRadius: components.card.borderRadius
|
|
19324
|
+
},
|
|
19325
|
+
children: [
|
|
19326
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
19327
|
+
"span",
|
|
19328
|
+
{
|
|
19329
|
+
className: "uf-text-xs",
|
|
19330
|
+
style: { color: components.card.subtitleColor, fontFamily: fonts.regular },
|
|
19331
|
+
children: "You send"
|
|
19332
|
+
}
|
|
19333
|
+
),
|
|
19334
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
|
|
19335
|
+
"span",
|
|
19336
|
+
{
|
|
19337
|
+
className: "uf-text-sm uf-font-semibold",
|
|
19338
|
+
style: { color: components.card.titleColor, fontFamily: fonts.semibold },
|
|
19339
|
+
children: [
|
|
19340
|
+
(Number(checkoutQuote.sourceAmount) / 10 ** checkoutQuote.sourceTokenDecimals).toFixed(
|
|
19341
|
+
Math.min(checkoutQuote.sourceTokenDecimals, 6)
|
|
19342
|
+
),
|
|
19343
|
+
" ",
|
|
19344
|
+
checkoutQuote.sourceTokenSymbol,
|
|
19345
|
+
checkoutQuote.sourceAmountUsd && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
|
|
19346
|
+
"span",
|
|
19347
|
+
{
|
|
19348
|
+
className: "uf-text-xs uf-font-normal uf-ml-1.5",
|
|
19349
|
+
style: { color: components.card.subtitleColor },
|
|
19350
|
+
children: [
|
|
19351
|
+
"($",
|
|
19352
|
+
checkoutQuote.sourceAmountUsd,
|
|
19353
|
+
")"
|
|
19354
|
+
]
|
|
19355
|
+
}
|
|
19356
|
+
)
|
|
19357
|
+
]
|
|
19358
|
+
}
|
|
19359
|
+
)
|
|
19360
|
+
]
|
|
19361
|
+
}
|
|
19362
|
+
),
|
|
19172
19363
|
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-pt-2", children: [
|
|
19173
19364
|
/* @__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
19365
|
/* @__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 +20181,16 @@ function SelectTokenView({
|
|
|
19990
20181
|
onBack,
|
|
19991
20182
|
onClose,
|
|
19992
20183
|
onDisconnectWallet,
|
|
19993
|
-
isDisconnectingWallet = false
|
|
20184
|
+
isDisconnectingWallet = false,
|
|
20185
|
+
checkoutAmountUsd,
|
|
20186
|
+
checkoutReceivedUsd
|
|
19994
20187
|
}) {
|
|
19995
20188
|
const { colors: colors2, fonts, components } = useTheme();
|
|
20189
|
+
const isCheckout = !!checkoutAmountUsd;
|
|
20190
|
+
const headerSubtitle = isCheckout ? parseFloat(checkoutReceivedUsd || "0") > 0 ? `$${checkoutReceivedUsd} / $${checkoutAmountUsd} received` : `Amount due: $${checkoutAmountUsd}` : formatBalanceDisplay(
|
|
20191
|
+
`$${totalBalanceUsd || "0.00"}`,
|
|
20192
|
+
projectName
|
|
20193
|
+
);
|
|
19996
20194
|
return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
|
|
19997
20195
|
"div",
|
|
19998
20196
|
{
|
|
@@ -20001,11 +20199,8 @@ function SelectTokenView({
|
|
|
20001
20199
|
/* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
|
|
20002
20200
|
DepositHeader,
|
|
20003
20201
|
{
|
|
20004
|
-
title: "Select Token",
|
|
20005
|
-
subtitle:
|
|
20006
|
-
`$${totalBalanceUsd || "0.00"}`,
|
|
20007
|
-
projectName
|
|
20008
|
-
),
|
|
20202
|
+
title: isCheckout ? "Select Token" : "Select Token",
|
|
20203
|
+
subtitle: headerSubtitle,
|
|
20009
20204
|
showBack: true,
|
|
20010
20205
|
onBack,
|
|
20011
20206
|
onClose
|
|
@@ -20233,10 +20428,19 @@ function EnterAmountView({
|
|
|
20233
20428
|
onReview,
|
|
20234
20429
|
onBack,
|
|
20235
20430
|
onClose,
|
|
20236
|
-
quickSelectMode
|
|
20431
|
+
quickSelectMode,
|
|
20432
|
+
checkoutAmountUsd,
|
|
20433
|
+
checkoutReceivedUsd
|
|
20237
20434
|
}) {
|
|
20238
20435
|
const { colors: colors2, fonts, components } = useTheme();
|
|
20436
|
+
const isCheckout = !!checkoutAmountUsd;
|
|
20239
20437
|
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}`;
|
|
20438
|
+
const checkoutRemainingUsd = isCheckout ? Math.max(
|
|
20439
|
+
parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0"),
|
|
20440
|
+
0
|
|
20441
|
+
).toFixed(2) : null;
|
|
20442
|
+
const headerTitle = isCheckout ? `Pay $${checkoutRemainingUsd}` : "Enter Amount";
|
|
20443
|
+
const headerSubtitle = isCheckout ? parseFloat(checkoutReceivedUsd || "0") > 0 ? `$${checkoutReceivedUsd} / $${checkoutAmountUsd} received` : null : balanceSubtitle;
|
|
20240
20444
|
const usePercentageChips = quickSelectMode === "percentage" && maxUsdAmount > 0;
|
|
20241
20445
|
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
20446
|
return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
|
|
@@ -20250,14 +20454,27 @@ function EnterAmountView({
|
|
|
20250
20454
|
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
20251
20455
|
DepositHeader,
|
|
20252
20456
|
{
|
|
20253
|
-
title:
|
|
20254
|
-
subtitle:
|
|
20457
|
+
title: headerTitle,
|
|
20458
|
+
subtitle: headerSubtitle ?? void 0,
|
|
20255
20459
|
showBack: true,
|
|
20256
20460
|
onBack,
|
|
20257
20461
|
onClose
|
|
20258
20462
|
}
|
|
20259
20463
|
),
|
|
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.
|
|
20464
|
+
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: [
|
|
20465
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)(WalletWithNetworkBadge, { walletInfo: walletInfoProp }),
|
|
20466
|
+
isCheckout && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
20467
|
+
"span",
|
|
20468
|
+
{
|
|
20469
|
+
className: "uf-text-xs",
|
|
20470
|
+
style: {
|
|
20471
|
+
color: colors2.foregroundMuted,
|
|
20472
|
+
fontFamily: fonts.regular
|
|
20473
|
+
},
|
|
20474
|
+
children: balanceSubtitle
|
|
20475
|
+
}
|
|
20476
|
+
)
|
|
20477
|
+
] }) }) : null,
|
|
20261
20478
|
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "uf-flex uf-min-h-0 uf-flex-1 uf-flex-col", children: [
|
|
20262
20479
|
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "uf-min-h-0 uf-flex-1", children: [
|
|
20263
20480
|
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "uf-text-center uf-py-8", children: [
|
|
@@ -20280,7 +20497,9 @@ function EnterAmountView({
|
|
|
20280
20497
|
inputMode: "decimal",
|
|
20281
20498
|
placeholder: "0",
|
|
20282
20499
|
value: amountUsd,
|
|
20500
|
+
readOnly: isCheckout,
|
|
20283
20501
|
onChange: (e) => {
|
|
20502
|
+
if (isCheckout) return;
|
|
20284
20503
|
const value = e.target.value;
|
|
20285
20504
|
if (value === "" || /^\d*\.?\d*$/.test(value)) {
|
|
20286
20505
|
const decimalIndex = value.indexOf(".");
|
|
@@ -20291,7 +20510,7 @@ function EnterAmountView({
|
|
|
20291
20510
|
onAmountChange(value);
|
|
20292
20511
|
}
|
|
20293
20512
|
},
|
|
20294
|
-
className:
|
|
20513
|
+
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
20514
|
style: {
|
|
20296
20515
|
fontSize: `${Math.max(3.75 - (amountUsd || "0").length * 0.15, 2)}rem`,
|
|
20297
20516
|
color: components.input.textColor,
|
|
@@ -20313,7 +20532,7 @@ function EnterAmountView({
|
|
|
20313
20532
|
}
|
|
20314
20533
|
)
|
|
20315
20534
|
] }),
|
|
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: [
|
|
20535
|
+
!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
20536
|
PERCENT_QUICK_AMOUNTS.map((pct) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
|
|
20318
20537
|
"button",
|
|
20319
20538
|
{
|
|
@@ -20382,7 +20601,46 @@ function EnterAmountView({
|
|
|
20382
20601
|
}
|
|
20383
20602
|
)
|
|
20384
20603
|
] }) }),
|
|
20385
|
-
tokenChainDetails && tokenChainDetails.minimum_deposit_amount_usd > 0 && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
|
|
20604
|
+
tokenChainDetails && tokenChainDetails.minimum_deposit_amount_usd > 0 && (isCheckout && checkoutAmountUsd && inputUsdNum > parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0") + 5e-3 ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
|
|
20605
|
+
"div",
|
|
20606
|
+
{
|
|
20607
|
+
className: "uf-rounded-lg uf-px-3 uf-py-2 uf-mb-3 uf-text-center",
|
|
20608
|
+
style: {
|
|
20609
|
+
backgroundColor: colors2.warning + "15",
|
|
20610
|
+
border: `1px solid ${colors2.warning}30`,
|
|
20611
|
+
borderRadius: components.card.borderRadius,
|
|
20612
|
+
animation: "uf-fadeSlideIn 0.4s ease-out"
|
|
20613
|
+
},
|
|
20614
|
+
children: [
|
|
20615
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
|
|
20616
|
+
"div",
|
|
20617
|
+
{
|
|
20618
|
+
className: "uf-text-xs uf-font-medium",
|
|
20619
|
+
style: { color: colors2.warning, fontFamily: fonts.medium },
|
|
20620
|
+
children: [
|
|
20621
|
+
"Minimum for ",
|
|
20622
|
+
selectedToken.symbol,
|
|
20623
|
+
" on ",
|
|
20624
|
+
selectedToken.chain_name,
|
|
20625
|
+
" is $",
|
|
20626
|
+
tokenChainDetails.minimum_deposit_amount_usd.toFixed(2)
|
|
20627
|
+
]
|
|
20628
|
+
}
|
|
20629
|
+
),
|
|
20630
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
|
|
20631
|
+
"div",
|
|
20632
|
+
{
|
|
20633
|
+
className: "uf-text-xs uf-mt-0.5",
|
|
20634
|
+
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
20635
|
+
children: [
|
|
20636
|
+
"Amount adjusted from remaining $",
|
|
20637
|
+
(parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0")).toFixed(2)
|
|
20638
|
+
]
|
|
20639
|
+
}
|
|
20640
|
+
)
|
|
20641
|
+
]
|
|
20642
|
+
}
|
|
20643
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
|
|
20386
20644
|
"div",
|
|
20387
20645
|
{
|
|
20388
20646
|
className: "uf-text-center uf-text-xs uf-mb-3",
|
|
@@ -20392,7 +20650,7 @@ function EnterAmountView({
|
|
|
20392
20650
|
tokenChainDetails.minimum_deposit_amount_usd.toFixed(2)
|
|
20393
20651
|
]
|
|
20394
20652
|
}
|
|
20395
|
-
),
|
|
20653
|
+
)),
|
|
20396
20654
|
inputUsdNum > 0 && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_jsx_runtime63.Fragment, { children: inputUsdNum > maxUsdAmount ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
20397
20655
|
"div",
|
|
20398
20656
|
{
|
|
@@ -20407,7 +20665,44 @@ function EnterAmountView({
|
|
|
20407
20665
|
style: { color: colors2.error },
|
|
20408
20666
|
children: error
|
|
20409
20667
|
}
|
|
20410
|
-
) })
|
|
20668
|
+
) }),
|
|
20669
|
+
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: [
|
|
20670
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "uf-relative", children: [
|
|
20671
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
20672
|
+
"img",
|
|
20673
|
+
{
|
|
20674
|
+
src: selectedToken.icon_url,
|
|
20675
|
+
alt: selectedToken.symbol,
|
|
20676
|
+
width: 20,
|
|
20677
|
+
height: 20,
|
|
20678
|
+
className: "uf-w-5 uf-h-5 uf-rounded-full"
|
|
20679
|
+
}
|
|
20680
|
+
),
|
|
20681
|
+
selectedToken.chain_icon_url && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
20682
|
+
"img",
|
|
20683
|
+
{
|
|
20684
|
+
src: selectedToken.chain_icon_url,
|
|
20685
|
+
alt: selectedToken.chain_name,
|
|
20686
|
+
width: 10,
|
|
20687
|
+
height: 10,
|
|
20688
|
+
className: "uf-w-2.5 uf-h-2.5 uf-rounded-full uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-border",
|
|
20689
|
+
style: { borderColor: colors2.background }
|
|
20690
|
+
}
|
|
20691
|
+
)
|
|
20692
|
+
] }),
|
|
20693
|
+
/* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
|
|
20694
|
+
"span",
|
|
20695
|
+
{
|
|
20696
|
+
className: "uf-text-xs",
|
|
20697
|
+
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
20698
|
+
children: [
|
|
20699
|
+
selectedToken.symbol,
|
|
20700
|
+
" on ",
|
|
20701
|
+
selectedToken.chain_name
|
|
20702
|
+
]
|
|
20703
|
+
}
|
|
20704
|
+
)
|
|
20705
|
+
] })
|
|
20411
20706
|
] }),
|
|
20412
20707
|
/* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "uf-shrink-0 uf-pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
|
|
20413
20708
|
"button",
|
|
@@ -20431,6 +20726,18 @@ function EnterAmountView({
|
|
|
20431
20726
|
}
|
|
20432
20727
|
);
|
|
20433
20728
|
}
|
|
20729
|
+
var WALLET_ICONS2 = {
|
|
20730
|
+
metamask: MetamaskIcon,
|
|
20731
|
+
phantom: PhantomIcon,
|
|
20732
|
+
coinbase: CoinbaseIcon,
|
|
20733
|
+
trust: TrustIcon,
|
|
20734
|
+
rainbow: RainbowIcon,
|
|
20735
|
+
rabby: RabbyIcon,
|
|
20736
|
+
okx: OkxIcon,
|
|
20737
|
+
solflare: SolflareIcon,
|
|
20738
|
+
backpack: BackpackIcon,
|
|
20739
|
+
glow: GlowIcon
|
|
20740
|
+
};
|
|
20434
20741
|
function ReviewView({
|
|
20435
20742
|
walletInfo,
|
|
20436
20743
|
recipientAddress,
|
|
@@ -20465,30 +20772,17 @@ function ReviewView({
|
|
|
20465
20772
|
),
|
|
20466
20773
|
/* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "uf-flex uf-min-h-0 uf-flex-1 uf-flex-col", children: [
|
|
20467
20774
|
/* @__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
|
-
] }),
|
|
20775
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "uf-text-center", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
|
|
20776
|
+
"div",
|
|
20777
|
+
{
|
|
20778
|
+
className: "uf-text-4xl uf-font-medium",
|
|
20779
|
+
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
20780
|
+
children: [
|
|
20781
|
+
"$",
|
|
20782
|
+
amountUsd || "0"
|
|
20783
|
+
]
|
|
20784
|
+
}
|
|
20785
|
+
) }),
|
|
20492
20786
|
/* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
|
|
20493
20787
|
"div",
|
|
20494
20788
|
{
|
|
@@ -20505,7 +20799,31 @@ function ReviewView({
|
|
|
20505
20799
|
{
|
|
20506
20800
|
className: "uf-text-sm",
|
|
20507
20801
|
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
20508
|
-
children: "
|
|
20802
|
+
children: "From"
|
|
20803
|
+
}
|
|
20804
|
+
),
|
|
20805
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
20806
|
+
WALLET_ICONS2[walletInfo.icon] && (() => {
|
|
20807
|
+
const Icon22 = WALLET_ICONS2[walletInfo.icon];
|
|
20808
|
+
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" }) });
|
|
20809
|
+
})(),
|
|
20810
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
|
|
20811
|
+
"span",
|
|
20812
|
+
{
|
|
20813
|
+
className: "uf-text-sm uf-font-medium",
|
|
20814
|
+
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
20815
|
+
children: walletInfo.name
|
|
20816
|
+
}
|
|
20817
|
+
)
|
|
20818
|
+
] })
|
|
20819
|
+
] }),
|
|
20820
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "uf-flex uf-justify-between uf-items-center", children: [
|
|
20821
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
|
|
20822
|
+
"span",
|
|
20823
|
+
{
|
|
20824
|
+
className: "uf-text-sm",
|
|
20825
|
+
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
20826
|
+
children: "You send"
|
|
20509
20827
|
}
|
|
20510
20828
|
),
|
|
20511
20829
|
/* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
@@ -20517,17 +20835,12 @@ function ReviewView({
|
|
|
20517
20835
|
className: "uf-w-5 uf-h-5 uf-rounded-full"
|
|
20518
20836
|
}
|
|
20519
20837
|
),
|
|
20520
|
-
/* @__PURE__ */ (0, import_jsx_runtime64.
|
|
20838
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
|
|
20521
20839
|
"span",
|
|
20522
20840
|
{
|
|
20523
20841
|
className: "uf-text-sm uf-font-medium",
|
|
20524
20842
|
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
20525
|
-
children:
|
|
20526
|
-
walletInfo.name,
|
|
20527
|
-
" (",
|
|
20528
|
-
truncateAddress2(walletInfo.address),
|
|
20529
|
-
")"
|
|
20530
|
-
]
|
|
20843
|
+
children: formattedTokenAmount || `$${amountUsd}`
|
|
20531
20844
|
}
|
|
20532
20845
|
)
|
|
20533
20846
|
] })
|
|
@@ -20690,7 +21003,10 @@ function ReviewView({
|
|
|
20690
21003
|
borderRadius: components.button.borderRadius,
|
|
20691
21004
|
border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
|
|
20692
21005
|
},
|
|
20693
|
-
children: isConfirming ? "
|
|
21006
|
+
children: isConfirming ? /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2", children: [
|
|
21007
|
+
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
|
|
21008
|
+
"Confirming..."
|
|
21009
|
+
] }) : "Confirm Order"
|
|
20694
21010
|
}
|
|
20695
21011
|
) })
|
|
20696
21012
|
] })
|
|
@@ -20699,17 +21015,35 @@ function ReviewView({
|
|
|
20699
21015
|
}
|
|
20700
21016
|
);
|
|
20701
21017
|
}
|
|
21018
|
+
var SETTLE_FALLBACK_MS = 15e3;
|
|
20702
21019
|
function ConfirmingView({
|
|
20703
21020
|
isConfirming,
|
|
20704
21021
|
onClose,
|
|
20705
21022
|
executions = [],
|
|
20706
|
-
isPolling = false
|
|
21023
|
+
isPolling = false,
|
|
21024
|
+
onNewDeposit,
|
|
21025
|
+
onDone,
|
|
21026
|
+
paymentIntentStatus,
|
|
21027
|
+
amountReceivedUsd,
|
|
21028
|
+
amountReceivedUsdAtSubmission
|
|
20707
21029
|
}) {
|
|
20708
|
-
const { colors: colors2, fonts } = useTheme();
|
|
21030
|
+
const { colors: colors2, fonts, components } = useTheme();
|
|
20709
21031
|
const [containerEl, setContainerEl] = (0, import_react25.useState)(null);
|
|
20710
21032
|
const containerCallbackRef = (0, import_react25.useCallback)((el) => {
|
|
20711
21033
|
setContainerEl(el);
|
|
20712
21034
|
}, []);
|
|
21035
|
+
const [fallbackSettled, setFallbackSettled] = (0, import_react25.useState)(false);
|
|
21036
|
+
const hasExecution = executions.length > 0;
|
|
21037
|
+
const isCheckoutMode = paymentIntentStatus != null;
|
|
21038
|
+
const isPaymentComplete = paymentIntentStatus === "succeeded";
|
|
21039
|
+
const amountChanged = amountReceivedUsdAtSubmission != null && amountReceivedUsd != null && amountReceivedUsd !== amountReceivedUsdAtSubmission;
|
|
21040
|
+
const piSettled = !isCheckoutMode || isPaymentComplete || amountChanged || fallbackSettled;
|
|
21041
|
+
(0, import_react25.useEffect)(() => {
|
|
21042
|
+
if (!hasExecution || piSettled) return;
|
|
21043
|
+
const timeout = setTimeout(() => setFallbackSettled(true), SETTLE_FALLBACK_MS);
|
|
21044
|
+
return () => clearTimeout(timeout);
|
|
21045
|
+
}, [hasExecution, piSettled]);
|
|
21046
|
+
const showButtons = hasExecution && piSettled;
|
|
20713
21047
|
return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(PortalContainerProvider, { value: containerEl, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
20714
21048
|
"div",
|
|
20715
21049
|
{
|
|
@@ -20722,8 +21056,8 @@ function ConfirmingView({
|
|
|
20722
21056
|
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
20723
21057
|
DepositHeader,
|
|
20724
21058
|
{
|
|
20725
|
-
title: isConfirming ? "Confirming..." : "Processing",
|
|
20726
|
-
onClose
|
|
21059
|
+
title: isConfirming ? "Confirming..." : hasExecution && isPaymentComplete ? "Payment Complete" : hasExecution ? "Deposit Received" : "Processing",
|
|
21060
|
+
onClose: isPaymentComplete && onDone ? onDone : onClose
|
|
20727
21061
|
}
|
|
20728
21062
|
),
|
|
20729
21063
|
/* @__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,12 +21084,71 @@ function ConfirmingView({
|
|
|
20750
21084
|
children: "Please confirm the transaction in your wallet"
|
|
20751
21085
|
}
|
|
20752
21086
|
)
|
|
20753
|
-
] }) : /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
|
|
21087
|
+
] }) : hasExecution ? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
|
|
20754
21088
|
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
20755
21089
|
CircleCheck,
|
|
20756
21090
|
{
|
|
20757
21091
|
className: "uf-w-12 uf-h-12 uf-mb-4",
|
|
20758
|
-
style: { color:
|
|
21092
|
+
style: { color: "rgb(34, 197, 94)" }
|
|
21093
|
+
}
|
|
21094
|
+
),
|
|
21095
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
21096
|
+
"div",
|
|
21097
|
+
{
|
|
21098
|
+
className: "uf-text-lg uf-font-medium",
|
|
21099
|
+
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
21100
|
+
children: isPaymentComplete ? "Payment Complete" : "Deposit Received"
|
|
21101
|
+
}
|
|
21102
|
+
),
|
|
21103
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
21104
|
+
"div",
|
|
21105
|
+
{
|
|
21106
|
+
className: "uf-text-sm uf-mt-2 uf-text-center uf-px-6",
|
|
21107
|
+
style: { color: colors2.foregroundMuted },
|
|
21108
|
+
children: isPaymentComplete ? "Your payment has been fulfilled." : showButtons ? "Your deposit is being processed." : "Checking payment status..."
|
|
21109
|
+
}
|
|
21110
|
+
),
|
|
21111
|
+
/* @__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)(
|
|
21112
|
+
LoaderCircle,
|
|
21113
|
+
{
|
|
21114
|
+
className: "uf-w-5 uf-h-5 uf-animate-spin",
|
|
21115
|
+
style: { color: colors2.foregroundMuted }
|
|
21116
|
+
}
|
|
21117
|
+
) : isPaymentComplete && onDone ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
21118
|
+
"button",
|
|
21119
|
+
{
|
|
21120
|
+
onClick: onDone,
|
|
21121
|
+
className: "uf-w-full uf-py-3 uf-px-8 uf-text-sm uf-font-medium uf-transition-opacity hover:uf-opacity-80",
|
|
21122
|
+
style: {
|
|
21123
|
+
backgroundColor: colors2.primary,
|
|
21124
|
+
color: colors2.primaryForeground,
|
|
21125
|
+
fontFamily: fonts.medium,
|
|
21126
|
+
borderRadius: components.button.borderRadius
|
|
21127
|
+
},
|
|
21128
|
+
children: "Done"
|
|
21129
|
+
}
|
|
21130
|
+
) : onNewDeposit ? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
21131
|
+
"button",
|
|
21132
|
+
{
|
|
21133
|
+
onClick: onNewDeposit,
|
|
21134
|
+
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",
|
|
21135
|
+
style: {
|
|
21136
|
+
backgroundColor: colors2.primary,
|
|
21137
|
+
color: colors2.primaryForeground,
|
|
21138
|
+
fontFamily: fonts.medium
|
|
21139
|
+
},
|
|
21140
|
+
children: [
|
|
21141
|
+
"Make another deposit",
|
|
21142
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)(ArrowRight, { className: "uf-w-4 uf-h-4" })
|
|
21143
|
+
]
|
|
21144
|
+
}
|
|
21145
|
+
) : null })
|
|
21146
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
|
|
21147
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
21148
|
+
LoaderCircle,
|
|
21149
|
+
{
|
|
21150
|
+
className: "uf-w-12 uf-h-12 uf-animate-spin uf-mb-4",
|
|
21151
|
+
style: { color: colors2.primary }
|
|
20759
21152
|
}
|
|
20760
21153
|
),
|
|
20761
21154
|
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
@@ -20771,7 +21164,7 @@ function ConfirmingView({
|
|
|
20771
21164
|
{
|
|
20772
21165
|
className: "uf-text-sm uf-mt-2 uf-text-center uf-px-6",
|
|
20773
21166
|
style: { color: colors2.foregroundMuted },
|
|
20774
|
-
children: "
|
|
21167
|
+
children: "Waiting for your deposit to be detected..."
|
|
20775
21168
|
}
|
|
20776
21169
|
)
|
|
20777
21170
|
] }) }),
|
|
@@ -20795,6 +21188,7 @@ function BrowserWalletModal({
|
|
|
20795
21188
|
depositWallet,
|
|
20796
21189
|
userId,
|
|
20797
21190
|
publishableKey,
|
|
21191
|
+
clientSecret,
|
|
20798
21192
|
assetCdnUrl,
|
|
20799
21193
|
projectName,
|
|
20800
21194
|
theme = "dark",
|
|
@@ -20803,7 +21197,13 @@ function BrowserWalletModal({
|
|
|
20803
21197
|
onDepositSuccess,
|
|
20804
21198
|
onDepositError,
|
|
20805
21199
|
amountQuickSelect = "percentage",
|
|
20806
|
-
onWalletDisconnect
|
|
21200
|
+
onWalletDisconnect,
|
|
21201
|
+
prefillAmountUsd,
|
|
21202
|
+
checkoutAmountUsd,
|
|
21203
|
+
checkoutReceivedUsd,
|
|
21204
|
+
onNewDeposit,
|
|
21205
|
+
onDone,
|
|
21206
|
+
paymentIntentStatus
|
|
20807
21207
|
}) {
|
|
20808
21208
|
const { colors: colors2, fonts, components } = useTheme();
|
|
20809
21209
|
const [step, setStep] = React262.useState("select-token");
|
|
@@ -20821,6 +21221,7 @@ function BrowserWalletModal({
|
|
|
20821
21221
|
const [tokenChainDetails, setTokenChainDetails] = React262.useState(null);
|
|
20822
21222
|
const [loadingTokenDetails, setLoadingTokenDetails] = React262.useState(false);
|
|
20823
21223
|
const [showTransactionDetails, setShowTransactionDetails] = React262.useState(false);
|
|
21224
|
+
const [receivedUsdAtSubmission, setReceivedUsdAtSubmission] = React262.useState(null);
|
|
20824
21225
|
const themeClass = theme === "dark" ? "uf-dark" : "";
|
|
20825
21226
|
const chainType = depositWallet.chain_type;
|
|
20826
21227
|
const recipientAddress = depositWallet.address;
|
|
@@ -20828,15 +21229,19 @@ function BrowserWalletModal({
|
|
|
20828
21229
|
const { executions: depositExecutions, isPolling } = useDepositPolling({
|
|
20829
21230
|
userId,
|
|
20830
21231
|
publishableKey,
|
|
21232
|
+
clientSecret,
|
|
20831
21233
|
enabled: open && hasSignedTransaction,
|
|
20832
21234
|
onDepositSuccess,
|
|
20833
21235
|
onDepositError
|
|
20834
21236
|
});
|
|
21237
|
+
const prevOpenRef = React262.useRef(false);
|
|
20835
21238
|
React262.useEffect(() => {
|
|
20836
|
-
|
|
21239
|
+
const wasOpen = prevOpenRef.current;
|
|
21240
|
+
prevOpenRef.current = open;
|
|
21241
|
+
if (open && !wasOpen) {
|
|
20837
21242
|
setStep("select-token");
|
|
20838
21243
|
setSelectedBalance(null);
|
|
20839
|
-
setAmountUsd("");
|
|
21244
|
+
setAmountUsd(prefillAmountUsd ?? "");
|
|
20840
21245
|
setError(null);
|
|
20841
21246
|
setIsConfirming(false);
|
|
20842
21247
|
setTokenChainDetails(null);
|
|
@@ -20844,7 +21249,15 @@ function BrowserWalletModal({
|
|
|
20844
21249
|
setHasSignedTransaction(false);
|
|
20845
21250
|
setIsDisconnectingWallet(false);
|
|
20846
21251
|
}
|
|
20847
|
-
}, [open]);
|
|
21252
|
+
}, [open, prefillAmountUsd]);
|
|
21253
|
+
React262.useEffect(() => {
|
|
21254
|
+
if (!prefillAmountUsd || !tokenChainDetails || step !== "input-amount") return;
|
|
21255
|
+
const minDeposit = tokenChainDetails.minimum_deposit_amount_usd || 0;
|
|
21256
|
+
const currentAmount = parseFloat(amountUsd) || 0;
|
|
21257
|
+
if (currentAmount > 0 && currentAmount < minDeposit) {
|
|
21258
|
+
setAmountUsd(minDeposit.toFixed(2));
|
|
21259
|
+
}
|
|
21260
|
+
}, [tokenChainDetails, step, prefillAmountUsd]);
|
|
20848
21261
|
React262.useEffect(() => {
|
|
20849
21262
|
if (step === "review") {
|
|
20850
21263
|
setShowTransactionDetails(false);
|
|
@@ -20962,7 +21375,7 @@ function BrowserWalletModal({
|
|
|
20962
21375
|
setError(null);
|
|
20963
21376
|
if (step === "input-amount") {
|
|
20964
21377
|
setStep("select-token");
|
|
20965
|
-
setAmountUsd("");
|
|
21378
|
+
setAmountUsd(prefillAmountUsd ?? "");
|
|
20966
21379
|
setTokenChainDetails(null);
|
|
20967
21380
|
} else if (step === "review") {
|
|
20968
21381
|
setStep("input-amount");
|
|
@@ -21048,7 +21461,6 @@ function BrowserWalletModal({
|
|
|
21048
21461
|
}
|
|
21049
21462
|
}
|
|
21050
21463
|
setIsConfirming(true);
|
|
21051
|
-
setStep("confirming");
|
|
21052
21464
|
setError(null);
|
|
21053
21465
|
try {
|
|
21054
21466
|
let txHash;
|
|
@@ -21066,16 +21478,17 @@ function BrowserWalletModal({
|
|
|
21066
21478
|
} else {
|
|
21067
21479
|
txHash = await sendEthereumTransaction(token, tokenAmount.toString());
|
|
21068
21480
|
}
|
|
21481
|
+
setReceivedUsdAtSubmission(checkoutReceivedUsd ?? "0");
|
|
21069
21482
|
setHasSignedTransaction(true);
|
|
21070
|
-
onSuccess?.(txHash);
|
|
21071
21483
|
setIsConfirming(false);
|
|
21484
|
+
setStep("confirming");
|
|
21485
|
+
onSuccess?.(txHash);
|
|
21072
21486
|
} catch (err) {
|
|
21073
21487
|
console.error("[BrowserWalletModal] Transaction error:", err);
|
|
21074
21488
|
const errorMessage = err instanceof Error ? err.message : "Transaction failed";
|
|
21075
21489
|
setError(errorMessage);
|
|
21076
21490
|
onError?.(err instanceof Error ? err : new Error(errorMessage));
|
|
21077
21491
|
setIsConfirming(false);
|
|
21078
|
-
setStep("review");
|
|
21079
21492
|
}
|
|
21080
21493
|
};
|
|
21081
21494
|
const sendEthereumTransaction = async (token, amountStr) => {
|
|
@@ -21324,7 +21737,9 @@ function BrowserWalletModal({
|
|
|
21324
21737
|
onBack: handleClose,
|
|
21325
21738
|
onClose: handleFullClose,
|
|
21326
21739
|
onDisconnectWallet: onWalletDisconnect ? () => void handleDisconnectFromSelectToken() : void 0,
|
|
21327
|
-
isDisconnectingWallet
|
|
21740
|
+
isDisconnectingWallet,
|
|
21741
|
+
checkoutAmountUsd,
|
|
21742
|
+
checkoutReceivedUsd
|
|
21328
21743
|
}
|
|
21329
21744
|
),
|
|
21330
21745
|
step === "input-amount" && selectedToken && selectedBalance && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
@@ -21345,7 +21760,9 @@ function BrowserWalletModal({
|
|
|
21345
21760
|
onReview: handleReview,
|
|
21346
21761
|
onBack: handleBack,
|
|
21347
21762
|
onClose: handleFullClose,
|
|
21348
|
-
quickSelectMode: amountQuickSelect
|
|
21763
|
+
quickSelectMode: amountQuickSelect,
|
|
21764
|
+
checkoutAmountUsd,
|
|
21765
|
+
checkoutReceivedUsd
|
|
21349
21766
|
}
|
|
21350
21767
|
),
|
|
21351
21768
|
step === "review" && selectedToken && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
@@ -21374,7 +21791,12 @@ function BrowserWalletModal({
|
|
|
21374
21791
|
isConfirming,
|
|
21375
21792
|
onClose: handleFullClose,
|
|
21376
21793
|
executions: depositExecutions,
|
|
21377
|
-
isPolling
|
|
21794
|
+
isPolling,
|
|
21795
|
+
onNewDeposit,
|
|
21796
|
+
onDone,
|
|
21797
|
+
paymentIntentStatus,
|
|
21798
|
+
amountReceivedUsd: checkoutReceivedUsd,
|
|
21799
|
+
amountReceivedUsdAtSubmission: receivedUsdAtSubmission
|
|
21378
21800
|
}
|
|
21379
21801
|
)
|
|
21380
21802
|
] })
|
|
@@ -21383,7 +21805,7 @@ function BrowserWalletModal({
|
|
|
21383
21805
|
}
|
|
21384
21806
|
) });
|
|
21385
21807
|
}
|
|
21386
|
-
var
|
|
21808
|
+
var WALLET_ICONS3 = {
|
|
21387
21809
|
metamask: MetamaskIcon,
|
|
21388
21810
|
phantom: PhantomIcon,
|
|
21389
21811
|
coinbase: CoinbaseIcon,
|
|
@@ -21822,10 +22244,10 @@ function WalletSelectionModal({
|
|
|
21822
22244
|
},
|
|
21823
22245
|
children: [
|
|
21824
22246
|
/* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
|
|
21825
|
-
|
|
22247
|
+
WALLET_ICONS3[wallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
21826
22248
|
WalletIconWithNetwork,
|
|
21827
22249
|
{
|
|
21828
|
-
WalletIcon:
|
|
22250
|
+
WalletIcon: WALLET_ICONS3[wallet.id],
|
|
21829
22251
|
networks: wallet.networks,
|
|
21830
22252
|
size: 40,
|
|
21831
22253
|
className: "uf-rounded-lg"
|
|
@@ -21896,10 +22318,10 @@ function WalletSelectionModal({
|
|
|
21896
22318
|
style: { minHeight: WALLET_STEP_BODY_MIN_HEIGHT },
|
|
21897
22319
|
children: [
|
|
21898
22320
|
/* @__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:
|
|
22321
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "uf-mb-2", children: WALLET_ICONS3[selectedWallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
21900
22322
|
WalletIconWithNetwork,
|
|
21901
22323
|
{
|
|
21902
|
-
WalletIcon:
|
|
22324
|
+
WalletIcon: WALLET_ICONS3[selectedWallet.id],
|
|
21903
22325
|
networks: selectedWallet.networks,
|
|
21904
22326
|
size: 48,
|
|
21905
22327
|
className: "uf-rounded-lg"
|
|
@@ -22698,8 +23120,666 @@ function DepositModal({
|
|
|
22698
23120
|
}
|
|
22699
23121
|
) });
|
|
22700
23122
|
}
|
|
22701
|
-
function
|
|
23123
|
+
function usePaymentIntent(params) {
|
|
23124
|
+
const {
|
|
23125
|
+
clientSecret,
|
|
23126
|
+
publishableKey,
|
|
23127
|
+
enabled = true,
|
|
23128
|
+
pollingInterval = 5e3
|
|
23129
|
+
} = params;
|
|
22702
23130
|
return (0, import_react_query11.useQuery)({
|
|
23131
|
+
queryKey: ["unifold", "paymentIntent", clientSecret, publishableKey],
|
|
23132
|
+
queryFn: () => retrievePaymentIntent(clientSecret, publishableKey),
|
|
23133
|
+
enabled: enabled && !!clientSecret && !!publishableKey,
|
|
23134
|
+
staleTime: 0,
|
|
23135
|
+
refetchInterval: pollingInterval || false,
|
|
23136
|
+
refetchOnWindowFocus: true,
|
|
23137
|
+
retry: 3,
|
|
23138
|
+
retryDelay: (attempt) => Math.min(1e3 * 2 ** attempt, 1e4)
|
|
23139
|
+
});
|
|
23140
|
+
}
|
|
23141
|
+
function useDepositQuote(params) {
|
|
23142
|
+
const {
|
|
23143
|
+
publishableKey,
|
|
23144
|
+
sourceChainType,
|
|
23145
|
+
sourceChainId,
|
|
23146
|
+
sourceTokenAddress,
|
|
23147
|
+
destinationAmount,
|
|
23148
|
+
destinationChainType,
|
|
23149
|
+
destinationChainId,
|
|
23150
|
+
destinationTokenAddress,
|
|
23151
|
+
enabled = true
|
|
23152
|
+
} = params;
|
|
23153
|
+
const request = {
|
|
23154
|
+
source_chain_type: sourceChainType,
|
|
23155
|
+
source_chain_id: sourceChainId,
|
|
23156
|
+
source_token_address: sourceTokenAddress,
|
|
23157
|
+
destination_amount: destinationAmount,
|
|
23158
|
+
destination_chain_type: destinationChainType,
|
|
23159
|
+
destination_chain_id: destinationChainId,
|
|
23160
|
+
destination_token_address: destinationTokenAddress
|
|
23161
|
+
};
|
|
23162
|
+
return (0, import_react_query12.useQuery)({
|
|
23163
|
+
queryKey: [
|
|
23164
|
+
"unifold",
|
|
23165
|
+
"depositQuote",
|
|
23166
|
+
sourceChainType,
|
|
23167
|
+
sourceChainId,
|
|
23168
|
+
sourceTokenAddress,
|
|
23169
|
+
destinationAmount,
|
|
23170
|
+
destinationChainType,
|
|
23171
|
+
destinationChainId,
|
|
23172
|
+
destinationTokenAddress,
|
|
23173
|
+
publishableKey
|
|
23174
|
+
],
|
|
23175
|
+
queryFn: () => getDepositQuote(request, publishableKey),
|
|
23176
|
+
enabled: enabled && !!publishableKey && !!sourceChainType && !!sourceChainId && !!sourceTokenAddress && !!destinationAmount && destinationAmount !== "0" && !!destinationChainType && !!destinationChainId && !!destinationTokenAddress,
|
|
23177
|
+
staleTime: 6e4,
|
|
23178
|
+
gcTime: 5 * 6e4,
|
|
23179
|
+
refetchOnWindowFocus: false,
|
|
23180
|
+
retry: 2,
|
|
23181
|
+
retryDelay: (attempt) => Math.min(1e3 * 2 ** attempt, 5e3)
|
|
23182
|
+
});
|
|
23183
|
+
}
|
|
23184
|
+
function mapDepositAddressesToWallets(depositAddresses, pi) {
|
|
23185
|
+
return depositAddresses.map((da, idx) => ({
|
|
23186
|
+
id: da.id,
|
|
23187
|
+
chain_type: da.chain_type,
|
|
23188
|
+
address_type: da.address_type,
|
|
23189
|
+
address: da.address,
|
|
23190
|
+
destination_chain_type: pi.destination_chain_type,
|
|
23191
|
+
destination_chain_id: pi.destination_chain_id,
|
|
23192
|
+
destination_token_address: pi.destination_token_address,
|
|
23193
|
+
recipient_address: pi.recipient_address,
|
|
23194
|
+
is_primary: idx === 0
|
|
23195
|
+
}));
|
|
23196
|
+
}
|
|
23197
|
+
function SkeletonButton2() {
|
|
23198
|
+
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: [
|
|
23199
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
|
|
23200
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-bg-muted uf-rounded-lg uf-w-9 uf-h-9" }),
|
|
23201
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-space-y-1.5", children: [
|
|
23202
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-h-3.5 uf-w-24 uf-bg-muted uf-rounded" }),
|
|
23203
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-h-3 uf-w-32 uf-bg-muted uf-rounded" })
|
|
23204
|
+
] })
|
|
23205
|
+
] }),
|
|
23206
|
+
/* @__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" }) })
|
|
23207
|
+
] });
|
|
23208
|
+
}
|
|
23209
|
+
function CheckoutModal({
|
|
23210
|
+
open,
|
|
23211
|
+
onOpenChange,
|
|
23212
|
+
clientSecret,
|
|
23213
|
+
publishableKey,
|
|
23214
|
+
modalTitle,
|
|
23215
|
+
enableConnectWallet = false,
|
|
23216
|
+
theme = "dark",
|
|
23217
|
+
onCheckoutSuccess,
|
|
23218
|
+
onCheckoutError
|
|
23219
|
+
}) {
|
|
23220
|
+
const { colors: colors2, fonts, components } = useTheme();
|
|
23221
|
+
const [view, setView] = (0, import_react26.useState)("main");
|
|
23222
|
+
const resetViewTimeoutRef = (0, import_react26.useRef)(
|
|
23223
|
+
null
|
|
23224
|
+
);
|
|
23225
|
+
const [browserWalletModalOpen, setBrowserWalletModalOpen] = (0, import_react26.useState)(false);
|
|
23226
|
+
const [browserWalletInfo, setBrowserWalletInfo] = (0, import_react26.useState)(null);
|
|
23227
|
+
const [walletSelectionModalOpen, setWalletSelectionModalOpen] = (0, import_react26.useState)(false);
|
|
23228
|
+
const [browserWalletChainType, setBrowserWalletChainType] = (0, import_react26.useState)(() => getStoredWalletChainType());
|
|
23229
|
+
const isMobileView = useIsMobileViewport();
|
|
23230
|
+
const [resolvedTheme, setResolvedTheme] = (0, import_react26.useState)(
|
|
23231
|
+
theme === "auto" ? "dark" : theme
|
|
23232
|
+
);
|
|
23233
|
+
(0, import_react26.useEffect)(() => {
|
|
23234
|
+
if (theme === "auto") {
|
|
23235
|
+
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
23236
|
+
setResolvedTheme(mediaQuery.matches ? "dark" : "light");
|
|
23237
|
+
const handler = (e) => {
|
|
23238
|
+
setResolvedTheme(e.matches ? "dark" : "light");
|
|
23239
|
+
};
|
|
23240
|
+
mediaQuery.addEventListener("change", handler);
|
|
23241
|
+
return () => mediaQuery.removeEventListener("change", handler);
|
|
23242
|
+
} else {
|
|
23243
|
+
setResolvedTheme(theme);
|
|
23244
|
+
}
|
|
23245
|
+
}, [theme]);
|
|
23246
|
+
const themeClass = resolvedTheme === "dark" ? "uf-dark" : "";
|
|
23247
|
+
const {
|
|
23248
|
+
data: paymentIntent,
|
|
23249
|
+
isLoading: piLoading,
|
|
23250
|
+
error: piError
|
|
23251
|
+
} = usePaymentIntent({
|
|
23252
|
+
clientSecret,
|
|
23253
|
+
publishableKey,
|
|
23254
|
+
enabled: open && !!clientSecret,
|
|
23255
|
+
pollingInterval: 5e3
|
|
23256
|
+
});
|
|
23257
|
+
const { projectConfig } = useProjectConfig({
|
|
23258
|
+
publishableKey,
|
|
23259
|
+
enabled: open
|
|
23260
|
+
});
|
|
23261
|
+
const prevStatusRef = (0, import_react26.useRef)(null);
|
|
23262
|
+
(0, import_react26.useEffect)(() => {
|
|
23263
|
+
if (!paymentIntent) return;
|
|
23264
|
+
const prev = prevStatusRef.current;
|
|
23265
|
+
prevStatusRef.current = paymentIntent.status;
|
|
23266
|
+
if (prev && prev !== paymentIntent.status && paymentIntent.status === "succeeded") {
|
|
23267
|
+
if (!browserWalletModalOpen) {
|
|
23268
|
+
setView("main");
|
|
23269
|
+
}
|
|
23270
|
+
onCheckoutSuccess?.({
|
|
23271
|
+
paymentIntentId: paymentIntent.id,
|
|
23272
|
+
status: paymentIntent.status
|
|
23273
|
+
});
|
|
23274
|
+
}
|
|
23275
|
+
}, [paymentIntent, onCheckoutSuccess, browserWalletModalOpen]);
|
|
23276
|
+
const wallets = (0, import_react26.useMemo)(() => {
|
|
23277
|
+
if (!paymentIntent) return [];
|
|
23278
|
+
return mapDepositAddressesToWallets(
|
|
23279
|
+
paymentIntent.deposit_addresses,
|
|
23280
|
+
paymentIntent
|
|
23281
|
+
);
|
|
23282
|
+
}, [paymentIntent]);
|
|
23283
|
+
const formatCryptoAmount = (0, import_react26.useMemo)(() => {
|
|
23284
|
+
if (!paymentIntent) return (_) => "";
|
|
23285
|
+
const decimals = paymentIntent.destination_token_decimals ?? 6;
|
|
23286
|
+
const symbol = paymentIntent.currency.toUpperCase();
|
|
23287
|
+
return (baseUnits) => {
|
|
23288
|
+
const num = Number(baseUnits) / 10 ** decimals;
|
|
23289
|
+
const formatted = num % 1 === 0 ? num.toFixed(0) : num.toFixed(2);
|
|
23290
|
+
return `${formatted} ${symbol}`;
|
|
23291
|
+
};
|
|
23292
|
+
}, [paymentIntent]);
|
|
23293
|
+
const remainingAmountUsd = (0, import_react26.useMemo)(() => {
|
|
23294
|
+
if (!paymentIntent) return void 0;
|
|
23295
|
+
const total = parseFloat(paymentIntent.amount_usd);
|
|
23296
|
+
const received = parseFloat(paymentIntent.amount_received_usd);
|
|
23297
|
+
if (isNaN(total) || isNaN(received)) return paymentIntent.amount_usd;
|
|
23298
|
+
const remaining = total - received;
|
|
23299
|
+
return remaining > 0 ? remaining.toFixed(2) : "0.00";
|
|
23300
|
+
}, [paymentIntent]);
|
|
23301
|
+
const remainingCrypto = (0, import_react26.useMemo)(() => {
|
|
23302
|
+
if (!paymentIntent) return void 0;
|
|
23303
|
+
const total = BigInt(paymentIntent.amount);
|
|
23304
|
+
const received = BigInt(paymentIntent.amount_received);
|
|
23305
|
+
const remaining = total - received;
|
|
23306
|
+
return remaining > 0n ? remaining.toString() : "0";
|
|
23307
|
+
}, [paymentIntent]);
|
|
23308
|
+
const [selectedSource, setSelectedSource] = (0, import_react26.useState)(null);
|
|
23309
|
+
const quoteDestinationAmount = (0, import_react26.useMemo)(() => {
|
|
23310
|
+
if (!paymentIntent || !selectedSource) return "0";
|
|
23311
|
+
const remaining = BigInt(paymentIntent.amount) - BigInt(paymentIntent.amount_received);
|
|
23312
|
+
const totalBaseUnits = Number(paymentIntent.amount);
|
|
23313
|
+
const totalUsd = parseFloat(paymentIntent.amount_usd);
|
|
23314
|
+
const baseUnitsPerUsd = totalUsd > 0 ? totalBaseUnits / totalUsd : 0;
|
|
23315
|
+
const minUsd = Math.max(selectedSource.minimumDepositAmountUsd, 3);
|
|
23316
|
+
const minDepositBaseUnits = BigInt(Math.ceil(minUsd * baseUnitsPerUsd));
|
|
23317
|
+
const effective = remaining > minDepositBaseUnits ? remaining : minDepositBaseUnits;
|
|
23318
|
+
return effective > 0n ? effective.toString() : "0";
|
|
23319
|
+
}, [paymentIntent, selectedSource]);
|
|
23320
|
+
const { data: sourceQuote } = useDepositQuote({
|
|
23321
|
+
publishableKey,
|
|
23322
|
+
sourceChainType: selectedSource?.chainType ?? "",
|
|
23323
|
+
sourceChainId: selectedSource?.chainId ?? "",
|
|
23324
|
+
sourceTokenAddress: selectedSource?.tokenAddress ?? "",
|
|
23325
|
+
destinationAmount: quoteDestinationAmount,
|
|
23326
|
+
destinationChainType: paymentIntent?.destination_chain_type ?? "",
|
|
23327
|
+
destinationChainId: paymentIntent?.destination_chain_id ?? "",
|
|
23328
|
+
destinationTokenAddress: paymentIntent?.destination_token_address ?? "",
|
|
23329
|
+
enabled: open && view === "transfer" && !!paymentIntent && !!selectedSource && quoteDestinationAmount !== "0"
|
|
23330
|
+
});
|
|
23331
|
+
const handleBrowserWalletClick = (0, import_react26.useCallback)(
|
|
23332
|
+
(walletInfo) => {
|
|
23333
|
+
const walletChainType = walletInfo.type === "phantom-solana" || walletInfo.type === "solflare" || walletInfo.type === "backpack" || walletInfo.type === "glow" ? "solana" : "ethereum";
|
|
23334
|
+
setStoredWalletChainType(walletChainType);
|
|
23335
|
+
setBrowserWalletChainType(walletChainType);
|
|
23336
|
+
const matchingDepositWallet = wallets.find(
|
|
23337
|
+
(w) => w.chain_type === walletChainType
|
|
23338
|
+
);
|
|
23339
|
+
if (!matchingDepositWallet) {
|
|
23340
|
+
onCheckoutError?.({
|
|
23341
|
+
message: `Unable to pay from ${walletChainType}. Please try a different wallet.`,
|
|
23342
|
+
code: "NO_DEPOSIT_ADDRESS"
|
|
23343
|
+
});
|
|
23344
|
+
return;
|
|
23345
|
+
}
|
|
23346
|
+
setBrowserWalletInfo({
|
|
23347
|
+
...walletInfo,
|
|
23348
|
+
depositWallet: matchingDepositWallet
|
|
23349
|
+
});
|
|
23350
|
+
setBrowserWalletModalOpen(true);
|
|
23351
|
+
},
|
|
23352
|
+
[wallets, onCheckoutError]
|
|
23353
|
+
);
|
|
23354
|
+
const handleWalletConnectClick = (0, import_react26.useCallback)(() => {
|
|
23355
|
+
setWalletSelectionModalOpen(true);
|
|
23356
|
+
}, []);
|
|
23357
|
+
const handleWalletConnected = (0, import_react26.useCallback)(
|
|
23358
|
+
(walletInfo) => {
|
|
23359
|
+
const walletChainType = walletInfo.type === "phantom-solana" || walletInfo.type === "solflare" || walletInfo.type === "backpack" || walletInfo.type === "glow" ? "solana" : "ethereum";
|
|
23360
|
+
setStoredWalletChainType(walletChainType);
|
|
23361
|
+
setBrowserWalletChainType(walletChainType);
|
|
23362
|
+
const matchingDepositWallet = wallets.find(
|
|
23363
|
+
(w) => w.chain_type === walletChainType
|
|
23364
|
+
);
|
|
23365
|
+
if (!matchingDepositWallet) {
|
|
23366
|
+
onCheckoutError?.({
|
|
23367
|
+
message: `Unable to pay from ${walletChainType}. Please try a different wallet.`,
|
|
23368
|
+
code: "NO_DEPOSIT_ADDRESS"
|
|
23369
|
+
});
|
|
23370
|
+
setWalletSelectionModalOpen(false);
|
|
23371
|
+
return;
|
|
23372
|
+
}
|
|
23373
|
+
setBrowserWalletInfo({
|
|
23374
|
+
...walletInfo,
|
|
23375
|
+
depositWallet: matchingDepositWallet
|
|
23376
|
+
});
|
|
23377
|
+
setWalletSelectionModalOpen(false);
|
|
23378
|
+
setBrowserWalletModalOpen(true);
|
|
23379
|
+
},
|
|
23380
|
+
[wallets, onCheckoutError]
|
|
23381
|
+
);
|
|
23382
|
+
const handleWalletDisconnect = (0, import_react26.useCallback)(() => {
|
|
23383
|
+
setUserDisconnectedWallet(true);
|
|
23384
|
+
clearStoredWalletChainType();
|
|
23385
|
+
setBrowserWalletChainType(void 0);
|
|
23386
|
+
setBrowserWalletInfo(null);
|
|
23387
|
+
setBrowserWalletModalOpen(false);
|
|
23388
|
+
}, []);
|
|
23389
|
+
const handleClose = (0, import_react26.useCallback)(() => {
|
|
23390
|
+
onOpenChange(false);
|
|
23391
|
+
if (resetViewTimeoutRef.current) {
|
|
23392
|
+
clearTimeout(resetViewTimeoutRef.current);
|
|
23393
|
+
}
|
|
23394
|
+
resetViewTimeoutRef.current = setTimeout(() => {
|
|
23395
|
+
setView("main");
|
|
23396
|
+
setBrowserWalletInfo(null);
|
|
23397
|
+
resetViewTimeoutRef.current = null;
|
|
23398
|
+
}, 200);
|
|
23399
|
+
}, [onOpenChange]);
|
|
23400
|
+
(0, import_react26.useLayoutEffect)(() => {
|
|
23401
|
+
if (!open) return;
|
|
23402
|
+
if (resetViewTimeoutRef.current) {
|
|
23403
|
+
clearTimeout(resetViewTimeoutRef.current);
|
|
23404
|
+
resetViewTimeoutRef.current = null;
|
|
23405
|
+
}
|
|
23406
|
+
setView("main");
|
|
23407
|
+
setBrowserWalletInfo(null);
|
|
23408
|
+
}, [open]);
|
|
23409
|
+
(0, import_react26.useEffect)(
|
|
23410
|
+
() => () => {
|
|
23411
|
+
if (resetViewTimeoutRef.current) {
|
|
23412
|
+
clearTimeout(resetViewTimeoutRef.current);
|
|
23413
|
+
}
|
|
23414
|
+
},
|
|
23415
|
+
[]
|
|
23416
|
+
);
|
|
23417
|
+
const handleBack = (0, import_react26.useCallback)(() => {
|
|
23418
|
+
setView("main");
|
|
23419
|
+
}, []);
|
|
23420
|
+
const poweredByFooter = /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23421
|
+
PoweredByUnifold,
|
|
23422
|
+
{
|
|
23423
|
+
color: colors2.foregroundMuted,
|
|
23424
|
+
className: "uf-flex uf-justify-center uf-shrink-0"
|
|
23425
|
+
}
|
|
23426
|
+
) });
|
|
23427
|
+
const progressSection = paymentIntent ? (() => {
|
|
23428
|
+
const received = parseFloat(paymentIntent.amount_received_usd);
|
|
23429
|
+
const total = parseFloat(paymentIntent.amount_usd);
|
|
23430
|
+
const remaining = Math.max(total - received, 0);
|
|
23431
|
+
const pct = total > 0 ? Math.min(received / total * 100, 100) : 0;
|
|
23432
|
+
const hasPartial = received > 0;
|
|
23433
|
+
const amountStr = paymentIntent.amount_usd;
|
|
23434
|
+
const dynamicFontSize = `${Math.max(3.75 - amountStr.length * 0.15, 2)}rem`;
|
|
23435
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-text-center uf-py-2 uf-space-y-1", children: [
|
|
23436
|
+
paymentIntent.description && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23437
|
+
"div",
|
|
23438
|
+
{
|
|
23439
|
+
className: "uf-text-xs",
|
|
23440
|
+
style: {
|
|
23441
|
+
color: colors2.foregroundMuted,
|
|
23442
|
+
fontFamily: fonts.regular
|
|
23443
|
+
},
|
|
23444
|
+
children: paymentIntent.description
|
|
23445
|
+
}
|
|
23446
|
+
),
|
|
23447
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-center", children: [
|
|
23448
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23449
|
+
"span",
|
|
23450
|
+
{
|
|
23451
|
+
className: "uf-mr-1",
|
|
23452
|
+
style: {
|
|
23453
|
+
fontSize: `calc(${dynamicFontSize} * 0.6)`,
|
|
23454
|
+
color: colors2.foregroundMuted,
|
|
23455
|
+
fontFamily: fonts.regular
|
|
23456
|
+
},
|
|
23457
|
+
children: "$"
|
|
23458
|
+
}
|
|
23459
|
+
),
|
|
23460
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23461
|
+
"span",
|
|
23462
|
+
{
|
|
23463
|
+
style: {
|
|
23464
|
+
fontSize: dynamicFontSize,
|
|
23465
|
+
color: colors2.foreground,
|
|
23466
|
+
fontFamily: fonts.regular,
|
|
23467
|
+
lineHeight: 1.1
|
|
23468
|
+
},
|
|
23469
|
+
children: amountStr
|
|
23470
|
+
}
|
|
23471
|
+
)
|
|
23472
|
+
] }),
|
|
23473
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23474
|
+
"div",
|
|
23475
|
+
{
|
|
23476
|
+
className: "uf-text-xs",
|
|
23477
|
+
style: {
|
|
23478
|
+
color: colors2.foregroundMuted,
|
|
23479
|
+
fontFamily: fonts.regular
|
|
23480
|
+
},
|
|
23481
|
+
children: paymentIntent.currency.toUpperCase()
|
|
23482
|
+
}
|
|
23483
|
+
),
|
|
23484
|
+
hasPartial && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-pt-2 uf-space-y-1.5", children: [
|
|
23485
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23486
|
+
"div",
|
|
23487
|
+
{
|
|
23488
|
+
className: "uf-w-full uf-h-1.5 uf-rounded-full uf-overflow-hidden",
|
|
23489
|
+
style: { backgroundColor: colors2.border },
|
|
23490
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23491
|
+
"div",
|
|
23492
|
+
{
|
|
23493
|
+
className: "uf-h-full uf-rounded-full uf-transition-all uf-duration-500",
|
|
23494
|
+
style: {
|
|
23495
|
+
width: `${pct}%`,
|
|
23496
|
+
backgroundColor: paymentIntent.status === "succeeded" ? "rgb(34, 197, 94)" : colors2.primary
|
|
23497
|
+
}
|
|
23498
|
+
}
|
|
23499
|
+
)
|
|
23500
|
+
}
|
|
23501
|
+
),
|
|
23502
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
|
|
23503
|
+
"div",
|
|
23504
|
+
{
|
|
23505
|
+
className: "uf-text-xs",
|
|
23506
|
+
style: {
|
|
23507
|
+
color: colors2.foregroundMuted,
|
|
23508
|
+
fontFamily: fonts.regular
|
|
23509
|
+
},
|
|
23510
|
+
children: [
|
|
23511
|
+
"$",
|
|
23512
|
+
paymentIntent.amount_received_usd,
|
|
23513
|
+
" / $",
|
|
23514
|
+
amountStr,
|
|
23515
|
+
" received",
|
|
23516
|
+
remaining > 0 && paymentIntent.status !== "succeeded" && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("span", { style: { color: colors2.foreground, fontFamily: fonts.medium }, children: [
|
|
23517
|
+
" ",
|
|
23518
|
+
"\xB7 $",
|
|
23519
|
+
remaining.toFixed(2),
|
|
23520
|
+
" remaining"
|
|
23521
|
+
] })
|
|
23522
|
+
]
|
|
23523
|
+
}
|
|
23524
|
+
)
|
|
23525
|
+
] }),
|
|
23526
|
+
paymentIntent.status !== "requires_payment" && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23527
|
+
"span",
|
|
23528
|
+
{
|
|
23529
|
+
className: "uf-text-xs uf-font-medium uf-px-2.5 uf-py-1 uf-rounded-full uf-inline-block",
|
|
23530
|
+
style: {
|
|
23531
|
+
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)",
|
|
23532
|
+
color: paymentIntent.status === "succeeded" ? "rgb(34, 197, 94)" : paymentIntent.status === "processing" ? "rgb(59, 130, 246)" : "rgb(239, 68, 68)",
|
|
23533
|
+
fontFamily: fonts.medium
|
|
23534
|
+
},
|
|
23535
|
+
children: paymentIntent.status === "succeeded" ? "Payment Complete" : paymentIntent.status === "processing" ? "Partial Payment Received" : paymentIntent.status === "canceled" ? "Canceled" : paymentIntent.status === "expired" ? "Expired" : paymentIntent.status
|
|
23536
|
+
}
|
|
23537
|
+
) })
|
|
23538
|
+
] });
|
|
23539
|
+
})() : null;
|
|
23540
|
+
return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(PortalContainerProvider, { value: null, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(Dialog2, { open, onOpenChange: handleClose, modal: true, children: [
|
|
23541
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23542
|
+
DialogContent2,
|
|
23543
|
+
{
|
|
23544
|
+
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}`,
|
|
23545
|
+
style: { backgroundColor: colors2.background },
|
|
23546
|
+
onPointerDownOutside: (e) => e.preventDefault(),
|
|
23547
|
+
onInteractOutside: (e) => e.preventDefault(),
|
|
23548
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ThemeStyleInjector, { children: view === "main" ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
|
|
23549
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23550
|
+
DepositHeader,
|
|
23551
|
+
{
|
|
23552
|
+
title: modalTitle || "Checkout",
|
|
23553
|
+
showClose: true,
|
|
23554
|
+
onClose: handleClose
|
|
23555
|
+
}
|
|
23556
|
+
),
|
|
23557
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
|
|
23558
|
+
piLoading ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-space-y-3", children: [
|
|
23559
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23560
|
+
"div",
|
|
23561
|
+
{
|
|
23562
|
+
className: "uf-rounded-xl uf-p-4 uf-animate-pulse",
|
|
23563
|
+
style: {
|
|
23564
|
+
backgroundColor: components.card.backgroundColor,
|
|
23565
|
+
borderRadius: components.card.borderRadius,
|
|
23566
|
+
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
23567
|
+
},
|
|
23568
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-gap-2", children: [
|
|
23569
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23570
|
+
"div",
|
|
23571
|
+
{
|
|
23572
|
+
className: "uf-h-8 uf-w-24 uf-rounded",
|
|
23573
|
+
style: {
|
|
23574
|
+
backgroundColor: components.card.borderColor
|
|
23575
|
+
}
|
|
23576
|
+
}
|
|
23577
|
+
),
|
|
23578
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23579
|
+
"div",
|
|
23580
|
+
{
|
|
23581
|
+
className: "uf-h-4 uf-w-16 uf-rounded",
|
|
23582
|
+
style: {
|
|
23583
|
+
backgroundColor: components.card.borderColor
|
|
23584
|
+
}
|
|
23585
|
+
}
|
|
23586
|
+
)
|
|
23587
|
+
] })
|
|
23588
|
+
}
|
|
23589
|
+
),
|
|
23590
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(SkeletonButton2, {}),
|
|
23591
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(SkeletonButton2, {})
|
|
23592
|
+
] }) : 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: [
|
|
23593
|
+
/* @__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" }) }),
|
|
23594
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23595
|
+
"h3",
|
|
23596
|
+
{
|
|
23597
|
+
className: "uf-text-lg uf-font-semibold uf-mb-2",
|
|
23598
|
+
style: {
|
|
23599
|
+
color: colors2.foreground,
|
|
23600
|
+
fontFamily: fonts.semibold
|
|
23601
|
+
},
|
|
23602
|
+
children: "Unable to Load Checkout"
|
|
23603
|
+
}
|
|
23604
|
+
),
|
|
23605
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23606
|
+
"p",
|
|
23607
|
+
{
|
|
23608
|
+
className: "uf-text-sm uf-max-w-[280px]",
|
|
23609
|
+
style: {
|
|
23610
|
+
color: colors2.foregroundMuted,
|
|
23611
|
+
fontFamily: fonts.regular
|
|
23612
|
+
},
|
|
23613
|
+
children: piError instanceof Error ? piError.message : "Something went wrong. Please try again."
|
|
23614
|
+
}
|
|
23615
|
+
)
|
|
23616
|
+
] }) : paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-space-y-3", children: [
|
|
23617
|
+
progressSection,
|
|
23618
|
+
(paymentIntent.status === "requires_payment" || paymentIntent.status === "processing") && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
|
|
23619
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23620
|
+
TransferCryptoButton,
|
|
23621
|
+
{
|
|
23622
|
+
onClick: () => setView("transfer"),
|
|
23623
|
+
title: "Transfer Crypto",
|
|
23624
|
+
subtitle: "Send from any wallet or exchange",
|
|
23625
|
+
featuredTokens: projectConfig?.transfer_crypto.networks
|
|
23626
|
+
}
|
|
23627
|
+
),
|
|
23628
|
+
enableConnectWallet && !isMobileView && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23629
|
+
BrowserWalletButton,
|
|
23630
|
+
{
|
|
23631
|
+
onClick: handleBrowserWalletClick,
|
|
23632
|
+
onConnectClick: handleWalletConnectClick,
|
|
23633
|
+
onDisconnect: handleWalletDisconnect,
|
|
23634
|
+
chainType: browserWalletChainType,
|
|
23635
|
+
publishableKey
|
|
23636
|
+
}
|
|
23637
|
+
)
|
|
23638
|
+
] })
|
|
23639
|
+
] }) : null,
|
|
23640
|
+
poweredByFooter
|
|
23641
|
+
] })
|
|
23642
|
+
] }) : view === "transfer" ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
|
|
23643
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23644
|
+
DepositHeader,
|
|
23645
|
+
{
|
|
23646
|
+
title: `Pay $${remainingAmountUsd ?? paymentIntent?.amount_usd ?? ""}`,
|
|
23647
|
+
showBack: true,
|
|
23648
|
+
onBack: handleBack,
|
|
23649
|
+
onClose: handleClose
|
|
23650
|
+
}
|
|
23651
|
+
),
|
|
23652
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
|
|
23653
|
+
paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
|
|
23654
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
|
|
23655
|
+
"div",
|
|
23656
|
+
{
|
|
23657
|
+
className: "uf-rounded-lg uf-px-3 uf-py-2 uf-flex uf-items-center uf-justify-between",
|
|
23658
|
+
style: {
|
|
23659
|
+
backgroundColor: components.card.backgroundColor,
|
|
23660
|
+
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`,
|
|
23661
|
+
borderRadius: components.card.borderRadius
|
|
23662
|
+
},
|
|
23663
|
+
children: [
|
|
23664
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23665
|
+
"span",
|
|
23666
|
+
{
|
|
23667
|
+
className: "uf-text-xs",
|
|
23668
|
+
style: {
|
|
23669
|
+
color: colors2.foregroundMuted,
|
|
23670
|
+
fontFamily: fonts.regular
|
|
23671
|
+
},
|
|
23672
|
+
children: parseFloat(paymentIntent.amount_received_usd) > 0 ? `$${paymentIntent.amount_received_usd} / $${paymentIntent.amount_usd} received` : "Amount due"
|
|
23673
|
+
}
|
|
23674
|
+
),
|
|
23675
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
|
|
23676
|
+
"span",
|
|
23677
|
+
{
|
|
23678
|
+
className: "uf-text-sm uf-font-semibold",
|
|
23679
|
+
style: {
|
|
23680
|
+
color: colors2.foreground,
|
|
23681
|
+
fontFamily: fonts.semibold
|
|
23682
|
+
},
|
|
23683
|
+
children: [
|
|
23684
|
+
formatCryptoAmount(remainingCrypto ?? paymentIntent.amount),
|
|
23685
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
|
|
23686
|
+
"span",
|
|
23687
|
+
{
|
|
23688
|
+
className: "uf-text-xs uf-font-normal uf-ml-1",
|
|
23689
|
+
style: { color: colors2.foregroundMuted },
|
|
23690
|
+
children: [
|
|
23691
|
+
"($",
|
|
23692
|
+
remainingAmountUsd ?? paymentIntent.amount_usd,
|
|
23693
|
+
")"
|
|
23694
|
+
]
|
|
23695
|
+
}
|
|
23696
|
+
)
|
|
23697
|
+
]
|
|
23698
|
+
}
|
|
23699
|
+
)
|
|
23700
|
+
]
|
|
23701
|
+
}
|
|
23702
|
+
),
|
|
23703
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23704
|
+
TransferCryptoSingleInput,
|
|
23705
|
+
{
|
|
23706
|
+
userId: paymentIntent.user_id || "",
|
|
23707
|
+
publishableKey,
|
|
23708
|
+
clientSecret,
|
|
23709
|
+
recipientAddress: paymentIntent.recipient_address,
|
|
23710
|
+
destinationChainType: paymentIntent.destination_chain_type,
|
|
23711
|
+
destinationChainId: paymentIntent.destination_chain_id,
|
|
23712
|
+
destinationTokenAddress: paymentIntent.destination_token_address,
|
|
23713
|
+
depositConfirmationMode: "auto_ui",
|
|
23714
|
+
wallets,
|
|
23715
|
+
onSourceTokenChange: setSelectedSource,
|
|
23716
|
+
checkoutQuote: sourceQuote ? {
|
|
23717
|
+
sourceAmount: sourceQuote.source_amount,
|
|
23718
|
+
sourceTokenDecimals: sourceQuote.source_token_decimals,
|
|
23719
|
+
sourceTokenSymbol: sourceQuote.source_token_symbol,
|
|
23720
|
+
sourceAmountUsd: sourceQuote.source_amount_usd
|
|
23721
|
+
} : null
|
|
23722
|
+
}
|
|
23723
|
+
)
|
|
23724
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(SkeletonButton2, {}),
|
|
23725
|
+
poweredByFooter
|
|
23726
|
+
] })
|
|
23727
|
+
] }) : null })
|
|
23728
|
+
}
|
|
23729
|
+
),
|
|
23730
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23731
|
+
WalletSelectionModal,
|
|
23732
|
+
{
|
|
23733
|
+
open: walletSelectionModalOpen,
|
|
23734
|
+
onOpenChange: setWalletSelectionModalOpen,
|
|
23735
|
+
onWalletConnected: handleWalletConnected,
|
|
23736
|
+
onClose: () => setWalletSelectionModalOpen(false),
|
|
23737
|
+
theme: resolvedTheme
|
|
23738
|
+
}
|
|
23739
|
+
),
|
|
23740
|
+
browserWalletInfo && browserWalletInfo.depositWallet && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
23741
|
+
BrowserWalletModal,
|
|
23742
|
+
{
|
|
23743
|
+
open: browserWalletModalOpen,
|
|
23744
|
+
onOpenChange: setBrowserWalletModalOpen,
|
|
23745
|
+
onFullClose: handleClose,
|
|
23746
|
+
walletInfo: browserWalletInfo,
|
|
23747
|
+
depositWallet: browserWalletInfo.depositWallet,
|
|
23748
|
+
userId: paymentIntent?.user_id || "",
|
|
23749
|
+
publishableKey,
|
|
23750
|
+
clientSecret,
|
|
23751
|
+
theme: resolvedTheme,
|
|
23752
|
+
prefillAmountUsd: remainingAmountUsd,
|
|
23753
|
+
checkoutAmountUsd: paymentIntent?.amount_usd,
|
|
23754
|
+
checkoutReceivedUsd: paymentIntent?.amount_received_usd,
|
|
23755
|
+
onSuccess: (txHash) => {
|
|
23756
|
+
onCheckoutSuccess?.({
|
|
23757
|
+
paymentIntentId: paymentIntent?.id || "",
|
|
23758
|
+
status: "processing"
|
|
23759
|
+
});
|
|
23760
|
+
},
|
|
23761
|
+
onError: (error) => {
|
|
23762
|
+
onCheckoutError?.({
|
|
23763
|
+
message: error.message,
|
|
23764
|
+
error
|
|
23765
|
+
});
|
|
23766
|
+
},
|
|
23767
|
+
onWalletDisconnect: handleWalletDisconnect,
|
|
23768
|
+
onNewDeposit: () => {
|
|
23769
|
+
setBrowserWalletModalOpen(false);
|
|
23770
|
+
setView("main");
|
|
23771
|
+
},
|
|
23772
|
+
onDone: () => {
|
|
23773
|
+
setBrowserWalletModalOpen(false);
|
|
23774
|
+
setView("main");
|
|
23775
|
+
},
|
|
23776
|
+
paymentIntentStatus: paymentIntent?.status
|
|
23777
|
+
}
|
|
23778
|
+
)
|
|
23779
|
+
] }) });
|
|
23780
|
+
}
|
|
23781
|
+
function useSupportedDestinationTokens(publishableKey, enabled = true) {
|
|
23782
|
+
return (0, import_react_query13.useQuery)({
|
|
22703
23783
|
queryKey: ["unifold", "supportedDestinationTokens", publishableKey],
|
|
22704
23784
|
queryFn: () => getSupportedDestinationTokens(publishableKey),
|
|
22705
23785
|
staleTime: 1e3 * 60 * 5,
|
|
@@ -22719,7 +23799,7 @@ function useSourceTokenValidation(params) {
|
|
|
22719
23799
|
enabled = true
|
|
22720
23800
|
} = params;
|
|
22721
23801
|
const hasParams = !!sourceChainType && !!sourceChainId && !!sourceTokenAddress;
|
|
22722
|
-
return (0,
|
|
23802
|
+
return (0, import_react_query14.useQuery)({
|
|
22723
23803
|
queryKey: [
|
|
22724
23804
|
"unifold",
|
|
22725
23805
|
"sourceTokenValidation",
|
|
@@ -22772,7 +23852,7 @@ function useAddressBalance(params) {
|
|
|
22772
23852
|
enabled = true
|
|
22773
23853
|
} = params;
|
|
22774
23854
|
const hasParams = !!address && !!chainType && !!chainId && !!tokenAddress;
|
|
22775
|
-
return (0,
|
|
23855
|
+
return (0, import_react_query15.useQuery)({
|
|
22776
23856
|
queryKey: [
|
|
22777
23857
|
"unifold",
|
|
22778
23858
|
"addressBalance",
|
|
@@ -22821,7 +23901,7 @@ function useAddressBalance(params) {
|
|
|
22821
23901
|
}
|
|
22822
23902
|
function useExecutions(userId, publishableKey, options) {
|
|
22823
23903
|
const actionType = options?.actionType ?? ActionType.Deposit;
|
|
22824
|
-
return (0,
|
|
23904
|
+
return (0, import_react_query16.useQuery)({
|
|
22825
23905
|
queryKey: ["unifold", "executions", actionType, userId, publishableKey],
|
|
22826
23906
|
queryFn: () => queryExecutions(userId, publishableKey, actionType),
|
|
22827
23907
|
enabled: (options?.enabled ?? true) && !!userId,
|
|
@@ -22842,20 +23922,20 @@ function useWithdrawPolling({
|
|
|
22842
23922
|
onWithdrawSuccess,
|
|
22843
23923
|
onWithdrawError
|
|
22844
23924
|
}) {
|
|
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,
|
|
23925
|
+
const [executions, setExecutions] = (0, import_react28.useState)([]);
|
|
23926
|
+
const [isPolling, setIsPolling] = (0, import_react28.useState)(false);
|
|
23927
|
+
const enabledAtRef = (0, import_react28.useRef)(/* @__PURE__ */ new Date());
|
|
23928
|
+
const trackedRef = (0, import_react28.useRef)(/* @__PURE__ */ new Map());
|
|
23929
|
+
const prevEnabledRef = (0, import_react28.useRef)(false);
|
|
23930
|
+
const onSuccessRef = (0, import_react28.useRef)(onWithdrawSuccess);
|
|
23931
|
+
const onErrorRef = (0, import_react28.useRef)(onWithdrawError);
|
|
23932
|
+
(0, import_react28.useEffect)(() => {
|
|
22853
23933
|
onSuccessRef.current = onWithdrawSuccess;
|
|
22854
23934
|
}, [onWithdrawSuccess]);
|
|
22855
|
-
(0,
|
|
23935
|
+
(0, import_react28.useEffect)(() => {
|
|
22856
23936
|
onErrorRef.current = onWithdrawError;
|
|
22857
23937
|
}, [onWithdrawError]);
|
|
22858
|
-
(0,
|
|
23938
|
+
(0, import_react28.useEffect)(() => {
|
|
22859
23939
|
if (enabled && !prevEnabledRef.current) {
|
|
22860
23940
|
enabledAtRef.current = /* @__PURE__ */ new Date();
|
|
22861
23941
|
trackedRef.current.clear();
|
|
@@ -22865,7 +23945,7 @@ function useWithdrawPolling({
|
|
|
22865
23945
|
}
|
|
22866
23946
|
prevEnabledRef.current = enabled;
|
|
22867
23947
|
}, [enabled]);
|
|
22868
|
-
(0,
|
|
23948
|
+
(0, import_react28.useEffect)(() => {
|
|
22869
23949
|
if (!userId || !enabled) return;
|
|
22870
23950
|
const enabledAt = enabledAtRef.current;
|
|
22871
23951
|
const poll = async () => {
|
|
@@ -22927,7 +24007,7 @@ function useWithdrawPolling({
|
|
|
22927
24007
|
setIsPolling(false);
|
|
22928
24008
|
};
|
|
22929
24009
|
}, [userId, publishableKey, enabled]);
|
|
22930
|
-
(0,
|
|
24010
|
+
(0, import_react28.useEffect)(() => {
|
|
22931
24011
|
if (!enabled || !depositWalletId) return;
|
|
22932
24012
|
const trigger = async () => {
|
|
22933
24013
|
try {
|
|
@@ -22955,8 +24035,8 @@ function WithdrawDoubleInput({
|
|
|
22955
24035
|
const isDarkMode = useTheme().themeClass.includes("uf-dark");
|
|
22956
24036
|
const selectedToken = selectedTokenSymbol ? tokens.find((t11) => t11.symbol === selectedTokenSymbol) : void 0;
|
|
22957
24037
|
const availableChainsForToken = selectedToken?.chains || [];
|
|
22958
|
-
const renderTokenItem = (tokenData) => /* @__PURE__ */ (0,
|
|
22959
|
-
/* @__PURE__ */ (0,
|
|
24038
|
+
const renderTokenItem = (tokenData) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
24039
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
22960
24040
|
"img",
|
|
22961
24041
|
{
|
|
22962
24042
|
src: tokenData.icon_url,
|
|
@@ -22967,10 +24047,10 @@ function WithdrawDoubleInput({
|
|
|
22967
24047
|
className: "uf-rounded-full uf-flex-shrink-0"
|
|
22968
24048
|
}
|
|
22969
24049
|
),
|
|
22970
|
-
/* @__PURE__ */ (0,
|
|
24050
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "uf-text-xs uf-font-normal", children: tokenData.symbol })
|
|
22971
24051
|
] });
|
|
22972
|
-
const renderChainItem = (chainData) => /* @__PURE__ */ (0,
|
|
22973
|
-
/* @__PURE__ */ (0,
|
|
24052
|
+
const renderChainItem = (chainData) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
24053
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
22974
24054
|
"img",
|
|
22975
24055
|
{
|
|
22976
24056
|
src: chainData.icon_url,
|
|
@@ -22981,14 +24061,14 @@ function WithdrawDoubleInput({
|
|
|
22981
24061
|
className: "uf-rounded-full uf-flex-shrink-0"
|
|
22982
24062
|
}
|
|
22983
24063
|
),
|
|
22984
|
-
/* @__PURE__ */ (0,
|
|
24064
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "uf-text-xs uf-font-normal", children: chainData.chain_name })
|
|
22985
24065
|
] });
|
|
22986
24066
|
const currentChainData = selectedChainKey ? availableChainsForToken.find(
|
|
22987
24067
|
(c) => getChainKey4(c.chain_id, c.chain_type) === selectedChainKey
|
|
22988
24068
|
) : void 0;
|
|
22989
|
-
return /* @__PURE__ */ (0,
|
|
22990
|
-
/* @__PURE__ */ (0,
|
|
22991
|
-
/* @__PURE__ */ (0,
|
|
24069
|
+
return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "uf-grid uf-grid-cols-2 uf-gap-2.5", children: [
|
|
24070
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { children: [
|
|
24071
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
22992
24072
|
"div",
|
|
22993
24073
|
{
|
|
22994
24074
|
className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1",
|
|
@@ -22996,14 +24076,14 @@ function WithdrawDoubleInput({
|
|
|
22996
24076
|
children: t7.receiveToken
|
|
22997
24077
|
}
|
|
22998
24078
|
),
|
|
22999
|
-
/* @__PURE__ */ (0,
|
|
24079
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
|
|
23000
24080
|
Select2,
|
|
23001
24081
|
{
|
|
23002
24082
|
value: selectedTokenSymbol ?? "",
|
|
23003
24083
|
onValueChange: onTokenChange,
|
|
23004
24084
|
disabled: isLoading || tokens.length === 0,
|
|
23005
24085
|
children: [
|
|
23006
|
-
/* @__PURE__ */ (0,
|
|
24086
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
23007
24087
|
SelectTrigger2,
|
|
23008
24088
|
{
|
|
23009
24089
|
className: "uf-h-10 hover:uf-opacity-90 uf-text-foreground disabled:uf-opacity-50",
|
|
@@ -23011,10 +24091,10 @@ function WithdrawDoubleInput({
|
|
|
23011
24091
|
backgroundColor: components.card.backgroundColor,
|
|
23012
24092
|
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
23013
24093
|
},
|
|
23014
|
-
children: /* @__PURE__ */ (0,
|
|
24094
|
+
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
24095
|
}
|
|
23016
24096
|
),
|
|
23017
|
-
/* @__PURE__ */ (0,
|
|
24097
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
23018
24098
|
SelectContent2,
|
|
23019
24099
|
{
|
|
23020
24100
|
className: "uf-bg-secondary uf-border uf-text-foreground uf-max-h-[300px]",
|
|
@@ -23022,7 +24102,7 @@ function WithdrawDoubleInput({
|
|
|
23022
24102
|
border: `1px solid ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)"}`,
|
|
23023
24103
|
...fonts.regular ? { "--uf-font-family": fonts.regular } : {}
|
|
23024
24104
|
},
|
|
23025
|
-
children: tokens.map((tokenData) => /* @__PURE__ */ (0,
|
|
24105
|
+
children: tokens.map((tokenData) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
23026
24106
|
SelectItem2,
|
|
23027
24107
|
{
|
|
23028
24108
|
value: tokenData.symbol,
|
|
@@ -23037,8 +24117,8 @@ function WithdrawDoubleInput({
|
|
|
23037
24117
|
}
|
|
23038
24118
|
)
|
|
23039
24119
|
] }),
|
|
23040
|
-
/* @__PURE__ */ (0,
|
|
23041
|
-
/* @__PURE__ */ (0,
|
|
24120
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { children: [
|
|
24121
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
23042
24122
|
"div",
|
|
23043
24123
|
{
|
|
23044
24124
|
className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1",
|
|
@@ -23046,14 +24126,14 @@ function WithdrawDoubleInput({
|
|
|
23046
24126
|
children: t7.receiveChain
|
|
23047
24127
|
}
|
|
23048
24128
|
),
|
|
23049
|
-
/* @__PURE__ */ (0,
|
|
24129
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
|
|
23050
24130
|
Select2,
|
|
23051
24131
|
{
|
|
23052
24132
|
value: selectedChainKey ?? "",
|
|
23053
24133
|
onValueChange: onChainChange,
|
|
23054
24134
|
disabled: isLoading || availableChainsForToken.length === 0,
|
|
23055
24135
|
children: [
|
|
23056
|
-
/* @__PURE__ */ (0,
|
|
24136
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
23057
24137
|
SelectTrigger2,
|
|
23058
24138
|
{
|
|
23059
24139
|
className: "uf-h-10 hover:uf-opacity-90 uf-text-foreground disabled:uf-opacity-50",
|
|
@@ -23061,10 +24141,10 @@ function WithdrawDoubleInput({
|
|
|
23061
24141
|
backgroundColor: components.card.backgroundColor,
|
|
23062
24142
|
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
23063
24143
|
},
|
|
23064
|
-
children: /* @__PURE__ */ (0,
|
|
24144
|
+
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
24145
|
}
|
|
23066
24146
|
),
|
|
23067
|
-
/* @__PURE__ */ (0,
|
|
24147
|
+
/* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
23068
24148
|
SelectContent2,
|
|
23069
24149
|
{
|
|
23070
24150
|
align: "end",
|
|
@@ -23073,9 +24153,9 @@ function WithdrawDoubleInput({
|
|
|
23073
24153
|
border: `1px solid ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)"}`,
|
|
23074
24154
|
...fonts.regular ? { "--uf-font-family": fonts.regular } : {}
|
|
23075
24155
|
},
|
|
23076
|
-
children: availableChainsForToken.length === 0 ? /* @__PURE__ */ (0,
|
|
24156
|
+
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
24157
|
const chainKey = getChainKey4(chainData.chain_id, chainData.chain_type);
|
|
23078
|
-
return /* @__PURE__ */ (0,
|
|
24158
|
+
return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
|
|
23079
24159
|
SelectItem2,
|
|
23080
24160
|
{
|
|
23081
24161
|
value: chainKey,
|
|
@@ -23104,7 +24184,7 @@ function useVerifyRecipientAddress(params) {
|
|
|
23104
24184
|
} = params;
|
|
23105
24185
|
const trimmedAddress = recipientAddress?.trim() || "";
|
|
23106
24186
|
const hasAllParams = !!chainType && !!chainId && !!tokenAddress && trimmedAddress.length > 0;
|
|
23107
|
-
return (0,
|
|
24187
|
+
return (0, import_react_query17.useQuery)({
|
|
23108
24188
|
queryKey: [
|
|
23109
24189
|
"unifold",
|
|
23110
24190
|
"verifyRecipientAddress",
|
|
@@ -23240,6 +24320,52 @@ async function sendSolanaWithdraw(params) {
|
|
|
23240
24320
|
);
|
|
23241
24321
|
return sendResponse.signature;
|
|
23242
24322
|
}
|
|
24323
|
+
var HYPERCORE_CHAIN_ID = "1337";
|
|
24324
|
+
var HYPERCORE_SPOT_USDC_ADDRESS = "0x6d1e7cde53ba9467b783cb7c530ce054";
|
|
24325
|
+
function isHypercoreChain(chainId) {
|
|
24326
|
+
return chainId === HYPERCORE_CHAIN_ID;
|
|
24327
|
+
}
|
|
24328
|
+
async function sendHypercoreWithdraw(params) {
|
|
24329
|
+
const {
|
|
24330
|
+
provider,
|
|
24331
|
+
fromAddress,
|
|
24332
|
+
depositWalletAddress,
|
|
24333
|
+
sourceTokenAddress,
|
|
24334
|
+
amount,
|
|
24335
|
+
tokenSymbol,
|
|
24336
|
+
publishableKey
|
|
24337
|
+
} = params;
|
|
24338
|
+
const isSpot = sourceTokenAddress.toLowerCase() === HYPERCORE_SPOT_USDC_ADDRESS;
|
|
24339
|
+
const currentChainHex = await provider.request({
|
|
24340
|
+
method: "eth_chainId",
|
|
24341
|
+
params: []
|
|
24342
|
+
});
|
|
24343
|
+
const activeChainId = String(parseInt(currentChainHex, 16));
|
|
24344
|
+
const buildResult = await buildHypercoreTransaction(
|
|
24345
|
+
{
|
|
24346
|
+
action_type: isSpot ? "spot_send" : "usd_send",
|
|
24347
|
+
signature_chain_type: "ethereum",
|
|
24348
|
+
signature_chain_id: activeChainId,
|
|
24349
|
+
recipient_address: depositWalletAddress,
|
|
24350
|
+
token_address: sourceTokenAddress,
|
|
24351
|
+
token_symbol: tokenSymbol || void 0,
|
|
24352
|
+
amount
|
|
24353
|
+
},
|
|
24354
|
+
publishableKey
|
|
24355
|
+
);
|
|
24356
|
+
const signature = await provider.request({
|
|
24357
|
+
method: "eth_signTypedData_v4",
|
|
24358
|
+
params: [fromAddress, JSON.stringify(buildResult.typed_data)]
|
|
24359
|
+
});
|
|
24360
|
+
await sendHypercoreTransaction(
|
|
24361
|
+
{
|
|
24362
|
+
action_payload: buildResult.action_payload,
|
|
24363
|
+
signature,
|
|
24364
|
+
nonce: buildResult.nonce
|
|
24365
|
+
},
|
|
24366
|
+
publishableKey
|
|
24367
|
+
);
|
|
24368
|
+
}
|
|
23243
24369
|
async function detectBrowserWallet(chainType, senderAddress) {
|
|
23244
24370
|
const win = typeof window !== "undefined" ? window : null;
|
|
23245
24371
|
if (!win || !senderAddress) return null;
|
|
@@ -23363,22 +24489,22 @@ function WithdrawForm({
|
|
|
23363
24489
|
footerLeft
|
|
23364
24490
|
}) {
|
|
23365
24491
|
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,
|
|
24492
|
+
const [recipientAddress, setRecipientAddress] = (0, import_react29.useState)(recipientAddressProp || "");
|
|
24493
|
+
const [amount, setAmount] = (0, import_react29.useState)("");
|
|
24494
|
+
const [inputUnit, setInputUnit] = (0, import_react29.useState)("crypto");
|
|
24495
|
+
const [isSubmitting, setIsSubmitting] = (0, import_react29.useState)(false);
|
|
24496
|
+
const [submitError, setSubmitError] = (0, import_react29.useState)(null);
|
|
24497
|
+
const [detailsExpanded, setDetailsExpanded] = (0, import_react29.useState)(false);
|
|
24498
|
+
const [glossaryOpen, setGlossaryOpen] = (0, import_react29.useState)(false);
|
|
24499
|
+
(0, import_react29.useEffect)(() => {
|
|
23374
24500
|
setRecipientAddress(recipientAddressProp || "");
|
|
23375
24501
|
setAmount("");
|
|
23376
24502
|
setInputUnit("crypto");
|
|
23377
24503
|
setSubmitError(null);
|
|
23378
24504
|
}, [recipientAddressProp]);
|
|
23379
24505
|
const trimmedAddress = recipientAddress.trim();
|
|
23380
|
-
const [debouncedAddress, setDebouncedAddress] = (0,
|
|
23381
|
-
(0,
|
|
24506
|
+
const [debouncedAddress, setDebouncedAddress] = (0, import_react29.useState)(trimmedAddress);
|
|
24507
|
+
(0, import_react29.useEffect)(() => {
|
|
23382
24508
|
const id = setTimeout(() => setDebouncedAddress(trimmedAddress), 500);
|
|
23383
24509
|
return () => clearTimeout(id);
|
|
23384
24510
|
}, [trimmedAddress]);
|
|
@@ -23395,7 +24521,7 @@ function WithdrawForm({
|
|
|
23395
24521
|
enabled: debouncedAddress.length > 5 && !!selectedChain
|
|
23396
24522
|
});
|
|
23397
24523
|
const isDebouncing = trimmedAddress !== debouncedAddress;
|
|
23398
|
-
const addressError = (0,
|
|
24524
|
+
const addressError = (0, import_react29.useMemo)(() => {
|
|
23399
24525
|
if (!trimmedAddress || trimmedAddress.length <= 5) return null;
|
|
23400
24526
|
if (isDebouncing || isVerifyingAddress) return null;
|
|
23401
24527
|
if (verifyError) return t8.invalidAddress;
|
|
@@ -23409,47 +24535,47 @@ function WithdrawForm({
|
|
|
23409
24535
|
return null;
|
|
23410
24536
|
}, [trimmedAddress, isDebouncing, isVerifyingAddress, verifyError, addressVerification, selectedChain, selectedToken]);
|
|
23411
24537
|
const isAddressValid = !isDebouncing && !!addressVerification?.valid && !addressError;
|
|
23412
|
-
const exchangeRate = (0,
|
|
24538
|
+
const exchangeRate = (0, import_react29.useMemo)(() => {
|
|
23413
24539
|
if (!balanceData?.exchangeRate) return 0;
|
|
23414
24540
|
return parseFloat(balanceData.exchangeRate);
|
|
23415
24541
|
}, [balanceData]);
|
|
23416
|
-
const balanceCrypto = (0,
|
|
24542
|
+
const balanceCrypto = (0, import_react29.useMemo)(() => {
|
|
23417
24543
|
if (!balanceData?.balanceHuman) return 0;
|
|
23418
24544
|
return parseFloat(balanceData.balanceHuman);
|
|
23419
24545
|
}, [balanceData]);
|
|
23420
|
-
const balanceUsdNum = (0,
|
|
24546
|
+
const balanceUsdNum = (0, import_react29.useMemo)(() => {
|
|
23421
24547
|
if (!balanceData?.balanceUsd) return 0;
|
|
23422
24548
|
return parseFloat(balanceData.balanceUsd);
|
|
23423
24549
|
}, [balanceData]);
|
|
23424
24550
|
const tokenSymbol = sourceTokenSymbol || balanceData?.symbol || "TOKEN";
|
|
23425
24551
|
const sourceDecimals = balanceData?.decimals ?? 6;
|
|
23426
|
-
const cryptoAmountFromInput = (0,
|
|
24552
|
+
const cryptoAmountFromInput = (0, import_react29.useMemo)(() => {
|
|
23427
24553
|
const val = parseFloat(amount);
|
|
23428
24554
|
if (!val || val <= 0) return 0;
|
|
23429
24555
|
if (inputUnit === "crypto") return val;
|
|
23430
24556
|
return exchangeRate > 0 ? val / exchangeRate : 0;
|
|
23431
24557
|
}, [amount, inputUnit, exchangeRate]);
|
|
23432
|
-
const fiatAmountFromInput = (0,
|
|
24558
|
+
const fiatAmountFromInput = (0, import_react29.useMemo)(() => {
|
|
23433
24559
|
const val = parseFloat(amount);
|
|
23434
24560
|
if (!val || val <= 0) return 0;
|
|
23435
24561
|
if (inputUnit === "fiat") return val;
|
|
23436
24562
|
return val * exchangeRate;
|
|
23437
24563
|
}, [amount, inputUnit, exchangeRate]);
|
|
23438
|
-
const convertedDisplay = (0,
|
|
24564
|
+
const convertedDisplay = (0, import_react29.useMemo)(() => {
|
|
23439
24565
|
if (!amount || parseFloat(amount) <= 0) return null;
|
|
23440
24566
|
if (inputUnit === "crypto") {
|
|
23441
24567
|
return `$${fiatAmountFromInput.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
23442
24568
|
}
|
|
23443
24569
|
return `${cryptoAmountFromInput.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 6 })} ${tokenSymbol}`;
|
|
23444
24570
|
}, [amount, inputUnit, fiatAmountFromInput, cryptoAmountFromInput, tokenSymbol]);
|
|
23445
|
-
const balanceDisplay = (0,
|
|
24571
|
+
const balanceDisplay = (0, import_react29.useMemo)(() => {
|
|
23446
24572
|
if (isLoadingBalance || !balanceData) return null;
|
|
23447
24573
|
if (inputUnit === "crypto") {
|
|
23448
24574
|
return `${balanceCrypto.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ${tokenSymbol}`;
|
|
23449
24575
|
}
|
|
23450
24576
|
return `$${balanceUsdNum.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
23451
24577
|
}, [isLoadingBalance, balanceData, inputUnit, balanceCrypto, balanceUsdNum, tokenSymbol]);
|
|
23452
|
-
const handleSwitchUnit = (0,
|
|
24578
|
+
const handleSwitchUnit = (0, import_react29.useCallback)(() => {
|
|
23453
24579
|
const val = parseFloat(amount);
|
|
23454
24580
|
if (!val || val <= 0 || exchangeRate <= 0) {
|
|
23455
24581
|
setInputUnit((u) => u === "crypto" ? "fiat" : "crypto");
|
|
@@ -23466,7 +24592,7 @@ function WithdrawForm({
|
|
|
23466
24592
|
setInputUnit("crypto");
|
|
23467
24593
|
}
|
|
23468
24594
|
}, [amount, inputUnit, exchangeRate, sourceDecimals]);
|
|
23469
|
-
const handleMaxClick = (0,
|
|
24595
|
+
const handleMaxClick = (0, import_react29.useCallback)(() => {
|
|
23470
24596
|
if (inputUnit === "crypto") {
|
|
23471
24597
|
if (balanceCrypto <= 0) return;
|
|
23472
24598
|
setAmount(balanceData?.balanceHuman ?? "0");
|
|
@@ -23478,7 +24604,7 @@ function WithdrawForm({
|
|
|
23478
24604
|
const isBelowMinimum = minimumWithdrawAmountUsd !== null && fiatAmountFromInput > 0 && fiatAmountFromInput < minimumWithdrawAmountUsd;
|
|
23479
24605
|
const isOverBalance = inputUnit === "crypto" ? cryptoAmountFromInput > 0 && balanceCrypto > 0 && cryptoAmountFromInput > balanceCrypto : fiatAmountFromInput > 0 && balanceUsdNum > 0 && fiatAmountFromInput > balanceUsdNum;
|
|
23480
24606
|
const isFormValid = trimmedAddress.length > 0 && amount.trim().length > 0 && cryptoAmountFromInput > 0 && isAddressValid && !isBelowMinimum && !isOverBalance && !!balanceData;
|
|
23481
|
-
const handleWithdraw = (0,
|
|
24607
|
+
const handleWithdraw = (0, import_react29.useCallback)(async () => {
|
|
23482
24608
|
if (!selectedToken || !selectedChain) return;
|
|
23483
24609
|
if (!isFormValid) return;
|
|
23484
24610
|
setIsSubmitting(true);
|
|
@@ -23511,7 +24637,17 @@ function WithdrawForm({
|
|
|
23511
24637
|
recipientAddress: trimmedAddress
|
|
23512
24638
|
};
|
|
23513
24639
|
if (detectedWallet) {
|
|
23514
|
-
if (detectedWallet.chainFamily === "evm") {
|
|
24640
|
+
if (detectedWallet.chainFamily === "evm" && isHypercoreChain(sourceChainId)) {
|
|
24641
|
+
await sendHypercoreWithdraw({
|
|
24642
|
+
provider: detectedWallet.provider,
|
|
24643
|
+
fromAddress: detectedWallet.address,
|
|
24644
|
+
depositWalletAddress: depositWallet.address,
|
|
24645
|
+
sourceTokenAddress,
|
|
24646
|
+
amount: humanAmount,
|
|
24647
|
+
tokenSymbol,
|
|
24648
|
+
publishableKey
|
|
24649
|
+
});
|
|
24650
|
+
} else if (detectedWallet.chainFamily === "evm") {
|
|
23515
24651
|
await sendEvmWithdraw({
|
|
23516
24652
|
provider: detectedWallet.provider,
|
|
23517
24653
|
fromAddress: detectedWallet.address,
|
|
@@ -23548,9 +24684,9 @@ function WithdrawForm({
|
|
|
23548
24684
|
setIsSubmitting(false);
|
|
23549
24685
|
}
|
|
23550
24686
|
}, [selectedToken, selectedChain, isFormValid, cryptoAmountFromInput, sourceDecimals, trimmedAddress, publishableKey, onWithdraw, detectedWallet, sourceTokenAddress, sourceChainId, onWithdrawError, onDepositWalletCreation, onWithdrawSubmitted, amount, inputUnit, balanceCrypto, balanceUsdNum, balanceData]);
|
|
23551
|
-
return /* @__PURE__ */ (0,
|
|
23552
|
-
/* @__PURE__ */ (0,
|
|
23553
|
-
/* @__PURE__ */ (0,
|
|
24687
|
+
return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
|
|
24688
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { children: [
|
|
24689
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
23554
24690
|
"div",
|
|
23555
24691
|
{
|
|
23556
24692
|
className: "uf-text-xs uf-mb-1.5",
|
|
@@ -23558,7 +24694,7 @@ function WithdrawForm({
|
|
|
23558
24694
|
children: t8.recipientAddress
|
|
23559
24695
|
}
|
|
23560
24696
|
),
|
|
23561
|
-
/* @__PURE__ */ (0,
|
|
24697
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
23562
24698
|
"style",
|
|
23563
24699
|
{
|
|
23564
24700
|
dangerouslySetInnerHTML: {
|
|
@@ -23566,7 +24702,7 @@ function WithdrawForm({
|
|
|
23566
24702
|
}
|
|
23567
24703
|
}
|
|
23568
24704
|
),
|
|
23569
|
-
/* @__PURE__ */ (0,
|
|
24705
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
|
|
23570
24706
|
"div",
|
|
23571
24707
|
{
|
|
23572
24708
|
className: "uf-flex uf-items-center uf-gap-1 uf-pr-2",
|
|
@@ -23576,7 +24712,7 @@ function WithdrawForm({
|
|
|
23576
24712
|
border: `${components.input.borderWidth}px solid ${addressError ? colors2.error : components.input.borderColor}`
|
|
23577
24713
|
},
|
|
23578
24714
|
children: [
|
|
23579
|
-
/* @__PURE__ */ (0,
|
|
24715
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
23580
24716
|
"input",
|
|
23581
24717
|
{
|
|
23582
24718
|
type: "text",
|
|
@@ -23593,7 +24729,7 @@ function WithdrawForm({
|
|
|
23593
24729
|
}
|
|
23594
24730
|
}
|
|
23595
24731
|
),
|
|
23596
|
-
/* @__PURE__ */ (0,
|
|
24732
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
23597
24733
|
"button",
|
|
23598
24734
|
{
|
|
23599
24735
|
type: "button",
|
|
@@ -23610,27 +24746,27 @@ function WithdrawForm({
|
|
|
23610
24746
|
className: "uf-flex-shrink-0 uf-p-1 uf-rounded uf-transition-colors hover:uf-opacity-70",
|
|
23611
24747
|
style: { color: colors2.foregroundMuted },
|
|
23612
24748
|
title: "Paste from clipboard",
|
|
23613
|
-
children: /* @__PURE__ */ (0,
|
|
24749
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ClipboardPaste, { className: "uf-w-4 uf-h-4" })
|
|
23614
24750
|
}
|
|
23615
24751
|
)
|
|
23616
24752
|
]
|
|
23617
24753
|
}
|
|
23618
24754
|
),
|
|
23619
|
-
(isDebouncing || isVerifyingAddress) && trimmedAddress.length > 5 && /* @__PURE__ */ (0,
|
|
23620
|
-
/* @__PURE__ */ (0,
|
|
23621
|
-
/* @__PURE__ */ (0,
|
|
24755
|
+
(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: [
|
|
24756
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(LoaderCircle, { className: "uf-w-3 uf-h-3 uf-animate-spin", style: { color: colors2.foregroundMuted } }),
|
|
24757
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: t8.verifyingAddress })
|
|
23622
24758
|
] }),
|
|
23623
|
-
addressError && /* @__PURE__ */ (0,
|
|
23624
|
-
/* @__PURE__ */ (0,
|
|
23625
|
-
/* @__PURE__ */ (0,
|
|
24759
|
+
addressError && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-1.5", children: [
|
|
24760
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TriangleAlert, { className: "uf-w-3 uf-h-3", style: { color: colors2.error } }),
|
|
24761
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "uf-text-xs", style: { color: colors2.error, fontFamily: fonts.regular }, children: addressError })
|
|
23626
24762
|
] })
|
|
23627
24763
|
] }),
|
|
23628
|
-
/* @__PURE__ */ (0,
|
|
23629
|
-
/* @__PURE__ */ (0,
|
|
24764
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { children: [
|
|
24765
|
+
/* @__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
24766
|
t8.amount,
|
|
23631
|
-
minimumWithdrawAmountUsd != null && minimumWithdrawAmountUsd > 0 && /* @__PURE__ */ (0,
|
|
24767
|
+
minimumWithdrawAmountUsd != null && minimumWithdrawAmountUsd > 0 && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { style: { color: colors2.warning, fontFamily: fonts.regular }, children: ` ($${minimumWithdrawAmountUsd.toFixed(2)} min)` })
|
|
23632
24768
|
] }),
|
|
23633
|
-
/* @__PURE__ */ (0,
|
|
24769
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
23634
24770
|
"style",
|
|
23635
24771
|
{
|
|
23636
24772
|
dangerouslySetInnerHTML: {
|
|
@@ -23638,7 +24774,7 @@ function WithdrawForm({
|
|
|
23638
24774
|
}
|
|
23639
24775
|
}
|
|
23640
24776
|
),
|
|
23641
|
-
/* @__PURE__ */ (0,
|
|
24777
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
|
|
23642
24778
|
"div",
|
|
23643
24779
|
{
|
|
23644
24780
|
className: "uf-flex uf-items-center uf-gap-2 uf-px-3 uf-py-2.5",
|
|
@@ -23648,7 +24784,7 @@ function WithdrawForm({
|
|
|
23648
24784
|
border: `${components.input.borderWidth}px solid ${components.input.borderColor}`
|
|
23649
24785
|
},
|
|
23650
24786
|
children: [
|
|
23651
|
-
/* @__PURE__ */ (0,
|
|
24787
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
23652
24788
|
"input",
|
|
23653
24789
|
{
|
|
23654
24790
|
type: "text",
|
|
@@ -23669,8 +24805,8 @@ function WithdrawForm({
|
|
|
23669
24805
|
}
|
|
23670
24806
|
}
|
|
23671
24807
|
),
|
|
23672
|
-
/* @__PURE__ */ (0,
|
|
23673
|
-
/* @__PURE__ */ (0,
|
|
24808
|
+
/* @__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" }),
|
|
24809
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
23674
24810
|
"button",
|
|
23675
24811
|
{
|
|
23676
24812
|
type: "button",
|
|
@@ -23683,10 +24819,10 @@ function WithdrawForm({
|
|
|
23683
24819
|
]
|
|
23684
24820
|
}
|
|
23685
24821
|
),
|
|
23686
|
-
/* @__PURE__ */ (0,
|
|
23687
|
-
/* @__PURE__ */ (0,
|
|
23688
|
-
/* @__PURE__ */ (0,
|
|
23689
|
-
exchangeRate > 0 && /* @__PURE__ */ (0,
|
|
24822
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-mt-1.5 uf-px-3", children: [
|
|
24823
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
|
|
24824
|
+
/* @__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}`) }),
|
|
24825
|
+
exchangeRate > 0 && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
23690
24826
|
"button",
|
|
23691
24827
|
{
|
|
23692
24828
|
type: "button",
|
|
@@ -23694,49 +24830,49 @@ function WithdrawForm({
|
|
|
23694
24830
|
className: "uf-p-0.5 uf-rounded uf-transition-colors hover:uf-opacity-70",
|
|
23695
24831
|
style: { color: colors2.foregroundMuted },
|
|
23696
24832
|
title: "Switch unit",
|
|
23697
|
-
children: /* @__PURE__ */ (0,
|
|
24833
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ArrowUpDown, { className: "uf-w-3 uf-h-3" })
|
|
23698
24834
|
}
|
|
23699
24835
|
)
|
|
23700
24836
|
] }),
|
|
23701
|
-
/* @__PURE__ */ (0,
|
|
23702
|
-
balanceDisplay && /* @__PURE__ */ (0,
|
|
24837
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { children: [
|
|
24838
|
+
balanceDisplay && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: [
|
|
23703
24839
|
t8.balance,
|
|
23704
24840
|
": ",
|
|
23705
24841
|
balanceDisplay
|
|
23706
24842
|
] }),
|
|
23707
|
-
isLoadingBalance && /* @__PURE__ */ (0,
|
|
24843
|
+
isLoadingBalance && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "uf-h-3 uf-w-16 uf-bg-muted uf-rounded uf-animate-pulse" })
|
|
23708
24844
|
] })
|
|
23709
24845
|
] })
|
|
23710
24846
|
] }),
|
|
23711
|
-
/* @__PURE__ */ (0,
|
|
23712
|
-
/* @__PURE__ */ (0,
|
|
24847
|
+
/* @__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: [
|
|
24848
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
|
|
23713
24849
|
"button",
|
|
23714
24850
|
{
|
|
23715
24851
|
type: "button",
|
|
23716
24852
|
onClick: () => setDetailsExpanded(!detailsExpanded),
|
|
23717
24853
|
className: "uf-w-full uf-flex uf-items-center uf-justify-between uf-py-2.5",
|
|
23718
24854
|
children: [
|
|
23719
|
-
/* @__PURE__ */ (0,
|
|
23720
|
-
/* @__PURE__ */ (0,
|
|
23721
|
-
/* @__PURE__ */ (0,
|
|
24855
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
24856
|
+
/* @__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 } }) }),
|
|
24857
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
|
|
23722
24858
|
tCrypto.processingTime.label,
|
|
23723
24859
|
":",
|
|
23724
24860
|
" ",
|
|
23725
|
-
/* @__PURE__ */ (0,
|
|
24861
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: formatProcessingTime2(estimatedProcessingTime) })
|
|
23726
24862
|
] })
|
|
23727
24863
|
] }),
|
|
23728
|
-
detailsExpanded ? /* @__PURE__ */ (0,
|
|
24864
|
+
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
24865
|
]
|
|
23730
24866
|
}
|
|
23731
24867
|
),
|
|
23732
|
-
detailsExpanded && /* @__PURE__ */ (0,
|
|
23733
|
-
/* @__PURE__ */ (0,
|
|
23734
|
-
/* @__PURE__ */ (0,
|
|
23735
|
-
/* @__PURE__ */ (0,
|
|
24868
|
+
detailsExpanded && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-pb-3 uf-space-y-2.5", children: [
|
|
24869
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
24870
|
+
/* @__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 } }) }),
|
|
24871
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
|
|
23736
24872
|
tCrypto.slippage.label,
|
|
23737
24873
|
":",
|
|
23738
24874
|
" ",
|
|
23739
|
-
/* @__PURE__ */ (0,
|
|
24875
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: [
|
|
23740
24876
|
tCrypto.slippage.auto,
|
|
23741
24877
|
" \u2022 ",
|
|
23742
24878
|
(maxSlippagePercent ?? 0.25).toFixed(2),
|
|
@@ -23744,13 +24880,13 @@ function WithdrawForm({
|
|
|
23744
24880
|
] })
|
|
23745
24881
|
] })
|
|
23746
24882
|
] }),
|
|
23747
|
-
/* @__PURE__ */ (0,
|
|
23748
|
-
/* @__PURE__ */ (0,
|
|
23749
|
-
/* @__PURE__ */ (0,
|
|
24883
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
24884
|
+
/* @__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 } }) }),
|
|
24885
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
|
|
23750
24886
|
tCrypto.priceImpact.label,
|
|
23751
24887
|
":",
|
|
23752
24888
|
" ",
|
|
23753
|
-
/* @__PURE__ */ (0,
|
|
24889
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: [
|
|
23754
24890
|
(priceImpactPercent ?? 0).toFixed(2),
|
|
23755
24891
|
"%"
|
|
23756
24892
|
] })
|
|
@@ -23758,18 +24894,18 @@ function WithdrawForm({
|
|
|
23758
24894
|
] })
|
|
23759
24895
|
] })
|
|
23760
24896
|
] }),
|
|
23761
|
-
!canWithdraw && !submitError && /* @__PURE__ */ (0,
|
|
24897
|
+
!canWithdraw && !submitError && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
|
|
23762
24898
|
"div",
|
|
23763
24899
|
{
|
|
23764
24900
|
className: "uf-flex uf-items-start uf-gap-2.5 uf-p-3 uf-rounded-xl",
|
|
23765
24901
|
style: { backgroundColor: colors2.card, border: `1px solid ${colors2.border}` },
|
|
23766
24902
|
children: [
|
|
23767
|
-
/* @__PURE__ */ (0,
|
|
23768
|
-
/* @__PURE__ */ (0,
|
|
24903
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Wallet, { className: "uf-w-4 uf-h-4 uf-flex-shrink-0 uf-mt-0.5", style: { color: colors2.warning } }),
|
|
24904
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.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
24905
|
]
|
|
23770
24906
|
}
|
|
23771
24907
|
),
|
|
23772
|
-
isWalletMatch && connectedWalletName ? /* @__PURE__ */ (0,
|
|
24908
|
+
isWalletMatch && connectedWalletName ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
23773
24909
|
"button",
|
|
23774
24910
|
{
|
|
23775
24911
|
type: "button",
|
|
@@ -23783,16 +24919,16 @@ function WithdrawForm({
|
|
|
23783
24919
|
borderRadius: components.button.borderRadius,
|
|
23784
24920
|
border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
|
|
23785
24921
|
},
|
|
23786
|
-
children: isSubmitting ? /* @__PURE__ */ (0,
|
|
23787
|
-
/* @__PURE__ */ (0,
|
|
24922
|
+
children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
|
|
24923
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
|
|
23788
24924
|
"Processing..."
|
|
23789
|
-
] }) : isOverBalance ? /* @__PURE__ */ (0,
|
|
23790
|
-
/* @__PURE__ */ (0,
|
|
24925
|
+
] }) : 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: [
|
|
24926
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Wallet, { className: "uf-w-4 uf-h-4" }),
|
|
23791
24927
|
"Withdraw from ",
|
|
23792
24928
|
connectedWalletName
|
|
23793
24929
|
] })
|
|
23794
24930
|
}
|
|
23795
|
-
) : /* @__PURE__ */ (0,
|
|
24931
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
23796
24932
|
"button",
|
|
23797
24933
|
{
|
|
23798
24934
|
type: "button",
|
|
@@ -23806,17 +24942,17 @@ function WithdrawForm({
|
|
|
23806
24942
|
borderRadius: components.button.borderRadius,
|
|
23807
24943
|
border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
|
|
23808
24944
|
},
|
|
23809
|
-
children: isSubmitting ? /* @__PURE__ */ (0,
|
|
23810
|
-
/* @__PURE__ */ (0,
|
|
24945
|
+
children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2", children: [
|
|
24946
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
|
|
23811
24947
|
"Processing..."
|
|
23812
24948
|
] }) : isOverBalance ? "Insufficient balance" : isBelowMinimum ? "Minimum amount not met" : submitError ? "Withdrawal failed. Try again" : t8.withdraw
|
|
23813
24949
|
}
|
|
23814
24950
|
),
|
|
23815
|
-
/* @__PURE__ */ (0,
|
|
23816
|
-
/* @__PURE__ */ (0,
|
|
23817
|
-
/* @__PURE__ */ (0,
|
|
24951
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-text-xs uf-pt-1", children: [
|
|
24952
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { children: footerLeft }),
|
|
24953
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(DepositFooterLinks, { onGlossaryClick: () => setGlossaryOpen(true) })
|
|
23818
24954
|
] }),
|
|
23819
|
-
/* @__PURE__ */ (0,
|
|
24955
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
23820
24956
|
GlossaryModal,
|
|
23821
24957
|
{
|
|
23822
24958
|
open: glossaryOpen,
|
|
@@ -23862,7 +24998,7 @@ function WithdrawExecutionItem({
|
|
|
23862
24998
|
return "$0.00";
|
|
23863
24999
|
}
|
|
23864
25000
|
};
|
|
23865
|
-
return /* @__PURE__ */ (0,
|
|
25001
|
+
return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
|
|
23866
25002
|
"button",
|
|
23867
25003
|
{
|
|
23868
25004
|
onClick,
|
|
@@ -23873,8 +25009,8 @@ function WithdrawExecutionItem({
|
|
|
23873
25009
|
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
23874
25010
|
},
|
|
23875
25011
|
children: [
|
|
23876
|
-
/* @__PURE__ */ (0,
|
|
23877
|
-
/* @__PURE__ */ (0,
|
|
25012
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "uf-relative uf-flex-shrink-0 uf-w-9 uf-h-9", children: [
|
|
25013
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
23878
25014
|
"img",
|
|
23879
25015
|
{
|
|
23880
25016
|
src: execution.destination_token_metadata?.icon_url || getIconUrl("/icons/tokens/svg/usdc.svg"),
|
|
@@ -23885,12 +25021,12 @@ function WithdrawExecutionItem({
|
|
|
23885
25021
|
className: "uf-rounded-full uf-w-9 uf-h-9"
|
|
23886
25022
|
}
|
|
23887
25023
|
),
|
|
23888
|
-
isPending ? /* @__PURE__ */ (0,
|
|
25024
|
+
isPending ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
23889
25025
|
"div",
|
|
23890
25026
|
{
|
|
23891
25027
|
className: "uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-rounded-full uf-p-0.5",
|
|
23892
25028
|
style: { backgroundColor: colors2.warning },
|
|
23893
|
-
children: /* @__PURE__ */ (0,
|
|
25029
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
23894
25030
|
"svg",
|
|
23895
25031
|
{
|
|
23896
25032
|
width: "10",
|
|
@@ -23898,7 +25034,7 @@ function WithdrawExecutionItem({
|
|
|
23898
25034
|
viewBox: "0 0 12 12",
|
|
23899
25035
|
fill: "none",
|
|
23900
25036
|
className: "uf-animate-spin uf-block",
|
|
23901
|
-
children: /* @__PURE__ */ (0,
|
|
25037
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
23902
25038
|
"path",
|
|
23903
25039
|
{
|
|
23904
25040
|
d: "M6 1V3M6 9V11M1 6H3M9 6H11M2.5 2.5L4 4M8 8L9.5 9.5M2.5 9.5L4 8M8 4L9.5 2.5",
|
|
@@ -23910,12 +25046,12 @@ function WithdrawExecutionItem({
|
|
|
23910
25046
|
}
|
|
23911
25047
|
)
|
|
23912
25048
|
}
|
|
23913
|
-
) : /* @__PURE__ */ (0,
|
|
25049
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
23914
25050
|
"div",
|
|
23915
25051
|
{
|
|
23916
25052
|
className: "uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-rounded-full uf-p-0.5",
|
|
23917
25053
|
style: { backgroundColor: colors2.success },
|
|
23918
|
-
children: /* @__PURE__ */ (0,
|
|
25054
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
23919
25055
|
"svg",
|
|
23920
25056
|
{
|
|
23921
25057
|
width: "10",
|
|
@@ -23923,7 +25059,7 @@ function WithdrawExecutionItem({
|
|
|
23923
25059
|
viewBox: "0 0 12 12",
|
|
23924
25060
|
fill: "none",
|
|
23925
25061
|
className: "uf-block",
|
|
23926
|
-
children: /* @__PURE__ */ (0,
|
|
25062
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
23927
25063
|
"path",
|
|
23928
25064
|
{
|
|
23929
25065
|
d: "M10 3L4.5 8.5L2 6",
|
|
@@ -23938,8 +25074,8 @@ function WithdrawExecutionItem({
|
|
|
23938
25074
|
}
|
|
23939
25075
|
)
|
|
23940
25076
|
] }),
|
|
23941
|
-
/* @__PURE__ */ (0,
|
|
23942
|
-
/* @__PURE__ */ (0,
|
|
25077
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "uf-flex-1 uf-min-w-0", children: [
|
|
25078
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
23943
25079
|
"h3",
|
|
23944
25080
|
{
|
|
23945
25081
|
className: "uf-font-medium uf-text-sm uf-leading-tight",
|
|
@@ -23950,7 +25086,7 @@ function WithdrawExecutionItem({
|
|
|
23950
25086
|
children: isPending ? "Withdrawal processing" : "Withdrawal completed"
|
|
23951
25087
|
}
|
|
23952
25088
|
),
|
|
23953
|
-
/* @__PURE__ */ (0,
|
|
25089
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
23954
25090
|
"p",
|
|
23955
25091
|
{
|
|
23956
25092
|
className: "uf-text-xs uf-leading-tight",
|
|
@@ -23962,7 +25098,7 @@ function WithdrawExecutionItem({
|
|
|
23962
25098
|
}
|
|
23963
25099
|
)
|
|
23964
25100
|
] }),
|
|
23965
|
-
/* @__PURE__ */ (0,
|
|
25101
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
23966
25102
|
"span",
|
|
23967
25103
|
{
|
|
23968
25104
|
className: "uf-font-medium uf-text-sm uf-flex-shrink-0",
|
|
@@ -23973,7 +25109,7 @@ function WithdrawExecutionItem({
|
|
|
23973
25109
|
children: formatUsdAmount2(execution.source_amount_usd || "0")
|
|
23974
25110
|
}
|
|
23975
25111
|
),
|
|
23976
|
-
/* @__PURE__ */ (0,
|
|
25112
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
23977
25113
|
ChevronRight,
|
|
23978
25114
|
{
|
|
23979
25115
|
className: "uf-w-4 uf-h-4 uf-flex-shrink-0",
|
|
@@ -23996,9 +25132,9 @@ function WithdrawConfirmingView({
|
|
|
23996
25132
|
onViewTracker
|
|
23997
25133
|
}) {
|
|
23998
25134
|
const { colors: colors2, fonts, components } = useTheme();
|
|
23999
|
-
const [showButton, setShowButton] = (0,
|
|
25135
|
+
const [showButton, setShowButton] = (0, import_react30.useState)(false);
|
|
24000
25136
|
const latestExecution = executions.length > 0 ? executions[executions.length - 1] : null;
|
|
24001
|
-
(0,
|
|
25137
|
+
(0, import_react30.useEffect)(() => {
|
|
24002
25138
|
if (latestExecution) return;
|
|
24003
25139
|
const timer = setTimeout(() => setShowButton(true), SHOW_BUTTON_DELAY_MS);
|
|
24004
25140
|
return () => clearTimeout(timer);
|
|
@@ -24006,11 +25142,11 @@ function WithdrawConfirmingView({
|
|
|
24006
25142
|
const btnRadius = components.button.borderRadius;
|
|
24007
25143
|
const btnBorder = `${components.button.borderWidth}px solid ${components.button.borderColor}`;
|
|
24008
25144
|
if (latestExecution) {
|
|
24009
|
-
return /* @__PURE__ */ (0,
|
|
24010
|
-
/* @__PURE__ */ (0,
|
|
24011
|
-
/* @__PURE__ */ (0,
|
|
24012
|
-
/* @__PURE__ */ (0,
|
|
24013
|
-
/* @__PURE__ */ (0,
|
|
25145
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
|
|
25146
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(DepositHeader, { title: "Withdrawal Details", showClose: true, onClose }),
|
|
25147
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(DepositDetailContent, { execution: latestExecution, variant: "withdraw" }),
|
|
25148
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-gap-2 uf-px-2 uf-pt-2", children: [
|
|
25149
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
24014
25150
|
"button",
|
|
24015
25151
|
{
|
|
24016
25152
|
type: "button",
|
|
@@ -24026,7 +25162,7 @@ function WithdrawConfirmingView({
|
|
|
24026
25162
|
children: "Withdrawal History"
|
|
24027
25163
|
}
|
|
24028
25164
|
),
|
|
24029
|
-
/* @__PURE__ */ (0,
|
|
25165
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
24030
25166
|
"button",
|
|
24031
25167
|
{
|
|
24032
25168
|
type: "button",
|
|
@@ -24043,7 +25179,7 @@ function WithdrawConfirmingView({
|
|
|
24043
25179
|
}
|
|
24044
25180
|
)
|
|
24045
25181
|
] }),
|
|
24046
|
-
/* @__PURE__ */ (0,
|
|
25182
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
24047
25183
|
PoweredByUnifold,
|
|
24048
25184
|
{
|
|
24049
25185
|
color: colors2.foregroundMuted,
|
|
@@ -24052,15 +25188,15 @@ function WithdrawConfirmingView({
|
|
|
24052
25188
|
) })
|
|
24053
25189
|
] });
|
|
24054
25190
|
}
|
|
24055
|
-
return /* @__PURE__ */ (0,
|
|
24056
|
-
/* @__PURE__ */ (0,
|
|
24057
|
-
/* @__PURE__ */ (0,
|
|
24058
|
-
/* @__PURE__ */ (0,
|
|
25191
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
|
|
25192
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(DepositHeader, { title: "Withdrawal Status", showClose: true, onClose }),
|
|
25193
|
+
/* @__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: [
|
|
25194
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
24059
25195
|
"div",
|
|
24060
25196
|
{
|
|
24061
25197
|
className: "uf-w-20 uf-h-20 uf-rounded-full uf-flex uf-items-center uf-justify-center uf-mb-6",
|
|
24062
25198
|
style: { backgroundColor: `${colors2.primary}20` },
|
|
24063
|
-
children: /* @__PURE__ */ (0,
|
|
25199
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
24064
25200
|
"svg",
|
|
24065
25201
|
{
|
|
24066
25202
|
width: "40",
|
|
@@ -24068,7 +25204,7 @@ function WithdrawConfirmingView({
|
|
|
24068
25204
|
viewBox: "0 0 24 24",
|
|
24069
25205
|
fill: "none",
|
|
24070
25206
|
className: "uf-animate-spin",
|
|
24071
|
-
children: /* @__PURE__ */ (0,
|
|
25207
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
24072
25208
|
"path",
|
|
24073
25209
|
{
|
|
24074
25210
|
d: "M21 12a9 9 0 1 1-6.22-8.56",
|
|
@@ -24081,7 +25217,7 @@ function WithdrawConfirmingView({
|
|
|
24081
25217
|
)
|
|
24082
25218
|
}
|
|
24083
25219
|
),
|
|
24084
|
-
/* @__PURE__ */ (0,
|
|
25220
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
24085
25221
|
"h3",
|
|
24086
25222
|
{
|
|
24087
25223
|
className: "uf-text-xl uf-mb-2",
|
|
@@ -24089,7 +25225,7 @@ function WithdrawConfirmingView({
|
|
|
24089
25225
|
children: "Checking Withdrawal"
|
|
24090
25226
|
}
|
|
24091
25227
|
),
|
|
24092
|
-
/* @__PURE__ */ (0,
|
|
25228
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
|
|
24093
25229
|
"p",
|
|
24094
25230
|
{
|
|
24095
25231
|
className: "uf-text-sm uf-text-center",
|
|
@@ -24105,7 +25241,7 @@ function WithdrawConfirmingView({
|
|
|
24105
25241
|
}
|
|
24106
25242
|
)
|
|
24107
25243
|
] }),
|
|
24108
|
-
showButton && /* @__PURE__ */ (0,
|
|
25244
|
+
showButton && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-px-1 uf-pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
24109
25245
|
"button",
|
|
24110
25246
|
{
|
|
24111
25247
|
type: "button",
|
|
@@ -24121,7 +25257,7 @@ function WithdrawConfirmingView({
|
|
|
24121
25257
|
children: "Withdrawal History"
|
|
24122
25258
|
}
|
|
24123
25259
|
) }),
|
|
24124
|
-
/* @__PURE__ */ (0,
|
|
25260
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
24125
25261
|
PoweredByUnifold,
|
|
24126
25262
|
{
|
|
24127
25263
|
color: colors2.foregroundMuted,
|
|
@@ -24151,14 +25287,14 @@ function WithdrawModal({
|
|
|
24151
25287
|
hideOverlay = false
|
|
24152
25288
|
}) {
|
|
24153
25289
|
const { colors: colors2, fonts, components } = useTheme();
|
|
24154
|
-
const [containerEl, setContainerEl] = (0,
|
|
24155
|
-
const containerCallbackRef = (0,
|
|
25290
|
+
const [containerEl, setContainerEl] = (0, import_react27.useState)(null);
|
|
25291
|
+
const containerCallbackRef = (0, import_react27.useCallback)((el) => {
|
|
24156
25292
|
setContainerEl(el);
|
|
24157
25293
|
}, []);
|
|
24158
|
-
const [resolvedTheme, setResolvedTheme] = (0,
|
|
25294
|
+
const [resolvedTheme, setResolvedTheme] = (0, import_react27.useState)(
|
|
24159
25295
|
theme === "auto" ? "dark" : theme
|
|
24160
25296
|
);
|
|
24161
|
-
(0,
|
|
25297
|
+
(0, import_react27.useEffect)(() => {
|
|
24162
25298
|
if (theme === "auto") {
|
|
24163
25299
|
const mq = window.matchMedia("(prefers-color-scheme: dark)");
|
|
24164
25300
|
setResolvedTheme(mq.matches ? "dark" : "light");
|
|
@@ -24187,12 +25323,12 @@ function WithdrawModal({
|
|
|
24187
25323
|
publishableKey,
|
|
24188
25324
|
enabled: open
|
|
24189
25325
|
});
|
|
24190
|
-
const [selectedToken, setSelectedToken] = (0,
|
|
24191
|
-
const [selectedChain, setSelectedChain] = (0,
|
|
24192
|
-
const [detectedWallet, setDetectedWallet] = (0,
|
|
25326
|
+
const [selectedToken, setSelectedToken] = (0, import_react27.useState)(null);
|
|
25327
|
+
const [selectedChain, setSelectedChain] = (0, import_react27.useState)(null);
|
|
25328
|
+
const [detectedWallet, setDetectedWallet] = (0, import_react27.useState)(null);
|
|
24193
25329
|
const connectedWalletName = detectedWallet?.name ?? null;
|
|
24194
25330
|
const isWalletMatch = !!detectedWallet;
|
|
24195
|
-
(0,
|
|
25331
|
+
(0, import_react27.useEffect)(() => {
|
|
24196
25332
|
if (!senderAddress || !open) {
|
|
24197
25333
|
setDetectedWallet(null);
|
|
24198
25334
|
return;
|
|
@@ -24205,10 +25341,10 @@ function WithdrawModal({
|
|
|
24205
25341
|
cancelled = true;
|
|
24206
25342
|
};
|
|
24207
25343
|
}, [senderAddress, sourceChainType, open]);
|
|
24208
|
-
const [view, setView] = (0,
|
|
24209
|
-
const [withdrawDepositWalletId, setWithdrawDepositWalletId] = (0,
|
|
24210
|
-
const [selectedExecution, setSelectedExecution] = (0,
|
|
24211
|
-
const [submittedTxInfo, setSubmittedTxInfo] = (0,
|
|
25344
|
+
const [view, setView] = (0, import_react27.useState)("form");
|
|
25345
|
+
const [withdrawDepositWalletId, setWithdrawDepositWalletId] = (0, import_react27.useState)();
|
|
25346
|
+
const [selectedExecution, setSelectedExecution] = (0, import_react27.useState)(null);
|
|
25347
|
+
const [submittedTxInfo, setSubmittedTxInfo] = (0, import_react27.useState)(null);
|
|
24212
25348
|
const { executions: realtimeExecutions } = useWithdrawPolling({
|
|
24213
25349
|
userId: externalUserId,
|
|
24214
25350
|
publishableKey,
|
|
@@ -24223,7 +25359,7 @@ function WithdrawModal({
|
|
|
24223
25359
|
refetchInterval: view === "tracker" || view === "detail" ? 5e3 : 15e3
|
|
24224
25360
|
});
|
|
24225
25361
|
const allWithdrawals = allWithdrawalsData?.data ?? [];
|
|
24226
|
-
const handleDepositWalletCreation = (0,
|
|
25362
|
+
const handleDepositWalletCreation = (0, import_react27.useCallback)(async (params) => {
|
|
24227
25363
|
const { data: wallets } = await createDepositAddress(
|
|
24228
25364
|
{
|
|
24229
25365
|
external_user_id: externalUserId,
|
|
@@ -24242,11 +25378,11 @@ function WithdrawModal({
|
|
|
24242
25378
|
setWithdrawDepositWalletId(depositWallet.id);
|
|
24243
25379
|
return depositWallet;
|
|
24244
25380
|
}, [externalUserId, publishableKey, sourceChainType]);
|
|
24245
|
-
const handleWithdrawSubmitted = (0,
|
|
25381
|
+
const handleWithdrawSubmitted = (0, import_react27.useCallback)((txInfo) => {
|
|
24246
25382
|
setSubmittedTxInfo(txInfo);
|
|
24247
25383
|
setView("confirming");
|
|
24248
25384
|
}, []);
|
|
24249
|
-
(0,
|
|
25385
|
+
(0, import_react27.useEffect)(() => {
|
|
24250
25386
|
if (!destinationTokens.length || selectedToken) return;
|
|
24251
25387
|
const first = destinationTokens[0];
|
|
24252
25388
|
if (first?.chains.length > 0) {
|
|
@@ -24254,8 +25390,8 @@ function WithdrawModal({
|
|
|
24254
25390
|
setSelectedChain(first.chains[0]);
|
|
24255
25391
|
}
|
|
24256
25392
|
}, [destinationTokens, selectedToken]);
|
|
24257
|
-
const resetViewTimeoutRef = (0,
|
|
24258
|
-
const handleClose = (0,
|
|
25393
|
+
const resetViewTimeoutRef = (0, import_react27.useRef)(null);
|
|
25394
|
+
const handleClose = (0, import_react27.useCallback)(() => {
|
|
24259
25395
|
onOpenChange(false);
|
|
24260
25396
|
if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
|
|
24261
25397
|
resetViewTimeoutRef.current = setTimeout(() => {
|
|
@@ -24268,7 +25404,7 @@ function WithdrawModal({
|
|
|
24268
25404
|
resetViewTimeoutRef.current = null;
|
|
24269
25405
|
}, 200);
|
|
24270
25406
|
}, [onOpenChange]);
|
|
24271
|
-
(0,
|
|
25407
|
+
(0, import_react27.useLayoutEffect)(() => {
|
|
24272
25408
|
if (!open) return;
|
|
24273
25409
|
if (resetViewTimeoutRef.current) {
|
|
24274
25410
|
clearTimeout(resetViewTimeoutRef.current);
|
|
@@ -24281,17 +25417,17 @@ function WithdrawModal({
|
|
|
24281
25417
|
setSubmittedTxInfo(null);
|
|
24282
25418
|
setWithdrawDepositWalletId(void 0);
|
|
24283
25419
|
}, [open]);
|
|
24284
|
-
(0,
|
|
25420
|
+
(0, import_react27.useEffect)(() => () => {
|
|
24285
25421
|
if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
|
|
24286
25422
|
}, []);
|
|
24287
|
-
const handleTokenSymbolChange = (0,
|
|
25423
|
+
const handleTokenSymbolChange = (0, import_react27.useCallback)((symbol) => {
|
|
24288
25424
|
const tok = destinationTokens.find((t11) => t11.symbol === symbol);
|
|
24289
25425
|
if (tok) {
|
|
24290
25426
|
setSelectedToken(tok);
|
|
24291
25427
|
if (tok.chains.length > 0) setSelectedChain(tok.chains[0]);
|
|
24292
25428
|
}
|
|
24293
25429
|
}, [destinationTokens]);
|
|
24294
|
-
const handleChainKeyChange = (0,
|
|
25430
|
+
const handleChainKeyChange = (0, import_react27.useCallback)((chainKey) => {
|
|
24295
25431
|
if (!selectedToken) return;
|
|
24296
25432
|
const chain = selectedToken.chains.find((c) => getChainKey5(c.chain_id, c.chain_type) === chainKey);
|
|
24297
25433
|
if (chain) setSelectedChain(chain);
|
|
@@ -24299,8 +25435,8 @@ function WithdrawModal({
|
|
|
24299
25435
|
const isSourceSupported = sourceValidation?.isSupported ?? null;
|
|
24300
25436
|
const canWithdraw = !!onWithdraw || isWalletMatch;
|
|
24301
25437
|
const isAnyLoading = tokensLoading || isCheckingSourceToken;
|
|
24302
|
-
const withdrawPoweredByFooter = /* @__PURE__ */ (0,
|
|
24303
|
-
return /* @__PURE__ */ (0,
|
|
25438
|
+
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" }) });
|
|
25439
|
+
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
25440
|
DialogContent2,
|
|
24305
25441
|
{
|
|
24306
25442
|
ref: hideOverlay ? containerCallbackRef : void 0,
|
|
@@ -24309,7 +25445,7 @@ function WithdrawModal({
|
|
|
24309
25445
|
style: { backgroundColor: colors2.background },
|
|
24310
25446
|
onPointerDownOutside: (e) => e.preventDefault(),
|
|
24311
25447
|
onInteractOutside: (e) => e.preventDefault(),
|
|
24312
|
-
children: /* @__PURE__ */ (0,
|
|
25448
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(ThemeStyleInjector, { children: view === "confirming" && submittedTxInfo ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
24313
25449
|
WithdrawConfirmingView,
|
|
24314
25450
|
{
|
|
24315
25451
|
txInfo: submittedTxInfo,
|
|
@@ -24317,18 +25453,18 @@ function WithdrawModal({
|
|
|
24317
25453
|
onClose: handleClose,
|
|
24318
25454
|
onViewTracker: () => setView("tracker")
|
|
24319
25455
|
}
|
|
24320
|
-
) : view === "detail" && selectedExecution ? /* @__PURE__ */ (0,
|
|
24321
|
-
/* @__PURE__ */ (0,
|
|
25456
|
+
) : view === "detail" && selectedExecution ? /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
|
|
25457
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(DepositHeader, { title: "Withdrawal Details", showBack: true, showClose: !hideOverlay, onBack: () => {
|
|
24322
25458
|
setSelectedExecution(null);
|
|
24323
25459
|
setView("tracker");
|
|
24324
25460
|
}, onClose: handleClose }),
|
|
24325
|
-
/* @__PURE__ */ (0,
|
|
25461
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(DepositDetailContent, { execution: selectedExecution, variant: "withdraw" }),
|
|
24326
25462
|
withdrawPoweredByFooter
|
|
24327
25463
|
] }) : view === "tracker" ? (
|
|
24328
25464
|
/* ---------- Tracker view: execution list ---------- */
|
|
24329
|
-
/* @__PURE__ */ (0,
|
|
24330
|
-
/* @__PURE__ */ (0,
|
|
24331
|
-
/* @__PURE__ */ (0,
|
|
25465
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
|
|
25466
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(DepositHeader, { title: "Withdrawal History", showBack: true, showClose: !hideOverlay, onBack: () => setView("form"), onClose: handleClose }),
|
|
25467
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "uf-flex uf-flex-col uf-gap-2", style: { minHeight: 200 }, 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
25468
|
WithdrawExecutionItem,
|
|
24333
25469
|
{
|
|
24334
25470
|
execution: ex,
|
|
@@ -24343,15 +25479,15 @@ function WithdrawModal({
|
|
|
24343
25479
|
] })
|
|
24344
25480
|
) : (
|
|
24345
25481
|
/* ---------- 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,
|
|
25482
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
|
|
25483
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(DepositHeader, { title: modalTitle || t9.title, showClose: !hideOverlay, onClose: handleClose }),
|
|
25484
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-3", children: [
|
|
25485
|
+
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: [
|
|
25486
|
+
/* @__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" }) }),
|
|
25487
|
+
/* @__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" }),
|
|
25488
|
+
/* @__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 })
|
|
25489
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
|
|
25490
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
24355
25491
|
WithdrawDoubleInput,
|
|
24356
25492
|
{
|
|
24357
25493
|
tokens: destinationTokens,
|
|
@@ -24362,7 +25498,7 @@ function WithdrawModal({
|
|
|
24362
25498
|
isLoading: tokensLoading
|
|
24363
25499
|
}
|
|
24364
25500
|
),
|
|
24365
|
-
/* @__PURE__ */ (0,
|
|
25501
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
24366
25502
|
WithdrawForm,
|
|
24367
25503
|
{
|
|
24368
25504
|
publishableKey,
|
|
@@ -24388,16 +25524,16 @@ function WithdrawModal({
|
|
|
24388
25524
|
onWithdrawError,
|
|
24389
25525
|
onDepositWalletCreation: handleDepositWalletCreation,
|
|
24390
25526
|
onWithdrawSubmitted: handleWithdrawSubmitted,
|
|
24391
|
-
footerLeft: /* @__PURE__ */ (0,
|
|
25527
|
+
footerLeft: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
|
|
24392
25528
|
"button",
|
|
24393
25529
|
{
|
|
24394
25530
|
onClick: () => setView("tracker"),
|
|
24395
25531
|
className: "uf-flex uf-items-center uf-gap-1 uf-transition-colors hover:uf-opacity-70",
|
|
24396
25532
|
style: { color: colors2.foregroundMuted },
|
|
24397
25533
|
children: [
|
|
24398
|
-
/* @__PURE__ */ (0,
|
|
25534
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Clock, { className: "uf-w-3.5 uf-h-3.5" }),
|
|
24399
25535
|
"Withdrawal History",
|
|
24400
|
-
/* @__PURE__ */ (0,
|
|
25536
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(ChevronRight, { className: "uf-w-3 uf-h-3" })
|
|
24401
25537
|
]
|
|
24402
25538
|
}
|
|
24403
25539
|
)
|
|
@@ -24414,27 +25550,31 @@ function WithdrawModal({
|
|
|
24414
25550
|
var t10 = i18n2.withdrawModal;
|
|
24415
25551
|
|
|
24416
25552
|
// src/provider.tsx
|
|
24417
|
-
var
|
|
25553
|
+
var import_jsx_runtime76 = require("react/jsx-runtime");
|
|
24418
25554
|
function UnifoldProvider2({
|
|
24419
25555
|
children,
|
|
24420
25556
|
publishableKey,
|
|
24421
25557
|
config
|
|
24422
25558
|
}) {
|
|
24423
|
-
const [isOpen, setIsOpen] = (0,
|
|
24424
|
-
const [depositConfig, setDepositConfig] = (0,
|
|
25559
|
+
const [isOpen, setIsOpen] = (0, import_react32.useState)(false);
|
|
25560
|
+
const [depositConfig, setDepositConfig] = (0, import_react32.useState)(
|
|
25561
|
+
null
|
|
25562
|
+
);
|
|
25563
|
+
const [isCheckoutOpen, setIsCheckoutOpen] = (0, import_react32.useState)(false);
|
|
25564
|
+
const [checkoutConfig, setCheckoutConfig] = (0, import_react32.useState)(
|
|
24425
25565
|
null
|
|
24426
25566
|
);
|
|
24427
|
-
const [isWithdrawOpen, setIsWithdrawOpen] = (0,
|
|
24428
|
-
const [withdrawConfig, setWithdrawConfig] = (0,
|
|
25567
|
+
const [isWithdrawOpen, setIsWithdrawOpen] = (0, import_react32.useState)(false);
|
|
25568
|
+
const [withdrawConfig, setWithdrawConfig] = (0, import_react32.useState)(
|
|
24429
25569
|
null
|
|
24430
25570
|
);
|
|
24431
|
-
const [resolvedTheme, setResolvedTheme] =
|
|
24432
|
-
(0,
|
|
25571
|
+
const [resolvedTheme, setResolvedTheme] = import_react32.default.useState("dark");
|
|
25572
|
+
(0, import_react32.useEffect)(() => {
|
|
24433
25573
|
if (publishableKey) {
|
|
24434
25574
|
setApiConfig({ publishableKey });
|
|
24435
25575
|
}
|
|
24436
25576
|
}, [publishableKey]);
|
|
24437
|
-
|
|
25577
|
+
import_react32.default.useEffect(() => {
|
|
24438
25578
|
const appearance = config?.appearance || "dark";
|
|
24439
25579
|
if (appearance === "auto") {
|
|
24440
25580
|
const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
|
|
@@ -24449,17 +25589,17 @@ function UnifoldProvider2({
|
|
|
24449
25589
|
setResolvedTheme(appearance);
|
|
24450
25590
|
}
|
|
24451
25591
|
}, [config?.appearance]);
|
|
24452
|
-
const depositPromiseRef =
|
|
24453
|
-
const depositConfigRef =
|
|
25592
|
+
const depositPromiseRef = import_react32.default.useRef(null);
|
|
25593
|
+
const depositConfigRef = import_react32.default.useRef(null);
|
|
24454
25594
|
depositConfigRef.current = depositConfig;
|
|
24455
|
-
const closeTimeoutRef =
|
|
24456
|
-
const closeGuardRef =
|
|
24457
|
-
const withdrawPromiseRef =
|
|
24458
|
-
const withdrawConfigRef =
|
|
25595
|
+
const closeTimeoutRef = import_react32.default.useRef(null);
|
|
25596
|
+
const closeGuardRef = import_react32.default.useRef(false);
|
|
25597
|
+
const withdrawPromiseRef = import_react32.default.useRef(null);
|
|
25598
|
+
const withdrawConfigRef = import_react32.default.useRef(null);
|
|
24459
25599
|
withdrawConfigRef.current = withdrawConfig;
|
|
24460
|
-
const withdrawCloseTimeoutRef =
|
|
24461
|
-
const withdrawCloseGuardRef =
|
|
24462
|
-
const beginDeposit = (0,
|
|
25600
|
+
const withdrawCloseTimeoutRef = import_react32.default.useRef(null);
|
|
25601
|
+
const withdrawCloseGuardRef = import_react32.default.useRef(false);
|
|
25602
|
+
const beginDeposit = (0, import_react32.useCallback)((config2) => {
|
|
24463
25603
|
if (closeTimeoutRef.current) {
|
|
24464
25604
|
clearTimeout(closeTimeoutRef.current);
|
|
24465
25605
|
closeTimeoutRef.current = null;
|
|
@@ -24482,7 +25622,7 @@ function UnifoldProvider2({
|
|
|
24482
25622
|
setIsOpen(true);
|
|
24483
25623
|
return promise;
|
|
24484
25624
|
}, []);
|
|
24485
|
-
const closeDeposit = (0,
|
|
25625
|
+
const closeDeposit = (0, import_react32.useCallback)(() => {
|
|
24486
25626
|
if (closeGuardRef.current) {
|
|
24487
25627
|
return;
|
|
24488
25628
|
}
|
|
@@ -24504,7 +25644,7 @@ function UnifoldProvider2({
|
|
|
24504
25644
|
closeTimeoutRef.current = null;
|
|
24505
25645
|
}, 200);
|
|
24506
25646
|
}, []);
|
|
24507
|
-
const handleDepositSuccess = (0,
|
|
25647
|
+
const handleDepositSuccess = (0, import_react32.useCallback)((data) => {
|
|
24508
25648
|
if (depositConfig?.onSuccess) {
|
|
24509
25649
|
depositConfig.onSuccess(data);
|
|
24510
25650
|
}
|
|
@@ -24513,7 +25653,7 @@ function UnifoldProvider2({
|
|
|
24513
25653
|
depositPromiseRef.current = null;
|
|
24514
25654
|
}
|
|
24515
25655
|
}, [depositConfig]);
|
|
24516
|
-
const handleDepositError = (0,
|
|
25656
|
+
const handleDepositError = (0, import_react32.useCallback)((error) => {
|
|
24517
25657
|
console.error("[UnifoldProvider] Deposit error:", error);
|
|
24518
25658
|
if (depositConfig?.onError) {
|
|
24519
25659
|
depositConfig.onError(error);
|
|
@@ -24523,7 +25663,76 @@ function UnifoldProvider2({
|
|
|
24523
25663
|
depositPromiseRef.current = null;
|
|
24524
25664
|
}
|
|
24525
25665
|
}, [depositConfig]);
|
|
24526
|
-
const
|
|
25666
|
+
const checkoutPromiseRef = import_react32.default.useRef(null);
|
|
25667
|
+
const checkoutConfigRef = import_react32.default.useRef(null);
|
|
25668
|
+
checkoutConfigRef.current = checkoutConfig;
|
|
25669
|
+
const checkoutCloseTimeoutRef = import_react32.default.useRef(null);
|
|
25670
|
+
const checkoutCloseGuardRef = import_react32.default.useRef(false);
|
|
25671
|
+
const beginCheckout = (0, import_react32.useCallback)((config2) => {
|
|
25672
|
+
if (checkoutCloseTimeoutRef.current) {
|
|
25673
|
+
clearTimeout(checkoutCloseTimeoutRef.current);
|
|
25674
|
+
checkoutCloseTimeoutRef.current = null;
|
|
25675
|
+
}
|
|
25676
|
+
checkoutCloseGuardRef.current = false;
|
|
25677
|
+
if (checkoutPromiseRef.current) {
|
|
25678
|
+
console.warn("[UnifoldProvider] A checkout is already in progress. Cancelling previous checkout.");
|
|
25679
|
+
checkoutPromiseRef.current.reject({
|
|
25680
|
+
message: "Checkout cancelled - new checkout started",
|
|
25681
|
+
code: "CHECKOUT_SUPERSEDED"
|
|
25682
|
+
});
|
|
25683
|
+
checkoutPromiseRef.current = null;
|
|
25684
|
+
}
|
|
25685
|
+
const promise = new Promise((resolve, reject) => {
|
|
25686
|
+
checkoutPromiseRef.current = { resolve, reject };
|
|
25687
|
+
});
|
|
25688
|
+
promise.catch(() => {
|
|
25689
|
+
});
|
|
25690
|
+
setCheckoutConfig(config2);
|
|
25691
|
+
setIsCheckoutOpen(true);
|
|
25692
|
+
return promise;
|
|
25693
|
+
}, []);
|
|
25694
|
+
const closeCheckout = (0, import_react32.useCallback)(() => {
|
|
25695
|
+
if (checkoutCloseGuardRef.current) {
|
|
25696
|
+
return;
|
|
25697
|
+
}
|
|
25698
|
+
checkoutCloseGuardRef.current = true;
|
|
25699
|
+
const promiseToReject = checkoutPromiseRef.current;
|
|
25700
|
+
checkoutPromiseRef.current = null;
|
|
25701
|
+
if (checkoutConfigRef.current?.onClose) {
|
|
25702
|
+
checkoutConfigRef.current.onClose();
|
|
25703
|
+
}
|
|
25704
|
+
if (promiseToReject) {
|
|
25705
|
+
promiseToReject.reject({
|
|
25706
|
+
message: "Checkout cancelled by user",
|
|
25707
|
+
code: "CHECKOUT_CANCELLED"
|
|
25708
|
+
});
|
|
25709
|
+
}
|
|
25710
|
+
setIsCheckoutOpen(false);
|
|
25711
|
+
checkoutCloseTimeoutRef.current = setTimeout(() => {
|
|
25712
|
+
setCheckoutConfig(null);
|
|
25713
|
+
checkoutCloseTimeoutRef.current = null;
|
|
25714
|
+
}, 200);
|
|
25715
|
+
}, []);
|
|
25716
|
+
const handleCheckoutSuccess = (0, import_react32.useCallback)((data) => {
|
|
25717
|
+
if (checkoutConfig?.onSuccess) {
|
|
25718
|
+
checkoutConfig.onSuccess(data);
|
|
25719
|
+
}
|
|
25720
|
+
if (checkoutPromiseRef.current) {
|
|
25721
|
+
checkoutPromiseRef.current.resolve(data);
|
|
25722
|
+
checkoutPromiseRef.current = null;
|
|
25723
|
+
}
|
|
25724
|
+
}, [checkoutConfig]);
|
|
25725
|
+
const handleCheckoutError = (0, import_react32.useCallback)((error) => {
|
|
25726
|
+
console.error("[UnifoldProvider] Checkout error:", error);
|
|
25727
|
+
if (checkoutConfig?.onError) {
|
|
25728
|
+
checkoutConfig.onError(error);
|
|
25729
|
+
}
|
|
25730
|
+
if (checkoutPromiseRef.current) {
|
|
25731
|
+
checkoutPromiseRef.current.reject(error);
|
|
25732
|
+
checkoutPromiseRef.current = null;
|
|
25733
|
+
}
|
|
25734
|
+
}, [checkoutConfig]);
|
|
25735
|
+
const beginWithdraw = (0, import_react32.useCallback)((config2) => {
|
|
24527
25736
|
if (withdrawCloseTimeoutRef.current) {
|
|
24528
25737
|
clearTimeout(withdrawCloseTimeoutRef.current);
|
|
24529
25738
|
withdrawCloseTimeoutRef.current = null;
|
|
@@ -24546,7 +25755,7 @@ function UnifoldProvider2({
|
|
|
24546
25755
|
setIsWithdrawOpen(true);
|
|
24547
25756
|
return promise;
|
|
24548
25757
|
}, []);
|
|
24549
|
-
const closeWithdraw = (0,
|
|
25758
|
+
const closeWithdraw = (0, import_react32.useCallback)(() => {
|
|
24550
25759
|
if (withdrawCloseGuardRef.current) {
|
|
24551
25760
|
return;
|
|
24552
25761
|
}
|
|
@@ -24568,7 +25777,7 @@ function UnifoldProvider2({
|
|
|
24568
25777
|
withdrawCloseTimeoutRef.current = null;
|
|
24569
25778
|
}, 200);
|
|
24570
25779
|
}, []);
|
|
24571
|
-
const handleWithdrawSuccess = (0,
|
|
25780
|
+
const handleWithdrawSuccess = (0, import_react32.useCallback)((data) => {
|
|
24572
25781
|
if (withdrawConfigRef.current?.onSuccess) {
|
|
24573
25782
|
withdrawConfigRef.current.onSuccess(data);
|
|
24574
25783
|
}
|
|
@@ -24577,7 +25786,7 @@ function UnifoldProvider2({
|
|
|
24577
25786
|
withdrawPromiseRef.current = null;
|
|
24578
25787
|
}
|
|
24579
25788
|
}, []);
|
|
24580
|
-
const handleWithdrawError = (0,
|
|
25789
|
+
const handleWithdrawError = (0, import_react32.useCallback)((error) => {
|
|
24581
25790
|
console.error("[UnifoldProvider] Withdraw error:", error);
|
|
24582
25791
|
if (withdrawConfigRef.current?.onError) {
|
|
24583
25792
|
withdrawConfigRef.current.onError(error);
|
|
@@ -24587,20 +25796,20 @@ function UnifoldProvider2({
|
|
|
24587
25796
|
withdrawPromiseRef.current = null;
|
|
24588
25797
|
}
|
|
24589
25798
|
}, []);
|
|
24590
|
-
const contextValue = (0,
|
|
25799
|
+
const contextValue = (0, import_react32.useMemo)(
|
|
24591
25800
|
() => ({
|
|
24592
25801
|
beginDeposit,
|
|
24593
25802
|
closeDeposit,
|
|
24594
|
-
|
|
24595
|
-
|
|
25803
|
+
beginCheckout,
|
|
25804
|
+
closeCheckout,
|
|
24596
25805
|
beginWithdraw,
|
|
24597
25806
|
closeWithdraw,
|
|
24598
25807
|
handleWithdrawSuccess,
|
|
24599
25808
|
handleWithdrawError
|
|
24600
25809
|
}),
|
|
24601
|
-
[beginDeposit, closeDeposit,
|
|
25810
|
+
[beginDeposit, closeDeposit, beginCheckout, closeCheckout, beginWithdraw, closeWithdraw, handleWithdrawSuccess, handleWithdrawError]
|
|
24602
25811
|
);
|
|
24603
|
-
return /* @__PURE__ */ (0,
|
|
25812
|
+
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
25813
|
ThemeProvider,
|
|
24605
25814
|
{
|
|
24606
25815
|
mode: resolvedTheme,
|
|
@@ -24611,7 +25820,20 @@ function UnifoldProvider2({
|
|
|
24611
25820
|
components: config?.components,
|
|
24612
25821
|
children: [
|
|
24613
25822
|
children,
|
|
24614
|
-
|
|
25823
|
+
checkoutConfig && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
25824
|
+
CheckoutModal,
|
|
25825
|
+
{
|
|
25826
|
+
open: isCheckoutOpen,
|
|
25827
|
+
onOpenChange: closeCheckout,
|
|
25828
|
+
clientSecret: checkoutConfig.clientSecret,
|
|
25829
|
+
publishableKey,
|
|
25830
|
+
enableConnectWallet: config?.enableConnectWallet,
|
|
25831
|
+
theme: resolvedTheme,
|
|
25832
|
+
onCheckoutSuccess: handleCheckoutSuccess,
|
|
25833
|
+
onCheckoutError: handleCheckoutError
|
|
25834
|
+
}
|
|
25835
|
+
),
|
|
25836
|
+
withdrawConfig && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
24615
25837
|
WithdrawModal,
|
|
24616
25838
|
{
|
|
24617
25839
|
open: isWithdrawOpen,
|
|
@@ -24631,7 +25853,7 @@ function UnifoldProvider2({
|
|
|
24631
25853
|
theme: resolvedTheme
|
|
24632
25854
|
}
|
|
24633
25855
|
),
|
|
24634
|
-
depositConfig && /* @__PURE__ */ (0,
|
|
25856
|
+
depositConfig && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
24635
25857
|
DepositModal,
|
|
24636
25858
|
{
|
|
24637
25859
|
open: isOpen,
|
|
@@ -24672,16 +25894,19 @@ function UnifoldProvider2({
|
|
|
24672
25894
|
}
|
|
24673
25895
|
) }) });
|
|
24674
25896
|
}
|
|
24675
|
-
var ConnectContext =
|
|
25897
|
+
var ConnectContext = import_react32.default.createContext(null);
|
|
24676
25898
|
function useUnifold2() {
|
|
24677
25899
|
const baseContext = useUnifold();
|
|
24678
|
-
const connectContext =
|
|
25900
|
+
const connectContext = import_react32.default.useContext(ConnectContext);
|
|
24679
25901
|
if (typeof window === "undefined") {
|
|
24680
25902
|
return {
|
|
24681
25903
|
publishableKey: "",
|
|
24682
25904
|
beginDeposit: () => Promise.reject(new Error("SSR not supported")),
|
|
24683
25905
|
closeDeposit: () => {
|
|
24684
25906
|
},
|
|
25907
|
+
beginCheckout: () => Promise.reject(new Error("SSR not supported")),
|
|
25908
|
+
closeCheckout: () => {
|
|
25909
|
+
},
|
|
24685
25910
|
beginWithdraw: () => Promise.reject(new Error("SSR not supported")),
|
|
24686
25911
|
closeWithdraw: () => {
|
|
24687
25912
|
}
|
|
@@ -24694,6 +25919,8 @@ function useUnifold2() {
|
|
|
24694
25919
|
publishableKey: baseContext.publishableKey,
|
|
24695
25920
|
beginDeposit: connectContext.beginDeposit,
|
|
24696
25921
|
closeDeposit: connectContext.closeDeposit,
|
|
25922
|
+
beginCheckout: connectContext.beginCheckout,
|
|
25923
|
+
closeCheckout: connectContext.closeCheckout,
|
|
24697
25924
|
beginWithdraw: connectContext.beginWithdraw,
|
|
24698
25925
|
closeWithdraw: connectContext.closeWithdraw
|
|
24699
25926
|
};
|
|
@@ -24742,6 +25969,7 @@ lucide-react/dist/esm/Icon.js:
|
|
|
24742
25969
|
lucide-react/dist/esm/createLucideIcon.js:
|
|
24743
25970
|
lucide-react/dist/esm/icons/arrow-left-right.js:
|
|
24744
25971
|
lucide-react/dist/esm/icons/arrow-left.js:
|
|
25972
|
+
lucide-react/dist/esm/icons/arrow-right.js:
|
|
24745
25973
|
lucide-react/dist/esm/icons/arrow-up-down.js:
|
|
24746
25974
|
lucide-react/dist/esm/icons/check.js:
|
|
24747
25975
|
lucide-react/dist/esm/icons/chevron-down.js:
|