0xtrails 0.2.4 → 0.2.6

package/src/widget/components/SimpleSwap.tsx

@@ -1,983 +0,0 @@
-import type React from "react"
-import { useEffect, useRef, useState, useCallback, useMemo } from "react"
-import type { Account, WalletClient } from "viem"
-import { ChevronRight, ArrowDown, Loader2, Search } from "lucide-react"
-import { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
-import { useDestinationSelectedToken } from "../hooks/useDestinationSelectedToken.js"
-import { useBalanceVisible } from "../hooks/useBalanceVisible.js"
-import { useTokenList } from "../hooks/useTokenList.js"
-import { useRecentTokens } from "../hooks/useRecentTokens.js"
-import { useDefaultTokenSelection } from "../hooks/useDefaultTokenSelection.js" // Context version
-import { ScreenHeader } from "./ScreenHeader.js"
-import { TokenSelector } from "./TokenSelector.js"
-import { ChainList } from "./ChainList.js"
-import { TokenImage } from "./TokenImage.js"
-import { QuoteDetails } from "./QuoteDetails.js"
-import { ErrorDisplay } from "./ErrorDisplay.js"
-import { formatAmount, formatUsdAmountDisplay } from "../../tokenBalances.js"
-import { getChainInfo } from "../../chains.js"
-import { logger } from "../../logger.js"
-import { useSendForm } from "../hooks/useSendForm.js"
-import { TradeType } from "../../prepareSend.js"
-import type { TransactionState } from "../../transactions.js"
-import type { OnCompleteProps } from "../hooks/useSendForm.js"
-import type { CheckoutOnHandlers } from "../hooks/useCheckout.js"
-import { useMode } from "../hooks/useMode.js"
-
-interface SimpleSwapProps {
-  onBack?: () => void
-  account: Account
-  walletClient: WalletClient
-  onTransactionStateChange: (transactionStates: TransactionState[]) => void
-  onError: (error: Error | string | null) => void
-  onWaitingForWalletConfirm: (props: any) => 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
-  checkoutOnHandlers?: CheckoutOnHandlers
-  showHeader?: boolean
-  onTokenSelectorVisibilityChange?: (isVisible: boolean) => void
-}
-
-export const SimpleSwap: React.FC<SimpleSwapProps> = ({
-  onBack,
-  account,
-  walletClient,
-  onTransactionStateChange,
-  onError,
-  onWaitingForWalletConfirm,
-  onConfirm,
-  onComplete,
-  onSend,
-  paymasterUrls,
-  gasless,
-  setWalletConfirmRetryHandler,
-  quoteProvider,
-  fundMethod,
-  checkoutOnHandlers,
-  showHeader = true,
-  onTokenSelectorVisibilityChange,
-}) => {
-  const { mode } = useMode()
-  const { selectedToken, setSelectedToken } = useOriginSelectedToken()
-  const { setSelectedToken: setDestinationTokenFromHook } =
-    useDestinationSelectedToken()
-  const { isBalanceVisible } = useBalanceVisible()
-  const { recentTokens, addRecentToken } = useRecentTokens(account?.address)
-
-  // Use new default token selection hook
-  const { defaultOriginToken, isLoading: isLoadingDefaults } =
-    useDefaultTokenSelection()
-
-  // Get sorted tokens to auto-select the highest USD value token
-  const { filteredTokensFormatted } = useTokenList({
-    onContinue: () => {}, // Not used for auto-selection
-    onError: () => {}, // Not used for auto-selection
-    fundMethod: undefined,
-    allSupportedTokens: false,
-  })
-  const [isInputTypeUsd, setIsInputTypeUsd] = useState(false)
-  const [tokenAmountForBackend, setTokenAmountForBackend] = useState("")
-  const [inputDisplayValue, setInputDisplayValue] = useState("")
-  const [_destinationToken, setDestinationToken] = useState<any>(null)
-  const [showSourceTokenSelector, setShowSourceTokenSelector] = useState(false)
-  const [showDestinationTokenSelector, setShowDestinationTokenSelector] =
-    useState(false)
-  const [showSourceChainList, setShowSourceChainList] = useState(false)
-  const [showDestinationChainList, setShowDestinationChainList] =
-    useState(false)
-  const [showPercentageButtons, setShowPercentageButtons] = useState(false)
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  // Use the same useSendForm hook as Swap.tsx for real quote functionality
-  const {
-    amount,
-    amountUsdDisplay,
-    balanceFormatted,
-    handleSubmit,
-    isSubmitting,
-    isLoadingQuote,
-    selectedDestToken,
-    setAmount,
-    setSelectedDestToken,
-    setSelectedDestinationChain,
-    buttonText,
-    destinationTokenAddress,
-    isValidCustomToken,
-    prepareSendQuote,
-    quoteError,
-    quoteErrorPrettified,
-    isSameTokenWithoutCustomCalldata,
-  } = useSendForm({
-    account,
-    toAmount: undefined,
-    toRecipient: account.address,
-    toChainId: undefined, // Let the hook manage this internally
-    toToken: undefined, // Let the hook manage this internally
-    toCalldata: undefined,
-    walletClient,
-    onTransactionStateChange,
-    onError,
-    onWaitingForWalletConfirm,
-    paymasterUrls,
-    gasless,
-    onConfirm,
-    onComplete,
-    onSend,
-    selectedToken: selectedToken as any,
-    setWalletConfirmRetryHandler,
-    tradeType: TradeType.EXACT_INPUT,
-    quoteProvider,
-    fundMethod,
-    mode,
-    onNavigateToMeshConnect: undefined,
-    checkoutOnHandlers,
-  })
-
-  // Get real token prices from useSendForm (no more mock prices)
-  // The useSendForm hook provides real amountUsdDisplay
-
-  // Auto-select source token using new hook
-  useEffect(() => {
-    if (!selectedToken && !isLoadingDefaults && defaultOriginToken) {
-      logger.console.log(
-        "[trails-sdk] Auto-selecting source token:",
-        defaultOriginToken,
-      )
-      setSelectedToken(defaultOriginToken as any)
-
-      // Add to recent tokens
-      addRecentToken(defaultOriginToken as any)
-    }
-  }, [
-    selectedToken,
-    isLoadingDefaults,
-    defaultOriginToken,
-    setSelectedToken,
-    addRecentToken,
-  ])
-
-  // Auto-focus input field when selectedToken is available
-  useEffect(() => {
-    if (selectedToken && inputRef.current) {
-      inputRef.current.focus()
-    }
-  }, [selectedToken])
-
-  // Notify parent when token selector visibility changes
-  useEffect(() => {
-    const isTokenSelectorVisible =
-      showSourceTokenSelector ||
-      showDestinationTokenSelector ||
-      showSourceChainList ||
-      showDestinationChainList
-    onTokenSelectorVisibilityChange?.(isTokenSelectorVisible)
-  }, [
-    showSourceTokenSelector,
-    showDestinationTokenSelector,
-    showSourceChainList,
-    showDestinationChainList,
-    onTokenSelectorVisibilityChange,
-  ])
-
-  // 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) {
-        // Show USD with max 2 decimals - we'll calculate from amountUsdDisplay if available
-        // For now, just show the token amount since we don't have a reliable USD conversion
-        setInputDisplayValue(Number(tokenAmount.toFixed(8)).toString())
-      } else {
-        // Show token with max 8 decimals
-        setInputDisplayValue(Number(tokenAmount.toFixed(8)).toString())
-      }
-      setLastInputMode(isInputTypeUsd)
-    }
-  }, [isInputTypeUsd, 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("")
-        setAmount("")
-        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
-      const sourceTokenPrice = (selectedToken as any)?.tokenPriceUsd || 0
-
-      if (isInputTypeUsd && sourceTokenPrice > 0) {
-        // Convert USD input to token amount
-        const usdAmount = parseFloat(value) || 0
-        const tokenAmount = usdAmount / sourceTokenPrice
-        setTokenAmountForBackend(tokenAmount.toString())
-        setAmount(tokenAmount.toString())
-      } else {
-        // Direct token amount input
-        setTokenAmountForBackend(value)
-        setAmount(value)
-      }
-    },
-    [setAmount, isInputTypeUsd, selectedToken],
-  )
-
-  // Get display values based on input type
-  const displayAmount = useMemo(() => {
-    return inputDisplayValue
-  }, [inputDisplayValue])
-
-  const displayUsdValue = useMemo(() => {
-    const sourceTokenPrice = (selectedToken as any)?.tokenPriceUsd || 0
-
-    if (isInputTypeUsd && sourceTokenPrice > 0) {
-      // Show token amount when in USD mode
-      const tokenAmount = parseFloat(tokenAmountForBackend) || 0
-      return `${formatAmount(tokenAmount)} ${selectedToken?.symbol || "TOKEN"}`
-    }
-    // Show USD amount when in token mode
-    if (sourceTokenPrice > 0) {
-      const tokenAmount = parseFloat(tokenAmountForBackend) || 0
-      const usdAmount = tokenAmount * sourceTokenPrice
-      return formatUsdAmountDisplay(usdAmount)
-    }
-    return amountUsdDisplay || "$0.00"
-  }, [tokenAmountForBackend, isInputTypeUsd, selectedToken, 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)
-      setAmount(tokenAmountStr)
-
-      // Update display - always show token amount
-      setInputDisplayValue(tokenAmountStr)
-    },
-    [balanceFormatted, setAmount],
-  )
-
-  const handleMaxClick = useCallback(() => {
-    handlePercentageClick(100)
-  }, [handlePercentageClick])
-
-  // Handle source token selection from full-screen selector
-  const handleSourceTokenSelectorSelect = 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,
-        },
-      }
-      setSelectedToken(formattedToken)
-      setShowSourceTokenSelector(false)
-
-      // Add to recent tokens
-      addRecentToken(formattedToken)
-
-      logger.console.log(
-        "[trails-sdk] selected source token from selector in SimpleSwap",
-        token,
-      )
-    },
-    [setSelectedToken, addRecentToken],
-  )
-
-  // Handle destination token selection from full-screen selector
-  const handleDestinationTokenSelectorSelect = 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,
-        },
-      }
-      setDestinationToken(formattedToken)
-      setDestinationTokenFromHook(formattedToken as any)
-      setSelectedDestToken(formattedToken as any)
-
-      // Update destination chain to match the selected token's chain
-      // This is crucial for proper same-token detection in useSendForm
-      if (setSelectedDestinationChain && token.chainId) {
-        const chainInfo = getChainInfo(token.chainId)
-        if (chainInfo) {
-          setSelectedDestinationChain(chainInfo)
-        }
-      }
-
-      setShowDestinationTokenSelector(false)
-
-      // Add to recent tokens
-      addRecentToken(formattedToken)
-
-      logger.console.log(
-        "[trails-sdk] selected destination token from selector in SimpleSwap",
-        token,
-      )
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [
-      setSelectedDestToken,
-      setDestinationTokenFromHook,
-      setSelectedDestinationChain,
-      addRecentToken,
-    ],
-  )
-
-  // Handle token swap (reverse from/to tokens)
-  const handleTokenSwap = useCallback(() => {
-    if (selectedToken && selectedDestToken) {
-      const tempToken = selectedToken
-
-      // Find the destination token in the user's token list to get balance info
-      const destTokenWithBalance = filteredTokensFormatted?.find(
-        (token) =>
-          token.contractAddress ===
-            (selectedDestToken as any).contractAddress &&
-          token.chainId === (selectedDestToken as any).chainId,
-      )
-
-      // Create new source token (from destination) - use balance info if available
-      const newSourceToken = {
-        ...selectedDestToken,
-        // Preserve all important properties
-        imageUrl: (selectedDestToken as any).imageUrl,
-        chainId: (selectedDestToken as any).chainId,
-        contractAddress: (selectedDestToken as any).contractAddress,
-        contractInfo: (selectedDestToken as any).contractInfo,
-        // Use balance info from user's token list if available, otherwise keep existing
-        balanceUsdFormatted:
-          destTokenWithBalance?.balanceUsdFormatted ||
-          (selectedDestToken as any).balanceUsdFormatted ||
-          "$0.00",
-        balance:
-          destTokenWithBalance?.balance ||
-          (selectedDestToken as any).balance ||
-          "0",
-        tokenPriceUsd:
-          destTokenWithBalance?.tokenPriceUsd ||
-          (selectedDestToken as any).tokenPriceUsd ||
-          0,
-        balanceUsd:
-          destTokenWithBalance?.balanceUsd ||
-          (selectedDestToken as any).balanceUsd ||
-          "0",
-      }
-
-      const newDestToken = {
-        ...tempToken,
-        // Preserve all important properties that might be lost
-        imageUrl: (tempToken as any).imageUrl,
-        balanceUsdFormatted: (tempToken as any).balanceUsdFormatted,
-        balance: (tempToken as any).balance,
-        tokenPriceUsd: (tempToken as any).tokenPriceUsd,
-        balanceUsd: (tempToken as any).balanceUsd,
-        chainId: (tempToken as any).chainId,
-        contractAddress: (tempToken as any).contractAddress,
-        contractInfo: (tempToken as any).contractInfo,
-      }
-
-      setSelectedToken(newSourceToken as any)
-      setDestinationToken(newDestToken)
-      setDestinationTokenFromHook(newDestToken as any)
-      setSelectedDestToken(newDestToken as any)
-
-      // Update destination chain to match the swapped token's chain
-      if (setSelectedDestinationChain && newDestToken.chainId) {
-        const chainInfo = getChainInfo(newDestToken.chainId)
-        if (chainInfo) {
-          setSelectedDestinationChain(chainInfo)
-        }
-      }
-
-      // Add both tokens to recent tokens when swapping
-      addRecentToken(newSourceToken as any)
-      addRecentToken(newDestToken as any)
-      logger.console.log("[trails-sdk] swapped tokens in SimpleSwap", {
-        originalSource: tempToken,
-        originalDest: selectedDestToken,
-        destTokenWithBalance,
-        newSourceToken,
-        newDestToken,
-      })
-    }
-  }, [
-    selectedToken,
-    selectedDestToken,
-    setSelectedToken,
-    setSelectedDestToken,
-    setDestinationTokenFromHook,
-    filteredTokensFormatted,
-    setSelectedDestinationChain,
-    addRecentToken,
-  ])
-
-  // Handle recent token selection
-  const handleRecentTokenSelect = useCallback(
-    (token: any) => {
-      // For source token selection
-      if (showSourceTokenSelector) {
-        handleSourceTokenSelectorSelect(token)
-      }
-      // For destination token selection
-      else if (showDestinationTokenSelector) {
-        handleDestinationTokenSelectorSelect(token)
-      }
-    },
-    [
-      showSourceTokenSelector,
-      showDestinationTokenSelector,
-      handleSourceTokenSelectorSelect,
-      handleDestinationTokenSelectorSelect,
-    ],
-  )
-
-  // Handle input type toggle (USD vs Token)
-  const handleInputTypeToggle = useCallback(() => {
-    // Use tokenAmountForBackend as the source of truth for conversion
-    const currentTokenAmount = parseFloat(tokenAmountForBackend) || 0
-    const sourceTokenPrice = (selectedToken as any)?.tokenPriceUsd || 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)
-  }, [isInputTypeUsd, tokenAmountForBackend, selectedToken])
-
-  // Dynamic font size based on input length - matching Earn.tsx
-  const inputStyles = useMemo(() => {
-    const inputLength = displayAmount.length
-    let fontSize: string
-
-    if (inputLength > 12) {
-      fontSize = "1rem"
-    } else if (inputLength > 9) {
-      fontSize = "1.25rem"
-    } else if (inputLength > 6) {
-      fontSize = "1.5rem"
-    } else if (inputLength > 3) {
-      fontSize = "1.75rem"
-    } else {
-      fontSize = "2rem"
-    }
-
-    return {
-      fontSize,
-      transition: "all 0.1s ease-in-out",
-    }
-  }, [displayAmount.length])
-
-  logger.console.log("[trails-sdk] SimpleSwap", {
-    tokenAmountForBackend,
-    displayAmount,
-    isInputTypeUsd,
-    amountUsdDisplay,
-    selectedToken,
-  })
-
-  // Debug swap button disabled state
-  logger.console.log("[trails-sdk] SimpleSwap button state", {
-    amount,
-    isSubmitting,
-    destinationTokenAddress,
-    isValidCustomToken,
-    isLoadingQuote,
-    prepareSendQuote: !!prepareSendQuote,
-    noSufficientBalance: prepareSendQuote?.noSufficientBalance,
-    isSameTokenWithoutCustomCalldata,
-    selectedDestToken: !!selectedDestToken,
-    buttonDisabled:
-      !amount ||
-      isSubmitting ||
-      !destinationTokenAddress ||
-      !isValidCustomToken ||
-      isLoadingQuote ||
-      !prepareSendQuote ||
-      prepareSendQuote?.noSufficientBalance ||
-      isSameTokenWithoutCustomCalldata,
-  })
-
-  // 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">
-        {showHeader && (
-          <ScreenHeader
-            onBack={() => setShowSourceTokenSelector(false)}
-            headerContent="Select From Token"
-            headerContentAlign="left"
-          />
-        )}
-        <TokenSelector
-          onTokenSelect={handleSourceTokenSelectorSelect}
-          onError={onError}
-          showContinueButton={false}
-          compactMode={false}
-          allSupportedTokens={false}
-          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">
-        {showHeader && (
-          <ScreenHeader
-            onBack={() => setShowDestinationTokenSelector(false)}
-            headerContent="Select To Token"
-            headerContentAlign="left"
-          />
-        )}
-        <TokenSelector
-          onTokenSelect={handleDestinationTokenSelectorSelect}
-          onError={onError}
-          showContinueButton={false}
-          compactMode={false}
-          allSupportedTokens={true}
-          chainListScreen={true}
-          onNavigateToChainList={() => {
-            setShowDestinationTokenSelector(false)
-            setShowDestinationChainList(true)
-          }}
-          recentTokens={recentTokens}
-          onRecentTokenSelect={handleRecentTokenSelect}
-        />
-      </div>
-    )
-  }
-
-  if (!selectedToken) {
-    return (
-      <div className="space-y-2">
-        {showHeader && (
-          <ScreenHeader
-            onBack={onBack}
-            headerContent="Swap"
-            headerContentAlign="left"
-          />
-        )}
-
-        <div className="space-y-2">
-          {/* Token Selector */}
-          <div className="relative">
-            <button
-              type="button"
-              onClick={() => setShowSourceTokenSelector(true)}
-              className="w-full flex items-center justify-between space-x-3 trails-list-item 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-2">
-      {showHeader && (
-        <ScreenHeader
-          onBack={onBack}
-          headerContent="Swap"
-          headerContentAlign="left"
-        />
-      )}
-
-      <div className="space-y-1">
-        {/* Amount Input Section */}
-        <div className="space-y-1">
-          {/* Amount Input with Max Button */}
-          <div className="flex items-center justify-between relative px-4 py-2">
-            <div className="flex items-center flex-1">
-              <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"
-                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:
-                    displayAmount && displayAmount !== "0" ? "0.2em" : "0.3em",
-                  padding: "0",
-                  transition: "all 0.2s ease-in-out",
-                }}
-              >
-                {isInputTypeUsd ? "USD" : selectedToken.symbol.slice(0, 4)}
-              </span>
-            </div>
-
-            {/* Percentage Buttons */}
-            <div
-              className="flex items-center gap-1.5"
-              onMouseEnter={() => setShowPercentageButtons(true)}
-              onMouseLeave={() => setShowPercentageButtons(false)}
-            >
-              {showPercentageButtons && (
-                <>
-                  <button
-                    type="button"
-                    onClick={() => handlePercentageClick(25)}
-                    className="flex h-6 px-2 py-0.5 justify-center items-center rounded-full bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300 text-xs font-medium transition-all duration-200 hover:bg-gray-300 dark:hover:bg-gray-500 cursor-pointer animate-in slide-in-from-right-2 fade-in"
-                  >
-                    25%
-                  </button>
-                  <button
-                    type="button"
-                    onClick={() => handlePercentageClick(50)}
-                    className="flex h-6 px-2 py-0.5 justify-center items-center rounded-full bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300 text-xs font-medium transition-all duration-200 hover:bg-gray-300 dark:hover:bg-gray-500 cursor-pointer animate-in slide-in-from-right-2 fade-in"
-                  >
-                    50%
-                  </button>
-                </>
-              )}
-              <button
-                type="button"
-                onClick={handleMaxClick}
-                className="flex h-6 px-2 py-0.5 justify-center items-center rounded-full bg-gray-200 dark:bg-gray-600 text-gray-700 dark:text-gray-300 text-xs font-medium transition-all duration-200 hover:bg-gray-300 dark:hover:bg-gray-500 cursor-pointer"
-              >
-                MAX
-              </button>
-            </div>
-          </div>
-
-          {/* USD Value Toggle */}
-          <div className="flex items-center justify-start">
-            <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"
-              >
-                <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>
-        </div>
-
-        {/* Source Token Selector */}
-        <div className="relative">
-          <button
-            type="button"
-            onClick={() => setShowSourceTokenSelector(true)}
-            className="w-full flex items-center justify-between space-x-3 trails-list-item hover:scale-[1.01] 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">
-              {selectedToken ? (
-                <>
-                  <TokenImage
-                    symbol={selectedToken.symbol}
-                    imageUrl={selectedToken.imageUrl}
-                    chainId={selectedToken.chainId}
-                    size={24}
-                  />
-                  <div className="text-left flex-1">
-                    <div className="font-medium trails-text-primary text-sm">
-                      {selectedToken.symbol}
-                    </div>
-                    <div className="text-xs trails-text-muted">
-                      on{" "}
-                      {getChainInfo(selectedToken.chainId)?.name || "Unknown"}
-                    </div>
-                  </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 className="text-left flex-1">
-                    <div className="font-medium trails-text-muted text-sm">
-                      From
-                    </div>
-                    <div className="text-xs trails-text-muted">
-                      Select token
-                    </div>
-                  </div>
-                </>
-              )}
-            </div>
-
-            {selectedToken && balanceFormatted && (
-              <div className="text-right">
-                <div className="font-medium trails-text-primary text-sm">
-                  {isBalanceVisible
-                    ? (selectedToken as any).balanceUsdFormatted || "$0.00"
-                    : "••••••"}
-                </div>
-                <div className="text-xs trails-text-muted">available</div>
-              </div>
-            )}
-
-            <ChevronRight className="w-4 h-4 trails-text-muted flex-shrink-0" />
-          </button>
-        </div>
-
-        {/* Swap Button */}
-        <div className="flex justify-start py-0 pl-4">
-          <button
-            type="button"
-            onClick={handleTokenSwap}
-            className="transition-colors cursor-pointer rounded-full border-2 border-white dark:border-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700"
-            title="Swap tokens"
-            disabled={!selectedToken || !selectedDestToken}
-          >
-            <ArrowDown
-              className={`w-5 h-5 ${!selectedToken ? "text-gray-300 dark:text-gray-600" : "text-gray-900 dark:text-white"}`}
-              strokeWidth={2.5}
-            />
-          </button>
-        </div>
-
-        {/* Destination Token Selector */}
-        <div className="relative">
-          <button
-            type="button"
-            onClick={() => setShowDestinationTokenSelector(true)}
-            className="w-full flex items-center justify-between space-x-3 trails-list-item hover:scale-[1.01] 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">
-              {selectedDestToken ? (
-                <>
-                  <TokenImage
-                    symbol={selectedDestToken.symbol}
-                    imageUrl={selectedDestToken.imageUrl}
-                    chainId={(selectedDestToken as any)?.chainId}
-                    size={24}
-                  />
-                  <div className="text-left flex-1">
-                    <div className="font-medium trails-text-primary text-sm">
-                      {selectedDestToken.symbol}
-                    </div>
-                    <div className="text-xs trails-text-muted">
-                      on{" "}
-                      {getChainInfo((selectedDestToken as any)?.chainId)
-                        ?.name || "Unknown"}
-                    </div>
-                  </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 className="text-left flex-1">
-                    <div className="font-medium text-gray-900 dark:text-white text-sm">
-                      To
-                    </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>
-
-        {/* Error Display */}
-        {isSameTokenWithoutCustomCalldata ? (
-          <ErrorDisplay
-            errorPrettified="Cannot swap to the same token on the same chain without custom calldata. Please select a different destination token."
-            severity="error"
-          />
-        ) : (
-          <ErrorDisplay
-            errorPrettified={quoteErrorPrettified}
-            error={quoteError}
-            severity="warning"
-          />
-        )}
-
-        <div className="py-2"></div>
-
-        {/* Swap Button */}
-        <form onSubmit={handleSubmit}>
-          <button
-            type="submit"
-            disabled={
-              !amount ||
-              isSubmitting ||
-              !destinationTokenAddress ||
-              !isValidCustomToken ||
-              isLoadingQuote ||
-              !prepareSendQuote ||
-              prepareSendQuote?.noSufficientBalance ||
-              isSameTokenWithoutCustomCalldata
-            }
-            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"
-            ) : !selectedToken || !selectedDestToken ? (
-              "Select tokens to swap"
-            ) : !amount || parseFloat(amount) <= 0 ? (
-              "Enter an amount"
-            ) : (
-              buttonText ||
-              `Swap ${selectedToken.symbol} for ${selectedDestToken.symbol}`
-            )}
-          </button>
-        </form>
-
-        {/* Quote Details */}
-        {prepareSendQuote && (
-          <div className="space-y-2">
-            <QuoteDetails quote={prepareSendQuote} showContent={true} />
-          </div>
-        )}
-      </div>
-    </div>
-  )
-}
-
-export default SimpleSwap