@lifi/widget 3.29.0 → 3.30.0

package/dist/esm/utils/tokenList.js

@@ -0,0 +1,106 @@
+import { formatUnits } from 'viem';
+const sortByBalances = (a, b) => 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 sortByVolume = (a, b) => (b.volumeUSD24H ?? 0) - (a.volumeUSD24H ?? 0);
+export const processTokenBalances = (isBalanceLoading, isAllNetworks, configTokens, selectedChainId, tokens, tokensWithBalances) => {
+    if (isBalanceLoading) {
+        if (isAllNetworks) {
+            const sortedTokens = [...(tokens ?? [])].sort(sortByVolume);
+            return {
+                processedTokens: sortedTokens,
+                withCategories: false,
+            };
+        }
+        else {
+            return processedTypedTokens(tokens ?? [], [], selectedChainId, configTokens);
+        }
+    }
+    const sortedTokensWithBalances = [...(tokensWithBalances ?? [])].sort(sortByBalances);
+    const tokensWithBalancesSet = new Set(sortedTokensWithBalances.map((token) => `${token.chainId}-${token.address.toLowerCase()}`));
+    const tokensWithoutBalances = tokens
+        ?.filter((token) => {
+        const tokenKey = `${token.chainId}-${token.address.toLowerCase()}`;
+        return !tokensWithBalancesSet.has(tokenKey);
+    })
+        .sort(sortByVolume) ?? [];
+    if (isAllNetworks) {
+        return {
+            processedTokens: [...sortedTokensWithBalances, ...tokensWithoutBalances],
+            withCategories: false,
+        };
+    }
+    else {
+        return processedTypedTokens(tokensWithoutBalances, sortedTokensWithBalances, selectedChainId, configTokens);
+    }
+};
+// NB: only for non-all-networks
+export const processedTypedTokens = (tokens, tokensWithBalances, selectedChainId, configTokens) => {
+    const filteredTokensMap = new Map(tokens.map((token) => [token.address, token]));
+    const featuredTokensFromConfig = [];
+    const popularTokensFromConfig = [];
+    ['popular', 'featured'].forEach((tokenType) => {
+        const typedTokens = configTokens?.[tokenType]?.filter((token) => token.chainId === selectedChainId);
+        typedTokens?.forEach((token) => {
+            const tokenAmount = { ...token };
+            tokenAmount[tokenType] = true;
+            const match = filteredTokensMap.get(token.address);
+            if (match?.priceUSD) {
+                tokenAmount.priceUSD = match.priceUSD;
+            }
+            if (!token.logoURI && match?.logoURI) {
+                tokenAmount.logoURI = match.logoURI;
+            }
+            if (tokenType === 'popular') {
+                popularTokensFromConfig.push(tokenAmount);
+            }
+            else {
+                featuredTokensFromConfig.push(tokenAmount);
+            }
+        });
+    });
+    // Filter out config-added tokens from main list
+    const configTokenAddresses = new Set([...popularTokensFromConfig, ...featuredTokensFromConfig].map((t) => t.address));
+    const remainingTokens = tokens.filter((token) => !configTokenAddresses.has(token.address));
+    const otherTokens = [];
+    for (const token of remainingTokens) {
+        if (token.featured) {
+            featuredTokensFromConfig.push(token);
+        }
+        else if (token.popular) {
+            popularTokensFromConfig.push(token);
+        }
+        else {
+            otherTokens.push(token);
+        }
+    }
+    const sortedFeaturedTokens = [...featuredTokensFromConfig].sort(sortByVolume);
+    const sortedPopularTokens = [...popularTokensFromConfig].sort(sortByVolume);
+    const sortedOtherTokens = [...otherTokens].sort(sortByVolume);
+    return {
+        processedTokens: [
+            ...sortedFeaturedTokens,
+            ...tokensWithBalances,
+            ...sortedPopularTokens,
+            ...sortedOtherTokens,
+        ],
+        withCategories: Boolean(featuredTokensFromConfig?.length || popularTokensFromConfig?.length),
+    };
+};
+export const isSearchMatch = (token, search) => {
+    if (!search) {
+        return true;
+    }
+    const searchLowerCase = search.toLowerCase();
+    return (token.name?.toLowerCase().includes(searchLowerCase) ||
+        token.symbol
+            ?.replaceAll('₮', 'T')
+            .toLowerCase()
+            .includes(searchLowerCase) ||
+        token.address?.toLowerCase().includes(searchLowerCase));
+};
+export const isSupportedToken = (token) => {
+    return token.name && token.symbol && token.priceUSD && token.chainId;
+};
+//# sourceMappingURL=tokenList.js.map

package/dist/esm/utils/tokenList.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokenList.js","sourceRoot":"","sources":["../../../src/utils/tokenList.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.29.0",
+  "version": "3.30.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./dist/esm/index.js",
@@ -34,10 +34,10 @@
     "@bigmi/core": "^0.5.2",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@lifi/sdk": "^3.11.3",
-    "@mui/icons-material": "^7.3.1",
-    "@mui/material": "^7.3.1",
-    "@mui/system": "^7.3.1",
+    "@lifi/sdk": "^3.12.0",
+    "@mui/icons-material": "^7.3.2",
+    "@mui/material": "^7.3.2",
+    "@mui/system": "^7.3.2",
     "@mysten/sui": "^1.37.4",
     "@solana/wallet-adapter-base": "^0.9.27",
     "@solana/wallet-adapter-coinbase": "^0.1.23",
@@ -46,13 +46,13 @@
     "i18next": "^25.4.2",
     "microdiff": "^1.5.0",
     "mitt": "^3.0.1",
