0xtrails 0.1.13 → 0.2.0

package/src/widget/components/Fund.tsx

@@ -0,0 +1,1245 @@
+import {
+  ChevronRight,
+  Search,
+  Loader2,
+  ChevronDown,
+  ArrowDown,
+} from "lucide-react"
+import { useEffect, useState, useMemo, useRef, useCallback } from "react"
+import type React from "react"
+import type { Account, WalletClient } from "viem"
+import type { TransactionState } from "../../transactions.js"
+import type { OnCompleteProps } from "../hooks/useSendForm.js"
+import type { CheckoutOnHandlers } from "../hooks/useCheckout.js"
+import { useSendForm } from "../hooks/useSendForm.js"
+import { TradeType } from "../../prepareSend.js"
+import { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
+import { useDestinationSelectedToken } from "../hooks/useDestinationSelectedToken.js"
+import { useSelectedRecipient } from "../hooks/useSelectedRecipient.js"
+import { useSwapAmount } from "../hooks/useSwapAmount.js"
+import { useMode } from "../hooks/useMode.js"
+import { useBalanceVisible } from "../hooks/useBalanceVisible.js"
+import { useCurrentScreen } from "../hooks/useCurrentScreen.js"
+import { useDefaultTokenSelection } from "../hooks/useDefaultTokenSelection.js" // Context version
+import { TokenImage } from "./TokenImage.js"
+import { Identicon } from "./Identicon.js"
+import { TokenSelector } from "./TokenSelector.js"
+import { ScreenHeader } from "./ScreenHeader.js"
+import { ChainList } from "./ChainList.js"
+import { QuoteDetails } from "./QuoteDetails.js"
+import { ErrorDisplay } from "./ErrorDisplay.js"
+import { getChainInfo } from "../../chains.js"
+import { formatUsdAmountDisplay } from "../../tokenBalances.js"
+import { MINIMUM_USD_AMOUNT_FOR_SWAP } from "../../constants.js"
+import { truncateAddress } from "../../utils.js"
+import type { PrepareSendQuote } from "../../prepareSend.js"
+import type { SupportedToken } from "../../tokens.js"
+import { logger } from "../../logger.js"
+import { RefundWarning } from "./RefundWarning.js"
+
+interface FundProps {
+  onBack?: () => void
+  account: Account
+  walletClient: WalletClient
+  onTransactionStateChange: (transactionStates: TransactionState[]) => void
+  onError: (error: Error | string | null) => void
+  onWaitingForWalletConfirm: (props: PrepareSendQuote) => void
+  onConfirm: () => void
+  onComplete: (result: OnCompleteProps) => void
+  onSend: (amount: string, recipient: string) => void
+  paymasterUrls?: Array<{ chainId: number; url: string }>
+  gasless?: boolean
+  setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
+  quoteProvider?: string
+  fundMethod?: string
+  onNavigateToMeshConnect?: (
+    props: {
+      toTokenSymbol: string
+      toTokenAmount: string
+      toChainId: number
+      toRecipientAddress: string
+    },
+    quote?: PrepareSendQuote | null,
+  ) => void
+  checkoutOnHandlers?: CheckoutOnHandlers
+  recentTokens?: SupportedToken[]
+  onRecentTokenSelect?: (token: SupportedToken) => void
+  onTrackToken?: (token: any) => void
+  toRecipient?: string
+  toAmount?: string
+  toChainId?: number
+  toToken?: string
+  toCalldata?: string
+}
+
+export const Fund: React.FC<FundProps> = ({
+  onBack,
+  account,
+  walletClient,
+  onTransactionStateChange,
+  onError,
+  onWaitingForWalletConfirm,
+  onConfirm,
+  onComplete,
+  onSend,
+  paymasterUrls,
+  gasless,
+  setWalletConfirmRetryHandler,
+  quoteProvider,
+  fundMethod,
+  onNavigateToMeshConnect,
+  checkoutOnHandlers,
+  recentTokens,
+  onRecentTokenSelect,
+  onTrackToken,
+  toRecipient,
+  toChainId,
+  toToken,
+  toCalldata,
+}) => {
+  const { mode } = useMode()
+  const { isBalanceVisible } = useBalanceVisible()
+  const { selectedToken: originToken, setSelectedToken: setOriginToken } =
+    useOriginSelectedToken()
+  const {
+    selectedToken: globalDestinationToken,
+    setSelectedToken: setDestinationToken,
+  } = useDestinationSelectedToken()
+  const { selectedRecipient, setSelectedRecipient } = useSelectedRecipient()
+  const { amount: globalAmount, setAmount: setGlobalAmount } = useSwapAmount()
+  const { setCurrentScreen } = useCurrentScreen()
+
+  // Use new default token selection hook
+  const {
+    defaultOriginToken,
+    defaultDestinationToken,
+    isLoading: isLoadingDefaults,
+  } = useDefaultTokenSelection()
+
+  // Local state for fund-specific functionality
+  const [isInputTypeUsd, setIsInputTypeUsd] = useState(false)
+  const [tokenAmountForBackend, setTokenAmountForBackend] = useState("")
+  const [inputDisplayValue, setInputDisplayValue] = useState("")
+  const [showOriginTokenSelector, setShowOriginTokenSelector] = useState(false)
+  const [showDestinationTokenSelector, setShowDestinationTokenSelector] =
+    useState(false)
+  const [showOriginChainList, setShowOriginChainList] = useState(false)
+  const [showDestinationChainList, setShowDestinationChainList] =
+    useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  // Use useSendForm for quote functionality
+  const {
+    amountUsdDisplay,
+    balanceFormatted,
+    isLoadingQuote,
+    prepareSendQuote,
+    setAmount: setSendFormAmount,
+    handleSubmit,
+    isSubmitting,
+    buttonText,
+    isValidRecipient,
+    selectedDestToken,
+    setSelectedDestToken,
+    setSelectedDestinationChain,
+    quoteError,
+    quoteErrorPrettified,
+    isSameTokenWithoutCustomCalldata,
+    destinationTokenAddress,
+    isValidCustomToken,
+    isSenderContractOnOrigin,
+    isSenderContractOnDestination,
+  } = useSendForm({
+    account,
+    toAmount: undefined, // Don't pass toAmount for fund form - user enters input amount
+    toRecipient: selectedRecipient || account.address,
+    toChainId,
+    toToken,
+    toCalldata,
+    walletClient,
+    onTransactionStateChange,
+    onError,
+    onWaitingForWalletConfirm,
+    paymasterUrls,
+    gasless,
+    onConfirm,
+    onComplete,
+    onSend,
+    selectedToken: originToken as any,
+    setWalletConfirmRetryHandler,
+    tradeType: TradeType.EXACT_INPUT,
+    quoteProvider,
+    fundMethod,
+    mode,
+    onNavigateToMeshConnect,
+    checkoutOnHandlers,
+  })
+
+  // Auto-select origin and destination tokens using new hook
+  useEffect(() => {
+    if (!originToken && !isLoadingDefaults && defaultOriginToken) {
+      logger.console.log(
+        "[trails-sdk] Auto-selecting origin token:",
+        defaultOriginToken,
+      )
+      setOriginToken(defaultOriginToken as any)
+    }
+  }, [originToken, isLoadingDefaults, defaultOriginToken, setOriginToken])
+
+  // Auto-select destination token using new hook
+  useEffect(() => {
+    if (
+      !globalDestinationToken &&
+      !toToken &&
+      originToken &&
+      !isLoadingDefaults &&
+      defaultDestinationToken
+    ) {
+      logger.console.log(
+        "[trails-sdk] Auto-selecting destination token:",
+        defaultDestinationToken,
+      )
+
+      const decimals =
+        defaultDestinationToken.contractInfo?.decimals ??
+        (defaultDestinationToken as any)?.decimals
+
+      setDestinationToken(defaultDestinationToken as any)
+      setSelectedDestToken({
+        symbol: defaultDestinationToken.symbol,
+        name: defaultDestinationToken.name,
+        imageUrl: defaultDestinationToken.imageUrl,
+        decimals,
+      })
+
+      // Also set the destination chain
+      if (setSelectedDestinationChain) {
+        const chainInfo = getChainInfo(defaultDestinationToken.chainId)
+        if (chainInfo) {
+          setSelectedDestinationChain(chainInfo)
+        }
+      }
+    }
+  }, [
+    originToken,
+    globalDestinationToken,
+    toToken,
+    isLoadingDefaults,
+    defaultDestinationToken,
+    setDestinationToken,
+    setSelectedDestToken,
+    setSelectedDestinationChain,
+  ])
+
+  // Initialize selected recipient from toRecipient prop or default to connected wallet
+  useEffect(() => {
+    if (toRecipient && !selectedRecipient) {
+      setSelectedRecipient(toRecipient)
+    } else if (!selectedRecipient && account?.address) {
+      // Default to connected wallet address if no recipient is set
+      setSelectedRecipient(account.address)
+    }
+  }, [toRecipient, selectedRecipient, setSelectedRecipient, account?.address])
+
+  // Sync global destination token with useSendForm
+  useEffect(() => {
+    if (globalDestinationToken && selectedDestToken && !toToken) {
+      const decimals =
+        globalDestinationToken.contractInfo?.decimals ??
+        (globalDestinationToken as any)?.decimals
+
+      // Convert global token format to useSendForm format
+      const formattedToken = {
+        symbol: globalDestinationToken.symbol,
+        name: globalDestinationToken.name,
+        imageUrl: globalDestinationToken.imageUrl,
+        decimals,
+      }
+
+      // Only update if the tokens are different (to avoid infinite loops)
+      if (selectedDestToken.symbol !== formattedToken.symbol) {
+        logger.console.log(
+          "[trails-sdk] Restoring destination token from global state:",
+          formattedToken,
+        )
+        setSelectedDestToken(formattedToken)
+
+        // Also update destination chain to match the selected token's chain
+        if (setSelectedDestinationChain && globalDestinationToken.chainId) {
+          const chainInfo = getChainInfo(globalDestinationToken.chainId)
+          if (chainInfo) {
+            setSelectedDestinationChain(chainInfo)
+          }
+        }
+      }
+    }
+  }, [
+    globalDestinationToken,
+    selectedDestToken,
+    setSelectedDestToken,
+    setSelectedDestinationChain,
+    toToken,
+  ])
+
+  // Force restore global destination token on mount (runs after useSendForm initialization)
+  useEffect(() => {
+    if (globalDestinationToken && !toToken) {
+      const decimals =
+        globalDestinationToken.contractInfo?.decimals ??
+        (globalDestinationToken as any)?.decimals
+
+      const timeoutId = setTimeout(() => {
+        const formattedToken = {
+          symbol: globalDestinationToken.symbol,
+          name: globalDestinationToken.name,
+          imageUrl: globalDestinationToken.imageUrl,
+          decimals,
+        }
+        logger.console.log(
+          "[trails-sdk] Force restoring destination token on mount:",
+          formattedToken,
+        )
+        setSelectedDestToken(formattedToken)
+
+        if (setSelectedDestinationChain && globalDestinationToken.chainId) {
+          const chainInfo = getChainInfo(globalDestinationToken.chainId)
+          if (chainInfo) {
+            setSelectedDestinationChain(chainInfo)
+          }
+        }
+      }, 50)
+
+      return () => clearTimeout(timeoutId)
+    }
+  }, [
+    globalDestinationToken,
+    setSelectedDestToken,
+    setSelectedDestinationChain,
+    toToken,
+  ])
+
+  // Initialize local amount states from global amount
+  useEffect(() => {
+    if (globalAmount && !tokenAmountForBackend && !inputDisplayValue) {
+      logger.console.log(
+        "[trails-sdk] Restoring amount from global state:",
+        globalAmount,
+      )
+      setTokenAmountForBackend(globalAmount)
+      setInputDisplayValue(globalAmount)
+      setSendFormAmount(globalAmount)
+    }
+  }, [
+    globalAmount,
+    tokenAmountForBackend,
+    inputDisplayValue,
+    setSendFormAmount,
+  ])
+
+  // Debug logging for component mount
+  useEffect(() => {
+    logger.console.log("[trails-sdk] Fund component mounted/updated", {
+      originToken: originToken?.symbol,
+      originChainId: originToken?.chainId,
+      globalDestinationToken: globalDestinationToken?.symbol,
+      globalDestinationChainId: globalDestinationToken?.chainId,
+      selectedDestToken: selectedDestToken?.symbol,
+      toChainId,
+      globalAmount,
+      tokenAmountForBackend,
+    })
+  }, [
+    originToken,
+    globalDestinationToken,
+    selectedDestToken,
+    globalAmount,
+    tokenAmountForBackend,
+    toChainId,
+  ])
+
+  // Auto-focus input field on component mount
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      if (inputRef.current) {
+        inputRef.current.focus()
+      }
+    }, 100)
+
+    return () => clearTimeout(timer)
+  }, [])
+
+  // Get source token price for USD conversions
+  const sourceTokenPrice = (originToken as any)?.tokenPriceUsd || 0
+
+  // Sync display value with token amount only when mode changes (not during typing)
+  const [lastInputMode, setLastInputMode] = useState(isInputTypeUsd)
+
+  useEffect(() => {
+    // Only sync when mode actually changes, not during normal typing
+    if (lastInputMode !== isInputTypeUsd && tokenAmountForBackend) {
+      const tokenAmount = parseFloat(tokenAmountForBackend) || 0
+      if (isInputTypeUsd && sourceTokenPrice > 0) {
+        // Show USD with max 2 decimals
+        const usdAmount = tokenAmount * sourceTokenPrice
+        setInputDisplayValue(Number(usdAmount.toFixed(2)).toString())
+      } else {
+        // Show token with max 8 decimals
+        setInputDisplayValue(Number(tokenAmount.toFixed(8)).toString())
+      }
+      setLastInputMode(isInputTypeUsd)
+    }
+  }, [isInputTypeUsd, sourceTokenPrice, tokenAmountForBackend, lastInputMode])
+
+  // Handle input amount changes with 8 decimal limit and 16 char total limit
+  const handleAmountChange = useCallback(
+    (value: string) => {
+      // Allow empty string
+      if (value === "") {
+        setInputDisplayValue("")
+        setTokenAmountForBackend("")
+        setSendFormAmount("")
+        setGlobalAmount("")
+        return
+      }
+
+      // Limit total length to 16 characters
+      if (value.length > 16) {
+        return
+      }
+
+      // Validate decimal places (max 8 decimals) and allow single decimal point
+      const decimalMatch = value.match(/^\d*\.?\d{0,8}$/)
+      if (!decimalMatch) {
+        return // Don't update if invalid format
+      }
+
+      // Store the display value
+      setInputDisplayValue(value)
+
+      // Update the token amount for backend and useSendForm
+      if (isInputTypeUsd && sourceTokenPrice > 0) {
+        const usdAmount = parseFloat(value) || 0
+        const tokenAmount = usdAmount / sourceTokenPrice
+        const tokenAmountStr = tokenAmount.toString()
+        setTokenAmountForBackend(tokenAmountStr)
+        setSendFormAmount(tokenAmountStr)
+        setGlobalAmount(tokenAmountStr)
+      } else {
+        setTokenAmountForBackend(value)
+        setSendFormAmount(value)
+        setGlobalAmount(value)
+      }
+    },
+    [setSendFormAmount, isInputTypeUsd, sourceTokenPrice, setGlobalAmount],
+  )
+
+  // Get display values based on input type
+  const displayAmount = useMemo(() => {
+    return inputDisplayValue
+  }, [inputDisplayValue])
+
+  const displayUsdValue = useMemo(() => {
+    if (isInputTypeUsd && sourceTokenPrice > 0) {
+      // Show token amount when in USD mode
+      const tokenAmount = parseFloat(tokenAmountForBackend) || 0
+      return `${tokenAmount.toFixed(8)} ${originToken?.symbol || "TOKEN"}`
+    }
+    return amountUsdDisplay || "$0.00"
+  }, [
+    tokenAmountForBackend,
+    isInputTypeUsd,
+    sourceTokenPrice,
+    originToken?.symbol,
+    amountUsdDisplay,
+  ])
+
+  // Handle percentage clicks for quick amounts
+  const handlePercentageClick = useCallback(
+    (percentage: number) => {
+      if (!balanceFormatted) {
+        return
+      }
+
+      const balance = parseFloat(balanceFormatted)
+      if (Number.isNaN(balance)) return
+
+      const amount = (balance * percentage) / 100
+      // Cap decimals to 8 places
+      const cappedAmount = parseFloat(amount.toFixed(8))
+      const tokenAmountStr = cappedAmount.toString()
+
+      // Update all states consistently
+      setTokenAmountForBackend(tokenAmountStr)
+      setSendFormAmount(tokenAmountStr)
+      setGlobalAmount(tokenAmountStr)
+
+      // Update display based on current mode
+      if (isInputTypeUsd && sourceTokenPrice > 0) {
+        const usdAmount = cappedAmount * sourceTokenPrice
+        setInputDisplayValue(Number(usdAmount.toFixed(2)).toString())
+      } else {
+        setInputDisplayValue(tokenAmountStr)
+      }
+    },
+    [
+      balanceFormatted,
+      setSendFormAmount,
+      isInputTypeUsd,
+      sourceTokenPrice,
+      setGlobalAmount,
+    ],
+  )
+
+  // Handle input type toggle (USD ↔ Token)
+  const handleInputTypeToggle = useCallback(() => {
+    // Use tokenAmountForBackend as the source of truth for conversion
+    const currentTokenAmount = parseFloat(tokenAmountForBackend) || 0
+
+    if (isInputTypeUsd && sourceTokenPrice > 0) {
+      // Switching from USD to token mode
+      // Display the token amount (limit to 8 decimals)
+      const tokenAmountStr = Number(currentTokenAmount.toFixed(8)).toString()
+      setInputDisplayValue(tokenAmountStr)
+    } else if (!isInputTypeUsd && sourceTokenPrice > 0) {
+      // Switching from token to USD mode
+      // Display USD amount (limit to 2 decimals)
+      const usdAmount = currentTokenAmount * sourceTokenPrice
+      const usdAmountStr = Number(usdAmount.toFixed(2)).toString()
+      setInputDisplayValue(usdAmountStr)
+    }
+
+    // Toggle the mode
+    setIsInputTypeUsd(!isInputTypeUsd)
+
+    // Focus the input field after toggling
+    setTimeout(() => {
+      if (inputRef.current) {
+        inputRef.current.focus()
+        // Select all text for easy replacement
+        inputRef.current.select()
+      }
+    }, 0)
+  }, [tokenAmountForBackend, isInputTypeUsd, sourceTokenPrice])
+
+  // Dynamic font size based on input length - matching Earn.tsx
+  const inputStyles = useMemo(() => {
+    const inputLength = displayAmount.length
+    let fontSize: string
+
+    if (inputLength > 12) {
+      fontSize = "0.875rem"
+    } else if (inputLength > 9) {
+      fontSize = "1rem"
+    } else if (inputLength > 6) {
+      fontSize = "1.125rem"
+    } else if (inputLength > 3) {
+      fontSize = "1.25rem"
+    } else {
+      fontSize = "1.5rem"
+    }
+
+    return {
+      fontSize,
+      transition: "all 0.1s ease-in-out",
+    }
+  }, [displayAmount.length])
+
+  const handleOriginTokenSelect = useCallback(
+    (token: any) => {
+      const formattedToken = {
+        ...token,
+        decimals: token.contractInfo?.decimals || token.decimals,
+        contractInfo: {
+          decimals: token.contractInfo?.decimals || token.decimals,
+          contractAddress: token.contractAddress,
+          symbol: token.symbol,
+          name: token.name,
+        },
+      } as any
+      setOriginToken(formattedToken)
+      logger.console.log("[trails-sdk] selected origin token", token)
+      setShowOriginTokenSelector(false)
+      // Track the token selection
+      onTrackToken?.(token)
+    },
+    [setOriginToken, onTrackToken],
+  )
+
+  const handleDestinationTokenSelect = useCallback(
+    (token: any) => {
+      const formattedToken = {
+        ...token,
+        decimals: token.contractInfo?.decimals || token.decimals,
+        contractInfo: {
+          decimals: token.contractInfo?.decimals || token.decimals,
+          contractAddress: token.contractAddress,
+          symbol: token.symbol,
+          name: token.name,
+        },
+      }
+
+      // Update both global destination token state and useSendForm state
+      setDestinationToken(formattedToken as any)
+      setSelectedDestToken(formattedToken as any)
+
+      // Update destination chain to match the selected token's chain
+      if (setSelectedDestinationChain && token.chainId) {
+        const chainInfo = getChainInfo(token.chainId)
+        if (chainInfo) {
+          setSelectedDestinationChain(chainInfo)
+        }
+      }
+
+      setShowDestinationTokenSelector(false)
+      logger.console.log("[trails-sdk] selected destination token", token)
+      // Track the token selection
+      onTrackToken?.(token)
+    },
+    [
+      setDestinationToken,
+      setSelectedDestToken,
+      setSelectedDestinationChain,
+      onTrackToken,
+    ],
+  )
+
+  // Show origin chain list screen
+  if (showOriginChainList) {
+    return (
+      <ChainList
+        onBack={() => {
+          setShowOriginChainList(false)
+          setShowOriginTokenSelector(true)
+        }}
+      />
+    )
+  }
+
+  // Show destination chain list screen
+  if (showDestinationChainList) {
+    return (
+      <ChainList
+        onBack={() => {
+          setShowDestinationChainList(false)
+          setShowDestinationTokenSelector(true)
+        }}
+      />
+    )
+  }
+
+  // Show origin token selector screen
+  if (showOriginTokenSelector) {
+    return (
+      <div className="space-y-2">
+        <ScreenHeader
+          onBack={() => setShowOriginTokenSelector(false)}
+          headerContent="Select From Token"
+          headerContentAlign="left"
+          showAccountActions={true}
+        />
+        <TokenSelector
+          onTokenSelect={handleOriginTokenSelect}
+          onError={onError}
+          fundMethod={fundMethod}
+          showContinueButton={false}
+          compactMode={false}
+          recentTokens={recentTokens}
+          onRecentTokenSelect={(token) => {
+            const formattedToken = {
+              ...token,
+              decimals: token.decimals,
+              contractInfo: {
+                decimals: token.decimals,
+                contractAddress: token.contractAddress,
+                symbol: token.symbol,
+                name: token.name,
+              },
+            } as any
+            setOriginToken(formattedToken)
+            setShowOriginTokenSelector(false)
+            onRecentTokenSelect?.(token)
+          }}
+          allSupportedTokens={false}
+          chainListScreen={true}
+          onNavigateToChainList={() => {
+            setShowOriginTokenSelector(false)
+            setShowOriginChainList(true)
+          }}
+        />
+      </div>
+    )
+  }
+
+  // Show destination token selector screen
+  if (showDestinationTokenSelector) {
+    return (
+      <div className="space-y-2">
+        <ScreenHeader
+          onBack={() => setShowDestinationTokenSelector(false)}
+          headerContent="Select To Token"
+          headerContentAlign="left"
+          showAccountActions={true}
+        />
+        <TokenSelector
+          onTokenSelect={handleDestinationTokenSelect}
+          onError={onError}
+          fundMethod={fundMethod}
+          showContinueButton={false}
+          compactMode={false}
+          recentTokens={recentTokens}
+          onRecentTokenSelect={(token) => {
+            const formattedToken = {
+              ...token,
+              decimals: token.decimals,
+              contractInfo: {
+                decimals: token.decimals,
+                contractAddress: token.contractAddress,
+                symbol: token.symbol,
+                name: token.name,
+              },
+            } as any
+            setDestinationToken(formattedToken)
+            setSelectedDestToken(formattedToken)
+            setShowDestinationTokenSelector(false)
+            onRecentTokenSelect?.(token)
+          }}
+          allSupportedTokens={true}
+          chainListScreen={true}
+          onNavigateToChainList={() => {
+            setShowDestinationTokenSelector(false)
+            setShowDestinationChainList(true)
+          }}
+        />
+      </div>
+    )
+  }
+
+  if (!originToken) {
+    return (
+      <div className="space-y-2">
+        <ScreenHeader
+          onBack={onBack}
+          headerContent="Fund"
+          headerContentAlign="left"
+          showAccountActions={true}
+        />
+
+        <div className="space-y-2">
+          {/* Token Selector */}
+          <div className="relative">
+            <button
+              type="button"
+              onClick={() => setShowOriginTokenSelector(true)}
+              className="w-full flex items-center justify-between space-x-3 trails-bg-secondary trails-hover-bg trails-border-radius-list-button px-4 py-2 transition-all duration-200 cursor-pointer"
+            >
+              <div className="flex items-center space-x-3 flex-1">
+                <div className="w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
+                  <Search className="w-4 h-4 text-gray-400" />
+                </div>
+                <div className="text-left flex-1">
+                  <div className="font-medium text-gray-900 dark:text-white text-sm">
+                    From token
+                  </div>
+                  <div className="text-xs trails-text-muted">Select token</div>
+                </div>
+              </div>
+              <ChevronRight className="w-4 h-4 trails-text-muted flex-shrink-0" />
+            </button>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="space-y-1">
+      <ScreenHeader
+        onBack={onBack}
+        headerContent="Fund"
+        headerContentAlign="left"
+        showAccountActions={true}
+      />
+
+      <div className="space-y-1">
+        {/* Origin Amount Input Section */}
+        <div className="trails-bg-secondary trails-bg-secondary-hover trails-border-radius-container p-3 group transition-all duration-200 border border-transparent focus-within:!bg-white dark:focus-within:!bg-gray-800 focus-within:border-gray-400 dark:focus-within:border-gray-500">
+          {/* Deposit Label and Percentage Buttons */}
+          <div className="flex justify-between items-center mb-2">
+            <div className="text-sm font-medium trails-text-secondary text-left">
+              Deposit
+            </div>
+
+            {/* Percentage Buttons */}
+            {originToken && (
+              <div className="flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
+                <button
+                  type="button"
+                  onClick={() => handlePercentageClick(25)}
+                  className="py-1 px-2 text-xs font-medium trails-border-radius-container border border-solid transition-colors cursor-pointer border-gray-300 text-gray-600 dark:border-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:trails-hover-bg hover:border-gray-400 dark:hover:border-gray-500"
+                >
+                  25%
+                </button>
+                <button
+                  type="button"
+                  onClick={() => handlePercentageClick(50)}
+                  className="py-1 px-2 text-xs font-medium trails-border-radius-container border border-solid transition-colors cursor-pointer border-gray-300 text-gray-600 dark:border-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:trails-hover-bg hover:border-gray-400 dark:hover:border-gray-500"
+                >
+                  50%
+                </button>
+                <button
+                  type="button"
+                  onClick={() => handlePercentageClick(75)}
+                  className="py-1 px-2 text-xs font-medium trails-border-radius-container border border-solid transition-colors cursor-pointer border-gray-300 text-gray-600 dark:border-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:trails-hover-bg hover:border-gray-400 dark:hover:border-gray-500"
+                >
+                  75%
+                </button>
+                <button
+                  type="button"
+                  onClick={() => handlePercentageClick(100)}
+                  className="py-1 px-2 text-xs font-medium trails-border-radius-container border border-solid transition-colors cursor-pointer border-gray-300 text-gray-600 dark:border-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:trails-hover-bg hover:border-gray-400 dark:hover:border-gray-500"
+                >
+                  Max
+                </button>
+              </div>
+            )}
+          </div>
+
+          <div className="flex items-center space-x-2">
+            {/* Amount Input */}
+            <div className="flex-1">
+              <div className="flex items-center justify-start">
+                <div className="flex items-center">
+                  <input
+                    ref={inputRef}
+                    type="text"
+                    value={displayAmount}
+                    onChange={(e) => handleAmountChange(e.target.value)}
+                    placeholder="0"
+                    className={`bg-transparent border-none outline-none font-bold text-left trails-text-primary placeholder-trails-text-primary ${
+                      isLoadingQuote ? "animate-pulse" : ""
+                    }`}
+                    style={{
+                      fontSize: inputStyles.fontSize,
+                      width: `${Math.max((displayAmount || "0").length, 1)}ch`,
+                      minWidth: "1ch",
+                      maxWidth: "270px",
+                      padding: "0",
+                      margin: "0",
+                      transition: "all 0.1s ease-in-out",
+                    }}
+                    inputMode="decimal"
+                  />
+                  <span
+                    className="font-bold text-gray-400 dark:text-gray-500"
+                    style={{
+                      fontSize: inputStyles.fontSize,
+                      marginLeft: "0.1em",
+                      padding: "0",
+                      transition: "all 0.2s ease-in-out",
+                    }}
+                  >
+                    {isInputTypeUsd
+                      ? "USD"
+                      : originToken?.symbol.slice(0, 4) || ""}
+                  </span>
+                  {isLoadingQuote && (
+                    <div className="ml-2 animate-spin rounded-full h-4 w-4 border-solid border-b-2 trails-primary" />
+                  )}
+                </div>
+              </div>
+            </div>
+
+            {/* Token Selection Button */}
+            <button
+              type="button"
+              onClick={() => setShowOriginTokenSelector(true)}
+              className="flex items-center space-x-2 trails-bg-card hover:trails-hover-bg trails-border-radius-input px-2.5 py-1.5 border trails-border-primary transition-colors cursor-pointer"
+            >
+              {originToken ? (
+                <>
+                  <TokenImage
+                    symbol={originToken.symbol}
+                    imageUrl={originToken.imageUrl}
+                    chainId={originToken.chainId}
+                    size={20}
+                  />
+                  <span className="font-medium trails-text-primary text-sm">
+                    {originToken.symbol}
+                  </span>
+                  <ChevronDown className="w-3.5 h-3.5 trails-text-muted" />
+                </>
+              ) : (
+                <>
+                  <span className="font-medium trails-text-muted text-sm">
+                    Select Token
+                  </span>
+                  <ChevronDown className="w-3.5 h-3.5 trails-text-muted" />
+                </>
+              )}
+            </button>
+          </div>
+
+          {/* Bottom Info Row */}
+          <div className="mt-2 flex justify-between items-center">
+            {/* USD Amount */}
+            <div className="text-xs trails-text-muted">
+              {originToken?.symbol && displayAmount ? (
+                <>≈ {amountUsdDisplay || "$0.00"}</>
+              ) : (
+                <span>&nbsp;</span>
+              )}
+            </div>
+
+            {/* Origin Token Balance */}
+            <div className="text-xs trails-text-muted text-right">
+              {originToken ? (
+                <button
+                  type="button"
+                  className="text-xs trails-text-muted cursor-pointer hover:trails-hover-text transition-colors bg-transparent border-none p-0"
+                  onClick={() => handlePercentageClick(100)}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault()
+                      handlePercentageClick(100)
+                    }
+                  }}
+                  title="Click to use full balance"
+                >
+                  Balance:{" "}
+                  {isBalanceVisible
+                    ? `${balanceFormatted || "0.00"} ${originToken.symbol}`
+                    : "••••••"}
+                </button>
+              ) : (
+                <span>&nbsp;</span>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* USD Value Toggle */}
+        <div
+          className="flex items-center justify-start"
+          style={{ display: "none" }}
+        >
+          <button
+            type="button"
+            onClick={handleInputTypeToggle}
+            className="flex items-center justify-start gap-2 px-3 py-1.5 rounded-md transition-colors cursor-pointer text-blue-600 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-blue-700"
+            style={{ color: "#155DFC" }}
+          >
+            <svg
+              width="20"
+              height="21"
+              viewBox="0 0 20 21"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+              aria-label="Toggle between USD and token amount"
+            >
+              <title>Toggle between USD and token amount</title>
+              <path
+                d="M11.3879 14.7175V10.4181C11.3879 10.2209 11.4547 10.0554 11.5884 9.9217C11.7216 9.78848 11.8868 9.72187 12.0841 9.72187C12.2814 9.72187 12.4469 9.78848 12.5805 9.9217C12.7138 10.0554 12.7804 10.2209 12.7804 10.4181V14.7175L14.0859 13.412C14.2135 13.2844 14.3729 13.2175 14.5642 13.2115C14.7559 13.2059 14.9214 13.2728 15.0606 13.412C15.1999 13.5397 15.2725 13.6991 15.2785 13.8904C15.2841 14.0821 15.2173 14.2475 15.078 14.3868L12.5715 16.8933C12.5019 16.963 12.4264 17.0122 12.3452 17.0409C12.264 17.0702 12.1769 17.0848 12.0841 17.0848C11.9913 17.0848 11.9042 17.0702 11.823 17.0409C11.7418 17.0122 11.6664 16.963 11.5967 16.8933L9.09021 14.3868C8.96256 14.2592 8.89874 14.0997 8.89874 13.9085C8.89874 13.7168 8.96836 13.5513 9.10761 13.412C9.24687 13.2844 9.40933 13.2175 9.59499 13.2115C9.78066 13.2059 9.94312 13.2728 10.0824 13.412L11.3879 14.7175ZM7.21031 6.11874L5.90483 7.42422C5.75397 7.57508 5.58571 7.6447 5.40004 7.6331C5.21437 7.6215 5.05772 7.55187 4.93007 7.42422C4.79082 7.28497 4.72119 7.11949 4.72119 6.92779C4.72119 6.73655 4.78501 6.57711 4.91266 6.44946L7.41919 3.94294C7.48882 3.87331 7.56424 3.82388 7.64547 3.79463C7.7267 3.76585 7.81374 3.75146 7.90657 3.75146C7.9994 3.75146 8.08644 3.76585 8.16767 3.79463C8.2489 3.82388 8.32432 3.87331 8.39395 3.94294L10.9005 6.44946C11.0281 6.57711 11.0919 6.73957 11.0919 6.93684C11.0919 7.13412 11.0281 7.29658 10.9005 7.42422C10.7612 7.56347 10.596 7.6331 10.4047 7.6331C10.213 7.6331 10.0476 7.56347 9.90831 7.42422L8.60283 6.11874V10.4181C8.60283 10.6154 8.53622 10.7806 8.403 10.9139C8.26932 11.0475 8.10384 11.1144 7.90657 11.1144C7.7093 11.1144 7.54405 11.0475 7.41083 10.9139C7.27715 10.7806 7.21031 10.6154 7.21031 10.4181V6.11874Z"
+                fill="#155DFC"
+              />
+            </svg>
+            <div
+              className="text-sm font-extrabold leading-[130%]"
+              style={{ color: "#155DFC" }}
+            >
+              {isBalanceVisible ? displayUsdValue : "••••••"}
+            </div>
+          </button>
+        </div>
+
+        {/* Arrow Down Between Sections */}
+        <div className="relative">
+          <div className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 p-1.5 trails-border-radius-button trails-bg-tertiary transition-colors border-2 border-white dark:border-gray-800 z-1">
+            <ArrowDown
+              className="w-5 h-5 text-gray-900 dark:text-white"
+              strokeWidth={2.5}
+            />
+          </div>
+        </div>
+      </div>
+
+      {/* Destination Section */}
+      <div className="space-y-1 trails-bg-secondary trails-border-radius-container p-3">
+        {/* Recipient Button */}
+        <div className="relative">
+          {toRecipient ? (
+            /* Display only - recipient is fixed */
+            <div className="w-full flex items-center justify-between space-x-3 trails-bg-secondary trails-border-radius-list-button px-4 py-2">
+              <div className="text-left">
+                <div className="font-medium trails-text-primary text-sm">
+                  Recipient address
+                </div>
+              </div>
+              <div className="flex items-center space-x-2">
+                <div
+                  className="font-medium trails-text-primary text-sm"
+                  title={toRecipient}
+                >
+                  {truncateAddress(toRecipient)}
+                </div>
+                <Identicon
+                  value={toRecipient}
+                  size={24}
+                  className="flex-shrink-0"
+                />
+              </div>
+            </div>
+          ) : (
+            /* Interactive button - user can select recipient */
+            <button
+              type="button"
+              onClick={() => setCurrentScreen("recipients")}
+              className="w-full flex items-center justify-between space-x-3 hover:trails-hover-bg hover:bg-gray-50 dark:hover:bg-gray-700 trails-border-radius-list-button px-4 py-2 transition-all duration-200 cursor-pointer"
+            >
+              <div className="text-left">
+                <div className="font-medium trails-text-primary text-sm">
+                  Recipient address
+                </div>
+              </div>
+              <div className="flex items-center space-x-2">
+                {selectedRecipient ? (
+                  <>
+                    <div
+                      className="font-medium trails-text-primary text-sm"
+                      title={selectedRecipient}
+                    >
+                      {truncateAddress(selectedRecipient)}
+                    </div>
+                    <Identicon
+                      value={selectedRecipient}
+                      size={24}
+                      className="flex-shrink-0"
+                    />
+                  </>
+                ) : (
+                  <>
+                    <div className="font-medium text-gray-900 dark:text-white text-sm">
+                      Select address
+                    </div>
+                    <div className="w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
+                      <div className="w-4 h-4 rounded-full bg-gray-400 dark:bg-gray-500"></div>
+                    </div>
+                  </>
+                )}
+                <ChevronRight className="w-4 h-4 trails-text-muted flex-shrink-0" />
+              </div>
+            </button>
+          )}
+        </div>
+
+        {/* Destination Token Selector */}
+        <div className="relative">
+          {toToken ? (
+            /* Display only - destination token is fixed */
+            <div className="w-full flex items-center justify-between space-x-3 trails-bg-secondary trails-border-radius-list-button px-4 py-2">
+              <div className="text-left">
+                <div className="font-medium trails-text-primary text-sm whitespace-nowrap">
+                  Receiving amount
+                </div>
+              </div>
+              <div className="flex items-center space-x-2">
+                {selectedDestToken ? (
+                  <>
+                    <div className="font-medium trails-text-primary text-sm">
+                      {isLoadingQuote ? (
+                        <div className="h-4 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
+                      ) : prepareSendQuote?.destinationAmountFormatted ? (
+                        <span className="whitespace-nowrap">
+                          {prepareSendQuote.destinationAmountFormatted}{" "}
+                          {selectedDestToken.symbol}
+                        </span>
+                      ) : (
+                        ""
+                      )}
+                    </div>
+                    <TokenImage
+                      symbol={selectedDestToken.symbol}
+                      imageUrl={selectedDestToken.imageUrl}
+                      chainId={globalDestinationToken?.chainId || toChainId}
+                      size={24}
+                    />
+                  </>
+                ) : (
+                  <>
+                    <div className="font-medium text-gray-900 dark:text-white text-sm">
+                      Select token
+                    </div>
+                    <div className="w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
+                      <Search className="w-4 h-4 text-gray-400" />
+                    </div>
+                  </>
+                )}
+              </div>
+            </div>
+          ) : (
+            /* Interactive button - user can select destination token */
+            <button
+              type="button"
+              onClick={() => setShowDestinationTokenSelector(true)}
+              className="w-full flex items-center justify-between space-x-3 hover:trails-hover-bg hover:bg-gray-50 dark:hover:bg-gray-700 trails-border-radius-list-button px-4 py-2 transition-all duration-200 cursor-pointer"
+            >
+              <div className="text-left">
+                <div className="font-medium trails-text-primary text-sm whitespace-nowrap">
+                  Receiving amount
+                </div>
+              </div>
+
+              <div className="flex items-center space-x-2">
+                {selectedDestToken ? (
+                  <>
+                    <div className="font-medium trails-text-primary text-sm">
+                      {isLoadingQuote ? (
+                        <div className="h-4 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
+                      ) : prepareSendQuote?.destinationAmountFormatted ? (
+                        <span className="whitespace-nowrap">
+                          {prepareSendQuote.destinationAmountFormatted}{" "}
+                          {selectedDestToken.symbol}
+                        </span>
+                      ) : (
+                        ""
+                      )}
+                    </div>
+                    <TokenImage
+                      symbol={selectedDestToken.symbol}
+                      imageUrl={selectedDestToken.imageUrl}
+                      chainId={globalDestinationToken?.chainId || toChainId}
+                      size={24}
+                    />
+                  </>
+                ) : (
+                  <>
+                    <div className="font-medium text-gray-900 dark:text-white text-sm">
+                      Select token
+                    </div>
+                    <div className="w-6 h-6 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
+                      <Search className="w-4 h-4 text-gray-400" />
+                    </div>
+                  </>
+                )}
+                <ChevronRight className="w-4 h-4 trails-text-muted flex-shrink-0" />
+              </div>
+            </button>
+          )}
+        </div>
+      </div>
+
+      <div className="py-2"></div>
+
+      {/* Exchange/Contract Warning */}
+      <RefundWarning
+        fundMethod={fundMethod}
+        isSenderContractOnOrigin={isSenderContractOnOrigin}
+        isSenderContractOnDestination={isSenderContractOnDestination}
+      />
+
+      {/* Error Display */}
+
+      <ErrorDisplay
+        errorPrettified={quoteErrorPrettified}
+        error={quoteError}
+        severity="warning"
+      />
+
+      {prepareSendQuote?.noSufficientBalance ? (
+        <div className="px-2 py-3 rounded-lg bg-amber-500/10 border border-solid border-amber-500/30">
+          <div className="flex items-center space-x-2">
+            <svg
+              className="w-4 h-4 text-amber-500 flex-shrink-0"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+              />
+            </svg>
+            <p className="text-sm text-amber-600 dark:text-amber-400">
+              Insufficient balance to complete this transaction
+            </p>
+          </div>
+        </div>
+      ) : prepareSendQuote?.minimumNotMet ? (
+        <div className="px-2 py-3 rounded-lg bg-amber-500/10 border border-solid border-amber-500/30">
+          <div className="flex items-center space-x-2">
+            <svg
+              className="w-4 h-4 text-amber-500 flex-shrink-0"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+              aria-hidden="true"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z"
+              />
+            </svg>
+            <p className="text-sm text-amber-600 dark:text-amber-400">
+              Please enter an amount above{" "}
+              {formatUsdAmountDisplay(MINIMUM_USD_AMOUNT_FOR_SWAP)} otherwise
+              transfer may fail
+            </p>
+          </div>
+        </div>
+      ) : null}
+
+      {/* Fund Button */}
+      <form onSubmit={handleSubmit}>
+        <button
+          type="submit"
+          disabled={
+            !tokenAmountForBackend ||
+            parseFloat(tokenAmountForBackend) <= 0 ||
+            isSubmitting ||
+            isLoadingQuote ||
+            !isValidRecipient ||
+            !destinationTokenAddress ||
+            !isValidCustomToken ||
+            prepareSendQuote?.noSufficientBalance ||
+            isSameTokenWithoutCustomCalldata ||
+            !prepareSendQuote
+          }
+          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 ? (
+            <div className="flex items-center justify-center">
+              <Loader2 className="w-5 h-5 animate-spin mr-2" />
+              <span>{buttonText}</span>
+            </div>
+          ) : isSameTokenWithoutCustomCalldata ? (
+            "Select Different Tokens"
+          ) : prepareSendQuote?.noSufficientBalance ? (
+            "Insufficient Balance"
+          ) : !selectedRecipient ? (
+            "Select recipient address"
+          ) : !selectedDestToken ? (
+            "Select destination token"
+          ) : !tokenAmountForBackend ||
+            parseFloat(tokenAmountForBackend) <= 0 ? (
+            "Enter an amount"
+          ) : (
+            buttonText || "Fund"
+          )}
+        </button>
+      </form>
+
+      {/* Quote Details */}
+      {prepareSendQuote && (
+        <div className="space-y-2">
+          <QuoteDetails quote={prepareSendQuote} showContent={true} />
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default Fund