@unifold/ui-react 0.1.64 → 0.1.66

package/dist/index.mjs

@@ -7,7 +7,7 @@ import {
   useRef as useRef9,
   useMemo as useMemo10
 } from "react";
-import { ChevronRight as ChevronRight14, MapPinOff, AlertTriangle as AlertTriangle2 } from "lucide-react";
+import { ChevronRight as ChevronRight14, MapPinOff, AlertTriangle as AlertTriangle2, Bitcoin, DollarSign as DollarSign3 } from "lucide-react";
 
 // src/components/shared/dialog.tsx
 import * as React3 from "react";
@@ -97,6 +97,22 @@ function clearStoredWalletState() {
   } catch {
   }
 }
+var LAST_OPENED_WALLET_KEY = "unifold_last_opened_wallet";
+function getLastOpenedWallet() {
+  if (typeof window === "undefined") return void 0;
+  try {
+    return localStorage.getItem(LAST_OPENED_WALLET_KEY) ?? void 0;
+  } catch {
+    return void 0;
+  }
+}
+function setLastOpenedWallet(walletId) {
+  if (typeof window === "undefined") return;
+  try {
+    localStorage.setItem(LAST_OPENED_WALLET_KEY, walletId);
+  } catch {
+  }
+}
 var MOBILE_VIEWPORT_MEDIA_QUERY = "(max-width: 768px)";
 function isMobileViewport() {
   if (typeof window === "undefined") return false;
@@ -959,7 +975,7 @@ function DepositHeader({
       setShowBalanceSkeleton(false);
       return;
     }
-    const supportedChainTypes = ["ethereum", "solana", "bitcoin"];
+    const supportedChainTypes = ["ethereum", "solana", "bitcoin", "n1"];
     if (!supportedChainTypes.includes(
       balanceChainType
     )) {
@@ -11365,7 +11381,7 @@ function useHypercoreActivation(params) {
     publishableKey,
     enabled = true
   } = params;
-  const isHypercore2 = destinationChainId === HYPERCORE_CHAIN_ID;
+  const isHypercore2 = String(destinationChainId) === HYPERCORE_CHAIN_ID;
   const recipient = recipientAddress?.trim() ?? "";
   const source = sourceAddress?.trim() ?? "";
   const hasAddresses = !!recipient && !!source;
@@ -12556,9 +12572,56 @@ import {
   ExecutionStatus as ExecutionStatus5,
   buildSolanaTransaction,
   sendSolanaTransaction as sendSolanaTransactionToBackend,
-  getWalletMobileDeepLink
+  getWalletMobileDeepLink,
+  checkHypercoreActivation as checkHypercoreActivation2
 } from "@unifold/core";
 
+// src/lib/send-hypercore.ts
+import {
+  buildHypercoreTransaction as buildHypercoreTransactionFromBackend,
+  sendHypercoreTransaction as sendHypercoreTransactionToBackend
+} from "@unifold/core";
+function isHypercoreChain(chainId) {
+  return chainId === HYPERCORE_CHAIN_ID;
+}
+async function sendHypercoreEvmTransfer(params) {
+  const {
+    provider,
+    fromAddress,
+    recipientAddress,
+    sourceTokenAddress,
+    amount,
+    publishableKey
+  } = params;
+  const currentChainHex = await provider.request({
+    method: "eth_chainId",
+    params: []
+  });
+  const activeChainId = String(parseInt(currentChainHex, 16));
+  const buildResult = await buildHypercoreTransactionFromBackend(
+    {
+      signature_chain_id: activeChainId,
+      recipient_address: recipientAddress,
+      token_address: sourceTokenAddress,
+      amount
+    },
+    publishableKey
+  );
+  const signature = await provider.request({
+    method: "eth_signTypedData_v4",
+    params: [fromAddress, JSON.stringify(buildResult.typed_data)]
+  });
+  await sendHypercoreTransactionToBackend(
+    {
+      action_payload: buildResult.action_payload,
+      signature,
+      nonce: buildResult.nonce
+    },
+    publishableKey
+  );
+  return { signature };
+}
+
 // src/hooks/use-deposit-quote.ts
 import { useQuery as useQuery12 } from "@tanstack/react-query";
 import {
@@ -12991,7 +13054,8 @@ function EnterAmountView({
   onClose,
   quickSelectMode,
   checkoutAmountUsd,
-  checkoutReceivedUsd
+  checkoutReceivedUsd,
+  footer
 }) {
   const { colors: colors2, fonts, components } = useTheme();
   const isCheckout = !!checkoutAmountUsd;
@@ -13247,6 +13311,7 @@ function EnterAmountView({
               )
             ] })
           ] }),