-    "react-i18next": "^15.7.2",
+    "react-i18next": "^15.7.3",
     "react-intersection-observer": "^9.16.0",
     "react-router-dom": "^6.30.0",
     "react-transition-group": "^4.4.5",
-    "viem": "^2.36.0",
+    "viem": "^2.37.1",
     "zustand": "^5.0.8",
-    "@lifi/wallet-management": "^3.15.0"
+    "@lifi/wallet-management": "^3.16.0"
   },
   "peerDependencies": {
     "@bigmi/react": ">=0.5.0",

package/package.json.tmp

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.29.0",
+  "version": "3.30.0",
   "description": "LI.FI Widget for cross-chain bridging and swapping. It will drive your multi-chain strategy and attract new users from everywhere.",
   "type": "module",
   "main": "./src/index.ts",
@@ -53,11 +53,11 @@
     "@bigmi/core": "^0.5.2",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@lifi/sdk": "^3.11.3",
+    "@lifi/sdk": "^3.12.0",
     "@lifi/wallet-management": "workspace:^",
-    "@mui/icons-material": "^7.3.1",
-    "@mui/material": "^7.3.1",
-    "@mui/system": "^7.3.1",
+    "@mui/icons-material": "^7.3.2",
+    "@mui/material": "^7.3.2",
+    "@mui/system": "^7.3.2",
     "@mysten/sui": "^1.37.4",
     "@solana/wallet-adapter-base": "^0.9.27",
     "@solana/wallet-adapter-coinbase": "^0.1.23",
@@ -66,11 +66,11 @@
     "i18next": "^25.4.2",
     "microdiff": "^1.5.0",
     "mitt": "^3.0.1",
-    "react-i18next": "^15.7.2",
+    "react-i18next": "^15.7.3",
     "react-intersection-observer": "^9.16.0",
     "react-router-dom": "^6.30.0",
     "react-transition-group": "^4.4.5",
-    "viem": "^2.36.0",
+    "viem": "^2.37.1",
     "zustand": "^5.0.8"
   },
   "devDependencies": {

package/src/components/AmountInput/AmountInputEndAdornment.tsx

@@ -1,4 +1,5 @@
 import { InputAdornment } from '@mui/material'
+import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { formatUnits } from 'viem'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
@@ -10,7 +11,7 @@ import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
 import { ButtonContainer, MaxButton } from './AmountInputAdornment.style.js'
 
-export const AmountInputEndAdornment = ({ formType }: FormTypeProps) => {
+export const AmountInputEndAdornment = memo(({ formType }: FormTypeProps) => {
   const { t } = useTranslation()
   const { getChainById } = useAvailableChains()
   const { setFieldValue } = useFieldActions()
@@ -88,4 +89,4 @@ export const AmountInputEndAdornment = ({ formType }: FormTypeProps) => {
       ) : null}
     </InputAdornment>
   )
-}
+})

package/src/components/AmountInput/PriceFormHelperText.tsx

@@ -1,6 +1,7 @@
 import type { TokenAmount } from '@lifi/sdk'
 import SwapVertIcon from '@mui/icons-material/SwapVert'
 import { FormHelperText, Skeleton, Typography } from '@mui/material'
+import { memo } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useTokenAddressBalance } from '../../hooks/useTokenAddressBalance.js'
 import type { FormTypeProps } from '../../stores/form/types.js'
@@ -10,7 +11,7 @@ import { useInputModeStore } from '../../stores/inputMode/useInputModeStore.js'
 import { formatTokenAmount, formatTokenPrice } from '../../utils/format.js'
 import { InputPriceButton } from './PriceFormHelperText.style.js'
 
-export const PriceFormHelperText: React.FC<FormTypeProps> = ({ formType }) => {
+export const PriceFormHelperText = memo<FormTypeProps>(({ formType }) => {
   const [chainId, tokenAddress] = useFieldValues(
     FormKeyHelper.getChainKey(formType),
     FormKeyHelper.getTokenKey(formType)
@@ -25,7 +26,7 @@ export const PriceFormHelperText: React.FC<FormTypeProps> = ({ formType }) => {
       token={token}
     />
   )
-}
+})
 
 export const PriceFormHelperTextBase: React.FC<
   FormTypeProps & {

package/src/components/BottomSheet/BottomSheet.tsx

@@ -12,7 +12,7 @@ import { modalProps, slotProps } from '../Dialog.js'
 import type { BottomSheetBase, BottomSheetProps } from './types.js'
 
 export const BottomSheet = forwardRef<BottomSheetBase, BottomSheetProps>(
-  ({ elementRef, children, open, onClose }, ref) => {
+  ({ elementRef, children, open, onClose, keepMounted = false }, ref) => {
     const getContainer = useGetScrollableContainer()
     const openRef = useRef(open)
     const [drawerOpen, setDrawerOpen] = useState(open)
@@ -54,7 +54,7 @@ export const BottomSheet = forwardRef<BottomSheetBase, BottomSheetProps>(
         ModalProps={modalProps}
         slotProps={slotProps}
         disableAutoFocus
-        keepMounted={true}
+        keepMounted={keepMounted}
         inert={isInert}
       >
         {children}

package/src/components/BottomSheet/types.ts

@@ -4,6 +4,7 @@ import type { RefObject } from 'react'
 export type BottomSheetProps = Omit<DrawerProps, 'onClose'> & {
   elementRef?: RefObject<HTMLDivElement>
   onClose?(): void
+  keepMounted?: boolean
 }
 
 export interface BottomSheetBase {

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>