@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.js CHANGED
@@ -1185,7 +1185,7 @@ __export(index_exports, {
1185
1185
  module.exports = __toCommonJS(index_exports);
1186
1186
 
1187
1187
  // src/provider.tsx
1188
- var import_react31 = __toESM(require("react"));
1188
+ var import_react32 = __toESM(require("react"));
1189
1189
 
1190
1190
  // ../react-provider/dist/index.mjs
1191
1191
  var import_react = require("react");
@@ -1334,6 +1334,12 @@ var ArrowLeft = createLucideIcon("ArrowLeft", [
1334
1334
  ["path", { d: "M19 12H5", key: "x3x0zl" }]
1335
1335
  ]);
1336
1336
 
1337
+ // ../../node_modules/.pnpm/lucide-react@0.454.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/arrow-right.js
1338
+ var ArrowRight = createLucideIcon("ArrowRight", [
1339
+ ["path", { d: "M5 12h14", key: "1ays0h" }],
1340
+ ["path", { d: "m12 5 7 7-7 7", key: "xquz4c" }]
1341
+ ]);
1342
+
1337
1343
  // ../../node_modules/.pnpm/lucide-react@0.454.0_react@18.3.1/node_modules/lucide-react/dist/esm/icons/arrow-up-down.js
1338
1344
  var ArrowUpDown = createLucideIcon("ArrowUpDown", [
1339
1345
  ["path", { d: "m21 16-4 4-4-4", key: "f6ql7i" }],
@@ -6536,6 +6542,28 @@ async function verifyRecipientAddress(request, publishableKey) {
6536
6542
  }
6537
6543
  return response.json();
6538
6544
  }
6545
+ async function checkHypercoreActivation(request, publishableKey) {
6546
+ const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
6547
+ validatePublishableKey(pk);
6548
+ const response = await fetch(
6549
+ `${API_BASE_URL}/v1/public/addresses/hypercore/activation`,
6550
+ {
6551
+ method: "POST",
6552
+ headers: {
6553
+ accept: "application/json",
6554
+ "x-publishable-key": pk,
6555
+ "Content-Type": "application/json"
6556
+ },
6557
+ body: JSON.stringify(request)
6558
+ }
6559
+ );
6560
+ if (!response.ok) {
6561
+ throw new Error(
6562
+ `HyperCore activation check failed: ${response.statusText}`
6563
+ );
6564
+ }
6565
+ return response.json();
6566
+ }
6539
6567
  async function getExchanges(query, publishableKey) {
6540
6568
  const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
6541
6569
  validatePublishableKey(pk);
@@ -6620,6 +6648,119 @@ async function sendSolanaTransaction(request, publishableKey) {
6620
6648
  }
6621
6649
  return response.json();
6622
6650
  }
6651
+ async function retrievePaymentIntent(clientSecret, publishableKey) {
6652
+ const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
6653
+ validatePublishableKey(pk);
6654
+ const response = await fetch(
6655
+ `${API_BASE_URL}/v1/public/payment_intents/retrieve`,
6656
+ {
6657
+ method: "POST",
6658
+ headers: {
6659
+ accept: "application/json",
6660
+ "x-publishable-key": pk,
6661
+ "Content-Type": "application/json"
6662
+ },
6663
+ body: JSON.stringify({ client_secret: clientSecret })
6664
+ }
6665
+ );
6666
+ if (!response.ok) {
6667
+ const error = await response.json().catch(() => ({ message: response.statusText }));
6668
+ throw new Error(
6669
+ `Failed to retrieve payment intent: ${error.message || response.statusText}`
6670
+ );
6671
+ }
6672
+ return response.json();
6673
+ }
6674
+ async function listPaymentIntentExecutions(clientSecret, publishableKey) {
6675
+ const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
6676
+ validatePublishableKey(pk);
6677
+ const response = await fetch(
6678
+ `${API_BASE_URL}/v1/public/payment_intents/executions`,
6679
+ {
6680
+ method: "POST",
6681
+ headers: {
6682
+ accept: "application/json",
6683
+ "x-publishable-key": pk,
6684
+ "Content-Type": "application/json"
6685
+ },
6686
+ body: JSON.stringify({ client_secret: clientSecret })
6687
+ }
6688
+ );
6689
+ if (!response.ok) {
6690
+ const error = await response.json().catch(() => ({ message: response.statusText }));
6691
+ throw new Error(
6692
+ `Failed to list payment intent executions: ${error.message || response.statusText}`
6693
+ );
6694
+ }
6695
+ return response.json();
6696
+ }
6697
+ async function getDepositQuote(request, publishableKey) {
6698
+ const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
6699
+ validatePublishableKey(pk);
6700
+ const response = await fetch(`${API_BASE_URL}/v1/public/quotes`, {
6701
+ method: "POST",
6702
+ headers: {
6703
+ accept: "application/json",
6704
+ "x-publishable-key": pk,
6705
+ "Content-Type": "application/json"
6706
+ },
6707
+ body: JSON.stringify(request)
6708
+ });
6709
+ if (!response.ok) {
6710
+ const error = await response.json().catch(() => ({ message: response.statusText }));
6711
+ throw new Error(
6712
+ `Failed to get deposit quote: ${error.message || response.statusText}`
6713
+ );
6714
+ }
6715
+ const json = await response.json();
6716
+ return json.data;
6717
+ }
6718
+ async function buildHypercoreTransaction(request, publishableKey) {
6719
+ const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
6720
+ validatePublishableKey(pk);
6721
+ const response = await fetch(
6722
+ `${API_BASE_URL}/v1/public/transactions/hypercore/build`,
6723
+ {
6724
+ method: "POST",
6725
+ headers: {
6726
+ accept: "application/json",
6727
+ "x-publishable-key": pk,
6728
+ "Content-Type": "application/json"
6729
+ },
6730
+ body: JSON.stringify(request)
6731
+ }
6732
+ );
6733
+ if (!response.ok) {
6734
+ const error = await response.json().catch(() => ({ message: response.statusText }));
6735
+ throw new Error(
6736
+ `Failed to build HyperCore transaction: ${error.message || response.statusText}`
6737
+ );
6738
+ }
6739
+ return response.json();
6740
+ }
6741
+ async function sendHypercoreTransaction(request, publishableKey) {
6742
+ const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
6743
+ validatePublishableKey(pk);
6744
+ const response = await fetch(
6745
+ `${API_BASE_URL}/v1/public/transactions/hypercore/send`,
6746
+ {
6747
+ method: "POST",
6748
+ headers: {
6749
+ accept: "application/json",
6750
+ "x-publishable-key": pk,
6751
+ "Content-Type": "application/json"
6752
+ },
6753
+ body: JSON.stringify(request)
6754
+ }
6755
+ );
6756
+ if (!response.ok) {
6757
+ const error = await response.json().catch(() => ({ message: response.statusText }));
6758
+ throw new Error(
6759
+ `Failed to send HyperCore transaction: ${error.message || response.statusText}`
6760
+ );
6761
+ }
6762
+ return response.json();
6763
+ }
6623
6764
  function useUserIp() {
6624
6765
  const {
6625
6766
  data: userIpInfo,
@@ -10961,19 +11102,23 @@ var import_jsx_runtime68 = require("react/jsx-runtime");
10961
11102
  var import_react26 = require("react");
10962
11103
  var import_react_query11 = require("@tanstack/react-query");
10963
11104
  var import_react_query12 = require("@tanstack/react-query");
11105
+ var import_jsx_runtime69 = require("react/jsx-runtime");
11106
+ var import_react27 = require("react");
10964
11107
  var import_react_query13 = require("@tanstack/react-query");
10965
11108
  var import_react_query14 = require("@tanstack/react-query");
10966
- var import_react27 = require("react");
10967
- var import_jsx_runtime69 = require("react/jsx-runtime");
10968
- var import_react28 = require("react");
10969
11109
  var import_react_query15 = require("@tanstack/react-query");
11110
+ var import_react_query16 = require("@tanstack/react-query");
11111
+ var import_react28 = require("react");
10970
11112
  var import_jsx_runtime70 = require("react/jsx-runtime");
10971
- var import_jsx_runtime71 = require("react/jsx-runtime");
10972
11113
  var import_react29 = require("react");
11114
+ var import_react_query17 = require("@tanstack/react-query");
11115
+ var import_jsx_runtime71 = require("react/jsx-runtime");
10973
11116
  var import_jsx_runtime72 = require("react/jsx-runtime");
10974
- var import_jsx_runtime73 = require("react/jsx-runtime");
10975
11117
  var import_react30 = require("react");
11118
+ var import_jsx_runtime73 = require("react/jsx-runtime");
10976
11119
  var import_jsx_runtime74 = require("react/jsx-runtime");
11120
+ var import_react31 = require("react");
11121
+ var import_jsx_runtime75 = require("react/jsx-runtime");
10977
11122
  function cn(...inputs) {
10978
11123
  return twMerge(clsx(inputs));
10979
11124
  }
@@ -12284,6 +12429,7 @@ var CUTOFF_BUFFER_MS = 6e4;
12284
12429
  function useDepositPolling({
12285
12430
  userId,
12286
12431
  publishableKey,
12432
+ clientSecret,
12287
12433
  depositConfirmationMode = "auto_ui",
12288
12434
  depositWalletId,
12289
12435
  enabled = true,
@@ -12341,11 +12487,12 @@ function useDepositPolling({
12341
12487
  depositWalletId
12342
12488
  ]);
12343
12489
  (0, import_react12.useEffect)(() => {
12344
- if (!userId || !enabled) return;
12490
+ if (!enabled) return;
12491
+ if (!clientSecret && !userId) return;
12345
12492
  const modalOpenedAt = modalOpenedAtRef.current;
12346
12493
  const poll = async () => {
12347
12494
  try {
12348
- const response = await queryExecutions(userId, publishableKey, ActionType.Deposit);
12495
+ const response = clientSecret ? await listPaymentIntentExecutions(clientSecret, publishableKey) : await queryExecutions(userId, publishableKey, ActionType.Deposit);
12349
12496
  const cutoff = new Date(modalOpenedAt.getTime() - CUTOFF_BUFFER_MS);
12350
12497
  const sortedExecutions = [...response.data].sort((a, b) => {
12351
12498
  const timeA = a.created_at ? new Date(a.created_at).getTime() : 0;
@@ -12429,7 +12576,7 @@ function useDepositPolling({
12429
12576
  clearInterval(pollInterval);
12430
12577
  setIsPolling(false);
12431
12578
  };
12432
- }, [userId, publishableKey, enabled]);
12579
+ }, [userId, publishableKey, clientSecret, enabled]);
12433
12580
  (0, import_react12.useEffect)(() => {
12434
12581
  if (!pollingEnabled || !depositWalletId) return;
12435
12582
  const triggerPoll = async () => {
@@ -18938,6 +19085,7 @@ var parseChainKey = (chainKey) => {
18938
19085
  function TransferCryptoSingleInput({
18939
19086
  userId,
18940
19087
  publishableKey,
19088
+ clientSecret,
18941
19089
  recipientAddress,
18942
19090
  destinationChainType,
18943
19091
  destinationChainId,
@@ -18950,7 +19098,9 @@ function TransferCryptoSingleInput({
18950
19098
  onExecutionsChange,
18951
19099
  onDepositSuccess,
18952
19100
  onDepositError,
18953
- wallets: externalWallets
19101
+ wallets: externalWallets,
19102
+ onSourceTokenChange,
19103
+ checkoutQuote
18954
19104
  }) {
18955
19105
  const { themeClass, colors: colors2, fonts, components } = useTheme();
18956
19106
  const isDarkMode = themeClass.includes("uf-dark");
@@ -19017,12 +19167,28 @@ function TransferCryptoSingleInput({
19017
19167
  } = useDepositPolling({
19018
19168
  userId,
19019
19169
  publishableKey,
19170
+ clientSecret,
19020
19171
  depositConfirmationMode,
19021
19172
  depositWalletId: currentWallet?.id,
19022
19173
  enabled: true,
19023
19174
  onDepositSuccess,
19024
19175
  onDepositError
19025
19176
  });
19177
+ (0, import_react18.useEffect)(() => {
19178
+ if (!onSourceTokenChange || !token || !chain || !initialSelectionDone) return;
19179
+ const { chainType, chainId } = parseChainKey(chain);
19180
+ const matchedToken = supportedTokens.find((t11) => t11.symbol === token);
19181
+ const matchedChain = matchedToken?.chains.find(
19182
+ (c) => c.chain_type === chainType && c.chain_id === chainId
19183
+ );
19184
+ onSourceTokenChange({
19185
+ symbol: token,
19186
+ chainType,
19187
+ chainId,
19188
+ tokenAddress: matchedChain?.token_address ?? "",
19189
+ minimumDepositAmountUsd: matchedChain?.minimum_deposit_amount_usd ?? 0
19190
+ });
19191
+ }, [token, chain, initialSelectionDone, onSourceTokenChange, supportedTokens]);
19026
19192
  (0, import_react18.useEffect)(() => {
19027
19193
  if (onExecutionsChange) {
19028
19194
  onExecutionsChange(depositExecutions);
@@ -19169,6 +19335,53 @@ function TransferCryptoSingleInput({
19169
19335
  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("span", { children: "Retrying automatically every 5 seconds..." })
19170
19336
  ] })
19171
19337
  ] }),
19338
+ checkoutQuote && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
19339
+ "div",
19340
+ {
19341
+ className: "uf-rounded-xl uf-px-3 uf-py-2 uf-flex uf-items-center uf-justify-between",
19342
+ style: {
19343
+ backgroundColor: components.card.backgroundColor,
19344
+ border: `${components.card.borderWidth}px solid ${components.card.borderColor}`,
19345
+ borderRadius: components.card.borderRadius
19346
+ },
19347
+ children: [
19348
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
19349
+ "span",
19350
+ {
19351
+ className: "uf-text-xs",
19352
+ style: { color: components.card.subtitleColor, fontFamily: fonts.regular },
19353
+ children: "You send"
19354
+ }
19355
+ ),
19356
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
19357
+ "span",
19358
+ {
19359
+ className: "uf-text-sm uf-font-semibold",
19360
+ style: { color: components.card.titleColor, fontFamily: fonts.semibold },
19361
+ children: [
19362
+ (Number(checkoutQuote.sourceAmount) / 10 ** checkoutQuote.sourceTokenDecimals).toFixed(
19363
+ Math.min(checkoutQuote.sourceTokenDecimals, 6)
19364
+ ),
19365
+ " ",
19366
+ checkoutQuote.sourceTokenSymbol,
19367
+ checkoutQuote.sourceAmountUsd && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
19368
+ "span",
19369
+ {
19370
+ className: "uf-text-xs uf-font-normal uf-ml-1.5",
19371
+ style: { color: components.card.subtitleColor },
19372
+ children: [
19373
+ "($",
19374
+ checkoutQuote.sourceAmountUsd,
19375
+ ")"
19376
+ ]
19377
+ }
19378
+ )
19379
+ ]
19380
+ }
19381
+ )
19382
+ ]
19383
+ }
19384
+ ),
19172
19385
  /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-pt-2", children: [
19173
19386
  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1", style: { color: components.card.labelColor }, children: "Intent address" }),
19174
19387
  /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "uf-shadow-lg", style: { borderRadius: components.card.borderRadius, border: `${components.card.borderWidth}px solid ${components.card.borderColor}` }, children: loading || tokensLoading || !initialSelectionDone ? (
@@ -19990,9 +20203,16 @@ function SelectTokenView({
19990
20203
  onBack,
19991
20204
  onClose,
19992
20205
  onDisconnectWallet,
19993
- isDisconnectingWallet = false
20206
+ isDisconnectingWallet = false,
20207
+ checkoutAmountUsd,
20208
+ checkoutReceivedUsd
19994
20209
  }) {
19995
20210
  const { colors: colors2, fonts, components } = useTheme();
20211
+ const isCheckout = !!checkoutAmountUsd;
20212
+ const headerSubtitle = isCheckout ? parseFloat(checkoutReceivedUsd || "0") > 0 ? `$${checkoutReceivedUsd} / $${checkoutAmountUsd} received` : `Amount due: $${checkoutAmountUsd}` : formatBalanceDisplay(
20213
+ `$${totalBalanceUsd || "0.00"}`,
20214
+ projectName
20215
+ );
19996
20216
  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
19997
20217
  "div",
19998
20218
  {
@@ -20001,11 +20221,8 @@ function SelectTokenView({
20001
20221
  /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
20002
20222
  DepositHeader,
20003
20223
  {
20004
- title: "Select Token",
20005
- subtitle: formatBalanceDisplay(
20006
- `$${totalBalanceUsd || "0.00"}`,
20007
- projectName
20008
- ),
20224
+ title: isCheckout ? "Select Token" : "Select Token",
20225
+ subtitle: headerSubtitle,
20009
20226
  showBack: true,
20010
20227
  onBack,
20011
20228
  onClose
@@ -20233,10 +20450,19 @@ function EnterAmountView({
20233
20450
  onReview,
20234
20451
  onBack,
20235
20452
  onClose,
20236
- quickSelectMode
20453
+ quickSelectMode,
20454
+ checkoutAmountUsd,
20455
+ checkoutReceivedUsd
20237
20456
  }) {
20238
20457
  const { colors: colors2, fonts, components } = useTheme();
20458
+ const isCheckout = !!checkoutAmountUsd;
20239
20459
  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}`;
20460
+ const checkoutRemainingUsd = isCheckout ? Math.max(
20461
+ parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0"),
20462
+ 0
20463
+ ).toFixed(2) : null;
20464
+ const headerTitle = isCheckout ? `Pay $${checkoutRemainingUsd}` : "Enter Amount";
20465
+ const headerSubtitle = isCheckout ? parseFloat(checkoutReceivedUsd || "0") > 0 ? `$${checkoutReceivedUsd} / $${checkoutAmountUsd} received` : null : balanceSubtitle;
20240
20466
  const usePercentageChips = quickSelectMode === "percentage" && maxUsdAmount > 0;
20241
20467
  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";
20242
20468
  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
@@ -20250,14 +20476,27 @@ function EnterAmountView({
20250
20476
  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
20251
20477
  DepositHeader,
20252
20478
  {
20253
- title: "Enter Amount",
20254
- subtitle: balanceSubtitle,
20479
+ title: headerTitle,
20480
+ subtitle: headerSubtitle ?? void 0,
20255
20481
  showBack: true,
20256
20482
  onBack,
20257
20483
  onClose
20258
20484
  }
20259
20485
  ),
20260
- walletInfoProp ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "uf-flex uf-w-full uf-justify-center uf-mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(WalletWithNetworkBadge, { walletInfo: walletInfoProp }) }) : null,
20486
+ walletInfoProp ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "uf-flex uf-w-full uf-justify-center uf-mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-gap-1", children: [
20487
+ /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(WalletWithNetworkBadge, { walletInfo: walletInfoProp }),
20488
+ isCheckout && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
20489
+ "span",
20490
+ {
20491
+ className: "uf-text-xs",
20492
+ style: {
20493
+ color: colors2.foregroundMuted,
20494
+ fontFamily: fonts.regular
20495
+ },
20496
+ children: balanceSubtitle
20497
+ }
20498
+ )
20499
+ ] }) }) : null,
20261
20500
  /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "uf-flex uf-min-h-0 uf-flex-1 uf-flex-col", children: [
20262
20501
  /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "uf-min-h-0 uf-flex-1", children: [
20263
20502
  /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "uf-text-center uf-py-8", children: [
@@ -20280,7 +20519,9 @@ function EnterAmountView({
20280
20519
  inputMode: "decimal",
20281
20520
  placeholder: "0",
20282
20521
  value: amountUsd,
20522
+ readOnly: isCheckout,
20283
20523
  onChange: (e) => {
20524
+ if (isCheckout) return;
20284
20525
  const value = e.target.value;
20285
20526
  if (value === "" || /^\d*\.?\d*$/.test(value)) {
20286
20527
  const decimalIndex = value.indexOf(".");
@@ -20291,7 +20532,7 @@ function EnterAmountView({
20291
20532
  onAmountChange(value);
20292
20533
  }
20293
20534
  },
20294
- className: "uf-bg-transparent uf-outline-none uf-text-center uf-font-normal uf-w-auto uf-min-w-[60px]",
20535
+ className: `uf-bg-transparent uf-outline-none uf-text-center uf-font-normal uf-w-auto uf-min-w-[60px] ${isCheckout ? "uf-cursor-default" : ""}`,
20295
20536
  style: {
20296
20537
  fontSize: `${Math.max(3.75 - (amountUsd || "0").length * 0.15, 2)}rem`,
20297
20538
  color: components.input.textColor,
@@ -20313,7 +20554,7 @@ function EnterAmountView({
20313
20554
  }
20314
20555
  )
20315
20556
  ] }),
20316
- /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "uf-mb-4 uf-flex uf-w-full uf-min-w-0 uf-flex-nowrap uf-gap-1.5 uf-overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: usePercentageChips ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
20557
+ !isCheckout && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "uf-mb-4 uf-flex uf-w-full uf-min-w-0 uf-flex-nowrap uf-gap-1.5 uf-overflow-x-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: usePercentageChips ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(import_jsx_runtime63.Fragment, { children: [
20317
20558
  PERCENT_QUICK_AMOUNTS.map((pct) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
20318
20559
  "button",
20319
20560
  {
@@ -20382,7 +20623,46 @@ function EnterAmountView({
20382
20623
  }
20383
20624
  )
20384
20625
  ] }) }),
20385
- tokenChainDetails && tokenChainDetails.minimum_deposit_amount_usd > 0 && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
20626
+ tokenChainDetails && tokenChainDetails.minimum_deposit_amount_usd > 0 && (isCheckout && checkoutAmountUsd && inputUsdNum > parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0") + 5e-3 ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
20627
+ "div",
20628
+ {
20629
+ className: "uf-rounded-lg uf-px-3 uf-py-2 uf-mb-3 uf-text-center",
20630
+ style: {
20631
+ backgroundColor: colors2.warning + "15",
20632
+ border: `1px solid ${colors2.warning}30`,
20633
+ borderRadius: components.card.borderRadius,
20634
+ animation: "uf-fadeSlideIn 0.4s ease-out"
20635
+ },
20636
+ children: [
20637
+ /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
20638
+ "div",
20639
+ {
20640
+ className: "uf-text-xs uf-font-medium",
20641
+ style: { color: colors2.warning, fontFamily: fonts.medium },
20642
+ children: [
20643
+ "Minimum for ",
20644
+ selectedToken.symbol,
20645
+ " on ",
20646
+ selectedToken.chain_name,
20647
+ " is $",
20648
+ tokenChainDetails.minimum_deposit_amount_usd.toFixed(2)
20649
+ ]
20650
+ }
20651
+ ),
20652
+ /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
20653
+ "div",
20654
+ {
20655
+ className: "uf-text-xs uf-mt-0.5",
20656
+ style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
20657
+ children: [
20658
+ "Amount adjusted from remaining $",
20659
+ (parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0")).toFixed(2)
20660
+ ]
20661
+ }
20662
+ )
20663
+ ]
20664
+ }
20665
+ ) : /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
20386
20666
  "div",
20387
20667
  {
20388
20668
  className: "uf-text-center uf-text-xs uf-mb-3",
@@ -20392,7 +20672,7 @@ function EnterAmountView({
20392
20672
  tokenChainDetails.minimum_deposit_amount_usd.toFixed(2)
20393
20673
  ]
20394
20674
  }
20395
- ),
20675
+ )),
20396
20676
  inputUsdNum > 0 && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_jsx_runtime63.Fragment, { children: inputUsdNum > maxUsdAmount ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
20397
20677
  "div",
20398
20678
  {
@@ -20407,7 +20687,44 @@ function EnterAmountView({
20407
20687
  style: { color: colors2.error },
20408
20688
  children: error
20409
20689
  }
20410
- ) })
20690
+ ) }),
20691
+ isCheckout && selectedToken.icon_url && /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2 uf-py-2", children: [
20692
+ /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: "uf-relative", children: [
20693
+ /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
20694
+ "img",
20695
+ {
20696
+ src: selectedToken.icon_url,
20697
+ alt: selectedToken.symbol,
20698
+ width: 20,
20699
+ height: 20,
20700
+ className: "uf-w-5 uf-h-5 uf-rounded-full"
20701
+ }
20702
+ ),
20703
+ selectedToken.chain_icon_url && /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
20704
+ "img",
20705
+ {
20706
+ src: selectedToken.chain_icon_url,
20707
+ alt: selectedToken.chain_name,
20708
+ width: 10,
20709
+ height: 10,
20710
+ className: "uf-w-2.5 uf-h-2.5 uf-rounded-full uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-border",
20711
+ style: { borderColor: colors2.background }
20712
+ }
20713
+ )
20714
+ ] }),
20715
+ /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
20716
+ "span",
20717
+ {
20718
+ className: "uf-text-xs",
20719
+ style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
20720
+ children: [
20721
+ selectedToken.symbol,
20722
+ " on ",
20723
+ selectedToken.chain_name
20724
+ ]
20725
+ }
20726
+ )
20727
+ ] })
20411
20728
  ] }),
20412
20729
  /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "uf-shrink-0 uf-pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
20413
20730
  "button",
@@ -20431,6 +20748,18 @@ function EnterAmountView({
20431
20748
  }
20432
20749
  );
20433
20750
  }
20751
+ var WALLET_ICONS2 = {
20752
+ metamask: MetamaskIcon,
20753
+ phantom: PhantomIcon,
20754
+ coinbase: CoinbaseIcon,
20755
+ trust: TrustIcon,
20756
+ rainbow: RainbowIcon,
20757
+ rabby: RabbyIcon,
20758
+ okx: OkxIcon,
20759
+ solflare: SolflareIcon,
20760
+ backpack: BackpackIcon,
20761
+ glow: GlowIcon
20762
+ };
20434
20763
  function ReviewView({
20435
20764
  walletInfo,
20436
20765
  recipientAddress,
@@ -20465,30 +20794,17 @@ function ReviewView({
20465
20794
  ),
20466
20795
  /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "uf-flex uf-min-h-0 uf-flex-1 uf-flex-col", children: [
20467
20796
  /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "uf-min-h-0 uf-flex-1 uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: [
20468
- /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "uf-text-center", children: [
20469
- /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
20470
- "div",
20471
- {
20472
- className: "uf-text-4xl uf-font-medium",
20473
- style: { color: colors2.foreground, fontFamily: fonts.medium },
20474
- children: [
20475
- "$",
20476
- amountUsd || "0"
20477
- ]
20478
- }
20479
- ),
20480
- formattedTokenAmount && /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
20481
- "div",
20482
- {
20483
- className: "uf-text-sm uf-mt-2",
20484
- style: { color: colors2.foregroundMuted },
20485
- children: [
20486
- "\u2248 ",
20487
- formattedTokenAmount
20488
- ]
20489
- }
20490
- )
20491
- ] }),
20797
+ /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "uf-text-center", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
20798
+ "div",
20799
+ {
20800
+ className: "uf-text-4xl uf-font-medium",
20801
+ style: { color: colors2.foreground, fontFamily: fonts.medium },
20802
+ children: [
20803
+ "$",
20804
+ amountUsd || "0"
20805
+ ]
20806
+ }
20807
+ ) }),
20492
20808
  /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
20493
20809
  "div",
20494
20810
  {
@@ -20505,29 +20821,48 @@ function ReviewView({
20505
20821
  {
20506
20822
  className: "uf-text-sm",
20507
20823
  style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
20508
- children: "Source"
20824
+ children: "From"
20509
20825
  }
20510
20826
  ),
20511
20827
  /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
20512
- getIconUrl2(selectedToken.icon_url, assetCdnUrl) && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
20513
- "img",
20828
+ WALLET_ICONS2[walletInfo.icon] && (() => {
20829
+ const Icon22 = WALLET_ICONS2[walletInfo.icon];
20830
+ return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("div", { className: "uf-w-5 uf-h-5 uf-rounded-full uf-overflow-hidden uf-flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(Icon22, { size: 20, variant: "color" }) });
20831
+ })(),
20832
+ /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
20833
+ "span",
20514
20834
  {
20515
- src: getIconUrl2(selectedToken.icon_url, assetCdnUrl),
20516
- alt: selectedToken.symbol,
20517
- className: "uf-w-5 uf-h-5 uf-rounded-full"
20518
- }
20835
+ className: "uf-text-sm uf-font-medium",
20836
+ style: { color: colors2.foreground, fontFamily: fonts.medium },
20837
+ children: walletInfo.name
20838
+ }
20839
+ )
20840
+ ] })
20841
+ ] }),
20842
+ /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "uf-flex uf-justify-between uf-items-center", children: [
20843
+ /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
20844
+ "span",
20845
+ {
20846
+ className: "uf-text-sm",
20847
+ style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
20848
+ children: "You send"
20849
+ }
20850
+ ),
20851
+ /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
20852
+ getIconUrl2(selectedToken.icon_url, assetCdnUrl) && /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
20853
+ "img",
20854
+ {
20855
+ src: getIconUrl2(selectedToken.icon_url, assetCdnUrl),
20856
+ alt: selectedToken.symbol,
20857
+ className: "uf-w-5 uf-h-5 uf-rounded-full"
20858
+ }
20519
20859
  ),
20520
- /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)(
20860
+ /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
20521
20861
  "span",
20522
20862
  {
20523
20863
  className: "uf-text-sm uf-font-medium",
20524
20864
  style: { color: colors2.foreground, fontFamily: fonts.medium },
20525
- children: [
20526
- walletInfo.name,
20527
- " (",
20528
- truncateAddress2(walletInfo.address),
20529
- ")"
20530
- ]
20865
+ children: formattedTokenAmount || `$${amountUsd}`
20531
20866
  }
20532
20867
  )
20533
20868
  ] })
@@ -20690,7 +21025,10 @@ function ReviewView({
20690
21025
  borderRadius: components.button.borderRadius,
20691
21026
  border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
20692
21027
  },
20693
- children: isConfirming ? "Confirming..." : "Confirm Order"
21028
+ children: isConfirming ? /* @__PURE__ */ (0, import_jsx_runtime64.jsxs)("span", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2", children: [
21029
+ /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
21030
+ "Confirming..."
21031
+ ] }) : "Confirm Order"
20694
21032
  }
20695
21033
  ) })
20696
21034
  ] })
@@ -20699,17 +21037,35 @@ function ReviewView({
20699
21037
  }
20700
21038
  );
20701
21039
  }
21040
+ var SETTLE_FALLBACK_MS = 15e3;
20702
21041
  function ConfirmingView({
20703
21042
  isConfirming,
20704
21043
  onClose,
20705
21044
  executions = [],
20706
- isPolling = false
21045
+ isPolling = false,
21046
+ onNewDeposit,
21047
+ onDone,
21048
+ paymentIntentStatus,
21049
+ amountReceivedUsd,
21050
+ amountReceivedUsdAtSubmission
20707
21051
  }) {
20708
- const { colors: colors2, fonts } = useTheme();
21052
+ const { colors: colors2, fonts, components } = useTheme();
20709
21053
  const [containerEl, setContainerEl] = (0, import_react25.useState)(null);
20710
21054
  const containerCallbackRef = (0, import_react25.useCallback)((el) => {
20711
21055
  setContainerEl(el);
20712
21056
  }, []);
21057
+ const [fallbackSettled, setFallbackSettled] = (0, import_react25.useState)(false);
21058
+ const hasExecution = executions.length > 0;
21059
+ const isCheckoutMode = paymentIntentStatus != null;
21060
+ const isPaymentComplete = paymentIntentStatus === "succeeded";
21061
+ const amountChanged = amountReceivedUsdAtSubmission != null && amountReceivedUsd != null && amountReceivedUsd !== amountReceivedUsdAtSubmission;
21062
+ const piSettled = !isCheckoutMode || isPaymentComplete || amountChanged || fallbackSettled;
21063
+ (0, import_react25.useEffect)(() => {
21064
+ if (!hasExecution || piSettled) return;
21065
+ const timeout = setTimeout(() => setFallbackSettled(true), SETTLE_FALLBACK_MS);
21066
+ return () => clearTimeout(timeout);
21067
+ }, [hasExecution, piSettled]);
21068
+ const showButtons = hasExecution && piSettled;
20713
21069
  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(PortalContainerProvider, { value: containerEl, children: /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
20714
21070
  "div",
20715
21071
  {
@@ -20722,8 +21078,8 @@ function ConfirmingView({
20722
21078
  /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
20723
21079
  DepositHeader,
20724
21080
  {
20725
- title: isConfirming ? "Confirming..." : "Processing",
20726
- onClose
21081
+ title: isConfirming ? "Confirming..." : hasExecution && isPaymentComplete ? "Payment Complete" : hasExecution ? "Deposit Received" : "Processing",
21082
+ onClose: isPaymentComplete && onDone ? onDone : onClose
20727
21083
  }
20728
21084
  ),
20729
21085
  /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "uf-flex uf-flex-1 uf-flex-col uf-items-center uf-justify-center uf-py-8", children: isConfirming ? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
@@ -20750,11 +21106,70 @@ function ConfirmingView({
20750
21106
  children: "Please confirm the transaction in your wallet"
20751
21107
  }
20752
21108
  )
20753
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
21109
+ ] }) : hasExecution ? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
20754
21110
  /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
20755
21111
  CircleCheck,
20756
21112
  {
20757
21113
  className: "uf-w-12 uf-h-12 uf-mb-4",
21114
+ style: { color: "rgb(34, 197, 94)" }
21115
+ }
21116
+ ),
21117
+ /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
21118
+ "div",
21119
+ {
21120
+ className: "uf-text-lg uf-font-medium",
21121
+ style: { color: colors2.foreground, fontFamily: fonts.medium },
21122
+ children: isPaymentComplete ? "Payment Complete" : "Deposit Received"
21123
+ }
21124
+ ),
21125
+ /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
21126
+ "div",
21127
+ {
21128
+ className: "uf-text-sm uf-mt-2 uf-text-center uf-px-6",
21129
+ style: { color: colors2.foregroundMuted },
21130
+ children: isPaymentComplete ? "Your payment has been fulfilled." : showButtons ? "Your deposit is being processed." : "Checking payment status..."
21131
+ }
21132
+ ),
21133
+ /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("div", { className: "uf-mt-6 uf-flex uf-flex-col uf-items-center uf-gap-3", children: !showButtons ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
21134
+ LoaderCircle,
21135
+ {
21136
+ className: "uf-w-5 uf-h-5 uf-animate-spin",
21137
+ style: { color: colors2.foregroundMuted }
21138
+ }
21139
+ ) : isPaymentComplete && onDone ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
21140
+ "button",
21141
+ {
21142
+ onClick: onDone,
21143
+ className: "uf-w-full uf-py-3 uf-px-8 uf-text-sm uf-font-medium uf-transition-opacity hover:uf-opacity-80",
21144
+ style: {
21145
+ backgroundColor: colors2.primary,
21146
+ color: colors2.primaryForeground,
21147
+ fontFamily: fonts.medium,
21148
+ borderRadius: components.button.borderRadius
21149
+ },
21150
+ children: "Done"
21151
+ }
21152
+ ) : onNewDeposit ? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(
21153
+ "button",
21154
+ {
21155
+ onClick: onNewDeposit,
21156
+ 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",
21157
+ style: {
21158
+ backgroundColor: colors2.primary,
21159
+ color: colors2.primaryForeground,
21160
+ fontFamily: fonts.medium
21161
+ },
21162
+ children: [
21163
+ "Make another deposit",
21164
+ /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(ArrowRight, { className: "uf-w-4 uf-h-4" })
21165
+ ]
21166
+ }
21167
+ ) : null })
21168
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)(import_jsx_runtime65.Fragment, { children: [
21169
+ /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
21170
+ LoaderCircle,
21171
+ {
21172
+ className: "uf-w-12 uf-h-12 uf-animate-spin uf-mb-4",
20758
21173
  style: { color: colors2.primary }
20759
21174
  }
20760
21175
  ),
@@ -20771,7 +21186,7 @@ function ConfirmingView({
20771
21186
  {
20772
21187
  className: "uf-text-sm uf-mt-2 uf-text-center uf-px-6",
20773
21188
  style: { color: colors2.foregroundMuted },
20774
- children: "You can close this window or wait for confirmation."
21189
+ children: "Waiting for your deposit to be detected..."
20775
21190
  }
20776
21191
  )
20777
21192
  ] }) }),
@@ -20795,6 +21210,7 @@ function BrowserWalletModal({
20795
21210
  depositWallet,
20796
21211
  userId,
20797
21212
  publishableKey,
21213
+ clientSecret,
20798
21214
  assetCdnUrl,
20799
21215
  projectName,
20800
21216
  theme = "dark",
@@ -20803,7 +21219,13 @@ function BrowserWalletModal({
20803
21219
  onDepositSuccess,
20804
21220
  onDepositError,
20805
21221
  amountQuickSelect = "percentage",
20806
- onWalletDisconnect
21222
+ onWalletDisconnect,
21223
+ prefillAmountUsd,
21224
+ checkoutAmountUsd,
21225
+ checkoutReceivedUsd,
21226
+ onNewDeposit,
21227
+ onDone,
21228
+ paymentIntentStatus
20807
21229
  }) {
20808
21230
  const { colors: colors2, fonts, components } = useTheme();
20809
21231
  const [step, setStep] = React262.useState("select-token");
@@ -20821,6 +21243,7 @@ function BrowserWalletModal({
20821
21243
  const [tokenChainDetails, setTokenChainDetails] = React262.useState(null);
20822
21244
  const [loadingTokenDetails, setLoadingTokenDetails] = React262.useState(false);
20823
21245
  const [showTransactionDetails, setShowTransactionDetails] = React262.useState(false);
21246
+ const [receivedUsdAtSubmission, setReceivedUsdAtSubmission] = React262.useState(null);
20824
21247
  const themeClass = theme === "dark" ? "uf-dark" : "";
20825
21248
  const chainType = depositWallet.chain_type;
20826
21249
  const recipientAddress = depositWallet.address;
@@ -20828,15 +21251,19 @@ function BrowserWalletModal({
20828
21251
  const { executions: depositExecutions, isPolling } = useDepositPolling({
20829
21252
  userId,
20830
21253
  publishableKey,
21254
+ clientSecret,
20831
21255
  enabled: open && hasSignedTransaction,
20832
21256
  onDepositSuccess,
20833
21257
  onDepositError
20834
21258
  });
21259
+ const prevOpenRef = React262.useRef(false);
20835
21260
  React262.useEffect(() => {
20836
- if (open) {
21261
+ const wasOpen = prevOpenRef.current;
21262
+ prevOpenRef.current = open;
21263
+ if (open && !wasOpen) {
20837
21264
  setStep("select-token");
20838
21265
  setSelectedBalance(null);
20839
- setAmountUsd("");
21266
+ setAmountUsd(prefillAmountUsd ?? "");
20840
21267
  setError(null);
20841
21268
  setIsConfirming(false);
20842
21269
  setTokenChainDetails(null);
@@ -20844,7 +21271,15 @@ function BrowserWalletModal({
20844
21271
  setHasSignedTransaction(false);
20845
21272
  setIsDisconnectingWallet(false);
20846
21273
  }
20847
- }, [open]);
21274
+ }, [open, prefillAmountUsd]);
21275
+ React262.useEffect(() => {
21276
+ if (!prefillAmountUsd || !tokenChainDetails || step !== "input-amount") return;
21277
+ const minDeposit = tokenChainDetails.minimum_deposit_amount_usd || 0;
21278
+ const currentAmount = parseFloat(amountUsd) || 0;
21279
+ if (currentAmount > 0 && currentAmount < minDeposit) {
21280
+ setAmountUsd(minDeposit.toFixed(2));
21281
+ }
21282
+ }, [tokenChainDetails, step, prefillAmountUsd]);
20848
21283
  React262.useEffect(() => {
20849
21284
  if (step === "review") {
20850
21285
  setShowTransactionDetails(false);
@@ -20962,7 +21397,7 @@ function BrowserWalletModal({
20962
21397
  setError(null);
20963
21398
  if (step === "input-amount") {
20964
21399
  setStep("select-token");
20965
- setAmountUsd("");
21400
+ setAmountUsd(prefillAmountUsd ?? "");
20966
21401
  setTokenChainDetails(null);
20967
21402
  } else if (step === "review") {
20968
21403
  setStep("input-amount");
@@ -21048,7 +21483,6 @@ function BrowserWalletModal({
21048
21483
  }
21049
21484
  }
21050
21485
  setIsConfirming(true);
21051
- setStep("confirming");
21052
21486
  setError(null);
21053
21487
  try {
21054
21488
  let txHash;
@@ -21066,16 +21500,17 @@ function BrowserWalletModal({
21066
21500
  } else {
21067
21501
  txHash = await sendEthereumTransaction(token, tokenAmount.toString());
21068
21502
  }
21503
+ setReceivedUsdAtSubmission(checkoutReceivedUsd ?? "0");
21069
21504
  setHasSignedTransaction(true);
21070
- onSuccess?.(txHash);
21071
21505
  setIsConfirming(false);
21506
+ setStep("confirming");
21507
+ onSuccess?.(txHash);
21072
21508
  } catch (err) {
21073
21509
  console.error("[BrowserWalletModal] Transaction error:", err);
21074
21510
  const errorMessage = err instanceof Error ? err.message : "Transaction failed";
21075
21511
  setError(errorMessage);
21076
21512
  onError?.(err instanceof Error ? err : new Error(errorMessage));
21077
21513
  setIsConfirming(false);
21078
- setStep("review");
21079
21514
  }
21080
21515
  };
21081
21516
  const sendEthereumTransaction = async (token, amountStr) => {
@@ -21324,7 +21759,9 @@ function BrowserWalletModal({
21324
21759
  onBack: handleClose,
21325
21760
  onClose: handleFullClose,
21326
21761
  onDisconnectWallet: onWalletDisconnect ? () => void handleDisconnectFromSelectToken() : void 0,
21327
- isDisconnectingWallet
21762
+ isDisconnectingWallet,
21763
+ checkoutAmountUsd,
21764
+ checkoutReceivedUsd
21328
21765
  }
21329
21766
  ),
21330
21767
  step === "input-amount" && selectedToken && selectedBalance && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
@@ -21345,7 +21782,9 @@ function BrowserWalletModal({
21345
21782
  onReview: handleReview,
21346
21783
  onBack: handleBack,
21347
21784
  onClose: handleFullClose,
21348
- quickSelectMode: amountQuickSelect
21785
+ quickSelectMode: amountQuickSelect,
21786
+ checkoutAmountUsd,
21787
+ checkoutReceivedUsd
21349
21788
  }
21350
21789
  ),
21351
21790
  step === "review" && selectedToken && /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
@@ -21374,7 +21813,12 @@ function BrowserWalletModal({
21374
21813
  isConfirming,
21375
21814
  onClose: handleFullClose,
21376
21815
  executions: depositExecutions,
21377
- isPolling
21816
+ isPolling,
21817
+ onNewDeposit,
21818
+ onDone,
21819
+ paymentIntentStatus,
21820
+ amountReceivedUsd: checkoutReceivedUsd,
21821
+ amountReceivedUsdAtSubmission: receivedUsdAtSubmission
21378
21822
  }
21379
21823
  )
21380
21824
  ] })
@@ -21383,7 +21827,7 @@ function BrowserWalletModal({
21383
21827
  }
21384
21828
  ) });
21385
21829
  }
21386
- var WALLET_ICONS2 = {
21830
+ var WALLET_ICONS3 = {
21387
21831
  metamask: MetamaskIcon,
21388
21832
  phantom: PhantomIcon,
21389
21833
  coinbase: CoinbaseIcon,
@@ -21822,10 +22266,10 @@ function WalletSelectionModal({
21822
22266
  },
21823
22267
  children: [
21824
22268
  /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
21825
- WALLET_ICONS2[wallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
22269
+ WALLET_ICONS3[wallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
21826
22270
  WalletIconWithNetwork,
21827
22271
  {
21828
- WalletIcon: WALLET_ICONS2[wallet.id],
22272
+ WalletIcon: WALLET_ICONS3[wallet.id],
21829
22273
  networks: wallet.networks,
21830
22274
  size: 40,
21831
22275
  className: "uf-rounded-lg"
@@ -21896,10 +22340,10 @@ function WalletSelectionModal({
21896
22340
  style: { minHeight: WALLET_STEP_BODY_MIN_HEIGHT },
21897
22341
  children: [
21898
22342
  /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-pb-4 uf-shrink-0", children: [
21899
- /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "uf-mb-2", children: WALLET_ICONS2[selectedWallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
22343
+ /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "uf-mb-2", children: WALLET_ICONS3[selectedWallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
21900
22344
  WalletIconWithNetwork,
21901
22345
  {
21902
- WalletIcon: WALLET_ICONS2[selectedWallet.id],
22346
+ WalletIcon: WALLET_ICONS3[selectedWallet.id],
21903
22347
  networks: selectedWallet.networks,
21904
22348
  size: 48,
21905
22349
  className: "uf-rounded-lg"
@@ -22698,137 +23142,795 @@ function DepositModal({
22698
23142
  }
22699
23143
  ) });
22700
23144
  }
22701
- function useSupportedDestinationTokens(publishableKey, enabled = true) {
23145
+ function usePaymentIntent(params) {
23146
+ const {
23147
+ clientSecret,
23148
+ publishableKey,
23149
+ enabled = true,
23150
+ pollingInterval = 5e3
23151
+ } = params;
22702
23152
  return (0, import_react_query11.useQuery)({
22703
- queryKey: ["unifold", "supportedDestinationTokens", publishableKey],
22704
- queryFn: () => getSupportedDestinationTokens(publishableKey),
22705
- staleTime: 1e3 * 60 * 5,
22706
- gcTime: 1e3 * 60 * 30,
22707
- refetchOnMount: false,
22708
- refetchOnWindowFocus: false,
22709
- enabled
23153
+ queryKey: ["unifold", "paymentIntent", clientSecret, publishableKey],
23154
+ queryFn: () => retrievePaymentIntent(clientSecret, publishableKey),
23155
+ enabled: enabled && !!clientSecret && !!publishableKey,
23156
+ staleTime: 0,
23157
+ refetchInterval: pollingInterval || false,
23158
+ refetchOnWindowFocus: true,
23159
+ retry: 3,
23160
+ retryDelay: (attempt) => Math.min(1e3 * 2 ** attempt, 1e4)
22710
23161
  });
22711
23162
  }
22712
- function useSourceTokenValidation(params) {
23163
+ function useDepositQuote(params) {
22713
23164
  const {
23165
+ publishableKey,
22714
23166
  sourceChainType,
22715
23167
  sourceChainId,
22716
23168
  sourceTokenAddress,
22717
- sourceTokenSymbol,
22718
- publishableKey,
23169
+ destinationAmount,
23170
+ destinationChainType,
23171
+ destinationChainId,
23172
+ destinationTokenAddress,
22719
23173
  enabled = true
22720
23174
  } = params;
22721
- const hasParams = !!sourceChainType && !!sourceChainId && !!sourceTokenAddress;
23175
+ const request = {
23176
+ source_chain_type: sourceChainType,
23177
+ source_chain_id: sourceChainId,
23178
+ source_token_address: sourceTokenAddress,
23179
+ destination_amount: destinationAmount,
23180
+ destination_chain_type: destinationChainType,
23181
+ destination_chain_id: destinationChainId,
23182
+ destination_token_address: destinationTokenAddress
23183
+ };
22722
23184
  return (0, import_react_query12.useQuery)({
22723
23185
  queryKey: [
22724
23186
  "unifold",
22725
- "sourceTokenValidation",
22726
- sourceChainType ?? null,
22727
- sourceChainId ?? null,
22728
- sourceTokenAddress ?? null,
23187
+ "depositQuote",
23188
+ sourceChainType,
23189
+ sourceChainId,
23190
+ sourceTokenAddress,
23191
+ destinationAmount,
23192
+ destinationChainType,
23193
+ destinationChainId,
23194
+ destinationTokenAddress,
22729
23195
  publishableKey
22730
23196
  ],
22731
- queryFn: async () => {
22732
- const res = await getSupportedDepositTokens(publishableKey);
22733
- let matchedMinUsd = null;
22734
- let matchedProcessingTime = null;
22735
- let matchedSlippage = null;
22736
- let matchedPriceImpact = null;
22737
- const found = res.data.some(
22738
- (token) => token.chains.some((chain) => {
22739
- const match = chain.chain_type === sourceChainType && chain.chain_id === sourceChainId && chain.token_address.toLowerCase() === sourceTokenAddress.toLowerCase();
22740
- if (match) {
22741
- matchedMinUsd = chain.minimum_deposit_amount_usd;
22742
- matchedProcessingTime = chain.estimated_processing_time;
22743
- matchedSlippage = chain.max_slippage_percent;
22744
- matchedPriceImpact = chain.estimated_price_impact_percent;
22745
- }
22746
- return match;
22747
- })
22748
- );
22749
- return {
22750
- isSupported: found,
22751
- minimumAmountUsd: matchedMinUsd,
22752
- estimatedProcessingTime: matchedProcessingTime,
22753
- maxSlippagePercent: matchedSlippage,
22754
- priceImpactPercent: matchedPriceImpact,
22755
- errorMessage: found ? null : `${sourceTokenSymbol || "Source token"} is not a supported withdrawal token. Supported tokens include USDC, USDT, and other stablecoins.`
22756
- };
22757
- },
22758
- enabled: enabled && hasParams,
22759
- staleTime: 1e3 * 60 * 5,
22760
- gcTime: 1e3 * 60 * 30,
22761
- refetchOnMount: false,
22762
- refetchOnWindowFocus: false
23197
+ queryFn: () => getDepositQuote(request, publishableKey),
23198
+ enabled: enabled && !!publishableKey && !!sourceChainType && !!sourceChainId && !!sourceTokenAddress && !!destinationAmount && destinationAmount !== "0" && !!destinationChainType && !!destinationChainId && !!destinationTokenAddress,
23199
+ staleTime: 6e4,
23200
+ gcTime: 5 * 6e4,
23201
+ refetchOnWindowFocus: false,
23202
+ retry: 2,
23203
+ retryDelay: (attempt) => Math.min(1e3 * 2 ** attempt, 5e3)
22763
23204
  });
22764
23205
  }
22765
- function useAddressBalance(params) {
23206
+ function mapDepositAddressesToWallets(depositAddresses, pi) {
23207
+ return depositAddresses.map((da, idx) => ({
23208
+ id: da.id,
23209
+ chain_type: da.chain_type,
23210
+ address_type: da.address_type,
23211
+ address: da.address,
23212
+ destination_chain_type: pi.destination_chain_type,
23213
+ destination_chain_id: pi.destination_chain_id,
23214
+ destination_token_address: pi.destination_token_address,
23215
+ recipient_address: pi.recipient_address,
23216
+ is_primary: idx === 0
23217
+ }));
23218
+ }
23219
+ function SkeletonButton2() {
23220
+ return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-w-full uf-bg-secondary uf-rounded-xl uf-p-3 uf-flex uf-items-center uf-justify-between uf-animate-pulse", children: [
23221
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
23222
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-bg-muted uf-rounded-lg uf-w-9 uf-h-9" }),
23223
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-space-y-1.5", children: [
23224
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-h-3.5 uf-w-24 uf-bg-muted uf-rounded" }),
23225
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-h-3 uf-w-32 uf-bg-muted uf-rounded" })
23226
+ ] })
23227
+ ] }),
23228
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ChevronRight, { className: "uf-w-4 uf-h-4 uf-text-muted" }) })
23229
+ ] });
23230
+ }
23231
+ function CheckoutModal({
23232
+ open,
23233
+ onOpenChange,
23234
+ clientSecret,
23235
+ publishableKey,
23236
+ modalTitle,
23237
+ enableConnectWallet = false,
23238
+ theme = "dark",
23239
+ onCheckoutSuccess,
23240
+ onCheckoutError
23241
+ }) {
23242
+ const { colors: colors2, fonts, components } = useTheme();
23243
+ const [view, setView] = (0, import_react26.useState)("main");
23244
+ const resetViewTimeoutRef = (0, import_react26.useRef)(
23245
+ null
23246
+ );
23247
+ const [browserWalletModalOpen, setBrowserWalletModalOpen] = (0, import_react26.useState)(false);
23248
+ const [browserWalletInfo, setBrowserWalletInfo] = (0, import_react26.useState)(null);
23249
+ const [walletSelectionModalOpen, setWalletSelectionModalOpen] = (0, import_react26.useState)(false);
23250
+ const [browserWalletChainType, setBrowserWalletChainType] = (0, import_react26.useState)(() => getStoredWalletChainType());
23251
+ const isMobileView = useIsMobileViewport();
23252
+ const [resolvedTheme, setResolvedTheme] = (0, import_react26.useState)(
23253
+ theme === "auto" ? "dark" : theme
23254
+ );
23255
+ (0, import_react26.useEffect)(() => {
23256
+ if (theme === "auto") {
23257
+ const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
23258
+ setResolvedTheme(mediaQuery.matches ? "dark" : "light");
23259
+ const handler = (e) => {
23260
+ setResolvedTheme(e.matches ? "dark" : "light");
23261
+ };
23262
+ mediaQuery.addEventListener("change", handler);
23263
+ return () => mediaQuery.removeEventListener("change", handler);
23264
+ } else {
23265
+ setResolvedTheme(theme);
23266
+ }
23267
+ }, [theme]);
23268
+ const themeClass = resolvedTheme === "dark" ? "uf-dark" : "";
22766
23269
  const {
22767
- address,
22768
- chainType,
22769
- chainId,
22770
- tokenAddress,
23270
+ data: paymentIntent,
23271
+ isLoading: piLoading,
23272
+ error: piError
23273
+ } = usePaymentIntent({
23274
+ clientSecret,
22771
23275
  publishableKey,
22772
- enabled = true
22773
- } = params;
22774
- const hasParams = !!address && !!chainType && !!chainId && !!tokenAddress;
22775
- return (0, import_react_query13.useQuery)({
22776
- queryKey: [
22777
- "unifold",
22778
- "addressBalance",
22779
- address ?? null,
22780
- chainType ?? null,
22781
- chainId ?? null,
22782
- tokenAddress ?? null,
22783
- publishableKey
22784
- ],
22785
- queryFn: async () => {
22786
- const res = await getAddressBalance(
22787
- address,
22788
- chainType,
22789
- chainId,
22790
- tokenAddress,
22791
- publishableKey
23276
+ enabled: open && !!clientSecret,
23277
+ pollingInterval: 5e3
23278
+ });
23279
+ const { projectConfig } = useProjectConfig({
23280
+ publishableKey,
23281
+ enabled: open
23282
+ });
23283
+ const prevStatusRef = (0, import_react26.useRef)(null);
23284
+ (0, import_react26.useEffect)(() => {
23285
+ if (!paymentIntent) return;
23286
+ const prev = prevStatusRef.current;
23287
+ prevStatusRef.current = paymentIntent.status;
23288
+ if (prev && prev !== paymentIntent.status && paymentIntent.status === "succeeded") {
23289
+ if (!browserWalletModalOpen) {
23290
+ setView("main");
23291
+ }
23292
+ onCheckoutSuccess?.({
23293
+ paymentIntentId: paymentIntent.id,
23294
+ status: paymentIntent.status
23295
+ });
23296
+ }
23297
+ }, [paymentIntent, onCheckoutSuccess, browserWalletModalOpen]);
23298
+ const wallets = (0, import_react26.useMemo)(() => {
23299
+ if (!paymentIntent) return [];
23300
+ return mapDepositAddressesToWallets(
23301
+ paymentIntent.deposit_addresses,
23302
+ paymentIntent
23303
+ );
23304
+ }, [paymentIntent]);
23305
+ const formatCryptoAmount = (0, import_react26.useMemo)(() => {
23306
+ if (!paymentIntent) return (_) => "";
23307
+ const decimals = paymentIntent.destination_token_decimals ?? 6;
23308
+ const symbol = paymentIntent.currency.toUpperCase();
23309
+ return (baseUnits) => {
23310
+ const num = Number(baseUnits) / 10 ** decimals;
23311
+ const formatted = num % 1 === 0 ? num.toFixed(0) : num.toFixed(2);
23312
+ return `${formatted} ${symbol}`;
23313
+ };
23314
+ }, [paymentIntent]);
23315
+ const remainingAmountUsd = (0, import_react26.useMemo)(() => {
23316
+ if (!paymentIntent) return void 0;
23317
+ const total = parseFloat(paymentIntent.amount_usd);
23318
+ const received = parseFloat(paymentIntent.amount_received_usd);
23319
+ if (isNaN(total) || isNaN(received)) return paymentIntent.amount_usd;
23320
+ const remaining = total - received;
23321
+ return remaining > 0 ? remaining.toFixed(2) : "0.00";
23322
+ }, [paymentIntent]);
23323
+ const remainingCrypto = (0, import_react26.useMemo)(() => {
23324
+ if (!paymentIntent) return void 0;
23325
+ const total = BigInt(paymentIntent.amount);
23326
+ const received = BigInt(paymentIntent.amount_received);
23327
+ const remaining = total - received;
23328
+ return remaining > 0n ? remaining.toString() : "0";
23329
+ }, [paymentIntent]);
23330
+ const [selectedSource, setSelectedSource] = (0, import_react26.useState)(null);
23331
+ const quoteDestinationAmount = (0, import_react26.useMemo)(() => {
23332
+ if (!paymentIntent || !selectedSource) return "0";
23333
+ const remaining = BigInt(paymentIntent.amount) - BigInt(paymentIntent.amount_received);
23334
+ const totalBaseUnits = Number(paymentIntent.amount);
23335
+ const totalUsd = parseFloat(paymentIntent.amount_usd);
23336
+ const baseUnitsPerUsd = totalUsd > 0 ? totalBaseUnits / totalUsd : 0;
23337
+ const minUsd = Math.max(selectedSource.minimumDepositAmountUsd, 3);
23338
+ const minDepositBaseUnits = BigInt(Math.ceil(minUsd * baseUnitsPerUsd));
23339
+ const effective = remaining > minDepositBaseUnits ? remaining : minDepositBaseUnits;
23340
+ return effective > 0n ? effective.toString() : "0";
23341
+ }, [paymentIntent, selectedSource]);
23342
+ const { data: sourceQuote } = useDepositQuote({
23343
+ publishableKey,
23344
+ sourceChainType: selectedSource?.chainType ?? "",
23345
+ sourceChainId: selectedSource?.chainId ?? "",
23346
+ sourceTokenAddress: selectedSource?.tokenAddress ?? "",
23347
+ destinationAmount: quoteDestinationAmount,
23348
+ destinationChainType: paymentIntent?.destination_chain_type ?? "",
23349
+ destinationChainId: paymentIntent?.destination_chain_id ?? "",
23350
+ destinationTokenAddress: paymentIntent?.destination_token_address ?? "",
23351
+ enabled: open && view === "transfer" && !!paymentIntent && !!selectedSource && quoteDestinationAmount !== "0"
23352
+ });
23353
+ const handleBrowserWalletClick = (0, import_react26.useCallback)(
23354
+ (walletInfo) => {
23355
+ const walletChainType = walletInfo.type === "phantom-solana" || walletInfo.type === "solflare" || walletInfo.type === "backpack" || walletInfo.type === "glow" ? "solana" : "ethereum";
23356
+ setStoredWalletChainType(walletChainType);
23357
+ setBrowserWalletChainType(walletChainType);
23358
+ const matchingDepositWallet = wallets.find(
23359
+ (w) => w.chain_type === walletChainType
22792
23360
  );
22793
- if (res.balance) {
22794
- const decimals = res.balance.token?.decimals ?? 6;
22795
- const symbol = res.balance.token?.symbol ?? "";
22796
- const baseUnit = res.balance.amount;
22797
- const raw = BigInt(baseUnit);
22798
- const divisor = BigInt(10 ** decimals);
22799
- const whole = raw / divisor;
22800
- const frac = raw % divisor;
22801
- const fracStr = frac.toString().padStart(decimals, "0").replace(/0+$/, "");
22802
- const balanceHuman = fracStr ? `${whole}.${fracStr}` : whole.toString();
22803
- return {
22804
- balanceBaseUnit: baseUnit,
22805
- balanceHuman,
22806
- balanceUsd: res.balance.amount_usd,
22807
- exchangeRate: res.balance.exchange_rate,
22808
- decimals,
22809
- symbol
22810
- };
23361
+ if (!matchingDepositWallet) {
23362
+ onCheckoutError?.({
23363
+ message: `Unable to pay from ${walletChainType}. Please try a different wallet.`,
23364
+ code: "NO_DEPOSIT_ADDRESS"
23365
+ });
23366
+ return;
22811
23367
  }
22812
- return { balanceBaseUnit: "0", balanceHuman: "0", balanceUsd: "0", exchangeRate: null, decimals: 6, symbol: "" };
23368
+ setBrowserWalletInfo({
23369
+ ...walletInfo,
23370
+ depositWallet: matchingDepositWallet
23371
+ });
23372
+ setBrowserWalletModalOpen(true);
22813
23373
  },
22814
- enabled: enabled && hasParams,
22815
- staleTime: 1e3 * 30,
22816
- gcTime: 1e3 * 60 * 5,
22817
- refetchInterval: 1e3 * 30,
22818
- refetchOnMount: "always",
22819
- refetchOnWindowFocus: false
22820
- });
22821
- }
22822
- function useExecutions(userId, publishableKey, options) {
22823
- const actionType = options?.actionType ?? ActionType.Deposit;
22824
- return (0, import_react_query14.useQuery)({
22825
- queryKey: ["unifold", "executions", actionType, userId, publishableKey],
22826
- queryFn: () => queryExecutions(userId, publishableKey, actionType),
22827
- enabled: (options?.enabled ?? true) && !!userId,
22828
- refetchInterval: options?.refetchInterval ?? 3e3,
22829
- staleTime: 0,
22830
- gcTime: 1e3 * 60 * 5,
22831
- refetchOnWindowFocus: false
23374
+ [wallets, onCheckoutError]
23375
+ );
23376
+ const handleWalletConnectClick = (0, import_react26.useCallback)(() => {
23377
+ setWalletSelectionModalOpen(true);
23378
+ }, []);
23379
+ const handleWalletConnected = (0, import_react26.useCallback)(
23380
+ (walletInfo) => {
23381
+ const walletChainType = walletInfo.type === "phantom-solana" || walletInfo.type === "solflare" || walletInfo.type === "backpack" || walletInfo.type === "glow" ? "solana" : "ethereum";
23382
+ setStoredWalletChainType(walletChainType);
23383
+ setBrowserWalletChainType(walletChainType);
23384
+ const matchingDepositWallet = wallets.find(
23385
+ (w) => w.chain_type === walletChainType
23386
+ );
23387
+ if (!matchingDepositWallet) {
23388
+ onCheckoutError?.({
23389
+ message: `Unable to pay from ${walletChainType}. Please try a different wallet.`,
23390
+ code: "NO_DEPOSIT_ADDRESS"
23391
+ });
23392
+ setWalletSelectionModalOpen(false);
23393
+ return;
23394
+ }
23395
+ setBrowserWalletInfo({
23396
+ ...walletInfo,
23397
+ depositWallet: matchingDepositWallet
23398
+ });
23399
+ setWalletSelectionModalOpen(false);
23400
+ setBrowserWalletModalOpen(true);
23401
+ },
23402
+ [wallets, onCheckoutError]
23403
+ );
23404
+ const handleWalletDisconnect = (0, import_react26.useCallback)(() => {
23405
+ setUserDisconnectedWallet(true);
23406
+ clearStoredWalletChainType();
23407
+ setBrowserWalletChainType(void 0);
23408
+ setBrowserWalletInfo(null);
23409
+ setBrowserWalletModalOpen(false);
23410
+ }, []);
23411
+ const handleClose = (0, import_react26.useCallback)(() => {
23412
+ onOpenChange(false);
23413
+ if (resetViewTimeoutRef.current) {
23414
+ clearTimeout(resetViewTimeoutRef.current);
23415
+ }
23416
+ resetViewTimeoutRef.current = setTimeout(() => {
23417
+ setView("main");
23418
+ setBrowserWalletInfo(null);
23419
+ resetViewTimeoutRef.current = null;
23420
+ }, 200);
23421
+ }, [onOpenChange]);
23422
+ (0, import_react26.useLayoutEffect)(() => {
23423
+ if (!open) return;
23424
+ if (resetViewTimeoutRef.current) {
23425
+ clearTimeout(resetViewTimeoutRef.current);
23426
+ resetViewTimeoutRef.current = null;
23427
+ }
23428
+ setView("main");
23429
+ setBrowserWalletInfo(null);
23430
+ }, [open]);
23431
+ (0, import_react26.useEffect)(
23432
+ () => () => {
23433
+ if (resetViewTimeoutRef.current) {
23434
+ clearTimeout(resetViewTimeoutRef.current);
23435
+ }
23436
+ },
23437
+ []
23438
+ );
23439
+ const handleBack = (0, import_react26.useCallback)(() => {
23440
+ setView("main");
23441
+ }, []);
23442
+ const poweredByFooter = /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
23443
+ PoweredByUnifold,
23444
+ {
23445
+ color: colors2.foregroundMuted,
23446
+ className: "uf-flex uf-justify-center uf-shrink-0"
23447
+ }
23448
+ ) });
23449
+ const progressSection = paymentIntent ? (() => {
23450
+ const received = parseFloat(paymentIntent.amount_received_usd);
23451
+ const total = parseFloat(paymentIntent.amount_usd);
23452
+ const remaining = Math.max(total - received, 0);
23453
+ const pct = total > 0 ? Math.min(received / total * 100, 100) : 0;
23454
+ const hasPartial = received > 0;
23455
+ const amountStr = paymentIntent.amount_usd;
23456
+ const dynamicFontSize = `${Math.max(3.75 - amountStr.length * 0.15, 2)}rem`;
23457
+ return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-text-center uf-py-2 uf-space-y-1", children: [
23458
+ paymentIntent.description && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
23459
+ "div",
23460
+ {
23461
+ className: "uf-text-xs",
23462
+ style: {
23463
+ color: colors2.foregroundMuted,
23464
+ fontFamily: fonts.regular
23465
+ },
23466
+ children: paymentIntent.description
23467
+ }
23468
+ ),
23469
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-center", children: [
23470
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
23471
+ "span",
23472
+ {
23473
+ className: "uf-mr-1",
23474
+ style: {
23475
+ fontSize: `calc(${dynamicFontSize} * 0.6)`,
23476
+ color: colors2.foregroundMuted,
23477
+ fontFamily: fonts.regular
23478
+ },
23479
+ children: "$"
23480
+ }
23481
+ ),
23482
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
23483
+ "span",
23484
+ {
23485
+ style: {
23486
+ fontSize: dynamicFontSize,
23487
+ color: colors2.foreground,
23488
+ fontFamily: fonts.regular,
23489
+ lineHeight: 1.1
23490
+ },
23491
+ children: amountStr
23492
+ }
23493
+ )
23494
+ ] }),
23495
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
23496
+ "div",
23497
+ {
23498
+ className: "uf-text-xs",
23499
+ style: {
23500
+ color: colors2.foregroundMuted,
23501
+ fontFamily: fonts.regular
23502
+ },
23503
+ children: paymentIntent.currency.toUpperCase()
23504
+ }
23505
+ ),
23506
+ hasPartial && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-pt-2 uf-space-y-1.5", children: [
23507
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
23508
+ "div",
23509
+ {
23510
+ className: "uf-w-full uf-h-1.5 uf-rounded-full uf-overflow-hidden",
23511
+ style: { backgroundColor: colors2.border },
23512
+ children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
23513
+ "div",
23514
+ {
23515
+ className: "uf-h-full uf-rounded-full uf-transition-all uf-duration-500",
23516
+ style: {
23517
+ width: `${pct}%`,
23518
+ backgroundColor: paymentIntent.status === "succeeded" ? "rgb(34, 197, 94)" : colors2.primary
23519
+ }
23520
+ }
23521
+ )
23522
+ }
23523
+ ),
23524
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
23525
+ "div",
23526
+ {
23527
+ className: "uf-text-xs",
23528
+ style: {
23529
+ color: colors2.foregroundMuted,
23530
+ fontFamily: fonts.regular
23531
+ },
23532
+ children: [
23533
+ "$",
23534
+ paymentIntent.amount_received_usd,
23535
+ " / $",
23536
+ amountStr,
23537
+ " received",
23538
+ remaining > 0 && paymentIntent.status !== "succeeded" && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("span", { style: { color: colors2.foreground, fontFamily: fonts.medium }, children: [
23539
+ " ",
23540
+ "\xB7 $",
23541
+ remaining.toFixed(2),
23542
+ " remaining"
23543
+ ] })
23544
+ ]
23545
+ }
23546
+ )
23547
+ ] }),
23548
+ paymentIntent.status !== "requires_payment" && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
23549
+ "span",
23550
+ {
23551
+ className: "uf-text-xs uf-font-medium uf-px-2.5 uf-py-1 uf-rounded-full uf-inline-block",
23552
+ style: {
23553
+ 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)",
23554
+ color: paymentIntent.status === "succeeded" ? "rgb(34, 197, 94)" : paymentIntent.status === "processing" ? "rgb(59, 130, 246)" : "rgb(239, 68, 68)",
23555
+ fontFamily: fonts.medium
23556
+ },
23557
+ children: paymentIntent.status === "succeeded" ? "Payment Complete" : paymentIntent.status === "processing" ? "Partial Payment Received" : paymentIntent.status === "canceled" ? "Canceled" : paymentIntent.status === "expired" ? "Expired" : paymentIntent.status
23558
+ }
23559
+ ) })
23560
+ ] });
23561
+ })() : null;
23562
+ return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(PortalContainerProvider, { value: null, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(Dialog2, { open, onOpenChange: handleClose, modal: true, children: [
23563
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
23564
+ DialogContent2,
23565
+ {
23566
+ 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}`,
23567
+ style: { backgroundColor: colors2.background },
23568
+ onPointerDownOutside: (e) => e.preventDefault(),
23569
+ onInteractOutside: (e) => e.preventDefault(),
23570
+ children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ThemeStyleInjector, { children: view === "main" ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
23571
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
23572
+ DepositHeader,
23573
+ {
23574
+ title: modalTitle || "Checkout",
23575
+ showClose: true,
23576
+ onClose: handleClose
23577
+ }
23578
+ ),
23579
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
23580
+ piLoading ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-space-y-3", children: [
23581
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
23582
+ "div",
23583
+ {
23584
+ className: "uf-rounded-xl uf-p-4 uf-animate-pulse",
23585
+ style: {
23586
+ backgroundColor: components.card.backgroundColor,
23587
+ borderRadius: components.card.borderRadius,
23588
+ border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
23589
+ },
23590
+ children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-gap-2", children: [
23591
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
23592
+ "div",
23593
+ {
23594
+ className: "uf-h-8 uf-w-24 uf-rounded",
23595
+ style: {
23596
+ backgroundColor: components.card.borderColor
23597
+ }
23598
+ }
23599
+ ),
23600
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
23601
+ "div",
23602
+ {
23603
+ className: "uf-h-4 uf-w-16 uf-rounded",
23604
+ style: {
23605
+ backgroundColor: components.card.borderColor
23606
+ }
23607
+ }
23608
+ )
23609
+ ] })
23610
+ }
23611
+ ),
23612
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(SkeletonButton2, {}),
23613
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(SkeletonButton2, {})
23614
+ ] }) : piError ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
23615
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(TriangleAlert, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
23616
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
23617
+ "h3",
23618
+ {
23619
+ className: "uf-text-lg uf-font-semibold uf-mb-2",
23620
+ style: {
23621
+ color: colors2.foreground,
23622
+ fontFamily: fonts.semibold
23623
+ },
23624
+ children: "Unable to Load Checkout"
23625
+ }
23626
+ ),
23627
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
23628
+ "p",
23629
+ {
23630
+ className: "uf-text-sm uf-max-w-[280px]",
23631
+ style: {
23632
+ color: colors2.foregroundMuted,
23633
+ fontFamily: fonts.regular
23634
+ },
23635
+ children: piError instanceof Error ? piError.message : "Something went wrong. Please try again."
23636
+ }
23637
+ )
23638
+ ] }) : paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-space-y-3", children: [
23639
+ progressSection,
23640
+ (paymentIntent.status === "requires_payment" || paymentIntent.status === "processing") && /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
23641
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
23642
+ TransferCryptoButton,
23643
+ {
23644
+ onClick: () => setView("transfer"),
23645
+ title: "Transfer Crypto",
23646
+ subtitle: "Send from any wallet or exchange",
23647
+ featuredTokens: projectConfig?.transfer_crypto.networks
23648
+ }
23649
+ ),
23650
+ enableConnectWallet && !isMobileView && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
23651
+ BrowserWalletButton,
23652
+ {
23653
+ onClick: handleBrowserWalletClick,
23654
+ onConnectClick: handleWalletConnectClick,
23655
+ onDisconnect: handleWalletDisconnect,
23656
+ chainType: browserWalletChainType,
23657
+ publishableKey
23658
+ }
23659
+ )
23660
+ ] })
23661
+ ] }) : null,
23662
+ poweredByFooter
23663
+ ] })
23664
+ ] }) : view === "transfer" ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
23665
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
23666
+ DepositHeader,
23667
+ {
23668
+ title: `Pay $${remainingAmountUsd ?? paymentIntent?.amount_usd ?? ""}`,
23669
+ showBack: true,
23670
+ onBack: handleBack,
23671
+ onClose: handleClose
23672
+ }
23673
+ ),
23674
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
23675
+ paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
23676
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
23677
+ "div",
23678
+ {
23679
+ className: "uf-rounded-lg uf-px-3 uf-py-2 uf-flex uf-items-center uf-justify-between",
23680
+ style: {
23681
+ backgroundColor: components.card.backgroundColor,
23682
+ border: `${components.card.borderWidth}px solid ${components.card.borderColor}`,
23683
+ borderRadius: components.card.borderRadius
23684
+ },
23685
+ children: [
23686
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
23687
+ "span",
23688
+ {
23689
+ className: "uf-text-xs",
23690
+ style: {
23691
+ color: colors2.foregroundMuted,
23692
+ fontFamily: fonts.regular
23693
+ },
23694
+ children: parseFloat(paymentIntent.amount_received_usd) > 0 ? `$${paymentIntent.amount_received_usd} / $${paymentIntent.amount_usd} received` : "Amount due"
23695
+ }
23696
+ ),
23697
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
23698
+ "span",
23699
+ {
23700
+ className: "uf-text-sm uf-font-semibold",
23701
+ style: {
23702
+ color: colors2.foreground,
23703
+ fontFamily: fonts.semibold
23704
+ },
23705
+ children: [
23706
+ formatCryptoAmount(remainingCrypto ?? paymentIntent.amount),
23707
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
23708
+ "span",
23709
+ {
23710
+ className: "uf-text-xs uf-font-normal uf-ml-1",
23711
+ style: { color: colors2.foregroundMuted },
23712
+ children: [
23713
+ "($",
23714
+ remainingAmountUsd ?? paymentIntent.amount_usd,
23715
+ ")"
23716
+ ]
23717
+ }
23718
+ )
23719
+ ]
23720
+ }
23721
+ )
23722
+ ]
23723
+ }
23724
+ ),
23725
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
23726
+ TransferCryptoSingleInput,
23727
+ {
23728
+ userId: paymentIntent.user_id || "",
23729
+ publishableKey,
23730
+ clientSecret,
23731
+ recipientAddress: paymentIntent.recipient_address,
23732
+ destinationChainType: paymentIntent.destination_chain_type,
23733
+ destinationChainId: paymentIntent.destination_chain_id,
23734
+ destinationTokenAddress: paymentIntent.destination_token_address,
23735
+ depositConfirmationMode: "auto_ui",
23736
+ wallets,
23737
+ onSourceTokenChange: setSelectedSource,
23738
+ checkoutQuote: sourceQuote ? {
23739
+ sourceAmount: sourceQuote.source_amount,
23740
+ sourceTokenDecimals: sourceQuote.source_token_decimals,
23741
+ sourceTokenSymbol: sourceQuote.source_token_symbol,
23742
+ sourceAmountUsd: sourceQuote.source_amount_usd
23743
+ } : null
23744
+ }
23745
+ )
23746
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(SkeletonButton2, {}),
23747
+ poweredByFooter
23748
+ ] })
23749
+ ] }) : null })
23750
+ }
23751
+ ),
23752
+ /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
23753
+ WalletSelectionModal,
23754
+ {
23755
+ open: walletSelectionModalOpen,
23756
+ onOpenChange: setWalletSelectionModalOpen,
23757
+ onWalletConnected: handleWalletConnected,
23758
+ onClose: () => setWalletSelectionModalOpen(false),
23759
+ theme: resolvedTheme
23760
+ }
23761
+ ),
23762
+ browserWalletInfo && browserWalletInfo.depositWallet && /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
23763
+ BrowserWalletModal,
23764
+ {
23765
+ open: browserWalletModalOpen,
23766
+ onOpenChange: setBrowserWalletModalOpen,
23767
+ onFullClose: handleClose,
23768
+ walletInfo: browserWalletInfo,
23769
+ depositWallet: browserWalletInfo.depositWallet,
23770
+ userId: paymentIntent?.user_id || "",
23771
+ publishableKey,
23772
+ clientSecret,
23773
+ theme: resolvedTheme,
23774
+ prefillAmountUsd: remainingAmountUsd,
23775
+ checkoutAmountUsd: paymentIntent?.amount_usd,
23776
+ checkoutReceivedUsd: paymentIntent?.amount_received_usd,
23777
+ onSuccess: (txHash) => {
23778
+ onCheckoutSuccess?.({
23779
+ paymentIntentId: paymentIntent?.id || "",
23780
+ status: "processing"
23781
+ });
23782
+ },
23783
+ onError: (error) => {
23784
+ onCheckoutError?.({
23785
+ message: error.message,
23786
+ error
23787
+ });
23788
+ },
23789
+ onWalletDisconnect: handleWalletDisconnect,
23790
+ onNewDeposit: () => {
23791
+ setBrowserWalletModalOpen(false);
23792
+ setView("main");
23793
+ },
23794
+ onDone: () => {
23795
+ setBrowserWalletModalOpen(false);
23796
+ setView("main");
23797
+ },
23798
+ paymentIntentStatus: paymentIntent?.status
23799
+ }
23800
+ )
23801
+ ] }) });
23802
+ }
23803
+ function useSupportedDestinationTokens(publishableKey, enabled = true) {
23804
+ return (0, import_react_query13.useQuery)({
23805
+ queryKey: ["unifold", "supportedDestinationTokens", publishableKey],
23806
+ queryFn: () => getSupportedDestinationTokens(publishableKey),
23807
+ staleTime: 1e3 * 60 * 5,
23808
+ gcTime: 1e3 * 60 * 30,
23809
+ refetchOnMount: false,
23810
+ refetchOnWindowFocus: false,
23811
+ enabled
23812
+ });
23813
+ }
23814
+ function useSourceTokenValidation(params) {
23815
+ const {
23816
+ sourceChainType,
23817
+ sourceChainId,
23818
+ sourceTokenAddress,
23819
+ sourceTokenSymbol,
23820
+ publishableKey,
23821
+ enabled = true
23822
+ } = params;
23823
+ const hasParams = !!sourceChainType && !!sourceChainId && !!sourceTokenAddress;
23824
+ return (0, import_react_query14.useQuery)({
23825
+ queryKey: [
23826
+ "unifold",
23827
+ "sourceTokenValidation",
23828
+ sourceChainType ?? null,
23829
+ sourceChainId ?? null,
23830
+ sourceTokenAddress ?? null,
23831
+ publishableKey
23832
+ ],
23833
+ queryFn: async () => {
23834
+ const res = await getSupportedDepositTokens(publishableKey);
23835
+ let matchedMinUsd = null;
23836
+ let matchedProcessingTime = null;
23837
+ let matchedSlippage = null;
23838
+ let matchedPriceImpact = null;
23839
+ const found = res.data.some(
23840
+ (token) => token.chains.some((chain) => {
23841
+ const match = chain.chain_type === sourceChainType && chain.chain_id === sourceChainId && chain.token_address.toLowerCase() === sourceTokenAddress.toLowerCase();
23842
+ if (match) {
23843
+ matchedMinUsd = chain.minimum_deposit_amount_usd;
23844
+ matchedProcessingTime = chain.estimated_processing_time;
23845
+ matchedSlippage = chain.max_slippage_percent;
23846
+ matchedPriceImpact = chain.estimated_price_impact_percent;
23847
+ }
23848
+ return match;
23849
+ })
23850
+ );
23851
+ return {
23852
+ isSupported: found,
23853
+ minimumAmountUsd: matchedMinUsd,
23854
+ estimatedProcessingTime: matchedProcessingTime,
23855
+ maxSlippagePercent: matchedSlippage,
23856
+ priceImpactPercent: matchedPriceImpact,
23857
+ errorMessage: found ? null : `${sourceTokenSymbol || "Source token"} is not a supported withdrawal token. Supported tokens include USDC, USDT, and other stablecoins.`
23858
+ };
23859
+ },
23860
+ enabled: enabled && hasParams,
23861
+ staleTime: 1e3 * 60 * 5,
23862
+ gcTime: 1e3 * 60 * 30,
23863
+ refetchOnMount: false,
23864
+ refetchOnWindowFocus: false
23865
+ });
23866
+ }
23867
+ function useAddressBalance(params) {
23868
+ const {
23869
+ address,
23870
+ chainType,
23871
+ chainId,
23872
+ tokenAddress,
23873
+ publishableKey,
23874
+ enabled = true
23875
+ } = params;
23876
+ const hasParams = !!address && !!chainType && !!chainId && !!tokenAddress;
23877
+ return (0, import_react_query15.useQuery)({
23878
+ queryKey: [
23879
+ "unifold",
23880
+ "addressBalance",
23881
+ address ?? null,
23882
+ chainType ?? null,
23883
+ chainId ?? null,
23884
+ tokenAddress ?? null,
23885
+ publishableKey
23886
+ ],
23887
+ queryFn: async () => {
23888
+ const res = await getAddressBalance(
23889
+ address,
23890
+ chainType,
23891
+ chainId,
23892
+ tokenAddress,
23893
+ publishableKey
23894
+ );
23895
+ if (res.balance) {
23896
+ const decimals = res.balance.token?.decimals ?? 6;
23897
+ const symbol = res.balance.token?.symbol ?? "";
23898
+ const baseUnit = res.balance.amount;
23899
+ const raw = BigInt(baseUnit);
23900
+ const divisor = BigInt(10 ** decimals);
23901
+ const whole = raw / divisor;
23902
+ const frac = raw % divisor;
23903
+ const fracStr = frac.toString().padStart(decimals, "0").replace(/0+$/, "");
23904
+ const balanceHuman = fracStr ? `${whole}.${fracStr}` : whole.toString();
23905
+ return {
23906
+ balanceBaseUnit: baseUnit,
23907
+ balanceHuman,
23908
+ balanceUsd: res.balance.amount_usd,
23909
+ exchangeRate: res.balance.exchange_rate,
23910
+ decimals,
23911
+ symbol
23912
+ };
23913
+ }
23914
+ return { balanceBaseUnit: "0", balanceHuman: "0", balanceUsd: "0", exchangeRate: null, decimals: 6, symbol: "" };
23915
+ },
23916
+ enabled: enabled && hasParams,
23917
+ staleTime: 1e3 * 30,
23918
+ gcTime: 1e3 * 60 * 5,
23919
+ refetchInterval: 1e3 * 30,
23920
+ refetchOnMount: "always",
23921
+ refetchOnWindowFocus: false
23922
+ });
23923
+ }
23924
+ function useExecutions(userId, publishableKey, options) {
23925
+ const actionType = options?.actionType ?? ActionType.Deposit;
23926
+ return (0, import_react_query16.useQuery)({
23927
+ queryKey: ["unifold", "executions", actionType, userId, publishableKey],
23928
+ queryFn: () => queryExecutions(userId, publishableKey, actionType),
23929
+ enabled: (options?.enabled ?? true) && !!userId,
23930
+ refetchInterval: options?.refetchInterval ?? 3e3,
23931
+ staleTime: 0,
23932
+ gcTime: 1e3 * 60 * 5,
23933
+ refetchOnWindowFocus: false
22832
23934
  });
22833
23935
  }
