@lifi/widget 3.25.0 → 3.26.1

package/src/components/SendToWallet/SendToWalletButton.tsx

@@ -36,7 +36,7 @@ export const SendToWalletButton: React.FC<CardProps> = (props) => {
     subvariant,
     subvariantOptions,
   } = useWidgetConfig()
-  const { showSendToWallet } = useSendToWalletStore()
+  const { showSendToWallet } = useSendToWalletStore((state) => state)
   const [toAddressFieldValue, toChainId, toTokenAddress] = useFieldValues(
     'toAddress',
     'toChain',

package/src/components/SendToWallet/SendToWalletExpandButton.tsx

@@ -7,7 +7,10 @@ import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.j
 import { useBookmarkActions } from '../../stores/bookmarks/useBookmarkActions.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
-import { useSendToWalletStore } from '../../stores/settings/useSendToWalletStore.js'
+import {
+  sendToWalletStore,
+  useSendToWalletStore,
+} from '../../stores/settings/useSendToWalletStore.js'
 import { WidgetEvent } from '../../types/events.js'
 import { DisabledUI, HiddenUI } from '../../types/widget.js'
 
@@ -17,7 +20,9 @@ export const SendToWalletExpandButton: React.FC = () => {
   const { setFieldValue } = useFieldActions()
   const { setSelectedBookmark } = useBookmarkActions()
   const emitter = useWidgetEvents()
-  const { showSendToWallet, setSendToWallet } = useSendToWalletStore()
+  const { showSendToWallet, setSendToWallet } = useSendToWalletStore(
+    (state) => state
+  )
   const [toAddressFieldValue] = useFieldValues('toAddress')
   const { requiredToAddress } = useToAddressRequirements()
 
@@ -33,7 +38,7 @@ export const SendToWalletExpandButton: React.FC = () => {
     setSendToWallet(!showSendToWallet)
     emitter.emit(
       WidgetEvent.SendToWalletToggled,
-      useSendToWalletStore.getState().showSendToWallet
+      sendToWalletStore.getState().showSendToWallet
     )
   }
 

package/src/components/Step/StepProcess.tsx

@@ -13,17 +13,12 @@ export const StepProcess: React.FC<{
   const { title, message } = useProcessMessage(step, process)
   const { getTransactionLink } = useExplorer()
 
-  const transactionLink = process.txHash
+  const transactionLink = process.txLink
     ? getTransactionLink({
-        txHash: process.txHash,
+        txLink: process.txLink,
         chain: process.chainId,
       })
-    : process.txLink
-      ? getTransactionLink({
-          txLink: process.txLink,
-          chain: process.chainId,
-        })
-      : undefined
+    : undefined
 
   return (
     <Box

package/src/components/TokenList/TokenDetailsSheetContent.tsx

@@ -7,7 +7,6 @@ import { useTranslation } from 'react-i18next'
 import { useAvailableChains } from '../../hooks/useAvailableChains.js'
 import { useExplorer } from '../../hooks/useExplorer.js'
 import { useTokenSearch } from '../../hooks/useTokenSearch.js'
-import { formatTokenPrice } from '../../utils/format.js'
 import { shortenAddress } from '../../utils/wallet.js'
 import { TokenAvatar } from '../Avatar/TokenAvatar.js'
 import { CardIconButton } from '../Card/CardIconButton.js'
@@ -119,7 +118,7 @@ export const TokenDetailsSheetContent = forwardRef<
         >
           {token?.priceUSD
             ? t('format.currency', {
-                value: formatTokenPrice('1', token.priceUSD, token.decimals),
+                value: token.priceUSD,
               })
             : noDataLabel}
         </Typography>

package/src/components/TokenList/useTokenSelect.ts

@@ -6,7 +6,6 @@ import { useChainOrderStoreContext } from '../../stores/chains/ChainOrderStore.j
 import type { FormType } from '../../stores/form/types.js'
 import { FormKeyHelper } from '../../stores/form/types.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
-import { useFieldController } from '../../stores/form/useFieldController.js'
 import { WidgetEvent } from '../../types/events.js'
 import type { DisabledUI } from '../../types/widget.js'
 
@@ -23,11 +22,10 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
   const chainOrderStore = useChainOrderStoreContext()
 
   const tokenKey = FormKeyHelper.getTokenKey(formType)
-  const { onChange } = useFieldController({ name: tokenKey })
 
   return useCallback(
     (tokenAddress: string, chainId?: number) => {
-      onChange(tokenAddress)
+      setFieldValue(tokenKey, tokenAddress, { isDirty: true, isTouched: true })
       const selectedChainId =
         chainId ?? getFieldValues(FormKeyHelper.getChainKey(formType))[0]
       // Set chain again to trigger URL builder update
@@ -105,10 +103,10 @@ export const useTokenSelect = (formType: FormType, onClick?: () => void) => {
       emitter,
       formType,
       getFieldValues,
-      onChange,
       onClick,
       setFieldValue,
       subvariant,
+      tokenKey,
     ]
   )
 }

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.25.0'
+export const version = '3.26.1'

package/src/hooks/useFromAmountThreshold.ts

@@ -16,13 +16,17 @@ export const useFromAmountThreshold = () => {
   const { token } = useToken(chainId, tokenAddress)
 
   const belowMinFromAmountUSD = useMemo(() => {
-    const fromAmountUSD = formatTokenPrice(fromAmount, token?.priceUSD)
+    const fromAmountUSD = formatTokenPrice(
+      fromAmount,
+      token?.priceUSD,
+      token?.decimals
+    )
 
     if (!minFromAmountUSD || !fromAmountUSD) {
       return false
     }
     return fromAmountUSD < minFromAmountUSD
-  }, [minFromAmountUSD, fromAmount, token?.priceUSD])
+  }, [minFromAmountUSD, fromAmount, token?.priceUSD, token?.decimals])
 
   return {
     belowMinFromAmountUSD,

package/src/hooks/useGasSufficiency.ts

@@ -57,7 +57,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
       EVMAccount.chainType
     )
 
-  const { data: insufficientGas, isLoading } = useQuery({
+  const { data: insufficientGas, isLoading } = useQuery<GasSufficiency[]>({
     queryKey: [
       getQueryKey('gas-sufficiency-check', keyPrefix),
       relevantAccountsQueryKey,
@@ -66,7 +66,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
     ] as const,
     queryFn: async () => {
       if (!route) {
-        return
+        return []
       }
 
       // Filter out steps that are relayer steps or have primaryType 'Permit' or 'Order'
@@ -80,7 +80,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
 
       // If all steps are filtered out, we don't need to check for gas sufficiency
       if (!filteredSteps.length) {
-        return
+        return []
       }
 
       // We assume that LI.Fuel protocol always refuels the destination chain
@@ -163,7 +163,7 @@ export const useGasSufficiency = (route?: RouteExtended) => {
         .flatMap((result) => result.value)
 
       if (!tokenBalances?.length) {
-        return
+        return []
       }
 
       Object.keys(gasCosts).forEach((chainId) => {

package/src/hooks/useNavigateBack.ts

@@ -4,23 +4,32 @@ import { useNavigate } from 'react-router-dom'
 export const useNavigateBack = () => {
   const navigate = useNavigate()
 
-  const navigateBack = useCallback(() => {
-    // TODO: find a better router with nested memory routers support
-    // https://github.com/remix-run/react-router/pull/9112
-    // https://github.com/remix-run/react-router/discussions/9601
-    //
-    // if (window.history.length > 2) {
-    navigate(-1)
-    // } else {
-    //   navigate(
-    //     window.location.pathname.substring(
-    //       0,
-    //       window.location.pathname.lastIndexOf('/'),
-    //     ) || '/',
-    //     { replace: true },
-    //   );
-    // }
-  }, [navigate])
+  const navigateBack = useCallback(
+    (toPathname?: string) => {
+      // TODO: find a better router with nested memory routers support
+      // https://github.com/remix-run/react-router/pull/9112
+      // https://github.com/remix-run/react-router/discussions/9601
+      //
+      // if (window.history.length > 2) {
+      // navigate(-1)
+      // } else {
+      //   navigate(
+      //     window.location.pathname.substring(
+      //       0,
+      //       window.location.pathname.lastIndexOf('/'),
+      //     ) || '/',
+      //     { replace: true },
+      //   );
+      // }
+
+      if (toPathname) {
+        navigate(toPathname)
+      } else {
+        navigate(-1)
+      }
+    },
+    [navigate]
+  )
 
   return { navigateBack, navigate }
 }

package/src/hooks/useRouteExecution.ts

@@ -3,7 +3,6 @@ import { executeRoute, resumeRoute, updateRouteExecution } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { useCallback, useEffect, useRef } from 'react'
-import { shallow } from 'zustand/shallow'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import {
   useRouteExecutionStore,
@@ -43,8 +42,7 @@ export const useRouteExecution = ({
     (state) => state.routes[routeId]
   )
   const [updateRoute, restartRoute, deleteRoute] = useRouteExecutionStore(
-    (state) => [state.updateRoute, state.restartRoute, state.deleteRoute],
-    shallow
+    (state) => [state.updateRoute, state.restartRoute, state.deleteRoute]
   )
 
   const updateRouteHook = (updatedRoute: Route) => {

package/src/hooks/useRoutes.ts

@@ -1,4 +1,4 @@
-import type { Route, Token } from '@lifi/sdk'
+import type { Route, Token, TokensResponse } from '@lifi/sdk'
 import {
   ChainType,
   convertQuoteToRoute,
@@ -10,6 +10,7 @@ import {
 } from '@lifi/sdk'
 import { useAccount } from '@lifi/wallet-management'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
+import { useCallback, useMemo } from 'react'
 import { parseUnits } from 'viem'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { useFieldValues } from '../stores/form/useFieldValues.js'
@@ -137,32 +138,63 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
     !isBatchingSupportedLoading
 
   // Some values should be strictly typed and isEnabled ensures that
-  const queryKey = [
-    getQueryKey('routes', keyPrefix),
-    account.address,
-    fromChain?.id as number,
-    fromToken?.address as string,
-    fromTokenAmount,
-    toWalletAddress,
-    toChain?.id as number,
-    toToken?.address as string,
-    toTokenAmount,
-    contractCalls,
-    slippage,
-    swapOnly,
-    disabledBridges,
-    disabledExchanges,
-    allowedBridges,
-    allowedExchanges,
-    routePriority,
-    subvariant,
-    allowSwitchChain,
-    enabledRefuel && enabledAutoRefuel,
-    gasRecommendationFromAmount,
-    feeConfig?.fee || fee,
-    !!isBatchingSupported,
-    observableRoute?.id,
-  ] as const
+  const queryKey = useMemo(
+    () =>
+      [
+        getQueryKey('routes', keyPrefix),
+        account.address,
+        fromChain?.id as number,
+        fromToken?.address as string,
+        fromTokenAmount,
+        toWalletAddress,
+        toChain?.id as number,
+        toToken?.address as string,
+        toTokenAmount,
+        contractCalls,
+        slippage,
+        swapOnly,
+        disabledBridges,
+        disabledExchanges,
+        allowedBridges,
+        allowedExchanges,
+        routePriority,
+        subvariant,
+        allowSwitchChain,
+        enabledRefuel && enabledAutoRefuel,
+        gasRecommendationFromAmount,
+        feeConfig?.fee || fee,
+        !!isBatchingSupported,
+        observableRoute?.id,
+      ] as const,
+    [
+      keyPrefix,
+      account.address,
+      fromChain?.id,
+      fromToken?.address,
+      fromTokenAmount,
+      toWalletAddress,
+      toChain?.id,
+      toToken?.address,
+      toTokenAmount,
+      contractCalls,
+      slippage,
+      swapOnly,
+      disabledBridges,
+      disabledExchanges,
+      allowedBridges,
+      allowedExchanges,
+      routePriority,
+      subvariant,
+      allowSwitchChain,
+      enabledRefuel,
+      enabledAutoRefuel,
+      gasRecommendationFromAmount,
+      feeConfig?.fee,
+      fee,
+      isBatchingSupported,
+      observableRoute?.id,
+    ]
+  )
 
   const { getIntermediateRoutes, setIntermediateRoutes } =
     useIntermediateRoutesStore()
@@ -406,6 +438,24 @@ 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>(
+              { queryKey: [getQueryKey('tokens', keyPrefix)] },
+              (data) => {
+                if (data) {
+                  const clonedData = { ...data }
+                  const index = clonedData.tokens?.[token.chainId]?.findIndex(
+                    (dataToken) => dataToken.address === token.address
+                  )
+                  if (index >= 0) {
+                    clonedData.tokens[token.chainId][index] = {
+                      ...clonedData.tokens[token.chainId][index],
+                      ...token,
+                    }
+                  }
+                  return clonedData
+                }
+              }
+            )
             queryClient.setQueriesData<Token[]>(
               {
                 queryKey: [
@@ -420,9 +470,11 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
                   const index = clonedData.findIndex(
                     (dataToken) => dataToken.address === token.address
                   )
-                  clonedData[index] = {
-                    ...clonedData[index],
-                    ...token,
+                  if (index >= 0) {
+                    clonedData[index] = {
+                      ...clonedData[index],
+                      ...token,
+                    }
                   }
                   return clonedData
                 }
@@ -476,13 +528,16 @@ export const useRoutes = ({ observableRoute }: RoutesProps = {}) => {
       },
     })
 
-  const setReviewableRoute = (route: Route) => {
-    const queryDataKey = queryKey.toSpliced(queryKey.length - 1, 1, route.id)
-    queryClient.setQueryData(queryDataKey, [route], {
-      updatedAt: dataUpdatedAt || Date.now(),
-    })
-    setExecutableRoute(route)
-  }
+  const setReviewableRoute = useCallback(
+    (route: Route) => {
+      const queryDataKey = queryKey.toSpliced(queryKey.length - 1, 1, route.id)
+      queryClient.setQueryData(queryDataKey, [route], {
+        updatedAt: dataUpdatedAt || Date.now(),
+      })
+      setExecutableRoute(route)
+    },
+    [queryClient, dataUpdatedAt, setExecutableRoute, queryKey]
+  )
 
   return {
     routes: data || getIntermediateRoutes(queryKey),

package/src/hooks/useSettingMonitor.ts

@@ -1,4 +1,3 @@
-import { shallow } from 'zustand/shallow'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { useSettingsActions } from '../stores/settings/useSettingsActions.js'
 import {
@@ -14,16 +13,13 @@ export const useSettingMonitor = () => {
     routePriority,
     slippage,
     gasPrice,
-  ] = useSettingsStore(
-    (state) => [
-      state.disabledBridges,
-      state.disabledExchanges,
-      state.routePriority,
-      state.slippage,
-      state.gasPrice,
-    ],
-    shallow
-  )
+  ] = useSettingsStore((state) => [
+    state.disabledBridges,
+    state.disabledExchanges,
+    state.routePriority,
+    state.slippage,
+    state.gasPrice,
+  ])
   const { tools } = useTools()
   const config = useWidgetConfig()
   const { setDefaultSettings, resetSettings } = useSettingsActions()

package/src/hooks/useTokenAddressBalance.ts

@@ -11,9 +11,14 @@ export const useTokenAddressBalance = (
 
   const token = useMemo(() => {
     if (tokenAddress && chainId) {
-      const token = (tokensWithBalance ?? tokens)?.find(
+      let token = tokensWithBalance?.find(
         (token) => token.address === tokenAddress && token.chainId === chainId
       )
+      if (!token) {
+        token = tokens?.find(
+          (token) => token.address === tokenAddress && token.chainId === chainId
+        )
+      }
       return token as TokenAmount
     }
   }, [chainId, tokenAddress, tokens, tokensWithBalance])

package/src/hooks/useTokenSearch.ts

@@ -61,8 +61,11 @@ export const useTokenSearch = (
                 (t) => t.address === token.address
               )
             ) {
-              const clonedData = { ...data }
-              clonedData.tokens[chainId as number]?.push(token as TokenExtended)
+              const clonedData = { ...data, tokens: { ...data.tokens } }
+              clonedData.tokens[chainId as number] = [
+                ...(clonedData.tokens[chainId as number] ?? []),
+                token,
+              ]
               return clonedData
             }
           }

package/src/hooks/useTokens.ts

@@ -19,8 +19,8 @@ export const useTokens = (selectedChainId?: number) => {
           ChainType.MVM,
         ],
       }),
-    refetchInterval: 3_600_000,
-    staleTime: 3_600_000,
+    refetchInterval: 300_000,
+    staleTime: 300_000,
   })
   const {
     chains,

package/src/hooks/useTools.ts

@@ -1,7 +1,7 @@
 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 { settingsStore } from '../stores/settings/useSettingsStore.js'
 import { getConfigItemSets, isItemAllowedForSets } from '../utils/item.js'
 import { getQueryKey } from '../utils/queries.js'
 
@@ -33,7 +33,7 @@ export const useTools = () => {
           isItemAllowedForSets(exchange.key, exchangesConfigSets)
         ),
       }
-      const { initializeTools } = useSettingsStore.getState()
+      const { initializeTools } = settingsStore.getState()
       initializeTools(
         'Bridges',
         result.bridges.map((bridge) => bridge.key)

package/src/i18n/bn.json

@@ -36,7 +36,7 @@
     "getGas": "গ্যাস পান",
     "learnMore": "আরও জানুন",
     "light": "লাইট",
-    "max": "সর্বোচ্চ",
+    "max": "",
     "ok": "ঠিক আছে",
     "options": "",
     "removeTransaction": "",

package/src/i18n/de.json

@@ -36,7 +36,7 @@
     "getGas": "Gas erhalten",
     "learnMore": "Mehr erfahren",
     "light": "Hell",
-    "max": "max",
+    "max": "",
     "ok": "OK",
     "options": "",
     "removeTransaction": "Transaktion entfernen",

package/src/i18n/en.json

@@ -36,7 +36,7 @@
     "getGas": "Get gas",
     "learnMore": "Learn more",
     "light": "Light",
-    "max": "max",
+    "max": "MAX",
     "ok": "Ok",
     "options": "Options",
     "removeTransaction": "Remove transaction",

package/src/i18n/es.json

@@ -36,7 +36,7 @@
     "getGas": "Obtener gas",
     "learnMore": "Aprender más",
     "light": "Luz",
-    "max": "máximo",
+    "max": "",
     "ok": "Ok",
     "options": "Opciones",
     "removeTransaction": "Eliminar transacción",

package/src/i18n/fr.json

@@ -36,7 +36,7 @@
     "getGas": "Obtenir du gaz",
     "learnMore": "Plus d'info",
     "light": "Clair",
-    "max": "max",
+    "max": "",
     "ok": "Ok",
     "options": "Options",
     "removeTransaction": "Supprimer la transaction",

package/src/i18n/hi.json

@@ -36,7 +36,7 @@
     "getGas": "गेस शुल्क ले",
     "learnMore": "",
     "light": "रोशनी",
-    "max": "अधिकतम",
+    "max": "",
     "ok": "ठीक है",
     "options": "",
     "removeTransaction": "",

package/src/i18n/id.json

@@ -36,7 +36,7 @@
     "getGas": "Dapatkan gas",
     "learnMore": "Pelajari lebih lanjut",
     "light": "Terang",
-    "max": "maks",
+    "max": "",
     "ok": "Ya",
     "options": "Opsi",
     "removeTransaction": "Hapus transaksi",

package/src/i18n/it.json

@@ -36,7 +36,7 @@
     "getGas": "Ottieni gas",
     "learnMore": "Ulteriori informazioni",
     "light": "Chiaro",
-    "max": "massimo",
+    "max": "",
     "ok": "Ok",
     "options": "",
     "removeTransaction": "Rimuovi transazione",

package/src/i18n/ja.json

@@ -36,7 +36,7 @@
     "getGas": "ガス代を入手",
     "learnMore": "さらに詳しく",
     "light": "ライト",
-    "max": "最大値",
+    "max": "",
     "ok": "OK",
     "options": "オプション",
     "removeTransaction": "トランザクションを削除",

package/src/i18n/ko.json

@@ -36,7 +36,7 @@
     "getGas": "가스 받기",
     "learnMore": "자세히 알아보기",
     "light": "밝게",
-    "max": "최대",
+    "max": "",
     "ok": "확인",
     "options": "",
     "removeTransaction": "거래 지우기",

package/src/i18n/pt.json

@@ -36,7 +36,7 @@
     "getGas": "Obter gás",
     "learnMore": "Saiba mais",
     "light": "Claro",
-    "max": "máximo",
+    "max": "",
     "ok": "Tudo certo",
     "options": "Opções",
     "removeTransaction": "Remover transação",

package/src/i18n/th.json

@@ -36,7 +36,7 @@
     "getGas": "รับแก็ส",
     "learnMore": "เรียนรู้เพิ่มเติม",
     "light": "สว่าง",
-    "max": "สูงสุด",
+    "max": "",
     "ok": "ตกลง",
     "options": "การตั้งค่า",
     "removeTransaction": "นำรายการออก",

package/src/i18n/tr.json

@@ -36,7 +36,7 @@
     "getGas": "Gaz al",
     "learnMore": "Daha fazla bilgi edinin",
     "light": "Açık",
-    "max": "maksimum",
+    "max": "",
     "ok": "Tamam",
     "options": "Ayarlar",
     "removeTransaction": "İşlemi kaldır",

package/src/i18n/uk.json

@@ -36,7 +36,7 @@
     "getGas": "Отримати газ",
     "learnMore": "Докладніше",
     "light": "Світла",
-    "max": "макс",
+    "max": "",
     "ok": "Ок",
     "options": "Опції",
     "removeTransaction": "Видалити транзакцію",