@unifold/ui-web 0.1.64 → 0.1.66

package/dist/index.js

@@ -38524,6 +38524,15 @@ var ArrowUpDown = createLucideIcon("ArrowUpDown", [
   ["path", { d: "m3 8 4-4 4 4", key: "11wl7u" }],
   ["path", { d: "M7 4v16", key: "1glfcx" }]
 ]);
+var Bitcoin = createLucideIcon("Bitcoin", [
+  [
+    "path",
+    {
+      d: "M11.767 19.089c4.924.868 6.14-6.025 1.216-6.894m-1.216 6.894L5.86 18.047m5.908 1.042-.347 1.97m1.563-8.864c4.924.869 6.14-6.025 1.215-6.893m-1.215 6.893-3.94-.694m5.155-6.2L8.29 4.26m5.908 1.042.348-1.97M7.48 20.364l3.126-17.727",
+      key: "yr8idg"
+    }
+  ]
+]);
 var Check = createLucideIcon("Check", [["path", { d: "M20 6 9 17l-5-5", key: "1gmf2c" }]]);
 var ChevronDown = createLucideIcon("ChevronDown", [
   ["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]
@@ -43986,6 +43995,29 @@ async function getDepositQuote(request, publishableKey) {
   const json = await response.json();
   return json.data;
 }
+async function buildHypercoreTransaction(request, publishableKey) {
+  const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
+  validatePublishableKey(pk);
+  const response = await fetch(
+    `${API_BASE_URL}/v1/public/transactions/hypercore/build`,
+    {
+      method: "POST",
+      headers: {
+        accept: "application/json",
+        "x-publishable-key": pk,
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(request)
+    }
+  );
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ message: response.statusText }));
+    throw new Error(
+      `Failed to build HyperCore transaction: ${error.message || response.statusText}`
+    );
+  }
+  return response.json();
+}
 async function getCashAppLimits(currency = "usd", publishableKey) {
   const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
   validatePublishableKey(pk);
@@ -44051,6 +44083,29 @@ async function getCashAppSessionStatus(externalId, publishableKey) {
   }
   return response.json();
 }
+async function sendHypercoreTransaction(request, publishableKey) {
+  const pk = publishableKey || DEFAULT_PUBLISHABLE_KEY;
+  validatePublishableKey(pk);
+  const response = await fetch(
+    `${API_BASE_URL}/v1/public/transactions/hypercore/send`,
+    {
+      method: "POST",
+      headers: {
+        accept: "application/json",
+        "x-publishable-key": pk,
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify(request)
+    }
+  );
+  if (!response.ok) {
+    const error = await response.json().catch(() => ({ message: response.statusText }));
+    throw new Error(
+      `Failed to send HyperCore transaction: ${error.message || response.statusText}`
+    );
+  }
+  return response.json();
+}
 var DepositEventType = /* @__PURE__ */ ((DepositEventType2) => {
   DepositEventType2["ONRAMP_SESSION_CREATED"] = "onramp_session.created";
   return DepositEventType2;
@@ -50227,6 +50282,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;
@@ -51032,7 +51103,7 @@ function DepositHeader({
       setShowBalanceSkeleton(false);
       return;
     }
-    const supportedChainTypes = ["ethereum", "solana", "bitcoin"];
+    const supportedChainTypes = ["ethereum", "solana", "bitcoin", "n1"];
     if (!supportedChainTypes.includes(
       balanceChainType
     )) {
@@ -61050,7 +61121,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;
@@ -62196,6 +62267,46 @@ function TransferCryptoDoubleInput({
     }
   ) });
 }
+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 buildHypercoreTransaction(
+    {
+      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 sendHypercoreTransaction(
+    {
+      action_payload: buildResult.action_payload,
+      signature,
+      nonce: buildResult.nonce
+    },
+    publishableKey
+  );
+  return { signature };
+}
 function useDepositQuote(params) {
   const {
     publishableKey,
@@ -62603,7 +62714,8 @@ function EnterAmountView({
   onClose,
   quickSelectMode,
   checkoutAmountUsd,
-  checkoutReceivedUsd
+  checkoutReceivedUsd,
+  footer
 }) {
   const { colors: colors2, fonts, components } = useTheme();
   const isCheckout = !!checkoutAmountUsd;
@@ -62859,6 +62971,7 @@ function EnterAmountView({
               )
             ] })
           ] }),
+          footer && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "uf-shrink-0 uf-pt-2", children: footer }),
           /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "uf-shrink-0 uf-pt-2", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
             "button",
             {
@@ -63308,7 +63421,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 },
@@ -63368,7 +63481,7 @@ function getLegacyEvmProviders() {
     okxEthereum: win.okxwallet
   };
 }
