@unifold/ui-react 0.1.42 → 0.1.44

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.js CHANGED
@@ -32,6 +32,7 @@ var index_exports = {};
32
32
  __export(index_exports, {
33
33
  Button: () => Button,
34
34
  BuyWithCard: () => BuyWithCard,
35
+ CheckoutModal: () => CheckoutModal,
35
36
  ConfirmingView: () => ConfirmingView,
36
37
  CurrencyListItem: () => CurrencyListItem,
37
38
  CurrencyListSection: () => CurrencyListSection,
@@ -55,6 +56,7 @@ __export(index_exports, {
55
56
  DialogPortal: () => DialogPortal,
56
57
  DialogTitle: () => DialogTitle,
57
58
  DialogTrigger: () => DialogTrigger,
59
+ HYPERCORE_CHAIN_ID: () => HYPERCORE_CHAIN_ID,
58
60
  Select: () => Select,
59
61
  SelectContent: () => SelectContent,
60
62
  SelectGroup: () => SelectGroup,
@@ -86,14 +88,18 @@ __export(index_exports, {
86
88
  defaultColors: () => defaultColors,
87
89
  detectBrowserWallet: () => detectBrowserWallet,
88
90
  getColors: () => getColors,
91
+ isHypercoreChain: () => isHypercoreChain,
89
92
  mergeColors: () => mergeColors,
90
93
  resolveComponentTokens: () => resolveComponentTokens,
91
94
  sendEvmWithdraw: () => sendEvmWithdraw,
95
+ sendHypercoreWithdraw: () => sendHypercoreWithdraw,
92
96
  sendSolanaWithdraw: () => sendSolanaWithdraw,
93
97
  truncateAddress: () => truncateAddress,
94
98
  useAddressBalance: () => useAddressBalance,
95
99
  useAllowedCountry: () => useAllowedCountry,
96
100
  useDepositPolling: () => useDepositPolling,
101
+ useDepositQuote: () => useDepositQuote,
102
+ usePaymentIntent: () => usePaymentIntent,
97
103
  useSourceTokenValidation: () => useSourceTokenValidation,
98
104
  useSupportedDestinationTokens: () => useSupportedDestinationTokens,
99
105
  useTheme: () => useTheme,
@@ -1490,6 +1496,7 @@ var CUTOFF_BUFFER_MS = 6e4;
1490
1496
  function useDepositPolling({
1491
1497
  userId,
1492
1498
  publishableKey,
1499
+ clientSecret,
1493
1500
  depositConfirmationMode = "auto_ui",
1494
1501
  depositWalletId,
1495
1502
  enabled = true,
@@ -1547,11 +1554,12 @@ function useDepositPolling({
1547
1554
  depositWalletId
1548
1555
  ]);
1549
1556
  (0, import_react3.useEffect)(() => {
1550
- if (!userId || !enabled) return;
1557
+ if (!enabled) return;
1558
+ if (!clientSecret && !userId) return;
1551
1559
  const modalOpenedAt = modalOpenedAtRef.current;
1552
1560
  const poll = async () => {
1553
1561
  try {
1554
- const response = await (0, import_core6.queryExecutions)(userId, publishableKey, import_core6.ActionType.Deposit);
1562
+ const response = clientSecret ? await (0, import_core6.listPaymentIntentExecutions)(clientSecret, publishableKey) : await (0, import_core6.queryExecutions)(userId, publishableKey, import_core6.ActionType.Deposit);
1555
1563
  const cutoff = new Date(modalOpenedAt.getTime() - CUTOFF_BUFFER_MS);
1556
1564
  const sortedExecutions = [...response.data].sort((a, b) => {
1557
1565
  const timeA = a.created_at ? new Date(a.created_at).getTime() : 0;
@@ -1635,7 +1643,7 @@ function useDepositPolling({
1635
1643
  clearInterval(pollInterval);
1636
1644
  setIsPolling(false);
1637
1645
  };
1638
- }, [userId, publishableKey, enabled]);
1646
+ }, [userId, publishableKey, clientSecret, enabled]);
1639
1647
  (0, import_react3.useEffect)(() => {
1640
1648
  if (!pollingEnabled || !depositWalletId) return;
1641
1649
  const triggerPoll = async () => {
@@ -8372,6 +8380,7 @@ var parseChainKey = (chainKey) => {
8372
8380
  function TransferCryptoSingleInput({
8373
8381
  userId,
8374
8382
  publishableKey,
8383
+ clientSecret,
8375
8384
  recipientAddress,
8376
8385
  destinationChainType,
8377
8386
  destinationChainId,
@@ -8384,7 +8393,9 @@ function TransferCryptoSingleInput({
8384
8393
  onExecutionsChange,
8385
8394
  onDepositSuccess,
8386
8395
  onDepositError,
8387
- wallets: externalWallets
8396
+ wallets: externalWallets,
8397
+ onSourceTokenChange,
8398
+ checkoutQuote
8388
8399
  }) {
8389
8400
  const { themeClass, colors: colors2, fonts, components } = useTheme();
8390
8401
  const isDarkMode = themeClass.includes("uf-dark");
@@ -8451,12 +8462,28 @@ function TransferCryptoSingleInput({
8451
8462
  } = useDepositPolling({
8452
8463
  userId,
8453
8464
  publishableKey,
8465
+ clientSecret,
8454
8466
  depositConfirmationMode,
8455
8467
  depositWalletId: currentWallet?.id,
8456
8468
  enabled: true,
8457
8469
  onDepositSuccess,
8458
8470
  onDepositError
8459
8471
  });
8472
+ (0, import_react15.useEffect)(() => {
8473
+ if (!onSourceTokenChange || !token || !chain || !initialSelectionDone) return;
8474
+ const { chainType, chainId } = parseChainKey(chain);
8475
+ const matchedToken = supportedTokens.find((t11) => t11.symbol === token);
8476
+ const matchedChain = matchedToken?.chains.find(
8477
+ (c) => c.chain_type === chainType && c.chain_id === chainId
8478
+ );
8479
+ onSourceTokenChange({
8480
+ symbol: token,
8481
+ chainType,
8482
+ chainId,
8483
+ tokenAddress: matchedChain?.token_address ?? "",
8484
+ minimumDepositAmountUsd: matchedChain?.minimum_deposit_amount_usd ?? 0
8485
+ });
8486
+ }, [token, chain, initialSelectionDone, onSourceTokenChange, supportedTokens]);
8460
8487
  (0, import_react15.useEffect)(() => {
8461
8488
  if (onExecutionsChange) {
8462
8489
  onExecutionsChange(depositExecutions);
@@ -8603,6 +8630,53 @@ function TransferCryptoSingleInput({
8603
8630
  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { children: "Retrying automatically every 5 seconds..." })
8604
8631
  ] })
8605
8632
  ] }),
8633
+ checkoutQuote && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
8634
+ "div",
8635
+ {
8636
+ className: "uf-rounded-xl uf-px-3 uf-py-2 uf-flex uf-items-center uf-justify-between",
8637
+ style: {
8638
+ backgroundColor: components.card.backgroundColor,
8639
+ border: `${components.card.borderWidth}px solid ${components.card.borderColor}`,
8640
+ borderRadius: components.card.borderRadius
8641
+ },
8642
+ children: [
8643
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
8644
+ "span",
8645
+ {
8646
+ className: "uf-text-xs",
8647
+ style: { color: components.card.subtitleColor, fontFamily: fonts.regular },
8648
+ children: "You send"
8649
+ }
8650
+ ),
8651
+ /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
8652
+ "span",
8653
+ {
8654
+ className: "uf-text-sm uf-font-semibold",
8655
+ style: { color: components.card.titleColor, fontFamily: fonts.semibold },
8656
+ children: [
8657
+ (Number(checkoutQuote.sourceAmount) / 10 ** checkoutQuote.sourceTokenDecimals).toFixed(
8658
+ Math.min(checkoutQuote.sourceTokenDecimals, 6)
8659
+ ),
8660
+ " ",
8661
+ checkoutQuote.sourceTokenSymbol,
8662
+ checkoutQuote.sourceAmountUsd && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
8663
+ "span",
8664
+ {
8665
+ className: "uf-text-xs uf-font-normal uf-ml-1.5",
8666
+ style: { color: components.card.subtitleColor },
8667
+ children: [
8668
+ "($",
8669
+ checkoutQuote.sourceAmountUsd,
8670
+ ")"
8671
+ ]
8672
+ }
8673
+ )
8674
+ ]
8675
+ }
8676
+ )
8677
+ ]
8678
+ }
8679
+ ),
8606
8680
  /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-pt-2", children: [
8607
8681
  /* @__PURE__ */ (0, import_jsx_runtime41.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" }),
8608
8682
  /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "uf-shadow-lg", style: { borderRadius: components.card.borderRadius, border: `${components.card.borderWidth}px solid ${components.card.borderColor}` }, children: loading || tokensLoading || !initialSelectionDone ? (
@@ -9454,9 +9528,16 @@ function SelectTokenView({
9454
9528
  onBack,
9455
9529
  onClose,
9456
9530
  onDisconnectWallet,
9457
- isDisconnectingWallet = false
9531
+ isDisconnectingWallet = false,
9532
+ checkoutAmountUsd,
9533
+ checkoutReceivedUsd
9458
9534
  }) {
9459
9535
  const { colors: colors2, fonts, components } = useTheme();
9536
+ const isCheckout = !!checkoutAmountUsd;
9537
+ const headerSubtitle = isCheckout ? parseFloat(checkoutReceivedUsd || "0") > 0 ? `$${checkoutReceivedUsd} / $${checkoutAmountUsd} received` : `Amount due: $${checkoutAmountUsd}` : formatBalanceDisplay(
9538
+ `$${totalBalanceUsd || "0.00"}`,
9539
+ projectName
9540
+ );
9460
9541
  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
9461
9542
  "div",
9462
9543
  {
@@ -9465,11 +9546,8 @@ function SelectTokenView({
9465
9546
  /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
9466
9547
  DepositHeader,
9467
9548
  {
9468
- title: "Select Token",
9469
- subtitle: formatBalanceDisplay(
9470
- `$${totalBalanceUsd || "0.00"}`,
9471
- projectName
9472
- ),
9549
+ title: isCheckout ? "Select Token" : "Select Token",
9550
+ subtitle: headerSubtitle,
9473
9551
  showBack: true,
9474
9552
  onBack,
9475
9553
  onClose
@@ -9700,10 +9778,19 @@ function EnterAmountView({
9700
9778
  onReview,
9701
9779
  onBack,
9702
9780
  onClose,
9703
- quickSelectMode
9781
+ quickSelectMode,
9782
+ checkoutAmountUsd,
9783
+ checkoutReceivedUsd
9704
9784
  }) {
9705
9785
  const { colors: colors2, fonts, components } = useTheme();
9786
+ const isCheckout = !!checkoutAmountUsd;
9706
9787
  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}`;
9788
+ const checkoutRemainingUsd = isCheckout ? Math.max(
9789
+ parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0"),
9790
+ 0
9791
+ ).toFixed(2) : null;
9792
+ const headerTitle = isCheckout ? `Pay $${checkoutRemainingUsd}` : "Enter Amount";
9793
+ const headerSubtitle = isCheckout ? parseFloat(checkoutReceivedUsd || "0") > 0 ? `$${checkoutReceivedUsd} / $${checkoutAmountUsd} received` : null : balanceSubtitle;
9707
9794
  const usePercentageChips = quickSelectMode === "percentage" && maxUsdAmount > 0;
9708
9795
  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";
9709
9796
  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
@@ -9717,14 +9804,27 @@ function EnterAmountView({
9717
9804
  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
9718
9805
  DepositHeader,
9719
9806
  {
9720
- title: "Enter Amount",
9721
- subtitle: balanceSubtitle,
9807
+ title: headerTitle,
9808
+ subtitle: headerSubtitle ?? void 0,
9722
9809
  showBack: true,
9723
9810
  onBack,
9724
9811
  onClose
9725
9812
  }
9726
9813
  ),
9727
- walletInfoProp ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "uf-flex uf-w-full uf-justify-center uf-mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(WalletWithNetworkBadge, { walletInfo: walletInfoProp }) }) : null,
9814
+ walletInfoProp ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "uf-flex uf-w-full uf-justify-center uf-mb-3", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-gap-1", children: [
9815
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(WalletWithNetworkBadge, { walletInfo: walletInfoProp }),
9816
+ isCheckout && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
9817
+ "span",
9818
+ {
9819
+ className: "uf-text-xs",
9820
+ style: {
9821
+ color: colors2.foregroundMuted,
9822
+ fontFamily: fonts.regular
9823
+ },
9824
+ children: balanceSubtitle
9825
+ }
9826
+ )
9827
+ ] }) }) : null,
9728
9828
  /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "uf-flex uf-min-h-0 uf-flex-1 uf-flex-col", children: [
9729
9829
  /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "uf-min-h-0 uf-flex-1", children: [
9730
9830
  /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "uf-text-center uf-py-8", children: [
@@ -9747,7 +9847,9 @@ function EnterAmountView({
9747
9847
  inputMode: "decimal",
9748
9848
  placeholder: "0",
9749
9849
  value: amountUsd,
9850
+ readOnly: isCheckout,
9750
9851
  onChange: (e) => {
9852
+ if (isCheckout) return;
9751
9853
  const value = e.target.value;
9752
9854
  if (value === "" || /^\d*\.?\d*$/.test(value)) {
9753
9855
  const decimalIndex = value.indexOf(".");
@@ -9758,7 +9860,7 @@ function EnterAmountView({
9758
9860
  onAmountChange(value);
9759
9861
  }
9760
9862
  },
9761
- className: "uf-bg-transparent uf-outline-none uf-text-center uf-font-normal uf-w-auto uf-min-w-[60px]",
9863
+ className: `uf-bg-transparent uf-outline-none uf-text-center uf-font-normal uf-w-auto uf-min-w-[60px] ${isCheckout ? "uf-cursor-default" : ""}`,
9762
9864
  style: {
9763
9865
  fontSize: `${Math.max(3.75 - (amountUsd || "0").length * 0.15, 2)}rem`,
9764
9866
  color: components.input.textColor,
@@ -9780,7 +9882,7 @@ function EnterAmountView({
9780
9882
  }
9781
9883
  )
9782
9884
  ] }),
9783
- /* @__PURE__ */ (0, import_jsx_runtime46.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_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
9885
+ !isCheckout && /* @__PURE__ */ (0, import_jsx_runtime46.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_runtime46.jsxs)(import_jsx_runtime46.Fragment, { children: [
9784
9886
  PERCENT_QUICK_AMOUNTS.map((pct) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
9785
9887
  "button",
9786
9888
  {
@@ -9849,7 +9951,46 @@ function EnterAmountView({
9849
9951
  }
9850
9952
  )
9851
9953
  ] }) }),
9852
- tokenChainDetails && tokenChainDetails.minimum_deposit_amount_usd > 0 && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
9954
+ tokenChainDetails && tokenChainDetails.minimum_deposit_amount_usd > 0 && (isCheckout && checkoutAmountUsd && inputUsdNum > parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0") + 5e-3 ? /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
9955
+ "div",
9956
+ {
9957
+ className: "uf-rounded-lg uf-px-3 uf-py-2 uf-mb-3 uf-text-center",
9958
+ style: {
9959
+ backgroundColor: colors2.warning + "15",
9960
+ border: `1px solid ${colors2.warning}30`,
9961
+ borderRadius: components.card.borderRadius,
9962
+ animation: "uf-fadeSlideIn 0.4s ease-out"
9963
+ },
9964
+ children: [
9965
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
9966
+ "div",
9967
+ {
9968
+ className: "uf-text-xs uf-font-medium",
9969
+ style: { color: colors2.warning, fontFamily: fonts.medium },
9970
+ children: [
9971
+ "Minimum for ",
9972
+ selectedToken.symbol,
9973
+ " on ",
9974
+ selectedToken.chain_name,
9975
+ " is $",
9976
+ tokenChainDetails.minimum_deposit_amount_usd.toFixed(2)
9977
+ ]
9978
+ }
9979
+ ),
9980
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
9981
+ "div",
9982
+ {
9983
+ className: "uf-text-xs uf-mt-0.5",
9984
+ style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
9985
+ children: [
9986
+ "Amount adjusted from remaining $",
9987
+ (parseFloat(checkoutAmountUsd) - parseFloat(checkoutReceivedUsd || "0")).toFixed(2)
9988
+ ]
9989
+ }
9990
+ )
9991
+ ]
9992
+ }
9993
+ ) : /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
9853
9994
  "div",
9854
9995
  {
9855
9996
  className: "uf-text-center uf-text-xs uf-mb-3",
@@ -9859,7 +10000,7 @@ function EnterAmountView({
9859
10000
  tokenChainDetails.minimum_deposit_amount_usd.toFixed(2)
9860
10001
  ]
9861
10002
  }
9862
- ),
10003
+ )),
9863
10004
  inputUsdNum > 0 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(import_jsx_runtime46.Fragment, { children: inputUsdNum > maxUsdAmount ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
9864
10005
  "div",
9865
10006
  {
@@ -9874,7 +10015,44 @@ function EnterAmountView({
9874
10015
  style: { color: colors2.error },
9875
10016
  children: error
9876
10017
  }
9877
- ) })
10018
+ ) }),
10019
+ isCheckout && selectedToken.icon_url && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2 uf-py-2", children: [
10020
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "uf-relative", children: [
10021
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
10022
+ "img",
10023
+ {
10024
+ src: selectedToken.icon_url,
10025
+ alt: selectedToken.symbol,
10026
+ width: 20,
10027
+ height: 20,
10028
+ className: "uf-w-5 uf-h-5 uf-rounded-full"
10029
+ }
10030
+ ),
10031
+ selectedToken.chain_icon_url && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
10032
+ "img",
10033
+ {
10034
+ src: selectedToken.chain_icon_url,
10035
+ alt: selectedToken.chain_name,
10036
+ width: 10,
10037
+ height: 10,
10038
+ className: "uf-w-2.5 uf-h-2.5 uf-rounded-full uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-border",
10039
+ style: { borderColor: colors2.background }
10040
+ }
10041
+ )
10042
+ ] }),
10043
+ /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
10044
+ "span",
10045
+ {
10046
+ className: "uf-text-xs",
10047
+ style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
10048
+ children: [
10049
+ selectedToken.symbol,
10050
+ " on ",
10051
+ selectedToken.chain_name
10052
+ ]
10053
+ }
10054
+ )
10055
+ ] })
9878
10056
  ] }),
9879
10057
  /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "uf-shrink-0 uf-pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
9880
10058
  "button",
@@ -9902,6 +10080,18 @@ function EnterAmountView({
9902
10080
  // src/components/deposits/browser-wallets/ReviewView.tsx
9903
10081
  var import_lucide_react20 = require("lucide-react");
9904
10082
  var import_jsx_runtime47 = require("react/jsx-runtime");
10083
+ var WALLET_ICONS2 = {
10084
+ metamask: MetamaskIcon,
10085
+ phantom: PhantomIcon,
10086
+ coinbase: CoinbaseIcon,
10087
+ trust: TrustIcon,
10088
+ rainbow: RainbowIcon,
10089
+ rabby: RabbyIcon,
10090
+ okx: OkxIcon,
10091
+ solflare: SolflareIcon,
10092
+ backpack: BackpackIcon,
10093
+ glow: GlowIcon
10094
+ };
9905
10095
  function ReviewView({
9906
10096
  walletInfo,
9907
10097
  recipientAddress,
@@ -9936,30 +10126,17 @@ function ReviewView({
9936
10126
  ),
9937
10127
  /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "uf-flex uf-min-h-0 uf-flex-1 uf-flex-col", children: [
9938
10128
  /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "uf-min-h-0 uf-flex-1 uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: [
9939
- /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "uf-text-center", children: [
9940
- /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
9941
- "div",
9942
- {
9943
- className: "uf-text-4xl uf-font-medium",
9944
- style: { color: colors2.foreground, fontFamily: fonts.medium },
9945
- children: [
9946
- "$",
9947
- amountUsd || "0"
9948
- ]
9949
- }
9950
- ),
9951
- formattedTokenAmount && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
9952
- "div",
9953
- {
9954
- className: "uf-text-sm uf-mt-2",
9955
- style: { color: colors2.foregroundMuted },
9956
- children: [
9957
- "\u2248 ",
9958
- formattedTokenAmount
9959
- ]
9960
- }
9961
- )
9962
- ] }),
10129
+ /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "uf-text-center", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
10130
+ "div",
10131
+ {
10132
+ className: "uf-text-4xl uf-font-medium",
10133
+ style: { color: colors2.foreground, fontFamily: fonts.medium },
10134
+ children: [
10135
+ "$",
10136
+ amountUsd || "0"
10137
+ ]
10138
+ }
10139
+ ) }),
9963
10140
  /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
9964
10141
  "div",
9965
10142
  {
@@ -9976,7 +10153,31 @@ function ReviewView({
9976
10153
  {
9977
10154
  className: "uf-text-sm",
9978
10155
  style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
9979
- children: "Source"
10156
+ children: "From"
10157
+ }
10158
+ ),
10159
+ /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
10160
+ WALLET_ICONS2[walletInfo.icon] && (() => {
10161
+ const Icon2 = WALLET_ICONS2[walletInfo.icon];
10162
+ return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "uf-w-5 uf-h-5 uf-rounded-full uf-overflow-hidden uf-flex-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(Icon2, { size: 20, variant: "color" }) });
10163
+ })(),
10164
+ /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
10165
+ "span",
10166
+ {
10167
+ className: "uf-text-sm uf-font-medium",
10168
+ style: { color: colors2.foreground, fontFamily: fonts.medium },
10169
+ children: walletInfo.name
10170
+ }
10171
+ )
10172
+ ] })
10173
+ ] }),
10174
+ /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "uf-flex uf-justify-between uf-items-center", children: [
10175
+ /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
10176
+ "span",
10177
+ {
10178
+ className: "uf-text-sm",
10179
+ style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
10180
+ children: "You send"
9980
10181
  }
9981
10182
  ),
9982
10183
  /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
@@ -9988,17 +10189,12 @@ function ReviewView({
9988
10189
  className: "uf-w-5 uf-h-5 uf-rounded-full"
9989
10190
  }
9990
10191
  ),
9991
- /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)(
10192
+ /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
9992
10193
  "span",
9993
10194
  {
9994
10195
  className: "uf-text-sm uf-font-medium",
9995
10196
  style: { color: colors2.foreground, fontFamily: fonts.medium },
9996
- children: [
9997
- walletInfo.name,
9998
- " (",
9999
- truncateAddress2(walletInfo.address),
10000
- ")"
10001
- ]
10197
+ children: formattedTokenAmount || `$${amountUsd}`
10002
10198
  }
10003
10199
  )
10004
10200
  ] })
@@ -10161,7 +10357,10 @@ function ReviewView({
10161
10357
  borderRadius: components.button.borderRadius,
10162
10358
  border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
10163
10359
  },
10164
- children: isConfirming ? "Confirming..." : "Confirm Order"
10360
+ children: isConfirming ? /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2", children: [
10361
+ /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(import_lucide_react20.Loader2, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
10362
+ "Confirming..."
10363
+ ] }) : "Confirm Order"
10165
10364
  }
10166
10365
  ) })
10167
10366
  ] })
@@ -10175,17 +10374,35 @@ function ReviewView({
10175
10374
  var import_react17 = require("react");
10176
10375
  var import_lucide_react21 = require("lucide-react");
10177
10376
  var import_jsx_runtime48 = require("react/jsx-runtime");
10377
+ var SETTLE_FALLBACK_MS = 15e3;
10178
10378
  function ConfirmingView({
10179
10379
  isConfirming,
10180
10380
  onClose,
10181
10381
  executions = [],
10182
- isPolling = false
10382
+ isPolling = false,
10383
+ onNewDeposit,
10384
+ onDone,
10385
+ paymentIntentStatus,
10386
+ amountReceivedUsd,
10387
+ amountReceivedUsdAtSubmission
10183
10388
  }) {
10184
- const { colors: colors2, fonts } = useTheme();
10389
+ const { colors: colors2, fonts, components } = useTheme();
10185
10390
  const [containerEl, setContainerEl] = (0, import_react17.useState)(null);
10186
10391
  const containerCallbackRef = (0, import_react17.useCallback)((el) => {
10187
10392
  setContainerEl(el);
10188
10393
  }, []);
10394
+ const [fallbackSettled, setFallbackSettled] = (0, import_react17.useState)(false);
10395
+ const hasExecution = executions.length > 0;
10396
+ const isCheckoutMode = paymentIntentStatus != null;
10397
+ const isPaymentComplete = paymentIntentStatus === "succeeded";
10398
+ const amountChanged = amountReceivedUsdAtSubmission != null && amountReceivedUsd != null && amountReceivedUsd !== amountReceivedUsdAtSubmission;
10399
+ const piSettled = !isCheckoutMode || isPaymentComplete || amountChanged || fallbackSettled;
10400
+ (0, import_react17.useEffect)(() => {
10401
+ if (!hasExecution || piSettled) return;
10402
+ const timeout = setTimeout(() => setFallbackSettled(true), SETTLE_FALLBACK_MS);
10403
+ return () => clearTimeout(timeout);
10404
+ }, [hasExecution, piSettled]);
10405
+ const showButtons = hasExecution && piSettled;
10189
10406
  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(PortalContainerProvider, { value: containerEl, children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
10190
10407
  "div",
10191
10408
  {
@@ -10198,8 +10415,8 @@ function ConfirmingView({
10198
10415
  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
10199
10416
  DepositHeader,
10200
10417
  {
10201
- title: isConfirming ? "Confirming..." : "Processing",
10202
- onClose
10418
+ title: isConfirming ? "Confirming..." : hasExecution && isPaymentComplete ? "Payment Complete" : hasExecution ? "Deposit Received" : "Processing",
10419
+ onClose: isPaymentComplete && onDone ? onDone : onClose
10203
10420
  }
10204
10421
  ),
10205
10422
  /* @__PURE__ */ (0, import_jsx_runtime48.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_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
@@ -10226,11 +10443,70 @@ function ConfirmingView({
10226
10443
  children: "Please confirm the transaction in your wallet"
10227
10444
  }
10228
10445
  )
10229
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
10446
+ ] }) : hasExecution ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
10230
10447
  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
10231
10448
  import_lucide_react21.CheckCircle2,
10232
10449
  {
10233
10450
  className: "uf-w-12 uf-h-12 uf-mb-4",
10451
+ style: { color: "rgb(34, 197, 94)" }
10452
+ }
10453
+ ),
10454
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
10455
+ "div",
10456
+ {
10457
+ className: "uf-text-lg uf-font-medium",
10458
+ style: { color: colors2.foreground, fontFamily: fonts.medium },
10459
+ children: isPaymentComplete ? "Payment Complete" : "Deposit Received"
10460
+ }
10461
+ ),
10462
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
10463
+ "div",
10464
+ {
10465
+ className: "uf-text-sm uf-mt-2 uf-text-center uf-px-6",
10466
+ style: { color: colors2.foregroundMuted },
10467
+ children: isPaymentComplete ? "Your payment has been fulfilled." : showButtons ? "Your deposit is being processed." : "Checking payment status..."
10468
+ }
10469
+ ),
10470
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "uf-mt-6 uf-flex uf-flex-col uf-items-center uf-gap-3", children: !showButtons ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
10471
+ import_lucide_react21.Loader2,
10472
+ {
10473
+ className: "uf-w-5 uf-h-5 uf-animate-spin",
10474
+ style: { color: colors2.foregroundMuted }
10475
+ }
10476
+ ) : isPaymentComplete && onDone ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
10477
+ "button",
10478
+ {
10479
+ onClick: onDone,
10480
+ className: "uf-w-full uf-py-3 uf-px-8 uf-text-sm uf-font-medium uf-transition-opacity hover:uf-opacity-80",
10481
+ style: {
10482
+ backgroundColor: colors2.primary,
10483
+ color: colors2.primaryForeground,
10484
+ fontFamily: fonts.medium,
10485
+ borderRadius: components.button.borderRadius
10486
+ },
10487
+ children: "Done"
10488
+ }
10489
+ ) : onNewDeposit ? /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
10490
+ "button",
10491
+ {
10492
+ onClick: onNewDeposit,
10493
+ 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",
10494
+ style: {
10495
+ backgroundColor: colors2.primary,
10496
+ color: colors2.primaryForeground,
10497
+ fontFamily: fonts.medium
10498
+ },
10499
+ children: [
10500
+ "Make another deposit",
10501
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_lucide_react21.ArrowRight, { className: "uf-w-4 uf-h-4" })
10502
+ ]
10503
+ }
10504
+ ) : null })
10505
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
10506
+ /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
10507
+ import_lucide_react21.Loader2,
10508
+ {
10509
+ className: "uf-w-12 uf-h-12 uf-animate-spin uf-mb-4",
10234
10510
  style: { color: colors2.primary }
10235
10511
  }
10236
10512
  ),
@@ -10247,7 +10523,7 @@ function ConfirmingView({
10247
10523
  {
10248
10524
  className: "uf-text-sm uf-mt-2 uf-text-center uf-px-6",
10249
10525
  style: { color: colors2.foregroundMuted },
10250
- children: "You can close this window or wait for confirmation."
10526
+ children: "Waiting for your deposit to be detected..."
10251
10527
  }
10252
10528
  )
10253
10529
  ] }) }),
@@ -10274,6 +10550,7 @@ function BrowserWalletModal({
10274
10550
  depositWallet,
10275
10551
  userId,
10276
10552
  publishableKey,
10553
+ clientSecret,
10277
10554
  assetCdnUrl,
10278
10555
  projectName,
10279
10556
  theme = "dark",
@@ -10282,7 +10559,13 @@ function BrowserWalletModal({
10282
10559
  onDepositSuccess,
10283
10560
  onDepositError,
10284
10561
  amountQuickSelect = "percentage",
10285
- onWalletDisconnect
10562
+ onWalletDisconnect,
10563
+ prefillAmountUsd,
10564
+ checkoutAmountUsd,
10565
+ checkoutReceivedUsd,
10566
+ onNewDeposit,
10567
+ onDone,
10568
+ paymentIntentStatus
10286
10569
  }) {
10287
10570
  const { colors: colors2, fonts, components } = useTheme();
10288
10571
  const [step, setStep] = React26.useState("select-token");
@@ -10300,6 +10583,7 @@ function BrowserWalletModal({
10300
10583
  const [tokenChainDetails, setTokenChainDetails] = React26.useState(null);
10301
10584
  const [loadingTokenDetails, setLoadingTokenDetails] = React26.useState(false);
10302
10585
  const [showTransactionDetails, setShowTransactionDetails] = React26.useState(false);
10586
+ const [receivedUsdAtSubmission, setReceivedUsdAtSubmission] = React26.useState(null);
10303
10587
  const themeClass = theme === "dark" ? "uf-dark" : "";
10304
10588
  const chainType = depositWallet.chain_type;
10305
10589
  const recipientAddress = depositWallet.address;
@@ -10307,15 +10591,19 @@ function BrowserWalletModal({
10307
10591
  const { executions: depositExecutions, isPolling } = useDepositPolling({
10308
10592
  userId,
10309
10593
  publishableKey,
10594
+ clientSecret,
10310
10595
  enabled: open && hasSignedTransaction,
10311
10596
  onDepositSuccess,
10312
10597
  onDepositError
10313
10598
  });
10599
+ const prevOpenRef = React26.useRef(false);
10314
10600
  React26.useEffect(() => {
10315
- if (open) {
10601
+ const wasOpen = prevOpenRef.current;
10602
+ prevOpenRef.current = open;
10603
+ if (open && !wasOpen) {
10316
10604
  setStep("select-token");
10317
10605
  setSelectedBalance(null);
10318
- setAmountUsd("");
10606
+ setAmountUsd(prefillAmountUsd ?? "");
10319
10607
  setError(null);
10320
10608
  setIsConfirming(false);
10321
10609
  setTokenChainDetails(null);
@@ -10323,7 +10611,15 @@ function BrowserWalletModal({
10323
10611
  setHasSignedTransaction(false);
10324
10612
  setIsDisconnectingWallet(false);
10325
10613
  }
10326
- }, [open]);
10614
+ }, [open, prefillAmountUsd]);
10615
+ React26.useEffect(() => {
10616
+ if (!prefillAmountUsd || !tokenChainDetails || step !== "input-amount") return;
10617
+ const minDeposit = tokenChainDetails.minimum_deposit_amount_usd || 0;
10618
+ const currentAmount = parseFloat(amountUsd) || 0;
10619
+ if (currentAmount > 0 && currentAmount < minDeposit) {
10620
+ setAmountUsd(minDeposit.toFixed(2));
10621
+ }
10622
+ }, [tokenChainDetails, step, prefillAmountUsd]);
10327
10623
  React26.useEffect(() => {
10328
10624
  if (step === "review") {
10329
10625
  setShowTransactionDetails(false);
@@ -10441,7 +10737,7 @@ function BrowserWalletModal({
10441
10737
  setError(null);
10442
10738
  if (step === "input-amount") {
10443
10739
  setStep("select-token");
10444
- setAmountUsd("");
10740
+ setAmountUsd(prefillAmountUsd ?? "");
10445
10741
  setTokenChainDetails(null);
10446
10742
  } else if (step === "review") {
10447
10743
  setStep("input-amount");
@@ -10527,7 +10823,6 @@ function BrowserWalletModal({
10527
10823
  }
10528
10824
  }
10529
10825
  setIsConfirming(true);
10530
- setStep("confirming");
10531
10826
  setError(null);
10532
10827
  try {
10533
10828
  let txHash;
@@ -10545,16 +10840,17 @@ function BrowserWalletModal({
10545
10840
  } else {
10546
10841
  txHash = await sendEthereumTransaction(token, tokenAmount.toString());
10547
10842
  }
10843
+ setReceivedUsdAtSubmission(checkoutReceivedUsd ?? "0");
10548
10844
  setHasSignedTransaction(true);
10549
- onSuccess?.(txHash);
10550
10845
  setIsConfirming(false);
10846
+ setStep("confirming");
10847
+ onSuccess?.(txHash);
10551
10848
  } catch (err) {
10552
10849
  console.error("[BrowserWalletModal] Transaction error:", err);
10553
10850
  const errorMessage = err instanceof Error ? err.message : "Transaction failed";
10554
10851
  setError(errorMessage);
10555
10852
  onError?.(err instanceof Error ? err : new Error(errorMessage));
10556
10853
  setIsConfirming(false);
10557
- setStep("review");
10558
10854
  }
10559
10855
  };
10560
10856
  const sendEthereumTransaction = async (token, amountStr) => {
@@ -10803,7 +11099,9 @@ function BrowserWalletModal({
10803
11099
  onBack: handleClose,
10804
11100
  onClose: handleFullClose,
10805
11101
  onDisconnectWallet: onWalletDisconnect ? () => void handleDisconnectFromSelectToken() : void 0,
10806
- isDisconnectingWallet
11102
+ isDisconnectingWallet,
11103
+ checkoutAmountUsd,
11104
+ checkoutReceivedUsd
10807
11105
  }
10808
11106
  ),
10809
11107
  step === "input-amount" && selectedToken && selectedBalance && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
@@ -10824,7 +11122,9 @@ function BrowserWalletModal({
10824
11122
  onReview: handleReview,
10825
11123
  onBack: handleBack,
10826
11124
  onClose: handleFullClose,
10827
- quickSelectMode: amountQuickSelect
11125
+ quickSelectMode: amountQuickSelect,
11126
+ checkoutAmountUsd,
11127
+ checkoutReceivedUsd
10828
11128
  }
10829
11129
  ),
10830
11130
  step === "review" && selectedToken && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
@@ -10853,7 +11153,12 @@ function BrowserWalletModal({
10853
11153
  isConfirming,
10854
11154
  onClose: handleFullClose,
10855
11155
  executions: depositExecutions,
10856
- isPolling
11156
+ isPolling,
11157
+ onNewDeposit,
11158
+ onDone,
11159
+ paymentIntentStatus,
11160
+ amountReceivedUsd: checkoutReceivedUsd,
11161
+ amountReceivedUsdAtSubmission: receivedUsdAtSubmission
10857
11162
  }
10858
11163
  )
10859
11164
  ] })
@@ -10867,7 +11172,7 @@ function BrowserWalletModal({
10867
11172
  var React27 = __toESM(require("react"));
10868
11173
  var import_lucide_react22 = require("lucide-react");
10869
11174
  var import_jsx_runtime50 = require("react/jsx-runtime");
10870
- var WALLET_ICONS2 = {
11175
+ var WALLET_ICONS3 = {
10871
11176
  metamask: MetamaskIcon,
10872
11177
  phantom: PhantomIcon,
10873
11178
  coinbase: CoinbaseIcon,
@@ -11306,10 +11611,10 @@ function WalletSelectionModal({
11306
11611
  },
11307
11612
  children: [
11308
11613
  /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
11309
- WALLET_ICONS2[wallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
11614
+ WALLET_ICONS3[wallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
11310
11615
  WalletIconWithNetwork,
11311
11616
  {
11312
- WalletIcon: WALLET_ICONS2[wallet.id],
11617
+ WalletIcon: WALLET_ICONS3[wallet.id],
11313
11618
  networks: wallet.networks,
11314
11619
  size: 40,
11315
11620
  className: "uf-rounded-lg"
@@ -11380,10 +11685,10 @@ function WalletSelectionModal({
11380
11685
  style: { minHeight: WALLET_STEP_BODY_MIN_HEIGHT },
11381
11686
  children: [
11382
11687
  /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-pb-4 uf-shrink-0", children: [
11383
- /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "uf-mb-2", children: WALLET_ICONS2[selectedWallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
11688
+ /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "uf-mb-2", children: WALLET_ICONS3[selectedWallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
11384
11689
  WalletIconWithNetwork,
11385
11690
  {
11386
- WalletIcon: WALLET_ICONS2[selectedWallet.id],
11691
+ WalletIcon: WALLET_ICONS3[selectedWallet.id],
11387
11692
  networks: selectedWallet.networks,
11388
11693
  size: 48,
11389
11694
  className: "uf-rounded-lg"
@@ -12186,70 +12491,743 @@ function DepositModal({
12186
12491
  ) });
12187
12492
  }
12188
12493
 
12189
- // src/components/withdrawals/WithdrawModal.tsx
12190
- var import_react22 = require("react");
12191
- var import_lucide_react26 = require("lucide-react");
12494
+ // src/components/checkout/CheckoutModal.tsx
12495
+ var import_react19 = require("react");
12496
+ var import_lucide_react24 = require("lucide-react");
12192
12497
 
12193
- // src/hooks/use-supported-destination-tokens.ts
12498
+ // src/hooks/use-payment-intent.ts
12194
12499
  var import_react_query9 = require("@tanstack/react-query");
12195
12500
  var import_core24 = require("@unifold/core");
12196
- function useSupportedDestinationTokens(publishableKey, enabled = true) {
12501
+ function usePaymentIntent(params) {
12502
+ const {
12503
+ clientSecret,
12504
+ publishableKey,
12505
+ enabled = true,
12506
+ pollingInterval = 5e3
12507
+ } = params;
12197
12508
  return (0, import_react_query9.useQuery)({
12198
- queryKey: ["unifold", "supportedDestinationTokens", publishableKey],
12199
- queryFn: () => (0, import_core24.getSupportedDestinationTokens)(publishableKey),
12200
- staleTime: 1e3 * 60 * 5,
12201
- gcTime: 1e3 * 60 * 30,
12202
- refetchOnMount: false,
12203
- refetchOnWindowFocus: false,
12204
- enabled
12509
+ queryKey: ["unifold", "paymentIntent", clientSecret, publishableKey],
12510
+ queryFn: () => (0, import_core24.retrievePaymentIntent)(clientSecret, publishableKey),
12511
+ enabled: enabled && !!clientSecret && !!publishableKey,
12512
+ staleTime: 0,
12513
+ refetchInterval: pollingInterval || false,
12514
+ refetchOnWindowFocus: true,
12515
+ retry: 3,
12516
+ retryDelay: (attempt) => Math.min(1e3 * 2 ** attempt, 1e4)
12205
12517
  });
12206
12518
  }
12207
12519
 
12208
- // src/hooks/use-source-token-validation.ts
12520
+ // src/hooks/use-deposit-quote.ts
12209
12521
  var import_react_query10 = require("@tanstack/react-query");
12210
12522
  var import_core25 = require("@unifold/core");
12211
- function useSourceTokenValidation(params) {
12523
+ function useDepositQuote(params) {
12212
12524
  const {
12525
+ publishableKey,
12213
12526
  sourceChainType,
12214
12527
  sourceChainId,
12215
12528
  sourceTokenAddress,
12216
- sourceTokenSymbol,
12217
- publishableKey,
12529
+ destinationAmount,
12530
+ destinationChainType,
12531
+ destinationChainId,
12532
+ destinationTokenAddress,
12218
12533
  enabled = true
12219
12534
  } = params;
12220
- const hasParams = !!sourceChainType && !!sourceChainId && !!sourceTokenAddress;
12535
+ const request = {
12536
+ source_chain_type: sourceChainType,
12537
+ source_chain_id: sourceChainId,
12538
+ source_token_address: sourceTokenAddress,
12539
+ destination_amount: destinationAmount,
12540
+ destination_chain_type: destinationChainType,
12541
+ destination_chain_id: destinationChainId,
12542
+ destination_token_address: destinationTokenAddress
12543
+ };
12221
12544
  return (0, import_react_query10.useQuery)({
12222
12545
  queryKey: [
12223
12546
  "unifold",
12224
- "sourceTokenValidation",
12225
- sourceChainType ?? null,
12226
- sourceChainId ?? null,
12227
- sourceTokenAddress ?? null,
12547
+ "depositQuote",
12548
+ sourceChainType,
12549
+ sourceChainId,
12550
+ sourceTokenAddress,
12551
+ destinationAmount,
12552
+ destinationChainType,
12553
+ destinationChainId,
12554
+ destinationTokenAddress,
12228
12555
  publishableKey
12229
12556
  ],
12230
- queryFn: async () => {
12231
- const res = await (0, import_core25.getSupportedDepositTokens)(publishableKey);
12232
- let matchedMinUsd = null;
12233
- let matchedProcessingTime = null;
12234
- let matchedSlippage = null;
12235
- let matchedPriceImpact = null;
12236
- const found = res.data.some(
12237
- (token) => token.chains.some((chain) => {
12238
- const match = chain.chain_type === sourceChainType && chain.chain_id === sourceChainId && chain.token_address.toLowerCase() === sourceTokenAddress.toLowerCase();
12239
- if (match) {
12240
- matchedMinUsd = chain.minimum_deposit_amount_usd;
12241
- matchedProcessingTime = chain.estimated_processing_time;
12242
- matchedSlippage = chain.max_slippage_percent;
12243
- matchedPriceImpact = chain.estimated_price_impact_percent;
12244
- }
12245
- return match;
12246
- })
12247
- );
12248
- return {
12249
- isSupported: found,
12250
- minimumAmountUsd: matchedMinUsd,
12251
- estimatedProcessingTime: matchedProcessingTime,
12252
- maxSlippagePercent: matchedSlippage,
12557
+ queryFn: () => (0, import_core25.getDepositQuote)(request, publishableKey),
12558
+ enabled: enabled && !!publishableKey && !!sourceChainType && !!sourceChainId && !!sourceTokenAddress && !!destinationAmount && destinationAmount !== "0" && !!destinationChainType && !!destinationChainId && !!destinationTokenAddress,
12559
+ staleTime: 6e4,
12560
+ gcTime: 5 * 6e4,
12561
+ refetchOnWindowFocus: false,
12562
+ retry: 2,
12563
+ retryDelay: (attempt) => Math.min(1e3 * 2 ** attempt, 5e3)
12564
+ });
12565
+ }
12566
+
12567
+ // src/components/checkout/CheckoutModal.tsx
12568
+ var import_jsx_runtime52 = require("react/jsx-runtime");
12569
+ function mapDepositAddressesToWallets(depositAddresses, pi) {
12570
+ return depositAddresses.map((da, idx) => ({
12571
+ id: da.id,
12572
+ chain_type: da.chain_type,
12573
+ address_type: da.address_type,
12574
+ address: da.address,
12575
+ destination_chain_type: pi.destination_chain_type,
12576
+ destination_chain_id: pi.destination_chain_id,
12577
+ destination_token_address: pi.destination_token_address,
12578
+ recipient_address: pi.recipient_address,
12579
+ is_primary: idx === 0
12580
+ }));
12581
+ }
12582
+ function SkeletonButton2() {
12583
+ return /* @__PURE__ */ (0, import_jsx_runtime52.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: [
12584
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
12585
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "uf-bg-muted uf-rounded-lg uf-w-9 uf-h-9" }),
12586
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "uf-space-y-1.5", children: [
12587
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "uf-h-3.5 uf-w-24 uf-bg-muted uf-rounded" }),
12588
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "uf-h-3 uf-w-32 uf-bg-muted uf-rounded" })
12589
+ ] })
12590
+ ] }),
12591
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "uf-flex uf-items-center uf-gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_lucide_react24.ChevronRight, { className: "uf-w-4 uf-h-4 uf-text-muted" }) })
12592
+ ] });
12593
+ }
12594
+ function CheckoutModal({
12595
+ open,
12596
+ onOpenChange,
12597
+ clientSecret,
12598
+ publishableKey,
12599
+ modalTitle,
12600
+ enableConnectWallet = false,
12601
+ theme = "dark",
12602
+ onCheckoutSuccess,
12603
+ onCheckoutError
12604
+ }) {
12605
+ const { colors: colors2, fonts, components } = useTheme();
12606
+ const [view, setView] = (0, import_react19.useState)("main");
12607
+ const resetViewTimeoutRef = (0, import_react19.useRef)(
12608
+ null
12609
+ );
12610
+ const [browserWalletModalOpen, setBrowserWalletModalOpen] = (0, import_react19.useState)(false);
12611
+ const [browserWalletInfo, setBrowserWalletInfo] = (0, import_react19.useState)(null);
12612
+ const [walletSelectionModalOpen, setWalletSelectionModalOpen] = (0, import_react19.useState)(false);
12613
+ const [browserWalletChainType, setBrowserWalletChainType] = (0, import_react19.useState)(() => getStoredWalletChainType());
12614
+ const isMobileView = useIsMobileViewport();
12615
+ const [resolvedTheme, setResolvedTheme] = (0, import_react19.useState)(
12616
+ theme === "auto" ? "dark" : theme
12617
+ );
12618
+ (0, import_react19.useEffect)(() => {
12619
+ if (theme === "auto") {
12620
+ const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
12621
+ setResolvedTheme(mediaQuery.matches ? "dark" : "light");
12622
+ const handler = (e) => {
12623
+ setResolvedTheme(e.matches ? "dark" : "light");
12624
+ };
12625
+ mediaQuery.addEventListener("change", handler);
12626
+ return () => mediaQuery.removeEventListener("change", handler);
12627
+ } else {
12628
+ setResolvedTheme(theme);
12629
+ }
12630
+ }, [theme]);
12631
+ const themeClass = resolvedTheme === "dark" ? "uf-dark" : "";
12632
+ const {
12633
+ data: paymentIntent,
12634
+ isLoading: piLoading,
12635
+ error: piError
12636
+ } = usePaymentIntent({
12637
+ clientSecret,
12638
+ publishableKey,
12639
+ enabled: open && !!clientSecret,
12640
+ pollingInterval: 5e3
12641
+ });
12642
+ const { projectConfig } = useProjectConfig({
12643
+ publishableKey,
12644
+ enabled: open
12645
+ });
12646
+ const prevStatusRef = (0, import_react19.useRef)(null);
12647
+ (0, import_react19.useEffect)(() => {
12648
+ if (!paymentIntent) return;
12649
+ const prev = prevStatusRef.current;
12650
+ prevStatusRef.current = paymentIntent.status;
12651
+ if (prev && prev !== paymentIntent.status && paymentIntent.status === "succeeded") {
12652
+ if (!browserWalletModalOpen) {
12653
+ setView("main");
12654
+ }
12655
+ onCheckoutSuccess?.({
12656
+ paymentIntentId: paymentIntent.id,
12657
+ status: paymentIntent.status
12658
+ });
12659
+ }
12660
+ }, [paymentIntent, onCheckoutSuccess, browserWalletModalOpen]);
12661
+ const wallets = (0, import_react19.useMemo)(() => {
12662
+ if (!paymentIntent) return [];
12663
+ return mapDepositAddressesToWallets(
12664
+ paymentIntent.deposit_addresses,
12665
+ paymentIntent
12666
+ );
12667
+ }, [paymentIntent]);
12668
+ const formatCryptoAmount = (0, import_react19.useMemo)(() => {
12669
+ if (!paymentIntent) return (_) => "";
12670
+ const decimals = paymentIntent.destination_token_decimals ?? 6;
12671
+ const symbol = paymentIntent.currency.toUpperCase();
12672
+ return (baseUnits) => {
12673
+ const num = Number(baseUnits) / 10 ** decimals;
12674
+ const formatted = num % 1 === 0 ? num.toFixed(0) : num.toFixed(2);
12675
+ return `${formatted} ${symbol}`;
12676
+ };
12677
+ }, [paymentIntent]);
12678
+ const remainingAmountUsd = (0, import_react19.useMemo)(() => {
12679
+ if (!paymentIntent) return void 0;
12680
+ const total = parseFloat(paymentIntent.amount_usd);
12681
+ const received = parseFloat(paymentIntent.amount_received_usd);
12682
+ if (isNaN(total) || isNaN(received)) return paymentIntent.amount_usd;
12683
+ const remaining = total - received;
12684
+ return remaining > 0 ? remaining.toFixed(2) : "0.00";
12685
+ }, [paymentIntent]);
12686
+ const remainingCrypto = (0, import_react19.useMemo)(() => {
12687
+ if (!paymentIntent) return void 0;
12688
+ const total = BigInt(paymentIntent.amount);
12689
+ const received = BigInt(paymentIntent.amount_received);
12690
+ const remaining = total - received;
12691
+ return remaining > 0n ? remaining.toString() : "0";
12692
+ }, [paymentIntent]);
12693
+ const [selectedSource, setSelectedSource] = (0, import_react19.useState)(null);
12694
+ const quoteDestinationAmount = (0, import_react19.useMemo)(() => {
12695
+ if (!paymentIntent || !selectedSource) return "0";
12696
+ const remaining = BigInt(paymentIntent.amount) - BigInt(paymentIntent.amount_received);
12697
+ const totalBaseUnits = Number(paymentIntent.amount);
12698
+ const totalUsd = parseFloat(paymentIntent.amount_usd);
12699
+ const baseUnitsPerUsd = totalUsd > 0 ? totalBaseUnits / totalUsd : 0;
12700
+ const minUsd = Math.max(selectedSource.minimumDepositAmountUsd, 3);
12701
+ const minDepositBaseUnits = BigInt(Math.ceil(minUsd * baseUnitsPerUsd));
12702
+ const effective = remaining > minDepositBaseUnits ? remaining : minDepositBaseUnits;
12703
+ return effective > 0n ? effective.toString() : "0";
12704
+ }, [paymentIntent, selectedSource]);
12705
+ const { data: sourceQuote } = useDepositQuote({
12706
+ publishableKey,
12707
+ sourceChainType: selectedSource?.chainType ?? "",
12708
+ sourceChainId: selectedSource?.chainId ?? "",
12709
+ sourceTokenAddress: selectedSource?.tokenAddress ?? "",
12710
+ destinationAmount: quoteDestinationAmount,
12711
+ destinationChainType: paymentIntent?.destination_chain_type ?? "",
12712
+ destinationChainId: paymentIntent?.destination_chain_id ?? "",
12713
+ destinationTokenAddress: paymentIntent?.destination_token_address ?? "",
12714
+ enabled: open && view === "transfer" && !!paymentIntent && !!selectedSource && quoteDestinationAmount !== "0"
12715
+ });
12716
+ const handleBrowserWalletClick = (0, import_react19.useCallback)(
12717
+ (walletInfo) => {
12718
+ const walletChainType = walletInfo.type === "phantom-solana" || walletInfo.type === "solflare" || walletInfo.type === "backpack" || walletInfo.type === "glow" ? "solana" : "ethereum";
12719
+ setStoredWalletChainType(walletChainType);
12720
+ setBrowserWalletChainType(walletChainType);
12721
+ const matchingDepositWallet = wallets.find(
12722
+ (w) => w.chain_type === walletChainType
12723
+ );
12724
+ if (!matchingDepositWallet) {
12725
+ onCheckoutError?.({
12726
+ message: `Unable to pay from ${walletChainType}. Please try a different wallet.`,
12727
+ code: "NO_DEPOSIT_ADDRESS"
12728
+ });
12729
+ return;
12730
+ }
12731
+ setBrowserWalletInfo({
12732
+ ...walletInfo,
12733
+ depositWallet: matchingDepositWallet
12734
+ });
12735
+ setBrowserWalletModalOpen(true);
12736
+ },
12737
+ [wallets, onCheckoutError]
12738
+ );
12739
+ const handleWalletConnectClick = (0, import_react19.useCallback)(() => {
12740
+ setWalletSelectionModalOpen(true);
12741
+ }, []);
12742
+ const handleWalletConnected = (0, import_react19.useCallback)(
12743
+ (walletInfo) => {
12744
+ const walletChainType = walletInfo.type === "phantom-solana" || walletInfo.type === "solflare" || walletInfo.type === "backpack" || walletInfo.type === "glow" ? "solana" : "ethereum";
12745
+ setStoredWalletChainType(walletChainType);
12746
+ setBrowserWalletChainType(walletChainType);
12747
+ const matchingDepositWallet = wallets.find(
12748
+ (w) => w.chain_type === walletChainType
12749
+ );
12750
+ if (!matchingDepositWallet) {
12751
+ onCheckoutError?.({
12752
+ message: `Unable to pay from ${walletChainType}. Please try a different wallet.`,
12753
+ code: "NO_DEPOSIT_ADDRESS"
12754
+ });
12755
+ setWalletSelectionModalOpen(false);
12756
+ return;
12757
+ }
12758
+ setBrowserWalletInfo({
12759
+ ...walletInfo,
12760
+ depositWallet: matchingDepositWallet
12761
+ });
12762
+ setWalletSelectionModalOpen(false);
12763
+ setBrowserWalletModalOpen(true);
12764
+ },
12765
+ [wallets, onCheckoutError]
12766
+ );
12767
+ const handleWalletDisconnect = (0, import_react19.useCallback)(() => {
12768
+ setUserDisconnectedWallet(true);
12769
+ clearStoredWalletChainType();
12770
+ setBrowserWalletChainType(void 0);
12771
+ setBrowserWalletInfo(null);
12772
+ setBrowserWalletModalOpen(false);
12773
+ }, []);
12774
+ const handleClose = (0, import_react19.useCallback)(() => {
12775
+ onOpenChange(false);
12776
+ if (resetViewTimeoutRef.current) {
12777
+ clearTimeout(resetViewTimeoutRef.current);
12778
+ }
12779
+ resetViewTimeoutRef.current = setTimeout(() => {
12780
+ setView("main");
12781
+ setBrowserWalletInfo(null);
12782
+ resetViewTimeoutRef.current = null;
12783
+ }, 200);
12784
+ }, [onOpenChange]);
12785
+ (0, import_react19.useLayoutEffect)(() => {
12786
+ if (!open) return;
12787
+ if (resetViewTimeoutRef.current) {
12788
+ clearTimeout(resetViewTimeoutRef.current);
12789
+ resetViewTimeoutRef.current = null;
12790
+ }
12791
+ setView("main");
12792
+ setBrowserWalletInfo(null);
12793
+ }, [open]);
12794
+ (0, import_react19.useEffect)(
12795
+ () => () => {
12796
+ if (resetViewTimeoutRef.current) {
12797
+ clearTimeout(resetViewTimeoutRef.current);
12798
+ }
12799
+ },
12800
+ []
12801
+ );
12802
+ const handleBack = (0, import_react19.useCallback)(() => {
12803
+ setView("main");
12804
+ }, []);
12805
+ const poweredByFooter = /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
12806
+ PoweredByUnifold,
12807
+ {
12808
+ color: colors2.foregroundMuted,
12809
+ className: "uf-flex uf-justify-center uf-shrink-0"
12810
+ }
12811
+ ) });
12812
+ const progressSection = paymentIntent ? (() => {
12813
+ const received = parseFloat(paymentIntent.amount_received_usd);
12814
+ const total = parseFloat(paymentIntent.amount_usd);
12815
+ const remaining = Math.max(total - received, 0);
12816
+ const pct = total > 0 ? Math.min(received / total * 100, 100) : 0;
12817
+ const hasPartial = received > 0;
12818
+ const amountStr = paymentIntent.amount_usd;
12819
+ const dynamicFontSize = `${Math.max(3.75 - amountStr.length * 0.15, 2)}rem`;
12820
+ return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "uf-text-center uf-py-2 uf-space-y-1", children: [
12821
+ paymentIntent.description && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
12822
+ "div",
12823
+ {
12824
+ className: "uf-text-xs",
12825
+ style: {
12826
+ color: colors2.foregroundMuted,
12827
+ fontFamily: fonts.regular
12828
+ },
12829
+ children: paymentIntent.description
12830
+ }
12831
+ ),
12832
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-center", children: [
12833
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
12834
+ "span",
12835
+ {
12836
+ className: "uf-mr-1",
12837
+ style: {
12838
+ fontSize: `calc(${dynamicFontSize} * 0.6)`,
12839
+ color: colors2.foregroundMuted,
12840
+ fontFamily: fonts.regular
12841
+ },
12842
+ children: "$"
12843
+ }
12844
+ ),
12845
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
12846
+ "span",
12847
+ {
12848
+ style: {
12849
+ fontSize: dynamicFontSize,
12850
+ color: colors2.foreground,
12851
+ fontFamily: fonts.regular,
12852
+ lineHeight: 1.1
12853
+ },
12854
+ children: amountStr
12855
+ }
12856
+ )
12857
+ ] }),
12858
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
12859
+ "div",
12860
+ {
12861
+ className: "uf-text-xs",
12862
+ style: {
12863
+ color: colors2.foregroundMuted,
12864
+ fontFamily: fonts.regular
12865
+ },
12866
+ children: paymentIntent.currency.toUpperCase()
12867
+ }
12868
+ ),
12869
+ hasPartial && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "uf-pt-2 uf-space-y-1.5", children: [
12870
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
12871
+ "div",
12872
+ {
12873
+ className: "uf-w-full uf-h-1.5 uf-rounded-full uf-overflow-hidden",
12874
+ style: { backgroundColor: colors2.border },
12875
+ children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
12876
+ "div",
12877
+ {
12878
+ className: "uf-h-full uf-rounded-full uf-transition-all uf-duration-500",
12879
+ style: {
12880
+ width: `${pct}%`,
12881
+ backgroundColor: paymentIntent.status === "succeeded" ? "rgb(34, 197, 94)" : colors2.primary
12882
+ }
12883
+ }
12884
+ )
12885
+ }
12886
+ ),
12887
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
12888
+ "div",
12889
+ {
12890
+ className: "uf-text-xs",
12891
+ style: {
12892
+ color: colors2.foregroundMuted,
12893
+ fontFamily: fonts.regular
12894
+ },
12895
+ children: [
12896
+ "$",
12897
+ paymentIntent.amount_received_usd,
12898
+ " / $",
12899
+ amountStr,
12900
+ " received",
12901
+ remaining > 0 && paymentIntent.status !== "succeeded" && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("span", { style: { color: colors2.foreground, fontFamily: fonts.medium }, children: [
12902
+ " ",
12903
+ "\xB7 $",
12904
+ remaining.toFixed(2),
12905
+ " remaining"
12906
+ ] })
12907
+ ]
12908
+ }
12909
+ )
12910
+ ] }),
12911
+ paymentIntent.status !== "requires_payment" && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "uf-pt-1", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
12912
+ "span",
12913
+ {
12914
+ className: "uf-text-xs uf-font-medium uf-px-2.5 uf-py-1 uf-rounded-full uf-inline-block",
12915
+ style: {
12916
+ 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)",
12917
+ color: paymentIntent.status === "succeeded" ? "rgb(34, 197, 94)" : paymentIntent.status === "processing" ? "rgb(59, 130, 246)" : "rgb(239, 68, 68)",
12918
+ fontFamily: fonts.medium
12919
+ },
12920
+ children: paymentIntent.status === "succeeded" ? "Payment Complete" : paymentIntent.status === "processing" ? "Partial Payment Received" : paymentIntent.status === "canceled" ? "Canceled" : paymentIntent.status === "expired" ? "Expired" : paymentIntent.status
12921
+ }
12922
+ ) })
12923
+ ] });
12924
+ })() : null;
12925
+ return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(PortalContainerProvider, { value: null, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(Dialog, { open, onOpenChange: handleClose, modal: true, children: [
12926
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
12927
+ DialogContent,
12928
+ {
12929
+ 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}`,
12930
+ style: { backgroundColor: colors2.background },
12931
+ onPointerDownOutside: (e) => e.preventDefault(),
12932
+ onInteractOutside: (e) => e.preventDefault(),
12933
+ children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ThemeStyleInjector, { children: view === "main" ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
12934
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
12935
+ DepositHeader,
12936
+ {
12937
+ title: modalTitle || "Checkout",
12938
+ showClose: true,
12939
+ onClose: handleClose
12940
+ }
12941
+ ),
12942
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
12943
+ piLoading ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "uf-space-y-3", children: [
12944
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
12945
+ "div",
12946
+ {
12947
+ className: "uf-rounded-xl uf-p-4 uf-animate-pulse",
12948
+ style: {
12949
+ backgroundColor: components.card.backgroundColor,
12950
+ borderRadius: components.card.borderRadius,
12951
+ border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
12952
+ },
12953
+ children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-gap-2", children: [
12954
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
12955
+ "div",
12956
+ {
12957
+ className: "uf-h-8 uf-w-24 uf-rounded",
12958
+ style: {
12959
+ backgroundColor: components.card.borderColor
12960
+ }
12961
+ }
12962
+ ),
12963
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
12964
+ "div",
12965
+ {
12966
+ className: "uf-h-4 uf-w-16 uf-rounded",
12967
+ style: {
12968
+ backgroundColor: components.card.borderColor
12969
+ }
12970
+ }
12971
+ )
12972
+ ] })
12973
+ }
12974
+ ),
12975
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(SkeletonButton2, {}),
12976
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(SkeletonButton2, {})
12977
+ ] }) : piError ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
12978
+ /* @__PURE__ */ (0, import_jsx_runtime52.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_runtime52.jsx)(import_lucide_react24.AlertTriangle, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
12979
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
12980
+ "h3",
12981
+ {
12982
+ className: "uf-text-lg uf-font-semibold uf-mb-2",
12983
+ style: {
12984
+ color: colors2.foreground,
12985
+ fontFamily: fonts.semibold
12986
+ },
12987
+ children: "Unable to Load Checkout"
12988
+ }
12989
+ ),
12990
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
12991
+ "p",
12992
+ {
12993
+ className: "uf-text-sm uf-max-w-[280px]",
12994
+ style: {
12995
+ color: colors2.foregroundMuted,
12996
+ fontFamily: fonts.regular
12997
+ },
12998
+ children: piError instanceof Error ? piError.message : "Something went wrong. Please try again."
12999
+ }
13000
+ )
13001
+ ] }) : paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "uf-space-y-3", children: [
13002
+ progressSection,
13003
+ (paymentIntent.status === "requires_payment" || paymentIntent.status === "processing") && /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
13004
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
13005
+ TransferCryptoButton,
13006
+ {
13007
+ onClick: () => setView("transfer"),
13008
+ title: "Transfer Crypto",
13009
+ subtitle: "Send from any wallet or exchange",
13010
+ featuredTokens: projectConfig?.transfer_crypto.networks
13011
+ }
13012
+ ),
13013
+ enableConnectWallet && !isMobileView && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
13014
+ BrowserWalletButton,
13015
+ {
13016
+ onClick: handleBrowserWalletClick,
13017
+ onConnectClick: handleWalletConnectClick,
13018
+ onDisconnect: handleWalletDisconnect,
13019
+ chainType: browserWalletChainType,
13020
+ publishableKey
13021
+ }
13022
+ )
13023
+ ] })
13024
+ ] }) : null,
13025
+ poweredByFooter
13026
+ ] })
13027
+ ] }) : view === "transfer" ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
13028
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
13029
+ DepositHeader,
13030
+ {
13031
+ title: `Pay $${remainingAmountUsd ?? paymentIntent?.amount_usd ?? ""}`,
13032
+ showBack: true,
13033
+ onBack: handleBack,
13034
+ onClose: handleClose
13035
+ }
13036
+ ),
13037
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
13038
+ paymentIntent ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
13039
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
13040
+ "div",
13041
+ {
13042
+ className: "uf-rounded-lg uf-px-3 uf-py-2 uf-flex uf-items-center uf-justify-between",
13043
+ style: {
13044
+ backgroundColor: components.card.backgroundColor,
13045
+ border: `${components.card.borderWidth}px solid ${components.card.borderColor}`,
13046
+ borderRadius: components.card.borderRadius
13047
+ },
13048
+ children: [
13049
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
13050
+ "span",
13051
+ {
13052
+ className: "uf-text-xs",
13053
+ style: {
13054
+ color: colors2.foregroundMuted,
13055
+ fontFamily: fonts.regular
13056
+ },
13057
+ children: parseFloat(paymentIntent.amount_received_usd) > 0 ? `$${paymentIntent.amount_received_usd} / $${paymentIntent.amount_usd} received` : "Amount due"
13058
+ }
13059
+ ),
13060
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
13061
+ "span",
13062
+ {
13063
+ className: "uf-text-sm uf-font-semibold",
13064
+ style: {
13065
+ color: colors2.foreground,
13066
+ fontFamily: fonts.semibold
13067
+ },
13068
+ children: [
13069
+ formatCryptoAmount(remainingCrypto ?? paymentIntent.amount),
13070
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
13071
+ "span",
13072
+ {
13073
+ className: "uf-text-xs uf-font-normal uf-ml-1",
13074
+ style: { color: colors2.foregroundMuted },
13075
+ children: [
13076
+ "($",
13077
+ remainingAmountUsd ?? paymentIntent.amount_usd,
13078
+ ")"
13079
+ ]
13080
+ }
13081
+ )
13082
+ ]
13083
+ }
13084
+ )
13085
+ ]
13086
+ }
13087
+ ),
13088
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
13089
+ TransferCryptoSingleInput,
13090
+ {
13091
+ userId: paymentIntent.user_id || "",
13092
+ publishableKey,
13093
+ clientSecret,
13094
+ recipientAddress: paymentIntent.recipient_address,
13095
+ destinationChainType: paymentIntent.destination_chain_type,
13096
+ destinationChainId: paymentIntent.destination_chain_id,
13097
+ destinationTokenAddress: paymentIntent.destination_token_address,
13098
+ depositConfirmationMode: "auto_ui",
13099
+ wallets,
13100
+ onSourceTokenChange: setSelectedSource,
13101
+ checkoutQuote: sourceQuote ? {
13102
+ sourceAmount: sourceQuote.source_amount,
13103
+ sourceTokenDecimals: sourceQuote.source_token_decimals,
13104
+ sourceTokenSymbol: sourceQuote.source_token_symbol,
13105
+ sourceAmountUsd: sourceQuote.source_amount_usd
13106
+ } : null
13107
+ }
13108
+ )
13109
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(SkeletonButton2, {}),
13110
+ poweredByFooter
13111
+ ] })
13112
+ ] }) : null })
13113
+ }
13114
+ ),
13115
+ /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
13116
+ WalletSelectionModal,
13117
+ {
13118
+ open: walletSelectionModalOpen,
13119
+ onOpenChange: setWalletSelectionModalOpen,
13120
+ onWalletConnected: handleWalletConnected,
13121
+ onClose: () => setWalletSelectionModalOpen(false),
13122
+ theme: resolvedTheme
13123
+ }
13124
+ ),
13125
+ browserWalletInfo && browserWalletInfo.depositWallet && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
13126
+ BrowserWalletModal,
13127
+ {
13128
+ open: browserWalletModalOpen,
13129
+ onOpenChange: setBrowserWalletModalOpen,
13130
+ onFullClose: handleClose,
13131
+ walletInfo: browserWalletInfo,
13132
+ depositWallet: browserWalletInfo.depositWallet,
13133
+ userId: paymentIntent?.user_id || "",
13134
+ publishableKey,
13135
+ clientSecret,
13136
+ theme: resolvedTheme,
13137
+ prefillAmountUsd: remainingAmountUsd,
13138
+ checkoutAmountUsd: paymentIntent?.amount_usd,
13139
+ checkoutReceivedUsd: paymentIntent?.amount_received_usd,
13140
+ onSuccess: (txHash) => {
13141
+ onCheckoutSuccess?.({
13142
+ paymentIntentId: paymentIntent?.id || "",
13143
+ status: "processing"
13144
+ });
13145
+ },
13146
+ onError: (error) => {
13147
+ onCheckoutError?.({
13148
+ message: error.message,
13149
+ error
13150
+ });
13151
+ },
13152
+ onWalletDisconnect: handleWalletDisconnect,
13153
+ onNewDeposit: () => {
13154
+ setBrowserWalletModalOpen(false);
13155
+ setView("main");
13156
+ },
13157
+ onDone: () => {
13158
+ setBrowserWalletModalOpen(false);
13159
+ setView("main");
13160
+ },
13161
+ paymentIntentStatus: paymentIntent?.status
13162
+ }
13163
+ )
13164
+ ] }) });
13165
+ }
13166
+
13167
+ // src/components/withdrawals/WithdrawModal.tsx
13168
+ var import_react23 = require("react");
13169
+ var import_lucide_react27 = require("lucide-react");
13170
+
13171
+ // src/hooks/use-supported-destination-tokens.ts
13172
+ var import_react_query11 = require("@tanstack/react-query");
13173
+ var import_core26 = require("@unifold/core");
13174
+ function useSupportedDestinationTokens(publishableKey, enabled = true) {
13175
+ return (0, import_react_query11.useQuery)({
13176
+ queryKey: ["unifold", "supportedDestinationTokens", publishableKey],
13177
+ queryFn: () => (0, import_core26.getSupportedDestinationTokens)(publishableKey),
13178
+ staleTime: 1e3 * 60 * 5,
13179
+ gcTime: 1e3 * 60 * 30,
13180
+ refetchOnMount: false,
13181
+ refetchOnWindowFocus: false,
13182
+ enabled
13183
+ });
13184
+ }
13185
+
13186
+ // src/hooks/use-source-token-validation.ts
13187
+ var import_react_query12 = require("@tanstack/react-query");
13188
+ var import_core27 = require("@unifold/core");
13189
+ function useSourceTokenValidation(params) {
13190
+ const {
13191
+ sourceChainType,
13192
+ sourceChainId,
13193
+ sourceTokenAddress,
13194
+ sourceTokenSymbol,
13195
+ publishableKey,
13196
+ enabled = true
13197
+ } = params;
13198
+ const hasParams = !!sourceChainType && !!sourceChainId && !!sourceTokenAddress;
13199
+ return (0, import_react_query12.useQuery)({
13200
+ queryKey: [
13201
+ "unifold",
13202
+ "sourceTokenValidation",
13203
+ sourceChainType ?? null,
13204
+ sourceChainId ?? null,
13205
+ sourceTokenAddress ?? null,
13206
+ publishableKey
13207
+ ],
13208
+ queryFn: async () => {
13209
+ const res = await (0, import_core27.getSupportedDepositTokens)(publishableKey);
13210
+ let matchedMinUsd = null;
13211
+ let matchedProcessingTime = null;
13212
+ let matchedSlippage = null;
13213
+ let matchedPriceImpact = null;
13214
+ const found = res.data.some(
13215
+ (token) => token.chains.some((chain) => {
13216
+ const match = chain.chain_type === sourceChainType && chain.chain_id === sourceChainId && chain.token_address.toLowerCase() === sourceTokenAddress.toLowerCase();
13217
+ if (match) {
13218
+ matchedMinUsd = chain.minimum_deposit_amount_usd;
13219
+ matchedProcessingTime = chain.estimated_processing_time;
13220
+ matchedSlippage = chain.max_slippage_percent;
13221
+ matchedPriceImpact = chain.estimated_price_impact_percent;
13222
+ }
13223
+ return match;
13224
+ })
13225
+ );
13226
+ return {
13227
+ isSupported: found,
13228
+ minimumAmountUsd: matchedMinUsd,
13229
+ estimatedProcessingTime: matchedProcessingTime,
13230
+ maxSlippagePercent: matchedSlippage,
12253
13231
  priceImpactPercent: matchedPriceImpact,
12254
13232
  errorMessage: found ? null : `${sourceTokenSymbol || "Source token"} is not a supported withdrawal token. Supported tokens include USDC, USDT, and other stablecoins.`
12255
13233
  };
@@ -12263,8 +13241,8 @@ function useSourceTokenValidation(params) {
12263
13241
  }
12264
13242
 
12265
13243
  // src/hooks/use-address-balance.ts
12266
- var import_react_query11 = require("@tanstack/react-query");
12267
- var import_core26 = require("@unifold/core");
13244
+ var import_react_query13 = require("@tanstack/react-query");
13245
+ var import_core28 = require("@unifold/core");
12268
13246
  function useAddressBalance(params) {
12269
13247
  const {
12270
13248
  address,
@@ -12275,7 +13253,7 @@ function useAddressBalance(params) {
12275
13253
  enabled = true
12276
13254
  } = params;
12277
13255
  const hasParams = !!address && !!chainType && !!chainId && !!tokenAddress;
12278
- return (0, import_react_query11.useQuery)({
13256
+ return (0, import_react_query13.useQuery)({
12279
13257
  queryKey: [
12280
13258
  "unifold",
12281
13259
  "addressBalance",
@@ -12286,7 +13264,7 @@ function useAddressBalance(params) {
12286
13264
  publishableKey
12287
13265
  ],
12288
13266
  queryFn: async () => {
12289
- const res = await (0, import_core26.getAddressBalance)(
13267
+ const res = await (0, import_core28.getAddressBalance)(
12290
13268
  address,
12291
13269
  chainType,
12292
13270
  chainId,
@@ -12324,13 +13302,13 @@ function useAddressBalance(params) {
12324
13302
  }
12325
13303
 
12326
13304
  // src/hooks/use-executions.ts
12327
- var import_react_query12 = require("@tanstack/react-query");
12328
- var import_core27 = require("@unifold/core");
13305
+ var import_react_query14 = require("@tanstack/react-query");
13306
+ var import_core29 = require("@unifold/core");
12329
13307
  function useExecutions(userId, publishableKey, options) {
12330
- const actionType = options?.actionType ?? import_core27.ActionType.Deposit;
12331
- return (0, import_react_query12.useQuery)({
13308
+ const actionType = options?.actionType ?? import_core29.ActionType.Deposit;
13309
+ return (0, import_react_query14.useQuery)({
12332
13310
  queryKey: ["unifold", "executions", actionType, userId, publishableKey],
12333
- queryFn: () => (0, import_core27.queryExecutions)(userId, publishableKey, actionType),
13311
+ queryFn: () => (0, import_core29.queryExecutions)(userId, publishableKey, actionType),
12334
13312
  enabled: (options?.enabled ?? true) && !!userId,
12335
13313
  refetchInterval: options?.refetchInterval ?? 3e3,
12336
13314
  staleTime: 0,
@@ -12340,8 +13318,8 @@ function useExecutions(userId, publishableKey, options) {
12340
13318
  }
12341
13319
 
12342
13320
  // src/hooks/use-withdraw-polling.ts
12343
- var import_react19 = require("react");
12344
- var import_core28 = require("@unifold/core");
13321
+ var import_react20 = require("react");
13322
+ var import_core30 = require("@unifold/core");
12345
13323
  var POLL_INTERVAL_MS2 = 2500;
12346
13324
  var POLL_ENDPOINT_INTERVAL_MS2 = 3e3;
12347
13325
  var CUTOFF_BUFFER_MS2 = 6e4;
@@ -12353,20 +13331,20 @@ function useWithdrawPolling({
12353
13331
  onWithdrawSuccess,
12354
13332
  onWithdrawError
12355
13333
  }) {
12356
- const [executions, setExecutions] = (0, import_react19.useState)([]);
12357
- const [isPolling, setIsPolling] = (0, import_react19.useState)(false);
12358
- const enabledAtRef = (0, import_react19.useRef)(/* @__PURE__ */ new Date());
12359
- const trackedRef = (0, import_react19.useRef)(/* @__PURE__ */ new Map());
12360
- const prevEnabledRef = (0, import_react19.useRef)(false);
12361
- const onSuccessRef = (0, import_react19.useRef)(onWithdrawSuccess);
12362
- const onErrorRef = (0, import_react19.useRef)(onWithdrawError);
12363
- (0, import_react19.useEffect)(() => {
13334
+ const [executions, setExecutions] = (0, import_react20.useState)([]);
13335
+ const [isPolling, setIsPolling] = (0, import_react20.useState)(false);
13336
+ const enabledAtRef = (0, import_react20.useRef)(/* @__PURE__ */ new Date());
13337
+ const trackedRef = (0, import_react20.useRef)(/* @__PURE__ */ new Map());
13338
+ const prevEnabledRef = (0, import_react20.useRef)(false);
13339
+ const onSuccessRef = (0, import_react20.useRef)(onWithdrawSuccess);
13340
+ const onErrorRef = (0, import_react20.useRef)(onWithdrawError);
13341
+ (0, import_react20.useEffect)(() => {
12364
13342
  onSuccessRef.current = onWithdrawSuccess;
12365
13343
  }, [onWithdrawSuccess]);
12366
- (0, import_react19.useEffect)(() => {
13344
+ (0, import_react20.useEffect)(() => {
12367
13345
  onErrorRef.current = onWithdrawError;
12368
13346
  }, [onWithdrawError]);
12369
- (0, import_react19.useEffect)(() => {
13347
+ (0, import_react20.useEffect)(() => {
12370
13348
  if (enabled && !prevEnabledRef.current) {
12371
13349
  enabledAtRef.current = /* @__PURE__ */ new Date();
12372
13350
  trackedRef.current.clear();
@@ -12376,20 +13354,20 @@ function useWithdrawPolling({
12376
13354
  }
12377
13355
  prevEnabledRef.current = enabled;
12378
13356
  }, [enabled]);
12379
- (0, import_react19.useEffect)(() => {
13357
+ (0, import_react20.useEffect)(() => {
12380
13358
  if (!userId || !enabled) return;
12381
13359
  const enabledAt = enabledAtRef.current;
12382
13360
  const poll = async () => {
12383
13361
  try {
12384
- const response = await (0, import_core28.queryExecutions)(userId, publishableKey, import_core28.ActionType.Withdraw);
13362
+ const response = await (0, import_core30.queryExecutions)(userId, publishableKey, import_core30.ActionType.Withdraw);
12385
13363
  const cutoff = new Date(enabledAt.getTime() - CUTOFF_BUFFER_MS2);
12386
13364
  const sorted = [...response.data].sort((a, b) => {
12387
13365
  const tA = a.created_at ? new Date(a.created_at).getTime() : 0;
12388
13366
  const tB = b.created_at ? new Date(b.created_at).getTime() : 0;
12389
13367
  return tB - tA;
12390
13368
  });
12391
- const inProgress = [import_core28.ExecutionStatus.PENDING, import_core28.ExecutionStatus.WAITING, import_core28.ExecutionStatus.DELAYED];
12392
- const terminal = [import_core28.ExecutionStatus.SUCCEEDED, import_core28.ExecutionStatus.FAILED];
13369
+ const inProgress = [import_core30.ExecutionStatus.PENDING, import_core30.ExecutionStatus.WAITING, import_core30.ExecutionStatus.DELAYED];
13370
+ const terminal = [import_core30.ExecutionStatus.SUCCEEDED, import_core30.ExecutionStatus.FAILED];
12393
13371
  let target = null;
12394
13372
  for (const ex of sorted) {
12395
13373
  const t11 = ex.created_at ? new Date(ex.created_at) : null;
@@ -12419,9 +13397,9 @@ function useWithdrawPolling({
12419
13397
  }
12420
13398
  return [...list, ex];
12421
13399
  });
12422
- if (ex.status === import_core28.ExecutionStatus.SUCCEEDED && (!prev || inProgress.includes(prev))) {
13400
+ if (ex.status === import_core30.ExecutionStatus.SUCCEEDED && (!prev || inProgress.includes(prev))) {
12423
13401
  onSuccessRef.current?.({ message: "Withdrawal completed successfully", executionId: ex.id, transaction: ex });
12424
- } else if (ex.status === import_core28.ExecutionStatus.FAILED && prev !== import_core28.ExecutionStatus.FAILED) {
13402
+ } else if (ex.status === import_core30.ExecutionStatus.FAILED && prev !== import_core30.ExecutionStatus.FAILED) {
12425
13403
  onErrorRef.current?.({ message: "Withdrawal failed", code: "WITHDRAW_FAILED", error: ex });
12426
13404
  }
12427
13405
  }
@@ -12438,11 +13416,11 @@ function useWithdrawPolling({
12438
13416
  setIsPolling(false);
12439
13417
  };
12440
13418
  }, [userId, publishableKey, enabled]);
12441
- (0, import_react19.useEffect)(() => {
13419
+ (0, import_react20.useEffect)(() => {
12442
13420
  if (!enabled || !depositWalletId) return;
12443
13421
  const trigger = async () => {
12444
13422
  try {
12445
- await (0, import_core28.pollDirectExecutions)({ deposit_wallet_id: depositWalletId }, publishableKey);
13423
+ await (0, import_core30.pollDirectExecutions)({ deposit_wallet_id: depositWalletId }, publishableKey);
12446
13424
  } catch {
12447
13425
  }
12448
13426
  };
@@ -12454,7 +13432,7 @@ function useWithdrawPolling({
12454
13432
  }
12455
13433
 
12456
13434
  // src/components/withdrawals/WithdrawDoubleInput.tsx
12457
- var import_jsx_runtime52 = require("react/jsx-runtime");
13435
+ var import_jsx_runtime53 = require("react/jsx-runtime");
12458
13436
  var t7 = i18n.withdrawModal;
12459
13437
  var getChainKey4 = (chainId, chainType) => `${chainType}:${chainId}`;
12460
13438
  function WithdrawDoubleInput({
@@ -12469,8 +13447,8 @@ function WithdrawDoubleInput({
12469
13447
  const isDarkMode = useTheme().themeClass.includes("uf-dark");
12470
13448
  const selectedToken = selectedTokenSymbol ? tokens.find((t11) => t11.symbol === selectedTokenSymbol) : void 0;
12471
13449
  const availableChainsForToken = selectedToken?.chains || [];
12472
- const renderTokenItem = (tokenData) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
12473
- /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
13450
+ const renderTokenItem = (tokenData) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
13451
+ /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
12474
13452
  "img",
12475
13453
  {
12476
13454
  src: tokenData.icon_url,
@@ -12481,10 +13459,10 @@ function WithdrawDoubleInput({
12481
13459
  className: "uf-rounded-full uf-flex-shrink-0"
12482
13460
  }
12483
13461
  ),
12484
- /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "uf-text-xs uf-font-normal", children: tokenData.symbol })
13462
+ /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "uf-text-xs uf-font-normal", children: tokenData.symbol })
12485
13463
  ] });
12486
- const renderChainItem = (chainData) => /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
12487
- /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
13464
+ const renderChainItem = (chainData) => /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
13465
+ /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
12488
13466
  "img",
12489
13467
  {
12490
13468
  src: chainData.icon_url,
@@ -12495,14 +13473,14 @@ function WithdrawDoubleInput({
12495
13473
  className: "uf-rounded-full uf-flex-shrink-0"
12496
13474
  }
12497
13475
  ),
12498
- /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "uf-text-xs uf-font-normal", children: chainData.chain_name })
13476
+ /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "uf-text-xs uf-font-normal", children: chainData.chain_name })
12499
13477
  ] });
12500
13478
  const currentChainData = selectedChainKey ? availableChainsForToken.find(
12501
13479
  (c) => getChainKey4(c.chain_id, c.chain_type) === selectedChainKey
12502
13480
  ) : void 0;
12503
- return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "uf-grid uf-grid-cols-2 uf-gap-2.5", children: [
12504
- /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { children: [
12505
- /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
13481
+ return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "uf-grid uf-grid-cols-2 uf-gap-2.5", children: [
13482
+ /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { children: [
13483
+ /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
12506
13484
  "div",
12507
13485
  {
12508
13486
  className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1",
@@ -12510,14 +13488,14 @@ function WithdrawDoubleInput({
12510
13488
  children: t7.receiveToken
12511
13489
  }
12512
13490
  ),
12513
- /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
13491
+ /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
12514
13492
  Select,
12515
13493
  {
12516
13494
  value: selectedTokenSymbol ?? "",
12517
13495
  onValueChange: onTokenChange,
12518
13496
  disabled: isLoading || tokens.length === 0,
12519
13497
  children: [
12520
- /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
13498
+ /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
12521
13499
  SelectTrigger,
12522
13500
  {
12523
13501
  className: "uf-h-10 hover:uf-opacity-90 uf-text-foreground disabled:uf-opacity-50",
@@ -12525,10 +13503,10 @@ function WithdrawDoubleInput({
12525
13503
  backgroundColor: components.card.backgroundColor,
12526
13504
  border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
12527
13505
  },
12528
- children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(SelectValue, { children: isLoading || !selectedTokenSymbol ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t7.loading }) : selectedToken ? renderTokenItem(selectedToken) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "uf-text-xs uf-font-normal", children: selectedTokenSymbol }) })
13506
+ children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(SelectValue, { children: isLoading || !selectedTokenSymbol ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t7.loading }) : selectedToken ? renderTokenItem(selectedToken) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "uf-text-xs uf-font-normal", children: selectedTokenSymbol }) })
12529
13507
  }
12530
13508
  ),
12531
- /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
13509
+ /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
12532
13510
  SelectContent,
12533
13511
  {
12534
13512
  className: "uf-bg-secondary uf-border uf-text-foreground uf-max-h-[300px]",
@@ -12536,7 +13514,7 @@ function WithdrawDoubleInput({
12536
13514
  border: `1px solid ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)"}`,
12537
13515
  ...fonts.regular ? { "--uf-font-family": fonts.regular } : {}
12538
13516
  },
12539
- children: tokens.map((tokenData) => /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
13517
+ children: tokens.map((tokenData) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
12540
13518
  SelectItem,
12541
13519
  {
12542
13520
  value: tokenData.symbol,
@@ -12551,8 +13529,8 @@ function WithdrawDoubleInput({
12551
13529
  }
12552
13530
  )
12553
13531
  ] }),
12554
- /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { children: [
12555
- /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
13532
+ /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { children: [
13533
+ /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
12556
13534
  "div",
12557
13535
  {
12558
13536
  className: "uf-text-xs uf-mb-2 uf-flex uf-items-center uf-gap-1",
@@ -12560,14 +13538,14 @@ function WithdrawDoubleInput({
12560
13538
  children: t7.receiveChain
12561
13539
  }
12562
13540
  ),
12563
- /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
13541
+ /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
12564
13542
  Select,
12565
13543
  {
12566
13544
  value: selectedChainKey ?? "",
12567
13545
  onValueChange: onChainChange,
12568
13546
  disabled: isLoading || availableChainsForToken.length === 0,
12569
13547
  children: [
12570
- /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
13548
+ /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
12571
13549
  SelectTrigger,
12572
13550
  {
12573
13551
  className: "uf-h-10 hover:uf-opacity-90 uf-text-foreground disabled:uf-opacity-50",
@@ -12575,10 +13553,10 @@ function WithdrawDoubleInput({
12575
13553
  backgroundColor: components.card.backgroundColor,
12576
13554
  border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
12577
13555
  },
12578
- children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(SelectValue, { children: isLoading || !selectedChainKey ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t7.loading }) : currentChainData ? renderChainItem(currentChainData) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "uf-text-xs uf-font-normal", children: selectedChainKey }) })
13556
+ children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(SelectValue, { children: isLoading || !selectedChainKey ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "uf-text-xs uf-font-light uf-text-muted-foreground", children: t7.loading }) : currentChainData ? renderChainItem(currentChainData) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "uf-text-xs uf-font-normal", children: selectedChainKey }) })
12579
13557
  }
12580
13558
  ),
12581
- /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
13559
+ /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
12582
13560
  SelectContent,
12583
13561
  {
12584
13562
  align: "end",
@@ -12587,9 +13565,9 @@ function WithdrawDoubleInput({
12587
13565
  border: `1px solid ${isDarkMode ? "rgba(255,255,255,0.15)" : "rgba(0,0,0,0.15)"}`,
12588
13566
  ...fonts.regular ? { "--uf-font-family": fonts.regular } : {}
12589
13567
  },
12590
- children: availableChainsForToken.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime52.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) => {
13568
+ children: availableChainsForToken.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime53.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) => {
12591
13569
  const chainKey = getChainKey4(chainData.chain_id, chainData.chain_type);
12592
- return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
13570
+ return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
12593
13571
  SelectItem,
12594
13572
  {
12595
13573
  value: chainKey,
@@ -12609,12 +13587,13 @@ function WithdrawDoubleInput({
12609
13587
  }
12610
13588
 
12611
13589
  // src/components/withdrawals/WithdrawForm.tsx
12612
- var import_react20 = require("react");
12613
- var import_lucide_react24 = require("lucide-react");
13590
+ var import_react21 = require("react");
13591
+ var import_lucide_react25 = require("lucide-react");
13592
+ var import_core33 = require("@unifold/core");
12614
13593
 
12615
13594
  // src/hooks/use-verify-recipient-address.ts
12616
- var import_react_query13 = require("@tanstack/react-query");
12617
- var import_core29 = require("@unifold/core");
13595
+ var import_react_query15 = require("@tanstack/react-query");
13596
+ var import_core31 = require("@unifold/core");
12618
13597
  function useVerifyRecipientAddress(params) {
12619
13598
  const {
12620
13599
  chainType,
@@ -12626,7 +13605,7 @@ function useVerifyRecipientAddress(params) {
12626
13605
  } = params;
12627
13606
  const trimmedAddress = recipientAddress?.trim() || "";
12628
13607
  const hasAllParams = !!chainType && !!chainId && !!tokenAddress && trimmedAddress.length > 0;
12629
- return (0, import_react_query13.useQuery)({
13608
+ return (0, import_react_query15.useQuery)({
12630
13609
  queryKey: [
12631
13610
  "unifold",
12632
13611
  "verifyRecipientAddress",
@@ -12636,7 +13615,7 @@ function useVerifyRecipientAddress(params) {
12636
13615
  trimmedAddress,
12637
13616
  publishableKey
12638
13617
  ],
12639
- queryFn: () => (0, import_core29.verifyRecipientAddress)(
13618
+ queryFn: () => (0, import_core31.verifyRecipientAddress)(
12640
13619
  {
12641
13620
  chain_type: chainType,
12642
13621
  chain_id: chainId,
@@ -12655,7 +13634,7 @@ function useVerifyRecipientAddress(params) {
12655
13634
  }
12656
13635
 
12657
13636
  // src/components/withdrawals/send-withdraw.ts
12658
- var import_core30 = require("@unifold/core");
13637
+ var import_core32 = require("@unifold/core");
12659
13638
  async function sendEvmWithdraw(params) {
12660
13639
  const {
12661
13640
  provider,
@@ -12733,7 +13712,7 @@ async function sendSolanaWithdraw(params) {
12733
13712
  if (!provider.publicKey) {
12734
13713
  await provider.connect();
12735
13714
  }
12736
- const buildResponse = await (0, import_core30.buildSolanaTransaction)(
13715
+ const buildResponse = await (0, import_core32.buildSolanaTransaction)(
12737
13716
  {
12738
13717
  chain_id: "mainnet",
12739
13718
  token_address: sourceTokenAddress === "" ? "native" : sourceTokenAddress,
@@ -12759,15 +13738,62 @@ async function sendSolanaWithdraw(params) {
12759
13738
  for (let i = 0; i < serialized.length; i++) {
12760
13739
  binaryStr += String.fromCharCode(serialized[i]);
12761
13740
  }
12762
- const sendResponse = await (0, import_core30.sendSolanaTransaction)(
13741
+ const sendResponse = await (0, import_core32.sendSolanaTransaction)(
12763
13742
  { chain_id: "mainnet", signed_transaction: btoa(binaryStr) },
12764
13743
  publishableKey
12765
13744
  );
12766
13745
  return sendResponse.signature;
12767
13746
  }
13747
+ var HYPERCORE_CHAIN_ID = "1337";
13748
+ var HYPERCORE_SPOT_USDC_ADDRESS = "0x6d1e7cde53ba9467b783cb7c530ce054";
13749
+ function isHypercoreChain(chainId) {
13750
+ return chainId === HYPERCORE_CHAIN_ID;
13751
+ }
13752
+ async function sendHypercoreWithdraw(params) {
13753
+ const {
13754
+ provider,
13755
+ fromAddress,
13756
+ depositWalletAddress,
13757
+ sourceTokenAddress,
13758
+ amount,
13759
+ tokenSymbol,
13760
+ publishableKey
13761
+ } = params;
13762
+ const isSpot = sourceTokenAddress.toLowerCase() === HYPERCORE_SPOT_USDC_ADDRESS;
13763
+ const currentChainHex = await provider.request({
13764
+ method: "eth_chainId",
13765
+ params: []
13766
+ });
13767
+ const activeChainId = String(parseInt(currentChainHex, 16));
13768
+ const buildResult = await (0, import_core32.buildHypercoreTransaction)(
13769
+ {
13770
+ action_type: isSpot ? "spot_send" : "usd_send",
13771
+ signature_chain_type: "ethereum",
13772
+ signature_chain_id: activeChainId,
13773
+ recipient_address: depositWalletAddress,
13774
+ token_address: sourceTokenAddress,
13775
+ token_symbol: tokenSymbol || void 0,
13776
+ amount
13777
+ },
13778
+ publishableKey
13779
+ );
13780
+ const signature = await provider.request({
13781
+ method: "eth_signTypedData_v4",
13782
+ params: [fromAddress, JSON.stringify(buildResult.typed_data)]
13783
+ });
13784
+ await (0, import_core32.sendHypercoreTransaction)(
13785
+ {
13786
+ action_payload: buildResult.action_payload,
13787
+ signature,
13788
+ nonce: buildResult.nonce
13789
+ },
13790
+ publishableKey
13791
+ );
13792
+ }
12768
13793
  async function detectBrowserWallet(chainType, senderAddress) {
12769
13794
  const win = typeof window !== "undefined" ? window : null;
12770
13795
  if (!win || !senderAddress) return null;
13796
+ if (getUserDisconnectedWallet()) return null;
12771
13797
  const anyWin = win;
12772
13798
  if (chainType === "solana") {
12773
13799
  const solProviders = [];
@@ -12801,28 +13827,44 @@ async function detectBrowserWallet(chainType, senderAddress) {
12801
13827
  evmProviders.push({ provider: p, name });
12802
13828
  }
12803
13829
  };
12804
- add(anyWin.phantom?.ethereum, "Phantom");
12805
- add(anyWin.coinbaseWalletExtension, "Coinbase");
12806
- add(anyWin.trustwallet?.ethereum, "Trust Wallet");
12807
- add(anyWin.okxwallet, "OKX Wallet");
12808
- if (anyWin.__eip6963Providers) {
12809
- for (const detail of anyWin.__eip6963Providers) {
12810
- const rdns = detail.info?.rdns || "";
12811
- let name = detail.info?.name || "Wallet";
12812
- if (rdns.includes("metamask")) name = "MetaMask";
12813
- else if (rdns.includes("rabby")) name = "Rabby";
12814
- else if (rdns.includes("rainbow")) name = "Rainbow";
12815
- add(detail.provider, name);
12816
- }
13830
+ if (!anyWin.__eip6963Providers) {
13831
+ anyWin.__eip6963Providers = [];
12817
13832
  }
12818
- if (win.ethereum) {
12819
- const eth = win.ethereum;
12820
- let name = "Wallet";
12821
- if (eth.isMetaMask && !eth.isPhantom && !eth.isRabby) name = "MetaMask";
12822
- else if (eth.isRabby) name = "Rabby";
12823
- else if (eth.isRainbow) name = "Rainbow";
12824
- else if (eth.isCoinbaseWallet) name = "Coinbase";
12825
- add(eth, name);
13833
+ const handleAnnouncement = (event) => {
13834
+ const { detail } = event;
13835
+ if (!detail?.info || !detail?.provider) return;
13836
+ const exists = anyWin.__eip6963Providers.some((p) => p.info.uuid === detail.info.uuid);
13837
+ if (!exists) anyWin.__eip6963Providers.push(detail);
13838
+ };
13839
+ win.addEventListener("eip6963:announceProvider", handleAnnouncement);
13840
+ win.dispatchEvent(new Event("eip6963:requestProvider"));
13841
+ win.removeEventListener("eip6963:announceProvider", handleAnnouncement);
13842
+ for (const detail of anyWin.__eip6963Providers) {
13843
+ const rdns = detail.info?.rdns || "";
13844
+ let name = detail.info?.name || "Wallet";
13845
+ if (rdns.includes("metamask")) name = "MetaMask";
13846
+ else if (rdns.includes("phantom")) name = "Phantom";
13847
+ else if (rdns.includes("coinbase")) name = "Coinbase";
13848
+ else if (rdns.includes("rabby")) name = "Rabby";
13849
+ else if (rdns.includes("rainbow")) name = "Rainbow";
13850
+ else if (rdns.includes("okx")) name = "OKX Wallet";
13851
+ else if (rdns.includes("trust")) name = "Trust Wallet";
13852
+ add(detail.provider, name);
13853
+ }
13854
+ if (evmProviders.length === 0) {
13855
+ add(anyWin.phantom?.ethereum, "Phantom");
13856
+ add(anyWin.coinbaseWalletExtension, "Coinbase");
13857
+ add(anyWin.trustwallet?.ethereum, "Trust Wallet");
13858
+ add(anyWin.okxwallet, "OKX Wallet");
13859
+ if (evmProviders.length === 0 && win.ethereum) {
13860
+ const eth = win.ethereum;
13861
+ let name = "Wallet";
13862
+ if (eth.isMetaMask && !eth.isPhantom && !eth.isRabby) name = "MetaMask";
13863
+ else if (eth.isRabby) name = "Rabby";
13864
+ else if (eth.isRainbow) name = "Rainbow";
13865
+ else if (eth.isCoinbaseWallet) name = "Coinbase";
13866
+ add(eth, name);
13867
+ }
12826
13868
  }
12827
13869
  for (const { provider, name } of evmProviders) {
12828
13870
  try {
@@ -12838,7 +13880,7 @@ async function detectBrowserWallet(chainType, senderAddress) {
12838
13880
  }
12839
13881
 
12840
13882
  // src/components/withdrawals/WithdrawForm.tsx
12841
- var import_jsx_runtime53 = require("react/jsx-runtime");
13883
+ var import_jsx_runtime54 = require("react/jsx-runtime");
12842
13884
  var t8 = i18n.withdrawModal;
12843
13885
  var tCrypto = i18n.transferCrypto;
12844
13886
  function formatProcessingTime2(seconds) {
@@ -12878,12 +13920,9 @@ function WithdrawForm({
12878
13920
  estimatedProcessingTime,
12879
13921
  maxSlippagePercent,
12880
13922
  priceImpactPercent,
12881
- detectedWallet,
13923
+ senderAddress,
12882
13924
  sourceChainId,
12883
13925
  sourceTokenAddress,
12884
- isWalletMatch,
12885
- connectedWalletName,
12886
- canWithdraw,
12887
13926
  onWithdraw,
12888
13927
  onWithdrawError,
12889
13928
  onDepositWalletCreation,
@@ -12891,22 +13930,22 @@ function WithdrawForm({
12891
13930
  footerLeft
12892
13931
  }) {
12893
13932
  const { colors: colors2, fonts, components } = useTheme();
12894
- const [recipientAddress, setRecipientAddress] = (0, import_react20.useState)(recipientAddressProp || "");
12895
- const [amount, setAmount] = (0, import_react20.useState)("");
12896
- const [inputUnit, setInputUnit] = (0, import_react20.useState)("crypto");
12897
- const [isSubmitting, setIsSubmitting] = (0, import_react20.useState)(false);
12898
- const [submitError, setSubmitError] = (0, import_react20.useState)(null);
12899
- const [detailsExpanded, setDetailsExpanded] = (0, import_react20.useState)(false);
12900
- const [glossaryOpen, setGlossaryOpen] = (0, import_react20.useState)(false);
12901
- (0, import_react20.useEffect)(() => {
13933
+ const [recipientAddress, setRecipientAddress] = (0, import_react21.useState)(recipientAddressProp || "");
13934
+ const [amount, setAmount] = (0, import_react21.useState)("");
13935
+ const [inputUnit, setInputUnit] = (0, import_react21.useState)("crypto");
13936
+ const [isSubmitting, setIsSubmitting] = (0, import_react21.useState)(false);
13937
+ const [submitError, setSubmitError] = (0, import_react21.useState)(null);
13938
+ const [detailsExpanded, setDetailsExpanded] = (0, import_react21.useState)(false);
13939
+ const [glossaryOpen, setGlossaryOpen] = (0, import_react21.useState)(false);
13940
+ (0, import_react21.useEffect)(() => {
12902
13941
  setRecipientAddress(recipientAddressProp || "");
12903
13942
  setAmount("");
12904
13943
  setInputUnit("crypto");
12905
13944
  setSubmitError(null);
12906
13945
  }, [recipientAddressProp]);
12907
13946
  const trimmedAddress = recipientAddress.trim();
12908
- const [debouncedAddress, setDebouncedAddress] = (0, import_react20.useState)(trimmedAddress);
12909
- (0, import_react20.useEffect)(() => {
13947
+ const [debouncedAddress, setDebouncedAddress] = (0, import_react21.useState)(trimmedAddress);
13948
+ (0, import_react21.useEffect)(() => {
12910
13949
  const id = setTimeout(() => setDebouncedAddress(trimmedAddress), 500);
12911
13950
  return () => clearTimeout(id);
12912
13951
  }, [trimmedAddress]);
@@ -12923,7 +13962,7 @@ function WithdrawForm({
12923
13962
  enabled: debouncedAddress.length > 5 && !!selectedChain
12924
13963
  });
12925
13964
  const isDebouncing = trimmedAddress !== debouncedAddress;
12926
- const addressError = (0, import_react20.useMemo)(() => {
13965
+ const addressError = (0, import_react21.useMemo)(() => {
12927
13966
  if (!trimmedAddress || trimmedAddress.length <= 5) return null;
12928
13967
  if (isDebouncing || isVerifyingAddress) return null;
12929
13968
  if (verifyError) return t8.invalidAddress;
@@ -12937,47 +13976,47 @@ function WithdrawForm({
12937
13976
  return null;
12938
13977
  }, [trimmedAddress, isDebouncing, isVerifyingAddress, verifyError, addressVerification, selectedChain, selectedToken]);
12939
13978
  const isAddressValid = !isDebouncing && !!addressVerification?.valid && !addressError;
12940
- const exchangeRate = (0, import_react20.useMemo)(() => {
13979
+ const exchangeRate = (0, import_react21.useMemo)(() => {
12941
13980
  if (!balanceData?.exchangeRate) return 0;
12942
13981
  return parseFloat(balanceData.exchangeRate);
12943
13982
  }, [balanceData]);
12944
- const balanceCrypto = (0, import_react20.useMemo)(() => {
13983
+ const balanceCrypto = (0, import_react21.useMemo)(() => {
12945
13984
  if (!balanceData?.balanceHuman) return 0;
12946
13985
  return parseFloat(balanceData.balanceHuman);
12947
13986
  }, [balanceData]);
12948
- const balanceUsdNum = (0, import_react20.useMemo)(() => {
13987
+ const balanceUsdNum = (0, import_react21.useMemo)(() => {
12949
13988
  if (!balanceData?.balanceUsd) return 0;
12950
13989
  return parseFloat(balanceData.balanceUsd);
12951
13990
  }, [balanceData]);
12952
13991
  const tokenSymbol = sourceTokenSymbol || balanceData?.symbol || "TOKEN";
12953
13992
  const sourceDecimals = balanceData?.decimals ?? 6;
12954
- const cryptoAmountFromInput = (0, import_react20.useMemo)(() => {
13993
+ const cryptoAmountFromInput = (0, import_react21.useMemo)(() => {
12955
13994
  const val = parseFloat(amount);
12956
13995
  if (!val || val <= 0) return 0;
12957
13996
  if (inputUnit === "crypto") return val;
12958
13997
  return exchangeRate > 0 ? val / exchangeRate : 0;
12959
13998
  }, [amount, inputUnit, exchangeRate]);
12960
- const fiatAmountFromInput = (0, import_react20.useMemo)(() => {
13999
+ const fiatAmountFromInput = (0, import_react21.useMemo)(() => {
12961
14000
  const val = parseFloat(amount);
12962
14001
  if (!val || val <= 0) return 0;
12963
14002
  if (inputUnit === "fiat") return val;
12964
14003
  return val * exchangeRate;
12965
14004
  }, [amount, inputUnit, exchangeRate]);
12966
- const convertedDisplay = (0, import_react20.useMemo)(() => {
14005
+ const convertedDisplay = (0, import_react21.useMemo)(() => {
12967
14006
  if (!amount || parseFloat(amount) <= 0) return null;
12968
14007
  if (inputUnit === "crypto") {
12969
14008
  return `$${fiatAmountFromInput.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
12970
14009
  }
12971
14010
  return `${cryptoAmountFromInput.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 6 })} ${tokenSymbol}`;
12972
14011
  }, [amount, inputUnit, fiatAmountFromInput, cryptoAmountFromInput, tokenSymbol]);
12973
- const balanceDisplay = (0, import_react20.useMemo)(() => {
14012
+ const balanceDisplay = (0, import_react21.useMemo)(() => {
12974
14013
  if (isLoadingBalance || !balanceData) return null;
12975
14014
  if (inputUnit === "crypto") {
12976
14015
  return `${balanceCrypto.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} ${tokenSymbol}`;
12977
14016
  }
12978
14017
  return `$${balanceUsdNum.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
12979
14018
  }, [isLoadingBalance, balanceData, inputUnit, balanceCrypto, balanceUsdNum, tokenSymbol]);
12980
- const handleSwitchUnit = (0, import_react20.useCallback)(() => {
14019
+ const handleSwitchUnit = (0, import_react21.useCallback)(() => {
12981
14020
  const val = parseFloat(amount);
12982
14021
  if (!val || val <= 0 || exchangeRate <= 0) {
12983
14022
  setInputUnit((u) => u === "crypto" ? "fiat" : "crypto");
@@ -12994,7 +14033,7 @@ function WithdrawForm({
12994
14033
  setInputUnit("crypto");
12995
14034
  }
12996
14035
  }, [amount, inputUnit, exchangeRate, sourceDecimals]);
12997
- const handleMaxClick = (0, import_react20.useCallback)(() => {
14036
+ const handleMaxClick = (0, import_react21.useCallback)(() => {
12998
14037
  if (inputUnit === "crypto") {
12999
14038
  if (balanceCrypto <= 0) return;
13000
14039
  setAmount(balanceData?.balanceHuman ?? "0");
@@ -13006,7 +14045,7 @@ function WithdrawForm({
13006
14045
  const isBelowMinimum = minimumWithdrawAmountUsd !== null && fiatAmountFromInput > 0 && fiatAmountFromInput < minimumWithdrawAmountUsd;
13007
14046
  const isOverBalance = inputUnit === "crypto" ? cryptoAmountFromInput > 0 && balanceCrypto > 0 && cryptoAmountFromInput > balanceCrypto : fiatAmountFromInput > 0 && balanceUsdNum > 0 && fiatAmountFromInput > balanceUsdNum;
13008
14047
  const isFormValid = trimmedAddress.length > 0 && amount.trim().length > 0 && cryptoAmountFromInput > 0 && isAddressValid && !isBelowMinimum && !isOverBalance && !!balanceData;
13009
- const handleWithdraw = (0, import_react20.useCallback)(async () => {
14048
+ const handleWithdraw = (0, import_react21.useCallback)(async () => {
13010
14049
  if (!selectedToken || !selectedChain) return;
13011
14050
  if (!isFormValid) return;
13012
14051
  setIsSubmitting(true);
@@ -13018,12 +14057,43 @@ function WithdrawForm({
13018
14057
  destinationTokenAddress: selectedChain.token_address,
13019
14058
  recipientAddress: trimmedAddress
13020
14059
  });
13021
- const amountBaseUnit = computeBaseUnit(
14060
+ let amountBaseUnit = computeBaseUnit(
13022
14061
  balanceData.balanceBaseUnit,
13023
14062
  parseFloat(amount),
13024
14063
  inputUnit === "crypto" ? balanceCrypto : balanceUsdNum
13025
14064
  );
13026
- const humanAmount = toSafeDecimalString(cryptoAmountFromInput, sourceDecimals);
14065
+ let humanAmount = toSafeDecimalString(cryptoAmountFromInput, sourceDecimals);
14066
+ if (isHypercoreChain(sourceChainId)) {
14067
+ try {
14068
+ const check = await (0, import_core33.checkHypercoreActivation)(
14069
+ {
14070
+ source_address: senderAddress,
14071
+ recipient_address: depositWallet.address
14072
+ },
14073
+ publishableKey
14074
+ );
14075
+ if (!check.user_exists) {
14076
+ const fee = check.activation_fee;
14077
+ const maxSendable = balanceCrypto - fee;
14078
+ if (maxSendable <= 0) {
14079
+ throw new Error(
14080
+ `Insufficient balance. A ${fee} USDC activation fee is required for the first transfer to this address.`
14081
+ );
14082
+ }
14083
+ const requestedAmount = parseFloat(humanAmount);
14084
+ if (requestedAmount > maxSendable) {
14085
+ humanAmount = toSafeDecimalString(maxSendable, sourceDecimals);
14086
+ amountBaseUnit = computeBaseUnit(
14087
+ balanceData.balanceBaseUnit,
14088
+ maxSendable,
14089
+ balanceCrypto
14090
+ );
14091
+ }
14092
+ }
14093
+ } catch (e) {
14094
+ if (e instanceof Error && e.message.includes("activation fee")) throw e;
14095
+ }
14096
+ }
13027
14097
  const txInfo = {
13028
14098
  sourceChainType,
13029
14099
  sourceChainId,
@@ -13038,33 +14108,67 @@ function WithdrawForm({
13038
14108
  withdrawIntentAddress: depositWallet.address,
13039
14109
  recipientAddress: trimmedAddress
13040
14110
  };
13041
- if (detectedWallet) {
13042
- if (detectedWallet.chainFamily === "evm") {
13043
- await sendEvmWithdraw({
13044
- provider: detectedWallet.provider,
13045
- fromAddress: detectedWallet.address,
13046
- depositWalletAddress: depositWallet.address,
13047
- sourceTokenAddress,
14111
+ const wallet = await detectBrowserWallet(sourceChainType, senderAddress);
14112
+ console.log("browser wallet", wallet);
14113
+ if (wallet) {
14114
+ try {
14115
+ if (wallet.chainFamily === "evm" && isHypercoreChain(sourceChainId)) {
14116
+ await sendHypercoreWithdraw({
14117
+ provider: wallet.provider,
14118
+ fromAddress: wallet.address,
14119
+ depositWalletAddress: depositWallet.address,
14120
+ sourceTokenAddress,
14121
+ amount: humanAmount,
14122
+ tokenSymbol,
14123
+ publishableKey
14124
+ });
14125
+ } else if (wallet.chainFamily === "evm") {
14126
+ await sendEvmWithdraw({
14127
+ provider: wallet.provider,
14128
+ fromAddress: wallet.address,
14129
+ depositWalletAddress: depositWallet.address,
14130
+ sourceTokenAddress,
14131
+ sourceChainId,
14132
+ amountBaseUnit
14133
+ });
14134
+ } else if (wallet.chainFamily === "solana") {
14135
+ await sendSolanaWithdraw({
14136
+ provider: wallet.provider,
14137
+ fromAddress: wallet.address,
14138
+ depositWalletAddress: depositWallet.address,
14139
+ sourceTokenAddress,
14140
+ amountBaseUnit,
14141
+ publishableKey
14142
+ });
14143
+ }
14144
+ } catch (walletErr) {
14145
+ console.error("[Unifold] Browser wallet send failed:", walletErr, {
14146
+ wallet: `${wallet.name} (${wallet.chainFamily})`,
13048
14147
  sourceChainId,
13049
- amountBaseUnit
13050
- });
13051
- } else if (detectedWallet.chainFamily === "solana") {
13052
- await sendSolanaWithdraw({
13053
- provider: detectedWallet.provider,
13054
- fromAddress: detectedWallet.address,
13055
- depositWalletAddress: depositWallet.address,
13056
- sourceTokenAddress,
14148
+ amount: humanAmount,
13057
14149
  amountBaseUnit,
13058
- publishableKey
14150
+ depositWallet: depositWallet.address
13059
14151
  });
14152
+ throw walletErr;
13060
14153
  }
13061
14154
  } else if (onWithdraw) {
13062
- await onWithdraw(txInfo);
14155
+ try {
14156
+ await onWithdraw(txInfo);
14157
+ } catch (callbackErr) {
14158
+ console.error("[Unifold] onWithdraw callback failed:", callbackErr, {
14159
+ sourceChainId,
14160
+ amount: humanAmount,
14161
+ amountBaseUnit,
14162
+ depositWallet: depositWallet.address
14163
+ });
14164
+ throw callbackErr;
14165
+ }
13063
14166
  } else {
13064
14167
  throw new Error("No withdrawal method available. Please connect a wallet.");
13065
14168
  }
13066
14169
  onWithdrawSubmitted?.(txInfo);
13067
14170
  } catch (err) {
14171
+ console.error("[Unifold] Withdrawal failed:", err);
13068
14172
  const raw = err instanceof Error ? err.message : "Withdrawal failed. Please try again.";
13069
14173
  setSubmitError(raw.length > 120 ? "Withdrawal failed. Please try again." : raw);
13070
14174
  onWithdrawError?.({
@@ -13075,10 +14179,10 @@ function WithdrawForm({
13075
14179
  } finally {
13076
14180
  setIsSubmitting(false);
13077
14181
  }
13078
- }, [selectedToken, selectedChain, isFormValid, cryptoAmountFromInput, sourceDecimals, trimmedAddress, publishableKey, onWithdraw, detectedWallet, sourceTokenAddress, sourceChainId, onWithdrawError, onDepositWalletCreation, onWithdrawSubmitted, amount, inputUnit, balanceCrypto, balanceUsdNum, balanceData]);
13079
- return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
13080
- /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { children: [
13081
- /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
14182
+ }, [selectedToken, selectedChain, isFormValid, cryptoAmountFromInput, sourceDecimals, trimmedAddress, publishableKey, onWithdraw, sourceChainType, senderAddress, sourceTokenAddress, sourceChainId, onWithdrawError, onDepositWalletCreation, onWithdrawSubmitted, amount, inputUnit, balanceCrypto, balanceUsdNum, balanceData]);
14183
+ return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
14184
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { children: [
14185
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
13082
14186
  "div",
13083
14187
  {
13084
14188
  className: "uf-text-xs uf-mb-1.5",
@@ -13086,7 +14190,7 @@ function WithdrawForm({
13086
14190
  children: t8.recipientAddress
13087
14191
  }
13088
14192
  ),
13089
- /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
14193
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
13090
14194
  "style",
13091
14195
  {
13092
14196
  dangerouslySetInnerHTML: {
@@ -13094,7 +14198,7 @@ function WithdrawForm({
13094
14198
  }
13095
14199
  }
13096
14200
  ),
13097
- /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
14201
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
13098
14202
  "div",
13099
14203
  {
13100
14204
  className: "uf-flex uf-items-center uf-gap-1 uf-pr-2",
@@ -13104,7 +14208,7 @@ function WithdrawForm({
13104
14208
  border: `${components.input.borderWidth}px solid ${addressError ? colors2.error : components.input.borderColor}`
13105
14209
  },
13106
14210
  children: [
13107
- /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
14211
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
13108
14212
  "input",
13109
14213
  {
13110
14214
  type: "text",
@@ -13121,7 +14225,7 @@ function WithdrawForm({
13121
14225
  }
13122
14226
  }
13123
14227
  ),
13124
- /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
14228
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
13125
14229
  "button",
13126
14230
  {
13127
14231
  type: "button",
@@ -13138,27 +14242,27 @@ function WithdrawForm({
13138
14242
  className: "uf-flex-shrink-0 uf-p-1 uf-rounded uf-transition-colors hover:uf-opacity-70",
13139
14243
  style: { color: colors2.foregroundMuted },
13140
14244
  title: "Paste from clipboard",
13141
- children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react24.ClipboardPaste, { className: "uf-w-4 uf-h-4" })
14245
+ children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react25.ClipboardPaste, { className: "uf-w-4 uf-h-4" })
13142
14246
  }
13143
14247
  )
13144
14248
  ]
13145
14249
  }
13146
14250
  ),
13147
- (isDebouncing || isVerifyingAddress) && trimmedAddress.length > 5 && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-1.5", children: [
13148
- /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react24.Loader2, { className: "uf-w-3 uf-h-3 uf-animate-spin", style: { color: colors2.foregroundMuted } }),
13149
- /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: t8.verifyingAddress })
14251
+ (isDebouncing || isVerifyingAddress) && trimmedAddress.length > 5 && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-1.5", children: [
14252
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react25.Loader2, { className: "uf-w-3 uf-h-3 uf-animate-spin", style: { color: colors2.foregroundMuted } }),
14253
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: t8.verifyingAddress })
13150
14254
  ] }),
13151
- addressError && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-1.5", children: [
13152
- /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react24.AlertTriangle, { className: "uf-w-3 uf-h-3", style: { color: colors2.error } }),
13153
- /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "uf-text-xs", style: { color: colors2.error, fontFamily: fonts.regular }, children: addressError })
14255
+ addressError && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5 uf-mt-1.5", children: [
14256
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react25.AlertTriangle, { className: "uf-w-3 uf-h-3", style: { color: colors2.error } }),
14257
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "uf-text-xs", style: { color: colors2.error, fontFamily: fonts.regular }, children: addressError })
13154
14258
  ] })
13155
14259
  ] }),
13156
- /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { children: [
13157
- /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "uf-text-xs uf-mb-1.5", style: { color: components.card.labelColor, fontFamily: fonts.medium }, children: [
14260
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { children: [
14261
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-text-xs uf-mb-1.5", style: { color: components.card.labelColor, fontFamily: fonts.medium }, children: [
13158
14262
  t8.amount,
13159
- minimumWithdrawAmountUsd != null && minimumWithdrawAmountUsd > 0 && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { style: { color: colors2.warning, fontFamily: fonts.regular }, children: ` ($${minimumWithdrawAmountUsd.toFixed(2)} min)` })
14263
+ minimumWithdrawAmountUsd != null && minimumWithdrawAmountUsd > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { style: { color: colors2.warning, fontFamily: fonts.regular }, children: ` ($${minimumWithdrawAmountUsd.toFixed(2)} min)` })
13160
14264
  ] }),
13161
- /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
14265
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
13162
14266
  "style",
13163
14267
  {
13164
14268
  dangerouslySetInnerHTML: {
@@ -13166,7 +14270,7 @@ function WithdrawForm({
13166
14270
  }
13167
14271
  }
13168
14272
  ),
13169
- /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
14273
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
13170
14274
  "div",
13171
14275
  {
13172
14276
  className: "uf-flex uf-items-center uf-gap-2 uf-px-3 uf-py-2.5",
@@ -13176,7 +14280,7 @@ function WithdrawForm({
13176
14280
  border: `${components.input.borderWidth}px solid ${components.input.borderColor}`
13177
14281
  },
13178
14282
  children: [
13179
- /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
14283
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
13180
14284
  "input",
13181
14285
  {
13182
14286
  type: "text",
@@ -13197,8 +14301,8 @@ function WithdrawForm({
13197
14301
  }
13198
14302
  }
13199
14303
  ),
13200
- /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "uf-text-sm uf-shrink-0", style: { color: colors2.foregroundMuted, fontFamily: fonts.medium }, children: inputUnit === "crypto" ? tokenSymbol : "USD" }),
13201
- /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
14304
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "uf-text-sm uf-shrink-0", style: { color: colors2.foregroundMuted, fontFamily: fonts.medium }, children: inputUnit === "crypto" ? tokenSymbol : "USD" }),
14305
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
13202
14306
  "button",
13203
14307
  {
13204
14308
  type: "button",
@@ -13211,10 +14315,10 @@ function WithdrawForm({
13211
14315
  ]
13212
14316
  }
13213
14317
  ),
13214
- /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-mt-1.5 uf-px-3", children: [
13215
- /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
13216
- /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: convertedDisplay || (inputUnit === "crypto" ? "$0.00" : `0.00 ${tokenSymbol}`) }),
13217
- exchangeRate > 0 && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
14318
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-mt-1.5 uf-px-3", children: [
14319
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
14320
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: convertedDisplay || (inputUnit === "crypto" ? "$0.00" : `0.00 ${tokenSymbol}`) }),
14321
+ exchangeRate > 0 && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
13218
14322
  "button",
13219
14323
  {
13220
14324
  type: "button",
@@ -13222,49 +14326,49 @@ function WithdrawForm({
13222
14326
  className: "uf-p-0.5 uf-rounded uf-transition-colors hover:uf-opacity-70",
13223
14327
  style: { color: colors2.foregroundMuted },
13224
14328
  title: "Switch unit",
13225
- children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react24.ArrowUpDown, { className: "uf-w-3 uf-h-3" })
14329
+ children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react25.ArrowUpDown, { className: "uf-w-3 uf-h-3" })
13226
14330
  }
13227
14331
  )
13228
14332
  ] }),
13229
- /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { children: [
13230
- balanceDisplay && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: [
14333
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { children: [
14334
+ balanceDisplay && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: [
13231
14335
  t8.balance,
13232
14336
  ": ",
13233
14337
  balanceDisplay
13234
14338
  ] }),
13235
- isLoadingBalance && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "uf-h-3 uf-w-16 uf-bg-muted uf-rounded uf-animate-pulse" })
14339
+ isLoadingBalance && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "uf-h-3 uf-w-16 uf-bg-muted uf-rounded uf-animate-pulse" })
13236
14340
  ] })
13237
14341
  ] })
13238
14342
  ] }),
13239
- /* @__PURE__ */ (0, import_jsx_runtime53.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: [
13240
- /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
14343
+ /* @__PURE__ */ (0, import_jsx_runtime54.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: [
14344
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
13241
14345
  "button",
13242
14346
  {
13243
14347
  type: "button",
13244
14348
  onClick: () => setDetailsExpanded(!detailsExpanded),
13245
14349
  className: "uf-w-full uf-flex uf-items-center uf-justify-between uf-py-2.5",
13246
14350
  children: [
13247
- /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
13248
- /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react24.Clock, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
13249
- /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
14351
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
14352
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react25.Clock, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
14353
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
13250
14354
  tCrypto.processingTime.label,
13251
14355
  ":",
13252
14356
  " ",
13253
- /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: formatProcessingTime2(estimatedProcessingTime) })
14357
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: formatProcessingTime2(estimatedProcessingTime) })
13254
14358
  ] })
13255
14359
  ] }),
13256
- detailsExpanded ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react24.ChevronUp, { className: "uf-w-4 uf-h-4", style: { color: components.card.actionColor } }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react24.ChevronDown, { className: "uf-w-4 uf-h-4", style: { color: components.card.actionColor } })
14360
+ detailsExpanded ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react25.ChevronUp, { className: "uf-w-4 uf-h-4", style: { color: components.card.actionColor } }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react25.ChevronDown, { className: "uf-w-4 uf-h-4", style: { color: components.card.actionColor } })
13257
14361
  ]
13258
14362
  }
13259
14363
  ),
13260
- detailsExpanded && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "uf-pb-3 uf-space-y-2.5", children: [
13261
- /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
13262
- /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react24.ShieldCheck, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
13263
- /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
14364
+ detailsExpanded && /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-pb-3 uf-space-y-2.5", children: [
14365
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
14366
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react25.ShieldCheck, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
14367
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
13264
14368
  tCrypto.slippage.label,
13265
14369
  ":",
13266
14370
  " ",
13267
- /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: [
14371
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: [
13268
14372
  tCrypto.slippage.auto,
13269
14373
  " \u2022 ",
13270
14374
  (maxSlippagePercent ?? 0.25).toFixed(2),
@@ -13272,13 +14376,13 @@ function WithdrawForm({
13272
14376
  ] })
13273
14377
  ] })
13274
14378
  ] }),
13275
- /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
13276
- /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react24.DollarSign, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
13277
- /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
14379
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
14380
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react25.DollarSign, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
14381
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
13278
14382
  tCrypto.priceImpact.label,
13279
14383
  ":",
13280
14384
  " ",
13281
- /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: [
14385
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: [
13282
14386
  (priceImpactPercent ?? 0).toFixed(2),
13283
14387
  "%"
13284
14388
  ] })
@@ -13286,23 +14390,12 @@ function WithdrawForm({
13286
14390
  ] })
13287
14391
  ] })
13288
14392
  ] }),
13289
- !canWithdraw && !submitError && /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
13290
- "div",
13291
- {
13292
- className: "uf-flex uf-items-start uf-gap-2.5 uf-p-3 uf-rounded-xl",
13293
- style: { backgroundColor: colors2.card, border: `1px solid ${colors2.border}` },
13294
- children: [
13295
- /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react24.Wallet, { className: "uf-w-4 uf-h-4 uf-flex-shrink-0 uf-mt-0.5", style: { color: colors2.warning } }),
13296
- /* @__PURE__ */ (0, import_jsx_runtime53.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." })
13297
- ]
13298
- }
13299
- ),
13300
- isWalletMatch && connectedWalletName ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
14393
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
13301
14394
  "button",
13302
14395
  {
13303
14396
  type: "button",
13304
14397
  onClick: handleWithdraw,
13305
- disabled: !isFormValid || !canWithdraw || isSubmitting || !selectedToken || !selectedChain,
14398
+ disabled: !isFormValid || isSubmitting || !selectedToken || !selectedChain,
13306
14399
  className: "uf-w-full uf-py-3 uf-text-sm uf-font-medium uf-transition-colors disabled:uf-opacity-50 disabled:uf-cursor-not-allowed uf-flex uf-items-center uf-justify-center uf-gap-2",
13307
14400
  style: {
13308
14401
  backgroundColor: colors2.primary,
@@ -13311,40 +14404,20 @@ function WithdrawForm({
13311
14404
  borderRadius: components.button.borderRadius,
13312
14405
  border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
13313
14406
  },
13314
- children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
13315
- /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react24.Loader2, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
14407
+ children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
14408
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react25.Loader2, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
13316
14409
  "Processing..."
13317
- ] }) : isOverBalance ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_jsx_runtime53.Fragment, { children: "Insufficient balance" }) : isBelowMinimum ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_jsx_runtime53.Fragment, { children: "Minimum amount not met" }) : submitError ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_jsx_runtime53.Fragment, { children: "Withdrawal failed. Try again" }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_jsx_runtime53.Fragment, { children: [
13318
- /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react24.Wallet, { className: "uf-w-4 uf-h-4" }),
13319
- "Withdraw from ",
13320
- connectedWalletName
14410
+ ] }) : isOverBalance ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_jsx_runtime54.Fragment, { children: "Insufficient balance" }) : isBelowMinimum ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_jsx_runtime54.Fragment, { children: "Minimum amount not met" }) : submitError ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_jsx_runtime54.Fragment, { children: "Withdrawal failed. Try again" }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
14411
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(import_lucide_react25.Wallet, { className: "uf-w-4 uf-h-4" }),
14412
+ t8.withdraw
13321
14413
  ] })
13322
14414
  }
13323
- ) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
13324
- "button",
13325
- {
13326
- type: "button",
13327
- onClick: handleWithdraw,
13328
- disabled: !isFormValid || !canWithdraw || isSubmitting || !selectedToken || !selectedChain,
13329
- className: "uf-w-full uf-py-3 uf-text-sm uf-font-medium uf-transition-colors disabled:uf-opacity-50 disabled:uf-cursor-not-allowed",
13330
- style: {
13331
- backgroundColor: colors2.primary,
13332
- color: colors2.primaryForeground,
13333
- fontFamily: fonts.medium,
13334
- borderRadius: components.button.borderRadius,
13335
- border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
13336
- },
13337
- children: isSubmitting ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("span", { className: "uf-flex uf-items-center uf-justify-center uf-gap-2", children: [
13338
- /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_lucide_react24.Loader2, { className: "uf-w-4 uf-h-4 uf-animate-spin" }),
13339
- "Processing..."
13340
- ] }) : isOverBalance ? "Insufficient balance" : isBelowMinimum ? "Minimum amount not met" : submitError ? "Withdrawal failed. Try again" : t8.withdraw
13341
- }
13342
14415
  ),
13343
- /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-text-xs uf-pt-1", children: [
13344
- /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { children: footerLeft }),
13345
- /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(DepositFooterLinks, { onGlossaryClick: () => setGlossaryOpen(true) })
14416
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-flex uf-items-center uf-justify-between uf-text-xs uf-pt-1", children: [
14417
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { children: footerLeft }),
14418
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(DepositFooterLinks, { onGlossaryClick: () => setGlossaryOpen(true) })
13346
14419
  ] }),
13347
- /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
14420
+ /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
13348
14421
  GlossaryModal,
13349
14422
  {
13350
14423
  open: glossaryOpen,
@@ -13355,15 +14428,15 @@ function WithdrawForm({
13355
14428
  }
13356
14429
 
13357
14430
  // src/components/withdrawals/WithdrawExecutionItem.tsx
13358
- var import_lucide_react25 = require("lucide-react");
13359
- var import_core31 = require("@unifold/core");
13360
- var import_jsx_runtime54 = require("react/jsx-runtime");
14431
+ var import_lucide_react26 = require("lucide-react");
14432
+ var import_core34 = require("@unifold/core");
14433
+ var import_jsx_runtime55 = require("react/jsx-runtime");
13361
14434
  function WithdrawExecutionItem({
13362
14435
  execution,
13363
14436
  onClick
13364
14437
  }) {
13365
14438
  const { colors: colors2, fonts, components } = useTheme();
13366
- const isPending = execution.status === import_core31.ExecutionStatus.PENDING || execution.status === import_core31.ExecutionStatus.WAITING || execution.status === import_core31.ExecutionStatus.DELAYED;
14439
+ const isPending = execution.status === import_core34.ExecutionStatus.PENDING || execution.status === import_core34.ExecutionStatus.WAITING || execution.status === import_core34.ExecutionStatus.DELAYED;
13367
14440
  const formatDateTime = (timestamp) => {
13368
14441
  try {
13369
14442
  const date = new Date(timestamp);
@@ -13395,7 +14468,7 @@ function WithdrawExecutionItem({
13395
14468
  return "$0.00";
13396
14469
  }
13397
14470
  };
13398
- return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
14471
+ return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
13399
14472
  "button",
13400
14473
  {
13401
14474
  onClick,
@@ -13406,11 +14479,11 @@ function WithdrawExecutionItem({
13406
14479
  border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
13407
14480
  },
13408
14481
  children: [
13409
- /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-relative uf-flex-shrink-0 uf-w-9 uf-h-9", children: [
13410
- /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
14482
+ /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "uf-relative uf-flex-shrink-0 uf-w-9 uf-h-9", children: [
14483
+ /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
13411
14484
  "img",
13412
14485
  {
13413
- src: execution.destination_token_metadata?.icon_url || (0, import_core31.getIconUrl)("/icons/tokens/svg/usdc.svg"),
14486
+ src: execution.destination_token_metadata?.icon_url || (0, import_core34.getIconUrl)("/icons/tokens/svg/usdc.svg"),
13414
14487
  alt: "Token",
13415
14488
  width: 36,
13416
14489
  height: 36,
@@ -13418,12 +14491,12 @@ function WithdrawExecutionItem({
13418
14491
  className: "uf-rounded-full uf-w-9 uf-h-9"
13419
14492
  }
13420
14493
  ),
13421
- isPending ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
14494
+ isPending ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
13422
14495
  "div",
13423
14496
  {
13424
14497
  className: "uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-rounded-full uf-p-0.5",
13425
14498
  style: { backgroundColor: colors2.warning },
13426
- children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
14499
+ children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
13427
14500
  "svg",
13428
14501
  {
13429
14502
  width: "10",
@@ -13431,7 +14504,7 @@ function WithdrawExecutionItem({
13431
14504
  viewBox: "0 0 12 12",
13432
14505
  fill: "none",
13433
14506
  className: "uf-animate-spin uf-block",
13434
- children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
14507
+ children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
13435
14508
  "path",
13436
14509
  {
13437
14510
  d: "M6 1V3M6 9V11M1 6H3M9 6H11M2.5 2.5L4 4M8 8L9.5 9.5M2.5 9.5L4 8M8 4L9.5 2.5",
@@ -13443,12 +14516,12 @@ function WithdrawExecutionItem({
13443
14516
  }
13444
14517
  )
13445
14518
  }
13446
- ) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
14519
+ ) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
13447
14520
  "div",
13448
14521
  {
13449
14522
  className: "uf-absolute -uf-bottom-0.5 -uf-right-0.5 uf-rounded-full uf-p-0.5",
13450
14523
  style: { backgroundColor: colors2.success },
13451
- children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
14524
+ children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
13452
14525
  "svg",
13453
14526
  {
13454
14527
  width: "10",
@@ -13456,7 +14529,7 @@ function WithdrawExecutionItem({
13456
14529
  viewBox: "0 0 12 12",
13457
14530
  fill: "none",
13458
14531
  className: "uf-block",
13459
- children: /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
14532
+ children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
13460
14533
  "path",
13461
14534
  {
13462
14535
  d: "M10 3L4.5 8.5L2 6",
@@ -13471,8 +14544,8 @@ function WithdrawExecutionItem({
13471
14544
  }
13472
14545
  )
13473
14546
  ] }),
13474
- /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "uf-flex-1 uf-min-w-0", children: [
13475
- /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
14547
+ /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "uf-flex-1 uf-min-w-0", children: [
14548
+ /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
13476
14549
  "h3",
13477
14550
  {
13478
14551
  className: "uf-font-medium uf-text-sm uf-leading-tight",
@@ -13483,7 +14556,7 @@ function WithdrawExecutionItem({
13483
14556
  children: isPending ? "Withdrawal processing" : "Withdrawal completed"
13484
14557
  }
13485
14558
  ),
13486
- /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
14559
+ /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
13487
14560
  "p",
13488
14561
  {
13489
14562
  className: "uf-text-xs uf-leading-tight",
@@ -13495,7 +14568,7 @@ function WithdrawExecutionItem({
13495
14568
  }
13496
14569
  )
13497
14570
  ] }),
13498
- /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
14571
+ /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
13499
14572
  "span",
13500
14573
  {
13501
14574
  className: "uf-font-medium uf-text-sm uf-flex-shrink-0",
@@ -13506,8 +14579,8 @@ function WithdrawExecutionItem({
13506
14579
  children: formatUsdAmount2(execution.source_amount_usd || "0")
13507
14580
  }
13508
14581
  ),
13509
- /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
13510
- import_lucide_react25.ChevronRight,
14582
+ /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
14583
+ import_lucide_react26.ChevronRight,
13511
14584
  {
13512
14585
  className: "uf-w-4 uf-h-4 uf-flex-shrink-0",
13513
14586
  style: { color: components.card.actionColor }
@@ -13519,8 +14592,8 @@ function WithdrawExecutionItem({
13519
14592
  }
13520
14593
 
13521
14594
  // src/components/withdrawals/WithdrawConfirmingView.tsx
13522
- var import_react21 = require("react");
13523
- var import_jsx_runtime55 = require("react/jsx-runtime");
14595
+ var import_react22 = require("react");
14596
+ var import_jsx_runtime56 = require("react/jsx-runtime");
13524
14597
  function truncateAddress4(addr) {
13525
14598
  if (addr.length <= 12) return addr;
13526
14599
  return `${addr.slice(0, 6)}...${addr.slice(-4)}`;
@@ -13533,9 +14606,9 @@ function WithdrawConfirmingView({
13533
14606
  onViewTracker
13534
14607
  }) {
13535
14608
  const { colors: colors2, fonts, components } = useTheme();
13536
- const [showButton, setShowButton] = (0, import_react21.useState)(false);
14609
+ const [showButton, setShowButton] = (0, import_react22.useState)(false);
13537
14610
  const latestExecution = executions.length > 0 ? executions[executions.length - 1] : null;
13538
- (0, import_react21.useEffect)(() => {
14611
+ (0, import_react22.useEffect)(() => {
13539
14612
  if (latestExecution) return;
13540
14613
  const timer = setTimeout(() => setShowButton(true), SHOW_BUTTON_DELAY_MS);
13541
14614
  return () => clearTimeout(timer);
@@ -13543,11 +14616,11 @@ function WithdrawConfirmingView({
13543
14616
  const btnRadius = components.button.borderRadius;
13544
14617
  const btnBorder = `${components.button.borderWidth}px solid ${components.button.borderColor}`;
13545
14618
  if (latestExecution) {
13546
- return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
13547
- /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(DepositHeader, { title: "Withdrawal Details", showClose: true, onClose }),
13548
- /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(DepositDetailContent, { execution: latestExecution, variant: "withdraw" }),
13549
- /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "uf-flex uf-gap-2 uf-px-2 uf-pt-2", children: [
13550
- /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
14619
+ return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
14620
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DepositHeader, { title: "Withdrawal Details", showClose: true, onClose }),
14621
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DepositDetailContent, { execution: latestExecution, variant: "withdraw" }),
14622
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "uf-flex uf-gap-2 uf-px-2 uf-pt-2", children: [
14623
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
13551
14624
  "button",
13552
14625
  {
13553
14626
  type: "button",
@@ -13563,7 +14636,7 @@ function WithdrawConfirmingView({
13563
14636
  children: "Withdrawal History"
13564
14637
  }
13565
14638
  ),
13566
- /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
14639
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
13567
14640
  "button",
13568
14641
  {
13569
14642
  type: "button",
@@ -13580,7 +14653,7 @@ function WithdrawConfirmingView({
13580
14653
  }
13581
14654
  )
13582
14655
  ] }),
13583
- /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
14656
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
13584
14657
  PoweredByUnifold,
13585
14658
  {
13586
14659
  color: colors2.foregroundMuted,
@@ -13589,15 +14662,15 @@ function WithdrawConfirmingView({
13589
14662
  ) })
13590
14663
  ] });
13591
14664
  }
13592
- return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
13593
- /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(DepositHeader, { title: "Withdrawal Status", showClose: true, onClose }),
13594
- /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-16 uf-px-4", children: [
13595
- /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
14665
+ return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
14666
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DepositHeader, { title: "Withdrawal Status", showClose: true, onClose }),
14667
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-16 uf-px-4", children: [
14668
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
13596
14669
  "div",
13597
14670
  {
13598
14671
  className: "uf-w-20 uf-h-20 uf-rounded-full uf-flex uf-items-center uf-justify-center uf-mb-6",
13599
14672
  style: { backgroundColor: `${colors2.primary}20` },
13600
- children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
14673
+ children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
13601
14674
  "svg",
13602
14675
  {
13603
14676
  width: "40",
@@ -13605,7 +14678,7 @@ function WithdrawConfirmingView({
13605
14678
  viewBox: "0 0 24 24",
13606
14679
  fill: "none",
13607
14680
  className: "uf-animate-spin",
13608
- children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
14681
+ children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
13609
14682
  "path",
13610
14683
  {
13611
14684
  d: "M21 12a9 9 0 1 1-6.22-8.56",
@@ -13618,7 +14691,7 @@ function WithdrawConfirmingView({
13618
14691
  )
13619
14692
  }
13620
14693
  ),
13621
- /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
14694
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
13622
14695
  "h3",
13623
14696
  {
13624
14697
  className: "uf-text-xl uf-mb-2",
@@ -13626,7 +14699,7 @@ function WithdrawConfirmingView({
13626
14699
  children: "Checking Withdrawal"
13627
14700
  }
13628
14701
  ),
13629
- /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
14702
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
13630
14703
  "p",
13631
14704
  {
13632
14705
  className: "uf-text-sm uf-text-center",
@@ -13642,7 +14715,7 @@ function WithdrawConfirmingView({
13642
14715
  }
13643
14716
  )
13644
14717
  ] }),
13645
- showButton && /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "uf-px-1 uf-pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
14718
+ showButton && /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "uf-px-1 uf-pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
13646
14719
  "button",
13647
14720
  {
13648
14721
  type: "button",
@@ -13658,7 +14731,7 @@ function WithdrawConfirmingView({
13658
14731
  children: "Withdrawal History"
13659
14732
  }
13660
14733
  ) }),
13661
- /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
14734
+ /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
13662
14735
  PoweredByUnifold,
13663
14736
  {
13664
14737
  color: colors2.foregroundMuted,
@@ -13669,8 +14742,8 @@ function WithdrawConfirmingView({
13669
14742
  }
13670
14743
 
13671
14744
  // src/components/withdrawals/WithdrawModal.tsx
13672
- var import_core32 = require("@unifold/core");
13673
- var import_jsx_runtime56 = require("react/jsx-runtime");
14745
+ var import_core35 = require("@unifold/core");
14746
+ var import_jsx_runtime57 = require("react/jsx-runtime");
13674
14747
  var t9 = i18n.withdrawModal;
13675
14748
  var getChainKey5 = (chainId, chainType) => `${chainType}:${chainId}`;
13676
14749
  function WithdrawModal({
@@ -13692,14 +14765,14 @@ function WithdrawModal({
13692
14765
  hideOverlay = false
13693
14766
  }) {
13694
14767
  const { colors: colors2, fonts, components } = useTheme();
13695
- const [containerEl, setContainerEl] = (0, import_react22.useState)(null);
13696
- const containerCallbackRef = (0, import_react22.useCallback)((el) => {
14768
+ const [containerEl, setContainerEl] = (0, import_react23.useState)(null);
14769
+ const containerCallbackRef = (0, import_react23.useCallback)((el) => {
13697
14770
  setContainerEl(el);
13698
14771
  }, []);
13699
- const [resolvedTheme, setResolvedTheme] = (0, import_react22.useState)(
14772
+ const [resolvedTheme, setResolvedTheme] = (0, import_react23.useState)(
13700
14773
  theme === "auto" ? "dark" : theme
13701
14774
  );
13702
- (0, import_react22.useEffect)(() => {
14775
+ (0, import_react23.useEffect)(() => {
13703
14776
  if (theme === "auto") {
13704
14777
  const mq = window.matchMedia("(prefers-color-scheme: dark)");
13705
14778
  setResolvedTheme(mq.matches ? "dark" : "light");
@@ -13728,28 +14801,12 @@ function WithdrawModal({
13728
14801
  publishableKey,
13729
14802
  enabled: open
13730
14803
  });
13731
- const [selectedToken, setSelectedToken] = (0, import_react22.useState)(null);
13732
- const [selectedChain, setSelectedChain] = (0, import_react22.useState)(null);
13733
- const [detectedWallet, setDetectedWallet] = (0, import_react22.useState)(null);
13734
- const connectedWalletName = detectedWallet?.name ?? null;
13735
- const isWalletMatch = !!detectedWallet;
13736
- (0, import_react22.useEffect)(() => {
13737
- if (!senderAddress || !open) {
13738
- setDetectedWallet(null);
13739
- return;
13740
- }
13741
- let cancelled = false;
13742
- detectBrowserWallet(sourceChainType, senderAddress).then((wallet) => {
13743
- if (!cancelled) setDetectedWallet(wallet);
13744
- });
13745
- return () => {
13746
- cancelled = true;
13747
- };
13748
- }, [senderAddress, sourceChainType, open]);
13749
- const [view, setView] = (0, import_react22.useState)("form");
13750
- const [withdrawDepositWalletId, setWithdrawDepositWalletId] = (0, import_react22.useState)();
13751
- const [selectedExecution, setSelectedExecution] = (0, import_react22.useState)(null);
13752
- const [submittedTxInfo, setSubmittedTxInfo] = (0, import_react22.useState)(null);
14804
+ const [selectedToken, setSelectedToken] = (0, import_react23.useState)(null);
14805
+ const [selectedChain, setSelectedChain] = (0, import_react23.useState)(null);
14806
+ const [view, setView] = (0, import_react23.useState)("form");
14807
+ const [withdrawDepositWalletId, setWithdrawDepositWalletId] = (0, import_react23.useState)();
14808
+ const [selectedExecution, setSelectedExecution] = (0, import_react23.useState)(null);
14809
+ const [submittedTxInfo, setSubmittedTxInfo] = (0, import_react23.useState)(null);
13753
14810
  const { executions: realtimeExecutions } = useWithdrawPolling({
13754
14811
  userId: externalUserId,
13755
14812
  publishableKey,
@@ -13759,35 +14816,35 @@ function WithdrawModal({
13759
14816
  onWithdrawError
13760
14817
  });
13761
14818
  const { data: allWithdrawalsData } = useExecutions(externalUserId, publishableKey, {
13762
- actionType: import_core32.ActionType.Withdraw,
14819
+ actionType: import_core35.ActionType.Withdraw,
13763
14820
  enabled: open,
13764
14821
  refetchInterval: view === "tracker" || view === "detail" ? 5e3 : 15e3
13765
14822
  });
13766
14823
  const allWithdrawals = allWithdrawalsData?.data ?? [];
13767
- const handleDepositWalletCreation = (0, import_react22.useCallback)(async (params) => {
13768
- const { data: wallets } = await (0, import_core32.createDepositAddress)(
14824
+ const handleDepositWalletCreation = (0, import_react23.useCallback)(async (params) => {
14825
+ const { data: wallets } = await (0, import_core35.createDepositAddress)(
13769
14826
  {
13770
14827
  external_user_id: externalUserId,
13771
14828
  destination_chain_type: params.destinationChainType,
13772
14829
  destination_chain_id: params.destinationChainId,
13773
14830
  destination_token_address: params.destinationTokenAddress,
13774
14831
  recipient_address: params.recipientAddress,
13775
- action_type: import_core32.ActionType.Withdraw
14832
+ action_type: import_core35.ActionType.Withdraw
13776
14833
  },
13777
14834
  publishableKey
13778
14835
  );
13779
- const depositWallet = (0, import_core32.getWalletByChainType)(wallets, sourceChainType);
14836
+ const depositWallet = (0, import_core35.getWalletByChainType)(wallets, sourceChainType);
13780
14837
  if (!depositWallet) {
13781
14838
  throw new Error(`No deposit wallet available for ${sourceChainType}`);
13782
14839
  }
13783
14840
  setWithdrawDepositWalletId(depositWallet.id);
13784
14841
  return depositWallet;
13785
14842
  }, [externalUserId, publishableKey, sourceChainType]);
13786
- const handleWithdrawSubmitted = (0, import_react22.useCallback)((txInfo) => {
14843
+ const handleWithdrawSubmitted = (0, import_react23.useCallback)((txInfo) => {
13787
14844
  setSubmittedTxInfo(txInfo);
13788
14845
  setView("confirming");
13789
14846
  }, []);
13790
- (0, import_react22.useEffect)(() => {
14847
+ (0, import_react23.useEffect)(() => {
13791
14848
  if (!destinationTokens.length || selectedToken) return;
13792
14849
  const first = destinationTokens[0];
13793
14850
  if (first?.chains.length > 0) {
@@ -13795,8 +14852,8 @@ function WithdrawModal({
13795
14852
  setSelectedChain(first.chains[0]);
13796
14853
  }
13797
14854
  }, [destinationTokens, selectedToken]);
13798
- const resetViewTimeoutRef = (0, import_react22.useRef)(null);
13799
- const handleClose = (0, import_react22.useCallback)(() => {
14855
+ const resetViewTimeoutRef = (0, import_react23.useRef)(null);
14856
+ const handleClose = (0, import_react23.useCallback)(() => {
13800
14857
  onOpenChange(false);
13801
14858
  if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
13802
14859
  resetViewTimeoutRef.current = setTimeout(() => {
@@ -13809,7 +14866,7 @@ function WithdrawModal({
13809
14866
  resetViewTimeoutRef.current = null;
13810
14867
  }, 200);
13811
14868
  }, [onOpenChange]);
13812
- (0, import_react22.useLayoutEffect)(() => {
14869
+ (0, import_react23.useLayoutEffect)(() => {
13813
14870
  if (!open) return;
13814
14871
  if (resetViewTimeoutRef.current) {
13815
14872
  clearTimeout(resetViewTimeoutRef.current);
@@ -13822,26 +14879,25 @@ function WithdrawModal({
13822
14879
  setSubmittedTxInfo(null);
13823
14880
  setWithdrawDepositWalletId(void 0);
13824
14881
  }, [open]);
13825
- (0, import_react22.useEffect)(() => () => {
14882
+ (0, import_react23.useEffect)(() => () => {
13826
14883
  if (resetViewTimeoutRef.current) clearTimeout(resetViewTimeoutRef.current);
13827
14884
  }, []);
13828
- const handleTokenSymbolChange = (0, import_react22.useCallback)((symbol) => {
14885
+ const handleTokenSymbolChange = (0, import_react23.useCallback)((symbol) => {
13829
14886
  const tok = destinationTokens.find((t11) => t11.symbol === symbol);
13830
14887
  if (tok) {
13831
14888
  setSelectedToken(tok);
13832
14889
  if (tok.chains.length > 0) setSelectedChain(tok.chains[0]);
13833
14890
  }
13834
14891
  }, [destinationTokens]);
13835
- const handleChainKeyChange = (0, import_react22.useCallback)((chainKey) => {
14892
+ const handleChainKeyChange = (0, import_react23.useCallback)((chainKey) => {
13836
14893
  if (!selectedToken) return;
13837
14894
  const chain = selectedToken.chains.find((c) => getChainKey5(c.chain_id, c.chain_type) === chainKey);
13838
14895
  if (chain) setSelectedChain(chain);
13839
14896
  }, [selectedToken]);
13840
14897
  const isSourceSupported = sourceValidation?.isSupported ?? null;
13841
- const canWithdraw = !!onWithdraw || isWalletMatch;
13842
14898
  const isAnyLoading = tokensLoading || isCheckingSourceToken;
13843
- const withdrawPoweredByFooter = /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(PoweredByUnifold, { color: colors2.foregroundMuted, className: "uf-flex uf-justify-center uf-shrink-0" }) });
13844
- return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(PortalContainerProvider, { value: hideOverlay ? containerEl : null, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Dialog, { open: hideOverlay || open, onOpenChange: hideOverlay ? void 0 : handleClose, modal: !hideOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
14899
+ const withdrawPoweredByFooter = /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "uf-pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(PoweredByUnifold, { color: colors2.foregroundMuted, className: "uf-flex uf-justify-center uf-shrink-0" }) });
14900
+ return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(PortalContainerProvider, { value: hideOverlay ? containerEl : null, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Dialog, { open: hideOverlay || open, onOpenChange: hideOverlay ? void 0 : handleClose, modal: !hideOverlay, children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
13845
14901
  DialogContent,
13846
14902
  {
13847
14903
  ref: hideOverlay ? containerCallbackRef : void 0,
@@ -13850,7 +14906,7 @@ function WithdrawModal({
13850
14906
  style: { backgroundColor: colors2.background },
13851
14907
  onPointerDownOutside: (e) => e.preventDefault(),
13852
14908
  onInteractOutside: (e) => e.preventDefault(),
13853
- children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ThemeStyleInjector, { children: view === "confirming" && submittedTxInfo ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
14909
+ children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(ThemeStyleInjector, { children: view === "confirming" && submittedTxInfo ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
13854
14910
  WithdrawConfirmingView,
13855
14911
  {
13856
14912
  txInfo: submittedTxInfo,
@@ -13858,18 +14914,18 @@ function WithdrawModal({
13858
14914
  onClose: handleClose,
13859
14915
  onViewTracker: () => setView("tracker")
13860
14916
  }
13861
- ) : view === "detail" && selectedExecution ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
13862
- /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DepositHeader, { title: "Withdrawal Details", showBack: true, showClose: !hideOverlay, onBack: () => {
14917
+ ) : view === "detail" && selectedExecution ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
14918
+ /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DepositHeader, { title: "Withdrawal Details", showBack: true, showClose: !hideOverlay, onBack: () => {
13863
14919
  setSelectedExecution(null);
13864
14920
  setView("tracker");
13865
14921
  }, onClose: handleClose }),
13866
- /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DepositDetailContent, { execution: selectedExecution, variant: "withdraw" }),
14922
+ /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DepositDetailContent, { execution: selectedExecution, variant: "withdraw" }),
13867
14923
  withdrawPoweredByFooter
13868
14924
  ] }) : view === "tracker" ? (
13869
14925
  /* ---------- Tracker view: execution list ---------- */
13870
- /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
13871
- /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DepositHeader, { title: "Withdrawal History", showBack: true, showClose: !hideOverlay, onBack: () => setView("form"), onClose: handleClose }),
13872
- /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "uf-flex uf-flex-col uf-gap-2", style: { minHeight: 200 }, children: allWithdrawals.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "uf-flex uf-items-center uf-justify-center uf-py-8", children: /* @__PURE__ */ (0, import_jsx_runtime56.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_runtime56.jsx)(
14926
+ /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
14927
+ /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DepositHeader, { title: "Withdrawal History", showBack: true, showClose: !hideOverlay, onBack: () => setView("form"), onClose: handleClose }),
14928
+ /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "uf-h-[460px] uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "uf-flex uf-flex-col uf-gap-2", children: allWithdrawals.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "uf-flex uf-items-center uf-justify-center uf-py-8", children: /* @__PURE__ */ (0, import_jsx_runtime57.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_runtime57.jsx)(
13873
14929
  WithdrawExecutionItem,
13874
14930
  {
13875
14931
  execution: ex,
@@ -13879,20 +14935,20 @@ function WithdrawModal({
13879
14935
  }
13880
14936
  },
13881
14937
  ex.id
13882
- )) }),
14938
+ )) }) }),
13883
14939
  withdrawPoweredByFooter
13884
14940
  ] })
13885
14941
  ) : (
13886
14942
  /* ---------- Form view (default) ---------- */
13887
- /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
13888
- /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(DepositHeader, { title: modalTitle || t9.title, showClose: !hideOverlay, onClose: handleClose }),
13889
- /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-3", children: [
13890
- isAnyLoading ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { className: "uf-space-y-3", children: [1, 2, 3].map((i) => /* @__PURE__ */ (0, import_jsx_runtime56.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_runtime56.jsx)("div", { className: "uf-bg-muted uf-rounded-lg uf-w-full uf-h-10" }) }, i)) }) : isSourceSupported === false ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
13891
- /* @__PURE__ */ (0, import_jsx_runtime56.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_runtime56.jsx)(import_lucide_react26.AlertTriangle, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
13892
- /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-mb-2", style: { color: colors2.foreground, fontFamily: fonts.medium }, children: "Unsupported Source Token" }),
13893
- /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("p", { className: "uf-text-sm uf-max-w-[280px]", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: sourceValidation?.errorMessage })
13894
- ] }) : /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
13895
- /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
14943
+ /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
14944
+ /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(DepositHeader, { title: modalTitle || t9.title, showClose: !hideOverlay, onClose: handleClose }),
14945
+ /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-3", children: [
14946
+ isAnyLoading ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "uf-space-y-3", children: [1, 2, 3].map((i) => /* @__PURE__ */ (0, import_jsx_runtime57.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_runtime57.jsx)("div", { className: "uf-bg-muted uf-rounded-lg uf-w-full uf-h-10" }) }, i)) }) : isSourceSupported === false ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "uf-flex uf-flex-col uf-items-center uf-justify-center uf-py-8 uf-px-4 uf-text-center", children: [
14947
+ /* @__PURE__ */ (0, import_jsx_runtime57.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_runtime57.jsx)(import_lucide_react27.AlertTriangle, { className: "uf-w-8 uf-h-8 uf-text-muted-foreground" }) }),
14948
+ /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("h3", { className: "uf-text-lg uf-font-semibold uf-mb-2", style: { color: colors2.foreground, fontFamily: fonts.medium }, children: "Unsupported Source Token" }),
14949
+ /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("p", { className: "uf-text-sm uf-max-w-[280px]", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: sourceValidation?.errorMessage })
14950
+ ] }) : /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(import_jsx_runtime57.Fragment, { children: [
14951
+ /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
13896
14952
  WithdrawDoubleInput,
13897
14953
  {
13898
14954
  tokens: destinationTokens,
@@ -13903,7 +14959,7 @@ function WithdrawModal({
13903
14959
  isLoading: tokensLoading
13904
14960
  }
13905
14961
  ),
13906
- /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
14962
+ /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
13907
14963
  WithdrawForm,
13908
14964
  {
13909
14965
  publishableKey,
@@ -13919,26 +14975,23 @@ function WithdrawModal({
13919
14975
  estimatedProcessingTime: sourceValidation?.estimatedProcessingTime ?? null,
13920
14976
  maxSlippagePercent: sourceValidation?.maxSlippagePercent ?? null,
13921
14977
  priceImpactPercent: sourceValidation?.priceImpactPercent ?? null,
13922
- detectedWallet,
14978
+ senderAddress,
13923
14979
  sourceChainId,
13924
14980
  sourceTokenAddress,
13925
- isWalletMatch,
13926
- connectedWalletName,
13927
- canWithdraw,
13928
14981
  onWithdraw,
13929
14982
  onWithdrawError,
13930
14983
  onDepositWalletCreation: handleDepositWalletCreation,
13931
14984
  onWithdrawSubmitted: handleWithdrawSubmitted,
13932
- footerLeft: /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
14985
+ footerLeft: /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
13933
14986
  "button",
13934
14987
  {
13935
14988
  onClick: () => setView("tracker"),
13936
14989
  className: "uf-flex uf-items-center uf-gap-1 uf-transition-colors hover:uf-opacity-70",
13937
14990
  style: { color: colors2.foregroundMuted },
13938
14991
  children: [
13939
- /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react26.Clock, { className: "uf-w-3.5 uf-h-3.5" }),
14992
+ /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react27.Clock, { className: "uf-w-3.5 uf-h-3.5" }),
13940
14993
  "Withdrawal History",
13941
- /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(import_lucide_react26.ChevronRight, { className: "uf-w-3 uf-h-3" })
14994
+ /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(import_lucide_react27.ChevronRight, { className: "uf-w-3 uf-h-3" })
13942
14995
  ]
13943
14996
  }
13944
14997
  )
@@ -13954,9 +15007,9 @@ function WithdrawModal({
13954
15007
  }
13955
15008
 
13956
15009
  // src/components/withdrawals/WithdrawTokenSelector.tsx
13957
- var import_react23 = require("react");
13958
- var import_lucide_react27 = require("lucide-react");
13959
- var import_jsx_runtime57 = require("react/jsx-runtime");
15010
+ var import_react24 = require("react");
15011
+ var import_lucide_react28 = require("lucide-react");
15012
+ var import_jsx_runtime58 = require("react/jsx-runtime");
13960
15013
  var t10 = i18n.withdrawModal;
13961
15014
  function WithdrawTokenSelector({
13962
15015
  tokens,
@@ -13964,9 +15017,9 @@ function WithdrawTokenSelector({
13964
15017
  onBack
13965
15018
  }) {
13966
15019
  const { themeClass, colors: colors2, fonts, components } = useTheme();
13967
- const [searchQuery, setSearchQuery] = (0, import_react23.useState)("");
13968
- const [hoveredKey, setHoveredKey] = (0, import_react23.useState)(null);
13969
- const allOptions = (0, import_react23.useMemo)(() => {
15020
+ const [searchQuery, setSearchQuery] = (0, import_react24.useState)("");
15021
+ const [hoveredKey, setHoveredKey] = (0, import_react24.useState)(null);
15022
+ const allOptions = (0, import_react24.useMemo)(() => {
13970
15023
  const options = [];
13971
15024
  tokens.forEach((token) => {
13972
15025
  token.chains.forEach((chain) => {
@@ -13975,21 +15028,21 @@ function WithdrawTokenSelector({
13975
15028
  });
13976
15029
  return options;
13977
15030
  }, [tokens]);
13978
- const filteredOptions = (0, import_react23.useMemo)(() => {
15031
+ const filteredOptions = (0, import_react24.useMemo)(() => {
13979
15032
  if (!searchQuery.trim()) return allOptions;
13980
15033
  const query = searchQuery.toLowerCase();
13981
15034
  return allOptions.filter(
13982
15035
  ({ token, chain }) => token.symbol.toLowerCase().includes(query) || token.name.toLowerCase().includes(query) || chain.chain_name.toLowerCase().includes(query)
13983
15036
  );
13984
15037
  }, [allOptions, searchQuery]);
13985
- return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
15038
+ return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
13986
15039
  "div",
13987
15040
  {
13988
15041
  className: "uf-flex uf-flex-col",
13989
15042
  style: { minHeight: 0, flex: 1 },
13990
15043
  children: [
13991
- /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "uf-pb-3", children: [
13992
- /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
15044
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: "uf-pb-3", children: [
15045
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
13993
15046
  "style",
13994
15047
  {
13995
15048
  dangerouslySetInnerHTML: {
@@ -13997,15 +15050,15 @@ function WithdrawTokenSelector({
13997
15050
  }
13998
15051
  }
13999
15052
  ),
14000
- /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { style: { position: "relative" }, children: [
14001
- /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
14002
- import_lucide_react27.Search,
15053
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { style: { position: "relative" }, children: [
15054
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
15055
+ import_lucide_react28.Search,
14003
15056
  {
14004
15057
  className: "uf-absolute uf-left-3 uf-top-1/2 uf--translate-y-1/2 uf-w-4 uf-h-4",
14005
15058
  style: { color: components.search.placeholderColor }
14006
15059
  }
14007
15060
  ),
14008
- /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
15061
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
14009
15062
  "input",
14010
15063
  {
14011
15064
  type: "text",
@@ -14024,7 +15077,7 @@ function WithdrawTokenSelector({
14024
15077
  )
14025
15078
  ] })
14026
15079
  ] }),
14027
- /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
15080
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
14028
15081
  "div",
14029
15082
  {
14030
15083
  className: "uf-text-xs uf-mb-2",
@@ -14035,12 +15088,12 @@ function WithdrawTokenSelector({
14035
15088
  children: t10.selectToken
14036
15089
  }
14037
15090
  ),
14038
- /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
15091
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
14039
15092
  "div",
14040
15093
  {
14041
15094
  className: "uf-flex-1 uf-overflow-y-auto uf-min-h-0 uf--mx-6 uf-px-6 uf-pb-3",
14042
15095
  style: { scrollbarWidth: "none" },
14043
- children: filteredOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
15096
+ children: filteredOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
14044
15097
  "div",
14045
15098
  {
14046
15099
  style: {
@@ -14052,9 +15105,9 @@ function WithdrawTokenSelector({
14052
15105
  },
14053
15106
  children: t10.noTokensAvailable
14054
15107
  }
14055
- ) : /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: filteredOptions.map(({ token, chain }) => {
15108
+ ) : /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { style: { display: "flex", flexDirection: "column", gap: 4 }, children: filteredOptions.map(({ token, chain }) => {
14056
15109
  const key = `${token.symbol}-${chain.chain_type}:${chain.chain_id}`;
14057
- return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
15110
+ return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
14058
15111
  "button",
14059
15112
  {
14060
15113
  type: "button",
@@ -14075,8 +15128,8 @@ function WithdrawTokenSelector({
14075
15128
  backgroundColor: hoveredKey === key ? colors2.cardHover : "transparent"
14076
15129
  },
14077
15130
  children: [
14078
- /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { style: { position: "relative", flexShrink: 0 }, children: [
14079
- /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
15131
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { style: { position: "relative", flexShrink: 0 }, children: [
15132
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
14080
15133
  "img",
14081
15134
  {
14082
15135
  src: token.icon_url,
@@ -14087,7 +15140,7 @@ function WithdrawTokenSelector({
14087
15140
  className: "uf-rounded-full"
14088
15141
  }
14089
15142
  ),
14090
- /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
15143
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
14091
15144
  "div",
14092
15145
  {
14093
15146
  style: {
@@ -14095,7 +15148,7 @@ function WithdrawTokenSelector({
14095
15148
  bottom: -4,
14096
15149
  right: -4
14097
15150
  },
14098
- children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
15151
+ children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
14099
15152
  "img",
14100
15153
  {
14101
15154
  src: chain.icon_url,
@@ -14109,8 +15162,8 @@ function WithdrawTokenSelector({
14109
15162
  }
14110
15163
  )
14111
15164
  ] }),
14112
- /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
14113
- /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
15165
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
15166
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
14114
15167
  "div",
14115
15168
  {
14116
15169
  style: {
@@ -14122,7 +15175,7 @@ function WithdrawTokenSelector({
14122
15175
  children: token.symbol
14123
15176
  }
14124
15177
  ),
14125
- /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)(
15178
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
14126
15179
  "div",
14127
15180
  {
14128
15181
  style: {
@@ -14145,7 +15198,7 @@ function WithdrawTokenSelector({
14145
15198
  }) })
14146
15199
  }
14147
15200
  ),
14148
- /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("div", { className: "uf-pt-3 uf-pb-2 uf-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
15201
+ /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "uf-pt-3 uf-pb-2 uf-shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
14149
15202
  PoweredByUnifold,
14150
15203
  {
14151
15204
  color: colors2.foregroundMuted,
@@ -14160,6 +15213,7 @@ function WithdrawTokenSelector({
14160
15213
  0 && (module.exports = {
14161
15214
  Button,
14162
15215
  BuyWithCard,
15216
+ CheckoutModal,
14163
15217
  ConfirmingView,
14164
15218
  CurrencyListItem,
14165
15219
  CurrencyListSection,
@@ -14183,6 +15237,7 @@ function WithdrawTokenSelector({
14183
15237
  DialogPortal,
14184
15238
  DialogTitle,
14185
15239
  DialogTrigger,
15240
+ HYPERCORE_CHAIN_ID,
14186
15241
  Select,
14187
15242
  SelectContent,
14188
15243
  SelectGroup,
@@ -14214,14 +15269,18 @@ function WithdrawTokenSelector({
14214
15269
  defaultColors,
14215
15270
  detectBrowserWallet,
14216
15271
  getColors,
15272
+ isHypercoreChain,
14217
15273
  mergeColors,
14218
15274
  resolveComponentTokens,
14219
15275
  sendEvmWithdraw,
15276
+ sendHypercoreWithdraw,
14220
15277
  sendSolanaWithdraw,
14221
15278
  truncateAddress,
14222
15279
  useAddressBalance,
14223
15280
  useAllowedCountry,
14224
15281
  useDepositPolling,
15282
+ useDepositQuote,
15283
+ usePaymentIntent,
14225
15284
  useSourceTokenValidation,
14226
15285
  useSupportedDestinationTokens,
14227
15286
  useTheme,