feat: add language selection in app

Author: mchappell

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,38 @@
+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';
+
+type LanguageChoiceProps = {
+  onClick: () => void;
+};
+
+export const LanguageChoice = ({ onClick }: LanguageChoiceProps): React.ReactElement => {
+  const { t } = useTranslation();
+  const { getBackgroundStorage } = useBackgroundServiceAPIContext();
+  const [language, setLanguage] = useState<string>();
+
+  useEffect(() => {
+    const getLanguage = async () => {
+      const { languageChoice } = await getBackgroundStorage();
+      setLanguage(languageChoice);
+    };
+    getLanguage();
+  }, [getBackgroundStorage]);
+
+  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>
+        <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,67 @@
+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';
+
+type LanguageChoiceProps = {
+  onBack: () => void;
+};
+
+const LANG_CHOICES = ['en', 'ja']; // hardcoding for v1 only
+
+export const LanguageInfo = ({ onBack }: LanguageChoiceProps): React.ReactElement => {
+  const { t } = useTranslation();
+  const [language, setLanguage] = useState('en'); // default
+  const posthog = usePostHogClientContext();
+
+  const { getBackgroundStorage, handleChangeLanguage } = useBackgroundServiceAPIContext();
+
+  useEffect(() => {
+    const getLanguage = async () => {
+      const { languageChoice } = await getBackgroundStorage();
+      if (languageChoice) setLanguage(languageChoice);
+    };
+    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}>
+              {choice}
+            </Radio>
+          ))}
+        </Radio.Group>
+      </div>
+    </div>
+  );
+};

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 ?? window.navigator.language);
+      })
+      .catch((error) => {
+        // eslint-disable-next-line no-console
+        console.log(error);
+      });
+
+    return () => subscription.unsubscribe();
+  }, [backgroundServices]);
 
   useEffect(() => {
     setWalletState(walletState);