0xtrails 0.2.5 → 0.3.0

package/src/widget/components/PoolWithdraw.tsx

@@ -1,19 +1,15 @@
 import { TrendingUp, ChevronRight, Search, Loader2 } from "lucide-react"
 import { useEffect, useState, useRef, useMemo } from "react"
 import type React from "react"
-import type { Account, WalletClient } from "viem"
-import { createPublicClient, http, parseUnits, formatUnits } from "viem"
+import type { Account, Chain, WalletClient } from "viem"
+import { parseUnits, formatUnits, parseAbi } from "viem"
 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 { useEarnPool } from "../hooks/useEarnPool.js"
-import { useMode } from "../hooks/useMode.js"
 import { useBalanceVisible } from "../hooks/useBalanceVisible.js"
 import { TokenImage } from "./TokenImage.js"
 import { EarnPools } from "./EarnPools.js"
-import { QuoteDetails } from "./QuoteDetails.js"
 import { PercentageMaxButtons } from "./PercentageMaxButtons.js"
 import { formatTvl } from "../../prices.js"
 import { getExplorerUrlForAddress } from "../../explorer.js"
@@ -21,40 +17,29 @@ import { getChainInfo } from "../../chains.js"
 import { useAmountUsd } from "../hooks/useAmountUsd.js"
 import aaveLogo from "../assets/aave.svg"
 import morphoLogo from "../assets/morpho.svg"
-import type { PrepareSendQuote } from "../../prepareSend.js"
 import type { SupportedToken } from "../../tokens.js"
 import { logger } from "../../logger.js"
 import { generateAaveWithdrawCalldata } from "../../aave.js"
 import { generateMorphoWithdrawCalldata } from "../../morpho.js"
 import { formatAmount } from "../../tokenBalances.js"
+import { DynamicSizeInputField } from "./DynamicSizeInputField.js"
+import { TokenDisplayNonSelectable } from "./TokenDisplayNonSelectable.js"
+import { estimateGasCostFormatted, estimateGasLimit } from "../../estimate.js"
+import { sendOriginTransaction } from "../../intents.js"
+import { usePublicClient } from "wagmi"
+import { getTransactionStateFromReceipt } from "../../transactionIntent/index.js"
 
 interface PoolWithdrawProps {
-  account: Account
-  walletClient: WalletClient
+  account?: Account
+  walletClient?: WalletClient
   onTransactionStateChange: (transactionStates: TransactionState[]) => void
   onError: (error: Error | string | null) => void
-  onWaitingForWalletConfirm: (props: PrepareSendQuote) => void
-  onConfirm: () => void
   onComplete: (result: OnCompleteProps) => void
-  onSend: (amount: string, recipient: string) => void
-  paymasterUrls?: Array<{ chainId: number; url: string }>
-  gasless?: boolean
-  setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
-  quoteProvider?: string
-  fundMethod?: string
-  onNavigateToMeshConnect?: (
-    props: {
-      toTokenSymbol: string
-      toTokenAmount: string
-      toChainId: number
-      toRecipientAddress: string
-    },
-    quote?: PrepareSendQuote | null,
-  ) => void
   checkoutOnHandlers?: CheckoutOnHandlers
   recentTokens?: SupportedToken[]
   onRecentTokenSelect?: (token: SupportedToken) => void
   onTrackToken?: (token: any) => void
+  onPoolSelectorStateChange?: (isShowing: boolean) => void
 }
 
 export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
@@ -62,22 +47,14 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
   walletClient,
   onTransactionStateChange,
   onError,
-  onWaitingForWalletConfirm,
-  onConfirm,
   onComplete,
-  onSend,
-  paymasterUrls,
-  gasless,
-  setWalletConfirmRetryHandler,
-  quoteProvider,
-  fundMethod,
-  onNavigateToMeshConnect,
-  checkoutOnHandlers,
+  onPoolSelectorStateChange,
 }) => {
-  const { mode } = useMode()
   const { isBalanceVisible } = useBalanceVisible()
   const { selectedPool, setSelectedPool } = useEarnPool()
+  const publicClient = usePublicClient()
 
+  const [amountToWithdraw, setAmountToWithdraw] = useState("")
   const [showEarnPools, setShowEarnPools] = useState(false)
   const [amount, setAmount] = useState("")
   const [aTokenAddress, setATokenAddress] = useState<string | null>(null)
@@ -134,14 +111,8 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
           )
           return
         }