-function detectAvailableWallets(definitions, filterChainType) {
+function detectAvailableWallets(definitions, recentWalletId, filterChainType) {
   const solProviders = getSolanaProviders();
   const legacyEvm = getLegacyEvmProviders();
   const eip6963List = getEip6963Providers();
@@ -63394,7 +63507,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) {
@@ -63417,8 +63530,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) {
@@ -63455,11 +63566,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,
@@ -63534,9 +63651,15 @@ function WalletConnect({
     })) : FALLBACK_WALLET_DEFINITIONS,
     [backendWallets]
   );
+  const [recentWalletId, setRecentWalletIdState] = React302.useState(getLastOpenedWallet);
+  React302.useEffect(() => {
+    if (view === "select_wallet") {
+      setRecentWalletIdState(getLastOpenedWallet());
+    }
+  }, [view]);
   const availableWallets = React302.useMemo(
-    () => detectAvailableWallets(walletDefinitions),
-    [walletDefinitions, eip6963ProviderCount]
+    () => detectAvailableWallets(walletDefinitions, recentWalletId),
+    [walletDefinitions, eip6963ProviderCount, recentWalletId]
   );
   const [isMobile, setIsMobile] = React302.useState(false);
   React302.useEffect(() => {
@@ -63596,7 +63719,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 = React302.useCallback((nextView) => {
     if (nextView === viewRef.current) return;
     setIsTransitioning(true);
@@ -63620,6 +63743,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;
@@ -63680,6 +63805,8 @@ function WalletConnect({
   const handleConnectWallet = async (wallet, network) => {
     setConnectingNetwork(network);
     transitionTo("connecting");
+    setLastOpenedWallet(wallet.id);
+    setRecentWalletIdState(wallet.id);
     setWalletError(null);
     setIsWalletConnecting(true);
     try {
@@ -63784,6 +63911,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 = React302.useMemo(() => {
     if (!checkoutRemainingBaseUnits || checkoutRemainingBaseUnits === "0") return "0";
     if (!checkoutAmountUsd) return checkoutRemainingBaseUnits;
@@ -63888,7 +64022,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;
     getAddressBalances(activeWalletInfo.address, sct, publishableKey).then((response) => {
       if (cancelled) return;
       const nonZero = response.balances.filter((b) => b.amount !== "0");
@@ -64054,9 +64188,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;
@@ -64065,6 +64206,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) {
@@ -64129,6 +64275,19 @@ function WalletConnect({
     const resp = await sendSolanaTransaction({ 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);
@@ -64148,7 +64307,33 @@ function WalletConnect({
     setIsConfirming(true);
     setError(null);
     try {
-      const txHash = token.chain_type === "solana" ? await sendSolanaTransaction2(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 sendSolanaTransaction2(token, tokenAmount.toString());
+      } else if (isHypercoreToken) {
+        let sendAmount = tokenAmount;
+        try {
+          const activation = await checkHypercoreActivation(
+            { 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();
@@ -64187,7 +64372,10 @@ function WalletConnect({
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-3", children: [
                   WALLET_ICONS3[wallet.id] ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(WalletIconWithNetwork, { WalletIcon: WALLET_ICONS3[wallet.id], networks: wallet.networks, size: 40, className: "uf-rounded-lg" }) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-w-10 uf-h-10 uf-rounded-lg uf-bg-gray-500" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-text-sm uf-font-medium", style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: wallet.name })
+                  /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-2", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "uf-text-sm uf-font-medium", style: { color: components.card.titleColor, fontFamily: fonts.medium }, children: wallet.name }),
+                    wallet.id === recentWalletId && /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("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__ */ (0, import_jsx_runtime73.jsx)(LoaderCircle, { className: "uf-w-4 uf-h-4 uf-animate-spin", style: { color: colors2.primary } }) : wallet.isInstalled ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("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__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "uf-flex uf-items-center uf-gap-1", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "uf-text-xs", style: { color: colors2.foregroundMuted, fontFamily: fonts.regular }, children: showOpenInApp ? "Open" : "Install" }),
@@ -64366,7 +64554,7 @@ function WalletConnect({
   }
   if (view === "enter_amount" && selectedToken && selectedBalance) {
     return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(AccentColorOverride, { accentColor: walletAccent, accentForeground: walletAccentForeground, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { style: viewTransitionStyle, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(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__ */ (0, import_jsx_runtime73.jsx)(HypercoreActivationWarning, { activationFee: hypercoreActivationFee }) : void 0 }) }) });
   }
   if (view === "review" && selectedToken) {
     return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(AccentColorOverride, { accentColor: walletAccent, accentForeground: walletAccentForeground, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { style: viewTransitionStyle, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ReviewView, { walletInfo, recipientAddress, assetCdnUrl, selectedToken, amountUsd, formattedTokenAmount, tokenChainDetails, loadingTokenDetails, showTransactionDetails, isConfirming, error, onToggleDetails: () => setShowTransactionDetails(!showTransactionDetails), onConfirm: handleConfirm, onBack: handleBack, onClose: onClose ?? (() => {
@@ -64402,6 +64590,9 @@ function SkeletonButton({
   ] });
 }
 var t7 = i18n2.depositModal;
+function depositTabForScreen(screen) {
+  return screen === "card" || screen === "cashapp" ? "cash" : "crypto";
+}
 function DepositModal({
   open,
   onOpenChange,
@@ -64437,6 +64628,7 @@ function DepositModal({
   theme = "dark",
   hideOverlay = false,
   initialScreen = "main",
+  displayMode = "stacked",
   transferCryptoTitle = t7.transferCrypto.title,
   depositWithCardTitle = t7.depositWithCard.title,
   payWithExchangeTitle = t7.payWithExchange.title,
@@ -64471,6 +64663,9 @@ function DepositModal({
     effectiveInitialScreen
   );
   const [coinbaseSkipToHoldings, setCoinbaseSkipToHoldings] = (0, import_react3.useState)(false);
+  const [depositTab, setDepositTab] = (0, import_react3.useState)(
+    () => depositTabForScreen(effectiveInitialScreen)
+  );
   const resetViewTimeoutRef = (0, import_react3.useRef)(null);
   const [cardView, setCardView] = (0, import_react3.useState)(
     "amount"
@@ -64768,6 +64963,7 @@ function DepositModal({
       resetViewTimeoutRef.current = null;
     }
     setView(effectiveInitialScreen);
+    setDepositTab(depositTabForScreen(effectiveInitialScreen));
     setCardView("amount");
     setExchangeView("providers");
     setBrowserWalletInfo(null);
@@ -64796,6 +64992,7 @@ function DepositModal({
     } else if (view === "cashapp" && cashAppView !== "amount") {
       setCashAppView("amount");
     } else {
+      setDepositTab(depositTabForScreen(view));
       setView("main");
       setCardView("amount");
       setExchangeView("providers");
@@ -64875,6 +65072,184 @@ function DepositModal({
       className: "uf-flex uf-justify-center uf-shrink-0"
     }
   ) });
+  const transferCryptoMenuButton = showTransferCrypto ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+    TransferCryptoButton,
+    {
+      onClick: () => setView("transfer"),
+      title: transferCryptoTitle,
+      subtitle: t7.transferCrypto.subtitle,
+      featuredTokens: projectConfig?.transfer_crypto.networks
+    },
+    "transfer"
+  ) : null;
+  const connectWalletMenuButton = showConnectWallet ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+    BrowserWalletButton,
+    {
+      onClick: handleBrowserWalletClick,
+      onConnectClick: handleWalletConnectClick,
+      onDisconnect: handleWalletDisconnect,
+      chainType: browserWalletChainType,
+      publishableKey,
+      featuredWallets: projectConfig?.connect_wallet?.wallets
+    },
+    "wallet"
+  ) : null;
+  const depositWithCardMenuButton = showFiatOnramp ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+    DepositWithCardButton,
+    {
+      onClick: () => setView("card"),
+      title: depositWithCardTitle,
+      subtitle: t7.depositWithCard.subtitle,
+      paymentNetworks: projectConfig?.payment_networks.networks
+    },
+    "card"
+  ) : null;
+  const payWithExchangeMenuButton = showPayWithExchange ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+    PayWithExchangeButton,
+    {
+      onClick: () => setView("exchange"),
+      title: payWithExchangeTitle,
+      subtitle: t7.payWithExchange.subtitle,
+      exchanges,
+      loading: exchangesLoading
+    },
+    "exchange"
+  ) : null;
+  const connectExchangeMenuButton = showConnectExchange && connectedExchange ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+    ConnectExchangeButton,
+    {
+      onClick: () => {
+        setCoinbaseSkipToHoldings(true);
+        setView("coinbase_connect");
+      },
+      onDisconnect: handleExchangeDisconnect,
+      title: i18n2.connectExchange.title,
+      subtitle: i18n2.connectExchange.subtitle,
+      exchanges: integrationExchanges,
+      connectedExchange
+    },
+    "connect-exchange"
+  ) : showConnectExchange && !connectedExchange ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+    ConnectExchangeButton,
+    {
+      onClick: () => {
+        setCoinbaseSkipToHoldings(false);
+        setView("coinbase_connect");
+      },
+      title: i18n2.connectExchange.title,
+      subtitle: i18n2.connectExchange.subtitle,
+      exchanges: integrationExchanges
+    },
+    "connect-exchange"
+  ) : null;
+  const cashAppMenuButton = showCashApp ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+    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__ */ (0, import_jsx_runtime74.jsx)(
+    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: DollarSign, buttons: cashMenuButtons }
+  ].filter((tab) => tab.buttons.length > 0);
+  const activeDepositTab = depositTabs.find((tab) => tab.id === depositTab) ?? depositTabs[0];
+  const renderMainMenuBody = () => {
+    if (depositPrerequisiteBody) {
+      return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "uf-space-y-3", children: depositPrerequisiteBody });
+    }
+    if (displayMode === "tabs" && activeDepositTab) {
+      return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { children: [
+        depositTabs.length > 1 && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+          "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__ */ (0, import_jsx_runtime74.jsxs)(
+                "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__ */ (0, import_jsx_runtime74.jsx)(
+                      "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__ */ (0, import_jsx_runtime74.jsx)(TabIcon, { size: 12, style: { color: active ? colors2.background : colors2.background }, strokeWidth: 2.5 })
+                      }
+                    ),
+                    tab.label
+                  ]
+                },
+                tab.id
+              );
+            })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "uf-space-y-3", children: activeDepositTab.buttons }),
+        depositTrackerMenuButton && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "uf-mt-3", children: depositTrackerMenuButton })
+      ] });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "uf-space-y-3", children: [
+      transferCryptoMenuButton,
+      connectWalletMenuButton,
+      depositWithCardMenuButton,
+      payWithExchangeMenuButton,
+      connectExchangeMenuButton,
+      cashAppMenuButton,
+      depositTrackerMenuButton
+    ] });
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(PortalContainerProvider, { value: hideOverlay ? containerEl : null, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
     Dialog2,
     {
@@ -64901,7 +65276,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,
@@ -64909,94 +65284,7 @@ function DepositModal({
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "uf-flex uf-flex-col uf-gap-1.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "uf-space-y-3", children: depositPrerequisiteBody ?? /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
-                  showTransferCrypto && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                    TransferCryptoButton,
-                    {
-                      onClick: () => setView("transfer"),
-                      title: transferCryptoTitle,
-                      subtitle: t7.transferCrypto.subtitle,
-                      featuredTokens: projectConfig?.transfer_crypto.networks
-                    }
-                  ),
-                  showConnectWallet && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                    BrowserWalletButton,
-                    {
-                      onClick: handleBrowserWalletClick,
-                      onConnectClick: handleWalletConnectClick,
-                      onDisconnect: handleWalletDisconnect,
-                      chainType: browserWalletChainType,
-                      publishableKey,
-                      featuredWallets: projectConfig?.connect_wallet?.wallets
-                    }
-                  ),
-                  showFiatOnramp && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                    DepositWithCardButton,
-                    {
-                      onClick: () => setView("card"),
-                      title: depositWithCardTitle,
-                      subtitle: t7.depositWithCard.subtitle,
-                      paymentNetworks: projectConfig?.payment_networks.networks
-                    }
-                  ),
-                  showPayWithExchange && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                    PayWithExchangeButton,
-                    {
-                      onClick: () => setView("exchange"),
-                      title: payWithExchangeTitle,
-                      subtitle: t7.payWithExchange.subtitle,
-                      exchanges,
-                      loading: exchangesLoading
-                    }
-                  ),
-                  showConnectExchange && connectedExchange && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                    ConnectExchangeButton,
-                    {
-                      onClick: () => {
-                        setCoinbaseSkipToHoldings(true);
-                        setView("coinbase_connect");
-                      },
-                      onDisconnect: handleExchangeDisconnect,
-                      title: i18n2.connectExchange.title,
-                      subtitle: i18n2.connectExchange.subtitle,
-                      exchanges: integrationExchanges,
-                      connectedExchange
-                    }
-                  ),
-                  showConnectExchange && !connectedExchange && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                    ConnectExchangeButton,
-                    {
-                      onClick: () => {
-                        setCoinbaseSkipToHoldings(false);
-                        setView("coinbase_connect");
-                      },
-                      title: i18n2.connectExchange.title,
-                      subtitle: i18n2.connectExchange.subtitle,
-                      exchanges: integrationExchanges
-                    }
-                  ),
-                  showCashApp && /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
-                    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__ */ (0, import_jsx_runtime74.jsx)(
-                    DepositTrackerButton,
-                    {
-                      onClick: () => {
-                        setAllExecutions(depositExecutions);
-                        setView("tracker");
-                      },
-                      title: depositTrackerTitle,
-                      subtitle: depositTrackerSubTitle,
-                      badge: depositExecutions.length > 0 ? depositExecutions.length : void 0
-                    }
-                  )
-                ] }) }),
+                renderMainMenuBody(),
                 depositPoweredByFooter
               ] })
             ] }) : view === "transfer" ? /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
