Support translation in background code (#19650)

.storybook/i18n.js

@@ -1,6 +1,6 @@
 import React, { Component, createContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { getMessage } from '../ui/helpers/utils/i18n-helper';
+import { getMessage } from '../shared/modules/i18n';
 import { I18nContext } from '../ui/contexts/i18n';
 
 export { I18nContext };

app/_locales/en/messages.json

@@ -2559,6 +2559,30 @@
   "notePlaceholder": {
     "message": "The approver will see this note when approving the transaction at the custodian."
   },
+  "notificationTransactionFailedMessage": {
+    "message": "Transaction $1 failed! $2",
+    "description": "Content of the browser notification that appears when a transaction fails"
+  },
+  "notificationTransactionFailedMessageMMI": {
+    "message": "Transaction failed! $1",
+    "description": "Content of the browser notification that appears when a transaction fails in MMI"
+  },
+  "notificationTransactionFailedTitle": {
+    "message": "Failed transaction",
+    "description": "Title of the browser notification that appears when a transaction fails"
+  },
+  "notificationTransactionSuccessMessage": {
+    "message": "Transaction $1 confirmed!",
+    "description": "Content of the browser notification that appears when a transaction is confirmed"
+  },
+  "notificationTransactionSuccessTitle": {
+    "message": "Confirmed transaction",
+    "description": "Title of the browser notification that appears when a transaction is confirmed"
+  },
+  "notificationTransactionSuccessView": {
+    "message": "View on $1",
+    "description": "Additional content in browser notification that appears when a transaction is confirmed and has a block explorer URL"
+  },
   "notifications": {
     "message": "Notifications"
   },

app/scripts/metamask-controller.js

@@ -205,6 +205,7 @@ import {
 } from './controllers/permissions';
 import createRPCMethodTrackingMiddleware from './lib/createRPCMethodTrackingMiddleware';
 import { securityProviderCheck } from './lib/security-provider-helpers';
+import { updateCurrentLocale } from './translate';
 
 export const METAMASK_CONTROLLER_EVENTS = {
   // Fired after state changes that impact the extension badge (unapproved msg count)
@@ -360,6 +361,10 @@ export default class MetamaskController extends EventEmitter {
       ///: END:ONLY_INCLUDE_IN
     });
 
+    this.preferencesController.store.subscribe(async ({ currentLocale }) => {
+      await updateCurrentLocale(currentLocale);
+    });
+
     this.tokensController = new TokensController({
       chainId: this.networkController.store.getState().providerConfig.chainId,
       onPreferencesStateChange: this.preferencesController.store.subscribe.bind(

app/scripts/platforms/extension.js

@@ -6,6 +6,7 @@ import { getEnvironmentType } from '../lib/util';
 import { ENVIRONMENT_TYPE_BACKGROUND } from '../../../shared/constants/app';
 import { TransactionStatus } from '../../../shared/constants/transaction';
 import { getURLHostName } from '../../../ui/helpers/utils/util';
+import { t } from '../translate';
 
 export default class ExtensionPlatform {
   //
@@ -181,22 +182,30 @@ export default class ExtensionPlatform {
       toLower(getURLHostName(url).replace(/([.]\w+)$/u, '')),
     );
 
-    const title = 'Confirmed transaction';
-    const message = `Transaction ${nonce} confirmed! ${
-      url.length ? `View on ${view}` : ''
-    }`;
+    const title = t('notificationTransactionSuccessTitle');
+    let message = t('notificationTransactionSuccessMessage', nonce);
+
+    if (url.length) {
+      message += ` ${t('notificationTransactionSuccessView', view)}`;
+    }
+
     await this._showNotification(title, message, url);
   }
 
   async _showFailedTransaction(txMeta, errorMessage) {
     const nonce = parseInt(txMeta.txParams.nonce, 16);
-    const title = 'Failed transaction';
-    let message = `Transaction ${nonce} failed! ${
-      errorMessage || txMeta.err.message
-    }`;
+    const title = t('notificationTransactionFailedTitle');
+    let message = t(
+      'notificationTransactionFailedMessage',
+      nonce,
+      errorMessage || txMeta.err.message,
+    );
     ///: BEGIN:ONLY_INCLUDE_IN(build-mmi)
     if (isNaN(nonce)) {
-      message = `Transaction failed! ${errorMessage || txMeta.err.message}`;
+      message = t(
+        'notificationTransactionFailedMessageMMI',
+        errorMessage || txMeta.err.message,
+      );
     }
     ///: END:ONLY_INCLUDE_IN
     await this._showNotification(title, message);

app/scripts/translate.test.ts

@@ -0,0 +1,125 @@
+import {
+  getMessage,
+  fetchLocale,
+  FALLBACK_LOCALE,
+} from '../../shared/modules/i18n';
+import { t, updateCurrentLocale } from './translate';
+
+const localeCodeMock = 'te';
+const keyMock = 'testKey';
+const substitutionsMock = ['a1', 'b2'];
+const messageMock = 'testMessage';
+const messageMock2 = 'testMessage2';
+const alternateLocaleDataMock = { [keyMock]: { message: messageMock2 } };
+
+jest.mock('../../shared/modules/i18n');
+jest.mock('../_locales/en/messages.json', () => ({
+  [keyMock]: { message: messageMock },
+}));
+
+describe('Translate', () => {
+  const getMessageMock = getMessage as jest.MockedFunction<typeof getMessage>;
+  const fetchLocaleMock = fetchLocale as jest.MockedFunction<
+    typeof fetchLocale
+  >;
+
+  beforeEach(async () => {
+    jest.resetAllMocks();
+    await updateCurrentLocale(FALLBACK_LOCALE);
+  });
+
+  describe('updateCurrentLocale', () => {
+    it('retrieves locale data from shared module', async () => {
+      await updateCurrentLocale(localeCodeMock);
+
+      expect(fetchLocale).toHaveBeenCalledTimes(1);
+      expect(fetchLocale).toHaveBeenCalledWith(localeCodeMock);
+    });
+
+    it('does not retrieve locale data if same locale already set', async () => {
+      await updateCurrentLocale(localeCodeMock);
+      await updateCurrentLocale(localeCodeMock);
+
+      expect(fetchLocale).toHaveBeenCalledTimes(1);
+      expect(fetchLocale).toHaveBeenCalledWith(localeCodeMock);
+    });
+
+    it('does not retrieve locale data if fallback locale set', async () => {
+      await updateCurrentLocale(localeCodeMock);
+      await updateCurrentLocale(FALLBACK_LOCALE);
+
+      expect(fetchLocale).toHaveBeenCalledTimes(1);
+      expect(fetchLocale).toHaveBeenCalledWith(localeCodeMock);
+    });
+  });
+
+  describe('t', () => {
+    it('returns value from shared module', () => {
+      getMessageMock.mockReturnValue(messageMock);
+
+      expect(t(keyMock, ...substitutionsMock)).toStrictEqual(messageMock);
+    });
+
+    it('uses en locale by default', () => {
+      getMessageMock.mockReturnValue(messageMock);
+
+      t(keyMock, ...substitutionsMock);
+
+      expect(getMessage).toHaveBeenCalledTimes(1);
+      expect(getMessage).toHaveBeenCalledWith(
+        FALLBACK_LOCALE,
+        { [keyMock]: { message: messageMock } },
+        keyMock,
+        substitutionsMock,
+      );
+    });
+
+    it('uses locale passed to updateCurrentLocale if called', async () => {
+      (getMessage as jest.MockedFunction<typeof getMessage>).mockReturnValue(
+        messageMock,
+      );
+
+      fetchLocaleMock.mockResolvedValueOnce(alternateLocaleDataMock);
+      await updateCurrentLocale(localeCodeMock);
+
+      t(keyMock, ...substitutionsMock);
+
+      expect(getMessage).toHaveBeenCalledTimes(1);
+      expect(getMessage).toHaveBeenCalledWith(
+        localeCodeMock,
+        alternateLocaleDataMock,
+        keyMock,
+        substitutionsMock,
+      );
+    });
+
+    it('returns value from en locale as fallback if current locale returns null', async () => {
+      (
+        getMessage as jest.MockedFunction<typeof getMessage>
+      ).mockReturnValueOnce(null);
+
+      (
+        getMessage as jest.MockedFunction<typeof getMessage>
+      ).mockReturnValueOnce(messageMock2);
+
+      fetchLocaleMock.mockResolvedValueOnce(alternateLocaleDataMock);
+      await updateCurrentLocale(localeCodeMock);
+
+      expect(t(keyMock, ...substitutionsMock)).toStrictEqual(messageMock2);
+
+      expect(getMessage).toHaveBeenCalledTimes(2);
+      expect(getMessage).toHaveBeenCalledWith(
+        FALLBACK_LOCALE,
+        { [keyMock]: { message: messageMock } },
+        keyMock,
+        substitutionsMock,
+      );
+      expect(getMessage).toHaveBeenCalledWith(
+        localeCodeMock,
+        alternateLocaleDataMock,
+        keyMock,
+        substitutionsMock,
+      );
+    });
+  });
+});

app/scripts/translate.ts

@@ -0,0 +1,31 @@
+import enTranslations from '../_locales/en/messages.json';
+import {
+  FALLBACK_LOCALE,
+  I18NMessageDict,
+  fetchLocale,
+  getMessage,
+} from '../../shared/modules/i18n';
+
+let currentLocale: string = FALLBACK_LOCALE;
+let translations: I18NMessageDict = enTranslations;
+
+export async function updateCurrentLocale(locale: string): Promise<void> {
+  if (currentLocale === locale) {
+    return;
+  }
+
+  if (locale === FALLBACK_LOCALE) {
+    translations = enTranslations;
+  } else {
+    translations = await fetchLocale(locale);
+  }
+
+  currentLocale = locale;
+}
+
+export function t(key: string, ...substitutions: string[]): string | null {
+  return (
+    getMessage(currentLocale, translations, key, substitutions) ||
+    getMessage(FALLBACK_LOCALE, enTranslations, key, substitutions)
+  );
+}

development/verify-locale-strings.js

@@ -187,6 +187,7 @@ async function verifyEnglishLocale() {
       'shared/**/*.ts',
       'app/scripts/constants/**/*.js',
       'app/scripts/constants/**/*.ts',
+      'app/scripts/platforms/**/*.js',
     ],
     {
       ignore: [...globsToStrictSearch, testGlob],

jest.config.js

@@ -51,6 +51,7 @@ module.exports = {
     '<rootDir>/app/scripts/lib/createRPCMethodTrackingMiddleware.test.js',
     '<rootDir>/app/scripts/migrations/*.test.(js|ts)',
     '<rootDir>/app/scripts/platforms/*.test.js',
+    '<rootDir>/app/scripts/translate.test.ts',
     '<rootDir>/shared/**/*.test.(js|ts)',
     '<rootDir>/ui/**/*.test.(js|ts|tsx)',
     '<rootDir>/development/fitness-functions/**/*.test.(js|ts|tsx)',

shared/lib/error-utils.js

@@ -3,10 +3,7 @@ import browser from 'webextension-polyfill';
 ///: END:ONLY_INCLUDE_IN
 import { memoize } from 'lodash';
 import getFirstPreferredLangCode from '../../app/scripts/lib/get-first-preferred-lang-code';
-import {
-  fetchLocale,
-  loadRelativeTimeFormatLocaleData,
-} from '../../ui/helpers/utils/i18n-helper';
+import { fetchLocale, loadRelativeTimeFormatLocaleData } from '../modules/i18n';
 ///: BEGIN:ONLY_INCLUDE_IN(desktop)
 import { renderDesktopError } from '../../ui/pages/desktop-error/render-desktop-error';
 import { EXTENSION_ERROR_PAGE_TYPES } from '../constants/desktop';

shared/lib/error-utils.test.js

@@ -1,5 +1,5 @@
 import browser from 'webextension-polyfill';
-import { fetchLocale } from '../../ui/helpers/utils/i18n-helper';
+import { fetchLocale } from '../modules/i18n';
 import { SUPPORT_LINK } from './ui-utils';
 import {
   downloadDesktopApp,
@@ -12,7 +12,7 @@ import {
 } from './error-utils';
 import { openCustomProtocol } from './deep-linking';
 
-jest.mock('../../ui/helpers/utils/i18n-helper', () => ({
+jest.mock('../modules/i18n', () => ({
   fetchLocale: jest.fn(),
   loadRelativeTimeFormatLocaleData: jest.fn(),
 }));

shared/modules/i18n.test.ts

@@ -0,0 +1,335 @@
+import log from 'loglevel';
+import {
+  FALLBACK_LOCALE,
+  I18NMessageDict,
+  clearCaches,
+  fetchLocale,
+  getMessage,
+  loadRelativeTimeFormatLocaleData,
+} from './i18n';
+
+const localeCodeMock = 'te';
+const keyMock = 'testKey';
+const errorLocaleMock = 'testLocaleError';
+const errorMock = 'TestError';
+
+jest.mock('loglevel');
+
+jest.mock('./fetch-with-timeout', () =>
+  jest.fn(() => (url: string) => {
+    return Promise.resolve({
+      json: () => {
+        if (url.includes(errorLocaleMock)) {
+          throw new Error(errorMock);
+        }
+
+        return { url };
+      },
+    });
+  }),
+);
+
+describe('I18N Module', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+    clearCaches();
+    process.env.IN_TEST = 'true';
+  });
+
+  describe('getMessage', () => {
+    describe('on error', () => {
+      it('returns null if no messages', () => {
+        expect(
+          getMessage(
+            localeCodeMock,
+            null as unknown as I18NMessageDict,
+            keyMock,
+          ),
+        ).toBeNull();
+      });
+
+      describe('if missing key', () => {
+        describe('if not using fallback locale', () => {
+          it('logs warning', () => {
+            expect(
+              getMessage(
+                localeCodeMock,
+                {} as unknown as I18NMessageDict,
+                keyMock,
+              ),
+            ).toBeNull();
+
+            expect(log.warn).toHaveBeenCalledTimes(1);
+            expect(log.warn).toHaveBeenCalledWith(
+              `Translator - Unable to find value of key "${keyMock}" for locale "${localeCodeMock}"`,
+            );
+          });
+
+          it('does not log warning if warning already created', () => {
+            expect(
+              getMessage(
+                localeCodeMock,
+                {} as unknown as I18NMessageDict,
+                keyMock,
+              ),
+            ).toBeNull();
+
+            expect(
+              getMessage(
+                localeCodeMock,
+                {} as unknown as I18NMessageDict,
+                keyMock,
+              ),
+            ).toBeNull();
+
+            expect(log.warn).toHaveBeenCalledTimes(1);
+            expect(log.warn).toHaveBeenCalledWith(
+              `Translator - Unable to find value of key "${keyMock}" for locale "${localeCodeMock}"`,
+            );
+          });
+        });
+
+        describe('if using fallback locale', () => {
+          it('logs error', () => {
+            delete process.env.IN_TEST;
+
+            expect(
+              getMessage(
+                FALLBACK_LOCALE,
+                {} as unknown as I18NMessageDict,
+                keyMock,
+              ),
+            ).toBeNull();
+
+            expect(log.error).toHaveBeenCalledTimes(1);
+            expect(log.error).toHaveBeenCalledWith(
+              new Error(
+                `Unable to find value of key "${keyMock}" for locale "${FALLBACK_LOCALE}"`,
+              ),
+            );
+          });
+
+          it('throws if test env set', () => {
+            expect(() =>
+              getMessage(
+                FALLBACK_LOCALE,
+                {} as unknown as I18NMessageDict,
+                keyMock,
+              ),
+            ).toThrow(
+              `Unable to find value of key "${keyMock}" for locale "${FALLBACK_LOCALE}"`,
+            );
+          });
+
+          it('calls onError callback', () => {
+            const onErrorMock = jest.fn();
+
+            try {
+              getMessage(
+                FALLBACK_LOCALE,
+                {} as unknown as I18NMessageDict,
+                keyMock,
+                [],
+                onErrorMock,
+              );
+            } catch {
+              // Expected
+            }
+
+            expect(onErrorMock).toHaveBeenCalledTimes(1);
+            expect(onErrorMock).toHaveBeenCalledWith(
+              new Error(
+                `Unable to find value of key "${keyMock}" for locale "${FALLBACK_LOCALE}"`,
+              ),
+            );
+          });
+
+          it('does nothing if error already created', () => {
+            const onErrorMock = jest.fn();
+
+            try {
+              getMessage(
+                FALLBACK_LOCALE,
+                {} as unknown as I18NMessageDict,
+                keyMock,
+                [],
+                onErrorMock,
+              );
+            } catch {
+              // Expected
+            }
+
+            getMessage(
+              FALLBACK_LOCALE,
+              {} as unknown as I18NMessageDict,
+              keyMock,
+              [],
+              onErrorMock,
+            );
+
+            expect(log.error).toHaveBeenCalledTimes(1);
+            expect(onErrorMock).toHaveBeenCalledTimes(1);
+          });
+        });
+      });
+
+      describe('if missing substitution', () => {
+        it('logs error', () => {
+          expect(
+            getMessage(
+              localeCodeMock,
+              { [keyMock]: { message: 'test1 $1 test2 $2 test3' } },
+              keyMock,
+              ['a1'],
+            ),
+          ).toStrictEqual('test1 a1 test2  test3');
+
+          expect(log.error).toHaveBeenCalledTimes(1);
+          expect(log.error).toHaveBeenCalledWith(
+            new Error(
+              `Insufficient number of substitutions for key "${keyMock}" with locale "${localeCodeMock}"`,
+            ),
+          );
+        });
+
+        it('calls onError callback', () => {
+          const onErrorMock = jest.fn();
+
+          expect(
+            getMessage(
+              localeCodeMock,
+              { [keyMock]: { message: 'test1 $1 test2 $2 test3' } },
+              keyMock,
+              ['a1'],
+              onErrorMock,
+            ),
+          ).toStrictEqual('test1 a1 test2  test3');
+
+          expect(onErrorMock).toHaveBeenCalledTimes(1);
+          expect(onErrorMock).toHaveBeenCalledWith(
+            new Error(
+              `Insufficient number of substitutions for key "${keyMock}" with locale "${localeCodeMock}"`,
+            ),
+          );
+        });
+
+        it('does nothing if error already created', () => {
+          const onErrorMock = jest.fn();
+
+          expect(
+            getMessage(
+              localeCodeMock,
+              { [keyMock]: { message: 'test1 $1 test2 $2 test3' } },
+              keyMock,
+              ['a1'],
+              onErrorMock,
+            ),
+          ).toStrictEqual('test1 a1 test2  test3');
+
+          expect(
+            getMessage(
+              localeCodeMock,
+              { [keyMock]: { message: 'test1 $1 test2 $2 test3' } },
+              keyMock,
+              ['a1'],
+              onErrorMock,
+            ),
+          ).toStrictEqual('test1 a1 test2  test3');
+
+          expect(log.error).toHaveBeenCalledTimes(1);
+          expect(onErrorMock).toHaveBeenCalledTimes(1);
+        });
+      });
+    });
+
+    it('returns text only if no substitutions', () => {
+      expect(
+        getMessage(
+          localeCodeMock,
+          { [keyMock]: { message: 'testValue' } },
+          keyMock,
+        ),
+      ).toStrictEqual('testValue');
+    });
+
+    it('returns text including substitutions', () => {
+      expect(
+        getMessage(
+          localeCodeMock,
+          { [keyMock]: { message: 'test1 $1 test2 $2 test3' } },
+          keyMock,
+          ['a1', 'b2'],
+        ),
+      ).toStrictEqual('test1 a1 test2 b2 test3');
+    });
+
+    it('returns text including substitutions using custom join', () => {
+      expect(
+        getMessage(
+          localeCodeMock,
+          { [keyMock]: { message: 'test1 $1 test2 $2 test3' } },
+          keyMock,
+          ['a1', 'b2'],
+          undefined,
+          (substitutions) => substitutions.join(','),
+        ),
+      ).toStrictEqual('test1 ,a1, test2 ,b2, test3');
+    });
+  });
+
+  describe('fetchLocale', () => {
+    it('returns json from locale file', async () => {
+      const result = await fetchLocale(localeCodeMock);
+      expect(result).toStrictEqual({
+        url: `./_locales/${localeCodeMock}/messages.json`,
+      });
+    });
+
+    it('logs if fetch fails', async () => {
+      await fetchLocale(errorLocaleMock);
+
+      expect(log.error).toHaveBeenCalledTimes(1);
+      expect(log.error).toHaveBeenCalledWith(
+        `failed to fetch testLocaleError locale because of Error: ${errorMock}`,
+      );
+    });
+
+    it('returns empty object if fetch fails', async () => {
+      expect(await fetchLocale(errorLocaleMock)).toStrictEqual({});
+    });
+  });
+
+  describe('loadRelativeTimeFormatLocaleData', () => {
+    it('adds locale data if function exists', async () => {
+      const addMock = jest.fn();
+
+      global.Intl = {
+        RelativeTimeFormat: {
+          __addLocaleData: addMock,
+        },
+      } as any;
+
+      await loadRelativeTimeFormatLocaleData(`${localeCodeMock}_test`);
+
+      expect(addMock).toHaveBeenCalledTimes(1);
+      expect(addMock).toHaveBeenCalledWith({
+        url: `./intl/${localeCodeMock}/relative-time-format-data.json`,
+      });
+    });
+
+    it('does not add locale data if language tag already processed', async () => {
+      const addMock = jest.fn();
+
+      global.Intl = {
+        RelativeTimeFormat: {
+          __addLocaleData: addMock,
+        },
+      } as any;
+
+      await loadRelativeTimeFormatLocaleData(`${localeCodeMock}_test`);
+      await loadRelativeTimeFormatLocaleData(`${localeCodeMock}_test`);
+
+      expect(addMock).toHaveBeenCalledTimes(1);
+    });
+  });
+});

shared/modules/i18n.ts

@@ -0,0 +1,223 @@
+import log from 'loglevel';
+import { Json } from '@metamask/utils';
+import getFetchWithTimeout from './fetch-with-timeout';
+
+const fetchWithTimeout = getFetchWithTimeout();
+
+// From app/_locales folders there is a messages.json file such as app/_locales/en, comes with key and translated results
+// and we use as t('reject') to get the translated message in the codebase
+// and in i18n lib, the translated message is an object (I18NMessage) with message & description -
+// message is the string that will replace the translationKey, and that message may contain replacement variables such as $1, $2, etc.
+// Description is key describing the usage of the message.
+export interface I18NMessage {
+  message: string;
+  description?: string;
+}
+
+// The overall translation file is made of same entries
+// translationKey (string) and the I18NMessage as the value.
+export interface I18NMessageDict {
+  [translationKey: string]: I18NMessage;
+}
+
+export type I18NSubstitution = string | (() => any) | object;
+
+// A parameterized type (or generic type) of maps that use the same structure (translationKey) key
+interface I18NMessageDictMap<R> {
+  [translationKey: string]: R;
+}
+
+export const FALLBACK_LOCALE = 'en';
+
+const warned: { [localeCode: string]: I18NMessageDictMap<boolean> } = {};
+
+const missingMessageErrors: I18NMessageDictMap<Error> = {};
+
+const missingSubstitutionErrors: {
+  [localeCode: string]: I18NMessageDictMap<boolean>;
+} = {};
+
+const relativeTimeFormatLocaleData = new Set();
+
+/**
+ * Returns a localized message for the given key
+ *
+ * @param localeCode - The code for the current locale
+ * @param localeMessages - The map of messages for the current locale
+ * @param key - The message key
+ * @param substitutions - A list of message substitution replacements can replace $n in given message
+ * @param onError - An optional callback to provide additional processing on any errors
+ * @param join - An optional callback to join the substituted parts using custom logic
+ * @returns The localized message
+ */
+export const getMessage = <T>(
+  localeCode: string,
+  localeMessages: I18NMessageDict,
+  key: string,
+  substitutions?: I18NSubstitution[],
+  onError?: (error: Error) => void,
+  join?: (substitutedParts: I18NSubstitution[]) => T,
+): T | string | null => {
+  if (!localeMessages) {
+    return null;
+  }
+
+  const message = localeMessages[key];
+
+  if (!message) {
+    missingKeyError(key, localeCode, onError);
+    return null;
+  }
+
+  const text = message.message;
+
+  const parts = hasSubstitutions(substitutions)
+    ? applySubstitutions(
+        text,
+        substitutions as I18NSubstitution[],
+        key,
+        localeCode,
+        onError,
+      )
+    : [text];
+
+  return join ? join(parts) : parts.join('');
+};
+
+export async function fetchLocale(
+  localeCode: string,
+): Promise<I18NMessageDict> {
+  try {
+    const response = await fetchWithTimeout(
+      `./_locales/${localeCode}/messages.json`,
+    );
+    return await response.json();
+  } catch (error) {
+    log.error(`failed to fetch ${localeCode} locale because of ${error}`);
+    return {};
+  }
+}
+
+export async function loadRelativeTimeFormatLocaleData(
+  localeCode: string,
+): Promise<void> {
+  const languageTag = localeCode.split('_')[0];
+  if (
+    Intl.RelativeTimeFormat &&
+    typeof (Intl.RelativeTimeFormat as any).__addLocaleData === 'function' &&
+    !relativeTimeFormatLocaleData.has(languageTag)
+  ) {
+    const localeData = await fetchRelativeTimeFormatData(languageTag);
+    (Intl.RelativeTimeFormat as any).__addLocaleData(localeData);
+    relativeTimeFormatLocaleData.add(languageTag);
+  }
+}
+
+export function clearCaches() {
+  Object.keys(warned).forEach((key) => {
+    delete warned[key];
+  });
+
+  Object.keys(missingMessageErrors).forEach((key) => {
+    delete missingMessageErrors[key];
+  });
+
+  Object.keys(missingSubstitutionErrors).forEach((key) => {
+    delete missingSubstitutionErrors[key];
+  });
+
+  relativeTimeFormatLocaleData.clear();
+}
+
+function applySubstitutions(
+  message: string,
+  substitutions: I18NSubstitution[],
+  key: string,
+  localeCode: string,
+  onError?: (error: Error) => void,
+): I18NSubstitution[] {
+  const parts = message.split(/(\$\d)/gu);
+
+  return parts.map((part: string) => {
+    const subMatch = part.match(/\$(\d)/u);
+
+    if (!subMatch) {
+      return part;
+    }
+
+    const substituteIndex = Number(subMatch[1]) - 1;
+    const substitution = substitutions[substituteIndex];
+
+    if (substitution === null || substitution === undefined) {
+      missingSubstitutionError(key, localeCode, onError);
+    }
+
+    return substitutions?.[substituteIndex];
+  });
+}
+
+function missingKeyError(
+  key: string,
+  localeCode: string,
+  onError?: (error: Error) => void,
+) {
+  if (localeCode === FALLBACK_LOCALE && !missingMessageErrors[key]) {
+    const error = new Error(
+      `Unable to find value of key "${key}" for locale "${localeCode}"`,
+    );
+
+    missingMessageErrors[key] = error;
+
+    onError?.(error);
+    log.error(error);
+
+    if (process.env.IN_TEST) {
+      throw error;
+    }
+  }
+
+  if (localeCode === FALLBACK_LOCALE || warned[localeCode]?.[key]) {
+    return;
+  }
+
+  warned[localeCode] = warned[localeCode] ?? {};
+  warned[localeCode][key] = true;
+
+  log.warn(
+    `Translator - Unable to find value of key "${key}" for locale "${localeCode}"`,
+  );
+}
+
+function missingSubstitutionError(
+  key: string,
+  localeCode: string,
+  onError?: (error: Error) => void,
+) {
+  if (missingSubstitutionErrors[localeCode]?.[key]) {
+    return;
+  }
+
+  missingSubstitutionErrors[localeCode] =
+    missingSubstitutionErrors[localeCode] ?? {};
+
+  missingSubstitutionErrors[localeCode][key] = true;
+
+  const error = new Error(
+    `Insufficient number of substitutions for key "${key}" with locale "${localeCode}"`,
+  );
+
+  log.error(error);
+
+  onError?.(error);
+}
+
+function hasSubstitutions(substitutions?: I18NSubstitution[]) {
+  return (substitutions?.length ?? 0) > 0;
+}
+
+async function fetchRelativeTimeFormatData(languageTag: string): Promise<Json> {
+  const response = await fetchWithTimeout(
+    `./intl/${languageTag}/relative-time-format-data.json`,
+  );
+  return await response.json();
+}

tsconfig.json

@@ -14,7 +14,8 @@
     "outDir": "tsout",
     "rootDir": ".",
     "sourceMap": true,
-    "strict": true
+    "strict": true,
+    "resolveJsonModule": true
   },
   "exclude": [
     "**/jest-coverage/**/*",

ui/contexts/i18n.js

@@ -1,12 +1,12 @@
 import React, { Component, createContext, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
-import { getMessage } from '../helpers/utils/i18n-helper';
 import {
   getCurrentLocale,
   getCurrentLocaleMessages,
   getEnLocaleMessages,
 } from '../ducks/locale/locale';
+import { getMessage } from '../helpers/utils/i18n-helper';
 
 export const I18nContext = createContext((key) => `[${key}]`);
 

ui/helpers/utils/__snapshots__/i18n-helper.test.js.snap

@@ -1,64 +1,20 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`i18n helper getMessage should return the correct message when a single react substitution is made 1`] = `
+exports[`I18N Helper getMessage renders substitutions inside span if substitutions include React components 1`] = `
 <div>
   <span>
      
-    Testing a react substitution 
-    <div
-      style="color: red;"
-    >
-      TEST_SUBSTITUTION_1
-    </div>
-    .
-     
-  </span>
-</div>
-`;
-
-exports[`i18n helper getMessage should return the correct message when substituting a mix of react elements and strings 1`] = `
-<div>
-  <span>
-     
-    Testing a mix 
-    TEST_SUBSTITUTION_1
-     of react substitutions 
     <div
       style="color: orange;"
     >
-      TEST_SUBSTITUTION_3
+      a1
     </div>
-     and string substitutions 
-    TEST_SUBSTITUTION_2
-     + 
     <div
       style="color: pink;"
     >
-      TEST_SUBSTITUTION_4
+      b2
     </div>
-    .
-     
-  </span>
-</div>
-`;
-
-exports[`i18n helper getMessage should return the correct message when two react substitutions are made 1`] = `
-<div>
-  <span>
-     
-    Testing a react substitution 
-    <div
-      style="color: red;"
-    >
-      TEST_SUBSTITUTION_1
-    </div>
-     and another 
-    <div
-      style="color: blue;"
-    >
-      TEST_SUBSTITUTION_2
-    </div>
-    .
+    c3
      
   </span>
 </div>

ui/helpers/utils/i18n-helper.test.js

@@ -1,169 +1,93 @@
 import React from 'react';
+import * as Sentry from '@sentry/browser';
+import { getMessage as getMessageShared } from '../../../shared/modules/i18n';
 import { renderWithProvider } from '../../../test/lib/render-helpers';
 import { getMessage } from './i18n-helper';
 
-describe('i18n helper', () => {
-  const TEST_LOCALE_CODE = 'TEST_LOCALE_CODE';
+jest.mock('../../../shared/modules/i18n');
+jest.mock('@sentry/browser');
 
-  const TEST_KEY_1 = 'TEST_KEY_1';
-  const TEST_KEY_2 = 'TEST_KEY_2';
-  const TEST_KEY_3 = 'TEST_KEY_3';
-  const TEST_KEY_4 = 'TEST_KEY_4';
-  const TEST_KEY_5 = 'TEST_KEY_5';
-  const TEST_KEY_6 = 'TEST_KEY_6';
-  const TEST_KEY_6_HELPER = 'TEST_KEY_6_HELPER';
-  const TEST_KEY_7 = 'TEST_KEY_7';
-  const TEST_KEY_7_HELPER_1 = 'TEST_KEY_7_HELPER_1';
-  const TEST_KEY_7_HELPER_2 = 'TEST_KEY_7_HELPER_2';
-  const TEST_KEY_8 = 'TEST_KEY_8';
-  const TEST_KEY_8_HELPER_1 = 'TEST_KEY_8_HELPER_1';
-  const TEST_KEY_8_HELPER_2 = 'TEST_KEY_8_HELPER_2';
+const localeCodeMock = 'te';
+const keyMock = 'testKey';
+const localeMessagesMock = { [keyMock]: { message: 'testMessage' } };
+const errorMock = new Error('testError');
+const messageMock = 'testMessage';
 
-  const TEST_SUBSTITUTION_1 = 'TEST_SUBSTITUTION_1';
-  const TEST_SUBSTITUTION_2 = 'TEST_SUBSTITUTION_2';
-  const TEST_SUBSTITUTION_3 = 'TEST_SUBSTITUTION_3';
-  const TEST_SUBSTITUTION_4 = 'TEST_SUBSTITUTION_4';
-  const TEST_SUBSTITUTION_5 = 'TEST_SUBSTITUTION_5';
-
-  const testLocaleMessages = {
-    [TEST_KEY_1]: {
-      message: 'This is a simple message.',
-      expectedResult: 'This is a simple message.',
-    },
-    [TEST_KEY_2]: {
-      message: 'This is a message with a single non-react substitution $1.',
-    },
-    [TEST_KEY_3]: {
-      message: 'This is a message with two non-react substitutions $1 and $2.',
-    },
-    [TEST_KEY_4]: {
-      message: '$1 - $2 - $3 - $4 - $5',
-    },
-    [TEST_KEY_5]: {
-      message: '$1 - $2 - $3',
-    },
-    [TEST_KEY_6]: {
-      message: 'Testing a react substitution $1.',
-    },
-    [TEST_KEY_6_HELPER]: {
-      message: TEST_SUBSTITUTION_1,
-    },
-    [TEST_KEY_7]: {
-      message: 'Testing a react substitution $1 and another $2.',
-    },
-    [TEST_KEY_7_HELPER_1]: {
-      message: TEST_SUBSTITUTION_1,
-    },
-    [TEST_KEY_7_HELPER_2]: {
-      message: TEST_SUBSTITUTION_2,
-    },
-    [TEST_KEY_8]: {
-      message:
-        'Testing a mix $1 of react substitutions $2 and string substitutions $3 + $4.',
-    },
-    [TEST_KEY_8_HELPER_1]: {
-      message: TEST_SUBSTITUTION_3,
-    },
-    [TEST_KEY_8_HELPER_2]: {
-      message: TEST_SUBSTITUTION_4,
-    },
-  };
-  const t = getMessage.bind(null, TEST_LOCALE_CODE, testLocaleMessages);
-
-  const TEST_SUBSTITUTION_6 = (
-    <div style={{ color: 'red' }} key="test-react-substitutions-1">
-      {t(TEST_KEY_6_HELPER)}
-    </div>
-  );
-  const TEST_SUBSTITUTION_7_1 = (
-    <div style={{ color: 'red' }} key="test-react-substitutions-7-1">
-      {t(TEST_KEY_7_HELPER_1)}
-    </div>
-  );
-  const TEST_SUBSTITUTION_7_2 = (
-    <div style={{ color: 'blue' }} key="test-react-substitutions-7-2">
-      {t(TEST_KEY_7_HELPER_2)}
-    </div>
-  );
-  const TEST_SUBSTITUTION_8_1 = (
-    <div style={{ color: 'orange' }} key="test-react-substitutions-8-1">
-      {t(TEST_KEY_8_HELPER_1)}
-    </div>
-  );
-  const TEST_SUBSTITUTION_8_2 = (
-    <div style={{ color: 'pink' }} key="test-react-substitutions-1">
-      {t(TEST_KEY_8_HELPER_2)}
-    </div>
-  );
+describe('I18N Helper', () => {
+  beforeEach(() => {
+    jest.resetAllMocks();
+  });
 
   describe('getMessage', () => {
-    it('should return the exact message paired with key if there are no substitutions', () => {
-      const result = t(TEST_KEY_1);
-      expect(result).toStrictEqual('This is a simple message.');
-    });
+    it('returns value from getMessage in shared module', () => {
+      getMessageShared.mockReturnValue(messageMock);
 
-    it('should return the correct message when a single non-react substitution is made', () => {
-      const result = t(TEST_KEY_2, [TEST_SUBSTITUTION_1]);
-      expect(result).toStrictEqual(
-        `This is a message with a single non-react substitution ${TEST_SUBSTITUTION_1}.`,
+      expect(
+        getMessage(localeCodeMock, localeMessagesMock, keyMock),
+      ).toStrictEqual(messageMock);
+
+      expect(getMessageShared).toHaveBeenCalledTimes(1);
+      expect(getMessageShared).toHaveBeenCalledWith(
+        localeCodeMock,
+        localeMessagesMock,
+        keyMock,
+        undefined,
+        expect.any(Function),
+        undefined,
       );
     });
 
-    it('should return the correct message when two non-react substitutions are made', () => {
-      const result = t(TEST_KEY_3, [TEST_SUBSTITUTION_1, TEST_SUBSTITUTION_2]);
-      expect(result).toStrictEqual(
-        `This is a message with two non-react substitutions ${TEST_SUBSTITUTION_1} and ${TEST_SUBSTITUTION_2}.`,
+    it('invokes getMessage from shared module with onError callback that logs Sentry exception', () => {
+      getMessage(localeCodeMock, localeMessagesMock, keyMock);
+
+      const onErrorCallback = getMessageShared.mock.calls[0][4];
+      onErrorCallback(errorMock);
+
+      expect(Sentry.captureException).toHaveBeenCalledTimes(1);
+      expect(Sentry.captureException).toHaveBeenCalledWith(errorMock);
+    });
+
+    it('does not provide custom join logic if only strings in substitutions', () => {
+      getMessage(localeCodeMock, localeMessagesMock, keyMock, ['a1', 'a2']);
+
+      expect(getMessageShared).toHaveBeenCalledTimes(1);
+      expect(getMessageShared).toHaveBeenCalledWith(
+        localeCodeMock,
+        localeMessagesMock,
+        keyMock,
+        ['a1', 'a2'],
+        expect.any(Function),
+        undefined,
       );
     });
 
-    it('should return the correct message when multiple non-react substitutions are made', () => {
-      const result = t(TEST_KEY_4, [
-        TEST_SUBSTITUTION_1,
-        TEST_SUBSTITUTION_2,
-        TEST_SUBSTITUTION_3,
-        TEST_SUBSTITUTION_4,
-        TEST_SUBSTITUTION_5,
-      ]);
-      expect(result).toStrictEqual(
-        `${TEST_SUBSTITUTION_1} - ${TEST_SUBSTITUTION_2} - ${TEST_SUBSTITUTION_3} - ${TEST_SUBSTITUTION_4} - ${TEST_SUBSTITUTION_5}`,
+    it('renders substitutions inside span if substitutions include React components', () => {
+      const substitution1 = (
+        <div style={{ color: 'orange' }} key="substitution-1">
+          a1
+        </div>
       );
-    });
 
-    it('should correctly render falsy substitutions', () => {
-      const result = t(TEST_KEY_4, [0, -0, '', false, NaN]);
-      expect(result).toStrictEqual('0 - 0 -  - false - NaN');
-    });
+      const substitution2 = (
+        <div style={{ color: 'pink' }} key="substitution-2">
+          b2
+        </div>
+      );
 
-    it('should render nothing for "null" and "undefined" substitutions', () => {
-      const result = t(TEST_KEY_5, [null, TEST_SUBSTITUTION_2]);
-      expect(result).toStrictEqual(` - ${TEST_SUBSTITUTION_2} - `);
-    });
+      const substitution3 = 'c3';
 
-    it('should return the correct message when a single react substitution is made', () => {
-      const result = t(TEST_KEY_6, [TEST_SUBSTITUTION_6]);
-
-      const { container } = renderWithProvider(result);
-
-      expect(container).toMatchSnapshot();
-    });
-
-    it('should return the correct message when two react substitutions are made', () => {
-      const result = t(TEST_KEY_7, [
-        TEST_SUBSTITUTION_7_1,
-        TEST_SUBSTITUTION_7_2,
+      getMessage(localeCodeMock, localeMessagesMock, keyMock, [
+        substitution1,
+        substitution2,
+        substitution3,
       ]);
 
-      const { container } = renderWithProvider(result);
+      const joinCallback = getMessageShared.mock.calls[0][5];
 
-      expect(container).toMatchSnapshot();
-    });
-
-    it('should return the correct message when substituting a mix of react elements and strings', () => {
-      const result = t(TEST_KEY_8, [
-        TEST_SUBSTITUTION_1,
-        TEST_SUBSTITUTION_8_1,
-        TEST_SUBSTITUTION_2,
-        TEST_SUBSTITUTION_8_2,
+      const result = joinCallback([
+        substitution1,
+        substitution2,
+        substitution3,
       ]);
 
       const { container } = renderWithProvider(result);

ui/helpers/utils/i18n-helper.tsx

@@ -1,46 +1,12 @@
-// cross-browser connection to extension i18n API
 import React from 'react';
-import log from 'loglevel';
-import { Json } from '@metamask/utils';
 import * as Sentry from '@sentry/browser';
-import getFetchWithTimeout from '../../../shared/modules/fetch-with-timeout';
+import {
+  I18NMessageDict,
+  I18NSubstitution,
+  getMessage as getMessageShared,
+} from '../../../shared/modules/i18n';
 import { NETWORK_TYPES } from '../../../shared/constants/network';
 
-const fetchWithTimeout = getFetchWithTimeout();
-
-// From app/_locales folders there is a messages.json file such as app/_locales/en, comes with key and translated results
-// and we use as t('reject') to get the translated message in the codebase
-// and in i18n lib, the translated message is an object (I18NMessage) with message & description -
-// message is the string that will replace the translationKey, and that message may contain replacement variables such as $1, $2, etc.
-// Description is key describing the usage of the message.
-interface I18NMessage {
-  message: string;
-  description?: string;
-}
-
-// The overall translation file is made of same entries
-// translationKey (string) and the I18NMessage as the value.
-interface I18NMessageDict {
-  [translationKey: string]: I18NMessage;
-}
-
-// A parameterized type (or generic type) of maps that use the same structure (translationKey) key
-interface I18NMessageDictMap<R> {
-  [translationKey: string]: R;
-}
-
-const warned: { [localeCode: string]: I18NMessageDictMap<boolean> } = {};
-const missingMessageErrors: I18NMessageDictMap<Error> = {};
-const missingSubstitutionErrors: {
-  [localeCode: string]: I18NMessageDictMap<boolean>;
-} = {};
-
-function getHasSubstitutions(
-  substitutions?: string[],
-): substitutions is string[] {
-  return (substitutions?.length ?? 0) > 0;
-}
-
 /**
  * Returns a localized message for the given key
  *
@@ -56,116 +22,29 @@ export const getMessage = (
   key: string,
   substitutions?: string[],
 ): JSX.Element | string | null => {
-  if (!localeMessages) {
-    return null;
-  }
-  if (!localeMessages[key]) {
-    if (localeCode === 'en') {
-      if (!missingMessageErrors[key]) {
-        missingMessageErrors[key] = new Error(
-          `Unable to find value of key "${key}" for locale "${localeCode}"`,
-        );
-        Sentry.captureException(missingMessageErrors[key]);
-        log.error(missingMessageErrors[key]);
-        if (process.env.IN_TEST) {
-          throw missingMessageErrors[key];
-        }
-      }
-    } else if (!warned[localeCode] || !warned[localeCode][key]) {
-      if (!warned[localeCode]) {
-        warned[localeCode] = {};
-      }
-      warned[localeCode][key] = true;
-      log.warn(
-        `Translator - Unable to find value of key "${key}" for locale "${localeCode}"`,
-      );
-    }
-    return null;
-  }
-
-  const hasSubstitutions = getHasSubstitutions(substitutions);
-  const hasReactSubstitutions =
-    hasSubstitutions &&
-    substitutions?.some(
+  const hasReactSubstitutions = substitutions?.some(
     (element) =>
       element !== null &&
       (typeof element === 'function' || typeof element === 'object'),
   );
-  const entry = localeMessages[key];
-  const phrase = entry.message;
-  // perform substitutions
-  if (hasSubstitutions) {
-    const parts = phrase.split(/(\$\d)/gu);
 
-    const substitutedParts = parts.map((part: string) => {
-      const subMatch = part.match(/\$(\d)/u);
-      if (!subMatch) {
-        return part;
-      }
-      const substituteIndex = Number(subMatch[1]) - 1;
-      if (
-        (substitutions[substituteIndex] === null ||
-          substitutions[substituteIndex] === undefined) &&
-        !missingSubstitutionErrors[localeCode]?.[key]
-      ) {
-        if (!missingSubstitutionErrors[localeCode]) {
-          missingSubstitutionErrors[localeCode] = {};
-        }
-        missingSubstitutionErrors[localeCode][key] = true;
-        const error = new Error(
-          `Insufficient number of substitutions for key "${key}" with locale "${localeCode}"`,
-        );
-        log.error(error);
+  const join = hasReactSubstitutions
+    ? (parts: I18NSubstitution[]) => <span> {parts} </span>
+    : undefined;
+
+  const onError = (error: Error) => {
     Sentry.captureException(error);
-      }
-      return substitutions?.[substituteIndex];
-    });
-
-    return hasReactSubstitutions ? (
-      <span> {substitutedParts} </span>
-    ) : (
-      substitutedParts.join('')
-    );
-  }
-  return phrase;
   };
 
-export async function fetchLocale(
-  localeCode: string,
-): Promise<I18NMessageDict> {
-  try {
-    const response = await fetchWithTimeout(
-      `./_locales/${localeCode}/messages.json`,
+  return getMessageShared(
+    localeCode,
+    localeMessages,
+    key,
+    substitutions,
+    onError,
+    join,
   );
-    return await response.json();
-  } catch (error) {
-    log.error(`failed to fetch ${localeCode} locale because of ${error}`);
-    return {};
-  }
-}
-
-const relativeTimeFormatLocaleData = new Set();
-
-export async function loadRelativeTimeFormatLocaleData(
-  localeCode: string,
-): Promise<void> {
-  const languageTag = localeCode.split('_')[0];
-  if (
-    Intl.RelativeTimeFormat &&
-    typeof (Intl.RelativeTimeFormat as any).__addLocaleData === 'function' &&
-    !relativeTimeFormatLocaleData.has(languageTag)
-  ) {
-    const localeData = await fetchRelativeTimeFormatData(languageTag);
-    (Intl.RelativeTimeFormat as any).__addLocaleData(localeData);
-  }
-}
-
-async function fetchRelativeTimeFormatData(languageTag: string): Promise<Json> {
-  const response = await fetchWithTimeout(
-    `./intl/${languageTag}/relative-time-format-data.json`,
-  );
-  return await response.json();
-}
+};
 
 export function getNetworkLabelKey(network: string): string {
   if (network === NETWORK_TYPES.LINEA_GOERLI) {

ui/hooks/useTransactionDisplayData.test.js

@@ -15,7 +15,6 @@ import {
   getNativeCurrency,
   getNfts,
 } from '../ducks/metamask/metamask';
-import { getMessage } from '../helpers/utils/i18n-helper';
 import messages from '../../app/_locales/en/messages.json';
 import { ASSET_ROUTE, DEFAULT_ROUTE } from '../helpers/constants/routes';
 import { CHAIN_IDS } from '../../shared/constants/network';
@@ -25,6 +24,7 @@ import {
   TransactionStatus,
 } from '../../shared/constants/transaction';
 import { formatDateWithYearContext } from '../helpers/utils/util';
+import { getMessage } from '../helpers/utils/i18n-helper';
 import * as i18nhooks from './useI18nContext';
 import * as useTokenFiatAmountHooks from './useTokenFiatAmount';
 import { useTransactionDisplayData } from './useTransactionDisplayData';

ui/index.test.js

@@ -29,7 +29,7 @@ const esMessages = {
   },
 };
 
-jest.mock('./helpers/utils/i18n-helper', () => ({
+jest.mock('../shared/modules/i18n', () => ({
   fetchLocale: jest.fn((locale) => (locale === 'en' ? enMessages : esMessages)),
   loadRelativeTimeFormatLocaleData: jest.fn(),
 }));

ui/store/actions.ts

@@ -72,7 +72,7 @@ import { NOTIFICATIONS_EXPIRATION_DELAY } from '../helpers/constants/notificatio
 import {
   fetchLocale,
   loadRelativeTimeFormatLocaleData,
-} from '../helpers/utils/i18n-helper';
+} from '../../shared/modules/i18n';
 import { decimalToHex } from '../../shared/modules/conversion.utils';
 import { TxGasFees, PriorityLevels } from '../../shared/constants/gas';
 import {