@lifi/widget 3.32.1 → 3.33.0

package/src/pages/TransactionDetailsPage/TransferIdCard.tsx

@@ -5,28 +5,21 @@ import { useTranslation } from 'react-i18next'
 import { Card } from '../../components/Card/Card.js'
 import { CardIconButton } from '../../components/Card/CardIconButton.js'
 import { CardTitle } from '../../components/Card/CardTitle.js'
-import { useExplorer } from '../../hooks/useExplorer.js'
 
 interface TransferIdCardProps {
   transferId: string
+  txLink?: string
 }
 
-const getTxHash = (transferId: string) =>
-  transferId.indexOf('_') !== -1
-    ? transferId.substring(0, transferId.indexOf('_'))
-    : transferId
-
-export const TransferIdCard = ({ transferId }: TransferIdCardProps) => {
+export const TransferIdCard = ({ transferId, txLink }: TransferIdCardProps) => {
   const { t } = useTranslation()
-  const { getTransactionLink } = useExplorer()
 
   const copyTransferId = async () => {
     await navigator.clipboard.writeText(transferId)
   }
 
   const openTransferIdInExplorer = () => {
-    const txHash = getTxHash(transferId)
-    window.open(getTransactionLink({ txHash }), '_blank')
+    window.open(txLink, '_blank')
   }
 
   return (
@@ -49,9 +42,11 @@ export const TransferIdCard = ({ transferId }: TransferIdCardProps) => {
           <CardIconButton size="small" onClick={copyTransferId}>
             <ContentCopyRounded fontSize="inherit" />
           </CardIconButton>
-          <CardIconButton size="small" onClick={openTransferIdInExplorer}>
-            <OpenInNew fontSize="inherit" />
-          </CardIconButton>
+          {txLink ? (
+            <CardIconButton size="small" onClick={openTransferIdInExplorer}>
+              <OpenInNew fontSize="inherit" />
+            </CardIconButton>
+          ) : null}
         </Box>
       </Box>
       <Typography

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`)

package/src/stores/chains/createChainOrderStore.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 { widgetEvents } from '../../hooks/useWidgetEvents.js'
 import { WidgetEvent } from '../../types/events.js'
 import type { PersistStoreProps } from '../types.js'
@@ -19,7 +18,7 @@ const defaultChainState = {
 }
 
 export const createChainOrderStore = ({ namePrefix }: PersistStoreProps) =>
-  createWithEqualityFn<ChainOrderState>(
+  create<ChainOrderState>()(
     persist(
       (set, get) => ({
         chainOrder: defaultChainState,
@@ -126,6 +125,5 @@ export const createChainOrderStore = ({ namePrefix }: PersistStoreProps) =>
           pinnedChains: state.pinnedChains,
         }),
       }
-    ) as StateCreator<ChainOrderState, [], [], ChainOrderState>,
-    Object.is
+    )
   )

package/src/stores/chains/useChainOrder.ts

@@ -1,3 +1,4 @@
+import { useMemo } from 'react'
 import type { FormType } from '../form/types.js'
 import { useChainOrderStore } from './ChainOrderStore.js'
 import { maxChainsToOrder } from './createChainOrderStore.js'
@@ -5,8 +6,15 @@ import { maxChainsToOrder } from './createChainOrderStore.js'
 export const useChainOrder = (
   type: FormType
 ): [number[], (chainId: number, type: FormType) => void] => {
-  return useChainOrderStore((state) => [
-    state.chainOrder[type].slice(0, maxChainsToOrder),
+  const [chainOrder, setChain] = useChainOrderStore((state) => [
+    state.chainOrder[type],
     state.setChain,
   ])
+
+  const limitedChainOrder = useMemo(
+    () => chainOrder.slice(0, maxChainsToOrder),
+    [chainOrder]
+  )
+
+  return [limitedChainOrder, setChain]
 }

package/src/stores/form/createFormStore.ts

@@ -1,4 +1,4 @@
-import { createWithEqualityFn } from 'zustand/traditional'
+import { create } from 'zustand'
 
 import type {
   DefaultValues,
@@ -68,7 +68,7 @@ const mergeDefaultFormValues = (
   )
 
 export const createFormStore = (defaultValues?: DefaultValues) =>
-  createWithEqualityFn<FormValuesState>((set, get) => {
+  create<FormValuesState>((set, get) => {
     const _defaultValues = valuesToFormValues({
       ...formDefaultValues,
       ...defaultValues,
@@ -231,4 +231,4 @@ export const createFormStore = (defaultValues?: DefaultValues) =>
         }))
       },
     }
-  }, Object.is)
+  })

package/src/stores/header/useHeaderStore.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext, useRef } from 'react'
+import { create } from 'zustand'
 import { useShallow } from 'zustand/shallow'
-import { createWithEqualityFn } from 'zustand/traditional'
 import type { PersistStoreProviderProps } from '../types.js'
 import type { HeaderState, HeaderStore } from './types.js'
 
@@ -55,36 +55,33 @@ export function useSetHeaderHeight() {
 }
 
 const createHeaderStore = () =>
-  createWithEqualityFn<HeaderState>(
-    (set, get) => ({
-      headerHeight: 108, // a basic default height
-      setAction: (element) => {
-        set(() => ({
-          element,
-        }))
-        return get().removeAction
-      },
-      setTitle: (title) => {
-        set(() => ({
-          title,
-        }))
-        return get().removeTitle
-      },
-      removeAction: () => {
-        set(() => ({
-          element: null,
-        }))
-      },
-      removeTitle: () => {
-        set(() => ({
-          title: undefined,
-        }))
-      },
-      setHeaderHeight: (headerHeight) => {
-        set(() => ({
-          headerHeight,
-        }))
-      },
-    }),
-    Object.is
-  )
+  create<HeaderState>((set, get) => ({
+    headerHeight: 108, // a basic default height
+    setAction: (element) => {
+      set(() => ({
+        element,
+      }))
+      return get().removeAction
+    },
+    setTitle: (title) => {
+      set(() => ({
+        title,
+      }))
+      return get().removeTitle
+    },
+    removeAction: () => {
+      set(() => ({
+        element: null,
+      }))
+    },
+    removeTitle: () => {
+      set(() => ({
+        title: undefined,
+      }))
+    },
+    setHeaderHeight: (headerHeight) => {
+      set(() => ({
+        headerHeight,
+      }))
+    },
+  }))

package/src/stores/routes/createRouteExecutionStore.ts

@@ -1,7 +1,6 @@
 import type { Route, RouteExtended } from '@lifi/sdk'
-import type { StateCreator } from 'zustand'
+import { create } from 'zustand'
 import { persist } from 'zustand/middleware'
-import { createWithEqualityFn } from 'zustand/traditional'
 import { hasEnumFlag } from '../../utils/enum.js'
 import type { PersistStoreProps } from '../types.js'
 import type { RouteExecutionState } from './types.js'
@@ -14,7 +13,7 @@ import {
 } from './utils.js'
 
 export const createRouteExecutionStore = ({ namePrefix }: PersistStoreProps) =>
-  createWithEqualityFn<RouteExecutionState>(
+  create<RouteExecutionState>()(
     persist(
       (set, get) => ({
         routes: {},
@@ -150,6 +149,5 @@ export const createRouteExecutionStore = ({ namePrefix }: PersistStoreProps) =>
           return state
         },
       }
-    ) as StateCreator<RouteExecutionState, [], [], RouteExecutionState>,
-    Object.is
+    )
   )

package/src/stores/settings/SettingsStore.tsx

@@ -0,0 +1,45 @@
+import {
+  createContext,
+  type PropsWithChildren,
+  useContext,
+  useRef,
+} from 'react'
+import type { StoreApi } from 'zustand'
+import { useShallow } from 'zustand/shallow'
+import type { UseBoundStoreWithEqualityFn } from 'zustand/traditional'
+import { createSettingsStore } from './createSettingsStore.js'
+import type { SettingsState, SettingsStoreProviderProps } from './types.js'
+
+type SettingsStore = UseBoundStoreWithEqualityFn<StoreApi<SettingsState>>
+
+const SettingsStoreContext = createContext<SettingsStore | null>(null)
+
+export const SettingsStoreProvider = ({
+  children,
+  config,
+}: PropsWithChildren<SettingsStoreProviderProps>) => {
+  const storeRef = useRef<SettingsStore>(null)
+  if (!storeRef.current) {
+    storeRef.current = createSettingsStore(config)
+  }
+  return (
+    <SettingsStoreContext.Provider value={storeRef.current}>
+      {children}
+    </SettingsStoreContext.Provider>
+  )
+}
+
+export function useSettingsStoreContext() {
+  const useStore = useContext(SettingsStoreContext)
+  if (!useStore) {
+    throw new Error(
+      'You forgot to wrap your component in SettingsStoreContext.'
+    )
+  }
+  return useStore
+}
+
+export function useSettingsStore<T>(selector: (state: SettingsState) => T): T {
+  const useStore = useSettingsStoreContext()
+  return useStore(useShallow(selector))
+}