0xtrails 0.13.2 → 0.15.0

package/src/widget/components/ClassicSwap.tsx

@@ -1,1761 +0,0 @@
-import { Loader2, ArrowDown } from "lucide-react"
-import type React from "react"
-import { useCallback, useEffect, useMemo, useRef, useState } from "react"
-import { isWithinCooldown, SECOND_MS } from "../../utils/time.js"
-import { isValidNumber } from "../../utils/validation.js"
-import { openPopup, setPopupUrl, closePopup } from "../utils/windowUtils.js"
-import type { BaseProps, OnrampConfirmCallback } from "../types/commonProps.js"
-import type { Token } from "../../tokens.js"
-import { useSendForm, type OnCompleteProps } from "../hooks/useSendForm.js"
-import { QuoteDetails } from "./QuoteDetails.js"
-import { HighPriceImpactBlock } from "./HighPriceImpactBlock.js"
-import { TradeType } from "../../prepareSend.js"
-import { getChainInfo } from "../../chains.js"
-import { ScreenHeader } from "./ScreenHeader.js"
-import { TokenSelector } from "./TokenSelector.js"
-import { useViewManager } from "../hooks/useViewManager.js"
-import { useSwapState } from "../hooks/useSwapState.js"
-import { logger } from "../../logger.js"
-import { useSelectedRecipient } from "../hooks/useSelectedRecipient.js"
-import { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
-import { useDestinationSelectedToken } from "../hooks/useDestinationSelectedToken.js"
-import { useFiatSelectedCurrency } from "../hooks/useFiatSelectedCurrency.js"
-import { useBalanceVisible } from "../hooks/useBalanceVisible.js"
-import { useDefaultOriginToken } from "../hooks/useDefaultOriginToken.js"
-import { useDefaultDestinationToken } from "../hooks/useDefaultDestinationToken.js"
-import { ChainList } from "./ChainList.js"
-import { PercentageMaxButtons } from "./PercentageMaxButtons.js"
-import { TokenSelectorButton } from "./TokenSelectorButton.js"
-import { FundingMethodSelectorButton } from "./FundingMethodSelectorButton.js"
-import { RecipientSelectorButton } from "./RecipientSelectorButton.js"
-import { FiatSelectorButton } from "./FiatSelectorButton.js"
-import { FiatSelector } from "./FiatSelector.js"
-import { useOnRampCountryDefaults } from "../hooks/useOnRampCountryDefaults.js"
-import { useFiatOnRampCurrencies } from "../hooks/useFiatOnRampCurrencies.js"
-import { useOnRampQuote } from "../hooks/useOnRampQuote.js"
-import { useOnRampProviderWidget } from "../hooks/useOnRampProviderWidget.js"
-import { RefundWarning } from "./RefundWarning.js"
-import { AddressWalletIcon } from "./AddressWalletIcon.js"
-import { AddressOrEnsName } from "./AddressOrEnsName.js"
-import { DynamicSizeInputField } from "./DynamicSizeInputField.js"
-import { FeeOptions } from "./FeeOptions.js"
-import { isFeeOptionDisabled } from "./FeeOption.js"
-import type { ProcessedFeeOption } from "../hooks/useSelectedFeeOption.js"
-import { isPassthroughEligible } from "../../utils/passthrough.js"
-import {
-  formatRawAmount,
-  formatUsdAmountDisplay,
-  formatUsdAmountLocaleDisplay,
-} from "../../utils/format.js"
-import { useAccountTokenBalanceOnchain } from "../../query/balance.hooks.js"
-import { base } from "viem/chains"
-import { MeldProvidersList } from "../../meld/components/MeldProvidersList.js"
-import type { OnrampQuote } from "../hooks/useOnRampQuote.js"
-import { getFullErrorMessage, getPrettifiedErrorMessage } from "../../error.js"
-import { ErrorDisplay } from "./ErrorDisplay.js"
-import { useExchangeRate } from "../../query/fiat.hooks.js"
-import { OnRampProviderSelector } from "./OnRampProviderSelector.js"
-import { trackOnrampWidgetSession } from "../../analytics.js"
-import { USDC_BASE } from "../../constants.js"
-import LoadingSpinner from "./LoadingSpinner.js"
-import { useWidgetProps } from "../hooks/useWidgetProps.js"
-
-import { addressEqual } from "../../utils/address.js"
-interface ClassicSwapProps extends BaseProps {
-  onWaitingForOnrampConfirm?: OnrampConfirmCallback
-  title?: string
-  exactInputOnly?: boolean
-}
-
-export const ClassicSwap: React.FC<ClassicSwapProps> = ({
-  selectedToken: initialSelectedToken,
-  onSend,
-  onBack,
-  onConfirm,
-  onComplete,
-  account,
-  toRecipient,
-  toAmount,
-  toChainId,
-  toToken,
-  toCalldata,
-  walletClient,
-  onTransactionStateChange,
-  onError,
-  onWaitingForWalletConfirm,
-  onWaitingForOnrampConfirm,
-  paymasterUrls,
-  setWalletConfirmRetryHandler,
-  swapProvider,
-  bridgeProvider,
-  swapProviderFallback,
-  bridgeProviderFallback,
-  fundMethod,
-  onAmountUpdate,
-  checkoutOnHandlers,
-  recentTokens,
-  onTrackToken,
-  title = "Swap",
-  isSequenceWallet = false,
-  exactInputOnly = false,
-}) => {
-  const { fundOptions } = useWidgetProps()
-  const { mode, navigate } = useViewManager()
-  const { isBalanceVisible } = useBalanceVisible()
-  const {
-    selectedToken: originToken,
-    setSelectedToken: setOriginToken,
-    hasManualSelection: hasManualOriginSelection,
-    setHasManualSelection: setHasManualOriginSelection,
-  } = useOriginSelectedToken()
-  const {
-    selectedToken: destinationToken,
-    setSelectedToken: setDestinationToken,
-    hasManualSelection: hasManualDestinationSelection,
-    setHasManualSelection: setHasManualDestinationSelection,
-    isControlledByProps: isDestinationControlledByProps,
-  } = useDestinationSelectedToken()
-  const { selectedRecipient, setSelectedRecipient } = useSelectedRecipient()
-  const {
-    selectedCurrency: selectedFiatCurrency,
-    setSelectedCurrency: setSelectedFiatCurrency,
-    hasManualSelection: hasManualFiatSelection,
-    setHasManualSelection: setHasManualFiatSelection,
-    fiatAmount: sellFiatAmount,
-    setFiatAmount: setSellFiatAmount,
-  } = useFiatSelectedCurrency()
-  const [isFlipped, setIsFlipped] = useState(false)
-  const [showFiatSelector, setShowFiatSelector] = useState(false)
-  const [selectedCountryCode, setSelectedCountryCode] = useState<string | null>(
-    null,
-  )
-  const [showProviderSelector, setShowProviderSelector] = useState(false)
-  const [selectedOnrampProvider, setSelectedOnrampProvider] =
-    useState<OnrampQuote | null>(null)
-
-  // Check if onramp is active
-  const isMeldOnRampActive = fundMethod === "onramp-meld"
-
-  // Get country defaults when onramp is active
-  const {
-    countryCode: detectedCountryCode,
-    defaultCurrencyCode,
-    isLoading: isLoadingCountryDefaults,
-  } = useOnRampCountryDefaults({
-    enabled: isMeldOnRampActive,
-  })
-
-  // Use selected country if available, otherwise use detected country
-  const effectiveCountryCode = selectedCountryCode || detectedCountryCode
-
-  // Fetch fiat currencies when onramp is active
-  const { fiatCurrencies, isLoading: isLoadingFiatCurrencies } =
-    useFiatOnRampCurrencies({
-      countryCode: effectiveCountryCode || "US",
-      enabled: isMeldOnRampActive && !!effectiveCountryCode,
-    })
-
-  // Auto-select default currency when onramp is active and currencies are loaded
-  // Only auto-select if user hasn't manually selected a currency
-  useEffect(() => {
-    if (
-      isMeldOnRampActive &&
-      !selectedFiatCurrency &&
-      fiatCurrencies.length > 0 &&
-      !isLoadingCountryDefaults &&
-      !isLoadingFiatCurrencies &&
-      !hasManualFiatSelection
-    ) {
-      // Use detected currency code, or fallback to USD if not detected
-      const currencyCodeToSelect = defaultCurrencyCode || "USD"
-
-      const defaultCurrency = fiatCurrencies.find(
-        (currency) => currency.currencyCode === currencyCodeToSelect,
-      )
-
-      if (defaultCurrency) {
-        logger.console.log(
-          "[ClassicSwap] Auto-selecting default currency:",
-          defaultCurrency,
-          defaultCurrencyCode ? "(detected)" : "(fallback to USD)",
-        )
-        setSelectedFiatCurrency(defaultCurrency)
-      }
-    }
-  }, [
-    isMeldOnRampActive,
-    selectedFiatCurrency,
-    defaultCurrencyCode,
-    fiatCurrencies,
-    isLoadingCountryDefaults,
-    isLoadingFiatCurrencies,
-    hasManualFiatSelection,
-    setSelectedFiatCurrency,
-  ])
-
-  const lastAppliedConfiguredFiatRef = useRef<string | null>(null)
-  useEffect(() => {
-    if (!isMeldOnRampActive) {
-      lastAppliedConfiguredFiatRef.current = null
-    }
-  }, [isMeldOnRampActive])
-
-  useEffect(() => {
-    if (!isMeldOnRampActive || isLoadingFiatCurrencies) return
-    if (fiatCurrencies.length === 0) return
-    const configuredFiatCurrency = fundOptions?.fiatCurrency?.trim() || ""
-    const configuredFiatAmount = fundOptions?.fiatAmount?.trim() || ""
-    const configKey = `${configuredFiatCurrency.toUpperCase()}|${configuredFiatAmount}`
-    if (lastAppliedConfiguredFiatRef.current === configKey) return
-    lastAppliedConfiguredFiatRef.current = configKey
-
-    if (configuredFiatCurrency) {
-      const matchedCurrency = fiatCurrencies.find(
-        (currency) =>
-          currency.currencyCode.toUpperCase() ===
-          configuredFiatCurrency.toUpperCase(),
-      )
-      if (matchedCurrency) {
-        setSelectedFiatCurrency(matchedCurrency)
-        setHasManualFiatSelection(true)
-      }
-    }
-
-    if (configuredFiatAmount) {
-      setSellFiatAmount(configuredFiatAmount)
-    }
-  }, [
-    isMeldOnRampActive,
-    isLoadingFiatCurrencies,
-    fiatCurrencies,
-    fundOptions?.fiatCurrency,
-    fundOptions?.fiatAmount,
-    setSelectedFiatCurrency,
-    setHasManualFiatSelection,
-    setSellFiatAmount,
-  ])
-
-  const normalizedConfiguredFiatCurrency =
-    fundOptions?.fiatCurrency?.trim().toUpperCase() || null
-  const isConfiguredFiatCurrencyApplied =
-    !!normalizedConfiguredFiatCurrency &&
-    !!selectedFiatCurrency &&
-    selectedFiatCurrency.currencyCode.toUpperCase() ===
-      normalizedConfiguredFiatCurrency
-  const isFiatCurrencyLocked =
-    isMeldOnRampActive && isConfiguredFiatCurrencyApplied
-  const isFiatAmountLocked = isMeldOnRampActive && !!fundOptions?.fiatAmount
-
-  // Use a ref to track user actions to prevent race conditions with async state updates
-  const userActionRef = useRef({
-    hasManualDestinationSelection: false,
-    lastOriginSelectionTime: 0,
-    lastDestinationSelectionTime: 0,
-  })
-
-  // Use separated default token selection hooks
-  const { defaultOriginToken, isLoading: isLoadingOriginDefaults } =
-    useDefaultOriginToken()
-
-  const { defaultDestinationToken, isLoading: isLoadingDestinationDefaults } =
-    useDefaultDestinationToken(originToken)
-
-  const [originChainId, setOriginChainId] = useState<number | null | undefined>(
-    initialSelectedToken?.chainId || originToken?.chainId,
-  )
-  const {
-    tradeType: globalTradeType,
-    setTradeType,
-    sellAmount,
-    setSellAmount,
-    buyAmount,
-    setBuyAmount,
-    resetSwapState,
-    enterFormMode,
-  } = useSwapState()
-
-  // Reset swap state only when switching between different form modes
-  // biome-ignore lint/correctness/useExhaustiveDependencies: Only run on mount to register form mode
-  useEffect(() => {
-    enterFormMode("swap")
-  }, [])
-
-  const tradeType = globalTradeType || TradeType.EXACT_INPUT
-  const [isCreatingWidgetSession, setIsCreatingWidgetSession] = useState(false)
-  const [widgetError, setWidgetError] = useState<string | null>(null)
-
-  const handleCompleteAndClearAmounts = useCallback(
-    (result: OnCompleteProps) => {
-      setSellFiatAmount("")
-      resetSwapState()
-      onComplete(result)
-    },
-    [onComplete, resetSwapState, setSellFiatAmount],
-  )
-
-  // Initialize and update selected recipient from toRecipient prop (but don't auto-set to account address)
-  // biome-ignore lint/correctness/useExhaustiveDependencies: selectedRecipient is intentionally excluded to avoid infinite loops
-  useEffect(() => {
-    logger.console.log("[trails-sdk] ClassicSwap toRecipient prop effect:", {
-      toRecipient,
-      selectedRecipient,
-      accountAddress: account?.address,
-    })
-
-    if (toRecipient) {
-      // Always sync with toRecipient prop when it changes
-      logger.console.log(
-        "[trails-sdk] ClassicSwap Setting selectedRecipient to toRecipient:",
-        toRecipient,
-      )
-      setSelectedRecipient(toRecipient)
-    }
-    // Don't auto-set to account.address - let user select via RecipientSelectorButton
-  }, [toRecipient, setSelectedRecipient])
-
-  const effectiveRecipient =
-    selectedRecipient || toRecipient || account?.address
-
-  const effectiveFundMethod = isMeldOnRampActive ? "onramp-meld" : fundMethod
-  const skipBalanceFetch =
-    effectiveFundMethod === "onramp-meld" ||
-    effectiveFundMethod === "direct-transfer" ||
-    effectiveFundMethod === "onramp-mesh"
-
-  // Get onramp quote when onramp is active
-  const {
-    quotes: onrampQuotes,
-    selectedQuote: autoSelectedOnrampQuote,
-    isLoading: isLoadingOnrampQuote,
-    error: onrampQuoteError,
-    onrampTrackingData,
-  } = useOnRampQuote({
-    amount: sellFiatAmount,
-    sourceCurrencyCode: selectedFiatCurrency?.currencyCode,
-    destinationCurrencyCode: "USDC_BASE",
-    countryCode: effectiveCountryCode || undefined,
-    walletAddress: account?.address || "",
-    enabled:
-      isMeldOnRampActive &&
-      !!sellFiatAmount &&
-      !!selectedFiatCurrency &&
-      !!effectiveCountryCode &&
-      !!effectiveRecipient,
-  })
-
-  const {
-    amount,
-    amountRaw,
-    amountUsdDisplay,
-    amountUsdLocaleDisplay,
-    balanceFormatted,
-    balanceRaw,
-    tokenDecimals,
-    handleSubmit,
-    isSubmitting,
-    isLoadingQuote,
-    selectedDestinationChain,
-    selectedDestToken,
-    setSelectedDestinationChain,
-    setSelectedDestToken,
-    buttonText,
-    toAmountDisplay,
-    destinationTokenAddress,
-    isValidCustomToken,
-    prepareSendQuote,
-    quoteError,
-    processedFeeOptions,
-    selectedFeeOption,
-    setSelectedFeeOption,
-    sendFn,
-  } = useSendForm({
-    account,
-    toAmount: tradeType === TradeType.EXACT_OUTPUT ? buyAmount : toAmount,
-    fromAmount: tradeType === TradeType.EXACT_INPUT ? sellAmount : undefined,
-    toRecipient: effectiveRecipient,
-    toChainId,
-    toToken,
-    toCalldata,
-    walletClient,
-    onTransactionStateChange,
-    onError,
-    onWaitingForWalletConfirm,
-    onWaitingForOnrampConfirm,
-    paymasterUrls,
-    onSend,
-    onConfirm,
-    onComplete: handleCompleteAndClearAmounts,
-    selectedToken: originToken ?? undefined,
-    setWalletConfirmRetryHandler,
-    tradeType: tradeType,
-    swapProvider,
-    bridgeProvider,
-    swapProviderFallback,
-    bridgeProviderFallback,
-    fundMethod: effectiveFundMethod,
-    mode,
-    checkoutOnHandlers,
-    onrampTrackingData: isMeldOnRampActive ? onrampTrackingData : null,
-    // Skip fee balance fetching for onramp/direct-transfer modes where fee options aren't shown
-    skipFeeBalanceFetch:
-      effectiveFundMethod === "onramp-meld" ||
-      effectiveFundMethod === "direct-transfer" ||
-      effectiveFundMethod === "onramp-mesh",
-  })
-
-  const selectedOnrampProviderQuote =
-    selectedOnrampProvider || autoSelectedOnrampQuote
-
-  // Get exchange rate for onramp fee conversion to USD
-  const {
-    exchangeRate: fiatToUsdExchangeRate,
-    isLoading: isLoadingFiatToUsdExchangeRate,
-  } = useExchangeRate({
-    fromCurrency: "USD",
-    toCurrency: selectedOnrampProviderQuote?.sourceCurrencyCode || "USD",
-    disabled:
-      !selectedOnrampProviderQuote ||
-      selectedOnrampProviderQuote?.sourceCurrencyCode === "USD",
-  })
-
-  // Hook to create onramp widget session
-  const {
-    createWidgetSession,
-    isLoading: isLoadingWidgetSession,
-    error: widgetSessionError,
-  } = useOnRampProviderWidget()
-
-  // If we are on ramping lock the origin token and origin chain to USDC BASE
-  // Also ensure tradeType is EXACT_INPUT (disable exact output mode)
-  useEffect(() => {
-    if (isMeldOnRampActive) {
-      // Find USDC on Base from supported tokens (correct Base USDC address)
-      const usdcBaseToken = USDC_BASE
-      logger.console.log(
-        "[ClassicSwap] Setting origin token to USDC on Base:",
-        usdcBaseToken,
-      )
-      setOriginToken(usdcBaseToken)
-      setOriginChainId(base.id)
-
-      // Ensure tradeType is EXACT_INPUT when onramp is active
-      setTradeType(TradeType.EXACT_INPUT)
-    }
-  }, [isMeldOnRampActive, setOriginToken, setTradeType])
-
-  // Get destination token with fresh balance
-  const { token: freshDestinationToken } = useAccountTokenBalanceOnchain(
-    destinationToken,
-    account?.address,
-    { disabled: skipBalanceFetch },
-  )
-
-  // Get origin token with fresh balance for fee option checks
-  const {
-    token: freshOriginToken,
-    isLoadingBalance: isLoadingFreshOriginBalance,
-  } = useAccountTokenBalanceOnchain(originToken, account?.address, {
-    disabled: skipBalanceFetch,
-  })
-
-  const destinationBalanceDisplay = useMemo(() => {
-    if (!freshDestinationToken) return "0.00"
-    try {
-      return formatRawAmount(
-        freshDestinationToken.balance || "0",
-        freshDestinationToken.decimals ?? 18,
-      )
-    } catch (err) {
-      logger.console.error("[trails-sdk] balance format failed", err)
-      return "0.00"
-    }
-  }, [freshDestinationToken])
-
-  const handleSellFiatAmountChange = useCallback(
-    (value: string) => {
-      setWidgetError(null)
-      setSellFiatAmount(value)
-    },
-    [setSellFiatAmount],
-  )
-
-  // Handle sell amount input changes
-  const handleSellAmountChange = useCallback(
-    (value: string) => {
-      // Strip leading zeros unless it's a decimal (e.g., "0.5" is valid, "05" becomes "5")
-      let processedValue = value
-      if (value.length > 1 && value.startsWith("0") && value[1] !== ".") {
-        processedValue = value.replace(/^0+/, "") || "0"
-      }
-      setTradeType(TradeType.EXACT_INPUT)
-      setSellAmount(processedValue)
-    },
-    [setTradeType, setSellAmount],
-  )
-
-  // Handle sell input focus
-  const handleSellInputFocus = useCallback(() => {
-    // Copy displayed value for editing
-    if (
-      tradeType === TradeType.EXACT_OUTPUT &&
-      prepareSendQuote?.originAmountDisplay &&
-      !sellAmount
-    ) {
-      setSellAmount(prepareSendQuote.originAmountDisplay)
-    }
-  }, [
-    tradeType,
-    prepareSendQuote?.originAmountDisplay,
-    sellAmount,
-    setSellAmount,
-  ])
-
-  // Handle buy amount input changes
-  const handleBuyAmountChange = useCallback(
-    (value: string) => {
-      // Disable exact output mode when onramp is active or exactInputOnly is enabled
-      if (isMeldOnRampActive || exactInputOnly) {
-        return
-      }
-
-      // Strip leading zeros unless it's a decimal (e.g., "0.5" is valid, "05" becomes "5")
-      let processedValue = value
-      if (value.length > 1 && value.startsWith("0") && value[1] !== ".") {
-        processedValue = value.replace(/^0+/, "") || "0"
-      }
-      setTradeType(TradeType.EXACT_OUTPUT)
-      setBuyAmount(processedValue)
-    },
-    [isMeldOnRampActive, exactInputOnly, setTradeType, setBuyAmount],
-  )
-
-  // Handle buy input focus
-  const handleBuyInputFocus = useCallback(() => {
-    // Disable exact output mode when onramp is active or exactInputOnly is enabled
-    if (isMeldOnRampActive || exactInputOnly) {
-      return
-    }
-
-    // Copy displayed value for editing
-    if (tradeType === TradeType.EXACT_INPUT && toAmountDisplay && !buyAmount) {
-      setBuyAmount(toAmountDisplay)
-    }
-  }, [
-    tradeType,
-    toAmountDisplay,
-    buyAmount,
-    isMeldOnRampActive,
-    exactInputOnly,
-    setBuyAmount,
-  ])
-
-  // Check if we received a quote from on ramp for USDC BASE, if so set the origin token amount to the quote.destinationAmount
-  // This will trigger useSendForm to get the trails quote
-  // Subtract 0.25 USDC from the amount to cover fees
-  useEffect(() => {
-    if (
-      isMeldOnRampActive &&
-      selectedOnrampProviderQuote &&
-      originToken &&
-      originToken.contractAddress
-    ) {
-      // Subtract 0.25 USDC from the destination amount to cover fees
-      const destinationAmount = Number(
-        selectedOnrampProviderQuote.destinationAmount,
-      )
-      const adjustedAmount = Math.max(0, destinationAmount - 0.25)
-
-      logger.console.log("[trails-sdk] Adjusting onramp amount for fees:", {
-        originalAmount: destinationAmount,
-        adjustedAmount,
-        feeSubtracted: 0.25,
-      })
-
-      setSellAmount(adjustedAmount.toString())
-      setTradeType(TradeType.EXACT_INPUT)
-    }
-  }, [
-    isMeldOnRampActive,
-    selectedOnrampProviderQuote,
-    originToken,
-    setSellAmount,
-    setTradeType,
-  ])
-
-  // Update amounts when quote is received
-  // Always update the calculated field based on the current trade type
-  useEffect(() => {
-    if (!prepareSendQuote) return
-
-    if (
-      tradeType === TradeType.EXACT_OUTPUT &&
-      prepareSendQuote.originAmountDisplay
-    ) {
-      // In EXACT_OUTPUT mode, update sellAmount from the quote
-      setSellAmount(prepareSendQuote.originAmountDisplay)
-    } else if (
-      tradeType === TradeType.EXACT_INPUT &&
-      prepareSendQuote.destinationAmountDisplay
-    ) {
-      // In EXACT_INPUT mode, update buyAmount from the quote
-      setBuyAmount(prepareSendQuote.destinationAmountDisplay)
-    }
-  }, [prepareSendQuote, tradeType, setSellAmount, setBuyAmount])
-
-  // Call onAmountUpdate when amountRaw changes
-  useEffect(() => {
-    if (onAmountUpdate) {
-      onAmountUpdate(amountRaw)
-    }
-  }, [amountRaw, onAmountUpdate])
-
-  // Reset the flag so auto-selection can work as a fallback if has manual origin token is cleared
-  useEffect(() => {
-    if (hasManualOriginSelection && !originToken && !isLoadingOriginDefaults) {
-      logger.console.log(
-        "[trails-sdk] Resetting hasManualOriginSelection - token was cleared",
-      )
-      setHasManualOriginSelection(false)
-    }
-  }, [
-    hasManualOriginSelection,
-    originToken,
-    isLoadingOriginDefaults,
-    setHasManualOriginSelection,
-  ])
-
-  // Auto-select origin token using separated hook
-  useEffect(() => {
-    if (
-      !originToken &&
-      !isLoadingOriginDefaults &&
-      defaultOriginToken &&
-      !hasManualOriginSelection
-    ) {
-      logger.console.log(
-        "[trails-sdk] Auto-selecting origin token:",
-        defaultOriginToken,
-      )
-      setOriginToken(defaultOriginToken)
-      setOriginChainId(defaultOriginToken.chainId)
-    }
-  }, [
-    originToken,
-    isLoadingOriginDefaults,
-    defaultOriginToken,
-    setOriginToken,
-    hasManualOriginSelection,
-  ])
-
-  // Auto-select destination token using separated hook
-  // Note: In swap mode, we still auto-select a destination even if toToken is provided,
-  // since the user needs a starting point to modify
-  // IMPORTANT: Only auto-select if user hasn't made manual selections to prevent override
-  useEffect(() => {
-    // hasManualOriginSelection is now persisted in context across component mounts
-    const hasRecentOriginSelection =
-      hasManualOriginSelection ||
-      isWithinCooldown(userActionRef.current.lastOriginSelectionTime, SECOND_MS)
-
-    const hasRecentDestSelection =
-      userActionRef.current.hasManualDestinationSelection ||
-      hasManualDestinationSelection ||
-      isWithinCooldown(
-        userActionRef.current.lastDestinationSelectionTime,
-        SECOND_MS,
-      )
-
-    // If destination is controlled via props, do not auto-select/override it.
-    const isDestinationControlled = !!toToken && !!toChainId
-
-    if (
-      !isDestinationControlled &&
-      !destinationToken &&
-      !isLoadingDestinationDefaults &&
-      defaultDestinationToken &&
-      !hasRecentDestSelection &&
-      !hasRecentOriginSelection // Don't auto-select destination if user recently selected origin
-    ) {
-      logger.console.log(
-        "[trails-sdk] Auto-selecting destination token:",
-        defaultDestinationToken,
-      )
-      setDestinationToken(defaultDestinationToken)
-      setSelectedDestToken(defaultDestinationToken)
-
-      // Also set the destination chain
-      const chainInfo = getChainInfo(defaultDestinationToken.chainId)
-      if (chainInfo) {
-        setSelectedDestinationChain(chainInfo)
-      }
-    }
-  }, [
-    destinationToken,
-    isLoadingDestinationDefaults,
-    defaultDestinationToken,
-    hasManualDestinationSelection,
-    hasManualOriginSelection,
-    setDestinationToken,
-    setSelectedDestToken,
-    setSelectedDestinationChain,
-    toToken,
-    toChainId,
-  ])
-
-  // Auto-focus the input field when component mounts
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus()
-    }
-  }, [])
-
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  const [showSourceTokenSelector, setShowSourceTokenSelector] = useState(false)
-  const [showDestinationTokenSelector, setShowDestinationTokenSelector] =
-    useState(false)
-  const [showSourceChainList, setShowSourceChainList] = useState(false)
-  const [showDestinationChainList, setShowDestinationChainList] =
-    useState(false)
-
-  // Sync destination token from hook with useSendForm
-  // This ensures the destination token auto-selection flows into useSendForm
-  useEffect(() => {
-    // If destination is controlled via props, don't sync context destination into useSendForm.
-    if (toToken && toChainId) return
-    if (destinationToken) {
-      logger.console.log(
-        "[trails-sdk] Syncing destination token to useSendForm:",
-        destinationToken,
-      )
-      setSelectedDestToken(destinationToken)
-    }
-  }, [destinationToken, setSelectedDestToken, toToken, toChainId])
-
-  // Sync resolved token from useSendForm back to global provider
-  // This handles the case where toToken is not in supported tokens and useSendForm resolves it
-  useEffect(() => {
-    // Skip if not controlled by props or no resolved token
-    if (!isDestinationControlledByProps || !selectedDestToken || !toToken) {
-      return
-    }
-
-    // Check if the resolved token matches what we're looking for
-    const chainIdMatches = selectedDestToken.chainId === Number(toChainId)
-    const tokenMatches =
-      selectedDestToken.contractAddress?.toLowerCase() ===
-        toToken.toLowerCase() ||
-      selectedDestToken.symbol?.toLowerCase() === toToken.toLowerCase()
-
-    // Only sync if the token matches the toToken prop
-    if (chainIdMatches && tokenMatches) {
-      const globalMatches =
-        destinationToken &&
-        destinationToken.chainId === selectedDestToken.chainId &&
-        destinationToken.contractAddress?.toLowerCase() ===
-          selectedDestToken.contractAddress?.toLowerCase()
-
-      if (!globalMatches) {
-        logger.console.log(
-          "[trails-sdk] ClassicSwap: Syncing resolved token from useSendForm to global provider:",
-          selectedDestToken.symbol,
-        )
-        setDestinationToken(selectedDestToken)
-      }
-    }
-  }, [
-    isDestinationControlledByProps,
-    selectedDestToken,
-    destinationToken,
-    setDestinationToken,
-    toToken,
-    toChainId,
-  ])
-
-  // Handle flip functionality
-  const handleFlip = useCallback(() => {
-    if (!selectedDestinationChain || !originToken || !selectedDestToken) return
-
-    // Don't flip if recipient is not the sender/from address
-    if (
-      effectiveRecipient &&
-      account?.address &&
-      !addressEqual(effectiveRecipient, account.address)
-    ) {
-      return
-    }
-
-    setIsFlipped(!isFlipped)
-
-    // Store current values
-    const tempOriginToken = originToken
-    const tempOriginChainId = originChainId
-    const tempBuyAmount = buyAmount || toAmountDisplay || ""
-    const tempSellAmount = sellAmount || amount || ""
-
-    // Swap origin and destination using hooks
-    setOriginToken(selectedDestToken)
-    setDestinationToken(tempOriginToken)
-    setOriginChainId(selectedDestToken?.chainId)
-    setSelectedDestToken(tempOriginToken)
-
-    // Update destination chain
-    const newChain = getChainInfo(tempOriginChainId ?? undefined)
-    if (newChain) {
-      setSelectedDestinationChain(newChain)
-    }
-
-    // Flipping is an intentional user action, so maintain manual selection state
-    // Both tokens are still manually selected, just swapped
-    if (hasManualOriginSelection || hasManualDestinationSelection) {
-      setHasManualOriginSelection(true)
-      setHasManualDestinationSelection(true)
-    }
-
-    if (exactInputOnly) {
-      // When exactInputOnly is enabled, always maintain EXACT_INPUT mode
-      // Move the sell amount to the new origin (what was destination)
-      setSellAmount(tempSellAmount)
-      setBuyAmount("") // Clear buy amount to get fresh quote
-      setTradeType(TradeType.EXACT_INPUT)
-    } else {
-      // Normal flip behavior - switch trade types
-      if (tradeType === TradeType.EXACT_INPUT) {
-        // Move the user-entered sell amount into the buy field and treat it as exact output
-        setBuyAmount(tempSellAmount)
-        setSellAmount("")
-        setTradeType(TradeType.EXACT_OUTPUT)
-      } else {
-        // If we were in EXACT_OUTPUT, use the current buy amount as the new sell amount
-        setSellAmount(tempBuyAmount)
-        setBuyAmount("")
-        setTradeType(TradeType.EXACT_INPUT)
-      }
-    }
-  }, [
-    originToken,
-    selectedDestinationChain,
-    selectedDestToken,
-    originChainId,
-    setOriginToken,
-    setDestinationToken,
-    setSelectedDestToken,
-    setSelectedDestinationChain,
-    isFlipped,
-    hasManualOriginSelection,
-    hasManualDestinationSelection,
-    setHasManualOriginSelection,
-    setHasManualDestinationSelection,
-    exactInputOnly,
-    tradeType,
-    toAmountDisplay,
-    sellAmount,
-    buyAmount,
-    amount,
-    setSellAmount,
-    setBuyAmount,
-    setTradeType,
-    effectiveRecipient,
-    account?.address,
-  ])
-
-  // Handle source token selection from full-screen selector
-  const handleSourceTokenSelectorSelect = useCallback(
-    (token: Token) => {
-      // Only flip if it's the exact same token (same contract address AND chain ID)
-      if (
-        token.contractAddress === destinationToken?.contractAddress &&
-        token.chainId === destinationToken?.chainId
-      ) {
-        handleFlip()
-      }
-
-      // Only reset input fields if the token symbol is different
-      const isDifferentToken =
-        !originToken || originToken.symbol !== token.symbol
-      if (isDifferentToken) {
-        setSellAmount("")
-        setBuyAmount("")
-        setTradeType(TradeType.EXACT_INPUT)
-      }
-
-      setOriginToken(token)
-      setOriginChainId(token.chainId)
-      setShowSourceTokenSelector(false)
-
-      // Mark as manual selection to prevent auto-selection override
-      setHasManualOriginSelection(true)
-      userActionRef.current.lastOriginSelectionTime = Date.now()
-
-      onTrackToken?.(token)
-      logger.console.log("[trails-sdk] selected origin token", token)
-    },
-    [
-      setOriginToken,
-      setHasManualOriginSelection,
-      onTrackToken,
-      originToken,
-      handleFlip,
-      destinationToken,
-      setSellAmount,
-      setBuyAmount,
-      setTradeType,
-    ],
-  )
-
-  // Handle destination token selection from full-screen selector
-  const handleDestinationTokenSelectorSelect = useCallback(
-    (token: Token) => {
-      // Only flip if it's the exact same token (same contract address AND chain ID)
-      if (
-        token.contractAddress === originToken?.contractAddress &&
-        token.chainId === originToken?.chainId
-      ) {
-        handleFlip()
-      }
-
-      setDestinationToken(token)
-      setSelectedDestToken(token)
-
-      // Update destination chain
-      const chainInfo = getChainInfo(token.chainId)
-      if (chainInfo) {
-        setSelectedDestinationChain(chainInfo)
-      }
-
-      setShowDestinationTokenSelector(false)
-
-      // Mark as manual selection to prevent auto-selection override
-      setHasManualDestinationSelection(true)
-      userActionRef.current.hasManualDestinationSelection = true
-      userActionRef.current.lastDestinationSelectionTime = Date.now()
-
-      onTrackToken?.(token)
-      logger.console.log("[trails-sdk] selected destination token", token)
-    },
-    [
-      setDestinationToken,
-      setSelectedDestToken,
-      setSelectedDestinationChain,
-      setHasManualDestinationSelection,
-      onTrackToken,
-      originToken,
-      handleFlip,
-    ],
-  )
-
-  // Handle recent token selection
-  const handleRecentTokenSelect = useCallback(
-    (token: Token) => {
-      // Only flip if it's the exact same token (same contract address AND chain ID)
-      if (
-        token.contractAddress === originToken?.contractAddress &&
-        token.chainId === originToken?.chainId
-      ) {
-        handleFlip()
-      }
-
-      if (showSourceTokenSelector) {
-        handleSourceTokenSelectorSelect(token)
-      } else if (showDestinationTokenSelector) {
-        handleDestinationTokenSelectorSelect(token)
-      }
-    },
-    [
-      showSourceTokenSelector,
-      showDestinationTokenSelector,
-      handleSourceTokenSelectorSelect,
-      handleDestinationTokenSelectorSelect,
-      originToken?.contractAddress,
-      originToken?.chainId,
-      handleFlip,
-    ],
-  )
-
-  // Show provider selector screen
-  if (showProviderSelector) {
-    return (
-      <MeldProvidersList
-        onBack={() => setShowProviderSelector(false)}
-        onSelectProvider={(provider) => {
-          setSelectedOnrampProvider(provider as OnrampQuote)
-          setShowProviderSelector(false)
-        }}
-        selectedProvider={selectedOnrampProviderQuote}
-        providers={onrampQuotes}
-        isLoading={isLoadingOnrampQuote}
-      />
-    )
-  }
-
-  // Show fiat selector screen
-  if (showFiatSelector) {
-    return (
-      <div className="space-y-2">
-        <ScreenHeader
-          onBack={() => setShowFiatSelector(false)}
-          headerContent="Select Currency"
-          headerContentAlign="left"
-        />
-        <FiatSelector
-          onCurrencySelect={(currency) => {
-            setSelectedFiatCurrency(currency)
-            setShowFiatSelector(false)
-            setHasManualFiatSelection(true)
-          }}
-          onAutoSelect={(currency) => {
-            // Auto-select doesn't close the selector, just sets the currency
-            setSelectedFiatCurrency(currency)
-          }}
-          onSelectCountry={(countryCode) => {
-            setSelectedCountryCode(countryCode)
-          }}
-          onError={onError}
-          selectedCurrency={selectedFiatCurrency}
-        />
-      </div>
-    )
-  }
-
-  // Show source chain list screen
-  if (showSourceChainList) {
-    return (
-      <ChainList
-        onBack={() => {
-          setShowSourceChainList(false)
-          setShowSourceTokenSelector(true)
-        }}
-      />
-    )
-  }
-
-  // Show source token selector screen
-  if (showSourceTokenSelector) {
-    return (
-      <div className="space-y-2">
-        <ScreenHeader
-          onBack={() => setShowSourceTokenSelector(false)}
-          headerContent="Select From Token"
-          headerContentAlign="left"
-        />
-        <TokenSelector
-          onTokenSelect={handleSourceTokenSelectorSelect}
-          onError={onError}
-          showContinueButton={false}
-          compactMode={false}
-          allSupportedTokens={false}
-          fundMethod={fundMethod}
-          chainListScreen={true}
-          onNavigateToChainList={() => {
-            setShowSourceTokenSelector(false)
-            setShowSourceChainList(true)
-          }}
-          recentTokens={recentTokens}
-          onRecentTokenSelect={handleRecentTokenSelect}
-        />
-      </div>
-    )
-  }
-
-  // Show destination chain list screen
-  if (showDestinationChainList) {
-    return (
-      <ChainList
-        onBack={() => {
-          setShowDestinationChainList(false)
-          setShowDestinationTokenSelector(true)
-        }}
-      />
-    )
-  }
-
-  // Show destination token selector screen
-  if (showDestinationTokenSelector) {
-    return (
-      <div className="space-y-2">
-        <ScreenHeader
-          onBack={() => setShowDestinationTokenSelector(false)}
-          headerContent="Select To Token"
-          headerContentAlign="left"
-        />
-        <TokenSelector
-          onTokenSelect={handleDestinationTokenSelectorSelect}
-          onError={onError}
-          showContinueButton={false}
-          compactMode={false}
-          allSupportedTokens={true}
-          fundMethod={fundMethod}
-          chainListScreen={true}
-          onNavigateToChainList={() => {
-            setShowDestinationTokenSelector(false)
-            setShowDestinationChainList(true)
-          }}
-          recentTokens={recentTokens}
-          onRecentTokenSelect={handleRecentTokenSelect}
-        />
-      </div>
-    )
-  }
-
-  return (
-    <div className="space-y-2">
-      <ScreenHeader
-        onBack={
-          mode === "fund"
-            ? () => navigate("fund-form")
-            : mode === "earn"
-              ? () => navigate("earn")
-              : mode === "pay"
-                ? () => navigate("send-form")
-                : mode === "withdraw"
-                  ? () => navigate("withdraw")
-                  : onBack
-        }
-        headerContent={title}
-        headerContentAlign="left"
-        showAccountActions={true}
-      />
-
-      <form
-        onSubmit={async (e) => {
-          e.preventDefault()
-
-          logger.console.log(
-            "[trails-sdk] Creating widget session",
-            isMeldOnRampActive,
-          )
-          // Handle onramp flow separately
-          if (
-            isMeldOnRampActive &&
-            selectedOnrampProviderQuote &&
-            selectedFiatCurrency
-          ) {
-            const {
-              popup,
-              blocked,
-              error: popupError,
-            } = openPopup("meld-widget", 450, 700)
-
-            if (blocked) {
-              setWidgetError(
-                popupError ||
-                  "Popup blocked. Please allow popups for this site.",
-              )
-              onError(popupError || "Popup blocked")
-              return
-            }
-
-            try {
-              setIsCreatingWidgetSession(true)
-              setWidgetError(null)
-
-              logger.console.log(
-                "[trails-sdk] prepareSendQuote",
-                prepareSendQuote,
-              )
-
-              // Commit the intent immediately when user clicks continue
-              // Call sendFn to trigger the commit without deposit
-              if (sendFn) {
-                logger.console.log(
-                  "[trails-sdk] Committing intent for onramp-meld flow",
-                )
-
-                try {
-                  // Call sendFn without depositTransactionHash to just commit
-                  // The crossChain handler will commit but not execute/wait for deposit
-                  await sendFn({
-                    selectedFeeOption: selectedFeeOption ?? null,
-                  })
-
-                  logger.console.log(
-                    "[trails-sdk] Intent committed for onramp-meld",
-                  )
-                } catch (error) {
-                  logger.console.error(
-                    "[trails-sdk] Failed to commit intent:",
-                    error,
-                  )
-                  // Continue anyway
-                }
-              }
-
-              // Create widget session
-              const widgetSessionResponse = await createWidgetSession({
-                depositAddress: prepareSendQuote?.originDepositAddress || "",
-                userAddress: account?.address || "",
-                countryCode: effectiveCountryCode || "",
-                sourceCurrencyCode: selectedFiatCurrency.currencyCode,
-                sourceAmount: sellFiatAmount,
-                destinationCurrencyCode: "USDC_BASE",
-                serviceProvider: selectedOnrampProviderQuote.serviceProvider,
-                paymentMethodType:
-                  selectedOnrampProviderQuote.paymentMethodType,
-                lockFields: [
-                  "cryptoCurrency",
-                  "destinationCurrencyCode",
-                  "sourceCurrencyCode",
-                  "walletAddress",
-                ],
-              })
-
-              logger.console.log(
-                "[ClassicSwap] Widget session response:",
-                widgetSessionResponse,
-              )
-              const { widgetUrl, id, externalSessionId } = widgetSessionResponse
-
-              // Track widget session
-              trackOnrampWidgetSession({
-                sessionId: onrampTrackingData?.sessionId || externalSessionId,
-                provider:
-                  selectedOnrampProviderQuote?.serviceProvider || "Meld",
-                widgetUrl,
-                depositAddress: prepareSendQuote?.originDepositAddress || "",
-                userAddress: account?.address?.toLowerCase() || "",
-                countryCode: effectiveCountryCode || "",
-                sourceCurrencyCode: selectedFiatCurrency?.currencyCode || "",
-                sourceAmount: sellFiatAmount,
-                destinationCurrencyCode: "USDC_BASE",
-                paymentMethodType:
-                  selectedOnrampProviderQuote?.paymentMethodType || "",
-              })
-
-              if (!setPopupUrl(popup, widgetUrl)) {
-                throw new Error("Payment window was closed. Please try again.")
-              }
-
-              logger.console.log(
-                "[ClassicSwap] Opened onramp widget in popup",
-                { widgetUrl, meldTransactionId: id },
-              )
-
-              if (onWaitingForOnrampConfirm && prepareSendQuote) {
-                // Pass both quote and widget creation parameters
-                logger.console.log(
-                  "[ClassicSwap] Calling onWaitingForOnrampConfirm with externalSessionId:",
-                  externalSessionId,
-                )
-                onWaitingForOnrampConfirm(
-                  prepareSendQuote,
-                  selectedOnrampProviderQuote,
-                  {
-                    depositAddress:
-                      prepareSendQuote?.originDepositAddress || "",
-                    userAddress: account?.address?.toLowerCase() || "",
-                    countryCode: effectiveCountryCode || "",
-                    sourceCurrencyCode: selectedFiatCurrency.currencyCode,
-                    sourceAmount: sellFiatAmount,
-                    destinationCurrencyCode: "USDC_BASE",
-                    serviceProvider:
-                      selectedOnrampProviderQuote.serviceProvider,
-                    paymentMethodType:
-                      selectedOnrampProviderQuote.paymentMethodType,
-                  },
-                  externalSessionId,
-                  popup,
-                )
-              }
-
-              await handleSubmit(e)
-            } catch (err) {
-              closePopup(popup)
-              logger.console.error(
-                "[ClassicSwap] Error creating widget session",
-                err,
-              )
-              const errorMessage =
-                err instanceof Error
-                  ? err.message
-                  : "Failed to create widget session"
-              setWidgetError(errorMessage)
-              onError(errorMessage)
-            } finally {
-              setIsCreatingWidgetSession(false)
-            }
-            return
-          }
-
-          logger.console.log(
-            "[trails-sdk] Calling handleSubmit from ClassicSwap",
-          )
-          handleSubmit(e)
-        }}
-        className="space-y-1"
-      >
-        {/* Input Section - Amount + Token Selection */}
-        <div className="pt-4 pb-4 trails-bg-secondary trails-bg-secondary-hover trails-border-radius-container p-3 group transition-all duration-200 border border-transparent focus-within:bg-white! dark:focus-within:bg-gray-800! trails-focus-border-secondary min-h-[120px] flex flex-col">
-          {/* Sell Label */}
-          <div className="mb-4 flex justify-between items-center">
-            <div className="text-sm font-medium trails-text-secondary text-left m-0">
-              {mode === "fund" ? "Payment method" : "Sell"}
-            </div>
-            <FundingMethodSelectorButton />
-          </div>
-
-          <div className="flex items-center space-x-2 flex-1">
-            {/* Amount Input */}
-            <div className="flex-1">
-              <div className="flex items-center space-x-2">
-                <DynamicSizeInputField
-                  ref={inputRef}
-                  value={isMeldOnRampActive ? sellFiatAmount : sellAmount}
-                  disabled={isFiatAmountLocked}
-                  onChange={(e) => {
-                    if (isMeldOnRampActive) {
-                      // Always update fiat amount in onramp mode - the UI shows fiat
-                      handleSellFiatAmountChange(e.target.value)
-                    } else {
-                      handleSellAmountChange(e.target.value)
-                    }
-                  }}
-                  onFocus={handleSellInputFocus}
-                  isLoading={
-                    isLoadingQuote && tradeType === TradeType.EXACT_OUTPUT
-                  }
-                  variant="default"
-                />
-                {isLoadingQuote && tradeType === TradeType.EXACT_OUTPUT && (
-                  <LoadingSpinner />
-                )}
-              </div>
-            </div>
-
-            {/* Token/Fiat Selection Button */}
-            <div className="relative">
-              {isMeldOnRampActive ? (
-                <FiatSelectorButton
-                  currency={selectedFiatCurrency}
-                  onSelect={() => setShowFiatSelector(true)}
-                  unselectable={isFiatCurrencyLocked}
-                />
-              ) : (
-                <TokenSelectorButton
-                  token={originToken}
-                  chainId={originChainId}
-                  onSelect={() => setShowSourceTokenSelector(true)}
-                />
-              )}
-            </div>
-          </div>
-
-          {/* Bottom Info Row for sell */}
-          <div className="mt-4 flex justify-between items-center">
-            {isMeldOnRampActive &&
-            selectedOnrampProviderQuote &&
-            fiatToUsdExchangeRate &&
-            selectedOnrampProviderQuote &&
-            !isLoadingFiatToUsdExchangeRate ? (
-              (() => {
-                const usdAmount =
-                  selectedOnrampProviderQuote.sourceCurrencyCode === "USD"
-                    ? selectedOnrampProviderQuote.sourceAmount
-                    : selectedOnrampProviderQuote.sourceAmount /
-                      fiatToUsdExchangeRate
-
-                const displayValue = formatUsdAmountDisplay(usdAmount || 0)
-                const localeValue = formatUsdAmountLocaleDisplay(usdAmount || 0)
-
-                return (
-                  <div
-                    className="text-xs text-gray-500 dark:text-gray-400"
-                    title={displayValue}
-                  >
-                    <span className="notranslate" translate="no">
-                      ≈ {localeValue}
-                    </span>
-                  </div>
-                )
-              })()
-            ) : (
-              <div className="text-xs text-gray-500 dark:text-gray-400">
-                <span className="notranslate" translate="no">
-                  ≈{" "}
-                  {tradeType === TradeType.EXACT_INPUT
-                    ? prepareSendQuote?.originAmountUsdLocaleDisplay ||
-                      amountUsdLocaleDisplay ||
-                      amountUsdDisplay ||
-                      formatUsdAmountLocaleDisplay(0)
-                    : isLoadingQuote
-                      ? ""
-                      : prepareSendQuote?.originAmountUsdLocaleDisplay ||
-                        prepareSendQuote?.originAmountUsdDisplay ||
-                        ""}
-                </span>
-              </div>
-            )}
-
-            {/* Origin Token Balance and Percentage Buttons */}
-            {originToken &&
-              !isMeldOnRampActive &&
-              fundMethod !== "direct-transfer" &&
-              fundMethod !== "onramp-mesh" && (
-                <div className="flex items-center space-x-2">
-                  <div className="flex items-center space-x-1">
-                    <span
-                      className="text-xs text-gray-500 dark:text-gray-400 notranslate"
-                      translate="no"
-                    >
-                      Balance:
-                    </span>
-                    <button
-                      type="button"
-                      className="text-xs text-gray-500 dark:text-gray-400 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 transition-colors bg-transparent border-none p-0"
-                      onClick={() => {
-                        if (balanceFormatted) {
-                          const balance = parseFloat(balanceFormatted)
-                          if (isValidNumber(balance)) {
-                            setTradeType(TradeType.EXACT_INPUT)
-                            setSellAmount(balance.toFixed(6))
-                            setBuyAmount("")
-                          }
-                        }
-                      }}
-                      onKeyDown={(e) => {
-                        if (e.key === "Enter" || e.key === " ") {
-                          e.preventDefault()
-                          if (balanceFormatted) {
-                            const balance = parseFloat(balanceFormatted)
-                            if (isValidNumber(balance)) {
-                              setTradeType(TradeType.EXACT_INPUT)
-                              setSellAmount(balance.toFixed(6))
-                              setBuyAmount("")
-                            }
-                          }
-                        }
-                      }}
-                      title="Click to use full balance"
-                      disabled={!balanceFormatted}
-                    >
-                      <span className="notranslate" translate="no">
-                        {isBalanceVisible
-                          ? freshOriginToken?.balanceLocaleDisplay ||
-                            originToken?.balanceLocaleDisplay ||
-                            freshOriginToken?.balanceDisplay ||
-                            originToken?.balanceDisplay ||
-                            balanceFormatted ||
-                            "0.00"
-                          : "••••••"}
-                      </span>
-                    </button>
-                  </div>
-
-                  {/* Percentage Buttons */}
-                  {balanceFormatted && (
-                    <PercentageMaxButtons
-                      userBalance={balanceFormatted}
-                      userBalanceRaw={balanceRaw}
-                      decimals={tokenDecimals}
-                      isNativeToken={originToken.isNativeToken ?? false}
-                      gasCostFormatted={prepareSendQuote?.gasCostFormatted}
-                      chainId={originChainId || undefined}
-                      onAmountSelect={(amount) => {
-                        setTradeType(TradeType.EXACT_INPUT)
-                        setSellAmount(amount)
-                        setBuyAmount("")
-                      }}
-                      className="opacity-100"
-                    />
-                  )}
-                </div>
-              )}
-          </div>
-        </div>
-
-        {/* Flip Button - Absolutely Positioned */}
-        <div className="relative">
-          <button
-            type="button"
-            onClick={handleFlip}
-            disabled={
-              !!(
-                effectiveRecipient &&
-                account?.address &&
-                !addressEqual(effectiveRecipient, account.address)
-              )
-            }
-            className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 p-1.5 trails-border-radius-button trails-bg-tertiary hover:trails-hover-bg transition-colors cursor-pointer border-2 border-white dark:border-gray-800 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:trails-bg-tertiary"
-          >
-            <ArrowDown
-              className="w-5 h-5 text-gray-900 dark:text-white"
-              strokeWidth={2.5}
-            />
-          </button>
-        </div>
-
-        {/* Output Section - Amount + Token Selection */}
-        <div className="pt-4 pb-4 trails-bg-secondary trails-bg-secondary-hover trails-border-radius-container p-3 transition-all duration-200 border border-transparent focus-within:bg-white! dark:focus-within:bg-gray-800! trails-focus-border-secondary min-h-[120px] flex flex-col mb-4">
-          {/* Buy Label */}
-          <div className="mb-4 flex justify-between items-center mb-2">
-            <div className="text-sm font-medium trails-text-secondary text-left m-0">
-              {mode === "fund" ? "Recipient" : "Buy"}
-            </div>
-            {toRecipient ? (
-              /* Display only - recipient is fixed when toRecipient prop is provided */
-              <div className="flex items-center space-x-2 text-black dark:text-white">
-                <AddressWalletIcon
-                  walletAddress={toRecipient as `0x${string}`}
-                />
-                <AddressOrEnsName
-                  address={toRecipient}
-                  startChars={4}
-                  endChars={4}
-                  className="text-sm font-medium"
-                />
-              </div>
-            ) : (
-              /* Interactive button - user can select recipient */
-              <RecipientSelectorButton selectedRecipient={selectedRecipient} />
-            )}
-          </div>
-
-          <div className="flex items-center space-x-2 flex-1">
-            {/* Output Amount */}
-            <div className="flex-1">
-              <div className="flex items-center space-x-2">
-                <DynamicSizeInputField
-                  value={
-                    tradeType === TradeType.EXACT_OUTPUT
-                      ? buyAmount
-                      : buyAmount || toAmountDisplay || ""
-                  }
-                  onChange={
-                    exactInputOnly
-                      ? undefined
-                      : (e) => handleBuyAmountChange(e.target.value)
-                  }
-                  onFocus={exactInputOnly ? undefined : handleBuyInputFocus}
-                  isLoading={
-                    isLoadingQuote && tradeType === TradeType.EXACT_INPUT
-                  }
-                  readOnly={
-                    isMeldOnRampActive ||
-                    exactInputOnly ||
-                    (tradeType === TradeType.EXACT_INPUT && isLoadingQuote) ||
-                    !!toAmount
-                  }
-                  disabled={exactInputOnly}
-                  showPlaceholderStyle={!amount}
-                  variant="default"
-                />
-                {isLoadingQuote && tradeType === TradeType.EXACT_INPUT && (
-                  <LoadingSpinner />
-                )}
-              </div>
-            </div>
-
-            {/* Destination Token Selection */}
-            <div className="relative">
-              <TokenSelectorButton
-                token={selectedDestToken}
-                chainId={selectedDestToken?.chainId}
-                onSelect={() => setShowDestinationTokenSelector(true)}
-                unselectable={!!toToken}
-              />
-            </div>
-          </div>
-
-          {/* Bottom Info Row */}
-          <div className="mt-4 flex items-center justify-between">
-            {/* Destination Amount USD from Quote */}
-            <div className="text-xs text-gray-500 dark:text-gray-400">
-              {(prepareSendQuote?.destinationAmountUsdDisplay ||
-                (isLoadingQuote && tradeType === TradeType.EXACT_INPUT)) && (
-                <span className="notranslate" translate="no">
-                  ≈{" "}
-                  {isLoadingQuote && tradeType === TradeType.EXACT_INPUT
-                    ? formatUsdAmountLocaleDisplay(0)
-                    : prepareSendQuote?.destinationAmountUsdLocaleDisplay ||
-                      prepareSendQuote?.destinationAmountUsdDisplay}
-                </span>
-              )}
-            </div>
-
-            {/* Dest Token Balance - always on right */}
-            {destinationToken && (
-              <div className="text-xs text-gray-500 dark:text-gray-400">
-                <span className="notranslate" translate="no">
-                  Balance:{" "}
-                  {isBalanceVisible
-                    ? freshDestinationToken?.balanceLocaleDisplay ||
-                      destinationToken?.balanceLocaleDisplay ||
-                      freshDestinationToken?.balanceDisplay ||
-                      destinationToken?.balanceDisplay ||
-                      destinationBalanceDisplay ||
-                      "-"
-                    : "••••••"}
-                </span>
-              </div>
-            )}
-          </div>
-        </div>
-        {/* Exchange/Contract Warning */}
-        <RefundWarning
-          fundMethod={fundMethod}
-          isSenderContractOnOrigin={false}
-          isSenderContractOnDestination={false}
-          isSequenceWallet={isSequenceWallet}
-        />
-
-        {/* Quote Details - only show for non-onramp quotes */}
-        {prepareSendQuote && (
-          <div>
-            <QuoteDetails
-              quote={prepareSendQuote}
-              fiatToUsdExchangeRate={fiatToUsdExchangeRate}
-              onRampQuote={selectedOnrampProviderQuote}
-              showContent={true}
-              swapMode={true}
-              isRefetching={isLoadingQuote}
-              isPassthrough={isPassthroughEligible(
-                prepareSendQuote.passthroughEligible,
-                selectedFeeOption,
-                processedFeeOptions,
-              )}
-            />
-          </div>
-        )}
-
-        <HighPriceImpactBlock quoteError={quoteError} />
-
-        {/* Onramp Provider Selector */}
-        {isMeldOnRampActive &&
-          !isLoadingOnrampQuote &&
-          !isLoadingQuote &&
-          prepareSendQuote &&
-          onrampQuotes &&
-          onrampQuotes.length > 0 && (
-            <OnRampProviderSelector
-              providers={onrampQuotes}
-              selectedProvider={selectedOnrampProviderQuote}
-              trailsQuote={prepareSendQuote}
-              setSelectedProvider={(provider) => {
-                setSelectedOnrampProvider(provider as OnrampQuote)
-              }}
-              isRefetching={isLoadingOnrampQuote}
-            />
-          )}
-
-        {/* Onramp Quote Error */}
-        {isMeldOnRampActive && onrampQuoteError && (
-          <div className="mt-4">
-            <ErrorDisplay
-              errorPrettified={getPrettifiedErrorMessage(
-                onrampQuoteError,
-                "Error loading quote",
-              )}
-              error={getFullErrorMessage(onrampQuoteError)}
-              severity="error"
-            />
-          </div>
-        )}
-
-        {/* Fee Options */}
-        {!isMeldOnRampActive &&
-          fundMethod !== "direct-transfer" &&
-          fundMethod !== "onramp-mesh" && (
-            <FeeOptions
-              processedFeeOptions={processedFeeOptions || []}
-              selectedFeeOption={selectedFeeOption}
-              setSelectedFeeOption={(feeOption) =>
-                setSelectedFeeOption(feeOption)
-              }
-              chainId={originToken?.chainId}
-              isRefetching={isLoadingQuote}
-              originTokenInfo={{
-                originToken: freshOriginToken ?? originToken!,
-                originTokenBalance:
-                  freshOriginToken?.balance ?? originToken?.balance ?? "0",
-                originTokenAmount: sellAmount,
-                isLoadingBalance: isLoadingFreshOriginBalance,
-              }}
-            />
-          )}
-
-        <button
-          type="submit"
-          disabled={
-            isMeldOnRampActive
-              ? !sellAmount ||
-                isSubmitting ||
-                isCreatingWidgetSession ||
-                !selectedFiatCurrency ||
-                !selectedDestToken ||
-                !effectiveCountryCode ||
-                !effectiveRecipient ||
-                isLoadingOnrampQuote ||
-                isLoadingWidgetSession ||
-                !selectedOnrampProviderQuote ||
-                !!onrampQuoteError ||
-                !!widgetSessionError ||
-                isLoadingQuote ||
-                !prepareSendQuote
-              : !amount ||
-                isSubmitting ||
-                !destinationTokenAddress ||
-                !isValidCustomToken ||
-                isLoadingQuote ||
-                !prepareSendQuote ||
-                (!isMeldOnRampActive &&
-                  fundMethod !== "direct-transfer" &&
-                  prepareSendQuote?.noSufficientBalance) ||
-                (fundMethod !== "direct-transfer" &&
-                  (selectedFeeOption
-                    ? isFeeOptionDisabled(
-                        selectedFeeOption as ProcessedFeeOption,
-                        {
-                          originToken: freshOriginToken ?? originToken!,
-                          originTokenBalance:
-                            freshOriginToken?.balance ??
-                            originToken?.balance ??
-                            "0",
-                          originTokenAmount: sellAmount,
-                        },
-                      )
-                    : false))
-          }
-          className="w-full font-semibold py-4 px-4 trails-border-radius-button transition-colors bg-blue-500 hover:bg-blue-600 disabled:bg-gray-300 text-white disabled:text-gray-500 disabled:cursor-not-allowed cursor-pointer relative"
-        >
-          {isSubmitting || isCreatingWidgetSession || isLoadingWidgetSession ? (
-            <div className="flex items-center justify-center">
-              <Loader2 className="w-5 h-5 animate-spin mr-2 trails-text-muted" />
-              <span>
-                {isCreatingWidgetSession || isLoadingWidgetSession
-                  ? "Creating session..."
-                  : buttonText}
-              </span>
-            </div>
-          ) : isMeldOnRampActive &&
-            !prepareSendQuote &&
-            !selectedOnrampProviderQuote &&
-            (onrampQuoteError || widgetSessionError || widgetError) ? (
-            "Error Loading Quote"
-          ) : fundMethod !== "direct-transfer" &&
-            prepareSendQuote?.noSufficientBalance ? (
-            "Insufficient Balance"
-          ) : isMeldOnRampActive &&
-            (isLoadingOnrampQuote || isLoadingQuote) &&
-            !prepareSendQuote &&
-            !autoSelectedOnrampQuote &&
-            !onrampQuotes ? (
-            <div className="flex items-center justify-center">
-              <LoadingSpinner className="mr-2" />
-              <span>Getting quote...</span>
-            </div>
-          ) : isMeldOnRampActive && prepareSendQuote ? (
-            "Continue"
-          ) : buttonText === "Getting quote..." ? (
-            <div className="flex items-center justify-center">
-              <LoadingSpinner className="mr-2" />
-              <span>{buttonText}</span>
-            </div>
-          ) : (
-            buttonText
-          )}
-        </button>
-      </form>
-    </div>
-  )
-}
-
-export default ClassicSwap