Feat/add language selection es (#2016)

* feat: add initI18n to use selected language with fallback

* feat: add analytics types for language selection

* feat: add background services language change function

* feat: add language selection in app

* fix: remove hardcoded search placeholder

* feat: add storage listener for language change

* feat: add missing translation keys

* fix: add missing bitcoin-mode translation keys

* fix: use globalThis instead of window object

* fix: add missing translations

* fix: remove state flicker from translation preference loading

* feat: add spanish switch

* fix: add misspelt english translation for stake certificate

* feat: add spanish translations

* fix: missing translations

---------

Co-authored-by: Lukasz Jagiela <[email protected]>

Author: mchappell

apps/browser-extension-wallet/src/components/MainLoader/MainLoader.tsx

@@ -5,18 +5,17 @@ import { useTranslation } from 'react-i18next';
 import styles from './MainLoader.module.scss';
 
 export interface MainLoaderProps {
-  text?: string;
   overlay?: boolean;
 }
 
-export const MainLoader = ({ text, overlay = false }: MainLoaderProps): React.ReactElement => {
+export const MainLoader = ({ overlay = false }: MainLoaderProps): React.ReactElement => {
   const { t } = useTranslation();
 
   return (
     <div className={classNames([styles.loaderContainer, { [styles.overlay]: overlay }])} data-testid="main-loader">
       <Loader className={styles.loader} data-testid="main-loader-image" />
       <p className={styles.loaderText} data-testid="main-loader-text">
-        {text ?? t('general.loading')}
+        {t('general.loading')}
       </p>
     </div>
   );

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

@@ -8,6 +8,8 @@ import {
   Links,
   LockWallet,
   NetworkChoise,
+  LanguageChoice,
+  LanguageInfo,
   RenameWalletDrawer,
   Separator,
   SettingsLink,
@@ -98,6 +100,11 @@ export const DropdownMenuOverlay: VFC<Props> = ({
     sendAnalyticsEvent(PostHogAction.UserWalletProfileNetworkClick);
   };
 
+  const handleLanguageChoice = () => {
+    setCurrentSection(Sections.Language);
+    sendAnalyticsEvent(PostHogAction.UserWalletProfileLanguageClick);
+  };
+
   const goBackToMainSection = useCallback(() => setCurrentSection(Sections.Main), []);
 
   useEffect(() => {
@@ -209,6 +216,7 @@ export const DropdownMenuOverlay: VFC<Props> = ({
                 />
               </div>
             )}
+            <LanguageChoice onClick={handleLanguageChoice} />
             <NetworkChoise onClick={handleNetworkChoise} />
             {lockWalletButton && (
               <>
@@ -219,6 +227,7 @@ export const DropdownMenuOverlay: VFC<Props> = ({
         </div>
       )}
       {currentSection === Sections.NetworkInfo && <NetworkInfo onBack={goBackToMainSection} />}
+      {currentSection === Sections.Language && <LanguageInfo onBack={goBackToMainSection} />}
       {currentSection === Sections.WalletAccounts && <WalletAccounts onBack={goBackToMainSection} isPopup={isPopup} />}
       {isRenamingWallet && (
         <RenameWalletDrawer open={isRenamingWallet} popupView={isPopup} onClose={() => setIsRenamingWallet(false)} />

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

@@ -0,0 +1,44 @@
+import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import cn from 'classnames';
+import styles from '../DropdownMenuOverlay.module.scss';
+import { useBackgroundServiceAPIContext } from '@providers';
+import { storage as webStorage } from 'webextension-polyfill';
+
+type LanguageChoiceProps = {
+  onClick: () => void;
+};
+
+export const LanguageChoice = ({ onClick }: LanguageChoiceProps): React.ReactElement => {
+  const { t } = useTranslation();
+  const { getBackgroundStorage } = useBackgroundServiceAPIContext();
+  const [language, setLanguage] = useState<string>('en');
+  const [loadingLanguage, setLoadingLanguage] = useState(true);
+
+  useEffect(() => {
+    const getLanguage = async () => {
+      const { languageChoice } = await getBackgroundStorage();
+      if (languageChoice) setLanguage(languageChoice);
+      setLoadingLanguage(false);
+    };
+    getLanguage();
+    webStorage.onChanged.addListener(getLanguage);
+  }, [getBackgroundStorage, setLoadingLanguage]);
+
+  return (
+    <div
+      data-testid="header-menu-language-choice-container"
+      className={cn(styles.menuItem, styles.cta)}
+      onClick={() => onClick()}
+    >
+      <div className={styles.networkChoise}>
+        <span data-testid="header-menu-language-choice-label">{t('browserView.topNavigationBar.links.language')}</span>
+        {!loadingLanguage && (
+          <span data-testid="header-menu-language-choice-value" className={styles.value}>
+            {language || 'en'}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+};

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

@@ -0,0 +1,71 @@
+/* eslint-disable unicorn/no-null */
+import React, { useCallback, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { NavigationButton, PostHogAction } from '@lace/common';
+import styles from './NetworkInfo.module.scss';
+import { useBackgroundServiceAPIContext } from '@providers';
+import { Radio, RadioChangeEvent } from 'antd';
+import { usePostHogClientContext } from '@providers/PostHogClientProvider';
+import { storage as webStorage } from 'webextension-polyfill';
+import type { Language } from '@lace/translation';
+
+type LanguageChoiceProps = {
+  onBack: () => void;
+};
+
+const LANG_CHOICES = ['en', 'es']; // hardcoding for v1 only
+
+export const LanguageInfo = ({ onBack }: LanguageChoiceProps): React.ReactElement => {
+  const { t } = useTranslation();
+  const [language, setLanguage] = useState<Language | null>(null);
+  const posthog = usePostHogClientContext();
+
+  const { getBackgroundStorage, handleChangeLanguage } = useBackgroundServiceAPIContext();
+
+  useEffect(() => {
+    const getLanguage = async () => {
+      const { languageChoice } = await getBackgroundStorage();
+      if (languageChoice) setLanguage(languageChoice);
+    };
+    webStorage.onChanged.addListener(getLanguage);
+    getLanguage();
+  }, [getBackgroundStorage]);
+
+  const handleLanguageChangeRequest = useCallback(
+    (e: RadioChangeEvent) => {
+      handleChangeLanguage(e.target.value);
+      posthog.sendEvent(PostHogAction.UserWalletProfileLanguageSelectClick, { language: e.target.value });
+    },
+    [handleChangeLanguage, posthog]
+  );
+
+  return (
+    <div data-testid="user-dropdown-language-info-section" className={styles.container}>
+      <div className={styles.navigation} data-testid="drawer-navigation">
+        <NavigationButton iconClassName={styles.iconClassName} icon="arrow" onClick={onBack} />
+      </div>
+      <div className={styles.titleSection}>
+        <div data-testid="user-dropdown-language-title" className={styles.title}>
+          {t('browserView.settings.wallet.language.title')}
+        </div>
+        <div data-testid="user-dropdown-language-description" className={styles.subTitle}>
+          {t('browserView.settings.wallet.language.drawerDescription')}
+        </div>
+      </div>
+      <div className={styles.content} data-testid="user-dropdown-language-choice">
+        <Radio.Group
+          className={styles.radioGroup}
+          onChange={handleLanguageChangeRequest}
+          value={language}
+          data-testid={'language-choice-radio-group'}
+        >
+          {LANG_CHOICES.map((choice) => (
+            <Radio key={`language-choice-${choice}`} value={choice} className={styles.radioLabel}>
+              {choice}
+            </Radio>
+          ))}
+        </Radio.Group>
+      </div>
+    </div>
+  );
+};

apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/NetworkInfo.module.scss

@@ -35,3 +35,10 @@
     font-size: 14px !important;
   }
 }
+
+.radioGroup {
+  color: var(--text-color-primary) !important;
+  label {
+    color: var(--text-color-primary) !important;
+  }
+}

apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/components/index.ts

@@ -12,3 +12,5 @@ export * from './NetworkInfo';
 export * from './AddNewWalletLink';
 export * from './AddNewBitcoinWalletLink';
 export * from './RenameWalletDrawer';
+export * from './LanguageInfo';
+export * from './LanguageChoice';

apps/browser-extension-wallet/src/components/MainMenu/DropdownMenuOverlay/types.ts

@@ -1,5 +1,6 @@
 export enum Sections {
   Main = 'main',
   NetworkInfo = 'network_info',
-  WalletAccounts = 'wallet_accounts'
+  WalletAccounts = 'wallet_accounts',
+  Language = 'language'
 }

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

@@ -9,6 +9,9 @@ import { setBackgroundStorage } from '@lib/scripts/background/storage';
 import { useCustomSubmitApi } from '@hooks/useCustomSubmitApi';
 import { bitcoinWalletManager } from '@lib/wallet-api-ui';
 import { useCurrentBlockchain } from '@src/multichain';
+import { useBackgroundServiceAPIContext } from '@providers';
+import { initI18n } from '@lace/translation';
+import { Message, MessageTypes } from '@lib/scripts/types';
 
 export const useAppInit = (): void => {
   const {
@@ -26,6 +29,28 @@ export const useAppInit = (): void => {
   const walletState = useWalletState();
   const { environmentName, currentChain } = useWalletStore();
   const { getCustomSubmitApiForNetwork } = useCustomSubmitApi();
+  const backgroundServices = useBackgroundServiceAPIContext();
+
+  useEffect(() => {
+    const subscription = backgroundServices.requestMessage$?.subscribe(({ type, data }: Message): void => {
+      if (type === MessageTypes.CHANGE_LANGUAGE) {
+        initI18n(data);
+        backgroundServices.setBackgroundStorage({ languageChoice: data });
+      }
+    });
+
+    backgroundServices
+      .getBackgroundStorage()
+      .then((bs) => {
+        initI18n(bs.languageChoice ?? globalThis.navigator.language ?? 'en');
+      })
+      .catch((error) => {
+        // eslint-disable-next-line no-console
+        console.log(error);
+      });
+
+    return () => subscription.unsubscribe();
+  }, [backgroundServices]);
 
   useEffect(() => {
     setWalletState(walletState);

apps/browser-extension-wallet/src/lib/scripts/background/config.ts

@@ -23,6 +23,7 @@ export const backgroundServiceProperties: RemoteApiProperties<BackgroundService>
   handleOpenNamiBrowser: RemoteApiPropertyType.MethodReturningPromise,
   closeAllTabsAndOpenPopup: RemoteApiPropertyType.MethodReturningPromise,
   handleChangeTheme: RemoteApiPropertyType.MethodReturningPromise,
+  handleChangeLanguage: RemoteApiPropertyType.MethodReturningPromise,
   handleChangeMode: RemoteApiPropertyType.MethodReturningPromise,
   clearBackgroundStorage: RemoteApiPropertyType.MethodReturningPromise,
   getBackgroundStorage: RemoteApiPropertyType.MethodReturningPromise,

apps/browser-extension-wallet/src/lib/scripts/background/services/utilityServices.ts

@@ -42,6 +42,7 @@ import { POPUP_WINDOW_NAMI_TITLE } from '@utils/constants';
 import { catchAndBrandExtensionApiError } from '@utils/catch-and-brand-extension-api-error';
 import { initCardanoTokenPrices } from './cardanoTokenPrices';
 import { pollController$ } from '../session/poll-controller';
+import { Language } from '@lace/translation';
 
 export const requestMessage$ = new Subject<Message>();
 export const backendFailures$ = new BehaviorSubject(0);
@@ -181,6 +182,8 @@ const closeAllTabsAndOpenPopup = async () => {
 
 const handleChangeTheme = (data: ChangeThemeData) => requestMessage$.next({ type: MessageTypes.CHANGE_THEME, data });
 
+const handleChangeLanguage = (data: Language) => requestMessage$.next({ type: MessageTypes.CHANGE_LANGUAGE, data });
+
 const handleChangeMode = (data: ChangeModeData) => requestMessage$.next({ type: MessageTypes.CHANGE_MODE, data });
 
 const { ADA_PRICE_CHECK_INTERVAL, SAVED_PRICE_DURATION } = config();
@@ -352,6 +355,7 @@ export const exposeBackgroundService = (wallet$: Observable<ActiveWallet>): void
         migrationState$,
         coinPrices,
         handleChangeTheme,
+        handleChangeLanguage,
         handleChangeMode,
         clearBackgroundStorage,
         getBackgroundStorage,