@lifi/widget 3.29.0 → 3.30.0

package/src/hooks/useTokenBalances.ts

@@ -1,96 +1,97 @@
-import { getTokenBalances } from '@lifi/sdk'
-import { useAccount } from '@lifi/wallet-management'
-import { useQuery } from '@tanstack/react-query'
-import { formatUnits } from 'viem'
+import { useMemo } from 'react'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
-import type { TokenAmount } from '../types/token.js'
-import { getQueryKey } from '../utils/queries.js'
+import type { FormType } from '../stores/form/types.js'
+import { isSearchMatch, processTokenBalances } from '../utils/tokenList.js'
+import { useAccountsBalancesData } from './useAccountsBalancesData.js'
+import { useTokenBalancesQueries } from './useTokenBalancesQueries.js'
 import { useTokens } from './useTokens.js'
 
-const defaultRefetchInterval = 32_000
+export const useTokenBalances = (
+  selectedChainId?: number,
+  formType?: FormType,
+  isAllNetworks?: boolean,
+  search?: string
+) => {
+  const {
+    allTokens,
+    isLoading: isTokensLoading,
+    isSearchLoading,
+  } = useTokens(formType, search)
 
-export const useTokenBalances = (selectedChainId?: number) => {
-  const { tokens, featuredTokens, popularTokens, chain, isLoading } =
-    useTokens(selectedChainId)
-  const { account } = useAccount({ chainType: chain?.chainType })
-  const { keyPrefix } = useWidgetConfig()
+  const { data: accountsWithAllTokens, isLoading: isAccountsLoading } =
+    useAccountsBalancesData(selectedChainId, formType, isAllNetworks, allTokens)
 
   const isBalanceLoadingEnabled =
-    Boolean(account.address) &&
-    Boolean(tokens?.length) &&
-    Boolean(selectedChainId)
+    Boolean(accountsWithAllTokens) && !isAccountsLoading
 
-  const {
-    data: tokensWithBalance,
-    isLoading: isBalanceLoading,
-    refetch,
-  } = useQuery({
-    queryKey: [
-      getQueryKey('token-balances', keyPrefix),
-      account.address,
-      selectedChainId,
-      tokens?.length,
-    ],
-    queryFn: async ({ queryKey: [, accountAddress] }) => {
-      const tokensWithBalance: TokenAmount[] = await getTokenBalances(
-        accountAddress as string,
-        tokens!
-      )
+  const { data: allTokensWithBalances, isLoading: isBalanceQueriesLoading } =
+    useTokenBalancesQueries(accountsWithAllTokens, isBalanceLoadingEnabled)
 
-      if (!tokensWithBalance?.length) {
-        return tokens as TokenAmount[]
-      }
+  const { tokens: configTokens } = useWidgetConfig()
 
-      const sortFn = (a: TokenAmount, b: TokenAmount) =>
-        Number.parseFloat(formatUnits(b.amount ?? 0n, b.decimals)) *
-          Number.parseFloat(b.priceUSD ?? '0') -
-        Number.parseFloat(formatUnits(a.amount ?? 0n, a.decimals)) *
-          Number.parseFloat(a.priceUSD ?? '0')
+  const isBalanceLoading =
+    (isBalanceQueriesLoading || isAccountsLoading) &&
+    !allTokensWithBalances?.length
 
-      const featuredTokens: TokenAmount[] = []
-      const tokensWithAmount: TokenAmount[] = []
-      const popularTokens: TokenAmount[] = []
-      const allTokens: TokenAmount[] = []
+  const displayedTokensList = useMemo(() => {
+    const tokensByChain = isAllNetworks
+      ? Object.values(allTokens ?? {}).flat()
+      : selectedChainId
+        ? allTokens?.[selectedChainId]
+        : undefined
+    return tokensByChain?.filter((t) => isSearchMatch(t, search)) ?? []
+  }, [allTokens, isAllNetworks, selectedChainId, search])
 
-      tokensWithBalance.forEach((token) => {
-        if (token.amount) {
-          token.featured = false
-          token.popular = false
-        }
-        if (token.featured) {
-          featuredTokens.push(token)
-        } else if (token.amount) {
-          tokensWithAmount.push(token)
-        } else if (token.popular) {
-          popularTokens.push(token)
-        } else {
-          allTokens.push(token)
-        }
-      })
+  const displayedTokensWithBalances = useMemo(() => {
+    const balancesByChain = isAllNetworks
+      ? allTokensWithBalances
+      : selectedChainId
+        ? allTokensWithBalances?.filter((t) => t.chainId === selectedChainId)
+        : undefined
+    const displayedTokensSet = new Set(
+      displayedTokensList?.map(
+        (t) => `${t.chainId}-${t.address.toLowerCase()}`
+      ) || []
+    )
+    return balancesByChain?.filter((token) => {
+      const tokenKey = `${token.chainId}-${token.address.toLowerCase()}`
+      // Check if token is in displayed list and has amount
+      const isInDisplayedList = displayedTokensSet.has(tokenKey) && token.amount
+      // Check if it matches search (for cached appended tokens)
+      const matchesSearch = isSearchMatch(token, search)
+      return isInDisplayedList || matchesSearch
+    })
+  }, [
+    allTokensWithBalances,
+    displayedTokensList,
+    search,
+    selectedChainId,
+    isAllNetworks,
+  ])
 
-      tokensWithAmount.sort(sortFn)
-
-      const result = [
-        ...featuredTokens,
-        ...tokensWithAmount,
-        ...popularTokens,
-        ...allTokens,
-      ]
-      return result
-    },
-    enabled: isBalanceLoadingEnabled,
-    refetchInterval: defaultRefetchInterval,
-    staleTime: defaultRefetchInterval,
-  })
+  const { processedTokens, withCategories } = useMemo(() => {
+    return processTokenBalances(
+      isBalanceLoading,
+      isAllNetworks ?? false,
+      configTokens,
+      selectedChainId,
+      displayedTokensList,
+      displayedTokensWithBalances
+    )
+  }, [
+    isBalanceLoading,
+    isAllNetworks,
+    configTokens,
+    selectedChainId,
+    displayedTokensList,
+    displayedTokensWithBalances,
+  ])
 
   return {
-    tokens,
-    tokensWithBalance,
-    featuredTokens,
-    popularTokens,
-    chain,
-    isLoading,
-    isBalanceLoading: isBalanceLoading && isBalanceLoadingEnabled,
-    refetch,
+    tokens: processedTokens ?? [],
+    withCategories,
+    isTokensLoading,
+    isSearchLoading,
+    isBalanceLoading,
   }
 }

package/src/hooks/useTokenBalancesQueries.ts

@@ -0,0 +1,94 @@
+import { getTokenBalances, type TokenExtended } from '@lifi/sdk'
+import { useQueries } from '@tanstack/react-query'
+import { useMemo, useRef } from 'react'
+import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import type { TokenAmount, TokenAmountExtended } from '../types/token.js'
+import { getQueryKey } from '../utils/queries.js'
+
+const defaultRefetchInterval = 32_000
+
+export const useTokenBalancesQueries = (
+  accountsWithTokens?: Record<string, Record<number, TokenExtended[]>>,
+  isBalanceLoadingEnabled?: boolean
+) => {
+  const { keyPrefix } = useWidgetConfig()
+  const firstLoadStartRef = useRef<number | null>(null)
+
+  const queryConfig = useMemo(() => {
+    if (!accountsWithTokens) {
+      return []
+    }
+    return Object.entries(accountsWithTokens).flatMap(
+      ([accountAddress, chainTokens]) =>
+        Object.entries(chainTokens).map(([chainIdStr, tokens]) => {
+          const chainId = Number(chainIdStr)
+          return {
+            queryKey: [
+              getQueryKey('token-balances', keyPrefix),
+              accountAddress,
+              chainId,
+              tokens.length,
+            ],
+            queryFn: async (): Promise<TokenAmountExtended[]> => {
+              if (!accountAddress || !tokens) {
+                return []
+              }
+              return await getTokenBalances(accountAddress, tokens)
+            },
+            enabled: isBalanceLoadingEnabled,
+            refetchInterval: defaultRefetchInterval,
+            staleTime: defaultRefetchInterval,
+            keepPreviousData: true,
+          }
+        })
+    )
+  }, [accountsWithTokens, isBalanceLoadingEnabled, keyPrefix])
+
+  const result = useQueries({
+    queries: queryConfig,
+    combine: (results) => {
+      const now = Date.now()
+
+      const hasLoadingQueries = results.some((result) => result.isLoading)
+      if (hasLoadingQueries && firstLoadStartRef.current === null) {
+        firstLoadStartRef.current = now
+      }
+
+      const allComplete = results.every(
+        (result) => result.isSuccess || result.isError
+      )
+
+      // Reset the start time when all queries complete
+      if (allComplete) {
+        firstLoadStartRef.current = null
+      }
+
+      // Calculate time since first load started
+      const timeSinceStart = firstLoadStartRef.current
+        ? now - firstLoadStartRef.current
+        : 0
+
+      // Return results if all complete OR if 500ms have passed since first query started
+      const shouldReturnResults = allComplete || timeSinceStart >= 500
+
+      if (shouldReturnResults) {
+        const data: TokenAmount[] = results
+          .flatMap((result) => result.data || [])
+          .filter((token) => token.amount)
+        return {
+          data,
+          isLoading: !allComplete,
+          isError: results.some((result) => result.isError),
+        }
+      }
+
+      return {
+        data: undefined,
+        isLoading: true,
+        isError: false,
+      }
+    },
+  })
+
+  return result
+}

package/src/hooks/useTokens.ts

@@ -1,111 +1,139 @@
-import { ChainType, getTokens } from '@lifi/sdk'
-import { useQuery } from '@tanstack/react-query'
+import { ChainType, getTokens, type TokensExtendedResponse } from '@lifi/sdk'
+import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useMemo } from 'react'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
-import type { TokenAmount } from '../types/token.js'
+import type { FormType } from '../stores/form/types.js'
+import { isItemAllowed } from '../utils/item.js'
 import { getQueryKey } from '../utils/queries.js'
