0xtrails 0.6.6 → 0.7.0

package/src/widget/hooks/useSendForm.ts

@@ -1,5 +1,5 @@
-import type { TokenPrice, FeeOption } from "@0xsequence/trails-api"
-import { JsonEncode } from "@0xsequence/trails-api"
+import type { TokenPrice, FeeOption } from "@0xtrails/api"
+import { JsonEncode } from "@0xtrails/api"
 import type React from "react"
 import { useCallback, useEffect, useMemo, useState, useRef } from "react"
 import {
@@ -32,11 +32,13 @@ import {
   formatAmount,
   formatAmountDisplay,
 } from "../../tokenBalances.js"
-import type { SupportedToken } from "../../tokens.js"
+import { useQuery } from "@tanstack/react-query"
+import type { Token } from "../../tokens.js"
 import {
   useSupportedTokens,
   useTokenAddress,
   useTokenInfo,
+  getSupportedTokens,
 } from "../../tokens.js"
 import type { CheckoutOnHandlers } from "./useCheckout.js"
 import { useResolveEnsAddress } from "../../ens.js"
@@ -51,30 +53,7 @@ import {
   type ProcessedFeeOption,
 } from "./useSelectedFeeOption.js"
 import { useWidgetProps } from "./useWidgetProps.js"
-
-export interface Token {
-  id: number
-  name: string
-  symbol: string
-  balance: string
-  imageUrl: string
-  chainId: number
-  contractAddress: string
-  tokenPriceUsd?: number
-  balanceUsdFormatted?: string
-  contractInfo?: {
-    decimals: number
-    symbol: string
-    name: string
-  }
-}
-
-export type TokenInfo = {
-  symbol: string
-  name: string
-  imageUrl: string
-  decimals: number
-}
+import { useCustomTokens } from "../../customTokens.js"
 
 type ChainInfo = {
   id: number
@@ -112,8 +91,8 @@ export type UseSendProps = {
   tradeType?: TradeType
   quoteProvider?: string
   fundMethod?: string
-  mode?: "pay" | "fund" | "earn" | "swap" | "receive"
-  onNavigateToMeshConnect?: (
+  mode?: "pay" | "fund" | "earn" | "swap"
+  onNavigateToOnramp?: (
     props: {
       toTokenSymbol: string
       toTokenAmount: string
@@ -121,6 +100,7 @@ export type UseSendProps = {
       toRecipientAddress: string
     },
     quote?: PrepareSendQuote | null,
+    continueSend?: () => Promise<void>,
   ) => void
   checkoutOnHandlers?: CheckoutOnHandlers
   refetchTrigger?: number
@@ -144,15 +124,15 @@ export type UseSendReturn = {
   recipient: string
   recipientInput: string
   selectedDestinationChain: ChainInfo | null
-  selectedDestToken: TokenInfo
+  selectedDestToken: Token | null
   setAmount: (amount: string) => void
   setRecipient: (recipient: string) => void
   setRecipientInput: (recipientInput: string) => void
   setSelectedDestinationChain: (chain: ChainInfo) => void
-  setSelectedDestToken: (token: TokenInfo) => void
+  setSelectedDestToken: (token: Token | null) => void
   setSelectedFeeOption: (token: FeeOption | null) => void
   processedFeeOptions: ProcessedFeeOption[]
-  supportedTokens: SupportedToken[]
+  supportedTokens: Token[]
   supportedChains: ChainInfo[]
   ensAddress: string | null
   isWaitingForWalletConfirm: boolean
@@ -198,7 +178,7 @@ export function useSendForm({
   quoteProvider,
   fundMethod,
   mode,
-  onNavigateToMeshConnect,
+  onNavigateToOnramp,
   checkoutOnHandlers,
   refetchTrigger = 0,
 }: UseSendProps): UseSendReturn {
@@ -269,6 +249,24 @@ export function useSendForm({
   const { supportedTokens } = useSupportedTokens({
     chainId: selectedDestinationChain?.id,
   })
+  // Get official supported tokens (before merging with custom tokens) to check if token is truly custom
+  const trailsConfig = useTrails()
+  const { data: officialSupportedTokens = [] } = useQuery({
+    queryKey: [
+      "supportedTokens",
+      trailsConfig.trailsApiUrl,
+      trailsConfig.trailsApiKey,
+    ],
+    queryFn: () =>
+      getSupportedTokens({
+        trailsApiKey: trailsConfig.trailsApiKey,
+        trailsApiUrl: trailsConfig.trailsApiUrl,
+      }),
+    staleTime: 60 * 60 * 1000, // 1 hour
+    gcTime: 24 * 60 * 60 * 1000, // 24 hours
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
+  })
 
   // Get RPC clients for known chainIds using hooks (reads from TrailsProvider context)
   const destinationChainPublicClient = useChainRpcClient(
@@ -382,6 +380,8 @@ export function useSendForm({
 
   const isCustomToken = useMemo(() => toToken?.startsWith("0x"), [toToken])
 
+  const { addCustomToken } = useCustomTokens()
+
   const {
     tokenInfo: customTokenInfo,
     isLoading: isLoadingCustomToken,
@@ -404,9 +404,70 @@ export function useSendForm({
     )
   }, [isCustomToken, errorCustomToken, isLoadingCustomToken, customTokenInfo])
 
+  // Save custom token to storage when successfully fetched via toToken prop
+  // Only save if it doesn't exist in the base supported tokens list
+  useEffect(() => {
+    if (
+      customTokenInfo &&
+      !errorCustomToken &&
+      isCustomToken &&
+      toChainId &&
+      toToken &&
+      customTokenInfo.symbol &&
+      customTokenInfo.name &&
+      customTokenInfo.decimals !== undefined
+    ) {
+      // Check if token already exists in official supported tokens (before merging)
+      const existsInOfficialSupportedTokens = officialSupportedTokens.some(
+        (token: Token) =>
+          token.chainId === toChainId &&
+          token.contractAddress.toLowerCase() === toToken.toLowerCase(),
+      )
+
+      // Only add to custom tokens if it's not an official supported token
+      if (!existsInOfficialSupportedTokens) {
+        const chainInfo = getChainInfo(toChainId)
+        const chainName = chainInfo?.name || `Chain ${toChainId}`
+
+        // Convert tokenInfo to Token format, then to SupportedToken for storage
+        // isCustomToken will be set to true by addCustomToken
+        const customToken: Token = {
+          tokenId: `${toChainId}-${toToken.toLowerCase()}`,
+          chainId: toChainId,
+          contractAddress: toToken,
+          symbol: customTokenInfo.symbol,
+          name: customTokenInfo.name,
+          decimals: customTokenInfo.decimals,
+          chainName,
+          imageUrl: customTokenInfo.imageUrl || "",
+          isCustomToken: true,
+        }
+        addCustomToken(customToken)
+        logger.console.log(
+          "[trails-sdk] Added custom token from toToken prop to storage:",
+          customToken,
+        )
+      } else {
+        logger.console.log(
+          "[trails-sdk] Token from toToken prop already exists in supported tokens, skipping custom token addition:",
+          { toToken, toChainId },
+        )
+      }
+    }
+  }, [
+    customTokenInfo,
+    errorCustomToken,
+    isCustomToken,
+    toChainId,
+    toToken,
+    addCustomToken,
+    officialSupportedTokens,
+  ])
+
   useEffect(() => {
     if (isCustomToken && customTokenInfo && !isLoadingCustomToken) {
-      setSelectedDestToken(customTokenInfo as TokenInfo)
+      // customTokenInfo is already Token from getTokenInfo
+      setSelectedDestToken(customTokenInfo as Token)
     }
   }, [customTokenInfo, isCustomToken, isLoadingCustomToken])
 
@@ -425,36 +486,41 @@ export function useSendForm({
     }
 
     if (selectedDestinationChain) {
-      return supportedTokens.find(
-        (token) => token.chainId === selectedDestinationChain.id,
+      return (
+        supportedTokens.find(
+          (token) => token.chainId === selectedDestinationChain.id,
+        ) || null
       )
     }
-    return supportedTokens?.[0] as TokenInfo
+    return supportedTokens?.[0] || null
   }, [supportedTokens, selectedDestinationChain, mode])
 
   const [isChainDropdownOpen, setIsChainDropdownOpen] = useState(false)
   const [isTokenDropdownOpen, setIsTokenDropdownOpen] = useState(false)
-  const [selectedDestToken, setSelectedDestToken] = useState<TokenInfo>(() => {
-    let token = defaultDestToken
-    if (toToken && !isCustomToken) {
-      const isToTokenAddress = isAddress(toToken)
-      token = supportedTokens.find(
-        (token) =>
-          (isToTokenAddress // Match by specified destination token address or symbol
-            ? token.contractAddress.toLowerCase() === toToken.toLowerCase()
-            : token.symbol === toToken) &&
-          (toChainId // Match by specified destination chain id
-            ? token.chainId === toChainId
-            : selectedDestinationChain.id), // Select by selected destination chain id
-      )
-    }
+  const [selectedDestToken, setSelectedDestToken] = useState<Token | null>(
+    () => {
+      let token = defaultDestToken
+      if (toToken && !isCustomToken) {
+        const isToTokenAddress = isAddress(toToken)
+        token =
+          supportedTokens.find(
+            (token) =>
+              (isToTokenAddress // Match by specified destination token address or symbol
+                ? token.contractAddress.toLowerCase() === toToken.toLowerCase()
+                : token.symbol === toToken) &&
+              (toChainId // Match by specified destination chain id
+                ? token.chainId === toChainId
+                : selectedDestinationChain?.id), // Select by selected destination chain id
+          ) || null
+      }
 
-    return token as TokenInfo
-  })
+      return token
+    },
+  )
 
   useEffect(() => {
     if (!selectedDestToken && defaultDestToken) {
-      setSelectedDestToken(defaultDestToken as TokenInfo)
+      setSelectedDestToken(defaultDestToken)
     }
   }, [selectedDestToken, defaultDestToken])
 
@@ -506,7 +572,7 @@ export function useSendForm({
           {
             tokenSymbol: selectedToken.symbol,
             tokenAddress: selectedToken.contractAddress,
-            chainId: selectedToken.chainId,
+            chainId: selectedToken.chainId || 0,
           },
         ]
       : [],
@@ -537,7 +603,7 @@ export function useSendForm({
             : token.chainId === selectedDestinationChain.id),
       )
       if (newToken) {
-        setSelectedDestToken(newToken as TokenInfo)
+        setSelectedDestToken(newToken)
       }
     }
   }, [
@@ -593,10 +659,10 @@ export function useSendForm({
   )
 
   const balanceFormatted =
-    selectedToken?.balance && selectedToken?.contractInfo?.decimals
+    selectedToken?.balance && selectedToken?.decimals
       ? formatRawAmount(
-          selectedToken.balance,
-          selectedToken.contractInfo?.decimals,
+          selectedToken.balance || "0",
+          selectedToken.decimals || 18,
         )
       : "0"
   const balanceUsdDisplay = selectedToken?.balanceUsdFormatted ?? ""
@@ -635,11 +701,42 @@ export function useSendForm({
   })
 
   const destinationTokenAddress = useMemo(() => {
+    // If toToken prop is set and is a custom token address, use it
     if (isCustomToken) {
+      logger.console.log(
+        "[trails-sdk] [CUSTOM-TOKEN] Using toToken prop as destinationTokenAddress:",
+        toToken,
+      )
       return toToken ?? null
     }
-    return destinationTokenAddressFromTokenSymbol ?? null
-  }, [isCustomToken, toToken, destinationTokenAddressFromTokenSymbol])
+    // If selectedDestToken has a contractAddress, use it directly (handles custom tokens selected from UI)
+    if (selectedDestToken?.contractAddress) {
+      logger.console.log(
+        "[trails-sdk] [CUSTOM-TOKEN] Using contractAddress from selectedDestToken:",
+        {
+          contractAddress: selectedDestToken.contractAddress,
+          symbol: selectedDestToken.symbol,
+        },
+      )
+      return selectedDestToken.contractAddress
+    }
+    // Otherwise, try to look it up by symbol
+    const addressFromSymbol = destinationTokenAddressFromTokenSymbol ?? null
+    logger.console.log(
+      "[trails-sdk] [CUSTOM-TOKEN] Using address from symbol lookup:",
+      {
+        addressFromSymbol,
+        symbol: selectedDestToken?.symbol,
+      },
+    )
+    return addressFromSymbol
+  }, [
+    isCustomToken,
+    toToken,
+    selectedDestToken?.contractAddress,
+    selectedDestToken?.symbol,
+    destinationTokenAddressFromTokenSymbol,
+  ])
 
   // Calculate raw amount (in wei/smallest unit)
   const amountRaw = useMemo(() => {
@@ -648,10 +745,7 @@ export function useSendForm({
       return "0"
     }
 
-    if (
-      !amount &&
-      !(selectedToken?.contractInfo?.decimals || selectedDestToken?.decimals)
-    ) {
+    if (!amount && !(selectedToken?.decimals || selectedDestToken?.decimals)) {
       logger.console.warn("[trails-sdk] Missing token decimals for quote", {
         amount,
         selectedToken,
@@ -661,10 +755,7 @@ export function useSendForm({
       return "0"
     }
 
-    if (
-      tradeType === TradeType.EXACT_INPUT &&
-      !selectedToken?.contractInfo?.decimals
-    ) {
+    if (tradeType === TradeType.EXACT_INPUT && !selectedToken?.decimals) {
       logger.console.warn(
         "[trails-sdk] Missing source token decimals for quote",
         {
@@ -688,7 +779,7 @@ export function useSendForm({
     // For EXACT_OUTPUT: use destination token decimals (user enters destination amount)
     const decimals =
       tradeType === TradeType.EXACT_INPUT
-        ? selectedToken?.contractInfo?.decimals
+        ? selectedToken?.decimals
         : selectedDestToken?.decimals
 
     if (!decimals) {
@@ -711,7 +802,7 @@ export function useSendForm({
     selectedDestToken,
     selectedToken,
     selectedDestToken?.decimals,
-    selectedToken?.contractInfo?.decimals,
+    selectedToken?.decimals,
     tradeType,
   ])
 
@@ -770,12 +861,9 @@ export function useSendForm({
         ? {
             symbol: selectedToken.symbol,
             contractAddress: selectedToken.contractAddress,
-            chainId: selectedToken.chainId,
-            contractInfo: selectedToken.contractInfo,
+            chainId: selectedToken.chainId || 0,
           }
         : null,
-      isCustomToken,
-      toToken,
       recipient,
       conditions: {
         hasAccount: !!account,
@@ -861,8 +949,8 @@ export function useSendForm({
       setError(null)
       setQuoteError(null)
 
-      const sourceTokenDecimals = selectedToken.contractInfo?.decimals
-      const destinationTokenDecimals = selectedDestToken.decimals
+      const sourceTokenDecimals = selectedToken.decimals || 18
+      const destinationTokenDecimals = selectedDestToken.decimals || 18
 
       if (!sourceTokenDecimals || !destinationTokenDecimals) {
         logger.console.warn("[trails-sdk] Missing token decimals for quote", {
@@ -879,7 +967,7 @@ export function useSendForm({
         return
       }
 
-      let sourceTokenPriceUsd = selectedToken.tokenPriceUsd ?? null
+      let sourceTokenPriceUsd = selectedToken.priceUsd ?? null
       let destinationTokenPriceUsd = destTokenPrices?.[0]?.priceUsd ?? null
 
       if (!sourceTokenPriceUsd) {
@@ -887,7 +975,7 @@ export function useSendForm({
           const price = await getTokenPrice(trailsClient, {
             tokenAddress: selectedToken.contractAddress,
             tokenSymbol: selectedToken.symbol,
-            chainId: selectedToken.chainId,
+            chainId: selectedToken.chainId || 0,
           })
           sourceTokenPriceUsd = price?.priceUsd ?? null
         } catch (error) {
@@ -941,12 +1029,12 @@ export function useSendForm({
       ) {
         nativeTokenPriceUsd = sourceTokenPriceUsd
       } else {
-        const originChain = getChainInfo(selectedToken.chainId)
+        const originChain = getChainInfo(selectedToken.chainId || 0)
         const nativeTokenSymbol = originChain?.nativeCurrency?.symbol ?? ""
         const nativePrice = await getTokenPrice(trailsClient, {
           tokenSymbol: nativeTokenSymbol,
           tokenAddress: zeroAddress,
-          chainId: selectedToken.chainId,
+          chainId: selectedToken.chainId || 0,
         })
         nativeTokenPriceUsd = nativePrice?.priceUsd ?? 0
       }
@@ -954,14 +1042,11 @@ export function useSendForm({
       const options = {
         account,
         originTokenAddress: selectedToken.contractAddress,
-        originChainId: selectedToken.chainId,
+        originChainId: selectedToken.chainId || 0,
         originTokenBalance:
           fundMethod === "qr-code" || fundMethod === "exchange"
-            ? parseUnits(
-                "100",
-                selectedToken.contractInfo?.decimals ?? 18,
-              ).toString() // needs to be an amount that is greater than the minimum amount for the swap
-            : selectedToken.balance,
+            ? parseUnits("100", selectedToken.decimals ?? 18).toString() // needs to be an amount that is greater than the minimum amount for the swap
+            : selectedToken.balance || "0",
         destinationChainId: selectedDestinationChain.id,
         recipient,
         destinationTokenAddress,
@@ -982,7 +1067,8 @@ export function useSendForm({
         destinationTokenDecimals,
         paymasterUrl:
           paymasterUrls?.find(
-            (p) => p.chainId.toString() === selectedToken.chainId.toString(),
+            (p) =>
+              p.chainId.toString() === (selectedToken.chainId || 0).toString(),
           )?.url ?? undefined,
         originNativeTokenPriceUsd: nativeTokenPriceUsd,
         quoteProvider: effectiveQuoteProvider,
@@ -996,6 +1082,8 @@ export function useSendForm({
         originPublicClient: originChainPublicClient ?? undefined,
         destinationPublicClient: destinationChainPublicClient ?? undefined,
         isSmartWallet,
+        trailsApiKey,
+        trailsApiUrl: trailsConfig.trailsApiUrl,
       }
 
       logger.console.log(
@@ -1061,15 +1149,13 @@ export function useSendForm({
     recipient,
     destinationTokenAddress,
     destinationTokenAddressFromTokenSymbol,
-    isCustomToken,
-    toToken,
     sequenceIndexerUrl,
     selectedDestToken?.symbol,
     selectedDestinationChain?.id,
     selectedToken?.contractAddress,
     selectedToken?.chainId,
     selectedToken?.balance,
-    selectedToken?.tokenPriceUsd,
+    selectedToken?.priceUsd,
     toCalldata,
     refundAddress,
     paymasterUrls,
@@ -1091,6 +1177,7 @@ export function useSendForm({
     originChainPublicClient,
     destinationChainPublicClient,
     isSmartWallet,
+    trailsConfig.trailsApiUrl,
   ])
 
   // Auto-fetch quotes when inputs change (debounced)
@@ -1107,6 +1194,36 @@ export function useSendForm({
     const isSenderSameAsRecipient =
       account?.address?.toLowerCase() === recipient?.toLowerCase()
 
+    const conditions = {
+      hasAmount: !!amount,
+      amountNotZero: amount !== "0",
+      hasDestinationTokenAddress: !!destinationTokenAddress,
+      isValidRecipient,
+      hasSelectedDestTokenSymbol: !!selectedDestToken?.symbol,
+      hasSelectedDestinationChain: !!selectedDestinationChain?.id,
+      hasSelectedToken: !!selectedToken,
+      isSameToken,
+      isSenderSameAsRecipient,
+      mode,
+    }
+
+    logger.console.log(
+      "[trails-sdk] [CUSTOM-TOKEN] Quote trigger conditions check:",
+      {
+        ...conditions,
+        selectedDestToken: selectedDestToken
+          ? {
+              symbol: selectedDestToken.symbol,
+              decimals: selectedDestToken.decimals,
+              contractAddress: selectedDestToken.contractAddress,
+            }
+          : null,
+        destinationTokenAddress,
+        amount,
+        recipient,
+      },
+    )
+
     if (
       !amount ||
       amount === "0" ||
@@ -1119,6 +1236,24 @@ export function useSendForm({
         isSenderSameAsRecipient &&
         (mode === "swap" || mode === "fund"))
     ) {
+      logger.console.log(
+        "[trails-sdk] [CUSTOM-TOKEN] Quote blocked - missing conditions:",
+        {
+          blockedReasons: {
+            noAmount: !amount || amount === "0",
+            noDestinationTokenAddress: !destinationTokenAddress,
+            invalidRecipient: !isValidRecipient,
+            noSelectedDestTokenSymbol: !selectedDestToken?.symbol,
+            noSelectedDestinationChain: !selectedDestinationChain?.id,
+            noSelectedToken: !selectedToken,
+            sameTokenAndRecipient:
+              isSameToken &&
+              isSenderSameAsRecipient &&
+              (mode === "swap" || mode === "fund"),
+          },
+          conditions,
+        },
+      )
       setPrepareSendResult(null)
       latestResolvedIntentIdRef.current = null
       quoteInputsFingerprintRef.current = null
@@ -1129,9 +1264,19 @@ export function useSendForm({
 
     const nextQuoteInputsFingerprint = buildQuoteInputsFingerprint()
 
+    logger.console.log("[trails-sdk] [CUSTOM-TOKEN] Quote fingerprint check:", {
+      currentFingerprint: quoteInputsFingerprintRef.current,
+      nextFingerprint: nextQuoteInputsFingerprint,
+      willTrigger:
+        quoteInputsFingerprintRef.current !== nextQuoteInputsFingerprint,
+    })
+
     // Fingerprint all quote-driving inputs so we can invalidate debounced quotes immediately when
     // the user switches tokens; this fixes the stale quote so that it stays loading until the new quote is ready.
     if (quoteInputsFingerprintRef.current !== nextQuoteInputsFingerprint) {
+      logger.console.log(
+        "[trails-sdk] [CUSTOM-TOKEN] Quote fingerprint changed, triggering quote fetch",
+      )
       quoteInputsFingerprintRef.current = nextQuoteInputsFingerprint
       latestResolvedIntentIdRef.current = null
       setPrepareSendResult(null)
@@ -1140,6 +1285,9 @@ export function useSendForm({
     }
 
     const timeoutId = setTimeout(() => {
+      logger.console.log(
+        "[trails-sdk] [CUSTOM-TOKEN] Debounce timeout completed, calling getQuote",
+      )
       getQuote()
     }, 500) // Debounce by 500ms
 
@@ -1157,7 +1305,7 @@ export function useSendForm({
     selectedToken?.contractAddress,
     selectedToken?.chainId,
     selectedToken?.balance,
-    selectedToken?.tokenPriceUsd,
+    selectedToken?.priceUsd,
     recipient, // Add recipient to trigger quote re-fetch when it changes
     // selectedFeeOption is passed to send() at execution time, not needed here
     buildQuoteInputsFingerprint,
@@ -1190,14 +1338,25 @@ export function useSendForm({
       },
     )
 
-    setFeeOptions(
-      apiFeeOptions,
-      selectedToken?.chainId,
-      filteredTokensFormattedRef.current,
+    // Convert Token[] to TokenWithBalance[] for setFeeOptions
+    const tokensWithBalance = filteredTokensFormattedRef.current.map(
+      (token) => ({
+        chainId: token.chainId || 0,
+        contractAddress: token.contractAddress,
+        balance: token.balance,
+        imageUrl: token.imageUrl,
+      }),
     )
+
+    setFeeOptions(apiFeeOptions, selectedToken?.chainId, tokensWithBalance)
   }, [prepareSendResult, selectedToken?.chainId, setFeeOptions])
 
   const processSend = useCallback(async () => {
+    logger.console.log("[trails-sdk] processSend called", {
+      fundMethod,
+      hasOnNavigateToOnramp: !!onNavigateToOnramp,
+      hasPrepareSendResult: !!prepareSendResult,
+    })
     try {
       if (!prepareSendResult) {
         setError("No quote available. Please wait for quote to load.")
@@ -1249,59 +1408,6 @@ export function useSendForm({
         quote,
       )
 
-      // Handle exchange fund method - navigate to mesh-connect
-      if (fundMethod === "exchange" && onNavigateToMeshConnect) {
-        const originChainId = quote?.originChain?.id
-        const destinationChainId = quote?.destinationChain?.id
-
-        const toTokenSymbol = quote?.originToken?.symbol // MeshConnect will deposit origin token
-        const toTokenAmount = normalizeNumber(
-          quote.originAmountFormatted,
-        ).toString() // MeshConnect will deposit origin token amount
-        const toChainId = quote?.originChain?.id // MeshConnect will deposit to origin chain
-        const toRecipientAddress = quote.originDepositAddress // MeshConnect will deposit to origin address
-
-        logger.console.log(
-          "[trails-sdk] Navigating to mesh-connect with props:",
-          {
-            toTokenSymbol,
-            toTokenAmount,
-            toChainId,
-            toRecipientAddress,
-          },
-        )
-
-        if (originChainId === destinationChainId) {
-          throw new Error(
-            "[trails-sdk] Must be different chain than the origin chain to use mesh-connect",
-          )
-        }
-
-        if (
-          !toTokenSymbol ||
-          !toTokenAmount ||
-          !toChainId ||
-          !toRecipientAddress
-        ) {
-          throw new Error(
-            "[trails-sdk] Missing required props for mesh-connect",
-          )
-        }
-
-        onNavigateToMeshConnect(
-          {
-            toTokenSymbol,
-            toTokenAmount,
-            toChainId,
-            toRecipientAddress,
-          },
-          prepareSendResult.quote,
-        )
-
-        await handleSend()
-        return
-      }
-
       function onOriginSend() {
         logger.console.log("[trails-sdk] onOriginSend called")
         onConfirm()
@@ -1347,6 +1453,78 @@ export function useSendForm({
         })
       }
 
+      // Handle exchange fund method - navigate to onramp
+      if (fundMethod === "exchange" && onNavigateToOnramp) {
+        logger.console.log(
+          "[trails-sdk] Exchange fund method detected, navigating to onramp",
+          {
+            fundMethod,
+            hasOnNavigateToOnramp: !!onNavigateToOnramp,
+            quote: !!quote,
+          },
+        )
+
+        const originChainId = quote?.originChain?.id
+        const destinationChainId = quote?.destinationChain?.id
+
+        const toTokenSymbol = quote?.originToken?.symbol // Onramp will deposit origin token
+        const toTokenAmount = normalizeNumber(
+          quote.originAmountFormatted,
+        ).toString() // Onramp will deposit origin token amount
+        const toChainId = quote?.originChain?.id // Onramp will deposit to origin chain
+        const toRecipientAddress = quote.originDepositAddress // Onramp will deposit to origin address
+
+        logger.console.log("[trails-sdk] Navigating to onramp with props:", {
+          toTokenSymbol,
+          toTokenAmount,
+          toChainId,
+          toRecipientAddress,
+          originChainId,
+          destinationChainId,
+        })
+
+        // Onramp can be used for both same-chain and cross-chain transfers
+        // It deposits funds to the origin deposit address, which works for both scenarios
+        // No need to restrict to cross-chain only
+
+        if (
+          !toTokenSymbol ||
+          !toTokenAmount ||
+          !toChainId ||
+          !toRecipientAddress
+        ) {
+          throw new Error("[trails-sdk] Missing required props for onramp")
+        }
+
+        // Store handleSend to be called after onramp completes
+        onNavigateToOnramp(
+          {
+            toTokenSymbol,
+            toTokenAmount,
+            toChainId,
+            toRecipientAddress,
+          },
+          prepareSendResult.quote,
+          handleSend, // Pass handleSend callback to be called after onramp completes
+        )
+
+        // Don't call handleSend here - it will be called after onramp completes
+        setIsSubmitting(false)
+        setIsWaitingForWalletConfirm(false)
+        return
+      }
+
+      // Log if exchange method was expected but not handled
+      if (fundMethod === "exchange") {
+        logger.console.error(
+          "[trails-sdk] Exchange fund method detected but onNavigateToOnramp is not available",
+          {
+            fundMethod,
+            hasOnNavigateToOnramp: !!onNavigateToOnramp,
+          },
+        )
+      }
+
       async function walletConfirmRetryHandler() {
         logger.console.log("[trails-sdk] walletConfirmRetryHandler called")
         try {
@@ -1393,7 +1571,7 @@ export function useSendForm({
     recipient,
     onError,
     fundMethod,
-    onNavigateToMeshConnect,
+    onNavigateToOnramp,
     selectedFeeOption, // Include so handleSend captures latest value
     buildQuoteInputsFingerprint,
   ])
@@ -1465,8 +1643,6 @@ export function useSendForm({
           return `Swap`
         } else if (mode === "earn") {
           return `Deposit`
-        } else if (mode === "receive") {
-          return `Pay`
         } else {
           return `Continue on wallet`
         }