0xtrails 0.2.4 → 0.2.5

package/src/widget/components/PoolDeposit.tsx

@@ -0,0 +1,593 @@
+import {
+  TrendingUp,
+  ArrowDown,
+  ChevronRight,
+  Search,
+  Loader2,
+} from "lucide-react"
+import { useEffect, useState, useRef } from "react"
+import type React from "react"
+import type { Account, WalletClient } from "viem"
+import { zeroAddress } 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 { useOriginSelectedToken } from "../hooks/useOriginSelectedToken.js"
+import { useEarnPool } from "../hooks/useEarnPool.js"
+import { useTokenList } from "../hooks/useTokenList.js"
+import { useMode } from "../hooks/useMode.js"
+import { useBalanceVisible } from "../hooks/useBalanceVisible.js"
+import { TokenImage } from "./TokenImage.js"
+import { TokenSelector } from "./TokenSelector.js"
+import { EarnPools } from "./EarnPools.js"
+import { ChainList } from "./ChainList.js"
+import { QuoteDetails } from "./QuoteDetails.js"
+import { PercentageMaxButtons } from "./PercentageMaxButtons.js"
+import { TokenSelectorButton } from "./TokenSelectorButton.js"
+import { FundingMethodSelectorButton } from "./FundingMethodSelectorButton.js"
+import { formatTvl } from "../../prices.js"
+import { useAmountUsd } from "../hooks/useAmountUsd.js"
+import { getExplorerUrlForAddress } from "../../explorer.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"
+
+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 }>
+  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 PoolDeposit: React.FC<PoolDepositProps> = ({
+  account,
+  walletClient,
+  onTransactionStateChange,
+  onError,
+  onWaitingForWalletConfirm,
+  onConfirm,
+  onComplete,
+  onSend,
+  paymasterUrls,
+  gasless,
+  setWalletConfirmRetryHandler,
+  quoteProvider,
+  fundMethod,
+  onNavigateToMeshConnect,
+  checkoutOnHandlers,
+  recentTokens,
+  onRecentTokenSelect,
+  onTrackToken,
+}) => {
+  const { mode } = useMode()
+  const { isBalanceVisible } = useBalanceVisible()
+  const { selectedToken: originToken, setSelectedToken: setOriginToken } =
+    useOriginSelectedToken()
+  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,
+  })
+
+  // Use useSendForm for quote functionality when both token and pool are selected
+  const {
+    balanceFormatted,
+    isLoadingQuote,
+    prepareSendQuote,
+    setAmount: setSendFormAmount,
+    handleSubmit,
+    isSubmitting,
+    buttonText,
+    isValidRecipient,
+  } = useSendForm({
+    account,
+    toAmount: undefined,
+    toRecipient: selectedPool?.depositAddress,
+    toChainId: selectedPool?.chainId,
+    toToken: selectedPool?.token.address,
+    toCalldata: undefined,
+    walletClient,
+    onTransactionStateChange,
+    onError,
+    onWaitingForWalletConfirm,
+    paymasterUrls,
+    gasless,
+    onConfirm,
+    onComplete,
+    onSend,
+    selectedToken: originToken as any,
+    setWalletConfirmRetryHandler,
+    tradeType: TradeType.EXACT_INPUT,
+    quoteProvider,
+    fundMethod,
+    mode,
+    onNavigateToMeshConnect,
+    checkoutOnHandlers,
+  })
+
+  // Calculate USD value using the underlying token (for pool tokens like aBasUSDC)
+  const { amountUsdFormatted: underlyingTokenUsdDisplay } = 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) {
+        const decimals =
+          highestValueToken.contractInfo?.decimals ??
+          (highestValueToken as any)?.decimals
+        setOriginToken({
+          ...highestValueToken,
+          contractInfo: {
+            decimals,
+            contractAddress: highestValueToken.contractAddress,
+            symbol: highestValueToken.symbol,
+            name: highestValueToken.name,
+          },
+        } as any)
+      }
+    }
+  }, [originToken, isLoadingTokens, filteredTokensFormatted, setOriginToken])
+
+  // 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:", pool)
+    setSelectedPool(pool)
+    setShowEarnPools(false)
+  }
+
+  const handleOriginTokenSelect = (token: any) => {
+    const formattedToken = {
+      ...token,
+      decimals: token.contractInfo?.decimals || token.decimals,
+      contractInfo: {
+        decimals: token.contractInfo?.decimals || token.decimals,
+        contractAddress: token.contractAddress,
+        symbol: token.symbol,
+        name: token.name,
+      },
+    } as any
+    setOriginToken(formattedToken)
+    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">
+        <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">
+      <div className="space-y-1">
+        {/* Origin Token Selection */}
+        <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">
+          {/* Deposit Label */}
+          <div className="flex justify-between items-center mb-2">
+            <div className="text-sm font-semibold trails-text-secondary text-left">
+              From
+            </div>
+            <FundingMethodSelectorButton />
+          </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",
+                    }}
+                  >
+                    {originToken?.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 Selection Button */}
+            <TokenSelectorButton
+              token={originToken}
+              chainId={originToken?.chainId}
+              onSelect={() => setShowOriginTokenSelector(true)}
+            />
+          </div>
+
+          {/* Bottom Info Row */}
+          <div className="mt-2 flex justify-between items-center">
+            {/* USD Amount */}
+            <div className="text-xs trails-text-muted">
+              {originToken?.symbol && amount ? (
+                <>≈ {underlyingTokenUsdDisplay || "$0.00"}</>
+              ) : (
+                <span>&nbsp;</span>
+              )}
+            </div>
+
+            {/* Origin Token Balance and Percentage Buttons */}
+            {originToken && balanceFormatted && (
+              <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(balanceFormatted || "0")}
+                  onKeyDown={(e) => {
+                    if (e.key === "Enter" || e.key === " ") {
+                      e.preventDefault()
+                      handleAmountSelect(balanceFormatted || "0")
+                    }
+                  }}
+                  title="Click to use full balance"
+                >
+                  Balance:{" "}
+                  {isBalanceVisible ? balanceFormatted || "0.00" : "••••••"}
+                </button>
+
+                {/* Percentage Buttons */}
+                <PercentageMaxButtons
+                  userBalance={balanceFormatted}
+                  isNativeToken={originToken.contractAddress === zeroAddress}
+                  gasCostFormatted={prepareSendQuote?.gasCostFormatted}
+                  chainId={originToken.chainId}
+                  onAmountSelect={handleAmountSelect}
+                  className="opacity-100"
+                />
+              </div>
+            )}
+          </div>
+        </div>
+
+        {/* Arrow Down Between Sections */}
+        <div className="relative">
+          <div 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 transition-colors border-2 border-white dark:border-gray-800 z-1">
+            <ArrowDown
+              className="w-5 h-5 text-gray-900 dark:text-white"
+              strokeWidth={2.5}
+            />
+          </div>
+        </div>
+
+        {/* Destination Vault Selection */}
+        <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">
+                  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>
+      </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>
+      )}
+
+      <form onSubmit={handleSubmit}>
+        <button
+          type="submit"
+          disabled={
+            !amount ||
+            !isValidRecipient ||
+            isSubmitting ||
+            !originToken ||
+            !selectedPool ||
+            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"
+          ) : (
+            buttonText || "Deposit"
+          )}
+        </button>
+      </form>
+    </div>
+  )
+}