@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.js
CHANGED
|
@@ -34407,7 +34407,7 @@ __export(index_exports, {
|
|
|
34407
34407
|
module.exports = __toCommonJS(index_exports);
|
|
34408
34408
|
|
|
34409
34409
|
// src/unifold.tsx
|
|
34410
|
-
var
|
|
34410
|
+
var import_react33 = __toESM(require_react());
|
|
34411
34411
|
var import_client = __toESM(require_client());
|
|
34412
34412
|
|
|
34413
34413
|
// ../connect-react/dist/index.mjs
|
|
@@ -37227,17 +37227,19 @@ var React272 = __toESM(require_react(), 1);
|
|
|
37227
37227
|
var import_jsx_runtime69 = __toESM(require_jsx_runtime(), 1);
|
|
37228
37228
|
var import_jsx_runtime70 = __toESM(require_jsx_runtime(), 1);
|
|
37229
37229
|
var import_react27 = __toESM(require_react(), 1);
|
|
37230
|
-
var import_react28 = __toESM(require_react(), 1);
|
|
37231
37230
|
var import_jsx_runtime71 = __toESM(require_jsx_runtime(), 1);
|
|
37231
|
+
var import_react28 = __toESM(require_react(), 1);
|
|
37232
37232
|
var import_react29 = __toESM(require_react(), 1);
|
|
37233
37233
|
var import_jsx_runtime72 = __toESM(require_jsx_runtime(), 1);
|
|
37234
|
-
var import_jsx_runtime73 = __toESM(require_jsx_runtime(), 1);
|
|
37235
37234
|
var import_react30 = __toESM(require_react(), 1);
|
|
37235
|
+
var import_jsx_runtime73 = __toESM(require_jsx_runtime(), 1);
|
|
37236
37236
|
var import_jsx_runtime74 = __toESM(require_jsx_runtime(), 1);
|
|
37237
|
-
var import_jsx_runtime75 = __toESM(require_jsx_runtime(), 1);
|
|
37238
37237
|
var import_react31 = __toESM(require_react(), 1);
|
|
37238
|
+
var import_jsx_runtime75 = __toESM(require_jsx_runtime(), 1);
|
|
37239
37239
|
var import_jsx_runtime76 = __toESM(require_jsx_runtime(), 1);
|
|
37240
|
+
var import_react32 = __toESM(require_react(), 1);
|
|
37240
37241
|
var import_jsx_runtime77 = __toESM(require_jsx_runtime(), 1);
|
|
37242
|
+
var import_jsx_runtime78 = __toESM(require_jsx_runtime(), 1);
|
|
37241
37243
|
var __create2 = Object.create;
|
|
37242
37244
|
var __defProp2 = Object.defineProperty;
|
|
37243
37245
|
var __getOwnPropDesc2 = Object.getOwnPropertyDescriptor;
|
|
@@ -38501,6 +38503,10 @@ var ArrowLeft = createLucideIcon("ArrowLeft", [
|
|
|
38501
38503
|
["path", { d: "m12 19-7-7 7-7", key: "1l729n" }],
|
|
38502
38504
|
["path", { d: "M19 12H5", key: "x3x0zl" }]
|
|
38503
38505
|
]);
|
|
38506
|
+
var ArrowRight = createLucideIcon("ArrowRight", [
|
|
38507
|
+
["path", { d: "M5 12h14", key: "1ays0h" }],
|
|
38508
|
+
["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
|
|
38509
|
+
]);
|
|
38504
38510
|
var ArrowUpDown = createLucideIcon("ArrowUpDown", [
|
|
38505
38511
|
["path", { d: "m21 16-4 4-4-4", key: "f6ql7i" }],
|
|
38506
38512
|
["path", { d: "M17 20V4", key: "1ejh1v" }],
|
|
@@ -43495,6 +43501,28 @@ async function verifyRecipientAddress(request, publishableKey) {
|
|
|
43495
43501
|
}
|
|
43496
43502
|
return response.json();
|
|
43497
43503
|
}
|
|
43504
|
+
async function checkHypercoreActivation(request, publishableKey) {
|
|
43505
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
43506
|
+
validatePublishableKey(pk);
|
|
43507
|
+
const response = await fetch(
|
|
43508
|
+
`${API_BASE_URL}/v1/public/addresses/hypercore/activation`,
|
|
43509
|
+
{
|
|
43510
|
+
method: "POST",
|
|
43511
|
+
headers: {
|
|
43512
|
+
accept: "application/json",
|
|
43513
|
+
"x-publishable-key": pk,
|
|
43514
|
+
"Content-Type": "application/json"
|
|
43515
|
+
},
|
|
43516
|
+
body: JSON.stringify(request)
|
|
43517
|
+
}
|
|
43518
|
+
);
|
|
43519
|
+
if (!response.ok) {
|
|
43520
|
+
throw new Error(
|
|
43521
|
+
`HyperCore activation check failed: ${response.statusText}`
|
|
43522
|
+
);
|
|
43523
|
+
}
|
|
43524
|
+
return response.json();
|
|
43525
|
+
}
|
|
43498
43526
|
async function getExchanges(query, publishableKey) {
|
|
43499
43527
|
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
43500
43528
|
validatePublishableKey(pk);
|
|
@@ -43579,6 +43607,119 @@ async function sendSolanaTransaction(request, publishableKey) {
|
|
|
43579
43607
|
}
|
|
43580
43608
|
return response.json();
|
|
43581
43609
|
}
|
|
43610
|
+
async function retrievePaymentIntent(clientSecret, publishableKey) {
|
|
43611
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
43612
|
+
validatePublishableKey(pk);
|
|
43613
|
+
const response = await fetch(
|
|
43614
|
+
`${API_BASE_URL}/v1/public/payment_intents/retrieve`,
|
|
43615
|
+
{
|
|
43616
|
+
method: "POST",
|
|
43617
|
+
headers: {
|
|
43618
|
+
accept: "application/json",
|
|
43619
|
+
"x-publishable-key": pk,
|
|
43620
|
+
"Content-Type": "application/json"
|
|
43621
|
+
},
|
|
43622
|
+
body: JSON.stringify({ client_secret: clientSecret })
|
|
43623
|
+
}
|
|
43624
|
+
);
|
|
43625
|
+
if (!response.ok) {
|
|
43626
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
43627
|
+
throw new Error(
|
|
43628
|
+
`Failed to retrieve payment intent: ${error.message || response.statusText}`
|
|
43629
|
+
);
|
|
43630
|
+
}
|
|
43631
|
+
return response.json();
|
|
43632
|
+
}
|
|
43633
|
+
async function listPaymentIntentExecutions(clientSecret, publishableKey) {
|
|
43634
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
43635
|
+
validatePublishableKey(pk);
|
|
43636
|
+
const response = await fetch(
|
|
43637
|
+
`${API_BASE_URL}/v1/public/payment_intents/executions`,
|
|
43638
|
+
{
|
|
43639
|
+
method: "POST",
|
|
43640
|
+
headers: {
|
|
43641
|
+
accept: "application/json",
|
|
43642
|
+
"x-publishable-key": pk,
|
|
43643
|
+
"Content-Type": "application/json"
|
|
43644
|
+
},
|
|
43645
|
+
body: JSON.stringify({ client_secret: clientSecret })
|
|
43646
|
+
}
|
|
43647
|
+
);
|
|
43648
|
+
if (!response.ok) {
|
|
43649
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
43650
|
+
throw new Error(
|
|
43651
|
+
`Failed to list payment intent executions: ${error.message || response.statusText}`
|
|
43652
|
+
);
|
|
43653
|
+
}
|
|
43654
|
+
return response.json();
|
|
43655
|
+
}
|
|
43656
|
+
async function getDepositQuote(request, publishableKey) {
|
|
43657
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
43658
|
+
validatePublishableKey(pk);
|
|
43659
|
+
const response = await fetch(`${API_BASE_URL}/v1/public/quotes`, {
|
|
43660
|
+
method: "POST",
|
|
43661
|
+
headers: {
|
|
43662
|
+
accept: "application/json",
|
|
43663
|
+
"x-publishable-key": pk,
|
|
43664
|
+
"Content-Type": "application/json"
|
|
43665
|
+
},
|
|
43666
|
+
body: JSON.stringify(request)
|
|
43667
|
+
});
|
|
43668
|
+
if (!response.ok) {
|
|
43669
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
43670
|
+
throw new Error(
|
|
43671
|
+
`Failed to get deposit quote: ${error.message || response.statusText}`
|
|
43672
|
+
);
|
|
43673
|
+
}
|
|
43674
|
+
const json = await response.json();
|
|
43675
|
+
return json.data;
|
|
43676
|
+
}
|
|
43677
|
+
async function buildHypercoreTransaction(request, publishableKey) {
|
|
43678
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
43679
|
+
validatePublishableKey(pk);
|
|
43680
|
+
const response = await fetch(
|
|
43681
|
+
`${API_BASE_URL}/v1/public/transactions/hypercore/build`,
|
|
43682
|
+
{
|
|
43683
|
+
method: "POST",
|
|
43684
|
+
headers: {
|
|
43685
|
+
accept: "application/json",
|
|
43686
|
+
"x-publishable-key": pk,
|
|
43687
|
+
"Content-Type": "application/json"
|
|
43688
|
+
},
|
|
43689
|
+
body: JSON.stringify(request)
|
|
43690
|
+
}
|
|
43691
|
+
);
|
|
43692
|
+
if (!response.ok) {
|
|
43693
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
43694
|
+
throw new Error(
|
|
43695
|
+
`Failed to build HyperCore transaction: ${error.message || response.statusText}`
|
|
43696
|
+
);
|
|
43697
|
+
}
|
|
43698
|
+
return response.json();
|
|
43699
|
+
}
|
|
43700
|
+
async function sendHypercoreTransaction(request, publishableKey) {
|
|
43701
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
43702
|
+
validatePublishableKey(pk);
|
|
43703
|
+
const response = await fetch(
|
|
43704
|
+
`${API_BASE_URL}/v1/public/transactions/hypercore/send`,
|
|
43705
|
+
{
|
|
43706
|
+
method: "POST",
|
|
43707
|
+
headers: {
|
|
43708
|
+
accept: "application/json",
|
|
43709
|
+
"x-publishable-key": pk,
|
|
43710
|
+
"Content-Type": "application/json"
|
|
43711
|
+
},
|
|
43712
|
+
body: JSON.stringify(request)
|
|
43713
|
+
}
|
|
43714
|
+
);
|
|
43715
|
+
if (!response.ok) {
|
|
43716
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
43717
|
+
throw new Error(
|
|
43718
|
+
`Failed to send HyperCore transaction: ${error.message || response.statusText}`
|
|
43719
|
+
);
|
|
43720
|
+
}
|
|
43721
|
+
return response.json();
|
|
43722
|
+
}
|
|
43582
43723
|
var REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy");
|
|
43583
43724
|
var use = React25[" use ".trim().toString()];
|
|
43584
43725
|
function isPromiseLike(value) {
|
|
@@ -48935,6 +49076,7 @@ var CUTOFF_BUFFER_MS = 6e4;
|
|
|
48935
49076
|
function useDepositPolling({
|
|
48936
49077
|
userId,
|
|
48937
49078
|
publishableKey,
|
|
49079
|
+
clientSecret,
|
|
48938
49080
|
depositConfirmationMode = "auto_ui",
|
|
48939
49081
|
depositWalletId,
|
|
48940
49082
|
enabled = true,
|
|
@@ -48992,11 +49134,12 @@ function useDepositPolling({
|
|
|
48992
49134
|
depositWalletId
|
|
48993
49135
|
]);
|
|
48994
49136
|
(0, import_react10.useEffect)(() => {
|
|
48995
|
-
if (!
|
|
49137
|
+
if (!enabled) return;
|
|
49138
|
+
if (!clientSecret && !userId) return;
|
|
48996
49139
|
const modalOpenedAt = modalOpenedAtRef.current;
|
|
48997
49140
|
const poll = async () => {
|
|
48998
49141
|
try {
|
|
48999
|
-
const response = await queryExecutions(userId, publishableKey, ActionType.Deposit);
|
|
49142
|
+
const response = clientSecret ? await listPaymentIntentExecutions(clientSecret, publishableKey) : await queryExecutions(userId, publishableKey, ActionType.Deposit);
|
|
49000
49143
|
const cutoff = new Date(modalOpenedAt.getTime() - CUTOFF_BUFFER_MS);
|
|
49001
49144
|
const sortedExecutions = [...response.data].sort((a, b) => {
|
|
49002
49145
|
const timeA = a.created_at ? new Date(a.created_at).getTime() : 0;
|
|
@@ -49080,7 +49223,7 @@ function useDepositPolling({
|
|
|
49080
49223
|
clearInterval(pollInterval);
|
|
49081
49224
|
setIsPolling(false);
|
|
49082
49225
|
};
|
|
49083
|
-
}, [userId, publishableKey, enabled]);
|
|
49226
|
+
}, [userId, publishableKey, clientSecret, enabled]);
|
|
49084
49227
|
(0, import_react10.useEffect)(() => {
|
|
49085
49228
|
if (!pollingEnabled || !depositWalletId) return;
|
|
49086
49229
|
const triggerPoll = async () => {
|
|
@@ -55589,6 +55732,7 @@ var parseChainKey = (chainKey) => {
|
|
|
55589
55732
|
function TransferCryptoSingleInput({
|
|
55590
55733
|
userId,
|
|
55591
55734
|
publishableKey,
|
|
55735
|
+
clientSecret,
|
|
55592
55736
|
recipientAddress,
|
|
55593
55737
|
destinationChainType,
|
|
55594
55738
|
destinationChainId,
|
|
@@ -55601,7 +55745,9 @@ function TransferCryptoSingleInput({
|
|
|
55601
55745
|
onExecutionsChange,
|
|
55602
55746
|
onDepositSuccess,
|
|
55603
55747
|
onDepositError,
|
|
55604
|
-
wallets: externalWallets
|
|
55748
|
+
wallets: externalWallets,
|
|
55749
|
+
onSourceTokenChange,
|
|
55750
|
+
checkoutQuote
|
|
55605
55751
|
}) {
|
|
55606
55752
|
const { themeClass, colors: colors2, fonts, components } = useTheme();
|
|
55607
55753
|
const isDarkMode = themeClass.includes("uf-dark");
|
|
@@ -55668,12 +55814,28 @@ function TransferCryptoSingleInput({
|
|
|
55668
55814
|
} = useDepositPolling({
|
|
55669
55815
|
userId,
|
|
55670
55816
|
publishableKey,
|
|
55817
|
+
clientSecret,
|
|
55671
55818
|
depositConfirmationMode,
|
|
55672
55819
|
depositWalletId: currentWallet?.id,
|
|
55673
55820
|
enabled: true,
|
|
55674
55821
|
onDepositSuccess,
|
|
55675
55822
|
onDepositError
|
|
55676
55823
|
});
|
|
55824
|
+
(0, import_react16.useEffect)(() => {
|
|
55825
|
+
if (!onSourceTokenChange || !token || !chain || !initialSelectionDone) return;
|
|
55826
|
+
const { chainType, chainId } = parseChainKey(chain);
|
|
55827
|
+
const matchedToken = supportedTokens.find((t11) => t11.symbol === token);
|
|
55828
|
+
const matchedChain = matchedToken?.chains.find(
|
|
55829
|
+
(c) => c.chain_type === chainType && c.chain_id === chainId
|
|
55830
|
+
);
|
|
55831
|
+
onSourceTokenChange({
|
|
55832
|
+
symbol: token,
|
|
55833
|
+
chainType,
|
|
55834
|
+
chainId,
|
|
55835
|
+
tokenAddress: matchedChain?.token_address ?? "",
|
|
55836
|
+
minimumDepositAmountUsd: matchedChain?.minimum_deposit_amount_usd ?? 0
|
|
55837
|
+
});
|
|
55838
|
+
}, [token, chain, initialSelectionDone, onSourceTokenChange, supportedTokens]);
|
|
55677
55839
|
(0, import_react16.useEffect)(() => {
|
|
55678
55840
|
if (onExecutionsChange) {
|
|
55679
55841
|
onExecutionsChange(depositExecutions);
|
|
@@ -55820,6 +55982,53 @@ function TransferCryptoSingleInput({
|
|
|
55820
55982
|
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { children: "Retrying automatically every 5 seconds..." })
|
|
55821
55983
|
] })
|
|
55822
55984
|
] }),
|
|
55985
|
+
checkoutQuote && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
55986
|
+
"div",
|
|
55987
|
+
{
|
|
55988
|
+
className: "uf-rounded-xl uf-px-3 uf-py-2 uf-flex uf-items-center uf-justify-between",
|
|
55989
|
+
style: {
|
|
55990
|
+
backgroundColor: components.card.backgroundColor,
|
|
55991
|
+
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`,
|
|
55992
|
+
borderRadius: components.card.borderRadius
|
|
55993
|
+
},
|
|
55994
|
+
children: [
|
|
55995
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
55996
|
+
"span",
|
|
55997
|
+
{
|
|
55998
|
+
className: "uf-text-xs",
|
|
55999
|
+
style: { color: components.card.subtitleColor, fontFamily: fonts.regular },
|
|
56000
|
+
children: "You send"
|
|
56001
|
+
}
|
|
56002
|
+
),
|
|
56003
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
56004
|
+
"span",
|
|
56005
|
+
{
|
|
56006
|
+
className: "uf-text-sm uf-font-semibold",
|
|
56007
|
+
style: { color: components.card.titleColor, fontFamily: fonts.semibold },
|
|
56008
|
+
children: [
|
|
56009
|
+
(Number(checkoutQuote.sourceAmount) / 10 ** checkoutQuote.sourceTokenDecimals).toFixed(
|
|
56010
|
+
Math.min(checkoutQuote.sourceTokenDecimals, 6)
|
|
56011
|
+
),
|
|
56012
|
+
" ",
|
|
56013
|
+
checkoutQuote.sourceTokenSymbol,
|
|
56014
|
+
checkoutQuote.sourceAmountUsd && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
56015
|
+
"span",
|
|
56016
|
+
{
|
|
56017
|
+
className: "uf-text-xs uf-font-normal uf-ml-1.5",
|
|
56018
|
+
style: { color: components.card.subtitleColor },
|
|
56019
|
+
children: [
|
|
56020
|
+
"($",
|
|
56021
|
+
checkoutQuote.sourceAmountUsd,
|
|
56022
|
+
")"
|
|
56023
|
+
]
|
|
56024
|
+
}
|
|
56025
|
+
)
|
|
56026
|
+
]
|
|
56027
|
+
}
|
|
56028
|
+
)
|
|
56029
|
+
]
|
|
56030
|
+
}
|
|
56031
|
+
),
|
|
55823
56032
|
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-pt-2", children: [
|
|
55824
56033
|
/* @__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" }),
|
|
55825
56034
|
/* @__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 ? (
|
|
@@ -56641,9 +56850,16 @@ function SelectTokenView({
|
|
|
56641
56850
|
onBack,
|
|
56642
56851
|
onClose,
|
|
56643
56852
|
onDisconnectWallet,
|
|
56644
|
-
isDisconnectingWallet = false
|
|
56853
|
+
isDisconnectingWallet = false,
|
|
56854
|
+
checkoutAmountUsd,
|
|
56855
|
+
checkoutReceivedUsd
|
|
56645
56856
|
}) {
|
|
56646
56857
|
const { colors: colors2, fonts, components } = useTheme();
|
|
56858
|
+
const isCheckout = !!checkoutAmountUsd;
|
|
56859
|
+
const headerSubtitle = isCheckout ? parseFloat(checkoutReceivedUsd || "0") > 0 ? `$${checkoutReceivedUsd} / $${checkoutAmountUsd} received` : `Amount due: $${checkoutAmountUsd}` : formatBalanceDisplay(
|
|
56860
|
+
`$${totalBalanceUsd || "0.00"}`,
|
|
56861
|
+
projectName
|
|
56862
|
+
);
|
|
56647
56863
|
return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
|
|
56648
56864
|
"div",
|
|
56649
56865
|
{
|
|
@@ -56652,11 +56868,8 @@ function SelectTokenView({
|
|
|
56652
56868
|
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
|
|
56653
56869
|
DepositHeader,
|
|
56654
56870
|
{
|
|
56655
|
-
title: "Select Token",
|
|
56656
|
-
subtitle:
|
|
56657
|
-
`$${totalBalanceUsd || "0.00"}`,
|
|
56658
|
-
projectName
|
|
56659
|
-
),
|
|
56871
|
+
title: isCheckout ? "Select Token" : "Select Token",
|
|
56872
|
+
subtitle: headerSubtitle,
|
|
56660
56873
|
showBack: true,
|
|
56661
56874
|
onBack,
|
|
56662
56875
|
onClose
|
|
@@ -56884,10 +57097,19 @@ function EnterAmountView({
|
|
|
56884
57097
|
onReview,
|
|
56885
57098
|
onBack,
|
|
56886
57099
|
onClose,
|
|
56887
|
-
quickSelectMode
|
|
57100
|
+
quickSelectMode,
|
|
57101
|
+
checkoutAmountUsd,
|
|
57102
|
+
checkoutReceivedUsd
|
|
56888
57103
|
}) {
|
|
56889
57104
|
const { colors: colors2, fonts, components } = useTheme();
|
|
57105
|
+
const isCheckout = !!checkoutAmountUsd;
|
|
56890
57106
|
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}`;
|
|
57107
|
+
const checkoutRemainingUsd = isCheckout ? Math.max(
|
|
57108
|
+
parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0"),
|
|
57109
|
+
0
|
|
57110
|
+
).toFixed(2) : null;
|
|
57111
|
+
const headerTitle = isCheckout ? `Pay $${checkoutRemainingUsd}` : "Enter Amount";
|
|
57112
|
+
const headerSubtitle = isCheckout ? parseFloat(checkoutReceivedUsd || "0") > 0 ? `$${checkoutReceivedUsd} / $${checkoutAmountUsd} received` : null : balanceSubtitle;
|
|
56891
57113
|
const usePercentageChips = quickSelectMode === "percentage" && maxUsdAmount > 0;
|
|
56892
57114
|
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";
|
|
56893
57115
|
return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
@@ -56901,14 +57123,27 @@ function EnterAmountView({
|
|
|
56901
57123
|
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
56902
57124
|
DepositHeader,
|
|
56903
57125
|
{
|
|
56904
|
-
title:
|
|
56905
|
-
subtitle:
|
|
57126
|
+
title: headerTitle,
|
|
57127
|
+
subtitle: headerSubtitle ?? void 0,
|
|
56906
57128
|
showBack: true,
|
|
56907
57129
|
onBack,
|
|
56908
57130
|
onClose
|
|
56909
57131
|
}
|
|
56910
57132
|
),
|
|
56911
|
-
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.
|
|
57133
|
+
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: [
|
|
57134
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)(WalletWithNetworkBadge, { walletInfo: walletInfoProp }),
|
|
57135
|
+
isCheckout && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
57136
|
+
"span",
|
|
57137
|
+
{
|
|
57138
|
+
className: "uf-text-xs",
|
|
57139
|
+
style: {
|
|
57140
|
+
color: colors2.foregroundMuted,
|
|
57141
|
+
fontFamily: fonts.regular
|
|
57142
|
+
},
|
|
57143
|
+
children: balanceSubtitle
|
|
57144
|
+
}
|
|
57145
|
+
)
|
|
57146
|
+
] }) }) : null,
|
|
56912
57147
|
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "uf-flex uf-min-h-0 uf-flex-1 uf-flex-col", children: [
|
|
56913
57148
|
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "uf-min-h-0 uf-flex-1", children: [
|
|
56914
57149
|
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "uf-text-center uf-py-8", children: [
|
|
@@ -56931,7 +57166,9 @@ function EnterAmountView({
|
|
|
56931
57166
|
inputMode: "decimal",
|
|
56932
57167
|
placeholder: "0",
|
|
56933
57168
|
value: amountUsd,
|
|
57169
|
+
readOnly: isCheckout,
|
|
56934
57170
|
onChange: (e) => {
|
|
57171
|
+
if (isCheckout) return;
|
|
56935
57172
|
const value = e.target.value;
|
|
56936
57173
|
if (value === "" || /^\d*\.?\d*$/.test(value)) {
|
|
56937
57174
|
const decimalIndex = value.indexOf(".");
|
|
@@ -56942,7 +57179,7 @@ function EnterAmountView({
|
|
|
56942
57179
|
onAmountChange(value);
|
|
56943
57180
|
}
|
|
56944
57181
|
},
|
|
56945
|
-
className:
|
|
57182
|
+
className: `uf-bg-transparent uf-outline-none uf-text-center uf-font-normal uf-w-auto uf-min-w-[60px] ${isCheckout ? "uf-cursor-default" : ""}`,
|
|
56946
57183
|
style: {
|
|
56947
57184
|
fontSize: `${Math.max(3.75 - (amountUsd || "0").length * 0.15, 2)}rem`,
|
|
56948
57185
|
color: components.input.textColor,
|
|
@@ -56964,7 +57201,7 @@ function EnterAmountView({
|
|
|
56964
57201
|
}
|
|
56965
57202
|
)
|
|
56966
57203
|
] }),
|
|
56967
|
-
/* @__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: [
|
|
57204
|
+
!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: [
|
|
56968
57205
|
PERCENT_QUICK_AMOUNTS.map((pct) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
56969
57206
|
"button",
|
|
56970
57207
|
{
|
|
@@ -57033,7 +57270,46 @@ function EnterAmountView({
|
|
|
57033
57270
|
}
|
|
57034
57271
|
)
|
|
57035
57272
|
] }) }),
|
|
57036
|
-
tokenChainDetails && tokenChainDetails.minimum_deposit_amount_usd > 0 && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
57273
|
+
tokenChainDetails && tokenChainDetails.minimum_deposit_amount_usd > 0 && (isCheckout && checkoutAmountUsd && inputUsdNum > parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0") + 5e-3 ? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
57274
|
+
"div",
|
|
57275
|
+
{
|
|
57276
|
+
className: "uf-rounded-lg uf-px-3 uf-py-2 uf-mb-3 uf-text-center",
|
|
57277
|
+
style: {
|
|
57278
|
+
backgroundColor: colors2.warning + "15",
|
|
57279
|
+
border: `1px solid ${colors2.warning}30`,
|
|
57280
|
+
borderRadius: components.card.borderRadius,
|
|
57281
|
+
animation: "uf-fadeSlideIn 0.4s ease-out"
|
|
57282
|
+
},
|
|
57283
|
+
children: [
|
|
57284
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
57285
|
+
"div",
|
|
57286
|
+
{
|
|
57287
|
+
className: "uf-text-xs uf-font-medium",
|
|
57288
|
+
style: { color: colors2.warning, fontFamily: fonts.medium },
|
|
57289
|
+
children: [
|
|
57290
|
+
"Minimum for ",
|
|
57291
|
+
selectedToken.symbol,
|
|
57292
|
+
" on ",
|
|
57293
|
+
selectedToken.chain_name,
|
|
57294
|
+
" is $",
|
|
57295
|
+
tokenChainDetails.minimum_deposit_amount_usd.toFixed(2)
|
|
57296
|
+
]
|
|
57297
|
+
}
|
|
57298
|
+
),
|
|
57299
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
57300
|
+
"div",
|
|
57301
|
+
{
|
|
57302
|
+
className: "uf-text-xs uf-mt-0.5",
|
|
57303
|
+
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
57304
|
+
children: [
|
|
57305
|
+
"Amount adjusted from remaining $",
|
|
57306
|
+
(parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0")).toFixed(2)
|
|
57307
|
+
]
|
|
57308
|
+
}
|
|
57309
|
+
)
|
|
57310
|
+
]
|
|
57311
|
+
}
|
|
57312
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
57037
57313
|
"div",
|
|
57038
57314
|
{
|
|
57039
57315
|
className: "uf-text-center uf-text-xs uf-mb-3",
|
|
@@ -57043,7 +57319,7 @@ function EnterAmountView({
|
|
|
57043
57319
|
tokenChainDetails.minimum_deposit_amount_usd.toFixed(2)
|
|
57044
57320
|
]
|
|
57045
57321
|
}
|
|
57046
|
-
),
|
|
57322
|
+
)),
|
|
57047
57323
|
inputUsdNum > 0 && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_jsx_runtime65.Fragment, { children: inputUsdNum > maxUsdAmount ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
57048
57324
|
"div",
|
|
57049
57325
|
{
|
|
@@ -57058,7 +57334,44 @@ function EnterAmountView({
|
|
|
57058
57334
|
style: { color: colors2.error },
|
|
57059
57335
|
children: error
|
|
57060
57336
|
}
|
|
57061
|
-
) })
|
|
57337
|
+
) }),
|
|
57338
|
+
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: [
|
|
57339
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "uf-relative", children: [
|
|
57340
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
57341
|
+
"img",
|
|
57342
|
+
{
|
|
57343
|
+
src: selectedToken.icon_url,
|
|
57344
|
+
alt: selectedToken.symbol,
|
|
57345
|
+
width: 20,
|
|
57346
|
+
height: 20,
|
|
57347
|
+
className: "uf-w-5 uf-h-5 uf-rounded-full"
|
|
57348
|
+
}
|
|
57349
|
+
),
|
|
57350
|
+
selectedToken.chain_icon_url && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
57351
|
+
"img",
|
|
57352
|
+
{
|
|
57353
|
+
src: selectedToken.chain_icon_url,
|
|
57354
|
+
alt: selectedToken.chain_name,
|
|
57355
|
+
width: 10,
|
|
57356
|
+
height: 10,
|
|
57357
|
+
className: "uf-w-2.5 uf-h-2.5 uf-rounded-full uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-border",
|
|
57358
|
+
style: { borderColor: colors2.background }
|
|
57359
|
+
}
|
|
57360
|
+
)
|
|
57361
|
+
] }),
|
|
57362
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
57363
|
+
"span",
|
|
57364
|
+
{
|
|
57365
|
+
className: "uf-text-xs",
|
|
57366
|
+
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
57367
|
+
children: [
|
|
57368
|
+
selectedToken.symbol,
|
|
57369
|
+
" on ",
|
|
57370
|
+
selectedToken.chain_name
|
|
57371
|
+
]
|
|
57372
|
+
}
|
|
57373
|
+
)
|
|
57374
|
+
] })
|
|
57062
57375
|
] }),
|
|
57063
57376
|
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "uf-shrink-0 uf-pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
57064
57377
|
"button",
|
|
@@ -57082,6 +57395,18 @@ function EnterAmountView({
|
|
|
57082
57395
|
}
|
|
57083
57396
|
);
|
|
57084
57397
|
}
|
|
57398
|
+
var WALLET_ICONS2 = {
|
|
57399
|
+
metamask: MetamaskIcon,
|
|
57400
|
+
phantom: PhantomIcon,
|
|
57401
|
+
coinbase: CoinbaseIcon,
|
|
57402
|
+
trust: TrustIcon,
|
|
57403
|
+
rainbow: RainbowIcon,
|
|
57404
|
+
rabby: RabbyIcon,
|
|
57405
|
+
okx: OkxIcon,
|
|
57406
|
+
solflare: SolflareIcon,
|
|
57407
|
+
backpack: BackpackIcon,
|
|
57408
|
+
glow: GlowIcon
|
|
57409
|
+
};
|
|
57085
57410
|
function ReviewView({
|
|
57086
57411
|
walletInfo,
|
|
57087
57412
|
recipientAddress,
|
|
@@ -57116,30 +57441,17 @@ function ReviewView({
|
|
|
57116
57441
|
),
|
|
57117
57442
|
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "uf-flex uf-min-h-0 uf-flex-1 uf-flex-col", children: [
|
|
57118
57443
|
/* @__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: [
|
|
57119
|
-
/* @__PURE__ */ (0, import_jsx_runtime66.
|
|
57120
|
-
|
|
57121
|
-
|
|
57122
|
-
|
|
57123
|
-
|
|
57124
|
-
|
|
57125
|
-
|
|
57126
|
-
|
|
57127
|
-
|
|
57128
|
-
|
|
57129
|
-
|
|
57130
|
-
),
|
|
57131
|
-
formattedTokenAmount && /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
|
|
57132
|
-
"div",
|
|
57133
|
-
{
|
|
57134
|
-
className: "uf-text-sm uf-mt-2",
|
|
57135
|
-
style: { color: colors2.foregroundMuted },
|
|
57136
|
-
children: [
|
|
57137
|
-
"\u2248 ",
|
|
57138
|
-
formattedTokenAmount
|
|
57139
|
-
]
|
|
57140
|
-
}
|
|
57141
|
-
)
|
|
57142
|
-
] }),
|
|
57444
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "uf-text-center", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
|
|
57445
|
+
"div",
|
|
57446
|
+
{
|
|
57447
|
+
className: "uf-text-4xl uf-font-medium",
|
|
57448
|
+
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
57449
|
+
children: [
|
|
57450
|
+
"$",
|
|
57451
|
+
amountUsd || "0"
|
|
57452
|
+
]
|
|
57453
|
+
}
|
|
57454
|
+
) }),
|
|
57143
57455
|
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
|
|
57144
57456
|
"div",
|
|
57145
57457
|
{
|
|
@@ -57156,29 +57468,20 @@ function ReviewView({
|
|
|
57156
57468
|
{
|
|
57157
57469
|
className: "uf-text-sm",
|
|
57158
57470
|
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
57159
|
-
children: "
|
|
57471
|
+
children: "From"
|
|
57160
57472
|
}
|
|
57161
57473
|
),
|
|
57162
57474
|
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
57163
|
-
|
|
57164
|
-
|
|
57165
|
-
{
|
|
57166
|
-
|
|
57167
|
-
|
|
57168
|
-
className: "uf-w-5 uf-h-5 uf-rounded-full"
|
|
57169
|
-
}
|
|
57170
|
-
),
|
|
57171
|
-
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
|
|
57475
|
+
WALLET_ICONS2[walletInfo.icon] && (() => {
|
|
57476
|
+
const Icon22 = WALLET_ICONS2[walletInfo.icon];
|
|
57477
|
+
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" }) });
|
|
57478
|
+
})(),
|
|
57479
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
57172
57480
|
"span",
|
|
57173
57481
|
{
|
|
57174
57482
|
className: "uf-text-sm uf-font-medium",
|
|
57175
57483
|
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
57176
|
-
children:
|
|
57177
|
-
walletInfo.name,
|
|
57178
|
-
" (",
|
|
57179
|
-
truncateAddress2(walletInfo.address),
|
|
57180
|
-
")"
|
|
57181
|
-
]
|
|
57484
|
+
children: walletInfo.name
|
|
57182
57485
|
}
|
|
57183
57486
|
)
|
|
57184
57487
|
] })
|
|
@@ -57189,10 +57492,38 @@ function ReviewView({
|
|
|
57189
57492
|
{
|
|
57190
57493
|
className: "uf-text-sm",
|
|
57191
57494
|
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
57192
|
-
children: "
|
|
57495
|
+
children: "You send"
|
|
57193
57496
|
}
|
|
57194
57497
|
),
|
|
57195
|
-
/* @__PURE__ */ (0, import_jsx_runtime66.
|
|
57498
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
57499
|
+
getIconUrl2(selectedToken.icon_url, assetCdnUrl) && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
57500
|
+
"img",
|
|
57501
|
+
{
|
|
57502
|
+
src: getIconUrl2(selectedToken.icon_url, assetCdnUrl),
|
|
57503
|
+
alt: selectedToken.symbol,
|
|
57504
|
+
className: "uf-w-5 uf-h-5 uf-rounded-full"
|
|
57505
|
+
}
|
|
57506
|
+
),
|
|
57507
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
57508
|
+
"span",
|
|
57509
|
+
{
|
|
57510
|
+
className: "uf-text-sm uf-font-medium",
|
|
57511
|
+
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
57512
|
+
children: formattedTokenAmount || `$${amountUsd}`
|
|
57513
|
+
}
|
|
57514
|
+
)
|
|
57515
|
+
] })
|
|
57516
|
+
] }),
|
|
57517
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "uf-flex uf-justify-between uf-items-center", children: [
|
|
57518
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
57519
|
+
"span",
|
|
57520
|
+
{
|
|
57521
|
+
className: "uf-text-sm",
|
|
57522
|
+
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
57523
|
+
children: "Destination"
|
|
57524
|
+
}
|
|
57525
|
+
),
|
|
57526
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
57196
57527
|
"span",
|
|
57197
57528
|
{
|
|
57198
57529
|
className: "uf-text-sm uf-font-medium",
|
|
@@ -57341,7 +57672,10 @@ function ReviewView({
|
|
|
57341
57672
|
borderRadius: components.button.borderRadius,
|
|
57342
57673
|
border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
|
|
57343
57674
|
},
|
|
57344
|
-
children: isConfirming ? "
|
|
57675
|
+
children: isConfirming ? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2", children: [
|
|
57676
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
|
|
57677
|
+
"Confirming..."
|
|
57678
|
+
] }) : "Confirm Order"
|
|
57345
57679
|
}
|
|
57346
57680
|
) })
|
|
57347
57681
|
] })
|
|
@@ -57350,17 +57684,35 @@ function ReviewView({
|
|
|
57350
57684
|
}
|
|
57351
57685
|
);
|
|
57352
57686
|
}
|
|
57687
|
+
var SETTLE_FALLBACK_MS = 15e3;
|
|
57353
57688
|
function ConfirmingView({
|
|
57354
57689
|
isConfirming,
|
|
57355
57690
|
onClose,
|
|
57356
57691
|
executions = [],
|
|
57357
|
-
isPolling = false
|
|
57692
|
+
isPolling = false,
|
|
57693
|
+
onNewDeposit,
|
|
57694
|
+
onDone,
|
|
57695
|
+
paymentIntentStatus,
|
|
57696
|
+
amountReceivedUsd,
|
|
57697
|
+
amountReceivedUsdAtSubmission
|
|
57358
57698
|
}) {
|
|
57359
|
-
const { colors: colors2, fonts } = useTheme();
|
|
57699
|
+
const { colors: colors2, fonts, components } = useTheme();
|
|
57360
57700
|
const [containerEl, setContainerEl] = (0, import_react26.useState)(null);
|
|
57361
57701
|
const containerCallbackRef = (0, import_react26.useCallback)((el) => {
|
|
57362
57702
|
setContainerEl(el);
|
|
57363
57703
|
}, []);
|
|
57704
|
+
const [fallbackSettled, setFallbackSettled] = (0, import_react26.useState)(false);
|
|
57705
|
+
const hasExecution = executions.length > 0;
|
|
57706
|
+
const isCheckoutMode = paymentIntentStatus != null;
|
|
57707
|
+
const isPaymentComplete = paymentIntentStatus === "succeeded";
|
|
57708
|
+
const amountChanged = amountReceivedUsdAtSubmission != null && amountReceivedUsd != null && amountReceivedUsd !== amountReceivedUsdAtSubmission;
|
|
57709
|
+
const piSettled = !isCheckoutMode || isPaymentComplete || amountChanged || fallbackSettled;
|
|
57710
|
+
(0, import_react26.useEffect)(() => {
|
|
57711
|
+
if (!hasExecution || piSettled) return;
|
|
57712
|
+
const timeout = setTimeout(() => setFallbackSettled(true), SETTLE_FALLBACK_MS);
|
|
57713
|
+
return () => clearTimeout(timeout);
|
|
57714
|
+
}, [hasExecution, piSettled]);
|
|
57715
|
+
const showButtons = hasExecution && piSettled;
|
|
57364
57716
|
return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(PortalContainerProvider, { value: containerEl, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
|
|
57365
57717
|
"div",
|
|
57366
57718
|
{
|
|
@@ -57373,8 +57725,8 @@ function ConfirmingView({
|
|
|
57373
57725
|
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
57374
57726
|
DepositHeader,
|
|
57375
57727
|
{
|
|
57376
|
-
title: isConfirming ? "Confirming..." : "Processing",
|
|
57377
|
-
onClose
|
|
57728
|
+
title: isConfirming ? "Confirming..." : hasExecution && isPaymentComplete ? "Payment Complete" : hasExecution ? "Deposit Received" : "Processing",
|
|
57729
|
+
onClose: isPaymentComplete && onDone ? onDone : onClose
|
|
57378
57730
|
}
|
|
57379
57731
|
),
|
|
57380
57732
|
/* @__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: [
|
|
@@ -57401,11 +57753,70 @@ function ConfirmingView({
|
|
|
57401
57753
|
children: "Please confirm the transaction in your wallet"
|
|
57402
57754
|
}
|
|
57403
57755
|
)
|
|
57404
|
-
] }) : /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
|
|
57756
|
+
] }) : hasExecution ? /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
|
|
57405
57757
|
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
57406
57758
|
CircleCheck,
|
|
57407
57759
|
{
|
|
57408
57760
|
className: "uf-w-12 uf-h-12 uf-mb-4",
|
|
57761
|
+
style: { color: "rgb(34, 197, 94)" }
|
|
57762
|
+
}
|
|
57763
|
+
),
|
|
57764
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
57765
|
+
"div",
|
|
57766
|
+
{
|
|
57767
|
+
className: "uf-text-lg uf-font-medium",
|
|
57768
|
+
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
57769
|
+
children: isPaymentComplete ? "Payment Complete" : "Deposit Received"
|
|
57770
|
+
}
|
|
57771
|
+
),
|
|
57772
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
57773
|
+
"div",
|
|
57774
|
+
{
|
|
57775
|
+
className: "uf-text-sm uf-mt-2 uf-text-center uf-px-6",
|
|
57776
|
+
style: { color: colors2.foregroundMuted },
|
|
57777
|
+
children: isPaymentComplete ? "Your payment has been fulfilled." : showButtons ? "Your deposit is being processed." : "Checking payment status..."
|
|
57778
|
+
}
|
|
57779
|
+
),
|
|
57780
|
+
/* @__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)(
|
|
57781
|
+
LoaderCircle,
|
|
57782
|
+
{
|
|
57783
|
+
className: "uf-w-5 uf-h-5 uf-animate-spin",
|
|
57784
|
+
style: { color: colors2.foregroundMuted }
|
|
57785
|
+
}
|
|
57786
|
+
) : isPaymentComplete && onDone ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
57787
|
+
"button",
|
|
57788
|
+
{
|
|
57789
|
+
onClick: onDone,
|
|
57790
|
+
className: "uf-w-full uf-py-3 uf-px-8 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
|
+
borderRadius: components.button.borderRadius
|
|
57796
|
+
},
|
|
57797
|
+
children: "Done"
|
|
57798
|
+
}
|
|
57799
|
+
) : onNewDeposit ? /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
|
|
57800
|
+
"button",
|
|
57801
|
+
{
|
|
57802
|
+
onClick: onNewDeposit,
|
|
57803
|
+
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",
|
|
57804
|
+
style: {
|
|
57805
|
+
backgroundColor: colors2.primary,
|
|
57806
|
+
color: colors2.primaryForeground,
|
|
57807
|
+
fontFamily: fonts.medium
|
|
57808
|
+
},
|
|
57809
|
+
children: [
|
|
57810
|
+
"Make another deposit",
|
|
57811
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ArrowRight, { className: "uf-w-4 uf-h-4" })
|
|
57812
|
+
]
|
|
57813
|
+
}
|
|
57814
|
+
) : null })
|
|
57815
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
|
|
57816
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
57817
|
+
LoaderCircle,
|
|
57818
|
+
{
|
|
57819
|
+
className: "uf-w-12 uf-h-12 uf-animate-spin uf-mb-4",
|
|
57409
57820
|
style: { color: colors2.primary }
|
|
57410
57821
|
}
|
|
57411
57822
|
),
|
|
@@ -57422,7 +57833,7 @@ function ConfirmingView({
|
|
|
57422
57833
|
{
|
|
57423
57834
|
className: "uf-text-sm uf-mt-2 uf-text-center uf-px-6",
|
|
57424
57835
|
style: { color: colors2.foregroundMuted },
|
|
57425
|
-
children: "
|
|
57836
|
+
children: "Waiting for your deposit to be detected..."
|
|
57426
57837
|
}
|
|
57427
57838
|
)
|
|
57428
57839
|
] }) }),
|
|
@@ -57446,6 +57857,7 @@ function BrowserWalletModal({
|
|
|
57446
57857
|
depositWallet,
|
|
57447
57858
|
userId,
|
|
57448
57859
|
publishableKey,
|
|
57860
|
+
clientSecret,
|
|
57449
57861
|
assetCdnUrl,
|
|
57450
57862
|
projectName,
|
|
57451
57863
|
theme = "dark",
|
|
@@ -57454,7 +57866,13 @@ function BrowserWalletModal({
|
|
|
57454
57866
|
onDepositSuccess,
|
|
57455
57867
|
onDepositError,
|
|
57456
57868
|
amountQuickSelect = "percentage",
|
|
57457
|
-
onWalletDisconnect
|
|
57869
|
+
onWalletDisconnect,
|
|
57870
|
+
prefillAmountUsd,
|
|
57871
|
+
checkoutAmountUsd,
|
|
57872
|
+
checkoutReceivedUsd,
|
|
57873
|
+
onNewDeposit,
|
|
57874
|
+
onDone,
|
|
57875
|
+
paymentIntentStatus
|
|
57458
57876
|
}) {
|
|
57459
57877
|
const { colors: colors2, fonts, components } = useTheme();
|
|
57460
57878
|
const [step, setStep] = React262.useState("select-token");
|
|
@@ -57472,6 +57890,7 @@ function BrowserWalletModal({
|
|
|
57472
57890
|
const [tokenChainDetails, setTokenChainDetails] = React262.useState(null);
|
|
57473
57891
|
const [loadingTokenDetails, setLoadingTokenDetails] = React262.useState(false);
|
|
57474
57892
|
const [showTransactionDetails, setShowTransactionDetails] = React262.useState(false);
|
|
57893
|
+
const [receivedUsdAtSubmission, setReceivedUsdAtSubmission] = React262.useState(null);
|
|
57475
57894
|
const themeClass = theme === "dark" ? "uf-dark" : "";
|
|
57476
57895
|
const chainType = depositWallet.chain_type;
|
|
57477
57896
|
const recipientAddress = depositWallet.address;
|
|
@@ -57479,15 +57898,19 @@ function BrowserWalletModal({
|
|
|
57479
57898
|
const { executions: depositExecutions, isPolling } = useDepositPolling({
|
|
57480
57899
|
userId,
|
|
57481
57900
|
publishableKey,
|
|
57901
|
+
clientSecret,
|
|
57482
57902
|
enabled: open && hasSignedTransaction,
|
|
57483
57903
|
onDepositSuccess,
|
|
57484
57904
|
onDepositError
|
|
57485
57905
|
});
|
|
57906
|
+
const prevOpenRef = React262.useRef(false);
|
|
57486
57907
|
React262.useEffect(() => {
|
|
57487
|
-
|
|
57908
|
+
const wasOpen = prevOpenRef.current;
|
|
57909
|
+
prevOpenRef.current = open;
|
|
57910
|
+
if (open && !wasOpen) {
|
|
57488
57911
|
setStep("select-token");
|
|
57489
57912
|
setSelectedBalance(null);
|
|
57490
|
-
setAmountUsd("");
|
|
57913
|
+
setAmountUsd(prefillAmountUsd ?? "");
|
|
57491
57914
|
setError(null);
|
|
57492
57915
|
setIsConfirming(false);
|
|
57493
57916
|
setTokenChainDetails(null);
|
|
@@ -57495,7 +57918,15 @@ function BrowserWalletModal({
|
|
|
57495
57918
|
setHasSignedTransaction(false);
|
|
57496
57919
|
setIsDisconnectingWallet(false);
|
|
57497
57920
|
}
|
|
57498
|
-
}, [open]);
|
|
57921
|
+
}, [open, prefillAmountUsd]);
|
|
57922
|
+
React262.useEffect(() => {
|
|
57923
|
+
if (!prefillAmountUsd || !tokenChainDetails || step !== "input-amount") return;
|
|
57924
|
+
const minDeposit = tokenChainDetails.minimum_deposit_amount_usd || 0;
|
|
57925
|
+
const currentAmount = parseFloat(amountUsd) || 0;
|
|
57926
|
+
if (currentAmount > 0 && currentAmount < minDeposit) {
|
|
57927
|
+
setAmountUsd(minDeposit.toFixed(2));
|
|
57928
|
+
}
|
|
57929
|
+
}, [tokenChainDetails, step, prefillAmountUsd]);
|
|
57499
57930
|
React262.useEffect(() => {
|
|
57500
57931
|
if (step === "review") {
|
|
57501
57932
|
setShowTransactionDetails(false);
|
|
@@ -57613,7 +58044,7 @@ function BrowserWalletModal({
|
|
|
57613
58044
|
setError(null);
|
|
57614
58045
|
if (step === "input-amount") {
|
|
57615
58046
|
setStep("select-token");
|
|
57616
|
-
setAmountUsd("");
|
|
58047
|
+
setAmountUsd(prefillAmountUsd ?? "");
|
|
57617
58048
|
setTokenChainDetails(null);
|
|
57618
58049
|
} else if (step === "review") {
|
|
57619
58050
|
setStep("input-amount");
|
|
@@ -57699,7 +58130,6 @@ function BrowserWalletModal({
|
|
|
57699
58130
|
}
|
|
57700
58131
|
}
|
|
57701
58132
|
setIsConfirming(true);
|
|
57702
|
-
setStep("confirming");
|
|
57703
58133
|
setError(null);
|
|
57704
58134
|
try {
|
|
57705
58135
|
let txHash;
|
|
@@ -57717,16 +58147,17 @@ function BrowserWalletModal({
|
|
|
57717
58147
|
} else {
|
|
57718
58148
|
txHash = await sendEthereumTransaction(token, tokenAmount.toString());
|
|
57719
58149
|
}
|
|
58150
|
+
setReceivedUsdAtSubmission(checkoutReceivedUsd ?? "0");
|
|
57720
58151
|
setHasSignedTransaction(true);
|
|
57721
|
-
onSuccess?.(txHash);
|
|
57722
58152
|
setIsConfirming(false);
|
|
58153
|
+
setStep("confirming");
|
|
58154
|
+
onSuccess?.(txHash);
|
|
57723
58155
|
} catch (err) {
|
|
57724
58156
|
console.error("[BrowserWalletModal] Transaction error:", err);
|
|
57725
58157
|
const errorMessage = err instanceof Error ? err.message : "Transaction failed";
|
|
57726
58158
|
setError(errorMessage);
|
|
57727
58159
|
onError?.(err instanceof Error ? err : new Error(errorMessage));
|
|
57728
58160
|
setIsConfirming(false);
|
|
57729
|
-
setStep("review");
|
|
57730
58161
|
}
|
|
57731
58162
|
};
|
|
57732
58163
|
const sendEthereumTransaction = async (token, amountStr) => {
|
|
@@ -57975,7 +58406,9 @@ function BrowserWalletModal({
|
|
|
57975
58406
|
onBack: handleClose,
|
|
57976
58407
|
onClose: handleFullClose,
|
|
57977
58408
|
onDisconnectWallet: onWalletDisconnect ? () => void handleDisconnectFromSelectToken() : void 0,
|
|
57978
|
-
isDisconnectingWallet
|
|
58409
|
+
isDisconnectingWallet,
|
|
58410
|
+
checkoutAmountUsd,
|
|
58411
|
+
checkoutReceivedUsd
|
|
57979
58412
|
}
|
|
57980
58413
|
),
|
|
57981
58414
|
step === "input-amount" && selectedToken && selectedBalance && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
|
|
@@ -57996,7 +58429,9 @@ function BrowserWalletModal({
|
|
|
57996
58429
|
onReview: handleReview,
|
|
57997
58430
|
onBack: handleBack,
|
|
57998
58431
|
onClose: handleFullClose,
|
|
57999
|
-
quickSelectMode: amountQuickSelect
|
|
58432
|
+
quickSelectMode: amountQuickSelect,
|
|
58433
|
+
checkoutAmountUsd,
|
|
58434
|
+
checkoutReceivedUsd
|
|
58000
58435
|
}
|
|
58001
58436
|
),
|
|
58002
58437
|
step === "review" && selectedToken && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
|
|
@@ -58025,7 +58460,12 @@ function BrowserWalletModal({
|
|
|
58025
58460
|
isConfirming,
|
|
58026
58461
|
onClose: handleFullClose,
|
|
58027
58462
|
executions: depositExecutions,
|
|
58028
|
-
isPolling
|
|
58463
|
+
isPolling,
|
|
58464
|
+
onNewDeposit,
|
|
58465
|
+
onDone,
|
|
58466
|
+
paymentIntentStatus,
|
|
58467
|
+
amountReceivedUsd: checkoutReceivedUsd,
|
|
58468
|
+
amountReceivedUsdAtSubmission: receivedUsdAtSubmission
|
|
58029
58469
|
}
|
|
58030
58470
|
)
|
|
58031
58471
|
] })
|
|
@@ -58034,7 +58474,7 @@ function BrowserWalletModal({
|
|
|
58034
58474
|
}
|
|
58035
58475
|
) });
|
|
58036
58476
|
}
|
|
58037
|
-
var
|
|
58477
|
+
var WALLET_ICONS3 = {
|
|
58038
58478
|
metamask: MetamaskIcon,
|
|
58039
58479
|
phantom: PhantomIcon,
|
|
58040
58480
|
coinbase: CoinbaseIcon,
|
|
@@ -58473,10 +58913,10 @@ function WalletSelectionModal({
|
|
|
58473
58913
|
},
|
|
58474
58914
|
children: [
|
|
58475
58915
|
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
|
|
58476
|
-
|
|
58916
|
+
WALLET_ICONS3[wallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
58477
58917
|
WalletIconWithNetwork,
|
|
58478
58918
|
{
|
|
58479
|
-
WalletIcon:
|
|
58919
|
+
WalletIcon: WALLET_ICONS3[wallet.id],
|
|
58480
58920
|
networks: wallet.networks,
|
|
58481
58921
|
size: 40,
|
|
58482
58922
|
className: "uf-rounded-lg"
|
|
@@ -58547,10 +58987,10 @@ function WalletSelectionModal({
|
|
|
58547
58987
|
style: { minHeight: WALLET_STEP_BODY_MIN_HEIGHT },
|
|
58548
58988
|
children: [
|
|
58549
58989
|
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-pb-4 uf-shrink-0", children: [
|
|
58550
|
-
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-mb-2", children:
|
|
58990
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-mb-2", children: WALLET_ICONS3[selectedWallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
58551
58991
|
WalletIconWithNetwork,
|
|
58552
58992
|
{
|
|
58553
|
-
WalletIcon:
|
|
58993
|
+
WalletIcon: WALLET_ICONS3[selectedWallet.id],
|
|
58554
58994
|
networks: selectedWallet.networks,
|
|
58555
58995
|
size: 48,
|
|
58556
58996
|
className: "uf-rounded-lg"
|
|
@@ -59349,136 +59789,794 @@ function DepositModal({
|
|
|
59349
59789
|
}
|
|
59350
59790
|
) });
|
|
59351
59791
|
}
|
|
59352
|
-
function
|
|
59792
|
+
function usePaymentIntent(params) {
|
|
59793
|
+
const {
|
|
59794
|
+
clientSecret,
|
|
59795
|
+
publishableKey,
|
|
59796
|
+
enabled = true,
|
|
59797
|
+
pollingInterval = 5e3
|
|
59798
|
+
} = params;
|
|
59353
59799
|
return useQuery({
|
|
59354
|
-
queryKey: ["unifold", "
|
|
59355
|
-
queryFn: () =>
|
|
59356
|
-
|
|
59357
|
-
|
|
59358
|
-
|
|
59359
|
-
refetchOnWindowFocus:
|
|
59360
|
-
|
|
59800
|
+
queryKey: ["unifold", "paymentIntent", clientSecret, publishableKey],
|
|
59801
|
+
queryFn: () => retrievePaymentIntent(clientSecret, publishableKey),
|
|
59802
|
+
enabled: enabled && !!clientSecret && !!publishableKey,
|
|
59803
|
+
staleTime: 0,
|
|
59804
|
+
refetchInterval: pollingInterval || false,
|
|
59805
|
+
refetchOnWindowFocus: true,
|
|
59806
|
+
retry: 3,
|
|
59807
|
+
retryDelay: (attempt) => Math.min(1e3 * 2 ** attempt, 1e4)
|
|
59361
59808
|
});
|
|
59362
59809
|
}
|
|
59363
|
-
function
|
|
59810
|
+
function useDepositQuote(params) {
|
|
59364
59811
|
const {
|
|
59812
|
+
publishableKey,
|
|
59365
59813
|
sourceChainType,
|
|
59366
59814
|
sourceChainId,
|
|
59367
59815
|
sourceTokenAddress,
|
|
59368
|
-
|
|
59369
|
-
|
|
59816
|
+
destinationAmount,
|
|
59817
|
+
destinationChainType,
|
|
59818
|
+
destinationChainId,
|
|
59819
|
+
destinationTokenAddress,
|
|
59370
59820
|
enabled = true
|
|
59371
59821
|
} = params;
|
|
59372
|
-
const
|
|
59822
|
+
const request = {
|
|
59823
|
+
source_chain_type: sourceChainType,
|
|
59824
|
+
source_chain_id: sourceChainId,
|
|
59825
|
+
source_token_address: sourceTokenAddress,
|
|
59826
|
+
destination_amount: destinationAmount,
|
|
59827
|
+
destination_chain_type: destinationChainType,
|
|
59828
|
+
destination_chain_id: destinationChainId,
|
|
59829
|
+
destination_token_address: destinationTokenAddress
|
|
59830
|
+
};
|
|
59373
59831
|
return useQuery({
|
|
59374
59832
|
queryKey: [
|
|
59375
59833
|
"unifold",
|
|
59376
|
-
"
|
|
59377
|
-
sourceChainType
|
|
59378
|
-
sourceChainId
|
|
59379
|
-
sourceTokenAddress
|
|
59834
|
+
"depositQuote",
|
|
59835
|
+
sourceChainType,
|
|
59836
|
+
sourceChainId,
|
|
59837
|
+
sourceTokenAddress,
|
|
59838
|
+
destinationAmount,
|
|
59839
|
+
destinationChainType,
|
|
59840
|
+
destinationChainId,
|
|
59841
|
+
destinationTokenAddress,
|
|
59380
59842
|
publishableKey
|
|
59381
59843
|
],
|
|
59382
|
-
queryFn:
|
|
59383
|
-
|
|
59384
|
-
|
|
59385
|
-
|
|
59386
|
-
|
|
59387
|
-
|
|
59388
|
-
|
|
59389
|
-
(token) => token.chains.some((chain) => {
|
|
59390
|
-
const match = chain.chain_type === sourceChainType && chain.chain_id === sourceChainId && chain.token_address.toLowerCase() === sourceTokenAddress.toLowerCase();
|
|
59391
|
-
if (match) {
|
|
59392
|
-
matchedMinUsd = chain.minimum_deposit_amount_usd;
|
|
59393
|
-
matchedProcessingTime = chain.estimated_processing_time;
|
|
59394
|
-
matchedSlippage = chain.max_slippage_percent;
|
|
59395
|
-
matchedPriceImpact = chain.estimated_price_impact_percent;
|
|
59396
|
-
}
|
|
59397
|
-
return match;
|
|
59398
|
-
})
|
|
59399
|
-
);
|
|
59400
|
-
return {
|
|
59401
|
-
isSupported: found,
|
|
59402
|
-
minimumAmountUsd: matchedMinUsd,
|
|
59403
|
-
estimatedProcessingTime: matchedProcessingTime,
|
|
59404
|
-
maxSlippagePercent: matchedSlippage,
|
|
59405
|
-
priceImpactPercent: matchedPriceImpact,
|
|
59406
|
-
errorMessage: found ? null : `${sourceTokenSymbol || "Source token"} is not a supported withdrawal token. Supported tokens include USDC, USDT, and other stablecoins.`
|
|
59407
|
-
};
|
|
59408
|
-
},
|
|
59409
|
-
enabled: enabled && hasParams,
|
|
59410
|
-
staleTime: 1e3 * 60 * 5,
|
|
59411
|
-
gcTime: 1e3 * 60 * 30,
|
|
59412
|
-
refetchOnMount: false,
|
|
59413
|
-
refetchOnWindowFocus: false
|
|
59844
|
+
queryFn: () => getDepositQuote(request, publishableKey),
|
|
59845
|
+
enabled: enabled && !!publishableKey && !!sourceChainType && !!sourceChainId && !!sourceTokenAddress && !!destinationAmount && destinationAmount !== "0" && !!destinationChainType && !!destinationChainId && !!destinationTokenAddress,
|
|
59846
|
+
staleTime: 6e4,
|
|
59847
|
+
gcTime: 5 * 6e4,
|
|
59848
|
+
refetchOnWindowFocus: false,
|
|
59849
|
+
retry: 2,
|
|
59850
|
+
retryDelay: (attempt) => Math.min(1e3 * 2 ** attempt, 5e3)
|
|
59414
59851
|
});
|
|
59415
59852
|
}
|
|
59416
|
-
function
|
|
59853
|
+
function mapDepositAddressesToWallets(depositAddresses, pi) {
|
|
59854
|
+
return depositAddresses.map((da, idx) => ({
|
|
59855
|
+
id: da.id,
|
|
59856
|
+
chain_type: da.chain_type,
|
|
59857
|
+
address_type: da.address_type,
|
|
59858
|
+
address: da.address,
|
|
59859
|
+
destination_chain_type: pi.destination_chain_type,
|
|
59860
|
+
destination_chain_id: pi.destination_chain_id,
|
|
59861
|
+
destination_token_address: pi.destination_token_address,
|
|
59862
|
+
recipient_address: pi.recipient_address,
|
|
59863
|
+
is_primary: idx === 0
|
|
59864
|
+
}));
|
|
59865
|
+
}
|
|
59866
|
+
function SkeletonButton2() {
|
|
59867
|
+
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: [
|
|
59868
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
|
|
59869
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "uf-bg-muted uf-rounded-lg uf-w-9 uf-h-9" }),
|
|
59870
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-space-y-1.5", children: [
|
|
59871
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "uf-h-3.5 uf-w-24 uf-bg-muted uf-rounded" }),
|
|
59872
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "uf-h-3 uf-w-32 uf-bg-muted uf-rounded" })
|
|
59873
|
+
] })
|
|
59874
|
+
] }),
|
|
59875
|
+
/* @__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" }) })
|
|
59876
|
+
] });
|
|
59877
|
+
}
|
|
59878
|
+
function CheckoutModal({
|
|
59879
|
+
open,
|
|
59880
|
+
onOpenChange,
|
|
59881
|
+
clientSecret,
|
|
59882
|
+
publishableKey,
|
|
59883
|
+
modalTitle,
|
|
59884
|
+
enableConnectWallet = false,
|
|
59885
|
+
theme = "dark",
|
|
59886
|
+
onCheckoutSuccess,
|
|
59887
|
+
onCheckoutError
|
|
59888
|
+
}) {
|
|
59889
|
+
const { colors: colors2, fonts, components } = useTheme();
|
|
59890
|
+
const [view, setView] = (0, import_react27.useState)("main");
|
|
59891
|
+
const resetViewTimeoutRef = (0, import_react27.useRef)(
|
|
59892
|
+
null
|
|
59893
|
+
);
|
|
59894
|
+
const [browserWalletModalOpen, setBrowserWalletModalOpen] = (0, import_react27.useState)(false);
|
|
59895
|
+
const [browserWalletInfo, setBrowserWalletInfo] = (0, import_react27.useState)(null);
|
|
59896
|
+
const [walletSelectionModalOpen, setWalletSelectionModalOpen] = (0, import_react27.useState)(false);
|
|
59897
|
+
const [browserWalletChainType, setBrowserWalletChainType] = (0, import_react27.useState)(() => getStoredWalletChainType());
|
|
59898
|
+
const isMobileView = useIsMobileViewport();
|
|
59899
|
+
const [resolvedTheme, setResolvedTheme] = (0, import_react27.useState)(
|
|
59900
|
+
theme === "auto" ? "dark" : theme
|
|
59901
|
+
);
|
|
59902
|
+
(0, import_react27.useEffect)(() => {
|
|
59903
|
+
if (theme === "auto") {
|
|
59904
|
+
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
59905
|
+
setResolvedTheme(mediaQuery.matches ? "dark" : "light");
|
|
59906
|
+
const handler = (e) => {
|
|
59907
|
+
setResolvedTheme(e.matches ? "dark" : "light");
|
|
59908
|
+
};
|
|
59909
|
+
mediaQuery.addEventListener("change", handler);
|
|
59910
|
+
return () => mediaQuery.removeEventListener("change", handler);
|
|
59911
|
+
} else {
|
|
59912
|
+
setResolvedTheme(theme);
|
|
59913
|
+
}
|
|
59914
|
+
}, [theme]);
|
|
59915
|
+
const themeClass = resolvedTheme === "dark" ? "uf-dark" : "";
|
|
59417
59916
|
const {
|
|
59418
|
-
|
|
59419
|
-
|
|
59420
|
-
|
|
59421
|
-
|
|
59917
|
+
data: paymentIntent,
|
|
59918
|
+
isLoading: piLoading,
|
|
59919
|
+
error: piError
|
|
59920
|
+
} = usePaymentIntent({
|
|
59921
|
+
clientSecret,
|
|
59422
59922
|
publishableKey,
|
|
59423
|
-
enabled
|
|
59424
|
-
|
|
59425
|
-
|
|
59426
|
-
|
|
59427
|
-
|
|
59428
|
-
|
|
59429
|
-
|
|
59430
|
-
|
|
59431
|
-
|
|
59432
|
-
|
|
59433
|
-
|
|
59434
|
-
|
|
59435
|
-
|
|
59436
|
-
|
|
59437
|
-
|
|
59438
|
-
|
|
59439
|
-
|
|
59440
|
-
|
|
59441
|
-
|
|
59442
|
-
|
|
59923
|
+
enabled: open && !!clientSecret,
|
|
59924
|
+
pollingInterval: 5e3
|
|
59925
|
+
});
|
|
59926
|
+
const { projectConfig } = useProjectConfig({
|
|
59927
|
+
publishableKey,
|
|
59928
|
+
enabled: open
|
|
59929
|
+
});
|
|
59930
|
+
const prevStatusRef = (0, import_react27.useRef)(null);
|
|
59931
|
+
(0, import_react27.useEffect)(() => {
|
|
59932
|
+
if (!paymentIntent) return;
|
|
59933
|
+
const prev = prevStatusRef.current;
|
|
59934
|
+
prevStatusRef.current = paymentIntent.status;
|
|
59935
|
+
if (prev && prev !== paymentIntent.status && paymentIntent.status === "succeeded") {
|
|
59936
|
+
if (!browserWalletModalOpen) {
|
|
59937
|
+
setView("main");
|
|
59938
|
+
}
|
|
59939
|
+
onCheckoutSuccess?.({
|
|
59940
|
+
paymentIntentId: paymentIntent.id,
|
|
59941
|
+
status: paymentIntent.status
|
|
59942
|
+
});
|
|
59943
|
+
}
|
|
59944
|
+
}, [paymentIntent, onCheckoutSuccess, browserWalletModalOpen]);
|
|
59945
|
+
const wallets = (0, import_react27.useMemo)(() => {
|
|
59946
|
+
if (!paymentIntent) return [];
|
|
59947
|
+
return mapDepositAddressesToWallets(
|
|
59948
|
+
paymentIntent.deposit_addresses,
|
|
59949
|
+
paymentIntent
|
|
59950
|
+
);
|
|
59951
|
+
}, [paymentIntent]);
|
|
59952
|
+
const formatCryptoAmount = (0, import_react27.useMemo)(() => {
|
|
59953
|
+
if (!paymentIntent) return (_) => "";
|
|
59954
|
+
const decimals = paymentIntent.destination_token_decimals ?? 6;
|
|
59955
|
+
const symbol = paymentIntent.currency.toUpperCase();
|
|
59956
|
+
return (baseUnits) => {
|
|
59957
|
+
const num = Number(baseUnits) / 10 ** decimals;
|
|
59958
|
+
const formatted = num % 1 === 0 ? num.toFixed(0) : num.toFixed(2);
|
|
59959
|
+
return `${formatted} ${symbol}`;
|
|
59960
|
+
};
|
|
59961
|
+
}, [paymentIntent]);
|
|
59962
|
+
const remainingAmountUsd = (0, import_react27.useMemo)(() => {
|
|
59963
|
+
if (!paymentIntent) return void 0;
|
|
59964
|
+
const total = parseFloat(paymentIntent.amount_usd);
|
|
59965
|
+
const received = parseFloat(paymentIntent.amount_received_usd);
|
|
59966
|
+
if (isNaN(total) || isNaN(received)) return paymentIntent.amount_usd;
|
|
59967
|
+
const remaining = total - received;
|
|
59968
|
+
return remaining > 0 ? remaining.toFixed(2) : "0.00";
|
|
59969
|
+
}, [paymentIntent]);
|
|
59970
|
+
const remainingCrypto = (0, import_react27.useMemo)(() => {
|
|
59971
|
+
if (!paymentIntent) return void 0;
|
|
59972
|
+
const total = BigInt(paymentIntent.amount);
|
|
59973
|
+
const received = BigInt(paymentIntent.amount_received);
|
|
59974
|
+
const remaining = total - received;
|
|
59975
|
+
return remaining > 0n ? remaining.toString() : "0";
|
|
59976
|
+
}, [paymentIntent]);
|
|
59977
|
+
const [selectedSource, setSelectedSource] = (0, import_react27.useState)(null);
|
|
59978
|
+
const quoteDestinationAmount = (0, import_react27.useMemo)(() => {
|
|
59979
|
+
if (!paymentIntent || !selectedSource) return "0";
|
|
59980
|
+
const remaining = BigInt(paymentIntent.amount) - BigInt(paymentIntent.amount_received);
|
|
59981
|
+
const totalBaseUnits = Number(paymentIntent.amount);
|
|
59982
|
+
const totalUsd = parseFloat(paymentIntent.amount_usd);
|
|
59983
|
+
const baseUnitsPerUsd = totalUsd > 0 ? totalBaseUnits / totalUsd : 0;
|
|
59984
|
+
const minUsd = Math.max(selectedSource.minimumDepositAmountUsd, 3);
|
|
59985
|
+
const minDepositBaseUnits = BigInt(Math.ceil(minUsd * baseUnitsPerUsd));
|
|
59986
|
+
const effective = remaining > minDepositBaseUnits ? remaining : minDepositBaseUnits;
|
|
59987
|
+
return effective > 0n ? effective.toString() : "0";
|
|
59988
|
+
}, [paymentIntent, selectedSource]);
|
|
59989
|
+
const { data: sourceQuote } = useDepositQuote({
|
|
59990
|
+
publishableKey,
|
|
59991
|
+
sourceChainType: selectedSource?.chainType ?? "",
|
|
59992
|
+
sourceChainId: selectedSource?.chainId ?? "",
|
|
59993
|
+
sourceTokenAddress: selectedSource?.tokenAddress ?? "",
|
|
59994
|
+
destinationAmount: quoteDestinationAmount,
|
|
59995
|
+
destinationChainType: paymentIntent?.destination_chain_type ?? "",
|
|
59996
|
+
destinationChainId: paymentIntent?.destination_chain_id ?? "",
|
|
59997
|
+
destinationTokenAddress: paymentIntent?.destination_token_address ?? "",
|
|
59998
|
+
enabled: open && view === "transfer" && !!paymentIntent && !!selectedSource && quoteDestinationAmount !== "0"
|
|
59999
|
+
});
|
|
60000
|
+
const handleBrowserWalletClick = (0, import_react27.useCallback)(
|
|
60001
|
+
(walletInfo) => {
|
|
60002
|
+
const walletChainType = walletInfo.type === "phantom-solana" || walletInfo.type === "solflare" || walletInfo.type === "backpack" || walletInfo.type === "glow" ? "solana" : "ethereum";
|
|
60003
|
+
setStoredWalletChainType(walletChainType);
|
|
60004
|
+
setBrowserWalletChainType(walletChainType);
|
|
60005
|
+
const matchingDepositWallet = wallets.find(
|
|
60006
|
+
(w) => w.chain_type === walletChainType
|
|
59443
60007
|
);
|
|
59444
|
-
if (
|
|
59445
|
-
|
|
59446
|
-
|
|
59447
|
-
|
|
59448
|
-
|
|
59449
|
-
|
|
59450
|
-
const whole = raw / divisor;
|
|
59451
|
-
const frac = raw % divisor;
|
|
59452
|
-
const fracStr = frac.toString().padStart(decimals, "0").replace(/0+$/, "");
|
|
59453
|
-
const balanceHuman = fracStr ? `${whole}.${fracStr}` : whole.toString();
|
|
59454
|
-
return {
|
|
59455
|
-
balanceBaseUnit: baseUnit,
|
|
59456
|
-
balanceHuman,
|
|
59457
|
-
balanceUsd: res.balance.amount_usd,
|
|
59458
|
-
exchangeRate: res.balance.exchange_rate,
|
|
59459
|
-
decimals,
|
|
59460
|
-
symbol
|
|
59461
|
-
};
|
|
60008
|
+
if (!matchingDepositWallet) {
|
|
60009
|
+
onCheckoutError?.({
|
|
60010
|
+
message: `Unable to pay from ${walletChainType}. Please try a different wallet.`,
|
|
60011
|
+
code: "NO_DEPOSIT_ADDRESS"
|
|
60012
|
+
});
|
|
60013
|
+
return;
|
|
59462
60014
|
}
|
|
59463
|
-
|
|
60015
|
+
setBrowserWalletInfo({
|
|
60016
|
+
...walletInfo,
|
|
60017
|
+
depositWallet: matchingDepositWallet
|
|
60018
|
+
});
|
|
60019
|
+
setBrowserWalletModalOpen(true);
|
|
59464
60020
|
},
|
|
59465
|
-
|
|
59466
|
-
|
|
59467
|
-
|
|
59468
|
-
|
|
59469
|
-
|
|
59470
|
-
|
|
59471
|
-
|
|
59472
|
-
|
|
59473
|
-
|
|
59474
|
-
|
|
59475
|
-
|
|
59476
|
-
|
|
59477
|
-
|
|
59478
|
-
|
|
59479
|
-
|
|
59480
|
-
|
|
59481
|
-
|
|
60021
|
+
[wallets, onCheckoutError]
|
|
60022
|
+
);
|
|
60023
|
+
const handleWalletConnectClick = (0, import_react27.useCallback)(() => {
|
|
60024
|
+
setWalletSelectionModalOpen(true);
|
|
60025
|
+
}, []);
|
|
60026
|
+
const handleWalletConnected = (0, import_react27.useCallback)(
|
|
60027
|
+
(walletInfo) => {
|
|
60028
|
+
const walletChainType = walletInfo.type === "phantom-solana" || walletInfo.type === "solflare" || walletInfo.type === "backpack" || walletInfo.type === "glow" ? "solana" : "ethereum";
|
|
60029
|
+
setStoredWalletChainType(walletChainType);
|
|
60030
|
+
setBrowserWalletChainType(walletChainType);
|
|
60031
|
+
const matchingDepositWallet = wallets.find(
|
|
60032
|
+
(w) => w.chain_type === walletChainType
|
|
60033
|
+
);
|
|
60034
|
+
if (!matchingDepositWallet) {
|
|
60035
|
+
onCheckoutError?.({
|
|
60036
|
+
message: `Unable to pay from ${walletChainType}. Please try a different wallet.`,
|
|
60037
|
+
code: "NO_DEPOSIT_ADDRESS"
|
|
60038
|
+
});
|
|
60039
|
+
setWalletSelectionModalOpen(false);
|
|
60040
|
+
return;
|
|
60041
|
+
}
|
|
60042
|
+
setBrowserWalletInfo({
|
|
60043
|
+
...walletInfo,
|
|
60044
|
+
depositWallet: matchingDepositWallet
|
|
60045
|
+
});
|
|
60046
|
+
setWalletSelectionModalOpen(false);
|
|
60047
|
+
setBrowserWalletModalOpen(true);
|
|
60048
|
+
},
|
|
60049
|
+
[wallets, onCheckoutError]
|
|
60050
|
+
);
|
|
60051
|
+
const handleWalletDisconnect = (0, import_react27.useCallback)(() => {
|
|
60052
|
+
setUserDisconnectedWallet(true);
|
|
60053
|
+
clearStoredWalletChainType();
|
|
60054
|
+
setBrowserWalletChainType(void 0);
|
|
60055
|
+
setBrowserWalletInfo(null);
|
|
60056
|
+
setBrowserWalletModalOpen(false);
|
|
60057
|
+
}, []);
|
|
60058
|
+
const handleClose = (0, import_react27.useCallback)(() => {
|
|
60059
|
+
onOpenChange(false);
|
|
60060
|
+
if (resetViewTimeoutRef.current) {
|
|
60061
|
+
clearTimeout(resetViewTimeoutRef.current);
|
|
60062
|
+
}
|
|
60063
|
+
resetViewTimeoutRef.current = setTimeout(() => {
|
|
60064
|
+
setView("main");
|
|
60065
|
+
setBrowserWalletInfo(null);
|
|
60066
|
+
resetViewTimeoutRef.current = null;
|
|
60067
|
+
}, 200);
|
|
60068
|
+
}, [onOpenChange]);
|
|
60069
|
+
(0, import_react27.useLayoutEffect)(() => {
|
|
60070
|
+
if (!open) return;
|
|
60071
|
+
if (resetViewTimeoutRef.current) {
|
|
60072
|
+
clearTimeout(resetViewTimeoutRef.current);
|
|
60073
|
+
resetViewTimeoutRef.current = null;
|
|
60074
|
+
}
|
|
60075
|
+
setView("main");
|
|
60076
|
+
setBrowserWalletInfo(null);
|
|
60077
|
+
}, [open]);
|
|
60078
|
+
(0, import_react27.useEffect)(
|
|
60079
|
+
() => () => {
|
|
60080
|
+
if (resetViewTimeoutRef.current) {
|
|
60081
|
+
clearTimeout(resetViewTimeoutRef.current);
|
|
60082
|
+
}
|
|
60083
|
+
},
|
|
60084
|
+
[]
|
|
60085
|
+
);
|
|
60086
|
+
const handleBack = (0, import_react27.useCallback)(() => {
|
|
60087
|
+
setView("main");
|
|
60088
|
+
}, []);
|
|
60089
|
+
const poweredByFooter = /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60090
|
+
PoweredByUnifold,
|
|
60091
|
+
{
|
|
60092
|
+
color: colors2.foregroundMuted,
|
|
60093
|
+
className: "uf-flex uf-justify-center uf-shrink-0"
|
|
60094
|
+
}
|
|
60095
|
+
) });
|
|
60096
|
+
const progressSection = paymentIntent ? (() => {
|
|
60097
|
+
const received = parseFloat(paymentIntent.amount_received_usd);
|
|
60098
|
+
const total = parseFloat(paymentIntent.amount_usd);
|
|
60099
|
+
const remaining = Math.max(total - received, 0);
|
|
60100
|
+
const pct = total > 0 ? Math.min(received / total * 100, 100) : 0;
|
|
60101
|
+
const hasPartial = received > 0;
|
|
60102
|
+
const amountStr = paymentIntent.amount_usd;
|
|
60103
|
+
const dynamicFontSize = `${Math.max(3.75 - amountStr.length * 0.15, 2)}rem`;
|
|
60104
|
+
return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-text-center uf-py-2 uf-space-y-1", children: [
|
|
60105
|
+
paymentIntent.description && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60106
|
+
"div",
|
|
60107
|
+
{
|
|
60108
|
+
className: "uf-text-xs",
|
|
60109
|
+
style: {
|
|
60110
|
+
color: colors2.foregroundMuted,
|
|
60111
|
+
fontFamily: fonts.regular
|
|
60112
|
+
},
|
|
60113
|
+
children: paymentIntent.description
|
|
60114
|
+
}
|
|
60115
|
+
),
|
|
60116
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-center", children: [
|
|
60117
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60118
|
+
"span",
|
|
60119
|
+
{
|
|
60120
|
+
className: "uf-mr-1",
|
|
60121
|
+
style: {
|
|
60122
|
+
fontSize: `calc(${dynamicFontSize} * 0.6)`,
|
|
60123
|
+
color: colors2.foregroundMuted,
|
|
60124
|
+
fontFamily: fonts.regular
|
|
60125
|
+
},
|
|
60126
|
+
children: "$"
|
|
60127
|
+
}
|
|
60128
|
+
),
|
|
60129
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60130
|
+
"span",
|
|
60131
|
+
{
|
|
60132
|
+
style: {
|
|
60133
|
+
fontSize: dynamicFontSize,
|
|
60134
|
+
color: colors2.foreground,
|
|
60135
|
+
fontFamily: fonts.regular,
|
|
60136
|
+
lineHeight: 1.1
|
|
60137
|
+
},
|
|
60138
|
+
children: amountStr
|
|
60139
|
+
}
|
|
60140
|
+
)
|
|
60141
|
+
] }),
|
|
60142
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60143
|
+
"div",
|
|
60144
|
+
{
|
|
60145
|
+
className: "uf-text-xs",
|
|
60146
|
+
style: {
|
|
60147
|
+
color: colors2.foregroundMuted,
|
|
60148
|
+
fontFamily: fonts.regular
|
|
60149
|
+
},
|
|
60150
|
+
children: paymentIntent.currency.toUpperCase()
|
|
60151
|
+
}
|
|
60152
|
+
),
|
|
60153
|
+
hasPartial && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-pt-2 uf-space-y-1.5", children: [
|
|
60154
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60155
|
+
"div",
|
|
60156
|
+
{
|
|
60157
|
+
className: "uf-w-full uf-h-1.5 uf-rounded-full uf-overflow-hidden",
|
|
60158
|
+
style: { backgroundColor: colors2.border },
|
|
60159
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60160
|
+
"div",
|
|
60161
|
+
{
|
|
60162
|
+
className: "uf-h-full uf-rounded-full uf-transition-all uf-duration-500",
|
|
60163
|
+
style: {
|
|
60164
|
+
width: `${pct}%`,
|
|
60165
|
+
backgroundColor: paymentIntent.status === "succeeded" ? "rgb(34, 197, 94)" : colors2.primary
|
|
60166
|
+
}
|
|
60167
|
+
}
|
|
60168
|
+
)
|
|
60169
|
+
}
|
|
60170
|
+
),
|
|
60171
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
|
|
60172
|
+
"div",
|
|
60173
|
+
{
|
|
60174
|
+
className: "uf-text-xs",
|
|
60175
|
+
style: {
|
|
60176
|
+
color: colors2.foregroundMuted,
|
|
60177
|
+
fontFamily: fonts.regular
|
|
60178
|
+
},
|
|
60179
|
+
children: [
|
|
60180
|
+
"$",
|
|
60181
|
+
paymentIntent.amount_received_usd,
|
|
60182
|
+
" / $",
|
|
60183
|
+
amountStr,
|
|
60184
|
+
" received",
|
|
60185
|
+
remaining > 0 && paymentIntent.status !== "succeeded" && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { style: { color: colors2.foreground, fontFamily: fonts.medium }, children: [
|
|
60186
|
+
" ",
|
|
60187
|
+
"\xB7 $",
|
|
60188
|
+
remaining.toFixed(2),
|
|
60189
|
+
" remaining"
|
|
60190
|
+
] })
|
|
60191
|
+
]
|
|
60192
|
+
}
|
|
60193
|
+
)
|
|
60194
|
+
] }),
|
|
60195
|
+
paymentIntent.status !== "requires_payment" && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "uf-pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60196
|
+
"span",
|
|
60197
|
+
{
|
|
60198
|
+
className: "uf-text-xs uf-font-medium uf-px-2.5 uf-py-1 uf-rounded-full uf-inline-block",
|
|
60199
|
+
style: {
|
|
60200
|
+
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)",
|
|
60201
|
+
color: paymentIntent.status === "succeeded" ? "rgb(34, 197, 94)" : paymentIntent.status === "processing" ? "rgb(59, 130, 246)" : "rgb(239, 68, 68)",
|
|
60202
|
+
fontFamily: fonts.medium
|
|
60203
|
+
},
|
|
60204
|
+
children: paymentIntent.status === "succeeded" ? "Payment Complete" : paymentIntent.status === "processing" ? "Partial Payment Received" : paymentIntent.status === "canceled" ? "Canceled" : paymentIntent.status === "expired" ? "Expired" : paymentIntent.status
|
|
60205
|
+
}
|
|
60206
|
+
) })
|
|
60207
|
+
] });
|
|
60208
|
+
})() : null;
|
|
60209
|
+
return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(PortalContainerProvider, { value: null, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(Dialog2, { open, onOpenChange: handleClose, modal: true, children: [
|
|
60210
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60211
|
+
DialogContent2,
|
|
60212
|
+
{
|
|
60213
|
+
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}`,
|
|
60214
|
+
style: { backgroundColor: colors2.background },
|
|
60215
|
+
onPointerDownOutside: (e) => e.preventDefault(),
|
|
60216
|
+
onInteractOutside: (e) => e.preventDefault(),
|
|
60217
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ThemeStyleInjector, { children: view === "main" ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
|
|
60218
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60219
|
+
DepositHeader,
|
|
60220
|
+
{
|
|
60221
|
+
title: modalTitle || "Checkout",
|
|
60222
|
+
showClose: true,
|
|
60223
|
+
onClose: handleClose
|
|
60224
|
+
}
|
|
60225
|
+
),
|
|
60226
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
|
|
60227
|
+
piLoading ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-space-y-3", children: [
|
|
60228
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60229
|
+
"div",
|
|
60230
|
+
{
|
|
60231
|
+
className: "uf-rounded-xl uf-p-4 uf-animate-pulse",
|
|
60232
|
+
style: {
|
|
60233
|
+
backgroundColor: components.card.backgroundColor,
|
|
60234
|
+
borderRadius: components.card.borderRadius,
|
|
60235
|
+
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
60236
|
+
},
|
|
60237
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-gap-2", children: [
|
|
60238
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60239
|
+
"div",
|
|
60240
|
+
{
|
|
60241
|
+
className: "uf-h-8 uf-w-24 uf-rounded",
|
|
60242
|
+
style: {
|
|
60243
|
+
backgroundColor: components.card.borderColor
|
|
60244
|
+
}
|
|
60245
|
+
}
|
|
60246
|
+
),
|
|
60247
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60248
|
+
"div",
|
|
60249
|
+
{
|
|
60250
|
+
className: "uf-h-4 uf-w-16 uf-rounded",
|
|
60251
|
+
style: {
|
|
60252
|
+
backgroundColor: components.card.borderColor
|
|
60253
|
+
}
|
|
60254
|
+
}
|
|
60255
|
+
)
|
|
60256
|
+
] })
|
|
60257
|
+
}
|
|
60258
|
+
),
|
|
60259
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(SkeletonButton2, {}),
|
|
60260
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(SkeletonButton2, {})
|
|
60261
|
+
] }) : 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: [
|
|
60262
|
+
/* @__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" }) }),
|
|
60263
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60264
|
+
"h3",
|
|
60265
|
+
{
|
|
60266
|
+
className: "uf-text-lg uf-font-semibold uf-mb-2",
|
|
60267
|
+
style: {
|
|
60268
|
+
color: colors2.foreground,
|
|
60269
|
+
fontFamily: fonts.semibold
|
|
60270
|
+
},
|
|
60271
|
+
children: "Unable to Load Checkout"
|
|
60272
|
+
}
|
|
60273
|
+
),
|
|
60274
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60275
|
+
"p",
|
|
60276
|
+
{
|
|
60277
|
+
className: "uf-text-sm uf-max-w-[280px]",
|
|
60278
|
+
style: {
|
|
60279
|
+
color: colors2.foregroundMuted,
|
|
60280
|
+
fontFamily: fonts.regular
|
|
60281
|
+
},
|
|
60282
|
+
children: piError instanceof Error ? piError.message : "Something went wrong. Please try again."
|
|
60283
|
+
}
|
|
60284
|
+
)
|
|
60285
|
+
] }) : paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-space-y-3", children: [
|
|
60286
|
+
progressSection,
|
|
60287
|
+
(paymentIntent.status === "requires_payment" || paymentIntent.status === "processing") && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
|
|
60288
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60289
|
+
TransferCryptoButton,
|
|
60290
|
+
{
|
|
60291
|
+
onClick: () => setView("transfer"),
|
|
60292
|
+
title: "Transfer Crypto",
|
|
60293
|
+
subtitle: "Send from any wallet or exchange",
|
|
60294
|
+
featuredTokens: projectConfig?.transfer_crypto.networks
|
|
60295
|
+
}
|
|
60296
|
+
),
|
|
60297
|
+
enableConnectWallet && !isMobileView && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60298
|
+
BrowserWalletButton,
|
|
60299
|
+
{
|
|
60300
|
+
onClick: handleBrowserWalletClick,
|
|
60301
|
+
onConnectClick: handleWalletConnectClick,
|
|
60302
|
+
onDisconnect: handleWalletDisconnect,
|
|
60303
|
+
chainType: browserWalletChainType,
|
|
60304
|
+
publishableKey
|
|
60305
|
+
}
|
|
60306
|
+
)
|
|
60307
|
+
] })
|
|
60308
|
+
] }) : null,
|
|
60309
|
+
poweredByFooter
|
|
60310
|
+
] })
|
|
60311
|
+
] }) : view === "transfer" ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
|
|
60312
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60313
|
+
DepositHeader,
|
|
60314
|
+
{
|
|
60315
|
+
title: `Pay $${remainingAmountUsd ?? paymentIntent?.amount_usd ?? ""}`,
|
|
60316
|
+
showBack: true,
|
|
60317
|
+
onBack: handleBack,
|
|
60318
|
+
onClose: handleClose
|
|
60319
|
+
}
|
|
60320
|
+
),
|
|
60321
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
|
|
60322
|
+
paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
|
|
60323
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
|
|
60324
|
+
"div",
|
|
60325
|
+
{
|
|
60326
|
+
className: "uf-rounded-lg uf-px-3 uf-py-2 uf-flex uf-items-center uf-justify-between",
|
|
60327
|
+
style: {
|
|
60328
|
+
backgroundColor: components.card.backgroundColor,
|
|
60329
|
+
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`,
|
|
60330
|
+
borderRadius: components.card.borderRadius
|
|
60331
|
+
},
|
|
60332
|
+
children: [
|
|
60333
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60334
|
+
"span",
|
|
60335
|
+
{
|
|
60336
|
+
className: "uf-text-xs",
|
|
60337
|
+
style: {
|
|
60338
|
+
color: colors2.foregroundMuted,
|
|
60339
|
+
fontFamily: fonts.regular
|
|
60340
|
+
},
|
|
60341
|
+
children: parseFloat(paymentIntent.amount_received_usd) > 0 ? `$${paymentIntent.amount_received_usd} / $${paymentIntent.amount_usd} received` : "Amount due"
|
|
60342
|
+
}
|
|
60343
|
+
),
|
|
60344
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
|
|
60345
|
+
"span",
|
|
60346
|
+
{
|
|
60347
|
+
className: "uf-text-sm uf-font-semibold",
|
|
60348
|
+
style: {
|
|
60349
|
+
color: colors2.foreground,
|
|
60350
|
+
fontFamily: fonts.semibold
|
|
60351
|
+
},
|
|
60352
|
+
children: [
|
|
60353
|
+
formatCryptoAmount(remainingCrypto ?? paymentIntent.amount),
|
|
60354
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
|
|
60355
|
+
"span",
|
|
60356
|
+
{
|
|
60357
|
+
className: "uf-text-xs uf-font-normal uf-ml-1",
|
|
60358
|
+
style: { color: colors2.foregroundMuted },
|
|
60359
|
+
children: [
|
|
60360
|
+
"($",
|
|
60361
|
+
remainingAmountUsd ?? paymentIntent.amount_usd,
|
|
60362
|
+
")"
|
|
60363
|
+
]
|
|
60364
|
+
}
|
|
60365
|
+
)
|
|
60366
|
+
]
|
|
60367
|
+
}
|
|
60368
|
+
)
|
|
60369
|
+
]
|
|
60370
|
+
}
|
|
60371
|
+
),
|
|
60372
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60373
|
+
TransferCryptoSingleInput,
|
|
60374
|
+
{
|
|
60375
|
+
userId: paymentIntent.user_id || "",
|
|
60376
|
+
publishableKey,
|
|
60377
|
+
clientSecret,
|
|
60378
|
+
recipientAddress: paymentIntent.recipient_address,
|
|
60379
|
+
destinationChainType: paymentIntent.destination_chain_type,
|
|
60380
|
+
destinationChainId: paymentIntent.destination_chain_id,
|
|
60381
|
+
destinationTokenAddress: paymentIntent.destination_token_address,
|
|
60382
|
+
depositConfirmationMode: "auto_ui",
|
|
60383
|
+
wallets,
|
|
60384
|
+
onSourceTokenChange: setSelectedSource,
|
|
60385
|
+
checkoutQuote: sourceQuote ? {
|
|
60386
|
+
sourceAmount: sourceQuote.source_amount,
|
|
60387
|
+
sourceTokenDecimals: sourceQuote.source_token_decimals,
|
|
60388
|
+
sourceTokenSymbol: sourceQuote.source_token_symbol,
|
|
60389
|
+
sourceAmountUsd: sourceQuote.source_amount_usd
|
|
60390
|
+
} : null
|
|
60391
|
+
}
|
|
60392
|
+
)
|
|
60393
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(SkeletonButton2, {}),
|
|
60394
|
+
poweredByFooter
|
|
60395
|
+
] })
|
|
60396
|
+
] }) : null })
|
|
60397
|
+
}
|
|
60398
|
+
),
|
|
60399
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60400
|
+
WalletSelectionModal,
|
|
60401
|
+
{
|
|
60402
|
+
open: walletSelectionModalOpen,
|
|
60403
|
+
onOpenChange: setWalletSelectionModalOpen,
|
|
60404
|
+
onWalletConnected: handleWalletConnected,
|
|
60405
|
+
onClose: () => setWalletSelectionModalOpen(false),
|
|
60406
|
+
theme: resolvedTheme
|
|
60407
|
+
}
|
|
60408
|
+
),
|
|
60409
|
+
browserWalletInfo && browserWalletInfo.depositWallet && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60410
|
+
BrowserWalletModal,
|
|
60411
|
+
{
|
|
60412
|
+
open: browserWalletModalOpen,
|
|
60413
|
+
onOpenChange: setBrowserWalletModalOpen,
|
|
60414
|
+
onFullClose: handleClose,
|
|
60415
|
+
walletInfo: browserWalletInfo,
|
|
60416
|
+
depositWallet: browserWalletInfo.depositWallet,
|
|
60417
|
+
userId: paymentIntent?.user_id || "",
|
|
60418
|
+
publishableKey,
|
|
60419
|
+
clientSecret,
|
|
60420
|
+
theme: resolvedTheme,
|
|
60421
|
+
prefillAmountUsd: remainingAmountUsd,
|
|
60422
|
+
checkoutAmountUsd: paymentIntent?.amount_usd,
|
|
60423
|
+
checkoutReceivedUsd: paymentIntent?.amount_received_usd,
|
|
60424
|
+
onSuccess: (txHash) => {
|
|
60425
|
+
onCheckoutSuccess?.({
|
|
60426
|
+
paymentIntentId: paymentIntent?.id || "",
|
|
60427
|
+
status: "processing"
|
|
60428
|
+
});
|
|
60429
|
+
},
|
|
60430
|
+
onError: (error) => {
|
|
60431
|
+
onCheckoutError?.({
|
|
60432
|
+
message: error.message,
|
|
60433
|
+
error
|
|
60434
|
+
});
|
|
60435
|
+
},
|
|
60436
|
+
onWalletDisconnect: handleWalletDisconnect,
|
|
60437
|
+
onNewDeposit: () => {
|
|
60438
|
+
setBrowserWalletModalOpen(false);
|
|
60439
|
+
setView("main");
|
|
60440
|
+
},
|
|
60441
|
+
onDone: () => {
|
|
60442
|
+
setBrowserWalletModalOpen(false);
|
|
60443
|
+
setView("main");
|
|
60444
|
+
},
|
|
60445
|
+
paymentIntentStatus: paymentIntent?.status
|
|
60446
|
+
}
|
|
60447
|
+
)
|
|
60448
|
+
] }) });
|
|
60449
|
+
}
|
|
60450
|
+
function useSupportedDestinationTokens(publishableKey, enabled = true) {
|
|
60451
|
+
return useQuery({
|
|
60452
|
+
queryKey: ["unifold", "supportedDestinationTokens", publishableKey],
|
|
60453
|
+
queryFn: () => getSupportedDestinationTokens(publishableKey),
|
|
60454
|
+
staleTime: 1e3 * 60 * 5,
|
|
60455
|
+
gcTime: 1e3 * 60 * 30,
|
|
60456
|
+
refetchOnMount: false,
|
|
60457
|
+
refetchOnWindowFocus: false,
|
|
60458
|
+
enabled
|
|
60459
|
+
});
|
|
60460
|
+
}
|
|
60461
|
+
function useSourceTokenValidation(params) {
|
|
60462
|
+
const {
|
|
60463
|
+
sourceChainType,
|
|
60464
|
+
sourceChainId,
|
|
60465
|
+
sourceTokenAddress,
|
|
60466
|
+
sourceTokenSymbol,
|
|
60467
|
+
publishableKey,
|
|
60468
|
+
enabled = true
|
|
60469
|
+
} = params;
|
|
60470
|
+
const hasParams = !!sourceChainType && !!sourceChainId && !!sourceTokenAddress;
|
|
60471
|
+
return useQuery({
|
|
60472
|
+
queryKey: [
|
|
60473
|
+
"unifold",
|
|
60474
|
+
"sourceTokenValidation",
|
|
60475
|
+
sourceChainType ?? null,
|
|
60476
|
+
sourceChainId ?? null,
|
|
60477
|
+
sourceTokenAddress ?? null,
|
|
60478
|
+
publishableKey
|
|
60479
|
+
],
|
|
60480
|
+
queryFn: async () => {
|
|
60481
|
+
const res = await getSupportedDepositTokens(publishableKey);
|
|
60482
|
+
let matchedMinUsd = null;
|
|
60483
|
+
let matchedProcessingTime = null;
|
|
60484
|
+
let matchedSlippage = null;
|
|
60485
|
+
let matchedPriceImpact = null;
|
|
60486
|
+
const found = res.data.some(
|
|
60487
|
+
(token) => token.chains.some((chain) => {
|
|
60488
|
+
const match = chain.chain_type === sourceChainType && chain.chain_id === sourceChainId && chain.token_address.toLowerCase() === sourceTokenAddress.toLowerCase();
|
|
60489
|
+
if (match) {
|
|
60490
|
+
matchedMinUsd = chain.minimum_deposit_amount_usd;
|
|
60491
|
+
matchedProcessingTime = chain.estimated_processing_time;
|
|
60492
|
+
matchedSlippage = chain.max_slippage_percent;
|
|
60493
|
+
matchedPriceImpact = chain.estimated_price_impact_percent;
|
|
60494
|
+
}
|
|
60495
|
+
return match;
|
|
60496
|
+
})
|
|
60497
|
+
);
|
|
60498
|
+
return {
|
|
60499
|
+
isSupported: found,
|
|
60500
|
+
minimumAmountUsd: matchedMinUsd,
|
|
60501
|
+
estimatedProcessingTime: matchedProcessingTime,
|
|
60502
|
+
maxSlippagePercent: matchedSlippage,
|
|
60503
|
+
priceImpactPercent: matchedPriceImpact,
|
|
60504
|
+
errorMessage: found ? null : `${sourceTokenSymbol || "Source token"} is not a supported withdrawal token. Supported tokens include USDC, USDT, and other stablecoins.`
|
|
60505
|
+
};
|
|
60506
|
+
},
|
|
60507
|
+
enabled: enabled && hasParams,
|
|
60508
|
+
staleTime: 1e3 * 60 * 5,
|
|
60509
|
+
gcTime: 1e3 * 60 * 30,
|
|
60510
|
+
refetchOnMount: false,
|
|
60511
|
+
refetchOnWindowFocus: false
|
|
60512
|
+
});
|
|
60513
|
+
}
|
|
60514
|
+
function useAddressBalance(params) {
|
|
60515
|
+
const {
|
|
60516
|
+
address,
|
|
60517
|
+
chainType,
|
|
60518
|
+
chainId,
|
|
60519
|
+
tokenAddress,
|
|
60520
|
+
publishableKey,
|
|
60521
|
+
enabled = true
|
|
60522
|
+
} = params;
|
|
60523
|
+
const hasParams = !!address && !!chainType && !!chainId && !!tokenAddress;
|
|
60524
|
+
return useQuery({
|
|
60525
|
+
queryKey: [
|
|
60526
|
+
"unifold",
|
|
60527
|
+
"addressBalance",
|
|
60528
|
+
address ?? null,
|
|
60529
|
+
chainType ?? null,
|
|
60530
|
+
chainId ?? null,
|
|
60531
|
+
tokenAddress ?? null,
|
|
60532
|
+
publishableKey
|
|
60533
|
+
],
|
|
60534
|
+
queryFn: async () => {
|
|
60535
|
+
const res = await getAddressBalance(
|
|
60536
|
+
address,
|
|
60537
|
+
chainType,
|
|
60538
|
+
chainId,
|
|
60539
|
+
tokenAddress,
|
|
60540
|
+
publishableKey
|
|
60541
|
+
);
|
|
60542
|
+
if (res.balance) {
|
|
60543
|
+
const decimals = res.balance.token?.decimals ?? 6;
|
|
60544
|
+
const symbol = res.balance.token?.symbol ?? "";
|
|
60545
|
+
const baseUnit = res.balance.amount;
|
|
60546
|
+
const raw = BigInt(baseUnit);
|
|
60547
|
+
const divisor = BigInt(10 ** decimals);
|
|
60548
|
+
const whole = raw / divisor;
|
|
60549
|
+
const frac = raw % divisor;
|
|
60550
|
+
const fracStr = frac.toString().padStart(decimals, "0").replace(/0+$/, "");
|
|
60551
|
+
const balanceHuman = fracStr ? `${whole}.${fracStr}` : whole.toString();
|
|
60552
|
+
return {
|
|
60553
|
+
balanceBaseUnit: baseUnit,
|
|
60554
|
+
balanceHuman,
|
|
60555
|
+
balanceUsd: res.balance.amount_usd,
|
|
60556
|
+
exchangeRate: res.balance.exchange_rate,
|
|
60557
|
+
decimals,
|
|
60558
|
+
symbol
|
|
60559
|
+
};
|
|
60560
|
+
}
|
|
60561
|
+
return { balanceBaseUnit: "0", balanceHuman: "0", balanceUsd: "0", exchangeRate: null, decimals: 6, symbol: "" };
|
|
60562
|
+
},
|
|
60563
|
+
enabled: enabled && hasParams,
|
|
60564
|
+
staleTime: 1e3 * 30,
|
|
60565
|
+
gcTime: 1e3 * 60 * 5,
|
|
60566
|
+
refetchInterval: 1e3 * 30,
|
|
60567
|
+
refetchOnMount: "always",
|
|
60568
|
+
refetchOnWindowFocus: false
|
|
60569
|
+
});
|
|
60570
|
+
}
|
|
60571
|
+
function useExecutions(userId, publishableKey, options2) {
|
|
60572
|
+
const actionType = options2?.actionType ?? ActionType.Deposit;
|
|
60573
|
+
return useQuery({
|
|
60574
|
+
queryKey: ["unifold", "executions", actionType, userId, publishableKey],
|
|
60575
|
+
queryFn: () => queryExecutions(userId, publishableKey, actionType),
|
|
60576
|
+
enabled: (options2?.enabled ?? true) && !!userId,
|
|
60577
|
+
refetchInterval: options2?.refetchInterval ?? 3e3,
|
|
60578
|
+
staleTime: 0,
|
|
60579
|
+
gcTime: 1e3 * 60 * 5,
|
|
59482
60580
|
refetchOnWindowFocus: false
|
|
59483
60581
|
});
|
|
59484
60582
|
}
|
|
@@ -59493,20 +60591,20 @@ function useWithdrawPolling({
|
|
|
59493
60591
|
onWithdrawSuccess,
|
|
59494
60592
|
onWithdrawError
|
|
59495
60593
|
}) {
|
|
59496
|
-
const [executions, setExecutions] = (0,
|
|
59497
|
-
const [isPolling, setIsPolling] = (0,
|
|
59498
|
-
const enabledAtRef = (0,
|
|
59499
|
-
const trackedRef = (0,
|
|
59500
|
-
const prevEnabledRef = (0,
|
|
59501
|
-
const onSuccessRef = (0,
|
|
59502
|
-
const onErrorRef = (0,
|
|
59503
|
-
(0,
|
|
60594
|
+
const [executions, setExecutions] = (0, import_react29.useState)([]);
|
|
60595
|
+
const [isPolling, setIsPolling] = (0, import_react29.useState)(false);
|
|
60596
|
+
const enabledAtRef = (0, import_react29.useRef)(/* @__PURE__ */ new Date());
|
|
60597
|
+
const trackedRef = (0, import_react29.useRef)(/* @__PURE__ */ new Map());
|
|
60598
|
+
const prevEnabledRef = (0, import_react29.useRef)(false);
|
|
60599
|
+
const onSuccessRef = (0, import_react29.useRef)(onWithdrawSuccess);
|
|
60600
|
+
const onErrorRef = (0, import_react29.useRef)(onWithdrawError);
|
|
60601
|
+
(0, import_react29.useEffect)(() => {
|
|
59504
60602
|
onSuccessRef.current = onWithdrawSuccess;
|
|
59505
60603
|
}, [onWithdrawSuccess]);
|
|
59506
|
-
(0,
|
|
60604
|
+
(0, import_react29.useEffect)(() => {
|
|
59507
60605
|
onErrorRef.current = onWithdrawError;
|
|
59508
60606
|
}, [onWithdrawError]);
|
|
59509
|
-
(0,
|
|
60607
|
+
(0, import_react29.useEffect)(() => {
|
|
59510
60608
|
if (enabled && !prevEnabledRef.current) {
|
|
59511
60609
|
enabledAtRef.current = /* @__PURE__ */ new Date();
|
|
59512
60610
|
trackedRef.current.clear();
|
|
@@ -59516,7 +60614,7 @@ function useWithdrawPolling({
|
|
|
59516
60614
|
}
|
|
59517
60615
|
prevEnabledRef.current = enabled;
|
|
59518
60616
|
}, [enabled]);
|
|
59519
|
-
(0,
|
|
60617
|
+
(0, import_react29.useEffect)(() => {
|
|
59520
60618
|
if (!userId || !enabled) return;
|
|
59521
60619
|
const enabledAt = enabledAtRef.current;
|
|
59522
60620
|
const poll = async () => {
|
|
@@ -59578,7 +60676,7 @@ function useWithdrawPolling({
|
|
|
59578
60676
|
setIsPolling(false);
|
|
59579
60677
|
};
|
|
59580
60678
|
}, [userId, publishableKey, enabled]);
|
|
59581
|
-
(0,
|
|
60679
|
+
(0, import_react29.useEffect)(() => {
|
|
59582
60680
|
if (!enabled || !depositWalletId) return;
|
|
59583
60681
|
const trigger = async () => {
|
|
59584
60682
|
try {
|
|
@@ -59606,8 +60704,8 @@ function WithdrawDoubleInput({
|
|
|
59606
60704
|
const isDarkMode = useTheme().themeClass.includes("uf-dark");
|
|
59607
60705
|
const selectedToken = selectedTokenSymbol ? tokens.find((t11) => t11.symbol === selectedTokenSymbol) : void 0;
|
|
59608
60706
|
const availableChainsForToken = selectedToken?.chains || [];
|
|
59609
|
-
const renderTokenItem = (tokenData) => /* @__PURE__ */ (0,
|
|
59610
|
-
/* @__PURE__ */ (0,
|
|
60707
|
+
const renderTokenItem = (tokenData) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
60708
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
59611
60709
|
"img",
|
|
59612
60710
|
{
|
|
59613
60711
|
src: tokenData.icon_url,
|
|
@@ -59618,10 +60716,10 @@ function WithdrawDoubleInput({
|
|
|
59618
60716
|
className: "uf-rounded-full uf-flex-shrink-0"
|
|
59619
60717
|
}
|
|
59620
60718
|
),
|
|
59621
|
-
/* @__PURE__ */ (0,
|
|
60719
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "uf-text-xs uf-font-normal", children: tokenData.symbol })
|
|
59622
60720
|
] });
|
|
59623
|
-
const renderChainItem = (chainData) => /* @__PURE__ */ (0,
|
|
59624
|
-
/* @__PURE__ */ (0,
|
|
60721
|
+
const renderChainItem = (chainData) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
60722
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
59625
60723
|
"img",
|
|
59626
60724
|
{
|
|
59627
60725
|
src: chainData.icon_url,
|
|
@@ -59632,14 +60730,14 @@ function WithdrawDoubleInput({
|
|
|
59632
60730
|
className: "uf-rounded-full uf-flex-shrink-0"
|
|
59633
60731
|
}
|
|
59634
60732
|
),
|
|
59635
|
-
/* @__PURE__ */ (0,
|
|
60733
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "uf-text-xs uf-font-normal", children: chainData.chain_name })
|
|
59636
60734
|
] });
|
|
59637
60735
|
const currentChainData = selectedChainKey ? availableChainsForToken.find(
|
|
59638
60736
|
(c) => getChainKey4(c.chain_id, c.chain_type) === selectedChainKey
|
|
59639
60737
|
) : void 0;
|
|
59640
|
-
return /* @__PURE__ */ (0,
|
|
59641
|
-
/* @__PURE__ */ (0,
|
|
59642
|
-
/* @__PURE__ */ (0,
|
|
60738
|
+
return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "uf-grid uf-grid-cols-2 uf-gap-2.5", children: [
|
|
60739
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { children: [
|
|
60740
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
59643
60741
|
"div",
|
|
59644
60742
|
{
|
|
59645
60743
|
className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1",
|
|
@@ -59647,14 +60745,14 @@ function WithdrawDoubleInput({
|
|
|
59647
60745
|
children: t7.receiveToken
|
|
59648
60746
|
}
|
|
59649
60747
|
),
|
|
59650
|
-
/* @__PURE__ */ (0,
|
|
60748
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
|
|
59651
60749
|
Select2,
|
|
59652
60750
|
{
|
|
59653
60751
|
value: selectedTokenSymbol ?? "",
|
|
59654
60752
|
onValueChange: onTokenChange,
|
|
59655
60753
|
disabled: isLoading || tokens.length === 0,
|
|
59656
60754
|
children: [
|
|
59657
|
-
/* @__PURE__ */ (0,
|
|
60755
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
59658
60756
|
SelectTrigger2,
|
|
59659
60757
|
{
|
|
59660
60758
|
className: "uf-h-10 hover:uf-opacity-90 uf-text-foreground disabled:uf-opacity-50",
|
|
@@ -59662,10 +60760,10 @@ function WithdrawDoubleInput({
|
|
|
59662
60760
|
backgroundColor: components.card.backgroundColor,
|
|
59663
60761
|
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
59664
60762
|
},
|
|
59665
|
-
children: /* @__PURE__ */ (0,
|
|
60763
|
+
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 }) })
|
|
59666
60764
|
}
|
|
59667
60765
|
),
|
|
59668
|
-
/* @__PURE__ */ (0,
|
|
60766
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
59669
60767
|
SelectContent2,
|
|
59670
60768
|
{
|
|
59671
60769
|
className: "uf-bg-secondary uf-border uf-text-foreground uf-max-h-[300px]",
|
|
@@ -59673,7 +60771,7 @@ function WithdrawDoubleInput({
|
|
|
59673
60771
|
border: `1px solid ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)"}`,
|
|
59674
60772
|
...fonts.regular ? { "--uf-font-family": fonts.regular } : {}
|
|
59675
60773
|
},
|
|
59676
|
-
children: tokens.map((tokenData) => /* @__PURE__ */ (0,
|
|
60774
|
+
children: tokens.map((tokenData) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
59677
60775
|
SelectItem2,
|
|
59678
60776
|
{
|
|
59679
60777
|
value: tokenData.symbol,
|
|
@@ -59688,8 +60786,8 @@ function WithdrawDoubleInput({
|
|
|
59688
60786
|
}
|
|
59689
60787
|
)
|
|
59690
60788
|
] }),
|
|
59691
|
-
/* @__PURE__ */ (0,
|
|
59692
|
-
/* @__PURE__ */ (0,
|
|
60789
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { children: [
|
|
60790
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
59693
60791
|
"div",
|
|
59694
60792
|
{
|
|
59695
60793
|
className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1",
|
|
@@ -59697,14 +60795,14 @@ function WithdrawDoubleInput({
|
|
|
59697
60795
|
children: t7.receiveChain
|
|
59698
60796
|
}
|
|
59699
60797
|
),
|
|
59700
|
-
/* @__PURE__ */ (0,
|
|
60798
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
|
|
59701
60799
|
Select2,
|
|
59702
60800
|
{
|
|
59703
60801
|
value: selectedChainKey ?? "",
|
|
59704
60802
|
onValueChange: onChainChange,
|
|
59705
60803
|
disabled: isLoading || availableChainsForToken.length === 0,
|
|
59706
60804
|
children: [
|
|
59707
|
-
/* @__PURE__ */ (0,
|
|
60805
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
59708
60806
|
SelectTrigger2,
|
|
59709
60807
|
{
|
|
59710
60808
|
className: "uf-h-10 hover:uf-opacity-90 uf-text-foreground disabled:uf-opacity-50",
|
|
@@ -59712,10 +60810,10 @@ function WithdrawDoubleInput({
|
|
|
59712
60810
|
backgroundColor: components.card.backgroundColor,
|
|
59713
60811
|
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
59714
60812
|
},
|
|
59715
|
-
children: /* @__PURE__ */ (0,
|
|
60813
|
+
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 }) })
|
|
59716
60814
|
}
|
|
59717
60815
|
),
|
|
59718
|
-
/* @__PURE__ */ (0,
|
|
60816
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
59719
60817
|
SelectContent2,
|
|
59720
60818
|
{
|
|
59721
60819
|
align: "end",
|
|
@@ -59724,9 +60822,9 @@ function WithdrawDoubleInput({
|
|
|
59724
60822
|
border: `1px solid ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)"}`,
|
|
59725
60823
|
...fonts.regular ? { "--uf-font-family": fonts.regular } : {}
|
|
59726
60824
|
},
|
|
59727
|
-
children: availableChainsForToken.length === 0 ? /* @__PURE__ */ (0,
|
|
60825
|
+
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) => {
|
|
59728
60826
|
const chainKey = getChainKey4(chainData.chain_id, chainData.chain_type);
|
|
59729
|
-
return /* @__PURE__ */ (0,
|
|
60827
|
+
return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
59730
60828
|
SelectItem2,
|
|
59731
60829
|
{
|
|
59732
60830
|
value: chainKey,
|
|
@@ -59891,9 +60989,56 @@ async function sendSolanaWithdraw(params) {
|
|
|
59891
60989
|
);
|
|
59892
60990
|
return sendResponse.signature;
|
|
59893
60991
|
}
|
|
60992
|
+
var HYPERCORE_CHAIN_ID = "1337";
|
|
60993
|
+
var HYPERCORE_SPOT_USDC_ADDRESS = "0x6d1e7cde53ba9467b783cb7c530ce054";
|
|
60994
|
+
function isHypercoreChain(chainId) {
|
|
60995
|
+
return chainId === HYPERCORE_CHAIN_ID;
|
|
60996
|
+
}
|
|
60997
|
+
async function sendHypercoreWithdraw(params) {
|
|
60998
|
+
const {
|
|
60999
|
+
provider,
|
|
61000
|
+
fromAddress,
|
|
61001
|
+
depositWalletAddress,
|
|
61002
|
+
sourceTokenAddress,
|
|
61003
|
+
amount,
|
|
61004
|
+
tokenSymbol,
|
|
61005
|
+
publishableKey
|
|
61006
|
+
} = params;
|
|
61007
|
+
const isSpot = sourceTokenAddress.toLowerCase() === HYPERCORE_SPOT_USDC_ADDRESS;
|
|
61008
|
+
const currentChainHex = await provider.request({
|
|
61009
|
+
method: "eth_chainId",
|
|
61010
|
+
params: []
|
|
61011
|
+
});
|
|
61012
|
+
const activeChainId = String(parseInt(currentChainHex, 16));
|
|
61013
|
+
const buildResult = await buildHypercoreTransaction(
|
|
61014
|
+
{
|
|
61015
|
+
action_type: isSpot ? "spot_send" : "usd_send",
|
|
61016
|
+
signature_chain_type: "ethereum",
|
|
61017
|
+
signature_chain_id: activeChainId,
|
|
61018
|
+
recipient_address: depositWalletAddress,
|
|
61019
|
+
token_address: sourceTokenAddress,
|
|
61020
|
+
token_symbol: tokenSymbol || void 0,
|
|
61021
|
+
amount
|
|
61022
|
+
},
|
|
61023
|
+
publishableKey
|
|
61024
|
+
);
|
|
61025
|
+
const signature = await provider.request({
|
|
61026
|
+
method: "eth_signTypedData_v4",
|
|
61027
|
+
params: [fromAddress, JSON.stringify(buildResult.typed_data)]
|
|
61028
|
+
});
|
|
61029
|
+
await sendHypercoreTransaction(
|
|
61030
|
+
{
|
|
61031
|
+
action_payload: buildResult.action_payload,
|
|
61032
|
+
signature,
|
|
61033
|
+
nonce: buildResult.nonce
|
|
61034
|
+
},
|
|
61035
|
+
publishableKey
|
|
61036
|
+
);
|
|
61037
|
+
}
|
|
59894
61038
|
async function detectBrowserWallet(chainType, senderAddress) {
|
|
59895
61039
|
const win = typeof window !== "undefined" ? window : null;
|
|
59896
61040
|
if (!win || !senderAddress) return null;
|
|
61041
|
+
if (getUserDisconnectedWallet()) return null;
|
|
59897
61042
|
const anyWin = win;
|
|
59898
61043
|
if (chainType === "solana") {
|
|
59899
61044
|
const solProviders = [];
|
|
@@ -59927,28 +61072,44 @@ async function detectBrowserWallet(chainType, senderAddress) {
|
|
|
59927
61072
|
evmProviders.push({ provider: p, name });
|
|
59928
61073
|
}
|
|
59929
61074
|
};
|
|
59930
|
-
|
|
59931
|
-
|
|
59932
|
-
|
|
59933
|
-
|
|
59934
|
-
|
|
59935
|
-
|
|
59936
|
-
|
|
59937
|
-
|
|
59938
|
-
|
|
59939
|
-
|
|
59940
|
-
|
|
59941
|
-
|
|
59942
|
-
|
|
59943
|
-
|
|
59944
|
-
|
|
59945
|
-
|
|
59946
|
-
|
|
59947
|
-
if (
|
|
59948
|
-
else if (
|
|
59949
|
-
else if (
|
|
59950
|
-
else if (
|
|
59951
|
-
|
|
61075
|
+
if (!anyWin.__eip6963Providers) {
|
|
61076
|
+
anyWin.__eip6963Providers = [];
|
|
61077
|
+
}
|
|
61078
|
+
const handleAnnouncement = (event) => {
|
|
61079
|
+
const { detail } = event;
|
|
61080
|
+
if (!detail?.info || !detail?.provider) return;
|
|
61081
|
+
const exists = anyWin.__eip6963Providers.some((p) => p.info.uuid === detail.info.uuid);
|
|
61082
|
+
if (!exists) anyWin.__eip6963Providers.push(detail);
|
|
61083
|
+
};
|
|
61084
|
+
win.addEventListener("eip6963:announceProvider", handleAnnouncement);
|
|
61085
|
+
win.dispatchEvent(new Event("eip6963:requestProvider"));
|
|
61086
|
+
win.removeEventListener("eip6963:announceProvider", handleAnnouncement);
|
|
61087
|
+
for (const detail of anyWin.__eip6963Providers) {
|
|
61088
|
+
const rdns = detail.info?.rdns || "";
|
|
61089
|
+
let name = detail.info?.name || "Wallet";
|
|
61090
|
+
if (rdns.includes("metamask")) name = "MetaMask";
|
|
61091
|
+
else if (rdns.includes("phantom")) name = "Phantom";
|
|
61092
|
+
else if (rdns.includes("coinbase")) name = "Coinbase";
|
|
61093
|
+
else if (rdns.includes("rabby")) name = "Rabby";
|
|
61094
|
+
else if (rdns.includes("rainbow")) name = "Rainbow";
|
|
61095
|
+
else if (rdns.includes("okx")) name = "OKX Wallet";
|
|
61096
|
+
else if (rdns.includes("trust")) name = "Trust Wallet";
|
|
61097
|
+
add(detail.provider, name);
|
|
61098
|
+
}
|
|
61099
|
+
if (evmProviders.length === 0) {
|
|
61100
|
+
add(anyWin.phantom?.ethereum, "Phantom");
|
|
61101
|
+
add(anyWin.coinbaseWalletExtension, "Coinbase");
|
|
61102
|
+
add(anyWin.trustwallet?.ethereum, "Trust Wallet");
|
|
61103
|
+
add(anyWin.okxwallet, "OKX Wallet");
|
|
61104
|
+
if (evmProviders.length === 0 && win.ethereum) {
|
|
61105
|
+
const eth = win.ethereum;
|
|
61106
|
+
let name = "Wallet";
|
|
61107
|
+
if (eth.isMetaMask && !eth.isPhantom && !eth.isRabby) name = "MetaMask";
|
|
61108
|
+
else if (eth.isRabby) name = "Rabby";
|
|
61109
|
+
else if (eth.isRainbow) name = "Rainbow";
|
|
61110
|
+
else if (eth.isCoinbaseWallet) name = "Coinbase";
|
|
61111
|
+
add(eth, name);
|
|
61112
|
+
}
|
|
59952
61113
|
}
|
|
59953
61114
|
for (const { provider, name } of evmProviders) {
|
|
59954
61115
|
try {
|
|
@@ -60001,12 +61162,9 @@ function WithdrawForm({
|
|
|
60001
61162
|
estimatedProcessingTime,
|
|
60002
61163
|
maxSlippagePercent,
|
|
60003
61164
|
priceImpactPercent,
|
|
60004
|
-
|
|
61165
|
+
senderAddress,
|
|
60005
61166
|
sourceChainId,
|
|
60006
61167
|
sourceTokenAddress,
|
|
60007
|
-
isWalletMatch,
|
|
60008
|
-
connectedWalletName,
|
|
60009
|
-
canWithdraw,
|
|
60010
61168
|
onWithdraw,
|
|
60011
61169
|
onWithdrawError,
|
|
60012
61170
|
onDepositWalletCreation,
|
|
@@ -60014,22 +61172,22 @@ function WithdrawForm({
|
|
|
60014
61172
|
footerLeft
|
|
60015
61173
|
}) {
|
|
60016
61174
|
const { colors: colors2, fonts, components } = useTheme();
|
|
60017
|
-
const [recipientAddress, setRecipientAddress] = (0,
|
|
60018
|
-
const [amount, setAmount] = (0,
|
|
60019
|
-
const [inputUnit, setInputUnit] = (0,
|
|
60020
|
-
const [isSubmitting, setIsSubmitting] = (0,
|
|
60021
|
-
const [submitError, setSubmitError] = (0,
|
|
60022
|
-
const [detailsExpanded, setDetailsExpanded] = (0,
|
|
60023
|
-
const [glossaryOpen, setGlossaryOpen] = (0,
|
|
60024
|
-
(0,
|
|
61175
|
+
const [recipientAddress, setRecipientAddress] = (0, import_react30.useState)(recipientAddressProp || "");
|
|
61176
|
+
const [amount, setAmount] = (0, import_react30.useState)("");
|
|
61177
|
+
const [inputUnit, setInputUnit] = (0, import_react30.useState)("crypto");
|
|
61178
|
+
const [isSubmitting, setIsSubmitting] = (0, import_react30.useState)(false);
|
|
61179
|
+
const [submitError, setSubmitError] = (0, import_react30.useState)(null);
|
|
61180
|
+
const [detailsExpanded, setDetailsExpanded] = (0, import_react30.useState)(false);
|
|
61181
|
+
const [glossaryOpen, setGlossaryOpen] = (0, import_react30.useState)(false);
|
|
61182
|
+
(0, import_react30.useEffect)(() => {
|
|
60025
61183
|
setRecipientAddress(recipientAddressProp || "");
|
|
60026
61184
|
setAmount("");
|
|
60027
61185
|
setInputUnit("crypto");
|
|
60028
61186
|
setSubmitError(null);
|
|
60029
61187
|
}, [recipientAddressProp]);
|
|
60030
61188
|
const trimmedAddress = recipientAddress.trim();
|
|
60031
|
-
const [debouncedAddress, setDebouncedAddress] = (0,
|
|
60032
|
-
(0,
|
|
61189
|
+
const [debouncedAddress, setDebouncedAddress] = (0, import_react30.useState)(trimmedAddress);
|
|
61190
|
+
(0, import_react30.useEffect)(() => {
|
|
60033
61191
|
const id = setTimeout(() => setDebouncedAddress(trimmedAddress), 500);
|
|
60034
61192
|
return () => clearTimeout(id);
|
|
60035
61193
|
}, [trimmedAddress]);
|
|
@@ -60046,7 +61204,7 @@ function WithdrawForm({
|
|
|
60046
61204
|
enabled: debouncedAddress.length > 5 && !!selectedChain
|
|
60047
61205
|
});
|
|
60048
61206
|
const isDebouncing = trimmedAddress !== debouncedAddress;
|
|
60049
|
-
const addressError = (0,
|
|
61207
|
+
const addressError = (0, import_react30.useMemo)(() => {
|
|
60050
61208
|
if (!trimmedAddress || trimmedAddress.length <= 5) return null;
|
|
60051
61209
|
if (isDebouncing || isVerifyingAddress) return null;
|
|
60052
61210
|
if (verifyError) return t8.invalidAddress;
|
|
@@ -60060,47 +61218,47 @@ function WithdrawForm({
|
|
|
60060
61218
|
return null;
|
|
60061
61219
|
}, [trimmedAddress, isDebouncing, isVerifyingAddress, verifyError, addressVerification, selectedChain, selectedToken]);
|
|
60062
61220
|
const isAddressValid = !isDebouncing && !!addressVerification?.valid && !addressError;
|
|
60063
|
-
const exchangeRate = (0,
|
|
61221
|
+
const exchangeRate = (0, import_react30.useMemo)(() => {
|
|
60064
61222
|
if (!balanceData?.exchangeRate) return 0;
|
|
60065
61223
|
return parseFloat(balanceData.exchangeRate);
|
|
60066
61224
|
}, [balanceData]);
|
|
60067
|
-
const balanceCrypto = (0,
|
|
61225
|
+
const balanceCrypto = (0, import_react30.useMemo)(() => {
|
|
60068
61226
|
if (!balanceData?.balanceHuman) return 0;
|
|
60069
61227
|
return parseFloat(balanceData.balanceHuman);
|
|
60070
61228
|
}, [balanceData]);
|
|
60071
|
-
const balanceUsdNum = (0,
|
|
61229
|
+
const balanceUsdNum = (0, import_react30.useMemo)(() => {
|
|
60072
61230
|
if (!balanceData?.balanceUsd) return 0;
|
|
60073
61231
|
return parseFloat(balanceData.balanceUsd);
|
|
60074
61232
|
}, [balanceData]);
|
|
60075
61233
|
const tokenSymbol = sourceTokenSymbol || balanceData?.symbol || "TOKEN";
|
|
60076
61234
|
const sourceDecimals = balanceData?.decimals ?? 6;
|
|
60077
|
-
const cryptoAmountFromInput = (0,
|
|
61235
|
+
const cryptoAmountFromInput = (0, import_react30.useMemo)(() => {
|
|
60078
61236
|
const val = parseFloat(amount);
|
|
60079
61237
|
if (!val || val <= 0) return 0;
|
|
60080
61238
|
if (inputUnit === "crypto") return val;
|
|
60081
61239
|
return exchangeRate > 0 ? val / exchangeRate : 0;
|
|
60082
61240
|
}, [amount, inputUnit, exchangeRate]);
|
|
60083
|
-
const fiatAmountFromInput = (0,
|
|
61241
|
+
const fiatAmountFromInput = (0, import_react30.useMemo)(() => {
|
|
60084
61242
|
const val = parseFloat(amount);
|
|
60085
61243
|
if (!val || val <= 0) return 0;
|
|
60086
61244
|
if (inputUnit === "fiat") return val;
|
|
60087
61245
|
return val * exchangeRate;
|
|
60088
61246
|
}, [amount, inputUnit, exchangeRate]);
|
|
60089
|
-
const convertedDisplay = (0,
|
|
61247
|
+
const convertedDisplay = (0, import_react30.useMemo)(() => {
|
|
60090
61248
|
if (!amount || parseFloat(amount) <= 0) return null;
|
|
60091
61249
|
if (inputUnit === "crypto") {
|
|
60092
61250
|
return `$${fiatAmountFromInput.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
60093
61251
|
}
|
|
60094
61252
|
return `${cryptoAmountFromInput.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 6 })} ${tokenSymbol}`;
|
|
60095
61253
|
}, [amount, inputUnit, fiatAmountFromInput, cryptoAmountFromInput, tokenSymbol]);
|
|
60096
|
-
const balanceDisplay = (0,
|
|
61254
|
+
const balanceDisplay = (0, import_react30.useMemo)(() => {
|
|
60097
61255
|
if (isLoadingBalance || !balanceData) return null;
|
|
60098
61256
|
if (inputUnit === "crypto") {
|
|
60099
61257
|
return `${balanceCrypto.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ${tokenSymbol}`;
|
|
60100
61258
|
}
|
|
60101
61259
|
return `$${balanceUsdNum.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
60102
61260
|
}, [isLoadingBalance, balanceData, inputUnit, balanceCrypto, balanceUsdNum, tokenSymbol]);
|
|
60103
|
-
const handleSwitchUnit = (0,
|
|
61261
|
+
const handleSwitchUnit = (0, import_react30.useCallback)(() => {
|
|
60104
61262
|
const val = parseFloat(amount);
|
|
60105
61263
|
if (!val || val <= 0 || exchangeRate <= 0) {
|
|
60106
61264
|
setInputUnit((u) => u === "crypto" ? "fiat" : "crypto");
|
|
@@ -60117,7 +61275,7 @@ function WithdrawForm({
|
|
|
60117
61275
|
setInputUnit("crypto");
|
|
60118
61276
|
}
|
|
60119
61277
|
}, [amount, inputUnit, exchangeRate, sourceDecimals]);
|
|
60120
|
-
const handleMaxClick = (0,
|
|
61278
|
+
const handleMaxClick = (0, import_react30.useCallback)(() => {
|
|
60121
61279
|
if (inputUnit === "crypto") {
|
|
60122
61280
|
if (balanceCrypto <= 0) return;
|
|
60123
61281
|
setAmount(balanceData?.balanceHuman ?? "0");
|
|
@@ -60129,7 +61287,7 @@ function WithdrawForm({
|
|
|
60129
61287
|
const isBelowMinimum = minimumWithdrawAmountUsd !== null && fiatAmountFromInput > 0 && fiatAmountFromInput < minimumWithdrawAmountUsd;
|
|
60130
61288
|
const isOverBalance = inputUnit === "crypto" ? cryptoAmountFromInput > 0 && balanceCrypto > 0 && cryptoAmountFromInput > balanceCrypto : fiatAmountFromInput > 0 && balanceUsdNum > 0 && fiatAmountFromInput > balanceUsdNum;
|
|
60131
61289
|
const isFormValid = trimmedAddress.length > 0 && amount.trim().length > 0 && cryptoAmountFromInput > 0 && isAddressValid && !isBelowMinimum && !isOverBalance && !!balanceData;
|
|
60132
|
-
const handleWithdraw = (0,
|
|
61290
|
+
const handleWithdraw = (0, import_react30.useCallback)(async () => {
|
|
60133
61291
|
if (!selectedToken || !selectedChain) return;
|
|
60134
61292
|
if (!isFormValid) return;
|
|
60135
61293
|
setIsSubmitting(true);
|
|
@@ -60141,12 +61299,43 @@ function WithdrawForm({
|
|
|
60141
61299
|
destinationTokenAddress: selectedChain.token_address,
|
|
60142
61300
|
recipientAddress: trimmedAddress
|
|
60143
61301
|
});
|
|
60144
|
-
|
|
61302
|
+
let amountBaseUnit = computeBaseUnit(
|
|
60145
61303
|
balanceData.balanceBaseUnit,
|
|
60146
61304
|
parseFloat(amount),
|
|
60147
61305
|
inputUnit === "crypto" ? balanceCrypto : balanceUsdNum
|
|
60148
61306
|
);
|
|
60149
|
-
|
|
61307
|
+
let humanAmount = toSafeDecimalString(cryptoAmountFromInput, sourceDecimals);
|
|
61308
|
+
if (isHypercoreChain(sourceChainId)) {
|
|
61309
|
+
try {
|
|
61310
|
+
const check = await checkHypercoreActivation(
|
|
61311
|
+
{
|
|
61312
|
+
source_address: senderAddress,
|
|
61313
|
+
recipient_address: depositWallet.address
|
|
61314
|
+
},
|
|
61315
|
+
publishableKey
|
|
61316
|
+
);
|
|
61317
|
+
if (!check.user_exists) {
|
|
61318
|
+
const fee = check.activation_fee;
|
|
61319
|
+
const maxSendable = balanceCrypto - fee;
|
|
61320
|
+
if (maxSendable <= 0) {
|
|
61321
|
+
throw new Error(
|
|
61322
|
+
`Insufficient balance. A ${fee} USDC activation fee is required for the first transfer to this address.`
|
|
61323
|
+
);
|
|
61324
|
+
}
|
|
61325
|
+
const requestedAmount = parseFloat(humanAmount);
|
|
61326
|
+
if (requestedAmount > maxSendable) {
|
|
61327
|
+
humanAmount = toSafeDecimalString(maxSendable, sourceDecimals);
|
|
61328
|
+
amountBaseUnit = computeBaseUnit(
|
|
61329
|
+
balanceData.balanceBaseUnit,
|
|
61330
|
+
maxSendable,
|
|
61331
|
+
balanceCrypto
|
|
61332
|
+
);
|
|
61333
|
+
}
|
|
61334
|
+
}
|
|
61335
|
+
} catch (e) {
|
|
61336
|
+
if (e instanceof Error && e.message.includes("activation fee")) throw e;
|
|
61337
|
+
}
|
|
61338
|
+
}
|
|
60150
61339
|
const txInfo = {
|
|
60151
61340
|
sourceChainType,
|
|
60152
61341
|
sourceChainId,
|
|
@@ -60161,33 +61350,67 @@ function WithdrawForm({
|
|
|
60161
61350
|
withdrawIntentAddress: depositWallet.address,
|
|
60162
61351
|
recipientAddress: trimmedAddress
|
|
60163
61352
|
};
|
|
60164
|
-
|
|
60165
|
-
|
|
60166
|
-
|
|
60167
|
-
|
|
60168
|
-
|
|
60169
|
-
|
|
60170
|
-
|
|
61353
|
+
const wallet = await detectBrowserWallet(sourceChainType, senderAddress);
|
|
61354
|
+
console.log("browser wallet", wallet);
|
|
61355
|
+
if (wallet) {
|
|
61356
|
+
try {
|
|
61357
|
+
if (wallet.chainFamily === "evm" && isHypercoreChain(sourceChainId)) {
|
|
61358
|
+
await sendHypercoreWithdraw({
|
|
61359
|
+
provider: wallet.provider,
|
|
61360
|
+
fromAddress: wallet.address,
|
|
61361
|
+
depositWalletAddress: depositWallet.address,
|
|
61362
|
+
sourceTokenAddress,
|
|
61363
|
+
amount: humanAmount,
|
|
61364
|
+
tokenSymbol,
|
|
61365
|
+
publishableKey
|
|
61366
|
+
});
|
|
61367
|
+
} else if (wallet.chainFamily === "evm") {
|
|
61368
|
+
await sendEvmWithdraw({
|
|
61369
|
+
provider: wallet.provider,
|
|
61370
|
+
fromAddress: wallet.address,
|
|
61371
|
+
depositWalletAddress: depositWallet.address,
|
|
61372
|
+
sourceTokenAddress,
|
|
61373
|
+
sourceChainId,
|
|
61374
|
+
amountBaseUnit
|
|
61375
|
+
});
|
|
61376
|
+
} else if (wallet.chainFamily === "solana") {
|
|
61377
|
+
await sendSolanaWithdraw({
|
|
61378
|
+
provider: wallet.provider,
|
|
61379
|
+
fromAddress: wallet.address,
|
|
61380
|
+
depositWalletAddress: depositWallet.address,
|
|
61381
|
+
sourceTokenAddress,
|
|
61382
|
+
amountBaseUnit,
|
|
61383
|
+
publishableKey
|
|
61384
|
+
});
|
|
61385
|
+
}
|
|
61386
|
+
} catch (walletErr) {
|
|
61387
|
+
console.error("[Unifold] Browser wallet send failed:", walletErr, {
|
|
61388
|
+
wallet: `${wallet.name} (${wallet.chainFamily})`,
|
|
60171
61389
|
sourceChainId,
|
|
60172
|
-
|
|
60173
|
-
});
|
|
60174
|
-
} else if (detectedWallet.chainFamily === "solana") {
|
|
60175
|
-
await sendSolanaWithdraw({
|
|
60176
|
-
provider: detectedWallet.provider,
|
|
60177
|
-
fromAddress: detectedWallet.address,
|
|
60178
|
-
depositWalletAddress: depositWallet.address,
|
|
60179
|
-
sourceTokenAddress,
|
|
61390
|
+
amount: humanAmount,
|
|
60180
61391
|
amountBaseUnit,
|
|
60181
|
-
|
|
61392
|
+
depositWallet: depositWallet.address
|
|
60182
61393
|
});
|
|
61394
|
+
throw walletErr;
|
|
60183
61395
|
}
|
|
60184
61396
|
} else if (onWithdraw) {
|
|
60185
|
-
|
|
61397
|
+
try {
|
|
61398
|
+
await onWithdraw(txInfo);
|
|
61399
|
+
} catch (callbackErr) {
|
|
61400
|
+
console.error("[Unifold] onWithdraw callback failed:", callbackErr, {
|
|
61401
|
+
sourceChainId,
|
|
61402
|
+
amount: humanAmount,
|
|
61403
|
+
amountBaseUnit,
|
|
61404
|
+
depositWallet: depositWallet.address
|
|
61405
|
+
});
|
|
61406
|
+
throw callbackErr;
|
|
61407
|
+
}
|
|
60186
61408
|
} else {
|
|
60187
61409
|
throw new Error("No withdrawal method available. Please connect a wallet.");
|
|
60188
61410
|
}
|
|
60189
61411
|
onWithdrawSubmitted?.(txInfo);
|
|
60190
61412
|
} catch (err) {
|
|
61413
|
+
console.error("[Unifold] Withdrawal failed:", err);
|
|
60191
61414
|
const raw = err instanceof Error ? err.message : "Withdrawal failed. Please try again.";
|
|
60192
61415
|
setSubmitError(raw.length > 120 ? "Withdrawal failed. Please try again." : raw);
|
|
60193
61416
|
onWithdrawError?.({
|
|
@@ -60198,10 +61421,10 @@ function WithdrawForm({
|
|
|
60198
61421
|
} finally {
|
|
60199
61422
|
setIsSubmitting(false);
|
|
60200
61423
|
}
|
|
60201
|
-
}, [selectedToken, selectedChain, isFormValid, cryptoAmountFromInput, sourceDecimals, trimmedAddress, publishableKey, onWithdraw,
|
|
60202
|
-
return /* @__PURE__ */ (0,
|
|
60203
|
-
/* @__PURE__ */ (0,
|
|
60204
|
-
/* @__PURE__ */ (0,
|
|
61424
|
+
}, [selectedToken, selectedChain, isFormValid, cryptoAmountFromInput, sourceDecimals, trimmedAddress, publishableKey, onWithdraw, sourceChainType, senderAddress, sourceTokenAddress, sourceChainId, onWithdrawError, onDepositWalletCreation, onWithdrawSubmitted, amount, inputUnit, balanceCrypto, balanceUsdNum, balanceData]);
|
|
61425
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
|
|
61426
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { children: [
|
|
61427
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60205
61428
|
"div",
|
|
60206
61429
|
{
|
|
60207
61430
|
className: "uf-text-xs uf-mb-1.5",
|
|
@@ -60209,7 +61432,7 @@ function WithdrawForm({
|
|
|
60209
61432
|
children: t8.recipientAddress
|
|
60210
61433
|
}
|
|
60211
61434
|
),
|
|
60212
|
-
/* @__PURE__ */ (0,
|
|
61435
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60213
61436
|
"style",
|
|
60214
61437
|
{
|
|
60215
61438
|
dangerouslySetInnerHTML: {
|
|
@@ -60217,7 +61440,7 @@ function WithdrawForm({
|
|
|
60217
61440
|
}
|
|
60218
61441
|
}
|
|
60219
61442
|
),
|
|
60220
|
-
/* @__PURE__ */ (0,
|
|
61443
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
|
|
60221
61444
|
"div",
|
|
60222
61445
|
{
|
|
60223
61446
|
className: "uf-flex uf-items-center uf-gap-1 uf-pr-2",
|
|
@@ -60227,7 +61450,7 @@ function WithdrawForm({
|
|
|
60227
61450
|
border: `${components.input.borderWidth}px solid ${addressError ? colors2.error : components.input.borderColor}`
|
|
60228
61451
|
},
|
|
60229
61452
|
children: [
|
|
60230
|
-
/* @__PURE__ */ (0,
|
|
61453
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60231
61454
|
"input",
|
|
60232
61455
|
{
|
|
60233
61456
|
type: "text",
|
|
@@ -60244,7 +61467,7 @@ function WithdrawForm({
|
|
|
60244
61467
|
}
|
|
60245
61468
|
}
|
|
60246
61469
|
),
|
|
60247
|
-
/* @__PURE__ */ (0,
|
|
61470
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60248
61471
|
"button",
|
|
60249
61472
|
{
|
|
60250
61473
|
type: "button",
|
|
@@ -60261,27 +61484,27 @@ function WithdrawForm({
|
|
|
60261
61484
|
className: "uf-flex-shrink-0 uf-p-1 uf-rounded uf-transition-colors hover:uf-opacity-70",
|
|
60262
61485
|
style: { color: colors2.foregroundMuted },
|
|
60263
61486
|
title: "Paste from clipboard",
|
|
60264
|
-
children: /* @__PURE__ */ (0,
|
|
61487
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ClipboardPaste, { className: "uf-w-4 uf-h-4" })
|
|
60265
61488
|
}
|
|
60266
61489
|
)
|
|
60267
61490
|
]
|
|
60268
61491
|
}
|
|
60269
61492
|
),
|
|
60270
|
-
(isDebouncing || isVerifyingAddress) && trimmedAddress.length > 5 && /* @__PURE__ */ (0,
|
|
60271
|
-
/* @__PURE__ */ (0,
|
|
60272
|
-
/* @__PURE__ */ (0,
|
|
61493
|
+
(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: [
|
|
61494
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(LoaderCircle, { className: "uf-w-3 uf-h-3 uf-animate-spin", style: { color: colors2.foregroundMuted } }),
|
|
61495
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: t8.verifyingAddress })
|
|
60273
61496
|
] }),
|
|
60274
|
-
addressError && /* @__PURE__ */ (0,
|
|
60275
|
-
/* @__PURE__ */ (0,
|
|
60276
|
-
/* @__PURE__ */ (0,
|
|
61497
|
+
addressError && /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-1.5", children: [
|
|
61498
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(TriangleAlert, { className: "uf-w-3 uf-h-3", style: { color: colors2.error } }),
|
|
61499
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "uf-text-xs", style: { color: colors2.error, fontFamily: fonts.regular }, children: addressError })
|
|
60277
61500
|
] })
|
|
60278
61501
|
] }),
|
|
60279
|
-
/* @__PURE__ */ (0,
|
|
60280
|
-
/* @__PURE__ */ (0,
|
|
61502
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { children: [
|
|
61503
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-text-xs uf-mb-1.5", style: { color: components.card.labelColor, fontFamily: fonts.medium }, children: [
|
|
60281
61504
|
t8.amount,
|
|
60282
|
-
minimumWithdrawAmountUsd != null && minimumWithdrawAmountUsd > 0 && /* @__PURE__ */ (0,
|
|
61505
|
+
minimumWithdrawAmountUsd != null && minimumWithdrawAmountUsd > 0 && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { style: { color: colors2.warning, fontFamily: fonts.regular }, children: ` ($${minimumWithdrawAmountUsd.toFixed(2)} min)` })
|
|
60283
61506
|
] }),
|
|
60284
|
-
/* @__PURE__ */ (0,
|
|
61507
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60285
61508
|
"style",
|
|
60286
61509
|
{
|
|
60287
61510
|
dangerouslySetInnerHTML: {
|
|
@@ -60289,7 +61512,7 @@ function WithdrawForm({
|
|
|
60289
61512
|
}
|
|
60290
61513
|
}
|
|
60291
61514
|
),
|
|
60292
|
-
/* @__PURE__ */ (0,
|
|
61515
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
|
|
60293
61516
|
"div",
|
|
60294
61517
|
{
|
|
60295
61518
|
className: "uf-flex uf-items-center uf-gap-2 uf-px-3 uf-py-2.5",
|
|
@@ -60299,7 +61522,7 @@ function WithdrawForm({
|
|
|
60299
61522
|
border: `${components.input.borderWidth}px solid ${components.input.borderColor}`
|
|
60300
61523
|
},
|
|
60301
61524
|
children: [
|
|
60302
|
-
/* @__PURE__ */ (0,
|
|
61525
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60303
61526
|
"input",
|
|
60304
61527
|
{
|
|
60305
61528
|
type: "text",
|
|
@@ -60320,8 +61543,8 @@ function WithdrawForm({
|
|
|
60320
61543
|
}
|
|
60321
61544
|
}
|
|
60322
61545
|
),
|
|
60323
|
-
/* @__PURE__ */ (0,
|
|
60324
|
-
/* @__PURE__ */ (0,
|
|
61546
|
+
/* @__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" }),
|
|
61547
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60325
61548
|
"button",
|
|
60326
61549
|
{
|
|
60327
61550
|
type: "button",
|
|
@@ -60334,10 +61557,10 @@ function WithdrawForm({
|
|
|
60334
61557
|
]
|
|
60335
61558
|
}
|
|
60336
61559
|
),
|
|
60337
|
-
/* @__PURE__ */ (0,
|
|
60338
|
-
/* @__PURE__ */ (0,
|
|
60339
|
-
/* @__PURE__ */ (0,
|
|
60340
|
-
exchangeRate > 0 && /* @__PURE__ */ (0,
|
|
61560
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-mt-1.5 uf-px-3", children: [
|
|
61561
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
|
|
61562
|
+
/* @__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}`) }),
|
|
61563
|
+
exchangeRate > 0 && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60341
61564
|
"button",
|
|
60342
61565
|
{
|
|
60343
61566
|
type: "button",
|
|
@@ -60345,49 +61568,49 @@ function WithdrawForm({
|
|
|
60345
61568
|
className: "uf-p-0.5 uf-rounded uf-transition-colors hover:uf-opacity-70",
|
|
60346
61569
|
style: { color: colors2.foregroundMuted },
|
|
60347
61570
|
title: "Switch unit",
|
|
60348
|
-
children: /* @__PURE__ */ (0,
|
|
61571
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ArrowUpDown, { className: "uf-w-3 uf-h-3" })
|
|
60349
61572
|
}
|
|
60350
61573
|
)
|
|
60351
61574
|
] }),
|
|
60352
|
-
/* @__PURE__ */ (0,
|
|
60353
|
-
balanceDisplay && /* @__PURE__ */ (0,
|
|
61575
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { children: [
|
|
61576
|
+
balanceDisplay && /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: [
|
|
60354
61577
|
t8.balance,
|
|
60355
61578
|
": ",
|
|
60356
61579
|
balanceDisplay
|
|
60357
61580
|
] }),
|
|
60358
|
-
isLoadingBalance && /* @__PURE__ */ (0,
|
|
61581
|
+
isLoadingBalance && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-h-3 uf-w-16 uf-bg-muted uf-rounded uf-animate-pulse" })
|
|
60359
61582
|
] })
|
|
60360
61583
|
] })
|
|
60361
61584
|
] }),
|
|
60362
|
-
/* @__PURE__ */ (0,
|
|
60363
|
-
/* @__PURE__ */ (0,
|
|
61585
|
+
/* @__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: [
|
|
61586
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
|
|
60364
61587
|
"button",
|
|
60365
61588
|
{
|
|
60366
61589
|
type: "button",
|
|
60367
61590
|
onClick: () => setDetailsExpanded(!detailsExpanded),
|
|
60368
61591
|
className: "uf-w-full uf-flex uf-items-center uf-justify-between uf-py-2.5",
|
|
60369
61592
|
children: [
|
|
60370
|
-
/* @__PURE__ */ (0,
|
|
60371
|
-
/* @__PURE__ */ (0,
|
|
60372
|
-
/* @__PURE__ */ (0,
|
|
61593
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
61594
|
+
/* @__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 } }) }),
|
|
61595
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
|
|
60373
61596
|
tCrypto.processingTime.label,
|
|
60374
61597
|
":",
|
|
60375
61598
|
" ",
|
|
60376
|
-
/* @__PURE__ */ (0,
|
|
61599
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: formatProcessingTime2(estimatedProcessingTime) })
|
|
60377
61600
|
] })
|
|
60378
61601
|
] }),
|
|
60379
|
-
detailsExpanded ? /* @__PURE__ */ (0,
|
|
61602
|
+
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 } })
|
|
60380
61603
|
]
|
|
60381
61604
|
}
|
|
60382
61605
|
),
|
|
60383
|
-
detailsExpanded && /* @__PURE__ */ (0,
|
|
60384
|
-
/* @__PURE__ */ (0,
|
|
60385
|
-
/* @__PURE__ */ (0,
|
|
60386
|
-
/* @__PURE__ */ (0,
|
|
61606
|
+
detailsExpanded && /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-pb-3 uf-space-y-2.5", children: [
|
|
61607
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
61608
|
+
/* @__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 } }) }),
|
|
61609
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
|
|
60387
61610
|
tCrypto.slippage.label,
|
|
60388
61611
|
":",
|
|
60389
61612
|
" ",
|
|
60390
|
-
/* @__PURE__ */ (0,
|
|
61613
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: [
|
|
60391
61614
|
tCrypto.slippage.auto,
|
|
60392
61615
|
" \u2022 ",
|
|
60393
61616
|
(maxSlippagePercent ?? 0.25).toFixed(2),
|
|
@@ -60395,13 +61618,13 @@ function WithdrawForm({
|
|
|
60395
61618
|
] })
|
|
60396
61619
|
] })
|
|
60397
61620
|
] }),
|
|
60398
|
-
/* @__PURE__ */ (0,
|
|
60399
|
-
/* @__PURE__ */ (0,
|
|
60400
|
-
/* @__PURE__ */ (0,
|
|
61621
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
61622
|
+
/* @__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 } }) }),
|
|
61623
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
|
|
60401
61624
|
tCrypto.priceImpact.label,
|
|
60402
61625
|
":",
|
|
60403
61626
|
" ",
|
|
60404
|
-
/* @__PURE__ */ (0,
|
|
61627
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: [
|
|
60405
61628
|
(priceImpactPercent ?? 0).toFixed(2),
|
|
60406
61629
|
"%"
|
|
60407
61630
|
] })
|
|
@@ -60409,23 +61632,12 @@ function WithdrawForm({
|
|
|
60409
61632
|
] })
|
|
60410
61633
|
] })
|
|
60411
61634
|
] }),
|
|
60412
|
-
|
|
60413
|
-
"div",
|
|
60414
|
-
{
|
|
60415
|
-
className: "uf-flex uf-items-start uf-gap-2.5 uf-p-3 uf-rounded-xl",
|
|
60416
|
-
style: { backgroundColor: colors2.card, border: `1px solid ${colors2.border}` },
|
|
60417
|
-
children: [
|
|
60418
|
-
/* @__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 } }),
|
|
60419
|
-
/* @__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." })
|
|
60420
|
-
]
|
|
60421
|
-
}
|
|
60422
|
-
),
|
|
60423
|
-
isWalletMatch && connectedWalletName ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
61635
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60424
61636
|
"button",
|
|
60425
61637
|
{
|
|
60426
61638
|
type: "button",
|
|
60427
61639
|
onClick: handleWithdraw,
|
|
60428
|
-
disabled: !isFormValid ||
|
|
61640
|
+
disabled: !isFormValid || isSubmitting || !selectedToken || !selectedChain,
|
|
60429
61641
|
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",
|
|
60430
61642
|
style: {
|
|
60431
61643
|
backgroundColor: colors2.primary,
|
|
@@ -60434,40 +61646,20 @@ function WithdrawForm({
|
|
|
60434
61646
|
borderRadius: components.button.borderRadius,
|
|
60435
61647
|
border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
|
|
60436
61648
|
},
|
|
60437
|
-
children: isSubmitting ? /* @__PURE__ */ (0,
|
|
60438
|
-
/* @__PURE__ */ (0,
|
|
61649
|
+
children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
|
|
61650
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
|
|
60439
61651
|
"Processing..."
|
|
60440
|
-
] }) : isOverBalance ? /* @__PURE__ */ (0,
|
|
60441
|
-
/* @__PURE__ */ (0,
|
|
60442
|
-
|
|
60443
|
-
connectedWalletName
|
|
61652
|
+
] }) : 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: [
|
|
61653
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Wallet, { className: "uf-w-4 uf-h-4" }),
|
|
61654
|
+
t8.withdraw
|
|
60444
61655
|
] })
|
|
60445
61656
|
}
|
|
60446
|
-
) : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
60447
|
-
"button",
|
|
60448
|
-
{
|
|
60449
|
-
type: "button",
|
|
60450
|
-
onClick: handleWithdraw,
|
|
60451
|
-
disabled: !isFormValid || !canWithdraw || isSubmitting || !selectedToken || !selectedChain,
|
|
60452
|
-
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",
|
|
60453
|
-
style: {
|
|
60454
|
-
backgroundColor: colors2.primary,
|
|
60455
|
-
color: colors2.primaryForeground,
|
|
60456
|
-
fontFamily: fonts.medium,
|
|
60457
|
-
borderRadius: components.button.borderRadius,
|
|
60458
|
-
border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
|
|
60459
|
-
},
|
|
60460
|
-
children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("span", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2", children: [
|
|
60461
|
-
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
|
|
60462
|
-
"Processing..."
|
|
60463
|
-
] }) : isOverBalance ? "Insufficient balance" : isBelowMinimum ? "Minimum amount not met" : submitError ? "Withdrawal failed. Try again" : t8.withdraw
|
|
60464
|
-
}
|
|
60465
61657
|
),
|
|
60466
|
-
/* @__PURE__ */ (0,
|
|
60467
|
-
/* @__PURE__ */ (0,
|
|
60468
|
-
/* @__PURE__ */ (0,
|
|
61658
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-text-xs uf-pt-1", children: [
|
|
61659
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { children: footerLeft }),
|
|
61660
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(DepositFooterLinks, { onGlossaryClick: () => setGlossaryOpen(true) })
|
|
60469
61661
|
] }),
|
|
60470
|
-
/* @__PURE__ */ (0,
|
|
61662
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60471
61663
|
GlossaryModal,
|
|
60472
61664
|
{
|
|
60473
61665
|
open: glossaryOpen,
|
|
@@ -60513,7 +61705,7 @@ function WithdrawExecutionItem({
|
|
|
60513
61705
|
return "$0.00";
|
|
60514
61706
|
}
|
|
60515
61707
|
};
|
|
60516
|
-
return /* @__PURE__ */ (0,
|
|
61708
|
+
return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
|
|
60517
61709
|
"button",
|
|
60518
61710
|
{
|
|
60519
61711
|
onClick,
|
|
@@ -60524,8 +61716,8 @@ function WithdrawExecutionItem({
|
|
|
60524
61716
|
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
60525
61717
|
},
|
|
60526
61718
|
children: [
|
|
60527
|
-
/* @__PURE__ */ (0,
|
|
60528
|
-
/* @__PURE__ */ (0,
|
|
61719
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "uf-relative uf-flex-shrink-0 uf-w-9 uf-h-9", children: [
|
|
61720
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60529
61721
|
"img",
|
|
60530
61722
|
{
|
|
60531
61723
|
src: execution.destination_token_metadata?.icon_url || getIconUrl("/icons/tokens/svg/usdc.svg"),
|
|
@@ -60536,12 +61728,12 @@ function WithdrawExecutionItem({
|
|
|
60536
61728
|
className: "uf-rounded-full uf-w-9 uf-h-9"
|
|
60537
61729
|
}
|
|
60538
61730
|
),
|
|
60539
|
-
isPending ? /* @__PURE__ */ (0,
|
|
61731
|
+
isPending ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60540
61732
|
"div",
|
|
60541
61733
|
{
|
|
60542
61734
|
className: "uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-rounded-full uf-p-0.5",
|
|
60543
61735
|
style: { backgroundColor: colors2.warning },
|
|
60544
|
-
children: /* @__PURE__ */ (0,
|
|
61736
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60545
61737
|
"svg",
|
|
60546
61738
|
{
|
|
60547
61739
|
width: "10",
|
|
@@ -60549,7 +61741,7 @@ function WithdrawExecutionItem({
|
|
|
60549
61741
|
viewBox: "0 0 12 12",
|
|
60550
61742
|
fill: "none",
|
|
60551
61743
|
className: "uf-animate-spin uf-block",
|
|
60552
|
-
children: /* @__PURE__ */ (0,
|
|
61744
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60553
61745
|
"path",
|
|
60554
61746
|
{
|
|
60555
61747
|
d: "M6 1V3M6 9V11M1 6H3M9 6H11M2.5 2.5L4 4M8 8L9.5 9.5M2.5 9.5L4 8M8 4L9.5 2.5",
|
|
@@ -60561,12 +61753,12 @@ function WithdrawExecutionItem({
|
|
|
60561
61753
|
}
|
|
60562
61754
|
)
|
|
60563
61755
|
}
|
|
60564
|
-
) : /* @__PURE__ */ (0,
|
|
61756
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60565
61757
|
"div",
|
|
60566
61758
|
{
|
|
60567
61759
|
className: "uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-rounded-full uf-p-0.5",
|
|
60568
61760
|
style: { backgroundColor: colors2.success },
|
|
60569
|
-
children: /* @__PURE__ */ (0,
|
|
61761
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60570
61762
|
"svg",
|
|
60571
61763
|
{
|
|
60572
61764
|
width: "10",
|
|
@@ -60574,7 +61766,7 @@ function WithdrawExecutionItem({
|
|
|
60574
61766
|
viewBox: "0 0 12 12",
|
|
60575
61767
|
fill: "none",
|
|
60576
61768
|
className: "uf-block",
|
|
60577
|
-
children: /* @__PURE__ */ (0,
|
|
61769
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60578
61770
|
"path",
|
|
60579
61771
|
{
|
|
60580
61772
|
d: "M10 3L4.5 8.5L2 6",
|
|
@@ -60589,8 +61781,8 @@ function WithdrawExecutionItem({
|
|
|
60589
61781
|
}
|
|
60590
61782
|
)
|
|
60591
61783
|
] }),
|
|
60592
|
-
/* @__PURE__ */ (0,
|
|
60593
|
-
/* @__PURE__ */ (0,
|
|
61784
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "uf-flex-1 uf-min-w-0", children: [
|
|
61785
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60594
61786
|
"h3",
|
|
60595
61787
|
{
|
|
60596
61788
|
className: "uf-font-medium uf-text-sm uf-leading-tight",
|
|
@@ -60601,7 +61793,7 @@ function WithdrawExecutionItem({
|
|
|
60601
61793
|
children: isPending ? "Withdrawal processing" : "Withdrawal completed"
|
|
60602
61794
|
}
|
|
60603
61795
|
),
|
|
60604
|
-
/* @__PURE__ */ (0,
|
|
61796
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60605
61797
|
"p",
|
|
60606
61798
|
{
|
|
60607
61799
|
className: "uf-text-xs uf-leading-tight",
|
|
@@ -60613,7 +61805,7 @@ function WithdrawExecutionItem({
|
|
|
60613
61805
|
}
|
|
60614
61806
|
)
|
|
60615
61807
|
] }),
|
|
60616
|
-
/* @__PURE__ */ (0,
|
|
61808
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60617
61809
|
"span",
|
|
60618
61810
|
{
|
|
60619
61811
|
className: "uf-font-medium uf-text-sm uf-flex-shrink-0",
|
|
@@ -60624,7 +61816,7 @@ function WithdrawExecutionItem({
|
|
|
60624
61816
|
children: formatUsdAmount2(execution.source_amount_usd || "0")
|
|
60625
61817
|
}
|
|
60626
61818
|
),
|
|
60627
|
-
/* @__PURE__ */ (0,
|
|
61819
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60628
61820
|
ChevronRight,
|
|
60629
61821
|
{
|
|
60630
61822
|
className: "uf-w-4 uf-h-4 uf-flex-shrink-0",
|
|
@@ -60647,9 +61839,9 @@ function WithdrawConfirmingView({
|
|
|
60647
61839
|
onViewTracker
|
|
60648
61840
|
}) {
|
|
60649
61841
|
const { colors: colors2, fonts, components } = useTheme();
|
|
60650
|
-
const [showButton, setShowButton] = (0,
|
|
61842
|
+
const [showButton, setShowButton] = (0, import_react31.useState)(false);
|
|
60651
61843
|
const latestExecution = executions.length > 0 ? executions[executions.length - 1] : null;
|
|
60652
|
-
(0,
|
|
61844
|
+
(0, import_react31.useEffect)(() => {
|
|
60653
61845
|
if (latestExecution) return;
|
|
60654
61846
|
const timer = setTimeout(() => setShowButton(true), SHOW_BUTTON_DELAY_MS);
|
|
60655
61847
|
return () => clearTimeout(timer);
|
|
@@ -60657,11 +61849,11 @@ function WithdrawConfirmingView({
|
|
|
60657
61849
|
const btnRadius = components.button.borderRadius;
|
|
60658
61850
|
const btnBorder = `${components.button.borderWidth}px solid ${components.button.borderColor}`;
|
|
60659
61851
|
if (latestExecution) {
|
|
60660
|
-
return /* @__PURE__ */ (0,
|
|
60661
|
-
/* @__PURE__ */ (0,
|
|
60662
|
-
/* @__PURE__ */ (0,
|
|
60663
|
-
/* @__PURE__ */ (0,
|
|
60664
|
-
/* @__PURE__ */ (0,
|
|
61852
|
+
return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
|
|
61853
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)(DepositHeader, { title: "Withdrawal Details", showClose: true, onClose }),
|
|
61854
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)(DepositDetailContent, { execution: latestExecution, variant: "withdraw" }),
|
|
61855
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "uf-flex uf-gap-2 uf-px-2 uf-pt-2", children: [
|
|
61856
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
60665
61857
|
"button",
|
|
60666
61858
|
{
|
|
60667
61859
|
type: "button",
|
|
@@ -60677,7 +61869,7 @@ function WithdrawConfirmingView({
|
|
|
60677
61869
|
children: "Withdrawal History"
|
|
60678
61870
|
}
|
|
60679
61871
|
),
|
|
60680
|
-
/* @__PURE__ */ (0,
|
|
61872
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
60681
61873
|
"button",
|
|
60682
61874
|
{
|
|
60683
61875
|
type: "button",
|
|
@@ -60694,7 +61886,7 @@ function WithdrawConfirmingView({
|
|
|
60694
61886
|
}
|
|
60695
61887
|
)
|
|
60696
61888
|
] }),
|
|
60697
|
-
/* @__PURE__ */ (0,
|
|
61889
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
60698
61890
|
PoweredByUnifold,
|
|
60699
61891
|
{
|
|
60700
61892
|
color: colors2.foregroundMuted,
|
|
@@ -60703,15 +61895,15 @@ function WithdrawConfirmingView({
|
|
|
60703
61895
|
) })
|
|
60704
61896
|
] });
|
|
60705
61897
|
}
|
|
60706
|
-
return /* @__PURE__ */ (0,
|
|
60707
|
-
/* @__PURE__ */ (0,
|
|
60708
|
-
/* @__PURE__ */ (0,
|
|
60709
|
-
/* @__PURE__ */ (0,
|
|
61898
|
+
return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
|
|
61899
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)(DepositHeader, { title: "Withdrawal Status", showClose: true, onClose }),
|
|
61900
|
+
/* @__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: [
|
|
61901
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
60710
61902
|
"div",
|
|
60711
61903
|
{
|
|
60712
61904
|
className: "uf-w-20 uf-h-20 uf-rounded-full uf-flex uf-items-center uf-justify-center uf-mb-6",
|
|
60713
61905
|
style: { backgroundColor: `${colors2.primary}20` },
|
|
60714
|
-
children: /* @__PURE__ */ (0,
|
|
61906
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
60715
61907
|
"svg",
|
|
60716
61908
|
{
|
|
60717
61909
|
width: "40",
|
|
@@ -60719,7 +61911,7 @@ function WithdrawConfirmingView({
|
|
|
60719
61911
|
viewBox: "0 0 24 24",
|
|
60720
61912
|
fill: "none",
|
|
60721
61913
|
className: "uf-animate-spin",
|
|
60722
|
-
children: /* @__PURE__ */ (0,
|
|
61914
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
60723
61915
|
"path",
|
|
60724
61916
|
{
|
|
60725
61917
|
d: "M21 12a9 9 0 1 1-6.22-8.56",
|
|
@@ -60732,7 +61924,7 @@ function WithdrawConfirmingView({
|
|
|
60732
61924
|
)
|
|
60733
61925
|
}
|
|
60734
61926
|
),
|
|
60735
|
-
/* @__PURE__ */ (0,
|
|
61927
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
60736
61928
|
"h3",
|
|
60737
61929
|
{
|
|
60738
61930
|
className: "uf-text-xl uf-mb-2",
|
|
@@ -60740,7 +61932,7 @@ function WithdrawConfirmingView({
|
|
|
60740
61932
|
children: "Checking Withdrawal"
|
|
60741
61933
|
}
|
|
60742
61934
|
),
|
|
60743
|
-
/* @__PURE__ */ (0,
|
|
61935
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
|
|
60744
61936
|
"p",
|
|
60745
61937
|
{
|
|
60746
61938
|
className: "uf-text-sm uf-text-center",
|
|
@@ -60756,7 +61948,7 @@ function WithdrawConfirmingView({
|
|
|
60756
61948
|
}
|
|
60757
61949
|
)
|
|
60758
61950
|
] }),
|
|
60759
|
-
showButton && /* @__PURE__ */ (0,
|
|
61951
|
+
showButton && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "uf-px-1 uf-pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
60760
61952
|
"button",
|
|
60761
61953
|
{
|
|
60762
61954
|
type: "button",
|
|
@@ -60772,7 +61964,7 @@ function WithdrawConfirmingView({
|
|
|
60772
61964
|
children: "Withdrawal History"
|
|
60773
61965
|
}
|
|
60774
61966
|
) }),
|
|
60775
|
-
/* @__PURE__ */ (0,
|
|
61967
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
60776
61968
|
PoweredByUnifold,
|
|
60777
61969
|
{
|
|
60778
61970
|
color: colors2.foregroundMuted,
|
|
@@ -60802,14 +61994,14 @@ function WithdrawModal({
|
|
|
60802
61994
|
hideOverlay = false
|
|
60803
61995
|
}) {
|
|
60804
61996
|
const { colors: colors2, fonts, components } = useTheme();
|
|
60805
|
-
const [containerEl, setContainerEl] = (0,
|
|
60806
|
-
const containerCallbackRef = (0,
|
|
61997
|
+
const [containerEl, setContainerEl] = (0, import_react28.useState)(null);
|
|
61998
|
+
const containerCallbackRef = (0, import_react28.useCallback)((el) => {
|
|
60807
61999
|
setContainerEl(el);
|
|
60808
62000
|
}, []);
|
|
60809
|
-
const [resolvedTheme, setResolvedTheme] = (0,
|
|
62001
|
+
const [resolvedTheme, setResolvedTheme] = (0, import_react28.useState)(
|
|
60810
62002
|
theme === "auto" ? "dark" : theme
|
|
60811
62003
|
);
|
|
60812
|
-
(0,
|
|
62004
|
+
(0, import_react28.useEffect)(() => {
|
|
60813
62005
|
if (theme === "auto") {
|
|
60814
62006
|
const mq = window.matchMedia("(prefers-color-scheme: dark)");
|
|
60815
62007
|
setResolvedTheme(mq.matches ? "dark" : "light");
|
|
@@ -60838,28 +62030,12 @@ function WithdrawModal({
|
|
|
60838
62030
|
publishableKey,
|
|
60839
62031
|
enabled: open
|
|
60840
62032
|
});
|
|
60841
|
-
const [selectedToken, setSelectedToken] = (0,
|
|
60842
|
-
const [selectedChain, setSelectedChain] = (0,
|
|
60843
|
-
const [
|
|
60844
|
-
const
|
|
60845
|
-
const
|
|
60846
|
-
(0,
|
|
60847
|
-
if (!senderAddress || !open) {
|
|
60848
|
-
setDetectedWallet(null);
|
|
60849
|
-
return;
|
|
60850
|
-
}
|
|
60851
|
-
let cancelled = false;
|
|
60852
|
-
detectBrowserWallet(sourceChainType, senderAddress).then((wallet) => {
|
|
60853
|
-
if (!cancelled) setDetectedWallet(wallet);
|
|
60854
|
-
});
|
|
60855
|
-
return () => {
|
|
60856
|
-
cancelled = true;
|
|
60857
|
-
};
|
|
60858
|
-
}, [senderAddress, sourceChainType, open]);
|
|
60859
|
-
const [view, setView] = (0, import_react27.useState)("form");
|
|
60860
|
-
const [withdrawDepositWalletId, setWithdrawDepositWalletId] = (0, import_react27.useState)();
|
|
60861
|
-
const [selectedExecution, setSelectedExecution] = (0, import_react27.useState)(null);
|
|
60862
|
-
const [submittedTxInfo, setSubmittedTxInfo] = (0, import_react27.useState)(null);
|
|
62033
|
+
const [selectedToken, setSelectedToken] = (0, import_react28.useState)(null);
|
|
62034
|
+
const [selectedChain, setSelectedChain] = (0, import_react28.useState)(null);
|
|
62035
|
+
const [view, setView] = (0, import_react28.useState)("form");
|
|
62036
|
+
const [withdrawDepositWalletId, setWithdrawDepositWalletId] = (0, import_react28.useState)();
|
|
62037
|
+
const [selectedExecution, setSelectedExecution] = (0, import_react28.useState)(null);
|
|
62038
|
+
const [submittedTxInfo, setSubmittedTxInfo] = (0, import_react28.useState)(null);
|
|
60863
62039
|
const { executions: realtimeExecutions } = useWithdrawPolling({
|
|
60864
62040
|
userId: externalUserId,
|
|
60865
62041
|
publishableKey,
|
|
@@ -60874,7 +62050,7 @@ function WithdrawModal({
|
|
|
60874
62050
|
refetchInterval: view === "tracker" || view === "detail" ? 5e3 : 15e3
|
|
60875
62051
|
});
|
|
60876
62052
|
const allWithdrawals = allWithdrawalsData?.data ?? [];
|
|
60877
|
-
const handleDepositWalletCreation = (0,
|
|
62053
|
+
const handleDepositWalletCreation = (0, import_react28.useCallback)(async (params) => {
|
|
60878
62054
|
const { data: wallets } = await createDepositAddress(
|
|
60879
62055
|
{
|
|
60880
62056
|
external_user_id: externalUserId,
|
|
@@ -60893,11 +62069,11 @@ function WithdrawModal({
|
|
|
60893
62069
|
setWithdrawDepositWalletId(depositWallet.id);
|
|
60894
62070
|
return depositWallet;
|
|
60895
62071
|
}, [externalUserId, publishableKey, sourceChainType]);
|
|
60896
|
-
const handleWithdrawSubmitted = (0,
|
|
62072
|
+
const handleWithdrawSubmitted = (0, import_react28.useCallback)((txInfo) => {
|
|
60897
62073
|
setSubmittedTxInfo(txInfo);
|
|
60898
62074
|
setView("confirming");
|
|
60899
62075
|
}, []);
|
|
60900
|
-
(0,
|
|
62076
|
+
(0, import_react28.useEffect)(() => {
|
|
60901
62077
|
if (!destinationTokens.length || selectedToken) return;
|
|
60902
62078
|
const first = destinationTokens[0];
|
|
60903
62079
|
if (first?.chains.length > 0) {
|
|
@@ -60905,8 +62081,8 @@ function WithdrawModal({
|
|
|
60905
62081
|
setSelectedChain(first.chains[0]);
|
|
60906
62082
|
}
|
|
60907
62083
|
}, [destinationTokens, selectedToken]);
|
|
60908
|
-
const resetViewTimeoutRef = (0,
|
|
60909
|
-
const handleClose = (0,
|
|
62084
|
+
const resetViewTimeoutRef = (0, import_react28.useRef)(null);
|
|
62085
|
+
const handleClose = (0, import_react28.useCallback)(() => {
|
|
60910
62086
|
onOpenChange(false);
|
|
60911
62087
|
if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
|
|
60912
62088
|
resetViewTimeoutRef.current = setTimeout(() => {
|
|
@@ -60919,7 +62095,7 @@ function WithdrawModal({
|
|
|
60919
62095
|
resetViewTimeoutRef.current = null;
|
|
60920
62096
|
}, 200);
|
|
60921
62097
|
}, [onOpenChange]);
|
|
60922
|
-
(0,
|
|
62098
|
+
(0, import_react28.useLayoutEffect)(() => {
|
|
60923
62099
|
if (!open) return;
|
|
60924
62100
|
if (resetViewTimeoutRef.current) {
|
|
60925
62101
|
clearTimeout(resetViewTimeoutRef.current);
|
|
@@ -60932,26 +62108,25 @@ function WithdrawModal({
|
|
|
60932
62108
|
setSubmittedTxInfo(null);
|
|
60933
62109
|
setWithdrawDepositWalletId(void 0);
|
|
60934
62110
|
}, [open]);
|
|
60935
|
-
(0,
|
|
62111
|
+
(0, import_react28.useEffect)(() => () => {
|
|
60936
62112
|
if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
|
|
60937
62113
|
}, []);
|
|
60938
|
-
const handleTokenSymbolChange = (0,
|
|
62114
|
+
const handleTokenSymbolChange = (0, import_react28.useCallback)((symbol) => {
|
|
60939
62115
|
const tok = destinationTokens.find((t11) => t11.symbol === symbol);
|
|
60940
62116
|
if (tok) {
|
|
60941
62117
|
setSelectedToken(tok);
|
|
60942
62118
|
if (tok.chains.length > 0) setSelectedChain(tok.chains[0]);
|
|
60943
62119
|
}
|
|
60944
62120
|
}, [destinationTokens]);
|
|
60945
|
-
const handleChainKeyChange = (0,
|
|
62121
|
+
const handleChainKeyChange = (0, import_react28.useCallback)((chainKey) => {
|
|
60946
62122
|
if (!selectedToken) return;
|
|
60947
62123
|
const chain = selectedToken.chains.find((c) => getChainKey5(c.chain_id, c.chain_type) === chainKey);
|
|
60948
62124
|
if (chain) setSelectedChain(chain);
|
|
60949
62125
|
}, [selectedToken]);
|
|
60950
62126
|
const isSourceSupported = sourceValidation?.isSupported ?? null;
|
|
60951
|
-
const canWithdraw = !!onWithdraw || isWalletMatch;
|
|
60952
62127
|
const isAnyLoading = tokensLoading || isCheckingSourceToken;
|
|
60953
|
-
const withdrawPoweredByFooter = /* @__PURE__ */ (0,
|
|
60954
|
-
return /* @__PURE__ */ (0,
|
|
62128
|
+
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" }) });
|
|
62129
|
+
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)(
|
|
60955
62130
|
DialogContent2,
|
|
60956
62131
|
{
|
|
60957
62132
|
ref: hideOverlay ? containerCallbackRef : void 0,
|
|
@@ -60960,7 +62135,7 @@ function WithdrawModal({
|
|
|
60960
62135
|
style: { backgroundColor: colors2.background },
|
|
60961
62136
|
onPointerDownOutside: (e) => e.preventDefault(),
|
|
60962
62137
|
onInteractOutside: (e) => e.preventDefault(),
|
|
60963
|
-
children: /* @__PURE__ */ (0,
|
|
62138
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ThemeStyleInjector, { children: view === "confirming" && submittedTxInfo ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
60964
62139
|
WithdrawConfirmingView,
|
|
60965
62140
|
{
|
|
60966
62141
|
txInfo: submittedTxInfo,
|
|
@@ -60968,18 +62143,18 @@ function WithdrawModal({
|
|
|
60968
62143
|
onClose: handleClose,
|
|
60969
62144
|
onViewTracker: () => setView("tracker")
|
|
60970
62145
|
}
|
|
60971
|
-
) : view === "detail" && selectedExecution ? /* @__PURE__ */ (0,
|
|
60972
|
-
/* @__PURE__ */ (0,
|
|
62146
|
+
) : view === "detail" && selectedExecution ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
|
|
62147
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(DepositHeader, { title: "Withdrawal Details", showBack: true, showClose: !hideOverlay, onBack: () => {
|
|
60973
62148
|
setSelectedExecution(null);
|
|
60974
62149
|
setView("tracker");
|
|
60975
62150
|
}, onClose: handleClose }),
|
|
60976
|
-
/* @__PURE__ */ (0,
|
|
62151
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(DepositDetailContent, { execution: selectedExecution, variant: "withdraw" }),
|
|
60977
62152
|
withdrawPoweredByFooter
|
|
60978
62153
|
] }) : view === "tracker" ? (
|
|
60979
62154
|
/* ---------- Tracker view: execution list ---------- */
|
|
60980
|
-
/* @__PURE__ */ (0,
|
|
60981
|
-
/* @__PURE__ */ (0,
|
|
60982
|
-
/* @__PURE__ */ (0,
|
|
62155
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
|
|
62156
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(DepositHeader, { title: "Withdrawal History", showBack: true, showClose: !hideOverlay, onBack: () => setView("form"), onClose: handleClose }),
|
|
62157
|
+
/* @__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)(
|
|
60983
62158
|
WithdrawExecutionItem,
|
|
60984
62159
|
{
|
|
60985
62160
|
execution: ex,
|
|
@@ -60989,20 +62164,20 @@ function WithdrawModal({
|
|
|
60989
62164
|
}
|
|
60990
62165
|
},
|
|
60991
62166
|
ex.id
|
|
60992
|
-
)) }),
|
|
62167
|
+
)) }) }),
|
|
60993
62168
|
withdrawPoweredByFooter
|
|
60994
62169
|
] })
|
|
60995
62170
|
) : (
|
|
60996
62171
|
/* ---------- Form view (default) ---------- */
|
|
60997
|
-
/* @__PURE__ */ (0,
|
|
60998
|
-
/* @__PURE__ */ (0,
|
|
60999
|
-
/* @__PURE__ */ (0,
|
|
61000
|
-
isAnyLoading ? /* @__PURE__ */ (0,
|
|
61001
|
-
/* @__PURE__ */ (0,
|
|
61002
|
-
/* @__PURE__ */ (0,
|
|
61003
|
-
/* @__PURE__ */ (0,
|
|
61004
|
-
] }) : /* @__PURE__ */ (0,
|
|
61005
|
-
/* @__PURE__ */ (0,
|
|
62172
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
|
|
62173
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(DepositHeader, { title: modalTitle || t9.title, showClose: !hideOverlay, onClose: handleClose }),
|
|
62174
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-3", children: [
|
|
62175
|
+
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: [
|
|
62176
|
+
/* @__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" }) }),
|
|
62177
|
+
/* @__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" }),
|
|
62178
|
+
/* @__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 })
|
|
62179
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
|
|
62180
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
61006
62181
|
WithdrawDoubleInput,
|
|
61007
62182
|
{
|
|
61008
62183
|
tokens: destinationTokens,
|
|
@@ -61013,7 +62188,7 @@ function WithdrawModal({
|
|
|
61013
62188
|
isLoading: tokensLoading
|
|
61014
62189
|
}
|
|
61015
62190
|
),
|
|
61016
|
-
/* @__PURE__ */ (0,
|
|
62191
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
61017
62192
|
WithdrawForm,
|
|
61018
62193
|
{
|
|
61019
62194
|
publishableKey,
|
|
@@ -61029,26 +62204,23 @@ function WithdrawModal({
|
|
|
61029
62204
|
estimatedProcessingTime: sourceValidation?.estimatedProcessingTime ?? null,
|
|
61030
62205
|
maxSlippagePercent: sourceValidation?.maxSlippagePercent ?? null,
|
|
61031
62206
|
priceImpactPercent: sourceValidation?.priceImpactPercent ?? null,
|
|
61032
|
-
|
|
62207
|
+
senderAddress,
|
|
61033
62208
|
sourceChainId,
|
|
61034
62209
|
sourceTokenAddress,
|
|
61035
|
-
isWalletMatch,
|
|
61036
|
-
connectedWalletName,
|
|
61037
|
-
canWithdraw,
|
|
61038
62210
|
onWithdraw,
|
|
61039
62211
|
onWithdrawError,
|
|
61040
62212
|
onDepositWalletCreation: handleDepositWalletCreation,
|
|
61041
62213
|
onWithdrawSubmitted: handleWithdrawSubmitted,
|
|
61042
|
-
footerLeft: /* @__PURE__ */ (0,
|
|
62214
|
+
footerLeft: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
|
|
61043
62215
|
"button",
|
|
61044
62216
|
{
|
|
61045
62217
|
onClick: () => setView("tracker"),
|
|
61046
62218
|
className: "uf-flex uf-items-center uf-gap-1 uf-transition-colors hover:uf-opacity-70",
|
|
61047
62219
|
style: { color: colors2.foregroundMuted },
|
|
61048
62220
|
children: [
|
|
61049
|
-
/* @__PURE__ */ (0,
|
|
62221
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Clock, { className: "uf-w-3.5 uf-h-3.5" }),
|
|
61050
62222
|
"Withdrawal History",
|
|
61051
|
-
/* @__PURE__ */ (0,
|
|
62223
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ChevronRight, { className: "uf-w-3 uf-h-3" })
|
|
61052
62224
|
]
|
|
61053
62225
|
}
|
|
61054
62226
|
)
|
|
@@ -61072,6 +62244,10 @@ function UnifoldProvider2({
|
|
|
61072
62244
|
const [depositConfig, setDepositConfig] = (0, import_react.useState)(
|
|
61073
62245
|
null
|
|
61074
62246
|
);
|
|
62247
|
+
const [isCheckoutOpen, setIsCheckoutOpen] = (0, import_react.useState)(false);
|
|
62248
|
+
const [checkoutConfig, setCheckoutConfig] = (0, import_react.useState)(
|
|
62249
|
+
null
|
|
62250
|
+
);
|
|
61075
62251
|
const [isWithdrawOpen, setIsWithdrawOpen] = (0, import_react.useState)(false);
|
|
61076
62252
|
const [withdrawConfig, setWithdrawConfig] = (0, import_react.useState)(
|
|
61077
62253
|
null
|
|
@@ -61171,6 +62347,75 @@ function UnifoldProvider2({
|
|
|
61171
62347
|
depositPromiseRef.current = null;
|
|
61172
62348
|
}
|
|
61173
62349
|
}, [depositConfig]);
|
|
62350
|
+
const checkoutPromiseRef = import_react.default.useRef(null);
|
|
62351
|
+
const checkoutConfigRef = import_react.default.useRef(null);
|
|
62352
|
+
checkoutConfigRef.current = checkoutConfig;
|
|
62353
|
+
const checkoutCloseTimeoutRef = import_react.default.useRef(null);
|
|
62354
|
+
const checkoutCloseGuardRef = import_react.default.useRef(false);
|
|
62355
|
+
const beginCheckout = (0, import_react.useCallback)((config2) => {
|
|
62356
|
+
if (checkoutCloseTimeoutRef.current) {
|
|
62357
|
+
clearTimeout(checkoutCloseTimeoutRef.current);
|
|
62358
|
+
checkoutCloseTimeoutRef.current = null;
|
|
62359
|
+
}
|
|
62360
|
+
checkoutCloseGuardRef.current = false;
|
|
62361
|
+
if (checkoutPromiseRef.current) {
|
|
62362
|
+
console.warn("[UnifoldProvider] A checkout is already in progress. Cancelling previous checkout.");
|
|
62363
|
+
checkoutPromiseRef.current.reject({
|
|
62364
|
+
message: "Checkout cancelled - new checkout started",
|
|
62365
|
+
code: "CHECKOUT_SUPERSEDED"
|
|
62366
|
+
});
|
|
62367
|
+
checkoutPromiseRef.current = null;
|
|
62368
|
+
}
|
|
62369
|
+
const promise = new Promise((resolve, reject) => {
|
|
62370
|
+
checkoutPromiseRef.current = { resolve, reject };
|
|
62371
|
+
});
|
|
62372
|
+
promise.catch(() => {
|
|
62373
|
+
});
|
|
62374
|
+
setCheckoutConfig(config2);
|
|
62375
|
+
setIsCheckoutOpen(true);
|
|
62376
|
+
return promise;
|
|
62377
|
+
}, []);
|
|
62378
|
+
const closeCheckout = (0, import_react.useCallback)(() => {
|
|
62379
|
+
if (checkoutCloseGuardRef.current) {
|
|
62380
|
+
return;
|
|
62381
|
+
}
|
|
62382
|
+
checkoutCloseGuardRef.current = true;
|
|
62383
|
+
const promiseToReject = checkoutPromiseRef.current;
|
|
62384
|
+
checkoutPromiseRef.current = null;
|
|
62385
|
+
if (checkoutConfigRef.current?.onClose) {
|
|
62386
|
+
checkoutConfigRef.current.onClose();
|
|
62387
|
+
}
|
|
62388
|
+
if (promiseToReject) {
|
|
62389
|
+
promiseToReject.reject({
|
|
62390
|
+
message: "Checkout cancelled by user",
|
|
62391
|
+
code: "CHECKOUT_CANCELLED"
|
|
62392
|
+
});
|
|
62393
|
+
}
|
|
62394
|
+
setIsCheckoutOpen(false);
|
|
62395
|
+
checkoutCloseTimeoutRef.current = setTimeout(() => {
|
|
62396
|
+
setCheckoutConfig(null);
|
|
62397
|
+
checkoutCloseTimeoutRef.current = null;
|
|
62398
|
+
}, 200);
|
|
62399
|
+
}, []);
|
|
62400
|
+
const handleCheckoutSuccess = (0, import_react.useCallback)((data) => {
|
|
62401
|
+
if (checkoutConfig?.onSuccess) {
|
|
62402
|
+
checkoutConfig.onSuccess(data);
|
|
62403
|
+
}
|
|
62404
|
+
if (checkoutPromiseRef.current) {
|
|
62405
|
+
checkoutPromiseRef.current.resolve(data);
|
|
62406
|
+
checkoutPromiseRef.current = null;
|
|
62407
|
+
}
|
|
62408
|
+
}, [checkoutConfig]);
|
|
62409
|
+
const handleCheckoutError = (0, import_react.useCallback)((error) => {
|
|
62410
|
+
console.error("[UnifoldProvider] Checkout error:", error);
|
|
62411
|
+
if (checkoutConfig?.onError) {
|
|
62412
|
+
checkoutConfig.onError(error);
|
|
62413
|
+
}
|
|
62414
|
+
if (checkoutPromiseRef.current) {
|
|
62415
|
+
checkoutPromiseRef.current.reject(error);
|
|
62416
|
+
checkoutPromiseRef.current = null;
|
|
62417
|
+
}
|
|
62418
|
+
}, [checkoutConfig]);
|
|
61174
62419
|
const beginWithdraw = (0, import_react.useCallback)((config2) => {
|
|
61175
62420
|
if (withdrawCloseTimeoutRef.current) {
|
|
61176
62421
|
clearTimeout(withdrawCloseTimeoutRef.current);
|
|
@@ -61239,16 +62484,16 @@ function UnifoldProvider2({
|
|
|
61239
62484
|
() => ({
|
|
61240
62485
|
beginDeposit,
|
|
61241
62486
|
closeDeposit,
|
|
61242
|
-
|
|
61243
|
-
|
|
62487
|
+
beginCheckout,
|
|
62488
|
+
closeCheckout,
|
|
61244
62489
|
beginWithdraw,
|
|
61245
62490
|
closeWithdraw,
|
|
61246
62491
|
handleWithdrawSuccess,
|
|
61247
62492
|
handleWithdrawError
|
|
61248
62493
|
}),
|
|
61249
|
-
[beginDeposit, closeDeposit,
|
|
62494
|
+
[beginDeposit, closeDeposit, beginCheckout, closeCheckout, beginWithdraw, closeWithdraw, handleWithdrawSuccess, handleWithdrawError]
|
|
61250
62495
|
);
|
|
61251
|
-
return /* @__PURE__ */ (0,
|
|
62496
|
+
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)(
|
|
61252
62497
|
ThemeProvider,
|
|
61253
62498
|
{
|
|
61254
62499
|
mode: resolvedTheme,
|
|
@@ -61259,7 +62504,20 @@ function UnifoldProvider2({
|
|
|
61259
62504
|
components: config?.components,
|
|
61260
62505
|
children: [
|
|
61261
62506
|
children,
|
|
61262
|
-
|
|
62507
|
+
checkoutConfig && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
|
|
62508
|
+
CheckoutModal,
|
|
62509
|
+
{
|
|
62510
|
+
open: isCheckoutOpen,
|
|
62511
|
+
onOpenChange: closeCheckout,
|
|
62512
|
+
clientSecret: checkoutConfig.clientSecret,
|
|
62513
|
+
publishableKey,
|
|
62514
|
+
enableConnectWallet: config?.enableConnectWallet,
|
|
62515
|
+
theme: resolvedTheme,
|
|
62516
|
+
onCheckoutSuccess: handleCheckoutSuccess,
|
|
62517
|
+
onCheckoutError: handleCheckoutError
|
|
62518
|
+
}
|
|
62519
|
+
),
|
|
62520
|
+
withdrawConfig && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
|
|
61263
62521
|
WithdrawModal,
|
|
61264
62522
|
{
|
|
61265
62523
|
open: isWithdrawOpen,
|
|
@@ -61279,7 +62537,7 @@ function UnifoldProvider2({
|
|
|
61279
62537
|
theme: resolvedTheme
|
|
61280
62538
|
}
|
|
61281
62539
|
),
|
|
61282
|
-
depositConfig && /* @__PURE__ */ (0,
|
|
62540
|
+
depositConfig && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
|
|
61283
62541
|
DepositModal,
|
|
61284
62542
|
{
|
|
61285
62543
|
open: isOpen,
|
|
@@ -61330,6 +62588,9 @@ function useUnifold2() {
|
|
|
61330
62588
|
beginDeposit: () => Promise.reject(new Error("SSR not supported")),
|
|
61331
62589
|
closeDeposit: () => {
|
|
61332
62590
|
},
|
|
62591
|
+
beginCheckout: () => Promise.reject(new Error("SSR not supported")),
|
|
62592
|
+
closeCheckout: () => {
|
|
62593
|
+
},
|
|
61333
62594
|
beginWithdraw: () => Promise.reject(new Error("SSR not supported")),
|
|
61334
62595
|
closeWithdraw: () => {
|
|
61335
62596
|
}
|
|
@@ -61342,15 +62603,17 @@ function useUnifold2() {
|
|
|
61342
62603
|
publishableKey: baseContext.publishableKey,
|
|
61343
62604
|
beginDeposit: connectContext.beginDeposit,
|
|
61344
62605
|
closeDeposit: connectContext.closeDeposit,
|
|
62606
|
+
beginCheckout: connectContext.beginCheckout,
|
|
62607
|
+
closeCheckout: connectContext.closeCheckout,
|
|
61345
62608
|
beginWithdraw: connectContext.beginWithdraw,
|
|
61346
62609
|
closeWithdraw: connectContext.closeWithdraw
|
|
61347
62610
|
};
|
|
61348
62611
|
}
|
|
61349
62612
|
|
|
61350
62613
|
// src/unifold.tsx
|
|
61351
|
-
var UnifoldBridge = (0,
|
|
62614
|
+
var UnifoldBridge = (0, import_react33.forwardRef)((_, ref) => {
|
|
61352
62615
|
const { beginDeposit, closeDeposit, beginWithdraw, closeWithdraw } = useUnifold2();
|
|
61353
|
-
(0,
|
|
62616
|
+
(0, import_react33.useImperativeHandle)(ref, () => ({ beginDeposit, closeDeposit, beginWithdraw, closeWithdraw }), [
|
|
61354
62617
|
beginDeposit,
|
|
61355
62618
|
closeDeposit,
|
|
61356
62619
|
beginWithdraw,
|
|
@@ -61359,7 +62622,7 @@ var UnifoldBridge = (0, import_react32.forwardRef)((_, ref) => {
|
|
|
61359
62622
|
return null;
|
|
61360
62623
|
});
|
|
61361
62624
|
UnifoldBridge.displayName = "UnifoldBridge";
|
|
61362
|
-
var RenderErrorBoundary = class extends
|
|
62625
|
+
var RenderErrorBoundary = class extends import_react33.Component {
|
|
61363
62626
|
constructor() {
|
|
61364
62627
|
super(...arguments);
|
|
61365
62628
|
this.state = { hasError: false };
|
|
@@ -61433,13 +62696,13 @@ function createUnifold(publishableKey, config) {
|
|
|
61433
62696
|
};
|
|
61434
62697
|
try {
|
|
61435
62698
|
root.render(
|
|
61436
|
-
|
|
62699
|
+
import_react33.default.createElement(
|
|
61437
62700
|
RenderErrorBoundary,
|
|
61438
62701
|
{ onError: handleRenderError },
|
|
61439
|
-
|
|
62702
|
+
import_react33.default.createElement(
|
|
61440
62703
|
UnifoldProvider2,
|
|
61441
62704
|
{ publishableKey, config },
|
|
61442
|
-
|
|
62705
|
+
import_react33.default.createElement(UnifoldBridge, { ref: refCallback })
|
|
61443
62706
|
)
|
|
61444
62707
|
)
|
|
61445
62708
|
);
|
|
@@ -61464,6 +62727,7 @@ lucide-react/dist/esm/Icon.js:
|
|
|
61464
62727
|
lucide-react/dist/esm/createLucideIcon.js:
|
|
61465
62728
|
lucide-react/dist/esm/icons/arrow-left-right.js:
|
|
61466
62729
|
lucide-react/dist/esm/icons/arrow-left.js:
|
|
62730
|
+
lucide-react/dist/esm/icons/arrow-right.js:
|
|
61467
62731
|
lucide-react/dist/esm/icons/arrow-up-down.js:
|
|
61468
62732
|
lucide-react/dist/esm/icons/check.js:
|
|
61469
62733
|
lucide-react/dist/esm/icons/chevron-down.js:
|