fix: isolate i18next instance

lifinance · Oct 12, 2022 · a2cade0 · a2cade0
1 parent 87177ae
commit a2cade0
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/packages/widget/src/AppProvider.tsx b/packages/widget/src/AppProvider.tsx
@@ -2,7 +2,9 @@ import type { QueryClientProviderProps } from '@tanstack/react-query';
 import { QueryClientProvider } from '@tanstack/react-query';
 import type { FC, PropsWithChildren } from 'react';
 import { Fragment } from 'react';
+import { I18nextProvider } from 'react-i18next';
 import { MemoryRouter, useInRouterContext } from 'react-router-dom';
+import { i18n } from './i18n';
 import type { WidgetConfig } from '.';
 import { queryClient } from './config/queryClient';
 import {
@@ -34,7 +36,9 @@ export const AppProvider: React.FC<PropsWithChildren<AppProps>> = ({
             <SwapFormProvider>
               <ThemeProvider>
                 <WalletProvider>
-                  <AppRouter>{children}</AppRouter>
+                  <I18nextProvider i18n={i18n}>
+                    <AppRouter>{children}</AppRouter>
+                  </I18nextProvider>
                 </WalletProvider>
               </ThemeProvider>
             </SwapFormProvider>

diff --git a/packages/widget/src/i18n/index.ts b/packages/widget/src/i18n/index.ts
@@ -1,5 +1,4 @@
-import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';
+import i18next from 'i18next';
 import translation from './en/translation.json';
 
 export const defaultNS = 'translation';
@@ -9,14 +8,16 @@ export const resources = {
   },
 } as const;
 
-export function configureReactI18next() {
-  i18n.use(initReactI18next).init({
+export const i18n = i18next.createInstance(
+  {
     lng: 'en',
     fallbackLng: 'en',
     lowerCaseLng: true,
     interpolation: {
       escapeValue: false,
     },
     resources,
-  });
-}
+  },
+  // providing an empty callback here will automatically call init
+  () => {},
+);
diff --git a/packages/widget/src/index.ts b/packages/widget/src/index.ts
@@ -1,13 +1,11 @@
 import { App } from './App';
 import { AppDrawer } from './AppDrawer';
 import './fonts/inter.css';
-import { configureReactI18next } from './i18n';
 
 export type { WidgetDrawer, WidgetDrawerProps } from './AppDrawer';
 export { useWidgetEvents } from './hooks';
 export * from './types';
 
-configureReactI18next();
 // ClassNameGenerator.configure((componentName) =>
 //   componentName.replace('Mui', 'LiFi'),
 // );