@unifold/ui-react 0.1.42 → 0.1.44
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +133 -39
- package/dist/index.d.ts +133 -39
- package/dist/index.js +1530 -471
- package/dist/index.mjs +1529 -462
- 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,13 @@ 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");
|
|
13592
|
+
var import_core33 = require("@unifold/core");
|
|
12614
13593
|
|
|
12615
13594
|
// src/hooks/use-verify-recipient-address.ts
|
|
12616
|
-
var
|
|
12617
|
-
var
|
|
13595
|
+
var import_react_query15 = require("@tanstack/react-query");
|
|
13596
|
+
var import_core31 = require("@unifold/core");
|
|
12618
13597
|
function useVerifyRecipientAddress(params) {
|
|
12619
13598
|
const {
|
|
12620
13599
|
chainType,
|
|
@@ -12626,7 +13605,7 @@ function useVerifyRecipientAddress(params) {
|
|
|
12626
13605
|
} = params;
|
|
12627
13606
|
const trimmedAddress = recipientAddress?.trim() || "";
|
|
12628
13607
|
const hasAllParams = !!chainType && !!chainId && !!tokenAddress && trimmedAddress.length > 0;
|
|
12629
|
-
return (0,
|
|
13608
|
+
return (0, import_react_query15.useQuery)({
|
|
12630
13609
|
queryKey: [
|
|
12631
13610
|
"unifold",
|
|
12632
13611
|
"verifyRecipientAddress",
|
|
@@ -12636,7 +13615,7 @@ function useVerifyRecipientAddress(params) {
|
|
|
12636
13615
|
trimmedAddress,
|
|
12637
13616
|
publishableKey
|
|
12638
13617
|
],
|
|
12639
|
-
queryFn: () => (0,
|
|
13618
|
+
queryFn: () => (0, import_core31.verifyRecipientAddress)(
|
|
12640
13619
|
{
|
|
12641
13620
|
chain_type: chainType,
|
|
12642
13621
|
chain_id: chainId,
|
|
@@ -12655,7 +13634,7 @@ function useVerifyRecipientAddress(params) {
|
|
|
12655
13634
|
}
|
|
12656
13635
|
|
|
12657
13636
|
// src/components/withdrawals/send-withdraw.ts
|
|
12658
|
-
var
|
|
13637
|
+
var import_core32 = require("@unifold/core");
|
|
12659
13638
|
async function sendEvmWithdraw(params) {
|
|
12660
13639
|
const {
|
|
12661
13640
|
provider,
|
|
@@ -12733,7 +13712,7 @@ async function sendSolanaWithdraw(params) {
|
|
|
12733
13712
|
if (!provider.publicKey) {
|
|
12734
13713
|
await provider.connect();
|
|
12735
13714
|
}
|
|
12736
|
-
const buildResponse = await (0,
|
|
13715
|
+
const buildResponse = await (0, import_core32.buildSolanaTransaction)(
|
|
12737
13716
|
{
|
|
12738
13717
|
chain_id: "mainnet",
|
|
12739
13718
|
token_address: sourceTokenAddress === "" ? "native" : sourceTokenAddress,
|
|
@@ -12759,15 +13738,62 @@ async function sendSolanaWithdraw(params) {
|
|
|
12759
13738
|
for (let i = 0; i < serialized.length; i++) {
|
|
12760
13739
|
binaryStr += String.fromCharCode(serialized[i]);
|
|
12761
13740
|
}
|
|
12762
|
-
const sendResponse = await (0,
|
|
13741
|
+
const sendResponse = await (0, import_core32.sendSolanaTransaction)(
|
|
12763
13742
|
{ chain_id: "mainnet", signed_transaction: btoa(binaryStr) },
|
|
12764
13743
|
publishableKey
|
|
12765
13744
|
);
|
|
12766
13745
|
return sendResponse.signature;
|
|
12767
13746
|
}
|
|
13747
|
+
var HYPERCORE_CHAIN_ID = "1337";
|
|
13748
|
+
var HYPERCORE_SPOT_USDC_ADDRESS = "0x6d1e7cde53ba9467b783cb7c530ce054";
|
|
13749
|
+
function isHypercoreChain(chainId) {
|
|
13750
|
+
return chainId === HYPERCORE_CHAIN_ID;
|
|
13751
|
+
}
|
|
13752
|
+
async function sendHypercoreWithdraw(params) {
|
|
13753
|
+
const {
|
|
13754
|
+
provider,
|
|
13755
|
+
fromAddress,
|
|
13756
|
+
depositWalletAddress,
|
|
13757
|
+
sourceTokenAddress,
|
|
13758
|
+
amount,
|
|
13759
|
+
tokenSymbol,
|
|
13760
|
+
publishableKey
|
|
13761
|
+
} = params;
|
|
13762
|
+
const isSpot = sourceTokenAddress.toLowerCase() === HYPERCORE_SPOT_USDC_ADDRESS;
|
|
13763
|
+
const currentChainHex = await provider.request({
|
|
13764
|
+
method: "eth_chainId",
|
|
13765
|
+
params: []
|
|
13766
|
+
});
|
|
13767
|
+
const activeChainId = String(parseInt(currentChainHex, 16));
|
|
13768
|
+
const buildResult = await (0, import_core32.buildHypercoreTransaction)(
|
|
13769
|
+
{
|
|
13770
|
+
action_type: isSpot ? "spot_send" : "usd_send",
|
|
13771
|
+
signature_chain_type: "ethereum",
|
|
13772
|
+
signature_chain_id: activeChainId,
|
|
13773
|
+
recipient_address: depositWalletAddress,
|
|
13774
|
+
token_address: sourceTokenAddress,
|
|
13775
|
+
token_symbol: tokenSymbol || void 0,
|
|
13776
|
+
amount
|
|
13777
|
+
},
|
|
13778
|
+
publishableKey
|
|
13779
|
+
);
|
|
13780
|
+
const signature = await provider.request({
|
|
13781
|
+
method: "eth_signTypedData_v4",
|
|
13782
|
+
params: [fromAddress, JSON.stringify(buildResult.typed_data)]
|
|
13783
|
+
});
|
|
13784
|
+
await (0, import_core32.sendHypercoreTransaction)(
|
|
13785
|
+
{
|
|
13786
|
+
action_payload: buildResult.action_payload,
|
|
13787
|
+
signature,
|
|
13788
|
+
nonce: buildResult.nonce
|
|
13789
|
+
},
|
|
13790
|
+
publishableKey
|
|
13791
|
+
);
|
|
13792
|
+
}
|
|
12768
13793
|
async function detectBrowserWallet(chainType, senderAddress) {
|
|
12769
13794
|
const win = typeof window !== "undefined" ? window : null;
|
|
12770
13795
|
if (!win || !senderAddress) return null;
|
|
13796
|
+
if (getUserDisconnectedWallet()) return null;
|
|
12771
13797
|
const anyWin = win;
|
|
12772
13798
|
if (chainType === "solana") {
|
|
12773
13799
|
const solProviders = [];
|
|
@@ -12801,28 +13827,44 @@ async function detectBrowserWallet(chainType, senderAddress) {
|
|
|
12801
13827
|
evmProviders.push({ provider: p, name });
|
|
12802
13828
|
}
|
|
12803
13829
|
};
|
|
12804
|
-
|
|
12805
|
-
|
|
12806
|
-
add(anyWin.trustwallet?.ethereum, "Trust Wallet");
|
|
12807
|
-
add(anyWin.okxwallet, "OKX Wallet");
|
|
12808
|
-
if (anyWin.__eip6963Providers) {
|
|
12809
|
-
for (const detail of anyWin.__eip6963Providers) {
|
|
12810
|
-
const rdns = detail.info?.rdns || "";
|
|
12811
|
-
let name = detail.info?.name || "Wallet";
|
|
12812
|
-
if (rdns.includes("metamask")) name = "MetaMask";
|
|
12813
|
-
else if (rdns.includes("rabby")) name = "Rabby";
|
|
12814
|
-
else if (rdns.includes("rainbow")) name = "Rainbow";
|
|
12815
|
-
add(detail.provider, name);
|
|
12816
|
-
}
|
|
13830
|
+
if (!anyWin.__eip6963Providers) {
|
|
13831
|
+
anyWin.__eip6963Providers = [];
|
|
12817
13832
|
}
|
|
12818
|
-
|
|
12819
|
-
const
|
|
12820
|
-
|
|
12821
|
-
|
|
12822
|
-
|
|
12823
|
-
|
|
12824
|
-
|
|
12825
|
-
|
|
13833
|
+
const handleAnnouncement = (event) => {
|
|
13834
|
+
const { detail } = event;
|
|
13835
|
+
if (!detail?.info || !detail?.provider) return;
|
|
13836
|
+
const exists = anyWin.__eip6963Providers.some((p) => p.info.uuid === detail.info.uuid);
|
|
13837
|
+
if (!exists) anyWin.__eip6963Providers.push(detail);
|
|
13838
|
+
};
|
|
13839
|
+
win.addEventListener("eip6963:announceProvider", handleAnnouncement);
|
|
13840
|
+
win.dispatchEvent(new Event("eip6963:requestProvider"));
|
|
13841
|
+
win.removeEventListener("eip6963:announceProvider", handleAnnouncement);
|
|
13842
|
+
for (const detail of anyWin.__eip6963Providers) {
|
|
13843
|
+
const rdns = detail.info?.rdns || "";
|
|
13844
|
+
let name = detail.info?.name || "Wallet";
|
|
13845
|
+
if (rdns.includes("metamask")) name = "MetaMask";
|
|
13846
|
+
else if (rdns.includes("phantom")) name = "Phantom";
|
|
13847
|
+
else if (rdns.includes("coinbase")) name = "Coinbase";
|
|
13848
|
+
else if (rdns.includes("rabby")) name = "Rabby";
|
|
13849
|
+
else if (rdns.includes("rainbow")) name = "Rainbow";
|
|
13850
|
+
else if (rdns.includes("okx")) name = "OKX Wallet";
|
|
13851
|
+
else if (rdns.includes("trust")) name = "Trust Wallet";
|
|
13852
|
+
add(detail.provider, name);
|
|
13853
|
+
}
|
|
13854
|
+
if (evmProviders.length === 0) {
|
|
13855
|
+
add(anyWin.phantom?.ethereum, "Phantom");
|
|
13856
|
+
add(anyWin.coinbaseWalletExtension, "Coinbase");
|
|
13857
|
+
add(anyWin.trustwallet?.ethereum, "Trust Wallet");
|
|
13858
|
+
add(anyWin.okxwallet, "OKX Wallet");
|
|
13859
|
+
if (evmProviders.length === 0 && win.ethereum) {
|
|
13860
|
+
const eth = win.ethereum;
|
|
13861
|
+
let name = "Wallet";
|
|
13862
|
+
if (eth.isMetaMask && !eth.isPhantom && !eth.isRabby) name = "MetaMask";
|
|
13863
|
+
else if (eth.isRabby) name = "Rabby";
|
|
13864
|
+
else if (eth.isRainbow) name = "Rainbow";
|
|
13865
|
+
else if (eth.isCoinbaseWallet) name = "Coinbase";
|
|
13866
|
+
add(eth, name);
|
|
13867
|
+
}
|
|
12826
13868
|
}
|
|
12827
13869
|
for (const { provider, name } of evmProviders) {
|
|
12828
13870
|
try {
|
|
@@ -12838,7 +13880,7 @@ async function detectBrowserWallet(chainType, senderAddress) {
|
|
|
12838
13880
|
}
|
|
12839
13881
|
|
|
12840
13882
|
// src/components/withdrawals/WithdrawForm.tsx
|
|
12841
|
-
var
|
|
13883
|
+
var import_jsx_runtime54 = require("react/jsx-runtime");
|
|
12842
13884
|
var t8 = i18n.withdrawModal;
|
|
12843
13885
|
var tCrypto = i18n.transferCrypto;
|
|
12844
13886
|
function formatProcessingTime2(seconds) {
|
|
@@ -12878,12 +13920,9 @@ function WithdrawForm({
|
|
|
12878
13920
|
estimatedProcessingTime,
|
|
12879
13921
|
maxSlippagePercent,
|
|
12880
13922
|
priceImpactPercent,
|
|
12881
|
-
|
|
13923
|
+
senderAddress,
|
|
12882
13924
|
sourceChainId,
|
|
12883
13925
|
sourceTokenAddress,
|
|
12884
|
-
isWalletMatch,
|
|
12885
|
-
connectedWalletName,
|
|
12886
|
-
canWithdraw,
|
|
12887
13926
|
onWithdraw,
|
|
12888
13927
|
onWithdrawError,
|
|
12889
13928
|
onDepositWalletCreation,
|
|
@@ -12891,22 +13930,22 @@ function WithdrawForm({
|
|
|
12891
13930
|
footerLeft
|
|
12892
13931
|
}) {
|
|
12893
13932
|
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,
|
|
13933
|
+
const [recipientAddress, setRecipientAddress] = (0, import_react21.useState)(recipientAddressProp || "");
|
|
13934
|
+
const [amount, setAmount] = (0, import_react21.useState)("");
|
|
13935
|
+
const [inputUnit, setInputUnit] = (0, import_react21.useState)("crypto");
|
|
13936
|
+
const [isSubmitting, setIsSubmitting] = (0, import_react21.useState)(false);
|
|
13937
|
+
const [submitError, setSubmitError] = (0, import_react21.useState)(null);
|
|
13938
|
+
const [detailsExpanded, setDetailsExpanded] = (0, import_react21.useState)(false);
|
|
13939
|
+
const [glossaryOpen, setGlossaryOpen] = (0, import_react21.useState)(false);
|
|
13940
|
+
(0, import_react21.useEffect)(() => {
|
|
12902
13941
|
setRecipientAddress(recipientAddressProp || "");
|
|
12903
13942
|
setAmount("");
|
|
12904
13943
|
setInputUnit("crypto");
|
|
12905
13944
|
setSubmitError(null);
|
|
12906
13945
|
}, [recipientAddressProp]);
|
|
12907
13946
|
const trimmedAddress = recipientAddress.trim();
|
|
12908
|
-
const [debouncedAddress, setDebouncedAddress] = (0,
|
|
12909
|
-
(0,
|
|
13947
|
+
const [debouncedAddress, setDebouncedAddress] = (0, import_react21.useState)(trimmedAddress);
|
|
13948
|
+
(0, import_react21.useEffect)(() => {
|
|
12910
13949
|
const id = setTimeout(() => setDebouncedAddress(trimmedAddress), 500);
|
|
12911
13950
|
return () => clearTimeout(id);
|
|
12912
13951
|
}, [trimmedAddress]);
|
|
@@ -12923,7 +13962,7 @@ function WithdrawForm({
|
|
|
12923
13962
|
enabled: debouncedAddress.length > 5 && !!selectedChain
|
|
12924
13963
|
});
|
|
12925
13964
|
const isDebouncing = trimmedAddress !== debouncedAddress;
|
|
12926
|
-
const addressError = (0,
|
|
13965
|
+
const addressError = (0, import_react21.useMemo)(() => {
|
|
12927
13966
|
if (!trimmedAddress || trimmedAddress.length <= 5) return null;
|
|
12928
13967
|
if (isDebouncing || isVerifyingAddress) return null;
|
|
12929
13968
|
if (verifyError) return t8.invalidAddress;
|
|
@@ -12937,47 +13976,47 @@ function WithdrawForm({
|
|
|
12937
13976
|
return null;
|
|
12938
13977
|
}, [trimmedAddress, isDebouncing, isVerifyingAddress, verifyError, addressVerification, selectedChain, selectedToken]);
|
|
12939
13978
|
const isAddressValid = !isDebouncing && !!addressVerification?.valid && !addressError;
|
|
12940
|
-
const exchangeRate = (0,
|
|
13979
|
+
const exchangeRate = (0, import_react21.useMemo)(() => {
|
|
12941
13980
|
if (!balanceData?.exchangeRate) return 0;
|
|
12942
13981
|
return parseFloat(balanceData.exchangeRate);
|
|
12943
13982
|
}, [balanceData]);
|
|
12944
|
-
const balanceCrypto = (0,
|
|
13983
|
+
const balanceCrypto = (0, import_react21.useMemo)(() => {
|
|
12945
13984
|
if (!balanceData?.balanceHuman) return 0;
|
|
12946
13985
|
return parseFloat(balanceData.balanceHuman);
|
|
12947
13986
|
}, [balanceData]);
|
|
12948
|
-
const balanceUsdNum = (0,
|
|
13987
|
+
const balanceUsdNum = (0, import_react21.useMemo)(() => {
|
|
12949
13988
|
if (!balanceData?.balanceUsd) return 0;
|
|
12950
13989
|
return parseFloat(balanceData.balanceUsd);
|
|
12951
13990
|
}, [balanceData]);
|
|
12952
13991
|
const tokenSymbol = sourceTokenSymbol || balanceData?.symbol || "TOKEN";
|
|
12953
13992
|
const sourceDecimals = balanceData?.decimals ?? 6;
|
|
12954
|
-
const cryptoAmountFromInput = (0,
|
|
13993
|
+
const cryptoAmountFromInput = (0, import_react21.useMemo)(() => {
|
|
12955
13994
|
const val = parseFloat(amount);
|
|
12956
13995
|
if (!val || val <= 0) return 0;
|
|
12957
13996
|
if (inputUnit === "crypto") return val;
|
|
12958
13997
|
return exchangeRate > 0 ? val / exchangeRate : 0;
|
|
12959
13998
|
}, [amount, inputUnit, exchangeRate]);
|
|
12960
|
-
const fiatAmountFromInput = (0,
|
|
13999
|
+
const fiatAmountFromInput = (0, import_react21.useMemo)(() => {
|
|
12961
14000
|
const val = parseFloat(amount);
|
|
12962
14001
|
if (!val || val <= 0) return 0;
|
|
12963
14002
|
if (inputUnit === "fiat") return val;
|
|
12964
14003
|
return val * exchangeRate;
|
|
12965
14004
|
}, [amount, inputUnit, exchangeRate]);
|
|
12966
|
-
const convertedDisplay = (0,
|
|
14005
|
+
const convertedDisplay = (0, import_react21.useMemo)(() => {
|
|
12967
14006
|
if (!amount || parseFloat(amount) <= 0) return null;
|
|
12968
14007
|
if (inputUnit === "crypto") {
|
|
12969
14008
|
return `$${fiatAmountFromInput.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
12970
14009
|
}
|
|
12971
14010
|
return `${cryptoAmountFromInput.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 6 })} ${tokenSymbol}`;
|
|
12972
14011
|
}, [amount, inputUnit, fiatAmountFromInput, cryptoAmountFromInput, tokenSymbol]);
|
|
12973
|
-
const balanceDisplay = (0,
|
|
14012
|
+
const balanceDisplay = (0, import_react21.useMemo)(() => {
|
|
12974
14013
|
if (isLoadingBalance || !balanceData) return null;
|
|
12975
14014
|
if (inputUnit === "crypto") {
|
|
12976
14015
|
return `${balanceCrypto.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ${tokenSymbol}`;
|
|
12977
14016
|
}
|
|
12978
14017
|
return `$${balanceUsdNum.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
12979
14018
|
}, [isLoadingBalance, balanceData, inputUnit, balanceCrypto, balanceUsdNum, tokenSymbol]);
|
|
12980
|
-
const handleSwitchUnit = (0,
|
|
14019
|
+
const handleSwitchUnit = (0, import_react21.useCallback)(() => {
|
|
12981
14020
|
const val = parseFloat(amount);
|
|
12982
14021
|
if (!val || val <= 0 || exchangeRate <= 0) {
|
|
12983
14022
|
setInputUnit((u) => u === "crypto" ? "fiat" : "crypto");
|
|
@@ -12994,7 +14033,7 @@ function WithdrawForm({
|
|
|
12994
14033
|
setInputUnit("crypto");
|
|
12995
14034
|
}
|
|
12996
14035
|
}, [amount, inputUnit, exchangeRate, sourceDecimals]);
|
|
12997
|
-
const handleMaxClick = (0,
|
|
14036
|
+
const handleMaxClick = (0, import_react21.useCallback)(() => {
|
|
12998
14037
|
if (inputUnit === "crypto") {
|
|
12999
14038
|
if (balanceCrypto <= 0) return;
|
|
13000
14039
|
setAmount(balanceData?.balanceHuman ?? "0");
|
|
@@ -13006,7 +14045,7 @@ function WithdrawForm({
|
|
|
13006
14045
|
const isBelowMinimum = minimumWithdrawAmountUsd !== null && fiatAmountFromInput > 0 && fiatAmountFromInput < minimumWithdrawAmountUsd;
|
|
13007
14046
|
const isOverBalance = inputUnit === "crypto" ? cryptoAmountFromInput > 0 && balanceCrypto > 0 && cryptoAmountFromInput > balanceCrypto : fiatAmountFromInput > 0 && balanceUsdNum > 0 && fiatAmountFromInput > balanceUsdNum;
|
|
13008
14047
|
const isFormValid = trimmedAddress.length > 0 && amount.trim().length > 0 && cryptoAmountFromInput > 0 && isAddressValid && !isBelowMinimum && !isOverBalance && !!balanceData;
|
|
13009
|
-
const handleWithdraw = (0,
|
|
14048
|
+
const handleWithdraw = (0, import_react21.useCallback)(async () => {
|
|
13010
14049
|
if (!selectedToken || !selectedChain) return;
|
|
13011
14050
|
if (!isFormValid) return;
|
|
13012
14051
|
setIsSubmitting(true);
|
|
@@ -13018,12 +14057,43 @@ function WithdrawForm({
|
|
|
13018
14057
|
destinationTokenAddress: selectedChain.token_address,
|
|
13019
14058
|
recipientAddress: trimmedAddress
|
|
13020
14059
|
});
|
|
13021
|
-
|
|
14060
|
+
let amountBaseUnit = computeBaseUnit(
|
|
13022
14061
|
balanceData.balanceBaseUnit,
|
|
13023
14062
|
parseFloat(amount),
|
|
13024
14063
|
inputUnit === "crypto" ? balanceCrypto : balanceUsdNum
|
|
13025
14064
|
);
|
|
13026
|
-
|
|
14065
|
+
let humanAmount = toSafeDecimalString(cryptoAmountFromInput, sourceDecimals);
|
|
14066
|
+
if (isHypercoreChain(sourceChainId)) {
|
|
14067
|
+
try {
|
|
14068
|
+
const check = await (0, import_core33.checkHypercoreActivation)(
|
|
14069
|
+
{
|
|
14070
|
+
source_address: senderAddress,
|
|
14071
|
+
recipient_address: depositWallet.address
|
|
14072
|
+
},
|
|
14073
|
+
publishableKey
|
|
14074
|
+
);
|
|
14075
|
+
if (!check.user_exists) {
|
|
14076
|
+
const fee = check.activation_fee;
|
|
14077
|
+
const maxSendable = balanceCrypto - fee;
|
|
14078
|
+
if (maxSendable <= 0) {
|
|
14079
|
+
throw new Error(
|
|
14080
|
+
`Insufficient balance. A ${fee} USDC activation fee is required for the first transfer to this address.`
|
|
14081
|
+
);
|
|
14082
|
+
}
|
|
14083
|
+
const requestedAmount = parseFloat(humanAmount);
|
|
14084
|
+
if (requestedAmount > maxSendable) {
|
|
14085
|
+
humanAmount = toSafeDecimalString(maxSendable, sourceDecimals);
|
|
14086
|
+
amountBaseUnit = computeBaseUnit(
|
|
14087
|
+
balanceData.balanceBaseUnit,
|
|
14088
|
+
maxSendable,
|
|
14089
|
+
balanceCrypto
|
|
14090
|
+
);
|
|
14091
|
+
}
|
|
14092
|
+
}
|
|
14093
|
+
} catch (e) {
|
|
14094
|
+
if (e instanceof Error && e.message.includes("activation fee")) throw e;
|
|
14095
|
+
}
|
|
14096
|
+
}
|
|
13027
14097
|
const txInfo = {
|
|
13028
14098
|
sourceChainType,
|
|
13029
14099
|
sourceChainId,
|
|
@@ -13038,33 +14108,67 @@ function WithdrawForm({
|
|
|
13038
14108
|
withdrawIntentAddress: depositWallet.address,
|
|
13039
14109
|
recipientAddress: trimmedAddress
|
|
13040
14110
|
};
|
|
13041
|
-
|
|
13042
|
-
|
|
13043
|
-
|
|
13044
|
-
|
|
13045
|
-
|
|
13046
|
-
|
|
13047
|
-
|
|
14111
|
+
const wallet = await detectBrowserWallet(sourceChainType, senderAddress);
|
|
14112
|
+
console.log("browser wallet", wallet);
|
|
14113
|
+
if (wallet) {
|
|
14114
|
+
try {
|
|
14115
|
+
if (wallet.chainFamily === "evm" && isHypercoreChain(sourceChainId)) {
|
|
14116
|
+
await sendHypercoreWithdraw({
|
|
14117
|
+
provider: wallet.provider,
|
|
14118
|
+
fromAddress: wallet.address,
|
|
14119
|
+
depositWalletAddress: depositWallet.address,
|
|
14120
|
+
sourceTokenAddress,
|
|
14121
|
+
amount: humanAmount,
|
|
14122
|
+
tokenSymbol,
|
|
14123
|
+
publishableKey
|
|
14124
|
+
});
|
|
14125
|
+
} else if (wallet.chainFamily === "evm") {
|
|
14126
|
+
await sendEvmWithdraw({
|
|
14127
|
+
provider: wallet.provider,
|
|
14128
|
+
fromAddress: wallet.address,
|
|
14129
|
+
depositWalletAddress: depositWallet.address,
|
|
14130
|
+
sourceTokenAddress,
|
|
14131
|
+
sourceChainId,
|
|
14132
|
+
amountBaseUnit
|
|
14133
|
+
});
|
|
14134
|
+
} else if (wallet.chainFamily === "solana") {
|
|
14135
|
+
await sendSolanaWithdraw({
|
|
14136
|
+
provider: wallet.provider,
|
|
14137
|
+
fromAddress: wallet.address,
|
|
14138
|
+
depositWalletAddress: depositWallet.address,
|
|
14139
|
+
sourceTokenAddress,
|
|
14140
|
+
amountBaseUnit,
|
|
14141
|
+
publishableKey
|
|
14142
|
+
});
|
|
14143
|
+
}
|
|
14144
|
+
} catch (walletErr) {
|
|
14145
|
+
console.error("[Unifold] Browser wallet send failed:", walletErr, {
|
|
14146
|
+
wallet: `${wallet.name} (${wallet.chainFamily})`,
|
|
13048
14147
|
sourceChainId,
|
|
13049
|
-
|
|
13050
|
-
});
|
|
13051
|
-
} else if (detectedWallet.chainFamily === "solana") {
|
|
13052
|
-
await sendSolanaWithdraw({
|
|
13053
|
-
provider: detectedWallet.provider,
|
|
13054
|
-
fromAddress: detectedWallet.address,
|
|
13055
|
-
depositWalletAddress: depositWallet.address,
|
|
13056
|
-
sourceTokenAddress,
|
|
14148
|
+
amount: humanAmount,
|
|
13057
14149
|
amountBaseUnit,
|
|
13058
|
-
|
|
14150
|
+
depositWallet: depositWallet.address
|
|
13059
14151
|
});
|
|
14152
|
+
throw walletErr;
|
|
13060
14153
|
}
|
|
13061
14154
|
} else if (onWithdraw) {
|
|
13062
|
-
|
|
14155
|
+
try {
|
|
14156
|
+
await onWithdraw(txInfo);
|
|
14157
|
+
} catch (callbackErr) {
|
|
14158
|
+
console.error("[Unifold] onWithdraw callback failed:", callbackErr, {
|
|
14159
|
+
sourceChainId,
|
|
14160
|
+
amount: humanAmount,
|
|
14161
|
+
amountBaseUnit,
|
|
14162
|
+
depositWallet: depositWallet.address
|
|
14163
|
+
});
|
|
14164
|
+
throw callbackErr;
|
|
14165
|
+
}
|
|
13063
14166
|
} else {
|
|
13064
14167
|
throw new Error("No withdrawal method available. Please connect a wallet.");
|
|
13065
14168
|
}
|
|
13066
14169
|
onWithdrawSubmitted?.(txInfo);
|
|
13067
14170
|
} catch (err) {
|
|
14171
|
+
console.error("[Unifold] Withdrawal failed:", err);
|
|
13068
14172
|
const raw = err instanceof Error ? err.message : "Withdrawal failed. Please try again.";
|
|
13069
14173
|
setSubmitError(raw.length > 120 ? "Withdrawal failed. Please try again." : raw);
|
|
13070
14174
|
onWithdrawError?.({
|
|
@@ -13075,10 +14179,10 @@ function WithdrawForm({
|
|
|
13075
14179
|
} finally {
|
|
13076
14180
|
setIsSubmitting(false);
|
|
13077
14181
|
}
|
|
13078
|
-
}, [selectedToken, selectedChain, isFormValid, cryptoAmountFromInput, sourceDecimals, trimmedAddress, publishableKey, onWithdraw,
|
|
13079
|
-
return /* @__PURE__ */ (0,
|
|
13080
|
-
/* @__PURE__ */ (0,
|
|
13081
|
-
/* @__PURE__ */ (0,
|
|
14182
|
+
}, [selectedToken, selectedChain, isFormValid, cryptoAmountFromInput, sourceDecimals, trimmedAddress, publishableKey, onWithdraw, sourceChainType, senderAddress, sourceTokenAddress, sourceChainId, onWithdrawError, onDepositWalletCreation, onWithdrawSubmitted, amount, inputUnit, balanceCrypto, balanceUsdNum, balanceData]);
|
|
14183
|
+
return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
|
|
14184
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { children: [
|
|
14185
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
13082
14186
|
"div",
|
|
13083
14187
|
{
|
|
13084
14188
|
className: "uf-text-xs uf-mb-1.5",
|
|
@@ -13086,7 +14190,7 @@ function WithdrawForm({
|
|
|
13086
14190
|
children: t8.recipientAddress
|
|
13087
14191
|
}
|
|
13088
14192
|
),
|
|
13089
|
-
/* @__PURE__ */ (0,
|
|
14193
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
13090
14194
|
"style",
|
|
13091
14195
|
{
|
|
13092
14196
|
dangerouslySetInnerHTML: {
|
|
@@ -13094,7 +14198,7 @@ function WithdrawForm({
|
|
|
13094
14198
|
}
|
|
13095
14199
|
}
|
|
13096
14200
|
),
|
|
13097
|
-
/* @__PURE__ */ (0,
|
|
14201
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
|
|
13098
14202
|
"div",
|
|
13099
14203
|
{
|
|
13100
14204
|
className: "uf-flex uf-items-center uf-gap-1 uf-pr-2",
|
|
@@ -13104,7 +14208,7 @@ function WithdrawForm({
|
|
|
13104
14208
|
border: `${components.input.borderWidth}px solid ${addressError ? colors2.error : components.input.borderColor}`
|
|
13105
14209
|
},
|
|
13106
14210
|
children: [
|
|
13107
|
-
/* @__PURE__ */ (0,
|
|
14211
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
13108
14212
|
"input",
|
|
13109
14213
|
{
|
|
13110
14214
|
type: "text",
|
|
@@ -13121,7 +14225,7 @@ function WithdrawForm({
|
|
|
13121
14225
|
}
|
|
13122
14226
|
}
|
|
13123
14227
|
),
|
|
13124
|
-
/* @__PURE__ */ (0,
|
|
14228
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
13125
14229
|
"button",
|
|
13126
14230
|
{
|
|
13127
14231
|
type: "button",
|
|
@@ -13138,27 +14242,27 @@ function WithdrawForm({
|
|
|
13138
14242
|
className: "uf-flex-shrink-0 uf-p-1 uf-rounded uf-transition-colors hover:uf-opacity-70",
|
|
13139
14243
|
style: { color: colors2.foregroundMuted },
|
|
13140
14244
|
title: "Paste from clipboard",
|
|
13141
|
-
children: /* @__PURE__ */ (0,
|
|
14245
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react25.ClipboardPaste, { className: "uf-w-4 uf-h-4" })
|
|
13142
14246
|
}
|
|
13143
14247
|
)
|
|
13144
14248
|
]
|
|
13145
14249
|
}
|
|
13146
14250
|
),
|
|
13147
|
-
(isDebouncing || isVerifyingAddress) && trimmedAddress.length > 5 && /* @__PURE__ */ (0,
|
|
13148
|
-
/* @__PURE__ */ (0,
|
|
13149
|
-
/* @__PURE__ */ (0,
|
|
14251
|
+
(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: [
|
|
14252
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react25.Loader2, { className: "uf-w-3 uf-h-3 uf-animate-spin", style: { color: colors2.foregroundMuted } }),
|
|
14253
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: t8.verifyingAddress })
|
|
13150
14254
|
] }),
|
|
13151
|
-
addressError && /* @__PURE__ */ (0,
|
|
13152
|
-
/* @__PURE__ */ (0,
|
|
13153
|
-
/* @__PURE__ */ (0,
|
|
14255
|
+
addressError && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-1.5", children: [
|
|
14256
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react25.AlertTriangle, { className: "uf-w-3 uf-h-3", style: { color: colors2.error } }),
|
|
14257
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "uf-text-xs", style: { color: colors2.error, fontFamily: fonts.regular }, children: addressError })
|
|
13154
14258
|
] })
|
|
13155
14259
|
] }),
|
|
13156
|
-
/* @__PURE__ */ (0,
|
|
13157
|
-
/* @__PURE__ */ (0,
|
|
14260
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { children: [
|
|
14261
|
+
/* @__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
14262
|
t8.amount,
|
|
13159
|
-
minimumWithdrawAmountUsd != null && minimumWithdrawAmountUsd > 0 && /* @__PURE__ */ (0,
|
|
14263
|
+
minimumWithdrawAmountUsd != null && minimumWithdrawAmountUsd > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { style: { color: colors2.warning, fontFamily: fonts.regular }, children: ` ($${minimumWithdrawAmountUsd.toFixed(2)} min)` })
|
|
13160
14264
|
] }),
|
|
13161
|
-
/* @__PURE__ */ (0,
|
|
14265
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
13162
14266
|
"style",
|
|
13163
14267
|
{
|
|
13164
14268
|
dangerouslySetInnerHTML: {
|
|
@@ -13166,7 +14270,7 @@ function WithdrawForm({
|
|
|
13166
14270
|
}
|
|
13167
14271
|
}
|
|
13168
14272
|
),
|
|
13169
|
-
/* @__PURE__ */ (0,
|
|
14273
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
|
|
13170
14274
|
"div",
|
|
13171
14275
|
{
|
|
13172
14276
|
className: "uf-flex uf-items-center uf-gap-2 uf-px-3 uf-py-2.5",
|
|
@@ -13176,7 +14280,7 @@ function WithdrawForm({
|
|
|
13176
14280
|
border: `${components.input.borderWidth}px solid ${components.input.borderColor}`
|
|
13177
14281
|
},
|
|
13178
14282
|
children: [
|
|
13179
|
-
/* @__PURE__ */ (0,
|
|
14283
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
13180
14284
|
"input",
|
|
13181
14285
|
{
|
|
13182
14286
|
type: "text",
|
|
@@ -13197,8 +14301,8 @@ function WithdrawForm({
|
|
|
13197
14301
|
}
|
|
13198
14302
|
}
|
|
13199
14303
|
),
|
|
13200
|
-
/* @__PURE__ */ (0,
|
|
13201
|
-
/* @__PURE__ */ (0,
|
|
14304
|
+
/* @__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" }),
|
|
14305
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
13202
14306
|
"button",
|
|
13203
14307
|
{
|
|
13204
14308
|
type: "button",
|
|
@@ -13211,10 +14315,10 @@ function WithdrawForm({
|
|
|
13211
14315
|
]
|
|
13212
14316
|
}
|
|
13213
14317
|
),
|
|
13214
|
-
/* @__PURE__ */ (0,
|
|
13215
|
-
/* @__PURE__ */ (0,
|
|
13216
|
-
/* @__PURE__ */ (0,
|
|
13217
|
-
exchangeRate > 0 && /* @__PURE__ */ (0,
|
|
14318
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-mt-1.5 uf-px-3", children: [
|
|
14319
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
|
|
14320
|
+
/* @__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}`) }),
|
|
14321
|
+
exchangeRate > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
13218
14322
|
"button",
|
|
13219
14323
|
{
|
|
13220
14324
|
type: "button",
|
|
@@ -13222,49 +14326,49 @@ function WithdrawForm({
|
|
|
13222
14326
|
className: "uf-p-0.5 uf-rounded uf-transition-colors hover:uf-opacity-70",
|
|
13223
14327
|
style: { color: colors2.foregroundMuted },
|
|
13224
14328
|
title: "Switch unit",
|
|
13225
|
-
children: /* @__PURE__ */ (0,
|
|
14329
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react25.ArrowUpDown, { className: "uf-w-3 uf-h-3" })
|
|
13226
14330
|
}
|
|
13227
14331
|
)
|
|
13228
14332
|
] }),
|
|
13229
|
-
/* @__PURE__ */ (0,
|
|
13230
|
-
balanceDisplay && /* @__PURE__ */ (0,
|
|
14333
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { children: [
|
|
14334
|
+
balanceDisplay && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: [
|
|
13231
14335
|
t8.balance,
|
|
13232
14336
|
": ",
|
|
13233
14337
|
balanceDisplay
|
|
13234
14338
|
] }),
|
|
13235
|
-
isLoadingBalance && /* @__PURE__ */ (0,
|
|
14339
|
+
isLoadingBalance && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "uf-h-3 uf-w-16 uf-bg-muted uf-rounded uf-animate-pulse" })
|
|
13236
14340
|
] })
|
|
13237
14341
|
] })
|
|
13238
14342
|
] }),
|
|
13239
|
-
/* @__PURE__ */ (0,
|
|
13240
|
-
/* @__PURE__ */ (0,
|
|
14343
|
+
/* @__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: [
|
|
14344
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
|
|
13241
14345
|
"button",
|
|
13242
14346
|
{
|
|
13243
14347
|
type: "button",
|
|
13244
14348
|
onClick: () => setDetailsExpanded(!detailsExpanded),
|
|
13245
14349
|
className: "uf-w-full uf-flex uf-items-center uf-justify-between uf-py-2.5",
|
|
13246
14350
|
children: [
|
|
13247
|
-
/* @__PURE__ */ (0,
|
|
13248
|
-
/* @__PURE__ */ (0,
|
|
13249
|
-
/* @__PURE__ */ (0,
|
|
14351
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
14352
|
+
/* @__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 } }) }),
|
|
14353
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
|
|
13250
14354
|
tCrypto.processingTime.label,
|
|
13251
14355
|
":",
|
|
13252
14356
|
" ",
|
|
13253
|
-
/* @__PURE__ */ (0,
|
|
14357
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: formatProcessingTime2(estimatedProcessingTime) })
|
|
13254
14358
|
] })
|
|
13255
14359
|
] }),
|
|
13256
|
-
detailsExpanded ? /* @__PURE__ */ (0,
|
|
14360
|
+
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
14361
|
]
|
|
13258
14362
|
}
|
|
13259
14363
|
),
|
|
13260
|
-
detailsExpanded && /* @__PURE__ */ (0,
|
|
13261
|
-
/* @__PURE__ */ (0,
|
|
13262
|
-
/* @__PURE__ */ (0,
|
|
13263
|
-
/* @__PURE__ */ (0,
|
|
14364
|
+
detailsExpanded && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-pb-3 uf-space-y-2.5", children: [
|
|
14365
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
14366
|
+
/* @__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 } }) }),
|
|
14367
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
|
|
13264
14368
|
tCrypto.slippage.label,
|
|
13265
14369
|
":",
|
|
13266
14370
|
" ",
|
|
13267
|
-
/* @__PURE__ */ (0,
|
|
14371
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: [
|
|
13268
14372
|
tCrypto.slippage.auto,
|
|
13269
14373
|
" \u2022 ",
|
|
13270
14374
|
(maxSlippagePercent ?? 0.25).toFixed(2),
|
|
@@ -13272,13 +14376,13 @@ function WithdrawForm({
|
|
|
13272
14376
|
] })
|
|
13273
14377
|
] })
|
|
13274
14378
|
] }),
|
|
13275
|
-
/* @__PURE__ */ (0,
|
|
13276
|
-
/* @__PURE__ */ (0,
|
|
13277
|
-
/* @__PURE__ */ (0,
|
|
14379
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
14380
|
+
/* @__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 } }) }),
|
|
14381
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
|
|
13278
14382
|
tCrypto.priceImpact.label,
|
|
13279
14383
|
":",
|
|
13280
14384
|
" ",
|
|
13281
|
-
/* @__PURE__ */ (0,
|
|
14385
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: [
|
|
13282
14386
|
(priceImpactPercent ?? 0).toFixed(2),
|
|
13283
14387
|
"%"
|
|
13284
14388
|
] })
|
|
@@ -13286,23 +14390,12 @@ function WithdrawForm({
|
|
|
13286
14390
|
] })
|
|
13287
14391
|
] })
|
|
13288
14392
|
] }),
|
|
13289
|
-
|
|
13290
|
-
"div",
|
|
13291
|
-
{
|
|
13292
|
-
className: "uf-flex uf-items-start uf-gap-2.5 uf-p-3 uf-rounded-xl",
|
|
13293
|
-
style: { backgroundColor: colors2.card, border: `1px solid ${colors2.border}` },
|
|
13294
|
-
children: [
|
|
13295
|
-
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react24.Wallet, { className: "uf-w-4 uf-h-4 uf-flex-shrink-0 uf-mt-0.5", style: { color: colors2.warning } }),
|
|
13296
|
-
/* @__PURE__ */ (0, import_jsx_runtime53.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
|
-
]
|
|
13298
|
-
}
|
|
13299
|
-
),
|
|
13300
|
-
isWalletMatch && connectedWalletName ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
14393
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
13301
14394
|
"button",
|
|
13302
14395
|
{
|
|
13303
14396
|
type: "button",
|
|
13304
14397
|
onClick: handleWithdraw,
|
|
13305
|
-
disabled: !isFormValid ||
|
|
14398
|
+
disabled: !isFormValid || isSubmitting || !selectedToken || !selectedChain,
|
|
13306
14399
|
className: "uf-w-full uf-py-3 uf-text-sm uf-font-medium uf-transition-colors disabled:uf-opacity-50 disabled:uf-cursor-not-allowed uf-flex uf-items-center uf-justify-center uf-gap-2",
|
|
13307
14400
|
style: {
|
|
13308
14401
|
backgroundColor: colors2.primary,
|
|
@@ -13311,40 +14404,20 @@ function WithdrawForm({
|
|
|
13311
14404
|
borderRadius: components.button.borderRadius,
|
|
13312
14405
|
border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
|
|
13313
14406
|
},
|
|
13314
|
-
children: isSubmitting ? /* @__PURE__ */ (0,
|
|
13315
|
-
/* @__PURE__ */ (0,
|
|
14407
|
+
children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
|
|
14408
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react25.Loader2, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
|
|
13316
14409
|
"Processing..."
|
|
13317
|
-
] }) : isOverBalance ? /* @__PURE__ */ (0,
|
|
13318
|
-
/* @__PURE__ */ (0,
|
|
13319
|
-
|
|
13320
|
-
connectedWalletName
|
|
14410
|
+
] }) : 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: [
|
|
14411
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react25.Wallet, { className: "uf-w-4 uf-h-4" }),
|
|
14412
|
+
t8.withdraw
|
|
13321
14413
|
] })
|
|
13322
14414
|
}
|
|
13323
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
|
|
13324
|
-
"button",
|
|
13325
|
-
{
|
|
13326
|
-
type: "button",
|
|
13327
|
-
onClick: handleWithdraw,
|
|
13328
|
-
disabled: !isFormValid || !canWithdraw || isSubmitting || !selectedToken || !selectedChain,
|
|
13329
|
-
className: "uf-w-full uf-py-3 uf-text-sm uf-font-medium uf-transition-colors disabled:uf-opacity-50 disabled:uf-cursor-not-allowed",
|
|
13330
|
-
style: {
|
|
13331
|
-
backgroundColor: colors2.primary,
|
|
13332
|
-
color: colors2.primaryForeground,
|
|
13333
|
-
fontFamily: fonts.medium,
|
|
13334
|
-
borderRadius: components.button.borderRadius,
|
|
13335
|
-
border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
|
|
13336
|
-
},
|
|
13337
|
-
children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2", children: [
|
|
13338
|
-
/* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react24.Loader2, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
|
|
13339
|
-
"Processing..."
|
|
13340
|
-
] }) : isOverBalance ? "Insufficient balance" : isBelowMinimum ? "Minimum amount not met" : submitError ? "Withdrawal failed. Try again" : t8.withdraw
|
|
13341
|
-
}
|
|
13342
14415
|
),
|
|
13343
|
-
/* @__PURE__ */ (0,
|
|
13344
|
-
/* @__PURE__ */ (0,
|
|
13345
|
-
/* @__PURE__ */ (0,
|
|
14416
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-text-xs uf-pt-1", children: [
|
|
14417
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { children: footerLeft }),
|
|
14418
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(DepositFooterLinks, { onGlossaryClick: () => setGlossaryOpen(true) })
|
|
13346
14419
|
] }),
|
|
13347
|
-
/* @__PURE__ */ (0,
|
|
14420
|
+
/* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
|
|
13348
14421
|
GlossaryModal,
|
|
13349
14422
|
{
|
|
13350
14423
|
open: glossaryOpen,
|
|
@@ -13355,15 +14428,15 @@ function WithdrawForm({
|
|
|
13355
14428
|
}
|
|
13356
14429
|
|
|
13357
14430
|
// src/components/withdrawals/WithdrawExecutionItem.tsx
|
|
13358
|
-
var
|
|
13359
|
-
var
|
|
13360
|
-
var
|
|
14431
|
+
var import_lucide_react26 = require("lucide-react");
|
|
14432
|
+
var import_core34 = require("@unifold/core");
|
|
14433
|
+
var import_jsx_runtime55 = require("react/jsx-runtime");
|
|
13361
14434
|
function WithdrawExecutionItem({
|
|
13362
14435
|
execution,
|
|
13363
14436
|
onClick
|
|
13364
14437
|
}) {
|
|
13365
14438
|
const { colors: colors2, fonts, components } = useTheme();
|
|
13366
|
-
const isPending = execution.status ===
|
|
14439
|
+
const isPending = execution.status === import_core34.ExecutionStatus.PENDING || execution.status === import_core34.ExecutionStatus.WAITING || execution.status === import_core34.ExecutionStatus.DELAYED;
|
|
13367
14440
|
const formatDateTime = (timestamp) => {
|
|
13368
14441
|
try {
|
|
13369
14442
|
const date = new Date(timestamp);
|
|
@@ -13395,7 +14468,7 @@ function WithdrawExecutionItem({
|
|
|
13395
14468
|
return "$0.00";
|
|
13396
14469
|
}
|
|
13397
14470
|
};
|
|
13398
|
-
return /* @__PURE__ */ (0,
|
|
14471
|
+
return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
|
|
13399
14472
|
"button",
|
|
13400
14473
|
{
|
|
13401
14474
|
onClick,
|
|
@@ -13406,11 +14479,11 @@ function WithdrawExecutionItem({
|
|
|
13406
14479
|
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
13407
14480
|
},
|
|
13408
14481
|
children: [
|
|
13409
|
-
/* @__PURE__ */ (0,
|
|
13410
|
-
/* @__PURE__ */ (0,
|
|
14482
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "uf-relative uf-flex-shrink-0 uf-w-9 uf-h-9", children: [
|
|
14483
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
13411
14484
|
"img",
|
|
13412
14485
|
{
|
|
13413
|
-
src: execution.destination_token_metadata?.icon_url || (0,
|
|
14486
|
+
src: execution.destination_token_metadata?.icon_url || (0, import_core34.getIconUrl)("/icons/tokens/svg/usdc.svg"),
|
|
13414
14487
|
alt: "Token",
|
|
13415
14488
|
width: 36,
|
|
13416
14489
|
height: 36,
|
|
@@ -13418,12 +14491,12 @@ function WithdrawExecutionItem({
|
|
|
13418
14491
|
className: "uf-rounded-full uf-w-9 uf-h-9"
|
|
13419
14492
|
}
|
|
13420
14493
|
),
|
|
13421
|
-
isPending ? /* @__PURE__ */ (0,
|
|
14494
|
+
isPending ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
13422
14495
|
"div",
|
|
13423
14496
|
{
|
|
13424
14497
|
className: "uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-rounded-full uf-p-0.5",
|
|
13425
14498
|
style: { backgroundColor: colors2.warning },
|
|
13426
|
-
children: /* @__PURE__ */ (0,
|
|
14499
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
13427
14500
|
"svg",
|
|
13428
14501
|
{
|
|
13429
14502
|
width: "10",
|
|
@@ -13431,7 +14504,7 @@ function WithdrawExecutionItem({
|
|
|
13431
14504
|
viewBox: "0 0 12 12",
|
|
13432
14505
|
fill: "none",
|
|
13433
14506
|
className: "uf-animate-spin uf-block",
|
|
13434
|
-
children: /* @__PURE__ */ (0,
|
|
14507
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
13435
14508
|
"path",
|
|
13436
14509
|
{
|
|
13437
14510
|
d: "M6 1V3M6 9V11M1 6H3M9 6H11M2.5 2.5L4 4M8 8L9.5 9.5M2.5 9.5L4 8M8 4L9.5 2.5",
|
|
@@ -13443,12 +14516,12 @@ function WithdrawExecutionItem({
|
|
|
13443
14516
|
}
|
|
13444
14517
|
)
|
|
13445
14518
|
}
|
|
13446
|
-
) : /* @__PURE__ */ (0,
|
|
14519
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
13447
14520
|
"div",
|
|
13448
14521
|
{
|
|
13449
14522
|
className: "uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-rounded-full uf-p-0.5",
|
|
13450
14523
|
style: { backgroundColor: colors2.success },
|
|
13451
|
-
children: /* @__PURE__ */ (0,
|
|
14524
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
13452
14525
|
"svg",
|
|
13453
14526
|
{
|
|
13454
14527
|
width: "10",
|
|
@@ -13456,7 +14529,7 @@ function WithdrawExecutionItem({
|
|
|
13456
14529
|
viewBox: "0 0 12 12",
|
|
13457
14530
|
fill: "none",
|
|
13458
14531
|
className: "uf-block",
|
|
13459
|
-
children: /* @__PURE__ */ (0,
|
|
14532
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
13460
14533
|
"path",
|
|
13461
14534
|
{
|
|
13462
14535
|
d: "M10 3L4.5 8.5L2 6",
|
|
@@ -13471,8 +14544,8 @@ function WithdrawExecutionItem({
|
|
|
13471
14544
|
}
|
|
13472
14545
|
)
|
|
13473
14546
|
] }),
|
|
13474
|
-
/* @__PURE__ */ (0,
|
|
13475
|
-
/* @__PURE__ */ (0,
|
|
14547
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "uf-flex-1 uf-min-w-0", children: [
|
|
14548
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
13476
14549
|
"h3",
|
|
13477
14550
|
{
|
|
13478
14551
|
className: "uf-font-medium uf-text-sm uf-leading-tight",
|
|
@@ -13483,7 +14556,7 @@ function WithdrawExecutionItem({
|
|
|
13483
14556
|
children: isPending ? "Withdrawal processing" : "Withdrawal completed"
|
|
13484
14557
|
}
|
|
13485
14558
|
),
|
|
13486
|
-
/* @__PURE__ */ (0,
|
|
14559
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
13487
14560
|
"p",
|
|
13488
14561
|
{
|
|
13489
14562
|
className: "uf-text-xs uf-leading-tight",
|
|
@@ -13495,7 +14568,7 @@ function WithdrawExecutionItem({
|
|
|
13495
14568
|
}
|
|
13496
14569
|
)
|
|
13497
14570
|
] }),
|
|
13498
|
-
/* @__PURE__ */ (0,
|
|
14571
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
13499
14572
|
"span",
|
|
13500
14573
|
{
|
|
13501
14574
|
className: "uf-font-medium uf-text-sm uf-flex-shrink-0",
|
|
@@ -13506,8 +14579,8 @@ function WithdrawExecutionItem({
|
|
|
13506
14579
|
children: formatUsdAmount2(execution.source_amount_usd || "0")
|
|
13507
14580
|
}
|
|
13508
14581
|
),
|
|
13509
|
-
/* @__PURE__ */ (0,
|
|
13510
|
-
|
|
14582
|
+
/* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
|
|
14583
|
+
import_lucide_react26.ChevronRight,
|
|
13511
14584
|
{
|
|
13512
14585
|
className: "uf-w-4 uf-h-4 uf-flex-shrink-0",
|
|
13513
14586
|
style: { color: components.card.actionColor }
|
|
@@ -13519,8 +14592,8 @@ function WithdrawExecutionItem({
|
|
|
13519
14592
|
}
|
|
13520
14593
|
|
|
13521
14594
|
// src/components/withdrawals/WithdrawConfirmingView.tsx
|
|
13522
|
-
var
|
|
13523
|
-
var
|
|
14595
|
+
var import_react22 = require("react");
|
|
14596
|
+
var import_jsx_runtime56 = require("react/jsx-runtime");
|
|
13524
14597
|
function truncateAddress4(addr) {
|
|
13525
14598
|
if (addr.length <= 12) return addr;
|
|
13526
14599
|
return `${addr.slice(0, 6)}...${addr.slice(-4)}`;
|
|
@@ -13533,9 +14606,9 @@ function WithdrawConfirmingView({
|
|
|
13533
14606
|
onViewTracker
|
|
13534
14607
|
}) {
|
|
13535
14608
|
const { colors: colors2, fonts, components } = useTheme();
|
|
13536
|
-
const [showButton, setShowButton] = (0,
|
|
14609
|
+
const [showButton, setShowButton] = (0, import_react22.useState)(false);
|
|
13537
14610
|
const latestExecution = executions.length > 0 ? executions[executions.length - 1] : null;
|
|
13538
|
-
(0,
|
|
14611
|
+
(0, import_react22.useEffect)(() => {
|
|
13539
14612
|
if (latestExecution) return;
|
|
13540
14613
|
const timer = setTimeout(() => setShowButton(true), SHOW_BUTTON_DELAY_MS);
|
|
13541
14614
|
return () => clearTimeout(timer);
|
|
@@ -13543,11 +14616,11 @@ function WithdrawConfirmingView({
|
|
|
13543
14616
|
const btnRadius = components.button.borderRadius;
|
|
13544
14617
|
const btnBorder = `${components.button.borderWidth}px solid ${components.button.borderColor}`;
|
|
13545
14618
|
if (latestExecution) {
|
|
13546
|
-
return /* @__PURE__ */ (0,
|
|
13547
|
-
/* @__PURE__ */ (0,
|
|
13548
|
-
/* @__PURE__ */ (0,
|
|
13549
|
-
/* @__PURE__ */ (0,
|
|
13550
|
-
/* @__PURE__ */ (0,
|
|
14619
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
|
|
14620
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DepositHeader, { title: "Withdrawal Details", showClose: true, onClose }),
|
|
14621
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DepositDetailContent, { execution: latestExecution, variant: "withdraw" }),
|
|
14622
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "uf-flex uf-gap-2 uf-px-2 uf-pt-2", children: [
|
|
14623
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
13551
14624
|
"button",
|
|
13552
14625
|
{
|
|
13553
14626
|
type: "button",
|
|
@@ -13563,7 +14636,7 @@ function WithdrawConfirmingView({
|
|
|
13563
14636
|
children: "Withdrawal History"
|
|
13564
14637
|
}
|
|
13565
14638
|
),
|
|
13566
|
-
/* @__PURE__ */ (0,
|
|
14639
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
13567
14640
|
"button",
|
|
13568
14641
|
{
|
|
13569
14642
|
type: "button",
|
|
@@ -13580,7 +14653,7 @@ function WithdrawConfirmingView({
|
|
|
13580
14653
|
}
|
|
13581
14654
|
)
|
|
13582
14655
|
] }),
|
|
13583
|
-
/* @__PURE__ */ (0,
|
|
14656
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
13584
14657
|
PoweredByUnifold,
|
|
13585
14658
|
{
|
|
13586
14659
|
color: colors2.foregroundMuted,
|
|
@@ -13589,15 +14662,15 @@ function WithdrawConfirmingView({
|
|
|
13589
14662
|
) })
|
|
13590
14663
|
] });
|
|
13591
14664
|
}
|
|
13592
|
-
return /* @__PURE__ */ (0,
|
|
13593
|
-
/* @__PURE__ */ (0,
|
|
13594
|
-
/* @__PURE__ */ (0,
|
|
13595
|
-
/* @__PURE__ */ (0,
|
|
14665
|
+
return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
|
|
14666
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DepositHeader, { title: "Withdrawal Status", showClose: true, onClose }),
|
|
14667
|
+
/* @__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: [
|
|
14668
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
13596
14669
|
"div",
|
|
13597
14670
|
{
|
|
13598
14671
|
className: "uf-w-20 uf-h-20 uf-rounded-full uf-flex uf-items-center uf-justify-center uf-mb-6",
|
|
13599
14672
|
style: { backgroundColor: `${colors2.primary}20` },
|
|
13600
|
-
children: /* @__PURE__ */ (0,
|
|
14673
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
13601
14674
|
"svg",
|
|
13602
14675
|
{
|
|
13603
14676
|
width: "40",
|
|
@@ -13605,7 +14678,7 @@ function WithdrawConfirmingView({
|
|
|
13605
14678
|
viewBox: "0 0 24 24",
|
|
13606
14679
|
fill: "none",
|
|
13607
14680
|
className: "uf-animate-spin",
|
|
13608
|
-
children: /* @__PURE__ */ (0,
|
|
14681
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
13609
14682
|
"path",
|
|
13610
14683
|
{
|
|
13611
14684
|
d: "M21 12a9 9 0 1 1-6.22-8.56",
|
|
@@ -13618,7 +14691,7 @@ function WithdrawConfirmingView({
|
|
|
13618
14691
|
)
|
|
13619
14692
|
}
|
|
13620
14693
|
),
|
|
13621
|
-
/* @__PURE__ */ (0,
|
|
14694
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
13622
14695
|
"h3",
|
|
13623
14696
|
{
|
|
13624
14697
|
className: "uf-text-xl uf-mb-2",
|
|
@@ -13626,7 +14699,7 @@ function WithdrawConfirmingView({
|
|
|
13626
14699
|
children: "Checking Withdrawal"
|
|
13627
14700
|
}
|
|
13628
14701
|
),
|
|
13629
|
-
/* @__PURE__ */ (0,
|
|
14702
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
13630
14703
|
"p",
|
|
13631
14704
|
{
|
|
13632
14705
|
className: "uf-text-sm uf-text-center",
|
|
@@ -13642,7 +14715,7 @@ function WithdrawConfirmingView({
|
|
|
13642
14715
|
}
|
|
13643
14716
|
)
|
|
13644
14717
|
] }),
|
|
13645
|
-
showButton && /* @__PURE__ */ (0,
|
|
14718
|
+
showButton && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "uf-px-1 uf-pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
13646
14719
|
"button",
|
|
13647
14720
|
{
|
|
13648
14721
|
type: "button",
|
|
@@ -13658,7 +14731,7 @@ function WithdrawConfirmingView({
|
|
|
13658
14731
|
children: "Withdrawal History"
|
|
13659
14732
|
}
|
|
13660
14733
|
) }),
|
|
13661
|
-
/* @__PURE__ */ (0,
|
|
14734
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
13662
14735
|
PoweredByUnifold,
|
|
13663
14736
|
{
|
|
13664
14737
|
color: colors2.foregroundMuted,
|
|
@@ -13669,8 +14742,8 @@ function WithdrawConfirmingView({
|
|
|
13669
14742
|
}
|
|
13670
14743
|
|
|
13671
14744
|
// src/components/withdrawals/WithdrawModal.tsx
|
|
13672
|
-
var
|
|
13673
|
-
var
|
|
14745
|
+
var import_core35 = require("@unifold/core");
|
|
14746
|
+
var import_jsx_runtime57 = require("react/jsx-runtime");
|
|
13674
14747
|
var t9 = i18n.withdrawModal;
|
|
13675
14748
|
var getChainKey5 = (chainId, chainType) => `${chainType}:${chainId}`;
|
|
13676
14749
|
function WithdrawModal({
|
|
@@ -13692,14 +14765,14 @@ function WithdrawModal({
|
|
|
13692
14765
|
hideOverlay = false
|
|
13693
14766
|
}) {
|
|
13694
14767
|
const { colors: colors2, fonts, components } = useTheme();
|
|
13695
|
-
const [containerEl, setContainerEl] = (0,
|
|
13696
|
-
const containerCallbackRef = (0,
|
|
14768
|
+
const [containerEl, setContainerEl] = (0, import_react23.useState)(null);
|
|
14769
|
+
const containerCallbackRef = (0, import_react23.useCallback)((el) => {
|
|
13697
14770
|
setContainerEl(el);
|
|
13698
14771
|
}, []);
|
|
13699
|
-
const [resolvedTheme, setResolvedTheme] = (0,
|
|
14772
|
+
const [resolvedTheme, setResolvedTheme] = (0, import_react23.useState)(
|
|
13700
14773
|
theme === "auto" ? "dark" : theme
|
|
13701
14774
|
);
|
|
13702
|
-
(0,
|
|
14775
|
+
(0, import_react23.useEffect)(() => {
|
|
13703
14776
|
if (theme === "auto") {
|
|
13704
14777
|
const mq = window.matchMedia("(prefers-color-scheme: dark)");
|
|
13705
14778
|
setResolvedTheme(mq.matches ? "dark" : "light");
|
|
@@ -13728,28 +14801,12 @@ function WithdrawModal({
|
|
|
13728
14801
|
publishableKey,
|
|
13729
14802
|
enabled: open
|
|
13730
14803
|
});
|
|
13731
|
-
const [selectedToken, setSelectedToken] = (0,
|
|
13732
|
-
const [selectedChain, setSelectedChain] = (0,
|
|
13733
|
-
const [
|
|
13734
|
-
const
|
|
13735
|
-
const
|
|
13736
|
-
(0,
|
|
13737
|
-
if (!senderAddress || !open) {
|
|
13738
|
-
setDetectedWallet(null);
|
|
13739
|
-
return;
|
|
13740
|
-
}
|
|
13741
|
-
let cancelled = false;
|
|
13742
|
-
detectBrowserWallet(sourceChainType, senderAddress).then((wallet) => {
|
|
13743
|
-
if (!cancelled) setDetectedWallet(wallet);
|
|
13744
|
-
});
|
|
13745
|
-
return () => {
|
|
13746
|
-
cancelled = true;
|
|
13747
|
-
};
|
|
13748
|
-
}, [senderAddress, sourceChainType, open]);
|
|
13749
|
-
const [view, setView] = (0, import_react22.useState)("form");
|
|
13750
|
-
const [withdrawDepositWalletId, setWithdrawDepositWalletId] = (0, import_react22.useState)();
|
|
13751
|
-
const [selectedExecution, setSelectedExecution] = (0, import_react22.useState)(null);
|
|
13752
|
-
const [submittedTxInfo, setSubmittedTxInfo] = (0, import_react22.useState)(null);
|
|
14804
|
+
const [selectedToken, setSelectedToken] = (0, import_react23.useState)(null);
|
|
14805
|
+
const [selectedChain, setSelectedChain] = (0, import_react23.useState)(null);
|
|
14806
|
+
const [view, setView] = (0, import_react23.useState)("form");
|
|
14807
|
+
const [withdrawDepositWalletId, setWithdrawDepositWalletId] = (0, import_react23.useState)();
|
|
14808
|
+
const [selectedExecution, setSelectedExecution] = (0, import_react23.useState)(null);
|
|
14809
|
+
const [submittedTxInfo, setSubmittedTxInfo] = (0, import_react23.useState)(null);
|
|
13753
14810
|
const { executions: realtimeExecutions } = useWithdrawPolling({
|
|
13754
14811
|
userId: externalUserId,
|
|
13755
14812
|
publishableKey,
|
|
@@ -13759,35 +14816,35 @@ function WithdrawModal({
|
|
|
13759
14816
|
onWithdrawError
|
|
13760
14817
|
});
|
|
13761
14818
|
const { data: allWithdrawalsData } = useExecutions(externalUserId, publishableKey, {
|
|
13762
|
-
actionType:
|
|
14819
|
+
actionType: import_core35.ActionType.Withdraw,
|
|
13763
14820
|
enabled: open,
|
|
13764
14821
|
refetchInterval: view === "tracker" || view === "detail" ? 5e3 : 15e3
|
|
13765
14822
|
});
|
|
13766
14823
|
const allWithdrawals = allWithdrawalsData?.data ?? [];
|
|
13767
|
-
const handleDepositWalletCreation = (0,
|
|
13768
|
-
const { data: wallets } = await (0,
|
|
14824
|
+
const handleDepositWalletCreation = (0, import_react23.useCallback)(async (params) => {
|
|
14825
|
+
const { data: wallets } = await (0, import_core35.createDepositAddress)(
|
|
13769
14826
|
{
|
|
13770
14827
|
external_user_id: externalUserId,
|
|
13771
14828
|
destination_chain_type: params.destinationChainType,
|
|
13772
14829
|
destination_chain_id: params.destinationChainId,
|
|
13773
14830
|
destination_token_address: params.destinationTokenAddress,
|
|
13774
14831
|
recipient_address: params.recipientAddress,
|
|
13775
|
-
action_type:
|
|
14832
|
+
action_type: import_core35.ActionType.Withdraw
|
|
13776
14833
|
},
|
|
13777
14834
|
publishableKey
|
|
13778
14835
|
);
|
|
13779
|
-
const depositWallet = (0,
|
|
14836
|
+
const depositWallet = (0, import_core35.getWalletByChainType)(wallets, sourceChainType);
|
|
13780
14837
|
if (!depositWallet) {
|
|
13781
14838
|
throw new Error(`No deposit wallet available for ${sourceChainType}`);
|
|
13782
14839
|
}
|
|
13783
14840
|
setWithdrawDepositWalletId(depositWallet.id);
|
|
13784
14841
|
return depositWallet;
|
|
13785
14842
|
}, [externalUserId, publishableKey, sourceChainType]);
|
|
13786
|
-
const handleWithdrawSubmitted = (0,
|
|
14843
|
+
const handleWithdrawSubmitted = (0, import_react23.useCallback)((txInfo) => {
|
|
13787
14844
|
setSubmittedTxInfo(txInfo);
|
|
13788
14845
|
setView("confirming");
|
|
13789
14846
|
}, []);
|
|
13790
|
-
(0,
|
|
14847
|
+
(0, import_react23.useEffect)(() => {
|
|
13791
14848
|
if (!destinationTokens.length || selectedToken) return;
|
|
13792
14849
|
const first = destinationTokens[0];
|
|
13793
14850
|
if (first?.chains.length > 0) {
|
|
@@ -13795,8 +14852,8 @@ function WithdrawModal({
|
|
|
13795
14852
|
setSelectedChain(first.chains[0]);
|
|
13796
14853
|
}
|
|
13797
14854
|
}, [destinationTokens, selectedToken]);
|
|
13798
|
-
const resetViewTimeoutRef = (0,
|
|
13799
|
-
const handleClose = (0,
|
|
14855
|
+
const resetViewTimeoutRef = (0, import_react23.useRef)(null);
|
|
14856
|
+
const handleClose = (0, import_react23.useCallback)(() => {
|
|
13800
14857
|
onOpenChange(false);
|
|
13801
14858
|
if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
|
|
13802
14859
|
resetViewTimeoutRef.current = setTimeout(() => {
|
|
@@ -13809,7 +14866,7 @@ function WithdrawModal({
|
|
|
13809
14866
|
resetViewTimeoutRef.current = null;
|
|
13810
14867
|
}, 200);
|
|
13811
14868
|
}, [onOpenChange]);
|
|
13812
|
-
(0,
|
|
14869
|
+
(0, import_react23.useLayoutEffect)(() => {
|
|
13813
14870
|
if (!open) return;
|
|
13814
14871
|
if (resetViewTimeoutRef.current) {
|
|
13815
14872
|
clearTimeout(resetViewTimeoutRef.current);
|
|
@@ -13822,26 +14879,25 @@ function WithdrawModal({
|
|
|
13822
14879
|
setSubmittedTxInfo(null);
|
|
13823
14880
|
setWithdrawDepositWalletId(void 0);
|
|
13824
14881
|
}, [open]);
|
|
13825
|
-
(0,
|
|
14882
|
+
(0, import_react23.useEffect)(() => () => {
|
|
13826
14883
|
if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
|
|
13827
14884
|
}, []);
|
|
13828
|
-
const handleTokenSymbolChange = (0,
|
|
14885
|
+
const handleTokenSymbolChange = (0, import_react23.useCallback)((symbol) => {
|
|
13829
14886
|
const tok = destinationTokens.find((t11) => t11.symbol === symbol);
|
|
13830
14887
|
if (tok) {
|
|
13831
14888
|
setSelectedToken(tok);
|
|
13832
14889
|
if (tok.chains.length > 0) setSelectedChain(tok.chains[0]);
|
|
13833
14890
|
}
|
|
13834
14891
|
}, [destinationTokens]);
|
|
13835
|
-
const handleChainKeyChange = (0,
|
|
14892
|
+
const handleChainKeyChange = (0, import_react23.useCallback)((chainKey) => {
|
|
13836
14893
|
if (!selectedToken) return;
|
|
13837
14894
|
const chain = selectedToken.chains.find((c) => getChainKey5(c.chain_id, c.chain_type) === chainKey);
|
|
13838
14895
|
if (chain) setSelectedChain(chain);
|
|
13839
14896
|
}, [selectedToken]);
|
|
13840
14897
|
const isSourceSupported = sourceValidation?.isSupported ?? null;
|
|
13841
|
-
const canWithdraw = !!onWithdraw || isWalletMatch;
|
|
13842
14898
|
const isAnyLoading = tokensLoading || isCheckingSourceToken;
|
|
13843
|
-
const withdrawPoweredByFooter = /* @__PURE__ */ (0,
|
|
13844
|
-
return /* @__PURE__ */ (0,
|
|
14899
|
+
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" }) });
|
|
14900
|
+
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
14901
|
DialogContent,
|
|
13846
14902
|
{
|
|
13847
14903
|
ref: hideOverlay ? containerCallbackRef : void 0,
|
|
@@ -13850,7 +14906,7 @@ function WithdrawModal({
|
|
|
13850
14906
|
style: { backgroundColor: colors2.background },
|
|
13851
14907
|
onPointerDownOutside: (e) => e.preventDefault(),
|
|
13852
14908
|
onInteractOutside: (e) => e.preventDefault(),
|
|
13853
|
-
children: /* @__PURE__ */ (0,
|
|
14909
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ThemeStyleInjector, { children: view === "confirming" && submittedTxInfo ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
|
|
13854
14910
|
WithdrawConfirmingView,
|
|
13855
14911
|
{
|
|
13856
14912
|
txInfo: submittedTxInfo,
|
|
@@ -13858,18 +14914,18 @@ function WithdrawModal({
|
|
|
13858
14914
|
onClose: handleClose,
|
|
13859
14915
|
onViewTracker: () => setView("tracker")
|
|
13860
14916
|
}
|
|
13861
|
-
) : view === "detail" && selectedExecution ? /* @__PURE__ */ (0,
|
|
13862
|
-
/* @__PURE__ */ (0,
|
|
14917
|
+
) : view === "detail" && selectedExecution ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
|
|
14918
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DepositHeader, { title: "Withdrawal Details", showBack: true, showClose: !hideOverlay, onBack: () => {
|
|
13863
14919
|
setSelectedExecution(null);
|
|
13864
14920
|
setView("tracker");
|
|
13865
14921
|
}, onClose: handleClose }),
|
|
13866
|
-
/* @__PURE__ */ (0,
|
|
14922
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DepositDetailContent, { execution: selectedExecution, variant: "withdraw" }),
|
|
13867
14923
|
withdrawPoweredByFooter
|
|
13868
14924
|
] }) : view === "tracker" ? (
|
|
13869
14925
|
/* ---------- Tracker view: execution list ---------- */
|
|
13870
|
-
/* @__PURE__ */ (0,
|
|
13871
|
-
/* @__PURE__ */ (0,
|
|
13872
|
-
/* @__PURE__ */ (0,
|
|
14926
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
|
|
14927
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DepositHeader, { title: "Withdrawal History", showBack: true, showClose: !hideOverlay, onBack: () => setView("form"), onClose: handleClose }),
|
|
14928
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "uf-h-[460px] uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "uf-flex uf-flex-col uf-gap-2", 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
14929
|
WithdrawExecutionItem,
|
|
13874
14930
|
{
|
|
13875
14931
|
execution: ex,
|
|
@@ -13879,20 +14935,20 @@ function WithdrawModal({
|
|
|
13879
14935
|
}
|
|
13880
14936
|
},
|
|
13881
14937
|
ex.id
|
|
13882
|
-
)) }),
|
|
14938
|
+
)) }) }),
|
|
13883
14939
|
withdrawPoweredByFooter
|
|
13884
14940
|
] })
|
|
13885
14941
|
) : (
|
|
13886
14942
|
/* ---------- 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,
|
|
14943
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
|
|
14944
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DepositHeader, { title: modalTitle || t9.title, showClose: !hideOverlay, onClose: handleClose }),
|
|
14945
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-3", children: [
|
|
14946
|
+
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: [
|
|
14947
|
+
/* @__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" }) }),
|
|
14948
|
+
/* @__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" }),
|
|
14949
|
+
/* @__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 })
|
|
14950
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
|
|
14951
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
|
|
13896
14952
|
WithdrawDoubleInput,
|
|
13897
14953
|
{
|
|
13898
14954
|
tokens: destinationTokens,
|
|
@@ -13903,7 +14959,7 @@ function WithdrawModal({
|
|
|
13903
14959
|
isLoading: tokensLoading
|
|
13904
14960
|
}
|
|
13905
14961
|
),
|
|
13906
|
-
/* @__PURE__ */ (0,
|
|
14962
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
|
|
13907
14963
|
WithdrawForm,
|
|
13908
14964
|
{
|
|
13909
14965
|
publishableKey,
|
|
@@ -13919,26 +14975,23 @@ function WithdrawModal({
|
|
|
13919
14975
|
estimatedProcessingTime: sourceValidation?.estimatedProcessingTime ?? null,
|
|
13920
14976
|
maxSlippagePercent: sourceValidation?.maxSlippagePercent ?? null,
|
|
13921
14977
|
priceImpactPercent: sourceValidation?.priceImpactPercent ?? null,
|
|
13922
|
-
|
|
14978
|
+
senderAddress,
|
|
13923
14979
|
sourceChainId,
|
|
13924
14980
|
sourceTokenAddress,
|
|
13925
|
-
isWalletMatch,
|
|
13926
|
-
connectedWalletName,
|
|
13927
|
-
canWithdraw,
|
|
13928
14981
|
onWithdraw,
|
|
13929
14982
|
onWithdrawError,
|
|
13930
14983
|
onDepositWalletCreation: handleDepositWalletCreation,
|
|
13931
14984
|
onWithdrawSubmitted: handleWithdrawSubmitted,
|
|
13932
|
-
footerLeft: /* @__PURE__ */ (0,
|
|
14985
|
+
footerLeft: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
|
|
13933
14986
|
"button",
|
|
13934
14987
|
{
|
|
13935
14988
|
onClick: () => setView("tracker"),
|
|
13936
14989
|
className: "uf-flex uf-items-center uf-gap-1 uf-transition-colors hover:uf-opacity-70",
|
|
13937
14990
|
style: { color: colors2.foregroundMuted },
|
|
13938
14991
|
children: [
|
|
13939
|
-
/* @__PURE__ */ (0,
|
|
14992
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react27.Clock, { className: "uf-w-3.5 uf-h-3.5" }),
|
|
13940
14993
|
"Withdrawal History",
|
|
13941
|
-
/* @__PURE__ */ (0,
|
|
14994
|
+
/* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react27.ChevronRight, { className: "uf-w-3 uf-h-3" })
|
|
13942
14995
|
]
|
|
13943
14996
|
}
|
|
13944
14997
|
)
|
|
@@ -13954,9 +15007,9 @@ function WithdrawModal({
|
|
|
13954
15007
|
}
|
|
13955
15008
|
|
|
13956
15009
|
// src/components/withdrawals/WithdrawTokenSelector.tsx
|
|
13957
|
-
var
|
|
13958
|
-
var
|
|
13959
|
-
var
|
|
15010
|
+
var import_react24 = require("react");
|
|
15011
|
+
var import_lucide_react28 = require("lucide-react");
|
|
15012
|
+
var import_jsx_runtime58 = require("react/jsx-runtime");
|
|
13960
15013
|
var t10 = i18n.withdrawModal;
|
|
13961
15014
|
function WithdrawTokenSelector({
|
|
13962
15015
|
tokens,
|
|
@@ -13964,9 +15017,9 @@ function WithdrawTokenSelector({
|
|
|
13964
15017
|
onBack
|
|
13965
15018
|
}) {
|
|
13966
15019
|
const { themeClass, colors: colors2, fonts, components } = useTheme();
|
|
13967
|
-
const [searchQuery, setSearchQuery] = (0,
|
|
13968
|
-
const [hoveredKey, setHoveredKey] = (0,
|
|
13969
|
-
const allOptions = (0,
|
|
15020
|
+
const [searchQuery, setSearchQuery] = (0, import_react24.useState)("");
|
|
15021
|
+
const [hoveredKey, setHoveredKey] = (0, import_react24.useState)(null);
|
|
15022
|
+
const allOptions = (0, import_react24.useMemo)(() => {
|
|
13970
15023
|
const options = [];
|
|
13971
15024
|
tokens.forEach((token) => {
|
|
13972
15025
|
token.chains.forEach((chain) => {
|
|
@@ -13975,21 +15028,21 @@ function WithdrawTokenSelector({
|
|
|
13975
15028
|
});
|
|
13976
15029
|
return options;
|
|
13977
15030
|
}, [tokens]);
|
|
13978
|
-
const filteredOptions = (0,
|
|
15031
|
+
const filteredOptions = (0, import_react24.useMemo)(() => {
|
|
13979
15032
|
if (!searchQuery.trim()) return allOptions;
|
|
13980
15033
|
const query = searchQuery.toLowerCase();
|
|
13981
15034
|
return allOptions.filter(
|
|
13982
15035
|
({ token, chain }) => token.symbol.toLowerCase().includes(query) || token.name.toLowerCase().includes(query) || chain.chain_name.toLowerCase().includes(query)
|
|
13983
15036
|
);
|
|
13984
15037
|
}, [allOptions, searchQuery]);
|
|
13985
|
-
return /* @__PURE__ */ (0,
|
|
15038
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
|
|
13986
15039
|
"div",
|
|
13987
15040
|
{
|
|
13988
15041
|
className: "uf-flex uf-flex-col",
|
|
13989
15042
|
style: { minHeight: 0, flex: 1 },
|
|
13990
15043
|
children: [
|
|
13991
|
-
/* @__PURE__ */ (0,
|
|
13992
|
-
/* @__PURE__ */ (0,
|
|
15044
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "uf-pb-3", children: [
|
|
15045
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
13993
15046
|
"style",
|
|
13994
15047
|
{
|
|
13995
15048
|
dangerouslySetInnerHTML: {
|
|
@@ -13997,15 +15050,15 @@ function WithdrawTokenSelector({
|
|
|
13997
15050
|
}
|
|
13998
15051
|
}
|
|
13999
15052
|
),
|
|
14000
|
-
/* @__PURE__ */ (0,
|
|
14001
|
-
/* @__PURE__ */ (0,
|
|
14002
|
-
|
|
15053
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { style: { position: "relative" }, children: [
|
|
15054
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
15055
|
+
import_lucide_react28.Search,
|
|
14003
15056
|
{
|
|
14004
15057
|
className: "uf-absolute uf-left-3 uf-top-1/2 uf--translate-y-1/2 uf-w-4 uf-h-4",
|
|
14005
15058
|
style: { color: components.search.placeholderColor }
|
|
14006
15059
|
}
|
|
14007
15060
|
),
|
|
14008
|
-
/* @__PURE__ */ (0,
|
|
15061
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
14009
15062
|
"input",
|
|
14010
15063
|
{
|
|
14011
15064
|
type: "text",
|
|
@@ -14024,7 +15077,7 @@ function WithdrawTokenSelector({
|
|
|
14024
15077
|
)
|
|
14025
15078
|
] })
|
|
14026
15079
|
] }),
|
|
14027
|
-
/* @__PURE__ */ (0,
|
|
15080
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
14028
15081
|
"div",
|
|
14029
15082
|
{
|
|
14030
15083
|
className: "uf-text-xs uf-mb-2",
|
|
@@ -14035,12 +15088,12 @@ function WithdrawTokenSelector({
|
|
|
14035
15088
|
children: t10.selectToken
|
|
14036
15089
|
}
|
|
14037
15090
|
),
|
|
14038
|
-
/* @__PURE__ */ (0,
|
|
15091
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
14039
15092
|
"div",
|
|
14040
15093
|
{
|
|
14041
15094
|
className: "uf-flex-1 uf-overflow-y-auto uf-min-h-0 uf--mx-6 uf-px-6 uf-pb-3",
|
|
14042
15095
|
style: { scrollbarWidth: "none" },
|
|
14043
|
-
children: filteredOptions.length === 0 ? /* @__PURE__ */ (0,
|
|
15096
|
+
children: filteredOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
14044
15097
|
"div",
|
|
14045
15098
|
{
|
|
14046
15099
|
style: {
|
|
@@ -14052,9 +15105,9 @@ function WithdrawTokenSelector({
|
|
|
14052
15105
|
},
|
|
14053
15106
|
children: t10.noTokensAvailable
|
|
14054
15107
|
}
|
|
14055
|
-
) : /* @__PURE__ */ (0,
|
|
15108
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: filteredOptions.map(({ token, chain }) => {
|
|
14056
15109
|
const key = `${token.symbol}-${chain.chain_type}:${chain.chain_id}`;
|
|
14057
|
-
return /* @__PURE__ */ (0,
|
|
15110
|
+
return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
|
|
14058
15111
|
"button",
|
|
14059
15112
|
{
|
|
14060
15113
|
type: "button",
|
|
@@ -14075,8 +15128,8 @@ function WithdrawTokenSelector({
|
|
|
14075
15128
|
backgroundColor: hoveredKey === key ? colors2.cardHover : "transparent"
|
|
14076
15129
|
},
|
|
14077
15130
|
children: [
|
|
14078
|
-
/* @__PURE__ */ (0,
|
|
14079
|
-
/* @__PURE__ */ (0,
|
|
15131
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { style: { position: "relative", flexShrink: 0 }, children: [
|
|
15132
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
14080
15133
|
"img",
|
|
14081
15134
|
{
|
|
14082
15135
|
src: token.icon_url,
|
|
@@ -14087,7 +15140,7 @@ function WithdrawTokenSelector({
|
|
|
14087
15140
|
className: "uf-rounded-full"
|
|
14088
15141
|
}
|
|
14089
15142
|
),
|
|
14090
|
-
/* @__PURE__ */ (0,
|
|
15143
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
14091
15144
|
"div",
|
|
14092
15145
|
{
|
|
14093
15146
|
style: {
|
|
@@ -14095,7 +15148,7 @@ function WithdrawTokenSelector({
|
|
|
14095
15148
|
bottom: -4,
|
|
14096
15149
|
right: -4
|
|
14097
15150
|
},
|
|
14098
|
-
children: /* @__PURE__ */ (0,
|
|
15151
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
14099
15152
|
"img",
|
|
14100
15153
|
{
|
|
14101
15154
|
src: chain.icon_url,
|
|
@@ -14109,8 +15162,8 @@ function WithdrawTokenSelector({
|
|
|
14109
15162
|
}
|
|
14110
15163
|
)
|
|
14111
15164
|
] }),
|
|
14112
|
-
/* @__PURE__ */ (0,
|
|
14113
|
-
/* @__PURE__ */ (0,
|
|
15165
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
15166
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
|
|
14114
15167
|
"div",
|
|
14115
15168
|
{
|
|
14116
15169
|
style: {
|
|
@@ -14122,7 +15175,7 @@ function WithdrawTokenSelector({
|
|
|
14122
15175
|
children: token.symbol
|
|
14123
15176
|
}
|
|
14124
15177
|
),
|
|
14125
|
-
/* @__PURE__ */ (0,
|
|
15178
|
+
/* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
|
|
14126
15179
|
"div",
|
|
14127
15180
|
{
|
|
14128
15181
|
style: {
|
|
@@ -14145,7 +15198,7 @@ function WithdrawTokenSelector({
|
|
|
14145
15198
|
}) })
|
|
14146
15199
|
}
|
|
14147
15200
|
),
|
|
14148
|
-
/* @__PURE__ */ (0,
|
|
15201
|
+
/* @__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
15202
|
PoweredByUnifold,
|
|
14150
15203
|
{
|
|
14151
15204
|
color: colors2.foregroundMuted,
|
|
@@ -14160,6 +15213,7 @@ function WithdrawTokenSelector({
|
|
|
14160
15213
|
0 && (module.exports = {
|
|
14161
15214
|
Button,
|
|
14162
15215
|
BuyWithCard,
|
|
15216
|
+
CheckoutModal,
|
|
14163
15217
|
ConfirmingView,
|
|
14164
15218
|
CurrencyListItem,
|
|
14165
15219
|
CurrencyListSection,
|
|
@@ -14183,6 +15237,7 @@ function WithdrawTokenSelector({
|
|
|
14183
15237
|
DialogPortal,
|
|
14184
15238
|
DialogTitle,
|
|
14185
15239
|
DialogTrigger,
|
|
15240
|
+
HYPERCORE_CHAIN_ID,
|
|
14186
15241
|
Select,
|
|
14187
15242
|
SelectContent,
|
|
14188
15243
|
SelectGroup,
|
|
@@ -14214,14 +15269,18 @@ function WithdrawTokenSelector({
|
|
|
14214
15269
|
defaultColors,
|
|
14215
15270
|
detectBrowserWallet,
|
|
14216
15271
|
getColors,
|
|
15272
|
+
isHypercoreChain,
|
|
14217
15273
|
mergeColors,
|
|
14218
15274
|
resolveComponentTokens,
|
|
14219
15275
|
sendEvmWithdraw,
|
|
15276
|
+
sendHypercoreWithdraw,
|
|
14220
15277
|
sendSolanaWithdraw,
|
|
14221
15278
|
truncateAddress,
|
|
14222
15279
|
useAddressBalance,
|
|
14223
15280
|
useAllowedCountry,
|
|
14224
15281
|
useDepositPolling,
|
|
15282
|
+
useDepositQuote,
|
|
15283
|
+
usePaymentIntent,
|
|
14225
15284
|
useSourceTokenValidation,
|
|
14226
15285
|
useSupportedDestinationTokens,
|
|
14227
15286
|
useTheme,
|