0xtrails 0.13.2 → 0.14.0

package/src/widget/hooks/useSendForm.ts

@@ -1,1389 +0,0 @@
-import type { TokenPrice, FeeOption, RouteProvider } from "@0xtrails/api"
-import { JsonEncode } from "@0xtrails/api"
-import type React from "react"
-import { useCallback, useEffect, useMemo, useState, useRef } from "react"
-import {
-  type Account,
-  type Address,
-  getAddress,
-  isAddress,
-  parseUnits,
-  type WalletClient,
-} from "viem"
-import { getChainInfo } from "../../chains.js"
-import { useSupportedChains } from "../../query/chains.hooks.js"
-import { getFullErrorMessage, getIsNetworkError } from "../../error.js"
-import { TradeType, type PrepareSendQuote } from "../../prepareSend.js"
-import type { TransactionState } from "../../transactions.js"
-import { useTokenPrices } from "../../query/price.hooks.js"
-import { normalizeNumber } from "../../utils/format.js"
-import {
-  formatRawAmount,
-  formatUsdAmountDisplay,
-  formatUsdAmountLocaleDisplay,
-  formatAmount,
-  formatAmountDisplay,
-} from "../../utils/format.js"
-import { useTokenBalances } from "../../query/balance.hooks.js"
-import { useAccountTokenBalanceOnchain } from "../../query/balance.hooks.js"
-import type { Token } from "../../tokens.js"
-import {
-  useSupportedTokens,
-  useTokenAddress,
-  useTokenInfo,
-} from "../../tokens.js"
-import {
-  findSupportedTokenByAddressOrSymbol,
-  findFirstSupportedTokenOnChain,
-} from "../utils/tokens.js"
-import type { CheckoutOnHandlers } from "./useCheckout.js"
-import { useResolveEnsAddress } from "../../ens.js"
-import { logger } from "../../logger.js"
-import { useTrails } from "../providers/TrailsProvider.js"
-import {
-  useSelectedFeeOption,
-  type ProcessedFeeOption,
-} from "./useSelectedFeeOption.js"
-import { useWidgetProps } from "./useWidgetProps.js"
-import { useCustomTokens } from "../../customTokens.js"
-import { useQuote } from "./useQuote.js"
-import type { OnrampTrackingData } from "../types/analytics.js"
-import type { FundMethod } from "../../transactionIntent/types.js"
-import { isExternalFundingMethod } from "../../transactionIntent/types.js"
-import { addressEqual } from "../../utils/address.js"
-
-type ChainInfo = {
-  id: number
-  name: string
-  imageUrl?: string
-}
-
-type PaymasterUrl = {
-  chainId: number
-  url: string
-}
-
-export type OnCompleteProps = {
-  transactionStates: TransactionState[]
-}
-
-export type UseSendProps = {
-  account?: Account
-  toAmount?: string
-  fromAmount?: string
-  toRecipient?: string
-  toChainId?: number
-  toToken?: string
-  toApprove?: string
-  toCalldata?: string
-  refundAddress?: string
-  walletClient?: WalletClient
-  onTransactionStateChange: (transactionStates: TransactionState[]) => void
-  onError: (error: Error | string | null) => void
-  onWaitingForWalletConfirm: (
-    quote: PrepareSendQuote,
-    sendFn?:
-      | ((options?: {
-          selectedFeeOption?: FeeOption | null
-          onOriginSend?: () => void
-          depositTransactionHash?: string
-          skipCommit?: boolean
-        }) => Promise<any>)
-      | null,
-  ) => void
-  onWaitingForOnrampConfirm?: (quote: PrepareSendQuote) => void
-  paymasterUrls?: PaymasterUrl[]
-  onSend: (amount: string, recipient: string) => void
-  onConfirm: () => void
-  onComplete: (result: OnCompleteProps) => void
-  selectedToken?: Token
-  setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
-  tradeType?: TradeType
-  swapProvider?: string
-  bridgeProvider?: string
-  swapProviderFallback?: boolean
-  bridgeProviderFallback?: boolean
-  fundMethod?: FundMethod
-  mode?: "pay" | "fund" | "earn" | "swap" | "withdraw"
-  checkoutOnHandlers?: CheckoutOnHandlers
-  refetchTrigger?: number
-  onrampTrackingData?: OnrampTrackingData | null
-  skipFeeBalanceFetch?: boolean // Skip fee balance fetching for onramp/direct-transfer modes
-  onNavigateToOnrampMesh?: (props: {
-    toTokenSymbol?: string
-    toTokenAmount?: string
-    toChainId?: number
-    toRecipientAddress?: string
-    toAmountUsd?: number
-  }) => void
-}
-
-export type UseSendReturn = {
-  amount: string
-  amountRaw: string
-  amountUsdDisplay: string
-  amountUsdLocaleDisplay: string
-  balanceUsdDisplay: string
-  balanceLocaleDisplay: string
-  balanceUsdLocaleDisplay: string
-  chainInfo: ChainInfo | null
-  error: string | null
-  toChainId: number | undefined
-  balanceFormatted: string | undefined
-  balanceRaw: string
-  tokenDecimals: number
-  handleRecipientInputChange: (e: React.ChangeEvent<HTMLInputElement>) => void
-  sendFn?:
-    | ((options?: {
-        selectedFeeOption?: FeeOption | null
-        onOriginSend?: () => void
-        depositTransactionHash?: string
-        skipCommit?: boolean
-      }) => Promise<any>)
-    | null
-  handleSubmit: (e: React.FormEvent) => Promise<void>
-  isChainDropdownOpen: boolean
-  isSubmitting: boolean
-  isLoadingQuote: boolean
-  isTokenDropdownOpen: boolean
-  recipient: string
-  recipientInput: string
-  selectedDestinationChain: ChainInfo | null
-  selectedDestToken: Token | null
-  setAmount: (amount: string) => void
-  setRecipientInput: (recipientInput: string) => void
-  setSelectedDestinationChain: (chain: ChainInfo) => void
-  setSelectedDestToken: (token: Token | null) => void
-  setSelectedFeeOption: (token: FeeOption | null) => void
-  processedFeeOptions: ProcessedFeeOption[]
-  supportedTokens: Token[]
-  supportedChains: ChainInfo[]
-  ensAddress: string | null
-  isWaitingForWalletConfirm: boolean
-  buttonText: string
-  isValidRecipient: boolean
-  destTokenPrices: TokenPrice[] | null
-  sourceTokenPrices: TokenPrice[] | null
-  selectedToken?: Token
-  selectedFeeOption: FeeOption | null
-  setIsChainDropdownOpen: (isOpen: boolean) => void
-  setIsTokenDropdownOpen: (isOpen: boolean) => void
-  toAmountFormatted: string
-  destinationTokenAddress: string | null
-  isValidCustomToken: boolean
-  prepareSendQuote: PrepareSendQuote | null
-  toAmountDisplay: string
-  quoteError: string | null
-  quoteErrorPrettified: string | null
-  isRecipientContract: boolean
-  isSenderContractOnOrigin: boolean
-  isSenderContractOnDestination: boolean
-  isLoadingBalance: boolean
-}
-
-export function useSendForm({
-  account,
-  toAmount, // Custom specified amount
-  toRecipient, // Custom specified recipient
-  toChainId, // Custom specified destination chain id
-  toToken, // Custom specified destination token address or symbol
-  toApprove, // Custom specified destination approve address
-  toCalldata, // Custom specified destination calldata
-  walletClient,
-  onTransactionStateChange,
-  onError,
-  onWaitingForWalletConfirm,
-  paymasterUrls,
-  selectedToken,
-  onSend,
-  onConfirm,
-  onComplete,
-  setWalletConfirmRetryHandler,
-  tradeType = TradeType.EXACT_OUTPUT,
-  swapProvider,
-  bridgeProvider,
-  swapProviderFallback,
-  bridgeProviderFallback,
-  fundMethod,
-  mode,
-  checkoutOnHandlers,
-  fromAmount,
-  onrampTrackingData,
-  skipFeeBalanceFetch = false,
-  onNavigateToOnrampMesh,
-}: UseSendProps): UseSendReturn {
-  // Read isSmartWallet from widget props
-  const { isSmartWallet } = useWidgetProps()
-
-  // Note: swapProvider and bridgeProvider auto-detection for etherlink is now handled in useQuote
-
-  const [amount, setAmount] = useState(
-    tradeType === TradeType.EXACT_INPUT ? (fromAmount ?? "") : (toAmount ?? ""),
-  )
-  const [recipientInput, setRecipientInput] = useState(toRecipient ?? "")
-  const [error, setError] = useState<string | null>(null)
-  const { data: supportedChains = [] } = useSupportedChains()
-  const { ensAddress } = useResolveEnsAddress({
-    textInput: recipientInput,
-  })
-
-  const recipient = ensAddress || recipientInput
-
-  useEffect(() => {
-    if (onError) {
-      onError(error)
-    }
-  }, [error, onError])
-
-  const handleRecipientInputChange = (
-    e: React.ChangeEvent<HTMLInputElement>,
-  ) => {
-    setRecipientInput(e.target.value.trim())
-  }
-
-  const [selectedDestinationChain, setSelectedDestinationChain] =
-    useState<ChainInfo>(() => {
-      const chain = supportedChains.find((chain) => chain.id === toChainId)
-      if (chain) {
-        return chain
-      }
-      return supportedChains[0]!
-    })
-
-  // Fetch all supported tokens (without chainId filter) to reuse for both filtering and official checks
-  const { supportedTokens: allSupportedTokens, isLoadingTokens } =
-    useSupportedTokens()
-
-  // Filter tokens by destination chain where needed
-  const supportedTokens = useMemo(() => {
-    if (!selectedDestinationChain?.id) return allSupportedTokens
-    return allSupportedTokens.filter(
-      (token) => token.chainId === selectedDestinationChain.id,
-    )
-  }, [allSupportedTokens, selectedDestinationChain?.id])
-
-  // Note: Contract detection is now handled in useQuote
-
-  const isCustomToken = toToken?.startsWith("0x") ?? false
-
-  const { addCustomToken } = useCustomTokens()
-
-  const {
-    tokenInfo: customTokenInfo,
-    isLoading: isLoadingCustomToken,
-    error: errorCustomToken,
-  } = useTokenInfo({
-    address: isCustomToken ? toToken! : "",
-    chainId: toChainId,
-  })
-
-  const isValidCustomToken = useMemo(() => {
-    if (!isCustomToken) {
-      return true
-    }
-
-    return Boolean(
-      isCustomToken &&
-        !errorCustomToken &&
-        !isLoadingCustomToken &&
-        !!customTokenInfo,
-    )
-  }, [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)
-      // Filter allSupportedTokens by chainId for the check
-      const existsInOfficialSupportedTokens = allSupportedTokens.some(
-        (token: Token) =>
-          token.chainId === toChainId &&
-          addressEqual(token.contractAddress, toToken),
-      )
-
-      // 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,
-    allSupportedTokens,
-  ])
-
-  useEffect(() => {
-    if (isCustomToken && customTokenInfo && !isLoadingCustomToken) {
-      // customTokenInfo is already Token from getTokenInfo
-      setSelectedDestToken(customTokenInfo as Token)
-    }
-  }, [customTokenInfo, isCustomToken, isLoadingCustomToken])
-
-  useEffect(() => {
-    if (isCustomToken && errorCustomToken && !isLoadingCustomToken) {
-      logger.console.error("[trails-sdk] errorCustomToken", errorCustomToken)
-
-      if (getIsNetworkError(errorCustomToken)) {
-        setError(
-          "Failed to verify token address. Please check your network connection and try again.",
-        )
-      } else {
-        setError(
-          `Invalid custom toToken address (${toToken}). The address may not be a valid token on this chain.`,
-        )
-      }
-    }
-  }, [errorCustomToken, isCustomToken, isLoadingCustomToken, toToken])
-
-  const defaultDestToken = useMemo(() => {
-    if (selectedDestinationChain) {
-      return (
-        findFirstSupportedTokenOnChain(
-          supportedTokens,
-          selectedDestinationChain.id,
-        ) || null
-      )
-    }
-    return supportedTokens?.[0] || null
-  }, [supportedTokens, selectedDestinationChain])
-
-  const [isChainDropdownOpen, setIsChainDropdownOpen] = useState(false)
-  const [isTokenDropdownOpen, setIsTokenDropdownOpen] = useState(false)
-  const [selectedDestToken, setSelectedDestToken] = useState<Token | null>(
-    () => {
-      let token = defaultDestToken
-      if (toToken && !isCustomToken) {
-        token =
-          findSupportedTokenByAddressOrSymbol(
-            supportedTokens,
-            toToken,
-            toChainId || selectedDestinationChain?.id,
-          ) || null
-      }
-
-      return token
-    },
-  )
-
-  useEffect(() => {
-    if (!selectedDestToken && defaultDestToken) {
-      setSelectedDestToken(defaultDestToken)
-    }
-  }, [selectedDestToken, defaultDestToken])
-
-  // Auto-derive destination chain from destination token.
-  // This removes the need for external chain-sync effects in ClassicSwap/Fund/Withdraw.
-  useEffect(() => {
-    if (selectedDestToken?.chainId) {
-      const chainInfo = getChainInfo(selectedDestToken.chainId)
-      if (chainInfo) {
-        setSelectedDestinationChain(chainInfo)
-      }
-    }
-  }, [selectedDestToken])
-
-  // Verify that decimals are stable and loaded before calculating amountRaw
-  const isDecimalsVerified = useMemo(() => {
-    // Wait for supported tokens to load first
-    if (isLoadingTokens) return false
-
-    // Prevents using defaultDestToken (e.g., ETH with 18 decimals) before the actual token info loads
-    if (isCustomToken && isLoadingCustomToken) return false
-
-    if (tradeType === TradeType.EXACT_OUTPUT) {
-      // For EXACT_OUTPUT, we need destination token decimals
-      // Also verify that selectedDestToken matches the expected toToken address (for custom tokens)
-      const hasValidDecimals =
-        selectedDestToken?.contractAddress !== undefined &&
-        selectedDestToken?.decimals !== undefined &&
-        selectedDestToken?.chainId === selectedDestinationChain?.id
-
-      // If toToken is specified as an address, ensure selectedDestToken matches it
-      if (isCustomToken && toToken && hasValidDecimals) {
-        return (
-          selectedDestToken?.contractAddress?.toLowerCase() ===
-          toToken.toLowerCase()
-        )
-      }
-
-      return hasValidDecimals
-    }
-    // For EXACT_INPUT, we need source token decimals
-    return selectedToken?.decimals !== undefined
-  }, [
-    isLoadingTokens,
-    isCustomToken,
-    isLoadingCustomToken,
-    toToken,
-    selectedDestToken?.contractAddress,
-    selectedDestToken?.decimals,
-    selectedDestToken?.chainId,
-    selectedDestinationChain?.id,
-    selectedToken?.decimals,
-    tradeType,
-  ])
-
-  // These are handled internally by useQuote via TrailsProvider context
-  const {
-    trailsApiKey: _trailsApiKey,
-    sequenceIndexerUrl: _sequenceIndexerUrl,
-  } = useTrails()
-
-  // Get user's token balances for fee option validation
-  // Skip fetching entirely for onramp/direct-transfer modes where fee options aren't shown
-  const { sortedTokens: feeTokenBalances } = useTokenBalances(
-    skipFeeBalanceFetch ? null : (account?.address as Address | null),
-    undefined,
-    { refetchInterval: false },
-  )
-
-  // Convert to TokenWithBalance format for setFeeOptions
-  const tokensWithBalance = useMemo(() => {
-    if (!feeTokenBalances) return []
-    return feeTokenBalances.map((token) => ({
-      chainId: token.chainId || 0,
-      contractAddress: token.contractAddress,
-      balance: token.balance,
-      imageUrl: token.imageUrl,
-    }))
-  }, [feeTokenBalances])
-
-  // Use ref to store latest tokensWithBalance without triggering re-renders
-  const tokensWithBalanceRef = useRef(tokensWithBalance)
-  tokensWithBalanceRef.current = tokensWithBalance
-
-  const destTokenAddress = useTokenAddress({
-    chainId: selectedDestinationChain?.id,
-    tokenSymbol: selectedDestToken?.symbol,
-  })
-
-  // Fetch both source and destination prices in a single call
-  // Skip only for onramp-meld mode where prices aren't needed
-  // (for onramp-meld, source token is always USDC and amount comes from Meld quote)
-  const combinedTokenPricesInput = useMemo(() => {
-    if (fundMethod === "onramp-meld") {
-      return []
-    }
-
-    const inputs: Array<{
-      tokenSymbol: string
-      tokenAddress: string
-      chainId: number
-    }> = []
-
-    // Add destination token
-    if (selectedDestToken && destTokenAddress && selectedDestinationChain?.id) {
-      inputs.push({
-        tokenSymbol: selectedDestToken.symbol,
-        tokenAddress: destTokenAddress,
-        chainId: selectedDestinationChain.id,
-      })
-    }
-
-    // Add source token (if different from destination)
-    if (selectedToken) {
-      const isDuplicate =
-        selectedDestToken &&
-        destTokenAddress &&
-        addressEqual(selectedToken.contractAddress, destTokenAddress) &&
-        selectedToken.chainId === selectedDestinationChain?.id
-
-      if (!isDuplicate) {
-        inputs.push({
-          tokenSymbol: selectedToken.symbol,
-          tokenAddress: selectedToken.contractAddress,
-          chainId: selectedToken.chainId || 69,
-        })
-      }
-    }
-
-    return inputs
-  }, [
-    fundMethod,
-    selectedDestToken,
-    destTokenAddress,
-    selectedDestinationChain?.id,
-    selectedToken,
-  ])
-
-  const { tokenPrices: allTokenPrices } = useTokenPrices(
-    combinedTokenPricesInput,
-  )
-
-  // Extract destination token price from combined results
-  const destTokenPrices = useMemo(() => {
-    if (!allTokenPrices || !destTokenAddress || !selectedDestinationChain?.id)
-      return null
-    return allTokenPrices.filter(
-      (p) =>
-        p.token?.tokenAddress?.toLowerCase() ===
-          destTokenAddress.toLowerCase() &&
-        p.token?.chainId === selectedDestinationChain.id,
-    )
-  }, [allTokenPrices, destTokenAddress, selectedDestinationChain?.id])
-
-  // Extract source token price from combined results
-  const sourceTokenPrices = useMemo(() => {
-    if (!allTokenPrices || !selectedToken) return null
-    return allTokenPrices.filter(
-      (p) =>
-        p.token?.tokenAddress?.toLowerCase() ===
-          selectedToken.contractAddress.toLowerCase() &&
-        p.token?.chainId === selectedToken.chainId,
-    )
-  }, [allTokenPrices, selectedToken])
-
-  // Update selectedChain when toChainId prop changes
-  useEffect(() => {
-    if (toChainId) {
-      const newChain = supportedChains.find((chain) => chain.id === toChainId)
-      if (newChain) {
-        setSelectedDestinationChain(newChain)
-      }
-    }
-  }, [toChainId, supportedChains])
-
-  // Update selectedDestToken when toToken prop changes
-  useEffect(() => {
-    if (toToken && !isCustomToken && selectedDestinationChain?.id) {
-      const newToken = findSupportedTokenByAddressOrSymbol(
-        supportedTokens,
-        toToken,
-        toChainId || selectedDestinationChain.id,
-      )
-      if (newToken) {
-        setSelectedDestToken(newToken)
-      }
-    }
-  }, [
-    toToken,
-    supportedTokens,
-    toChainId,
-    selectedDestinationChain?.id,
-    isCustomToken,
-  ])
-
-  // Sync amount from props: fromAmount drives EXACT_INPUT, toAmount drives EXACT_OUTPUT.
-  // This removes the need for external sync effects in ClassicSwap/Fund/Withdraw.
-  useEffect(() => {
-    if (tradeType === TradeType.EXACT_INPUT && fromAmount !== undefined) {
-      setAmount(fromAmount)
-    } else if (tradeType === TradeType.EXACT_OUTPUT) {
-      setAmount(toAmount ?? "")
-    }
-  }, [fromAmount, toAmount, tradeType])
-
-  const toAmountFormatted = useMemo(() => {
-    return formatAmount(toAmount || 0)
-  }, [toAmount])
-
-  // Update recipientInput when toRecipient prop changes (recipient is derived from recipientInput + ENS)
-  const [prevToRecipient, setPrevToRecipient] = useState(toRecipient)
-  if (toRecipient !== prevToRecipient) {
-    setPrevToRecipient(toRecipient)
-    setRecipientInput(toRecipient ?? "")
-  }
-
-  const chainInfo = getChainInfo(selectedToken?.chainId)
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [isWaitingForWalletConfirm, setIsWaitingForWalletConfirm] =
-    useState(false)
-
-  // Create a stable callback for transaction state changes
-  const handleTransactionStateChange = useCallback(
-    (transactionStates: TransactionState[]) => {
-      try {
-        // Pass transaction states to widget-level handler
-        onTransactionStateChange(transactionStates)
-      } catch (error) {
-        logger.console.error(
-          "[trails-sdk] Error calling onTransactionStateChange:",
-          error,
-        )
-      }
-    },
-    [onTransactionStateChange],
-  )
-
-  // Skip balance fetching for onramp/direct-transfer modes where balances aren't displayed
-  const skipBalanceFetch = fundMethod && fundMethod !== "wallet"
-
-  // Get token with fresh balance data
-  const { token: tokenWithFreshBalance, isLoadingBalance } =
-    useAccountTokenBalanceOnchain(selectedToken, account?.address, {
-      disabled: skipBalanceFetch,
-      withPrices: true,
-    })
-
-  // Use fresh balance if available
-  const balanceFormatted =
-    tokenWithFreshBalance?.balance && tokenWithFreshBalance?.decimals
-      ? formatRawAmount(
-          tokenWithFreshBalance.balance || "0",
-          tokenWithFreshBalance.decimals || 18,
-        )
-      : undefined
-  const balanceUsdDisplay = tokenWithFreshBalance?.balanceUsdFormatted || ""
-  const balanceLocaleDisplay = tokenWithFreshBalance?.balanceLocaleDisplay || ""
-  const balanceUsdLocaleDisplay =
-    tokenWithFreshBalance?.balanceUsdLocaleDisplay || ""
-  const isValidRecipient = Boolean(recipient && isAddress(recipient))
-
-  // Calculate USD value based on trade type
-  const amountUsdDisplay = useMemo(() => {
-    const tokenPrice =
-      tradeType === TradeType.EXACT_INPUT
-        ? (sourceTokenPrices?.[0]?.priceUsd ?? 0) // For fund form, use source token price
-        : (destTokenPrices?.[0]?.priceUsd ?? 0) // For payment form, use dest token price
-    const amountUsd = Number(amount) * tokenPrice
-    return formatUsdAmountDisplay(amountUsd)
-  }, [amount, destTokenPrices, sourceTokenPrices, tradeType])
-
-  // Locale version of USD display
-  const amountUsdLocaleDisplay = useMemo(() => {
-    const tokenPrice =
-      tradeType === TradeType.EXACT_INPUT
-        ? (sourceTokenPrices?.[0]?.priceUsd ?? 0) // For fund form, use source token price
-        : (destTokenPrices?.[0]?.priceUsd ?? 0) // For payment form, use dest token price
-    const amountUsd = Number(amount) * tokenPrice
-    return formatUsdAmountLocaleDisplay(amountUsd)
-  }, [amount, destTokenPrices, sourceTokenPrices, tradeType])
-
-  // Use the fee token selection hook
-  const {
-    selectedFeeOption,
-    setSelectedFeeOption,
-    processedFeeOptions,
-    setFeeOptions,
-  } = useSelectedFeeOption()
-
-  // Note: Contract detection (isRecipientContract, isSenderContractOnOrigin, isSenderContractOnDestination)
-  // is now handled in useQuote and returned from there
-
-  const destinationTokenAddressFromTokenSymbol = useTokenAddress({
-    chainId: selectedDestinationChain?.id,
-    tokenSymbol: selectedDestToken?.symbol,
-  })
-
-  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
-    }
-    // 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(() => {
-    // Skip validation during initialization when no tokens are selected
-    if (!selectedToken && !selectedDestToken) {
-      return "0"
-    }
-
-    // Wait for token decimals to be verified before calculating
-    if (!isDecimalsVerified) {
-      return "0"
-    }
-
-    if (!amount && !(selectedToken?.decimals || selectedDestToken?.decimals)) {
-      logger.console.warn("[trails-sdk] Missing token decimals for quote", {
-        amount,
-        selectedToken,
-        selectedDestToken,
-        tradeType,
-      })
-      return "0"
-    }
-
-    // For EXACT_INPUT: we only need source token decimals (user enters source amount)
-    // For EXACT_OUTPUT: we only need destination token decimals (user enters destination amount)
-    if (tradeType === TradeType.EXACT_INPUT) {
-      if (!selectedToken?.decimals) {
-        logger.console.warn(
-          "[trails-sdk] Missing source token decimals for quote",
-          {
-            selectedToken,
-            tradeType,
-          },
-        )
-        return "0"
-      }
-    } else {
-      // EXACT_OUTPUT mode
-      if (!selectedDestToken?.decimals) {
-        logger.console.warn(
-          "[trails-sdk] Missing destination token decimals for quote",
-          {
-            selectedDestToken,
-            tradeType,
-          },
-        )
-        return "0"
-      }
-    }
-
-    // For EXACT_INPUT: use source token decimals (user enters source amount)
-    // For EXACT_OUTPUT: use destination token decimals (user enters destination amount)
-    const decimals =
-      tradeType === TradeType.EXACT_INPUT
-        ? selectedToken?.decimals
-        : selectedDestToken?.decimals
-
-    if (!decimals) {
-      logger.console.warn("[trails-sdk] Missing token decimals for quote", {
-        decimals,
-        selectedToken,
-        selectedDestToken,
-        tradeType,
-      })
-      return "0"
-    }
-
-    try {
-      return parseUnits(amount, decimals).toString()
-    } catch {
-      return "0"
-    }
-  }, [
-    amount,
-    isDecimalsVerified,
-    selectedDestToken,
-    selectedToken,
-    selectedDestToken?.decimals,
-    selectedToken?.decimals,
-    tradeType,
-  ])
-
-  // Determine paymaster URL for the origin chain
-  const paymasterUrl = useMemo(() => {
-    return paymasterUrls?.find(
-      (p) => p.chainId.toString() === (selectedToken?.chainId || 0).toString(),
-    )?.url
-  }, [paymasterUrls, selectedToken?.chainId])
-
-  // Check if this is a same-chain same-token swap to self (not allowed - don't fetch quote)
-  const isSameChainSameTokenToSelf = useMemo(() => {
-    if (
-      !selectedToken ||
-      !selectedDestToken ||
-      !account?.address ||
-      !recipient
-    ) {
-      return false
-    }
-
-    const isSameToken =
-      selectedToken.contractAddress?.toLowerCase() ===
-        selectedDestToken.contractAddress?.toLowerCase() &&
-      selectedToken.chainId === selectedDestToken.chainId
-
-    const isSameChain = selectedToken.chainId === selectedDestToken.chainId
-
-    if (fundMethod && fundMethod !== "wallet") {
-      return false
-    }
-
-    const isToSelf = addressEqual(recipient, account.address)
-
-    return isSameToken && isSameChain && isToSelf
-  }, [
-    selectedToken,
-    selectedDestToken,
-    account?.address,
-    recipient,
-    fundMethod,
-  ])
-
-  // Use the centralized useQuote hook for quote fetching
-  // Don't fetch quote if it's same-chain same-token to self (invalid scenario)
-  const {
-    quote: quoteResult,
-    send: sendFn,
-    isLoadingQuote: quoteIsLoading,
-    quoteError: rawQuoteError,
-    quoteErrorPrettified: rawQuoteErrorPrettified,
-    feeOptions: quoteFeeOptions,
-    // Contract detection from useQuote
-    isRecipientContract: quoteIsRecipientContract,
-    isSenderContractOnOrigin: quoteIsSenderContractOnOrigin,
-    isSenderContractOnDestination: quoteIsSenderContractOnDestination,
-  } = useQuote({
-    walletClient,
-    fromTokenAddress: selectedToken?.contractAddress ?? null,
-    fromChainId: selectedToken?.chainId ?? null,
-    toTokenAddress: destinationTokenAddress ?? null,
-    toChainId: selectedDestinationChain?.id ?? null,
-    swapAmount: amountRaw !== "0" ? amountRaw : undefined,
-    tradeType,
-    toAddress: isSameChainSameTokenToSelf
-      ? null
-      : isValidRecipient
-        ? recipient
-        : null,
-    toApprove,
-    toCalldata,
-    onStatusUpdate: handleTransactionStateChange,
-    swapProvider: swapProvider as RouteProvider | null | undefined,
-    bridgeProvider: bridgeProvider as RouteProvider | null | undefined,
-    swapProviderFallback,
-    bridgeProviderFallback,
-    checkoutOnHandlers,
-    paymasterUrl,
-    selectedFeeOption: selectedFeeOption ?? null,
-    isSmartWallet,
-    fundMethod,
-    onramp: onrampTrackingData,
-    mode,
-  })
-
-  // Map useQuote outputs for backward compatibility with existing code
-  // This allows gradual migration without breaking existing functionality
-  const isLoadingQuote = quoteIsLoading
-  const quoteError = rawQuoteError ? getFullErrorMessage(rawQuoteError) : null
-  const quoteErrorPrettified = rawQuoteErrorPrettified || null
-
-  // Create a compatibility layer for prepareSendResult
-  // This maps the useQuote output to the shape expected by existing code
-  const prepareSendResult = useMemo(() => {
-    if (!quoteResult || !sendFn) return null
-
-    // Quote type now has all PrepareSendQuote fields with proper defaults
-    const quote = { ...quoteResult } as PrepareSendQuote
-
-    return {
-      quote,
-      feeOptions: { feeOptions: quoteFeeOptions },
-      // Note: send function is handled separately via sendFn
-    }
-  }, [quoteResult, sendFn, quoteFeeOptions])
-
-  // Calculate destination amount from quote if available
-  const quotedDestinationAmount = useMemo(() => {
-    const currentDestAmount =
-      prepareSendResult?.quote?.destinationAmountFormatted
-
-    if (currentDestAmount && currentDestAmount !== "0") {
-      return currentDestAmount
-    }
-
-    // Fall back to toAmount prop (for EXACT_OUTPUT mode)
-    return toAmountFormatted
-  }, [prepareSendResult, toAmountFormatted])
-
-  const quotedDestinationAmountDisplay = useMemo(() => {
-    const formattedAmount = formatAmount(quotedDestinationAmount || 0)
-    return Number(formattedAmount) === 0 ? "0" : formattedAmount
-  }, [quotedDestinationAmount])
-
-  // Use server quote USD values when available for consistency
-  // Falls back to client-calculated values during loading or if quote unavailable
-  const amountUsdDisplayFinal = useMemo(() => {
-    if (prepareSendResult?.quote) {
-      const serverUsdDisplay =
-        tradeType === TradeType.EXACT_INPUT
-          ? prepareSendResult.quote.originAmountUsdDisplay
-          : prepareSendResult.quote.destinationAmountUsdDisplay
-      if (serverUsdDisplay && serverUsdDisplay !== "$0.00") {
-        return serverUsdDisplay
-      }
-    }
-    return amountUsdDisplay
-  }, [prepareSendResult, tradeType, amountUsdDisplay])
-
-  // Set raw fee options in the hook whenever prepareSendResult changes
-  useEffect(() => {
-    const apiFeeOptions = prepareSendResult?.feeOptions?.feeOptions ?? []
-    logger.console.log(
-      "[trails-sdk] [fee-select] useSendForm setting raw fee options:",
-      {
-        prepareSendResult,
-        feeOptions: prepareSendResult?.feeOptions,
-        apiFeeOptions,
-        length: apiFeeOptions.length,
-      },
-    )
-
-    setFeeOptions(
-      apiFeeOptions,
-      selectedToken?.chainId,
-      tokensWithBalanceRef.current,
-    )
-  }, [prepareSendResult, selectedToken?.chainId, setFeeOptions])
-
-  const processSend = useCallback(async () => {
-    logger.console.log("[trails-sdk] processSend called", {
-      fundMethod,
-      hasQuote: !!prepareSendResult,
-      hasSend: !!sendFn,
-    })
-    logger.console.log(
-      `[trails-sdk] Called processSend with fund method: ${fundMethod}`,
-    )
-    try {
-      if (!prepareSendResult || !sendFn) {
-        setError("No quote available. Please wait for quote to load.")
-        return
-      }
-
-      // React Query handles quote staleness via its caching mechanism,
-      // so we no longer need fingerprint checks
-
-      setError(null)
-      setIsSubmitting(true)
-
-      const quote = prepareSendResult.quote
-
-      logger.console.log("[trails-sdk] Using quote from useQuote:", quote)
-
-      function onOriginSend() {
-        logger.console.log("[trails-sdk] onOriginSend called")
-        onConfirm()
-        setIsWaitingForWalletConfirm(false)
-        onSend(amount, recipient)
-      }
-
-      setIsWaitingForWalletConfirm(true)
-      // For onramp-meld, let ClassicSwap handle the onWaitingForOnrampConfirm call
-      // after widget session creation, not here
-      if (fundMethod !== "onramp-meld") {
-        onWaitingForWalletConfirm(
-          prepareSendResult.quote,
-          fundMethod === "direct-transfer" ? sendFn : undefined,
-        )
-      }
-
-      async function handleSend() {
-        logger.console.log(
-          "[trails-sdk] [fee-select] [gasless-flow] handleSend called, about to call sendFn()",
-        )
-        logger.console.log(
-          "[trails-sdk] [fee-select] [gasless-flow] selectedFeeOption value at swap() call time:",
-          {
-            selectedFeeOption,
-            isNull: selectedFeeOption === null,
-            isUndefined: selectedFeeOption === undefined,
-            type: typeof selectedFeeOption,
-            stringified: JsonEncode(selectedFeeOption),
-          },
-        )
-
-        // Execute the swap via useQuote's send function
-        // sendFn is guaranteed to be non-null here due to the check at the top of processSend
-        // Pass the current selectedFeeOption so gasless flow uses the correct fee token
-        // Pass onOriginSend as callback to be called when wallet signature is confirmed
-        const sendResult = await sendFn!({
-          selectedFeeOption: selectedFeeOption ?? null,
-          onOriginSend, // Called when wallet signature is confirmed, before tx completes
-        })
-        logger.console.log("[trails-sdk] sendFn() completed:", sendResult)
-
-        // Move to receipt screen
-        onComplete({
-          transactionStates: quote.transactionStates ?? [],
-        })
-      }
-
-      // Handle exchange/direct-transfer fund methods - don't call handleSend immediately
-      if (isExternalFundingMethod(fundMethod)) {
-        // External funding flows commit and execute before navigating away from
-        // the funding form. Their follow-up screens only monitor deposit balance
-        // and should not call handleSend again.
-        if (fundMethod === "direct-transfer") {
-          logger.console.log(
-            "[trails-sdk] Direct-transfer fund method detected, deferring send until deposit confirmed",
-            {
-              fundMethod,
-              quote: !!quote,
-            },
-          )
-          setIsSubmitting(false)
-          setIsWaitingForWalletConfirm(false)
-          return
-        }
-
-        logger.console.log(
-          "[trails-sdk] Exchange or Meld fund method detected, navigating to onramp",
-          {
-            fundMethod,
-            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 ?? "0",
-        ).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
-        // Extract USD amount from quote for Meld widget (sourceAmountLocked)
-        const toAmountUsd = quote?.originAmountUsdFormatted
-          ? parseFloat(quote.originAmountUsdFormatted)
-          : undefined
-
-        logger.console.log("[trails-sdk] Navigating to onramp with props:", {
-          toTokenSymbol,
-          toTokenAmount,
-          toChainId,
-          toRecipientAddress,
-          toAmountUsd,
-          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")
-        }
-
-        if (fundMethod === "onramp-mesh") {
-          logger.console.log(
-            "[trails-sdk] Preparing Mesh onramp intent before navigation",
-            {
-              hasSendFn: !!sendFn,
-              intentId: quote?.intentId,
-            },
-          )
-
-          await sendFn!({
-            selectedFeeOption: selectedFeeOption ?? null,
-          })
-
-          logger.console.log(
-            "[trails-sdk] Mesh onramp intent prepared successfully",
-            {
-              intentId: quote?.intentId,
-            },
-          )
-
-          if (onNavigateToOnrampMesh) {
-            onNavigateToOnrampMesh({
-              toTokenSymbol,
-              toTokenAmount,
-              toChainId,
-              toRecipientAddress,
-              toAmountUsd,
-            })
-          }
-        } else if (fundMethod === "onramp-meld") {
-          // For Meld, call the onWaitingForOnrampConfirm handler (existing flow)
-          // This will be handled by the existing onramp-confirmation screen
-          // The navigation happens via handleWaitingOnrampConfirm in widget.tsx
-        }
-
-        // Don't call handleSend here - it will be called after onramp completes
-        setIsSubmitting(false)
-        setIsWaitingForWalletConfirm(false)
-        return
-      }
-
-      async function walletConfirmRetryHandler() {
-        logger.console.log("[trails-sdk] walletConfirmRetryHandler called")
-        try {
-          logger.console.log("[trails-sdk] About to call handleRetry")
-          await handleSend()
-          logger.console.log("[trails-sdk] handleRetry completed successfully")
-        } catch (error) {
-          logger.console.error(
-            "[trails-sdk] Error in prepareSend walletConfirmRetryHandler:",
-            error,
-          )
-          const errorMessage = getFullErrorMessage(error)
-          setError(errorMessage)
-          if (onError) {
-            onError(errorMessage)
-          }
-        }
-      }
-
-      setWalletConfirmRetryHandler(
-        () => walletConfirmRetryHandler as unknown as Promise<void>,
-      )
-
-      await handleSend()
-    } catch (error) {
-      logger.console.error("[trails-sdk] Error in prepareSend:", error)
-      const errorMessage = getFullErrorMessage(error)
-      setError(errorMessage)
-      if (onError) {
-        onError(errorMessage)
-      }
-    }
-
-    setIsSubmitting(false)
-    setIsWaitingForWalletConfirm(false)
-  }, [
-    prepareSendResult,
-    sendFn,
-    amount,
-    onSend,
-    onConfirm,
-    onComplete,
-    setWalletConfirmRetryHandler,
-    onWaitingForWalletConfirm,
-    recipient,
-    onError,
-    fundMethod,
-    selectedFeeOption, // Include so handleSend captures latest value
-    onNavigateToOnrampMesh,
-  ])
-
-  const handleSubmit = async (e: React.FormEvent) => {
-    e.preventDefault()
-    processSend().catch((error) => {
-      logger.console.error("[trails-sdk] Error in processSend:", error)
-      setError(
-        error instanceof Error ? error.message : "An unexpected error occurred",
-      )
-    })
-  }
-
-  // Get button text based on recipient and calldata
-  const buttonText = useMemo(() => {
-    if (!account?.address) return "Connect your wallet"
-    if (!selectedToken) return "Select a token"
-    if (!amount) return "Enter an amount"
-    if (!selectedDestToken?.symbol) return "Select a token"
-    if (isWaitingForWalletConfirm) return "Waiting for wallet..."
-    if (isSubmitting) return "Processing..."
-    if (!isValidRecipient && mode === "earn") return "Select a vault"
-    if (!isValidRecipient) return "Enter a recipient"
-    if (isLoadingQuote) return "Getting quote..."
-    if (!prepareSendResult) return "No quote available"
-
-    const amountFormatted =
-      prepareSendResult?.quote?.originAmountFormatted ?? formatAmount(amount)
-    const destinationAmountFormatted =
-      prepareSendResult?.quote?.destinationAmountFormatted ??
-      formatAmount(amount)
-    const tokenSymbol = selectedToken.symbol
-    const destinationTokenSymbol = selectedDestToken?.symbol
-
-    const amountDisplay = formatAmountDisplay(amountFormatted)
-    const destinationAmountDisplay = formatAmountDisplay(
-      destinationAmountFormatted,
-    )
-
-    try {
-      const isSameChain = selectedToken.chainId === selectedDestinationChain?.id
-      const isSameToken = selectedToken.symbol === selectedDestToken.symbol
-      const checksummedRecipient = getAddress(recipient)
-      const checksummedAccount = getAddress(account.address)
-
-      logger.console.log("[trails-sdk] buttonText:", {
-        mode,
-        fundMethod,
-        isSameChain,
-        isSameToken,
-        checksummedRecipient,
-      })
-
-      if (fundMethod === "onramp-mesh") {
-        return `Continue to Exchange`
-      }
-
-      if (fundMethod === "onramp-meld") {
-        return `Continue`
-      }
-
-      if (fundMethod === "direct-transfer") {
-        return `Continue`
-      }
-
-      if (!fundMethod || fundMethod === "wallet") {
-        if (mode === "pay") {
-          return `Pay`
-        } else if (mode === "fund") {
-          return `Fund`
-        } else if (mode === "swap") {
-          return `Swap`
-        } else if (mode === "earn") {
-          return `Deposit`
-        } else if (mode === "withdraw") {
-          return `Withdraw`
-        } else {
-          return `Continue on wallet`
-        }
-      }
-
-      if (mode === "swap") {
-        return `Swap ${amountDisplay} ${tokenSymbol}`
-      }
-
-      if (mode === "earn") {
-        return `Deposit ${destinationAmountDisplay} ${destinationTokenSymbol}`
-      }
-
-      if (tradeType === TradeType.EXACT_INPUT) {
-        return `Fund with ${amountDisplay} ${tokenSymbol}`
-      }
-
-      if (isSameChain && isSameToken) {
-        return `Execute`
-      }
-
-      if (isSameChain && !isSameToken) {
-        return `Swap ${amountDisplay} ${tokenSymbol}`
-      }
-
-      if (checksummedRecipient === checksummedAccount) {
-        return `Receive ${destinationAmountDisplay} ${destinationTokenSymbol}`
-      }
-
-      return `Pay with ${amountDisplay} ${tokenSymbol}`
-    } catch {
-      return `Pay with ${amountDisplay} ${tokenSymbol}`
-    }
-  }, [
-    amount,
-    isValidRecipient,
-    recipient,
-    account?.address,
-    selectedDestToken?.symbol,
-    isWaitingForWalletConfirm,
-    isSubmitting,
-    isLoadingQuote,
-    prepareSendResult,
-    selectedToken,
-    tradeType,
-    prepareSendResult?.quote?.originAmountFormatted,
-    selectedDestinationChain?.id,
-    mode,
-    fundMethod,
-  ])
-
-  return {
-    amount,
-    amountRaw,
-    amountUsdDisplay: amountUsdDisplayFinal,
-    amountUsdLocaleDisplay,
-    balanceUsdDisplay,
-    balanceLocaleDisplay,
-    balanceUsdLocaleDisplay,
-    chainInfo,
-    toChainId,
-    error,
-    balanceFormatted,
-    balanceRaw: tokenWithFreshBalance?.balance ?? "0",
-    tokenDecimals: tokenWithFreshBalance?.decimals ?? 18,
-    handleRecipientInputChange,
-    handleSubmit,
-    isChainDropdownOpen,
-    isSubmitting,
-    isLoadingQuote,
-    isTokenDropdownOpen,
-    recipient,
-    recipientInput,
-    selectedDestinationChain,
-    selectedDestToken,
-    setAmount,
-    setRecipientInput,
-    setSelectedDestinationChain,
-    setSelectedDestToken,
-    setSelectedFeeOption,
-    processedFeeOptions,
-    supportedTokens,
-    supportedChains,
-    ensAddress: ensAddress ?? null,
-    isWaitingForWalletConfirm,
-    buttonText,
-    sendFn, // Expose the send function for onramp flow to commit intent
-    isValidRecipient,
-    destTokenPrices: destTokenPrices ?? null,
-    sourceTokenPrices: sourceTokenPrices ?? null,
-    selectedToken,
-    selectedFeeOption: selectedFeeOption ?? null,
-    setIsChainDropdownOpen,
-    setIsTokenDropdownOpen,
-    toAmountFormatted: quotedDestinationAmount,
-    toAmountDisplay: quotedDestinationAmountDisplay,
-    destinationTokenAddress,
-    isValidCustomToken,
-    prepareSendQuote: prepareSendResult?.quote ?? null,
-    quoteError,
-    quoteErrorPrettified,
-    isRecipientContract: quoteIsRecipientContract ?? false,
-    isSenderContractOnOrigin: quoteIsSenderContractOnOrigin ?? false,
-    isSenderContractOnDestination: quoteIsSenderContractOnDestination ?? false,
-    isLoadingBalance,
-  }
-}