@b3dotfun/sdk 0.1.70-alpha.2 → 0.1.70-alpha.21

package/src/anyspend/react/components/AnySpendDeposit.tsx

@@ -1,7 +1,9 @@
+import { USDC_BASE } from "@b3dotfun/sdk/anyspend";
 import { components } from "@b3dotfun/sdk/anyspend/types/api";
 import { GetQuoteResponse } from "@b3dotfun/sdk/anyspend/types/api_req_res";
-import { Skeleton, useAccountWallet, useSimBalance, useTokenData } from "@b3dotfun/sdk/global-account/react";
+import { Skeleton, useAccountWallet, usePortfolioBalance, useTokenData } from "@b3dotfun/sdk/global-account/react";
 import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import {
   NetworkArbitrumOne,
   NetworkBase,
@@ -11,7 +13,7 @@ import {
   NetworkPolygonPos,
 } from "@web3icons/react";
 import { ChevronRight } from "lucide-react";
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { AnySpend } from "./AnySpend";
 import { AnySpendCustomExactIn } from "./AnySpendCustomExactIn";
 import { ChainWarningText } from "./common/WarningText";
@@ -62,6 +64,13 @@ export interface AnySpendDepositProps {
   destinationTokenAddress: string;
   /** The destination chain ID */
   destinationTokenChainId: number;
+  /**
+   * When false, the destination token is user-selectable even though a default destination token is
+   * provided (the provided destination is used only as the initial/default value). Used by the
+   * wallet-funding deposit flow so the user can change the receive token away from the default
+   * (Base USDC). Defaults to true (locked destination, current behavior). Does not affect the
+   * QR/pure-transfer path. */
+  lockDestinationToken?: boolean;
   /** Callback when deposit succeeds */
   onSuccess?: (amount: string) => void;
   /** Callback for opening a custom modal (e.g., for special token handling) */
@@ -99,8 +108,6 @@ export interface AnySpendDepositProps {
   showFiatOption?: boolean;
   /** Custom list of supported chains. If not provided, uses default chains */
   supportedChains?: ChainConfig[];
-  /** Minimum pool size for filtering tokens (default: 1,000,000) */
-  minPoolSize?: number;
   /** Custom title for chain selection step */
   chainSelectionTitle?: string;
   /** Custom description for chain selection step */
@@ -124,6 +131,13 @@ export interface AnySpendDepositProps {
   classes?: AnySpendAllClasses;
   /** When true, allows direct transfer without swap if source and destination token/chain are the same */
   allowDirectTransfer?: boolean;
+  /**
+   * When true, the QR-deposit path is a PURE TRANSFER: the destination token/chain
+   * mirror whatever source token the user selects, so the exact token they send lands
+   * in their wallet on the same chain (no swap/bridge). Forwarded to QRDeposit.
+   * Defaults to false.
+   */
+  pureTransferOnly?: boolean;
   /** Fixed destination token amount (in wei/smallest unit). When provided, user cannot change the amount. */
   destinationTokenAmount?: string;
   /** Opaque metadata passed to the order for callbacks (e.g., workflow form data) */
@@ -148,8 +162,20 @@ const DEFAULT_SUPPORTED_CHAINS: ChainConfig[] = [
   { id: 56, name: "BNB Chain" },
 ];
 
-// Minimum pool size to filter out low liquidity tokens
-const DEFAULT_MIN_POOL_SIZE = 1_000_000;
+/**
+ * Self-described fallback metadata for the default funding token(s), keyed by
+ * `${chainId}:${lowercased address}`. Used when `useTokenData` misses (returns
+ * null) so the destination token's decimals/symbol are correct WITHOUT depending
+ * on the network — critical in pure-transfer mode where there's no server-side
+ * correction and the wrong decimals would make `useWatchTransfer` show a wrong amount.
+ */
+const KNOWN_FUNDING_TOKENS: Record<string, components["schemas"]["Token"]> = {
+  [`${USDC_BASE.chainId}:${USDC_BASE.address.toLowerCase()}`]: USDC_BASE,
+};
+
+function getKnownFundingToken(chainId: number, address: string): components["schemas"]["Token"] | undefined {
+  return KNOWN_FUNDING_TOKENS[`${chainId}:${address.toLowerCase()}`];
+}
 
 type DepositStep = "select-chain" | "deposit" | "qr-deposit";
 
@@ -239,6 +265,7 @@ export function AnySpendDeposit({
   sourceTokenChainId: initialSourceChainId,
   destinationTokenAddress,
   destinationTokenChainId,
+  lockDestinationToken = true,
   onSuccess,
   onOpenCustomModal,
   mainFooter,
@@ -252,7 +279,6 @@ export function AnySpendDeposit({
   showChainSelection,
   showFiatOption = true,
   supportedChains = DEFAULT_SUPPORTED_CHAINS,
-  minPoolSize = DEFAULT_MIN_POOL_SIZE,
   topChainsCount = 3,
   onClose,
   returnToHomeUrl,
@@ -261,6 +287,7 @@ export function AnySpendDeposit({
   isCustomDeposit = false,
   classes,
   allowDirectTransfer = false,
+  pureTransferOnly = false,
   destinationTokenAmount,
   callbackMetadata,
   senderAddress,
@@ -289,37 +316,48 @@ export function AnySpendDeposit({
   }, [showFiatOption, paymentType]);
 
   // Fetch destination token data
-  const { data: destinationTokenData } = useTokenData(destinationTokenChainId, destinationTokenAddress);
+  const { data: destinationTokenData, isLoading: isDestinationTokenLoading } = useTokenData(
+    destinationTokenChainId,
+    destinationTokenAddress,
+  );
 
-  // Construct full destination token object
-  const destinationToken: components["schemas"]["Token"] = useMemo(
-    () => ({
+  // Construct full destination token object. When `useTokenData` misses (it returns
+  // null on an API miss, not an error), fall back to a known-token entry so the
+  // decimals/symbol invariant holds regardless of the fetch — e.g. Base USDC is 6
+  // decimals, never the generic 18 fallback.
+  const destinationToken: components["schemas"]["Token"] = useMemo(() => {
+    const known = getKnownFundingToken(destinationTokenChainId, destinationTokenAddress);
+    return {
       address: destinationTokenAddress,
       chainId: destinationTokenChainId,
-      symbol: destinationTokenData?.symbol ?? "",
-      name: destinationTokenData?.name ?? "",
-      decimals: destinationTokenData?.decimals ?? 18,
-      metadata: { logoURI: destinationTokenData?.logoURI },
-    }),
-    [destinationTokenAddress, destinationTokenChainId, destinationTokenData],
-  );
+      symbol: destinationTokenData?.symbol ?? known?.symbol ?? "",
+      name: destinationTokenData?.name ?? known?.name ?? "",
+      decimals: destinationTokenData?.decimals ?? known?.decimals ?? 18,
+      metadata: { logoURI: destinationTokenData?.logoURI ?? known?.metadata?.logoURI },
+    };
+  }, [destinationTokenAddress, destinationTokenChainId, destinationTokenData]);
 
   // Fetch balances for EOA wallet (use senderAddress as fallback for pre-filled balance display)
   const effectiveBalanceAddress = senderAddress || eoaAddress;
-  const { data: balanceData, isLoading: isBalanceLoading } = useSimBalance(
+  const {
+    data: balances,
+    isLoading: isBalanceLoading,
+    isError: isBalanceError,
+  } = usePortfolioBalance(
     shouldShowChainSelection ? effectiveBalanceAddress : undefined,
     supportedChains.map(c => c.id),
   );
 
-  // Group balances by chain and calculate total USD value per chain
+  // Group balances by chain and calculate total USD value per chain.
+  //
+  // There is deliberately no liquidity threshold here. The balance provider reports no pool size,
+  // so a `pool_size > n` test is false for every row and quietly reduces to "native only",
+  // erasing every ERC-20 the user holds from the chain summary. Spam filtering belongs to the
+  // token-filter service, which has the data to do it.
   const chainBalances = useMemo(() => {
-    if (!balanceData?.balances) return {};
+    if (!balances) return {};
 
-    const filteredBalances = balanceData.balances.filter(
-      token => token.address === "native" || (token.pool_size && token.pool_size > minPoolSize),
-    );
-
-    return filteredBalances.reduce(
+    return balances.reduce(
       (acc, token) => {
         const chainId = token.chain_id;
         if (!acc[chainId]) {
@@ -336,7 +374,7 @@ export function AnySpendDeposit({
       },
       {} as Record<number, { chainId: number; chainName: string; totalUsdValue: number; tokenCount: number }>,
     );
-  }, [balanceData, minPoolSize]);
+  }, [balances]);
 
   // Sort chains by USD value (highest first)
   const sortedChains = useMemo(() => {
@@ -359,6 +397,13 @@ export function AnySpendDeposit({
     return Object.values(chainBalances).reduce((sum, chain) => sum + chain.totalUsdValue, 0);
   }, [chainBalances]);
 
+  const handleQRDepositSuccess = useCallback(
+    (txHash?: string) => {
+      onSuccess?.(txHash ?? "");
+    },
+    [onSuccess],
+  );
+
   if (!recipientAddress) return null;
 
   const tokenSymbol = destinationToken.symbol || "TOKEN";
@@ -431,7 +476,7 @@ export function AnySpendDeposit({
           </button>
         )}
         {/* Balance header */}
-        {!isBalanceLoading && totalBalance > 0 && (
+        {!isBalanceLoading && !isBalanceError && totalBalance > 0 && (
           <div
             className={
               depositClasses?.balanceContainer || "anyspend-deposit-balance border-theme-border-secondary border-b p-5"
@@ -474,8 +519,16 @@ export function AnySpendDeposit({
             </div>
           )}
 
+          {/* A failed read leaves every chain at zero, which reads as "you hold nothing" on a
+              funding screen. Say what actually happened instead. */}
+          {isBalanceError && !isBalanceLoading && (
+            <p className="text-as-primary/50 px-1 py-2 text-sm">
+              We couldn&apos;t read your balances just now. You can still pick a chain below.
+            </p>
+          )}
+
           {/* Top chains with balance */}
-          {topChainsWithBalance.length > 0 && (
+          {!isBalanceError && topChainsWithBalance.length > 0 && (
             <div className={depositClasses?.chainsContainer || "anyspend-deposit-chains flex flex-col gap-2"}>
               {topChainsWithBalance.map(chain => (
                 <button
@@ -502,7 +555,7 @@ export function AnySpendDeposit({
                           depositClasses?.chainBalance || "anyspend-deposit-chain-balance text-as-secondary text-xs"
                         }
                       >
-                        {formatUsd(chain.balance)} available
+                        {`${formatUsd(chain.balance)} available`}
                       </p>
                     </div>
                   </div>
@@ -586,7 +639,9 @@ export function AnySpendDeposit({
                       "anyspend-deposit-option-description text-as-secondary text-xs"
                     }
                   >
-                    Send tokens directly to deposit address
+                    {pureTransferOnly
+                      ? "Send tokens directly to deposit address"
+                      : "Send any token — we'll convert it for you"}
                   </p>
                 </div>
               </div>
@@ -644,15 +699,58 @@ export function AnySpendDeposit({
 
   // QR Deposit view
   if (step === "qr-deposit") {
+    // In pure-transfer mode QRDeposit captures `destinationToken` as its initial
+    // SOURCE token via useState, so it must be fully resolved (correct symbol +
+    // decimals) before QRDeposit mounts. Known funding tokens (e.g. Base USDC) are
+    // already fully resolved via the self-described fallback, so only show a spinner
+    // for unknown tokens whose metadata still has to load over the network.
+    const hasKnownDestination = !!getKnownFundingToken(destinationTokenChainId, destinationTokenAddress);
+    // NOTE: all current Fund Wallet callers derive `destinationTokenAddress` from
+    // `getDefaultDepositDestination`, which always returns Base USDC — exactly a
+    // `KNOWN_FUNDING_TOKENS` key — so `hasKnownDestination` is always true and this
+    // branch never fires for them. The guard is defensive for FUTURE callers that pass
+    // an unknown token together with `pureTransferOnly=true`.
+    // Only surface the fixed destination amount on the QR path when its decimals are trustworthy
+    // (a known funding token or a resolved API lookup) — otherwise `destinationToken.decimals`
+    // is the generic 18 fallback and formatting a 6-decimal token's wei against it would be off by
+    // 10^12. When unresolved we still show the destination token/chain, just without an amount.
+    const destinationDecimalsResolved = hasKnownDestination || !!destinationTokenData;
+    const destinationAmountDisplay =
+      destinationTokenAmount &&
+      /^\d+$/.test(destinationTokenAmount) &&
+      BigInt(destinationTokenAmount) > 0n &&
+      destinationDecimalsResolved
+        ? formatTokenAmount(BigInt(destinationTokenAmount), destinationToken.decimals, 6, false)
+        : undefined;
+
+    if (pureTransferOnly && !hasKnownDestination && !destinationTokenData && isDestinationTokenLoading) {
+      return (
+        <div
+          className={cn(
+            "anyspend-deposit anyspend-deposit-qr-loading font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6",
+            mode === "page" && "border-as-border-secondary overflow-hidden rounded-2xl border shadow-xl",
+          )}
+        >
+          <div className="anyspend-deposit-qr-loading-content flex flex-col items-center justify-center gap-4 py-12">
+            <Skeleton className="h-8 w-8 rounded-full" />
+            <Skeleton className="h-4 w-40" />
+          </div>
+        </div>
+      );
+    }
+
     return (
       <QRDeposit
         mode={mode}
         recipientAddress={recipientAddress}
         destinationToken={destinationToken}
         destinationChainId={destinationTokenChainId}
+        destinationAmountDisplay={destinationAmountDisplay}
+        pureTransferOnly={pureTransferOnly}
         depositContractConfig={depositContractConfig}
         onBack={handleBack}
         onClose={onClose ?? handleBack}
+        onSuccess={handleQRDepositSuccess}
         classes={classes?.qrDeposit}
       />
     );
@@ -746,6 +844,7 @@ export function AnySpendDeposit({
             sourceChainId={selectedChainId}
             destinationTokenAddress={destinationTokenAddress}
             destinationTokenChainId={destinationTokenChainId}
+            lockDestinationToken={lockDestinationToken}
             onSuccess={txHash => onSuccess?.(txHash ?? "")}
             onTokenSelect={onTokenSelect}
             customUsdInputValues={customUsdInputValues}

package/src/anyspend/react/components/AnySpendStakeB3.tsx

@@ -8,7 +8,7 @@ import {
   toast,
   useHasMounted,
   useModalStore,
-  useSimBalance,
+  usePortfolioBalance,
   useUnifiedChainSwitchAndExecute,
 } from "@b3dotfun/sdk/global-account/react";
 import { PUBLIC_BASE_RPC_URL } from "@b3dotfun/sdk/shared/constants";
@@ -75,12 +75,32 @@ export function AnySpendStakeB3({
   const { address } = useAccount();
   const { switchChainAndExecute, isSwitchingOrExecuting } = useUnifiedChainSwitchAndExecute();
 
-  // Fetch B3 token balance
-  const { data: simBalance, isLoading: isBalanceLoading } = useSimBalance(address, [base.id]);
-  const b3RawBalanceStr = simBalance?.balances.find(b => eqci(b.address, B3_TOKEN.address))?.amount || "0";
+  // Fetch B3 token balance. `isBalanceUnknown` must gate every use of `b3RawBalance`: a failed read
+  // yields the same 0 as an empty wallet, and acting on it pushes a holder into the swap flow to
+  // buy a token they already have.
+  const {
+    data: balances,
+    isLoading: isBalanceLoading,
+    isError: isBalanceError,
+    refetch: refetchBalance,
+  } = usePortfolioBalance(address, [base.id]);
+  // Guarded on `address`: with no wallet connected the query never runs, and a query that was
+  // never asked is not a query that failed. Without this the screen tells a visitor their
+  // balance is unavailable and refuses to continue, when they simply have not connected yet.
+  const isBalanceUnknown = Boolean(address) && (isBalanceError || (!isBalanceLoading && balances === undefined));
+  const b3RawBalanceStr = balances?.find(b => eqci(b.address, B3_TOKEN.address))?.amount || "0";
   const b3RawBalance = BigInt(b3RawBalanceStr);
   const b3Balance = formatTokenAmount(b3RawBalance, B3_TOKEN.decimals);
 
+  /**
+   * Whether the wallet demonstrably holds enough B3 to stake `amountRaw` directly.
+   *
+   * False while the balance is unknown — but callers must not read that as a shortfall. An unknown
+   * balance is neither enough nor short, and the two need different UI: a shortfall offers the swap
+   * flow, an unknown offers a retry. Check `isBalanceUnknown` first.
+   */
+  const hasEnoughB3 = (amountRaw: string) => !isBalanceUnknown && BigInt(amountRaw || "0") <= b3RawBalance;
+
   // State for direct staking flow
   const [isStaking, setIsStaking] = useState(false);
   const [stakingTxHash, setStakingTxHash] = useState<string>("");
@@ -273,10 +293,12 @@ export function AnySpendStakeB3({
       return;
     }
 
-    // Check if user has sufficient B3 balance for direct staking
-    const hasEnoughBalance = b3RawBalance && BigInt(userStakeAmount) <= b3RawBalance;
+    if (isBalanceUnknown) {
+      toast.error("Can't read your B3 balance right now. Please try again.");
+      return;
+    }
 
-    if (hasEnoughBalance) {
+    if (hasEnoughB3(userStakeAmount)) {
       // User has enough B3, proceed with direct staking
       handleDirectStaking();
     } else {
@@ -334,10 +356,9 @@ export function AnySpendStakeB3({
               transition={{ duration: 0.3, delay: 0.1, ease: "easeInOut" }}
             >
               <h2 className="font-sf-rounded font-neue-montreal-medium mb-1 text-center text-2xl font-semibold">
-                {(() => {
-                  const hasEnoughBalance = b3RawBalance && BigInt(debouncedUserStakeAmount || "0") <= b3RawBalance;
-                  return hasEnoughBalance || !debouncedAmount ? "Stake B3" : "Swap & Stake B3";
-                })()}
+                {isBalanceUnknown || !debouncedAmount || hasEnoughB3(debouncedUserStakeAmount)
+                  ? "Stake B3"
+                  : "Swap & Stake B3"}
               </h2>
             </motion.div>
           </div>
@@ -356,7 +377,14 @@ export function AnySpendStakeB3({
               <div className="flex items-center justify-between">
                 <p className="text-as-primary/70 text-sm font-medium">I want to stake</p>
                 <span className="text-as-primary/50 flex items-center gap-1 text-sm">
-                  Available: {isBalanceLoading ? <Loader2 className="h-3 w-3 animate-spin" /> : `${b3Balance} B3`}
+                  Available:{" "}
+                  {isBalanceLoading ? (
+                    <Loader2 className="h-3 w-3 animate-spin" />
+                  ) : isBalanceUnknown ? (
+                    "unavailable"
+                  ) : (
+                    `${b3Balance} B3`
+                  )}
                 </span>
               </div>
             </div>
@@ -379,9 +407,22 @@ export function AnySpendStakeB3({
 
             <div className="mt-4">
               {(() => {
-                const hasEnoughBalance = b3RawBalance && BigInt(debouncedUserStakeAmount || "0") <= b3RawBalance;
+                // An unreadable balance is not a shortfall, so it must not open the swap upsell —
+                // that would sell a swap to someone who may already hold the tokens.
+                if (isBalanceUnknown) {
+                  return (
+                    <div className="bg-as-brand/10 flex flex-col items-center gap-2 rounded-lg p-4 pb-5">
+                      <p className="text-as-primary/70 text-sm font-medium">
+                        We couldn&apos;t read your B3 balance just now.
+                      </p>
+                      <Button variant="ghost" onClick={() => refetchBalance()} className="text-as-primary text-sm">
+                        Try again
+                      </Button>
+                    </div>
+                  );
+                }
 
-                if (!hasEnoughBalance || !debouncedAmount) {
+                if (!hasEnoughB3(debouncedUserStakeAmount) || !debouncedAmount) {
                   return (
                     <div className="bg-as-brand/10 flex flex-col items-center gap-2 rounded-lg p-4 pb-5">
                       <div className="flex items-center justify-center gap-2">

package/src/anyspend/react/components/AnySpendStakeB3ExactIn.tsx

@@ -9,7 +9,7 @@ import {
   toast,
   useHasMounted,
   useModalStore,
-  useSimBalance,
+  usePortfolioBalance,
   useUnifiedChainSwitchAndExecute,
 } from "@b3dotfun/sdk/global-account/react";
 import { PUBLIC_BASE_RPC_URL } from "@b3dotfun/sdk/shared/constants";
@@ -82,12 +82,32 @@ export function AnySpendStakeB3ExactIn({
   const { address } = useAccount();
   const { switchChainAndExecute, isSwitchingOrExecuting } = useUnifiedChainSwitchAndExecute();
 
-  // Fetch B3 token balance
-  const { data: simBalance, isLoading: isBalanceLoading } = useSimBalance(address, [base.id]);
-  const b3RawBalanceStr = simBalance?.balances.find(b => eqci(b.address, B3_TOKEN.address))?.amount || "0";
+  // Fetch B3 token balance. `isBalanceUnknown` must gate every use of `b3RawBalance`: a failed read
+  // yields the same 0 as an empty wallet, and acting on it pushes a holder into the swap flow to
+  // buy a token they already have.
+  const {
+    data: balances,
+    isLoading: isBalanceLoading,
+    isError: isBalanceError,
+    refetch: refetchBalance,
+  } = usePortfolioBalance(address, [base.id]);
+  // Guarded on `address`: with no wallet connected the query never runs, and a query that was
+  // never asked is not a query that failed. Without this the screen tells a visitor their
+  // balance is unavailable and refuses to continue, when they simply have not connected yet.
+  const isBalanceUnknown = Boolean(address) && (isBalanceError || (!isBalanceLoading && balances === undefined));
+  const b3RawBalanceStr = balances?.find(b => eqci(b.address, B3_TOKEN.address))?.amount || "0";
   const b3RawBalance = BigInt(b3RawBalanceStr);
   const b3Balance = formatTokenAmount(b3RawBalance, B3_TOKEN.decimals);
 
+  /**
+   * Whether the wallet demonstrably holds enough B3 to stake `amountRaw` directly.
+   *
+   * False while the balance is unknown — but callers must not read that as a shortfall. An unknown
+   * balance is neither enough nor short, and the two need different UI: a shortfall offers the swap
+   * flow, an unknown offers a retry. Check `isBalanceUnknown` first.
+   */
+  const hasEnoughB3 = (amountRaw: string) => !isBalanceUnknown && BigInt(amountRaw || "0") <= b3RawBalance;
+
   // State for direct staking flow
   const [isStaking, setIsStaking] = useState(false);
   const [stakingTxHash, setStakingTxHash] = useState<string>("");
@@ -283,9 +303,12 @@ export function AnySpendStakeB3ExactIn({
     }
 
     // Check if user has sufficient B3 balance for direct staking
-    const hasEnoughBalance = b3RawBalance && BigInt(userStakeAmount) <= b3RawBalance;
+    if (isBalanceUnknown) {
+      toast.error("Can't read your B3 balance right now. Please try again.");
+      return;
+    }
 
-    if (hasEnoughBalance) {
+    if (hasEnoughB3(userStakeAmount)) {
       // User has enough B3, proceed with direct staking
       handleDirectStaking();
     } else {
@@ -353,8 +376,9 @@ export function AnySpendStakeB3ExactIn({
             >
               <h2 className="font-sf-rounded font-neue-montreal-medium mb-1 text-center text-2xl font-semibold">
                 {(() => {
-                  const hasEnoughBalance = b3RawBalance && BigInt(debouncedUserStakeAmount || "0") <= b3RawBalance;
-                  return hasEnoughBalance || !debouncedAmount ? "Stake B3" : "Swap & Stake B3";
+                  return isBalanceUnknown || !debouncedAmount || hasEnoughB3(debouncedUserStakeAmount)
+                    ? "Stake B3"
+                    : "Swap & Stake B3";
                 })()}
               </h2>
             </motion.div>
@@ -374,7 +398,14 @@ export function AnySpendStakeB3ExactIn({
               <div className="flex items-center justify-between">
                 <p className="text-as-primary/70 text-sm font-medium">I want to stake</p>
                 <span className="text-as-primary/50 flex items-center gap-1 text-sm">
-                  Available: {isBalanceLoading ? <Loader2 className="h-3 w-3 animate-spin" /> : `${b3Balance} B3`}
+                  Available:{" "}
+                  {isBalanceLoading ? (
+                    <Loader2 className="h-3 w-3 animate-spin" />
+                  ) : isBalanceUnknown ? (
+                    "unavailable"
+                  ) : (
+                    `${b3Balance} B3`
+                  )}
                 </span>
               </div>
             </div>
@@ -397,9 +428,22 @@ export function AnySpendStakeB3ExactIn({
 
             <div className="mt-4">
               {(() => {
-                const hasEnoughBalance = b3RawBalance && BigInt(debouncedUserStakeAmount || "0") <= b3RawBalance;
+                // An unreadable balance is not a shortfall, so it must not open the swap upsell —
+                // that would sell a swap to someone who may already hold the tokens.
+                if (isBalanceUnknown) {
+                  return (
+                    <div className="bg-as-brand/10 flex flex-col items-center gap-2 rounded-lg p-4 pb-5">
+                      <p className="text-as-primary/70 text-sm font-medium">
+                        We couldn&apos;t read your B3 balance just now.
+                      </p>
+                      <Button variant="ghost" onClick={() => refetchBalance()} className="text-as-primary text-sm">
+                        Try again
+                      </Button>
+                    </div>
+                  );
+                }
 
-                if (!hasEnoughBalance || !debouncedAmount) {
+                if (!hasEnoughB3(debouncedUserStakeAmount) || !debouncedAmount) {
                   return (
                     <div className="bg-as-brand/10 flex flex-col items-center gap-2 rounded-lg p-4 pb-5">
                       <div className="flex items-center justify-center gap-2">