0xtrails 0.2.4 → 0.2.5

package/src/widget/components/Earn.tsx

@@ -1,37 +1,15 @@
-import {
-  TrendingUp,
-  ArrowDown,
-  ChevronRight,
-  Search,
-  ChevronDown,
-  Loader2,
-} from "lucide-react"
-import { useEffect, useState, useRef } from "react"
+import { useState } from "react"
 import type React from "react"
 import type { Account, WalletClient } 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 { ArrowUpCircle, ArrowDownCircle } from "lucide-react"
 import { ScreenHeader } from "./ScreenHeader.js"
-import { ChainList } from "./ChainList.js"
-import { QuoteDetails } from "./QuoteDetails.js"
-import { formatTvl } from "../../prices.js"
-import { getExplorerUrlForAddress } from "../../explorer.js"
-import aaveLogo from "../assets/aave.svg"
-import morphoLogo from "../assets/morpho.svg"
+import { PoolDeposit } from "./PoolDeposit.js"
+import { PoolWithdraw } from "./PoolWithdraw.js"
 import type { PrepareSendQuote } from "../../prepareSend.js"
 import type { SupportedToken } from "../../tokens.js"
-import { logger } from "../../logger.js"
 
 interface EarnProps {
   onBack?: () => void
@@ -85,205 +63,10 @@ export const Earn: React.FC<EarnProps> = ({
   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 {
-    amountUsdDisplay,
-    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,
-  })
-
-  // 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 percentage button clicks
-  const handlePercentageClick = (percentage: number) => {
-    if (!originToken || !balanceFormatted) return
-
-    // Parse the balance and calculate percentage
-    const balance = parseFloat(balanceFormatted)
-    if (Number.isNaN(balance)) return
-
-    const calculatedAmount = (balance * percentage) / 100
-    const amountStr = calculatedAmount.toFixed(6)
-    setAmount(amountStr)
-    setSendFormAmount(amountStr)
-  }
-
-  // Handle max button click
-  const handleMaxClick = () => {
-    if (!balanceFormatted) return
-
-    const balance = parseFloat(balanceFormatted)
-    if (Number.isNaN(balance)) return
-
-    const amountStr = balance.toFixed(6)
-    setAmount(amountStr)
-    setSendFormAmount(amountStr)
-  }
-
-  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"
-          showAccountActions={true}
-        />
-        <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>
-    )
-  }
+  const [activeTab, setActiveTab] = useState<"deposit" | "withdraw">("deposit")
 
   return (
-    <div className="space-y-4">
+    <div className="space-y-2">
       <ScreenHeader
         onBack={onBack}
         headerContent="Earn"
@@ -291,376 +74,77 @@ export const Earn: React.FC<EarnProps> = ({
         showAccountActions={true}
       />
 
-      <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 and Percentage Buttons */}
-          <div className="flex justify-between items-center mb-2">
-            <div className="text-sm font-semibold trails-text-secondary text-left">
-              Deposit
-            </div>
-
-            {/* Percentage Buttons */}
-            {originToken && (
-              <div className="flex space-x-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200">
-                <button
-                  type="button"
-                  onClick={() => handlePercentageClick(25)}
-                  className="py-1 px-2 text-xs font-medium trails-border-radius-container border border-solid transition-colors cursor-pointer border-gray-300 text-gray-600 dark:border-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:trails-hover-bg hover:border-gray-400 dark:hover:border-gray-500"
-                >
-                  25%
-                </button>
-                <button
-                  type="button"
-                  onClick={() => handlePercentageClick(50)}
-                  className="py-1 px-2 text-xs font-medium trails-border-radius-container border border-solid transition-colors cursor-pointer border-gray-300 text-gray-600 dark:border-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:trails-hover-bg hover:border-gray-400 dark:hover:border-gray-500"
-                >
-                  50%
-                </button>
-                <button
-                  type="button"
-                  onClick={() => handlePercentageClick(75)}
-                  className="py-1 px-2 text-xs font-medium trails-border-radius-container border border-solid transition-colors cursor-pointer border-gray-300 text-gray-600 dark:border-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:trails-hover-bg hover:border-gray-400 dark:hover:border-gray-500"
-                >
-                  75%
-                </button>
-                <button
-                  type="button"
-                  onClick={handleMaxClick}
-                  className="py-1 px-2 text-xs font-medium trails-border-radius-container border border-solid transition-colors cursor-pointer border-gray-300 text-gray-600 dark:border-gray-600 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 hover:trails-hover-bg hover:border-gray-400 dark:hover:border-gray-500"
-                >
-                  Max
-                </button>
-              </div>
-            )}
-          </div>
-
-          <div className="flex items-center space-x-2">
-            {/* Amount Input */}
-            <div className="flex-1">
-              <div
-                className="flex items-center justify-start cursor-text"
-                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>
-              </div>
-            </div>
-
-            {/* Token Selection Button */}
-            <button
-              type="button"
-              onClick={() => setShowOriginTokenSelector(true)}
-              className="flex items-center space-x-2 trails-bg-card hover:trails-hover-bg trails-border-radius-input px-2.5 py-1.5 border trails-border-primary transition-colors cursor-pointer"
-            >
-              {originToken ? (
-                <>
-                  <TokenImage
-                    symbol={originToken.symbol}
-                    imageUrl={originToken.imageUrl}
-                    chainId={originToken.chainId}
-                    size={20}
-                  />
-                  <span className="font-medium trails-text-primary text-sm">
-                    {originToken.symbol}
-                  </span>
-                  <ChevronDown className="w-3.5 h-3.5 trails-text-muted" />
-                </>
-              ) : (
-                <>
-                  <span className="font-medium trails-text-muted text-sm">
-                    Select Token
-                  </span>
-                  <ChevronDown className="w-3.5 h-3.5 trails-text-muted" />
-                </>
-              )}
-            </button>
-          </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 ? (
-                <>≈ {amountUsdDisplay || "$0.00"}</>
-              ) : (
-                <span>&nbsp;</span>
-              )}
-            </div>
-
-            {/* Origin Token Balance */}
-            <div className="text-xs trails-text-muted text-right">
-              {originToken ? (
-                <button
-                  type="button"
-                  className="text-xs trails-text-muted cursor-pointer hover:trails-hover-text transition-colors bg-transparent border-none p-0"
-                  onClick={handleMaxClick}
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault()
-                      handleMaxClick()
-                    }
-                  }}
-                  title="Click to use full balance"
-                >
-                  Balance:{" "}
-                  {isBalanceVisible
-                    ? `${balanceFormatted || "0.00"} ${originToken.symbol}`
-                    : "••••••"}
-                </button>
-              ) : (
-                <span>&nbsp;</span>
-              )}
-            </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}
-                          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}
-
-      <form onSubmit={handleSubmit}>
+      {/* Tabs */}
+      <div className="flex justify-start space-x-2">
         <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`}
+          type="button"
+          onClick={() => setActiveTab("deposit")}
+          className={`flex items-center space-x-2 py-2 px-4 text-xs font-bold cursor-pointer trails-border-radius-input ${
+            activeTab === "deposit"
+              ? "trails-bg-secondary text-blue-500"
+              : "trails-text-secondary"
+          }`}
         >
-          {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"
-          )}
+          <ArrowDownCircle className="w-4 h-4" />
+          <span>Deposit</span>
         </button>
-      </form>
+        <button
+          type="button"
+          onClick={() => setActiveTab("withdraw")}
+          className={`flex items-center space-x-2 py-2 px-4 text-xs font-bold cursor-pointer trails-border-radius-input ${
+            activeTab === "withdraw"
+              ? "trails-bg-secondary text-blue-500"
+              : "trails-text-secondary"
+          }`}
+        >
+          <ArrowUpCircle className="w-4 h-4" />
+          <span>Withdraw</span>
+        </button>
+      </div>
 
-      {/* Quote Details */}
-      {prepareSendQuote && (
-        <div className="space-y-2">
-          <QuoteDetails quote={prepareSendQuote} showContent={true} />
-        </div>
+      {/* Content */}
+      {activeTab === "deposit" ? (
+        <PoolDeposit
+          account={account}
+          walletClient={walletClient}
+          onTransactionStateChange={onTransactionStateChange}
+          onError={onError}
+          onWaitingForWalletConfirm={onWaitingForWalletConfirm}
+          onConfirm={onConfirm}
+          onComplete={onComplete}
+          onSend={onSend}
+          paymasterUrls={paymasterUrls}
+          gasless={gasless}
+          setWalletConfirmRetryHandler={setWalletConfirmRetryHandler}
+          quoteProvider={quoteProvider}
+          fundMethod={fundMethod}
+          onNavigateToMeshConnect={onNavigateToMeshConnect}
+          checkoutOnHandlers={checkoutOnHandlers}
+          recentTokens={recentTokens}
+          onRecentTokenSelect={onRecentTokenSelect}
+          onTrackToken={onTrackToken}
+        />
+      ) : (
+        <PoolWithdraw
+          account={account}
+          walletClient={walletClient}
+          onTransactionStateChange={onTransactionStateChange}
+          onError={onError}
+          onWaitingForWalletConfirm={onWaitingForWalletConfirm}
+          onConfirm={onConfirm}
+          onComplete={onComplete}
+          onSend={onSend}
+          paymasterUrls={paymasterUrls}
+          gasless={gasless}
+          setWalletConfirmRetryHandler={setWalletConfirmRetryHandler}
+          quoteProvider={quoteProvider}
+          fundMethod={fundMethod}
+          onNavigateToMeshConnect={onNavigateToMeshConnect}
+          checkoutOnHandlers={checkoutOnHandlers}
+          recentTokens={recentTokens}
+          onRecentTokenSelect={onRecentTokenSelect}
+          onTrackToken={onTrackToken}
+        />
       )}
     </div>
   )