@lifi/widget 3.37.0 → 3.38.0

package/package.json.tmp

@@ -1,6 +1,6 @@
 {
   "name": "@lifi/widget",
-  "version": "3.37.0",
+  "version": "3.38.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,7 +53,7 @@
     "@bigmi/core": "^0.6.3",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@lifi/sdk": "^3.13.7",
+    "@lifi/sdk": "^3.14.1",
     "@lifi/wallet-management": "workspace:^",
     "@mui/icons-material": "^7.3.6",
     "@mui/material": "^7.3.6",
@@ -62,25 +62,25 @@
     "@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.7.1",
+    "@tanstack/react-virtual": "^3.13.13",
+    "i18next": "^25.7.3",
     "microdiff": "^1.5.0",
     "mitt": "^3.0.1",
-    "react-i18next": "^16.3.5",
+    "react-i18next": "^16.5.0",
     "react-intersection-observer": "^9.16.0",
     "react-router-dom": "^6.30.1",
     "react-transition-group": "^4.4.5",
-    "viem": "^2.41.2",
+    "viem": "^2.42.1",
     "zustand": "^5.0.9"
   },
   "devDependencies": {
     "@types/react-transition-group": "^4.4.12",
     "cpy-cli": "^6.0.0",
     "madge": "^8.0.0",
-    "react": "^19.2.1",
-    "react-dom": "^19.2.1",
+    "react": "^19.2.3",
+    "react-dom": "^19.2.3",
     "typescript": "^5.9.3",
-    "vitest": "^4.0.15"
+    "vitest": "^4.0.16"
   },
   "peerDependencies": {
     "@bigmi/react": ">=0.6.0",

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

@@ -25,5 +25,8 @@ export const InputPriceButton = styled(Button)(({ theme, onClick }) => ({
         cursor: 'text',
         userSelect: 'text',
         pointerEvents: 'none',
+        ...theme.applyStyles('dark', {
+          backgroundColor: 'transparent',
+        }),
       }),
 }))

package/src/components/AppContainer.tsx

@@ -114,6 +114,7 @@ const CssBaselineContainer = styled(ScopedCssBaseline, {
         defaultMaxHeight,
     },
     '&:has(.long-list)': {
+      minHeight: getWidgetMaxHeight(theme),
       maxHeight: getWidgetMaxHeight(theme),
     },
   }

package/src/components/Avatar/AccountAvatar.tsx

@@ -4,12 +4,8 @@ import Wallet from '@mui/icons-material/Wallet'
 import { Badge } from '@mui/material'
 import { useChain } from '../../hooks/useChain.js'
 import type { ToAddress } from '../../types/widget.js'
