@lifi/widget 3.36.1 → 3.38.0

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 },
+              ],
             }
           }
         )

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/providers/I18nProvider/I18nProvider.tsx

@@ -1,6 +1,8 @@
 import { createInstance, type i18n } from 'i18next'
-import { useMemo, useRef } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
 import { I18nextProvider } from 'react-i18next'
+import { useLanguages } from '../../hooks/useLanguages.js'
+import { useSettingsStore } from '../../stores/settings/SettingsStore.js'
 import { useSettings } from '../../stores/settings/useSettings.js'
 import { compactNumberFormatter } from '../../utils/compactNumberFormatter.js'
 import { currencyExtendedFormatter } from '../../utils/currencyExtendedFormatter.js'
@@ -92,5 +94,40 @@ export const I18nProvider: React.FC<React.PropsWithChildren> = ({
     return i18n
   }, [language, languageResources, languages?.default, languageCache])
 
-  return <I18nextProvider i18n={i18nInstance}>{children}</I18nextProvider>
+  return (
+    <I18nextProvider i18n={i18nInstance}>
+      {children}
+      <DefaultLanguageHandler />
+    </I18nextProvider>
+  )
+}
+
+// Sync language settings internally when config.languages.default changes externally
+const DefaultLanguageHandler: React.FC = () => {
+  const { languages } = useWidgetConfig()
+  const [lastDefaultLanguage, setValue] = useSettingsStore((state) => [
+    state.lastDefaultLanguage,
+    state.setValue,
+  ])
+  const { setLanguageWithCode: setLanguage } = useLanguages()
+
+  useEffect(() => {
+    const currentDefaultLanguage = languages?.default
+
+    const defaultLanguageChanged =
+      currentDefaultLanguage && currentDefaultLanguage !== lastDefaultLanguage
+
+    if (!defaultLanguageChanged) {
+      return
+    }
+
+    const updateLanguage = async () => {
+      await setLanguage(currentDefaultLanguage)
+      setValue('lastDefaultLanguage', currentDefaultLanguage)
+    }
+
+    updateLanguage()
+  }, [languages?.default, setValue, lastDefaultLanguage, setLanguage])
+
+  return null
 }

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,13 +65,24 @@ 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
@@ -99,6 +113,8 @@ export function ChainOrderStoreProvider({
     useExternalWalletProvidersOnly,
     variant,
     subvariantOptions?.wide?.enableChainSidebar,
+    hiddenUI,
+    swapOnly,
   ])
 
   return (

package/src/stores/settings/types.ts

@@ -19,6 +19,7 @@ export interface SettingsProps {
   gasPrice?: string
   language?: string
   languageCache?: LanguageResource
+  lastDefaultLanguage?: string
   routePriority?: Order
   enabledAutoRefuel: boolean
   slippage?: string

package/src/stores/settings/utils/getStateValues.ts

@@ -4,6 +4,7 @@ export const getStateValues = (state: SettingsState): SettingsProps => ({
   gasPrice: state.gasPrice,
   language: state.language,
   languageCache: state.languageCache,
+  lastDefaultLanguage: state.lastDefaultLanguage,
   routePriority: state.routePriority,
   enabledAutoRefuel: state.enabledAutoRefuel,
   slippage: state.slippage,

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
 }
@@ -116,6 +124,7 @@ export enum HiddenUI {
   IntegratorStepDetails = 'integratorStepDetails',
   ReverseTokensButton = 'reverseTokensButton',
   RouteTokenDescription = 'routeTokenDescription',
+  RouteCardPriceImpact = 'routeCardPriceImpact',
   ChainSelect = 'chainSelect',
   BridgesSettings = 'bridgesSettings',
   AddressBookConnectedWallets = 'addressBookConnectedWallets',
@@ -124,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
+}