@lifi/widget 3.29.1 → 3.30.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.29.1",
+  "version": "3.30.1",
   "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,31 +34,31 @@
     "@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",
-    "@mysten/sui": "^1.37.4",
+    "@lifi/sdk": "^3.12.2",
+    "@mui/icons-material": "^7.3.2",
+    "@mui/material": "^7.3.2",
+    "@mui/system": "^7.3.2",
+    "@mysten/sui": "^1.37.6",
     "@solana/wallet-adapter-base": "^0.9.27",
     "@solana/wallet-adapter-coinbase": "^0.1.23",
     "@solana/web3.js": "^1.98.4",
     "@tanstack/react-virtual": "^3.13.12",
-    "i18next": "^25.4.2",
+    "i18next": "^25.5.2",
     "microdiff": "^1.5.0",
     "mitt": "^3.0.1",
     "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.4",
     "zustand": "^5.0.8",
-    "@lifi/wallet-management": "^3.15.1"
+    "@lifi/wallet-management": "^3.16.1"
   },
   "peerDependencies": {
     "@bigmi/react": ">=0.5.0",
     "@mysten/dapp-kit": ">=0.17.0",
     "@solana/wallet-adapter-react": ">=0.15.35",
-    "@tanstack/react-query": ">=5.68.0",
+    "@tanstack/react-query": ">=5.87.0",
     "react": ">=18",
     "react-dom": ">=18",
     "wagmi": ">=2.14.0"

package/package.json.tmp

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.29.1",
+  "version": "3.30.1",
   "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,24 +53,24 @@
     "@bigmi/core": "^0.5.2",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@lifi/sdk": "^3.11.3",
+    "@lifi/sdk": "^3.12.2",
     "@lifi/wallet-management": "workspace:^",
-    "@mui/icons-material": "^7.3.1",
-    "@mui/material": "^7.3.1",
-    "@mui/system": "^7.3.1",
-    "@mysten/sui": "^1.37.4",
+    "@mui/icons-material": "^7.3.2",
+    "@mui/material": "^7.3.2",
+    "@mui/system": "^7.3.2",
+    "@mysten/sui": "^1.37.6",
     "@solana/wallet-adapter-base": "^0.9.27",
     "@solana/wallet-adapter-coinbase": "^0.1.23",
     "@solana/web3.js": "^1.98.4",
     "@tanstack/react-virtual": "^3.13.12",
-    "i18next": "^25.4.2",
+    "i18next": "^25.5.2",
     "microdiff": "^1.5.0",
     "mitt": "^3.0.1",
     "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.4",
     "zustand": "^5.0.8"
   },
   "devDependencies": {
@@ -86,7 +86,7 @@
     "@bigmi/react": ">=0.5.0",
     "@mysten/dapp-kit": ">=0.17.0",
     "@solana/wallet-adapter-react": ">=0.15.35",
-    "@tanstack/react-query": ">=5.68.0",
+    "@tanstack/react-query": ">=5.87.0",
     "react": ">=18",
     "react-dom": ">=18",
     "wagmi": ">=2.14.0"

package/src/AppProvider.tsx

@@ -47,7 +47,7 @@ const memoryRouterProps: MemoryRouterProps = {
   },
 }
 
-export const AppRouter: React.FC<PropsWithChildren> = ({ children }) => {
+const AppRouter: React.FC<PropsWithChildren> = ({ children }) => {
   const { buildUrl } = useWidgetConfig()
   const inRouterContext = useInRouterContext()
   const Router = inRouterContext ? Fragment : MemoryRouter

package/src/components/AmountInput/AmountInput.tsx

@@ -60,7 +60,7 @@ export const AmountInput: React.FC<FormTypeProps & CardProps> = ({
   )
 }
 
-export const AmountInputBase: React.FC<
+const AmountInputBase: React.FC<
   FormTypeProps &
     CardProps & {
       token?: Token

package/src/components/AmountInput/AmountInputAdornment.style.tsx

@@ -1,4 +1,4 @@
-import { Box, Skeleton, styled } from '@mui/material'
+import { Box, styled } from '@mui/material'
 import { cardClasses } from '@mui/material/Card'
 import { ButtonTertiary } from '../ButtonTertiary.js'
 
@@ -67,9 +67,3 @@ export const MaxButton = styled(ButtonTertiary)(({ theme }) => ({
     },
   },
 }))
-
-export const MaxButtonSkeleton = styled(Skeleton)(({ theme }) => ({
-  width: 46,
-  height: 24,
-  borderRadius: theme.vars.shape.borderRadiusSecondary,
-}))

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,9 +26,9 @@ export const PriceFormHelperText: React.FC<FormTypeProps> = ({ formType }) => {
       token={token}
     />
   )
-}
+})
 
-export const PriceFormHelperTextBase: React.FC<
+const PriceFormHelperTextBase: React.FC<
   FormTypeProps & {
     isLoading?: boolean
     tokenAddress?: string

package/src/components/Avatar/Avatar.tsx

@@ -39,7 +39,7 @@ export const AvatarBadgedSkeleton: React.FC<{
   )
 }
 
-export const AvatarSkeleton: React.FC<{
+const AvatarSkeleton: React.FC<{
   avatarSize: number
   badgeSize: number
 }> = ({ avatarSize, badgeSize }) => {

package/src/components/Avatar/TokenAvatar.tsx

@@ -45,7 +45,7 @@ export const TokenAvatar: React.FC<{
   )
 }
 
-export const TokenAvatarFallback: React.FC<{
+const TokenAvatarFallback: React.FC<{
   token?: StaticToken
   isLoading?: boolean
   sx?: SxProps<Theme>
@@ -69,7 +69,7 @@ export const TokenAvatarFallback: React.FC<{
   )
 }
 
-export const TokenAvatarBase: React.FC<{
+const TokenAvatarBase: React.FC<{
   token?: StaticToken
   chain?: Chain
   isLoading?: boolean

package/src/components/Card/CardButton.style.tsx

@@ -15,14 +15,6 @@ export const CardRowButton = styled(ButtonBase)(({ theme }) => ({
   borderRadius: theme.vars.shape.borderRadius,
 }))
 
-export const CardRowContainer = styled(Box)(({ theme }) => ({
-  display: 'flex',
-  width: '100%',
-  justifyContent: 'space-between',
-  alignItems: 'center',
-  padding: theme.spacing(2),
-}))
-
 export const CardValue = styled(Typography)({
   lineHeight: '1.25',
   fontWeight: 500,

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>