@unifold/connect-react 0.1.42 → 0.1.43

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