0xtrails 0.13.1 → 0.14.0

package/src/widget/components/PoolDeposit.tsx

@@ -1,651 +0,0 @@
-import { ArrowDown, ChevronRight, Search, TrendingUp } from "lucide-react"
-import type React from "react"
-import { useEffect, useMemo, useRef, useState } from "react"
-import type { Account, WalletClient } from "viem"
-import { parseUnits, zeroAddress } from "viem"
-import { getExplorerUrlForAddress } from "../../explorer.js"
-import { logger } from "../../logger.js"
-import { TRAILS_ROUTER_PLACEHOLDER_AMOUNT } from "../../placeholder.js"
-import {
-  generateAaveDepositCalldata,
-  generateMorphoDepositCalldata,
-} from "../../poolUtils.js"
-import { TradeType, type PrepareSendQuote } from "../../prepareSend.js"
-import { formatTvl, formatUsdAmountLocaleDisplay } from "../../utils/format.js"
-import type { Token } from "../../tokens.js"
-import type { FundMethod } from "../../transactionIntent/types.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 { useViewManager } from "../hooks/useViewManager.js"
-import { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
-import type { ProcessedFeeOption } from "../hooks/useSelectedFeeOption.js"
-import type { OnCompleteProps } from "../hooks/useSendForm.js"
-import { useSendForm } from "../hooks/useSendForm.js"
-import { useTokenList } from "../hooks/useTokenList.js"
-import { useTokenWithFreshBalance } from "../hooks/useTokenWithFreshBalance.js"
-import { ChainList } from "./ChainList.js"
-import { DynamicSizeInputField } from "./DynamicSizeInputField.js"
-import { EarnPools } from "./EarnPools.js"
-import { isFeeOptionDisabled } from "./FeeOption.js"
-import { FeeOptions } from "./FeeOptions.js"
-import { PercentageMaxButtons } from "./PercentageMaxButtons.js"
-import { QuoteDetails } from "./QuoteDetails.js"
-import { ScreenHeader } from "./ScreenHeader.js"
-import FundingMethodSelectorButton from "./FundingMethodSelectorButton.js"
-import { TokenImage } from "./TokenImage.js"
-import { TokenSelector } from "./TokenSelector.js"
-import { TokenSelectorButton } from "./TokenSelectorButton.js"
-import LoadingSpinner from "./LoadingSpinner.js"
-
-interface PoolDepositProps {
-  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 }>
-  setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
-  swapProvider?: string
-  bridgeProvider?: string
-  swapProviderFallback?: boolean
-  bridgeProviderFallback?: boolean
-  fundMethod?: FundMethod
-  checkoutOnHandlers?: CheckoutOnHandlers
-  recentTokens?: Token[]
-  onRecentTokenSelect?: (token: Token) => void
-  onTrackToken?: (token: any) => void
-  onPoolSelectorStateChange?: (isShowing: boolean) => void
-}
-
-export const PoolDeposit: React.FC<PoolDepositProps> = ({
-  account,
-  walletClient,
-  onTransactionStateChange,
-  onError,
-  onWaitingForWalletConfirm,
-  onConfirm,
-  onComplete,
-  onSend,
-  paymasterUrls,
-  setWalletConfirmRetryHandler,
-  swapProvider,
-  bridgeProvider,
-  swapProviderFallback,
-  bridgeProviderFallback,
-  fundMethod,
-  checkoutOnHandlers,
-  recentTokens,
-  onRecentTokenSelect,
-  onTrackToken,
-  onPoolSelectorStateChange,
-}) => {
-  const { mode } = useViewManager()
-  const { isBalanceVisible } = useBalanceVisible()
-  const { selectedToken: originToken, setSelectedToken: setOriginToken } =
-    useOriginSelectedToken()
-
-  // Get origin token with fresh balance for fee option checks
-  const {
-    token: freshOriginToken,
-    isLoadingBalance: isLoadingFreshOriginBalance,
-  } = useTokenWithFreshBalance(originToken, account?.address)
-
-  const { selectedPool, setSelectedPool } = useEarnPool()
-
-  const [showEarnPools, setShowEarnPools] = useState(false)
-  const [showOriginTokenSelector, setShowOriginTokenSelector] = useState(false)
-  const [showOriginChainList, setShowOriginChainList] = useState(false)
-  const [amount, setAmount] = useState("")
-  const inputRef = useRef<HTMLInputElement>(null)
-
-  // Get sorted tokens to auto-select the highest USD value token
-  const { filteredTokensFormatted, isLoadingTokens } = useTokenList({
-    onContinue: () => {}, // Not used for auto-selection
-    onError: () => {}, // Not used for auto-selection
-    fundMethod: undefined,
-    allSupportedTokens: false,
-  })
-
-  // Memoized generated calldata
-  const generatedDepositCalldata = useMemo(() => {
-    if (!selectedPool || !amount || !walletClient || Number(amount) <= 0) {
-      logger.console.log(
-        "Skipping calldata generation: missing pool/amount/wallet or invalid amount",
-      )
-      return undefined
-    }
-
-    try {
-      const decimals = selectedPool.token.decimals
-      if (typeof decimals !== "number" || decimals < 0 || decimals > 18) {
-        throw new Error(`Invalid decimals: ${decimals}`)
-      }
-
-      // Check if same-chain same-token for direct amount usage
-      const isSameChainSameToken =
-        originToken &&
-        originToken.chainId === selectedPool.chainId &&
-        (originToken.contractAddress ?? zeroAddress).toLowerCase() ===
-          selectedPool.token.address.toLowerCase()
-
-      let amountForCalldata: string
-      if (isSameChainSameToken) {
-        // Parse real amount with pool decimals for direct deposit
-        const parsedAmount = parseUnits(amount, decimals)
-        amountForCalldata = parsedAmount.toString()
-        logger.console.log(
-          `Same-chain same-token deposit: Parsed amount: ${amount} -> ${parsedAmount} wei (decimals: ${decimals})`,
-        )
-      } else {
-        // Use placeholder for wrapping in routed flows
-        amountForCalldata = TRAILS_ROUTER_PLACEHOLDER_AMOUNT.toString()
-        logger.console.log(
-          `Routed deposit (different-token or cross-chain): Using placeholder for ${selectedPool.protocol} pool: ${selectedPool.name}`,
-        )
-      }
-
-      logger.console.log(
-        `Generating deposit calldata for ${selectedPool.protocol} pool: ${selectedPool.name} (amount: ${amountForCalldata})`,
-      )
-
-      switch (selectedPool.protocol.toLowerCase()) {
-        case "aave":
-          return generateAaveDepositCalldata(
-            walletClient,
-            selectedPool,
-            amountForCalldata,
-          )
-        case "morpho":
-          return generateMorphoDepositCalldata(walletClient, amountForCalldata)
-        default:
-          logger.console.warn(`Unsupported protocol: ${selectedPool.protocol}`)
-          return undefined
-      }
-    } catch (error) {
-      logger.console.error("Error generating deposit calldata:", error)
-      return undefined
-    }
-  }, [walletClient, selectedPool, amount, originToken])
-
-  // Use useSendForm for quote functionality when both token and pool are selected
-  const {
-    balanceFormatted,
-    balanceRaw,
-    tokenDecimals,
-    isLoadingQuote,
-    prepareSendQuote,
-    setAmount: setSendFormAmount,
-    handleSubmit,
-    isSubmitting,
-    buttonText,
-    isValidRecipient,
-    processedFeeOptions,
-    selectedFeeOption,
-    setSelectedFeeOption,
-  } = useSendForm({
-    account,
-    toAmount: undefined,
-    toRecipient: selectedPool?.depositAddress,
-    toChainId: selectedPool?.chainId,
-    toToken: selectedPool?.token.address,
-    toCalldata: generatedDepositCalldata,
-    walletClient,
-    onTransactionStateChange,
-    onError,
-    onWaitingForWalletConfirm,
-    paymasterUrls,
-    onSend,
-    onConfirm,
-    onComplete,
-    selectedToken: originToken as any,
-    setWalletConfirmRetryHandler,
-    tradeType: TradeType.EXACT_INPUT,
-    swapProvider,
-    bridgeProvider,
-    swapProviderFallback,
-    bridgeProviderFallback,
-    fundMethod,
-    mode,
-    checkoutOnHandlers,
-    // Skip fee balance fetching for onramp/direct-transfer modes where fee options aren't shown
-    skipFeeBalanceFetch:
-      fundMethod === "onramp-meld" ||
-      fundMethod === "direct-transfer" ||
-      fundMethod === "onramp-mesh",
-  })
-
-  // Calculate USD value using the underlying token (for pool tokens like aBasUSDC)
-  const {
-    amountUsdFormatted: underlyingTokenUsdDisplay,
-    amountUsdFormattedLocale: underlyingTokenUsdLocaleDisplay,
-  } = useAmountUsd({
-    amount: amount,
-    token: originToken?.contractAddress, // Use the origin token's address for USD calculation
-    chainId: originToken?.chainId,
-  })
-
-  // Auto-select the highest USD value token as origin token
-  useEffect(() => {
-    if (
-      !originToken &&
-      !isLoadingTokens &&
-      filteredTokensFormatted?.length > 0
-    ) {
-      const highestValueToken = filteredTokensFormatted[0] // First token is highest USD value
-      if (highestValueToken && Number(highestValueToken.balanceUsd) > 0) {
-        setOriginToken(highestValueToken)
-      }
-    }
-  }, [originToken, isLoadingTokens, filteredTokensFormatted, setOriginToken])
-
-  // Auto-focus input field on component mount
-  useEffect(() => {
-    if (inputRef.current) {
-      inputRef.current.focus()
-    }
-  }, [])
-
-  // Notify parent component about pool selector and token selector visibility
-  useEffect(() => {
-    if (onPoolSelectorStateChange) {
-      // Hide tabs when showing EarnPools selector, token selector, or chain list
-      onPoolSelectorStateChange(
-        showEarnPools || showOriginTokenSelector || showOriginChainList,
-      )
-    }
-  }, [
-    showEarnPools,
-    showOriginTokenSelector,
-    showOriginChainList,
-    onPoolSelectorStateChange,
-  ])
-
-  const handleAmountChange = (value: string) => {
-    setAmount(value)
-    setSendFormAmount(value) // Sync with useSendForm for quote functionality
-  }
-
-  const handlePoolSelect = (pool: any) => {
-    logger.console.log("Selected pool:", pool)
-    setSelectedPool(pool)
-    setShowEarnPools(false)
-  }
-
-  const handleOriginTokenSelect = (token: Token) => {
-    setOriginToken(token)
-    logger.console.log("[trails-sdk] selected origin token", token)
-    setShowOriginTokenSelector(false)
-    // Track the token selection
-    onTrackToken?.(token)
-  }
-
-  // Handle amount selection from percentage buttons
-  const handleAmountSelect = (selectedAmount: string) => {
-    setAmount(selectedAmount)
-    setSendFormAmount(selectedAmount)
-  }
-
-  if (showOriginChainList) {
-    return (
-      <ChainList
-        onBack={() => {
-          setShowOriginChainList(false)
-          setShowOriginTokenSelector(true)
-        }}
-      />
-    )
-  }
-
-  if (showEarnPools) {
-    return (
-      <EarnPools
-        onBack={() => setShowEarnPools(false)}
-        onPoolSelect={handlePoolSelect}
-      />
-    )
-  }
-
-  if (showOriginTokenSelector) {
-    return (
-      <div className="space-y-2">
-        <ScreenHeader
-          onBack={() => setShowOriginTokenSelector(false)}
-          headerContent="Select Token"
-          headerContentAlign="left"
-        />
-        <TokenSelector
-          onTokenSelect={handleOriginTokenSelect}
-          onError={onError}
-          fundMethod={fundMethod}
-          showContinueButton={false}
-          compactMode={false}
-          recentTokens={recentTokens}
-          onRecentTokenSelect={onRecentTokenSelect}
-          allSupportedTokens={false}
-          chainListScreen={true}
-          onNavigateToChainList={() => {
-            setShowOriginTokenSelector(false)
-            setShowOriginChainList(true)
-          }}
-        />
-      </div>
-    )
-  }
-
-  return (
-    <div className="space-y-2">
-      {/* Input Section - Amount + Token Selection */}
-      <div className="pt-4 pb-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">
-        {/* Deposit Label */}
-        <div className="mb-4 flex justify-between items-center">
-          <div className="text-sm font-medium trails-text-secondary text-left m-0">
-            {mode === "fund" ? "Payment method" : "From"}
-          </div>
-          <FundingMethodSelectorButton />
-        </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={isLoadingQuote}
-                variant="default"
-              />
-              {isLoadingQuote && <LoadingSpinner />}
-            </div>
-          </div>
-
-          {/* Token Selection Button */}
-          <div className="relative">
-            <TokenSelectorButton
-              token={originToken}
-              chainId={originToken?.chainId}
-              onSelect={() => setShowOriginTokenSelector(true)}
-            />
-          </div>
-        </div>
-
-        {/* Bottom Info Row */}
-        <div className="mt-4 flex justify-between items-center">
-          {/* USD Amount */}
-          {originToken?.symbol && (
-            <div
-              className="text-xs text-gray-500 dark:text-gray-400"
-              title={underlyingTokenUsdDisplay || undefined}
-            >
-              <span className="notranslate" translate="no">
-                ≈{" "}
-                {underlyingTokenUsdLocaleDisplay ||
-                  underlyingTokenUsdDisplay ||
-                  formatUsdAmountLocaleDisplay(0)}
-              </span>
-            </div>
-          )}
-
-          {/* Origin Token Balance and Percentage Buttons */}
-          {originToken &&
-            fundMethod !== "direct-transfer" &&
-            fundMethod !== "onramp-mesh" && (
-              <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(balanceFormatted || "0")}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault()
-                      handleAmountSelect(balanceFormatted || "0")
-                    }
-                  }}
-                  title="Click to use full balance"
-                  disabled={!balanceFormatted}
-                >
-                  <span className="notranslate" translate="no">
-                    Balance:{" "}
-                    {isBalanceVisible
-                      ? freshOriginToken?.balanceLocaleDisplay ||
-                        originToken?.balanceLocaleDisplay ||
-                        balanceFormatted ||
-                        ""
-                      : "••••••"}
-                  </span>
-                </button>
-
-                {/* Percentage Buttons */}
-                {balanceFormatted && (
-                  <PercentageMaxButtons
-                    userBalance={balanceFormatted}
-                    userBalanceRaw={balanceRaw}
-                    decimals={tokenDecimals}
-                    isNativeToken={originToken.isNativeToken ?? false}
-                    gasCostFormatted={prepareSendQuote?.gasCostFormatted}
-                    chainId={originToken.chainId}
-                    onAmountSelect={handleAmountSelect}
-                    className="opacity-100"
-                  />
-                )}
-              </div>
-            )}
-        </div>
-      </div>
-
-      {/* Flip Button - Absolutely Positioned */}
-      <div className="relative">
-        <button
-          type="button"
-          className="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 p-1.5 trails-border-radius-button trails-bg-tertiary hover:trails-hover-bg transition-colors cursor-pointer border-2 border-white dark:border-gray-800"
-        >
-          <ArrowDown
-            className="w-5 h-5 text-gray-900 dark:text-white"
-            strokeWidth={2.5}
-          />
-        </button>
-      </div>
-
-      {/* Destination Vault Selection */}
-      <div className="mb-4 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">
-                Vault
-              </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 earn yield with
-                  </div>
-                </div>
-              </div>
-              <ChevronRight className="w-4 h-4 trails-text-muted flex-shrink-0" />
-            </div>
-          </button>
-        )}
-      </div>
-
-      {/* Fee Options */}
-      {fundMethod !== "direct-transfer" && fundMethod !== "onramp-mesh" && (
-        <FeeOptions
-          processedFeeOptions={processedFeeOptions}
-          selectedFeeOption={selectedFeeOption as any}
-          setSelectedFeeOption={(feeOption) => setSelectedFeeOption(feeOption)}
-          chainId={originToken?.chainId}
-          isRefetching={isLoadingQuote}
-          originTokenInfo={{
-            originToken: freshOriginToken ?? originToken!,
-            originTokenBalance:
-              freshOriginToken?.balance ?? originToken?.balance ?? "0",
-            originTokenAmount: amount ?? "0",
-            isLoadingBalance: isLoadingFreshOriginBalance,
-          }}
-        />
-      )}
-
-      {/* Quote Details */}
-      {prepareSendQuote && (
-        <div className="mb-4">
-          <QuoteDetails
-            quote={prepareSendQuote}
-            showContent={true}
-            isRefetching={isLoadingQuote}
-          />
-        </div>
-      )}
-
-      <form onSubmit={handleSubmit}>
-        <button
-          type="submit"
-          disabled={
-            !amount ||
-            !isValidRecipient ||
-            isSubmitting ||
-            !originToken ||
-            !selectedPool ||
-            isLoadingQuote ||
-            !prepareSendQuote ||
-            (fundMethod !== "direct-transfer" &&
-              prepareSendQuote?.noSufficientBalance) ||
-            (fundMethod !== "direct-transfer" &&
-              (selectedFeeOption
-                ? isFeeOptionDisabled(selectedFeeOption as ProcessedFeeOption, {
-                    originToken: freshOriginToken ?? originToken!,
-                    originTokenBalance:
-                      freshOriginToken?.balance ?? originToken?.balance ?? "0",
-                    originTokenAmount: amount ?? "0",
-                  })
-                : 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 ? (
-            <div className="flex items-center justify-center">
-              <LoadingSpinner className="mr-2" />
-              <span>{buttonText}</span>
-            </div>
-          ) : fundMethod !== "direct-transfer" &&
-            prepareSendQuote?.noSufficientBalance ? (
-            "Insufficient Balance"
-          ) : (
-            buttonText || "Deposit"
-          )}
-        </button>
-      </form>
-    </div>
-  )
-}