0xtrails 0.13.2 → 0.14.0

package/src/widget/components/Fund.tsx

@@ -1,2463 +0,0 @@
-import { useQuery } from "@tanstack/react-query"
-import { ArrowLeftRight } from "lucide-react"
-import type React from "react"
-import { useCallback, useEffect, useMemo, useRef, useState } from "react"
-import { trackOnrampWidgetSession } from "../../analytics.js"
-import { isPositiveNumber, toSafeNumber } from "../../utils/validation.js"
-import { getChainInfo } from "../../chains.js"
-import { FIAT_CURRENCY_SYMBOLS, USDC_BASE } from "../../constants.js"
-import { getFullErrorMessage, getPrettifiedErrorMessage } from "../../error.js"
-import { logger } from "../../logger.js"
-import { MeldProvidersList } from "../../meld/components/MeldProvidersList.js"
-import { TradeType } from "../../prepareSend.js"
-import {
-  formatUsdAmountDisplay,
-  formatUsdAmountLocaleDisplay,
-} from "../../utils/format.js"
-import { useSupportedTokens, type Token } from "../../tokens.js"
-import type { FundMethod } from "../../transactionIntent/types.js"
-import { isPassthroughEligible } from "../../utils/passthrough.js"
-import { useWidgetProps } from "../hooks/useWidgetProps.js"
-import { getMatchingMeshSupportedTokens } from "../utils/meshSupportedTokens.js"
-import { getActiveMeshEnvironment } from "../utils/onrampConfig.js"
-import { getWidgetOnrampConfig } from "../utils/trailsOnrampConfig.js"
-import type { Screen } from "../hooks/useViewManager.js"
-import { useViewManager } from "../hooks/useViewManager.js"
-import { useDefaultDestinationToken } from "../hooks/useDefaultDestinationToken.js"
-import { useDefaultOriginToken } from "../hooks/useDefaultOriginToken.js"
-import { useDestinationSelectedToken } from "../hooks/useDestinationSelectedToken.js"
-import { useExchangeRate } from "../../query/fiat.hooks.js"
-import { useFiatOnRampCurrencies } from "../hooks/useFiatOnRampCurrencies.js"
-import { useFiatSelectedCurrency } from "../hooks/useFiatSelectedCurrency.js"
-import { useOnRampCountryDefaults } from "../hooks/useOnRampCountryDefaults.js"
-import { useOnRampProviderWidget } from "../hooks/useOnRampProviderWidget.js"
-import type { OnrampQuote } from "../hooks/useOnRampQuote.js"
-import { useOnRampQuote } from "../hooks/useOnRampQuote.js"
-import { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
-import type { ProcessedFeeOption } from "../hooks/useSelectedFeeOption.js"
-import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
-import { useSelectedRecipient } from "../hooks/useSelectedRecipient.js"
-import { useSendForm, type OnCompleteProps } from "../hooks/useSendForm.js"
-import { useSwapState } from "../hooks/useSwapState.js"
-import { useAccountTokenBalanceOnchain } from "../../query/balance.hooks.js"
-import type { BaseProps, OnrampConfirmCallback } from "../types/commonProps.js"
-import { isWithinCooldown, SECOND_MS } from "../../utils/time.js"
-import { forexRateStore } from "../utils/forexRateStore.js"
-import { openPopup, setPopupUrl, closePopup } from "../utils/windowUtils.js"
-import { ChainList } from "./ChainList.js"
-import { DynamicSizeInputField } from "./DynamicSizeInputField.js"
-import { ErrorDisplay } from "./ErrorDisplay.js"
-import { isFeeOptionDisabled } from "./FeeOption.js"
-import { FeeOptions } from "./FeeOptions.js"
-import { FiatSelector } from "./FiatSelector.js"
-import { FiatSelectorButton } from "./FiatSelectorButton.js"
-import { OnRampProviderSelector } from "./OnRampProviderSelector.js"
-import { PercentageMaxButtons } from "./PercentageMaxButtons.js"
-import { QuoteDetails } from "./QuoteDetails.js"
-import { RecipientSelectorButton } from "./RecipientSelectorButton.js"
-import { RefundWarning } from "./RefundWarning.js"
-import { ScreenHeader } from "./ScreenHeader.js"
-import { TokenSelector } from "./TokenSelector.js"
-import { TokenSelectorButton } from "./TokenSelectorButton.js"
-import LoadingSpinner from "./LoadingSpinner.js"
-
-import { addressEqual } from "../../utils/address.js"
-import { useOnrampClient } from "../../onrampClient.js"
-interface FundProps extends BaseProps {
-  onWaitingForOnrampConfirm?: OnrampConfirmCallback
-  title?: string
-  exactInputOnly?: boolean
-  onrampPropsCallback?: (props: any) => void
-  screenNavigationCallback?: (screen: Screen) => void
-  /** Default input mode: "fiat" starts with USD input, "token" starts with token input */
-  defaultInputMode?: "fiat" | "token"
-}
-
-const Fund: React.FC<FundProps> = ({
-  selectedToken: initialSelectedToken,
-  onSend,
-  onConfirm,
-  onComplete,
-  account,
-  toRecipient,
-  toAmount,
-  toChainId,
-  toToken,
-  toCalldata,
-  walletClient,
-  onTransactionStateChange,
-  onError,
-  onWaitingForWalletConfirm,
-  onrampPropsCallback,
-  screenNavigationCallback,
-  onWaitingForOnrampConfirm,
-  paymasterUrls,
-  setWalletConfirmRetryHandler,
-  swapProvider,
-  bridgeProvider,
-  swapProviderFallback,
-  bridgeProviderFallback,
-  fundMethod,
-  onAmountUpdate,
-  checkoutOnHandlers,
-  recentTokens,
-  onTrackToken,
-  isSequenceWallet = false,
-  exactInputOnly = true, // Fund mode is always exact input only
-  defaultInputMode,
-}) => {
-  const { mode, navigate } = useViewManager()
-  const widgetProps = useWidgetProps()
-  const {
-    fundOptions,
-    onramp: onrampFactory,
-    apiKey,
-    trailsApiUrl,
-  } = widgetProps
-  const onrampClient = useOnrampClient()
-  const {
-    selectedToken: originToken,
-    setSelectedToken: setOriginToken,
-    hasManualSelection: hasManualOriginSelection,
-    setHasManualSelection: setHasManualOriginSelection,
-  } = useOriginSelectedToken()
-  const {
-    selectedToken: destinationToken,
-    setSelectedToken: setDestinationToken,
-    hasManualSelection: hasManualDestinationSelection,
-    setHasManualSelection: setHasManualDestinationSelection,
-    isControlledByProps: isDestinationControlledByProps,
-  } = useDestinationSelectedToken()
-  const { paymentMethod, selectedMeshExchange } = useSelectedFundMethod()
-  const meshOnrampConfig = getWidgetOnrampConfig(onrampFactory)
-  const meshEnvironment = getActiveMeshEnvironment(meshOnrampConfig)
-  const meshEnabled = !!meshOnrampConfig?.mesh
-  const meshAllowedExchanges = meshOnrampConfig?.mesh?.exchanges ?? null
-  const activeMeshIntegrationIds = selectedMeshExchange
-    ? [selectedMeshExchange.integrationId]
-    : null
-  const activeMeshExchangeKeys = selectedMeshExchange
-    ? null
-    : meshAllowedExchanges
-  const isCoinbaseMeshOnramp =
-    fundMethod === "onramp-mesh" &&
-    (selectedMeshExchange?.exchangeKey === "coinbase" ||
-      selectedMeshExchange?.exchangeKey === "coinbaseRamp")
-
-  // Check if fee options will be shown (not needed for onramp/direct-transfer modes)
-  const skipFeeBalanceFetch =
-    fundMethod === "onramp-meld" ||
-    fundMethod === "direct-transfer" ||
-    fundMethod === "onramp-mesh"
-
-  // Get origin token with fresh balance for fee option checks
-  // Skip fetching if fee options won't be shown
-  const {
-    token: freshOriginToken,
-    isLoadingBalance: isLoadingFreshOriginBalance,
-  } = useAccountTokenBalanceOnchain(originToken, account?.address, {
-    disabled: skipFeeBalanceFetch,
-  })
-
-  const { selectedRecipient, setSelectedRecipient } = useSelectedRecipient()
-  const {
-    selectedCurrency: selectedFiatCurrency,
-    setSelectedCurrency: setSelectedFiatCurrency,
-    hasManualSelection: hasManualFiatSelection,
-    setHasManualSelection: setHasManualFiatSelection,
-    fiatAmount: sellFiatAmount,
-    setFiatAmount: setSellFiatAmount,
-  } = useFiatSelectedCurrency()
-  const [showFiatSelector, setShowFiatSelector] = useState(false)
-  const [selectedCountryCode, setSelectedCountryCode] = useState<string | null>(
-    null,
-  )
-  const [showProviderSelector, setShowProviderSelector] = useState(false)
-  const [selectedOnrampProvider, setSelectedOnrampProvider] =
-    useState<OnrampQuote | null>(null)
-
-  // Add debounced state for Meld quote fetching
-  const [debouncedSellFiatAmount, setDebouncedSellFiatAmount] =
-    useState(sellFiatAmount)
-  const debounceTimerRef = useRef<NodeJS.Timeout | null>(null)
-
-  // Check if onramp is active
-  const isMeldOnRampActive = fundMethod === "onramp-meld"
-
-  // Derive the origin token for useSendForm at render time.
-  // When onramp is active the origin is always USDC on Base (what the
-  // onramp provider delivers). We derive this instead of relying on the
-  // useEffect below because the effect runs *after* render, leaving
-  // originToken null on the first pass and preventing the quote from firing.
-  const effectiveOriginToken = isMeldOnRampActive ? USDC_BASE : originToken
-
-  // Unified state for tracking USD display mode (works for both token and fiat)
-  // In onramp mode, always default to the selected fiat currency (not USD/$)
-  const [isEnteringFiat, setIsEnteringFiat] = useState(
-    !isMeldOnRampActive && defaultInputMode === "fiat",
-  )
-  // Separate state for display value to handle USD toggle properly
-  const [inputDisplayValue, setInputDisplayValue] = useState("")
-  const lastInputModeRef = useRef(false)
-  // Track if user is actively typing to prevent conversion loops
-  const [isUserTyping, setIsUserTyping] = useState(false)
-  const typingTimeoutRef = useRef<NodeJS.Timeout | null>(null)
-
-  useEffect(() => {
-    return () => {
-      if (typingTimeoutRef.current) {
-        clearTimeout(typingTimeoutRef.current)
-      }
-    }
-  }, [])
-
-  // 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: use location-based currency first,
-  // only fall back to USD when location fetch is done and no default currency was returned
-  useEffect(() => {
-    if (
-      isMeldOnRampActive &&
-      !selectedFiatCurrency &&
-      fiatCurrencies.length > 0 &&
-      !isLoadingCountryDefaults &&
-      !isLoadingFiatCurrencies &&
-      !hasManualFiatSelection
-    ) {
-      // Prefer location-based currency; only then fall back to USD
-      const currencyCodeToSelect = defaultCurrencyCode ?? "USD"
-
-      const defaultCurrency = fiatCurrencies.find(
-        (currency) => currency.currencyCode === currencyCodeToSelect,
-      )
-
-      if (defaultCurrency) {
-        logger.console.log(
-          "[Fund] Auto-selecting default currency:",
-          defaultCurrency,
-          defaultCurrencyCode
-            ? "(from location)"
-            : "(fallback to USD - location not available)",
-        )
-        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 match = fiatCurrencies.find(
-        (c) =>
-          c.currencyCode.toUpperCase() === configuredFiatCurrency.toUpperCase(),
-      )
-      if (match) {
-        setSelectedFiatCurrency(match)
-        setHasManualFiatSelection(true)
-      }
-    }
-
-    if (configuredFiatAmount) {
-      setSellFiatAmount(configuredFiatAmount)
-      setInputDisplayValue(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 =
-    effectiveOriginToken?.chainId ?? initialSelectedToken?.chainId ?? null
-  const {
-    tradeType: globalTradeType,
-    setTradeType,
-    sellAmount,
-    setSellAmount,
-    buyAmount,
-    setBuyAmount,
-    resetSwapState,
-    enterFormMode,
-  } = useSwapState()
-
-  // Determine the form mode based on fund method
-  const currentFormMode = useMemo(() => {
-    if (fundMethod === "onramp-meld") return "fund-onramp-meld" as const
-    if (fundMethod === "onramp-mesh") return "fund-onramp-mesh" as const
-    if (fundMethod === "direct-transfer") return "fund-direct-transfer" as const
-    return "fund-wallet" as const
-  }, [fundMethod])
-
-  // Reset swap state only when switching between different form modes
-  // biome-ignore lint/correctness/useExhaustiveDependencies: Stable setters, only react to currentFormMode changes
-  useEffect(() => {
-    const didReset = enterFormMode(currentFormMode)
-    if (didReset) {
-      // Also clear fiat amount and display value when mode changes
-      setSellFiatAmount("")
-      setInputDisplayValue("")
-    }
-  }, [currentFormMode])
-
-  // Initialize input display value from cached amounts on mount
-  // This ensures the display syncs with context values when returning from settings/history etc
-  // biome-ignore lint/correctness/useExhaustiveDependencies: Only run on mount to initialize display
-  useEffect(() => {
-    if (isMeldOnRampActive && sellFiatAmount) {
-      setInputDisplayValue(sellFiatAmount)
-    } else if (!isMeldOnRampActive && sellAmount) {
-      setInputDisplayValue(sellAmount)
-    }
-  }, [])
-
-  const tradeType = globalTradeType || TradeType.EXACT_INPUT
-  const [isCreatingWidgetSession, setIsCreatingWidgetSession] = useState(false)
-  const [widgetError, setWidgetError] = useState<string | null>(null)
-
-  const handleCompleteAndClearAmounts = useCallback(
-    (result: OnCompleteProps) => {
-      setInputDisplayValue("")
-      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] Fund toRecipient prop effect:", {
-      toRecipient,
-      selectedRecipient,
-      accountAddress: account?.address,
-    })
-
-    if (toRecipient) {
-      // Always sync with toRecipient prop when it changes
-      logger.console.log(
-        "[trails-sdk] Fund Setting selectedRecipient to toRecipient:",
-        toRecipient,
-      )
-      setSelectedRecipient(toRecipient)
-    }
-    // Don't auto-set to account.address - let user select via RecipientSelectorButton
-  }, [toRecipient, setSelectedRecipient])
-
-  // Calculate effective recipient for useSendForm (same pattern as Pay.tsx)
-  // Use selectedRecipient if set, otherwise toRecipient prop, otherwise account address as fallback
-  const effectiveRecipient =
-    selectedRecipient || toRecipient || account?.address
-
-  const effectiveFundMethod: FundMethod | undefined = isMeldOnRampActive
-    ? "onramp-meld"
-    : (fundMethod as FundMethod | undefined)
-
-  // Add debounce effect for sellFiatAmount
-  useEffect(() => {
-    // Clear existing timer
-    if (debounceTimerRef.current) {
-      clearTimeout(debounceTimerRef.current)
-    }
-
-    // Set new timer for 500ms debounce
-    debounceTimerRef.current = setTimeout(() => {
-      setDebouncedSellFiatAmount(sellFiatAmount)
-    }, 500)
-
-    // Cleanup on unmount or when sellFiatAmount changes
-    return () => {
-      if (debounceTimerRef.current) {
-        clearTimeout(debounceTimerRef.current)
-      }
-    }
-  }, [sellFiatAmount])
-
-  // Get onramp quote when onramp is active (using debounced amount)
-  const {
-    quotes: onrampQuotes,
-    selectedQuote: autoSelectedOnrampQuote,
-    isLoading: isLoadingOnrampQuote,
-    error: onrampQuoteError,
-    onrampTrackingData,
-  } = useOnRampQuote({
-    amount: debouncedSellFiatAmount,
-    sourceCurrencyCode: selectedFiatCurrency?.currencyCode,
-    destinationCurrencyCode: "USDC_BASE",
-    countryCode: effectiveCountryCode || undefined,
-    walletAddress: account?.address || "",
-    paymentMethodType: paymentMethod?.id,
-    enabled:
-      isMeldOnRampActive &&
-      !!debouncedSellFiatAmount &&
-      !!selectedFiatCurrency &&
-      !!effectiveCountryCode &&
-      !!effectiveRecipient,
-  })
-
-  const {
-    amount,
-    amountRaw,
-    balanceFormatted,
-    balanceRaw,
-    tokenDecimals,
-    balanceLocaleDisplay,
-    balanceUsdDisplay,
-    balanceUsdLocaleDisplay,
-    handleSubmit,
-    isSubmitting,
-    isLoadingQuote,
-    selectedDestToken,
-    setSelectedDestinationChain,
-    setSelectedDestToken,
-    buttonText,
-    destinationTokenAddress,
-    isValidCustomToken,
-    prepareSendQuote,
-    processedFeeOptions,
-    selectedFeeOption,
-    setSelectedFeeOption,
-    sendFn,
-    sourceTokenPrices,
-  } = 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: effectiveOriginToken as any,
-    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",
-    onNavigateToOnrampMesh:
-      onrampPropsCallback && screenNavigationCallback
-        ? (props) => {
-            // Set the onramp props and navigate to onramp-mesh screen
-            onrampPropsCallback(props)
-            screenNavigationCallback("onramp-mesh")
-          }
-        : undefined,
-  })
-
-  const {
-    data: isMeshRouteSupported = true,
-    isLoading: isLoadingMeshRouteSupport,
-  } = useQuery({
-    queryKey: [
-      "mesh-route-support",
-      meshEnvironment,
-      activeMeshExchangeKeys,
-      prepareSendQuote?.originChain?.id,
-      prepareSendQuote?.originToken?.symbol,
-      trailsApiUrl,
-      apiKey,
-    ],
-    queryFn: async () => {
-      const response = await onrampClient.getMeshSupportedTokens({
-        environment: meshEnvironment,
-      })
-
-      const allowedTokens = !activeMeshExchangeKeys?.length
-        ? !activeMeshIntegrationIds?.length
-          ? response.tokens || []
-          : (response.tokens || []).filter((token) =>
-              (token.integrationIds || []).some((integrationId) =>
-                activeMeshIntegrationIds.includes(integrationId),
-              ),
-            )
-        : (response.tokens || []).filter((token) =>
-            (token.exchangeKeys || []).some((exchangeKey) =>
-              activeMeshExchangeKeys.includes(exchangeKey),
-            ),
-          )
-
-      return (
-        getMatchingMeshSupportedTokens(
-          allowedTokens,
-          prepareSendQuote?.originChain?.id,
-          prepareSendQuote?.originToken?.symbol,
-        ).length > 0
-      )
-    },
-    enabled:
-      fundMethod === "onramp-mesh" &&
-      meshEnabled &&
-      !!prepareSendQuote?.originChain?.id &&
-      !!prepareSendQuote?.originToken?.symbol &&
-      !!apiKey &&
-      !!trailsApiUrl,
-    staleTime: 24 * 60 * 60 * 1000,
-    gcTime: 24 * 60 * 60 * 1000,
-    refetchOnMount: false,
-    refetchOnWindowFocus: false,
-    refetchOnReconnect: false,
-  })
-
-  const selectedOnrampProviderQuote =
-    selectedOnrampProvider || autoSelectedOnrampQuote
-
-  const shouldValidateFeeOption =
-    fundMethod !== "direct-transfer" && fundMethod !== "onramp-mesh"
-
-  const isAwaitingTrailsQuote =
-    isMeldOnRampActive && !!selectedOnrampProviderQuote && !prepareSendQuote
-
-  // Get exchange rate for fiat to USD conversion
-  // Use the selected fiat currency for real-time conversion as user types
-  const {
-    exchangeRate: fiatToUsdExchangeRate,
-    isLoading: isLoadingFiatToUsdExchangeRate,
-  } = useExchangeRate({
-    fromCurrency: "USD",
-    toCurrency:
-      isMeldOnRampActive && selectedFiatCurrency?.currencyCode
-        ? selectedFiatCurrency.currencyCode
-        : "USD",
-    disabled:
-      !isMeldOnRampActive ||
-      !selectedFiatCurrency ||
-      selectedFiatCurrency?.currencyCode === "USD",
-  })
-
-  // Sync input display with cached values when switching to/from onramp mode
-  const lastOnrampModeRef = useRef(isMeldOnRampActive)
-
-  useEffect(() => {
-    // Only sync when mode actually changes
-    if (lastOnrampModeRef.current !== isMeldOnRampActive) {
-      lastOnrampModeRef.current = isMeldOnRampActive
-
-      if (isMeldOnRampActive && sellFiatAmount) {
-        // When switching to onramp mode, sync with cached fiat amount
-        setInputDisplayValue(sellFiatAmount)
-      } else if (!isMeldOnRampActive && sellAmount) {
-        // When switching from onramp mode, sync with cached token amount
-        setInputDisplayValue(sellAmount)
-      } else {
-        // Clear input if no cached value for the new mode
-        setInputDisplayValue("")
-      }
-    }
-  }, [isMeldOnRampActive, sellFiatAmount, sellAmount])
-
-  // Get the token price for USD conversions
-  const tokenPriceUsd = sourceTokenPrices?.[0]?.priceUsd || 0
-
-  // Sync display value ONLY when toggle button is clicked (mode actually changes)
-  useEffect(() => {
-    if (lastInputModeRef.current !== isEnteringFiat) {
-      lastInputModeRef.current = isEnteringFiat
-
-      // Don't do any conversion if user is typing
-      if (isUserTyping) {
-        return
-      }
-
-      if (isMeldOnRampActive && sellFiatAmount) {
-        // Fiat mode
-        const fiatAmount = toSafeNumber(sellFiatAmount)
-        if (fiatAmount > 0) {
-          // Only update if there's an actual amount
-          if (isEnteringFiat && fiatToUsdExchangeRate) {
-            // Switching to USD mode - show USD value
-            const usdAmount = fiatAmount / fiatToUsdExchangeRate
-            // Format to 2 decimals and remove unnecessary trailing zeros
-            const formatted = Number(usdAmount.toFixed(2)).toString()
-            setInputDisplayValue(formatted)
-          } else {
-            // Switching to local currency mode - show fiat value
-            const formatted = Number(fiatAmount.toFixed(2)).toString()
-            setInputDisplayValue(formatted)
-          }
-        }
-      } else if (!isMeldOnRampActive && sellAmount) {
-        // Token mode
-        const tokenAmount = toSafeNumber(sellAmount)
-        if (tokenAmount > 0) {
-          // Only update if there's an actual amount
-          if (isEnteringFiat && tokenPriceUsd > 0) {
-            // Switching to fiat mode - show preferred currency value
-            const usdAmount = tokenAmount * tokenPriceUsd
-
-            // Apply forex rate if available to convert USD to preferred currency
-            const rateData = forexRateStore.getRate()
-            const displayValue =
-              rateData && rateData.currency !== "USD"
-                ? usdAmount * rateData.rate
-                : usdAmount
-
-            // Format to 2 decimals and remove unnecessary trailing zeros
-            const formatted = Number(displayValue.toFixed(2)).toString()
-            logger.console.log(
-              "[TRAILS EFFECT] Setting display value in useEffect:",
-              formatted,
-              "from USD:",
-              usdAmount,
-              "with rate:",
-              rateData?.rate,
-            )
-            setInputDisplayValue(formatted)
-          } else {
-            // Show token amount - remove unnecessary trailing zeros
-            // First round to 8 decimals to avoid floating point issues
-            const rounded = Math.round(tokenAmount * 100000000) / 100000000
-            setInputDisplayValue(rounded.toString())
-          }
-        }
-      }
-    }
-  }, [
-    isEnteringFiat,
-    fiatToUsdExchangeRate,
-    sellFiatAmount,
-    sellAmount,
-    isMeldOnRampActive,
-    tokenPriceUsd,
-    isUserTyping,
-  ])
-
-  // Reset mode only when currency actually changes (but respect defaultInputMode)
-  const prevFiatCurrencyRef = useRef(selectedFiatCurrency)
-  useEffect(() => {
-    // Only reset if currency actually changed (not on initial mount)
-    if (
-      selectedFiatCurrency &&
-      prevFiatCurrencyRef.current !== selectedFiatCurrency
-    ) {
-      // Reset to default mode when currency changes
-      setIsEnteringFiat(defaultInputMode === "fiat")
-      lastInputModeRef.current = defaultInputMode === "fiat"
-    }
-    prevFiatCurrencyRef.current = selectedFiatCurrency
-  }, [selectedFiatCurrency, defaultInputMode]) // Only reset mode on currency change
-
-  // Update display value when amount changes (but don't reset mode)
-  useEffect(() => {
-    if (selectedFiatCurrency && !isUserTyping && !isEnteringFiat) {
-      // Only update display if not in USD mode and not typing
-      // Don't update if the user has cleared the input (inputDisplayValue is empty but sellFiatAmount has value)
-      if (
-        inputDisplayValue !== "" &&
-        sellFiatAmount !== "" &&
-        sellFiatAmount !== undefined &&
-        sellFiatAmount !== null
-      ) {
-        setInputDisplayValue(sellFiatAmount)
-      }
-    }
-  }, [
-    selectedFiatCurrency,
-    sellFiatAmount,
-    isUserTyping,
-    isEnteringFiat,
-    inputDisplayValue,
-  ])
-
-  // Reset mode only when token actually changes (but respect defaultInputMode)
-  const prevOriginTokenRef = useRef(originToken)
-  useEffect(() => {
-    // Only reset if token actually changed (not on initial mount)
-    if (
-      originToken &&
-      !isMeldOnRampActive &&
-      prevOriginTokenRef.current !== originToken
-    ) {
-      // Reset to default mode when token changes
-      setIsEnteringFiat(defaultInputMode === "fiat")
-      lastInputModeRef.current = defaultInputMode === "fiat"
-    }
-    prevOriginTokenRef.current = originToken
-  }, [originToken, isMeldOnRampActive, defaultInputMode]) // Only reset mode on token change
-
-  // Update display value when amount changes (but don't reset mode)
-  useEffect(() => {
-    if (
-      originToken &&
-      !isMeldOnRampActive &&
-      !isUserTyping &&
-      !isEnteringFiat
-    ) {
-      // Only update display if not in USD mode and not typing
-      // Don't update if the user has cleared the input (inputDisplayValue is empty but sellAmount has value)
-      if (
-        inputDisplayValue !== "" &&
-        sellAmount !== "" &&
-        sellAmount !== undefined &&
-        sellAmount !== null
-      ) {
-        setInputDisplayValue(sellAmount)
-      }
-    }
-  }, [
-    originToken,
-    isMeldOnRampActive,
-    sellAmount,
-    isUserTyping,
-    isEnteringFiat,
-    inputDisplayValue,
-  ])
-
-  // Hook to create onramp widget session
-  const {
-    createWidgetSession,
-    isLoading: isLoadingWidgetSession,
-    error: widgetSessionError,
-  } = useOnRampProviderWidget()
-
-  const [showSourceTokenSelector, setShowSourceTokenSelector] = useState(false)
-  const [showDestinationTokenSelector, setShowDestinationTokenSelector] =
-    useState(false)
-
-  const { supportedTokens } = useSupportedTokens({
-    disabled: !toToken,
-  })
-
-  // Use a ref to track if we've already auto-selected from toToken prop
-  const lastAutoSelectedRef = useRef<string | null>(null)
-
-  // Initialize destination token from toToken prop (similar to Pay.tsx)
-  // This should override any cached/manual selections when toToken is provided
-  useEffect(() => {
-    const currentKey = `${toToken}-${toChainId}`
-
-    if (
-      toToken &&
-      toChainId &&
-      supportedTokens?.length > 0 &&
-      lastAutoSelectedRef.current !== currentKey
-    ) {
-      // Find the destination token from props
-      const destinationToken = supportedTokens?.find(
-        (token) =>
-          token.chainId === Number(toChainId) &&
-          (addressEqual(token.contractAddress, toToken) ||
-            token.symbol.toLowerCase() === toToken.toLowerCase()),
-      )
-
-      if (destinationToken) {
-        logger.console.log(
-          "[trails-sdk] Fund: Setting destination token from toToken prop:",
-          destinationToken,
-        )
-
-        setDestinationToken(destinationToken)
-        setSelectedDestToken(destinationToken)
-
-        // Set the destination chain
-        const chainInfo = getChainInfo(Number(toChainId))
-        if (chainInfo) {
-          setSelectedDestinationChain(chainInfo)
-        }
-
-        // Mark this combination as processed
-        lastAutoSelectedRef.current = currentKey
-
-        // Don't mark as manually selected - this is from props
-        // This allows the token to be properly set from props without interference
-      }
-    } else if (!toToken && hasManualDestinationSelection) {
-      // Clear manual selection flag when toToken prop is removed
-      // This allows default selection to work again
-      setHasManualDestinationSelection(false)
-      userActionRef.current.hasManualDestinationSelection = false
-      lastAutoSelectedRef.current = null
-    }
-  }, [
-    toToken,
-    toChainId,
-    supportedTokens,
-    setDestinationToken,
-    setSelectedDestToken,
-    setSelectedDestinationChain,
-    hasManualDestinationSelection,
-    setHasManualDestinationSelection,
-  ])
-
-  // Fund mode is always exact input only - enforce this
-  useEffect(() => {
-    if (exactInputOnly) {
-      setTradeType(TradeType.EXACT_INPUT)
-      setBuyAmount("") // Clear any buy amount
-    }
-  }, [exactInputOnly, setTradeType, setBuyAmount])
-
-  // Handle sell amount input changes
-  const handleSellAmountChange = useCallback(
-    (value: string) => {
-      // Don't process single "0" or values starting with "0."
-      // Only strip leading zeros from values like "00", "01", "005" etc.
-      let processedValue = value
-      if (
-        value !== "0" &&
-        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,
-  ])
-
-  // 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 &&
-      effectiveOriginToken &&
-      effectiveOriginToken.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,
-    effectiveOriginToken,
-    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,
-  ])
-
-  useEffect(() => {
-    if (hasManualOriginSelection || !isCoinbaseMeshOnramp) {
-      return
-    }
-
-    const isUsdcBaseSelected =
-      !!originToken &&
-      originToken.chainId === USDC_BASE.chainId &&
-      addressEqual(originToken.contractAddress, USDC_BASE.contractAddress)
-
-    if (!isUsdcBaseSelected) {
-      logger.console.log(
-        "[Fund] Preselecting USDC on Base for Coinbase Mesh onramp",
-      )
-      setOriginToken(USDC_BASE as Token)
-    }
-  }, [
-    hasManualOriginSelection,
-    isCoinbaseMeshOnramp,
-    originToken,
-    setOriginToken,
-  ])
-
-  // Auto-select origin token using separated hook
-  useEffect(() => {
-    if (
-      fundMethod !== "onramp-mesh" &&
-      !originToken &&
-      !isLoadingOriginDefaults &&
-      defaultOriginToken &&
-      !hasManualOriginSelection
-    ) {
-      logger.console.log(
-        "[trails-sdk] Auto-selecting origin token:",
-        defaultOriginToken,
-      )
-      setOriginToken(defaultOriginToken as any)
-    }
-  }, [
-    originToken,
-    isLoadingOriginDefaults,
-    defaultOriginToken,
-    setOriginToken,
-    hasManualOriginSelection,
-    fundMethod,
-  ])
-
-  // Auto-select destination token using separated hook
-  // IMPORTANT: Only auto-select if user hasn't made manual selections and toToken prop is not provided
-  useEffect(() => {
-    // Skip auto-selection if toToken prop is provided
-    if (toToken) {
-      return
-    }
-
-    // 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 (
-      !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 as any)
-      setSelectedDestToken(defaultDestinationToken as any)
-
-      // Also set the destination chain
-      const chainInfo = getChainInfo(defaultDestinationToken.chainId)
-      if (chainInfo) {
-        setSelectedDestinationChain(chainInfo)
-      }
-    }
-  }, [
-    destinationToken,
-    isLoadingDestinationDefaults,
-    defaultDestinationToken,
-    hasManualDestinationSelection,
-    hasManualOriginSelection,
-    setDestinationToken,
-    setSelectedDestToken,
-    setSelectedDestinationChain,
-    toToken, // Add toToken as dependency to skip when provided
-  ])
-
-  // Auto-focus the input field when component mounts
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus()
-    }
-  }, [])
-
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  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 (destinationToken) {
-      logger.console.log(
-        "[trails-sdk] Syncing destination token to useSendForm:",
-        destinationToken,
-      )
-      setSelectedDestToken(destinationToken as any)
-    }
-  }, [destinationToken, setSelectedDestToken])
-
-  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] Fund: Syncing resolved token from useSendForm to global provider:",
-          selectedDestToken.symbol,
-        )
-        setDestinationToken(selectedDestToken)
-      }
-    }
-  }, [
-    isDestinationControlledByProps,
-    selectedDestToken,
-    destinationToken,
-    setDestinationToken,
-    toToken,
-    toChainId,
-  ])
-
-  // Handle source token selection from full-screen selector
-  const handleSourceTokenSelectorSelect = useCallback(
-    (token: Token) => {
-      // Only reset input fields if switching from one token to a different one
-      // Don't reset when selecting a token for the first time (originToken is null)
-      const isDifferentToken =
-        !!originToken && originToken.symbol !== token.symbol
-      if (isDifferentToken) {
-        setSellAmount("")
-        setBuyAmount("")
-        setInputDisplayValue("")
-        setTradeType(TradeType.EXACT_INPUT)
-      }
-
-      setOriginToken(token)
-      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,
-      setSellAmount,
-      setBuyAmount,
-      setTradeType,
-    ],
-  )
-
-  // Handle destination token selection from full-screen selector
-  const handleDestinationTokenSelectorSelect = useCallback(
-    (token: Token) => {
-      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,
-    ],
-  )
-
-  // Handle recent token selection
-  const handleRecentTokenSelect = useCallback(
-    (token: any) => {
-      if (showSourceTokenSelector) {
-        handleSourceTokenSelectorSelect(token)
-      } else if (showDestinationTokenSelector) {
-        handleDestinationTokenSelectorSelect(token)
-      }
-    },
-    [
-      showSourceTokenSelector,
-      showDestinationTokenSelector,
-      handleSourceTokenSelectorSelect,
-      handleDestinationTokenSelectorSelect,
-    ],
-  )
-
-  // 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={() => navigate("fund-methods")}
-        headerContent="Fund"
-        headerContentAlign="left"
-        showAccountActions={true}
-        customActions={
-          fundOptions?.hideSwap ? undefined : (
-            <button
-              type="button"
-              onClick={() => navigate("swap", { backTarget: "fund-form" })}
-              className="flex h-8 px-3 justify-center items-center gap-1.5 rounded-full bg-gray-50 dark:bg-gray-700 cursor-pointer transition-colors text-gray-900 dark:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-600"
-              title="Swap"
-            >
-              <ArrowLeftRight className="h-4 w-4" />
-              <span className="text-sm font-medium">Swap</span>
-            </button>
-          )
-        }
-      />
-
-      <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(
-                "[Fund] 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("[Fund] Opened onramp widget in popup", {
-                widgetUrl,
-                meldTransactionId: id,
-              })
-
-              if (onWaitingForOnrampConfirm && prepareSendQuote) {
-                // Pass both quote and widget creation parameters
-                logger.console.log(
-                  "[Fund] 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("[Fund] 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 Fund")
-          handleSubmit(e)
-        }}
-        className="space-y-1"
-      >
-        {/* Input Section - Amount Only */}
-        <div className="pt-4 pb-4 trails-border-radius-container p-3 flex flex-col border border-gray-200 dark:border-gray-700 rounded-lg relative">
-          {/* Amount Input - Centered */}
-          <div className="flex items-center justify-center">
-            <div className="flex items-center justify-center space-x-2">
-              <DynamicSizeInputField
-                ref={inputRef}
-                value={inputDisplayValue}
-                disabled={isFiatAmountLocked}
-                onChange={(e) => {
-                  const value = e.target.value
-
-                  // Mark that user is typing
-                  setIsUserTyping(true)
-
-                  // Clear any existing timeout
-                  if (typingTimeoutRef.current) {
-                    clearTimeout(typingTimeoutRef.current)
-                  }
-
-                  // Clear typing flag after a short delay
-                  typingTimeoutRef.current = setTimeout(() => {
-                    setIsUserTyping(false)
-                  }, 300)
-
-                  // Allow empty string
-                  if (value === "") {
-                    setInputDisplayValue("")
-                    if (isMeldOnRampActive) {
-                      setSellFiatAmount("")
-                    } else {
-                      setSellAmount("")
-                    }
-                    return
-                  }
-
-                  if (isMeldOnRampActive) {
-                    // Fiat/onramp mode
-                    // Validate decimal places (max 2 decimals)
-                    const decimalMatch = value.match(/^\d*\.?\d{0,2}$/)
-                    if (!decimalMatch) {
-                      return // Don't update if invalid format
-                    }
-
-                    // Update display value - preserve the exact user input
-                    setInputDisplayValue(value)
-
-                    // Just set the values directly without complex processing
-                    if (isEnteringFiat && fiatToUsdExchangeRate) {
-                      // User is entering preferred currency, convert to selected onramp currency for backend
-                      const inputAmount = toSafeNumber(value)
-
-                      // First convert from preferred currency to USD if needed
-                      const rateData = forexRateStore.getRate()
-                      const usdAmount =
-                        rateData && rateData.currency !== "USD"
-                          ? inputAmount / rateData.rate
-                          : inputAmount
-
-                      // Then convert USD to selected onramp currency
-                      const convertedAmount = usdAmount * fiatToUsdExchangeRate
-                      setSellFiatAmount(convertedAmount.toString())
-                    } else {
-                      // User is entering in selected currency directly
-                      setSellFiatAmount(value)
-                    }
-                  } else {
-                    // Token mode
-                    // Validate decimal places (max 8 for tokens, max 2 for USD)
-                    const maxDecimals = isEnteringFiat ? 2 : 8
-                    const decimalRegex = new RegExp(
-                      `^\\d*\\.?\\d{0,${maxDecimals}}$`,
-                    )
-                    const decimalMatch = value.match(decimalRegex)
-                    if (!decimalMatch) {
-                      return // Don't update if invalid format
-                    }
-
-                    // Update display value - preserve the exact user input
-                    setInputDisplayValue(value)
-
-                    // Just pass the value directly to handleSellAmountChange
-                    // Let it handle any necessary processing
-                    if (isEnteringFiat && tokenPriceUsd > 0) {
-                      // User is entering fiat, convert to token amount for backend
-                      // First convert from preferred currency to USD if needed
-                      const inputAmount = toSafeNumber(value)
-                      const rateData = forexRateStore.getRate()
-                      const usdAmount =
-                        rateData && rateData.currency !== "USD"
-                          ? inputAmount / rateData.rate
-                          : inputAmount
-                      const tokenAmount = usdAmount / tokenPriceUsd
-                      handleSellAmountChange(tokenAmount.toString())
-                    } else {
-                      // User is entering token amount directly - pass it as-is
-                      handleSellAmountChange(value)
-                    }
-                  }
-                }}
-                onFocus={handleSellInputFocus}
-                isLoading={
-                  isLoadingQuote && tradeType === TradeType.EXACT_OUTPUT
-                }
-                variant="default"
-                inputSize="large"
-                textAlign="center"
-                isFiatInput={isMeldOnRampActive || isEnteringFiat}
-                currencySymbol={
-                  isEnteringFiat
-                    ? (() => {
-                        // Get the current currency from forexRateStore
-                        const rateData = forexRateStore.getRate()
-                        const currency = rateData?.currency || "USD"
-                        // Return the appropriate symbol for the currency
-                        return (
-                          FIAT_CURRENCY_SYMBOLS[
-                            currency as keyof typeof FIAT_CURRENCY_SYMBOLS
-                          ] || "$"
-                        )
-                      })()
-                    : isMeldOnRampActive
-                      ? selectedFiatCurrency?.currencyCode
-                      : originToken?.symbol
-                }
-              />
-              {isLoadingQuote && tradeType === TradeType.EXACT_OUTPUT && (
-                <LoadingSpinner />
-              )}
-            </div>
-          </div>
-
-          {/* USD Value - hidden while onramp location/currency is loading to avoid showing undefined */}
-          {isMeldOnRampActive &&
-          (isLoadingCountryDefaults || isLoadingFiatCurrencies) ? (
-            <div className="mt-2 text-center text-sm text-gray-500 dark:text-gray-400">
-              Loading...
-            </div>
-          ) : (
-            <div className="mt-2 text-center text-sm">
-              {isMeldOnRampActive ? (
-                // Onramp mode - clickable USD toggle (only show when rate is ready to avoid undefined)
-                selectedFiatCurrency?.currencyCode === "USD" ? (
-                  // If already USD, no toggle needed
-                  inputDisplayValue && Number(inputDisplayValue) > 0 ? (
-                    <div
-                      className="text-xs text-gray-500 dark:text-gray-400 notranslate"
-                      translate="no"
-                    >
-                      ≈ {formatUsdAmountDisplay(Number(inputDisplayValue))}
-                    </div>
-                  ) : null
-                ) : fiatToUsdExchangeRate != null &&
-                  !isLoadingFiatToUsdExchangeRate ? (
-                  // Clickable toggle between USD and selected currency
-                  <div className="flex justify-center">
-                    <button
-                      type="button"
-                      disabled={isFiatAmountLocked}
-                      onClick={() => {
-                        // When toggling USD mode, convert the current display value
-                        const newMode = !isEnteringFiat
-                        setIsEnteringFiat(newMode)
-
-                        // Convert the current display to the new mode
-                        if (inputDisplayValue) {
-                          const currentValue = parseFloat(inputDisplayValue)
-                          if (isPositiveNumber(currentValue)) {
-                            if (newMode && fiatToUsdExchangeRate) {
-                              // Switching to USD mode - convert from local currency
-                              const usdValue =
-                                currentValue / fiatToUsdExchangeRate
-                              setInputDisplayValue(
-                                Number(usdValue.toFixed(2)).toString(),
-                              )
-                            } else if (!newMode && fiatToUsdExchangeRate) {
-                              // Switching to local currency mode - convert from USD
-                              const localValue =
-                                currentValue * fiatToUsdExchangeRate
-                              setInputDisplayValue(
-                                Number(localValue.toFixed(2)).toString(),
-                              )
-                            }
-                          }
-                        }
-                      }}
-                      className={`text-xs transition-colors flex items-center gap-1 ${
-                        isFiatAmountLocked
-                          ? "text-gray-400 cursor-not-allowed"
-                          : "text-blue-500 hover:text-blue-600 cursor-pointer"
-                      }`}
-                      title={
-                        selectedFiatCurrency
-                          ? `${selectedFiatCurrency.currencyCode}`
-                          : ""
-                      }
-                    >
-                      <svg
-                        aria-hidden="true"
-                        width="16"
-                        height="16"
-                        viewBox="0 0 16 16"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M3.16669 6.5L5.50002 4.16667M5.50002 4.16667L7.83335 6.5M5.50002 4.16667L5.50002 11.8333"
-                          stroke="#3B82F6"
-                          strokeWidth="1.5"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                        />
-                        <path
-                          d="M12.8334 9.5L10.5 11.8333M10.5 11.8333L8.16669 9.5M10.5 11.8333L10.5 4.16667"
-                          stroke="#3B82F6"
-                          strokeWidth="1.5"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                        />
-                      </svg>
-                      {(() => {
-                        const inputValue = toSafeNumber(inputDisplayValue)
-
-                        if (isEnteringFiat) {
-                          // Currently entering in USD, show the local currency value
-                          const localAmount = inputValue * fiatToUsdExchangeRate
-                          const localDisplay =
-                            localAmount > 0
-                              ? `${localAmount.toFixed(2)} ${selectedFiatCurrency?.currencyCode}`
-                              : `0.00 ${selectedFiatCurrency?.currencyCode}`
-
-                          return (
-                            <span
-                              className="notranslate"
-                              translate="no"
-                              title={localDisplay}
-                            >
-                              ≈ {localDisplay}
-                            </span>
-                          )
-                        } else {
-                          // Currently entering in local currency, show USD value
-                          const usdAmount = inputValue / fiatToUsdExchangeRate
-                          const displayValue = formatUsdAmountDisplay(usdAmount)
-                          const localeValue =
-                            formatUsdAmountLocaleDisplay(usdAmount)
-
-                          return (
-                            <span
-                              className="notranslate"
-                              translate="no"
-                              title={displayValue}
-                            >
-                              ≈ {localeValue}
-                            </span>
-                          )
-                        }
-                      })()}
-                    </button>
-                  </div>
-                ) : null
-              ) : (
-                // Regular mode - clickable USD/token value swap
-                <div className="flex justify-center">
-                  <button
-                    type="button"
-                    onClick={() => {
-                      // When toggling USD mode, convert the current display value
-                      const newMode = !isEnteringFiat
-                      logger.console.log(
-                        "[TRAILS TOGGLE] Starting toggle, newMode (entering fiat):",
-                        newMode,
-                      )
-                      logger.console.log(
-                        "[TRAILS TOGGLE] Current inputDisplayValue:",
-                        inputDisplayValue,
-                      )
-                      logger.console.log(
-                        "[TRAILS TOGGLE] tokenPriceUsd:",
-                        tokenPriceUsd,
-                      )
-
-                      setIsEnteringFiat(newMode)
-
-                      // Convert the current display to the new mode
-                      if (inputDisplayValue && tokenPriceUsd > 0) {
-                        const currentValue = parseFloat(inputDisplayValue)
-                        logger.console.log(
-                          "[TRAILS TOGGLE] Parsed currentValue:",
-                          currentValue,
-                        )
-
-                        if (isPositiveNumber(currentValue)) {
-                          const rateData = forexRateStore.getRate()
-                          logger.console.log(
-                            "[TRAILS TOGGLE] ForexRate data:",
-                            rateData,
-                          )
-
-                          if (newMode) {
-                            // Switching to fiat mode - convert from token amount to preferred currency
-                            const usdValue = currentValue * tokenPriceUsd
-                            logger.console.log(
-                              "[TRAILS TOGGLE] Token->Fiat: usdValue (token * price):",
-                              usdValue,
-                            )
-
-                            // Apply forex rate if available to convert USD to preferred currency
-                            const displayValue =
-                              rateData && rateData.currency !== "USD"
-                                ? usdValue * rateData.rate
-                                : usdValue
-                            logger.console.log(
-                              "[TRAILS TOGGLE] Token->Fiat: displayValue after forex:",
-                              displayValue,
-                            )
-                            logger.console.log(
-                              "[TRAILS TOGGLE] Token->Fiat: forex rate used:",
-                              rateData?.rate || "none (USD)",
-                            )
-
-                            const finalValue = Number(
-                              displayValue.toFixed(2),
-                            ).toString()
-                            logger.console.log(
-                              "[TRAILS TOGGLE] Token->Fiat: Setting input to:",
-                              finalValue,
-                            )
-                            setInputDisplayValue(finalValue)
-                          } else {
-                            // Switching to token mode - convert from preferred currency to token
-                            // First convert from preferred currency to USD if needed
-                            const usdValue =
-                              rateData && rateData.currency !== "USD"
-                                ? currentValue / rateData.rate
-                                : currentValue
-                            logger.console.log(
-                              "[TRAILS TOGGLE] Fiat->Token: usdValue (input / rate):",
-                              usdValue,
-                            )
-                            logger.console.log(
-                              "[TRAILS TOGGLE] Fiat->Token: forex rate used:",
-                              rateData?.rate || "none (USD)",
-                            )
-
-                            const tokenValue = usdValue / tokenPriceUsd
-                            logger.console.log(
-                              "[TRAILS TOGGLE] Fiat->Token: tokenValue (usd / price):",
-                              tokenValue,
-                            )
-
-                            // Round to 8 decimals to avoid floating point issues
-                            const rounded =
-                              Math.round(tokenValue * 100000000) / 100000000
-                            setInputDisplayValue(rounded.toString())
-                          }
-                        }
-                      }
-                    }}
-                    className="text-base text-blue-500 hover:text-blue-600 transition-colors cursor-pointer flex items-center gap-2 py-1.5"
-                    title={
-                      originToken
-                        ? `Toggle between USD and ${originToken.symbol}`
-                        : ""
-                    }
-                  >
-                    <svg
-                      aria-hidden="true"
-                      width="20"
-                      height="20"
-                      viewBox="0 0 16 16"
-                      fill="none"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path
-                        d="M3.16669 6.5L5.50002 4.16667M5.50002 4.16667L7.83335 6.5M5.50002 4.16667L5.50002 11.8333"
-                        stroke="#3B82F6"
-                        strokeWidth="1.5"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      />
-                      <path
-                        d="M12.8334 9.5L10.5 11.8333M10.5 11.8333L8.16669 9.5M10.5 11.8333L10.5 4.16667"
-                        stroke="#3B82F6"
-                        strokeWidth="1.5"
-                        strokeLinecap="round"
-                        strokeLinejoin="round"
-                      />
-                    </svg>
-                    {(() => {
-                      const inputValue = toSafeNumber(inputDisplayValue)
-                      logger.console.log(
-                        "[TRAILS DISPLAY] isEnteringFiat:",
-                        isEnteringFiat,
-                      )
-                      logger.console.log(
-                        "[TRAILS DISPLAY] inputValue:",
-                        inputValue,
-                      )
-
-                      if (isEnteringFiat) {
-                        // Currently entering in preferred currency, show the token amount
-                        // First convert from preferred currency to USD if needed
-                        const rateData = forexRateStore.getRate()
-                        logger.console.log(
-                          "[TRAILS DISPLAY] ForexRate data:",
-                          rateData,
-                        )
-
-                        const usdValue =
-                          rateData && rateData.currency !== "USD"
-                            ? inputValue / rateData.rate
-                            : inputValue
-                        logger.console.log(
-                          "[TRAILS DISPLAY] Fiat mode - usdValue (input / rate):",
-                          usdValue,
-                        )
-
-                        const tokenAmount =
-                          tokenPriceUsd > 0 ? usdValue / tokenPriceUsd : 0
-                        logger.console.log(
-                          "[TRAILS DISPLAY] Fiat mode - tokenAmount:",
-                          tokenAmount,
-                        )
-
-                        const tokenDisplay =
-                          tokenAmount > 0
-                            ? `${tokenAmount.toFixed(8)} ${originToken?.symbol || ""}`
-                            : `0 ${originToken?.symbol || ""}`
-
-                        return (
-                          <span title={tokenDisplay}>≈ {tokenDisplay}</span>
-                        )
-                      } else {
-                        // Currently entering in token amount, show USD value
-                        const usdAmount = inputValue * tokenPriceUsd
-                        logger.console.log(
-                          "[TRAILS DISPLAY] Token mode - usdAmount:",
-                          usdAmount,
-                        )
-
-                        const displayValue = formatUsdAmountDisplay(usdAmount)
-                        const localeValue =
-                          formatUsdAmountLocaleDisplay(usdAmount)
-                        logger.console.log(
-                          "[TRAILS DISPLAY] Token mode - displayValue:",
-                          displayValue,
-                        )
-                        logger.console.log(
-                          "[TRAILS DISPLAY] Token mode - localeValue:",
-                          localeValue,
-                        )
-
-                        return <span title={displayValue}>≈ {localeValue}</span>
-                      }
-                    })()}
-                  </button>
-                </div>
-              )}
-            </div>
-          )}
-
-          {/* Percentage/USD Amount Buttons */}
-          {isMeldOnRampActive ? (
-            // USD Amount Buttons for onramp - convert from USD to selected currency
-            <div className="mt-3 flex justify-center items-center space-x-2">
-              <button
-                type="button"
-                disabled={isFiatAmountLocked}
-                className={`py-0.5 px-1.5 text-xs font-medium rounded-full transition-colors trails-bg-percentage-button trails-text-percentage-button ${
-                  isFiatAmountLocked
-                    ? "opacity-50 cursor-not-allowed"
-                    : "cursor-pointer trails-hover-percentage-button"
-                }`}
-                onClick={() => {
-                  if (selectedFiatCurrency?.currencyCode === "USD") {
-                    setSellFiatAmount("25")
-                    setInputDisplayValue("25")
-                  } else if (fiatToUsdExchangeRate) {
-                    // Convert $25 USD to the selected currency
-                    const convertedAmount = 25 * fiatToUsdExchangeRate
-                    setSellFiatAmount(convertedAmount.toFixed(2))
-
-                    // Update display based on current mode
-                    if (isEnteringFiat) {
-                      setInputDisplayValue("25")
-                    } else {
-                      setInputDisplayValue(convertedAmount.toString())
-                    }
-                  }
-                }}
-              >
-                $25
-              </button>
-              <button
-                type="button"
-                disabled={isFiatAmountLocked}
-                className={`py-0.5 px-1.5 text-xs font-medium rounded-full transition-colors trails-bg-percentage-button trails-text-percentage-button ${
-                  isFiatAmountLocked
-                    ? "opacity-50 cursor-not-allowed"
-                    : "cursor-pointer trails-hover-percentage-button"
-                }`}
-                onClick={() => {
-                  if (selectedFiatCurrency?.currencyCode === "USD") {
-                    setSellFiatAmount("50")
-                    setInputDisplayValue("50")
-                  } else if (fiatToUsdExchangeRate) {
-                    // Convert $50 USD to the selected currency
-                    const convertedAmount = 50 * fiatToUsdExchangeRate
-                    setSellFiatAmount(convertedAmount.toFixed(2))
-
-                    // Update display based on current mode
-                    if (isEnteringFiat) {
-                      setInputDisplayValue("50")
-                    } else {
-                      setInputDisplayValue(convertedAmount.toString())
-                    }
-                  }
-                }}
-              >
-                $50
-              </button>
-              <button
-                type="button"
-                disabled={isFiatAmountLocked}
-                className={`py-0.5 px-1.5 text-xs font-medium rounded-full transition-colors trails-bg-percentage-button trails-text-percentage-button ${
-                  isFiatAmountLocked
-                    ? "opacity-50 cursor-not-allowed"
-                    : "cursor-pointer trails-hover-percentage-button"
-                }`}
-                onClick={() => {
-                  if (selectedFiatCurrency?.currencyCode === "USD") {
-                    setSellFiatAmount("100")
-                    setInputDisplayValue("100")
-                  } else if (fiatToUsdExchangeRate) {
-                    // Convert $100 USD to the selected currency
-                    const convertedAmount = 100 * fiatToUsdExchangeRate
-                    setSellFiatAmount(convertedAmount.toFixed(2))
-
-                    // Update display based on current mode
-                    if (isEnteringFiat) {
-                      setInputDisplayValue("100")
-                    } else {
-                      setInputDisplayValue(convertedAmount.toString())
-                    }
-                  }
-                }}
-              >
-                $100
-              </button>
-            </div>
-          ) : originToken &&
-            balanceFormatted &&
-            fundMethod !== "direct-transfer" &&
-            fundMethod !== "onramp-mesh" ? (
-            <div className="mt-3 flex justify-center items-center space-x-2">
-              <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("")
-                  if (isEnteringFiat && tokenPriceUsd > 0) {
-                    const usdAmount = parseFloat(amount) * tokenPriceUsd
-                    setInputDisplayValue(
-                      Number(usdAmount.toFixed(2)).toString(),
-                    )
-                  } else {
-                    setInputDisplayValue(amount)
-                  }
-                }}
-                className="opacity-100"
-              />
-            </div>
-          ) : null}
-        </div>
-
-        {/* Sending and Receiving Section */}
-        <div className="mt-4 pt-4 pb-4 trails-border-radius-container p-3 mb-4 border border-gray-200 dark:border-gray-700 rounded-lg">
-          {/* Sending and Receiving Labels */}
-          <div className="flex items-center justify-between mb-3 px-1">
-            <span
-              className="text-sm font-medium text-black dark:text-white"
-              style={{ minWidth: "138px" }}
-            >
-              Sending
-            </span>
-            <div className="w-7 flex-shrink-0"></div> {/* Spacer for arrow */}
-            {toRecipient ? (
-              <span
-                className="text-sm font-medium text-black dark:text-white"
-                style={{ minWidth: "138px" }}
-              >
-                Receiving
-              </span>
-            ) : (
-              <RecipientSelectorButton selectedRecipient={selectedRecipient} />
-            )}
-          </div>
-
-          {/* Token Selectors with Arrow */}
-          <div className="flex items-center justify-between space-x-2">
-            {/* Origin Token Selector */}
-            <div className="min-w-[138px] flex flex-col mr-0">
-              {isMeldOnRampActive ? (
-                <FiatSelectorButton
-                  currency={selectedFiatCurrency}
-                  onSelect={() => setShowFiatSelector(true)}
-                  unselectable={isFiatCurrencyLocked}
-                />
-              ) : prepareSendQuote?.noSufficientBalance ? (
-                // Show "Add funds" button when user has insufficient balance
-                <button
-                  type="button"
-                  onClick={() => {
-                    // Navigate to payment selection screen
-                    navigate("fund-methods")
-                  }}
-                  className="w-full flex items-center justify-center space-x-1.5 trails-border-radius-input px-2.5 py-1.5 border transition-all duration-200 bg-blue-500 hover:bg-blue-600 border-blue-500 text-white cursor-pointer"
-                >
-                  <span className="font-medium text-sm text-white">
-                    Add funds
-                  </span>
-                </button>
-              ) : !originToken ? (
-                // No token selected, show "Select Token" button
-                <button
-                  type="button"
-                  onClick={() => {
-                    setShowSourceTokenSelector(true)
-                  }}
-                  className="w-full flex items-center justify-center space-x-1.5 trails-border-radius-input px-2.5 py-1.5 border transition-all duration-200 bg-blue-500 hover:bg-blue-600 border-blue-500 text-white cursor-pointer"
-                >
-                  <span className="font-medium text-sm text-white">
-                    Select Token
-                  </span>
-                </button>
-              ) : (
-                <TokenSelectorButton
-                  token={originToken}
-                  chainId={originChainId}
-                  onSelect={() => setShowSourceTokenSelector(true)}
-                  fullWidth={true}
-                />
-              )}
-            </div>
-
-            {/* Arrow Icon in Circle - 28x28 */}
-            <div className="flex-shrink-0 mr-0">
-              <div className="w-7 h-7 rounded-full bg-gray-100 dark:bg-gray-800 flex items-center justify-center">
-                <svg
-                  aria-hidden="true"
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="16"
-                  height="16"
-                  viewBox="0 0 16 16"
-                  fill="none"
-                >
-                  <path
-                    d="M7.52861 2.86201C7.78895 2.60166 8.21096 2.60166 8.47131 2.86201L13.138 7.52868C13.3983 7.78903 13.3983 8.21104 13.138 8.47138L8.47131 13.1381C8.21096 13.3984 7.78895 13.3984 7.52861 13.1381C7.26826 12.8777 7.26826 12.4557 7.52861 12.1953L11.0573 8.6667H3.33329C2.9651 8.6667 2.66663 8.36822 2.66663 8.00003C2.66663 7.63184 2.9651 7.33336 3.33329 7.33336H11.0573L7.52861 3.80472C7.26826 3.54437 7.26826 3.12236 7.52861 2.86201Z"
-                    fill="black"
-                  />
-                </svg>
-              </div>
-            </div>
-
-            {/* Destination Token Selector */}
-            <div className="min-w-[138px] flex">
-              <TokenSelectorButton
-                token={selectedDestToken}
-                chainId={(selectedDestToken as any)?.chainId}
-                onSelect={() => setShowDestinationTokenSelector(true)}
-                unselectable={!!toToken}
-                fullWidth={true}
-              />
-            </div>
-          </div>
-
-          {/* Token Balance Display or Insufficient Funds Warning */}
-          {(!fundMethod || fundMethod === "wallet") && originToken && (
-            <div className="mt-3 pl-1 text-xs text-left">
-              {prepareSendQuote?.noSufficientBalance ? (
-                <span style={{ color: "#F97316" }}>
-                  Insufficient funds
-                  {balanceFormatted
-                    ? `. Have ${balanceFormatted} ${originToken.symbol}`
-                    : ""}
-                </span>
-              ) : balanceFormatted ? (
-                <>
-                  <span
-                    className="text-black dark:text-white notranslate"
-                    translate="no"
-                  >
-                    Balance:
-                  </span>
-                  <span
-                    className="text-gray-500 dark:text-gray-400 notranslate"
-                    translate="no"
-                  >
-                    {" "}
-                    {balanceLocaleDisplay || balanceFormatted}{" "}
-                    {originToken.symbol}
-                    {balanceUsdDisplay ? (
-                      <span className="notranslate" translate="no">
-                        {" "}
-                        ({balanceUsdLocaleDisplay || balanceUsdDisplay})
-                      </span>
-                    ) : null}
-                  </span>
-                </>
-              ) : null}
-            </div>
-          )}
-        </div>
-        {/* Exchange/Contract Warning */}
-        <RefundWarning
-          fundMethod={fundMethod}
-          isSenderContractOnOrigin={false}
-          isSenderContractOnDestination={false}
-          isSequenceWallet={isSequenceWallet}
-        />
-
-        {/* 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,
-              }}
-            />
-          )}
-
-        {/* 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}
-            />
-          )}
-
-        {/* Quote Details - only show for non-onramp quotes */}
-        {prepareSendQuote && !isLoadingQuote && !isLoadingOnrampQuote && (
-          <div className="mb-4">
-            <QuoteDetails
-              quote={prepareSendQuote}
-              fiatToUsdExchangeRate={fiatToUsdExchangeRate}
-              onRampQuote={selectedOnrampProviderQuote}
-              showContent={true}
-              swapMode={false}
-              isRefetching={isLoadingQuote}
-              showInsufficientFunds={false}
-              isPassthrough={isPassthroughEligible(
-                prepareSendQuote.passthroughEligible,
-                selectedFeeOption,
-                processedFeeOptions,
-              )}
-            />
-          </div>
-        )}
-
-        {/* Onramp Quote Error */}
-        {isMeldOnRampActive && onrampQuoteError && (
-          <div className="mt-4">
-            <ErrorDisplay
-              errorPrettified={getPrettifiedErrorMessage(
-                onrampQuoteError,
-                "Error loading quote",
-              )}
-              error={getFullErrorMessage(onrampQuoteError)}
-              severity="error"
-            />
-          </div>
-        )}
-
-        {/* Widget/Popup Error */}
-        {widgetError && (
-          <div className="mt-4">
-            <ErrorDisplay
-              errorPrettified={widgetError}
-              error={widgetError}
-              severity="error"
-            />
-          </div>
-        )}
-
-        <button
-          type="submit"
-          disabled={
-            isMeldOnRampActive
-              ? !sellAmount ||
-                isSubmitting ||
-                isCreatingWidgetSession ||
-                !selectedFiatCurrency ||
-                !selectedDestToken ||
-                !effectiveCountryCode ||
-                !effectiveRecipient ||
-                isLoadingOnrampQuote ||
-                isLoadingWidgetSession ||
-                !selectedOnrampProviderQuote ||
-                !!onrampQuoteError ||
-                !!widgetSessionError ||
-                isLoadingQuote ||
-                isAwaitingTrailsQuote ||
-                !prepareSendQuote
-              : !amount ||
-                isSubmitting ||
-                !destinationTokenAddress ||
-                !isValidCustomToken ||
-                isLoadingQuote ||
-                !prepareSendQuote ||
-                (fundMethod === "onramp-mesh" &&
-                  (isLoadingMeshRouteSupport || !isMeshRouteSupported)) ||
-                (!isMeldOnRampActive &&
-                  fundMethod !== "direct-transfer" &&
-                  prepareSendQuote?.noSufficientBalance) ||
-                (shouldValidateFeeOption &&
-                  (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">
-              <LoadingSpinner />
-              <span>
-                {isCreatingWidgetSession || isLoadingWidgetSession
-                  ? "Creating session..."
-                  : buttonText}
-              </span>
-            </div>
-          ) : isMeldOnRampActive &&
-            !prepareSendQuote &&
-            !selectedOnrampProviderQuote &&
-            (onrampQuoteError || widgetSessionError || widgetError) ? (
-            "Error Loading Quote"
-          ) : fundMethod !== "direct-transfer" &&
-            prepareSendQuote?.noSufficientBalance ? (
-            "Insufficient Balance"
-          ) : fundMethod === "onramp-mesh" && isLoadingMeshRouteSupport ? (
-            <div className="flex items-center justify-center">
-              <LoadingSpinner className="mr-2" />
-              <span>Checking exchange funding...</span>
-            </div>
-          ) : fundMethod === "onramp-mesh" &&
-            prepareSendQuote &&
-            !isMeshRouteSupported ? (
-            "Exchange funding unavailable"
-          ) : isMeldOnRampActive && !sellFiatAmount ? (
-            "Enter amount"
-          ) : !isMeldOnRampActive && !sellAmount ? (
-            "Enter amount"
-          ) : isMeldOnRampActive &&
-            (isLoadingOnrampQuote ||
-              isLoadingQuote ||
-              isAwaitingTrailsQuote ||
-              (selectedOnrampProviderQuote && !prepareSendQuote)) ? (
-            <div className="flex items-center justify-center">
-              <LoadingSpinner className="mr-2" />
-              <span>Getting quote...</span>
-            </div>
-          ) : isMeldOnRampActive &&
-            !isLoadingOnrampQuote &&
-            !isLoadingQuote &&
-            !isAwaitingTrailsQuote &&
-            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 { Fund }