22834
23936
  var POLL_INTERVAL_MS2 = 2500;
@@ -22842,20 +23944,20 @@ function useWithdrawPolling({
22842
23944
  onWithdrawSuccess,
22843
23945
  onWithdrawError
22844
23946
  }) {
22845
- const [executions, setExecutions] = (0, import_react27.useState)([]);
22846
- const [isPolling, setIsPolling] = (0, import_react27.useState)(false);
22847
- const enabledAtRef = (0, import_react27.useRef)(/* @__PURE__ */ new Date());
22848
- const trackedRef = (0, import_react27.useRef)(/* @__PURE__ */ new Map());
22849
- const prevEnabledRef = (0, import_react27.useRef)(false);
22850
- const onSuccessRef = (0, import_react27.useRef)(onWithdrawSuccess);
22851
- const onErrorRef = (0, import_react27.useRef)(onWithdrawError);
22852
- (0, import_react27.useEffect)(() => {
23947
+ const [executions, setExecutions] = (0, import_react28.useState)([]);
23948
+ const [isPolling, setIsPolling] = (0, import_react28.useState)(false);
23949
+ const enabledAtRef = (0, import_react28.useRef)(/* @__PURE__ */ new Date());
23950
+ const trackedRef = (0, import_react28.useRef)(/* @__PURE__ */ new Map());
23951
+ const prevEnabledRef = (0, import_react28.useRef)(false);
23952
+ const onSuccessRef = (0, import_react28.useRef)(onWithdrawSuccess);
23953
+ const onErrorRef = (0, import_react28.useRef)(onWithdrawError);
23954
+ (0, import_react28.useEffect)(() => {
22853
23955
  onSuccessRef.current = onWithdrawSuccess;
22854
23956
  }, [onWithdrawSuccess]);
22855
- (0, import_react27.useEffect)(() => {
23957
+ (0, import_react28.useEffect)(() => {
22856
23958
  onErrorRef.current = onWithdrawError;
22857
23959
  }, [onWithdrawError]);
22858
- (0, import_react27.useEffect)(() => {
23960
+ (0, import_react28.useEffect)(() => {
22859
23961
  if (enabled && !prevEnabledRef.current) {
22860
23962
  enabledAtRef.current = /* @__PURE__ */ new Date();
22861
23963
  trackedRef.current.clear();
@@ -22865,7 +23967,7 @@ function useWithdrawPolling({
22865
23967
  }
22866
23968
  prevEnabledRef.current = enabled;
22867
23969
  }, [enabled]);
22868
- (0, import_react27.useEffect)(() => {
23970
+ (0, import_react28.useEffect)(() => {
22869
23971
  if (!userId || !enabled) return;
22870
23972
  const enabledAt = enabledAtRef.current;
22871
23973
  const poll = async () => {
@@ -22927,7 +24029,7 @@ function useWithdrawPolling({
22927
24029
  setIsPolling(false);
22928
24030
  };
22929
24031
  }, [userId, publishableKey, enabled]);
22930
- (0, import_react27.useEffect)(() => {
24032
+ (0, import_react28.useEffect)(() => {
22931
24033
  if (!enabled || !depositWalletId) return;
22932
24034
  const trigger = async () => {
22933
24035
  try {
@@ -22955,8 +24057,8 @@ function WithdrawDoubleInput({
22955
24057
  const isDarkMode = useTheme().themeClass.includes("uf-dark");
22956
24058
  const selectedToken = selectedTokenSymbol ? tokens.find((t11) => t11.symbol === selectedTokenSymbol) : void 0;
22957
24059
  const availableChainsForToken = selectedToken?.chains || [];
22958
- const renderTokenItem = (tokenData) => /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
22959
- /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
24060
+ const renderTokenItem = (tokenData) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
24061
+ /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
22960
24062
  "img",
22961
24063
  {
22962
24064
  src: tokenData.icon_url,
@@ -22967,10 +24069,10 @@ function WithdrawDoubleInput({
22967
24069
  className: "uf-rounded-full uf-flex-shrink-0"
22968
24070
  }
22969
24071
  ),
22970
- /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "uf-text-xs uf-font-normal", children: tokenData.symbol })
24072
+ /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "uf-text-xs uf-font-normal", children: tokenData.symbol })
22971
24073
  ] });
22972
- const renderChainItem = (chainData) => /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
22973
- /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
24074
+ const renderChainItem = (chainData) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
24075
+ /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
22974
24076
  "img",
22975
24077
  {
22976
24078
  src: chainData.icon_url,
@@ -22981,14 +24083,14 @@ function WithdrawDoubleInput({
22981
24083
  className: "uf-rounded-full uf-flex-shrink-0"
22982
24084
  }
22983
24085
  ),
22984
- /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "uf-text-xs uf-font-normal", children: chainData.chain_name })
24086
+ /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "uf-text-xs uf-font-normal", children: chainData.chain_name })
22985
24087
  ] });
22986
24088
  const currentChainData = selectedChainKey ? availableChainsForToken.find(
22987
24089
  (c) => getChainKey4(c.chain_id, c.chain_type) === selectedChainKey
22988
24090
  ) : void 0;
22989
- return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-grid uf-grid-cols-2 uf-gap-2.5", children: [
22990
- /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { children: [
22991
- /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
24091
+ return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "uf-grid uf-grid-cols-2 uf-gap-2.5", children: [
24092
+ /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { children: [
24093
+ /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
22992
24094
  "div",
22993
24095
  {
22994
24096
  className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1",
@@ -22996,14 +24098,14 @@ function WithdrawDoubleInput({
22996
24098
  children: t7.receiveToken
22997
24099
  }
22998
24100
  ),
22999
- /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
24101
+ /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
23000
24102
  Select2,
23001
24103
  {
23002
24104
  value: selectedTokenSymbol ?? "",
23003
24105
  onValueChange: onTokenChange,
23004
24106
  disabled: isLoading || tokens.length === 0,
23005
24107
  children: [
23006
- /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
24108
+ /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
23007
24109
  SelectTrigger2,
23008
24110
  {
23009
24111
  className: "uf-h-10 hover:uf-opacity-90 uf-text-foreground disabled:uf-opacity-50",
@@ -23011,10 +24113,10 @@ function WithdrawDoubleInput({
23011
24113
  backgroundColor: components.card.backgroundColor,
23012
24114
  border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
23013
24115
  },
23014
- children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(SelectValue2, { children: isLoading || !selectedTokenSymbol ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t7.loading }) : selectedToken ? renderTokenItem(selectedToken) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "uf-text-xs uf-font-normal", children: selectedTokenSymbol }) })
24116
+ children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(SelectValue2, { children: isLoading || !selectedTokenSymbol ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t7.loading }) : selectedToken ? renderTokenItem(selectedToken) : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "uf-text-xs uf-font-normal", children: selectedTokenSymbol }) })
23015
24117
  }
23016
24118
  ),
23017
- /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
24119
+ /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
23018
24120
  SelectContent2,
23019
24121
  {
23020
24122
  className: "uf-bg-secondary uf-border uf-text-foreground uf-max-h-[300px]",
@@ -23022,7 +24124,7 @@ function WithdrawDoubleInput({
23022
24124
  border: `1px solid ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)"}`,
23023
24125
  ...fonts.regular ? { "--uf-font-family": fonts.regular } : {}
23024
24126
  },
23025
- children: tokens.map((tokenData) => /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
24127
+ children: tokens.map((tokenData) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
23026
24128
  SelectItem2,
23027
24129
  {
23028
24130
  value: tokenData.symbol,
@@ -23037,8 +24139,8 @@ function WithdrawDoubleInput({
23037
24139
  }
23038
24140
  )
23039
24141
  ] }),
23040
- /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { children: [
23041
- /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
24142
+ /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { children: [
24143
+ /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
23042
24144
  "div",
23043
24145
  {
23044
24146
  className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1",
@@ -23046,14 +24148,14 @@ function WithdrawDoubleInput({
23046
24148
  children: t7.receiveChain
23047
24149
  }
23048
24150
  ),
23049
- /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
24151
+ /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
23050
24152
  Select2,
23051
24153
  {
23052
24154
  value: selectedChainKey ?? "",
23053
24155
  onValueChange: onChainChange,
23054
24156
  disabled: isLoading || availableChainsForToken.length === 0,
23055
24157
  children: [
23056
- /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
24158
+ /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
23057
24159
  SelectTrigger2,
23058
24160
  {
23059
24161
  className: "uf-h-10 hover:uf-opacity-90 uf-text-foreground disabled:uf-opacity-50",
@@ -23061,10 +24163,10 @@ function WithdrawDoubleInput({
23061
24163
  backgroundColor: components.card.backgroundColor,
23062
24164
  border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
23063
24165
  },
23064
- children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(SelectValue2, { children: isLoading || !selectedChainKey ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t7.loading }) : currentChainData ? renderChainItem(currentChainData) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "uf-text-xs uf-font-normal", children: selectedChainKey }) })
24166
+ children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(SelectValue2, { children: isLoading || !selectedChainKey ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t7.loading }) : currentChainData ? renderChainItem(currentChainData) : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "uf-text-xs uf-font-normal", children: selectedChainKey }) })
23065
24167
  }
23066
24168
  ),
23067
- /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
24169
+ /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
23068
24170
  SelectContent2,
23069
24171
  {
23070
24172
  align: "end",
@@ -23073,9 +24175,9 @@ function WithdrawDoubleInput({
23073
24175
  border: `1px solid ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)"}`,
23074
24176
  ...fonts.regular ? { "--uf-font-family": fonts.regular } : {}
23075
24177
  },
23076
- children: availableChainsForToken.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-px-2 uf-py-3 uf-text-xs uf-text-muted-foreground uf-text-center", children: "No chains available" }) : availableChainsForToken.map((chainData) => {
24178
+ children: availableChainsForToken.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "uf-px-2 uf-py-3 uf-text-xs uf-text-muted-foreground uf-text-center", children: "No chains available" }) : availableChainsForToken.map((chainData) => {
23077
24179
  const chainKey = getChainKey4(chainData.chain_id, chainData.chain_type);
23078
- return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
24180
+ return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
23079
24181
  SelectItem2,
23080
24182
  {
23081
24183
  value: chainKey,
@@ -23104,7 +24206,7 @@ function useVerifyRecipientAddress(params) {
23104
24206
  } = params;
23105
24207
  const trimmedAddress = recipientAddress?.trim() || "";
23106
24208
  const hasAllParams = !!chainType && !!chainId && !!tokenAddress && trimmedAddress.length > 0;
23107
- return (0, import_react_query15.useQuery)({
24209
+ return (0, import_react_query17.useQuery)({
23108
24210
  queryKey: [
23109
24211
  "unifold",
23110
24212
  "verifyRecipientAddress",
@@ -23240,9 +24342,56 @@ async function sendSolanaWithdraw(params) {
23240
24342
  );
23241
24343
  return sendResponse.signature;
23242
24344
  }
24345
+ var HYPERCORE_CHAIN_ID = "1337";
24346
+ var HYPERCORE_SPOT_USDC_ADDRESS = "0x6d1e7cde53ba9467b783cb7c530ce054";
24347
+ function isHypercoreChain(chainId) {
24348
+ return chainId === HYPERCORE_CHAIN_ID;
24349
+ }
24350
+ async function sendHypercoreWithdraw(params) {
24351
+ const {
24352
+ provider,
24353
+ fromAddress,
24354
+ depositWalletAddress,
24355
+ sourceTokenAddress,
24356
+ amount,
24357
+ tokenSymbol,
24358
+ publishableKey
24359
+ } = params;
24360
+ const isSpot = sourceTokenAddress.toLowerCase() === HYPERCORE_SPOT_USDC_ADDRESS;
24361
+ const currentChainHex = await provider.request({
24362
+ method: "eth_chainId",
24363
+ params: []
24364
+ });
24365
+ const activeChainId = String(parseInt(currentChainHex, 16));
24366
+ const buildResult = await buildHypercoreTransaction(
24367
+ {
24368
+ action_type: isSpot ? "spot_send" : "usd_send",
24369
+ signature_chain_type: "ethereum",
24370
+ signature_chain_id: activeChainId,
24371
+ recipient_address: depositWalletAddress,
24372
+ token_address: sourceTokenAddress,
24373
+ token_symbol: tokenSymbol || void 0,
24374
+ amount
24375
+ },
24376
+ publishableKey
24377
+ );
24378
+ const signature = await provider.request({
24379
+ method: "eth_signTypedData_v4",
24380
+ params: [fromAddress, JSON.stringify(buildResult.typed_data)]
24381
+ });
24382
+ await sendHypercoreTransaction(
24383
+ {
24384
+ action_payload: buildResult.action_payload,
24385
+ signature,
24386
+ nonce: buildResult.nonce
24387
+ },
24388
+ publishableKey
24389
+ );
24390
+ }
23243
24391
  async function detectBrowserWallet(chainType, senderAddress) {
23244
24392
  const win = typeof window !== "undefined" ? window : null;
23245
24393
  if (!win || !senderAddress) return null;
24394
+ if (getUserDisconnectedWallet()) return null;
23246
24395
  const anyWin = win;
23247
24396
  if (chainType === "solana") {
23248
24397
  const solProviders = [];
@@ -23276,28 +24425,44 @@ async function detectBrowserWallet(chainType, senderAddress) {
23276
24425
  evmProviders.push({ provider: p, name });
23277
24426
  }
23278
24427
  };
23279
- add(anyWin.phantom?.ethereum, "Phantom");
23280
- add(anyWin.coinbaseWalletExtension, "Coinbase");
23281
- add(anyWin.trustwallet?.ethereum, "Trust Wallet");
23282
- add(anyWin.okxwallet, "OKX Wallet");
23283
- if (anyWin.__eip6963Providers) {
23284
- for (const detail of anyWin.__eip6963Providers) {
23285
- const rdns = detail.info?.rdns || "";
23286
- let name = detail.info?.name || "Wallet";
23287
- if (rdns.includes("metamask")) name = "MetaMask";
23288
- else if (rdns.includes("rabby")) name = "Rabby";
23289
- else if (rdns.includes("rainbow")) name = "Rainbow";
23290
- add(detail.provider, name);
23291
- }
24428
+ if (!anyWin.__eip6963Providers) {
24429
+ anyWin.__eip6963Providers = [];
23292
24430
  }
23293
- if (win.ethereum) {
23294
- const eth = win.ethereum;
23295
- let name = "Wallet";
23296
- if (eth.isMetaMask && !eth.isPhantom && !eth.isRabby) name = "MetaMask";
23297
- else if (eth.isRabby) name = "Rabby";
23298
- else if (eth.isRainbow) name = "Rainbow";
23299
- else if (eth.isCoinbaseWallet) name = "Coinbase";
23300
- add(eth, name);
24431
+ const handleAnnouncement = (event) => {
24432
+ const { detail } = event;
24433
+ if (!detail?.info || !detail?.provider) return;
24434
+ const exists = anyWin.__eip6963Providers.some((p) => p.info.uuid === detail.info.uuid);
24435
+ if (!exists) anyWin.__eip6963Providers.push(detail);
24436
+ };
24437
+ win.addEventListener("eip6963:announceProvider", handleAnnouncement);
24438
+ win.dispatchEvent(new Event("eip6963:requestProvider"));
24439
+ win.removeEventListener("eip6963:announceProvider", handleAnnouncement);
24440
+ for (const detail of anyWin.__eip6963Providers) {
24441
+ const rdns = detail.info?.rdns || "";
24442
+ let name = detail.info?.name || "Wallet";
24443
+ if (rdns.includes("metamask")) name = "MetaMask";
24444
+ else if (rdns.includes("phantom")) name = "Phantom";
24445
+ else if (rdns.includes("coinbase")) name = "Coinbase";
24446
+ else if (rdns.includes("rabby")) name = "Rabby";
24447
+ else if (rdns.includes("rainbow")) name = "Rainbow";
24448
+ else if (rdns.includes("okx")) name = "OKX Wallet";
24449
+ else if (rdns.includes("trust")) name = "Trust Wallet";
24450
+ add(detail.provider, name);
24451
+ }
24452
+ if (evmProviders.length === 0) {
24453
+ add(anyWin.phantom?.ethereum, "Phantom");
24454
+ add(anyWin.coinbaseWalletExtension, "Coinbase");
24455
+ add(anyWin.trustwallet?.ethereum, "Trust Wallet");
24456
+ add(anyWin.okxwallet, "OKX Wallet");
24457
+ if (evmProviders.length === 0 && win.ethereum) {
24458
+ const eth = win.ethereum;
24459
+ let name = "Wallet";
24460
+ if (eth.isMetaMask && !eth.isPhantom && !eth.isRabby) name = "MetaMask";
24461
+ else if (eth.isRabby) name = "Rabby";
24462
+ else if (eth.isRainbow) name = "Rainbow";
24463
+ else if (eth.isCoinbaseWallet) name = "Coinbase";
24464
+ add(eth, name);
24465
+ }
23301
24466
  }
23302
24467
  for (const { provider, name } of evmProviders) {
23303
24468
  try {
@@ -23350,12 +24515,9 @@ function WithdrawForm({
23350
24515
  estimatedProcessingTime,
23351
24516
  maxSlippagePercent,
23352
24517
  priceImpactPercent,
23353
- detectedWallet,
24518
+ senderAddress,
23354
24519
  sourceChainId,
23355
24520
  sourceTokenAddress,
23356
- isWalletMatch,
23357
- connectedWalletName,
23358
- canWithdraw,
23359
24521
  onWithdraw,
23360
24522
  onWithdrawError,
23361
24523
  onDepositWalletCreation,
@@ -23363,22 +24525,22 @@ function WithdrawForm({
23363
24525
  footerLeft
23364
24526
  }) {
23365
24527
  const { colors: colors2, fonts, components } = useTheme();
23366
- const [recipientAddress, setRecipientAddress] = (0, import_react28.useState)(recipientAddressProp || "");
23367
- const [amount, setAmount] = (0, import_react28.useState)("");
23368
- const [inputUnit, setInputUnit] = (0, import_react28.useState)("crypto");
23369
- const [isSubmitting, setIsSubmitting] = (0, import_react28.useState)(false);
23370
- const [submitError, setSubmitError] = (0, import_react28.useState)(null);
23371
- const [detailsExpanded, setDetailsExpanded] = (0, import_react28.useState)(false);
23372
- const [glossaryOpen, setGlossaryOpen] = (0, import_react28.useState)(false);
23373
- (0, import_react28.useEffect)(() => {
24528
+ const [recipientAddress, setRecipientAddress] = (0, import_react29.useState)(recipientAddressProp || "");
24529
+ const [amount, setAmount] = (0, import_react29.useState)("");
24530
+ const [inputUnit, setInputUnit] = (0, import_react29.useState)("crypto");
24531
+ const [isSubmitting, setIsSubmitting] = (0, import_react29.useState)(false);
24532
+ const [submitError, setSubmitError] = (0, import_react29.useState)(null);
24533
+ const [detailsExpanded, setDetailsExpanded] = (0, import_react29.useState)(false);
24534
+ const [glossaryOpen, setGlossaryOpen] = (0, import_react29.useState)(false);
24535
+ (0, import_react29.useEffect)(() => {
23374
24536
  setRecipientAddress(recipientAddressProp || "");
23375
24537
  setAmount("");
23376
24538
  setInputUnit("crypto");
23377
24539
  setSubmitError(null);
23378
24540
  }, [recipientAddressProp]);
23379
24541
  const trimmedAddress = recipientAddress.trim();
23380
- const [debouncedAddress, setDebouncedAddress] = (0, import_react28.useState)(trimmedAddress);
23381
- (0, import_react28.useEffect)(() => {
24542
+ const [debouncedAddress, setDebouncedAddress] = (0, import_react29.useState)(trimmedAddress);
24543
+ (0, import_react29.useEffect)(() => {
23382
24544
  const id = setTimeout(() => setDebouncedAddress(trimmedAddress), 500);
23383
24545
  return () => clearTimeout(id);
23384
24546
  }, [trimmedAddress]);
@@ -23395,7 +24557,7 @@ function WithdrawForm({
23395
24557
  enabled: debouncedAddress.length > 5 && !!selectedChain
23396
24558
  });
23397
24559
  const isDebouncing = trimmedAddress !== debouncedAddress;
23398
- const addressError = (0, import_react28.useMemo)(() => {
24560
+ const addressError = (0, import_react29.useMemo)(() => {
23399
24561
  if (!trimmedAddress || trimmedAddress.length <= 5) return null;
23400
24562
  if (isDebouncing || isVerifyingAddress) return null;
23401
24563
  if (verifyError) return t8.invalidAddress;
@@ -23409,47 +24571,47 @@ function WithdrawForm({
23409
24571
  return null;
23410
24572
  }, [trimmedAddress, isDebouncing, isVerifyingAddress, verifyError, addressVerification, selectedChain, selectedToken]);
23411
24573
  const isAddressValid = !isDebouncing && !!addressVerification?.valid && !addressError;
23412
- const exchangeRate = (0, import_react28.useMemo)(() => {
24574
+ const exchangeRate = (0, import_react29.useMemo)(() => {
23413
24575
  if (!balanceData?.exchangeRate) return 0;
23414
24576
  return parseFloat(balanceData.exchangeRate);
23415
24577
  }, [balanceData]);
23416
- const balanceCrypto = (0, import_react28.useMemo)(() => {
24578
+ const balanceCrypto = (0, import_react29.useMemo)(() => {
23417
24579
  if (!balanceData?.balanceHuman) return 0;
23418
24580
  return parseFloat(balanceData.balanceHuman);
23419
24581
  }, [balanceData]);
23420
- const balanceUsdNum = (0, import_react28.useMemo)(() => {
24582
+ const balanceUsdNum = (0, import_react29.useMemo)(() => {
23421
24583
  if (!balanceData?.balanceUsd) return 0;
23422
24584
  return parseFloat(balanceData.balanceUsd);
23423
24585
  }, [balanceData]);
23424
24586
  const tokenSymbol = sourceTokenSymbol || balanceData?.symbol || "TOKEN";
23425
24587
  const sourceDecimals = balanceData?.decimals ?? 6;
23426
- const cryptoAmountFromInput = (0, import_react28.useMemo)(() => {
24588
+ const cryptoAmountFromInput = (0, import_react29.useMemo)(() => {
23427
24589
  const val = parseFloat(amount);
23428
24590
  if (!val || val <= 0) return 0;
23429
24591
  if (inputUnit === "crypto") return val;
23430
24592
  return exchangeRate > 0 ? val / exchangeRate : 0;
23431
24593
  }, [amount, inputUnit, exchangeRate]);
23432
- const fiatAmountFromInput = (0, import_react28.useMemo)(() => {
24594
+ const fiatAmountFromInput = (0, import_react29.useMemo)(() => {
23433
24595
  const val = parseFloat(amount);
23434
24596
  if (!val || val <= 0) return 0;
23435
24597
  if (inputUnit === "fiat") return val;
23436
24598
  return val * exchangeRate;
23437
24599
  }, [amount, inputUnit, exchangeRate]);
23438
- const convertedDisplay = (0, import_react28.useMemo)(() => {
24600
+ const convertedDisplay = (0, import_react29.useMemo)(() => {
23439
24601
  if (!amount || parseFloat(amount) <= 0) return null;
23440
24602
  if (inputUnit === "crypto") {
23441
24603
  return `$${fiatAmountFromInput.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
23442
24604
  }
23443
24605
  return `${cryptoAmountFromInput.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 6 })} ${tokenSymbol}`;
23444
24606
  }, [amount, inputUnit, fiatAmountFromInput, cryptoAmountFromInput, tokenSymbol]);
23445
- const balanceDisplay = (0, import_react28.useMemo)(() => {
24607
+ const balanceDisplay = (0, import_react29.useMemo)(() => {
23446
24608
  if (isLoadingBalance || !balanceData) return null;
23447
24609
  if (inputUnit === "crypto") {
23448
24610
  return `${balanceCrypto.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ${tokenSymbol}`;
23449
24611
  }
23450
24612
  return `$${balanceUsdNum.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
23451
24613
  }, [isLoadingBalance, balanceData, inputUnit, balanceCrypto, balanceUsdNum, tokenSymbol]);
23452
- const handleSwitchUnit = (0, import_react28.useCallback)(() => {
24614
+ const handleSwitchUnit = (0, import_react29.useCallback)(() => {
23453
24615
  const val = parseFloat(amount);
23454
24616
  if (!val || val <= 0 || exchangeRate <= 0) {
23455
24617
  setInputUnit((u) => u === "crypto" ? "fiat" : "crypto");
@@ -23466,7 +24628,7 @@ function WithdrawForm({
23466
24628
  setInputUnit("crypto");
23467
24629
  }
23468
24630
  }, [amount, inputUnit, exchangeRate, sourceDecimals]);
23469
- const handleMaxClick = (0, import_react28.useCallback)(() => {
24631
+ const handleMaxClick = (0, import_react29.useCallback)(() => {
23470
24632
  if (inputUnit === "crypto") {
23471
24633
  if (balanceCrypto <= 0) return;
23472
24634
  setAmount(balanceData?.balanceHuman ?? "0");
@@ -23478,7 +24640,7 @@ function WithdrawForm({
23478
24640
  const isBelowMinimum = minimumWithdrawAmountUsd !== null && fiatAmountFromInput > 0 && fiatAmountFromInput < minimumWithdrawAmountUsd;
23479
24641
  const isOverBalance = inputUnit === "crypto" ? cryptoAmountFromInput > 0 && balanceCrypto > 0 && cryptoAmountFromInput > balanceCrypto : fiatAmountFromInput > 0 && balanceUsdNum > 0 && fiatAmountFromInput > balanceUsdNum;
23480
24642
  const isFormValid = trimmedAddress.length > 0 && amount.trim().length > 0 && cryptoAmountFromInput > 0 && isAddressValid && !isBelowMinimum && !isOverBalance && !!balanceData;
23481
- const handleWithdraw = (0, import_react28.useCallback)(async () => {
24643
+ const handleWithdraw = (0, import_react29.useCallback)(async () => {
23482
24644
  if (!selectedToken || !selectedChain) return;
23483
24645
  if (!isFormValid) return;
23484
24646
  setIsSubmitting(true);
@@ -23490,12 +24652,43 @@ function WithdrawForm({
23490
24652
  destinationTokenAddress: selectedChain.token_address,
23491
24653
  recipientAddress: trimmedAddress
23492
24654
  });
23493
- const amountBaseUnit = computeBaseUnit(
24655
+ let amountBaseUnit = computeBaseUnit(
23494
24656
  balanceData.balanceBaseUnit,
23495
24657
  parseFloat(amount),
23496
24658
  inputUnit === "crypto" ? balanceCrypto : balanceUsdNum
23497
24659
  );
23498
- const humanAmount = toSafeDecimalString(cryptoAmountFromInput, sourceDecimals);
24660
+ let humanAmount = toSafeDecimalString(cryptoAmountFromInput, sourceDecimals);
24661
+ if (isHypercoreChain(sourceChainId)) {
24662
+ try {
24663
+ const check = await checkHypercoreActivation(
24664
+ {
24665
+ source_address: senderAddress,
24666
+ recipient_address: depositWallet.address
24667
+ },
24668
+ publishableKey
24669
+ );
24670
+ if (!check.user_exists) {
24671
+ const fee = check.activation_fee;
24672
+ const maxSendable = balanceCrypto - fee;
24673
+ if (maxSendable <= 0) {
24674
+ throw new Error(
24675
+ `Insufficient balance. A ${fee} USDC activation fee is required for the first transfer to this address.`
24676
+ );
24677
+ }
24678
+ const requestedAmount = parseFloat(humanAmount);
24679
+ if (requestedAmount > maxSendable) {
24680
+ humanAmount = toSafeDecimalString(maxSendable, sourceDecimals);
24681
+ amountBaseUnit = computeBaseUnit(
24682
+ balanceData.balanceBaseUnit,
24683
+ maxSendable,
24684
+ balanceCrypto
24685
+ );
24686
+ }
24687
+ }
24688
+ } catch (e) {
24689
+ if (e instanceof Error && e.message.includes("activation fee")) throw e;
24690
+ }
24691
+ }
23499
24692
  const txInfo = {
23500
24693
  sourceChainType,
23501
24694
  sourceChainId,
@@ -23510,33 +24703,67 @@ function WithdrawForm({
23510
24703
  withdrawIntentAddress: depositWallet.address,
23511
24704
  recipientAddress: trimmedAddress
23512
24705
  };
23513
- if (detectedWallet) {
23514
- if (detectedWallet.chainFamily === "evm") {
23515
- await sendEvmWithdraw({
23516
- provider: detectedWallet.provider,
23517
- fromAddress: detectedWallet.address,
23518
- depositWalletAddress: depositWallet.address,
23519
- sourceTokenAddress,
24706
+ const wallet = await detectBrowserWallet(sourceChainType, senderAddress);
24707
+ console.log("browser wallet", wallet);
24708
+ if (wallet) {
24709
+ try {
24710
+ if (wallet.chainFamily === "evm" && isHypercoreChain(sourceChainId)) {
24711
+ await sendHypercoreWithdraw({
24712
+ provider: wallet.provider,
24713
+ fromAddress: wallet.address,
24714
+ depositWalletAddress: depositWallet.address,
24715
+ sourceTokenAddress,
24716
+ amount: humanAmount,
24717
+ tokenSymbol,
24718
+ publishableKey
24719
+ });
24720
+ } else if (wallet.chainFamily === "evm") {
24721
+ await sendEvmWithdraw({
24722
+ provider: wallet.provider,
24723
+ fromAddress: wallet.address,
24724
+ depositWalletAddress: depositWallet.address,
24725
+ sourceTokenAddress,
24726
+ sourceChainId,
24727
+ amountBaseUnit
24728
+ });
24729
+ } else if (wallet.chainFamily === "solana") {
24730
+ await sendSolanaWithdraw({
24731
+ provider: wallet.provider,
24732
+ fromAddress: wallet.address,
24733
+ depositWalletAddress: depositWallet.address,
24734
+ sourceTokenAddress,
24735
+ amountBaseUnit,
24736
+ publishableKey
24737
+ });
24738
+ }
24739
+ } catch (walletErr) {
24740
+ console.error("[Unifold] Browser wallet send failed:", walletErr, {
24741
+ wallet: `${wallet.name} (${wallet.chainFamily})`,
23520
24742
  sourceChainId,
23521
- amountBaseUnit
23522
- });
23523
- } else if (detectedWallet.chainFamily === "solana") {
23524
- await sendSolanaWithdraw({
23525
- provider: detectedWallet.provider,
23526
- fromAddress: detectedWallet.address,
23527
- depositWalletAddress: depositWallet.address,
23528
- sourceTokenAddress,
24743
+ amount: humanAmount,
23529
24744
  amountBaseUnit,
23530
- publishableKey
24745
+ depositWallet: depositWallet.address
23531
24746
  });
24747
+ throw walletErr;
23532
24748
  }
23533
24749
  } else if (onWithdraw) {
23534
- await onWithdraw(txInfo);
24750
+ try {
24751
+ await onWithdraw(txInfo);
24752
+ } catch (callbackErr) {
24753
+ console.error("[Unifold] onWithdraw callback failed:", callbackErr, {
24754
+ sourceChainId,
24755
+ amount: humanAmount,
24756
+ amountBaseUnit,
24757
+ depositWallet: depositWallet.address
24758
+ });
24759
+ throw callbackErr;
24760
+ }
23535
24761
  } else {
23536
24762
  throw new Error("No withdrawal method available. Please connect a wallet.");
23537
24763
  }
23538
24764
  onWithdrawSubmitted?.(txInfo);
23539
24765
  } catch (err) {
24766
+ console.error("[Unifold] Withdrawal failed:", err);
23540
24767
  const raw = err instanceof Error ? err.message : "Withdrawal failed. Please try again.";
23541
24768
  setSubmitError(raw.length > 120 ? "Withdrawal failed. Please try again." : raw);
23542
24769
  onWithdrawError?.({
@@ -23547,10 +24774,10 @@ function WithdrawForm({
23547
24774
  } finally {
23548
24775
  setIsSubmitting(false);
23549
24776
  }
23550
- }, [selectedToken, selectedChain, isFormValid, cryptoAmountFromInput, sourceDecimals, trimmedAddress, publishableKey, onWithdraw, detectedWallet, sourceTokenAddress, sourceChainId, onWithdrawError, onDepositWalletCreation, onWithdrawSubmitted, amount, inputUnit, balanceCrypto, balanceUsdNum, balanceData]);
23551
- return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_jsx_runtime70.Fragment, { children: [
23552
- /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { children: [
23553
- /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
24777
+ }, [selectedToken, selectedChain, isFormValid, cryptoAmountFromInput, sourceDecimals, trimmedAddress, publishableKey, onWithdraw, sourceChainType, senderAddress, sourceTokenAddress, sourceChainId, onWithdrawError, onDepositWalletCreation, onWithdrawSubmitted, amount, inputUnit, balanceCrypto, balanceUsdNum, balanceData]);
24778
+ return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
24779
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { children: [
24780
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
23554
24781
  "div",
23555
24782
  {
23556
24783
  className: "uf-text-xs uf-mb-1.5",
@@ -23558,7 +24785,7 @@ function WithdrawForm({
23558
24785
  children: t8.recipientAddress
23559
24786
  }
23560
24787
  ),
23561
- /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
24788
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
23562
24789
  "style",
23563
24790
  {
23564
24791
  dangerouslySetInnerHTML: {
@@ -23566,7 +24793,7 @@ function WithdrawForm({
23566
24793
  }
23567
24794
  }
23568
24795
  ),
23569
- /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
24796
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
23570
24797
  "div",
23571
24798
  {
23572
24799
  className: "uf-flex uf-items-center uf-gap-1 uf-pr-2",
@@ -23576,7 +24803,7 @@ function WithdrawForm({
23576
24803
  border: `${components.input.borderWidth}px solid ${addressError ? colors2.error : components.input.borderColor}`
23577
24804
  },
23578
24805
  children: [
23579
- /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
24806
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
23580
24807
  "input",
23581
24808
  {
23582
24809
  type: "text",
@@ -23593,7 +24820,7 @@ function WithdrawForm({
23593
24820
  }
23594
24821
  }
23595
24822
  ),
23596
- /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
24823
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
23597
24824
  "button",
23598
24825
  {
23599
24826
  type: "button",
@@ -23610,27 +24837,27 @@ function WithdrawForm({
23610
24837
  className: "uf-flex-shrink-0 uf-p-1 uf-rounded uf-transition-colors hover:uf-opacity-70",
23611
24838
  style: { color: colors2.foregroundMuted },
23612
24839
  title: "Paste from clipboard",
23613
- children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ClipboardPaste, { className: "uf-w-4 uf-h-4" })
24840
+ children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ClipboardPaste, { className: "uf-w-4 uf-h-4" })
23614
24841
  }
23615
24842
  )
23616
24843
  ]
23617
24844
  }
23618
24845
  ),
23619
- (isDebouncing || isVerifyingAddress) && trimmedAddress.length > 5 && /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-1.5", children: [
23620
- /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(LoaderCircle, { className: "uf-w-3 uf-h-3 uf-animate-spin", style: { color: colors2.foregroundMuted } }),
23621
- /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: t8.verifyingAddress })
24846
+ (isDebouncing || isVerifyingAddress) && trimmedAddress.length > 5 && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-1.5", children: [
24847
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(LoaderCircle, { className: "uf-w-3 uf-h-3 uf-animate-spin", style: { color: colors2.foregroundMuted } }),
24848
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: t8.verifyingAddress })
23622
24849
  ] }),
23623
- addressError && /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-1.5", children: [
23624
- /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(TriangleAlert, { className: "uf-w-3 uf-h-3", style: { color: colors2.error } }),
23625
- /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "uf-text-xs", style: { color: colors2.error, fontFamily: fonts.regular }, children: addressError })
24850
+ addressError && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-1.5", children: [
24851
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TriangleAlert, { className: "uf-w-3 uf-h-3", style: { color: colors2.error } }),
24852
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "uf-text-xs", style: { color: colors2.error, fontFamily: fonts.regular }, children: addressError })
23626
24853
  ] })
23627
24854
  ] }),
23628
- /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { children: [
23629
- /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "uf-text-xs uf-mb-1.5", style: { color: components.card.labelColor, fontFamily: fonts.medium }, children: [
24855
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { children: [
24856
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-text-xs uf-mb-1.5", style: { color: components.card.labelColor, fontFamily: fonts.medium }, children: [
23630
24857
  t8.amount,
23631
- minimumWithdrawAmountUsd != null && minimumWithdrawAmountUsd > 0 && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { style: { color: colors2.warning, fontFamily: fonts.regular }, children: ` ($${minimumWithdrawAmountUsd.toFixed(2)} min)` })
24858
+ minimumWithdrawAmountUsd != null && minimumWithdrawAmountUsd > 0 && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { style: { color: colors2.warning, fontFamily: fonts.regular }, children: ` ($${minimumWithdrawAmountUsd.toFixed(2)} min)` })
23632
24859
  ] }),
23633
- /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
24860
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
23634
24861
  "style",
23635
24862
  {
23636
24863
  dangerouslySetInnerHTML: {
@@ -23638,7 +24865,7 @@ function WithdrawForm({
23638
24865
  }
23639
24866
  }
23640
24867
  ),
23641
- /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
24868
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
23642
24869
  "div",
23643
24870
  {
23644
24871
  className: "uf-flex uf-items-center uf-gap-2 uf-px-3 uf-py-2.5",
@@ -23648,7 +24875,7 @@ function WithdrawForm({
23648
24875
  border: `${components.input.borderWidth}px solid ${components.input.borderColor}`
23649
24876
  },
23650
24877
  children: [
23651
- /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
24878
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
23652
24879
  "input",
23653
24880
  {
23654
24881
  type: "text",
@@ -23669,8 +24896,8 @@ function WithdrawForm({
23669
24896
  }
23670
24897
  }
23671
24898
  ),
23672
- /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "uf-text-sm uf-shrink-0", style: { color: colors2.foregroundMuted, fontFamily: fonts.medium }, children: inputUnit === "crypto" ? tokenSymbol : "USD" }),
23673
- /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
24899
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "uf-text-sm uf-shrink-0", style: { color: colors2.foregroundMuted, fontFamily: fonts.medium }, children: inputUnit === "crypto" ? tokenSymbol : "USD" }),
24900
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
23674
24901
  "button",
23675
24902
  {
23676
24903
  type: "button",
@@ -23683,10 +24910,10 @@ function WithdrawForm({
23683
24910
  ]
23684
24911
  }
23685
24912
  ),
23686
- /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-mt-1.5 uf-px-3", children: [
23687
- /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
23688
- /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: convertedDisplay || (inputUnit === "crypto" ? "$0.00" : `0.00 ${tokenSymbol}`) }),
23689
- exchangeRate > 0 && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
24913
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-mt-1.5 uf-px-3", children: [
24914
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
24915
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: convertedDisplay || (inputUnit === "crypto" ? "$0.00" : `0.00 ${tokenSymbol}`) }),
24916
+ exchangeRate > 0 && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
23690
24917
  "button",
23691
24918
  {
23692
24919
  type: "button",
@@ -23694,49 +24921,49 @@ function WithdrawForm({
23694
24921
  className: "uf-p-0.5 uf-rounded uf-transition-colors hover:uf-opacity-70",
23695
24922
  style: { color: colors2.foregroundMuted },
23696
24923
  title: "Switch unit",
23697
- children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ArrowUpDown, { className: "uf-w-3 uf-h-3" })
24924
+ children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ArrowUpDown, { className: "uf-w-3 uf-h-3" })
23698
24925
  }
23699
24926
  )
23700
24927
  ] }),
23701
- /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { children: [
23702
- balanceDisplay && /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: [
24928
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { children: [
24929
+ balanceDisplay && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: [
23703
24930
  t8.balance,
23704
24931
  ": ",
23705
24932
  balanceDisplay
23706
24933
  ] }),
23707
- isLoadingBalance && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "uf-h-3 uf-w-16 uf-bg-muted uf-rounded uf-animate-pulse" })
24934
+ isLoadingBalance && /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "uf-h-3 uf-w-16 uf-bg-muted uf-rounded uf-animate-pulse" })
23708
24935
  ] })
23709
24936
  ] })
23710
24937
  ] }),
23711
- /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "uf-px-2.5", style: { backgroundColor: components.card.backgroundColor, borderRadius: components.card.borderRadius, border: `${components.card.borderWidth}px solid ${components.card.borderColor}` }, children: [
23712
- /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
24938
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-px-2.5", style: { backgroundColor: components.card.backgroundColor, borderRadius: components.card.borderRadius, border: `${components.card.borderWidth}px solid ${components.card.borderColor}` }, children: [
24939
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
23713
24940
  "button",
23714
24941
  {
23715
24942
  type: "button",
23716
24943
  onClick: () => setDetailsExpanded(!detailsExpanded),
23717
24944
  className: "uf-w-full uf-flex uf-items-center uf-justify-between uf-py-2.5",
23718
24945
  children: [
23719
- /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
23720
- /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Clock, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
23721
- /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
24946
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
24947
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Clock, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
24948
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
23722
24949
  tCrypto.processingTime.label,
23723
24950
  ":",
23724
24951
  " ",
23725
- /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: formatProcessingTime2(estimatedProcessingTime) })
24952
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: formatProcessingTime2(estimatedProcessingTime) })
23726
24953
  ] })
23727
24954
  ] }),
23728
- detailsExpanded ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ChevronUp, { className: "uf-w-4 uf-h-4", style: { color: components.card.actionColor } }) : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ChevronDown, { className: "uf-w-4 uf-h-4", style: { color: components.card.actionColor } })
24955
+ detailsExpanded ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ChevronUp, { className: "uf-w-4 uf-h-4", style: { color: components.card.actionColor } }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ChevronDown, { className: "uf-w-4 uf-h-4", style: { color: components.card.actionColor } })
23729
24956
  ]
23730
24957
  }
23731
24958
  ),
23732
- detailsExpanded && /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "uf-pb-3 uf-space-y-2.5", children: [
23733
- /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
23734
- /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ShieldCheck, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
23735
- /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
24959
+ detailsExpanded && /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-pb-3 uf-space-y-2.5", children: [
24960
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
24961
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ShieldCheck, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
24962
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
23736
24963
  tCrypto.slippage.label,
23737
24964
  ":",
23738
24965
  " ",
23739
- /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: [
24966
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: [
23740
24967
  tCrypto.slippage.auto,
23741
24968
  " \u2022 ",
23742
24969
  (maxSlippagePercent ?? 0.25).toFixed(2),
@@ -23744,13 +24971,13 @@ function WithdrawForm({
23744
24971
  ] })
23745
24972
  ] })
23746
24973
  ] }),
23747
- /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
23748
- /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(DollarSign, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
23749
- /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
24974
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
24975
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(DollarSign, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
24976
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
23750
24977
  tCrypto.priceImpact.label,
23751
24978
  ":",
23752
24979
  " ",
23753
- /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: [
24980
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: [
23754
24981
  (priceImpactPercent ?? 0).toFixed(2),
23755
24982
  "%"
23756
24983
  ] })
@@ -23758,23 +24985,12 @@ function WithdrawForm({
23758
24985
  ] })
23759
24986
  ] })
23760
24987
  ] }),
23761
- !canWithdraw && !submitError && /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
23762
- "div",
23763
- {
23764
- className: "uf-flex uf-items-start uf-gap-2.5 uf-p-3 uf-rounded-xl",
23765
- style: { backgroundColor: colors2.card, border: `1px solid ${colors2.border}` },
23766
- children: [
23767
- /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Wallet, { className: "uf-w-4 uf-h-4 uf-flex-shrink-0 uf-mt-0.5", style: { color: colors2.warning } }),
23768
- /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: "No connected wallet detected. Please connect a wallet that matches your account to withdraw." })
23769
- ]
23770
- }
23771
- ),
23772
- isWalletMatch && connectedWalletName ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
24988
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
23773
24989
  "button",
23774
24990
  {
23775
24991
  type: "button",
23776
24992
  onClick: handleWithdraw,
23777
- disabled: !isFormValid || !canWithdraw || isSubmitting || !selectedToken || !selectedChain,
24993
+ disabled: !isFormValid || isSubmitting || !selectedToken || !selectedChain,
23778
24994
  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",
23779
24995
  style: {
23780
24996
  backgroundColor: colors2.primary,
@@ -23783,40 +24999,20 @@ function WithdrawForm({
23783
24999
  borderRadius: components.button.borderRadius,
23784
25000
  border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
23785
25001
  },
23786
- children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_jsx_runtime70.Fragment, { children: [
23787
- /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
25002
+ children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
25003
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
23788
25004
  "Processing..."
23789
- ] }) : isOverBalance ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_jsx_runtime70.Fragment, { children: "Insufficient balance" }) : isBelowMinimum ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_jsx_runtime70.Fragment, { children: "Minimum amount not met" }) : submitError ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(import_jsx_runtime70.Fragment, { children: "Withdrawal failed. Try again" }) : /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(import_jsx_runtime70.Fragment, { children: [
23790
- /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Wallet, { className: "uf-w-4 uf-h-4" }),
23791
- "Withdraw from ",
23792
- connectedWalletName
25005
+ ] }) : isOverBalance ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_jsx_runtime71.Fragment, { children: "Insufficient balance" }) : isBelowMinimum ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_jsx_runtime71.Fragment, { children: "Minimum amount not met" }) : submitError ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(import_jsx_runtime71.Fragment, { children: "Withdrawal failed. Try again" }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
25006
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Wallet, { className: "uf-w-4 uf-h-4" }),
25007
+ t8.withdraw
23793
25008
  ] })
23794
25009
  }
23795
- ) : /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
23796
- "button",
23797
- {
23798
- type: "button",
23799
- onClick: handleWithdraw,
23800
- disabled: !isFormValid || !canWithdraw || isSubmitting || !selectedToken || !selectedChain,
23801
- 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",
23802
- style: {
23803
- backgroundColor: colors2.primary,
23804
- color: colors2.primaryForeground,
23805
- fontFamily: fonts.medium,
23806
- borderRadius: components.button.borderRadius,
23807
- border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
23808
- },
23809
- children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("span", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2", children: [
23810
- /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
23811
- "Processing..."
23812
- ] }) : isOverBalance ? "Insufficient balance" : isBelowMinimum ? "Minimum amount not met" : submitError ? "Withdrawal failed. Try again" : t8.withdraw
23813
- }
23814
25010
  ),