+          footer && /* @__PURE__ */ jsx51("div", { className: "uf-shrink-0 uf-pt-2", children: footer }),
           /* @__PURE__ */ jsx51("div", { className: "uf-shrink-0 uf-pt-2", children: /* @__PURE__ */ jsx51(
             "button",
             {
@@ -13708,7 +13773,7 @@ var WALLET_ICONS3 = {
 };
 var FALLBACK_WALLET_DEFINITIONS = [
   { id: "phantom", name: "Phantom", networks: ["ethereum", "solana"], installUrl: "https://phantom.app/", supportsMobileBrowse: true },
-  { id: "coinbase", name: "Coinbase Wallet", networks: ["ethereum", "solana"], installUrl: "https://www.coinbase.com/wallet", supportsMobileBrowse: true },
+  { id: "coinbase", name: "Coinbase Wallet", networks: ["ethereum"], installUrl: "https://www.coinbase.com/wallet", supportsMobileBrowse: true },
   { id: "trust", name: "Trust Wallet", networks: ["ethereum", "solana"], installUrl: "https://trustwallet.com/", supportsMobileBrowse: true },
   { id: "metamask", name: "MetaMask", networks: ["ethereum"], installUrl: "https://metamask.io/download/", supportsMobileBrowse: true },
   { id: "rainbow", name: "Rainbow", networks: ["ethereum"], installUrl: "https://rainbow.me/", supportsMobileBrowse: true },
@@ -13768,7 +13833,7 @@ function getLegacyEvmProviders() {
     okxEthereum: win.okxwallet
   };
 }
-function detectAvailableWallets(definitions, filterChainType) {
+function detectAvailableWallets(definitions, recentWalletId, filterChainType) {
   const solProviders = getSolanaProviders();
   const legacyEvm = getLegacyEvmProviders();
   const eip6963List = getEip6963Providers();
@@ -13794,7 +13859,7 @@ function detectAvailableWallets(definitions, filterChainType) {
         return false;
     }
   });
-  return definitions.filter((w) => !filterChainType || w.networks.includes(filterChainType)).map((wallet) => {
+  const sorted = definitions.filter((w) => !filterChainType || w.networks.includes(filterChainType)).map((wallet) => {
     let isInstalled = false;
     const detectedNetworks = [];
     switch (wallet.id) {
@@ -13817,8 +13882,6 @@ function detectAvailableWallets(definitions, filterChainType) {
           isInstalled = true;
           detectedNetworks.push("ethereum");
         }
-        if (solProviders.coinbaseSolana || win?.coinbaseWalletExtension?.solana) detectedNetworks.push("solana");
-        if (isInstalled && wallet.networks.includes("solana") && !detectedNetworks.includes("solana")) detectedNetworks.push("solana");
         break;
       case "trust":
         if (hasEip6963("trust") || legacyEvm.trustEthereum || legacyEvm.ethereum?.isTrust || win?.trustwallet) {
@@ -13855,11 +13918,17 @@ function detectAvailableWallets(definitions, filterChainType) {
     }
     return { ...wallet, isInstalled, detectedNetworks };
   }).sort((a, b) => {
+    if (recentWalletId) {
+      const aRecent = a.id === recentWalletId ? 1 : 0;
+      const bRecent = b.id === recentWalletId ? 1 : 0;
+      if (aRecent !== bRecent) return bRecent - aRecent;
+    }
     if (a.isInstalled && !b.isInstalled) return -1;
     if (!a.isInstalled && b.isInstalled) return 1;
     if (a.isInstalled && b.isInstalled) return b.networks.length - a.networks.length;
     return 0;
   });
+  return sorted;
 }
 function WalletConnect({
   walletInfo: initialWalletInfo,
@@ -13934,9 +14003,15 @@ function WalletConnect({
     })) : FALLBACK_WALLET_DEFINITIONS,
     [backendWallets]
   );
+  const [recentWalletId, setRecentWalletIdState] = React30.useState(getLastOpenedWallet);
+  React30.useEffect(() => {
+    if (view === "select_wallet") {
+      setRecentWalletIdState(getLastOpenedWallet());
+    }
+  }, [view]);
   const availableWallets = React30.useMemo(
-    () => detectAvailableWallets(walletDefinitions),
-    [walletDefinitions, eip6963ProviderCount]
+    () => detectAvailableWallets(walletDefinitions, recentWalletId),
+    [walletDefinitions, eip6963ProviderCount, recentWalletId]
   );
   const [isMobile, setIsMobile] = React30.useState(false);
   React30.useEffect(() => {
@@ -13996,7 +14071,7 @@ function WalletConnect({
   const chainType = activeDepositWallet?.chain_type ?? "ethereum";
   const recipientAddress = activeDepositWallet?.address ?? "";
   const isCheckoutMode = !!checkoutAmountUsd;
-  const supportedChainType = chainType === "algorand" || chainType === "xrpl" ? "ethereum" : chainType;
+  const supportedChainType = chainType === "algorand" || chainType === "xrpl" || chainType === "cardano" || chainType === "n1" ? "ethereum" : chainType;
   const transitionTo = React30.useCallback((nextView) => {
     if (nextView === viewRef.current) return;
     setIsTransitioning(true);
@@ -14020,6 +14095,8 @@ function WalletConnect({
       );
       if (res.deeplink) {
         setMobileRedirect({ walletId: wallet.id, walletName: wallet.name, deeplink: res.deeplink });
+        setLastOpenedWallet(wallet.id);
+        setRecentWalletIdState(wallet.id);
         setAwaitingMobileDeposit(true);
         transitionTo("mobile_redirect");
         window.location.href = res.deeplink;
@@ -14080,6 +14157,8 @@ function WalletConnect({
   const handleConnectWallet = async (wallet, network) => {
     setConnectingNetwork(network);
     transitionTo("connecting");
+    setLastOpenedWallet(wallet.id);
+    setRecentWalletIdState(wallet.id);
     setWalletError(null);
     setIsWalletConnecting(true);
     try {
@@ -14184,6 +14263,13 @@ function WalletConnect({
     }
   };
   const selectedToken = selectedBalance ? getTokenFromBalance(selectedBalance) : null;
+  const { needsActivation: hypercoreNeedsActivation, activationFee: hypercoreActivationFee, sponsored: hypercoreActivationSponsored } = useHypercoreActivation({
+    recipientAddress,
+    sourceAddress: activeWalletInfo?.address,
+    destinationChainId: selectedToken?.chain_id,
+    publishableKey,
+    enabled: !!activeWalletInfo && !!recipientAddress
+  });
   const effectiveDestinationAmount = React30.useMemo(() => {
     if (!checkoutRemainingBaseUnits || checkoutRemainingBaseUnits === "0") return "0";
     if (!checkoutAmountUsd) return checkoutRemainingBaseUnits;
@@ -14288,7 +14374,7 @@ function WalletConnect({
     let cancelled = false;
     setIsLoading(true);
     setError(null);
-    const sct = activeDepositWallet.chain_type === "algorand" || activeDepositWallet.chain_type === "xrpl" ? "ethereum" : activeDepositWallet.chain_type;
+    const sct = activeDepositWallet.chain_type === "algorand" || activeDepositWallet.chain_type === "xrpl" || activeDepositWallet.chain_type === "cardano" || activeDepositWallet.chain_type === "n1" ? "ethereum" : activeDepositWallet.chain_type;
     getAddressBalances2(activeWalletInfo.address, sct, publishableKey).then((response) => {
       if (cancelled) return;
       const nonZero = response.balances.filter((b) => b.amount !== "0");
@@ -14454,9 +14540,16 @@ function WalletConnect({
     const [integerPart = "0", decimalPart = ""] = amountStr.trim().split(".");
     return (integerPart + decimalPart.padEnd(decimals, "0").slice(0, decimals)).replace(/^0+/, "") || "0";
   };
-  const sendEthereumTransaction = async (token, amountStr) => {
-    if (!recipientAddress || !/^0x[a-fA-F0-9]{40}$/.test(recipientAddress)) throw new Error(`Invalid recipient address.`);
-    const walletIdMap = { "phantom-ethereum": "phantom", coinbase: "coinbase", trust: "trust", okx: "okx", rainbow: "rainbow", rabby: "rabby", metamask: "metamask" };
+  const resolveEvmProvider = () => {
+    const walletIdMap = {
+      "phantom-ethereum": "phantom",
+      coinbase: "coinbase",
+      trust: "trust",
+      okx: "okx",
+      rainbow: "rainbow",
+      rabby: "rabby",
+      metamask: "metamask"
+    };
     const lookupId = walletIdMap[walletInfo.type] || walletInfo.type;
     const eip6963Match = findProviderByWalletId(lookupId);
     let provider = eip6963Match?.provider;
@@ -14465,6 +14558,11 @@ function WalletConnect({
       else if (walletInfo.type === "coinbase") provider = window.coinbaseWalletExtension || window.ethereum;
       else provider = window.ethereum;
     }
+    return provider;
+  };
+  const sendEthereumTransaction = async (token, amountStr) => {
+    if (!recipientAddress || !/^0x[a-fA-F0-9]{40}$/.test(recipientAddress)) throw new Error(`Invalid recipient address.`);
+    const provider = resolveEvmProvider();
     if (!provider) throw new Error("Ethereum wallet not found");
     const currentChainIdHex = await provider.request({ method: "eth_chainId", params: [] });
     if (parseInt(currentChainIdHex, 16).toString() !== token.chain_id) {
@@ -14529,6 +14627,19 @@ function WalletConnect({
     const resp = await sendSolanaTransactionToBackend({ chain_id: "mainnet", signed_transaction: btoa(bs) }, publishableKey);
     return resp.signature;
   };
+  const sendHypercoreDeposit = async (token, amountStr) => {
+    const provider = resolveEvmProvider();
+    if (!provider) throw new Error("Ethereum wallet not found");
+    const { signature } = await sendHypercoreEvmTransfer({
+      provider,
+      fromAddress: walletInfo.address,
+      recipientAddress,
+      sourceTokenAddress: token.token_address,
+      amount: amountStr,
+      publishableKey
+    });
+    return signature;
+  };
   const handleConfirm = async () => {
     if (!hasWallet || !selectedBalance || !amountUsd || tokenAmount === 0 || !recipientAddress) return;
     const token = getTokenFromBalance(selectedBalance);
@@ -14548,7 +14659,33 @@ function WalletConnect({
     setIsConfirming(true);
     setError(null);
     try {
-      const txHash = token.chain_type === "solana" ? await sendSolanaTransaction(token, tokenAmount.toString()) : await sendEthereumTransaction(token, tokenAmount.toString());
+      const isHypercoreToken = String(token.chain_id) === HYPERCORE_CHAIN_ID;
+      let txHash;
+      if (token.chain_type === "solana") {
+        txHash = await sendSolanaTransaction(token, tokenAmount.toString());
+      } else if (isHypercoreToken) {
+        let sendAmount = tokenAmount;
+        try {
+          const activation = await checkHypercoreActivation2(
+            { source_address: walletInfo.address, recipient_address: recipientAddress },
+            publishableKey
+          );
+          if (!activation.user_exists) {
+            const fee = activation.activation_fee;
+            if (!Number.isFinite(tokenAmount) || tokenAmount <= fee) {
+              throw new Error(
+                `Insufficient amount. A ${fee} USDC activation fee is required for the first transfer to this address.`
+              );
+            }
+            sendAmount = tokenAmount - fee;
+          }
+        } catch (e) {
+          if (e instanceof Error && e.message.includes("activation fee")) throw e;
+        }
+        txHash = await sendHypercoreDeposit(token, sendAmount.toString());
+      } else {
+        txHash = await sendEthereumTransaction(token, tokenAmount.toString());
+      }
       setReceivedUsdAtSubmission(checkoutReceivedUsd ?? "0");
       setHasSignedTransaction(true);
       handleIveDeposited();
@@ -14587,7 +14724,10 @@ function WalletConnect({
               children: [
                 /* @__PURE__ */ jsxs48("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
                   WALLET_ICONS3[wallet.id] ? /* @__PURE__ */ jsx54(WalletIconWithNetwork, { WalletIcon: WALLET_ICONS3[wallet.id], networks: wallet.networks, size: 40, className: "uf-rounded-lg" }) : /* @__PURE__ */ jsx54("div", { className: "uf-w-10 uf-h-10 uf-rounded-lg uf-bg-gray-500" }),
-                  /* @__PURE__ */ jsx54("div", { className: "uf-text-sm uf-font-medium", style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: wallet.name })
+                  /* @__PURE__ */ jsxs48("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
+                    /* @__PURE__ */ jsx54("div", { className: "uf-text-sm uf-font-medium", style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: wallet.name }),
+                    wallet.id === recentWalletId && /* @__PURE__ */ jsx54("span", { className: "uf-text-xs uf-px-2 uf-py-0.5 uf-rounded-full", style: { backgroundColor: colors2.primary + "20", color: colors2.primary, fontFamily: fonts.medium }, children: "Last used" })
+                  ] })
                 ] }),
                 isPending ? /* @__PURE__ */ jsx54(Loader28, { className: "uf-w-4 uf-h-4 uf-animate-spin", style: { color: colors2.primary } }) : wallet.isInstalled ? /* @__PURE__ */ jsx54("span", { className: "uf-text-xs uf-px-2 uf-py-1 uf-rounded-full", style: { backgroundColor: colors2.primary + "20", color: colors2.primary, fontFamily: fonts.medium }, children: "Detected" }) : /* @__PURE__ */ jsxs48("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
                   /* @__PURE__ */ jsx54("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: showOpenInApp ? "Open" : "Install" }),
@@ -14766,7 +14906,7 @@ function WalletConnect({
   }
   if (view === "enter_amount" && selectedToken && selectedBalance) {
     return /* @__PURE__ */ jsx54(AccentColorOverride, { accentColor: walletAccent, accentForeground: walletAccentForeground, children: /* @__PURE__ */ jsx54("div", { style: viewTransitionStyle, children: /* @__PURE__ */ jsx54(EnterAmountView, { walletInfo, selectedBalance, selectedToken, amountUsd, formattedTokenAmount, tokenChainDetails, inputUsdNum, maxUsdAmount, isValidAmount, error, onAmountChange: setAmountUsd, onMaxClick: handleMaxClick, onReview: handleReview, onBack: handleBack, onClose: onClose ?? (() => {
-    }), quickSelectMode: amountQuickSelect, checkoutAmountUsd, checkoutReceivedUsd }) }) });
+    }), quickSelectMode: amountQuickSelect, checkoutAmountUsd, checkoutReceivedUsd, footer: hypercoreNeedsActivation && !hypercoreActivationSponsored ? /* @__PURE__ */ jsx54(HypercoreActivationWarning, { activationFee: hypercoreActivationFee }) : void 0 }) }) });
   }
   if (view === "review" && selectedToken) {
     return /* @__PURE__ */ jsx54(AccentColorOverride, { accentColor: walletAccent, accentForeground: walletAccentForeground, children: /* @__PURE__ */ jsx54("div", { style: viewTransitionStyle, children: /* @__PURE__ */ jsx54(ReviewView, { walletInfo, recipientAddress, assetCdnUrl, selectedToken, amountUsd, formattedTokenAmount, tokenChainDetails, loadingTokenDetails, showTransactionDetails, isConfirming, error, onToggleDetails: () => setShowTransactionDetails(!showTransactionDetails), onConfirm: handleConfirm, onBack: handleBack, onClose: onClose ?? (() => {
@@ -14805,6 +14945,9 @@ function SkeletonButton({
   ] });
 }
 var t7 = i18n.depositModal;
+function depositTabForScreen(screen) {
+  return screen === "card" || screen === "cashapp" ? "cash" : "crypto";
+}
 function DepositModal({
   open,
   onOpenChange,
@@ -14840,6 +14983,7 @@ function DepositModal({
   theme = "dark",
   hideOverlay = false,
   initialScreen = "main",
+  displayMode = "stacked",
   transferCryptoTitle = t7.transferCrypto.title,
   depositWithCardTitle = t7.depositWithCard.title,
   payWithExchangeTitle = t7.payWithExchange.title,
@@ -14874,6 +15018,9 @@ function DepositModal({
     effectiveInitialScreen
   );
   const [coinbaseSkipToHoldings, setCoinbaseSkipToHoldings] = useState32(false);
+  const [depositTab, setDepositTab] = useState32(
+    () => depositTabForScreen(effectiveInitialScreen)
+  );
   const resetViewTimeoutRef = useRef9(null);
   const [cardView, setCardView] = useState32(
     "amount"
@@ -15171,6 +15318,7 @@ function DepositModal({
       resetViewTimeoutRef.current = null;
     }
     setView(effectiveInitialScreen);
+    setDepositTab(depositTabForScreen(effectiveInitialScreen));
     setCardView("amount");
     setExchangeView("providers");
     setBrowserWalletInfo(null);
@@ -15199,6 +15347,7 @@ function DepositModal({
     } else if (view === "cashapp" && cashAppView !== "amount") {
       setCashAppView("amount");
     } else {
+      setDepositTab(depositTabForScreen(view));
       setView("main");
       setCardView("amount");
       setExchangeView("providers");
@@ -15278,6 +15427,184 @@ function DepositModal({
       className: "uf-flex uf-justify-center uf-shrink-0"
     }
   ) });
+  const transferCryptoMenuButton = showTransferCrypto ? /* @__PURE__ */ jsx55(
+    TransferCryptoButton,
+    {
+      onClick: () => setView("transfer"),
+      title: transferCryptoTitle,
+      subtitle: t7.transferCrypto.subtitle,
+      featuredTokens: projectConfig?.transfer_crypto.networks
+    },
+    "transfer"
+  ) : null;
+  const connectWalletMenuButton = showConnectWallet ? /* @__PURE__ */ jsx55(
+    BrowserWalletButton,
+    {
+      onClick: handleBrowserWalletClick,
+      onConnectClick: handleWalletConnectClick,
+      onDisconnect: handleWalletDisconnect,
+      chainType: browserWalletChainType,
+      publishableKey,
+      featuredWallets: projectConfig?.connect_wallet?.wallets
+    },
+    "wallet"
+  ) : null;
+  const depositWithCardMenuButton = showFiatOnramp ? /* @__PURE__ */ jsx55(
+    DepositWithCardButton,
+    {
+      onClick: () => setView("card"),
+      title: depositWithCardTitle,
+      subtitle: t7.depositWithCard.subtitle,
+      paymentNetworks: projectConfig?.payment_networks.networks
+    },
+    "card"
+  ) : null;
+  const payWithExchangeMenuButton = showPayWithExchange ? /* @__PURE__ */ jsx55(
+    PayWithExchangeButton,
+    {
+      onClick: () => setView("exchange"),
+      title: payWithExchangeTitle,
+      subtitle: t7.payWithExchange.subtitle,
+      exchanges,
+      loading: exchangesLoading
+    },
+    "exchange"
+  ) : null;
+  const connectExchangeMenuButton = showConnectExchange && connectedExchange ? /* @__PURE__ */ jsx55(
+    ConnectExchangeButton,
+    {
+      onClick: () => {
+        setCoinbaseSkipToHoldings(true);
+        setView("coinbase_connect");
+      },
+      onDisconnect: handleExchangeDisconnect,
+      title: i18n.connectExchange.title,
+      subtitle: i18n.connectExchange.subtitle,
+      exchanges: integrationExchanges,
+      connectedExchange
+    },
+    "connect-exchange"
+  ) : showConnectExchange && !connectedExchange ? /* @__PURE__ */ jsx55(
+    ConnectExchangeButton,
+    {
+      onClick: () => {
+        setCoinbaseSkipToHoldings(false);
+        setView("coinbase_connect");
+      },
+      title: i18n.connectExchange.title,
+      subtitle: i18n.connectExchange.subtitle,
+      exchanges: integrationExchanges
+    },
+    "connect-exchange"
+  ) : null;
+  const cashAppMenuButton = showCashApp ? /* @__PURE__ */ jsx55(
+    CashAppButton,
+    {
+      onClick: () => setView("cashapp"),
+      title: "Pay with Cash App",
+      subtitle: "Deposit via Cash App",
+      iconUrl: projectConfig?.asset_cdn_url ? `${projectConfig.asset_cdn_url}/api/public/icons/onramps/svg/cashapp.svg` : void 0
+    },
+    "cashapp"
+  ) : null;
+  const depositTrackerMenuButton = showDepositTracker ? /* @__PURE__ */ jsx55(
+    DepositTrackerButton,
+    {
+      onClick: () => {
+        setAllExecutions(depositExecutions);
+        setView("tracker");
+      },
+      title: depositTrackerTitle,
+      subtitle: depositTrackerSubTitle,
+      badge: depositExecutions.length > 0 ? depositExecutions.length : void 0
+    },
+    "tracker"
+  ) : null;
+  const cryptoMenuButtons = [
+    transferCryptoMenuButton,
+    connectWalletMenuButton,
+    payWithExchangeMenuButton,
+    connectExchangeMenuButton
+  ].filter(Boolean);
+  const cashMenuButtons = [
+    depositWithCardMenuButton,
+    cashAppMenuButton
+  ].filter(Boolean);
+  const depositTabs = [
+    { id: "crypto", label: "Use Crypto", icon: Bitcoin, buttons: cryptoMenuButtons },
+    { id: "cash", label: "Use Cash", icon: DollarSign3, buttons: cashMenuButtons }
+  ].filter((tab) => tab.buttons.length > 0);
+  const activeDepositTab = depositTabs.find((tab) => tab.id === depositTab) ?? depositTabs[0];
+  const renderMainMenuBody = () => {
+    if (depositPrerequisiteBody) {
+      return /* @__PURE__ */ jsx55("div", { className: "uf-space-y-3", children: depositPrerequisiteBody });
+    }
+    if (displayMode === "tabs" && activeDepositTab) {
+      return /* @__PURE__ */ jsxs49("div", { children: [
+        depositTabs.length > 1 && /* @__PURE__ */ jsx55(
+          "div",
+          {
+            className: "uf-flex uf-gap-1 uf-p-1 uf-rounded-xl uf-mb-3",
+            style: {
+              // Frosted-glass track: a translucent fill plus a backdrop blur so
+              // the control reads as a soft surface rather than a solid bar.
+              backgroundColor: `color-mix(in srgb, ${colors2.card} 55%, transparent)`,
+              backdropFilter: "blur(12px)",
+              WebkitBackdropFilter: "blur(12px)"
+            },
+            role: "tablist",
+            children: depositTabs.map((tab) => {
+              const active = activeDepositTab.id === tab.id;
+              const TabIcon = tab.icon;
+              return /* @__PURE__ */ jsxs49(
+                "button",
+                {
+                  type: "button",
+                  role: "tab",
+                  "aria-selected": active,
+                  onClick: () => setDepositTab(tab.id),
+                  className: "uf-flex-1 uf-py-2 uf-px-3 uf-rounded-lg uf-text-sm uf-transition-all uf-flex uf-items-center uf-justify-center uf-gap-1.5",
+                  style: {
+                    backgroundColor: active ? `color-mix(in srgb, ${colors2.primary} 22%, transparent)` : "transparent",
+                    backdropFilter: active ? "blur(8px)" : void 0,
+                    WebkitBackdropFilter: active ? "blur(8px)" : void 0,
+                    boxShadow: active ? `0 1px 8px color-mix(in srgb, ${colors2.primary} 25%, transparent)` : void 0,
+                    color: active ? colors2.foreground : colors2.foregroundMuted,
+                    fontFamily: fonts.medium
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx55(
+                      "span",
+                      {
+                        className: "uf-inline-flex uf-items-center uf-justify-center uf-rounded-full uf-w-5 uf-h-5 uf-flex-shrink-0",
+                        style: {
+                          backgroundColor: active ? colors2.foreground : colors2.foregroundMuted
+                        },
+                        children: /* @__PURE__ */ jsx55(TabIcon, { size: 12, style: { color: active ? colors2.background : colors2.background }, strokeWidth: 2.5 })
+                      }
+                    ),
+                    tab.label
+                  ]
+                },
+                tab.id
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ jsx55("div", { className: "uf-space-y-3", children: activeDepositTab.buttons }),
+        depositTrackerMenuButton && /* @__PURE__ */ jsx55("div", { className: "uf-mt-3", children: depositTrackerMenuButton })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs49("div", { className: "uf-space-y-3", children: [
+      transferCryptoMenuButton,
+      connectWalletMenuButton,
+      depositWithCardMenuButton,
+      payWithExchangeMenuButton,
+      connectExchangeMenuButton,
+      cashAppMenuButton,
+      depositTrackerMenuButton
+    ] });
+  };
   return /* @__PURE__ */ jsx55(PortalContainerProvider, { value: hideOverlay ? containerEl : null, children: /* @__PURE__ */ jsx55(
     Dialog,
     {
@@ -15304,7 +15631,7 @@ function DepositModal({
                   onClose: handleClose,
                   showBalance: showBalanceHeader,
                   balanceAddress: recipientAddress,
-                  balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" ? destinationChainType : void 0,
+                  balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" || destinationChainType === "n1" ? destinationChainType : void 0,
                   balanceChainId: destinationChainId,
                   balanceTokenAddress: destinationTokenAddress,
                   projectName: projectConfig?.project_name,
@@ -15312,94 +15639,7 @@ function DepositModal({
                 }
               ),
               /* @__PURE__ */ jsxs49("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
-                /* @__PURE__ */ jsx55("div", { className: "uf-space-y-3", children: depositPrerequisiteBody ?? /* @__PURE__ */ jsxs49(Fragment11, { children: [
-                  showTransferCrypto && /* @__PURE__ */ jsx55(
-                    TransferCryptoButton,
-                    {
-                      onClick: () => setView("transfer"),
-                      title: transferCryptoTitle,
-                      subtitle: t7.transferCrypto.subtitle,
-                      featuredTokens: projectConfig?.transfer_crypto.networks
-                    }
-                  ),
-                  showConnectWallet && /* @__PURE__ */ jsx55(
-                    BrowserWalletButton,
-                    {
-                      onClick: handleBrowserWalletClick,
-                      onConnectClick: handleWalletConnectClick,
-                      onDisconnect: handleWalletDisconnect,
-                      chainType: browserWalletChainType,
-                      publishableKey,
-                      featuredWallets: projectConfig?.connect_wallet?.wallets
-                    }
-                  ),
-                  showFiatOnramp && /* @__PURE__ */ jsx55(
-                    DepositWithCardButton,
-                    {
-                      onClick: () => setView("card"),
-                      title: depositWithCardTitle,
-                      subtitle: t7.depositWithCard.subtitle,
-                      paymentNetworks: projectConfig?.payment_networks.networks
-                    }
-                  ),
-                  showPayWithExchange && /* @__PURE__ */ jsx55(
-                    PayWithExchangeButton,
-                    {
-                      onClick: () => setView("exchange"),
-                      title: payWithExchangeTitle,
-                      subtitle: t7.payWithExchange.subtitle,
-                      exchanges,
-                      loading: exchangesLoading
-                    }
-                  ),
-                  showConnectExchange && connectedExchange && /* @__PURE__ */ jsx55(
-                    ConnectExchangeButton,
-                    {
-                      onClick: () => {
-                        setCoinbaseSkipToHoldings(true);
-                        setView("coinbase_connect");
-                      },
-                      onDisconnect: handleExchangeDisconnect,
-                      title: i18n.connectExchange.title,
-                      subtitle: i18n.connectExchange.subtitle,
-                      exchanges: integrationExchanges,
-                      connectedExchange
-                    }
-                  ),
-                  showConnectExchange && !connectedExchange && /* @__PURE__ */ jsx55(
-                    ConnectExchangeButton,
-                    {
-                      onClick: () => {
-                        setCoinbaseSkipToHoldings(false);
-                        setView("coinbase_connect");
-                      },
-                      title: i18n.connectExchange.title,
-                      subtitle: i18n.connectExchange.subtitle,
-                      exchanges: integrationExchanges
-                    }
-                  ),
-                  showCashApp && /* @__PURE__ */ jsx55(
-                    CashAppButton,
-                    {
-                      onClick: () => setView("cashapp"),
-                      title: "Pay with Cash App",
-                      subtitle: "Deposit via Cash App",
-                      iconUrl: projectConfig?.asset_cdn_url ? `${projectConfig.asset_cdn_url}/api/public/icons/onramps/svg/cashapp.svg` : void 0
-                    }
-                  ),
-                  showDepositTracker && /* @__PURE__ */ jsx55(
-                    DepositTrackerButton,
-                    {
-                      onClick: () => {
-                        setAllExecutions(depositExecutions);
-                        setView("tracker");
-                      },
-                      title: depositTrackerTitle,
-                      subtitle: depositTrackerSubTitle,
-                      badge: depositExecutions.length > 0 ? depositExecutions.length : void 0
-                    }
-                  )
-                ] }) }),
+                renderMainMenuBody(),
                 depositPoweredByFooter
               ] })
             ] }) : view === "transfer" ? /* @__PURE__ */ jsxs49(Fragment11, { children: [
@@ -15412,7 +15652,7 @@ function DepositModal({
                   onClose: handleClose,
                   showBalance: showBalanceHeader,
                   balanceAddress: recipientAddress,
-                  balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" ? destinationChainType : void 0,
+                  balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" || destinationChainType === "n1" ? destinationChainType : void 0,
                   balanceChainId: destinationChainId,
                   balanceTokenAddress: destinationTokenAddress,
                   projectName: projectConfig?.project_name,
@@ -15500,7 +15740,7 @@ function DepositModal({
                   badge: cardView === "quotes" ? { count: quotesCount } : void 0,
                   showBalance: showBalanceHeader,
                   balanceAddress: recipientAddress,
-                  balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" ? destinationChainType : void 0,
+                  balanceChainType: destinationChainType === "ethereum" || destinationChainType === "solana" || destinationChainType === "bitcoin" || destinationChainType === "n1" ? destinationChainType : void 0,
                   balanceChainId: destinationChainId,
                   balanceTokenAddress: destinationTokenAddress,
                   projectName: projectConfig?.project_name,
@@ -16828,13 +17068,13 @@ import {
   ChevronUp as ChevronUp7,
   Clock as Clock5,
   ClipboardPaste,
-  DollarSign as DollarSign3,
+  DollarSign as DollarSign4,
   Loader2 as Loader29,
   ShieldCheck as ShieldCheck3,
   Wallet as Wallet3
 } from "lucide-react";
 import {
-  checkHypercoreActivation as checkHypercoreActivation2
+  checkHypercoreActivation as checkHypercoreActivation3
 } from "@unifold/core";
 
 // src/hooks/use-verify-recipient-address.ts
@@ -16882,9 +17122,7 @@ function useVerifyRecipientAddress(params) {
 // src/components/withdrawals/send-withdraw.ts
 import {
   buildSolanaTransaction as buildSolanaTransaction2,
-  sendSolanaTransaction as sendSolanaTransactionToBackend2,
-  buildHypercoreTransaction as buildHypercoreTransactionFromBackend,
-  sendHypercoreTransaction as sendHypercoreTransactionToBackend
+  sendSolanaTransaction as sendSolanaTransactionToBackend2
 } from "@unifold/core";
 async function sendEvmWithdraw(params) {
   const {
@@ -16995,50 +17233,15 @@ async function sendSolanaWithdraw(params) {
   );
   return sendResponse.signature;
 }
-var HYPERCORE_SPOT_USDC_ADDRESS = "0x6d1e7cde53ba9467b783cb7c530ce054";
-function isHypercoreChain(chainId) {
-  return chainId === HYPERCORE_CHAIN_ID;
-}
 async function sendHypercoreWithdraw(params) {
-  const {
-    provider,
-    fromAddress,
-    depositWalletAddress,
-    sourceTokenAddress,
-    amount,
-    tokenSymbol,
-    publishableKey
-  } = params;
-  const isSpot = sourceTokenAddress.toLowerCase() === HYPERCORE_SPOT_USDC_ADDRESS;
-  const currentChainHex = await provider.request({
-    method: "eth_chainId",
-    params: []
+  await sendHypercoreEvmTransfer({
+    provider: params.provider,
+    fromAddress: params.fromAddress,
+    recipientAddress: params.depositWalletAddress,
+    sourceTokenAddress: params.sourceTokenAddress,
+    amount: params.amount,
+    publishableKey: params.publishableKey
   });
-  const activeChainId = String(parseInt(currentChainHex, 16));
-  const buildResult = await buildHypercoreTransactionFromBackend(
-    {
-      action_type: isSpot ? "spot_send" : "usd_send",
-      signature_chain_type: "ethereum",
-      signature_chain_id: activeChainId,
-      recipient_address: depositWalletAddress,
-      token_address: sourceTokenAddress,
-      token_symbol: tokenSymbol || void 0,
-      amount
-    },
-    publishableKey
-  );
-  const signature = await provider.request({
-    method: "eth_signTypedData_v4",
-    params: [fromAddress, JSON.stringify(buildResult.typed_data)]
-  });
-  await sendHypercoreTransactionToBackend(
-    {
-      action_payload: buildResult.action_payload,
-      signature,
-      nonce: buildResult.nonce
-    },
-    publishableKey
-  );
 }
 async function detectBrowserWallet(chainType, senderAddress) {
   const win = typeof window !== "undefined" ? window : null;
@@ -17474,7 +17677,7 @@ function WithdrawForm({
       let humanAmount = isMaxed ? balanceData.balanceHuman : toSafeDecimalString(cryptoAmountFromInput, sourceDecimals);
       if (isHypercoreChain(sourceChainId)) {
         try {
-          const check = await checkHypercoreActivation2(
+          const check = await checkHypercoreActivation3(
             {
               source_address: senderAddress,
               recipient_address: depositWallet.address
@@ -17738,7 +17941,7 @@ function WithdrawForm({
           ] })
         ] }),
         /* @__PURE__ */ jsxs52("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
-          /* @__PURE__ */ jsx58("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ jsx58(DollarSign3, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
+          /* @__PURE__ */ jsx58("div", { className: "uf-rounded-full uf-p-1", style: { backgroundColor: components.card.iconBackgroundColor }, children: /* @__PURE__ */ jsx58(DollarSign4, { className: "uf-w-3 uf-h-3", style: { color: components.card.iconColor } }) }),
           /* @__PURE__ */ jsxs52("span", { className: "uf-text-xs", style: { color: components.card.labelColor, fontFamily: fonts.regular }, children: [
             tCrypto.priceImpact.label,
             ":",
@@ -18070,8 +18273,6 @@ function WithdrawConfirmingView({
           className: "uf-text-sm uf-text-center",
           style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
           children: [
-            txInfo.amount,
-            " ",
             txInfo.sourceTokenSymbol,
             " to",
             " ",