0xtrails 0.2.4 → 0.2.6

package/src/widget/components/PaySendForm.tsx

@@ -1,869 +0,0 @@
-import { ChevronDown, Loader2, RefreshCcw, TrendingUp } from "lucide-react"
-import type React from "react"
-import { useCallback, useEffect, useRef, useState } from "react"
-import type { Account, WalletClient } from "viem"
-import { isAddress } from "viem"
-import type { TransactionState } from "../../transactions.js"
-import type { OnCompleteProps, Token, TokenInfo } from "../hooks/useSendForm.js"
-import { useSendForm } from "../hooks/useSendForm.js"
-import type { CheckoutOnHandlers } from "../hooks/useCheckout.js"
-import { ChainImage } from "./ChainImage.js"
-import { TokenImage } from "./TokenImage.js"
-import { QuoteDetails } from "./QuoteDetails.js"
-import { TruncatedAddress } from "./TruncatedAddress.js"
-// import { RefundAddressInput } from "./RefundAddressInput.js"
-import { type PrepareSendQuote, TradeType } from "../../prepareSend.js"
-import { getChainInfo, getChainColor } from "../../chains.js"
-import { formatTvl } from "../../prices.js"
-import aaveLogo from "../assets/aave.svg"
-import morphoLogo from "../assets/morpho.svg"
-import { ScreenHeader } from "./ScreenHeader.js"
-import { ErrorDisplay } from "./ErrorDisplay.js"
-import { useMode } from "../hooks/useMode.js"
-import { getExplorerUrlForAddress } from "../../explorer.js"
-import { logger } from "../../logger.js"
-import { useBalanceVisible } from "../hooks/useBalanceVisible.js"
-
-interface PaySendFormProps {
-  selectedToken: Token
-  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
-  selectedPool?: {
-    id: string
-    name: string
-    protocol: string
-    chainId: number
-    apy: number
-    tvl: number
-    token: {
-      symbol: string
-      name: string
-      address: string
-      decimals: number
-      logoUrl?: string
-    }
-    depositAddress: string
-    isActive: boolean
-    poolUrl?: string
-    protocolUrl?: string
-  } | null
-  checkoutOnHandlers?: CheckoutOnHandlers
-}
-
-export const PaySendForm: React.FC<PaySendFormProps> = ({
-  selectedToken,
-  onSend,
-  onBack,
-  onConfirm,
-  onComplete,
-  account,
-  toAmount,
-  toRecipient,
-  toChainId,
-  toToken,
-  toCalldata,
-  walletClient,
-  onTransactionStateChange,
-  onError,
-  onWaitingForWalletConfirm,
-  paymasterUrls,
-  gasless,
-  setWalletConfirmRetryHandler,
-  quoteProvider,
-  fundMethod,
-  onNavigateToMeshConnect,
-  onAmountUpdate,
-  selectedPool,
-  checkoutOnHandlers,
-}) => {
-  const { mode } = useMode()
-  const { isBalanceVisible } = useBalanceVisible()
-  // const [isRefundAddressOpen, setIsRefundAddressOpen] = useState(false)
-  // const [refundAddress, setRefundAddress] = useState<string>(account.address)
-  const [refetchTrigger, setRefetchTrigger] = useState(0)
-  const {
-    amount,
-    amountRaw,
-    amountUsdDisplay,
-    balanceUsdDisplay,
-    chainInfo,
-    balanceFormatted,
-    handleRecipientInputChange,
-    handleSubmit,
-    isChainDropdownOpen,
-    isSubmitting,
-    isLoadingQuote,
-    isTokenDropdownOpen,
-    recipient,
-    recipientInput,
-    selectedDestinationChain,
-    selectedDestToken,
-    setAmount,
-    setRecipient,
-    setRecipientInput,
-    setSelectedDestinationChain,
-    setSelectedDestToken,
-    buttonText,
-    isValidRecipient,
-    ensAddress,
-    supportedTokens,
-    setIsChainDropdownOpen,
-    setIsTokenDropdownOpen,
-    toAmountDisplay,
-    destinationTokenAddress,
-    supportedChains,
-    isValidCustomToken,
-    prepareSendQuote,
-    quoteError,
-    quoteErrorPrettified,
-    isSameTokenWithoutCustomCalldata,
-  } = useSendForm({
-    account,
-    toAmount,
-    toRecipient,
-    toChainId,
-    toToken,
-    toCalldata,
-    // refundAddress,
-    walletClient,
-    onTransactionStateChange,
-    onError,
-    onWaitingForWalletConfirm,
-    paymasterUrls,
-    gasless,
-    onConfirm,
-    onComplete,
-    onSend,
-    selectedToken,
-    setWalletConfirmRetryHandler,
-    tradeType: TradeType.EXACT_OUTPUT,
-    quoteProvider,
-    fundMethod,
-    mode,
-    onNavigateToMeshConnect,
-    checkoutOnHandlers,
-    refetchTrigger,
-  })
-
-  // Handle amount input changes with decimal validation
-  const handleAmountChange = 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
-      }
-      setAmount(value)
-    },
-    [setAmount],
-  )
-
-  // Handle manual quote refetch
-  const handleRefetchQuote = useCallback(() => {
-    setRefetchTrigger((prev) => prev + 1)
-  }, [])
-
-  // Call onAmountUpdate when amountRaw changes
-  useEffect(() => {
-    if (onAmountUpdate) {
-      onAmountUpdate(amountRaw)
-    }
-  }, [amountRaw, onAmountUpdate])
-
-  const chainDropdownRef = useRef<HTMLDivElement>(null)
-  const tokenDropdownRef = useRef<HTMLDivElement>(null)
-
-  useEffect(() => {
-    const handleClickOutside = (event: MouseEvent) => {
-      logger.console.log(
-        "[trails-sdk] click outside handler called, isChainDropdownOpen:",
-        isChainDropdownOpen,
-      )
-      if (
-        chainDropdownRef.current &&
-        !chainDropdownRef.current.contains(event.target as Node)
-      ) {
-        logger.console.log(
-          "[trails-sdk] closing chain dropdown from outside click",
-        )
-        setIsChainDropdownOpen(false)
-      }
-      if (
-        tokenDropdownRef.current &&
-        !tokenDropdownRef.current.contains(event.target as Node)
-      ) {
-        setIsTokenDropdownOpen(false)
-      }
-    }
-
-    if (isChainDropdownOpen || isTokenDropdownOpen) {
-      document.addEventListener("click", handleClickOutside)
-      return () => document.removeEventListener("click", handleClickOutside)
-    }
-  }, [
-    setIsChainDropdownOpen,
-    setIsTokenDropdownOpen,
-    isChainDropdownOpen,
-    isTokenDropdownOpen,
-  ])
-
-  if (!selectedDestinationChain) {
-    return null
-  }
-
-  if (!selectedToken) {
-    return null
-  }
-
-  return (
-    <div className="space-y-2">
-      <ScreenHeader
-        onBack={onBack}
-        headerContent={mode === "earn" ? "Earn" : "Send Payment"}
-        headerContentAlign="left"
-        showAccountActions={true}
-      />
-
-      <div className="flex items-center space-x-2 p-4 trails-border-radius-container trails-bg-secondary">
-        <div className="flex items-start justify-between w-full">
-          {/* Left side - Chain and Token images with token name */}
-          <div className="flex items-start space-x-2">
-            {/* Token Image and Name */}
-            <div className="flex items-center space-x-2">
-              <div style={{ width: "32px", height: "32px" }} className="mr-2">
-                <a
-                  href={getExplorerUrlForAddress({
-                    address: selectedToken.contractAddress,
-                    chainId: selectedToken.chainId,
-                  })}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="cursor-pointer"
-                >
-                  <TokenImage
-                    symbol={selectedToken.symbol}
-                    imageUrl={selectedToken.imageUrl}
-                    chainId={selectedToken.chainId}
-                    size={32}
-                  />
-                </a>
-              </div>
-              <div className="flex flex-col">
-                <span className="text-sm font-medium max-w-[135px] truncate text-left text-gray-900 dark:text-white">
-                  {selectedToken.name}
-                </span>
-                <span className="text-sm text-gray-500 dark:text-gray-400">
-                  on {chainInfo?.name || "Unknown Chain"}
-                </span>
-              </div>
-            </div>
-          </div>
-
-          {/* Right side - USD value and amount */}
-          {fundMethod !== "qr-code" && fundMethod !== "exchange" && (
-            <div className="text-right">
-              <div className="text-sm font-medium text-gray-900 dark:text-white">
-                <span className="text-gray-600 dark:text-gray-400">
-                  Balance:{" "}
-                </span>
-                {isBalanceVisible ? balanceUsdDisplay : "••••••"}
-              </div>
-              <div className="text-sm text-gray-600 dark:text-gray-400">
-                {isBalanceVisible
-                  ? `${balanceFormatted} ${selectedToken.symbol}`
-                  : "••••••"}
-              </div>
-            </div>
-          )}
-        </div>
-      </div>
-
-      {/* Pool Information - Only show in earn mode when selectedPool is available */}
-      {mode === "earn" && selectedPool && (
-        <div className="p-4 trails-border-radius-container trails-bg-secondary">
-          <div className="flex items-center justify-between mb-2">
-            <div className="flex items-center space-x-3">
-              <div style={{ width: "32px", height: "32px" }}>
-                <a
-                  href={getExplorerUrlForAddress({
-                    address: selectedPool.token.address,
-                    chainId: selectedPool.chainId,
-                  })}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="cursor-pointer"
-                >
-                  <TokenImage
-                    symbol={selectedPool.token.symbol}
-                    imageUrl={selectedPool.token.logoUrl}
-                    chainId={selectedPool.chainId}
-                    size={32}
-                  />
-                </a>
-              </div>
-              <div>
-                <h3 className="font-medium text-gray-900 dark:text-white text-sm">
-                  {selectedPool.poolUrl ? (
-                    <a
-                      href={selectedPool.poolUrl}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="hover:underline cursor-pointer"
-                    >
-                      {selectedPool.name}
-                    </a>
-                  ) : (
-                    selectedPool.name
-                  )}
-                </h3>
-                <div className="flex items-center space-x-2">
-                  <span className="text-xs text-gray-500 dark:text-gray-400 flex items-center">
-                    {selectedPool.protocol === "Aave" && (
-                      <img src={aaveLogo} alt="Aave" className="w-3 h-3 mr-1" />
-                    )}
-                    {selectedPool.protocol === "Morpho" && (
-                      <img
-                        src={morphoLogo}
-                        alt="Morpho"
-                        className="w-3 h-3 mr-1"
-                      />
-                    )}
-                    {selectedPool.protocolUrl ? (
-                      <a
-                        href={selectedPool.protocolUrl}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="hover:underline cursor-pointer"
-                      >
-                        {selectedPool.protocol}
-                      </a>
-                    ) : (
-                      selectedPool.protocol
-                    )}
-                  </span>
-                  <span
-                    className={`px-2 py-0.5 rounded-full text-xs font-medium ${getChainColor(selectedPool.chainId)}`}
-                  >
-                    {getChainInfo(selectedPool.chainId)?.name ||
-                      `Chain ${selectedPool.chainId}`}
-                  </span>
-                </div>
-              </div>
-            </div>
-            <div className="text-right">
-              <div className="flex items-center space-x-1 text-green-600 dark:text-green-400">
-                <TrendingUp className="w-3 h-3" />
-                <span className="font-semibold text-sm">
-                  {selectedPool.apy.toFixed(1)}%
-                </span>
-              </div>
-              <p className="text-xs text-gray-500 dark:text-gray-400">APY</p>
-            </div>
-          </div>
-          <div className="flex items-center justify-between text-sm">
-            <div className="flex items-center space-x-1 text-gray-600 dark:text-gray-400">
-              <span className="text-xs">
-                TVL: {formatTvl(selectedPool.tvl)}
-              </span>
-            </div>
-            <div className="flex items-center space-x-1">
-              <span
-                className={`w-2 h-2 rounded-full ${selectedPool.isActive ? "bg-green-500" : "bg-red-500"}`}
-              />
-              <span className="text-xs text-gray-600 dark:text-gray-400">
-                {selectedPool.isActive ? "Active" : "Inactive"}
-              </span>
-            </div>
-          </div>
-        </div>
-      )}
-
-      <form onSubmit={handleSubmit} className="space-y-2">
-        {/* Chain Selection - More Compact */}
-        {!toChainId && (
-          <div className="mb-4">
-            <label
-              htmlFor="destination-chain"
-              className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300 text-left"
-            >
-              Destination Chain
-            </label>
-            <div className="relative" ref={chainDropdownRef}>
-              <button
-                type="button"
-                onClick={() => setIsChainDropdownOpen(!isChainDropdownOpen)}
-                className="w-full flex items-center px-4 py-3 border border-solid trails-border-radius-dropdown hover:border-gray-400 cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 trails-dropdown"
-              >
-                <ChainImage chainId={selectedDestinationChain.id} size={24} />
-                <span className="ml-2 flex-1 text-left">
-                  {selectedDestinationChain.name}
-                </span>
-                <ChevronDown
-                  className={`h-5 w-5 ${"text-gray-400"} transition-transform ${
-                    isChainDropdownOpen ? "transform rotate-180" : ""
-                  }`}
-                />
-              </button>
-
-              {isChainDropdownOpen && (
-                <div className="absolute z-10 w-full mt-1 border border-solid trails-border-radius-dropdown shadow-lg max-h-60 overflow-y-auto custom-scrollbar trails-dropdown">
-                  {supportedChains.map((chain) => (
-                    <button
-                      key={chain.id}
-                      type="button"
-                      onClick={(e) => {
-                        e.preventDefault()
-                        e.stopPropagation()
-                        setSelectedDestinationChain(chain)
-                        setIsChainDropdownOpen(false)
-                      }}
-                      onMouseDown={(e) => {
-                        e.preventDefault()
-                        e.stopPropagation()
-                      }}
-                      className={`w-full flex items-center px-4 py-3 trails-dropdown-item cursor-pointer ${
-                        selectedDestinationChain.id === chain.id
-                          ? "trails-dropdown-item-selected"
-                          : "hover:trails-dropdown-item"
-                      }`}
-                    >
-                      <ChainImage chainId={chain.id} size={24} />
-                      <span className="ml-2">{chain.name}</span>
-                      {selectedDestinationChain.id === chain.id && (
-                        <span className="ml-auto text-gray-900 dark:text-white">
-                          •
-                        </span>
-                      )}
-                    </button>
-                  ))}
-                </div>
-              )}
-            </div>
-          </div>
-        )}
-
-        {/* Token Selection - More Compact */}
-        {!toToken && (
-          <div className="mb-4">
-            <label
-              htmlFor="token"
-              className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300 text-left"
-            >
-              Receive Token
-            </label>
-            <div className="relative" ref={tokenDropdownRef}>
-              <button
-                type="button"
-                onClick={() => setIsTokenDropdownOpen(!isTokenDropdownOpen)}
-                className="w-full flex items-center px-4 py-3 border border-solid trails-border-radius-dropdown hover:border-gray-400 cursor-pointer focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 trails-dropdown"
-              >
-                <div className="w-5 h-5 rounded-full flex items-center justify-center text-sm bg-gray-100 dark:bg-gray-700">
-                  <TokenImage
-                    symbol={selectedDestToken?.symbol}
-                    imageUrl={selectedDestToken?.imageUrl}
-                    size={24}
-                  />
-                </div>
-                <span className="ml-2 flex-1 text-left">
-                  {selectedDestToken?.name} ({selectedDestToken?.symbol})
-                </span>
-                <ChevronDown
-                  className={`h-5 w-5 text-gray-400 transition-transform ${
-                    isTokenDropdownOpen ? "transform rotate-180" : ""
-                  }`}
-                />
-              </button>
-
-              {isTokenDropdownOpen && (
-                <div className="absolute z-10 w-full mt-1 border border-solid trails-border-radius-dropdown shadow-lg max-h-60 overflow-y-auto custom-scrollbar trails-dropdown">
-                  {supportedTokens.map((token) => (
-                    <button
-                      key={`${token.contractAddress}-${token.chainId}`}
-                      type="button"
-                      onClick={() => {
-                        setSelectedDestToken(token as TokenInfo)
-                        setIsTokenDropdownOpen(false)
-                      }}
-                      className={`w-full flex items-center px-4 py-3 cursor-pointer trails-dropdown-item ${
-                        selectedDestToken?.symbol === token.symbol
-                          ? "trails-dropdown-item-selected"
-                          : "hover:trails-dropdown-item"
-                      }`}
-                    >
-                      <TokenImage
-                        symbol={token.symbol}
-                        imageUrl={token.imageUrl}
-                        size={24}
-                      />
-                      <span className="ml-2">
-                        {token.name} ({token.symbol})
-                      </span>
-                      {selectedDestToken?.symbol === token.symbol && (
-                        <span className="ml-auto text-gray-900 dark:text-white">
-                          •
-                        </span>
-                      )}
-                    </button>
-                  ))}
-                </div>
-              )}
-            </div>
-          </div>
-        )}
-
-        {/* Amount Input - More Compact */}
-        {!toAmount && (
-          <div className="mb-2">
-            <label
-              htmlFor="amount"
-              className="block text-sm font-medium mb-1 text-gray-700 dark:text-gray-300 text-left"
-            >
-              Amount to {mode === "earn" ? "Deposit" : "Receive"}
-            </label>
-            <div className="relative trails-border-radius-container">
-              <input
-                id="amount"
-                type="text"
-                value={amount}
-                onChange={(e) => handleAmountChange(e.target.value)}
-                placeholder="0.00"
-                className="block w-full pl-4 pr-12 py-3 border border-solid trails-border-radius-input focus:ring-2 focus:ring-blue-500 focus:border-blue-500 text-lg trails-input"
-              />
-              <div className="absolute inset-y-0 right-0 flex items-center pr-4">
-                <span className="text-gray-400">
-                  {selectedDestToken?.symbol}
-                </span>
-              </div>
-            </div>
-            {amountUsdDisplay && selectedDestToken?.symbol && (
-              <div className="h-6 mt-1">
-                <div className="text-sm text-gray-400 text-left">
-                  ≈ {amountUsdDisplay}
-                </div>
-              </div>
-            )}
-          </div>
-        )}
-
-        {/* Receive Section - Similar to FundSendForm */}
-        {(toAmount || toChainId || toToken) && (
-          <div className="space-y-1">
-            <div className="flex items-center justify-between">
-              <div
-                className={`text-lg font-semibold text-left ${"text-gray-900 dark:text-white"}`}
-              >
-                {mode === "earn" ? "Deposit" : "Receive"}
-              </div>
-              <button
-                type="button"
-                onClick={handleRefetchQuote}
-                disabled={
-                  isLoadingQuote ||
-                  !amount ||
-                  !selectedDestToken ||
-                  !selectedDestinationChain ||
-                  !isValidRecipient
-                }
-                className={`p-2 rounded-md transition-colors cursor-pointer ${
-                  isLoadingQuote ||
-                  !amount ||
-                  !selectedDestToken ||
-                  !selectedDestinationChain ||
-                  !isValidRecipient
-                    ? "opacity-50 cursor-not-allowed text-gray-400 dark:text-gray-500"
-                    : "text-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:text-gray-700 dark:hover:text-gray-200"
-                }`}
-                title="Refetch quote"
-              >
-                <RefreshCcw
-                  className={`h-4 w-4 ${isLoadingQuote ? "animate-spin" : ""}`}
-                />
-              </button>
-            </div>
-
-            <div className="p-2">
-              <div className="flex items-center space-x-3">
-                <a
-                  href={getExplorerUrlForAddress({
-                    address: destinationTokenAddress || "",
-                    chainId: selectedDestinationChain.id,
-                  })}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="cursor-pointer"
-                >
-                  <TokenImage
-                    symbol={selectedDestToken?.symbol}
-                    imageUrl={selectedDestToken?.imageUrl}
-                    chainId={selectedDestinationChain.id}
-                    size={32}
-                  />
-                </a>
-                <div>
-                  <div className="flex items-center space-x-2">
-                    <div
-                      className={`text-lg font-semibold ${"text-gray-900 dark:text-white"} ${isLoadingQuote ? "animate-pulse" : ""}`}
-                    >
-                      {toAmountDisplay} {selectedDestToken?.symbol}
-                    </div>
-                    {isLoadingQuote && (
-                      <div
-                        className={`animate-spin rounded-full h-4 w-4 border-solid border-b-2 ${"border-blue-400"}`}
-                      />
-                    )}
-                  </div>
-                  <div
-                    className={`text-xs ${"text-gray-500 dark:text-gray-400"} ${isLoadingQuote ? "animate-pulse" : ""}`}
-                  >
-                    ≈ {amountUsdDisplay}{" "}
-                    {selectedDestinationChain
-                      ? `on ${selectedDestinationChain.name}`
-                      : ""}
-                  </div>
-                </div>
-              </div>
-            </div>
-
-            {/* Show recipient address if different from sender */}
-            {recipient &&
-              recipient.toLowerCase() !== account.address.toLowerCase() && (
-                <div className="px-2 pb-1">
-                  <div className={`text-xs text-left ${"text-gray-400"}`}>
-                    {mode === "earn" ? "Pool" : "Recipient"}:{" "}
-                    <TruncatedAddress
-                      address={recipient}
-                      chainId={selectedDestinationChain.id}
-                    />
-                  </div>
-                </div>
-              )}
-          </div>
-        )}
-
-        {/* Recipient Input - More Compact */}
-        {!toRecipient && (
-          <div className="mb-4">
-            <div className="flex justify-between items-center mb-1">
-              <div>
-                <label
-                  htmlFor="recipient"
-                  className="text-sm font-medium text-gray-700 dark:text-gray-300"
-                >
-                  {toCalldata
-                    ? "Destination Address"
-                    : mode === "earn"
-                      ? "Pool Address"
-                      : "Recipient Address"}
-                </label>
-                {recipient &&
-                  isAddress(recipient) &&
-                  recipient.toLowerCase() === account.address.toLowerCase() && (
-                    <div className="text-xs mt-0.5 text-left text-gray-400">
-                      Same as sender
-                    </div>
-                  )}
-              </div>
-              <div className="h-7 flex items-center">
-                {recipient !== account.address ? (
-                  <button
-                    type="button"
-                    onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
-                      event.preventDefault()
-                      setRecipientInput(account.address)
-                      setRecipient(account.address)
-                    }}
-                    className={`px-2 py-1 text-xs cursor-pointer trails-border-radius-button transition-colors bg-blue-500 hover:bg-blue-600 text-white`}
-                  >
-                    Use Account
-                  </button>
-                ) : null}
-              </div>
-            </div>
-            <input
-              id="recipient"
-              type="text"
-              value={recipientInput}
-              onChange={handleRecipientInputChange}
-              placeholder="0x... or name.eth"
-              className="block w-full px-4 py-3 border border-solid trails-border-radius-input focus:ring-2 focus:ring-blue-500 focus:border-blue-500 font-mono text-sm trails-input"
-            />
-            {ensAddress && <p className="text-sm text-gray-400">{recipient}</p>}
-          </div>
-        )}
-
-        {/* Custom Calldata - More Compact */}
-        {toCalldata && (
-          <div className="px-2 py-1">
-            <p className={`text-[10px] text-left ${"text-gray-400"}`}>
-              This transaction includes custom calldata for contract interaction
-              at the destination address
-            </p>
-          </div>
-        )}
-
-        {/* Refund Address Input */}
-        {/* <RefundAddressInput
-          account={account}
-          isOpen={isRefundAddressOpen}
-          onToggle={() => setIsRefundAddressOpen(!isRefundAddressOpen)}
-          refundAddress={refundAddress}
-          onRefundAddressChange={setRefundAddress}
-          chainId={selectedDestinationChain.id}
-        /> */}
-
-        {/* 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 origin 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
-              </p>
-            </div>
-          </div>
-        ) : null}
-
-        <button
-          type="submit"
-          disabled={
-            !amount ||
-            !isValidRecipient ||
-            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 ${"text-gray-400"}`}
-              />
-              <span>{buttonText}</span>
-            </div>
-          ) : isSameTokenWithoutCustomCalldata ? (
-            "Select Different Tokens"
-          ) : prepareSendQuote?.noSufficientBalance ? (
-            "Insufficient Balance"
-          ) : (
-            buttonText
-          )}
-        </button>
-
-        {/* Quote Details */}
-        {prepareSendQuote && (
-          <div className="space-y-2">
-            <QuoteDetails quote={prepareSendQuote} showContent={true} />
-          </div>
-        )}
-      </form>
-    </div>
-  )
-}
-
-const styles = `
-  select {
-    appearance: none;
-    border: 1px solid #e5e7eb;
-    outline: none;
-    font-size: 1rem;
-    width: 100%;
-    background-color: #fff;
-    border-radius: 0.5rem;
-    padding: 0.75rem 1rem;
-    padding-right: 2rem;
-    
-    cursor: pointer;
-    transition: all 0.2s;
-  }
-
-  select:hover {
-    border-color: #d1d5db;
-  }
-
-  select:focus {
-    border-color: #3b82f6;
-    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
-  }
-
-  select option {
-    padding: 0.75rem 1rem;
-    min-height: 3rem;
-    display: flex;
-    align-items: center;
-    padding-left: 2.75rem;
-    position: relative;
-    cursor: pointer;
-  }
-
-  select option:hover {
-    background-color: #f3f4f6;
-  }
-
-  select option:checked {
-    background-color: #eff6ff;
-    color: #1d4ed8;
-  }
-`
-
-if (typeof document !== "undefined") {
-  const styleTag = document.createElement("style")
-  styleTag.textContent = styles
-  document.head.appendChild(styleTag)
-}