@unifold/ui-web 0.1.42 → 0.1.43

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