@lifi/widget 3.32.2 → 3.33.0

package/src/AppProvider.tsx

@@ -16,6 +16,7 @@ import {
 } from './providers/WidgetProvider/WidgetProvider.js'
 import { URLSearchParamsBuilder } from './stores/form/URLSearchParamsBuilder.js'
 import { StoreProvider } from './stores/StoreProvider.js'
+import { SettingsStoreProvider } from './stores/settings/SettingsStore.js'
 import type { WidgetConfigProps } from './types/widget.js'
 
 export const AppProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
@@ -25,17 +26,19 @@ export const AppProvider: React.FC<PropsWithChildren<WidgetConfigProps>> = ({
 }) => {
   return (
     <QueryClientProvider>
-      <WidgetProvider config={config}>
-        <I18nProvider>
-          <ThemeProvider>
-            <WalletProvider>
-              <StoreProvider config={config} formRef={formRef}>
-                <AppRouter>{children}</AppRouter>
-              </StoreProvider>
-            </WalletProvider>
-          </ThemeProvider>
-        </I18nProvider>
-      </WidgetProvider>
+      <SettingsStoreProvider config={config}>
+        <WidgetProvider config={config}>
+          <I18nProvider>
+            <ThemeProvider>
+              <WalletProvider>
+                <StoreProvider config={config} formRef={formRef}>
+                  <AppRouter>{children}</AppRouter>
+                </StoreProvider>
+              </WalletProvider>
+            </ThemeProvider>
+          </I18nProvider>
+        </WidgetProvider>
+      </SettingsStoreProvider>
     </QueryClientProvider>
   )
 }

package/src/components/Header/NavigationHeader.tsx

