@b3dotfun/sdk 0.1.70-alpha.15 → 0.1.70-alpha.17

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

@@ -71,6 +71,7 @@ import { LoginStep } from "@b3dotfun/sdk/global-account/react/components/SignInW
 import { PanelOnramp } from "./common/PanelOnramp";
 import { PanelOnrampPayment } from "./common/PanelOnrampPayment";
 import { PointsDetailPanel } from "./common/PointsDetailPanel";
+import { PureTransferView } from "./common/PureTransferView";
 import { RecipientSelection } from "./common/RecipientSelection";
 import { TabSection } from "./common/TabSection";
 import { AnySpendCustomizationProvider, useAnySpendCustomization } from "./context/AnySpendCustomizationContext";
@@ -100,6 +101,7 @@ export enum PanelView {
   DIRECT_TRANSFER_SUCCESS,
   FIAT_KYC,
   FIAT_AUTH,
+  PURE_TRANSFER_ADDRESS,
 }
 
 const ANYSPEND_RECIPIENTS_KEY = "anyspend_recipients";
@@ -687,7 +689,10 @@ function AnySpendInner({
     globalAddress,
   });
 
-  const recipientProfile = useProfile({ address: effectiveRecipientAddress, fresh: true });
+  const recipientProfile = useProfile({
+    address: effectiveRecipientAddress,
+    fresh: true,
+  });
   const recipientName = recipientProfile.data?.name;
 
   // Check token balance for crypto payments
