chore: [LW-10534] translation package (#1154)

* chore(extension): add translation package

* chore(extension): use translation package in browser-extension

* chore(extension): use translation package in core

* chore(extension): use translation package in staking

* chore(extension): remove Language obj from common package

* chore(extension): fix storybook in staking package

* fix(extension): fix e2e

* chore(extension): fix storybook in core package

* chore(extension): add typings for core and cardano packages

* test(extension): fix issue with missing translations in tests

---------

Co-authored-by: wklos-iohk <wojciech.klos@iohk.io>

apps/browser-extension-wallet/package.json

@@ -52,6 +52,7 @@
     "@lace/common": "0.1.0",
     "@lace/core": "0.1.0",
     "@lace/staking": "0.1.0",
+    "@lace/translation": "0.1.0",
     "@lace/ui": "^0.1.0",
     "@react-rxjs/core": "^0.9.8",
     "@react-rxjs/utils": "^0.9.5",

apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/ThemeSwitcher.tsx

@@ -9,7 +9,7 @@ import MoonIcon from '../../../../assets/icons/moon.component.svg';
 import { useBackgroundServiceAPIContext } from '@providers/BackgroundServiceAPI';
 import { themes, useAnalyticsContext } from '@providers';
 import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';
-import { TranslationKey } from '@lib/translations/types';
+import type { TranslationKey } from '@lace/translation';
 
 type ThemeAnalyticsEvents<T> = Record<themes, T>;
 

apps/browser-extension-wallet/src/components/WalletStatus/WalletStatusContainer.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSyncStatus } from '@src/stores';
 import { WalletStatus, Status } from './WalletStatus';
