0xtrails 0.2.4 → 0.2.6

package/src/widget/components/PercentageMaxButtons.tsx

@@ -0,0 +1,77 @@
+import type React from "react"
+import {
+  calculateMaxNativeAmount,
+  getDefaultGasCostEstimate,
+} from "../../estimate.js"
+
+interface PercentageMaxButtonsProps {
+  userBalance: string | undefined
+  isNativeToken: boolean
+  gasCostFormatted?: string
+  chainId?: number
+  onAmountSelect: (amount: string) => void
+  className?: string
+}
+
+export const PercentageMaxButtons: React.FC<PercentageMaxButtonsProps> = ({
+  userBalance,
+  isNativeToken,
+  gasCostFormatted,
+  chainId,
+  onAmountSelect,
+  className = "",
+}) => {
+  // Don't render if no balance
+  if (!userBalance) return null
+
+  const handlePercentageClick = (percentage: number) => {
+    const balance = parseFloat(userBalance)
+    if (Number.isNaN(balance)) return
+
+    const amount = (balance * percentage) / 100
+    onAmountSelect(amount.toFixed(6))
+  }
+
+  const handleMaxClick = async () => {
+    if (isNativeToken) {
+      // For native tokens, subtract gas cost
+      // Priority: 1) Use actual gas cost from quote, 2) Fetch real gas price, 3) Fallback to 1% of balance
+      const effectiveGasCost =
+        gasCostFormatted ||
+        (await getDefaultGasCostEstimate(userBalance, chainId))
+      const maxAmount = calculateMaxNativeAmount(userBalance, effectiveGasCost)
+      onAmountSelect(maxAmount)
+    } else {
+      // For ERC20 tokens, use full balance
+      onAmountSelect(userBalance)
+    }
+  }
+
+  return (
+    <div
+      className={`flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 ${className}`}
+    >
+      <button
+        type="button"
+        onClick={() => handlePercentageClick(20)}
+        className="py-0.5 px-1.5 text-xs font-medium rounded-full transition-colors cursor-pointer trails-bg-percentage-button trails-text-percentage-button trails-hover-percentage-button"
+      >
+        20%
+      </button>
+      <button
+        type="button"
+        onClick={() => handlePercentageClick(50)}
+        className="py-0.5 px-1.5 text-xs font-medium rounded-full transition-colors cursor-pointer trails-bg-percentage-button trails-text-percentage-button trails-hover-percentage-button"
+      >
+        50%
+      </button>
+      <button
+        type="button"
+        onClick={handleMaxClick}
+        className="py-0.5 px-1.5 text-xs font-medium rounded-full transition-colors cursor-pointer trails-bg-percentage-button trails-text-percentage-button trails-hover-percentage-button"
+      >
+        Max
+      </button>
+    </div>
+  )
+}

package/src/widget/components/PoolDeposit.tsx

@@ -0,0 +1,569 @@
+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"
+import { useDynamicInputStyles } from "./DynamicInputStyles.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
+  onPoolSelectorStateChange?: (isShowing: boolean) => 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,
+  onPoolSelectorStateChange,
+}) => {
+  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()
+    }
+  }, [])
+
+  // Notify parent component about pool selector visibility
+  useEffect(() => {
+    if (onPoolSelectorStateChange) {
+      // Only hide tabs when showing EarnPools selector
+      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
+    }
+    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)
+  }
+
+  // Dynamic font size based on input length
+  const inputStyles = useDynamicInputStyles({
+    inputValue: amount,
+    variant: "default",
+  })
+
+  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">
+      {/* 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">
+              <input
+                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"
+              />
+              {isLoadingQuote && (
+                <div className="animate-spin rounded-full h-4 w-4 border-solid border-b-2 trails-primary" />
+              )}
+            </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">
+              ≈ {underlyingTokenUsdDisplay || "$0.00"}
+            </div>
+          )}
+
+          {/* Origin Token Balance and Percentage Buttons */}
+          {originToken && balanceFormatted && (
+            <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"
+              >
+                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>
+
+      {/* 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>
+
+      {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="mb-4">
+          <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>
+  )
+}