@unifold/connect-react 0.1.42 → 0.1.43
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +22 -2
- package/dist/index.d.ts +22 -2
- package/dist/index.js +1540 -312
- package/dist/index.mjs +1550 -315
- package/dist/styles-base.css +1 -1
- package/dist/styles.css +1 -1
- package/package.json +4 -4
package/dist/index.mjs
CHANGED
|
@@ -1145,7 +1145,7 @@ ${new this._window.XMLSerializer().serializeToString(e3)}`;
|
|
|
1145
1145
|
|
|
1146
1146
|
// src/provider.tsx
|
|
1147
1147
|
import React38, {
|
|
1148
|
-
useState as
|
|
1148
|
+
useState as useState34,
|
|
1149
1149
|
useCallback as useCallback12,
|
|
1150
1150
|
useMemo as useMemo15,
|
|
1151
1151
|
useEffect as useEffect29
|
|
@@ -1220,10 +1220,10 @@ function useUnifold() {
|
|
|
1220
1220
|
// ../ui-react/dist/index.mjs
|
|
1221
1221
|
import {
|
|
1222
1222
|
useState as useState27,
|
|
1223
|
-
useEffect as
|
|
1223
|
+
useEffect as useEffect22,
|
|
1224
1224
|
useLayoutEffect as useLayoutEffect22,
|
|
1225
1225
|
useCallback as useCallback42,
|
|
1226
|
-
useRef as
|
|
1226
|
+
useRef as useRef72,
|
|
1227
1227
|
useMemo as useMemo92
|
|
1228
1228
|
} from "react";
|
|
1229
1229
|
|
|
@@ -1312,6 +1312,12 @@ var ArrowLeft = createLucideIcon("ArrowLeft", [
|
|
|
1312
1312
|
["path", { d: "M19 12H5", key: "x3x0zl" }]
|
|
1313
1313
|
]);
|
|
1314
1314
|
|
|
1315
|
+
// ../../node_modules/.pnpm/lucide-react@0.454.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/arrow-right.js
|
|
1316
|
+
var ArrowRight = createLucideIcon("ArrowRight", [
|
|
1317
|
+
["path", { d: "M5 12h14", key: "1ays0h" }],
|
|
1318
|
+
["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
|
|
1319
|
+
]);
|
|
1320
|
+
|
|
1315
1321
|
// ../../node_modules/.pnpm/lucide-react@0.454.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/arrow-up-down.js
|
|
1316
1322
|
var ArrowUpDown = createLucideIcon("ArrowUpDown", [
|
|
1317
1323
|
["path", { d: "m21 16-4 4-4-4", key: "f6ql7i" }],
|
|
@@ -6598,6 +6604,119 @@ async function sendSolanaTransaction(request, publishableKey) {
|
|
|
6598
6604
|
}
|
|
6599
6605
|
return response.json();
|
|
6600
6606
|
}
|
|
6607
|
+
async function retrievePaymentIntent(clientSecret, publishableKey) {
|
|
6608
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
6609
|
+
validatePublishableKey(pk);
|
|
6610
|
+
const response = await fetch(
|
|
6611
|
+
`${API_BASE_URL}/v1/public/payment_intents/retrieve`,
|
|
6612
|
+
{
|
|
6613
|
+
method: "POST",
|
|
6614
|
+
headers: {
|
|
6615
|
+
accept: "application/json",
|
|
6616
|
+
"x-publishable-key": pk,
|
|
6617
|
+
"Content-Type": "application/json"
|
|
6618
|
+
},
|
|
6619
|
+
body: JSON.stringify({ client_secret: clientSecret })
|
|
6620
|
+
}
|
|
6621
|
+
);
|
|
6622
|
+
if (!response.ok) {
|
|
6623
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
6624
|
+
throw new Error(
|
|
6625
|
+
`Failed to retrieve payment intent: ${error.message || response.statusText}`
|
|
6626
|
+
);
|
|
6627
|
+
}
|
|
6628
|
+
return response.json();
|
|
6629
|
+
}
|
|
6630
|
+
async function listPaymentIntentExecutions(clientSecret, publishableKey) {
|
|
6631
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
6632
|
+
validatePublishableKey(pk);
|
|
6633
|
+
const response = await fetch(
|
|
6634
|
+
`${API_BASE_URL}/v1/public/payment_intents/executions`,
|
|
6635
|
+
{
|
|
6636
|
+
method: "POST",
|
|
6637
|
+
headers: {
|
|
6638
|
+
accept: "application/json",
|
|
6639
|
+
"x-publishable-key": pk,
|
|
6640
|
+
"Content-Type": "application/json"
|
|
6641
|
+
},
|
|
6642
|
+
body: JSON.stringify({ client_secret: clientSecret })
|
|
6643
|
+
}
|
|
6644
|
+
);
|
|
6645
|
+
if (!response.ok) {
|
|
6646
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
6647
|
+
throw new Error(
|
|
6648
|
+
`Failed to list payment intent executions: ${error.message || response.statusText}`
|
|
6649
|
+
);
|
|
6650
|
+
}
|
|
6651
|
+
return response.json();
|
|
6652
|
+
}
|
|
6653
|
+
async function getDepositQuote(request, publishableKey) {
|
|
6654
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
6655
|
+
validatePublishableKey(pk);
|
|
6656
|
+
const response = await fetch(`${API_BASE_URL}/v1/public/quotes`, {
|
|
6657
|
+
method: "POST",
|
|
6658
|
+
headers: {
|
|
6659
|
+
accept: "application/json",
|
|
6660
|
+
"x-publishable-key": pk,
|
|
6661
|
+
"Content-Type": "application/json"
|
|
6662
|
+
},
|
|
6663
|
+
body: JSON.stringify(request)
|
|
6664
|
+
});
|
|
6665
|
+
if (!response.ok) {
|
|
6666
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
6667
|
+
throw new Error(
|
|
6668
|
+
`Failed to get deposit quote: ${error.message || response.statusText}`
|
|
6669
|
+
);
|
|
6670
|
+
}
|
|
6671
|
+
const json = await response.json();
|
|
6672
|
+
return json.data;
|
|
6673
|
+
}
|
|
6674
|
+
async function buildHypercoreTransaction(request, publishableKey) {
|
|
6675
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
6676
|
+
validatePublishableKey(pk);
|
|
6677
|
+
const response = await fetch(
|
|
6678
|
+
`${API_BASE_URL}/v1/public/transactions/hypercore/build`,
|
|
6679
|
+
{
|
|
6680
|
+
method: "POST",
|
|
6681
|
+
headers: {
|
|
6682
|
+
accept: "application/json",
|
|
6683
|
+
"x-publishable-key": pk,
|
|
6684
|
+
"Content-Type": "application/json"
|
|
6685
|
+
},
|
|
6686
|
+
body: JSON.stringify(request)
|
|
6687
|
+
}
|
|
6688
|
+
);
|
|
6689
|
+
if (!response.ok) {
|
|
6690
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
6691
|
+
throw new Error(
|
|
6692
|
+
`Failed to build HyperCore transaction: ${error.message || response.statusText}`
|
|
6693
|
+
);
|
|
6694
|
+
}
|
|
6695
|
+
return response.json();
|
|
6696
|
+
}
|
|
6697
|
+
async function sendHypercoreTransaction(request, publishableKey) {
|
|
6698
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
6699
|
+
validatePublishableKey(pk);
|
|
6700
|
+
const response = await fetch(
|
|
6701
|
+
`${API_BASE_URL}/v1/public/transactions/hypercore/send`,
|
|
6702
|
+
{
|
|
6703
|
+
method: "POST",
|
|
6704
|
+
headers: {
|
|
6705
|
+
accept: "application/json",
|
|
6706
|
+
"x-publishable-key": pk,
|
|
6707
|
+
"Content-Type": "application/json"
|
|
6708
|
+
},
|
|
6709
|
+
body: JSON.stringify(request)
|
|
6710
|
+
}
|
|
6711
|
+
);
|
|
6712
|
+
if (!response.ok) {
|
|
6713
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
6714
|
+
throw new Error(
|
|
6715
|
+
`Failed to send HyperCore transaction: ${error.message || response.statusText}`
|
|
6716
|
+
);
|
|
6717
|
+
}
|
|
6718
|
+
return response.json();
|
|
6719
|
+
}
|
|
6601
6720
|
function useUserIp() {
|
|
6602
6721
|
const {
|
|
6603
6722
|
data: userIpInfo,
|
|
@@ -6725,7 +6844,7 @@ var i18n = en_default;
|
|
|
6725
6844
|
// ../ui-react/dist/index.mjs
|
|
6726
6845
|
import { useQuery as useQuery2 } from "@tanstack/react-query";
|
|
6727
6846
|
import { useState as useState42 } from "react";
|
|
6728
|
-
import { useEffect as
|
|
6847
|
+
import { useEffect as useEffect23, useLayoutEffect as useLayoutEffect5, useState as useState22 } from "react";
|
|
6729
6848
|
import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
6730
6849
|
import * as React42 from "react";
|
|
6731
6850
|
import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
@@ -10930,34 +11049,45 @@ import { jsx as jsx44 } from "react/jsx-runtime";
|
|
|
10930
11049
|
import { jsx as jsx45, jsxs as jsxs38 } from "react/jsx-runtime";
|
|
10931
11050
|
import { Fragment as Fragment52, jsx as jsx46, jsxs as jsxs39 } from "react/jsx-runtime";
|
|
10932
11051
|
import { Fragment as Fragment62, jsx as jsx47, jsxs as jsxs40 } from "react/jsx-runtime";
|
|
10933
|
-
import { useCallback as useCallback22, useState as useState242 } from "react";
|
|
11052
|
+
import { useCallback as useCallback22, useEffect as useEffect192, useState as useState242 } from "react";
|
|
10934
11053
|
import { Fragment as Fragment72, jsx as jsx48, jsxs as jsxs41 } from "react/jsx-runtime";
|
|
10935
11054
|
import { Fragment as Fragment82, jsx as jsx49, jsxs as jsxs422 } from "react/jsx-runtime";
|
|
10936
11055
|
import * as React272 from "react";
|
|
10937
11056
|
import { jsx as jsx50, jsxs as jsxs43 } from "react/jsx-runtime";
|
|
10938
11057
|
import { Fragment as Fragment9, jsx as jsx51, jsxs as jsxs44 } from "react/jsx-runtime";
|
|
10939
11058
|
import {
|
|
10940
|
-
useState as
|
|
10941
|
-
useEffect as
|
|
11059
|
+
useState as useState28,
|
|
11060
|
+
useEffect as useEffect232,
|
|
10942
11061
|
useLayoutEffect as useLayoutEffect32,
|
|
10943
|
-
useCallback as
|
|
10944
|
-
useRef as useRef82
|
|
11062
|
+
useCallback as useCallback52,
|
|
11063
|
+
useRef as useRef82,
|
|
11064
|
+
useMemo as useMemo102
|
|
10945
11065
|
} from "react";
|
|
10946
11066
|
import { useQuery as useQuery9 } from "@tanstack/react-query";
|
|
10947
11067
|
import { useQuery as useQuery10 } from "@tanstack/react-query";
|
|
11068
|
+
import { Fragment as Fragment10, jsx as jsx522, jsxs as jsxs45 } from "react/jsx-runtime";
|
|
11069
|
+
import {
|
|
11070
|
+
useState as useState32,
|
|
11071
|
+
useEffect as useEffect272,
|
|
11072
|
+
useLayoutEffect as useLayoutEffect42,
|
|
11073
|
+
useCallback as useCallback72,
|
|
11074
|
+
useRef as useRef102
|
|
11075
|
+
} from "react";
|
|
10948
11076
|
import { useQuery as useQuery11 } from "@tanstack/react-query";
|
|
10949
11077
|
import { useQuery as useQuery12 } from "@tanstack/react-query";
|
|
10950
|
-
import { useState as useState28, useEffect as useEffect222, useRef as useRef72 } from "react";
|
|
10951
|
-
import { jsx as jsx522, jsxs as jsxs45 } from "react/jsx-runtime";
|
|
10952
|
-
import { useState as useState29, useCallback as useCallback52, useMemo as useMemo102, useEffect as useEffect232 } from "react";
|
|
10953
11078
|
import { useQuery as useQuery13 } from "@tanstack/react-query";
|
|
10954
|
-
import {
|
|
10955
|
-
import {
|
|
10956
|
-
import {
|
|
10957
|
-
import {
|
|
11079
|
+
import { useQuery as useQuery14 } from "@tanstack/react-query";
|
|
11080
|
+
import { useState as useState29, useEffect as useEffect242, useRef as useRef92 } from "react";
|
|
11081
|
+
import { jsx as jsx53, jsxs as jsxs46 } from "react/jsx-runtime";
|
|
11082
|
+
import { useState as useState30, useCallback as useCallback62, useMemo as useMemo112, useEffect as useEffect252 } from "react";
|
|
11083
|
+
import { useQuery as useQuery15 } from "@tanstack/react-query";
|
|
11084
|
+
import { Fragment as Fragment11, jsx as jsx54, jsxs as jsxs47 } from "react/jsx-runtime";
|
|
11085
|
+
import { jsx as jsx55, jsxs as jsxs48 } from "react/jsx-runtime";
|
|
11086
|
+
import { useState as useState31, useEffect as useEffect262 } from "react";
|
|
10958
11087
|
import { Fragment as Fragment12, jsx as jsx56, jsxs as jsxs49 } from "react/jsx-runtime";
|
|
10959
|
-
import {
|
|
10960
|
-
import {
|
|
11088
|
+
import { Fragment as Fragment13, jsx as jsx57, jsxs as jsxs50 } from "react/jsx-runtime";
|
|
11089
|
+
import { useState as useState33, useMemo as useMemo122 } from "react";
|
|
11090
|
+
import { jsx as jsx58, jsxs as jsxs51 } from "react/jsx-runtime";
|
|
10961
11091
|
function cn(...inputs) {
|
|
10962
11092
|
return twMerge(clsx(inputs));
|
|
10963
11093
|
}
|
|
@@ -11716,7 +11846,7 @@ function DepositHeader({
|
|
|
11716
11846
|
setShowBalanceSkeleton(false);
|
|
11717
11847
|
}
|
|
11718
11848
|
}, [showBalanceBlock]);
|
|
11719
|
-
|
|
11849
|
+
useEffect23(() => {
|
|
11720
11850
|
if (!showBalance || !balanceAddress || !balanceChainType || !balanceChainId || !balanceTokenAddress || !publishableKey) {
|
|
11721
11851
|
setBalance(null);
|
|
11722
11852
|
setIsLoadingBalance(false);
|
|
@@ -12268,6 +12398,7 @@ var CUTOFF_BUFFER_MS = 6e4;
|
|
|
12268
12398
|
function useDepositPolling({
|
|
12269
12399
|
userId,
|
|
12270
12400
|
publishableKey,
|
|
12401
|
+
clientSecret,
|
|
12271
12402
|
depositConfirmationMode = "auto_ui",
|
|
12272
12403
|
depositWalletId,
|
|
12273
12404
|
enabled = true,
|
|
@@ -12325,11 +12456,12 @@ function useDepositPolling({
|
|
|
12325
12456
|
depositWalletId
|
|
12326
12457
|
]);
|
|
12327
12458
|
useEffect32(() => {
|
|
12328
|
-
if (!
|
|
12459
|
+
if (!enabled) return;
|
|
12460
|
+
if (!clientSecret && !userId) return;
|
|
12329
12461
|
const modalOpenedAt = modalOpenedAtRef.current;
|
|
12330
12462
|
const poll = async () => {
|
|
12331
12463
|
try {
|
|
12332
|
-
const response = await queryExecutions(userId, publishableKey, ActionType.Deposit);
|
|
12464
|
+
const response = clientSecret ? await listPaymentIntentExecutions(clientSecret, publishableKey) : await queryExecutions(userId, publishableKey, ActionType.Deposit);
|
|
12333
12465
|
const cutoff = new Date(modalOpenedAt.getTime() - CUTOFF_BUFFER_MS);
|
|
12334
12466
|
const sortedExecutions = [...response.data].sort((a, b) => {
|
|
12335
12467
|
const timeA = a.created_at ? new Date(a.created_at).getTime() : 0;
|
|
@@ -12413,7 +12545,7 @@ function useDepositPolling({
|
|
|
12413
12545
|
clearInterval(pollInterval);
|
|
12414
12546
|
setIsPolling(false);
|
|
12415
12547
|
};
|
|
12416
|
-
}, [userId, publishableKey, enabled]);
|
|
12548
|
+
}, [userId, publishableKey, clientSecret, enabled]);
|
|
12417
12549
|
useEffect32(() => {
|
|
12418
12550
|
if (!pollingEnabled || !depositWalletId) return;
|
|
12419
12551
|
const triggerPoll = async () => {
|
|
@@ -18922,6 +19054,7 @@ var parseChainKey = (chainKey) => {
|
|
|
18922
19054
|
function TransferCryptoSingleInput({
|
|
18923
19055
|
userId,
|
|
18924
19056
|
publishableKey,
|
|
19057
|
+
clientSecret,
|
|
18925
19058
|
recipientAddress,
|
|
18926
19059
|
destinationChainType,
|
|
18927
19060
|
destinationChainId,
|
|
@@ -18934,7 +19067,9 @@ function TransferCryptoSingleInput({
|
|
|
18934
19067
|
onExecutionsChange,
|
|
18935
19068
|
onDepositSuccess,
|
|
18936
19069
|
onDepositError,
|
|
18937
|
-
wallets: externalWallets
|
|
19070
|
+
wallets: externalWallets,
|
|
19071
|
+
onSourceTokenChange,
|
|
19072
|
+
checkoutQuote
|
|
18938
19073
|
}) {
|
|
18939
19074
|
const { themeClass, colors: colors2, fonts, components } = useTheme();
|
|
18940
19075
|
const isDarkMode = themeClass.includes("uf-dark");
|
|
@@ -19001,12 +19136,28 @@ function TransferCryptoSingleInput({
|
|
|
19001
19136
|
} = useDepositPolling({
|
|
19002
19137
|
userId,
|
|
19003
19138
|
publishableKey,
|
|
19139
|
+
clientSecret,
|
|
19004
19140
|
depositConfirmationMode,
|
|
19005
19141
|
depositWalletId: currentWallet?.id,
|
|
19006
19142
|
enabled: true,
|
|
19007
19143
|
onDepositSuccess,
|
|
19008
19144
|
onDepositError
|
|
19009
19145
|
});
|
|
19146
|
+
useEffect172(() => {
|
|
19147
|
+
if (!onSourceTokenChange || !token || !chain || !initialSelectionDone) return;
|
|
19148
|
+
const { chainType, chainId } = parseChainKey(chain);
|
|
19149
|
+
const matchedToken = supportedTokens.find((t11) => t11.symbol === token);
|
|
19150
|
+
const matchedChain = matchedToken?.chains.find(
|
|
19151
|
+
(c) => c.chain_type === chainType && c.chain_id === chainId
|
|
19152
|
+
);
|
|
19153
|
+
onSourceTokenChange({
|
|
19154
|
+
symbol: token,
|
|
19155
|
+
chainType,
|
|
19156
|
+
chainId,
|
|
19157
|
+
tokenAddress: matchedChain?.token_address ?? "",
|
|
19158
|
+
minimumDepositAmountUsd: matchedChain?.minimum_deposit_amount_usd ?? 0
|
|
19159
|
+
});
|
|
19160
|
+
}, [token, chain, initialSelectionDone, onSourceTokenChange, supportedTokens]);
|
|
19010
19161
|
useEffect172(() => {
|
|
19011
19162
|
if (onExecutionsChange) {
|
|
19012
19163
|
onExecutionsChange(depositExecutions);
|
|
@@ -19153,6 +19304,53 @@ function TransferCryptoSingleInput({
|
|
|
19153
19304
|
/* @__PURE__ */ jsx41("span", { children: "Retrying automatically every 5 seconds..." })
|
|
19154
19305
|
] })
|
|
19155
19306
|
] }),
|
|
19307
|
+
checkoutQuote && /* @__PURE__ */ jsxs35(
|
|
19308
|
+
"div",
|
|
19309
|
+
{
|
|
19310
|
+
className: "uf-rounded-xl uf-px-3 uf-py-2 uf-flex uf-items-center uf-justify-between",
|
|
19311
|
+
style: {
|
|
19312
|
+
backgroundColor: components.card.backgroundColor,
|
|
19313
|
+
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`,
|
|
19314
|
+
borderRadius: components.card.borderRadius
|
|
19315
|
+
},
|
|
19316
|
+
children: [
|
|
19317
|
+
/* @__PURE__ */ jsx41(
|
|
19318
|
+
"span",
|
|
19319
|
+
{
|
|
19320
|
+
className: "uf-text-xs",
|
|
19321
|
+
style: { color: components.card.subtitleColor, fontFamily: fonts.regular },
|
|
19322
|
+
children: "You send"
|
|
19323
|
+
}
|
|
19324
|
+
),
|
|
19325
|
+
/* @__PURE__ */ jsxs35(
|
|
19326
|
+
"span",
|
|
19327
|
+
{
|
|
19328
|
+
className: "uf-text-sm uf-font-semibold",
|
|
19329
|
+
style: { color: components.card.titleColor, fontFamily: fonts.semibold },
|
|
19330
|
+
children: [
|
|
19331
|
+
(Number(checkoutQuote.sourceAmount) / 10 ** checkoutQuote.sourceTokenDecimals).toFixed(
|
|
19332
|
+
Math.min(checkoutQuote.sourceTokenDecimals, 6)
|
|
19333
|
+
),
|
|
19334
|
+
" ",
|
|
19335
|
+
checkoutQuote.sourceTokenSymbol,
|
|
19336
|
+
checkoutQuote.sourceAmountUsd && /* @__PURE__ */ jsxs35(
|
|
19337
|
+
"span",
|
|
19338
|
+
{
|
|
19339
|
+
className: "uf-text-xs uf-font-normal uf-ml-1.5",
|
|
19340
|
+
style: { color: components.card.subtitleColor },
|
|
19341
|
+
children: [
|
|
19342
|
+
"($",
|
|
19343
|
+
checkoutQuote.sourceAmountUsd,
|
|
19344
|
+
")"
|
|
19345
|
+
]
|
|
19346
|
+
}
|
|
19347
|
+
)
|
|
19348
|
+
]
|
|
19349
|
+
}
|
|
19350
|
+
)
|
|
19351
|
+
]
|
|
19352
|
+
}
|
|
19353
|
+
),
|
|
19156
19354
|
/* @__PURE__ */ jsxs35("div", { className: "uf-flex uf-flex-col uf-items-center uf-pt-2", children: [
|
|
19157
19355
|
/* @__PURE__ */ jsx41("div", { className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1", style: { color: components.card.labelColor }, children: "Intent address" }),
|
|
19158
19356
|
/* @__PURE__ */ jsx41("div", { className: "uf-shadow-lg", style: { borderRadius: components.card.borderRadius, border: `${components.card.borderWidth}px solid ${components.card.borderColor}` }, children: loading || tokensLoading || !initialSelectionDone ? (
|
|
@@ -19974,9 +20172,16 @@ function SelectTokenView({
|
|
|
19974
20172
|
onBack,
|
|
19975
20173
|
onClose,
|
|
19976
20174
|
onDisconnectWallet,
|
|
19977
|
-
isDisconnectingWallet = false
|
|
20175
|
+
isDisconnectingWallet = false,
|
|
20176
|
+
checkoutAmountUsd,
|
|
20177
|
+
checkoutReceivedUsd
|
|
19978
20178
|
}) {
|
|
19979
20179
|
const { colors: colors2, fonts, components } = useTheme();
|
|
20180
|
+
const isCheckout = !!checkoutAmountUsd;
|
|
20181
|
+
const headerSubtitle = isCheckout ? parseFloat(checkoutReceivedUsd || "0") > 0 ? `$${checkoutReceivedUsd} / $${checkoutAmountUsd} received` : `Amount due: $${checkoutAmountUsd}` : formatBalanceDisplay(
|
|
20182
|
+
`$${totalBalanceUsd || "0.00"}`,
|
|
20183
|
+
projectName
|
|
20184
|
+
);
|
|
19980
20185
|
return /* @__PURE__ */ jsxs38(
|
|
19981
20186
|
"div",
|
|
19982
20187
|
{
|
|
@@ -19985,11 +20190,8 @@ function SelectTokenView({
|
|
|
19985
20190
|
/* @__PURE__ */ jsx45(
|
|
19986
20191
|
DepositHeader,
|
|
19987
20192
|
{
|
|
19988
|
-
title: "Select Token",
|
|
19989
|
-
subtitle:
|
|
19990
|
-
`$${totalBalanceUsd || "0.00"}`,
|
|
19991
|
-
projectName
|
|
19992
|
-
),
|
|
20193
|
+
title: isCheckout ? "Select Token" : "Select Token",
|
|
20194
|
+
subtitle: headerSubtitle,
|
|
19993
20195
|
showBack: true,
|
|
19994
20196
|
onBack,
|
|
19995
20197
|
onClose
|
|
@@ -20217,10 +20419,19 @@ function EnterAmountView({
|
|
|
20217
20419
|
onReview,
|
|
20218
20420
|
onBack,
|
|
20219
20421
|
onClose,
|
|
20220
|
-
quickSelectMode
|
|
20422
|
+
quickSelectMode,
|
|
20423
|
+
checkoutAmountUsd,
|
|
20424
|
+
checkoutReceivedUsd
|
|
20221
20425
|
}) {
|
|
20222
20426
|
const { colors: colors2, fonts, components } = useTheme();
|
|
20427
|
+
const isCheckout = !!checkoutAmountUsd;
|
|
20223
20428
|
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}`;
|
|
20429
|
+
const checkoutRemainingUsd = isCheckout ? Math.max(
|
|
20430
|
+
parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0"),
|
|
20431
|
+
0
|
|
20432
|
+
).toFixed(2) : null;
|
|
20433
|
+
const headerTitle = isCheckout ? `Pay $${checkoutRemainingUsd}` : "Enter Amount";
|
|
20434
|
+
const headerSubtitle = isCheckout ? parseFloat(checkoutReceivedUsd || "0") > 0 ? `$${checkoutReceivedUsd} / $${checkoutAmountUsd} received` : null : balanceSubtitle;
|
|
20224
20435
|
const usePercentageChips = quickSelectMode === "percentage" && maxUsdAmount > 0;
|
|
20225
20436
|
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";
|
|
20226
20437
|
return /* @__PURE__ */ jsxs39(
|
|
@@ -20234,14 +20445,27 @@ function EnterAmountView({
|
|
|
20234
20445
|
/* @__PURE__ */ jsx46(
|
|
20235
20446
|
DepositHeader,
|
|
20236
20447
|
{
|
|
20237
|
-
title:
|
|
20238
|
-
subtitle:
|
|
20448
|
+
title: headerTitle,
|
|
20449
|
+
subtitle: headerSubtitle ?? void 0,
|
|
20239
20450
|
showBack: true,
|
|
20240
20451
|
onBack,
|
|
20241
20452
|
onClose
|
|
20242
20453
|
}
|
|
20243
20454
|
),
|
|
20244
|
-
walletInfoProp ? /* @__PURE__ */ jsx46("div", { className: "uf-flex uf-w-full uf-justify-center uf-mb-3", children: /* @__PURE__ */
|
|
20455
|
+
walletInfoProp ? /* @__PURE__ */ jsx46("div", { className: "uf-flex uf-w-full uf-justify-center uf-mb-3", children: /* @__PURE__ */ jsxs39("div", { className: "uf-flex uf-flex-col uf-items-center uf-gap-1", children: [
|
|
20456
|
+
/* @__PURE__ */ jsx46(WalletWithNetworkBadge, { walletInfo: walletInfoProp }),
|
|
20457
|
+
isCheckout && /* @__PURE__ */ jsx46(
|
|
20458
|
+
"span",
|
|
20459
|
+
{
|
|
20460
|
+
className: "uf-text-xs",
|
|
20461
|
+
style: {
|
|
20462
|
+
color: colors2.foregroundMuted,
|
|
20463
|
+
fontFamily: fonts.regular
|
|
20464
|
+
},
|
|
20465
|
+
children: balanceSubtitle
|
|
20466
|
+
}
|
|
20467
|
+
)
|
|
20468
|
+
] }) }) : null,
|
|
20245
20469
|
/* @__PURE__ */ jsxs39("div", { className: "uf-flex uf-min-h-0 uf-flex-1 uf-flex-col", children: [
|
|
20246
20470
|
/* @__PURE__ */ jsxs39("div", { className: "uf-min-h-0 uf-flex-1", children: [
|
|
20247
20471
|
/* @__PURE__ */ jsxs39("div", { className: "uf-text-center uf-py-8", children: [
|
|
@@ -20264,7 +20488,9 @@ function EnterAmountView({
|
|
|
20264
20488
|
inputMode: "decimal",
|
|
20265
20489
|
placeholder: "0",
|
|
20266
20490
|
value: amountUsd,
|
|
20491
|
+
readOnly: isCheckout,
|
|
20267
20492
|
onChange: (e) => {
|
|
20493
|
+
if (isCheckout) return;
|
|
20268
20494
|
const value = e.target.value;
|
|
20269
20495
|
if (value === "" || /^\d*\.?\d*$/.test(value)) {
|
|
20270
20496
|
const decimalIndex = value.indexOf(".");
|
|
@@ -20275,7 +20501,7 @@ function EnterAmountView({
|
|
|
20275
20501
|
onAmountChange(value);
|
|
20276
20502
|
}
|
|
20277
20503
|
},
|
|
20278
|
-
className:
|
|
20504
|
+
className: `uf-bg-transparent uf-outline-none uf-text-center uf-font-normal uf-w-auto uf-min-w-[60px] ${isCheckout ? "uf-cursor-default" : ""}`,
|
|
20279
20505
|
style: {
|
|
20280
20506
|
fontSize: `${Math.max(3.75 - (amountUsd || "0").length * 0.15, 2)}rem`,
|
|
20281
20507
|
color: components.input.textColor,
|
|
@@ -20297,7 +20523,7 @@ function EnterAmountView({
|
|
|
20297
20523
|
}
|
|
20298
20524
|
)
|
|
20299
20525
|
] }),
|
|
20300
|
-
/* @__PURE__ */ jsx46("div", { className: "uf-mb-4 uf-flex uf-w-full uf-min-w-0 uf-flex-nowrap uf-gap-1.5 uf-overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: usePercentageChips ? /* @__PURE__ */ jsxs39(Fragment52, { children: [
|
|
20526
|
+
!isCheckout && /* @__PURE__ */ jsx46("div", { className: "uf-mb-4 uf-flex uf-w-full uf-min-w-0 uf-flex-nowrap uf-gap-1.5 uf-overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: usePercentageChips ? /* @__PURE__ */ jsxs39(Fragment52, { children: [
|
|
20301
20527
|
PERCENT_QUICK_AMOUNTS.map((pct) => /* @__PURE__ */ jsxs39(
|
|
20302
20528
|
"button",
|
|
20303
20529
|
{
|
|
@@ -20366,7 +20592,46 @@ function EnterAmountView({
|
|
|
20366
20592
|
}
|
|
20367
20593
|
)
|
|
20368
20594
|
] }) }),
|
|
20369
|
-
tokenChainDetails && tokenChainDetails.minimum_deposit_amount_usd > 0 && /* @__PURE__ */ jsxs39(
|
|
20595
|
+
tokenChainDetails && tokenChainDetails.minimum_deposit_amount_usd > 0 && (isCheckout && checkoutAmountUsd && inputUsdNum > parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0") + 5e-3 ? /* @__PURE__ */ jsxs39(
|
|
20596
|
+
"div",
|
|
20597
|
+
{
|
|
20598
|
+
className: "uf-rounded-lg uf-px-3 uf-py-2 uf-mb-3 uf-text-center",
|
|
20599
|
+
style: {
|
|
20600
|
+
backgroundColor: colors2.warning + "15",
|
|
20601
|
+
border: `1px solid ${colors2.warning}30`,
|
|
20602
|
+
borderRadius: components.card.borderRadius,
|
|
20603
|
+
animation: "uf-fadeSlideIn 0.4s ease-out"
|
|
20604
|
+
},
|
|
20605
|
+
children: [
|
|
20606
|
+
/* @__PURE__ */ jsxs39(
|
|
20607
|
+
"div",
|
|
20608
|
+
{
|
|
20609
|
+
className: "uf-text-xs uf-font-medium",
|
|
20610
|
+
style: { color: colors2.warning, fontFamily: fonts.medium },
|
|
20611
|
+
children: [
|
|
20612
|
+
"Minimum for ",
|
|
20613
|
+
selectedToken.symbol,
|
|
20614
|
+
" on ",
|
|
20615
|
+
selectedToken.chain_name,
|
|
20616
|
+
" is $",
|
|
20617
|
+
tokenChainDetails.minimum_deposit_amount_usd.toFixed(2)
|
|
20618
|
+
]
|
|
20619
|
+
}
|
|
20620
|
+
),
|
|
20621
|
+
/* @__PURE__ */ jsxs39(
|
|
20622
|
+
"div",
|
|
20623
|
+
{
|
|
20624
|
+
className: "uf-text-xs uf-mt-0.5",
|
|
20625
|
+
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
20626
|
+
children: [
|
|
20627
|
+
"Amount adjusted from remaining $",
|
|
20628
|
+
(parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0")).toFixed(2)
|
|
20629
|
+
]
|
|
20630
|
+
}
|
|
20631
|
+
)
|
|
20632
|
+
]
|
|
20633
|
+
}
|
|
20634
|
+
) : /* @__PURE__ */ jsxs39(
|
|
20370
20635
|
"div",
|
|
20371
20636
|
{
|
|
20372
20637
|
className: "uf-text-center uf-text-xs uf-mb-3",
|
|
@@ -20376,7 +20641,7 @@ function EnterAmountView({
|
|
|
20376
20641
|
tokenChainDetails.minimum_deposit_amount_usd.toFixed(2)
|
|
20377
20642
|
]
|
|
20378
20643
|
}
|
|
20379
|
-
),
|
|
20644
|
+
)),
|
|
20380
20645
|
inputUsdNum > 0 && /* @__PURE__ */ jsx46(Fragment52, { children: inputUsdNum > maxUsdAmount ? /* @__PURE__ */ jsx46(
|
|
20381
20646
|
"div",
|
|
20382
20647
|
{
|
|
@@ -20391,7 +20656,44 @@ function EnterAmountView({
|
|
|
20391
20656
|
style: { color: colors2.error },
|
|
20392
20657
|
children: error
|
|
20393
20658
|
}
|
|
20394
|
-
) })
|
|
20659
|
+
) }),
|
|
20660
|
+
isCheckout && selectedToken.icon_url && /* @__PURE__ */ jsxs39("div", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2 uf-py-2", children: [
|
|
20661
|
+
/* @__PURE__ */ jsxs39("div", { className: "uf-relative", children: [
|
|
20662
|
+
/* @__PURE__ */ jsx46(
|
|
20663
|
+
"img",
|
|
20664
|
+
{
|
|
20665
|
+
src: selectedToken.icon_url,
|
|
20666
|
+
alt: selectedToken.symbol,
|
|
20667
|
+
width: 20,
|
|
20668
|
+
height: 20,
|
|
20669
|
+
className: "uf-w-5 uf-h-5 uf-rounded-full"
|
|
20670
|
+
}
|
|
20671
|
+
),
|
|
20672
|
+
selectedToken.chain_icon_url && /* @__PURE__ */ jsx46(
|
|
20673
|
+
"img",
|
|
20674
|
+
{
|
|
20675
|
+
src: selectedToken.chain_icon_url,
|
|
20676
|
+
alt: selectedToken.chain_name,
|
|
20677
|
+
width: 10,
|
|
20678
|
+
height: 10,
|
|
20679
|
+
className: "uf-w-2.5 uf-h-2.5 uf-rounded-full uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-border",
|
|
20680
|
+
style: { borderColor: colors2.background }
|
|
20681
|
+
}
|
|
20682
|
+
)
|
|
20683
|
+
] }),
|
|
20684
|
+
/* @__PURE__ */ jsxs39(
|
|
20685
|
+
"span",
|
|
20686
|
+
{
|
|
20687
|
+
className: "uf-text-xs",
|
|
20688
|
+
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
20689
|
+
children: [
|
|
20690
|
+
selectedToken.symbol,
|
|
20691
|
+
" on ",
|
|
20692
|
+
selectedToken.chain_name
|
|
20693
|
+
]
|
|
20694
|
+
}
|
|
20695
|
+
)
|
|
20696
|
+
] })
|
|
20395
20697
|
] }),
|
|
20396
20698
|
/* @__PURE__ */ jsx46("div", { className: "uf-shrink-0 uf-pt-2", children: /* @__PURE__ */ jsx46(
|
|
20397
20699
|
"button",
|
|
@@ -20415,6 +20717,18 @@ function EnterAmountView({
|
|
|
20415
20717
|
}
|
|
20416
20718
|
);
|
|
20417
20719
|
}
|
|
20720
|
+
var WALLET_ICONS2 = {
|
|
20721
|
+
metamask: MetamaskIcon,
|
|
20722
|
+
phantom: PhantomIcon,
|
|
20723
|
+
coinbase: CoinbaseIcon,
|
|
20724
|
+
trust: TrustIcon,
|
|
20725
|
+
rainbow: RainbowIcon,
|
|
20726
|
+
rabby: RabbyIcon,
|
|
20727
|
+
okx: OkxIcon,
|
|
20728
|
+
solflare: SolflareIcon,
|
|
20729
|
+
backpack: BackpackIcon,
|
|
20730
|
+
glow: GlowIcon
|
|
20731
|
+
};
|
|
20418
20732
|
function ReviewView({
|
|
20419
20733
|
walletInfo,
|
|
20420
20734
|
recipientAddress,
|
|
@@ -20449,30 +20763,17 @@ function ReviewView({
|
|
|
20449
20763
|
),
|
|
20450
20764
|
/* @__PURE__ */ jsxs40("div", { className: "uf-flex uf-min-h-0 uf-flex-1 uf-flex-col", children: [
|
|
20451
20765
|
/* @__PURE__ */ jsxs40("div", { className: "uf-min-h-0 uf-flex-1 uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: [
|
|
20452
|
-
/* @__PURE__ */
|
|
20453
|
-
|
|
20454
|
-
|
|
20455
|
-
|
|
20456
|
-
|
|
20457
|
-
|
|
20458
|
-
|
|
20459
|
-
|
|
20460
|
-
|
|
20461
|
-
|
|
20462
|
-
|
|
20463
|
-
),
|
|
20464
|
-
formattedTokenAmount && /* @__PURE__ */ jsxs40(
|
|
20465
|
-
"div",
|
|
20466
|
-
{
|
|
20467
|
-
className: "uf-text-sm uf-mt-2",
|
|
20468
|
-
style: { color: colors2.foregroundMuted },
|
|
20469
|
-
children: [
|
|
20470
|
-
"\u2248 ",
|
|
20471
|
-
formattedTokenAmount
|
|
20472
|
-
]
|
|
20473
|
-
}
|
|
20474
|
-
)
|
|
20475
|
-
] }),
|
|
20766
|
+
/* @__PURE__ */ jsx47("div", { className: "uf-text-center", children: /* @__PURE__ */ jsxs40(
|
|
20767
|
+
"div",
|
|
20768
|
+
{
|
|
20769
|
+
className: "uf-text-4xl uf-font-medium",
|
|
20770
|
+
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
20771
|
+
children: [
|
|
20772
|
+
"$",
|
|
20773
|
+
amountUsd || "0"
|
|
20774
|
+
]
|
|
20775
|
+
}
|
|
20776
|
+
) }),
|
|
20476
20777
|
/* @__PURE__ */ jsxs40(
|
|
20477
20778
|
"div",
|
|
20478
20779
|
{
|
|
@@ -20489,7 +20790,31 @@ function ReviewView({
|
|
|
20489
20790
|
{
|
|
20490
20791
|
className: "uf-text-sm",
|
|
20491
20792
|
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
20492
|
-
children: "
|
|
20793
|
+
children: "From"
|
|
20794
|
+
}
|
|
20795
|
+
),
|
|
20796
|
+
/* @__PURE__ */ jsxs40("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
20797
|
+
WALLET_ICONS2[walletInfo.icon] && (() => {
|
|
20798
|
+
const Icon22 = WALLET_ICONS2[walletInfo.icon];
|
|
20799
|
+
return /* @__PURE__ */ jsx47("div", { className: "uf-w-5 uf-h-5 uf-rounded-full uf-overflow-hidden uf-flex-shrink-0", children: /* @__PURE__ */ jsx47(Icon22, { size: 20, variant: "color" }) });
|
|
20800
|
+
})(),
|
|
20801
|
+
/* @__PURE__ */ jsx47(
|
|
20802
|
+
"span",
|
|
20803
|
+
{
|
|
20804
|
+
className: "uf-text-sm uf-font-medium",
|
|
20805
|
+
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
20806
|
+
children: walletInfo.name
|
|
20807
|
+
}
|
|
20808
|
+
)
|
|
20809
|
+
] })
|
|
20810
|
+
] }),
|
|
20811
|
+
/* @__PURE__ */ jsxs40("div", { className: "uf-flex uf-justify-between uf-items-center", children: [
|
|
20812
|
+
/* @__PURE__ */ jsx47(
|
|
20813
|
+
"span",
|
|
20814
|
+
{
|
|
20815
|
+
className: "uf-text-sm",
|
|
20816
|
+
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
20817
|
+
children: "You send"
|
|
20493
20818
|
}
|
|
20494
20819
|
),
|
|
20495
20820
|
/* @__PURE__ */ jsxs40("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
@@ -20501,17 +20826,12 @@ function ReviewView({
|
|
|
20501
20826
|
className: "uf-w-5 uf-h-5 uf-rounded-full"
|
|
20502
20827
|
}
|
|
20503
20828
|
),
|
|
20504
|
-
/* @__PURE__ */
|
|
20829
|
+
/* @__PURE__ */ jsx47(
|
|
20505
20830
|
"span",
|
|
20506
20831
|
{
|
|
20507
20832
|
className: "uf-text-sm uf-font-medium",
|
|
20508
20833
|
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
20509
|
-
children:
|
|
20510
|
-
walletInfo.name,
|
|
20511
|
-
" (",
|
|
20512
|
-
truncateAddress2(walletInfo.address),
|
|
20513
|
-
")"
|
|
20514
|
-
]
|
|
20834
|
+
children: formattedTokenAmount || `$${amountUsd}`
|
|
20515
20835
|
}
|
|
20516
20836
|
)
|
|
20517
20837
|
] })
|
|
@@ -20674,7 +20994,10 @@ function ReviewView({
|
|
|
20674
20994
|
borderRadius: components.button.borderRadius,
|
|
20675
20995
|
border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
|
|
20676
20996
|
},
|
|
20677
|
-
children: isConfirming ? "
|
|
20997
|
+
children: isConfirming ? /* @__PURE__ */ jsxs40("span", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2", children: [
|
|
20998
|
+
/* @__PURE__ */ jsx47(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
|
|
20999
|
+
"Confirming..."
|
|
21000
|
+
] }) : "Confirm Order"
|
|
20678
21001
|
}
|
|
20679
21002
|
) })
|
|
20680
21003
|
] })
|
|
@@ -20683,17 +21006,35 @@ function ReviewView({
|
|
|
20683
21006
|
}
|
|
20684
21007
|
);
|
|
20685
21008
|
}
|
|
21009
|
+
var SETTLE_FALLBACK_MS = 15e3;
|
|
20686
21010
|
function ConfirmingView({
|
|
20687
21011
|
isConfirming,
|
|
20688
21012
|
onClose,
|
|
20689
21013
|
executions = [],
|
|
20690
|
-
isPolling = false
|
|
21014
|
+
isPolling = false,
|
|
21015
|
+
onNewDeposit,
|
|
21016
|
+
onDone,
|
|
21017
|
+
paymentIntentStatus,
|
|
21018
|
+
amountReceivedUsd,
|
|
21019
|
+
amountReceivedUsdAtSubmission
|
|
20691
21020
|
}) {
|
|
20692
|
-
const { colors: colors2, fonts } = useTheme();
|
|
21021
|
+
const { colors: colors2, fonts, components } = useTheme();
|
|
20693
21022
|
const [containerEl, setContainerEl] = useState242(null);
|
|
20694
21023
|
const containerCallbackRef = useCallback22((el) => {
|
|
20695
21024
|
setContainerEl(el);
|
|
20696
21025
|
}, []);
|
|
21026
|
+
const [fallbackSettled, setFallbackSettled] = useState242(false);
|
|
21027
|
+
const hasExecution = executions.length > 0;
|
|
21028
|
+
const isCheckoutMode = paymentIntentStatus != null;
|
|
21029
|
+
const isPaymentComplete = paymentIntentStatus === "succeeded";
|
|
21030
|
+
const amountChanged = amountReceivedUsdAtSubmission != null && amountReceivedUsd != null && amountReceivedUsd !== amountReceivedUsdAtSubmission;
|
|
21031
|
+
const piSettled = !isCheckoutMode || isPaymentComplete || amountChanged || fallbackSettled;
|
|
21032
|
+
useEffect192(() => {
|
|
21033
|
+
if (!hasExecution || piSettled) return;
|
|
21034
|
+
const timeout = setTimeout(() => setFallbackSettled(true), SETTLE_FALLBACK_MS);
|
|
21035
|
+
return () => clearTimeout(timeout);
|
|
21036
|
+
}, [hasExecution, piSettled]);
|
|
21037
|
+
const showButtons = hasExecution && piSettled;
|
|
20697
21038
|
return /* @__PURE__ */ jsx48(PortalContainerProvider, { value: containerEl, children: /* @__PURE__ */ jsxs41(
|
|
20698
21039
|
"div",
|
|
20699
21040
|
{
|
|
@@ -20706,8 +21047,8 @@ function ConfirmingView({
|
|
|
20706
21047
|
/* @__PURE__ */ jsx48(
|
|
20707
21048
|
DepositHeader,
|
|
20708
21049
|
{
|
|
20709
|
-
title: isConfirming ? "Confirming..." : "Processing",
|
|
20710
|
-
onClose
|
|
21050
|
+
title: isConfirming ? "Confirming..." : hasExecution && isPaymentComplete ? "Payment Complete" : hasExecution ? "Deposit Received" : "Processing",
|
|
21051
|
+
onClose: isPaymentComplete && onDone ? onDone : onClose
|
|
20711
21052
|
}
|
|
20712
21053
|
),
|
|
20713
21054
|
/* @__PURE__ */ jsx48("div", { className: "uf-flex uf-flex-1 uf-flex-col uf-items-center uf-justify-center uf-py-8", children: isConfirming ? /* @__PURE__ */ jsxs41(Fragment72, { children: [
|
|
@@ -20734,12 +21075,12 @@ function ConfirmingView({
|
|
|
20734
21075
|
children: "Please confirm the transaction in your wallet"
|
|
20735
21076
|
}
|
|
20736
21077
|
)
|
|
20737
|
-
] }) : /* @__PURE__ */ jsxs41(Fragment72, { children: [
|
|
21078
|
+
] }) : hasExecution ? /* @__PURE__ */ jsxs41(Fragment72, { children: [
|
|
20738
21079
|
/* @__PURE__ */ jsx48(
|
|
20739
21080
|
CircleCheck,
|
|
20740
21081
|
{
|
|
20741
21082
|
className: "uf-w-12 uf-h-12 uf-mb-4",
|
|
20742
|
-
style: { color:
|
|
21083
|
+
style: { color: "rgb(34, 197, 94)" }
|
|
20743
21084
|
}
|
|
20744
21085
|
),
|
|
20745
21086
|
/* @__PURE__ */ jsx48(
|
|
@@ -20747,7 +21088,7 @@ function ConfirmingView({
|
|
|
20747
21088
|
{
|
|
20748
21089
|
className: "uf-text-lg uf-font-medium",
|
|
20749
21090
|
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
20750
|
-
children: "
|
|
21091
|
+
children: isPaymentComplete ? "Payment Complete" : "Deposit Received"
|
|
20751
21092
|
}
|
|
20752
21093
|
),
|
|
20753
21094
|
/* @__PURE__ */ jsx48(
|
|
@@ -20755,14 +21096,73 @@ function ConfirmingView({
|
|
|
20755
21096
|
{
|
|
20756
21097
|
className: "uf-text-sm uf-mt-2 uf-text-center uf-px-6",
|
|
20757
21098
|
style: { color: colors2.foregroundMuted },
|
|
20758
|
-
children: "
|
|
21099
|
+
children: isPaymentComplete ? "Your payment has been fulfilled." : showButtons ? "Your deposit is being processed." : "Checking payment status..."
|
|
20759
21100
|
}
|
|
20760
|
-
)
|
|
20761
|
-
|
|
20762
|
-
|
|
20763
|
-
|
|
20764
|
-
|
|
20765
|
-
|
|
21101
|
+
),
|
|
21102
|
+
/* @__PURE__ */ jsx48("div", { className: "uf-mt-6 uf-flex uf-flex-col uf-items-center uf-gap-3", children: !showButtons ? /* @__PURE__ */ jsx48(
|
|
21103
|
+
LoaderCircle,
|
|
21104
|
+
{
|
|
21105
|
+
className: "uf-w-5 uf-h-5 uf-animate-spin",
|
|
21106
|
+
style: { color: colors2.foregroundMuted }
|
|
21107
|
+
}
|
|
21108
|
+
) : isPaymentComplete && onDone ? /* @__PURE__ */ jsx48(
|
|
21109
|
+
"button",
|
|
21110
|
+
{
|
|
21111
|
+
onClick: onDone,
|
|
21112
|
+
className: "uf-w-full uf-py-3 uf-px-8 uf-text-sm uf-font-medium uf-transition-opacity hover:uf-opacity-80",
|
|
21113
|
+
style: {
|
|
21114
|
+
backgroundColor: colors2.primary,
|
|
21115
|
+
color: colors2.primaryForeground,
|
|
21116
|
+
fontFamily: fonts.medium,
|
|
21117
|
+
borderRadius: components.button.borderRadius
|
|
21118
|
+
},
|
|
21119
|
+
children: "Done"
|
|
21120
|
+
}
|
|
21121
|
+
) : onNewDeposit ? /* @__PURE__ */ jsxs41(
|
|
21122
|
+
"button",
|
|
21123
|
+
{
|
|
21124
|
+
onClick: onNewDeposit,
|
|
21125
|
+
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",
|
|
21126
|
+
style: {
|
|
21127
|
+
backgroundColor: colors2.primary,
|
|
21128
|
+
color: colors2.primaryForeground,
|
|
21129
|
+
fontFamily: fonts.medium
|
|
21130
|
+
},
|
|
21131
|
+
children: [
|
|
21132
|
+
"Make another deposit",
|
|
21133
|
+
/* @__PURE__ */ jsx48(ArrowRight, { className: "uf-w-4 uf-h-4" })
|
|
21134
|
+
]
|
|
21135
|
+
}
|
|
21136
|
+
) : null })
|
|
21137
|
+
] }) : /* @__PURE__ */ jsxs41(Fragment72, { children: [
|
|
21138
|
+
/* @__PURE__ */ jsx48(
|
|
21139
|
+
LoaderCircle,
|
|
21140
|
+
{
|
|
21141
|
+
className: "uf-w-12 uf-h-12 uf-animate-spin uf-mb-4",
|
|
21142
|
+
style: { color: colors2.primary }
|
|
21143
|
+
}
|
|
21144
|
+
),
|
|
21145
|
+
/* @__PURE__ */ jsx48(
|
|
21146
|
+
"div",
|
|
21147
|
+
{
|
|
21148
|
+
className: "uf-text-lg uf-font-medium",
|
|
21149
|
+
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
21150
|
+
children: "Transaction Submitted"
|
|
21151
|
+
}
|
|
21152
|
+
),
|
|
21153
|
+
/* @__PURE__ */ jsx48(
|
|
21154
|
+
"div",
|
|
21155
|
+
{
|
|
21156
|
+
className: "uf-text-sm uf-mt-2 uf-text-center uf-px-6",
|
|
21157
|
+
style: { color: colors2.foregroundMuted },
|
|
21158
|
+
children: "Waiting for your deposit to be detected..."
|
|
21159
|
+
}
|
|
21160
|
+
)
|
|
21161
|
+
] }) }),
|
|
21162
|
+
/* @__PURE__ */ jsx48(
|
|
21163
|
+
DepositPollingToasts,
|
|
21164
|
+
{
|
|
21165
|
+
executions,
|
|
20766
21166
|
isPolling,
|
|
20767
21167
|
horizontalPadding: "0"
|
|
20768
21168
|
}
|
|
@@ -20779,6 +21179,7 @@ function BrowserWalletModal({
|
|
|
20779
21179
|
depositWallet,
|
|
20780
21180
|
userId,
|
|
20781
21181
|
publishableKey,
|
|
21182
|
+
clientSecret,
|
|
20782
21183
|
assetCdnUrl,
|
|
20783
21184
|
projectName,
|
|
20784
21185
|
theme = "dark",
|
|
@@ -20787,7 +21188,13 @@ function BrowserWalletModal({
|
|
|
20787
21188
|
onDepositSuccess,
|
|
20788
21189
|
onDepositError,
|
|
20789
21190
|
amountQuickSelect = "percentage",
|
|
20790
|
-
onWalletDisconnect
|
|
21191
|
+
onWalletDisconnect,
|
|
21192
|
+
prefillAmountUsd,
|
|
21193
|
+
checkoutAmountUsd,
|
|
21194
|
+
checkoutReceivedUsd,
|
|
21195
|
+
onNewDeposit,
|
|
21196
|
+
onDone,
|
|
21197
|
+
paymentIntentStatus
|
|
20791
21198
|
}) {
|
|
20792
21199
|
const { colors: colors2, fonts, components } = useTheme();
|
|
20793
21200
|
const [step, setStep] = React262.useState("select-token");
|
|
@@ -20805,6 +21212,7 @@ function BrowserWalletModal({
|
|
|
20805
21212
|
const [tokenChainDetails, setTokenChainDetails] = React262.useState(null);
|
|
20806
21213
|
const [loadingTokenDetails, setLoadingTokenDetails] = React262.useState(false);
|
|
20807
21214
|
const [showTransactionDetails, setShowTransactionDetails] = React262.useState(false);
|
|
21215
|
+
const [receivedUsdAtSubmission, setReceivedUsdAtSubmission] = React262.useState(null);
|
|
20808
21216
|
const themeClass = theme === "dark" ? "uf-dark" : "";
|
|
20809
21217
|
const chainType = depositWallet.chain_type;
|
|
20810
21218
|
const recipientAddress = depositWallet.address;
|
|
@@ -20812,15 +21220,19 @@ function BrowserWalletModal({
|
|
|
20812
21220
|
const { executions: depositExecutions, isPolling } = useDepositPolling({
|
|
20813
21221
|
userId,
|
|
20814
21222
|
publishableKey,
|
|
21223
|
+
clientSecret,
|
|
20815
21224
|
enabled: open && hasSignedTransaction,
|
|
20816
21225
|
onDepositSuccess,
|
|
20817
21226
|
onDepositError
|
|
20818
21227
|
});
|
|
21228
|
+
const prevOpenRef = React262.useRef(false);
|
|
20819
21229
|
React262.useEffect(() => {
|
|
20820
|
-
|
|
21230
|
+
const wasOpen = prevOpenRef.current;
|
|
21231
|
+
prevOpenRef.current = open;
|
|
21232
|
+
if (open && !wasOpen) {
|
|
20821
21233
|
setStep("select-token");
|
|
20822
21234
|
setSelectedBalance(null);
|
|
20823
|
-
setAmountUsd("");
|
|
21235
|
+
setAmountUsd(prefillAmountUsd ?? "");
|
|
20824
21236
|
setError(null);
|
|
20825
21237
|
setIsConfirming(false);
|
|
20826
21238
|
setTokenChainDetails(null);
|
|
@@ -20828,7 +21240,15 @@ function BrowserWalletModal({
|
|
|
20828
21240
|
setHasSignedTransaction(false);
|
|
20829
21241
|
setIsDisconnectingWallet(false);
|
|
20830
21242
|
}
|
|
20831
|
-
}, [open]);
|
|
21243
|
+
}, [open, prefillAmountUsd]);
|
|
21244
|
+
React262.useEffect(() => {
|
|
21245
|
+
if (!prefillAmountUsd || !tokenChainDetails || step !== "input-amount") return;
|
|
21246
|
+
const minDeposit = tokenChainDetails.minimum_deposit_amount_usd || 0;
|
|
21247
|
+
const currentAmount = parseFloat(amountUsd) || 0;
|
|
21248
|
+
if (currentAmount > 0 && currentAmount < minDeposit) {
|
|
21249
|
+
setAmountUsd(minDeposit.toFixed(2));
|
|
21250
|
+
}
|
|
21251
|
+
}, [tokenChainDetails, step, prefillAmountUsd]);
|
|
20832
21252
|
React262.useEffect(() => {
|
|
20833
21253
|
if (step === "review") {
|
|
20834
21254
|
setShowTransactionDetails(false);
|
|
@@ -20946,7 +21366,7 @@ function BrowserWalletModal({
|
|
|
20946
21366
|
setError(null);
|
|
20947
21367
|
if (step === "input-amount") {
|
|
20948
21368
|
setStep("select-token");
|
|
20949
|
-
setAmountUsd("");
|
|
21369
|
+
setAmountUsd(prefillAmountUsd ?? "");
|
|
20950
21370
|
setTokenChainDetails(null);
|
|
20951
21371
|
} else if (step === "review") {
|
|
20952
21372
|
setStep("input-amount");
|
|
@@ -21032,7 +21452,6 @@ function BrowserWalletModal({
|
|
|
21032
21452
|
}
|
|
21033
21453
|
}
|
|
21034
21454
|
setIsConfirming(true);
|
|
21035
|
-
setStep("confirming");
|
|
21036
21455
|
setError(null);
|
|
21037
21456
|
try {
|
|
21038
21457
|
let txHash;
|
|
@@ -21050,16 +21469,17 @@ function BrowserWalletModal({
|
|
|
21050
21469
|
} else {
|
|
21051
21470
|
txHash = await sendEthereumTransaction(token, tokenAmount.toString());
|
|
21052
21471
|
}
|
|
21472
|
+
setReceivedUsdAtSubmission(checkoutReceivedUsd ?? "0");
|
|
21053
21473
|
setHasSignedTransaction(true);
|
|
21054
|
-
onSuccess?.(txHash);
|
|
21055
21474
|
setIsConfirming(false);
|
|
21475
|
+
setStep("confirming");
|
|
21476
|
+
onSuccess?.(txHash);
|
|
21056
21477
|
} catch (err) {
|
|
21057
21478
|
console.error("[BrowserWalletModal] Transaction error:", err);
|
|
21058
21479
|
const errorMessage = err instanceof Error ? err.message : "Transaction failed";
|
|
21059
21480
|
setError(errorMessage);
|
|
21060
21481
|
onError?.(err instanceof Error ? err : new Error(errorMessage));
|
|
21061
21482
|
setIsConfirming(false);
|
|
21062
|
-
setStep("review");
|
|
21063
21483
|
}
|
|
21064
21484
|
};
|
|
21065
21485
|
const sendEthereumTransaction = async (token, amountStr) => {
|
|
@@ -21308,7 +21728,9 @@ function BrowserWalletModal({
|
|
|
21308
21728
|
onBack: handleClose,
|
|
21309
21729
|
onClose: handleFullClose,
|
|
21310
21730
|
onDisconnectWallet: onWalletDisconnect ? () => void handleDisconnectFromSelectToken() : void 0,
|
|
21311
|
-
isDisconnectingWallet
|
|
21731
|
+
isDisconnectingWallet,
|
|
21732
|
+
checkoutAmountUsd,
|
|
21733
|
+
checkoutReceivedUsd
|
|
21312
21734
|
}
|
|
21313
21735
|
),
|
|
21314
21736
|
step === "input-amount" && selectedToken && selectedBalance && /* @__PURE__ */ jsx49(
|
|
@@ -21329,7 +21751,9 @@ function BrowserWalletModal({
|
|
|
21329
21751
|
onReview: handleReview,
|
|
21330
21752
|
onBack: handleBack,
|
|
21331
21753
|
onClose: handleFullClose,
|
|
21332
|
-
quickSelectMode: amountQuickSelect
|
|
21754
|
+
quickSelectMode: amountQuickSelect,
|
|
21755
|
+
checkoutAmountUsd,
|
|
21756
|
+
checkoutReceivedUsd
|
|
21333
21757
|
}
|
|
21334
21758
|
),
|
|
21335
21759
|
step === "review" && selectedToken && /* @__PURE__ */ jsx49(
|
|
@@ -21358,7 +21782,12 @@ function BrowserWalletModal({
|
|
|
21358
21782
|
isConfirming,
|
|
21359
21783
|
onClose: handleFullClose,
|
|
21360
21784
|
executions: depositExecutions,
|
|
21361
|
-
isPolling
|
|
21785
|
+
isPolling,
|
|
21786
|
+
onNewDeposit,
|
|
21787
|
+
onDone,
|
|
21788
|
+
paymentIntentStatus,
|
|
21789
|
+
amountReceivedUsd: checkoutReceivedUsd,
|
|
21790
|
+
amountReceivedUsdAtSubmission: receivedUsdAtSubmission
|
|
21362
21791
|
}
|
|
21363
21792
|
)
|
|
21364
21793
|
] })
|
|
@@ -21367,7 +21796,7 @@ function BrowserWalletModal({
|
|
|
21367
21796
|
}
|
|
21368
21797
|
) });
|
|
21369
21798
|
}
|
|
21370
|
-
var
|
|
21799
|
+
var WALLET_ICONS3 = {
|
|
21371
21800
|
metamask: MetamaskIcon,
|
|
21372
21801
|
phantom: PhantomIcon,
|
|
21373
21802
|
coinbase: CoinbaseIcon,
|
|
@@ -21806,10 +22235,10 @@ function WalletSelectionModal({
|
|
|
21806
22235
|
},
|
|
21807
22236
|
children: [
|
|
21808
22237
|
/* @__PURE__ */ jsxs43("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
|
|
21809
|
-
|
|
22238
|
+
WALLET_ICONS3[wallet.id] ? /* @__PURE__ */ jsx50(
|
|
21810
22239
|
WalletIconWithNetwork,
|
|
21811
22240
|
{
|
|
21812
|
-
WalletIcon:
|
|
22241
|
+
WalletIcon: WALLET_ICONS3[wallet.id],
|
|
21813
22242
|
networks: wallet.networks,
|
|
21814
22243
|
size: 40,
|
|
21815
22244
|
className: "uf-rounded-lg"
|
|
@@ -21880,10 +22309,10 @@ function WalletSelectionModal({
|
|
|
21880
22309
|
style: { minHeight: WALLET_STEP_BODY_MIN_HEIGHT },
|
|
21881
22310
|
children: [
|
|
21882
22311
|
/* @__PURE__ */ jsxs43("div", { className: "uf-flex uf-flex-col uf-items-center uf-pb-4 uf-shrink-0", children: [
|
|
21883
|
-
/* @__PURE__ */ jsx50("div", { className: "uf-mb-2", children:
|
|
22312
|
+
/* @__PURE__ */ jsx50("div", { className: "uf-mb-2", children: WALLET_ICONS3[selectedWallet.id] ? /* @__PURE__ */ jsx50(
|
|
21884
22313
|
WalletIconWithNetwork,
|
|
21885
22314
|
{
|
|
21886
|
-
WalletIcon:
|
|
22315
|
+
WalletIcon: WALLET_ICONS3[selectedWallet.id],
|
|
21887
22316
|
networks: selectedWallet.networks,
|
|
21888
22317
|
size: 48,
|
|
21889
22318
|
className: "uf-rounded-lg"
|
|
@@ -22100,7 +22529,7 @@ function DepositModal({
|
|
|
22100
22529
|
const [view, setView] = useState27(
|
|
22101
22530
|
effectiveInitialScreen
|
|
22102
22531
|
);
|
|
22103
|
-
const resetViewTimeoutRef =
|
|
22532
|
+
const resetViewTimeoutRef = useRef72(null);
|
|
22104
22533
|
const [cardView, setCardView] = useState27(
|
|
22105
22534
|
"amount"
|
|
22106
22535
|
);
|
|
@@ -22130,7 +22559,7 @@ function DepositModal({
|
|
|
22130
22559
|
const [resolvedTheme, setResolvedTheme] = useState27(
|
|
22131
22560
|
theme === "auto" ? "dark" : theme
|
|
22132
22561
|
);
|
|
22133
|
-
|
|
22562
|
+
useEffect22(() => {
|
|
22134
22563
|
if (theme === "auto") {
|
|
22135
22564
|
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
22136
22565
|
setResolvedTheme(mediaQuery.matches ? "dark" : "light");
|
|
@@ -22159,7 +22588,7 @@ function DepositModal({
|
|
|
22159
22588
|
chainType: destinationChainType,
|
|
22160
22589
|
enabled: open
|
|
22161
22590
|
});
|
|
22162
|
-
|
|
22591
|
+
useEffect22(() => {
|
|
22163
22592
|
if (view !== "tracker" || !userId) return;
|
|
22164
22593
|
const fetchExecutions = async () => {
|
|
22165
22594
|
try {
|
|
@@ -22180,7 +22609,7 @@ function DepositModal({
|
|
|
22180
22609
|
clearInterval(pollInterval);
|
|
22181
22610
|
};
|
|
22182
22611
|
}, [view, userId, publishableKey]);
|
|
22183
|
-
|
|
22612
|
+
useEffect22(() => {
|
|
22184
22613
|
if (view !== "tracker") {
|
|
22185
22614
|
setSelectedExecution(null);
|
|
22186
22615
|
}
|
|
@@ -22290,7 +22719,7 @@ function DepositModal({
|
|
|
22290
22719
|
setBrowserWalletInfo(null);
|
|
22291
22720
|
setSelectedExecution(null);
|
|
22292
22721
|
}, [open, effectiveInitialScreen]);
|
|
22293
|
-
|
|
22722
|
+
useEffect22(
|
|
22294
22723
|
() => () => {
|
|
22295
22724
|
if (resetViewTimeoutRef.current) {
|
|
22296
22725
|
clearTimeout(resetViewTimeoutRef.current);
|
|
@@ -22682,8 +23111,666 @@ function DepositModal({
|
|
|
22682
23111
|
}
|
|
22683
23112
|
) });
|
|
22684
23113
|
}
|
|
22685
|
-
function
|
|
23114
|
+
function usePaymentIntent(params) {
|
|
23115
|
+
const {
|
|
23116
|
+
clientSecret,
|
|
23117
|
+
publishableKey,
|
|
23118
|
+
enabled = true,
|
|
23119
|
+
pollingInterval = 5e3
|
|
23120
|
+
} = params;
|
|
22686
23121
|
return useQuery9({
|
|
23122
|
+
queryKey: ["unifold", "paymentIntent", clientSecret, publishableKey],
|
|
23123
|
+
queryFn: () => retrievePaymentIntent(clientSecret, publishableKey),
|
|
23124
|
+
enabled: enabled && !!clientSecret && !!publishableKey,
|
|
23125
|
+
staleTime: 0,
|
|
23126
|
+
refetchInterval: pollingInterval || false,
|
|
23127
|
+
refetchOnWindowFocus: true,
|
|
23128
|
+
retry: 3,
|
|
23129
|
+
retryDelay: (attempt) => Math.min(1e3 * 2 ** attempt, 1e4)
|
|
23130
|
+
});
|
|
23131
|
+
}
|
|
23132
|
+
function useDepositQuote(params) {
|
|
23133
|
+
const {
|
|
23134
|
+
publishableKey,
|
|
23135
|
+
sourceChainType,
|
|
23136
|
+
sourceChainId,
|
|
23137
|
+
sourceTokenAddress,
|
|
23138
|
+
destinationAmount,
|
|
23139
|
+
destinationChainType,
|
|
23140
|
+
destinationChainId,
|
|
23141
|
+
destinationTokenAddress,
|
|
23142
|
+
enabled = true
|
|
23143
|
+
} = params;
|
|
23144
|
+
const request = {
|
|
23145
|
+
source_chain_type: sourceChainType,
|
|
23146
|
+
source_chain_id: sourceChainId,
|
|
23147
|
+
source_token_address: sourceTokenAddress,
|
|
23148
|
+
destination_amount: destinationAmount,
|
|
23149
|
+
destination_chain_type: destinationChainType,
|
|
23150
|
+
destination_chain_id: destinationChainId,
|
|
23151
|
+
destination_token_address: destinationTokenAddress
|
|
23152
|
+
};
|
|
23153
|
+
return useQuery10({
|
|
23154
|
+
queryKey: [
|
|
23155
|
+
"unifold",
|
|
23156
|
+
"depositQuote",
|
|
23157
|
+
sourceChainType,
|
|
23158
|
+
sourceChainId,
|
|
23159
|
+
sourceTokenAddress,
|
|
23160
|
+
destinationAmount,
|
|
23161
|
+
destinationChainType,
|
|
23162
|
+
destinationChainId,
|
|
23163
|
+
destinationTokenAddress,
|
|
23164
|
+
publishableKey
|
|
23165
|
+
],
|
|
23166
|
+
queryFn: () => getDepositQuote(request, publishableKey),
|
|
23167
|
+
enabled: enabled && !!publishableKey && !!sourceChainType && !!sourceChainId && !!sourceTokenAddress && !!destinationAmount && destinationAmount !== "0" && !!destinationChainType && !!destinationChainId && !!destinationTokenAddress,
|
|
23168
|
+
staleTime: 6e4,
|
|
23169
|
+
gcTime: 5 * 6e4,
|
|
23170
|
+
refetchOnWindowFocus: false,
|
|
23171
|
+
retry: 2,
|
|
23172
|
+
retryDelay: (attempt) => Math.min(1e3 * 2 ** attempt, 5e3)
|
|
23173
|
+
});
|
|
23174
|
+
}
|
|
23175
|
+
function mapDepositAddressesToWallets(depositAddresses, pi) {
|
|
23176
|
+
return depositAddresses.map((da, idx) => ({
|
|
23177
|
+
id: da.id,
|
|
23178
|
+
chain_type: da.chain_type,
|
|
23179
|
+
address_type: da.address_type,
|
|
23180
|
+
address: da.address,
|
|
23181
|
+
destination_chain_type: pi.destination_chain_type,
|
|
23182
|
+
destination_chain_id: pi.destination_chain_id,
|
|
23183
|
+
destination_token_address: pi.destination_token_address,
|
|
23184
|
+
recipient_address: pi.recipient_address,
|
|
23185
|
+
is_primary: idx === 0
|
|
23186
|
+
}));
|
|
23187
|
+
}
|
|
23188
|
+
function SkeletonButton2() {
|
|
23189
|
+
return /* @__PURE__ */ jsxs45("div", { className: "uf-w-full uf-bg-secondary uf-rounded-xl uf-p-3 uf-flex uf-items-center uf-justify-between uf-animate-pulse", children: [
|
|
23190
|
+
/* @__PURE__ */ jsxs45("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
|
|
23191
|
+
/* @__PURE__ */ jsx522("div", { className: "uf-bg-muted uf-rounded-lg uf-w-9 uf-h-9" }),
|
|
23192
|
+
/* @__PURE__ */ jsxs45("div", { className: "uf-space-y-1.5", children: [
|
|
23193
|
+
/* @__PURE__ */ jsx522("div", { className: "uf-h-3.5 uf-w-24 uf-bg-muted uf-rounded" }),
|
|
23194
|
+
/* @__PURE__ */ jsx522("div", { className: "uf-h-3 uf-w-32 uf-bg-muted uf-rounded" })
|
|
23195
|
+
] })
|
|
23196
|
+
] }),
|
|
23197
|
+
/* @__PURE__ */ jsx522("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ jsx522(ChevronRight, { className: "uf-w-4 uf-h-4 uf-text-muted" }) })
|
|
23198
|
+
] });
|
|
23199
|
+
}
|
|
23200
|
+
function CheckoutModal({
|
|
23201
|
+
open,
|
|
23202
|
+
onOpenChange,
|
|
23203
|
+
clientSecret,
|
|
23204
|
+
publishableKey,
|
|
23205
|
+
modalTitle,
|
|
23206
|
+
enableConnectWallet = false,
|
|
23207
|
+
theme = "dark",
|
|
23208
|
+
onCheckoutSuccess,
|
|
23209
|
+
onCheckoutError
|
|
23210
|
+
}) {
|
|
23211
|
+
const { colors: colors2, fonts, components } = useTheme();
|
|
23212
|
+
const [view, setView] = useState28("main");
|
|
23213
|
+
const resetViewTimeoutRef = useRef82(
|
|
23214
|
+
null
|
|
23215
|
+
);
|
|
23216
|
+
const [browserWalletModalOpen, setBrowserWalletModalOpen] = useState28(false);
|
|
23217
|
+
const [browserWalletInfo, setBrowserWalletInfo] = useState28(null);
|
|
23218
|
+
const [walletSelectionModalOpen, setWalletSelectionModalOpen] = useState28(false);
|
|
23219
|
+
const [browserWalletChainType, setBrowserWalletChainType] = useState28(() => getStoredWalletChainType());
|
|
23220
|
+
const isMobileView = useIsMobileViewport();
|
|
23221
|
+
const [resolvedTheme, setResolvedTheme] = useState28(
|
|
23222
|
+
theme === "auto" ? "dark" : theme
|
|
23223
|
+
);
|
|
23224
|
+
useEffect232(() => {
|
|
23225
|
+
if (theme === "auto") {
|
|
23226
|
+
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
23227
|
+
setResolvedTheme(mediaQuery.matches ? "dark" : "light");
|
|
23228
|
+
const handler = (e) => {
|
|
23229
|
+
setResolvedTheme(e.matches ? "dark" : "light");
|
|
23230
|
+
};
|
|
23231
|
+
mediaQuery.addEventListener("change", handler);
|
|
23232
|
+
return () => mediaQuery.removeEventListener("change", handler);
|
|
23233
|
+
} else {
|
|
23234
|
+
setResolvedTheme(theme);
|
|
23235
|
+
}
|
|
23236
|
+
}, [theme]);
|
|
23237
|
+
const themeClass = resolvedTheme === "dark" ? "uf-dark" : "";
|
|
23238
|
+
const {
|
|
23239
|
+
data: paymentIntent,
|
|
23240
|
+
isLoading: piLoading,
|
|
23241
|
+
error: piError
|
|
23242
|
+
} = usePaymentIntent({
|
|
23243
|
+
clientSecret,
|
|
23244
|
+
publishableKey,
|
|
23245
|
+
enabled: open && !!clientSecret,
|
|
23246
|
+
pollingInterval: 5e3
|
|
23247
|
+
});
|
|
23248
|
+
const { projectConfig } = useProjectConfig({
|
|
23249
|
+
publishableKey,
|
|
23250
|
+
enabled: open
|
|
23251
|
+
});
|
|
23252
|
+
const prevStatusRef = useRef82(null);
|
|
23253
|
+
useEffect232(() => {
|
|
23254
|
+
if (!paymentIntent) return;
|
|
23255
|
+
const prev = prevStatusRef.current;
|
|
23256
|
+
prevStatusRef.current = paymentIntent.status;
|
|
23257
|
+
if (prev && prev !== paymentIntent.status && paymentIntent.status === "succeeded") {
|
|
23258
|
+
if (!browserWalletModalOpen) {
|
|
23259
|
+
setView("main");
|
|
23260
|
+
}
|
|
23261
|
+
onCheckoutSuccess?.({
|
|
23262
|
+
paymentIntentId: paymentIntent.id,
|
|
23263
|
+
status: paymentIntent.status
|
|
23264
|
+
});
|
|
23265
|
+
}
|
|
23266
|
+
}, [paymentIntent, onCheckoutSuccess, browserWalletModalOpen]);
|
|
23267
|
+
const wallets = useMemo102(() => {
|
|
23268
|
+
if (!paymentIntent) return [];
|
|
23269
|
+
return mapDepositAddressesToWallets(
|
|
23270
|
+
paymentIntent.deposit_addresses,
|
|
23271
|
+
paymentIntent
|
|
23272
|
+
);
|
|
23273
|
+
}, [paymentIntent]);
|
|
23274
|
+
const formatCryptoAmount = useMemo102(() => {
|
|
23275
|
+
if (!paymentIntent) return (_) => "";
|
|
23276
|
+
const decimals = paymentIntent.destination_token_decimals ?? 6;
|
|
23277
|
+
const symbol = paymentIntent.currency.toUpperCase();
|
|
23278
|
+
return (baseUnits) => {
|
|
23279
|
+
const num = Number(baseUnits) / 10 ** decimals;
|
|
23280
|
+
const formatted = num % 1 === 0 ? num.toFixed(0) : num.toFixed(2);
|
|
23281
|
+
return `${formatted} ${symbol}`;
|
|
23282
|
+
};
|
|
23283
|
+
}, [paymentIntent]);
|
|
23284
|
+
const remainingAmountUsd = useMemo102(() => {
|
|
23285
|
+
if (!paymentIntent) return void 0;
|
|
23286
|
+
const total = parseFloat(paymentIntent.amount_usd);
|
|
23287
|
+
const received = parseFloat(paymentIntent.amount_received_usd);
|
|
23288
|
+
if (isNaN(total) || isNaN(received)) return paymentIntent.amount_usd;
|
|
23289
|
+
const remaining = total - received;
|
|
23290
|
+
return remaining > 0 ? remaining.toFixed(2) : "0.00";
|
|
23291
|
+
}, [paymentIntent]);
|
|
23292
|
+
const remainingCrypto = useMemo102(() => {
|
|
23293
|
+
if (!paymentIntent) return void 0;
|
|
23294
|
+
const total = BigInt(paymentIntent.amount);
|
|
23295
|
+
const received = BigInt(paymentIntent.amount_received);
|
|
23296
|
+
const remaining = total - received;
|
|
23297
|
+
return remaining > 0n ? remaining.toString() : "0";
|
|
23298
|
+
}, [paymentIntent]);
|
|
23299
|
+
const [selectedSource, setSelectedSource] = useState28(null);
|
|
23300
|
+
const quoteDestinationAmount = useMemo102(() => {
|
|
23301
|
+
if (!paymentIntent || !selectedSource) return "0";
|
|
23302
|
+
const remaining = BigInt(paymentIntent.amount) - BigInt(paymentIntent.amount_received);
|
|
23303
|
+
const totalBaseUnits = Number(paymentIntent.amount);
|
|
23304
|
+
const totalUsd = parseFloat(paymentIntent.amount_usd);
|
|
23305
|
+
const baseUnitsPerUsd = totalUsd > 0 ? totalBaseUnits / totalUsd : 0;
|
|
23306
|
+
const minUsd = Math.max(selectedSource.minimumDepositAmountUsd, 3);
|
|
23307
|
+
const minDepositBaseUnits = BigInt(Math.ceil(minUsd * baseUnitsPerUsd));
|
|
23308
|
+
const effective = remaining > minDepositBaseUnits ? remaining : minDepositBaseUnits;
|
|
23309
|
+
return effective > 0n ? effective.toString() : "0";
|
|
23310
|
+
}, [paymentIntent, selectedSource]);
|
|
23311
|
+
const { data: sourceQuote } = useDepositQuote({
|
|
23312
|
+
publishableKey,
|
|
23313
|
+
sourceChainType: selectedSource?.chainType ?? "",
|
|
23314
|
+
sourceChainId: selectedSource?.chainId ?? "",
|
|
23315
|
+
sourceTokenAddress: selectedSource?.tokenAddress ?? "",
|
|
23316
|
+
destinationAmount: quoteDestinationAmount,
|
|
23317
|
+
destinationChainType: paymentIntent?.destination_chain_type ?? "",
|
|
23318
|
+
destinationChainId: paymentIntent?.destination_chain_id ?? "",
|
|
23319
|
+
destinationTokenAddress: paymentIntent?.destination_token_address ?? "",
|
|
23320
|
+
enabled: open && view === "transfer" && !!paymentIntent && !!selectedSource && quoteDestinationAmount !== "0"
|
|
23321
|
+
});
|
|
23322
|
+
const handleBrowserWalletClick = useCallback52(
|
|
23323
|
+
(walletInfo) => {
|
|
23324
|
+
const walletChainType = walletInfo.type === "phantom-solana" || walletInfo.type === "solflare" || walletInfo.type === "backpack" || walletInfo.type === "glow" ? "solana" : "ethereum";
|
|
23325
|
+
setStoredWalletChainType(walletChainType);
|
|
23326
|
+
setBrowserWalletChainType(walletChainType);
|
|
23327
|
+
const matchingDepositWallet = wallets.find(
|
|
23328
|
+
(w) => w.chain_type === walletChainType
|
|
23329
|
+
);
|
|
23330
|
+
if (!matchingDepositWallet) {
|
|
23331
|
+
onCheckoutError?.({
|
|
23332
|
+
message: `Unable to pay from ${walletChainType}. Please try a different wallet.`,
|
|
23333
|
+
code: "NO_DEPOSIT_ADDRESS"
|
|
23334
|
+
});
|
|
23335
|
+
return;
|
|
23336
|
+
}
|
|
23337
|
+
setBrowserWalletInfo({
|
|
23338
|
+
...walletInfo,
|
|
23339
|
+
depositWallet: matchingDepositWallet
|
|
23340
|
+
});
|
|
23341
|
+
setBrowserWalletModalOpen(true);
|
|
23342
|
+
},
|
|
23343
|
+
[wallets, onCheckoutError]
|
|
23344
|
+
);
|
|
23345
|
+
const handleWalletConnectClick = useCallback52(() => {
|
|
23346
|
+
setWalletSelectionModalOpen(true);
|
|
23347
|
+
}, []);
|
|
23348
|
+
const handleWalletConnected = useCallback52(
|
|
23349
|
+
(walletInfo) => {
|
|
23350
|
+
const walletChainType = walletInfo.type === "phantom-solana" || walletInfo.type === "solflare" || walletInfo.type === "backpack" || walletInfo.type === "glow" ? "solana" : "ethereum";
|
|
23351
|
+
setStoredWalletChainType(walletChainType);
|
|
23352
|
+
setBrowserWalletChainType(walletChainType);
|
|
23353
|
+
const matchingDepositWallet = wallets.find(
|
|
23354
|
+
(w) => w.chain_type === walletChainType
|
|
23355
|
+
);
|
|
23356
|
+
if (!matchingDepositWallet) {
|
|
23357
|
+
onCheckoutError?.({
|
|
23358
|
+
message: `Unable to pay from ${walletChainType}. Please try a different wallet.`,
|
|
23359
|
+
code: "NO_DEPOSIT_ADDRESS"
|
|
23360
|
+
});
|
|
23361
|
+
setWalletSelectionModalOpen(false);
|
|
23362
|
+
return;
|
|
23363
|
+
}
|
|
23364
|
+
setBrowserWalletInfo({
|
|
23365
|
+
...walletInfo,
|
|
23366
|
+
depositWallet: matchingDepositWallet
|
|
23367
|
+
});
|
|
23368
|
+
setWalletSelectionModalOpen(false);
|
|
23369
|
+
setBrowserWalletModalOpen(true);
|
|
23370
|
+
},
|
|
23371
|
+
[wallets, onCheckoutError]
|
|
23372
|
+
);
|
|
23373
|
+
const handleWalletDisconnect = useCallback52(() => {
|
|
23374
|
+
setUserDisconnectedWallet(true);
|
|
23375
|
+
clearStoredWalletChainType();
|
|
23376
|
+
setBrowserWalletChainType(void 0);
|
|
23377
|
+
setBrowserWalletInfo(null);
|
|
23378
|
+
setBrowserWalletModalOpen(false);
|
|
23379
|
+
}, []);
|
|
23380
|
+
const handleClose = useCallback52(() => {
|
|
23381
|
+
onOpenChange(false);
|
|
23382
|
+
if (resetViewTimeoutRef.current) {
|
|
23383
|
+
clearTimeout(resetViewTimeoutRef.current);
|
|
23384
|
+
}
|
|
23385
|
+
resetViewTimeoutRef.current = setTimeout(() => {
|
|
23386
|
+
setView("main");
|
|
23387
|
+
setBrowserWalletInfo(null);
|
|
23388
|
+
resetViewTimeoutRef.current = null;
|
|
23389
|
+
}, 200);
|
|
23390
|
+
}, [onOpenChange]);
|
|
23391
|
+
useLayoutEffect32(() => {
|
|
23392
|
+
if (!open) return;
|
|
23393
|
+
if (resetViewTimeoutRef.current) {
|
|
23394
|
+
clearTimeout(resetViewTimeoutRef.current);
|
|
23395
|
+
resetViewTimeoutRef.current = null;
|
|
23396
|
+
}
|
|
23397
|
+
setView("main");
|
|
23398
|
+
setBrowserWalletInfo(null);
|
|
23399
|
+
}, [open]);
|
|
23400
|
+
useEffect232(
|
|
23401
|
+
() => () => {
|
|
23402
|
+
if (resetViewTimeoutRef.current) {
|
|
23403
|
+
clearTimeout(resetViewTimeoutRef.current);
|
|
23404
|
+
}
|
|
23405
|
+
},
|
|
23406
|
+
[]
|
|
23407
|
+
);
|
|
23408
|
+
const handleBack = useCallback52(() => {
|
|
23409
|
+
setView("main");
|
|
23410
|
+
}, []);
|
|
23411
|
+
const poweredByFooter = /* @__PURE__ */ jsx522("div", { className: "uf-pt-3", children: /* @__PURE__ */ jsx522(
|
|
23412
|
+
PoweredByUnifold,
|
|
23413
|
+
{
|
|
23414
|
+
color: colors2.foregroundMuted,
|
|
23415
|
+
className: "uf-flex uf-justify-center uf-shrink-0"
|
|
23416
|
+
}
|
|
23417
|
+
) });
|
|
23418
|
+
const progressSection = paymentIntent ? (() => {
|
|
23419
|
+
const received = parseFloat(paymentIntent.amount_received_usd);
|
|
23420
|
+
const total = parseFloat(paymentIntent.amount_usd);
|
|
23421
|
+
const remaining = Math.max(total - received, 0);
|
|
23422
|
+
const pct = total > 0 ? Math.min(received / total * 100, 100) : 0;
|
|
23423
|
+
const hasPartial = received > 0;
|
|
23424
|
+
const amountStr = paymentIntent.amount_usd;
|
|
23425
|
+
const dynamicFontSize = `${Math.max(3.75 - amountStr.length * 0.15, 2)}rem`;
|
|
23426
|
+
return /* @__PURE__ */ jsxs45("div", { className: "uf-text-center uf-py-2 uf-space-y-1", children: [
|
|
23427
|
+
paymentIntent.description && /* @__PURE__ */ jsx522(
|
|
23428
|
+
"div",
|
|
23429
|
+
{
|
|
23430
|
+
className: "uf-text-xs",
|
|
23431
|
+
style: {
|
|
23432
|
+
color: colors2.foregroundMuted,
|
|
23433
|
+
fontFamily: fonts.regular
|
|
23434
|
+
},
|
|
23435
|
+
children: paymentIntent.description
|
|
23436
|
+
}
|
|
23437
|
+
),
|
|
23438
|
+
/* @__PURE__ */ jsxs45("div", { className: "uf-flex uf-items-center uf-justify-center", children: [
|
|
23439
|
+
/* @__PURE__ */ jsx522(
|
|
23440
|
+
"span",
|
|
23441
|
+
{
|
|
23442
|
+
className: "uf-mr-1",
|
|
23443
|
+
style: {
|
|
23444
|
+
fontSize: `calc(${dynamicFontSize} * 0.6)`,
|
|
23445
|
+
color: colors2.foregroundMuted,
|
|
23446
|
+
fontFamily: fonts.regular
|
|
23447
|
+
},
|
|
23448
|
+
children: "$"
|
|
23449
|
+
}
|
|
23450
|
+
),
|
|
23451
|
+
/* @__PURE__ */ jsx522(
|
|
23452
|
+
"span",
|
|
23453
|
+
{
|
|
23454
|
+
style: {
|
|
23455
|
+
fontSize: dynamicFontSize,
|
|
23456
|
+
color: colors2.foreground,
|
|
23457
|
+
fontFamily: fonts.regular,
|
|
23458
|
+
lineHeight: 1.1
|
|
23459
|
+
},
|
|
23460
|
+
children: amountStr
|
|
23461
|
+
}
|
|
23462
|
+
)
|
|
23463
|
+
] }),
|
|
23464
|
+
/* @__PURE__ */ jsx522(
|
|
23465
|
+
"div",
|
|
23466
|
+
{
|
|
23467
|
+
className: "uf-text-xs",
|
|
23468
|
+
style: {
|
|
23469
|
+
color: colors2.foregroundMuted,
|
|
23470
|
+
fontFamily: fonts.regular
|
|
23471
|
+
},
|
|
23472
|
+
children: paymentIntent.currency.toUpperCase()
|
|
23473
|
+
}
|
|
23474
|
+
),
|
|
23475
|
+
hasPartial && /* @__PURE__ */ jsxs45("div", { className: "uf-pt-2 uf-space-y-1.5", children: [
|
|
23476
|
+
/* @__PURE__ */ jsx522(
|
|
23477
|
+
"div",
|
|
23478
|
+
{
|
|
23479
|
+
className: "uf-w-full uf-h-1.5 uf-rounded-full uf-overflow-hidden",
|
|
23480
|
+
style: { backgroundColor: colors2.border },
|
|
23481
|
+
children: /* @__PURE__ */ jsx522(
|
|
23482
|
+
"div",
|
|
23483
|
+
{
|
|
23484
|
+
className: "uf-h-full uf-rounded-full uf-transition-all uf-duration-500",
|
|
23485
|
+
style: {
|
|
23486
|
+
width: `${pct}%`,
|
|
23487
|
+
backgroundColor: paymentIntent.status === "succeeded" ? "rgb(34, 197, 94)" : colors2.primary
|
|
23488
|
+
}
|
|
23489
|
+
}
|
|
23490
|
+
)
|
|
23491
|
+
}
|
|
23492
|
+
),
|
|
23493
|
+
/* @__PURE__ */ jsxs45(
|
|
23494
|
+
"div",
|
|
23495
|
+
{
|
|
23496
|
+
className: "uf-text-xs",
|
|
23497
|
+
style: {
|
|
23498
|
+
color: colors2.foregroundMuted,
|
|
23499
|
+
fontFamily: fonts.regular
|
|
23500
|
+
},
|
|
23501
|
+
children: [
|
|
23502
|
+
"$",
|
|
23503
|
+
paymentIntent.amount_received_usd,
|
|
23504
|
+
" / $",
|
|
23505
|
+
amountStr,
|
|
23506
|
+
" received",
|
|
23507
|
+
remaining > 0 && paymentIntent.status !== "succeeded" && /* @__PURE__ */ jsxs45("span", { style: { color: colors2.foreground, fontFamily: fonts.medium }, children: [
|
|
23508
|
+
" ",
|
|
23509
|
+
"\xB7 $",
|
|
23510
|
+
remaining.toFixed(2),
|
|
23511
|
+
" remaining"
|
|
23512
|
+
] })
|
|
23513
|
+
]
|
|
23514
|
+
}
|
|
23515
|
+
)
|
|
23516
|
+
] }),
|
|
23517
|
+
paymentIntent.status !== "requires_payment" && /* @__PURE__ */ jsx522("div", { className: "uf-pt-1", children: /* @__PURE__ */ jsx522(
|
|
23518
|
+
"span",
|
|
23519
|
+
{
|
|
23520
|
+
className: "uf-text-xs uf-font-medium uf-px-2.5 uf-py-1 uf-rounded-full uf-inline-block",
|
|
23521
|
+
style: {
|
|
23522
|
+
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)",
|
|
23523
|
+
color: paymentIntent.status === "succeeded" ? "rgb(34, 197, 94)" : paymentIntent.status === "processing" ? "rgb(59, 130, 246)" : "rgb(239, 68, 68)",
|
|
23524
|
+
fontFamily: fonts.medium
|
|
23525
|
+
},
|
|
23526
|
+
children: paymentIntent.status === "succeeded" ? "Payment Complete" : paymentIntent.status === "processing" ? "Partial Payment Received" : paymentIntent.status === "canceled" ? "Canceled" : paymentIntent.status === "expired" ? "Expired" : paymentIntent.status
|
|
23527
|
+
}
|
|
23528
|
+
) })
|
|
23529
|
+
] });
|
|
23530
|
+
})() : null;
|
|
23531
|
+
return /* @__PURE__ */ jsx522(PortalContainerProvider, { value: null, children: /* @__PURE__ */ jsxs45(Dialog2, { open, onOpenChange: handleClose, modal: true, children: [
|
|
23532
|
+
/* @__PURE__ */ jsx522(
|
|
23533
|
+
DialogContent2,
|
|
23534
|
+
{
|
|
23535
|
+
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}`,
|
|
23536
|
+
style: { backgroundColor: colors2.background },
|
|
23537
|
+
onPointerDownOutside: (e) => e.preventDefault(),
|
|
23538
|
+
onInteractOutside: (e) => e.preventDefault(),
|
|
23539
|
+
children: /* @__PURE__ */ jsx522(ThemeStyleInjector, { children: view === "main" ? /* @__PURE__ */ jsxs45(Fragment10, { children: [
|
|
23540
|
+
/* @__PURE__ */ jsx522(
|
|
23541
|
+
DepositHeader,
|
|
23542
|
+
{
|
|
23543
|
+
title: modalTitle || "Checkout",
|
|
23544
|
+
showClose: true,
|
|
23545
|
+
onClose: handleClose
|
|
23546
|
+
}
|
|
23547
|
+
),
|
|
23548
|
+
/* @__PURE__ */ jsxs45("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
|
|
23549
|
+
piLoading ? /* @__PURE__ */ jsxs45("div", { className: "uf-space-y-3", children: [
|
|
23550
|
+
/* @__PURE__ */ jsx522(
|
|
23551
|
+
"div",
|
|
23552
|
+
{
|
|
23553
|
+
className: "uf-rounded-xl uf-p-4 uf-animate-pulse",
|
|
23554
|
+
style: {
|
|
23555
|
+
backgroundColor: components.card.backgroundColor,
|
|
23556
|
+
borderRadius: components.card.borderRadius,
|
|
23557
|
+
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
23558
|
+
},
|
|
23559
|
+
children: /* @__PURE__ */ jsxs45("div", { className: "uf-flex uf-flex-col uf-items-center uf-gap-2", children: [
|
|
23560
|
+
/* @__PURE__ */ jsx522(
|
|
23561
|
+
"div",
|
|
23562
|
+
{
|
|
23563
|
+
className: "uf-h-8 uf-w-24 uf-rounded",
|
|
23564
|
+
style: {
|
|
23565
|
+
backgroundColor: components.card.borderColor
|
|
23566
|
+
}
|
|
23567
|
+
}
|
|
23568
|
+
),
|
|
23569
|
+
/* @__PURE__ */ jsx522(
|
|
23570
|
+
"div",
|
|
23571
|
+
{
|
|
23572
|
+
className: "uf-h-4 uf-w-16 uf-rounded",
|
|
23573
|
+
style: {
|
|
23574
|
+
backgroundColor: components.card.borderColor
|
|
23575
|
+
}
|
|
23576
|
+
}
|
|
23577
|
+
)
|
|
23578
|
+
] })
|
|
23579
|
+
}
|
|
23580
|
+
),
|
|
23581
|
+
/* @__PURE__ */ jsx522(SkeletonButton2, {}),
|
|
23582
|
+
/* @__PURE__ */ jsx522(SkeletonButton2, {})
|
|
23583
|
+
] }) : piError ? /* @__PURE__ */ jsxs45("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
|
|
23584
|
+
/* @__PURE__ */ jsx522("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__ */ jsx522(TriangleAlert, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
|
|
23585
|
+
/* @__PURE__ */ jsx522(
|
|
23586
|
+
"h3",
|
|
23587
|
+
{
|
|
23588
|
+
className: "uf-text-lg uf-font-semibold uf-mb-2",
|
|
23589
|
+
style: {
|
|
23590
|
+
color: colors2.foreground,
|
|
23591
|
+
fontFamily: fonts.semibold
|
|
23592
|
+
},
|
|
23593
|
+
children: "Unable to Load Checkout"
|
|
23594
|
+
}
|
|
23595
|
+
),
|
|
23596
|
+
/* @__PURE__ */ jsx522(
|
|
23597
|
+
"p",
|
|
23598
|
+
{
|
|
23599
|
+
className: "uf-text-sm uf-max-w-[280px]",
|
|
23600
|
+
style: {
|
|
23601
|
+
color: colors2.foregroundMuted,
|
|
23602
|
+
fontFamily: fonts.regular
|
|
23603
|
+
},
|
|
23604
|
+
children: piError instanceof Error ? piError.message : "Something went wrong. Please try again."
|
|
23605
|
+
}
|
|
23606
|
+
)
|
|
23607
|
+
] }) : paymentIntent ? /* @__PURE__ */ jsxs45("div", { className: "uf-space-y-3", children: [
|
|
23608
|
+
progressSection,
|
|
23609
|
+
(paymentIntent.status === "requires_payment" || paymentIntent.status === "processing") && /* @__PURE__ */ jsxs45(Fragment10, { children: [
|
|
23610
|
+
/* @__PURE__ */ jsx522(
|
|
23611
|
+
TransferCryptoButton,
|
|
23612
|
+
{
|
|
23613
|
+
onClick: () => setView("transfer"),
|
|
23614
|
+
title: "Transfer Crypto",
|
|
23615
|
+
subtitle: "Send from any wallet or exchange",
|
|
23616
|
+
featuredTokens: projectConfig?.transfer_crypto.networks
|
|
23617
|
+
}
|
|
23618
|
+
),
|
|
23619
|
+
enableConnectWallet && !isMobileView && /* @__PURE__ */ jsx522(
|
|
23620
|
+
BrowserWalletButton,
|
|
23621
|
+
{
|
|
23622
|
+
onClick: handleBrowserWalletClick,
|
|
23623
|
+
onConnectClick: handleWalletConnectClick,
|
|
23624
|
+
onDisconnect: handleWalletDisconnect,
|
|
23625
|
+
chainType: browserWalletChainType,
|
|
23626
|
+
publishableKey
|
|
23627
|
+
}
|
|
23628
|
+
)
|
|
23629
|
+
] })
|
|
23630
|
+
] }) : null,
|
|
23631
|
+
poweredByFooter
|
|
23632
|
+
] })
|
|
23633
|
+
] }) : view === "transfer" ? /* @__PURE__ */ jsxs45(Fragment10, { children: [
|
|
23634
|
+
/* @__PURE__ */ jsx522(
|
|
23635
|
+
DepositHeader,
|
|
23636
|
+
{
|
|
23637
|
+
title: `Pay $${remainingAmountUsd ?? paymentIntent?.amount_usd ?? ""}`,
|
|
23638
|
+
showBack: true,
|
|
23639
|
+
onBack: handleBack,
|
|
23640
|
+
onClose: handleClose
|
|
23641
|
+
}
|
|
23642
|
+
),
|
|
23643
|
+
/* @__PURE__ */ jsxs45("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
|
|
23644
|
+
paymentIntent ? /* @__PURE__ */ jsxs45(Fragment10, { children: [
|
|
23645
|
+
/* @__PURE__ */ jsxs45(
|
|
23646
|
+
"div",
|
|
23647
|
+
{
|
|
23648
|
+
className: "uf-rounded-lg uf-px-3 uf-py-2 uf-flex uf-items-center uf-justify-between",
|
|
23649
|
+
style: {
|
|
23650
|
+
backgroundColor: components.card.backgroundColor,
|
|
23651
|
+
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`,
|
|
23652
|
+
borderRadius: components.card.borderRadius
|
|
23653
|
+
},
|
|
23654
|
+
children: [
|
|
23655
|
+
/* @__PURE__ */ jsx522(
|
|
23656
|
+
"span",
|
|
23657
|
+
{
|
|
23658
|
+
className: "uf-text-xs",
|
|
23659
|
+
style: {
|
|
23660
|
+
color: colors2.foregroundMuted,
|
|
23661
|
+
fontFamily: fonts.regular
|
|
23662
|
+
},
|
|
23663
|
+
children: parseFloat(paymentIntent.amount_received_usd) > 0 ? `$${paymentIntent.amount_received_usd} / $${paymentIntent.amount_usd} received` : "Amount due"
|
|
23664
|
+
}
|
|
23665
|
+
),
|
|
23666
|
+
/* @__PURE__ */ jsxs45(
|
|
23667
|
+
"span",
|
|
23668
|
+
{
|
|
23669
|
+
className: "uf-text-sm uf-font-semibold",
|
|
23670
|
+
style: {
|
|
23671
|
+
color: colors2.foreground,
|
|
23672
|
+
fontFamily: fonts.semibold
|
|
23673
|
+
},
|
|
23674
|
+
children: [
|
|
23675
|
+
formatCryptoAmount(remainingCrypto ?? paymentIntent.amount),
|
|
23676
|
+
/* @__PURE__ */ jsxs45(
|
|
23677
|
+
"span",
|
|
23678
|
+
{
|
|
23679
|
+
className: "uf-text-xs uf-font-normal uf-ml-1",
|
|
23680
|
+
style: { color: colors2.foregroundMuted },
|
|
23681
|
+
children: [
|
|
23682
|
+
"($",
|
|
23683
|
+
remainingAmountUsd ?? paymentIntent.amount_usd,
|
|
23684
|
+
")"
|
|
23685
|
+
]
|
|
23686
|
+
}
|
|
23687
|
+
)
|
|
23688
|
+
]
|
|
23689
|
+
}
|
|
23690
|
+
)
|
|
23691
|
+
]
|
|
23692
|
+
}
|
|
23693
|
+
),
|
|
23694
|
+
/* @__PURE__ */ jsx522(
|
|
23695
|
+
TransferCryptoSingleInput,
|
|
23696
|
+
{
|
|
23697
|
+
userId: paymentIntent.user_id || "",
|
|
23698
|
+
publishableKey,
|
|
23699
|
+
clientSecret,
|
|
23700
|
+
recipientAddress: paymentIntent.recipient_address,
|
|
23701
|
+
destinationChainType: paymentIntent.destination_chain_type,
|
|
23702
|
+
destinationChainId: paymentIntent.destination_chain_id,
|
|
23703
|
+
destinationTokenAddress: paymentIntent.destination_token_address,
|
|
23704
|
+
depositConfirmationMode: "auto_ui",
|
|
23705
|
+
wallets,
|
|
23706
|
+
onSourceTokenChange: setSelectedSource,
|
|
23707
|
+
checkoutQuote: sourceQuote ? {
|
|
23708
|
+
sourceAmount: sourceQuote.source_amount,
|
|
23709
|
+
sourceTokenDecimals: sourceQuote.source_token_decimals,
|
|
23710
|
+
sourceTokenSymbol: sourceQuote.source_token_symbol,
|
|
23711
|
+
sourceAmountUsd: sourceQuote.source_amount_usd
|
|
23712
|
+
} : null
|
|
23713
|
+
}
|
|
23714
|
+
)
|
|
23715
|
+
] }) : /* @__PURE__ */ jsx522(SkeletonButton2, {}),
|
|
23716
|
+
poweredByFooter
|
|
23717
|
+
] })
|
|
23718
|
+
] }) : null })
|
|
23719
|
+
}
|
|
23720
|
+
),
|
|
23721
|
+
/* @__PURE__ */ jsx522(
|
|
23722
|
+
WalletSelectionModal,
|
|
23723
|
+
{
|
|
23724
|
+
open: walletSelectionModalOpen,
|
|
23725
|
+
onOpenChange: setWalletSelectionModalOpen,
|
|
23726
|
+
onWalletConnected: handleWalletConnected,
|
|
23727
|
+
onClose: () => setWalletSelectionModalOpen(false),
|
|
23728
|
+
theme: resolvedTheme
|
|
23729
|
+
}
|
|
23730
|
+
),
|
|
23731
|
+
browserWalletInfo && browserWalletInfo.depositWallet && /* @__PURE__ */ jsx522(
|
|
23732
|
+
BrowserWalletModal,
|
|
23733
|
+
{
|
|
23734
|
+
open: browserWalletModalOpen,
|
|
23735
|
+
onOpenChange: setBrowserWalletModalOpen,
|
|
23736
|
+
onFullClose: handleClose,
|
|
23737
|
+
walletInfo: browserWalletInfo,
|
|
23738
|
+
depositWallet: browserWalletInfo.depositWallet,
|
|
23739
|
+
userId: paymentIntent?.user_id || "",
|
|
23740
|
+
publishableKey,
|
|
23741
|
+
clientSecret,
|
|
23742
|
+
theme: resolvedTheme,
|
|
23743
|
+
prefillAmountUsd: remainingAmountUsd,
|
|
23744
|
+
checkoutAmountUsd: paymentIntent?.amount_usd,
|
|
23745
|
+
checkoutReceivedUsd: paymentIntent?.amount_received_usd,
|
|
23746
|
+
onSuccess: (txHash) => {
|
|
23747
|
+
onCheckoutSuccess?.({
|
|
23748
|
+
paymentIntentId: paymentIntent?.id || "",
|
|
23749
|
+
status: "processing"
|
|
23750
|
+
});
|
|
23751
|
+
},
|
|
23752
|
+
onError: (error) => {
|
|
23753
|
+
onCheckoutError?.({
|
|
23754
|
+
message: error.message,
|
|
23755
|
+
error
|
|
23756
|
+
});
|
|
23757
|
+
},
|
|
23758
|
+
onWalletDisconnect: handleWalletDisconnect,
|
|
23759
|
+
onNewDeposit: () => {
|
|
23760
|
+
setBrowserWalletModalOpen(false);
|
|
23761
|
+
setView("main");
|
|
23762
|
+
},
|
|
23763
|
+
onDone: () => {
|
|
23764
|
+
setBrowserWalletModalOpen(false);
|
|
23765
|
+
setView("main");
|
|
23766
|
+
},
|
|
23767
|
+
paymentIntentStatus: paymentIntent?.status
|
|
23768
|
+
}
|
|
23769
|
+
)
|
|
23770
|
+
] }) });
|
|
23771
|
+
}
|
|
23772
|
+
function useSupportedDestinationTokens(publishableKey, enabled = true) {
|
|
23773
|
+
return useQuery11({
|
|
22687
23774
|
queryKey: ["unifold", "supportedDestinationTokens", publishableKey],
|
|
22688
23775
|
queryFn: () => getSupportedDestinationTokens(publishableKey),
|
|
22689
23776
|
staleTime: 1e3 * 60 * 5,
|
|
@@ -22703,7 +23790,7 @@ function useSourceTokenValidation(params) {
|
|
|
22703
23790
|
enabled = true
|
|
22704
23791
|
} = params;
|
|
22705
23792
|
const hasParams = !!sourceChainType && !!sourceChainId && !!sourceTokenAddress;
|
|
22706
|
-
return
|
|
23793
|
+
return useQuery12({
|
|
22707
23794
|
queryKey: [
|
|
22708
23795
|
"unifold",
|
|
22709
23796
|
"sourceTokenValidation",
|
|
@@ -22756,7 +23843,7 @@ function useAddressBalance(params) {
|
|
|
22756
23843
|
enabled = true
|
|
22757
23844
|
} = params;
|
|
22758
23845
|
const hasParams = !!address && !!chainType && !!chainId && !!tokenAddress;
|
|
22759
|
-
return
|
|
23846
|
+
return useQuery13({
|
|
22760
23847
|
queryKey: [
|
|
22761
23848
|
"unifold",
|
|
22762
23849
|
"addressBalance",
|
|
@@ -22805,7 +23892,7 @@ function useAddressBalance(params) {
|
|
|
22805
23892
|
}
|
|
22806
23893
|
function useExecutions(userId, publishableKey, options) {
|
|
22807
23894
|
const actionType = options?.actionType ?? ActionType.Deposit;
|
|
22808
|
-
return
|
|
23895
|
+
return useQuery14({
|
|
22809
23896
|
queryKey: ["unifold", "executions", actionType, userId, publishableKey],
|
|
22810
23897
|
queryFn: () => queryExecutions(userId, publishableKey, actionType),
|
|
22811
23898
|
enabled: (options?.enabled ?? true) && !!userId,
|
|
@@ -22826,20 +23913,20 @@ function useWithdrawPolling({
|
|
|
22826
23913
|
onWithdrawSuccess,
|
|
22827
23914
|
onWithdrawError
|
|
22828
23915
|
}) {
|
|
22829
|
-
const [executions, setExecutions] =
|
|
22830
|
-
const [isPolling, setIsPolling] =
|
|
22831
|
-
const enabledAtRef =
|
|
22832
|
-
const trackedRef =
|
|
22833
|
-
const prevEnabledRef =
|
|
22834
|
-
const onSuccessRef =
|
|
22835
|
-
const onErrorRef =
|
|
22836
|
-
|
|
23916
|
+
const [executions, setExecutions] = useState29([]);
|
|
23917
|
+
const [isPolling, setIsPolling] = useState29(false);
|
|
23918
|
+
const enabledAtRef = useRef92(/* @__PURE__ */ new Date());
|
|
23919
|
+
const trackedRef = useRef92(/* @__PURE__ */ new Map());
|
|
23920
|
+
const prevEnabledRef = useRef92(false);
|
|
23921
|
+
const onSuccessRef = useRef92(onWithdrawSuccess);
|
|
23922
|
+
const onErrorRef = useRef92(onWithdrawError);
|
|
23923
|
+
useEffect242(() => {
|
|
22837
23924
|
onSuccessRef.current = onWithdrawSuccess;
|
|
22838
23925
|
}, [onWithdrawSuccess]);
|
|
22839
|
-
|
|
23926
|
+
useEffect242(() => {
|
|
22840
23927
|
onErrorRef.current = onWithdrawError;
|
|
22841
23928
|
}, [onWithdrawError]);
|
|
22842
|
-
|
|
23929
|
+
useEffect242(() => {
|
|
22843
23930
|
if (enabled && !prevEnabledRef.current) {
|
|
22844
23931
|
enabledAtRef.current = /* @__PURE__ */ new Date();
|
|
22845
23932
|
trackedRef.current.clear();
|
|
@@ -22849,7 +23936,7 @@ function useWithdrawPolling({
|
|
|
22849
23936
|
}
|
|
22850
23937
|
prevEnabledRef.current = enabled;
|
|
22851
23938
|
}, [enabled]);
|
|
22852
|
-
|
|
23939
|
+
useEffect242(() => {
|
|
22853
23940
|
if (!userId || !enabled) return;
|
|
22854
23941
|
const enabledAt = enabledAtRef.current;
|
|
22855
23942
|
const poll = async () => {
|
|
@@ -22911,7 +23998,7 @@ function useWithdrawPolling({
|
|
|
22911
23998
|
setIsPolling(false);
|
|
22912
23999
|
};
|
|
22913
24000
|
}, [userId, publishableKey, enabled]);
|
|
22914
|
-
|
|
24001
|
+
useEffect242(() => {
|
|
22915
24002
|
if (!enabled || !depositWalletId) return;
|
|
22916
24003
|
const trigger = async () => {
|
|
22917
24004
|
try {
|
|
@@ -22939,8 +24026,8 @@ function WithdrawDoubleInput({
|
|
|
22939
24026
|
const isDarkMode = useTheme().themeClass.includes("uf-dark");
|
|
22940
24027
|
const selectedToken = selectedTokenSymbol ? tokens.find((t11) => t11.symbol === selectedTokenSymbol) : void 0;
|
|
22941
24028
|
const availableChainsForToken = selectedToken?.chains || [];
|
|
22942
|
-
const renderTokenItem = (tokenData) => /* @__PURE__ */
|
|
22943
|
-
/* @__PURE__ */
|
|
24029
|
+
const renderTokenItem = (tokenData) => /* @__PURE__ */ jsxs46("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
24030
|
+
/* @__PURE__ */ jsx53(
|
|
22944
24031
|
"img",
|
|
22945
24032
|
{
|
|
22946
24033
|
src: tokenData.icon_url,
|
|
@@ -22951,10 +24038,10 @@ function WithdrawDoubleInput({
|
|
|
22951
24038
|
className: "uf-rounded-full uf-flex-shrink-0"
|
|
22952
24039
|
}
|
|
22953
24040
|
),
|
|
22954
|
-
/* @__PURE__ */
|
|
24041
|
+
/* @__PURE__ */ jsx53("span", { className: "uf-text-xs uf-font-normal", children: tokenData.symbol })
|
|
22955
24042
|
] });
|
|
22956
|
-
const renderChainItem = (chainData) => /* @__PURE__ */
|
|
22957
|
-
/* @__PURE__ */
|
|
24043
|
+
const renderChainItem = (chainData) => /* @__PURE__ */ jsxs46("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
24044
|
+
/* @__PURE__ */ jsx53(
|
|
22958
24045
|
"img",
|
|
22959
24046
|
{
|
|
22960
24047
|
src: chainData.icon_url,
|
|
@@ -22965,14 +24052,14 @@ function WithdrawDoubleInput({
|
|
|
22965
24052
|
className: "uf-rounded-full uf-flex-shrink-0"
|
|
22966
24053
|
}
|
|
22967
24054
|
),
|
|
22968
|
-
/* @__PURE__ */
|
|
24055
|
+
/* @__PURE__ */ jsx53("span", { className: "uf-text-xs uf-font-normal", children: chainData.chain_name })
|
|
22969
24056
|
] });
|
|
22970
24057
|
const currentChainData = selectedChainKey ? availableChainsForToken.find(
|
|
22971
24058
|
(c) => getChainKey4(c.chain_id, c.chain_type) === selectedChainKey
|
|
22972
24059
|
) : void 0;
|
|
22973
|
-
return /* @__PURE__ */
|
|
22974
|
-
/* @__PURE__ */
|
|
22975
|
-
/* @__PURE__ */
|
|
24060
|
+
return /* @__PURE__ */ jsxs46("div", { className: "uf-grid uf-grid-cols-2 uf-gap-2.5", children: [
|
|
24061
|
+
/* @__PURE__ */ jsxs46("div", { children: [
|
|
24062
|
+
/* @__PURE__ */ jsx53(
|
|
22976
24063
|
"div",
|
|
22977
24064
|
{
|
|
22978
24065
|
className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1",
|
|
@@ -22980,14 +24067,14 @@ function WithdrawDoubleInput({
|
|
|
22980
24067
|
children: t7.receiveToken
|
|
22981
24068
|
}
|
|
22982
24069
|
),
|
|
22983
|
-
/* @__PURE__ */
|
|
24070
|
+
/* @__PURE__ */ jsxs46(
|
|
22984
24071
|
Select2,
|
|
22985
24072
|
{
|
|
22986
24073
|
value: selectedTokenSymbol ?? "",
|
|
22987
24074
|
onValueChange: onTokenChange,
|
|
22988
24075
|
disabled: isLoading || tokens.length === 0,
|
|
22989
24076
|
children: [
|
|
22990
|
-
/* @__PURE__ */
|
|
24077
|
+
/* @__PURE__ */ jsx53(
|
|
22991
24078
|
SelectTrigger2,
|
|
22992
24079
|
{
|
|
22993
24080
|
className: "uf-h-10 hover:uf-opacity-90 uf-text-foreground disabled:uf-opacity-50",
|
|
@@ -22995,10 +24082,10 @@ function WithdrawDoubleInput({
|
|
|
22995
24082
|
backgroundColor: components.card.backgroundColor,
|
|
22996
24083
|
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
22997
24084
|
},
|
|
22998
|
-
children: /* @__PURE__ */
|
|
24085
|
+
children: /* @__PURE__ */ jsx53(SelectValue2, { children: isLoading || !selectedTokenSymbol ? /* @__PURE__ */ jsx53("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t7.loading }) : selectedToken ? renderTokenItem(selectedToken) : /* @__PURE__ */ jsx53("span", { className: "uf-text-xs uf-font-normal", children: selectedTokenSymbol }) })
|
|
22999
24086
|
}
|
|
23000
24087
|
),
|
|
23001
|
-
/* @__PURE__ */
|
|
24088
|
+
/* @__PURE__ */ jsx53(
|
|
23002
24089
|
SelectContent2,
|
|
23003
24090
|
{
|
|
23004
24091
|
className: "uf-bg-secondary uf-border uf-text-foreground uf-max-h-[300px]",
|
|
@@ -23006,7 +24093,7 @@ function WithdrawDoubleInput({
|
|
|
23006
24093
|
border: `1px solid ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)"}`,
|
|
23007
24094
|
...fonts.regular ? { "--uf-font-family": fonts.regular } : {}
|
|
23008
24095
|
},
|
|
23009
|
-
children: tokens.map((tokenData) => /* @__PURE__ */
|
|
24096
|
+
children: tokens.map((tokenData) => /* @__PURE__ */ jsx53(
|
|
23010
24097
|
SelectItem2,
|
|
23011
24098
|
{
|
|
23012
24099
|
value: tokenData.symbol,
|
|
@@ -23021,8 +24108,8 @@ function WithdrawDoubleInput({
|
|
|
23021
24108
|
}
|
|
23022
24109
|
)
|
|
23023
24110
|
] }),
|
|
23024
|
-
/* @__PURE__ */
|
|
23025
|
-
/* @__PURE__ */
|
|
24111
|
+
/* @__PURE__ */ jsxs46("div", { children: [
|
|
24112
|
+
/* @__PURE__ */ jsx53(
|
|
23026
24113
|
"div",
|
|
23027
24114
|
{
|
|
23028
24115
|
className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1",
|
|
@@ -23030,14 +24117,14 @@ function WithdrawDoubleInput({
|
|
|
23030
24117
|
children: t7.receiveChain
|
|
23031
24118
|
}
|
|
23032
24119
|
),
|
|
23033
|
-
/* @__PURE__ */
|
|
24120
|
+
/* @__PURE__ */ jsxs46(
|
|
23034
24121
|
Select2,
|
|
23035
24122
|
{
|
|
23036
24123
|
value: selectedChainKey ?? "",
|
|
23037
24124
|
onValueChange: onChainChange,
|
|
23038
24125
|
disabled: isLoading || availableChainsForToken.length === 0,
|
|
23039
24126
|
children: [
|
|
23040
|
-
/* @__PURE__ */
|
|
24127
|
+
/* @__PURE__ */ jsx53(
|
|
23041
24128
|
SelectTrigger2,
|
|
23042
24129
|
{
|
|
23043
24130
|
className: "uf-h-10 hover:uf-opacity-90 uf-text-foreground disabled:uf-opacity-50",
|
|
@@ -23045,10 +24132,10 @@ function WithdrawDoubleInput({
|
|
|
23045
24132
|
backgroundColor: components.card.backgroundColor,
|
|
23046
24133
|
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
23047
24134
|
},
|
|
23048
|
-
children: /* @__PURE__ */
|
|
24135
|
+
children: /* @__PURE__ */ jsx53(SelectValue2, { children: isLoading || !selectedChainKey ? /* @__PURE__ */ jsx53("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t7.loading }) : currentChainData ? renderChainItem(currentChainData) : /* @__PURE__ */ jsx53("span", { className: "uf-text-xs uf-font-normal", children: selectedChainKey }) })
|
|
23049
24136
|
}
|
|
23050
24137
|
),
|
|
23051
|
-
/* @__PURE__ */
|
|
24138
|
+
/* @__PURE__ */ jsx53(
|
|
23052
24139
|
SelectContent2,
|
|
23053
24140
|
{
|
|
23054
24141
|
align: "end",
|
|
@@ -23057,9 +24144,9 @@ function WithdrawDoubleInput({
|
|
|
23057
24144
|
border: `1px solid ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)"}`,
|
|
23058
24145
|
...fonts.regular ? { "--uf-font-family": fonts.regular } : {}
|
|
23059
24146
|
},
|
|
23060
|
-
children: availableChainsForToken.length === 0 ? /* @__PURE__ */
|
|
24147
|
+
children: availableChainsForToken.length === 0 ? /* @__PURE__ */ jsx53("div", { className: "uf-px-2 uf-py-3 uf-text-xs uf-text-muted-foreground uf-text-center", children: "No chains available" }) : availableChainsForToken.map((chainData) => {
|
|
23061
24148
|
const chainKey = getChainKey4(chainData.chain_id, chainData.chain_type);
|
|
23062
|
-
return /* @__PURE__ */
|
|
24149
|
+
return /* @__PURE__ */ jsx53(
|
|
23063
24150
|
SelectItem2,
|
|
23064
24151
|
{
|
|
23065
24152
|
value: chainKey,
|
|
@@ -23088,7 +24175,7 @@ function useVerifyRecipientAddress(params) {
|
|
|
23088
24175
|
} = params;
|
|
23089
24176
|
const trimmedAddress = recipientAddress?.trim() || "";
|
|
23090
24177
|
const hasAllParams = !!chainType && !!chainId && !!tokenAddress && trimmedAddress.length > 0;
|
|
23091
|
-
return
|
|
24178
|
+
return useQuery15({
|
|
23092
24179
|
queryKey: [
|
|
23093
24180
|
"unifold",
|
|
23094
24181
|
"verifyRecipientAddress",
|
|
@@ -23224,6 +24311,52 @@ async function sendSolanaWithdraw(params) {
|
|
|
23224
24311
|
);
|
|
23225
24312
|
return sendResponse.signature;
|
|
23226
24313
|
}
|
|
24314
|
+
var HYPERCORE_CHAIN_ID = "1337";
|
|
24315
|
+
var HYPERCORE_SPOT_USDC_ADDRESS = "0x6d1e7cde53ba9467b783cb7c530ce054";
|
|
24316
|
+
function isHypercoreChain(chainId) {
|
|
24317
|
+
return chainId === HYPERCORE_CHAIN_ID;
|
|
24318
|
+
}
|
|
24319
|
+
async function sendHypercoreWithdraw(params) {
|
|
24320
|
+
const {
|
|
24321
|
+
provider,
|
|
24322
|
+
fromAddress,
|
|
24323
|
+
depositWalletAddress,
|
|
24324
|
+
sourceTokenAddress,
|
|
24325
|
+
amount,
|
|
24326
|
+
tokenSymbol,
|
|
24327
|
+
publishableKey
|
|
24328
|
+
} = params;
|
|
24329
|
+
const isSpot = sourceTokenAddress.toLowerCase() === HYPERCORE_SPOT_USDC_ADDRESS;
|
|
24330
|
+
const currentChainHex = await provider.request({
|
|
24331
|
+
method: "eth_chainId",
|
|
24332
|
+
params: []
|
|
24333
|
+
});
|
|
24334
|
+
const activeChainId = String(parseInt(currentChainHex, 16));
|
|
24335
|
+
const buildResult = await buildHypercoreTransaction(
|
|
24336
|
+
{
|
|
24337
|
+
action_type: isSpot ? "spot_send" : "usd_send",
|
|
24338
|
+
signature_chain_type: "ethereum",
|
|
24339
|
+
signature_chain_id: activeChainId,
|
|
24340
|
+
recipient_address: depositWalletAddress,
|
|
24341
|
+
token_address: sourceTokenAddress,
|
|
24342
|
+
token_symbol: tokenSymbol || void 0,
|
|
24343
|
+
amount
|
|
24344
|
+
},
|
|
24345
|
+
publishableKey
|
|
24346
|
+
);
|
|
24347
|
+
const signature = await provider.request({
|
|
24348
|
+
method: "eth_signTypedData_v4",
|
|
24349
|
+
params: [fromAddress, JSON.stringify(buildResult.typed_data)]
|
|
24350
|
+
});
|
|
24351
|
+
await sendHypercoreTransaction(
|
|
24352
|
+
{
|
|
24353
|
+
action_payload: buildResult.action_payload,
|
|
24354
|
+
signature,
|
|
24355
|
+
nonce: buildResult.nonce
|
|
24356
|
+
},
|
|
24357
|
+
publishableKey
|
|
24358
|
+
);
|
|
24359
|
+
}
|
|
23227
24360
|
async function detectBrowserWallet(chainType, senderAddress) {
|
|
23228
24361
|
const win = typeof window !== "undefined" ? window : null;
|
|
23229
24362
|
if (!win || !senderAddress) return null;
|
|
@@ -23347,22 +24480,22 @@ function WithdrawForm({
|
|
|
23347
24480
|
footerLeft
|
|
23348
24481
|
}) {
|
|
23349
24482
|
const { colors: colors2, fonts, components } = useTheme();
|
|
23350
|
-
const [recipientAddress, setRecipientAddress] =
|
|
23351
|
-
const [amount, setAmount] =
|
|
23352
|
-
const [inputUnit, setInputUnit] =
|
|
23353
|
-
const [isSubmitting, setIsSubmitting] =
|
|
23354
|
-
const [submitError, setSubmitError] =
|
|
23355
|
-
const [detailsExpanded, setDetailsExpanded] =
|
|
23356
|
-
const [glossaryOpen, setGlossaryOpen] =
|
|
23357
|
-
|
|
24483
|
+
const [recipientAddress, setRecipientAddress] = useState30(recipientAddressProp || "");
|
|
24484
|
+
const [amount, setAmount] = useState30("");
|
|
24485
|
+
const [inputUnit, setInputUnit] = useState30("crypto");
|
|
24486
|
+
const [isSubmitting, setIsSubmitting] = useState30(false);
|
|
24487
|
+
const [submitError, setSubmitError] = useState30(null);
|
|
24488
|
+
const [detailsExpanded, setDetailsExpanded] = useState30(false);
|
|
24489
|
+
const [glossaryOpen, setGlossaryOpen] = useState30(false);
|
|
24490
|
+
useEffect252(() => {
|
|
23358
24491
|
setRecipientAddress(recipientAddressProp || "");
|
|
23359
24492
|
setAmount("");
|
|
23360
24493
|
setInputUnit("crypto");
|
|
23361
24494
|
setSubmitError(null);
|
|
23362
24495
|
}, [recipientAddressProp]);
|
|
23363
24496
|
const trimmedAddress = recipientAddress.trim();
|
|
23364
|
-
const [debouncedAddress, setDebouncedAddress] =
|
|
23365
|
-
|
|
24497
|
+
const [debouncedAddress, setDebouncedAddress] = useState30(trimmedAddress);
|
|
24498
|
+
useEffect252(() => {
|
|
23366
24499
|
const id = setTimeout(() => setDebouncedAddress(trimmedAddress), 500);
|
|
23367
24500
|
return () => clearTimeout(id);
|
|
23368
24501
|
}, [trimmedAddress]);
|
|
@@ -23379,7 +24512,7 @@ function WithdrawForm({
|
|
|
23379
24512
|
enabled: debouncedAddress.length > 5 && !!selectedChain
|
|
23380
24513
|
});
|
|
23381
24514
|
const isDebouncing = trimmedAddress !== debouncedAddress;
|
|
23382
|
-
const addressError =
|
|
24515
|
+
const addressError = useMemo112(() => {
|
|
23383
24516
|
if (!trimmedAddress || trimmedAddress.length <= 5) return null;
|
|
23384
24517
|
if (isDebouncing || isVerifyingAddress) return null;
|
|
23385
24518
|
if (verifyError) return t8.invalidAddress;
|
|
@@ -23393,47 +24526,47 @@ function WithdrawForm({
|
|
|
23393
24526
|
return null;
|
|
23394
24527
|
}, [trimmedAddress, isDebouncing, isVerifyingAddress, verifyError, addressVerification, selectedChain, selectedToken]);
|
|
23395
24528
|
const isAddressValid = !isDebouncing && !!addressVerification?.valid && !addressError;
|
|
23396
|
-
const exchangeRate =
|
|
24529
|
+
const exchangeRate = useMemo112(() => {
|
|
23397
24530
|
if (!balanceData?.exchangeRate) return 0;
|
|
23398
24531
|
return parseFloat(balanceData.exchangeRate);
|
|
23399
24532
|
}, [balanceData]);
|
|
23400
|
-
const balanceCrypto =
|
|
24533
|
+
const balanceCrypto = useMemo112(() => {
|
|
23401
24534
|
if (!balanceData?.balanceHuman) return 0;
|
|
23402
24535
|
return parseFloat(balanceData.balanceHuman);
|
|
23403
24536
|
}, [balanceData]);
|
|
23404
|
-
const balanceUsdNum =
|
|
24537
|
+
const balanceUsdNum = useMemo112(() => {
|
|
23405
24538
|
if (!balanceData?.balanceUsd) return 0;
|
|
23406
24539
|
return parseFloat(balanceData.balanceUsd);
|
|
23407
24540
|
}, [balanceData]);
|
|
23408
24541
|
const tokenSymbol = sourceTokenSymbol || balanceData?.symbol || "TOKEN";
|
|
23409
24542
|
const sourceDecimals = balanceData?.decimals ?? 6;
|
|
23410
|
-
const cryptoAmountFromInput =
|
|
24543
|
+
const cryptoAmountFromInput = useMemo112(() => {
|
|
23411
24544
|
const val = parseFloat(amount);
|
|
23412
24545
|
if (!val || val <= 0) return 0;
|
|
23413
24546
|
if (inputUnit === "crypto") return val;
|
|
23414
24547
|
return exchangeRate > 0 ? val / exchangeRate : 0;
|
|
23415
24548
|
}, [amount, inputUnit, exchangeRate]);
|
|
23416
|
-
const fiatAmountFromInput =
|
|
24549
|
+
const fiatAmountFromInput = useMemo112(() => {
|
|
23417
24550
|
const val = parseFloat(amount);
|
|
23418
24551
|
if (!val || val <= 0) return 0;
|
|
23419
24552
|
if (inputUnit === "fiat") return val;
|
|
23420
24553
|
return val * exchangeRate;
|
|
23421
24554
|
}, [amount, inputUnit, exchangeRate]);
|
|
23422
|
-
const convertedDisplay =
|
|
24555
|
+
const convertedDisplay = useMemo112(() => {
|
|
23423
24556
|
if (!amount || parseFloat(amount) <= 0) return null;
|
|
23424
24557
|
if (inputUnit === "crypto") {
|
|
23425
24558
|
return `$${fiatAmountFromInput.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
23426
24559
|
}
|
|
23427
24560
|
return `${cryptoAmountFromInput.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 6 })} ${tokenSymbol}`;
|
|
23428
24561
|
}, [amount, inputUnit, fiatAmountFromInput, cryptoAmountFromInput, tokenSymbol]);
|
|
23429
|
-
const balanceDisplay =
|
|
24562
|
+
const balanceDisplay = useMemo112(() => {
|
|
23430
24563
|
if (isLoadingBalance || !balanceData) return null;
|
|
23431
24564
|
if (inputUnit === "crypto") {
|
|
23432
24565
|
return `${balanceCrypto.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ${tokenSymbol}`;
|
|
23433
24566
|
}
|
|
23434
24567
|
return `$${balanceUsdNum.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
23435
24568
|
}, [isLoadingBalance, balanceData, inputUnit, balanceCrypto, balanceUsdNum, tokenSymbol]);
|
|
23436
|
-
const handleSwitchUnit =
|
|
24569
|
+
const handleSwitchUnit = useCallback62(() => {
|
|
23437
24570
|
const val = parseFloat(amount);
|
|
23438
24571
|
if (!val || val <= 0 || exchangeRate <= 0) {
|
|
23439
24572
|
setInputUnit((u) => u === "crypto" ? "fiat" : "crypto");
|
|
@@ -23450,7 +24583,7 @@ function WithdrawForm({
|
|
|
23450
24583
|
setInputUnit("crypto");
|
|
23451
24584
|
}
|
|
23452
24585
|
}, [amount, inputUnit, exchangeRate, sourceDecimals]);
|
|
23453
|
-
const handleMaxClick =
|
|
24586
|
+
const handleMaxClick = useCallback62(() => {
|
|
23454
24587
|
if (inputUnit === "crypto") {
|
|
23455
24588
|
if (balanceCrypto <= 0) return;
|
|
23456
24589
|
setAmount(balanceData?.balanceHuman ?? "0");
|
|
@@ -23462,7 +24595,7 @@ function WithdrawForm({
|
|
|
23462
24595
|
const isBelowMinimum = minimumWithdrawAmountUsd !== null && fiatAmountFromInput > 0 && fiatAmountFromInput < minimumWithdrawAmountUsd;
|
|
23463
24596
|
const isOverBalance = inputUnit === "crypto" ? cryptoAmountFromInput > 0 && balanceCrypto > 0 && cryptoAmountFromInput > balanceCrypto : fiatAmountFromInput > 0 && balanceUsdNum > 0 && fiatAmountFromInput > balanceUsdNum;
|
|
23464
24597
|
const isFormValid = trimmedAddress.length > 0 && amount.trim().length > 0 && cryptoAmountFromInput > 0 && isAddressValid && !isBelowMinimum && !isOverBalance && !!balanceData;
|
|
23465
|
-
const handleWithdraw =
|
|
24598
|
+
const handleWithdraw = useCallback62(async () => {
|
|
23466
24599
|
if (!selectedToken || !selectedChain) return;
|
|
23467
24600
|
if (!isFormValid) return;
|
|
23468
24601
|
setIsSubmitting(true);
|
|
@@ -23495,7 +24628,17 @@ function WithdrawForm({
|
|
|
23495
24628
|
recipientAddress: trimmedAddress
|
|
23496
24629
|
};
|
|
23497
24630
|
if (detectedWallet) {
|
|
23498
|
-
if (detectedWallet.chainFamily === "evm") {
|
|
24631
|
+
if (detectedWallet.chainFamily === "evm" && isHypercoreChain(sourceChainId)) {
|
|
24632
|
+
await sendHypercoreWithdraw({
|
|
24633
|
+
provider: detectedWallet.provider,
|
|
24634
|
+
fromAddress: detectedWallet.address,
|
|
24635
|
+
depositWalletAddress: depositWallet.address,
|
|
24636
|
+
sourceTokenAddress,
|
|
24637
|
+
amount: humanAmount,
|
|
24638
|
+
tokenSymbol,
|
|
24639
|
+
publishableKey
|
|
24640
|
+
});
|
|
24641
|
+
} else if (detectedWallet.chainFamily === "evm") {
|
|
23499
24642
|
await sendEvmWithdraw({
|
|
23500
24643
|
provider: detectedWallet.provider,
|
|
23501
24644
|
fromAddress: detectedWallet.address,
|
|
@@ -23532,9 +24675,9 @@ function WithdrawForm({
|
|
|
23532
24675
|
setIsSubmitting(false);
|
|
23533
24676
|
}
|
|
23534
24677
|
}, [selectedToken, selectedChain, isFormValid, cryptoAmountFromInput, sourceDecimals, trimmedAddress, publishableKey, onWithdraw, detectedWallet, sourceTokenAddress, sourceChainId, onWithdrawError, onDepositWalletCreation, onWithdrawSubmitted, amount, inputUnit, balanceCrypto, balanceUsdNum, balanceData]);
|
|
23535
|
-
return /* @__PURE__ */
|
|
23536
|
-
/* @__PURE__ */
|
|
23537
|
-
/* @__PURE__ */
|
|
24678
|
+
return /* @__PURE__ */ jsxs47(Fragment11, { children: [
|
|
24679
|
+
/* @__PURE__ */ jsxs47("div", { children: [
|
|
24680
|
+
/* @__PURE__ */ jsx54(
|
|
23538
24681
|
"div",
|
|
23539
24682
|
{
|
|
23540
24683
|
className: "uf-text-xs uf-mb-1.5",
|
|
@@ -23542,7 +24685,7 @@ function WithdrawForm({
|
|
|
23542
24685
|
children: t8.recipientAddress
|
|
23543
24686
|
}
|
|
23544
24687
|
),
|
|
23545
|
-
/* @__PURE__ */
|
|
24688
|
+
/* @__PURE__ */ jsx54(
|
|
23546
24689
|
"style",
|
|
23547
24690
|
{
|
|
23548
24691
|
dangerouslySetInnerHTML: {
|
|
@@ -23550,7 +24693,7 @@ function WithdrawForm({
|
|
|
23550
24693
|
}
|
|
23551
24694
|
}
|
|
23552
24695
|
),
|
|
23553
|
-
/* @__PURE__ */
|
|
24696
|
+
/* @__PURE__ */ jsxs47(
|
|
23554
24697
|
"div",
|
|
23555
24698
|
{
|
|
23556
24699
|
className: "uf-flex uf-items-center uf-gap-1 uf-pr-2",
|
|
@@ -23560,7 +24703,7 @@ function WithdrawForm({
|
|
|
23560
24703
|
border: `${components.input.borderWidth}px solid ${addressError ? colors2.error : components.input.borderColor}`
|
|
23561
24704
|
},
|
|
23562
24705
|
children: [
|
|
23563
|
-
/* @__PURE__ */
|
|
24706
|
+
/* @__PURE__ */ jsx54(
|
|
23564
24707
|
"input",
|
|
23565
24708
|
{
|
|
23566
24709
|
type: "text",
|
|
@@ -23577,7 +24720,7 @@ function WithdrawForm({
|
|
|
23577
24720
|
}
|
|
23578
24721
|
}
|
|
23579
24722
|
),
|
|
23580
|
-
/* @__PURE__ */
|
|
24723
|
+
/* @__PURE__ */ jsx54(
|
|
23581
24724
|
"button",
|
|
23582
24725
|
{
|
|
23583
24726
|
type: "button",
|
|
@@ -23594,27 +24737,27 @@ function WithdrawForm({
|
|
|
23594
24737
|
className: "uf-flex-shrink-0 uf-p-1 uf-rounded uf-transition-colors hover:uf-opacity-70",
|
|
23595
24738
|
style: { color: colors2.foregroundMuted },
|
|
23596
24739
|
title: "Paste from clipboard",
|
|
23597
|
-
children: /* @__PURE__ */
|
|
24740
|
+
children: /* @__PURE__ */ jsx54(ClipboardPaste, { className: "uf-w-4 uf-h-4" })
|
|
23598
24741
|
}
|
|
23599
24742
|
)
|
|
23600
24743
|
]
|
|
23601
24744
|
}
|
|
23602
24745
|
),
|
|
23603
|
-
(isDebouncing || isVerifyingAddress) && trimmedAddress.length > 5 && /* @__PURE__ */
|
|
23604
|
-
/* @__PURE__ */
|
|
23605
|
-
/* @__PURE__ */
|
|
24746
|
+
(isDebouncing || isVerifyingAddress) && trimmedAddress.length > 5 && /* @__PURE__ */ jsxs47("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-1.5", children: [
|
|
24747
|
+
/* @__PURE__ */ jsx54(LoaderCircle, { className: "uf-w-3 uf-h-3 uf-animate-spin", style: { color: colors2.foregroundMuted } }),
|
|
24748
|
+
/* @__PURE__ */ jsx54("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: t8.verifyingAddress })
|
|
23606
24749
|
] }),
|
|
23607
|
-
addressError && /* @__PURE__ */
|
|
23608
|
-
/* @__PURE__ */
|
|
23609
|
-
/* @__PURE__ */
|
|
24750
|
+
addressError && /* @__PURE__ */ jsxs47("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-1.5", children: [
|
|
24751
|
+
/* @__PURE__ */ jsx54(TriangleAlert, { className: "uf-w-3 uf-h-3", style: { color: colors2.error } }),
|
|
24752
|
+
/* @__PURE__ */ jsx54("span", { className: "uf-text-xs", style: { color: colors2.error, fontFamily: fonts.regular }, children: addressError })
|
|
23610
24753
|
] })
|
|
23611
24754
|
] }),
|
|
23612
|
-
/* @__PURE__ */
|
|
23613
|
-
/* @__PURE__ */
|
|
24755
|
+
/* @__PURE__ */ jsxs47("div", { children: [
|
|
24756
|
+
/* @__PURE__ */ jsxs47("div", { className: "uf-text-xs uf-mb-1.5", style: { color: components.card.labelColor, fontFamily: fonts.medium }, children: [
|
|
23614
24757
|
t8.amount,
|
|
23615
|
-
minimumWithdrawAmountUsd != null && minimumWithdrawAmountUsd > 0 && /* @__PURE__ */
|
|
24758
|
+
minimumWithdrawAmountUsd != null && minimumWithdrawAmountUsd > 0 && /* @__PURE__ */ jsx54("span", { style: { color: colors2.warning, fontFamily: fonts.regular }, children: ` ($${minimumWithdrawAmountUsd.toFixed(2)} min)` })
|
|
23616
24759
|
] }),
|
|
23617
|
-
/* @__PURE__ */
|
|
24760
|
+
/* @__PURE__ */ jsx54(
|
|
23618
24761
|
"style",
|
|
23619
24762
|
{
|
|
23620
24763
|
dangerouslySetInnerHTML: {
|
|
@@ -23622,7 +24765,7 @@ function WithdrawForm({
|
|
|
23622
24765
|
}
|
|
23623
24766
|
}
|
|
23624
24767
|
),
|
|
23625
|
-
/* @__PURE__ */
|
|
24768
|
+
/* @__PURE__ */ jsxs47(
|
|
23626
24769
|
"div",
|
|
23627
24770
|
{
|
|
23628
24771
|
className: "uf-flex uf-items-center uf-gap-2 uf-px-3 uf-py-2.5",
|
|
@@ -23632,7 +24775,7 @@ function WithdrawForm({
|
|
|
23632
24775
|
border: `${components.input.borderWidth}px solid ${components.input.borderColor}`
|
|
23633
24776
|
},
|
|
23634
24777
|
children: [
|
|
23635
|
-
/* @__PURE__ */
|
|
24778
|
+
/* @__PURE__ */ jsx54(
|
|
23636
24779
|
"input",
|
|
23637
24780
|
{
|
|
23638
24781
|
type: "text",
|
|
@@ -23653,8 +24796,8 @@ function WithdrawForm({
|
|
|
23653
24796
|
}
|
|
23654
24797
|
}
|
|
23655
24798
|
),
|
|
23656
|
-
/* @__PURE__ */
|
|
23657
|
-
/* @__PURE__ */
|
|
24799
|
+
/* @__PURE__ */ jsx54("span", { className: "uf-text-sm uf-shrink-0", style: { color: colors2.foregroundMuted, fontFamily: fonts.medium }, children: inputUnit === "crypto" ? tokenSymbol : "USD" }),
|
|
24800
|
+
/* @__PURE__ */ jsx54(
|
|
23658
24801
|
"button",
|
|
23659
24802
|
{
|
|
23660
24803
|
type: "button",
|
|
@@ -23667,10 +24810,10 @@ function WithdrawForm({
|
|
|
23667
24810
|
]
|
|
23668
24811
|
}
|
|
23669
24812
|
),
|
|
23670
|
-
/* @__PURE__ */
|
|
23671
|
-
/* @__PURE__ */
|
|
23672
|
-
/* @__PURE__ */
|
|
23673
|
-
exchangeRate > 0 && /* @__PURE__ */
|
|
24813
|
+
/* @__PURE__ */ jsxs47("div", { className: "uf-flex uf-items-center uf-justify-between uf-mt-1.5 uf-px-3", children: [
|
|
24814
|
+
/* @__PURE__ */ jsxs47("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
|
|
24815
|
+
/* @__PURE__ */ jsx54("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: convertedDisplay || (inputUnit === "crypto" ? "$0.00" : `0.00 ${tokenSymbol}`) }),
|
|
24816
|
+
exchangeRate > 0 && /* @__PURE__ */ jsx54(
|
|
23674
24817
|
"button",
|
|
23675
24818
|
{
|
|
23676
24819
|
type: "button",
|
|
@@ -23678,49 +24821,49 @@ function WithdrawForm({
|
|
|
23678
24821
|
className: "uf-p-0.5 uf-rounded uf-transition-colors hover:uf-opacity-70",
|
|
23679
24822
|
style: { color: colors2.foregroundMuted },
|
|
23680
24823
|
title: "Switch unit",
|
|
23681
|
-
children: /* @__PURE__ */
|
|
24824
|
+
children: /* @__PURE__ */ jsx54(ArrowUpDown, { className: "uf-w-3 uf-h-3" })
|
|
23682
24825
|
}
|
|
23683
24826
|
)
|
|
23684
24827
|
] }),
|
|
23685
|
-
/* @__PURE__ */
|
|
23686
|
-
balanceDisplay && /* @__PURE__ */
|
|
24828
|
+
/* @__PURE__ */ jsxs47("div", { children: [
|
|
24829
|
+
balanceDisplay && /* @__PURE__ */ jsxs47("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: [
|
|
23687
24830
|
t8.balance,
|
|
23688
24831
|
": ",
|
|
23689
24832
|
balanceDisplay
|
|
23690
24833
|
] }),
|
|
23691
|
-
isLoadingBalance && /* @__PURE__ */
|
|
24834
|
+
isLoadingBalance && /* @__PURE__ */ jsx54("div", { className: "uf-h-3 uf-w-16 uf-bg-muted uf-rounded uf-animate-pulse" })
|
|
23692
24835
|
] })
|
|
23693
24836
|
] })
|
|
23694
24837
|
] }),
|
|
23695
|
-
/* @__PURE__ */
|
|
23696
|
-
/* @__PURE__ */
|
|
24838
|
+
/* @__PURE__ */ jsxs47("div", { className: "uf-px-2.5", style: { backgroundColor: components.card.backgroundColor, borderRadius: components.card.borderRadius, border: `${components.card.borderWidth}px solid ${components.card.borderColor}` }, children: [
|
|
24839
|
+
/* @__PURE__ */ jsxs47(
|
|
23697
24840
|
"button",
|
|
23698
24841
|
{
|
|
23699
24842
|
type: "button",
|
|
23700
24843
|
onClick: () => setDetailsExpanded(!detailsExpanded),
|
|
23701
24844
|
className: "uf-w-full uf-flex uf-items-center uf-justify-between uf-py-2.5",
|
|
23702
24845
|
children: [
|
|
23703
|
-
/* @__PURE__ */
|
|
23704
|
-
/* @__PURE__ */
|
|
23705
|
-
/* @__PURE__ */
|
|
24846
|
+
/* @__PURE__ */ jsxs47("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
24847
|
+
/* @__PURE__ */ jsx54("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ jsx54(Clock, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
|
|
24848
|
+
/* @__PURE__ */ jsxs47("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
|
|
23706
24849
|
tCrypto.processingTime.label,
|
|
23707
24850
|
":",
|
|
23708
24851
|
" ",
|
|
23709
|
-
/* @__PURE__ */
|
|
24852
|
+
/* @__PURE__ */ jsx54("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: formatProcessingTime2(estimatedProcessingTime) })
|
|
23710
24853
|
] })
|
|
23711
24854
|
] }),
|
|
23712
|
-
detailsExpanded ? /* @__PURE__ */
|
|
24855
|
+
detailsExpanded ? /* @__PURE__ */ jsx54(ChevronUp, { className: "uf-w-4 uf-h-4", style: { color: components.card.actionColor } }) : /* @__PURE__ */ jsx54(ChevronDown, { className: "uf-w-4 uf-h-4", style: { color: components.card.actionColor } })
|
|
23713
24856
|
]
|
|
23714
24857
|
}
|
|
23715
24858
|
),
|
|
23716
|
-
detailsExpanded && /* @__PURE__ */
|
|
23717
|
-
/* @__PURE__ */
|
|
23718
|
-
/* @__PURE__ */
|
|
23719
|
-
/* @__PURE__ */
|
|
24859
|
+
detailsExpanded && /* @__PURE__ */ jsxs47("div", { className: "uf-pb-3 uf-space-y-2.5", children: [
|
|
24860
|
+
/* @__PURE__ */ jsxs47("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
24861
|
+
/* @__PURE__ */ jsx54("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ jsx54(ShieldCheck, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
|
|
24862
|
+
/* @__PURE__ */ jsxs47("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
|
|
23720
24863
|
tCrypto.slippage.label,
|
|
23721
24864
|
":",
|
|
23722
24865
|
" ",
|
|
23723
|
-
/* @__PURE__ */
|
|
24866
|
+
/* @__PURE__ */ jsxs47("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: [
|
|
23724
24867
|
tCrypto.slippage.auto,
|
|
23725
24868
|
" \u2022 ",
|
|
23726
24869
|
(maxSlippagePercent ?? 0.25).toFixed(2),
|
|
@@ -23728,13 +24871,13 @@ function WithdrawForm({
|
|
|
23728
24871
|
] })
|
|
23729
24872
|
] })
|
|
23730
24873
|
] }),
|
|
23731
|
-
/* @__PURE__ */
|
|
23732
|
-
/* @__PURE__ */
|
|
23733
|
-
/* @__PURE__ */
|
|
24874
|
+
/* @__PURE__ */ jsxs47("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
24875
|
+
/* @__PURE__ */ jsx54("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ jsx54(DollarSign, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
|
|
24876
|
+
/* @__PURE__ */ jsxs47("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
|
|
23734
24877
|
tCrypto.priceImpact.label,
|
|
23735
24878
|
":",
|
|
23736
24879
|
" ",
|
|
23737
|
-
/* @__PURE__ */
|
|
24880
|
+
/* @__PURE__ */ jsxs47("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: [
|
|
23738
24881
|
(priceImpactPercent ?? 0).toFixed(2),
|
|
23739
24882
|
"%"
|
|
23740
24883
|
] })
|
|
@@ -23742,18 +24885,18 @@ function WithdrawForm({
|
|
|
23742
24885
|
] })
|
|
23743
24886
|
] })
|
|
23744
24887
|
] }),
|
|
23745
|
-
!canWithdraw && !submitError && /* @__PURE__ */
|
|
24888
|
+
!canWithdraw && !submitError && /* @__PURE__ */ jsxs47(
|
|
23746
24889
|
"div",
|
|
23747
24890
|
{
|
|
23748
24891
|
className: "uf-flex uf-items-start uf-gap-2.5 uf-p-3 uf-rounded-xl",
|
|
23749
24892
|
style: { backgroundColor: colors2.card, border: `1px solid ${colors2.border}` },
|
|
23750
24893
|
children: [
|
|
23751
|
-
/* @__PURE__ */
|
|
23752
|
-
/* @__PURE__ */
|
|
24894
|
+
/* @__PURE__ */ jsx54(Wallet, { className: "uf-w-4 uf-h-4 uf-flex-shrink-0 uf-mt-0.5", style: { color: colors2.warning } }),
|
|
24895
|
+
/* @__PURE__ */ jsx54("div", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: "No connected wallet detected. Please connect a wallet that matches your account to withdraw." })
|
|
23753
24896
|
]
|
|
23754
24897
|
}
|
|
23755
24898
|
),
|
|
23756
|
-
isWalletMatch && connectedWalletName ? /* @__PURE__ */
|
|
24899
|
+
isWalletMatch && connectedWalletName ? /* @__PURE__ */ jsx54(
|
|
23757
24900
|
"button",
|
|
23758
24901
|
{
|
|
23759
24902
|
type: "button",
|
|
@@ -23767,16 +24910,16 @@ function WithdrawForm({
|
|
|
23767
24910
|
borderRadius: components.button.borderRadius,
|
|
23768
24911
|
border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
|
|
23769
24912
|
},
|
|
23770
|
-
children: isSubmitting ? /* @__PURE__ */
|
|
23771
|
-
/* @__PURE__ */
|
|
24913
|
+
children: isSubmitting ? /* @__PURE__ */ jsxs47(Fragment11, { children: [
|
|
24914
|
+
/* @__PURE__ */ jsx54(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
|
|
23772
24915
|
"Processing..."
|
|
23773
|
-
] }) : isOverBalance ? /* @__PURE__ */
|
|
23774
|
-
/* @__PURE__ */
|
|
24916
|
+
] }) : isOverBalance ? /* @__PURE__ */ jsx54(Fragment11, { children: "Insufficient balance" }) : isBelowMinimum ? /* @__PURE__ */ jsx54(Fragment11, { children: "Minimum amount not met" }) : submitError ? /* @__PURE__ */ jsx54(Fragment11, { children: "Withdrawal failed. Try again" }) : /* @__PURE__ */ jsxs47(Fragment11, { children: [
|
|
24917
|
+
/* @__PURE__ */ jsx54(Wallet, { className: "uf-w-4 uf-h-4" }),
|
|
23775
24918
|
"Withdraw from ",
|
|
23776
24919
|
connectedWalletName
|
|
23777
24920
|
] })
|
|
23778
24921
|
}
|
|
23779
|
-
) : /* @__PURE__ */
|
|
24922
|
+
) : /* @__PURE__ */ jsx54(
|
|
23780
24923
|
"button",
|
|
23781
24924
|
{
|
|
23782
24925
|
type: "button",
|
|
@@ -23790,17 +24933,17 @@ function WithdrawForm({
|
|
|
23790
24933
|
borderRadius: components.button.borderRadius,
|
|
23791
24934
|
border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
|
|
23792
24935
|
},
|
|
23793
|
-
children: isSubmitting ? /* @__PURE__ */
|
|
23794
|
-
/* @__PURE__ */
|
|
24936
|
+
children: isSubmitting ? /* @__PURE__ */ jsxs47("span", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2", children: [
|
|
24937
|
+
/* @__PURE__ */ jsx54(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
|
|
23795
24938
|
"Processing..."
|
|
23796
24939
|
] }) : isOverBalance ? "Insufficient balance" : isBelowMinimum ? "Minimum amount not met" : submitError ? "Withdrawal failed. Try again" : t8.withdraw
|
|
23797
24940
|
}
|
|
23798
24941
|
),
|
|
23799
|
-
/* @__PURE__ */
|
|
23800
|
-
/* @__PURE__ */
|
|
23801
|
-
/* @__PURE__ */
|
|
24942
|
+
/* @__PURE__ */ jsxs47("div", { className: "uf-flex uf-items-center uf-justify-between uf-text-xs uf-pt-1", children: [
|
|
24943
|
+
/* @__PURE__ */ jsx54("div", { children: footerLeft }),
|
|
24944
|
+
/* @__PURE__ */ jsx54(DepositFooterLinks, { onGlossaryClick: () => setGlossaryOpen(true) })
|
|
23802
24945
|
] }),
|
|
23803
|
-
/* @__PURE__ */
|
|
24946
|
+
/* @__PURE__ */ jsx54(
|
|
23804
24947
|
GlossaryModal,
|
|
23805
24948
|
{
|
|
23806
24949
|
open: glossaryOpen,
|
|
@@ -23846,7 +24989,7 @@ function WithdrawExecutionItem({
|
|
|
23846
24989
|
return "$0.00";
|
|
23847
24990
|
}
|
|
23848
24991
|
};
|
|
23849
|
-
return /* @__PURE__ */
|
|
24992
|
+
return /* @__PURE__ */ jsxs48(
|
|
23850
24993
|
"button",
|
|
23851
24994
|
{
|
|
23852
24995
|
onClick,
|
|
@@ -23857,8 +25000,8 @@ function WithdrawExecutionItem({
|
|
|
23857
25000
|
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
23858
25001
|
},
|
|
23859
25002
|
children: [
|
|
23860
|
-
/* @__PURE__ */
|
|
23861
|
-
/* @__PURE__ */
|
|
25003
|
+
/* @__PURE__ */ jsxs48("div", { className: "uf-relative uf-flex-shrink-0 uf-w-9 uf-h-9", children: [
|
|
25004
|
+
/* @__PURE__ */ jsx55(
|
|
23862
25005
|
"img",
|
|
23863
25006
|
{
|
|
23864
25007
|
src: execution.destination_token_metadata?.icon_url || getIconUrl("/icons/tokens/svg/usdc.svg"),
|
|
@@ -23869,12 +25012,12 @@ function WithdrawExecutionItem({
|
|
|
23869
25012
|
className: "uf-rounded-full uf-w-9 uf-h-9"
|
|
23870
25013
|
}
|
|
23871
25014
|
),
|
|
23872
|
-
isPending ? /* @__PURE__ */
|
|
25015
|
+
isPending ? /* @__PURE__ */ jsx55(
|
|
23873
25016
|
"div",
|
|
23874
25017
|
{
|
|
23875
25018
|
className: "uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-rounded-full uf-p-0.5",
|
|
23876
25019
|
style: { backgroundColor: colors2.warning },
|
|
23877
|
-
children: /* @__PURE__ */
|
|
25020
|
+
children: /* @__PURE__ */ jsx55(
|
|
23878
25021
|
"svg",
|
|
23879
25022
|
{
|
|
23880
25023
|
width: "10",
|
|
@@ -23882,7 +25025,7 @@ function WithdrawExecutionItem({
|
|
|
23882
25025
|
viewBox: "0 0 12 12",
|
|
23883
25026
|
fill: "none",
|
|
23884
25027
|
className: "uf-animate-spin uf-block",
|
|
23885
|
-
children: /* @__PURE__ */
|
|
25028
|
+
children: /* @__PURE__ */ jsx55(
|
|
23886
25029
|
"path",
|
|
23887
25030
|
{
|
|
23888
25031
|
d: "M6 1V3M6 9V11M1 6H3M9 6H11M2.5 2.5L4 4M8 8L9.5 9.5M2.5 9.5L4 8M8 4L9.5 2.5",
|
|
@@ -23894,12 +25037,12 @@ function WithdrawExecutionItem({
|
|
|
23894
25037
|
}
|
|
23895
25038
|
)
|
|
23896
25039
|
}
|
|
23897
|
-
) : /* @__PURE__ */
|
|
25040
|
+
) : /* @__PURE__ */ jsx55(
|
|
23898
25041
|
"div",
|
|
23899
25042
|
{
|
|
23900
25043
|
className: "uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-rounded-full uf-p-0.5",
|
|
23901
25044
|
style: { backgroundColor: colors2.success },
|
|
23902
|
-
children: /* @__PURE__ */
|
|
25045
|
+
children: /* @__PURE__ */ jsx55(
|
|
23903
25046
|
"svg",
|
|
23904
25047
|
{
|
|
23905
25048
|
width: "10",
|
|
@@ -23907,7 +25050,7 @@ function WithdrawExecutionItem({
|
|
|
23907
25050
|
viewBox: "0 0 12 12",
|
|
23908
25051
|
fill: "none",
|
|
23909
25052
|
className: "uf-block",
|
|
23910
|
-
children: /* @__PURE__ */
|
|
25053
|
+
children: /* @__PURE__ */ jsx55(
|
|
23911
25054
|
"path",
|
|
23912
25055
|
{
|
|
23913
25056
|
d: "M10 3L4.5 8.5L2 6",
|
|
@@ -23922,8 +25065,8 @@ function WithdrawExecutionItem({
|
|
|
23922
25065
|
}
|
|
23923
25066
|
)
|
|
23924
25067
|
] }),
|
|
23925
|
-
/* @__PURE__ */
|
|
23926
|
-
/* @__PURE__ */
|
|
25068
|
+
/* @__PURE__ */ jsxs48("div", { className: "uf-flex-1 uf-min-w-0", children: [
|
|
25069
|
+
/* @__PURE__ */ jsx55(
|
|
23927
25070
|
"h3",
|
|
23928
25071
|
{
|
|
23929
25072
|
className: "uf-font-medium uf-text-sm uf-leading-tight",
|
|
@@ -23934,7 +25077,7 @@ function WithdrawExecutionItem({
|
|
|
23934
25077
|
children: isPending ? "Withdrawal processing" : "Withdrawal completed"
|
|
23935
25078
|
}
|
|
23936
25079
|
),
|
|
23937
|
-
/* @__PURE__ */
|
|
25080
|
+
/* @__PURE__ */ jsx55(
|
|
23938
25081
|
"p",
|
|
23939
25082
|
{
|
|
23940
25083
|
className: "uf-text-xs uf-leading-tight",
|
|
@@ -23946,7 +25089,7 @@ function WithdrawExecutionItem({
|
|
|
23946
25089
|
}
|
|
23947
25090
|
)
|
|
23948
25091
|
] }),
|
|
23949
|
-
/* @__PURE__ */
|
|
25092
|
+
/* @__PURE__ */ jsx55(
|
|
23950
25093
|
"span",
|
|
23951
25094
|
{
|
|
23952
25095
|
className: "uf-font-medium uf-text-sm uf-flex-shrink-0",
|
|
@@ -23957,7 +25100,7 @@ function WithdrawExecutionItem({
|
|
|
23957
25100
|
children: formatUsdAmount2(execution.source_amount_usd || "0")
|
|
23958
25101
|
}
|
|
23959
25102
|
),
|
|
23960
|
-
/* @__PURE__ */
|
|
25103
|
+
/* @__PURE__ */ jsx55(
|
|
23961
25104
|
ChevronRight,
|
|
23962
25105
|
{
|
|
23963
25106
|
className: "uf-w-4 uf-h-4 uf-flex-shrink-0",
|
|
@@ -23980,9 +25123,9 @@ function WithdrawConfirmingView({
|
|
|
23980
25123
|
onViewTracker
|
|
23981
25124
|
}) {
|
|
23982
25125
|
const { colors: colors2, fonts, components } = useTheme();
|
|
23983
|
-
const [showButton, setShowButton] =
|
|
25126
|
+
const [showButton, setShowButton] = useState31(false);
|
|
23984
25127
|
const latestExecution = executions.length > 0 ? executions[executions.length - 1] : null;
|
|
23985
|
-
|
|
25128
|
+
useEffect262(() => {
|
|
23986
25129
|
if (latestExecution) return;
|
|
23987
25130
|
const timer = setTimeout(() => setShowButton(true), SHOW_BUTTON_DELAY_MS);
|
|
23988
25131
|
return () => clearTimeout(timer);
|
|
@@ -23990,11 +25133,11 @@ function WithdrawConfirmingView({
|
|
|
23990
25133
|
const btnRadius = components.button.borderRadius;
|
|
23991
25134
|
const btnBorder = `${components.button.borderWidth}px solid ${components.button.borderColor}`;
|
|
23992
25135
|
if (latestExecution) {
|
|
23993
|
-
return /* @__PURE__ */
|
|
23994
|
-
/* @__PURE__ */
|
|
23995
|
-
/* @__PURE__ */
|
|
23996
|
-
/* @__PURE__ */
|
|
23997
|
-
/* @__PURE__ */
|
|
25136
|
+
return /* @__PURE__ */ jsxs49(Fragment12, { children: [
|
|
25137
|
+
/* @__PURE__ */ jsx56(DepositHeader, { title: "Withdrawal Details", showClose: true, onClose }),
|
|
25138
|
+
/* @__PURE__ */ jsx56(DepositDetailContent, { execution: latestExecution, variant: "withdraw" }),
|
|
25139
|
+
/* @__PURE__ */ jsxs49("div", { className: "uf-flex uf-gap-2 uf-px-2 uf-pt-2", children: [
|
|
25140
|
+
/* @__PURE__ */ jsx56(
|
|
23998
25141
|
"button",
|
|
23999
25142
|
{
|
|
24000
25143
|
type: "button",
|
|
@@ -24010,7 +25153,7 @@ function WithdrawConfirmingView({
|
|
|
24010
25153
|
children: "Withdrawal History"
|
|
24011
25154
|
}
|
|
24012
25155
|
),
|
|
24013
|
-
/* @__PURE__ */
|
|
25156
|
+
/* @__PURE__ */ jsx56(
|
|
24014
25157
|
"button",
|
|
24015
25158
|
{
|
|
24016
25159
|
type: "button",
|
|
@@ -24027,7 +25170,7 @@ function WithdrawConfirmingView({
|
|
|
24027
25170
|
}
|
|
24028
25171
|
)
|
|
24029
25172
|
] }),
|
|
24030
|
-
/* @__PURE__ */
|
|
25173
|
+
/* @__PURE__ */ jsx56("div", { className: "uf-pt-3", children: /* @__PURE__ */ jsx56(
|
|
24031
25174
|
PoweredByUnifold,
|
|
24032
25175
|
{
|
|
24033
25176
|
color: colors2.foregroundMuted,
|
|
@@ -24036,15 +25179,15 @@ function WithdrawConfirmingView({
|
|
|
24036
25179
|
) })
|
|
24037
25180
|
] });
|
|
24038
25181
|
}
|
|
24039
|
-
return /* @__PURE__ */
|
|
24040
|
-
/* @__PURE__ */
|
|
24041
|
-
/* @__PURE__ */
|
|
24042
|
-
/* @__PURE__ */
|
|
25182
|
+
return /* @__PURE__ */ jsxs49(Fragment12, { children: [
|
|
25183
|
+
/* @__PURE__ */ jsx56(DepositHeader, { title: "Withdrawal Status", showClose: true, onClose }),
|
|
25184
|
+
/* @__PURE__ */ jsxs49("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-16 uf-px-4", children: [
|
|
25185
|
+
/* @__PURE__ */ jsx56(
|
|
24043
25186
|
"div",
|
|
24044
25187
|
{
|
|
24045
25188
|
className: "uf-w-20 uf-h-20 uf-rounded-full uf-flex uf-items-center uf-justify-center uf-mb-6",
|
|
24046
25189
|
style: { backgroundColor: `${colors2.primary}20` },
|
|
24047
|
-
children: /* @__PURE__ */
|
|
25190
|
+
children: /* @__PURE__ */ jsx56(
|
|
24048
25191
|
"svg",
|
|
24049
25192
|
{
|
|
24050
25193
|
width: "40",
|
|
@@ -24052,7 +25195,7 @@ function WithdrawConfirmingView({
|
|
|
24052
25195
|
viewBox: "0 0 24 24",
|
|
24053
25196
|
fill: "none",
|
|
24054
25197
|
className: "uf-animate-spin",
|
|
24055
|
-
children: /* @__PURE__ */
|
|
25198
|
+
children: /* @__PURE__ */ jsx56(
|
|
24056
25199
|
"path",
|
|
24057
25200
|
{
|
|
24058
25201
|
d: "M21 12a9 9 0 1 1-6.22-8.56",
|
|
@@ -24065,7 +25208,7 @@ function WithdrawConfirmingView({
|
|
|
24065
25208
|
)
|
|
24066
25209
|
}
|
|
24067
25210
|
),
|
|
24068
|
-
/* @__PURE__ */
|
|
25211
|
+
/* @__PURE__ */ jsx56(
|
|
24069
25212
|
"h3",
|
|
24070
25213
|
{
|
|
24071
25214
|
className: "uf-text-xl uf-mb-2",
|
|
@@ -24073,7 +25216,7 @@ function WithdrawConfirmingView({
|
|
|
24073
25216
|
children: "Checking Withdrawal"
|
|
24074
25217
|
}
|
|
24075
25218
|
),
|
|
24076
|
-
/* @__PURE__ */
|
|
25219
|
+
/* @__PURE__ */ jsxs49(
|
|
24077
25220
|
"p",
|
|
24078
25221
|
{
|
|
24079
25222
|
className: "uf-text-sm uf-text-center",
|
|
@@ -24089,7 +25232,7 @@ function WithdrawConfirmingView({
|
|
|
24089
25232
|
}
|
|
24090
25233
|
)
|
|
24091
25234
|
] }),
|
|
24092
|
-
showButton && /* @__PURE__ */
|
|
25235
|
+
showButton && /* @__PURE__ */ jsx56("div", { className: "uf-px-1 uf-pb-1", children: /* @__PURE__ */ jsx56(
|
|
24093
25236
|
"button",
|
|
24094
25237
|
{
|
|
24095
25238
|
type: "button",
|
|
@@ -24105,7 +25248,7 @@ function WithdrawConfirmingView({
|
|
|
24105
25248
|
children: "Withdrawal History"
|
|
24106
25249
|
}
|
|
24107
25250
|
) }),
|
|
24108
|
-
/* @__PURE__ */
|
|
25251
|
+
/* @__PURE__ */ jsx56("div", { className: "uf-pt-3", children: /* @__PURE__ */ jsx56(
|
|
24109
25252
|
PoweredByUnifold,
|
|
24110
25253
|
{
|
|
24111
25254
|
color: colors2.foregroundMuted,
|
|
@@ -24135,14 +25278,14 @@ function WithdrawModal({
|
|
|
24135
25278
|
hideOverlay = false
|
|
24136
25279
|
}) {
|
|
24137
25280
|
const { colors: colors2, fonts, components } = useTheme();
|
|
24138
|
-
const [containerEl, setContainerEl] =
|
|
24139
|
-
const containerCallbackRef =
|
|
25281
|
+
const [containerEl, setContainerEl] = useState32(null);
|
|
25282
|
+
const containerCallbackRef = useCallback72((el) => {
|
|
24140
25283
|
setContainerEl(el);
|
|
24141
25284
|
}, []);
|
|
24142
|
-
const [resolvedTheme, setResolvedTheme] =
|
|
25285
|
+
const [resolvedTheme, setResolvedTheme] = useState32(
|
|
24143
25286
|
theme === "auto" ? "dark" : theme
|
|
24144
25287
|
);
|
|
24145
|
-
|
|
25288
|
+
useEffect272(() => {
|
|
24146
25289
|
if (theme === "auto") {
|
|
24147
25290
|
const mq = window.matchMedia("(prefers-color-scheme: dark)");
|
|
24148
25291
|
setResolvedTheme(mq.matches ? "dark" : "light");
|
|
@@ -24171,12 +25314,12 @@ function WithdrawModal({
|
|
|
24171
25314
|
publishableKey,
|
|
24172
25315
|
enabled: open
|
|
24173
25316
|
});
|
|
24174
|
-
const [selectedToken, setSelectedToken] =
|
|
24175
|
-
const [selectedChain, setSelectedChain] =
|
|
24176
|
-
const [detectedWallet, setDetectedWallet] =
|
|
25317
|
+
const [selectedToken, setSelectedToken] = useState32(null);
|
|
25318
|
+
const [selectedChain, setSelectedChain] = useState32(null);
|
|
25319
|
+
const [detectedWallet, setDetectedWallet] = useState32(null);
|
|
24177
25320
|
const connectedWalletName = detectedWallet?.name ?? null;
|
|
24178
25321
|
const isWalletMatch = !!detectedWallet;
|
|
24179
|
-
|
|
25322
|
+
useEffect272(() => {
|
|
24180
25323
|
if (!senderAddress || !open) {
|
|
24181
25324
|
setDetectedWallet(null);
|
|
24182
25325
|
return;
|
|
@@ -24189,10 +25332,10 @@ function WithdrawModal({
|
|
|
24189
25332
|
cancelled = true;
|
|
24190
25333
|
};
|
|
24191
25334
|
}, [senderAddress, sourceChainType, open]);
|
|
24192
|
-
const [view, setView] =
|
|
24193
|
-
const [withdrawDepositWalletId, setWithdrawDepositWalletId] =
|
|
24194
|
-
const [selectedExecution, setSelectedExecution] =
|
|
24195
|
-
const [submittedTxInfo, setSubmittedTxInfo] =
|
|
25335
|
+
const [view, setView] = useState32("form");
|
|
25336
|
+
const [withdrawDepositWalletId, setWithdrawDepositWalletId] = useState32();
|
|
25337
|
+
const [selectedExecution, setSelectedExecution] = useState32(null);
|
|
25338
|
+
const [submittedTxInfo, setSubmittedTxInfo] = useState32(null);
|
|
24196
25339
|
const { executions: realtimeExecutions } = useWithdrawPolling({
|
|
24197
25340
|
userId: externalUserId,
|
|
24198
25341
|
publishableKey,
|
|
@@ -24207,7 +25350,7 @@ function WithdrawModal({
|
|
|
24207
25350
|
refetchInterval: view === "tracker" || view === "detail" ? 5e3 : 15e3
|
|
24208
25351
|
});
|
|
24209
25352
|
const allWithdrawals = allWithdrawalsData?.data ?? [];
|
|
24210
|
-
const handleDepositWalletCreation =
|
|
25353
|
+
const handleDepositWalletCreation = useCallback72(async (params) => {
|
|
24211
25354
|
const { data: wallets } = await createDepositAddress(
|
|
24212
25355
|
{
|
|
24213
25356
|
external_user_id: externalUserId,
|
|
@@ -24226,11 +25369,11 @@ function WithdrawModal({
|
|
|
24226
25369
|
setWithdrawDepositWalletId(depositWallet.id);
|
|
24227
25370
|
return depositWallet;
|
|
24228
25371
|
}, [externalUserId, publishableKey, sourceChainType]);
|
|
24229
|
-
const handleWithdrawSubmitted =
|
|
25372
|
+
const handleWithdrawSubmitted = useCallback72((txInfo) => {
|
|
24230
25373
|
setSubmittedTxInfo(txInfo);
|
|
24231
25374
|
setView("confirming");
|
|
24232
25375
|
}, []);
|
|
24233
|
-
|
|
25376
|
+
useEffect272(() => {
|
|
24234
25377
|
if (!destinationTokens.length || selectedToken) return;
|
|
24235
25378
|
const first = destinationTokens[0];
|
|
24236
25379
|
if (first?.chains.length > 0) {
|
|
@@ -24238,8 +25381,8 @@ function WithdrawModal({
|
|
|
24238
25381
|
setSelectedChain(first.chains[0]);
|
|
24239
25382
|
}
|
|
24240
25383
|
}, [destinationTokens, selectedToken]);
|
|
24241
|
-
const resetViewTimeoutRef =
|
|
24242
|
-
const handleClose =
|
|
25384
|
+
const resetViewTimeoutRef = useRef102(null);
|
|
25385
|
+
const handleClose = useCallback72(() => {
|
|
24243
25386
|
onOpenChange(false);
|
|
24244
25387
|
if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
|
|
24245
25388
|
resetViewTimeoutRef.current = setTimeout(() => {
|
|
@@ -24252,7 +25395,7 @@ function WithdrawModal({
|
|
|
24252
25395
|
resetViewTimeoutRef.current = null;
|
|
24253
25396
|
}, 200);
|
|
24254
25397
|
}, [onOpenChange]);
|
|
24255
|
-
|
|
25398
|
+
useLayoutEffect42(() => {
|
|
24256
25399
|
if (!open) return;
|
|
24257
25400
|
if (resetViewTimeoutRef.current) {
|
|
24258
25401
|
clearTimeout(resetViewTimeoutRef.current);
|
|
@@ -24265,17 +25408,17 @@ function WithdrawModal({
|
|
|
24265
25408
|
setSubmittedTxInfo(null);
|
|
24266
25409
|
setWithdrawDepositWalletId(void 0);
|
|
24267
25410
|
}, [open]);
|
|
24268
|
-
|
|
25411
|
+
useEffect272(() => () => {
|
|
24269
25412
|
if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
|
|
24270
25413
|
}, []);
|
|
24271
|
-
const handleTokenSymbolChange =
|
|
25414
|
+
const handleTokenSymbolChange = useCallback72((symbol) => {
|
|
24272
25415
|
const tok = destinationTokens.find((t11) => t11.symbol === symbol);
|
|
24273
25416
|
if (tok) {
|
|
24274
25417
|
setSelectedToken(tok);
|
|
24275
25418
|
if (tok.chains.length > 0) setSelectedChain(tok.chains[0]);
|
|
24276
25419
|
}
|
|
24277
25420
|
}, [destinationTokens]);
|
|
24278
|
-
const handleChainKeyChange =
|
|
25421
|
+
const handleChainKeyChange = useCallback72((chainKey) => {
|
|
24279
25422
|
if (!selectedToken) return;
|
|
24280
25423
|
const chain = selectedToken.chains.find((c) => getChainKey5(c.chain_id, c.chain_type) === chainKey);
|
|
24281
25424
|
if (chain) setSelectedChain(chain);
|
|
@@ -24283,8 +25426,8 @@ function WithdrawModal({
|
|
|
24283
25426
|
const isSourceSupported = sourceValidation?.isSupported ?? null;
|
|
24284
25427
|
const canWithdraw = !!onWithdraw || isWalletMatch;
|
|
24285
25428
|
const isAnyLoading = tokensLoading || isCheckingSourceToken;
|
|
24286
|
-
const withdrawPoweredByFooter = /* @__PURE__ */
|
|
24287
|
-
return /* @__PURE__ */
|
|
25429
|
+
const withdrawPoweredByFooter = /* @__PURE__ */ jsx57("div", { className: "uf-pt-3", children: /* @__PURE__ */ jsx57(PoweredByUnifold, { color: colors2.foregroundMuted, className: "uf-flex uf-justify-center uf-shrink-0" }) });
|
|
25430
|
+
return /* @__PURE__ */ jsx57(PortalContainerProvider, { value: hideOverlay ? containerEl : null, children: /* @__PURE__ */ jsx57(Dialog2, { open: hideOverlay || open, onOpenChange: hideOverlay ? void 0 : handleClose, modal: !hideOverlay, children: /* @__PURE__ */ jsx57(
|
|
24288
25431
|
DialogContent2,
|
|
24289
25432
|
{
|
|
24290
25433
|
ref: hideOverlay ? containerCallbackRef : void 0,
|
|
@@ -24293,7 +25436,7 @@ function WithdrawModal({
|
|
|
24293
25436
|
style: { backgroundColor: colors2.background },
|
|
24294
25437
|
onPointerDownOutside: (e) => e.preventDefault(),
|
|
24295
25438
|
onInteractOutside: (e) => e.preventDefault(),
|
|
24296
|
-
children: /* @__PURE__ */
|
|
25439
|
+
children: /* @__PURE__ */ jsx57(ThemeStyleInjector, { children: view === "confirming" && submittedTxInfo ? /* @__PURE__ */ jsx57(
|
|
24297
25440
|
WithdrawConfirmingView,
|
|
24298
25441
|
{
|
|
24299
25442
|
txInfo: submittedTxInfo,
|
|
@@ -24301,18 +25444,18 @@ function WithdrawModal({
|
|
|
24301
25444
|
onClose: handleClose,
|
|
24302
25445
|
onViewTracker: () => setView("tracker")
|
|
24303
25446
|
}
|
|
24304
|
-
) : view === "detail" && selectedExecution ? /* @__PURE__ */
|
|
24305
|
-
/* @__PURE__ */
|
|
25447
|
+
) : view === "detail" && selectedExecution ? /* @__PURE__ */ jsxs50(Fragment13, { children: [
|
|
25448
|
+
/* @__PURE__ */ jsx57(DepositHeader, { title: "Withdrawal Details", showBack: true, showClose: !hideOverlay, onBack: () => {
|
|
24306
25449
|
setSelectedExecution(null);
|
|
24307
25450
|
setView("tracker");
|
|
24308
25451
|
}, onClose: handleClose }),
|
|
24309
|
-
/* @__PURE__ */
|
|
25452
|
+
/* @__PURE__ */ jsx57(DepositDetailContent, { execution: selectedExecution, variant: "withdraw" }),
|
|
24310
25453
|
withdrawPoweredByFooter
|
|
24311
25454
|
] }) : view === "tracker" ? (
|
|
24312
25455
|
/* ---------- Tracker view: execution list ---------- */
|
|
24313
|
-
/* @__PURE__ */
|
|
24314
|
-
/* @__PURE__ */
|
|
24315
|
-
/* @__PURE__ */
|
|
25456
|
+
/* @__PURE__ */ jsxs50(Fragment13, { children: [
|
|
25457
|
+
/* @__PURE__ */ jsx57(DepositHeader, { title: "Withdrawal History", showBack: true, showClose: !hideOverlay, onBack: () => setView("form"), onClose: handleClose }),
|
|
25458
|
+
/* @__PURE__ */ jsx57("div", { className: "uf-flex uf-flex-col uf-gap-2", style: { minHeight: 200 }, children: allWithdrawals.length === 0 ? /* @__PURE__ */ jsx57("div", { className: "uf-flex uf-items-center uf-justify-center uf-py-8", children: /* @__PURE__ */ jsx57("p", { className: "uf-text-sm", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: "No withdrawals to track yet" }) }) : allWithdrawals.map((ex) => /* @__PURE__ */ jsx57(
|
|
24316
25459
|
WithdrawExecutionItem,
|
|
24317
25460
|
{
|
|
24318
25461
|
execution: ex,
|
|
@@ -24327,15 +25470,15 @@ function WithdrawModal({
|
|
|
24327
25470
|
] })
|
|
24328
25471
|
) : (
|
|
24329
25472
|
/* ---------- Form view (default) ---------- */
|
|
24330
|
-
/* @__PURE__ */
|
|
24331
|
-
/* @__PURE__ */
|
|
24332
|
-
/* @__PURE__ */
|
|
24333
|
-
isAnyLoading ? /* @__PURE__ */
|
|
24334
|
-
/* @__PURE__ */
|
|
24335
|
-
/* @__PURE__ */
|
|
24336
|
-
/* @__PURE__ */
|
|
24337
|
-
] }) : /* @__PURE__ */
|
|
24338
|
-
/* @__PURE__ */
|
|
25473
|
+
/* @__PURE__ */ jsxs50(Fragment13, { children: [
|
|
25474
|
+
/* @__PURE__ */ jsx57(DepositHeader, { title: modalTitle || t9.title, showClose: !hideOverlay, onClose: handleClose }),
|
|
25475
|
+
/* @__PURE__ */ jsxs50("div", { className: "uf-flex uf-flex-col uf-gap-3", children: [
|
|
25476
|
+
isAnyLoading ? /* @__PURE__ */ jsx57("div", { className: "uf-space-y-3", children: [1, 2, 3].map((i) => /* @__PURE__ */ jsx57("div", { className: "uf-w-full uf-bg-secondary uf-rounded-xl uf-p-3 uf-flex uf-items-center uf-animate-pulse", children: /* @__PURE__ */ jsx57("div", { className: "uf-bg-muted uf-rounded-lg uf-w-full uf-h-10" }) }, i)) }) : isSourceSupported === false ? /* @__PURE__ */ jsxs50("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
|
|
25477
|
+
/* @__PURE__ */ jsx57("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ jsx57(TriangleAlert, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
|
|
25478
|
+
/* @__PURE__ */ jsx57("h3", { className: "uf-text-lg uf-font-semibold uf-mb-2", style: { color: colors2.foreground, fontFamily: fonts.medium }, children: "Unsupported Source Token" }),
|
|
25479
|
+
/* @__PURE__ */ jsx57("p", { className: "uf-text-sm uf-max-w-[280px]", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: sourceValidation?.errorMessage })
|
|
25480
|
+
] }) : /* @__PURE__ */ jsxs50(Fragment13, { children: [
|
|
25481
|
+
/* @__PURE__ */ jsx57(
|
|
24339
25482
|
WithdrawDoubleInput,
|
|
24340
25483
|
{
|
|
24341
25484
|
tokens: destinationTokens,
|
|
@@ -24346,7 +25489,7 @@ function WithdrawModal({
|
|
|
24346
25489
|
isLoading: tokensLoading
|
|
24347
25490
|
}
|
|
24348
25491
|
),
|
|
24349
|
-
/* @__PURE__ */
|
|
25492
|
+
/* @__PURE__ */ jsx57(
|
|
24350
25493
|
WithdrawForm,
|
|
24351
25494
|
{
|
|
24352
25495
|
publishableKey,
|
|
@@ -24372,16 +25515,16 @@ function WithdrawModal({
|
|
|
24372
25515
|
onWithdrawError,
|
|
24373
25516
|
onDepositWalletCreation: handleDepositWalletCreation,
|
|
24374
25517
|
onWithdrawSubmitted: handleWithdrawSubmitted,
|
|
24375
|
-
footerLeft: /* @__PURE__ */
|
|
25518
|
+
footerLeft: /* @__PURE__ */ jsxs50(
|
|
24376
25519
|
"button",
|
|
24377
25520
|
{
|
|
24378
25521
|
onClick: () => setView("tracker"),
|
|
24379
25522
|
className: "uf-flex uf-items-center uf-gap-1 uf-transition-colors hover:uf-opacity-70",
|
|
24380
25523
|
style: { color: colors2.foregroundMuted },
|
|
24381
25524
|
children: [
|
|
24382
|
-
/* @__PURE__ */
|
|
25525
|
+
/* @__PURE__ */ jsx57(Clock, { className: "uf-w-3.5 uf-h-3.5" }),
|
|
24383
25526
|
"Withdrawal History",
|
|
24384
|
-
/* @__PURE__ */
|
|
25527
|
+
/* @__PURE__ */ jsx57(ChevronRight, { className: "uf-w-3 uf-h-3" })
|
|
24385
25528
|
]
|
|
24386
25529
|
}
|
|
24387
25530
|
)
|
|
@@ -24398,18 +25541,22 @@ function WithdrawModal({
|
|
|
24398
25541
|
var t10 = i18n2.withdrawModal;
|
|
24399
25542
|
|
|
24400
25543
|
// src/provider.tsx
|
|
24401
|
-
import { jsx as
|
|
25544
|
+
import { jsx as jsx59, jsxs as jsxs52 } from "react/jsx-runtime";
|
|
24402
25545
|
function UnifoldProvider2({
|
|
24403
25546
|
children,
|
|
24404
25547
|
publishableKey,
|
|
24405
25548
|
config
|
|
24406
25549
|
}) {
|
|
24407
|
-
const [isOpen, setIsOpen] =
|
|
24408
|
-
const [depositConfig, setDepositConfig] =
|
|
25550
|
+
const [isOpen, setIsOpen] = useState34(false);
|
|
25551
|
+
const [depositConfig, setDepositConfig] = useState34(
|
|
24409
25552
|
null
|
|
24410
25553
|
);
|
|
24411
|
-
const [
|
|
24412
|
-
const [
|
|
25554
|
+
const [isCheckoutOpen, setIsCheckoutOpen] = useState34(false);
|
|
25555
|
+
const [checkoutConfig, setCheckoutConfig] = useState34(
|
|
25556
|
+
null
|
|
25557
|
+
);
|
|
25558
|
+
const [isWithdrawOpen, setIsWithdrawOpen] = useState34(false);
|
|
25559
|
+
const [withdrawConfig, setWithdrawConfig] = useState34(
|
|
24413
25560
|
null
|
|
24414
25561
|
);
|
|
24415
25562
|
const [resolvedTheme, setResolvedTheme] = React38.useState("dark");
|
|
@@ -24507,6 +25654,75 @@ function UnifoldProvider2({
|
|
|
24507
25654
|
depositPromiseRef.current = null;
|
|
24508
25655
|
}
|
|
24509
25656
|
}, [depositConfig]);
|
|
25657
|
+
const checkoutPromiseRef = React38.useRef(null);
|
|
25658
|
+
const checkoutConfigRef = React38.useRef(null);
|
|
25659
|
+
checkoutConfigRef.current = checkoutConfig;
|
|
25660
|
+
const checkoutCloseTimeoutRef = React38.useRef(null);
|
|
25661
|
+
const checkoutCloseGuardRef = React38.useRef(false);
|
|
25662
|
+
const beginCheckout = useCallback12((config2) => {
|
|
25663
|
+
if (checkoutCloseTimeoutRef.current) {
|
|
25664
|
+
clearTimeout(checkoutCloseTimeoutRef.current);
|
|
25665
|
+
checkoutCloseTimeoutRef.current = null;
|
|
25666
|
+
}
|
|
25667
|
+
checkoutCloseGuardRef.current = false;
|
|
25668
|
+
if (checkoutPromiseRef.current) {
|
|
25669
|
+
console.warn("[UnifoldProvider] A checkout is already in progress. Cancelling previous checkout.");
|
|
25670
|
+
checkoutPromiseRef.current.reject({
|
|
25671
|
+
message: "Checkout cancelled - new checkout started",
|
|
25672
|
+
code: "CHECKOUT_SUPERSEDED"
|
|
25673
|
+
});
|
|
25674
|
+
checkoutPromiseRef.current = null;
|
|
25675
|
+
}
|
|
25676
|
+
const promise = new Promise((resolve, reject) => {
|
|
25677
|
+
checkoutPromiseRef.current = { resolve, reject };
|
|
25678
|
+
});
|
|
25679
|
+
promise.catch(() => {
|
|
25680
|
+
});
|
|
25681
|
+
setCheckoutConfig(config2);
|
|
25682
|
+
setIsCheckoutOpen(true);
|
|
25683
|
+
return promise;
|
|
25684
|
+
}, []);
|
|
25685
|
+
const closeCheckout = useCallback12(() => {
|
|
25686
|
+
if (checkoutCloseGuardRef.current) {
|
|
25687
|
+
return;
|
|
25688
|
+
}
|
|
25689
|
+
checkoutCloseGuardRef.current = true;
|
|
25690
|
+
const promiseToReject = checkoutPromiseRef.current;
|
|
25691
|
+
checkoutPromiseRef.current = null;
|
|
25692
|
+
if (checkoutConfigRef.current?.onClose) {
|
|
25693
|
+
checkoutConfigRef.current.onClose();
|
|
25694
|
+
}
|
|
25695
|
+
if (promiseToReject) {
|
|
25696
|
+
promiseToReject.reject({
|
|
25697
|
+
message: "Checkout cancelled by user",
|
|
25698
|
+
code: "CHECKOUT_CANCELLED"
|
|
25699
|
+
});
|
|
25700
|
+
}
|
|
25701
|
+
setIsCheckoutOpen(false);
|
|
25702
|
+
checkoutCloseTimeoutRef.current = setTimeout(() => {
|
|
25703
|
+
setCheckoutConfig(null);
|
|
25704
|
+
checkoutCloseTimeoutRef.current = null;
|
|
25705
|
+
}, 200);
|
|
25706
|
+
}, []);
|
|
25707
|
+
const handleCheckoutSuccess = useCallback12((data) => {
|
|
25708
|
+
if (checkoutConfig?.onSuccess) {
|
|
25709
|
+
checkoutConfig.onSuccess(data);
|
|
25710
|
+
}
|
|
25711
|
+
if (checkoutPromiseRef.current) {
|
|
25712
|
+
checkoutPromiseRef.current.resolve(data);
|
|
25713
|
+
checkoutPromiseRef.current = null;
|
|
25714
|
+
}
|
|
25715
|
+
}, [checkoutConfig]);
|
|
25716
|
+
const handleCheckoutError = useCallback12((error) => {
|
|
25717
|
+
console.error("[UnifoldProvider] Checkout error:", error);
|
|
25718
|
+
if (checkoutConfig?.onError) {
|
|
25719
|
+
checkoutConfig.onError(error);
|
|
25720
|
+
}
|
|
25721
|
+
if (checkoutPromiseRef.current) {
|
|
25722
|
+
checkoutPromiseRef.current.reject(error);
|
|
25723
|
+
checkoutPromiseRef.current = null;
|
|
25724
|
+
}
|
|
25725
|
+
}, [checkoutConfig]);
|
|
24510
25726
|
const beginWithdraw = useCallback12((config2) => {
|
|
24511
25727
|
if (withdrawCloseTimeoutRef.current) {
|
|
24512
25728
|
clearTimeout(withdrawCloseTimeoutRef.current);
|
|
@@ -24575,16 +25791,16 @@ function UnifoldProvider2({
|
|
|
24575
25791
|
() => ({
|
|
24576
25792
|
beginDeposit,
|
|
24577
25793
|
closeDeposit,
|
|
24578
|
-
|
|
24579
|
-
|
|
25794
|
+
beginCheckout,
|
|
25795
|
+
closeCheckout,
|
|
24580
25796
|
beginWithdraw,
|
|
24581
25797
|
closeWithdraw,
|
|
24582
25798
|
handleWithdrawSuccess,
|
|
24583
25799
|
handleWithdrawError
|
|
24584
25800
|
}),
|
|
24585
|
-
[beginDeposit, closeDeposit,
|
|
25801
|
+
[beginDeposit, closeDeposit, beginCheckout, closeCheckout, beginWithdraw, closeWithdraw, handleWithdrawSuccess, handleWithdrawError]
|
|
24586
25802
|
);
|
|
24587
|
-
return /* @__PURE__ */
|
|
25803
|
+
return /* @__PURE__ */ jsx59(UnifoldProvider, { publishableKey, children: /* @__PURE__ */ jsx59(ConnectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs52(
|
|
24588
25804
|
ThemeProvider,
|
|
24589
25805
|
{
|
|
24590
25806
|
mode: resolvedTheme,
|
|
@@ -24595,7 +25811,20 @@ function UnifoldProvider2({
|
|
|
24595
25811
|
components: config?.components,
|
|
24596
25812
|
children: [
|
|
24597
25813
|
children,
|
|
24598
|
-
|
|
25814
|
+
checkoutConfig && /* @__PURE__ */ jsx59(
|
|
25815
|
+
CheckoutModal,
|
|
25816
|
+
{
|
|
25817
|
+
open: isCheckoutOpen,
|
|
25818
|
+
onOpenChange: closeCheckout,
|
|
25819
|
+
clientSecret: checkoutConfig.clientSecret,
|
|
25820
|
+
publishableKey,
|
|
25821
|
+
enableConnectWallet: config?.enableConnectWallet,
|
|
25822
|
+
theme: resolvedTheme,
|
|
25823
|
+
onCheckoutSuccess: handleCheckoutSuccess,
|
|
25824
|
+
onCheckoutError: handleCheckoutError
|
|
25825
|
+
}
|
|
25826
|
+
),
|
|
25827
|
+
withdrawConfig && /* @__PURE__ */ jsx59(
|
|
24599
25828
|
WithdrawModal,
|
|
24600
25829
|
{
|
|
24601
25830
|
open: isWithdrawOpen,
|
|
@@ -24615,7 +25844,7 @@ function UnifoldProvider2({
|
|
|
24615
25844
|
theme: resolvedTheme
|
|
24616
25845
|
}
|
|
24617
25846
|
),
|
|
24618
|
-
depositConfig && /* @__PURE__ */
|
|
25847
|
+
depositConfig && /* @__PURE__ */ jsx59(
|
|
24619
25848
|
DepositModal,
|
|
24620
25849
|
{
|
|
24621
25850
|
open: isOpen,
|
|
@@ -24666,6 +25895,9 @@ function useUnifold2() {
|
|
|
24666
25895
|
beginDeposit: () => Promise.reject(new Error("SSR not supported")),
|
|
24667
25896
|
closeDeposit: () => {
|
|
24668
25897
|
},
|
|
25898
|
+
beginCheckout: () => Promise.reject(new Error("SSR not supported")),
|
|
25899
|
+
closeCheckout: () => {
|
|
25900
|
+
},
|
|
24669
25901
|
beginWithdraw: () => Promise.reject(new Error("SSR not supported")),
|
|
24670
25902
|
closeWithdraw: () => {
|
|
24671
25903
|
}
|
|
@@ -24678,6 +25910,8 @@ function useUnifold2() {
|
|
|
24678
25910
|
publishableKey: baseContext.publishableKey,
|
|
24679
25911
|
beginDeposit: connectContext.beginDeposit,
|
|
24680
25912
|
closeDeposit: connectContext.closeDeposit,
|
|
25913
|
+
beginCheckout: connectContext.beginCheckout,
|
|
25914
|
+
closeCheckout: connectContext.closeCheckout,
|
|
24681
25915
|
beginWithdraw: connectContext.beginWithdraw,
|
|
24682
25916
|
closeWithdraw: connectContext.closeWithdraw
|
|
24683
25917
|
};
|
|
@@ -24725,6 +25959,7 @@ lucide-react/dist/esm/Icon.js:
|
|
|
24725
25959
|
lucide-react/dist/esm/createLucideIcon.js:
|
|
24726
25960
|
lucide-react/dist/esm/icons/arrow-left-right.js:
|
|
24727
25961
|
lucide-react/dist/esm/icons/arrow-left.js:
|
|
25962
|
+
lucide-react/dist/esm/icons/arrow-right.js:
|
|
24728
25963
|
lucide-react/dist/esm/icons/arrow-up-down.js:
|
|
24729
25964
|
lucide-react/dist/esm/icons/check.js:
|
|
24730
25965
|
lucide-react/dist/esm/icons/chevron-down.js:
|