@unifold/ui-web 0.1.42 → 0.1.44
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1758 -494
- package/dist/index.mjs +1758 -494
- package/dist/styles-base.css +1 -1
- package/dist/styles.css +1 -1
- package/package.json +5 -5
package/dist/index.mjs
CHANGED
|
@@ -34394,7 +34394,7 @@ var require_jsx_runtime = __commonJS({
|
|
|
34394
34394
|
});
|
|
34395
34395
|
|
|
34396
34396
|
// src/unifold.tsx
|
|
34397
|
-
var
|
|
34397
|
+
var import_react33 = __toESM(require_react());
|
|
34398
34398
|
var import_client = __toESM(require_client());
|
|
34399
34399
|
|
|
34400
34400
|
// ../connect-react/dist/index.mjs
|
|
@@ -37214,17 +37214,19 @@ var React272 = __toESM(require_react(), 1);
|
|
|
37214
37214
|
var import_jsx_runtime69 = __toESM(require_jsx_runtime(), 1);
|
|
37215
37215
|
var import_jsx_runtime70 = __toESM(require_jsx_runtime(), 1);
|
|
37216
37216
|
var import_react27 = __toESM(require_react(), 1);
|
|
37217
|
-
var import_react28 = __toESM(require_react(), 1);
|
|
37218
37217
|
var import_jsx_runtime71 = __toESM(require_jsx_runtime(), 1);
|
|
37218
|
+
var import_react28 = __toESM(require_react(), 1);
|
|
37219
37219
|
var import_react29 = __toESM(require_react(), 1);
|
|
37220
37220
|
var import_jsx_runtime72 = __toESM(require_jsx_runtime(), 1);
|
|
37221
|
-
var import_jsx_runtime73 = __toESM(require_jsx_runtime(), 1);
|
|
37222
37221
|
var import_react30 = __toESM(require_react(), 1);
|
|
37222
|
+
var import_jsx_runtime73 = __toESM(require_jsx_runtime(), 1);
|
|
37223
37223
|
var import_jsx_runtime74 = __toESM(require_jsx_runtime(), 1);
|
|
37224
|
-
var import_jsx_runtime75 = __toESM(require_jsx_runtime(), 1);
|
|
37225
37224
|
var import_react31 = __toESM(require_react(), 1);
|
|
37225
|
+
var import_jsx_runtime75 = __toESM(require_jsx_runtime(), 1);
|
|
37226
37226
|
var import_jsx_runtime76 = __toESM(require_jsx_runtime(), 1);
|
|
37227
|
+
var import_react32 = __toESM(require_react(), 1);
|
|
37227
37228
|
var import_jsx_runtime77 = __toESM(require_jsx_runtime(), 1);
|
|
37229
|
+
var import_jsx_runtime78 = __toESM(require_jsx_runtime(), 1);
|
|
37228
37230
|
var __create2 = Object.create;
|
|
37229
37231
|
var __defProp2 = Object.defineProperty;
|
|
37230
37232
|
var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
|
|
@@ -38488,6 +38490,10 @@ var ArrowLeft = createLucideIcon("ArrowLeft", [
|
|
|
38488
38490
|
["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
|
|
38489
38491
|
["path", { d: "M19 12H5", key: "x3x0zl" }]
|
|
38490
38492
|
]);
|
|
38493
|
+
var ArrowRight = createLucideIcon("ArrowRight", [
|
|
38494
|
+
["path", { d: "M5 12h14", key: "1ays0h" }],
|
|
38495
|
+
["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
|
|
38496
|
+
]);
|
|
38491
38497
|
var ArrowUpDown = createLucideIcon("ArrowUpDown", [
|
|
38492
38498
|
["path", { d: "m21 16-4 4-4-4", key: "f6ql7i" }],
|
|
38493
38499
|
["path", { d: "M17 20V4", key: "1ejh1v" }],
|
|
@@ -43482,6 +43488,28 @@ async function verifyRecipientAddress(request, publishableKey) {
|
|
|
43482
43488
|
}
|
|
43483
43489
|
return response.json();
|
|
43484
43490
|
}
|
|
43491
|
+
async function checkHypercoreActivation(request, publishableKey) {
|
|
43492
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
43493
|
+
validatePublishableKey(pk);
|
|
43494
|
+
const response = await fetch(
|
|
43495
|
+
`${API_BASE_URL}/v1/public/addresses/hypercore/activation`,
|
|
43496
|
+
{
|
|
43497
|
+
method: "POST",
|
|
43498
|
+
headers: {
|
|
43499
|
+
accept: "application/json",
|
|
43500
|
+
"x-publishable-key": pk,
|
|
43501
|
+
"Content-Type": "application/json"
|
|
43502
|
+
},
|
|
43503
|
+
body: JSON.stringify(request)
|
|
43504
|
+
}
|
|
43505
|
+
);
|
|
43506
|
+
if (!response.ok) {
|
|
43507
|
+
throw new Error(
|
|
43508
|
+
`HyperCore activation check failed: ${response.statusText}`
|
|
43509
|
+
);
|
|
43510
|
+
}
|
|
43511
|
+
return response.json();
|
|
43512
|
+
}
|
|
43485
43513
|
async function getExchanges(query, publishableKey) {
|
|
43486
43514
|
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
43487
43515
|
validatePublishableKey(pk);
|
|
@@ -43566,6 +43594,119 @@ async function sendSolanaTransaction(request, publishableKey) {
|
|
|
43566
43594
|
}
|
|
43567
43595
|
return response.json();
|
|
43568
43596
|
}
|
|
43597
|
+
async function retrievePaymentIntent(clientSecret, publishableKey) {
|
|
43598
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
43599
|
+
validatePublishableKey(pk);
|
|
43600
|
+
const response = await fetch(
|
|
43601
|
+
`${API_BASE_URL}/v1/public/payment_intents/retrieve`,
|
|
43602
|
+
{
|
|
43603
|
+
method: "POST",
|
|
43604
|
+
headers: {
|
|
43605
|
+
accept: "application/json",
|
|
43606
|
+
"x-publishable-key": pk,
|
|
43607
|
+
"Content-Type": "application/json"
|
|
43608
|
+
},
|
|
43609
|
+
body: JSON.stringify({ client_secret: clientSecret })
|
|
43610
|
+
}
|
|
43611
|
+
);
|
|
43612
|
+
if (!response.ok) {
|
|
43613
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
43614
|
+
throw new Error(
|
|
43615
|
+
`Failed to retrieve payment intent: ${error.message || response.statusText}`
|
|
43616
|
+
);
|
|
43617
|
+
}
|
|
43618
|
+
return response.json();
|
|
43619
|
+
}
|
|
43620
|
+
async function listPaymentIntentExecutions(clientSecret, publishableKey) {
|
|
43621
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
43622
|
+
validatePublishableKey(pk);
|
|
43623
|
+
const response = await fetch(
|
|
43624
|
+
`${API_BASE_URL}/v1/public/payment_intents/executions`,
|
|
43625
|
+
{
|
|
43626
|
+
method: "POST",
|
|
43627
|
+
headers: {
|
|
43628
|
+
accept: "application/json",
|
|
43629
|
+
"x-publishable-key": pk,
|
|
43630
|
+
"Content-Type": "application/json"
|
|
43631
|
+
},
|
|
43632
|
+
body: JSON.stringify({ client_secret: clientSecret })
|
|
43633
|
+
}
|
|
43634
|
+
);
|
|
43635
|
+
if (!response.ok) {
|
|
43636
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
43637
|
+
throw new Error(
|
|
43638
|
+
`Failed to list payment intent executions: ${error.message || response.statusText}`
|
|
43639
|
+
);
|
|
43640
|
+
}
|
|
43641
|
+
return response.json();
|
|
43642
|
+
}
|
|
43643
|
+
async function getDepositQuote(request, publishableKey) {
|
|
43644
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
43645
|
+
validatePublishableKey(pk);
|
|
43646
|
+
const response = await fetch(`${API_BASE_URL}/v1/public/quotes`, {
|
|
43647
|
+
method: "POST",
|
|
43648
|
+
headers: {
|
|
43649
|
+
accept: "application/json",
|
|
43650
|
+
"x-publishable-key": pk,
|
|
43651
|
+
"Content-Type": "application/json"
|
|
43652
|
+
},
|
|
43653
|
+
body: JSON.stringify(request)
|
|
43654
|
+
});
|
|
43655
|
+
if (!response.ok) {
|
|
43656
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
43657
|
+
throw new Error(
|
|
43658
|
+
`Failed to get deposit quote: ${error.message || response.statusText}`
|
|
43659
|
+
);
|
|
43660
|
+
}
|
|
43661
|
+
const json = await response.json();
|
|
43662
|
+
return json.data;
|
|
43663
|
+
}
|
|
43664
|
+
async function buildHypercoreTransaction(request, publishableKey) {
|
|
43665
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
43666
|
+
validatePublishableKey(pk);
|
|
43667
|
+
const response = await fetch(
|
|
43668
|
+
`${API_BASE_URL}/v1/public/transactions/hypercore/build`,
|
|
43669
|
+
{
|
|
43670
|
+
method: "POST",
|
|
43671
|
+
headers: {
|
|
43672
|
+
accept: "application/json",
|
|
43673
|
+
"x-publishable-key": pk,
|
|
43674
|
+
"Content-Type": "application/json"
|
|
43675
|
+
},
|
|
43676
|
+
body: JSON.stringify(request)
|
|
43677
|
+
}
|
|
43678
|
+
);
|
|
43679
|
+
if (!response.ok) {
|
|
43680
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
43681
|
+
throw new Error(
|
|
43682
|
+
`Failed to build HyperCore transaction: ${error.message || response.statusText}`
|
|
43683
|
+
);
|
|
43684
|
+
}
|
|
43685
|
+
return response.json();
|
|
43686
|
+
}
|
|
43687
|
+
async function sendHypercoreTransaction(request, publishableKey) {
|
|
43688
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
43689
|
+
validatePublishableKey(pk);
|
|
43690
|
+
const response = await fetch(
|
|
43691
|
+
`${API_BASE_URL}/v1/public/transactions/hypercore/send`,
|
|
43692
|
+
{
|
|
43693
|
+
method: "POST",
|
|
43694
|
+
headers: {
|
|
43695
|
+
accept: "application/json",
|
|
43696
|
+
"x-publishable-key": pk,
|
|
43697
|
+
"Content-Type": "application/json"
|
|
43698
|
+
},
|
|
43699
|
+
body: JSON.stringify(request)
|
|
43700
|
+
}
|
|
43701
|
+
);
|
|
43702
|
+
if (!response.ok) {
|
|
43703
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
43704
|
+
throw new Error(
|
|
43705
|
+
`Failed to send HyperCore transaction: ${error.message || response.statusText}`
|
|
43706
|
+
);
|
|
43707
|
+
}
|
|
43708
|
+
return response.json();
|
|
43709
|
+
}
|
|
43569
43710
|
var REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy");
|
|
43570
43711
|
var use = React25[" use ".trim().toString()];
|
|
43571
43712
|
function isPromiseLike(value) {
|
|
@@ -48922,6 +49063,7 @@ var CUTOFF_BUFFER_MS = 6e4;
|
|
|
48922
49063
|
function useDepositPolling({
|
|
48923
49064
|
userId,
|
|
48924
49065
|
publishableKey,
|
|
49066
|
+
clientSecret,
|
|
48925
49067
|
depositConfirmationMode = "auto_ui",
|
|
48926
49068
|
depositWalletId,
|
|
48927
49069
|
enabled = true,
|
|
@@ -48979,11 +49121,12 @@ function useDepositPolling({
|
|
|
48979
49121
|
depositWalletId
|
|
48980
49122
|
]);
|
|
48981
49123
|
(0, import_react10.useEffect)(() => {
|
|
48982
|
-
if (!
|
|
49124
|
+
if (!enabled) return;
|
|
49125
|
+
if (!clientSecret && !userId) return;
|
|
48983
49126
|
const modalOpenedAt = modalOpenedAtRef.current;
|
|
48984
49127
|
const poll = async () => {
|
|
48985
49128
|
try {
|
|
48986
|
-
const response = await queryExecutions(userId, publishableKey, ActionType.Deposit);
|
|
49129
|
+
const response = clientSecret ? await listPaymentIntentExecutions(clientSecret, publishableKey) : await queryExecutions(userId, publishableKey, ActionType.Deposit);
|
|
48987
49130
|
const cutoff = new Date(modalOpenedAt.getTime() - CUTOFF_BUFFER_MS);
|
|
48988
49131
|
const sortedExecutions = [...response.data].sort((a, b) => {
|
|
48989
49132
|
const timeA = a.created_at ? new Date(a.created_at).getTime() : 0;
|
|
@@ -49067,7 +49210,7 @@ function useDepositPolling({
|
|
|
49067
49210
|
clearInterval(pollInterval);
|
|
49068
49211
|
setIsPolling(false);
|
|
49069
49212
|
};
|
|
49070
|
-
}, [userId, publishableKey, enabled]);
|
|
49213
|
+
}, [userId, publishableKey, clientSecret, enabled]);
|
|
49071
49214
|
(0, import_react10.useEffect)(() => {
|
|
49072
49215
|
if (!pollingEnabled || !depositWalletId) return;
|
|
49073
49216
|
const triggerPoll = async () => {
|
|
@@ -55576,6 +55719,7 @@ var parseChainKey = (chainKey) => {
|
|
|
55576
55719
|
function TransferCryptoSingleInput({
|
|
55577
55720
|
userId,
|
|
55578
55721
|
publishableKey,
|
|
55722
|
+
clientSecret,
|
|
55579
55723
|
recipientAddress,
|
|
55580
55724
|
destinationChainType,
|
|
55581
55725
|
destinationChainId,
|
|
@@ -55588,7 +55732,9 @@ function TransferCryptoSingleInput({
|
|
|
55588
55732
|
onExecutionsChange,
|
|
55589
55733
|
onDepositSuccess,
|
|
55590
55734
|
onDepositError,
|
|
55591
|
-
wallets: externalWallets
|
|
55735
|
+
wallets: externalWallets,
|
|
55736
|
+
onSourceTokenChange,
|
|
55737
|
+
checkoutQuote
|
|
55592
55738
|
}) {
|
|
55593
55739
|
const { themeClass, colors: colors2, fonts, components } = useTheme();
|
|
55594
55740
|
const isDarkMode = themeClass.includes("uf-dark");
|
|
@@ -55655,12 +55801,28 @@ function TransferCryptoSingleInput({
|
|
|
55655
55801
|
} = useDepositPolling({
|
|
55656
55802
|
userId,
|
|
55657
55803
|
publishableKey,
|
|
55804
|
+
clientSecret,
|
|
55658
55805
|
depositConfirmationMode,
|
|
55659
55806
|
depositWalletId: currentWallet?.id,
|
|
55660
55807
|
enabled: true,
|
|
55661
55808
|
onDepositSuccess,
|
|
55662
55809
|
onDepositError
|
|
55663
55810
|
});
|
|
55811
|
+
(0, import_react16.useEffect)(() => {
|
|
55812
|
+
if (!onSourceTokenChange || !token || !chain || !initialSelectionDone) return;
|
|
55813
|
+
const { chainType, chainId } = parseChainKey(chain);
|
|
55814
|
+
const matchedToken = supportedTokens.find((t11) => t11.symbol === token);
|
|
55815
|
+
const matchedChain = matchedToken?.chains.find(
|
|
55816
|
+
(c) => c.chain_type === chainType && c.chain_id === chainId
|
|
55817
|
+
);
|
|
55818
|
+
onSourceTokenChange({
|
|
55819
|
+
symbol: token,
|
|
55820
|
+
chainType,
|
|
55821
|
+
chainId,
|
|
55822
|
+
tokenAddress: matchedChain?.token_address ?? "",
|
|
55823
|
+
minimumDepositAmountUsd: matchedChain?.minimum_deposit_amount_usd ?? 0
|
|
55824
|
+
});
|
|
55825
|
+
}, [token, chain, initialSelectionDone, onSourceTokenChange, supportedTokens]);
|
|
55664
55826
|
(0, import_react16.useEffect)(() => {
|
|
55665
55827
|
if (onExecutionsChange) {
|
|
55666
55828
|
onExecutionsChange(depositExecutions);
|
|
@@ -55807,6 +55969,53 @@ function TransferCryptoSingleInput({
|
|
|
55807
55969
|
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { children: "Retrying automatically every 5 seconds..." })
|
|
55808
55970
|
] })
|
|
55809
55971
|
] }),
|
|
55972
|
+
checkoutQuote && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
55973
|
+
"div",
|
|
55974
|
+
{
|
|
55975
|
+
className: "uf-rounded-xl uf-px-3 uf-py-2 uf-flex uf-items-center uf-justify-between",
|
|
55976
|
+
style: {
|
|
55977
|
+
backgroundColor: components.card.backgroundColor,
|
|
55978
|
+
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`,
|
|
55979
|
+
borderRadius: components.card.borderRadius
|
|
55980
|
+
},
|
|
55981
|
+
children: [
|
|
55982
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
55983
|
+
"span",
|
|
55984
|
+
{
|
|
55985
|
+
className: "uf-text-xs",
|
|
55986
|
+
style: { color: components.card.subtitleColor, fontFamily: fonts.regular },
|
|
55987
|
+
children: "You send"
|
|
55988
|
+
}
|
|
55989
|
+
),
|
|
55990
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
55991
|
+
"span",
|
|
55992
|
+
{
|
|
55993
|
+
className: "uf-text-sm uf-font-semibold",
|
|
55994
|
+
style: { color: components.card.titleColor, fontFamily: fonts.semibold },
|
|
55995
|
+
children: [
|
|
55996
|
+
(Number(checkoutQuote.sourceAmount) / 10 ** checkoutQuote.sourceTokenDecimals).toFixed(
|
|
55997
|
+
Math.min(checkoutQuote.sourceTokenDecimals, 6)
|
|
55998
|
+
),
|
|
55999
|
+
" ",
|
|
56000
|
+
checkoutQuote.sourceTokenSymbol,
|
|
56001
|
+
checkoutQuote.sourceAmountUsd && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
56002
|
+
"span",
|
|
56003
|
+
{
|
|
56004
|
+
className: "uf-text-xs uf-font-normal uf-ml-1.5",
|
|
56005
|
+
style: { color: components.card.subtitleColor },
|
|
56006
|
+
children: [
|
|
56007
|
+
"($",
|
|
56008
|
+
checkoutQuote.sourceAmountUsd,
|
|
56009
|
+
")"
|
|
56010
|
+
]
|
|
56011
|
+
}
|
|
56012
|
+
)
|
|
56013
|
+
]
|
|
56014
|
+
}
|
|
56015
|
+
)
|
|
56016
|
+
]
|
|
56017
|
+
}
|
|
56018
|
+
),
|
|
55810
56019
|
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-pt-2", children: [
|
|
55811
56020
|
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1", style: { color: components.card.labelColor }, children: "Intent address" }),
|
|
55812
56021
|
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "uf-shadow-lg", style: { borderRadius: components.card.borderRadius, border: `${components.card.borderWidth}px solid ${components.card.borderColor}` }, children: loading || tokensLoading || !initialSelectionDone ? (
|
|
@@ -56628,9 +56837,16 @@ function SelectTokenView({
|
|
|
56628
56837
|
onBack,
|
|
56629
56838
|
onClose,
|
|
56630
56839
|
onDisconnectWallet,
|
|
56631
|
-
isDisconnectingWallet = false
|
|
56840
|
+
isDisconnectingWallet = false,
|
|
56841
|
+
checkoutAmountUsd,
|
|
56842
|
+
checkoutReceivedUsd
|
|
56632
56843
|
}) {
|
|
56633
56844
|
const { colors: colors2, fonts, components } = useTheme();
|
|
56845
|
+
const isCheckout = !!checkoutAmountUsd;
|
|
56846
|
+
const headerSubtitle = isCheckout ? parseFloat(checkoutReceivedUsd || "0") > 0 ? `$${checkoutReceivedUsd} / $${checkoutAmountUsd} received` : `Amount due: $${checkoutAmountUsd}` : formatBalanceDisplay(
|
|
56847
|
+
`$${totalBalanceUsd || "0.00"}`,
|
|
56848
|
+
projectName
|
|
56849
|
+
);
|
|
56634
56850
|
return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
|
|
56635
56851
|
"div",
|
|
56636
56852
|
{
|
|
@@ -56639,11 +56855,8 @@ function SelectTokenView({
|
|
|
56639
56855
|
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
|
|
56640
56856
|
DepositHeader,
|
|
56641
56857
|
{
|
|
56642
|
-
title: "Select Token",
|
|
56643
|
-
subtitle:
|
|
56644
|
-
`$${totalBalanceUsd || "0.00"}`,
|
|
56645
|
-
projectName
|
|
56646
|
-
),
|
|
56858
|
+
title: isCheckout ? "Select Token" : "Select Token",
|
|
56859
|
+
subtitle: headerSubtitle,
|
|
56647
56860
|
showBack: true,
|
|
56648
56861
|
onBack,
|
|
56649
56862
|
onClose
|
|
@@ -56871,10 +57084,19 @@ function EnterAmountView({
|
|
|
56871
57084
|
onReview,
|
|
56872
57085
|
onBack,
|
|
56873
57086
|
onClose,
|
|
56874
|
-
quickSelectMode
|
|
57087
|
+
quickSelectMode,
|
|
57088
|
+
checkoutAmountUsd,
|
|
57089
|
+
checkoutReceivedUsd
|
|
56875
57090
|
}) {
|
|
56876
57091
|
const { colors: colors2, fonts, components } = useTheme();
|
|
57092
|
+
const isCheckout = !!checkoutAmountUsd;
|
|
56877
57093
|
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}`;
|
|
57094
|
+
const checkoutRemainingUsd = isCheckout ? Math.max(
|
|
57095
|
+
parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0"),
|
|
57096
|
+
0
|
|
57097
|
+
).toFixed(2) : null;
|
|
57098
|
+
const headerTitle = isCheckout ? `Pay $${checkoutRemainingUsd}` : "Enter Amount";
|
|
57099
|
+
const headerSubtitle = isCheckout ? parseFloat(checkoutReceivedUsd || "0") > 0 ? `$${checkoutReceivedUsd} / $${checkoutAmountUsd} received` : null : balanceSubtitle;
|
|
56878
57100
|
const usePercentageChips = quickSelectMode === "percentage" && maxUsdAmount > 0;
|
|
56879
57101
|
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";
|
|
56880
57102
|
return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
@@ -56888,14 +57110,27 @@ function EnterAmountView({
|
|
|
56888
57110
|
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
56889
57111
|
DepositHeader,
|
|
56890
57112
|
{
|
|
56891
|
-
title:
|
|
56892
|
-
subtitle:
|
|
57113
|
+
title: headerTitle,
|
|
57114
|
+
subtitle: headerSubtitle ?? void 0,
|
|
56893
57115
|
showBack: true,
|
|
56894
57116
|
onBack,
|
|
56895
57117
|
onClose
|
|
56896
57118
|
}
|
|
56897
57119
|
),
|
|
56898
|
-
walletInfoProp ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "uf-flex uf-w-full uf-justify-center uf-mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime65.
|
|
57120
|
+
walletInfoProp ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "uf-flex uf-w-full uf-justify-center uf-mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-gap-1", children: [
|
|
57121
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)(WalletWithNetworkBadge, { walletInfo: walletInfoProp }),
|
|
57122
|
+
isCheckout && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
57123
|
+
"span",
|
|
57124
|
+
{
|
|
57125
|
+
className: "uf-text-xs",
|
|
57126
|
+
style: {
|
|
57127
|
+
color: colors2.foregroundMuted,
|
|
57128
|
+
fontFamily: fonts.regular
|
|
57129
|
+
},
|
|
57130
|
+
children: balanceSubtitle
|
|
57131
|
+
}
|
|
57132
|
+
)
|
|
57133
|
+
] }) }) : null,
|
|
56899
57134
|
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "uf-flex uf-min-h-0 uf-flex-1 uf-flex-col", children: [
|
|
56900
57135
|
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "uf-min-h-0 uf-flex-1", children: [
|
|
56901
57136
|
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "uf-text-center uf-py-8", children: [
|
|
@@ -56918,7 +57153,9 @@ function EnterAmountView({
|
|
|
56918
57153
|
inputMode: "decimal",
|
|
56919
57154
|
placeholder: "0",
|
|
56920
57155
|
value: amountUsd,
|
|
57156
|
+
readOnly: isCheckout,
|
|
56921
57157
|
onChange: (e) => {
|
|
57158
|
+
if (isCheckout) return;
|
|
56922
57159
|
const value = e.target.value;
|
|
56923
57160
|
if (value === "" || /^\d*\.?\d*$/.test(value)) {
|
|
56924
57161
|
const decimalIndex = value.indexOf(".");
|
|
@@ -56929,7 +57166,7 @@ function EnterAmountView({
|
|
|
56929
57166
|
onAmountChange(value);
|
|
56930
57167
|
}
|
|
56931
57168
|
},
|
|
56932
|
-
className:
|
|
57169
|
+
className: `uf-bg-transparent uf-outline-none uf-text-center uf-font-normal uf-w-auto uf-min-w-[60px] ${isCheckout ? "uf-cursor-default" : ""}`,
|
|
56933
57170
|
style: {
|
|
56934
57171
|
fontSize: `${Math.max(3.75 - (amountUsd || "0").length * 0.15, 2)}rem`,
|
|
56935
57172
|
color: components.input.textColor,
|
|
@@ -56951,7 +57188,7 @@ function EnterAmountView({
|
|
|
56951
57188
|
}
|
|
56952
57189
|
)
|
|
56953
57190
|
] }),
|
|
56954
|
-
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "uf-mb-4 uf-flex uf-w-full uf-min-w-0 uf-flex-nowrap uf-gap-1.5 uf-overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: usePercentageChips ? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
|
|
57191
|
+
!isCheckout && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "uf-mb-4 uf-flex uf-w-full uf-min-w-0 uf-flex-nowrap uf-gap-1.5 uf-overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: usePercentageChips ? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
|
|
56955
57192
|
PERCENT_QUICK_AMOUNTS.map((pct) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
56956
57193
|
"button",
|
|
56957
57194
|
{
|
|
@@ -57020,7 +57257,46 @@ function EnterAmountView({
|
|
|
57020
57257
|
}
|
|
57021
57258
|
)
|
|
57022
57259
|
] }) }),
|
|
57023
|
-
tokenChainDetails && tokenChainDetails.minimum_deposit_amount_usd > 0 && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
57260
|
+
tokenChainDetails && tokenChainDetails.minimum_deposit_amount_usd > 0 && (isCheckout && checkoutAmountUsd && inputUsdNum > parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0") + 5e-3 ? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
57261
|
+
"div",
|
|
57262
|
+
{
|
|
57263
|
+
className: "uf-rounded-lg uf-px-3 uf-py-2 uf-mb-3 uf-text-center",
|
|
57264
|
+
style: {
|
|
57265
|
+
backgroundColor: colors2.warning + "15",
|
|
57266
|
+
border: `1px solid ${colors2.warning}30`,
|
|
57267
|
+
borderRadius: components.card.borderRadius,
|
|
57268
|
+
animation: "uf-fadeSlideIn 0.4s ease-out"
|
|
57269
|
+
},
|
|
57270
|
+
children: [
|
|
57271
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
57272
|
+
"div",
|
|
57273
|
+
{
|
|
57274
|
+
className: "uf-text-xs uf-font-medium",
|
|
57275
|
+
style: { color: colors2.warning, fontFamily: fonts.medium },
|
|
57276
|
+
children: [
|
|
57277
|
+
"Minimum for ",
|
|
57278
|
+
selectedToken.symbol,
|
|
57279
|
+
" on ",
|
|
57280
|
+
selectedToken.chain_name,
|
|
57281
|
+
" is $",
|
|
57282
|
+
tokenChainDetails.minimum_deposit_amount_usd.toFixed(2)
|
|
57283
|
+
]
|
|
57284
|
+
}
|
|
57285
|
+
),
|
|
57286
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
57287
|
+
"div",
|
|
57288
|
+
{
|
|
57289
|
+
className: "uf-text-xs uf-mt-0.5",
|
|
57290
|
+
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
57291
|
+
children: [
|
|
57292
|
+
"Amount adjusted from remaining $",
|
|
57293
|
+
(parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0")).toFixed(2)
|
|
57294
|
+
]
|
|
57295
|
+
}
|
|
57296
|
+
)
|
|
57297
|
+
]
|
|
57298
|
+
}
|
|
57299
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
57024
57300
|
"div",
|
|
57025
57301
|
{
|
|
57026
57302
|
className: "uf-text-center uf-text-xs uf-mb-3",
|
|
@@ -57030,7 +57306,7 @@ function EnterAmountView({
|
|
|
57030
57306
|
tokenChainDetails.minimum_deposit_amount_usd.toFixed(2)
|
|
57031
57307
|
]
|
|
57032
57308
|
}
|
|
57033
|
-
),
|
|
57309
|
+
)),
|
|
57034
57310
|
inputUsdNum > 0 && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_jsx_runtime65.Fragment, { children: inputUsdNum > maxUsdAmount ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
57035
57311
|
"div",
|
|
57036
57312
|
{
|
|
@@ -57045,7 +57321,44 @@ function EnterAmountView({
|
|
|
57045
57321
|
style: { color: colors2.error },
|
|
57046
57322
|
children: error
|
|
57047
57323
|
}
|
|
57048
|
-
) })
|
|
57324
|
+
) }),
|
|
57325
|
+
isCheckout && selectedToken.icon_url && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2 uf-py-2", children: [
|
|
57326
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "uf-relative", children: [
|
|
57327
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
57328
|
+
"img",
|
|
57329
|
+
{
|
|
57330
|
+
src: selectedToken.icon_url,
|
|
57331
|
+
alt: selectedToken.symbol,
|
|
57332
|
+
width: 20,
|
|
57333
|
+
height: 20,
|
|
57334
|
+
className: "uf-w-5 uf-h-5 uf-rounded-full"
|
|
57335
|
+
}
|
|
57336
|
+
),
|
|
57337
|
+
selectedToken.chain_icon_url && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
57338
|
+
"img",
|
|
57339
|
+
{
|
|
57340
|
+
src: selectedToken.chain_icon_url,
|
|
57341
|
+
alt: selectedToken.chain_name,
|
|
57342
|
+
width: 10,
|
|
57343
|
+
height: 10,
|
|
57344
|
+
className: "uf-w-2.5 uf-h-2.5 uf-rounded-full uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-border",
|
|
57345
|
+
style: { borderColor: colors2.background }
|
|
57346
|
+
}
|
|
57347
|
+
)
|
|
57348
|
+
] }),
|
|
57349
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
57350
|
+
"span",
|
|
57351
|
+
{
|
|
57352
|
+
className: "uf-text-xs",
|
|
57353
|
+
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
57354
|
+
children: [
|
|
57355
|
+
selectedToken.symbol,
|
|
57356
|
+
" on ",
|
|
57357
|
+
selectedToken.chain_name
|
|
57358
|
+
]
|
|
57359
|
+
}
|
|
57360
|
+
)
|
|
57361
|
+
] })
|
|
57049
57362
|
] }),
|
|
57050
57363
|
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "uf-shrink-0 uf-pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
57051
57364
|
"button",
|
|
@@ -57069,6 +57382,18 @@ function EnterAmountView({
|
|
|
57069
57382
|
}
|
|
57070
57383
|
);
|
|
57071
57384
|
}
|
|
57385
|
+
var WALLET_ICONS2 = {
|
|
57386
|
+
metamask: MetamaskIcon,
|
|
57387
|
+
phantom: PhantomIcon,
|
|
57388
|
+
coinbase: CoinbaseIcon,
|
|
57389
|
+
trust: TrustIcon,
|
|
57390
|
+
rainbow: RainbowIcon,
|
|
57391
|
+
rabby: RabbyIcon,
|
|
57392
|
+
okx: OkxIcon,
|
|
57393
|
+
solflare: SolflareIcon,
|
|
57394
|
+
backpack: BackpackIcon,
|
|
57395
|
+
glow: GlowIcon
|
|
57396
|
+
};
|
|
57072
57397
|
function ReviewView({
|
|
57073
57398
|
walletInfo,
|
|
57074
57399
|
recipientAddress,
|
|
@@ -57103,30 +57428,17 @@ function ReviewView({
|
|
|
57103
57428
|
),
|
|
57104
57429
|
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "uf-flex uf-min-h-0 uf-flex-1 uf-flex-col", children: [
|
|
57105
57430
|
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "uf-min-h-0 uf-flex-1 uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: [
|
|
57106
|
-
/* @__PURE__ */ (0, import_jsx_runtime66.
|
|
57107
|
-
|
|
57108
|
-
|
|
57109
|
-
|
|
57110
|
-
|
|
57111
|
-
|
|
57112
|
-
|
|
57113
|
-
|
|
57114
|
-
|
|
57115
|
-
|
|
57116
|
-
|
|
57117
|
-
),
|
|
57118
|
-
formattedTokenAmount && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
|
|
57119
|
-
"div",
|
|
57120
|
-
{
|
|
57121
|
-
className: "uf-text-sm uf-mt-2",
|
|
57122
|
-
style: { color: colors2.foregroundMuted },
|
|
57123
|
-
children: [
|
|
57124
|
-
"\u2248 ",
|
|
57125
|
-
formattedTokenAmount
|
|
57126
|
-
]
|
|
57127
|
-
}
|
|
57128
|
-
)
|
|
57129
|
-
] }),
|
|
57431
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "uf-text-center", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
|
|
57432
|
+
"div",
|
|
57433
|
+
{
|
|
57434
|
+
className: "uf-text-4xl uf-font-medium",
|
|
57435
|
+
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
57436
|
+
children: [
|
|
57437
|
+
"$",
|
|
57438
|
+
amountUsd || "0"
|
|
57439
|
+
]
|
|
57440
|
+
}
|
|
57441
|
+
) }),
|
|
57130
57442
|
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
|
|
57131
57443
|
"div",
|
|
57132
57444
|
{
|
|
@@ -57143,29 +57455,20 @@ function ReviewView({
|
|
|
57143
57455
|
{
|
|
57144
57456
|
className: "uf-text-sm",
|
|
57145
57457
|
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
57146
|
-
children: "
|
|
57458
|
+
children: "From"
|
|
57147
57459
|
}
|
|
57148
57460
|
),
|
|
57149
57461
|
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
57150
|
-
|
|
57151
|
-
|
|
57152
|
-
{
|
|
57153
|
-
|
|
57154
|
-
|
|
57155
|
-
className: "uf-w-5 uf-h-5 uf-rounded-full"
|
|
57156
|
-
}
|
|
57157
|
-
),
|
|
57158
|
-
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
|
|
57462
|
+
WALLET_ICONS2[walletInfo.icon] && (() => {
|
|
57463
|
+
const Icon22 = WALLET_ICONS2[walletInfo.icon];
|
|
57464
|
+
return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "uf-w-5 uf-h-5 uf-rounded-full uf-overflow-hidden uf-flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Icon22, { size: 20, variant: "color" }) });
|
|
57465
|
+
})(),
|
|
57466
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
57159
57467
|
"span",
|
|
57160
57468
|
{
|
|
57161
57469
|
className: "uf-text-sm uf-font-medium",
|
|
57162
57470
|
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
57163
|
-
children:
|
|
57164
|
-
walletInfo.name,
|
|
57165
|
-
" (",
|
|
57166
|
-
truncateAddress2(walletInfo.address),
|
|
57167
|
-
")"
|
|
57168
|
-
]
|
|
57471
|
+
children: walletInfo.name
|
|
57169
57472
|
}
|
|
57170
57473
|
)
|
|
57171
57474
|
] })
|
|
@@ -57176,10 +57479,38 @@ function ReviewView({
|
|
|
57176
57479
|
{
|
|
57177
57480
|
className: "uf-text-sm",
|
|
57178
57481
|
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
57179
|
-
children: "
|
|
57482
|
+
children: "You send"
|
|
57180
57483
|
}
|
|
57181
57484
|
),
|
|
57182
|
-
/* @__PURE__ */ (0, import_jsx_runtime66.
|
|
57485
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
57486
|
+
getIconUrl2(selectedToken.icon_url, assetCdnUrl) && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
57487
|
+
"img",
|
|
57488
|
+
{
|
|
57489
|
+
src: getIconUrl2(selectedToken.icon_url, assetCdnUrl),
|
|
57490
|
+
alt: selectedToken.symbol,
|
|
57491
|
+
className: "uf-w-5 uf-h-5 uf-rounded-full"
|
|
57492
|
+
}
|
|
57493
|
+
),
|
|
57494
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
57495
|
+
"span",
|
|
57496
|
+
{
|
|
57497
|
+
className: "uf-text-sm uf-font-medium",
|
|
57498
|
+
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
57499
|
+
children: formattedTokenAmount || `$${amountUsd}`
|
|
57500
|
+
}
|
|
57501
|
+
)
|
|
57502
|
+
] })
|
|
57503
|
+
] }),
|
|
57504
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "uf-flex uf-justify-between uf-items-center", children: [
|
|
57505
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
57506
|
+
"span",
|
|
57507
|
+
{
|
|
57508
|
+
className: "uf-text-sm",
|
|
57509
|
+
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
57510
|
+
children: "Destination"
|
|
57511
|
+
}
|
|
57512
|
+
),
|
|
57513
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
57183
57514
|
"span",
|
|
57184
57515
|
{
|
|
57185
57516
|
className: "uf-text-sm uf-font-medium",
|
|
@@ -57328,7 +57659,10 @@ function ReviewView({
|
|
|
57328
57659
|
borderRadius: components.button.borderRadius,
|
|
57329
57660
|
border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
|
|
57330
57661
|
},
|
|
57331
|
-
children: isConfirming ? "
|
|
57662
|
+
children: isConfirming ? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2", children: [
|
|
57663
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
|
|
57664
|
+
"Confirming..."
|
|
57665
|
+
] }) : "Confirm Order"
|
|
57332
57666
|
}
|
|
57333
57667
|
) })
|
|
57334
57668
|
] })
|
|
@@ -57337,17 +57671,35 @@ function ReviewView({
|
|
|
57337
57671
|
}
|
|
57338
57672
|
);
|
|
57339
57673
|
}
|
|
57674
|
+
var SETTLE_FALLBACK_MS = 15e3;
|
|
57340
57675
|
function ConfirmingView({
|
|
57341
57676
|
isConfirming,
|
|
57342
57677
|
onClose,
|
|
57343
57678
|
executions = [],
|
|
57344
|
-
isPolling = false
|
|
57679
|
+
isPolling = false,
|
|
57680
|
+
onNewDeposit,
|
|
57681
|
+
onDone,
|
|
57682
|
+
paymentIntentStatus,
|
|
57683
|
+
amountReceivedUsd,
|
|
57684
|
+
amountReceivedUsdAtSubmission
|
|
57345
57685
|
}) {
|
|
57346
|
-
const { colors: colors2, fonts } = useTheme();
|
|
57686
|
+
const { colors: colors2, fonts, components } = useTheme();
|
|
57347
57687
|
const [containerEl, setContainerEl] = (0, import_react26.useState)(null);
|
|
57348
57688
|
const containerCallbackRef = (0, import_react26.useCallback)((el) => {
|
|
57349
57689
|
setContainerEl(el);
|
|
57350
57690
|
}, []);
|
|
57691
|
+
const [fallbackSettled, setFallbackSettled] = (0, import_react26.useState)(false);
|
|
57692
|
+
const hasExecution = executions.length > 0;
|
|
57693
|
+
const isCheckoutMode = paymentIntentStatus != null;
|
|
57694
|
+
const isPaymentComplete = paymentIntentStatus === "succeeded";
|
|
57695
|
+
const amountChanged = amountReceivedUsdAtSubmission != null && amountReceivedUsd != null && amountReceivedUsd !== amountReceivedUsdAtSubmission;
|
|
57696
|
+
const piSettled = !isCheckoutMode || isPaymentComplete || amountChanged || fallbackSettled;
|
|
57697
|
+
(0, import_react26.useEffect)(() => {
|
|
57698
|
+
if (!hasExecution || piSettled) return;
|
|
57699
|
+
const timeout = setTimeout(() => setFallbackSettled(true), SETTLE_FALLBACK_MS);
|
|
57700
|
+
return () => clearTimeout(timeout);
|
|
57701
|
+
}, [hasExecution, piSettled]);
|
|
57702
|
+
const showButtons = hasExecution && piSettled;
|
|
57351
57703
|
return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(PortalContainerProvider, { value: containerEl, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
|
|
57352
57704
|
"div",
|
|
57353
57705
|
{
|
|
@@ -57360,8 +57712,8 @@ function ConfirmingView({
|
|
|
57360
57712
|
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
57361
57713
|
DepositHeader,
|
|
57362
57714
|
{
|
|
57363
|
-
title: isConfirming ? "Confirming..." : "Processing",
|
|
57364
|
-
onClose
|
|
57715
|
+
title: isConfirming ? "Confirming..." : hasExecution && isPaymentComplete ? "Payment Complete" : hasExecution ? "Deposit Received" : "Processing",
|
|
57716
|
+
onClose: isPaymentComplete && onDone ? onDone : onClose
|
|
57365
57717
|
}
|
|
57366
57718
|
),
|
|
57367
57719
|
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "uf-flex uf-flex-1 uf-flex-col uf-items-center uf-justify-center uf-py-8", children: isConfirming ? /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
|
|
@@ -57388,11 +57740,70 @@ function ConfirmingView({
|
|
|
57388
57740
|
children: "Please confirm the transaction in your wallet"
|
|
57389
57741
|
}
|
|
57390
57742
|
)
|
|
57391
|
-
] }) : /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
|
|
57743
|
+
] }) : hasExecution ? /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
|
|
57392
57744
|
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
57393
57745
|
CircleCheck,
|
|
57394
57746
|
{
|
|
57395
57747
|
className: "uf-w-12 uf-h-12 uf-mb-4",
|
|
57748
|
+
style: { color: "rgb(34, 197, 94)" }
|
|
57749
|
+
}
|
|
57750
|
+
),
|
|
57751
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
57752
|
+
"div",
|
|
57753
|
+
{
|
|
57754
|
+
className: "uf-text-lg uf-font-medium",
|
|
57755
|
+
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
57756
|
+
children: isPaymentComplete ? "Payment Complete" : "Deposit Received"
|
|
57757
|
+
}
|
|
57758
|
+
),
|
|
57759
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
57760
|
+
"div",
|
|
57761
|
+
{
|
|
57762
|
+
className: "uf-text-sm uf-mt-2 uf-text-center uf-px-6",
|
|
57763
|
+
style: { color: colors2.foregroundMuted },
|
|
57764
|
+
children: isPaymentComplete ? "Your payment has been fulfilled." : showButtons ? "Your deposit is being processed." : "Checking payment status..."
|
|
57765
|
+
}
|
|
57766
|
+
),
|
|
57767
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "uf-mt-6 uf-flex uf-flex-col uf-items-center uf-gap-3", children: !showButtons ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
57768
|
+
LoaderCircle,
|
|
57769
|
+
{
|
|
57770
|
+
className: "uf-w-5 uf-h-5 uf-animate-spin",
|
|
57771
|
+
style: { color: colors2.foregroundMuted }
|
|
57772
|
+
}
|
|
57773
|
+
) : isPaymentComplete && onDone ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
57774
|
+
"button",
|
|
57775
|
+
{
|
|
57776
|
+
onClick: onDone,
|
|
57777
|
+
className: "uf-w-full uf-py-3 uf-px-8 uf-text-sm uf-font-medium uf-transition-opacity hover:uf-opacity-80",
|
|
57778
|
+
style: {
|
|
57779
|
+
backgroundColor: colors2.primary,
|
|
57780
|
+
color: colors2.primaryForeground,
|
|
57781
|
+
fontFamily: fonts.medium,
|
|
57782
|
+
borderRadius: components.button.borderRadius
|
|
57783
|
+
},
|
|
57784
|
+
children: "Done"
|
|
57785
|
+
}
|
|
57786
|
+
) : onNewDeposit ? /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
|
|
57787
|
+
"button",
|
|
57788
|
+
{
|
|
57789
|
+
onClick: onNewDeposit,
|
|
57790
|
+
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",
|
|
57791
|
+
style: {
|
|
57792
|
+
backgroundColor: colors2.primary,
|
|
57793
|
+
color: colors2.primaryForeground,
|
|
57794
|
+
fontFamily: fonts.medium
|
|
57795
|
+
},
|
|
57796
|
+
children: [
|
|
57797
|
+
"Make another deposit",
|
|
57798
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ArrowRight, { className: "uf-w-4 uf-h-4" })
|
|
57799
|
+
]
|
|
57800
|
+
}
|
|
57801
|
+
) : null })
|
|
57802
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
|
|
57803
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
57804
|
+
LoaderCircle,
|
|
57805
|
+
{
|
|
57806
|
+
className: "uf-w-12 uf-h-12 uf-animate-spin uf-mb-4",
|
|
57396
57807
|
style: { color: colors2.primary }
|
|
57397
57808
|
}
|
|
57398
57809
|
),
|
|
@@ -57409,7 +57820,7 @@ function ConfirmingView({
|
|
|
57409
57820
|
{
|
|
57410
57821
|
className: "uf-text-sm uf-mt-2 uf-text-center uf-px-6",
|
|
57411
57822
|
style: { color: colors2.foregroundMuted },
|
|
57412
|
-
children: "
|
|
57823
|
+
children: "Waiting for your deposit to be detected..."
|
|
57413
57824
|
}
|
|
57414
57825
|
)
|
|
57415
57826
|
] }) }),
|
|
@@ -57433,6 +57844,7 @@ function BrowserWalletModal({
|
|
|
57433
57844
|
depositWallet,
|
|
57434
57845
|
userId,
|
|
57435
57846
|
publishableKey,
|
|
57847
|
+
clientSecret,
|
|
57436
57848
|
assetCdnUrl,
|
|
57437
57849
|
projectName,
|
|
57438
57850
|
theme = "dark",
|
|
@@ -57441,7 +57853,13 @@ function BrowserWalletModal({
|
|
|
57441
57853
|
onDepositSuccess,
|
|
57442
57854
|
onDepositError,
|
|
57443
57855
|
amountQuickSelect = "percentage",
|
|
57444
|
-
onWalletDisconnect
|
|
57856
|
+
onWalletDisconnect,
|
|
57857
|
+
prefillAmountUsd,
|
|
57858
|
+
checkoutAmountUsd,
|
|
57859
|
+
checkoutReceivedUsd,
|
|
57860
|
+
onNewDeposit,
|
|
57861
|
+
onDone,
|
|
57862
|
+
paymentIntentStatus
|
|
57445
57863
|
}) {
|
|
57446
57864
|
const { colors: colors2, fonts, components } = useTheme();
|
|
57447
57865
|
const [step, setStep] = React262.useState("select-token");
|
|
@@ -57459,6 +57877,7 @@ function BrowserWalletModal({
|
|
|
57459
57877
|
const [tokenChainDetails, setTokenChainDetails] = React262.useState(null);
|
|
57460
57878
|
const [loadingTokenDetails, setLoadingTokenDetails] = React262.useState(false);
|
|
57461
57879
|
const [showTransactionDetails, setShowTransactionDetails] = React262.useState(false);
|
|
57880
|
+
const [receivedUsdAtSubmission, setReceivedUsdAtSubmission] = React262.useState(null);
|
|
57462
57881
|
const themeClass = theme === "dark" ? "uf-dark" : "";
|
|
57463
57882
|
const chainType = depositWallet.chain_type;
|
|
57464
57883
|
const recipientAddress = depositWallet.address;
|
|
@@ -57466,15 +57885,19 @@ function BrowserWalletModal({
|
|
|
57466
57885
|
const { executions: depositExecutions, isPolling } = useDepositPolling({
|
|
57467
57886
|
userId,
|
|
57468
57887
|
publishableKey,
|
|
57888
|
+
clientSecret,
|
|
57469
57889
|
enabled: open && hasSignedTransaction,
|
|
57470
57890
|
onDepositSuccess,
|
|
57471
57891
|
onDepositError
|
|
57472
57892
|
});
|
|
57893
|
+
const prevOpenRef = React262.useRef(false);
|
|
57473
57894
|
React262.useEffect(() => {
|
|
57474
|
-
|
|
57895
|
+
const wasOpen = prevOpenRef.current;
|
|
57896
|
+
prevOpenRef.current = open;
|
|
57897
|
+
if (open && !wasOpen) {
|
|
57475
57898
|
setStep("select-token");
|
|
57476
57899
|
setSelectedBalance(null);
|
|
57477
|
-
setAmountUsd("");
|
|
57900
|
+
setAmountUsd(prefillAmountUsd ?? "");
|
|
57478
57901
|
setError(null);
|
|
57479
57902
|
setIsConfirming(false);
|
|
57480
57903
|
setTokenChainDetails(null);
|
|
@@ -57482,7 +57905,15 @@ function BrowserWalletModal({
|
|
|
57482
57905
|
setHasSignedTransaction(false);
|
|
57483
57906
|
setIsDisconnectingWallet(false);
|
|
57484
57907
|
}
|
|
57485
|
-
}, [open]);
|
|
57908
|
+
}, [open, prefillAmountUsd]);
|
|
57909
|
+
React262.useEffect(() => {
|
|
57910
|
+
if (!prefillAmountUsd || !tokenChainDetails || step !== "input-amount") return;
|
|
57911
|
+
const minDeposit = tokenChainDetails.minimum_deposit_amount_usd || 0;
|
|
57912
|
+
const currentAmount = parseFloat(amountUsd) || 0;
|
|
57913
|
+
if (currentAmount > 0 && currentAmount < minDeposit) {
|
|
57914
|
+
setAmountUsd(minDeposit.toFixed(2));
|
|
57915
|
+
}
|
|
57916
|
+
}, [tokenChainDetails, step, prefillAmountUsd]);
|
|
57486
57917
|
React262.useEffect(() => {
|
|
57487
57918
|
if (step === "review") {
|
|
57488
57919
|
setShowTransactionDetails(false);
|
|
@@ -57600,7 +58031,7 @@ function BrowserWalletModal({
|
|
|
57600
58031
|
setError(null);
|
|
57601
58032
|
if (step === "input-amount") {
|
|
57602
58033
|
setStep("select-token");
|
|
57603
|
-
setAmountUsd("");
|
|
58034
|
+
setAmountUsd(prefillAmountUsd ?? "");
|
|
57604
58035
|
setTokenChainDetails(null);
|
|
57605
58036
|
} else if (step === "review") {
|
|
57606
58037
|
setStep("input-amount");
|
|
@@ -57686,7 +58117,6 @@ function BrowserWalletModal({
|
|
|
57686
58117
|
}
|
|
57687
58118
|
}
|
|
57688
58119
|
setIsConfirming(true);
|
|
57689
|
-
setStep("confirming");
|
|
57690
58120
|
setError(null);
|
|
57691
58121
|
try {
|
|
57692
58122
|
let txHash;
|
|
@@ -57704,16 +58134,17 @@ function BrowserWalletModal({
|
|
|
57704
58134
|
} else {
|
|
57705
58135
|
txHash = await sendEthereumTransaction(token, tokenAmount.toString());
|
|
57706
58136
|
}
|
|
58137
|
+
setReceivedUsdAtSubmission(checkoutReceivedUsd ?? "0");
|
|
57707
58138
|
setHasSignedTransaction(true);
|
|
57708
|
-
onSuccess?.(txHash);
|
|
57709
58139
|
setIsConfirming(false);
|
|
58140
|
+
setStep("confirming");
|
|
58141
|
+
onSuccess?.(txHash);
|
|
57710
58142
|
} catch (err) {
|
|
57711
58143
|
console.error("[BrowserWalletModal] Transaction error:", err);
|
|
57712
58144
|
const errorMessage = err instanceof Error ? err.message : "Transaction failed";
|
|
57713
58145
|
setError(errorMessage);
|
|
57714
58146
|
onError?.(err instanceof Error ? err : new Error(errorMessage));
|
|
57715
58147
|
setIsConfirming(false);
|
|
57716
|
-
setStep("review");
|
|
57717
58148
|
}
|
|
57718
58149
|
};
|
|
57719
58150
|
const sendEthereumTransaction = async (token, amountStr) => {
|
|
@@ -57962,7 +58393,9 @@ function BrowserWalletModal({
|
|
|
57962
58393
|
onBack: handleClose,
|
|
57963
58394
|
onClose: handleFullClose,
|
|
57964
58395
|
onDisconnectWallet: onWalletDisconnect ? () => void handleDisconnectFromSelectToken() : void 0,
|
|
57965
|
-
isDisconnectingWallet
|
|
58396
|
+
isDisconnectingWallet,
|
|
58397
|
+
checkoutAmountUsd,
|
|
58398
|
+
checkoutReceivedUsd
|
|
57966
58399
|
}
|
|
57967
58400
|
),
|
|
57968
58401
|
step === "input-amount" && selectedToken && selectedBalance && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
|
|
@@ -57983,7 +58416,9 @@ function BrowserWalletModal({
|
|
|
57983
58416
|
onReview: handleReview,
|
|
57984
58417
|
onBack: handleBack,
|
|
57985
58418
|
onClose: handleFullClose,
|
|
57986
|
-
quickSelectMode: amountQuickSelect
|
|
58419
|
+
quickSelectMode: amountQuickSelect,
|
|
58420
|
+
checkoutAmountUsd,
|
|
58421
|
+
checkoutReceivedUsd
|
|
57987
58422
|
}
|
|
57988
58423
|
),
|
|
57989
58424
|
step === "review" && selectedToken && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
|
|
@@ -58012,7 +58447,12 @@ function BrowserWalletModal({
|
|
|
58012
58447
|
isConfirming,
|
|
58013
58448
|
onClose: handleFullClose,
|
|
58014
58449
|
executions: depositExecutions,
|
|
58015
|
-
isPolling
|
|
58450
|
+
isPolling,
|
|
58451
|
+
onNewDeposit,
|
|
58452
|
+
onDone,
|
|
58453
|
+
paymentIntentStatus,
|
|
58454
|
+
amountReceivedUsd: checkoutReceivedUsd,
|
|
58455
|
+
amountReceivedUsdAtSubmission: receivedUsdAtSubmission
|
|
58016
58456
|
}
|
|
58017
58457
|
)
|
|
58018
58458
|
] })
|
|
@@ -58021,7 +58461,7 @@ function BrowserWalletModal({
|
|
|
58021
58461
|
}
|
|
58022
58462
|
) });
|
|
58023
58463
|
}
|
|
58024
|
-
var
|
|
58464
|
+
var WALLET_ICONS3 = {
|
|
58025
58465
|
metamask: MetamaskIcon,
|
|
58026
58466
|
phantom: PhantomIcon,
|
|
58027
58467
|
coinbase: CoinbaseIcon,
|
|
@@ -58460,10 +58900,10 @@ function WalletSelectionModal({
|
|
|
58460
58900
|
},
|
|
58461
58901
|
children: [
|
|
58462
58902
|
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
|
|
58463
|
-
|
|
58903
|
+
WALLET_ICONS3[wallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
58464
58904
|
WalletIconWithNetwork,
|
|
58465
58905
|
{
|
|
58466
|
-
WalletIcon:
|
|
58906
|
+
WalletIcon: WALLET_ICONS3[wallet.id],
|
|
58467
58907
|
networks: wallet.networks,
|
|
58468
58908
|
size: 40,
|
|
58469
58909
|
className: "uf-rounded-lg"
|
|
@@ -58534,10 +58974,10 @@ function WalletSelectionModal({
|
|
|
58534
58974
|
style: { minHeight: WALLET_STEP_BODY_MIN_HEIGHT },
|
|
58535
58975
|
children: [
|
|
58536
58976
|
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-pb-4 uf-shrink-0", children: [
|
|
58537
|
-
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-mb-2", children:
|
|
58977
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-mb-2", children: WALLET_ICONS3[selectedWallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
58538
58978
|
WalletIconWithNetwork,
|
|
58539
58979
|
{
|
|
58540
|
-
WalletIcon:
|
|
58980
|
+
WalletIcon: WALLET_ICONS3[selectedWallet.id],
|
|
58541
58981
|
networks: selectedWallet.networks,
|
|
58542
58982
|
size: 48,
|
|
58543
58983
|
className: "uf-rounded-lg"
|
|
@@ -59336,136 +59776,794 @@ function DepositModal({
|
|
|
59336
59776
|
}
|
|
59337
59777
|
) });
|
|
59338
59778
|
}
|
|
59339
|
-
function
|
|
59779
|
+
function usePaymentIntent(params) {
|
|
59780
|
+
const {
|
|
59781
|
+
clientSecret,
|
|
59782
|
+
publishableKey,
|
|
59783
|
+
enabled = true,
|
|
59784
|
+
pollingInterval = 5e3
|
|
59785
|
+
} = params;
|
|
59340
59786
|
return useQuery({
|
|
59341
|
-
queryKey: ["unifold", "
|
|
59342
|
-
queryFn: () =>
|
|
59343
|
-
|
|
59344
|
-
|
|
59345
|
-
|
|
59346
|
-
refetchOnWindowFocus:
|
|
59347
|
-
|
|
59787
|
+
queryKey: ["unifold", "paymentIntent", clientSecret, publishableKey],
|
|
59788
|
+
queryFn: () => retrievePaymentIntent(clientSecret, publishableKey),
|
|
59789
|
+
enabled: enabled && !!clientSecret && !!publishableKey,
|
|
59790
|
+
staleTime: 0,
|
|
59791
|
+
refetchInterval: pollingInterval || false,
|
|
59792
|
+
refetchOnWindowFocus: true,
|
|
59793
|
+
retry: 3,
|
|
59794
|
+
retryDelay: (attempt) => Math.min(1e3 * 2 ** attempt, 1e4)
|
|
59348
59795
|
});
|
|
59349
59796
|
}
|
|
59350
|
-
function
|
|
59797
|
+
function useDepositQuote(params) {
|
|
59351
59798
|
const {
|
|
59799
|
+
publishableKey,
|
|
59352
59800
|
sourceChainType,
|
|
59353
59801
|
sourceChainId,
|
|
59354
59802
|
sourceTokenAddress,
|
|
59355
|
-
|
|
59356
|
-
|
|
59803
|
+
destinationAmount,
|
|
59804
|
+
destinationChainType,
|
|
59805
|
+
destinationChainId,
|
|
59806
|
+
destinationTokenAddress,
|
|
59357
59807
|
enabled = true
|
|
59358
59808
|
} = params;
|
|
59359
|
-
const
|
|
59809
|
+
const request = {
|
|
59810
|
+
source_chain_type: sourceChainType,
|
|
59811
|
+
source_chain_id: sourceChainId,
|
|
59812
|
+
source_token_address: sourceTokenAddress,
|
|
59813
|
+
destination_amount: destinationAmount,
|
|
59814
|
+
destination_chain_type: destinationChainType,
|
|
59815
|
+
destination_chain_id: destinationChainId,
|
|
59816
|
+
destination_token_address: destinationTokenAddress
|
|
59817
|
+
};
|
|
59360
59818
|
return useQuery({
|
|
59361
59819
|
queryKey: [
|
|
59362
59820
|
"unifold",
|
|
59363
|
-
"
|
|
59364
|
-
sourceChainType
|
|
59365
|
-
sourceChainId
|
|
59366
|
-
sourceTokenAddress
|
|
59821
|
+
"depositQuote",
|
|
59822
|
+
sourceChainType,
|
|
59823
|
+
sourceChainId,
|
|
59824
|
+
sourceTokenAddress,
|
|
59825
|
+
destinationAmount,
|
|
59826
|
+
destinationChainType,
|
|
59827
|
+
destinationChainId,
|
|
59828
|
+
destinationTokenAddress,
|
|
59367
59829
|
publishableKey
|
|
59368
59830
|
],
|
|
59369
|
-
queryFn:
|
|
59370
|
-
|
|
59371
|
-
|
|
59372
|
-
|
|
59373
|
-
|
|
59374
|
-
|
|
59375
|
-
|
|
59376
|
-
(token) => token.chains.some((chain) => {
|
|
59377
|
-
const match = chain.chain_type === sourceChainType && chain.chain_id === sourceChainId && chain.token_address.toLowerCase() === sourceTokenAddress.toLowerCase();
|
|
59378
|
-
if (match) {
|
|
59379
|
-
matchedMinUsd = chain.minimum_deposit_amount_usd;
|
|
59380
|
-
matchedProcessingTime = chain.estimated_processing_time;
|
|
59381
|
-
matchedSlippage = chain.max_slippage_percent;
|
|
59382
|
-
matchedPriceImpact = chain.estimated_price_impact_percent;
|
|
59383
|
-
}
|
|
59384
|
-
return match;
|
|
59385
|
-
})
|
|
59386
|
-
);
|
|
59387
|
-
return {
|
|
59388
|
-
isSupported: found,
|
|
59389
|
-
minimumAmountUsd: matchedMinUsd,
|
|
59390
|
-
estimatedProcessingTime: matchedProcessingTime,
|
|
59391
|
-
maxSlippagePercent: matchedSlippage,
|
|
59392
|
-
priceImpactPercent: matchedPriceImpact,
|
|
59393
|
-
errorMessage: found ? null : `${sourceTokenSymbol || "Source token"} is not a supported withdrawal token. Supported tokens include USDC, USDT, and other stablecoins.`
|
|
59394
|
-
};
|
|
59395
|
-
},
|
|
59396
|
-
enabled: enabled && hasParams,
|
|
59397
|
-
staleTime: 1e3 * 60 * 5,
|
|
59398
|
-
gcTime: 1e3 * 60 * 30,
|
|
59399
|
-
refetchOnMount: false,
|
|
59400
|
-
refetchOnWindowFocus: false
|
|
59831
|
+
queryFn: () => getDepositQuote(request, publishableKey),
|
|
59832
|
+
enabled: enabled && !!publishableKey && !!sourceChainType && !!sourceChainId && !!sourceTokenAddress && !!destinationAmount && destinationAmount !== "0" && !!destinationChainType && !!destinationChainId && !!destinationTokenAddress,
|
|
59833
|
+
staleTime: 6e4,
|
|
59834
|
+
gcTime: 5 * 6e4,
|
|
59835
|
+
refetchOnWindowFocus: false,
|
|
59836
|
+
retry: 2,
|
|
59837
|
+
retryDelay: (attempt) => Math.min(1e3 * 2 ** attempt, 5e3)
|
|
59401
59838
|
});
|
|
59402
59839
|
}
|
|
59403
|
-
function
|
|
59840
|
+
function mapDepositAddressesToWallets(depositAddresses, pi) {
|
|
59841
|
+
return depositAddresses.map((da, idx) => ({
|
|
59842
|
+
id: da.id,
|
|
59843
|
+
chain_type: da.chain_type,
|
|
59844
|
+
address_type: da.address_type,
|
|
59845
|
+
address: da.address,
|
|
59846
|
+
destination_chain_type: pi.destination_chain_type,
|
|
59847
|
+
destination_chain_id: pi.destination_chain_id,
|
|
59848
|
+
destination_token_address: pi.destination_token_address,
|
|
59849
|
+
recipient_address: pi.recipient_address,
|
|
59850
|
+
is_primary: idx === 0
|
|
59851
|
+
}));
|
|
59852
|
+
}
|
|
59853
|
+
function SkeletonButton2() {
|
|
59854
|
+
return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-w-full uf-bg-secondary uf-rounded-xl uf-p-3 uf-flex uf-items-center uf-justify-between uf-animate-pulse", children: [
|
|
59855
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
|
|
59856
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "uf-bg-muted uf-rounded-lg uf-w-9 uf-h-9" }),
|
|
59857
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-space-y-1.5", children: [
|
|
59858
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "uf-h-3.5 uf-w-24 uf-bg-muted uf-rounded" }),
|
|
59859
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "uf-h-3 uf-w-32 uf-bg-muted uf-rounded" })
|
|
59860
|
+
] })
|
|
59861
|
+
] }),
|
|
59862
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ChevronRight, { className: "uf-w-4 uf-h-4 uf-text-muted" }) })
|
|
59863
|
+
] });
|
|
59864
|
+
}
|
|
59865
|
+
function CheckoutModal({
|
|
59866
|
+
open,
|
|
59867
|
+
onOpenChange,
|
|
59868
|
+
clientSecret,
|
|
59869
|
+
publishableKey,
|
|
59870
|
+
modalTitle,
|
|
59871
|
+
enableConnectWallet = false,
|
|
59872
|
+
theme = "dark",
|
|
59873
|
+
onCheckoutSuccess,
|
|
59874
|
+
onCheckoutError
|
|
59875
|
+
}) {
|
|
59876
|
+
const { colors: colors2, fonts, components } = useTheme();
|
|
59877
|
+
const [view, setView] = (0, import_react27.useState)("main");
|
|
59878
|
+
const resetViewTimeoutRef = (0, import_react27.useRef)(
|
|
59879
|
+
null
|
|
59880
|
+
);
|
|
59881
|
+
const [browserWalletModalOpen, setBrowserWalletModalOpen] = (0, import_react27.useState)(false);
|
|
59882
|
+
const [browserWalletInfo, setBrowserWalletInfo] = (0, import_react27.useState)(null);
|
|
59883
|
+
const [walletSelectionModalOpen, setWalletSelectionModalOpen] = (0, import_react27.useState)(false);
|
|
59884
|
+
const [browserWalletChainType, setBrowserWalletChainType] = (0, import_react27.useState)(() => getStoredWalletChainType());
|
|
59885
|
+
const isMobileView = useIsMobileViewport();
|
|
59886
|
+
const [resolvedTheme, setResolvedTheme] = (0, import_react27.useState)(
|
|
59887
|
+
theme === "auto" ? "dark" : theme
|
|
59888
|
+
);
|
|
59889
|
+
(0, import_react27.useEffect)(() => {
|
|
59890
|
+
if (theme === "auto") {
|
|
59891
|
+
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
59892
|
+
setResolvedTheme(mediaQuery.matches ? "dark" : "light");
|
|
59893
|
+
const handler = (e) => {
|
|
59894
|
+
setResolvedTheme(e.matches ? "dark" : "light");
|
|
59895
|
+
};
|
|
59896
|
+
mediaQuery.addEventListener("change", handler);
|
|
59897
|
+
return () => mediaQuery.removeEventListener("change", handler);
|
|
59898
|
+
} else {
|
|
59899
|
+
setResolvedTheme(theme);
|
|
59900
|
+
}
|
|
59901
|
+
}, [theme]);
|
|
59902
|
+
const themeClass = resolvedTheme === "dark" ? "uf-dark" : "";
|
|
59404
59903
|
const {
|
|
59405
|
-
|
|
59406
|
-
|
|
59407
|
-
|
|
59408
|
-
|
|
59904
|
+
data: paymentIntent,
|
|
59905
|
+
isLoading: piLoading,
|
|
59906
|
+
error: piError
|
|
59907
|
+
} = usePaymentIntent({
|
|
59908
|
+
clientSecret,
|
|
59409
59909
|
publishableKey,
|
|
59410
|
-
enabled
|
|
59411
|
-
|
|
59412
|
-
|
|
59413
|
-
|
|
59414
|
-
|
|
59415
|
-
|
|
59416
|
-
|
|
59417
|
-
|
|
59418
|
-
|
|
59419
|
-
|
|
59420
|
-
|
|
59421
|
-
|
|
59422
|
-
|
|
59423
|
-
|
|
59424
|
-
|
|
59425
|
-
|
|
59426
|
-
|
|
59427
|
-
|
|
59428
|
-
|
|
59429
|
-
|
|
59910
|
+
enabled: open && !!clientSecret,
|
|
59911
|
+
pollingInterval: 5e3
|
|
59912
|
+
});
|
|
59913
|
+
const { projectConfig } = useProjectConfig({
|
|
59914
|
+
publishableKey,
|
|
59915
|
+
enabled: open
|
|
59916
|
+
});
|
|
59917
|
+
const prevStatusRef = (0, import_react27.useRef)(null);
|
|
59918
|
+
(0, import_react27.useEffect)(() => {
|
|
59919
|
+
if (!paymentIntent) return;
|
|
59920
|
+
const prev = prevStatusRef.current;
|
|
59921
|
+
prevStatusRef.current = paymentIntent.status;
|
|
59922
|
+
if (prev && prev !== paymentIntent.status && paymentIntent.status === "succeeded") {
|
|
59923
|
+
if (!browserWalletModalOpen) {
|
|
59924
|
+
setView("main");
|
|
59925
|
+
}
|
|
59926
|
+
onCheckoutSuccess?.({
|
|
59927
|
+
paymentIntentId: paymentIntent.id,
|
|
59928
|
+
status: paymentIntent.status
|
|
59929
|
+
});
|
|
59930
|
+
}
|
|
59931
|
+
}, [paymentIntent, onCheckoutSuccess, browserWalletModalOpen]);
|
|
59932
|
+
const wallets = (0, import_react27.useMemo)(() => {
|
|
59933
|
+
if (!paymentIntent) return [];
|
|
59934
|
+
return mapDepositAddressesToWallets(
|
|
59935
|
+
paymentIntent.deposit_addresses,
|
|
59936
|
+
paymentIntent
|
|
59937
|
+
);
|
|
59938
|
+
}, [paymentIntent]);
|
|
59939
|
+
const formatCryptoAmount = (0, import_react27.useMemo)(() => {
|
|
59940
|
+
if (!paymentIntent) return (_) => "";
|
|
59941
|
+
const decimals = paymentIntent.destination_token_decimals ?? 6;
|
|
59942
|
+
const symbol = paymentIntent.currency.toUpperCase();
|
|
59943
|
+
return (baseUnits) => {
|
|
59944
|
+
const num = Number(baseUnits) / 10 ** decimals;
|
|
59945
|
+
const formatted = num % 1 === 0 ? num.toFixed(0) : num.toFixed(2);
|
|
59946
|
+
return `${formatted} ${symbol}`;
|
|
59947
|
+
};
|
|
59948
|
+
}, [paymentIntent]);
|
|
59949
|
+
const remainingAmountUsd = (0, import_react27.useMemo)(() => {
|
|
59950
|
+
if (!paymentIntent) return void 0;
|
|
59951
|
+
const total = parseFloat(paymentIntent.amount_usd);
|
|
59952
|
+
const received = parseFloat(paymentIntent.amount_received_usd);
|
|
59953
|
+
if (isNaN(total) || isNaN(received)) return paymentIntent.amount_usd;
|
|
59954
|
+
const remaining = total - received;
|
|
59955
|
+
return remaining > 0 ? remaining.toFixed(2) : "0.00";
|
|
59956
|
+
}, [paymentIntent]);
|
|
59957
|
+
const remainingCrypto = (0, import_react27.useMemo)(() => {
|
|
59958
|
+
if (!paymentIntent) return void 0;
|
|
59959
|
+
const total = BigInt(paymentIntent.amount);
|
|
59960
|
+
const received = BigInt(paymentIntent.amount_received);
|
|
59961
|
+
const remaining = total - received;
|
|
59962
|
+
return remaining > 0n ? remaining.toString() : "0";
|
|
59963
|
+
}, [paymentIntent]);
|
|
59964
|
+
const [selectedSource, setSelectedSource] = (0, import_react27.useState)(null);
|
|
59965
|
+
const quoteDestinationAmount = (0, import_react27.useMemo)(() => {
|
|
59966
|
+
if (!paymentIntent || !selectedSource) return "0";
|
|
59967
|
+
const remaining = BigInt(paymentIntent.amount) - BigInt(paymentIntent.amount_received);
|
|
59968
|
+
const totalBaseUnits = Number(paymentIntent.amount);
|
|
59969
|
+
const totalUsd = parseFloat(paymentIntent.amount_usd);
|
|
59970
|
+
const baseUnitsPerUsd = totalUsd > 0 ? totalBaseUnits / totalUsd : 0;
|
|
59971
|
+
const minUsd = Math.max(selectedSource.minimumDepositAmountUsd, 3);
|
|
59972
|
+
const minDepositBaseUnits = BigInt(Math.ceil(minUsd * baseUnitsPerUsd));
|
|
59973
|
+
const effective = remaining > minDepositBaseUnits ? remaining : minDepositBaseUnits;
|
|
59974
|
+
return effective > 0n ? effective.toString() : "0";
|
|
59975
|
+
}, [paymentIntent, selectedSource]);
|
|
59976
|
+
const { data: sourceQuote } = useDepositQuote({
|
|
59977
|
+
publishableKey,
|
|
59978
|
+
sourceChainType: selectedSource?.chainType ?? "",
|
|
59979
|
+
sourceChainId: selectedSource?.chainId ?? "",
|
|
59980
|
+
sourceTokenAddress: selectedSource?.tokenAddress ?? "",
|
|
59981
|
+
destinationAmount: quoteDestinationAmount,
|
|
59982
|
+
destinationChainType: paymentIntent?.destination_chain_type ?? "",
|
|
59983
|
+
destinationChainId: paymentIntent?.destination_chain_id ?? "",
|
|
59984
|
+
destinationTokenAddress: paymentIntent?.destination_token_address ?? "",
|
|
59985
|
+
enabled: open && view === "transfer" && !!paymentIntent && !!selectedSource && quoteDestinationAmount !== "0"
|
|
59986
|
+
});
|
|
59987
|
+
const handleBrowserWalletClick = (0, import_react27.useCallback)(
|
|
59988
|
+
(walletInfo) => {
|
|
59989
|
+
const walletChainType = walletInfo.type === "phantom-solana" || walletInfo.type === "solflare" || walletInfo.type === "backpack" || walletInfo.type === "glow" ? "solana" : "ethereum";
|
|
59990
|
+
setStoredWalletChainType(walletChainType);
|
|
59991
|
+
setBrowserWalletChainType(walletChainType);
|
|
59992
|
+
const matchingDepositWallet = wallets.find(
|
|
59993
|
+
(w) => w.chain_type === walletChainType
|
|
59430
59994
|
);
|
|
59431
|
-
if (
|
|
59432
|
-
|
|
59433
|
-
|
|
59434
|
-
|
|
59435
|
-
|
|
59436
|
-
|
|
59437
|
-
const whole = raw / divisor;
|
|
59438
|
-
const frac = raw % divisor;
|
|
59439
|
-
const fracStr = frac.toString().padStart(decimals, "0").replace(/0+$/, "");
|
|
59440
|
-
const balanceHuman = fracStr ? `${whole}.${fracStr}` : whole.toString();
|
|
59441
|
-
return {
|
|
59442
|
-
balanceBaseUnit: baseUnit,
|
|
59443
|
-
balanceHuman,
|
|
59444
|
-
balanceUsd: res.balance.amount_usd,
|
|
59445
|
-
exchangeRate: res.balance.exchange_rate,
|
|
59446
|
-
decimals,
|
|
59447
|
-
symbol
|
|
59448
|
-
};
|
|
59995
|
+
if (!matchingDepositWallet) {
|
|
59996
|
+
onCheckoutError?.({
|
|
59997
|
+
message: `Unable to pay from ${walletChainType}. Please try a different wallet.`,
|
|
59998
|
+
code: "NO_DEPOSIT_ADDRESS"
|
|
59999
|
+
});
|
|
60000
|
+
return;
|
|
59449
60001
|
}
|
|
59450
|
-
|
|
60002
|
+
setBrowserWalletInfo({
|
|
60003
|
+
...walletInfo,
|
|
60004
|
+
depositWallet: matchingDepositWallet
|
|
60005
|
+
});
|
|
60006
|
+
setBrowserWalletModalOpen(true);
|
|
59451
60007
|
},
|
|
59452
|
-
|
|
59453
|
-
|
|
59454
|
-
|
|
59455
|
-
|
|
59456
|
-
|
|
59457
|
-
|
|
59458
|
-
|
|
59459
|
-
|
|
59460
|
-
|
|
59461
|
-
|
|
59462
|
-
|
|
59463
|
-
|
|
59464
|
-
|
|
59465
|
-
|
|
59466
|
-
|
|
59467
|
-
|
|
59468
|
-
|
|
60008
|
+
[wallets, onCheckoutError]
|
|
60009
|
+
);
|
|
60010
|
+
const handleWalletConnectClick = (0, import_react27.useCallback)(() => {
|
|
60011
|
+
setWalletSelectionModalOpen(true);
|
|
60012
|
+
}, []);
|
|
60013
|
+
const handleWalletConnected = (0, import_react27.useCallback)(
|
|
60014
|
+
(walletInfo) => {
|
|
60015
|
+
const walletChainType = walletInfo.type === "phantom-solana" || walletInfo.type === "solflare" || walletInfo.type === "backpack" || walletInfo.type === "glow" ? "solana" : "ethereum";
|
|
60016
|
+
setStoredWalletChainType(walletChainType);
|
|
60017
|
+
setBrowserWalletChainType(walletChainType);
|
|
60018
|
+
const matchingDepositWallet = wallets.find(
|
|
60019
|
+
(w) => w.chain_type === walletChainType
|
|
60020
|
+
);
|
|
60021
|
+
if (!matchingDepositWallet) {
|
|
60022
|
+
onCheckoutError?.({
|
|
60023
|
+
message: `Unable to pay from ${walletChainType}. Please try a different wallet.`,
|
|
60024
|
+
code: "NO_DEPOSIT_ADDRESS"
|
|
60025
|
+
});
|
|
60026
|
+
setWalletSelectionModalOpen(false);
|
|
60027
|
+
return;
|
|
60028
|
+
}
|
|
60029
|
+
setBrowserWalletInfo({
|
|
60030
|
+
...walletInfo,
|
|
60031
|
+
depositWallet: matchingDepositWallet
|
|
60032
|
+
});
|
|
60033
|
+
setWalletSelectionModalOpen(false);
|
|
60034
|
+
setBrowserWalletModalOpen(true);
|
|
60035
|
+
},
|
|
60036
|
+
[wallets, onCheckoutError]
|
|
60037
|
+
);
|
|
60038
|
+
const handleWalletDisconnect = (0, import_react27.useCallback)(() => {
|
|
60039
|
+
setUserDisconnectedWallet(true);
|
|
60040
|
+
clearStoredWalletChainType();
|
|
60041
|
+
setBrowserWalletChainType(void 0);
|
|
60042
|
+
setBrowserWalletInfo(null);
|
|
60043
|
+
setBrowserWalletModalOpen(false);
|
|
60044
|
+
}, []);
|
|
60045
|
+
const handleClose = (0, import_react27.useCallback)(() => {
|
|
60046
|
+
onOpenChange(false);
|
|
60047
|
+
if (resetViewTimeoutRef.current) {
|
|
60048
|
+
clearTimeout(resetViewTimeoutRef.current);
|
|
60049
|
+
}
|
|
60050
|
+
resetViewTimeoutRef.current = setTimeout(() => {
|
|
60051
|
+
setView("main");
|
|
60052
|
+
setBrowserWalletInfo(null);
|
|
60053
|
+
resetViewTimeoutRef.current = null;
|
|
60054
|
+
}, 200);
|
|
60055
|
+
}, [onOpenChange]);
|
|
60056
|
+
(0, import_react27.useLayoutEffect)(() => {
|
|
60057
|
+
if (!open) return;
|
|
60058
|
+
if (resetViewTimeoutRef.current) {
|
|
60059
|
+
clearTimeout(resetViewTimeoutRef.current);
|
|
60060
|
+
resetViewTimeoutRef.current = null;
|
|
60061
|
+
}
|
|
60062
|
+
setView("main");
|
|
60063
|
+
setBrowserWalletInfo(null);
|
|
60064
|
+
}, [open]);
|
|
60065
|
+
(0, import_react27.useEffect)(
|
|
60066
|
+
() => () => {
|
|
60067
|
+
if (resetViewTimeoutRef.current) {
|
|
60068
|
+
clearTimeout(resetViewTimeoutRef.current);
|
|
60069
|
+
}
|
|
60070
|
+
},
|
|
60071
|
+
[]
|
|
60072
|
+
);
|
|
60073
|
+
const handleBack = (0, import_react27.useCallback)(() => {
|
|
60074
|
+
setView("main");
|
|
60075
|
+
}, []);
|
|
60076
|
+
const poweredByFooter = /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60077
|
+
PoweredByUnifold,
|
|
60078
|
+
{
|
|
60079
|
+
color: colors2.foregroundMuted,
|
|
60080
|
+
className: "uf-flex uf-justify-center uf-shrink-0"
|
|
60081
|
+
}
|
|
60082
|
+
) });
|
|
60083
|
+
const progressSection = paymentIntent ? (() => {
|
|
60084
|
+
const received = parseFloat(paymentIntent.amount_received_usd);
|
|
60085
|
+
const total = parseFloat(paymentIntent.amount_usd);
|
|
60086
|
+
const remaining = Math.max(total - received, 0);
|
|
60087
|
+
const pct = total > 0 ? Math.min(received / total * 100, 100) : 0;
|
|
60088
|
+
const hasPartial = received > 0;
|
|
60089
|
+
const amountStr = paymentIntent.amount_usd;
|
|
60090
|
+
const dynamicFontSize = `${Math.max(3.75 - amountStr.length * 0.15, 2)}rem`;
|
|
60091
|
+
return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-text-center uf-py-2 uf-space-y-1", children: [
|
|
60092
|
+
paymentIntent.description && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60093
|
+
"div",
|
|
60094
|
+
{
|
|
60095
|
+
className: "uf-text-xs",
|
|
60096
|
+
style: {
|
|
60097
|
+
color: colors2.foregroundMuted,
|
|
60098
|
+
fontFamily: fonts.regular
|
|
60099
|
+
},
|
|
60100
|
+
children: paymentIntent.description
|
|
60101
|
+
}
|
|
60102
|
+
),
|
|
60103
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-center", children: [
|
|
60104
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60105
|
+
"span",
|
|
60106
|
+
{
|
|
60107
|
+
className: "uf-mr-1",
|
|
60108
|
+
style: {
|
|
60109
|
+
fontSize: `calc(${dynamicFontSize} * 0.6)`,
|
|
60110
|
+
color: colors2.foregroundMuted,
|
|
60111
|
+
fontFamily: fonts.regular
|
|
60112
|
+
},
|
|
60113
|
+
children: "$"
|
|
60114
|
+
}
|
|
60115
|
+
),
|
|
60116
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60117
|
+
"span",
|
|
60118
|
+
{
|
|
60119
|
+
style: {
|
|
60120
|
+
fontSize: dynamicFontSize,
|
|
60121
|
+
color: colors2.foreground,
|
|
60122
|
+
fontFamily: fonts.regular,
|
|
60123
|
+
lineHeight: 1.1
|
|
60124
|
+
},
|
|
60125
|
+
children: amountStr
|
|
60126
|
+
}
|
|
60127
|
+
)
|
|
60128
|
+
] }),
|
|
60129
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60130
|
+
"div",
|
|
60131
|
+
{
|
|
60132
|
+
className: "uf-text-xs",
|
|
60133
|
+
style: {
|
|
60134
|
+
color: colors2.foregroundMuted,
|
|
60135
|
+
fontFamily: fonts.regular
|
|
60136
|
+
},
|
|
60137
|
+
children: paymentIntent.currency.toUpperCase()
|
|
60138
|
+
}
|
|
60139
|
+
),
|
|
60140
|
+
hasPartial && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-pt-2 uf-space-y-1.5", children: [
|
|
60141
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60142
|
+
"div",
|
|
60143
|
+
{
|
|
60144
|
+
className: "uf-w-full uf-h-1.5 uf-rounded-full uf-overflow-hidden",
|
|
60145
|
+
style: { backgroundColor: colors2.border },
|
|
60146
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60147
|
+
"div",
|
|
60148
|
+
{
|
|
60149
|
+
className: "uf-h-full uf-rounded-full uf-transition-all uf-duration-500",
|
|
60150
|
+
style: {
|
|
60151
|
+
width: `${pct}%`,
|
|
60152
|
+
backgroundColor: paymentIntent.status === "succeeded" ? "rgb(34, 197, 94)" : colors2.primary
|
|
60153
|
+
}
|
|
60154
|
+
}
|
|
60155
|
+
)
|
|
60156
|
+
}
|
|
60157
|
+
),
|
|
60158
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
|
|
60159
|
+
"div",
|
|
60160
|
+
{
|
|
60161
|
+
className: "uf-text-xs",
|
|
60162
|
+
style: {
|
|
60163
|
+
color: colors2.foregroundMuted,
|
|
60164
|
+
fontFamily: fonts.regular
|
|
60165
|
+
},
|
|
60166
|
+
children: [
|
|
60167
|
+
"$",
|
|
60168
|
+
paymentIntent.amount_received_usd,
|
|
60169
|
+
" / $",
|
|
60170
|
+
amountStr,
|
|
60171
|
+
" received",
|
|
60172
|
+
remaining > 0 && paymentIntent.status !== "succeeded" && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { style: { color: colors2.foreground, fontFamily: fonts.medium }, children: [
|
|
60173
|
+
" ",
|
|
60174
|
+
"\xB7 $",
|
|
60175
|
+
remaining.toFixed(2),
|
|
60176
|
+
" remaining"
|
|
60177
|
+
] })
|
|
60178
|
+
]
|
|
60179
|
+
}
|
|
60180
|
+
)
|
|
60181
|
+
] }),
|
|
60182
|
+
paymentIntent.status !== "requires_payment" && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "uf-pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60183
|
+
"span",
|
|
60184
|
+
{
|
|
60185
|
+
className: "uf-text-xs uf-font-medium uf-px-2.5 uf-py-1 uf-rounded-full uf-inline-block",
|
|
60186
|
+
style: {
|
|
60187
|
+
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)",
|
|
60188
|
+
color: paymentIntent.status === "succeeded" ? "rgb(34, 197, 94)" : paymentIntent.status === "processing" ? "rgb(59, 130, 246)" : "rgb(239, 68, 68)",
|
|
60189
|
+
fontFamily: fonts.medium
|
|
60190
|
+
},
|
|
60191
|
+
children: paymentIntent.status === "succeeded" ? "Payment Complete" : paymentIntent.status === "processing" ? "Partial Payment Received" : paymentIntent.status === "canceled" ? "Canceled" : paymentIntent.status === "expired" ? "Expired" : paymentIntent.status
|
|
60192
|
+
}
|
|
60193
|
+
) })
|
|
60194
|
+
] });
|
|
60195
|
+
})() : null;
|
|
60196
|
+
return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(PortalContainerProvider, { value: null, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(Dialog2, { open, onOpenChange: handleClose, modal: true, children: [
|
|
60197
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60198
|
+
DialogContent2,
|
|
60199
|
+
{
|
|
60200
|
+
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}`,
|
|
60201
|
+
style: { backgroundColor: colors2.background },
|
|
60202
|
+
onPointerDownOutside: (e) => e.preventDefault(),
|
|
60203
|
+
onInteractOutside: (e) => e.preventDefault(),
|
|
60204
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ThemeStyleInjector, { children: view === "main" ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
|
|
60205
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60206
|
+
DepositHeader,
|
|
60207
|
+
{
|
|
60208
|
+
title: modalTitle || "Checkout",
|
|
60209
|
+
showClose: true,
|
|
60210
|
+
onClose: handleClose
|
|
60211
|
+
}
|
|
60212
|
+
),
|
|
60213
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
|
|
60214
|
+
piLoading ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-space-y-3", children: [
|
|
60215
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60216
|
+
"div",
|
|
60217
|
+
{
|
|
60218
|
+
className: "uf-rounded-xl uf-p-4 uf-animate-pulse",
|
|
60219
|
+
style: {
|
|
60220
|
+
backgroundColor: components.card.backgroundColor,
|
|
60221
|
+
borderRadius: components.card.borderRadius,
|
|
60222
|
+
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
60223
|
+
},
|
|
60224
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-gap-2", children: [
|
|
60225
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60226
|
+
"div",
|
|
60227
|
+
{
|
|
60228
|
+
className: "uf-h-8 uf-w-24 uf-rounded",
|
|
60229
|
+
style: {
|
|
60230
|
+
backgroundColor: components.card.borderColor
|
|
60231
|
+
}
|
|
60232
|
+
}
|
|
60233
|
+
),
|
|
60234
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60235
|
+
"div",
|
|
60236
|
+
{
|
|
60237
|
+
className: "uf-h-4 uf-w-16 uf-rounded",
|
|
60238
|
+
style: {
|
|
60239
|
+
backgroundColor: components.card.borderColor
|
|
60240
|
+
}
|
|
60241
|
+
}
|
|
60242
|
+
)
|
|
60243
|
+
] })
|
|
60244
|
+
}
|
|
60245
|
+
),
|
|
60246
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(SkeletonButton2, {}),
|
|
60247
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(SkeletonButton2, {})
|
|
60248
|
+
] }) : piError ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
|
|
60249
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TriangleAlert, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
|
|
60250
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60251
|
+
"h3",
|
|
60252
|
+
{
|
|
60253
|
+
className: "uf-text-lg uf-font-semibold uf-mb-2",
|
|
60254
|
+
style: {
|
|
60255
|
+
color: colors2.foreground,
|
|
60256
|
+
fontFamily: fonts.semibold
|
|
60257
|
+
},
|
|
60258
|
+
children: "Unable to Load Checkout"
|
|
60259
|
+
}
|
|
60260
|
+
),
|
|
60261
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60262
|
+
"p",
|
|
60263
|
+
{
|
|
60264
|
+
className: "uf-text-sm uf-max-w-[280px]",
|
|
60265
|
+
style: {
|
|
60266
|
+
color: colors2.foregroundMuted,
|
|
60267
|
+
fontFamily: fonts.regular
|
|
60268
|
+
},
|
|
60269
|
+
children: piError instanceof Error ? piError.message : "Something went wrong. Please try again."
|
|
60270
|
+
}
|
|
60271
|
+
)
|
|
60272
|
+
] }) : paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-space-y-3", children: [
|
|
60273
|
+
progressSection,
|
|
60274
|
+
(paymentIntent.status === "requires_payment" || paymentIntent.status === "processing") && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
|
|
60275
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60276
|
+
TransferCryptoButton,
|
|
60277
|
+
{
|
|
60278
|
+
onClick: () => setView("transfer"),
|
|
60279
|
+
title: "Transfer Crypto",
|
|
60280
|
+
subtitle: "Send from any wallet or exchange",
|
|
60281
|
+
featuredTokens: projectConfig?.transfer_crypto.networks
|
|
60282
|
+
}
|
|
60283
|
+
),
|
|
60284
|
+
enableConnectWallet && !isMobileView && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60285
|
+
BrowserWalletButton,
|
|
60286
|
+
{
|
|
60287
|
+
onClick: handleBrowserWalletClick,
|
|
60288
|
+
onConnectClick: handleWalletConnectClick,
|
|
60289
|
+
onDisconnect: handleWalletDisconnect,
|
|
60290
|
+
chainType: browserWalletChainType,
|
|
60291
|
+
publishableKey
|
|
60292
|
+
}
|
|
60293
|
+
)
|
|
60294
|
+
] })
|
|
60295
|
+
] }) : null,
|
|
60296
|
+
poweredByFooter
|
|
60297
|
+
] })
|
|
60298
|
+
] }) : view === "transfer" ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
|
|
60299
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60300
|
+
DepositHeader,
|
|
60301
|
+
{
|
|
60302
|
+
title: `Pay $${remainingAmountUsd ?? paymentIntent?.amount_usd ?? ""}`,
|
|
60303
|
+
showBack: true,
|
|
60304
|
+
onBack: handleBack,
|
|
60305
|
+
onClose: handleClose
|
|
60306
|
+
}
|
|
60307
|
+
),
|
|
60308
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
|
|
60309
|
+
paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
|
|
60310
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
|
|
60311
|
+
"div",
|
|
60312
|
+
{
|
|
60313
|
+
className: "uf-rounded-lg uf-px-3 uf-py-2 uf-flex uf-items-center uf-justify-between",
|
|
60314
|
+
style: {
|
|
60315
|
+
backgroundColor: components.card.backgroundColor,
|
|
60316
|
+
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`,
|
|
60317
|
+
borderRadius: components.card.borderRadius
|
|
60318
|
+
},
|
|
60319
|
+
children: [
|
|
60320
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60321
|
+
"span",
|
|
60322
|
+
{
|
|
60323
|
+
className: "uf-text-xs",
|
|
60324
|
+
style: {
|
|
60325
|
+
color: colors2.foregroundMuted,
|
|
60326
|
+
fontFamily: fonts.regular
|
|
60327
|
+
},
|
|
60328
|
+
children: parseFloat(paymentIntent.amount_received_usd) > 0 ? `$${paymentIntent.amount_received_usd} / $${paymentIntent.amount_usd} received` : "Amount due"
|
|
60329
|
+
}
|
|
60330
|
+
),
|
|
60331
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
|
|
60332
|
+
"span",
|
|
60333
|
+
{
|
|
60334
|
+
className: "uf-text-sm uf-font-semibold",
|
|
60335
|
+
style: {
|
|
60336
|
+
color: colors2.foreground,
|
|
60337
|
+
fontFamily: fonts.semibold
|
|
60338
|
+
},
|
|
60339
|
+
children: [
|
|
60340
|
+
formatCryptoAmount(remainingCrypto ?? paymentIntent.amount),
|
|
60341
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
|
|
60342
|
+
"span",
|
|
60343
|
+
{
|
|
60344
|
+
className: "uf-text-xs uf-font-normal uf-ml-1",
|
|
60345
|
+
style: { color: colors2.foregroundMuted },
|
|
60346
|
+
children: [
|
|
60347
|
+
"($",
|
|
60348
|
+
remainingAmountUsd ?? paymentIntent.amount_usd,
|
|
60349
|
+
")"
|
|
60350
|
+
]
|
|
60351
|
+
}
|
|
60352
|
+
)
|
|
60353
|
+
]
|
|
60354
|
+
}
|
|
60355
|
+
)
|
|
60356
|
+
]
|
|
60357
|
+
}
|
|
60358
|
+
),
|
|
60359
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60360
|
+
TransferCryptoSingleInput,
|
|
60361
|
+
{
|
|
60362
|
+
userId: paymentIntent.user_id || "",
|
|
60363
|
+
publishableKey,
|
|
60364
|
+
clientSecret,
|
|
60365
|
+
recipientAddress: paymentIntent.recipient_address,
|
|
60366
|
+
destinationChainType: paymentIntent.destination_chain_type,
|
|
60367
|
+
destinationChainId: paymentIntent.destination_chain_id,
|
|
60368
|
+
destinationTokenAddress: paymentIntent.destination_token_address,
|
|
60369
|
+
depositConfirmationMode: "auto_ui",
|
|
60370
|
+
wallets,
|
|
60371
|
+
onSourceTokenChange: setSelectedSource,
|
|
60372
|
+
checkoutQuote: sourceQuote ? {
|
|
60373
|
+
sourceAmount: sourceQuote.source_amount,
|
|
60374
|
+
sourceTokenDecimals: sourceQuote.source_token_decimals,
|
|
60375
|
+
sourceTokenSymbol: sourceQuote.source_token_symbol,
|
|
60376
|
+
sourceAmountUsd: sourceQuote.source_amount_usd
|
|
60377
|
+
} : null
|
|
60378
|
+
}
|
|
60379
|
+
)
|
|
60380
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(SkeletonButton2, {}),
|
|
60381
|
+
poweredByFooter
|
|
60382
|
+
] })
|
|
60383
|
+
] }) : null })
|
|
60384
|
+
}
|
|
60385
|
+
),
|
|
60386
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60387
|
+
WalletSelectionModal,
|
|
60388
|
+
{
|
|
60389
|
+
open: walletSelectionModalOpen,
|
|
60390
|
+
onOpenChange: setWalletSelectionModalOpen,
|
|
60391
|
+
onWalletConnected: handleWalletConnected,
|
|
60392
|
+
onClose: () => setWalletSelectionModalOpen(false),
|
|
60393
|
+
theme: resolvedTheme
|
|
60394
|
+
}
|
|
60395
|
+
),
|
|
60396
|
+
browserWalletInfo && browserWalletInfo.depositWallet && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60397
|
+
BrowserWalletModal,
|
|
60398
|
+
{
|
|
60399
|
+
open: browserWalletModalOpen,
|
|
60400
|
+
onOpenChange: setBrowserWalletModalOpen,
|
|
60401
|
+
onFullClose: handleClose,
|
|
60402
|
+
walletInfo: browserWalletInfo,
|
|
60403
|
+
depositWallet: browserWalletInfo.depositWallet,
|
|
60404
|
+
userId: paymentIntent?.user_id || "",
|
|
60405
|
+
publishableKey,
|
|
60406
|
+
clientSecret,
|
|
60407
|
+
theme: resolvedTheme,
|
|
60408
|
+
prefillAmountUsd: remainingAmountUsd,
|
|
60409
|
+
checkoutAmountUsd: paymentIntent?.amount_usd,
|
|
60410
|
+
checkoutReceivedUsd: paymentIntent?.amount_received_usd,
|
|
60411
|
+
onSuccess: (txHash) => {
|
|
60412
|
+
onCheckoutSuccess?.({
|
|
60413
|
+
paymentIntentId: paymentIntent?.id || "",
|
|
60414
|
+
status: "processing"
|
|
60415
|
+
});
|
|
60416
|
+
},
|
|
60417
|
+
onError: (error) => {
|
|
60418
|
+
onCheckoutError?.({
|
|
60419
|
+
message: error.message,
|
|
60420
|
+
error
|
|
60421
|
+
});
|
|
60422
|
+
},
|
|
60423
|
+
onWalletDisconnect: handleWalletDisconnect,
|
|
60424
|
+
onNewDeposit: () => {
|
|
60425
|
+
setBrowserWalletModalOpen(false);
|
|
60426
|
+
setView("main");
|
|
60427
|
+
},
|
|
60428
|
+
onDone: () => {
|
|
60429
|
+
setBrowserWalletModalOpen(false);
|
|
60430
|
+
setView("main");
|
|
60431
|
+
},
|
|
60432
|
+
paymentIntentStatus: paymentIntent?.status
|
|
60433
|
+
}
|
|
60434
|
+
)
|
|
60435
|
+
] }) });
|
|
60436
|
+
}
|
|
60437
|
+
function useSupportedDestinationTokens(publishableKey, enabled = true) {
|
|
60438
|
+
return useQuery({
|
|
60439
|
+
queryKey: ["unifold", "supportedDestinationTokens", publishableKey],
|
|
60440
|
+
queryFn: () => getSupportedDestinationTokens(publishableKey),
|
|
60441
|
+
staleTime: 1e3 * 60 * 5,
|
|
60442
|
+
gcTime: 1e3 * 60 * 30,
|
|
60443
|
+
refetchOnMount: false,
|
|
60444
|
+
refetchOnWindowFocus: false,
|
|
60445
|
+
enabled
|
|
60446
|
+
});
|
|
60447
|
+
}
|
|
60448
|
+
function useSourceTokenValidation(params) {
|
|
60449
|
+
const {
|
|
60450
|
+
sourceChainType,
|
|
60451
|
+
sourceChainId,
|
|
60452
|
+
sourceTokenAddress,
|
|
60453
|
+
sourceTokenSymbol,
|
|
60454
|
+
publishableKey,
|
|
60455
|
+
enabled = true
|
|
60456
|
+
} = params;
|
|
60457
|
+
const hasParams = !!sourceChainType && !!sourceChainId && !!sourceTokenAddress;
|
|
60458
|
+
return useQuery({
|
|
60459
|
+
queryKey: [
|
|
60460
|
+
"unifold",
|
|
60461
|
+
"sourceTokenValidation",
|
|
60462
|
+
sourceChainType ?? null,
|
|
60463
|
+
sourceChainId ?? null,
|
|
60464
|
+
sourceTokenAddress ?? null,
|
|
60465
|
+
publishableKey
|
|
60466
|
+
],
|
|
60467
|
+
queryFn: async () => {
|
|
60468
|
+
const res = await getSupportedDepositTokens(publishableKey);
|
|
60469
|
+
let matchedMinUsd = null;
|
|
60470
|
+
let matchedProcessingTime = null;
|
|
60471
|
+
let matchedSlippage = null;
|
|
60472
|
+
let matchedPriceImpact = null;
|
|
60473
|
+
const found = res.data.some(
|
|
60474
|
+
(token) => token.chains.some((chain) => {
|
|
60475
|
+
const match = chain.chain_type === sourceChainType && chain.chain_id === sourceChainId && chain.token_address.toLowerCase() === sourceTokenAddress.toLowerCase();
|
|
60476
|
+
if (match) {
|
|
60477
|
+
matchedMinUsd = chain.minimum_deposit_amount_usd;
|
|
60478
|
+
matchedProcessingTime = chain.estimated_processing_time;
|
|
60479
|
+
matchedSlippage = chain.max_slippage_percent;
|
|
60480
|
+
matchedPriceImpact = chain.estimated_price_impact_percent;
|
|
60481
|
+
}
|
|
60482
|
+
return match;
|
|
60483
|
+
})
|
|
60484
|
+
);
|
|
60485
|
+
return {
|
|
60486
|
+
isSupported: found,
|
|
60487
|
+
minimumAmountUsd: matchedMinUsd,
|
|
60488
|
+
estimatedProcessingTime: matchedProcessingTime,
|
|
60489
|
+
maxSlippagePercent: matchedSlippage,
|
|
60490
|
+
priceImpactPercent: matchedPriceImpact,
|
|
60491
|
+
errorMessage: found ? null : `${sourceTokenSymbol || "Source token"} is not a supported withdrawal token. Supported tokens include USDC, USDT, and other stablecoins.`
|
|
60492
|
+
};
|
|
60493
|
+
},
|
|
60494
|
+
enabled: enabled && hasParams,
|
|
60495
|
+
staleTime: 1e3 * 60 * 5,
|
|
60496
|
+
gcTime: 1e3 * 60 * 30,
|
|
60497
|
+
refetchOnMount: false,
|
|
60498
|
+
refetchOnWindowFocus: false
|
|
60499
|
+
});
|
|
60500
|
+
}
|
|
60501
|
+
function useAddressBalance(params) {
|
|
60502
|
+
const {
|
|
60503
|
+
address,
|
|
60504
|
+
chainType,
|
|
60505
|
+
chainId,
|
|
60506
|
+
tokenAddress,
|
|
60507
|
+
publishableKey,
|
|
60508
|
+
enabled = true
|
|
60509
|
+
} = params;
|
|
60510
|
+
const hasParams = !!address && !!chainType && !!chainId && !!tokenAddress;
|
|
60511
|
+
return useQuery({
|
|
60512
|
+
queryKey: [
|
|
60513
|
+
"unifold",
|
|
60514
|
+
"addressBalance",
|
|
60515
|
+
address ?? null,
|
|
60516
|
+
chainType ?? null,
|
|
60517
|
+
chainId ?? null,
|
|
60518
|
+
tokenAddress ?? null,
|
|
60519
|
+
publishableKey
|
|
60520
|
+
],
|
|
60521
|
+
queryFn: async () => {
|
|
60522
|
+
const res = await getAddressBalance(
|
|
60523
|
+
address,
|
|
60524
|
+
chainType,
|
|
60525
|
+
chainId,
|
|
60526
|
+
tokenAddress,
|
|
60527
|
+
publishableKey
|
|
60528
|
+
);
|
|
60529
|
+
if (res.balance) {
|
|
60530
|
+
const decimals = res.balance.token?.decimals ?? 6;
|
|
60531
|
+
const symbol = res.balance.token?.symbol ?? "";
|
|
60532
|
+
const baseUnit = res.balance.amount;
|
|
60533
|
+
const raw = BigInt(baseUnit);
|
|
60534
|
+
const divisor = BigInt(10 ** decimals);
|
|
60535
|
+
const whole = raw / divisor;
|
|
60536
|
+
const frac = raw % divisor;
|
|
60537
|
+
const fracStr = frac.toString().padStart(decimals, "0").replace(/0+$/, "");
|
|
60538
|
+
const balanceHuman = fracStr ? `${whole}.${fracStr}` : whole.toString();
|
|
60539
|
+
return {
|
|
60540
|
+
balanceBaseUnit: baseUnit,
|
|
60541
|
+
balanceHuman,
|
|
60542
|
+
balanceUsd: res.balance.amount_usd,
|
|
60543
|
+
exchangeRate: res.balance.exchange_rate,
|
|
60544
|
+
decimals,
|
|
60545
|
+
symbol
|
|
60546
|
+
};
|
|
60547
|
+
}
|
|
60548
|
+
return { balanceBaseUnit: "0", balanceHuman: "0", balanceUsd: "0", exchangeRate: null, decimals: 6, symbol: "" };
|
|
60549
|
+
},
|
|
60550
|
+
enabled: enabled && hasParams,
|
|
60551
|
+
staleTime: 1e3 * 30,
|
|
60552
|
+
gcTime: 1e3 * 60 * 5,
|
|
60553
|
+
refetchInterval: 1e3 * 30,
|
|
60554
|
+
refetchOnMount: "always",
|
|
60555
|
+
refetchOnWindowFocus: false
|
|
60556
|
+
});
|
|
60557
|
+
}
|
|
60558
|
+
function useExecutions(userId, publishableKey, options2) {
|
|
60559
|
+
const actionType = options2?.actionType ?? ActionType.Deposit;
|
|
60560
|
+
return useQuery({
|
|
60561
|
+
queryKey: ["unifold", "executions", actionType, userId, publishableKey],
|
|
60562
|
+
queryFn: () => queryExecutions(userId, publishableKey, actionType),
|
|
60563
|
+
enabled: (options2?.enabled ?? true) && !!userId,
|
|
60564
|
+
refetchInterval: options2?.refetchInterval ?? 3e3,
|
|
60565
|
+
staleTime: 0,
|
|
60566
|
+
gcTime: 1e3 * 60 * 5,
|
|
59469
60567
|
refetchOnWindowFocus: false
|
|
59470
60568
|
});
|
|
59471
60569
|
}
|
|
@@ -59480,20 +60578,20 @@ function useWithdrawPolling({
|
|
|
59480
60578
|
onWithdrawSuccess,
|
|
59481
60579
|
onWithdrawError
|
|
59482
60580
|
}) {
|
|
59483
|
-
const [executions, setExecutions] = (0,
|
|
59484
|
-
const [isPolling, setIsPolling] = (0,
|
|
59485
|
-
const enabledAtRef = (0,
|
|
59486
|
-
const trackedRef = (0,
|
|
59487
|
-
const prevEnabledRef = (0,
|
|
59488
|
-
const onSuccessRef = (0,
|
|
59489
|
-
const onErrorRef = (0,
|
|
59490
|
-
(0,
|
|
60581
|
+
const [executions, setExecutions] = (0, import_react29.useState)([]);
|
|
60582
|
+
const [isPolling, setIsPolling] = (0, import_react29.useState)(false);
|
|
60583
|
+
const enabledAtRef = (0, import_react29.useRef)(/* @__PURE__ */ new Date());
|
|
60584
|
+
const trackedRef = (0, import_react29.useRef)(/* @__PURE__ */ new Map());
|
|
60585
|
+
const prevEnabledRef = (0, import_react29.useRef)(false);
|
|
60586
|
+
const onSuccessRef = (0, import_react29.useRef)(onWithdrawSuccess);
|
|
60587
|
+
const onErrorRef = (0, import_react29.useRef)(onWithdrawError);
|
|
60588
|
+
(0, import_react29.useEffect)(() => {
|
|
59491
60589
|
onSuccessRef.current = onWithdrawSuccess;
|
|
59492
60590
|
}, [onWithdrawSuccess]);
|
|
59493
|
-
(0,
|
|
60591
|
+
(0, import_react29.useEffect)(() => {
|
|
59494
60592
|
onErrorRef.current = onWithdrawError;
|
|
59495
60593
|
}, [onWithdrawError]);
|
|
59496
|
-
(0,
|
|
60594
|
+
(0, import_react29.useEffect)(() => {
|
|
59497
60595
|
if (enabled && !prevEnabledRef.current) {
|
|
59498
60596
|
enabledAtRef.current = /* @__PURE__ */ new Date();
|
|
59499
60597
|
trackedRef.current.clear();
|
|
@@ -59503,7 +60601,7 @@ function useWithdrawPolling({
|
|
|
59503
60601
|
}
|
|
59504
60602
|
prevEnabledRef.current = enabled;
|
|
59505
60603
|
}, [enabled]);
|
|
59506
|
-
(0,
|
|
60604
|
+
(0, import_react29.useEffect)(() => {
|
|
59507
60605
|
if (!userId || !enabled) return;
|
|
59508
60606
|
const enabledAt = enabledAtRef.current;
|
|
59509
60607
|
const poll = async () => {
|
|
@@ -59565,7 +60663,7 @@ function useWithdrawPolling({
|
|
|
59565
60663
|
setIsPolling(false);
|
|
59566
60664
|
};
|
|
59567
60665
|
}, [userId, publishableKey, enabled]);
|
|
59568
|
-
(0,
|
|
60666
|
+
(0, import_react29.useEffect)(() => {
|
|
59569
60667
|
if (!enabled || !depositWalletId) return;
|
|
59570
60668
|
const trigger = async () => {
|
|
59571
60669
|
try {
|
|
@@ -59593,8 +60691,8 @@ function WithdrawDoubleInput({
|
|
|
59593
60691
|
const isDarkMode = useTheme().themeClass.includes("uf-dark");
|
|
59594
60692
|
const selectedToken = selectedTokenSymbol ? tokens.find((t11) => t11.symbol === selectedTokenSymbol) : void 0;
|
|
59595
60693
|
const availableChainsForToken = selectedToken?.chains || [];
|
|
59596
|
-
const renderTokenItem = (tokenData) => /* @__PURE__ */ (0,
|
|
59597
|
-
/* @__PURE__ */ (0,
|
|
60694
|
+
const renderTokenItem = (tokenData) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
60695
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
59598
60696
|
"img",
|
|
59599
60697
|
{
|
|
59600
60698
|
src: tokenData.icon_url,
|
|
@@ -59605,10 +60703,10 @@ function WithdrawDoubleInput({
|
|
|
59605
60703
|
className: "uf-rounded-full uf-flex-shrink-0"
|
|
59606
60704
|
}
|
|
59607
60705
|
),
|
|
59608
|
-
/* @__PURE__ */ (0,
|
|
60706
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "uf-text-xs uf-font-normal", children: tokenData.symbol })
|
|
59609
60707
|
] });
|
|
59610
|
-
const renderChainItem = (chainData) => /* @__PURE__ */ (0,
|
|
59611
|
-
/* @__PURE__ */ (0,
|
|
60708
|
+
const renderChainItem = (chainData) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
60709
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
59612
60710
|
"img",
|
|
59613
60711
|
{
|
|
59614
60712
|
src: chainData.icon_url,
|
|
@@ -59619,14 +60717,14 @@ function WithdrawDoubleInput({
|
|
|
59619
60717
|
className: "uf-rounded-full uf-flex-shrink-0"
|
|
59620
60718
|
}
|
|
59621
60719
|
),
|
|
59622
|
-
/* @__PURE__ */ (0,
|
|
60720
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "uf-text-xs uf-font-normal", children: chainData.chain_name })
|
|
59623
60721
|
] });
|
|
59624
60722
|
const currentChainData = selectedChainKey ? availableChainsForToken.find(
|
|
59625
60723
|
(c) => getChainKey4(c.chain_id, c.chain_type) === selectedChainKey
|
|
59626
60724
|
) : void 0;
|
|
59627
|
-
return /* @__PURE__ */ (0,
|
|
59628
|
-
/* @__PURE__ */ (0,
|
|
59629
|
-
/* @__PURE__ */ (0,
|
|
60725
|
+
return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "uf-grid uf-grid-cols-2 uf-gap-2.5", children: [
|
|
60726
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { children: [
|
|
60727
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
59630
60728
|
"div",
|
|
59631
60729
|
{
|
|
59632
60730
|
className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1",
|
|
@@ -59634,14 +60732,14 @@ function WithdrawDoubleInput({
|
|
|
59634
60732
|
children: t7.receiveToken
|
|
59635
60733
|
}
|
|
59636
60734
|
),
|
|
59637
|
-
/* @__PURE__ */ (0,
|
|
60735
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
|
|
59638
60736
|
Select2,
|
|
59639
60737
|
{
|
|
59640
60738
|
value: selectedTokenSymbol ?? "",
|
|
59641
60739
|
onValueChange: onTokenChange,
|
|
59642
60740
|
disabled: isLoading || tokens.length === 0,
|
|
59643
60741
|
children: [
|
|
59644
|
-
/* @__PURE__ */ (0,
|
|
60742
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
59645
60743
|
SelectTrigger2,
|
|
59646
60744
|
{
|
|
59647
60745
|
className: "uf-h-10 hover:uf-opacity-90 uf-text-foreground disabled:uf-opacity-50",
|
|
@@ -59649,10 +60747,10 @@ function WithdrawDoubleInput({
|
|
|
59649
60747
|
backgroundColor: components.card.backgroundColor,
|
|
59650
60748
|
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
59651
60749
|
},
|
|
59652
|
-
children: /* @__PURE__ */ (0,
|
|
60750
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(SelectValue2, { children: isLoading || !selectedTokenSymbol ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t7.loading }) : selectedToken ? renderTokenItem(selectedToken) : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "uf-text-xs uf-font-normal", children: selectedTokenSymbol }) })
|
|
59653
60751
|
}
|
|
59654
60752
|
),
|
|
59655
|
-
/* @__PURE__ */ (0,
|
|
60753
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
59656
60754
|
SelectContent2,
|
|
59657
60755
|
{
|
|
59658
60756
|
className: "uf-bg-secondary uf-border uf-text-foreground uf-max-h-[300px]",
|
|
@@ -59660,7 +60758,7 @@ function WithdrawDoubleInput({
|
|
|
59660
60758
|
border: `1px solid ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)"}`,
|
|
59661
60759
|
...fonts.regular ? { "--uf-font-family": fonts.regular } : {}
|
|
59662
60760
|
},
|
|
59663
|
-
children: tokens.map((tokenData) => /* @__PURE__ */ (0,
|
|
60761
|
+
children: tokens.map((tokenData) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
59664
60762
|
SelectItem2,
|
|
59665
60763
|
{
|
|
59666
60764
|
value: tokenData.symbol,
|
|
@@ -59675,8 +60773,8 @@ function WithdrawDoubleInput({
|
|
|
59675
60773
|
}
|
|
59676
60774
|
)
|
|
59677
60775
|
] }),
|
|
59678
|
-
/* @__PURE__ */ (0,
|
|
59679
|
-
/* @__PURE__ */ (0,
|
|
60776
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { children: [
|
|
60777
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
59680
60778
|
"div",
|
|
59681
60779
|
{
|
|
59682
60780
|
className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1",
|
|
@@ -59684,14 +60782,14 @@ function WithdrawDoubleInput({
|
|
|
59684
60782
|
children: t7.receiveChain
|
|
59685
60783
|
}
|
|
59686
60784
|
),
|
|
59687
|
-
/* @__PURE__ */ (0,
|
|
60785
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
|
|
59688
60786
|
Select2,
|
|
59689
60787
|
{
|
|
59690
60788
|
value: selectedChainKey ?? "",
|
|
59691
60789
|
onValueChange: onChainChange,
|
|
59692
60790
|
disabled: isLoading || availableChainsForToken.length === 0,
|
|
59693
60791
|
children: [
|
|
59694
|
-
/* @__PURE__ */ (0,
|
|
60792
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
59695
60793
|
SelectTrigger2,
|
|
59696
60794
|
{
|
|
59697
60795
|
className: "uf-h-10 hover:uf-opacity-90 uf-text-foreground disabled:uf-opacity-50",
|
|
@@ -59699,10 +60797,10 @@ function WithdrawDoubleInput({
|
|
|
59699
60797
|
backgroundColor: components.card.backgroundColor,
|
|
59700
60798
|
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
59701
60799
|
},
|
|
59702
|
-
children: /* @__PURE__ */ (0,
|
|
60800
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(SelectValue2, { children: isLoading || !selectedChainKey ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t7.loading }) : currentChainData ? renderChainItem(currentChainData) : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "uf-text-xs uf-font-normal", children: selectedChainKey }) })
|
|
59703
60801
|
}
|
|
59704
60802
|
),
|
|
59705
|
-
/* @__PURE__ */ (0,
|
|
60803
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
59706
60804
|
SelectContent2,
|
|
59707
60805
|
{
|
|
59708
60806
|
align: "end",
|
|
@@ -59711,9 +60809,9 @@ function WithdrawDoubleInput({
|
|
|
59711
60809
|
border: `1px solid ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)"}`,
|
|
59712
60810
|
...fonts.regular ? { "--uf-font-family": fonts.regular } : {}
|
|
59713
60811
|
},
|
|
59714
|
-
children: availableChainsForToken.length === 0 ? /* @__PURE__ */ (0,
|
|
60812
|
+
children: availableChainsForToken.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "uf-px-2 uf-py-3 uf-text-xs uf-text-muted-foreground uf-text-center", children: "No chains available" }) : availableChainsForToken.map((chainData) => {
|
|
59715
60813
|
const chainKey = getChainKey4(chainData.chain_id, chainData.chain_type);
|
|
59716
|
-
return /* @__PURE__ */ (0,
|
|
60814
|
+
return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
59717
60815
|
SelectItem2,
|
|
59718
60816
|
{
|
|
59719
60817
|
value: chainKey,
|
|
@@ -59878,9 +60976,56 @@ async function sendSolanaWithdraw(params) {
|
|
|
59878
60976
|
);
|
|
59879
60977
|
return sendResponse.signature;
|
|
59880
60978
|
}
|
|
60979
|
+
var HYPERCORE_CHAIN_ID = "1337";
|
|
60980
|
+
var HYPERCORE_SPOT_USDC_ADDRESS = "0x6d1e7cde53ba9467b783cb7c530ce054";
|
|
60981
|
+
function isHypercoreChain(chainId) {
|
|
60982
|
+
return chainId === HYPERCORE_CHAIN_ID;
|
|
60983
|
+
}
|
|
60984
|
+
async function sendHypercoreWithdraw(params) {
|
|
60985
|
+
const {
|
|
60986
|
+
provider,
|
|
60987
|
+
fromAddress,
|
|
60988
|
+
depositWalletAddress,
|
|
60989
|
+
sourceTokenAddress,
|
|
60990
|
+
amount,
|
|
60991
|
+
tokenSymbol,
|
|
60992
|
+
publishableKey
|
|
60993
|
+
} = params;
|
|
60994
|
+
const isSpot = sourceTokenAddress.toLowerCase() === HYPERCORE_SPOT_USDC_ADDRESS;
|
|
60995
|
+
const currentChainHex = await provider.request({
|
|
60996
|
+
method: "eth_chainId",
|
|
60997
|
+
params: []
|
|
60998
|
+
});
|
|
60999
|
+
const activeChainId = String(parseInt(currentChainHex, 16));
|
|
61000
|
+
const buildResult = await buildHypercoreTransaction(
|
|
61001
|
+
{
|
|
61002
|
+
action_type: isSpot ? "spot_send" : "usd_send",
|
|
61003
|
+
signature_chain_type: "ethereum",
|
|
61004
|
+
signature_chain_id: activeChainId,
|
|
61005
|
+
recipient_address: depositWalletAddress,
|
|
61006
|
+
token_address: sourceTokenAddress,
|
|
61007
|
+
token_symbol: tokenSymbol || void 0,
|
|
61008
|
+
amount
|
|
61009
|
+
},
|
|
61010
|
+
publishableKey
|
|
61011
|
+
);
|
|
61012
|
+
const signature = await provider.request({
|
|
61013
|
+
method: "eth_signTypedData_v4",
|
|
61014
|
+
params: [fromAddress, JSON.stringify(buildResult.typed_data)]
|
|
61015
|
+
});
|
|
61016
|
+
await sendHypercoreTransaction(
|
|
61017
|
+
{
|
|
61018
|
+
action_payload: buildResult.action_payload,
|
|
61019
|
+
signature,
|
|
61020
|
+
nonce: buildResult.nonce
|
|
61021
|
+
},
|
|
61022
|
+
publishableKey
|
|
61023
|
+
);
|
|
61024
|
+
}
|
|
59881
61025
|
async function detectBrowserWallet(chainType, senderAddress) {
|
|
59882
61026
|
const win = typeof window !== "undefined" ? window : null;
|
|
59883
61027
|
if (!win || !senderAddress) return null;
|
|
61028
|
+
if (getUserDisconnectedWallet()) return null;
|
|
59884
61029
|
const anyWin = win;
|
|
59885
61030
|
if (chainType === "solana") {
|
|
59886
61031
|
const solProviders = [];
|
|
@@ -59914,28 +61059,44 @@ async function detectBrowserWallet(chainType, senderAddress) {
|
|
|
59914
61059
|
evmProviders.push({ provider: p, name });
|
|
59915
61060
|
}
|
|
59916
61061
|
};
|
|
59917
|
-
|
|
59918
|
-
|
|
59919
|
-
|
|
59920
|
-
|
|
59921
|
-
|
|
59922
|
-
|
|
59923
|
-
|
|
59924
|
-
|
|
59925
|
-
|
|
59926
|
-
|
|
59927
|
-
|
|
59928
|
-
|
|
59929
|
-
|
|
59930
|
-
|
|
59931
|
-
|
|
59932
|
-
|
|
59933
|
-
|
|
59934
|
-
if (
|
|
59935
|
-
else if (
|
|
59936
|
-
else if (
|
|
59937
|
-
else if (
|
|
59938
|
-
|
|
61062
|
+
if (!anyWin.__eip6963Providers) {
|
|
61063
|
+
anyWin.__eip6963Providers = [];
|
|
61064
|
+
}
|
|
61065
|
+
const handleAnnouncement = (event) => {
|
|
61066
|
+
const { detail } = event;
|
|
61067
|
+
if (!detail?.info || !detail?.provider) return;
|
|
61068
|
+
const exists = anyWin.__eip6963Providers.some((p) => p.info.uuid === detail.info.uuid);
|
|
61069
|
+
if (!exists) anyWin.__eip6963Providers.push(detail);
|
|
61070
|
+
};
|
|
61071
|
+
win.addEventListener("eip6963:announceProvider", handleAnnouncement);
|
|
61072
|
+
win.dispatchEvent(new Event("eip6963:requestProvider"));
|
|
61073
|
+
win.removeEventListener("eip6963:announceProvider", handleAnnouncement);
|
|
61074
|
+
for (const detail of anyWin.__eip6963Providers) {
|
|
61075
|
+
const rdns = detail.info?.rdns || "";
|
|
61076
|
+
let name = detail.info?.name || "Wallet";
|
|
61077
|
+
if (rdns.includes("metamask")) name = "MetaMask";
|
|
61078
|
+
else if (rdns.includes("phantom")) name = "Phantom";
|
|
61079
|
+
else if (rdns.includes("coinbase")) name = "Coinbase";
|
|
61080
|
+
else if (rdns.includes("rabby")) name = "Rabby";
|
|
61081
|
+
else if (rdns.includes("rainbow")) name = "Rainbow";
|
|
61082
|
+
else if (rdns.includes("okx")) name = "OKX Wallet";
|
|
61083
|
+
else if (rdns.includes("trust")) name = "Trust Wallet";
|
|
61084
|
+
add(detail.provider, name);
|
|
61085
|
+
}
|
|
61086
|
+
if (evmProviders.length === 0) {
|
|
61087
|
+
add(anyWin.phantom?.ethereum, "Phantom");
|
|
61088
|
+
add(anyWin.coinbaseWalletExtension, "Coinbase");
|
|
61089
|
+
add(anyWin.trustwallet?.ethereum, "Trust Wallet");
|
|
61090
|
+
add(anyWin.okxwallet, "OKX Wallet");
|
|
61091
|
+
if (evmProviders.length === 0 && win.ethereum) {
|
|
61092
|
+
const eth = win.ethereum;
|
|
61093
|
+
let name = "Wallet";
|
|
61094
|
+
if (eth.isMetaMask && !eth.isPhantom && !eth.isRabby) name = "MetaMask";
|
|
61095
|
+
else if (eth.isRabby) name = "Rabby";
|
|
61096
|
+
else if (eth.isRainbow) name = "Rainbow";
|
|
61097
|
+
else if (eth.isCoinbaseWallet) name = "Coinbase";
|
|
61098
|
+
add(eth, name);
|
|
61099
|
+
}
|
|
59939
61100
|
}
|
|
59940
61101
|
for (const { provider, name } of evmProviders) {
|
|
59941
61102
|
try {
|
|
@@ -59988,12 +61149,9 @@ function WithdrawForm({
|
|
|
59988
61149
|
estimatedProcessingTime,
|
|
59989
61150
|
maxSlippagePercent,
|
|
59990
61151
|
priceImpactPercent,
|
|
59991
|
-
|
|
61152
|
+
senderAddress,
|
|
59992
61153
|
sourceChainId,
|
|
59993
61154
|
sourceTokenAddress,
|
|
59994
|
-
isWalletMatch,
|
|
59995
|
-
connectedWalletName,
|
|
59996
|
-
canWithdraw,
|
|
59997
61155
|
onWithdraw,
|
|
59998
61156
|
onWithdrawError,
|
|
59999
61157
|
onDepositWalletCreation,
|
|
@@ -60001,22 +61159,22 @@ function WithdrawForm({
|
|
|
60001
61159
|
footerLeft
|
|
60002
61160
|
}) {
|
|
60003
61161
|
const { colors: colors2, fonts, components } = useTheme();
|
|
60004
|
-
const [recipientAddress, setRecipientAddress] = (0,
|
|
60005
|
-
const [amount, setAmount] = (0,
|
|
60006
|
-
const [inputUnit, setInputUnit] = (0,
|
|
60007
|
-
const [isSubmitting, setIsSubmitting] = (0,
|
|
60008
|
-
const [submitError, setSubmitError] = (0,
|
|
60009
|
-
const [detailsExpanded, setDetailsExpanded] = (0,
|
|
60010
|
-
const [glossaryOpen, setGlossaryOpen] = (0,
|
|
60011
|
-
(0,
|
|
61162
|
+
const [recipientAddress, setRecipientAddress] = (0, import_react30.useState)(recipientAddressProp || "");
|
|
61163
|
+
const [amount, setAmount] = (0, import_react30.useState)("");
|
|
61164
|
+
const [inputUnit, setInputUnit] = (0, import_react30.useState)("crypto");
|
|
61165
|
+
const [isSubmitting, setIsSubmitting] = (0, import_react30.useState)(false);
|
|
61166
|
+
const [submitError, setSubmitError] = (0, import_react30.useState)(null);
|
|
61167
|
+
const [detailsExpanded, setDetailsExpanded] = (0, import_react30.useState)(false);
|
|
61168
|
+
const [glossaryOpen, setGlossaryOpen] = (0, import_react30.useState)(false);
|
|
61169
|
+
(0, import_react30.useEffect)(() => {
|
|
60012
61170
|
setRecipientAddress(recipientAddressProp || "");
|
|
60013
61171
|
setAmount("");
|
|
60014
61172
|
setInputUnit("crypto");
|
|
60015
61173
|
setSubmitError(null);
|
|
60016
61174
|
}, [recipientAddressProp]);
|
|
60017
61175
|
const trimmedAddress = recipientAddress.trim();
|
|
60018
|
-
const [debouncedAddress, setDebouncedAddress] = (0,
|
|
60019
|
-
(0,
|
|
61176
|
+
const [debouncedAddress, setDebouncedAddress] = (0, import_react30.useState)(trimmedAddress);
|
|
61177
|
+
(0, import_react30.useEffect)(() => {
|
|
60020
61178
|
const id = setTimeout(() => setDebouncedAddress(trimmedAddress), 500);
|
|
60021
61179
|
return () => clearTimeout(id);
|
|
60022
61180
|
}, [trimmedAddress]);
|
|
@@ -60033,7 +61191,7 @@ function WithdrawForm({
|
|
|
60033
61191
|
enabled: debouncedAddress.length > 5 && !!selectedChain
|
|
60034
61192
|
});
|
|
60035
61193
|
const isDebouncing = trimmedAddress !== debouncedAddress;
|
|
60036
|
-
const addressError = (0,
|
|
61194
|
+
const addressError = (0, import_react30.useMemo)(() => {
|
|
60037
61195
|
if (!trimmedAddress || trimmedAddress.length <= 5) return null;
|
|
60038
61196
|
if (isDebouncing || isVerifyingAddress) return null;
|
|
60039
61197
|
if (verifyError) return t8.invalidAddress;
|
|
@@ -60047,47 +61205,47 @@ function WithdrawForm({
|
|
|
60047
61205
|
return null;
|
|
60048
61206
|
}, [trimmedAddress, isDebouncing, isVerifyingAddress, verifyError, addressVerification, selectedChain, selectedToken]);
|
|
60049
61207
|
const isAddressValid = !isDebouncing && !!addressVerification?.valid && !addressError;
|
|
60050
|
-
const exchangeRate = (0,
|
|
61208
|
+
const exchangeRate = (0, import_react30.useMemo)(() => {
|
|
60051
61209
|
if (!balanceData?.exchangeRate) return 0;
|
|
60052
61210
|
return parseFloat(balanceData.exchangeRate);
|
|
60053
61211
|
}, [balanceData]);
|
|
60054
|
-
const balanceCrypto = (0,
|
|
61212
|
+
const balanceCrypto = (0, import_react30.useMemo)(() => {
|
|
60055
61213
|
if (!balanceData?.balanceHuman) return 0;
|
|
60056
61214
|
return parseFloat(balanceData.balanceHuman);
|
|
60057
61215
|
}, [balanceData]);
|
|
60058
|
-
const balanceUsdNum = (0,
|
|
61216
|
+
const balanceUsdNum = (0, import_react30.useMemo)(() => {
|
|
60059
61217
|
if (!balanceData?.balanceUsd) return 0;
|
|
60060
61218
|
return parseFloat(balanceData.balanceUsd);
|
|
60061
61219
|
}, [balanceData]);
|
|
60062
61220
|
const tokenSymbol = sourceTokenSymbol || balanceData?.symbol || "TOKEN";
|
|
60063
61221
|
const sourceDecimals = balanceData?.decimals ?? 6;
|
|
60064
|
-
const cryptoAmountFromInput = (0,
|
|
61222
|
+
const cryptoAmountFromInput = (0, import_react30.useMemo)(() => {
|
|
60065
61223
|
const val = parseFloat(amount);
|
|
60066
61224
|
if (!val || val <= 0) return 0;
|
|
60067
61225
|
if (inputUnit === "crypto") return val;
|
|
60068
61226
|
return exchangeRate > 0 ? val / exchangeRate : 0;
|
|
60069
61227
|
}, [amount, inputUnit, exchangeRate]);
|
|
60070
|
-
const fiatAmountFromInput = (0,
|
|
61228
|
+
const fiatAmountFromInput = (0, import_react30.useMemo)(() => {
|
|
60071
61229
|
const val = parseFloat(amount);
|
|
60072
61230
|
if (!val || val <= 0) return 0;
|
|
60073
61231
|
if (inputUnit === "fiat") return val;
|
|
60074
61232
|
return val * exchangeRate;
|
|
60075
61233
|
}, [amount, inputUnit, exchangeRate]);
|
|
60076
|
-
const convertedDisplay = (0,
|
|
61234
|
+
const convertedDisplay = (0, import_react30.useMemo)(() => {
|
|
60077
61235
|
if (!amount || parseFloat(amount) <= 0) return null;
|
|
60078
61236
|
if (inputUnit === "crypto") {
|
|
60079
61237
|
return `$${fiatAmountFromInput.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
60080
61238
|
}
|
|
60081
61239
|
return `${cryptoAmountFromInput.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 6 })} ${tokenSymbol}`;
|
|
60082
61240
|
}, [amount, inputUnit, fiatAmountFromInput, cryptoAmountFromInput, tokenSymbol]);
|
|
60083
|
-
const balanceDisplay = (0,
|
|
61241
|
+
const balanceDisplay = (0, import_react30.useMemo)(() => {
|
|
60084
61242
|
if (isLoadingBalance || !balanceData) return null;
|
|
60085
61243
|
if (inputUnit === "crypto") {
|
|
60086
61244
|
return `${balanceCrypto.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ${tokenSymbol}`;
|
|
60087
61245
|
}
|
|
60088
61246
|
return `$${balanceUsdNum.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
60089
61247
|
}, [isLoadingBalance, balanceData, inputUnit, balanceCrypto, balanceUsdNum, tokenSymbol]);
|
|
60090
|
-
const handleSwitchUnit = (0,
|
|
61248
|
+
const handleSwitchUnit = (0, import_react30.useCallback)(() => {
|
|
60091
61249
|
const val = parseFloat(amount);
|
|
60092
61250
|
if (!val || val <= 0 || exchangeRate <= 0) {
|
|
60093
61251
|
setInputUnit((u) => u === "crypto" ? "fiat" : "crypto");
|
|
@@ -60104,7 +61262,7 @@ function WithdrawForm({
|
|
|
60104
61262
|
setInputUnit("crypto");
|
|
60105
61263
|
}
|
|
60106
61264
|
}, [amount, inputUnit, exchangeRate, sourceDecimals]);
|
|
60107
|
-
const handleMaxClick = (0,
|
|
61265
|
+
const handleMaxClick = (0, import_react30.useCallback)(() => {
|
|
60108
61266
|
if (inputUnit === "crypto") {
|
|
60109
61267
|
if (balanceCrypto <= 0) return;
|
|
60110
61268
|
setAmount(balanceData?.balanceHuman ?? "0");
|
|
@@ -60116,7 +61274,7 @@ function WithdrawForm({
|
|
|
60116
61274
|
const isBelowMinimum = minimumWithdrawAmountUsd !== null && fiatAmountFromInput > 0 && fiatAmountFromInput < minimumWithdrawAmountUsd;
|
|
60117
61275
|
const isOverBalance = inputUnit === "crypto" ? cryptoAmountFromInput > 0 && balanceCrypto > 0 && cryptoAmountFromInput > balanceCrypto : fiatAmountFromInput > 0 && balanceUsdNum > 0 && fiatAmountFromInput > balanceUsdNum;
|
|
60118
61276
|
const isFormValid = trimmedAddress.length > 0 && amount.trim().length > 0 && cryptoAmountFromInput > 0 && isAddressValid && !isBelowMinimum && !isOverBalance && !!balanceData;
|
|
60119
|
-
const handleWithdraw = (0,
|
|
61277
|
+
const handleWithdraw = (0, import_react30.useCallback)(async () => {
|
|
60120
61278
|
if (!selectedToken || !selectedChain) return;
|
|
60121
61279
|
if (!isFormValid) return;
|
|
60122
61280
|
setIsSubmitting(true);
|
|
@@ -60128,12 +61286,43 @@ function WithdrawForm({
|
|
|
60128
61286
|
destinationTokenAddress: selectedChain.token_address,
|
|
60129
61287
|
recipientAddress: trimmedAddress
|
|
60130
61288
|
});
|
|
60131
|
-
|
|
61289
|
+
let amountBaseUnit = computeBaseUnit(
|
|
60132
61290
|
balanceData.balanceBaseUnit,
|
|
60133
61291
|
parseFloat(amount),
|
|
60134
61292
|
inputUnit === "crypto" ? balanceCrypto : balanceUsdNum
|
|
60135
61293
|
);
|
|
60136
|
-
|
|
61294
|
+
let humanAmount = toSafeDecimalString(cryptoAmountFromInput, sourceDecimals);
|
|
61295
|
+
if (isHypercoreChain(sourceChainId)) {
|
|
61296
|
+
try {
|
|
61297
|
+
const check = await checkHypercoreActivation(
|
|
61298
|
+
{
|
|
61299
|
+
source_address: senderAddress,
|
|
61300
|
+
recipient_address: depositWallet.address
|
|
61301
|
+
},
|
|
61302
|
+
publishableKey
|
|
61303
|
+
);
|
|
61304
|
+
if (!check.user_exists) {
|
|
61305
|
+
const fee = check.activation_fee;
|
|
61306
|
+
const maxSendable = balanceCrypto - fee;
|
|
61307
|
+
if (maxSendable <= 0) {
|
|
61308
|
+
throw new Error(
|
|
61309
|
+
`Insufficient balance. A ${fee} USDC activation fee is required for the first transfer to this address.`
|
|
61310
|
+
);
|
|
61311
|
+
}
|
|
61312
|
+
const requestedAmount = parseFloat(humanAmount);
|
|
61313
|
+
if (requestedAmount > maxSendable) {
|
|
61314
|
+
humanAmount = toSafeDecimalString(maxSendable, sourceDecimals);
|
|
61315
|
+
amountBaseUnit = computeBaseUnit(
|
|
61316
|
+
balanceData.balanceBaseUnit,
|
|
61317
|
+
maxSendable,
|
|
61318
|
+
balanceCrypto
|
|
61319
|
+
);
|
|
61320
|
+
}
|
|
61321
|
+
}
|
|
61322
|
+
} catch (e) {
|
|
61323
|
+
if (e instanceof Error && e.message.includes("activation fee")) throw e;
|
|
61324
|
+
}
|
|
61325
|
+
}
|
|
60137
61326
|
const txInfo = {
|
|
60138
61327
|
sourceChainType,
|
|
60139
61328
|
sourceChainId,
|
|
@@ -60148,33 +61337,67 @@ function WithdrawForm({
|
|
|
60148
61337
|
withdrawIntentAddress: depositWallet.address,
|
|
60149
61338
|
recipientAddress: trimmedAddress
|
|
60150
61339
|
};
|
|
60151
|
-
|
|
60152
|
-
|
|
60153
|
-
|
|
60154
|
-
|
|
60155
|
-
|
|
60156
|
-
|
|
60157
|
-
|
|
61340
|
+
const wallet = await detectBrowserWallet(sourceChainType, senderAddress);
|
|
61341
|
+
console.log("browser wallet", wallet);
|
|
61342
|
+
if (wallet) {
|
|
61343
|
+
try {
|
|
61344
|
+
if (wallet.chainFamily === "evm" && isHypercoreChain(sourceChainId)) {
|
|
61345
|
+
await sendHypercoreWithdraw({
|
|
61346
|
+
provider: wallet.provider,
|
|
61347
|
+
fromAddress: wallet.address,
|
|
61348
|
+
depositWalletAddress: depositWallet.address,
|
|
61349
|
+
sourceTokenAddress,
|
|
61350
|
+
amount: humanAmount,
|
|
61351
|
+
tokenSymbol,
|
|
61352
|
+
publishableKey
|
|
61353
|
+
});
|
|
61354
|
+
} else if (wallet.chainFamily === "evm") {
|
|
61355
|
+
await sendEvmWithdraw({
|
|
61356
|
+
provider: wallet.provider,
|
|
61357
|
+
fromAddress: wallet.address,
|
|
61358
|
+
depositWalletAddress: depositWallet.address,
|
|
61359
|
+
sourceTokenAddress,
|
|
61360
|
+
sourceChainId,
|
|
61361
|
+
amountBaseUnit
|
|
61362
|
+
});
|
|
61363
|
+
} else if (wallet.chainFamily === "solana") {
|
|
61364
|
+
await sendSolanaWithdraw({
|
|
61365
|
+
provider: wallet.provider,
|
|
61366
|
+
fromAddress: wallet.address,
|
|
61367
|
+
depositWalletAddress: depositWallet.address,
|
|
61368
|
+
sourceTokenAddress,
|
|
61369
|
+
amountBaseUnit,
|
|
61370
|
+
publishableKey
|
|
61371
|
+
});
|
|
61372
|
+
}
|
|
61373
|
+
} catch (walletErr) {
|
|
61374
|
+
console.error("[Unifold] Browser wallet send failed:", walletErr, {
|
|
61375
|
+
wallet: `${wallet.name} (${wallet.chainFamily})`,
|
|
60158
61376
|
sourceChainId,
|
|
60159
|
-
|
|
60160
|
-
});
|
|
60161
|
-
} else if (detectedWallet.chainFamily === "solana") {
|
|
60162
|
-
await sendSolanaWithdraw({
|
|
60163
|
-
provider: detectedWallet.provider,
|
|
60164
|
-
fromAddress: detectedWallet.address,
|
|
60165
|
-
depositWalletAddress: depositWallet.address,
|
|
60166
|
-
sourceTokenAddress,
|
|
61377
|
+
amount: humanAmount,
|
|
60167
61378
|
amountBaseUnit,
|
|
60168
|
-
|
|
61379
|
+
depositWallet: depositWallet.address
|
|
60169
61380
|
});
|
|
61381
|
+
throw walletErr;
|
|
60170
61382
|
}
|
|
60171
61383
|
} else if (onWithdraw) {
|
|
60172
|
-
|
|
61384
|
+
try {
|
|
61385
|
+
await onWithdraw(txInfo);
|
|
61386
|
+
} catch (callbackErr) {
|
|
61387
|
+
console.error("[Unifold] onWithdraw callback failed:", callbackErr, {
|
|
61388
|
+
sourceChainId,
|
|
61389
|
+
amount: humanAmount,
|
|
61390
|
+
amountBaseUnit,
|
|
61391
|
+
depositWallet: depositWallet.address
|
|
61392
|
+
});
|
|
61393
|
+
throw callbackErr;
|
|
61394
|
+
}
|
|
60173
61395
|
} else {
|
|
60174
61396
|
throw new Error("No withdrawal method available. Please connect a wallet.");
|
|
60175
61397
|
}
|
|
60176
61398
|
onWithdrawSubmitted?.(txInfo);
|
|
60177
61399
|
} catch (err) {
|
|
61400
|
+
console.error("[Unifold] Withdrawal failed:", err);
|
|
60178
61401
|
const raw = err instanceof Error ? err.message : "Withdrawal failed. Please try again.";
|
|
60179
61402
|
setSubmitError(raw.length > 120 ? "Withdrawal failed. Please try again." : raw);
|
|
60180
61403
|
onWithdrawError?.({
|
|
@@ -60185,10 +61408,10 @@ function WithdrawForm({
|
|
|
60185
61408
|
} finally {
|
|
60186
61409
|
setIsSubmitting(false);
|
|
60187
61410
|
}
|
|
60188
|
-
}, [selectedToken, selectedChain, isFormValid, cryptoAmountFromInput, sourceDecimals, trimmedAddress, publishableKey, onWithdraw,
|
|
60189
|
-
return /* @__PURE__ */ (0,
|
|
60190
|
-
/* @__PURE__ */ (0,
|
|
60191
|
-
/* @__PURE__ */ (0,
|
|
61411
|
+
}, [selectedToken, selectedChain, isFormValid, cryptoAmountFromInput, sourceDecimals, trimmedAddress, publishableKey, onWithdraw, sourceChainType, senderAddress, sourceTokenAddress, sourceChainId, onWithdrawError, onDepositWalletCreation, onWithdrawSubmitted, amount, inputUnit, balanceCrypto, balanceUsdNum, balanceData]);
|
|
61412
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
|
|
61413
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { children: [
|
|
61414
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60192
61415
|
"div",
|
|
60193
61416
|
{
|
|
60194
61417
|
className: "uf-text-xs uf-mb-1.5",
|
|
@@ -60196,7 +61419,7 @@ function WithdrawForm({
|
|
|
60196
61419
|
children: t8.recipientAddress
|
|
60197
61420
|
}
|
|
60198
61421
|
),
|
|
60199
|
-
/* @__PURE__ */ (0,
|
|
61422
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60200
61423
|
"style",
|
|
60201
61424
|
{
|
|
60202
61425
|
dangerouslySetInnerHTML: {
|
|
@@ -60204,7 +61427,7 @@ function WithdrawForm({
|
|
|
60204
61427
|
}
|
|
60205
61428
|
}
|
|
60206
61429
|
),
|
|
60207
|
-
/* @__PURE__ */ (0,
|
|
61430
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
|
|
60208
61431
|
"div",
|
|
60209
61432
|
{
|
|
60210
61433
|
className: "uf-flex uf-items-center uf-gap-1 uf-pr-2",
|
|
@@ -60214,7 +61437,7 @@ function WithdrawForm({
|
|
|
60214
61437
|
border: `${components.input.borderWidth}px solid ${addressError ? colors2.error : components.input.borderColor}`
|
|
60215
61438
|
},
|
|
60216
61439
|
children: [
|
|
60217
|
-
/* @__PURE__ */ (0,
|
|
61440
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60218
61441
|
"input",
|
|
60219
61442
|
{
|
|
60220
61443
|
type: "text",
|
|
@@ -60231,7 +61454,7 @@ function WithdrawForm({
|
|
|
60231
61454
|
}
|
|
60232
61455
|
}
|
|
60233
61456
|
),
|
|
60234
|
-
/* @__PURE__ */ (0,
|
|
61457
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60235
61458
|
"button",
|
|
60236
61459
|
{
|
|
60237
61460
|
type: "button",
|
|
@@ -60248,27 +61471,27 @@ function WithdrawForm({
|
|
|
60248
61471
|
className: "uf-flex-shrink-0 uf-p-1 uf-rounded uf-transition-colors hover:uf-opacity-70",
|
|
60249
61472
|
style: { color: colors2.foregroundMuted },
|
|
60250
61473
|
title: "Paste from clipboard",
|
|
60251
|
-
children: /* @__PURE__ */ (0,
|
|
61474
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ClipboardPaste, { className: "uf-w-4 uf-h-4" })
|
|
60252
61475
|
}
|
|
60253
61476
|
)
|
|
60254
61477
|
]
|
|
60255
61478
|
}
|
|
60256
61479
|
),
|
|
60257
|
-
(isDebouncing || isVerifyingAddress) && trimmedAddress.length > 5 && /* @__PURE__ */ (0,
|
|
60258
|
-
/* @__PURE__ */ (0,
|
|
60259
|
-
/* @__PURE__ */ (0,
|
|
61480
|
+
(isDebouncing || isVerifyingAddress) && trimmedAddress.length > 5 && /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-1.5", children: [
|
|
61481
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(LoaderCircle, { className: "uf-w-3 uf-h-3 uf-animate-spin", style: { color: colors2.foregroundMuted } }),
|
|
61482
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: t8.verifyingAddress })
|
|
60260
61483
|
] }),
|
|
60261
|
-
addressError && /* @__PURE__ */ (0,
|
|
60262
|
-
/* @__PURE__ */ (0,
|
|
60263
|
-
/* @__PURE__ */ (0,
|
|
61484
|
+
addressError && /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-1.5", children: [
|
|
61485
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(TriangleAlert, { className: "uf-w-3 uf-h-3", style: { color: colors2.error } }),
|
|
61486
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "uf-text-xs", style: { color: colors2.error, fontFamily: fonts.regular }, children: addressError })
|
|
60264
61487
|
] })
|
|
60265
61488
|
] }),
|
|
60266
|
-
/* @__PURE__ */ (0,
|
|
60267
|
-
/* @__PURE__ */ (0,
|
|
61489
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { children: [
|
|
61490
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-text-xs uf-mb-1.5", style: { color: components.card.labelColor, fontFamily: fonts.medium }, children: [
|
|
60268
61491
|
t8.amount,
|
|
60269
|
-
minimumWithdrawAmountUsd != null && minimumWithdrawAmountUsd > 0 && /* @__PURE__ */ (0,
|
|
61492
|
+
minimumWithdrawAmountUsd != null && minimumWithdrawAmountUsd > 0 && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { style: { color: colors2.warning, fontFamily: fonts.regular }, children: ` ($${minimumWithdrawAmountUsd.toFixed(2)} min)` })
|
|
60270
61493
|
] }),
|
|
60271
|
-
/* @__PURE__ */ (0,
|
|
61494
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60272
61495
|
"style",
|
|
60273
61496
|
{
|
|
60274
61497
|
dangerouslySetInnerHTML: {
|
|
@@ -60276,7 +61499,7 @@ function WithdrawForm({
|
|
|
60276
61499
|
}
|
|
60277
61500
|
}
|
|
60278
61501
|
),
|
|
60279
|
-
/* @__PURE__ */ (0,
|
|
61502
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
|
|
60280
61503
|
"div",
|
|
60281
61504
|
{
|
|
60282
61505
|
className: "uf-flex uf-items-center uf-gap-2 uf-px-3 uf-py-2.5",
|
|
@@ -60286,7 +61509,7 @@ function WithdrawForm({
|
|
|
60286
61509
|
border: `${components.input.borderWidth}px solid ${components.input.borderColor}`
|
|
60287
61510
|
},
|
|
60288
61511
|
children: [
|
|
60289
|
-
/* @__PURE__ */ (0,
|
|
61512
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60290
61513
|
"input",
|
|
60291
61514
|
{
|
|
60292
61515
|
type: "text",
|
|
@@ -60307,8 +61530,8 @@ function WithdrawForm({
|
|
|
60307
61530
|
}
|
|
60308
61531
|
}
|
|
60309
61532
|
),
|
|
60310
|
-
/* @__PURE__ */ (0,
|
|
60311
|
-
/* @__PURE__ */ (0,
|
|
61533
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "uf-text-sm uf-shrink-0", style: { color: colors2.foregroundMuted, fontFamily: fonts.medium }, children: inputUnit === "crypto" ? tokenSymbol : "USD" }),
|
|
61534
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60312
61535
|
"button",
|
|
60313
61536
|
{
|
|
60314
61537
|
type: "button",
|
|
@@ -60321,10 +61544,10 @@ function WithdrawForm({
|
|
|
60321
61544
|
]
|
|
60322
61545
|
}
|
|
60323
61546
|
),
|
|
60324
|
-
/* @__PURE__ */ (0,
|
|
60325
|
-
/* @__PURE__ */ (0,
|
|
60326
|
-
/* @__PURE__ */ (0,
|
|
60327
|
-
exchangeRate > 0 && /* @__PURE__ */ (0,
|
|
61547
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-mt-1.5 uf-px-3", children: [
|
|
61548
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
|
|
61549
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: convertedDisplay || (inputUnit === "crypto" ? "$0.00" : `0.00 ${tokenSymbol}`) }),
|
|
61550
|
+
exchangeRate > 0 && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60328
61551
|
"button",
|
|
60329
61552
|
{
|
|
60330
61553
|
type: "button",
|
|
@@ -60332,49 +61555,49 @@ function WithdrawForm({
|
|
|
60332
61555
|
className: "uf-p-0.5 uf-rounded uf-transition-colors hover:uf-opacity-70",
|
|
60333
61556
|
style: { color: colors2.foregroundMuted },
|
|
60334
61557
|
title: "Switch unit",
|
|
60335
|
-
children: /* @__PURE__ */ (0,
|
|
61558
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ArrowUpDown, { className: "uf-w-3 uf-h-3" })
|
|
60336
61559
|
}
|
|
60337
61560
|
)
|
|
60338
61561
|
] }),
|
|
60339
|
-
/* @__PURE__ */ (0,
|
|
60340
|
-
balanceDisplay && /* @__PURE__ */ (0,
|
|
61562
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { children: [
|
|
61563
|
+
balanceDisplay && /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: [
|
|
60341
61564
|
t8.balance,
|
|
60342
61565
|
": ",
|
|
60343
61566
|
balanceDisplay
|
|
60344
61567
|
] }),
|
|
60345
|
-
isLoadingBalance && /* @__PURE__ */ (0,
|
|
61568
|
+
isLoadingBalance && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-h-3 uf-w-16 uf-bg-muted uf-rounded uf-animate-pulse" })
|
|
60346
61569
|
] })
|
|
60347
61570
|
] })
|
|
60348
61571
|
] }),
|
|
60349
|
-
/* @__PURE__ */ (0,
|
|
60350
|
-
/* @__PURE__ */ (0,
|
|
61572
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-px-2.5", style: { backgroundColor: components.card.backgroundColor, borderRadius: components.card.borderRadius, border: `${components.card.borderWidth}px solid ${components.card.borderColor}` }, children: [
|
|
61573
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
|
|
60351
61574
|
"button",
|
|
60352
61575
|
{
|
|
60353
61576
|
type: "button",
|
|
60354
61577
|
onClick: () => setDetailsExpanded(!detailsExpanded),
|
|
60355
61578
|
className: "uf-w-full uf-flex uf-items-center uf-justify-between uf-py-2.5",
|
|
60356
61579
|
children: [
|
|
60357
|
-
/* @__PURE__ */ (0,
|
|
60358
|
-
/* @__PURE__ */ (0,
|
|
60359
|
-
/* @__PURE__ */ (0,
|
|
61580
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
61581
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Clock, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
|
|
61582
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
|
|
60360
61583
|
tCrypto.processingTime.label,
|
|
60361
61584
|
":",
|
|
60362
61585
|
" ",
|
|
60363
|
-
/* @__PURE__ */ (0,
|
|
61586
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: formatProcessingTime2(estimatedProcessingTime) })
|
|
60364
61587
|
] })
|
|
60365
61588
|
] }),
|
|
60366
|
-
detailsExpanded ? /* @__PURE__ */ (0,
|
|
61589
|
+
detailsExpanded ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ChevronUp, { className: "uf-w-4 uf-h-4", style: { color: components.card.actionColor } }) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ChevronDown, { className: "uf-w-4 uf-h-4", style: { color: components.card.actionColor } })
|
|
60367
61590
|
]
|
|
60368
61591
|
}
|
|
60369
61592
|
),
|
|
60370
|
-
detailsExpanded && /* @__PURE__ */ (0,
|
|
60371
|
-
/* @__PURE__ */ (0,
|
|
60372
|
-
/* @__PURE__ */ (0,
|
|
60373
|
-
/* @__PURE__ */ (0,
|
|
61593
|
+
detailsExpanded && /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-pb-3 uf-space-y-2.5", children: [
|
|
61594
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
61595
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ShieldCheck, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
|
|
61596
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
|
|
60374
61597
|
tCrypto.slippage.label,
|
|
60375
61598
|
":",
|
|
60376
61599
|
" ",
|
|
60377
|
-
/* @__PURE__ */ (0,
|
|
61600
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: [
|
|
60378
61601
|
tCrypto.slippage.auto,
|
|
60379
61602
|
" \u2022 ",
|
|
60380
61603
|
(maxSlippagePercent ?? 0.25).toFixed(2),
|
|
@@ -60382,13 +61605,13 @@ function WithdrawForm({
|
|
|
60382
61605
|
] })
|
|
60383
61606
|
] })
|
|
60384
61607
|
] }),
|
|
60385
|
-
/* @__PURE__ */ (0,
|
|
60386
|
-
/* @__PURE__ */ (0,
|
|
60387
|
-
/* @__PURE__ */ (0,
|
|
61608
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
61609
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(DollarSign, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
|
|
61610
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
|
|
60388
61611
|
tCrypto.priceImpact.label,
|
|
60389
61612
|
":",
|
|
60390
61613
|
" ",
|
|
60391
|
-
/* @__PURE__ */ (0,
|
|
61614
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: [
|
|
60392
61615
|
(priceImpactPercent ?? 0).toFixed(2),
|
|
60393
61616
|
"%"
|
|
60394
61617
|
] })
|
|
@@ -60396,23 +61619,12 @@ function WithdrawForm({
|
|
|
60396
61619
|
] })
|
|
60397
61620
|
] })
|
|
60398
61621
|
] }),
|
|
60399
|
-
|
|
60400
|
-
"div",
|
|
60401
|
-
{
|
|
60402
|
-
className: "uf-flex uf-items-start uf-gap-2.5 uf-p-3 uf-rounded-xl",
|
|
60403
|
-
style: { backgroundColor: colors2.card, border: `1px solid ${colors2.border}` },
|
|
60404
|
-
children: [
|
|
60405
|
-
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(Wallet, { className: "uf-w-4 uf-h-4 uf-flex-shrink-0 uf-mt-0.5", style: { color: colors2.warning } }),
|
|
60406
|
-
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: "No connected wallet detected. Please connect a wallet that matches your account to withdraw." })
|
|
60407
|
-
]
|
|
60408
|
-
}
|
|
60409
|
-
),
|
|
60410
|
-
isWalletMatch && connectedWalletName ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
61622
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60411
61623
|
"button",
|
|
60412
61624
|
{
|
|
60413
61625
|
type: "button",
|
|
60414
61626
|
onClick: handleWithdraw,
|
|
60415
|
-
disabled: !isFormValid ||
|
|
61627
|
+
disabled: !isFormValid || isSubmitting || !selectedToken || !selectedChain,
|
|
60416
61628
|
className: "uf-w-full uf-py-3 uf-text-sm uf-font-medium uf-transition-colors disabled:uf-opacity-50 disabled:uf-cursor-not-allowed uf-flex uf-items-center uf-justify-center uf-gap-2",
|
|
60417
61629
|
style: {
|
|
60418
61630
|
backgroundColor: colors2.primary,
|
|
@@ -60421,40 +61633,20 @@ function WithdrawForm({
|
|
|
60421
61633
|
borderRadius: components.button.borderRadius,
|
|
60422
61634
|
border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
|
|
60423
61635
|
},
|
|
60424
|
-
children: isSubmitting ? /* @__PURE__ */ (0,
|
|
60425
|
-
/* @__PURE__ */ (0,
|
|
61636
|
+
children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
|
|
61637
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
|
|
60426
61638
|
"Processing..."
|
|
60427
|
-
] }) : isOverBalance ? /* @__PURE__ */ (0,
|
|
60428
|
-
/* @__PURE__ */ (0,
|
|
60429
|
-
|
|
60430
|
-
connectedWalletName
|
|
61639
|
+
] }) : isOverBalance ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_jsx_runtime73.Fragment, { children: "Insufficient balance" }) : isBelowMinimum ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_jsx_runtime73.Fragment, { children: "Minimum amount not met" }) : submitError ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(import_jsx_runtime73.Fragment, { children: "Withdrawal failed. Try again" }) : /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
|
|
61640
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Wallet, { className: "uf-w-4 uf-h-4" }),
|
|
61641
|
+
t8.withdraw
|
|
60431
61642
|
] })
|
|
60432
61643
|
}
|
|
60433
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
60434
|
-
"button",
|
|
60435
|
-
{
|
|
60436
|
-
type: "button",
|
|
60437
|
-
onClick: handleWithdraw,
|
|
60438
|
-
disabled: !isFormValid || !canWithdraw || isSubmitting || !selectedToken || !selectedChain,
|
|
60439
|
-
className: "uf-w-full uf-py-3 uf-text-sm uf-font-medium uf-transition-colors disabled:uf-opacity-50 disabled:uf-cursor-not-allowed",
|
|
60440
|
-
style: {
|
|
60441
|
-
backgroundColor: colors2.primary,
|
|
60442
|
-
color: colors2.primaryForeground,
|
|
60443
|
-
fontFamily: fonts.medium,
|
|
60444
|
-
borderRadius: components.button.borderRadius,
|
|
60445
|
-
border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
|
|
60446
|
-
},
|
|
60447
|
-
children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("span", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2", children: [
|
|
60448
|
-
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
|
|
60449
|
-
"Processing..."
|
|
60450
|
-
] }) : isOverBalance ? "Insufficient balance" : isBelowMinimum ? "Minimum amount not met" : submitError ? "Withdrawal failed. Try again" : t8.withdraw
|
|
60451
|
-
}
|
|
60452
61644
|
),
|
|
60453
|
-
/* @__PURE__ */ (0,
|
|
60454
|
-
/* @__PURE__ */ (0,
|
|
60455
|
-
/* @__PURE__ */ (0,
|
|
61645
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-text-xs uf-pt-1", children: [
|
|
61646
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { children: footerLeft }),
|
|
61647
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(DepositFooterLinks, { onGlossaryClick: () => setGlossaryOpen(true) })
|
|
60456
61648
|
] }),
|
|
60457
|
-
/* @__PURE__ */ (0,
|
|
61649
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60458
61650
|
GlossaryModal,
|
|
60459
61651
|
{
|
|
60460
61652
|
open: glossaryOpen,
|
|
@@ -60500,7 +61692,7 @@ function WithdrawExecutionItem({
|
|
|
60500
61692
|
return "$0.00";
|
|
60501
61693
|
}
|
|
60502
61694
|
};
|
|
60503
|
-
return /* @__PURE__ */ (0,
|
|
61695
|
+
return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
|
|
60504
61696
|
"button",
|
|
60505
61697
|
{
|
|
60506
61698
|
onClick,
|
|
@@ -60511,8 +61703,8 @@ function WithdrawExecutionItem({
|
|
|
60511
61703
|
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
60512
61704
|
},
|
|
60513
61705
|
children: [
|
|
60514
|
-
/* @__PURE__ */ (0,
|
|
60515
|
-
/* @__PURE__ */ (0,
|
|
61706
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "uf-relative uf-flex-shrink-0 uf-w-9 uf-h-9", children: [
|
|
61707
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60516
61708
|
"img",
|
|
60517
61709
|
{
|
|
60518
61710
|
src: execution.destination_token_metadata?.icon_url || getIconUrl("/icons/tokens/svg/usdc.svg"),
|
|
@@ -60523,12 +61715,12 @@ function WithdrawExecutionItem({
|
|
|
60523
61715
|
className: "uf-rounded-full uf-w-9 uf-h-9"
|
|
60524
61716
|
}
|
|
60525
61717
|
),
|
|
60526
|
-
isPending ? /* @__PURE__ */ (0,
|
|
61718
|
+
isPending ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60527
61719
|
"div",
|
|
60528
61720
|
{
|
|
60529
61721
|
className: "uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-rounded-full uf-p-0.5",
|
|
60530
61722
|
style: { backgroundColor: colors2.warning },
|
|
60531
|
-
children: /* @__PURE__ */ (0,
|
|
61723
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60532
61724
|
"svg",
|
|
60533
61725
|
{
|
|
60534
61726
|
width: "10",
|
|
@@ -60536,7 +61728,7 @@ function WithdrawExecutionItem({
|
|
|
60536
61728
|
viewBox: "0 0 12 12",
|
|
60537
61729
|
fill: "none",
|
|
60538
61730
|
className: "uf-animate-spin uf-block",
|
|
60539
|
-
children: /* @__PURE__ */ (0,
|
|
61731
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60540
61732
|
"path",
|
|
60541
61733
|
{
|
|
60542
61734
|
d: "M6 1V3M6 9V11M1 6H3M9 6H11M2.5 2.5L4 4M8 8L9.5 9.5M2.5 9.5L4 8M8 4L9.5 2.5",
|
|
@@ -60548,12 +61740,12 @@ function WithdrawExecutionItem({
|
|
|
60548
61740
|
}
|
|
60549
61741
|
)
|
|
60550
61742
|
}
|
|
60551
|
-
) : /* @__PURE__ */ (0,
|
|
61743
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60552
61744
|
"div",
|
|
60553
61745
|
{
|
|
60554
61746
|
className: "uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-rounded-full uf-p-0.5",
|
|
60555
61747
|
style: { backgroundColor: colors2.success },
|
|
60556
|
-
children: /* @__PURE__ */ (0,
|
|
61748
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60557
61749
|
"svg",
|
|
60558
61750
|
{
|
|
60559
61751
|
width: "10",
|
|
@@ -60561,7 +61753,7 @@ function WithdrawExecutionItem({
|
|
|
60561
61753
|
viewBox: "0 0 12 12",
|
|
60562
61754
|
fill: "none",
|
|
60563
61755
|
className: "uf-block",
|
|
60564
|
-
children: /* @__PURE__ */ (0,
|
|
61756
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60565
61757
|
"path",
|
|
60566
61758
|
{
|
|
60567
61759
|
d: "M10 3L4.5 8.5L2 6",
|
|
@@ -60576,8 +61768,8 @@ function WithdrawExecutionItem({
|
|
|
60576
61768
|
}
|
|
60577
61769
|
)
|
|
60578
61770
|
] }),
|
|
60579
|
-
/* @__PURE__ */ (0,
|
|
60580
|
-
/* @__PURE__ */ (0,
|
|
61771
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "uf-flex-1 uf-min-w-0", children: [
|
|
61772
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60581
61773
|
"h3",
|
|
60582
61774
|
{
|
|
60583
61775
|
className: "uf-font-medium uf-text-sm uf-leading-tight",
|
|
@@ -60588,7 +61780,7 @@ function WithdrawExecutionItem({
|
|
|
60588
61780
|
children: isPending ? "Withdrawal processing" : "Withdrawal completed"
|
|
60589
61781
|
}
|
|
60590
61782
|
),
|
|
60591
|
-
/* @__PURE__ */ (0,
|
|
61783
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60592
61784
|
"p",
|
|
60593
61785
|
{
|
|
60594
61786
|
className: "uf-text-xs uf-leading-tight",
|
|
@@ -60600,7 +61792,7 @@ function WithdrawExecutionItem({
|
|
|
60600
61792
|
}
|
|
60601
61793
|
)
|
|
60602
61794
|
] }),
|
|
60603
|
-
/* @__PURE__ */ (0,
|
|
61795
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60604
61796
|
"span",
|
|
60605
61797
|
{
|
|
60606
61798
|
className: "uf-font-medium uf-text-sm uf-flex-shrink-0",
|
|
@@ -60611,7 +61803,7 @@ function WithdrawExecutionItem({
|
|
|
60611
61803
|
children: formatUsdAmount2(execution.source_amount_usd || "0")
|
|
60612
61804
|
}
|
|
60613
61805
|
),
|
|
60614
|
-
/* @__PURE__ */ (0,
|
|
61806
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60615
61807
|
ChevronRight,
|
|
60616
61808
|
{
|
|
60617
61809
|
className: "uf-w-4 uf-h-4 uf-flex-shrink-0",
|
|
@@ -60634,9 +61826,9 @@ function WithdrawConfirmingView({
|
|
|
60634
61826
|
onViewTracker
|
|
60635
61827
|
}) {
|
|
60636
61828
|
const { colors: colors2, fonts, components } = useTheme();
|
|
60637
|
-
const [showButton, setShowButton] = (0,
|
|
61829
|
+
const [showButton, setShowButton] = (0, import_react31.useState)(false);
|
|
60638
61830
|
const latestExecution = executions.length > 0 ? executions[executions.length - 1] : null;
|
|
60639
|
-
(0,
|
|
61831
|
+
(0, import_react31.useEffect)(() => {
|
|
60640
61832
|
if (latestExecution) return;
|
|
60641
61833
|
const timer = setTimeout(() => setShowButton(true), SHOW_BUTTON_DELAY_MS);
|
|
60642
61834
|
return () => clearTimeout(timer);
|
|
@@ -60644,11 +61836,11 @@ function WithdrawConfirmingView({
|
|
|
60644
61836
|
const btnRadius = components.button.borderRadius;
|
|
60645
61837
|
const btnBorder = `${components.button.borderWidth}px solid ${components.button.borderColor}`;
|
|
60646
61838
|
if (latestExecution) {
|
|
60647
|
-
return /* @__PURE__ */ (0,
|
|
60648
|
-
/* @__PURE__ */ (0,
|
|
60649
|
-
/* @__PURE__ */ (0,
|
|
60650
|
-
/* @__PURE__ */ (0,
|
|
60651
|
-
/* @__PURE__ */ (0,
|
|
61839
|
+
return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
|
|
61840
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)(DepositHeader, { title: "Withdrawal Details", showClose: true, onClose }),
|
|
61841
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)(DepositDetailContent, { execution: latestExecution, variant: "withdraw" }),
|
|
61842
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "uf-flex uf-gap-2 uf-px-2 uf-pt-2", children: [
|
|
61843
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
60652
61844
|
"button",
|
|
60653
61845
|
{
|
|
60654
61846
|
type: "button",
|
|
@@ -60664,7 +61856,7 @@ function WithdrawConfirmingView({
|
|
|
60664
61856
|
children: "Withdrawal History"
|
|
60665
61857
|
}
|
|
60666
61858
|
),
|
|
60667
|
-
/* @__PURE__ */ (0,
|
|
61859
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
60668
61860
|
"button",
|
|
60669
61861
|
{
|
|
60670
61862
|
type: "button",
|
|
@@ -60681,7 +61873,7 @@ function WithdrawConfirmingView({
|
|
|
60681
61873
|
}
|
|
60682
61874
|
)
|
|
60683
61875
|
] }),
|
|
60684
|
-
/* @__PURE__ */ (0,
|
|
61876
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
60685
61877
|
PoweredByUnifold,
|
|
60686
61878
|
{
|
|
60687
61879
|
color: colors2.foregroundMuted,
|
|
@@ -60690,15 +61882,15 @@ function WithdrawConfirmingView({
|
|
|
60690
61882
|
) })
|
|
60691
61883
|
] });
|
|
60692
61884
|
}
|
|
60693
|
-
return /* @__PURE__ */ (0,
|
|
60694
|
-
/* @__PURE__ */ (0,
|
|
60695
|
-
/* @__PURE__ */ (0,
|
|
60696
|
-
/* @__PURE__ */ (0,
|
|
61885
|
+
return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
|
|
61886
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)(DepositHeader, { title: "Withdrawal Status", showClose: true, onClose }),
|
|
61887
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-16 uf-px-4", children: [
|
|
61888
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
60697
61889
|
"div",
|
|
60698
61890
|
{
|
|
60699
61891
|
className: "uf-w-20 uf-h-20 uf-rounded-full uf-flex uf-items-center uf-justify-center uf-mb-6",
|
|
60700
61892
|
style: { backgroundColor: `${colors2.primary}20` },
|
|
60701
|
-
children: /* @__PURE__ */ (0,
|
|
61893
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
60702
61894
|
"svg",
|
|
60703
61895
|
{
|
|
60704
61896
|
width: "40",
|
|
@@ -60706,7 +61898,7 @@ function WithdrawConfirmingView({
|
|
|
60706
61898
|
viewBox: "0 0 24 24",
|
|
60707
61899
|
fill: "none",
|
|
60708
61900
|
className: "uf-animate-spin",
|
|
60709
|
-
children: /* @__PURE__ */ (0,
|
|
61901
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
60710
61902
|
"path",
|
|
60711
61903
|
{
|
|
60712
61904
|
d: "M21 12a9 9 0 1 1-6.22-8.56",
|
|
@@ -60719,7 +61911,7 @@ function WithdrawConfirmingView({
|
|
|
60719
61911
|
)
|
|
60720
61912
|
}
|
|
60721
61913
|
),
|
|
60722
|
-
/* @__PURE__ */ (0,
|
|
61914
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
60723
61915
|
"h3",
|
|
60724
61916
|
{
|
|
60725
61917
|
className: "uf-text-xl uf-mb-2",
|
|
@@ -60727,7 +61919,7 @@ function WithdrawConfirmingView({
|
|
|
60727
61919
|
children: "Checking Withdrawal"
|
|
60728
61920
|
}
|
|
60729
61921
|
),
|
|
60730
|
-
/* @__PURE__ */ (0,
|
|
61922
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
|
|
60731
61923
|
"p",
|
|
60732
61924
|
{
|
|
60733
61925
|
className: "uf-text-sm uf-text-center",
|
|
@@ -60743,7 +61935,7 @@ function WithdrawConfirmingView({
|
|
|
60743
61935
|
}
|
|
60744
61936
|
)
|
|
60745
61937
|
] }),
|
|
60746
|
-
showButton && /* @__PURE__ */ (0,
|
|
61938
|
+
showButton && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "uf-px-1 uf-pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
60747
61939
|
"button",
|
|
60748
61940
|
{
|
|
60749
61941
|
type: "button",
|
|
@@ -60759,7 +61951,7 @@ function WithdrawConfirmingView({
|
|
|
60759
61951
|
children: "Withdrawal History"
|
|
60760
61952
|
}
|
|
60761
61953
|
) }),
|
|
60762
|
-
/* @__PURE__ */ (0,
|
|
61954
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
60763
61955
|
PoweredByUnifold,
|
|
60764
61956
|
{
|
|
60765
61957
|
color: colors2.foregroundMuted,
|
|
@@ -60789,14 +61981,14 @@ function WithdrawModal({
|
|
|
60789
61981
|
hideOverlay = false
|
|
60790
61982
|
}) {
|
|
60791
61983
|
const { colors: colors2, fonts, components } = useTheme();
|
|
60792
|
-
const [containerEl, setContainerEl] = (0,
|
|
60793
|
-
const containerCallbackRef = (0,
|
|
61984
|
+
const [containerEl, setContainerEl] = (0, import_react28.useState)(null);
|
|
61985
|
+
const containerCallbackRef = (0, import_react28.useCallback)((el) => {
|
|
60794
61986
|
setContainerEl(el);
|
|
60795
61987
|
}, []);
|
|
60796
|
-
const [resolvedTheme, setResolvedTheme] = (0,
|
|
61988
|
+
const [resolvedTheme, setResolvedTheme] = (0, import_react28.useState)(
|
|
60797
61989
|
theme === "auto" ? "dark" : theme
|
|
60798
61990
|
);
|
|
60799
|
-
(0,
|
|
61991
|
+
(0, import_react28.useEffect)(() => {
|
|
60800
61992
|
if (theme === "auto") {
|
|
60801
61993
|
const mq = window.matchMedia("(prefers-color-scheme: dark)");
|
|
60802
61994
|
setResolvedTheme(mq.matches ? "dark" : "light");
|
|
@@ -60825,28 +62017,12 @@ function WithdrawModal({
|
|
|
60825
62017
|
publishableKey,
|
|
60826
62018
|
enabled: open
|
|
60827
62019
|
});
|
|
60828
|
-
const [selectedToken, setSelectedToken] = (0,
|
|
60829
|
-
const [selectedChain, setSelectedChain] = (0,
|
|
60830
|
-
const [
|
|
60831
|
-
const
|
|
60832
|
-
const
|
|
60833
|
-
(0,
|
|
60834
|
-
if (!senderAddress || !open) {
|
|
60835
|
-
setDetectedWallet(null);
|
|
60836
|
-
return;
|
|
60837
|
-
}
|
|
60838
|
-
let cancelled = false;
|
|
60839
|
-
detectBrowserWallet(sourceChainType, senderAddress).then((wallet) => {
|
|
60840
|
-
if (!cancelled) setDetectedWallet(wallet);
|
|
60841
|
-
});
|
|
60842
|
-
return () => {
|
|
60843
|
-
cancelled = true;
|
|
60844
|
-
};
|
|
60845
|
-
}, [senderAddress, sourceChainType, open]);
|
|
60846
|
-
const [view, setView] = (0, import_react27.useState)("form");
|
|
60847
|
-
const [withdrawDepositWalletId, setWithdrawDepositWalletId] = (0, import_react27.useState)();
|
|
60848
|
-
const [selectedExecution, setSelectedExecution] = (0, import_react27.useState)(null);
|
|
60849
|
-
const [submittedTxInfo, setSubmittedTxInfo] = (0, import_react27.useState)(null);
|
|
62020
|
+
const [selectedToken, setSelectedToken] = (0, import_react28.useState)(null);
|
|
62021
|
+
const [selectedChain, setSelectedChain] = (0, import_react28.useState)(null);
|
|
62022
|
+
const [view, setView] = (0, import_react28.useState)("form");
|
|
62023
|
+
const [withdrawDepositWalletId, setWithdrawDepositWalletId] = (0, import_react28.useState)();
|
|
62024
|
+
const [selectedExecution, setSelectedExecution] = (0, import_react28.useState)(null);
|
|
62025
|
+
const [submittedTxInfo, setSubmittedTxInfo] = (0, import_react28.useState)(null);
|
|
60850
62026
|
const { executions: realtimeExecutions } = useWithdrawPolling({
|
|
60851
62027
|
userId: externalUserId,
|
|
60852
62028
|
publishableKey,
|
|
@@ -60861,7 +62037,7 @@ function WithdrawModal({
|
|
|
60861
62037
|
refetchInterval: view === "tracker" || view === "detail" ? 5e3 : 15e3
|
|
60862
62038
|
});
|
|
60863
62039
|
const allWithdrawals = allWithdrawalsData?.data ?? [];
|
|
60864
|
-
const handleDepositWalletCreation = (0,
|
|
62040
|
+
const handleDepositWalletCreation = (0, import_react28.useCallback)(async (params) => {
|
|
60865
62041
|
const { data: wallets } = await createDepositAddress(
|
|
60866
62042
|
{
|
|
60867
62043
|
external_user_id: externalUserId,
|
|
@@ -60880,11 +62056,11 @@ function WithdrawModal({
|
|
|
60880
62056
|
setWithdrawDepositWalletId(depositWallet.id);
|
|
60881
62057
|
return depositWallet;
|
|
60882
62058
|
}, [externalUserId, publishableKey, sourceChainType]);
|
|
60883
|
-
const handleWithdrawSubmitted = (0,
|
|
62059
|
+
const handleWithdrawSubmitted = (0, import_react28.useCallback)((txInfo) => {
|
|
60884
62060
|
setSubmittedTxInfo(txInfo);
|
|
60885
62061
|
setView("confirming");
|
|
60886
62062
|
}, []);
|
|
60887
|
-
(0,
|
|
62063
|
+
(0, import_react28.useEffect)(() => {
|
|
60888
62064
|
if (!destinationTokens.length || selectedToken) return;
|
|
60889
62065
|
const first = destinationTokens[0];
|
|
60890
62066
|
if (first?.chains.length > 0) {
|
|
@@ -60892,8 +62068,8 @@ function WithdrawModal({
|
|
|
60892
62068
|
setSelectedChain(first.chains[0]);
|
|
60893
62069
|
}
|
|
60894
62070
|
}, [destinationTokens, selectedToken]);
|
|
60895
|
-
const resetViewTimeoutRef = (0,
|
|
60896
|
-
const handleClose = (0,
|
|
62071
|
+
const resetViewTimeoutRef = (0, import_react28.useRef)(null);
|
|
62072
|
+
const handleClose = (0, import_react28.useCallback)(() => {
|
|
60897
62073
|
onOpenChange(false);
|
|
60898
62074
|
if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
|
|
60899
62075
|
resetViewTimeoutRef.current = setTimeout(() => {
|
|
@@ -60906,7 +62082,7 @@ function WithdrawModal({
|
|
|
60906
62082
|
resetViewTimeoutRef.current = null;
|
|
60907
62083
|
}, 200);
|
|
60908
62084
|
}, [onOpenChange]);
|
|
60909
|
-
(0,
|
|
62085
|
+
(0, import_react28.useLayoutEffect)(() => {
|
|
60910
62086
|
if (!open) return;
|
|
60911
62087
|
if (resetViewTimeoutRef.current) {
|
|
60912
62088
|
clearTimeout(resetViewTimeoutRef.current);
|
|
@@ -60919,26 +62095,25 @@ function WithdrawModal({
|
|
|
60919
62095
|
setSubmittedTxInfo(null);
|
|
60920
62096
|
setWithdrawDepositWalletId(void 0);
|
|
60921
62097
|
}, [open]);
|
|
60922
|
-
(0,
|
|
62098
|
+
(0, import_react28.useEffect)(() => () => {
|
|
60923
62099
|
if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
|
|
60924
62100
|
}, []);
|
|
60925
|
-
const handleTokenSymbolChange = (0,
|
|
62101
|
+
const handleTokenSymbolChange = (0, import_react28.useCallback)((symbol) => {
|
|
60926
62102
|
const tok = destinationTokens.find((t11) => t11.symbol === symbol);
|
|
60927
62103
|
if (tok) {
|
|
60928
62104
|
setSelectedToken(tok);
|
|
60929
62105
|
if (tok.chains.length > 0) setSelectedChain(tok.chains[0]);
|
|
60930
62106
|
}
|
|
60931
62107
|
}, [destinationTokens]);
|
|
60932
|
-
const handleChainKeyChange = (0,
|
|
62108
|
+
const handleChainKeyChange = (0, import_react28.useCallback)((chainKey) => {
|
|
60933
62109
|
if (!selectedToken) return;
|
|
60934
62110
|
const chain = selectedToken.chains.find((c) => getChainKey5(c.chain_id, c.chain_type) === chainKey);
|
|
60935
62111
|
if (chain) setSelectedChain(chain);
|
|
60936
62112
|
}, [selectedToken]);
|
|
60937
62113
|
const isSourceSupported = sourceValidation?.isSupported ?? null;
|
|
60938
|
-
const canWithdraw = !!onWithdraw || isWalletMatch;
|
|
60939
62114
|
const isAnyLoading = tokensLoading || isCheckingSourceToken;
|
|
60940
|
-
const withdrawPoweredByFooter = /* @__PURE__ */ (0,
|
|
60941
|
-
return /* @__PURE__ */ (0,
|
|
62115
|
+
const withdrawPoweredByFooter = /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(PoweredByUnifold, { color: colors2.foregroundMuted, className: "uf-flex uf-justify-center uf-shrink-0" }) });
|
|
62116
|
+
return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(PortalContainerProvider, { value: hideOverlay ? containerEl : null, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Dialog2, { open: hideOverlay || open, onOpenChange: hideOverlay ? void 0 : handleClose, modal: !hideOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
60942
62117
|
DialogContent2,
|
|
60943
62118
|
{
|
|
60944
62119
|
ref: hideOverlay ? containerCallbackRef : void 0,
|
|
@@ -60947,7 +62122,7 @@ function WithdrawModal({
|
|
|
60947
62122
|
style: { backgroundColor: colors2.background },
|
|
60948
62123
|
onPointerDownOutside: (e) => e.preventDefault(),
|
|
60949
62124
|
onInteractOutside: (e) => e.preventDefault(),
|
|
60950
|
-
children: /* @__PURE__ */ (0,
|
|
62125
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ThemeStyleInjector, { children: view === "confirming" && submittedTxInfo ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
60951
62126
|
WithdrawConfirmingView,
|
|
60952
62127
|
{
|
|
60953
62128
|
txInfo: submittedTxInfo,
|
|
@@ -60955,18 +62130,18 @@ function WithdrawModal({
|
|
|
60955
62130
|
onClose: handleClose,
|
|
60956
62131
|
onViewTracker: () => setView("tracker")
|
|
60957
62132
|
}
|
|
60958
|
-
) : view === "detail" && selectedExecution ? /* @__PURE__ */ (0,
|
|
60959
|
-
/* @__PURE__ */ (0,
|
|
62133
|
+
) : view === "detail" && selectedExecution ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
|
|
62134
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(DepositHeader, { title: "Withdrawal Details", showBack: true, showClose: !hideOverlay, onBack: () => {
|
|
60960
62135
|
setSelectedExecution(null);
|
|
60961
62136
|
setView("tracker");
|
|
60962
62137
|
}, onClose: handleClose }),
|
|
60963
|
-
/* @__PURE__ */ (0,
|
|
62138
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(DepositDetailContent, { execution: selectedExecution, variant: "withdraw" }),
|
|
60964
62139
|
withdrawPoweredByFooter
|
|
60965
62140
|
] }) : view === "tracker" ? (
|
|
60966
62141
|
/* ---------- Tracker view: execution list ---------- */
|
|
60967
|
-
/* @__PURE__ */ (0,
|
|
60968
|
-
/* @__PURE__ */ (0,
|
|
60969
|
-
/* @__PURE__ */ (0,
|
|
62142
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
|
|
62143
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(DepositHeader, { title: "Withdrawal History", showBack: true, showClose: !hideOverlay, onBack: () => setView("form"), onClose: handleClose }),
|
|
62144
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "uf-h-[460px] uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "uf-flex uf-flex-col uf-gap-2", children: allWithdrawals.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "uf-flex uf-items-center uf-justify-center uf-py-8", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("p", { className: "uf-text-sm", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: "No withdrawals to track yet" }) }) : allWithdrawals.map((ex) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
60970
62145
|
WithdrawExecutionItem,
|
|
60971
62146
|
{
|
|
60972
62147
|
execution: ex,
|
|
@@ -60976,20 +62151,20 @@ function WithdrawModal({
|
|
|
60976
62151
|
}
|
|
60977
62152
|
},
|
|
60978
62153
|
ex.id
|
|
60979
|
-
)) }),
|
|
62154
|
+
)) }) }),
|
|
60980
62155
|
withdrawPoweredByFooter
|
|
60981
62156
|
] })
|
|
60982
62157
|
) : (
|
|
60983
62158
|
/* ---------- Form view (default) ---------- */
|
|
60984
|
-
/* @__PURE__ */ (0,
|
|
60985
|
-
/* @__PURE__ */ (0,
|
|
60986
|
-
/* @__PURE__ */ (0,
|
|
60987
|
-
isAnyLoading ? /* @__PURE__ */ (0,
|
|
60988
|
-
/* @__PURE__ */ (0,
|
|
60989
|
-
/* @__PURE__ */ (0,
|
|
60990
|
-
/* @__PURE__ */ (0,
|
|
60991
|
-
] }) : /* @__PURE__ */ (0,
|
|
60992
|
-
/* @__PURE__ */ (0,
|
|
62159
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
|
|
62160
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(DepositHeader, { title: modalTitle || t9.title, showClose: !hideOverlay, onClose: handleClose }),
|
|
62161
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-3", children: [
|
|
62162
|
+
isAnyLoading ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "uf-space-y-3", children: [1, 2, 3].map((i) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "uf-w-full uf-bg-secondary uf-rounded-xl uf-p-3 uf-flex uf-items-center uf-animate-pulse", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "uf-bg-muted uf-rounded-lg uf-w-full uf-h-10" }) }, i)) }) : isSourceSupported === false ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
|
|
62163
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(TriangleAlert, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
|
|
62164
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-mb-2", style: { color: colors2.foreground, fontFamily: fonts.medium }, children: "Unsupported Source Token" }),
|
|
62165
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)("p", { className: "uf-text-sm uf-max-w-[280px]", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: sourceValidation?.errorMessage })
|
|
62166
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
|
|
62167
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
60993
62168
|
WithdrawDoubleInput,
|
|
60994
62169
|
{
|
|
60995
62170
|
tokens: destinationTokens,
|
|
@@ -61000,7 +62175,7 @@ function WithdrawModal({
|
|
|
61000
62175
|
isLoading: tokensLoading
|
|
61001
62176
|
}
|
|
61002
62177
|
),
|
|
61003
|
-
/* @__PURE__ */ (0,
|
|
62178
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
61004
62179
|
WithdrawForm,
|
|
61005
62180
|
{
|
|
61006
62181
|
publishableKey,
|
|
@@ -61016,26 +62191,23 @@ function WithdrawModal({
|
|
|
61016
62191
|
estimatedProcessingTime: sourceValidation?.estimatedProcessingTime ?? null,
|
|
61017
62192
|
maxSlippagePercent: sourceValidation?.maxSlippagePercent ?? null,
|
|
61018
62193
|
priceImpactPercent: sourceValidation?.priceImpactPercent ?? null,
|
|
61019
|
-
|
|
62194
|
+
senderAddress,
|
|
61020
62195
|
sourceChainId,
|
|
61021
62196
|
sourceTokenAddress,
|
|
61022
|
-
isWalletMatch,
|
|
61023
|
-
connectedWalletName,
|
|
61024
|
-
canWithdraw,
|
|
61025
62197
|
onWithdraw,
|
|
61026
62198
|
onWithdrawError,
|
|
61027
62199
|
onDepositWalletCreation: handleDepositWalletCreation,
|
|
61028
62200
|
onWithdrawSubmitted: handleWithdrawSubmitted,
|
|
61029
|
-
footerLeft: /* @__PURE__ */ (0,
|
|
62201
|
+
footerLeft: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
|
|
61030
62202
|
"button",
|
|
61031
62203
|
{
|
|
61032
62204
|
onClick: () => setView("tracker"),
|
|
61033
62205
|
className: "uf-flex uf-items-center uf-gap-1 uf-transition-colors hover:uf-opacity-70",
|
|
61034
62206
|
style: { color: colors2.foregroundMuted },
|
|
61035
62207
|
children: [
|
|
61036
|
-
/* @__PURE__ */ (0,
|
|
62208
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Clock, { className: "uf-w-3.5 uf-h-3.5" }),
|
|
61037
62209
|
"Withdrawal History",
|
|
61038
|
-
/* @__PURE__ */ (0,
|
|
62210
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ChevronRight, { className: "uf-w-3 uf-h-3" })
|
|
61039
62211
|
]
|
|
61040
62212
|
}
|
|
61041
62213
|
)
|
|
@@ -61059,6 +62231,10 @@ function UnifoldProvider2({
|
|
|
61059
62231
|
const [depositConfig, setDepositConfig] = (0, import_react.useState)(
|
|
61060
62232
|
null
|
|
61061
62233
|
);
|
|
62234
|
+
const [isCheckoutOpen, setIsCheckoutOpen] = (0, import_react.useState)(false);
|
|
62235
|
+
const [checkoutConfig, setCheckoutConfig] = (0, import_react.useState)(
|
|
62236
|
+
null
|
|
62237
|
+
);
|
|
61062
62238
|
const [isWithdrawOpen, setIsWithdrawOpen] = (0, import_react.useState)(false);
|
|
61063
62239
|
const [withdrawConfig, setWithdrawConfig] = (0, import_react.useState)(
|
|
61064
62240
|
null
|
|
@@ -61158,6 +62334,75 @@ function UnifoldProvider2({
|
|
|
61158
62334
|
depositPromiseRef.current = null;
|
|
61159
62335
|
}
|
|
61160
62336
|
}, [depositConfig]);
|
|
62337
|
+
const checkoutPromiseRef = import_react.default.useRef(null);
|
|
62338
|
+
const checkoutConfigRef = import_react.default.useRef(null);
|
|
62339
|
+
checkoutConfigRef.current = checkoutConfig;
|
|
62340
|
+
const checkoutCloseTimeoutRef = import_react.default.useRef(null);
|
|
62341
|
+
const checkoutCloseGuardRef = import_react.default.useRef(false);
|
|
62342
|
+
const beginCheckout = (0, import_react.useCallback)((config2) => {
|
|
62343
|
+
if (checkoutCloseTimeoutRef.current) {
|
|
62344
|
+
clearTimeout(checkoutCloseTimeoutRef.current);
|
|
62345
|
+
checkoutCloseTimeoutRef.current = null;
|
|
62346
|
+
}
|
|
62347
|
+
checkoutCloseGuardRef.current = false;
|
|
62348
|
+
if (checkoutPromiseRef.current) {
|
|
62349
|
+
console.warn("[UnifoldProvider] A checkout is already in progress. Cancelling previous checkout.");
|
|
62350
|
+
checkoutPromiseRef.current.reject({
|
|
62351
|
+
message: "Checkout cancelled - new checkout started",
|
|
62352
|
+
code: "CHECKOUT_SUPERSEDED"
|
|
62353
|
+
});
|
|
62354
|
+
checkoutPromiseRef.current = null;
|
|
62355
|
+
}
|
|
62356
|
+
const promise = new Promise((resolve, reject) => {
|
|
62357
|
+
checkoutPromiseRef.current = { resolve, reject };
|
|
62358
|
+
});
|
|
62359
|
+
promise.catch(() => {
|
|
62360
|
+
});
|
|
62361
|
+
setCheckoutConfig(config2);
|
|
62362
|
+
setIsCheckoutOpen(true);
|
|
62363
|
+
return promise;
|
|
62364
|
+
}, []);
|
|
62365
|
+
const closeCheckout = (0, import_react.useCallback)(() => {
|
|
62366
|
+
if (checkoutCloseGuardRef.current) {
|
|
62367
|
+
return;
|
|
62368
|
+
}
|
|
62369
|
+
checkoutCloseGuardRef.current = true;
|
|
62370
|
+
const promiseToReject = checkoutPromiseRef.current;
|
|
62371
|
+
checkoutPromiseRef.current = null;
|
|
62372
|
+
if (checkoutConfigRef.current?.onClose) {
|
|
62373
|
+
checkoutConfigRef.current.onClose();
|
|
62374
|
+
}
|
|
62375
|
+
if (promiseToReject) {
|
|
62376
|
+
promiseToReject.reject({
|
|
62377
|
+
message: "Checkout cancelled by user",
|
|
62378
|
+
code: "CHECKOUT_CANCELLED"
|
|
62379
|
+
});
|
|
62380
|
+
}
|
|
62381
|
+
setIsCheckoutOpen(false);
|
|
62382
|
+
checkoutCloseTimeoutRef.current = setTimeout(() => {
|
|
62383
|
+
setCheckoutConfig(null);
|
|
62384
|
+
checkoutCloseTimeoutRef.current = null;
|
|
62385
|
+
}, 200);
|
|
62386
|
+
}, []);
|
|
62387
|
+
const handleCheckoutSuccess = (0, import_react.useCallback)((data) => {
|
|
62388
|
+
if (checkoutConfig?.onSuccess) {
|
|
62389
|
+
checkoutConfig.onSuccess(data);
|
|
62390
|
+
}
|
|
62391
|
+
if (checkoutPromiseRef.current) {
|
|
62392
|
+
checkoutPromiseRef.current.resolve(data);
|
|
62393
|
+
checkoutPromiseRef.current = null;
|
|
62394
|
+
}
|
|
62395
|
+
}, [checkoutConfig]);
|
|
62396
|
+
const handleCheckoutError = (0, import_react.useCallback)((error) => {
|
|
62397
|
+
console.error("[UnifoldProvider] Checkout error:", error);
|
|
62398
|
+
if (checkoutConfig?.onError) {
|
|
62399
|
+
checkoutConfig.onError(error);
|
|
62400
|
+
}
|
|
62401
|
+
if (checkoutPromiseRef.current) {
|
|
62402
|
+
checkoutPromiseRef.current.reject(error);
|
|
62403
|
+
checkoutPromiseRef.current = null;
|
|
62404
|
+
}
|
|
62405
|
+
}, [checkoutConfig]);
|
|
61161
62406
|
const beginWithdraw = (0, import_react.useCallback)((config2) => {
|
|
61162
62407
|
if (withdrawCloseTimeoutRef.current) {
|
|
61163
62408
|
clearTimeout(withdrawCloseTimeoutRef.current);
|
|
@@ -61226,16 +62471,16 @@ function UnifoldProvider2({
|
|
|
61226
62471
|
() => ({
|
|
61227
62472
|
beginDeposit,
|
|
61228
62473
|
closeDeposit,
|
|
61229
|
-
|
|
61230
|
-
|
|
62474
|
+
beginCheckout,
|
|
62475
|
+
closeCheckout,
|
|
61231
62476
|
beginWithdraw,
|
|
61232
62477
|
closeWithdraw,
|
|
61233
62478
|
handleWithdrawSuccess,
|
|
61234
62479
|
handleWithdrawError
|
|
61235
62480
|
}),
|
|
61236
|
-
[beginDeposit, closeDeposit,
|
|
62481
|
+
[beginDeposit, closeDeposit, beginCheckout, closeCheckout, beginWithdraw, closeWithdraw, handleWithdrawSuccess, handleWithdrawError]
|
|
61237
62482
|
);
|
|
61238
|
-
return /* @__PURE__ */ (0,
|
|
62483
|
+
return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(UnifoldProvider, { publishableKey, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ConnectContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
|
|
61239
62484
|
ThemeProvider,
|
|
61240
62485
|
{
|
|
61241
62486
|
mode: resolvedTheme,
|
|
@@ -61246,7 +62491,20 @@ function UnifoldProvider2({
|
|
|
61246
62491
|
components: config?.components,
|
|
61247
62492
|
children: [
|
|
61248
62493
|
children,
|
|
61249
|
-
|
|
62494
|
+
checkoutConfig && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
|
|
62495
|
+
CheckoutModal,
|
|
62496
|
+
{
|
|
62497
|
+
open: isCheckoutOpen,
|
|
62498
|
+
onOpenChange: closeCheckout,
|
|
62499
|
+
clientSecret: checkoutConfig.clientSecret,
|
|
62500
|
+
publishableKey,
|
|
62501
|
+
enableConnectWallet: config?.enableConnectWallet,
|
|
62502
|
+
theme: resolvedTheme,
|
|
62503
|
+
onCheckoutSuccess: handleCheckoutSuccess,
|
|
62504
|
+
onCheckoutError: handleCheckoutError
|
|
62505
|
+
}
|
|
62506
|
+
),
|
|
62507
|
+
withdrawConfig && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
|
|
61250
62508
|
WithdrawModal,
|
|
61251
62509
|
{
|
|
61252
62510
|
open: isWithdrawOpen,
|
|
@@ -61266,7 +62524,7 @@ function UnifoldProvider2({
|
|
|
61266
62524
|
theme: resolvedTheme
|
|
61267
62525
|
}
|
|
61268
62526
|
),
|
|
61269
|
-
depositConfig && /* @__PURE__ */ (0,
|
|
62527
|
+
depositConfig && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
|
|
61270
62528
|
DepositModal,
|
|
61271
62529
|
{
|
|
61272
62530
|
open: isOpen,
|
|
@@ -61317,6 +62575,9 @@ function useUnifold2() {
|
|
|
61317
62575
|
beginDeposit: () => Promise.reject(new Error("SSR not supported")),
|
|
61318
62576
|
closeDeposit: () => {
|
|
61319
62577
|
},
|
|
62578
|
+
beginCheckout: () => Promise.reject(new Error("SSR not supported")),
|
|
62579
|
+
closeCheckout: () => {
|
|
62580
|
+
},
|
|
61320
62581
|
beginWithdraw: () => Promise.reject(new Error("SSR not supported")),
|
|
61321
62582
|
closeWithdraw: () => {
|
|
61322
62583
|
}
|
|
@@ -61329,15 +62590,17 @@ function useUnifold2() {
|
|
|
61329
62590
|
publishableKey: baseContext.publishableKey,
|
|
61330
62591
|
beginDeposit: connectContext.beginDeposit,
|
|
61331
62592
|
closeDeposit: connectContext.closeDeposit,
|
|
62593
|
+
beginCheckout: connectContext.beginCheckout,
|
|
62594
|
+
closeCheckout: connectContext.closeCheckout,
|
|
61332
62595
|
beginWithdraw: connectContext.beginWithdraw,
|
|
61333
62596
|
closeWithdraw: connectContext.closeWithdraw
|
|
61334
62597
|
};
|
|
61335
62598
|
}
|
|
61336
62599
|
|
|
61337
62600
|
// src/unifold.tsx
|
|
61338
|
-
var UnifoldBridge = (0,
|
|
62601
|
+
var UnifoldBridge = (0, import_react33.forwardRef)((_, ref) => {
|
|
61339
62602
|
const { beginDeposit, closeDeposit, beginWithdraw, closeWithdraw } = useUnifold2();
|
|
61340
|
-
(0,
|
|
62603
|
+
(0, import_react33.useImperativeHandle)(ref, () => ({ beginDeposit, closeDeposit, beginWithdraw, closeWithdraw }), [
|
|
61341
62604
|
beginDeposit,
|
|
61342
62605
|
closeDeposit,
|
|
61343
62606
|
beginWithdraw,
|
|
@@ -61346,7 +62609,7 @@ var UnifoldBridge = (0, import_react32.forwardRef)((_, ref) => {
|
|
|
61346
62609
|
return null;
|
|
61347
62610
|
});
|
|
61348
62611
|
UnifoldBridge.displayName = "UnifoldBridge";
|
|
61349
|
-
var RenderErrorBoundary = class extends
|
|
62612
|
+
var RenderErrorBoundary = class extends import_react33.Component {
|
|
61350
62613
|
constructor() {
|
|
61351
62614
|
super(...arguments);
|
|
61352
62615
|
this.state = { hasError: false };
|
|
@@ -61420,13 +62683,13 @@ function createUnifold(publishableKey, config) {
|
|
|
61420
62683
|
};
|
|
61421
62684
|
try {
|
|
61422
62685
|
root.render(
|
|
61423
|
-
|
|
62686
|
+
import_react33.default.createElement(
|
|
61424
62687
|
RenderErrorBoundary,
|
|
61425
62688
|
{ onError: handleRenderError },
|
|
61426
|
-
|
|
62689
|
+
import_react33.default.createElement(
|
|
61427
62690
|
UnifoldProvider2,
|
|
61428
62691
|
{ publishableKey, config },
|
|
61429
|
-
|
|
62692
|
+
import_react33.default.createElement(UnifoldBridge, { ref: refCallback })
|
|
61430
62693
|
)
|
|
61431
62694
|
)
|
|
61432
62695
|
);
|
|
@@ -61450,6 +62713,7 @@ lucide-react/dist/esm/Icon.js:
|
|
|
61450
62713
|
lucide-react/dist/esm/createLucideIcon.js:
|
|
61451
62714
|
lucide-react/dist/esm/icons/arrow-left-right.js:
|
|
61452
62715
|
lucide-react/dist/esm/icons/arrow-left.js:
|
|
62716
|
+
lucide-react/dist/esm/icons/arrow-right.js:
|
|
61453
62717
|
lucide-react/dist/esm/icons/arrow-up-down.js:
|
|
61454
62718
|
lucide-react/dist/esm/icons/check.js:
|
|
61455
62719
|
lucide-react/dist/esm/icons/chevron-down.js:
|