0xtrails 0.2.2 → 0.2.5

package/src/widget/components/EarnPools.tsx

@@ -109,11 +109,12 @@ export const EarnPools: React.FC<EarnPoolsProps> = ({
 
         // Search filter - split by spaces to allow "usdc base" type searches
         const searchTerms = searchFilter
+          .trim()
           .toLowerCase()
           .split(/\s+/)
           .filter((term) => term.length > 0)
         const searchMatch =
-          !searchFilter ||
+          !searchFilter.trim() ||
           searchTerms.every(
             (term) =>
               pool.token?.symbol?.toLowerCase().includes(term) ||

package/src/widget/components/Fund.tsx

@@ -1,13 +1,8 @@
-import {
-  ChevronRight,
-  Search,
-  Loader2,
-  ChevronDown,
-  ArrowDown,
-} from "lucide-react"
+import { ChevronRight, Search, Loader2, ArrowDown } from "lucide-react"
 import { useEffect, useState, useMemo, useRef, useCallback } 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"
@@ -35,6 +30,8 @@ import type { PrepareSendQuote } from "../../prepareSend.js"
 import type { SupportedToken } from "../../tokens.js"
 import { logger } from "../../logger.js"
 import { RefundWarning } from "./RefundWarning.js"
+import { PercentageMaxButtons } from "./PercentageMaxButtons.js"
+import { TokenSelectorButton } from "./TokenSelectorButton.js"
 
 interface FundProps {
   onBack?: () => void
@@ -48,6 +45,7 @@ interface FundProps {
   onSend: (amount: string, recipient: string) => void
   paymasterUrls?: Array<{ chainId: number; url: string }>
   gasless?: boolean
+  isSequenceWallet?: boolean
   setWalletConfirmRetryHandler: (handler: () => Promise<void>) => void
   quoteProvider?: string
   fundMethod?: string
@@ -83,6 +81,7 @@ export const Fund: React.FC<FundProps> = ({
   onSend,
   paymasterUrls,
   gasless,
+  isSequenceWallet = false,
   setWalletConfirmRetryHandler,
   quoteProvider,
   fundMethod,
@@ -635,7 +634,6 @@ export const Fund: React.FC<FundProps> = ({
           onBack={() => setShowOriginTokenSelector(false)}
           headerContent="Select From Token"
           headerContentAlign="left"
-          showAccountActions={true}
         />
         <TokenSelector
           onTokenSelect={handleOriginTokenSelect}
@@ -682,7 +680,6 @@ export const Fund: React.FC<FundProps> = ({
           onBack={() => setShowDestinationTokenSelector(false)}
           headerContent="Select To Token"
           headerContentAlign="left"
-          showAccountActions={true}
         />
         <TokenSelector
           onTokenSelect={handleDestinationTokenSelect}
@@ -726,7 +723,6 @@ export const Fund: React.FC<FundProps> = ({
           onBack={onBack}
           headerContent="Fund"
           headerContentAlign="left"
-          showAccountActions={true}
         />
 
         <div className="space-y-2">
@@ -768,7 +764,7 @@ export const Fund: React.FC<FundProps> = ({
       <div className="space-y-1">
         {/* Origin Amount Input Section */}
         <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 focus-within:border-gray-400 dark:focus-within:border-gray-500">
-          {/* Deposit Label and Percentage Buttons */}
+          {/* Deposit Label */}
           <div className="flex justify-between items-center mb-2">
             <div className="text-sm font-medium trails-text-secondary text-left">
               Deposit
@@ -780,48 +776,16 @@ export const Fund: React.FC<FundProps> = ({
                 ""
               )}
             </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={() => handlePercentageClick(100)}
-                  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"
+              <button
+                type="button"
+                className="flex items-center justify-start cursor-text bg-transparent border-none p-0 w-full"
                 onClick={() => inputRef.current?.focus()}
+                aria-label="Focus amount input"
               >
                 <div className="flex items-center">
                   <input
@@ -861,37 +825,15 @@ export const Fund: React.FC<FundProps> = ({
                     <div className="ml-2 animate-spin rounded-full h-4 w-4 border-solid border-b-2 trails-primary" />
                   )}
                 </div>
-              </div>
+              </button>
             </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>
+            <TokenSelectorButton
+              token={originToken}
+              chainId={originToken?.chainId}
+              onSelect={() => setShowOriginTokenSelector(true)}
+            />
           </div>
 
           {/* Bottom Info Row */}
@@ -905,9 +847,9 @@ export const Fund: React.FC<FundProps> = ({
               )}
             </div>
 
-            {/* Origin Token Balance */}
-            <div className="text-xs trails-text-muted text-right">
-              {originToken ? (
+            {/* 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"
@@ -921,14 +863,25 @@ export const Fund: React.FC<FundProps> = ({
                   title="Click to use full balance"
                 >
                   Balance:{" "}
-                  {isBalanceVisible
-                    ? `${balanceFormatted || "0.00"} ${originToken.symbol}`
-                    : "••••••"}
+                  {isBalanceVisible ? balanceFormatted || "0.00" : "••••••"}
                 </button>
-              ) : (
-                <span>&nbsp;</span>
-              )}
-            </div>
+
+                {/* Percentage Buttons */}
+                <PercentageMaxButtons
+                  userBalance={balanceFormatted}
+                  isNativeToken={originToken.contractAddress === zeroAddress}
+                  gasCostFormatted={prepareSendQuote?.gasCostFormatted}
+                  chainId={originToken.chainId}
+                  onAmountSelect={(amount) => {
+                    setTokenAmountForBackend(amount)
+                    setSendFormAmount(amount)
+                    setGlobalAmount(amount)
+                    setInputDisplayValue(amount)
+                  }}
+                  className="opacity-100"
+                />
+              </div>
+            )}
           </div>
         </div>
 
@@ -1050,7 +1003,7 @@ export const Fund: React.FC<FundProps> = ({
         <div className="relative">
           {toToken ? (
             /* Display only - destination token is fixed */
-            <div className="w-full flex items-center justify-between space-x-3 trails-bg-secondary trails-border-radius-list-button px-4 py-2">
+            <div className="w-full flex items-center justify-between space-x-3 trails-bg-secondary trails-border-radius-list-button px-4 py-2 pb-6">
               <div className="text-left">
                 <div className="font-medium trails-text-primary text-sm whitespace-nowrap">
                   Receiving amount
@@ -1059,17 +1012,26 @@ export const Fund: React.FC<FundProps> = ({
               <div className="flex items-center space-x-2">
                 {selectedDestToken ? (
                   <>
-                    <div className="font-medium trails-text-primary text-sm">
-                      {isLoadingQuote ? (
-                        <div className="h-4 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
-                      ) : prepareSendQuote?.destinationAmountFormatted ? (
-                        <span className="whitespace-nowrap">
-                          {prepareSendQuote.destinationAmountFormatted}{" "}
-                          {selectedDestToken.symbol}
-                        </span>
-                      ) : (
-                        ""
-                      )}
+                    <div className="relative">
+                      <div className="font-medium trails-text-primary text-sm">
+                        {isLoadingQuote ? (
+                          <div className="h-4 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
+                        ) : prepareSendQuote?.destinationAmountFormatted ? (
+                          <span className="whitespace-nowrap">
+                            {prepareSendQuote.destinationAmountFormatted}{" "}
+                            {selectedDestToken.symbol}
+                          </span>
+                        ) : (
+                          ""
+                        )}
+                      </div>
+                      {/* USD Display - Hidden during loading, absolutely positioned */}
+                      {!isLoadingQuote &&
+                        prepareSendQuote?.destinationAmountUsdDisplay && (
+                          <div className="absolute top-full right-0 text-xs trails-text-muted mt-0.5">
+                            ≈ {prepareSendQuote.destinationAmountUsdDisplay}
+                          </div>
+                        )}
                     </div>
                     <TokenImage
                       symbol={selectedDestToken.symbol}
@@ -1095,7 +1057,7 @@ export const Fund: React.FC<FundProps> = ({
             <button
               type="button"
               onClick={() => setShowDestinationTokenSelector(true)}
-              className="w-full flex items-center justify-between space-x-3 hover:trails-hover-bg hover:bg-gray-50 dark:hover:bg-gray-700 trails-border-radius-list-button px-4 py-2 transition-all duration-200 cursor-pointer"
+              className="w-full flex items-center justify-between space-x-3 hover:trails-hover-bg hover:bg-gray-50 dark:hover:bg-gray-700 trails-border-radius-list-button px-4 py-2 pb-6 transition-all duration-200 cursor-pointer"
             >
               <div className="text-left">
                 <div className="font-medium trails-text-primary text-sm whitespace-nowrap">
@@ -1106,17 +1068,26 @@ export const Fund: React.FC<FundProps> = ({
               <div className="flex items-center space-x-2">
                 {selectedDestToken ? (
                   <>
-                    <div className="font-medium trails-text-primary text-sm">
-                      {isLoadingQuote ? (
-                        <div className="h-4 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
-                      ) : prepareSendQuote?.destinationAmountFormatted ? (
-                        <span className="whitespace-nowrap">
-                          {prepareSendQuote.destinationAmountFormatted}{" "}
-                          {selectedDestToken.symbol}
-                        </span>
-                      ) : (
-                        ""
-                      )}
+                    <div className="relative">
+                      <div className="font-medium trails-text-primary text-sm">
+                        {isLoadingQuote ? (
+                          <div className="h-4 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
+                        ) : prepareSendQuote?.destinationAmountFormatted ? (
+                          <span className="whitespace-nowrap">
+                            {prepareSendQuote.destinationAmountFormatted}{" "}
+                            {selectedDestToken.symbol}
+                          </span>
+                        ) : (
+                          ""
+                        )}
+                      </div>
+                      {/* USD Display - Hidden during loading, absolutely positioned */}
+                      {!isLoadingQuote &&
+                        prepareSendQuote?.destinationAmountUsdDisplay && (
+                          <div className="absolute top-full right-0 text-xs trails-text-muted mt-0.5">
+                            ≈ {prepareSendQuote.destinationAmountUsdDisplay}
+                          </div>
+                        )}
                     </div>
                     <TokenImage
                       symbol={selectedDestToken.symbol}
@@ -1149,6 +1120,7 @@ export const Fund: React.FC<FundProps> = ({
         fundMethod={fundMethod}
         isSenderContractOnOrigin={isSenderContractOnOrigin}
         isSenderContractOnDestination={isSenderContractOnDestination}
+        isSequenceWallet={isSequenceWallet}
       />
 
       {/* Error Display */}

package/src/widget/components/FundMethods.tsx

@@ -1,11 +1,12 @@
 import type React from "react"
-import { Wallet, QrCode, Building2 } from "lucide-react"
-import { useAccount } from "wagmi"
-import { truncateAddress } from "../../utils.js"
-import { useTheme } from "../components/ThemeProvider.js"
-import WalletConnectLogoWhite from "../assets/WalletConnect-logo-white.svg"
-import WalletConnectLogoBlack from "../assets/WalletConnect-logo-black.svg"
+import { QrCode, Send, ChevronRight } from "lucide-react"
+import { useSwitchAccount } from "wagmi"
 import { ScreenHeader } from "./ScreenHeader.js"
+import { ConnectedWallets } from "./ConnectedWallets.js"
+import { useCurrentScreen } from "../hooks/useCurrentScreen.js"
+import { useConnections } from "wagmi"
+import { logger } from "../../logger.js"
+import { useSelectedFundMethod } from "../hooks/useSelectedFundMethod.js"
 
 export interface FundMethodsProps {
   onBack?: () => void
@@ -17,178 +18,100 @@ export interface FundMethodsProps {
 
 const FundMethods: React.FC<FundMethodsProps> = ({
   onBack,
-  onSelectWalletConnect,
   onSelectExchangeList,
-  onSelectConnectedAccount,
   onSelectQrCode,
 }) => {
-  const { address, isConnected, connector } = useAccount()
-  const { getActiveTheme } = useTheme()
+  const { switchAccount } = useSwitchAccount()
+  const connections = useConnections()
+  const { setCurrentScreen } = useCurrentScreen()
+  const { setSelectedFundMethod } = useSelectedFundMethod()
 
-  const activeTheme = getActiveTheme()
+  // Handle wallet selection - switch to the selected wallet and go to home
+  const handleWalletSelect = async (
+    walletAddress: string,
+    walletConnector: unknown,
+  ) => {
+    try {
+      // Find the connection for this wallet
+      const connection = connections.find(
+        (conn) =>
+          conn.accounts.includes(walletAddress as `0x${string}`) &&
+          conn.connector.id === (walletConnector as { id: string }).id,
+      )
+
+      if (connection) {
+        await switchAccount({
+          connector: connection.connector,
+        })
+        logger.console.log(`[trails-sdk] Switched to wallet: ${walletAddress}`)
+
+        // Set funding method to "wallet" since user selected a wallet
+        setSelectedFundMethod("wallet")
+
+        // Navigate to home screen which will redirect to the appropriate mode screen
+        setCurrentScreen("home")
+      }
+    } catch (error) {
+      logger.console.error("[trails-sdk] Failed to switch wallet:", error)
+    }
+  }
 
   return (
     <div className="flex flex-col h-full">
       <ScreenHeader
         onBack={onBack}
-        headerContent="Funding Method"
+        headerContent="Payment methods"
         headerContentAlign="left"
         rightSideContent={<div className="w-9" />}
-        showAccountActions={true}
       />
 
       <div className="flex-1">
-        <div className="space-y-3">
-          <button
-            type="button"
-            onClick={onSelectConnectedAccount}
-            className="w-full flex items-center justify-between cursor-pointer font-semibold py-4 px-6 trails-border-radius-large-button transition-all duration-200 trails-bg-secondary trails-hover-bg trails-text-primary"
-          >
-            <div className="flex items-center space-x-3 flex-1">
-              <Wallet className="h-6 w-6 text-gray-600 dark:text-gray-400" />
-              <div className="flex-1 text-left">
-                <h4 className="font-semibold text-gray-900 dark:text-gray-100">
-                  Connected Account
-                </h4>
-                <p className="text-sm text-gray-600 dark:text-gray-400">
-                  Use your connected wallet to fund directly.
-                </p>
-                <p className="text-xs font-mono text-gray-600 dark:text-gray-300">
-                  {isConnected && address
-                    ? `${connector?.name || "Connected"}: ${truncateAddress(address)}`
-                    : "No wallet connected"}
-                </p>
-              </div>
-            </div>
-            <div className="text-gray-400">
-              <svg
-                className="w-5 h-5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                aria-label="Chevron right"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M9 5l7 7-7 7"
-                />
-              </svg>
-            </div>
-          </button>
+        <div className="space-y-4">
+          {/* Connected Wallets Section */}
+          <ConnectedWallets
+            showConnectNewWallet={true}
+            onWalletSelect={handleWalletSelect}
+            backScreen="fund-methods"
+          />
 
-          <button
-            type="button"
-            onClick={onSelectWalletConnect}
-            className="w-full flex items-center justify-between cursor-pointer font-semibold py-4 px-6 trails-border-radius-large-button transition-all duration-200 trails-bg-secondary trails-hover-bg trails-text-primary"
-          >
-            <div className="flex items-center space-x-3 flex-1">
-              <div className="h-6 w-6 rounded flex items-center justify-center">
-                <img
-                  src={
-                    activeTheme === "dark"
-                      ? WalletConnectLogoWhite
-                      : WalletConnectLogoBlack
-                  }
-                  alt="WalletConnect"
-                  className="h-4 w-4"
-                />
-              </div>
-              <div className="flex-1 text-left">
-                <h4 className="font-semibold text-gray-900 dark:text-gray-100">
-                  WalletConnect
-                </h4>
-                <p className="text-sm text-gray-600 dark:text-gray-400">
-                  Connect another wallet.
-                </p>
-              </div>
-            </div>
-            <div className="text-gray-400">
-              <svg
-                className="w-5 h-5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                aria-label="Chevron right"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M9 5l7 7-7 7"
-                />
-              </svg>
-            </div>
-          </button>
+          {/* Divider */}
+          <div className="relative flex items-center justify-center">
+            <div className="flex-1 border-t border-gray-200 dark:border-gray-700"></div>
+            <span className="px-4 text-sm text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-900">
+              or
+            </span>
+            <div className="flex-1 border-t border-gray-200 dark:border-gray-700"></div>
+          </div>
 
-          <button
-            type="button"
-            onClick={onSelectQrCode}
-            className="w-full flex items-center justify-between cursor-pointer font-semibold py-4 px-6 trails-border-radius-large-button transition-all duration-200 trails-bg-secondary trails-hover-bg trails-text-primary"
-          >
-            <div className="flex items-center space-x-3 flex-1">
-              <QrCode className="h-6 w-6 text-gray-600 dark:text-gray-400" />
-              <div className="flex-1 text-left">
-                <h4 className="font-semibold text-gray-900 dark:text-gray-100">
-                  Pay with QR Code
-                </h4>
-                <p className="text-sm text-gray-600 dark:text-gray-400">
-                  Scan a QR code to deposit funds.
-                </p>
+          {/* Additional Funding Options */}
+          <div className="trails-border-radius-container border trails-border-primary">
+            <button
+              type="button"
+              onClick={onSelectQrCode}
+              className="w-full text-left px-3 py-4 text-sm flex items-center justify-between cursor-pointer transition-colors trails-text-primary trails-hover-bg"
+            >
+              <div className="flex items-center gap-3">
+                <QrCode className="w-4 h-4" />
+                <span className="text-sm font-bold">Pay with QR Code</span>
               </div>
-            </div>
-            <div className="text-gray-400">
-              <svg
-                className="w-5 h-5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                aria-label="Chevron right"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M9 5l7 7-7 7"
-                />
-              </svg>
-            </div>
-          </button>
+              <ChevronRight className="w-5 h-5 text-gray-400" />
+            </button>
+
+            {/* Divider between buttons */}
+            <div className="border-b border-gray-200 dark:border-gray-700"></div>
 
-          <button
-            type="button"
-            onClick={onSelectExchangeList}
-            className="w-full flex items-center justify-between cursor-pointer font-semibold py-4 px-6 trails-border-radius-large-button transition-all duration-200 trails-bg-secondary trails-hover-bg trails-text-primary"
-          >
-            <div className="flex items-center space-x-3 flex-1">
-              <Building2 className="h-6 w-6 text-gray-600 dark:text-gray-400" />
-              <div className="flex-1 text-left">
-                <h4 className="font-semibold text-gray-900 dark:text-gray-100">
-                  Send from Exchange
-                </h4>
-                <p className="text-sm text-gray-600 dark:text-gray-400">
-                  Transfer from Coinbase, Binance, etc.
-                </p>
+            <button
+              type="button"
+              onClick={onSelectExchangeList}
+              className="w-full text-left px-3 py-4 text-sm flex items-center justify-between cursor-pointer transition-colors trails-text-primary trails-hover-bg"
+            >
+              <div className="flex items-center gap-3">
+                <Send className="w-4 h-4" />
+                <span className="text-sm font-bold">Send from Exchange</span>
               </div>
-            </div>
-            <div className="text-gray-400">
-              <svg
-                className="w-5 h-5"
-                fill="none"
-                stroke="currentColor"
-                viewBox="0 0 24 24"
-                aria-label="Chevron right"
-              >
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M9 5l7 7-7 7"
-                />
-              </svg>
-            </div>
-          </button>
+              <ChevronRight className="w-5 h-5 text-gray-400" />
+            </button>
+          </div>
         </div>
       </div>
     </div>

package/src/widget/components/FundSwap.tsx

@@ -0,0 +1,52 @@
+import type React from "react"
+import type { Account, WalletClient } from "viem"
+import type { TransactionState } from "../../transactions.js"
+import type { OnCompleteProps, Token } from "../hooks/useSendForm.js"
+import type { SupportedToken } from "../../tokens.js"
+import type { CheckoutOnHandlers } from "../hooks/useCheckout.js"
+import type { PrepareSendQuote } from "../../prepareSend.js"
+import { ClassicSwap } from "./ClassicSwap.js"
+
+interface FundProps {
+  selectedToken: Token | null
+  onSend: (amount: string, recipient: string) => void
+  onBack?: () => void
+  onConfirm: () => void
+  onComplete: (result: OnCompleteProps) => void
+  account: Account
+  toRecipient?: string
+  toAmount?: string
+  toChainId?: number
+  toToken?: string
+  toCalldata?: string
+  walletClient: WalletClient
+  onTransactionStateChange: (transactionStates: TransactionState[]) => void
+  onError: (error: Error | string | null) => void
+  onWaitingForWalletConfirm: (props: PrepareSendQuote) => 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
+  onAmountUpdate?: (amount: string) => void
+  checkoutOnHandlers?: CheckoutOnHandlers
+  recentTokens?: SupportedToken[]
+  onRecentTokenSelect?: (token: SupportedToken) => void
+  onTrackToken?: (token: any) => void
+  isSequenceWallet?: boolean
+}
+
+export const Fund: React.FC<FundProps> = (props) => {
+  return <ClassicSwap {...props} title="Fund" />
+}
+
+export default Fund