add language options inside app-settings (#1929)

packages/app-settings/src/General.tsx

@@ -3,9 +3,9 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { I18nProps } from '@polkadot/react-components/types';
-import { Option } from './types';
+import { Option, SetOption } from './types';
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import { isLedgerCapable } from '@polkadot/react-api';
 import { Button, Dropdown } from '@polkadot/react-components';
 import uiSettings, { SettingsStruct } from '@polkadot/ui-settings';
@@ -22,6 +22,20 @@ interface Props extends I18nProps{
 const prefixOptions = uiSettings.availablePrefixes.map((o): Option => createOption(o, ['default']));
 const iconOptions = uiSettings.availableIcons.map((o): Option => createIdenticon(o, ['default']));
 const ledgerConnOptions = uiSettings.availableLedgerConn;
+const availableLanguages: SetOption[] = [
+  {
+    text: 'Default browser language (auto-detect)',
+    value: 'default'
+  },
+  {
+    text: 'English',
+    value: 'en'
+  },
+  {
+    text: '日本語',
+    value: 'ja'
+  }
+];
 
 function General ({ className, isModalContent, onClose, t }: Props): React.ReactElement<Props> {
   // tri-state: null = nothing  changed, false = no reload, true = reload required
@@ -49,6 +63,13 @@ function General ({ className, isModalContent, onClose, t }: Props): React.React
     setChanged(null);
   };
 
+  const translatedAvailableLanguages = useMemo(() =>
+    availableLanguages.map(option => ({
+      ...option,
+      text: t(option.text)
+    }))
+  , [t]);
+
   const { icon, i18nLang, ledgerConn, prefix, uiMode } = settings;
 
   return (
@@ -99,7 +120,7 @@ function General ({ className, isModalContent, onClose, t }: Props): React.React
               defaultValue={i18nLang}
               label={t('default interface language')}
               onChange={_handleChange('i18nLang')}
-              options={uiSettings.availableLanguages}
+              options={translatedAvailableLanguages}
             />
           </div>
         </>

packages/app-settings/src/types.ts

@@ -8,7 +8,7 @@ export interface Option {
 }
 
 export interface SetOption {
-  info: string;
+  info?: string;
   text: string;
   value: string | number;
 }

packages/app-settings/src/util.tsx

@@ -19,7 +19,7 @@ export function createOption ({ info, text, value }: SetOption, overrides: strin
         <ChainImg
           className='ui--Dropdown-icon'
           logo={
-            overrides.includes(info)
+            info && overrides.includes(info)
               ? override
               : info
           }
@@ -42,7 +42,7 @@ export function createIdenticon ({ info, text, value }: SetOption, overrides: st
           className='ui--Dropdown-icon'
           size={32}
           theme={
-            overrides.includes(info)
+            info && overrides.includes(info)
               ? override as 'empty'
               : info as 'substrate'
           }

packages/apps/public/locales/en/app-settings.json

@@ -20,5 +20,6 @@
   "Developer": "Developer",
   "Select the remote endpoint, either from the dropdown on manual entered via the custom toggle": "Select the remote endpoint, either from the dropdown on manual entered via the custom toggle",
   "remote node/endpoint to connect to": "remote node/endpoint to connect to",
-  "custom endpoint": "custom endpoint"
+  "custom endpoint": "custom endpoint",
+  "Default browser language (auto-detect)": "Default browser language (auto-detect)"
 }

packages/apps/public/locales/ja/app-settings.json

@@ -20,5 +20,6 @@
   "Developer": "ディベロッパー",
   "Select the remote endpoint, either from the dropdown on manual entered via the custom toggle": "ドロップダウンの中からリモートノードを選択するかカスタムエンドポイントをオンにして記入します",
   "remote node/endpoint to connect to": "リモートノード・エンドポイント",
-  "custom endpoint": "カスタムエンドポイント"
+  "custom endpoint": "カスタムエンドポイント",
+  "Default browser language (auto-detect)": "ブラウザー設定言語（自動反映）"
 }