@@ -22,7 +22,10 @@ export const NavigationHeader: React.FC = () => {
     useWidgetConfig()
   const { navigateBack } = useNavigateBack()
   const { account } = useAccount()
-  const { element, title } = useHeaderStore((state) => state)
+  const [element, title] = useHeaderStore((state) => [
+    state.element,
+    state.title,
+  ])
   const { pathname } = useLocation()
 
   const cleanedPathname = pathname.endsWith('/')

package/src/components/Tools/Tools.tsx

@@ -1,8 +1,8 @@
 import type { ToolsResponse } from '@lifi/sdk'
 import { useMemo, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
+import { useSettingsStore } from '../../stores/settings/SettingsStore.js'
 import { useSettingsActions } from '../../stores/settings/useSettingsActions.js'
-import { useSettingsStore } from '../../stores/settings/useSettingsStore.js'
 import { SearchList } from '../Search/SearchInput.style.js'
 import { SearchNotFound } from '../Search/SearchNotFound.js'
 import { ToolItem } from './ToolItem.js'

package/src/config/version.ts

@@ -1,2 +1,2 @@
 export const name = '@lifi/widget'
-export const version = '3.32.2'
+export const version = '3.33.0'

package/src/hooks/useHeader.ts

@@ -3,7 +3,10 @@ import { useEffect } from 'react'
 import { useHeaderStore } from '../stores/header/useHeaderStore.js'
 
 export function useHeader(title: string, action?: ReactNode) {
-  const { setTitle, setAction } = useHeaderStore((state) => state)
+  const [setTitle, setAction] = useHeaderStore((state) => [
+    state.setTitle,
+    state.setAction,
+  ])
 
   useEffect(() => {
     const removeTitle = setTitle(title)

package/src/hooks/useLanguages.ts

@@ -1,31 +1,89 @@
+import { useCallback, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
+import { allLanguages } from '../providers/I18nProvider/constants.js'
+import { loadLocale } from '../providers/I18nProvider/i18n.js'
+import type {
+  LanguageKey,
+  LanguageResource,
+} from '../providers/I18nProvider/types.js'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { useSettings } from '../stores/settings/useSettings.js'
 import { useSettingsActions } from '../stores/settings/useSettingsActions.js'
+import { getConfigItemSets, isItemAllowedForSets } from '../utils/item.js'
 
 export const useLanguages = () => {
-  const { t, i18n } = useTranslation()
-  const { languages } = useWidgetConfig()
+  const { i18n } = useTranslation()
+  const { languages: languagesConfig, languageResources } = useWidgetConfig()
   const { language } = useSettings(['language'])
-  const { setValue } = useSettingsActions()
+  const { setValues } = useSettingsActions()
 
-  const sortedLanguages = Object.keys(i18n.store.data).sort()
+  const sortedLanguages = useMemo(() => {
+    const loadedLanguageKeys = Object.keys(i18n.store.data)
+    // NB: custom language resources added statically to i18n might not exist in allLanguages (language files)
+    const allLanguagesWithCustom = [
+      ...new Set([...allLanguages, ...loadedLanguageKeys]),
+    ]
+    let supportedLanguages: (LanguageKey | string)[] = []
+    if (!languagesConfig) {
+      supportedLanguages = allLanguagesWithCustom
+    } else {
+      const languagesConfigSets = getConfigItemSets(
+        languagesConfig,
+        (languages) => new Set(languages)
+      )
+      supportedLanguages = allLanguagesWithCustom.filter((language) =>
+        isItemAllowedForSets(language, languagesConfigSets)
+      )
+    }
+    return supportedLanguages.sort()
+  }, [languagesConfig, i18n.store.data])
 
-  const selectedLanguageCode = sortedLanguages.includes(
-    language || i18n.resolvedLanguage || ''
+  const handleLanguageChange = useCallback(
+    async (languageKey: string) => {
+      // Cache the language resource to prevent blinking
+      // after switching languages and reloading the page.
+      let newLanguageCache: LanguageResource | undefined
+      if (
+        !i18n.hasResourceBundle(languageKey, 'translation') &&
+        languageKey !== 'en'
+      ) {
+        await loadLocale(
+          languageKey as LanguageKey,
+          languageResources?.[languageKey as LanguageKey]
+        ).then((languageResource) => {
+          i18n.addResourceBundle(
+            languageKey,
+            'translation',
+            languageResource,
+            true,
+            true
+          )
+          newLanguageCache = languageResource
+        })
+      } else {
+        // If the language is already loaded, just cache the existing resource
+        newLanguageCache = i18n.getResourceBundle(languageKey, 'translation')
+      }
+
+      // Set the new language and language cache to the settings store.
+      setValues({ language: languageKey, languageCache: newLanguageCache })
+
+      // Update the i18n instance to the new language.
+      if (languageKey !== i18n.language) {
+        await i18n.changeLanguage(languageKey)
+      }
+    },
+    [i18n, languageResources, setValues]
   )
-    ? language || i18n.resolvedLanguage
-    : languages?.default || languages?.allow?.[0]
+
+  const selectedLanguage = language || i18n.resolvedLanguage || ''
+  const selectedLanguageCode = sortedLanguages.includes(selectedLanguage)
+    ? selectedLanguage
+    : languagesConfig?.default || 'en'
 
   return {
     availableLanguages: sortedLanguages,
     selectedLanguageCode: selectedLanguageCode,
-    selectedLanguageDisplayName: t('language.name', {
-      lng: selectedLanguageCode,
-    }),
-    setLanguageWithCode: (code: string) => {
-      setValue('language', code)
-      i18n.changeLanguage(code)
-    },
+    setLanguageWithCode: handleLanguageChange,
   }
 }

package/src/hooks/useRoutes.ts

@@ -16,8 +16,8 @@ import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
 import { useFieldValues } from '../stores/form/useFieldValues.js'
 import { useIntermediateRoutesStore } from '../stores/routes/useIntermediateRoutesStore.js'
 import { useSetExecutableRoute } from '../stores/routes/useSetExecutableRoute.js'
+import { defaultSlippage } from '../stores/settings/createSettingsStore.js'
 import { useSettings } from '../stores/settings/useSettings.js'
-import { defaultSlippage } from '../stores/settings/useSettingsStore.js'
 import { WidgetEvent } from '../types/events.js'
 import { getChainTypeFromAddress } from '../utils/chainType.js'
 import { getQueryKey } from '../utils/queries.js'

package/src/hooks/useSettingMonitor.ts

@@ -1,9 +1,7 @@
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
+import { defaultConfigurableSettings } from '../stores/settings/createSettingsStore.js'
+import { useSettingsStore } from '../stores/settings/SettingsStore.js'
 import { useSettingsActions } from '../stores/settings/useSettingsActions.js'
-import {
-  defaultConfigurableSettings,
-  useSettingsStore,
-} from '../stores/settings/useSettingsStore.js'
 import { useTools } from './useTools.js'
 
 export const useSettingMonitor = () => {

package/src/hooks/useTokenBalances.ts

@@ -72,7 +72,7 @@ export const useTokenBalances = (
   const { processedTokens, withCategories } = useMemo(() => {
     return processTokenBalances(
       isBalanceLoading,
-      isAllNetworks ?? false,
+      isAllNetworks || !!search,
       configTokens,
       selectedChainId,
       displayedTokensList,
@@ -85,6 +85,7 @@ export const useTokenBalances = (
     selectedChainId,
     displayedTokensList,
     displayedTokensWithBalances,
+    search,
   ])
 
   return {

package/src/hooks/useTools.ts

@@ -1,12 +1,14 @@
 import { getTools, type ToolsResponse } from '@lifi/sdk'
 import { useQuery } from '@tanstack/react-query'
 import { useWidgetConfig } from '../providers/WidgetProvider/WidgetProvider.js'
-import { settingsStore } from '../stores/settings/useSettingsStore.js'
+import { useSettingsStoreContext } from '../stores/settings/SettingsStore.js'
 import { getConfigItemSets, isItemAllowedForSets } from '../utils/item.js'
 import { getQueryKey } from '../utils/queries.js'
 
 export const useTools = () => {
   const { bridges, exchanges, keyPrefix } = useWidgetConfig()
+  const settingsStore = useSettingsStoreContext()
+
   const { data } = useQuery({
     queryKey: [
       getQueryKey('tools', keyPrefix),

package/src/pages/LanguagesPage.tsx

@@ -6,6 +6,7 @@ import { PageContainer } from '../components/PageContainer.js'
 import { SettingsListItemButton } from '../components/SettingsListItemButton.js'
 import { useHeader } from '../hooks/useHeader.js'
 import { useLanguages } from '../hooks/useLanguages.js'
+import { languageNames } from '../providers/I18nProvider/constants.js'
 
 export const LanguagesPage: React.FC = () => {
   const { t } = useTranslation()
@@ -33,7 +34,15 @@ export const LanguagesPage: React.FC = () => {
             key={language}
             onClick={() => setLanguageWithCode(language)}
           >
-            <ListItemText primary={t('language.name', { lng: language })} />
+            <ListItemText
+              primary={
+                languageNames[language as keyof typeof languageNames] ||
+                t('language.name', {
+                  lng: language,
+                }) ||
+                language
+              }
+            />
             {selectedLanguageCode === language && <Check color="primary" />}
           </SettingsListItemButton>
         ))}

package/src/pages/SelectEnabledToolsPage.tsx

@@ -15,8 +15,8 @@ import { useDefaultElementId } from '../hooks/useDefaultElementId.js'
 import { useHeader } from '../hooks/useHeader.js'
 import { useScrollableContainer } from '../hooks/useScrollableContainer.js'
 import { useTools } from '../hooks/useTools.js'
+import { useSettingsStore } from '../stores/settings/SettingsStore.js'
 import { useSettingsActions } from '../stores/settings/useSettingsActions.js'
-import { useSettingsStore } from '../stores/settings/useSettingsStore.js'
 
 interface SelectAllCheckboxProps {
   allCheckboxesSelected: boolean

package/src/pages/SettingsPage/BridgeAndExchangeSettings.tsx

@@ -5,7 +5,7 @@ import { useNavigate } from 'react-router-dom'
 import { CardButton } from '../../components/Card/CardButton.js'
 import { useSettingMonitor } from '../../hooks/useSettingMonitor.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
-import { useSettingsStore } from '../../stores/settings/useSettingsStore.js'
+import { useSettingsStore } from '../../stores/settings/SettingsStore.js'
 import { HiddenUI } from '../../types/widget.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
 import { BadgedValue } from './SettingsCard/BadgedValue.js'

package/src/pages/SettingsPage/LanguageSetting.tsx

@@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom'
 import { CardButton } from '../../components/Card/CardButton.js'
 import { CardValue } from '../../components/Card/CardButton.style.js'
 import { useLanguages } from '../../hooks/useLanguages.js'
+import { languageNames } from '../../providers/I18nProvider/constants.js'
 import { useWidgetConfig } from '../../providers/WidgetProvider/WidgetProvider.js'
 import { HiddenUI } from '../../types/widget.js'
 import { navigationRoutes } from '../../utils/navigationRoutes.js'
@@ -12,7 +13,7 @@ export const LanguageSetting: React.FC = () => {
   const { t } = useTranslation()
   const navigate = useNavigate()
   const { hiddenUI } = useWidgetConfig()
-  const { selectedLanguageDisplayName } = useLanguages()
+  const { selectedLanguageCode } = useLanguages()
 
   if (hiddenUI?.includes(HiddenUI.Language)) {
     return null
@@ -28,7 +29,13 @@ export const LanguageSetting: React.FC = () => {
       icon={<Language />}
       title={t('language.title')}
     >
-      <CardValue>{selectedLanguageDisplayName}</CardValue>
+      <CardValue>
+        {languageNames[selectedLanguageCode as keyof typeof languageNames] ||
+          t('language.name', {
+            lng: selectedLanguageCode,
+          }) ||
+          selectedLanguageCode}
+      </CardValue>
     </CardButton>
   )
 }

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

@@ -5,9 +5,9 @@ import type { ChangeEventHandler, FocusEventHandler } from 'react'
 import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { useSettingMonitor } from '../../../hooks/useSettingMonitor.js'
+import { defaultSlippage } from '../../../stores/settings/createSettingsStore.js'
 import { useSettings } from '../../../stores/settings/useSettings.js'
 import { useSettingsActions } from '../../../stores/settings/useSettingsActions.js'
-import { defaultSlippage } from '../../../stores/settings/useSettingsStore.js'
 import { formatInputAmount, formatSlippage } from '../../../utils/format.js'
 import { BadgedValue } from '../SettingsCard/BadgedValue.js'
 import { SettingCardExpandable } from '../SettingsCard/SettingCardExpandable.js'

package/src/providers/I18nProvider/I18nProvider.tsx

@@ -1,67 +1,82 @@
-import type { i18n } from 'i18next'
-import { createInstance } from 'i18next'
-import { useMemo } from 'react'
+import { createInstance, type i18n } from 'i18next'
+import { useMemo, useRef } from 'react'
 import { I18nextProvider } from 'react-i18next'
-import * as supportedLanguages from '../../i18n/index.js'
 import { useSettings } from '../../stores/settings/useSettings.js'
 import { compactNumberFormatter } from '../../utils/compactNumberFormatter.js'
 import { currencyExtendedFormatter } from '../../utils/currencyExtendedFormatter.js'
-import { deepMerge } from '../../utils/deepMerge.js'
-import { getConfigItemSets, isItemAllowedForSets } from '../../utils/item.js'
 import { percentFormatter } from '../../utils/percentFormatter.js'
 import { useWidgetConfig } from '../WidgetProvider/WidgetProvider.js'
-import type { LanguageKey, LanguageTranslationResources } from './types.js'
+import { allLanguages } from './constants.js'
+import { enResource } from './enResource.js'
+import { mergeWithLanguageResources } from './i18n.js'
+import type { LanguageKey, LanguageResource, PartialResource } from './types.js'
 
 export const I18nProvider: React.FC<React.PropsWithChildren> = ({
   children,
 }) => {
-  const { languageResources, languages } = useWidgetConfig()
-  const { language } = useSettings(['language'])
+  const { languages, languageResources } = useWidgetConfig()
+  const { language, languageCache } = useSettings(['language', 'languageCache'])
+  const i18nInstanceRef = useRef<i18n | null>(null)
 
-  const i18n = useMemo(() => {
-    const languagesConfigSets = getConfigItemSets(
-      languages,
-      (languages) => new Set(languages)
-    )
-    let resources = (Object.keys(supportedLanguages) as LanguageKey[])
-      .filter((lng) => isItemAllowedForSets(lng, languagesConfigSets))
-      .reduce((resources, lng) => {
-        resources[lng] = {
-          translation: languageResources?.[lng]
-            ? (deepMerge(
-                // biome-ignore lint/performance/noDynamicNamespaceImportAccess: TODO: make it dynamic
-                supportedLanguages[lng],
-                languageResources[lng]
-              ) as LanguageTranslationResources)
-            : // biome-ignore lint/performance/noDynamicNamespaceImportAccess: TODO: make it dynamic
-              supportedLanguages[lng],
-        }
-        return resources
-      }, {} as LanguageTranslationResources)
-
-    if (languageResources) {
-      resources = Object.keys(languageResources).reduce((resources, lng) => {
-        if (!resources[lng]) {
-          resources[lng] = {
-            translation: languageResources[lng as LanguageKey]!,
-          }
-        }
-        return resources
-      }, resources)
+  const i18nInstance = useMemo(() => {
+    if (i18nInstanceRef.current) {
+      // Update i18n instance with language and language cache updates
+      if (language && languageCache && language !== 'en') {
+        i18nInstanceRef.current.addResourceBundle(
+          language,
+          'translation',
+          languageCache,
+          true,
+          true
+        )
+      }
+      return i18nInstanceRef.current
     }
 
+    // Custom language resources (of non-default languages) are added statically.
+    // If custom language resources extend existing languages, they are merged with dynamically loaded resources.
+    const customLanguageKeys = languageResources
+      ? Object.keys(languageResources).filter(
+          (key: string) => !allLanguages.includes(key as LanguageKey)
+        )
+      : []
+    const initialLanguage = language || languages?.default
     const i18n = createInstance({
-      lng: languages?.default || language,
-      fallbackLng: resources.en
-        ? 'en'
-        : languages?.default ||
-          languages?.allow?.[0] ||
-          Object.keys(resources)?.[0],
+      lng: initialLanguage,
+      fallbackLng: 'en',
       lowerCaseLng: true,
-      interpolation: {
-        escapeValue: false,
+      interpolation: { escapeValue: false },
+      resources: {
+        en: {
+          translation: mergeWithLanguageResources(
+            enResource,
+            languageResources?.en
+          ),
+        },
+        ...(initialLanguage &&
+          initialLanguage !== 'en' &&
+          languageCache && {
+            [initialLanguage]: {
+              translation: languageCache,
+            },
+          }),
+        // Add non-existing custom language resources
+        ...customLanguageKeys.reduce(
+          (acc, key) => {
+            const customResource = languageResources?.[key as LanguageKey]
+            if (customResource) {
+              acc[key] = {
+                translation: customResource,
+              }
+            }
+            return acc
+          },
+          {} as Record<
+            string,
+            { translation: PartialResource<LanguageResource> }
+          >
+        ),
       },
-      resources,
       detection: {
         caches: [],
       },
@@ -73,9 +88,9 @@ export const I18nProvider: React.FC<React.PropsWithChildren> = ({
     i18n.services.formatter?.addCached('numberExt', compactNumberFormatter)
     i18n.services.formatter?.addCached('currencyExt', currencyExtendedFormatter)
     i18n.services.formatter?.addCached('percent', percentFormatter)
-
+    i18nInstanceRef.current = i18n
     return i18n
-  }, [language, languageResources, languages])
+  }, [language, languageResources, languages?.default, languageCache])
 
-  return <I18nextProvider i18n={i18n as i18n}>{children}</I18nextProvider>
+  return <I18nextProvider i18n={i18nInstance}>{children}</I18nextProvider>
 }

package/src/providers/I18nProvider/constants.ts

@@ -0,0 +1,41 @@
+import type { LanguageKey } from './types.js'
+
+export const allLanguages: LanguageKey[] = [
+  'en',
+  'es',
+  'fr',
+  'de',
+  'it',
+  'pt',
+  'ja',
+  'ko',
+  'zh',
+  'hi',
+  'bn',
+  'th',
+  'vi',
+  'tr',
+  'uk',
+  'id',
+  'pl',
+]
+
+export const languageNames: Record<LanguageKey, string> = {
+  en: 'English',
+  es: 'Español',
+  fr: 'Français',
+  de: 'Deutsch',
+  it: 'Italiano',
+  pt: 'Português',
+  ja: '日本語',
+  ko: '한국어',
+  zh: '中文',
+  hi: 'हिन्दी',
+  bn: 'বাংলা',
+  th: 'ไทย',
+  vi: 'Tiếng Việt',
+  tr: 'Türkçe',
+  uk: 'Українська',
+  id: 'Bahasa Indonesia',
+  pl: 'Polski',
+}

package/src/providers/I18nProvider/enResource.ts

@@ -0,0 +1,4 @@
+import en from '../../i18n/en.json' with { type: 'json' }
+
+// Used as a fallback language resource
+export { en as enResource }

package/src/providers/I18nProvider/i18n.ts

@@ -0,0 +1,26 @@
+import { deepMerge } from '../../utils/deepMerge.js'
+import type { LanguageKey, LanguageResource, PartialResource } from './types.js'
+
+// Dynamically import the JSON file for the specified language
+export async function loadLocale(
+  lng: LanguageKey,
+  customLanguageResource?: PartialResource<LanguageResource>
+) {
+  let languageResource: LanguageResource
+  try {
+    const languageResourceModule = await import(`../../i18n/${lng}.json`)
+    languageResource = languageResourceModule.default as LanguageResource
+  } catch {
+    languageResource = {} as LanguageResource
+  }
+  return mergeWithLanguageResources(languageResource, customLanguageResource)
+}
+
+export function mergeWithLanguageResources(
+  languageResource: LanguageResource,
+  customLanguageResource?: PartialResource<LanguageResource>
+) {
+  return customLanguageResource
+    ? deepMerge(languageResource, customLanguageResource)
+    : languageResource
+}

package/src/providers/I18nProvider/types.ts

@@ -1,14 +1,31 @@
-import type * as languages from '../../i18n/index.js'
+import type { enResource } from './enResource.js'
 
-type PartialResource<T> = T extends object
+export type PartialResource<T> = T extends object
   ? {
       [P in keyof T]?: PartialResource<T[P]>
     }
   : T
 
-export type LanguageKey = keyof typeof languages
+export type LanguageKey =
+  | 'en'
+  | 'es'
+  | 'fr'
+  | 'de'
+  | 'it'
+  | 'pt'
+  | 'ja'
+  | 'ko'
+  | 'zh'
+  | 'hi'
+  | 'bn'
+  | 'th'
+  | 'vi'
+  | 'tr'
+  | 'uk'
+  | 'id'
+  | 'pl'
 
-type LanguageResource = typeof languages.en
+export type LanguageResource = typeof enResource
 
 export type LanguageResources =
   | {
@@ -17,11 +34,3 @@ export type LanguageResources =
   | {
       [language: string]: PartialResource<LanguageResource>
     }
-
-type LanguageTranslationResource = {
-  [N in 'translation']: PartialResource<LanguageResource>
-}
-
-export type LanguageTranslationResources = {
-  [language: string]: LanguageTranslationResource
-}

package/src/providers/WalletProvider/SDKProviders.tsx

@@ -38,7 +38,8 @@ export const SDKProviders = () => {
     if (!hasConfiguredEVMProvider) {
       providers.push(
         EVM({
-          getWalletClient: () => getWagmiConnectorClient(wagmiConfig),
+          getWalletClient: () =>
+            getWagmiConnectorClient(wagmiConfig, { assertChainId: false }),
           switchChain: async (chainId: number) => {
             const chain = await switchChain(wagmiConfig, { chainId })
             return getWagmiConnectorClient(wagmiConfig, { chainId: chain.id })

package/src/stores/bookmarks/createBookmarkStore.ts

@@ -1,6 +1,5 @@
-import type { StateCreator } from 'zustand'
+import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
-import { createWithEqualityFn } from 'zustand/traditional'
 import type { ToAddress } from '../../types/widget.js'
 import type { PersistStoreProps } from '../types.js'
 import type { BookmarkState } from './types.js'
@@ -14,7 +13,7 @@ export const createBookmarksStore = ({
   namePrefix,
   toAddress,
 }: PersistBookmarkProps) =>
-  createWithEqualityFn<BookmarkState>(
+  create<BookmarkState>()(
     persist(
       (set, get) => ({
         selectedBookmark: toAddress,
@@ -76,6 +75,5 @@ export const createBookmarksStore = ({
           }
         },
       }
-    ) as StateCreator<BookmarkState, [], [], BookmarkState>,
-    Object.is
+    )
   )

package/src/stores/chains/ChainOrderStore.tsx

@@ -64,7 +64,9 @@ export function ChainOrderStoreProvider({
 
         // Show "All networks" button if there are multiple networks
         const showAllNetworks = filteredChains.length > 1
-        storeRef.current?.getState().setIsAllNetworks(showAllNetworks, key)
+        if (!showAllNetworks) {
+          storeRef.current?.getState().setIsAllNetworks(false, key)
+        }
         storeRef.current?.getState().setShowAllNetworks(showAllNetworks, key)
 
         const [chainValue] = getFieldValues(`${key}Chain`)