@b3dotfun/sdk 0.1.70-alpha.11 → 0.1.70-alpha.13

package/dist/types/anyspend/react/components/QRDeposit.d.ts

@@ -14,6 +14,14 @@ export interface QRDepositProps {
     destinationToken: components["schemas"]["Token"];
     /** The destination chain ID */
     destinationChainId: number;
+    /**
+     * 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 */
@@ -24,8 +32,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;
 }
@@ -43,4 +54,4 @@ export interface QRDepositProps {
  *   onSuccess={(txHash) => console.log("Deposit complete:", txHash)}
  * />
  */
-export declare function QRDeposit({ mode, recipientAddress, sourceToken: sourceTokenProp, sourceChainId: sourceChainIdProp, destinationToken, destinationChainId, creatorAddress, depositContractConfig, onBack, onClose, onOrderCreated, onSuccess, classes, }: QRDepositProps): import("react/jsx-runtime").JSX.Element;
+export declare function QRDeposit({ mode, recipientAddress, sourceToken: sourceTokenProp, sourceChainId: sourceChainIdProp, destinationToken, destinationChainId, pureTransferOnly, creatorAddress, depositContractConfig, onBack, onClose, onOrderCreated, onSuccess, classes, }: QRDepositProps): import("react/jsx-runtime").JSX.Element;

package/dist/types/global-account/react/hooks/useBetterAuth.d.ts

@@ -1,4 +1,4 @@
-export type BetterAuthSocialProvider = "google" | "discord" | "apple" | "github" | "slack" | "microsoft";
+export type BetterAuthSocialProvider = "google" | "discord" | "apple" | "github" | "slack" | "microsoft" | "twitter";
 /** Thrown when email verification is required before the user can sign in. */
 export declare class EmailVerificationRequiredError extends Error {
     constructor(message?: string);

package/dist/types/global-account/react/stores/useModalStore.d.ts

@@ -617,8 +617,16 @@ export interface AnySpendDepositModalProps extends BaseModalProps {
     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). Does not affect the QR/pure-transfer path. */
+    lockDestinationToken?: boolean;
     /** Callback when deposit succeeds */
     onSuccess?: (amount: string) => void;
+    /** Callback when the modal's close control is pressed. */
+    onClose?: () => void;
     /** Callback for opening a custom modal (e.g., for special token handling) */
     onOpenCustomModal?: () => void;
     /** Custom footer content */
@@ -661,6 +669,12 @@ export interface AnySpendDepositModalProps extends BaseModalProps {
     classes?: AnySpendAllClasses;
     /** Whether to allow direct transfer without swap */
     allowDirectTransfer?: boolean;
+    /**
+     * When true, the QR-deposit path is a PURE TRANSFER: the destination token/chain
+     * mirror the user's selected source token, so the exact token they send lands in
+     * their wallet on the same chain (no swap/bridge).
+     */
+    pureTransferOnly?: boolean;
     /** Opaque metadata passed to the order for callbacks (e.g., workflow form data) */
     callbackMetadata?: Record<string, unknown>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@b3dotfun/sdk",
-  "version": "0.1.70-alpha.11",
+  "version": "0.1.70-alpha.13",
   "source": "src/index.ts",
   "main": "./dist/cjs/index.js",
   "react-native": "./dist/cjs/index.native.js",

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

@@ -110,6 +110,13 @@ export function AnySpend(props: {
   sourceChainId?: number;
   destinationTokenAddress?: string;
   destinationTokenChainId?: number;
+  /**
+   * When false, the destination token is user-selectable even if 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 buy-mode display, current behavior).
+   */
+  lockDestinationToken?: boolean;
   recipientAddress?: string;
   loadOrder?: string;
   hideTransactionHistoryButton?: boolean;
@@ -166,6 +173,7 @@ function AnySpendInner({
   sourceChainId,
   destinationTokenAddress,
   destinationTokenChainId,
+  lockDestinationToken = true,
   mode = "modal",
   defaultActiveTab = "crypto",
   loadOrder,
@@ -191,6 +199,7 @@ function AnySpendInner({
   sourceChainId?: number;
   destinationTokenAddress?: string;
   destinationTokenChainId?: number;
+  lockDestinationToken?: boolean;
   mode?: "page" | "modal";
   defaultActiveTab?: "crypto" | "fiat";
   loadOrder?: string;
@@ -230,8 +239,10 @@ function AnySpendInner({
   // in the same frame that onStatusResolved sets it (setState is async).
   // When kycEnabled is false (default), pre-approve so the KYC gate is skipped.
   const kycApprovedRef = useRef(!kycEnabled);
-  // Determine if we're in "buy mode" based on whether destination token props are provided
-  const isBuyMode = !!(destinationTokenAddress && destinationTokenChainId);
+  // Determine if we're in "buy mode" based on whether destination token props are provided.
+  // When lockDestinationToken is false, the provided destination is only a default and the user
+  // can change the receive token, so we stay out of buy mode (selectable swap mode).
+  const isBuyMode = !!(destinationTokenAddress && destinationTokenChainId) && lockDestinationToken;
 
   // Add refs to track URL state
   const initialUrlProcessed = useRef(false);
@@ -323,10 +334,16 @@ function AnySpendInner({
     sessionStorage.setItem("anyspend_fiat_method", selectedFiatPaymentMethod);
   }, [selectedFiatPaymentMethod]);
 
+  // Whether a default destination token was provided. When lockDestinationToken is false this is
+  // used only as the INITIAL/default value (the user can still change the receive token), so the
+  // wallet-funding deposit flow defaults to Base USDC but stays selectable.
+  const hasProvidedDestination = !!(destinationTokenAddress && destinationTokenChainId);
+
   // Get initial chain IDs from URL or defaults
   const initialSrcChainId = sourceChainId || parseInt(searchParams.get("fromChainId") || "0") || mainnet.id;
   const initialDstChainId =
-    parseInt(searchParams.get("toChainId") || "0") || (isBuyMode ? destinationTokenChainId : base.id);
+    parseInt(searchParams.get("toChainId") || "0") ||
+    (isBuyMode ? destinationTokenChainId : hasProvidedDestination ? destinationTokenChainId : base.id);
 
   // State for source chain/token selection
   const [selectedSrcChainId, setSelectedSrcChainId] = useState<number>(initialSrcChainId);
@@ -368,19 +385,28 @@ function AnySpendInner({
   const isHyperliquidUSDCAddress = (address?: string) =>
     eqci(address, HYPERLIQUID_USDC_ADDRESS) || eqci(address, ZERO_ADDRESS);
 
-  const defaultDstToken = isBuyMode
-    ? // Special case: Hyperliquid uses zero address for USDC
-      destinationTokenChainId === HYPERLIQUID_CHAIN_ID && isHyperliquidUSDCAddress(destinationTokenAddress)
-      ? getHyperliquidUSDCToken()
-      : {
-          symbol: "",
-          chainId: destinationTokenChainId,
-          address: destinationTokenAddress,
-          name: "",
-          decimals: 18,
-          metadata: {},
-        }
-    : getDefaultToken(selectedDstChainId);
+  // Build a token object from the provided destination props (handles the Hyperliquid USDC special case).
+  // The inline truthiness check lets TypeScript narrow both props to non-null, so it is `undefined`
+  // unless both props are provided — i.e. only meaningful when hasProvidedDestination/isBuyMode is true.
+  const providedDstToken: components["schemas"]["Token"] | undefined =
+    destinationTokenChainId && destinationTokenAddress
+      ? destinationTokenChainId === HYPERLIQUID_CHAIN_ID && isHyperliquidUSDCAddress(destinationTokenAddress)
+        ? getHyperliquidUSDCToken()
+        : {
+            symbol: "",
+            chainId: destinationTokenChainId,
+            address: destinationTokenAddress,
+            name: "",
+            decimals: 18,
+            metadata: {},
+          }
+      : undefined;
+
+  // In buy mode the provided destination is locked. Otherwise, if a default destination was provided
+  // (selectable deposit flow) seed it as the default; falling back to the chain's default token only
+  // when no destination prop is given (standard swap mode).
+  const defaultDstToken =
+    (isBuyMode || hasProvidedDestination) && providedDstToken ? providedDstToken : getDefaultToken(selectedDstChainId);
   const dstTokenFromUrl = useTokenFromUrl({
     defaultToken: defaultDstToken,
     prefix: "to",

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

@@ -1,3 +1,4 @@
+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";
@@ -11,7 +12,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 +63,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) */
@@ -124,6 +132,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) */
@@ -151,6 +166,21 @@ const DEFAULT_SUPPORTED_CHAINS: ChainConfig[] = [
 // 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";
 
 function formatUsd(value: number): string {
@@ -239,6 +269,7 @@ export function AnySpendDeposit({
   sourceTokenChainId: initialSourceChainId,
   destinationTokenAddress,
   destinationTokenChainId,
+  lockDestinationToken = true,
   onSuccess,
   onOpenCustomModal,
   mainFooter,
@@ -261,6 +292,7 @@ export function AnySpendDeposit({
   isCustomDeposit = false,
   classes,
   allowDirectTransfer = false,
+  pureTransferOnly = false,
   destinationTokenAmount,
   callbackMetadata,
   senderAddress,
@@ -289,20 +321,26 @@ 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;
@@ -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";
@@ -644,15 +689,44 @@ 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`.
+    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}
+        pureTransferOnly={pureTransferOnly}
         depositContractConfig={depositContractConfig}
         onBack={handleBack}
         onClose={onClose ?? handleBack}
+        onSuccess={handleQRDepositSuccess}
         classes={classes?.qrDeposit}
       />
     );
@@ -746,6 +820,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/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,14 @@ export interface QRDepositProps {
   destinationToken: components["schemas"]["Token"];
   /** The destination chain ID */
   destinationChainId: number;
+  /**
+   * 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 +54,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 +96,7 @@ export function QRDeposit({
   sourceChainId: sourceChainIdProp,
   destinationToken,
   destinationChainId,
+  pureTransferOnly = false,
   creatorAddress,
   depositContractConfig,
   onBack,
@@ -99,31 +111,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 +168,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 +204,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,
@@ -425,7 +453,7 @@ export function QRDeposit({
         </div>
 
         {/* Warnings */}
-        <ChainWarningText chainId={destinationChainId} />
+        <ChainWarningText chainId={effectiveDestinationChainId} />
         <WarningText>
           Only send {sourceToken.symbol} on {ALL_CHAINS[sourceChainId]?.name ?? "the specified chain"}. Other tokens
           will not be converted.