0xtrails 0.13.2 → 0.14.0

package/src/widget/hooks/useTokenList.ts

@@ -1,1168 +0,0 @@
-import type { Address } from "ox"
-import { useEffect, useMemo, useState } from "react"
-import { isAddress, zeroAddress } from "viem"
-import { useAccount } from "wagmi"
-import { useQuery } from "@tanstack/react-query"
-import { getChainInfo } from "../../chains.js"
-import { useSupportedChains } from "../../query/chains.hooks.js"
-import type { Token } from "../../tokens.js"
-import {
-  addressEqual,
-  isNativeToken as isNativeTokenUtil,
-  normalizeAddress,
-} from "../../utils/address.js"
-import { isValidDecimals } from "../../utils/validation.js"
-import {
-  useAccountTotalBalanceUsd,
-  useHasSufficientBalanceUsd,
-  useTokenBalances,
-  WIDGET_REFRESH_INTERVAL,
-} from "../../query/balance.hooks.js"
-import {
-  formatPriceFields,
-  formatUsdAmountDisplay,
-} from "../../utils/format.js"
-import { useSupportedTokens, useGetTokenImageUrl } from "../../tokens.js"
-import { useTrailsClient } from "../../trailsClient.js"
-import { useTokenPrices } from "../../query/price.hooks.js"
-import { logger } from "../../logger.js"
-import { useOnrampClient } from "../../onrampClient.js"
-import type { MeshSupportedToken } from "@0xtrails/api/onramp"
-import { useTrails } from "../providers/TrailsProvider.js"
-import { isMeshAssetSupported } from "../utils/meshSupportedTokens.js"
-import { getActiveMeshEnvironment } from "../utils/onrampConfig.js"
-import { getWidgetOnrampConfig } from "../utils/trailsOnrampConfig.js"
-import { DAY_MS } from "../../utils/time.js"
-import { useChainFilter } from "./useChainFilter.js"
-import { useCustomTokenSearch } from "./useCustomTokenSearch.js"
-import { useDebounce } from "./useDebounce.js"
-import { useSelectedFundMethod } from "./useSelectedFundMethod.js"
-import { useWidgetProps } from "./useWidgetProps.js"
-import type { FundMethod } from "../../transactionIntent/types.js"
-import { tokenListQueries } from "../../query/tokenList.queries.js"
-
-// Standard tokens for QR code and exchange modes
-const STANDARD_TOKENS = [
-  "ETH",
-  "POL",
-  "USDC",
-  "USDT",
-  "DAI",
-  "BAT",
-  "WETH",
-] as const
-
-// Type for API token info from getTokenList endpoint
-type ApiTokenInfo = {
-  chainId: number
-  address: string
-  name: string
-  symbol: string
-  decimals: number
-  supportsBridging?: boolean
-  logoUri?: string
-}
-
-// Helper function to validate and clamp decimals (1-18)
-function validateDecimals(decimals: number): number {
-  return Math.max(1, Math.min(18, Math.floor(decimals || 18)))
-}
-
-// Helper function to check if token is native
-function isNativeToken(token: Token | ApiTokenInfo): boolean {
-  // Token has isNativeToken property
-  if ("isNativeToken" in token && typeof token.isNativeToken === "boolean") {
-    return token.isNativeToken
-  }
-  // ApiTokenInfo uses "address" field (intermediate type before conversion to Token)
-  if ("address" in token) {
-    return isNativeTokenUtil(token.address)
-  }
-  return false
-}
-
-// Helper function to get token key for mapping
-function getTokenKey(chainId: number, contractAddress: string): string {
-  return `${chainId}:${normalizeAddress(contractAddress)}`
-}
-
-// Helper function to convert API token info to Token
-function convertApiTokenToToken(
-  tokenInfo: ApiTokenInfo,
-  getTokenImageUrl: (params: {
-    chainId: number
-    contractAddress: string
-    symbol: string
-  }) => string,
-): Token {
-  const chainInfo = getChainInfo(tokenInfo.chainId)
-  const isNative = isNativeToken(tokenInfo)
-  const validatedDecimals = validateDecimals(tokenInfo.decimals)
-
-  return {
-    symbol: isNative
-      ? chainInfo?.nativeCurrency.symbol || "Unknown"
-      : tokenInfo.symbol,
-    name: isNative
-      ? chainInfo?.nativeCurrency.name || "Unknown"
-      : tokenInfo.name,
-    decimals: isNative
-      ? chainInfo?.nativeCurrency.decimals || 18
-      : validatedDecimals,
-    contractAddress: isNative ? zeroAddress : tokenInfo.address,
-    chainId: tokenInfo.chainId,
-    chainName: chainInfo?.name || `Chain ${tokenInfo.chainId}`,
-    imageUrl:
-      tokenInfo.logoUri ||
-      getTokenImageUrl({
-        chainId: tokenInfo.chainId,
-        contractAddress: isNative ? zeroAddress : tokenInfo.address,
-        symbol: isNative
-          ? chainInfo?.nativeCurrency.symbol || "Unknown"
-          : tokenInfo.symbol,
-      }),
-    isNativeToken: isNative,
-  }
-}
-
-// Helper function to calculate search relevance score
-function calculateSearchRelevanceScore(
-  tokenSymbol: string,
-  tokenName: string,
-  chainName: string,
-  queryParts: string[],
-): number {
-  let score = 0
-
-  for (const part of queryParts) {
-    // Exact symbol match gets highest priority (100 points)
-    if (tokenSymbol === part) score += 100
-
-    // Symbol starts with query gets high priority (50 points)
-    if (tokenSymbol.startsWith(part)) score += 50
-
-    // Symbol contains query gets medium priority (25 points)
-    if (tokenSymbol.includes(part)) score += 25
-
-    // Token name exact match (20 points)
-    if (tokenName === part) score += 20
-
-    // Token name starts with query (15 points)
-    if (tokenName.startsWith(part)) score += 15
-
-    // Token name contains query (10 points)
-    if (tokenName.includes(part)) score += 10
-
-    // Chain name exact match (5 points)
-    if (chainName === part) score += 5
-
-    // Chain name contains query (2 points)
-    if (chainName.includes(part)) score += 2
-  }
-
-  return score
-}
-
-export type UseTokenListProps = {
-  onContinue: (selectedToken: Token) => void
-  targetAmountUsd?: number | null
-  onError: (error: Error | string | null) => void
-  fundMethod?: FundMethod | null
-  allSupportedTokens?: boolean
-  includePrice?: boolean
-  balanceRefetchInterval?: number | false
-}
-
-export type UseTokenListReturn = {
-  selectedToken: Token | null
-  searchQuery: string
-  handleTokenSelect: (token: Token) => void
-  filteredTokens: Token[]
-  chainFilteredTokens: Token[]
-  /** All tokens found by findContractInfo across every supported chain (unfiltered by chain selector). */
-  foundTokensAllChains: Token[]
-  isLoadingSortedTokens: boolean
-  isLoadingSearchTokens?: boolean
-  isLoadingCustomToken: boolean
-  isSearching: boolean // True when search is in progress (typing)
-  customTokenError: Error | null
-  balanceError: Error | null
-  showContinueButton: boolean
-  isTokenSelected: (token: Token) => boolean
-  setSearchQuery: (query: string) => void
-  filteredTokensFormatted: Token[]
-  totalBalanceUsd: number
-  totalBalanceUsdFormatted: string
-  isLoadingTotalBalanceUsd: boolean
-  showInsufficientBalance: boolean
-  isLoadingTokens: boolean
-}
-
-export function useTokenList({
-  onContinue,
-  targetAmountUsd,
-  onError,
-  fundMethod,
-  allSupportedTokens = false,
-  includePrice = false,
-  balanceRefetchInterval = WIDGET_REFRESH_INTERVAL,
-}: UseTokenListProps): UseTokenListReturn {
-  const [selectedToken, setSelectedToken] = useState<Token | null>(null)
-  const [searchQuery, setSearchQuery] = useState("")
-  const { address } = useAccount()
-  const trailsClient = useTrailsClient()
-  const { getTokenImageUrl } = useGetTokenImageUrl()
-  const shouldSkipBalanceQueries = !!fundMethod && fundMethod !== "wallet"
-  const balanceQueryAccount = shouldSkipBalanceQueries
-    ? null
-    : (address as Address.Address)
-
-  const {
-    sortedTokens: allSortedTokens,
-    isLoadingSortedTokens,
-    balanceError,
-  } = useTokenBalances(balanceQueryAccount, undefined, {
-    disabled: shouldSkipBalanceQueries,
-    refetchInterval: shouldSkipBalanceQueries ? false : balanceRefetchInterval,
-  })
-
-  // Only fetch the full token catalog when needed (non-wallet fund methods
-  // or destination selector with allSupportedTokens). For the wallet source
-  // selector we only show user balance tokens.
-  const needsSupportedTokens =
-    (fundMethod && fundMethod !== "wallet") || allSupportedTokens
-  const { supportedTokens, isLoadingTokens: isLoadingSupportedTokens } =
-    useSupportedTokens({ disabled: !needsSupportedTokens })
-
-  // Get trails config for API calls
-  const trailsConfig = useTrails()
-  const { onramp: onrampFactory } = useWidgetProps()
-  const { selectedMeshExchange } = useSelectedFundMethod()
-  const onrampClient = useOnrampClient()
-  const meshOnrampConfig = getWidgetOnrampConfig(onrampFactory)
-  const meshEnvironment = getActiveMeshEnvironment(meshOnrampConfig)
-  const meshEnabled = !!meshOnrampConfig?.mesh
-  const meshAllowedExchanges = meshOnrampConfig?.mesh?.exchanges ?? null
-  const activeMeshIntegrationIds = selectedMeshExchange
-    ? [selectedMeshExchange.integrationId]
-    : null
-  const activeMeshExchangeKeys = selectedMeshExchange
-    ? null
-    : meshAllowedExchanges
-
-  // Get supported chains for getTokenList API
-  const { data: supportedChains = [] } = useSupportedChains()
-
-  // Get chain filter for destination token list
-  const { selectedChainId: filterByChainId } = useChainFilter()
-
-  // Only use API search for exchange/meld/qr-code modes or when allSupportedTokens is true
-  // (where we show all tokens, not just user balances)
-  // For other modes, we only filter user's token balances locally
-  const shouldUseApiSearch =
-    (fundMethod && fundMethod !== "wallet") || allSupportedTokens
-  const shouldFilterMeshTokens =
-    fundMethod === "onramp-mesh" && !allSupportedTokens
-
-  // Memoize chain IDs to avoid recalculating
-  const apiSearchChainIds = useMemo(
-    () => supportedChains.map((chain) => chain.id),
-    [supportedChains],
-  )
-
-  // Check if search query is an address
-  const trimmedSearchQuery = useMemo(() => searchQuery.trim(), [searchQuery])
-  // Debounce the search query to avoid excessive API calls (300ms delay)
-  const debouncedSearchQuery = useDebounce(trimmedSearchQuery, 300)
-  const isSearchQueryAddress = useMemo(
-    () => (debouncedSearchQuery ? isAddress(debouncedSearchQuery) : false),
-    [debouncedSearchQuery],
-  )
-
-  // Track if user is actively typing (search query changed but debounce hasn't fired yet)
-  const isSearchPending = trimmedSearchQuery !== debouncedSearchQuery
-
-  // Call getTokenList API when there's a search query (for any search, not just addresses)
-  const { data: searchTokensResult, isLoading: isLoadingSearchTokens } =
-    useQuery({
-      ...tokenListQueries.search(
-        trailsClient,
-        {
-          trailsApiUrl: trailsConfig.trailsApiUrl,
-          trailsApiKey: trailsConfig.trailsApiKey,
-        },
-        {
-          searchQuery: debouncedSearchQuery,
-          // For getTokenList, pass a chain id if selected
-          chainIds:
-            filterByChainId !== null ? [filterByChainId] : apiSearchChainIds,
-          limit: 30,
-        },
-      ),
-      enabled:
-        shouldUseApiSearch &&
-        debouncedSearchQuery.length > 0 &&
-        !!trailsClient &&
-        !!trailsConfig.trailsApiKey,
-    })
-
-  // Fetch tokens from getTokenList when a chain is selected (for destination token list only)
-  // This fetches all available tokens from that chain, not just filtering existing tokens
-  const {
-    data: chainFilteredTokenList,
-    isLoading: isLoadingChainFilteredTokens,
-  } = useQuery({
-    ...tokenListQueries.byChain(
-      trailsClient,
-      {
-        trailsApiUrl: trailsConfig.trailsApiUrl,
-        trailsApiKey: trailsConfig.trailsApiKey,
-      },
-      {
-        chainId: filterByChainId,
-        limit: 100,
-      },
-    ),
-    enabled:
-      shouldUseApiSearch &&
-      filterByChainId !== null &&
-      !!trailsClient &&
-      !!trailsConfig.trailsApiKey,
-  })
-
-  const {
-    data: meshSupportedTokens = [],
-    isLoading: isLoadingMeshSupportedTokens,
-  } = useQuery({
-    queryKey: [
-      "mesh-supported-tokens",
-      meshEnvironment,
-      activeMeshExchangeKeys,
-      trailsConfig.trailsApiUrl,
-      trailsConfig.trailsApiKey,
-    ],
-    queryFn: async () => {
-      const response = await onrampClient.getMeshSupportedTokens({
-        environment: meshEnvironment,
-      })
-
-      if (activeMeshIntegrationIds?.length) {
-        return (response.tokens || []).filter((token: MeshSupportedToken) =>
-          (token.integrationIds || []).some((integrationId) =>
-            activeMeshIntegrationIds.includes(integrationId),
-          ),
-        )
-      }
-
-      if (!activeMeshExchangeKeys?.length) {
-        return response.tokens || []
-      }
-
-      return (response.tokens || []).filter((token: MeshSupportedToken) =>
-        (token.exchangeKeys || []).some((exchangeKey) =>
-          activeMeshExchangeKeys.includes(exchangeKey),
-        ),
-      )
-    },
-    enabled:
-      fundMethod === "onramp-mesh" &&
-      meshEnabled &&
-      !!trailsConfig.trailsApiKey &&
-      !!trailsConfig.trailsApiUrl,
-    staleTime: DAY_MS,
-    gcTime: DAY_MS,
-    refetchOnMount: false,
-    refetchOnWindowFocus: false,
-    refetchOnReconnect: false,
-  })
-
-  const isSupportedMeshToken = useMemo(
-    () => (chainId?: number | null, symbol?: string | null) =>
-      isMeshAssetSupported(meshSupportedTokens, chainId, symbol),
-    [meshSupportedTokens],
-  )
-
-  // Fetch prices for supported tokens when allSupportedTokens is true OR for qr-code/exchange/meld modes
-  const supportedTokensForPricing = useMemo(() => {
-    if (
-      fundMethod === "direct-transfer" ||
-      fundMethod === "onramp-mesh" ||
-      fundMethod === "onramp-meld"
-    ) {
-      // For QR code and exchange modes, get prices for the filtered tokens
-      if (!supportedTokens?.length) return []
-
-      const filteredTokens = supportedTokens.filter((token: any) => {
-        const symbol = token.symbol.toUpperCase()
-        return shouldFilterMeshTokens
-          ? isSupportedMeshToken(token.chainId, token.symbol)
-          : STANDARD_TOKENS.includes(symbol as any)
-      })
-
-      return filteredTokens.map((token: any) => ({
-        chainId: token.chainId,
-        tokenAddress: token.contractAddress || zeroAddress,
-        tokenSymbol: token.symbol,
-      }))
-    }
-
-    if (!allSupportedTokens || !supportedTokens?.length) return []
-
-    return supportedTokens.map((token: any) => ({
-      chainId: token.chainId,
-      tokenAddress: token.contractAddress || zeroAddress,
-      tokenSymbol: token.symbol,
-    }))
-  }, [
-    allSupportedTokens,
-    supportedTokens,
-    fundMethod,
-    isSupportedMeshToken,
-    shouldFilterMeshTokens,
-  ])
-
-  const {
-    tokenPrices: supportedTokenPrices,
-    isLoadingTokenPrices: isLoadingSupportedTokenPrices,
-  } = useTokenPrices(supportedTokensForPricing, !includePrice)
-
-  // Determine loading state based on fund method and allSupportedTokens
-  const isLoadingTokens =
-    fundMethod && fundMethod !== "wallet"
-      ? isLoadingSupportedTokens ||
-        isLoadingSupportedTokenPrices ||
-        isLoadingMeshSupportedTokens ||
-        isLoadingSearchTokens ||
-        isLoadingChainFilteredTokens
-      : allSupportedTokens
-        ? isLoadingSortedTokens ||
-          isLoadingSupportedTokens ||
-          isLoadingSupportedTokenPrices ||
-          isLoadingChainFilteredTokens
-        : isLoadingSortedTokens
-
-  const { data: totalBalanceUsd = 0, isLoading: isLoadingTotalBalanceUsd } =
-    useAccountTotalBalanceUsd(balanceQueryAccount)
-  const totalBalanceUsdFormatted = formatUsdAmountDisplay(totalBalanceUsd)
-  const {
-    data: hasSufficientBalanceUsd = false,
-    isLoading: isLoadingHasSufficientBalanceUsd,
-    error: hasSufficientBalanceUsdError,
-  } = useHasSufficientBalanceUsd(
-    balanceQueryAccount,
-    shouldSkipBalanceQueries ? null : targetAmountUsd,
-  )
-  const showContinueButton = false
-  // Note: Supported tokens are now fetched via useSupportedTokens hook with caching
-
-  // Map chain-filtered token list results to Token format
-  // Used when a chain is selected for destination token list
-  const chainFilteredApiTokens = useMemo(() => {
-    const chainTokens = (chainFilteredTokenList?.tokens ?? []) as ApiTokenInfo[]
-    if (
-      !shouldUseApiSearch ||
-      chainTokens.length === 0 ||
-      filterByChainId === null
-    ) {
-      return []
-    }
-
-    const tokens = chainTokens
-      .filter((tokenInfo: ApiTokenInfo) => {
-        if (!isValidDecimals(tokenInfo.decimals)) {
-          logger.console.warn(
-            "[trails-sdk] Skipping token with invalid decimals:",
-            {
-              symbol: tokenInfo.symbol,
-              address: tokenInfo.address,
-              decimals: tokenInfo.decimals,
-            },
-          )
-          return false
-        }
-        return true
-      })
-      .map((tokenInfo: ApiTokenInfo) =>
-        convertApiTokenToToken(tokenInfo, getTokenImageUrl),
-      )
-
-    return shouldFilterMeshTokens
-      ? tokens.filter((token) =>
-          isSupportedMeshToken(token.chainId, token.symbol),
-        )
-      : tokens
-  }, [
-    chainFilteredTokenList,
-    getTokenImageUrl,
-    shouldUseApiSearch,
-    filterByChainId,
-    shouldFilterMeshTokens,
-    isSupportedMeshToken,
-  ])
-
-  const sortedTokens = useMemo<Array<Token>>(() => {
-    // If fundMethod is not wallet, use filtered supported tokens
-    if (fundMethod && fundMethod !== "wallet") {
-      // If chain filter is active and we have chain-filtered tokens, use those
-      if (
-        shouldUseApiSearch &&
-        filterByChainId !== null &&
-        chainFilteredApiTokens.length > 0
-      ) {
-        // Merge chain-filtered tokens with local tokens (prefer local tokens with balances)
-        const localTokensMap = new Map<string, Token>()
-        for (const tokenItem of allSortedTokens) {
-          const contractAddress = tokenItem.contractAddress || zeroAddress
-          const key = getTokenKey(tokenItem.chainId || 0, contractAddress)
-          localTokensMap.set(key, tokenItem)
-        }
-
-        const mergedTokens: Token[] = chainFilteredApiTokens.map(
-          (apiToken: Token) => {
-            const contractAddress = apiToken.contractAddress || zeroAddress
-            const key = getTokenKey(apiToken.chainId || 0, contractAddress)
-            const localToken = localTokensMap.get(key)
-
-            // If local token exists and has balance, use it; otherwise use API token
-            return localToken && (localToken.balanceUsd || 0) > 0
-              ? localToken
-              : apiToken
-          },
-        )
-
-        // Add any local tokens that weren't in API results
-        const apiTokenKeys = new Set(
-          mergedTokens.map((token) =>
-            getTokenKey(
-              token.chainId || 0,
-              token.contractAddress || zeroAddress,
-            ),
-          ),
-        )
-        for (const localToken of allSortedTokens) {
-          const key = getTokenKey(
-            localToken.chainId || 0,
-            localToken.contractAddress || zeroAddress,
-          )
-          if (
-            !apiTokenKeys.has(key) &&
-            (localToken.chainId || 0) === filterByChainId
-          ) {
-            mergedTokens.push(localToken)
-          }
-        }
-
-        return shouldFilterMeshTokens
-          ? mergedTokens.filter((token) =>
-              isSupportedMeshToken(token.chainId, token.symbol),
-            )
-          : mergedTokens
-      }
-
-      // Filter to only show specific tokens for QR code and exchange modes
-      const filteredTokens = supportedTokens.filter((token: any) => {
-        const symbol = token.symbol.toUpperCase()
-        return shouldFilterMeshTokens
-          ? isSupportedMeshToken(token.chainId, token.symbol)
-          : STANDARD_TOKENS.includes(symbol as any)
-      })
-
-      // Convert SupportedToken to Token format and add price data
-      const tokensWithPrices: Token[] = filteredTokens.map(
-        (token: Token): Token => {
-          // Find price data for this token
-          const priceData = supportedTokenPrices?.find(
-            (p: any) =>
-              p.token.tokenAddress?.toLowerCase() ===
-                (token.contractAddress || zeroAddress).toLowerCase() &&
-              Number(p.token.chainId) === Number(token.chainId),
-          )
-
-          const priceUsd = priceData?.priceUsd
-
-          // Format price fields if price exists
-          const priceFields = priceUsd ? formatPriceFields(priceUsd) : undefined
-
-          // Return Token with price data
-          return {
-            ...token,
-            // No balance info for QR code and exchange modes
-            ...(priceFields && {
-              priceUsd: priceFields.priceUsd,
-              priceUsdFormatted: priceFields.priceUsdFormatted,
-              priceUsdDisplay: priceFields.priceUsdDisplay,
-            }),
-            isSufficientBalance: true, // Always true for QR code and exchange modes
-          }
-        },
-      )
-
-      // Sort by price (highest first) since volume is not available
-      const sortedMeshTokens = tokensWithPrices.sort((a, b) => {
-        return (b.priceUsd || 0) - (a.priceUsd || 0)
-      })
-
-      return shouldFilterMeshTokens
-        ? sortedMeshTokens.filter((token) =>
-            isSupportedMeshToken(token.chainId, token.symbol),
-          )
-        : sortedMeshTokens
-    }
-
-    // If allSupportedTokens is true and chain filter is active, use chain-filtered tokens
-    if (
-      allSupportedTokens &&
-      shouldUseApiSearch &&
-      filterByChainId !== null &&
-      chainFilteredApiTokens.length > 0
-    ) {
-      // Merge chain-filtered tokens with local tokens (prefer local tokens with balances)
-      const localTokensMap = new Map<string, Token>()
-      for (const tokenItem of allSortedTokens) {
-        const contractAddress = tokenItem.contractAddress || zeroAddress
-        const key = getTokenKey(tokenItem.chainId || 0, contractAddress)
-        localTokensMap.set(key, tokenItem)
-      }
-
-      const mergedTokens: Token[] = chainFilteredApiTokens.map(
-        (apiToken: Token) => {
-          const contractAddress = apiToken.contractAddress || zeroAddress
-          const key = getTokenKey(apiToken.chainId || 0, contractAddress)
-          const localToken = localTokensMap.get(key)
-
-          // If local token exists and has balance, use it; otherwise use API token
-          return localToken && (localToken.balanceUsd || 0) > 0
-            ? localToken
-            : apiToken
-        },
-      )
-
-      // Add any local tokens that weren't in API results
-      const apiTokenKeys = new Set(
-        mergedTokens.map((token) =>
-          getTokenKey(token.chainId || 0, token.contractAddress || zeroAddress),
-        ),
-      )
-      for (const localToken of allSortedTokens) {
-        const key = getTokenKey(
-          localToken.chainId || 0,
-          localToken.contractAddress || zeroAddress,
-        )
-        if (
-          !apiTokenKeys.has(key) &&
-          (localToken.chainId || 0) === filterByChainId
-        ) {
-          mergedTokens.push(localToken)
-        }
-      }
-
-      return mergedTokens
-    }
-
-    // Default behavior: use account-specific tokens (already Token[]). Chain
-    // filtering is applied in useTokenBalances with fail-open fallback.
-    return allSortedTokens
-  }, [
-    allSortedTokens,
-    fundMethod,
-    supportedTokens,
-    supportedTokenPrices,
-    isSupportedMeshToken,
-    shouldFilterMeshTokens,
-    shouldUseApiSearch,
-    filterByChainId,
-    chainFilteredApiTokens,
-    allSupportedTokens,
-  ])
-
-  useEffect(() => {
-    if (onError && balanceError) {
-      onError(balanceError)
-    }
-  }, [balanceError, onError])
-
-  const handleTokenSelect = (token: Token) => {
-    const isNative = token.isNativeToken ?? false
-    const decimals = token.decimals
-    if (!decimals) {
-      logger.console.warn(
-        "[trails-sdk] [useTokenList] Missing decimals for token:",
-        {
-          token: token,
-          chainId: token.chainId,
-          isNative,
-        },
-      )
-      onError("Decimals not found [useTokenList]")
-      return
-    }
-
-    setSelectedToken(token)
-    const canContinue =
-      (!targetAmountUsd || (targetAmountUsd && hasSufficientBalanceUsd)) &&
-      (token.isSufficientBalance ?? true)
-
-    if (!canContinue) {
-      logger.console.warn("[trails-sdk] Cannot continue with token selection", {
-        token: token,
-        targetAmountUsd,
-        hasSufficientBalanceUsd,
-        isSufficientBalance: token.isSufficientBalance,
-      })
-    }
-
-    onContinue(token)
-  }
-
-  const isTokenSelected = (token: Token): boolean => {
-    if (!selectedToken) return false
-
-    const isNative = token.isNativeToken ?? false
-    const selectedIsNative = selectedToken.isNativeToken ?? false
-    return (
-      (selectedToken.chainId || 0) === (token.chainId || 0) &&
-      (isNative
-        ? selectedIsNative
-        : addressEqual(selectedToken.contractAddress, token.contractAddress))
-    )
-  }
-
-  // Map API search results to Token format
-  // Only used for exchange/qr-code modes
-  const apiSearchTokens = useMemo(() => {
-    const searchTokens = (searchTokensResult?.tokens ?? []) as ApiTokenInfo[]
-    if (!shouldUseApiSearch || searchTokens.length === 0) {
-      return []
-    }
-
-    const tokens = searchTokens
-      .filter((tokenInfo: ApiTokenInfo) => {
-        if (!isValidDecimals(tokenInfo.decimals)) {
-          logger.console.warn(
-            "[trails-sdk] Skipping token with invalid decimals:",
-            {
-              symbol: tokenInfo.symbol,
-              address: tokenInfo.address,
-              decimals: tokenInfo.decimals,
-            },
-          )
-          return false
-        }
-        return true
-      })
-      .map((tokenInfo: ApiTokenInfo) =>
-        convertApiTokenToToken(tokenInfo, getTokenImageUrl),
-      )
-
-    return shouldFilterMeshTokens
-      ? tokens.filter((token) =>
-          isSupportedMeshToken(token.chainId, token.symbol),
-        )
-      : tokens
-  }, [
-    searchTokensResult,
-    getTokenImageUrl,
-    shouldUseApiSearch,
-    shouldFilterMeshTokens,
-    isSupportedMeshToken,
-  ])
-
-  const filteredTokens = useMemo(() => {
-    // sortedTokens is already Token[] from useTokenBalances
-    // Only use API search results for exchange/qr-code modes
-    if (
-      shouldUseApiSearch &&
-      trimmedSearchQuery &&
-      apiSearchTokens.length > 0
-    ) {
-      // Create a map of local tokens by chainId and contractAddress for quick lookup
-      const localTokensMap = new Map<string, Token>()
-      for (const tokenItem of sortedTokens) {
-        const contractAddress = tokenItem.contractAddress || zeroAddress
-        const key = getTokenKey(tokenItem.chainId || 0, contractAddress)
-        localTokensMap.set(key, tokenItem)
-      }
-
-      // Merge API results with local tokens (prefer local tokens with balances)
-      const mergedTokens: Token[] = apiSearchTokens.map((apiToken: Token) => {
-        const contractAddress = apiToken.contractAddress || zeroAddress
-        const key = getTokenKey(apiToken.chainId || 0, contractAddress)
-        const localToken = localTokensMap.get(key)
-
-        // If local token exists and has balance, use it; otherwise use API token
-        return localToken && (localToken.balanceUsd || 0) > 0
-          ? localToken
-          : apiToken
-      })
-
-      // Add any local tokens that weren't in API results but match the search
-      const apiTokenKeys = new Set(
-        mergedTokens.map((token) => {
-          const contractAddress = token.contractAddress || zeroAddress
-          return getTokenKey(token.chainId || 0, contractAddress)
-        }),
-      )
-
-      const queryLower = trimmedSearchQuery.toLowerCase()
-      for (const tokenItem of sortedTokens) {
-        const contractAddress = tokenItem.contractAddress || zeroAddress
-        const key = getTokenKey(tokenItem.chainId || 0, contractAddress)
-
-        if (!apiTokenKeys.has(key)) {
-          // Check if token matches search query locally
-          const tokenSymbol = (tokenItem.symbol || "").toLowerCase()
-          const tokenName = (tokenItem.name || "").toLowerCase()
-
-          if (
-            tokenSymbol.includes(queryLower) ||
-            tokenName.includes(queryLower) ||
-            normalizeAddress(contractAddress).includes(queryLower)
-          ) {
-            mergedTokens.push(tokenItem)
-          }
-        }
-      }
-
-      return mergedTokens
-    }
-
-    // Fallback to local filtering if no API results or not using API search
-    if (!trimmedSearchQuery) {
-      return sortedTokens
-    }
-
-    const queryLower = trimmedSearchQuery.toLowerCase()
-    const queryParts = queryLower.split(/\s+/).filter((part) => part.length > 0)
-
-    const matchingTokens = sortedTokens.filter((token: Token) => {
-      const chainInfo = getChainInfo(token.chainId || 0)
-      const chainName = chainInfo?.name || ""
-      const chainNameLower = chainName.toLowerCase()
-
-      const tokenSymbol = (token.symbol || "???").toLowerCase()
-      const tokenName = (token.name || "Unknown Token").toLowerCase()
-      const contractAddress = (
-        token.contractAddress || zeroAddress
-      ).toLowerCase()
-
-      // If multiple query parts, check if they match chain + token combination
-      if (queryParts.length > 1) {
-        const matchesChain = queryParts.some((part) =>
-          chainNameLower.includes(part),
-        )
-        const matchesToken = queryParts.some(
-          (part) =>
-            tokenSymbol.includes(part) ||
-            tokenName.includes(part) ||
-            contractAddress.includes(part),
-        )
-        return matchesChain && matchesToken
-      }
-
-      // Single query part - match against any field
-      return queryParts.some(
-        (part) =>
-          tokenSymbol.includes(part) ||
-          tokenName.includes(part) ||
-          chainNameLower.includes(part) ||
-          contractAddress.includes(part),
-      )
-    })
-
-    // Sort by relevance for balance tokens too
-    return matchingTokens.sort((a: Token, b: Token) => {
-      const aChainInfo = getChainInfo(a.chainId || 0)
-      const bChainInfo = getChainInfo(b.chainId || 0)
-      const aChainName = aChainInfo?.name?.toLowerCase() || ""
-      const bChainName = bChainInfo?.name?.toLowerCase() || ""
-
-      const aTokenSymbol = (a.symbol || "???").toLowerCase()
-      const bTokenSymbol = (b.symbol || "???").toLowerCase()
-
-      const aTokenName = (a.name || "Unknown Token").toLowerCase()
-      const bTokenName = (b.name || "Unknown Token").toLowerCase()
-
-      // Calculate relevance scores using helper function
-      const aScore = calculateSearchRelevanceScore(
-        aTokenSymbol,
-        aTokenName,
-        aChainName,
-        queryParts,
-      )
-      const bScore = calculateSearchRelevanceScore(
-        bTokenSymbol,
-        bTokenName,
-        bChainName,
-        queryParts,
-      )
-
-      return bScore - aScore // Higher score first
-    })
-  }, [sortedTokens, trimmedSearchQuery, apiSearchTokens, shouldUseApiSearch])
-
-  const filteredTokensFormatted = useMemo(() => {
-    // Get base formatted tokens - filteredTokens is already Token[]
-    const baseFormattedTokens = filteredTokens
-      .map((token: Token): Token | null => {
-        const isNative = token.isNativeToken ?? false
-        const chainInfo = getChainInfo(token.chainId || 0)
-        const decimals = token.decimals
-        if (!decimals) {
-          logger.console.warn(
-            "[trails-sdk] Missing decimals for token, skipping:",
-            {
-              token: token,
-              chainId: token.chainId,
-              isNative,
-            },
-          )
-          return null // Return null to filter out tokens without decimals
-        }
-
-        let isSufficientBalance = token.isSufficientBalance ?? true
-        if (targetAmountUsd) {
-          isSufficientBalance = (token.balanceUsd ?? 0) >= targetAmountUsd
-        }
-        const chainName = token.chainName || chainInfo?.name || ""
-
-        // Format price fields if not already formatted
-        const priceFields = token.priceUsdFormatted
-          ? undefined
-          : token.priceUsd
-            ? formatPriceFields(token.priceUsd)
-            : undefined
-
-        // Return Token with all formatting fields set
-        return {
-          ...token,
-          balanceDisplay: token.balanceDisplay || token.balanceFormatted,
-          priceUsdFormatted:
-            token.priceUsdFormatted || priceFields?.priceUsdFormatted,
-          priceUsdDisplay:
-            token.priceUsdDisplay || priceFields?.priceUsdDisplay,
-          balanceUsdDisplay:
-            token.balanceUsdDisplay || token.balanceUsdFormatted,
-          isSufficientBalance,
-          chainName,
-        }
-      })
-      .filter(Boolean) as Token[] // Filter out null values for tokens without decimals
-
-    // If allSupportedTokens is true, combine with supported tokens
-    if (allSupportedTokens) {
-      // Create a set of existing token keys for quick lookup
-      const existingTokenKeys = new Set(
-        baseFormattedTokens.map(
-          (token) =>
-            `${token.chainId}-${normalizeAddress(token.contractAddress)}`,
-        ),
-      )
-
-      // Add supported tokens that don't exist in the base list
-      const additionalSupportedTokens: Token[] = supportedTokens
-        .filter((supportedToken) => {
-          if (
-            shouldFilterMeshTokens &&
-            !isSupportedMeshToken(supportedToken.chainId, supportedToken.symbol)
-          ) {
-            return false
-          }
-
-          const key = `${supportedToken.chainId || 0}-${normalizeAddress(supportedToken.contractAddress)}`
-          return !existingTokenKeys.has(key)
-        })
-        .map((supportedToken): Token => {
-          const chainInfo = getChainInfo(supportedToken.chainId || 0)
-          const chainName =
-            chainInfo?.name || `Chain ${supportedToken.chainId || 0}`
-
-          // Find price data for this supported token
-          const priceData = supportedTokenPrices?.find(
-            (p: any) =>
-              p.token.tokenAddress?.toLowerCase() ===
-                (supportedToken.contractAddress || zeroAddress).toLowerCase() &&
-              Number(p.token.chainId) === Number(supportedToken.chainId),
-          )
-
-          // Format price fields if price exists
-          const priceFields = priceData?.priceUsd
-            ? formatPriceFields(priceData.priceUsd)
-            : undefined
-
-          return {
-            symbol: supportedToken.symbol,
-            name: supportedToken.name,
-            decimals: supportedToken.decimals,
-            contractAddress: supportedToken.contractAddress,
-            chainId: supportedToken.chainId,
-            chainName: chainName,
-            imageUrl: supportedToken.imageUrl || "",
-            ...(priceFields && {
-              priceUsd: priceFields.priceUsd,
-              priceUsdFormatted: priceFields.priceUsdFormatted,
-              priceUsdDisplay: priceFields.priceUsdDisplay,
-            }),
-            isSufficientBalance: true,
-          }
-        })
-        .sort((a, b) => {
-          // Sort supported tokens by price (highest first) since volume is not available
-          return (b.priceUsd || 0) - (a.priceUsd || 0)
-        })
-
-      // Combine lists with base tokens taking precedence
-      const combinedTokens = [
-        ...baseFormattedTokens,
-        ...additionalSupportedTokens,
-      ]
-
-      // Apply search filtering to combined tokens when allSupportedTokens is true
-      if (searchQuery.trim()) {
-        const query = searchQuery.toLowerCase().trim()
-        const queryParts = query.split(/\s+/).filter((part) => part.length > 0)
-
-        const filteredTokens = combinedTokens.filter((token: Token) => {
-          const chainName = token.chainName?.toLowerCase() || ""
-          const tokenSymbol = token.symbol?.toLowerCase() || ""
-          const tokenName = token.name?.toLowerCase() || ""
-          const contractAddress = token.contractAddress?.toLowerCase() || ""
-
-          // If multiple query parts, check if they match chain + token combination
-          if (queryParts.length > 1) {
-            const matchesChain = queryParts.some((part) =>
-              chainName.includes(part),
-            )
-            const matchesToken = queryParts.some(
-              (part) =>
-                tokenSymbol.includes(part) ||
-                tokenName.includes(part) ||
-                contractAddress.includes(part),
-            )
-            return matchesChain && matchesToken
-          }
-
-          // Single query part - match against any field
-          return queryParts.some(
-            (part) =>
-              tokenSymbol.includes(part) ||
-              tokenName.includes(part) ||
-              chainName.includes(part) ||
-              contractAddress.includes(part),
-          )
-        })
-
-        // Sort filtered tokens by relevance
-        return filteredTokens.sort((a, b) => {
-          const aChainName = a.chainName?.toLowerCase() || ""
-          const aTokenSymbol = a.symbol?.toLowerCase() || ""
-          const aTokenName = a.name?.toLowerCase() || ""
-          const bChainName = b.chainName?.toLowerCase() || ""
-          const bTokenSymbol = b.symbol?.toLowerCase() || ""
-          const bTokenName = b.name?.toLowerCase() || ""
-
-          // Calculate relevance scores using helper function
-          const aScore = calculateSearchRelevanceScore(
-            aTokenSymbol,
-            aTokenName,
-            aChainName,
-            queryParts,
-          )
-          const bScore = calculateSearchRelevanceScore(
-            bTokenSymbol,
-            bTokenName,
-            bChainName,
-            queryParts,
-          )
-
-          // If scores are equal, prefer tokens with balances
-          if (aScore === bScore) {
-            const aHasBalance = a.balance && a.balance !== ""
-            const bHasBalance = b.balance && b.balance !== ""
-            if (aHasBalance && !bHasBalance) return -1
-            if (!aHasBalance && bHasBalance) return 1
-          }
-
-          return bScore - aScore // Higher score first
-        })
-      }
-
-      return combinedTokens
-    }
-
-    return baseFormattedTokens
-  }, [
-    filteredTokens,
-    targetAmountUsd,
-    allSupportedTokens,
-    supportedTokens,
-    supportedTokenPrices,
-    searchQuery,
-    shouldFilterMeshTokens,
-    isSupportedMeshToken,
-  ])
-
-  const showInsufficientBalance = useMemo(() => {
-    return (
-      (totalBalanceUsd &&
-        targetAmountUsd &&
-        !hasSufficientBalanceUsd &&
-        !isLoadingHasSufficientBalanceUsd &&
-        !hasSufficientBalanceUsdError) ||
-      (filteredTokensFormatted?.length > 0 &&
-        !filteredTokensFormatted.some((token) => token.isSufficientBalance))
-    )
-  }, [
-    targetAmountUsd,
-    hasSufficientBalanceUsd,
-    isLoadingHasSufficientBalanceUsd,
-    hasSufficientBalanceUsdError,
-    filteredTokensFormatted,
-    totalBalanceUsd,
-  ])
-
-  // isSearching: true when user is typing (debounce pending) or API is fetching
-  const isSearching = isSearchPending || isLoadingSearchTokens
-
-  // True when an address search via the trailsApi.getTokenList has finished with zero results.
-  const isApiAddressSearchComplete =
-    isSearchQueryAddress &&
-    !isLoadingSearchTokens &&
-    !isSearchPending &&
-    (searchTokensResult?.tokens?.length ?? 0) === 0
-
-  const {
-    chainFilteredTokens,
-    foundTokensAllChains,
-    isLoadingCustomToken,
-    customTokenError,
-  } = useCustomTokenSearch({
-    searchQuery,
-    filteredTokensFormatted,
-    filterByChainId,
-    isApiAddressSearchComplete,
-  })
-
-  return {
-    selectedToken,
-    searchQuery,
-    handleTokenSelect,
-    filteredTokens,
-    chainFilteredTokens,
-    foundTokensAllChains,
-    isLoadingSortedTokens: isLoadingSortedTokens || isLoadingSearchTokens,
-    isLoadingSearchTokens,
-    isLoadingCustomToken,
-    isSearching,
-    customTokenError,
-    balanceError,
-    showContinueButton,
-    isTokenSelected,
-    setSearchQuery,
-    filteredTokensFormatted,
-    totalBalanceUsd,
-    totalBalanceUsdFormatted,
-    isLoadingTotalBalanceUsd,
-    showInsufficientBalance,
-    isLoadingTokens,
-  }
-}