@lifi/widget 3.29.1 → 3.30.0

package/src/components/TokenList/VirtualizedTokenList.tsx

@@ -1,8 +1,9 @@
 import { Typography } from '@mui/material'
 import { useVirtualizer } from '@tanstack/react-virtual'
 import type { FC } from 'react'
-import { useCallback, useEffect, useRef } from 'react'
+import { useCallback, useEffect, useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useAvailableChains } from '../../hooks/useAvailableChains.js'
 import type { TokenAmount } from '../../types/token.js'
 import { TokenDetailsSheet } from './TokenDetailsSheet.js'
 import { List } from './TokenList.style.js'
@@ -12,50 +13,64 @@ import type {
   VirtualizedTokenListProps,
 } from './types.js'
 
+const tokenItemHeight = 64 // 60 + 4px margin-bottom
+
 export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
-  account,
   tokens,
   scrollElementRef,
   chainId,
-  chain,
   selectedTokenAddress,
   isLoading,
   isBalanceLoading,
   showCategories,
   onClick,
+  isAllNetworks,
 }) => {
   const { t } = useTranslation()
 
+  const { chains } = useAvailableChains()
+
+  // Create Set for O(1) chain lookup instead of O(n) find
+  const chainsSet = useMemo(() => {
+    if (!chains) {
+      return undefined
+    }
+    return new Map(chains.map((chain) => [chain.id, chain]))
+  }, [chains])
+
   const tokenDetailsSheetRef = useRef<TokenDetailsSheetBase>(null)
 
   const onShowTokenDetails = useCallback(
-    (tokenAddress: string, noContractAddress: boolean) => {
-      tokenDetailsSheetRef.current?.open(tokenAddress, noContractAddress)
+    (tokenAddress: string, noContractAddress: boolean, chainId: number) => {
+      tokenDetailsSheetRef.current?.open(
+        tokenAddress,
+        noContractAddress,
+        chainId
+      )
     },
     []
   )
 
   const getItemKey = useCallback(
     (index: number) => {
-      return `${tokens[index].address}-${index}`
+      const token = tokens[index]
+      return `${token.chainId}-${token.address}-${index}`
     },
     [tokens]
   )
 
-  const { getVirtualItems, getTotalSize, scrollToIndex } = useVirtualizer({
-    count: tokens.length,
-    overscan: 5,
-    paddingEnd: 12,
-    getScrollElement: () => scrollElementRef.current,
-    estimateSize: (index) => {
+  const estimateSize = useCallback(
+    (index: number) => {
+      const currentToken = tokens[index]
+
       // Base size for TokenListItem
-      let size = 64
+      let size = tokenItemHeight
+
       // Early return if categories are not shown
       if (!showCategories) {
         return size
       }
 
-      const currentToken = tokens[index]
       const previousToken = tokens[index - 1]
 
       // Adjust size for the first featured token
@@ -75,8 +90,30 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
 
       return size
     },
-    getItemKey,
-  })
+    [tokens, showCategories]
+  )
+
+  // Chunk the tokens for infinite loading simulation
+  const virtualizerConfig = useMemo(
+    () => ({
+      count: tokens.length,
+      overscan: 5,
+      getScrollElement: () => scrollElementRef.current,
+      estimateSize,
+      getItemKey,
+    }),
+    [tokens.length, estimateSize, getItemKey, scrollElementRef]
+  )
+
+  const { getVirtualItems, getTotalSize, scrollToIndex, measure } =
+    useVirtualizer(virtualizerConfig)
+
+  // Address the issue of disappearing tokens on rerender
+  useEffect(() => {
+    if (scrollElementRef.current) {
+      measure()
+    }
+  }, [measure, scrollElementRef.current])
 
   // biome-ignore lint/correctness/useExhaustiveDependencies: run only when chainId changes
   useEffect(() => {
@@ -86,17 +123,7 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
     }
     // Close the token details sheet when switching the chains
     tokenDetailsSheetRef.current?.close()
-  }, [scrollToIndex, chainId, getVirtualItems])
-
-  if (isLoading) {
-    return (
-      <List disablePadding>
-        {Array.from({ length: 3 }).map((_, index) => (
-          <TokenListItemSkeleton key={index} />
-        ))}
-      </List>
-    )
-  }
+  }, [scrollToIndex, isAllNetworks, chainId, getVirtualItems])
 
   return (
     <>
@@ -109,6 +136,8 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
           const currentToken = tokens[item.index]
           const previousToken: TokenAmount | undefined = tokens[item.index - 1]
 
+          const chain = chainsSet?.get(currentToken.chainId)
+
           const isFirstFeaturedToken = currentToken.featured && item.index === 0
 
           const isTransitionFromFeaturedTokens =
@@ -129,23 +158,28 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
             isTransitionFromFeaturedTokens ||
             (previousToken?.popular && !currentToken.popular)
 
-          const startAdornmentLabel = showCategories
-            ? (() => {
-                if (isFirstFeaturedToken) {
-                  return t('main.featuredTokens')
-                }
-                if (isTransitionToMyTokens) {
-                  return t('main.myTokens')
-                }
-                if (isTransitionToPopularTokens) {
-                  return t('main.popularTokens')
-                }
-                if (shouldShowAllTokensCategory) {
-                  return t('main.allTokens')
-                }
-                return null
-              })()
-            : null
+          const startAdornmentLabel =
+            !isAllNetworks && showCategories
+              ? (() => {
+                  if (isFirstFeaturedToken) {
+                    return t('main.featuredTokens')
+                  }
+                  if (isTransitionToMyTokens) {
+                    return t('main.myTokens')
+                  }
+                  if (isTransitionToPopularTokens) {
+                    return t('main.popularTokens')
+                  }
+                  if (shouldShowAllTokensCategory) {
+                    return t('main.allTokens')
+                  }
+                  return null
+                })()
+              : null
+
+          const isSelected =
+            selectedTokenAddress === currentToken.address &&
+            chainId === currentToken.chainId
 
           return (
             <TokenListItem
@@ -154,11 +188,10 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
               size={item.size}
               start={item.start}
               token={currentToken}
-              chain={chain}
-              selected={currentToken.address === selectedTokenAddress}
+              chain={isAllNetworks ? chain : undefined}
+              selected={isSelected}
               onShowTokenDetails={onShowTokenDetails}
               isBalanceLoading={isBalanceLoading}
-              accountAddress={account.address}
               startAdornment={
                 startAdornmentLabel ? (
                   <Typography
@@ -179,7 +212,14 @@ export const VirtualizedTokenList: FC<VirtualizedTokenListProps> = ({
           )
         })}
       </List>
-      <TokenDetailsSheet ref={tokenDetailsSheetRef} chainId={chainId} />
+      <TokenDetailsSheet ref={tokenDetailsSheetRef} />
+      {isLoading && (
+        <List disablePadding sx={{ cursor: 'default' }}>
+          {Array.from({ length: 3 }).map((_, index) => (
+            <TokenListItemSkeleton key={index} />
+          ))}
+        </List>
+      )}
     </>
   )
 }

