0xtrails 0.13.1 → 0.14.0

package/src/widget/components/PoolWithdraw.tsx

@@ -1,761 +0,0 @@
-import { ChevronRight, Search, TrendingUp } from "lucide-react"
-import type React from "react"
-import { useEffect, useMemo, useRef, useState } from "react"
-import type { Account, Chain, WalletClient } from "viem"
-import { formatUnits, parseAbi, parseUnits } from "viem"
-import { usePublicClient } from "wagmi"
-import { getChainInfo } from "../../chains.js"
-import { getExplorerUrlForAddress } from "../../explorer.js"
-import { sendOriginTransaction } from "../../intents.js"
-import { logger } from "../../logger.js"
-import {
-  generateAaveWithdrawCalldata,
-  generateMorphoWithdrawCalldata,
-} from "../../poolUtils.js"
-import {
-  formatTvl,
-  formatAmount,
-  formatAmountLocaleDisplay,
-  formatUsdAmountLocaleDisplay,
-} from "../../utils/format.js"
-import type { Token } from "../../tokens.js"
-import { getTransactionStateFromReceipt } from "../../transactionIntent/index.js"
-import type { TransactionState } from "../../transactions.js"
-import aaveLogo from "../assets/aave.svg"
-import morphoLogo from "../assets/morpho.svg"
-import { useAmountUsd } from "../hooks/useAmountUsd.js"
-import { useBalanceVisible } from "../hooks/useBalanceVisible.js"
-import type { CheckoutOnHandlers } from "../hooks/useCheckout.js"
-import { useEarnPool } from "../hooks/useEarnPool.js"
-import type { OnCompleteProps } from "../hooks/useSendForm.js"
-import { DynamicSizeInputField } from "./DynamicSizeInputField.js"
-import { EarnPools } from "./EarnPools.js"
-import { PercentageMaxButtons } from "./PercentageMaxButtons.js"
-import { TokenDisplayNonSelectable } from "./TokenDisplayNonSelectable.js"
-import { TokenImage } from "./TokenImage.js"
-import LoadingSpinner from "./LoadingSpinner.js"
-
-interface PoolWithdrawProps {
-  account?: Account
-  walletClient?: WalletClient
-  onTransactionStateChange: (transactionStates: TransactionState[]) => void
-  onError: (error: Error | string | null) => void
-  onComplete: (result: OnCompleteProps) => void
-  checkoutOnHandlers?: CheckoutOnHandlers
-  recentTokens?: Token[]
-  onRecentTokenSelect?: (token: Token) => void
-  onTrackToken?: (token: any) => void
-  onPoolSelectorStateChange?: (isShowing: boolean) => void
-}
-
-export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
-  account,
-  walletClient,
-  onTransactionStateChange,
-  onError,
-  onComplete,
-  onPoolSelectorStateChange,
-}) => {
-  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)
-  const [poolBalance, setPoolBalance] = useState<string | null>(null)
-  const [poolBalanceRaw, setPoolBalanceRaw] = useState<string | null>(null)
-  const [poolBalanceWei, setPoolBalanceWei] = useState<string | null>(null)
-  const [isLoadingBalance, setIsLoadingBalance] = useState(false)
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  // 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
-        }
-        // 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()
-  }, [publicClient, 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)
-        setPoolBalanceRaw(null)
-        setPoolBalanceWei(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)
-        setPoolBalanceRaw(null)
-        setPoolBalanceWei(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
-        }
-
-        // 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,
-        })
-        const balanceFormattedLocale = formatAmountLocaleDisplay(
-          balanceInTokenUnits,
-          {
-            maxFractionDigits: 6,
-            minFractionDigits: 0,
-          },
-        )
-
-        logger.console.log("[pool-withdraw] ✅ Successfully fetched balance:", {
-          tokenAddress: tokenToQuery,
-          balanceRaw: balance.toString(),
-          decimals,
-          balanceInTokenUnits,
-          balanceFormatted,
-          balanceFormattedLocale,
-        })
-
-        setPoolBalance(balanceFormattedLocale || balanceFormatted)
-        setPoolBalanceRaw(balanceFormatted) // Always store US format for calculations
-        setPoolBalanceWei(balance.toString()) // Store actual raw balance in wei for precise Max calculations
-        setIsLoadingBalance(false)
-      } catch (error) {
-        logger.console.error("[pool-withdraw] ❌ Error fetching balance:", {
-          error,
-          selectedPool: selectedPool.name,
-          aTokenAddress,
-        })
-        setPoolBalance(null)
-        setPoolBalanceRaw(null)
-        setPoolBalanceWei(null)
-        setIsLoadingBalance(false)
-      }
-    }
-
-    fetchPoolBalance()
-  }, [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"
-
-    // 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(
-          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
-      }
-
-      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])
-
-  // Calculate USD value using the underlying token (for pool tokens like aBasUSDC)
-  const {
-    amountUsdFormatted: underlyingTokenUsdDisplay,
-    amountUsdFormattedLocale: underlyingTokenUsdLocaleDisplay,
-  } = useAmountUsd({
-    amount: amount,
-    token: selectedPool?.token.address, // Use underlying token address (e.g., USDC for aBasUSDC)
-    chainId: selectedPool?.chainId,
-  })
-
-  // Auto-focus input field on component mount
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus()
-    }
-  }, [])
-
-  // Notify parent component about pool selector visibility
-  useEffect(() => {
-    if (onPoolSelectorStateChange) {
-      // Hide tabs when showing EarnPools selector (no token selector in withdraw)
-      onPoolSelectorStateChange(showEarnPools)
-    }
-  }, [showEarnPools, onPoolSelectorStateChange])
-
-  // 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,
-        )
-      }
-    }
-  }, [publicClient, selectedPool, account, amountToWithdraw])
-
-  const handleAmountChange = (value: string) => {
-    setAmount(value)
-    setAmountToWithdraw(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)
-    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
-        onBack={() => setShowEarnPools(false)}
-        onPoolSelect={handlePoolSelect}
-      />
-    )
-  }
-
-  return (
-    <div className="space-y-2">
-      {/* 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 ? (
-                        <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="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>
-
-            {/* 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"
-              title={
-                selectedPool && amount && underlyingTokenUsdDisplay
-                  ? underlyingTokenUsdDisplay
-                  : undefined
-              }
-            >
-              {selectedPool && amount ? (
-                <span className="notranslate" translate="no">
-                  ≈{" "}
-                  {underlyingTokenUsdLocaleDisplay ||
-                    underlyingTokenUsdDisplay ||
-                    formatUsdAmountLocaleDisplay(0)}
-                </span>
-              ) : (
-                <span>&nbsp;</span>
-              )}
-            </div>
-
-            {/* Pool Balance and Percentage Buttons */}
-            {poolBalance && (
-              <div className="flex items-center space-x-2">
-                <button
-                  type="button"
-                  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"
-                >
-                  <span className="notranslate" translate="no">
-                    Balance:{" "}
-                    {isBalanceVisible
-                      ? isLoadingBalance
-                        ? "Loading..."
-                        : poolBalance || "0.00"
-                      : "••••••"}
-                  </span>
-                </button>
-
-                {/* Percentage Buttons */}
-                <PercentageMaxButtons
-                  userBalance={poolBalanceRaw || undefined}
-                  userBalanceRaw={poolBalanceWei ?? "0"}
-                  decimals={selectedPool.token.decimals ?? 18}
-                  isNativeToken={false} // Pool tokens are never native tokens
-                  chainId={selectedPool.chainId}
-                  onAmountSelect={handleAmountSelect}
-                  className="opacity-100"
-                />
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-
-      {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
-              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}
-
-      {selectedPool && (
-        <form onSubmit={handleSubmit}>
-          <button
-            type="submit"
-            disabled={
-              !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`}
-          >
-            {isLoadingWithdraw ? (
-              <div className="flex items-center justify-center">
-                <LoadingSpinner className="mr-2" />
-                <span>Processing...</span>
-              </div>
-            ) : hasEnoughATokens === false ? (
-              "Insufficient Balance"
-            ) : (
-              "Withdraw"
-            )}
-          </button>
-        </form>
-      )}
-    </div>
-  )
-}