@lifi/widget 3.29.1 → 3.30.1

package/src/i18n/hi.json

@@ -212,6 +212,7 @@
     "slippage": ""
   },
   "main": {
+    "allNetworks": "",
     "allTokens": "",
     "bridgeStepDetails": "",
     "checkoutStepDetails": "",
@@ -310,10 +311,9 @@
     "tokenOnChainAmount": "",
     "tokenSearch": "",
     "valueLoss": "",
-    "searchChain": "",
-    "searchChains": "",
     "searchBridges": "",
-    "searchExchanges": ""
+    "searchExchanges": "",
+    "searchNetwork": ""
   },
   "settings": {
     "appearance": "",

package/src/i18n/id.json

@@ -212,6 +212,7 @@
     "slippage": "Perbedaan persentase maksimum antara harga yang diharapkan dan harga sebenarnya saat transfer dilakukan. Nilai ini dapat diubah dalam pengaturan."
   },
   "main": {
+    "allNetworks": "",
     "allTokens": "Semua Token",
     "bridgeStepDetails": "Bridge dari {{from}} to {{to}} via {{tool}}",
     "checkoutStepDetails": "Dapatkan melalui {{tool}}",
@@ -310,10 +311,9 @@
     "tokenOnChainAmount": "{{amount, numberExt}} {{tokenSymbol}} di {{chainName}}",
     "tokenSearch": "",
     "valueLoss": "Kehilangan nilai",
-    "searchChain": "",
-    "searchChains": "Cari berdasarkan nama rantai",
     "searchBridges": "Cari berdasarkan nama bridge",
-    "searchExchanges": "Cari berdasarkan nama exchange"
+    "searchExchanges": "Cari berdasarkan nama exchange",
+    "searchNetwork": ""
   },
   "settings": {
     "appearance": "",

package/src/i18n/it.json

@@ -212,6 +212,7 @@
     "slippage": ""
   },
   "main": {
+    "allNetworks": "",
     "allTokens": "",
     "bridgeStepDetails": "",
     "checkoutStepDetails": "",
@@ -310,10 +311,9 @@
     "tokenOnChainAmount": "",
     "tokenSearch": "",
     "valueLoss": "Perdita di valore",
-    "searchChain": "",
-    "searchChains": "",
     "searchBridges": "",
-    "searchExchanges": ""
+    "searchExchanges": "",
+    "searchNetwork": ""
   },
   "settings": {
     "appearance": "",

package/src/i18n/ja.json

@@ -212,6 +212,7 @@
     "slippage": ""
   },
   "main": {
+    "allNetworks": "",
     "allTokens": "すべてのトークン",
     "bridgeStepDetails": "{{from}} から {{to}} を {{tool}} でブリッジ",
     "checkoutStepDetails": "{{tool}} 経由で購入",
@@ -310,10 +311,9 @@
     "tokenOnChainAmount": "",
     "tokenSearch": "",
     "valueLoss": "損失額",
-    "searchChain": "",
-    "searchChains": "",
     "searchBridges": "",
-    "searchExchanges": ""
+    "searchExchanges": "",
+    "searchNetwork": ""
   },
   "settings": {
     "appearance": "",

package/src/i18n/ko.json

@@ -212,6 +212,7 @@
     "slippage": ""
   },
   "main": {
+    "allNetworks": "",
     "allTokens": "",
     "bridgeStepDetails": "",
     "checkoutStepDetails": "",
@@ -310,10 +311,9 @@
     "tokenOnChainAmount": "",
     "tokenSearch": "",
     "valueLoss": "가치 손실",
-    "searchChain": "",
-    "searchChains": "",
     "searchBridges": "",
-    "searchExchanges": ""
+    "searchExchanges": "",
+    "searchNetwork": ""
   },
   "settings": {
     "appearance": "",

package/src/i18n/pl.json

@@ -212,6 +212,7 @@
     "slippage": ""
   },
   "main": {
+    "allNetworks": "",
     "allTokens": "",
     "bridgeStepDetails": "",
     "checkoutStepDetails": "",
@@ -310,10 +311,9 @@
     "tokenOnChainAmount": "",
     "tokenSearch": "",
     "valueLoss": "",
-    "searchChain": "",
-    "searchChains": "",
     "searchBridges": "",
-    "searchExchanges": ""
+    "searchExchanges": "",
+    "searchNetwork": ""
   },
   "settings": {
     "appearance": "",

package/src/i18n/pt.json

@@ -212,6 +212,7 @@
     "slippage": "A diferença percentual máxima entre o preço esperado, e o preço atual pelo qual a transferência é executada. Esse valor pode ser alterado nas configurações."
   },
   "main": {
+    "allNetworks": "Todas as redes",
     "allTokens": "Todos os tokens",
     "bridgeStepDetails": "Ponte de {{from}} para {{to}} via {{tool}}",
     "checkoutStepDetails": "Comprar via {{tool}}",
@@ -240,7 +241,7 @@
     "process": {
       "bridge": {
         "actionRequired": "Assinar a transação de transferência de fundos entre redes",
-        "messageRequired": "",
+        "messageRequired": "Assinar mensagem da ponte",
         "done": "Transação da ponte confirmada",
         "pending": "Transação de transferência de fundos entre redes, pendente",
         "started": "Preparando a transação da ponte"
@@ -259,7 +260,7 @@
       },
       "swap": {
         "actionRequired": "Assinar transação de troca",
-        "messageRequired": "",
+        "messageRequired": "Assinar mensagem da conversão",
         "done": "Conversão concluída",
         "pending": "Transação de troca pendente",
         "started": "Preparando a transação de conversão"
@@ -310,10 +311,9 @@
     "tokenOnChainAmount": "{{amount, numberExt}} {{tokenSymbol}} na {{chainName}}",
     "tokenSearch": "Pesquisar por token ou endereço",
     "valueLoss": "Perda de Valor",
-    "searchChain": "Pesquisar cadeia",
-    "searchChains": "Pesquisar pelo nome da rede",
     "searchBridges": "Pesquisar pelo nome da ponte",
-    "searchExchanges": "Pesquisar pelo nome da corretora"
+    "searchExchanges": "Pesquisar pelo nome da corretora",
+    "searchNetwork": "Procurar rede"
   },
   "settings": {
     "appearance": "Aparência",

package/src/i18n/th.json

@@ -212,6 +212,7 @@
     "slippage": ""
   },
   "main": {
+    "allNetworks": "",
     "allTokens": "โทเคนทั้งหมด",
     "bridgeStepDetails": "บริดจ์จาก{{from}} ไปยัง {{to}} โดย {{tool}}",
     "checkoutStepDetails": "ซื้อผ่าน {{tool}}",
@@ -310,10 +311,9 @@
     "tokenOnChainAmount": "",
     "tokenSearch": "",
     "valueLoss": "มูลค่าที่สูญเสีย",
-    "searchChain": "",
-    "searchChains": "",
     "searchBridges": "",
-    "searchExchanges": ""
+    "searchExchanges": "",
+    "searchNetwork": ""
   },
   "settings": {
     "appearance": "",

package/src/i18n/tr.json

@@ -212,6 +212,7 @@
     "slippage": "Beklenen fiyat ile transferin gerçekleştirildiği gerçek fiyat arasındaki maksimum yüzde fark. Bu değer ayarlardan değiştirilebilir."
   },
   "main": {
+    "allNetworks": "",
     "allTokens": "Tüm varlıklar",
     "bridgeStepDetails": "{{tool}} aracılığıyla {{from}} ağından {{to}} ağına köprüle",
     "checkoutStepDetails": "{{tool}} aracılığıyla alım yap",
@@ -310,10 +311,9 @@
     "tokenOnChainAmount": "",
     "tokenSearch": "",
     "valueLoss": "Değer kaybı",
-    "searchChain": "",
-    "searchChains": "Zincir adına göre ara",
     "searchBridges": "Köprü adına göre ara",
-    "searchExchanges": "Borsa adına göre ara"
+    "searchExchanges": "Borsa adına göre ara",
+    "searchNetwork": ""
   },
   "settings": {
     "appearance": "",

package/src/i18n/uk.json

@@ -212,6 +212,7 @@
     "slippage": "Максимальна процентна різниця між очікуваною ціною і фактичною ціною з якою виконується трансфер. Ця величина може бути змінена в налаштуваннях."
   },
   "main": {
+    "allNetworks": "",
     "allTokens": "Всі токени",
     "bridgeStepDetails": "Бридж з {{from}} до {{to}} через {{tool}}",
     "checkoutStepDetails": "Купівля через {{tool}}",
@@ -310,10 +311,9 @@
     "tokenOnChainAmount": "{{amount, numberExt}} {{tokenSymbol}} на {{chainName}}",
     "tokenSearch": "Шукати за ім'ям або адресою",
     "valueLoss": "Втрата вартості",
-    "searchChain": "Шукати чейн",
-    "searchChains": "Пошук за назвою чейна",
     "searchBridges": "Пошук за назвою моста",
-    "searchExchanges": "Пошук за назвою обмінника"
+    "searchExchanges": "Пошук за назвою обмінника",
+    "searchNetwork": ""
   },
   "settings": {
     "appearance": "Вигляд",

package/src/i18n/vi.json

@@ -212,6 +212,7 @@
     "slippage": ""
   },
   "main": {
+    "allNetworks": "",
     "allTokens": "Tất cả mã thông báo",
     "bridgeStepDetails": "Chuyển từ {{from}} đến {{to}} thông qua {{tool}}",
     "checkoutStepDetails": "Thanh toán thông qua {{tool}}",
@@ -310,10 +311,9 @@
     "tokenOnChainAmount": "",
     "tokenSearch": "",
     "valueLoss": "Bạn sẽ mất",
-    "searchChain": "",
-    "searchChains": "",
     "searchBridges": "",
-    "searchExchanges": ""
+    "searchExchanges": "",
+    "searchNetwork": ""
   },
   "settings": {
     "appearance": "",

package/src/i18n/zh.json

@@ -212,6 +212,7 @@
     "slippage": "真实的成交价位与预设的成交价位间相差的最大百分比。该值可以在设置中更改。"
   },
   "main": {
+    "allNetworks": "",
     "allTokens": "所有代币",
     "bridgeStepDetails": "通过 {{tool}} 把资产从 {{from}} 链跨到 {{to}} 链上",
     "checkoutStepDetails": "通过 {{tool}} 购买",
@@ -310,10 +311,9 @@
     "tokenOnChainAmount": "",
     "tokenSearch": "",
     "valueLoss": "资金损失",
-    "searchChain": "",
-    "searchChains": "搜索链",
     "searchBridges": "搜索跨链桥",
-    "searchExchanges": "搜索交易所"
+    "searchExchanges": "搜索交易所",
+    "searchNetwork": ""
   },
   "settings": {
     "appearance": "",

package/src/pages/SelectTokenPage/SearchTokenInput.tsx

@@ -1,6 +1,7 @@
 import { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { SearchInput } from '../../components/Search/SearchInput.js'
+import { useChainOrderStore } from '../../stores/chains/ChainOrderStore.js'
 import { useFieldActions } from '../../stores/form/useFieldActions.js'
 import { useFieldValues } from '../../stores/form/useFieldValues.js'
 
@@ -8,6 +9,8 @@ export const SearchTokenInput = () => {
   const { t } = useTranslation()
   const [value] = useFieldValues('tokenSearchFilter')
   const { setFieldValue, setAsTouched } = useFieldActions()
+  const [fromChain, toChain] = useFieldValues('fromChain', 'toChain')
+  const isAllNetworks = useChainOrderStore((state) => state.isAllNetworks)
 
   const onChange = useCallback(
     (newValue: string | number | undefined) => {
@@ -32,6 +35,8 @@ export const SearchTokenInput = () => {
 
   return (
     <SearchInput
+      // Reset the search input when a chain or the "All Networks" is changed
+      key={`${fromChain}-${toChain}-${isAllNetworks}`}
       name="tokenSearchFilter"
       placeholder={t('main.tokenSearch')}
       onChange={(e) => onChange((e.target as HTMLInputElement).value)}

package/src/pages/SelectTokenPage/SelectTokenPage.tsx

@@ -92,22 +92,16 @@ type WrappedTokenListProps = {
 const WrappedTokenList = ({ headerRef, formType }: WrappedTokenListProps) => {
   const { navigateBack } = useNavigateBack()
   const listParentRef = useRef<HTMLUListElement | null>(null)
-  const { listHeight, minListHeight } = useListHeight({
+  const { listHeight } = useListHeight({
     listParentRef,
     headerRef,
   })
   return (
-    <Box
-      sx={{
-        height: minListHeight,
-      }}
-    >
-      <TokenList
-        parentRef={listParentRef}
-        height={listHeight}
-        onClick={navigateBack}
-        formType={formType}
-      />
-    </Box>
+    <TokenList
+      parentRef={listParentRef}
+      height={listHeight}
+      onClick={navigateBack}
+      formType={formType}
+    />
   )
 }

package/src/pages/SettingsPage/SettingsCard/SettingCardExpandable.tsx

@@ -37,7 +37,6 @@ export const SettingCardExpandable: React.FC<
         </CardTitleContainer>
         {!expanded && value}
       </CardRowButton>
-      {/** biome-ignore lint/a11y/useSemanticElements: allowed in react */}
       <Collapse
         id={collapseId}
         role="region"

package/src/pages/SettingsPage/SlippageSettings/SlippageSettings.tsx

@@ -1,14 +1,14 @@
 import Percent from '@mui/icons-material/Percent'
 import WarningRounded from '@mui/icons-material/WarningRounded'
-import { Box, debounce, Typography } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 import type { ChangeEventHandler, FocusEventHandler } from 'react'
-import { useCallback, useMemo, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSettingMonitor } from '../../../hooks/useSettingMonitor.js'
 import { useSettings } from '../../../stores/settings/useSettings.js'
 import { useSettingsActions } from '../../../stores/settings/useSettingsActions.js'
 import { defaultSlippage } from '../../../stores/settings/useSettingsStore.js'
-import { formatSlippage } from '../../../utils/format.js'
+import { formatInputAmount, formatSlippage } from '../../../utils/format.js'
 import { BadgedValue } from '../SettingsCard/BadgedValue.js'
 import { SettingCardExpandable } from '../SettingsCard/SettingCardExpandable.js'
 import {
@@ -18,7 +18,8 @@ import {
   SlippageLimitsWarningContainer,
 } from './SlippageSettings.style.js'
 
-const DEFAULT_CUSTOM_INPUT_VALUE = '0.5'
+const defaultSlippageInputValue = '0.5'
+const maxFractionDigits = 5
 
 export const SlippageSettings: React.FC = () => {
   const { t } = useTranslation()
@@ -35,7 +36,7 @@ export const SlippageSettings: React.FC = () => {
 
   const customInputValue =
     !slippage || slippage === defaultSlippage
-      ? DEFAULT_CUSTOM_INPUT_VALUE
+      ? defaultSlippageInputValue
       : slippage
 
   const [inputValue, setInputValue] = useState(customInputValue)
@@ -44,35 +45,37 @@ export const SlippageSettings: React.FC = () => {
     setValue('slippage', defaultSlippage)
   }
 
-  const debouncedSetValue = useMemo(() => debounce(setValue, 500), [setValue])
-
-  const handleInputUpdate: ChangeEventHandler<HTMLInputElement> = useCallback(
-    (event) => {
-      const { value } = event.target
-
-      const formattedValue = formatSlippage(value, defaultValue.current, true)
+  const formatAndSetSlippage = (value: string, returnInitial = false) => {
+    const formattedSlippage = formatSlippage(
+      value,
+      defaultValue.current,
+      returnInitial
+    )
+    const formattedValue =
+      Number(formattedSlippage) === 0 && !returnInitial
+        ? '0'
+        : formatInputAmount(formattedSlippage, maxFractionDigits, returnInitial)
+    const maxLength =
+      Number(formattedValue) < 10
+        ? maxFractionDigits + 2
+        : maxFractionDigits + 3
+    const slicedValue = formattedValue.slice(0, maxLength)
+    setInputValue(slicedValue)
+    setValue('slippage', slicedValue.length ? slicedValue : defaultSlippage)
+  }
 
-      setInputValue(formattedValue)
-      debouncedSetValue(
-        'slippage',
-        formattedValue.length ? formattedValue : defaultSlippage
-      )
-    },
-    [debouncedSetValue]
-  )
+  const handleInputUpdate: ChangeEventHandler<HTMLInputElement> = (event) => {
+    formatAndSetSlippage(event.target.value, true)
+  }
 
   const handleInputFocus: FocusEventHandler<HTMLInputElement> = (event) => {
     setFocused('input')
+    formatAndSetSlippage(event.target.value)
+  }
 
-    const { value } = event.target
-
-    const formattedValue = formatSlippage(value, defaultValue.current)
-    setInputValue(formattedValue)
-
-    setValue(
-      'slippage',
-      formattedValue.length ? formattedValue : defaultSlippage
-    )
+  const handleInputBlur: FocusEventHandler<HTMLInputElement> = (event) => {
+    setFocused(undefined)
+    formatAndSetSlippage(event.target.value)
   }
 
   const badgeColor = isSlippageNotRecommended
@@ -126,7 +129,7 @@ export const SlippageSettings: React.FC = () => {
             onFocus={handleInputFocus}
             value={inputValue}
             autoComplete="off"
-            onBlur={() => setFocused(undefined)}
+            onBlur={handleInputBlur}
           />
         </SettingsFieldSet>
         {isSlippageNotRecommended && (

package/src/pages/TransactionPage/RouteTracker.tsx

@@ -5,7 +5,7 @@ import { useRoutes } from '../../hooks/useRoutes.js'
 import { useRouteExecutionStoreContext } from '../../stores/routes/RouteExecutionStore.js'
 import { useSetExecutableRoute } from '../../stores/routes/useSetExecutableRoute.js'
 
-export interface RouteTrackerProps {
+interface RouteTrackerProps {
   observableRouteId: string
   onChange: Dispatch<SetStateAction<string>>
   onFetching: Dispatch<SetStateAction<boolean>>

package/src/pages/TransactionPage/StatusBottomSheet.tsx

@@ -59,9 +59,11 @@ export const StatusBottomSheet: React.FC<RouteExecution> = ({
   )
 }
 
-export const StatusBottomSheetContent: React.FC<
-  StatusBottomSheetContentProps
-> = ({ status, route, onClose }) => {
+const StatusBottomSheetContent: React.FC<StatusBottomSheetContentProps> = ({
+  status,
+  route,
+  onClose,
+}) => {
   const { t } = useTranslation()
   const { navigateBack, navigate } = useNavigateBack()
   const { setFieldValue } = useFieldActions()

package/src/pages/TransactionPage/TokenValueBottomSheet.tsx

@@ -113,7 +113,7 @@ const TokenValueBottomSheetContent: React.FC<TokenValueBottomSheetProps> = ({
               fontWeight: 600,
             }}
           >
-            {hasRelayerSupport
+            {hasRelayerSupport || !gasCostUSD
               ? t('main.fees.free')
               : t('format.currency', { value: gasCostUSD })}
           </Typography>

package/src/providers/I18nProvider/types.ts

@@ -1,6 +1,6 @@
 import type * as languages from '../../i18n/index.js'
 
-export type PartialResource<T> = T extends object
+type PartialResource<T> = T extends object
   ? {
       [P in keyof T]?: PartialResource<T[P]>
     }
@@ -8,7 +8,7 @@ export type PartialResource<T> = T extends object
 
 export type LanguageKey = keyof typeof languages
 
-export type LanguageResource = typeof languages.en
+type LanguageResource = typeof languages.en
 
 export type LanguageResources =
   | {
@@ -18,7 +18,7 @@ export type LanguageResources =
       [language: string]: PartialResource<LanguageResource>
     }
 
-export type LanguageTranslationResource = {
+type LanguageTranslationResource = {
   [N in 'translation']: PartialResource<LanguageResource>
 }
 

package/src/providers/WalletProvider/EVMProvider.tsx

@@ -7,7 +7,7 @@ import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
 import { EVMBaseProvider } from './EVMBaseProvider.js'
 import { EVMExternalContext } from './EVMExternalContext.js'
 
-export function useInWagmiContext(): boolean {
+function useInWagmiContext(): boolean {
   const { chains } = useWidgetConfig()
   const context = useContext(WagmiContext)
 

package/src/providers/WalletProvider/SVMProvider.tsx

@@ -7,7 +7,7 @@ import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
 import { SVMBaseProvider } from './SVMBaseProvider.js'
 import { SVMExternalContext } from './SVMExternalContext.js'
 
-export function useInSolanaContext(): boolean {
+function useInSolanaContext(): boolean {
   const { chains } = useWidgetConfig()
   const context = useContext(ConnectionContext)
   return (

package/src/providers/WalletProvider/SuiProvider.tsx

@@ -7,7 +7,7 @@ import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
 import { SuiBaseProvider } from './SuiBaseProvider.js'
 import { SuiExternalContext } from './SuiExternalContext.js'
 
-export function useInSuiContext(): boolean {
+function useInSuiContext(): boolean {
   const { chains } = useWidgetConfig()
   const context = useContext(SuiClientContext)
 

package/src/providers/WalletProvider/UTXOProvider.tsx

@@ -7,7 +7,7 @@ import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
 import { UTXOBaseProvider } from './UTXOBaseProvider.js'
 import { UTXOExternalContext } from './UTXOExternalContext.js'
 
-export function useInBigmiContext(): boolean {
+function useInBigmiContext(): boolean {
   const { chains } = useWidgetConfig()
   const context = useContext(BigmiContext)
 

package/src/providers/WalletProvider/WalletProvider.tsx

@@ -25,7 +25,7 @@ export const WalletProvider: FC<PropsWithChildren> = ({ children }) => {
   )
 }
 
-export const WalletMenuProvider: FC<PropsWithChildren> = ({ children }) => {
+const WalletMenuProvider: FC<PropsWithChildren> = ({ children }) => {
   const { walletConfig } = useWidgetConfig()
   const { i18n } = useTranslation()
   const { internalChainTypes } = useExternalWalletProvider()

package/src/stores/bookmarks/BookmarkStore.tsx

@@ -5,7 +5,7 @@ import type { PersistStoreProviderProps } from '../types.js'
 import { createBookmarksStore } from './createBookmarkStore.js'
 import type { BookmarkState, BookmarkStore } from './types.js'
 
-export const BookmarkStoreContext = createContext<BookmarkStore | null>(null)
+const BookmarkStoreContext = createContext<BookmarkStore | null>(null)
 
 export const BookmarkStoreProvider: React.FC<PersistStoreProviderProps> = ({
   children,

package/src/stores/chains/ChainOrderStore.tsx

@@ -12,13 +12,9 @@ import type { PersistStoreProviderProps } from '../types.js'
 import { createChainOrderStore } from './createChainOrderStore.js'
 import type { ChainOrderState } from './types.js'
 
-export type ChainOrderStore = UseBoundStoreWithEqualityFn<
-  StoreApi<ChainOrderState>
->
+type ChainOrderStore = UseBoundStoreWithEqualityFn<StoreApi<ChainOrderState>>
 
-export const ChainOrderStoreContext = createContext<ChainOrderStore | null>(
-  null
-)
+const ChainOrderStoreContext = createContext<ChainOrderStore | null>(null)
 
 export function ChainOrderStoreProvider({
   children,
@@ -105,7 +101,7 @@ export function ChainOrderStoreProvider({
   )
 }
 
-export function useChainOrderStoreContext() {
+function useChainOrderStoreContext() {
   const useStore = useContext(ChainOrderStoreContext)
   if (!useStore) {
     throw new Error(