@unifold/ui-react 0.1.42 → 0.1.43
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +103 -5
- package/dist/index.d.ts +103 -5
- package/dist/index.js +1420 -380
- package/dist/index.mjs +1417 -371
- package/dist/styles-base.css +1 -1
- package/dist/styles.css +1 -1
- package/package.json +2 -2
package/dist/index.mjs
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
// src/components/deposits/DepositModal.tsx
|
|
2
2
|
import {
|
|
3
3
|
useState as useState27,
|
|
4
|
-
useEffect as
|
|
4
|
+
useEffect as useEffect22,
|
|
5
5
|
useLayoutEffect as useLayoutEffect2,
|
|
6
6
|
useCallback as useCallback4,
|
|
7
|
-
useRef as
|
|
7
|
+
useRef as useRef7,
|
|
8
8
|
useMemo as useMemo9
|
|
9
9
|
} from "react";
|
|
10
10
|
import { ChevronRight as ChevronRight11, MapPinOff, AlertTriangle } from "lucide-react";
|
|
@@ -1398,6 +1398,7 @@ function interpolate(template, params) {
|
|
|
1398
1398
|
import { useState as useState5, useEffect as useEffect3, useRef } from "react";
|
|
1399
1399
|
import {
|
|
1400
1400
|
queryExecutions,
|
|
1401
|
+
listPaymentIntentExecutions,
|
|
1401
1402
|
pollDirectExecutions,
|
|
1402
1403
|
ExecutionStatus,
|
|
1403
1404
|
ActionType
|
|
@@ -1409,6 +1410,7 @@ var CUTOFF_BUFFER_MS = 6e4;
|
|
|
1409
1410
|
function useDepositPolling({
|
|
1410
1411
|
userId,
|
|
1411
1412
|
publishableKey,
|
|
1413
|
+
clientSecret,
|
|
1412
1414
|
depositConfirmationMode = "auto_ui",
|
|
1413
1415
|
depositWalletId,
|
|
1414
1416
|
enabled = true,
|
|
@@ -1466,11 +1468,12 @@ function useDepositPolling({
|
|
|
1466
1468
|
depositWalletId
|
|
1467
1469
|
]);
|
|
1468
1470
|
useEffect3(() => {
|
|
1469
|
-
if (!
|
|
1471
|
+
if (!enabled) return;
|
|
1472
|
+
if (!clientSecret && !userId) return;
|
|
1470
1473
|
const modalOpenedAt = modalOpenedAtRef.current;
|
|
1471
1474
|
const poll = async () => {
|
|
1472
1475
|
try {
|
|
1473
|
-
const response = await queryExecutions(userId, publishableKey, ActionType.Deposit);
|
|
1476
|
+
const response = clientSecret ? await listPaymentIntentExecutions(clientSecret, publishableKey) : await queryExecutions(userId, publishableKey, ActionType.Deposit);
|
|
1474
1477
|
const cutoff = new Date(modalOpenedAt.getTime() - CUTOFF_BUFFER_MS);
|
|
1475
1478
|
const sortedExecutions = [...response.data].sort((a, b) => {
|
|
1476
1479
|
const timeA = a.created_at ? new Date(a.created_at).getTime() : 0;
|
|
@@ -1554,7 +1557,7 @@ function useDepositPolling({
|
|
|
1554
1557
|
clearInterval(pollInterval);
|
|
1555
1558
|
setIsPolling(false);
|
|
1556
1559
|
};
|
|
1557
|
-
}, [userId, publishableKey, enabled]);
|
|
1560
|
+
}, [userId, publishableKey, clientSecret, enabled]);
|
|
1558
1561
|
useEffect3(() => {
|
|
1559
1562
|
if (!pollingEnabled || !depositWalletId) return;
|
|
1560
1563
|
const triggerPoll = async () => {
|
|
@@ -8329,6 +8332,7 @@ var parseChainKey = (chainKey) => {
|
|
|
8329
8332
|
function TransferCryptoSingleInput({
|
|
8330
8333
|
userId,
|
|
8331
8334
|
publishableKey,
|
|
8335
|
+
clientSecret,
|
|
8332
8336
|
recipientAddress,
|
|
8333
8337
|
destinationChainType,
|
|
8334
8338
|
destinationChainId,
|
|
@@ -8341,7 +8345,9 @@ function TransferCryptoSingleInput({
|
|
|
8341
8345
|
onExecutionsChange,
|
|
8342
8346
|
onDepositSuccess,
|
|
8343
8347
|
onDepositError,
|
|
8344
|
-
wallets: externalWallets
|
|
8348
|
+
wallets: externalWallets,
|
|
8349
|
+
onSourceTokenChange,
|
|
8350
|
+
checkoutQuote
|
|
8345
8351
|
}) {
|
|
8346
8352
|
const { themeClass, colors: colors2, fonts, components } = useTheme();
|
|
8347
8353
|
const isDarkMode = themeClass.includes("uf-dark");
|
|
@@ -8408,12 +8414,28 @@ function TransferCryptoSingleInput({
|
|
|
8408
8414
|
} = useDepositPolling({
|
|
8409
8415
|
userId,
|
|
8410
8416
|
publishableKey,
|
|
8417
|
+
clientSecret,
|
|
8411
8418
|
depositConfirmationMode,
|
|
8412
8419
|
depositWalletId: currentWallet?.id,
|
|
8413
8420
|
enabled: true,
|
|
8414
8421
|
onDepositSuccess,
|
|
8415
8422
|
onDepositError
|
|
8416
8423
|
});
|
|
8424
|
+
useEffect17(() => {
|
|
8425
|
+
if (!onSourceTokenChange || !token || !chain || !initialSelectionDone) return;
|
|
8426
|
+
const { chainType, chainId } = parseChainKey(chain);
|
|
8427
|
+
const matchedToken = supportedTokens.find((t11) => t11.symbol === token);
|
|
8428
|
+
const matchedChain = matchedToken?.chains.find(
|
|
8429
|
+
(c) => c.chain_type === chainType && c.chain_id === chainId
|
|
8430
|
+
);
|
|
8431
|
+
onSourceTokenChange({
|
|
8432
|
+
symbol: token,
|
|
8433
|
+
chainType,
|
|
8434
|
+
chainId,
|
|
8435
|
+
tokenAddress: matchedChain?.token_address ?? "",
|
|
8436
|
+
minimumDepositAmountUsd: matchedChain?.minimum_deposit_amount_usd ?? 0
|
|
8437
|
+
});
|
|
8438
|
+
}, [token, chain, initialSelectionDone, onSourceTokenChange, supportedTokens]);
|
|
8417
8439
|
useEffect17(() => {
|
|
8418
8440
|
if (onExecutionsChange) {
|
|
8419
8441
|
onExecutionsChange(depositExecutions);
|
|
@@ -8560,6 +8582,53 @@ function TransferCryptoSingleInput({
|
|
|
8560
8582
|
/* @__PURE__ */ jsx41("span", { children: "Retrying automatically every 5 seconds..." })
|
|
8561
8583
|
] })
|
|
8562
8584
|
] }),
|
|
8585
|
+
checkoutQuote && /* @__PURE__ */ jsxs35(
|
|
8586
|
+
"div",
|
|
8587
|
+
{
|
|
8588
|
+
className: "uf-rounded-xl uf-px-3 uf-py-2 uf-flex uf-items-center uf-justify-between",
|
|
8589
|
+
style: {
|
|
8590
|
+
backgroundColor: components.card.backgroundColor,
|
|
8591
|
+
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`,
|
|
8592
|
+
borderRadius: components.card.borderRadius
|
|
8593
|
+
},
|
|
8594
|
+
children: [
|
|
8595
|
+
/* @__PURE__ */ jsx41(
|
|
8596
|
+
"span",
|
|
8597
|
+
{
|
|
8598
|
+
className: "uf-text-xs",
|
|
8599
|
+
style: { color: components.card.subtitleColor, fontFamily: fonts.regular },
|
|
8600
|
+
children: "You send"
|
|
8601
|
+
}
|
|
8602
|
+
),
|
|
8603
|
+
/* @__PURE__ */ jsxs35(
|
|
8604
|
+
"span",
|
|
8605
|
+
{
|
|
8606
|
+
className: "uf-text-sm uf-font-semibold",
|
|
8607
|
+
style: { color: components.card.titleColor, fontFamily: fonts.semibold },
|
|
8608
|
+
children: [
|
|
8609
|
+
(Number(checkoutQuote.sourceAmount) / 10 ** checkoutQuote.sourceTokenDecimals).toFixed(
|
|
8610
|
+
Math.min(checkoutQuote.sourceTokenDecimals, 6)
|
|
8611
|
+
),
|
|
8612
|
+
" ",
|
|
8613
|
+
checkoutQuote.sourceTokenSymbol,
|
|
8614
|
+
checkoutQuote.sourceAmountUsd && /* @__PURE__ */ jsxs35(
|
|
8615
|
+
"span",
|
|
8616
|
+
{
|
|
8617
|
+
className: "uf-text-xs uf-font-normal uf-ml-1.5",
|
|
8618
|
+
style: { color: components.card.subtitleColor },
|
|
8619
|
+
children: [
|
|
8620
|
+
"($",
|
|
8621
|
+
checkoutQuote.sourceAmountUsd,
|
|
8622
|
+
")"
|
|
8623
|
+
]
|
|
8624
|
+
}
|
|
8625
|
+
)
|
|
8626
|
+
]
|
|
8627
|
+
}
|
|
8628
|
+
)
|
|
8629
|
+
]
|
|
8630
|
+
}
|
|
8631
|
+
),
|
|
8563
8632
|
/* @__PURE__ */ jsxs35("div", { className: "uf-flex uf-flex-col uf-items-center uf-pt-2", children: [
|
|
8564
8633
|
/* @__PURE__ */ jsx41("div", { className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1", style: { color: components.card.labelColor }, children: "Intent address" }),
|
|
8565
8634
|
/* @__PURE__ */ jsx41("div", { className: "uf-shadow-lg", style: { borderRadius: components.card.borderRadius, border: `${components.card.borderWidth}px solid ${components.card.borderColor}` }, children: loading || tokensLoading || !initialSelectionDone ? (
|
|
@@ -9429,9 +9498,16 @@ function SelectTokenView({
|
|
|
9429
9498
|
onBack,
|
|
9430
9499
|
onClose,
|
|
9431
9500
|
onDisconnectWallet,
|
|
9432
|
-
isDisconnectingWallet = false
|
|
9501
|
+
isDisconnectingWallet = false,
|
|
9502
|
+
checkoutAmountUsd,
|
|
9503
|
+
checkoutReceivedUsd
|
|
9433
9504
|
}) {
|
|
9434
9505
|
const { colors: colors2, fonts, components } = useTheme();
|
|
9506
|
+
const isCheckout = !!checkoutAmountUsd;
|
|
9507
|
+
const headerSubtitle = isCheckout ? parseFloat(checkoutReceivedUsd || "0") > 0 ? `$${checkoutReceivedUsd} / $${checkoutAmountUsd} received` : `Amount due: $${checkoutAmountUsd}` : formatBalanceDisplay(
|
|
9508
|
+
`$${totalBalanceUsd || "0.00"}`,
|
|
9509
|
+
projectName
|
|
9510
|
+
);
|
|
9435
9511
|
return /* @__PURE__ */ jsxs38(
|
|
9436
9512
|
"div",
|
|
9437
9513
|
{
|
|
@@ -9440,11 +9516,8 @@ function SelectTokenView({
|
|
|
9440
9516
|
/* @__PURE__ */ jsx45(
|
|
9441
9517
|
DepositHeader,
|
|
9442
9518
|
{
|
|
9443
|
-
title: "Select Token",
|
|
9444
|
-
subtitle:
|
|
9445
|
-
`$${totalBalanceUsd || "0.00"}`,
|
|
9446
|
-
projectName
|
|
9447
|
-
),
|
|
9519
|
+
title: isCheckout ? "Select Token" : "Select Token",
|
|
9520
|
+
subtitle: headerSubtitle,
|
|
9448
9521
|
showBack: true,
|
|
9449
9522
|
onBack,
|
|
9450
9523
|
onClose
|
|
@@ -9675,10 +9748,19 @@ function EnterAmountView({
|
|
|
9675
9748
|
onReview,
|
|
9676
9749
|
onBack,
|
|
9677
9750
|
onClose,
|
|
9678
|
-
quickSelectMode
|
|
9751
|
+
quickSelectMode,
|
|
9752
|
+
checkoutAmountUsd,
|
|
9753
|
+
checkoutReceivedUsd
|
|
9679
9754
|
}) {
|
|
9680
9755
|
const { colors: colors2, fonts, components } = useTheme();
|
|
9756
|
+
const isCheckout = !!checkoutAmountUsd;
|
|
9681
9757
|
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}`;
|
|
9758
|
+
const checkoutRemainingUsd = isCheckout ? Math.max(
|
|
9759
|
+
parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0"),
|
|
9760
|
+
0
|
|
9761
|
+
).toFixed(2) : null;
|
|
9762
|
+
const headerTitle = isCheckout ? `Pay $${checkoutRemainingUsd}` : "Enter Amount";
|
|
9763
|
+
const headerSubtitle = isCheckout ? parseFloat(checkoutReceivedUsd || "0") > 0 ? `$${checkoutReceivedUsd} / $${checkoutAmountUsd} received` : null : balanceSubtitle;
|
|
9682
9764
|
const usePercentageChips = quickSelectMode === "percentage" && maxUsdAmount > 0;
|
|
9683
9765
|
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";
|
|
9684
9766
|
return /* @__PURE__ */ jsxs39(
|
|
@@ -9692,14 +9774,27 @@ function EnterAmountView({
|
|
|
9692
9774
|
/* @__PURE__ */ jsx46(
|
|
9693
9775
|
DepositHeader,
|
|
9694
9776
|
{
|
|
9695
|
-
title:
|
|
9696
|
-
subtitle:
|
|
9777
|
+
title: headerTitle,
|
|
9778
|
+
subtitle: headerSubtitle ?? void 0,
|
|
9697
9779
|
showBack: true,
|
|
9698
9780
|
onBack,
|
|
9699
9781
|
onClose
|
|
9700
9782
|
}
|
|
9701
9783
|
),
|
|
9702
|
-
walletInfoProp ? /* @__PURE__ */ jsx46("div", { className: "uf-flex uf-w-full uf-justify-center uf-mb-3", children: /* @__PURE__ */
|
|
9784
|
+
walletInfoProp ? /* @__PURE__ */ jsx46("div", { className: "uf-flex uf-w-full uf-justify-center uf-mb-3", children: /* @__PURE__ */ jsxs39("div", { className: "uf-flex uf-flex-col uf-items-center uf-gap-1", children: [
|
|
9785
|
+
/* @__PURE__ */ jsx46(WalletWithNetworkBadge, { walletInfo: walletInfoProp }),
|
|
9786
|
+
isCheckout && /* @__PURE__ */ jsx46(
|
|
9787
|
+
"span",
|
|
9788
|
+
{
|
|
9789
|
+
className: "uf-text-xs",
|
|
9790
|
+
style: {
|
|
9791
|
+
color: colors2.foregroundMuted,
|
|
9792
|
+
fontFamily: fonts.regular
|
|
9793
|
+
},
|
|
9794
|
+
children: balanceSubtitle
|
|
9795
|
+
}
|
|
9796
|
+
)
|
|
9797
|
+
] }) }) : null,
|
|
9703
9798
|
/* @__PURE__ */ jsxs39("div", { className: "uf-flex uf-min-h-0 uf-flex-1 uf-flex-col", children: [
|
|
9704
9799
|
/* @__PURE__ */ jsxs39("div", { className: "uf-min-h-0 uf-flex-1", children: [
|
|
9705
9800
|
/* @__PURE__ */ jsxs39("div", { className: "uf-text-center uf-py-8", children: [
|
|
@@ -9722,7 +9817,9 @@ function EnterAmountView({
|
|
|
9722
9817
|
inputMode: "decimal",
|
|
9723
9818
|
placeholder: "0",
|
|
9724
9819
|
value: amountUsd,
|
|
9820
|
+
readOnly: isCheckout,
|
|
9725
9821
|
onChange: (e) => {
|
|
9822
|
+
if (isCheckout) return;
|
|
9726
9823
|
const value = e.target.value;
|
|
9727
9824
|
if (value === "" || /^\d*\.?\d*$/.test(value)) {
|
|
9728
9825
|
const decimalIndex = value.indexOf(".");
|
|
@@ -9733,7 +9830,7 @@ function EnterAmountView({
|
|
|
9733
9830
|
onAmountChange(value);
|
|
9734
9831
|
}
|
|
9735
9832
|
},
|
|
9736
|
-
className:
|
|
9833
|
+
className: `uf-bg-transparent uf-outline-none uf-text-center uf-font-normal uf-w-auto uf-min-w-[60px] ${isCheckout ? "uf-cursor-default" : ""}`,
|
|
9737
9834
|
style: {
|
|
9738
9835
|
fontSize: `${Math.max(3.75 - (amountUsd || "0").length * 0.15, 2)}rem`,
|
|
9739
9836
|
color: components.input.textColor,
|
|
@@ -9755,7 +9852,7 @@ function EnterAmountView({
|
|
|
9755
9852
|
}
|
|
9756
9853
|
)
|
|
9757
9854
|
] }),
|
|
9758
|
-
/* @__PURE__ */ jsx46("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__ */ jsxs39(Fragment5, { children: [
|
|
9855
|
+
!isCheckout && /* @__PURE__ */ jsx46("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__ */ jsxs39(Fragment5, { children: [
|
|
9759
9856
|
PERCENT_QUICK_AMOUNTS.map((pct) => /* @__PURE__ */ jsxs39(
|
|
9760
9857
|
"button",
|
|
9761
9858
|
{
|
|
@@ -9824,7 +9921,46 @@ function EnterAmountView({
|
|
|
9824
9921
|
}
|
|
9825
9922
|
)
|
|
9826
9923
|
] }) }),
|
|
9827
|
-
tokenChainDetails && tokenChainDetails.minimum_deposit_amount_usd > 0 && /* @__PURE__ */ jsxs39(
|
|
9924
|
+
tokenChainDetails && tokenChainDetails.minimum_deposit_amount_usd > 0 && (isCheckout && checkoutAmountUsd && inputUsdNum > parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0") + 5e-3 ? /* @__PURE__ */ jsxs39(
|
|
9925
|
+
"div",
|
|
9926
|
+
{
|
|
9927
|
+
className: "uf-rounded-lg uf-px-3 uf-py-2 uf-mb-3 uf-text-center",
|
|
9928
|
+
style: {
|
|
9929
|
+
backgroundColor: colors2.warning + "15",
|
|
9930
|
+
border: `1px solid ${colors2.warning}30`,
|
|
9931
|
+
borderRadius: components.card.borderRadius,
|
|
9932
|
+
animation: "uf-fadeSlideIn 0.4s ease-out"
|
|
9933
|
+
},
|
|
9934
|
+
children: [
|
|
9935
|
+
/* @__PURE__ */ jsxs39(
|
|
9936
|
+
"div",
|
|
9937
|
+
{
|
|
9938
|
+
className: "uf-text-xs uf-font-medium",
|
|
9939
|
+
style: { color: colors2.warning, fontFamily: fonts.medium },
|
|
9940
|
+
children: [
|
|
9941
|
+
"Minimum for ",
|
|
9942
|
+
selectedToken.symbol,
|
|
9943
|
+
" on ",
|
|
9944
|
+
selectedToken.chain_name,
|
|
9945
|
+
" is $",
|
|
9946
|
+
tokenChainDetails.minimum_deposit_amount_usd.toFixed(2)
|
|
9947
|
+
]
|
|
9948
|
+
}
|
|
9949
|
+
),
|
|
9950
|
+
/* @__PURE__ */ jsxs39(
|
|
9951
|
+
"div",
|
|
9952
|
+
{
|
|
9953
|
+
className: "uf-text-xs uf-mt-0.5",
|
|
9954
|
+
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
9955
|
+
children: [
|
|
9956
|
+
"Amount adjusted from remaining $",
|
|
9957
|
+
(parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0")).toFixed(2)
|
|
9958
|
+
]
|
|
9959
|
+
}
|
|
9960
|
+
)
|
|
9961
|
+
]
|
|
9962
|
+
}
|
|
9963
|
+
) : /* @__PURE__ */ jsxs39(
|
|
9828
9964
|
"div",
|
|
9829
9965
|
{
|
|
9830
9966
|
className: "uf-text-center uf-text-xs uf-mb-3",
|
|
@@ -9834,7 +9970,7 @@ function EnterAmountView({
|
|
|
9834
9970
|
tokenChainDetails.minimum_deposit_amount_usd.toFixed(2)
|
|
9835
9971
|
]
|
|
9836
9972
|
}
|
|
9837
|
-
),
|
|
9973
|
+
)),
|
|
9838
9974
|
inputUsdNum > 0 && /* @__PURE__ */ jsx46(Fragment5, { children: inputUsdNum > maxUsdAmount ? /* @__PURE__ */ jsx46(
|
|
9839
9975
|
"div",
|
|
9840
9976
|
{
|
|
@@ -9849,7 +9985,44 @@ function EnterAmountView({
|
|
|
9849
9985
|
style: { color: colors2.error },
|
|
9850
9986
|
children: error
|
|
9851
9987
|
}
|
|
9852
|
-
) })
|
|
9988
|
+
) }),
|
|
9989
|
+
isCheckout && selectedToken.icon_url && /* @__PURE__ */ jsxs39("div", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2 uf-py-2", children: [
|
|
9990
|
+
/* @__PURE__ */ jsxs39("div", { className: "uf-relative", children: [
|
|
9991
|
+
/* @__PURE__ */ jsx46(
|
|
9992
|
+
"img",
|
|
9993
|
+
{
|
|
9994
|
+
src: selectedToken.icon_url,
|
|
9995
|
+
alt: selectedToken.symbol,
|
|
9996
|
+
width: 20,
|
|
9997
|
+
height: 20,
|
|
9998
|
+
className: "uf-w-5 uf-h-5 uf-rounded-full"
|
|
9999
|
+
}
|
|
10000
|
+
),
|
|
10001
|
+
selectedToken.chain_icon_url && /* @__PURE__ */ jsx46(
|
|
10002
|
+
"img",
|
|
10003
|
+
{
|
|
10004
|
+
src: selectedToken.chain_icon_url,
|
|
10005
|
+
alt: selectedToken.chain_name,
|
|
10006
|
+
width: 10,
|
|
10007
|
+
height: 10,
|
|
10008
|
+
className: "uf-w-2.5 uf-h-2.5 uf-rounded-full uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-border",
|
|
10009
|
+
style: { borderColor: colors2.background }
|
|
10010
|
+
}
|
|
10011
|
+
)
|
|
10012
|
+
] }),
|
|
10013
|
+
/* @__PURE__ */ jsxs39(
|
|
10014
|
+
"span",
|
|
10015
|
+
{
|
|
10016
|
+
className: "uf-text-xs",
|
|
10017
|
+
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
10018
|
+
children: [
|
|
10019
|
+
selectedToken.symbol,
|
|
10020
|
+
" on ",
|
|
10021
|
+
selectedToken.chain_name
|
|
10022
|
+
]
|
|
10023
|
+
}
|
|
10024
|
+
)
|
|
10025
|
+
] })
|
|
9853
10026
|
] }),
|
|
9854
10027
|
/* @__PURE__ */ jsx46("div", { className: "uf-shrink-0 uf-pt-2", children: /* @__PURE__ */ jsx46(
|
|
9855
10028
|
"button",
|
|
@@ -9875,8 +10048,20 @@ function EnterAmountView({
|
|
|
9875
10048
|
}
|
|
9876
10049
|
|
|
9877
10050
|
// src/components/deposits/browser-wallets/ReviewView.tsx
|
|
9878
|
-
import { ChevronDown as ChevronDown6, ChevronUp as ChevronUp5 } from "lucide-react";
|
|
10051
|
+
import { ChevronDown as ChevronDown6, ChevronUp as ChevronUp5, Loader2 as Loader23 } from "lucide-react";
|
|
9879
10052
|
import { Fragment as Fragment6, jsx as jsx47, jsxs as jsxs40 } from "react/jsx-runtime";
|
|
10053
|
+
var WALLET_ICONS2 = {
|
|
10054
|
+
metamask: MetamaskIcon,
|
|
10055
|
+
phantom: PhantomIcon,
|
|
10056
|
+
coinbase: CoinbaseIcon,
|
|
10057
|
+
trust: TrustIcon,
|
|
10058
|
+
rainbow: RainbowIcon,
|
|
10059
|
+
rabby: RabbyIcon,
|
|
10060
|
+
okx: OkxIcon,
|
|
10061
|
+
solflare: SolflareIcon,
|
|
10062
|
+
backpack: BackpackIcon,
|
|
10063
|
+
glow: GlowIcon
|
|
10064
|
+
};
|
|
9880
10065
|
function ReviewView({
|
|
9881
10066
|
walletInfo,
|
|
9882
10067
|
recipientAddress,
|
|
@@ -9911,30 +10096,17 @@ function ReviewView({
|
|
|
9911
10096
|
),
|
|
9912
10097
|
/* @__PURE__ */ jsxs40("div", { className: "uf-flex uf-min-h-0 uf-flex-1 uf-flex-col", children: [
|
|
9913
10098
|
/* @__PURE__ */ jsxs40("div", { className: "uf-min-h-0 uf-flex-1 uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: [
|
|
9914
|
-
/* @__PURE__ */
|
|
9915
|
-
|
|
9916
|
-
|
|
9917
|
-
|
|
9918
|
-
|
|
9919
|
-
|
|
9920
|
-
|
|
9921
|
-
|
|
9922
|
-
|
|
9923
|
-
|
|
9924
|
-
|
|
9925
|
-
),
|
|
9926
|
-
formattedTokenAmount && /* @__PURE__ */ jsxs40(
|
|
9927
|
-
"div",
|
|
9928
|
-
{
|
|
9929
|
-
className: "uf-text-sm uf-mt-2",
|
|
9930
|
-
style: { color: colors2.foregroundMuted },
|
|
9931
|
-
children: [
|
|
9932
|
-
"\u2248 ",
|
|
9933
|
-
formattedTokenAmount
|
|
9934
|
-
]
|
|
9935
|
-
}
|
|
9936
|
-
)
|
|
9937
|
-
] }),
|
|
10099
|
+
/* @__PURE__ */ jsx47("div", { className: "uf-text-center", children: /* @__PURE__ */ jsxs40(
|
|
10100
|
+
"div",
|
|
10101
|
+
{
|
|
10102
|
+
className: "uf-text-4xl uf-font-medium",
|
|
10103
|
+
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
10104
|
+
children: [
|
|
10105
|
+
"$",
|
|
10106
|
+
amountUsd || "0"
|
|
10107
|
+
]
|
|
10108
|
+
}
|
|
10109
|
+
) }),
|
|
9938
10110
|
/* @__PURE__ */ jsxs40(
|
|
9939
10111
|
"div",
|
|
9940
10112
|
{
|
|
@@ -9951,7 +10123,31 @@ function ReviewView({
|
|
|
9951
10123
|
{
|
|
9952
10124
|
className: "uf-text-sm",
|
|
9953
10125
|
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
9954
|
-
children: "
|
|
10126
|
+
children: "From"
|
|
10127
|
+
}
|
|
10128
|
+
),
|
|
10129
|
+
/* @__PURE__ */ jsxs40("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
10130
|
+
WALLET_ICONS2[walletInfo.icon] && (() => {
|
|
10131
|
+
const Icon2 = WALLET_ICONS2[walletInfo.icon];
|
|
10132
|
+
return /* @__PURE__ */ jsx47("div", { className: "uf-w-5 uf-h-5 uf-rounded-full uf-overflow-hidden uf-flex-shrink-0", children: /* @__PURE__ */ jsx47(Icon2, { size: 20, variant: "color" }) });
|
|
10133
|
+
})(),
|
|
10134
|
+
/* @__PURE__ */ jsx47(
|
|
10135
|
+
"span",
|
|
10136
|
+
{
|
|
10137
|
+
className: "uf-text-sm uf-font-medium",
|
|
10138
|
+
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
10139
|
+
children: walletInfo.name
|
|
10140
|
+
}
|
|
10141
|
+
)
|
|
10142
|
+
] })
|
|
10143
|
+
] }),
|
|
10144
|
+
/* @__PURE__ */ jsxs40("div", { className: "uf-flex uf-justify-between uf-items-center", children: [
|
|
10145
|
+
/* @__PURE__ */ jsx47(
|
|
10146
|
+
"span",
|
|
10147
|
+
{
|
|
10148
|
+
className: "uf-text-sm",
|
|
10149
|
+
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
10150
|
+
children: "You send"
|
|
9955
10151
|
}
|
|
9956
10152
|
),
|
|
9957
10153
|
/* @__PURE__ */ jsxs40("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
@@ -9963,17 +10159,12 @@ function ReviewView({
|
|
|
9963
10159
|
className: "uf-w-5 uf-h-5 uf-rounded-full"
|
|
9964
10160
|
}
|
|
9965
10161
|
),
|
|
9966
|
-
/* @__PURE__ */
|
|
10162
|
+
/* @__PURE__ */ jsx47(
|
|
9967
10163
|
"span",
|
|
9968
10164
|
{
|
|
9969
10165
|
className: "uf-text-sm uf-font-medium",
|
|
9970
10166
|
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
9971
|
-
children:
|
|
9972
|
-
walletInfo.name,
|
|
9973
|
-
" (",
|
|
9974
|
-
truncateAddress2(walletInfo.address),
|
|
9975
|
-
")"
|
|
9976
|
-
]
|
|
10167
|
+
children: formattedTokenAmount || `$${amountUsd}`
|
|
9977
10168
|
}
|
|
9978
10169
|
)
|
|
9979
10170
|
] })
|
|
@@ -10136,7 +10327,10 @@ function ReviewView({
|
|
|
10136
10327
|
borderRadius: components.button.borderRadius,
|
|
10137
10328
|
border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
|
|
10138
10329
|
},
|
|
10139
|
-
children: isConfirming ? "
|
|
10330
|
+
children: isConfirming ? /* @__PURE__ */ jsxs40("span", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2", children: [
|
|
10331
|
+
/* @__PURE__ */ jsx47(Loader23, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
|
|
10332
|
+
"Confirming..."
|
|
10333
|
+
] }) : "Confirm Order"
|
|
10140
10334
|
}
|
|
10141
10335
|
) })
|
|
10142
10336
|
] })
|
|
@@ -10147,20 +10341,38 @@ function ReviewView({
|
|
|
10147
10341
|
}
|
|
10148
10342
|
|
|
10149
10343
|
// src/components/deposits/browser-wallets/ConfirmingView.tsx
|
|
10150
|
-
import { useCallback as useCallback2, useState as useState24 } from "react";
|
|
10151
|
-
import { Loader2 as
|
|
10344
|
+
import { useCallback as useCallback2, useEffect as useEffect19, useState as useState24 } from "react";
|
|
10345
|
+
import { Loader2 as Loader24, CheckCircle2, ArrowRight } from "lucide-react";
|
|
10152
10346
|
import { Fragment as Fragment7, jsx as jsx48, jsxs as jsxs41 } from "react/jsx-runtime";
|
|
10347
|
+
var SETTLE_FALLBACK_MS = 15e3;
|
|
10153
10348
|
function ConfirmingView({
|
|
10154
10349
|
isConfirming,
|
|
10155
10350
|
onClose,
|
|
10156
10351
|
executions = [],
|
|
10157
|
-
isPolling = false
|
|
10352
|
+
isPolling = false,
|
|
10353
|
+
onNewDeposit,
|
|
10354
|
+
onDone,
|
|
10355
|
+
paymentIntentStatus,
|
|
10356
|
+
amountReceivedUsd,
|
|
10357
|
+
amountReceivedUsdAtSubmission
|
|
10158
10358
|
}) {
|
|
10159
|
-
const { colors: colors2, fonts } = useTheme();
|
|
10359
|
+
const { colors: colors2, fonts, components } = useTheme();
|
|
10160
10360
|
const [containerEl, setContainerEl] = useState24(null);
|
|
10161
10361
|
const containerCallbackRef = useCallback2((el) => {
|
|
10162
10362
|
setContainerEl(el);
|
|
10163
10363
|
}, []);
|
|
10364
|
+
const [fallbackSettled, setFallbackSettled] = useState24(false);
|
|
10365
|
+
const hasExecution = executions.length > 0;
|
|
10366
|
+
const isCheckoutMode = paymentIntentStatus != null;
|
|
10367
|
+
const isPaymentComplete = paymentIntentStatus === "succeeded";
|
|
10368
|
+
const amountChanged = amountReceivedUsdAtSubmission != null && amountReceivedUsd != null && amountReceivedUsd !== amountReceivedUsdAtSubmission;
|
|
10369
|
+
const piSettled = !isCheckoutMode || isPaymentComplete || amountChanged || fallbackSettled;
|
|
10370
|
+
useEffect19(() => {
|
|
10371
|
+
if (!hasExecution || piSettled) return;
|
|
10372
|
+
const timeout = setTimeout(() => setFallbackSettled(true), SETTLE_FALLBACK_MS);
|
|
10373
|
+
return () => clearTimeout(timeout);
|
|
10374
|
+
}, [hasExecution, piSettled]);
|
|
10375
|
+
const showButtons = hasExecution && piSettled;
|
|
10164
10376
|
return /* @__PURE__ */ jsx48(PortalContainerProvider, { value: containerEl, children: /* @__PURE__ */ jsxs41(
|
|
10165
10377
|
"div",
|
|
10166
10378
|
{
|
|
@@ -10173,13 +10385,13 @@ function ConfirmingView({
|
|
|
10173
10385
|
/* @__PURE__ */ jsx48(
|
|
10174
10386
|
DepositHeader,
|
|
10175
10387
|
{
|
|
10176
|
-
title: isConfirming ? "Confirming..." : "Processing",
|
|
10177
|
-
onClose
|
|
10388
|
+
title: isConfirming ? "Confirming..." : hasExecution && isPaymentComplete ? "Payment Complete" : hasExecution ? "Deposit Received" : "Processing",
|
|
10389
|
+
onClose: isPaymentComplete && onDone ? onDone : onClose
|
|
10178
10390
|
}
|
|
10179
10391
|
),
|
|
10180
10392
|
/* @__PURE__ */ jsx48("div", { className: "uf-flex uf-flex-1 uf-flex-col uf-items-center uf-justify-center uf-py-8", children: isConfirming ? /* @__PURE__ */ jsxs41(Fragment7, { children: [
|
|
10181
10393
|
/* @__PURE__ */ jsx48(
|
|
10182
|
-
|
|
10394
|
+
Loader24,
|
|
10183
10395
|
{
|
|
10184
10396
|
className: "uf-w-12 uf-h-12 uf-animate-spin uf-mb-4",
|
|
10185
10397
|
style: { color: colors2.primary }
|
|
@@ -10201,11 +10413,70 @@ function ConfirmingView({
|
|
|
10201
10413
|
children: "Please confirm the transaction in your wallet"
|
|
10202
10414
|
}
|
|
10203
10415
|
)
|
|
10204
|
-
] }) : /* @__PURE__ */ jsxs41(Fragment7, { children: [
|
|
10416
|
+
] }) : hasExecution ? /* @__PURE__ */ jsxs41(Fragment7, { children: [
|
|
10205
10417
|
/* @__PURE__ */ jsx48(
|
|
10206
10418
|
CheckCircle2,
|
|
10207
10419
|
{
|
|
10208
10420
|
className: "uf-w-12 uf-h-12 uf-mb-4",
|
|
10421
|
+
style: { color: "rgb(34, 197, 94)" }
|
|
10422
|
+
}
|
|
10423
|
+
),
|
|
10424
|
+
/* @__PURE__ */ jsx48(
|
|
10425
|
+
"div",
|
|
10426
|
+
{
|
|
10427
|
+
className: "uf-text-lg uf-font-medium",
|
|
10428
|
+
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
10429
|
+
children: isPaymentComplete ? "Payment Complete" : "Deposit Received"
|
|
10430
|
+
}
|
|
10431
|
+
),
|
|
10432
|
+
/* @__PURE__ */ jsx48(
|
|
10433
|
+
"div",
|
|
10434
|
+
{
|
|
10435
|
+
className: "uf-text-sm uf-mt-2 uf-text-center uf-px-6",
|
|
10436
|
+
style: { color: colors2.foregroundMuted },
|
|
10437
|
+
children: isPaymentComplete ? "Your payment has been fulfilled." : showButtons ? "Your deposit is being processed." : "Checking payment status..."
|
|
10438
|
+
}
|
|
10439
|
+
),
|
|
10440
|
+
/* @__PURE__ */ jsx48("div", { className: "uf-mt-6 uf-flex uf-flex-col uf-items-center uf-gap-3", children: !showButtons ? /* @__PURE__ */ jsx48(
|
|
10441
|
+
Loader24,
|
|
10442
|
+
{
|
|
10443
|
+
className: "uf-w-5 uf-h-5 uf-animate-spin",
|
|
10444
|
+
style: { color: colors2.foregroundMuted }
|
|
10445
|
+
}
|
|
10446
|
+
) : isPaymentComplete && onDone ? /* @__PURE__ */ jsx48(
|
|
10447
|
+
"button",
|
|
10448
|
+
{
|
|
10449
|
+
onClick: onDone,
|
|
10450
|
+
className: "uf-w-full uf-py-3 uf-px-8 uf-text-sm uf-font-medium uf-transition-opacity hover:uf-opacity-80",
|
|
10451
|
+
style: {
|
|
10452
|
+
backgroundColor: colors2.primary,
|
|
10453
|
+
color: colors2.primaryForeground,
|
|
10454
|
+
fontFamily: fonts.medium,
|
|
10455
|
+
borderRadius: components.button.borderRadius
|
|
10456
|
+
},
|
|
10457
|
+
children: "Done"
|
|
10458
|
+
}
|
|
10459
|
+
) : onNewDeposit ? /* @__PURE__ */ jsxs41(
|
|
10460
|
+
"button",
|
|
10461
|
+
{
|
|
10462
|
+
onClick: onNewDeposit,
|
|
10463
|
+
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",
|
|
10464
|
+
style: {
|
|
10465
|
+
backgroundColor: colors2.primary,
|
|
10466
|
+
color: colors2.primaryForeground,
|
|
10467
|
+
fontFamily: fonts.medium
|
|
10468
|
+
},
|
|
10469
|
+
children: [
|
|
10470
|
+
"Make another deposit",
|
|
10471
|
+
/* @__PURE__ */ jsx48(ArrowRight, { className: "uf-w-4 uf-h-4" })
|
|
10472
|
+
]
|
|
10473
|
+
}
|
|
10474
|
+
) : null })
|
|
10475
|
+
] }) : /* @__PURE__ */ jsxs41(Fragment7, { children: [
|
|
10476
|
+
/* @__PURE__ */ jsx48(
|
|
10477
|
+
Loader24,
|
|
10478
|
+
{
|
|
10479
|
+
className: "uf-w-12 uf-h-12 uf-animate-spin uf-mb-4",
|
|
10209
10480
|
style: { color: colors2.primary }
|
|
10210
10481
|
}
|
|
10211
10482
|
),
|
|
@@ -10222,7 +10493,7 @@ function ConfirmingView({
|
|
|
10222
10493
|
{
|
|
10223
10494
|
className: "uf-text-sm uf-mt-2 uf-text-center uf-px-6",
|
|
10224
10495
|
style: { color: colors2.foregroundMuted },
|
|
10225
|
-
children: "
|
|
10496
|
+
children: "Waiting for your deposit to be detected..."
|
|
10226
10497
|
}
|
|
10227
10498
|
)
|
|
10228
10499
|
] }) }),
|
|
@@ -10249,6 +10520,7 @@ function BrowserWalletModal({
|
|
|
10249
10520
|
depositWallet,
|
|
10250
10521
|
userId,
|
|
10251
10522
|
publishableKey,
|
|
10523
|
+
clientSecret,
|
|
10252
10524
|
assetCdnUrl,
|
|
10253
10525
|
projectName,
|
|
10254
10526
|
theme = "dark",
|
|
@@ -10257,7 +10529,13 @@ function BrowserWalletModal({
|
|
|
10257
10529
|
onDepositSuccess,
|
|
10258
10530
|
onDepositError,
|
|
10259
10531
|
amountQuickSelect = "percentage",
|
|
10260
|
-
onWalletDisconnect
|
|
10532
|
+
onWalletDisconnect,
|
|
10533
|
+
prefillAmountUsd,
|
|
10534
|
+
checkoutAmountUsd,
|
|
10535
|
+
checkoutReceivedUsd,
|
|
10536
|
+
onNewDeposit,
|
|
10537
|
+
onDone,
|
|
10538
|
+
paymentIntentStatus
|
|
10261
10539
|
}) {
|
|
10262
10540
|
const { colors: colors2, fonts, components } = useTheme();
|
|
10263
10541
|
const [step, setStep] = React26.useState("select-token");
|
|
@@ -10275,6 +10553,7 @@ function BrowserWalletModal({
|
|
|
10275
10553
|
const [tokenChainDetails, setTokenChainDetails] = React26.useState(null);
|
|
10276
10554
|
const [loadingTokenDetails, setLoadingTokenDetails] = React26.useState(false);
|
|
10277
10555
|
const [showTransactionDetails, setShowTransactionDetails] = React26.useState(false);
|
|
10556
|
+
const [receivedUsdAtSubmission, setReceivedUsdAtSubmission] = React26.useState(null);
|
|
10278
10557
|
const themeClass = theme === "dark" ? "uf-dark" : "";
|
|
10279
10558
|
const chainType = depositWallet.chain_type;
|
|
10280
10559
|
const recipientAddress = depositWallet.address;
|
|
@@ -10282,15 +10561,19 @@ function BrowserWalletModal({
|
|
|
10282
10561
|
const { executions: depositExecutions, isPolling } = useDepositPolling({
|
|
10283
10562
|
userId,
|
|
10284
10563
|
publishableKey,
|
|
10564
|
+
clientSecret,
|
|
10285
10565
|
enabled: open && hasSignedTransaction,
|
|
10286
10566
|
onDepositSuccess,
|
|
10287
10567
|
onDepositError
|
|
10288
10568
|
});
|
|
10569
|
+
const prevOpenRef = React26.useRef(false);
|
|
10289
10570
|
React26.useEffect(() => {
|
|
10290
|
-
|
|
10571
|
+
const wasOpen = prevOpenRef.current;
|
|
10572
|
+
prevOpenRef.current = open;
|
|
10573
|
+
if (open && !wasOpen) {
|
|
10291
10574
|
setStep("select-token");
|
|
10292
10575
|
setSelectedBalance(null);
|
|
10293
|
-
setAmountUsd("");
|
|
10576
|
+
setAmountUsd(prefillAmountUsd ?? "");
|
|
10294
10577
|
setError(null);
|
|
10295
10578
|
setIsConfirming(false);
|
|
10296
10579
|
setTokenChainDetails(null);
|
|
@@ -10298,7 +10581,15 @@ function BrowserWalletModal({
|
|
|
10298
10581
|
setHasSignedTransaction(false);
|
|
10299
10582
|
setIsDisconnectingWallet(false);
|
|
10300
10583
|
}
|
|
10301
|
-
}, [open]);
|
|
10584
|
+
}, [open, prefillAmountUsd]);
|
|
10585
|
+
React26.useEffect(() => {
|
|
10586
|
+
if (!prefillAmountUsd || !tokenChainDetails || step !== "input-amount") return;
|
|
10587
|
+
const minDeposit = tokenChainDetails.minimum_deposit_amount_usd || 0;
|
|
10588
|
+
const currentAmount = parseFloat(amountUsd) || 0;
|
|
10589
|
+
if (currentAmount > 0 && currentAmount < minDeposit) {
|
|
10590
|
+
setAmountUsd(minDeposit.toFixed(2));
|
|
10591
|
+
}
|
|
10592
|
+
}, [tokenChainDetails, step, prefillAmountUsd]);
|
|
10302
10593
|
React26.useEffect(() => {
|
|
10303
10594
|
if (step === "review") {
|
|
10304
10595
|
setShowTransactionDetails(false);
|
|
@@ -10416,7 +10707,7 @@ function BrowserWalletModal({
|
|
|
10416
10707
|
setError(null);
|
|
10417
10708
|
if (step === "input-amount") {
|
|
10418
10709
|
setStep("select-token");
|
|
10419
|
-
setAmountUsd("");
|
|
10710
|
+
setAmountUsd(prefillAmountUsd ?? "");
|
|
10420
10711
|
setTokenChainDetails(null);
|
|
10421
10712
|
} else if (step === "review") {
|
|
10422
10713
|
setStep("input-amount");
|
|
@@ -10502,7 +10793,6 @@ function BrowserWalletModal({
|
|
|
10502
10793
|
}
|
|
10503
10794
|
}
|
|
10504
10795
|
setIsConfirming(true);
|
|
10505
|
-
setStep("confirming");
|
|
10506
10796
|
setError(null);
|
|
10507
10797
|
try {
|
|
10508
10798
|
let txHash;
|
|
@@ -10520,16 +10810,17 @@ function BrowserWalletModal({
|
|
|
10520
10810
|
} else {
|
|
10521
10811
|
txHash = await sendEthereumTransaction(token, tokenAmount.toString());
|
|
10522
10812
|
}
|
|
10813
|
+
setReceivedUsdAtSubmission(checkoutReceivedUsd ?? "0");
|
|
10523
10814
|
setHasSignedTransaction(true);
|
|
10524
|
-
onSuccess?.(txHash);
|
|
10525
10815
|
setIsConfirming(false);
|
|
10816
|
+
setStep("confirming");
|
|
10817
|
+
onSuccess?.(txHash);
|
|
10526
10818
|
} catch (err) {
|
|
10527
10819
|
console.error("[BrowserWalletModal] Transaction error:", err);
|
|
10528
10820
|
const errorMessage = err instanceof Error ? err.message : "Transaction failed";
|
|
10529
10821
|
setError(errorMessage);
|
|
10530
10822
|
onError?.(err instanceof Error ? err : new Error(errorMessage));
|
|
10531
10823
|
setIsConfirming(false);
|
|
10532
|
-
setStep("review");
|
|
10533
10824
|
}
|
|
10534
10825
|
};
|
|
10535
10826
|
const sendEthereumTransaction = async (token, amountStr) => {
|
|
@@ -10778,7 +11069,9 @@ function BrowserWalletModal({
|
|
|
10778
11069
|
onBack: handleClose,
|
|
10779
11070
|
onClose: handleFullClose,
|
|
10780
11071
|
onDisconnectWallet: onWalletDisconnect ? () => void handleDisconnectFromSelectToken() : void 0,
|
|
10781
|
-
isDisconnectingWallet
|
|
11072
|
+
isDisconnectingWallet,
|
|
11073
|
+
checkoutAmountUsd,
|
|
11074
|
+
checkoutReceivedUsd
|
|
10782
11075
|
}
|
|
10783
11076
|
),
|
|
10784
11077
|
step === "input-amount" && selectedToken && selectedBalance && /* @__PURE__ */ jsx49(
|
|
@@ -10799,7 +11092,9 @@ function BrowserWalletModal({
|
|
|
10799
11092
|
onReview: handleReview,
|
|
10800
11093
|
onBack: handleBack,
|
|
10801
11094
|
onClose: handleFullClose,
|
|
10802
|
-
quickSelectMode: amountQuickSelect
|
|
11095
|
+
quickSelectMode: amountQuickSelect,
|
|
11096
|
+
checkoutAmountUsd,
|
|
11097
|
+
checkoutReceivedUsd
|
|
10803
11098
|
}
|
|
10804
11099
|
),
|
|
10805
11100
|
step === "review" && selectedToken && /* @__PURE__ */ jsx49(
|
|
@@ -10828,7 +11123,12 @@ function BrowserWalletModal({
|
|
|
10828
11123
|
isConfirming,
|
|
10829
11124
|
onClose: handleFullClose,
|
|
10830
11125
|
executions: depositExecutions,
|
|
10831
|
-
isPolling
|
|
11126
|
+
isPolling,
|
|
11127
|
+
onNewDeposit,
|
|
11128
|
+
onDone,
|
|
11129
|
+
paymentIntentStatus,
|
|
11130
|
+
amountReceivedUsd: checkoutReceivedUsd,
|
|
11131
|
+
amountReceivedUsdAtSubmission: receivedUsdAtSubmission
|
|
10832
11132
|
}
|
|
10833
11133
|
)
|
|
10834
11134
|
] })
|
|
@@ -10840,9 +11140,9 @@ function BrowserWalletModal({
|
|
|
10840
11140
|
|
|
10841
11141
|
// src/components/deposits/WalletSelectionModal.tsx
|
|
10842
11142
|
import * as React27 from "react";
|
|
10843
|
-
import { ExternalLink as ExternalLink3, Loader2 as
|
|
11143
|
+
import { ExternalLink as ExternalLink3, Loader2 as Loader25 } from "lucide-react";
|
|
10844
11144
|
import { jsx as jsx50, jsxs as jsxs43 } from "react/jsx-runtime";
|
|
10845
|
-
var
|
|
11145
|
+
var WALLET_ICONS3 = {
|
|
10846
11146
|
metamask: MetamaskIcon,
|
|
10847
11147
|
phantom: PhantomIcon,
|
|
10848
11148
|
coinbase: CoinbaseIcon,
|
|
@@ -11281,10 +11581,10 @@ function WalletSelectionModal({
|
|
|
11281
11581
|
},
|
|
11282
11582
|
children: [
|
|
11283
11583
|
/* @__PURE__ */ jsxs43("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
|
|
11284
|
-
|
|
11584
|
+
WALLET_ICONS3[wallet.id] ? /* @__PURE__ */ jsx50(
|
|
11285
11585
|
WalletIconWithNetwork,
|
|
11286
11586
|
{
|
|
11287
|
-
WalletIcon:
|
|
11587
|
+
WalletIcon: WALLET_ICONS3[wallet.id],
|
|
11288
11588
|
networks: wallet.networks,
|
|
11289
11589
|
size: 40,
|
|
11290
11590
|
className: "uf-rounded-lg"
|
|
@@ -11355,10 +11655,10 @@ function WalletSelectionModal({
|
|
|
11355
11655
|
style: { minHeight: WALLET_STEP_BODY_MIN_HEIGHT },
|
|
11356
11656
|
children: [
|
|
11357
11657
|
/* @__PURE__ */ jsxs43("div", { className: "uf-flex uf-flex-col uf-items-center uf-pb-4 uf-shrink-0", children: [
|
|
11358
|
-
/* @__PURE__ */ jsx50("div", { className: "uf-mb-2", children:
|
|
11658
|
+
/* @__PURE__ */ jsx50("div", { className: "uf-mb-2", children: WALLET_ICONS3[selectedWallet.id] ? /* @__PURE__ */ jsx50(
|
|
11359
11659
|
WalletIconWithNetwork,
|
|
11360
11660
|
{
|
|
11361
|
-
WalletIcon:
|
|
11661
|
+
WalletIcon: WALLET_ICONS3[selectedWallet.id],
|
|
11362
11662
|
networks: selectedWallet.networks,
|
|
11363
11663
|
size: 48,
|
|
11364
11664
|
className: "uf-rounded-lg"
|
|
@@ -11433,7 +11733,7 @@ function WalletSelectionModal({
|
|
|
11433
11733
|
] })
|
|
11434
11734
|
] }),
|
|
11435
11735
|
connectingNetwork === network && /* @__PURE__ */ jsx50(
|
|
11436
|
-
|
|
11736
|
+
Loader25,
|
|
11437
11737
|
{
|
|
11438
11738
|
className: "uf-w-4 uf-h-4 uf-animate-spin",
|
|
11439
11739
|
style: { color: colors2.primary }
|
|
@@ -11456,7 +11756,7 @@ function WalletSelectionModal({
|
|
|
11456
11756
|
),
|
|
11457
11757
|
step === "connecting" && /* @__PURE__ */ jsx50("div", { className: "uf-flex uf-min-h-0 uf-flex-1 uf-flex-col", children: /* @__PURE__ */ jsxs43("div", { className: "uf-flex uf-flex-1 uf-flex-col uf-items-center uf-justify-center uf-py-8", children: [
|
|
11458
11758
|
/* @__PURE__ */ jsx50(
|
|
11459
|
-
|
|
11759
|
+
Loader25,
|
|
11460
11760
|
{
|
|
11461
11761
|
className: "uf-w-12 uf-h-12 uf-animate-spin uf-mb-4",
|
|
11462
11762
|
style: { color: colors2.primary }
|
|
@@ -11578,7 +11878,7 @@ function DepositModal({
|
|
|
11578
11878
|
const [view, setView] = useState27(
|
|
11579
11879
|
effectiveInitialScreen
|
|
11580
11880
|
);
|
|
11581
|
-
const resetViewTimeoutRef =
|
|
11881
|
+
const resetViewTimeoutRef = useRef7(null);
|
|
11582
11882
|
const [cardView, setCardView] = useState27(
|
|
11583
11883
|
"amount"
|
|
11584
11884
|
);
|
|
@@ -11608,7 +11908,7 @@ function DepositModal({
|
|
|
11608
11908
|
const [resolvedTheme, setResolvedTheme] = useState27(
|
|
11609
11909
|
theme === "auto" ? "dark" : theme
|
|
11610
11910
|
);
|
|
11611
|
-
|
|
11911
|
+
useEffect22(() => {
|
|
11612
11912
|
if (theme === "auto") {
|
|
11613
11913
|
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
11614
11914
|
setResolvedTheme(mediaQuery.matches ? "dark" : "light");
|
|
@@ -11637,7 +11937,7 @@ function DepositModal({
|
|
|
11637
11937
|
chainType: destinationChainType,
|
|
11638
11938
|
enabled: open
|
|
11639
11939
|
});
|
|
11640
|
-
|
|
11940
|
+
useEffect22(() => {
|
|
11641
11941
|
if (view !== "tracker" || !userId) return;
|
|
11642
11942
|
const fetchExecutions = async () => {
|
|
11643
11943
|
try {
|
|
@@ -11658,7 +11958,7 @@ function DepositModal({
|
|
|
11658
11958
|
clearInterval(pollInterval);
|
|
11659
11959
|
};
|
|
11660
11960
|
}, [view, userId, publishableKey]);
|
|
11661
|
-
|
|
11961
|
+
useEffect22(() => {
|
|
11662
11962
|
if (view !== "tracker") {
|
|
11663
11963
|
setSelectedExecution(null);
|
|
11664
11964
|
}
|
|
@@ -11768,7 +12068,7 @@ function DepositModal({
|
|
|
11768
12068
|
setBrowserWalletInfo(null);
|
|
11769
12069
|
setSelectedExecution(null);
|
|
11770
12070
|
}, [open, effectiveInitialScreen]);
|
|
11771
|
-
|
|
12071
|
+
useEffect22(
|
|
11772
12072
|
() => () => {
|
|
11773
12073
|
if (resetViewTimeoutRef.current) {
|
|
11774
12074
|
clearTimeout(resetViewTimeoutRef.current);
|
|
@@ -12161,73 +12461,755 @@ function DepositModal({
|
|
|
12161
12461
|
) });
|
|
12162
12462
|
}
|
|
12163
12463
|
|
|
12164
|
-
// src/components/
|
|
12464
|
+
// src/components/checkout/CheckoutModal.tsx
|
|
12165
12465
|
import {
|
|
12166
|
-
useState as
|
|
12167
|
-
useEffect as
|
|
12466
|
+
useState as useState28,
|
|
12467
|
+
useEffect as useEffect23,
|
|
12168
12468
|
useLayoutEffect as useLayoutEffect3,
|
|
12169
|
-
useCallback as
|
|
12170
|
-
useRef as useRef8
|
|
12469
|
+
useCallback as useCallback5,
|
|
12470
|
+
useRef as useRef8,
|
|
12471
|
+
useMemo as useMemo10
|
|
12171
12472
|
} from "react";
|
|
12172
|
-
import { AlertTriangle as
|
|
12473
|
+
import { AlertTriangle as AlertTriangle2, ChevronRight as ChevronRight12 } from "lucide-react";
|
|
12173
12474
|
|
|
12174
|
-
// src/hooks/use-
|
|
12475
|
+
// src/hooks/use-payment-intent.ts
|
|
12175
12476
|
import { useQuery as useQuery9 } from "@tanstack/react-query";
|
|
12176
|
-
import {
|
|
12177
|
-
|
|
12178
|
-
|
|
12179
|
-
|
|
12477
|
+
import { retrievePaymentIntent } from "@unifold/core";
|
|
12478
|
+
function usePaymentIntent(params) {
|
|
12479
|
+
const {
|
|
12480
|
+
clientSecret,
|
|
12481
|
+
publishableKey,
|
|
12482
|
+
enabled = true,
|
|
12483
|
+
pollingInterval = 5e3
|
|
12484
|
+
} = params;
|
|
12180
12485
|
return useQuery9({
|
|
12181
|
-
queryKey: ["unifold", "
|
|
12182
|
-
queryFn: () =>
|
|
12183
|
-
|
|
12184
|
-
|
|
12185
|
-
|
|
12186
|
-
refetchOnWindowFocus:
|
|
12187
|
-
|
|
12486
|
+
queryKey: ["unifold", "paymentIntent", clientSecret, publishableKey],
|
|
12487
|
+
queryFn: () => retrievePaymentIntent(clientSecret, publishableKey),
|
|
12488
|
+
enabled: enabled && !!clientSecret && !!publishableKey,
|
|
12489
|
+
staleTime: 0,
|
|
12490
|
+
refetchInterval: pollingInterval || false,
|
|
12491
|
+
refetchOnWindowFocus: true,
|
|
12492
|
+
retry: 3,
|
|
12493
|
+
retryDelay: (attempt) => Math.min(1e3 * 2 ** attempt, 1e4)
|
|
12188
12494
|
});
|
|
12189
12495
|
}
|
|
12190
12496
|
|
|
12191
|
-
// src/hooks/use-
|
|
12497
|
+
// src/hooks/use-deposit-quote.ts
|
|
12192
12498
|
import { useQuery as useQuery10 } from "@tanstack/react-query";
|
|
12193
|
-
import {
|
|
12194
|
-
|
|
12499
|
+
import {
|
|
12500
|
+
getDepositQuote
|
|
12501
|
+
} from "@unifold/core";
|
|
12502
|
+
function useDepositQuote(params) {
|
|
12195
12503
|
const {
|
|
12504
|
+
publishableKey,
|
|
12196
12505
|
sourceChainType,
|
|
12197
12506
|
sourceChainId,
|
|
12198
12507
|
sourceTokenAddress,
|
|
12199
|
-
|
|
12200
|
-
|
|
12508
|
+
destinationAmount,
|
|
12509
|
+
destinationChainType,
|
|
12510
|
+
destinationChainId,
|
|
12511
|
+
destinationTokenAddress,
|
|
12201
12512
|
enabled = true
|
|
12202
12513
|
} = params;
|
|
12203
|
-
const
|
|
12514
|
+
const request = {
|
|
12515
|
+
source_chain_type: sourceChainType,
|
|
12516
|
+
source_chain_id: sourceChainId,
|
|
12517
|
+
source_token_address: sourceTokenAddress,
|
|
12518
|
+
destination_amount: destinationAmount,
|
|
12519
|
+
destination_chain_type: destinationChainType,
|
|
12520
|
+
destination_chain_id: destinationChainId,
|
|
12521
|
+
destination_token_address: destinationTokenAddress
|
|
12522
|
+
};
|
|
12204
12523
|
return useQuery10({
|
|
12205
12524
|
queryKey: [
|
|
12206
12525
|
"unifold",
|
|
12207
|
-
"
|
|
12208
|
-
sourceChainType
|
|
12209
|
-
sourceChainId
|
|
12210
|
-
sourceTokenAddress
|
|
12526
|
+
"depositQuote",
|
|
12527
|
+
sourceChainType,
|
|
12528
|
+
sourceChainId,
|
|
12529
|
+
sourceTokenAddress,
|
|
12530
|
+
destinationAmount,
|
|
12531
|
+
destinationChainType,
|
|
12532
|
+
destinationChainId,
|
|
12533
|
+
destinationTokenAddress,
|
|
12211
12534
|
publishableKey
|
|
12212
12535
|
],
|
|
12213
|
-
queryFn:
|
|
12214
|
-
|
|
12215
|
-
|
|
12216
|
-
|
|
12217
|
-
|
|
12218
|
-
|
|
12219
|
-
|
|
12220
|
-
|
|
12221
|
-
|
|
12222
|
-
|
|
12223
|
-
|
|
12224
|
-
|
|
12225
|
-
|
|
12226
|
-
|
|
12227
|
-
|
|
12228
|
-
|
|
12229
|
-
|
|
12230
|
-
|
|
12536
|
+
queryFn: () => getDepositQuote(request, publishableKey),
|
|
12537
|
+
enabled: enabled && !!publishableKey && !!sourceChainType && !!sourceChainId && !!sourceTokenAddress && !!destinationAmount && destinationAmount !== "0" && !!destinationChainType && !!destinationChainId && !!destinationTokenAddress,
|
|
12538
|
+
staleTime: 6e4,
|
|
12539
|
+
gcTime: 5 * 6e4,
|
|
12540
|
+
refetchOnWindowFocus: false,
|
|
12541
|
+
retry: 2,
|
|
12542
|
+
retryDelay: (attempt) => Math.min(1e3 * 2 ** attempt, 5e3)
|
|
12543
|
+
});
|
|
12544
|
+
}
|
|
12545
|
+
|
|
12546
|
+
// src/components/checkout/CheckoutModal.tsx
|
|
12547
|
+
import { Fragment as Fragment10, jsx as jsx52, jsxs as jsxs45 } from "react/jsx-runtime";
|
|
12548
|
+
function mapDepositAddressesToWallets(depositAddresses, pi) {
|
|
12549
|
+
return depositAddresses.map((da, idx) => ({
|
|
12550
|
+
id: da.id,
|
|
12551
|
+
chain_type: da.chain_type,
|
|
12552
|
+
address_type: da.address_type,
|
|
12553
|
+
address: da.address,
|
|
12554
|
+
destination_chain_type: pi.destination_chain_type,
|
|
12555
|
+
destination_chain_id: pi.destination_chain_id,
|
|
12556
|
+
destination_token_address: pi.destination_token_address,
|
|
12557
|
+
recipient_address: pi.recipient_address,
|
|
12558
|
+
is_primary: idx === 0
|
|
12559
|
+
}));
|
|
12560
|
+
}
|
|
12561
|
+
function SkeletonButton2() {
|
|
12562
|
+
return /* @__PURE__ */ jsxs45("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: [
|
|
12563
|
+
/* @__PURE__ */ jsxs45("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
|
|
12564
|
+
/* @__PURE__ */ jsx52("div", { className: "uf-bg-muted uf-rounded-lg uf-w-9 uf-h-9" }),
|
|
12565
|
+
/* @__PURE__ */ jsxs45("div", { className: "uf-space-y-1.5", children: [
|
|
12566
|
+
/* @__PURE__ */ jsx52("div", { className: "uf-h-3.5 uf-w-24 uf-bg-muted uf-rounded" }),
|
|
12567
|
+
/* @__PURE__ */ jsx52("div", { className: "uf-h-3 uf-w-32 uf-bg-muted uf-rounded" })
|
|
12568
|
+
] })
|
|
12569
|
+
] }),
|
|
12570
|
+
/* @__PURE__ */ jsx52("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ jsx52(ChevronRight12, { className: "uf-w-4 uf-h-4 uf-text-muted" }) })
|
|
12571
|
+
] });
|
|
12572
|
+
}
|
|
12573
|
+
function CheckoutModal({
|
|
12574
|
+
open,
|
|
12575
|
+
onOpenChange,
|
|
12576
|
+
clientSecret,
|
|
12577
|
+
publishableKey,
|
|
12578
|
+
modalTitle,
|
|
12579
|
+
enableConnectWallet = false,
|
|
12580
|
+
theme = "dark",
|
|
12581
|
+
onCheckoutSuccess,
|
|
12582
|
+
onCheckoutError
|
|
12583
|
+
}) {
|
|
12584
|
+
const { colors: colors2, fonts, components } = useTheme();
|
|
12585
|
+
const [view, setView] = useState28("main");
|
|
12586
|
+
const resetViewTimeoutRef = useRef8(
|
|
12587
|
+
null
|
|
12588
|
+
);
|
|
12589
|
+
const [browserWalletModalOpen, setBrowserWalletModalOpen] = useState28(false);
|
|
12590
|
+
const [browserWalletInfo, setBrowserWalletInfo] = useState28(null);
|
|
12591
|
+
const [walletSelectionModalOpen, setWalletSelectionModalOpen] = useState28(false);
|
|
12592
|
+
const [browserWalletChainType, setBrowserWalletChainType] = useState28(() => getStoredWalletChainType());
|
|
12593
|
+
const isMobileView = useIsMobileViewport();
|
|
12594
|
+
const [resolvedTheme, setResolvedTheme] = useState28(
|
|
12595
|
+
theme === "auto" ? "dark" : theme
|
|
12596
|
+
);
|
|
12597
|
+
useEffect23(() => {
|
|
12598
|
+
if (theme === "auto") {
|
|
12599
|
+
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
12600
|
+
setResolvedTheme(mediaQuery.matches ? "dark" : "light");
|
|
12601
|
+
const handler = (e) => {
|
|
12602
|
+
setResolvedTheme(e.matches ? "dark" : "light");
|
|
12603
|
+
};
|
|
12604
|
+
mediaQuery.addEventListener("change", handler);
|
|
12605
|
+
return () => mediaQuery.removeEventListener("change", handler);
|
|
12606
|
+
} else {
|
|
12607
|
+
setResolvedTheme(theme);
|
|
12608
|
+
}
|
|
12609
|
+
}, [theme]);
|
|
12610
|
+
const themeClass = resolvedTheme === "dark" ? "uf-dark" : "";
|
|
12611
|
+
const {
|
|
12612
|
+
data: paymentIntent,
|
|
12613
|
+
isLoading: piLoading,
|
|
12614
|
+
error: piError
|
|
12615
|
+
} = usePaymentIntent({
|
|
12616
|
+
clientSecret,
|
|
12617
|
+
publishableKey,
|
|
12618
|
+
enabled: open && !!clientSecret,
|
|
12619
|
+
pollingInterval: 5e3
|
|
12620
|
+
});
|
|
12621
|
+
const { projectConfig } = useProjectConfig({
|
|
12622
|
+
publishableKey,
|
|
12623
|
+
enabled: open
|
|
12624
|
+
});
|
|
12625
|
+
const prevStatusRef = useRef8(null);
|
|
12626
|
+
useEffect23(() => {
|
|
12627
|
+
if (!paymentIntent) return;
|
|
12628
|
+
const prev = prevStatusRef.current;
|
|
12629
|
+
prevStatusRef.current = paymentIntent.status;
|
|
12630
|
+
if (prev && prev !== paymentIntent.status && paymentIntent.status === "succeeded") {
|
|
12631
|
+
if (!browserWalletModalOpen) {
|
|
12632
|
+
setView("main");
|
|
12633
|
+
}
|
|
12634
|
+
onCheckoutSuccess?.({
|
|
12635
|
+
paymentIntentId: paymentIntent.id,
|
|
12636
|
+
status: paymentIntent.status
|
|
12637
|
+
});
|
|
12638
|
+
}
|
|
12639
|
+
}, [paymentIntent, onCheckoutSuccess, browserWalletModalOpen]);
|
|
12640
|
+
const wallets = useMemo10(() => {
|
|
12641
|
+
if (!paymentIntent) return [];
|
|
12642
|
+
return mapDepositAddressesToWallets(
|
|
12643
|
+
paymentIntent.deposit_addresses,
|
|
12644
|
+
paymentIntent
|
|
12645
|
+
);
|
|
12646
|
+
}, [paymentIntent]);
|
|
12647
|
+
const formatCryptoAmount = useMemo10(() => {
|
|
12648
|
+
if (!paymentIntent) return (_) => "";
|
|
12649
|
+
const decimals = paymentIntent.destination_token_decimals ?? 6;
|
|
12650
|
+
const symbol = paymentIntent.currency.toUpperCase();
|
|
12651
|
+
return (baseUnits) => {
|
|
12652
|
+
const num = Number(baseUnits) / 10 ** decimals;
|
|
12653
|
+
const formatted = num % 1 === 0 ? num.toFixed(0) : num.toFixed(2);
|
|
12654
|
+
return `${formatted} ${symbol}`;
|
|
12655
|
+
};
|
|
12656
|
+
}, [paymentIntent]);
|
|
12657
|
+
const remainingAmountUsd = useMemo10(() => {
|
|
12658
|
+
if (!paymentIntent) return void 0;
|
|
12659
|
+
const total = parseFloat(paymentIntent.amount_usd);
|
|
12660
|
+
const received = parseFloat(paymentIntent.amount_received_usd);
|
|
12661
|
+
if (isNaN(total) || isNaN(received)) return paymentIntent.amount_usd;
|
|
12662
|
+
const remaining = total - received;
|
|
12663
|
+
return remaining > 0 ? remaining.toFixed(2) : "0.00";
|
|
12664
|
+
}, [paymentIntent]);
|
|
12665
|
+
const remainingCrypto = useMemo10(() => {
|
|
12666
|
+
if (!paymentIntent) return void 0;
|
|
12667
|
+
const total = BigInt(paymentIntent.amount);
|
|
12668
|
+
const received = BigInt(paymentIntent.amount_received);
|
|
12669
|
+
const remaining = total - received;
|
|
12670
|
+
return remaining > 0n ? remaining.toString() : "0";
|
|
12671
|
+
}, [paymentIntent]);
|
|
12672
|
+
const [selectedSource, setSelectedSource] = useState28(null);
|
|
12673
|
+
const quoteDestinationAmount = useMemo10(() => {
|
|
12674
|
+
if (!paymentIntent || !selectedSource) return "0";
|
|
12675
|
+
const remaining = BigInt(paymentIntent.amount) - BigInt(paymentIntent.amount_received);
|
|
12676
|
+
const totalBaseUnits = Number(paymentIntent.amount);
|
|
12677
|
+
const totalUsd = parseFloat(paymentIntent.amount_usd);
|
|
12678
|
+
const baseUnitsPerUsd = totalUsd > 0 ? totalBaseUnits / totalUsd : 0;
|
|
12679
|
+
const minUsd = Math.max(selectedSource.minimumDepositAmountUsd, 3);
|
|
12680
|
+
const minDepositBaseUnits = BigInt(Math.ceil(minUsd * baseUnitsPerUsd));
|
|
12681
|
+
const effective = remaining > minDepositBaseUnits ? remaining : minDepositBaseUnits;
|
|
12682
|
+
return effective > 0n ? effective.toString() : "0";
|
|
12683
|
+
}, [paymentIntent, selectedSource]);
|
|
12684
|
+
const { data: sourceQuote } = useDepositQuote({
|
|
12685
|
+
publishableKey,
|
|
12686
|
+
sourceChainType: selectedSource?.chainType ?? "",
|
|
12687
|
+
sourceChainId: selectedSource?.chainId ?? "",
|
|
12688
|
+
sourceTokenAddress: selectedSource?.tokenAddress ?? "",
|
|
12689
|
+
destinationAmount: quoteDestinationAmount,
|
|
12690
|
+
destinationChainType: paymentIntent?.destination_chain_type ?? "",
|
|
12691
|
+
destinationChainId: paymentIntent?.destination_chain_id ?? "",
|
|
12692
|
+
destinationTokenAddress: paymentIntent?.destination_token_address ?? "",
|
|
12693
|
+
enabled: open && view === "transfer" && !!paymentIntent && !!selectedSource && quoteDestinationAmount !== "0"
|
|
12694
|
+
});
|
|
12695
|
+
const handleBrowserWalletClick = useCallback5(
|
|
12696
|
+
(walletInfo) => {
|
|
12697
|
+
const walletChainType = walletInfo.type === "phantom-solana" || walletInfo.type === "solflare" || walletInfo.type === "backpack" || walletInfo.type === "glow" ? "solana" : "ethereum";
|
|
12698
|
+
setStoredWalletChainType(walletChainType);
|
|
12699
|
+
setBrowserWalletChainType(walletChainType);
|
|
12700
|
+
const matchingDepositWallet = wallets.find(
|
|
12701
|
+
(w) => w.chain_type === walletChainType
|
|
12702
|
+
);
|
|
12703
|
+
if (!matchingDepositWallet) {
|
|
12704
|
+
onCheckoutError?.({
|
|
12705
|
+
message: `Unable to pay from ${walletChainType}. Please try a different wallet.`,
|
|
12706
|
+
code: "NO_DEPOSIT_ADDRESS"
|
|
12707
|
+
});
|
|
12708
|
+
return;
|
|
12709
|
+
}
|
|
12710
|
+
setBrowserWalletInfo({
|
|
12711
|
+
...walletInfo,
|
|
12712
|
+
depositWallet: matchingDepositWallet
|
|
12713
|
+
});
|
|
12714
|
+
setBrowserWalletModalOpen(true);
|
|
12715
|
+
},
|
|
12716
|
+
[wallets, onCheckoutError]
|
|
12717
|
+
);
|
|
12718
|
+
const handleWalletConnectClick = useCallback5(() => {
|
|
12719
|
+
setWalletSelectionModalOpen(true);
|
|
12720
|
+
}, []);
|
|
12721
|
+
const handleWalletConnected = useCallback5(
|
|
12722
|
+
(walletInfo) => {
|
|
12723
|
+
const walletChainType = walletInfo.type === "phantom-solana" || walletInfo.type === "solflare" || walletInfo.type === "backpack" || walletInfo.type === "glow" ? "solana" : "ethereum";
|
|
12724
|
+
setStoredWalletChainType(walletChainType);
|
|
12725
|
+
setBrowserWalletChainType(walletChainType);
|
|
12726
|
+
const matchingDepositWallet = wallets.find(
|
|
12727
|
+
(w) => w.chain_type === walletChainType
|
|
12728
|
+
);
|
|
12729
|
+
if (!matchingDepositWallet) {
|
|
12730
|
+
onCheckoutError?.({
|
|
12731
|
+
message: `Unable to pay from ${walletChainType}. Please try a different wallet.`,
|
|
12732
|
+
code: "NO_DEPOSIT_ADDRESS"
|
|
12733
|
+
});
|
|
12734
|
+
setWalletSelectionModalOpen(false);
|
|
12735
|
+
return;
|
|
12736
|
+
}
|
|
12737
|
+
setBrowserWalletInfo({
|
|
12738
|
+
...walletInfo,
|
|
12739
|
+
depositWallet: matchingDepositWallet
|
|
12740
|
+
});
|
|
12741
|
+
setWalletSelectionModalOpen(false);
|
|
12742
|
+
setBrowserWalletModalOpen(true);
|
|
12743
|
+
},
|
|
12744
|
+
[wallets, onCheckoutError]
|
|
12745
|
+
);
|
|
12746
|
+
const handleWalletDisconnect = useCallback5(() => {
|
|
12747
|
+
setUserDisconnectedWallet(true);
|
|
12748
|
+
clearStoredWalletChainType();
|
|
12749
|
+
setBrowserWalletChainType(void 0);
|
|
12750
|
+
setBrowserWalletInfo(null);
|
|
12751
|
+
setBrowserWalletModalOpen(false);
|
|
12752
|
+
}, []);
|
|
12753
|
+
const handleClose = useCallback5(() => {
|
|
12754
|
+
onOpenChange(false);
|
|
12755
|
+
if (resetViewTimeoutRef.current) {
|
|
12756
|
+
clearTimeout(resetViewTimeoutRef.current);
|
|
12757
|
+
}
|
|
12758
|
+
resetViewTimeoutRef.current = setTimeout(() => {
|
|
12759
|
+
setView("main");
|
|
12760
|
+
setBrowserWalletInfo(null);
|
|
12761
|
+
resetViewTimeoutRef.current = null;
|
|
12762
|
+
}, 200);
|
|
12763
|
+
}, [onOpenChange]);
|
|
12764
|
+
useLayoutEffect3(() => {
|
|
12765
|
+
if (!open) return;
|
|
12766
|
+
if (resetViewTimeoutRef.current) {
|
|
12767
|
+
clearTimeout(resetViewTimeoutRef.current);
|
|
12768
|
+
resetViewTimeoutRef.current = null;
|
|
12769
|
+
}
|
|
12770
|
+
setView("main");
|
|
12771
|
+
setBrowserWalletInfo(null);
|
|
12772
|
+
}, [open]);
|
|
12773
|
+
useEffect23(
|
|
12774
|
+
() => () => {
|
|
12775
|
+
if (resetViewTimeoutRef.current) {
|
|
12776
|
+
clearTimeout(resetViewTimeoutRef.current);
|
|
12777
|
+
}
|
|
12778
|
+
},
|
|
12779
|
+
[]
|
|
12780
|
+
);
|
|
12781
|
+
const handleBack = useCallback5(() => {
|
|
12782
|
+
setView("main");
|
|
12783
|
+
}, []);
|
|
12784
|
+
const poweredByFooter = /* @__PURE__ */ jsx52("div", { className: "uf-pt-3", children: /* @__PURE__ */ jsx52(
|
|
12785
|
+
PoweredByUnifold,
|
|
12786
|
+
{
|
|
12787
|
+
color: colors2.foregroundMuted,
|
|
12788
|
+
className: "uf-flex uf-justify-center uf-shrink-0"
|
|
12789
|
+
}
|
|
12790
|
+
) });
|
|
12791
|
+
const progressSection = paymentIntent ? (() => {
|
|
12792
|
+
const received = parseFloat(paymentIntent.amount_received_usd);
|
|
12793
|
+
const total = parseFloat(paymentIntent.amount_usd);
|
|
12794
|
+
const remaining = Math.max(total - received, 0);
|
|
12795
|
+
const pct = total > 0 ? Math.min(received / total * 100, 100) : 0;
|
|
12796
|
+
const hasPartial = received > 0;
|
|
12797
|
+
const amountStr = paymentIntent.amount_usd;
|
|
12798
|
+
const dynamicFontSize = `${Math.max(3.75 - amountStr.length * 0.15, 2)}rem`;
|
|
12799
|
+
return /* @__PURE__ */ jsxs45("div", { className: "uf-text-center uf-py-2 uf-space-y-1", children: [
|
|
12800
|
+
paymentIntent.description && /* @__PURE__ */ jsx52(
|
|
12801
|
+
"div",
|
|
12802
|
+
{
|
|
12803
|
+
className: "uf-text-xs",
|
|
12804
|
+
style: {
|
|
12805
|
+
color: colors2.foregroundMuted,
|
|
12806
|
+
fontFamily: fonts.regular
|
|
12807
|
+
},
|
|
12808
|
+
children: paymentIntent.description
|
|
12809
|
+
}
|
|
12810
|
+
),
|
|
12811
|
+
/* @__PURE__ */ jsxs45("div", { className: "uf-flex uf-items-center uf-justify-center", children: [
|
|
12812
|
+
/* @__PURE__ */ jsx52(
|
|
12813
|
+
"span",
|
|
12814
|
+
{
|
|
12815
|
+
className: "uf-mr-1",
|
|
12816
|
+
style: {
|
|
12817
|
+
fontSize: `calc(${dynamicFontSize} * 0.6)`,
|
|
12818
|
+
color: colors2.foregroundMuted,
|
|
12819
|
+
fontFamily: fonts.regular
|
|
12820
|
+
},
|
|
12821
|
+
children: "$"
|
|
12822
|
+
}
|
|
12823
|
+
),
|
|
12824
|
+
/* @__PURE__ */ jsx52(
|
|
12825
|
+
"span",
|
|
12826
|
+
{
|
|
12827
|
+
style: {
|
|
12828
|
+
fontSize: dynamicFontSize,
|
|
12829
|
+
color: colors2.foreground,
|
|
12830
|
+
fontFamily: fonts.regular,
|
|
12831
|
+
lineHeight: 1.1
|
|
12832
|
+
},
|
|
12833
|
+
children: amountStr
|
|
12834
|
+
}
|
|
12835
|
+
)
|
|
12836
|
+
] }),
|
|
12837
|
+
/* @__PURE__ */ jsx52(
|
|
12838
|
+
"div",
|
|
12839
|
+
{
|
|
12840
|
+
className: "uf-text-xs",
|
|
12841
|
+
style: {
|
|
12842
|
+
color: colors2.foregroundMuted,
|
|
12843
|
+
fontFamily: fonts.regular
|
|
12844
|
+
},
|
|
12845
|
+
children: paymentIntent.currency.toUpperCase()
|
|
12846
|
+
}
|
|
12847
|
+
),
|
|
12848
|
+
hasPartial && /* @__PURE__ */ jsxs45("div", { className: "uf-pt-2 uf-space-y-1.5", children: [
|
|
12849
|
+
/* @__PURE__ */ jsx52(
|
|
12850
|
+
"div",
|
|
12851
|
+
{
|
|
12852
|
+
className: "uf-w-full uf-h-1.5 uf-rounded-full uf-overflow-hidden",
|
|
12853
|
+
style: { backgroundColor: colors2.border },
|
|
12854
|
+
children: /* @__PURE__ */ jsx52(
|
|
12855
|
+
"div",
|
|
12856
|
+
{
|
|
12857
|
+
className: "uf-h-full uf-rounded-full uf-transition-all uf-duration-500",
|
|
12858
|
+
style: {
|
|
12859
|
+
width: `${pct}%`,
|
|
12860
|
+
backgroundColor: paymentIntent.status === "succeeded" ? "rgb(34, 197, 94)" : colors2.primary
|
|
12861
|
+
}
|
|
12862
|
+
}
|
|
12863
|
+
)
|
|
12864
|
+
}
|
|
12865
|
+
),
|
|
12866
|
+
/* @__PURE__ */ jsxs45(
|
|
12867
|
+
"div",
|
|
12868
|
+
{
|
|
12869
|
+
className: "uf-text-xs",
|
|
12870
|
+
style: {
|
|
12871
|
+
color: colors2.foregroundMuted,
|
|
12872
|
+
fontFamily: fonts.regular
|
|
12873
|
+
},
|
|
12874
|
+
children: [
|
|
12875
|
+
"$",
|
|
12876
|
+
paymentIntent.amount_received_usd,
|
|
12877
|
+
" / $",
|
|
12878
|
+
amountStr,
|
|
12879
|
+
" received",
|
|
12880
|
+
remaining > 0 && paymentIntent.status !== "succeeded" && /* @__PURE__ */ jsxs45("span", { style: { color: colors2.foreground, fontFamily: fonts.medium }, children: [
|
|
12881
|
+
" ",
|
|
12882
|
+
"\xB7 $",
|
|
12883
|
+
remaining.toFixed(2),
|
|
12884
|
+
" remaining"
|
|
12885
|
+
] })
|
|
12886
|
+
]
|
|
12887
|
+
}
|
|
12888
|
+
)
|
|
12889
|
+
] }),
|
|
12890
|
+
paymentIntent.status !== "requires_payment" && /* @__PURE__ */ jsx52("div", { className: "uf-pt-1", children: /* @__PURE__ */ jsx52(
|
|
12891
|
+
"span",
|
|
12892
|
+
{
|
|
12893
|
+
className: "uf-text-xs uf-font-medium uf-px-2.5 uf-py-1 uf-rounded-full uf-inline-block",
|
|
12894
|
+
style: {
|
|
12895
|
+
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)",
|
|
12896
|
+
color: paymentIntent.status === "succeeded" ? "rgb(34, 197, 94)" : paymentIntent.status === "processing" ? "rgb(59, 130, 246)" : "rgb(239, 68, 68)",
|
|
12897
|
+
fontFamily: fonts.medium
|
|
12898
|
+
},
|
|
12899
|
+
children: paymentIntent.status === "succeeded" ? "Payment Complete" : paymentIntent.status === "processing" ? "Partial Payment Received" : paymentIntent.status === "canceled" ? "Canceled" : paymentIntent.status === "expired" ? "Expired" : paymentIntent.status
|
|
12900
|
+
}
|
|
12901
|
+
) })
|
|
12902
|
+
] });
|
|
12903
|
+
})() : null;
|
|
12904
|
+
return /* @__PURE__ */ jsx52(PortalContainerProvider, { value: null, children: /* @__PURE__ */ jsxs45(Dialog, { open, onOpenChange: handleClose, modal: true, children: [
|
|
12905
|
+
/* @__PURE__ */ jsx52(
|
|
12906
|
+
DialogContent,
|
|
12907
|
+
{
|
|
12908
|
+
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}`,
|
|
12909
|
+
style: { backgroundColor: colors2.background },
|
|
12910
|
+
onPointerDownOutside: (e) => e.preventDefault(),
|
|
12911
|
+
onInteractOutside: (e) => e.preventDefault(),
|
|
12912
|
+
children: /* @__PURE__ */ jsx52(ThemeStyleInjector, { children: view === "main" ? /* @__PURE__ */ jsxs45(Fragment10, { children: [
|
|
12913
|
+
/* @__PURE__ */ jsx52(
|
|
12914
|
+
DepositHeader,
|
|
12915
|
+
{
|
|
12916
|
+
title: modalTitle || "Checkout",
|
|
12917
|
+
showClose: true,
|
|
12918
|
+
onClose: handleClose
|
|
12919
|
+
}
|
|
12920
|
+
),
|
|
12921
|
+
/* @__PURE__ */ jsxs45("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
|
|
12922
|
+
piLoading ? /* @__PURE__ */ jsxs45("div", { className: "uf-space-y-3", children: [
|
|
12923
|
+
/* @__PURE__ */ jsx52(
|
|
12924
|
+
"div",
|
|
12925
|
+
{
|
|
12926
|
+
className: "uf-rounded-xl uf-p-4 uf-animate-pulse",
|
|
12927
|
+
style: {
|
|
12928
|
+
backgroundColor: components.card.backgroundColor,
|
|
12929
|
+
borderRadius: components.card.borderRadius,
|
|
12930
|
+
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
12931
|
+
},
|
|
12932
|
+
children: /* @__PURE__ */ jsxs45("div", { className: "uf-flex uf-flex-col uf-items-center uf-gap-2", children: [
|
|
12933
|
+
/* @__PURE__ */ jsx52(
|
|
12934
|
+
"div",
|
|
12935
|
+
{
|
|
12936
|
+
className: "uf-h-8 uf-w-24 uf-rounded",
|
|
12937
|
+
style: {
|
|
12938
|
+
backgroundColor: components.card.borderColor
|
|
12939
|
+
}
|
|
12940
|
+
}
|
|
12941
|
+
),
|
|
12942
|
+
/* @__PURE__ */ jsx52(
|
|
12943
|
+
"div",
|
|
12944
|
+
{
|
|
12945
|
+
className: "uf-h-4 uf-w-16 uf-rounded",
|
|
12946
|
+
style: {
|
|
12947
|
+
backgroundColor: components.card.borderColor
|
|
12948
|
+
}
|
|
12949
|
+
}
|
|
12950
|
+
)
|
|
12951
|
+
] })
|
|
12952
|
+
}
|
|
12953
|
+
),
|
|
12954
|
+
/* @__PURE__ */ jsx52(SkeletonButton2, {}),
|
|
12955
|
+
/* @__PURE__ */ jsx52(SkeletonButton2, {})
|
|
12956
|
+
] }) : piError ? /* @__PURE__ */ jsxs45("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
|
|
12957
|
+
/* @__PURE__ */ jsx52("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__ */ jsx52(AlertTriangle2, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
|
|
12958
|
+
/* @__PURE__ */ jsx52(
|
|
12959
|
+
"h3",
|
|
12960
|
+
{
|
|
12961
|
+
className: "uf-text-lg uf-font-semibold uf-mb-2",
|
|
12962
|
+
style: {
|
|
12963
|
+
color: colors2.foreground,
|
|
12964
|
+
fontFamily: fonts.semibold
|
|
12965
|
+
},
|
|
12966
|
+
children: "Unable to Load Checkout"
|
|
12967
|
+
}
|
|
12968
|
+
),
|
|
12969
|
+
/* @__PURE__ */ jsx52(
|
|
12970
|
+
"p",
|
|
12971
|
+
{
|
|
12972
|
+
className: "uf-text-sm uf-max-w-[280px]",
|
|
12973
|
+
style: {
|
|
12974
|
+
color: colors2.foregroundMuted,
|
|
12975
|
+
fontFamily: fonts.regular
|
|
12976
|
+
},
|
|
12977
|
+
children: piError instanceof Error ? piError.message : "Something went wrong. Please try again."
|
|
12978
|
+
}
|
|
12979
|
+
)
|
|
12980
|
+
] }) : paymentIntent ? /* @__PURE__ */ jsxs45("div", { className: "uf-space-y-3", children: [
|
|
12981
|
+
progressSection,
|
|
12982
|
+
(paymentIntent.status === "requires_payment" || paymentIntent.status === "processing") && /* @__PURE__ */ jsxs45(Fragment10, { children: [
|
|
12983
|
+
/* @__PURE__ */ jsx52(
|
|
12984
|
+
TransferCryptoButton,
|
|
12985
|
+
{
|
|
12986
|
+
onClick: () => setView("transfer"),
|
|
12987
|
+
title: "Transfer Crypto",
|
|
12988
|
+
subtitle: "Send from any wallet or exchange",
|
|
12989
|
+
featuredTokens: projectConfig?.transfer_crypto.networks
|
|
12990
|
+
}
|
|
12991
|
+
),
|
|
12992
|
+
enableConnectWallet && !isMobileView && /* @__PURE__ */ jsx52(
|
|
12993
|
+
BrowserWalletButton,
|
|
12994
|
+
{
|
|
12995
|
+
onClick: handleBrowserWalletClick,
|
|
12996
|
+
onConnectClick: handleWalletConnectClick,
|
|
12997
|
+
onDisconnect: handleWalletDisconnect,
|
|
12998
|
+
chainType: browserWalletChainType,
|
|
12999
|
+
publishableKey
|
|
13000
|
+
}
|
|
13001
|
+
)
|
|
13002
|
+
] })
|
|
13003
|
+
] }) : null,
|
|
13004
|
+
poweredByFooter
|
|
13005
|
+
] })
|
|
13006
|
+
] }) : view === "transfer" ? /* @__PURE__ */ jsxs45(Fragment10, { children: [
|
|
13007
|
+
/* @__PURE__ */ jsx52(
|
|
13008
|
+
DepositHeader,
|
|
13009
|
+
{
|
|
13010
|
+
title: `Pay $${remainingAmountUsd ?? paymentIntent?.amount_usd ?? ""}`,
|
|
13011
|
+
showBack: true,
|
|
13012
|
+
onBack: handleBack,
|
|
13013
|
+
onClose: handleClose
|
|
13014
|
+
}
|
|
13015
|
+
),
|
|
13016
|
+
/* @__PURE__ */ jsxs45("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
|
|
13017
|
+
paymentIntent ? /* @__PURE__ */ jsxs45(Fragment10, { children: [
|
|
13018
|
+
/* @__PURE__ */ jsxs45(
|
|
13019
|
+
"div",
|
|
13020
|
+
{
|
|
13021
|
+
className: "uf-rounded-lg uf-px-3 uf-py-2 uf-flex uf-items-center uf-justify-between",
|
|
13022
|
+
style: {
|
|
13023
|
+
backgroundColor: components.card.backgroundColor,
|
|
13024
|
+
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`,
|
|
13025
|
+
borderRadius: components.card.borderRadius
|
|
13026
|
+
},
|
|
13027
|
+
children: [
|
|
13028
|
+
/* @__PURE__ */ jsx52(
|
|
13029
|
+
"span",
|
|
13030
|
+
{
|
|
13031
|
+
className: "uf-text-xs",
|
|
13032
|
+
style: {
|
|
13033
|
+
color: colors2.foregroundMuted,
|
|
13034
|
+
fontFamily: fonts.regular
|
|
13035
|
+
},
|
|
13036
|
+
children: parseFloat(paymentIntent.amount_received_usd) > 0 ? `$${paymentIntent.amount_received_usd} / $${paymentIntent.amount_usd} received` : "Amount due"
|
|
13037
|
+
}
|
|
13038
|
+
),
|
|
13039
|
+
/* @__PURE__ */ jsxs45(
|
|
13040
|
+
"span",
|
|
13041
|
+
{
|
|
13042
|
+
className: "uf-text-sm uf-font-semibold",
|
|
13043
|
+
style: {
|
|
13044
|
+
color: colors2.foreground,
|
|
13045
|
+
fontFamily: fonts.semibold
|
|
13046
|
+
},
|
|
13047
|
+
children: [
|
|
13048
|
+
formatCryptoAmount(remainingCrypto ?? paymentIntent.amount),
|
|
13049
|
+
/* @__PURE__ */ jsxs45(
|
|
13050
|
+
"span",
|
|
13051
|
+
{
|
|
13052
|
+
className: "uf-text-xs uf-font-normal uf-ml-1",
|
|
13053
|
+
style: { color: colors2.foregroundMuted },
|
|
13054
|
+
children: [
|
|
13055
|
+
"($",
|
|
13056
|
+
remainingAmountUsd ?? paymentIntent.amount_usd,
|
|
13057
|
+
")"
|
|
13058
|
+
]
|
|
13059
|
+
}
|
|
13060
|
+
)
|
|
13061
|
+
]
|
|
13062
|
+
}
|
|
13063
|
+
)
|
|
13064
|
+
]
|
|
13065
|
+
}
|
|
13066
|
+
),
|
|
13067
|
+
/* @__PURE__ */ jsx52(
|
|
13068
|
+
TransferCryptoSingleInput,
|
|
13069
|
+
{
|
|
13070
|
+
userId: paymentIntent.user_id || "",
|
|
13071
|
+
publishableKey,
|
|
13072
|
+
clientSecret,
|
|
13073
|
+
recipientAddress: paymentIntent.recipient_address,
|
|
13074
|
+
destinationChainType: paymentIntent.destination_chain_type,
|
|
13075
|
+
destinationChainId: paymentIntent.destination_chain_id,
|
|
13076
|
+
destinationTokenAddress: paymentIntent.destination_token_address,
|
|
13077
|
+
depositConfirmationMode: "auto_ui",
|
|
13078
|
+
wallets,
|
|
13079
|
+
onSourceTokenChange: setSelectedSource,
|
|
13080
|
+
checkoutQuote: sourceQuote ? {
|
|
13081
|
+
sourceAmount: sourceQuote.source_amount,
|
|
13082
|
+
sourceTokenDecimals: sourceQuote.source_token_decimals,
|
|
13083
|
+
sourceTokenSymbol: sourceQuote.source_token_symbol,
|
|
13084
|
+
sourceAmountUsd: sourceQuote.source_amount_usd
|
|
13085
|
+
} : null
|
|
13086
|
+
}
|
|
13087
|
+
)
|
|
13088
|
+
] }) : /* @__PURE__ */ jsx52(SkeletonButton2, {}),
|
|
13089
|
+
poweredByFooter
|
|
13090
|
+
] })
|
|
13091
|
+
] }) : null })
|
|
13092
|
+
}
|
|
13093
|
+
),
|
|
13094
|
+
/* @__PURE__ */ jsx52(
|
|
13095
|
+
WalletSelectionModal,
|
|
13096
|
+
{
|
|
13097
|
+
open: walletSelectionModalOpen,
|
|
13098
|
+
onOpenChange: setWalletSelectionModalOpen,
|
|
13099
|
+
onWalletConnected: handleWalletConnected,
|
|
13100
|
+
onClose: () => setWalletSelectionModalOpen(false),
|
|
13101
|
+
theme: resolvedTheme
|
|
13102
|
+
}
|
|
13103
|
+
),
|
|
13104
|
+
browserWalletInfo && browserWalletInfo.depositWallet && /* @__PURE__ */ jsx52(
|
|
13105
|
+
BrowserWalletModal,
|
|
13106
|
+
{
|
|
13107
|
+
open: browserWalletModalOpen,
|
|
13108
|
+
onOpenChange: setBrowserWalletModalOpen,
|
|
13109
|
+
onFullClose: handleClose,
|
|
13110
|
+
walletInfo: browserWalletInfo,
|
|
13111
|
+
depositWallet: browserWalletInfo.depositWallet,
|
|
13112
|
+
userId: paymentIntent?.user_id || "",
|
|
13113
|
+
publishableKey,
|
|
13114
|
+
clientSecret,
|
|
13115
|
+
theme: resolvedTheme,
|
|
13116
|
+
prefillAmountUsd: remainingAmountUsd,
|
|
13117
|
+
checkoutAmountUsd: paymentIntent?.amount_usd,
|
|
13118
|
+
checkoutReceivedUsd: paymentIntent?.amount_received_usd,
|
|
13119
|
+
onSuccess: (txHash) => {
|
|
13120
|
+
onCheckoutSuccess?.({
|
|
13121
|
+
paymentIntentId: paymentIntent?.id || "",
|
|
13122
|
+
status: "processing"
|
|
13123
|
+
});
|
|
13124
|
+
},
|
|
13125
|
+
onError: (error) => {
|
|
13126
|
+
onCheckoutError?.({
|
|
13127
|
+
message: error.message,
|
|
13128
|
+
error
|
|
13129
|
+
});
|
|
13130
|
+
},
|
|
13131
|
+
onWalletDisconnect: handleWalletDisconnect,
|
|
13132
|
+
onNewDeposit: () => {
|
|
13133
|
+
setBrowserWalletModalOpen(false);
|
|
13134
|
+
setView("main");
|
|
13135
|
+
},
|
|
13136
|
+
onDone: () => {
|
|
13137
|
+
setBrowserWalletModalOpen(false);
|
|
13138
|
+
setView("main");
|
|
13139
|
+
},
|
|
13140
|
+
paymentIntentStatus: paymentIntent?.status
|
|
13141
|
+
}
|
|
13142
|
+
)
|
|
13143
|
+
] }) });
|
|
13144
|
+
}
|
|
13145
|
+
|
|
13146
|
+
// src/components/withdrawals/WithdrawModal.tsx
|
|
13147
|
+
import {
|
|
13148
|
+
useState as useState32,
|
|
13149
|
+
useEffect as useEffect27,
|
|
13150
|
+
useLayoutEffect as useLayoutEffect4,
|
|
13151
|
+
useCallback as useCallback7,
|
|
13152
|
+
useRef as useRef10
|
|
13153
|
+
} from "react";
|
|
13154
|
+
import { AlertTriangle as AlertTriangle4, ChevronRight as ChevronRight14, Clock as Clock5 } from "lucide-react";
|
|
13155
|
+
|
|
13156
|
+
// src/hooks/use-supported-destination-tokens.ts
|
|
13157
|
+
import { useQuery as useQuery11 } from "@tanstack/react-query";
|
|
13158
|
+
import {
|
|
13159
|
+
getSupportedDestinationTokens
|
|
13160
|
+
} from "@unifold/core";
|
|
13161
|
+
function useSupportedDestinationTokens(publishableKey, enabled = true) {
|
|
13162
|
+
return useQuery11({
|
|
13163
|
+
queryKey: ["unifold", "supportedDestinationTokens", publishableKey],
|
|
13164
|
+
queryFn: () => getSupportedDestinationTokens(publishableKey),
|
|
13165
|
+
staleTime: 1e3 * 60 * 5,
|
|
13166
|
+
gcTime: 1e3 * 60 * 30,
|
|
13167
|
+
refetchOnMount: false,
|
|
13168
|
+
refetchOnWindowFocus: false,
|
|
13169
|
+
enabled
|
|
13170
|
+
});
|
|
13171
|
+
}
|
|
13172
|
+
|
|
13173
|
+
// src/hooks/use-source-token-validation.ts
|
|
13174
|
+
import { useQuery as useQuery12 } from "@tanstack/react-query";
|
|
13175
|
+
import { getSupportedDepositTokens as getSupportedDepositTokens3 } from "@unifold/core";
|
|
13176
|
+
function useSourceTokenValidation(params) {
|
|
13177
|
+
const {
|
|
13178
|
+
sourceChainType,
|
|
13179
|
+
sourceChainId,
|
|
13180
|
+
sourceTokenAddress,
|
|
13181
|
+
sourceTokenSymbol,
|
|
13182
|
+
publishableKey,
|
|
13183
|
+
enabled = true
|
|
13184
|
+
} = params;
|
|
13185
|
+
const hasParams = !!sourceChainType && !!sourceChainId && !!sourceTokenAddress;
|
|
13186
|
+
return useQuery12({
|
|
13187
|
+
queryKey: [
|
|
13188
|
+
"unifold",
|
|
13189
|
+
"sourceTokenValidation",
|
|
13190
|
+
sourceChainType ?? null,
|
|
13191
|
+
sourceChainId ?? null,
|
|
13192
|
+
sourceTokenAddress ?? null,
|
|
13193
|
+
publishableKey
|
|
13194
|
+
],
|
|
13195
|
+
queryFn: async () => {
|
|
13196
|
+
const res = await getSupportedDepositTokens3(publishableKey);
|
|
13197
|
+
let matchedMinUsd = null;
|
|
13198
|
+
let matchedProcessingTime = null;
|
|
13199
|
+
let matchedSlippage = null;
|
|
13200
|
+
let matchedPriceImpact = null;
|
|
13201
|
+
const found = res.data.some(
|
|
13202
|
+
(token) => token.chains.some((chain) => {
|
|
13203
|
+
const match = chain.chain_type === sourceChainType && chain.chain_id === sourceChainId && chain.token_address.toLowerCase() === sourceTokenAddress.toLowerCase();
|
|
13204
|
+
if (match) {
|
|
13205
|
+
matchedMinUsd = chain.minimum_deposit_amount_usd;
|
|
13206
|
+
matchedProcessingTime = chain.estimated_processing_time;
|
|
13207
|
+
matchedSlippage = chain.max_slippage_percent;
|
|
13208
|
+
matchedPriceImpact = chain.estimated_price_impact_percent;
|
|
13209
|
+
}
|
|
13210
|
+
return match;
|
|
13211
|
+
})
|
|
13212
|
+
);
|
|
12231
13213
|
return {
|
|
12232
13214
|
isSupported: found,
|
|
12233
13215
|
minimumAmountUsd: matchedMinUsd,
|
|
@@ -12246,7 +13228,7 @@ function useSourceTokenValidation(params) {
|
|
|
12246
13228
|
}
|
|
12247
13229
|
|
|
12248
13230
|
// src/hooks/use-address-balance.ts
|
|
12249
|
-
import { useQuery as
|
|
13231
|
+
import { useQuery as useQuery13 } from "@tanstack/react-query";
|
|
12250
13232
|
import { getAddressBalance as getAddressBalance2 } from "@unifold/core";
|
|
12251
13233
|
function useAddressBalance(params) {
|
|
12252
13234
|
const {
|
|
@@ -12258,7 +13240,7 @@ function useAddressBalance(params) {
|
|
|
12258
13240
|
enabled = true
|
|
12259
13241
|
} = params;
|
|
12260
13242
|
const hasParams = !!address && !!chainType && !!chainId && !!tokenAddress;
|
|
12261
|
-
return
|
|
13243
|
+
return useQuery13({
|
|
12262
13244
|
queryKey: [
|
|
12263
13245
|
"unifold",
|
|
12264
13246
|
"addressBalance",
|
|
@@ -12307,11 +13289,11 @@ function useAddressBalance(params) {
|
|
|
12307
13289
|
}
|
|
12308
13290
|
|
|
12309
13291
|
// src/hooks/use-executions.ts
|
|
12310
|
-
import { useQuery as
|
|
13292
|
+
import { useQuery as useQuery14 } from "@tanstack/react-query";
|
|
12311
13293
|
import { queryExecutions as queryExecutions4, ActionType as ActionType4 } from "@unifold/core";
|
|
12312
13294
|
function useExecutions(userId, publishableKey, options) {
|
|
12313
13295
|
const actionType = options?.actionType ?? ActionType4.Deposit;
|
|
12314
|
-
return
|
|
13296
|
+
return useQuery14({
|
|
12315
13297
|
queryKey: ["unifold", "executions", actionType, userId, publishableKey],
|
|
12316
13298
|
queryFn: () => queryExecutions4(userId, publishableKey, actionType),
|
|
12317
13299
|
enabled: (options?.enabled ?? true) && !!userId,
|
|
@@ -12323,7 +13305,7 @@ function useExecutions(userId, publishableKey, options) {
|
|
|
12323
13305
|
}
|
|
12324
13306
|
|
|
12325
13307
|
// src/hooks/use-withdraw-polling.ts
|
|
12326
|
-
import { useState as
|
|
13308
|
+
import { useState as useState29, useEffect as useEffect24, useRef as useRef9 } from "react";
|
|
12327
13309
|
import {
|
|
12328
13310
|
queryExecutions as queryExecutions5,
|
|
12329
13311
|
pollDirectExecutions as pollDirectExecutions2,
|
|
@@ -12341,20 +13323,20 @@ function useWithdrawPolling({
|
|
|
12341
13323
|
onWithdrawSuccess,
|
|
12342
13324
|
onWithdrawError
|
|
12343
13325
|
}) {
|
|
12344
|
-
const [executions, setExecutions] =
|
|
12345
|
-
const [isPolling, setIsPolling] =
|
|
12346
|
-
const enabledAtRef =
|
|
12347
|
-
const trackedRef =
|
|
12348
|
-
const prevEnabledRef =
|
|
12349
|
-
const onSuccessRef =
|
|
12350
|
-
const onErrorRef =
|
|
12351
|
-
|
|
13326
|
+
const [executions, setExecutions] = useState29([]);
|
|
13327
|
+
const [isPolling, setIsPolling] = useState29(false);
|
|
13328
|
+
const enabledAtRef = useRef9(/* @__PURE__ */ new Date());
|
|
13329
|
+
const trackedRef = useRef9(/* @__PURE__ */ new Map());
|
|
13330
|
+
const prevEnabledRef = useRef9(false);
|
|
13331
|
+
const onSuccessRef = useRef9(onWithdrawSuccess);
|
|
13332
|
+
const onErrorRef = useRef9(onWithdrawError);
|
|
13333
|
+
useEffect24(() => {
|
|
12352
13334
|
onSuccessRef.current = onWithdrawSuccess;
|
|
12353
13335
|
}, [onWithdrawSuccess]);
|
|
12354
|
-
|
|
13336
|
+
useEffect24(() => {
|
|
12355
13337
|
onErrorRef.current = onWithdrawError;
|
|
12356
13338
|
}, [onWithdrawError]);
|
|
12357
|
-
|
|
13339
|
+
useEffect24(() => {
|
|
12358
13340
|
if (enabled && !prevEnabledRef.current) {
|
|
12359
13341
|
enabledAtRef.current = /* @__PURE__ */ new Date();
|
|
12360
13342
|
trackedRef.current.clear();
|
|
@@ -12364,7 +13346,7 @@ function useWithdrawPolling({
|
|
|
12364
13346
|
}
|
|
12365
13347
|
prevEnabledRef.current = enabled;
|
|
12366
13348
|
}, [enabled]);
|
|
12367
|
-
|
|
13349
|
+
useEffect24(() => {
|
|
12368
13350
|
if (!userId || !enabled) return;
|
|
12369
13351
|
const enabledAt = enabledAtRef.current;
|
|
12370
13352
|
const poll = async () => {
|
|
@@ -12426,7 +13408,7 @@ function useWithdrawPolling({
|
|
|
12426
13408
|
setIsPolling(false);
|
|
12427
13409
|
};
|
|
12428
13410
|
}, [userId, publishableKey, enabled]);
|
|
12429
|
-
|
|
13411
|
+
useEffect24(() => {
|
|
12430
13412
|
if (!enabled || !depositWalletId) return;
|
|
12431
13413
|
const trigger = async () => {
|
|
12432
13414
|
try {
|
|
@@ -12442,7 +13424,7 @@ function useWithdrawPolling({
|
|
|
12442
13424
|
}
|
|
12443
13425
|
|
|
12444
13426
|
// src/components/withdrawals/WithdrawDoubleInput.tsx
|
|
12445
|
-
import { jsx as
|
|
13427
|
+
import { jsx as jsx53, jsxs as jsxs46 } from "react/jsx-runtime";
|
|
12446
13428
|
var t7 = i18n.withdrawModal;
|
|
12447
13429
|
var getChainKey4 = (chainId, chainType) => `${chainType}:${chainId}`;
|
|
12448
13430
|
function WithdrawDoubleInput({
|
|
@@ -12457,8 +13439,8 @@ function WithdrawDoubleInput({
|
|
|
12457
13439
|
const isDarkMode = useTheme().themeClass.includes("uf-dark");
|
|
12458
13440
|
const selectedToken = selectedTokenSymbol ? tokens.find((t11) => t11.symbol === selectedTokenSymbol) : void 0;
|
|
12459
13441
|
const availableChainsForToken = selectedToken?.chains || [];
|
|
12460
|
-
const renderTokenItem = (tokenData) => /* @__PURE__ */
|
|
12461
|
-
/* @__PURE__ */
|
|
13442
|
+
const renderTokenItem = (tokenData) => /* @__PURE__ */ jsxs46("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
13443
|
+
/* @__PURE__ */ jsx53(
|
|
12462
13444
|
"img",
|
|
12463
13445
|
{
|
|
12464
13446
|
src: tokenData.icon_url,
|
|
@@ -12469,10 +13451,10 @@ function WithdrawDoubleInput({
|
|
|
12469
13451
|
className: "uf-rounded-full uf-flex-shrink-0"
|
|
12470
13452
|
}
|
|
12471
13453
|
),
|
|
12472
|
-
/* @__PURE__ */
|
|
13454
|
+
/* @__PURE__ */ jsx53("span", { className: "uf-text-xs uf-font-normal", children: tokenData.symbol })
|
|
12473
13455
|
] });
|
|
12474
|
-
const renderChainItem = (chainData) => /* @__PURE__ */
|
|
12475
|
-
/* @__PURE__ */
|
|
13456
|
+
const renderChainItem = (chainData) => /* @__PURE__ */ jsxs46("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
13457
|
+
/* @__PURE__ */ jsx53(
|
|
12476
13458
|
"img",
|
|
12477
13459
|
{
|
|
12478
13460
|
src: chainData.icon_url,
|
|
@@ -12483,14 +13465,14 @@ function WithdrawDoubleInput({
|
|
|
12483
13465
|
className: "uf-rounded-full uf-flex-shrink-0"
|
|
12484
13466
|
}
|
|
12485
13467
|
),
|
|
12486
|
-
/* @__PURE__ */
|
|
13468
|
+
/* @__PURE__ */ jsx53("span", { className: "uf-text-xs uf-font-normal", children: chainData.chain_name })
|
|
12487
13469
|
] });
|
|
12488
13470
|
const currentChainData = selectedChainKey ? availableChainsForToken.find(
|
|
12489
13471
|
(c) => getChainKey4(c.chain_id, c.chain_type) === selectedChainKey
|
|
12490
13472
|
) : void 0;
|
|
12491
|
-
return /* @__PURE__ */
|
|
12492
|
-
/* @__PURE__ */
|
|
12493
|
-
/* @__PURE__ */
|
|
13473
|
+
return /* @__PURE__ */ jsxs46("div", { className: "uf-grid uf-grid-cols-2 uf-gap-2.5", children: [
|
|
13474
|
+
/* @__PURE__ */ jsxs46("div", { children: [
|
|
13475
|
+
/* @__PURE__ */ jsx53(
|
|
12494
13476
|
"div",
|
|
12495
13477
|
{
|
|
12496
13478
|
className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1",
|
|
@@ -12498,14 +13480,14 @@ function WithdrawDoubleInput({
|
|
|
12498
13480
|
children: t7.receiveToken
|
|
12499
13481
|
}
|
|
12500
13482
|
),
|
|
12501
|
-
/* @__PURE__ */
|
|
13483
|
+
/* @__PURE__ */ jsxs46(
|
|
12502
13484
|
Select,
|
|
12503
13485
|
{
|
|
12504
13486
|
value: selectedTokenSymbol ?? "",
|
|
12505
13487
|
onValueChange: onTokenChange,
|
|
12506
13488
|
disabled: isLoading || tokens.length === 0,
|
|
12507
13489
|
children: [
|
|
12508
|
-
/* @__PURE__ */
|
|
13490
|
+
/* @__PURE__ */ jsx53(
|
|
12509
13491
|
SelectTrigger,
|
|
12510
13492
|
{
|
|
12511
13493
|
className: "uf-h-10 hover:uf-opacity-90 uf-text-foreground disabled:uf-opacity-50",
|
|
@@ -12513,10 +13495,10 @@ function WithdrawDoubleInput({
|
|
|
12513
13495
|
backgroundColor: components.card.backgroundColor,
|
|
12514
13496
|
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
12515
13497
|
},
|
|
12516
|
-
children: /* @__PURE__ */
|
|
13498
|
+
children: /* @__PURE__ */ jsx53(SelectValue, { children: isLoading || !selectedTokenSymbol ? /* @__PURE__ */ jsx53("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t7.loading }) : selectedToken ? renderTokenItem(selectedToken) : /* @__PURE__ */ jsx53("span", { className: "uf-text-xs uf-font-normal", children: selectedTokenSymbol }) })
|
|
12517
13499
|
}
|
|
12518
13500
|
),
|
|
12519
|
-
/* @__PURE__ */
|
|
13501
|
+
/* @__PURE__ */ jsx53(
|
|
12520
13502
|
SelectContent,
|
|
12521
13503
|
{
|
|
12522
13504
|
className: "uf-bg-secondary uf-border uf-text-foreground uf-max-h-[300px]",
|
|
@@ -12524,7 +13506,7 @@ function WithdrawDoubleInput({
|
|
|
12524
13506
|
border: `1px solid ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)"}`,
|
|
12525
13507
|
...fonts.regular ? { "--uf-font-family": fonts.regular } : {}
|
|
12526
13508
|
},
|
|
12527
|
-
children: tokens.map((tokenData) => /* @__PURE__ */
|
|
13509
|
+
children: tokens.map((tokenData) => /* @__PURE__ */ jsx53(
|
|
12528
13510
|
SelectItem,
|
|
12529
13511
|
{
|
|
12530
13512
|
value: tokenData.symbol,
|
|
@@ -12539,8 +13521,8 @@ function WithdrawDoubleInput({
|
|
|
12539
13521
|
}
|
|
12540
13522
|
)
|
|
12541
13523
|
] }),
|
|
12542
|
-
/* @__PURE__ */
|
|
12543
|
-
/* @__PURE__ */
|
|
13524
|
+
/* @__PURE__ */ jsxs46("div", { children: [
|
|
13525
|
+
/* @__PURE__ */ jsx53(
|
|
12544
13526
|
"div",
|
|
12545
13527
|
{
|
|
12546
13528
|
className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1",
|
|
@@ -12548,14 +13530,14 @@ function WithdrawDoubleInput({
|
|
|
12548
13530
|
children: t7.receiveChain
|
|
12549
13531
|
}
|
|
12550
13532
|
),
|
|
12551
|
-
/* @__PURE__ */
|
|
13533
|
+
/* @__PURE__ */ jsxs46(
|
|
12552
13534
|
Select,
|
|
12553
13535
|
{
|
|
12554
13536
|
value: selectedChainKey ?? "",
|
|
12555
13537
|
onValueChange: onChainChange,
|
|
12556
13538
|
disabled: isLoading || availableChainsForToken.length === 0,
|
|
12557
13539
|
children: [
|
|
12558
|
-
/* @__PURE__ */
|
|
13540
|
+
/* @__PURE__ */ jsx53(
|
|
12559
13541
|
SelectTrigger,
|
|
12560
13542
|
{
|
|
12561
13543
|
className: "uf-h-10 hover:uf-opacity-90 uf-text-foreground disabled:uf-opacity-50",
|
|
@@ -12563,10 +13545,10 @@ function WithdrawDoubleInput({
|
|
|
12563
13545
|
backgroundColor: components.card.backgroundColor,
|
|
12564
13546
|
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
12565
13547
|
},
|
|
12566
|
-
children: /* @__PURE__ */
|
|
13548
|
+
children: /* @__PURE__ */ jsx53(SelectValue, { children: isLoading || !selectedChainKey ? /* @__PURE__ */ jsx53("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t7.loading }) : currentChainData ? renderChainItem(currentChainData) : /* @__PURE__ */ jsx53("span", { className: "uf-text-xs uf-font-normal", children: selectedChainKey }) })
|
|
12567
13549
|
}
|
|
12568
13550
|
),
|
|
12569
|
-
/* @__PURE__ */
|
|
13551
|
+
/* @__PURE__ */ jsx53(
|
|
12570
13552
|
SelectContent,
|
|
12571
13553
|
{
|
|
12572
13554
|
align: "end",
|
|
@@ -12575,9 +13557,9 @@ function WithdrawDoubleInput({
|
|
|
12575
13557
|
border: `1px solid ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)"}`,
|
|
12576
13558
|
...fonts.regular ? { "--uf-font-family": fonts.regular } : {}
|
|
12577
13559
|
},
|
|
12578
|
-
children: availableChainsForToken.length === 0 ? /* @__PURE__ */
|
|
13560
|
+
children: availableChainsForToken.length === 0 ? /* @__PURE__ */ jsx53("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) => {
|
|
12579
13561
|
const chainKey = getChainKey4(chainData.chain_id, chainData.chain_type);
|
|
12580
|
-
return /* @__PURE__ */
|
|
13562
|
+
return /* @__PURE__ */ jsx53(
|
|
12581
13563
|
SelectItem,
|
|
12582
13564
|
{
|
|
12583
13565
|
value: chainKey,
|
|
@@ -12597,22 +13579,22 @@ function WithdrawDoubleInput({
|
|
|
12597
13579
|
}
|
|
12598
13580
|
|
|
12599
13581
|
// src/components/withdrawals/WithdrawForm.tsx
|
|
12600
|
-
import { useState as
|
|
13582
|
+
import { useState as useState30, useCallback as useCallback6, useMemo as useMemo11, useEffect as useEffect25 } from "react";
|
|
12601
13583
|
import {
|
|
12602
|
-
AlertTriangle as
|
|
13584
|
+
AlertTriangle as AlertTriangle3,
|
|
12603
13585
|
ArrowUpDown,
|
|
12604
13586
|
ChevronDown as ChevronDown7,
|
|
12605
13587
|
ChevronUp as ChevronUp6,
|
|
12606
13588
|
Clock as Clock4,
|
|
12607
13589
|
ClipboardPaste,
|
|
12608
13590
|
DollarSign as DollarSign3,
|
|
12609
|
-
Loader2 as
|
|
13591
|
+
Loader2 as Loader26,
|
|
12610
13592
|
ShieldCheck as ShieldCheck3,
|
|
12611
13593
|
Wallet as Wallet3
|
|
12612
13594
|
} from "lucide-react";
|
|
12613
13595
|
|
|
12614
13596
|
// src/hooks/use-verify-recipient-address.ts
|
|
12615
|
-
import { useQuery as
|
|
13597
|
+
import { useQuery as useQuery15 } from "@tanstack/react-query";
|
|
12616
13598
|
import { verifyRecipientAddress as verifyRecipientAddress2 } from "@unifold/core";
|
|
12617
13599
|
function useVerifyRecipientAddress(params) {
|
|
12618
13600
|
const {
|
|
@@ -12625,7 +13607,7 @@ function useVerifyRecipientAddress(params) {
|
|
|
12625
13607
|
} = params;
|
|
12626
13608
|
const trimmedAddress = recipientAddress?.trim() || "";
|
|
12627
13609
|
const hasAllParams = !!chainType && !!chainId && !!tokenAddress && trimmedAddress.length > 0;
|
|
12628
|
-
return
|
|
13610
|
+
return useQuery15({
|
|
12629
13611
|
queryKey: [
|
|
12630
13612
|
"unifold",
|
|
12631
13613
|
"verifyRecipientAddress",
|
|
@@ -12656,7 +13638,9 @@ function useVerifyRecipientAddress(params) {
|
|
|
12656
13638
|
// src/components/withdrawals/send-withdraw.ts
|
|
12657
13639
|
import {
|
|
12658
13640
|
buildSolanaTransaction as buildSolanaTransaction2,
|
|
12659
|
-
sendSolanaTransaction as sendSolanaTransactionToBackend2
|
|
13641
|
+
sendSolanaTransaction as sendSolanaTransactionToBackend2,
|
|
13642
|
+
buildHypercoreTransaction as buildHypercoreTransactionFromBackend,
|
|
13643
|
+
sendHypercoreTransaction as sendHypercoreTransactionToBackend
|
|
12660
13644
|
} from "@unifold/core";
|
|
12661
13645
|
async function sendEvmWithdraw(params) {
|
|
12662
13646
|
const {
|
|
@@ -12767,6 +13751,52 @@ async function sendSolanaWithdraw(params) {
|
|
|
12767
13751
|
);
|
|
12768
13752
|
return sendResponse.signature;
|
|
12769
13753
|
}
|
|
13754
|
+
var HYPERCORE_CHAIN_ID = "1337";
|
|
13755
|
+
var HYPERCORE_SPOT_USDC_ADDRESS = "0x6d1e7cde53ba9467b783cb7c530ce054";
|
|
13756
|
+
function isHypercoreChain(chainId) {
|
|
13757
|
+
return chainId === HYPERCORE_CHAIN_ID;
|
|
13758
|
+
}
|
|
13759
|
+
async function sendHypercoreWithdraw(params) {
|
|
13760
|
+
const {
|
|
13761
|
+
provider,
|
|
13762
|
+
fromAddress,
|
|
13763
|
+
depositWalletAddress,
|
|
13764
|
+
sourceTokenAddress,
|
|
13765
|
+
amount,
|
|
13766
|
+
tokenSymbol,
|
|
13767
|
+
publishableKey
|
|
13768
|
+
} = params;
|
|
13769
|
+
const isSpot = sourceTokenAddress.toLowerCase() === HYPERCORE_SPOT_USDC_ADDRESS;
|
|
13770
|
+
const currentChainHex = await provider.request({
|
|
13771
|
+
method: "eth_chainId",
|
|
13772
|
+
params: []
|
|
13773
|
+
});
|
|
13774
|
+
const activeChainId = String(parseInt(currentChainHex, 16));
|
|
13775
|
+
const buildResult = await buildHypercoreTransactionFromBackend(
|
|
13776
|
+
{
|
|
13777
|
+
action_type: isSpot ? "spot_send" : "usd_send",
|
|
13778
|
+
signature_chain_type: "ethereum",
|
|
13779
|
+
signature_chain_id: activeChainId,
|
|
13780
|
+
recipient_address: depositWalletAddress,
|
|
13781
|
+
token_address: sourceTokenAddress,
|
|
13782
|
+
token_symbol: tokenSymbol || void 0,
|
|
13783
|
+
amount
|
|
13784
|
+
},
|
|
13785
|
+
publishableKey
|
|
13786
|
+
);
|
|
13787
|
+
const signature = await provider.request({
|
|
13788
|
+
method: "eth_signTypedData_v4",
|
|
13789
|
+
params: [fromAddress, JSON.stringify(buildResult.typed_data)]
|
|
13790
|
+
});
|
|
13791
|
+
await sendHypercoreTransactionToBackend(
|
|
13792
|
+
{
|
|
13793
|
+
action_payload: buildResult.action_payload,
|
|
13794
|
+
signature,
|
|
13795
|
+
nonce: buildResult.nonce
|
|
13796
|
+
},
|
|
13797
|
+
publishableKey
|
|
13798
|
+
);
|
|
13799
|
+
}
|
|
12770
13800
|
async function detectBrowserWallet(chainType, senderAddress) {
|
|
12771
13801
|
const win = typeof window !== "undefined" ? window : null;
|
|
12772
13802
|
if (!win || !senderAddress) return null;
|
|
@@ -12840,7 +13870,7 @@ async function detectBrowserWallet(chainType, senderAddress) {
|
|
|
12840
13870
|
}
|
|
12841
13871
|
|
|
12842
13872
|
// src/components/withdrawals/WithdrawForm.tsx
|
|
12843
|
-
import { Fragment as
|
|
13873
|
+
import { Fragment as Fragment11, jsx as jsx54, jsxs as jsxs47 } from "react/jsx-runtime";
|
|
12844
13874
|
var t8 = i18n.withdrawModal;
|
|
12845
13875
|
var tCrypto = i18n.transferCrypto;
|
|
12846
13876
|
function formatProcessingTime2(seconds) {
|
|
@@ -12893,22 +13923,22 @@ function WithdrawForm({
|
|
|
12893
13923
|
footerLeft
|
|
12894
13924
|
}) {
|
|
12895
13925
|
const { colors: colors2, fonts, components } = useTheme();
|
|
12896
|
-
const [recipientAddress, setRecipientAddress] =
|
|
12897
|
-
const [amount, setAmount] =
|
|
12898
|
-
const [inputUnit, setInputUnit] =
|
|
12899
|
-
const [isSubmitting, setIsSubmitting] =
|
|
12900
|
-
const [submitError, setSubmitError] =
|
|
12901
|
-
const [detailsExpanded, setDetailsExpanded] =
|
|
12902
|
-
const [glossaryOpen, setGlossaryOpen] =
|
|
12903
|
-
|
|
13926
|
+
const [recipientAddress, setRecipientAddress] = useState30(recipientAddressProp || "");
|
|
13927
|
+
const [amount, setAmount] = useState30("");
|
|
13928
|
+
const [inputUnit, setInputUnit] = useState30("crypto");
|
|
13929
|
+
const [isSubmitting, setIsSubmitting] = useState30(false);
|
|
13930
|
+
const [submitError, setSubmitError] = useState30(null);
|
|
13931
|
+
const [detailsExpanded, setDetailsExpanded] = useState30(false);
|
|
13932
|
+
const [glossaryOpen, setGlossaryOpen] = useState30(false);
|
|
13933
|
+
useEffect25(() => {
|
|
12904
13934
|
setRecipientAddress(recipientAddressProp || "");
|
|
12905
13935
|
setAmount("");
|
|
12906
13936
|
setInputUnit("crypto");
|
|
12907
13937
|
setSubmitError(null);
|
|
12908
13938
|
}, [recipientAddressProp]);
|
|
12909
13939
|
const trimmedAddress = recipientAddress.trim();
|
|
12910
|
-
const [debouncedAddress, setDebouncedAddress] =
|
|
12911
|
-
|
|
13940
|
+
const [debouncedAddress, setDebouncedAddress] = useState30(trimmedAddress);
|
|
13941
|
+
useEffect25(() => {
|
|
12912
13942
|
const id = setTimeout(() => setDebouncedAddress(trimmedAddress), 500);
|
|
12913
13943
|
return () => clearTimeout(id);
|
|
12914
13944
|
}, [trimmedAddress]);
|
|
@@ -12925,7 +13955,7 @@ function WithdrawForm({
|
|
|
12925
13955
|
enabled: debouncedAddress.length > 5 && !!selectedChain
|
|
12926
13956
|
});
|
|
12927
13957
|
const isDebouncing = trimmedAddress !== debouncedAddress;
|
|
12928
|
-
const addressError =
|
|
13958
|
+
const addressError = useMemo11(() => {
|
|
12929
13959
|
if (!trimmedAddress || trimmedAddress.length <= 5) return null;
|
|
12930
13960
|
if (isDebouncing || isVerifyingAddress) return null;
|
|
12931
13961
|
if (verifyError) return t8.invalidAddress;
|
|
@@ -12939,47 +13969,47 @@ function WithdrawForm({
|
|
|
12939
13969
|
return null;
|
|
12940
13970
|
}, [trimmedAddress, isDebouncing, isVerifyingAddress, verifyError, addressVerification, selectedChain, selectedToken]);
|
|
12941
13971
|
const isAddressValid = !isDebouncing && !!addressVerification?.valid && !addressError;
|
|
12942
|
-
const exchangeRate =
|
|
13972
|
+
const exchangeRate = useMemo11(() => {
|
|
12943
13973
|
if (!balanceData?.exchangeRate) return 0;
|
|
12944
13974
|
return parseFloat(balanceData.exchangeRate);
|
|
12945
13975
|
}, [balanceData]);
|
|
12946
|
-
const balanceCrypto =
|
|
13976
|
+
const balanceCrypto = useMemo11(() => {
|
|
12947
13977
|
if (!balanceData?.balanceHuman) return 0;
|
|
12948
13978
|
return parseFloat(balanceData.balanceHuman);
|
|
12949
13979
|
}, [balanceData]);
|
|
12950
|
-
const balanceUsdNum =
|
|
13980
|
+
const balanceUsdNum = useMemo11(() => {
|
|
12951
13981
|
if (!balanceData?.balanceUsd) return 0;
|
|
12952
13982
|
return parseFloat(balanceData.balanceUsd);
|
|
12953
13983
|
}, [balanceData]);
|
|
12954
13984
|
const tokenSymbol = sourceTokenSymbol || balanceData?.symbol || "TOKEN";
|
|
12955
13985
|
const sourceDecimals = balanceData?.decimals ?? 6;
|
|
12956
|
-
const cryptoAmountFromInput =
|
|
13986
|
+
const cryptoAmountFromInput = useMemo11(() => {
|
|
12957
13987
|
const val = parseFloat(amount);
|
|
12958
13988
|
if (!val || val <= 0) return 0;
|
|
12959
13989
|
if (inputUnit === "crypto") return val;
|
|
12960
13990
|
return exchangeRate > 0 ? val / exchangeRate : 0;
|
|
12961
13991
|
}, [amount, inputUnit, exchangeRate]);
|
|
12962
|
-
const fiatAmountFromInput =
|
|
13992
|
+
const fiatAmountFromInput = useMemo11(() => {
|
|
12963
13993
|
const val = parseFloat(amount);
|
|
12964
13994
|
if (!val || val <= 0) return 0;
|
|
12965
13995
|
if (inputUnit === "fiat") return val;
|
|
12966
13996
|
return val * exchangeRate;
|
|
12967
13997
|
}, [amount, inputUnit, exchangeRate]);
|
|
12968
|
-
const convertedDisplay =
|
|
13998
|
+
const convertedDisplay = useMemo11(() => {
|
|
12969
13999
|
if (!amount || parseFloat(amount) <= 0) return null;
|
|
12970
14000
|
if (inputUnit === "crypto") {
|
|
12971
14001
|
return `$${fiatAmountFromInput.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
12972
14002
|
}
|
|
12973
14003
|
return `${cryptoAmountFromInput.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 6 })} ${tokenSymbol}`;
|
|
12974
14004
|
}, [amount, inputUnit, fiatAmountFromInput, cryptoAmountFromInput, tokenSymbol]);
|
|
12975
|
-
const balanceDisplay =
|
|
14005
|
+
const balanceDisplay = useMemo11(() => {
|
|
12976
14006
|
if (isLoadingBalance || !balanceData) return null;
|
|
12977
14007
|
if (inputUnit === "crypto") {
|
|
12978
14008
|
return `${balanceCrypto.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ${tokenSymbol}`;
|
|
12979
14009
|
}
|
|
12980
14010
|
return `$${balanceUsdNum.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
12981
14011
|
}, [isLoadingBalance, balanceData, inputUnit, balanceCrypto, balanceUsdNum, tokenSymbol]);
|
|
12982
|
-
const handleSwitchUnit =
|
|
14012
|
+
const handleSwitchUnit = useCallback6(() => {
|
|
12983
14013
|
const val = parseFloat(amount);
|
|
12984
14014
|
if (!val || val <= 0 || exchangeRate <= 0) {
|
|
12985
14015
|
setInputUnit((u) => u === "crypto" ? "fiat" : "crypto");
|
|
@@ -12996,7 +14026,7 @@ function WithdrawForm({
|
|
|
12996
14026
|
setInputUnit("crypto");
|
|
12997
14027
|
}
|
|
12998
14028
|
}, [amount, inputUnit, exchangeRate, sourceDecimals]);
|
|
12999
|
-
const handleMaxClick =
|
|
14029
|
+
const handleMaxClick = useCallback6(() => {
|
|
13000
14030
|
if (inputUnit === "crypto") {
|
|
13001
14031
|
if (balanceCrypto <= 0) return;
|
|
13002
14032
|
setAmount(balanceData?.balanceHuman ?? "0");
|
|
@@ -13008,7 +14038,7 @@ function WithdrawForm({
|
|
|
13008
14038
|
const isBelowMinimum = minimumWithdrawAmountUsd !== null && fiatAmountFromInput > 0 && fiatAmountFromInput < minimumWithdrawAmountUsd;
|
|
13009
14039
|
const isOverBalance = inputUnit === "crypto" ? cryptoAmountFromInput > 0 && balanceCrypto > 0 && cryptoAmountFromInput > balanceCrypto : fiatAmountFromInput > 0 && balanceUsdNum > 0 && fiatAmountFromInput > balanceUsdNum;
|
|
13010
14040
|
const isFormValid = trimmedAddress.length > 0 && amount.trim().length > 0 && cryptoAmountFromInput > 0 && isAddressValid && !isBelowMinimum && !isOverBalance && !!balanceData;
|
|
13011
|
-
const handleWithdraw =
|
|
14041
|
+
const handleWithdraw = useCallback6(async () => {
|
|
13012
14042
|
if (!selectedToken || !selectedChain) return;
|
|
13013
14043
|
if (!isFormValid) return;
|
|
13014
14044
|
setIsSubmitting(true);
|
|
@@ -13041,7 +14071,17 @@ function WithdrawForm({
|
|
|
13041
14071
|
recipientAddress: trimmedAddress
|
|
13042
14072
|
};
|
|
13043
14073
|
if (detectedWallet) {
|
|
13044
|
-
if (detectedWallet.chainFamily === "evm") {
|
|
14074
|
+
if (detectedWallet.chainFamily === "evm" && isHypercoreChain(sourceChainId)) {
|
|
14075
|
+
await sendHypercoreWithdraw({
|
|
14076
|
+
provider: detectedWallet.provider,
|
|
14077
|
+
fromAddress: detectedWallet.address,
|
|
14078
|
+
depositWalletAddress: depositWallet.address,
|
|
14079
|
+
sourceTokenAddress,
|
|
14080
|
+
amount: humanAmount,
|
|
14081
|
+
tokenSymbol,
|
|
14082
|
+
publishableKey
|
|
14083
|
+
});
|
|
14084
|
+
} else if (detectedWallet.chainFamily === "evm") {
|
|
13045
14085
|
await sendEvmWithdraw({
|
|
13046
14086
|
provider: detectedWallet.provider,
|
|
13047
14087
|
fromAddress: detectedWallet.address,
|
|
@@ -13078,9 +14118,9 @@ function WithdrawForm({
|
|
|
13078
14118
|
setIsSubmitting(false);
|
|
13079
14119
|
}
|
|
13080
14120
|
}, [selectedToken, selectedChain, isFormValid, cryptoAmountFromInput, sourceDecimals, trimmedAddress, publishableKey, onWithdraw, detectedWallet, sourceTokenAddress, sourceChainId, onWithdrawError, onDepositWalletCreation, onWithdrawSubmitted, amount, inputUnit, balanceCrypto, balanceUsdNum, balanceData]);
|
|
13081
|
-
return /* @__PURE__ */
|
|
13082
|
-
/* @__PURE__ */
|
|
13083
|
-
/* @__PURE__ */
|
|
14121
|
+
return /* @__PURE__ */ jsxs47(Fragment11, { children: [
|
|
14122
|
+
/* @__PURE__ */ jsxs47("div", { children: [
|
|
14123
|
+
/* @__PURE__ */ jsx54(
|
|
13084
14124
|
"div",
|
|
13085
14125
|
{
|
|
13086
14126
|
className: "uf-text-xs uf-mb-1.5",
|
|
@@ -13088,7 +14128,7 @@ function WithdrawForm({
|
|
|
13088
14128
|
children: t8.recipientAddress
|
|
13089
14129
|
}
|
|
13090
14130
|
),
|
|
13091
|
-
/* @__PURE__ */
|
|
14131
|
+
/* @__PURE__ */ jsx54(
|
|
13092
14132
|
"style",
|
|
13093
14133
|
{
|
|
13094
14134
|
dangerouslySetInnerHTML: {
|
|
@@ -13096,7 +14136,7 @@ function WithdrawForm({
|
|
|
13096
14136
|
}
|
|
13097
14137
|
}
|
|
13098
14138
|
),
|
|
13099
|
-
/* @__PURE__ */
|
|
14139
|
+
/* @__PURE__ */ jsxs47(
|
|
13100
14140
|
"div",
|
|
13101
14141
|
{
|
|
13102
14142
|
className: "uf-flex uf-items-center uf-gap-1 uf-pr-2",
|
|
@@ -13106,7 +14146,7 @@ function WithdrawForm({
|
|
|
13106
14146
|
border: `${components.input.borderWidth}px solid ${addressError ? colors2.error : components.input.borderColor}`
|
|
13107
14147
|
},
|
|
13108
14148
|
children: [
|
|
13109
|
-
/* @__PURE__ */
|
|
14149
|
+
/* @__PURE__ */ jsx54(
|
|
13110
14150
|
"input",
|
|
13111
14151
|
{
|
|
13112
14152
|
type: "text",
|
|
@@ -13123,7 +14163,7 @@ function WithdrawForm({
|
|
|
13123
14163
|
}
|
|
13124
14164
|
}
|
|
13125
14165
|
),
|
|
13126
|
-
/* @__PURE__ */
|
|
14166
|
+
/* @__PURE__ */ jsx54(
|
|
13127
14167
|
"button",
|
|
13128
14168
|
{
|
|
13129
14169
|
type: "button",
|
|
@@ -13140,27 +14180,27 @@ function WithdrawForm({
|
|
|
13140
14180
|
className: "uf-flex-shrink-0 uf-p-1 uf-rounded uf-transition-colors hover:uf-opacity-70",
|
|
13141
14181
|
style: { color: colors2.foregroundMuted },
|
|
13142
14182
|
title: "Paste from clipboard",
|
|
13143
|
-
children: /* @__PURE__ */
|
|
14183
|
+
children: /* @__PURE__ */ jsx54(ClipboardPaste, { className: "uf-w-4 uf-h-4" })
|
|
13144
14184
|
}
|
|
13145
14185
|
)
|
|
13146
14186
|
]
|
|
13147
14187
|
}
|
|
13148
14188
|
),
|
|
13149
|
-
(isDebouncing || isVerifyingAddress) && trimmedAddress.length > 5 && /* @__PURE__ */
|
|
13150
|
-
/* @__PURE__ */
|
|
13151
|
-
/* @__PURE__ */
|
|
14189
|
+
(isDebouncing || isVerifyingAddress) && trimmedAddress.length > 5 && /* @__PURE__ */ jsxs47("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-1.5", children: [
|
|
14190
|
+
/* @__PURE__ */ jsx54(Loader26, { className: "uf-w-3 uf-h-3 uf-animate-spin", style: { color: colors2.foregroundMuted } }),
|
|
14191
|
+
/* @__PURE__ */ jsx54("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: t8.verifyingAddress })
|
|
13152
14192
|
] }),
|
|
13153
|
-
addressError && /* @__PURE__ */
|
|
13154
|
-
/* @__PURE__ */
|
|
13155
|
-
/* @__PURE__ */
|
|
14193
|
+
addressError && /* @__PURE__ */ jsxs47("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-1.5", children: [
|
|
14194
|
+
/* @__PURE__ */ jsx54(AlertTriangle3, { className: "uf-w-3 uf-h-3", style: { color: colors2.error } }),
|
|
14195
|
+
/* @__PURE__ */ jsx54("span", { className: "uf-text-xs", style: { color: colors2.error, fontFamily: fonts.regular }, children: addressError })
|
|
13156
14196
|
] })
|
|
13157
14197
|
] }),
|
|
13158
|
-
/* @__PURE__ */
|
|
13159
|
-
/* @__PURE__ */
|
|
14198
|
+
/* @__PURE__ */ jsxs47("div", { children: [
|
|
14199
|
+
/* @__PURE__ */ jsxs47("div", { className: "uf-text-xs uf-mb-1.5", style: { color: components.card.labelColor, fontFamily: fonts.medium }, children: [
|
|
13160
14200
|
t8.amount,
|
|
13161
|
-
minimumWithdrawAmountUsd != null && minimumWithdrawAmountUsd > 0 && /* @__PURE__ */
|
|
14201
|
+
minimumWithdrawAmountUsd != null && minimumWithdrawAmountUsd > 0 && /* @__PURE__ */ jsx54("span", { style: { color: colors2.warning, fontFamily: fonts.regular }, children: ` ($${minimumWithdrawAmountUsd.toFixed(2)} min)` })
|
|
13162
14202
|
] }),
|
|
13163
|
-
/* @__PURE__ */
|
|
14203
|
+
/* @__PURE__ */ jsx54(
|
|
13164
14204
|
"style",
|
|
13165
14205
|
{
|
|
13166
14206
|
dangerouslySetInnerHTML: {
|
|
@@ -13168,7 +14208,7 @@ function WithdrawForm({
|
|
|
13168
14208
|
}
|
|
13169
14209
|
}
|
|
13170
14210
|
),
|
|
13171
|
-
/* @__PURE__ */
|
|
14211
|
+
/* @__PURE__ */ jsxs47(
|
|
13172
14212
|
"div",
|
|
13173
14213
|
{
|
|
13174
14214
|
className: "uf-flex uf-items-center uf-gap-2 uf-px-3 uf-py-2.5",
|
|
@@ -13178,7 +14218,7 @@ function WithdrawForm({
|
|
|
13178
14218
|
border: `${components.input.borderWidth}px solid ${components.input.borderColor}`
|
|
13179
14219
|
},
|
|
13180
14220
|
children: [
|
|
13181
|
-
/* @__PURE__ */
|
|
14221
|
+
/* @__PURE__ */ jsx54(
|
|
13182
14222
|
"input",
|
|
13183
14223
|
{
|
|
13184
14224
|
type: "text",
|
|
@@ -13199,8 +14239,8 @@ function WithdrawForm({
|
|
|
13199
14239
|
}
|
|
13200
14240
|
}
|
|
13201
14241
|
),
|
|
13202
|
-
/* @__PURE__ */
|
|
13203
|
-
/* @__PURE__ */
|
|
14242
|
+
/* @__PURE__ */ jsx54("span", { className: "uf-text-sm uf-shrink-0", style: { color: colors2.foregroundMuted, fontFamily: fonts.medium }, children: inputUnit === "crypto" ? tokenSymbol : "USD" }),
|
|
14243
|
+
/* @__PURE__ */ jsx54(
|
|
13204
14244
|
"button",
|
|
13205
14245
|
{
|
|
13206
14246
|
type: "button",
|
|
@@ -13213,10 +14253,10 @@ function WithdrawForm({
|
|
|
13213
14253
|
]
|
|
13214
14254
|
}
|
|
13215
14255
|
),
|
|
13216
|
-
/* @__PURE__ */
|
|
13217
|
-
/* @__PURE__ */
|
|
13218
|
-
/* @__PURE__ */
|
|
13219
|
-
exchangeRate > 0 && /* @__PURE__ */
|
|
14256
|
+
/* @__PURE__ */ jsxs47("div", { className: "uf-flex uf-items-center uf-justify-between uf-mt-1.5 uf-px-3", children: [
|
|
14257
|
+
/* @__PURE__ */ jsxs47("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
|
|
14258
|
+
/* @__PURE__ */ jsx54("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: convertedDisplay || (inputUnit === "crypto" ? "$0.00" : `0.00 ${tokenSymbol}`) }),
|
|
14259
|
+
exchangeRate > 0 && /* @__PURE__ */ jsx54(
|
|
13220
14260
|
"button",
|
|
13221
14261
|
{
|
|
13222
14262
|
type: "button",
|
|
@@ -13224,49 +14264,49 @@ function WithdrawForm({
|
|
|
13224
14264
|
className: "uf-p-0.5 uf-rounded uf-transition-colors hover:uf-opacity-70",
|
|
13225
14265
|
style: { color: colors2.foregroundMuted },
|
|
13226
14266
|
title: "Switch unit",
|
|
13227
|
-
children: /* @__PURE__ */
|
|
14267
|
+
children: /* @__PURE__ */ jsx54(ArrowUpDown, { className: "uf-w-3 uf-h-3" })
|
|
13228
14268
|
}
|
|
13229
14269
|
)
|
|
13230
14270
|
] }),
|
|
13231
|
-
/* @__PURE__ */
|
|
13232
|
-
balanceDisplay && /* @__PURE__ */
|
|
14271
|
+
/* @__PURE__ */ jsxs47("div", { children: [
|
|
14272
|
+
balanceDisplay && /* @__PURE__ */ jsxs47("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: [
|
|
13233
14273
|
t8.balance,
|
|
13234
14274
|
": ",
|
|
13235
14275
|
balanceDisplay
|
|
13236
14276
|
] }),
|
|
13237
|
-
isLoadingBalance && /* @__PURE__ */
|
|
14277
|
+
isLoadingBalance && /* @__PURE__ */ jsx54("div", { className: "uf-h-3 uf-w-16 uf-bg-muted uf-rounded uf-animate-pulse" })
|
|
13238
14278
|
] })
|
|
13239
14279
|
] })
|
|
13240
14280
|
] }),
|
|
13241
|
-
/* @__PURE__ */
|
|
13242
|
-
/* @__PURE__ */
|
|
14281
|
+
/* @__PURE__ */ jsxs47("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: [
|
|
14282
|
+
/* @__PURE__ */ jsxs47(
|
|
13243
14283
|
"button",
|
|
13244
14284
|
{
|
|
13245
14285
|
type: "button",
|
|
13246
14286
|
onClick: () => setDetailsExpanded(!detailsExpanded),
|
|
13247
14287
|
className: "uf-w-full uf-flex uf-items-center uf-justify-between uf-py-2.5",
|
|
13248
14288
|
children: [
|
|
13249
|
-
/* @__PURE__ */
|
|
13250
|
-
/* @__PURE__ */
|
|
13251
|
-
/* @__PURE__ */
|
|
14289
|
+
/* @__PURE__ */ jsxs47("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
14290
|
+
/* @__PURE__ */ jsx54("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ jsx54(Clock4, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
|
|
14291
|
+
/* @__PURE__ */ jsxs47("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
|
|
13252
14292
|
tCrypto.processingTime.label,
|
|
13253
14293
|
":",
|
|
13254
14294
|
" ",
|
|
13255
|
-
/* @__PURE__ */
|
|
14295
|
+
/* @__PURE__ */ jsx54("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: formatProcessingTime2(estimatedProcessingTime) })
|
|
13256
14296
|
] })
|
|
13257
14297
|
] }),
|
|
13258
|
-
detailsExpanded ? /* @__PURE__ */
|
|
14298
|
+
detailsExpanded ? /* @__PURE__ */ jsx54(ChevronUp6, { className: "uf-w-4 uf-h-4", style: { color: components.card.actionColor } }) : /* @__PURE__ */ jsx54(ChevronDown7, { className: "uf-w-4 uf-h-4", style: { color: components.card.actionColor } })
|
|
13259
14299
|
]
|
|
13260
14300
|
}
|
|
13261
14301
|
),
|
|
13262
|
-
detailsExpanded && /* @__PURE__ */
|
|
13263
|
-
/* @__PURE__ */
|
|
13264
|
-
/* @__PURE__ */
|
|
13265
|
-
/* @__PURE__ */
|
|
14302
|
+
detailsExpanded && /* @__PURE__ */ jsxs47("div", { className: "uf-pb-3 uf-space-y-2.5", children: [
|
|
14303
|
+
/* @__PURE__ */ jsxs47("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
14304
|
+
/* @__PURE__ */ jsx54("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ jsx54(ShieldCheck3, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
|
|
14305
|
+
/* @__PURE__ */ jsxs47("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
|
|
13266
14306
|
tCrypto.slippage.label,
|
|
13267
14307
|
":",
|
|
13268
14308
|
" ",
|
|
13269
|
-
/* @__PURE__ */
|
|
14309
|
+
/* @__PURE__ */ jsxs47("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: [
|
|
13270
14310
|
tCrypto.slippage.auto,
|
|
13271
14311
|
" \u2022 ",
|
|
13272
14312
|
(maxSlippagePercent ?? 0.25).toFixed(2),
|
|
@@ -13274,13 +14314,13 @@ function WithdrawForm({
|
|
|
13274
14314
|
] })
|
|
13275
14315
|
] })
|
|
13276
14316
|
] }),
|
|
13277
|
-
/* @__PURE__ */
|
|
13278
|
-
/* @__PURE__ */
|
|
13279
|
-
/* @__PURE__ */
|
|
14317
|
+
/* @__PURE__ */ jsxs47("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
14318
|
+
/* @__PURE__ */ jsx54("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ jsx54(DollarSign3, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
|
|
14319
|
+
/* @__PURE__ */ jsxs47("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
|
|
13280
14320
|
tCrypto.priceImpact.label,
|
|
13281
14321
|
":",
|
|
13282
14322
|
" ",
|
|
13283
|
-
/* @__PURE__ */
|
|
14323
|
+
/* @__PURE__ */ jsxs47("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: [
|
|
13284
14324
|
(priceImpactPercent ?? 0).toFixed(2),
|
|
13285
14325
|
"%"
|
|
13286
14326
|
] })
|
|
@@ -13288,18 +14328,18 @@ function WithdrawForm({
|
|
|
13288
14328
|
] })
|
|
13289
14329
|
] })
|
|
13290
14330
|
] }),
|
|
13291
|
-
!canWithdraw && !submitError && /* @__PURE__ */
|
|
14331
|
+
!canWithdraw && !submitError && /* @__PURE__ */ jsxs47(
|
|
13292
14332
|
"div",
|
|
13293
14333
|
{
|
|
13294
14334
|
className: "uf-flex uf-items-start uf-gap-2.5 uf-p-3 uf-rounded-xl",
|
|
13295
14335
|
style: { backgroundColor: colors2.card, border: `1px solid ${colors2.border}` },
|
|
13296
14336
|
children: [
|
|
13297
|
-
/* @__PURE__ */
|
|
13298
|
-
/* @__PURE__ */
|
|
14337
|
+
/* @__PURE__ */ jsx54(Wallet3, { className: "uf-w-4 uf-h-4 uf-flex-shrink-0 uf-mt-0.5", style: { color: colors2.warning } }),
|
|
14338
|
+
/* @__PURE__ */ jsx54("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." })
|
|
13299
14339
|
]
|
|
13300
14340
|
}
|
|
13301
14341
|
),
|
|
13302
|
-
isWalletMatch && connectedWalletName ? /* @__PURE__ */
|
|
14342
|
+
isWalletMatch && connectedWalletName ? /* @__PURE__ */ jsx54(
|
|
13303
14343
|
"button",
|
|
13304
14344
|
{
|
|
13305
14345
|
type: "button",
|
|
@@ -13313,16 +14353,16 @@ function WithdrawForm({
|
|
|
13313
14353
|
borderRadius: components.button.borderRadius,
|
|
13314
14354
|
border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
|
|
13315
14355
|
},
|
|
13316
|
-
children: isSubmitting ? /* @__PURE__ */
|
|
13317
|
-
/* @__PURE__ */
|
|
14356
|
+
children: isSubmitting ? /* @__PURE__ */ jsxs47(Fragment11, { children: [
|
|
14357
|
+
/* @__PURE__ */ jsx54(Loader26, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
|
|
13318
14358
|
"Processing..."
|
|
13319
|
-
] }) : isOverBalance ? /* @__PURE__ */
|
|
13320
|
-
/* @__PURE__ */
|
|
14359
|
+
] }) : isOverBalance ? /* @__PURE__ */ jsx54(Fragment11, { children: "Insufficient balance" }) : isBelowMinimum ? /* @__PURE__ */ jsx54(Fragment11, { children: "Minimum amount not met" }) : submitError ? /* @__PURE__ */ jsx54(Fragment11, { children: "Withdrawal failed. Try again" }) : /* @__PURE__ */ jsxs47(Fragment11, { children: [
|
|
14360
|
+
/* @__PURE__ */ jsx54(Wallet3, { className: "uf-w-4 uf-h-4" }),
|
|
13321
14361
|
"Withdraw from ",
|
|
13322
14362
|
connectedWalletName
|
|
13323
14363
|
] })
|
|
13324
14364
|
}
|
|
13325
|
-
) : /* @__PURE__ */
|
|
14365
|
+
) : /* @__PURE__ */ jsx54(
|
|
13326
14366
|
"button",
|
|
13327
14367
|
{
|
|
13328
14368
|
type: "button",
|
|
@@ -13336,17 +14376,17 @@ function WithdrawForm({
|
|
|
13336
14376
|
borderRadius: components.button.borderRadius,
|
|
13337
14377
|
border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
|
|
13338
14378
|
},
|
|
13339
|
-
children: isSubmitting ? /* @__PURE__ */
|
|
13340
|
-
/* @__PURE__ */
|
|
14379
|
+
children: isSubmitting ? /* @__PURE__ */ jsxs47("span", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2", children: [
|
|
14380
|
+
/* @__PURE__ */ jsx54(Loader26, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
|
|
13341
14381
|
"Processing..."
|
|
13342
14382
|
] }) : isOverBalance ? "Insufficient balance" : isBelowMinimum ? "Minimum amount not met" : submitError ? "Withdrawal failed. Try again" : t8.withdraw
|
|
13343
14383
|
}
|
|
13344
14384
|
),
|
|
13345
|
-
/* @__PURE__ */
|
|
13346
|
-
/* @__PURE__ */
|
|
13347
|
-
/* @__PURE__ */
|
|
14385
|
+
/* @__PURE__ */ jsxs47("div", { className: "uf-flex uf-items-center uf-justify-between uf-text-xs uf-pt-1", children: [
|
|
14386
|
+
/* @__PURE__ */ jsx54("div", { children: footerLeft }),
|
|
14387
|
+
/* @__PURE__ */ jsx54(DepositFooterLinks, { onGlossaryClick: () => setGlossaryOpen(true) })
|
|
13348
14388
|
] }),
|
|
13349
|
-
/* @__PURE__ */
|
|
14389
|
+
/* @__PURE__ */ jsx54(
|
|
13350
14390
|
GlossaryModal,
|
|
13351
14391
|
{
|
|
13352
14392
|
open: glossaryOpen,
|
|
@@ -13357,12 +14397,12 @@ function WithdrawForm({
|
|
|
13357
14397
|
}
|
|
13358
14398
|
|
|
13359
14399
|
// src/components/withdrawals/WithdrawExecutionItem.tsx
|
|
13360
|
-
import { ChevronRight as
|
|
14400
|
+
import { ChevronRight as ChevronRight13 } from "lucide-react";
|
|
13361
14401
|
import {
|
|
13362
14402
|
ExecutionStatus as ExecutionStatus6,
|
|
13363
14403
|
getIconUrl as getIconUrl5
|
|
13364
14404
|
} from "@unifold/core";
|
|
13365
|
-
import { jsx as
|
|
14405
|
+
import { jsx as jsx55, jsxs as jsxs48 } from "react/jsx-runtime";
|
|
13366
14406
|
function WithdrawExecutionItem({
|
|
13367
14407
|
execution,
|
|
13368
14408
|
onClick
|
|
@@ -13400,7 +14440,7 @@ function WithdrawExecutionItem({
|
|
|
13400
14440
|
return "$0.00";
|
|
13401
14441
|
}
|
|
13402
14442
|
};
|
|
13403
|
-
return /* @__PURE__ */
|
|
14443
|
+
return /* @__PURE__ */ jsxs48(
|
|
13404
14444
|
"button",
|
|
13405
14445
|
{
|
|
13406
14446
|
onClick,
|
|
@@ -13411,8 +14451,8 @@ function WithdrawExecutionItem({
|
|
|
13411
14451
|
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
13412
14452
|
},
|
|
13413
14453
|
children: [
|
|
13414
|
-
/* @__PURE__ */
|
|
13415
|
-
/* @__PURE__ */
|
|
14454
|
+
/* @__PURE__ */ jsxs48("div", { className: "uf-relative uf-flex-shrink-0 uf-w-9 uf-h-9", children: [
|
|
14455
|
+
/* @__PURE__ */ jsx55(
|
|
13416
14456
|
"img",
|
|
13417
14457
|
{
|
|
13418
14458
|
src: execution.destination_token_metadata?.icon_url || getIconUrl5("/icons/tokens/svg/usdc.svg"),
|
|
@@ -13423,12 +14463,12 @@ function WithdrawExecutionItem({
|
|
|
13423
14463
|
className: "uf-rounded-full uf-w-9 uf-h-9"
|
|
13424
14464
|
}
|
|
13425
14465
|
),
|
|
13426
|
-
isPending ? /* @__PURE__ */
|
|
14466
|
+
isPending ? /* @__PURE__ */ jsx55(
|
|
13427
14467
|
"div",
|
|
13428
14468
|
{
|
|
13429
14469
|
className: "uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-rounded-full uf-p-0.5",
|
|
13430
14470
|
style: { backgroundColor: colors2.warning },
|
|
13431
|
-
children: /* @__PURE__ */
|
|
14471
|
+
children: /* @__PURE__ */ jsx55(
|
|
13432
14472
|
"svg",
|
|
13433
14473
|
{
|
|
13434
14474
|
width: "10",
|
|
@@ -13436,7 +14476,7 @@ function WithdrawExecutionItem({
|
|
|
13436
14476
|
viewBox: "0 0 12 12",
|
|
13437
14477
|
fill: "none",
|
|
13438
14478
|
className: "uf-animate-spin uf-block",
|
|
13439
|
-
children: /* @__PURE__ */
|
|
14479
|
+
children: /* @__PURE__ */ jsx55(
|
|
13440
14480
|
"path",
|
|
13441
14481
|
{
|
|
13442
14482
|
d: "M6 1V3M6 9V11M1 6H3M9 6H11M2.5 2.5L4 4M8 8L9.5 9.5M2.5 9.5L4 8M8 4L9.5 2.5",
|
|
@@ -13448,12 +14488,12 @@ function WithdrawExecutionItem({
|
|
|
13448
14488
|
}
|
|
13449
14489
|
)
|
|
13450
14490
|
}
|
|
13451
|
-
) : /* @__PURE__ */
|
|
14491
|
+
) : /* @__PURE__ */ jsx55(
|
|
13452
14492
|
"div",
|
|
13453
14493
|
{
|
|
13454
14494
|
className: "uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-rounded-full uf-p-0.5",
|
|
13455
14495
|
style: { backgroundColor: colors2.success },
|
|
13456
|
-
children: /* @__PURE__ */
|
|
14496
|
+
children: /* @__PURE__ */ jsx55(
|
|
13457
14497
|
"svg",
|
|
13458
14498
|
{
|
|
13459
14499
|
width: "10",
|
|
@@ -13461,7 +14501,7 @@ function WithdrawExecutionItem({
|
|
|
13461
14501
|
viewBox: "0 0 12 12",
|
|
13462
14502
|
fill: "none",
|
|
13463
14503
|
className: "uf-block",
|
|
13464
|
-
children: /* @__PURE__ */
|
|
14504
|
+
children: /* @__PURE__ */ jsx55(
|
|
13465
14505
|
"path",
|
|
13466
14506
|
{
|
|
13467
14507
|
d: "M10 3L4.5 8.5L2 6",
|
|
@@ -13476,8 +14516,8 @@ function WithdrawExecutionItem({
|
|
|
13476
14516
|
}
|
|
13477
14517
|
)
|
|
13478
14518
|
] }),
|
|
13479
|
-
/* @__PURE__ */
|
|
13480
|
-
/* @__PURE__ */
|
|
14519
|
+
/* @__PURE__ */ jsxs48("div", { className: "uf-flex-1 uf-min-w-0", children: [
|
|
14520
|
+
/* @__PURE__ */ jsx55(
|
|
13481
14521
|
"h3",
|
|
13482
14522
|
{
|
|
13483
14523
|
className: "uf-font-medium uf-text-sm uf-leading-tight",
|
|
@@ -13488,7 +14528,7 @@ function WithdrawExecutionItem({
|
|
|
13488
14528
|
children: isPending ? "Withdrawal processing" : "Withdrawal completed"
|
|
13489
14529
|
}
|
|
13490
14530
|
),
|
|
13491
|
-
/* @__PURE__ */
|
|
14531
|
+
/* @__PURE__ */ jsx55(
|
|
13492
14532
|
"p",
|
|
13493
14533
|
{
|
|
13494
14534
|
className: "uf-text-xs uf-leading-tight",
|
|
@@ -13500,7 +14540,7 @@ function WithdrawExecutionItem({
|
|
|
13500
14540
|
}
|
|
13501
14541
|
)
|
|
13502
14542
|
] }),
|
|
13503
|
-
/* @__PURE__ */
|
|
14543
|
+
/* @__PURE__ */ jsx55(
|
|
13504
14544
|
"span",
|
|
13505
14545
|
{
|
|
13506
14546
|
className: "uf-font-medium uf-text-sm uf-flex-shrink-0",
|
|
@@ -13511,8 +14551,8 @@ function WithdrawExecutionItem({
|
|
|
13511
14551
|
children: formatUsdAmount2(execution.source_amount_usd || "0")
|
|
13512
14552
|
}
|
|
13513
14553
|
),
|
|
13514
|
-
/* @__PURE__ */
|
|
13515
|
-
|
|
14554
|
+
/* @__PURE__ */ jsx55(
|
|
14555
|
+
ChevronRight13,
|
|
13516
14556
|
{
|
|
13517
14557
|
className: "uf-w-4 uf-h-4 uf-flex-shrink-0",
|
|
13518
14558
|
style: { color: components.card.actionColor }
|
|
@@ -13524,8 +14564,8 @@ function WithdrawExecutionItem({
|
|
|
13524
14564
|
}
|
|
13525
14565
|
|
|
13526
14566
|
// src/components/withdrawals/WithdrawConfirmingView.tsx
|
|
13527
|
-
import { useState as
|
|
13528
|
-
import { Fragment as
|
|
14567
|
+
import { useState as useState31, useEffect as useEffect26 } from "react";
|
|
14568
|
+
import { Fragment as Fragment12, jsx as jsx56, jsxs as jsxs49 } from "react/jsx-runtime";
|
|
13529
14569
|
function truncateAddress4(addr) {
|
|
13530
14570
|
if (addr.length <= 12) return addr;
|
|
13531
14571
|
return `${addr.slice(0, 6)}...${addr.slice(-4)}`;
|
|
@@ -13538,9 +14578,9 @@ function WithdrawConfirmingView({
|
|
|
13538
14578
|
onViewTracker
|
|
13539
14579
|
}) {
|
|
13540
14580
|
const { colors: colors2, fonts, components } = useTheme();
|
|
13541
|
-
const [showButton, setShowButton] =
|
|
14581
|
+
const [showButton, setShowButton] = useState31(false);
|
|
13542
14582
|
const latestExecution = executions.length > 0 ? executions[executions.length - 1] : null;
|
|
13543
|
-
|
|
14583
|
+
useEffect26(() => {
|
|
13544
14584
|
if (latestExecution) return;
|
|
13545
14585
|
const timer = setTimeout(() => setShowButton(true), SHOW_BUTTON_DELAY_MS);
|
|
13546
14586
|
return () => clearTimeout(timer);
|
|
@@ -13548,11 +14588,11 @@ function WithdrawConfirmingView({
|
|
|
13548
14588
|
const btnRadius = components.button.borderRadius;
|
|
13549
14589
|
const btnBorder = `${components.button.borderWidth}px solid ${components.button.borderColor}`;
|
|
13550
14590
|
if (latestExecution) {
|
|
13551
|
-
return /* @__PURE__ */
|
|
13552
|
-
/* @__PURE__ */
|
|
13553
|
-
/* @__PURE__ */
|
|
13554
|
-
/* @__PURE__ */
|
|
13555
|
-
/* @__PURE__ */
|
|
14591
|
+
return /* @__PURE__ */ jsxs49(Fragment12, { children: [
|
|
14592
|
+
/* @__PURE__ */ jsx56(DepositHeader, { title: "Withdrawal Details", showClose: true, onClose }),
|
|
14593
|
+
/* @__PURE__ */ jsx56(DepositDetailContent, { execution: latestExecution, variant: "withdraw" }),
|
|
14594
|
+
/* @__PURE__ */ jsxs49("div", { className: "uf-flex uf-gap-2 uf-px-2 uf-pt-2", children: [
|
|
14595
|
+
/* @__PURE__ */ jsx56(
|
|
13556
14596
|
"button",
|
|
13557
14597
|
{
|
|
13558
14598
|
type: "button",
|
|
@@ -13568,7 +14608,7 @@ function WithdrawConfirmingView({
|
|
|
13568
14608
|
children: "Withdrawal History"
|
|
13569
14609
|
}
|
|
13570
14610
|
),
|
|
13571
|
-
/* @__PURE__ */
|
|
14611
|
+
/* @__PURE__ */ jsx56(
|
|
13572
14612
|
"button",
|
|
13573
14613
|
{
|
|
13574
14614
|
type: "button",
|
|
@@ -13585,7 +14625,7 @@ function WithdrawConfirmingView({
|
|
|
13585
14625
|
}
|
|
13586
14626
|
)
|
|
13587
14627
|
] }),
|
|
13588
|
-
/* @__PURE__ */
|
|
14628
|
+
/* @__PURE__ */ jsx56("div", { className: "uf-pt-3", children: /* @__PURE__ */ jsx56(
|
|
13589
14629
|
PoweredByUnifold,
|
|
13590
14630
|
{
|
|
13591
14631
|
color: colors2.foregroundMuted,
|
|
@@ -13594,15 +14634,15 @@ function WithdrawConfirmingView({
|
|
|
13594
14634
|
) })
|
|
13595
14635
|
] });
|
|
13596
14636
|
}
|
|
13597
|
-
return /* @__PURE__ */
|
|
13598
|
-
/* @__PURE__ */
|
|
13599
|
-
/* @__PURE__ */
|
|
13600
|
-
/* @__PURE__ */
|
|
14637
|
+
return /* @__PURE__ */ jsxs49(Fragment12, { children: [
|
|
14638
|
+
/* @__PURE__ */ jsx56(DepositHeader, { title: "Withdrawal Status", showClose: true, onClose }),
|
|
14639
|
+
/* @__PURE__ */ jsxs49("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-16 uf-px-4", children: [
|
|
14640
|
+
/* @__PURE__ */ jsx56(
|
|
13601
14641
|
"div",
|
|
13602
14642
|
{
|
|
13603
14643
|
className: "uf-w-20 uf-h-20 uf-rounded-full uf-flex uf-items-center uf-justify-center uf-mb-6",
|
|
13604
14644
|
style: { backgroundColor: `${colors2.primary}20` },
|
|
13605
|
-
children: /* @__PURE__ */
|
|
14645
|
+
children: /* @__PURE__ */ jsx56(
|
|
13606
14646
|
"svg",
|
|
13607
14647
|
{
|
|
13608
14648
|
width: "40",
|
|
@@ -13610,7 +14650,7 @@ function WithdrawConfirmingView({
|
|
|
13610
14650
|
viewBox: "0 0 24 24",
|
|
13611
14651
|
fill: "none",
|
|
13612
14652
|
className: "uf-animate-spin",
|
|
13613
|
-
children: /* @__PURE__ */
|
|
14653
|
+
children: /* @__PURE__ */ jsx56(
|
|
13614
14654
|
"path",
|
|
13615
14655
|
{
|
|
13616
14656
|
d: "M21 12a9 9 0 1 1-6.22-8.56",
|
|
@@ -13623,7 +14663,7 @@ function WithdrawConfirmingView({
|
|
|
13623
14663
|
)
|
|
13624
14664
|
}
|
|
13625
14665
|
),
|
|
13626
|
-
/* @__PURE__ */
|
|
14666
|
+
/* @__PURE__ */ jsx56(
|
|
13627
14667
|
"h3",
|
|
13628
14668
|
{
|
|
13629
14669
|
className: "uf-text-xl uf-mb-2",
|
|
@@ -13631,7 +14671,7 @@ function WithdrawConfirmingView({
|
|
|
13631
14671
|
children: "Checking Withdrawal"
|
|
13632
14672
|
}
|
|
13633
14673
|
),
|
|
13634
|
-
/* @__PURE__ */
|
|
14674
|
+
/* @__PURE__ */ jsxs49(
|
|
13635
14675
|
"p",
|
|
13636
14676
|
{
|
|
13637
14677
|
className: "uf-text-sm uf-text-center",
|
|
@@ -13647,7 +14687,7 @@ function WithdrawConfirmingView({
|
|
|
13647
14687
|
}
|
|
13648
14688
|
)
|
|
13649
14689
|
] }),
|
|
13650
|
-
showButton && /* @__PURE__ */
|
|
14690
|
+
showButton && /* @__PURE__ */ jsx56("div", { className: "uf-px-1 uf-pb-1", children: /* @__PURE__ */ jsx56(
|
|
13651
14691
|
"button",
|
|
13652
14692
|
{
|
|
13653
14693
|
type: "button",
|
|
@@ -13663,7 +14703,7 @@ function WithdrawConfirmingView({
|
|
|
13663
14703
|
children: "Withdrawal History"
|
|
13664
14704
|
}
|
|
13665
14705
|
) }),
|
|
13666
|
-
/* @__PURE__ */
|
|
14706
|
+
/* @__PURE__ */ jsx56("div", { className: "uf-pt-3", children: /* @__PURE__ */ jsx56(
|
|
13667
14707
|
PoweredByUnifold,
|
|
13668
14708
|
{
|
|
13669
14709
|
color: colors2.foregroundMuted,
|
|
@@ -13679,7 +14719,7 @@ import {
|
|
|
13679
14719
|
getWalletByChainType as getWalletByChainType4,
|
|
13680
14720
|
ActionType as ActionType6
|
|
13681
14721
|
} from "@unifold/core";
|
|
13682
|
-
import { Fragment as
|
|
14722
|
+
import { Fragment as Fragment13, jsx as jsx57, jsxs as jsxs50 } from "react/jsx-runtime";
|
|
13683
14723
|
var t9 = i18n.withdrawModal;
|
|
13684
14724
|
var getChainKey5 = (chainId, chainType) => `${chainType}:${chainId}`;
|
|
13685
14725
|
function WithdrawModal({
|
|
@@ -13701,14 +14741,14 @@ function WithdrawModal({
|
|
|
13701
14741
|
hideOverlay = false
|
|
13702
14742
|
}) {
|
|
13703
14743
|
const { colors: colors2, fonts, components } = useTheme();
|
|
13704
|
-
const [containerEl, setContainerEl] =
|
|
13705
|
-
const containerCallbackRef =
|
|
14744
|
+
const [containerEl, setContainerEl] = useState32(null);
|
|
14745
|
+
const containerCallbackRef = useCallback7((el) => {
|
|
13706
14746
|
setContainerEl(el);
|
|
13707
14747
|
}, []);
|
|
13708
|
-
const [resolvedTheme, setResolvedTheme] =
|
|
14748
|
+
const [resolvedTheme, setResolvedTheme] = useState32(
|
|
13709
14749
|
theme === "auto" ? "dark" : theme
|
|
13710
14750
|
);
|
|
13711
|
-
|
|
14751
|
+
useEffect27(() => {
|
|
13712
14752
|
if (theme === "auto") {
|
|
13713
14753
|
const mq = window.matchMedia("(prefers-color-scheme: dark)");
|
|
13714
14754
|
setResolvedTheme(mq.matches ? "dark" : "light");
|
|
@@ -13737,12 +14777,12 @@ function WithdrawModal({
|
|
|
13737
14777
|
publishableKey,
|
|
13738
14778
|
enabled: open
|
|
13739
14779
|
});
|
|
13740
|
-
const [selectedToken, setSelectedToken] =
|
|
13741
|
-
const [selectedChain, setSelectedChain] =
|
|
13742
|
-
const [detectedWallet, setDetectedWallet] =
|
|
14780
|
+
const [selectedToken, setSelectedToken] = useState32(null);
|
|
14781
|
+
const [selectedChain, setSelectedChain] = useState32(null);
|
|
14782
|
+
const [detectedWallet, setDetectedWallet] = useState32(null);
|
|
13743
14783
|
const connectedWalletName = detectedWallet?.name ?? null;
|
|
13744
14784
|
const isWalletMatch = !!detectedWallet;
|
|
13745
|
-
|
|
14785
|
+
useEffect27(() => {
|
|
13746
14786
|
if (!senderAddress || !open) {
|
|
13747
14787
|
setDetectedWallet(null);
|
|
13748
14788
|
return;
|
|
@@ -13755,10 +14795,10 @@ function WithdrawModal({
|
|
|
13755
14795
|
cancelled = true;
|
|
13756
14796
|
};
|
|
13757
14797
|
}, [senderAddress, sourceChainType, open]);
|
|
13758
|
-
const [view, setView] =
|
|
13759
|
-
const [withdrawDepositWalletId, setWithdrawDepositWalletId] =
|
|
13760
|
-
const [selectedExecution, setSelectedExecution] =
|
|
13761
|
-
const [submittedTxInfo, setSubmittedTxInfo] =
|
|
14798
|
+
const [view, setView] = useState32("form");
|
|
14799
|
+
const [withdrawDepositWalletId, setWithdrawDepositWalletId] = useState32();
|
|
14800
|
+
const [selectedExecution, setSelectedExecution] = useState32(null);
|
|
14801
|
+
const [submittedTxInfo, setSubmittedTxInfo] = useState32(null);
|
|
13762
14802
|
const { executions: realtimeExecutions } = useWithdrawPolling({
|
|
13763
14803
|
userId: externalUserId,
|
|
13764
14804
|
publishableKey,
|
|
@@ -13773,7 +14813,7 @@ function WithdrawModal({
|
|
|
13773
14813
|
refetchInterval: view === "tracker" || view === "detail" ? 5e3 : 15e3
|
|
13774
14814
|
});
|
|
13775
14815
|
const allWithdrawals = allWithdrawalsData?.data ?? [];
|
|
13776
|
-
const handleDepositWalletCreation =
|
|
14816
|
+
const handleDepositWalletCreation = useCallback7(async (params) => {
|
|
13777
14817
|
const { data: wallets } = await createDepositAddress2(
|
|
13778
14818
|
{
|
|
13779
14819
|
external_user_id: externalUserId,
|
|
@@ -13792,11 +14832,11 @@ function WithdrawModal({
|
|
|
13792
14832
|
setWithdrawDepositWalletId(depositWallet.id);
|
|
13793
14833
|
return depositWallet;
|
|
13794
14834
|
}, [externalUserId, publishableKey, sourceChainType]);
|
|
13795
|
-
const handleWithdrawSubmitted =
|
|
14835
|
+
const handleWithdrawSubmitted = useCallback7((txInfo) => {
|
|
13796
14836
|
setSubmittedTxInfo(txInfo);
|
|
13797
14837
|
setView("confirming");
|
|
13798
14838
|
}, []);
|
|
13799
|
-
|
|
14839
|
+
useEffect27(() => {
|
|
13800
14840
|
if (!destinationTokens.length || selectedToken) return;
|
|
13801
14841
|
const first = destinationTokens[0];
|
|
13802
14842
|
if (first?.chains.length > 0) {
|
|
@@ -13804,8 +14844,8 @@ function WithdrawModal({
|
|
|
13804
14844
|
setSelectedChain(first.chains[0]);
|
|
13805
14845
|
}
|
|
13806
14846
|
}, [destinationTokens, selectedToken]);
|
|
13807
|
-
const resetViewTimeoutRef =
|
|
13808
|
-
const handleClose =
|
|
14847
|
+
const resetViewTimeoutRef = useRef10(null);
|
|
14848
|
+
const handleClose = useCallback7(() => {
|
|
13809
14849
|
onOpenChange(false);
|
|
13810
14850
|
if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
|
|
13811
14851
|
resetViewTimeoutRef.current = setTimeout(() => {
|
|
@@ -13818,7 +14858,7 @@ function WithdrawModal({
|
|
|
13818
14858
|
resetViewTimeoutRef.current = null;
|
|
13819
14859
|
}, 200);
|
|
13820
14860
|
}, [onOpenChange]);
|
|
13821
|
-
|
|
14861
|
+
useLayoutEffect4(() => {
|
|
13822
14862
|
if (!open) return;
|
|
13823
14863
|
if (resetViewTimeoutRef.current) {
|
|
13824
14864
|
clearTimeout(resetViewTimeoutRef.current);
|
|
@@ -13831,17 +14871,17 @@ function WithdrawModal({
|
|
|
13831
14871
|
setSubmittedTxInfo(null);
|
|
13832
14872
|
setWithdrawDepositWalletId(void 0);
|
|
13833
14873
|
}, [open]);
|
|
13834
|
-
|
|
14874
|
+
useEffect27(() => () => {
|
|
13835
14875
|
if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
|
|
13836
14876
|
}, []);
|
|
13837
|
-
const handleTokenSymbolChange =
|
|
14877
|
+
const handleTokenSymbolChange = useCallback7((symbol) => {
|
|
13838
14878
|
const tok = destinationTokens.find((t11) => t11.symbol === symbol);
|
|
13839
14879
|
if (tok) {
|
|
13840
14880
|
setSelectedToken(tok);
|
|
13841
14881
|
if (tok.chains.length > 0) setSelectedChain(tok.chains[0]);
|
|
13842
14882
|
}
|
|
13843
14883
|
}, [destinationTokens]);
|
|
13844
|
-
const handleChainKeyChange =
|
|
14884
|
+
const handleChainKeyChange = useCallback7((chainKey) => {
|
|
13845
14885
|
if (!selectedToken) return;
|
|
13846
14886
|
const chain = selectedToken.chains.find((c) => getChainKey5(c.chain_id, c.chain_type) === chainKey);
|
|
13847
14887
|
if (chain) setSelectedChain(chain);
|
|
@@ -13849,8 +14889,8 @@ function WithdrawModal({
|
|
|
13849
14889
|
const isSourceSupported = sourceValidation?.isSupported ?? null;
|
|
13850
14890
|
const canWithdraw = !!onWithdraw || isWalletMatch;
|
|
13851
14891
|
const isAnyLoading = tokensLoading || isCheckingSourceToken;
|
|
13852
|
-
const withdrawPoweredByFooter = /* @__PURE__ */
|
|
13853
|
-
return /* @__PURE__ */
|
|
14892
|
+
const withdrawPoweredByFooter = /* @__PURE__ */ jsx57("div", { className: "uf-pt-3", children: /* @__PURE__ */ jsx57(PoweredByUnifold, { color: colors2.foregroundMuted, className: "uf-flex uf-justify-center uf-shrink-0" }) });
|
|
14893
|
+
return /* @__PURE__ */ jsx57(PortalContainerProvider, { value: hideOverlay ? containerEl : null, children: /* @__PURE__ */ jsx57(Dialog, { open: hideOverlay || open, onOpenChange: hideOverlay ? void 0 : handleClose, modal: !hideOverlay, children: /* @__PURE__ */ jsx57(
|
|
13854
14894
|
DialogContent,
|
|
13855
14895
|
{
|
|
13856
14896
|
ref: hideOverlay ? containerCallbackRef : void 0,
|
|
@@ -13859,7 +14899,7 @@ function WithdrawModal({
|
|
|
13859
14899
|
style: { backgroundColor: colors2.background },
|
|
13860
14900
|
onPointerDownOutside: (e) => e.preventDefault(),
|
|
13861
14901
|
onInteractOutside: (e) => e.preventDefault(),
|
|
13862
|
-
children: /* @__PURE__ */
|
|
14902
|
+
children: /* @__PURE__ */ jsx57(ThemeStyleInjector, { children: view === "confirming" && submittedTxInfo ? /* @__PURE__ */ jsx57(
|
|
13863
14903
|
WithdrawConfirmingView,
|
|
13864
14904
|
{
|
|
13865
14905
|
txInfo: submittedTxInfo,
|
|
@@ -13867,18 +14907,18 @@ function WithdrawModal({
|
|
|
13867
14907
|
onClose: handleClose,
|
|
13868
14908
|
onViewTracker: () => setView("tracker")
|
|
13869
14909
|
}
|
|
13870
|
-
) : view === "detail" && selectedExecution ? /* @__PURE__ */
|
|
13871
|
-
/* @__PURE__ */
|
|
14910
|
+
) : view === "detail" && selectedExecution ? /* @__PURE__ */ jsxs50(Fragment13, { children: [
|
|
14911
|
+
/* @__PURE__ */ jsx57(DepositHeader, { title: "Withdrawal Details", showBack: true, showClose: !hideOverlay, onBack: () => {
|
|
13872
14912
|
setSelectedExecution(null);
|
|
13873
14913
|
setView("tracker");
|
|
13874
14914
|
}, onClose: handleClose }),
|
|
13875
|
-
/* @__PURE__ */
|
|
14915
|
+
/* @__PURE__ */ jsx57(DepositDetailContent, { execution: selectedExecution, variant: "withdraw" }),
|
|
13876
14916
|
withdrawPoweredByFooter
|
|
13877
14917
|
] }) : view === "tracker" ? (
|
|
13878
14918
|
/* ---------- Tracker view: execution list ---------- */
|
|
13879
|
-
/* @__PURE__ */
|
|
13880
|
-
/* @__PURE__ */
|
|
13881
|
-
/* @__PURE__ */
|
|
14919
|
+
/* @__PURE__ */ jsxs50(Fragment13, { children: [
|
|
14920
|
+
/* @__PURE__ */ jsx57(DepositHeader, { title: "Withdrawal History", showBack: true, showClose: !hideOverlay, onBack: () => setView("form"), onClose: handleClose }),
|
|
14921
|
+
/* @__PURE__ */ jsx57("div", { className: "uf-flex uf-flex-col uf-gap-2", style: { minHeight: 200 }, children: allWithdrawals.length === 0 ? /* @__PURE__ */ jsx57("div", { className: "uf-flex uf-items-center uf-justify-center uf-py-8", children: /* @__PURE__ */ jsx57("p", { className: "uf-text-sm", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: "No withdrawals to track yet" }) }) : allWithdrawals.map((ex) => /* @__PURE__ */ jsx57(
|
|
13882
14922
|
WithdrawExecutionItem,
|
|
13883
14923
|
{
|
|
13884
14924
|
execution: ex,
|
|
@@ -13893,15 +14933,15 @@ function WithdrawModal({
|
|
|
13893
14933
|
] })
|
|
13894
14934
|
) : (
|
|
13895
14935
|
/* ---------- Form view (default) ---------- */
|
|
13896
|
-
/* @__PURE__ */
|
|
13897
|
-
/* @__PURE__ */
|
|
13898
|
-
/* @__PURE__ */
|
|
13899
|
-
isAnyLoading ? /* @__PURE__ */
|
|
13900
|
-
/* @__PURE__ */
|
|
13901
|
-
/* @__PURE__ */
|
|
13902
|
-
/* @__PURE__ */
|
|
13903
|
-
] }) : /* @__PURE__ */
|
|
13904
|
-
/* @__PURE__ */
|
|
14936
|
+
/* @__PURE__ */ jsxs50(Fragment13, { children: [
|
|
14937
|
+
/* @__PURE__ */ jsx57(DepositHeader, { title: modalTitle || t9.title, showClose: !hideOverlay, onClose: handleClose }),
|
|
14938
|
+
/* @__PURE__ */ jsxs50("div", { className: "uf-flex uf-flex-col uf-gap-3", children: [
|
|
14939
|
+
isAnyLoading ? /* @__PURE__ */ jsx57("div", { className: "uf-space-y-3", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx57("div", { className: "uf-w-full uf-bg-secondary uf-rounded-xl uf-p-3 uf-flex uf-items-center uf-animate-pulse", children: /* @__PURE__ */ jsx57("div", { className: "uf-bg-muted uf-rounded-lg uf-w-full uf-h-10" }) }, i)) }) : isSourceSupported === false ? /* @__PURE__ */ jsxs50("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
|
|
14940
|
+
/* @__PURE__ */ jsx57("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__ */ jsx57(AlertTriangle4, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
|
|
14941
|
+
/* @__PURE__ */ jsx57("h3", { className: "uf-text-lg uf-font-semibold uf-mb-2", style: { color: colors2.foreground, fontFamily: fonts.medium }, children: "Unsupported Source Token" }),
|
|
14942
|
+
/* @__PURE__ */ jsx57("p", { className: "uf-text-sm uf-max-w-[280px]", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: sourceValidation?.errorMessage })
|
|
14943
|
+
] }) : /* @__PURE__ */ jsxs50(Fragment13, { children: [
|
|
14944
|
+
/* @__PURE__ */ jsx57(
|
|
13905
14945
|
WithdrawDoubleInput,
|
|
13906
14946
|
{
|
|
13907
14947
|
tokens: destinationTokens,
|
|
@@ -13912,7 +14952,7 @@ function WithdrawModal({
|
|
|
13912
14952
|
isLoading: tokensLoading
|
|
13913
14953
|
}
|
|
13914
14954
|
),
|
|
13915
|
-
/* @__PURE__ */
|
|
14955
|
+
/* @__PURE__ */ jsx57(
|
|
13916
14956
|
WithdrawForm,
|
|
13917
14957
|
{
|
|
13918
14958
|
publishableKey,
|
|
@@ -13938,16 +14978,16 @@ function WithdrawModal({
|
|
|
13938
14978
|
onWithdrawError,
|
|
13939
14979
|
onDepositWalletCreation: handleDepositWalletCreation,
|
|
13940
14980
|
onWithdrawSubmitted: handleWithdrawSubmitted,
|
|
13941
|
-
footerLeft: /* @__PURE__ */
|
|
14981
|
+
footerLeft: /* @__PURE__ */ jsxs50(
|
|
13942
14982
|
"button",
|
|
13943
14983
|
{
|
|
13944
14984
|
onClick: () => setView("tracker"),
|
|
13945
14985
|
className: "uf-flex uf-items-center uf-gap-1 uf-transition-colors hover:uf-opacity-70",
|
|
13946
14986
|
style: { color: colors2.foregroundMuted },
|
|
13947
14987
|
children: [
|
|
13948
|
-
/* @__PURE__ */
|
|
14988
|
+
/* @__PURE__ */ jsx57(Clock5, { className: "uf-w-3.5 uf-h-3.5" }),
|
|
13949
14989
|
"Withdrawal History",
|
|
13950
|
-
/* @__PURE__ */
|
|
14990
|
+
/* @__PURE__ */ jsx57(ChevronRight14, { className: "uf-w-3 uf-h-3" })
|
|
13951
14991
|
]
|
|
13952
14992
|
}
|
|
13953
14993
|
)
|
|
@@ -13963,9 +15003,9 @@ function WithdrawModal({
|
|
|
13963
15003
|
}
|
|
13964
15004
|
|
|
13965
15005
|
// src/components/withdrawals/WithdrawTokenSelector.tsx
|
|
13966
|
-
import { useState as
|
|
15006
|
+
import { useState as useState33, useMemo as useMemo12 } from "react";
|
|
13967
15007
|
import { Search } from "lucide-react";
|
|
13968
|
-
import { jsx as
|
|
15008
|
+
import { jsx as jsx58, jsxs as jsxs51 } from "react/jsx-runtime";
|
|
13969
15009
|
var t10 = i18n.withdrawModal;
|
|
13970
15010
|
function WithdrawTokenSelector({
|
|
13971
15011
|
tokens,
|
|
@@ -13973,9 +15013,9 @@ function WithdrawTokenSelector({
|
|
|
13973
15013
|
onBack
|
|
13974
15014
|
}) {
|
|
13975
15015
|
const { themeClass, colors: colors2, fonts, components } = useTheme();
|
|
13976
|
-
const [searchQuery, setSearchQuery] =
|
|
13977
|
-
const [hoveredKey, setHoveredKey] =
|
|
13978
|
-
const allOptions =
|
|
15016
|
+
const [searchQuery, setSearchQuery] = useState33("");
|
|
15017
|
+
const [hoveredKey, setHoveredKey] = useState33(null);
|
|
15018
|
+
const allOptions = useMemo12(() => {
|
|
13979
15019
|
const options = [];
|
|
13980
15020
|
tokens.forEach((token) => {
|
|
13981
15021
|
token.chains.forEach((chain) => {
|
|
@@ -13984,21 +15024,21 @@ function WithdrawTokenSelector({
|
|
|
13984
15024
|
});
|
|
13985
15025
|
return options;
|
|
13986
15026
|
}, [tokens]);
|
|
13987
|
-
const filteredOptions =
|
|
15027
|
+
const filteredOptions = useMemo12(() => {
|
|
13988
15028
|
if (!searchQuery.trim()) return allOptions;
|
|
13989
15029
|
const query = searchQuery.toLowerCase();
|
|
13990
15030
|
return allOptions.filter(
|
|
13991
15031
|
({ token, chain }) => token.symbol.toLowerCase().includes(query) || token.name.toLowerCase().includes(query) || chain.chain_name.toLowerCase().includes(query)
|
|
13992
15032
|
);
|
|
13993
15033
|
}, [allOptions, searchQuery]);
|
|
13994
|
-
return /* @__PURE__ */
|
|
15034
|
+
return /* @__PURE__ */ jsxs51(
|
|
13995
15035
|
"div",
|
|
13996
15036
|
{
|
|
13997
15037
|
className: "uf-flex uf-flex-col",
|
|
13998
15038
|
style: { minHeight: 0, flex: 1 },
|
|
13999
15039
|
children: [
|
|
14000
|
-
/* @__PURE__ */
|
|
14001
|
-
/* @__PURE__ */
|
|
15040
|
+
/* @__PURE__ */ jsxs51("div", { className: "uf-pb-3", children: [
|
|
15041
|
+
/* @__PURE__ */ jsx58(
|
|
14002
15042
|
"style",
|
|
14003
15043
|
{
|
|
14004
15044
|
dangerouslySetInnerHTML: {
|
|
@@ -14006,15 +15046,15 @@ function WithdrawTokenSelector({
|
|
|
14006
15046
|
}
|
|
14007
15047
|
}
|
|
14008
15048
|
),
|
|
14009
|
-
/* @__PURE__ */
|
|
14010
|
-
/* @__PURE__ */
|
|
15049
|
+
/* @__PURE__ */ jsxs51("div", { style: { position: "relative" }, children: [
|
|
15050
|
+
/* @__PURE__ */ jsx58(
|
|
14011
15051
|
Search,
|
|
14012
15052
|
{
|
|
14013
15053
|
className: "uf-absolute uf-left-3 uf-top-1/2 uf--translate-y-1/2 uf-w-4 uf-h-4",
|
|
14014
15054
|
style: { color: components.search.placeholderColor }
|
|
14015
15055
|
}
|
|
14016
15056
|
),
|
|
14017
|
-
/* @__PURE__ */
|
|
15057
|
+
/* @__PURE__ */ jsx58(
|
|
14018
15058
|
"input",
|
|
14019
15059
|
{
|
|
14020
15060
|
type: "text",
|
|
@@ -14033,7 +15073,7 @@ function WithdrawTokenSelector({
|
|
|
14033
15073
|
)
|
|
14034
15074
|
] })
|
|
14035
15075
|
] }),
|
|
14036
|
-
/* @__PURE__ */
|
|
15076
|
+
/* @__PURE__ */ jsx58(
|
|
14037
15077
|
"div",
|
|
14038
15078
|
{
|
|
14039
15079
|
className: "uf-text-xs uf-mb-2",
|
|
@@ -14044,12 +15084,12 @@ function WithdrawTokenSelector({
|
|
|
14044
15084
|
children: t10.selectToken
|
|
14045
15085
|
}
|
|
14046
15086
|
),
|
|
14047
|
-
/* @__PURE__ */
|
|
15087
|
+
/* @__PURE__ */ jsx58(
|
|
14048
15088
|
"div",
|
|
14049
15089
|
{
|
|
14050
15090
|
className: "uf-flex-1 uf-overflow-y-auto uf-min-h-0 uf--mx-6 uf-px-6 uf-pb-3",
|
|
14051
15091
|
style: { scrollbarWidth: "none" },
|
|
14052
|
-
children: filteredOptions.length === 0 ? /* @__PURE__ */
|
|
15092
|
+
children: filteredOptions.length === 0 ? /* @__PURE__ */ jsx58(
|
|
14053
15093
|
"div",
|
|
14054
15094
|
{
|
|
14055
15095
|
style: {
|
|
@@ -14061,9 +15101,9 @@ function WithdrawTokenSelector({
|
|
|
14061
15101
|
},
|
|
14062
15102
|
children: t10.noTokensAvailable
|
|
14063
15103
|
}
|
|
14064
|
-
) : /* @__PURE__ */
|
|
15104
|
+
) : /* @__PURE__ */ jsx58("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: filteredOptions.map(({ token, chain }) => {
|
|
14065
15105
|
const key = `${token.symbol}-${chain.chain_type}:${chain.chain_id}`;
|
|
14066
|
-
return /* @__PURE__ */
|
|
15106
|
+
return /* @__PURE__ */ jsxs51(
|
|
14067
15107
|
"button",
|
|
14068
15108
|
{
|
|
14069
15109
|
type: "button",
|
|
@@ -14084,8 +15124,8 @@ function WithdrawTokenSelector({
|
|
|
14084
15124
|
backgroundColor: hoveredKey === key ? colors2.cardHover : "transparent"
|
|
14085
15125
|
},
|
|
14086
15126
|
children: [
|
|
14087
|
-
/* @__PURE__ */
|
|
14088
|
-
/* @__PURE__ */
|
|
15127
|
+
/* @__PURE__ */ jsxs51("div", { style: { position: "relative", flexShrink: 0 }, children: [
|
|
15128
|
+
/* @__PURE__ */ jsx58(
|
|
14089
15129
|
"img",
|
|
14090
15130
|
{
|
|
14091
15131
|
src: token.icon_url,
|
|
@@ -14096,7 +15136,7 @@ function WithdrawTokenSelector({
|
|
|
14096
15136
|
className: "uf-rounded-full"
|
|
14097
15137
|
}
|
|
14098
15138
|
),
|
|
14099
|
-
/* @__PURE__ */
|
|
15139
|
+
/* @__PURE__ */ jsx58(
|
|
14100
15140
|
"div",
|
|
14101
15141
|
{
|
|
14102
15142
|
style: {
|
|
@@ -14104,7 +15144,7 @@ function WithdrawTokenSelector({
|
|
|
14104
15144
|
bottom: -4,
|
|
14105
15145
|
right: -4
|
|
14106
15146
|
},
|
|
14107
|
-
children: /* @__PURE__ */
|
|
15147
|
+
children: /* @__PURE__ */ jsx58(
|
|
14108
15148
|
"img",
|
|
14109
15149
|
{
|
|
14110
15150
|
src: chain.icon_url,
|
|
@@ -14118,8 +15158,8 @@ function WithdrawTokenSelector({
|
|
|
14118
15158
|
}
|
|
14119
15159
|
)
|
|
14120
15160
|
] }),
|
|
14121
|
-
/* @__PURE__ */
|
|
14122
|
-
/* @__PURE__ */
|
|
15161
|
+
/* @__PURE__ */ jsxs51("div", { style: { flex: 1, minWidth: 0 }, children: [
|
|
15162
|
+
/* @__PURE__ */ jsx58(
|
|
14123
15163
|
"div",
|
|
14124
15164
|
{
|
|
14125
15165
|
style: {
|
|
@@ -14131,7 +15171,7 @@ function WithdrawTokenSelector({
|
|
|
14131
15171
|
children: token.symbol
|
|
14132
15172
|
}
|
|
14133
15173
|
),
|
|
14134
|
-
/* @__PURE__ */
|
|
15174
|
+
/* @__PURE__ */ jsxs51(
|
|
14135
15175
|
"div",
|
|
14136
15176
|
{
|
|
14137
15177
|
style: {
|
|
@@ -14154,7 +15194,7 @@ function WithdrawTokenSelector({
|
|
|
14154
15194
|
}) })
|
|
14155
15195
|
}
|
|
14156
15196
|
),
|
|
14157
|
-
/* @__PURE__ */
|
|
15197
|
+
/* @__PURE__ */ jsx58("div", { className: "uf-pt-3 uf-pb-2 uf-shrink-0", children: /* @__PURE__ */ jsx58(
|
|
14158
15198
|
PoweredByUnifold,
|
|
14159
15199
|
{
|
|
14160
15200
|
color: colors2.foregroundMuted,
|
|
@@ -14168,6 +15208,7 @@ function WithdrawTokenSelector({
|
|
|
14168
15208
|
export {
|
|
14169
15209
|
Button,
|
|
14170
15210
|
BuyWithCard,
|
|
15211
|
+
CheckoutModal,
|
|
14171
15212
|
ConfirmingView,
|
|
14172
15213
|
CurrencyListItem,
|
|
14173
15214
|
CurrencyListSection,
|
|
@@ -14191,6 +15232,7 @@ export {
|
|
|
14191
15232
|
DialogPortal,
|
|
14192
15233
|
DialogTitle,
|
|
14193
15234
|
DialogTrigger,
|
|
15235
|
+
HYPERCORE_CHAIN_ID,
|
|
14194
15236
|
Select,
|
|
14195
15237
|
SelectContent,
|
|
14196
15238
|
SelectGroup,
|
|
@@ -14222,14 +15264,18 @@ export {
|
|
|
14222
15264
|
defaultColors,
|
|
14223
15265
|
detectBrowserWallet,
|
|
14224
15266
|
getColors,
|
|
15267
|
+
isHypercoreChain,
|
|
14225
15268
|
mergeColors,
|
|
14226
15269
|
resolveComponentTokens,
|
|
14227
15270
|
sendEvmWithdraw,
|
|
15271
|
+
sendHypercoreWithdraw,
|
|
14228
15272
|
sendSolanaWithdraw,
|
|
14229
15273
|
truncateAddress,
|
|
14230
15274
|
useAddressBalance,
|
|
14231
15275
|
useAllowedCountry,
|
|
14232
15276
|
useDepositPolling,
|
|
15277
|
+
useDepositQuote,
|
|
15278
|
+
usePaymentIntent,
|
|
14233
15279
|
useSourceTokenValidation,
|
|
14234
15280
|
useSupportedDestinationTokens,
|
|
14235
15281
|
useTheme,
|