@@ -65009,7 +65297,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,
@@ -65097,7 +65385,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,
@@ -66393,9 +66681,6 @@ function useVerifyRecipientAddress(params) {
     refetchOnWindowFocus: false
   });
 }
-function isHypercoreChain(chainId) {
-  return chainId === HYPERCORE_CHAIN_ID;
-}
 function useGetDepositAddress(params) {
   const {
     userId,
@@ -67322,8 +67607,6 @@ function WithdrawConfirmingView({
           className: "uf-text-sm uf-text-center",
           style: { color: colors2.foregroundMuted, fontFamily: fonts.regular },
           children: [
-            txInfo.amount,
-            " ",
             txInfo.sourceTokenSymbol,
             " to",
             " ",
@@ -67964,6 +68247,7 @@ function UnifoldProvider2({
             hideDepositTracker: config?.hideDepositTracker,
             showBalanceHeader: config?.showBalanceHeader,
             transferInputVariant: config?.transferInputVariant,
+            displayMode: config?.displayMode,
             enableTransferCrypto: config?.enableTransferCrypto,
             enableConnectWallet: config?.enableConnectWallet,
             enablePayWithExchange: config?.enablePayWithExchange,
@@ -68143,6 +68427,7 @@ lucide-react/dist/esm/createLucideIcon.js:
 lucide-react/dist/esm/icons/arrow-left-right.js:
 lucide-react/dist/esm/icons/arrow-left.js:
 lucide-react/dist/esm/icons/arrow-up-down.js:
+lucide-react/dist/esm/icons/bitcoin.js:
 lucide-react/dist/esm/icons/check.js:
 lucide-react/dist/esm/icons/chevron-down.js:
 lucide-react/dist/esm/icons/chevron-right.js: