[i18n] - Add react-i18n package support (#61)

* [i18n] - Add react-i18n package support

* [i18n] - add 4 tab spacing for lang JSON files

* Create cuddly-plums-beg.md

SOV-787 - Add react-i18n package support

* feat: lang switcher/second lang examples

* chore: fixes from comments

* chore: resolve final review comment

* chore: rebuild yarn.lock

Co-authored-by: soulBit <its.soulBit@gmail.com>

Author: pietro-maximoff

.changeset/cuddly-plums-beg.md

@@ -0,0 +1,5 @@
+---
+"frontend": patch
+---
+
+SOV-787 - Add react-i18n package support

.prettierrc

@@ -14,5 +14,13 @@
     "^app/",
     "^[./|~/]"
   ],
-  "importOrderSeparation": true
+  "importOrderSeparation": true,
+  "overrides": [
+    {
+      "files": ["apps/frontend/src/locales/**/*.json"],
+      "options": {
+        "tabWidth": 4
+      }
+    }
+  ]
 }

apps/frontend/package.json

@@ -13,8 +13,11 @@
     "@sovryn/ui": "*",
     "classnames": "2.3.2",
     "ethers": "5.7.1",
+    "i18next": "22.0.4",
+    "i18next-browser-languagedetector": "7.0.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-i18next": "12.0.0",
     "react-router-dom": "6.4.2",
     "react-scripts": "5.0.1"
   },

apps/frontend/src/app/5_pages/App/App.tsx

@@ -1,20 +1,34 @@
-import React, { useReducer } from 'react';
+import React, { useCallback, useReducer, useState } from 'react';
 
-import { Button, Dialog, Dropdown, noop } from '@sovryn/ui';
+import i18next from 'i18next';
+import { useTranslation } from 'react-i18next';
+
+import { Button, Dialog, Dropdown, Menu, MenuItem } from '@sovryn/ui';
 
 import { ConnectWalletButton } from '../../2_molecules/ConnectWalletButton/ConnectWalletButton';
 import { useTheme } from '../../../hooks/useTheme';
 import { useWalletConnect } from '../../../hooks/useWalletConnect';
+import { translations, languages } from '../../../locales/i18n';
 import { AppTheme } from '../../../types/tailwind';
 import styles from './App.module.css';
 
 function App() {
   const { handleThemeChange } = useTheme();
-
+  const { t } = useTranslation();
   const [isOpen, toggle] = useReducer(p => !p, false);
   const { connectWallet, disconnectWallet, wallets, pending } =
     useWalletConnect();
 
+  const [currentLang, setCurrentLang] = useState(i18next.language);
+
+  const changeLanguage = useCallback(
+    (lng: string) => () => {
+      i18next.changeLanguage(lng);
+      setCurrentLang(lng);
+    },
+    [],
+  );
+
   return (
     <div className="my-2 px-4">
       <header>
@@ -31,18 +45,15 @@ function App() {
           <div className="p-4">Hello.</div>
         </Dialog>
 
-        <Dropdown text="test">
-          <div>
-            <div className="my-2" onClick={noop}>
-              Dropdown Item 1
-            </div>
-            <div className="my-2" onClick={noop}>
-              Dropdown Item 2
-            </div>
-            <div className="my-2" onClick={noop}>
-              Dropdown Item 3
-            </div>
-          </div>
+        <Dropdown text={currentLang.toUpperCase()} className="my-4">
+          <Menu>
+            {languages.map(lng => (
+              <MenuItem
+                text={lng.toUpperCase()}
+                onClick={changeLanguage(lng)}
+              />
+            ))}
+          </Menu>
         </Dropdown>
 
         <div className="flex items-center gap-4">
@@ -93,6 +104,8 @@ function App() {
 
         <br />
         <br />
+
+        <p>{t(translations.wallet)}</p>
       </main>
     </div>
   );

apps/frontend/src/index.tsx

@@ -7,6 +7,7 @@ import { OnboardProvider } from '@sovryn/onboard-react';
 
 import App from './app/5_pages/App/App';
 import { onboard } from './lib/connector';
+import './locales/i18n';
 import './styles/tailwindcss/index.css';
 
 const root = ReactDOM.createRoot(

apps/frontend/src/locales/.gitkeep

@@ -0,0 +1,3 @@
+{
+    "wallet": "wallet"
+}

apps/frontend/src/locales/en/translations.json

@@ -0,0 +1,3 @@
+{
+    "wallet": "cartera"
+}

apps/frontend/src/locales/es/translations.json

@@ -0,0 +1,73 @@
+import i18next from 'i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import { initReactI18next } from 'react-i18next';
+
+import en from './en/translations.json';
+import es from './es/translations.json';
+import { ConvertedToObjectType } from './types';
+
+const translationsJson = {
+  en: {
+    translation: en,
+  },
+  es: {
+    translation: es,
+  },
+};
+
+export const languages = Object.keys(translationsJson);
+
+export const languageLocalStorageKey = 'i18nextLng_dapp';
+export const walletLanguageLocalStorageKey = 'i18nextLng'; // language key for @sovryn/react-wallet
+
+export type TranslationResource = typeof en;
+export type LanguageKey = keyof TranslationResource;
+
+export const translations: ConvertedToObjectType<TranslationResource> =
+  {} as ConvertedToObjectType<TranslationResource>;
+
+/*
+ * Converts the static JSON file into an object where keys are identical
+ * but values are strings concatenated according to syntax.
+ * This is helpful when using the JSON file keys and still have the intellisense support
+ * along with type-safety
+ */
+const convertLanguageJsonToObject = (obj: {}, dict: {}, current?: string) => {
+  Object.keys(obj).forEach(key => {
+    const currentLookupKey = current ? `${current}.${key}` : key;
+    if (typeof obj[key] === 'object') {
+      dict[key] = {};
+      convertLanguageJsonToObject(obj[key], dict[key], currentLookupKey);
+    } else {
+      dict[key] = currentLookupKey;
+    }
+  });
+};
+
+export const i18n = i18next
+  .use(initReactI18next)
+  .use(LanguageDetector)
+  .init(
+    {
+      resources: translationsJson,
+      react: {
+        useSuspense: true,
+      },
+      fallbackLng: 'en',
+      supportedLngs: languages,
+      detection: {
+        order: ['localStorage', 'navigator'],
+        // needs to be different from default to prevent overwrite by @sovryn/react-wallet
+        lookupLocalStorage: languageLocalStorageKey,
+        // don't cache automatically into localStorage only on manual language change
+        caches: [],
+        excludeCacheFor: ['cimode'],
+      },
+    },
+    error => {
+      if (error) {
+        console.error(error);
+      }
+      convertLanguageJsonToObject(en, translations);
+    },
+  );

apps/frontend/src/locales/i18n.ts

@@ -0,0 +1,3 @@
+export type ConvertedToObjectType<T> = {
+  [P in keyof T]: T[P] extends string ? string : ConvertedToObjectType<T[P]>;
+};