feat(refactor): Locales to package, fixes and structural improvements. (

#2338)

.github/workflows/ci.yml

@@ -54,8 +54,8 @@ jobs:
         with:
           node-version: 18.x
       - run: yarn install
-      - run: yarn run locale:validate
-        working-directory: packages/app
+      - run: yarn run validate
+        working-directory: packages/locales
 
   all:
     needs: [check-license, markdown-link-check, build, validate-locales]

package.json

@@ -43,7 +43,10 @@
     "typescript": "^5.4.3"
   },
   "dependencies": {
-    "classnames": "^2.5.1"
+    "classnames": "^2.5.1",
+    "date-fns": "^4.1.0",
+    "i18next": "^24.0.0",
+    "react-i18next": "^15.1.1"
   },
   "packageManager": "[email protected]"
 }

packages/app/package.json

@@ -8,9 +8,6 @@
     "clear": "rm -rf build dist tsconfig.tsbuildinfo",
     "reset": "yarn run clear &&  rm -rf node_modules yarn.lock && yarn",
     "dev": "vite",
-    "lint": "npx prettier --write ./.scripts & node ./.scripts/localeOrderKeys.cjs",
-    "locale:order": "node ./.scripts/localeOrderKeys.cjs",
-    "locale:validate": "node ./.scripts/localeValidate.cjs",
     "preview": "vite preview",
     "test": "vitest",
     "visualizer": "vite-bundle-visualizer"
@@ -44,11 +41,10 @@
     "chroma-js": "^3.1.1",
     "compare-versions": "^6.1.1",
     "consts": "workspace:*",
-    "date-fns": "^4.1.0",
     "framer-motion": "^11.11.1",
     "html5-qrcode": "^2.3.8",
-    "i18next": "^23.11.5",
     "i18next-browser-languagedetector": "^8.0.0",
+    "locales": "workspace:*",
     "lodash.debounce": "^4.0.8",
     "lodash.throttle": "^4.1.1",
     "plugin-staking-api": "workspace:*",
@@ -59,7 +55,6 @@
     "react-dom": "^18.2.0",
     "react-error-boundary": "^4.0.13",
     "react-helmet": "^6.1.0",
-    "react-i18next": "^15.0.2",
     "react-router-dom": "^6.23.1",
     "react-scroll": "^1.9.0",
     "styled-components": "^6.1.13",

packages/app/src/App.tsx

@@ -3,7 +3,7 @@
 
 import { I18nextProvider } from 'react-i18next';
 import { ThemesProvider } from 'contexts/Themes';
-import { i18next } from 'locale';
+import { i18next } from 'locales';
 import { Providers } from 'Providers';
 import { NetworkProvider } from 'contexts/Network';
 import { ActiveAccountsProvider } from 'contexts/ActiveAccounts';

packages/app/src/hooks/useFillVariables/index.tsx

@@ -52,11 +52,13 @@ export const useFillVariables = () => {
           ],
         ];
 
