0xtrails 0.2.6 → 0.4.0

package/src/widget/components/FeeOptions.tsx

@@ -1,34 +1,76 @@
 import { ChevronDown } from "lucide-react"
 import type React from "react"
-import { useRef, useState } from "react"
+import { useRef, useState, useEffect } from "react"
 import { formatUsdAmountDisplay, formatRawAmount } from "../../tokenBalances.js"
 import {
   FeeOption,
   type FeeOption as EnhancedFeeOptionType,
 } from "./FeeOption.js"
 import { logger } from "../../logger.js"
-import { getChainInfo } from "../../chains.js"
-import { TokenImage } from "./TokenImage.js"
 import { getTokenImageUrl } from "../../tokens.js"
-import { zeroAddress } from "viem"
-
-// Original FeeOption type from useSendForm hook
-type OriginalFeeOption = {
-  tokenAddress: string
-  tokenSymbol: string
-  tokenDecimals: number
-  amount: string
-  amountUSD: number
-  notEnoughBalance?: boolean
-  tokenImageUrl?: string
-  chainId?: number
+import { TokenImage } from "./TokenImage.js"
+import { ethAddress, zeroAddress } from "viem"
+import type { FeeOption as APIFeeOption } from "../../widget/hooks/useSelectedFeeToken.js"
+
+const ZERO_ADDRESS = zeroAddress.toLowerCase()
+const ETH_ADDRESS = ethAddress.toLowerCase()
+
+const normalizeAddress = (address?: string | null): string =>
+  (address ?? "").toLowerCase()
+
+const isNativeTokenAddress = (address?: string | null): boolean => {
+  const normalized = normalizeAddress(address)
+  return normalized === ZERO_ADDRESS || normalized === ETH_ADDRESS
+}
+
+const safeFormatAmountWithSymbol = (option: APIFeeOption): string => {
+  const tokenDecimals =
+    typeof option.tokenDecimals === "number" &&
+    option.tokenDecimals > 0 &&
+    option.tokenDecimals <= 18
+      ? option.tokenDecimals
+      : isNativeTokenAddress(option.tokenAddress)
+        ? 18
+        : undefined
+
+  if (tokenDecimals === undefined) {
+    logger.console.warn("[trails-sdk] [FEE-OPTIONS] Missing token decimals", {
+      tokenAddress: option.tokenAddress,
+      tokenSymbol: option.tokenSymbol,
+    })
+    return option.tokenSymbol ? `-- ${option.tokenSymbol}` : "--"
+  }
+
+  try {
+    const formattedAmount = formatRawAmount(option.amount, tokenDecimals)
+    return option.tokenSymbol
+      ? `${formattedAmount} ${option.tokenSymbol}`
+      : formattedAmount
+  } catch (error) {
+    logger.console.warn(
+      "[trails-sdk] [FEE-OPTIONS] Failed to format fee option amount",
+      {
+        option,
+        tokenDecimals,
+        error,
+      },
+    )
+    return option.tokenSymbol ? `-- ${option.tokenSymbol}` : "--"
+  }
+}
+
+const safeFormatUsdDisplay = (option: APIFeeOption): string => {
+  const usdValue =
+    (option as { amountUsd?: number }).amountUsd ?? option.amountUSD ?? 0
+  return formatUsdAmountDisplay(usdValue)
 }
 
 interface FeeOptionsProps {
-  feeOptions: OriginalFeeOption[]
-  selectedFeeToken: OriginalFeeOption | null
-  setSelectedFeeToken: (token: OriginalFeeOption | null) => void
+  feeOptions: APIFeeOption[]
+  selectedFeeToken: APIFeeOption | null
+  setSelectedFeeToken: (token: APIFeeOption | null) => void
   chainId?: number
+  isRefetching?: boolean // When true, the fee quote is stale and being refreshed, so hide the component
 }
 
 export const FeeOptions: React.FC<FeeOptionsProps> = ({
@@ -36,23 +78,53 @@ export const FeeOptions: React.FC<FeeOptionsProps> = ({
   selectedFeeToken,
   setSelectedFeeToken,
   chainId,
+  isRefetching,
 }) => {
-  const [isOpen, setIsOpen] = useState(false)
-  const accordionRef = useRef<HTMLDivElement>(null)
+  // Early returns BEFORE any hooks - this prevents "Rendered more hooks" error
+  // Hide component when fee quote is stale and being refreshed
+  if (isRefetching) {
+    return null
+  }
 
   // Don't render if no fee options available
   if (!feeOptions || feeOptions.length === 0) {
     return null
   }
 
+  // Check if there are non-native options before calling hooks
+  const hasNonNativeOptions = feeOptions.some(
+    (opt) => !isNativeTokenAddress(opt.tokenAddress),
+  )
+
+  // Don't render if only native token is available
+  if (!hasNonNativeOptions) {
+    return null
+  }
+
+  // NOW we can safely call hooks after all early returns
+  const [isOpen, setIsOpen] = useState(false)
+  const accordionRef = useRef<HTMLDivElement>(null)
+
+  // Clear selected fee token when feeOptions change (stale quote)
+  // This resets the user's fee selection when they pick a different token
+  // Use comprehensive key that includes token addresses and amounts
+  const feeOptionsKey = feeOptions
+    .map((opt) => `${opt.tokenAddress}-${opt.tokenSymbol}-${opt.amount}`)
+    .join("|")
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: setSelectedFeeToken is stable
+  useEffect(() => {
+    setSelectedFeeToken(null)
+  }, [feeOptionsKey])
+
   // Enhance ALL fee options with formatted values and image URLs (including native gas)
   const enhancedFeeOptions: EnhancedFeeOptionType[] = feeOptions.map(
     (option) => ({
       ...option,
-      amountFormatted: `${formatRawAmount(option.amount, option.tokenDecimals)} ${option.tokenSymbol}`,
-      amountUsdDisplay: formatUsdAmountDisplay(option.amountUSD),
+      amountFormatted: safeFormatAmountWithSymbol(option),
+      amountUsdDisplay: safeFormatUsdDisplay(option),
       tokenImageUrl: getTokenImageUrl({
-        chainId: option.chainId || chainId, // Use fee option's chain ID, fallback to prop
+        chainId: option.chainId || chainId,
         contractAddress: option.tokenAddress,
         symbol: option.tokenSymbol,
       }),
@@ -60,92 +132,54 @@ export const FeeOptions: React.FC<FeeOptionsProps> = ({
   )
 
   // Find native gas option (zero address) for header display
-  const nativeGasOption = enhancedFeeOptions.find(
-    (opt) => opt.tokenAddress.toLowerCase() === zeroAddress.toLowerCase(),
+  const nativeGasOption = enhancedFeeOptions.find((opt) =>
+    isNativeTokenAddress(opt.tokenAddress),
   )
 
-  const handleFeeTokenSelect = (option: EnhancedFeeOptionType) => {
-    // Convert back to original format for the parent component
-    const originalOption: OriginalFeeOption = {
-      tokenAddress: option.tokenAddress,
-      tokenSymbol: option.tokenSymbol,
-      tokenDecimals: option.tokenDecimals,
-      amount: option.amount,
-      amountUSD: option.amountUSD,
+  // Find the currently selected option from enhancedFeeOptions for header display
+  const getSelectedOption = (): EnhancedFeeOptionType | undefined => {
+    if (
+      selectedFeeToken === null ||
+      isNativeTokenAddress(selectedFeeToken?.tokenAddress)
+    ) {
+      return nativeGasOption
+    }
+
+    if (!selectedFeeToken) {
+      return undefined
     }
 
-    // For native gas (zero address), set to null to trigger non-gasless flow
-    if (option.tokenAddress.toLowerCase() === zeroAddress.toLowerCase()) {
+    const selectedAddress = normalizeAddress(selectedFeeToken.tokenAddress)
+
+    return enhancedFeeOptions.find(
+      (opt) => normalizeAddress(opt.tokenAddress) === selectedAddress,
+    )
+  }
+
+  const selectedOption = getSelectedOption()
+
+  // Use nativeGasOption as fallback when selectedOption is null/undefined
+  const displayOption = selectedOption || nativeGasOption
+
+  const handleFeeTokenSelect = (option: EnhancedFeeOptionType) => {
+    // For native gas (zero/ETH address), set to null to trigger non-gasless flow
+    if (isNativeTokenAddress(option.tokenAddress)) {
       setSelectedFeeToken(null)
       logger.console.log(
         "[trails-sdk] [FEE-SELECT] Selected native gas fee option",
       )
     } else {
-      setSelectedFeeToken(originalOption)
+      // Use the option directly - it already has all required fields
+      setSelectedFeeToken(option as APIFeeOption)
       logger.console.log(
         "[trails-sdk] [FEE-SELECT] Selected ERC20 fee option:",
-        originalOption,
+        option,
       )
     }
 
     setIsOpen(false)
   }
 
-  // Get display text and image for selected option
-  const getSelectedDisplayText = () => {
-    if (
-      selectedFeeToken === null ||
-      selectedFeeToken?.tokenAddress?.toLowerCase() ===
-        zeroAddress.toLowerCase()
-    ) {
-      // Native gas selected - use native gas option data
-      const nativeSymbol =
-        nativeGasOption?.tokenSymbol ||
-        (chainId ? getNativeSymbol(chainId) : "ETH")
-      const nativeImageUrl = getTokenImageUrl({
-        chainId,
-        contractAddress: zeroAddress,
-        symbol: nativeSymbol,
-      })
-      const amountDisplay = nativeGasOption
-        ? `${formatRawAmount(nativeGasOption.amount, nativeGasOption.tokenDecimals)} ${nativeGasOption.tokenSymbol}`
-        : ""
-      const usdDisplay = nativeGasOption
-        ? formatUsdAmountDisplay(nativeGasOption.amountUSD)
-        : ""
-      return {
-        title: nativeSymbol,
-        amountDisplay,
-        usdDisplay,
-        symbol: nativeSymbol,
-        imageUrl: nativeImageUrl,
-      }
-    } else {
-      const tokenImageUrl = getTokenImageUrl({
-        chainId: selectedFeeToken.chainId || chainId, // Use fee token's chain ID, fallback to prop
-        contractAddress: selectedFeeToken.tokenAddress,
-        symbol: selectedFeeToken.tokenSymbol,
-      })
-      const amountDisplay = `${formatRawAmount(selectedFeeToken.amount, selectedFeeToken.tokenDecimals)} ${selectedFeeToken.tokenSymbol}`
-      const usdDisplay = formatUsdAmountDisplay(selectedFeeToken.amountUSD)
-      return {
-        title: selectedFeeToken.tokenSymbol,
-        amountDisplay,
-        usdDisplay,
-        symbol: selectedFeeToken.tokenSymbol,
-        imageUrl: tokenImageUrl,
-      }
-    }
-  }
-
-  // Helper function to get native symbol for a chain
-  const getNativeSymbol = (chainId: number) => {
-    const chainInfo = getChainInfo(chainId)
-    return chainInfo?.nativeCurrency.symbol || "ETH"
-  }
-
-  const selectedDisplay = getSelectedDisplayText()
-
   return (
     <div className="space-y-1" ref={accordionRef}>
       <div className="p-2">
@@ -165,24 +199,30 @@ export const FeeOptions: React.FC<FeeOptionsProps> = ({
           className="w-full flex items-center justify-between p-1.5 trails-border-radius-input border trails-border-primary hover:trails-hover-bg transition-colors cursor-pointer"
         >
           <div className="flex items-center space-x-2">
-            <TokenImage
-              imageUrl={selectedDisplay.imageUrl}
-              symbol={selectedDisplay.symbol}
-              chainId={selectedFeeToken?.chainId || chainId}
-              size={16}
-            />
-            <div className="text-left">
-              <div className="text-xs font-medium trails-text-primary">
-                {selectedDisplay.amountDisplay}
-              </div>
-            </div>
+            {displayOption && (
+              <>
+                <TokenImage
+                  imageUrl={displayOption.tokenImageUrl}
+                  symbol={displayOption.tokenSymbol}
+                  chainId={displayOption.chainId || chainId}
+                  size={16}
+                />
+                <div className="ml-2 text-left">
+                  <div className="text-xs font-medium trails-text-primary">
+                    {displayOption.amountFormatted}
+                  </div>
+                </div>
+              </>
+            )}
           </div>
           <div className="flex items-center space-x-2">
-            <div className="text-right">
-              <div className="text-xs font-medium trails-text-primary">
-                {selectedDisplay.usdDisplay}
+            {displayOption && (
+              <div className="text-right">
+                <div className="text-xs font-medium trails-text-primary">
+                  ≈ {displayOption.amountUsdDisplay}
+                </div>
               </div>
-            </div>
+            )}
             <ChevronDown
               className={`w-3 h-3 trails-text-muted transition-transform ${
                 isOpen ? "transform rotate-180" : ""
@@ -200,12 +240,11 @@ export const FeeOptions: React.FC<FeeOptionsProps> = ({
                 key={`${option.tokenAddress}-${index}`}
                 option={option}
                 isSelected={
-                  option.tokenAddress.toLowerCase() ===
-                  zeroAddress.toLowerCase()
+                  isNativeTokenAddress(option.tokenAddress)
                     ? selectedFeeToken === null ||
-                      selectedFeeToken?.tokenAddress?.toLowerCase() ===
-                        zeroAddress.toLowerCase()
-                    : selectedFeeToken?.tokenAddress === option.tokenAddress
+                      isNativeTokenAddress(selectedFeeToken?.tokenAddress)
+                    : normalizeAddress(selectedFeeToken?.tokenAddress) ===
+                      normalizeAddress(option.tokenAddress)
                 }
                 onClick={() => handleFeeTokenSelect(option)}
                 chainId={option.chainId || chainId}

package/src/widget/components/Fund.tsx

@@ -45,7 +45,6 @@ interface FundProps {
   onComplete: (result: OnCompleteProps) => void
   onSend: (amount: string, recipient: string) => void
   paymasterUrls?: Array<{ chainId: number; url: string }>
-  gasless?: boolean
   isSequenceWallet?: boolean
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   quoteProvider?: string
@@ -81,7 +80,6 @@ export const Fund: React.FC<FundProps> = ({
   onComplete,
   onSend,
   paymasterUrls,
-  gasless,
   isSequenceWallet = false,
   setWalletConfirmRetryHandler,
   quoteProvider,
@@ -161,7 +159,6 @@ export const Fund: React.FC<FundProps> = ({
     onError,
     onWaitingForWalletConfirm,
     paymasterUrls,
-    gasless,
     onConfirm,
     onComplete,
     onSend,

package/src/widget/components/FundMethods.tsx

@@ -1,5 +1,5 @@
 import type React from "react"
-import { QrCode, Send, ChevronRight } from "lucide-react"
+import { QrCode, ArrowLeftRight, ChevronRight } from "lucide-react"
 import { useSwitchAccount } from "wagmi"
 import { ScreenHeader } from "./ScreenHeader.js"
 import { ConnectedWallets } from "./ConnectedWallets.js"
@@ -103,10 +103,11 @@ const FundMethods: React.FC<FundMethodsProps> = ({
             <button
               type="button"
               onClick={onSelectExchangeList}
-              className="w-full text-left px-3 py-4 text-sm flex items-center justify-between cursor-pointer transition-colors trails-text-primary trails-hover-bg"
+              disabled
+              className="w-full text-left px-3 py-4 text-sm flex items-center justify-between cursor-not-allowed transition-colors opacity-50"
             >
               <div className="flex items-center gap-3">
-                <Send className="w-4 h-4" />
+                <ArrowLeftRight className="w-4 h-4" />
                 <span className="text-sm font-bold">Send from Exchange</span>
               </div>
               <ChevronRight className="w-5 h-5 text-gray-400" />

package/src/widget/components/FundSwap.tsx

@@ -24,7 +24,6 @@ interface FundProps {
   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

package/src/widget/components/Pay.tsx

@@ -37,6 +37,7 @@ import { RequiredPropsError } from "./RequiredPropsError.js"
 import { FundingMethodSelectorButton } from "./FundingMethodSelectorButton.js"
 import { PercentageMaxButtons } from "./PercentageMaxButtons.js"
 import { useDynamicInputStyles } from "./DynamicInputStyles.js"
+import { DynamicSizeInputField } from "./DynamicSizeInputField.js"
 
 interface PayProps {
   selectedToken?: any // Origin token (optional - user can select)
@@ -50,7 +51,6 @@ interface PayProps {
   onComplete: (result: OnCompleteProps) => void
   onSend: (amount: string, recipient: string) => void
   paymasterUrls?: Array<{ chainId: number; url: string }>
-  gasless?: boolean
   isSequenceWallet?: boolean
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   quoteProvider?: string
@@ -88,7 +88,6 @@ export const Pay: React.FC<PayProps> = ({
   onComplete,
   onSend,
   paymasterUrls,
-  gasless,
   isSequenceWallet = false,
   setWalletConfirmRetryHandler,
   quoteProvider,
@@ -210,7 +209,6 @@ export const Pay: React.FC<PayProps> = ({
     onError,
     onWaitingForWalletConfirm,
     paymasterUrls,
-    gasless,
     onConfirm,
     onComplete,
     onSend,
@@ -457,11 +455,6 @@ export const Pay: React.FC<PayProps> = ({
   // Dynamic font size based on input length for destination amount
   const inputStyles = useDynamicInputStyles({ inputValue: displayAmount })
 
-  // Dynamic font size based on input length for origin amount (Pay with section)
-  const originInputStyles = useDynamicInputStyles({
-    inputValue: prepareSendQuote?.originAmountFormatted || "",
-  })
-
   const handleOriginTokenSelect = useCallback(
     (token: any) => {
       const formattedToken = {
@@ -705,16 +698,12 @@ export const Pay: React.FC<PayProps> = ({
                 {/* Amount Display - Non-editable */}
                 <div className="flex-1">
                   <div className="flex items-center space-x-2">
-                    <input
+                    <DynamicSizeInputField
                       ref={paymentRequestInputRef}
-                      type="text"
                       value={prepareSendQuote?.originAmountFormatted || ""}
-                      placeholder={"0"}
                       readOnly={true}
-                      className={`w-full bg-transparent font-bold trails-text-primary border-none outline-none ${
-                        isLoadingQuote ? "animate-pulse" : ""
-                      }`}
-                      style={originInputStyles}
+                      isLoading={isLoadingQuote}
+                      variant="default"
                     />
                     {isLoadingQuote && (
                       <div className="animate-spin rounded-full h-4 w-4 border-solid border-b-2 trails-primary" />
@@ -951,6 +940,7 @@ export const Pay: React.FC<PayProps> = ({
                       onChange={(e) => handleAmountChange(e.target.value)}
                       placeholder={`0 ${selectedDestToken?.symbol || ""}`}
                       readOnly={!!toAmount}
+                      autoComplete="off"
                       className={`w-full bg-transparent font-bold trails-text-primary placeholder:trails-text-muted border-none outline-none ${
                         isLoadingQuote ? "animate-pulse" : ""
                       }`}
@@ -1034,12 +1024,17 @@ export const Pay: React.FC<PayProps> = ({
         selectedFeeToken={selectedFeeToken}
         setSelectedFeeToken={(token) => setSelectedFeeToken(token as any)}
         chainId={originToken?.chainId}
+        isRefetching={isLoadingQuote}
       />
 
       {/* Quote Details */}
       {prepareSendQuote && (
         <div className="mb-4">
-          <QuoteDetails quote={prepareSendQuote} showContent={true} />
+          <QuoteDetails
+            quote={prepareSendQuote}
+            showContent={true}
+            isRefetching={isLoadingQuote}
+          />
         </div>
       )}
 

package/src/widget/components/PoolDeposit.tsx

@@ -13,7 +13,6 @@ import type { TransactionState } from "../../transactions.js"
 import type { OnCompleteProps } from "../hooks/useSendForm.js"
 import type { CheckoutOnHandlers } from "../hooks/useCheckout.js"
 import { useSendForm } from "../hooks/useSendForm.js"
-import { TradeType } from "../../prepareSend.js"
 import { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
 import { useEarnPool } from "../hooks/useEarnPool.js"
 import { useTokenList } from "../hooks/useTokenList.js"
@@ -32,10 +31,11 @@ import { useAmountUsd } from "../hooks/useAmountUsd.js"
 import { getExplorerUrlForAddress } from "../../explorer.js"
 import aaveLogo from "../assets/aave.svg"
 import morphoLogo from "../assets/morpho.svg"
-import type { PrepareSendQuote } from "../../prepareSend.js"
+import { TradeType, type PrepareSendQuote } from "../../prepareSend.js"
 import type { SupportedToken } from "../../tokens.js"
 import { logger } from "../../logger.js"
-import { useDynamicInputStyles } from "./DynamicInputStyles.js"
+import { DynamicSizeInputField } from "./DynamicSizeInputField.js"
+import { FeeOptions } from "./FeeOptions.js"
 
 interface PoolDepositProps {
   account?: Account
@@ -47,7 +47,6 @@ interface PoolDepositProps {
   onComplete: (result: OnCompleteProps) => void
   onSend: (amount: string, recipient: string) => void
   paymasterUrls?: Array<{ chainId: number; url: string }>
-  gasless?: boolean
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   quoteProvider?: string
   fundMethod?: string
@@ -77,7 +76,6 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
   onComplete,
   onSend,
   paymasterUrls,
-  gasless,
   setWalletConfirmRetryHandler,
   quoteProvider,
   fundMethod,
@@ -118,6 +116,9 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
     isSubmitting,
     buttonText,
     isValidRecipient,
+    feeOptions,
+    selectedFeeToken,
+    setSelectedFeeToken,
   } = useSendForm({
     account,
     toAmount: undefined,
@@ -130,10 +131,9 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
     onError,
     onWaitingForWalletConfirm,
     paymasterUrls,
-    gasless,
+    onSend,
     onConfirm,
     onComplete,
-    onSend,
     selectedToken: originToken as any,
     setWalletConfirmRetryHandler,
     tradeType: TradeType.EXACT_INPUT,
@@ -183,20 +183,22 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
     }
   }, [])
 
-  // Notify parent component about pool selector visibility
+  // Notify parent component about pool selector and token selector visibility
   useEffect(() => {
     if (onPoolSelectorStateChange) {
-      // Only hide tabs when showing EarnPools selector
-      onPoolSelectorStateChange(showEarnPools)
+      // Hide tabs when showing EarnPools selector, token selector, or chain list
+      onPoolSelectorStateChange(
+        showEarnPools || showOriginTokenSelector || showOriginChainList,
+      )
     }
-  }, [showEarnPools, onPoolSelectorStateChange])
+  }, [
+    showEarnPools,
+    showOriginTokenSelector,
+    showOriginChainList,
+    onPoolSelectorStateChange,
+  ])
 
   const handleAmountChange = (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)
     setSendFormAmount(value) // Sync with useSendForm for quote functionality
   }
@@ -231,12 +233,6 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
     setSendFormAmount(selectedAmount)
   }
 
-  // Dynamic font size based on input length
-  const inputStyles = useDynamicInputStyles({
-    inputValue: amount,
-    variant: "default",
-  })
-
   if (showOriginChainList) {
     return (
       <ChainList
@@ -295,18 +291,12 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
           {/* Amount Input */}
           <div className="flex-1">
             <div className="flex items-center space-x-2">
-              <input
+              <DynamicSizeInputField
                 ref={inputRef}
-                id="amount"
-                type="text"
                 value={amount}
                 onChange={(e) => handleAmountChange(e.target.value)}
-                placeholder={"0"}
-                className={`w-full bg-transparent font-bold trails-text-primary placeholder:trails-text-muted border-none outline-none ${
-                  isLoadingQuote ? "animate-pulse" : ""
-                }`}
-                style={inputStyles}
-                inputMode="decimal"
+                isLoading={isLoadingQuote}
+                variant="default"
               />
               {isLoadingQuote && (
                 <div className="animate-spin rounded-full h-4 w-4 border-solid border-b-2 trails-primary" />
@@ -528,10 +518,23 @@ export const PoolDeposit: React.FC<PoolDepositProps> = ({
         </div>
       ) : null}
 
+      {/* Fee Options */}
+      <FeeOptions
+        feeOptions={feeOptions || []}
+        selectedFeeToken={selectedFeeToken}
+        setSelectedFeeToken={(token) => setSelectedFeeToken(token as any)}
+        chainId={originToken?.chainId}
+        isRefetching={isLoadingQuote}
+      />
+
       {/* Quote Details */}
       {prepareSendQuote && (
         <div className="mb-4">
-          <QuoteDetails quote={prepareSendQuote} showContent={true} />
+          <QuoteDetails
+            quote={prepareSendQuote}
+            showContent={true}
+            isRefetching={isLoadingQuote}
+          />
         </div>
       )}