-
-        const publicClient = createPublicClient({
-          chain,
-          transport: http(),
-        })
-
         // Call getReserveAToken on the pool contract to get aToken address
-        const aTokenAddr = (await publicClient.readContract({
+        const aTokenAddr = (await publicClient?.readContract({
           address: selectedPool.depositAddress as `0x${string}`,
           abi: [
             {
@@ -178,7 +149,7 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
     }
 
     fetchATokenAddress()
-  }, [selectedPool])
+  }, [publicClient, selectedPool])
 
   // Fetch pool balance (aToken balance for Aave, pool contract balance for Morpho, pool token balance for others)
   useEffect(() => {
@@ -214,11 +185,6 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
           return
         }
 
-        const publicClient = createPublicClient({
-          chain,
-          transport: http(),
-        })
-
         // Determine which token address to query
         let tokenToQuery: string
         if (selectedPool.protocol === "Aave" && aTokenAddress) {
@@ -238,7 +204,7 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
         })
 
         // Fetch balance using balanceOf
-        const balance = (await publicClient.readContract({
+        const balance = (await publicClient?.readContract({
           address: tokenToQuery as `0x${string}`,
           abi: [
             {
@@ -254,7 +220,7 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
         })) as bigint
 
         // Fetch decimals
-        const decimals = (await publicClient.readContract({
+        const decimals = (await publicClient?.readContract({
           address: tokenToQuery as `0x${string}`,
           abi: [
             {
@@ -297,10 +263,17 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
     }
 
     fetchPoolBalance()
-  }, [selectedPool, aTokenAddress, account])
+  }, [publicClient, selectedPool, aTokenAddress, account])
 
   // Generate withdraw calldata dynamically based on user's entered amount
   const withdrawCalldata = useMemo(() => {
+    if (!account?.address) {
+      logger.console.log(
+        "[pool-withdraw] No account found, skipping calldata generation",
+      )
+      return undefined
+    }
+
     const isAave = selectedPool?.protocol === "Aave"
     const isMorpho = selectedPool?.protocol === "Morpho"
 
@@ -330,9 +303,9 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
         )
       } else if (isMorpho) {
         calldata = generateMorphoWithdrawCalldata(
-          selectedPool.token.address, // underlying asset (e.g., USDC)
-          amountWei, // actual amount to withdraw in wei
-          account.address, // recipient (user's wallet)
+          amountWei, // amount of underlying assets to withdraw in wei
+          account.address, // receiver (user's wallet)
+          account.address, // owner (user's wallet - owns the shares)
         )
       } else {
         return undefined
@@ -356,128 +329,7 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
       )
       return undefined
     }
-  }, [selectedPool, amount, account.address])
-
-  // Convert pool to token format for useSendForm
-  // For Aave, use the aToken address
-  // For Morpho, use the pool contract address
-  // For others, use the underlying token address
-  const poolToken = useMemo(() => {
-    if (!selectedPool) {
-      logger.console.log("[pool-withdraw] No pool selected, poolToken is null")
-      return null
-    }
-
-    const isAave = selectedPool.protocol === "Aave"
-    const isMorpho = selectedPool.protocol === "Morpho"
-
-    let contractAddressToUse: string
-    if (isAave && aTokenAddress) {
-      contractAddressToUse = aTokenAddress
-    } else if (isMorpho) {
-      contractAddressToUse = selectedPool.depositAddress
-    } else {
-      contractAddressToUse = selectedPool.token.address
-    }
-
-    logger.console.log("[pool-withdraw] Constructing poolToken object:", {
-      poolName: selectedPool.name,
-      protocol: selectedPool.protocol,
-      isAave,
-      isMorpho,
-      aTokenAddress,
-      depositAddress: selectedPool.depositAddress,
-      underlyingTokenAddress: selectedPool.token.address,
-      willUseAddress: contractAddressToUse,
-    })
-
-    const token = {
-      symbol: selectedPool.token.symbol,
-      imageUrl: selectedPool.token.logoUrl,
-      chainId: selectedPool.chainId,
-      contractAddress: contractAddressToUse,
-      decimals: selectedPool.token.decimals || 18,
-      contractInfo: {
-        decimals: selectedPool.token.decimals || 18,
-        contractAddress: contractAddressToUse,
-        symbol: selectedPool.token.symbol,
-        name: selectedPool.token.name || selectedPool.token.symbol,
-      },
-    } as any
-
-    logger.console.log("[pool-withdraw] ✅ Constructed poolToken:", token)
-
-    return token
-  }, [selectedPool, aTokenAddress])
-
-  // Use useSendForm for quote functionality
-  // Transaction is always sent TO the pool contract (depositAddress)
-  // For Aave, withdraw() calldata specifies the recipient (user's address)
-  // Set up source token (aToken for Aave, pool shares for Morpho)
-  const finalSelectedToken = poolToken
-    ? {
-        chainId: selectedPool?.chainId,
-        ...poolToken,
-      }
-    : null
-
-  // Log what we're passing to useSendForm
-  useEffect(() => {
-    logger.console.log("[pool-withdraw] useSendForm configuration:", {
-      hasAccount: !!account,
-      accountAddress: account?.address,
-      toRecipient: selectedPool?.depositAddress,
-      toChainId: selectedPool?.chainId,
-      toToken: finalSelectedToken?.contractAddress, // Use aToken/pool address as destination token
-      hasCalldata: !!withdrawCalldata,
-      calldataLength: withdrawCalldata?.length,
-      selectedToken: finalSelectedToken,
-      selectedTokenChainId: finalSelectedToken?.chainId,
-      selectedTokenAddress: finalSelectedToken?.contractAddress,
-      tradeType: "EXACT_INPUT",
-      amount: amount,
-      isSameChain: selectedPool?.chainId === finalSelectedToken?.chainId,
-      willBeSameToken: true, // toToken is same as selectedToken's contractAddress
-    })
-  }, [account, selectedPool, withdrawCalldata, finalSelectedToken, amount])
-
-  const {
-    balanceFormatted: _unusedBalanceFormatted, // Not used, we fetch balance separately
-    isLoadingQuote,
-    prepareSendQuote,
-    setAmount: setSendFormAmount,
-    handleSubmit,
-    isSubmitting,
-    buttonText,
-    isValidRecipient,
-    selectedDestToken: returnedDestToken, // Get the destination token set by useSendForm
-    setSelectedDestinationChain, // Function to set destination chain
-    supportedChains, // Available chains
-  } = useSendForm({
-    account,
-    toAmount: undefined,
-    toRecipient: selectedPool?.depositAddress, // Always the pool contract address
-    toChainId: selectedPool?.chainId,
-    toToken: finalSelectedToken?.contractAddress, // aToken address (Aave) or pool address (Morpho)
-    toCalldata: withdrawCalldata, // Aave/Morpho withdraw calldata
-    walletClient,
-    onTransactionStateChange,
-    onError,
-    onWaitingForWalletConfirm,
-    paymasterUrls,
-    gasless,
-    onConfirm,
-    onComplete,
-    onSend,
-    selectedToken: finalSelectedToken, // Source token (what we're withdrawing from)
-    setWalletConfirmRetryHandler,
-    tradeType: TradeType.EXACT_INPUT, // User specifies exact input amount to withdraw
-    quoteProvider,
-    fundMethod,
-    mode,
-    onNavigateToMeshConnect,
-    checkoutOnHandlers,
-  })
+  }, [selectedPool, amount, account?.address])
 
   // Calculate USD value using the underlying token (for pool tokens like aBasUSDC)
   const { amountUsdFormatted: underlyingTokenUsdDisplay } = useAmountUsd({
@@ -495,58 +347,92 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
     })
   }, [poolBalance, isLoadingBalance])
 
-  // Log the destination token returned from useSendForm
+  // Auto-focus input field on component mount
   useEffect(() => {
-    logger.console.log("[pool-withdraw] Destination token from useSendForm:", {
-      symbol: returnedDestToken?.symbol,
-      name: returnedDestToken?.name,
-      decimals: returnedDestToken?.decimals,
-      sourceTokenAddress: finalSelectedToken?.contractAddress,
-    })
-  }, [returnedDestToken, finalSelectedToken])
+    if (inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [])
 
-  // Set destination chain to match the pool's chain (same-chain transaction)
+  // Notify parent component about pool selector visibility
   useEffect(() => {
-    if (selectedPool && supportedChains && setSelectedDestinationChain) {
-      const destinationChain = supportedChains.find(
-        (chain) => chain.id === selectedPool.chainId,
-      )
+    if (onPoolSelectorStateChange) {
+      // Hide tabs when showing EarnPools selector (no token selector in withdraw)
+      onPoolSelectorStateChange(showEarnPools)
+    }
+  }, [showEarnPools, onPoolSelectorStateChange])
 
-      if (destinationChain) {
-        logger.console.log("[pool-withdraw] Setting destination chain:", {
-          chainId: destinationChain.id,
-          chainName: destinationChain.name,
-          poolChainId: selectedPool.chainId,
-          isSameChain: true,
-        })
-        setSelectedDestinationChain(destinationChain)
-      } else {
-        logger.console.warn(
-          "[pool-withdraw] Destination chain not found in supported chains:",
-          {
-            poolChainId: selectedPool.chainId,
-            supportedChainIds: supportedChains.map((c) => c.id),
-          },
+  const [gasCostFormatted, setGasCostFormatted] = useState("")
+
+  // For Aave, check if wallet has enough aTokens in order to withdraw
+  const [hasEnoughATokens, setHasEnoughATokens] = useState<boolean | null>(null)
+  useEffect(() => {
+    if (
+      publicClient &&
+      selectedPool &&
+      selectedPool.protocol === "Aave" &&
+      amountToWithdraw
+    ) {
+      try {
+        const checkHasEnoughATokens = async () => {
+          const aTokenAddress = selectedPool.token.address
+          const decimals = selectedPool.token.decimals || 18
+          const aTokenBalance = await publicClient?.readContract({
+            address: aTokenAddress as `0x${string}`,
+            abi: parseAbi([
+              "function balanceOf(address) view returns (uint256)",
+            ]),
+            functionName: "balanceOf",
+            args: [account?.address as `0x${string}`],
+          })
+          const aTokenBalanceFormatted = formatUnits(aTokenBalance, decimals)
+          setHasEnoughATokens(aTokenBalanceFormatted >= amountToWithdraw)
+        }
+        checkHasEnoughATokens()
+      } catch (error) {
+        logger.console.error(
+          "[pool-withdraw] ❌ Error checking has enough aTokens:",
+          error,
         )
       }
     }
-  }, [selectedPool, supportedChains, setSelectedDestinationChain])
+  }, [publicClient, selectedPool, account, amountToWithdraw])
 
-  // Auto-focus input field on component mount
+  // Estimate gas when pool selected and amount is set
   useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus()
+    const estimateGas = async () => {
+      if (publicClient && selectedPool && amountToWithdraw) {
+        try {
+          const gasLimit = await estimateGasLimit(publicClient, {
+            account: account?.address as `0x${string}`,
+            to: selectedPool.depositAddress as `0x${string}`,
+            data: withdrawCalldata as `0x${string}`,
+            value: 0n,
+          })
+          const gasCostFormatted = await estimateGasCostFormatted(
+            publicClient,
+            gasLimit || 100_000n,
+            18,
+          )
+          setGasCostFormatted(gasCostFormatted)
+        } catch (error) {
+          logger.console.error(
+            "[pool-withdraw] ❌ Error estimating gas:",
+            error,
+          )
+        }
+      } else {
+        logger.console.error(
+          "[pool-withdraw] ❌ Error estimating gas: no public client or selected pool or amount to withdraw",
+        )
+      }
     }
-  }, [])
+    estimateGas()
+  }, [publicClient, selectedPool, withdrawCalldata, account, amountToWithdraw])
 
   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
+    setAmountToWithdraw(value) // Sync with useSendForm for quote functionality
   }
 
   const handlePoolSelect = (pool: any) => {
@@ -558,9 +444,71 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
   // Handle amount selection from percentage buttons
   const handleAmountSelect = (selectedAmount: string) => {
     setAmount(selectedAmount)
-    setSendFormAmount(selectedAmount)
+    setAmountToWithdraw(selectedAmount)
+  }
+
+  const [isLoadingWithdraw, setIsLoadingWithdraw] = useState(false)
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    if (!account || !walletClient) {
+      throw new Error("No account or wallet client found")
+    }
+
+    try {
+      setIsLoadingWithdraw(true)
+
+      // Create initial pending state
+      const initialState: TransactionState = {
+        transactionHash: "", // Will be set after tx is sent
+        explorerUrl: "",
+        chainId: selectedPool?.chainId as number,
+        state: "pending",
+        label: "Withdraw",
+      }
+      onTransactionStateChange([initialState])
+
+      const txHash = await sendOriginTransaction(account, walletClient, {
+        to: selectedPool?.depositAddress as `0x${string}`,
+        data: withdrawCalldata as `0x${string}`,
+        value: 0n,
+        chain: walletClient.chain as Chain,
+      })
+
+      const receipt = await publicClient!.waitForTransactionReceipt({
+        hash: txHash,
+      })
+
+      // Convert receipt to TransactionState
+      const finalState = getTransactionStateFromReceipt(
+        receipt,
+        selectedPool?.chainId as number,
+        "Withdraw",
+      )
+
+      onTransactionStateChange([finalState])
+
+      // Navigate to receipt screen
+      onComplete({ transactionStates: [finalState] })
+
+      setIsLoadingWithdraw(false)
+    } catch (error) {
+      logger.console.error(
+        "[pool-withdraw] ❌ Error submitting withdraw:",
+        error,
+      )
+      setIsLoadingWithdraw(false)
+      onError(
+        error instanceof Error ? error.message : "Failed to withdraw from pool",
+      )
+    }
   }
 