23815
- /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-text-xs uf-pt-1", children: [
23816
- /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { children: footerLeft }),
23817
- /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(DepositFooterLinks, { onGlossaryClick: () => setGlossaryOpen(true) })
25011
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-text-xs uf-pt-1", children: [
25012
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { children: footerLeft }),
25013
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(DepositFooterLinks, { onGlossaryClick: () => setGlossaryOpen(true) })
23818
25014
  ] }),
23819
- /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
25015
+ /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
23820
25016
  GlossaryModal,
23821
25017
  {
23822
25018
  open: glossaryOpen,
@@ -23862,7 +25058,7 @@ function WithdrawExecutionItem({
23862
25058
  return "$0.00";
23863
25059
  }
23864
25060
  };
23865
- return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
25061
+ return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
23866
25062
  "button",
23867
25063
  {
23868
25064
  onClick,
@@ -23873,8 +25069,8 @@ function WithdrawExecutionItem({
23873
25069
  border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
23874
25070
  },
23875
25071
  children: [
23876
- /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-relative uf-flex-shrink-0 uf-w-9 uf-h-9", children: [
23877
- /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
25072
+ /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "uf-relative uf-flex-shrink-0 uf-w-9 uf-h-9", children: [
25073
+ /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
23878
25074
  "img",
23879
25075
  {
23880
25076
  src: execution.destination_token_metadata?.icon_url || getIconUrl("/icons/tokens/svg/usdc.svg"),
@@ -23885,12 +25081,12 @@ function WithdrawExecutionItem({
23885
25081
  className: "uf-rounded-full uf-w-9 uf-h-9"
23886
25082
  }
23887
25083
  ),
23888
- isPending ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
25084
+ isPending ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
23889
25085
  "div",
23890
25086
  {
23891
25087
  className: "uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-rounded-full uf-p-0.5",
23892
25088
  style: { backgroundColor: colors2.warning },
23893
- children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
25089
+ children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
23894
25090
  "svg",
23895
25091
  {
23896
25092
  width: "10",
@@ -23898,7 +25094,7 @@ function WithdrawExecutionItem({
23898
25094
  viewBox: "0 0 12 12",
23899
25095
  fill: "none",
23900
25096
  className: "uf-animate-spin uf-block",
23901
- children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
25097
+ children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
23902
25098
  "path",
23903
25099
  {
23904
25100
  d: "M6 1V3M6 9V11M1 6H3M9 6H11M2.5 2.5L4 4M8 8L9.5 9.5M2.5 9.5L4 8M8 4L9.5 2.5",
@@ -23910,12 +25106,12 @@ function WithdrawExecutionItem({
23910
25106
  }
23911
25107
  )
23912
25108
  }
23913
- ) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
25109
+ ) : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
23914
25110
  "div",
23915
25111
  {
23916
25112
  className: "uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-rounded-full uf-p-0.5",
23917
25113
  style: { backgroundColor: colors2.success },
23918
- children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
25114
+ children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
23919
25115
  "svg",
23920
25116
  {
23921
25117
  width: "10",
@@ -23923,7 +25119,7 @@ function WithdrawExecutionItem({
23923
25119
  viewBox: "0 0 12 12",
23924
25120
  fill: "none",
23925
25121
  className: "uf-block",
23926
- children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
25122
+ children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
23927
25123
  "path",
23928
25124
  {
23929
25125
  d: "M10 3L4.5 8.5L2 6",
@@ -23938,8 +25134,8 @@ function WithdrawExecutionItem({
23938
25134
  }
23939
25135
  )
23940
25136
  ] }),
23941
- /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "uf-flex-1 uf-min-w-0", children: [
23942
- /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
25137
+ /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "uf-flex-1 uf-min-w-0", children: [
25138
+ /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
23943
25139
  "h3",
23944
25140
  {
23945
25141
  className: "uf-font-medium uf-text-sm uf-leading-tight",
@@ -23950,7 +25146,7 @@ function WithdrawExecutionItem({
23950
25146
  children: isPending ? "Withdrawal processing" : "Withdrawal completed"
23951
25147
  }
23952
25148
  ),
23953
- /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
25149
+ /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
23954
25150
  "p",
23955
25151
  {
23956
25152
  className: "uf-text-xs uf-leading-tight",
@@ -23962,7 +25158,7 @@ function WithdrawExecutionItem({
23962
25158
  }
23963
25159
  )
23964
25160
  ] }),
23965
- /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
25161
+ /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
23966
25162
  "span",
23967
25163
  {
23968
25164
  className: "uf-font-medium uf-text-sm uf-flex-shrink-0",
@@ -23973,7 +25169,7 @@ function WithdrawExecutionItem({
23973
25169
  children: formatUsdAmount2(execution.source_amount_usd || "0")
23974
25170
  }
23975
25171
  ),
23976
- /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
25172
+ /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
23977
25173
  ChevronRight,
23978
25174
  {
23979
25175
  className: "uf-w-4 uf-h-4 uf-flex-shrink-0",
@@ -23996,9 +25192,9 @@ function WithdrawConfirmingView({
23996
25192
  onViewTracker
23997
25193
  }) {
23998
25194
  const { colors: colors2, fonts, components } = useTheme();
23999
- const [showButton, setShowButton] = (0, import_react29.useState)(false);
25195
+ const [showButton, setShowButton] = (0, import_react30.useState)(false);
24000
25196
  const latestExecution = executions.length > 0 ? executions[executions.length - 1] : null;
24001
- (0, import_react29.useEffect)(() => {
25197
+ (0, import_react30.useEffect)(() => {
24002
25198
  if (latestExecution) return;
24003
25199
  const timer = setTimeout(() => setShowButton(true), SHOW_BUTTON_DELAY_MS);
24004
25200
  return () => clearTimeout(timer);
@@ -24006,11 +25202,11 @@ function WithdrawConfirmingView({
24006
25202
  const btnRadius = components.button.borderRadius;
24007
25203
  const btnBorder = `${components.button.borderWidth}px solid ${components.button.borderColor}`;
24008
25204
  if (latestExecution) {
24009
- return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(import_jsx_runtime72.Fragment, { children: [
24010
- /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(DepositHeader, { title: "Withdrawal Details", showClose: true, onClose }),
24011
- /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(DepositDetailContent, { execution: latestExecution, variant: "withdraw" }),
24012
- /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "uf-flex uf-gap-2 uf-px-2 uf-pt-2", children: [
24013
- /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
25205
+ return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
25206
+ /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(DepositHeader, { title: "Withdrawal Details", showClose: true, onClose }),
25207
+ /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(DepositDetailContent, { execution: latestExecution, variant: "withdraw" }),
25208
+ /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-gap-2 uf-px-2 uf-pt-2", children: [
25209
+ /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
24014
25210
  "button",
24015
25211
  {
24016
25212
  type: "button",
@@ -24026,7 +25222,7 @@ function WithdrawConfirmingView({
24026
25222
  children: "Withdrawal History"
24027
25223
  }
24028
25224
  ),
24029
- /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
25225
+ /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
24030
25226
  "button",
24031
25227
  {
24032
25228
  type: "button",
@@ -24043,7 +25239,7 @@ function WithdrawConfirmingView({
24043
25239
  }
24044
25240
  )
24045
25241
  ] }),
24046
- /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
25242
+ /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
24047
25243
  PoweredByUnifold,
24048
25244
  {
24049
25245
  color: colors2.foregroundMuted,
@@ -24052,15 +25248,15 @@ function WithdrawConfirmingView({
24052
25248
  ) })
24053
25249
  ] });
24054
25250
  }
24055
- return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(import_jsx_runtime72.Fragment, { children: [
24056
- /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(DepositHeader, { title: "Withdrawal Status", showClose: true, onClose }),
24057
- /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-16 uf-px-4", children: [
24058
- /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
25251
+ return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
25252
+ /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(DepositHeader, { title: "Withdrawal Status", showClose: true, onClose }),
25253
+ /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-16 uf-px-4", children: [
25254
+ /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
24059
25255
  "div",
24060
25256
  {
24061
25257
  className: "uf-w-20 uf-h-20 uf-rounded-full uf-flex uf-items-center uf-justify-center uf-mb-6",
24062
25258
  style: { backgroundColor: `${colors2.primary}20` },
24063
- children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
25259
+ children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
24064
25260
  "svg",
24065
25261
  {
24066
25262
  width: "40",
@@ -24068,7 +25264,7 @@ function WithdrawConfirmingView({
24068
25264
  viewBox: "0 0 24 24",
24069
25265
  fill: "none",
24070
25266
  className: "uf-animate-spin",
24071
- children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
25267
+ children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
24072
25268
  "path",
24073
25269
  {
24074
25270
  d: "M21 12a9 9 0 1 1-6.22-8.56",
@@ -24081,7 +25277,7 @@ function WithdrawConfirmingView({
24081
25277
  )
24082
25278
  }
24083
25279
  ),
24084
- /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
25280
+ /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
24085
25281
  "h3",
24086
25282
  {
24087
25283
  className: "uf-text-xl uf-mb-2",
@@ -24089,7 +25285,7 @@ function WithdrawConfirmingView({
24089
25285
  children: "Checking Withdrawal"
24090
25286
  }
24091
25287
  ),
24092
- /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(
25288
+ /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
24093
25289
  "p",
24094
25290
  {
24095
25291
  className: "uf-text-sm uf-text-center",
@@ -24105,7 +25301,7 @@ function WithdrawConfirmingView({
24105
25301
  }
24106
25302
  )
24107
25303
  ] }),
24108
- showButton && /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "uf-px-1 uf-pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
25304
+ showButton && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-px-1 uf-pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
24109
25305
  "button",
24110
25306
  {
24111
25307
  type: "button",
@@ -24121,7 +25317,7 @@ function WithdrawConfirmingView({
24121
25317
  children: "Withdrawal History"
24122
25318
  }
24123
25319
  ) }),
24124
- /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
25320
+ /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
24125
25321
  PoweredByUnifold,
24126
25322
  {
24127
25323
  color: colors2.foregroundMuted,
@@ -24151,14 +25347,14 @@ function WithdrawModal({
24151
25347
  hideOverlay = false
24152
25348
  }) {
24153
25349
  const { colors: colors2, fonts, components } = useTheme();
24154
- const [containerEl, setContainerEl] = (0, import_react26.useState)(null);
24155
- const containerCallbackRef = (0, import_react26.useCallback)((el) => {
25350
+ const [containerEl, setContainerEl] = (0, import_react27.useState)(null);
25351
+ const containerCallbackRef = (0, import_react27.useCallback)((el) => {
24156
25352
  setContainerEl(el);
24157
25353
  }, []);
24158
- const [resolvedTheme, setResolvedTheme] = (0, import_react26.useState)(
25354
+ const [resolvedTheme, setResolvedTheme] = (0, import_react27.useState)(
24159
25355
  theme === "auto" ? "dark" : theme
24160
25356
  );
24161
- (0, import_react26.useEffect)(() => {
25357
+ (0, import_react27.useEffect)(() => {
24162
25358
  if (theme === "auto") {
24163
25359
  const mq = window.matchMedia("(prefers-color-scheme: dark)");
24164
25360
  setResolvedTheme(mq.matches ? "dark" : "light");
@@ -24187,28 +25383,12 @@ function WithdrawModal({
24187
25383
  publishableKey,
24188
25384
  enabled: open
24189
25385
  });
24190
- const [selectedToken, setSelectedToken] = (0, import_react26.useState)(null);
24191
- const [selectedChain, setSelectedChain] = (0, import_react26.useState)(null);
24192
- const [detectedWallet, setDetectedWallet] = (0, import_react26.useState)(null);
24193
- const connectedWalletName = detectedWallet?.name ?? null;
24194
- const isWalletMatch = !!detectedWallet;
24195
- (0, import_react26.useEffect)(() => {
24196
- if (!senderAddress || !open) {
24197
- setDetectedWallet(null);
24198
- return;
24199
- }
24200
- let cancelled = false;
24201
- detectBrowserWallet(sourceChainType, senderAddress).then((wallet) => {
24202
- if (!cancelled) setDetectedWallet(wallet);
24203
- });
24204
- return () => {
24205
- cancelled = true;
24206
- };
24207
- }, [senderAddress, sourceChainType, open]);
24208
- const [view, setView] = (0, import_react26.useState)("form");
24209
- const [withdrawDepositWalletId, setWithdrawDepositWalletId] = (0, import_react26.useState)();
24210
- const [selectedExecution, setSelectedExecution] = (0, import_react26.useState)(null);
24211
- const [submittedTxInfo, setSubmittedTxInfo] = (0, import_react26.useState)(null);
25386
+ const [selectedToken, setSelectedToken] = (0, import_react27.useState)(null);
25387
+ const [selectedChain, setSelectedChain] = (0, import_react27.useState)(null);
25388
+ const [view, setView] = (0, import_react27.useState)("form");
25389
+ const [withdrawDepositWalletId, setWithdrawDepositWalletId] = (0, import_react27.useState)();
25390
+ const [selectedExecution, setSelectedExecution] = (0, import_react27.useState)(null);
25391
+ const [submittedTxInfo, setSubmittedTxInfo] = (0, import_react27.useState)(null);
24212
25392
  const { executions: realtimeExecutions } = useWithdrawPolling({
24213
25393
  userId: externalUserId,
24214
25394
  publishableKey,
@@ -24223,7 +25403,7 @@ function WithdrawModal({
24223
25403
  refetchInterval: view === "tracker" || view === "detail" ? 5e3 : 15e3
24224
25404
  });
24225
25405
  const allWithdrawals = allWithdrawalsData?.data ?? [];
24226
- const handleDepositWalletCreation = (0, import_react26.useCallback)(async (params) => {
25406
+ const handleDepositWalletCreation = (0, import_react27.useCallback)(async (params) => {
24227
25407
  const { data: wallets } = await createDepositAddress(
24228
25408
  {
24229
25409
  external_user_id: externalUserId,
@@ -24242,11 +25422,11 @@ function WithdrawModal({
24242
25422
  setWithdrawDepositWalletId(depositWallet.id);
24243
25423
  return depositWallet;
24244
25424
  }, [externalUserId, publishableKey, sourceChainType]);
24245
- const handleWithdrawSubmitted = (0, import_react26.useCallback)((txInfo) => {
25425
+ const handleWithdrawSubmitted = (0, import_react27.useCallback)((txInfo) => {
24246
25426
  setSubmittedTxInfo(txInfo);
24247
25427
  setView("confirming");
24248
25428
  }, []);
24249
- (0, import_react26.useEffect)(() => {
25429
+ (0, import_react27.useEffect)(() => {
24250
25430
  if (!destinationTokens.length || selectedToken) return;
24251
25431
  const first = destinationTokens[0];
24252
25432
  if (first?.chains.length > 0) {
@@ -24254,8 +25434,8 @@ function WithdrawModal({
24254
25434
  setSelectedChain(first.chains[0]);
24255
25435
  }
24256
25436
  }, [destinationTokens, selectedToken]);
24257
- const resetViewTimeoutRef = (0, import_react26.useRef)(null);
24258
- const handleClose = (0, import_react26.useCallback)(() => {
25437
+ const resetViewTimeoutRef = (0, import_react27.useRef)(null);
25438
+ const handleClose = (0, import_react27.useCallback)(() => {
24259
25439
  onOpenChange(false);
24260
25440
  if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
24261
25441
  resetViewTimeoutRef.current = setTimeout(() => {
@@ -24268,7 +25448,7 @@ function WithdrawModal({
24268
25448
  resetViewTimeoutRef.current = null;
24269
25449
  }, 200);
24270
25450
  }, [onOpenChange]);
24271
- (0, import_react26.useLayoutEffect)(() => {
25451
+ (0, import_react27.useLayoutEffect)(() => {
24272
25452
  if (!open) return;
24273
25453
  if (resetViewTimeoutRef.current) {
24274
25454
  clearTimeout(resetViewTimeoutRef.current);
@@ -24281,26 +25461,25 @@ function WithdrawModal({
24281
25461
  setSubmittedTxInfo(null);
24282
25462
  setWithdrawDepositWalletId(void 0);
24283
25463
  }, [open]);
24284
- (0, import_react26.useEffect)(() => () => {
25464
+ (0, import_react27.useEffect)(() => () => {
24285
25465
  if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
24286
25466
  }, []);
24287
- const handleTokenSymbolChange = (0, import_react26.useCallback)((symbol) => {
25467
+ const handleTokenSymbolChange = (0, import_react27.useCallback)((symbol) => {
24288
25468
  const tok = destinationTokens.find((t11) => t11.symbol === symbol);
24289
25469
  if (tok) {
24290
25470
  setSelectedToken(tok);
24291
25471
  if (tok.chains.length > 0) setSelectedChain(tok.chains[0]);
24292
25472
  }
24293
25473
  }, [destinationTokens]);
24294
- const handleChainKeyChange = (0, import_react26.useCallback)((chainKey) => {
25474
+ const handleChainKeyChange = (0, import_react27.useCallback)((chainKey) => {
24295
25475
  if (!selectedToken) return;
24296
25476
  const chain = selectedToken.chains.find((c) => getChainKey5(c.chain_id, c.chain_type) === chainKey);
24297
25477
  if (chain) setSelectedChain(chain);
24298
25478
  }, [selectedToken]);
24299
25479
  const isSourceSupported = sourceValidation?.isSupported ?? null;
24300
- const canWithdraw = !!onWithdraw || isWalletMatch;
24301
25480
  const isAnyLoading = tokensLoading || isCheckingSourceToken;
24302
- const withdrawPoweredByFooter = /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(PoweredByUnifold, { color: colors2.foregroundMuted, className: "uf-flex uf-justify-center uf-shrink-0" }) });
24303
- return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(PortalContainerProvider, { value: hideOverlay ? containerEl : null, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Dialog2, { open: hideOverlay || open, onOpenChange: hideOverlay ? void 0 : handleClose, modal: !hideOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
25481
+ const withdrawPoweredByFooter = /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(PoweredByUnifold, { color: colors2.foregroundMuted, className: "uf-flex uf-justify-center uf-shrink-0" }) });
25482
+ return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(PortalContainerProvider, { value: hideOverlay ? containerEl : null, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Dialog2, { open: hideOverlay || open, onOpenChange: hideOverlay ? void 0 : handleClose, modal: !hideOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
24304
25483
  DialogContent2,
24305
25484
  {
24306
25485
  ref: hideOverlay ? containerCallbackRef : void 0,
@@ -24309,7 +25488,7 @@ function WithdrawModal({
24309
25488
  style: { backgroundColor: colors2.background },
24310
25489
  onPointerDownOutside: (e) => e.preventDefault(),
24311
25490
  onInteractOutside: (e) => e.preventDefault(),
24312
- children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ThemeStyleInjector, { children: view === "confirming" && submittedTxInfo ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
25491
+ children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(ThemeStyleInjector, { children: view === "confirming" && submittedTxInfo ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
24313
25492
  WithdrawConfirmingView,
24314
25493
  {
24315
25494
  txInfo: submittedTxInfo,
@@ -24317,18 +25496,18 @@ function WithdrawModal({
24317
25496
  onClose: handleClose,
24318
25497
  onViewTracker: () => setView("tracker")
24319
25498
  }
24320
- ) : view === "detail" && selectedExecution ? /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
24321
- /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(DepositHeader, { title: "Withdrawal Details", showBack: true, showClose: !hideOverlay, onBack: () => {
25499
+ ) : view === "detail" && selectedExecution ? /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
25500
+ /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(DepositHeader, { title: "Withdrawal Details", showBack: true, showClose: !hideOverlay, onBack: () => {
24322
25501
  setSelectedExecution(null);
24323
25502
  setView("tracker");
24324
25503
  }, onClose: handleClose }),
24325
- /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(DepositDetailContent, { execution: selectedExecution, variant: "withdraw" }),
25504
+ /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(DepositDetailContent, { execution: selectedExecution, variant: "withdraw" }),
24326
25505
  withdrawPoweredByFooter
24327
25506
  ] }) : view === "tracker" ? (
24328
25507
  /* ---------- Tracker view: execution list ---------- */
24329
- /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
24330
- /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(DepositHeader, { title: "Withdrawal History", showBack: true, showClose: !hideOverlay, onBack: () => setView("form"), onClose: handleClose }),
24331
- /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-flex uf-flex-col uf-gap-2", style: { minHeight: 200 }, children: allWithdrawals.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-flex uf-items-center uf-justify-center uf-py-8", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("p", { className: "uf-text-sm", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: "No withdrawals to track yet" }) }) : allWithdrawals.map((ex) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
25508
+ /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
25509
+ /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(DepositHeader, { title: "Withdrawal History", showBack: true, showClose: !hideOverlay, onBack: () => setView("form"), onClose: handleClose }),
25510
+ /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "uf-h-[460px] uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "uf-flex uf-flex-col uf-gap-2", children: allWithdrawals.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "uf-flex uf-items-center uf-justify-center uf-py-8", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: "uf-text-sm", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: "No withdrawals to track yet" }) }) : allWithdrawals.map((ex) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
24332
25511
  WithdrawExecutionItem,
24333
25512
  {
24334
25513
  execution: ex,
@@ -24338,20 +25517,20 @@ function WithdrawModal({
24338
25517
  }
24339
25518
  },
24340
25519
  ex.id
24341
- )) }),
25520
+ )) }) }),
24342
25521
  withdrawPoweredByFooter
24343
25522
  ] })
24344
25523
  ) : (
24345
25524
  /* ---------- Form view (default) ---------- */
24346
- /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
24347
- /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(DepositHeader, { title: modalTitle || t9.title, showClose: !hideOverlay, onClose: handleClose }),
24348
- /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-3", children: [
24349
- isAnyLoading ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-space-y-3", children: [1, 2, 3].map((i) => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-w-full uf-bg-secondary uf-rounded-xl uf-p-3 uf-flex uf-items-center uf-animate-pulse", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-bg-muted uf-rounded-lg uf-w-full uf-h-10" }) }, i)) }) : isSourceSupported === false ? /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
24350
- /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(TriangleAlert, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
24351
- /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-mb-2", style: { color: colors2.foreground, fontFamily: fonts.medium }, children: "Unsupported Source Token" }),
24352
- /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("p", { className: "uf-text-sm uf-max-w-[280px]", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: sourceValidation?.errorMessage })
24353
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
24354
- /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
25525
+ /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
25526
+ /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(DepositHeader, { title: modalTitle || t9.title, showClose: !hideOverlay, onClose: handleClose }),
25527
+ /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-3", children: [
25528
+ isAnyLoading ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "uf-space-y-3", children: [1, 2, 3].map((i) => /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "uf-w-full uf-bg-secondary uf-rounded-xl uf-p-3 uf-flex uf-items-center uf-animate-pulse", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "uf-bg-muted uf-rounded-lg uf-w-full uf-h-10" }) }, i)) }) : isSourceSupported === false ? /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
25529
+ /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "uf-w-16 uf-h-16 uf-rounded-full uf-bg-muted uf-flex uf-items-center uf-justify-center uf-mb-4", children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(TriangleAlert, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
25530
+ /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-mb-2", style: { color: colors2.foreground, fontFamily: fonts.medium }, children: "Unsupported Source Token" }),
25531
+ /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("p", { className: "uf-text-sm uf-max-w-[280px]", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: sourceValidation?.errorMessage })
25532
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
25533
+ /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
24355
25534
  WithdrawDoubleInput,
24356
25535
  {
24357
25536
  tokens: destinationTokens,
@@ -24362,7 +25541,7 @@ function WithdrawModal({
24362
25541
  isLoading: tokensLoading
24363
25542
  }
24364
25543
  ),
24365
- /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
25544
+ /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
24366
25545
  WithdrawForm,
24367
25546
  {
24368
25547
  publishableKey,
@@ -24378,26 +25557,23 @@ function WithdrawModal({
24378
25557
  estimatedProcessingTime: sourceValidation?.estimatedProcessingTime ?? null,
24379
25558
  maxSlippagePercent: sourceValidation?.maxSlippagePercent ?? null,
24380
25559
  priceImpactPercent: sourceValidation?.priceImpactPercent ?? null,
24381
- detectedWallet,
25560
+ senderAddress,
24382
25561
  sourceChainId,
24383
25562
  sourceTokenAddress,
24384
- isWalletMatch,
24385
- connectedWalletName,
24386
- canWithdraw,
24387
25563
  onWithdraw,
24388
25564
  onWithdrawError,
24389
25565
  onDepositWalletCreation: handleDepositWalletCreation,
24390
25566
  onWithdrawSubmitted: handleWithdrawSubmitted,
24391
- footerLeft: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
25567
+ footerLeft: /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
24392
25568
  "button",
24393
25569
  {
24394
25570
  onClick: () => setView("tracker"),
24395
25571
  className: "uf-flex uf-items-center uf-gap-1 uf-transition-colors hover:uf-opacity-70",
24396
25572
  style: { color: colors2.foregroundMuted },
24397
25573
  children: [
24398
- /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Clock, { className: "uf-w-3.5 uf-h-3.5" }),
25574
+ /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Clock, { className: "uf-w-3.5 uf-h-3.5" }),
24399
25575
  "Withdrawal History",
24400
- /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ChevronRight, { className: "uf-w-3 uf-h-3" })
25576
+ /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(ChevronRight, { className: "uf-w-3 uf-h-3" })
24401
25577
  ]
24402
25578
  }
24403
25579
  )
@@ -24414,27 +25590,31 @@ function WithdrawModal({
24414
25590
  var t10 = i18n2.withdrawModal;
24415
25591
 
24416
25592
  // src/provider.tsx
24417
- var import_jsx_runtime75 = require("react/jsx-runtime");
25593
+ var import_jsx_runtime76 = require("react/jsx-runtime");
24418
25594
  function UnifoldProvider2({
24419
25595
  children,
24420
25596
  publishableKey,
24421
25597
  config
24422
25598
  }) {
24423
- const [isOpen, setIsOpen] = (0, import_react31.useState)(false);
24424
- const [depositConfig, setDepositConfig] = (0, import_react31.useState)(
25599
+ const [isOpen, setIsOpen] = (0, import_react32.useState)(false);
25600
+ const [depositConfig, setDepositConfig] = (0, import_react32.useState)(
25601
+ null
25602
+ );
25603
+ const [isCheckoutOpen, setIsCheckoutOpen] = (0, import_react32.useState)(false);
25604
+ const [checkoutConfig, setCheckoutConfig] = (0, import_react32.useState)(
24425
25605
  null
24426
25606
  );
24427
- const [isWithdrawOpen, setIsWithdrawOpen] = (0, import_react31.useState)(false);
24428
- const [withdrawConfig, setWithdrawConfig] = (0, import_react31.useState)(
25607
+ const [isWithdrawOpen, setIsWithdrawOpen] = (0, import_react32.useState)(false);
25608
+ const [withdrawConfig, setWithdrawConfig] = (0, import_react32.useState)(
24429
25609
  null
24430
25610
  );
24431
- const [resolvedTheme, setResolvedTheme] = import_react31.default.useState("dark");
24432
- (0, import_react31.useEffect)(() => {
25611
+ const [resolvedTheme, setResolvedTheme] = import_react32.default.useState("dark");
25612
+ (0, import_react32.useEffect)(() => {
24433
25613
  if (publishableKey) {
24434
25614
  setApiConfig({ publishableKey });
24435
25615
  }
24436
25616
  }, [publishableKey]);
24437
- import_react31.default.useEffect(() => {
25617
+ import_react32.default.useEffect(() => {
24438
25618
  const appearance = config?.appearance || "dark";
24439
25619
  if (appearance === "auto") {
24440
25620
  const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
@@ -24449,17 +25629,17 @@ function UnifoldProvider2({
24449
25629
  setResolvedTheme(appearance);
24450
25630
  }
24451
25631
  }, [config?.appearance]);
24452
- const depositPromiseRef = import_react31.default.useRef(null);
24453
- const depositConfigRef = import_react31.default.useRef(null);
25632
+ const depositPromiseRef = import_react32.default.useRef(null);
25633
+ const depositConfigRef = import_react32.default.useRef(null);
24454
25634
  depositConfigRef.current = depositConfig;
24455
- const closeTimeoutRef = import_react31.default.useRef(null);
24456
- const closeGuardRef = import_react31.default.useRef(false);
24457
- const withdrawPromiseRef = import_react31.default.useRef(null);
24458
- const withdrawConfigRef = import_react31.default.useRef(null);
25635
+ const closeTimeoutRef = import_react32.default.useRef(null);
25636
+ const closeGuardRef = import_react32.default.useRef(false);
25637
+ const withdrawPromiseRef = import_react32.default.useRef(null);
25638
+ const withdrawConfigRef = import_react32.default.useRef(null);
24459
25639
  withdrawConfigRef.current = withdrawConfig;
24460
- const withdrawCloseTimeoutRef = import_react31.default.useRef(null);
24461
- const withdrawCloseGuardRef = import_react31.default.useRef(false);
24462
- const beginDeposit = (0, import_react31.useCallback)((config2) => {
25640
+ const withdrawCloseTimeoutRef = import_react32.default.useRef(null);
25641
+ const withdrawCloseGuardRef = import_react32.default.useRef(false);
25642
+ const beginDeposit = (0, import_react32.useCallback)((config2) => {
24463
25643
  if (closeTimeoutRef.current) {
24464
25644
  clearTimeout(closeTimeoutRef.current);
24465
25645
  closeTimeoutRef.current = null;
@@ -24482,7 +25662,7 @@ function UnifoldProvider2({
24482
25662
  setIsOpen(true);
24483
25663
  return promise;
24484
25664
  }, []);
24485
- const closeDeposit = (0, import_react31.useCallback)(() => {
25665
+ const closeDeposit = (0, import_react32.useCallback)(() => {
24486
25666
  if (closeGuardRef.current) {
24487
25667
  return;
24488
25668
  }
@@ -24504,7 +25684,7 @@ function UnifoldProvider2({
24504
25684
  closeTimeoutRef.current = null;
24505
25685
  }, 200);
24506
25686
  }, []);
24507
- const handleDepositSuccess = (0, import_react31.useCallback)((data) => {
25687
+ const handleDepositSuccess = (0, import_react32.useCallback)((data) => {
24508
25688
  if (depositConfig?.onSuccess) {
24509
25689
  depositConfig.onSuccess(data);
24510
25690
  }
@@ -24513,7 +25693,7 @@ function UnifoldProvider2({
24513
25693
  depositPromiseRef.current = null;
24514
25694
  }
24515
25695
  }, [depositConfig]);
24516
- const handleDepositError = (0, import_react31.useCallback)((error) => {
25696
+ const handleDepositError = (0, import_react32.useCallback)((error) => {
24517
25697
  console.error("[UnifoldProvider] Deposit error:", error);
24518
25698
  if (depositConfig?.onError) {
24519
25699
  depositConfig.onError(error);
@@ -24523,7 +25703,76 @@ function UnifoldProvider2({
24523
25703
  depositPromiseRef.current = null;
24524
25704
  }
24525
25705
  }, [depositConfig]);
24526
- const beginWithdraw = (0, import_react31.useCallback)((config2) => {
25706
+ const checkoutPromiseRef = import_react32.default.useRef(null);
25707
+ const checkoutConfigRef = import_react32.default.useRef(null);
25708
+ checkoutConfigRef.current = checkoutConfig;
25709
+ const checkoutCloseTimeoutRef = import_react32.default.useRef(null);
25710
+ const checkoutCloseGuardRef = import_react32.default.useRef(false);
25711
+ const beginCheckout = (0, import_react32.useCallback)((config2) => {
25712
+ if (checkoutCloseTimeoutRef.current) {
25713
+ clearTimeout(checkoutCloseTimeoutRef.current);
25714
+ checkoutCloseTimeoutRef.current = null;
25715
+ }
25716
+ checkoutCloseGuardRef.current = false;
25717
+ if (checkoutPromiseRef.current) {
25718
+ console.warn("[UnifoldProvider] A checkout is already in progress. Cancelling previous checkout.");
25719
+ checkoutPromiseRef.current.reject({
25720
+ message: "Checkout cancelled - new checkout started",
25721
+ code: "CHECKOUT_SUPERSEDED"
25722
+ });
25723
+ checkoutPromiseRef.current = null;
25724
+ }
25725
+ const promise = new Promise((resolve, reject) => {
25726
+ checkoutPromiseRef.current = { resolve, reject };
25727
+ });
25728
+ promise.catch(() => {
25729
+ });
25730
+ setCheckoutConfig(config2);
25731
+ setIsCheckoutOpen(true);
25732
+ return promise;
25733
+ }, []);
25734
+ const closeCheckout = (0, import_react32.useCallback)(() => {
25735
+ if (checkoutCloseGuardRef.current) {
25736
+ return;
25737
+ }
25738
+ checkoutCloseGuardRef.current = true;
25739
+ const promiseToReject = checkoutPromiseRef.current;
25740
+ checkoutPromiseRef.current = null;
25741
+ if (checkoutConfigRef.current?.onClose) {
25742
+ checkoutConfigRef.current.onClose();
25743
+ }
25744
+ if (promiseToReject) {
25745
+ promiseToReject.reject({
25746
+ message: "Checkout cancelled by user",
25747
+ code: "CHECKOUT_CANCELLED"
25748
+ });
25749
+ }
25750
+ setIsCheckoutOpen(false);
25751
+ checkoutCloseTimeoutRef.current = setTimeout(() => {
25752
+ setCheckoutConfig(null);
25753
+ checkoutCloseTimeoutRef.current = null;
25754
+ }, 200);
25755
+ }, []);
25756
+ const handleCheckoutSuccess = (0, import_react32.useCallback)((data) => {
25757
+ if (checkoutConfig?.onSuccess) {
25758
+ checkoutConfig.onSuccess(data);
25759
+ }
25760
+ if (checkoutPromiseRef.current) {
25761
+ checkoutPromiseRef.current.resolve(data);
25762
+ checkoutPromiseRef.current = null;
25763
+ }
25764
+ }, [checkoutConfig]);
25765
+ const handleCheckoutError = (0, import_react32.useCallback)((error) => {
25766
+ console.error("[UnifoldProvider] Checkout error:", error);
25767
+ if (checkoutConfig?.onError) {
25768
+ checkoutConfig.onError(error);
25769
+ }
25770
+ if (checkoutPromiseRef.current) {
25771
+ checkoutPromiseRef.current.reject(error);
25772
+ checkoutPromiseRef.current = null;
25773
+ }
25774
+ }, [checkoutConfig]);
25775
+ const beginWithdraw = (0, import_react32.useCallback)((config2) => {
24527
25776
  if (withdrawCloseTimeoutRef.current) {
24528
25777
  clearTimeout(withdrawCloseTimeoutRef.current);
24529
25778
  withdrawCloseTimeoutRef.current = null;
@@ -24546,7 +25795,7 @@ function UnifoldProvider2({
24546
25795
  setIsWithdrawOpen(true);
24547
25796
  return promise;
24548
25797
  }, []);
24549
- const closeWithdraw = (0, import_react31.useCallback)(() => {
25798
+ const closeWithdraw = (0, import_react32.useCallback)(() => {
24550
25799
  if (withdrawCloseGuardRef.current) {
24551
25800
  return;
24552
25801
  }
@@ -24568,7 +25817,7 @@ function UnifoldProvider2({
24568
25817
  withdrawCloseTimeoutRef.current = null;
24569
25818
  }, 200);
24570
25819
  }, []);
24571
- const handleWithdrawSuccess = (0, import_react31.useCallback)((data) => {
25820
+ const handleWithdrawSuccess = (0, import_react32.useCallback)((data) => {
24572
25821
  if (withdrawConfigRef.current?.onSuccess) {
24573
25822
  withdrawConfigRef.current.onSuccess(data);
24574
25823
  }
@@ -24577,7 +25826,7 @@ function UnifoldProvider2({
24577
25826
  withdrawPromiseRef.current = null;
24578
25827
  }
24579
25828
  }, []);
24580
- const handleWithdrawError = (0, import_react31.useCallback)((error) => {
25829
+ const handleWithdrawError = (0, import_react32.useCallback)((error) => {
24581
25830
  console.error("[UnifoldProvider] Withdraw error:", error);
24582
25831
  if (withdrawConfigRef.current?.onError) {
24583
25832
  withdrawConfigRef.current.onError(error);
@@ -24587,20 +25836,20 @@ function UnifoldProvider2({
24587
25836
  withdrawPromiseRef.current = null;
24588
25837
  }
24589
25838
  }, []);
24590
- const contextValue = (0, import_react31.useMemo)(
25839
+ const contextValue = (0, import_react32.useMemo)(
24591
25840
  () => ({
24592
25841
  beginDeposit,
24593
25842
  closeDeposit,
24594
- handleDepositSuccess,
24595
- handleDepositError,
25843
+ beginCheckout,
25844
+ closeCheckout,
24596
25845
  beginWithdraw,
24597
25846
  closeWithdraw,
24598
25847
  handleWithdrawSuccess,
24599
25848
  handleWithdrawError
24600
25849
  }),
24601
- [beginDeposit, closeDeposit, handleDepositSuccess, handleDepositError, beginWithdraw, closeWithdraw, handleWithdrawSuccess, handleWithdrawError]
25850
+ [beginDeposit, closeDeposit, beginCheckout, closeCheckout, beginWithdraw, closeWithdraw, handleWithdrawSuccess, handleWithdrawError]
24602
25851
  );
24603
- return /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(UnifoldProvider, { publishableKey, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(ConnectContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
25852
+ return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(UnifoldProvider, { publishableKey, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ConnectContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
24604
25853
  ThemeProvider,
24605
25854
  {
24606
25855
  mode: resolvedTheme,
@@ -24611,7 +25860,20 @@ function UnifoldProvider2({
24611
25860
  components: config?.components,
24612
25861
  children: [
24613
25862
  children,
24614
- withdrawConfig && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
25863
+ checkoutConfig && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
25864
+ CheckoutModal,
25865
+ {
25866
+ open: isCheckoutOpen,
25867
+ onOpenChange: closeCheckout,
25868
+ clientSecret: checkoutConfig.clientSecret,
25869
+ publishableKey,
25870
+ enableConnectWallet: config?.enableConnectWallet,
25871
+ theme: resolvedTheme,
25872
+ onCheckoutSuccess: handleCheckoutSuccess,
25873
+ onCheckoutError: handleCheckoutError
25874
+ }
25875
+ ),
25876
+ withdrawConfig && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
24615
25877
  WithdrawModal,
24616
25878
  {
24617
25879
  open: isWithdrawOpen,
@@ -24631,7 +25893,7 @@ function UnifoldProvider2({
24631
25893
  theme: resolvedTheme
24632
25894
  }
24633
25895
  ),
24634
- depositConfig && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
25896
+ depositConfig && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
24635
25897
  DepositModal,
24636
25898
  {
24637
25899
  open: isOpen,
@@ -24672,16 +25934,19 @@ function UnifoldProvider2({
24672
25934
  }
24673
25935
  ) }) });
24674
25936
  }
24675
- var ConnectContext = import_react31.default.createContext(null);
25937
+ var ConnectContext = import_react32.default.createContext(null);
24676
25938
  function useUnifold2() {
24677
25939
  const baseContext = useUnifold();
24678
- const connectContext = import_react31.default.useContext(ConnectContext);
25940
+ const connectContext = import_react32.default.useContext(ConnectContext);
24679
25941
  if (typeof window === "undefined") {
24680
25942
  return {
24681
25943
  publishableKey: "",
24682
25944
  beginDeposit: () => Promise.reject(new Error("SSR not supported")),
24683
25945
  closeDeposit: () => {
24684
25946
  },
25947
+ beginCheckout: () => Promise.reject(new Error("SSR not supported")),
25948
+ closeCheckout: () => {
25949
+ },
24685
25950
  beginWithdraw: () => Promise.reject(new Error("SSR not supported")),
24686
25951
  closeWithdraw: () => {
24687
25952
  }
@@ -24694,6 +25959,8 @@ function useUnifold2() {
24694
25959
  publishableKey: baseContext.publishableKey,
24695
25960
  beginDeposit: connectContext.beginDeposit,
24696
25961
  closeDeposit: connectContext.closeDeposit,
25962
+ beginCheckout: connectContext.beginCheckout,
25963
+ closeCheckout: connectContext.closeCheckout,
24697
25964
  beginWithdraw: connectContext.beginWithdraw,
24698
25965
  closeWithdraw: connectContext.closeWithdraw
24699
25966
  };
@@ -24742,6 +26009,7 @@ lucide-react/dist/esm/Icon.js:
24742
26009
  lucide-react/dist/esm/createLucideIcon.js:
24743
26010
  lucide-react/dist/esm/icons/arrow-left-right.js:
24744
26011
  lucide-react/dist/esm/icons/arrow-left.js:
26012
+ lucide-react/dist/esm/icons/arrow-right.js:
24745
26013
  lucide-react/dist/esm/icons/arrow-up-down.js:
24746
26014
  lucide-react/dist/esm/icons/check.js:
24747
26015
  lucide-react/dist/esm/icons/chevron-down.js: