0xtrails 0.2.4 → 0.2.5

package/src/widget/components/PoolWithdraw.tsx

@@ -0,0 +1,903 @@
+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 { 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"
+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"
+
+interface PoolWithdrawProps {
+  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
+}
+
+export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
+  account,
+  walletClient,
+  onTransactionStateChange,
+  onError,
+  onWaitingForWalletConfirm,
+  onConfirm,
+  onComplete,
+  onSend,
+  paymasterUrls,
+  gasless,
+  setWalletConfirmRetryHandler,
+  quoteProvider,
+  fundMethod,
+  onNavigateToMeshConnect,
+  checkoutOnHandlers,
+}) => {
+  const { mode } = useMode()
+  const { isBalanceVisible } = useBalanceVisible()
+  const { selectedPool, setSelectedPool } = useEarnPool()
+
+  const [showEarnPools, setShowEarnPools] = useState(false)
+  const [amount, setAmount] = useState("")
+  const [aTokenAddress, setATokenAddress] = useState<string | null>(null)
+  const [poolBalance, setPoolBalance] = useState<string | null>(null)
+  const [isLoadingBalance, setIsLoadingBalance] = useState(false)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  // Log when pool is selected
+  useEffect(() => {
+    if (selectedPool) {
+      logger.console.log("[pool-withdraw] Pool selected:", {
+        name: selectedPool.name,
+        protocol: selectedPool.protocol,
+        chainId: selectedPool.chainId,
+        depositAddress: selectedPool.depositAddress,
+        tokenAddress: selectedPool.token.address,
+        tokenSymbol: selectedPool.token.symbol,
+        tokenDecimals: selectedPool.token.decimals,
+      })
+    } else {
+      logger.console.log("[pool-withdraw] No pool selected")
+    }
+  }, [selectedPool])
+
+  // Fetch aToken address for Aave pools
+  useEffect(() => {
+    const fetchATokenAddress = async () => {
+      if (!selectedPool || selectedPool.protocol !== "Aave") {
+        logger.console.log(
+          "[pool-withdraw] Not an Aave pool, skipping aToken fetch",
+          {
+            hasPool: !!selectedPool,
+            protocol: selectedPool?.protocol,
+          },
+        )
+        setATokenAddress(null)
+        return
+      }
+
+      logger.console.log(
+        "[pool-withdraw] Fetching aToken address for Aave pool...",
+        {
+          poolAddress: selectedPool.depositAddress,
+          underlyingAsset: selectedPool.token.address,
+        },
+      )
+
+      try {
+        const chain = getChainInfo(selectedPool.chainId)
+        if (!chain) {
+          logger.console.error(
+            "[pool-withdraw] Chain not found:",
+            selectedPool.chainId,
+          )
+          return
+        }
+
+        const publicClient = createPublicClient({
+          chain,
+          transport: http(),
+        })
+
+        // Call getReserveAToken on the pool contract to get aToken address
+        const aTokenAddr = (await publicClient.readContract({
+          address: selectedPool.depositAddress as `0x${string}`,
+          abi: [
+            {
+              name: "getReserveAToken",
+              type: "function",
+              stateMutability: "view",
+              inputs: [{ name: "asset", type: "address" }],
+              outputs: [{ type: "address" }],
+            },
+          ],
+          functionName: "getReserveAToken",
+          args: [selectedPool.token.address as `0x${string}`],
+        })) as string
+
+        logger.console.log(
+          "[pool-withdraw] ✅ Successfully fetched aToken address:",
+          {
+            aTokenAddress: aTokenAddr,
+            underlyingAsset: selectedPool.token.address,
+          },
+        )
+        setATokenAddress(aTokenAddr)
+      } catch (error) {
+        logger.console.error(
+          "[pool-withdraw] ❌ Error fetching aToken address:",
+          {
+            error,
+            poolAddress: selectedPool.depositAddress,
+            underlyingAsset: selectedPool.token.address,
+          },
+        )
+        setATokenAddress(null)
+      }
+    }
+
+    fetchATokenAddress()
+  }, [selectedPool])
+
+  // Fetch pool balance (aToken balance for Aave, pool contract balance for Morpho, pool token balance for others)
+  useEffect(() => {
+    const fetchPoolBalance = async () => {
+      if (!selectedPool || !account) {
+        logger.console.log("[pool-withdraw] Cannot fetch balance:", {
+          hasPool: !!selectedPool,
+          hasAccount: !!account,
+        })
+        setPoolBalance(null)
+        return
+      }
+
+      // For Aave, wait for aToken address to be fetched
+      if (selectedPool.protocol === "Aave" && !aTokenAddress) {
+        logger.console.log(
+          "[pool-withdraw] Waiting for aToken address before fetching balance",
+        )
+        setPoolBalance(null)
+        return
+      }
+
+      setIsLoadingBalance(true)
+
+      try {
+        const chain = getChainInfo(selectedPool.chainId)
+        if (!chain) {
+          logger.console.error(
+            "[pool-withdraw] Chain not found:",
+            selectedPool.chainId,
+          )
+          setIsLoadingBalance(false)
+          return
+        }
+
+        const publicClient = createPublicClient({
+          chain,
+          transport: http(),
+        })
+
+        // Determine which token address to query
+        let tokenToQuery: string
+        if (selectedPool.protocol === "Aave" && aTokenAddress) {
+          tokenToQuery = aTokenAddress // Use aToken for Aave
+        } else if (selectedPool.protocol === "Morpho") {
+          tokenToQuery = selectedPool.depositAddress // Use pool contract for Morpho
+        } else {
+          tokenToQuery = selectedPool.token.address // Use underlying token for others
+        }
+
+        logger.console.log("[pool-withdraw] Fetching balance:", {
+          protocol: selectedPool.protocol,
+          tokenToQuery,
+          isAToken: selectedPool.protocol === "Aave",
+          isMorphoPool: selectedPool.protocol === "Morpho",
+          userAddress: account.address,
+        })
+
+        // Fetch balance using balanceOf
+        const balance = (await publicClient.readContract({
+          address: tokenToQuery as `0x${string}`,
+          abi: [
+            {
+              name: "balanceOf",
+              type: "function",
+              stateMutability: "view",
+              inputs: [{ name: "account", type: "address" }],
+              outputs: [{ type: "uint256" }],
+            },
+          ],
+          functionName: "balanceOf",
+          args: [account.address],
+        })) as bigint
+
+        // Fetch decimals
+        const decimals = (await publicClient.readContract({
+          address: tokenToQuery as `0x${string}`,
+          abi: [
+            {
+              name: "decimals",
+              type: "function",
+              stateMutability: "view",
+              inputs: [],
+              outputs: [{ type: "uint8" }],
+            },
+          ],
+          functionName: "decimals",
+        })) as number
+
+        // Format balance using viem's formatUnits and our formatAmount utility
+        const balanceInTokenUnits = formatUnits(balance, decimals)
+        const balanceFormatted = formatAmount(balanceInTokenUnits, {
+          maxFractionDigits: 6,
+          minFractionDigits: 0,
+        })
+
+        logger.console.log("[pool-withdraw] ✅ Successfully fetched balance:", {
+          tokenAddress: tokenToQuery,
+          balanceRaw: balance.toString(),
+          decimals,
+          balanceInTokenUnits,
+          balanceFormatted,
+        })
+
+        setPoolBalance(balanceFormatted)
+        setIsLoadingBalance(false)
+      } catch (error) {
+        logger.console.error("[pool-withdraw] ❌ Error fetching balance:", {
+          error,
+          selectedPool: selectedPool.name,
+          aTokenAddress,
+        })
+        setPoolBalance(null)
+        setIsLoadingBalance(false)
+      }
+    }
+
+    fetchPoolBalance()
+  }, [selectedPool, aTokenAddress, account])
+
+  // Generate withdraw calldata dynamically based on user's entered amount
+  const withdrawCalldata = useMemo(() => {
+    const isAave = selectedPool?.protocol === "Aave"
+    const isMorpho = selectedPool?.protocol === "Morpho"
+
+    // Only generate calldata for Aave and Morpho protocols
+    if (!selectedPool || (!isAave && !isMorpho) || !amount || amount === "0") {
+      logger.console.log("[pool-withdraw] Skipping calldata generation:", {
+        hasPool: !!selectedPool,
+        protocol: selectedPool?.protocol,
+        isAave,
+        isMorpho,
+        amount,
+      })
+      return undefined
+    }
+
+    try {
+      // Convert amount to wei using the token's decimals
+      const amountWei = parseUnits(amount, selectedPool.token.decimals || 18)
+
+      let calldata: `0x${string}`
+
+      if (isAave) {
+        calldata = generateAaveWithdrawCalldata(
+          selectedPool.token.address, // underlying asset (e.g., USDC)
+          amountWei, // actual amount to withdraw in wei
+          account.address, // recipient (user's wallet)
+        )
+      } 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)
+        )
+      } else {
+        return undefined
+      }
+
+      logger.console.log("[pool-withdraw] Generated withdraw calldata:", {
+        pool: selectedPool.name,
+        protocol: selectedPool.protocol,
+        asset: selectedPool.token.address,
+        amount: amount,
+        amountWei: amountWei.toString(),
+        recipient: account.address,
+        calldata,
+      })
+
+      return calldata
+    } catch (error) {
+      logger.console.error(
+        "[pool-withdraw] ❌ Error generating calldata:",
+        error,
+      )
+      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,
+  })
+
+  // Calculate USD value using the underlying token (for pool tokens like aBasUSDC)
+  const { amountUsdFormatted: underlyingTokenUsdDisplay } = useAmountUsd({
+    amount: amount,
+    token: selectedPool?.token.address, // Use underlying token address (e.g., USDC for aBasUSDC)
+    chainId: selectedPool?.chainId,
+  })
+
+  // Log pool balance when it changes
+  useEffect(() => {
+    logger.console.log("[pool-withdraw] Pool balance updated:", {
+      poolBalance,
+      hasBalance: !!poolBalance,
+      isLoadingBalance,
+    })
+  }, [poolBalance, isLoadingBalance])
+
+  // Log the destination token returned from useSendForm
+  useEffect(() => {
+    logger.console.log("[pool-withdraw] Destination token from useSendForm:", {
+      symbol: returnedDestToken?.symbol,
+      name: returnedDestToken?.name,
+      decimals: returnedDestToken?.decimals,
+      sourceTokenAddress: finalSelectedToken?.contractAddress,
+    })
+  }, [returnedDestToken, finalSelectedToken])
+
+  // Set destination chain to match the pool's chain (same-chain transaction)
+  useEffect(() => {
+    if (selectedPool && supportedChains && setSelectedDestinationChain) {
+      const destinationChain = supportedChains.find(
+        (chain) => chain.id === selectedPool.chainId,
+      )
+
+      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),
+          },
+        )
+      }
+    }
+  }, [selectedPool, supportedChains, setSelectedDestinationChain])
+
+  // Auto-focus input field on component mount
+  useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.focus()
+    }
+  }, [])
+
+  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
+  }
+
+  const handlePoolSelect = (pool: any) => {
+    logger.console.log("Selected pool for withdrawal:", pool)
+    setSelectedPool(pool)
+    setShowEarnPools(false)
+  }
+
+  // Handle amount selection from percentage buttons
+  const handleAmountSelect = (selectedAmount: string) => {
+    setAmount(selectedAmount)
+    setSendFormAmount(selectedAmount)
+  }
+
+  if (showEarnPools) {
+    return (
+      <EarnPools
+        onBack={() => setShowEarnPools(false)}
+        onPoolSelect={handlePoolSelect}
+      />
+    )
+  }
+
+  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>
+              </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 ? (
+                          <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>
+                      </div>
+                    </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>
+              </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>
+                </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
+              </div>
+            </div>
+
+            <div className="flex items-center space-x-2">
+              {/* Amount Input */}
+              <div className="flex-1">
+                <button
+                  type="button"
+                  className="flex items-center justify-start cursor-text bg-transparent border-none p-0 w-full"
+                  onClick={() => inputRef.current?.focus()}
+                >
+                  <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>
+                </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}
+                  chainId={selectedPool.chainId}
+                  contractAddress={selectedPool.token.address}
+                  size={20}
+                />
+                <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>
+
+      {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}
+
+      {/* 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
+            }
+            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>
+            ) : prepareSendQuote?.noSufficientBalance ? (
+              "Insufficient Balance"
+            ) : (
+              "Withdraw"
+            )}
+          </button>
+        </form>
+      )}
+    </div>
+  )
+}