0xtrails 0.1.13 → 0.2.1

package/src/widget/components/Swap.tsx

@@ -1,30 +1,14 @@
-import { ChevronDown, Loader2, ArrowDown } from "lucide-react"
 import type React from "react"
-import { useCallback, useEffect, useRef, useState } from "react"
+import { useEffect } 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 { useTokenList } from "../hooks/useTokenList.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 type { PrepareSendQuote } from "../../prepareSend.js"
 import { SimpleSwap } from "./SimpleSwap.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 { ClassicSwap } from "./ClassicSwap.js"
+import { useSwapSettings } from "../hooks/useSwapSettings.js"
 import { useWidgetProps } from "../hooks/useWidgetProps.js"
 
 interface SwapProps {
@@ -64,849 +48,47 @@ interface SwapProps {
   onTrackToken?: (token: any) => void
 }
 
-export const Swap: React.FC<SwapProps> = ({
-  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()
+export const Swap: React.FC<SwapProps> = (props) => {
   const { swapMode } = useWidgetProps()
-  const { isBalanceVisible } = useBalanceVisible()
-  const { selectedToken: originToken, setSelectedToken: setOriginToken } =
-    useOriginSelectedToken()
   const {
-    selectedToken: destinationToken,
-    setSelectedToken: setDestinationToken,
-  } = useDestinationSelectedToken()
-  const [isFlipped, setIsFlipped] = useState(false)
-  const [isSimpleMode, setIsSimpleMode] = useState(swapMode === "simple")
+    isSimpleSwapMode: isSimpleMode,
+    setIsSimpleSwapMode: setIsSimpleMode,
+  } = useSwapSettings()
 
   // Update isSimpleMode when swapMode changes
   useEffect(() => {
     if (swapMode === "simple") {
       setIsSimpleMode(true)
     }
-  }, [swapMode])
-
-  // Handle mode changes
-  const handleModeChange = useCallback((newMode: boolean) => {
-    setIsSimpleMode(newMode)
-  }, [])
-  const [
-    isSimpleModeTokenSelectorVisible,
-    setIsSimpleModeTokenSelectorVisible,
-  ] = useState(false)
-  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")
-
-  // Get sorted tokens to auto-select the highest USD value token
-  const { filteredTokensFormatted, isLoadingTokens } = useTokenList({
-    onContinue: () => {}, // Not used for auto-selection
-    onError: () => {}, // Not used for auto-selection
-    fundMethod: undefined,
-    allSupportedTokens: false,
-  })
-
-  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 the highest USD value token as origin token
-  useEffect(() => {
-    if (
-      !originToken &&
-      !isLoadingTokens &&
-      filteredTokensFormatted?.length > 0
-    ) {
-      const highestValueToken = filteredTokensFormatted[0] // First token is highest USD value
-      if (highestValueToken && Number(highestValueToken.balanceUsd) > 0) {
-        setOriginToken({
-          ...highestValueToken,
-          contractInfo: {
-            decimals: highestValueToken.contractInfo?.decimals || 18,
-            contractAddress: highestValueToken.contractAddress,
-            symbol: highestValueToken.symbol,
-            name: highestValueToken.name,
-          },
-        } as any)
-        setOriginChainId(highestValueToken.chainId)
-      }
-    }
-  }, [originToken, isLoadingTokens, filteredTokensFormatted, setOriginToken])
-
-  // 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
-  useEffect(() => {
-    if (destinationToken && !selectedDestToken) {
-      setSelectedDestToken(destinationToken as any)
-    }
-  }, [destinationToken, selectedDestToken, 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")
-    }
+  }, [swapMode, setIsSimpleMode])
+
+  // Render SimpleSwap or ClassicSwap based on mode
+  if (isSimpleMode) {
+    return (
+      <SimpleSwap
+        onBack={props.onBack}
+        account={props.account}
+        walletClient={props.walletClient}
+        onTransactionStateChange={props.onTransactionStateChange}
+        onError={props.onError}
+        onWaitingForWalletConfirm={props.onWaitingForWalletConfirm}
+        onConfirm={props.onConfirm}
+        onComplete={props.onComplete}
+        onSend={props.onSend}
+        paymasterUrls={props.paymasterUrls}
+        gasless={props.gasless}
+        setWalletConfirmRetryHandler={props.setWalletConfirmRetryHandler}
+        quoteProvider={props.quoteProvider}
+        fundMethod={props.fundMethod}
+        checkoutOnHandlers={props.checkoutOnHandlers}
+        showHeader={true}
+        onTokenSelectorVisibilityChange={() => {}}
+      />
+    )
   }
 
-  return (
-    <div className="space-y-2">
-      {!isSimpleMode && (
-        <ScreenHeader
-          onBack={onBack}
-          headerContent="Swap"
-          headerContentAlign="left"
-          showAccountActions={true}
-          rightSideContent={
-            <SwapSettings
-              isSimpleMode={isSimpleMode}
-              onModeChange={handleModeChange}
-            />
-          }
-        />
-      )}
-
-      {isSimpleMode && !isSimpleModeTokenSelectorVisible && (
-        <ScreenHeader
-          onBack={onBack}
-          headerContent="Swap"
-          headerContentAlign="left"
-          showAccountActions={true}
-          rightSideContent={
-            <SwapSettings
-              isSimpleMode={isSimpleMode}
-              onModeChange={handleModeChange}
-            />
-          }
-        />
-      )}
-
-      {isSimpleMode ? (
-        <SimpleSwap
-          onBack={onBack}
-          account={account}
-          walletClient={walletClient}
-          onTransactionStateChange={onTransactionStateChange}
-          onError={onError}
-          onWaitingForWalletConfirm={onWaitingForWalletConfirm}
-          onConfirm={onConfirm}
-          onComplete={onComplete}
-          onSend={onSend}
-          paymasterUrls={paymasterUrls}
-          gasless={gasless}
-          setWalletConfirmRetryHandler={setWalletConfirmRetryHandler}
-          quoteProvider={quoteProvider}
-          fundMethod={fundMethod}
-          checkoutOnHandlers={checkoutOnHandlers}
-          showHeader={isSimpleModeTokenSelectorVisible}
-          onTokenSelectorVisibilityChange={setIsSimpleModeTokenSelectorVisible}
-        />
-      ) : (
-        <form onSubmit={handleSubmit} className="space-y-1">
-          {/* Input Section - Amount + Token Selection */}
-          <div className="trails-bg-secondary trails-border-radius-container p-3 group transition-all duration-200 border border-transparent hover:!bg-white dark:hover:!bg-white hover:border-gray-400 dark:hover:border-gray-500">
-            {/* 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">
-              {/* 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.00"
-                    className={`w-full bg-transparent text-xl font-medium trails-text-primary placeholder:trails-text-muted border-none outline-none ${
-                      isLoadingQuote && tradeType === TradeType.EXACT_OUTPUT
-                        ? "animate-pulse"
-                        : ""
-                    }`}
-                    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-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={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 trails-text-muted text-sm">
-                        Select Token
-                      </span>
-                      <ChevronDown className="w-3.5 h-3.5 trails-text-muted" />
-                    </>
-                  )}
-                </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-4 h-4 trails-text-secondary" />
-            </button>
-          </div>
-
-          {/* Output Section - Amount + Token Selection */}
-          <div className="trails-bg-secondary trails-border-radius-container p-3 transition-all duration-200 border border-transparent hover:!bg-white dark:hover:!bg-white hover:border-gray-400 dark:hover:border-gray-500">
-            {/* 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">
-              {/* 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.00"
-                    className={`w-full bg-transparent text-xl font-medium 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" : ""}`}
-                    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-bg-card hover:trails-hover-bg trails-border-radius-input px-2.5 py-1.5 border trails-border-primary transition-colors cursor-pointer"
-                >
-                  {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 trails-text-muted text-sm">
-                        Select Token
-                      </span>
-                      <ChevronDown className="w-3.5 h-3.5 trails-text-muted" />
-                    </>
-                  )}
-                </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 */}
-          {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"
-            />
-          )}
-          {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>
-  )
+  // Default to ClassicSwap
+  return <ClassicSwap {...props} />
 }
 
 export default Swap