-import { useChains } from './useChains.js'
+import { filterAllowedTokens } from '../utils/token.js'
+
+export const useTokens = (formType?: FormType, search?: string) => {
+  const {
+    tokens: configTokens,
+    chains: chainsConfig,
+    keyPrefix,
+  } = useWidgetConfig()
+
+  const { isLoading: isSearchLoading } = useBackgroundTokenSearch(search)
 
-export const useTokens = (selectedChainId?: number) => {
-  const { tokens: configTokens, keyPrefix } = useWidgetConfig()
   const { data, isLoading } = useQuery({
     queryKey: [getQueryKey('tokens', keyPrefix)],
-    queryFn: () =>
-      getTokens({
-        chainTypes: [
-          ChainType.EVM,
-          ChainType.SVM,
-          ChainType.UTXO,
-          ChainType.MVM,
-        ],
-        orderBy: 'volumeUSD24H',
-        limit: 1000,
-      }),
+    queryFn: async ({ signal }) => {
+      const chainTypes = [
+        ChainType.EVM,
+        ChainType.SVM,
+        ChainType.UTXO,
+        ChainType.MVM,
+      ].filter((chainType) => isItemAllowed(chainType, chainsConfig?.types))
+      const tokensResponse: TokensExtendedResponse = await getTokens(
+        {
+          chainTypes,
+          orderBy: 'volumeUSD24H',
+          extended: true,
+          limit: 1000,
+        },
+        { signal }
+      )
+      return tokensResponse
+    },
     refetchInterval: 300_000,
     staleTime: 300_000,
   })
-  const {
-    chains,
-    isLoading: isSupportedChainsLoading,
-    getChainById,
-  } = useChains()
-
-  const filteredData = useMemo(() => {
-    if (isSupportedChainsLoading || !data) {
-      return
-    }
-    const chain = getChainById(selectedChainId, chains)
-    const chainAllowed = selectedChainId && chain
-    if (!chainAllowed) {
-      return
-    }
-    let filteredTokens = data.tokens?.[selectedChainId] || []
-    const includedTokens = configTokens?.include?.filter(
-      (token) => token.chainId === selectedChainId
-    )
-    if (includedTokens?.length) {
-      filteredTokens = [...includedTokens, ...filteredTokens]
-    }
 
-    const filteredTokensMap = new Map(
-      filteredTokens.map((token) => [token.address, token])
+  const allTokens = useMemo(() => {
+    return filterAllowedTokens(
+      data?.tokens,
+      configTokens,
+      chainsConfig,
+      formType
     )
+  }, [data?.tokens, configTokens, chainsConfig, formType])
+
+  return {
+    allTokens,
+    isLoading,
+    isSearchLoading,
+  }
+}
+
+// This hook is used to search for tokens in the background.
+// It updates the main tokens cache with the search results,
+// if any of the tokens are not already in the cache.
+const useBackgroundTokenSearch = (search?: string) => {
+  const { chains: chainsConfig, keyPrefix } = useWidgetConfig()
+  const queryClient = useQueryClient()
 
-    const [popularTokens, featuredTokens] = (
-      ['popular', 'featured'] as ('popular' | 'featured')[]
-    ).map((tokenType) => {
-      const typedConfigTokens = configTokens?.[tokenType]?.filter(
-        (token) => token.chainId === selectedChainId
+  const { isLoading: isSearchLoading } = useQuery({
+    queryKey: [getQueryKey('tokens-search', keyPrefix), search],
+    queryFn: async ({ queryKey: [, searchQuery], signal }) => {
+      const chainTypes = [
+        ChainType.EVM,
+        ChainType.SVM,
+        ChainType.UTXO,
+        ChainType.MVM,
+      ].filter((chainType) => isItemAllowed(chainType, chainsConfig?.types))
+      const tokensResponse: TokensExtendedResponse = await getTokens(
+        {
+          chainTypes,
+          orderBy: 'volumeUSD24H',
+          extended: true,
+          search: searchQuery,
+          limit: 1000,
+        },
+        { signal }
       )
 
-      const populatedConfigTokens = typedConfigTokens?.map((token) => {
-        // Mark token as popular
-        ;(token as TokenAmount)[tokenType] = true
-        // Check if this token exists in the filteredTokensMap and add priceUSD if it does
-        const matchingFilteredToken = filteredTokensMap.get(token.address)
-        if (matchingFilteredToken?.priceUSD) {
-          ;(token as TokenAmount).priceUSD = matchingFilteredToken.priceUSD
-        }
-        if (!token.logoURI && matchingFilteredToken) {
-          ;(token as TokenAmount).logoURI = matchingFilteredToken.logoURI
-        }
-        return token
-      }) as TokenAmount[]
-
-      if (populatedConfigTokens?.length) {
-        const configTokenAddresses = new Set(
-          populatedConfigTokens?.map((token) => token.address)
-        )
-        filteredTokens = filteredTokens.filter(
-          (token) => !configTokenAddresses.has(token.address)
+      // Merge search results into main tokens cache
+      if (searchQuery) {
+        queryClient.setQueriesData<TokensExtendedResponse>(
+          { queryKey: [getQueryKey('tokens', keyPrefix)] },
+          (data) => {
+            if (!data) {
+              return data
+            }
+
+            const clonedData = { ...data, tokens: { ...data.tokens } }
+
+            Object.entries(tokensResponse.tokens).forEach(
+              ([chainId, searchTokens]) => {
+                const chainIdNum = Number(chainId)
+                const existingTokens = clonedData.tokens[chainIdNum] || []
+
+                const existingTokenAddresses = new Set(
+                  existingTokens.map((token) => token.address.toLowerCase())
+                )
+
+                // Find tokens in search results that don't exist in the main list
+                const newTokens = searchTokens.filter(
+                  (searchToken) =>
+                    !existingTokenAddresses.has(
+                      searchToken.address.toLowerCase()
+                    )
+                )
+
+                // Add new tokens to the main list
+                if (newTokens.length > 0) {
+                  clonedData.tokens[chainIdNum] = [
+                    ...existingTokens,
+                    ...newTokens,
+                  ]
+                }
+              }
+            )
+
+            return clonedData
+          }
         )
-        populatedConfigTokens.push(...filteredTokens)
-        filteredTokens = populatedConfigTokens
       }
 
-      return populatedConfigTokens
-    })
-
-    return {
-      tokens: filteredTokens,
-      featuredTokens,
-      popularTokens,
-      chain,
-    }
-  }, [
-    chains,
-    configTokens,
-    data,
-    getChainById,
-    isSupportedChainsLoading,
-    selectedChainId,
-  ])
+      return tokensResponse
+    },
+    enabled: !!search,
+    refetchInterval: 300_000,
+    staleTime: 300_000,
+  })
 
   return {
-    tokens: filteredData?.tokens,
-    featuredTokens: filteredData?.featuredTokens,
-    popularTokens: filteredData?.popularTokens,
-    chain: filteredData?.chain,
-    isLoading,
+    isLoading: isSearchLoading,
   }
 }

package/src/i18n/bn.json

@@ -212,6 +212,7 @@
     "slippage": ""
   },
   "main": {
+    "allNetworks": "",
     "allTokens": "",
     "bridgeStepDetails": "",
     "checkoutStepDetails": "",
@@ -310,10 +311,9 @@
     "tokenOnChainAmount": "",
     "tokenSearch": "",
     "valueLoss": "মান ক্ষতি",
-    "searchChain": "",
-    "searchChains": "",
     "searchBridges": "",
-    "searchExchanges": ""
+    "searchExchanges": "",
+    "searchNetwork": ""
   },
   "settings": {
     "appearance": "",

package/src/i18n/de.json

@@ -212,6 +212,7 @@
     "slippage": ""
   },
   "main": {
+    "allNetworks": "",
     "allTokens": "",
     "bridgeStepDetails": "",
     "checkoutStepDetails": "",
@@ -310,10 +311,9 @@
     "tokenOnChainAmount": "",
     "tokenSearch": "",
     "valueLoss": "Wertverlust",
-    "searchChain": "",
-    "searchChains": "",
     "searchBridges": "",
-    "searchExchanges": ""
+    "searchExchanges": "",
+    "searchNetwork": ""
   },
   "settings": {
     "appearance": "",

package/src/i18n/en.json

@@ -212,6 +212,7 @@
     "slippage": "The maximum percentage difference between the expected price, and the actual price at which a transfer is executed. This value can be changed in settings."
   },
   "main": {
+    "allNetworks": "All networks",
     "allTokens": "All tokens",
     "bridgeStepDetails": "Bridge from {{from}} to {{to}} via {{tool}}",
     "checkoutStepDetails": "Purchase via {{tool}}",
@@ -310,10 +311,9 @@
     "tokenOnChainAmount": "{{amount, numberExt}} {{tokenSymbol}} on {{chainName}}",
     "tokenSearch": "Search by token or address",
     "valueLoss": "Value loss",
-    "searchChain": "Search chain",
-    "searchChains": "Search by chain name",
     "searchBridges": "Search by bridge name",
-    "searchExchanges": "Search by exchange name"
+    "searchExchanges": "Search by exchange name",
+    "searchNetwork": "Search network"
   },
   "settings": {
     "appearance": "Appearance",

package/src/i18n/es.json

@@ -212,6 +212,7 @@
     "slippage": "El porcentaje máximo de diferencia entre el precio esperado, y el precio real al que se ejecuta una transferencia. Este valor puede cambiarse en ajustes."
   },
   "main": {
+    "allNetworks": "",
     "allTokens": "Todos los tokens",
     "bridgeStepDetails": "Puente de {{from}} a {{to}} vía {{tool}}",
     "checkoutStepDetails": "Comprar a través de {{tool}}",
@@ -310,10 +311,9 @@
     "tokenOnChainAmount": "",
     "tokenSearch": "",
     "valueLoss": "Valor perdido",
-    "searchChain": "",
-    "searchChains": "Buscar por nombre de cadena",
     "searchBridges": "Buscar por nombre de puente",
-    "searchExchanges": "Buscar por nombre de intercambio"
+    "searchExchanges": "Buscar por nombre de intercambio",
+    "searchNetwork": ""
   },
   "settings": {
     "appearance": "",

package/src/i18n/fr.json

@@ -212,6 +212,7 @@
     "slippage": ""
   },
   "main": {
+    "allNetworks": "",
     "allTokens": "Tous les tokens",
     "bridgeStepDetails": "Transférer de {{from}} à {{to}} via {{tool}}",
     "checkoutStepDetails": "Achat via {{tool}}",
@@ -310,10 +311,9 @@
     "tokenOnChainAmount": "",
     "tokenSearch": "",
     "valueLoss": "Perte de valeur",
-    "searchChain": "",
-    "searchChains": "",
     "searchBridges": "",
-    "searchExchanges": ""
+    "searchExchanges": "",
+    "searchNetwork": ""
   },
   "settings": {
     "appearance": "",

package/src/i18n/hi.json

@@ -212,6 +212,7 @@
     "slippage": ""
   },
   "main": {
+    "allNetworks": "",
     "allTokens": "",
     "bridgeStepDetails": "",
     "checkoutStepDetails": "",
@@ -310,10 +311,9 @@
     "tokenOnChainAmount": "",
     "tokenSearch": "",
     "valueLoss": "",
-    "searchChain": "",
-    "searchChains": "",
     "searchBridges": "",
-    "searchExchanges": ""
+    "searchExchanges": "",
+    "searchNetwork": ""
   },
   "settings": {
     "appearance": "",

package/src/i18n/id.json

@@ -212,6 +212,7 @@
     "slippage": "Perbedaan persentase maksimum antara harga yang diharapkan dan harga sebenarnya saat transfer dilakukan. Nilai ini dapat diubah dalam pengaturan."
   },
   "main": {
+    "allNetworks": "",
     "allTokens": "Semua Token",
     "bridgeStepDetails": "Bridge dari {{from}} to {{to}} via {{tool}}",
     "checkoutStepDetails": "Dapatkan melalui {{tool}}",
@@ -310,10 +311,9 @@
     "tokenOnChainAmount": "{{amount, numberExt}} {{tokenSymbol}} di {{chainName}}",
     "tokenSearch": "",
     "valueLoss": "Kehilangan nilai",
-    "searchChain": "",
-    "searchChains": "Cari berdasarkan nama rantai",
     "searchBridges": "Cari berdasarkan nama bridge",
-    "searchExchanges": "Cari berdasarkan nama exchange"
+    "searchExchanges": "Cari berdasarkan nama exchange",
+    "searchNetwork": ""
   },
   "settings": {
     "appearance": "",

package/src/i18n/it.json

@@ -212,6 +212,7 @@
     "slippage": ""
   },
   "main": {
+    "allNetworks": "",
     "allTokens": "",
     "bridgeStepDetails": "",
     "checkoutStepDetails": "",
@@ -310,10 +311,9 @@
     "tokenOnChainAmount": "",
     "tokenSearch": "",
     "valueLoss": "Perdita di valore",
-    "searchChain": "",
-    "searchChains": "",
     "searchBridges": "",
-    "searchExchanges": ""
+    "searchExchanges": "",
+    "searchNetwork": ""
   },
   "settings": {
     "appearance": "",