@lifi/widget 3.29.0 → 3.30.0

package/src/components/Chains/VirtualizedChainList.tsx

@@ -2,8 +2,17 @@ import type { ExtendedChain } from '@lifi/sdk'
 import { useVirtualizer } from '@tanstack/react-virtual'
 import type { RefObject } from 'react'
 import { useCallback, useEffect, useMemo, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'
-import { List } from './ChainList.style.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
+import { AllChainsAvatar } from './AllChainsAvatar.js'
+import {
+  List,
+  ListItem,
+  ListItemAvatar,
+  ListItemButton,
+  ListItemText,
+} from './ChainList.style.js'
 import { ChainListItem } from './ChainListItem.js'
 
 interface VirtualizedChainListProps {
@@ -12,23 +21,30 @@ interface VirtualizedChainListProps {
   onSelect: (chain: ExtendedChain) => void
   selectedChainId?: number
   itemsSize: 'small' | 'medium'
+  hasSearchQuery: boolean
   withPinnedChains: boolean
 }
 
 export const VirtualizedChainList = ({
   chains,
+  hasSearchQuery,
   onSelect,
   selectedChainId,
   itemsSize,
   scrollElementRef,
   withPinnedChains,
 }: VirtualizedChainListProps) => {
+  const { t } = useTranslation()
+  const { setFieldValue } = useFieldActions()
   const selectedChainIdRef = useRef(selectedChainId) // Store the initial selected chain ID to scroll to it once chains are loaded
   const hasScrolledRef = useRef(false)
-  const [pinnedChains, setPinnedChain] = useChainOrderStore((state) => [
-    state.pinnedChains,
-    state.setPinnedChain,
-  ])
+  const [pinnedChains, setPinnedChain, isAllNetworks, setIsAllNetworks] =
+    useChainOrderStore((state) => [
+      state.pinnedChains,
+      state.setPinnedChain,
+      state.isAllNetworks,
+      state.setIsAllNetworks,
+    ])
   const onPin = useCallback(
     (chainId: number) => {
       setPinnedChain(chainId)
@@ -49,16 +65,30 @@ export const VirtualizedChainList = ({
     return [...pinned, ...rest]
   }, [chains, pinnedChains])
 
+  const showAllNetworks = sortedChains.length > 1 && !hasSearchQuery
+
   const getItemKey = useCallback(
     (index: number) => {
-      return `${sortedChains[index].id}-${index}`
+      if (showAllNetworks && index === 0) {
+        return 'all-chains'
+      }
+      const chainIndex = index - (showAllNetworks ? 1 : 0)
+      return `${sortedChains[chainIndex].id}-${index}`
+    },
+    [sortedChains, showAllNetworks]
+  )
+
+  const onChainSelect = useCallback(
+    (chain: ExtendedChain) => {
+      setIsAllNetworks(false)
+      onSelect(chain)
     },
-    [sortedChains]
+    [onSelect, setIsAllNetworks]
   )
 
   const { getVirtualItems, getTotalSize, measure, range, getOffsetForIndex } =
     useVirtualizer({
-      count: sortedChains.length,
+      count: sortedChains.length + (showAllNetworks ? 1 : 0), // +1 for the all networks item
       overscan: 3,
       paddingEnd: 0,
       getScrollElement: () => scrollElementRef.current,
@@ -96,6 +126,12 @@ export const VirtualizedChainList = ({
   )
 
   useEffect(() => {
+    // Mark as scrolled if "All Networks" is initially selected
+    if (isAllNetworks) {
+      hasScrolledRef.current = true
+      return
+    }
+
     // Only scroll if sortedChains is not empty and we haven't scrolled yet
     if (!hasScrolledRef.current && sortedChains.length > 0 && range) {
       const selectedChainIndex = sortedChains.findIndex(
@@ -113,7 +149,12 @@ export const VirtualizedChainList = ({
       }
       hasScrolledRef.current = true // Mark as scrolled (when needed)
     }
-  }, [sortedChains, scrollToIndex, range])
+  }, [sortedChains, scrollToIndex, range, isAllNetworks])
+
+  const selectAllNetworks = useCallback(() => {
+    setIsAllNetworks(true)
+    setFieldValue('tokenSearchFilter', '')
+  }, [setIsAllNetworks, setFieldValue])
 
   return (
     <List
@@ -122,13 +163,40 @@ export const VirtualizedChainList = ({
       disablePadding
     >
       {getVirtualItems().map((item) => {
-        const chain = sortedChains[item.index]
+        if (showAllNetworks && item.index === 0) {
+          return (
+            <ListItem
+              key={item.key}
+              style={{
+                height: `${itemsSize}px`,
+                transform: `translateY(${item.start}px)`,
+                padding: 0,
+              }}
+            >
+              <ListItemButton
+                onClick={selectAllNetworks}
+                selected={isAllNetworks}
+                size={itemsSize}
+              >
+                <ListItemAvatar size={itemsSize}>
+                  <AllChainsAvatar chains={chains} size={itemsSize} />
+                </ListItemAvatar>
+                <ListItemText
+                  primary={t('main.allNetworks')}
+                  size={itemsSize}
+                />
+              </ListItemButton>
+            </ListItem>
+          )
+        }
+
+        const chain = sortedChains[item.index - (showAllNetworks ? 1 : 0)]
         return (
           <ChainListItem
             key={item.key}
             chain={chain}
-            onSelect={onSelect}
-            selected={chain.id === selectedChainId}
+            onSelect={onChainSelect}
+            selected={!isAllNetworks && chain.id === selectedChainId}
             itemsSize={itemsSize}
             size={item.size}
             start={item.start}

package/src/components/RouteCard/RouteCardEssentials.tsx

@@ -64,7 +64,7 @@ export const RouteCardEssentials: React.FC<RouteCardEssentialsProps> = ({
                 lineHeight: 1,
               }}
             >
-              {hasRelayerSupport
+              {hasRelayerSupport || !combinedFeesUSD
                 ? t('main.fees.free')
                 : t('format.currency', {
                     value: combinedFeesUSD,

package/src/components/TokenList/TokenDetailsSheet.tsx

@@ -4,27 +4,22 @@ import type { BottomSheetBase } from '../BottomSheet/types.js'
 import { TokenDetailsSheetContent } from './TokenDetailsSheetContent.js'
 import type { TokenDetailsSheetBase } from './types.js'
 
-interface TokenDetailsSheetProps {
-  chainId: number | undefined
-}
-
-export const TokenDetailsSheet = forwardRef<
-  TokenDetailsSheetBase,
-  TokenDetailsSheetProps
->(({ chainId }, ref) => {
+export const TokenDetailsSheet = forwardRef<TokenDetailsSheetBase>((_, ref) => {
   const bottomSheetRef = useRef<BottomSheetBase>(null)
   const [tokenAddress, setTokenAddress] = useState<string | undefined>(
     undefined
   )
+  const [chainId, setChainId] = useState<number | undefined>(undefined)
   const [withoutContractAddress, setWithoutContractAddress] = useState(false)
 
   useImperativeHandle(
     ref,
     () => ({
       isOpen: () => bottomSheetRef.current?.isOpen(),
-      open: (address: string, noContractAddress: boolean) => {
+      open: (address: string, noContractAddress: boolean, chainId: number) => {
         setTokenAddress(address)
         setWithoutContractAddress(noContractAddress)
+        setChainId(chainId)
         bottomSheetRef.current?.open()
       },
       close: () => {
@@ -35,7 +30,7 @@ export const TokenDetailsSheet = forwardRef<
   )
 
   return (
-    <BottomSheet ref={bottomSheetRef}>
+    <BottomSheet ref={bottomSheetRef} keepMounted>
       <TokenDetailsSheetContent
         ref={ref}
         tokenAddress={tokenAddress}

package/src/components/TokenList/TokenDetailsSheetContent.tsx

@@ -6,7 +6,7 @@ import { forwardRef, type PropsWithChildren, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
 import { useExplorer } from '../../hooks/useExplorer.js'
-import { useTokenSearch } from '../../hooks/useTokenSearch.js'
+import { useToken } from '../../hooks/useToken.js'
 import { shortenAddress } from '../../utils/wallet.js'
 import { TokenAvatar } from '../Avatar/TokenAvatar.js'
 import { CardIconButton } from '../Card/CardIconButton.js'
@@ -34,11 +34,7 @@ export const TokenDetailsSheetContent = forwardRef<
   const { getAddressLink } = useExplorer()
   const { getChainById } = useAvailableChains()
 
-  const { token, isLoading } = useTokenSearch(
-    chainId,
-    tokenAddress,
-    !!tokenAddress
-  )
+  const { token, isLoading } = useToken(chainId, tokenAddress, true)
   const chain = useMemo(() => getChainById(chainId), [chainId, getChainById])
 
   const copyContractAddress = async (e: React.MouseEvent) => {

package/src/components/TokenList/TokenList.tsx

@@ -1,151 +1,79 @@
-import type { BaseToken } from '@lifi/sdk'
-import { useAccount } from '@lifi/wallet-management'
 import { Box } from '@mui/material'
-import { type FC, useEffect } from 'react'
-import { useChain } from '../../hooks/useChain.js'
+import { type FC, memo, useEffect } from 'react'
 import { useDebouncedWatch } from '../../hooks/useDebouncedWatch.js'
 import { useTokenBalances } from '../../hooks/useTokenBalances.js'
-import { useTokenSearch } from '../../hooks/useTokenSearch.js'
 import { useWidgetEvents } from '../../hooks/useWidgetEvents.js'
-import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'
 import { FormKeyHelper } from '../../stores/form/types.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
 import { WidgetEvent } from '../../types/events.js'
-import type { TokenAmount } from '../../types/token.js'
-import { getConfigItemSets, isFormItemAllowed } from '../../utils/item.js'
 import { TokenNotFound } from './TokenNotFound.js'
 import type { TokenListProps } from './types.js'
 import { useTokenSelect } from './useTokenSelect.js'
-import { filteredTokensComparator } from './utils.js'
 import { VirtualizedTokenList } from './VirtualizedTokenList.js'
 
-export const TokenList: FC<TokenListProps> = ({
-  formType,
-  parentRef,
-  height,
-  onClick,
-}) => {
-  const emitter = useWidgetEvents()
-  const [selectedChainId, selectedTokenAddress] = useFieldValues(
-    FormKeyHelper.getChainKey(formType),
-    FormKeyHelper.getTokenKey(formType)
-  )
-  const [tokenSearchFilter]: string[] = useDebouncedWatch(
-    320,
-    'tokenSearchFilter'
-  )
+export const TokenList: FC<TokenListProps> = memo(
+  ({ formType, parentRef, height, onClick }) => {
+    const emitter = useWidgetEvents()
 
-  const { tokens: configTokens } = useWidgetConfig()
-
-  const { chain: selectedChain, isLoading: isSelectedChainLoading } =
-    useChain(selectedChainId)
-  const { account } = useAccount({
-    chainType: selectedChain?.chainType,
-  })
-
-  const {
-    tokens: chainTokens,
-    tokensWithBalance,
-    isLoading: isTokensLoading,
-    isBalanceLoading,
-    featuredTokens,
-    popularTokens,
-  } = useTokenBalances(selectedChainId)
-
-  let filteredTokens = (tokensWithBalance ?? chainTokens ?? []) as TokenAmount[]
-  const normalizedSearchFilter = tokenSearchFilter?.replaceAll('$', '')
-  const searchFilter = normalizedSearchFilter?.toUpperCase() ?? ''
-
-  const filteredConfigTokens = getConfigItemSets(
-    configTokens,
-    (tokens: BaseToken[]) =>
-      new Set(
-        tokens
-          .filter((t) => t.chainId === selectedChainId)
-          .map((t) => t.address)
-      ),
-    formType
-  )
-
-  // Get the appropriate allow/deny lists based on formType
-  filteredTokens = filteredTokens.filter(
-    (token) =>
-      token.chainId === selectedChainId &&
-      isFormItemAllowed(token, filteredConfigTokens, formType, (t) => t.address)
-  )
+    const [selectedChainId, selectedTokenAddress] = useFieldValues(
+      FormKeyHelper.getChainKey(formType),
+      FormKeyHelper.getTokenKey(formType)
+    )
 
-  filteredTokens = tokenSearchFilter
-    ? filteredTokens
-        .filter(
-          (token) =>
-            token.name?.toUpperCase().includes(searchFilter) ||
-            token.symbol
-              .toUpperCase()
-              // Replace ₮ with T for USD₮0
-              .replaceAll('₮', 'T')
-              .includes(searchFilter) ||
-            token.address.toUpperCase().includes(searchFilter)
-        )
-        .sort(filteredTokensComparator(searchFilter))
-    : filteredTokens
+    const isAllNetworks = useChainOrderStore((state) => state.isAllNetworks)
 
-  const tokenSearchEnabled =
-    !isTokensLoading &&
-    !filteredTokens.length &&
-    !!tokenSearchFilter &&
-    !!selectedChainId
+    const [tokenSearchFilter]: string[] = useDebouncedWatch(
+      320,
+      'tokenSearchFilter'
+    )
 
-  const { token: searchedToken, isLoading: isSearchedTokenLoading } =
-    useTokenSearch(
+    const {
+      tokens,
+      withCategories,
+      isTokensLoading,
+      isBalanceLoading,
+      isSearchLoading,
+    } = useTokenBalances(
       selectedChainId,
-      normalizedSearchFilter,
-      tokenSearchEnabled,
-      formType
+      formType,
+      isAllNetworks,
+      tokenSearchFilter
     )
 
-  const isLoading =
-    isTokensLoading ||
-    isSelectedChainLoading ||
-    (tokenSearchEnabled && isSearchedTokenLoading)
+    const handleTokenClick = useTokenSelect(formType, onClick)
 
-  const tokens = filteredTokens.length
-    ? filteredTokens
-    : searchedToken
-      ? [searchedToken]
-      : filteredTokens
+    const showCategories =
+      withCategories && !tokenSearchFilter && !isAllNetworks
 
-  const handleTokenClick = useTokenSelect(formType, onClick)
-  const showCategories =
-    Boolean(featuredTokens?.length || popularTokens?.length) &&
-    !tokenSearchFilter
+    useEffect(() => {
+      const normalizedSearchFilter = tokenSearchFilter?.replaceAll('$', '')
+      if (normalizedSearchFilter) {
+        emitter.emit(WidgetEvent.TokenSearch, {
+          value: normalizedSearchFilter,
+          tokens,
+        })
+      }
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [tokenSearchFilter, tokens, emitter])
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies: Should fire only when search filter changes
-  useEffect(() => {
-    if (normalizedSearchFilter) {
-      emitter.emit(WidgetEvent.TokenSearch, {
-        value: normalizedSearchFilter,
-        tokens,
-      })
-    }
-  }, [normalizedSearchFilter, emitter])
-
-  return (
-    <Box ref={parentRef} style={{ height, overflow: 'auto' }}>
-      {!tokens.length && !isLoading ? (
-        <TokenNotFound formType={formType} />
-      ) : null}
-      <VirtualizedTokenList
-        account={account}
-        tokens={tokens}
-        scrollElementRef={parentRef}
-        chainId={selectedChainId}
-        chain={selectedChain}
-        isLoading={isLoading}
-        isBalanceLoading={isBalanceLoading}
-        showCategories={showCategories}
-        onClick={handleTokenClick}
-        selectedTokenAddress={selectedTokenAddress}
-      />
-    </Box>
-  )
-}
+    return (
+      <Box ref={parentRef} style={{ height, overflow: 'auto' }}>
+        {!tokens.length && !isTokensLoading && !isSearchLoading ? (
+          <TokenNotFound formType={formType} />
+        ) : null}
+        <VirtualizedTokenList
+          tokens={tokens}
+          scrollElementRef={parentRef}
+          chainId={selectedChainId}
+          isLoading={isTokensLoading || isSearchLoading}
+          isBalanceLoading={isBalanceLoading}
+          showCategories={showCategories}
+          onClick={handleTokenClick}
+          selectedTokenAddress={selectedTokenAddress}
+          isAllNetworks={isAllNetworks}
+        />
+      </Box>
+    )
+  }
+)