Add language selection (japanese) [LW-13580]

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,40 @@
+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>();
+
+  useEffect(() => {
+    const getLanguage = async () => {
+      const { languageChoice } = await getBackgroundStorage();
+      if (languageChoice) setLanguage(languageChoice);
+    };
+    getLanguage();
+    webStorage.onChanged.addListener(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,69 @@
+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';
+
+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);
+    };
+    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}>
+              {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 ?? 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,

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

@@ -3,6 +3,7 @@ import { themes } from '@providers/ThemeProvider';
 import { BackgroundStorage, MigrationState } from './storage';
 import { CoinPrices } from './prices';
 import type { clearBackgroundStorage } from '../background/storage';
+import { Language } from '@lace/translation';
 
 export enum BaseChannels {
   BACKGROUND_ACTIONS = 'background-actions'
@@ -31,7 +32,8 @@ export enum MessageTypes {
   HTTP_CONNECTION = 'http-connnection',
   WS_CONNECTION = 'ws-connnection',
   OPEN_COLLATERAL_SETTINGS = 'open-collateral-settings',
-  CHANGE_MODE = 'change-mode'
+  CHANGE_MODE = 'change-mode',
+  CHANGE_LANGUAGE = 'change-language'
 }
 
 export enum BrowserViewSections {
@@ -84,12 +86,22 @@ interface ChangeMode {
   type: MessageTypes.CHANGE_MODE;
   data: ChangeModeData;
 }
+interface ChangeThemeMessage {
+  type: MessageTypes.CHANGE_THEME;
+  data: ChangeThemeData;
+}
+
+interface ChangeLanguageMessage {
+  type: MessageTypes.CHANGE_LANGUAGE;
+  data: Language;
+}
 export type Message =
   | ChangeThemeMessage
   | HTTPConnectionMessage
   | WSConnectionMessage
   | OpenBrowserMessage
-  | ChangeMode;
+  | ChangeMode
+  | ChangeLanguageMessage;
 
 export type UnhandledError = {
   type: 'error' | 'unhandledrejection';
@@ -104,6 +116,7 @@ export type BackgroundService = {
   migrationState$: BehaviorSubject<MigrationState | undefined>;
   coinPrices: CoinPrices;
   handleChangeTheme: (data: ChangeThemeData) => void;
+  handleChangeLanguage: (data: Language) => void;
   handleChangeMode: (data: ChangeModeData) => void;
   setBackgroundStorage: (data: BackgroundStorage) => Promise<void>;
   getBackgroundStorage: () => Promise<BackgroundStorage>;

apps/browser-extension-wallet/src/lib/scripts/types/storage.ts

@@ -8,6 +8,7 @@ import {
   RawFeatureFlagPayloads
 } from '@lib/scripts/types/feature-flags';
 import { LogLevelString } from '@lace/common';
+import { Language } from '@lace/translation';
 
 export interface PendingMigrationState {
   from: string;
@@ -49,6 +50,7 @@ export interface BackgroundStorage {
   dappInjectCompatibilityMode?: boolean;
   optedInBeta?: boolean;
   logLevel?: LogLevelString;
+  languageChoice?: Language;
 }
 
 export type BackgroundStorageKeys = keyof BackgroundStorage;

apps/browser-extension-wallet/src/views/bitcoin-mode/features/activity/components/Activity.tsx

@@ -173,7 +173,7 @@ export const Activity = (): React.ReactElement => {
           id: transaction.transactionHash,
           formattedTimestamp:
             transaction.status === Bitcoin.TransactionStatus.Pending
-              ? 'PENDING'
+              ? t('browserView.activity.entry.name.pending')
               : formattedTimestamp(new Date(transaction.timestamp * 1000)),
           amount: `${new BigNumber(net.toString()).dividedBy(100_000_000).toFixed(8, BigNumber.ROUND_HALF_UP)} BTC`,
           fiatAmount: `${computeBalance(Number(net) / SATS_IN_BTC, fiatCurrency.code, bitcoinPrice)} ${
@@ -194,7 +194,7 @@ export const Activity = (): React.ReactElement => {
         items
       };
     });
-  }, [addresses, recentTransactions, bitcoinPrice, explorerBaseUrl, pendingTransaction, fiatCurrency]);
+  }, [addresses, recentTransactions, bitcoinPrice, explorerBaseUrl, pendingTransaction, fiatCurrency, t]);
 
   const isLoading =
     addresses.length === 0 || explorerBaseUrl.length === 0 || currentCursor === null || !activityFetched;

apps/browser-extension-wallet/src/views/bitcoin-mode/features/multi-wallet/restore-wallet/steps/EnterPgpPrivateKey.tsx

@@ -19,6 +19,7 @@ import { TextArea } from '@lace/common';
 import { ShieldedPgpKeyData } from '@src/types';
 import { useWalletOnboarding } from '../../walletOnboardingContext';
 import { useAnalyticsContext } from '@providers';
+import { useTranslation } from 'react-i18next';
 
 interface Validation {
   error?: string;
@@ -53,6 +54,7 @@ const decryptQrCodeMnemonicWithPrivateKey = async ({ pgpInfo }: DecryptProps): P
 };
 
 export const EnterPgpPrivateKey: VFC = () => {
+  const { t } = useTranslation();
   const { postHogActions } = useWalletOnboarding();
   const analytics = useAnalyticsContext();
   const { back, createWalletData, next, pgpInfo, setPgpInfo, setMnemonic } = useRestoreWallet();
@@ -74,7 +76,7 @@ export const EnterPgpPrivateKey: VFC = () => {
           pgpPrivateKey: e.target.value,
           privateKeyIsDecrypted: privateKey.isDecrypted()
         });
-        setValidation({ success: 'valid PGP private key' });
+        setValidation({ success: t('pgp.validPrivateKey') });
       } catch (error) {
         if (error.message === 'Misformed armored text') {
           setValidation({ error: i18n.t('pgp.error.misformedArmoredText') });
@@ -84,7 +86,7 @@ export const EnterPgpPrivateKey: VFC = () => {
         }
       }
     },
-    [setValidation, pgpInfo, setPgpInfo]
+    [setValidation, pgpInfo, setPgpInfo, t]
   );
 
   const handleNext = () => {
@@ -127,7 +129,7 @@ export const EnterPgpPrivateKey: VFC = () => {
                   pgpPrivateKey: fileinfo as string,
                   privateKeyIsDecrypted: pk.isDecrypted()
                 });
-                setValidation({ error: null, success: 'valid PGP private key' });
+                setValidation({ error: null, success: t('pgp.validPrivateKey') });
                 setPrivateKeyFile(keyFile?.name);
               })
               .catch((error) => {
@@ -145,7 +147,7 @@ export const EnterPgpPrivateKey: VFC = () => {
         setValidation({ error: error.message });
       }
     },
-    [setValidation, setPrivateKeyFile, setPgpInfo, pgpInfo]
+    [setValidation, setPrivateKeyFile, setPgpInfo, pgpInfo, t]
   );
 
   useEffect(() => {