@lifi/widget 3.37.0 → 3.38.1

package/src/hooks/useTokens.ts

@@ -4,17 +4,23 @@ import {
   getTokens,
   type TokensExtendedResponse,
 } from '@lifi/sdk'
-import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { useQuery } from '@tanstack/react-query'
 import { useMemo } from 'react'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import type { FormType } from '../stores/form/types.js'
+import type { TokensByChain } from '../types/token.js'
 import {
   defaultChainIdsByType,
   getChainTypeFromAddress,
 } from '../utils/chainType.js'
 import { isItemAllowed } from '../utils/item.js'
 import { getQueryKey } from '../utils/queries.js'
-import { filterAllowedTokens } from '../utils/token.js'
+import {
+  filterAllowedTokens,
+  mergeVerifiedWithSearchTokens,
+} from '../utils/token.js'
+
+const refetchInterval = 300_000
 
 export const useTokens = (
   formType?: FormType,
@@ -27,12 +33,8 @@ export const useTokens = (
     keyPrefix,
   } = useWidgetConfig()
 
-  const { isLoading: isSearchLoading } = useBackgroundTokenSearch(
-    search,
-    chainId
-  )
-
-  const { data, isLoading } = useQuery({
+  // Main tokens cache - verified tokens from API
+  const { data: verifiedTokens, isLoading } = useQuery({
     queryKey: [getQueryKey('tokens', keyPrefix)],
     queryFn: async ({ signal }) => {
       const chainTypes = [
@@ -41,6 +43,7 @@ export const useTokens = (
         ChainType.UTXO,
         ChainType.MVM,
       ].filter((chainType) => isItemAllowed(chainType, chainsConfig?.types))
+
       const tokensResponse: TokensExtendedResponse = await getTokens(
         {
           chainTypes,
@@ -50,45 +53,37 @@ export const useTokens = (
         },
         { signal }
       )
-      return tokensResponse
-    },
-    refetchInterval: 300_000,
-    staleTime: 300_000,
-  })
-
-  const allTokens = useMemo(() => {
-    return filterAllowedTokens(
-      data?.tokens,
-      configTokens,
-      chainsConfig,
-      formType
-    )
-  }, [data?.tokens, configTokens, chainsConfig, formType])
 
-  return {
-    allTokens,
-    isLoading,
-    isSearchLoading,
-  }
-}
+      // Mark all tokens as verified
+      const tokens: TokensByChain = Object.fromEntries(
+        Object.entries(tokensResponse.tokens).map(([chainId, tokens]) => [
+          chainId,
+          tokens.map((token) => ({ ...token, verified: true })),
+        ])
+      )
 
-/** This hook is used to search for tokens in the background.
- * It updates the main tokens cache with the search results,
- * if any of the tokens are not already in the cache. */
-const useBackgroundTokenSearch = (search?: string, chainId?: number) => {
-  const { chains: chainsConfig, keyPrefix } = useWidgetConfig()
-  const queryClient = useQueryClient()
+      return tokens
+    },
+    refetchInterval,
+    staleTime: refetchInterval,
+  })
 
-  const { isLoading: isSearchLoading } = useQuery({
+  // Search tokens cache - unverified tokens from search
+  const { data: searchTokens, isLoading: isSearchLoading } = useQuery({
     queryKey: [getQueryKey('tokens-search', keyPrefix), search, chainId],
     queryFn: async ({ queryKey, signal }) => {
-      const [, searchQuery, chainId] = queryKey as [string, string, number]
+      const [, searchQuery, searchChainId] = queryKey as [
+        string,
+        string,
+        number,
+      ]
       const chainTypes = [
         ChainType.EVM,
         ChainType.SVM,
         ChainType.UTXO,
         ChainType.MVM,
       ].filter((chainType) => isItemAllowed(chainType, chainsConfig?.types))
+
       const tokensResponse: TokensExtendedResponse = await getTokens(
         {
           chainTypes,
@@ -101,7 +96,7 @@ const useBackgroundTokenSearch = (search?: string, chainId?: number) => {
       )
 
       // If the chainId is not provided, try to get it from the search query
-      let _chainId = chainId
+      let _chainId = searchChainId
       if (!_chainId) {
         const chainType = getChainTypeFromAddress(searchQuery)
         if (chainType) {
@@ -121,57 +116,30 @@ const useBackgroundTokenSearch = (search?: string, chainId?: number) => {
         }
       }
 
-      // Merge search results into main tokens cache
-      if (searchQuery) {
-        queryClient.setQueriesData<TokensExtendedResponse>(
-          { queryKey: [getQueryKey('tokens', keyPrefix)] },
-          (data) => {
-            if (!data) {
-              return data
-            }
-
-            const clonedData = { ...data, tokens: { ...data.tokens } }
-
-            Object.entries(tokensResponse.tokens).forEach(
-              ([chainId, searchTokens]) => {
-                const chainIdNum = Number(chainId)
-                const existingTokens = clonedData.tokens[chainIdNum] || []
-
-                const existingTokenAddresses = new Set(
-                  existingTokens.map((token) => token.address.toLowerCase())
-                )
-
-                // Find tokens in search results that don't exist in the main list
-                const newTokens = searchTokens.filter(
-                  (searchToken) =>
-                    !existingTokenAddresses.has(
-                      searchToken.address.toLowerCase()
-                    )
-                )
-
-                // Add new tokens to the main list
-                if (newTokens.length > 0) {
-                  clonedData.tokens[chainIdNum] = [
-                    ...existingTokens,
-                    ...newTokens,
-                  ]
-                }
-              }
-            )
-
-            return clonedData
-          }
-        )
-      }
+      // Mark all search tokens as unverified
+      const tokens: TokensByChain = Object.fromEntries(
+        Object.entries(tokensResponse.tokens).map(([chainId, tokens]) => [
+          chainId,
+          tokens.map((token) => ({ ...token, verified: false })),
+        ])
+      )
 
-      return tokensResponse
+      return tokens
     },
     enabled: !!search,
-    refetchInterval: 300_000,
-    staleTime: 300_000,
+    refetchInterval,
+    staleTime: refetchInterval,
   })
 
+  // Merge tokens at read time - single place where caches are combined
+  const allTokens = useMemo(() => {
+    const merged = mergeVerifiedWithSearchTokens(verifiedTokens, searchTokens)
+    return filterAllowedTokens(merged, configTokens, chainsConfig, formType)
+  }, [verifiedTokens, searchTokens, configTokens, chainsConfig, formType])
+
   return {
-    isLoading: isSearchLoading,
+    allTokens,
+    isLoading,
+    isSearchLoading,
   }
 }

package/src/i18n/en.json

@@ -127,6 +127,7 @@
       "deleteTransactionHistory": "Transaction history is only stored locally and can't be recovered if you delete it.",
       "fundsLossPrevention": "Always ensure smart contract accounts are properly set up on the destination chain and avoid direct transfers to exchanges to prevent fund loss.",
       "highValueLoss": "The value of the received tokens is significantly lower than the exchanged tokens and transaction cost.",
+      "unverifiedToken": "Unverified token. Always do your own research before proceeding.",
       "insufficientFunds": "You don't have enough funds to complete the transaction.",
       "insufficientGas": "You don't have enough gas to complete the transaction. You need to add at least:",
       "minFromAmountUSD": "Minimum amount is {{amount, currencyExt(currency: USD)}}. Please enter a higher amount.",

package/src/pages/LanguagesPage.tsx

@@ -1,4 +1,3 @@
-import Check from '@mui/icons-material/Check'
 import { List } from '@mui/material'
 import { useTranslation } from 'react-i18next'
 import { ListItemText } from '../components/ListItemText.js'
@@ -33,6 +32,7 @@ export const LanguagesPage: React.FC = () => {
           <SettingsListItemButton
             key={language}
             onClick={() => setLanguageWithCode(language)}
+            selected={selectedLanguageCode === language}
           >
             <ListItemText
               primary={
@@ -43,7 +43,6 @@ export const LanguagesPage: React.FC = () => {
                 language
               }
             />
-            {selectedLanguageCode === language && <Check color="primary" />}
           </SettingsListItemButton>
         ))}
       </List>

package/src/stores/StoreProvider.tsx

@@ -1,5 +1,6 @@
 import type { PropsWithChildren } from 'react'
 import type { WidgetConfigProps } from '../types/widget.js'
+import { getSplitSubvariant } from '../utils/variant.js'
 import { BookmarkStoreProvider } from './bookmarks/BookmarkStore.js'
 import { ChainOrderStoreProvider } from './chains/ChainOrderStore.js'
 import { FormStoreProvider } from './form/FormStore.js'
@@ -16,7 +17,7 @@ export const StoreProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
     <SplitSubvariantStoreProvider
       state={
         config.subvariant === 'split'
-          ? config.subvariantOptions?.split || 'swap'
+          ? getSplitSubvariant(config.subvariantOptions?.split)
           : undefined
       }
     >

package/src/stores/chains/ChainOrderStore.tsx

@@ -3,8 +3,10 @@ import type { StoreApi } from 'zustand'
 import { useShallow } from 'zustand/shallow'
 import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'
 import { useChains } from '../../hooks/useChains.js'
+import { useSwapOnly } from '../../hooks/useSwapOnly.js'
 import { useExternalWalletProvider } from '../../providers/WalletProvider/useExternalWalletProvider.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
+import { HiddenUI } from '../../types/widget.js'
 import { getConfigItemSets, isItemAllowedForSets } from '../../utils/item.js'
 import type { FormType } from '../form/types.js'
 import { useFieldActions } from '../form/useFieldActions.js'
@@ -20,10 +22,11 @@ export function ChainOrderStoreProvider({
   children,
   ...props
 }: PersistStoreProviderProps) {
-  const { chains: chainsConfig } = useWidgetConfig()
+  const { chains: chainsConfig, hiddenUI } = useWidgetConfig()
   const storeRef = useRef<ChainOrderStore>(null)
   const { chains } = useChains()
   const { setFieldValue, getFieldValues } = useFieldActions()
+  const swapOnly = useSwapOnly()
   const { variant, subvariantOptions } = useWidgetConfig()
   const { externalChainTypes, useExternalWalletProvidersOnly } =
     useExternalWalletProvider()
@@ -62,18 +65,35 @@ export function ChainOrderStoreProvider({
           key
         )
 
+        const isSwapTo = swapOnly && key === 'to'
+
         // Show "All networks" button if there are multiple networks
-        const showAllNetworks = filteredChains.length > 1
+        const showAllNetworks =
+          filteredChains.length > 1 &&
+          !hiddenUI?.includes(HiddenUI.AllNetworks) &&
+          !isSwapTo
         if (!showAllNetworks) {
           storeRef.current?.getState().setIsAllNetworks(false, key)
         }
         storeRef.current?.getState().setShowAllNetworks(showAllNetworks, key)
 
+        // If swap only, set the to chain to the from chain
+        if (isSwapTo) {
+          const [fromChainValue] = getFieldValues('fromChain')
+          setFieldValue('toChain', fromChainValue)
+        }
+
         const [chainValue] = getFieldValues(`${key}Chain`)
         if (chainValue) {
           return
         }
 
+        // If no chain is selected (e.g., removed from URL params) and
+        // showAllNetworks is enabled, reset isAllNetworks to true
+        if (showAllNetworks) {
+          storeRef.current?.getState().setIsAllNetworks(true, key)
+        }
+
         const firstAllowedPinnedChain = storeRef.current
           ?.getState()
           .pinnedChains?.find((chainId) =>
@@ -99,6 +119,8 @@ export function ChainOrderStoreProvider({
     useExternalWalletProvidersOnly,
     variant,
     subvariantOptions?.wide?.enableChainSidebar,
+    hiddenUI,
+    swapOnly,
   ])
 
   return (

package/src/types/token.ts

@@ -1,11 +1,13 @@
 import type {
   TokenAmount as SDKTokenAmount,
   TokenAmountExtended as SDKTokenAmountExtended,
+  TokenExtended,
 } from '@lifi/sdk'
 
 interface TokenFlags {
   featured?: boolean
   popular?: boolean
+  verified?: boolean
 }
 
 export interface TokenAmount extends SDKTokenAmount, TokenFlags {}
@@ -13,3 +15,6 @@ export interface TokenAmount extends SDKTokenAmount, TokenFlags {}
 export interface TokenAmountExtended
   extends SDKTokenAmountExtended,
     TokenFlags {}
+
+export type TokenWithVerified = TokenExtended & { verified?: boolean }
+export type TokensByChain = Record<number, TokenWithVerified[]>

package/src/types/widget.ts

@@ -38,12 +38,20 @@ import type { DefaultFieldValues } from '../stores/form/types.js'
 export type WidgetVariant = 'compact' | 'wide' | 'drawer'
 export type WidgetSubvariant = 'default' | 'split' | 'custom' | 'refuel'
 export type SplitSubvariant = 'bridge' | 'swap'
+export type SplitSubvariantOptions = {
+  defaultTab: SplitSubvariant
+}
 export type CustomSubvariant = 'checkout' | 'deposit'
 export type WideSubvariant = {
   enableChainSidebar?: boolean
 }
 export interface SubvariantOptions {
-  split?: SplitSubvariant
+  /**
+   * Configure split subvariant behavior:
+   * - 'bridge' | 'swap': Single mode without tabs
+   * - { defaultTab: 'bridge' | 'swap' }: Tabs mode with configurable default tab
+   */
+  split?: SplitSubvariant | SplitSubvariantOptions
   custom?: CustomSubvariant
   wide?: WideSubvariant
 }
@@ -125,6 +133,7 @@ export enum HiddenUI {
   SearchTokenInput = 'searchTokenInput',
   InsufficientGasMessage = 'insufficientGasMessage',
   ContactSupport = 'contactSupport',
+  AllNetworks = 'allNetworks',
 }
 export type HiddenUIType = `${HiddenUI}`
 

package/src/utils/token.ts

@@ -1,8 +1,72 @@
-import type { BaseToken, TokenExtended } from '@lifi/sdk'
+import type { BaseToken, Token, TokenExtended } from '@lifi/sdk'
 import type { FormType } from '../stores/form/types.js'
+import type { TokensByChain } from '../types/token.js'
 import type { WidgetChains, WidgetTokens } from '../types/widget.js'
 import { getConfigItemSets, isFormItemAllowed } from './item.js'
 
+/**
+ * Merges verified tokens with search tokens.
+ * Verified tokens take priority - search tokens are only added if they don't already exist.
+ */
+export const mergeVerifiedWithSearchTokens = (
+  verifiedTokens?: TokensByChain,
+  searchTokens?: TokensByChain
+): TokensByChain | undefined => {
+  if (!verifiedTokens) {
+    return searchTokens
+  }
+  if (!searchTokens) {
+    return verifiedTokens
+  }
+
+  const result = { ...verifiedTokens }
+
+  for (const [chainId, tokens] of Object.entries(searchTokens)) {
+    const chainIdNum = Number(chainId)
+    const existingTokens = result[chainIdNum] || []
+    const existingAddresses = new Set(
+      existingTokens.map((t) => t.address.toLowerCase())
+    )
+
+    const newTokens = tokens.filter(
+      (t) => !existingAddresses.has(t.address.toLowerCase())
+    )
+
+    if (newTokens.length) {
+      result[chainIdNum] = [...existingTokens, ...newTokens]
+    }
+  }
+
+  return result
+}
+
+/**
+ * Updates a token in the cache by chainId and address.
+ * Returns a new cache object with the token updated, or the original if not found.
+ */
+export const updateTokenInCache = (
+  data: TokensByChain | undefined,
+  token: Token
+): TokensByChain | undefined => {
+  if (!data) {
+    return data
+  }
+  const chainTokens = data[token.chainId]
+  if (!chainTokens) {
+    return data
+  }
+  const index = chainTokens.findIndex((t) => t.address === token.address)
+  if (index < 0) {
+    return data
+  }
+  return {
+    ...data,
+    [token.chainId]: chainTokens.map((t, i) =>
+      i === index ? { ...t, ...token } : t
+    ),
+  }
+}
+
 export const filterAllowedTokens = (
   dataTokens: { [chainId: number]: TokenExtended[] } | undefined,
   configTokens?: WidgetTokens,

package/src/utils/tokenList.ts

@@ -91,6 +91,8 @@ const processedTypedTokens = (
     typedTokens?.forEach((token) => {
       const tokenAmount = { ...token } as TokenAmount
       tokenAmount[tokenType] = true
+      // Config tokens are explicitly set by integrator, mark as verified
+      tokenAmount.verified = true
 
       const match = filteredTokensMap.get(token.address)
       if (match?.priceUSD) {

package/src/utils/variant.ts

@@ -0,0 +1,16 @@
+import type {
+  SplitSubvariant,
+  SplitSubvariantOptions,
+} from '../types/widget.js'
+
+export const getSplitSubvariant = (
+  split?: SplitSubvariant | SplitSubvariantOptions
+): SplitSubvariant => {
+  if (!split) {
+    return 'swap'
+  }
+  if (typeof split === 'string') {
+    return split
+  }
+  return split.defaultTab
+}