+  // Get chain info for selected pool
+  const chainInfo = useMemo(() => {
+    return selectedPool ? getChainInfo(selectedPool.chainId) : null
+  }, [selectedPool])
+
   if (showEarnPools) {
     return (
       <EarnPools
@@ -572,273 +520,215 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
 
   return (
     <div className="space-y-2">
-      <div className="space-y-1">
-        {/* Pool Selection (Primary Section) */}
-        <div className="trails-bg-secondary trails-border-radius-container transition-all duration-200 border border-transparent hover:!bg-white dark:hover:!bg-white hover:border-gray-400 dark:hover:border-gray-500">
-          {selectedPool ? (
-            <div className="p-3 trails-border-radius-container trails-bg-secondary transition-all overflow-hidden">
-              {/* Vault Label */}
-              <div className="flex justify-between items-center mb-2">
-                <div className="text-sm font-semibold trails-text-secondary text-left">
-                  Withdraw From
-                </div>
+      {/* Pool Selection (Primary Section) */}
+      <div className="trails-bg-secondary trails-border-radius-container transition-all duration-200 border border-transparent hover:!bg-white dark:hover:!bg-white hover:border-gray-400 dark:hover:border-gray-500">
+        {selectedPool ? (
+          <div className="p-3 trails-border-radius-container trails-bg-secondary transition-all overflow-hidden">
+            {/* Vault Label */}
+            <div className="flex justify-between items-center mb-2">
+              <div className="text-sm font-semibold trails-text-secondary text-left">
+                From
               </div>
+            </div>
 
-              <div className="px-1">
-                <div className="flex items-center justify-between">
-                  <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}
-                          contractAddress={selectedPool.token.address}
-                          size={32}
-                        />
-                      </a>
-                    </div>
-                    <div>
-                      <h3 className="font-medium text-gray-900 dark:text-white text-sm">
-                        {selectedPool.poolUrl ? (
+            <div className="px-1">
+              <div className="flex items-center justify-between">
+                <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}
+                        contractAddress={selectedPool.token.address}
+                        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.poolUrl}
+                            href={selectedPool.protocolUrl}
                             target="_blank"
                             rel="noopener noreferrer"
                             className="hover:underline cursor-pointer"
                           >
-                            {selectedPool.name}
+                            {selectedPool.protocol}
                           </a>
                         ) : (
-                          selectedPool.name
+                          selectedPool.protocol
                         )}
-                      </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>
-                      </div>
+                      </span>
                     </div>
                   </div>
-                  <button
-                    type="button"
-                    title="Select Vault"
-                    onClick={() => setShowEarnPools(true)}
-                    className="text-right flex items-center space-x-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition-colors"
-                  >
-                    <div>
-                      <div className="flex items-center justify-end space-x-1 text-green-600 dark:text-green-400 mb-1 whitespace-nowrap">
-                        <TrendingUp className="w-3 h-3" />
-                        <span className="font-semibold text-sm">
-                          {selectedPool.apy.toFixed(1)}% APY
-                        </span>
-                      </div>
-                      <p className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
-                        TVL: {formatTvl(selectedPool.tvl)}
-                      </p>
-                    </div>
-                    <ChevronRight className="w-4 h-4 text-gray-400" />
-                  </button>
                 </div>
+                <button
+                  type="button"
+                  title="Select Vault"
+                  onClick={() => setShowEarnPools(true)}
+                  className="text-right flex items-center space-x-3 cursor-pointer hover:bg-gray-100 dark:hover:bg-gray-700 rounded p-2 transition-colors"
+                >
+                  <div>
+                    <div className="flex items-center justify-end space-x-1 text-green-600 dark:text-green-400 mb-1 whitespace-nowrap">
+                      <TrendingUp className="w-3 h-3" />
+                      <span className="font-semibold text-sm">
+                        {selectedPool.apy.toFixed(1)}% APY
+                      </span>
+                    </div>
+                    <p className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
+                      TVL: {formatTvl(selectedPool.tvl)}
+                    </p>
+                  </div>
+                  <ChevronRight className="w-4 h-4 text-gray-400" />
+                </button>
               </div>
             </div>
-          ) : (
-            <button
-              type="button"
-              onClick={() => setShowEarnPools(true)}
-              className="w-full py-6 px-4 trails-list-item trails-border-radius-container transition-all duration-200 cursor-pointer"
-            >
-              <div className="flex items-center justify-between">
-                <div className="flex items-center space-x-3 flex-1">
-                  <div className="w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
-                    <Search className="w-4 h-4 text-gray-400" />
-                  </div>
-                  <div className="text-left flex-1">
-                    <div className="font-semibold text-gray-900 dark:text-white text-sm">
-                      Select vault to withdraw from
-                    </div>
+          </div>
+        ) : (
+          <button
+            type="button"
+            onClick={() => setShowEarnPools(true)}
+            className="w-full py-6 px-4 trails-list-item trails-border-radius-container transition-all duration-200 cursor-pointer"
+          >
+            <div className="flex items-center justify-between">
+              <div className="flex items-center space-x-3 flex-1">
+                <div className="w-8 h-8 rounded-full bg-gray-100 dark:bg-gray-700 flex items-center justify-center">
+                  <Search className="w-4 h-4 text-gray-400" />
+                </div>
+                <div className="text-left flex-1">
+                  <div className="font-semibold text-gray-900 dark:text-white text-sm">
+                    Select vault to withdraw from
                   </div>
                 </div>
-                <ChevronRight className="w-4 h-4 trails-text-muted flex-shrink-0" />
               </div>
-            </button>
-          )}
-        </div>
+              <ChevronRight className="w-4 h-4 trails-text-muted flex-shrink-0" />
+            </div>
+          </button>
+        )}
+      </div>
 
