@unifold/ui-react 0.1.56 → 0.1.57

package/dist/index.mjs

@@ -5,7 +5,7 @@ import {
   useLayoutEffect as useLayoutEffect2,
   useCallback as useCallback6,
   useRef as useRef8,
-  useMemo as useMemo9
+  useMemo as useMemo10
 } from "react";
 import { ChevronRight as ChevronRight14, MapPinOff, AlertTriangle as AlertTriangle2 } from "lucide-react";
 
@@ -1431,7 +1431,8 @@ var en_default = {
       title: "Transfer Failed",
       tryAgain: "Try Again"
     },
-    continue: "Continue"
+    continue: "Continue",
+    disconnect: "Disconnect"
   },
   buyWithCard: {
     onramp: {
@@ -4786,6 +4787,7 @@ import { Link2, ChevronRight as ChevronRight7 } from "lucide-react";
 import { jsx as jsx19, jsxs as jsxs16 } from "react/jsx-runtime";
 function ConnectExchangeButton({
   onClick,
+  onDisconnect,
   title,
   subtitle,
   exchanges,
@@ -4798,6 +4800,109 @@ function ConnectExchangeButton({
     setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
   }, []);
   const isConnected = connectedExchange != null;
+  const handleDisconnectClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    onDisconnect?.();
+  };
+  const rowSurfaceStyle = {
+    backgroundColor: isHovered ? colors2.cardHover : components.card.backgroundColor,
+    borderRadius: components.card.borderRadius,
+    border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
+  };
+  const iconBlock = isConnected ? connectedExchange.iconUrl ? /* @__PURE__ */ jsx19(
+    "img",
+    {
+      src: connectedExchange.iconUrl,
+      alt: connectedExchange.name,
+      width: 36,
+      height: 36,
+      className: "uf-rounded-lg"
+    }
+  ) : /* @__PURE__ */ jsx19(
+    "div",
+    {
+      className: "uf-w-9 uf-h-9 uf-rounded-lg uf-flex uf-items-center uf-justify-center",
+      style: { backgroundColor: colors2.card },
+      children: /* @__PURE__ */ jsx19(
+        "span",
+        {
+          className: "uf-text-xs uf-font-medium",
+          style: { color: components.card.iconColor },
+          children: connectedExchange.name.slice(0, 2).toUpperCase()
+        }
+      )
+    }
+  ) : /* @__PURE__ */ jsx19("div", { className: "uf-rounded-lg uf-p-2", children: /* @__PURE__ */ jsx19(
+    Link2,
+    {
+      className: "uf-w-5 uf-h-5",
+      style: { color: components.card.iconColor }
+    }
+  ) });
+  const titleSubtitleBlock = /* @__PURE__ */ jsxs16("div", { className: "uf-text-left", children: [
+    /* @__PURE__ */ jsx19(
+      "div",
+      {
+        className: "uf-text-sm uf-font-light uf-mb-0.5",
+        style: {
+          color: components.card.titleColor,
+          fontFamily: fonts.regular
+        },
+        children: isConnected ? connectedExchange.name : title
+      }
+    ),
+    isConnected && connectedExchange.isLoading ? /* @__PURE__ */ jsx19("div", { className: "uf-h-3 uf-w-24 uf-bg-muted uf-rounded uf-animate-pulse" }) : /* @__PURE__ */ jsx19(
+      "div",
+      {
+        className: "uf-text-xs uf-font-light",
+        style: {
+          color: components.card.subtitleColor,
+          fontFamily: fonts.regular
+        },
+        children: isConnected ? connectedExchange.balanceUsd ? `$${connectedExchange.balanceUsd} \u2022 2 min` : "Deposit from exchange" : subtitle
+      }
+    )
+  ] });
+  if (isConnected && onDisconnect) {
+    return /* @__PURE__ */ jsxs16(
+      "div",
+      {
+        onMouseEnter: () => !isTouchDevice && setIsHovered(true),
+        onMouseLeave: () => setIsHovered(false),
+        onTouchStart: () => setIsHovered(false),
+        className: "uf-w-full uf-transition-colors uf-flex uf-items-stretch uf-group",
+        style: rowSurfaceStyle,
+        children: [
+          /* @__PURE__ */ jsxs16(
+            "button",
+            {
+              type: "button",
+              onClick,
+              className: "uf-min-w-0 uf-flex-1 uf-flex uf-items-center uf-gap-3 uf-p-3 uf-pr-1 uf-text-left uf-border-0 uf-bg-transparent hover:uf-bg-transparent",
+              children: [
+                iconBlock,
+                titleSubtitleBlock
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx19("div", { className: "uf-flex uf-items-center uf-gap-1 uf-shrink-0 uf-pr-2 uf-pl-0", children: /* @__PURE__ */ jsx19(
+            "button",
+            {
+              type: "button",
+              onClick: handleDisconnectClick,
+              className: "uf-h-auto uf-min-h-8 uf-py-1.5 uf-px-2 uf-text-xs uf-font-light uf-shrink-0 uf-border-0 uf-bg-transparent uf-cursor-pointer hover:uf-opacity-80 uf-transition-opacity",
+              style: {
+                color: colors2.error,
+                fontFamily: fonts.regular
+              },
+              children: i18n.connectExchange.disconnect
+            }
+          ) })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ jsxs16(
     "button",
     {
@@ -4806,67 +4911,11 @@ function ConnectExchangeButton({
       onMouseLeave: () => setIsHovered(false),
       onTouchStart: () => setIsHovered(false),
       className: "uf-w-full uf-transition-colors uf-p-3 uf-flex uf-items-center uf-justify-between uf-group",
-      style: {
-        backgroundColor: isHovered ? colors2.cardHover : components.card.backgroundColor,
-        borderRadius: components.card.borderRadius,
-        border: `${components.card.borderWidth}px solid ${components.card.borderColor}`
-      },
+      style: rowSurfaceStyle,
       children: [
         /* @__PURE__ */ jsxs16("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
-          isConnected ? connectedExchange.iconUrl ? /* @__PURE__ */ jsx19(
-            "img",
-            {
-              src: connectedExchange.iconUrl,
-              alt: connectedExchange.name,
-              width: 36,
-              height: 36,
-              className: "uf-rounded-lg"
-            }
-          ) : /* @__PURE__ */ jsx19(
-            "div",
-            {
-              className: "uf-w-9 uf-h-9 uf-rounded-lg uf-flex uf-items-center uf-justify-center",
-              style: { backgroundColor: colors2.card },
-              children: /* @__PURE__ */ jsx19(
-                "span",
-                {
-                  className: "uf-text-xs uf-font-medium",
-                  style: { color: components.card.iconColor },
-                  children: connectedExchange.name.slice(0, 2).toUpperCase()
-                }
-              )
-            }
-          ) : /* @__PURE__ */ jsx19("div", { className: "uf-rounded-lg uf-p-2", children: /* @__PURE__ */ jsx19(
-            Link2,
-            {
-              className: "uf-w-5 uf-h-5",
-              style: { color: components.card.iconColor }
-            }
-          ) }),
-          /* @__PURE__ */ jsxs16("div", { className: "uf-text-left", children: [
-            /* @__PURE__ */ jsx19(
-              "div",
-              {
-                className: "uf-text-sm uf-font-light uf-mb-0.5",
-                style: {
-                  color: components.card.titleColor,
-                  fontFamily: fonts.regular
-                },
-                children: isConnected ? connectedExchange.name : title
-              }
-            ),
-            isConnected && connectedExchange.isLoading ? /* @__PURE__ */ jsx19("div", { className: "uf-h-3 uf-w-24 uf-bg-muted uf-rounded uf-animate-pulse" }) : /* @__PURE__ */ jsx19(
-              "div",
-              {
-                className: "uf-text-xs uf-font-light",
-                style: {
-                  color: components.card.subtitleColor,
-                  fontFamily: fonts.regular
-                },
-                children: isConnected ? connectedExchange.balanceUsd ? `$${connectedExchange.balanceUsd} \u2022 2 min` : "Deposit from exchange" : subtitle
-              }
-            )
-          ] })
+          iconBlock,
+          titleSubtitleBlock
         ] }),
         /* @__PURE__ */ jsxs16("div", { className: "uf-flex uf-items-center uf-gap-1.5", children: [
           !isConnected && exchanges && exchanges.length > 0 ? exchanges.slice(0, 4).map((ex, i) => {
@@ -7736,7 +7785,7 @@ function BrowserWalletButton({
 }
 
 // src/components/deposits/CoinbaseConnect.tsx
-import { useState as useState20, useEffect as useEffect16, useCallback as useCallback2, useRef as useRef5 } from "react";
+import { useState as useState20, useEffect as useEffect16, useCallback as useCallback2, useMemo as useMemo3, useRef as useRef5 } from "react";
 import {
   ChevronRight as ChevronRight11,
   ChevronDown as ChevronDown3,
@@ -7755,8 +7804,6 @@ import {
   getIntegrationHoldings,
   createIntegrationTransfer,
   confirmIntegrationTransfer,
-  getIntegrationTransferDefaultToken,
-  getSupportedDepositTokens,
   IntegrationProvider
 } from "@unifold/core";
 
@@ -7778,6 +7825,77 @@ function useProjectConfig({
   return { projectConfig, isLoading };
 }
 
+// src/hooks/use-supported-deposit-tokens.ts
+import { useQuery as useQuery5 } from "@tanstack/react-query";
+import {
+  getSupportedDepositTokens
+} from "@unifold/core";
+function useSupportedDepositTokens(publishableKey, options) {
+  const hasDestination = options?.destination_token_address && options?.destination_chain_id && options?.destination_chain_type;
+  const filteredOptions = {
+    ...hasDestination ? {
+      destination_token_address: options.destination_token_address,
+      destination_chain_id: options.destination_chain_id,
+      destination_chain_type: options.destination_chain_type
+    } : {},
+    ...options?.product_type ? { product_type: options.product_type } : {}
+  };
+  const hasFilteredOptions = Object.keys(filteredOptions).length > 0;
+  return useQuery5({
+    queryKey: [
+      "unifold",
+      "supportedDepositTokens",
+      publishableKey,
+      filteredOptions?.destination_token_address ?? null,
+      filteredOptions?.destination_chain_id ?? null,
+      filteredOptions?.destination_chain_type ?? null,
+      filteredOptions?.product_type ?? null
+    ],
+    queryFn: () => getSupportedDepositTokens(
+      publishableKey,
+      hasFilteredOptions ? filteredOptions : void 0
+    ),
+    staleTime: 1e3 * 60 * 5,
+    // 5 minutes — token list rarely changes
+    gcTime: 1e3 * 60 * 30,
+    // 30 minutes in cache
+    refetchOnMount: false,
+    refetchOnWindowFocus: false
+  });
+}
+
+// src/hooks/use-integration-transfer-default-token.ts
+import { useQuery as useQuery6 } from "@tanstack/react-query";
+import {
+  getIntegrationTransferDefaultToken
+} from "@unifold/core";
+function useIntegrationTransferDefaultToken({
+  params,
+  publishableKey,
+  enabled = true
+}) {
+  return useQuery6({
+    queryKey: [
+      "unifold",
+      "integrationTransferDefaultToken",
+      publishableKey,
+      params?.integration_provider ?? null,
+      params?.source_currency ?? null,
+      params?.destination_token_address ?? null,
+      params?.destination_chain_id ?? null,
+      params?.destination_chain_type ?? null,
+      params?.country_code ?? null,
+      params?.subdivision_code ?? null
+    ],
+    queryFn: () => getIntegrationTransferDefaultToken(params, publishableKey),
+    enabled: enabled && !!params,
+    staleTime: 1e3 * 60 * 5,
+    gcTime: 1e3 * 60 * 30,
+    refetchOnMount: false,
+    refetchOnWindowFocus: false
+  });
+}
+
 // src/lib/integrations.ts
 var INTEGRATIONS_STORAGE_KEY = "unifold:integrations:connected";
 function getStoredIntegrations() {
@@ -7826,6 +7944,23 @@ function CoinbaseConnect({
   const { colors: colors2, fonts, components } = useTheme();
   const { projectConfig } = useProjectConfig({ publishableKey });
   const { userIpInfo } = useUserIp();
+  const { data: supportedTokensData, isLoading: supportedTokensLoading } = useSupportedDepositTokens(publishableKey, {
+    destination_token_address: destinationTokenAddress,
+    destination_chain_id: destinationChainId,
+    destination_chain_type: destinationChainType
+  });
+  const supportedSymbols = useMemo3(() => {
+    const set = /* @__PURE__ */ new Set();
+    supportedTokensData?.data.forEach((token) => set.add(token.symbol.toLowerCase()));
+    return set;
+  }, [supportedTokensData]);
+  const stablecoinSymbols = useMemo3(() => {
+    const set = /* @__PURE__ */ new Set();
+    supportedTokensData?.data.forEach((token) => {
+      if (token.is_stablecoin) set.add(token.symbol.toLowerCase());
+    });
+    return set;
+  }, [supportedTokensData]);
   const appName = projectConfig?.project_name ?? "Unifold";
   const t12 = i18n.connectExchange;
   const initialView = skipToHoldings && getStoredIntegrationToken(IntegrationProvider.COINBASE) ? "holdings" : "select_exchange";
@@ -7848,7 +7983,43 @@ function CoinbaseConnect({
   const [confirmResult, setConfirmResult] = useState20(null);
   const [showTransferDetails, setShowTransferDetails] = useState20(false);
   const [transferDepositWalletId, setTransferDepositWalletId] = useState20(void 0);
-  const [minDepositUsd, setMinDepositUsd] = useState20(0);
+  const exchangeSupportedCurrencies = useMemo3(() => {
+    const set = /* @__PURE__ */ new Set();
+    selectedExchange?.supported_currencies.forEach((c) => set.add(c.toLowerCase()));
+    return set;
+  }, [selectedExchange]);
+  const defaultTokenParams = useMemo3(
+    () => selectedAsset ? {
+      integration_provider: IntegrationProvider.COINBASE,
+      source_currency: selectedAsset.currency.toLowerCase(),
+      destination_token_address: destinationTokenAddress,
+      destination_chain_id: destinationChainId,
+      destination_chain_type: destinationChainType,
+      country_code: userIpInfo?.alpha2,
+      subdivision_code: userIpInfo?.subdivisionCode ?? void 0
+    } : null,
+    [selectedAsset, destinationTokenAddress, destinationChainId, destinationChainType, userIpInfo?.alpha2, userIpInfo?.subdivisionCode]
+  );
+  const { data: defaultTokenData, isLoading: defaultTokenLoading } = useIntegrationTransferDefaultToken({
+    params: defaultTokenParams,
+    publishableKey
+  });
+  const sortedHoldings = useMemo3(() => {
+    const supported = [];
+    const unsupported = [];
+    holdings.forEach((account) => {
+      const currencyLower = account.currency.toLowerCase();
+      const isSupported = (supportedSymbols.size === 0 || supportedSymbols.has(currencyLower)) && (exchangeSupportedCurrencies.size === 0 || exchangeSupportedCurrencies.has(currencyLower));
+      if (isSupported) supported.push(account);
+      else unsupported.push(account);
+    });
+    return [...supported, ...unsupported];
+  }, [holdings, supportedSymbols, exchangeSupportedCurrencies]);
+  const selectedHoldingIsSupported = useMemo3(() => {
+    if (!selectedHolding) return false;
+    const currencyLower = selectedHolding.currency.toLowerCase();
+    return (supportedSymbols.size === 0 || supportedSymbols.has(currencyLower)) && (exchangeSupportedCurrencies.size === 0 || exchangeSupportedCurrencies.has(currencyLower));
+  }, [selectedHolding, supportedSymbols, exchangeSupportedCurrencies]);
   const exchangeName = selectedExchange?.service_provider_display_name || "Exchange";
   const {
     executions: depositExecutions,
@@ -7964,53 +8135,17 @@ function CoinbaseConnect({
       if (pollRef.current) clearInterval(pollRef.current);
     };
   }, []);
-  useEffect16(() => {
-    if (view !== "enter_amount" || !selectedAsset) return;
-    let cancelled = false;
-    const fetchMinDeposit = async () => {
-      try {
-        const [defaultToken, supportedTokens] = await Promise.all([
-          getIntegrationTransferDefaultToken(
-            {
-              integration_provider: IntegrationProvider.COINBASE,
-              source_currency: selectedAsset.currency.toLowerCase(),
-              destination_token_address: destinationTokenAddress,
-              destination_chain_id: destinationChainId,
-              destination_chain_type: destinationChainType,
-              country_code: userIpInfo?.alpha2,
-              subdivision_code: userIpInfo?.subdivisionCode ?? void 0
-            },
-            publishableKey
-          ),
-          getSupportedDepositTokens(publishableKey, {
-            destination_token_address: destinationTokenAddress,
-            destination_chain_id: destinationChainId,
-            destination_chain_type: destinationChainType
-          })
-        ]);
-        if (cancelled) return;
-        const supportedToken = supportedTokens.data.find(
-          (t13) => t13.symbol.toLowerCase() === selectedAsset.currency.toLowerCase()
-        );
-        if (supportedToken && supportedToken.chains.length > 0) {
-          const matchingChain = supportedToken.chains.find(
-            (c) => c.chain_name.toLowerCase() === defaultToken.source_network.toLowerCase()
-          );
-          setMinDepositUsd(
-            matchingChain?.minimum_deposit_amount_usd ?? Math.min(...supportedToken.chains.map((c) => c.minimum_deposit_amount_usd))
-          );
-        } else {
-          setMinDepositUsd(0);
-        }
-      } catch {
-        if (!cancelled) setMinDepositUsd(0);
-      }
-    };
-    fetchMinDeposit();
-    return () => {
-      cancelled = true;
-    };
-  }, [view, selectedAsset, publishableKey, destinationTokenAddress, destinationChainId, destinationChainType, userIpInfo?.alpha2, userIpInfo?.subdivisionCode]);
+  const minDepositUsd = useMemo3(() => {
+    if (!selectedAsset || !defaultTokenData) return 0;
+    const supportedToken = supportedTokensData?.data.find(
+      (t13) => t13.symbol.toLowerCase() === selectedAsset.currency.toLowerCase()
+    );
+    if (!supportedToken || supportedToken.chains.length === 0) return 0;
+    const matchingChain = supportedToken.chains.find(
+      (c) => c.chain_name.toLowerCase() === defaultTokenData.source_network.toLowerCase()
+    );
+    return matchingChain?.minimum_deposit_amount_usd ?? Math.min(...supportedToken.chains.map((c) => c.minimum_deposit_amount_usd));
+  }, [selectedAsset, supportedTokensData, defaultTokenData]);
   const handleSelectExchange = (exchange) => {
     if (!exchange.enabled) return;
     setSelectedExchange(exchange);
@@ -8055,7 +8190,6 @@ function CoinbaseConnect({
   const handleSelectAsset = (asset) => {
     setSelectedAsset(asset);
     setSendAmount("");
-    setMinDepositUsd(0);
     transitionTo("enter_amount");
   };
   const handleCreateTransfer = async () => {
@@ -8067,18 +8201,10 @@ function CoinbaseConnect({
     const cryptoAmount = (usdAmount / rate).toFixed(8);
     setIsLoading(true);
     try {
-      const { source_network, source_chain_type } = await getIntegrationTransferDefaultToken(
-        {
-          integration_provider: IntegrationProvider.COINBASE,
-          source_currency: selectedAsset.currency.toLowerCase(),
-          destination_token_address: destinationTokenAddress,
-          destination_chain_id: destinationChainId,
-          destination_chain_type: destinationChainType,
-          country_code: userIpInfo?.alpha2,
-          subdivision_code: userIpInfo?.subdivisionCode ?? void 0
-        },
-        publishableKey
-      );
+      if (!defaultTokenData) {
+        throw new Error("Transfer details not ready. Please try again.");
+      }
+      const { source_network, source_chain_type } = defaultTokenData;
       const matchingWallet = wallets.find((w) => w.chain_type === source_chain_type);
       const depositAddress = matchingWallet?.address ?? recipientAddress ?? "";
       if (!depositAddress) {
@@ -8230,13 +8356,12 @@ function CoinbaseConnect({
         break;
     }
   };
-  const STABLECOIN_SYMBOLS = /* @__PURE__ */ new Set(["USDC", "USDT", "DAI", "BUSD", "TUSD", "USDP", "GUSD", "FRAX", "LUSD", "PYUSD", "EURC", "USDS"]);
   const formatCryptoAmount = (amount, currency) => {
     const num = parseFloat(amount);
     if (isNaN(num)) return `${amount} ${currency.toUpperCase()}`;
-    const isStable = STABLECOIN_SYMBOLS.has(currency.toUpperCase());
-    const maxDecimals = isStable ? 2 : 8;
-    return `${num.toLocaleString(void 0, { minimumFractionDigits: isStable ? 2 : 0, maximumFractionDigits: maxDecimals })} ${currency.toUpperCase()}`;
+    const isStable = stablecoinSymbols.has(currency.toLowerCase());
+    const maxDecimals = isStable ? 2 : 6;
+    return `${num.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: maxDecimals })} ${currency.toUpperCase()}`;
   };
   const viewTransitionStyle = {
     opacity: isTransitioning ? 0 : 1,
@@ -8838,7 +8963,7 @@ function CoinbaseConnect({
             className: "uf-w-6 uf-h-6 uf-animate-spin",
             style: { color: colors2.foregroundMuted }
           }
-        ) }) : holdings.length === 0 ? /* @__PURE__ */ jsx37("div", { className: "uf-text-center uf-py-8", children: /* @__PURE__ */ jsx37(
+        ) }) : sortedHoldings.length === 0 ? /* @__PURE__ */ jsx37("div", { className: "uf-text-center uf-py-8", children: /* @__PURE__ */ jsx37(
           "div",
           {
             className: "uf-text-sm",
@@ -8848,17 +8973,19 @@ function CoinbaseConnect({
             },
             children: "No holdings found"
           }
-        ) }) : holdings.map((account) => {
+        ) }) : sortedHoldings.map((account) => {
           const iconUrl = account.icon_urls?.find((u) => u.format === "svg")?.url || account.icon_urls?.find((u) => u.format === "png")?.url || account.icon_url;
-          const isSelected = selectedHolding?.id === account.id;
+          const currencyLower = account.currency.toLowerCase();
+          const isSupported = (supportedSymbols.size === 0 || supportedSymbols.has(currencyLower)) && (exchangeSupportedCurrencies.size === 0 || exchangeSupportedCurrencies.has(currencyLower));
+          const isSelected = isSupported && selectedHolding?.id === account.id;
           const usdValue = account.amount_usd ? parseFloat(account.amount_usd) : null;
-          const formattedUsd = usdValue != null && usdValue > 0 ? `$${usdValue.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : null;
+          const formattedUsd = usdValue != null && usdValue >= 0.01 ? `$${usdValue.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}` : usdValue != null && usdValue < 0.01 && usdValue > 0 ? "< $0.01" : "$0.00";
           return /* @__PURE__ */ jsxs33(
             "button",
             {
               onClick: () => setSelectedHolding(account),
-              disabled: isLoading,
-              className: "uf-w-full uf-transition-colors uf-p-3 uf-flex uf-items-center uf-justify-between",
+              disabled: isLoading || !isSupported,
+              className: `uf-w-full uf-transition-colors uf-p-3 uf-flex uf-items-center uf-justify-between ${!isSupported ? "uf-cursor-not-allowed uf-opacity-50" : ""}`,
               style: {
                 backgroundColor: isSelected ? colors2.primary + "20" : components.card.backgroundColor,
                 borderRadius: components.list.rowBorderRadius,
@@ -8948,9 +9075,9 @@ function CoinbaseConnect({
           "button",
           {
             onClick: () => {
-              if (selectedHolding) handleSelectAsset(selectedHolding);
+              if (selectedHolding && selectedHoldingIsSupported) handleSelectAsset(selectedHolding);
             },
-            disabled: !selectedHolding || isLoading,
+            disabled: !selectedHolding || isLoading || supportedTokensLoading || exchangesLoading || !selectedHoldingIsSupported,
             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",
             style: {
               backgroundColor: colors2.primary,
@@ -8974,22 +9101,16 @@ function CoinbaseConnect({
     const isValidAmount = inputUsdNum > 0 && (maxUsdAmount == null || inputUsdNum <= maxUsdAmount) && inputUsdNum >= minDepositUsd;
     const displayValue = sendAmount || "0";
     const formattedBalance = formatCryptoAmount(selectedAsset.amount, selectedAsset.currency);
-    const balanceDisplay = maxUsdAmount != null && maxUsdAmount > 0 ? `$${maxUsdAmount.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} (${formattedBalance})` : formattedBalance;
+    const balanceSubtitle = maxUsdAmount != null && maxUsdAmount > 0 ? `Balance: $${maxUsdAmount.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })} (${formattedBalance})` : `Balance: ${formattedBalance}`;
     return /* @__PURE__ */ jsxs33(Fragment4, { children: [
       /* @__PURE__ */ jsx37(
         DepositHeader,
         {
           title: "Enter Amount",
+          subtitle: balanceSubtitle,
           showBack: true,
           onBack: handleBack,
-          onClose,
-          showBalance: true,
-          balanceAddress: recipientAddress,
-          balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" ? destinationChainType : void 0,
-          balanceChainId: destinationChainId,
-          balanceTokenAddress: destinationTokenAddress,
-          projectName: projectConfig?.project_name,
-          publishableKey
+          onClose
         }
       ),
       /* @__PURE__ */ jsxs33("div", { className: "uf-flex uf-flex-col uf-pb-4", style: viewTransitionStyle, children: [
@@ -9111,7 +9232,7 @@ function CoinbaseConnect({
           "button",
           {
             onClick: handleCreateTransfer,
-            disabled: !isValidAmount || isLoading,
+            disabled: !isValidAmount || isLoading || defaultTokenLoading || !defaultTokenData,
             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",
             style: {
               backgroundColor: colors2.primary,
@@ -9120,7 +9241,7 @@ function CoinbaseConnect({
               borderRadius: components.button.borderRadius,
               border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
             },
-            children: isLoading ? /* @__PURE__ */ jsx37(Loader24, { className: "uf-w-4 uf-h-4 uf-animate-spin" }) : "Review"
+            children: isLoading || defaultTokenLoading ? /* @__PURE__ */ jsx37(Loader24, { className: "uf-w-4 uf-h-4 uf-animate-spin" }) : "Review"
           }
         )
       ] })
@@ -9589,13 +9710,13 @@ function CoinbaseConnect({
 CoinbaseConnect.displayName = "CoinbaseConnect";
 
 // src/hooks/use-exchanges.ts
-import { useQuery as useQuery5 } from "@tanstack/react-query";
+import { useQuery as useQuery7 } from "@tanstack/react-query";
 import { getExchanges } from "@unifold/core";
 function useExchanges({
   publishableKey,
   enabled = true
 }) {
-  const { data: exchanges = [], isLoading } = useQuery5({
+  const { data: exchanges = [], isLoading } = useQuery7({
     queryKey: ["unifold", "exchanges", publishableKey],
     queryFn: () => getExchanges(void 0, publishableKey).then((res) => res.data),
     enabled,
@@ -9607,7 +9728,7 @@ function useExchanges({
 }
 
 // src/hooks/use-default-onramp-token.ts
-import { useQuery as useQuery6 } from "@tanstack/react-query";
+import { useQuery as useQuery8 } from "@tanstack/react-query";
 import {
   getDefaultOnrampToken as getDefaultOnrampToken2
 } from "@unifold/core";
@@ -9620,7 +9741,7 @@ function useDefaultOnrampToken({
   subdivisionCode,
   enabled = true
 }) {
-  const { data: defaultToken, isLoading } = useQuery6({
+  const { data: defaultToken, isLoading } = useQuery8({
     queryKey: [
       "unifold",
       "defaultOnrampToken",
@@ -9655,12 +9776,13 @@ import {
   getIntegrationExchanges as getIntegrationExchanges2,
   getIntegrationHoldings as getIntegrationHoldings2,
   refreshIntegrationToken as refreshIntegrationToken2,
+  revokeIntegrationToken,
   IntegrationProvider as IntegrationProvider2,
   ActionType as ActionType3
 } from "@unifold/core";
 
 // src/hooks/use-allowed-country.ts
-import { useQuery as useQuery7 } from "@tanstack/react-query";
+import { useQuery as useQuery9 } from "@tanstack/react-query";
 import {
   getIpAddress as getIpAddress2,
   getProjectConfig as getProjectConfig2
@@ -9670,7 +9792,7 @@ function useAllowedCountry(publishableKey) {
     data: ipData,
     isLoading: isIpLoading,
     error: ipError
-  } = useQuery7({
+  } = useQuery9({
     queryKey: ["unifold", "ipAddress"],
     queryFn: () => getIpAddress2(),
     refetchOnMount: false,
@@ -9685,7 +9807,7 @@ function useAllowedCountry(publishableKey) {
     data: configData,
     isLoading: isConfigLoading,
     error: configError
-  } = useQuery7({
+  } = useQuery9({
     queryKey: ["unifold", "projectConfig", publishableKey],
     queryFn: () => getProjectConfig2(publishableKey),
     refetchOnMount: false,
@@ -9728,7 +9850,7 @@ function useAllowedCountry(publishableKey) {
 }
 
 // src/hooks/use-address-validation.ts
-import { useQuery as useQuery8 } from "@tanstack/react-query";
+import { useQuery as useQuery10 } from "@tanstack/react-query";
 import {
   verifyRecipientAddress
 } from "@unifold/core";
@@ -9742,7 +9864,7 @@ function useAddressValidation({
   refetchOnMount = false
 }) {
   const shouldValidate = enabled && !!recipientAddress && !!destinationChainType && !!destinationChainId && !!destinationTokenAddress;
-  const { data, isLoading, error } = useQuery8({
+  const { data, isLoading, error } = useQuery10({
     queryKey: [
       "unifold",
       "addressValidation",
@@ -9787,47 +9909,8 @@ function useAddressValidation({
   };
 }
 
-// src/hooks/use-supported-deposit-tokens.ts
-import { useQuery as useQuery9 } from "@tanstack/react-query";
-import {
-  getSupportedDepositTokens as getSupportedDepositTokens2
-} from "@unifold/core";
-function useSupportedDepositTokens(publishableKey, options) {
-  const hasDestination = options?.destination_token_address && options?.destination_chain_id && options?.destination_chain_type;
-  const filteredOptions = {
-    ...hasDestination ? {
-      destination_token_address: options.destination_token_address,
-      destination_chain_id: options.destination_chain_id,
-      destination_chain_type: options.destination_chain_type
-    } : {},
-    ...options?.product_type ? { product_type: options.product_type } : {}
-  };
-  const hasFilteredOptions = Object.keys(filteredOptions).length > 0;
-  return useQuery9({
-    queryKey: [
-      "unifold",
-      "supportedDepositTokens",
-      publishableKey,
-      filteredOptions?.destination_token_address ?? null,
-      filteredOptions?.destination_chain_id ?? null,
-      filteredOptions?.destination_chain_type ?? null,
-      filteredOptions?.product_type ?? null
-    ],
-    queryFn: () => getSupportedDepositTokens2(
-      publishableKey,
-      hasFilteredOptions ? filteredOptions : void 0
-    ),
-    staleTime: 1e3 * 60 * 5,
-    // 5 minutes — token list rarely changes
-    gcTime: 1e3 * 60 * 30,
-    // 30 minutes in cache
-    refetchOnMount: false,
-    refetchOnWindowFocus: false
-  });
-}
-
 // src/components/deposits/TransferCryptoSingleInput.tsx
-import { useState as useState26, useEffect as useEffect21, useMemo as useMemo5 } from "react";
+import { useState as useState26, useEffect as useEffect21, useMemo as useMemo6 } from "react";
 import {
   ChevronDown as ChevronDown4,
   ChevronUp as ChevronUp3,
@@ -10101,7 +10184,7 @@ function DepositsModal({
 }
 
 // src/components/deposits/TokenSelectorSheet.tsx
-import { useState as useState22, useMemo as useMemo4, useEffect as useEffect19 } from "react";
+import { useState as useState22, useMemo as useMemo5, useEffect as useEffect19 } from "react";
 import { ArrowLeft as ArrowLeft2, X as X4 } from "lucide-react";
 import { jsx as jsx41, jsxs as jsxs36 } from "react/jsx-runtime";
 var STORAGE_KEY = "unifold_recent_tokens";
@@ -10166,7 +10249,7 @@ function TokenSelectorSheet({
   useEffect19(() => {
     setRecentTokens(getRecentTokens());
   }, []);
-  const allOptions = useMemo4(() => {
+  const allOptions = useMemo5(() => {
     const options = [];
     tokens.forEach((token) => {
       token.chains.forEach((chain) => {
@@ -10175,7 +10258,7 @@ function TokenSelectorSheet({
     });
     return options;
   }, [tokens]);
-  const quickSelectOptions = useMemo4(() => {
+  const quickSelectOptions = useMemo5(() => {
     const result = [];
     const seen = /* @__PURE__ */ new Set();
     const addOption = (symbol, chainType, chainId, isRecent) => {
@@ -10207,7 +10290,7 @@ function TokenSelectorSheet({
     });
     setRecentTokens(updated);
   };
-  const filteredOptions = useMemo4(() => {
+  const filteredOptions = useMemo5(() => {
     if (!searchQuery.trim()) return allOptions;
     const query = searchQuery.toLowerCase();
     return allOptions.filter(
@@ -10957,7 +11040,7 @@ import {
 } from "@unifold/core";
 
 // src/hooks/use-hypercore-activation.ts
-import { useQuery as useQuery10 } from "@tanstack/react-query";
+import { useQuery as useQuery11 } from "@tanstack/react-query";
 import {
   checkHypercoreActivation
 } from "@unifold/core";
@@ -10978,7 +11061,7 @@ function useHypercoreActivation(params) {
   const recipient = recipientAddress?.trim() ?? "";
   const source = sourceAddress?.trim() ?? "";
   const hasAddresses = !!recipient && !!source;
-  const { data, isLoading } = useQuery10({
+  const { data, isLoading } = useQuery11({
     queryKey: [
       "unifold",
       "hypercoreActivation",
@@ -11114,7 +11197,7 @@ function TransferCryptoSingleInput({
   const wallets = externalWallets?.length ? externalWallets : depositAddressResponse?.data ?? [];
   const loading = externalWallets?.length ? false : walletsLoading;
   const error = walletsError?.message ?? null;
-  const allAvailableChains = useMemo5(() => {
+  const allAvailableChains = useMemo6(() => {
     const chainsMap = /* @__PURE__ */ new Map();
     supportedTokens.forEach((t12) => {
       t12.chains.forEach((c) => {
@@ -11584,7 +11667,7 @@ function TransferCryptoSingleInput({
 }
 
 // src/components/deposits/TransferCryptoDoubleInput.tsx
-import { useState as useState27, useEffect as useEffect22, useMemo as useMemo6 } from "react";
+import { useState as useState27, useEffect as useEffect22, useMemo as useMemo7 } from "react";
 import {
   ChevronDown as ChevronDown6,
   ChevronUp as ChevronUp5,
@@ -11799,7 +11882,7 @@ function TransferCryptoDoubleInput({
   const wallets = externalWallets?.length ? externalWallets : depositAddressResponse?.data ?? [];
   const loading = externalWallets?.length ? false : walletsLoading;
   const error = walletsError?.message ?? null;
-  const allAvailableChains = useMemo6(() => {
+  const allAvailableChains = useMemo7(() => {
     const chainsMap = /* @__PURE__ */ new Map();
     supportedTokens.forEach((t12) => {
       t12.chains.forEach((c) => {
@@ -12210,13 +12293,13 @@ function TransferCryptoDoubleInput({
 import * as React29 from "react";
 import {
   getAddressBalances as getAddressBalances2,
-  getSupportedDepositTokens as getSupportedDepositTokens3,
+  getSupportedDepositTokens as getSupportedDepositTokens2,
   buildSolanaTransaction,
   sendSolanaTransaction as sendSolanaTransactionToBackend
 } from "@unifold/core";
 
 // src/hooks/use-deposit-quote.ts
-import { useQuery as useQuery11 } from "@tanstack/react-query";
+import { useQuery as useQuery12 } from "@tanstack/react-query";
 import {
   getDepositQuote
 } from "@unifold/core";
@@ -12245,7 +12328,7 @@ function useDepositQuote(params) {
     ...adjustForSlippage ? { adjust_for_slippage: true } : {},
     ...stablecoinParity ? { stablecoin_parity: true } : {}
   };
-  return useQuery11({
+  return useQuery12({
     queryKey: [
       "unifold",
       "depositQuote",
@@ -12364,7 +12447,7 @@ function SelectTokenView({
         ),
         walletInfoProp ? /* @__PURE__ */ jsx50("div", { className: "uf-flex uf-w-full uf-justify-center uf-mb-6", children: /* @__PURE__ */ jsx50(WalletWithNetworkBadge, { walletInfo: walletInfoProp }) }) : null,
         /* @__PURE__ */ jsxs43("div", { className: "uf-flex uf-min-h-0 uf-flex-1 uf-flex-col", children: [
-          /* @__PURE__ */ jsx50("div", { className: "uf-h-[220px] uf-shrink-0 uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: /* @__PURE__ */ jsx50("div", { className: "uf-space-y-2", children: isLoading ? /* @__PURE__ */ jsx50("div", { className: "uf-flex uf-items-center uf-justify-center uf-py-12", children: /* @__PURE__ */ jsx50(
+          /* @__PURE__ */ jsx50("div", { className: "uf-h-[300px] uf-shrink-0 uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: /* @__PURE__ */ jsx50("div", { className: "uf-space-y-2", children: isLoading ? /* @__PURE__ */ jsx50("div", { className: "uf-flex uf-items-center uf-justify-center uf-py-12", children: /* @__PURE__ */ jsx50(
             Loader25,
             {
               className: "uf-w-6 uf-h-6 uf-animate-spin",
@@ -13499,7 +13582,7 @@ function BrowserWalletModal({
           destination_chain_type: depositWallet.destination_chain_type,
           ...productType ? { product_type: productType } : {}
         };
-        const response = await getSupportedDepositTokens3(
+        const response = await getSupportedDepositTokens2(
           publishableKey,
           options
         );
@@ -14767,7 +14850,7 @@ function DepositModal({
   depositTrackerSubTitle = t7.depositTracker.subtitle
 }) {
   const { colors: colors2, fonts, components } = useTheme();
-  const effectiveInitialScreen = useMemo9(() => {
+  const effectiveInitialScreen = useMemo10(() => {
     const s = initialScreen ?? "main";
     if (s === "tracker" && hideDepositTracker) return "main";
     if (s === "cashapp" && !enableCashApp) return "main";
@@ -14826,11 +14909,12 @@ function DepositModal({
         return sum + (isNaN(usd) ? 0 : usd);
       }, 0);
       const balanceUsd = totalUsd > 0 ? totalUsd.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 }) : null;
-      setConnectedExchange((prev) => ({ ...prev, balanceUsd, isLoading: false }));
+      setConnectedExchange((prev) => prev ? { ...prev, balanceUsd, isLoading: false } : null);
     };
     getIntegrationHoldings2(IntegrationProvider2.COINBASE, stored.access_token, publishableKey).then(processHoldings).catch(async () => {
       try {
         const refreshResult = await refreshIntegrationToken2(stored.access_token, publishableKey);
+        if (!getStoredIntegrationToken(IntegrationProvider2.COINBASE)) return;
         setStoredIntegrationToken({
           integration_provider: IntegrationProvider2.COINBASE,
           access_token: refreshResult.access_token,
@@ -14839,6 +14923,7 @@ function DepositModal({
         const retryResult = await getIntegrationHoldings2(IntegrationProvider2.COINBASE, refreshResult.access_token, publishableKey);
         processHoldings(retryResult);
       } catch {
+        if (!getStoredIntegrationToken(IntegrationProvider2.COINBASE)) return;
         clearStoredIntegrationToken(IntegrationProvider2.COINBASE);
         setConnectedExchange(null);
       }
@@ -15006,6 +15091,14 @@ function DepositModal({
     setBrowserWalletInfo(null);
     setBrowserWalletModalOpen(false);
   };
+  const handleExchangeDisconnect = () => {
+    const stored = getStoredIntegrationToken(IntegrationProvider2.COINBASE);
+    if (stored) {
+      revokeIntegrationToken(stored.access_token, publishableKey);
+    }
+    clearStoredIntegrationToken(IntegrationProvider2.COINBASE);
+    setConnectedExchange(null);
+  };
   const handleClose = () => {
     onOpenChange(false);
     if (resetViewTimeoutRef.current) {
@@ -15211,6 +15304,7 @@ function DepositModal({
                         setCoinbaseSkipToHoldings(true);
                         setView("coinbase_connect");
                       },
+                      onDisconnect: handleExchangeDisconnect,
                       title: i18n.connectExchange.title,
                       subtitle: i18n.connectExchange.subtitle,
                       exchanges: integrationExchanges,
@@ -15415,34 +15509,37 @@ function DepositModal({
                 ),
                 depositPoweredByFooter
               ] })
-            ] }) : view === "coinbase_connect" ? /* @__PURE__ */ jsx56(
-              CoinbaseConnect,
-              {
-                publishableKey,
-                userId,
-                wallets,
-                recipientAddress,
-                destinationTokenAddress: destinationTokenAddress ?? "",
-                destinationChainId: destinationChainId ?? "",
-                destinationChainType: destinationChainType ?? "",
-                onTransferSuccess: (result) => {
-                  onDepositSuccess?.({
-                    message: "Transfer completed via Coinbase Connect",
-                    transaction: result
-                  });
-                },
-                onTransferError: (error) => {
-                  onDepositError?.({
-                    message: error.message,
-                    error
-                  });
-                },
-                onBack: handleBack,
-                onClose: handleClose,
-                skipToHoldings: coinbaseSkipToHoldings,
-                onExecutionsChange: setDepositExecutions
-              }
-            ) : view === "cashapp" ? /* @__PURE__ */ jsxs49(Fragment12, { children: [
+            ] }) : view === "coinbase_connect" ? /* @__PURE__ */ jsxs49("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
+              /* @__PURE__ */ jsx56(
+                CoinbaseConnect,
+                {
+                  publishableKey,
+                  userId,
+                  wallets,
+                  recipientAddress,
+                  destinationTokenAddress: destinationTokenAddress ?? "",
+                  destinationChainId: destinationChainId ?? "",
+                  destinationChainType: destinationChainType ?? "",
+                  onTransferSuccess: (result) => {
+                    onDepositSuccess?.({
+                      message: "Transfer completed via Coinbase Connect",
+                      transaction: result
+                    });
+                  },
+                  onTransferError: (error) => {
+                    onDepositError?.({
+                      message: error.message,
+                      error
+                    });
+                  },
+                  onBack: handleBack,
+                  onClose: handleClose,
+                  skipToHoldings: coinbaseSkipToHoldings,
+                  onExecutionsChange: setDepositExecutions
+                }
+              ),
+              depositPoweredByFooter
+            ] }) : view === "cashapp" ? /* @__PURE__ */ jsxs49(Fragment12, { children: [
               /* @__PURE__ */ jsx56(
                 DepositHeader,
                 {
@@ -15530,12 +15627,12 @@ import {
   useLayoutEffect as useLayoutEffect3,
   useCallback as useCallback7,
   useRef as useRef9,
-  useMemo as useMemo10
+  useMemo as useMemo11
 } from "react";
 import { AlertTriangle as AlertTriangle3, ChevronRight as ChevronRight15 } from "lucide-react";
 
 // src/hooks/use-payment-intent.ts
-import { useQuery as useQuery12 } from "@tanstack/react-query";
+import { useQuery as useQuery13 } from "@tanstack/react-query";
 import { retrievePaymentIntent } from "@unifold/core";
 var TERMINAL_STATUSES = /* @__PURE__ */ new Set([
   "succeeded",
@@ -15550,7 +15647,7 @@ function usePaymentIntent(params) {
     enabled = true,
     pollingInterval = 3e3
   } = params;
-  return useQuery12({
+  return useQuery13({
     queryKey: ["unifold", "paymentIntent", clientSecret, publishableKey],
     queryFn: () => retrievePaymentIntent(clientSecret, publishableKey),
     enabled: enabled && !!clientSecret && !!publishableKey,
@@ -15665,14 +15762,14 @@ function CheckoutModal({
       });
     }
   }, [paymentIntent, onCheckoutSuccess, browserWalletModalOpen]);
-  const wallets = useMemo10(() => {
+  const wallets = useMemo11(() => {
     if (!paymentIntent) return [];
     return mapDepositAddressesToWallets(
       paymentIntent.deposit_addresses,
       paymentIntent
     );
   }, [paymentIntent]);
-  const formatCryptoAmount = useMemo10(() => {
+  const formatCryptoAmount = useMemo11(() => {
     if (!paymentIntent) return (_) => "";
     const decimals = paymentIntent.destination_token_decimals ?? 6;
     const symbol = paymentIntent.currency.toUpperCase();
@@ -15682,7 +15779,7 @@ function CheckoutModal({
       return `${formatted} ${symbol}`;
     };
   }, [paymentIntent]);
-  const remainingAmountUsd = useMemo10(() => {
+  const remainingAmountUsd = useMemo11(() => {
     if (!paymentIntent) return void 0;
     const total = parseFloat(paymentIntent.destination_amount_usd || paymentIntent.amount_usd);
     const received = parseFloat(paymentIntent.destination_amount_received_usd || paymentIntent.amount_received_usd);
@@ -15690,7 +15787,7 @@ function CheckoutModal({
     const remaining = total - received;
     return remaining > 0 ? remaining.toFixed(2) : "0.00";
   }, [paymentIntent]);
-  const remainingCrypto = useMemo10(() => {
+  const remainingCrypto = useMemo11(() => {
     if (!paymentIntent) return void 0;
     const total = BigInt(paymentIntent.destination_amount || paymentIntent.amount);
     const received = BigInt(paymentIntent.destination_amount_received || paymentIntent.amount_received);
@@ -15698,7 +15795,7 @@ function CheckoutModal({
     return remaining > 0n ? remaining.toString() : "0";
   }, [paymentIntent]);
   const [selectedSource, setSelectedSource] = useState32(null);
-  const remainingDestinationAmount = useMemo10(() => {
+  const remainingDestinationAmount = useMemo11(() => {
     if (!paymentIntent) return "0";
     const remaining = BigInt(paymentIntent.destination_amount) - BigInt(paymentIntent.destination_amount_received);
     return remaining > 0n ? remaining.toString() : "0";
@@ -15716,7 +15813,7 @@ function CheckoutModal({
     stablecoinParity: paymentIntent?.stablecoin_parity ?? false,
     enabled: open && view === "transfer" && !!paymentIntent && !!selectedSource && remainingDestinationAmount !== "0"
   });
-  const effectiveCheckoutQuote = useMemo10(() => {
+  const effectiveCheckoutQuote = useMemo11(() => {
     if (!sourceQuote || !selectedSource) return null;
     const baseQuote = {
       sourceAmount: sourceQuote.source_amount,
@@ -16213,12 +16310,12 @@ import {
 import { AlertTriangle as AlertTriangle5, ChevronRight as ChevronRight17, Clock as Clock6 } from "lucide-react";
 
 // src/hooks/use-supported-destination-tokens.ts
-import { useQuery as useQuery13 } from "@tanstack/react-query";
+import { useQuery as useQuery14 } from "@tanstack/react-query";
 import {
   getSupportedDestinationTokens
 } from "@unifold/core";
 function useSupportedDestinationTokens(publishableKey, enabled = true) {
-  return useQuery13({
+  return useQuery14({
     queryKey: ["unifold", "supportedDestinationTokens", publishableKey],
     queryFn: () => getSupportedDestinationTokens(publishableKey),
     staleTime: 1e3 * 60 * 5,
@@ -16247,8 +16344,8 @@ function useDefaultDestinationToken({
 }
 
 // src/hooks/use-source-token-validation.ts
-import { useQuery as useQuery14 } from "@tanstack/react-query";
-import { getSupportedDepositTokens as getSupportedDepositTokens4 } from "@unifold/core";
+import { useQuery as useQuery15 } from "@tanstack/react-query";
+import { getSupportedDepositTokens as getSupportedDepositTokens3 } from "@unifold/core";
 function useSourceTokenValidation(params) {
   const {
     sourceChainType,
@@ -16259,7 +16356,7 @@ function useSourceTokenValidation(params) {
     enabled = true
   } = params;
   const hasParams = !!sourceChainType && !!sourceChainId && !!sourceTokenAddress;
-  return useQuery14({
+  return useQuery15({
     queryKey: [
       "unifold",
       "sourceTokenValidation",
@@ -16269,7 +16366,7 @@ function useSourceTokenValidation(params) {
       publishableKey
     ],
     queryFn: async () => {
-      const res = await getSupportedDepositTokens4(publishableKey);
+      const res = await getSupportedDepositTokens3(publishableKey);
       let matchedMinUsd = null;
       let matchedProcessingTime = null;
       let matchedSlippage = null;
@@ -16307,7 +16404,7 @@ function useSourceTokenValidation(params) {
 }
 
 // src/hooks/use-address-balance.ts
-import { useQuery as useQuery15 } from "@tanstack/react-query";
+import { useQuery as useQuery16 } from "@tanstack/react-query";
 import { getAddressBalance as getAddressBalance2 } from "@unifold/core";
 function useAddressBalance(params) {
   const {
@@ -16319,7 +16416,7 @@ function useAddressBalance(params) {
     enabled = true
   } = params;
   const hasParams = !!address && !!chainType && !!chainId && !!tokenAddress;
-  return useQuery15({
+  return useQuery16({
     queryKey: [
       "unifold",
       "addressBalance",
@@ -16368,11 +16465,11 @@ function useAddressBalance(params) {
 }
 
 // src/hooks/use-executions.ts
-import { useQuery as useQuery16 } from "@tanstack/react-query";
+import { useQuery as useQuery17 } from "@tanstack/react-query";
 import { queryExecutions as queryExecutions4, ActionType as ActionType4 } from "@unifold/core";
 function useExecutions(userId, publishableKey, options) {
   const actionType = options?.actionType ?? ActionType4.Deposit;
-  return useQuery16({
+  return useQuery17({
     queryKey: ["unifold", "executions", actionType, userId, publishableKey],
     queryFn: () => queryExecutions4(userId, publishableKey, actionType),
     enabled: (options?.enabled ?? true) && !!userId,
@@ -16658,7 +16755,7 @@ function WithdrawDoubleInput({
 }
 
 // src/components/withdrawals/WithdrawForm.tsx
-import { useState as useState34, useCallback as useCallback8, useMemo as useMemo12, useEffect as useEffect29 } from "react";
+import { useState as useState34, useCallback as useCallback8, useMemo as useMemo13, useEffect as useEffect29 } from "react";
 import {
   AlertTriangle as AlertTriangle4,
   ArrowUpDown,
@@ -16676,7 +16773,7 @@ import {
 } from "@unifold/core";
 
 // src/hooks/use-verify-recipient-address.ts
-import { useQuery as useQuery17 } from "@tanstack/react-query";
+import { useQuery as useQuery18 } from "@tanstack/react-query";
 import { verifyRecipientAddress as verifyRecipientAddress2 } from "@unifold/core";
 function useVerifyRecipientAddress(params) {
   const {
@@ -16689,7 +16786,7 @@ function useVerifyRecipientAddress(params) {
   } = params;
   const trimmedAddress = recipientAddress?.trim() || "";
   const hasAllParams = !!chainType && !!chainId && !!tokenAddress && trimmedAddress.length > 0;
-  return useQuery17({
+  return useQuery18({
     queryKey: [
       "unifold",
       "verifyRecipientAddress",
@@ -16968,11 +17065,11 @@ async function detectBrowserWallet(chainType, senderAddress) {
 }
 
 // src/hooks/use-hypercore-withdraw-activation.ts
-import { useMemo as useMemo11 } from "react";
+import { useMemo as useMemo12 } from "react";
 import { ActionType as ActionType6 } from "@unifold/core";
 
 // src/hooks/use-get-deposit-address.ts
-import { useQuery as useQuery18 } from "@tanstack/react-query";
+import { useQuery as useQuery19 } from "@tanstack/react-query";
 import {
   getDepositAddress
 } from "@unifold/core";
@@ -16988,7 +17085,7 @@ function useGetDepositAddress(params) {
     enabled = true
   } = params;
   const canFire = !!userId && !!recipientAddress && !!destinationChainType && !!destinationChainId && !!destinationTokenAddress;
-  return useQuery18({
+  return useQuery19({
     queryKey: [
       "unifold",
       "getDepositAddress",
@@ -17057,7 +17154,7 @@ function useHypercoreWithdrawActivation(params) {
     actionType: ActionType6.Withdraw,
     enabled: enabled && isHypercore(sourceChainId)
   });
-  const depositWalletAddress = useMemo11(() => {
+  const depositWalletAddress = useMemo12(() => {
     const wallets = depositWalletLookup.data?.data ?? [];
     return wallets.find((w) => w.chain_type === sourceChainType)?.address;
   }, [depositWalletLookup.data, sourceChainType]);
@@ -17183,7 +17280,7 @@ function WithdrawForm({
     enabled: debouncedAddress.length > 5 && !!selectedChain
   });
   const isDebouncing = trimmedAddress !== debouncedAddress;
-  const addressError = useMemo12(() => {
+  const addressError = useMemo13(() => {
     if (!trimmedAddress || trimmedAddress.length <= 5) return null;
     if (isDebouncing || isVerifyingAddress) return null;
     if (verifyError) return t9.invalidAddress;
@@ -17209,33 +17306,33 @@ function WithdrawForm({
     destinationTokenAddress: selectedChain?.token_address,
     enabled: isAddressValid
   });
-  const exchangeRate = useMemo12(() => {
+  const exchangeRate = useMemo13(() => {
     if (!balanceData?.exchangeRate) return 0;
     return parseFloat(balanceData.exchangeRate);
   }, [balanceData]);
-  const balanceCrypto = useMemo12(() => {
+  const balanceCrypto = useMemo13(() => {
     if (!balanceData?.balanceHuman) return 0;
     return parseFloat(balanceData.balanceHuman);
   }, [balanceData]);
-  const balanceUsdNum = useMemo12(() => {
+  const balanceUsdNum = useMemo13(() => {
     if (!balanceData?.balanceUsd) return 0;
     return parseFloat(balanceData.balanceUsd);
   }, [balanceData]);
   const tokenSymbol = sourceTokenSymbol || balanceData?.symbol || "TOKEN";
   const sourceDecimals = balanceData?.decimals ?? 6;
-  const cryptoAmountFromInput = useMemo12(() => {
+  const cryptoAmountFromInput = useMemo13(() => {
     const val = parseFloat(amount);
     if (!val || val <= 0) return 0;
     if (inputUnit === "crypto") return val;
     return exchangeRate > 0 ? val / exchangeRate : 0;
   }, [amount, inputUnit, exchangeRate]);
-  const fiatAmountFromInput = useMemo12(() => {
+  const fiatAmountFromInput = useMemo13(() => {
     const val = parseFloat(amount);
     if (!val || val <= 0) return 0;
     if (inputUnit === "fiat") return val;
     return val * exchangeRate;
   }, [amount, inputUnit, exchangeRate]);
-  const convertedDisplay = useMemo12(() => {
+  const convertedDisplay = useMemo13(() => {
     if (!amount || parseFloat(amount) <= 0) return null;
     if (inputUnit === "crypto") {
       return `$${fiatAmountFromInput.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
@@ -17244,7 +17341,7 @@ function WithdrawForm({
     const displayDecimals = isStablecoin ? 2 : 6;
     return `${cryptoDisplay.toLocaleString(void 0, { minimumFractionDigits: 2, maximumFractionDigits: displayDecimals })} ${tokenSymbol}`;
   }, [amount, inputUnit, fiatAmountFromInput, cryptoAmountFromInput, balanceCrypto, balanceData, tokenSymbol, isMaxed, isStablecoin]);
-  const balanceDisplay = useMemo12(() => {
+  const balanceDisplay = useMemo13(() => {
     if (isLoadingBalance || !balanceData) return null;
     if (inputUnit === "crypto") {
       const displayDecimals = isStablecoin ? 2 : 6;
@@ -18226,7 +18323,7 @@ function WithdrawModal({
 }
 
 // src/components/withdrawals/WithdrawTokenSelector.tsx
-import { useState as useState37, useMemo as useMemo13 } from "react";
+import { useState as useState37, useMemo as useMemo14 } from "react";
 import { Search } from "lucide-react";
 import { jsx as jsx63, jsxs as jsxs56 } from "react/jsx-runtime";
 var t11 = i18n.withdrawModal;
@@ -18238,7 +18335,7 @@ function WithdrawTokenSelector({
   const { themeClass, colors: colors2, fonts, components } = useTheme();
   const [searchQuery, setSearchQuery] = useState37("");
   const [hoveredKey, setHoveredKey] = useState37(null);
-  const allOptions = useMemo13(() => {
+  const allOptions = useMemo14(() => {
     const options = [];
     tokens.forEach((token) => {
       token.chains.forEach((chain) => {
@@ -18247,7 +18344,7 @@ function WithdrawTokenSelector({
     });
     return options;
   }, [tokens]);
-  const filteredOptions = useMemo13(() => {
+  const filteredOptions = useMemo14(() => {
     if (!searchQuery.trim()) return allOptions;
     const query = searchQuery.toLowerCase();
     return allOptions.filter(