@unifold/ui-web 0.1.42 → 0.1.43
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +1514 -290
- package/dist/index.mjs +1514 -290
- 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" }],
|
|
@@ -43579,6 +43585,119 @@ async function sendSolanaTransaction(request, publishableKey) {
|
|
|
43579
43585
|
}
|
|
43580
43586
|
return response.json();
|
|
43581
43587
|
}
|
|
43588
|
+
async function retrievePaymentIntent(clientSecret, publishableKey) {
|
|
43589
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
43590
|
+
validatePublishableKey(pk);
|
|
43591
|
+
const response = await fetch(
|
|
43592
|
+
`${API_BASE_URL}/v1/public/payment_intents/retrieve`,
|
|
43593
|
+
{
|
|
43594
|
+
method: "POST",
|
|
43595
|
+
headers: {
|
|
43596
|
+
accept: "application/json",
|
|
43597
|
+
"x-publishable-key": pk,
|
|
43598
|
+
"Content-Type": "application/json"
|
|
43599
|
+
},
|
|
43600
|
+
body: JSON.stringify({ client_secret: clientSecret })
|
|
43601
|
+
}
|
|
43602
|
+
);
|
|
43603
|
+
if (!response.ok) {
|
|
43604
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
43605
|
+
throw new Error(
|
|
43606
|
+
`Failed to retrieve payment intent: ${error.message || response.statusText}`
|
|
43607
|
+
);
|
|
43608
|
+
}
|
|
43609
|
+
return response.json();
|
|
43610
|
+
}
|
|
43611
|
+
async function listPaymentIntentExecutions(clientSecret, publishableKey) {
|
|
43612
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
43613
|
+
validatePublishableKey(pk);
|
|
43614
|
+
const response = await fetch(
|
|
43615
|
+
`${API_BASE_URL}/v1/public/payment_intents/executions`,
|
|
43616
|
+
{
|
|
43617
|
+
method: "POST",
|
|
43618
|
+
headers: {
|
|
43619
|
+
accept: "application/json",
|
|
43620
|
+
"x-publishable-key": pk,
|
|
43621
|
+
"Content-Type": "application/json"
|
|
43622
|
+
},
|
|
43623
|
+
body: JSON.stringify({ client_secret: clientSecret })
|
|
43624
|
+
}
|
|
43625
|
+
);
|
|
43626
|
+
if (!response.ok) {
|
|
43627
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
43628
|
+
throw new Error(
|
|
43629
|
+
`Failed to list payment intent executions: ${error.message || response.statusText}`
|
|
43630
|
+
);
|
|
43631
|
+
}
|
|
43632
|
+
return response.json();
|
|
43633
|
+
}
|
|
43634
|
+
async function getDepositQuote(request, publishableKey) {
|
|
43635
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
43636
|
+
validatePublishableKey(pk);
|
|
43637
|
+
const response = await fetch(`${API_BASE_URL}/v1/public/quotes`, {
|
|
43638
|
+
method: "POST",
|
|
43639
|
+
headers: {
|
|
43640
|
+
accept: "application/json",
|
|
43641
|
+
"x-publishable-key": pk,
|
|
43642
|
+
"Content-Type": "application/json"
|
|
43643
|
+
},
|
|
43644
|
+
body: JSON.stringify(request)
|
|
43645
|
+
});
|
|
43646
|
+
if (!response.ok) {
|
|
43647
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
43648
|
+
throw new Error(
|
|
43649
|
+
`Failed to get deposit quote: ${error.message || response.statusText}`
|
|
43650
|
+
);
|
|
43651
|
+
}
|
|
43652
|
+
const json = await response.json();
|
|
43653
|
+
return json.data;
|
|
43654
|
+
}
|
|
43655
|
+
async function buildHypercoreTransaction(request, publishableKey) {
|
|
43656
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
43657
|
+
validatePublishableKey(pk);
|
|
43658
|
+
const response = await fetch(
|
|
43659
|
+
`${API_BASE_URL}/v1/public/transactions/hypercore/build`,
|
|
43660
|
+
{
|
|
43661
|
+
method: "POST",
|
|
43662
|
+
headers: {
|
|
43663
|
+
accept: "application/json",
|
|
43664
|
+
"x-publishable-key": pk,
|
|
43665
|
+
"Content-Type": "application/json"
|
|
43666
|
+
},
|
|
43667
|
+
body: JSON.stringify(request)
|
|
43668
|
+
}
|
|
43669
|
+
);
|
|
43670
|
+
if (!response.ok) {
|
|
43671
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
43672
|
+
throw new Error(
|
|
43673
|
+
`Failed to build HyperCore transaction: ${error.message || response.statusText}`
|
|
43674
|
+
);
|
|
43675
|
+
}
|
|
43676
|
+
return response.json();
|
|
43677
|
+
}
|
|
43678
|
+
async function sendHypercoreTransaction(request, publishableKey) {
|
|
43679
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
43680
|
+
validatePublishableKey(pk);
|
|
43681
|
+
const response = await fetch(
|
|
43682
|
+
`${API_BASE_URL}/v1/public/transactions/hypercore/send`,
|
|
43683
|
+
{
|
|
43684
|
+
method: "POST",
|
|
43685
|
+
headers: {
|
|
43686
|
+
accept: "application/json",
|
|
43687
|
+
"x-publishable-key": pk,
|
|
43688
|
+
"Content-Type": "application/json"
|
|
43689
|
+
},
|
|
43690
|
+
body: JSON.stringify(request)
|
|
43691
|
+
}
|
|
43692
|
+
);
|
|
43693
|
+
if (!response.ok) {
|
|
43694
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
43695
|
+
throw new Error(
|
|
43696
|
+
`Failed to send HyperCore transaction: ${error.message || response.statusText}`
|
|
43697
|
+
);
|
|
43698
|
+
}
|
|
43699
|
+
return response.json();
|
|
43700
|
+
}
|
|
43582
43701
|
var REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy");
|
|
43583
43702
|
var use = React25[" use ".trim().toString()];
|
|
43584
43703
|
function isPromiseLike(value) {
|
|
@@ -48935,6 +49054,7 @@ var CUTOFF_BUFFER_MS = 6e4;
|
|
|
48935
49054
|
function useDepositPolling({
|
|
48936
49055
|
userId,
|
|
48937
49056
|
publishableKey,
|
|
49057
|
+
clientSecret,
|
|
48938
49058
|
depositConfirmationMode = "auto_ui",
|
|
48939
49059
|
depositWalletId,
|
|
48940
49060
|
enabled = true,
|
|
@@ -48992,11 +49112,12 @@ function useDepositPolling({
|
|
|
48992
49112
|
depositWalletId
|
|
48993
49113
|
]);
|
|
48994
49114
|
(0, import_react10.useEffect)(() => {
|
|
48995
|
-
if (!
|
|
49115
|
+
if (!enabled) return;
|
|
49116
|
+
if (!clientSecret && !userId) return;
|
|
48996
49117
|
const modalOpenedAt = modalOpenedAtRef.current;
|
|
48997
49118
|
const poll = async () => {
|
|
48998
49119
|
try {
|
|
48999
|
-
const response = await queryExecutions(userId, publishableKey, ActionType.Deposit);
|
|
49120
|
+
const response = clientSecret ? await listPaymentIntentExecutions(clientSecret, publishableKey) : await queryExecutions(userId, publishableKey, ActionType.Deposit);
|
|
49000
49121
|
const cutoff = new Date(modalOpenedAt.getTime() - CUTOFF_BUFFER_MS);
|
|
49001
49122
|
const sortedExecutions = [...response.data].sort((a, b) => {
|
|
49002
49123
|
const timeA = a.created_at ? new Date(a.created_at).getTime() : 0;
|
|
@@ -49080,7 +49201,7 @@ function useDepositPolling({
|
|
|
49080
49201
|
clearInterval(pollInterval);
|
|
49081
49202
|
setIsPolling(false);
|
|
49082
49203
|
};
|
|
49083
|
-
}, [userId, publishableKey, enabled]);
|
|
49204
|
+
}, [userId, publishableKey, clientSecret, enabled]);
|
|
49084
49205
|
(0, import_react10.useEffect)(() => {
|
|
49085
49206
|
if (!pollingEnabled || !depositWalletId) return;
|
|
49086
49207
|
const triggerPoll = async () => {
|
|
@@ -55589,6 +55710,7 @@ var parseChainKey = (chainKey) => {
|
|
|
55589
55710
|
function TransferCryptoSingleInput({
|
|
55590
55711
|
userId,
|
|
55591
55712
|
publishableKey,
|
|
55713
|
+
clientSecret,
|
|
55592
55714
|
recipientAddress,
|
|
55593
55715
|
destinationChainType,
|
|
55594
55716
|
destinationChainId,
|
|
@@ -55601,7 +55723,9 @@ function TransferCryptoSingleInput({
|
|
|
55601
55723
|
onExecutionsChange,
|
|
55602
55724
|
onDepositSuccess,
|
|
55603
55725
|
onDepositError,
|
|
55604
|
-
wallets: externalWallets
|
|
55726
|
+
wallets: externalWallets,
|
|
55727
|
+
onSourceTokenChange,
|
|
55728
|
+
checkoutQuote
|
|
55605
55729
|
}) {
|
|
55606
55730
|
const { themeClass, colors: colors2, fonts, components } = useTheme();
|
|
55607
55731
|
const isDarkMode = themeClass.includes("uf-dark");
|
|
@@ -55668,12 +55792,28 @@ function TransferCryptoSingleInput({
|
|
|
55668
55792
|
} = useDepositPolling({
|
|
55669
55793
|
userId,
|
|
55670
55794
|
publishableKey,
|
|
55795
|
+
clientSecret,
|
|
55671
55796
|
depositConfirmationMode,
|
|
55672
55797
|
depositWalletId: currentWallet?.id,
|
|
55673
55798
|
enabled: true,
|
|
55674
55799
|
onDepositSuccess,
|
|
55675
55800
|
onDepositError
|
|
55676
55801
|
});
|
|
55802
|
+
(0, import_react16.useEffect)(() => {
|
|
55803
|
+
if (!onSourceTokenChange || !token || !chain || !initialSelectionDone) return;
|
|
55804
|
+
const { chainType, chainId } = parseChainKey(chain);
|
|
55805
|
+
const matchedToken = supportedTokens.find((t11) => t11.symbol === token);
|
|
55806
|
+
const matchedChain = matchedToken?.chains.find(
|
|
55807
|
+
(c) => c.chain_type === chainType && c.chain_id === chainId
|
|
55808
|
+
);
|
|
55809
|
+
onSourceTokenChange({
|
|
55810
|
+
symbol: token,
|
|
55811
|
+
chainType,
|
|
55812
|
+
chainId,
|
|
55813
|
+
tokenAddress: matchedChain?.token_address ?? "",
|
|
55814
|
+
minimumDepositAmountUsd: matchedChain?.minimum_deposit_amount_usd ?? 0
|
|
55815
|
+
});
|
|
55816
|
+
}, [token, chain, initialSelectionDone, onSourceTokenChange, supportedTokens]);
|
|
55677
55817
|
(0, import_react16.useEffect)(() => {
|
|
55678
55818
|
if (onExecutionsChange) {
|
|
55679
55819
|
onExecutionsChange(depositExecutions);
|
|
@@ -55820,6 +55960,53 @@ function TransferCryptoSingleInput({
|
|
|
55820
55960
|
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { children: "Retrying automatically every 5 seconds..." })
|
|
55821
55961
|
] })
|
|
55822
55962
|
] }),
|
|
55963
|
+
checkoutQuote && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
55964
|
+
"div",
|
|
55965
|
+
{
|
|
55966
|
+
className: "uf-rounded-xl uf-px-3 uf-py-2 uf-flex uf-items-center uf-justify-between",
|
|
55967
|
+
style: {
|
|
55968
|
+
backgroundColor: components.card.backgroundColor,
|
|
55969
|
+
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`,
|
|
55970
|
+
borderRadius: components.card.borderRadius
|
|
55971
|
+
},
|
|
55972
|
+
children: [
|
|
55973
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
|
|
55974
|
+
"span",
|
|
55975
|
+
{
|
|
55976
|
+
className: "uf-text-xs",
|
|
55977
|
+
style: { color: components.card.subtitleColor, fontFamily: fonts.regular },
|
|
55978
|
+
children: "You send"
|
|
55979
|
+
}
|
|
55980
|
+
),
|
|
55981
|
+
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
55982
|
+
"span",
|
|
55983
|
+
{
|
|
55984
|
+
className: "uf-text-sm uf-font-semibold",
|
|
55985
|
+
style: { color: components.card.titleColor, fontFamily: fonts.semibold },
|
|
55986
|
+
children: [
|
|
55987
|
+
(Number(checkoutQuote.sourceAmount) / 10 ** checkoutQuote.sourceTokenDecimals).toFixed(
|
|
55988
|
+
Math.min(checkoutQuote.sourceTokenDecimals, 6)
|
|
55989
|
+
),
|
|
55990
|
+
" ",
|
|
55991
|
+
checkoutQuote.sourceTokenSymbol,
|
|
55992
|
+
checkoutQuote.sourceAmountUsd && /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
|
|
55993
|
+
"span",
|
|
55994
|
+
{
|
|
55995
|
+
className: "uf-text-xs uf-font-normal uf-ml-1.5",
|
|
55996
|
+
style: { color: components.card.subtitleColor },
|
|
55997
|
+
children: [
|
|
55998
|
+
"($",
|
|
55999
|
+
checkoutQuote.sourceAmountUsd,
|
|
56000
|
+
")"
|
|
56001
|
+
]
|
|
56002
|
+
}
|
|
56003
|
+
)
|
|
56004
|
+
]
|
|
56005
|
+
}
|
|
56006
|
+
)
|
|
56007
|
+
]
|
|
56008
|
+
}
|
|
56009
|
+
),
|
|
55823
56010
|
/* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-pt-2", children: [
|
|
55824
56011
|
/* @__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
56012
|
/* @__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 +56828,16 @@ function SelectTokenView({
|
|
|
56641
56828
|
onBack,
|
|
56642
56829
|
onClose,
|
|
56643
56830
|
onDisconnectWallet,
|
|
56644
|
-
isDisconnectingWallet = false
|
|
56831
|
+
isDisconnectingWallet = false,
|
|
56832
|
+
checkoutAmountUsd,
|
|
56833
|
+
checkoutReceivedUsd
|
|
56645
56834
|
}) {
|
|
56646
56835
|
const { colors: colors2, fonts, components } = useTheme();
|
|
56836
|
+
const isCheckout = !!checkoutAmountUsd;
|
|
56837
|
+
const headerSubtitle = isCheckout ? parseFloat(checkoutReceivedUsd || "0") > 0 ? `$${checkoutReceivedUsd} / $${checkoutAmountUsd} received` : `Amount due: $${checkoutAmountUsd}` : formatBalanceDisplay(
|
|
56838
|
+
`$${totalBalanceUsd || "0.00"}`,
|
|
56839
|
+
projectName
|
|
56840
|
+
);
|
|
56647
56841
|
return /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
|
|
56648
56842
|
"div",
|
|
56649
56843
|
{
|
|
@@ -56652,11 +56846,8 @@ function SelectTokenView({
|
|
|
56652
56846
|
/* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
|
|
56653
56847
|
DepositHeader,
|
|
56654
56848
|
{
|
|
56655
|
-
title: "Select Token",
|
|
56656
|
-
subtitle:
|
|
56657
|
-
`$${totalBalanceUsd || "0.00"}`,
|
|
56658
|
-
projectName
|
|
56659
|
-
),
|
|
56849
|
+
title: isCheckout ? "Select Token" : "Select Token",
|
|
56850
|
+
subtitle: headerSubtitle,
|
|
56660
56851
|
showBack: true,
|
|
56661
56852
|
onBack,
|
|
56662
56853
|
onClose
|
|
@@ -56884,10 +57075,19 @@ function EnterAmountView({
|
|
|
56884
57075
|
onReview,
|
|
56885
57076
|
onBack,
|
|
56886
57077
|
onClose,
|
|
56887
|
-
quickSelectMode
|
|
57078
|
+
quickSelectMode,
|
|
57079
|
+
checkoutAmountUsd,
|
|
57080
|
+
checkoutReceivedUsd
|
|
56888
57081
|
}) {
|
|
56889
57082
|
const { colors: colors2, fonts, components } = useTheme();
|
|
57083
|
+
const isCheckout = !!checkoutAmountUsd;
|
|
56890
57084
|
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}`;
|
|
57085
|
+
const checkoutRemainingUsd = isCheckout ? Math.max(
|
|
57086
|
+
parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0"),
|
|
57087
|
+
0
|
|
57088
|
+
).toFixed(2) : null;
|
|
57089
|
+
const headerTitle = isCheckout ? `Pay $${checkoutRemainingUsd}` : "Enter Amount";
|
|
57090
|
+
const headerSubtitle = isCheckout ? parseFloat(checkoutReceivedUsd || "0") > 0 ? `$${checkoutReceivedUsd} / $${checkoutAmountUsd} received` : null : balanceSubtitle;
|
|
56891
57091
|
const usePercentageChips = quickSelectMode === "percentage" && maxUsdAmount > 0;
|
|
56892
57092
|
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
57093
|
return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
@@ -56901,14 +57101,27 @@ function EnterAmountView({
|
|
|
56901
57101
|
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
56902
57102
|
DepositHeader,
|
|
56903
57103
|
{
|
|
56904
|
-
title:
|
|
56905
|
-
subtitle:
|
|
57104
|
+
title: headerTitle,
|
|
57105
|
+
subtitle: headerSubtitle ?? void 0,
|
|
56906
57106
|
showBack: true,
|
|
56907
57107
|
onBack,
|
|
56908
57108
|
onClose
|
|
56909
57109
|
}
|
|
56910
57110
|
),
|
|
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.
|
|
57111
|
+
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: [
|
|
57112
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)(WalletWithNetworkBadge, { walletInfo: walletInfoProp }),
|
|
57113
|
+
isCheckout && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
57114
|
+
"span",
|
|
57115
|
+
{
|
|
57116
|
+
className: "uf-text-xs",
|
|
57117
|
+
style: {
|
|
57118
|
+
color: colors2.foregroundMuted,
|
|
57119
|
+
fontFamily: fonts.regular
|
|
57120
|
+
},
|
|
57121
|
+
children: balanceSubtitle
|
|
57122
|
+
}
|
|
57123
|
+
)
|
|
57124
|
+
] }) }) : null,
|
|
56912
57125
|
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "uf-flex uf-min-h-0 uf-flex-1 uf-flex-col", children: [
|
|
56913
57126
|
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "uf-min-h-0 uf-flex-1", children: [
|
|
56914
57127
|
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "uf-text-center uf-py-8", children: [
|
|
@@ -56931,7 +57144,9 @@ function EnterAmountView({
|
|
|
56931
57144
|
inputMode: "decimal",
|
|
56932
57145
|
placeholder: "0",
|
|
56933
57146
|
value: amountUsd,
|
|
57147
|
+
readOnly: isCheckout,
|
|
56934
57148
|
onChange: (e) => {
|
|
57149
|
+
if (isCheckout) return;
|
|
56935
57150
|
const value = e.target.value;
|
|
56936
57151
|
if (value === "" || /^\d*\.?\d*$/.test(value)) {
|
|
56937
57152
|
const decimalIndex = value.indexOf(".");
|
|
@@ -56942,7 +57157,7 @@ function EnterAmountView({
|
|
|
56942
57157
|
onAmountChange(value);
|
|
56943
57158
|
}
|
|
56944
57159
|
},
|
|
56945
|
-
className:
|
|
57160
|
+
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
57161
|
style: {
|
|
56947
57162
|
fontSize: `${Math.max(3.75 - (amountUsd || "0").length * 0.15, 2)}rem`,
|
|
56948
57163
|
color: components.input.textColor,
|
|
@@ -56964,7 +57179,7 @@ function EnterAmountView({
|
|
|
56964
57179
|
}
|
|
56965
57180
|
)
|
|
56966
57181
|
] }),
|
|
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: [
|
|
57182
|
+
!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
57183
|
PERCENT_QUICK_AMOUNTS.map((pct) => /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
56969
57184
|
"button",
|
|
56970
57185
|
{
|
|
@@ -57033,7 +57248,46 @@ function EnterAmountView({
|
|
|
57033
57248
|
}
|
|
57034
57249
|
)
|
|
57035
57250
|
] }) }),
|
|
57036
|
-
tokenChainDetails && tokenChainDetails.minimum_deposit_amount_usd > 0 && /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
57251
|
+
tokenChainDetails && tokenChainDetails.minimum_deposit_amount_usd > 0 && (isCheckout && checkoutAmountUsd && inputUsdNum > parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0") + 5e-3 ? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
57252
|
+
"div",
|
|
57253
|
+
{
|
|
57254
|
+
className: "uf-rounded-lg uf-px-3 uf-py-2 uf-mb-3 uf-text-center",
|
|
57255
|
+
style: {
|
|
57256
|
+
backgroundColor: colors2.warning + "15",
|
|
57257
|
+
border: `1px solid ${colors2.warning}30`,
|
|
57258
|
+
borderRadius: components.card.borderRadius,
|
|
57259
|
+
animation: "uf-fadeSlideIn 0.4s ease-out"
|
|
57260
|
+
},
|
|
57261
|
+
children: [
|
|
57262
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
57263
|
+
"div",
|
|
57264
|
+
{
|
|
57265
|
+
className: "uf-text-xs uf-font-medium",
|
|
57266
|
+
style: { color: colors2.warning, fontFamily: fonts.medium },
|
|
57267
|
+
children: [
|
|
57268
|
+
"Minimum for ",
|
|
57269
|
+
selectedToken.symbol,
|
|
57270
|
+
" on ",
|
|
57271
|
+
selectedToken.chain_name,
|
|
57272
|
+
" is $",
|
|
57273
|
+
tokenChainDetails.minimum_deposit_amount_usd.toFixed(2)
|
|
57274
|
+
]
|
|
57275
|
+
}
|
|
57276
|
+
),
|
|
57277
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
57278
|
+
"div",
|
|
57279
|
+
{
|
|
57280
|
+
className: "uf-text-xs uf-mt-0.5",
|
|
57281
|
+
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
57282
|
+
children: [
|
|
57283
|
+
"Amount adjusted from remaining $",
|
|
57284
|
+
(parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0")).toFixed(2)
|
|
57285
|
+
]
|
|
57286
|
+
}
|
|
57287
|
+
)
|
|
57288
|
+
]
|
|
57289
|
+
}
|
|
57290
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
57037
57291
|
"div",
|
|
57038
57292
|
{
|
|
57039
57293
|
className: "uf-text-center uf-text-xs uf-mb-3",
|
|
@@ -57043,7 +57297,7 @@ function EnterAmountView({
|
|
|
57043
57297
|
tokenChainDetails.minimum_deposit_amount_usd.toFixed(2)
|
|
57044
57298
|
]
|
|
57045
57299
|
}
|
|
57046
|
-
),
|
|
57300
|
+
)),
|
|
57047
57301
|
inputUsdNum > 0 && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(import_jsx_runtime65.Fragment, { children: inputUsdNum > maxUsdAmount ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
57048
57302
|
"div",
|
|
57049
57303
|
{
|
|
@@ -57058,7 +57312,44 @@ function EnterAmountView({
|
|
|
57058
57312
|
style: { color: colors2.error },
|
|
57059
57313
|
children: error
|
|
57060
57314
|
}
|
|
57061
|
-
) })
|
|
57315
|
+
) }),
|
|
57316
|
+
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: [
|
|
57317
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "uf-relative", children: [
|
|
57318
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
57319
|
+
"img",
|
|
57320
|
+
{
|
|
57321
|
+
src: selectedToken.icon_url,
|
|
57322
|
+
alt: selectedToken.symbol,
|
|
57323
|
+
width: 20,
|
|
57324
|
+
height: 20,
|
|
57325
|
+
className: "uf-w-5 uf-h-5 uf-rounded-full"
|
|
57326
|
+
}
|
|
57327
|
+
),
|
|
57328
|
+
selectedToken.chain_icon_url && /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
57329
|
+
"img",
|
|
57330
|
+
{
|
|
57331
|
+
src: selectedToken.chain_icon_url,
|
|
57332
|
+
alt: selectedToken.chain_name,
|
|
57333
|
+
width: 10,
|
|
57334
|
+
height: 10,
|
|
57335
|
+
className: "uf-w-2.5 uf-h-2.5 uf-rounded-full uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-border",
|
|
57336
|
+
style: { borderColor: colors2.background }
|
|
57337
|
+
}
|
|
57338
|
+
)
|
|
57339
|
+
] }),
|
|
57340
|
+
/* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
|
|
57341
|
+
"span",
|
|
57342
|
+
{
|
|
57343
|
+
className: "uf-text-xs",
|
|
57344
|
+
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
57345
|
+
children: [
|
|
57346
|
+
selectedToken.symbol,
|
|
57347
|
+
" on ",
|
|
57348
|
+
selectedToken.chain_name
|
|
57349
|
+
]
|
|
57350
|
+
}
|
|
57351
|
+
)
|
|
57352
|
+
] })
|
|
57062
57353
|
] }),
|
|
57063
57354
|
/* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "uf-shrink-0 uf-pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
|
|
57064
57355
|
"button",
|
|
@@ -57082,6 +57373,18 @@ function EnterAmountView({
|
|
|
57082
57373
|
}
|
|
57083
57374
|
);
|
|
57084
57375
|
}
|
|
57376
|
+
var WALLET_ICONS2 = {
|
|
57377
|
+
metamask: MetamaskIcon,
|
|
57378
|
+
phantom: PhantomIcon,
|
|
57379
|
+
coinbase: CoinbaseIcon,
|
|
57380
|
+
trust: TrustIcon,
|
|
57381
|
+
rainbow: RainbowIcon,
|
|
57382
|
+
rabby: RabbyIcon,
|
|
57383
|
+
okx: OkxIcon,
|
|
57384
|
+
solflare: SolflareIcon,
|
|
57385
|
+
backpack: BackpackIcon,
|
|
57386
|
+
glow: GlowIcon
|
|
57387
|
+
};
|
|
57085
57388
|
function ReviewView({
|
|
57086
57389
|
walletInfo,
|
|
57087
57390
|
recipientAddress,
|
|
@@ -57116,30 +57419,17 @@ function ReviewView({
|
|
|
57116
57419
|
),
|
|
57117
57420
|
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "uf-flex uf-min-h-0 uf-flex-1 uf-flex-col", children: [
|
|
57118
57421
|
/* @__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
|
-
] }),
|
|
57422
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { className: "uf-text-center", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
|
|
57423
|
+
"div",
|
|
57424
|
+
{
|
|
57425
|
+
className: "uf-text-4xl uf-font-medium",
|
|
57426
|
+
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
57427
|
+
children: [
|
|
57428
|
+
"$",
|
|
57429
|
+
amountUsd || "0"
|
|
57430
|
+
]
|
|
57431
|
+
}
|
|
57432
|
+
) }),
|
|
57143
57433
|
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
|
|
57144
57434
|
"div",
|
|
57145
57435
|
{
|
|
@@ -57156,7 +57446,31 @@ function ReviewView({
|
|
|
57156
57446
|
{
|
|
57157
57447
|
className: "uf-text-sm",
|
|
57158
57448
|
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
57159
|
-
children: "
|
|
57449
|
+
children: "From"
|
|
57450
|
+
}
|
|
57451
|
+
),
|
|
57452
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
57453
|
+
WALLET_ICONS2[walletInfo.icon] && (() => {
|
|
57454
|
+
const Icon22 = WALLET_ICONS2[walletInfo.icon];
|
|
57455
|
+
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" }) });
|
|
57456
|
+
})(),
|
|
57457
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
57458
|
+
"span",
|
|
57459
|
+
{
|
|
57460
|
+
className: "uf-text-sm uf-font-medium",
|
|
57461
|
+
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
57462
|
+
children: walletInfo.name
|
|
57463
|
+
}
|
|
57464
|
+
)
|
|
57465
|
+
] })
|
|
57466
|
+
] }),
|
|
57467
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "uf-flex uf-justify-between uf-items-center", children: [
|
|
57468
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
57469
|
+
"span",
|
|
57470
|
+
{
|
|
57471
|
+
className: "uf-text-sm",
|
|
57472
|
+
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
57473
|
+
children: "You send"
|
|
57160
57474
|
}
|
|
57161
57475
|
),
|
|
57162
57476
|
/* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
@@ -57168,17 +57482,12 @@ function ReviewView({
|
|
|
57168
57482
|
className: "uf-w-5 uf-h-5 uf-rounded-full"
|
|
57169
57483
|
}
|
|
57170
57484
|
),
|
|
57171
|
-
/* @__PURE__ */ (0, import_jsx_runtime66.
|
|
57485
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
|
|
57172
57486
|
"span",
|
|
57173
57487
|
{
|
|
57174
57488
|
className: "uf-text-sm uf-font-medium",
|
|
57175
57489
|
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
57176
|
-
children:
|
|
57177
|
-
walletInfo.name,
|
|
57178
|
-
" (",
|
|
57179
|
-
truncateAddress2(walletInfo.address),
|
|
57180
|
-
")"
|
|
57181
|
-
]
|
|
57490
|
+
children: formattedTokenAmount || `$${amountUsd}`
|
|
57182
57491
|
}
|
|
57183
57492
|
)
|
|
57184
57493
|
] })
|
|
@@ -57341,7 +57650,10 @@ function ReviewView({
|
|
|
57341
57650
|
borderRadius: components.button.borderRadius,
|
|
57342
57651
|
border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
|
|
57343
57652
|
},
|
|
57344
|
-
children: isConfirming ? "
|
|
57653
|
+
children: isConfirming ? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2", children: [
|
|
57654
|
+
/* @__PURE__ */ (0, import_jsx_runtime66.jsx)(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
|
|
57655
|
+
"Confirming..."
|
|
57656
|
+
] }) : "Confirm Order"
|
|
57345
57657
|
}
|
|
57346
57658
|
) })
|
|
57347
57659
|
] })
|
|
@@ -57350,17 +57662,35 @@ function ReviewView({
|
|
|
57350
57662
|
}
|
|
57351
57663
|
);
|
|
57352
57664
|
}
|
|
57665
|
+
var SETTLE_FALLBACK_MS = 15e3;
|
|
57353
57666
|
function ConfirmingView({
|
|
57354
57667
|
isConfirming,
|
|
57355
57668
|
onClose,
|
|
57356
57669
|
executions = [],
|
|
57357
|
-
isPolling = false
|
|
57670
|
+
isPolling = false,
|
|
57671
|
+
onNewDeposit,
|
|
57672
|
+
onDone,
|
|
57673
|
+
paymentIntentStatus,
|
|
57674
|
+
amountReceivedUsd,
|
|
57675
|
+
amountReceivedUsdAtSubmission
|
|
57358
57676
|
}) {
|
|
57359
|
-
const { colors: colors2, fonts } = useTheme();
|
|
57677
|
+
const { colors: colors2, fonts, components } = useTheme();
|
|
57360
57678
|
const [containerEl, setContainerEl] = (0, import_react26.useState)(null);
|
|
57361
57679
|
const containerCallbackRef = (0, import_react26.useCallback)((el) => {
|
|
57362
57680
|
setContainerEl(el);
|
|
57363
57681
|
}, []);
|
|
57682
|
+
const [fallbackSettled, setFallbackSettled] = (0, import_react26.useState)(false);
|
|
57683
|
+
const hasExecution = executions.length > 0;
|
|
57684
|
+
const isCheckoutMode = paymentIntentStatus != null;
|
|
57685
|
+
const isPaymentComplete = paymentIntentStatus === "succeeded";
|
|
57686
|
+
const amountChanged = amountReceivedUsdAtSubmission != null && amountReceivedUsd != null && amountReceivedUsd !== amountReceivedUsdAtSubmission;
|
|
57687
|
+
const piSettled = !isCheckoutMode || isPaymentComplete || amountChanged || fallbackSettled;
|
|
57688
|
+
(0, import_react26.useEffect)(() => {
|
|
57689
|
+
if (!hasExecution || piSettled) return;
|
|
57690
|
+
const timeout = setTimeout(() => setFallbackSettled(true), SETTLE_FALLBACK_MS);
|
|
57691
|
+
return () => clearTimeout(timeout);
|
|
57692
|
+
}, [hasExecution, piSettled]);
|
|
57693
|
+
const showButtons = hasExecution && piSettled;
|
|
57364
57694
|
return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(PortalContainerProvider, { value: containerEl, children: /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
|
|
57365
57695
|
"div",
|
|
57366
57696
|
{
|
|
@@ -57373,8 +57703,8 @@ function ConfirmingView({
|
|
|
57373
57703
|
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
57374
57704
|
DepositHeader,
|
|
57375
57705
|
{
|
|
57376
|
-
title: isConfirming ? "Confirming..." : "Processing",
|
|
57377
|
-
onClose
|
|
57706
|
+
title: isConfirming ? "Confirming..." : hasExecution && isPaymentComplete ? "Payment Complete" : hasExecution ? "Deposit Received" : "Processing",
|
|
57707
|
+
onClose: isPaymentComplete && onDone ? onDone : onClose
|
|
57378
57708
|
}
|
|
57379
57709
|
),
|
|
57380
57710
|
/* @__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,12 +57731,12 @@ function ConfirmingView({
|
|
|
57401
57731
|
children: "Please confirm the transaction in your wallet"
|
|
57402
57732
|
}
|
|
57403
57733
|
)
|
|
57404
|
-
] }) : /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
|
|
57734
|
+
] }) : hasExecution ? /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
|
|
57405
57735
|
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
57406
57736
|
CircleCheck,
|
|
57407
57737
|
{
|
|
57408
57738
|
className: "uf-w-12 uf-h-12 uf-mb-4",
|
|
57409
|
-
style: { color:
|
|
57739
|
+
style: { color: "rgb(34, 197, 94)" }
|
|
57410
57740
|
}
|
|
57411
57741
|
),
|
|
57412
57742
|
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
@@ -57414,7 +57744,7 @@ function ConfirmingView({
|
|
|
57414
57744
|
{
|
|
57415
57745
|
className: "uf-text-lg uf-font-medium",
|
|
57416
57746
|
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
57417
|
-
children: "
|
|
57747
|
+
children: isPaymentComplete ? "Payment Complete" : "Deposit Received"
|
|
57418
57748
|
}
|
|
57419
57749
|
),
|
|
57420
57750
|
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
@@ -57422,13 +57752,72 @@ function ConfirmingView({
|
|
|
57422
57752
|
{
|
|
57423
57753
|
className: "uf-text-sm uf-mt-2 uf-text-center uf-px-6",
|
|
57424
57754
|
style: { color: colors2.foregroundMuted },
|
|
57425
|
-
children: "
|
|
57755
|
+
children: isPaymentComplete ? "Your payment has been fulfilled." : showButtons ? "Your deposit is being processed." : "Checking payment status..."
|
|
57426
57756
|
}
|
|
57427
|
-
)
|
|
57428
|
-
|
|
57429
|
-
|
|
57430
|
-
|
|
57431
|
-
|
|
57757
|
+
),
|
|
57758
|
+
/* @__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)(
|
|
57759
|
+
LoaderCircle,
|
|
57760
|
+
{
|
|
57761
|
+
className: "uf-w-5 uf-h-5 uf-animate-spin",
|
|
57762
|
+
style: { color: colors2.foregroundMuted }
|
|
57763
|
+
}
|
|
57764
|
+
) : isPaymentComplete && onDone ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
57765
|
+
"button",
|
|
57766
|
+
{
|
|
57767
|
+
onClick: onDone,
|
|
57768
|
+
className: "uf-w-full uf-py-3 uf-px-8 uf-text-sm uf-font-medium uf-transition-opacity hover:uf-opacity-80",
|
|
57769
|
+
style: {
|
|
57770
|
+
backgroundColor: colors2.primary,
|
|
57771
|
+
color: colors2.primaryForeground,
|
|
57772
|
+
fontFamily: fonts.medium,
|
|
57773
|
+
borderRadius: components.button.borderRadius
|
|
57774
|
+
},
|
|
57775
|
+
children: "Done"
|
|
57776
|
+
}
|
|
57777
|
+
) : onNewDeposit ? /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
|
|
57778
|
+
"button",
|
|
57779
|
+
{
|
|
57780
|
+
onClick: onNewDeposit,
|
|
57781
|
+
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",
|
|
57782
|
+
style: {
|
|
57783
|
+
backgroundColor: colors2.primary,
|
|
57784
|
+
color: colors2.primaryForeground,
|
|
57785
|
+
fontFamily: fonts.medium
|
|
57786
|
+
},
|
|
57787
|
+
children: [
|
|
57788
|
+
"Make another deposit",
|
|
57789
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)(ArrowRight, { className: "uf-w-4 uf-h-4" })
|
|
57790
|
+
]
|
|
57791
|
+
}
|
|
57792
|
+
) : null })
|
|
57793
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(import_jsx_runtime67.Fragment, { children: [
|
|
57794
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
57795
|
+
LoaderCircle,
|
|
57796
|
+
{
|
|
57797
|
+
className: "uf-w-12 uf-h-12 uf-animate-spin uf-mb-4",
|
|
57798
|
+
style: { color: colors2.primary }
|
|
57799
|
+
}
|
|
57800
|
+
),
|
|
57801
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
57802
|
+
"div",
|
|
57803
|
+
{
|
|
57804
|
+
className: "uf-text-lg uf-font-medium",
|
|
57805
|
+
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
57806
|
+
children: "Transaction Submitted"
|
|
57807
|
+
}
|
|
57808
|
+
),
|
|
57809
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
57810
|
+
"div",
|
|
57811
|
+
{
|
|
57812
|
+
className: "uf-text-sm uf-mt-2 uf-text-center uf-px-6",
|
|
57813
|
+
style: { color: colors2.foregroundMuted },
|
|
57814
|
+
children: "Waiting for your deposit to be detected..."
|
|
57815
|
+
}
|
|
57816
|
+
)
|
|
57817
|
+
] }) }),
|
|
57818
|
+
/* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
|
|
57819
|
+
DepositPollingToasts,
|
|
57820
|
+
{
|
|
57432
57821
|
executions,
|
|
57433
57822
|
isPolling,
|
|
57434
57823
|
horizontalPadding: "0"
|
|
@@ -57446,6 +57835,7 @@ function BrowserWalletModal({
|
|
|
57446
57835
|
depositWallet,
|
|
57447
57836
|
userId,
|
|
57448
57837
|
publishableKey,
|
|
57838
|
+
clientSecret,
|
|
57449
57839
|
assetCdnUrl,
|
|
57450
57840
|
projectName,
|
|
57451
57841
|
theme = "dark",
|
|
@@ -57454,7 +57844,13 @@ function BrowserWalletModal({
|
|
|
57454
57844
|
onDepositSuccess,
|
|
57455
57845
|
onDepositError,
|
|
57456
57846
|
amountQuickSelect = "percentage",
|
|
57457
|
-
onWalletDisconnect
|
|
57847
|
+
onWalletDisconnect,
|
|
57848
|
+
prefillAmountUsd,
|
|
57849
|
+
checkoutAmountUsd,
|
|
57850
|
+
checkoutReceivedUsd,
|
|
57851
|
+
onNewDeposit,
|
|
57852
|
+
onDone,
|
|
57853
|
+
paymentIntentStatus
|
|
57458
57854
|
}) {
|
|
57459
57855
|
const { colors: colors2, fonts, components } = useTheme();
|
|
57460
57856
|
const [step, setStep] = React262.useState("select-token");
|
|
@@ -57472,6 +57868,7 @@ function BrowserWalletModal({
|
|
|
57472
57868
|
const [tokenChainDetails, setTokenChainDetails] = React262.useState(null);
|
|
57473
57869
|
const [loadingTokenDetails, setLoadingTokenDetails] = React262.useState(false);
|
|
57474
57870
|
const [showTransactionDetails, setShowTransactionDetails] = React262.useState(false);
|
|
57871
|
+
const [receivedUsdAtSubmission, setReceivedUsdAtSubmission] = React262.useState(null);
|
|
57475
57872
|
const themeClass = theme === "dark" ? "uf-dark" : "";
|
|
57476
57873
|
const chainType = depositWallet.chain_type;
|
|
57477
57874
|
const recipientAddress = depositWallet.address;
|
|
@@ -57479,15 +57876,19 @@ function BrowserWalletModal({
|
|
|
57479
57876
|
const { executions: depositExecutions, isPolling } = useDepositPolling({
|
|
57480
57877
|
userId,
|
|
57481
57878
|
publishableKey,
|
|
57879
|
+
clientSecret,
|
|
57482
57880
|
enabled: open && hasSignedTransaction,
|
|
57483
57881
|
onDepositSuccess,
|
|
57484
57882
|
onDepositError
|
|
57485
57883
|
});
|
|
57884
|
+
const prevOpenRef = React262.useRef(false);
|
|
57486
57885
|
React262.useEffect(() => {
|
|
57487
|
-
|
|
57886
|
+
const wasOpen = prevOpenRef.current;
|
|
57887
|
+
prevOpenRef.current = open;
|
|
57888
|
+
if (open && !wasOpen) {
|
|
57488
57889
|
setStep("select-token");
|
|
57489
57890
|
setSelectedBalance(null);
|
|
57490
|
-
setAmountUsd("");
|
|
57891
|
+
setAmountUsd(prefillAmountUsd ?? "");
|
|
57491
57892
|
setError(null);
|
|
57492
57893
|
setIsConfirming(false);
|
|
57493
57894
|
setTokenChainDetails(null);
|
|
@@ -57495,7 +57896,15 @@ function BrowserWalletModal({
|
|
|
57495
57896
|
setHasSignedTransaction(false);
|
|
57496
57897
|
setIsDisconnectingWallet(false);
|
|
57497
57898
|
}
|
|
57498
|
-
}, [open]);
|
|
57899
|
+
}, [open, prefillAmountUsd]);
|
|
57900
|
+
React262.useEffect(() => {
|
|
57901
|
+
if (!prefillAmountUsd || !tokenChainDetails || step !== "input-amount") return;
|
|
57902
|
+
const minDeposit = tokenChainDetails.minimum_deposit_amount_usd || 0;
|
|
57903
|
+
const currentAmount = parseFloat(amountUsd) || 0;
|
|
57904
|
+
if (currentAmount > 0 && currentAmount < minDeposit) {
|
|
57905
|
+
setAmountUsd(minDeposit.toFixed(2));
|
|
57906
|
+
}
|
|
57907
|
+
}, [tokenChainDetails, step, prefillAmountUsd]);
|
|
57499
57908
|
React262.useEffect(() => {
|
|
57500
57909
|
if (step === "review") {
|
|
57501
57910
|
setShowTransactionDetails(false);
|
|
@@ -57613,7 +58022,7 @@ function BrowserWalletModal({
|
|
|
57613
58022
|
setError(null);
|
|
57614
58023
|
if (step === "input-amount") {
|
|
57615
58024
|
setStep("select-token");
|
|
57616
|
-
setAmountUsd("");
|
|
58025
|
+
setAmountUsd(prefillAmountUsd ?? "");
|
|
57617
58026
|
setTokenChainDetails(null);
|
|
57618
58027
|
} else if (step === "review") {
|
|
57619
58028
|
setStep("input-amount");
|
|
@@ -57699,7 +58108,6 @@ function BrowserWalletModal({
|
|
|
57699
58108
|
}
|
|
57700
58109
|
}
|
|
57701
58110
|
setIsConfirming(true);
|
|
57702
|
-
setStep("confirming");
|
|
57703
58111
|
setError(null);
|
|
57704
58112
|
try {
|
|
57705
58113
|
let txHash;
|
|
@@ -57717,16 +58125,17 @@ function BrowserWalletModal({
|
|
|
57717
58125
|
} else {
|
|
57718
58126
|
txHash = await sendEthereumTransaction(token, tokenAmount.toString());
|
|
57719
58127
|
}
|
|
58128
|
+
setReceivedUsdAtSubmission(checkoutReceivedUsd ?? "0");
|
|
57720
58129
|
setHasSignedTransaction(true);
|
|
57721
|
-
onSuccess?.(txHash);
|
|
57722
58130
|
setIsConfirming(false);
|
|
58131
|
+
setStep("confirming");
|
|
58132
|
+
onSuccess?.(txHash);
|
|
57723
58133
|
} catch (err) {
|
|
57724
58134
|
console.error("[BrowserWalletModal] Transaction error:", err);
|
|
57725
58135
|
const errorMessage = err instanceof Error ? err.message : "Transaction failed";
|
|
57726
58136
|
setError(errorMessage);
|
|
57727
58137
|
onError?.(err instanceof Error ? err : new Error(errorMessage));
|
|
57728
58138
|
setIsConfirming(false);
|
|
57729
|
-
setStep("review");
|
|
57730
58139
|
}
|
|
57731
58140
|
};
|
|
57732
58141
|
const sendEthereumTransaction = async (token, amountStr) => {
|
|
@@ -57975,7 +58384,9 @@ function BrowserWalletModal({
|
|
|
57975
58384
|
onBack: handleClose,
|
|
57976
58385
|
onClose: handleFullClose,
|
|
57977
58386
|
onDisconnectWallet: onWalletDisconnect ? () => void handleDisconnectFromSelectToken() : void 0,
|
|
57978
|
-
isDisconnectingWallet
|
|
58387
|
+
isDisconnectingWallet,
|
|
58388
|
+
checkoutAmountUsd,
|
|
58389
|
+
checkoutReceivedUsd
|
|
57979
58390
|
}
|
|
57980
58391
|
),
|
|
57981
58392
|
step === "input-amount" && selectedToken && selectedBalance && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
|
|
@@ -57996,7 +58407,9 @@ function BrowserWalletModal({
|
|
|
57996
58407
|
onReview: handleReview,
|
|
57997
58408
|
onBack: handleBack,
|
|
57998
58409
|
onClose: handleFullClose,
|
|
57999
|
-
quickSelectMode: amountQuickSelect
|
|
58410
|
+
quickSelectMode: amountQuickSelect,
|
|
58411
|
+
checkoutAmountUsd,
|
|
58412
|
+
checkoutReceivedUsd
|
|
58000
58413
|
}
|
|
58001
58414
|
),
|
|
58002
58415
|
step === "review" && selectedToken && /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
|
|
@@ -58025,7 +58438,12 @@ function BrowserWalletModal({
|
|
|
58025
58438
|
isConfirming,
|
|
58026
58439
|
onClose: handleFullClose,
|
|
58027
58440
|
executions: depositExecutions,
|
|
58028
|
-
isPolling
|
|
58441
|
+
isPolling,
|
|
58442
|
+
onNewDeposit,
|
|
58443
|
+
onDone,
|
|
58444
|
+
paymentIntentStatus,
|
|
58445
|
+
amountReceivedUsd: checkoutReceivedUsd,
|
|
58446
|
+
amountReceivedUsdAtSubmission: receivedUsdAtSubmission
|
|
58029
58447
|
}
|
|
58030
58448
|
)
|
|
58031
58449
|
] })
|
|
@@ -58034,7 +58452,7 @@ function BrowserWalletModal({
|
|
|
58034
58452
|
}
|
|
58035
58453
|
) });
|
|
58036
58454
|
}
|
|
58037
|
-
var
|
|
58455
|
+
var WALLET_ICONS3 = {
|
|
58038
58456
|
metamask: MetamaskIcon,
|
|
58039
58457
|
phantom: PhantomIcon,
|
|
58040
58458
|
coinbase: CoinbaseIcon,
|
|
@@ -58473,10 +58891,10 @@ function WalletSelectionModal({
|
|
|
58473
58891
|
},
|
|
58474
58892
|
children: [
|
|
58475
58893
|
/* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
|
|
58476
|
-
|
|
58894
|
+
WALLET_ICONS3[wallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
58477
58895
|
WalletIconWithNetwork,
|
|
58478
58896
|
{
|
|
58479
|
-
WalletIcon:
|
|
58897
|
+
WalletIcon: WALLET_ICONS3[wallet.id],
|
|
58480
58898
|
networks: wallet.networks,
|
|
58481
58899
|
size: 40,
|
|
58482
58900
|
className: "uf-rounded-lg"
|
|
@@ -58547,10 +58965,10 @@ function WalletSelectionModal({
|
|
|
58547
58965
|
style: { minHeight: WALLET_STEP_BODY_MIN_HEIGHT },
|
|
58548
58966
|
children: [
|
|
58549
58967
|
/* @__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:
|
|
58968
|
+
/* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-mb-2", children: WALLET_ICONS3[selectedWallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
|
|
58551
58969
|
WalletIconWithNetwork,
|
|
58552
58970
|
{
|
|
58553
|
-
WalletIcon:
|
|
58971
|
+
WalletIcon: WALLET_ICONS3[selectedWallet.id],
|
|
58554
58972
|
networks: selectedWallet.networks,
|
|
58555
58973
|
size: 48,
|
|
58556
58974
|
className: "uf-rounded-lg"
|
|
@@ -59349,6 +59767,664 @@ function DepositModal({
|
|
|
59349
59767
|
}
|
|
59350
59768
|
) });
|
|
59351
59769
|
}
|
|
59770
|
+
function usePaymentIntent(params) {
|
|
59771
|
+
const {
|
|
59772
|
+
clientSecret,
|
|
59773
|
+
publishableKey,
|
|
59774
|
+
enabled = true,
|
|
59775
|
+
pollingInterval = 5e3
|
|
59776
|
+
} = params;
|
|
59777
|
+
return useQuery({
|
|
59778
|
+
queryKey: ["unifold", "paymentIntent", clientSecret, publishableKey],
|
|
59779
|
+
queryFn: () => retrievePaymentIntent(clientSecret, publishableKey),
|
|
59780
|
+
enabled: enabled && !!clientSecret && !!publishableKey,
|
|
59781
|
+
staleTime: 0,
|
|
59782
|
+
refetchInterval: pollingInterval || false,
|
|
59783
|
+
refetchOnWindowFocus: true,
|
|
59784
|
+
retry: 3,
|
|
59785
|
+
retryDelay: (attempt) => Math.min(1e3 * 2 ** attempt, 1e4)
|
|
59786
|
+
});
|
|
59787
|
+
}
|
|
59788
|
+
function useDepositQuote(params) {
|
|
59789
|
+
const {
|
|
59790
|
+
publishableKey,
|
|
59791
|
+
sourceChainType,
|
|
59792
|
+
sourceChainId,
|
|
59793
|
+
sourceTokenAddress,
|
|
59794
|
+
destinationAmount,
|
|
59795
|
+
destinationChainType,
|
|
59796
|
+
destinationChainId,
|
|
59797
|
+
destinationTokenAddress,
|
|
59798
|
+
enabled = true
|
|
59799
|
+
} = params;
|
|
59800
|
+
const request = {
|
|
59801
|
+
source_chain_type: sourceChainType,
|
|
59802
|
+
source_chain_id: sourceChainId,
|
|
59803
|
+
source_token_address: sourceTokenAddress,
|
|
59804
|
+
destination_amount: destinationAmount,
|
|
59805
|
+
destination_chain_type: destinationChainType,
|
|
59806
|
+
destination_chain_id: destinationChainId,
|
|
59807
|
+
destination_token_address: destinationTokenAddress
|
|
59808
|
+
};
|
|
59809
|
+
return useQuery({
|
|
59810
|
+
queryKey: [
|
|
59811
|
+
"unifold",
|
|
59812
|
+
"depositQuote",
|
|
59813
|
+
sourceChainType,
|
|
59814
|
+
sourceChainId,
|
|
59815
|
+
sourceTokenAddress,
|
|
59816
|
+
destinationAmount,
|
|
59817
|
+
destinationChainType,
|
|
59818
|
+
destinationChainId,
|
|
59819
|
+
destinationTokenAddress,
|
|
59820
|
+
publishableKey
|
|
59821
|
+
],
|
|
59822
|
+
queryFn: () => getDepositQuote(request, publishableKey),
|
|
59823
|
+
enabled: enabled && !!publishableKey && !!sourceChainType && !!sourceChainId && !!sourceTokenAddress && !!destinationAmount && destinationAmount !== "0" && !!destinationChainType && !!destinationChainId && !!destinationTokenAddress,
|
|
59824
|
+
staleTime: 6e4,
|
|
59825
|
+
gcTime: 5 * 6e4,
|
|
59826
|
+
refetchOnWindowFocus: false,
|
|
59827
|
+
retry: 2,
|
|
59828
|
+
retryDelay: (attempt) => Math.min(1e3 * 2 ** attempt, 5e3)
|
|
59829
|
+
});
|
|
59830
|
+
}
|
|
59831
|
+
function mapDepositAddressesToWallets(depositAddresses, pi) {
|
|
59832
|
+
return depositAddresses.map((da, idx) => ({
|
|
59833
|
+
id: da.id,
|
|
59834
|
+
chain_type: da.chain_type,
|
|
59835
|
+
address_type: da.address_type,
|
|
59836
|
+
address: da.address,
|
|
59837
|
+
destination_chain_type: pi.destination_chain_type,
|
|
59838
|
+
destination_chain_id: pi.destination_chain_id,
|
|
59839
|
+
destination_token_address: pi.destination_token_address,
|
|
59840
|
+
recipient_address: pi.recipient_address,
|
|
59841
|
+
is_primary: idx === 0
|
|
59842
|
+
}));
|
|
59843
|
+
}
|
|
59844
|
+
function SkeletonButton2() {
|
|
59845
|
+
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: [
|
|
59846
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
|
|
59847
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "uf-bg-muted uf-rounded-lg uf-w-9 uf-h-9" }),
|
|
59848
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-space-y-1.5", children: [
|
|
59849
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "uf-h-3.5 uf-w-24 uf-bg-muted uf-rounded" }),
|
|
59850
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "uf-h-3 uf-w-32 uf-bg-muted uf-rounded" })
|
|
59851
|
+
] })
|
|
59852
|
+
] }),
|
|
59853
|
+
/* @__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" }) })
|
|
59854
|
+
] });
|
|
59855
|
+
}
|
|
59856
|
+
function CheckoutModal({
|
|
59857
|
+
open,
|
|
59858
|
+
onOpenChange,
|
|
59859
|
+
clientSecret,
|
|
59860
|
+
publishableKey,
|
|
59861
|
+
modalTitle,
|
|
59862
|
+
enableConnectWallet = false,
|
|
59863
|
+
theme = "dark",
|
|
59864
|
+
onCheckoutSuccess,
|
|
59865
|
+
onCheckoutError
|
|
59866
|
+
}) {
|
|
59867
|
+
const { colors: colors2, fonts, components } = useTheme();
|
|
59868
|
+
const [view, setView] = (0, import_react27.useState)("main");
|
|
59869
|
+
const resetViewTimeoutRef = (0, import_react27.useRef)(
|
|
59870
|
+
null
|
|
59871
|
+
);
|
|
59872
|
+
const [browserWalletModalOpen, setBrowserWalletModalOpen] = (0, import_react27.useState)(false);
|
|
59873
|
+
const [browserWalletInfo, setBrowserWalletInfo] = (0, import_react27.useState)(null);
|
|
59874
|
+
const [walletSelectionModalOpen, setWalletSelectionModalOpen] = (0, import_react27.useState)(false);
|
|
59875
|
+
const [browserWalletChainType, setBrowserWalletChainType] = (0, import_react27.useState)(() => getStoredWalletChainType());
|
|
59876
|
+
const isMobileView = useIsMobileViewport();
|
|
59877
|
+
const [resolvedTheme, setResolvedTheme] = (0, import_react27.useState)(
|
|
59878
|
+
theme === "auto" ? "dark" : theme
|
|
59879
|
+
);
|
|
59880
|
+
(0, import_react27.useEffect)(() => {
|
|
59881
|
+
if (theme === "auto") {
|
|
59882
|
+
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
59883
|
+
setResolvedTheme(mediaQuery.matches ? "dark" : "light");
|
|
59884
|
+
const handler = (e) => {
|
|
59885
|
+
setResolvedTheme(e.matches ? "dark" : "light");
|
|
59886
|
+
};
|
|
59887
|
+
mediaQuery.addEventListener("change", handler);
|
|
59888
|
+
return () => mediaQuery.removeEventListener("change", handler);
|
|
59889
|
+
} else {
|
|
59890
|
+
setResolvedTheme(theme);
|
|
59891
|
+
}
|
|
59892
|
+
}, [theme]);
|
|
59893
|
+
const themeClass = resolvedTheme === "dark" ? "uf-dark" : "";
|
|
59894
|
+
const {
|
|
59895
|
+
data: paymentIntent,
|
|
59896
|
+
isLoading: piLoading,
|
|
59897
|
+
error: piError
|
|
59898
|
+
} = usePaymentIntent({
|
|
59899
|
+
clientSecret,
|
|
59900
|
+
publishableKey,
|
|
59901
|
+
enabled: open && !!clientSecret,
|
|
59902
|
+
pollingInterval: 5e3
|
|
59903
|
+
});
|
|
59904
|
+
const { projectConfig } = useProjectConfig({
|
|
59905
|
+
publishableKey,
|
|
59906
|
+
enabled: open
|
|
59907
|
+
});
|
|
59908
|
+
const prevStatusRef = (0, import_react27.useRef)(null);
|
|
59909
|
+
(0, import_react27.useEffect)(() => {
|
|
59910
|
+
if (!paymentIntent) return;
|
|
59911
|
+
const prev = prevStatusRef.current;
|
|
59912
|
+
prevStatusRef.current = paymentIntent.status;
|
|
59913
|
+
if (prev && prev !== paymentIntent.status && paymentIntent.status === "succeeded") {
|
|
59914
|
+
if (!browserWalletModalOpen) {
|
|
59915
|
+
setView("main");
|
|
59916
|
+
}
|
|
59917
|
+
onCheckoutSuccess?.({
|
|
59918
|
+
paymentIntentId: paymentIntent.id,
|
|
59919
|
+
status: paymentIntent.status
|
|
59920
|
+
});
|
|
59921
|
+
}
|
|
59922
|
+
}, [paymentIntent, onCheckoutSuccess, browserWalletModalOpen]);
|
|
59923
|
+
const wallets = (0, import_react27.useMemo)(() => {
|
|
59924
|
+
if (!paymentIntent) return [];
|
|
59925
|
+
return mapDepositAddressesToWallets(
|
|
59926
|
+
paymentIntent.deposit_addresses,
|
|
59927
|
+
paymentIntent
|
|
59928
|
+
);
|
|
59929
|
+
}, [paymentIntent]);
|
|
59930
|
+
const formatCryptoAmount = (0, import_react27.useMemo)(() => {
|
|
59931
|
+
if (!paymentIntent) return (_) => "";
|
|
59932
|
+
const decimals = paymentIntent.destination_token_decimals ?? 6;
|
|
59933
|
+
const symbol = paymentIntent.currency.toUpperCase();
|
|
59934
|
+
return (baseUnits) => {
|
|
59935
|
+
const num = Number(baseUnits) / 10 ** decimals;
|
|
59936
|
+
const formatted = num % 1 === 0 ? num.toFixed(0) : num.toFixed(2);
|
|
59937
|
+
return `${formatted} ${symbol}`;
|
|
59938
|
+
};
|
|
59939
|
+
}, [paymentIntent]);
|
|
59940
|
+
const remainingAmountUsd = (0, import_react27.useMemo)(() => {
|
|
59941
|
+
if (!paymentIntent) return void 0;
|
|
59942
|
+
const total = parseFloat(paymentIntent.amount_usd);
|
|
59943
|
+
const received = parseFloat(paymentIntent.amount_received_usd);
|
|
59944
|
+
if (isNaN(total) || isNaN(received)) return paymentIntent.amount_usd;
|
|
59945
|
+
const remaining = total - received;
|
|
59946
|
+
return remaining > 0 ? remaining.toFixed(2) : "0.00";
|
|
59947
|
+
}, [paymentIntent]);
|
|
59948
|
+
const remainingCrypto = (0, import_react27.useMemo)(() => {
|
|
59949
|
+
if (!paymentIntent) return void 0;
|
|
59950
|
+
const total = BigInt(paymentIntent.amount);
|
|
59951
|
+
const received = BigInt(paymentIntent.amount_received);
|
|
59952
|
+
const remaining = total - received;
|
|
59953
|
+
return remaining > 0n ? remaining.toString() : "0";
|
|
59954
|
+
}, [paymentIntent]);
|
|
59955
|
+
const [selectedSource, setSelectedSource] = (0, import_react27.useState)(null);
|
|
59956
|
+
const quoteDestinationAmount = (0, import_react27.useMemo)(() => {
|
|
59957
|
+
if (!paymentIntent || !selectedSource) return "0";
|
|
59958
|
+
const remaining = BigInt(paymentIntent.amount) - BigInt(paymentIntent.amount_received);
|
|
59959
|
+
const totalBaseUnits = Number(paymentIntent.amount);
|
|
59960
|
+
const totalUsd = parseFloat(paymentIntent.amount_usd);
|
|
59961
|
+
const baseUnitsPerUsd = totalUsd > 0 ? totalBaseUnits / totalUsd : 0;
|
|
59962
|
+
const minUsd = Math.max(selectedSource.minimumDepositAmountUsd, 3);
|
|
59963
|
+
const minDepositBaseUnits = BigInt(Math.ceil(minUsd * baseUnitsPerUsd));
|
|
59964
|
+
const effective = remaining > minDepositBaseUnits ? remaining : minDepositBaseUnits;
|
|
59965
|
+
return effective > 0n ? effective.toString() : "0";
|
|
59966
|
+
}, [paymentIntent, selectedSource]);
|
|
59967
|
+
const { data: sourceQuote } = useDepositQuote({
|
|
59968
|
+
publishableKey,
|
|
59969
|
+
sourceChainType: selectedSource?.chainType ?? "",
|
|
59970
|
+
sourceChainId: selectedSource?.chainId ?? "",
|
|
59971
|
+
sourceTokenAddress: selectedSource?.tokenAddress ?? "",
|
|
59972
|
+
destinationAmount: quoteDestinationAmount,
|
|
59973
|
+
destinationChainType: paymentIntent?.destination_chain_type ?? "",
|
|
59974
|
+
destinationChainId: paymentIntent?.destination_chain_id ?? "",
|
|
59975
|
+
destinationTokenAddress: paymentIntent?.destination_token_address ?? "",
|
|
59976
|
+
enabled: open && view === "transfer" && !!paymentIntent && !!selectedSource && quoteDestinationAmount !== "0"
|
|
59977
|
+
});
|
|
59978
|
+
const handleBrowserWalletClick = (0, import_react27.useCallback)(
|
|
59979
|
+
(walletInfo) => {
|
|
59980
|
+
const walletChainType = walletInfo.type === "phantom-solana" || walletInfo.type === "solflare" || walletInfo.type === "backpack" || walletInfo.type === "glow" ? "solana" : "ethereum";
|
|
59981
|
+
setStoredWalletChainType(walletChainType);
|
|
59982
|
+
setBrowserWalletChainType(walletChainType);
|
|
59983
|
+
const matchingDepositWallet = wallets.find(
|
|
59984
|
+
(w) => w.chain_type === walletChainType
|
|
59985
|
+
);
|
|
59986
|
+
if (!matchingDepositWallet) {
|
|
59987
|
+
onCheckoutError?.({
|
|
59988
|
+
message: `Unable to pay from ${walletChainType}. Please try a different wallet.`,
|
|
59989
|
+
code: "NO_DEPOSIT_ADDRESS"
|
|
59990
|
+
});
|
|
59991
|
+
return;
|
|
59992
|
+
}
|
|
59993
|
+
setBrowserWalletInfo({
|
|
59994
|
+
...walletInfo,
|
|
59995
|
+
depositWallet: matchingDepositWallet
|
|
59996
|
+
});
|
|
59997
|
+
setBrowserWalletModalOpen(true);
|
|
59998
|
+
},
|
|
59999
|
+
[wallets, onCheckoutError]
|
|
60000
|
+
);
|
|
60001
|
+
const handleWalletConnectClick = (0, import_react27.useCallback)(() => {
|
|
60002
|
+
setWalletSelectionModalOpen(true);
|
|
60003
|
+
}, []);
|
|
60004
|
+
const handleWalletConnected = (0, import_react27.useCallback)(
|
|
60005
|
+
(walletInfo) => {
|
|
60006
|
+
const walletChainType = walletInfo.type === "phantom-solana" || walletInfo.type === "solflare" || walletInfo.type === "backpack" || walletInfo.type === "glow" ? "solana" : "ethereum";
|
|
60007
|
+
setStoredWalletChainType(walletChainType);
|
|
60008
|
+
setBrowserWalletChainType(walletChainType);
|
|
60009
|
+
const matchingDepositWallet = wallets.find(
|
|
60010
|
+
(w) => w.chain_type === walletChainType
|
|
60011
|
+
);
|
|
60012
|
+
if (!matchingDepositWallet) {
|
|
60013
|
+
onCheckoutError?.({
|
|
60014
|
+
message: `Unable to pay from ${walletChainType}. Please try a different wallet.`,
|
|
60015
|
+
code: "NO_DEPOSIT_ADDRESS"
|
|
60016
|
+
});
|
|
60017
|
+
setWalletSelectionModalOpen(false);
|
|
60018
|
+
return;
|
|
60019
|
+
}
|
|
60020
|
+
setBrowserWalletInfo({
|
|
60021
|
+
...walletInfo,
|
|
60022
|
+
depositWallet: matchingDepositWallet
|
|
60023
|
+
});
|
|
60024
|
+
setWalletSelectionModalOpen(false);
|
|
60025
|
+
setBrowserWalletModalOpen(true);
|
|
60026
|
+
},
|
|
60027
|
+
[wallets, onCheckoutError]
|
|
60028
|
+
);
|
|
60029
|
+
const handleWalletDisconnect = (0, import_react27.useCallback)(() => {
|
|
60030
|
+
setUserDisconnectedWallet(true);
|
|
60031
|
+
clearStoredWalletChainType();
|
|
60032
|
+
setBrowserWalletChainType(void 0);
|
|
60033
|
+
setBrowserWalletInfo(null);
|
|
60034
|
+
setBrowserWalletModalOpen(false);
|
|
60035
|
+
}, []);
|
|
60036
|
+
const handleClose = (0, import_react27.useCallback)(() => {
|
|
60037
|
+
onOpenChange(false);
|
|
60038
|
+
if (resetViewTimeoutRef.current) {
|
|
60039
|
+
clearTimeout(resetViewTimeoutRef.current);
|
|
60040
|
+
}
|
|
60041
|
+
resetViewTimeoutRef.current = setTimeout(() => {
|
|
60042
|
+
setView("main");
|
|
60043
|
+
setBrowserWalletInfo(null);
|
|
60044
|
+
resetViewTimeoutRef.current = null;
|
|
60045
|
+
}, 200);
|
|
60046
|
+
}, [onOpenChange]);
|
|
60047
|
+
(0, import_react27.useLayoutEffect)(() => {
|
|
60048
|
+
if (!open) return;
|
|
60049
|
+
if (resetViewTimeoutRef.current) {
|
|
60050
|
+
clearTimeout(resetViewTimeoutRef.current);
|
|
60051
|
+
resetViewTimeoutRef.current = null;
|
|
60052
|
+
}
|
|
60053
|
+
setView("main");
|
|
60054
|
+
setBrowserWalletInfo(null);
|
|
60055
|
+
}, [open]);
|
|
60056
|
+
(0, import_react27.useEffect)(
|
|
60057
|
+
() => () => {
|
|
60058
|
+
if (resetViewTimeoutRef.current) {
|
|
60059
|
+
clearTimeout(resetViewTimeoutRef.current);
|
|
60060
|
+
}
|
|
60061
|
+
},
|
|
60062
|
+
[]
|
|
60063
|
+
);
|
|
60064
|
+
const handleBack = (0, import_react27.useCallback)(() => {
|
|
60065
|
+
setView("main");
|
|
60066
|
+
}, []);
|
|
60067
|
+
const poweredByFooter = /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60068
|
+
PoweredByUnifold,
|
|
60069
|
+
{
|
|
60070
|
+
color: colors2.foregroundMuted,
|
|
60071
|
+
className: "uf-flex uf-justify-center uf-shrink-0"
|
|
60072
|
+
}
|
|
60073
|
+
) });
|
|
60074
|
+
const progressSection = paymentIntent ? (() => {
|
|
60075
|
+
const received = parseFloat(paymentIntent.amount_received_usd);
|
|
60076
|
+
const total = parseFloat(paymentIntent.amount_usd);
|
|
60077
|
+
const remaining = Math.max(total - received, 0);
|
|
60078
|
+
const pct = total > 0 ? Math.min(received / total * 100, 100) : 0;
|
|
60079
|
+
const hasPartial = received > 0;
|
|
60080
|
+
const amountStr = paymentIntent.amount_usd;
|
|
60081
|
+
const dynamicFontSize = `${Math.max(3.75 - amountStr.length * 0.15, 2)}rem`;
|
|
60082
|
+
return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-text-center uf-py-2 uf-space-y-1", children: [
|
|
60083
|
+
paymentIntent.description && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60084
|
+
"div",
|
|
60085
|
+
{
|
|
60086
|
+
className: "uf-text-xs",
|
|
60087
|
+
style: {
|
|
60088
|
+
color: colors2.foregroundMuted,
|
|
60089
|
+
fontFamily: fonts.regular
|
|
60090
|
+
},
|
|
60091
|
+
children: paymentIntent.description
|
|
60092
|
+
}
|
|
60093
|
+
),
|
|
60094
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-center", children: [
|
|
60095
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60096
|
+
"span",
|
|
60097
|
+
{
|
|
60098
|
+
className: "uf-mr-1",
|
|
60099
|
+
style: {
|
|
60100
|
+
fontSize: `calc(${dynamicFontSize} * 0.6)`,
|
|
60101
|
+
color: colors2.foregroundMuted,
|
|
60102
|
+
fontFamily: fonts.regular
|
|
60103
|
+
},
|
|
60104
|
+
children: "$"
|
|
60105
|
+
}
|
|
60106
|
+
),
|
|
60107
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60108
|
+
"span",
|
|
60109
|
+
{
|
|
60110
|
+
style: {
|
|
60111
|
+
fontSize: dynamicFontSize,
|
|
60112
|
+
color: colors2.foreground,
|
|
60113
|
+
fontFamily: fonts.regular,
|
|
60114
|
+
lineHeight: 1.1
|
|
60115
|
+
},
|
|
60116
|
+
children: amountStr
|
|
60117
|
+
}
|
|
60118
|
+
)
|
|
60119
|
+
] }),
|
|
60120
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60121
|
+
"div",
|
|
60122
|
+
{
|
|
60123
|
+
className: "uf-text-xs",
|
|
60124
|
+
style: {
|
|
60125
|
+
color: colors2.foregroundMuted,
|
|
60126
|
+
fontFamily: fonts.regular
|
|
60127
|
+
},
|
|
60128
|
+
children: paymentIntent.currency.toUpperCase()
|
|
60129
|
+
}
|
|
60130
|
+
),
|
|
60131
|
+
hasPartial && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-pt-2 uf-space-y-1.5", children: [
|
|
60132
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60133
|
+
"div",
|
|
60134
|
+
{
|
|
60135
|
+
className: "uf-w-full uf-h-1.5 uf-rounded-full uf-overflow-hidden",
|
|
60136
|
+
style: { backgroundColor: colors2.border },
|
|
60137
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60138
|
+
"div",
|
|
60139
|
+
{
|
|
60140
|
+
className: "uf-h-full uf-rounded-full uf-transition-all uf-duration-500",
|
|
60141
|
+
style: {
|
|
60142
|
+
width: `${pct}%`,
|
|
60143
|
+
backgroundColor: paymentIntent.status === "succeeded" ? "rgb(34, 197, 94)" : colors2.primary
|
|
60144
|
+
}
|
|
60145
|
+
}
|
|
60146
|
+
)
|
|
60147
|
+
}
|
|
60148
|
+
),
|
|
60149
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
|
|
60150
|
+
"div",
|
|
60151
|
+
{
|
|
60152
|
+
className: "uf-text-xs",
|
|
60153
|
+
style: {
|
|
60154
|
+
color: colors2.foregroundMuted,
|
|
60155
|
+
fontFamily: fonts.regular
|
|
60156
|
+
},
|
|
60157
|
+
children: [
|
|
60158
|
+
"$",
|
|
60159
|
+
paymentIntent.amount_received_usd,
|
|
60160
|
+
" / $",
|
|
60161
|
+
amountStr,
|
|
60162
|
+
" received",
|
|
60163
|
+
remaining > 0 && paymentIntent.status !== "succeeded" && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { style: { color: colors2.foreground, fontFamily: fonts.medium }, children: [
|
|
60164
|
+
" ",
|
|
60165
|
+
"\xB7 $",
|
|
60166
|
+
remaining.toFixed(2),
|
|
60167
|
+
" remaining"
|
|
60168
|
+
] })
|
|
60169
|
+
]
|
|
60170
|
+
}
|
|
60171
|
+
)
|
|
60172
|
+
] }),
|
|
60173
|
+
paymentIntent.status !== "requires_payment" && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "uf-pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60174
|
+
"span",
|
|
60175
|
+
{
|
|
60176
|
+
className: "uf-text-xs uf-font-medium uf-px-2.5 uf-py-1 uf-rounded-full uf-inline-block",
|
|
60177
|
+
style: {
|
|
60178
|
+
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)",
|
|
60179
|
+
color: paymentIntent.status === "succeeded" ? "rgb(34, 197, 94)" : paymentIntent.status === "processing" ? "rgb(59, 130, 246)" : "rgb(239, 68, 68)",
|
|
60180
|
+
fontFamily: fonts.medium
|
|
60181
|
+
},
|
|
60182
|
+
children: paymentIntent.status === "succeeded" ? "Payment Complete" : paymentIntent.status === "processing" ? "Partial Payment Received" : paymentIntent.status === "canceled" ? "Canceled" : paymentIntent.status === "expired" ? "Expired" : paymentIntent.status
|
|
60183
|
+
}
|
|
60184
|
+
) })
|
|
60185
|
+
] });
|
|
60186
|
+
})() : null;
|
|
60187
|
+
return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(PortalContainerProvider, { value: null, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(Dialog2, { open, onOpenChange: handleClose, modal: true, children: [
|
|
60188
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60189
|
+
DialogContent2,
|
|
60190
|
+
{
|
|
60191
|
+
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}`,
|
|
60192
|
+
style: { backgroundColor: colors2.background },
|
|
60193
|
+
onPointerDownOutside: (e) => e.preventDefault(),
|
|
60194
|
+
onInteractOutside: (e) => e.preventDefault(),
|
|
60195
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ThemeStyleInjector, { children: view === "main" ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
|
|
60196
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60197
|
+
DepositHeader,
|
|
60198
|
+
{
|
|
60199
|
+
title: modalTitle || "Checkout",
|
|
60200
|
+
showClose: true,
|
|
60201
|
+
onClose: handleClose
|
|
60202
|
+
}
|
|
60203
|
+
),
|
|
60204
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
|
|
60205
|
+
piLoading ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-space-y-3", children: [
|
|
60206
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60207
|
+
"div",
|
|
60208
|
+
{
|
|
60209
|
+
className: "uf-rounded-xl uf-p-4 uf-animate-pulse",
|
|
60210
|
+
style: {
|
|
60211
|
+
backgroundColor: components.card.backgroundColor,
|
|
60212
|
+
borderRadius: components.card.borderRadius,
|
|
60213
|
+
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
60214
|
+
},
|
|
60215
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-gap-2", children: [
|
|
60216
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60217
|
+
"div",
|
|
60218
|
+
{
|
|
60219
|
+
className: "uf-h-8 uf-w-24 uf-rounded",
|
|
60220
|
+
style: {
|
|
60221
|
+
backgroundColor: components.card.borderColor
|
|
60222
|
+
}
|
|
60223
|
+
}
|
|
60224
|
+
),
|
|
60225
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60226
|
+
"div",
|
|
60227
|
+
{
|
|
60228
|
+
className: "uf-h-4 uf-w-16 uf-rounded",
|
|
60229
|
+
style: {
|
|
60230
|
+
backgroundColor: components.card.borderColor
|
|
60231
|
+
}
|
|
60232
|
+
}
|
|
60233
|
+
)
|
|
60234
|
+
] })
|
|
60235
|
+
}
|
|
60236
|
+
),
|
|
60237
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(SkeletonButton2, {}),
|
|
60238
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(SkeletonButton2, {})
|
|
60239
|
+
] }) : 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: [
|
|
60240
|
+
/* @__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" }) }),
|
|
60241
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60242
|
+
"h3",
|
|
60243
|
+
{
|
|
60244
|
+
className: "uf-text-lg uf-font-semibold uf-mb-2",
|
|
60245
|
+
style: {
|
|
60246
|
+
color: colors2.foreground,
|
|
60247
|
+
fontFamily: fonts.semibold
|
|
60248
|
+
},
|
|
60249
|
+
children: "Unable to Load Checkout"
|
|
60250
|
+
}
|
|
60251
|
+
),
|
|
60252
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60253
|
+
"p",
|
|
60254
|
+
{
|
|
60255
|
+
className: "uf-text-sm uf-max-w-[280px]",
|
|
60256
|
+
style: {
|
|
60257
|
+
color: colors2.foregroundMuted,
|
|
60258
|
+
fontFamily: fonts.regular
|
|
60259
|
+
},
|
|
60260
|
+
children: piError instanceof Error ? piError.message : "Something went wrong. Please try again."
|
|
60261
|
+
}
|
|
60262
|
+
)
|
|
60263
|
+
] }) : paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-space-y-3", children: [
|
|
60264
|
+
progressSection,
|
|
60265
|
+
(paymentIntent.status === "requires_payment" || paymentIntent.status === "processing") && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
|
|
60266
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60267
|
+
TransferCryptoButton,
|
|
60268
|
+
{
|
|
60269
|
+
onClick: () => setView("transfer"),
|
|
60270
|
+
title: "Transfer Crypto",
|
|
60271
|
+
subtitle: "Send from any wallet or exchange",
|
|
60272
|
+
featuredTokens: projectConfig?.transfer_crypto.networks
|
|
60273
|
+
}
|
|
60274
|
+
),
|
|
60275
|
+
enableConnectWallet && !isMobileView && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60276
|
+
BrowserWalletButton,
|
|
60277
|
+
{
|
|
60278
|
+
onClick: handleBrowserWalletClick,
|
|
60279
|
+
onConnectClick: handleWalletConnectClick,
|
|
60280
|
+
onDisconnect: handleWalletDisconnect,
|
|
60281
|
+
chainType: browserWalletChainType,
|
|
60282
|
+
publishableKey
|
|
60283
|
+
}
|
|
60284
|
+
)
|
|
60285
|
+
] })
|
|
60286
|
+
] }) : null,
|
|
60287
|
+
poweredByFooter
|
|
60288
|
+
] })
|
|
60289
|
+
] }) : view === "transfer" ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
|
|
60290
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60291
|
+
DepositHeader,
|
|
60292
|
+
{
|
|
60293
|
+
title: `Pay $${remainingAmountUsd ?? paymentIntent?.amount_usd ?? ""}`,
|
|
60294
|
+
showBack: true,
|
|
60295
|
+
onBack: handleBack,
|
|
60296
|
+
onClose: handleClose
|
|
60297
|
+
}
|
|
60298
|
+
),
|
|
60299
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
|
|
60300
|
+
paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
|
|
60301
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
|
|
60302
|
+
"div",
|
|
60303
|
+
{
|
|
60304
|
+
className: "uf-rounded-lg uf-px-3 uf-py-2 uf-flex uf-items-center uf-justify-between",
|
|
60305
|
+
style: {
|
|
60306
|
+
backgroundColor: components.card.backgroundColor,
|
|
60307
|
+
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`,
|
|
60308
|
+
borderRadius: components.card.borderRadius
|
|
60309
|
+
},
|
|
60310
|
+
children: [
|
|
60311
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60312
|
+
"span",
|
|
60313
|
+
{
|
|
60314
|
+
className: "uf-text-xs",
|
|
60315
|
+
style: {
|
|
60316
|
+
color: colors2.foregroundMuted,
|
|
60317
|
+
fontFamily: fonts.regular
|
|
60318
|
+
},
|
|
60319
|
+
children: parseFloat(paymentIntent.amount_received_usd) > 0 ? `$${paymentIntent.amount_received_usd} / $${paymentIntent.amount_usd} received` : "Amount due"
|
|
60320
|
+
}
|
|
60321
|
+
),
|
|
60322
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
|
|
60323
|
+
"span",
|
|
60324
|
+
{
|
|
60325
|
+
className: "uf-text-sm uf-font-semibold",
|
|
60326
|
+
style: {
|
|
60327
|
+
color: colors2.foreground,
|
|
60328
|
+
fontFamily: fonts.semibold
|
|
60329
|
+
},
|
|
60330
|
+
children: [
|
|
60331
|
+
formatCryptoAmount(remainingCrypto ?? paymentIntent.amount),
|
|
60332
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
|
|
60333
|
+
"span",
|
|
60334
|
+
{
|
|
60335
|
+
className: "uf-text-xs uf-font-normal uf-ml-1",
|
|
60336
|
+
style: { color: colors2.foregroundMuted },
|
|
60337
|
+
children: [
|
|
60338
|
+
"($",
|
|
60339
|
+
remainingAmountUsd ?? paymentIntent.amount_usd,
|
|
60340
|
+
")"
|
|
60341
|
+
]
|
|
60342
|
+
}
|
|
60343
|
+
)
|
|
60344
|
+
]
|
|
60345
|
+
}
|
|
60346
|
+
)
|
|
60347
|
+
]
|
|
60348
|
+
}
|
|
60349
|
+
),
|
|
60350
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60351
|
+
TransferCryptoSingleInput,
|
|
60352
|
+
{
|
|
60353
|
+
userId: paymentIntent.user_id || "",
|
|
60354
|
+
publishableKey,
|
|
60355
|
+
clientSecret,
|
|
60356
|
+
recipientAddress: paymentIntent.recipient_address,
|
|
60357
|
+
destinationChainType: paymentIntent.destination_chain_type,
|
|
60358
|
+
destinationChainId: paymentIntent.destination_chain_id,
|
|
60359
|
+
destinationTokenAddress: paymentIntent.destination_token_address,
|
|
60360
|
+
depositConfirmationMode: "auto_ui",
|
|
60361
|
+
wallets,
|
|
60362
|
+
onSourceTokenChange: setSelectedSource,
|
|
60363
|
+
checkoutQuote: sourceQuote ? {
|
|
60364
|
+
sourceAmount: sourceQuote.source_amount,
|
|
60365
|
+
sourceTokenDecimals: sourceQuote.source_token_decimals,
|
|
60366
|
+
sourceTokenSymbol: sourceQuote.source_token_symbol,
|
|
60367
|
+
sourceAmountUsd: sourceQuote.source_amount_usd
|
|
60368
|
+
} : null
|
|
60369
|
+
}
|
|
60370
|
+
)
|
|
60371
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(SkeletonButton2, {}),
|
|
60372
|
+
poweredByFooter
|
|
60373
|
+
] })
|
|
60374
|
+
] }) : null })
|
|
60375
|
+
}
|
|
60376
|
+
),
|
|
60377
|
+
/* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60378
|
+
WalletSelectionModal,
|
|
60379
|
+
{
|
|
60380
|
+
open: walletSelectionModalOpen,
|
|
60381
|
+
onOpenChange: setWalletSelectionModalOpen,
|
|
60382
|
+
onWalletConnected: handleWalletConnected,
|
|
60383
|
+
onClose: () => setWalletSelectionModalOpen(false),
|
|
60384
|
+
theme: resolvedTheme
|
|
60385
|
+
}
|
|
60386
|
+
),
|
|
60387
|
+
browserWalletInfo && browserWalletInfo.depositWallet && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
|
|
60388
|
+
BrowserWalletModal,
|
|
60389
|
+
{
|
|
60390
|
+
open: browserWalletModalOpen,
|
|
60391
|
+
onOpenChange: setBrowserWalletModalOpen,
|
|
60392
|
+
onFullClose: handleClose,
|
|
60393
|
+
walletInfo: browserWalletInfo,
|
|
60394
|
+
depositWallet: browserWalletInfo.depositWallet,
|
|
60395
|
+
userId: paymentIntent?.user_id || "",
|
|
60396
|
+
publishableKey,
|
|
60397
|
+
clientSecret,
|
|
60398
|
+
theme: resolvedTheme,
|
|
60399
|
+
prefillAmountUsd: remainingAmountUsd,
|
|
60400
|
+
checkoutAmountUsd: paymentIntent?.amount_usd,
|
|
60401
|
+
checkoutReceivedUsd: paymentIntent?.amount_received_usd,
|
|
60402
|
+
onSuccess: (txHash) => {
|
|
60403
|
+
onCheckoutSuccess?.({
|
|
60404
|
+
paymentIntentId: paymentIntent?.id || "",
|
|
60405
|
+
status: "processing"
|
|
60406
|
+
});
|
|
60407
|
+
},
|
|
60408
|
+
onError: (error) => {
|
|
60409
|
+
onCheckoutError?.({
|
|
60410
|
+
message: error.message,
|
|
60411
|
+
error
|
|
60412
|
+
});
|
|
60413
|
+
},
|
|
60414
|
+
onWalletDisconnect: handleWalletDisconnect,
|
|
60415
|
+
onNewDeposit: () => {
|
|
60416
|
+
setBrowserWalletModalOpen(false);
|
|
60417
|
+
setView("main");
|
|
60418
|
+
},
|
|
60419
|
+
onDone: () => {
|
|
60420
|
+
setBrowserWalletModalOpen(false);
|
|
60421
|
+
setView("main");
|
|
60422
|
+
},
|
|
60423
|
+
paymentIntentStatus: paymentIntent?.status
|
|
60424
|
+
}
|
|
60425
|
+
)
|
|
60426
|
+
] }) });
|
|
60427
|
+
}
|
|
59352
60428
|
function useSupportedDestinationTokens(publishableKey, enabled = true) {
|
|
59353
60429
|
return useQuery({
|
|
59354
60430
|
queryKey: ["unifold", "supportedDestinationTokens", publishableKey],
|
|
@@ -59493,20 +60569,20 @@ function useWithdrawPolling({
|
|
|
59493
60569
|
onWithdrawSuccess,
|
|
59494
60570
|
onWithdrawError
|
|
59495
60571
|
}) {
|
|
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,
|
|
60572
|
+
const [executions, setExecutions] = (0, import_react29.useState)([]);
|
|
60573
|
+
const [isPolling, setIsPolling] = (0, import_react29.useState)(false);
|
|
60574
|
+
const enabledAtRef = (0, import_react29.useRef)(/* @__PURE__ */ new Date());
|
|
60575
|
+
const trackedRef = (0, import_react29.useRef)(/* @__PURE__ */ new Map());
|
|
60576
|
+
const prevEnabledRef = (0, import_react29.useRef)(false);
|
|
60577
|
+
const onSuccessRef = (0, import_react29.useRef)(onWithdrawSuccess);
|
|
60578
|
+
const onErrorRef = (0, import_react29.useRef)(onWithdrawError);
|
|
60579
|
+
(0, import_react29.useEffect)(() => {
|
|
59504
60580
|
onSuccessRef.current = onWithdrawSuccess;
|
|
59505
60581
|
}, [onWithdrawSuccess]);
|
|
59506
|
-
(0,
|
|
60582
|
+
(0, import_react29.useEffect)(() => {
|
|
59507
60583
|
onErrorRef.current = onWithdrawError;
|
|
59508
60584
|
}, [onWithdrawError]);
|
|
59509
|
-
(0,
|
|
60585
|
+
(0, import_react29.useEffect)(() => {
|
|
59510
60586
|
if (enabled && !prevEnabledRef.current) {
|
|
59511
60587
|
enabledAtRef.current = /* @__PURE__ */ new Date();
|
|
59512
60588
|
trackedRef.current.clear();
|
|
@@ -59516,7 +60592,7 @@ function useWithdrawPolling({
|
|
|
59516
60592
|
}
|
|
59517
60593
|
prevEnabledRef.current = enabled;
|
|
59518
60594
|
}, [enabled]);
|
|
59519
|
-
(0,
|
|
60595
|
+
(0, import_react29.useEffect)(() => {
|
|
59520
60596
|
if (!userId || !enabled) return;
|
|
59521
60597
|
const enabledAt = enabledAtRef.current;
|
|
59522
60598
|
const poll = async () => {
|
|
@@ -59578,7 +60654,7 @@ function useWithdrawPolling({
|
|
|
59578
60654
|
setIsPolling(false);
|
|
59579
60655
|
};
|
|
59580
60656
|
}, [userId, publishableKey, enabled]);
|
|
59581
|
-
(0,
|
|
60657
|
+
(0, import_react29.useEffect)(() => {
|
|
59582
60658
|
if (!enabled || !depositWalletId) return;
|
|
59583
60659
|
const trigger = async () => {
|
|
59584
60660
|
try {
|
|
@@ -59606,8 +60682,8 @@ function WithdrawDoubleInput({
|
|
|
59606
60682
|
const isDarkMode = useTheme().themeClass.includes("uf-dark");
|
|
59607
60683
|
const selectedToken = selectedTokenSymbol ? tokens.find((t11) => t11.symbol === selectedTokenSymbol) : void 0;
|
|
59608
60684
|
const availableChainsForToken = selectedToken?.chains || [];
|
|
59609
|
-
const renderTokenItem = (tokenData) => /* @__PURE__ */ (0,
|
|
59610
|
-
/* @__PURE__ */ (0,
|
|
60685
|
+
const renderTokenItem = (tokenData) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
60686
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
59611
60687
|
"img",
|
|
59612
60688
|
{
|
|
59613
60689
|
src: tokenData.icon_url,
|
|
@@ -59618,10 +60694,10 @@ function WithdrawDoubleInput({
|
|
|
59618
60694
|
className: "uf-rounded-full uf-flex-shrink-0"
|
|
59619
60695
|
}
|
|
59620
60696
|
),
|
|
59621
|
-
/* @__PURE__ */ (0,
|
|
60697
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "uf-text-xs uf-font-normal", children: tokenData.symbol })
|
|
59622
60698
|
] });
|
|
59623
|
-
const renderChainItem = (chainData) => /* @__PURE__ */ (0,
|
|
59624
|
-
/* @__PURE__ */ (0,
|
|
60699
|
+
const renderChainItem = (chainData) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
60700
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
59625
60701
|
"img",
|
|
59626
60702
|
{
|
|
59627
60703
|
src: chainData.icon_url,
|
|
@@ -59632,14 +60708,14 @@ function WithdrawDoubleInput({
|
|
|
59632
60708
|
className: "uf-rounded-full uf-flex-shrink-0"
|
|
59633
60709
|
}
|
|
59634
60710
|
),
|
|
59635
|
-
/* @__PURE__ */ (0,
|
|
60711
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "uf-text-xs uf-font-normal", children: chainData.chain_name })
|
|
59636
60712
|
] });
|
|
59637
60713
|
const currentChainData = selectedChainKey ? availableChainsForToken.find(
|
|
59638
60714
|
(c) => getChainKey4(c.chain_id, c.chain_type) === selectedChainKey
|
|
59639
60715
|
) : void 0;
|
|
59640
|
-
return /* @__PURE__ */ (0,
|
|
59641
|
-
/* @__PURE__ */ (0,
|
|
59642
|
-
/* @__PURE__ */ (0,
|
|
60716
|
+
return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "uf-grid uf-grid-cols-2 uf-gap-2.5", children: [
|
|
60717
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { children: [
|
|
60718
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
59643
60719
|
"div",
|
|
59644
60720
|
{
|
|
59645
60721
|
className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1",
|
|
@@ -59647,14 +60723,14 @@ function WithdrawDoubleInput({
|
|
|
59647
60723
|
children: t7.receiveToken
|
|
59648
60724
|
}
|
|
59649
60725
|
),
|
|
59650
|
-
/* @__PURE__ */ (0,
|
|
60726
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
|
|
59651
60727
|
Select2,
|
|
59652
60728
|
{
|
|
59653
60729
|
value: selectedTokenSymbol ?? "",
|
|
59654
60730
|
onValueChange: onTokenChange,
|
|
59655
60731
|
disabled: isLoading || tokens.length === 0,
|
|
59656
60732
|
children: [
|
|
59657
|
-
/* @__PURE__ */ (0,
|
|
60733
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
59658
60734
|
SelectTrigger2,
|
|
59659
60735
|
{
|
|
59660
60736
|
className: "uf-h-10 hover:uf-opacity-90 uf-text-foreground disabled:uf-opacity-50",
|
|
@@ -59662,10 +60738,10 @@ function WithdrawDoubleInput({
|
|
|
59662
60738
|
backgroundColor: components.card.backgroundColor,
|
|
59663
60739
|
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
59664
60740
|
},
|
|
59665
|
-
children: /* @__PURE__ */ (0,
|
|
60741
|
+
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
60742
|
}
|
|
59667
60743
|
),
|
|
59668
|
-
/* @__PURE__ */ (0,
|
|
60744
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
59669
60745
|
SelectContent2,
|
|
59670
60746
|
{
|
|
59671
60747
|
className: "uf-bg-secondary uf-border uf-text-foreground uf-max-h-[300px]",
|
|
@@ -59673,7 +60749,7 @@ function WithdrawDoubleInput({
|
|
|
59673
60749
|
border: `1px solid ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)"}`,
|
|
59674
60750
|
...fonts.regular ? { "--uf-font-family": fonts.regular } : {}
|
|
59675
60751
|
},
|
|
59676
|
-
children: tokens.map((tokenData) => /* @__PURE__ */ (0,
|
|
60752
|
+
children: tokens.map((tokenData) => /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
59677
60753
|
SelectItem2,
|
|
59678
60754
|
{
|
|
59679
60755
|
value: tokenData.symbol,
|
|
@@ -59688,8 +60764,8 @@ function WithdrawDoubleInput({
|
|
|
59688
60764
|
}
|
|
59689
60765
|
)
|
|
59690
60766
|
] }),
|
|
59691
|
-
/* @__PURE__ */ (0,
|
|
59692
|
-
/* @__PURE__ */ (0,
|
|
60767
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { children: [
|
|
60768
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
59693
60769
|
"div",
|
|
59694
60770
|
{
|
|
59695
60771
|
className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1",
|
|
@@ -59697,14 +60773,14 @@ function WithdrawDoubleInput({
|
|
|
59697
60773
|
children: t7.receiveChain
|
|
59698
60774
|
}
|
|
59699
60775
|
),
|
|
59700
|
-
/* @__PURE__ */ (0,
|
|
60776
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
|
|
59701
60777
|
Select2,
|
|
59702
60778
|
{
|
|
59703
60779
|
value: selectedChainKey ?? "",
|
|
59704
60780
|
onValueChange: onChainChange,
|
|
59705
60781
|
disabled: isLoading || availableChainsForToken.length === 0,
|
|
59706
60782
|
children: [
|
|
59707
|
-
/* @__PURE__ */ (0,
|
|
60783
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
59708
60784
|
SelectTrigger2,
|
|
59709
60785
|
{
|
|
59710
60786
|
className: "uf-h-10 hover:uf-opacity-90 uf-text-foreground disabled:uf-opacity-50",
|
|
@@ -59712,10 +60788,10 @@ function WithdrawDoubleInput({
|
|
|
59712
60788
|
backgroundColor: components.card.backgroundColor,
|
|
59713
60789
|
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
59714
60790
|
},
|
|
59715
|
-
children: /* @__PURE__ */ (0,
|
|
60791
|
+
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
60792
|
}
|
|
59717
60793
|
),
|
|
59718
|
-
/* @__PURE__ */ (0,
|
|
60794
|
+
/* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
59719
60795
|
SelectContent2,
|
|
59720
60796
|
{
|
|
59721
60797
|
align: "end",
|
|
@@ -59724,9 +60800,9 @@ function WithdrawDoubleInput({
|
|
|
59724
60800
|
border: `1px solid ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)"}`,
|
|
59725
60801
|
...fonts.regular ? { "--uf-font-family": fonts.regular } : {}
|
|
59726
60802
|
},
|
|
59727
|
-
children: availableChainsForToken.length === 0 ? /* @__PURE__ */ (0,
|
|
60803
|
+
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
60804
|
const chainKey = getChainKey4(chainData.chain_id, chainData.chain_type);
|
|
59729
|
-
return /* @__PURE__ */ (0,
|
|
60805
|
+
return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
|
|
59730
60806
|
SelectItem2,
|
|
59731
60807
|
{
|
|
59732
60808
|
value: chainKey,
|
|
@@ -59891,6 +60967,52 @@ async function sendSolanaWithdraw(params) {
|
|
|
59891
60967
|
);
|
|
59892
60968
|
return sendResponse.signature;
|
|
59893
60969
|
}
|
|
60970
|
+
var HYPERCORE_CHAIN_ID = "1337";
|
|
60971
|
+
var HYPERCORE_SPOT_USDC_ADDRESS = "0x6d1e7cde53ba9467b783cb7c530ce054";
|
|
60972
|
+
function isHypercoreChain(chainId) {
|
|
60973
|
+
return chainId === HYPERCORE_CHAIN_ID;
|
|
60974
|
+
}
|
|
60975
|
+
async function sendHypercoreWithdraw(params) {
|
|
60976
|
+
const {
|
|
60977
|
+
provider,
|
|
60978
|
+
fromAddress,
|
|
60979
|
+
depositWalletAddress,
|
|
60980
|
+
sourceTokenAddress,
|
|
60981
|
+
amount,
|
|
60982
|
+
tokenSymbol,
|
|
60983
|
+
publishableKey
|
|
60984
|
+
} = params;
|
|
60985
|
+
const isSpot = sourceTokenAddress.toLowerCase() === HYPERCORE_SPOT_USDC_ADDRESS;
|
|
60986
|
+
const currentChainHex = await provider.request({
|
|
60987
|
+
method: "eth_chainId",
|
|
60988
|
+
params: []
|
|
60989
|
+
});
|
|
60990
|
+
const activeChainId = String(parseInt(currentChainHex, 16));
|
|
60991
|
+
const buildResult = await buildHypercoreTransaction(
|
|
60992
|
+
{
|
|
60993
|
+
action_type: isSpot ? "spot_send" : "usd_send",
|
|
60994
|
+
signature_chain_type: "ethereum",
|
|
60995
|
+
signature_chain_id: activeChainId,
|
|
60996
|
+
recipient_address: depositWalletAddress,
|
|
60997
|
+
token_address: sourceTokenAddress,
|
|
60998
|
+
token_symbol: tokenSymbol || void 0,
|
|
60999
|
+
amount
|
|
61000
|
+
},
|
|
61001
|
+
publishableKey
|
|
61002
|
+
);
|
|
61003
|
+
const signature = await provider.request({
|
|
61004
|
+
method: "eth_signTypedData_v4",
|
|
61005
|
+
params: [fromAddress, JSON.stringify(buildResult.typed_data)]
|
|
61006
|
+
});
|
|
61007
|
+
await sendHypercoreTransaction(
|
|
61008
|
+
{
|
|
61009
|
+
action_payload: buildResult.action_payload,
|
|
61010
|
+
signature,
|
|
61011
|
+
nonce: buildResult.nonce
|
|
61012
|
+
},
|
|
61013
|
+
publishableKey
|
|
61014
|
+
);
|
|
61015
|
+
}
|
|
59894
61016
|
async function detectBrowserWallet(chainType, senderAddress) {
|
|
59895
61017
|
const win = typeof window !== "undefined" ? window : null;
|
|
59896
61018
|
if (!win || !senderAddress) return null;
|
|
@@ -60014,22 +61136,22 @@ function WithdrawForm({
|
|
|
60014
61136
|
footerLeft
|
|
60015
61137
|
}) {
|
|
60016
61138
|
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,
|
|
61139
|
+
const [recipientAddress, setRecipientAddress] = (0, import_react30.useState)(recipientAddressProp || "");
|
|
61140
|
+
const [amount, setAmount] = (0, import_react30.useState)("");
|
|
61141
|
+
const [inputUnit, setInputUnit] = (0, import_react30.useState)("crypto");
|
|
61142
|
+
const [isSubmitting, setIsSubmitting] = (0, import_react30.useState)(false);
|
|
61143
|
+
const [submitError, setSubmitError] = (0, import_react30.useState)(null);
|
|
61144
|
+
const [detailsExpanded, setDetailsExpanded] = (0, import_react30.useState)(false);
|
|
61145
|
+
const [glossaryOpen, setGlossaryOpen] = (0, import_react30.useState)(false);
|
|
61146
|
+
(0, import_react30.useEffect)(() => {
|
|
60025
61147
|
setRecipientAddress(recipientAddressProp || "");
|
|
60026
61148
|
setAmount("");
|
|
60027
61149
|
setInputUnit("crypto");
|
|
60028
61150
|
setSubmitError(null);
|
|
60029
61151
|
}, [recipientAddressProp]);
|
|
60030
61152
|
const trimmedAddress = recipientAddress.trim();
|
|
60031
|
-
const [debouncedAddress, setDebouncedAddress] = (0,
|
|
60032
|
-
(0,
|
|
61153
|
+
const [debouncedAddress, setDebouncedAddress] = (0, import_react30.useState)(trimmedAddress);
|
|
61154
|
+
(0, import_react30.useEffect)(() => {
|
|
60033
61155
|
const id = setTimeout(() => setDebouncedAddress(trimmedAddress), 500);
|
|
60034
61156
|
return () => clearTimeout(id);
|
|
60035
61157
|
}, [trimmedAddress]);
|
|
@@ -60046,7 +61168,7 @@ function WithdrawForm({
|
|
|
60046
61168
|
enabled: debouncedAddress.length > 5 && !!selectedChain
|
|
60047
61169
|
});
|
|
60048
61170
|
const isDebouncing = trimmedAddress !== debouncedAddress;
|
|
60049
|
-
const addressError = (0,
|
|
61171
|
+
const addressError = (0, import_react30.useMemo)(() => {
|
|
60050
61172
|
if (!trimmedAddress || trimmedAddress.length <= 5) return null;
|
|
60051
61173
|
if (isDebouncing || isVerifyingAddress) return null;
|
|
60052
61174
|
if (verifyError) return t8.invalidAddress;
|
|
@@ -60060,47 +61182,47 @@ function WithdrawForm({
|
|
|
60060
61182
|
return null;
|
|
60061
61183
|
}, [trimmedAddress, isDebouncing, isVerifyingAddress, verifyError, addressVerification, selectedChain, selectedToken]);
|
|
60062
61184
|
const isAddressValid = !isDebouncing && !!addressVerification?.valid && !addressError;
|
|
60063
|
-
const exchangeRate = (0,
|
|
61185
|
+
const exchangeRate = (0, import_react30.useMemo)(() => {
|
|
60064
61186
|
if (!balanceData?.exchangeRate) return 0;
|
|
60065
61187
|
return parseFloat(balanceData.exchangeRate);
|
|
60066
61188
|
}, [balanceData]);
|
|
60067
|
-
const balanceCrypto = (0,
|
|
61189
|
+
const balanceCrypto = (0, import_react30.useMemo)(() => {
|
|
60068
61190
|
if (!balanceData?.balanceHuman) return 0;
|
|
60069
61191
|
return parseFloat(balanceData.balanceHuman);
|
|
60070
61192
|
}, [balanceData]);
|
|
60071
|
-
const balanceUsdNum = (0,
|
|
61193
|
+
const balanceUsdNum = (0, import_react30.useMemo)(() => {
|
|
60072
61194
|
if (!balanceData?.balanceUsd) return 0;
|
|
60073
61195
|
return parseFloat(balanceData.balanceUsd);
|
|
60074
61196
|
}, [balanceData]);
|
|
60075
61197
|
const tokenSymbol = sourceTokenSymbol || balanceData?.symbol || "TOKEN";
|
|
60076
61198
|
const sourceDecimals = balanceData?.decimals ?? 6;
|
|
60077
|
-
const cryptoAmountFromInput = (0,
|
|
61199
|
+
const cryptoAmountFromInput = (0, import_react30.useMemo)(() => {
|
|
60078
61200
|
const val = parseFloat(amount);
|
|
60079
61201
|
if (!val || val <= 0) return 0;
|
|
60080
61202
|
if (inputUnit === "crypto") return val;
|
|
60081
61203
|
return exchangeRate > 0 ? val / exchangeRate : 0;
|
|
60082
61204
|
}, [amount, inputUnit, exchangeRate]);
|
|
60083
|
-
const fiatAmountFromInput = (0,
|
|
61205
|
+
const fiatAmountFromInput = (0, import_react30.useMemo)(() => {
|
|
60084
61206
|
const val = parseFloat(amount);
|
|
60085
61207
|
if (!val || val <= 0) return 0;
|
|
60086
61208
|
if (inputUnit === "fiat") return val;
|
|
60087
61209
|
return val * exchangeRate;
|
|
60088
61210
|
}, [amount, inputUnit, exchangeRate]);
|
|
60089
|
-
const convertedDisplay = (0,
|
|
61211
|
+
const convertedDisplay = (0, import_react30.useMemo)(() => {
|
|
60090
61212
|
if (!amount || parseFloat(amount) <= 0) return null;
|
|
60091
61213
|
if (inputUnit === "crypto") {
|
|
60092
61214
|
return `$${fiatAmountFromInput.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
60093
61215
|
}
|
|
60094
61216
|
return `${cryptoAmountFromInput.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 6 })} ${tokenSymbol}`;
|
|
60095
61217
|
}, [amount, inputUnit, fiatAmountFromInput, cryptoAmountFromInput, tokenSymbol]);
|
|
60096
|
-
const balanceDisplay = (0,
|
|
61218
|
+
const balanceDisplay = (0, import_react30.useMemo)(() => {
|
|
60097
61219
|
if (isLoadingBalance || !balanceData) return null;
|
|
60098
61220
|
if (inputUnit === "crypto") {
|
|
60099
61221
|
return `${balanceCrypto.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ${tokenSymbol}`;
|
|
60100
61222
|
}
|
|
60101
61223
|
return `$${balanceUsdNum.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
60102
61224
|
}, [isLoadingBalance, balanceData, inputUnit, balanceCrypto, balanceUsdNum, tokenSymbol]);
|
|
60103
|
-
const handleSwitchUnit = (0,
|
|
61225
|
+
const handleSwitchUnit = (0, import_react30.useCallback)(() => {
|
|
60104
61226
|
const val = parseFloat(amount);
|
|
60105
61227
|
if (!val || val <= 0 || exchangeRate <= 0) {
|
|
60106
61228
|
setInputUnit((u) => u === "crypto" ? "fiat" : "crypto");
|
|
@@ -60117,7 +61239,7 @@ function WithdrawForm({
|
|
|
60117
61239
|
setInputUnit("crypto");
|
|
60118
61240
|
}
|
|
60119
61241
|
}, [amount, inputUnit, exchangeRate, sourceDecimals]);
|
|
60120
|
-
const handleMaxClick = (0,
|
|
61242
|
+
const handleMaxClick = (0, import_react30.useCallback)(() => {
|
|
60121
61243
|
if (inputUnit === "crypto") {
|
|
60122
61244
|
if (balanceCrypto <= 0) return;
|
|
60123
61245
|
setAmount(balanceData?.balanceHuman ?? "0");
|
|
@@ -60129,7 +61251,7 @@ function WithdrawForm({
|
|
|
60129
61251
|
const isBelowMinimum = minimumWithdrawAmountUsd !== null && fiatAmountFromInput > 0 && fiatAmountFromInput < minimumWithdrawAmountUsd;
|
|
60130
61252
|
const isOverBalance = inputUnit === "crypto" ? cryptoAmountFromInput > 0 && balanceCrypto > 0 && cryptoAmountFromInput > balanceCrypto : fiatAmountFromInput > 0 && balanceUsdNum > 0 && fiatAmountFromInput > balanceUsdNum;
|
|
60131
61253
|
const isFormValid = trimmedAddress.length > 0 && amount.trim().length > 0 && cryptoAmountFromInput > 0 && isAddressValid && !isBelowMinimum && !isOverBalance && !!balanceData;
|
|
60132
|
-
const handleWithdraw = (0,
|
|
61254
|
+
const handleWithdraw = (0, import_react30.useCallback)(async () => {
|
|
60133
61255
|
if (!selectedToken || !selectedChain) return;
|
|
60134
61256
|
if (!isFormValid) return;
|
|
60135
61257
|
setIsSubmitting(true);
|
|
@@ -60162,7 +61284,17 @@ function WithdrawForm({
|
|
|
60162
61284
|
recipientAddress: trimmedAddress
|
|
60163
61285
|
};
|
|
60164
61286
|
if (detectedWallet) {
|
|
60165
|
-
if (detectedWallet.chainFamily === "evm") {
|
|
61287
|
+
if (detectedWallet.chainFamily === "evm" && isHypercoreChain(sourceChainId)) {
|
|
61288
|
+
await sendHypercoreWithdraw({
|
|
61289
|
+
provider: detectedWallet.provider,
|
|
61290
|
+
fromAddress: detectedWallet.address,
|
|
61291
|
+
depositWalletAddress: depositWallet.address,
|
|
61292
|
+
sourceTokenAddress,
|
|
61293
|
+
amount: humanAmount,
|
|
61294
|
+
tokenSymbol,
|
|
61295
|
+
publishableKey
|
|
61296
|
+
});
|
|
61297
|
+
} else if (detectedWallet.chainFamily === "evm") {
|
|
60166
61298
|
await sendEvmWithdraw({
|
|
60167
61299
|
provider: detectedWallet.provider,
|
|
60168
61300
|
fromAddress: detectedWallet.address,
|
|
@@ -60199,9 +61331,9 @@ function WithdrawForm({
|
|
|
60199
61331
|
setIsSubmitting(false);
|
|
60200
61332
|
}
|
|
60201
61333
|
}, [selectedToken, selectedChain, isFormValid, cryptoAmountFromInput, sourceDecimals, trimmedAddress, publishableKey, onWithdraw, detectedWallet, sourceTokenAddress, sourceChainId, onWithdrawError, onDepositWalletCreation, onWithdrawSubmitted, amount, inputUnit, balanceCrypto, balanceUsdNum, balanceData]);
|
|
60202
|
-
return /* @__PURE__ */ (0,
|
|
60203
|
-
/* @__PURE__ */ (0,
|
|
60204
|
-
/* @__PURE__ */ (0,
|
|
61334
|
+
return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
|
|
61335
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { children: [
|
|
61336
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60205
61337
|
"div",
|
|
60206
61338
|
{
|
|
60207
61339
|
className: "uf-text-xs uf-mb-1.5",
|
|
@@ -60209,7 +61341,7 @@ function WithdrawForm({
|
|
|
60209
61341
|
children: t8.recipientAddress
|
|
60210
61342
|
}
|
|
60211
61343
|
),
|
|
60212
|
-
/* @__PURE__ */ (0,
|
|
61344
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60213
61345
|
"style",
|
|
60214
61346
|
{
|
|
60215
61347
|
dangerouslySetInnerHTML: {
|
|
@@ -60217,7 +61349,7 @@ function WithdrawForm({
|
|
|
60217
61349
|
}
|
|
60218
61350
|
}
|
|
60219
61351
|
),
|
|
60220
|
-
/* @__PURE__ */ (0,
|
|
61352
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
|
|
60221
61353
|
"div",
|
|
60222
61354
|
{
|
|
60223
61355
|
className: "uf-flex uf-items-center uf-gap-1 uf-pr-2",
|
|
@@ -60227,7 +61359,7 @@ function WithdrawForm({
|
|
|
60227
61359
|
border: `${components.input.borderWidth}px solid ${addressError ? colors2.error : components.input.borderColor}`
|
|
60228
61360
|
},
|
|
60229
61361
|
children: [
|
|
60230
|
-
/* @__PURE__ */ (0,
|
|
61362
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60231
61363
|
"input",
|
|
60232
61364
|
{
|
|
60233
61365
|
type: "text",
|
|
@@ -60244,7 +61376,7 @@ function WithdrawForm({
|
|
|
60244
61376
|
}
|
|
60245
61377
|
}
|
|
60246
61378
|
),
|
|
60247
|
-
/* @__PURE__ */ (0,
|
|
61379
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60248
61380
|
"button",
|
|
60249
61381
|
{
|
|
60250
61382
|
type: "button",
|
|
@@ -60261,27 +61393,27 @@ function WithdrawForm({
|
|
|
60261
61393
|
className: "uf-flex-shrink-0 uf-p-1 uf-rounded uf-transition-colors hover:uf-opacity-70",
|
|
60262
61394
|
style: { color: colors2.foregroundMuted },
|
|
60263
61395
|
title: "Paste from clipboard",
|
|
60264
|
-
children: /* @__PURE__ */ (0,
|
|
61396
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ClipboardPaste, { className: "uf-w-4 uf-h-4" })
|
|
60265
61397
|
}
|
|
60266
61398
|
)
|
|
60267
61399
|
]
|
|
60268
61400
|
}
|
|
60269
61401
|
),
|
|
60270
|
-
(isDebouncing || isVerifyingAddress) && trimmedAddress.length > 5 && /* @__PURE__ */ (0,
|
|
60271
|
-
/* @__PURE__ */ (0,
|
|
60272
|
-
/* @__PURE__ */ (0,
|
|
61402
|
+
(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: [
|
|
61403
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(LoaderCircle, { className: "uf-w-3 uf-h-3 uf-animate-spin", style: { color: colors2.foregroundMuted } }),
|
|
61404
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: t8.verifyingAddress })
|
|
60273
61405
|
] }),
|
|
60274
|
-
addressError && /* @__PURE__ */ (0,
|
|
60275
|
-
/* @__PURE__ */ (0,
|
|
60276
|
-
/* @__PURE__ */ (0,
|
|
61406
|
+
addressError && /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-1.5", children: [
|
|
61407
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(TriangleAlert, { className: "uf-w-3 uf-h-3", style: { color: colors2.error } }),
|
|
61408
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "uf-text-xs", style: { color: colors2.error, fontFamily: fonts.regular }, children: addressError })
|
|
60277
61409
|
] })
|
|
60278
61410
|
] }),
|
|
60279
|
-
/* @__PURE__ */ (0,
|
|
60280
|
-
/* @__PURE__ */ (0,
|
|
61411
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { children: [
|
|
61412
|
+
/* @__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
61413
|
t8.amount,
|
|
60282
|
-
minimumWithdrawAmountUsd != null && minimumWithdrawAmountUsd > 0 && /* @__PURE__ */ (0,
|
|
61414
|
+
minimumWithdrawAmountUsd != null && minimumWithdrawAmountUsd > 0 && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { style: { color: colors2.warning, fontFamily: fonts.regular }, children: ` ($${minimumWithdrawAmountUsd.toFixed(2)} min)` })
|
|
60283
61415
|
] }),
|
|
60284
|
-
/* @__PURE__ */ (0,
|
|
61416
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60285
61417
|
"style",
|
|
60286
61418
|
{
|
|
60287
61419
|
dangerouslySetInnerHTML: {
|
|
@@ -60289,7 +61421,7 @@ function WithdrawForm({
|
|
|
60289
61421
|
}
|
|
60290
61422
|
}
|
|
60291
61423
|
),
|
|
60292
|
-
/* @__PURE__ */ (0,
|
|
61424
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
|
|
60293
61425
|
"div",
|
|
60294
61426
|
{
|
|
60295
61427
|
className: "uf-flex uf-items-center uf-gap-2 uf-px-3 uf-py-2.5",
|
|
@@ -60299,7 +61431,7 @@ function WithdrawForm({
|
|
|
60299
61431
|
border: `${components.input.borderWidth}px solid ${components.input.borderColor}`
|
|
60300
61432
|
},
|
|
60301
61433
|
children: [
|
|
60302
|
-
/* @__PURE__ */ (0,
|
|
61434
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60303
61435
|
"input",
|
|
60304
61436
|
{
|
|
60305
61437
|
type: "text",
|
|
@@ -60320,8 +61452,8 @@ function WithdrawForm({
|
|
|
60320
61452
|
}
|
|
60321
61453
|
}
|
|
60322
61454
|
),
|
|
60323
|
-
/* @__PURE__ */ (0,
|
|
60324
|
-
/* @__PURE__ */ (0,
|
|
61455
|
+
/* @__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" }),
|
|
61456
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60325
61457
|
"button",
|
|
60326
61458
|
{
|
|
60327
61459
|
type: "button",
|
|
@@ -60334,10 +61466,10 @@ function WithdrawForm({
|
|
|
60334
61466
|
]
|
|
60335
61467
|
}
|
|
60336
61468
|
),
|
|
60337
|
-
/* @__PURE__ */ (0,
|
|
60338
|
-
/* @__PURE__ */ (0,
|
|
60339
|
-
/* @__PURE__ */ (0,
|
|
60340
|
-
exchangeRate > 0 && /* @__PURE__ */ (0,
|
|
61469
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-mt-1.5 uf-px-3", children: [
|
|
61470
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
|
|
61471
|
+
/* @__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}`) }),
|
|
61472
|
+
exchangeRate > 0 && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60341
61473
|
"button",
|
|
60342
61474
|
{
|
|
60343
61475
|
type: "button",
|
|
@@ -60345,49 +61477,49 @@ function WithdrawForm({
|
|
|
60345
61477
|
className: "uf-p-0.5 uf-rounded uf-transition-colors hover:uf-opacity-70",
|
|
60346
61478
|
style: { color: colors2.foregroundMuted },
|
|
60347
61479
|
title: "Switch unit",
|
|
60348
|
-
children: /* @__PURE__ */ (0,
|
|
61480
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ArrowUpDown, { className: "uf-w-3 uf-h-3" })
|
|
60349
61481
|
}
|
|
60350
61482
|
)
|
|
60351
61483
|
] }),
|
|
60352
|
-
/* @__PURE__ */ (0,
|
|
60353
|
-
balanceDisplay && /* @__PURE__ */ (0,
|
|
61484
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { children: [
|
|
61485
|
+
balanceDisplay && /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: [
|
|
60354
61486
|
t8.balance,
|
|
60355
61487
|
": ",
|
|
60356
61488
|
balanceDisplay
|
|
60357
61489
|
] }),
|
|
60358
|
-
isLoadingBalance && /* @__PURE__ */ (0,
|
|
61490
|
+
isLoadingBalance && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-h-3 uf-w-16 uf-bg-muted uf-rounded uf-animate-pulse" })
|
|
60359
61491
|
] })
|
|
60360
61492
|
] })
|
|
60361
61493
|
] }),
|
|
60362
|
-
/* @__PURE__ */ (0,
|
|
60363
|
-
/* @__PURE__ */ (0,
|
|
61494
|
+
/* @__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: [
|
|
61495
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
|
|
60364
61496
|
"button",
|
|
60365
61497
|
{
|
|
60366
61498
|
type: "button",
|
|
60367
61499
|
onClick: () => setDetailsExpanded(!detailsExpanded),
|
|
60368
61500
|
className: "uf-w-full uf-flex uf-items-center uf-justify-between uf-py-2.5",
|
|
60369
61501
|
children: [
|
|
60370
|
-
/* @__PURE__ */ (0,
|
|
60371
|
-
/* @__PURE__ */ (0,
|
|
60372
|
-
/* @__PURE__ */ (0,
|
|
61502
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
61503
|
+
/* @__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 } }) }),
|
|
61504
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
|
|
60373
61505
|
tCrypto.processingTime.label,
|
|
60374
61506
|
":",
|
|
60375
61507
|
" ",
|
|
60376
|
-
/* @__PURE__ */ (0,
|
|
61508
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: formatProcessingTime2(estimatedProcessingTime) })
|
|
60377
61509
|
] })
|
|
60378
61510
|
] }),
|
|
60379
|
-
detailsExpanded ? /* @__PURE__ */ (0,
|
|
61511
|
+
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
61512
|
]
|
|
60381
61513
|
}
|
|
60382
61514
|
),
|
|
60383
|
-
detailsExpanded && /* @__PURE__ */ (0,
|
|
60384
|
-
/* @__PURE__ */ (0,
|
|
60385
|
-
/* @__PURE__ */ (0,
|
|
60386
|
-
/* @__PURE__ */ (0,
|
|
61515
|
+
detailsExpanded && /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-pb-3 uf-space-y-2.5", children: [
|
|
61516
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
61517
|
+
/* @__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 } }) }),
|
|
61518
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
|
|
60387
61519
|
tCrypto.slippage.label,
|
|
60388
61520
|
":",
|
|
60389
61521
|
" ",
|
|
60390
|
-
/* @__PURE__ */ (0,
|
|
61522
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: [
|
|
60391
61523
|
tCrypto.slippage.auto,
|
|
60392
61524
|
" \u2022 ",
|
|
60393
61525
|
(maxSlippagePercent ?? 0.25).toFixed(2),
|
|
@@ -60395,13 +61527,13 @@ function WithdrawForm({
|
|
|
60395
61527
|
] })
|
|
60396
61528
|
] })
|
|
60397
61529
|
] }),
|
|
60398
|
-
/* @__PURE__ */ (0,
|
|
60399
|
-
/* @__PURE__ */ (0,
|
|
60400
|
-
/* @__PURE__ */ (0,
|
|
61530
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
61531
|
+
/* @__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 } }) }),
|
|
61532
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
|
|
60401
61533
|
tCrypto.priceImpact.label,
|
|
60402
61534
|
":",
|
|
60403
61535
|
" ",
|
|
60404
|
-
/* @__PURE__ */ (0,
|
|
61536
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: [
|
|
60405
61537
|
(priceImpactPercent ?? 0).toFixed(2),
|
|
60406
61538
|
"%"
|
|
60407
61539
|
] })
|
|
@@ -60409,18 +61541,18 @@ function WithdrawForm({
|
|
|
60409
61541
|
] })
|
|
60410
61542
|
] })
|
|
60411
61543
|
] }),
|
|
60412
|
-
!canWithdraw && !submitError && /* @__PURE__ */ (0,
|
|
61544
|
+
!canWithdraw && !submitError && /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
|
|
60413
61545
|
"div",
|
|
60414
61546
|
{
|
|
60415
61547
|
className: "uf-flex uf-items-start uf-gap-2.5 uf-p-3 uf-rounded-xl",
|
|
60416
61548
|
style: { backgroundColor: colors2.card, border: `1px solid ${colors2.border}` },
|
|
60417
61549
|
children: [
|
|
60418
|
-
/* @__PURE__ */ (0,
|
|
60419
|
-
/* @__PURE__ */ (0,
|
|
61550
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Wallet, { className: "uf-w-4 uf-h-4 uf-flex-shrink-0 uf-mt-0.5", style: { color: colors2.warning } }),
|
|
61551
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.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
61552
|
]
|
|
60421
61553
|
}
|
|
60422
61554
|
),
|
|
60423
|
-
isWalletMatch && connectedWalletName ? /* @__PURE__ */ (0,
|
|
61555
|
+
isWalletMatch && connectedWalletName ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60424
61556
|
"button",
|
|
60425
61557
|
{
|
|
60426
61558
|
type: "button",
|
|
@@ -60434,16 +61566,16 @@ function WithdrawForm({
|
|
|
60434
61566
|
borderRadius: components.button.borderRadius,
|
|
60435
61567
|
border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
|
|
60436
61568
|
},
|
|
60437
|
-
children: isSubmitting ? /* @__PURE__ */ (0,
|
|
60438
|
-
/* @__PURE__ */ (0,
|
|
61569
|
+
children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
|
|
61570
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
|
|
60439
61571
|
"Processing..."
|
|
60440
|
-
] }) : isOverBalance ? /* @__PURE__ */ (0,
|
|
60441
|
-
/* @__PURE__ */ (0,
|
|
61572
|
+
] }) : 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: [
|
|
61573
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Wallet, { className: "uf-w-4 uf-h-4" }),
|
|
60442
61574
|
"Withdraw from ",
|
|
60443
61575
|
connectedWalletName
|
|
60444
61576
|
] })
|
|
60445
61577
|
}
|
|
60446
|
-
) : /* @__PURE__ */ (0,
|
|
61578
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60447
61579
|
"button",
|
|
60448
61580
|
{
|
|
60449
61581
|
type: "button",
|
|
@@ -60457,17 +61589,17 @@ function WithdrawForm({
|
|
|
60457
61589
|
borderRadius: components.button.borderRadius,
|
|
60458
61590
|
border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
|
|
60459
61591
|
},
|
|
60460
|
-
children: isSubmitting ? /* @__PURE__ */ (0,
|
|
60461
|
-
/* @__PURE__ */ (0,
|
|
61592
|
+
children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2", children: [
|
|
61593
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
|
|
60462
61594
|
"Processing..."
|
|
60463
61595
|
] }) : isOverBalance ? "Insufficient balance" : isBelowMinimum ? "Minimum amount not met" : submitError ? "Withdrawal failed. Try again" : t8.withdraw
|
|
60464
61596
|
}
|
|
60465
61597
|
),
|
|
60466
|
-
/* @__PURE__ */ (0,
|
|
60467
|
-
/* @__PURE__ */ (0,
|
|
60468
|
-
/* @__PURE__ */ (0,
|
|
61598
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-text-xs uf-pt-1", children: [
|
|
61599
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { children: footerLeft }),
|
|
61600
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(DepositFooterLinks, { onGlossaryClick: () => setGlossaryOpen(true) })
|
|
60469
61601
|
] }),
|
|
60470
|
-
/* @__PURE__ */ (0,
|
|
61602
|
+
/* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
|
|
60471
61603
|
GlossaryModal,
|
|
60472
61604
|
{
|
|
60473
61605
|
open: glossaryOpen,
|
|
@@ -60513,7 +61645,7 @@ function WithdrawExecutionItem({
|
|
|
60513
61645
|
return "$0.00";
|
|
60514
61646
|
}
|
|
60515
61647
|
};
|
|
60516
|
-
return /* @__PURE__ */ (0,
|
|
61648
|
+
return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
|
|
60517
61649
|
"button",
|
|
60518
61650
|
{
|
|
60519
61651
|
onClick,
|
|
@@ -60524,8 +61656,8 @@ function WithdrawExecutionItem({
|
|
|
60524
61656
|
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
60525
61657
|
},
|
|
60526
61658
|
children: [
|
|
60527
|
-
/* @__PURE__ */ (0,
|
|
60528
|
-
/* @__PURE__ */ (0,
|
|
61659
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "uf-relative uf-flex-shrink-0 uf-w-9 uf-h-9", children: [
|
|
61660
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60529
61661
|
"img",
|
|
60530
61662
|
{
|
|
60531
61663
|
src: execution.destination_token_metadata?.icon_url || getIconUrl("/icons/tokens/svg/usdc.svg"),
|
|
@@ -60536,12 +61668,12 @@ function WithdrawExecutionItem({
|
|
|
60536
61668
|
className: "uf-rounded-full uf-w-9 uf-h-9"
|
|
60537
61669
|
}
|
|
60538
61670
|
),
|
|
60539
|
-
isPending ? /* @__PURE__ */ (0,
|
|
61671
|
+
isPending ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60540
61672
|
"div",
|
|
60541
61673
|
{
|
|
60542
61674
|
className: "uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-rounded-full uf-p-0.5",
|
|
60543
61675
|
style: { backgroundColor: colors2.warning },
|
|
60544
|
-
children: /* @__PURE__ */ (0,
|
|
61676
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60545
61677
|
"svg",
|
|
60546
61678
|
{
|
|
60547
61679
|
width: "10",
|
|
@@ -60549,7 +61681,7 @@ function WithdrawExecutionItem({
|
|
|
60549
61681
|
viewBox: "0 0 12 12",
|
|
60550
61682
|
fill: "none",
|
|
60551
61683
|
className: "uf-animate-spin uf-block",
|
|
60552
|
-
children: /* @__PURE__ */ (0,
|
|
61684
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60553
61685
|
"path",
|
|
60554
61686
|
{
|
|
60555
61687
|
d: "M6 1V3M6 9V11M1 6H3M9 6H11M2.5 2.5L4 4M8 8L9.5 9.5M2.5 9.5L4 8M8 4L9.5 2.5",
|
|
@@ -60561,12 +61693,12 @@ function WithdrawExecutionItem({
|
|
|
60561
61693
|
}
|
|
60562
61694
|
)
|
|
60563
61695
|
}
|
|
60564
|
-
) : /* @__PURE__ */ (0,
|
|
61696
|
+
) : /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60565
61697
|
"div",
|
|
60566
61698
|
{
|
|
60567
61699
|
className: "uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-rounded-full uf-p-0.5",
|
|
60568
61700
|
style: { backgroundColor: colors2.success },
|
|
60569
|
-
children: /* @__PURE__ */ (0,
|
|
61701
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60570
61702
|
"svg",
|
|
60571
61703
|
{
|
|
60572
61704
|
width: "10",
|
|
@@ -60574,7 +61706,7 @@ function WithdrawExecutionItem({
|
|
|
60574
61706
|
viewBox: "0 0 12 12",
|
|
60575
61707
|
fill: "none",
|
|
60576
61708
|
className: "uf-block",
|
|
60577
|
-
children: /* @__PURE__ */ (0,
|
|
61709
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60578
61710
|
"path",
|
|
60579
61711
|
{
|
|
60580
61712
|
d: "M10 3L4.5 8.5L2 6",
|
|
@@ -60589,8 +61721,8 @@ function WithdrawExecutionItem({
|
|
|
60589
61721
|
}
|
|
60590
61722
|
)
|
|
60591
61723
|
] }),
|
|
60592
|
-
/* @__PURE__ */ (0,
|
|
60593
|
-
/* @__PURE__ */ (0,
|
|
61724
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "uf-flex-1 uf-min-w-0", children: [
|
|
61725
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60594
61726
|
"h3",
|
|
60595
61727
|
{
|
|
60596
61728
|
className: "uf-font-medium uf-text-sm uf-leading-tight",
|
|
@@ -60601,7 +61733,7 @@ function WithdrawExecutionItem({
|
|
|
60601
61733
|
children: isPending ? "Withdrawal processing" : "Withdrawal completed"
|
|
60602
61734
|
}
|
|
60603
61735
|
),
|
|
60604
|
-
/* @__PURE__ */ (0,
|
|
61736
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60605
61737
|
"p",
|
|
60606
61738
|
{
|
|
60607
61739
|
className: "uf-text-xs uf-leading-tight",
|
|
@@ -60613,7 +61745,7 @@ function WithdrawExecutionItem({
|
|
|
60613
61745
|
}
|
|
60614
61746
|
)
|
|
60615
61747
|
] }),
|
|
60616
|
-
/* @__PURE__ */ (0,
|
|
61748
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60617
61749
|
"span",
|
|
60618
61750
|
{
|
|
60619
61751
|
className: "uf-font-medium uf-text-sm uf-flex-shrink-0",
|
|
@@ -60624,7 +61756,7 @@ function WithdrawExecutionItem({
|
|
|
60624
61756
|
children: formatUsdAmount2(execution.source_amount_usd || "0")
|
|
60625
61757
|
}
|
|
60626
61758
|
),
|
|
60627
|
-
/* @__PURE__ */ (0,
|
|
61759
|
+
/* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
|
|
60628
61760
|
ChevronRight,
|
|
60629
61761
|
{
|
|
60630
61762
|
className: "uf-w-4 uf-h-4 uf-flex-shrink-0",
|
|
@@ -60647,9 +61779,9 @@ function WithdrawConfirmingView({
|
|
|
60647
61779
|
onViewTracker
|
|
60648
61780
|
}) {
|
|
60649
61781
|
const { colors: colors2, fonts, components } = useTheme();
|
|
60650
|
-
const [showButton, setShowButton] = (0,
|
|
61782
|
+
const [showButton, setShowButton] = (0, import_react31.useState)(false);
|
|
60651
61783
|
const latestExecution = executions.length > 0 ? executions[executions.length - 1] : null;
|
|
60652
|
-
(0,
|
|
61784
|
+
(0, import_react31.useEffect)(() => {
|
|
60653
61785
|
if (latestExecution) return;
|
|
60654
61786
|
const timer = setTimeout(() => setShowButton(true), SHOW_BUTTON_DELAY_MS);
|
|
60655
61787
|
return () => clearTimeout(timer);
|
|
@@ -60657,11 +61789,11 @@ function WithdrawConfirmingView({
|
|
|
60657
61789
|
const btnRadius = components.button.borderRadius;
|
|
60658
61790
|
const btnBorder = `${components.button.borderWidth}px solid ${components.button.borderColor}`;
|
|
60659
61791
|
if (latestExecution) {
|
|
60660
|
-
return /* @__PURE__ */ (0,
|
|
60661
|
-
/* @__PURE__ */ (0,
|
|
60662
|
-
/* @__PURE__ */ (0,
|
|
60663
|
-
/* @__PURE__ */ (0,
|
|
60664
|
-
/* @__PURE__ */ (0,
|
|
61792
|
+
return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
|
|
61793
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)(DepositHeader, { title: "Withdrawal Details", showClose: true, onClose }),
|
|
61794
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)(DepositDetailContent, { execution: latestExecution, variant: "withdraw" }),
|
|
61795
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "uf-flex uf-gap-2 uf-px-2 uf-pt-2", children: [
|
|
61796
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
60665
61797
|
"button",
|
|
60666
61798
|
{
|
|
60667
61799
|
type: "button",
|
|
@@ -60677,7 +61809,7 @@ function WithdrawConfirmingView({
|
|
|
60677
61809
|
children: "Withdrawal History"
|
|
60678
61810
|
}
|
|
60679
61811
|
),
|
|
60680
|
-
/* @__PURE__ */ (0,
|
|
61812
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
60681
61813
|
"button",
|
|
60682
61814
|
{
|
|
60683
61815
|
type: "button",
|
|
@@ -60694,7 +61826,7 @@ function WithdrawConfirmingView({
|
|
|
60694
61826
|
}
|
|
60695
61827
|
)
|
|
60696
61828
|
] }),
|
|
60697
|
-
/* @__PURE__ */ (0,
|
|
61829
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
60698
61830
|
PoweredByUnifold,
|
|
60699
61831
|
{
|
|
60700
61832
|
color: colors2.foregroundMuted,
|
|
@@ -60703,15 +61835,15 @@ function WithdrawConfirmingView({
|
|
|
60703
61835
|
) })
|
|
60704
61836
|
] });
|
|
60705
61837
|
}
|
|
60706
|
-
return /* @__PURE__ */ (0,
|
|
60707
|
-
/* @__PURE__ */ (0,
|
|
60708
|
-
/* @__PURE__ */ (0,
|
|
60709
|
-
/* @__PURE__ */ (0,
|
|
61838
|
+
return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
|
|
61839
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)(DepositHeader, { title: "Withdrawal Status", showClose: true, onClose }),
|
|
61840
|
+
/* @__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: [
|
|
61841
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
60710
61842
|
"div",
|
|
60711
61843
|
{
|
|
60712
61844
|
className: "uf-w-20 uf-h-20 uf-rounded-full uf-flex uf-items-center uf-justify-center uf-mb-6",
|
|
60713
61845
|
style: { backgroundColor: `${colors2.primary}20` },
|
|
60714
|
-
children: /* @__PURE__ */ (0,
|
|
61846
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
60715
61847
|
"svg",
|
|
60716
61848
|
{
|
|
60717
61849
|
width: "40",
|
|
@@ -60719,7 +61851,7 @@ function WithdrawConfirmingView({
|
|
|
60719
61851
|
viewBox: "0 0 24 24",
|
|
60720
61852
|
fill: "none",
|
|
60721
61853
|
className: "uf-animate-spin",
|
|
60722
|
-
children: /* @__PURE__ */ (0,
|
|
61854
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
60723
61855
|
"path",
|
|
60724
61856
|
{
|
|
60725
61857
|
d: "M21 12a9 9 0 1 1-6.22-8.56",
|
|
@@ -60732,7 +61864,7 @@ function WithdrawConfirmingView({
|
|
|
60732
61864
|
)
|
|
60733
61865
|
}
|
|
60734
61866
|
),
|
|
60735
|
-
/* @__PURE__ */ (0,
|
|
61867
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
60736
61868
|
"h3",
|
|
60737
61869
|
{
|
|
60738
61870
|
className: "uf-text-xl uf-mb-2",
|
|
@@ -60740,7 +61872,7 @@ function WithdrawConfirmingView({
|
|
|
60740
61872
|
children: "Checking Withdrawal"
|
|
60741
61873
|
}
|
|
60742
61874
|
),
|
|
60743
|
-
/* @__PURE__ */ (0,
|
|
61875
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
|
|
60744
61876
|
"p",
|
|
60745
61877
|
{
|
|
60746
61878
|
className: "uf-text-sm uf-text-center",
|
|
@@ -60756,7 +61888,7 @@ function WithdrawConfirmingView({
|
|
|
60756
61888
|
}
|
|
60757
61889
|
)
|
|
60758
61890
|
] }),
|
|
60759
|
-
showButton && /* @__PURE__ */ (0,
|
|
61891
|
+
showButton && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "uf-px-1 uf-pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
60760
61892
|
"button",
|
|
60761
61893
|
{
|
|
60762
61894
|
type: "button",
|
|
@@ -60772,7 +61904,7 @@ function WithdrawConfirmingView({
|
|
|
60772
61904
|
children: "Withdrawal History"
|
|
60773
61905
|
}
|
|
60774
61906
|
) }),
|
|
60775
|
-
/* @__PURE__ */ (0,
|
|
61907
|
+
/* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
|
|
60776
61908
|
PoweredByUnifold,
|
|
60777
61909
|
{
|
|
60778
61910
|
color: colors2.foregroundMuted,
|
|
@@ -60802,14 +61934,14 @@ function WithdrawModal({
|
|
|
60802
61934
|
hideOverlay = false
|
|
60803
61935
|
}) {
|
|
60804
61936
|
const { colors: colors2, fonts, components } = useTheme();
|
|
60805
|
-
const [containerEl, setContainerEl] = (0,
|
|
60806
|
-
const containerCallbackRef = (0,
|
|
61937
|
+
const [containerEl, setContainerEl] = (0, import_react28.useState)(null);
|
|
61938
|
+
const containerCallbackRef = (0, import_react28.useCallback)((el) => {
|
|
60807
61939
|
setContainerEl(el);
|
|
60808
61940
|
}, []);
|
|
60809
|
-
const [resolvedTheme, setResolvedTheme] = (0,
|
|
61941
|
+
const [resolvedTheme, setResolvedTheme] = (0, import_react28.useState)(
|
|
60810
61942
|
theme === "auto" ? "dark" : theme
|
|
60811
61943
|
);
|
|
60812
|
-
(0,
|
|
61944
|
+
(0, import_react28.useEffect)(() => {
|
|
60813
61945
|
if (theme === "auto") {
|
|
60814
61946
|
const mq = window.matchMedia("(prefers-color-scheme: dark)");
|
|
60815
61947
|
setResolvedTheme(mq.matches ? "dark" : "light");
|
|
@@ -60838,12 +61970,12 @@ function WithdrawModal({
|
|
|
60838
61970
|
publishableKey,
|
|
60839
61971
|
enabled: open
|
|
60840
61972
|
});
|
|
60841
|
-
const [selectedToken, setSelectedToken] = (0,
|
|
60842
|
-
const [selectedChain, setSelectedChain] = (0,
|
|
60843
|
-
const [detectedWallet, setDetectedWallet] = (0,
|
|
61973
|
+
const [selectedToken, setSelectedToken] = (0, import_react28.useState)(null);
|
|
61974
|
+
const [selectedChain, setSelectedChain] = (0, import_react28.useState)(null);
|
|
61975
|
+
const [detectedWallet, setDetectedWallet] = (0, import_react28.useState)(null);
|
|
60844
61976
|
const connectedWalletName = detectedWallet?.name ?? null;
|
|
60845
61977
|
const isWalletMatch = !!detectedWallet;
|
|
60846
|
-
(0,
|
|
61978
|
+
(0, import_react28.useEffect)(() => {
|
|
60847
61979
|
if (!senderAddress || !open) {
|
|
60848
61980
|
setDetectedWallet(null);
|
|
60849
61981
|
return;
|
|
@@ -60856,10 +61988,10 @@ function WithdrawModal({
|
|
|
60856
61988
|
cancelled = true;
|
|
60857
61989
|
};
|
|
60858
61990
|
}, [senderAddress, sourceChainType, open]);
|
|
60859
|
-
const [view, setView] = (0,
|
|
60860
|
-
const [withdrawDepositWalletId, setWithdrawDepositWalletId] = (0,
|
|
60861
|
-
const [selectedExecution, setSelectedExecution] = (0,
|
|
60862
|
-
const [submittedTxInfo, setSubmittedTxInfo] = (0,
|
|
61991
|
+
const [view, setView] = (0, import_react28.useState)("form");
|
|
61992
|
+
const [withdrawDepositWalletId, setWithdrawDepositWalletId] = (0, import_react28.useState)();
|
|
61993
|
+
const [selectedExecution, setSelectedExecution] = (0, import_react28.useState)(null);
|
|
61994
|
+
const [submittedTxInfo, setSubmittedTxInfo] = (0, import_react28.useState)(null);
|
|
60863
61995
|
const { executions: realtimeExecutions } = useWithdrawPolling({
|
|
60864
61996
|
userId: externalUserId,
|
|
60865
61997
|
publishableKey,
|
|
@@ -60874,7 +62006,7 @@ function WithdrawModal({
|
|
|
60874
62006
|
refetchInterval: view === "tracker" || view === "detail" ? 5e3 : 15e3
|
|
60875
62007
|
});
|
|
60876
62008
|
const allWithdrawals = allWithdrawalsData?.data ?? [];
|
|
60877
|
-
const handleDepositWalletCreation = (0,
|
|
62009
|
+
const handleDepositWalletCreation = (0, import_react28.useCallback)(async (params) => {
|
|
60878
62010
|
const { data: wallets } = await createDepositAddress(
|
|
60879
62011
|
{
|
|
60880
62012
|
external_user_id: externalUserId,
|
|
@@ -60893,11 +62025,11 @@ function WithdrawModal({
|
|
|
60893
62025
|
setWithdrawDepositWalletId(depositWallet.id);
|
|
60894
62026
|
return depositWallet;
|
|
60895
62027
|
}, [externalUserId, publishableKey, sourceChainType]);
|
|
60896
|
-
const handleWithdrawSubmitted = (0,
|
|
62028
|
+
const handleWithdrawSubmitted = (0, import_react28.useCallback)((txInfo) => {
|
|
60897
62029
|
setSubmittedTxInfo(txInfo);
|
|
60898
62030
|
setView("confirming");
|
|
60899
62031
|
}, []);
|
|
60900
|
-
(0,
|
|
62032
|
+
(0, import_react28.useEffect)(() => {
|
|
60901
62033
|
if (!destinationTokens.length || selectedToken) return;
|
|
60902
62034
|
const first = destinationTokens[0];
|
|
60903
62035
|
if (first?.chains.length > 0) {
|
|
@@ -60905,8 +62037,8 @@ function WithdrawModal({
|
|
|
60905
62037
|
setSelectedChain(first.chains[0]);
|
|
60906
62038
|
}
|
|
60907
62039
|
}, [destinationTokens, selectedToken]);
|
|
60908
|
-
const resetViewTimeoutRef = (0,
|
|
60909
|
-
const handleClose = (0,
|
|
62040
|
+
const resetViewTimeoutRef = (0, import_react28.useRef)(null);
|
|
62041
|
+
const handleClose = (0, import_react28.useCallback)(() => {
|
|
60910
62042
|
onOpenChange(false);
|
|
60911
62043
|
if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
|
|
60912
62044
|
resetViewTimeoutRef.current = setTimeout(() => {
|
|
@@ -60919,7 +62051,7 @@ function WithdrawModal({
|
|
|
60919
62051
|
resetViewTimeoutRef.current = null;
|
|
60920
62052
|
}, 200);
|
|
60921
62053
|
}, [onOpenChange]);
|
|
60922
|
-
(0,
|
|
62054
|
+
(0, import_react28.useLayoutEffect)(() => {
|
|
60923
62055
|
if (!open) return;
|
|
60924
62056
|
if (resetViewTimeoutRef.current) {
|
|
60925
62057
|
clearTimeout(resetViewTimeoutRef.current);
|
|
@@ -60932,17 +62064,17 @@ function WithdrawModal({
|
|
|
60932
62064
|
setSubmittedTxInfo(null);
|
|
60933
62065
|
setWithdrawDepositWalletId(void 0);
|
|
60934
62066
|
}, [open]);
|
|
60935
|
-
(0,
|
|
62067
|
+
(0, import_react28.useEffect)(() => () => {
|
|
60936
62068
|
if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
|
|
60937
62069
|
}, []);
|
|
60938
|
-
const handleTokenSymbolChange = (0,
|
|
62070
|
+
const handleTokenSymbolChange = (0, import_react28.useCallback)((symbol) => {
|
|
60939
62071
|
const tok = destinationTokens.find((t11) => t11.symbol === symbol);
|
|
60940
62072
|
if (tok) {
|
|
60941
62073
|
setSelectedToken(tok);
|
|
60942
62074
|
if (tok.chains.length > 0) setSelectedChain(tok.chains[0]);
|
|
60943
62075
|
}
|
|
60944
62076
|
}, [destinationTokens]);
|
|
60945
|
-
const handleChainKeyChange = (0,
|
|
62077
|
+
const handleChainKeyChange = (0, import_react28.useCallback)((chainKey) => {
|
|
60946
62078
|
if (!selectedToken) return;
|
|
60947
62079
|
const chain = selectedToken.chains.find((c) => getChainKey5(c.chain_id, c.chain_type) === chainKey);
|
|
60948
62080
|
if (chain) setSelectedChain(chain);
|
|
@@ -60950,8 +62082,8 @@ function WithdrawModal({
|
|
|
60950
62082
|
const isSourceSupported = sourceValidation?.isSupported ?? null;
|
|
60951
62083
|
const canWithdraw = !!onWithdraw || isWalletMatch;
|
|
60952
62084
|
const isAnyLoading = tokensLoading || isCheckingSourceToken;
|
|
60953
|
-
const withdrawPoweredByFooter = /* @__PURE__ */ (0,
|
|
60954
|
-
return /* @__PURE__ */ (0,
|
|
62085
|
+
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" }) });
|
|
62086
|
+
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
62087
|
DialogContent2,
|
|
60956
62088
|
{
|
|
60957
62089
|
ref: hideOverlay ? containerCallbackRef : void 0,
|
|
@@ -60960,7 +62092,7 @@ function WithdrawModal({
|
|
|
60960
62092
|
style: { backgroundColor: colors2.background },
|
|
60961
62093
|
onPointerDownOutside: (e) => e.preventDefault(),
|
|
60962
62094
|
onInteractOutside: (e) => e.preventDefault(),
|
|
60963
|
-
children: /* @__PURE__ */ (0,
|
|
62095
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ThemeStyleInjector, { children: view === "confirming" && submittedTxInfo ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
60964
62096
|
WithdrawConfirmingView,
|
|
60965
62097
|
{
|
|
60966
62098
|
txInfo: submittedTxInfo,
|
|
@@ -60968,18 +62100,18 @@ function WithdrawModal({
|
|
|
60968
62100
|
onClose: handleClose,
|
|
60969
62101
|
onViewTracker: () => setView("tracker")
|
|
60970
62102
|
}
|
|
60971
|
-
) : view === "detail" && selectedExecution ? /* @__PURE__ */ (0,
|
|
60972
|
-
/* @__PURE__ */ (0,
|
|
62103
|
+
) : view === "detail" && selectedExecution ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
|
|
62104
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(DepositHeader, { title: "Withdrawal Details", showBack: true, showClose: !hideOverlay, onBack: () => {
|
|
60973
62105
|
setSelectedExecution(null);
|
|
60974
62106
|
setView("tracker");
|
|
60975
62107
|
}, onClose: handleClose }),
|
|
60976
|
-
/* @__PURE__ */ (0,
|
|
62108
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(DepositDetailContent, { execution: selectedExecution, variant: "withdraw" }),
|
|
60977
62109
|
withdrawPoweredByFooter
|
|
60978
62110
|
] }) : view === "tracker" ? (
|
|
60979
62111
|
/* ---------- Tracker view: execution list ---------- */
|
|
60980
|
-
/* @__PURE__ */ (0,
|
|
60981
|
-
/* @__PURE__ */ (0,
|
|
60982
|
-
/* @__PURE__ */ (0,
|
|
62112
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
|
|
62113
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(DepositHeader, { title: "Withdrawal History", showBack: true, showClose: !hideOverlay, onBack: () => setView("form"), onClose: handleClose }),
|
|
62114
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "uf-flex uf-flex-col uf-gap-2", style: { minHeight: 200 }, 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
62115
|
WithdrawExecutionItem,
|
|
60984
62116
|
{
|
|
60985
62117
|
execution: ex,
|
|
@@ -60994,15 +62126,15 @@ function WithdrawModal({
|
|
|
60994
62126
|
] })
|
|
60995
62127
|
) : (
|
|
60996
62128
|
/* ---------- 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,
|
|
62129
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
|
|
62130
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(DepositHeader, { title: modalTitle || t9.title, showClose: !hideOverlay, onClose: handleClose }),
|
|
62131
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-3", children: [
|
|
62132
|
+
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: [
|
|
62133
|
+
/* @__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" }) }),
|
|
62134
|
+
/* @__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" }),
|
|
62135
|
+
/* @__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 })
|
|
62136
|
+
] }) : /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
|
|
62137
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
61006
62138
|
WithdrawDoubleInput,
|
|
61007
62139
|
{
|
|
61008
62140
|
tokens: destinationTokens,
|
|
@@ -61013,7 +62145,7 @@ function WithdrawModal({
|
|
|
61013
62145
|
isLoading: tokensLoading
|
|
61014
62146
|
}
|
|
61015
62147
|
),
|
|
61016
|
-
/* @__PURE__ */ (0,
|
|
62148
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
|
|
61017
62149
|
WithdrawForm,
|
|
61018
62150
|
{
|
|
61019
62151
|
publishableKey,
|
|
@@ -61039,16 +62171,16 @@ function WithdrawModal({
|
|
|
61039
62171
|
onWithdrawError,
|
|
61040
62172
|
onDepositWalletCreation: handleDepositWalletCreation,
|
|
61041
62173
|
onWithdrawSubmitted: handleWithdrawSubmitted,
|
|
61042
|
-
footerLeft: /* @__PURE__ */ (0,
|
|
62174
|
+
footerLeft: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
|
|
61043
62175
|
"button",
|
|
61044
62176
|
{
|
|
61045
62177
|
onClick: () => setView("tracker"),
|
|
61046
62178
|
className: "uf-flex uf-items-center uf-gap-1 uf-transition-colors hover:uf-opacity-70",
|
|
61047
62179
|
style: { color: colors2.foregroundMuted },
|
|
61048
62180
|
children: [
|
|
61049
|
-
/* @__PURE__ */ (0,
|
|
62181
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Clock, { className: "uf-w-3.5 uf-h-3.5" }),
|
|
61050
62182
|
"Withdrawal History",
|
|
61051
|
-
/* @__PURE__ */ (0,
|
|
62183
|
+
/* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ChevronRight, { className: "uf-w-3 uf-h-3" })
|
|
61052
62184
|
]
|
|
61053
62185
|
}
|
|
61054
62186
|
)
|
|
@@ -61072,6 +62204,10 @@ function UnifoldProvider2({
|
|
|
61072
62204
|
const [depositConfig, setDepositConfig] = (0, import_react.useState)(
|
|
61073
62205
|
null
|
|
61074
62206
|
);
|
|
62207
|
+
const [isCheckoutOpen, setIsCheckoutOpen] = (0, import_react.useState)(false);
|
|
62208
|
+
const [checkoutConfig, setCheckoutConfig] = (0, import_react.useState)(
|
|
62209
|
+
null
|
|
62210
|
+
);
|
|
61075
62211
|
const [isWithdrawOpen, setIsWithdrawOpen] = (0, import_react.useState)(false);
|
|
61076
62212
|
const [withdrawConfig, setWithdrawConfig] = (0, import_react.useState)(
|
|
61077
62213
|
null
|
|
@@ -61171,6 +62307,75 @@ function UnifoldProvider2({
|
|
|
61171
62307
|
depositPromiseRef.current = null;
|
|
61172
62308
|
}
|
|
61173
62309
|
}, [depositConfig]);
|
|
62310
|
+
const checkoutPromiseRef = import_react.default.useRef(null);
|
|
62311
|
+
const checkoutConfigRef = import_react.default.useRef(null);
|
|
62312
|
+
checkoutConfigRef.current = checkoutConfig;
|
|
62313
|
+
const checkoutCloseTimeoutRef = import_react.default.useRef(null);
|
|
62314
|
+
const checkoutCloseGuardRef = import_react.default.useRef(false);
|
|
62315
|
+
const beginCheckout = (0, import_react.useCallback)((config2) => {
|
|
62316
|
+
if (checkoutCloseTimeoutRef.current) {
|
|
62317
|
+
clearTimeout(checkoutCloseTimeoutRef.current);
|
|
62318
|
+
checkoutCloseTimeoutRef.current = null;
|
|
62319
|
+
}
|
|
62320
|
+
checkoutCloseGuardRef.current = false;
|
|
62321
|
+
if (checkoutPromiseRef.current) {
|
|
62322
|
+
console.warn("[UnifoldProvider] A checkout is already in progress. Cancelling previous checkout.");
|
|
62323
|
+
checkoutPromiseRef.current.reject({
|
|
62324
|
+
message: "Checkout cancelled - new checkout started",
|
|
62325
|
+
code: "CHECKOUT_SUPERSEDED"
|
|
62326
|
+
});
|
|
62327
|
+
checkoutPromiseRef.current = null;
|
|
62328
|
+
}
|
|
62329
|
+
const promise = new Promise((resolve, reject) => {
|
|
62330
|
+
checkoutPromiseRef.current = { resolve, reject };
|
|
62331
|
+
});
|
|
62332
|
+
promise.catch(() => {
|
|
62333
|
+
});
|
|
62334
|
+
setCheckoutConfig(config2);
|
|
62335
|
+
setIsCheckoutOpen(true);
|
|
62336
|
+
return promise;
|
|
62337
|
+
}, []);
|
|
62338
|
+
const closeCheckout = (0, import_react.useCallback)(() => {
|
|
62339
|
+
if (checkoutCloseGuardRef.current) {
|
|
62340
|
+
return;
|
|
62341
|
+
}
|
|
62342
|
+
checkoutCloseGuardRef.current = true;
|
|
62343
|
+
const promiseToReject = checkoutPromiseRef.current;
|
|
62344
|
+
checkoutPromiseRef.current = null;
|
|
62345
|
+
if (checkoutConfigRef.current?.onClose) {
|
|
62346
|
+
checkoutConfigRef.current.onClose();
|
|
62347
|
+
}
|
|
62348
|
+
if (promiseToReject) {
|
|
62349
|
+
promiseToReject.reject({
|
|
62350
|
+
message: "Checkout cancelled by user",
|
|
62351
|
+
code: "CHECKOUT_CANCELLED"
|
|
62352
|
+
});
|
|
62353
|
+
}
|
|
62354
|
+
setIsCheckoutOpen(false);
|
|
62355
|
+
checkoutCloseTimeoutRef.current = setTimeout(() => {
|
|
62356
|
+
setCheckoutConfig(null);
|
|
62357
|
+
checkoutCloseTimeoutRef.current = null;
|
|
62358
|
+
}, 200);
|
|
62359
|
+
}, []);
|
|
62360
|
+
const handleCheckoutSuccess = (0, import_react.useCallback)((data) => {
|
|
62361
|
+
if (checkoutConfig?.onSuccess) {
|
|
62362
|
+
checkoutConfig.onSuccess(data);
|
|
62363
|
+
}
|
|
62364
|
+
if (checkoutPromiseRef.current) {
|
|
62365
|
+
checkoutPromiseRef.current.resolve(data);
|
|
62366
|
+
checkoutPromiseRef.current = null;
|
|
62367
|
+
}
|
|
62368
|
+
}, [checkoutConfig]);
|
|
62369
|
+
const handleCheckoutError = (0, import_react.useCallback)((error) => {
|
|
62370
|
+
console.error("[UnifoldProvider] Checkout error:", error);
|
|
62371
|
+
if (checkoutConfig?.onError) {
|
|
62372
|
+
checkoutConfig.onError(error);
|
|
62373
|
+
}
|
|
62374
|
+
if (checkoutPromiseRef.current) {
|
|
62375
|
+
checkoutPromiseRef.current.reject(error);
|
|
62376
|
+
checkoutPromiseRef.current = null;
|
|
62377
|
+
}
|
|
62378
|
+
}, [checkoutConfig]);
|
|
61174
62379
|
const beginWithdraw = (0, import_react.useCallback)((config2) => {
|
|
61175
62380
|
if (withdrawCloseTimeoutRef.current) {
|
|
61176
62381
|
clearTimeout(withdrawCloseTimeoutRef.current);
|
|
@@ -61239,16 +62444,16 @@ function UnifoldProvider2({
|
|
|
61239
62444
|
() => ({
|
|
61240
62445
|
beginDeposit,
|
|
61241
62446
|
closeDeposit,
|
|
61242
|
-
|
|
61243
|
-
|
|
62447
|
+
beginCheckout,
|
|
62448
|
+
closeCheckout,
|
|
61244
62449
|
beginWithdraw,
|
|
61245
62450
|
closeWithdraw,
|
|
61246
62451
|
handleWithdrawSuccess,
|
|
61247
62452
|
handleWithdrawError
|
|
61248
62453
|
}),
|
|
61249
|
-
[beginDeposit, closeDeposit,
|
|
62454
|
+
[beginDeposit, closeDeposit, beginCheckout, closeCheckout, beginWithdraw, closeWithdraw, handleWithdrawSuccess, handleWithdrawError]
|
|
61250
62455
|
);
|
|
61251
|
-
return /* @__PURE__ */ (0,
|
|
62456
|
+
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
62457
|
ThemeProvider,
|
|
61253
62458
|
{
|
|
61254
62459
|
mode: resolvedTheme,
|
|
@@ -61259,7 +62464,20 @@ function UnifoldProvider2({
|
|
|
61259
62464
|
components: config?.components,
|
|
61260
62465
|
children: [
|
|
61261
62466
|
children,
|
|
61262
|
-
|
|
62467
|
+
checkoutConfig && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
|
|
62468
|
+
CheckoutModal,
|
|
62469
|
+
{
|
|
62470
|
+
open: isCheckoutOpen,
|
|
62471
|
+
onOpenChange: closeCheckout,
|
|
62472
|
+
clientSecret: checkoutConfig.clientSecret,
|
|
62473
|
+
publishableKey,
|
|
62474
|
+
enableConnectWallet: config?.enableConnectWallet,
|
|
62475
|
+
theme: resolvedTheme,
|
|
62476
|
+
onCheckoutSuccess: handleCheckoutSuccess,
|
|
62477
|
+
onCheckoutError: handleCheckoutError
|
|
62478
|
+
}
|
|
62479
|
+
),
|
|
62480
|
+
withdrawConfig && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
|
|
61263
62481
|
WithdrawModal,
|
|
61264
62482
|
{
|
|
61265
62483
|
open: isWithdrawOpen,
|
|
@@ -61279,7 +62497,7 @@ function UnifoldProvider2({
|
|
|
61279
62497
|
theme: resolvedTheme
|
|
61280
62498
|
}
|
|
61281
62499
|
),
|
|
61282
|
-
depositConfig && /* @__PURE__ */ (0,
|
|
62500
|
+
depositConfig && /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
|
|
61283
62501
|
DepositModal,
|
|
61284
62502
|
{
|
|
61285
62503
|
open: isOpen,
|
|
@@ -61330,6 +62548,9 @@ function useUnifold2() {
|
|
|
61330
62548
|
beginDeposit: () => Promise.reject(new Error("SSR not supported")),
|
|
61331
62549
|
closeDeposit: () => {
|
|
61332
62550
|
},
|
|
62551
|
+
beginCheckout: () => Promise.reject(new Error("SSR not supported")),
|
|
62552
|
+
closeCheckout: () => {
|
|
62553
|
+
},
|
|
61333
62554
|
beginWithdraw: () => Promise.reject(new Error("SSR not supported")),
|
|
61334
62555
|
closeWithdraw: () => {
|
|
61335
62556
|
}
|
|
@@ -61342,15 +62563,17 @@ function useUnifold2() {
|
|
|
61342
62563
|
publishableKey: baseContext.publishableKey,
|
|
61343
62564
|
beginDeposit: connectContext.beginDeposit,
|
|
61344
62565
|
closeDeposit: connectContext.closeDeposit,
|
|
62566
|
+
beginCheckout: connectContext.beginCheckout,
|
|
62567
|
+
closeCheckout: connectContext.closeCheckout,
|
|
61345
62568
|
beginWithdraw: connectContext.beginWithdraw,
|
|
61346
62569
|
closeWithdraw: connectContext.closeWithdraw
|
|
61347
62570
|
};
|
|
61348
62571
|
}
|
|
61349
62572
|
|
|
61350
62573
|
// src/unifold.tsx
|
|
61351
|
-
var UnifoldBridge = (0,
|
|
62574
|
+
var UnifoldBridge = (0, import_react33.forwardRef)((_, ref) => {
|
|
61352
62575
|
const { beginDeposit, closeDeposit, beginWithdraw, closeWithdraw } = useUnifold2();
|
|
61353
|
-
(0,
|
|
62576
|
+
(0, import_react33.useImperativeHandle)(ref, () => ({ beginDeposit, closeDeposit, beginWithdraw, closeWithdraw }), [
|
|
61354
62577
|
beginDeposit,
|
|
61355
62578
|
closeDeposit,
|
|
61356
62579
|
beginWithdraw,
|
|
@@ -61359,7 +62582,7 @@ var UnifoldBridge = (0, import_react32.forwardRef)((_, ref) => {
|
|
|
61359
62582
|
return null;
|
|
61360
62583
|
});
|
|
61361
62584
|
UnifoldBridge.displayName = "UnifoldBridge";
|
|
61362
|
-
var RenderErrorBoundary = class extends
|
|
62585
|
+
var RenderErrorBoundary = class extends import_react33.Component {
|
|
61363
62586
|
constructor() {
|
|
61364
62587
|
super(...arguments);
|
|
61365
62588
|
this.state = { hasError: false };
|
|
@@ -61433,13 +62656,13 @@ function createUnifold(publishableKey, config) {
|
|
|
61433
62656
|
};
|
|
61434
62657
|
try {
|
|
61435
62658
|
root.render(
|
|
61436
|
-
|
|
62659
|
+
import_react33.default.createElement(
|
|
61437
62660
|
RenderErrorBoundary,
|
|
61438
62661
|
{ onError: handleRenderError },
|
|
61439
|
-
|
|
62662
|
+
import_react33.default.createElement(
|
|
61440
62663
|
UnifoldProvider2,
|
|
61441
62664
|
{ publishableKey, config },
|
|
61442
|
-
|
|
62665
|
+
import_react33.default.createElement(UnifoldBridge, { ref: refCallback })
|
|
61443
62666
|
)
|
|
61444
62667
|
)
|
|
61445
62668
|
);
|
|
@@ -61464,6 +62687,7 @@ lucide-react/dist/esm/Icon.js:
|
|
|
61464
62687
|
lucide-react/dist/esm/createLucideIcon.js:
|
|
61465
62688
|
lucide-react/dist/esm/icons/arrow-left-right.js:
|
|
61466
62689
|
lucide-react/dist/esm/icons/arrow-left.js:
|
|
62690
|
+
lucide-react/dist/esm/icons/arrow-right.js:
|
|
61467
62691
|
lucide-react/dist/esm/icons/arrow-up-down.js:
|
|
61468
62692
|
lucide-react/dist/esm/icons/check.js:
|
|
61469
62693
|
lucide-react/dist/esm/icons/chevron-down.js:
|