package/src/components/TokenList/types.ts

@@ -1,6 +1,5 @@
 import type { ExtendedChain } from '@lifi/sdk'
-import type { Account } from '@lifi/wallet-management'
-import type { MouseEventHandler, RefObject } from 'react'
+import type { RefObject } from 'react'
 import type { FormType } from '../../stores/form/types.js'
 import type { TokenAmount } from '../../types/token.js'
 
@@ -12,16 +11,15 @@ export interface TokenListProps {
 }
 
 export interface VirtualizedTokenListProps {
-  account: Account
   tokens: TokenAmount[]
   scrollElementRef: RefObject<HTMLElement | null>
   isLoading: boolean
   isBalanceLoading: boolean
   chainId?: number
-  chain?: ExtendedChain
   showCategories?: boolean
   onClick(tokenAddress: string, chainId?: number): void
   selectedTokenAddress?: string
+  isAllNetworks: boolean
 }
 
 export interface TokenListItemBaseProps {
@@ -31,9 +29,12 @@ export interface TokenListItemBaseProps {
 }
 
 export interface TokenListItemProps extends TokenListItemBaseProps {
-  accountAddress?: string
   token: TokenAmount
-  onShowTokenDetails: (tokenAddress: string, noContractAddress: boolean) => void
+  onShowTokenDetails: (
+    tokenAddress: string,
+    noContractAddress: boolean,
+    chainId: number
+  ) => void
   chain?: ExtendedChain
   isBalanceLoading?: boolean
   startAdornment?: React.ReactNode
@@ -42,9 +43,12 @@ export interface TokenListItemProps extends TokenListItemBaseProps {
 }
 
 export interface TokenListItemButtonProps {
-  onShowTokenDetails: (tokenAddress: string, noContractAddress: boolean) => void
-  onClick?: MouseEventHandler<HTMLDivElement>
-  accountAddress?: string
+  onShowTokenDetails: (
+    tokenAddress: string,
+    noContractAddress: boolean,
+    chainId: number
+  ) => void
+  onClick?(tokenAddress: string, chainId?: number): void
   token: TokenAmount
   chain?: ExtendedChain
   isBalanceLoading?: boolean
@@ -57,6 +61,6 @@ export interface TokenListItemAvatarProps {
 
 export interface TokenDetailsSheetBase {
   isOpen(): void
-  open(address: string, noContractAddress: boolean): void
+  open(address: string, noContractAddress: boolean, chainId: number): void
   close(): void
 }

package/src/components/TokenList/useTokenSelect.ts

@@ -2,7 +2,7 @@ import { useCallback } from 'react'
 import { useToAddressAutoPopulate } from '../../hooks/useToAddressAutoPopulate.js'
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
-import { useChainOrderStoreContext } from '../../stores/chains/ChainOrderStore.js'
+import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'
 import type { FormType } from '../../stores/form/types.js'
 import { FormKeyHelper } from '../../stores/form/types.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
@@ -21,7 +21,7 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
   const emitter = useWidgetEvents()
   const { setFieldValue, getFieldValues } = useFieldActions()
   const autoPopulateToAddress = useToAddressAutoPopulate()
-  const chainOrderStore = useChainOrderStoreContext()
+  const setChain = useChainOrderStore((state) => state.setChain)
 
   const tokenKey = FormKeyHelper.getTokenKey(formType)
 
@@ -71,7 +71,6 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
       }
 
       // If no opposite token is selected, synchronize the opposite chain to match the currently selected chain
-      const { setChain } = chainOrderStore.getState()
       if (!selectedOppositeTokenAddress && selectedChainId) {
         setFieldValue(
           FormKeyHelper.getChainKey(oppositeFormType),
@@ -109,12 +108,12 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
     },
     [
       autoPopulateToAddress,
-      chainOrderStore,
       disabledUI,
       emitter,
       formType,
       getFieldValues,
       onClick,
+      setChain,
       setFieldValue,
       subvariant,
       splitSubvariant,

package/src/components/TransactionDetails.tsx

@@ -125,7 +125,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                   lineHeight: 1.429,
                 }}
               >
-                {hasRelayerSupport
+                {hasRelayerSupport || !combinedFeesUSD
                   ? t('main.fees.free')
                   : t('format.currency', { value: combinedFeesUSD })}
               </Typography>
@@ -163,7 +163,7 @@ export const TransactionDetails: React.FC<TransactionDetailsProps> = ({
                 variant="body2"
                 sx={{ fontWeight: 600, cursor: 'help' }}
               >
-                {hasRelayerSupport
+                {hasRelayerSupport || !gasCostUSD
                   ? t('main.fees.free')
                   : t('format.currency', {
                       value: gasCostUSD,

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.29.1'
+export const version = '3.30.0'

package/src/hooks/useAccountsBalancesData.ts

@@ -0,0 +1,101 @@
+import type { ChainType, TokenExtended } from '@lifi/sdk'
+import { useAccount } from '@lifi/wallet-management'
+import { useMemo } from 'react'
+import type { FormType } from '../stores/form/types.js'
+import { useChains } from './useChains.js'
+import { useFilteredTokensByBalance } from './useFilteredByTokenBalances.js'
+
+export const useAccountsBalancesData = (
+  selectedChainId?: number,
+  formType?: FormType,
+  isAllNetworks?: boolean,
+  allTokens?: Record<number, TokenExtended[]>
+) => {
+  const { data: accountsWithTokens, isLoading: isAccountsLoading } =
+    useAccountsData(selectedChainId, formType, isAllNetworks, allTokens)
+
+  // Filter out EVM tokens that do not have balances
+  const { data: filteredTokens, isLoading: isCachedBalancesLoading } =
+    useFilteredTokensByBalance(accountsWithTokens)
+
+  return {
+    data: filteredTokens,
+    isLoading: isAccountsLoading || isCachedBalancesLoading,
+  }
+}
+
+const useAccountsData = (
+  selectedChainId?: number,
+  formType?: FormType,
+  isAllNetworks?: boolean,
+  allTokens?: Record<number, TokenExtended[]>
+) => {
+  const {
+    chains: allChains,
+    isLoading: isChainsLoading,
+    getChainById,
+  } = useChains(formType)
+  const currentChain = useMemo(() => {
+    return selectedChainId
+      ? getChainById(selectedChainId, allChains)
+      : undefined
+  }, [selectedChainId, allChains, getChainById])
+  const chains = useMemo(() => {
+    return isAllNetworks ? allChains : currentChain ? [currentChain] : undefined
+  }, [allChains, isAllNetworks, currentChain])
+
+  const { accounts: allAccounts, account: currentAccount } = useAccount(
+    isAllNetworks ? undefined : { chainType: currentChain?.chainType }
+  )
+  const accounts = useMemo(() => {
+    return isAllNetworks
+      ? allAccounts
+      : currentAccount
+        ? [currentAccount]
+        : undefined
+  }, [allAccounts, currentAccount, isAllNetworks])
+
+  const accountsWithTokens = useMemo(() => {
+    if (!chains || !allTokens || !accounts?.length) {
+      return undefined
+    }
+    return accounts
+      ?.filter((account) => account.address)
+      .reduce(
+        (acc, account) => {
+          if (account.address) {
+            const accountChains = chains?.filter(
+              (chain) => account.chainType === chain?.chainType
+            )
+            if (accountChains) {
+              const chainIdSet = new Set(accountChains.map((chain) => chain.id))
+              const filteredTokens = Object.entries(allTokens).reduce(
+                (tokenAcc, [chainIdStr, tokens]) => {
+                  const chainId = Number(chainIdStr)
+                  if (chainIdSet.has(chainId)) {
+                    tokenAcc[chainId] = tokens
+                  }
+                  return tokenAcc
+                },
+                {} as { [chainId: number]: TokenExtended[] }
+              )
+              acc[account.address] = {
+                chainType: account.chainType,
+                tokens: filteredTokens,
+              }
+            }
+          }
+          return acc
+        },
+        {} as Record<
+          string,
+          { chainType: ChainType; tokens: Record<number, TokenExtended[]> }
+        >
+      )
+  }, [accounts, chains, allTokens])
+
+  return {
+    data: accountsWithTokens,
+    isLoading: isChainsLoading,
+  }
+}

package/src/hooks/useFilteredByTokenBalances.ts

@@ -0,0 +1,101 @@
+import {
+  ChainType,
+  getWalletBalances,
+  type TokenExtended,
+  type WalletTokenExtended,
+} from '@lifi/sdk'
+import { useQuery } from '@tanstack/react-query'
+import { useMemo } from 'react'
+import { isSupportedToken } from '../utils/tokenList.js'
+
+export const useFilteredTokensByBalance = (
+  accountsWithTokens?: Record<
+    string,
+    { chainType: ChainType; tokens: Record<number, TokenExtended[]> }
+  >
+) => {
+  const evmAddress = useMemo(() => {
+    const evmAccount = Object.entries(accountsWithTokens ?? {}).find(
+      ([_, { chainType }]) => chainType === ChainType.EVM
+    )
+    return evmAccount?.[0]
+  }, [accountsWithTokens])
+
+  const { data: existingBalances, isLoading } = useQuery({
+    queryKey: ['existing-evm-balances', evmAddress],
+    queryFn: () => getWalletBalances(evmAddress ?? ''),
+    enabled: !!evmAddress,
+    refetchInterval: 30_000, // 30 seconds
+    staleTime: 30_000, // 30 seconds
+  })
+
+  const accountsWithFilteredTokens = useMemo(() => {
+    if (!accountsWithTokens) {
+      return undefined
+    }
+
+    // Early return if no existing balances - return all tokens
+    const result: Record<string, Record<number, TokenExtended[]>> = {}
+    if (!existingBalances) {
+      for (const [address, { tokens }] of Object.entries(accountsWithTokens)) {
+        result[address] = tokens
+      }
+      return result
+    }
+
+    for (const [address, { tokens }] of Object.entries(accountsWithTokens)) {
+      result[address] = {}
+
+      for (const [chainIdStr, chainTokens] of Object.entries(tokens)) {
+        const chainId = Number(chainIdStr)
+        // Get balances for this specific chain
+        const balances = existingBalances?.[chainId]
+        // If no balances, RPC all tokens of the chain
+        if (!balances?.length) {
+          if (chainTokens.length) {
+            result[address][chainId] = chainTokens
+          }
+          continue
+        }
+
+        // Optimize token matching with Set for O(1) lookup
+        const balanceSet = new Set(
+          balances.map((balance: WalletTokenExtended) =>
+            balance.address.toLowerCase()
+          )
+        )
+
+        // Get tokens that are in chainTokens and have balances
+        const filteredTokens = chainTokens.filter((token) => {
+          const tokenKey = token.address.toLowerCase()
+          return balanceSet.has(tokenKey)
+        })
+
+        // Get tokens that are in balances but not in chainTokens
+        const chainTokenSet = new Set(
+          chainTokens.map((token) => token.address.toLowerCase())
+        )
+        const additionalTokens = balances.filter(
+          (balance: WalletTokenExtended) => {
+            const balanceKey = balance.address.toLowerCase()
+            return !chainTokenSet.has(balanceKey) && isSupportedToken(balance)
+          }
+        ) as TokenExtended[]
+
+        // Combine both sets of tokens - convert WalletTokenExtended to TokenAmount
+        const allTokens = [
+          ...filteredTokens,
+          ...additionalTokens,
+        ] as TokenExtended[]
+
+        if (allTokens.length) {
+          result[address][chainId] = allTokens
+        }
+      }
+    }
+
+    return result
+  }, [accountsWithTokens, existingBalances])
+
+  return { data: accountsWithFilteredTokens, isLoading }
+}

package/src/hooks/useListHeight.ts

@@ -102,7 +102,6 @@ export const useListHeight = ({
   )
 
   return {
-    minListHeight,
     listHeight,
   }
 }

package/src/hooks/useToken.ts

@@ -1,23 +1,35 @@
-import { useMemo } from 'react'
 import { useTokenSearch } from './useTokenSearch.js'
 import { useTokens } from './useTokens.js'
 
-export const useToken = (chainId?: number, tokenAddress?: string) => {
-  const { tokens, isLoading } = useTokens(chainId)
+export const useToken = (
+  chainId?: number,
+  tokenAddress?: string,
+  latest?: boolean
+) => {
+  const { allTokens, isLoading: isTokensLoading } = useTokens()
 
-  const token = useMemo(() => {
-    const token = tokens?.find(
-      (token) => token.address === tokenAddress && token.chainId === chainId
-    )
-    return token
-  }, [chainId, tokenAddress, tokens])
+  const token =
+    chainId && tokenAddress
+      ? allTokens?.[chainId]?.find((t) => t.address === tokenAddress)
+      : undefined
 
-  const tokenSearchEnabled = !isLoading && !token
-  const { token: searchedToken, isLoading: isSearchedTokenLoading } =
-    useTokenSearch(chainId, tokenAddress, tokenSearchEnabled)
+  const tokenSearchEnabled =
+    !!chainId && !!tokenAddress && (latest || (!isTokensLoading && !token))
+
+  const { token: searchedToken, isLoading: isSearchLoading } = useTokenSearch(
+    chainId,
+    tokenAddress,
+    tokenSearchEnabled
+  )
+
+  const resolvedToken = latest
+    ? (searchedToken ?? token)
+    : (token ?? searchedToken)
 
   return {
-    token: token ?? searchedToken,
-    isLoading: isLoading || (tokenSearchEnabled && isSearchedTokenLoading),
+    token: resolvedToken,
+    isLoading:
+      !resolvedToken &&
+      (isTokensLoading || (tokenSearchEnabled && isSearchLoading)),
   }
 }

package/src/hooks/useTokenAddressBalance.ts

@@ -1,32 +1,26 @@
-import { useMemo } from 'react'
-import type { TokenAmount } from '../types/token.js'
-import { useTokenBalances } from './useTokenBalances.js'
+import { useAccount } from '@lifi/wallet-management'
+import { useChain } from './useChain.js'
+import { useToken } from './useToken.js'
+import { useTokenBalance } from './useTokenBalance.js'
 
 export const useTokenAddressBalance = (
   chainId?: number,
   tokenAddress?: string
 ) => {
-  const { tokens, tokensWithBalance, chain, isBalanceLoading, refetch } =
-    useTokenBalances(chainId)
+  const { chain, isLoading: isChainLoading } = useChain(chainId)
+  const { account } = useAccount({ chainType: chain?.chainType })
+  const { token, isLoading: isTokenLoading } = useToken(chainId, tokenAddress)
 
-  const token = useMemo(() => {
-    if (tokenAddress && chainId) {
-      let token = tokensWithBalance?.find(
-        (token) => token.address === tokenAddress && token.chainId === chainId
-      )
-      if (!token) {
-        token = tokens?.find(
-          (token) => token.address === tokenAddress && token.chainId === chainId
-        )
-      }
-      return token as TokenAmount
-    }
-  }, [chainId, tokenAddress, tokens, tokensWithBalance])
+  const {
+    token: tokenBalance,
+    isLoading: isBalanceLoading,
+    refetch,
+  } = useTokenBalance(account?.address, token)
 
   return {
-    token,
+    token: tokenBalance,
     chain,
-    isLoading: isBalanceLoading,
+    isLoading: isBalanceLoading || isChainLoading || isTokenLoading,
     refetch,
   }
 }