-        for (const varToVal of varsToValues) {
-          if (val.constructor === Array) {
-            val = val.map((_d) => _d.replaceAll(varToVal[0], varToVal[1]));
-          } else {
-            val = val.replaceAll(varToVal[0], varToVal[1]);
+        if (val) {
+          for (const varToVal of varsToValues) {
+            if (val?.constructor === Array) {
+              val = val.map((_d) => _d.replaceAll(varToVal[0], varToVal[1]));
+            } else {
+              val = val.replaceAll(varToVal[0], varToVal[1]);
+            }
           }
         }
         return [key, val];

packages/app/src/library/Graphs/PayoutBar.tsx

@@ -18,7 +18,7 @@ import { Bar } from 'react-chartjs-2';
 import { useTranslation } from 'react-i18next';
 import { useStaking } from 'contexts/Staking';
 import { useTheme } from 'contexts/Themes';
-import { DefaultLocale, locales } from 'locale';
+import { DefaultLocale, locales } from 'locales';
 import graphColors from 'styles/graphs/index.json';
 import type { AnySubscan } from 'types';
 import { useNetwork } from 'contexts/Network';
@@ -94,7 +94,7 @@ export const PayoutBar = ({
   const data = {
     labels: graphPayouts.map((item: AnySubscan) => {
       const dateObj = format(fromUnixTime(item.block_timestamp), 'do MMM', {
-        locale: locales[i18n.resolvedLanguage ?? DefaultLocale],
+        locale: locales[i18n.resolvedLanguage ?? DefaultLocale].dateFormat,
       });
       return `${dateObj}`;
     }),

packages/app/src/library/Help/index.tsx

@@ -7,7 +7,7 @@ import { useAnimation } from 'framer-motion';
 import { useCallback, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { HelpConfig } from 'config/help';
-import { DefaultLocale } from 'locale';
+import { DefaultLocale } from 'locales';
 import { useHelp } from 'contexts/Help';
 import type {
   DefinitionWithKeys,

packages/app/src/main.tsx

@@ -3,6 +3,7 @@
 
 import { createRoot } from 'react-dom/client';
 import { App } from 'App';
+import { version } from '../package.json';
 
 // Network styles.
 import 'styles/accents/polkadot-relay.css';
@@ -21,6 +22,16 @@ const rootElement = document.getElementById('root');
 if (!rootElement) {
   throw new Error('Failed to find the root element');
 }
+
+// Refresh local storage language resources if in development, or if new app version is present.
+// This ensures all language keys are up to date.
+if (
+  localStorage.getItem('app_version') !== version ||
+  import.meta.env.MODE === 'development'
+) {
+  localStorage.removeItem('lng_resources');
+}
+
 const root = createRoot(rootElement);
 
 root.render(<App />);

packages/app/src/modals/ChooseLanguage/index.tsx

@@ -4,8 +4,7 @@
 import { useTranslation } from 'react-i18next';
 import LanguageSVG from 'img/language.svg?react';
 import { Title } from 'library/Modal/Title';
-import { availableLanguages } from 'locale';
-import { changeLanguage } from 'locale/utils';
+import { locales, changeLanguage } from 'locales';
 import { useOverlay } from 'kits/Overlay/Provider';
 import { ContentWrapper, LocaleButton } from './Wrapper';
 import { ModalPadding } from 'kits/Overlay/structure/ModalPadding';
@@ -20,28 +19,23 @@ export const ChooseLanguage = () => {
       <ModalPadding>
         <ContentWrapper>
           <div className="item">
-            {availableLanguages.map((a, i) => {
-              const code = a[0];
-              const label = a[1];
-
-              return (
-                <h3 key={`${code}_${i}`}>
-                  <LocaleButton
-                    $connected={i18n.resolvedLanguage === code}
-                    type="button"
-                    onClick={() => {
-                      changeLanguage(code, i18n);
-                      setModalStatus('closing');
-                    }}
-                  >
-                    {label}
-                    {i18n.resolvedLanguage === code && (
-                      <h4 className="selected">{t('selected')}</h4>
-                    )}
-                  </LocaleButton>
-                </h3>
-              );
-            })}
+            {Object.entries(locales).map(([code, { label }], i) => (
+              <h3 key={`${code}_${i}`}>
+                <LocaleButton
+                  $connected={i18n.resolvedLanguage === code}
+                  type="button"
+                  onClick={() => {
+                    changeLanguage(code, i18n);
+                    setModalStatus('closing');
+                  }}
+                >
+                  {label}
+                  {i18n.resolvedLanguage === code && (
+                    <h4 className="selected">{t('selected')}</h4>
+                  )}
+                </LocaleButton>
+              </h3>
+            ))}
           </div>
         </ContentWrapper>
       </ModalPadding>

packages/app/src/pages/Overview/Payouts.tsx

@@ -14,7 +14,7 @@ import { StatusLabel } from 'library/StatusLabel';
 import { useSubscanData } from 'hooks/useSubscanData';
 import { CardHeaderWrapper } from 'library/Card/Wrappers';
 import { Odometer } from '@w3ux/react-odometer';
-import { locales, DefaultLocale } from 'locale';
+import { locales, DefaultLocale } from 'locales';
 import BigNumber from 'bignumber.js';
 import { formatDistance, fromUnixTime, getUnixTime } from 'date-fns';
 import { minDecimalPlaces } from '@w3ux/utils';
@@ -76,7 +76,7 @@ export const Payouts = () => {
     formatTo = new Date();
     formatOpts = {
       addSuffix: true,
-      locale: locales[i18n.resolvedLanguage ?? DefaultLocale],
+      locale: locales[i18n.resolvedLanguage ?? DefaultLocale].dateFormat,
     };
   }
 

packages/app/src/pages/Overview/StakeStatus/Tips/index.tsx

@@ -21,7 +21,7 @@ import type { TipDisplay } from './types';
 import { useApi } from 'contexts/Api';
 import { useBalances } from 'contexts/Balances';
 import { useSyncing } from 'hooks/useSyncing';
-import { DefaultLocale } from 'locale';
+import { DefaultLocale } from 'locales';
 import { useOnResize } from '@w3ux/hooks';
 
 export const Tips = () => {

packages/app/src/pages/Payouts/PayoutList/index.tsx

@@ -19,7 +19,7 @@ import { MotionContainer } from 'library/List/MotionContainer';
 import { Pagination } from 'library/List/Pagination';
 import { Identity } from 'library/ListItem/Labels/Identity';
 import { PoolIdentity } from 'library/ListItem/Labels/PoolIdentity';
-import { DefaultLocale, locales } from 'locale';
+import { DefaultLocale, locales } from 'locales';
 import type { AnySubscan } from 'types';
 import { useNetwork } from 'contexts/Network';
 import { ItemWrapper } from '../Wrappers';
@@ -203,7 +203,7 @@ export const PayoutListInner = ({
                                 locale:
                                   locales[
                                     i18n.resolvedLanguage ?? DefaultLocale
-                                  ],
+                                  ].dateFormat,
                               }
                             )}
                           </h5>

packages/app/src/pages/Payouts/index.tsx

@@ -22,7 +22,7 @@ import { PayoutList } from './PayoutList';
 import { LastEraPayoutStat } from './Stats/LastEraPayout';
 import { useSubscanData } from 'hooks/useSubscanData';
 import { SubscanController } from 'controllers/Subscan';
-import { DefaultLocale, locales } from 'locale';
+import { DefaultLocale, locales } from 'locales';
 import { useSyncing } from 'hooks/useSyncing';
 import { ButtonHelp } from 'ui-buttons';
 import { useUi } from 'contexts/UI';
@@ -57,12 +57,12 @@ export const Payouts = ({ page: { key } }: PageProps) => {
 
   const payoutsFromDate = SubscanController.payoutsFromDate(
     (data?.payouts || []).concat(data?.poolClaims || []),
-    locales[i18n.resolvedLanguage ?? DefaultLocale]
+    locales[i18n.resolvedLanguage ?? DefaultLocale].dateFormat
   );
 
   const payoutsToDate = SubscanController.payoutsToDate(
     (data?.payouts || []).concat(data?.poolClaims || []),
-    locales[i18n.resolvedLanguage ?? DefaultLocale]
+    locales[i18n.resolvedLanguage ?? DefaultLocale].dateFormat
   );
 
   useEffect(() => {

packages/app/.scripts/utils.cjs → packages/locales/.scripts/utils.cjs

@@ -5,7 +5,7 @@ const fs = require('fs');
 const { join } = require('path');
 
 // Project locale directory.
-const localeDir = join(__dirname, '..', 'src', 'locale');
+const localeDir = join(__dirname, '..', 'src', 'resources');
 
 // The suffixes of keys related to i18n functionality that should be ignored.
 const ignoreSuffixes = ['_one', '_two', '_few', '_many', '_other'];

packages/locales/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "locales",
+  "version": "1.0.0",
+  "license": "GPL-3.0-only",
+  "type": "module",
+  "main": "src/index.ts",
+  "scripts": {
+    "clear": "rm -rf build tsconfig.tsbuildinfo dist",
+    "reset": "yarn run clear &&  rm -rf node_modules yarn.lock && yarn",
+    "order": "node ./.scripts/localeOrderKeys.cjs",
+    "validate": "node ./.scripts/localeValidate.cjs"
+  }
+}