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

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

@@ -11,7 +11,7 @@ import { cn } from "@b3dotfun/sdk/shared/utils/cn";
 import { TokenSelector } from "@relayprotocol/relay-kit-ui";
 import { Check, ChevronsUpDown, Copy, Loader2 } from "lucide-react";
 import { QRCodeSVG } from "qrcode.react";
-import { useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { useAnyspendOrderAndTransactions } from "../hooks/useAnyspendOrderAndTransactions";
 import { useCreateDepositFirstOrder } from "../hooks/useCreateDepositFirstOrder";
 import { useOnOrderSuccess } from "../hooks/useOnOrderSuccess";
@@ -36,6 +36,22 @@ export interface QRDepositProps {
   destinationToken: components["schemas"]["Token"];
   /** The destination chain ID */
   destinationChainId: number;
+  /**
+   * Human-formatted destination amount (e.g. "9.365547"), shown as an APPROXIMATE
+   * target in swap mode only. The QR deposit path accepts an arbitrary sent amount,
+   * so this is never a guaranteed receive figure — the UI frames it as "any amount
+   * works". Omitted when no fixed amount is set or the destination decimals are
+   * unresolved (to avoid a mis-scaled number). Ignored in pure-transfer mode.
+   */
+  destinationAmountDisplay?: string;
+  /**
+   * When true, the deposit is a PURE TRANSFER: the destination token/chain mirror
+   * the user's currently selected source token/chain, so the exact token the user
+   * sends lands in their wallet on the same chain — no swap/bridge order is created.
+   * The `destinationToken`/`destinationChainId` props are then used only as the
+   * initial source selection (they must be fully resolved before mount). Defaults to false.
+   */
+  pureTransferOnly?: boolean;
   /** Creator address (optional) */
   creatorAddress?: string;
   /** Contract config for custom execution after deposit */
@@ -46,8 +62,11 @@ export interface QRDepositProps {
   onClose?: () => void;
   /** Callback when order is created successfully */
   onOrderCreated?: (orderId: string) => void;
-  /** Callback when deposit is completed */
-  onSuccess?: (txHash?: string) => void;
+  /**
+   * Callback when deposit is completed. The argument carries the deposited amount string
+   * (e.g. "200.00") on the pure-transfer path, or the order tx hash otherwise.
+   */
+  onSuccess?: (amountOrTxHash?: string) => void;
   /** Custom classes for styling */
   classes?: QRDepositClasses;
 }
@@ -85,6 +104,8 @@ export function QRDeposit({
   sourceChainId: sourceChainIdProp,
   destinationToken,
   destinationChainId,
+  destinationAmountDisplay,
+  pureTransferOnly = false,
   creatorAddress,
   depositContractConfig,
   onBack,
@@ -99,31 +120,45 @@ export function QRDeposit({
   const orderCreatedRef = useRef(false);
   const [transferResult, setTransferResult] = useState<TransferResult | null>(null);
 
-  // Source token/chain as state (can be changed by user)
-  const [sourceChainId, setSourceChainId] = useState(sourceChainIdProp ?? 8453);
+  // Source token/chain as state (can be changed by user).
+  // In pure-transfer mode the initial source is the passed destination (caller sets
+  // it to the desired default funding token), so the deposit mirrors the user's selection.
+  const [sourceChainId, setSourceChainId] = useState(
+    sourceChainIdProp ?? (pureTransferOnly ? destinationChainId : 8453),
+  );
   const [sourceToken, setSourceToken] = useState<components["schemas"]["Token"]>(
-    sourceTokenProp ?? DEFAULT_ETH_ON_BASE,
+    sourceTokenProp ?? (pureTransferOnly ? destinationToken : DEFAULT_ETH_ON_BASE),
   );
 
+  // In pure-transfer mode the effective destination mirrors the selected source,
+  // forcing isPureTransfer = true (no swap/bridge order is created).
+  const effectiveDestinationToken = pureTransferOnly ? sourceToken : destinationToken;
+  const effectiveDestinationChainId = pureTransferOnly ? sourceChainId : destinationChainId;
+
   // Check if this is a pure transfer (same chain and token)
   const isPureTransfer = isSameChainAndToken(
     sourceChainId,
     sourceToken.address,
-    destinationChainId,
-    destinationToken.address,
+    effectiveDestinationChainId,
+    effectiveDestinationToken.address,
+  );
+
+  const handleTransferDetected = useCallback(
+    (result: TransferResult) => {
+      setTransferResult(result);
+      onSuccess?.(result.formattedAmount);
+    },
+    [onSuccess],
   );
 
   // Watch for pure transfers (same chain and token)
-  const { isWatching: isWatchingTransfer } = useWatchTransfer({
+  const { isWatching: isWatchingTransfer, reset: resetWatchTransfer } = useWatchTransfer({
     address: recipientAddress,
     chainId: sourceChainId,
     tokenAddress: sourceToken.address,
     tokenDecimals: sourceToken.decimals,
     enabled: isPureTransfer && !transferResult,
-    onTransferDetected: result => {
-      setTransferResult(result);
-      onSuccess?.();
-    },
+    onTransferDetected: handleTransferDetected,
   });
 
   // Handle token selection from TokenSelector
@@ -142,6 +177,8 @@ export function QRDeposit({
     setGlobalAddress(undefined);
     orderCreatedRef.current = false;
     setTransferResult(null);
+    // Reset the balance watcher baseline so the new token isn't compared against the old token's balance
+    resetWatchTransfer();
 
     // Update token and chain
     setSourceChainId(newToken.chainId);
@@ -176,18 +213,18 @@ export function QRDeposit({
     createOrder({
       recipientAddress,
       srcChain: sourceChainId,
-      dstChain: destinationChainId,
+      dstChain: effectiveDestinationChainId,
       srcToken: sourceToken,
-      dstToken: destinationToken,
+      dstToken: effectiveDestinationToken,
       creatorAddress,
       contractConfig: depositContractConfig,
     });
   }, [
     recipientAddress,
     sourceChainId,
-    destinationChainId,
+    effectiveDestinationChainId,
     sourceToken,
-    destinationToken,
+    effectiveDestinationToken,
     creatorAddress,
     depositContractConfig,
     createOrder,
@@ -382,6 +419,32 @@ export function QRDeposit({
           />
         </div>
 
+        {/* Receive (swap mode only) — makes the conversion explicit: what the sent token
+            becomes and on which chain. Gated on the computed isPureTransfer (not the static
+            prop) so a runtime source change back to the same token correctly hides it. */}
+        {!isPureTransfer && (
+          <div className="anyspend-qr-receive flex flex-col gap-1.5">
+            <label className="anyspend-qr-receive-label text-as-secondary text-sm">Receive</label>
+            <div className="anyspend-qr-receive-row border-as-stroke bg-as-surface-secondary flex w-full items-center gap-2 rounded-xl border px-3 py-2.5">
+              {effectiveDestinationToken.metadata?.logoURI ? (
+                <ChainTokenIcon
+                  chainUrl={ALL_CHAINS[effectiveDestinationChainId]?.logoUrl}
+                  tokenUrl={effectiveDestinationToken.metadata.logoURI}
+                  className="h-8 min-h-8 w-8 min-w-8"
+                />
+              ) : (
+                <div className="h-8 w-8 rounded-full bg-gray-700" />
+              )}
+              <div className="flex flex-col items-start gap-0">
+                <div className="text-as-primary font-semibold">{effectiveDestinationToken.symbol || "Token"}</div>
+                <div className="text-as-primary/70 text-xs">
+                  {ALL_CHAINS[effectiveDestinationChainId]?.name ?? "Unknown"}
+                </div>
+              </div>
+            </div>
+          </div>
+        )}
+
         {/* QR Code and Address - horizontal layout */}
         <div
           className={
@@ -425,11 +488,27 @@ export function QRDeposit({
         </div>
 
         {/* Warnings */}
-        <ChainWarningText chainId={destinationChainId} />
-        <WarningText>
-          Only send {sourceToken.symbol} on {ALL_CHAINS[sourceChainId]?.name ?? "the specified chain"}. Other tokens
-          will not be converted.
-        </WarningText>
+        <ChainWarningText chainId={effectiveDestinationChainId} />
+        {isPureTransfer ? (
+          <WarningText>
+            Only send {sourceToken.symbol} on {ALL_CHAINS[sourceChainId]?.name ?? "the specified chain"}. Other tokens
+            will not be converted.
+          </WarningText>
+        ) : (
+          <>
+            <WarningText>
+              Only send {sourceToken.symbol} on {ALL_CHAINS[sourceChainId]?.name ?? "the specified chain"} to this
+              address — it will be converted to {effectiveDestinationToken.symbol || "the destination token"} on{" "}
+              {ALL_CHAINS[effectiveDestinationChainId]?.name ?? "the destination chain"}.
+            </WarningText>
+            {destinationAmountDisplay && (
+              <p className="anyspend-qr-amount-hint text-as-secondary text-xs">
+                Target ≈ {destinationAmountDisplay} {effectiveDestinationToken.symbol || "tokens"}. Any amount of{" "}
+                {sourceToken.symbol || "tokens"} works — you'll receive whatever your deposit converts to.
+              </p>
+            )}
+          </>
+        )}
 
         {/* Watching indicator for pure transfers */}
         {isPureTransfer && isWatchingTransfer && (

package/src/anyspend/react/components/__tests__/QRDeposit.test.tsx

@@ -0,0 +1,331 @@
+import { RELAY_SOLANA_MAINNET_CHAIN_ID, USDC_BASE } from "@b3dotfun/sdk/anyspend";
+import { fireEvent, render, screen } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+/**
+ * Deterministic component test for the `pureTransferOnly` "Fund Wallet" behavior.
+ *
+ * When `pureTransferOnly` is true, the destination token MIRRORS the user-selected
+ * source token, so funding is always a same-chain/same-token PURE TRANSFER:
+ *   - NO `deposit_first` swap order is created (the order-creation effect early-returns
+ *     on `isPureTransfer`), so `createOrder` is never called.
+ *   - The QR/deposit address is the recipient's OWN wallet address (not a global/order
+ *     address minted by AnySpend).
+ *   - `useWatchTransfer` watches the user's wallet for the EXACT token they selected.
+ *
+ * This guards the bug where "Fund Wallet" with USDC delivered ETH instead.
+ */
+
+// --- Spies / captured args observable across the test file ---
+
+// createOrder spy returned by useCreateDepositFirstOrder.
+const createOrderSpy = vi.fn();
+
+// reset spy returned by useWatchTransfer — QRDeposit calls reset() on token switch to
+// clear the stale balance baseline (see Test B).
+const resetSpy = vi.fn();
+
+// Captures the most recent props passed to useWatchTransfer so we can assert which
+// token/decimals/address the pure-transfer path is watching.
+let watchTransferArgs: any;
+
+// Holds the `setToken` callback handed to the mocked Relay TokenSelector so a test
+// can simulate the user switching the source token.
+let capturedSetToken: ((token: any) => void) | undefined;
+
+// Allows Test D to flip useTokenData's return (null = API miss) for the
+// AnySpendDeposit-level decimals-invariant assertion.
+const tokenDataState: { data: any; isLoading: boolean } = { data: null, isLoading: false };
+
+// --- Mocks ---
+
+// Mock the four hooks QRDeposit imports (relative paths from the component file).
+vi.mock("../../hooks/useCreateDepositFirstOrder", () => ({
+  useCreateDepositFirstOrder: () => ({ createOrder: createOrderSpy, isCreatingOrder: false }),
+}));
+
+vi.mock("../../hooks/useAnyspendOrderAndTransactions", () => ({
+  useAnyspendOrderAndTransactions: () => ({ orderAndTransactions: undefined }),
+}));
+
+vi.mock("../../hooks/useWatchTransfer", () => ({
+  useWatchTransfer: (props: any) => {
+    watchTransferArgs = props;
+    return { isWatching: true, reset: resetSpy };
+  },
+}));
+
+vi.mock("../../hooks/useOnOrderSuccess", () => ({
+  useOnOrderSuccess: () => undefined,
+}));
+
+// Mock the Relay TokenSelector: render a button that, when clicked, invokes the passed
+// `setToken` with a chosen token, simulating the user switching the source token. Also
+// render the provided `trigger` so the rest of the component tree still mounts.
+vi.mock("@relayprotocol/relay-kit-ui", () => ({
+  TokenSelector: ({ setToken, trigger }: any) => {
+    capturedSetToken = setToken;
+    return (
+      <div data-testid="token-selector">
+        {trigger}
+        <button data-testid="switch-token" onClick={() => setToken(SWITCHED_ETH_ON_BASE)} />
+      </div>
+    );
+  },
+}));
+
+vi.mock("@stripe/stripe-js", () => ({
+  loadStripe: vi.fn(() => Promise.resolve(null)),
+}));
+
+// Spread the real global-account/react (Button, Badge, etc. are needed by transitively
+// imported sub-components and render fine under happy-dom). Override only `toast` so the
+// error path doesn't depend on a toast provider.
+vi.mock("@b3dotfun/sdk/global-account/react", async importOriginal => {
+  const actual = await importOriginal<any>();
+  return { ...actual, toast: { error: vi.fn(), success: vi.fn() } };
+});
+
+// Mock the wallet/balance/token hooks at their SOURCE modules (the barrel re-exports
+// these, so the override binds reliably). This lets AnySpendDeposit (Test D) render
+// without a ThirdwebProvider / wallet context and keeps the token-data fetch deterministic.
+vi.mock("@b3dotfun/sdk/global-account/react/hooks/useAccountWallet", () => ({
+  useAccountWallet: () => ({ connectedEOAWallet: undefined }),
+}));
+
+vi.mock("@b3dotfun/sdk/global-account/react/hooks/usePortfolioBalance", () => ({
+  usePortfolioBalance: () => ({ data: undefined, isLoading: false, isError: false }),
+  usePortfolioTokenBalance: () => ({ data: undefined, isLoading: false, isError: false }),
+}));
+
+vi.mock("@b3dotfun/sdk/global-account/react/hooks/useTokenData", () => ({
+  useTokenData: () => tokenDataState,
+}));
+
+// --- Fixtures ---
+
+const RECIPIENT = "0x1111111111111111111111111111111111111111";
+
+// A DIFFERENT token than USDC for the "switch source token" test: native ETH on Base.
+const SWITCHED_ETH_ON_BASE = {
+  chainId: 8453,
+  address: "0x0000000000000000000000000000000000000000",
+  symbol: "ETH",
+  name: "Ethereum",
+  decimals: 18,
+  logoURI: "https://assets.relay.link/icons/1/light.png",
+};
+
+// Imported lazily so module-level mocks are registered before the component graph loads.
+async function loadQRDeposit() {
+  const mod = await import("../QRDeposit");
+  return mod.QRDeposit;
+}
+
+async function loadAnySpendDeposit() {
+  const mod = await import("../AnySpendDeposit");
+  return mod.AnySpendDeposit;
+}
+
+beforeEach(() => {
+  watchTransferArgs = undefined;
+  capturedSetToken = undefined;
+  tokenDataState.data = null;
+  tokenDataState.isLoading = false;
+});
+
+afterEach(() => {
+  vi.clearAllMocks();
+});
+
+describe("QRDeposit pureTransferOnly (Fund Wallet)", () => {
+  it("Test A — pure transfer creates NO order and uses the wallet's own address", async () => {
+    const QRDeposit = await loadQRDeposit();
+
+    render(
+      <QRDeposit
+        pureTransferOnly
+        recipientAddress={RECIPIENT}
+        destinationToken={USDC_BASE}
+        destinationChainId={8453}
+      />,
+    );
+
+    // The whole point: no swap/bridge order is created in pure-transfer mode.
+    expect(createOrderSpy).not.toHaveBeenCalled();
+
+    // It watches the recipient's OWN wallet for a direct incoming transfer, and is enabled.
+    expect(watchTransferArgs).toBeDefined();
+    expect(watchTransferArgs.address).toBe(RECIPIENT);
+    expect(watchTransferArgs.enabled).toBe(true);
+
+    // The mirror followed the initial selection: it watches for the EXACT funding token
+    // (Base USDC, 6 decimals) — NOT a generic 18-decimal fallback.
+    expect(watchTransferArgs.chainId).toBe(USDC_BASE.chainId);
+    expect(watchTransferArgs.tokenAddress).toBe(USDC_BASE.address);
+    expect(watchTransferArgs.tokenDecimals).toBe(6);
+
+    // The displayed deposit address is the recipient's own address, NOT a global/order address.
+    expect(screen.getByText(RECIPIENT)).toBeTruthy();
+
+    // Pure-transfer UI is unchanged: NO "Receive" row (there is no distinct destination),
+    // and the accurate "will not be converted" warning is kept verbatim.
+    expect(screen.queryByText("Receive")).toBeNull();
+    expect(screen.getByText(/Other tokens will not be converted/)).toBeTruthy();
+  });
+
+  it("Test B — switching the source token stays a pure transfer (no order; mirror follows selection)", async () => {
+    const QRDeposit = await loadQRDeposit();
+
+    render(
+      <QRDeposit
+        pureTransferOnly
+        recipientAddress={RECIPIENT}
+        destinationToken={USDC_BASE}
+        destinationChainId={8453}
+      />,
+    );
+
+    // Sanity: still USDC before the switch.
+    expect(watchTransferArgs.tokenAddress).toBe(USDC_BASE.address);
+    expect(watchTransferArgs.tokenDecimals).toBe(6);
+
+    // User switches the source token to native ETH on Base via the (mocked) TokenSelector.
+    expect(capturedSetToken).toBeDefined();
+    fireEvent.click(screen.getByTestId("switch-token"));
+
+    // The balance watcher baseline is reset on token switch, so the new token isn't
+    // compared against the old token's (differently-scaled) balance.
+    expect(resetSpy).toHaveBeenCalled();
+
+    // Still a pure transfer: no order is ever created, even after switching tokens.
+    expect(createOrderSpy).not.toHaveBeenCalled();
+
+    // The mirror followed the new selection: now watching native ETH (18 decimals) on Base.
+    expect(watchTransferArgs.address).toBe(RECIPIENT);
+    expect(watchTransferArgs.enabled).toBe(true);
+    expect(watchTransferArgs.chainId).toBe(SWITCHED_ETH_ON_BASE.chainId);
+    expect(watchTransferArgs.tokenAddress).toBe(SWITCHED_ETH_ON_BASE.address);
+    expect(watchTransferArgs.tokenDecimals).toBe(18);
+  });
+
+  it("Test C — control: pureTransferOnly=false with source != destination DOES create an order", async () => {
+    const QRDeposit = await loadQRDeposit();
+
+    // No pureTransferOnly: source defaults to ETH-on-Base, which differs from the USDC dest,
+    // so this is a real swap and the normal deposit_first order path must run.
+    const { container } = render(
+      <QRDeposit
+        recipientAddress={RECIPIENT}
+        destinationToken={USDC_BASE}
+        destinationChainId={8453}
+        destinationAmountDisplay="9.365547"
+      />,
+    );
+
+    // The flag is what gates the pure-transfer behavior: without it, an order IS created once.
+    expect(createOrderSpy).toHaveBeenCalledTimes(1);
+
+    // And it's created with the USDC destination token (the swap path is intact).
+    const orderArgs = createOrderSpy.mock.calls[0][0];
+    expect(orderArgs.recipientAddress).toBe(RECIPIENT);
+    expect(orderArgs.dstToken.address).toBe(USDC_BASE.address);
+    expect(orderArgs.dstToken.decimals).toBe(6);
+    // Source defaulted to native ETH on Base (the differing token that forces a swap).
+    expect(orderArgs.srcToken.address).toBe("0x0000000000000000000000000000000000000000");
+
+    // Swap-mode UX clarity: a read-only "Receive" row now discloses the destination token…
+    expect(screen.getByText("Receive")).toBeTruthy();
+    // …the misleading "will not be converted" copy is gone…
+    expect(screen.queryByText(/will not be converted/)).toBeNull();
+    // …the warning states the conversion explicitly, and the fixed amount shows as an
+    // approximate target (never a guaranteed receive figure).
+    expect(container.textContent).toContain("it will be converted to USDC on Base");
+    expect(container.textContent).toContain("Target ≈ 9.365547 USDC");
+  });
+
+  it("Test C3 — case-mutated Solana mints require a swap order", async () => {
+    const QRDeposit = await loadQRDeposit();
+    const wrappedSol = "So11111111111111111111111111111111111111112";
+    const sourceToken = {
+      chainId: RELAY_SOLANA_MAINNET_CHAIN_ID,
+      address: wrappedSol,
+      symbol: "wSOL",
+      name: "Wrapped SOL",
+      decimals: 9,
+      metadata: {},
+    };
+    const destinationToken = {
+      ...sourceToken,
+      address: `s${wrappedSol.slice(1)}`,
+      symbol: "OTHER",
+      name: "Distinct Solana Mint",
+    };
+
+    render(
+      <QRDeposit
+        recipientAddress={RECIPIENT}
+        sourceToken={sourceToken}
+        sourceChainId={RELAY_SOLANA_MAINNET_CHAIN_ID}
+        destinationToken={destinationToken}
+        destinationChainId={RELAY_SOLANA_MAINNET_CHAIN_ID}
+        destinationAmountDisplay="1"
+      />,
+    );
+
+    expect(createOrderSpy).toHaveBeenCalledTimes(1);
+    expect(createOrderSpy.mock.calls[0][0].dstToken.address).toBe(destinationToken.address);
+    expect(watchTransferArgs.enabled).toBe(false);
+  });
+
+  it("Test C2 — swap mode without a fixed amount shows the Receive row but no target hint", async () => {
+    const QRDeposit = await loadQRDeposit();
+
+    // Swap mode (source ETH-on-Base != USDC dest) but NO destinationAmountDisplay — the common
+    // open-ended funding case. The destination must still be disclosed, but there must be no
+    // dangling "Target ≈" line (and no blank amount).
+    const { container } = render(
+      <QRDeposit recipientAddress={RECIPIENT} destinationToken={USDC_BASE} destinationChainId={8453} />,
+    );
+
+    // Destination is still disclosed…
+    expect(screen.getByText("Receive")).toBeTruthy();
+    expect(container.textContent).toContain("it will be converted to USDC on Base");
+    // …but no amount hint is rendered when no amount is provided.
+    expect(container.textContent).not.toContain("Target ≈");
+  });
+});
+
+describe("AnySpendDeposit decimals invariant (KNOWN_FUNDING_TOKENS fallback)", () => {
+  it("Test D — Base USDC keeps decimals: 6 even when useTokenData returns null", async () => {
+    const AnySpendDeposit = await loadAnySpendDeposit();
+
+    // Simulate the API miss: useTokenData returns null. The KNOWN_FUNDING_TOKENS fallback
+    // in AnySpendDeposit must still resolve Base USDC to decimals: 6 (never the generic 18),
+    // and that fully-resolved token is forwarded to QRDeposit as the pure-transfer source.
+    tokenDataState.data = null;
+    tokenDataState.isLoading = false;
+
+    render(
+      <AnySpendDeposit
+        pureTransferOnly
+        recipientAddress={RECIPIENT}
+        destinationTokenAddress={USDC_BASE.address}
+        destinationTokenChainId={USDC_BASE.chainId}
+      />,
+    );
+
+    // pureTransferOnly no longer auto-opens QR — AnySpendDeposit lands on the chooser
+    // (select-chain) screen first. Navigate into QR exactly like the user would, by
+    // clicking the "Deposit with QR Code" option.
+    fireEvent.click(screen.getByText("Deposit with QR Code"));
+
+    // Verified end-to-end through the REAL AnySpendDeposit -> REAL QRDeposit: the pure-transfer
+    // source mirrors the destination, so useWatchTransfer is called with USDC's 6 decimals.
+    expect(watchTransferArgs).toBeDefined();
+    expect(watchTransferArgs.tokenAddress).toBe(USDC_BASE.address);
+    expect(watchTransferArgs.tokenDecimals).toBe(6);
+    // No swap order in pure-transfer mode.
+    expect(createOrderSpy).not.toHaveBeenCalled();
+  });
+});

package/src/anyspend/react/components/checkout/CryptoPayPanel.tsx

@@ -6,13 +6,18 @@ import { useAnyspendCreateOrder } from "@b3dotfun/sdk/anyspend/react/hooks/useAn
 import { useAnyspendOrderAndTransactions } from "@b3dotfun/sdk/anyspend/react/hooks/useAnyspendOrderAndTransactions";
 import { useCreateDepositFirstOrder } from "@b3dotfun/sdk/anyspend/react/hooks/useCreateDepositFirstOrder";
 import { useOnOrderSuccess } from "@b3dotfun/sdk/anyspend/react/hooks/useOnOrderSuccess";
-import { ALL_CHAINS, RELAY_SOLANA_MAINNET_CHAIN_ID, getAvailableChainIds } from "@b3dotfun/sdk/anyspend";
-import { getPaymentUrl } from "@b3dotfun/sdk/anyspend/utils/chain";
+import {
+  ALL_CHAINS,
+  RELAY_SOLANA_MAINNET_CHAIN_ID,
+  getAvailableChainIds,
+  isSameChainAndToken,
+} from "@b3dotfun/sdk/anyspend";
+import { getPaymentUrl, toRegistryChainId } from "@b3dotfun/sdk/anyspend/utils/chain";
 import { isNativeToken } from "@b3dotfun/sdk/anyspend/utils/token";
 import {
   useAccountWallet,
   useIsMobile,
-  useSimTokenBalance,
+  usePortfolioTokenBalance,
   useTokenData,
   useUnifiedChainSwitchAndExecute,
 } from "@b3dotfun/sdk/global-account/react";
@@ -97,9 +102,13 @@ export function CryptoPayPanel({
   }, [selectedSrcToken, dstTokenData, destinationTokenAddress, destinationTokenChainId]);
 
   const isSameToken =
-    selectedSrcToken &&
-    selectedSrcToken.address.toLowerCase() === destinationTokenAddress.toLowerCase() &&
-    selectedSrcToken.chainId === destinationTokenChainId;
+    selectedSrcToken !== null &&
+    isSameChainAndToken(
+      selectedSrcToken.chainId,
+      selectedSrcToken.address,
+      destinationTokenChainId,
+      destinationTokenAddress,
+    );
 
   const { anyspendQuote, isLoadingAnyspendQuote } = useAnyspendQuote({
     type: "swap",
@@ -116,13 +125,21 @@ export function CryptoPayPanel({
       ? "native"
       : selectedSrcToken.address
     : undefined;
-  const { data: balanceData } = useSimTokenBalance(effectiveAddress, tokenAddress, selectedSrcChainId);
+  // `selectedSrcChainId` is Relay-numbered; balance rows are keyed by the chain registry's id.
+  const { data: balanceRow, isError: isBalanceError } = usePortfolioTokenBalance(
+    effectiveAddress,
+    tokenAddress,
+    toRegistryChainId(selectedSrcChainId),
+  );
 
   const balance = useMemo(() => {
-    const b = balanceData?.balances?.[0];
-    if (!b?.amount) return { raw: BigInt(0), formatted: "0", decimals: 18 };
-    return { raw: BigInt(b.amount), formatted: formatTokenAmount(BigInt(b.amount), b.decimals), decimals: b.decimals };
-  }, [balanceData]);
+    if (!balanceRow?.amount) return { raw: BigInt(0), formatted: "0", decimals: 18 };
+    return {
+      raw: BigInt(balanceRow.amount),
+      formatted: formatTokenAmount(BigInt(balanceRow.amount), balanceRow.decimals),
+      decimals: balanceRow.decimals,
+    };
+  }, [balanceRow]);
 
   const srcAmount = useMemo(() => {
     if (isSameToken) return totalAmount;
@@ -134,7 +151,9 @@ export function CryptoPayPanel({
     return formatTokenAmount(BigInt(srcAmount || "0"), selectedSrcToken.decimals || 18);
   }, [srcAmount, selectedSrcToken]);
 
-  const hasEnoughBalance = balance.raw >= BigInt(srcAmount || "0");
+  // A failed balance read must not masquerade as a shortfall: it would disable Pay and tell a
+  // funded user they are short. Unknown blocks auto-pay but leaves the manual path open.
+  const hasEnoughBalance = !isBalanceError && balance.raw >= BigInt(srcAmount || "0");
 
   /* ------------------------------------------------------------------ */
   /* Destination token object (shared by both flows)                    */
@@ -385,7 +404,8 @@ export function CryptoPayPanel({
 
   const isLoading = isLoadingAnyspendQuote;
   const isPending = isCreatingSwapOrder || isSendingDeposit || isWaitingForExecution;
-  const canPay = connectedAddress && selectedSrcToken && hasEnoughBalance && !isLoading && !isPending;
+  const canPay =
+    connectedAddress && selectedSrcToken && (hasEnoughBalance || isBalanceError) && !isLoading && !isPending;
 
   const chainName = ALL_CHAINS[selectedSrcChainId]?.name || "the specified chain";
   const chainLogoUrl = ALL_CHAINS[selectedSrcChainId]?.logoUrl;
@@ -494,7 +514,7 @@ export function CryptoPayPanel({
         </div>
       </motion.div>
 
-      {/* ---- Insufficient balance warning ---- */}
+      {/* ---- Balance warning ---- */}
       <AnimatePresence>
         {connectedAddress && selectedSrcToken && !hasEnoughBalance && !isLoading && (
           <motion.p
@@ -503,9 +523,11 @@ export function CryptoPayPanel({
             animate={{ opacity: 1, height: "auto" }}
             exit={{ opacity: 0, height: 0 }}
             transition={{ duration: 0.2, ease: "easeOut" }}
-            className="text-center text-sm text-red-500"
+            className={`text-center text-sm ${isBalanceError ? "text-as-primary/50" : "text-red-500"}`}
           >
-            Insufficient {selectedSrcToken.symbol} balance
+            {isBalanceError
+              ? `Couldn't check your ${selectedSrcToken.symbol} balance`
+              : `Insufficient ${selectedSrcToken.symbol} balance`}
           </motion.p>
         )}
       </AnimatePresence>