@lifi/widget 3.29.1 → 3.30.0

package/src/components/ChainSelect/ChainSelect.tsx

@@ -1,15 +1,20 @@
 import type { EVMChain } from '@lifi/sdk'
-import { Skeleton, Tooltip } from '@mui/material'
+import { Skeleton, type Theme, Tooltip, useMediaQuery } from '@mui/material'
 import { memo, useCallback, useEffect, useMemo } from 'react'
+import { useTranslation } from 'react-i18next'
 import { useNavigate } from 'react-router-dom'
+import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'
 import {
   maxChainsToOrder,
   maxChainsToShow,
+  maxGridItemsToShow,
 } from '../../stores/chains/createChainOrderStore.js'
 import type { FormTypeProps } from '../../stores/form/types.js'
 import { FormKeyHelper } from '../../stores/form/types.js'
+import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
+import { AllChainsAvatar } from '../Chains/AllChainsAvatar.js'
 import {
   ChainAvatar,
   ChainCard,
@@ -20,16 +25,27 @@ import {
 import { useChainSelect } from './useChainSelect.js'
 
 export const ChainSelect = memo(({ formType }: FormTypeProps) => {
+  const { t } = useTranslation()
   const navigate = useNavigate()
+  const { setFieldValue } = useFieldActions()
+  const isMobile = useMediaQuery((theme: Theme) =>
+    theme.breakpoints.down(theme.breakpoints.values.xs)
+  )
+
   const {
     chainOrder,
     chains,
-    getChains,
     isLoading,
+    getSelectedChains,
     setChainOrder,
     setCurrentChain,
   } = useChainSelect(formType)
 
+  const { isAllNetworks, setIsAllNetworks } = useChainOrderStore((state) => ({
+    isAllNetworks: state.isAllNetworks,
+    setIsAllNetworks: state.setIsAllNetworks,
+  }))
+
   const [chainId] = useFieldValues(FormKeyHelper.getChainKey(formType))
 
   useEffect(() => {
@@ -42,60 +58,116 @@ export const ChainSelect = memo(({ formType }: FormTypeProps) => {
     }
   }, [chainId, chainOrder, formType, setChainOrder])
 
+  const onChainSelect = useCallback(
+    (selectedChainId: number) => {
+      setIsAllNetworks(false)
+      setCurrentChain(selectedChainId)
+    },
+    [setIsAllNetworks, setCurrentChain]
+  )
+
   const showAllChains = useCallback(() => {
     navigate(navigationRoutes[`${formType}Chain`])
   }, [navigate, formType])
 
-  const { chainsToHide, chainsToShow, tilesCount } = useMemo(() => {
-    // We check if we can accommodate all the chains on the grid
-    // If there are more than 10 chains we show the number of hidden chains as the last one tile
-    const chainsToHide =
-      chains?.length === maxChainsToShow
-        ? 0
-        : (chains?.length ?? 0) - maxChainsToOrder
+  const selectAllNetworks = useCallback(() => {
+    setIsAllNetworks(true)
+    setFieldValue('tokenSearchFilter', '')
+  }, [setIsAllNetworks, setFieldValue])
 
-    // When there is less than 10 chains we don't care about the order
-    const chainsToShow = chainsToHide > 0 ? getChains() : chains
+  const chainsToHide =
+    chains?.length === maxChainsToShow
+      ? 0
+      : (chains?.length ?? 0) - maxChainsToOrder
 
-    // Number of tiles to show in the grid
-    const tilesCount = (chainsToShow?.length ?? 0) + (chainsToHide > 0 ? 1 : 0)
+  const chainsToShow = useMemo(
+    () => (chainsToHide > 0 ? getSelectedChains() : chains) ?? [],
+    [chainsToHide, getSelectedChains, chains]
+  )
+
+  const showAllNetworks = chainsToShow.length > 1
+
+  const tilesCount =
+    chainsToShow.length + (showAllNetworks ? 1 : 0) + (chainsToHide > 0 ? 1 : 0)
 
-    return { chainsToHide, chainsToShow, tilesCount }
-  }, [chains, getChains])
+  if (isLoading) {
+    return (
+      <ChainContainer itemCount={tilesCount}>
+        {Array.from({ length: maxGridItemsToShow }).map((_, index) => (
+          <Skeleton
+            key={index}
+            variant="rectangular"
+            width={56}
+            height={isMobile ? 36 : 56}
+            sx={{ borderRadius: 1 }}
+          />
+        ))}
+      </ChainContainer>
+    )
+  }
 
   return (
     <ChainContainer itemCount={tilesCount}>
-      {isLoading
-        ? Array.from({ length: maxChainsToOrder }).map((_, index) => (
-            <Skeleton
-              key={index}
-              variant="rectangular"
-              width={56}
-              height={56}
-              sx={{ borderRadius: 1 }}
+      {showAllNetworks && (
+        <Tooltip title={t('main.allNetworks')} enterNextDelay={100}>
+          <ChainCard
+            component="button"
+            onClick={selectAllNetworks}
+            type={isAllNetworks ? 'selected' : 'default'}
+            selectionColor="secondary"
+          >
+            <AllChainsAvatar
+              chains={chains ?? []}
+              size={isMobile ? 'small' : 'medium'}
             />
-          ))
-        : chainsToShow?.map((chain: EVMChain) => (
-            <Tooltip key={chain.id} title={chain.name} enterNextDelay={100}>
-              <ChainCard
-                component="button"
-                onClick={() => setCurrentChain(chain.id)}
-                type={chainId === chain.id ? 'selected' : 'default'}
-                selectionColor="secondary"
-              >
-                <ChainAvatar src={chain.logoURI} alt={chain.key}>
-                  {chain.name[0]}
-                </ChainAvatar>
-              </ChainCard>
-            </Tooltip>
-          ))}
-      {chainsToHide > 0 ? (
+          </ChainCard>
+        </Tooltip>
+      )}
+      {chainsToShow.map((chain: EVMChain) => (
+        <ChainItem
+          key={chain.id}
+          chain={chain}
+          isSelected={chainId === chain.id}
+          isAllNetworks={isAllNetworks}
+          onSelect={onChainSelect}
+        />
+      ))}
+      {chainsToHide > 0 && (
         <ChainCard component="button" onClick={showAllChains}>
           <MoreChainsBox>
             <MoreChainsText>+{chainsToHide}</MoreChainsText>
           </MoreChainsBox>
         </ChainCard>
-      ) : null}
+      )}
     </ChainContainer>
   )
 })
+
+const ChainItem = memo(
+  ({
+    chain,
+    isSelected,
+    isAllNetworks,
+    onSelect,
+  }: {
+    chain: EVMChain
+    isSelected: boolean
+    isAllNetworks: boolean
+    onSelect: (id: number) => void
+  }) => {
+    return (
+      <Tooltip title={chain.name} enterNextDelay={100}>
+        <ChainCard
+          component="button"
+          onClick={() => onSelect(chain.id)}
+          type={!isAllNetworks && isSelected ? 'selected' : 'default'}
+          selectionColor="secondary"
+        >
+          <ChainAvatar src={chain.logoURI} alt={chain.key}>
+            {chain.name[0]}
+          </ChainAvatar>
+        </ChainCard>
+      </Tooltip>
+    )
+  }
+)

package/src/components/ChainSelect/useChainSelect.ts

@@ -31,7 +31,7 @@ export const useChainSelect = (formType: FormType) => {
   const swapOnly = useSwapOnly()
   const { tryResetToAddress } = useToAddressReset()
 
-  const getChains = () => {
+  const getSelectedChains = useCallback(() => {
     if (!chains) {
       return []
     }
@@ -39,7 +39,7 @@ export const useChainSelect = (formType: FormType) => {
       .map((chainId) => chains.find((chain) => chain.id === chainId))
       .filter(Boolean) as EVMChain[]
     return selectedChains
-  }
+  }, [chains, chainOrder])
 
   const setCurrentChain = useCallback(
     (chainId: number) => {
@@ -82,7 +82,7 @@ export const useChainSelect = (formType: FormType) => {
   return {
     chainOrder,
     chains,
-    getChains,
+    getSelectedChains,
     isLoading,
     setChainOrder,
     setCurrentChain,

package/src/components/Chains/AllChainsAvatar.tsx

@@ -0,0 +1,113 @@
+import { ChainType, type EVMChain, type ExtendedChain } from '@lifi/sdk'
+import { Avatar, Box } from '@mui/material'
+import { memo, useMemo } from 'react'
+
+interface AllChainsAvatarProps {
+  chains: ExtendedChain[] | EVMChain[]
+  size: 'small' | 'medium'
+}
+
+const chainTypeIcons = [
+  {
+    name: 'Ethereum',
+    chainType: ChainType.EVM,
+    icon: 'https://lifinance.github.io/types/src/assets/icons/chains/ethereum.svg',
+  },
+  {
+    name: 'Solana',
+    chainType: ChainType.SVM,
+    icon: 'https://lifinance.github.io/types/src/assets/icons/chains/solana.svg',
+  },
+  {
+    name: 'Bitcoin',
+    chainType: ChainType.UTXO,
+    icon: 'https://lifinance.github.io/types/src/assets/icons/chains/bitcoin.svg',
+  },
+  {
+    name: 'Sui',
+    chainType: ChainType.MVM,
+    icon: 'https://lifinance.github.io/types/src/assets/icons/chains/sui.svg',
+  },
+]
+
+const maxChainAvatarsCount = chainTypeIcons.length
+
+export const AllChainsAvatar = memo(
+  ({ chains, size }: AllChainsAvatarProps) => {
+    const icons = useMemo(() => {
+      // Get existing ecosystem icons
+      const existingChainTypeIcons = chainTypeIcons.filter((predefinedChain) =>
+        chains.some((chain) => chain.chainType === predefinedChain.chainType)
+      )
+      if (existingChainTypeIcons.length === maxChainAvatarsCount) {
+        return existingChainTypeIcons
+      }
+
+      const remainingSlots =
+        maxChainAvatarsCount - existingChainTypeIcons.length
+
+      const chainsWithLogos = chains.filter((chain) => {
+        // Filter out chain icons matching ecosystem icons
+        const hasPredefinedIcon = existingChainTypeIcons.some(
+          (icon) => icon.name === chain.name
+        )
+        const hasLogoURI = Boolean(chain.logoURI)
+        return !hasPredefinedIcon && hasLogoURI
+      })
+
+      const additionalIcons = chainsWithLogos
+        .slice(0, remainingSlots)
+        .map((chain) => ({
+          name: chain.name,
+          chainType: chain.chainType,
+          icon: chain.logoURI!,
+        }))
+
+      return [...existingChainTypeIcons, ...additionalIcons]
+    }, [chains])
+
+    const wrapperSize = size === 'small' ? '32px' : '40px'
+    const avatarSize = size === 'small' ? '12px' : '16px'
+    const avatarsCount = Math.min(icons.length, maxChainAvatarsCount)
+    const gridRows = avatarsCount > 2 ? 2 : 1
+    const gridColumns = avatarsCount > 1 ? 2 : 1
+
+    return (
+      <Box
+        sx={{
+          width: wrapperSize,
+          height: wrapperSize,
+          display: 'grid',
+          gridTemplateRows: `repeat(${gridRows}, 1fr)`,
+          gridTemplateColumns: `repeat(${gridColumns}, 1fr)`,
+          placeItems: 'center',
+        }}
+      >
+        {icons.slice(0, avatarsCount).map((chain, idx) => {
+          const isThirdAvatarInThreeAvatarLayout =
+            avatarsCount === 3 && idx === 2
+
+          return (
+            <Avatar
+              key={`${chain.chainType}-${idx}`}
+              src={chain.icon}
+              alt={chain.name}
+              sx={{
+                width: avatarSize,
+                height: avatarSize,
+                margin: 'auto',
+                ...(isThirdAvatarInThreeAvatarLayout && {
+                  gridColumn: '1 / span 2',
+                  gridRow: '2',
+                  justifySelf: 'center',
+                }),
+              }}
+            >
+              {chain.chainType[0]}
+            </Avatar>
+          )
+        })}
+      </Box>
+    )
+  }
+)

package/src/components/Chains/ChainList.tsx

@@ -17,12 +17,14 @@ interface ChainListProps {
   onSelect: (chain: ExtendedChain) => void
   selectedChainId?: number
   isLoading: boolean
+  hasSearchQuery: boolean
   inExpansion: boolean
 }
 
 export const ChainList = ({
   parentRef,
   chains,
+  hasSearchQuery,
   onSelect,
   selectedChainId,
   isLoading,
@@ -78,6 +80,7 @@ export const ChainList = ({
     <VirtualizedChainList
       scrollElementRef={parentRef}
       chains={chains}
+      hasSearchQuery={hasSearchQuery}
       onSelect={onSelect}
       selectedChainId={selectedChainId}
       itemsSize={itemsSize}

package/src/components/Chains/ChainSearchInput.tsx

@@ -33,7 +33,7 @@ export const ChainSearchInput = ({
         <SearchInput
           inputRef={inputRef}
           onChange={onChange}
-          placeholder={t('main.searchChain')}
+          placeholder={t('main.searchNetwork')}
           size="small"
           onClear={handleClear}
         />
@@ -45,7 +45,7 @@ export const ChainSearchInput = ({
     <StickySearchInput
       inputRef={inputRef}
       onChange={onChange}
-      placeholder={t('main.searchChain')}
+      placeholder={t('main.searchNetwork')}
       onClear={handleClear}
     />
   )

package/src/components/Chains/SelectChainContent.tsx

@@ -104,6 +104,7 @@ export const SelectChainContent = memo(function SelectChainContent({
           isLoading={isLoading}
           onSelect={onSelect ?? onSelectChainFallback}
           selectedChainId={selectedChainId}
+          hasSearchQuery={!!inputRef.current?.value}
           inExpansion={inExpansion}
         />
       </Box>

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: () => {

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) => {