-        {/* Amount Input Section */}
-        {selectedPool && (
-          <div className="trails-bg-secondary trails-bg-secondary-hover trails-border-radius-container p-3 group transition-all duration-200 border border-transparent focus-within:!bg-white dark:focus-within:!bg-gray-800 trails-focus-border-secondary">
-            {/* Withdraw Label */}
-            <div className="flex justify-between items-center mb-2">
-              <div className="text-sm font-semibold trails-text-secondary text-left">
-                Amount
+      {/* Amount Input Section */}
+      {selectedPool && (
+        <div className="pt-4 pb-4 mb-4 trails-bg-secondary trails-bg-secondary-hover trails-border-radius-container p-3 group transition-all duration-200 border border-transparent focus-within:!bg-white dark:focus-within:!bg-gray-800 trails-focus-border-secondary min-h-[120px] flex flex-col">
+          {/* Withdraw Label */}
+          <div className="mb-4 flex justify-between items-center">
+            <div className="text-sm font-medium trails-text-secondary text-left m-0">
+              Amount
+            </div>
+          </div>
+
+          <div className="flex items-center space-x-2 flex-1">
+            {/* Amount Input */}
+            <div className="flex-1">
+              <div className="flex items-center space-x-2">
+                <DynamicSizeInputField
+                  ref={inputRef}
+                  value={amount}
+                  onChange={(e) => handleAmountChange(e.target.value)}
+                  isLoading={isLoadingWithdraw}
+                  variant="default"
+                />
               </div>
             </div>
 
-            <div className="flex items-center space-x-2">
-              {/* Amount Input */}
-              <div className="flex-1">
+            {/* Token Display (Not Selectable) */}
+            <TokenDisplayNonSelectable
+              symbol={selectedPool.token.symbol}
+              imageUrl={selectedPool.token.logoUrl}
+              chainId={selectedPool.chainId}
+              contractAddress={selectedPool.token.address}
+              chainName={chainInfo?.name}
+            />
+          </div>
+
+          {/* Bottom Info Row */}
+          <div className="mt-4 flex justify-between items-center">
+            {/* USD Amount */}
+            <div className="text-xs text-gray-500 dark:text-gray-400">
+              {selectedPool && amount ? (
+                <>≈ {underlyingTokenUsdDisplay || "$0.00"}</>
+              ) : (
+                <span>&nbsp;</span>
+              )}
+            </div>
+
+            {/* Pool Balance and Percentage Buttons */}
+            {poolBalance && (
+              <div className="flex items-center space-x-2">
                 <button
                   type="button"
-                  className="flex items-center justify-start cursor-text bg-transparent border-none p-0 w-full"
-                  onClick={() => inputRef.current?.focus()}
+                  className="text-xs text-gray-500 dark:text-gray-400 cursor-pointer hover:text-gray-700 dark:hover:text-gray-200 transition-colors bg-transparent border-none p-0"
+                  onClick={() => handleAmountSelect(poolBalance || "0")}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault()
+                      handleAmountSelect(poolBalance || "0")
+                    }
+                  }}
+                  title="Click to withdraw full balance"
                 >
-                  <div className="flex items-center">
-                    <input
-                      ref={inputRef}
-                      type="text"
-                      value={amount}
-                      onChange={(e) => handleAmountChange(e.target.value)}
-                      placeholder="0"
-                      className={`bg-transparent border-none outline-none font-bold text-left trails-text-primary placeholder-trails-text-primary ${
-                        isLoadingQuote ? "animate-pulse" : ""
-                      }`}
-                      style={{
-                        fontSize:
-                          amount.length > 12
-                            ? "0.875rem"
-                            : amount.length > 9
-                              ? "1rem"
-                              : amount.length > 6
-                                ? "1.125rem"
-                                : amount.length > 3
-                                  ? "1.25rem"
-                                  : "1.5rem",
-                        width: `${Math.max((amount || "0").length, 1)}ch`,
-                        minWidth: "1ch",
-                        maxWidth: "270px",
-                        padding: "0",
-                        margin: "0",
-                        transition: "all 0.1s ease-in-out",
-                      }}
-                      inputMode="decimal"
-                    />
-                    <span
-                      className="font-bold text-gray-400 dark:text-gray-500"
-                      style={{
-                        fontSize:
-                          amount.length > 12
-                            ? "0.875rem"
-                            : amount.length > 9
-                              ? "1rem"
-                              : amount.length > 6
-                                ? "1.125rem"
-                                : amount.length > 3
-                                  ? "1.25rem"
-                                  : "1.5rem",
-                        marginLeft: "0.1em",
-                        padding: "0",
-                        transition: "all 0.2s ease-in-out",
-                      }}
-                    >
-                      {selectedPool?.token.symbol.slice(0, 4) || ""}
-                    </span>
-                    {isLoadingQuote && (
-                      <div className="ml-2 animate-spin rounded-full h-4 w-4 border-solid border-b-2 trails-primary" />
-                    )}
-                  </div>
+                  Pool Balance:{" "}
+                  {isBalanceVisible
+                    ? isLoadingBalance
+                      ? "Loading..."
+                      : poolBalance || "0.00"
+                    : "••••••"}
                 </button>
-              </div>
 
-              {/* Token Display (Not Selectable) */}
-              <div className="flex items-center space-x-2 trails-bg-card trails-border-radius-input px-2.5 py-1.5 border trails-border-primary">
-                <TokenImage
-                  symbol={selectedPool.token.symbol}
-                  imageUrl={selectedPool.token.logoUrl}
+                {/* Percentage Buttons */}
+                <PercentageMaxButtons
+                  userBalance={poolBalance || undefined}
+                  isNativeToken={false} // Pool tokens are never native tokens
+                  gasCostFormatted={gasCostFormatted}
                   chainId={selectedPool.chainId}
-                  contractAddress={selectedPool.token.address}
-                  size={20}
+                  onAmountSelect={handleAmountSelect}
+                  className="opacity-100"
                 />
-                <span className="font-medium trails-text-primary text-sm">
-                  {selectedPool.token.symbol}
-                </span>
               </div>
-            </div>
-
-            {/* Bottom Info Row */}
-            <div className="mt-2 flex justify-between items-center">
-              {/* USD Amount */}
-              <div className="text-xs trails-text-muted">
-                {selectedPool && amount ? (
-                  <>≈ {underlyingTokenUsdDisplay || "$0.00"}</>
-                ) : (
-                  <span>&nbsp;</span>
-                )}
-              </div>
-
-              {/* Pool Balance and Percentage Buttons */}
-              {poolBalance && (
-                <div className="flex items-center space-x-2">
-                  <button
-                    type="button"
-                    className="text-xs trails-text-muted cursor-pointer hover:trails-hover-text transition-colors bg-transparent border-none p-0"
-                    onClick={() => handleAmountSelect(poolBalance || "0")}
-                    onKeyDown={(e) => {
-                      if (e.key === "Enter" || e.key === " ") {
-                        e.preventDefault()
-                        handleAmountSelect(poolBalance || "0")
-                      }
-                    }}
-                    title="Click to withdraw full balance"
-                  >
-                    Pool Balance:{" "}
-                    {isBalanceVisible
-                      ? isLoadingBalance
-                        ? "Loading..."
-                        : poolBalance || "0.00"
-                      : "••••••"}
-                  </button>
-
-                  {/* Percentage Buttons */}
-                  <PercentageMaxButtons
-                    userBalance={poolBalance || undefined}
-                    isNativeToken={false} // Pool tokens are never native tokens
-                    gasCostFormatted={prepareSendQuote?.gasCostFormatted}
-                    chainId={selectedPool.chainId}
-                    onAmountSelect={handleAmountSelect}
-                    className="opacity-100"
-                  />
-                </div>
-              )}
-            </div>
+            )}
           </div>
-        )}
-      </div>
+        </div>
+      )}
 
-      {prepareSendQuote?.noSufficientBalance ? (
+      {hasEnoughATokens === false ? (
         <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
@@ -862,35 +752,23 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
         </div>
       ) : null}
 
-      {/* Quote Details */}
-      {prepareSendQuote && (
-        <div className="space-y-2">
-          <QuoteDetails quote={prepareSendQuote} showContent={true} />
-        </div>
-      )}
-
       {selectedPool && (
         <form onSubmit={handleSubmit}>
           <button
             type="submit"
             disabled={
-              !amount ||
-              !isValidRecipient ||
-              isSubmitting ||
-              isLoadingQuote ||
-              !prepareSendQuote ||
-              prepareSendQuote?.noSufficientBalance
+              !amount || isLoadingWithdraw || hasEnoughATokens === false
             }
             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 ? (
+            {isLoadingWithdraw ? (
               <div className="flex items-center justify-center">
                 <Loader2
                   className={`w-5 h-5 animate-spin mr-2 ${"text-gray-400"}`}
                 />
-                <span>{buttonText}</span>
+                <span>Processing...</span>
               </div>
-            ) : prepareSendQuote?.noSufficientBalance ? (
+            ) : hasEnoughATokens === false ? (
               "Insufficient Balance"
             ) : (
               "Withdraw"