0xtrails 0.2.6 → 0.4.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,38 +17,24 @@ 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 { useDynamicInputStyles } from "./DynamicInputStyles.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
   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
@@ -65,23 +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)
@@ -138,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: [
             {
@@ -182,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(() => {
@@ -218,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) {
@@ -242,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: [
             {
@@ -258,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: [
             {
@@ -301,7 +263,7 @@ 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(() => {
@@ -341,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
@@ -369,127 +331,6 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
     }
   }, [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,
@@ -506,43 +347,6 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
     })
   }, [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) {
@@ -553,19 +357,82 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
   // Notify parent component about pool selector visibility
   useEffect(() => {
     if (onPoolSelectorStateChange) {
-      // Only hide tabs when showing EarnPools selector
+      // Hide tabs when showing EarnPools selector (no token selector in withdraw)
       onPoolSelectorStateChange(showEarnPools)
     }
   }, [showEarnPools, onPoolSelectorStateChange])
 
-  const handleAmountChange = (value: string) => {
-    // Validate decimal places (max 8 decimals)
-    const decimalMatch = value.match(/^\d*\.?\d{0,8}$/)
-    if (!decimalMatch && value !== "") {
-      return // Don't update if more than 8 decimals
+  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,
+        )
+      }
+    }
+  }, [publicClient, selectedPool, account, amountToWithdraw])
+
+  // Estimate gas when pool selected and amount is set
+  useEffect(() => {
+    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) => {
     setAmount(value)
-    setSendFormAmount(value) // Sync with useSendForm for quote functionality
+    setAmountToWithdraw(value) // Sync with useSendForm for quote functionality
   }
 
   const handlePoolSelect = (pool: any) => {
@@ -577,14 +444,65 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
   // Handle amount selection from percentage buttons
   const handleAmountSelect = (selectedAmount: string) => {
     setAmount(selectedAmount)
-    setSendFormAmount(selectedAmount)
+    setAmountToWithdraw(selectedAmount)
   }
 
-  // Dynamic font size based on input length
-  const inputStyles = useDynamicInputStyles({
-    inputValue: amount,
-    variant: "default",
-  })
+  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(() => {
@@ -741,22 +659,13 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
             {/* Amount Input */}
             <div className="flex-1">
               <div className="flex items-center space-x-2">
-                <input
+                <DynamicSizeInputField
                   ref={inputRef}
-                  id="amount"
-                  type="text"
                   value={amount}
                   onChange={(e) => handleAmountChange(e.target.value)}
-                  placeholder={"0"}
-                  className={`w-full bg-transparent font-bold trails-text-primary placeholder:trails-text-muted border-none outline-none ${
-                    isLoadingQuote ? "animate-pulse" : ""
-                  }`}
-                  style={inputStyles}
-                  inputMode="decimal"
+                  isLoading={isLoadingWithdraw}
+                  variant="default"
                 />
-                {isLoadingQuote && (
-                  <div className="animate-spin rounded-full h-4 w-4 border-solid border-b-2 trails-primary" />
-                )}
               </div>
             </div>
 
@@ -808,7 +717,7 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
                 <PercentageMaxButtons
                   userBalance={poolBalance || undefined}
                   isNativeToken={false} // Pool tokens are never native tokens
-                  gasCostFormatted={prepareSendQuote?.gasCostFormatted}
+                  gasCostFormatted={gasCostFormatted}
                   chainId={selectedPool.chainId}
                   onAmountSelect={handleAmountSelect}
                   className="opacity-100"
@@ -819,7 +728,7 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
         </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
@@ -843,35 +752,23 @@ export const PoolWithdraw: React.FC<PoolWithdrawProps> = ({
         </div>
       ) : null}
 
-      {/* Quote Details */}
-      {prepareSendQuote && (
-        <div className="mb-4">
-          <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"