-import {
-  AvatarDefault,
-  AvatarDefaultBadge,
-  AvatarMasked,
-} from './Avatar.style.js'
-import { SmallAvatar } from './SmallAvatar.js'
+import { AvatarDefault, AvatarMasked } from './Avatar.style.js'
+import { ChainBadgeContent } from './ChainBadgeContent.js'
 
 interface AccountAvatarProps {
   chainId?: number
@@ -45,15 +41,7 @@ export const AccountAvatar = ({
     <Badge
       overlap="circular"
       anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-      badgeContent={
-        chain ? (
-          <SmallAvatar src={chain.logoURI} alt={chain.name}>
-            {chain.name[0]}
-          </SmallAvatar>
-        ) : (
-          <AvatarDefaultBadge />
-        )
-      }
+      badgeContent={<ChainBadgeContent chain={chain} />}
     >
       {avatar}
     </Badge>

package/src/components/Avatar/Avatar.tsx

@@ -1,20 +1,19 @@
+import type { ExtendedChain } from '@lifi/sdk'
 import type { SxProps, Theme } from '@mui/material'
 import { Badge, Skeleton } from '@mui/material'
-import {
-  AvatarDefault,
-  AvatarDefaultBadge,
-  AvatarSkeletonMaskedContainer,
-} from './Avatar.style.js'
+import { AvatarDefault, AvatarSkeletonMaskedContainer } from './Avatar.style.js'
+import { ChainBadgeContent } from './ChainBadgeContent.js'
 import { SmallAvatarSkeleton } from './SmallAvatar.js'
 
 export const AvatarBadgedDefault: React.FC<{
   sx?: SxProps<Theme>
-}> = ({ sx }) => {
+  chain?: ExtendedChain
+}> = ({ sx, chain }) => {
   return (
     <Badge
       overlap="circular"
       anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-      badgeContent={<AvatarDefaultBadge />}
+      badgeContent={<ChainBadgeContent chain={chain} />}
       sx={sx}
     >
       <AvatarDefault />

package/src/components/Avatar/ChainBadgeContent.tsx

@@ -0,0 +1,22 @@
+import type { Chain, ExtendedChain } from '@lifi/sdk'
+import { AvatarDefaultBadge } from './Avatar.style.js'
+import { SmallAvatar } from './SmallAvatar.js'
+
+interface ChainBadgeContentProps {
+  chain?: Chain | ExtendedChain
+  size?: number
+}
+
+export const ChainBadgeContent: React.FC<ChainBadgeContentProps> = ({
+  chain,
+  size = 16,
+}) => {
+  if (chain?.logoURI) {
+    return (
+      <SmallAvatar src={chain.logoURI} alt={chain.name} size={size}>
+        {chain.name?.[0]}
+      </SmallAvatar>
+    )
+  }
+  return <AvatarDefaultBadge size={size} />
+}

package/src/components/Avatar/TokenAvatar.tsx

@@ -4,8 +4,8 @@ import { Badge } from '@mui/material'
 import { useChain } from '../../hooks/useChain.js'
 import { useToken } from '../../hooks/useToken.js'
 import { AvatarBadgedSkeleton } from './Avatar.js'
-import { AvatarDefaultBadge, AvatarMasked } from './Avatar.style.js'
-import { SmallAvatar } from './SmallAvatar.js'
+import { AvatarMasked } from './Avatar.style.js'
+import { ChainBadgeContent } from './ChainBadgeContent.js'
 
 export const TokenAvatar: React.FC<{
   token?: StaticToken
@@ -83,15 +83,7 @@ const TokenAvatarBase: React.FC<{
     <Badge
       overlap="circular"
       anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
-      badgeContent={
-        chain ? (
-          <SmallAvatar src={chain.logoURI} alt={chain.name} size={badgeSize}>
-            {chain.name[0]}
-          </SmallAvatar>
-        ) : (
-          <AvatarDefaultBadge size={badgeSize} />
-        )
-      }
+      badgeContent={<ChainBadgeContent chain={chain} size={badgeSize} />}
       sx={sx}
     >
       <AvatarMasked

package/src/components/Chains/AllChainsAvatar.tsx

@@ -1,4 +1,9 @@
-import { ChainType, type EVMChain, type ExtendedChain } from '@lifi/sdk'
+import {
+  ChainId,
+  ChainType,
+  type EVMChain,
+  type ExtendedChain,
+} from '@lifi/sdk'
 import { Avatar, Box } from '@mui/material'
 import { memo, useMemo } from 'react'
 
@@ -12,21 +17,25 @@ const chainTypeIcons = [
     name: 'Ethereum',
     chainType: ChainType.EVM,
     icon: 'https://lifinance.github.io/types/src/assets/icons/chains/ethereum.svg',
+    defaultChainId: ChainId.ETH,
   },
   {
     name: 'Solana',
     chainType: ChainType.SVM,
     icon: 'https://lifinance.github.io/types/src/assets/icons/chains/solana.svg',
+    defaultChainId: ChainId.SOL,
   },
   {
     name: 'Bitcoin',
     chainType: ChainType.UTXO,
     icon: 'https://lifinance.github.io/types/src/assets/icons/chains/bitcoin.svg',
+    defaultChainId: ChainId.BTC,
   },
   {
     name: 'Sui',
     chainType: ChainType.MVM,
     icon: 'https://lifinance.github.io/types/src/assets/icons/chains/sui.svg',
+    defaultChainId: ChainId.SUI,
   },
 ]
 
@@ -35,10 +44,48 @@ const maxChainAvatarsCount = chainTypeIcons.length
 export const AllChainsAvatar = memo(
   ({ chains, size }: AllChainsAvatarProps) => {
     const icons = useMemo(() => {
+      // Create maps for efficient lookups
+      const chainsPerChainType = new Map<ChainType, number>()
+      const chainsByChainType = new Map<
+        ChainType,
+        (ExtendedChain | EVMChain)[]
+      >()
+
+      chains.forEach((chain) => {
+        chainsPerChainType.set(
+          chain.chainType,
+          (chainsPerChainType.get(chain.chainType) || 0) + 1
+        )
+        const chainsOfType = chainsByChainType.get(chain.chainType) || []
+        chainsOfType.push(chain)
+        chainsByChainType.set(chain.chainType, chainsOfType)
+      })
+
       // Get existing ecosystem icons
-      const existingChainTypeIcons = chainTypeIcons.filter((predefinedChain) =>
-        chains.some((chain) => chain.chainType === predefinedChain.chainType)
+      const existingChainTypeIcons = chainTypeIcons.filter(
+        (predefinedChain) => {
+          const numberOfChains =
+            chainsPerChainType.get(predefinedChain.chainType) ?? 0
+
+          // If there's only one chain of this type, check if it's not the default
+          if (numberOfChains === 1) {
+            const chainsOfType = chainsByChainType.get(
+              predefinedChain.chainType
+            )
+            const singleChain = chainsOfType?.[0]
+            // Exclude the predefined icon if the single chain is not the default
+            if (
+              singleChain &&
+              singleChain.id !== predefinedChain.defaultChainId
+            ) {
+              return false
+            }
+          }
+
+          return numberOfChains > 0
+        }
       )
+
       if (existingChainTypeIcons.length === maxChainAvatarsCount) {
         return existingChainTypeIcons
       }
@@ -46,13 +93,14 @@ export const AllChainsAvatar = memo(
       const remainingSlots =
         maxChainAvatarsCount - existingChainTypeIcons.length
 
+      // Create a Set for O(1) lookup of predefined icon names
+      const predefinedIconNames = new Set(
+        existingChainTypeIcons.map((icon) => icon.name)
+      )
+
       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
+        return !predefinedIconNames.has(chain.name) && Boolean(chain.logoURI)
       })
 
       const additionalIcons = chainsWithLogos

package/src/components/Chains/ChainSearchInput.tsx

@@ -29,7 +29,15 @@ export const ChainSearchInput = ({
 
   if (inExpansion) {
     return (
-      <Box sx={{ pt: 3, pb: 2, px: 2.5, height: searchHeaderHeight }}>
+      <Box
+        sx={{
+          pt: 3,
+          pb: 2,
+          px: 2.5,
+          height: searchHeaderHeight,
+          boxSizing: 'border-box',
+        }}
+      >
         <SearchInput
           inputRef={inputRef}
           onChange={onChange}

package/src/components/Header/NavigationHeader.tsx

@@ -34,8 +34,12 @@ export const NavigationHeader: React.FC = () => {
   const path = cleanedPathname.substring(cleanedPathname.lastIndexOf('/') + 1)
   const hasPath = navigationRoutesValues.includes(path)
 
+  // Show tabs when split is undefined (default tabs) or an object with defaultTab
+  // Hide tabs when split is a string ('bridge' or 'swap' - single mode)
   const showSplitOptions =
-    subvariant === 'split' && !hasPath && !subvariantOptions?.split
+    subvariant === 'split' &&
+    !hasPath &&
+    typeof subvariantOptions?.split !== 'string'
 
   return (
     <HeaderAppBar elevation={0} sx={{ paddingTop: 1, paddingBottom: 0.5 }}>

package/src/components/SelectTokenButton/SelectTokenButton.tsx

@@ -5,6 +5,8 @@ import { useChain } from '../../hooks/useChain.js'
 import { useSwapOnly } from '../../hooks/useSwapOnly.js'
 import { useToken } from '../../hooks/useToken.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'
+import type { ChainOrderState } from '../../stores/chains/types.js'
 import type { FormTypeProps } from '../../stores/form/types.js'
 import { FormKeyHelper } from '../../stores/form/types.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
@@ -37,6 +39,10 @@ export const SelectTokenButton: React.FC<
   const { chain, isLoading: isChainLoading } = useChain(chainId)
   const { token, isLoading: isTokenLoading } = useToken(chainId, tokenAddress)
 
+  const isAllNetworks = useChainOrderStore(
+    (state: ChainOrderState) => state[`${formType}IsAllNetworks`]
+  )
+
   const handleClick = () => {
     navigate(
       formType === 'from'
@@ -77,7 +83,9 @@ export const SelectTokenButton: React.FC<
               isSelected ? (
                 <TokenAvatar token={token} chain={chain} />
               ) : (
-                <AvatarBadgedDefault />
+                <AvatarBadgedDefault
+                  chain={isAllNetworks ? undefined : chain}
+                />
               )
             }
             title={isSelected ? token.symbol : defaultPlaceholder}

package/src/components/TokenList/TokenListItem.tsx

@@ -1,6 +1,7 @@
 import type { StaticToken } from '@lifi/sdk'
 import { ChainType } from '@lifi/sdk'
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
+import WarningRounded from '@mui/icons-material/WarningRounded'
 import {
   Avatar,
   Box,
@@ -9,6 +10,7 @@ import {
   listItemSecondaryActionClasses,
   Skeleton,
   Slide,
+  Tooltip,
   Typography,
 } from '@mui/material'
 import type { MouseEventHandler } from 'react'
@@ -189,7 +191,27 @@ const TokenListItemButton: React.FC<TokenListItemButtonProps> = memo(
           )}
         </ListItemAvatar>
         <ListItemText
-          primary={token.symbol}
+          primary={
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+              {token.symbol}
+              {!token.verified && (
+                <Tooltip
+                  title={t('warning.message.unverifiedToken')}
+                  placement="top"
+                  arrow
+                >
+                  <WarningRounded
+                    sx={{
+                      display: 'flex',
+                      fontSize: 16,
+                      color: 'warning.main',
+                      cursor: 'help',
+                    }}
+                  />
+                </Tooltip>
+              )}
+            </Box>
+          }
           slotProps={{
             secondary: {
               component: 'div',

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.37.0'
+export const version = '3.38.0'

package/src/hooks/useFilteredByTokenBalances.ts

@@ -96,8 +96,8 @@ export const useFilteredTokensByBalance = (
           formType
         )
 
-        const additionalTokens = balances.filter(
-          (balance: WalletTokenExtended) => {
+        const additionalTokens = balances
+          .filter((balance: WalletTokenExtended) => {
             const balanceKey = balance.address.toLowerCase()
             return (
               !chainTokenSet.has(balanceKey) &&
@@ -109,8 +109,12 @@ export const useFilteredTokensByBalance = (
                 (t) => t.address.toLowerCase()
               )
             )
-          }
-        ) as TokenExtended[]
+          })
+          // Mark tokens from wallet balances as unverified
+          .map((token: WalletTokenExtended) => ({
+            ...token,
+            verified: false,
+          })) as TokenExtended[]
 
         // Combine both sets of tokens - convert WalletTokenExtended to TokenAmount
         const allTokens = [

package/src/hooks/useRoutes.ts

@@ -1,4 +1,4 @@
-import type { Route, Token, TokensResponse } from '@lifi/sdk'
+import type { Route, Token } from '@lifi/sdk'
 import {
   ChainType,
   convertQuoteToRoute,
@@ -6,7 +6,6 @@ import {
   getRelayerQuote,
   getRoutes,
   isGaslessStep,
-  isTokenMessageSigningAllowed,
   LiFiErrorCode,
 } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
@@ -20,8 +19,10 @@ import { useSetExecutableRoute } from '../stores/routes/useSetExecutableRoute.js
 import { defaultSlippage } from '../stores/settings/createSettingsStore.js'
 import { useSettings } from '../stores/settings/useSettings.js'
 import { WidgetEvent } from '../types/events.js'
+import type { TokensByChain } from '../types/token.js'
 import { getChainTypeFromAddress } from '../utils/chainType.js'
 import { getQueryKey } from '../utils/queries.js'
+import { updateTokenInCache } from '../utils/token.js'
 import { useChain } from './useChain.js'
 import { useDebouncedWatch } from './useDebouncedWatch.js'
 import { useGasRefuel } from './useGasRefuel.js'
@@ -352,8 +353,7 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
           fromChain.nativeToken.address !== fromTokenAddress &&
           useRelayerRoutes &&
           !isBatchingSupported &&
-          (!observableRoute || isObservableRelayerRoute) &&
-          isTokenMessageSigningAllowed(fromToken!)
+          (!observableRoute || isObservableRelayerRoute)
 
         const mainRoutesPromise = shouldUseMainRoutes
           ? getRoutes(
@@ -447,27 +447,21 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
           // Update local tokens cache to keep priceUSD in sync
           const { fromToken, toToken } = routesResult.routes[0]
           ;[fromToken, toToken].forEach((token) => {
-            queryClient.setQueriesData<TokensResponse>(
+            // Update main tokens cache (verified)
+            queryClient.setQueriesData<TokensByChain>(
               { queryKey: [getQueryKey('tokens', keyPrefix)] },
-              (data) => {
-                if (data) {
-                  const clonedData = { ...data, tokens: { ...data.tokens } }
-                  const index = clonedData.tokens?.[token.chainId]?.findIndex(
-                    (dataToken) => dataToken.address === token.address
-                  )
-                  if (index >= 0) {
-                    clonedData.tokens[token.chainId] = [
-                      ...clonedData.tokens[token.chainId],
-                    ]
-                    clonedData.tokens[token.chainId][index] = {
-                      ...clonedData.tokens[token.chainId][index],
-                      ...token,
-                    }
-                  }
-                  return clonedData
-                }
-              }
+              (data) => updateTokenInCache(data, token)
+            )
+
+            // Update search tokens cache (unverified) - matches any search query
+            queryClient.setQueriesData<TokensByChain>(
+              {
+                queryKey: [getQueryKey('tokens-search', keyPrefix)],
+                exact: false,
+              },
+              (data) => updateTokenInCache(data, token)
             )
+
             queryClient.setQueriesData<Token[]>(
               {
                 queryKey: [

package/src/hooks/useTokenSearch.ts

@@ -3,11 +3,11 @@ import {
   type ChainId,
   getToken,
   type TokenExtended,
-  type TokensResponse,
 } from '@lifi/sdk'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import type { FormType } from '../stores/form/types.js'
+import type { TokensByChain } from '../types/token.js'
 import { getConfigItemSets, isFormItemAllowed } from '../utils/item.js'
 import { getQueryKey } from '../utils/queries.js'
 
@@ -49,21 +49,28 @@ export const useTokenSearch = (
           return null
         }
 
-        queryClient.setQueriesData<TokensResponse>(
+        // Add token to main tokens cache
+        queryClient.setQueriesData<TokensByChain>(
           { queryKey: [getQueryKey('tokens', keyPrefix)] },
           (data) => {
+            if (!data) {
+              return data
+            }
+            const chainTokens = data[chainId as number]
             if (
-              data &&
-              !data.tokens[chainId as number]?.some(
+              chainTokens?.some(
                 (t) => t.address.toLowerCase() === token.address.toLowerCase()
               )
             ) {
-              const clonedData = { ...data, tokens: { ...data.tokens } }
-              clonedData.tokens[chainId as number] = [
-                ...(clonedData.tokens[chainId as number] ?? []),
-                token,
-              ]
-              return clonedData
+              return data
+            }
+            // Mark token from search as unverified
+            return {
+              ...data,
+              [chainId as number]: [
+                ...(chainTokens ?? []),
+                { ...token, verified: false },
+              ],
             }
           }
         )