0xtrails 0.13.2 → 0.15.0

package/src/widget/components/TokenSelector.tsx

@@ -1,807 +0,0 @@
-import { useVirtualizer, type VirtualItem } from "@tanstack/react-virtual"
-import { AlertTriangle, ChevronLeft, Info } from "lucide-react"
-import { AnimatePresence, motion } from "motion/react"
-import type React from "react"
-import {
-  memo,
-  useCallback,
-  useDeferredValue,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from "react"
-import { isAddress } from "viem"
-import { useAccount } from "wagmi"
-import { getChainInfo } from "../../chains.js"
-import type { Token } from "../../tokens.js"
-import type { FundMethod } from "../../transactionIntent/types.js"
-import {
-  addressEqual,
-  isNativeToken,
-  normalizeAddress,
-  truncateAddress,
-} from "../../utils/address.js"
-import { isValueZero } from "../../utils.js"
-import { useBalanceVisible } from "../hooks/useBalanceVisible.js"
-import { useChainFilter } from "../hooks/useChainFilter.js"
-import { useTokenList } from "../hooks/useTokenList.js"
-import { useSupportedChains } from "../../query/chains.hooks.js"
-import { ChainFilterDropdown } from "./ChainFilterDropdown.js"
-import { CopyButton } from "./CopyButton.js"
-import { RecentTokens } from "./RecentTokens.js"
-import { SearchInputField } from "./SearchInputField.js"
-import { TokenImage } from "./TokenImage.js"
-import { TokenSkeletonList } from "./TokenSkeleton.js"
-import { Tooltip } from "./Tooltip.js"
-
-const TOKEN_ROW_HEIGHT = 56
-
-// Memoized token row component to prevent unnecessary re-renders
-interface TokenRowProps {
-  token: Token
-  isSelected: boolean
-  fundMethod?: FundMethod | null
-  isBalanceVisible: boolean
-  onTokenSelect: (token: Token) => void
-  virtualRow: VirtualItem
-  measureElement: (element: Element | null) => void
-}
-
-const TokenRow = memo<TokenRowProps>(
-  ({
-    token,
-    isSelected,
-    fundMethod,
-    isBalanceVisible,
-    onTokenSelect,
-    virtualRow,
-    measureElement,
-  }) => {
-    const {
-      symbol,
-      imageUrl,
-      chainId,
-      contractAddress,
-      balanceUsdFormatted,
-      balanceUsdDisplay,
-      balanceUsdLocaleDisplay,
-      name,
-      priceUsd,
-      balanceFormatted,
-      balanceLocaleDisplay,
-      balance,
-      balanceUsd,
-      isSufficientBalance,
-    } = token
-
-    // Check if balance should be shown (hide if balance is 0 or empty)
-    const hasBalance =
-      !isValueZero(balance) ||
-      !isValueZero(balanceFormatted) ||
-      !isValueZero(balanceUsd)
-    // Default isSufficientBalance to true if not set
-    const sufficientBalance = isSufficientBalance ?? true
-
-    const handleKeyDown = useCallback(
-      (e: React.KeyboardEvent) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault()
-          onTokenSelect(token)
-        }
-      },
-      [onTokenSelect, token],
-    )
-
-    return (
-      <div
-        key={virtualRow.key}
-        data-index={virtualRow.index}
-        ref={measureElement}
-        style={{
-          position: "absolute",
-          top: 0,
-          left: 0,
-          width: "100%",
-          transform: `translateY(${virtualRow.start}px)`,
-        }}
-      >
-        <div
-          onClick={() => onTokenSelect(token)}
-          onKeyDown={handleKeyDown}
-          title={
-            !sufficientBalance &&
-            fundMethod !== "direct-transfer" &&
-            fundMethod !== "onramp-mesh" &&
-            fundMethod !== "onramp-meld"
-              ? "Insufficient balance for this token"
-              : `Select ${name} token`
-          }
-          className={`w-full py-2 px-4 flex items-center space-x-3 transition-all duration-200 trails-list-item trails-border-radius-list-button relative ${
-            isSelected ? "trails-list-item-selected" : ""
-          } ${!sufficientBalance && fundMethod !== "direct-transfer" && fundMethod !== "onramp-mesh" && fundMethod !== "onramp-meld" ? "opacity-75 cursor-not-allowed" : "cursor-pointer"}`}
-        >
-          <div className="relative shrink-0 mr-2">
-            <div
-              className={`rounded-full flex items-center justify-center bg-gray-100 dark:bg-gray-700 ${
-                !sufficientBalance &&
-                fundMethod !== "direct-transfer" &&
-                fundMethod !== "onramp-mesh"
-                  ? "opacity-80"
-                  : ""
-              }`}
-            >
-              {contractAddress ? (
-                <TokenImage
-                  symbol={symbol}
-                  imageUrl={imageUrl}
-                  chainId={chainId}
-                  contractAddress={contractAddress}
-                  size={32}
-                />
-              ) : (
-                <span
-                  className={`text-base font-medium text-gray-600 dark:text-gray-300 ${
-                    !sufficientBalance &&
-                    fundMethod !== "direct-transfer" &&
-                    fundMethod !== "onramp-mesh" &&
-                    fundMethod !== "onramp-meld"
-                      ? "opacity-70"
-                      : ""
-                  }`}
-                >
-                  {symbol}
-                </span>
-              )}
-            </div>
-          </div>
-
-          <div className="flex-1 min-w-0 text-left">
-            <h3
-              className={`text-sm font-medium truncate text-gray-900 dark:text-white ${
-                !sufficientBalance &&
-                fundMethod !== "direct-transfer" &&
-                fundMethod !== "onramp-mesh" &&
-                fundMethod !== "onramp-meld"
-                  ? "opacity-70"
-                  : ""
-              }`}
-              style={{
-                ...(!sufficientBalance &&
-                fundMethod !== "direct-transfer" &&
-                fundMethod !== "onramp-mesh" &&
-                fundMethod !== "onramp-meld"
-                  ? { maxWidth: "100px" }
-                  : {}),
-              }}
-            >
-              {name}
-            </h3>
-            <div className="group relative w-full">
-              {/* Default state: show symbol */}
-              <div
-                className={`flex items-center gap-1.5 transition-all duration-300 ease-in-out ${
-                  contractAddress && !isNativeToken(contractAddress)
-                    ? "group-hover:opacity-0 group-hover:transform group-hover:-translate-x-2"
-                    : ""
-                } ${
-                  !isSufficientBalance &&
-                  fundMethod !== "direct-transfer" &&
-                  fundMethod !== "onramp-mesh" &&
-                  fundMethod !== "onramp-meld"
-                    ? "opacity-70"
-                    : ""
-                }`}
-              >
-                <span
-                  className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap truncate inline-block"
-                  style={{
-                    ...(!sufficientBalance &&
-                    fundMethod !== "direct-transfer" &&
-                    fundMethod !== "onramp-mesh" &&
-                    fundMethod !== "onramp-meld"
-                      ? { maxWidth: "100px" }
-                      : {}),
-                  }}
-                >
-                  {symbol}
-                </span>
-                {/* Custom token indicator */}
-                {token.isCustomToken && (
-                  <div className="relative group/indicator">
-                    <AlertTriangle className="w-3 h-3 text-gray-500 dark:text-gray-400" />
-                    <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1 px-2 py-1 text-xs text-white bg-gray-900 dark:bg-gray-700 rounded whitespace-nowrap opacity-0 group-hover/indicator:opacity-100 transition-opacity pointer-events-none z-50">
-                      Custom token added by user
-                      <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent border-t-gray-900 dark:border-t-gray-700"></div>
-                    </div>
-                  </div>
-                )}
-              </div>
-
-              {/* Hover state: show address with copy button (only for non-zero addresses) */}
-              {contractAddress && !isNativeToken(contractAddress) && (
-                <div
-                  className={`absolute top-0 left-0 flex items-center gap-1.5 transition-all duration-300 ease-in-out opacity-0 transform translate-x-2 ${
-                    !sufficientBalance &&
-                    fundMethod !== "direct-transfer" &&
-                    fundMethod !== "onramp-mesh" &&
-                    fundMethod !== "onramp-meld"
-                      ? "group-hover:opacity-70"
-                      : "group-hover:opacity-100"
-                  } group-hover:translate-x-0`}
-                >
-                  <span className="text-xs text-gray-500 dark:text-gray-400 whitespace-nowrap">
-                    {truncateAddress(contractAddress)}
-                  </span>
-                  <CopyButton
-                    text={contractAddress}
-                    stopPropagation
-                    className="p-0.5"
-                    size="sm"
-                  />
-                  {/* Token info tooltip */}
-                  <Tooltip
-                    content={
-                      <div className="space-y-2 text-left">
-                        <div>
-                          <span className="opacity-70">Symbol:</span>{" "}
-                          <span className="font-medium">{token.symbol}</span>
-                        </div>
-                        <div>
-                          <span className="opacity-70">Name:</span>{" "}
-                          <span className="font-medium">{token.name}</span>
-                        </div>
-                        <div>
-                          <span className="opacity-70">Chain:</span>{" "}
-                          <span className="font-medium">
-                            {token.chainName ||
-                              getChainInfo(token.chainId || 0)?.name ||
-                              `Chain ${token.chainId || 0}`}
-                          </span>
-                        </div>
-                        <div>
-                          <span className="opacity-70">Decimals:</span>{" "}
-                          <span className="font-medium">{token.decimals}</span>
-                        </div>
-                        <div>
-                          <span className="opacity-70">Address:</span>{" "}
-                          <span className="font-mono text-[10px] break-all block mt-0.5">
-                            {contractAddress}
-                          </span>
-                        </div>
-                      </div>
-                    }
-                    side="top"
-                    align="center"
-                    sideOffset={8}
-                  >
-                    <Info className="w-3 h-3 text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 cursor-pointer" />
-                  </Tooltip>
-                  {/* Custom token indicator on hover state */}
-                  {token.isCustomToken && (
-                    <div className="relative group/indicator">
-                      <AlertTriangle className="w-3 h-3 text-gray-500 dark:text-gray-400" />
-                      <div className="absolute bottom-full left-1/2 -translate-x-1/2 mb-1 px-2 py-1 text-xs text-white bg-gray-900 dark:bg-gray-700 rounded whitespace-nowrap opacity-0 group-hover/indicator:opacity-100 transition-opacity pointer-events-none z-50">
-                        Custom token added by user
-                        <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent border-t-gray-900 dark:border-t-gray-700"></div>
-                      </div>
-                    </div>
-                  )}
-                </div>
-              )}
-            </div>
-          </div>
-
-          {fundMethod !== "direct-transfer" &&
-            fundMethod !== "onramp-mesh" &&
-            fundMethod !== "onramp-meld" &&
-            hasBalance && (
-              <div className="text-right shrink-0 flex flex-col items-end">
-                {!sufficientBalance && (
-                  <span
-                    className="absolute px-2 py-0.5 text-xs font-medium rounded"
-                    style={{
-                      backgroundColor: "#FED7AA",
-                      color: "#7C2D12",
-                      right: "90px",
-                      top: "50%",
-                      transform: "translateY(-50%)",
-                    }}
-                  >
-                    Low balance
-                  </span>
-                )}
-                {(priceUsd ?? 0) > 0 ? (
-                  <>
-                    <p
-                      className={`text-sm font-medium text-gray-900 dark:text-white notranslate ${
-                        !sufficientBalance ? "opacity-70" : ""
-                      }`}
-                      translate="no"
-                    >
-                      {isBalanceVisible
-                        ? balanceUsdLocaleDisplay ||
-                          balanceUsdDisplay ||
-                          balanceUsdFormatted ||
-                          "$0.00"
-                        : "••••••"}
-                    </p>
-                    <p
-                      className={`text-xs text-gray-500 dark:text-gray-400 notranslate ${
-                        !sufficientBalance ? "opacity-70" : ""
-                      }`}
-                      translate="no"
-                    >
-                      {isBalanceVisible
-                        ? balanceLocaleDisplay || balanceFormatted
-                        : "••••••"}
-                    </p>
-                  </>
-                ) : (
-                  <p
-                    className={`text-sm font-medium text-gray-900 dark:text-white notranslate ${
-                      !sufficientBalance ? "opacity-70" : ""
-                    }`}
-                    translate="no"
-                  >
-                    {isBalanceVisible
-                      ? balanceLocaleDisplay || balanceFormatted
-                      : "••••••"}
-                  </p>
-                )}
-              </div>
-            )}
-        </div>
-      </div>
-    )
-  },
-)
-
-TokenRow.displayName = "TokenRow"
-
-interface TokenSelectorProps {
-  onTokenSelect: (selectedToken: Token) => void
-  targetAmountUsd?: number | null
-  targetAmountUsdFormatted?: string | null
-  onError: (error: Error | string | null) => void
-  recentTokens?: Token[]
-  onRecentTokenSelect?: (token: Token) => void
-  fundMethod?: FundMethod | null
-  onNavigateToFundMethods?: () => void
-  showContinueButton?: boolean
-  selectedToken?: Token | null
-  onContinue?: (selectedToken: Token) => void
-  showInsufficientBalance?: boolean
-  totalBalanceUsd?: number
-  totalBalanceUsdFormatted?: string
-  compactMode?: boolean
-  allSupportedTokens?: boolean
-  chainListScreen?: boolean
-  onNavigateToChainList?: () => void
-}
-
-export const TokenSelector: React.FC<TokenSelectorProps> = ({
-  onTokenSelect,
-  targetAmountUsd,
-  onError,
-  recentTokens = [],
-  onRecentTokenSelect,
-  fundMethod,
-  onNavigateToFundMethods,
-  showContinueButton = false,
-  selectedToken,
-  onContinue,
-  showInsufficientBalance = false,
-  compactMode = false,
-  allSupportedTokens = false,
-  chainListScreen,
-  onNavigateToChainList,
-}) => {
-  const [hasInitiallyLoaded, setHasInitiallyLoaded] = useState(false)
-  const { isBalanceVisible } = useBalanceVisible()
-  const { address } = useAccount()
-
-  // Ref for virtual list container
-  const parentRef = useRef<HTMLDivElement>(null)
-
-  const {
-    searchQuery,
-    setSearchQuery,
-    handleTokenSelect,
-    filteredTokens,
-    chainFilteredTokens: rawChainFilteredTokens,
-    foundTokensAllChains,
-    isLoadingTokens,
-    isLoadingCustomToken,
-    isSearching,
-    customTokenError,
-    isTokenSelected,
-    balanceError,
-  } = useTokenList({
-    onContinue: onTokenSelect, // Use onTokenSelect for the hook
-    targetAmountUsd,
-    onError,
-    fundMethod,
-    allSupportedTokens,
-  })
-
-  const {
-    selectedChainId: filterByChainId,
-    setSelectedChainId: setFilterByChainId,
-  } = useChainFilter()
-  const { data: supportedChains = [] } = useSupportedChains()
-
-  const chainFilteredTokens = useDeferredValue(rawChainFilteredTokens)
-
-  // When searching by address with a chain filter active, the token may not
-  // exist on the selected chain but may have been found on other chains.
-  // Compute those "other chain" results so we can offer them to the user.
-  const tokensFoundOnOtherChains = useMemo(() => {
-    if (
-      filterByChainId === null ||
-      chainFilteredTokens.length > 0 ||
-      foundTokensAllChains.length === 0 ||
-      !isAddress(searchQuery.trim())
-    ) {
-      return []
-    }
-    return foundTokensAllChains.filter(
-      (t) => (t.chainId || 0) !== filterByChainId,
-    )
-  }, [filterByChainId, chainFilteredTokens, foundTokensAllChains, searchQuery])
-
-  // Track when initial load is complete
-  useEffect(() => {
-    if (!isLoadingTokens && !hasInitiallyLoaded) {
-      setHasInitiallyLoaded(true)
-    }
-  }, [isLoadingTokens, hasInitiallyLoaded])
-
-  // Determine if we should show the initial loading state
-  const showInitialLoading =
-    !hasInitiallyLoaded &&
-    (isLoadingTokens || rawChainFilteredTokens.length === 0)
-
-  // Chain selector should show all supported chains, not just chains present in
-  // currently filtered token results.
-  const uniqueChains = useMemo(() => {
-    return supportedChains
-      .map((chain) => {
-        const chainInfo = getChainInfo(chain.id)
-        return {
-          chainId: chain.id,
-          name: chainInfo?.name || chain.name || `Chain ${chain.id}`,
-          imageUrl: "", // We'll use TokenImage component for chain icons
-        }
-      })
-      .sort((a, b) => a.name.localeCompare(b.name))
-  }, [supportedChains])
-
-  // Filter recent tokens to only show ones that exist in the current token list and match search
-  const filteredRecentTokens = recentTokens.filter((recentToken) => {
-    // First check if this recent token exists in the current token list
-    const existsInTokenList = chainFilteredTokens.some(
-      (token) =>
-        addressEqual(token.contractAddress, recentToken.contractAddress) &&
-        (token.chainId || 0) === (recentToken.chainId || 0),
-    )
-
-    if (!existsInTokenList) return false
-
-    // Then apply search filtering
-    if (!searchQuery.trim()) return true
-
-    const query = searchQuery.trim().toLowerCase()
-    return (
-      recentToken.symbol.toLowerCase().includes(query) ||
-      recentToken.name.toLowerCase().includes(query) ||
-      normalizeAddress(recentToken.contractAddress).includes(query)
-    )
-  })
-
-  // Calculate list height based on mode and recent tokens
-  const listHeight = compactMode
-    ? 192 // max-h-48 = 12rem = 192px
-    : filteredRecentTokens.length > 0
-      ? 200
-      : 250
-
-  const virtualizer = useVirtualizer({
-    count: chainFilteredTokens.length,
-    getScrollElement: () => parentRef.current,
-    estimateSize: () => TOKEN_ROW_HEIGHT,
-    overscan: 25, // Render 5 extra items above/below viewport for smooth scrolling
-  })
-
-  // Enhanced token select handler that resets chain filter
-  const handleTokenSelectWithReset = useCallback(
-    (token: Token) => {
-      // Reset chain filter after token selection
-      setFilterByChainId(null)
-      // Call the original handler
-      handleTokenSelect(token)
-    },
-    [setFilterByChainId, handleTokenSelect],
-  )
-
-  // Handle recent token selection by finding the actual token from the list
-  const handleRecentTokenSelect = (recentToken: Token) => {
-    // Find the actual token from the filtered tokens list
-    const actualToken = chainFilteredTokens.find(
-      (token) =>
-        addressEqual(token.contractAddress, recentToken.contractAddress) &&
-        (token.chainId || 0) === (recentToken.chainId || 0),
-    )
-
-    if (actualToken) {
-      // Use the actual token with balance info and reset chain filter
-      handleTokenSelectWithReset(actualToken)
-    } else if (onRecentTokenSelect) {
-      // Reset chain filter and fallback to the original handler
-      setFilterByChainId(null)
-      onRecentTokenSelect(recentToken)
-    }
-  }
-
-  // Determine the error message to display
-  const errorMessage = useMemo(() => {
-    // Custom token error
-    if (customTokenError && searchQuery.trim().startsWith("0x")) {
-      return "Token not found on any supported chain."
-    }
-
-    // Search query provided but no results
-    if (searchQuery.trim()) {
-      return "No tokens found matching your search."
-    }
-
-    // Fund method doesn't require error message
-    if (fundMethod === "direct-transfer" || fundMethod === "onramp-mesh") {
-      return ""
-    }
-
-    // Address connected but no tokens available
-    if (address) {
-      return "No available tokens found"
-    }
-
-    return ""
-  }, [customTokenError, searchQuery, fundMethod, address])
-
-  return (
-    <div className="space-y-2">
-      {/* Search Field - uses debounced change to prevent re-renders during typing */}
-      <SearchInputField
-        onDebouncedChange={setSearchQuery}
-        debounceMs={300}
-        placeholder="Search tokens, symbol, address"
-        autoFocus={true}
-        className="mb-2"
-        rightAlignedComponent={
-          <ChainFilterDropdown
-            chains={uniqueChains}
-            selectedChainId={filterByChainId}
-            onChainSelect={setFilterByChainId}
-            compactMode={compactMode}
-            nestedMode={true}
-            chainListScreen={chainListScreen}
-            onNavigateToChainList={onNavigateToChainList}
-          />
-        }
-      />
-
-      {/* Recent Tokens - only show after initial load */}
-      <AnimatePresence>
-        {hasInitiallyLoaded && filteredRecentTokens.length > 0 && (
-          <motion.div
-            initial={{ opacity: 0, height: 0 }}
-            animate={{ opacity: 1, height: "auto" }}
-            exit={{ opacity: 0, height: 0 }}
-            transition={{ duration: 0.05, ease: "easeOut" }}
-          >
-            <RecentTokens
-              recentTokens={filteredRecentTokens}
-              onTokenSelect={handleRecentTokenSelect}
-            />
-          </motion.div>
-        )}
-      </AnimatePresence>
-
-      {/* Show skeleton loading for initial load */}
-      {showInitialLoading && (
-        <div style={{ height: listHeight }}>
-          <TokenSkeletonList
-            count={Math.floor(listHeight / TOKEN_ROW_HEIGHT)}
-          />
-        </div>
-      )}
-
-      {/* Show skeleton loading when searching */}
-      {hasInitiallyLoaded &&
-        isSearching &&
-        chainFilteredTokens.length === 0 && (
-          <div style={{ height: listHeight }}>
-            <TokenSkeletonList
-              count={Math.floor(listHeight / TOKEN_ROW_HEIGHT)}
-            />
-          </div>
-        )}
-
-      {/* Show skeleton loading for custom token search */}
-      {hasInitiallyLoaded &&
-        isLoadingCustomToken &&
-        chainFilteredTokens.length === 0 && (
-          <div style={{ height: listHeight }}>
-            <TokenSkeletonList
-              count={Math.floor(listHeight / TOKEN_ROW_HEIGHT)}
-            />
-          </div>
-        )}
-
-      {/* Only show "no tokens found" when search is complete (not loading) */}
-      {hasInitiallyLoaded &&
-        !isLoadingCustomToken &&
-        !isSearching &&
-        !balanceError &&
-        filteredTokens.length === 0 &&
-        chainFilteredTokens.length === 0 &&
-        errorMessage && (
-          <div className="space-y-3">
-            <div className="text-center py-4 rounded-lg trails-bg-secondary">
-              <p className="text-gray-500 dark:text-gray-400">{errorMessage}</p>
-            </div>
-
-            {/* Show tokens found on other chains when address search has results on non-selected chains */}
-            {tokensFoundOnOtherChains.length > 0 && (
-              <div className="space-y-2">
-                <p className="text-xs font-medium text-gray-500 dark:text-gray-400 px-2">
-                  {tokensFoundOnOtherChains.length === 1
-                    ? "Found on another chain"
-                    : `Found on ${tokensFoundOnOtherChains.length} other chains`}
-                </p>
-                <div className="max-h-48 overflow-y-auto trails-scrollbar">
-                  {tokensFoundOnOtherChains.map((token) => {
-                    const chainInfo = getChainInfo(token.chainId || 0)
-                    const chainName =
-                      token.chainName ||
-                      chainInfo?.name ||
-                      `Chain ${token.chainId || 0}`
-                    return (
-                      <div
-                        key={`${token.chainId}-${token.contractAddress}`}
-                        onClick={() => handleTokenSelectWithReset(token)}
-                        onKeyDown={(e) => {
-                          if (e.key === "Enter" || e.key === " ") {
-                            e.preventDefault()
-                            handleTokenSelectWithReset(token)
-                          }
-                        }}
-                        className="w-full py-2 px-4 flex items-center space-x-3 transition-all duration-200 trails-list-item trails-border-radius-list-button cursor-pointer"
-                      >
-                        <div className="relative shrink-0 mr-2">
-                          <div className="rounded-full flex items-center justify-center bg-gray-100 dark:bg-gray-700">
-                            {token.contractAddress ? (
-                              <TokenImage
-                                symbol={token.symbol}
-                                imageUrl={token.imageUrl}
-                                chainId={token.chainId}
-                                contractAddress={token.contractAddress}
-                                size={32}
-                              />
-                            ) : (
-                              <span className="text-base font-medium text-gray-600 dark:text-gray-300">
-                                {token.symbol}
-                              </span>
-                            )}
-                          </div>
-                        </div>
-                        <div className="flex-1 min-w-0 text-left">
-                          <h3 className="text-sm font-medium truncate text-gray-900 dark:text-white">
-                            {token.name}
-                          </h3>
-                          <span className="text-xs text-gray-500 dark:text-gray-400">
-                            {token.symbol} on {chainName}
-                          </span>
-                        </div>
-                      </div>
-                    )
-                  })}
-                </div>
-              </div>
-            )}
-          </div>
-        )}
-
-      {/* Token List - Virtualized for performance */}
-      {hasInitiallyLoaded && chainFilteredTokens.length > 0 && (
-        <div
-          ref={parentRef}
-          className="overflow-y-auto trails-scrollbar"
-          style={{ height: listHeight }}
-        >
-          <div
-            style={{
-              height: `${virtualizer.getTotalSize()}px`,
-              width: "100%",
-              position: "relative",
-            }}
-          >
-            {virtualizer.getVirtualItems().map((virtualRow: VirtualItem) => {
-              const token = chainFilteredTokens[virtualRow.index]
-              if (!token) return null
-
-              return (
-                <TokenRow
-                  key={virtualRow.key}
-                  token={token}
-                  isSelected={isTokenSelected(token)}
-                  fundMethod={fundMethod}
-                  isBalanceVisible={isBalanceVisible}
-                  onTokenSelect={handleTokenSelectWithReset}
-                  virtualRow={virtualRow}
-                  measureElement={virtualizer.measureElement}
-                />
-              )
-            })}
-          </div>
-        </div>
-      )}
-
-      {showInsufficientBalance &&
-        fundMethod !== "direct-transfer" &&
-        fundMethod !== "onramp-mesh" &&
-        fundMethod !== "onramp-meld" && (
-          <div
-            className={`text-left py-3 px-4 rounded-lg ${"bg-amber-500/10 border border-solid border-amber-500/30"}`}
-          >
-            <p className={`text-xs font-medium ${"text-amber-400"}`}>
-              Insufficient balance
-            </p>
-            <p className={`text-xs mt-1 ${"text-amber-300"}`}>
-              You do not have enough funds to reach the target amount
-            </p>
-          </div>
-        )}
-
-      {showContinueButton && onContinue && selectedToken && (
-        <div className="space-y-4">
-          <button
-            type="button"
-            onClick={() => onContinue(selectedToken)}
-            disabled={!selectedToken}
-            className={`w-full font-semibold py-3 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`}
-          >
-            Continue
-          </button>
-        </div>
-      )}
-
-      {/* Fund method label */}
-      {(fundMethod === "direct-transfer" ||
-        fundMethod === "onramp-mesh" ||
-        fundMethod === "onramp-meld") && (
-        <div className="text-center pt-2 pb-1">
-          <p className="text-sm font-medium text-gray-600 dark:text-gray-400">
-            {fundMethod === "direct-transfer"
-              ? "Paying with Crypto Transfer"
-              : "Paying with Exchange Deposit"}
-          </p>
-        </div>
-      )}
-
-      {/* Pay with another method button */}
-      {onNavigateToFundMethods && hasInitiallyLoaded && (
-        <div className="text-center pt-1">
-          <button
-            type="button"
-            onClick={onNavigateToFundMethods}
-            className="inline-flex items-center justify-center space-x-1 px-2 py-1 text-xs font-medium trails-text-secondary trails-bg-secondary trails-hover-bg trails-border trails-border-radius-button transition-all duration-200 cursor-pointer"
-          >
-            <ChevronLeft className="h-3 w-3" />
-            <span>Pay with another method</span>
-          </button>
-        </div>
-      )}
-    </div>
-  )
-}