@unifold/connect-react 0.1.42 → 0.1.44
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +22 -2
- package/dist/index.d.ts +22 -2
- package/dist/index.js +1782 -514
- package/dist/index.mjs +1785 -510
- 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" }],
|
|
@@ -6514,6 +6520,28 @@ async function verifyRecipientAddress(request, publishableKey) {
|
|
|
6514
6520
|
}
|
|
6515
6521
|
return response.json();
|
|
6516
6522
|
}
|
|
6523
|
+
async function checkHypercoreActivation(request, publishableKey) {
|
|
6524
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
6525
|
+
validatePublishableKey(pk);
|
|
6526
|
+
const response = await fetch(
|
|
6527
|
+
`${API_BASE_URL}/v1/public/addresses/hypercore/activation`,
|
|
6528
|
+
{
|
|
6529
|
+
method: "POST",
|
|
6530
|
+
headers: {
|
|
6531
|
+
accept: "application/json",
|
|
6532
|
+
"x-publishable-key": pk,
|
|
6533
|
+
"Content-Type": "application/json"
|
|
6534
|
+
},
|
|
6535
|
+
body: JSON.stringify(request)
|
|
6536
|
+
}
|
|
6537
|
+
);
|
|
6538
|
+
if (!response.ok) {
|
|
6539
|
+
throw new Error(
|
|
6540
|
+
`HyperCore activation check failed: ${response.statusText}`
|
|
6541
|
+
);
|
|
6542
|
+
}
|
|
6543
|
+
return response.json();
|
|
6544
|
+
}
|
|
6517
6545
|
async function getExchanges(query, publishableKey) {
|
|
6518
6546
|
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
6519
6547
|
validatePublishableKey(pk);
|
|
@@ -6598,6 +6626,119 @@ async function sendSolanaTransaction(request, publishableKey) {
|
|
|
6598
6626
|
}
|
|
6599
6627
|
return response.json();
|
|
6600
6628
|
}
|
|
6629
|
+
async function retrievePaymentIntent(clientSecret, publishableKey) {
|
|
6630
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
6631
|
+
validatePublishableKey(pk);
|
|
6632
|
+
const response = await fetch(
|
|
6633
|
+
`${API_BASE_URL}/v1/public/payment_intents/retrieve`,
|
|
6634
|
+
{
|
|
6635
|
+
method: "POST",
|
|
6636
|
+
headers: {
|
|
6637
|
+
accept: "application/json",
|
|
6638
|
+
"x-publishable-key": pk,
|
|
6639
|
+
"Content-Type": "application/json"
|
|
6640
|
+
},
|
|
6641
|
+
body: JSON.stringify({ client_secret: clientSecret })
|
|
6642
|
+
}
|
|
6643
|
+
);
|
|
6644
|
+
if (!response.ok) {
|
|
6645
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
6646
|
+
throw new Error(
|
|
6647
|
+
`Failed to retrieve payment intent: ${error.message || response.statusText}`
|
|
6648
|
+
);
|
|
6649
|
+
}
|
|
6650
|
+
return response.json();
|
|
6651
|
+
}
|
|
6652
|
+
async function listPaymentIntentExecutions(clientSecret, publishableKey) {
|
|
6653
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
6654
|
+
validatePublishableKey(pk);
|
|
6655
|
+
const response = await fetch(
|
|
6656
|
+
`${API_BASE_URL}/v1/public/payment_intents/executions`,
|
|
6657
|
+
{
|
|
6658
|
+
method: "POST",
|
|
6659
|
+
headers: {
|
|
6660
|
+
accept: "application/json",
|
|
6661
|
+
"x-publishable-key": pk,
|
|
6662
|
+
"Content-Type": "application/json"
|
|
6663
|
+
},
|
|
6664
|
+
body: JSON.stringify({ client_secret: clientSecret })
|
|
6665
|
+
}
|
|
6666
|
+
);
|
|
6667
|
+
if (!response.ok) {
|
|
6668
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
6669
|
+
throw new Error(
|
|
6670
|
+
`Failed to list payment intent executions: ${error.message || response.statusText}`
|
|
6671
|
+
);
|
|
6672
|
+
}
|
|
6673
|
+
return response.json();
|
|
6674
|
+
}
|
|
6675
|
+
async function getDepositQuote(request, publishableKey) {
|
|
6676
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
6677
|
+
validatePublishableKey(pk);
|
|
6678
|
+
const response = await fetch(`${API_BASE_URL}/v1/public/quotes`, {
|
|
6679
|
+
method: "POST",
|
|
6680
|
+
headers: {
|
|
6681
|
+
accept: "application/json",
|
|
6682
|
+
"x-publishable-key": pk,
|
|
6683
|
+
"Content-Type": "application/json"
|
|
6684
|
+
},
|
|
6685
|
+
body: JSON.stringify(request)
|
|
6686
|
+
});
|
|
6687
|
+
if (!response.ok) {
|
|
6688
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
6689
|
+
throw new Error(
|
|
6690
|
+
`Failed to get deposit quote: ${error.message || response.statusText}`
|
|
6691
|
+
);
|
|
6692
|
+
}
|
|
6693
|
+
const json = await response.json();
|
|
6694
|
+
return json.data;
|
|
6695
|
+
}
|
|
6696
|
+
async function buildHypercoreTransaction(request, publishableKey) {
|
|
6697
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
6698
|
+
validatePublishableKey(pk);
|
|
6699
|
+
const response = await fetch(
|
|
6700
|
+
`${API_BASE_URL}/v1/public/transactions/hypercore/build`,
|
|
6701
|
+
{
|
|
6702
|
+
method: "POST",
|
|
6703
|
+
headers: {
|
|
6704
|
+
accept: "application/json",
|
|
6705
|
+
"x-publishable-key": pk,
|
|
6706
|
+
"Content-Type": "application/json"
|
|
6707
|
+
},
|
|
6708
|
+
body: JSON.stringify(request)
|
|
6709
|
+
}
|
|
6710
|
+
);
|
|
6711
|
+
if (!response.ok) {
|
|
6712
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
6713
|
+
throw new Error(
|
|
6714
|
+
`Failed to build HyperCore transaction: ${error.message || response.statusText}`
|
|
6715
|
+
);
|
|
6716
|
+
}
|
|
6717
|
+
return response.json();
|
|
6718
|
+
}
|
|
6719
|
+
async function sendHypercoreTransaction(request, publishableKey) {
|
|
6720
|
+
const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
|
|
6721
|
+
validatePublishableKey(pk);
|
|
6722
|
+
const response = await fetch(
|
|
6723
|
+
`${API_BASE_URL}/v1/public/transactions/hypercore/send`,
|
|
6724
|
+
{
|
|
6725
|
+
method: "POST",
|
|
6726
|
+
headers: {
|
|
6727
|
+
accept: "application/json",
|
|
6728
|
+
"x-publishable-key": pk,
|
|
6729
|
+
"Content-Type": "application/json"
|
|
6730
|
+
},
|
|
6731
|
+
body: JSON.stringify(request)
|
|
6732
|
+
}
|
|
6733
|
+
);
|
|
6734
|
+
if (!response.ok) {
|
|
6735
|
+
const error = await response.json().catch(() => ({ message: response.statusText }));
|
|
6736
|
+
throw new Error(
|
|
6737
|
+
`Failed to send HyperCore transaction: ${error.message || response.statusText}`
|
|
6738
|
+
);
|
|
6739
|
+
}
|
|
6740
|
+
return response.json();
|
|
6741
|
+
}
|
|
6601
6742
|
function useUserIp() {
|
|
6602
6743
|
const {
|
|
6603
6744
|
data: userIpInfo,
|
|
@@ -6725,7 +6866,7 @@ var i18n = en_default;
|
|
|
6725
6866
|
// ../ui-react/dist/index.mjs
|
|
6726
6867
|
import { useQuery as useQuery2 } from "@tanstack/react-query";
|
|
6727
6868
|
import { useState as useState42 } from "react";
|
|
6728
|
-
import { useEffect as
|
|
6869
|
+
import { useEffect as useEffect23, useLayoutEffect as useLayoutEffect5, useState as useState22 } from "react";
|
|
6729
6870
|
import { jsx as jsx32, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
6730
6871
|
import * as React42 from "react";
|
|
6731
6872
|
import { jsx as jsx42, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
@@ -10930,34 +11071,45 @@ import { jsx as jsx44 } from "react/jsx-runtime";
|
|
|
10930
11071
|
import { jsx as jsx45, jsxs as jsxs38 } from "react/jsx-runtime";
|
|
10931
11072
|
import { Fragment as Fragment52, jsx as jsx46, jsxs as jsxs39 } from "react/jsx-runtime";
|
|
10932
11073
|
import { Fragment as Fragment62, jsx as jsx47, jsxs as jsxs40 } from "react/jsx-runtime";
|
|
10933
|
-
import { useCallback as useCallback22, useState as useState242 } from "react";
|
|
11074
|
+
import { useCallback as useCallback22, useEffect as useEffect192, useState as useState242 } from "react";
|
|
10934
11075
|
import { Fragment as Fragment72, jsx as jsx48, jsxs as jsxs41 } from "react/jsx-runtime";
|
|
10935
11076
|
import { Fragment as Fragment82, jsx as jsx49, jsxs as jsxs422 } from "react/jsx-runtime";
|
|
10936
11077
|
import * as React272 from "react";
|
|
10937
11078
|
import { jsx as jsx50, jsxs as jsxs43 } from "react/jsx-runtime";
|
|
10938
11079
|
import { Fragment as Fragment9, jsx as jsx51, jsxs as jsxs44 } from "react/jsx-runtime";
|
|
10939
11080
|
import {
|
|
10940
|
-
useState as
|
|
10941
|
-
useEffect as
|
|
11081
|
+
useState as useState28,
|
|
11082
|
+
useEffect as useEffect232,
|
|
10942
11083
|
useLayoutEffect as useLayoutEffect32,
|
|
10943
|
-
useCallback as
|
|
10944
|
-
useRef as useRef82
|
|
11084
|
+
useCallback as useCallback52,
|
|
11085
|
+
useRef as useRef82,
|
|
11086
|
+
useMemo as useMemo102
|
|
10945
11087
|
} from "react";
|
|
10946
11088
|
import { useQuery as useQuery9 } from "@tanstack/react-query";
|
|
10947
11089
|
import { useQuery as useQuery10 } from "@tanstack/react-query";
|
|
11090
|
+
import { Fragment as Fragment10, jsx as jsx522, jsxs as jsxs45 } from "react/jsx-runtime";
|
|
11091
|
+
import {
|
|
11092
|
+
useState as useState32,
|
|
11093
|
+
useEffect as useEffect272,
|
|
11094
|
+
useLayoutEffect as useLayoutEffect42,
|
|
11095
|
+
useCallback as useCallback72,
|
|
11096
|
+
useRef as useRef102
|
|
11097
|
+
} from "react";
|
|
10948
11098
|
import { useQuery as useQuery11 } from "@tanstack/react-query";
|
|
10949
11099
|
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
11100
|
import { useQuery as useQuery13 } from "@tanstack/react-query";
|
|
10954
|
-
import {
|
|
10955
|
-
import {
|
|
10956
|
-
import {
|
|
10957
|
-
import {
|
|
11101
|
+
import { useQuery as useQuery14 } from "@tanstack/react-query";
|
|
11102
|
+
import { useState as useState29, useEffect as useEffect242, useRef as useRef92 } from "react";
|
|
11103
|
+
import { jsx as jsx53, jsxs as jsxs46 } from "react/jsx-runtime";
|
|
11104
|
+
import { useState as useState30, useCallback as useCallback62, useMemo as useMemo112, useEffect as useEffect252 } from "react";
|
|
11105
|
+
import { useQuery as useQuery15 } from "@tanstack/react-query";
|
|
11106
|
+
import { Fragment as Fragment11, jsx as jsx54, jsxs as jsxs47 } from "react/jsx-runtime";
|
|
11107
|
+
import { jsx as jsx55, jsxs as jsxs48 } from "react/jsx-runtime";
|
|
11108
|
+
import { useState as useState31, useEffect as useEffect262 } from "react";
|
|
10958
11109
|
import { Fragment as Fragment12, jsx as jsx56, jsxs as jsxs49 } from "react/jsx-runtime";
|
|
10959
|
-
import {
|
|
10960
|
-
import {
|
|
11110
|
+
import { Fragment as Fragment13, jsx as jsx57, jsxs as jsxs50 } from "react/jsx-runtime";
|
|
11111
|
+
import { useState as useState33, useMemo as useMemo122 } from "react";
|
|
11112
|
+
import { jsx as jsx58, jsxs as jsxs51 } from "react/jsx-runtime";
|
|
10961
11113
|
function cn(...inputs) {
|
|
10962
11114
|
return twMerge(clsx(inputs));
|
|
10963
11115
|
}
|
|
@@ -11716,7 +11868,7 @@ function DepositHeader({
|
|
|
11716
11868
|
setShowBalanceSkeleton(false);
|
|
11717
11869
|
}
|
|
11718
11870
|
}, [showBalanceBlock]);
|
|
11719
|
-
|
|
11871
|
+
useEffect23(() => {
|
|
11720
11872
|
if (!showBalance || !balanceAddress || !balanceChainType || !balanceChainId || !balanceTokenAddress || !publishableKey) {
|
|
11721
11873
|
setBalance(null);
|
|
11722
11874
|
setIsLoadingBalance(false);
|
|
@@ -12268,6 +12420,7 @@ var CUTOFF_BUFFER_MS = 6e4;
|
|
|
12268
12420
|
function useDepositPolling({
|
|
12269
12421
|
userId,
|
|
12270
12422
|
publishableKey,
|
|
12423
|
+
clientSecret,
|
|
12271
12424
|
depositConfirmationMode = "auto_ui",
|
|
12272
12425
|
depositWalletId,
|
|
12273
12426
|
enabled = true,
|
|
@@ -12325,11 +12478,12 @@ function useDepositPolling({
|
|
|
12325
12478
|
depositWalletId
|
|
12326
12479
|
]);
|
|
12327
12480
|
useEffect32(() => {
|
|
12328
|
-
if (!
|
|
12481
|
+
if (!enabled) return;
|
|
12482
|
+
if (!clientSecret && !userId) return;
|
|
12329
12483
|
const modalOpenedAt = modalOpenedAtRef.current;
|
|
12330
12484
|
const poll = async () => {
|
|
12331
12485
|
try {
|
|
12332
|
-
const response = await queryExecutions(userId, publishableKey, ActionType.Deposit);
|
|
12486
|
+
const response = clientSecret ? await listPaymentIntentExecutions(clientSecret, publishableKey) : await queryExecutions(userId, publishableKey, ActionType.Deposit);
|
|
12333
12487
|
const cutoff = new Date(modalOpenedAt.getTime() - CUTOFF_BUFFER_MS);
|
|
12334
12488
|
const sortedExecutions = [...response.data].sort((a, b) => {
|
|
12335
12489
|
const timeA = a.created_at ? new Date(a.created_at).getTime() : 0;
|
|
@@ -12413,7 +12567,7 @@ function useDepositPolling({
|
|
|
12413
12567
|
clearInterval(pollInterval);
|
|
12414
12568
|
setIsPolling(false);
|
|
12415
12569
|
};
|
|
12416
|
-
}, [userId, publishableKey, enabled]);
|
|
12570
|
+
}, [userId, publishableKey, clientSecret, enabled]);
|
|
12417
12571
|
useEffect32(() => {
|
|
12418
12572
|
if (!pollingEnabled || !depositWalletId) return;
|
|
12419
12573
|
const triggerPoll = async () => {
|
|
@@ -18922,6 +19076,7 @@ var parseChainKey = (chainKey) => {
|
|
|
18922
19076
|
function TransferCryptoSingleInput({
|
|
18923
19077
|
userId,
|
|
18924
19078
|
publishableKey,
|
|
19079
|
+
clientSecret,
|
|
18925
19080
|
recipientAddress,
|
|
18926
19081
|
destinationChainType,
|
|
18927
19082
|
destinationChainId,
|
|
@@ -18934,7 +19089,9 @@ function TransferCryptoSingleInput({
|
|
|
18934
19089
|
onExecutionsChange,
|
|
18935
19090
|
onDepositSuccess,
|
|
18936
19091
|
onDepositError,
|
|
18937
|
-
wallets: externalWallets
|
|
19092
|
+
wallets: externalWallets,
|
|
19093
|
+
onSourceTokenChange,
|
|
19094
|
+
checkoutQuote
|
|
18938
19095
|
}) {
|
|
18939
19096
|
const { themeClass, colors: colors2, fonts, components } = useTheme();
|
|
18940
19097
|
const isDarkMode = themeClass.includes("uf-dark");
|
|
@@ -19001,12 +19158,28 @@ function TransferCryptoSingleInput({
|
|
|
19001
19158
|
} = useDepositPolling({
|
|
19002
19159
|
userId,
|
|
19003
19160
|
publishableKey,
|
|
19161
|
+
clientSecret,
|
|
19004
19162
|
depositConfirmationMode,
|
|
19005
19163
|
depositWalletId: currentWallet?.id,
|
|
19006
19164
|
enabled: true,
|
|
19007
19165
|
onDepositSuccess,
|
|
19008
19166
|
onDepositError
|
|
19009
19167
|
});
|
|
19168
|
+
useEffect172(() => {
|
|
19169
|
+
if (!onSourceTokenChange || !token || !chain || !initialSelectionDone) return;
|
|
19170
|
+
const { chainType, chainId } = parseChainKey(chain);
|
|
19171
|
+
const matchedToken = supportedTokens.find((t11) => t11.symbol === token);
|
|
19172
|
+
const matchedChain = matchedToken?.chains.find(
|
|
19173
|
+
(c) => c.chain_type === chainType && c.chain_id === chainId
|
|
19174
|
+
);
|
|
19175
|
+
onSourceTokenChange({
|
|
19176
|
+
symbol: token,
|
|
19177
|
+
chainType,
|
|
19178
|
+
chainId,
|
|
19179
|
+
tokenAddress: matchedChain?.token_address ?? "",
|
|
19180
|
+
minimumDepositAmountUsd: matchedChain?.minimum_deposit_amount_usd ?? 0
|
|
19181
|
+
});
|
|
19182
|
+
}, [token, chain, initialSelectionDone, onSourceTokenChange, supportedTokens]);
|
|
19010
19183
|
useEffect172(() => {
|
|
19011
19184
|
if (onExecutionsChange) {
|
|
19012
19185
|
onExecutionsChange(depositExecutions);
|
|
@@ -19153,6 +19326,53 @@ function TransferCryptoSingleInput({
|
|
|
19153
19326
|
/* @__PURE__ */ jsx41("span", { children: "Retrying automatically every 5 seconds..." })
|
|
19154
19327
|
] })
|
|
19155
19328
|
] }),
|
|
19329
|
+
checkoutQuote && /* @__PURE__ */ jsxs35(
|
|
19330
|
+
"div",
|
|
19331
|
+
{
|
|
19332
|
+
className: "uf-rounded-xl uf-px-3 uf-py-2 uf-flex uf-items-center uf-justify-between",
|
|
19333
|
+
style: {
|
|
19334
|
+
backgroundColor: components.card.backgroundColor,
|
|
19335
|
+
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`,
|
|
19336
|
+
borderRadius: components.card.borderRadius
|
|
19337
|
+
},
|
|
19338
|
+
children: [
|
|
19339
|
+
/* @__PURE__ */ jsx41(
|
|
19340
|
+
"span",
|
|
19341
|
+
{
|
|
19342
|
+
className: "uf-text-xs",
|
|
19343
|
+
style: { color: components.card.subtitleColor, fontFamily: fonts.regular },
|
|
19344
|
+
children: "You send"
|
|
19345
|
+
}
|
|
19346
|
+
),
|
|
19347
|
+
/* @__PURE__ */ jsxs35(
|
|
19348
|
+
"span",
|
|
19349
|
+
{
|
|
19350
|
+
className: "uf-text-sm uf-font-semibold",
|
|
19351
|
+
style: { color: components.card.titleColor, fontFamily: fonts.semibold },
|
|
19352
|
+
children: [
|
|
19353
|
+
(Number(checkoutQuote.sourceAmount) / 10 ** checkoutQuote.sourceTokenDecimals).toFixed(
|
|
19354
|
+
Math.min(checkoutQuote.sourceTokenDecimals, 6)
|
|
19355
|
+
),
|
|
19356
|
+
" ",
|
|
19357
|
+
checkoutQuote.sourceTokenSymbol,
|
|
19358
|
+
checkoutQuote.sourceAmountUsd && /* @__PURE__ */ jsxs35(
|
|
19359
|
+
"span",
|
|
19360
|
+
{
|
|
19361
|
+
className: "uf-text-xs uf-font-normal uf-ml-1.5",
|
|
19362
|
+
style: { color: components.card.subtitleColor },
|
|
19363
|
+
children: [
|
|
19364
|
+
"($",
|
|
19365
|
+
checkoutQuote.sourceAmountUsd,
|
|
19366
|
+
")"
|
|
19367
|
+
]
|
|
19368
|
+
}
|
|
19369
|
+
)
|
|
19370
|
+
]
|
|
19371
|
+
}
|
|
19372
|
+
)
|
|
19373
|
+
]
|
|
19374
|
+
}
|
|
19375
|
+
),
|
|
19156
19376
|
/* @__PURE__ */ jsxs35("div", { className: "uf-flex uf-flex-col uf-items-center uf-pt-2", children: [
|
|
19157
19377
|
/* @__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
19378
|
/* @__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 +20194,16 @@ function SelectTokenView({
|
|
|
19974
20194
|
onBack,
|
|
19975
20195
|
onClose,
|
|
19976
20196
|
onDisconnectWallet,
|
|
19977
|
-
isDisconnectingWallet = false
|
|
20197
|
+
isDisconnectingWallet = false,
|
|
20198
|
+
checkoutAmountUsd,
|
|
20199
|
+
checkoutReceivedUsd
|
|
19978
20200
|
}) {
|
|
19979
20201
|
const { colors: colors2, fonts, components } = useTheme();
|
|
20202
|
+
const isCheckout = !!checkoutAmountUsd;
|
|
20203
|
+
const headerSubtitle = isCheckout ? parseFloat(checkoutReceivedUsd || "0") > 0 ? `$${checkoutReceivedUsd} / $${checkoutAmountUsd} received` : `Amount due: $${checkoutAmountUsd}` : formatBalanceDisplay(
|
|
20204
|
+
`$${totalBalanceUsd || "0.00"}`,
|
|
20205
|
+
projectName
|
|
20206
|
+
);
|
|
19980
20207
|
return /* @__PURE__ */ jsxs38(
|
|
19981
20208
|
"div",
|
|
19982
20209
|
{
|
|
@@ -19985,11 +20212,8 @@ function SelectTokenView({
|
|
|
19985
20212
|
/* @__PURE__ */ jsx45(
|
|
19986
20213
|
DepositHeader,
|
|
19987
20214
|
{
|
|
19988
|
-
title: "Select Token",
|
|
19989
|
-
subtitle:
|
|
19990
|
-
`$${totalBalanceUsd || "0.00"}`,
|
|
19991
|
-
projectName
|
|
19992
|
-
),
|
|
20215
|
+
title: isCheckout ? "Select Token" : "Select Token",
|
|
20216
|
+
subtitle: headerSubtitle,
|
|
19993
20217
|
showBack: true,
|
|
19994
20218
|
onBack,
|
|
19995
20219
|
onClose
|
|
@@ -20217,10 +20441,19 @@ function EnterAmountView({
|
|
|
20217
20441
|
onReview,
|
|
20218
20442
|
onBack,
|
|
20219
20443
|
onClose,
|
|
20220
|
-
quickSelectMode
|
|
20444
|
+
quickSelectMode,
|
|
20445
|
+
checkoutAmountUsd,
|
|
20446
|
+
checkoutReceivedUsd
|
|
20221
20447
|
}) {
|
|
20222
20448
|
const { colors: colors2, fonts, components } = useTheme();
|
|
20449
|
+
const isCheckout = !!checkoutAmountUsd;
|
|
20223
20450
|
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}`;
|
|
20451
|
+
const checkoutRemainingUsd = isCheckout ? Math.max(
|
|
20452
|
+
parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0"),
|
|
20453
|
+
0
|
|
20454
|
+
).toFixed(2) : null;
|
|
20455
|
+
const headerTitle = isCheckout ? `Pay $${checkoutRemainingUsd}` : "Enter Amount";
|
|
20456
|
+
const headerSubtitle = isCheckout ? parseFloat(checkoutReceivedUsd || "0") > 0 ? `$${checkoutReceivedUsd} / $${checkoutAmountUsd} received` : null : balanceSubtitle;
|
|
20224
20457
|
const usePercentageChips = quickSelectMode === "percentage" && maxUsdAmount > 0;
|
|
20225
20458
|
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
20459
|
return /* @__PURE__ */ jsxs39(
|
|
@@ -20234,14 +20467,27 @@ function EnterAmountView({
|
|
|
20234
20467
|
/* @__PURE__ */ jsx46(
|
|
20235
20468
|
DepositHeader,
|
|
20236
20469
|
{
|
|
20237
|
-
title:
|
|
20238
|
-
subtitle:
|
|
20470
|
+
title: headerTitle,
|
|
20471
|
+
subtitle: headerSubtitle ?? void 0,
|
|
20239
20472
|
showBack: true,
|
|
20240
20473
|
onBack,
|
|
20241
20474
|
onClose
|
|
20242
20475
|
}
|
|
20243
20476
|
),
|
|
20244
|
-
walletInfoProp ? /* @__PURE__ */ jsx46("div", { className: "uf-flex uf-w-full uf-justify-center uf-mb-3", children: /* @__PURE__ */
|
|
20477
|
+
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: [
|
|
20478
|
+
/* @__PURE__ */ jsx46(WalletWithNetworkBadge, { walletInfo: walletInfoProp }),
|
|
20479
|
+
isCheckout && /* @__PURE__ */ jsx46(
|
|
20480
|
+
"span",
|
|
20481
|
+
{
|
|
20482
|
+
className: "uf-text-xs",
|
|
20483
|
+
style: {
|
|
20484
|
+
color: colors2.foregroundMuted,
|
|
20485
|
+
fontFamily: fonts.regular
|
|
20486
|
+
},
|
|
20487
|
+
children: balanceSubtitle
|
|
20488
|
+
}
|
|
20489
|
+
)
|
|
20490
|
+
] }) }) : null,
|
|
20245
20491
|
/* @__PURE__ */ jsxs39("div", { className: "uf-flex uf-min-h-0 uf-flex-1 uf-flex-col", children: [
|
|
20246
20492
|
/* @__PURE__ */ jsxs39("div", { className: "uf-min-h-0 uf-flex-1", children: [
|
|
20247
20493
|
/* @__PURE__ */ jsxs39("div", { className: "uf-text-center uf-py-8", children: [
|
|
@@ -20264,7 +20510,9 @@ function EnterAmountView({
|
|
|
20264
20510
|
inputMode: "decimal",
|
|
20265
20511
|
placeholder: "0",
|
|
20266
20512
|
value: amountUsd,
|
|
20513
|
+
readOnly: isCheckout,
|
|
20267
20514
|
onChange: (e) => {
|
|
20515
|
+
if (isCheckout) return;
|
|
20268
20516
|
const value = e.target.value;
|
|
20269
20517
|
if (value === "" || /^\d*\.?\d*$/.test(value)) {
|
|
20270
20518
|
const decimalIndex = value.indexOf(".");
|
|
@@ -20275,7 +20523,7 @@ function EnterAmountView({
|
|
|
20275
20523
|
onAmountChange(value);
|
|
20276
20524
|
}
|
|
20277
20525
|
},
|
|
20278
|
-
className:
|
|
20526
|
+
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
20527
|
style: {
|
|
20280
20528
|
fontSize: `${Math.max(3.75 - (amountUsd || "0").length * 0.15, 2)}rem`,
|
|
20281
20529
|
color: components.input.textColor,
|
|
@@ -20297,7 +20545,7 @@ function EnterAmountView({
|
|
|
20297
20545
|
}
|
|
20298
20546
|
)
|
|
20299
20547
|
] }),
|
|
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: [
|
|
20548
|
+
!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
20549
|
PERCENT_QUICK_AMOUNTS.map((pct) => /* @__PURE__ */ jsxs39(
|
|
20302
20550
|
"button",
|
|
20303
20551
|
{
|
|
@@ -20366,7 +20614,46 @@ function EnterAmountView({
|
|
|
20366
20614
|
}
|
|
20367
20615
|
)
|
|
20368
20616
|
] }) }),
|
|
20369
|
-
tokenChainDetails && tokenChainDetails.minimum_deposit_amount_usd > 0 && /* @__PURE__ */ jsxs39(
|
|
20617
|
+
tokenChainDetails && tokenChainDetails.minimum_deposit_amount_usd > 0 && (isCheckout && checkoutAmountUsd && inputUsdNum > parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0") + 5e-3 ? /* @__PURE__ */ jsxs39(
|
|
20618
|
+
"div",
|
|
20619
|
+
{
|
|
20620
|
+
className: "uf-rounded-lg uf-px-3 uf-py-2 uf-mb-3 uf-text-center",
|
|
20621
|
+
style: {
|
|
20622
|
+
backgroundColor: colors2.warning + "15",
|
|
20623
|
+
border: `1px solid ${colors2.warning}30`,
|
|
20624
|
+
borderRadius: components.card.borderRadius,
|
|
20625
|
+
animation: "uf-fadeSlideIn 0.4s ease-out"
|
|
20626
|
+
},
|
|
20627
|
+
children: [
|
|
20628
|
+
/* @__PURE__ */ jsxs39(
|
|
20629
|
+
"div",
|
|
20630
|
+
{
|
|
20631
|
+
className: "uf-text-xs uf-font-medium",
|
|
20632
|
+
style: { color: colors2.warning, fontFamily: fonts.medium },
|
|
20633
|
+
children: [
|
|
20634
|
+
"Minimum for ",
|
|
20635
|
+
selectedToken.symbol,
|
|
20636
|
+
" on ",
|
|
20637
|
+
selectedToken.chain_name,
|
|
20638
|
+
" is $",
|
|
20639
|
+
tokenChainDetails.minimum_deposit_amount_usd.toFixed(2)
|
|
20640
|
+
]
|
|
20641
|
+
}
|
|
20642
|
+
),
|
|
20643
|
+
/* @__PURE__ */ jsxs39(
|
|
20644
|
+
"div",
|
|
20645
|
+
{
|
|
20646
|
+
className: "uf-text-xs uf-mt-0.5",
|
|
20647
|
+
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
20648
|
+
children: [
|
|
20649
|
+
"Amount adjusted from remaining $",
|
|
20650
|
+
(parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0")).toFixed(2)
|
|
20651
|
+
]
|
|
20652
|
+
}
|
|
20653
|
+
)
|
|
20654
|
+
]
|
|
20655
|
+
}
|
|
20656
|
+
) : /* @__PURE__ */ jsxs39(
|
|
20370
20657
|
"div",
|
|
20371
20658
|
{
|
|
20372
20659
|
className: "uf-text-center uf-text-xs uf-mb-3",
|
|
@@ -20376,7 +20663,7 @@ function EnterAmountView({
|
|
|
20376
20663
|
tokenChainDetails.minimum_deposit_amount_usd.toFixed(2)
|
|
20377
20664
|
]
|
|
20378
20665
|
}
|
|
20379
|
-
),
|
|
20666
|
+
)),
|
|
20380
20667
|
inputUsdNum > 0 && /* @__PURE__ */ jsx46(Fragment52, { children: inputUsdNum > maxUsdAmount ? /* @__PURE__ */ jsx46(
|
|
20381
20668
|
"div",
|
|
20382
20669
|
{
|
|
@@ -20391,7 +20678,44 @@ function EnterAmountView({
|
|
|
20391
20678
|
style: { color: colors2.error },
|
|
20392
20679
|
children: error
|
|
20393
20680
|
}
|
|
20394
|
-
) })
|
|
20681
|
+
) }),
|
|
20682
|
+
isCheckout && selectedToken.icon_url && /* @__PURE__ */ jsxs39("div", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2 uf-py-2", children: [
|
|
20683
|
+
/* @__PURE__ */ jsxs39("div", { className: "uf-relative", children: [
|
|
20684
|
+
/* @__PURE__ */ jsx46(
|
|
20685
|
+
"img",
|
|
20686
|
+
{
|
|
20687
|
+
src: selectedToken.icon_url,
|
|
20688
|
+
alt: selectedToken.symbol,
|
|
20689
|
+
width: 20,
|
|
20690
|
+
height: 20,
|
|
20691
|
+
className: "uf-w-5 uf-h-5 uf-rounded-full"
|
|
20692
|
+
}
|
|
20693
|
+
),
|
|
20694
|
+
selectedToken.chain_icon_url && /* @__PURE__ */ jsx46(
|
|
20695
|
+
"img",
|
|
20696
|
+
{
|
|
20697
|
+
src: selectedToken.chain_icon_url,
|
|
20698
|
+
alt: selectedToken.chain_name,
|
|
20699
|
+
width: 10,
|
|
20700
|
+
height: 10,
|
|
20701
|
+
className: "uf-w-2.5 uf-h-2.5 uf-rounded-full uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-border",
|
|
20702
|
+
style: { borderColor: colors2.background }
|
|
20703
|
+
}
|
|
20704
|
+
)
|
|
20705
|
+
] }),
|
|
20706
|
+
/* @__PURE__ */ jsxs39(
|
|
20707
|
+
"span",
|
|
20708
|
+
{
|
|
20709
|
+
className: "uf-text-xs",
|
|
20710
|
+
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
20711
|
+
children: [
|
|
20712
|
+
selectedToken.symbol,
|
|
20713
|
+
" on ",
|
|
20714
|
+
selectedToken.chain_name
|
|
20715
|
+
]
|
|
20716
|
+
}
|
|
20717
|
+
)
|
|
20718
|
+
] })
|
|
20395
20719
|
] }),
|
|
20396
20720
|
/* @__PURE__ */ jsx46("div", { className: "uf-shrink-0 uf-pt-2", children: /* @__PURE__ */ jsx46(
|
|
20397
20721
|
"button",
|
|
@@ -20415,6 +20739,18 @@ function EnterAmountView({
|
|
|
20415
20739
|
}
|
|
20416
20740
|
);
|
|
20417
20741
|
}
|
|
20742
|
+
var WALLET_ICONS2 = {
|
|
20743
|
+
metamask: MetamaskIcon,
|
|
20744
|
+
phantom: PhantomIcon,
|
|
20745
|
+
coinbase: CoinbaseIcon,
|
|
20746
|
+
trust: TrustIcon,
|
|
20747
|
+
rainbow: RainbowIcon,
|
|
20748
|
+
rabby: RabbyIcon,
|
|
20749
|
+
okx: OkxIcon,
|
|
20750
|
+
solflare: SolflareIcon,
|
|
20751
|
+
backpack: BackpackIcon,
|
|
20752
|
+
glow: GlowIcon
|
|
20753
|
+
};
|
|
20418
20754
|
function ReviewView({
|
|
20419
20755
|
walletInfo,
|
|
20420
20756
|
recipientAddress,
|
|
@@ -20449,30 +20785,17 @@ function ReviewView({
|
|
|
20449
20785
|
),
|
|
20450
20786
|
/* @__PURE__ */ jsxs40("div", { className: "uf-flex uf-min-h-0 uf-flex-1 uf-flex-col", children: [
|
|
20451
20787
|
/* @__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
|
-
] }),
|
|
20788
|
+
/* @__PURE__ */ jsx47("div", { className: "uf-text-center", children: /* @__PURE__ */ jsxs40(
|
|
20789
|
+
"div",
|
|
20790
|
+
{
|
|
20791
|
+
className: "uf-text-4xl uf-font-medium",
|
|
20792
|
+
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
20793
|
+
children: [
|
|
20794
|
+
"$",
|
|
20795
|
+
amountUsd || "0"
|
|
20796
|
+
]
|
|
20797
|
+
}
|
|
20798
|
+
) }),
|
|
20476
20799
|
/* @__PURE__ */ jsxs40(
|
|
20477
20800
|
"div",
|
|
20478
20801
|
{
|
|
@@ -20489,29 +20812,20 @@ function ReviewView({
|
|
|
20489
20812
|
{
|
|
20490
20813
|
className: "uf-text-sm",
|
|
20491
20814
|
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
20492
|
-
children: "
|
|
20815
|
+
children: "From"
|
|
20493
20816
|
}
|
|
20494
20817
|
),
|
|
20495
20818
|
/* @__PURE__ */ jsxs40("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
20496
|
-
|
|
20497
|
-
|
|
20498
|
-
{
|
|
20499
|
-
|
|
20500
|
-
|
|
20501
|
-
className: "uf-w-5 uf-h-5 uf-rounded-full"
|
|
20502
|
-
}
|
|
20503
|
-
),
|
|
20504
|
-
/* @__PURE__ */ jsxs40(
|
|
20819
|
+
WALLET_ICONS2[walletInfo.icon] && (() => {
|
|
20820
|
+
const Icon22 = WALLET_ICONS2[walletInfo.icon];
|
|
20821
|
+
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" }) });
|
|
20822
|
+
})(),
|
|
20823
|
+
/* @__PURE__ */ jsx47(
|
|
20505
20824
|
"span",
|
|
20506
20825
|
{
|
|
20507
20826
|
className: "uf-text-sm uf-font-medium",
|
|
20508
20827
|
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
20509
|
-
children:
|
|
20510
|
-
walletInfo.name,
|
|
20511
|
-
" (",
|
|
20512
|
-
truncateAddress2(walletInfo.address),
|
|
20513
|
-
")"
|
|
20514
|
-
]
|
|
20828
|
+
children: walletInfo.name
|
|
20515
20829
|
}
|
|
20516
20830
|
)
|
|
20517
20831
|
] })
|
|
@@ -20522,11 +20836,39 @@ function ReviewView({
|
|
|
20522
20836
|
{
|
|
20523
20837
|
className: "uf-text-sm",
|
|
20524
20838
|
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
20525
|
-
children: "
|
|
20839
|
+
children: "You send"
|
|
20526
20840
|
}
|
|
20527
20841
|
),
|
|
20528
|
-
/* @__PURE__ */
|
|
20529
|
-
|
|
20842
|
+
/* @__PURE__ */ jsxs40("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
20843
|
+
getIconUrl2(selectedToken.icon_url, assetCdnUrl) && /* @__PURE__ */ jsx47(
|
|
20844
|
+
"img",
|
|
20845
|
+
{
|
|
20846
|
+
src: getIconUrl2(selectedToken.icon_url, assetCdnUrl),
|
|
20847
|
+
alt: selectedToken.symbol,
|
|
20848
|
+
className: "uf-w-5 uf-h-5 uf-rounded-full"
|
|
20849
|
+
}
|
|
20850
|
+
),
|
|
20851
|
+
/* @__PURE__ */ jsx47(
|
|
20852
|
+
"span",
|
|
20853
|
+
{
|
|
20854
|
+
className: "uf-text-sm uf-font-medium",
|
|
20855
|
+
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
20856
|
+
children: formattedTokenAmount || `$${amountUsd}`
|
|
20857
|
+
}
|
|
20858
|
+
)
|
|
20859
|
+
] })
|
|
20860
|
+
] }),
|
|
20861
|
+
/* @__PURE__ */ jsxs40("div", { className: "uf-flex uf-justify-between uf-items-center", children: [
|
|
20862
|
+
/* @__PURE__ */ jsx47(
|
|
20863
|
+
"span",
|
|
20864
|
+
{
|
|
20865
|
+
className: "uf-text-sm",
|
|
20866
|
+
style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
|
|
20867
|
+
children: "Destination"
|
|
20868
|
+
}
|
|
20869
|
+
),
|
|
20870
|
+
/* @__PURE__ */ jsx47(
|
|
20871
|
+
"span",
|
|
20530
20872
|
{
|
|
20531
20873
|
className: "uf-text-sm uf-font-medium",
|
|
20532
20874
|
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
@@ -20674,7 +21016,10 @@ function ReviewView({
|
|
|
20674
21016
|
borderRadius: components.button.borderRadius,
|
|
20675
21017
|
border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
|
|
20676
21018
|
},
|
|
20677
|
-
children: isConfirming ? "
|
|
21019
|
+
children: isConfirming ? /* @__PURE__ */ jsxs40("span", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2", children: [
|
|
21020
|
+
/* @__PURE__ */ jsx47(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
|
|
21021
|
+
"Confirming..."
|
|
21022
|
+
] }) : "Confirm Order"
|
|
20678
21023
|
}
|
|
20679
21024
|
) })
|
|
20680
21025
|
] })
|
|
@@ -20683,17 +21028,35 @@ function ReviewView({
|
|
|
20683
21028
|
}
|
|
20684
21029
|
);
|
|
20685
21030
|
}
|
|
21031
|
+
var SETTLE_FALLBACK_MS = 15e3;
|
|
20686
21032
|
function ConfirmingView({
|
|
20687
21033
|
isConfirming,
|
|
20688
21034
|
onClose,
|
|
20689
21035
|
executions = [],
|
|
20690
|
-
isPolling = false
|
|
21036
|
+
isPolling = false,
|
|
21037
|
+
onNewDeposit,
|
|
21038
|
+
onDone,
|
|
21039
|
+
paymentIntentStatus,
|
|
21040
|
+
amountReceivedUsd,
|
|
21041
|
+
amountReceivedUsdAtSubmission
|
|
20691
21042
|
}) {
|
|
20692
|
-
const { colors: colors2, fonts } = useTheme();
|
|
21043
|
+
const { colors: colors2, fonts, components } = useTheme();
|
|
20693
21044
|
const [containerEl, setContainerEl] = useState242(null);
|
|
20694
21045
|
const containerCallbackRef = useCallback22((el) => {
|
|
20695
21046
|
setContainerEl(el);
|
|
20696
21047
|
}, []);
|
|
21048
|
+
const [fallbackSettled, setFallbackSettled] = useState242(false);
|
|
21049
|
+
const hasExecution = executions.length > 0;
|
|
21050
|
+
const isCheckoutMode = paymentIntentStatus != null;
|
|
21051
|
+
const isPaymentComplete = paymentIntentStatus === "succeeded";
|
|
21052
|
+
const amountChanged = amountReceivedUsdAtSubmission != null && amountReceivedUsd != null && amountReceivedUsd !== amountReceivedUsdAtSubmission;
|
|
21053
|
+
const piSettled = !isCheckoutMode || isPaymentComplete || amountChanged || fallbackSettled;
|
|
21054
|
+
useEffect192(() => {
|
|
21055
|
+
if (!hasExecution || piSettled) return;
|
|
21056
|
+
const timeout = setTimeout(() => setFallbackSettled(true), SETTLE_FALLBACK_MS);
|
|
21057
|
+
return () => clearTimeout(timeout);
|
|
21058
|
+
}, [hasExecution, piSettled]);
|
|
21059
|
+
const showButtons = hasExecution && piSettled;
|
|
20697
21060
|
return /* @__PURE__ */ jsx48(PortalContainerProvider, { value: containerEl, children: /* @__PURE__ */ jsxs41(
|
|
20698
21061
|
"div",
|
|
20699
21062
|
{
|
|
@@ -20706,8 +21069,8 @@ function ConfirmingView({
|
|
|
20706
21069
|
/* @__PURE__ */ jsx48(
|
|
20707
21070
|
DepositHeader,
|
|
20708
21071
|
{
|
|
20709
|
-
title: isConfirming ? "Confirming..." : "Processing",
|
|
20710
|
-
onClose
|
|
21072
|
+
title: isConfirming ? "Confirming..." : hasExecution && isPaymentComplete ? "Payment Complete" : hasExecution ? "Deposit Received" : "Processing",
|
|
21073
|
+
onClose: isPaymentComplete && onDone ? onDone : onClose
|
|
20711
21074
|
}
|
|
20712
21075
|
),
|
|
20713
21076
|
/* @__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,11 +21097,70 @@ function ConfirmingView({
|
|
|
20734
21097
|
children: "Please confirm the transaction in your wallet"
|
|
20735
21098
|
}
|
|
20736
21099
|
)
|
|
20737
|
-
] }) : /* @__PURE__ */ jsxs41(Fragment72, { children: [
|
|
21100
|
+
] }) : hasExecution ? /* @__PURE__ */ jsxs41(Fragment72, { children: [
|
|
20738
21101
|
/* @__PURE__ */ jsx48(
|
|
20739
21102
|
CircleCheck,
|
|
20740
21103
|
{
|
|
20741
21104
|
className: "uf-w-12 uf-h-12 uf-mb-4",
|
|
21105
|
+
style: { color: "rgb(34, 197, 94)" }
|
|
21106
|
+
}
|
|
21107
|
+
),
|
|
21108
|
+
/* @__PURE__ */ jsx48(
|
|
21109
|
+
"div",
|
|
21110
|
+
{
|
|
21111
|
+
className: "uf-text-lg uf-font-medium",
|
|
21112
|
+
style: { color: colors2.foreground, fontFamily: fonts.medium },
|
|
21113
|
+
children: isPaymentComplete ? "Payment Complete" : "Deposit Received"
|
|
21114
|
+
}
|
|
21115
|
+
),
|
|
21116
|
+
/* @__PURE__ */ jsx48(
|
|
21117
|
+
"div",
|
|
21118
|
+
{
|
|
21119
|
+
className: "uf-text-sm uf-mt-2 uf-text-center uf-px-6",
|
|
21120
|
+
style: { color: colors2.foregroundMuted },
|
|
21121
|
+
children: isPaymentComplete ? "Your payment has been fulfilled." : showButtons ? "Your deposit is being processed." : "Checking payment status..."
|
|
21122
|
+
}
|
|
21123
|
+
),
|
|
21124
|
+
/* @__PURE__ */ jsx48("div", { className: "uf-mt-6 uf-flex uf-flex-col uf-items-center uf-gap-3", children: !showButtons ? /* @__PURE__ */ jsx48(
|
|
21125
|
+
LoaderCircle,
|
|
21126
|
+
{
|
|
21127
|
+
className: "uf-w-5 uf-h-5 uf-animate-spin",
|
|
21128
|
+
style: { color: colors2.foregroundMuted }
|
|
21129
|
+
}
|
|
21130
|
+
) : isPaymentComplete && onDone ? /* @__PURE__ */ jsx48(
|
|
21131
|
+
"button",
|
|
21132
|
+
{
|
|
21133
|
+
onClick: onDone,
|
|
21134
|
+
className: "uf-w-full uf-py-3 uf-px-8 uf-text-sm uf-font-medium uf-transition-opacity hover:uf-opacity-80",
|
|
21135
|
+
style: {
|
|
21136
|
+
backgroundColor: colors2.primary,
|
|
21137
|
+
color: colors2.primaryForeground,
|
|
21138
|
+
fontFamily: fonts.medium,
|
|
21139
|
+
borderRadius: components.button.borderRadius
|
|
21140
|
+
},
|
|
21141
|
+
children: "Done"
|
|
21142
|
+
}
|
|
21143
|
+
) : onNewDeposit ? /* @__PURE__ */ jsxs41(
|
|
21144
|
+
"button",
|
|
21145
|
+
{
|
|
21146
|
+
onClick: onNewDeposit,
|
|
21147
|
+
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",
|
|
21148
|
+
style: {
|
|
21149
|
+
backgroundColor: colors2.primary,
|
|
21150
|
+
color: colors2.primaryForeground,
|
|
21151
|
+
fontFamily: fonts.medium
|
|
21152
|
+
},
|
|
21153
|
+
children: [
|
|
21154
|
+
"Make another deposit",
|
|
21155
|
+
/* @__PURE__ */ jsx48(ArrowRight, { className: "uf-w-4 uf-h-4" })
|
|
21156
|
+
]
|
|
21157
|
+
}
|
|
21158
|
+
) : null })
|
|
21159
|
+
] }) : /* @__PURE__ */ jsxs41(Fragment72, { children: [
|
|
21160
|
+
/* @__PURE__ */ jsx48(
|
|
21161
|
+
LoaderCircle,
|
|
21162
|
+
{
|
|
21163
|
+
className: "uf-w-12 uf-h-12 uf-animate-spin uf-mb-4",
|
|
20742
21164
|
style: { color: colors2.primary }
|
|
20743
21165
|
}
|
|
20744
21166
|
),
|
|
@@ -20755,7 +21177,7 @@ function ConfirmingView({
|
|
|
20755
21177
|
{
|
|
20756
21178
|
className: "uf-text-sm uf-mt-2 uf-text-center uf-px-6",
|
|
20757
21179
|
style: { color: colors2.foregroundMuted },
|
|
20758
|
-
children: "
|
|
21180
|
+
children: "Waiting for your deposit to be detected..."
|
|
20759
21181
|
}
|
|
20760
21182
|
)
|
|
20761
21183
|
] }) }),
|
|
@@ -20779,6 +21201,7 @@ function BrowserWalletModal({
|
|
|
20779
21201
|
depositWallet,
|
|
20780
21202
|
userId,
|
|
20781
21203
|
publishableKey,
|
|
21204
|
+
clientSecret,
|
|
20782
21205
|
assetCdnUrl,
|
|
20783
21206
|
projectName,
|
|
20784
21207
|
theme = "dark",
|
|
@@ -20787,7 +21210,13 @@ function BrowserWalletModal({
|
|
|
20787
21210
|
onDepositSuccess,
|
|
20788
21211
|
onDepositError,
|
|
20789
21212
|
amountQuickSelect = "percentage",
|
|
20790
|
-
onWalletDisconnect
|
|
21213
|
+
onWalletDisconnect,
|
|
21214
|
+
prefillAmountUsd,
|
|
21215
|
+
checkoutAmountUsd,
|
|
21216
|
+
checkoutReceivedUsd,
|
|
21217
|
+
onNewDeposit,
|
|
21218
|
+
onDone,
|
|
21219
|
+
paymentIntentStatus
|
|
20791
21220
|
}) {
|
|
20792
21221
|
const { colors: colors2, fonts, components } = useTheme();
|
|
20793
21222
|
const [step, setStep] = React262.useState("select-token");
|
|
@@ -20805,6 +21234,7 @@ function BrowserWalletModal({
|
|
|
20805
21234
|
const [tokenChainDetails, setTokenChainDetails] = React262.useState(null);
|
|
20806
21235
|
const [loadingTokenDetails, setLoadingTokenDetails] = React262.useState(false);
|
|
20807
21236
|
const [showTransactionDetails, setShowTransactionDetails] = React262.useState(false);
|
|
21237
|
+
const [receivedUsdAtSubmission, setReceivedUsdAtSubmission] = React262.useState(null);
|
|
20808
21238
|
const themeClass = theme === "dark" ? "uf-dark" : "";
|
|
20809
21239
|
const chainType = depositWallet.chain_type;
|
|
20810
21240
|
const recipientAddress = depositWallet.address;
|
|
@@ -20812,15 +21242,19 @@ function BrowserWalletModal({
|
|
|
20812
21242
|
const { executions: depositExecutions, isPolling } = useDepositPolling({
|
|
20813
21243
|
userId,
|
|
20814
21244
|
publishableKey,
|
|
21245
|
+
clientSecret,
|
|
20815
21246
|
enabled: open && hasSignedTransaction,
|
|
20816
21247
|
onDepositSuccess,
|
|
20817
21248
|
onDepositError
|
|
20818
21249
|
});
|
|
21250
|
+
const prevOpenRef = React262.useRef(false);
|
|
20819
21251
|
React262.useEffect(() => {
|
|
20820
|
-
|
|
21252
|
+
const wasOpen = prevOpenRef.current;
|
|
21253
|
+
prevOpenRef.current = open;
|
|
21254
|
+
if (open && !wasOpen) {
|
|
20821
21255
|
setStep("select-token");
|
|
20822
21256
|
setSelectedBalance(null);
|
|
20823
|
-
setAmountUsd("");
|
|
21257
|
+
setAmountUsd(prefillAmountUsd ?? "");
|
|
20824
21258
|
setError(null);
|
|
20825
21259
|
setIsConfirming(false);
|
|
20826
21260
|
setTokenChainDetails(null);
|
|
@@ -20828,7 +21262,15 @@ function BrowserWalletModal({
|
|
|
20828
21262
|
setHasSignedTransaction(false);
|
|
20829
21263
|
setIsDisconnectingWallet(false);
|
|
20830
21264
|
}
|
|
20831
|
-
}, [open]);
|
|
21265
|
+
}, [open, prefillAmountUsd]);
|
|
21266
|
+
React262.useEffect(() => {
|
|
21267
|
+
if (!prefillAmountUsd || !tokenChainDetails || step !== "input-amount") return;
|
|
21268
|
+
const minDeposit = tokenChainDetails.minimum_deposit_amount_usd || 0;
|
|
21269
|
+
const currentAmount = parseFloat(amountUsd) || 0;
|
|
21270
|
+
if (currentAmount > 0 && currentAmount < minDeposit) {
|
|
21271
|
+
setAmountUsd(minDeposit.toFixed(2));
|
|
21272
|
+
}
|
|
21273
|
+
}, [tokenChainDetails, step, prefillAmountUsd]);
|
|
20832
21274
|
React262.useEffect(() => {
|
|
20833
21275
|
if (step === "review") {
|
|
20834
21276
|
setShowTransactionDetails(false);
|
|
@@ -20946,7 +21388,7 @@ function BrowserWalletModal({
|
|
|
20946
21388
|
setError(null);
|
|
20947
21389
|
if (step === "input-amount") {
|
|
20948
21390
|
setStep("select-token");
|
|
20949
|
-
setAmountUsd("");
|
|
21391
|
+
setAmountUsd(prefillAmountUsd ?? "");
|
|
20950
21392
|
setTokenChainDetails(null);
|
|
20951
21393
|
} else if (step === "review") {
|
|
20952
21394
|
setStep("input-amount");
|
|
@@ -21032,7 +21474,6 @@ function BrowserWalletModal({
|
|
|
21032
21474
|
}
|
|
21033
21475
|
}
|
|
21034
21476
|
setIsConfirming(true);
|
|
21035
|
-
setStep("confirming");
|
|
21036
21477
|
setError(null);
|
|
21037
21478
|
try {
|
|
21038
21479
|
let txHash;
|
|
@@ -21050,16 +21491,17 @@ function BrowserWalletModal({
|
|
|
21050
21491
|
} else {
|
|
21051
21492
|
txHash = await sendEthereumTransaction(token, tokenAmount.toString());
|
|
21052
21493
|
}
|
|
21494
|
+
setReceivedUsdAtSubmission(checkoutReceivedUsd ?? "0");
|
|
21053
21495
|
setHasSignedTransaction(true);
|
|
21054
|
-
onSuccess?.(txHash);
|
|
21055
21496
|
setIsConfirming(false);
|
|
21497
|
+
setStep("confirming");
|
|
21498
|
+
onSuccess?.(txHash);
|
|
21056
21499
|
} catch (err) {
|
|
21057
21500
|
console.error("[BrowserWalletModal] Transaction error:", err);
|
|
21058
21501
|
const errorMessage = err instanceof Error ? err.message : "Transaction failed";
|
|
21059
21502
|
setError(errorMessage);
|
|
21060
21503
|
onError?.(err instanceof Error ? err : new Error(errorMessage));
|
|
21061
21504
|
setIsConfirming(false);
|
|
21062
|
-
setStep("review");
|
|
21063
21505
|
}
|
|
21064
21506
|
};
|
|
21065
21507
|
const sendEthereumTransaction = async (token, amountStr) => {
|
|
@@ -21308,7 +21750,9 @@ function BrowserWalletModal({
|
|
|
21308
21750
|
onBack: handleClose,
|
|
21309
21751
|
onClose: handleFullClose,
|
|
21310
21752
|
onDisconnectWallet: onWalletDisconnect ? () => void handleDisconnectFromSelectToken() : void 0,
|
|
21311
|
-
isDisconnectingWallet
|
|
21753
|
+
isDisconnectingWallet,
|
|
21754
|
+
checkoutAmountUsd,
|
|
21755
|
+
checkoutReceivedUsd
|
|
21312
21756
|
}
|
|
21313
21757
|
),
|
|
21314
21758
|
step === "input-amount" && selectedToken && selectedBalance && /* @__PURE__ */ jsx49(
|
|
@@ -21329,7 +21773,9 @@ function BrowserWalletModal({
|
|
|
21329
21773
|
onReview: handleReview,
|
|
21330
21774
|
onBack: handleBack,
|
|
21331
21775
|
onClose: handleFullClose,
|
|
21332
|
-
quickSelectMode: amountQuickSelect
|
|
21776
|
+
quickSelectMode: amountQuickSelect,
|
|
21777
|
+
checkoutAmountUsd,
|
|
21778
|
+
checkoutReceivedUsd
|
|
21333
21779
|
}
|
|
21334
21780
|
),
|
|
21335
21781
|
step === "review" && selectedToken && /* @__PURE__ */ jsx49(
|
|
@@ -21358,7 +21804,12 @@ function BrowserWalletModal({
|
|
|
21358
21804
|
isConfirming,
|
|
21359
21805
|
onClose: handleFullClose,
|
|
21360
21806
|
executions: depositExecutions,
|
|
21361
|
-
isPolling
|
|
21807
|
+
isPolling,
|
|
21808
|
+
onNewDeposit,
|
|
21809
|
+
onDone,
|
|
21810
|
+
paymentIntentStatus,
|
|
21811
|
+
amountReceivedUsd: checkoutReceivedUsd,
|
|
21812
|
+
amountReceivedUsdAtSubmission: receivedUsdAtSubmission
|
|
21362
21813
|
}
|
|
21363
21814
|
)
|
|
21364
21815
|
] })
|
|
@@ -21367,7 +21818,7 @@ function BrowserWalletModal({
|
|
|
21367
21818
|
}
|
|
21368
21819
|
) });
|
|
21369
21820
|
}
|
|
21370
|
-
var
|
|
21821
|
+
var WALLET_ICONS3 = {
|
|
21371
21822
|
metamask: MetamaskIcon,
|
|
21372
21823
|
phantom: PhantomIcon,
|
|
21373
21824
|
coinbase: CoinbaseIcon,
|
|
@@ -21806,10 +22257,10 @@ function WalletSelectionModal({
|
|
|
21806
22257
|
},
|
|
21807
22258
|
children: [
|
|
21808
22259
|
/* @__PURE__ */ jsxs43("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
|
|
21809
|
-
|
|
22260
|
+
WALLET_ICONS3[wallet.id] ? /* @__PURE__ */ jsx50(
|
|
21810
22261
|
WalletIconWithNetwork,
|
|
21811
22262
|
{
|
|
21812
|
-
WalletIcon:
|
|
22263
|
+
WalletIcon: WALLET_ICONS3[wallet.id],
|
|
21813
22264
|
networks: wallet.networks,
|
|
21814
22265
|
size: 40,
|
|
21815
22266
|
className: "uf-rounded-lg"
|
|
@@ -21880,10 +22331,10 @@ function WalletSelectionModal({
|
|
|
21880
22331
|
style: { minHeight: WALLET_STEP_BODY_MIN_HEIGHT },
|
|
21881
22332
|
children: [
|
|
21882
22333
|
/* @__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:
|
|
22334
|
+
/* @__PURE__ */ jsx50("div", { className: "uf-mb-2", children: WALLET_ICONS3[selectedWallet.id] ? /* @__PURE__ */ jsx50(
|
|
21884
22335
|
WalletIconWithNetwork,
|
|
21885
22336
|
{
|
|
21886
|
-
WalletIcon:
|
|
22337
|
+
WalletIcon: WALLET_ICONS3[selectedWallet.id],
|
|
21887
22338
|
networks: selectedWallet.networks,
|
|
21888
22339
|
size: 48,
|
|
21889
22340
|
className: "uf-rounded-lg"
|
|
@@ -22100,7 +22551,7 @@ function DepositModal({
|
|
|
22100
22551
|
const [view, setView] = useState27(
|
|
22101
22552
|
effectiveInitialScreen
|
|
22102
22553
|
);
|
|
22103
|
-
const resetViewTimeoutRef =
|
|
22554
|
+
const resetViewTimeoutRef = useRef72(null);
|
|
22104
22555
|
const [cardView, setCardView] = useState27(
|
|
22105
22556
|
"amount"
|
|
22106
22557
|
);
|
|
@@ -22130,7 +22581,7 @@ function DepositModal({
|
|
|
22130
22581
|
const [resolvedTheme, setResolvedTheme] = useState27(
|
|
22131
22582
|
theme === "auto" ? "dark" : theme
|
|
22132
22583
|
);
|
|
22133
|
-
|
|
22584
|
+
useEffect22(() => {
|
|
22134
22585
|
if (theme === "auto") {
|
|
22135
22586
|
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
22136
22587
|
setResolvedTheme(mediaQuery.matches ? "dark" : "light");
|
|
@@ -22159,7 +22610,7 @@ function DepositModal({
|
|
|
22159
22610
|
chainType: destinationChainType,
|
|
22160
22611
|
enabled: open
|
|
22161
22612
|
});
|
|
22162
|
-
|
|
22613
|
+
useEffect22(() => {
|
|
22163
22614
|
if (view !== "tracker" || !userId) return;
|
|
22164
22615
|
const fetchExecutions = async () => {
|
|
22165
22616
|
try {
|
|
@@ -22180,7 +22631,7 @@ function DepositModal({
|
|
|
22180
22631
|
clearInterval(pollInterval);
|
|
22181
22632
|
};
|
|
22182
22633
|
}, [view, userId, publishableKey]);
|
|
22183
|
-
|
|
22634
|
+
useEffect22(() => {
|
|
22184
22635
|
if (view !== "tracker") {
|
|
22185
22636
|
setSelectedExecution(null);
|
|
22186
22637
|
}
|
|
@@ -22290,7 +22741,7 @@ function DepositModal({
|
|
|
22290
22741
|
setBrowserWalletInfo(null);
|
|
22291
22742
|
setSelectedExecution(null);
|
|
22292
22743
|
}, [open, effectiveInitialScreen]);
|
|
22293
|
-
|
|
22744
|
+
useEffect22(
|
|
22294
22745
|
() => () => {
|
|
22295
22746
|
if (resetViewTimeoutRef.current) {
|
|
22296
22747
|
clearTimeout(resetViewTimeoutRef.current);
|
|
@@ -22682,132 +23133,790 @@ function DepositModal({
|
|
|
22682
23133
|
}
|
|
22683
23134
|
) });
|
|
22684
23135
|
}
|
|
22685
|
-
function
|
|
23136
|
+
function usePaymentIntent(params) {
|
|
23137
|
+
const {
|
|
23138
|
+
clientSecret,
|
|
23139
|
+
publishableKey,
|
|
23140
|
+
enabled = true,
|
|
23141
|
+
pollingInterval = 5e3
|
|
23142
|
+
} = params;
|
|
22686
23143
|
return useQuery9({
|
|
22687
|
-
queryKey: ["unifold", "
|
|
22688
|
-
queryFn: () =>
|
|
22689
|
-
|
|
22690
|
-
|
|
22691
|
-
|
|
22692
|
-
refetchOnWindowFocus:
|
|
22693
|
-
|
|
23144
|
+
queryKey: ["unifold", "paymentIntent", clientSecret, publishableKey],
|
|
23145
|
+
queryFn: () => retrievePaymentIntent(clientSecret, publishableKey),
|
|
23146
|
+
enabled: enabled && !!clientSecret && !!publishableKey,
|
|
23147
|
+
staleTime: 0,
|
|
23148
|
+
refetchInterval: pollingInterval || false,
|
|
23149
|
+
refetchOnWindowFocus: true,
|
|
23150
|
+
retry: 3,
|
|
23151
|
+
retryDelay: (attempt) => Math.min(1e3 * 2 ** attempt, 1e4)
|
|
22694
23152
|
});
|
|
22695
23153
|
}
|
|
22696
|
-
function
|
|
23154
|
+
function useDepositQuote(params) {
|
|
22697
23155
|
const {
|
|
23156
|
+
publishableKey,
|
|
22698
23157
|
sourceChainType,
|
|
22699
23158
|
sourceChainId,
|
|
22700
23159
|
sourceTokenAddress,
|
|
22701
|
-
|
|
22702
|
-
|
|
23160
|
+
destinationAmount,
|
|
23161
|
+
destinationChainType,
|
|
23162
|
+
destinationChainId,
|
|
23163
|
+
destinationTokenAddress,
|
|
22703
23164
|
enabled = true
|
|
22704
23165
|
} = params;
|
|
22705
|
-
const
|
|
23166
|
+
const request = {
|
|
23167
|
+
source_chain_type: sourceChainType,
|
|
23168
|
+
source_chain_id: sourceChainId,
|
|
23169
|
+
source_token_address: sourceTokenAddress,
|
|
23170
|
+
destination_amount: destinationAmount,
|
|
23171
|
+
destination_chain_type: destinationChainType,
|
|
23172
|
+
destination_chain_id: destinationChainId,
|
|
23173
|
+
destination_token_address: destinationTokenAddress
|
|
23174
|
+
};
|
|
22706
23175
|
return useQuery10({
|
|
22707
23176
|
queryKey: [
|
|
22708
23177
|
"unifold",
|
|
22709
|
-
"
|
|
22710
|
-
sourceChainType
|
|
22711
|
-
sourceChainId
|
|
22712
|
-
sourceTokenAddress
|
|
23178
|
+
"depositQuote",
|
|
23179
|
+
sourceChainType,
|
|
23180
|
+
sourceChainId,
|
|
23181
|
+
sourceTokenAddress,
|
|
23182
|
+
destinationAmount,
|
|
23183
|
+
destinationChainType,
|
|
23184
|
+
destinationChainId,
|
|
23185
|
+
destinationTokenAddress,
|
|
22713
23186
|
publishableKey
|
|
22714
23187
|
],
|
|
22715
|
-
queryFn:
|
|
22716
|
-
|
|
22717
|
-
|
|
22718
|
-
|
|
22719
|
-
|
|
22720
|
-
|
|
22721
|
-
|
|
22722
|
-
(token) => token.chains.some((chain) => {
|
|
22723
|
-
const match = chain.chain_type === sourceChainType && chain.chain_id === sourceChainId && chain.token_address.toLowerCase() === sourceTokenAddress.toLowerCase();
|
|
22724
|
-
if (match) {
|
|
22725
|
-
matchedMinUsd = chain.minimum_deposit_amount_usd;
|
|
22726
|
-
matchedProcessingTime = chain.estimated_processing_time;
|
|
22727
|
-
matchedSlippage = chain.max_slippage_percent;
|
|
22728
|
-
matchedPriceImpact = chain.estimated_price_impact_percent;
|
|
22729
|
-
}
|
|
22730
|
-
return match;
|
|
22731
|
-
})
|
|
22732
|
-
);
|
|
22733
|
-
return {
|
|
22734
|
-
isSupported: found,
|
|
22735
|
-
minimumAmountUsd: matchedMinUsd,
|
|
22736
|
-
estimatedProcessingTime: matchedProcessingTime,
|
|
22737
|
-
maxSlippagePercent: matchedSlippage,
|
|
22738
|
-
priceImpactPercent: matchedPriceImpact,
|
|
22739
|
-
errorMessage: found ? null : `${sourceTokenSymbol || "Source token"} is not a supported withdrawal token. Supported tokens include USDC, USDT, and other stablecoins.`
|
|
22740
|
-
};
|
|
22741
|
-
},
|
|
22742
|
-
enabled: enabled && hasParams,
|
|
22743
|
-
staleTime: 1e3 * 60 * 5,
|
|
22744
|
-
gcTime: 1e3 * 60 * 30,
|
|
22745
|
-
refetchOnMount: false,
|
|
22746
|
-
refetchOnWindowFocus: false
|
|
23188
|
+
queryFn: () => getDepositQuote(request, publishableKey),
|
|
23189
|
+
enabled: enabled && !!publishableKey && !!sourceChainType && !!sourceChainId && !!sourceTokenAddress && !!destinationAmount && destinationAmount !== "0" && !!destinationChainType && !!destinationChainId && !!destinationTokenAddress,
|
|
23190
|
+
staleTime: 6e4,
|
|
23191
|
+
gcTime: 5 * 6e4,
|
|
23192
|
+
refetchOnWindowFocus: false,
|
|
23193
|
+
retry: 2,
|
|
23194
|
+
retryDelay: (attempt) => Math.min(1e3 * 2 ** attempt, 5e3)
|
|
22747
23195
|
});
|
|
22748
23196
|
}
|
|
22749
|
-
function
|
|
23197
|
+
function mapDepositAddressesToWallets(depositAddresses, pi) {
|
|
23198
|
+
return depositAddresses.map((da, idx) => ({
|
|
23199
|
+
id: da.id,
|
|
23200
|
+
chain_type: da.chain_type,
|
|
23201
|
+
address_type: da.address_type,
|
|
23202
|
+
address: da.address,
|
|
23203
|
+
destination_chain_type: pi.destination_chain_type,
|
|
23204
|
+
destination_chain_id: pi.destination_chain_id,
|
|
23205
|
+
destination_token_address: pi.destination_token_address,
|
|
23206
|
+
recipient_address: pi.recipient_address,
|
|
23207
|
+
is_primary: idx === 0
|
|
23208
|
+
}));
|
|
23209
|
+
}
|
|
23210
|
+
function SkeletonButton2() {
|
|
23211
|
+
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: [
|
|
23212
|
+
/* @__PURE__ */ jsxs45("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
|
|
23213
|
+
/* @__PURE__ */ jsx522("div", { className: "uf-bg-muted uf-rounded-lg uf-w-9 uf-h-9" }),
|
|
23214
|
+
/* @__PURE__ */ jsxs45("div", { className: "uf-space-y-1.5", children: [
|
|
23215
|
+
/* @__PURE__ */ jsx522("div", { className: "uf-h-3.5 uf-w-24 uf-bg-muted uf-rounded" }),
|
|
23216
|
+
/* @__PURE__ */ jsx522("div", { className: "uf-h-3 uf-w-32 uf-bg-muted uf-rounded" })
|
|
23217
|
+
] })
|
|
23218
|
+
] }),
|
|
23219
|
+
/* @__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" }) })
|
|
23220
|
+
] });
|
|
23221
|
+
}
|
|
23222
|
+
function CheckoutModal({
|
|
23223
|
+
open,
|
|
23224
|
+
onOpenChange,
|
|
23225
|
+
clientSecret,
|
|
23226
|
+
publishableKey,
|
|
23227
|
+
modalTitle,
|
|
23228
|
+
enableConnectWallet = false,
|
|
23229
|
+
theme = "dark",
|
|
23230
|
+
onCheckoutSuccess,
|
|
23231
|
+
onCheckoutError
|
|
23232
|
+
}) {
|
|
23233
|
+
const { colors: colors2, fonts, components } = useTheme();
|
|
23234
|
+
const [view, setView] = useState28("main");
|
|
23235
|
+
const resetViewTimeoutRef = useRef82(
|
|
23236
|
+
null
|
|
23237
|
+
);
|
|
23238
|
+
const [browserWalletModalOpen, setBrowserWalletModalOpen] = useState28(false);
|
|
23239
|
+
const [browserWalletInfo, setBrowserWalletInfo] = useState28(null);
|
|
23240
|
+
const [walletSelectionModalOpen, setWalletSelectionModalOpen] = useState28(false);
|
|
23241
|
+
const [browserWalletChainType, setBrowserWalletChainType] = useState28(() => getStoredWalletChainType());
|
|
23242
|
+
const isMobileView = useIsMobileViewport();
|
|
23243
|
+
const [resolvedTheme, setResolvedTheme] = useState28(
|
|
23244
|
+
theme === "auto" ? "dark" : theme
|
|
23245
|
+
);
|
|
23246
|
+
useEffect232(() => {
|
|
23247
|
+
if (theme === "auto") {
|
|
23248
|
+
const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
|
|
23249
|
+
setResolvedTheme(mediaQuery.matches ? "dark" : "light");
|
|
23250
|
+
const handler = (e) => {
|
|
23251
|
+
setResolvedTheme(e.matches ? "dark" : "light");
|
|
23252
|
+
};
|
|
23253
|
+
mediaQuery.addEventListener("change", handler);
|
|
23254
|
+
return () => mediaQuery.removeEventListener("change", handler);
|
|
23255
|
+
} else {
|
|
23256
|
+
setResolvedTheme(theme);
|
|
23257
|
+
}
|
|
23258
|
+
}, [theme]);
|
|
23259
|
+
const themeClass = resolvedTheme === "dark" ? "uf-dark" : "";
|
|
22750
23260
|
const {
|
|
22751
|
-
|
|
22752
|
-
|
|
22753
|
-
|
|
22754
|
-
|
|
23261
|
+
data: paymentIntent,
|
|
23262
|
+
isLoading: piLoading,
|
|
23263
|
+
error: piError
|
|
23264
|
+
} = usePaymentIntent({
|
|
23265
|
+
clientSecret,
|
|
22755
23266
|
publishableKey,
|
|
22756
|
-
enabled
|
|
22757
|
-
|
|
22758
|
-
|
|
22759
|
-
|
|
22760
|
-
|
|
22761
|
-
|
|
22762
|
-
|
|
22763
|
-
|
|
22764
|
-
|
|
22765
|
-
|
|
22766
|
-
|
|
22767
|
-
|
|
22768
|
-
|
|
22769
|
-
|
|
22770
|
-
|
|
22771
|
-
|
|
22772
|
-
|
|
22773
|
-
|
|
22774
|
-
|
|
22775
|
-
|
|
23267
|
+
enabled: open && !!clientSecret,
|
|
23268
|
+
pollingInterval: 5e3
|
|
23269
|
+
});
|
|
23270
|
+
const { projectConfig } = useProjectConfig({
|
|
23271
|
+
publishableKey,
|
|
23272
|
+
enabled: open
|
|
23273
|
+
});
|
|
23274
|
+
const prevStatusRef = useRef82(null);
|
|
23275
|
+
useEffect232(() => {
|
|
23276
|
+
if (!paymentIntent) return;
|
|
23277
|
+
const prev = prevStatusRef.current;
|
|
23278
|
+
prevStatusRef.current = paymentIntent.status;
|
|
23279
|
+
if (prev && prev !== paymentIntent.status && paymentIntent.status === "succeeded") {
|
|
23280
|
+
if (!browserWalletModalOpen) {
|
|
23281
|
+
setView("main");
|
|
23282
|
+
}
|
|
23283
|
+
onCheckoutSuccess?.({
|
|
23284
|
+
paymentIntentId: paymentIntent.id,
|
|
23285
|
+
status: paymentIntent.status
|
|
23286
|
+
});
|
|
23287
|
+
}
|
|
23288
|
+
}, [paymentIntent, onCheckoutSuccess, browserWalletModalOpen]);
|
|
23289
|
+
const wallets = useMemo102(() => {
|
|
23290
|
+
if (!paymentIntent) return [];
|
|
23291
|
+
return mapDepositAddressesToWallets(
|
|
23292
|
+
paymentIntent.deposit_addresses,
|
|
23293
|
+
paymentIntent
|
|
23294
|
+
);
|
|
23295
|
+
}, [paymentIntent]);
|
|
23296
|
+
const formatCryptoAmount = useMemo102(() => {
|
|
23297
|
+
if (!paymentIntent) return (_) => "";
|
|
23298
|
+
const decimals = paymentIntent.destination_token_decimals ?? 6;
|
|
23299
|
+
const symbol = paymentIntent.currency.toUpperCase();
|
|
23300
|
+
return (baseUnits) => {
|
|
23301
|
+
const num = Number(baseUnits) / 10 ** decimals;
|
|
23302
|
+
const formatted = num % 1 === 0 ? num.toFixed(0) : num.toFixed(2);
|
|
23303
|
+
return `${formatted} ${symbol}`;
|
|
23304
|
+
};
|
|
23305
|
+
}, [paymentIntent]);
|
|
23306
|
+
const remainingAmountUsd = useMemo102(() => {
|
|
23307
|
+
if (!paymentIntent) return void 0;
|
|
23308
|
+
const total = parseFloat(paymentIntent.amount_usd);
|
|
23309
|
+
const received = parseFloat(paymentIntent.amount_received_usd);
|
|
23310
|
+
if (isNaN(total) || isNaN(received)) return paymentIntent.amount_usd;
|
|
23311
|
+
const remaining = total - received;
|
|
23312
|
+
return remaining > 0 ? remaining.toFixed(2) : "0.00";
|
|
23313
|
+
}, [paymentIntent]);
|
|
23314
|
+
const remainingCrypto = useMemo102(() => {
|
|
23315
|
+
if (!paymentIntent) return void 0;
|
|
23316
|
+
const total = BigInt(paymentIntent.amount);
|
|
23317
|
+
const received = BigInt(paymentIntent.amount_received);
|
|
23318
|
+
const remaining = total - received;
|
|
23319
|
+
return remaining > 0n ? remaining.toString() : "0";
|
|
23320
|
+
}, [paymentIntent]);
|
|
23321
|
+
const [selectedSource, setSelectedSource] = useState28(null);
|
|
23322
|
+
const quoteDestinationAmount = useMemo102(() => {
|
|
23323
|
+
if (!paymentIntent || !selectedSource) return "0";
|
|
23324
|
+
const remaining = BigInt(paymentIntent.amount) - BigInt(paymentIntent.amount_received);
|
|
23325
|
+
const totalBaseUnits = Number(paymentIntent.amount);
|
|
23326
|
+
const totalUsd = parseFloat(paymentIntent.amount_usd);
|
|
23327
|
+
const baseUnitsPerUsd = totalUsd > 0 ? totalBaseUnits / totalUsd : 0;
|
|
23328
|
+
const minUsd = Math.max(selectedSource.minimumDepositAmountUsd, 3);
|
|
23329
|
+
const minDepositBaseUnits = BigInt(Math.ceil(minUsd * baseUnitsPerUsd));
|
|
23330
|
+
const effective = remaining > minDepositBaseUnits ? remaining : minDepositBaseUnits;
|
|
23331
|
+
return effective > 0n ? effective.toString() : "0";
|
|
23332
|
+
}, [paymentIntent, selectedSource]);
|
|
23333
|
+
const { data: sourceQuote } = useDepositQuote({
|
|
23334
|
+
publishableKey,
|
|
23335
|
+
sourceChainType: selectedSource?.chainType ?? "",
|
|
23336
|
+
sourceChainId: selectedSource?.chainId ?? "",
|
|
23337
|
+
sourceTokenAddress: selectedSource?.tokenAddress ?? "",
|
|
23338
|
+
destinationAmount: quoteDestinationAmount,
|
|
23339
|
+
destinationChainType: paymentIntent?.destination_chain_type ?? "",
|
|
23340
|
+
destinationChainId: paymentIntent?.destination_chain_id ?? "",
|
|
23341
|
+
destinationTokenAddress: paymentIntent?.destination_token_address ?? "",
|
|
23342
|
+
enabled: open && view === "transfer" && !!paymentIntent && !!selectedSource && quoteDestinationAmount !== "0"
|
|
23343
|
+
});
|
|
23344
|
+
const handleBrowserWalletClick = useCallback52(
|
|
23345
|
+
(walletInfo) => {
|
|
23346
|
+
const walletChainType = walletInfo.type === "phantom-solana" || walletInfo.type === "solflare" || walletInfo.type === "backpack" || walletInfo.type === "glow" ? "solana" : "ethereum";
|
|
23347
|
+
setStoredWalletChainType(walletChainType);
|
|
23348
|
+
setBrowserWalletChainType(walletChainType);
|
|
23349
|
+
const matchingDepositWallet = wallets.find(
|
|
23350
|
+
(w) => w.chain_type === walletChainType
|
|
22776
23351
|
);
|
|
22777
|
-
if (
|
|
22778
|
-
|
|
22779
|
-
|
|
22780
|
-
|
|
22781
|
-
|
|
22782
|
-
|
|
22783
|
-
const whole = raw / divisor;
|
|
22784
|
-
const frac = raw % divisor;
|
|
22785
|
-
const fracStr = frac.toString().padStart(decimals, "0").replace(/0+$/, "");
|
|
22786
|
-
const balanceHuman = fracStr ? `${whole}.${fracStr}` : whole.toString();
|
|
22787
|
-
return {
|
|
22788
|
-
balanceBaseUnit: baseUnit,
|
|
22789
|
-
balanceHuman,
|
|
22790
|
-
balanceUsd: res.balance.amount_usd,
|
|
22791
|
-
exchangeRate: res.balance.exchange_rate,
|
|
22792
|
-
decimals,
|
|
22793
|
-
symbol
|
|
22794
|
-
};
|
|
23352
|
+
if (!matchingDepositWallet) {
|
|
23353
|
+
onCheckoutError?.({
|
|
23354
|
+
message: `Unable to pay from ${walletChainType}. Please try a different wallet.`,
|
|
23355
|
+
code: "NO_DEPOSIT_ADDRESS"
|
|
23356
|
+
});
|
|
23357
|
+
return;
|
|
22795
23358
|
}
|
|
22796
|
-
|
|
23359
|
+
setBrowserWalletInfo({
|
|
23360
|
+
...walletInfo,
|
|
23361
|
+
depositWallet: matchingDepositWallet
|
|
23362
|
+
});
|
|
23363
|
+
setBrowserWalletModalOpen(true);
|
|
22797
23364
|
},
|
|
22798
|
-
|
|
22799
|
-
|
|
22800
|
-
|
|
22801
|
-
|
|
22802
|
-
|
|
22803
|
-
|
|
22804
|
-
|
|
22805
|
-
|
|
22806
|
-
|
|
22807
|
-
|
|
22808
|
-
|
|
22809
|
-
|
|
22810
|
-
|
|
23365
|
+
[wallets, onCheckoutError]
|
|
23366
|
+
);
|
|
23367
|
+
const handleWalletConnectClick = useCallback52(() => {
|
|
23368
|
+
setWalletSelectionModalOpen(true);
|
|
23369
|
+
}, []);
|
|
23370
|
+
const handleWalletConnected = useCallback52(
|
|
23371
|
+
(walletInfo) => {
|
|
23372
|
+
const walletChainType = walletInfo.type === "phantom-solana" || walletInfo.type === "solflare" || walletInfo.type === "backpack" || walletInfo.type === "glow" ? "solana" : "ethereum";
|
|
23373
|
+
setStoredWalletChainType(walletChainType);
|
|
23374
|
+
setBrowserWalletChainType(walletChainType);
|
|
23375
|
+
const matchingDepositWallet = wallets.find(
|
|
23376
|
+
(w) => w.chain_type === walletChainType
|
|
23377
|
+
);
|
|
23378
|
+
if (!matchingDepositWallet) {
|
|
23379
|
+
onCheckoutError?.({
|
|
23380
|
+
message: `Unable to pay from ${walletChainType}. Please try a different wallet.`,
|
|
23381
|
+
code: "NO_DEPOSIT_ADDRESS"
|
|
23382
|
+
});
|
|
23383
|
+
setWalletSelectionModalOpen(false);
|
|
23384
|
+
return;
|
|
23385
|
+
}
|
|
23386
|
+
setBrowserWalletInfo({
|
|
23387
|
+
...walletInfo,
|
|
23388
|
+
depositWallet: matchingDepositWallet
|
|
23389
|
+
});
|
|
23390
|
+
setWalletSelectionModalOpen(false);
|
|
23391
|
+
setBrowserWalletModalOpen(true);
|
|
23392
|
+
},
|
|
23393
|
+
[wallets, onCheckoutError]
|
|
23394
|
+
);
|
|
23395
|
+
const handleWalletDisconnect = useCallback52(() => {
|
|
23396
|
+
setUserDisconnectedWallet(true);
|
|
23397
|
+
clearStoredWalletChainType();
|
|
23398
|
+
setBrowserWalletChainType(void 0);
|
|
23399
|
+
setBrowserWalletInfo(null);
|
|
23400
|
+
setBrowserWalletModalOpen(false);
|
|
23401
|
+
}, []);
|
|
23402
|
+
const handleClose = useCallback52(() => {
|
|
23403
|
+
onOpenChange(false);
|
|
23404
|
+
if (resetViewTimeoutRef.current) {
|
|
23405
|
+
clearTimeout(resetViewTimeoutRef.current);
|
|
23406
|
+
}
|
|
23407
|
+
resetViewTimeoutRef.current = setTimeout(() => {
|
|
23408
|
+
setView("main");
|
|
23409
|
+
setBrowserWalletInfo(null);
|
|
23410
|
+
resetViewTimeoutRef.current = null;
|
|
23411
|
+
}, 200);
|
|
23412
|
+
}, [onOpenChange]);
|
|
23413
|
+
useLayoutEffect32(() => {
|
|
23414
|
+
if (!open) return;
|
|
23415
|
+
if (resetViewTimeoutRef.current) {
|
|
23416
|
+
clearTimeout(resetViewTimeoutRef.current);
|
|
23417
|
+
resetViewTimeoutRef.current = null;
|
|
23418
|
+
}
|
|
23419
|
+
setView("main");
|
|
23420
|
+
setBrowserWalletInfo(null);
|
|
23421
|
+
}, [open]);
|
|
23422
|
+
useEffect232(
|
|
23423
|
+
() => () => {
|
|
23424
|
+
if (resetViewTimeoutRef.current) {
|
|
23425
|
+
clearTimeout(resetViewTimeoutRef.current);
|
|
23426
|
+
}
|
|
23427
|
+
},
|
|
23428
|
+
[]
|
|
23429
|
+
);
|
|
23430
|
+
const handleBack = useCallback52(() => {
|
|
23431
|
+
setView("main");
|
|
23432
|
+
}, []);
|
|
23433
|
+
const poweredByFooter = /* @__PURE__ */ jsx522("div", { className: "uf-pt-3", children: /* @__PURE__ */ jsx522(
|
|
23434
|
+
PoweredByUnifold,
|
|
23435
|
+
{
|
|
23436
|
+
color: colors2.foregroundMuted,
|
|
23437
|
+
className: "uf-flex uf-justify-center uf-shrink-0"
|
|
23438
|
+
}
|
|
23439
|
+
) });
|
|
23440
|
+
const progressSection = paymentIntent ? (() => {
|
|
23441
|
+
const received = parseFloat(paymentIntent.amount_received_usd);
|
|
23442
|
+
const total = parseFloat(paymentIntent.amount_usd);
|
|
23443
|
+
const remaining = Math.max(total - received, 0);
|
|
23444
|
+
const pct = total > 0 ? Math.min(received / total * 100, 100) : 0;
|
|
23445
|
+
const hasPartial = received > 0;
|
|
23446
|
+
const amountStr = paymentIntent.amount_usd;
|
|
23447
|
+
const dynamicFontSize = `${Math.max(3.75 - amountStr.length * 0.15, 2)}rem`;
|
|
23448
|
+
return /* @__PURE__ */ jsxs45("div", { className: "uf-text-center uf-py-2 uf-space-y-1", children: [
|
|
23449
|
+
paymentIntent.description && /* @__PURE__ */ jsx522(
|
|
23450
|
+
"div",
|
|
23451
|
+
{
|
|
23452
|
+
className: "uf-text-xs",
|
|
23453
|
+
style: {
|
|
23454
|
+
color: colors2.foregroundMuted,
|
|
23455
|
+
fontFamily: fonts.regular
|
|
23456
|
+
},
|
|
23457
|
+
children: paymentIntent.description
|
|
23458
|
+
}
|
|
23459
|
+
),
|
|
23460
|
+
/* @__PURE__ */ jsxs45("div", { className: "uf-flex uf-items-center uf-justify-center", children: [
|
|
23461
|
+
/* @__PURE__ */ jsx522(
|
|
23462
|
+
"span",
|
|
23463
|
+
{
|
|
23464
|
+
className: "uf-mr-1",
|
|
23465
|
+
style: {
|
|
23466
|
+
fontSize: `calc(${dynamicFontSize} * 0.6)`,
|
|
23467
|
+
color: colors2.foregroundMuted,
|
|
23468
|
+
fontFamily: fonts.regular
|
|
23469
|
+
},
|
|
23470
|
+
children: "$"
|
|
23471
|
+
}
|
|
23472
|
+
),
|
|
23473
|
+
/* @__PURE__ */ jsx522(
|
|
23474
|
+
"span",
|
|
23475
|
+
{
|
|
23476
|
+
style: {
|
|
23477
|
+
fontSize: dynamicFontSize,
|
|
23478
|
+
color: colors2.foreground,
|
|
23479
|
+
fontFamily: fonts.regular,
|
|
23480
|
+
lineHeight: 1.1
|
|
23481
|
+
},
|
|
23482
|
+
children: amountStr
|
|
23483
|
+
}
|
|
23484
|
+
)
|
|
23485
|
+
] }),
|
|
23486
|
+
/* @__PURE__ */ jsx522(
|
|
23487
|
+
"div",
|
|
23488
|
+
{
|
|
23489
|
+
className: "uf-text-xs",
|
|
23490
|
+
style: {
|
|
23491
|
+
color: colors2.foregroundMuted,
|
|
23492
|
+
fontFamily: fonts.regular
|
|
23493
|
+
},
|
|
23494
|
+
children: paymentIntent.currency.toUpperCase()
|
|
23495
|
+
}
|
|
23496
|
+
),
|
|
23497
|
+
hasPartial && /* @__PURE__ */ jsxs45("div", { className: "uf-pt-2 uf-space-y-1.5", children: [
|
|
23498
|
+
/* @__PURE__ */ jsx522(
|
|
23499
|
+
"div",
|
|
23500
|
+
{
|
|
23501
|
+
className: "uf-w-full uf-h-1.5 uf-rounded-full uf-overflow-hidden",
|
|
23502
|
+
style: { backgroundColor: colors2.border },
|
|
23503
|
+
children: /* @__PURE__ */ jsx522(
|
|
23504
|
+
"div",
|
|
23505
|
+
{
|
|
23506
|
+
className: "uf-h-full uf-rounded-full uf-transition-all uf-duration-500",
|
|
23507
|
+
style: {
|
|
23508
|
+
width: `${pct}%`,
|
|
23509
|
+
backgroundColor: paymentIntent.status === "succeeded" ? "rgb(34, 197, 94)" : colors2.primary
|
|
23510
|
+
}
|
|
23511
|
+
}
|
|
23512
|
+
)
|
|
23513
|
+
}
|
|
23514
|
+
),
|
|
23515
|
+
/* @__PURE__ */ jsxs45(
|
|
23516
|
+
"div",
|
|
23517
|
+
{
|
|
23518
|
+
className: "uf-text-xs",
|
|
23519
|
+
style: {
|
|
23520
|
+
color: colors2.foregroundMuted,
|
|
23521
|
+
fontFamily: fonts.regular
|
|
23522
|
+
},
|
|
23523
|
+
children: [
|
|
23524
|
+
"$",
|
|
23525
|
+
paymentIntent.amount_received_usd,
|
|
23526
|
+
" / $",
|
|
23527
|
+
amountStr,
|
|
23528
|
+
" received",
|
|
23529
|
+
remaining > 0 && paymentIntent.status !== "succeeded" && /* @__PURE__ */ jsxs45("span", { style: { color: colors2.foreground, fontFamily: fonts.medium }, children: [
|
|
23530
|
+
" ",
|
|
23531
|
+
"\xB7 $",
|
|
23532
|
+
remaining.toFixed(2),
|
|
23533
|
+
" remaining"
|
|
23534
|
+
] })
|
|
23535
|
+
]
|
|
23536
|
+
}
|
|
23537
|
+
)
|
|
23538
|
+
] }),
|
|
23539
|
+
paymentIntent.status !== "requires_payment" && /* @__PURE__ */ jsx522("div", { className: "uf-pt-1", children: /* @__PURE__ */ jsx522(
|
|
23540
|
+
"span",
|
|
23541
|
+
{
|
|
23542
|
+
className: "uf-text-xs uf-font-medium uf-px-2.5 uf-py-1 uf-rounded-full uf-inline-block",
|
|
23543
|
+
style: {
|
|
23544
|
+
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)",
|
|
23545
|
+
color: paymentIntent.status === "succeeded" ? "rgb(34, 197, 94)" : paymentIntent.status === "processing" ? "rgb(59, 130, 246)" : "rgb(239, 68, 68)",
|
|
23546
|
+
fontFamily: fonts.medium
|
|
23547
|
+
},
|
|
23548
|
+
children: paymentIntent.status === "succeeded" ? "Payment Complete" : paymentIntent.status === "processing" ? "Partial Payment Received" : paymentIntent.status === "canceled" ? "Canceled" : paymentIntent.status === "expired" ? "Expired" : paymentIntent.status
|
|
23549
|
+
}
|
|
23550
|
+
) })
|
|
23551
|
+
] });
|
|
23552
|
+
})() : null;
|
|
23553
|
+
return /* @__PURE__ */ jsx522(PortalContainerProvider, { value: null, children: /* @__PURE__ */ jsxs45(Dialog2, { open, onOpenChange: handleClose, modal: true, children: [
|
|
23554
|
+
/* @__PURE__ */ jsx522(
|
|
23555
|
+
DialogContent2,
|
|
23556
|
+
{
|
|
23557
|
+
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}`,
|
|
23558
|
+
style: { backgroundColor: colors2.background },
|
|
23559
|
+
onPointerDownOutside: (e) => e.preventDefault(),
|
|
23560
|
+
onInteractOutside: (e) => e.preventDefault(),
|
|
23561
|
+
children: /* @__PURE__ */ jsx522(ThemeStyleInjector, { children: view === "main" ? /* @__PURE__ */ jsxs45(Fragment10, { children: [
|
|
23562
|
+
/* @__PURE__ */ jsx522(
|
|
23563
|
+
DepositHeader,
|
|
23564
|
+
{
|
|
23565
|
+
title: modalTitle || "Checkout",
|
|
23566
|
+
showClose: true,
|
|
23567
|
+
onClose: handleClose
|
|
23568
|
+
}
|
|
23569
|
+
),
|
|
23570
|
+
/* @__PURE__ */ jsxs45("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
|
|
23571
|
+
piLoading ? /* @__PURE__ */ jsxs45("div", { className: "uf-space-y-3", children: [
|
|
23572
|
+
/* @__PURE__ */ jsx522(
|
|
23573
|
+
"div",
|
|
23574
|
+
{
|
|
23575
|
+
className: "uf-rounded-xl uf-p-4 uf-animate-pulse",
|
|
23576
|
+
style: {
|
|
23577
|
+
backgroundColor: components.card.backgroundColor,
|
|
23578
|
+
borderRadius: components.card.borderRadius,
|
|
23579
|
+
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
23580
|
+
},
|
|
23581
|
+
children: /* @__PURE__ */ jsxs45("div", { className: "uf-flex uf-flex-col uf-items-center uf-gap-2", children: [
|
|
23582
|
+
/* @__PURE__ */ jsx522(
|
|
23583
|
+
"div",
|
|
23584
|
+
{
|
|
23585
|
+
className: "uf-h-8 uf-w-24 uf-rounded",
|
|
23586
|
+
style: {
|
|
23587
|
+
backgroundColor: components.card.borderColor
|
|
23588
|
+
}
|
|
23589
|
+
}
|
|
23590
|
+
),
|
|
23591
|
+
/* @__PURE__ */ jsx522(
|
|
23592
|
+
"div",
|
|
23593
|
+
{
|
|
23594
|
+
className: "uf-h-4 uf-w-16 uf-rounded",
|
|
23595
|
+
style: {
|
|
23596
|
+
backgroundColor: components.card.borderColor
|
|
23597
|
+
}
|
|
23598
|
+
}
|
|
23599
|
+
)
|
|
23600
|
+
] })
|
|
23601
|
+
}
|
|
23602
|
+
),
|
|
23603
|
+
/* @__PURE__ */ jsx522(SkeletonButton2, {}),
|
|
23604
|
+
/* @__PURE__ */ jsx522(SkeletonButton2, {})
|
|
23605
|
+
] }) : 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: [
|
|
23606
|
+
/* @__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" }) }),
|
|
23607
|
+
/* @__PURE__ */ jsx522(
|
|
23608
|
+
"h3",
|
|
23609
|
+
{
|
|
23610
|
+
className: "uf-text-lg uf-font-semibold uf-mb-2",
|
|
23611
|
+
style: {
|
|
23612
|
+
color: colors2.foreground,
|
|
23613
|
+
fontFamily: fonts.semibold
|
|
23614
|
+
},
|
|
23615
|
+
children: "Unable to Load Checkout"
|
|
23616
|
+
}
|
|
23617
|
+
),
|
|
23618
|
+
/* @__PURE__ */ jsx522(
|
|
23619
|
+
"p",
|
|
23620
|
+
{
|
|
23621
|
+
className: "uf-text-sm uf-max-w-[280px]",
|
|
23622
|
+
style: {
|
|
23623
|
+
color: colors2.foregroundMuted,
|
|
23624
|
+
fontFamily: fonts.regular
|
|
23625
|
+
},
|
|
23626
|
+
children: piError instanceof Error ? piError.message : "Something went wrong. Please try again."
|
|
23627
|
+
}
|
|
23628
|
+
)
|
|
23629
|
+
] }) : paymentIntent ? /* @__PURE__ */ jsxs45("div", { className: "uf-space-y-3", children: [
|
|
23630
|
+
progressSection,
|
|
23631
|
+
(paymentIntent.status === "requires_payment" || paymentIntent.status === "processing") && /* @__PURE__ */ jsxs45(Fragment10, { children: [
|
|
23632
|
+
/* @__PURE__ */ jsx522(
|
|
23633
|
+
TransferCryptoButton,
|
|
23634
|
+
{
|
|
23635
|
+
onClick: () => setView("transfer"),
|
|
23636
|
+
title: "Transfer Crypto",
|
|
23637
|
+
subtitle: "Send from any wallet or exchange",
|
|
23638
|
+
featuredTokens: projectConfig?.transfer_crypto.networks
|
|
23639
|
+
}
|
|
23640
|
+
),
|
|
23641
|
+
enableConnectWallet && !isMobileView && /* @__PURE__ */ jsx522(
|
|
23642
|
+
BrowserWalletButton,
|
|
23643
|
+
{
|
|
23644
|
+
onClick: handleBrowserWalletClick,
|
|
23645
|
+
onConnectClick: handleWalletConnectClick,
|
|
23646
|
+
onDisconnect: handleWalletDisconnect,
|
|
23647
|
+
chainType: browserWalletChainType,
|
|
23648
|
+
publishableKey
|
|
23649
|
+
}
|
|
23650
|
+
)
|
|
23651
|
+
] })
|
|
23652
|
+
] }) : null,
|
|
23653
|
+
poweredByFooter
|
|
23654
|
+
] })
|
|
23655
|
+
] }) : view === "transfer" ? /* @__PURE__ */ jsxs45(Fragment10, { children: [
|
|
23656
|
+
/* @__PURE__ */ jsx522(
|
|
23657
|
+
DepositHeader,
|
|
23658
|
+
{
|
|
23659
|
+
title: `Pay $${remainingAmountUsd ?? paymentIntent?.amount_usd ?? ""}`,
|
|
23660
|
+
showBack: true,
|
|
23661
|
+
onBack: handleBack,
|
|
23662
|
+
onClose: handleClose
|
|
23663
|
+
}
|
|
23664
|
+
),
|
|
23665
|
+
/* @__PURE__ */ jsxs45("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
|
|
23666
|
+
paymentIntent ? /* @__PURE__ */ jsxs45(Fragment10, { children: [
|
|
23667
|
+
/* @__PURE__ */ jsxs45(
|
|
23668
|
+
"div",
|
|
23669
|
+
{
|
|
23670
|
+
className: "uf-rounded-lg uf-px-3 uf-py-2 uf-flex uf-items-center uf-justify-between",
|
|
23671
|
+
style: {
|
|
23672
|
+
backgroundColor: components.card.backgroundColor,
|
|
23673
|
+
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`,
|
|
23674
|
+
borderRadius: components.card.borderRadius
|
|
23675
|
+
},
|
|
23676
|
+
children: [
|
|
23677
|
+
/* @__PURE__ */ jsx522(
|
|
23678
|
+
"span",
|
|
23679
|
+
{
|
|
23680
|
+
className: "uf-text-xs",
|
|
23681
|
+
style: {
|
|
23682
|
+
color: colors2.foregroundMuted,
|
|
23683
|
+
fontFamily: fonts.regular
|
|
23684
|
+
},
|
|
23685
|
+
children: parseFloat(paymentIntent.amount_received_usd) > 0 ? `$${paymentIntent.amount_received_usd} / $${paymentIntent.amount_usd} received` : "Amount due"
|
|
23686
|
+
}
|
|
23687
|
+
),
|
|
23688
|
+
/* @__PURE__ */ jsxs45(
|
|
23689
|
+
"span",
|
|
23690
|
+
{
|
|
23691
|
+
className: "uf-text-sm uf-font-semibold",
|
|
23692
|
+
style: {
|
|
23693
|
+
color: colors2.foreground,
|
|
23694
|
+
fontFamily: fonts.semibold
|
|
23695
|
+
},
|
|
23696
|
+
children: [
|
|
23697
|
+
formatCryptoAmount(remainingCrypto ?? paymentIntent.amount),
|
|
23698
|
+
/* @__PURE__ */ jsxs45(
|
|
23699
|
+
"span",
|
|
23700
|
+
{
|
|
23701
|
+
className: "uf-text-xs uf-font-normal uf-ml-1",
|
|
23702
|
+
style: { color: colors2.foregroundMuted },
|
|
23703
|
+
children: [
|
|
23704
|
+
"($",
|
|
23705
|
+
remainingAmountUsd ?? paymentIntent.amount_usd,
|
|
23706
|
+
")"
|
|
23707
|
+
]
|
|
23708
|
+
}
|
|
23709
|
+
)
|
|
23710
|
+
]
|
|
23711
|
+
}
|
|
23712
|
+
)
|
|
23713
|
+
]
|
|
23714
|
+
}
|
|
23715
|
+
),
|
|
23716
|
+
/* @__PURE__ */ jsx522(
|
|
23717
|
+
TransferCryptoSingleInput,
|
|
23718
|
+
{
|
|
23719
|
+
userId: paymentIntent.user_id || "",
|
|
23720
|
+
publishableKey,
|
|
23721
|
+
clientSecret,
|
|
23722
|
+
recipientAddress: paymentIntent.recipient_address,
|
|
23723
|
+
destinationChainType: paymentIntent.destination_chain_type,
|
|
23724
|
+
destinationChainId: paymentIntent.destination_chain_id,
|
|
23725
|
+
destinationTokenAddress: paymentIntent.destination_token_address,
|
|
23726
|
+
depositConfirmationMode: "auto_ui",
|
|
23727
|
+
wallets,
|
|
23728
|
+
onSourceTokenChange: setSelectedSource,
|
|
23729
|
+
checkoutQuote: sourceQuote ? {
|
|
23730
|
+
sourceAmount: sourceQuote.source_amount,
|
|
23731
|
+
sourceTokenDecimals: sourceQuote.source_token_decimals,
|
|
23732
|
+
sourceTokenSymbol: sourceQuote.source_token_symbol,
|
|
23733
|
+
sourceAmountUsd: sourceQuote.source_amount_usd
|
|
23734
|
+
} : null
|
|
23735
|
+
}
|
|
23736
|
+
)
|
|
23737
|
+
] }) : /* @__PURE__ */ jsx522(SkeletonButton2, {}),
|
|
23738
|
+
poweredByFooter
|
|
23739
|
+
] })
|
|
23740
|
+
] }) : null })
|
|
23741
|
+
}
|
|
23742
|
+
),
|
|
23743
|
+
/* @__PURE__ */ jsx522(
|
|
23744
|
+
WalletSelectionModal,
|
|
23745
|
+
{
|
|
23746
|
+
open: walletSelectionModalOpen,
|
|
23747
|
+
onOpenChange: setWalletSelectionModalOpen,
|
|
23748
|
+
onWalletConnected: handleWalletConnected,
|
|
23749
|
+
onClose: () => setWalletSelectionModalOpen(false),
|
|
23750
|
+
theme: resolvedTheme
|
|
23751
|
+
}
|
|
23752
|
+
),
|
|
23753
|
+
browserWalletInfo && browserWalletInfo.depositWallet && /* @__PURE__ */ jsx522(
|
|
23754
|
+
BrowserWalletModal,
|
|
23755
|
+
{
|
|
23756
|
+
open: browserWalletModalOpen,
|
|
23757
|
+
onOpenChange: setBrowserWalletModalOpen,
|
|
23758
|
+
onFullClose: handleClose,
|
|
23759
|
+
walletInfo: browserWalletInfo,
|
|
23760
|
+
depositWallet: browserWalletInfo.depositWallet,
|
|
23761
|
+
userId: paymentIntent?.user_id || "",
|
|
23762
|
+
publishableKey,
|
|
23763
|
+
clientSecret,
|
|
23764
|
+
theme: resolvedTheme,
|
|
23765
|
+
prefillAmountUsd: remainingAmountUsd,
|
|
23766
|
+
checkoutAmountUsd: paymentIntent?.amount_usd,
|
|
23767
|
+
checkoutReceivedUsd: paymentIntent?.amount_received_usd,
|
|
23768
|
+
onSuccess: (txHash) => {
|
|
23769
|
+
onCheckoutSuccess?.({
|
|
23770
|
+
paymentIntentId: paymentIntent?.id || "",
|
|
23771
|
+
status: "processing"
|
|
23772
|
+
});
|
|
23773
|
+
},
|
|
23774
|
+
onError: (error) => {
|
|
23775
|
+
onCheckoutError?.({
|
|
23776
|
+
message: error.message,
|
|
23777
|
+
error
|
|
23778
|
+
});
|
|
23779
|
+
},
|
|
23780
|
+
onWalletDisconnect: handleWalletDisconnect,
|
|
23781
|
+
onNewDeposit: () => {
|
|
23782
|
+
setBrowserWalletModalOpen(false);
|
|
23783
|
+
setView("main");
|
|
23784
|
+
},
|
|
23785
|
+
onDone: () => {
|
|
23786
|
+
setBrowserWalletModalOpen(false);
|
|
23787
|
+
setView("main");
|
|
23788
|
+
},
|
|
23789
|
+
paymentIntentStatus: paymentIntent?.status
|
|
23790
|
+
}
|
|
23791
|
+
)
|
|
23792
|
+
] }) });
|
|
23793
|
+
}
|
|
23794
|
+
function useSupportedDestinationTokens(publishableKey, enabled = true) {
|
|
23795
|
+
return useQuery11({
|
|
23796
|
+
queryKey: ["unifold", "supportedDestinationTokens", publishableKey],
|
|
23797
|
+
queryFn: () => getSupportedDestinationTokens(publishableKey),
|
|
23798
|
+
staleTime: 1e3 * 60 * 5,
|
|
23799
|
+
gcTime: 1e3 * 60 * 30,
|
|
23800
|
+
refetchOnMount: false,
|
|
23801
|
+
refetchOnWindowFocus: false,
|
|
23802
|
+
enabled
|
|
23803
|
+
});
|
|
23804
|
+
}
|
|
23805
|
+
function useSourceTokenValidation(params) {
|
|
23806
|
+
const {
|
|
23807
|
+
sourceChainType,
|
|
23808
|
+
sourceChainId,
|
|
23809
|
+
sourceTokenAddress,
|
|
23810
|
+
sourceTokenSymbol,
|
|
23811
|
+
publishableKey,
|
|
23812
|
+
enabled = true
|
|
23813
|
+
} = params;
|
|
23814
|
+
const hasParams = !!sourceChainType && !!sourceChainId && !!sourceTokenAddress;
|
|
23815
|
+
return useQuery12({
|
|
23816
|
+
queryKey: [
|
|
23817
|
+
"unifold",
|
|
23818
|
+
"sourceTokenValidation",
|
|
23819
|
+
sourceChainType ?? null,
|
|
23820
|
+
sourceChainId ?? null,
|
|
23821
|
+
sourceTokenAddress ?? null,
|
|
23822
|
+
publishableKey
|
|
23823
|
+
],
|
|
23824
|
+
queryFn: async () => {
|
|
23825
|
+
const res = await getSupportedDepositTokens(publishableKey);
|
|
23826
|
+
let matchedMinUsd = null;
|
|
23827
|
+
let matchedProcessingTime = null;
|
|
23828
|
+
let matchedSlippage = null;
|
|
23829
|
+
let matchedPriceImpact = null;
|
|
23830
|
+
const found = res.data.some(
|
|
23831
|
+
(token) => token.chains.some((chain) => {
|
|
23832
|
+
const match = chain.chain_type === sourceChainType && chain.chain_id === sourceChainId && chain.token_address.toLowerCase() === sourceTokenAddress.toLowerCase();
|
|
23833
|
+
if (match) {
|
|
23834
|
+
matchedMinUsd = chain.minimum_deposit_amount_usd;
|
|
23835
|
+
matchedProcessingTime = chain.estimated_processing_time;
|
|
23836
|
+
matchedSlippage = chain.max_slippage_percent;
|
|
23837
|
+
matchedPriceImpact = chain.estimated_price_impact_percent;
|
|
23838
|
+
}
|
|
23839
|
+
return match;
|
|
23840
|
+
})
|
|
23841
|
+
);
|
|
23842
|
+
return {
|
|
23843
|
+
isSupported: found,
|
|
23844
|
+
minimumAmountUsd: matchedMinUsd,
|
|
23845
|
+
estimatedProcessingTime: matchedProcessingTime,
|
|
23846
|
+
maxSlippagePercent: matchedSlippage,
|
|
23847
|
+
priceImpactPercent: matchedPriceImpact,
|
|
23848
|
+
errorMessage: found ? null : `${sourceTokenSymbol || "Source token"} is not a supported withdrawal token. Supported tokens include USDC, USDT, and other stablecoins.`
|
|
23849
|
+
};
|
|
23850
|
+
},
|
|
23851
|
+
enabled: enabled && hasParams,
|
|
23852
|
+
staleTime: 1e3 * 60 * 5,
|
|
23853
|
+
gcTime: 1e3 * 60 * 30,
|
|
23854
|
+
refetchOnMount: false,
|
|
23855
|
+
refetchOnWindowFocus: false
|
|
23856
|
+
});
|
|
23857
|
+
}
|
|
23858
|
+
function useAddressBalance(params) {
|
|
23859
|
+
const {
|
|
23860
|
+
address,
|
|
23861
|
+
chainType,
|
|
23862
|
+
chainId,
|
|
23863
|
+
tokenAddress,
|
|
23864
|
+
publishableKey,
|
|
23865
|
+
enabled = true
|
|
23866
|
+
} = params;
|
|
23867
|
+
const hasParams = !!address && !!chainType && !!chainId && !!tokenAddress;
|
|
23868
|
+
return useQuery13({
|
|
23869
|
+
queryKey: [
|
|
23870
|
+
"unifold",
|
|
23871
|
+
"addressBalance",
|
|
23872
|
+
address ?? null,
|
|
23873
|
+
chainType ?? null,
|
|
23874
|
+
chainId ?? null,
|
|
23875
|
+
tokenAddress ?? null,
|
|
23876
|
+
publishableKey
|
|
23877
|
+
],
|
|
23878
|
+
queryFn: async () => {
|
|
23879
|
+
const res = await getAddressBalance(
|
|
23880
|
+
address,
|
|
23881
|
+
chainType,
|
|
23882
|
+
chainId,
|
|
23883
|
+
tokenAddress,
|
|
23884
|
+
publishableKey
|
|
23885
|
+
);
|
|
23886
|
+
if (res.balance) {
|
|
23887
|
+
const decimals = res.balance.token?.decimals ?? 6;
|
|
23888
|
+
const symbol = res.balance.token?.symbol ?? "";
|
|
23889
|
+
const baseUnit = res.balance.amount;
|
|
23890
|
+
const raw = BigInt(baseUnit);
|
|
23891
|
+
const divisor = BigInt(10 ** decimals);
|
|
23892
|
+
const whole = raw / divisor;
|
|
23893
|
+
const frac = raw % divisor;
|
|
23894
|
+
const fracStr = frac.toString().padStart(decimals, "0").replace(/0+$/, "");
|
|
23895
|
+
const balanceHuman = fracStr ? `${whole}.${fracStr}` : whole.toString();
|
|
23896
|
+
return {
|
|
23897
|
+
balanceBaseUnit: baseUnit,
|
|
23898
|
+
balanceHuman,
|
|
23899
|
+
balanceUsd: res.balance.amount_usd,
|
|
23900
|
+
exchangeRate: res.balance.exchange_rate,
|
|
23901
|
+
decimals,
|
|
23902
|
+
symbol
|
|
23903
|
+
};
|
|
23904
|
+
}
|
|
23905
|
+
return { balanceBaseUnit: "0", balanceHuman: "0", balanceUsd: "0", exchangeRate: null, decimals: 6, symbol: "" };
|
|
23906
|
+
},
|
|
23907
|
+
enabled: enabled && hasParams,
|
|
23908
|
+
staleTime: 1e3 * 30,
|
|
23909
|
+
gcTime: 1e3 * 60 * 5,
|
|
23910
|
+
refetchInterval: 1e3 * 30,
|
|
23911
|
+
refetchOnMount: "always",
|
|
23912
|
+
refetchOnWindowFocus: false
|
|
23913
|
+
});
|
|
23914
|
+
}
|
|
23915
|
+
function useExecutions(userId, publishableKey, options) {
|
|
23916
|
+
const actionType = options?.actionType ?? ActionType.Deposit;
|
|
23917
|
+
return useQuery14({
|
|
23918
|
+
queryKey: ["unifold", "executions", actionType, userId, publishableKey],
|
|
23919
|
+
queryFn: () => queryExecutions(userId, publishableKey, actionType),
|
|
22811
23920
|
enabled: (options?.enabled ?? true) && !!userId,
|
|
22812
23921
|
refetchInterval: options?.refetchInterval ?? 3e3,
|
|
22813
23922
|
staleTime: 0,
|
|
@@ -22826,20 +23935,20 @@ function useWithdrawPolling({
|
|
|
22826
23935
|
onWithdrawSuccess,
|
|
22827
23936
|
onWithdrawError
|
|
22828
23937
|
}) {
|
|
22829
|
-
const [executions, setExecutions] =
|
|
22830
|
-
const [isPolling, setIsPolling] =
|
|
22831
|
-
const enabledAtRef =
|
|
22832
|
-
const trackedRef =
|
|
22833
|
-
const prevEnabledRef =
|
|
22834
|
-
const onSuccessRef =
|
|
22835
|
-
const onErrorRef =
|
|
22836
|
-
|
|
23938
|
+
const [executions, setExecutions] = useState29([]);
|
|
23939
|
+
const [isPolling, setIsPolling] = useState29(false);
|
|
23940
|
+
const enabledAtRef = useRef92(/* @__PURE__ */ new Date());
|
|
23941
|
+
const trackedRef = useRef92(/* @__PURE__ */ new Map());
|
|
23942
|
+
const prevEnabledRef = useRef92(false);
|
|
23943
|
+
const onSuccessRef = useRef92(onWithdrawSuccess);
|
|
23944
|
+
const onErrorRef = useRef92(onWithdrawError);
|
|
23945
|
+
useEffect242(() => {
|
|
22837
23946
|
onSuccessRef.current = onWithdrawSuccess;
|
|
22838
23947
|
}, [onWithdrawSuccess]);
|
|
22839
|
-
|
|
23948
|
+
useEffect242(() => {
|
|
22840
23949
|
onErrorRef.current = onWithdrawError;
|
|
22841
23950
|
}, [onWithdrawError]);
|
|
22842
|
-
|
|
23951
|
+
useEffect242(() => {
|
|
22843
23952
|
if (enabled && !prevEnabledRef.current) {
|
|
22844
23953
|
enabledAtRef.current = /* @__PURE__ */ new Date();
|
|
22845
23954
|
trackedRef.current.clear();
|
|
@@ -22849,7 +23958,7 @@ function useWithdrawPolling({
|
|
|
22849
23958
|
}
|
|
22850
23959
|
prevEnabledRef.current = enabled;
|
|
22851
23960
|
}, [enabled]);
|
|
22852
|
-
|
|
23961
|
+
useEffect242(() => {
|
|
22853
23962
|
if (!userId || !enabled) return;
|
|
22854
23963
|
const enabledAt = enabledAtRef.current;
|
|
22855
23964
|
const poll = async () => {
|
|
@@ -22911,7 +24020,7 @@ function useWithdrawPolling({
|
|
|
22911
24020
|
setIsPolling(false);
|
|
22912
24021
|
};
|
|
22913
24022
|
}, [userId, publishableKey, enabled]);
|
|
22914
|
-
|
|
24023
|
+
useEffect242(() => {
|
|
22915
24024
|
if (!enabled || !depositWalletId) return;
|
|
22916
24025
|
const trigger = async () => {
|
|
22917
24026
|
try {
|
|
@@ -22939,8 +24048,8 @@ function WithdrawDoubleInput({
|
|
|
22939
24048
|
const isDarkMode = useTheme().themeClass.includes("uf-dark");
|
|
22940
24049
|
const selectedToken = selectedTokenSymbol ? tokens.find((t11) => t11.symbol === selectedTokenSymbol) : void 0;
|
|
22941
24050
|
const availableChainsForToken = selectedToken?.chains || [];
|
|
22942
|
-
const renderTokenItem = (tokenData) => /* @__PURE__ */
|
|
22943
|
-
/* @__PURE__ */
|
|
24051
|
+
const renderTokenItem = (tokenData) => /* @__PURE__ */ jsxs46("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
24052
|
+
/* @__PURE__ */ jsx53(
|
|
22944
24053
|
"img",
|
|
22945
24054
|
{
|
|
22946
24055
|
src: tokenData.icon_url,
|
|
@@ -22951,10 +24060,10 @@ function WithdrawDoubleInput({
|
|
|
22951
24060
|
className: "uf-rounded-full uf-flex-shrink-0"
|
|
22952
24061
|
}
|
|
22953
24062
|
),
|
|
22954
|
-
/* @__PURE__ */
|
|
24063
|
+
/* @__PURE__ */ jsx53("span", { className: "uf-text-xs uf-font-normal", children: tokenData.symbol })
|
|
22955
24064
|
] });
|
|
22956
|
-
const renderChainItem = (chainData) => /* @__PURE__ */
|
|
22957
|
-
/* @__PURE__ */
|
|
24065
|
+
const renderChainItem = (chainData) => /* @__PURE__ */ jsxs46("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
24066
|
+
/* @__PURE__ */ jsx53(
|
|
22958
24067
|
"img",
|
|
22959
24068
|
{
|
|
22960
24069
|
src: chainData.icon_url,
|
|
@@ -22965,14 +24074,14 @@ function WithdrawDoubleInput({
|
|
|
22965
24074
|
className: "uf-rounded-full uf-flex-shrink-0"
|
|
22966
24075
|
}
|
|
22967
24076
|
),
|
|
22968
|
-
/* @__PURE__ */
|
|
24077
|
+
/* @__PURE__ */ jsx53("span", { className: "uf-text-xs uf-font-normal", children: chainData.chain_name })
|
|
22969
24078
|
] });
|
|
22970
24079
|
const currentChainData = selectedChainKey ? availableChainsForToken.find(
|
|
22971
24080
|
(c) => getChainKey4(c.chain_id, c.chain_type) === selectedChainKey
|
|
22972
24081
|
) : void 0;
|
|
22973
|
-
return /* @__PURE__ */
|
|
22974
|
-
/* @__PURE__ */
|
|
22975
|
-
/* @__PURE__ */
|
|
24082
|
+
return /* @__PURE__ */ jsxs46("div", { className: "uf-grid uf-grid-cols-2 uf-gap-2.5", children: [
|
|
24083
|
+
/* @__PURE__ */ jsxs46("div", { children: [
|
|
24084
|
+
/* @__PURE__ */ jsx53(
|
|
22976
24085
|
"div",
|
|
22977
24086
|
{
|
|
22978
24087
|
className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1",
|
|
@@ -22980,14 +24089,14 @@ function WithdrawDoubleInput({
|
|
|
22980
24089
|
children: t7.receiveToken
|
|
22981
24090
|
}
|
|
22982
24091
|
),
|
|
22983
|
-
/* @__PURE__ */
|
|
24092
|
+
/* @__PURE__ */ jsxs46(
|
|
22984
24093
|
Select2,
|
|
22985
24094
|
{
|
|
22986
24095
|
value: selectedTokenSymbol ?? "",
|
|
22987
24096
|
onValueChange: onTokenChange,
|
|
22988
24097
|
disabled: isLoading || tokens.length === 0,
|
|
22989
24098
|
children: [
|
|
22990
|
-
/* @__PURE__ */
|
|
24099
|
+
/* @__PURE__ */ jsx53(
|
|
22991
24100
|
SelectTrigger2,
|
|
22992
24101
|
{
|
|
22993
24102
|
className: "uf-h-10 hover:uf-opacity-90 uf-text-foreground disabled:uf-opacity-50",
|
|
@@ -22995,10 +24104,10 @@ function WithdrawDoubleInput({
|
|
|
22995
24104
|
backgroundColor: components.card.backgroundColor,
|
|
22996
24105
|
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
22997
24106
|
},
|
|
22998
|
-
children: /* @__PURE__ */
|
|
24107
|
+
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
24108
|
}
|
|
23000
24109
|
),
|
|
23001
|
-
/* @__PURE__ */
|
|
24110
|
+
/* @__PURE__ */ jsx53(
|
|
23002
24111
|
SelectContent2,
|
|
23003
24112
|
{
|
|
23004
24113
|
className: "uf-bg-secondary uf-border uf-text-foreground uf-max-h-[300px]",
|
|
@@ -23006,7 +24115,7 @@ function WithdrawDoubleInput({
|
|
|
23006
24115
|
border: `1px solid ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)"}`,
|
|
23007
24116
|
...fonts.regular ? { "--uf-font-family": fonts.regular } : {}
|
|
23008
24117
|
},
|
|
23009
|
-
children: tokens.map((tokenData) => /* @__PURE__ */
|
|
24118
|
+
children: tokens.map((tokenData) => /* @__PURE__ */ jsx53(
|
|
23010
24119
|
SelectItem2,
|
|
23011
24120
|
{
|
|
23012
24121
|
value: tokenData.symbol,
|
|
@@ -23021,8 +24130,8 @@ function WithdrawDoubleInput({
|
|
|
23021
24130
|
}
|
|
23022
24131
|
)
|
|
23023
24132
|
] }),
|
|
23024
|
-
/* @__PURE__ */
|
|
23025
|
-
/* @__PURE__ */
|
|
24133
|
+
/* @__PURE__ */ jsxs46("div", { children: [
|
|
24134
|
+
/* @__PURE__ */ jsx53(
|
|
23026
24135
|
"div",
|
|
23027
24136
|
{
|
|
23028
24137
|
className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1",
|
|
@@ -23030,14 +24139,14 @@ function WithdrawDoubleInput({
|
|
|
23030
24139
|
children: t7.receiveChain
|
|
23031
24140
|
}
|
|
23032
24141
|
),
|
|
23033
|
-
/* @__PURE__ */
|
|
24142
|
+
/* @__PURE__ */ jsxs46(
|
|
23034
24143
|
Select2,
|
|
23035
24144
|
{
|
|
23036
24145
|
value: selectedChainKey ?? "",
|
|
23037
24146
|
onValueChange: onChainChange,
|
|
23038
24147
|
disabled: isLoading || availableChainsForToken.length === 0,
|
|
23039
24148
|
children: [
|
|
23040
|
-
/* @__PURE__ */
|
|
24149
|
+
/* @__PURE__ */ jsx53(
|
|
23041
24150
|
SelectTrigger2,
|
|
23042
24151
|
{
|
|
23043
24152
|
className: "uf-h-10 hover:uf-opacity-90 uf-text-foreground disabled:uf-opacity-50",
|
|
@@ -23045,10 +24154,10 @@ function WithdrawDoubleInput({
|
|
|
23045
24154
|
backgroundColor: components.card.backgroundColor,
|
|
23046
24155
|
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
23047
24156
|
},
|
|
23048
|
-
children: /* @__PURE__ */
|
|
24157
|
+
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
24158
|
}
|
|
23050
24159
|
),
|
|
23051
|
-
/* @__PURE__ */
|
|
24160
|
+
/* @__PURE__ */ jsx53(
|
|
23052
24161
|
SelectContent2,
|
|
23053
24162
|
{
|
|
23054
24163
|
align: "end",
|
|
@@ -23057,9 +24166,9 @@ function WithdrawDoubleInput({
|
|
|
23057
24166
|
border: `1px solid ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)"}`,
|
|
23058
24167
|
...fonts.regular ? { "--uf-font-family": fonts.regular } : {}
|
|
23059
24168
|
},
|
|
23060
|
-
children: availableChainsForToken.length === 0 ? /* @__PURE__ */
|
|
24169
|
+
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
24170
|
const chainKey = getChainKey4(chainData.chain_id, chainData.chain_type);
|
|
23062
|
-
return /* @__PURE__ */
|
|
24171
|
+
return /* @__PURE__ */ jsx53(
|
|
23063
24172
|
SelectItem2,
|
|
23064
24173
|
{
|
|
23065
24174
|
value: chainKey,
|
|
@@ -23088,7 +24197,7 @@ function useVerifyRecipientAddress(params) {
|
|
|
23088
24197
|
} = params;
|
|
23089
24198
|
const trimmedAddress = recipientAddress?.trim() || "";
|
|
23090
24199
|
const hasAllParams = !!chainType && !!chainId && !!tokenAddress && trimmedAddress.length > 0;
|
|
23091
|
-
return
|
|
24200
|
+
return useQuery15({
|
|
23092
24201
|
queryKey: [
|
|
23093
24202
|
"unifold",
|
|
23094
24203
|
"verifyRecipientAddress",
|
|
@@ -23224,9 +24333,56 @@ async function sendSolanaWithdraw(params) {
|
|
|
23224
24333
|
);
|
|
23225
24334
|
return sendResponse.signature;
|
|
23226
24335
|
}
|
|
24336
|
+
var HYPERCORE_CHAIN_ID = "1337";
|
|
24337
|
+
var HYPERCORE_SPOT_USDC_ADDRESS = "0x6d1e7cde53ba9467b783cb7c530ce054";
|
|
24338
|
+
function isHypercoreChain(chainId) {
|
|
24339
|
+
return chainId === HYPERCORE_CHAIN_ID;
|
|
24340
|
+
}
|
|
24341
|
+
async function sendHypercoreWithdraw(params) {
|
|
24342
|
+
const {
|
|
24343
|
+
provider,
|
|
24344
|
+
fromAddress,
|
|
24345
|
+
depositWalletAddress,
|
|
24346
|
+
sourceTokenAddress,
|
|
24347
|
+
amount,
|
|
24348
|
+
tokenSymbol,
|
|
24349
|
+
publishableKey
|
|
24350
|
+
} = params;
|
|
24351
|
+
const isSpot = sourceTokenAddress.toLowerCase() === HYPERCORE_SPOT_USDC_ADDRESS;
|
|
24352
|
+
const currentChainHex = await provider.request({
|
|
24353
|
+
method: "eth_chainId",
|
|
24354
|
+
params: []
|
|
24355
|
+
});
|
|
24356
|
+
const activeChainId = String(parseInt(currentChainHex, 16));
|
|
24357
|
+
const buildResult = await buildHypercoreTransaction(
|
|
24358
|
+
{
|
|
24359
|
+
action_type: isSpot ? "spot_send" : "usd_send",
|
|
24360
|
+
signature_chain_type: "ethereum",
|
|
24361
|
+
signature_chain_id: activeChainId,
|
|
24362
|
+
recipient_address: depositWalletAddress,
|
|
24363
|
+
token_address: sourceTokenAddress,
|
|
24364
|
+
token_symbol: tokenSymbol || void 0,
|
|
24365
|
+
amount
|
|
24366
|
+
},
|
|
24367
|
+
publishableKey
|
|
24368
|
+
);
|
|
24369
|
+
const signature = await provider.request({
|
|
24370
|
+
method: "eth_signTypedData_v4",
|
|
24371
|
+
params: [fromAddress, JSON.stringify(buildResult.typed_data)]
|
|
24372
|
+
});
|
|
24373
|
+
await sendHypercoreTransaction(
|
|
24374
|
+
{
|
|
24375
|
+
action_payload: buildResult.action_payload,
|
|
24376
|
+
signature,
|
|
24377
|
+
nonce: buildResult.nonce
|
|
24378
|
+
},
|
|
24379
|
+
publishableKey
|
|
24380
|
+
);
|
|
24381
|
+
}
|
|
23227
24382
|
async function detectBrowserWallet(chainType, senderAddress) {
|
|
23228
24383
|
const win = typeof window !== "undefined" ? window : null;
|
|
23229
24384
|
if (!win || !senderAddress) return null;
|
|
24385
|
+
if (getUserDisconnectedWallet()) return null;
|
|
23230
24386
|
const anyWin = win;
|
|
23231
24387
|
if (chainType === "solana") {
|
|
23232
24388
|
const solProviders = [];
|
|
@@ -23260,28 +24416,44 @@ async function detectBrowserWallet(chainType, senderAddress) {
|
|
|
23260
24416
|
evmProviders.push({ provider: p, name });
|
|
23261
24417
|
}
|
|
23262
24418
|
};
|
|
23263
|
-
|
|
23264
|
-
|
|
23265
|
-
add(anyWin.trustwallet?.ethereum, "Trust Wallet");
|
|
23266
|
-
add(anyWin.okxwallet, "OKX Wallet");
|
|
23267
|
-
if (anyWin.__eip6963Providers) {
|
|
23268
|
-
for (const detail of anyWin.__eip6963Providers) {
|
|
23269
|
-
const rdns = detail.info?.rdns || "";
|
|
23270
|
-
let name = detail.info?.name || "Wallet";
|
|
23271
|
-
if (rdns.includes("metamask")) name = "MetaMask";
|
|
23272
|
-
else if (rdns.includes("rabby")) name = "Rabby";
|
|
23273
|
-
else if (rdns.includes("rainbow")) name = "Rainbow";
|
|
23274
|
-
add(detail.provider, name);
|
|
23275
|
-
}
|
|
24419
|
+
if (!anyWin.__eip6963Providers) {
|
|
24420
|
+
anyWin.__eip6963Providers = [];
|
|
23276
24421
|
}
|
|
23277
|
-
|
|
23278
|
-
const
|
|
23279
|
-
|
|
23280
|
-
|
|
23281
|
-
|
|
23282
|
-
|
|
23283
|
-
|
|
23284
|
-
|
|
24422
|
+
const handleAnnouncement = (event) => {
|
|
24423
|
+
const { detail } = event;
|
|
24424
|
+
if (!detail?.info || !detail?.provider) return;
|
|
24425
|
+
const exists = anyWin.__eip6963Providers.some((p) => p.info.uuid === detail.info.uuid);
|
|
24426
|
+
if (!exists) anyWin.__eip6963Providers.push(detail);
|
|
24427
|
+
};
|
|
24428
|
+
win.addEventListener("eip6963:announceProvider", handleAnnouncement);
|
|
24429
|
+
win.dispatchEvent(new Event("eip6963:requestProvider"));
|
|
24430
|
+
win.removeEventListener("eip6963:announceProvider", handleAnnouncement);
|
|
24431
|
+
for (const detail of anyWin.__eip6963Providers) {
|
|
24432
|
+
const rdns = detail.info?.rdns || "";
|
|
24433
|
+
let name = detail.info?.name || "Wallet";
|
|
24434
|
+
if (rdns.includes("metamask")) name = "MetaMask";
|
|
24435
|
+
else if (rdns.includes("phantom")) name = "Phantom";
|
|
24436
|
+
else if (rdns.includes("coinbase")) name = "Coinbase";
|
|
24437
|
+
else if (rdns.includes("rabby")) name = "Rabby";
|
|
24438
|
+
else if (rdns.includes("rainbow")) name = "Rainbow";
|
|
24439
|
+
else if (rdns.includes("okx")) name = "OKX Wallet";
|
|
24440
|
+
else if (rdns.includes("trust")) name = "Trust Wallet";
|
|
24441
|
+
add(detail.provider, name);
|
|
24442
|
+
}
|
|
24443
|
+
if (evmProviders.length === 0) {
|
|
24444
|
+
add(anyWin.phantom?.ethereum, "Phantom");
|
|
24445
|
+
add(anyWin.coinbaseWalletExtension, "Coinbase");
|
|
24446
|
+
add(anyWin.trustwallet?.ethereum, "Trust Wallet");
|
|
24447
|
+
add(anyWin.okxwallet, "OKX Wallet");
|
|
24448
|
+
if (evmProviders.length === 0 && win.ethereum) {
|
|
24449
|
+
const eth = win.ethereum;
|
|
24450
|
+
let name = "Wallet";
|
|
24451
|
+
if (eth.isMetaMask && !eth.isPhantom && !eth.isRabby) name = "MetaMask";
|
|
24452
|
+
else if (eth.isRabby) name = "Rabby";
|
|
24453
|
+
else if (eth.isRainbow) name = "Rainbow";
|
|
24454
|
+
else if (eth.isCoinbaseWallet) name = "Coinbase";
|
|
24455
|
+
add(eth, name);
|
|
24456
|
+
}
|
|
23285
24457
|
}
|
|
23286
24458
|
for (const { provider, name } of evmProviders) {
|
|
23287
24459
|
try {
|
|
@@ -23334,12 +24506,9 @@ function WithdrawForm({
|
|
|
23334
24506
|
estimatedProcessingTime,
|
|
23335
24507
|
maxSlippagePercent,
|
|
23336
24508
|
priceImpactPercent,
|
|
23337
|
-
|
|
24509
|
+
senderAddress,
|
|
23338
24510
|
sourceChainId,
|
|
23339
24511
|
sourceTokenAddress,
|
|
23340
|
-
isWalletMatch,
|
|
23341
|
-
connectedWalletName,
|
|
23342
|
-
canWithdraw,
|
|
23343
24512
|
onWithdraw,
|
|
23344
24513
|
onWithdrawError,
|
|
23345
24514
|
onDepositWalletCreation,
|
|
@@ -23347,22 +24516,22 @@ function WithdrawForm({
|
|
|
23347
24516
|
footerLeft
|
|
23348
24517
|
}) {
|
|
23349
24518
|
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
|
-
|
|
24519
|
+
const [recipientAddress, setRecipientAddress] = useState30(recipientAddressProp || "");
|
|
24520
|
+
const [amount, setAmount] = useState30("");
|
|
24521
|
+
const [inputUnit, setInputUnit] = useState30("crypto");
|
|
24522
|
+
const [isSubmitting, setIsSubmitting] = useState30(false);
|
|
24523
|
+
const [submitError, setSubmitError] = useState30(null);
|
|
24524
|
+
const [detailsExpanded, setDetailsExpanded] = useState30(false);
|
|
24525
|
+
const [glossaryOpen, setGlossaryOpen] = useState30(false);
|
|
24526
|
+
useEffect252(() => {
|
|
23358
24527
|
setRecipientAddress(recipientAddressProp || "");
|
|
23359
24528
|
setAmount("");
|
|
23360
24529
|
setInputUnit("crypto");
|
|
23361
24530
|
setSubmitError(null);
|
|
23362
24531
|
}, [recipientAddressProp]);
|
|
23363
24532
|
const trimmedAddress = recipientAddress.trim();
|
|
23364
|
-
const [debouncedAddress, setDebouncedAddress] =
|
|
23365
|
-
|
|
24533
|
+
const [debouncedAddress, setDebouncedAddress] = useState30(trimmedAddress);
|
|
24534
|
+
useEffect252(() => {
|
|
23366
24535
|
const id = setTimeout(() => setDebouncedAddress(trimmedAddress), 500);
|
|
23367
24536
|
return () => clearTimeout(id);
|
|
23368
24537
|
}, [trimmedAddress]);
|
|
@@ -23379,7 +24548,7 @@ function WithdrawForm({
|
|
|
23379
24548
|
enabled: debouncedAddress.length > 5 && !!selectedChain
|
|
23380
24549
|
});
|
|
23381
24550
|
const isDebouncing = trimmedAddress !== debouncedAddress;
|
|
23382
|
-
const addressError =
|
|
24551
|
+
const addressError = useMemo112(() => {
|
|
23383
24552
|
if (!trimmedAddress || trimmedAddress.length <= 5) return null;
|
|
23384
24553
|
if (isDebouncing || isVerifyingAddress) return null;
|
|
23385
24554
|
if (verifyError) return t8.invalidAddress;
|
|
@@ -23393,47 +24562,47 @@ function WithdrawForm({
|
|
|
23393
24562
|
return null;
|
|
23394
24563
|
}, [trimmedAddress, isDebouncing, isVerifyingAddress, verifyError, addressVerification, selectedChain, selectedToken]);
|
|
23395
24564
|
const isAddressValid = !isDebouncing && !!addressVerification?.valid && !addressError;
|
|
23396
|
-
const exchangeRate =
|
|
24565
|
+
const exchangeRate = useMemo112(() => {
|
|
23397
24566
|
if (!balanceData?.exchangeRate) return 0;
|
|
23398
24567
|
return parseFloat(balanceData.exchangeRate);
|
|
23399
24568
|
}, [balanceData]);
|
|
23400
|
-
const balanceCrypto =
|
|
24569
|
+
const balanceCrypto = useMemo112(() => {
|
|
23401
24570
|
if (!balanceData?.balanceHuman) return 0;
|
|
23402
24571
|
return parseFloat(balanceData.balanceHuman);
|
|
23403
24572
|
}, [balanceData]);
|
|
23404
|
-
const balanceUsdNum =
|
|
24573
|
+
const balanceUsdNum = useMemo112(() => {
|
|
23405
24574
|
if (!balanceData?.balanceUsd) return 0;
|
|
23406
24575
|
return parseFloat(balanceData.balanceUsd);
|
|
23407
24576
|
}, [balanceData]);
|
|
23408
24577
|
const tokenSymbol = sourceTokenSymbol || balanceData?.symbol || "TOKEN";
|
|
23409
24578
|
const sourceDecimals = balanceData?.decimals ?? 6;
|
|
23410
|
-
const cryptoAmountFromInput =
|
|
24579
|
+
const cryptoAmountFromInput = useMemo112(() => {
|
|
23411
24580
|
const val = parseFloat(amount);
|
|
23412
24581
|
if (!val || val <= 0) return 0;
|
|
23413
24582
|
if (inputUnit === "crypto") return val;
|
|
23414
24583
|
return exchangeRate > 0 ? val / exchangeRate : 0;
|
|
23415
24584
|
}, [amount, inputUnit, exchangeRate]);
|
|
23416
|
-
const fiatAmountFromInput =
|
|
24585
|
+
const fiatAmountFromInput = useMemo112(() => {
|
|
23417
24586
|
const val = parseFloat(amount);
|
|
23418
24587
|
if (!val || val <= 0) return 0;
|
|
23419
24588
|
if (inputUnit === "fiat") return val;
|
|
23420
24589
|
return val * exchangeRate;
|
|
23421
24590
|
}, [amount, inputUnit, exchangeRate]);
|
|
23422
|
-
const convertedDisplay =
|
|
24591
|
+
const convertedDisplay = useMemo112(() => {
|
|
23423
24592
|
if (!amount || parseFloat(amount) <= 0) return null;
|
|
23424
24593
|
if (inputUnit === "crypto") {
|
|
23425
24594
|
return `$${fiatAmountFromInput.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
23426
24595
|
}
|
|
23427
24596
|
return `${cryptoAmountFromInput.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 6 })} ${tokenSymbol}`;
|
|
23428
24597
|
}, [amount, inputUnit, fiatAmountFromInput, cryptoAmountFromInput, tokenSymbol]);
|
|
23429
|
-
const balanceDisplay =
|
|
24598
|
+
const balanceDisplay = useMemo112(() => {
|
|
23430
24599
|
if (isLoadingBalance || !balanceData) return null;
|
|
23431
24600
|
if (inputUnit === "crypto") {
|
|
23432
24601
|
return `${balanceCrypto.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ${tokenSymbol}`;
|
|
23433
24602
|
}
|
|
23434
24603
|
return `$${balanceUsdNum.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
|
|
23435
24604
|
}, [isLoadingBalance, balanceData, inputUnit, balanceCrypto, balanceUsdNum, tokenSymbol]);
|
|
23436
|
-
const handleSwitchUnit =
|
|
24605
|
+
const handleSwitchUnit = useCallback62(() => {
|
|
23437
24606
|
const val = parseFloat(amount);
|
|
23438
24607
|
if (!val || val <= 0 || exchangeRate <= 0) {
|
|
23439
24608
|
setInputUnit((u) => u === "crypto" ? "fiat" : "crypto");
|
|
@@ -23450,7 +24619,7 @@ function WithdrawForm({
|
|
|
23450
24619
|
setInputUnit("crypto");
|
|
23451
24620
|
}
|
|
23452
24621
|
}, [amount, inputUnit, exchangeRate, sourceDecimals]);
|
|
23453
|
-
const handleMaxClick =
|
|
24622
|
+
const handleMaxClick = useCallback62(() => {
|
|
23454
24623
|
if (inputUnit === "crypto") {
|
|
23455
24624
|
if (balanceCrypto <= 0) return;
|
|
23456
24625
|
setAmount(balanceData?.balanceHuman ?? "0");
|
|
@@ -23462,7 +24631,7 @@ function WithdrawForm({
|
|
|
23462
24631
|
const isBelowMinimum = minimumWithdrawAmountUsd !== null && fiatAmountFromInput > 0 && fiatAmountFromInput < minimumWithdrawAmountUsd;
|
|
23463
24632
|
const isOverBalance = inputUnit === "crypto" ? cryptoAmountFromInput > 0 && balanceCrypto > 0 && cryptoAmountFromInput > balanceCrypto : fiatAmountFromInput > 0 && balanceUsdNum > 0 && fiatAmountFromInput > balanceUsdNum;
|
|
23464
24633
|
const isFormValid = trimmedAddress.length > 0 && amount.trim().length > 0 && cryptoAmountFromInput > 0 && isAddressValid && !isBelowMinimum && !isOverBalance && !!balanceData;
|
|
23465
|
-
const handleWithdraw =
|
|
24634
|
+
const handleWithdraw = useCallback62(async () => {
|
|
23466
24635
|
if (!selectedToken || !selectedChain) return;
|
|
23467
24636
|
if (!isFormValid) return;
|
|
23468
24637
|
setIsSubmitting(true);
|
|
@@ -23474,12 +24643,43 @@ function WithdrawForm({
|
|
|
23474
24643
|
destinationTokenAddress: selectedChain.token_address,
|
|
23475
24644
|
recipientAddress: trimmedAddress
|
|
23476
24645
|
});
|
|
23477
|
-
|
|
24646
|
+
let amountBaseUnit = computeBaseUnit(
|
|
23478
24647
|
balanceData.balanceBaseUnit,
|
|
23479
24648
|
parseFloat(amount),
|
|
23480
24649
|
inputUnit === "crypto" ? balanceCrypto : balanceUsdNum
|
|
23481
24650
|
);
|
|
23482
|
-
|
|
24651
|
+
let humanAmount = toSafeDecimalString(cryptoAmountFromInput, sourceDecimals);
|
|
24652
|
+
if (isHypercoreChain(sourceChainId)) {
|
|
24653
|
+
try {
|
|
24654
|
+
const check = await checkHypercoreActivation(
|
|
24655
|
+
{
|
|
24656
|
+
source_address: senderAddress,
|
|
24657
|
+
recipient_address: depositWallet.address
|
|
24658
|
+
},
|
|
24659
|
+
publishableKey
|
|
24660
|
+
);
|
|
24661
|
+
if (!check.user_exists) {
|
|
24662
|
+
const fee = check.activation_fee;
|
|
24663
|
+
const maxSendable = balanceCrypto - fee;
|
|
24664
|
+
if (maxSendable <= 0) {
|
|
24665
|
+
throw new Error(
|
|
24666
|
+
`Insufficient balance. A ${fee} USDC activation fee is required for the first transfer to this address.`
|
|
24667
|
+
);
|
|
24668
|
+
}
|
|
24669
|
+
const requestedAmount = parseFloat(humanAmount);
|
|
24670
|
+
if (requestedAmount > maxSendable) {
|
|
24671
|
+
humanAmount = toSafeDecimalString(maxSendable, sourceDecimals);
|
|
24672
|
+
amountBaseUnit = computeBaseUnit(
|
|
24673
|
+
balanceData.balanceBaseUnit,
|
|
24674
|
+
maxSendable,
|
|
24675
|
+
balanceCrypto
|
|
24676
|
+
);
|
|
24677
|
+
}
|
|
24678
|
+
}
|
|
24679
|
+
} catch (e) {
|
|
24680
|
+
if (e instanceof Error && e.message.includes("activation fee")) throw e;
|
|
24681
|
+
}
|
|
24682
|
+
}
|
|
23483
24683
|
const txInfo = {
|
|
23484
24684
|
sourceChainType,
|
|
23485
24685
|
sourceChainId,
|
|
@@ -23494,33 +24694,67 @@ function WithdrawForm({
|
|
|
23494
24694
|
withdrawIntentAddress: depositWallet.address,
|
|
23495
24695
|
recipientAddress: trimmedAddress
|
|
23496
24696
|
};
|
|
23497
|
-
|
|
23498
|
-
|
|
23499
|
-
|
|
23500
|
-
|
|
23501
|
-
|
|
23502
|
-
|
|
23503
|
-
|
|
24697
|
+
const wallet = await detectBrowserWallet(sourceChainType, senderAddress);
|
|
24698
|
+
console.log("browser wallet", wallet);
|
|
24699
|
+
if (wallet) {
|
|
24700
|
+
try {
|
|
24701
|
+
if (wallet.chainFamily === "evm" && isHypercoreChain(sourceChainId)) {
|
|
24702
|
+
await sendHypercoreWithdraw({
|
|
24703
|
+
provider: wallet.provider,
|
|
24704
|
+
fromAddress: wallet.address,
|
|
24705
|
+
depositWalletAddress: depositWallet.address,
|
|
24706
|
+
sourceTokenAddress,
|
|
24707
|
+
amount: humanAmount,
|
|
24708
|
+
tokenSymbol,
|
|
24709
|
+
publishableKey
|
|
24710
|
+
});
|
|
24711
|
+
} else if (wallet.chainFamily === "evm") {
|
|
24712
|
+
await sendEvmWithdraw({
|
|
24713
|
+
provider: wallet.provider,
|
|
24714
|
+
fromAddress: wallet.address,
|
|
24715
|
+
depositWalletAddress: depositWallet.address,
|
|
24716
|
+
sourceTokenAddress,
|
|
24717
|
+
sourceChainId,
|
|
24718
|
+
amountBaseUnit
|
|
24719
|
+
});
|
|
24720
|
+
} else if (wallet.chainFamily === "solana") {
|
|
24721
|
+
await sendSolanaWithdraw({
|
|
24722
|
+
provider: wallet.provider,
|
|
24723
|
+
fromAddress: wallet.address,
|
|
24724
|
+
depositWalletAddress: depositWallet.address,
|
|
24725
|
+
sourceTokenAddress,
|
|
24726
|
+
amountBaseUnit,
|
|
24727
|
+
publishableKey
|
|
24728
|
+
});
|
|
24729
|
+
}
|
|
24730
|
+
} catch (walletErr) {
|
|
24731
|
+
console.error("[Unifold] Browser wallet send failed:", walletErr, {
|
|
24732
|
+
wallet: `${wallet.name} (${wallet.chainFamily})`,
|
|
23504
24733
|
sourceChainId,
|
|
23505
|
-
|
|
23506
|
-
});
|
|
23507
|
-
} else if (detectedWallet.chainFamily === "solana") {
|
|
23508
|
-
await sendSolanaWithdraw({
|
|
23509
|
-
provider: detectedWallet.provider,
|
|
23510
|
-
fromAddress: detectedWallet.address,
|
|
23511
|
-
depositWalletAddress: depositWallet.address,
|
|
23512
|
-
sourceTokenAddress,
|
|
24734
|
+
amount: humanAmount,
|
|
23513
24735
|
amountBaseUnit,
|
|
23514
|
-
|
|
24736
|
+
depositWallet: depositWallet.address
|
|
23515
24737
|
});
|
|
24738
|
+
throw walletErr;
|
|
23516
24739
|
}
|
|
23517
24740
|
} else if (onWithdraw) {
|
|
23518
|
-
|
|
24741
|
+
try {
|
|
24742
|
+
await onWithdraw(txInfo);
|
|
24743
|
+
} catch (callbackErr) {
|
|
24744
|
+
console.error("[Unifold] onWithdraw callback failed:", callbackErr, {
|
|
24745
|
+
sourceChainId,
|
|
24746
|
+
amount: humanAmount,
|
|
24747
|
+
amountBaseUnit,
|
|
24748
|
+
depositWallet: depositWallet.address
|
|
24749
|
+
});
|
|
24750
|
+
throw callbackErr;
|
|
24751
|
+
}
|
|
23519
24752
|
} else {
|
|
23520
24753
|
throw new Error("No withdrawal method available. Please connect a wallet.");
|
|
23521
24754
|
}
|
|
23522
24755
|
onWithdrawSubmitted?.(txInfo);
|
|
23523
24756
|
} catch (err) {
|
|
24757
|
+
console.error("[Unifold] Withdrawal failed:", err);
|
|
23524
24758
|
const raw = err instanceof Error ? err.message : "Withdrawal failed. Please try again.";
|
|
23525
24759
|
setSubmitError(raw.length > 120 ? "Withdrawal failed. Please try again." : raw);
|
|
23526
24760
|
onWithdrawError?.({
|
|
@@ -23531,10 +24765,10 @@ function WithdrawForm({
|
|
|
23531
24765
|
} finally {
|
|
23532
24766
|
setIsSubmitting(false);
|
|
23533
24767
|
}
|
|
23534
|
-
}, [selectedToken, selectedChain, isFormValid, cryptoAmountFromInput, sourceDecimals, trimmedAddress, publishableKey, onWithdraw,
|
|
23535
|
-
return /* @__PURE__ */
|
|
23536
|
-
/* @__PURE__ */
|
|
23537
|
-
/* @__PURE__ */
|
|
24768
|
+
}, [selectedToken, selectedChain, isFormValid, cryptoAmountFromInput, sourceDecimals, trimmedAddress, publishableKey, onWithdraw, sourceChainType, senderAddress, sourceTokenAddress, sourceChainId, onWithdrawError, onDepositWalletCreation, onWithdrawSubmitted, amount, inputUnit, balanceCrypto, balanceUsdNum, balanceData]);
|
|
24769
|
+
return /* @__PURE__ */ jsxs47(Fragment11, { children: [
|
|
24770
|
+
/* @__PURE__ */ jsxs47("div", { children: [
|
|
24771
|
+
/* @__PURE__ */ jsx54(
|
|
23538
24772
|
"div",
|
|
23539
24773
|
{
|
|
23540
24774
|
className: "uf-text-xs uf-mb-1.5",
|
|
@@ -23542,7 +24776,7 @@ function WithdrawForm({
|
|
|
23542
24776
|
children: t8.recipientAddress
|
|
23543
24777
|
}
|
|
23544
24778
|
),
|
|
23545
|
-
/* @__PURE__ */
|
|
24779
|
+
/* @__PURE__ */ jsx54(
|
|
23546
24780
|
"style",
|
|
23547
24781
|
{
|
|
23548
24782
|
dangerouslySetInnerHTML: {
|
|
@@ -23550,7 +24784,7 @@ function WithdrawForm({
|
|
|
23550
24784
|
}
|
|
23551
24785
|
}
|
|
23552
24786
|
),
|
|
23553
|
-
/* @__PURE__ */
|
|
24787
|
+
/* @__PURE__ */ jsxs47(
|
|
23554
24788
|
"div",
|
|
23555
24789
|
{
|
|
23556
24790
|
className: "uf-flex uf-items-center uf-gap-1 uf-pr-2",
|
|
@@ -23560,7 +24794,7 @@ function WithdrawForm({
|
|
|
23560
24794
|
border: `${components.input.borderWidth}px solid ${addressError ? colors2.error : components.input.borderColor}`
|
|
23561
24795
|
},
|
|
23562
24796
|
children: [
|
|
23563
|
-
/* @__PURE__ */
|
|
24797
|
+
/* @__PURE__ */ jsx54(
|
|
23564
24798
|
"input",
|
|
23565
24799
|
{
|
|
23566
24800
|
type: "text",
|
|
@@ -23577,7 +24811,7 @@ function WithdrawForm({
|
|
|
23577
24811
|
}
|
|
23578
24812
|
}
|
|
23579
24813
|
),
|
|
23580
|
-
/* @__PURE__ */
|
|
24814
|
+
/* @__PURE__ */ jsx54(
|
|
23581
24815
|
"button",
|
|
23582
24816
|
{
|
|
23583
24817
|
type: "button",
|
|
@@ -23594,27 +24828,27 @@ function WithdrawForm({
|
|
|
23594
24828
|
className: "uf-flex-shrink-0 uf-p-1 uf-rounded uf-transition-colors hover:uf-opacity-70",
|
|
23595
24829
|
style: { color: colors2.foregroundMuted },
|
|
23596
24830
|
title: "Paste from clipboard",
|
|
23597
|
-
children: /* @__PURE__ */
|
|
24831
|
+
children: /* @__PURE__ */ jsx54(ClipboardPaste, { className: "uf-w-4 uf-h-4" })
|
|
23598
24832
|
}
|
|
23599
24833
|
)
|
|
23600
24834
|
]
|
|
23601
24835
|
}
|
|
23602
24836
|
),
|
|
23603
|
-
(isDebouncing || isVerifyingAddress) && trimmedAddress.length > 5 && /* @__PURE__ */
|
|
23604
|
-
/* @__PURE__ */
|
|
23605
|
-
/* @__PURE__ */
|
|
24837
|
+
(isDebouncing || isVerifyingAddress) && trimmedAddress.length > 5 && /* @__PURE__ */ jsxs47("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-1.5", children: [
|
|
24838
|
+
/* @__PURE__ */ jsx54(LoaderCircle, { className: "uf-w-3 uf-h-3 uf-animate-spin", style: { color: colors2.foregroundMuted } }),
|
|
24839
|
+
/* @__PURE__ */ jsx54("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: t8.verifyingAddress })
|
|
23606
24840
|
] }),
|
|
23607
|
-
addressError && /* @__PURE__ */
|
|
23608
|
-
/* @__PURE__ */
|
|
23609
|
-
/* @__PURE__ */
|
|
24841
|
+
addressError && /* @__PURE__ */ jsxs47("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-1.5", children: [
|
|
24842
|
+
/* @__PURE__ */ jsx54(TriangleAlert, { className: "uf-w-3 uf-h-3", style: { color: colors2.error } }),
|
|
24843
|
+
/* @__PURE__ */ jsx54("span", { className: "uf-text-xs", style: { color: colors2.error, fontFamily: fonts.regular }, children: addressError })
|
|
23610
24844
|
] })
|
|
23611
24845
|
] }),
|
|
23612
|
-
/* @__PURE__ */
|
|
23613
|
-
/* @__PURE__ */
|
|
24846
|
+
/* @__PURE__ */ jsxs47("div", { children: [
|
|
24847
|
+
/* @__PURE__ */ jsxs47("div", { className: "uf-text-xs uf-mb-1.5", style: { color: components.card.labelColor, fontFamily: fonts.medium }, children: [
|
|
23614
24848
|
t8.amount,
|
|
23615
|
-
minimumWithdrawAmountUsd != null && minimumWithdrawAmountUsd > 0 && /* @__PURE__ */
|
|
24849
|
+
minimumWithdrawAmountUsd != null && minimumWithdrawAmountUsd > 0 && /* @__PURE__ */ jsx54("span", { style: { color: colors2.warning, fontFamily: fonts.regular }, children: ` ($${minimumWithdrawAmountUsd.toFixed(2)} min)` })
|
|
23616
24850
|
] }),
|
|
23617
|
-
/* @__PURE__ */
|
|
24851
|
+
/* @__PURE__ */ jsx54(
|
|
23618
24852
|
"style",
|
|
23619
24853
|
{
|
|
23620
24854
|
dangerouslySetInnerHTML: {
|
|
@@ -23622,7 +24856,7 @@ function WithdrawForm({
|
|
|
23622
24856
|
}
|
|
23623
24857
|
}
|
|
23624
24858
|
),
|
|
23625
|
-
/* @__PURE__ */
|
|
24859
|
+
/* @__PURE__ */ jsxs47(
|
|
23626
24860
|
"div",
|
|
23627
24861
|
{
|
|
23628
24862
|
className: "uf-flex uf-items-center uf-gap-2 uf-px-3 uf-py-2.5",
|
|
@@ -23632,7 +24866,7 @@ function WithdrawForm({
|
|
|
23632
24866
|
border: `${components.input.borderWidth}px solid ${components.input.borderColor}`
|
|
23633
24867
|
},
|
|
23634
24868
|
children: [
|
|
23635
|
-
/* @__PURE__ */
|
|
24869
|
+
/* @__PURE__ */ jsx54(
|
|
23636
24870
|
"input",
|
|
23637
24871
|
{
|
|
23638
24872
|
type: "text",
|
|
@@ -23653,8 +24887,8 @@ function WithdrawForm({
|
|
|
23653
24887
|
}
|
|
23654
24888
|
}
|
|
23655
24889
|
),
|
|
23656
|
-
/* @__PURE__ */
|
|
23657
|
-
/* @__PURE__ */
|
|
24890
|
+
/* @__PURE__ */ jsx54("span", { className: "uf-text-sm uf-shrink-0", style: { color: colors2.foregroundMuted, fontFamily: fonts.medium }, children: inputUnit === "crypto" ? tokenSymbol : "USD" }),
|
|
24891
|
+
/* @__PURE__ */ jsx54(
|
|
23658
24892
|
"button",
|
|
23659
24893
|
{
|
|
23660
24894
|
type: "button",
|
|
@@ -23667,10 +24901,10 @@ function WithdrawForm({
|
|
|
23667
24901
|
]
|
|
23668
24902
|
}
|
|
23669
24903
|
),
|
|
23670
|
-
/* @__PURE__ */
|
|
23671
|
-
/* @__PURE__ */
|
|
23672
|
-
/* @__PURE__ */
|
|
23673
|
-
exchangeRate > 0 && /* @__PURE__ */
|
|
24904
|
+
/* @__PURE__ */ jsxs47("div", { className: "uf-flex uf-items-center uf-justify-between uf-mt-1.5 uf-px-3", children: [
|
|
24905
|
+
/* @__PURE__ */ jsxs47("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
|
|
24906
|
+
/* @__PURE__ */ jsx54("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: convertedDisplay || (inputUnit === "crypto" ? "$0.00" : `0.00 ${tokenSymbol}`) }),
|
|
24907
|
+
exchangeRate > 0 && /* @__PURE__ */ jsx54(
|
|
23674
24908
|
"button",
|
|
23675
24909
|
{
|
|
23676
24910
|
type: "button",
|
|
@@ -23678,49 +24912,49 @@ function WithdrawForm({
|
|
|
23678
24912
|
className: "uf-p-0.5 uf-rounded uf-transition-colors hover:uf-opacity-70",
|
|
23679
24913
|
style: { color: colors2.foregroundMuted },
|
|
23680
24914
|
title: "Switch unit",
|
|
23681
|
-
children: /* @__PURE__ */
|
|
24915
|
+
children: /* @__PURE__ */ jsx54(ArrowUpDown, { className: "uf-w-3 uf-h-3" })
|
|
23682
24916
|
}
|
|
23683
24917
|
)
|
|
23684
24918
|
] }),
|
|
23685
|
-
/* @__PURE__ */
|
|
23686
|
-
balanceDisplay && /* @__PURE__ */
|
|
24919
|
+
/* @__PURE__ */ jsxs47("div", { children: [
|
|
24920
|
+
balanceDisplay && /* @__PURE__ */ jsxs47("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: [
|
|
23687
24921
|
t8.balance,
|
|
23688
24922
|
": ",
|
|
23689
24923
|
balanceDisplay
|
|
23690
24924
|
] }),
|
|
23691
|
-
isLoadingBalance && /* @__PURE__ */
|
|
24925
|
+
isLoadingBalance && /* @__PURE__ */ jsx54("div", { className: "uf-h-3 uf-w-16 uf-bg-muted uf-rounded uf-animate-pulse" })
|
|
23692
24926
|
] })
|
|
23693
24927
|
] })
|
|
23694
24928
|
] }),
|
|
23695
|
-
/* @__PURE__ */
|
|
23696
|
-
/* @__PURE__ */
|
|
24929
|
+
/* @__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: [
|
|
24930
|
+
/* @__PURE__ */ jsxs47(
|
|
23697
24931
|
"button",
|
|
23698
24932
|
{
|
|
23699
24933
|
type: "button",
|
|
23700
24934
|
onClick: () => setDetailsExpanded(!detailsExpanded),
|
|
23701
24935
|
className: "uf-w-full uf-flex uf-items-center uf-justify-between uf-py-2.5",
|
|
23702
24936
|
children: [
|
|
23703
|
-
/* @__PURE__ */
|
|
23704
|
-
/* @__PURE__ */
|
|
23705
|
-
/* @__PURE__ */
|
|
24937
|
+
/* @__PURE__ */ jsxs47("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
24938
|
+
/* @__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 } }) }),
|
|
24939
|
+
/* @__PURE__ */ jsxs47("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
|
|
23706
24940
|
tCrypto.processingTime.label,
|
|
23707
24941
|
":",
|
|
23708
24942
|
" ",
|
|
23709
|
-
/* @__PURE__ */
|
|
24943
|
+
/* @__PURE__ */ jsx54("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: formatProcessingTime2(estimatedProcessingTime) })
|
|
23710
24944
|
] })
|
|
23711
24945
|
] }),
|
|
23712
|
-
detailsExpanded ? /* @__PURE__ */
|
|
24946
|
+
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
24947
|
]
|
|
23714
24948
|
}
|
|
23715
24949
|
),
|
|
23716
|
-
detailsExpanded && /* @__PURE__ */
|
|
23717
|
-
/* @__PURE__ */
|
|
23718
|
-
/* @__PURE__ */
|
|
23719
|
-
/* @__PURE__ */
|
|
24950
|
+
detailsExpanded && /* @__PURE__ */ jsxs47("div", { className: "uf-pb-3 uf-space-y-2.5", children: [
|
|
24951
|
+
/* @__PURE__ */ jsxs47("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
24952
|
+
/* @__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 } }) }),
|
|
24953
|
+
/* @__PURE__ */ jsxs47("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
|
|
23720
24954
|
tCrypto.slippage.label,
|
|
23721
24955
|
":",
|
|
23722
24956
|
" ",
|
|
23723
|
-
/* @__PURE__ */
|
|
24957
|
+
/* @__PURE__ */ jsxs47("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: [
|
|
23724
24958
|
tCrypto.slippage.auto,
|
|
23725
24959
|
" \u2022 ",
|
|
23726
24960
|
(maxSlippagePercent ?? 0.25).toFixed(2),
|
|
@@ -23728,13 +24962,13 @@ function WithdrawForm({
|
|
|
23728
24962
|
] })
|
|
23729
24963
|
] })
|
|
23730
24964
|
] }),
|
|
23731
|
-
/* @__PURE__ */
|
|
23732
|
-
/* @__PURE__ */
|
|
23733
|
-
/* @__PURE__ */
|
|
24965
|
+
/* @__PURE__ */ jsxs47("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
|
|
24966
|
+
/* @__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 } }) }),
|
|
24967
|
+
/* @__PURE__ */ jsxs47("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
|
|
23734
24968
|
tCrypto.priceImpact.label,
|
|
23735
24969
|
":",
|
|
23736
24970
|
" ",
|
|
23737
|
-
/* @__PURE__ */
|
|
24971
|
+
/* @__PURE__ */ jsxs47("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: [
|
|
23738
24972
|
(priceImpactPercent ?? 0).toFixed(2),
|
|
23739
24973
|
"%"
|
|
23740
24974
|
] })
|
|
@@ -23742,23 +24976,12 @@ function WithdrawForm({
|
|
|
23742
24976
|
] })
|
|
23743
24977
|
] })
|
|
23744
24978
|
] }),
|
|
23745
|
-
|
|
23746
|
-
"div",
|
|
23747
|
-
{
|
|
23748
|
-
className: "uf-flex uf-items-start uf-gap-2.5 uf-p-3 uf-rounded-xl",
|
|
23749
|
-
style: { backgroundColor: colors2.card, border: `1px solid ${colors2.border}` },
|
|
23750
|
-
children: [
|
|
23751
|
-
/* @__PURE__ */ jsx53(Wallet, { className: "uf-w-4 uf-h-4 uf-flex-shrink-0 uf-mt-0.5", style: { color: colors2.warning } }),
|
|
23752
|
-
/* @__PURE__ */ jsx53("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
|
-
]
|
|
23754
|
-
}
|
|
23755
|
-
),
|
|
23756
|
-
isWalletMatch && connectedWalletName ? /* @__PURE__ */ jsx53(
|
|
24979
|
+
/* @__PURE__ */ jsx54(
|
|
23757
24980
|
"button",
|
|
23758
24981
|
{
|
|
23759
24982
|
type: "button",
|
|
23760
24983
|
onClick: handleWithdraw,
|
|
23761
|
-
disabled: !isFormValid ||
|
|
24984
|
+
disabled: !isFormValid || isSubmitting || !selectedToken || !selectedChain,
|
|
23762
24985
|
className: "uf-w-full uf-py-3 uf-text-sm uf-font-medium uf-transition-colors disabled:uf-opacity-50 disabled:uf-cursor-not-allowed uf-flex uf-items-center uf-justify-center uf-gap-2",
|
|
23763
24986
|
style: {
|
|
23764
24987
|
backgroundColor: colors2.primary,
|
|
@@ -23767,40 +24990,20 @@ function WithdrawForm({
|
|
|
23767
24990
|
borderRadius: components.button.borderRadius,
|
|
23768
24991
|
border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
|
|
23769
24992
|
},
|
|
23770
|
-
children: isSubmitting ? /* @__PURE__ */
|
|
23771
|
-
/* @__PURE__ */
|
|
24993
|
+
children: isSubmitting ? /* @__PURE__ */ jsxs47(Fragment11, { children: [
|
|
24994
|
+
/* @__PURE__ */ jsx54(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
|
|
23772
24995
|
"Processing..."
|
|
23773
|
-
] }) : isOverBalance ? /* @__PURE__ */
|
|
23774
|
-
/* @__PURE__ */
|
|
23775
|
-
|
|
23776
|
-
connectedWalletName
|
|
24996
|
+
] }) : 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: [
|
|
24997
|
+
/* @__PURE__ */ jsx54(Wallet, { className: "uf-w-4 uf-h-4" }),
|
|
24998
|
+
t8.withdraw
|
|
23777
24999
|
] })
|
|
23778
25000
|
}
|
|
23779
|
-
) : /* @__PURE__ */ jsx53(
|
|
23780
|
-
"button",
|
|
23781
|
-
{
|
|
23782
|
-
type: "button",
|
|
23783
|
-
onClick: handleWithdraw,
|
|
23784
|
-
disabled: !isFormValid || !canWithdraw || isSubmitting || !selectedToken || !selectedChain,
|
|
23785
|
-
className: "uf-w-full uf-py-3 uf-text-sm uf-font-medium uf-transition-colors disabled:uf-opacity-50 disabled:uf-cursor-not-allowed",
|
|
23786
|
-
style: {
|
|
23787
|
-
backgroundColor: colors2.primary,
|
|
23788
|
-
color: colors2.primaryForeground,
|
|
23789
|
-
fontFamily: fonts.medium,
|
|
23790
|
-
borderRadius: components.button.borderRadius,
|
|
23791
|
-
border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
|
|
23792
|
-
},
|
|
23793
|
-
children: isSubmitting ? /* @__PURE__ */ jsxs46("span", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2", children: [
|
|
23794
|
-
/* @__PURE__ */ jsx53(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
|
|
23795
|
-
"Processing..."
|
|
23796
|
-
] }) : isOverBalance ? "Insufficient balance" : isBelowMinimum ? "Minimum amount not met" : submitError ? "Withdrawal failed. Try again" : t8.withdraw
|
|
23797
|
-
}
|
|
23798
25001
|
),
|
|
23799
|
-
/* @__PURE__ */
|
|
23800
|
-
/* @__PURE__ */
|
|
23801
|
-
/* @__PURE__ */
|
|
25002
|
+
/* @__PURE__ */ jsxs47("div", { className: "uf-flex uf-items-center uf-justify-between uf-text-xs uf-pt-1", children: [
|
|
25003
|
+
/* @__PURE__ */ jsx54("div", { children: footerLeft }),
|
|
25004
|
+
/* @__PURE__ */ jsx54(DepositFooterLinks, { onGlossaryClick: () => setGlossaryOpen(true) })
|
|
23802
25005
|
] }),
|
|
23803
|
-
/* @__PURE__ */
|
|
25006
|
+
/* @__PURE__ */ jsx54(
|
|
23804
25007
|
GlossaryModal,
|
|
23805
25008
|
{
|
|
23806
25009
|
open: glossaryOpen,
|
|
@@ -23846,7 +25049,7 @@ function WithdrawExecutionItem({
|
|
|
23846
25049
|
return "$0.00";
|
|
23847
25050
|
}
|
|
23848
25051
|
};
|
|
23849
|
-
return /* @__PURE__ */
|
|
25052
|
+
return /* @__PURE__ */ jsxs48(
|
|
23850
25053
|
"button",
|
|
23851
25054
|
{
|
|
23852
25055
|
onClick,
|
|
@@ -23857,8 +25060,8 @@ function WithdrawExecutionItem({
|
|
|
23857
25060
|
border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
|
|
23858
25061
|
},
|
|
23859
25062
|
children: [
|
|
23860
|
-
/* @__PURE__ */
|
|
23861
|
-
/* @__PURE__ */
|
|
25063
|
+
/* @__PURE__ */ jsxs48("div", { className: "uf-relative uf-flex-shrink-0 uf-w-9 uf-h-9", children: [
|
|
25064
|
+
/* @__PURE__ */ jsx55(
|
|
23862
25065
|
"img",
|
|
23863
25066
|
{
|
|
23864
25067
|
src: execution.destination_token_metadata?.icon_url || getIconUrl("/icons/tokens/svg/usdc.svg"),
|
|
@@ -23869,12 +25072,12 @@ function WithdrawExecutionItem({
|
|
|
23869
25072
|
className: "uf-rounded-full uf-w-9 uf-h-9"
|
|
23870
25073
|
}
|
|
23871
25074
|
),
|
|
23872
|
-
isPending ? /* @__PURE__ */
|
|
25075
|
+
isPending ? /* @__PURE__ */ jsx55(
|
|
23873
25076
|
"div",
|
|
23874
25077
|
{
|
|
23875
25078
|
className: "uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-rounded-full uf-p-0.5",
|
|
23876
25079
|
style: { backgroundColor: colors2.warning },
|
|
23877
|
-
children: /* @__PURE__ */
|
|
25080
|
+
children: /* @__PURE__ */ jsx55(
|
|
23878
25081
|
"svg",
|
|
23879
25082
|
{
|
|
23880
25083
|
width: "10",
|
|
@@ -23882,7 +25085,7 @@ function WithdrawExecutionItem({
|
|
|
23882
25085
|
viewBox: "0 0 12 12",
|
|
23883
25086
|
fill: "none",
|
|
23884
25087
|
className: "uf-animate-spin uf-block",
|
|
23885
|
-
children: /* @__PURE__ */
|
|
25088
|
+
children: /* @__PURE__ */ jsx55(
|
|
23886
25089
|
"path",
|
|
23887
25090
|
{
|
|
23888
25091
|
d: "M6 1V3M6 9V11M1 6H3M9 6H11M2.5 2.5L4 4M8 8L9.5 9.5M2.5 9.5L4 8M8 4L9.5 2.5",
|
|
@@ -23894,12 +25097,12 @@ function WithdrawExecutionItem({
|
|
|
23894
25097
|
}
|
|
23895
25098
|
)
|
|
23896
25099
|
}
|
|
23897
|
-
) : /* @__PURE__ */
|
|
25100
|
+
) : /* @__PURE__ */ jsx55(
|
|
23898
25101
|
"div",
|
|
23899
25102
|
{
|
|
23900
25103
|
className: "uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-rounded-full uf-p-0.5",
|
|
23901
25104
|
style: { backgroundColor: colors2.success },
|
|
23902
|
-
children: /* @__PURE__ */
|
|
25105
|
+
children: /* @__PURE__ */ jsx55(
|
|
23903
25106
|
"svg",
|
|
23904
25107
|
{
|
|
23905
25108
|
width: "10",
|
|
@@ -23907,7 +25110,7 @@ function WithdrawExecutionItem({
|
|
|
23907
25110
|
viewBox: "0 0 12 12",
|
|
23908
25111
|
fill: "none",
|
|
23909
25112
|
className: "uf-block",
|
|
23910
|
-
children: /* @__PURE__ */
|
|
25113
|
+
children: /* @__PURE__ */ jsx55(
|
|
23911
25114
|
"path",
|
|
23912
25115
|
{
|
|
23913
25116
|
d: "M10 3L4.5 8.5L2 6",
|
|
@@ -23922,8 +25125,8 @@ function WithdrawExecutionItem({
|
|
|
23922
25125
|
}
|
|
23923
25126
|
)
|
|
23924
25127
|
] }),
|
|
23925
|
-
/* @__PURE__ */
|
|
23926
|
-
/* @__PURE__ */
|
|
25128
|
+
/* @__PURE__ */ jsxs48("div", { className: "uf-flex-1 uf-min-w-0", children: [
|
|
25129
|
+
/* @__PURE__ */ jsx55(
|
|
23927
25130
|
"h3",
|
|
23928
25131
|
{
|
|
23929
25132
|
className: "uf-font-medium uf-text-sm uf-leading-tight",
|
|
@@ -23934,7 +25137,7 @@ function WithdrawExecutionItem({
|
|
|
23934
25137
|
children: isPending ? "Withdrawal processing" : "Withdrawal completed"
|
|
23935
25138
|
}
|
|
23936
25139
|
),
|
|
23937
|
-
/* @__PURE__ */
|
|
25140
|
+
/* @__PURE__ */ jsx55(
|
|
23938
25141
|
"p",
|
|
23939
25142
|
{
|
|
23940
25143
|
className: "uf-text-xs uf-leading-tight",
|
|
@@ -23946,7 +25149,7 @@ function WithdrawExecutionItem({
|
|
|
23946
25149
|
}
|
|
23947
25150
|
)
|
|
23948
25151
|
] }),
|
|
23949
|
-
/* @__PURE__ */
|
|
25152
|
+
/* @__PURE__ */ jsx55(
|
|
23950
25153
|
"span",
|
|
23951
25154
|
{
|
|
23952
25155
|
className: "uf-font-medium uf-text-sm uf-flex-shrink-0",
|
|
@@ -23957,7 +25160,7 @@ function WithdrawExecutionItem({
|
|
|
23957
25160
|
children: formatUsdAmount2(execution.source_amount_usd || "0")
|
|
23958
25161
|
}
|
|
23959
25162
|
),
|
|
23960
|
-
/* @__PURE__ */
|
|
25163
|
+
/* @__PURE__ */ jsx55(
|
|
23961
25164
|
ChevronRight,
|
|
23962
25165
|
{
|
|
23963
25166
|
className: "uf-w-4 uf-h-4 uf-flex-shrink-0",
|
|
@@ -23980,9 +25183,9 @@ function WithdrawConfirmingView({
|
|
|
23980
25183
|
onViewTracker
|
|
23981
25184
|
}) {
|
|
23982
25185
|
const { colors: colors2, fonts, components } = useTheme();
|
|
23983
|
-
const [showButton, setShowButton] =
|
|
25186
|
+
const [showButton, setShowButton] = useState31(false);
|
|
23984
25187
|
const latestExecution = executions.length > 0 ? executions[executions.length - 1] : null;
|
|
23985
|
-
|
|
25188
|
+
useEffect262(() => {
|
|
23986
25189
|
if (latestExecution) return;
|
|
23987
25190
|
const timer = setTimeout(() => setShowButton(true), SHOW_BUTTON_DELAY_MS);
|
|
23988
25191
|
return () => clearTimeout(timer);
|
|
@@ -23990,11 +25193,11 @@ function WithdrawConfirmingView({
|
|
|
23990
25193
|
const btnRadius = components.button.borderRadius;
|
|
23991
25194
|
const btnBorder = `${components.button.borderWidth}px solid ${components.button.borderColor}`;
|
|
23992
25195
|
if (latestExecution) {
|
|
23993
|
-
return /* @__PURE__ */
|
|
23994
|
-
/* @__PURE__ */
|
|
23995
|
-
/* @__PURE__ */
|
|
23996
|
-
/* @__PURE__ */
|
|
23997
|
-
/* @__PURE__ */
|
|
25196
|
+
return /* @__PURE__ */ jsxs49(Fragment12, { children: [
|
|
25197
|
+
/* @__PURE__ */ jsx56(DepositHeader, { title: "Withdrawal Details", showClose: true, onClose }),
|
|
25198
|
+
/* @__PURE__ */ jsx56(DepositDetailContent, { execution: latestExecution, variant: "withdraw" }),
|
|
25199
|
+
/* @__PURE__ */ jsxs49("div", { className: "uf-flex uf-gap-2 uf-px-2 uf-pt-2", children: [
|
|
25200
|
+
/* @__PURE__ */ jsx56(
|
|
23998
25201
|
"button",
|
|
23999
25202
|
{
|
|
24000
25203
|
type: "button",
|
|
@@ -24010,7 +25213,7 @@ function WithdrawConfirmingView({
|
|
|
24010
25213
|
children: "Withdrawal History"
|
|
24011
25214
|
}
|
|
24012
25215
|
),
|
|
24013
|
-
/* @__PURE__ */
|
|
25216
|
+
/* @__PURE__ */ jsx56(
|
|
24014
25217
|
"button",
|
|
24015
25218
|
{
|
|
24016
25219
|
type: "button",
|
|
@@ -24027,7 +25230,7 @@ function WithdrawConfirmingView({
|
|
|
24027
25230
|
}
|
|
24028
25231
|
)
|
|
24029
25232
|
] }),
|
|
24030
|
-
/* @__PURE__ */
|
|
25233
|
+
/* @__PURE__ */ jsx56("div", { className: "uf-pt-3", children: /* @__PURE__ */ jsx56(
|
|
24031
25234
|
PoweredByUnifold,
|
|
24032
25235
|
{
|
|
24033
25236
|
color: colors2.foregroundMuted,
|
|
@@ -24036,15 +25239,15 @@ function WithdrawConfirmingView({
|
|
|
24036
25239
|
) })
|
|
24037
25240
|
] });
|
|
24038
25241
|
}
|
|
24039
|
-
return /* @__PURE__ */
|
|
24040
|
-
/* @__PURE__ */
|
|
24041
|
-
/* @__PURE__ */
|
|
24042
|
-
/* @__PURE__ */
|
|
25242
|
+
return /* @__PURE__ */ jsxs49(Fragment12, { children: [
|
|
25243
|
+
/* @__PURE__ */ jsx56(DepositHeader, { title: "Withdrawal Status", showClose: true, onClose }),
|
|
25244
|
+
/* @__PURE__ */ jsxs49("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-16 uf-px-4", children: [
|
|
25245
|
+
/* @__PURE__ */ jsx56(
|
|
24043
25246
|
"div",
|
|
24044
25247
|
{
|
|
24045
25248
|
className: "uf-w-20 uf-h-20 uf-rounded-full uf-flex uf-items-center uf-justify-center uf-mb-6",
|
|
24046
25249
|
style: { backgroundColor: `${colors2.primary}20` },
|
|
24047
|
-
children: /* @__PURE__ */
|
|
25250
|
+
children: /* @__PURE__ */ jsx56(
|
|
24048
25251
|
"svg",
|
|
24049
25252
|
{
|
|
24050
25253
|
width: "40",
|
|
@@ -24052,7 +25255,7 @@ function WithdrawConfirmingView({
|
|
|
24052
25255
|
viewBox: "0 0 24 24",
|
|
24053
25256
|
fill: "none",
|
|
24054
25257
|
className: "uf-animate-spin",
|
|
24055
|
-
children: /* @__PURE__ */
|
|
25258
|
+
children: /* @__PURE__ */ jsx56(
|
|
24056
25259
|
"path",
|
|
24057
25260
|
{
|
|
24058
25261
|
d: "M21 12a9 9 0 1 1-6.22-8.56",
|
|
@@ -24065,7 +25268,7 @@ function WithdrawConfirmingView({
|
|
|
24065
25268
|
)
|
|
24066
25269
|
}
|
|
24067
25270
|
),
|
|
24068
|
-
/* @__PURE__ */
|
|
25271
|
+
/* @__PURE__ */ jsx56(
|
|
24069
25272
|
"h3",
|
|
24070
25273
|
{
|
|
24071
25274
|
className: "uf-text-xl uf-mb-2",
|
|
@@ -24073,7 +25276,7 @@ function WithdrawConfirmingView({
|
|
|
24073
25276
|
children: "Checking Withdrawal"
|
|
24074
25277
|
}
|
|
24075
25278
|
),
|
|
24076
|
-
/* @__PURE__ */
|
|
25279
|
+
/* @__PURE__ */ jsxs49(
|
|
24077
25280
|
"p",
|
|
24078
25281
|
{
|
|
24079
25282
|
className: "uf-text-sm uf-text-center",
|
|
@@ -24089,7 +25292,7 @@ function WithdrawConfirmingView({
|
|
|
24089
25292
|
}
|
|
24090
25293
|
)
|
|
24091
25294
|
] }),
|
|
24092
|
-
showButton && /* @__PURE__ */
|
|
25295
|
+
showButton && /* @__PURE__ */ jsx56("div", { className: "uf-px-1 uf-pb-1", children: /* @__PURE__ */ jsx56(
|
|
24093
25296
|
"button",
|
|
24094
25297
|
{
|
|
24095
25298
|
type: "button",
|
|
@@ -24105,7 +25308,7 @@ function WithdrawConfirmingView({
|
|
|
24105
25308
|
children: "Withdrawal History"
|
|
24106
25309
|
}
|
|
24107
25310
|
) }),
|
|
24108
|
-
/* @__PURE__ */
|
|
25311
|
+
/* @__PURE__ */ jsx56("div", { className: "uf-pt-3", children: /* @__PURE__ */ jsx56(
|
|
24109
25312
|
PoweredByUnifold,
|
|
24110
25313
|
{
|
|
24111
25314
|
color: colors2.foregroundMuted,
|
|
@@ -24135,14 +25338,14 @@ function WithdrawModal({
|
|
|
24135
25338
|
hideOverlay = false
|
|
24136
25339
|
}) {
|
|
24137
25340
|
const { colors: colors2, fonts, components } = useTheme();
|
|
24138
|
-
const [containerEl, setContainerEl] =
|
|
24139
|
-
const containerCallbackRef =
|
|
25341
|
+
const [containerEl, setContainerEl] = useState32(null);
|
|
25342
|
+
const containerCallbackRef = useCallback72((el) => {
|
|
24140
25343
|
setContainerEl(el);
|
|
24141
25344
|
}, []);
|
|
24142
|
-
const [resolvedTheme, setResolvedTheme] =
|
|
25345
|
+
const [resolvedTheme, setResolvedTheme] = useState32(
|
|
24143
25346
|
theme === "auto" ? "dark" : theme
|
|
24144
25347
|
);
|
|
24145
|
-
|
|
25348
|
+
useEffect272(() => {
|
|
24146
25349
|
if (theme === "auto") {
|
|
24147
25350
|
const mq = window.matchMedia("(prefers-color-scheme: dark)");
|
|
24148
25351
|
setResolvedTheme(mq.matches ? "dark" : "light");
|
|
@@ -24171,28 +25374,12 @@ function WithdrawModal({
|
|
|
24171
25374
|
publishableKey,
|
|
24172
25375
|
enabled: open
|
|
24173
25376
|
});
|
|
24174
|
-
const [selectedToken, setSelectedToken] =
|
|
24175
|
-
const [selectedChain, setSelectedChain] =
|
|
24176
|
-
const [
|
|
24177
|
-
const
|
|
24178
|
-
const
|
|
24179
|
-
|
|
24180
|
-
if (!senderAddress || !open) {
|
|
24181
|
-
setDetectedWallet(null);
|
|
24182
|
-
return;
|
|
24183
|
-
}
|
|
24184
|
-
let cancelled = false;
|
|
24185
|
-
detectBrowserWallet(sourceChainType, senderAddress).then((wallet) => {
|
|
24186
|
-
if (!cancelled) setDetectedWallet(wallet);
|
|
24187
|
-
});
|
|
24188
|
-
return () => {
|
|
24189
|
-
cancelled = true;
|
|
24190
|
-
};
|
|
24191
|
-
}, [senderAddress, sourceChainType, open]);
|
|
24192
|
-
const [view, setView] = useState31("form");
|
|
24193
|
-
const [withdrawDepositWalletId, setWithdrawDepositWalletId] = useState31();
|
|
24194
|
-
const [selectedExecution, setSelectedExecution] = useState31(null);
|
|
24195
|
-
const [submittedTxInfo, setSubmittedTxInfo] = useState31(null);
|
|
25377
|
+
const [selectedToken, setSelectedToken] = useState32(null);
|
|
25378
|
+
const [selectedChain, setSelectedChain] = useState32(null);
|
|
25379
|
+
const [view, setView] = useState32("form");
|
|
25380
|
+
const [withdrawDepositWalletId, setWithdrawDepositWalletId] = useState32();
|
|
25381
|
+
const [selectedExecution, setSelectedExecution] = useState32(null);
|
|
25382
|
+
const [submittedTxInfo, setSubmittedTxInfo] = useState32(null);
|
|
24196
25383
|
const { executions: realtimeExecutions } = useWithdrawPolling({
|
|
24197
25384
|
userId: externalUserId,
|
|
24198
25385
|
publishableKey,
|
|
@@ -24207,7 +25394,7 @@ function WithdrawModal({
|
|
|
24207
25394
|
refetchInterval: view === "tracker" || view === "detail" ? 5e3 : 15e3
|
|
24208
25395
|
});
|
|
24209
25396
|
const allWithdrawals = allWithdrawalsData?.data ?? [];
|
|
24210
|
-
const handleDepositWalletCreation =
|
|
25397
|
+
const handleDepositWalletCreation = useCallback72(async (params) => {
|
|
24211
25398
|
const { data: wallets } = await createDepositAddress(
|
|
24212
25399
|
{
|
|
24213
25400
|
external_user_id: externalUserId,
|
|
@@ -24226,11 +25413,11 @@ function WithdrawModal({
|
|
|
24226
25413
|
setWithdrawDepositWalletId(depositWallet.id);
|
|
24227
25414
|
return depositWallet;
|
|
24228
25415
|
}, [externalUserId, publishableKey, sourceChainType]);
|
|
24229
|
-
const handleWithdrawSubmitted =
|
|
25416
|
+
const handleWithdrawSubmitted = useCallback72((txInfo) => {
|
|
24230
25417
|
setSubmittedTxInfo(txInfo);
|
|
24231
25418
|
setView("confirming");
|
|
24232
25419
|
}, []);
|
|
24233
|
-
|
|
25420
|
+
useEffect272(() => {
|
|
24234
25421
|
if (!destinationTokens.length || selectedToken) return;
|
|
24235
25422
|
const first = destinationTokens[0];
|
|
24236
25423
|
if (first?.chains.length > 0) {
|
|
@@ -24238,8 +25425,8 @@ function WithdrawModal({
|
|
|
24238
25425
|
setSelectedChain(first.chains[0]);
|
|
24239
25426
|
}
|
|
24240
25427
|
}, [destinationTokens, selectedToken]);
|
|
24241
|
-
const resetViewTimeoutRef =
|
|
24242
|
-
const handleClose =
|
|
25428
|
+
const resetViewTimeoutRef = useRef102(null);
|
|
25429
|
+
const handleClose = useCallback72(() => {
|
|
24243
25430
|
onOpenChange(false);
|
|
24244
25431
|
if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
|
|
24245
25432
|
resetViewTimeoutRef.current = setTimeout(() => {
|
|
@@ -24252,7 +25439,7 @@ function WithdrawModal({
|
|
|
24252
25439
|
resetViewTimeoutRef.current = null;
|
|
24253
25440
|
}, 200);
|
|
24254
25441
|
}, [onOpenChange]);
|
|
24255
|
-
|
|
25442
|
+
useLayoutEffect42(() => {
|
|
24256
25443
|
if (!open) return;
|
|
24257
25444
|
if (resetViewTimeoutRef.current) {
|
|
24258
25445
|
clearTimeout(resetViewTimeoutRef.current);
|
|
@@ -24265,26 +25452,25 @@ function WithdrawModal({
|
|
|
24265
25452
|
setSubmittedTxInfo(null);
|
|
24266
25453
|
setWithdrawDepositWalletId(void 0);
|
|
24267
25454
|
}, [open]);
|
|
24268
|
-
|
|
25455
|
+
useEffect272(() => () => {
|
|
24269
25456
|
if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
|
|
24270
25457
|
}, []);
|
|
24271
|
-
const handleTokenSymbolChange =
|
|
25458
|
+
const handleTokenSymbolChange = useCallback72((symbol) => {
|
|
24272
25459
|
const tok = destinationTokens.find((t11) => t11.symbol === symbol);
|
|
24273
25460
|
if (tok) {
|
|
24274
25461
|
setSelectedToken(tok);
|
|
24275
25462
|
if (tok.chains.length > 0) setSelectedChain(tok.chains[0]);
|
|
24276
25463
|
}
|
|
24277
25464
|
}, [destinationTokens]);
|
|
24278
|
-
const handleChainKeyChange =
|
|
25465
|
+
const handleChainKeyChange = useCallback72((chainKey) => {
|
|
24279
25466
|
if (!selectedToken) return;
|
|
24280
25467
|
const chain = selectedToken.chains.find((c) => getChainKey5(c.chain_id, c.chain_type) === chainKey);
|
|
24281
25468
|
if (chain) setSelectedChain(chain);
|
|
24282
25469
|
}, [selectedToken]);
|
|
24283
25470
|
const isSourceSupported = sourceValidation?.isSupported ?? null;
|
|
24284
|
-
const canWithdraw = !!onWithdraw || isWalletMatch;
|
|
24285
25471
|
const isAnyLoading = tokensLoading || isCheckingSourceToken;
|
|
24286
|
-
const withdrawPoweredByFooter = /* @__PURE__ */
|
|
24287
|
-
return /* @__PURE__ */
|
|
25472
|
+
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" }) });
|
|
25473
|
+
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
25474
|
DialogContent2,
|
|
24289
25475
|
{
|
|
24290
25476
|
ref: hideOverlay ? containerCallbackRef : void 0,
|
|
@@ -24293,7 +25479,7 @@ function WithdrawModal({
|
|
|
24293
25479
|
style: { backgroundColor: colors2.background },
|
|
24294
25480
|
onPointerDownOutside: (e) => e.preventDefault(),
|
|
24295
25481
|
onInteractOutside: (e) => e.preventDefault(),
|
|
24296
|
-
children: /* @__PURE__ */
|
|
25482
|
+
children: /* @__PURE__ */ jsx57(ThemeStyleInjector, { children: view === "confirming" && submittedTxInfo ? /* @__PURE__ */ jsx57(
|
|
24297
25483
|
WithdrawConfirmingView,
|
|
24298
25484
|
{
|
|
24299
25485
|
txInfo: submittedTxInfo,
|
|
@@ -24301,18 +25487,18 @@ function WithdrawModal({
|
|
|
24301
25487
|
onClose: handleClose,
|
|
24302
25488
|
onViewTracker: () => setView("tracker")
|
|
24303
25489
|
}
|
|
24304
|
-
) : view === "detail" && selectedExecution ? /* @__PURE__ */
|
|
24305
|
-
/* @__PURE__ */
|
|
25490
|
+
) : view === "detail" && selectedExecution ? /* @__PURE__ */ jsxs50(Fragment13, { children: [
|
|
25491
|
+
/* @__PURE__ */ jsx57(DepositHeader, { title: "Withdrawal Details", showBack: true, showClose: !hideOverlay, onBack: () => {
|
|
24306
25492
|
setSelectedExecution(null);
|
|
24307
25493
|
setView("tracker");
|
|
24308
25494
|
}, onClose: handleClose }),
|
|
24309
|
-
/* @__PURE__ */
|
|
25495
|
+
/* @__PURE__ */ jsx57(DepositDetailContent, { execution: selectedExecution, variant: "withdraw" }),
|
|
24310
25496
|
withdrawPoweredByFooter
|
|
24311
25497
|
] }) : view === "tracker" ? (
|
|
24312
25498
|
/* ---------- Tracker view: execution list ---------- */
|
|
24313
|
-
/* @__PURE__ */
|
|
24314
|
-
/* @__PURE__ */
|
|
24315
|
-
/* @__PURE__ */
|
|
25499
|
+
/* @__PURE__ */ jsxs50(Fragment13, { children: [
|
|
25500
|
+
/* @__PURE__ */ jsx57(DepositHeader, { title: "Withdrawal History", showBack: true, showClose: !hideOverlay, onBack: () => setView("form"), onClose: handleClose }),
|
|
25501
|
+
/* @__PURE__ */ jsx57("div", { className: "uf-h-[460px] uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: /* @__PURE__ */ jsx57("div", { className: "uf-flex uf-flex-col uf-gap-2", 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
25502
|
WithdrawExecutionItem,
|
|
24317
25503
|
{
|
|
24318
25504
|
execution: ex,
|
|
@@ -24322,20 +25508,20 @@ function WithdrawModal({
|
|
|
24322
25508
|
}
|
|
24323
25509
|
},
|
|
24324
25510
|
ex.id
|
|
24325
|
-
)) }),
|
|
25511
|
+
)) }) }),
|
|
24326
25512
|
withdrawPoweredByFooter
|
|
24327
25513
|
] })
|
|
24328
25514
|
) : (
|
|
24329
25515
|
/* ---------- Form view (default) ---------- */
|
|
24330
|
-
/* @__PURE__ */
|
|
24331
|
-
/* @__PURE__ */
|
|
24332
|
-
/* @__PURE__ */
|
|
24333
|
-
isAnyLoading ? /* @__PURE__ */
|
|
24334
|
-
/* @__PURE__ */
|
|
24335
|
-
/* @__PURE__ */
|
|
24336
|
-
/* @__PURE__ */
|
|
24337
|
-
] }) : /* @__PURE__ */
|
|
24338
|
-
/* @__PURE__ */
|
|
25516
|
+
/* @__PURE__ */ jsxs50(Fragment13, { children: [
|
|
25517
|
+
/* @__PURE__ */ jsx57(DepositHeader, { title: modalTitle || t9.title, showClose: !hideOverlay, onClose: handleClose }),
|
|
25518
|
+
/* @__PURE__ */ jsxs50("div", { className: "uf-flex uf-flex-col uf-gap-3", children: [
|
|
25519
|
+
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: [
|
|
25520
|
+
/* @__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" }) }),
|
|
25521
|
+
/* @__PURE__ */ jsx57("h3", { className: "uf-text-lg uf-font-semibold uf-mb-2", style: { color: colors2.foreground, fontFamily: fonts.medium }, children: "Unsupported Source Token" }),
|
|
25522
|
+
/* @__PURE__ */ jsx57("p", { className: "uf-text-sm uf-max-w-[280px]", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: sourceValidation?.errorMessage })
|
|
25523
|
+
] }) : /* @__PURE__ */ jsxs50(Fragment13, { children: [
|
|
25524
|
+
/* @__PURE__ */ jsx57(
|
|
24339
25525
|
WithdrawDoubleInput,
|
|
24340
25526
|
{
|
|
24341
25527
|
tokens: destinationTokens,
|
|
@@ -24346,7 +25532,7 @@ function WithdrawModal({
|
|
|
24346
25532
|
isLoading: tokensLoading
|
|
24347
25533
|
}
|
|
24348
25534
|
),
|
|
24349
|
-
/* @__PURE__ */
|
|
25535
|
+
/* @__PURE__ */ jsx57(
|
|
24350
25536
|
WithdrawForm,
|
|
24351
25537
|
{
|
|
24352
25538
|
publishableKey,
|
|
@@ -24362,26 +25548,23 @@ function WithdrawModal({
|
|
|
24362
25548
|
estimatedProcessingTime: sourceValidation?.estimatedProcessingTime ?? null,
|
|
24363
25549
|
maxSlippagePercent: sourceValidation?.maxSlippagePercent ?? null,
|
|
24364
25550
|
priceImpactPercent: sourceValidation?.priceImpactPercent ?? null,
|
|
24365
|
-
|
|
25551
|
+
senderAddress,
|
|
24366
25552
|
sourceChainId,
|
|
24367
25553
|
sourceTokenAddress,
|
|
24368
|
-
isWalletMatch,
|
|
24369
|
-
connectedWalletName,
|
|
24370
|
-
canWithdraw,
|
|
24371
25554
|
onWithdraw,
|
|
24372
25555
|
onWithdrawError,
|
|
24373
25556
|
onDepositWalletCreation: handleDepositWalletCreation,
|
|
24374
25557
|
onWithdrawSubmitted: handleWithdrawSubmitted,
|
|
24375
|
-
footerLeft: /* @__PURE__ */
|
|
25558
|
+
footerLeft: /* @__PURE__ */ jsxs50(
|
|
24376
25559
|
"button",
|
|
24377
25560
|
{
|
|
24378
25561
|
onClick: () => setView("tracker"),
|
|
24379
25562
|
className: "uf-flex uf-items-center uf-gap-1 uf-transition-colors hover:uf-opacity-70",
|
|
24380
25563
|
style: { color: colors2.foregroundMuted },
|
|
24381
25564
|
children: [
|
|
24382
|
-
/* @__PURE__ */
|
|
25565
|
+
/* @__PURE__ */ jsx57(Clock, { className: "uf-w-3.5 uf-h-3.5" }),
|
|
24383
25566
|
"Withdrawal History",
|
|
24384
|
-
/* @__PURE__ */
|
|
25567
|
+
/* @__PURE__ */ jsx57(ChevronRight, { className: "uf-w-3 uf-h-3" })
|
|
24385
25568
|
]
|
|
24386
25569
|
}
|
|
24387
25570
|
)
|
|
@@ -24398,18 +25581,22 @@ function WithdrawModal({
|
|
|
24398
25581
|
var t10 = i18n2.withdrawModal;
|
|
24399
25582
|
|
|
24400
25583
|
// src/provider.tsx
|
|
24401
|
-
import { jsx as
|
|
25584
|
+
import { jsx as jsx59, jsxs as jsxs52 } from "react/jsx-runtime";
|
|
24402
25585
|
function UnifoldProvider2({
|
|
24403
25586
|
children,
|
|
24404
25587
|
publishableKey,
|
|
24405
25588
|
config
|
|
24406
25589
|
}) {
|
|
24407
|
-
const [isOpen, setIsOpen] =
|
|
24408
|
-
const [depositConfig, setDepositConfig] =
|
|
25590
|
+
const [isOpen, setIsOpen] = useState34(false);
|
|
25591
|
+
const [depositConfig, setDepositConfig] = useState34(
|
|
25592
|
+
null
|
|
25593
|
+
);
|
|
25594
|
+
const [isCheckoutOpen, setIsCheckoutOpen] = useState34(false);
|
|
25595
|
+
const [checkoutConfig, setCheckoutConfig] = useState34(
|
|
24409
25596
|
null
|
|
24410
25597
|
);
|
|
24411
|
-
const [isWithdrawOpen, setIsWithdrawOpen] =
|
|
24412
|
-
const [withdrawConfig, setWithdrawConfig] =
|
|
25598
|
+
const [isWithdrawOpen, setIsWithdrawOpen] = useState34(false);
|
|
25599
|
+
const [withdrawConfig, setWithdrawConfig] = useState34(
|
|
24413
25600
|
null
|
|
24414
25601
|
);
|
|
24415
25602
|
const [resolvedTheme, setResolvedTheme] = React38.useState("dark");
|
|
@@ -24507,6 +25694,75 @@ function UnifoldProvider2({
|
|
|
24507
25694
|
depositPromiseRef.current = null;
|
|
24508
25695
|
}
|
|
24509
25696
|
}, [depositConfig]);
|
|
25697
|
+
const checkoutPromiseRef = React38.useRef(null);
|
|
25698
|
+
const checkoutConfigRef = React38.useRef(null);
|
|
25699
|
+
checkoutConfigRef.current = checkoutConfig;
|
|
25700
|
+
const checkoutCloseTimeoutRef = React38.useRef(null);
|
|
25701
|
+
const checkoutCloseGuardRef = React38.useRef(false);
|
|
25702
|
+
const beginCheckout = useCallback12((config2) => {
|
|
25703
|
+
if (checkoutCloseTimeoutRef.current) {
|
|
25704
|
+
clearTimeout(checkoutCloseTimeoutRef.current);
|
|
25705
|
+
checkoutCloseTimeoutRef.current = null;
|
|
25706
|
+
}
|
|
25707
|
+
checkoutCloseGuardRef.current = false;
|
|
25708
|
+
if (checkoutPromiseRef.current) {
|
|
25709
|
+
console.warn("[UnifoldProvider] A checkout is already in progress. Cancelling previous checkout.");
|
|
25710
|
+
checkoutPromiseRef.current.reject({
|
|
25711
|
+
message: "Checkout cancelled - new checkout started",
|
|
25712
|
+
code: "CHECKOUT_SUPERSEDED"
|
|
25713
|
+
});
|
|
25714
|
+
checkoutPromiseRef.current = null;
|
|
25715
|
+
}
|
|
25716
|
+
const promise = new Promise((resolve, reject) => {
|
|
25717
|
+
checkoutPromiseRef.current = { resolve, reject };
|
|
25718
|
+
});
|
|
25719
|
+
promise.catch(() => {
|
|
25720
|
+
});
|
|
25721
|
+
setCheckoutConfig(config2);
|
|
25722
|
+
setIsCheckoutOpen(true);
|
|
25723
|
+
return promise;
|
|
25724
|
+
}, []);
|
|
25725
|
+
const closeCheckout = useCallback12(() => {
|
|
25726
|
+
if (checkoutCloseGuardRef.current) {
|
|
25727
|
+
return;
|
|
25728
|
+
}
|
|
25729
|
+
checkoutCloseGuardRef.current = true;
|
|
25730
|
+
const promiseToReject = checkoutPromiseRef.current;
|
|
25731
|
+
checkoutPromiseRef.current = null;
|
|
25732
|
+
if (checkoutConfigRef.current?.onClose) {
|
|
25733
|
+
checkoutConfigRef.current.onClose();
|
|
25734
|
+
}
|
|
25735
|
+
if (promiseToReject) {
|
|
25736
|
+
promiseToReject.reject({
|
|
25737
|
+
message: "Checkout cancelled by user",
|
|
25738
|
+
code: "CHECKOUT_CANCELLED"
|
|
25739
|
+
});
|
|
25740
|
+
}
|
|
25741
|
+
setIsCheckoutOpen(false);
|
|
25742
|
+
checkoutCloseTimeoutRef.current = setTimeout(() => {
|
|
25743
|
+
setCheckoutConfig(null);
|
|
25744
|
+
checkoutCloseTimeoutRef.current = null;
|
|
25745
|
+
}, 200);
|
|
25746
|
+
}, []);
|
|
25747
|
+
const handleCheckoutSuccess = useCallback12((data) => {
|
|
25748
|
+
if (checkoutConfig?.onSuccess) {
|
|
25749
|
+
checkoutConfig.onSuccess(data);
|
|
25750
|
+
}
|
|
25751
|
+
if (checkoutPromiseRef.current) {
|
|
25752
|
+
checkoutPromiseRef.current.resolve(data);
|
|
25753
|
+
checkoutPromiseRef.current = null;
|
|
25754
|
+
}
|
|
25755
|
+
}, [checkoutConfig]);
|
|
25756
|
+
const handleCheckoutError = useCallback12((error) => {
|
|
25757
|
+
console.error("[UnifoldProvider] Checkout error:", error);
|
|
25758
|
+
if (checkoutConfig?.onError) {
|
|
25759
|
+
checkoutConfig.onError(error);
|
|
25760
|
+
}
|
|
25761
|
+
if (checkoutPromiseRef.current) {
|
|
25762
|
+
checkoutPromiseRef.current.reject(error);
|
|
25763
|
+
checkoutPromiseRef.current = null;
|
|
25764
|
+
}
|
|
25765
|
+
}, [checkoutConfig]);
|
|
24510
25766
|
const beginWithdraw = useCallback12((config2) => {
|
|
24511
25767
|
if (withdrawCloseTimeoutRef.current) {
|
|
24512
25768
|
clearTimeout(withdrawCloseTimeoutRef.current);
|
|
@@ -24575,16 +25831,16 @@ function UnifoldProvider2({
|
|
|
24575
25831
|
() => ({
|
|
24576
25832
|
beginDeposit,
|
|
24577
25833
|
closeDeposit,
|
|
24578
|
-
|
|
24579
|
-
|
|
25834
|
+
beginCheckout,
|
|
25835
|
+
closeCheckout,
|
|
24580
25836
|
beginWithdraw,
|
|
24581
25837
|
closeWithdraw,
|
|
24582
25838
|
handleWithdrawSuccess,
|
|
24583
25839
|
handleWithdrawError
|
|
24584
25840
|
}),
|
|
24585
|
-
[beginDeposit, closeDeposit,
|
|
25841
|
+
[beginDeposit, closeDeposit, beginCheckout, closeCheckout, beginWithdraw, closeWithdraw, handleWithdrawSuccess, handleWithdrawError]
|
|
24586
25842
|
);
|
|
24587
|
-
return /* @__PURE__ */
|
|
25843
|
+
return /* @__PURE__ */ jsx59(UnifoldProvider, { publishableKey, children: /* @__PURE__ */ jsx59(ConnectContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs52(
|
|
24588
25844
|
ThemeProvider,
|
|
24589
25845
|
{
|
|
24590
25846
|
mode: resolvedTheme,
|
|
@@ -24595,7 +25851,20 @@ function UnifoldProvider2({
|
|
|
24595
25851
|
components: config?.components,
|
|
24596
25852
|
children: [
|
|
24597
25853
|
children,
|
|
24598
|
-
|
|
25854
|
+
checkoutConfig && /* @__PURE__ */ jsx59(
|
|
25855
|
+
CheckoutModal,
|
|
25856
|
+
{
|
|
25857
|
+
open: isCheckoutOpen,
|
|
25858
|
+
onOpenChange: closeCheckout,
|
|
25859
|
+
clientSecret: checkoutConfig.clientSecret,
|
|
25860
|
+
publishableKey,
|
|
25861
|
+
enableConnectWallet: config?.enableConnectWallet,
|
|
25862
|
+
theme: resolvedTheme,
|
|
25863
|
+
onCheckoutSuccess: handleCheckoutSuccess,
|
|
25864
|
+
onCheckoutError: handleCheckoutError
|
|
25865
|
+
}
|
|
25866
|
+
),
|
|
25867
|
+
withdrawConfig && /* @__PURE__ */ jsx59(
|
|
24599
25868
|
WithdrawModal,
|
|
24600
25869
|
{
|
|
24601
25870
|
open: isWithdrawOpen,
|
|
@@ -24615,7 +25884,7 @@ function UnifoldProvider2({
|
|
|
24615
25884
|
theme: resolvedTheme
|
|
24616
25885
|
}
|
|
24617
25886
|
),
|
|
24618
|
-
depositConfig && /* @__PURE__ */
|
|
25887
|
+
depositConfig && /* @__PURE__ */ jsx59(
|
|
24619
25888
|
DepositModal,
|
|
24620
25889
|
{
|
|
24621
25890
|
open: isOpen,
|
|
@@ -24666,6 +25935,9 @@ function useUnifold2() {
|
|
|
24666
25935
|
beginDeposit: () => Promise.reject(new Error("SSR not supported")),
|
|
24667
25936
|
closeDeposit: () => {
|
|
24668
25937
|
},
|
|
25938
|
+
beginCheckout: () => Promise.reject(new Error("SSR not supported")),
|
|
25939
|
+
closeCheckout: () => {
|
|
25940
|
+
},
|
|
24669
25941
|
beginWithdraw: () => Promise.reject(new Error("SSR not supported")),
|
|
24670
25942
|
closeWithdraw: () => {
|
|
24671
25943
|
}
|
|
@@ -24678,6 +25950,8 @@ function useUnifold2() {
|
|
|
24678
25950
|
publishableKey: baseContext.publishableKey,
|
|
24679
25951
|
beginDeposit: connectContext.beginDeposit,
|
|
24680
25952
|
closeDeposit: connectContext.closeDeposit,
|
|
25953
|
+
beginCheckout: connectContext.beginCheckout,
|
|
25954
|
+
closeCheckout: connectContext.closeCheckout,
|
|
24681
25955
|
beginWithdraw: connectContext.beginWithdraw,
|
|
24682
25956
|
closeWithdraw: connectContext.closeWithdraw
|
|
24683
25957
|
};
|
|
@@ -24725,6 +25999,7 @@ lucide-react/dist/esm/Icon.js:
|
|
|
24725
25999
|
lucide-react/dist/esm/createLucideIcon.js:
|
|
24726
26000
|
lucide-react/dist/esm/icons/arrow-left-right.js:
|
|
24727
26001
|
lucide-react/dist/esm/icons/arrow-left.js:
|
|
26002
|
+
lucide-react/dist/esm/icons/arrow-right.js:
|
|
24728
26003
|
lucide-react/dist/esm/icons/arrow-up-down.js:
|
|
24729
26004
|
lucide-react/dist/esm/icons/check.js:
|
|
24730
26005
|
lucide-react/dist/esm/icons/chevron-down.js:
|