0xtrails 0.13.2 → 0.14.0

package/src/widget/hooks/useCustomTokenSearch.tsx

@@ -1,369 +0,0 @@
-import { useMemo, useEffect, useCallback } from "react"
-import { isAddress } from "viem"
-import { useQuery, useQueryClient } from "@tanstack/react-query"
-import { getChainInfo } from "../../chains.js"
-import { useSupportedChains } from "../../query/chains.hooks.js"
-import { getSupportedTokens, searchTokenByAddress } from "../../tokens.js"
-import { useCustomTokens } from "../../customTokens.js"
-import type { Token } from "../../tokens.js"
-import { logger } from "../../logger.js"
-import { MINUTE_MS, DAY_MS } from "../../utils/time.js"
-import { useTrails } from "../providers/TrailsProvider.js"
-
-import { addressEqual, normalizeAddress } from "../../utils/address.js"
-import { isPositiveBigInt } from "../../utils/validation.js"
-interface UseCustomTokenSearchProps {
-  searchQuery: string
-  filteredTokensFormatted: Token[]
-  filterByChainId: number | null
-  /** True once the API search (getTokenList) for an address query
-   *  has completed with zero results. */
-  isApiAddressSearchComplete: boolean
-}
-
-interface UseCustomTokenSearchReturn {
-  chainFilteredTokens: Token[]
-  /** All tokens found by findContractInfo across every supported chain (unfiltered by chain selector). */
-  foundTokensAllChains: Token[]
-  isLoadingCustomToken: boolean
-  customTokenError: Error | null
-  isCustomToken: (chainId: number, contractAddress: string) => boolean
-}
-
-/**
- * Hook to handle custom token search and integration
- * Detects addresses in search query, fetches token info, and merges with token list
- */
-export function useCustomTokenSearch({
-  searchQuery,
-  filteredTokensFormatted,
-  filterByChainId,
-  isApiAddressSearchComplete,
-}: UseCustomTokenSearchProps): UseCustomTokenSearchReturn {
-  const { data: supportedChains = [] } = useSupportedChains()
-  const { addCustomToken, customTokens } = useCustomTokens()
-  const trailsConfig = useTrails()
-  const queryClient = useQueryClient()
-  // Get official supported tokens (before merging with custom tokens) to check if token is truly custom
-  const {
-    data: officialSupportedTokens = [],
-    isSuccess: officialTokensLoaded,
-  } = useQuery({
-    queryKey: ["supportedTokens"],
-    queryFn: () =>
-      getSupportedTokens({
-        trailsApiKey: trailsConfig.trailsApiKey,
-        trailsApiUrl: trailsConfig.trailsApiUrl,
-        queryClient,
-      }),
-    staleTime: DAY_MS, // 24 hours - token list is static
-    gcTime: DAY_MS, // 24 hours
-    refetchOnMount: false, // Don't refetch when cached data exists (persistence-friendly)
-    refetchOnWindowFocus: false,
-    refetchOnReconnect: false,
-  })
-
-  // Detect if search query is a valid address
-  const searchAddress = isAddress(searchQuery.trim())
-    ? searchQuery.trim()
-    : null
-
-  // Check if the address already exists in the token list
-  // When chain filter is active, check if token exists on that specific chain
-  // Otherwise, check if it exists on any chain
-  // Also check custom tokens from localStorage
-  const addressExistsInList = useMemo(() => {
-    if (!searchAddress) return false
-
-    // First check custom tokens (from localStorage)
-    const existsInCustomTokens = customTokens.some((token) => {
-      const addressMatch = addressEqual(token.contractAddress, searchAddress)
-      if (filterByChainId !== null) {
-        return addressMatch && token.chainId === filterByChainId
-      }
-      return addressMatch
-    })
-
-    if (existsInCustomTokens) return true
-
-    // Then check filteredTokensFormatted
-    // If chain filter is active, check if token exists on that specific chain
-    if (filterByChainId !== null) {
-      return filteredTokensFormatted.some(
-        (token) =>
-          token.chainId === filterByChainId &&
-          addressEqual(token.contractAddress, searchAddress),
-      )
-    }
-
-    // Otherwise, check if it exists on any chain
-    return filteredTokensFormatted.some((token) =>
-      addressEqual(token.contractAddress, searchAddress),
-    )
-  }, [searchAddress, filteredTokensFormatted, filterByChainId, customTokens])
-
-  // Single request to find the token across all chains via SearchContractInfo
-  const supportedChainIds = useMemo(
-    () => new Set(supportedChains.map((c) => c.id)),
-    [supportedChains],
-  )
-
-  const {
-    data: foundTokensAllChains = [],
-    isLoading: isLoadingCustomToken,
-    error: customTokenError,
-  } = useQuery({
-    queryKey: ["customTokenAllChains", searchAddress?.toLowerCase()],
-    queryFn: async () => {
-      if (!searchAddress) return []
-
-      logger.console.log(
-        `[trails-sdk] Searching for token ${searchAddress} across all chains`,
-      )
-
-      const allTokens = await searchTokenByAddress(searchAddress, {
-        sequenceMetadataUrl: trailsConfig.sequenceMetadataUrl,
-        trailsApiKey: trailsConfig.trailsApiKey,
-      })
-
-      // Keep only tokens on supported chains
-      const validTokens = allTokens.filter(
-        (t) => t.chainId != null && supportedChainIds.has(t.chainId),
-      )
-
-      logger.console.log(
-        `[trails-sdk] Found ${validTokens.length} tokens across all chains`,
-      )
-
-      return validTokens
-    },
-    enabled:
-      !!searchAddress &&
-      !addressExistsInList &&
-      supportedChains.length > 0 &&
-      isApiAddressSearchComplete,
-    staleTime: 5 * MINUTE_MS,
-    gcTime: DAY_MS,
-    retry: 1,
-    refetchOnWindowFocus: false,
-  })
-
-  // Add found tokens to storage only after officialSupportedTokens has loaded
-  // to avoid incorrectly persisting official tokens as custom tokens.
-  useEffect(() => {
-    if (
-      foundTokensAllChains.length > 0 &&
-      !customTokenError &&
-      officialTokensLoaded
-    ) {
-      foundTokensAllChains.forEach((tokenInfo) => {
-        const existsInOfficialTokens = officialSupportedTokens.some(
-          (token) =>
-            token.chainId === tokenInfo.chainId &&
-            addressEqual(token.contractAddress, tokenInfo.contractAddress),
-        )
-        const existsInCustomTokens = customTokens.some(
-          (token) =>
-            token.chainId === tokenInfo.chainId &&
-            addressEqual(token.contractAddress, tokenInfo.contractAddress),
-        )
-
-        if (!existsInOfficialTokens && !existsInCustomTokens) {
-          addCustomToken(tokenInfo)
-          logger.console.log(
-            "[trails-sdk] Added custom token to storage:",
-            tokenInfo,
-          )
-        }
-      })
-    }
-  }, [
-    foundTokensAllChains,
-    customTokenError,
-    addCustomToken,
-    officialSupportedTokens,
-    officialTokensLoaded,
-    customTokens,
-  ])
-
-  // Show error if custom token fetch failed
-  useEffect(() => {
-    if (customTokenError && searchAddress && !addressExistsInList) {
-      logger.console.error(
-        "[trails-sdk] Failed to fetch custom token:",
-        customTokenError,
-      )
-    }
-  }, [customTokenError, searchAddress, addressExistsInList])
-
-  // Create a Map for O(1) lookups of tokens with balances
-  const filteredTokensMap = useMemo(() => {
-    const map = new Map<string, Token>()
-    for (const token of filteredTokensFormatted) {
-      const key = `${token.chainId || 0}-${normalizeAddress(token.contractAddress)}`
-      map.set(key, token)
-    }
-    return map
-  }, [filteredTokensFormatted])
-
-  // Convert custom tokens from localStorage to TokenFormatted format
-  // Only include custom tokens that match the current search query
-  const customTokensFromStorage = useMemo(() => {
-    const searchAddressLower = searchAddress?.toLowerCase()
-    const trimmedQuery = searchQuery.trim().toLowerCase()
-
-    return customTokens
-      .filter((token) => {
-        // If searching by address, only include tokens that match the address
-        if (searchAddressLower) {
-          if (token.contractAddress.toLowerCase() !== searchAddressLower)
-            return false
-        } else if (trimmedQuery) {
-          const sym = (token.symbol || "").toLowerCase()
-          const name = (token.name || "").toLowerCase()
-          if (!sym.includes(trimmedQuery) && !name.includes(trimmedQuery))
-            return false
-        }
-        // Apply chain filter if active
-        if (filterByChainId !== null) {
-          return token.chainId === filterByChainId
-        }
-        return true
-      })
-      .map((token): Token => {
-        // O(1) lookup instead of O(n) .find()
-        const key = `${token.chainId || 0}-${normalizeAddress(token.contractAddress)}`
-        const tokenWithBalance = filteredTokensMap.get(key)
-
-        const chainInfo = getChainInfo(token.chainId || 0)
-        const chainName = chainInfo?.name || `Chain ${token.chainId || 0}`
-
-        // If token exists in filteredTokensFormatted, use that data (has balance)
-        if (tokenWithBalance) {
-          return {
-            ...tokenWithBalance,
-            chainName,
-            // Preserve isCustomToken flag from the custom token
-            isCustomToken: token.isCustomToken ?? true,
-          }
-        }
-
-        // Otherwise, use the token from storage (which should have imageUrl already)
-        return {
-          ...token,
-          chainName,
-          isSufficientBalance: true,
-          isCustomToken: token.isCustomToken ?? true,
-        }
-      })
-  }, [
-    customTokens,
-    filterByChainId,
-    filteredTokensMap,
-    searchAddress,
-    searchQuery,
-  ])
-
-  // Helper function to check if a token has a balance
-  const hasBalance = useCallback((token: Token): boolean => {
-    return isPositiveBigInt(token.balance || "0")
-  }, [])
-
-  // Apply chain filter to tokens and merge with custom tokens
-  // Custom tokens with no balance are placed at the bottom
-  const chainFilteredTokens = useMemo(() => {
-    let tokens = filteredTokensFormatted
-
-    // Apply chain filter
-    if (filterByChainId !== null) {
-      tokens = tokens.filter(
-        (token) => (token.chainId || 0) === filterByChainId,
-      )
-    }
-
-    // Create a set of existing token keys to avoid duplicates
-    const existingTokenKeys = new Set(
-      tokens.map(
-        (token) =>
-          `${token.chainId || 0}-${normalizeAddress(token.contractAddress)}`,
-      ),
-    )
-
-    // Separate custom tokens with and without balance
-    const customTokensWithBalance: Token[] = []
-    const customTokensWithoutBalance: Token[] = []
-
-    // Process custom tokens from localStorage
-    customTokensFromStorage.forEach((customToken) => {
-      const key = `${customToken.chainId || 0}-${normalizeAddress(customToken.contractAddress)}`
-      if (!existingTokenKeys.has(key)) {
-        if (hasBalance(customToken)) {
-          customTokensWithBalance.push(customToken)
-        } else {
-          customTokensWithoutBalance.push(customToken)
-        }
-        existingTokenKeys.add(key)
-      }
-    })
-
-    // Process newly found tokens from all chains (no balance info initially)
-    foundTokensAllChains.forEach((foundToken) => {
-      const shouldInclude =
-        filterByChainId === null || foundToken.chainId === filterByChainId
-
-      if (shouldInclude) {
-        const key = `${foundToken.chainId || 0}-${normalizeAddress(foundToken.contractAddress)}`
-        if (!existingTokenKeys.has(key)) {
-          const chainInfo = getChainInfo(foundToken.chainId)
-          const chainName = chainInfo?.name || `Chain ${foundToken.chainId}`
-
-          // foundToken already has the correct imageUrl from getTokenInfo, don't override it!
-          const formattedToken: Token = {
-            ...foundToken,
-            chainName,
-            isCustomToken: true,
-            isSufficientBalance: true,
-          }
-
-          // Add to no-balance category since we haven't fetched balances
-          customTokensWithoutBalance.push(formattedToken)
-          existingTokenKeys.add(key)
-        }
-      }
-    })
-
-    // Combine: regular tokens + custom tokens with balance + custom tokens without balance (at bottom)
-    return [
-      ...tokens,
-      ...customTokensWithBalance,
-      ...customTokensWithoutBalance,
-    ]
-  }, [
-    filteredTokensFormatted,
-    filterByChainId,
-    foundTokensAllChains,
-    customTokensFromStorage,
-    hasBalance,
-  ])
-
-  // Helper function to check if a token is a custom token
-  const isCustomToken = useCallback(
-    (chainId: number, contractAddress: string): boolean => {
-      return customTokens.some(
-        (token) =>
-          token.isCustomToken === true &&
-          (token.chainId || 0) === chainId &&
-          addressEqual(token.contractAddress, contractAddress),
-      )
-    },
-    [customTokens],
-  )
-
-  return {
-    chainFilteredTokens,
-    foundTokensAllChains,
-    isLoadingCustomToken,
-    customTokenError,
-    isCustomToken,
-  }
-}

package/src/widget/hooks/useDebounce.ts

@@ -1,25 +0,0 @@
-import { useEffect, useState } from "react"
-
-/**
- * Debounce hook that delays updating a value until after a specified delay.
- * Useful for reducing API calls during user input like search.
- *
- * @param value - The value to debounce
- * @param delay - The delay in milliseconds (default: 300ms)
- * @returns The debounced value
- */
-export function useDebounce<T>(value: T, delay = 300): T {
-  const [debouncedValue, setDebouncedValue] = useState<T>(value)
-
-  useEffect(() => {
-    const timer = setTimeout(() => {
-      setDebouncedValue(value)
-    }, delay)
-
-    return () => {
-      clearTimeout(timer)
-    }
-  }, [value, delay])
-
-  return debouncedValue
-}