@lifi/widget 3.24.3 → 3.25.0-beta.1

package/src/hooks/useListHeight.ts

@@ -19,7 +19,7 @@ const getContentHeight = (
 
   const listParentElement = listParentRef?.current
 
-  let oldHeight: string | undefined = undefined
+  let oldHeight: string | undefined
 
   // This covers the case where in full height flex mode when the browser height is reduced
   // - this allows a virtualised list to be made smaller

package/src/hooks/useRouteExecution.ts

@@ -192,19 +192,19 @@ export const useRouteExecution = ({
     [resumeRouteMutation, routeId]
   )
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies:
+  // biome-ignore lint/correctness/useExhaustiveDependencies: run only when routeId changes
   const restartRouteMutation = useCallback(() => {
     restartRoute(routeId)
     _resumeRoute(routeExecution?.route)
   }, [_resumeRoute, routeExecution?.route, routeId])
 
-  // biome-ignore lint/correctness/useExhaustiveDependencies:
+  // biome-ignore lint/correctness/useExhaustiveDependencies: run only when routeId changes
   const deleteRouteMutation = useCallback(() => {
     deleteRoute(routeId)
   }, [routeId])
 
   // Resume route execution after page reload
-  // biome-ignore lint/correctness/useExhaustiveDependencies:
+  // biome-ignore lint/correctness/useExhaustiveDependencies: run only when routeId changes
   useEffect(() => {
     // Check if route is eligible for automatic resuming
     const route = routeExecutionStoreContext.getState().routes[routeId]?.route

package/src/hooks/useRoutes.ts

@@ -1,12 +1,12 @@
 import type { Route, Token } from '@lifi/sdk'
 import {
   ChainType,
-  LiFiErrorCode,
   convertQuoteToRoute,
   getContractCallsQuote,
   getRelayerQuote,
   getRoutes,
   isRelayerStep,
+  LiFiErrorCode,
 } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
@@ -37,6 +37,7 @@ interface RoutesProps {
 export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
   const {
     subvariant,
+    subvariantOptions,
     sdkConfig,
     contractTool,
     bridges,
@@ -289,7 +290,12 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
         }
 
         // Prevent sending a request for the same chain token combinations.
-        if (fromChainId === toChainId && fromTokenAddress === toTokenAddress) {
+        // Exception: proceed anyway if subvariant is custom and subvariantOptions is deposit
+        if (
+          fromChainId === toChainId &&
+          fromTokenAddress === toTokenAddress &&
+          !(subvariant === 'custom' && subvariantOptions?.custom === 'deposit')
+        ) {
           return
         }
 

package/src/hooks/useToAddressReset.ts

@@ -1,4 +1,5 @@
 import type { ExtendedChain } from '@lifi/sdk'
+import { useCallback } from 'react'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { useBookmarkActions } from '../stores/bookmarks/useBookmarkActions.js'
 import { useBookmarks } from '../stores/bookmarks/useBookmarks.js'
@@ -13,31 +14,41 @@ export const useToAddressReset = () => {
   const { setSelectedBookmark } = useBookmarkActions()
   const { setSendToWallet } = useSendToWalletActions()
 
-  const tryResetToAddress = (toChain: ExtendedChain) => {
-    const requiredToAddress = requiredUI?.includes(RequiredUI.ToAddress)
+  const tryResetToAddress = useCallback(
+    (toChain: ExtendedChain) => {
+      const requiredToAddress = requiredUI?.includes(RequiredUI.ToAddress)
 
-    const bookmarkSatisfiesToChainType =
-      selectedBookmark?.chainType === toChain?.chainType
+      const bookmarkSatisfiesToChainType =
+        selectedBookmark?.chainType === toChain?.chainType
 
-    const shouldResetToAddress =
-      !requiredToAddress && !bookmarkSatisfiesToChainType
+      const shouldResetToAddress =
+        !requiredToAddress && !bookmarkSatisfiesToChainType
 
-    // The toAddress field is required and always visible when bridging between
-    // different ecosystems (fromChain and toChain have different chain types).
-    // We reset toAddress on each chain change if it's no longer required, ensuring that
-    // switching chain types doesn't leave a previously set toAddress value when
-    // the "Send to Wallet" field is hidden.
-    if (shouldResetToAddress) {
-      setFieldValue('toAddress', '', { isTouched: true })
-      setSelectedBookmark()
-      // If toAddress was auto-filled (e.g., when making cross-ecosystem bridging and compatible destination wallet was connected)
-      // and not manually edited by the user, we need to hide "Send to Wallet".
-      const isToAddressDirty = isDirty('toAddress')
-      if (!isToAddressDirty) {
-        setSendToWallet(false)
+      // The toAddress field is required and always visible when bridging between
+      // different ecosystems (fromChain and toChain have different chain types).
+      // We reset toAddress on each chain change if it's no longer required, ensuring that
+      // switching chain types doesn't leave a previously set toAddress value when
+      // the "Send to Wallet" field is hidden.
+      if (shouldResetToAddress) {
+        setFieldValue('toAddress', '', { isTouched: true })
+        setSelectedBookmark()
+        // If toAddress was auto-filled (e.g., when making cross-ecosystem bridging and compatible destination wallet was connected)
+        // and not manually edited by the user, we need to hide "Send to Wallet".
+        const isToAddressDirty = isDirty('toAddress')
+        if (!isToAddressDirty) {
+          setSendToWallet(false)
+        }
       }
-    }
-  }
+    },
+    [
+      setFieldValue,
+      isDirty,
+      setSelectedBookmark,
+      setSendToWallet,
+      requiredUI,
+      selectedBookmark,
+    ]
+  )
 
   return {
     tryResetToAddress,

package/src/hooks/useTokenBalance.ts

@@ -1,4 +1,4 @@
-import { type Token, type TokenAmount, getTokenBalances } from '@lifi/sdk'
+import { getTokenBalances, type Token, type TokenAmount } from '@lifi/sdk'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 import { useCallback, useMemo } from 'react'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'

package/src/hooks/useTokenBalances.ts

@@ -36,6 +36,7 @@ export const useTokenBalances = (
       account.address,
       selectedChainId,
       tokens?.length,
+      formType,
     ],
     queryFn: async ({ queryKey: [, accountAddress] }) => {
       const tokensWithBalance: TokenAmount[] = await getTokenBalances(

package/src/hooks/useTokenSearch.ts

@@ -1,9 +1,14 @@
-import { type ChainId, type TokensResponse, getToken } from '@lifi/sdk'
+import {
+  type BaseToken,
+  type ChainId,
+  getToken,
+  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 { TokenAmount } from '../types/token.js'
-import { filterConfigTokensByChain, isTokenAllowed } from '../utils/item.js'
+import { getConfigItemSets, isFormItemAllowed } from '../utils/item.js'
 import { getQueryKey } from '../utils/queries.js'
 
 export const useTokenSearch = (
@@ -24,14 +29,26 @@ export const useTokenSearch = (
 
       if (token) {
         // Filter config tokens by chain before checking if token is allowed
-        const filteredConfigTokens = filterConfigTokensByChain(
+        const filteredConfigTokens = getConfigItemSets(
           configTokens,
-          formType,
-          token.chainId
+          (tokens: BaseToken[]) =>
+            new Set(
+              tokens
+                .filter((t) => t.chainId === token.chainId)
+                .map((t) => t.address)
+            ),
+          formType
         )
 
         // Return undefined if the token is denied
-        if (!isTokenAllowed(token, filteredConfigTokens, formType)) {
+        if (
+          !isFormItemAllowed(
+            token,
+            filteredConfigTokens,
+            formType,
+            (t) => t.address
+          )
+        ) {
           return undefined
         }
 

package/src/hooks/useTokens.ts

@@ -1,10 +1,10 @@
-import { ChainType, getTokens } from '@lifi/sdk'
+import { type BaseToken, ChainType, getTokens } from '@lifi/sdk'
 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 { TokenAmount } from '../types/token.js'
-import { filterConfigTokensByChain, isTokenAllowed } from '../utils/item.js'
+import { getConfigItemSets, isFormItemAllowed } from '../utils/item.js'
 import { getQueryKey } from '../utils/queries.js'
 import { useChains } from './useChains.js'
 
@@ -48,17 +48,27 @@ export const useTokens = (selectedChainId?: number, formType?: FormType) => {
     }
 
     // Filter config tokens by chain before checking if token is allowed
-    const filteredConfigTokens = filterConfigTokensByChain(
+    const filteredConfigTokens = getConfigItemSets(
       configTokens,
-      formType,
-      selectedChainId
+      (tokens: BaseToken[]) =>
+        new Set(
+          tokens
+            .filter((t) => t.chainId === selectedChainId)
+            .map((t) => t.address)
+        ),
+      formType
     )
 
     // Get the appropriate allow/deny lists based on formType
     filteredTokens = filteredTokens.filter(
       (token) =>
         token.chainId === selectedChainId &&
-        isTokenAllowed(token, filteredConfigTokens, formType)
+        isFormItemAllowed(
+          token,
+          filteredConfigTokens,
+          formType,
+          (t) => t.address
+        )
     )
 
     const filteredTokensMap = new Map(

package/src/hooks/useTools.ts

@@ -1,8 +1,8 @@
-import { type ToolsResponse, getTools } from '@lifi/sdk'
+import { getTools, type ToolsResponse } from '@lifi/sdk'
 import { useQuery } from '@tanstack/react-query'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { useSettingsStore } from '../stores/settings/useSettingsStore.js'
-import { isItemAllowed } from '../utils/item.js'
+import { getConfigItemSets, isItemAllowedForSets } from '../utils/item.js'
 import { getQueryKey } from '../utils/queries.js'
 
 export const useTools = () => {
@@ -17,12 +17,20 @@ export const useTools = () => {
     ],
     queryFn: async (): Promise<ToolsResponse> => {
       const tools = await getTools()
+      const bridgesConfigSets = getConfigItemSets(
+        bridges,
+        (bridges) => new Set(bridges)
+      )
+      const exchangesConfigSets = getConfigItemSets(
+        exchanges,
+        (exchanges) => new Set(exchanges)
+      )
       const result = {
         bridges: tools.bridges.filter((bridge) =>
-          isItemAllowed(bridge.key, bridges)
+          isItemAllowedForSets(bridge.key, bridgesConfigSets)
         ),
         exchanges: tools.exchanges.filter((exchange) =>
-          isItemAllowed(exchange.key, exchanges)
+          isItemAllowedForSets(exchange.key, exchangesConfigSets)
         ),
       }
       const { initializeTools } = useSettingsStore.getState()

package/src/hooks/useTransactionDetails.ts

@@ -1,5 +1,5 @@
 import type { FullStatusData } from '@lifi/sdk'
-import { type StatusResponse, getStatus } from '@lifi/sdk'
+import { getStatus, type StatusResponse } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import {
   keepPreviousData,

package/src/hooks/useWidgetEvents.ts

@@ -1,5 +1,6 @@
 import _mitt, { type Emitter, type EventHandlerMap, type EventType } from 'mitt'
 import type { WidgetEvents } from '../types/events.js'
+
 // https://github.com/developit/mitt/issues/191
 const mitt = _mitt as unknown as <Events extends Record<EventType, unknown>>(
   all?: EventHandlerMap<Events>

package/src/i18n/bn.json

@@ -309,8 +309,9 @@
     "to": "প্রতি",
     "tokenOnChain": "{{chainName}} -এ {{tokenSymbol}}",
     "tokenOnChainAmount": "",
-    "tokenSearch": "আপনার টোকেন অনুসন্ধান করুন",
+    "tokenSearch": "",
     "valueLoss": "মান ক্ষতি",
+    "searchChain": "",
     "searchChains": "",
     "searchBridges": "",
     "searchExchanges": ""

package/src/i18n/de.json

@@ -309,8 +309,9 @@
     "to": "Zu",
     "tokenOnChain": "{{tokenSymbol}} auf {{chainName}}",
     "tokenOnChainAmount": "",
-    "tokenSearch": "Suchen Sie Ihren Token",
+    "tokenSearch": "",
     "valueLoss": "Wertverlust",
+    "searchChain": "",
     "searchChains": "",
     "searchBridges": "",
     "searchExchanges": ""

package/src/i18n/en.json

@@ -309,8 +309,9 @@
     "to": "To",
     "tokenOnChain": "{{tokenSymbol}} on {{chainName}}",
     "tokenOnChainAmount": "{{amount, numberExt}} {{tokenSymbol}} on {{chainName}}",
-    "tokenSearch": "Search by token name or address",
+    "tokenSearch": "Search by token or address",
     "valueLoss": "Value loss",
+    "searchChain": "Search chain",
     "searchChains": "Search by chain name",
     "searchBridges": "Search by bridge name",
     "searchExchanges": "Search by exchange name"

package/src/i18n/es.json

@@ -309,8 +309,9 @@
     "to": "A",
     "tokenOnChain": "{{tokenSymbol}} en {{chainName}}",
     "tokenOnChainAmount": "",
-    "tokenSearch": "Busque su token",
+    "tokenSearch": "",
     "valueLoss": "Valor perdido",
+    "searchChain": "",
     "searchChains": "Buscar por nombre de cadena",
     "searchBridges": "Buscar por nombre de puente",
     "searchExchanges": "Buscar por nombre de intercambio"

package/src/i18n/fr.json

@@ -309,8 +309,9 @@
     "to": "À",
     "tokenOnChain": "{{tokenSymbol}} sur {{chainName}}",
     "tokenOnChainAmount": "",
-    "tokenSearch": "Recherche par nom de jeton ou adresse",
+    "tokenSearch": "",
     "valueLoss": "Perte de valeur",
+    "searchChain": "",
     "searchChains": "",
     "searchBridges": "",
     "searchExchanges": ""

package/src/i18n/hi.json

@@ -311,6 +311,7 @@
     "tokenOnChainAmount": "",
     "tokenSearch": "",
     "valueLoss": "",
+    "searchChain": "",
     "searchChains": "",
     "searchBridges": "",
     "searchExchanges": ""

package/src/i18n/id.json

@@ -309,8 +309,9 @@
     "to": "Kepada",
     "tokenOnChain": "{{tokenSymbol}} di {{chainName}}",
     "tokenOnChainAmount": "{{amount, numberExt}} {{tokenSymbol}} di {{chainName}}",
-    "tokenSearch": "Cari berdasarkan nama atau alamat token",
+    "tokenSearch": "",
     "valueLoss": "Kehilangan nilai",
+    "searchChain": "",
     "searchChains": "Cari berdasarkan nama rantai",
     "searchBridges": "Cari berdasarkan nama bridge",
     "searchExchanges": "Cari berdasarkan nama exchange"

package/src/i18n/it.json

@@ -309,8 +309,9 @@
     "to": "A",
     "tokenOnChain": "{{tokenSymbol}} su {{chainName}}",
     "tokenOnChainAmount": "",
-    "tokenSearch": "Cerca per nome token o indirizzo",
+    "tokenSearch": "",
     "valueLoss": "Perdita di valore",
+    "searchChain": "",
     "searchChains": "",
     "searchBridges": "",
     "searchExchanges": ""

package/src/i18n/ja.json

@@ -309,8 +309,9 @@
     "to": "To",
     "tokenOnChain": "{{chainName}} の {{tokenSymbol}}",
     "tokenOnChainAmount": "",
-    "tokenSearch": "トークン名またはアドレスで検索",
+    "tokenSearch": "",
     "valueLoss": "損失額",
+    "searchChain": "",
     "searchChains": "",
     "searchBridges": "",
     "searchExchanges": ""

package/src/i18n/ko.json

@@ -309,8 +309,9 @@
     "to": "도착",
     "tokenOnChain": "{{chainName}}의 {{tokenSymbol}}",
     "tokenOnChainAmount": "",
-    "tokenSearch": "이름 또는 컨트랙트 주소를 통해 검색",
+    "tokenSearch": "",
     "valueLoss": "가치 손실",
+    "searchChain": "",
     "searchChains": "",
     "searchBridges": "",
     "searchExchanges": ""