@unifold/ui-web 0.1.56 → 0.1.57

package/dist/index.js

@@ -43727,6 +43727,20 @@ async function refreshIntegrationToken(accessToken, publishableKey) {
   }
   return response.json();
 }
+async function revokeIntegrationToken(accessToken, publishableKey) {
+  const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
+  validatePublishableKey(pk);
+  await fetch(`${API_BASE_URL}/v1/public/integrations/token/revoke`, {
+    method: "POST",
+    headers: {
+      accept: "application/json",
+      "x-publishable-key": pk,
+      "Content-Type": "application/json"
+    },
+    body: JSON.stringify({ access_token: accessToken })
+  }).catch(() => {
+  });
+}
 async function getIntegrationHoldings(provider, accessToken, publishableKey) {
   const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
   validatePublishableKey(pk);
@@ -49400,7 +49414,8 @@ var en_default2 = {
       title: "Transfer Failed",
       tryAgain: "Try Again"
     },
-    continue: "Continue"
+    continue: "Continue",
+    disconnect: "Disconnect"
   },
   buyWithCard: {
     onramp: {
@@ -52647,6 +52662,7 @@ function PayWithExchangeButton({
 }
 function ConnectExchangeButton({
   onClick,
+  onDisconnect,
   title,
   subtitle,
   exchanges,
@@ -52659,6 +52675,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__ */ (0, import_jsx_runtime29.jsx)(
+    "img",
+    {
+      src: connectedExchange.iconUrl,
+      alt: connectedExchange.name,
+      width: 36,
+      height: 36,
+      className: "uf-rounded-lg"
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    "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__ */ (0, import_jsx_runtime29.jsx)(
+        "span",
+        {
+          className: "uf-text-xs uf-font-medium",
+          style: { color: components.card.iconColor },
+          children: connectedExchange.name.slice(0, 2).toUpperCase()
+        }
+      )
+    }
+  ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "uf-rounded-lg uf-p-2", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    Link2,
+    {
+      className: "uf-w-5 uf-h-5",
+      style: { color: components.card.iconColor }
+    }
+  ) });
+  const titleSubtitleBlock = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "uf-text-left", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      "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__ */ (0, import_jsx_runtime29.jsx)("div", { className: "uf-h-3 uf-w-24 uf-bg-muted uf-rounded uf-animate-pulse" }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      "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__ */ (0, import_jsx_runtime29.jsxs)(
+      "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__ */ (0, import_jsx_runtime29.jsxs)(
+            "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__ */ (0, import_jsx_runtime29.jsx)("div", { className: "uf-flex uf-items-center uf-gap-1 uf-shrink-0 uf-pr-2 uf-pl-0", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+            "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: i18n2.connectExchange.disconnect
+            }
+          ) })
+        ]
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
     "button",
     {
@@ -52667,67 +52786,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__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
-          isConnected ? connectedExchange.iconUrl ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            "img",
-            {
-              src: connectedExchange.iconUrl,
-              alt: connectedExchange.name,
-              width: 36,
-              height: 36,
-              className: "uf-rounded-lg"
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            "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__ */ (0, import_jsx_runtime29.jsx)(
-                "span",
-                {
-                  className: "uf-text-xs uf-font-medium",
-                  style: { color: components.card.iconColor },
-                  children: connectedExchange.name.slice(0, 2).toUpperCase()
-                }
-              )
-            }
-          ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "uf-rounded-lg uf-p-2", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-            Link2,
-            {
-              className: "uf-w-5 uf-h-5",
-              style: { color: components.card.iconColor }
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "uf-text-left", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-              "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__ */ (0, import_jsx_runtime29.jsx)("div", { className: "uf-h-3 uf-w-24 uf-bg-muted uf-rounded uf-animate-pulse" }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-              "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__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1.5", children: [
           !isConnected && exchanges && exchanges.length > 0 ? exchanges.slice(0, 4).map((ex, i) => {
@@ -55532,6 +55595,65 @@ function useProjectConfig({
   });
   return { projectConfig, isLoading };
 }
+function useSupportedDepositTokens(publishableKey, options2) {
+  const hasDestination = options2?.destination_token_address && options2?.destination_chain_id && options2?.destination_chain_type;
+  const filteredOptions = {
+    ...hasDestination ? {
+      destination_token_address: options2.destination_token_address,
+      destination_chain_id: options2.destination_chain_id,
+      destination_chain_type: options2.destination_chain_type
+    } : {},
+    ...options2?.product_type ? { product_type: options2.product_type } : {}
+  };
+  const hasFilteredOptions = Object.keys(filteredOptions).length > 0;
+  return useQuery({
+    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
+  });
+}
+function useIntegrationTransferDefaultToken({
+  params,
+  publishableKey,
+  enabled = true
+}) {
+  return useQuery({
+    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
+  });
+}
 var INTEGRATIONS_STORAGE_KEY = "unifold:integrations:connected";
 function getStoredIntegrations() {
   try {
@@ -55576,6 +55698,23 @@ function CoinbaseConnect({
   const { colors: colors2, fonts, components } = useTheme();
   const { projectConfig } = useProjectConfig({ publishableKey });
   const { userIpInfo } = useUserIp2();
+  const { data: supportedTokensData, isLoading: supportedTokensLoading } = useSupportedDepositTokens(publishableKey, {
+    destination_token_address: destinationTokenAddress,
+    destination_chain_id: destinationChainId,
+    destination_chain_type: destinationChainType
+  });
+  const supportedSymbols = (0, import_react18.useMemo)(() => {
+    const set = /* @__PURE__ */ new Set();
+    supportedTokensData?.data.forEach((token) => set.add(token.symbol.toLowerCase()));
+    return set;
+  }, [supportedTokensData]);
+  const stablecoinSymbols = (0, import_react18.useMemo)(() => {
+    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 = i18n2.connectExchange;
   const initialView = skipToHoldings && getStoredIntegrationToken(IntegrationProvider.COINBASE) ? "holdings" : "select_exchange";
@@ -55598,7 +55737,43 @@ function CoinbaseConnect({
   const [confirmResult, setConfirmResult] = (0, import_react18.useState)(null);
   const [showTransferDetails, setShowTransferDetails] = (0, import_react18.useState)(false);
   const [transferDepositWalletId, setTransferDepositWalletId] = (0, import_react18.useState)(void 0);
-  const [minDepositUsd, setMinDepositUsd] = (0, import_react18.useState)(0);
+  const exchangeSupportedCurrencies = (0, import_react18.useMemo)(() => {
+    const set = /* @__PURE__ */ new Set();
+    selectedExchange?.supported_currencies.forEach((c) => set.add(c.toLowerCase()));
+    return set;
+  }, [selectedExchange]);
+  const defaultTokenParams = (0, import_react18.useMemo)(
+    () => 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 = (0, import_react18.useMemo)(() => {
+    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 = (0, import_react18.useMemo)(() => {
+    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,
@@ -55714,53 +55889,17 @@ function CoinbaseConnect({
       if (pollRef.current) clearInterval(pollRef.current);
     };
   }, []);
-  (0, import_react18.useEffect)(() => {
-    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 = (0, import_react18.useMemo)(() => {
+    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);
@@ -55805,7 +55944,6 @@ function CoinbaseConnect({
   const handleSelectAsset = (asset) => {
     setSelectedAsset(asset);
     setSendAmount("");
-    setMinDepositUsd(0);
     transitionTo("enter_amount");
   };
   const handleCreateTransfer = async () => {
@@ -55817,18 +55955,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) {
@@ -55980,13 +56110,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,
@@ -56588,7 +56717,7 @@ function CoinbaseConnect({
             className: "uf-w-6 uf-h-6 uf-animate-spin",
             style: { color: colors2.foregroundMuted }
           }
-        ) }) : holdings.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "uf-text-center uf-py-8", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+        ) }) : sortedHoldings.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "uf-text-center uf-py-8", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
           "div",
           {
             className: "uf-text-sm",
@@ -56598,17 +56727,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__ */ (0, import_jsx_runtime48.jsxs)(
             "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,
@@ -56698,9 +56829,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,
@@ -56724,22 +56855,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__ */ (0, import_jsx_runtime48.jsxs)(import_jsx_runtime48.Fragment, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
         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__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "uf-flex uf-flex-col uf-pb-4", style: viewTransitionStyle, children: [
@@ -56861,7 +56986,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,
@@ -56870,7 +56995,7 @@ function CoinbaseConnect({
               borderRadius: components.button.borderRadius,
               border: `${components.button.borderWidth}px solid ${components.button.borderColor}`
             },
-            children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin" }) : "Review"
+            children: isLoading || defaultTokenLoading ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin" }) : "Review"
           }
         )
       ] })
@@ -57503,39 +57628,6 @@ function useAddressValidation({
     error: error ?? null
   };
 }
-function useSupportedDepositTokens(publishableKey, options2) {
-  const hasDestination = options2?.destination_token_address && options2?.destination_chain_id && options2?.destination_chain_type;
-  const filteredOptions = {
-    ...hasDestination ? {
-      destination_token_address: options2.destination_token_address,
-      destination_chain_id: options2.destination_chain_id,
-      destination_chain_type: options2.destination_chain_type
-    } : {},
-    ...options2?.product_type ? { product_type: options2.product_type } : {}
-  };
-  const hasFilteredOptions = Object.keys(filteredOptions).length > 0;
-  return useQuery({
-    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
-  });
-}
 function ThemeStyleInjector({
   children,
   className
@@ -59920,7 +60012,7 @@ function SelectTokenView({
         ),
         walletInfoProp ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-flex uf-w-full uf-justify-center uf-mb-6", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(WalletWithNetworkBadge, { walletInfo: walletInfoProp }) }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "uf-flex uf-min-h-0 uf-flex-1 uf-flex-col", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-h-[220px] uf-shrink-0 uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-space-y-2", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-flex uf-items-center uf-justify-center uf-py-12", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-h-[300px] uf-shrink-0 uf-overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:uf-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-space-y-2", children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "uf-flex uf-items-center uf-justify-center uf-py-12", children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
             LoaderCircle,
             {
               className: "uf-w-6 uf-h-6 uf-animate-spin",
@@ -62359,11 +62451,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);
     };
     getIntegrationHoldings(IntegrationProvider.COINBASE, stored.access_token, publishableKey).then(processHoldings).catch(async () => {
       try {
         const refreshResult = await refreshIntegrationToken(stored.access_token, publishableKey);
+        if (!getStoredIntegrationToken(IntegrationProvider.COINBASE)) return;
         setStoredIntegrationToken({
           integration_provider: IntegrationProvider.COINBASE,
           access_token: refreshResult.access_token,
@@ -62372,6 +62465,7 @@ function DepositModal({
         const retryResult = await getIntegrationHoldings(IntegrationProvider.COINBASE, refreshResult.access_token, publishableKey);
         processHoldings(retryResult);
       } catch {
+        if (!getStoredIntegrationToken(IntegrationProvider.COINBASE)) return;
         clearStoredIntegrationToken(IntegrationProvider.COINBASE);
         setConnectedExchange(null);
       }
@@ -62539,6 +62633,14 @@ function DepositModal({
     setBrowserWalletInfo(null);
     setBrowserWalletModalOpen(false);
   };
+  const handleExchangeDisconnect = () => {
+    const stored = getStoredIntegrationToken(IntegrationProvider.COINBASE);
+    if (stored) {
+      revokeIntegrationToken(stored.access_token, publishableKey);
+    }
+    clearStoredIntegrationToken(IntegrationProvider.COINBASE);
+    setConnectedExchange(null);
+  };
   const handleClose = () => {
     onOpenChange(false);
     if (resetViewTimeoutRef.current) {
@@ -62744,6 +62846,7 @@ function DepositModal({
                         setCoinbaseSkipToHoldings(true);
                         setView("coinbase_connect");
                       },
+                      onDisconnect: handleExchangeDisconnect,
                       title: i18n2.connectExchange.title,
                       subtitle: i18n2.connectExchange.subtitle,
                       exchanges: integrationExchanges,
@@ -62948,34 +63051,37 @@ function DepositModal({
                 ),
                 depositPoweredByFooter
               ] })
-            ] }) : view === "coinbase_connect" ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
-              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__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
+            ] }) : view === "coinbase_connect" ? /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+                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__ */ (0, import_jsx_runtime75.jsxs)(import_jsx_runtime75.Fragment, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
                 DepositHeader,
                 {