0xtrails 0.1.13 → 0.2.0

package/src/widget/components/ClassicSwap.tsx

@@ -0,0 +1,923 @@
+import { ChevronDown, Loader2, ArrowDown } from "lucide-react"
+import type React from "react"
+import { useCallback, useEffect, useRef, useState, useMemo } from "react"
+import type { Account, WalletClient } from "viem"
+import type { TransactionState } from "../../transactions.js"
+import type { OnCompleteProps, Token } from "../hooks/useSendForm.js"
+import type { SupportedToken } from "../../tokens.js"
+import { useSendForm } from "../hooks/useSendForm.js"
+import type { CheckoutOnHandlers } from "../hooks/useCheckout.js"
+import { FeeOptions } from "./FeeOptions.js"
+import { TokenImage } from "./TokenImage.js"
+import { QuoteDetails } from "./QuoteDetails.js"
+import { type PrepareSendQuote, TradeType } from "../../prepareSend.js"
+import { getChainInfo } from "../../chains.js"
+import { formatUsdAmountDisplay } from "../../tokenBalances.js"
+import { MINIMUM_USD_AMOUNT_FOR_SWAP } from "../../constants.js"
+import { ScreenHeader } from "./ScreenHeader.js"
+import { TokenSelector } from "./TokenSelector.js"
+import { ErrorDisplay } from "./ErrorDisplay.js"
+import { useMode } from "../hooks/useMode.js"
+import { logger } from "../../logger.js"
+import { SwapSettings } from "./SwapSettings.js"
+import { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
+import { useDestinationSelectedToken } from "../hooks/useDestinationSelectedToken.js"
+import { useBalanceVisible } from "../hooks/useBalanceVisible.js"
+import { useDefaultTokenSelection } from "../hooks/useDefaultTokenSelection.js"
+
+interface ClassicSwapProps {
+  selectedToken: Token | null
+  onSend: (amount: string, recipient: string) => void
+  onBack?: () => void
+  onConfirm: () => void
+  onComplete: (result: OnCompleteProps) => void
+  account: Account
+  toRecipient?: string
+  toAmount?: string
+  toChainId?: number
+  toToken?: string
+  toCalldata?: string
+  walletClient: WalletClient
+  onTransactionStateChange: (transactionStates: TransactionState[]) => void
+  onError: (error: Error | string | null) => void
+  onWaitingForWalletConfirm: (props: PrepareSendQuote) => 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
+  onAmountUpdate?: (amount: string) => void
+  checkoutOnHandlers?: CheckoutOnHandlers
+  recentTokens?: SupportedToken[]
+  onRecentTokenSelect?: (token: SupportedToken) => void
+  onTrackToken?: (token: any) => void
+}
+
+export const ClassicSwap: React.FC<ClassicSwapProps> = ({
+  selectedToken: initialSelectedToken,
+  onSend,
+  onBack,
+  onConfirm,
+  onComplete,
+  account,
+  toAmount,
+  toChainId,
+  toToken,
+  toCalldata,
+  walletClient,
+  onTransactionStateChange,
+  onError,
+  onWaitingForWalletConfirm,
+  paymasterUrls,
+  gasless,
+  setWalletConfirmRetryHandler,
+  quoteProvider,
+  fundMethod,
+  onNavigateToMeshConnect,
+  onAmountUpdate,
+  checkoutOnHandlers,
+  recentTokens,
+  onRecentTokenSelect,
+  onTrackToken,
+}) => {
+  const { mode } = useMode()
+  const { isBalanceVisible } = useBalanceVisible()
+  const { selectedToken: originToken, setSelectedToken: setOriginToken } =
+    useOriginSelectedToken()
+  const {
+    selectedToken: destinationToken,
+    setSelectedToken: setDestinationToken,
+  } = useDestinationSelectedToken()
+  const [isFlipped, setIsFlipped] = useState(false)
+
+  // Use new default token selection hook
+  const {
+    defaultOriginToken,
+    defaultDestinationToken,
+    isLoading: isLoadingDefaults,
+  } = useDefaultTokenSelection()
+
+  const [originChainId, setOriginChainId] = useState<number | null | undefined>(
+    initialSelectedToken?.chainId || originToken?.chainId,
+  )
+  const [tradeType, setTradeType] = useState<TradeType>(TradeType.EXACT_INPUT)
+  const [sellAmount, setSellAmount] = useState("")
+  const [buyAmount, setBuyAmount] = useState("")
+  const [lastInputType, setLastInputType] = useState<"sell" | "buy">("sell")
+
+  const {
+    amount,
+    amountRaw,
+    amountUsdDisplay,
+    balanceFormatted,
+    handleSubmit,
+    isSubmitting,
+    isLoadingQuote,
+    isTokenDropdownOpen,
+    selectedDestinationChain,
+    selectedDestToken,
+    setAmount,
+    setSelectedDestinationChain,
+    setSelectedDestToken,
+    buttonText,
+    selectedFeeToken,
+    setSelectedFeeToken,
+    feeOptions,
+    setIsTokenDropdownOpen,
+    toAmountDisplay,
+    destinationTokenAddress,
+    isValidCustomToken,
+    prepareSendQuote,
+    quoteError,
+    quoteErrorPrettified,
+    isSameTokenWithoutCustomCalldata,
+  } = useSendForm({
+    account,
+    toAmount: tradeType === TradeType.EXACT_OUTPUT ? buyAmount : toAmount,
+    toRecipient: account.address,
+    toChainId,
+    toToken,
+    toCalldata,
+    walletClient,
+    onTransactionStateChange,
+    onError,
+    onWaitingForWalletConfirm,
+    paymasterUrls,
+    gasless,
+    onConfirm,
+    onComplete,
+    onSend,
+    selectedToken: originToken as any,
+    setWalletConfirmRetryHandler,
+    tradeType: tradeType,
+    quoteProvider,
+    fundMethod,
+    mode,
+    onNavigateToMeshConnect,
+    checkoutOnHandlers,
+  })
+
+  // Update amount based on last input type
+  useEffect(() => {
+    if (lastInputType === "sell") {
+      setAmount(sellAmount)
+    } else {
+      setAmount(buyAmount)
+    }
+  }, [sellAmount, buyAmount, lastInputType, setAmount])
+
+  // Handle sell amount input changes with decimal validation
+  const handleSellAmountChange = useCallback((value: string) => {
+    // Validate decimal places (max 8 decimals)
+    const decimalMatch = value.match(/^\d*\.?\d{0,8}$/)
+    if (!decimalMatch && value !== "") {
+      return // Don't update if more than 8 decimals
+    }
+    setTradeType(TradeType.EXACT_INPUT)
+    setSellAmount(value)
+    setBuyAmount("")
+    setLastInputType("sell")
+  }, [])
+
+  // Handle buy amount input changes with decimal validation
+  const handleBuyAmountChange = useCallback((value: string) => {
+    // Validate decimal places (max 8 decimals)
+    const decimalMatch = value.match(/^\d*\.?\d{0,8}$/)
+    if (!decimalMatch && value !== "") {
+      return // Don't update if more than 8 decimals
+    }
+    setTradeType(TradeType.EXACT_OUTPUT)
+    setBuyAmount(value)
+    setSellAmount("")
+    setLastInputType("buy")
+  }, [])
+
+  // Handle buy input focus - clear field when user wants to type
+  const handleBuyInputFocus = useCallback(() => {
+    // When focusing on buy field and it's in EXACT_INPUT mode (showing calculated value), switch to EXACT_OUTPUT mode
+    if (tradeType === TradeType.EXACT_INPUT && !buyAmount) {
+      setBuyAmount("")
+      setTradeType(TradeType.EXACT_OUTPUT)
+      setLastInputType("buy")
+    }
+  }, [tradeType, buyAmount])
+
+  // Update amounts when quote is received
+  useEffect(() => {
+    if (!prepareSendQuote) return
+
+    if (
+      tradeType === TradeType.EXACT_OUTPUT &&
+      prepareSendQuote.originAmountDisplay
+    ) {
+      setSellAmount(prepareSendQuote.originAmountDisplay)
+    } else if (
+      tradeType === TradeType.EXACT_INPUT &&
+      prepareSendQuote.destinationAmountDisplay
+    ) {
+      setBuyAmount(prepareSendQuote.destinationAmountDisplay)
+    }
+  }, [prepareSendQuote, tradeType])
+
+  // Handle percentage button clicks
+  const handlePercentageClick = useCallback(
+    (percentage: number) => {
+      if (!originToken || !balanceFormatted) return
+
+      // Parse the balance and calculate percentage
+      const balance = parseFloat(balanceFormatted)
+      if (Number.isNaN(balance)) return
+
+      const amount = (balance * percentage) / 100
+      setTradeType(TradeType.EXACT_INPUT)
+      setSellAmount(amount.toFixed(6))
+      setBuyAmount("")
+      setLastInputType("sell")
+    },
+    [originToken, balanceFormatted],
+  )
+
+  // Call onAmountUpdate when amountRaw changes
+  useEffect(() => {
+    if (onAmountUpdate) {
+      onAmountUpdate(amountRaw)
+    }
+  }, [amountRaw, onAmountUpdate])
+
+  // Auto-select origin token using new hook
+  useEffect(() => {
+    if (!originToken && !isLoadingDefaults && defaultOriginToken) {
+      logger.console.log(
+        "[trails-sdk] Auto-selecting origin token:",
+        defaultOriginToken,
+      )
+      setOriginToken(defaultOriginToken as any)
+      setOriginChainId(defaultOriginToken.chainId)
+    }
+  }, [originToken, isLoadingDefaults, defaultOriginToken, setOriginToken])
+
+  // Auto-select destination token using new hook
+  // Note: In swap mode, we still auto-select a destination even if toToken is provided,
+  // since the user needs a starting point to modify
+  useEffect(() => {
+    if (!destinationToken && !isLoadingDefaults && defaultDestinationToken) {
+      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,
+    isLoadingDefaults,
+    defaultDestinationToken,
+    setDestinationToken,
+    setSelectedDestToken,
+    setSelectedDestinationChain,
+  ])
+
+  // Auto-focus the input field when component mounts
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [])
+
+  const originTokenDropdownRef = useRef<HTMLDivElement>(null)
+  const tokenDropdownRef = useRef<HTMLInputElement>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const [isOriginTokenDropdownOpen, setIsOriginTokenDropdownOpen] =
+    useState(false)
+
+  useEffect(() => {
+    if (selectedDestToken) {
+      setSelectedDestinationChain(
+        getChainInfo((selectedDestToken as any)?.chainId as any) as any,
+      )
+    }
+  }, [selectedDestToken, setSelectedDestinationChain])
+
+  // 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(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        tokenDropdownRef.current &&
+        !tokenDropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsTokenDropdownOpen(false)
+      }
+      if (
+        originTokenDropdownRef.current &&
+        !originTokenDropdownRef.current.contains(event.target as Node)
+      ) {
+        setIsOriginTokenDropdownOpen(false)
+      }
+    }
+
+    if (isTokenDropdownOpen || isOriginTokenDropdownOpen) {
+      document.addEventListener("click", handleClickOutside)
+      return () => document.removeEventListener("click", handleClickOutside)
+    }
+  }, [isTokenDropdownOpen, isOriginTokenDropdownOpen, setIsTokenDropdownOpen])
+
+  // Handle flip functionality
+  const handleFlip = () => {
+    if (!selectedDestinationChain || !originToken || !selectedDestToken) return
+
+    setIsFlipped(!isFlipped)
+
+    // Store current values
+    const tempOriginToken = originToken
+    const tempOriginChainId = originChainId
+    const tempBuyAmount = buyAmount || toAmountDisplay || ""
+
+    // Swap origin and destination using hooks
+    setOriginToken(selectedDestToken as any)
+    setDestinationToken(tempOriginToken as any)
+    setOriginChainId((selectedDestToken as any)?.chainId as any)
+    setSelectedDestToken(tempOriginToken as any)
+
+    // Update destination chain
+    const newChain = getChainInfo(tempOriginChainId as any)
+    if (newChain) {
+      setSelectedDestinationChain(newChain)
+    }
+
+    // When flipping, always set the current visible amount as the new sell amount
+    if (tradeType === TradeType.EXACT_INPUT) {
+      // If we were in EXACT_INPUT, use the buy amount (from quote) as the new sell amount
+      setSellAmount(tempBuyAmount)
+      setBuyAmount("")
+      setTradeType(TradeType.EXACT_INPUT)
+      setLastInputType("sell")
+    } else {
+      // If we were in EXACT_OUTPUT, use the current buy amount as the new sell amount
+      setSellAmount(tempBuyAmount)
+      setBuyAmount("")
+      setTradeType(TradeType.EXACT_INPUT)
+      setLastInputType("sell")
+    }
+  }
+
+  // Dynamic font size based on input length - matching SimpleSwap.tsx
+  const sellInputStyles = useMemo(() => {
+    const inputLength = sellAmount.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",
+    }
+  }, [sellAmount.length])
+
+  const buyInputStyles = useMemo(() => {
+    const inputValue =
+      tradeType === TradeType.EXACT_OUTPUT ? buyAmount : toAmountDisplay || ""
+    const inputLength = inputValue.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",
+    }
+  }, [tradeType, buyAmount, toAmountDisplay])
+
+  return (
+    <div className="space-y-2">
+      <ScreenHeader
+        onBack={onBack}
+        headerContent="Swap"
+        headerContentAlign="left"
+        showAccountActions={true}
+        rightSideContent={<SwapSettings />}
+      />
+
+      <form onSubmit={handleSubmit} className="space-y-1">
+        {/* Input Section - Amount + Token Selection */}
+        <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 trails-focus-border-secondary min-h-[120px] flex flex-col">
+          {/* Sell Label and Percentage Buttons */}
+          <div className="flex justify-between items-center mb-2">
+            <div className="text-sm font-medium trails-text-secondary text-left">
+              Sell
+            </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 flex-1">
+            {/* Amount Input */}
+            <div className="flex-1">
+              <div className="flex items-center space-x-2">
+                <input
+                  ref={inputRef}
+                  id="amount"
+                  type="text"
+                  value={sellAmount}
+                  onChange={(e) => handleSellAmountChange(e.target.value)}
+                  placeholder={`0 ${originToken?.symbol || ""}`}
+                  className={`w-full bg-transparent font-bold trails-text-primary placeholder:trails-text-muted border-none outline-none ${
+                    isLoadingQuote && tradeType === TradeType.EXACT_OUTPUT
+                      ? "animate-pulse"
+                      : ""
+                  }`}
+                  style={sellInputStyles}
+                  readOnly={
+                    tradeType === TradeType.EXACT_OUTPUT && isLoadingQuote
+                  }
+                />
+                {isLoadingQuote && tradeType === TradeType.EXACT_OUTPUT && (
+                  <div className="animate-spin rounded-full h-4 w-4 border-solid border-b-2 trails-primary" />
+                )}
+              </div>
+            </div>
+
+            {/* Token Selection Button */}
+            <div className="relative" ref={originTokenDropdownRef}>
+              <button
+                type="button"
+                onClick={() =>
+                  setIsOriginTokenDropdownOpen(!isOriginTokenDropdownOpen)
+                }
+                className={`flex items-center space-x-2 trails-border-radius-input px-2.5 py-1.5 border transition-colors cursor-pointer ${
+                  originToken
+                    ? "trails-bg-card hover:trails-hover-bg trails-border-primary"
+                    : "bg-blue-500 hover:bg-blue-600 border-blue-500 text-white"
+                }`}
+              >
+                {originToken ? (
+                  <>
+                    <TokenImage
+                      symbol={originToken.symbol}
+                      imageUrl={originToken.imageUrl}
+                      chainId={originChainId}
+                      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 text-sm text-white">
+                      Select Token
+                    </span>
+                    <ChevronDown className="w-3.5 h-3.5 text-white" />
+                  </>
+                )}
+              </button>
+
+              {/* Token Selector Modal */}
+              {isOriginTokenDropdownOpen && (
+                <div className="absolute right-0 top-full mt-2 w-80 trails-bg-card rounded-lg shadow-lg border trails-border-primary max-h-80 overflow-hidden z-10 -translate-y-28">
+                  <div className="p-2">
+                    <TokenSelector
+                      onTokenSelect={(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,
+                        )
+                        setOriginChainId(token.chainId)
+                        setIsOriginTokenDropdownOpen(false)
+                        // Track the token selection
+                        onTrackToken?.(token)
+                      }}
+                      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)
+                        setOriginChainId(token.chainId)
+                        setIsOriginTokenDropdownOpen(false)
+                        onRecentTokenSelect?.(token)
+                      }}
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Bottom Info Row for sell */}
+          <div className="mt-2 flex justify-between items-center">
+            {/* USD Amount */}
+            {originToken?.symbol && (
+              <div className="text-xs trails-text-muted">
+                ≈{" "}
+                {tradeType === TradeType.EXACT_INPUT
+                  ? amountUsdDisplay || "$0.00"
+                  : isLoadingQuote
+                    ? "$0.00"
+                    : prepareSendQuote?.originAmountUsdDisplay || "$0.00"}
+              </div>
+            )}
+
+            {/* Origin Token Balance */}
+            {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={() => {
+                  if (balanceFormatted) {
+                    const balance = parseFloat(balanceFormatted)
+                    if (!Number.isNaN(balance)) {
+                      setTradeType(TradeType.EXACT_INPUT)
+                      setSellAmount(balance.toFixed(6))
+                      setBuyAmount("")
+                      setLastInputType("sell")
+                    }
+                  }
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" || e.key === " ") {
+                    e.preventDefault()
+                    if (balanceFormatted) {
+                      const balance = parseFloat(balanceFormatted)
+                      if (!Number.isNaN(balance)) {
+                        setTradeType(TradeType.EXACT_INPUT)
+                        setSellAmount(balance.toFixed(6))
+                        setBuyAmount("")
+                        setLastInputType("sell")
+                      }
+                    }
+                  }
+                }}
+                title="Click to use full balance"
+              >
+                Balance:{" "}
+                {isBalanceVisible
+                  ? `${balanceFormatted || "0.00"} ${originToken.symbol}`
+                  : "••••••"}
+              </button>
+            )}
+          </div>
+        </div>
+
+        {/* Flip Button - Absolutely Positioned */}
+        <div className="relative">
+          <button
+            type="button"
+            onClick={handleFlip}
+            className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 p-1.5 trails-border-radius-button trails-bg-tertiary hover:trails-hover-bg transition-colors cursor-pointer border-2 border-white dark:border-gray-800"
+          >
+            <ArrowDown
+              className="w-5 h-5 text-gray-900 dark:text-white"
+              strokeWidth={2.5}
+            />
+          </button>
+        </div>
+
+        {/* Output Section - Amount + Token Selection */}
+        <div className="trails-bg-secondary trails-bg-secondary-hover trails-border-radius-container p-3 transition-all duration-200 border border-transparent focus-within:!bg-white dark:focus-within:!bg-gray-800 trails-focus-border-secondary min-h-[120px] flex flex-col">
+          {/* Buy Label */}
+          <div className="text-sm font-medium trails-text-secondary mb-2 text-left">
+            Buy
+          </div>
+
+          <div className="flex items-center space-x-2 flex-1">
+            {/* Output Amount */}
+            <div className="flex-1">
+              <div className="flex items-center space-x-2">
+                <input
+                  type="text"
+                  value={
+                    tradeType === TradeType.EXACT_OUTPUT
+                      ? buyAmount
+                      : toAmountDisplay || ""
+                  }
+                  onChange={(e) => handleBuyAmountChange(e.target.value)}
+                  onFocus={handleBuyInputFocus}
+                  placeholder={`0 ${selectedDestToken?.symbol || ""}`}
+                  className={`w-full bg-transparent font-bold placeholder:trails-text-muted border-none outline-none ${
+                    !amount
+                      ? "text-gray-400 dark:text-gray-500"
+                      : "trails-text-primary"
+                  } ${isLoadingQuote && tradeType === TradeType.EXACT_INPUT ? "animate-pulse" : ""}`}
+                  style={buyInputStyles}
+                  readOnly={
+                    tradeType === TradeType.EXACT_INPUT && isLoadingQuote
+                  }
+                />
+                {isLoadingQuote && tradeType === TradeType.EXACT_INPUT && (
+                  <div className="animate-spin rounded-full h-4 w-4 border-solid border-b-2 trails-primary" />
+                )}
+              </div>
+            </div>
+
+            {/* Destination Token Selection */}
+            <div className="relative" ref={tokenDropdownRef}>
+              <button
+                type="button"
+                onClick={() => setIsTokenDropdownOpen(!isTokenDropdownOpen)}
+                className={`flex items-center space-x-2 trails-border-radius-input px-2.5 py-1.5 border transition-colors cursor-pointer ${
+                  selectedDestToken
+                    ? "trails-bg-card hover:trails-hover-bg trails-border-primary"
+                    : "bg-blue-500 hover:bg-blue-600 border-blue-500 text-white"
+                }`}
+              >
+                {selectedDestToken ? (
+                  <>
+                    <TokenImage
+                      symbol={selectedDestToken.symbol}
+                      imageUrl={selectedDestToken.imageUrl}
+                      chainId={(selectedDestToken as any)?.chainId}
+                      size={20}
+                    />
+                    <span className="font-medium trails-text-primary text-sm">
+                      {selectedDestToken.symbol}
+                    </span>
+                    <ChevronDown className="w-3.5 h-3.5 trails-text-muted" />
+                  </>
+                ) : (
+                  <>
+                    <span className="font-medium text-sm text-white">
+                      Select Token
+                    </span>
+                    <ChevronDown className="w-3.5 h-3.5 text-white" />
+                  </>
+                )}
+              </button>
+
+              {/* Token Selector Modal */}
+              {isTokenDropdownOpen && (
+                <div className="absolute right-0 bottom-full mb-1 w-80 trails-bg-card rounded-lg shadow-lg border trails-border-primary max-h-80 overflow-hidden z-10 translate-y-32">
+                  <div className="p-2">
+                    <TokenSelector
+                      onTokenSelect={(token: any) => {
+                        const formattedToken = {
+                          ...token,
+                          decimals:
+                            token.contractInfo?.decimals || token.decimals,
+                          contractInfo: {
+                            decimals:
+                              token.contractInfo?.decimals || token.decimals,
+                          },
+                        } as any
+                        setDestinationToken(formattedToken)
+                        setSelectedDestToken(formattedToken)
+                        logger.console.log(
+                          "[trails-sdk] selected destination token",
+                          token,
+                        )
+
+                        setIsTokenDropdownOpen(false)
+                        // Track the token selection
+                        onTrackToken?.(token)
+                      }}
+                      onError={onError}
+                      fundMethod={fundMethod}
+                      allSupportedTokens={true}
+                      showContinueButton={false}
+                      compactMode={false}
+                      recentTokens={recentTokens}
+                      onRecentTokenSelect={(token) => {
+                        const formattedToken = {
+                          ...token,
+                          decimals: token.decimals,
+                          contractInfo: {
+                            decimals: token.decimals,
+                          },
+                        } as any
+                        setDestinationToken(formattedToken)
+                        setSelectedDestToken(formattedToken)
+                        setIsTokenDropdownOpen(false)
+                        onRecentTokenSelect?.(token)
+                      }}
+                    />
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+
+          {/* Bottom Info Row */}
+          <div className="mt-2 flex justify-between items-center">
+            {/* Destination Amount USD from Quote */}
+            {(prepareSendQuote?.destinationAmountUsdDisplay ||
+              (isLoadingQuote && tradeType === TradeType.EXACT_INPUT)) && (
+              <div className="text-xs trails-text-muted">
+                ≈{" "}
+                {isLoadingQuote && tradeType === TradeType.EXACT_INPUT
+                  ? "$0.00"
+                  : prepareSendQuote?.destinationAmountUsdDisplay}
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Fee Options */}
+        <FeeOptions
+          options={feeOptions}
+          selectedOption={selectedFeeToken ?? undefined}
+          onSelect={setSelectedFeeToken}
+        />
+
+        {/* Warning Messages - Show only one at a time */}
+        <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. Required{" "}
+                {prepareSendQuote?.originAmountDisplay} {originToken?.symbol}
+              </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}
+
+        {/* Quote Details */}
+        {prepareSendQuote && (
+          <div className="space-y-2">
+            <QuoteDetails
+              quote={prepareSendQuote}
+              showContent={true}
+              swapMode={true}
+            />
+          </div>
+        )}
+
+        <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 trails-text-muted" />
+              <span>{buttonText}</span>
+            </div>
+          ) : isSameTokenWithoutCustomCalldata ? (
+            "Select Different Tokens"
+          ) : prepareSendQuote?.noSufficientBalance ? (
+            "Insufficient Balance"
+          ) : (
+            buttonText
+          )}
+        </button>
+      </form>
+    </div>
+  )
+}
+
+export default ClassicSwap