@@ -906,15 +911,36 @@ function AnySpendInner({
   const isDirectTransfer = isSameChainSameToken && allowDirectTransfer;
 
   // Determine button state and text
-  const btnInfo: { text: string; disable: boolean; error: boolean; loading: boolean } = useMemo(() => {
+  const btnInfo: {
+    text: string;
+    disable: boolean;
+    error: boolean;
+    loading: boolean;
+  } = useMemo(() => {
     // For fiat tab, check srcAmountOnRamp; for crypto tab, check activeInputAmountInWei
     const hasAmount =
       activeTab === "fiat" ? srcAmountOnRamp && parseFloat(srcAmountOnRamp) > 0 : activeInputAmountInWei !== "0";
-    if (!hasAmount) return { text: "Enter an amount", disable: true, error: false, loading: false };
+    if (!hasAmount)
+      return {
+        text: "Enter an amount",
+        disable: true,
+        error: false,
+        loading: false,
+      };
     if (isSameChainSameToken && !allowDirectTransfer)
-      return { text: "Select a different token or chain", disable: true, error: false, loading: false };
+      return {
+        text: "Select a different token or chain",
+        disable: true,
+        error: false,
+        loading: false,
+      };
     if (isLoadingAnyspendQuote && !isSameChainSameToken)
-      return { text: "Loading quote...", disable: true, error: false, loading: true };
+      return {
+        text: "Loading quote...",
+        disable: true,
+        error: false,
+        loading: true,
+      };
     if (isCreatingOrder || isCreatingOnrampOrder || isSwitchingOrExecuting)
       return {
         text: isSwitchingOrExecuting ? "Transferring..." : "Creating order...",
@@ -923,15 +949,31 @@ function AnySpendInner({
         loading: true,
       };
     if ((!anyspendQuote || !anyspendQuote.success) && !(isSameChainSameToken && allowDirectTransfer))
-      return { text: "No quote found", disable: true, error: false, loading: false };
+      return {
+        text: "No quote found",
+        disable: true,
+        error: false,
+        loading: false,
+      };
 
     if (activeTab === "fiat") {
       // For fiat: check recipient first, then payment method
-      if (!effectiveRecipientAddress) return { text: "Select recipient", disable: false, error: false, loading: false };
+      if (!effectiveRecipientAddress)
+        return {
+          text: "Select recipient",
+          disable: false,
+          error: false,
+          loading: false,
+        };
 
       // If no fiat payment method selected, show "Select payment method"
       if (selectedFiatPaymentMethod === FiatPaymentMethod.NONE) {
-        return { text: "Select payment method", disable: false, error: false, loading: false };
+        return {
+          text: "Select payment method",
+          disable: false,
+          error: false,
+          loading: false,
+        };
       }
       // If payment method is selected, show "Continue"
       return { text: "Continue", disable: false, error: false, loading: false };
@@ -942,11 +984,22 @@ function AnySpendInner({
 
       // If no payment method selected, show "Choose payment method"
       if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.NONE) {
-        return { text: "Choose payment method", disable: false, error: false, loading: false };
+        return {
+          text: "Choose payment method",
+          disable: false,
+          error: false,
+          loading: false,
+        };
       }
 
       // Check recipient after payment method
-      if (!effectiveRecipientAddress) return { text: "Select recipient", disable: false, error: false, loading: false };
+      if (!effectiveRecipientAddress)
+        return {
+          text: "Select recipient",
+          disable: false,
+          error: false,
+          loading: false,
+        };
 
       // If payment method selected, show appropriate action
       if (
@@ -954,10 +1007,22 @@ function AnySpendInner({
         effectiveCryptoPaymentMethod === CryptoPaymentMethodType.GLOBAL_WALLET
       ) {
         const buttonText = isSameChainSameToken && allowDirectTransfer ? "Transfer" : "Swap";
-        return { text: buttonText, disable: false, error: false, loading: false };
+        return {
+          text: buttonText,
+          disable: false,
+          error: false,
+          loading: false,
+        };
       }
       if (effectiveCryptoPaymentMethod === CryptoPaymentMethodType.TRANSFER_CRYPTO) {
-        return { text: "Continue to payment", disable: false, error: false, loading: false };
+        const transferText =
+          isSameChainSameToken && allowDirectTransfer ? "Show deposit address" : "Continue to payment";
+        return {
+          text: transferText,
+          disable: false,
+          error: false,
+          loading: false,
+        };
       }
     }
 
@@ -1063,10 +1128,18 @@ function AnySpendInner({
   // Handle crypto swap creation
   const handleCryptoSwap = async (method: CryptoPaymentMethodType) => {
     try {
-      const isDirectTransfer = isSameChainSameToken && allowDirectTransfer;
+      // TRANSFER_CRYPTO is the manual deposit-address flow — no connected wallet to send from.
+      const isDirectTransfer =
+        isSameChainSameToken && allowDirectTransfer && method !== CryptoPaymentMethodType.TRANSFER_CRYPTO;
 
       invariant(effectiveRecipientAddress, "Recipient address is not found");
 
+      // Same-token manual deposit → show recipient address + watch, no relayer order, no fee
+      if (isSameChainSameToken && allowDirectTransfer && method === CryptoPaymentMethodType.TRANSFER_CRYPTO) {
+        navigateToPanel(PanelView.PURE_TRANSFER_ADDRESS, "forward");
+        return;
+      }
+
       const srcAmountBigInt = parseUnits(srcAmount.replace(/,/g, ""), selectedSrcToken.decimals);
 
       // Handle direct transfer (same chain/token) - bypass backend, transfer directly
@@ -1089,10 +1162,6 @@ function AnySpendInner({
       // Regular swap flow - use backend
       invariant(anyspendQuote, "Relay price is not found");
 
-      // Debug: Check payment method values
-      console.log("handleCryptoSwap - method parameter:", method);
-      console.log("handleCryptoSwap - selectedCryptoPaymentMethod state:", selectedCryptoPaymentMethod);
-
       createOrder({
         recipientAddress: effectiveRecipientAddress,
         orderType: "swap",
@@ -1100,7 +1169,11 @@ function AnySpendInner({
         dstChain: isBuyMode ? destinationTokenChainId : selectedDstChainId,
         srcToken: selectedSrcToken,
         dstToken: isBuyMode
-          ? { ...selectedDstToken, chainId: destinationTokenChainId, address: destinationTokenAddress }
+          ? {
+              ...selectedDstToken,
+              chainId: destinationTokenChainId,
+              address: destinationTokenAddress,
+            }
           : selectedDstToken,
         srcAmount: srcAmountBigInt.toString(),
         expectedDstAmount: anyspendQuote?.data?.currencyOut?.amount || "0",
@@ -1759,6 +1832,20 @@ function AnySpendInner({
     </div>
   );
 
+  const pureTransferAddressView = (
+    <PureTransferView
+      mode={mode}
+      recipientAddress={effectiveRecipientAddress ?? ""}
+      chainId={selectedSrcChainId}
+      token={selectedSrcToken}
+      displayAmount={srcAmount && srcAmount !== "0" ? `${srcAmount} ${selectedSrcToken.symbol}` : undefined}
+      isActive={activePanel === PanelView.PURE_TRANSFER_ADDRESS}
+      onBack={navigateBack}
+      onClose={() => setB3ModalOpen(false)}
+      onTransferDetected={() => onSuccess?.()}
+    />
+  );
+
   // Add tabs to the main component when no order is loaded
   return (
     <StyleRoot>
@@ -1839,6 +1926,9 @@ function AnySpendInner({
             <div key="fiat-auth-view" className={cn(mode === "page" && "p-6")}>
               {authView}
             </div>,
+            <div key="pure-transfer-address-view" className={cn(mode === "page" && "p-6")}>
+              {pureTransferAddressView}
+            </div>,
           ]}
         </TransitionPanel>
       </div>

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

@@ -574,7 +574,11 @@ function AnySpendCustomExactInInner({
 
   const handleCryptoOrder = async () => {
     try {
-      const isDirectTransfer = isSameChainSameToken && allowDirectTransfer;
+      // TRANSFER_CRYPTO is the manual deposit-address flow — no connected wallet to send from.
+      const isDirectTransfer =
+        isSameChainSameToken &&
+        allowDirectTransfer &&
+        effectiveCryptoPaymentMethod !== CryptoPaymentMethodType.TRANSFER_CRYPTO;
 
       if (!isDirectTransfer) {
         invariant(anyspendQuote, "Relay price is not found");

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

@@ -3,6 +3,7 @@ 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 { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { formatTokenAmount } from "@b3dotfun/sdk/shared/utils/number";
 import {
   NetworkArbitrumOne,
   NetworkBase,
@@ -631,7 +632,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>
@@ -700,6 +703,19 @@ export function AnySpendDeposit({
     // `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
@@ -722,6 +738,7 @@ export function AnySpendDeposit({
         recipientAddress={recipientAddress}
         destinationToken={destinationToken}
         destinationChainId={destinationTokenChainId}
+        destinationAmountDisplay={destinationAmountDisplay}
         pureTransferOnly={pureTransferOnly}
         depositContractConfig={depositContractConfig}
         onBack={handleBack}

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

@@ -36,6 +36,14 @@ 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
@@ -96,6 +104,7 @@ export function QRDeposit({
   sourceChainId: sourceChainIdProp,
   destinationToken,
   destinationChainId,
+  destinationAmountDisplay,
   pureTransferOnly = false,
   creatorAddress,
   depositContractConfig,
@@ -410,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={
@@ -454,10 +489,26 @@ export function QRDeposit({
 
         {/* Warnings */}
         <ChainWarningText chainId={effectiveDestinationChainId} />
-        <WarningText>
-          Only send {sourceToken.symbol} on {ALL_CHAINS[sourceChainId]?.name ?? "the specified chain"}. Other tokens
-          will not be converted.
-        </WarningText>
+        {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

@@ -164,6 +164,11 @@ describe("QRDeposit pureTransferOnly (Fund Wallet)", () => {
 
     // 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 () => {
@@ -206,7 +211,14 @@ describe("QRDeposit pureTransferOnly (Fund Wallet)", () => {
 
     // 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.
-    render(<QRDeposit recipientAddress={RECIPIENT} destinationToken={USDC_BASE} destinationChainId={8453} />);
+    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);
@@ -218,6 +230,32 @@ describe("QRDeposit pureTransferOnly (Fund Wallet)", () => {
     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 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 ≈");
   });
 });
 

package/src/anyspend/react/components/common/PureTransferView.tsx

@@ -0,0 +1,212 @@
+"use client";
+
+import { getChainName, getPaymentUrl, ZERO_ADDRESS } from "@b3dotfun/sdk/anyspend";
+import type { components } from "@b3dotfun/sdk/anyspend/types/api";
+import { CopyToClipboard } from "@b3dotfun/sdk/global-account/react";
+import { cn } from "@b3dotfun/sdk/shared/utils/cn";
+import { ChevronLeft, Loader2, X } from "lucide-react";
+import { QRCodeSVG } from "qrcode.react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import type { TransferResult } from "../../hooks/useWatchTransfer";
+import { useWatchTransfer } from "../../hooks/useWatchTransfer";
+import { ChainWarningText, WarningText } from "./WarningText";
+import { TransferResultScreen } from "./TransferResultScreen";
+
+export interface PureTransferViewProps {
+  mode?: "modal" | "page";
+  /** The recipient address where funds will land (the user's own wallet) */
+  recipientAddress: string;
+  /** Chain ID to watch on */
+  chainId: number;
+  /** Token the user sends — drives the QR code and balance watcher */
+  token: components["schemas"]["Token"];
+  /** Human-readable amount to display (display-only; skip row if empty or "0") */
+  displayAmount?: string;
+  /** Whether this panel is the currently active panel; gates the balance watcher */
+  isActive?: boolean;
+  /** Callback when back chevron is clicked */
+  onBack?: () => void;
+  /** Callback when X close button is clicked */
+  onClose?: () => void;
+  /** Callback when an incoming transfer is detected */
+  onTransferDetected?: (result: TransferResult) => void;
+}
+
+/**
+ * A self-contained view that shows the recipient address as a QR code + copy button and
+ * watches for an incoming same-chain/same-token transfer via `useWatchTransfer`. When a
+ * transfer is detected it renders `TransferResultScreen`.
+ *
+ * This is the "TRANSFER_CRYPTO" path for same-token AnySpend deposits — no relayer order,
+ * no fee; the user simply sends the token directly to their own address.
+ */
+export function PureTransferView({
+  mode = "modal",
+  recipientAddress,
+  chainId,
+  token,
+  displayAmount,
+  isActive,
+  onBack,
+  onClose,
+  onTransferDetected,
+}: PureTransferViewProps) {
+  const [transferResult, setTransferResult] = useState<TransferResult | null>(null);
+
+  // Fix 4: reset transferResult when the panel becomes active again
+  useEffect(() => {
+    if (isActive) setTransferResult(null);
+  }, [isActive]);
+
+  // Fix 3: stabilize the callback so it doesn't re-run the watcher effect every render
+  const handleTransferDetected = useCallback(
+    (result: TransferResult) => {
+      setTransferResult(result);
+      onTransferDetected?.(result);
+    },
+    [onTransferDetected],
+  );
+
+  const { isWatching } = useWatchTransfer({
+    address: recipientAddress,
+    chainId,
+    tokenAddress: token.address,
+    tokenDecimals: token.decimals,
+    // Fix 1: also require a non-empty recipient before enabling the watcher
+    enabled: !!recipientAddress && !transferResult && isActive,
+    onTransferDetected: handleTransferDetected,
+  });
+
+  // Fix 2: guard qrValue when recipientAddress is empty
+  const qrValue = useMemo(
+    () =>
+      recipientAddress
+        ? getPaymentUrl(
+            recipientAddress,
+            undefined,
+            token.address === ZERO_ADDRESS ? "ETH" : token.address,
+            chainId,
+            token.decimals,
+          )
+        : "",
+    [recipientAddress, token.address, token.decimals, chainId],
+  );
+
+  const chainName = useMemo(() => {
+    try {
+      return getChainName(chainId);
+    } catch {
+      return "the specified chain";
+    }
+  }, [chainId]);
+
+  // Guard: if no address yet, render nothing
+  if (!recipientAddress) return null;
+
+  // Once a transfer is detected, hand off to the shared success screen
+  if (transferResult) {
+    return (
+      <TransferResultScreen
+        mode={mode}
+        transferResult={transferResult}
+        token={token}
+        chainId={chainId}
+        recipientAddress={recipientAddress}
+        onBack={onBack}
+        onClose={onClose}
+      />
+    );
+  }
+
+  return (
+    <div
+      className={cn(
+        "anyspend-container anyspend-pure-transfer font-inter bg-as-surface-primary mx-auto w-full max-w-[460px] p-6",
+      )}
+    >
+      <div className="anyspend-pure-transfer-content flex flex-col gap-4">
+        {/* Header */}
+        <div className="anyspend-pure-transfer-header flex items-center justify-between">
+          {onBack ? (
+            <button
+              onClick={onBack}
+              className="anyspend-pure-transfer-back text-as-secondary hover:text-as-primary"
+              aria-label="Go back"
+            >
+              <ChevronLeft className="h-5 w-5" />
+            </button>
+          ) : (
+            <div className="w-5" />
+          )}
+          <h2 className="anyspend-pure-transfer-title text-as-primary text-base font-semibold">Send {token.symbol}</h2>
+          {onClose ? (
+            <button
+              onClick={onClose}
+              className="anyspend-pure-transfer-close text-as-secondary hover:text-as-primary"
+              aria-label="Close"
+            >
+              <X className="h-5 w-5" />
+            </button>
+          ) : (
+            <div className="w-5" />
+          )}
+        </div>
+
+        {/* Optional amount badge */}
+        {displayAmount && (
+          <div className="anyspend-pure-transfer-amount-badge border-as-border-secondary bg-as-surface-secondary flex items-center justify-center rounded-xl border px-4 py-2">
+            <span className="text-as-primary text-sm font-medium">{displayAmount}</span>
+          </div>
+        )}
+
+        {/* QR Code and address block — mirrors QRDeposit ~lines 413-453 */}
+        <div className="anyspend-pure-transfer-qr-content border-as-stroke flex items-start gap-4 rounded-xl border p-4">
+          {/* QR Code */}
+          <div className="anyspend-pure-transfer-qr-code-container flex flex-col items-center gap-2">
+            <div className="anyspend-pure-transfer-qr-code rounded-lg bg-white p-2">
+              <QRCodeSVG value={qrValue} size={120} level="M" marginSize={0} />
+            </div>
+            <span className="anyspend-pure-transfer-qr-scan-hint text-as-secondary text-xs">
+              SCAN WITH <span className="inline-block">🦊</span>
+            </span>
+          </div>
+
+          {/* Address info */}
+          <div className="anyspend-pure-transfer-address-container flex flex-1 flex-col gap-1">
+            <span className="anyspend-pure-transfer-address-label text-as-secondary text-sm">Deposit address:</span>
+            <div className="anyspend-pure-transfer-address-row flex items-start gap-1">
+              <span className="anyspend-pure-transfer-address text-as-primary break-all font-mono text-sm leading-relaxed">
+                {recipientAddress}
+              </span>
+              <CopyToClipboard
+                text={recipientAddress}
+                className="anyspend-pure-transfer-copy-icon text-as-secondary hover:text-as-primary mt-0.5 shrink-0"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Warnings — mirrors QRDeposit ~lines 456-460 */}
+        <ChainWarningText chainId={chainId} />
+        <WarningText>
+          Only send {token.symbol} on {chainName}. Other tokens will not be converted.
+        </WarningText>
+
+        {/* Watching indicator — mirrors QRDeposit ~lines 462-473 */}
+        {isWatching && (
+          <div className="anyspend-pure-transfer-watching bg-as-brand/10 flex items-center justify-center gap-2 rounded-lg p-3">
+            <Loader2 className="text-as-brand h-4 w-4 animate-spin" />
+            <span className="text-as-brand text-sm">Watching for incoming transfer...</span>
+          </div>
+        )}
+
+        {/* Full-width copy button — mirrors QRDeposit ~lines 476-484 */}
+        <CopyToClipboard text={recipientAddress}>
+          <button className="anyspend-pure-transfer-copy-button bg-as-brand hover:bg-as-brand/90 flex w-full items-center justify-center gap-2 rounded-xl py-3.5 font-medium text-white transition-all">
+            Copy deposit address
+          </button>
+        </CopyToClipboard>
+      </div>
+    </div>
+  );
+}