@unifold/ui-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 +103 -5
- package/dist/index.d.ts +103 -5
- package/dist/index.js +1420 -380
- package/dist/index.mjs +1417 -371
- package/dist/styles-base.css +1 -1
- package/dist/styles.css +1 -1
- package/package.json +2 -2
package/dist/index.js
CHANGED
|
@@ -32,6 +32,7 @@ var index_exports = {};
|
|
|
32
32
|
__export(index_exports, {
|
|
33
33
|
Button: () => Button,
|
|
34
34
|
BuyWithCard: () => BuyWithCard,
|
|
35
|
+
CheckoutModal: () => CheckoutModal,
|
|
35
36
|
ConfirmingView: () => ConfirmingView,
|
|
36
37
|
CurrencyListItem: () => CurrencyListItem,
|
|
37
38
|
CurrencyListSection: () => CurrencyListSection,
|
|
@@ -55,6 +56,7 @@ __export(index_exports, {
|
|
|
55
56
|
DialogPortal: () => DialogPortal,
|
|
56
57
|
DialogTitle: () => DialogTitle,
|
|
57
58
|
DialogTrigger: () => DialogTrigger,
|
|
59
|
+
HYPERCORE_CHAIN_ID: () => HYPERCORE_CHAIN_ID,
|
|
58
60
|
Select: () => Select,
|
|
59
61
|
SelectContent: () => SelectContent,
|
|
60
62
|
SelectGroup: () => SelectGroup,
|
|
@@ -86,14 +88,18 @@ __export(index_exports, {
|
|
|
86
88
|
defaultColors: () => defaultColors,
|
|
87
89
|
detectBrowserWallet: () => detectBrowserWallet,
|
|
88
90
|
getColors: () => getColors,
|
|
91
|
+
isHypercoreChain: () => isHypercoreChain,
|
|
89
92
|
mergeColors: () => mergeColors,
|
|
90
93
|
resolveComponentTokens: () => resolveComponentTokens,
|
|
91
94
|
sendEvmWithdraw: () => sendEvmWithdraw,
|
|
95
|
+
sendHypercoreWithdraw: () => sendHypercoreWithdraw,
|
|
92
96
|
sendSolanaWithdraw: () => sendSolanaWithdraw,
|
|
93
97
|
truncateAddress: () => truncateAddress,
|
|
94
98
|
useAddressBalance: () => useAddressBalance,
|
|
95
99
|
useAllowedCountry: () => useAllowedCountry,
|
|
96
100
|
useDepositPolling: () => useDepositPolling,
|
|
101
|
+
useDepositQuote: () => useDepositQuote,
|
|
102
|
+
usePaymentIntent: () => usePaymentIntent,
|
|
97
103
|
useSourceTokenValidation: () => useSourceTokenValidation,
|
|
98
104
|
useSupportedDestinationTokens: () => useSupportedDestinationTokens,
|
|
99
105
|
useTheme: () => useTheme,
|
|
@@ -1490,6 +1496,7 @@ var CUTOFF_BUFFER_MS = 6e4;
|
|
|
1490
1496
|
function useDepositPolling({
|
|
1491
1497
|
userId,
|
|
1492
1498
|
publishableKey,
|
|
1499
|
+
clientSecret,
|
|
1493
1500
|
depositConfirmationMode = "auto_ui",
|
|
1494
1501
|
depositWalletId,
|
|
1495
1502
|
enabled = true,
|
|
@@ -1547,11 +1554,12 @@ function useDepositPolling({
|
|
|
1547
1554
|
depositWalletId
|
|
1548
1555
|
]);
|
|
1549
1556
|
(0, import_react3.useEffect)(() => {
|
|
1550
|
-
if (!
|
|
1557
|
+
if (!enabled) return;
|
|
1558
|
+
if (!clientSecret && !userId) return;
|
|
1551
1559
|
const modalOpenedAt = modalOpenedAtRef.current;
|
|
1552
1560
|
const poll = async () => {
|
|
1553
1561
|
try {
|
|
1554
|
-
const response = await (0, import_core6.queryExecutions)(userId, publishableKey, import_core6.ActionType.Deposit);
|
|
1562
|
+
const response = clientSecret ? await (0, import_core6.listPaymentIntentExecutions)(clientSecret, publishableKey) : await (0, import_core6.queryExecutions)(userId, publishableKey, import_core6.ActionType.Deposit);
|
|
1555
1563
|
const cutoff = new Date(modalOpenedAt.getTime() - CUTOFF_BUFFER_MS);
|
|
1556
1564
|
const sortedExecutions = [...response.data].sort((a, b) => {
|
|
1557
1565
|
const timeA = a.created_at ? new Date(a.created_at).getTime() : 0;
|
|
@@ -1635,7 +1643,7 @@ function useDepositPolling({
|
|
|
1635
1643
|
clearInterval(pollInterval);
|
|
1636
1644
|
setIsPolling(false);
|
|
1637
1645
|
};
|
|
1638
|
-
}, [userId, publishableKey, enabled]);
|
|
1646
|
+
}, [userId, publishableKey, clientSecret, enabled]);
|
|
1639
1647
|
(0, import_react3.useEffect)(() => {
|
|
1640
1648
|
if (!pollingEnabled || !depositWalletId) return;
|
|
1641
1649
|
const triggerPoll = async () => {
|
|
@@ -8372,6 +8380,7 @@ var parseChainKey = (chainKey) => {
|
|
|
8372
8380
|
function TransferCryptoSingleInput({
|
|
8373
8381
|
userId,
|
|
8374
8382
|
publishableKey,
|
|
8383
|
+
clientSecret,
|
|
8375
8384
|
recipientAddress,
|
|
8376
8385
|
destinationChainType,
|
|
8377
8386
|
destinationChainId,
|
|
@@ -8384,7 +8393,9 @@ function TransferCryptoSingleInput({
|
|
|
8384
8393
|
onExecutionsChange,
|
|
8385
8394
|
onDepositSuccess,
|
|
8386
8395
|
onDepositError,
|
|
8387
|
-
wallets: externalWallets
|
|
8396
|
+
wallets: externalWallets,
|
|
8397
|
+
onSourceTokenChange,
|
|
8398
|
+
checkoutQuote
|
|
8388
8399
|
}) {
|
|
8389
8400
|
const { themeClass, colors: colors2, fonts, components } = useTheme();
|
|
8390
8401
|
const isDarkMode = themeClass.includes("uf-dark");
|
|
@@ -8451,12 +8462,28 @@ function TransferCryptoSingleInput({
|
|
|
8451
8462
|
} = useDepositPolling({
|
|
8452
8463
|
userId,
|
|
8453
8464
|
publishableKey,
|
|
8465
|
+
clientSecret,
|
|
8454
8466
|
depositConfirmationMode,
|
|
8455
8467
|
depositWalletId: currentWallet?.id,
|
|
8456
8468
|
enabled: true,
|
|
8457
8469
|
onDepositSuccess,
|
|
8458
8470
|
onDepositError
|
|
8459
8471
|
});
|
|
8472
|
+
(0, import_react15.useEffect)(() => {
|
|
8473
|
+
if (!onSourceTokenChange || !token || !chain || !initialSelectionDone) return;
|
|
8474
|
+
const { chainType, chainId } = parseChainKey(chain);
|
|
8475
|
+
const matchedToken = supportedTokens.find((t11) => t11.symbol === token);
|
|
8476
|
+
const matchedChain = matchedToken?.chains.find(
|
|
8477
|
+
(c) => c.chain_type === chainType && c.chain_id === chainId
|
|
8478
|
+
);
|
|
8479
|
+
onSourceTokenChange({
|
|
8480
|
+
symbol: token,
|
|
8481
|
+
chainType,
|
|
8482
|
+
chainId,
|
|
8483
|
+
tokenAddress: matchedChain?.token_address ?? "",
|
|
8484
|
+
minimumDepositAmountUsd: matchedChain?.minimum_deposit_amount_usd ?? 0
|
|
8485
|
+
});
|
|
8486
|
+
}, [token, chain, initialSelectionDone, onSourceTokenChange, supportedTokens]);
|
|
8460
8487
|
(0, import_react15.useEffect)(() => {
|
|
8461
8488
|
if (onExecutionsChange) {
|
|
8462
8489
|
onExecutionsChange(depositExecutions);
|
|
@@ -8603,6 +8630,53 @@ function TransferCryptoSingleInput({
|
|
|
8603
8630
|
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: "Retrying automatically every 5 seconds..." })
|
|
8604
8631
|
] })
|
|
8605
8632
|
] }),
|
|
8633
|
+
checkoutQuote && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
8634
|
+
"div",
|
|
8635
|
+
{
|
|
8636
|
+
className: "uf-rounded-xl uf-px-3 uf-py-2 uf-flex uf-items-center uf-justify-between",
|
|
8637
|
+
style: {
|
|
8638
|
+
backgroundColor: components.card.backgroundColor,
|
|
8639
|
+
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`,
|
|
8640
|
+
borderRadius: components.card.borderRadius
|
|
8641
|
+
},
|
|
8642
|
+
children: [
|
|
8643
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
|
|
8644
|
+
"span",
|
|
8645
|
+
{
|
|
8646
|
+
className: "uf-text-xs",
|
|
8647
|
+
style: { color: components.card.subtitleColor, fontFamily: fonts.regular },
|
|
8648
|
+
children: "You send"
|
|
8649
|
+
}
|
|
8650
|
+
),
|
|
8651
|
+
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
8652
|
+
"span",
|
|
8653
|
+
{
|
|
8654
|
+
className: "uf-text-sm uf-font-semibold",
|
|
8655
|
+
style: { color: components.card.titleColor, fontFamily: fonts.semibold },
|
|
8656
|
+
children: [
|
|
8657
|
+
(Number(checkoutQuote.sourceAmount) / 10 ** checkoutQuote.sourceTokenDecimals).toFixed(
|
|
8658
|
+
Math.min(checkoutQuote.sourceTokenDecimals, 6)
|
|
8659
|
+
),
|
|
8660
|
+
" ",
|
|
8661
|
+
checkoutQuote.sourceTokenSymbol,
|
|
8662
|
+
checkoutQuote.sourceAmountUsd && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
|
|
8663
|
+
"span",
|
|
8664
|
+
{
|
|
8665
|
+
className: "uf-text-xs uf-font-normal uf-ml-1.5",
|
|
8666
|
+
style: { color: components.card.subtitleColor },
|
|
8667
|
+
children: [
|
|
8668
|
+
"($",
|
|
8669
|
+
checkoutQuote.sourceAmountUsd,
|
|
8670
|
+
")"
|
|
8671
|
+
]
|
|
8672
|
+
}
|
|
8673
|
+
)
|
|
8674
|
+
]
|
|
8675
|
+
}
|
|
8676
|
+
)
|
|
8677
|
+
]
|
|
8678
|
+
}
|
|
8679
|
+
),
|
|
8606
8680
|
/* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-pt-2", children: [
|
|
8607
8681
|
/* @__PURE__ */ (0, import_jsx_runtime41.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" }),
|
|
8608
8682
|
/* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "uf-shadow-lg", style: { borderRadius: components.card.borderRadius, border: `${components.card.borderWidth}px solid ${components.card.borderColor}` }, children: loading || tokensLoading || !initialSelectionDone ? (
|
|
@@ -9454,9 +9528,16 @@ function SelectTokenView({
|
|
|
9454
9528
|
onBack,
|
|
9455
9529
|
onClose,
|
|
9456
9530
|
onDisconnectWallet,
|
|
9457
|
-
isDisconnectingWallet = false
|
|
9531
|
+
isDisconnectingWallet = false,
|
|
9532
|
+
checkoutAmountUsd,
|
|
9533
|
+
checkoutReceivedUsd
|
|
9458
9534
|
}) {
|
|
9459
9535
|
const { colors: colors2, fonts, components } = useTheme();
|
|
9536
|
+
const isCheckout = !!checkoutAmountUsd;
|
|
9537
|
+
const headerSubtitle = isCheckout ? parseFloat(checkoutReceivedUsd || "0") > 0 ? `$${checkoutReceivedUsd} / $${checkoutAmountUsd} received` : `Amount due: $${checkoutAmountUsd}` : formatBalanceDisplay(
|
|
9538
|
+
`$${totalBalanceUsd || "0.00"}`,
|
|
9539
|
+
projectName
|
|
9540
|
+
);
|
|
9460
9541
|
return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
|
|
9461
9542
|
"div",
|
|
9462
9543
|
{
|
|
@@ -9465,11 +9546,8 @@ function SelectTokenView({
|
|
|
9465
9546
|
/* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
|
|
9466
9547
|
DepositHeader,
|
|
9467
9548
|
{
|
|
9468
|
-
title: "Select Token",
|
|
9469
|
-
subtitle:
|
|
9470
|
-
`$${totalBalanceUsd || "0.00"}`,
|
|
9471
|
-
projectName
|
|
9472
|
-
),
|
|
9549
|
+
title: isCheckout ? "Select Token" : "Select Token",
|
|
9550
|
+
subtitle: headerSubtitle,
|
|
9473
9551
|
showBack: true,
|
|
9474
9552
|
onBack,
|
|
9475
9553
|
onClose
|
|
@@ -9700,10 +9778,19 @@ function EnterAmountView({
|
|
|
9700
9778
|
onReview,
|
|
9701
9779
|
onBack,
|
|
9702
9780
|
onClose,
|
|
9703
|
-
quickSelectMode
|
|
9781
|
+
quickSelectMode,
|
|
9782
|
+
checkoutAmountUsd,
|
|
9783
|
+
checkoutReceivedUsd
|
|
9704
9784
|
}) {
|
|
9705
9785
|
const { colors: colors2, fonts, components } = useTheme();
|
|
9786
|
+
const isCheckout = !!checkoutAmountUsd;
|
|
9706
9787
|
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}`;
|
|
9788
|
+
const checkoutRemainingUsd = isCheckout ? Math.max(
|
|
9789
|
+
parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0"),
|
|
9790
|
+
0
|
|
9791
|
+
).toFixed(2) : null;
|
|
9792
|
+
const headerTitle = isCheckout ? `Pay $${checkoutRemainingUsd}` : "Enter Amount";
|
|
9793
|
+
const headerSubtitle = isCheckout ? parseFloat(checkoutReceivedUsd || "0") > 0 ? `$${checkoutReceivedUsd} / $${checkoutAmountUsd} received` : null : balanceSubtitle;
|
|
9707
9794
|
const usePercentageChips = quickSelectMode === "percentage" && maxUsdAmount > 0;
|
|
9708
9795
|
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";
|
|
9709
9796
|
return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
|
|
@@ -9717,14 +9804,27 @@ function EnterAmountView({
|
|
|
9717
9804
|
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
9718
9805
|
DepositHeader,
|
|
9719
9806
|
{
|
|
9720
|
-
title:
|
|
9721
|
-
subtitle:
|
|
9807
|
+
title: headerTitle,
|
|
9808
|
+
subtitle: headerSubtitle ?? void 0,
|
|
9722
9809
|
showBack: true,
|
|
9723
9810
|
onBack,
|
|
9724
9811
|
onClose
|
|
9725
9812
|
}
|
|
9726
9813
|
),
|
|
9727
|
-
walletInfoProp ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "uf-flex uf-w-full uf-justify-center uf-mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime46.
|
|
9814
|
+
walletInfoProp ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "uf-flex uf-w-full uf-justify-center uf-mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-gap-1", children: [
|
|
9815
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(WalletWithNetworkBadge, { walletInfo: walletInfoProp }),
|
|
9816
|
+
isCheckout && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
9817
|
+
"span",
|
|
9818
|
+
{
|
|
9819
|
+
className: "uf-text-xs",
|
|
9820
|
+
style: {
|
|
9821
|
+
color: colors2.foregroundMuted,
|
|
9822
|
+
fontFamily: fonts.regular
|
|
9823
|
+
},
|
|
9824
|
+
children: balanceSubtitle
|
|
9825
|
+
}
|
|
9826
|
+
)
|
|
9827
|
+
] }) }) : null,
|
|
9728
9828
|
/* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "uf-flex uf-min-h-0 uf-flex-1 uf-flex-col", children: [
|
|
9729
9829
|
/* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "uf-min-h-0 uf-flex-1", children: [
|
|
9730
9830
|
/* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "uf-text-center uf-py-8", children: [
|
|
@@ -9747,7 +9847,9 @@ function EnterAmountView({
|
|
|
9747
9847
|
inputMode: "decimal",
|
|
9748
9848
|
placeholder: "0",
|
|
9749
9849
|
value: amountUsd,
|
|
9850
|
+
readOnly: isCheckout,
|
|
9750
9851
|
onChange: (e) => {
|
|
9852
|
+
if (isCheckout) return;
|
|
9751
9853
|
const value = e.target.value;
|
|
9752
9854
|
if (value === "" || /^\d*\.?\d*$/.test(value)) {
|
|
9753
9855
|
const decimalIndex = value.indexOf(".");
|
|
@@ -9758,7 +9860,7 @@ function EnterAmountView({
|
|
|
9758
9860
|
onAmountChange(value);
|
|
9759
9861
|
}
|
|
9760
9862
|
},
|
|
9761
|
-
className:
|
|
9863
|
+
className: `uf-bg-transparent uf-outline-none uf-text-center uf-font-normal uf-w-auto uf-min-w-[60px] ${isCheckout ? "uf-cursor-default" : ""}`,
|
|
9762
9864
|
style: {
|
|
9763
9865
|
fontSize: `${Math.max(3.75 - (amountUsd || "0").length * 0.15, 2)}rem`,
|
|
9764
9866
|
color: components.input.textColor,
|
|
@@ -9780,7 +9882,7 @@ function EnterAmountView({
|
|
|
9780
9882
|
}
|
|
9781
9883
|
)
|
|
9782
9884
|
] }),
|
|
9783
|
-
/* @__PURE__ */ (0, import_jsx_runtime46.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_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
|
|
9885
|
+
!isCheckout && /* @__PURE__ */ (0, import_jsx_runtime46.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_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
|
|
9784
9886
|
PERCENT_QUICK_AMOUNTS.map((pct) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
|
|
9785
9887
|
"button",
|
|
9786
9888
|
{
|
|
@@ -9849,7 +9951,46 @@ function EnterAmountView({
|
|
|
9849
9951
|
}
|
|
9850
9952
|
)
|
|
9851
9953
|
] }) }),
|
|
9852
|
-
tokenChainDetails && tokenChainDetails.minimum_deposit_amount_usd > 0 && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
|
|
9954
|
+
tokenChainDetails && tokenChainDetails.minimum_deposit_amount_usd > 0 && (isCheckout && checkoutAmountUsd && inputUsdNum > parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0") + 5e-3 ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
|
|
9955
|
+
"div",
|
|
9956
|
+
{
|
|
9957
|
+
className: "uf-rounded-lg uf-px-3 uf-py-2 uf-mb-3 uf-text-center",
|
|
9958
|
+
style: {
|
|
9959
|
+
backgroundColor: colors2.warning + "15",
|
|
9960
|
+
border: `1px solid ${colors2.warning}30`,
|
|
9961
|
+
borderRadius: components.card.borderRadius,
|
|
9962
|
+
animation: "uf-fadeSlideIn 0.4s ease-out"
|
|
9963
|
+
},
|
|
9964
|
+
children: [
|
|
9965
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
|
|
9966
|
+
"div",
|
|
9967
|
+
{
|
|
9968
|
+
className: "uf-text-xs uf-font-medium",
|
|
9969
|
+
style: { color: colors2.warning, fontFamily: fonts.medium },
|
|
9970
|
+
children: [
|
|
9971
|
+
"Minimum for ",
|
|
9972
|
+
selectedToken.symbol,
|
|
9973
|
+
" on ",
|
|
9974
|
+
selectedToken.chain_name,
|
|
9975
|
+
" is $",
|
|
9976
|
+
tokenChainDetails.minimum_deposit_amount_usd.toFixed(2)
|
|
9977
|
+
]
|
|
9978
|
+
}
|
|
9979
|
+
),
|
|
9980
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
|
|
9981
|
+
"div",
|
|
9982
|
+
{
|
|
9983
|
+
className: "uf-text-xs uf-mt-0.5",
|
|
9984
|
+
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
9985
|
+
children: [
|
|
9986
|
+
"Amount adjusted from remaining $",
|
|
9987
|
+
(parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0")).toFixed(2)
|
|
9988
|
+
]
|
|
9989
|
+
}
|
|
9990
|
+
)
|
|
9991
|
+
]
|
|
9992
|
+
}
|
|
9993
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
|
|
9853
9994
|
"div",
|
|
9854
9995
|
{
|
|
9855
9996
|
className: "uf-text-center uf-text-xs uf-mb-3",
|
|
@@ -9859,7 +10000,7 @@ function EnterAmountView({
|
|
|
9859
10000
|
tokenChainDetails.minimum_deposit_amount_usd.toFixed(2)
|
|
9860
10001
|
]
|
|
9861
10002
|
}
|
|
9862
|
-
),
|
|
10003
|
+
)),
|
|
9863
10004
|
inputUsdNum > 0 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_jsx_runtime46.Fragment, { children: inputUsdNum > maxUsdAmount ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
9864
10005
|
"div",
|
|
9865
10006
|
{
|
|
@@ -9874,7 +10015,44 @@ function EnterAmountView({
|
|
|
9874
10015
|
style: { color: colors2.error },
|
|
9875
10016
|
children: error
|
|
9876
10017
|
}
|
|
9877
|
-
) })
|
|
10018
|
+
) }),
|
|
10019
|
+
isCheckout && selectedToken.icon_url && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2 uf-py-2", children: [
|
|
10020
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "uf-relative", children: [
|
|
10021
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
10022
|
+
"img",
|
|
10023
|
+
{
|
|
10024
|
+
src: selectedToken.icon_url,
|
|
10025
|
+
alt: selectedToken.symbol,
|
|
10026
|
+
width: 20,
|
|
10027
|
+
height: 20,
|
|
10028
|
+
className: "uf-w-5 uf-h-5 uf-rounded-full"
|
|
10029
|
+
}
|
|
10030
|
+
),
|
|
10031
|
+
selectedToken.chain_icon_url && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
10032
|
+
"img",
|
|
10033
|
+
{
|
|
10034
|
+
src: selectedToken.chain_icon_url,
|
|
10035
|
+
alt: selectedToken.chain_name,
|
|
10036
|
+
width: 10,
|
|
10037
|
+
height: 10,
|
|
10038
|
+
className: "uf-w-2.5 uf-h-2.5 uf-rounded-full uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-border",
|
|
10039
|
+
style: { borderColor: colors2.background }
|
|
10040
|
+
}
|
|
10041
|
+
)
|
|
10042
|
+
] }),
|
|
10043
|
+
/* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
|
|
10044
|
+
"span",
|
|
10045
|
+
{
|
|
10046
|
+
className: "uf-text-xs",
|
|
10047
|
+
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
10048
|
+
children: [
|
|
10049
|
+
selectedToken.symbol,
|
|
10050
|
+
" on ",
|
|
10051
|
+
selectedToken.chain_name
|
|
10052
|
+
]
|
|
10053
|
+
}
|
|
10054
|
+
)
|
|
10055
|
+
] })
|
|
9878
10056
|
] }),
|
|
9879
10057
|
/* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "uf-shrink-0 uf-pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
|
|
9880
10058
|
"button",
|
|
@@ -9902,6 +10080,18 @@ function EnterAmountView({
|
|
|
9902
10080
|
// src/components/deposits/browser-wallets/ReviewView.tsx
|
|
9903
10081
|
var import_lucide_react20 = require("lucide-react");
|
|
9904
10082
|
var import_jsx_runtime47 = require("react/jsx-runtime");
|
|
10083
|
+
var WALLET_ICONS2 = {
|
|
10084
|
+
metamask: MetamaskIcon,
|
|
10085
|
+
phantom: PhantomIcon,
|
|
10086
|
+
coinbase: CoinbaseIcon,
|
|
10087
|
+
trust: TrustIcon,
|
|
10088
|
+
rainbow: RainbowIcon,
|
|
10089
|
+
rabby: RabbyIcon,
|
|
10090
|
+
okx: OkxIcon,
|
|
10091
|
+
solflare: SolflareIcon,
|
|
10092
|
+
backpack: BackpackIcon,
|
|
10093
|
+
glow: GlowIcon
|
|
10094
|
+
};
|
|
9905
10095
|
function ReviewView({
|
|
9906
10096
|
walletInfo,
|
|
9907
10097
|
recipientAddress,
|
|
@@ -9936,30 +10126,17 @@ function ReviewView({
|
|
|
9936
10126
|
),
|
|
9937
10127
|
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "uf-flex uf-min-h-0 uf-flex-1 uf-flex-col", children: [
|
|
9938
10128
|
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "uf-min-h-0 uf-flex-1 uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: [
|
|
9939
|
-
/* @__PURE__ */ (0, import_jsx_runtime47.
|
|
9940
|
-
|
|
9941
|
-
|
|
9942
|
-
|
|
9943
|
-
|
|
9944
|
-
|
|
9945
|
-
|
|
9946
|
-
|
|
9947
|
-
|
|
9948
|
-
|
|
9949
|
-
|
|
9950
|
-
),
|
|
9951
|
-
formattedTokenAmount && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
|
|
9952
|
-
"div",
|
|
9953
|
-
{
|
|
9954
|
-
className: "uf-text-sm uf-mt-2",
|
|
9955
|
-
style: { color: colors2.foregroundMuted },
|
|
9956
|
-
children: [
|
|
9957
|
-
"\u2248 ",
|
|
9958
|
-
formattedTokenAmount
|
|
9959
|
-
]
|
|
9960
|
-
}
|
|
9961
|
-
)
|
|
9962
|
-
] }),
|
|
10129
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "uf-text-center", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
|
|
10130
|
+
"div",
|
|
10131
|
+
{
|
|
10132
|
+
className: "uf-text-4xl uf-font-medium",
|
|
10133
|
+
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
10134
|
+
children: [
|
|
10135
|
+
"$",
|
|
10136
|
+
amountUsd || "0"
|
|
10137
|
+
]
|
|
10138
|
+
}
|
|
10139
|
+
) }),
|
|
9963
10140
|
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
|
|
9964
10141
|
"div",
|
|
9965
10142
|
{
|
|
@@ -9976,7 +10153,31 @@ function ReviewView({
|
|
|
9976
10153
|
{
|
|
9977
10154
|
className: "uf-text-sm",
|
|
9978
10155
|
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
9979
|
-
children: "
|
|
10156
|
+
children: "From"
|
|
10157
|
+
}
|
|
10158
|
+
),
|
|
10159
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
10160
|
+
WALLET_ICONS2[walletInfo.icon] && (() => {
|
|
10161
|
+
const Icon2 = WALLET_ICONS2[walletInfo.icon];
|
|
10162
|
+
return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "uf-w-5 uf-h-5 uf-rounded-full uf-overflow-hidden uf-flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon2, { size: 20, variant: "color" }) });
|
|
10163
|
+
})(),
|
|
10164
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
10165
|
+
"span",
|
|
10166
|
+
{
|
|
10167
|
+
className: "uf-text-sm uf-font-medium",
|
|
10168
|
+
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
10169
|
+
children: walletInfo.name
|
|
10170
|
+
}
|
|
10171
|
+
)
|
|
10172
|
+
] })
|
|
10173
|
+
] }),
|
|
10174
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "uf-flex uf-justify-between uf-items-center", children: [
|
|
10175
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
10176
|
+
"span",
|
|
10177
|
+
{
|
|
10178
|
+
className: "uf-text-sm",
|
|
10179
|
+
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
10180
|
+
children: "You send"
|
|
9980
10181
|
}
|
|
9981
10182
|
),
|
|
9982
10183
|
/* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
@@ -9988,17 +10189,12 @@ function ReviewView({
|
|
|
9988
10189
|
className: "uf-w-5 uf-h-5 uf-rounded-full"
|
|
9989
10190
|
}
|
|
9990
10191
|
),
|
|
9991
|
-
/* @__PURE__ */ (0, import_jsx_runtime47.
|
|
10192
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
|
|
9992
10193
|
"span",
|
|
9993
10194
|
{
|
|
9994
10195
|
className: "uf-text-sm uf-font-medium",
|
|
9995
10196
|
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
9996
|
-
children:
|
|
9997
|
-
walletInfo.name,
|
|
9998
|
-
" (",
|
|
9999
|
-
truncateAddress2(walletInfo.address),
|
|
10000
|
-
")"
|
|
10001
|
-
]
|
|
10197
|
+
children: formattedTokenAmount || `$${amountUsd}`
|
|
10002
10198
|
}
|
|
10003
10199
|
)
|
|
10004
10200
|
] })
|
|
@@ -10161,7 +10357,10 @@ function ReviewView({
|
|
|
10161
10357
|
borderRadius: components.button.borderRadius,
|
|
10162
10358
|
border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
|
|
10163
10359
|
},
|
|
10164
|
-
children: isConfirming ? "
|
|
10360
|
+
children: isConfirming ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2", children: [
|
|
10361
|
+
/* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react20.Loader2, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
|
|
10362
|
+
"Confirming..."
|
|
10363
|
+
] }) : "Confirm Order"
|
|
10165
10364
|
}
|
|
10166
10365
|
) })
|
|
10167
10366
|
] })
|
|
@@ -10175,17 +10374,35 @@ function ReviewView({
|
|
|
10175
10374
|
var import_react17 = require("react");
|
|
10176
10375
|
var import_lucide_react21 = require("lucide-react");
|
|
10177
10376
|
var import_jsx_runtime48 = require("react/jsx-runtime");
|
|
10377
|
+
var SETTLE_FALLBACK_MS = 15e3;
|
|
10178
10378
|
function ConfirmingView({
|
|
10179
10379
|
isConfirming,
|
|
10180
10380
|
onClose,
|
|
10181
10381
|
executions = [],
|
|
10182
|
-
isPolling = false
|
|
10382
|
+
isPolling = false,
|
|
10383
|
+
onNewDeposit,
|
|
10384
|
+
onDone,
|
|
10385
|
+
paymentIntentStatus,
|
|
10386
|
+
amountReceivedUsd,
|
|
10387
|
+
amountReceivedUsdAtSubmission
|
|
10183
10388
|
}) {
|
|
10184
|
-
const { colors: colors2, fonts } = useTheme();
|
|
10389
|
+
const { colors: colors2, fonts, components } = useTheme();
|
|
10185
10390
|
const [containerEl, setContainerEl] = (0, import_react17.useState)(null);
|
|
10186
10391
|
const containerCallbackRef = (0, import_react17.useCallback)((el) => {
|
|
10187
10392
|
setContainerEl(el);
|
|
10188
10393
|
}, []);
|
|
10394
|
+
const [fallbackSettled, setFallbackSettled] = (0, import_react17.useState)(false);
|
|
10395
|
+
const hasExecution = executions.length > 0;
|
|
10396
|
+
const isCheckoutMode = paymentIntentStatus != null;
|
|
10397
|
+
const isPaymentComplete = paymentIntentStatus === "succeeded";
|
|
10398
|
+
const amountChanged = amountReceivedUsdAtSubmission != null && amountReceivedUsd != null && amountReceivedUsd !== amountReceivedUsdAtSubmission;
|
|
10399
|
+
const piSettled = !isCheckoutMode || isPaymentComplete || amountChanged || fallbackSettled;
|
|
10400
|
+
(0, import_react17.useEffect)(() => {
|
|
10401
|
+
if (!hasExecution || piSettled) return;
|
|
10402
|
+
const timeout = setTimeout(() => setFallbackSettled(true), SETTLE_FALLBACK_MS);
|
|
10403
|
+
return () => clearTimeout(timeout);
|
|
10404
|
+
}, [hasExecution, piSettled]);
|
|
10405
|
+
const showButtons = hasExecution && piSettled;
|
|
10189
10406
|
return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PortalContainerProvider, { value: containerEl, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
|
|
10190
10407
|
"div",
|
|
10191
10408
|
{
|
|
@@ -10198,8 +10415,8 @@ function ConfirmingView({
|
|
|
10198
10415
|
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
10199
10416
|
DepositHeader,
|
|
10200
10417
|
{
|
|
10201
|
-
title: isConfirming ? "Confirming..." : "Processing",
|
|
10202
|
-
onClose
|
|
10418
|
+
title: isConfirming ? "Confirming..." : hasExecution && isPaymentComplete ? "Payment Complete" : hasExecution ? "Deposit Received" : "Processing",
|
|
10419
|
+
onClose: isPaymentComplete && onDone ? onDone : onClose
|
|
10203
10420
|
}
|
|
10204
10421
|
),
|
|
10205
10422
|
/* @__PURE__ */ (0, import_jsx_runtime48.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_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
|
|
@@ -10226,11 +10443,70 @@ function ConfirmingView({
|
|
|
10226
10443
|
children: "Please confirm the transaction in your wallet"
|
|
10227
10444
|
}
|
|
10228
10445
|
)
|
|
10229
|
-
] }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
|
|
10446
|
+
] }) : hasExecution ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
|
|
10230
10447
|
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
10231
10448
|
import_lucide_react21.CheckCircle2,
|
|
10232
10449
|
{
|
|
10233
10450
|
className: "uf-w-12 uf-h-12 uf-mb-4",
|
|
10451
|
+
style: { color: "rgb(34, 197, 94)" }
|
|
10452
|
+
}
|
|
10453
|
+
),
|
|
10454
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
10455
|
+
"div",
|
|
10456
|
+
{
|
|
10457
|
+
className: "uf-text-lg uf-font-medium",
|
|
10458
|
+
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
10459
|
+
children: isPaymentComplete ? "Payment Complete" : "Deposit Received"
|
|
10460
|
+
}
|
|
10461
|
+
),
|
|
10462
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
10463
|
+
"div",
|
|
10464
|
+
{
|
|
10465
|
+
className: "uf-text-sm uf-mt-2 uf-text-center uf-px-6",
|
|
10466
|
+
style: { color: colors2.foregroundMuted },
|
|
10467
|
+
children: isPaymentComplete ? "Your payment has been fulfilled." : showButtons ? "Your deposit is being processed." : "Checking payment status..."
|
|
10468
|
+
}
|
|
10469
|
+
),
|
|
10470
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "uf-mt-6 uf-flex uf-flex-col uf-items-center uf-gap-3", children: !showButtons ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
10471
|
+
import_lucide_react21.Loader2,
|
|
10472
|
+
{
|
|
10473
|
+
className: "uf-w-5 uf-h-5 uf-animate-spin",
|
|
10474
|
+
style: { color: colors2.foregroundMuted }
|
|
10475
|
+
}
|
|
10476
|
+
) : isPaymentComplete && onDone ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
10477
|
+
"button",
|
|
10478
|
+
{
|
|
10479
|
+
onClick: onDone,
|
|
10480
|
+
className: "uf-w-full uf-py-3 uf-px-8 uf-text-sm uf-font-medium uf-transition-opacity hover:uf-opacity-80",
|
|
10481
|
+
style: {
|
|
10482
|
+
backgroundColor: colors2.primary,
|
|
10483
|
+
color: colors2.primaryForeground,
|
|
10484
|
+
fontFamily: fonts.medium,
|
|
10485
|
+
borderRadius: components.button.borderRadius
|
|
10486
|
+
},
|
|
10487
|
+
children: "Done"
|
|
10488
|
+
}
|
|
10489
|
+
) : onNewDeposit ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
|
|
10490
|
+
"button",
|
|
10491
|
+
{
|
|
10492
|
+
onClick: onNewDeposit,
|
|
10493
|
+
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",
|
|
10494
|
+
style: {
|
|
10495
|
+
backgroundColor: colors2.primary,
|
|
10496
|
+
color: colors2.primaryForeground,
|
|
10497
|
+
fontFamily: fonts.medium
|
|
10498
|
+
},
|
|
10499
|
+
children: [
|
|
10500
|
+
"Make another deposit",
|
|
10501
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react21.ArrowRight, { className: "uf-w-4 uf-h-4" })
|
|
10502
|
+
]
|
|
10503
|
+
}
|
|
10504
|
+
) : null })
|
|
10505
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
|
|
10506
|
+
/* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
|
|
10507
|
+
import_lucide_react21.Loader2,
|
|
10508
|
+
{
|
|
10509
|
+
className: "uf-w-12 uf-h-12 uf-animate-spin uf-mb-4",
|
|
10234
10510
|
style: { color: colors2.primary }
|
|
10235
10511
|
}
|
|
10236
10512
|
),
|
|
@@ -10247,7 +10523,7 @@ function ConfirmingView({
|
|
|
10247
10523
|
{
|
|
10248
10524
|
className: "uf-text-sm uf-mt-2 uf-text-center uf-px-6",
|
|
10249
10525
|
style: { color: colors2.foregroundMuted },
|
|
10250
|
-
children: "
|
|
10526
|
+
children: "Waiting for your deposit to be detected..."
|
|
10251
10527
|
}
|
|
10252
10528
|
)
|
|
10253
10529
|
] }) }),
|
|
@@ -10274,6 +10550,7 @@ function BrowserWalletModal({
|
|
|
10274
10550
|
depositWallet,
|
|
10275
10551
|
userId,
|
|
10276
10552
|
publishableKey,
|
|
10553
|
+
clientSecret,
|
|
10277
10554
|
assetCdnUrl,
|
|
10278
10555
|
projectName,
|
|
10279
10556
|
theme = "dark",
|
|
@@ -10282,7 +10559,13 @@ function BrowserWalletModal({
|
|
|
10282
10559
|
onDepositSuccess,
|
|
10283
10560
|
onDepositError,
|
|
10284
10561
|
amountQuickSelect = "percentage",
|
|
10285
|
-
onWalletDisconnect
|
|
10562
|
+
onWalletDisconnect,
|
|
10563
|
+
prefillAmountUsd,
|
|
10564
|
+
checkoutAmountUsd,
|
|
10565
|
+
checkoutReceivedUsd,
|
|
10566
|
+
onNewDeposit,
|
|
10567
|
+
onDone,
|
|
10568
|
+
paymentIntentStatus
|
|
10286
10569
|
}) {
|
|
10287
10570
|
const { colors: colors2, fonts, components } = useTheme();
|
|
10288
10571
|
const [step, setStep] = React26.useState("select-token");
|
|
@@ -10300,6 +10583,7 @@ function BrowserWalletModal({
|
|
|
10300
10583
|
const [tokenChainDetails, setTokenChainDetails] = React26.useState(null);
|
|
10301
10584
|
const [loadingTokenDetails, setLoadingTokenDetails] = React26.useState(false);
|
|
10302
10585
|
const [showTransactionDetails, setShowTransactionDetails] = React26.useState(false);
|
|
10586
|
+
const [receivedUsdAtSubmission, setReceivedUsdAtSubmission] = React26.useState(null);
|
|
10303
10587
|
const themeClass = theme === "dark" ? "uf-dark" : "";
|
|
10304
10588
|
const chainType = depositWallet.chain_type;
|
|
10305
10589
|
const recipientAddress = depositWallet.address;
|
|
@@ -10307,15 +10591,19 @@ function BrowserWalletModal({
|
|
|
10307
10591
|
const { executions: depositExecutions, isPolling } = useDepositPolling({
|
|
10308
10592
|
userId,
|
|
10309
10593
|
publishableKey,
|
|
10594
|
+
clientSecret,
|
|
10310
10595
|
enabled: open && hasSignedTransaction,
|
|
10311
10596
|
onDepositSuccess,
|
|
10312
10597
|
onDepositError
|
|
10313
10598
|
});
|
|
10599
|
+
const prevOpenRef = React26.useRef(false);
|
|
10314
10600
|
React26.useEffect(() => {
|
|
10315
|
-
|
|
10601
|
+
const wasOpen = prevOpenRef.current;
|
|
10602
|
+
prevOpenRef.current = open;
|
|
10603
|
+
if (open && !wasOpen) {
|
|
10316
10604
|
setStep("select-token");
|
|
10317
10605
|
setSelectedBalance(null);
|
|
10318
|
-
setAmountUsd("");
|
|
10606
|
+
setAmountUsd(prefillAmountUsd ?? "");
|
|
10319
10607
|
setError(null);
|
|
10320
10608
|
setIsConfirming(false);
|
|
10321
10609
|
setTokenChainDetails(null);
|
|
@@ -10323,7 +10611,15 @@ function BrowserWalletModal({
|
|
|
10323
10611
|
setHasSignedTransaction(false);
|
|
10324
10612
|
setIsDisconnectingWallet(false);
|
|
10325
10613
|
}
|
|
10326
|
-
}, [open]);
|
|
10614
|
+
}, [open, prefillAmountUsd]);
|
|
10615
|
+
React26.useEffect(() => {
|
|
10616
|
+
if (!prefillAmountUsd || !tokenChainDetails || step !== "input-amount") return;
|
|
10617
|
+
const minDeposit = tokenChainDetails.minimum_deposit_amount_usd || 0;
|
|
10618
|
+
const currentAmount = parseFloat(amountUsd) || 0;
|
|
10619
|
+
if (currentAmount > 0 && currentAmount < minDeposit) {
|
|
10620
|
+
setAmountUsd(minDeposit.toFixed(2));
|
|
10621
|
+
}
|
|
10622
|
+
}, [tokenChainDetails, step, prefillAmountUsd]);
|
|
10327
10623
|
React26.useEffect(() => {
|
|
10328
10624
|
if (step === "review") {
|
|
10329
10625
|
setShowTransactionDetails(false);
|
|
@@ -10441,7 +10737,7 @@ function BrowserWalletModal({
|
|
|
10441
10737
|
setError(null);
|
|
10442
10738
|
if (step === "input-amount") {
|
|
10443
10739
|
setStep("select-token");
|
|
10444
|
-
setAmountUsd("");
|
|
10740
|
+
setAmountUsd(prefillAmountUsd ?? "");
|
|
10445
10741
|
setTokenChainDetails(null);
|
|
10446
10742
|
} else if (step === "review") {
|
|
10447
10743
|
setStep("input-amount");
|
|
@@ -10527,7 +10823,6 @@ function BrowserWalletModal({
|
|
|
10527
10823
|
}
|
|
10528
10824
|
}
|
|
10529
10825
|
setIsConfirming(true);
|
|
10530
|
-
setStep("confirming");
|
|
10531
10826
|
setError(null);
|
|
10532
10827
|
try {
|
|
10533
10828
|
let txHash;
|
|
@@ -10545,16 +10840,17 @@ function BrowserWalletModal({
|
|
|
10545
10840
|
} else {
|
|
10546
10841
|
txHash = await sendEthereumTransaction(token, tokenAmount.toString());
|
|
10547
10842
|
}
|
|
10843
|
+
setReceivedUsdAtSubmission(checkoutReceivedUsd ?? "0");
|
|
10548
10844
|
setHasSignedTransaction(true);
|
|
10549
|
-
onSuccess?.(txHash);
|
|
10550
10845
|
setIsConfirming(false);
|
|
10846
|
+
setStep("confirming");
|
|
10847
|
+
onSuccess?.(txHash);
|
|
10551
10848
|
} catch (err) {
|
|
10552
10849
|
console.error("[BrowserWalletModal] Transaction error:", err);
|
|
10553
10850
|
const errorMessage = err instanceof Error ? err.message : "Transaction failed";
|
|
10554
10851
|
setError(errorMessage);
|
|
10555
10852
|
onError?.(err instanceof Error ? err : new Error(errorMessage));
|
|
10556
10853
|
setIsConfirming(false);
|
|
10557
|
-
setStep("review");
|
|
10558
10854
|
}
|
|
10559
10855
|
};
|
|
10560
10856
|
const sendEthereumTransaction = async (token, amountStr) => {
|
|
@@ -10803,7 +11099,9 @@ function BrowserWalletModal({
|
|
|
10803
11099
|
onBack: handleClose,
|
|
10804
11100
|
onClose: handleFullClose,
|
|
10805
11101
|
onDisconnectWallet: onWalletDisconnect ? () => void handleDisconnectFromSelectToken() : void 0,
|
|
10806
|
-
isDisconnectingWallet
|
|
11102
|
+
isDisconnectingWallet,
|
|
11103
|
+
checkoutAmountUsd,
|
|
11104
|
+
checkoutReceivedUsd
|
|
10807
11105
|
}
|
|
10808
11106
|
),
|
|
10809
11107
|
step === "input-amount" && selectedToken && selectedBalance && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
@@ -10824,7 +11122,9 @@ function BrowserWalletModal({
|
|
|
10824
11122
|
onReview: handleReview,
|
|
10825
11123
|
onBack: handleBack,
|
|
10826
11124
|
onClose: handleFullClose,
|
|
10827
|
-
quickSelectMode: amountQuickSelect
|
|
11125
|
+
quickSelectMode: amountQuickSelect,
|
|
11126
|
+
checkoutAmountUsd,
|
|
11127
|
+
checkoutReceivedUsd
|
|
10828
11128
|
}
|
|
10829
11129
|
),
|
|
10830
11130
|
step === "review" && selectedToken && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
|
|
@@ -10853,7 +11153,12 @@ function BrowserWalletModal({
|
|
|
10853
11153
|
isConfirming,
|
|
10854
11154
|
onClose: handleFullClose,
|
|
10855
11155
|
executions: depositExecutions,
|
|
10856
|
-
isPolling
|
|
11156
|
+
isPolling,
|
|
11157
|
+
onNewDeposit,
|
|
11158
|
+
onDone,
|
|
11159
|
+
paymentIntentStatus,
|
|
11160
|
+
amountReceivedUsd: checkoutReceivedUsd,
|
|
11161
|
+
amountReceivedUsdAtSubmission: receivedUsdAtSubmission
|
|
10857
11162
|
}
|
|
10858
11163
|
)
|
|
10859
11164
|
] })
|
|
@@ -10867,7 +11172,7 @@ function BrowserWalletModal({
|
|
|
10867
11172
|
var React27 = __toESM(require("react"));
|
|
10868
11173
|
var import_lucide_react22 = require("lucide-react");
|
|
10869
11174
|
var import_jsx_runtime50 = require("react/jsx-runtime");
|
|
10870
|
-
var
|
|
11175
|
+
var WALLET_ICONS3 = {
|
|
10871
11176
|
metamask: MetamaskIcon,
|
|
10872
11177
|
phantom: PhantomIcon,
|
|
10873
11178
|
coinbase: CoinbaseIcon,
|
|
@@ -11306,10 +11611,10 @@ function WalletSelectionModal({
|
|
|
11306
11611
|
},
|
|
11307
11612
|
children: [
|
|
11308
11613
|
/* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
|
|
11309
|
-
|
|
11614
|
+
WALLET_ICONS3[wallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
11310
11615
|
WalletIconWithNetwork,
|
|
11311
11616
|
{
|
|
11312
|
-
WalletIcon:
|
|
11617
|
+
WalletIcon: WALLET_ICONS3[wallet.id],
|
|
11313
11618
|
networks: wallet.networks,
|
|
11314
11619
|
size: 40,
|
|
11315
11620
|
className: "uf-rounded-lg"
|
|
@@ -11380,10 +11685,10 @@ function WalletSelectionModal({
|
|
|
11380
11685
|
style: { minHeight: WALLET_STEP_BODY_MIN_HEIGHT },
|
|
11381
11686
|
children: [
|
|
11382
11687
|
/* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-pb-4 uf-shrink-0", children: [
|
|
11383
|
-
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "uf-mb-2", children:
|
|
11688
|
+
/* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "uf-mb-2", children: WALLET_ICONS3[selectedWallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
|
|
11384
11689
|
WalletIconWithNetwork,
|
|
11385
11690
|
{
|
|
11386
|
-
WalletIcon:
|
|
11691
|
+
WalletIcon: WALLET_ICONS3[selectedWallet.id],
|
|
11387
11692
|
networks: selectedWallet.networks,
|
|
11388
11693
|
size: 48,
|
|
11389
11694
|
className: "uf-rounded-lg"
|
|
@@ -12186,70 +12491,743 @@ function DepositModal({
|
|
|
12186
12491
|
) });
|
|
12187
12492
|
}
|
|
12188
12493
|
|
|
12189
|
-
// src/components/
|
|
12190
|
-
var
|
|
12191
|
-
var
|
|
12494
|
+
// src/components/checkout/CheckoutModal.tsx
|
|
12495
|
+
var import_react19 = require("react");
|
|
12496
|
+
var import_lucide_react24 = require("lucide-react");
|
|
12192
12497
|
|
|
12193
|
-
// src/hooks/use-
|
|
12498
|
+
// src/hooks/use-payment-intent.ts
|
|
12194
12499
|
var import_react_query9 = require("@tanstack/react-query");
|
|
12195
12500
|
var import_core24 = require("@unifold/core");
|
|
12196
|
-
function
|
|
12501
|
+
function usePaymentIntent(params) {
|
|
12502
|
+
const {
|
|
12503
|
+
clientSecret,
|
|
12504
|
+
publishableKey,
|
|
12505
|
+
enabled = true,
|
|
12506
|
+
pollingInterval = 5e3
|
|
12507
|
+
} = params;
|
|
12197
12508
|
return (0, import_react_query9.useQuery)({
|
|
12198
|
-
queryKey: ["unifold", "
|
|
12199
|
-
queryFn: () => (0, import_core24.
|
|
12200
|
-
|
|
12201
|
-
|
|
12202
|
-
|
|
12203
|
-
refetchOnWindowFocus:
|
|
12204
|
-
|
|
12509
|
+
queryKey: ["unifold", "paymentIntent", clientSecret, publishableKey],
|
|
12510
|
+
queryFn: () => (0, import_core24.retrievePaymentIntent)(clientSecret, publishableKey),
|
|
12511
|
+
enabled: enabled && !!clientSecret && !!publishableKey,
|
|
12512
|
+
staleTime: 0,
|
|
12513
|
+
refetchInterval: pollingInterval || false,
|
|
12514
|
+
refetchOnWindowFocus: true,
|
|
12515
|
+
retry: 3,
|
|
12516
|
+
retryDelay: (attempt) => Math.min(1e3 * 2 ** attempt, 1e4)
|
|
12205
12517
|
});
|
|
12206
12518
|
}
|
|
12207
12519
|
|
|
12208
|
-
// src/hooks/use-
|
|
12520
|
+
// src/hooks/use-deposit-quote.ts
|
|
12209
12521
|
var import_react_query10 = require("@tanstack/react-query");
|
|
12210
12522
|
var import_core25 = require("@unifold/core");
|
|
12211
|
-
function
|
|
12523
|
+
function useDepositQuote(params) {
|
|
12212
12524
|
const {
|
|
12525
|
+
publishableKey,
|
|
12213
12526
|
sourceChainType,
|
|
12214
12527
|
sourceChainId,
|
|
12215
12528
|
sourceTokenAddress,
|
|
12216
|
-
|
|
12217
|
-
|
|
12529
|
+
destinationAmount,
|
|
12530
|
+
destinationChainType,
|
|
12531
|
+
destinationChainId,
|
|
12532
|
+
destinationTokenAddress,
|
|
12218
12533
|
enabled = true
|
|
12219
12534
|
} = params;
|
|
12220
|
-
const
|
|
12535
|
+
const request = {
|
|
12536
|
+
source_chain_type: sourceChainType,
|
|
12537
|
+
source_chain_id: sourceChainId,
|
|
12538
|
+
source_token_address: sourceTokenAddress,
|
|
12539
|
+
destination_amount: destinationAmount,
|
|
12540
|
+
destination_chain_type: destinationChainType,
|
|
12541
|
+
destination_chain_id: destinationChainId,
|
|
12542
|
+
destination_token_address: destinationTokenAddress
|
|
12543
|
+
};
|
|
12221
12544
|
return (0, import_react_query10.useQuery)({
|
|
12222
12545
|
queryKey: [
|
|
12223
12546
|
"unifold",
|
|
12224
|
-
"
|
|
12225
|
-
sourceChainType
|
|
12226
|
-
sourceChainId
|
|
12227
|
-
sourceTokenAddress
|
|
12547
|
+
"depositQuote",
|
|
12548
|
+
sourceChainType,
|
|
12549
|
+
sourceChainId,
|
|
12550
|
+
sourceTokenAddress,
|
|
12551
|
+
destinationAmount,
|
|
12552
|
+
destinationChainType,
|
|
12553
|
+
destinationChainId,
|
|
12554
|
+
destinationTokenAddress,
|
|
12228
12555
|
publishableKey
|
|
12229
12556
|
],
|
|
12230
|
-
queryFn:
|
|
12231
|
-
|
|
12232
|
-
|
|
12233
|
-
|
|
12234
|
-
|
|
12235
|
-
|
|
12236
|
-
|
|
12237
|
-
|
|
12238
|
-
|
|
12239
|
-
|
|
12240
|
-
|
|
12241
|
-
|
|
12242
|
-
|
|
12243
|
-
|
|
12244
|
-
|
|
12245
|
-
|
|
12246
|
-
|
|
12247
|
-
|
|
12248
|
-
|
|
12249
|
-
|
|
12250
|
-
|
|
12251
|
-
|
|
12252
|
-
|
|
12557
|
+
queryFn: () => (0, import_core25.getDepositQuote)(request, publishableKey),
|
|
12558
|
+
enabled: enabled && !!publishableKey && !!sourceChainType && !!sourceChainId && !!sourceTokenAddress && !!destinationAmount && destinationAmount !== "0" && !!destinationChainType && !!destinationChainId && !!destinationTokenAddress,
|
|
12559
|
+
staleTime: 6e4,
|
|
12560
|
+
gcTime: 5 * 6e4,
|
|
12561
|
+
refetchOnWindowFocus: false,
|
|
12562
|
+
retry: 2,
|
|
12563
|
+
retryDelay: (attempt) => Math.min(1e3 * 2 ** attempt, 5e3)
|
|
12564
|
+
});
|
|
12565
|
+
}
|
|
12566
|
+
|
|
12567
|
+
// src/components/checkout/CheckoutModal.tsx
|
|
12568
|
+
var import_jsx_runtime52 = require("react/jsx-runtime");
|
|
12569
|
+
function mapDepositAddressesToWallets(depositAddresses, pi) {
|
|
12570
|
+
return depositAddresses.map((da, idx) => ({
|
|
12571
|
+
id: da.id,
|
|
12572
|
+
chain_type: da.chain_type,
|
|
12573
|
+
address_type: da.address_type,
|
|
12574
|
+
address: da.address,
|
|
12575
|
+
destination_chain_type: pi.destination_chain_type,
|
|
12576
|
+
destination_chain_id: pi.destination_chain_id,
|
|
12577
|
+
destination_token_address: pi.destination_token_address,
|
|
12578
|
+
recipient_address: pi.recipient_address,
|
|
12579
|
+
is_primary: idx === 0
|
|
12580
|
+
}));
|
|
12581
|
+
}
|
|
12582
|
+
function SkeletonButton2() {
|
|
12583
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.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: [
|
|
12584
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
|
|
12585
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "uf-bg-muted uf-rounded-lg uf-w-9 uf-h-9" }),
|
|
12586
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "uf-space-y-1.5", children: [
|
|
12587
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "uf-h-3.5 uf-w-24 uf-bg-muted uf-rounded" }),
|
|
12588
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "uf-h-3 uf-w-32 uf-bg-muted uf-rounded" })
|
|
12589
|
+
] })
|
|
12590
|
+
] }),
|
|
12591
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react24.ChevronRight, { className: "uf-w-4 uf-h-4 uf-text-muted" }) })
|
|
12592
|
+
] });
|
|
12593
|
+
}
|
|
12594
|
+
function CheckoutModal({
|
|
12595
|
+
open,
|
|
12596
|
+
onOpenChange,
|
|
12597
|
+
clientSecret,
|
|
12598
|
+
publishableKey,
|
|
12599
|
+
modalTitle,
|
|
12600
|
+
enableConnectWallet = false,
|
|
12601
|
+
theme = "dark",
|
|
12602
|
+
onCheckoutSuccess,
|
|
12603
|
+
onCheckoutError
|
|
12604
|
+
}) {
|
|
12605
|
+
const { colors: colors2, fonts, components } = useTheme();
|
|
12606
|
+
const [view, setView] = (0, import_react19.useState)("main");
|
|
12607
|
+
const resetViewTimeoutRef = (0, import_react19.useRef)(
|
|
12608
|
+
null
|
|
12609
|
+
);
|
|
12610
|
+
const [browserWalletModalOpen, setBrowserWalletModalOpen] = (0, import_react19.useState)(false);
|
|
12611
|
+
const [browserWalletInfo, setBrowserWalletInfo] = (0, import_react19.useState)(null);
|
|
12612
|
+
const [walletSelectionModalOpen, setWalletSelectionModalOpen] = (0, import_react19.useState)(false);
|
|
12613
|
+
const [browserWalletChainType, setBrowserWalletChainType] = (0, import_react19.useState)(() => getStoredWalletChainType());
|
|
12614
|
+
const isMobileView = useIsMobileViewport();
|
|
12615
|
+
const [resolvedTheme, setResolvedTheme] = (0, import_react19.useState)(
|
|
12616
|
+
theme === "auto" ? "dark" : theme
|
|
12617
|
+
);
|
|
12618
|
+
(0, import_react19.useEffect)(() => {
|
|
12619
|
+
if (theme === "auto") {
|
|
12620
|
+
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
12621
|
+
setResolvedTheme(mediaQuery.matches ? "dark" : "light");
|
|
12622
|
+
const handler = (e) => {
|
|
12623
|
+
setResolvedTheme(e.matches ? "dark" : "light");
|
|
12624
|
+
};
|
|
12625
|
+
mediaQuery.addEventListener("change", handler);
|
|
12626
|
+
return () => mediaQuery.removeEventListener("change", handler);
|
|
12627
|
+
} else {
|
|
12628
|
+
setResolvedTheme(theme);
|
|
12629
|
+
}
|
|
12630
|
+
}, [theme]);
|
|
12631
|
+
const themeClass = resolvedTheme === "dark" ? "uf-dark" : "";
|
|
12632
|
+
const {
|
|
12633
|
+
data: paymentIntent,
|
|
12634
|
+
isLoading: piLoading,
|
|
12635
|
+
error: piError
|
|
12636
|
+
} = usePaymentIntent({
|
|
12637
|
+
clientSecret,
|
|
12638
|
+
publishableKey,
|
|
12639
|
+
enabled: open && !!clientSecret,
|
|
12640
|
+
pollingInterval: 5e3
|
|
12641
|
+
});
|
|
12642
|
+
const { projectConfig } = useProjectConfig({
|
|
12643
|
+
publishableKey,
|
|
12644
|
+
enabled: open
|
|
12645
|
+
});
|
|
12646
|
+
const prevStatusRef = (0, import_react19.useRef)(null);
|
|
12647
|
+
(0, import_react19.useEffect)(() => {
|
|
12648
|
+
if (!paymentIntent) return;
|
|
12649
|
+
const prev = prevStatusRef.current;
|
|
12650
|
+
prevStatusRef.current = paymentIntent.status;
|
|
12651
|
+
if (prev && prev !== paymentIntent.status && paymentIntent.status === "succeeded") {
|
|
12652
|
+
if (!browserWalletModalOpen) {
|
|
12653
|
+
setView("main");
|
|
12654
|
+
}
|
|
12655
|
+
onCheckoutSuccess?.({
|
|
12656
|
+
paymentIntentId: paymentIntent.id,
|
|
12657
|
+
status: paymentIntent.status
|
|
12658
|
+
});
|
|
12659
|
+
}
|
|
12660
|
+
}, [paymentIntent, onCheckoutSuccess, browserWalletModalOpen]);
|
|
12661
|
+
const wallets = (0, import_react19.useMemo)(() => {
|
|
12662
|
+
if (!paymentIntent) return [];
|
|
12663
|
+
return mapDepositAddressesToWallets(
|
|
12664
|
+
paymentIntent.deposit_addresses,
|
|
12665
|
+
paymentIntent
|
|
12666
|
+
);
|
|
12667
|
+
}, [paymentIntent]);
|
|
12668
|
+
const formatCryptoAmount = (0, import_react19.useMemo)(() => {
|
|
12669
|
+
if (!paymentIntent) return (_) => "";
|
|
12670
|
+
const decimals = paymentIntent.destination_token_decimals ?? 6;
|
|
12671
|
+
const symbol = paymentIntent.currency.toUpperCase();
|
|
12672
|
+
return (baseUnits) => {
|
|
12673
|
+
const num = Number(baseUnits) / 10 ** decimals;
|
|
12674
|
+
const formatted = num % 1 === 0 ? num.toFixed(0) : num.toFixed(2);
|
|
12675
|
+
return `${formatted} ${symbol}`;
|
|
12676
|
+
};
|
|
12677
|
+
}, [paymentIntent]);
|
|
12678
|
+
const remainingAmountUsd = (0, import_react19.useMemo)(() => {
|
|
12679
|
+
if (!paymentIntent) return void 0;
|
|
12680
|
+
const total = parseFloat(paymentIntent.amount_usd);
|
|
12681
|
+
const received = parseFloat(paymentIntent.amount_received_usd);
|
|
12682
|
+
if (isNaN(total) || isNaN(received)) return paymentIntent.amount_usd;
|
|
12683
|
+
const remaining = total - received;
|
|
12684
|
+
return remaining > 0 ? remaining.toFixed(2) : "0.00";
|
|
12685
|
+
}, [paymentIntent]);
|
|
12686
|
+
const remainingCrypto = (0, import_react19.useMemo)(() => {
|
|
12687
|
+
if (!paymentIntent) return void 0;
|
|
12688
|
+
const total = BigInt(paymentIntent.amount);
|
|
12689
|
+
const received = BigInt(paymentIntent.amount_received);
|
|
12690
|
+
const remaining = total - received;
|
|
12691
|
+
return remaining > 0n ? remaining.toString() : "0";
|
|
12692
|
+
}, [paymentIntent]);
|
|
12693
|
+
const [selectedSource, setSelectedSource] = (0, import_react19.useState)(null);
|
|
12694
|
+
const quoteDestinationAmount = (0, import_react19.useMemo)(() => {
|
|
12695
|
+
if (!paymentIntent || !selectedSource) return "0";
|
|
12696
|
+
const remaining = BigInt(paymentIntent.amount) - BigInt(paymentIntent.amount_received);
|
|
12697
|
+
const totalBaseUnits = Number(paymentIntent.amount);
|
|
12698
|
+
const totalUsd = parseFloat(paymentIntent.amount_usd);
|
|
12699
|
+
const baseUnitsPerUsd = totalUsd > 0 ? totalBaseUnits / totalUsd : 0;
|
|
12700
|
+
const minUsd = Math.max(selectedSource.minimumDepositAmountUsd, 3);
|
|
12701
|
+
const minDepositBaseUnits = BigInt(Math.ceil(minUsd * baseUnitsPerUsd));
|
|
12702
|
+
const effective = remaining > minDepositBaseUnits ? remaining : minDepositBaseUnits;
|
|
12703
|
+
return effective > 0n ? effective.toString() : "0";
|
|
12704
|
+
}, [paymentIntent, selectedSource]);
|
|
12705
|
+
const { data: sourceQuote } = useDepositQuote({
|
|
12706
|
+
publishableKey,
|
|
12707
|
+
sourceChainType: selectedSource?.chainType ?? "",
|
|
12708
|
+
sourceChainId: selectedSource?.chainId ?? "",
|
|
12709
|
+
sourceTokenAddress: selectedSource?.tokenAddress ?? "",
|
|
12710
|
+
destinationAmount: quoteDestinationAmount,
|
|
12711
|
+
destinationChainType: paymentIntent?.destination_chain_type ?? "",
|
|
12712
|
+
destinationChainId: paymentIntent?.destination_chain_id ?? "",
|
|
12713
|
+
destinationTokenAddress: paymentIntent?.destination_token_address ?? "",
|
|
12714
|
+
enabled: open && view === "transfer" && !!paymentIntent && !!selectedSource && quoteDestinationAmount !== "0"
|
|
12715
|
+
});
|
|
12716
|
+
const handleBrowserWalletClick = (0, import_react19.useCallback)(
|
|
12717
|
+
(walletInfo) => {
|
|
12718
|
+
const walletChainType = walletInfo.type === "phantom-solana" || walletInfo.type === "solflare" || walletInfo.type === "backpack" || walletInfo.type === "glow" ? "solana" : "ethereum";
|
|
12719
|
+
setStoredWalletChainType(walletChainType);
|
|
12720
|
+
setBrowserWalletChainType(walletChainType);
|
|
12721
|
+
const matchingDepositWallet = wallets.find(
|
|
12722
|
+
(w) => w.chain_type === walletChainType
|
|
12723
|
+
);
|
|
12724
|
+
if (!matchingDepositWallet) {
|
|
12725
|
+
onCheckoutError?.({
|
|
12726
|
+
message: `Unable to pay from ${walletChainType}. Please try a different wallet.`,
|
|
12727
|
+
code: "NO_DEPOSIT_ADDRESS"
|
|
12728
|
+
});
|
|
12729
|
+
return;
|
|
12730
|
+
}
|
|
12731
|
+
setBrowserWalletInfo({
|
|
12732
|
+
...walletInfo,
|
|
12733
|
+
depositWallet: matchingDepositWallet
|
|
12734
|
+
});
|
|
12735
|
+
setBrowserWalletModalOpen(true);
|
|
12736
|
+
},
|
|
12737
|
+
[wallets, onCheckoutError]
|
|
12738
|
+
);
|
|
12739
|
+
const handleWalletConnectClick = (0, import_react19.useCallback)(() => {
|
|
12740
|
+
setWalletSelectionModalOpen(true);
|
|
12741
|
+
}, []);
|
|
12742
|
+
const handleWalletConnected = (0, import_react19.useCallback)(
|
|
12743
|
+
(walletInfo) => {
|
|
12744
|
+
const walletChainType = walletInfo.type === "phantom-solana" || walletInfo.type === "solflare" || walletInfo.type === "backpack" || walletInfo.type === "glow" ? "solana" : "ethereum";
|
|
12745
|
+
setStoredWalletChainType(walletChainType);
|
|
12746
|
+
setBrowserWalletChainType(walletChainType);
|
|
12747
|
+
const matchingDepositWallet = wallets.find(
|
|
12748
|
+
(w) => w.chain_type === walletChainType
|
|
12749
|
+
);
|
|
12750
|
+
if (!matchingDepositWallet) {
|
|
12751
|
+
onCheckoutError?.({
|
|
12752
|
+
message: `Unable to pay from ${walletChainType}. Please try a different wallet.`,
|
|
12753
|
+
code: "NO_DEPOSIT_ADDRESS"
|
|
12754
|
+
});
|
|
12755
|
+
setWalletSelectionModalOpen(false);
|
|
12756
|
+
return;
|
|
12757
|
+
}
|
|
12758
|
+
setBrowserWalletInfo({
|
|
12759
|
+
...walletInfo,
|
|
12760
|
+
depositWallet: matchingDepositWallet
|
|
12761
|
+
});
|
|
12762
|
+
setWalletSelectionModalOpen(false);
|
|
12763
|
+
setBrowserWalletModalOpen(true);
|
|
12764
|
+
},
|
|
12765
|
+
[wallets, onCheckoutError]
|
|
12766
|
+
);
|
|
12767
|
+
const handleWalletDisconnect = (0, import_react19.useCallback)(() => {
|
|
12768
|
+
setUserDisconnectedWallet(true);
|
|
12769
|
+
clearStoredWalletChainType();
|
|
12770
|
+
setBrowserWalletChainType(void 0);
|
|
12771
|
+
setBrowserWalletInfo(null);
|
|
12772
|
+
setBrowserWalletModalOpen(false);
|
|
12773
|
+
}, []);
|
|
12774
|
+
const handleClose = (0, import_react19.useCallback)(() => {
|
|
12775
|
+
onOpenChange(false);
|
|
12776
|
+
if (resetViewTimeoutRef.current) {
|
|
12777
|
+
clearTimeout(resetViewTimeoutRef.current);
|
|
12778
|
+
}
|
|
12779
|
+
resetViewTimeoutRef.current = setTimeout(() => {
|
|
12780
|
+
setView("main");
|
|
12781
|
+
setBrowserWalletInfo(null);
|
|
12782
|
+
resetViewTimeoutRef.current = null;
|
|
12783
|
+
}, 200);
|
|
12784
|
+
}, [onOpenChange]);
|
|
12785
|
+
(0, import_react19.useLayoutEffect)(() => {
|
|
12786
|
+
if (!open) return;
|
|
12787
|
+
if (resetViewTimeoutRef.current) {
|
|
12788
|
+
clearTimeout(resetViewTimeoutRef.current);
|
|
12789
|
+
resetViewTimeoutRef.current = null;
|
|
12790
|
+
}
|
|
12791
|
+
setView("main");
|
|
12792
|
+
setBrowserWalletInfo(null);
|
|
12793
|
+
}, [open]);
|
|
12794
|
+
(0, import_react19.useEffect)(
|
|
12795
|
+
() => () => {
|
|
12796
|
+
if (resetViewTimeoutRef.current) {
|
|
12797
|
+
clearTimeout(resetViewTimeoutRef.current);
|
|
12798
|
+
}
|
|
12799
|
+
},
|
|
12800
|
+
[]
|
|
12801
|
+
);
|
|
12802
|
+
const handleBack = (0, import_react19.useCallback)(() => {
|
|
12803
|
+
setView("main");
|
|
12804
|
+
}, []);
|
|
12805
|
+
const poweredByFooter = /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
12806
|
+
PoweredByUnifold,
|
|
12807
|
+
{
|
|
12808
|
+
color: colors2.foregroundMuted,
|
|
12809
|
+
className: "uf-flex uf-justify-center uf-shrink-0"
|
|
12810
|
+
}
|
|
12811
|
+
) });
|
|
12812
|
+
const progressSection = paymentIntent ? (() => {
|
|
12813
|
+
const received = parseFloat(paymentIntent.amount_received_usd);
|
|
12814
|
+
const total = parseFloat(paymentIntent.amount_usd);
|
|
12815
|
+
const remaining = Math.max(total - received, 0);
|
|
12816
|
+
const pct = total > 0 ? Math.min(received / total * 100, 100) : 0;
|
|
12817
|
+
const hasPartial = received > 0;
|
|
12818
|
+
const amountStr = paymentIntent.amount_usd;
|
|
12819
|
+
const dynamicFontSize = `${Math.max(3.75 - amountStr.length * 0.15, 2)}rem`;
|
|
12820
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "uf-text-center uf-py-2 uf-space-y-1", children: [
|
|
12821
|
+
paymentIntent.description && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
12822
|
+
"div",
|
|
12823
|
+
{
|
|
12824
|
+
className: "uf-text-xs",
|
|
12825
|
+
style: {
|
|
12826
|
+
color: colors2.foregroundMuted,
|
|
12827
|
+
fontFamily: fonts.regular
|
|
12828
|
+
},
|
|
12829
|
+
children: paymentIntent.description
|
|
12830
|
+
}
|
|
12831
|
+
),
|
|
12832
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-center", children: [
|
|
12833
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
12834
|
+
"span",
|
|
12835
|
+
{
|
|
12836
|
+
className: "uf-mr-1",
|
|
12837
|
+
style: {
|
|
12838
|
+
fontSize: `calc(${dynamicFontSize} * 0.6)`,
|
|
12839
|
+
color: colors2.foregroundMuted,
|
|
12840
|
+
fontFamily: fonts.regular
|
|
12841
|
+
},
|
|
12842
|
+
children: "$"
|
|
12843
|
+
}
|
|
12844
|
+
),
|
|
12845
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
12846
|
+
"span",
|
|
12847
|
+
{
|
|
12848
|
+
style: {
|
|
12849
|
+
fontSize: dynamicFontSize,
|
|
12850
|
+
color: colors2.foreground,
|
|
12851
|
+
fontFamily: fonts.regular,
|
|
12852
|
+
lineHeight: 1.1
|
|
12853
|
+
},
|
|
12854
|
+
children: amountStr
|
|
12855
|
+
}
|
|
12856
|
+
)
|
|
12857
|
+
] }),
|
|
12858
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
12859
|
+
"div",
|
|
12860
|
+
{
|
|
12861
|
+
className: "uf-text-xs",
|
|
12862
|
+
style: {
|
|
12863
|
+
color: colors2.foregroundMuted,
|
|
12864
|
+
fontFamily: fonts.regular
|
|
12865
|
+
},
|
|
12866
|
+
children: paymentIntent.currency.toUpperCase()
|
|
12867
|
+
}
|
|
12868
|
+
),
|
|
12869
|
+
hasPartial && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "uf-pt-2 uf-space-y-1.5", children: [
|
|
12870
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
12871
|
+
"div",
|
|
12872
|
+
{
|
|
12873
|
+
className: "uf-w-full uf-h-1.5 uf-rounded-full uf-overflow-hidden",
|
|
12874
|
+
style: { backgroundColor: colors2.border },
|
|
12875
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
12876
|
+
"div",
|
|
12877
|
+
{
|
|
12878
|
+
className: "uf-h-full uf-rounded-full uf-transition-all uf-duration-500",
|
|
12879
|
+
style: {
|
|
12880
|
+
width: `${pct}%`,
|
|
12881
|
+
backgroundColor: paymentIntent.status === "succeeded" ? "rgb(34, 197, 94)" : colors2.primary
|
|
12882
|
+
}
|
|
12883
|
+
}
|
|
12884
|
+
)
|
|
12885
|
+
}
|
|
12886
|
+
),
|
|
12887
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
|
|
12888
|
+
"div",
|
|
12889
|
+
{
|
|
12890
|
+
className: "uf-text-xs",
|
|
12891
|
+
style: {
|
|
12892
|
+
color: colors2.foregroundMuted,
|
|
12893
|
+
fontFamily: fonts.regular
|
|
12894
|
+
},
|
|
12895
|
+
children: [
|
|
12896
|
+
"$",
|
|
12897
|
+
paymentIntent.amount_received_usd,
|
|
12898
|
+
" / $",
|
|
12899
|
+
amountStr,
|
|
12900
|
+
" received",
|
|
12901
|
+
remaining > 0 && paymentIntent.status !== "succeeded" && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("span", { style: { color: colors2.foreground, fontFamily: fonts.medium }, children: [
|
|
12902
|
+
" ",
|
|
12903
|
+
"\xB7 $",
|
|
12904
|
+
remaining.toFixed(2),
|
|
12905
|
+
" remaining"
|
|
12906
|
+
] })
|
|
12907
|
+
]
|
|
12908
|
+
}
|
|
12909
|
+
)
|
|
12910
|
+
] }),
|
|
12911
|
+
paymentIntent.status !== "requires_payment" && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "uf-pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
12912
|
+
"span",
|
|
12913
|
+
{
|
|
12914
|
+
className: "uf-text-xs uf-font-medium uf-px-2.5 uf-py-1 uf-rounded-full uf-inline-block",
|
|
12915
|
+
style: {
|
|
12916
|
+
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)",
|
|
12917
|
+
color: paymentIntent.status === "succeeded" ? "rgb(34, 197, 94)" : paymentIntent.status === "processing" ? "rgb(59, 130, 246)" : "rgb(239, 68, 68)",
|
|
12918
|
+
fontFamily: fonts.medium
|
|
12919
|
+
},
|
|
12920
|
+
children: paymentIntent.status === "succeeded" ? "Payment Complete" : paymentIntent.status === "processing" ? "Partial Payment Received" : paymentIntent.status === "canceled" ? "Canceled" : paymentIntent.status === "expired" ? "Expired" : paymentIntent.status
|
|
12921
|
+
}
|
|
12922
|
+
) })
|
|
12923
|
+
] });
|
|
12924
|
+
})() : null;
|
|
12925
|
+
return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(PortalContainerProvider, { value: null, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Dialog, { open, onOpenChange: handleClose, modal: true, children: [
|
|
12926
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
12927
|
+
DialogContent,
|
|
12928
|
+
{
|
|
12929
|
+
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}`,
|
|
12930
|
+
style: { backgroundColor: colors2.background },
|
|
12931
|
+
onPointerDownOutside: (e) => e.preventDefault(),
|
|
12932
|
+
onInteractOutside: (e) => e.preventDefault(),
|
|
12933
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ThemeStyleInjector, { children: view === "main" ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
|
|
12934
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
12935
|
+
DepositHeader,
|
|
12936
|
+
{
|
|
12937
|
+
title: modalTitle || "Checkout",
|
|
12938
|
+
showClose: true,
|
|
12939
|
+
onClose: handleClose
|
|
12940
|
+
}
|
|
12941
|
+
),
|
|
12942
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
|
|
12943
|
+
piLoading ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "uf-space-y-3", children: [
|
|
12944
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
12945
|
+
"div",
|
|
12946
|
+
{
|
|
12947
|
+
className: "uf-rounded-xl uf-p-4 uf-animate-pulse",
|
|
12948
|
+
style: {
|
|
12949
|
+
backgroundColor: components.card.backgroundColor,
|
|
12950
|
+
borderRadius: components.card.borderRadius,
|
|
12951
|
+
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
12952
|
+
},
|
|
12953
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-gap-2", children: [
|
|
12954
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
12955
|
+
"div",
|
|
12956
|
+
{
|
|
12957
|
+
className: "uf-h-8 uf-w-24 uf-rounded",
|
|
12958
|
+
style: {
|
|
12959
|
+
backgroundColor: components.card.borderColor
|
|
12960
|
+
}
|
|
12961
|
+
}
|
|
12962
|
+
),
|
|
12963
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
12964
|
+
"div",
|
|
12965
|
+
{
|
|
12966
|
+
className: "uf-h-4 uf-w-16 uf-rounded",
|
|
12967
|
+
style: {
|
|
12968
|
+
backgroundColor: components.card.borderColor
|
|
12969
|
+
}
|
|
12970
|
+
}
|
|
12971
|
+
)
|
|
12972
|
+
] })
|
|
12973
|
+
}
|
|
12974
|
+
),
|
|
12975
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(SkeletonButton2, {}),
|
|
12976
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(SkeletonButton2, {})
|
|
12977
|
+
] }) : piError ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
|
|
12978
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.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_runtime52.jsx)(import_lucide_react24.AlertTriangle, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
|
|
12979
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
12980
|
+
"h3",
|
|
12981
|
+
{
|
|
12982
|
+
className: "uf-text-lg uf-font-semibold uf-mb-2",
|
|
12983
|
+
style: {
|
|
12984
|
+
color: colors2.foreground,
|
|
12985
|
+
fontFamily: fonts.semibold
|
|
12986
|
+
},
|
|
12987
|
+
children: "Unable to Load Checkout"
|
|
12988
|
+
}
|
|
12989
|
+
),
|
|
12990
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
12991
|
+
"p",
|
|
12992
|
+
{
|
|
12993
|
+
className: "uf-text-sm uf-max-w-[280px]",
|
|
12994
|
+
style: {
|
|
12995
|
+
color: colors2.foregroundMuted,
|
|
12996
|
+
fontFamily: fonts.regular
|
|
12997
|
+
},
|
|
12998
|
+
children: piError instanceof Error ? piError.message : "Something went wrong. Please try again."
|
|
12999
|
+
}
|
|
13000
|
+
)
|
|
13001
|
+
] }) : paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "uf-space-y-3", children: [
|
|
13002
|
+
progressSection,
|
|
13003
|
+
(paymentIntent.status === "requires_payment" || paymentIntent.status === "processing") && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
|
|
13004
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
13005
|
+
TransferCryptoButton,
|
|
13006
|
+
{
|
|
13007
|
+
onClick: () => setView("transfer"),
|
|
13008
|
+
title: "Transfer Crypto",
|
|
13009
|
+
subtitle: "Send from any wallet or exchange",
|
|
13010
|
+
featuredTokens: projectConfig?.transfer_crypto.networks
|
|
13011
|
+
}
|
|
13012
|
+
),
|
|
13013
|
+
enableConnectWallet && !isMobileView && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
13014
|
+
BrowserWalletButton,
|
|
13015
|
+
{
|
|
13016
|
+
onClick: handleBrowserWalletClick,
|
|
13017
|
+
onConnectClick: handleWalletConnectClick,
|
|
13018
|
+
onDisconnect: handleWalletDisconnect,
|
|
13019
|
+
chainType: browserWalletChainType,
|
|
13020
|
+
publishableKey
|
|
13021
|
+
}
|
|
13022
|
+
)
|
|
13023
|
+
] })
|
|
13024
|
+
] }) : null,
|
|
13025
|
+
poweredByFooter
|
|
13026
|
+
] })
|
|
13027
|
+
] }) : view === "transfer" ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
|
|
13028
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
13029
|
+
DepositHeader,
|
|
13030
|
+
{
|
|
13031
|
+
title: `Pay $${remainingAmountUsd ?? paymentIntent?.amount_usd ?? ""}`,
|
|
13032
|
+
showBack: true,
|
|
13033
|
+
onBack: handleBack,
|
|
13034
|
+
onClose: handleClose
|
|
13035
|
+
}
|
|
13036
|
+
),
|
|
13037
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
|
|
13038
|
+
paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
|
|
13039
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
|
|
13040
|
+
"div",
|
|
13041
|
+
{
|
|
13042
|
+
className: "uf-rounded-lg uf-px-3 uf-py-2 uf-flex uf-items-center uf-justify-between",
|
|
13043
|
+
style: {
|
|
13044
|
+
backgroundColor: components.card.backgroundColor,
|
|
13045
|
+
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`,
|
|
13046
|
+
borderRadius: components.card.borderRadius
|
|
13047
|
+
},
|
|
13048
|
+
children: [
|
|
13049
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
13050
|
+
"span",
|
|
13051
|
+
{
|
|
13052
|
+
className: "uf-text-xs",
|
|
13053
|
+
style: {
|
|
13054
|
+
color: colors2.foregroundMuted,
|
|
13055
|
+
fontFamily: fonts.regular
|
|
13056
|
+
},
|
|
13057
|
+
children: parseFloat(paymentIntent.amount_received_usd) > 0 ? `$${paymentIntent.amount_received_usd} / $${paymentIntent.amount_usd} received` : "Amount due"
|
|
13058
|
+
}
|
|
13059
|
+
),
|
|
13060
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
|
|
13061
|
+
"span",
|
|
13062
|
+
{
|
|
13063
|
+
className: "uf-text-sm uf-font-semibold",
|
|
13064
|
+
style: {
|
|
13065
|
+
color: colors2.foreground,
|
|
13066
|
+
fontFamily: fonts.semibold
|
|
13067
|
+
},
|
|
13068
|
+
children: [
|
|
13069
|
+
formatCryptoAmount(remainingCrypto ?? paymentIntent.amount),
|
|
13070
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
|
|
13071
|
+
"span",
|
|
13072
|
+
{
|
|
13073
|
+
className: "uf-text-xs uf-font-normal uf-ml-1",
|
|
13074
|
+
style: { color: colors2.foregroundMuted },
|
|
13075
|
+
children: [
|
|
13076
|
+
"($",
|
|
13077
|
+
remainingAmountUsd ?? paymentIntent.amount_usd,
|
|
13078
|
+
")"
|
|
13079
|
+
]
|
|
13080
|
+
}
|
|
13081
|
+
)
|
|
13082
|
+
]
|
|
13083
|
+
}
|
|
13084
|
+
)
|
|
13085
|
+
]
|
|
13086
|
+
}
|
|
13087
|
+
),
|
|
13088
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
13089
|
+
TransferCryptoSingleInput,
|
|
13090
|
+
{
|
|
13091
|
+
userId: paymentIntent.user_id || "",
|
|
13092
|
+
publishableKey,
|
|
13093
|
+
clientSecret,
|
|
13094
|
+
recipientAddress: paymentIntent.recipient_address,
|
|
13095
|
+
destinationChainType: paymentIntent.destination_chain_type,
|
|
13096
|
+
destinationChainId: paymentIntent.destination_chain_id,
|
|
13097
|
+
destinationTokenAddress: paymentIntent.destination_token_address,
|
|
13098
|
+
depositConfirmationMode: "auto_ui",
|
|
13099
|
+
wallets,
|
|
13100
|
+
onSourceTokenChange: setSelectedSource,
|
|
13101
|
+
checkoutQuote: sourceQuote ? {
|
|
13102
|
+
sourceAmount: sourceQuote.source_amount,
|
|
13103
|
+
sourceTokenDecimals: sourceQuote.source_token_decimals,
|
|
13104
|
+
sourceTokenSymbol: sourceQuote.source_token_symbol,
|
|
13105
|
+
sourceAmountUsd: sourceQuote.source_amount_usd
|
|
13106
|
+
} : null
|
|
13107
|
+
}
|
|
13108
|
+
)
|
|
13109
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(SkeletonButton2, {}),
|
|
13110
|
+
poweredByFooter
|
|
13111
|
+
] })
|
|
13112
|
+
] }) : null })
|
|
13113
|
+
}
|
|
13114
|
+
),
|
|
13115
|
+
/* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
13116
|
+
WalletSelectionModal,
|
|
13117
|
+
{
|
|
13118
|
+
open: walletSelectionModalOpen,
|
|
13119
|
+
onOpenChange: setWalletSelectionModalOpen,
|
|
13120
|
+
onWalletConnected: handleWalletConnected,
|
|
13121
|
+
onClose: () => setWalletSelectionModalOpen(false),
|
|
13122
|
+
theme: resolvedTheme
|
|
13123
|
+
}
|
|
13124
|
+
),
|
|
13125
|
+
browserWalletInfo && browserWalletInfo.depositWallet && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
|
|
13126
|
+
BrowserWalletModal,
|
|
13127
|
+
{
|
|
13128
|
+
open: browserWalletModalOpen,
|
|
13129
|
+
onOpenChange: setBrowserWalletModalOpen,
|
|
13130
|
+
onFullClose: handleClose,
|
|
13131
|
+
walletInfo: browserWalletInfo,
|
|
13132
|
+
depositWallet: browserWalletInfo.depositWallet,
|
|
13133
|
+
userId: paymentIntent?.user_id || "",
|
|
13134
|
+
publishableKey,
|
|
13135
|
+
clientSecret,
|
|
13136
|
+
theme: resolvedTheme,
|
|
13137
|
+
prefillAmountUsd: remainingAmountUsd,
|
|
13138
|
+
checkoutAmountUsd: paymentIntent?.amount_usd,
|
|
13139
|
+
checkoutReceivedUsd: paymentIntent?.amount_received_usd,
|
|
13140
|
+
onSuccess: (txHash) => {
|
|
13141
|
+
onCheckoutSuccess?.({
|
|
13142
|
+
paymentIntentId: paymentIntent?.id || "",
|
|
13143
|
+
status: "processing"
|
|
13144
|
+
});
|
|
13145
|
+
},
|
|
13146
|
+
onError: (error) => {
|
|
13147
|
+
onCheckoutError?.({
|
|
13148
|
+
message: error.message,
|
|
13149
|
+
error
|
|
13150
|
+
});
|
|
13151
|
+
},
|
|
13152
|
+
onWalletDisconnect: handleWalletDisconnect,
|
|
13153
|
+
onNewDeposit: () => {
|
|
13154
|
+
setBrowserWalletModalOpen(false);
|
|
13155
|
+
setView("main");
|
|
13156
|
+
},
|
|
13157
|
+
onDone: () => {
|
|
13158
|
+
setBrowserWalletModalOpen(false);
|
|
13159
|
+
setView("main");
|
|
13160
|
+
},
|
|
13161
|
+
paymentIntentStatus: paymentIntent?.status
|
|
13162
|
+
}
|
|
13163
|
+
)
|
|
13164
|
+
] }) });
|
|
13165
|
+
}
|
|
13166
|
+
|
|
13167
|
+
// src/components/withdrawals/WithdrawModal.tsx
|
|
13168
|
+
var import_react23 = require("react");
|
|
13169
|
+
var import_lucide_react27 = require("lucide-react");
|
|
13170
|
+
|
|
13171
|
+
// src/hooks/use-supported-destination-tokens.ts
|
|
13172
|
+
var import_react_query11 = require("@tanstack/react-query");
|
|
13173
|
+
var import_core26 = require("@unifold/core");
|
|
13174
|
+
function useSupportedDestinationTokens(publishableKey, enabled = true) {
|
|
13175
|
+
return (0, import_react_query11.useQuery)({
|
|
13176
|
+
queryKey: ["unifold", "supportedDestinationTokens", publishableKey],
|
|
13177
|
+
queryFn: () => (0, import_core26.getSupportedDestinationTokens)(publishableKey),
|
|
13178
|
+
staleTime: 1e3 * 60 * 5,
|
|
13179
|
+
gcTime: 1e3 * 60 * 30,
|
|
13180
|
+
refetchOnMount: false,
|
|
13181
|
+
refetchOnWindowFocus: false,
|
|
13182
|
+
enabled
|
|
13183
|
+
});
|
|
13184
|
+
}
|
|
13185
|
+
|
|
13186
|
+
// src/hooks/use-source-token-validation.ts
|
|
13187
|
+
var import_react_query12 = require("@tanstack/react-query");
|
|
13188
|
+
var import_core27 = require("@unifold/core");
|
|
13189
|
+
function useSourceTokenValidation(params) {
|
|
13190
|
+
const {
|
|
13191
|
+
sourceChainType,
|
|
13192
|
+
sourceChainId,
|
|
13193
|
+
sourceTokenAddress,
|
|
13194
|
+
sourceTokenSymbol,
|
|
13195
|
+
publishableKey,
|
|
13196
|
+
enabled = true
|
|
13197
|
+
} = params;
|
|
13198
|
+
const hasParams = !!sourceChainType && !!sourceChainId && !!sourceTokenAddress;
|
|
13199
|
+
return (0, import_react_query12.useQuery)({
|
|
13200
|
+
queryKey: [
|
|
13201
|
+
"unifold",
|
|
13202
|
+
"sourceTokenValidation",
|
|
13203
|
+
sourceChainType ?? null,
|
|
13204
|
+
sourceChainId ?? null,
|
|
13205
|
+
sourceTokenAddress ?? null,
|
|
13206
|
+
publishableKey
|
|
13207
|
+
],
|
|
13208
|
+
queryFn: async () => {
|
|
13209
|
+
const res = await (0, import_core27.getSupportedDepositTokens)(publishableKey);
|
|
13210
|
+
let matchedMinUsd = null;
|
|
13211
|
+
let matchedProcessingTime = null;
|
|
13212
|
+
let matchedSlippage = null;
|
|
13213
|
+
let matchedPriceImpact = null;
|
|
13214
|
+
const found = res.data.some(
|
|
13215
|
+
(token) => token.chains.some((chain) => {
|
|
13216
|
+
const match = chain.chain_type === sourceChainType && chain.chain_id === sourceChainId && chain.token_address.toLowerCase() === sourceTokenAddress.toLowerCase();
|
|
13217
|
+
if (match) {
|
|
13218
|
+
matchedMinUsd = chain.minimum_deposit_amount_usd;
|
|
13219
|
+
matchedProcessingTime = chain.estimated_processing_time;
|
|
13220
|
+
matchedSlippage = chain.max_slippage_percent;
|
|
13221
|
+
matchedPriceImpact = chain.estimated_price_impact_percent;
|
|
13222
|
+
}
|
|
13223
|
+
return match;
|
|
13224
|
+
})
|
|
13225
|
+
);
|
|
13226
|
+
return {
|
|
13227
|
+
isSupported: found,
|
|
13228
|
+
minimumAmountUsd: matchedMinUsd,
|
|
13229
|
+
estimatedProcessingTime: matchedProcessingTime,
|
|
13230
|
+
maxSlippagePercent: matchedSlippage,
|
|
12253
13231
|
priceImpactPercent: matchedPriceImpact,
|
|
12254
13232
|
errorMessage: found ? null : `${sourceTokenSymbol || "Source token"} is not a supported withdrawal token. Supported tokens include USDC, USDT, and other stablecoins.`
|
|
12255
13233
|
};
|
|
@@ -12263,8 +13241,8 @@ function useSourceTokenValidation(params) {
|
|
|
12263
13241
|
}
|
|
12264
13242
|
|
|
12265
13243
|
// src/hooks/use-address-balance.ts
|
|
12266
|
-
var
|
|
12267
|
-
var
|
|
13244
|
+
var import_react_query13 = require("@tanstack/react-query");
|
|
13245
|
+
var import_core28 = require("@unifold/core");
|
|
12268
13246
|
function useAddressBalance(params) {
|
|
12269
13247
|
const {
|
|
12270
13248
|
address,
|
|
@@ -12275,7 +13253,7 @@ function useAddressBalance(params) {
|
|
|
12275
13253
|
enabled = true
|
|
12276
13254
|
} = params;
|
|
12277
13255
|
const hasParams = !!address && !!chainType && !!chainId && !!tokenAddress;
|
|
12278
|
-
return (0,
|
|
13256
|
+
return (0, import_react_query13.useQuery)({
|
|
12279
13257
|
queryKey: [
|
|
12280
13258
|
"unifold",
|
|
12281
13259
|
"addressBalance",
|
|
@@ -12286,7 +13264,7 @@ function useAddressBalance(params) {
|
|
|
12286
13264
|
publishableKey
|
|
12287
13265
|
],
|
|
12288
13266
|
queryFn: async () => {
|
|
12289
|
-
const res = await (0,
|
|
13267
|
+
const res = await (0, import_core28.getAddressBalance)(
|
|
12290
13268
|
address,
|
|
12291
13269
|
chainType,
|
|
12292
13270
|
chainId,
|
|
@@ -12324,13 +13302,13 @@ function useAddressBalance(params) {
|
|
|
12324
13302
|
}
|
|
12325
13303
|
|
|
12326
13304
|
// src/hooks/use-executions.ts
|
|
12327
|
-
var
|
|
12328
|
-
var
|
|
13305
|
+
var import_react_query14 = require("@tanstack/react-query");
|
|
13306
|
+
var import_core29 = require("@unifold/core");
|
|
12329
13307
|
function useExecutions(userId, publishableKey, options) {
|
|
12330
|
-
const actionType = options?.actionType ??
|
|
12331
|
-
return (0,
|
|
13308
|
+
const actionType = options?.actionType ?? import_core29.ActionType.Deposit;
|
|
13309
|
+
return (0, import_react_query14.useQuery)({
|
|
12332
13310
|
queryKey: ["unifold", "executions", actionType, userId, publishableKey],
|
|
12333
|
-
queryFn: () => (0,
|
|
13311
|
+
queryFn: () => (0, import_core29.queryExecutions)(userId, publishableKey, actionType),
|
|
12334
13312
|
enabled: (options?.enabled ?? true) && !!userId,
|
|
12335
13313
|
refetchInterval: options?.refetchInterval ?? 3e3,
|
|
12336
13314
|
staleTime: 0,
|
|
@@ -12340,8 +13318,8 @@ function useExecutions(userId, publishableKey, options) {
|
|
|
12340
13318
|
}
|
|
12341
13319
|
|
|
12342
13320
|
// src/hooks/use-withdraw-polling.ts
|
|
12343
|
-
var
|
|
12344
|
-
var
|
|
13321
|
+
var import_react20 = require("react");
|
|
13322
|
+
var import_core30 = require("@unifold/core");
|
|
12345
13323
|
var POLL_INTERVAL_MS2 = 2500;
|
|
12346
13324
|
var POLL_ENDPOINT_INTERVAL_MS2 = 3e3;
|
|
12347
13325
|
var CUTOFF_BUFFER_MS2 = 6e4;
|
|
@@ -12353,20 +13331,20 @@ function useWithdrawPolling({
|
|
|
12353
13331
|
onWithdrawSuccess,
|
|
12354
13332
|
onWithdrawError
|
|
12355
13333
|
}) {
|
|
12356
|
-
const [executions, setExecutions] = (0,
|
|
12357
|
-
const [isPolling, setIsPolling] = (0,
|
|
12358
|
-
const enabledAtRef = (0,
|
|
12359
|
-
const trackedRef = (0,
|
|
12360
|
-
const prevEnabledRef = (0,
|
|
12361
|
-
const onSuccessRef = (0,
|
|
12362
|
-
const onErrorRef = (0,
|
|
12363
|
-
(0,
|
|
13334
|
+
const [executions, setExecutions] = (0, import_react20.useState)([]);
|
|
13335
|
+
const [isPolling, setIsPolling] = (0, import_react20.useState)(false);
|
|
13336
|
+
const enabledAtRef = (0, import_react20.useRef)(/* @__PURE__ */ new Date());
|
|
13337
|
+
const trackedRef = (0, import_react20.useRef)(/* @__PURE__ */ new Map());
|
|
13338
|
+
const prevEnabledRef = (0, import_react20.useRef)(false);
|
|
13339
|
+
const onSuccessRef = (0, import_react20.useRef)(onWithdrawSuccess);
|
|
13340
|
+
const onErrorRef = (0, import_react20.useRef)(onWithdrawError);
|
|
13341
|
+
(0, import_react20.useEffect)(() => {
|
|
12364
13342
|
onSuccessRef.current = onWithdrawSuccess;
|
|
12365
13343
|
}, [onWithdrawSuccess]);
|
|
12366
|
-
(0,
|
|
13344
|
+
(0, import_react20.useEffect)(() => {
|
|
12367
13345
|
onErrorRef.current = onWithdrawError;
|
|
12368
13346
|
}, [onWithdrawError]);
|
|
12369
|
-
(0,
|
|
13347
|
+
(0, import_react20.useEffect)(() => {
|
|
12370
13348
|
if (enabled && !prevEnabledRef.current) {
|
|
12371
13349
|
enabledAtRef.current = /* @__PURE__ */ new Date();
|
|
12372
13350
|
trackedRef.current.clear();
|
|
@@ -12376,20 +13354,20 @@ function useWithdrawPolling({
|
|
|
12376
13354
|
}
|
|
12377
13355
|
prevEnabledRef.current = enabled;
|
|
12378
13356
|
}, [enabled]);
|
|
12379
|
-
(0,
|
|
13357
|
+
(0, import_react20.useEffect)(() => {
|
|
12380
13358
|
if (!userId || !enabled) return;
|
|
12381
13359
|
const enabledAt = enabledAtRef.current;
|
|
12382
13360
|
const poll = async () => {
|
|
12383
13361
|
try {
|
|
12384
|
-
const response = await (0,
|
|
13362
|
+
const response = await (0, import_core30.queryExecutions)(userId, publishableKey, import_core30.ActionType.Withdraw);
|
|
12385
13363
|
const cutoff = new Date(enabledAt.getTime() - CUTOFF_BUFFER_MS2);
|
|
12386
13364
|
const sorted = [...response.data].sort((a, b) => {
|
|
12387
13365
|
const tA = a.created_at ? new Date(a.created_at).getTime() : 0;
|
|
12388
13366
|
const tB = b.created_at ? new Date(b.created_at).getTime() : 0;
|
|
12389
13367
|
return tB - tA;
|
|
12390
13368
|
});
|
|
12391
|
-
const inProgress = [
|
|
12392
|
-
const terminal = [
|
|
13369
|
+
const inProgress = [import_core30.ExecutionStatus.PENDING, import_core30.ExecutionStatus.WAITING, import_core30.ExecutionStatus.DELAYED];
|
|
13370
|
+
const terminal = [import_core30.ExecutionStatus.SUCCEEDED, import_core30.ExecutionStatus.FAILED];
|
|
12393
13371
|
let target = null;
|
|
12394
13372
|
for (const ex of sorted) {
|
|
12395
13373
|
const t11 = ex.created_at ? new Date(ex.created_at) : null;
|
|
@@ -12419,9 +13397,9 @@ function useWithdrawPolling({
|
|
|
12419
13397
|
}
|
|
12420
13398
|
return [...list, ex];
|
|
12421
13399
|
});
|
|
12422
|
-
if (ex.status ===
|
|
13400
|
+
if (ex.status === import_core30.ExecutionStatus.SUCCEEDED && (!prev || inProgress.includes(prev))) {
|
|
12423
13401
|
onSuccessRef.current?.({ message: "Withdrawal completed successfully", executionId: ex.id, transaction: ex });
|
|
12424
|
-
} else if (ex.status ===
|
|
13402
|
+
} else if (ex.status === import_core30.ExecutionStatus.FAILED && prev !== import_core30.ExecutionStatus.FAILED) {
|
|
12425
13403
|
onErrorRef.current?.({ message: "Withdrawal failed", code: "WITHDRAW_FAILED", error: ex });
|
|
12426
13404
|
}
|
|
12427
13405
|
}
|
|
@@ -12438,11 +13416,11 @@ function useWithdrawPolling({
|
|
|
12438
13416
|
setIsPolling(false);
|
|
12439
13417
|
};
|
|
12440
13418
|
}, [userId, publishableKey, enabled]);
|
|
12441
|
-
(0,
|
|
13419
|
+
(0, import_react20.useEffect)(() => {
|
|
12442
13420
|
if (!enabled || !depositWalletId) return;
|
|
12443
13421
|
const trigger = async () => {
|
|
12444
13422
|
try {
|
|
12445
|
-
await (0,
|
|
13423
|
+
await (0, import_core30.pollDirectExecutions)({ deposit_wallet_id: depositWalletId }, publishableKey);
|
|
12446
13424
|
} catch {
|
|
12447
13425
|
}
|
|
12448
13426
|
};
|
|
@@ -12454,7 +13432,7 @@ function useWithdrawPolling({
|
|
|
12454
13432
|
}
|
|
12455
13433
|
|
|
12456
13434
|
// src/components/withdrawals/WithdrawDoubleInput.tsx
|
|
12457
|
-
var
|
|
13435
|
+
var import_jsx_runtime53 = require("react/jsx-runtime");
|
|
12458
13436
|
var t7 = i18n.withdrawModal;
|
|
12459
13437
|
var getChainKey4 = (chainId, chainType) => `${chainType}:${chainId}`;
|
|
12460
13438
|
function WithdrawDoubleInput({
|
|
@@ -12469,8 +13447,8 @@ function WithdrawDoubleInput({
|
|
|
12469
13447
|
const isDarkMode = useTheme().themeClass.includes("uf-dark");
|
|
12470
13448
|
const selectedToken = selectedTokenSymbol ? tokens.find((t11) => t11.symbol === selectedTokenSymbol) : void 0;
|
|
12471
13449
|
const availableChainsForToken = selectedToken?.chains || [];
|
|
12472
|
-
const renderTokenItem = (tokenData) => /* @__PURE__ */ (0,
|
|
12473
|
-
/* @__PURE__ */ (0,
|
|
13450
|
+
const renderTokenItem = (tokenData) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
13451
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
12474
13452
|
"img",
|
|
12475
13453
|
{
|
|
12476
13454
|
src: tokenData.icon_url,
|
|
@@ -12481,10 +13459,10 @@ function WithdrawDoubleInput({
|
|
|
12481
13459
|
className: "uf-rounded-full uf-flex-shrink-0"
|
|
12482
13460
|
}
|
|
12483
13461
|
),
|
|
12484
|
-
/* @__PURE__ */ (0,
|
|
13462
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "uf-text-xs uf-font-normal", children: tokenData.symbol })
|
|
12485
13463
|
] });
|
|
12486
|
-
const renderChainItem = (chainData) => /* @__PURE__ */ (0,
|
|
12487
|
-
/* @__PURE__ */ (0,
|
|
13464
|
+
const renderChainItem = (chainData) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
13465
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
12488
13466
|
"img",
|
|
12489
13467
|
{
|
|
12490
13468
|
src: chainData.icon_url,
|
|
@@ -12495,14 +13473,14 @@ function WithdrawDoubleInput({
|
|
|
12495
13473
|
className: "uf-rounded-full uf-flex-shrink-0"
|
|
12496
13474
|
}
|
|
12497
13475
|
),
|
|
12498
|
-
/* @__PURE__ */ (0,
|
|
13476
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "uf-text-xs uf-font-normal", children: chainData.chain_name })
|
|
12499
13477
|
] });
|
|
12500
13478
|
const currentChainData = selectedChainKey ? availableChainsForToken.find(
|
|
12501
13479
|
(c) => getChainKey4(c.chain_id, c.chain_type) === selectedChainKey
|
|
12502
13480
|
) : void 0;
|
|
12503
|
-
return /* @__PURE__ */ (0,
|
|
12504
|
-
/* @__PURE__ */ (0,
|
|
12505
|
-
/* @__PURE__ */ (0,
|
|
13481
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "uf-grid uf-grid-cols-2 uf-gap-2.5", children: [
|
|
13482
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { children: [
|
|
13483
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
12506
13484
|
"div",
|
|
12507
13485
|
{
|
|
12508
13486
|
className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1",
|
|
@@ -12510,14 +13488,14 @@ function WithdrawDoubleInput({
|
|
|
12510
13488
|
children: t7.receiveToken
|
|
12511
13489
|
}
|
|
12512
13490
|
),
|
|
12513
|
-
/* @__PURE__ */ (0,
|
|
13491
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
|
|
12514
13492
|
Select,
|
|
12515
13493
|
{
|
|
12516
13494
|
value: selectedTokenSymbol ?? "",
|
|
12517
13495
|
onValueChange: onTokenChange,
|
|
12518
13496
|
disabled: isLoading || tokens.length === 0,
|
|
12519
13497
|
children: [
|
|
12520
|
-
/* @__PURE__ */ (0,
|
|
13498
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
12521
13499
|
SelectTrigger,
|
|
12522
13500
|
{
|
|
12523
13501
|
className: "uf-h-10 hover:uf-opacity-90 uf-text-foreground disabled:uf-opacity-50",
|
|
@@ -12525,10 +13503,10 @@ function WithdrawDoubleInput({
|
|
|
12525
13503
|
backgroundColor: components.card.backgroundColor,
|
|
12526
13504
|
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
12527
13505
|
},
|
|
12528
|
-
children: /* @__PURE__ */ (0,
|
|
13506
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(SelectValue, { children: isLoading || !selectedTokenSymbol ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t7.loading }) : selectedToken ? renderTokenItem(selectedToken) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "uf-text-xs uf-font-normal", children: selectedTokenSymbol }) })
|
|
12529
13507
|
}
|
|
12530
13508
|
),
|
|
12531
|
-
/* @__PURE__ */ (0,
|
|
13509
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
12532
13510
|
SelectContent,
|
|
12533
13511
|
{
|
|
12534
13512
|
className: "uf-bg-secondary uf-border uf-text-foreground uf-max-h-[300px]",
|
|
@@ -12536,7 +13514,7 @@ function WithdrawDoubleInput({
|
|
|
12536
13514
|
border: `1px solid ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)"}`,
|
|
12537
13515
|
...fonts.regular ? { "--uf-font-family": fonts.regular } : {}
|
|
12538
13516
|
},
|
|
12539
|
-
children: tokens.map((tokenData) => /* @__PURE__ */ (0,
|
|
13517
|
+
children: tokens.map((tokenData) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
12540
13518
|
SelectItem,
|
|
12541
13519
|
{
|
|
12542
13520
|
value: tokenData.symbol,
|
|
@@ -12551,8 +13529,8 @@ function WithdrawDoubleInput({
|
|
|
12551
13529
|
}
|
|
12552
13530
|
)
|
|
12553
13531
|
] }),
|
|
12554
|
-
/* @__PURE__ */ (0,
|
|
12555
|
-
/* @__PURE__ */ (0,
|
|
13532
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { children: [
|
|
13533
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
12556
13534
|
"div",
|
|
12557
13535
|
{
|
|
12558
13536
|
className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1",
|
|
@@ -12560,14 +13538,14 @@ function WithdrawDoubleInput({
|
|
|
12560
13538
|
children: t7.receiveChain
|
|
12561
13539
|
}
|
|
12562
13540
|
),
|
|
12563
|
-
/* @__PURE__ */ (0,
|
|
13541
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
|
|
12564
13542
|
Select,
|
|
12565
13543
|
{
|
|
12566
13544
|
value: selectedChainKey ?? "",
|
|
12567
13545
|
onValueChange: onChainChange,
|
|
12568
13546
|
disabled: isLoading || availableChainsForToken.length === 0,
|
|
12569
13547
|
children: [
|
|
12570
|
-
/* @__PURE__ */ (0,
|
|
13548
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
12571
13549
|
SelectTrigger,
|
|
12572
13550
|
{
|
|
12573
13551
|
className: "uf-h-10 hover:uf-opacity-90 uf-text-foreground disabled:uf-opacity-50",
|
|
@@ -12575,10 +13553,10 @@ function WithdrawDoubleInput({
|
|
|
12575
13553
|
backgroundColor: components.card.backgroundColor,
|
|
12576
13554
|
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
12577
13555
|
},
|
|
12578
|
-
children: /* @__PURE__ */ (0,
|
|
13556
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(SelectValue, { children: isLoading || !selectedChainKey ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t7.loading }) : currentChainData ? renderChainItem(currentChainData) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "uf-text-xs uf-font-normal", children: selectedChainKey }) })
|
|
12579
13557
|
}
|
|
12580
13558
|
),
|
|
12581
|
-
/* @__PURE__ */ (0,
|
|
13559
|
+
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
12582
13560
|
SelectContent,
|
|
12583
13561
|
{
|
|
12584
13562
|
align: "end",
|
|
@@ -12587,9 +13565,9 @@ function WithdrawDoubleInput({
|
|
|
12587
13565
|
border: `1px solid ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)"}`,
|
|
12588
13566
|
...fonts.regular ? { "--uf-font-family": fonts.regular } : {}
|
|
12589
13567
|
},
|
|
12590
|
-
children: availableChainsForToken.length === 0 ? /* @__PURE__ */ (0,
|
|
13568
|
+
children: availableChainsForToken.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime53.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) => {
|
|
12591
13569
|
const chainKey = getChainKey4(chainData.chain_id, chainData.chain_type);
|
|
12592
|
-
return /* @__PURE__ */ (0,
|
|
13570
|
+
return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
12593
13571
|
SelectItem,
|
|
12594
13572
|
{
|
|
12595
13573
|
value: chainKey,
|
|
@@ -12609,12 +13587,12 @@ function WithdrawDoubleInput({
|
|
|
12609
13587
|
}
|
|
12610
13588
|
|
|
12611
13589
|
// src/components/withdrawals/WithdrawForm.tsx
|
|
12612
|
-
var
|
|
12613
|
-
var
|
|
13590
|
+
var import_react21 = require("react");
|
|
13591
|
+
var import_lucide_react25 = require("lucide-react");
|
|
12614
13592
|
|
|
12615
13593
|
// src/hooks/use-verify-recipient-address.ts
|
|
12616
|
-
var
|
|
12617
|
-
var
|
|
13594
|
+
var import_react_query15 = require("@tanstack/react-query");
|
|
13595
|
+
var import_core31 = require("@unifold/core");
|
|
12618
13596
|
function useVerifyRecipientAddress(params) {
|
|
12619
13597
|
const {
|
|
12620
13598
|
chainType,
|
|
@@ -12626,7 +13604,7 @@ function useVerifyRecipientAddress(params) {
|
|
|
12626
13604
|
} = params;
|
|
12627
13605
|
const trimmedAddress = recipientAddress?.trim() || "";
|
|
12628
13606
|
const hasAllParams = !!chainType && !!chainId && !!tokenAddress && trimmedAddress.length > 0;
|
|
12629
|
-
return (0,
|
|
13607
|
+
return (0, import_react_query15.useQuery)({
|
|
12630
13608
|
queryKey: [
|
|
12631
13609
|
"unifold",
|
|
12632
13610
|
"verifyRecipientAddress",
|
|
@@ -12636,7 +13614,7 @@ function useVerifyRecipientAddress(params) {
|
|
|
12636
13614
|
trimmedAddress,
|
|
12637
13615
|
publishableKey
|
|
12638
13616
|
],
|
|
12639
|
-
queryFn: () => (0,
|
|
13617
|
+
queryFn: () => (0, import_core31.verifyRecipientAddress)(
|
|
12640
13618
|
{
|
|
12641
13619
|
chain_type: chainType,
|
|
12642
13620
|
chain_id: chainId,
|
|
@@ -12655,7 +13633,7 @@ function useVerifyRecipientAddress(params) {
|
|
|
12655
13633
|
}
|
|
12656
13634
|
|
|
12657
13635
|
// src/components/withdrawals/send-withdraw.ts
|
|
12658
|
-
var
|
|
13636
|
+
var import_core32 = require("@unifold/core");
|
|
12659
13637
|
async function sendEvmWithdraw(params) {
|
|
12660
13638
|
const {
|
|
12661
13639
|
provider,
|
|
@@ -12733,7 +13711,7 @@ async function sendSolanaWithdraw(params) {
|
|
|
12733
13711
|
if (!provider.publicKey) {
|
|
12734
13712
|
await provider.connect();
|
|
12735
13713
|
}
|
|
12736
|
-
const buildResponse = await (0,
|
|
13714
|
+
const buildResponse = await (0, import_core32.buildSolanaTransaction)(
|
|
12737
13715
|
{
|
|
12738
13716
|
chain_id: "mainnet",
|
|
12739
13717
|
token_address: sourceTokenAddress === "" ? "native" : sourceTokenAddress,
|
|
@@ -12759,12 +13737,58 @@ async function sendSolanaWithdraw(params) {
|
|
|
12759
13737
|
for (let i = 0; i < serialized.length; i++) {
|
|
12760
13738
|
binaryStr += String.fromCharCode(serialized[i]);
|
|
12761
13739
|
}
|
|
12762
|
-
const sendResponse = await (0,
|
|
13740
|
+
const sendResponse = await (0, import_core32.sendSolanaTransaction)(
|
|
12763
13741
|
{ chain_id: "mainnet", signed_transaction: btoa(binaryStr) },
|
|
12764
13742
|
publishableKey
|
|
12765
13743
|
);
|
|
12766
13744
|
return sendResponse.signature;
|
|
12767
13745
|
}
|
|
13746
|
+
var HYPERCORE_CHAIN_ID = "1337";
|
|
13747
|
+
var HYPERCORE_SPOT_USDC_ADDRESS = "0x6d1e7cde53ba9467b783cb7c530ce054";
|
|
13748
|
+
function isHypercoreChain(chainId) {
|
|
13749
|
+
return chainId === HYPERCORE_CHAIN_ID;
|
|
13750
|
+
}
|
|
13751
|
+
async function sendHypercoreWithdraw(params) {
|
|
13752
|
+
const {
|
|
13753
|
+
provider,
|
|
13754
|
+
fromAddress,
|
|
13755
|
+
depositWalletAddress,
|
|
13756
|
+
sourceTokenAddress,
|
|
13757
|
+
amount,
|
|
13758
|
+
tokenSymbol,
|
|
13759
|
+
publishableKey
|
|
13760
|
+
} = params;
|
|
13761
|
+
const isSpot = sourceTokenAddress.toLowerCase() === HYPERCORE_SPOT_USDC_ADDRESS;
|
|
13762
|
+
const currentChainHex = await provider.request({
|
|
13763
|
+
method: "eth_chainId",
|
|
13764
|
+
params: []
|
|
13765
|
+
});
|
|
13766
|
+
const activeChainId = String(parseInt(currentChainHex, 16));
|
|
13767
|
+
const buildResult = await (0, import_core32.buildHypercoreTransaction)(
|
|
13768
|
+
{
|
|
13769
|
+
action_type: isSpot ? "spot_send" : "usd_send",
|
|
13770
|
+
signature_chain_type: "ethereum",
|
|
13771
|
+
signature_chain_id: activeChainId,
|
|
13772
|
+
recipient_address: depositWalletAddress,
|
|
13773
|
+
token_address: sourceTokenAddress,
|
|
13774
|
+
token_symbol: tokenSymbol || void 0,
|
|
13775
|
+
amount
|
|
13776
|
+
},
|
|
13777
|
+
publishableKey
|
|
13778
|
+
);
|
|
13779
|
+
const signature = await provider.request({
|
|
13780
|
+
method: "eth_signTypedData_v4",
|
|
13781
|
+
params: [fromAddress, JSON.stringify(buildResult.typed_data)]
|
|
13782
|
+
});
|
|
13783
|
+
await (0, import_core32.sendHypercoreTransaction)(
|
|
13784
|
+
{
|
|
13785
|
+
action_payload: buildResult.action_payload,
|
|
13786
|
+
signature,
|
|
13787
|
+
nonce: buildResult.nonce
|
|
13788
|
+
},
|
|
13789
|
+
publishableKey
|
|
13790
|
+
);
|
|
13791
|
+
}
|
|
12768
13792
|
async function detectBrowserWallet(chainType, senderAddress) {
|
|
12769
13793
|
const win = typeof window !== "undefined" ? window : null;
|
|
12770
13794
|
if (!win || !senderAddress) return null;
|
|
@@ -12838,7 +13862,7 @@ async function detectBrowserWallet(chainType, senderAddress) {
|
|
|
12838
13862
|
}
|
|
12839
13863
|
|
|
12840
13864
|
// src/components/withdrawals/WithdrawForm.tsx
|
|
12841
|
-
var
|
|
13865
|
+
var import_jsx_runtime54 = require("react/jsx-runtime");
|
|
12842
13866
|
var t8 = i18n.withdrawModal;
|
|
12843
13867
|
var tCrypto = i18n.transferCrypto;
|
|
12844
13868
|
function formatProcessingTime2(seconds) {
|
|
@@ -12891,22 +13915,22 @@ function WithdrawForm({
|
|
|
12891
13915
|
footerLeft
|
|
12892
13916
|
}) {
|
|
12893
13917
|
const { colors: colors2, fonts, components } = useTheme();
|
|
12894
|
-
const [recipientAddress, setRecipientAddress] = (0,
|
|
12895
|
-
const [amount, setAmount] = (0,
|
|
12896
|
-
const [inputUnit, setInputUnit] = (0,
|
|
12897
|
-
const [isSubmitting, setIsSubmitting] = (0,
|
|
12898
|
-
const [submitError, setSubmitError] = (0,
|
|
12899
|
-
const [detailsExpanded, setDetailsExpanded] = (0,
|
|
12900
|
-
const [glossaryOpen, setGlossaryOpen] = (0,
|
|
12901
|
-
(0,
|
|
13918
|
+
const [recipientAddress, setRecipientAddress] = (0, import_react21.useState)(recipientAddressProp || "");
|
|
13919
|
+
const [amount, setAmount] = (0, import_react21.useState)("");
|
|
13920
|
+
const [inputUnit, setInputUnit] = (0, import_react21.useState)("crypto");
|
|
13921
|
+
const [isSubmitting, setIsSubmitting] = (0, import_react21.useState)(false);
|
|
13922
|
+
const [submitError, setSubmitError] = (0, import_react21.useState)(null);
|
|
13923
|
+
const [detailsExpanded, setDetailsExpanded] = (0, import_react21.useState)(false);
|
|
13924
|
+
const [glossaryOpen, setGlossaryOpen] = (0, import_react21.useState)(false);
|
|
13925
|
+
(0, import_react21.useEffect)(() => {
|
|
12902
13926
|
setRecipientAddress(recipientAddressProp || "");
|
|
12903
13927
|
setAmount("");
|
|
12904
13928
|
setInputUnit("crypto");
|
|
12905
13929
|
setSubmitError(null);
|
|
12906
13930
|
}, [recipientAddressProp]);
|
|
12907
13931
|
const trimmedAddress = recipientAddress.trim();
|
|
12908
|
-
const [debouncedAddress, setDebouncedAddress] = (0,
|
|
12909
|
-
(0,
|
|
13932
|
+
const [debouncedAddress, setDebouncedAddress] = (0, import_react21.useState)(trimmedAddress);
|
|
13933
|
+
(0, import_react21.useEffect)(() => {
|
|
12910
13934
|
const id = setTimeout(() => setDebouncedAddress(trimmedAddress), 500);
|
|
12911
13935
|
return () => clearTimeout(id);
|
|
12912
13936
|
}, [trimmedAddress]);
|
|
@@ -12923,7 +13947,7 @@ function WithdrawForm({
|
|
|
12923
13947
|
enabled: debouncedAddress.length > 5 && !!selectedChain
|
|
12924
13948
|
});
|
|
12925
13949
|
const isDebouncing = trimmedAddress !== debouncedAddress;
|
|
12926
|
-
const addressError = (0,
|
|
13950
|
+
const addressError = (0, import_react21.useMemo)(() => {
|
|
12927
13951
|
if (!trimmedAddress || trimmedAddress.length <= 5) return null;
|
|
12928
13952
|
if (isDebouncing || isVerifyingAddress) return null;
|
|
12929
13953
|
if (verifyError) return t8.invalidAddress;
|
|
@@ -12937,47 +13961,47 @@ function WithdrawForm({
|
|
|
12937
13961
|
return null;
|
|
12938
13962
|
}, [trimmedAddress, isDebouncing, isVerifyingAddress, verifyError, addressVerification, selectedChain, selectedToken]);
|
|
12939
13963
|
const isAddressValid = !isDebouncing && !!addressVerification?.valid && !addressError;
|
|
12940
|
-
const exchangeRate = (0,
|
|
13964
|
+
const exchangeRate = (0, import_react21.useMemo)(() => {
|
|
12941
13965
|
if (!balanceData?.exchangeRate) return 0;
|
|
12942
13966
|
return parseFloat(balanceData.exchangeRate);
|
|
12943
13967
|
}, [balanceData]);
|
|
12944
|
-
const balanceCrypto = (0,
|
|
13968
|
+
const balanceCrypto = (0, import_react21.useMemo)(() => {
|
|
12945
13969
|
if (!balanceData?.balanceHuman) return 0;
|
|
12946
13970
|
return parseFloat(balanceData.balanceHuman);
|
|
12947
13971
|
}, [balanceData]);
|
|
12948
|
-
const balanceUsdNum = (0,
|
|
13972
|
+
const balanceUsdNum = (0, import_react21.useMemo)(() => {
|
|
12949
13973
|
if (!balanceData?.balanceUsd) return 0;
|
|
12950
13974
|
return parseFloat(balanceData.balanceUsd);
|
|
12951
13975
|
}, [balanceData]);
|
|
12952
13976
|
const tokenSymbol = sourceTokenSymbol || balanceData?.symbol || "TOKEN";
|
|
12953
13977
|
const sourceDecimals = balanceData?.decimals ?? 6;
|
|
12954
|
-
const cryptoAmountFromInput = (0,
|
|
13978
|
+
const cryptoAmountFromInput = (0, import_react21.useMemo)(() => {
|
|
12955
13979
|
const val = parseFloat(amount);
|
|
12956
13980
|
if (!val || val <= 0) return 0;
|
|
12957
13981
|
if (inputUnit === "crypto") return val;
|
|
12958
13982
|
return exchangeRate > 0 ? val / exchangeRate : 0;
|
|
12959
13983
|
}, [amount, inputUnit, exchangeRate]);
|
|
12960
|
-
const fiatAmountFromInput = (0,
|
|
13984
|
+
const fiatAmountFromInput = (0, import_react21.useMemo)(() => {
|
|
12961
13985
|
const val = parseFloat(amount);
|
|
12962
13986
|
if (!val || val <= 0) return 0;
|
|
12963
13987
|
if (inputUnit === "fiat") return val;
|
|
12964
13988
|
return val * exchangeRate;
|
|
12965
13989
|
}, [amount, inputUnit, exchangeRate]);
|
|
12966
|
-
const convertedDisplay = (0,
|
|
13990
|
+
const convertedDisplay = (0, import_react21.useMemo)(() => {
|
|
12967
13991
|
if (!amount || parseFloat(amount) <= 0) return null;
|
|
12968
13992
|
if (inputUnit === "crypto") {
|
|
12969
13993
|
return `$${fiatAmountFromInput.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
12970
13994
|
}
|
|
12971
13995
|
return `${cryptoAmountFromInput.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 6 })} ${tokenSymbol}`;
|
|
12972
13996
|
}, [amount, inputUnit, fiatAmountFromInput, cryptoAmountFromInput, tokenSymbol]);
|
|
12973
|
-
const balanceDisplay = (0,
|
|
13997
|
+
const balanceDisplay = (0, import_react21.useMemo)(() => {
|
|
12974
13998
|
if (isLoadingBalance || !balanceData) return null;
|
|
12975
13999
|
if (inputUnit === "crypto") {
|
|
12976
14000
|
return `${balanceCrypto.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ${tokenSymbol}`;
|
|
12977
14001
|
}
|
|
12978
14002
|
return `$${balanceUsdNum.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
12979
14003
|
}, [isLoadingBalance, balanceData, inputUnit, balanceCrypto, balanceUsdNum, tokenSymbol]);
|
|
12980
|
-
const handleSwitchUnit = (0,
|
|
14004
|
+
const handleSwitchUnit = (0, import_react21.useCallback)(() => {
|
|
12981
14005
|
const val = parseFloat(amount);
|
|
12982
14006
|
if (!val || val <= 0 || exchangeRate <= 0) {
|
|
12983
14007
|
setInputUnit((u) => u === "crypto" ? "fiat" : "crypto");
|
|
@@ -12994,7 +14018,7 @@ function WithdrawForm({
|
|
|
12994
14018
|
setInputUnit("crypto");
|
|
12995
14019
|
}
|
|
12996
14020
|
}, [amount, inputUnit, exchangeRate, sourceDecimals]);
|
|
12997
|
-
const handleMaxClick = (0,
|
|
14021
|
+
const handleMaxClick = (0, import_react21.useCallback)(() => {
|
|
12998
14022
|
if (inputUnit === "crypto") {
|
|
12999
14023
|
if (balanceCrypto <= 0) return;
|
|
13000
14024
|
setAmount(balanceData?.balanceHuman ?? "0");
|
|
@@ -13006,7 +14030,7 @@ function WithdrawForm({
|
|
|
13006
14030
|
const isBelowMinimum = minimumWithdrawAmountUsd !== null && fiatAmountFromInput > 0 && fiatAmountFromInput < minimumWithdrawAmountUsd;
|
|
13007
14031
|
const isOverBalance = inputUnit === "crypto" ? cryptoAmountFromInput > 0 && balanceCrypto > 0 && cryptoAmountFromInput > balanceCrypto : fiatAmountFromInput > 0 && balanceUsdNum > 0 && fiatAmountFromInput > balanceUsdNum;
|
|
13008
14032
|
const isFormValid = trimmedAddress.length > 0 && amount.trim().length > 0 && cryptoAmountFromInput > 0 && isAddressValid && !isBelowMinimum && !isOverBalance && !!balanceData;
|
|
13009
|
-
const handleWithdraw = (0,
|
|
14033
|
+
const handleWithdraw = (0, import_react21.useCallback)(async () => {
|
|
13010
14034
|
if (!selectedToken || !selectedChain) return;
|
|
13011
14035
|
if (!isFormValid) return;
|
|
13012
14036
|
setIsSubmitting(true);
|
|
@@ -13039,7 +14063,17 @@ function WithdrawForm({
|
|
|
13039
14063
|
recipientAddress: trimmedAddress
|
|
13040
14064
|
};
|
|
13041
14065
|
if (detectedWallet) {
|
|
13042
|
-
if (detectedWallet.chainFamily === "evm") {
|
|
14066
|
+
if (detectedWallet.chainFamily === "evm" && isHypercoreChain(sourceChainId)) {
|
|
14067
|
+
await sendHypercoreWithdraw({
|
|
14068
|
+
provider: detectedWallet.provider,
|
|
14069
|
+
fromAddress: detectedWallet.address,
|
|
14070
|
+
depositWalletAddress: depositWallet.address,
|
|
14071
|
+
sourceTokenAddress,
|
|
14072
|
+
amount: humanAmount,
|
|
14073
|
+
tokenSymbol,
|
|
14074
|
+
publishableKey
|
|
14075
|
+
});
|
|
14076
|
+
} else if (detectedWallet.chainFamily === "evm") {
|
|
13043
14077
|
await sendEvmWithdraw({
|
|
13044
14078
|
provider: detectedWallet.provider,
|
|
13045
14079
|
fromAddress: detectedWallet.address,
|
|
@@ -13076,9 +14110,9 @@ function WithdrawForm({
|
|
|
13076
14110
|
setIsSubmitting(false);
|
|
13077
14111
|
}
|
|
13078
14112
|
}, [selectedToken, selectedChain, isFormValid, cryptoAmountFromInput, sourceDecimals, trimmedAddress, publishableKey, onWithdraw, detectedWallet, sourceTokenAddress, sourceChainId, onWithdrawError, onDepositWalletCreation, onWithdrawSubmitted, amount, inputUnit, balanceCrypto, balanceUsdNum, balanceData]);
|
|
13079
|
-
return /* @__PURE__ */ (0,
|
|
13080
|
-
/* @__PURE__ */ (0,
|
|
13081
|
-
/* @__PURE__ */ (0,
|
|
14113
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
|
|
14114
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { children: [
|
|
14115
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
13082
14116
|
"div",
|
|
13083
14117
|
{
|
|
13084
14118
|
className: "uf-text-xs uf-mb-1.5",
|
|
@@ -13086,7 +14120,7 @@ function WithdrawForm({
|
|
|
13086
14120
|
children: t8.recipientAddress
|
|
13087
14121
|
}
|
|
13088
14122
|
),
|
|
13089
|
-
/* @__PURE__ */ (0,
|
|
14123
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
13090
14124
|
"style",
|
|
13091
14125
|
{
|
|
13092
14126
|
dangerouslySetInnerHTML: {
|
|
@@ -13094,7 +14128,7 @@ function WithdrawForm({
|
|
|
13094
14128
|
}
|
|
13095
14129
|
}
|
|
13096
14130
|
),
|
|
13097
|
-
/* @__PURE__ */ (0,
|
|
14131
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
|
|
13098
14132
|
"div",
|
|
13099
14133
|
{
|
|
13100
14134
|
className: "uf-flex uf-items-center uf-gap-1 uf-pr-2",
|
|
@@ -13104,7 +14138,7 @@ function WithdrawForm({
|
|
|
13104
14138
|
border: `${components.input.borderWidth}px solid ${addressError ? colors2.error : components.input.borderColor}`
|
|
13105
14139
|
},
|
|
13106
14140
|
children: [
|
|
13107
|
-
/* @__PURE__ */ (0,
|
|
14141
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
13108
14142
|
"input",
|
|
13109
14143
|
{
|
|
13110
14144
|
type: "text",
|
|
@@ -13121,7 +14155,7 @@ function WithdrawForm({
|
|
|
13121
14155
|
}
|
|
13122
14156
|
}
|
|
13123
14157
|
),
|
|
13124
|
-
/* @__PURE__ */ (0,
|
|
14158
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
13125
14159
|
"button",
|
|
13126
14160
|
{
|
|
13127
14161
|
type: "button",
|
|
@@ -13138,27 +14172,27 @@ function WithdrawForm({
|
|
|
13138
14172
|
className: "uf-flex-shrink-0 uf-p-1 uf-rounded uf-transition-colors hover:uf-opacity-70",
|
|
13139
14173
|
style: { color: colors2.foregroundMuted },
|
|
13140
14174
|
title: "Paste from clipboard",
|
|
13141
|
-
children: /* @__PURE__ */ (0,
|
|
14175
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react25.ClipboardPaste, { className: "uf-w-4 uf-h-4" })
|
|
13142
14176
|
}
|
|
13143
14177
|
)
|
|
13144
14178
|
]
|
|
13145
14179
|
}
|
|
13146
14180
|
),
|
|
13147
|
-
(isDebouncing || isVerifyingAddress) && trimmedAddress.length > 5 && /* @__PURE__ */ (0,
|
|
13148
|
-
/* @__PURE__ */ (0,
|
|
13149
|
-
/* @__PURE__ */ (0,
|
|
14181
|
+
(isDebouncing || isVerifyingAddress) && trimmedAddress.length > 5 && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-1.5", children: [
|
|
14182
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react25.Loader2, { className: "uf-w-3 uf-h-3 uf-animate-spin", style: { color: colors2.foregroundMuted } }),
|
|
14183
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: t8.verifyingAddress })
|
|
13150
14184
|
] }),
|
|
13151
|
-
addressError && /* @__PURE__ */ (0,
|
|
13152
|
-
/* @__PURE__ */ (0,
|
|
13153
|
-
/* @__PURE__ */ (0,
|
|
14185
|
+
addressError && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-1.5", children: [
|
|
14186
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react25.AlertTriangle, { className: "uf-w-3 uf-h-3", style: { color: colors2.error } }),
|
|
14187
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "uf-text-xs", style: { color: colors2.error, fontFamily: fonts.regular }, children: addressError })
|
|
13154
14188
|
] })
|
|
13155
14189
|
] }),
|
|
13156
|
-
/* @__PURE__ */ (0,
|
|
13157
|
-
/* @__PURE__ */ (0,
|
|
14190
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { children: [
|
|
14191
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-text-xs uf-mb-1.5", style: { color: components.card.labelColor, fontFamily: fonts.medium }, children: [
|
|
13158
14192
|
t8.amount,
|
|
13159
|
-
minimumWithdrawAmountUsd != null && minimumWithdrawAmountUsd > 0 && /* @__PURE__ */ (0,
|
|
14193
|
+
minimumWithdrawAmountUsd != null && minimumWithdrawAmountUsd > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { style: { color: colors2.warning, fontFamily: fonts.regular }, children: ` ($${minimumWithdrawAmountUsd.toFixed(2)} min)` })
|
|
13160
14194
|
] }),
|
|
13161
|
-
/* @__PURE__ */ (0,
|
|
14195
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
13162
14196
|
"style",
|
|
13163
14197
|
{
|
|
13164
14198
|
dangerouslySetInnerHTML: {
|
|
@@ -13166,7 +14200,7 @@ function WithdrawForm({
|
|
|
13166
14200
|
}
|
|
13167
14201
|
}
|
|
13168
14202
|
),
|
|
13169
|
-
/* @__PURE__ */ (0,
|
|
14203
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
|
|
13170
14204
|
"div",
|
|
13171
14205
|
{
|
|
13172
14206
|
className: "uf-flex uf-items-center uf-gap-2 uf-px-3 uf-py-2.5",
|
|
@@ -13176,7 +14210,7 @@ function WithdrawForm({
|
|
|
13176
14210
|
border: `${components.input.borderWidth}px solid ${components.input.borderColor}`
|
|
13177
14211
|
},
|
|
13178
14212
|
children: [
|
|
13179
|
-
/* @__PURE__ */ (0,
|
|
14213
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
13180
14214
|
"input",
|
|
13181
14215
|
{
|
|
13182
14216
|
type: "text",
|
|
@@ -13197,8 +14231,8 @@ function WithdrawForm({
|
|
|
13197
14231
|
}
|
|
13198
14232
|
}
|
|
13199
14233
|
),
|
|
13200
|
-
/* @__PURE__ */ (0,
|
|
13201
|
-
/* @__PURE__ */ (0,
|
|
14234
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "uf-text-sm uf-shrink-0", style: { color: colors2.foregroundMuted, fontFamily: fonts.medium }, children: inputUnit === "crypto" ? tokenSymbol : "USD" }),
|
|
14235
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
13202
14236
|
"button",
|
|
13203
14237
|
{
|
|
13204
14238
|
type: "button",
|
|
@@ -13211,10 +14245,10 @@ function WithdrawForm({
|
|
|
13211
14245
|
]
|
|
13212
14246
|
}
|
|
13213
14247
|
),
|
|
13214
|
-
/* @__PURE__ */ (0,
|
|
13215
|
-
/* @__PURE__ */ (0,
|
|
13216
|
-
/* @__PURE__ */ (0,
|
|
13217
|
-
exchangeRate > 0 && /* @__PURE__ */ (0,
|
|
14248
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-mt-1.5 uf-px-3", children: [
|
|
14249
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
|
|
14250
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: convertedDisplay || (inputUnit === "crypto" ? "$0.00" : `0.00 ${tokenSymbol}`) }),
|
|
14251
|
+
exchangeRate > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
13218
14252
|
"button",
|
|
13219
14253
|
{
|
|
13220
14254
|
type: "button",
|
|
@@ -13222,49 +14256,49 @@ function WithdrawForm({
|
|
|
13222
14256
|
className: "uf-p-0.5 uf-rounded uf-transition-colors hover:uf-opacity-70",
|
|
13223
14257
|
style: { color: colors2.foregroundMuted },
|
|
13224
14258
|
title: "Switch unit",
|
|
13225
|
-
children: /* @__PURE__ */ (0,
|
|
14259
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react25.ArrowUpDown, { className: "uf-w-3 uf-h-3" })
|
|
13226
14260
|
}
|
|
13227
14261
|
)
|
|
13228
14262
|
] }),
|
|
13229
|
-
/* @__PURE__ */ (0,
|
|
13230
|
-
balanceDisplay && /* @__PURE__ */ (0,
|
|
14263
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { children: [
|
|
14264
|
+
balanceDisplay && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: [
|
|
13231
14265
|
t8.balance,
|
|
13232
14266
|
": ",
|
|
13233
14267
|
balanceDisplay
|
|
13234
14268
|
] }),
|
|
13235
|
-
isLoadingBalance && /* @__PURE__ */ (0,
|
|
14269
|
+
isLoadingBalance && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "uf-h-3 uf-w-16 uf-bg-muted uf-rounded uf-animate-pulse" })
|
|
13236
14270
|
] })
|
|
13237
14271
|
] })
|
|
13238
14272
|
] }),
|
|
13239
|
-
/* @__PURE__ */ (0,
|
|
13240
|
-
/* @__PURE__ */ (0,
|
|
14273
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.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: [
|
|
14274
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
|
|
13241
14275
|
"button",
|
|
13242
14276
|
{
|
|
13243
14277
|
type: "button",
|
|
13244
14278
|
onClick: () => setDetailsExpanded(!detailsExpanded),
|
|
13245
14279
|
className: "uf-w-full uf-flex uf-items-center uf-justify-between uf-py-2.5",
|
|
13246
14280
|
children: [
|
|
13247
|
-
/* @__PURE__ */ (0,
|
|
13248
|
-
/* @__PURE__ */ (0,
|
|
13249
|
-
/* @__PURE__ */ (0,
|
|
14281
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
14282
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react25.Clock, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
|
|
14283
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
|
|
13250
14284
|
tCrypto.processingTime.label,
|
|
13251
14285
|
":",
|
|
13252
14286
|
" ",
|
|
13253
|
-
/* @__PURE__ */ (0,
|
|
14287
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: formatProcessingTime2(estimatedProcessingTime) })
|
|
13254
14288
|
] })
|
|
13255
14289
|
] }),
|
|
13256
|
-
detailsExpanded ? /* @__PURE__ */ (0,
|
|
14290
|
+
detailsExpanded ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react25.ChevronUp, { className: "uf-w-4 uf-h-4", style: { color: components.card.actionColor } }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react25.ChevronDown, { className: "uf-w-4 uf-h-4", style: { color: components.card.actionColor } })
|
|
13257
14291
|
]
|
|
13258
14292
|
}
|
|
13259
14293
|
),
|
|
13260
|
-
detailsExpanded && /* @__PURE__ */ (0,
|
|
13261
|
-
/* @__PURE__ */ (0,
|
|
13262
|
-
/* @__PURE__ */ (0,
|
|
13263
|
-
/* @__PURE__ */ (0,
|
|
14294
|
+
detailsExpanded && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-pb-3 uf-space-y-2.5", children: [
|
|
14295
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
14296
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react25.ShieldCheck, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
|
|
14297
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
|
|
13264
14298
|
tCrypto.slippage.label,
|
|
13265
14299
|
":",
|
|
13266
14300
|
" ",
|
|
13267
|
-
/* @__PURE__ */ (0,
|
|
14301
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: [
|
|
13268
14302
|
tCrypto.slippage.auto,
|
|
13269
14303
|
" \u2022 ",
|
|
13270
14304
|
(maxSlippagePercent ?? 0.25).toFixed(2),
|
|
@@ -13272,13 +14306,13 @@ function WithdrawForm({
|
|
|
13272
14306
|
] })
|
|
13273
14307
|
] })
|
|
13274
14308
|
] }),
|
|
13275
|
-
/* @__PURE__ */ (0,
|
|
13276
|
-
/* @__PURE__ */ (0,
|
|
13277
|
-
/* @__PURE__ */ (0,
|
|
14309
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
14310
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react25.DollarSign, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
|
|
14311
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
|
|
13278
14312
|
tCrypto.priceImpact.label,
|
|
13279
14313
|
":",
|
|
13280
14314
|
" ",
|
|
13281
|
-
/* @__PURE__ */ (0,
|
|
14315
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: [
|
|
13282
14316
|
(priceImpactPercent ?? 0).toFixed(2),
|
|
13283
14317
|
"%"
|
|
13284
14318
|
] })
|
|
@@ -13286,18 +14320,18 @@ function WithdrawForm({
|
|
|
13286
14320
|
] })
|
|
13287
14321
|
] })
|
|
13288
14322
|
] }),
|
|
13289
|
-
!canWithdraw && !submitError && /* @__PURE__ */ (0,
|
|
14323
|
+
!canWithdraw && !submitError && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
|
|
13290
14324
|
"div",
|
|
13291
14325
|
{
|
|
13292
14326
|
className: "uf-flex uf-items-start uf-gap-2.5 uf-p-3 uf-rounded-xl",
|
|
13293
14327
|
style: { backgroundColor: colors2.card, border: `1px solid ${colors2.border}` },
|
|
13294
14328
|
children: [
|
|
13295
|
-
/* @__PURE__ */ (0,
|
|
13296
|
-
/* @__PURE__ */ (0,
|
|
14329
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react25.Wallet, { className: "uf-w-4 uf-h-4 uf-flex-shrink-0 uf-mt-0.5", style: { color: colors2.warning } }),
|
|
14330
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.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." })
|
|
13297
14331
|
]
|
|
13298
14332
|
}
|
|
13299
14333
|
),
|
|
13300
|
-
isWalletMatch && connectedWalletName ? /* @__PURE__ */ (0,
|
|
14334
|
+
isWalletMatch && connectedWalletName ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
13301
14335
|
"button",
|
|
13302
14336
|
{
|
|
13303
14337
|
type: "button",
|
|
@@ -13311,16 +14345,16 @@ function WithdrawForm({
|
|
|
13311
14345
|
borderRadius: components.button.borderRadius,
|
|
13312
14346
|
border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
|
|
13313
14347
|
},
|
|
13314
|
-
children: isSubmitting ? /* @__PURE__ */ (0,
|
|
13315
|
-
/* @__PURE__ */ (0,
|
|
14348
|
+
children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
|
|
14349
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react25.Loader2, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
|
|
13316
14350
|
"Processing..."
|
|
13317
|
-
] }) : isOverBalance ? /* @__PURE__ */ (0,
|
|
13318
|
-
/* @__PURE__ */ (0,
|
|
14351
|
+
] }) : isOverBalance ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_jsx_runtime54.Fragment, { children: "Insufficient balance" }) : isBelowMinimum ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_jsx_runtime54.Fragment, { children: "Minimum amount not met" }) : submitError ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_jsx_runtime54.Fragment, { children: "Withdrawal failed. Try again" }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
|
|
14352
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react25.Wallet, { className: "uf-w-4 uf-h-4" }),
|
|
13319
14353
|
"Withdraw from ",
|
|
13320
14354
|
connectedWalletName
|
|
13321
14355
|
] })
|
|
13322
14356
|
}
|
|
13323
|
-
) : /* @__PURE__ */ (0,
|
|
14357
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
13324
14358
|
"button",
|
|
13325
14359
|
{
|
|
13326
14360
|
type: "button",
|
|
@@ -13334,17 +14368,17 @@ function WithdrawForm({
|
|
|
13334
14368
|
borderRadius: components.button.borderRadius,
|
|
13335
14369
|
border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
|
|
13336
14370
|
},
|
|
13337
|
-
children: isSubmitting ? /* @__PURE__ */ (0,
|
|
13338
|
-
/* @__PURE__ */ (0,
|
|
14371
|
+
children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2", children: [
|
|
14372
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react25.Loader2, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
|
|
13339
14373
|
"Processing..."
|
|
13340
14374
|
] }) : isOverBalance ? "Insufficient balance" : isBelowMinimum ? "Minimum amount not met" : submitError ? "Withdrawal failed. Try again" : t8.withdraw
|
|
13341
14375
|
}
|
|
13342
14376
|
),
|
|
13343
|
-
/* @__PURE__ */ (0,
|
|
13344
|
-
/* @__PURE__ */ (0,
|
|
13345
|
-
/* @__PURE__ */ (0,
|
|
14377
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-text-xs uf-pt-1", children: [
|
|
14378
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { children: footerLeft }),
|
|
14379
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(DepositFooterLinks, { onGlossaryClick: () => setGlossaryOpen(true) })
|
|
13346
14380
|
] }),
|
|
13347
|
-
/* @__PURE__ */ (0,
|
|
14381
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
13348
14382
|
GlossaryModal,
|
|
13349
14383
|
{
|
|
13350
14384
|
open: glossaryOpen,
|
|
@@ -13355,15 +14389,15 @@ function WithdrawForm({
|
|
|
13355
14389
|
}
|
|
13356
14390
|
|
|
13357
14391
|
// src/components/withdrawals/WithdrawExecutionItem.tsx
|
|
13358
|
-
var
|
|
13359
|
-
var
|
|
13360
|
-
var
|
|
14392
|
+
var import_lucide_react26 = require("lucide-react");
|
|
14393
|
+
var import_core33 = require("@unifold/core");
|
|
14394
|
+
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
13361
14395
|
function WithdrawExecutionItem({
|
|
13362
14396
|
execution,
|
|
13363
14397
|
onClick
|
|
13364
14398
|
}) {
|
|
13365
14399
|
const { colors: colors2, fonts, components } = useTheme();
|
|
13366
|
-
const isPending = execution.status ===
|
|
14400
|
+
const isPending = execution.status === import_core33.ExecutionStatus.PENDING || execution.status === import_core33.ExecutionStatus.WAITING || execution.status === import_core33.ExecutionStatus.DELAYED;
|
|
13367
14401
|
const formatDateTime = (timestamp) => {
|
|
13368
14402
|
try {
|
|
13369
14403
|
const date = new Date(timestamp);
|
|
@@ -13395,7 +14429,7 @@ function WithdrawExecutionItem({
|
|
|
13395
14429
|
return "$0.00";
|
|
13396
14430
|
}
|
|
13397
14431
|
};
|
|
13398
|
-
return /* @__PURE__ */ (0,
|
|
14432
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
|
|
13399
14433
|
"button",
|
|
13400
14434
|
{
|
|
13401
14435
|
onClick,
|
|
@@ -13406,11 +14440,11 @@ function WithdrawExecutionItem({
|
|
|
13406
14440
|
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
13407
14441
|
},
|
|
13408
14442
|
children: [
|
|
13409
|
-
/* @__PURE__ */ (0,
|
|
13410
|
-
/* @__PURE__ */ (0,
|
|
14443
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "uf-relative uf-flex-shrink-0 uf-w-9 uf-h-9", children: [
|
|
14444
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
13411
14445
|
"img",
|
|
13412
14446
|
{
|
|
13413
|
-
src: execution.destination_token_metadata?.icon_url || (0,
|
|
14447
|
+
src: execution.destination_token_metadata?.icon_url || (0, import_core33.getIconUrl)("/icons/tokens/svg/usdc.svg"),
|
|
13414
14448
|
alt: "Token",
|
|
13415
14449
|
width: 36,
|
|
13416
14450
|
height: 36,
|
|
@@ -13418,12 +14452,12 @@ function WithdrawExecutionItem({
|
|
|
13418
14452
|
className: "uf-rounded-full uf-w-9 uf-h-9"
|
|
13419
14453
|
}
|
|
13420
14454
|
),
|
|
13421
|
-
isPending ? /* @__PURE__ */ (0,
|
|
14455
|
+
isPending ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
13422
14456
|
"div",
|
|
13423
14457
|
{
|
|
13424
14458
|
className: "uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-rounded-full uf-p-0.5",
|
|
13425
14459
|
style: { backgroundColor: colors2.warning },
|
|
13426
|
-
children: /* @__PURE__ */ (0,
|
|
14460
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
13427
14461
|
"svg",
|
|
13428
14462
|
{
|
|
13429
14463
|
width: "10",
|
|
@@ -13431,7 +14465,7 @@ function WithdrawExecutionItem({
|
|
|
13431
14465
|
viewBox: "0 0 12 12",
|
|
13432
14466
|
fill: "none",
|
|
13433
14467
|
className: "uf-animate-spin uf-block",
|
|
13434
|
-
children: /* @__PURE__ */ (0,
|
|
14468
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
13435
14469
|
"path",
|
|
13436
14470
|
{
|
|
13437
14471
|
d: "M6 1V3M6 9V11M1 6H3M9 6H11M2.5 2.5L4 4M8 8L9.5 9.5M2.5 9.5L4 8M8 4L9.5 2.5",
|
|
@@ -13443,12 +14477,12 @@ function WithdrawExecutionItem({
|
|
|
13443
14477
|
}
|
|
13444
14478
|
)
|
|
13445
14479
|
}
|
|
13446
|
-
) : /* @__PURE__ */ (0,
|
|
14480
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
13447
14481
|
"div",
|
|
13448
14482
|
{
|
|
13449
14483
|
className: "uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-rounded-full uf-p-0.5",
|
|
13450
14484
|
style: { backgroundColor: colors2.success },
|
|
13451
|
-
children: /* @__PURE__ */ (0,
|
|
14485
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
13452
14486
|
"svg",
|
|
13453
14487
|
{
|
|
13454
14488
|
width: "10",
|
|
@@ -13456,7 +14490,7 @@ function WithdrawExecutionItem({
|
|
|
13456
14490
|
viewBox: "0 0 12 12",
|
|
13457
14491
|
fill: "none",
|
|
13458
14492
|
className: "uf-block",
|
|
13459
|
-
children: /* @__PURE__ */ (0,
|
|
14493
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
13460
14494
|
"path",
|
|
13461
14495
|
{
|
|
13462
14496
|
d: "M10 3L4.5 8.5L2 6",
|
|
@@ -13471,8 +14505,8 @@ function WithdrawExecutionItem({
|
|
|
13471
14505
|
}
|
|
13472
14506
|
)
|
|
13473
14507
|
] }),
|
|
13474
|
-
/* @__PURE__ */ (0,
|
|
13475
|
-
/* @__PURE__ */ (0,
|
|
14508
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "uf-flex-1 uf-min-w-0", children: [
|
|
14509
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
13476
14510
|
"h3",
|
|
13477
14511
|
{
|
|
13478
14512
|
className: "uf-font-medium uf-text-sm uf-leading-tight",
|
|
@@ -13483,7 +14517,7 @@ function WithdrawExecutionItem({
|
|
|
13483
14517
|
children: isPending ? "Withdrawal processing" : "Withdrawal completed"
|
|
13484
14518
|
}
|
|
13485
14519
|
),
|
|
13486
|
-
/* @__PURE__ */ (0,
|
|
14520
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
13487
14521
|
"p",
|
|
13488
14522
|
{
|
|
13489
14523
|
className: "uf-text-xs uf-leading-tight",
|
|
@@ -13495,7 +14529,7 @@ function WithdrawExecutionItem({
|
|
|
13495
14529
|
}
|
|
13496
14530
|
)
|
|
13497
14531
|
] }),
|
|
13498
|
-
/* @__PURE__ */ (0,
|
|
14532
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
13499
14533
|
"span",
|
|
13500
14534
|
{
|
|
13501
14535
|
className: "uf-font-medium uf-text-sm uf-flex-shrink-0",
|
|
@@ -13506,8 +14540,8 @@ function WithdrawExecutionItem({
|
|
|
13506
14540
|
children: formatUsdAmount2(execution.source_amount_usd || "0")
|
|
13507
14541
|
}
|
|
13508
14542
|
),
|
|
13509
|
-
/* @__PURE__ */ (0,
|
|
13510
|
-
|
|
14543
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
14544
|
+
import_lucide_react26.ChevronRight,
|
|
13511
14545
|
{
|
|
13512
14546
|
className: "uf-w-4 uf-h-4 uf-flex-shrink-0",
|
|
13513
14547
|
style: { color: components.card.actionColor }
|
|
@@ -13519,8 +14553,8 @@ function WithdrawExecutionItem({
|
|
|
13519
14553
|
}
|
|
13520
14554
|
|
|
13521
14555
|
// src/components/withdrawals/WithdrawConfirmingView.tsx
|
|
13522
|
-
var
|
|
13523
|
-
var
|
|
14556
|
+
var import_react22 = require("react");
|
|
14557
|
+
var import_jsx_runtime56 = require("react/jsx-runtime");
|
|
13524
14558
|
function truncateAddress4(addr) {
|
|
13525
14559
|
if (addr.length <= 12) return addr;
|
|
13526
14560
|
return `${addr.slice(0, 6)}...${addr.slice(-4)}`;
|
|
@@ -13533,9 +14567,9 @@ function WithdrawConfirmingView({
|
|
|
13533
14567
|
onViewTracker
|
|
13534
14568
|
}) {
|
|
13535
14569
|
const { colors: colors2, fonts, components } = useTheme();
|
|
13536
|
-
const [showButton, setShowButton] = (0,
|
|
14570
|
+
const [showButton, setShowButton] = (0, import_react22.useState)(false);
|
|
13537
14571
|
const latestExecution = executions.length > 0 ? executions[executions.length - 1] : null;
|
|
13538
|
-
(0,
|
|
14572
|
+
(0, import_react22.useEffect)(() => {
|
|
13539
14573
|
if (latestExecution) return;
|
|
13540
14574
|
const timer = setTimeout(() => setShowButton(true), SHOW_BUTTON_DELAY_MS);
|
|
13541
14575
|
return () => clearTimeout(timer);
|
|
@@ -13543,11 +14577,11 @@ function WithdrawConfirmingView({
|
|
|
13543
14577
|
const btnRadius = components.button.borderRadius;
|
|
13544
14578
|
const btnBorder = `${components.button.borderWidth}px solid ${components.button.borderColor}`;
|
|
13545
14579
|
if (latestExecution) {
|
|
13546
|
-
return /* @__PURE__ */ (0,
|
|
13547
|
-
/* @__PURE__ */ (0,
|
|
13548
|
-
/* @__PURE__ */ (0,
|
|
13549
|
-
/* @__PURE__ */ (0,
|
|
13550
|
-
/* @__PURE__ */ (0,
|
|
14580
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
|
|
14581
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DepositHeader, { title: "Withdrawal Details", showClose: true, onClose }),
|
|
14582
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DepositDetailContent, { execution: latestExecution, variant: "withdraw" }),
|
|
14583
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "uf-flex uf-gap-2 uf-px-2 uf-pt-2", children: [
|
|
14584
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
13551
14585
|
"button",
|
|
13552
14586
|
{
|
|
13553
14587
|
type: "button",
|
|
@@ -13563,7 +14597,7 @@ function WithdrawConfirmingView({
|
|
|
13563
14597
|
children: "Withdrawal History"
|
|
13564
14598
|
}
|
|
13565
14599
|
),
|
|
13566
|
-
/* @__PURE__ */ (0,
|
|
14600
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
13567
14601
|
"button",
|
|
13568
14602
|
{
|
|
13569
14603
|
type: "button",
|
|
@@ -13580,7 +14614,7 @@ function WithdrawConfirmingView({
|
|
|
13580
14614
|
}
|
|
13581
14615
|
)
|
|
13582
14616
|
] }),
|
|
13583
|
-
/* @__PURE__ */ (0,
|
|
14617
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
13584
14618
|
PoweredByUnifold,
|
|
13585
14619
|
{
|
|
13586
14620
|
color: colors2.foregroundMuted,
|
|
@@ -13589,15 +14623,15 @@ function WithdrawConfirmingView({
|
|
|
13589
14623
|
) })
|
|
13590
14624
|
] });
|
|
13591
14625
|
}
|
|
13592
|
-
return /* @__PURE__ */ (0,
|
|
13593
|
-
/* @__PURE__ */ (0,
|
|
13594
|
-
/* @__PURE__ */ (0,
|
|
13595
|
-
/* @__PURE__ */ (0,
|
|
14626
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
|
|
14627
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DepositHeader, { title: "Withdrawal Status", showClose: true, onClose }),
|
|
14628
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-16 uf-px-4", children: [
|
|
14629
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
13596
14630
|
"div",
|
|
13597
14631
|
{
|
|
13598
14632
|
className: "uf-w-20 uf-h-20 uf-rounded-full uf-flex uf-items-center uf-justify-center uf-mb-6",
|
|
13599
14633
|
style: { backgroundColor: `${colors2.primary}20` },
|
|
13600
|
-
children: /* @__PURE__ */ (0,
|
|
14634
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
13601
14635
|
"svg",
|
|
13602
14636
|
{
|
|
13603
14637
|
width: "40",
|
|
@@ -13605,7 +14639,7 @@ function WithdrawConfirmingView({
|
|
|
13605
14639
|
viewBox: "0 0 24 24",
|
|
13606
14640
|
fill: "none",
|
|
13607
14641
|
className: "uf-animate-spin",
|
|
13608
|
-
children: /* @__PURE__ */ (0,
|
|
14642
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
13609
14643
|
"path",
|
|
13610
14644
|
{
|
|
13611
14645
|
d: "M21 12a9 9 0 1 1-6.22-8.56",
|
|
@@ -13618,7 +14652,7 @@ function WithdrawConfirmingView({
|
|
|
13618
14652
|
)
|
|
13619
14653
|
}
|
|
13620
14654
|
),
|
|
13621
|
-
/* @__PURE__ */ (0,
|
|
14655
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
13622
14656
|
"h3",
|
|
13623
14657
|
{
|
|
13624
14658
|
className: "uf-text-xl uf-mb-2",
|
|
@@ -13626,7 +14660,7 @@ function WithdrawConfirmingView({
|
|
|
13626
14660
|
children: "Checking Withdrawal"
|
|
13627
14661
|
}
|
|
13628
14662
|
),
|
|
13629
|
-
/* @__PURE__ */ (0,
|
|
14663
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
13630
14664
|
"p",
|
|
13631
14665
|
{
|
|
13632
14666
|
className: "uf-text-sm uf-text-center",
|
|
@@ -13642,7 +14676,7 @@ function WithdrawConfirmingView({
|
|
|
13642
14676
|
}
|
|
13643
14677
|
)
|
|
13644
14678
|
] }),
|
|
13645
|
-
showButton && /* @__PURE__ */ (0,
|
|
14679
|
+
showButton && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "uf-px-1 uf-pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
13646
14680
|
"button",
|
|
13647
14681
|
{
|
|
13648
14682
|
type: "button",
|
|
@@ -13658,7 +14692,7 @@ function WithdrawConfirmingView({
|
|
|
13658
14692
|
children: "Withdrawal History"
|
|
13659
14693
|
}
|
|
13660
14694
|
) }),
|
|
13661
|
-
/* @__PURE__ */ (0,
|
|
14695
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
13662
14696
|
PoweredByUnifold,
|
|
13663
14697
|
{
|
|
13664
14698
|
color: colors2.foregroundMuted,
|
|
@@ -13669,8 +14703,8 @@ function WithdrawConfirmingView({
|
|
|
13669
14703
|
}
|
|
13670
14704
|
|
|
13671
14705
|
// src/components/withdrawals/WithdrawModal.tsx
|
|
13672
|
-
var
|
|
13673
|
-
var
|
|
14706
|
+
var import_core34 = require("@unifold/core");
|
|
14707
|
+
var import_jsx_runtime57 = require("react/jsx-runtime");
|
|
13674
14708
|
var t9 = i18n.withdrawModal;
|
|
13675
14709
|
var getChainKey5 = (chainId, chainType) => `${chainType}:${chainId}`;
|
|
13676
14710
|
function WithdrawModal({
|
|
@@ -13692,14 +14726,14 @@ function WithdrawModal({
|
|
|
13692
14726
|
hideOverlay = false
|
|
13693
14727
|
}) {
|
|
13694
14728
|
const { colors: colors2, fonts, components } = useTheme();
|
|
13695
|
-
const [containerEl, setContainerEl] = (0,
|
|
13696
|
-
const containerCallbackRef = (0,
|
|
14729
|
+
const [containerEl, setContainerEl] = (0, import_react23.useState)(null);
|
|
14730
|
+
const containerCallbackRef = (0, import_react23.useCallback)((el) => {
|
|
13697
14731
|
setContainerEl(el);
|
|
13698
14732
|
}, []);
|
|
13699
|
-
const [resolvedTheme, setResolvedTheme] = (0,
|
|
14733
|
+
const [resolvedTheme, setResolvedTheme] = (0, import_react23.useState)(
|
|
13700
14734
|
theme === "auto" ? "dark" : theme
|
|
13701
14735
|
);
|
|
13702
|
-
(0,
|
|
14736
|
+
(0, import_react23.useEffect)(() => {
|
|
13703
14737
|
if (theme === "auto") {
|
|
13704
14738
|
const mq = window.matchMedia("(prefers-color-scheme: dark)");
|
|
13705
14739
|
setResolvedTheme(mq.matches ? "dark" : "light");
|
|
@@ -13728,12 +14762,12 @@ function WithdrawModal({
|
|
|
13728
14762
|
publishableKey,
|
|
13729
14763
|
enabled: open
|
|
13730
14764
|
});
|
|
13731
|
-
const [selectedToken, setSelectedToken] = (0,
|
|
13732
|
-
const [selectedChain, setSelectedChain] = (0,
|
|
13733
|
-
const [detectedWallet, setDetectedWallet] = (0,
|
|
14765
|
+
const [selectedToken, setSelectedToken] = (0, import_react23.useState)(null);
|
|
14766
|
+
const [selectedChain, setSelectedChain] = (0, import_react23.useState)(null);
|
|
14767
|
+
const [detectedWallet, setDetectedWallet] = (0, import_react23.useState)(null);
|
|
13734
14768
|
const connectedWalletName = detectedWallet?.name ?? null;
|
|
13735
14769
|
const isWalletMatch = !!detectedWallet;
|
|
13736
|
-
(0,
|
|
14770
|
+
(0, import_react23.useEffect)(() => {
|
|
13737
14771
|
if (!senderAddress || !open) {
|
|
13738
14772
|
setDetectedWallet(null);
|
|
13739
14773
|
return;
|
|
@@ -13746,10 +14780,10 @@ function WithdrawModal({
|
|
|
13746
14780
|
cancelled = true;
|
|
13747
14781
|
};
|
|
13748
14782
|
}, [senderAddress, sourceChainType, open]);
|
|
13749
|
-
const [view, setView] = (0,
|
|
13750
|
-
const [withdrawDepositWalletId, setWithdrawDepositWalletId] = (0,
|
|
13751
|
-
const [selectedExecution, setSelectedExecution] = (0,
|
|
13752
|
-
const [submittedTxInfo, setSubmittedTxInfo] = (0,
|
|
14783
|
+
const [view, setView] = (0, import_react23.useState)("form");
|
|
14784
|
+
const [withdrawDepositWalletId, setWithdrawDepositWalletId] = (0, import_react23.useState)();
|
|
14785
|
+
const [selectedExecution, setSelectedExecution] = (0, import_react23.useState)(null);
|
|
14786
|
+
const [submittedTxInfo, setSubmittedTxInfo] = (0, import_react23.useState)(null);
|
|
13753
14787
|
const { executions: realtimeExecutions } = useWithdrawPolling({
|
|
13754
14788
|
userId: externalUserId,
|
|
13755
14789
|
publishableKey,
|
|
@@ -13759,35 +14793,35 @@ function WithdrawModal({
|
|
|
13759
14793
|
onWithdrawError
|
|
13760
14794
|
});
|
|
13761
14795
|
const { data: allWithdrawalsData } = useExecutions(externalUserId, publishableKey, {
|
|
13762
|
-
actionType:
|
|
14796
|
+
actionType: import_core34.ActionType.Withdraw,
|
|
13763
14797
|
enabled: open,
|
|
13764
14798
|
refetchInterval: view === "tracker" || view === "detail" ? 5e3 : 15e3
|
|
13765
14799
|
});
|
|
13766
14800
|
const allWithdrawals = allWithdrawalsData?.data ?? [];
|
|
13767
|
-
const handleDepositWalletCreation = (0,
|
|
13768
|
-
const { data: wallets } = await (0,
|
|
14801
|
+
const handleDepositWalletCreation = (0, import_react23.useCallback)(async (params) => {
|
|
14802
|
+
const { data: wallets } = await (0, import_core34.createDepositAddress)(
|
|
13769
14803
|
{
|
|
13770
14804
|
external_user_id: externalUserId,
|
|
13771
14805
|
destination_chain_type: params.destinationChainType,
|
|
13772
14806
|
destination_chain_id: params.destinationChainId,
|
|
13773
14807
|
destination_token_address: params.destinationTokenAddress,
|
|
13774
14808
|
recipient_address: params.recipientAddress,
|
|
13775
|
-
action_type:
|
|
14809
|
+
action_type: import_core34.ActionType.Withdraw
|
|
13776
14810
|
},
|
|
13777
14811
|
publishableKey
|
|
13778
14812
|
);
|
|
13779
|
-
const depositWallet = (0,
|
|
14813
|
+
const depositWallet = (0, import_core34.getWalletByChainType)(wallets, sourceChainType);
|
|
13780
14814
|
if (!depositWallet) {
|
|
13781
14815
|
throw new Error(`No deposit wallet available for ${sourceChainType}`);
|
|
13782
14816
|
}
|
|
13783
14817
|
setWithdrawDepositWalletId(depositWallet.id);
|
|
13784
14818
|
return depositWallet;
|
|
13785
14819
|
}, [externalUserId, publishableKey, sourceChainType]);
|
|
13786
|
-
const handleWithdrawSubmitted = (0,
|
|
14820
|
+
const handleWithdrawSubmitted = (0, import_react23.useCallback)((txInfo) => {
|
|
13787
14821
|
setSubmittedTxInfo(txInfo);
|
|
13788
14822
|
setView("confirming");
|
|
13789
14823
|
}, []);
|
|
13790
|
-
(0,
|
|
14824
|
+
(0, import_react23.useEffect)(() => {
|
|
13791
14825
|
if (!destinationTokens.length || selectedToken) return;
|
|
13792
14826
|
const first = destinationTokens[0];
|
|
13793
14827
|
if (first?.chains.length > 0) {
|
|
@@ -13795,8 +14829,8 @@ function WithdrawModal({
|
|
|
13795
14829
|
setSelectedChain(first.chains[0]);
|
|
13796
14830
|
}
|
|
13797
14831
|
}, [destinationTokens, selectedToken]);
|
|
13798
|
-
const resetViewTimeoutRef = (0,
|
|
13799
|
-
const handleClose = (0,
|
|
14832
|
+
const resetViewTimeoutRef = (0, import_react23.useRef)(null);
|
|
14833
|
+
const handleClose = (0, import_react23.useCallback)(() => {
|
|
13800
14834
|
onOpenChange(false);
|
|
13801
14835
|
if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
|
|
13802
14836
|
resetViewTimeoutRef.current = setTimeout(() => {
|
|
@@ -13809,7 +14843,7 @@ function WithdrawModal({
|
|
|
13809
14843
|
resetViewTimeoutRef.current = null;
|
|
13810
14844
|
}, 200);
|
|
13811
14845
|
}, [onOpenChange]);
|
|
13812
|
-
(0,
|
|
14846
|
+
(0, import_react23.useLayoutEffect)(() => {
|
|
13813
14847
|
if (!open) return;
|
|
13814
14848
|
if (resetViewTimeoutRef.current) {
|
|
13815
14849
|
clearTimeout(resetViewTimeoutRef.current);
|
|
@@ -13822,17 +14856,17 @@ function WithdrawModal({
|
|
|
13822
14856
|
setSubmittedTxInfo(null);
|
|
13823
14857
|
setWithdrawDepositWalletId(void 0);
|
|
13824
14858
|
}, [open]);
|
|
13825
|
-
(0,
|
|
14859
|
+
(0, import_react23.useEffect)(() => () => {
|
|
13826
14860
|
if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
|
|
13827
14861
|
}, []);
|
|
13828
|
-
const handleTokenSymbolChange = (0,
|
|
14862
|
+
const handleTokenSymbolChange = (0, import_react23.useCallback)((symbol) => {
|
|
13829
14863
|
const tok = destinationTokens.find((t11) => t11.symbol === symbol);
|
|
13830
14864
|
if (tok) {
|
|
13831
14865
|
setSelectedToken(tok);
|
|
13832
14866
|
if (tok.chains.length > 0) setSelectedChain(tok.chains[0]);
|
|
13833
14867
|
}
|
|
13834
14868
|
}, [destinationTokens]);
|
|
13835
|
-
const handleChainKeyChange = (0,
|
|
14869
|
+
const handleChainKeyChange = (0, import_react23.useCallback)((chainKey) => {
|
|
13836
14870
|
if (!selectedToken) return;
|
|
13837
14871
|
const chain = selectedToken.chains.find((c) => getChainKey5(c.chain_id, c.chain_type) === chainKey);
|
|
13838
14872
|
if (chain) setSelectedChain(chain);
|
|
@@ -13840,8 +14874,8 @@ function WithdrawModal({
|
|
|
13840
14874
|
const isSourceSupported = sourceValidation?.isSupported ?? null;
|
|
13841
14875
|
const canWithdraw = !!onWithdraw || isWalletMatch;
|
|
13842
14876
|
const isAnyLoading = tokensLoading || isCheckingSourceToken;
|
|
13843
|
-
const withdrawPoweredByFooter = /* @__PURE__ */ (0,
|
|
13844
|
-
return /* @__PURE__ */ (0,
|
|
14877
|
+
const withdrawPoweredByFooter = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(PoweredByUnifold, { color: colors2.foregroundMuted, className: "uf-flex uf-justify-center uf-shrink-0" }) });
|
|
14878
|
+
return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(PortalContainerProvider, { value: hideOverlay ? containerEl : null, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Dialog, { open: hideOverlay || open, onOpenChange: hideOverlay ? void 0 : handleClose, modal: !hideOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
|
|
13845
14879
|
DialogContent,
|
|
13846
14880
|
{
|
|
13847
14881
|
ref: hideOverlay ? containerCallbackRef : void 0,
|
|
@@ -13850,7 +14884,7 @@ function WithdrawModal({
|
|
|
13850
14884
|
style: { backgroundColor: colors2.background },
|
|
13851
14885
|
onPointerDownOutside: (e) => e.preventDefault(),
|
|
13852
14886
|
onInteractOutside: (e) => e.preventDefault(),
|
|
13853
|
-
children: /* @__PURE__ */ (0,
|
|
14887
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ThemeStyleInjector, { children: view === "confirming" && submittedTxInfo ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
|
|
13854
14888
|
WithdrawConfirmingView,
|
|
13855
14889
|
{
|
|
13856
14890
|
txInfo: submittedTxInfo,
|
|
@@ -13858,18 +14892,18 @@ function WithdrawModal({
|
|
|
13858
14892
|
onClose: handleClose,
|
|
13859
14893
|
onViewTracker: () => setView("tracker")
|
|
13860
14894
|
}
|
|
13861
|
-
) : view === "detail" && selectedExecution ? /* @__PURE__ */ (0,
|
|
13862
|
-
/* @__PURE__ */ (0,
|
|
14895
|
+
) : view === "detail" && selectedExecution ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
|
|
14896
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DepositHeader, { title: "Withdrawal Details", showBack: true, showClose: !hideOverlay, onBack: () => {
|
|
13863
14897
|
setSelectedExecution(null);
|
|
13864
14898
|
setView("tracker");
|
|
13865
14899
|
}, onClose: handleClose }),
|
|
13866
|
-
/* @__PURE__ */ (0,
|
|
14900
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DepositDetailContent, { execution: selectedExecution, variant: "withdraw" }),
|
|
13867
14901
|
withdrawPoweredByFooter
|
|
13868
14902
|
] }) : view === "tracker" ? (
|
|
13869
14903
|
/* ---------- Tracker view: execution list ---------- */
|
|
13870
|
-
/* @__PURE__ */ (0,
|
|
13871
|
-
/* @__PURE__ */ (0,
|
|
13872
|
-
/* @__PURE__ */ (0,
|
|
14904
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
|
|
14905
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DepositHeader, { title: "Withdrawal History", showBack: true, showClose: !hideOverlay, onBack: () => setView("form"), onClose: handleClose }),
|
|
14906
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "uf-flex uf-flex-col uf-gap-2", style: { minHeight: 200 }, children: allWithdrawals.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "uf-flex uf-items-center uf-justify-center uf-py-8", children: /* @__PURE__ */ (0, import_jsx_runtime57.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_runtime57.jsx)(
|
|
13873
14907
|
WithdrawExecutionItem,
|
|
13874
14908
|
{
|
|
13875
14909
|
execution: ex,
|
|
@@ -13884,15 +14918,15 @@ function WithdrawModal({
|
|
|
13884
14918
|
] })
|
|
13885
14919
|
) : (
|
|
13886
14920
|
/* ---------- Form view (default) ---------- */
|
|
13887
|
-
/* @__PURE__ */ (0,
|
|
13888
|
-
/* @__PURE__ */ (0,
|
|
13889
|
-
/* @__PURE__ */ (0,
|
|
13890
|
-
isAnyLoading ? /* @__PURE__ */ (0,
|
|
13891
|
-
/* @__PURE__ */ (0,
|
|
13892
|
-
/* @__PURE__ */ (0,
|
|
13893
|
-
/* @__PURE__ */ (0,
|
|
13894
|
-
] }) : /* @__PURE__ */ (0,
|
|
13895
|
-
/* @__PURE__ */ (0,
|
|
14921
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
|
|
14922
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DepositHeader, { title: modalTitle || t9.title, showClose: !hideOverlay, onClose: handleClose }),
|
|
14923
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-3", children: [
|
|
14924
|
+
isAnyLoading ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "uf-space-y-3", children: [1, 2, 3].map((i) => /* @__PURE__ */ (0, import_jsx_runtime57.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_runtime57.jsx)("div", { className: "uf-bg-muted uf-rounded-lg uf-w-full uf-h-10" }) }, i)) }) : isSourceSupported === false ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
|
|
14925
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.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_runtime57.jsx)(import_lucide_react27.AlertTriangle, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
|
|
14926
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-mb-2", style: { color: colors2.foreground, fontFamily: fonts.medium }, children: "Unsupported Source Token" }),
|
|
14927
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "uf-text-sm uf-max-w-[280px]", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: sourceValidation?.errorMessage })
|
|
14928
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
|
|
14929
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
|
|
13896
14930
|
WithdrawDoubleInput,
|
|
13897
14931
|
{
|
|
13898
14932
|
tokens: destinationTokens,
|
|
@@ -13903,7 +14937,7 @@ function WithdrawModal({
|
|
|
13903
14937
|
isLoading: tokensLoading
|
|
13904
14938
|
}
|
|
13905
14939
|
),
|
|
13906
|
-
/* @__PURE__ */ (0,
|
|
14940
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
|
|
13907
14941
|
WithdrawForm,
|
|
13908
14942
|
{
|
|
13909
14943
|
publishableKey,
|
|
@@ -13929,16 +14963,16 @@ function WithdrawModal({
|
|
|
13929
14963
|
onWithdrawError,
|
|
13930
14964
|
onDepositWalletCreation: handleDepositWalletCreation,
|
|
13931
14965
|
onWithdrawSubmitted: handleWithdrawSubmitted,
|
|
13932
|
-
footerLeft: /* @__PURE__ */ (0,
|
|
14966
|
+
footerLeft: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
|
|
13933
14967
|
"button",
|
|
13934
14968
|
{
|
|
13935
14969
|
onClick: () => setView("tracker"),
|
|
13936
14970
|
className: "uf-flex uf-items-center uf-gap-1 uf-transition-colors hover:uf-opacity-70",
|
|
13937
14971
|
style: { color: colors2.foregroundMuted },
|
|
13938
14972
|
children: [
|
|
13939
|
-
/* @__PURE__ */ (0,
|
|
14973
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react27.Clock, { className: "uf-w-3.5 uf-h-3.5" }),
|
|
13940
14974
|
"Withdrawal History",
|
|
13941
|
-
/* @__PURE__ */ (0,
|
|
14975
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react27.ChevronRight, { className: "uf-w-3 uf-h-3" })
|
|
13942
14976
|
]
|
|
13943
14977
|
}
|
|
13944
14978
|
)
|
|
@@ -13954,9 +14988,9 @@ function WithdrawModal({
|
|
|
13954
14988
|
}
|
|
13955
14989
|
|
|
13956
14990
|
// src/components/withdrawals/WithdrawTokenSelector.tsx
|
|
13957
|
-
var
|
|
13958
|
-
var
|
|
13959
|
-
var
|
|
14991
|
+
var import_react24 = require("react");
|
|
14992
|
+
var import_lucide_react28 = require("lucide-react");
|
|
14993
|
+
var import_jsx_runtime58 = require("react/jsx-runtime");
|
|
13960
14994
|
var t10 = i18n.withdrawModal;
|
|
13961
14995
|
function WithdrawTokenSelector({
|
|
13962
14996
|
tokens,
|
|
@@ -13964,9 +14998,9 @@ function WithdrawTokenSelector({
|
|
|
13964
14998
|
onBack
|
|
13965
14999
|
}) {
|
|
13966
15000
|
const { themeClass, colors: colors2, fonts, components } = useTheme();
|
|
13967
|
-
const [searchQuery, setSearchQuery] = (0,
|
|
13968
|
-
const [hoveredKey, setHoveredKey] = (0,
|
|
13969
|
-
const allOptions = (0,
|
|
15001
|
+
const [searchQuery, setSearchQuery] = (0, import_react24.useState)("");
|
|
15002
|
+
const [hoveredKey, setHoveredKey] = (0, import_react24.useState)(null);
|
|
15003
|
+
const allOptions = (0, import_react24.useMemo)(() => {
|
|
13970
15004
|
const options = [];
|
|
13971
15005
|
tokens.forEach((token) => {
|
|
13972
15006
|
token.chains.forEach((chain) => {
|
|
@@ -13975,21 +15009,21 @@ function WithdrawTokenSelector({
|
|
|
13975
15009
|
});
|
|
13976
15010
|
return options;
|
|
13977
15011
|
}, [tokens]);
|
|
13978
|
-
const filteredOptions = (0,
|
|
15012
|
+
const filteredOptions = (0, import_react24.useMemo)(() => {
|
|
13979
15013
|
if (!searchQuery.trim()) return allOptions;
|
|
13980
15014
|
const query = searchQuery.toLowerCase();
|
|
13981
15015
|
return allOptions.filter(
|
|
13982
15016
|
({ token, chain }) => token.symbol.toLowerCase().includes(query) || token.name.toLowerCase().includes(query) || chain.chain_name.toLowerCase().includes(query)
|
|
13983
15017
|
);
|
|
13984
15018
|
}, [allOptions, searchQuery]);
|
|
13985
|
-
return /* @__PURE__ */ (0,
|
|
15019
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
|
|
13986
15020
|
"div",
|
|
13987
15021
|
{
|
|
13988
15022
|
className: "uf-flex uf-flex-col",
|
|
13989
15023
|
style: { minHeight: 0, flex: 1 },
|
|
13990
15024
|
children: [
|
|
13991
|
-
/* @__PURE__ */ (0,
|
|
13992
|
-
/* @__PURE__ */ (0,
|
|
15025
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "uf-pb-3", children: [
|
|
15026
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
13993
15027
|
"style",
|
|
13994
15028
|
{
|
|
13995
15029
|
dangerouslySetInnerHTML: {
|
|
@@ -13997,15 +15031,15 @@ function WithdrawTokenSelector({
|
|
|
13997
15031
|
}
|
|
13998
15032
|
}
|
|
13999
15033
|
),
|
|
14000
|
-
/* @__PURE__ */ (0,
|
|
14001
|
-
/* @__PURE__ */ (0,
|
|
14002
|
-
|
|
15034
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { style: { position: "relative" }, children: [
|
|
15035
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
15036
|
+
import_lucide_react28.Search,
|
|
14003
15037
|
{
|
|
14004
15038
|
className: "uf-absolute uf-left-3 uf-top-1/2 uf--translate-y-1/2 uf-w-4 uf-h-4",
|
|
14005
15039
|
style: { color: components.search.placeholderColor }
|
|
14006
15040
|
}
|
|
14007
15041
|
),
|
|
14008
|
-
/* @__PURE__ */ (0,
|
|
15042
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
14009
15043
|
"input",
|
|
14010
15044
|
{
|
|
14011
15045
|
type: "text",
|
|
@@ -14024,7 +15058,7 @@ function WithdrawTokenSelector({
|
|
|
14024
15058
|
)
|
|
14025
15059
|
] })
|
|
14026
15060
|
] }),
|
|
14027
|
-
/* @__PURE__ */ (0,
|
|
15061
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
14028
15062
|
"div",
|
|
14029
15063
|
{
|
|
14030
15064
|
className: "uf-text-xs uf-mb-2",
|
|
@@ -14035,12 +15069,12 @@ function WithdrawTokenSelector({
|
|
|
14035
15069
|
children: t10.selectToken
|
|
14036
15070
|
}
|
|
14037
15071
|
),
|
|
14038
|
-
/* @__PURE__ */ (0,
|
|
15072
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
14039
15073
|
"div",
|
|
14040
15074
|
{
|
|
14041
15075
|
className: "uf-flex-1 uf-overflow-y-auto uf-min-h-0 uf--mx-6 uf-px-6 uf-pb-3",
|
|
14042
15076
|
style: { scrollbarWidth: "none" },
|
|
14043
|
-
children: filteredOptions.length === 0 ? /* @__PURE__ */ (0,
|
|
15077
|
+
children: filteredOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
14044
15078
|
"div",
|
|
14045
15079
|
{
|
|
14046
15080
|
style: {
|
|
@@ -14052,9 +15086,9 @@ function WithdrawTokenSelector({
|
|
|
14052
15086
|
},
|
|
14053
15087
|
children: t10.noTokensAvailable
|
|
14054
15088
|
}
|
|
14055
|
-
) : /* @__PURE__ */ (0,
|
|
15089
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: filteredOptions.map(({ token, chain }) => {
|
|
14056
15090
|
const key = `${token.symbol}-${chain.chain_type}:${chain.chain_id}`;
|
|
14057
|
-
return /* @__PURE__ */ (0,
|
|
15091
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
|
|
14058
15092
|
"button",
|
|
14059
15093
|
{
|
|
14060
15094
|
type: "button",
|
|
@@ -14075,8 +15109,8 @@ function WithdrawTokenSelector({
|
|
|
14075
15109
|
backgroundColor: hoveredKey === key ? colors2.cardHover : "transparent"
|
|
14076
15110
|
},
|
|
14077
15111
|
children: [
|
|
14078
|
-
/* @__PURE__ */ (0,
|
|
14079
|
-
/* @__PURE__ */ (0,
|
|
15112
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { style: { position: "relative", flexShrink: 0 }, children: [
|
|
15113
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
14080
15114
|
"img",
|
|
14081
15115
|
{
|
|
14082
15116
|
src: token.icon_url,
|
|
@@ -14087,7 +15121,7 @@ function WithdrawTokenSelector({
|
|
|
14087
15121
|
className: "uf-rounded-full"
|
|
14088
15122
|
}
|
|
14089
15123
|
),
|
|
14090
|
-
/* @__PURE__ */ (0,
|
|
15124
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
14091
15125
|
"div",
|
|
14092
15126
|
{
|
|
14093
15127
|
style: {
|
|
@@ -14095,7 +15129,7 @@ function WithdrawTokenSelector({
|
|
|
14095
15129
|
bottom: -4,
|
|
14096
15130
|
right: -4
|
|
14097
15131
|
},
|
|
14098
|
-
children: /* @__PURE__ */ (0,
|
|
15132
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
14099
15133
|
"img",
|
|
14100
15134
|
{
|
|
14101
15135
|
src: chain.icon_url,
|
|
@@ -14109,8 +15143,8 @@ function WithdrawTokenSelector({
|
|
|
14109
15143
|
}
|
|
14110
15144
|
)
|
|
14111
15145
|
] }),
|
|
14112
|
-
/* @__PURE__ */ (0,
|
|
14113
|
-
/* @__PURE__ */ (0,
|
|
15146
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
15147
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
14114
15148
|
"div",
|
|
14115
15149
|
{
|
|
14116
15150
|
style: {
|
|
@@ -14122,7 +15156,7 @@ function WithdrawTokenSelector({
|
|
|
14122
15156
|
children: token.symbol
|
|
14123
15157
|
}
|
|
14124
15158
|
),
|
|
14125
|
-
/* @__PURE__ */ (0,
|
|
15159
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
|
|
14126
15160
|
"div",
|
|
14127
15161
|
{
|
|
14128
15162
|
style: {
|
|
@@ -14145,7 +15179,7 @@ function WithdrawTokenSelector({
|
|
|
14145
15179
|
}) })
|
|
14146
15180
|
}
|
|
14147
15181
|
),
|
|
14148
|
-
/* @__PURE__ */ (0,
|
|
15182
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "uf-pt-3 uf-pb-2 uf-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
14149
15183
|
PoweredByUnifold,
|
|
14150
15184
|
{
|
|
14151
15185
|
color: colors2.foregroundMuted,
|
|
@@ -14160,6 +15194,7 @@ function WithdrawTokenSelector({
|
|
|
14160
15194
|
0 && (module.exports = {
|
|
14161
15195
|
Button,
|
|
14162
15196
|
BuyWithCard,
|
|
15197
|
+
CheckoutModal,
|
|
14163
15198
|
ConfirmingView,
|
|
14164
15199
|
CurrencyListItem,
|
|
14165
15200
|
CurrencyListSection,
|
|
@@ -14183,6 +15218,7 @@ function WithdrawTokenSelector({
|
|
|
14183
15218
|
DialogPortal,
|
|
14184
15219
|
DialogTitle,
|
|
14185
15220
|
DialogTrigger,
|
|
15221
|
+
HYPERCORE_CHAIN_ID,
|
|
14186
15222
|
Select,
|
|
14187
15223
|
SelectContent,
|
|
14188
15224
|
SelectGroup,
|
|
@@ -14214,14 +15250,18 @@ function WithdrawTokenSelector({
|
|
|
14214
15250
|
defaultColors,
|
|
14215
15251
|
detectBrowserWallet,
|
|
14216
15252
|
getColors,
|
|
15253
|
+
isHypercoreChain,
|
|
14217
15254
|
mergeColors,
|
|
14218
15255
|
resolveComponentTokens,
|
|
14219
15256
|
sendEvmWithdraw,
|
|
15257
|
+
sendHypercoreWithdraw,
|
|
14220
15258
|
sendSolanaWithdraw,
|
|
14221
15259
|
truncateAddress,
|
|
14222
15260
|
useAddressBalance,
|
|
14223
15261
|
useAllowedCountry,
|
|
14224
15262
|
useDepositPolling,
|
|
15263
|
+
useDepositQuote,
|
|
15264
|
+
usePaymentIntent,
|
|
14225
15265
|
useSourceTokenValidation,
|
|
14226
15266
|
useSupportedDestinationTokens,
|
|
14227
15267
|
useTheme,
|