-import { TranslationKey } from '@lib/translations/types';
+import type { TranslationKey } from '@lace/translation';
 
 const DEFAULT_WALLET_STATUS: { status: Status; text: TranslationKey } = {
   status: Status.SYNCING,

apps/browser-extension-wallet/src/features/address-book/components/AddressDetailDrawer/types/index.ts

@@ -1,4 +1,4 @@
-import { TranslationKey } from '@lib/translations/types';
+import type { TranslationKey } from '@lace/translation';
 
 export enum AddressDetailsSteps {
   DETAILS,

apps/browser-extension-wallet/src/features/dapp/components/__tests__/Connect.test.tsx

@@ -8,7 +8,7 @@ import React from 'react';
 import '@testing-library/jest-dom';
 import { cleanup, render, screen, waitFor, within } from '@testing-library/react';
 import { Connect } from '../Connect';
-import i18n from '@lib/i18n';
+import { i18n } from '@lace/translation';
 import { I18nextProvider } from 'react-i18next';
 
 jest.mock('react-router-dom', () => ({

apps/browser-extension-wallet/src/features/dapp/components/confirm-transaction/testing.utils.tsx

@@ -10,7 +10,7 @@ import {
   ViewFlowProvider
 } from '@src/providers';
 import { APP_MODE_BROWSER } from '@src/utils/constants';
-import i18n from '@lib/i18n';
+import { i18n } from '@lace/translation';
 import { PostHogClientProvider } from '@providers/PostHogClientProvider';
 import { postHogClientMocks } from '@src/utils/mocks/test-helpers';
 import React from 'react';

apps/browser-extension-wallet/src/features/dapp/config/ViewsConfig.tsx

@@ -5,7 +5,7 @@ import { DappTransactionFail } from '../components/DappTransactionFail';
 import { IViewAction, IViewState } from '../../../providers';
 import { DappConfirmData as ConfirmData } from '../components/ConfirmData';
 import { SignData } from '../components/SignData';
-import { TranslationKey } from '@lib/translations/types';
+import type { TranslationKey } from '@lace/translation';
 export enum DAPP_VIEWS {
   CONNECT = 'connect',
   CONFIRM_TX = 'confirm-tx',

apps/browser-extension-wallet/src/features/receive-info/components/__tests__/ReceiveInfo.test.tsx

@@ -5,7 +5,7 @@ import { I18nextProvider } from 'react-i18next';
 import { render } from '@testing-library/react';
 import { ReceiveInfo, ReceiveInfoProps } from '../ReceiveInfo';
 import '@testing-library/jest-dom';
-import i18n from '../../../../lib/i18n';
+import { i18n } from '../../../../lib/i18n';
 import { mockWalletInfoTestnet } from '@src/utils/mocks/test-helpers';
 import { ThemeProvider } from '@providers/ThemeProvider';
 

apps/browser-extension-wallet/src/features/unlock-wallet/components/__tests__/UnlockWallet.test.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { I18nextProvider } from 'react-i18next';
 import { fireEvent, render } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import i18n from '../../../../lib/i18n';
+import { i18n } from '../../../../lib/i18n';
 import { UnlockWallet, UnlockWalletProps } from '../UnlockWallet';
 import { MemoryRouter } from 'react-router-dom';
 

apps/browser-extension-wallet/src/hooks/__tests__/useCollateral.test.tsx

@@ -17,7 +17,7 @@ import { StoreProvider } from '@src/stores';
 import { COLLATERAL_ADA_AMOUNT, COLLATERAL_AMOUNT_LOVELACES, useCollateral } from '@hooks';
 import { APP_MODE_BROWSER } from '@src/utils/constants';
 import { I18nextProvider } from 'react-i18next';
-import i18n from '@lib/i18n';
+import { i18n } from '@lace/translation';
 import { Wallet } from '@lace/cardano';
 import { act } from 'react-dom/test-utils';
 import { waitFor } from '@testing-library/react';

apps/browser-extension-wallet/src/hooks/__tests__/useOnAddressSave.test.tsx

@@ -15,7 +15,7 @@ const mockSendEventToPostHog = jest.fn();
 
 import { renderHook, act } from '@testing-library/react-hooks';
 import { I18nextProvider } from 'react-i18next';
-import i18n from '@lib/i18n';
+import { i18n } from '@lace/translation';
 import { useOnAddressSave } from '../useOnAddressSave';
 import React from 'react';
 import { PostHogAction } from '@providers/AnalyticsProvider/analyticsTracker';

apps/browser-extension-wallet/src/hooks/useActionExecution.ts

@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { toast, ToastProps } from '@lace/common';
 import ErrorIcon from '../assets/icons/address-error-icon.component.svg';
-import { TranslationKey } from '@lib/translations/types';
+import type { TranslationKey } from '@lace/translation';
 
 export const TOAST_DEFAULT_DURATION = 3;
 

apps/browser-extension-wallet/src/hooks/useInitializeTx.ts

@@ -7,7 +7,7 @@ import { getReachedMaxAmountList } from '@src/views/browser-view/features/send-t
 import { useWalletStore } from '@src/stores';
 import { useMaxAda } from './useMaxAda';
 import { UseTranslationResponse } from 'react-i18next';
-import { TranslationKey } from '@lib/translations/types';
+import type { TranslationKey } from '@lace/translation';
 
 const { buildTransactionProps, setMissingCoins, getTotalMinimumCoins } = Wallet;
 

apps/browser-extension-wallet/src/lib/i18n.ts

@@ -1,35 +1 @@
-import { Language } from '@lace/common';
-import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';
-import * as translations from './translations';
-
-type I18NextResources = Partial<Record<Language, { translation: string }>>;
-
-const DEFAULT_LANG = Language.en;
-
-const resources: I18NextResources = {};
-for (const lang of Object.values(Language)) {
-  Object.assign(resources, {
-    [lang]: {
-      translation: {
-        ...translations[lang]
-      }
-    }
-  });
-}
-
-i18n.use(initReactI18next).init({
-  fallbackLng: DEFAULT_LANG,
-  interpolation: {
-    // not needed for react as it escapes by default
-    escapeValue: false
-  },
-  lng: Language.en,
-  resources,
-  react: {
-    useSuspense: false,
-    transSupportBasicHtmlNodes: true
-  }
-});
-
-export default i18n;
+export { i18n } from '@lace/translation';

apps/browser-extension-wallet/src/lib/storage/helpers/index.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { TranslationKey } from '@lib/translations/types';
+import type { TranslationKey } from '@lace/translation';
 import Dexie from 'dexie';
 
 const isAddressError = /address/i;

apps/browser-extension-wallet/src/types/side-menu.ts

@@ -1,4 +1,4 @@
-import { TranslationKey } from '@lib/translations/types';
+import type { TranslationKey } from '@lace/translation';
 import { MenuItemList } from '@utils/constants';
 import { FC, SVGProps } from 'react';
 

apps/browser-extension-wallet/src/typings/i18next.d.ts

@@ -1,5 +1,5 @@
 import 'i18next';
-import { Translations } from '../lib/translations/types';
+import type { Translations } from '@lace/translation';
 
 declare module 'i18next' {
   interface CustomTypeOptions {

apps/browser-extension-wallet/src/views/browser-view/components/PortfolioBalance/PortfolioBalanceLabel/__tests__/PortfolioBalanceLabel.test.tsx

@@ -4,7 +4,7 @@ import { render } from '@testing-library/react';
 import { I18nextProvider } from 'react-i18next';
 import { PortfolioBalanceLabel, PortfolioBalanceLabelProps } from '../PortfolioBalanceLabel';
 import * as Stores from '@src/stores';
-import i18n from '@lib/i18n';
+import { i18n } from '@lace/translation';
 
 jest.mock('@src/stores', (): typeof Stores => ({
   ...jest.requireActual<typeof Stores>('@src/stores'),

apps/browser-extension-wallet/src/views/browser-view/components/SideMenu/__tests__/SideMenu.test.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { Wallet } from '@lace/cardano';
 import { render, queryByText } from '@testing-library/react';
 import '@testing-library/jest-dom';
-import i18n from '../../../../../lib/i18n';
+import { i18n } from '../../../../../lib/i18n';
 import { I18nextProvider } from 'react-i18next';
 import { BrowserRouter, Switch, Route } from 'react-router-dom';
 import { SideMenu } from '../SideMenu';

apps/browser-extension-wallet/src/views/browser-view/components/WalletUsedAddressesDrawer/__tests__/WalletUsedAddressesDrawer.test.tsx

@@ -3,7 +3,7 @@ import { I18nextProvider } from 'react-i18next';
 import { render } from '@testing-library/react';
 import '@testing-library/jest-dom';
 import { Wallet } from '@lace/cardano';
-import i18n from '../../../../../lib/i18n';
+import { i18n } from '../../../../../lib/i18n';
 import { buildMockProviders } from '../../../../../utils/mocks/context-providers';
 import { WalletUsedAddressesDrawer } from '../WalletUsedAddressesDrawer';
 import { from } from 'rxjs';

apps/browser-extension-wallet/src/views/browser-view/features/activity/components/ActivityDetail.tsx

@@ -19,7 +19,7 @@ import { ActivityDetail as ActivityDetailType } from '@src/types';
 import { useCurrencyStore } from '@providers';
 import { TransactionDetailsProxy } from './TransactionDetailsProxy';
 import { useTranslation } from 'react-i18next';
-import { TranslationKey } from '@lib/translations/types';
+import type { TranslationKey } from '@lace/translation';
 
 const MAX_SUMMARY_ADDRESSES = 5;
 

apps/browser-extension-wallet/src/views/browser-view/features/adress-book/components/AddressBookEmpty/__tests__/AddressBookEmpty.test.tsx

@@ -5,7 +5,7 @@ import { AddressBookEmpty } from '../AddressBookEmpty';
 import '@testing-library/jest-dom';
 
 import { I18nextProvider } from 'react-i18next';
-import i18n from '../../../../../../../lib/i18n';
+import { i18n } from '../../../../../../../lib/i18n';
 
 jest.mock('react-router', () => ({
   // eslint-disable-next-line @typescript-eslint/no-explicit-any

apps/browser-extension-wallet/src/views/browser-view/features/adress-book/components/AddressForm/__tests__/AddressForm.test.tsx

@@ -5,7 +5,7 @@ import { AddressForm, AddressFormProps } from '../AddressForm';
 import '@testing-library/jest-dom';
 
 import { I18nextProvider } from 'react-i18next';
-import i18n from '../../../../../../../lib/i18n';
+import { i18n } from '../../../../../../../lib/i18n';
 import { buildMockProviders } from '@src/utils/mocks/context-providers';
 
 jest.mock('react-router', () => ({

apps/browser-extension-wallet/src/views/browser-view/features/assets/components/AssetDetailsDrawer/__tests__/AssetDetails.test.tsx

@@ -5,7 +5,7 @@ import { queryByTestId as queryByTestIdInContainer, render } from '@testing-libr
 import { I18nextProvider } from 'react-i18next';
 import { AssetDetails, AssetDetailsProps } from '../AssetDetails';
 import { StateStatus } from '@src/stores/types';
-import i18n from '@lib/i18n';
+import { i18n } from '@lace/translation';
 import * as Stores from '@src/stores';
 import { ExternalLinkOpenerProvider } from '@providers';
 

apps/browser-extension-wallet/src/views/browser-view/features/multi-address/MultiAddressBalanceVisibleModal.tsx

@@ -1,10 +1,10 @@
 import React, { ReactElement } from 'react';
 import { WarningModal } from '@views/browser/components';
-import { useTranslate } from '@lace/core';
 import { useLocalStorage } from '@hooks';
 import { useWalletStore } from '@stores';
 import { useAnalyticsContext } from '@providers';
 import { PostHogAction } from '@lace/common';
+import { useTranslation } from 'react-i18next';
 
 export const MultiAddressBalanceVisibleModal = (): ReactElement => {
   const { walletState } = useWalletStore();
@@ -13,7 +13,7 @@ export const MultiAddressBalanceVisibleModal = (): ReactElement => {
     'showMultiAddressModal',
     walletState.addresses.length > 1
   );
-  const { t } = useTranslate();
+  const { t } = useTranslation();
 
   const handleCloseModal = () => {
     setShowMultiAddressModal(false);

apps/browser-extension-wallet/src/views/browser-view/features/multi-wallet/hardware-wallet/steps/Connect.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable unicorn/no-null */
 import { Wallet } from '@lace/cardano';
 import { WalletSetupConnectHardwareWalletStepRevamp } from '@lace/core';
-import { TranslationKey } from '@lib/translations/types';
+import { TranslationKey } from '@lace/translation';
 import { TFunction } from 'i18next';
 import React, { useCallback, useEffect, useState, VFC } from 'react';
 import { useTranslation } from 'react-i18next';

apps/browser-extension-wallet/src/views/browser-view/features/nfts/components/CreateFolder/NameForm.tsx

@@ -2,7 +2,7 @@ import React, { ChangeEvent, ReactElement, useEffect, useState } from 'react';
 import { Input } from '@lace/common';
 import { useTranslation } from 'react-i18next';
 import styles from './NameForm.module.scss';
-import { TranslationKey } from '@lib/translations/types';
+import type { TranslationKey } from '@lace/translation';
 
 interface GeneralSettingsDrawerProps {
   usedFolderNames: Array<string>;

apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/CoinInput/__tests__/useSelectedCoins.test.ts

@@ -21,7 +21,7 @@ const mockUseSpentBalances = jest.fn().mockReturnValue({});
 /* eslint-disable import/imports-first */
 import { renderHook } from '@testing-library/react-hooks';
 import { I18nextProvider } from 'react-i18next';
-import i18n from '@lib/i18n';
+import { i18n } from '@lace/translation';
 import { UseSelectedCoinsProps, useSelectedCoins } from '../useSelectedCoins';
 import { COIN_SELECTION_ERRORS } from '@hooks/useInitializeTx';
 import { mockAsset } from '@src/utils/mocks/test-helpers';

apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/Form/__tests__/MetadataInput.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import '@testing-library/jest-dom';
 import { cleanup, fireEvent, render, screen, waitFor } from '@testing-library/react';
 import { MetadataInput } from '../MetadataInput';
-import i18n from '@lib/i18n';
+import { i18n } from '@lace/translation';
 import { I18nextProvider } from 'react-i18next';
 
 const WrappedMetadataInput = () => (

apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/SendTransactionDrawer/Footer.tsx

@@ -38,7 +38,7 @@ import { getAddressToSave } from '@src/utils/validators';
 import { useAnalyticsContext } from '@providers';
 import { txSubmitted$ } from '@providers/AnalyticsProvider/onChain';
 import { withSignTxConfirmation } from '@lib/wallet-api-ui';
-import { TranslationKey } from '@lib/translations/types';
+import type { TranslationKey } from '@lace/translation';
 
 export const nextStepBtnLabels: Partial<Record<Sections, TranslationKey>> = {
   [Sections.FORM]: 'browserView.transaction.send.footer.review',
@@ -232,22 +232,28 @@ export const Footer = withAddressBookContext(
       }
 
       switch (true) {
-        case isReviewingAddress:
+        case isReviewingAddress: {
           return handleReviewAddress('UPDATE');
-        case isSummaryStep && !isInMemoryWallet:
+        }
+        case isSummaryStep && !isInMemoryWallet: {
           if (isPopupView) {
             return openContinueDialog();
           }
           return handleVerifyPass();
-        case isConfirmPass:
+        }
+        case isConfirmPass: {
           return handleVerifyPass();
-        case txHasSucceeded:
+        }
+        case txHasSucceeded: {
           return onCloseSubmitedTransaction();
-        case txHasFailed:
+        }
+        case txHasFailed: {
           setSubmitingTxState({ isPasswordValid: true });
           return setSection(sectionsConfig.form);
-        default:
+        }
+        default: {
           return setSection();
+        }
       }
     }, [
       currentSection.currentSection,

apps/browser-extension-wallet/src/views/browser-view/features/send-transaction/components/SendTransactionDrawer/HeaderView.tsx

@@ -36,7 +36,7 @@ import { SelectTokenButton } from '@components/AssetSelectionButton/SelectTokens
 import { AssetsCounter } from '@components/AssetSelectionButton/AssetCounter';
 import { saveTemporaryTxDataInStorage } from '../../helpers';
 import { useAddressBookStore } from '@src/features/address-book/store';
-import { TranslationKey } from '@lib/translations/types';
+import type { TranslationKey } from '@lace/translation';
 
 export const useHandleClose = (): {
   onClose: () => void;

apps/browser-extension-wallet/src/views/browser-view/features/settings/components/Collateral/__tests__/CollateralDrawer.test.tsx

@@ -26,7 +26,7 @@ import '@testing-library/jest-dom';
 import { I18nextProvider } from 'react-i18next';
 import { StoreProvider, WalletStore } from '@src/stores';
 import { APP_MODE_BROWSER } from '@src/utils/constants';
-import i18n from '@lib/i18n';
+import { i18n } from '@lace/translation';
 import {
   AnalyticsProvider,
   AppSettingsProvider,
@@ -654,7 +654,7 @@ describe('Testing CollateralDrawer component', () => {
           }
         };
         mockGetBackgroundStorage.mockReturnValue({ message });
-        const clearBackgroundStorageMock = jest.fn().mockImplementation(async () => await true);
+        const clearBackgroundStorageMock = jest.fn().mockImplementation(async () => true);
 
         render(
           <CollateralDrawer
@@ -800,7 +800,7 @@ describe('Testing CollateralDrawer component', () => {
           }
         };
         mockGetBackgroundStorage.mockReturnValue({ message });
-        const clearBackgroundStorageMock = jest.fn().mockImplementation(async () => await true);
+        const clearBackgroundStorageMock = jest.fn().mockImplementation(async () => true);
 
         render(<CollateralDrawer hasCollateral visible unspendableLoaded onClose={jest.fn()} />, {
           wrapper: getWrapper({

apps/browser-extension-wallet/src/views/browser-view/features/settings/components/Collateral/hardware-wallet/FooterHW.tsx

@@ -9,7 +9,7 @@ import { useBackgroundServiceAPIContext } from '@providers';
 import { BrowserViewSections, MessageTypes } from '@lib/scripts/types';
 import { SectionConfig } from '@src/views/browser-view/stores';
 import { useBuiltTxState } from '@src/views/browser-view/features/send-transaction';
-import { TranslationKey } from '@lib/translations/types';
+import type { TranslationKey } from '@lace/translation';
 
 export const nextStepBtnLabels: Partial<Record<Sections, TranslationKey>> = {
   [Sections.SUCCESS_TX]: 'browserView.transaction.send.footer.viewTransaction',

apps/browser-extension-wallet/src/views/browser-view/features/settings/components/TermsDrawer.tsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import cn from 'classnames';
 import { Drawer, DrawerHeader, DrawerNavigation } from '@lace/common';
-import { LegalTranslations, useTranslate } from '@lace/core';
+import { LegalTranslations } from '@lace/core';
 import styles from './SettingsLayout.module.scss';
+import { useTranslation } from 'react-i18next';
 
 interface GeneralSettingsDrawerProps {
   visible: boolean;
@@ -16,7 +17,7 @@ export const TermsDrawer = ({
   onClose,
   popupView = false
 }: GeneralSettingsDrawerProps): React.ReactElement => {
-  const { t } = useTranslate();
+  const { t } = useTranslation();
 
   return (
     <Drawer