Enable language setting options (#1919)

* translate settings page into Japanese

* enable language setting

packages/app-settings/src/General.tsx

@@ -45,6 +45,7 @@ function General ({ className, isModalContent, onClose, t }: Props): React.React
   const _onChangeLedgerConn = (ledgerConn: string): void => setSettings({ ...settings, ledgerConn });
   const _onChangePrefix = (prefix: number): void => setSettings({ ...settings, prefix });
   const _onChangeUiMode = (uiMode: string): void => setSettings({ ...settings, uiMode });
+  const _onChangeI18nLang = (i18nLang: string): void => setSettings({ ...settings, i18nLang });
   const _saveAndReload = (): void => saveAndReload(settings);
   const _save = (): void => {
     save(settings);
@@ -99,8 +100,8 @@ function General ({ className, isModalContent, onClose, t }: Props): React.React
           <div className='ui--row'>
             <Dropdown
               defaultValue={i18nLang}
-              isDisabled
               label={t('default interface language')}
+              onChange={_onChangeI18nLang}
               options={uiSettings.availableLanguages}
             />
           </div>

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

@@ -0,0 +1,24 @@
+{
+  "This is not a valid JSON object.": "無効なJSONオブジェクトです。",
+  "Your custom types have been added": "カスタムタイプが追加されました",
+  "Save the type definitions for your custom structures as key-value pairs in a valid JSON file. The key should be the name of your custom structure and the value an object containing your type definitions.": "カスタム構造体のための型定義をキー・値の対となるように有効なJSONファイルに保存します。キーにはカスタム構造体の名前を、値には型定義が入ったオブジェクトを設定してください。",
+  "Additional types as a JSON file (or edit below)": "追加の型が定義されたJSONファイル (もしくは下で編集してください)",
+  "Reset": "リセット",
+  "Save": "保存",
+  "Override the default ss58 prefix for address generation": "ss58を基準とするアドレスを生成するときに使われる接頭辞の値を上書きします",
+  "address prefix": "アドレス接頭辞",
+  "Override the default identity icon display with a specific theme": "アイコンのテーマを設定します",
+  "default icon theme": "アイコンテーマ",
+  "Adjust the mode from basic (with a limited number of beginner-user-friendly apps) to full (with all basic & advanced apps available)": "通常モード（初心者向け機能のみ）か全機能モード（初心者向け+上級者向け機能）かを設定します",
+  "interface operation mode": "機能モード",
+  "Manage your connection to Ledger S": "Ledger Sへの接続を管理します",
+  "manage hardware connections": "ハードウェアへの接続を管理します",
+  "default interface language": "言語",
+  "Cancel": "キャンセル",
+  "Save & Reload": "保存して更新",
+  "General": "一般",
+  "Developer": "ディベロッパー",
+  "Select the remote endpoint, either from the dropdown on manual entered via the custom toggle": "ドロップダウンの中からリモートノードを選択するかカスタムエンドポイントをオンにして記入します",
+  "remote node/endpoint to connect to": "リモートノード・エンドポイント",
+  "custom endpoint": "カスタムエンドポイント"
+}

packages/react-components/src/i18n.ts

@@ -3,13 +3,26 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import i18n from 'i18next';
-// import LanguageDetector from 'i18next-browser-languagedetector';
+import LanguageDetector from 'i18next-browser-languagedetector';
 import Backend from 'i18next-xhr-backend';
 import { initReactI18next } from 'react-i18next';
 
+import uiSettings, { LANGUAGE_DEFAULT } from '@polkadot/ui-settings';
+
+const languageDetector = new LanguageDetector();
+languageDetector.addDetector({
+  name: 'i18nLangDetector',
+  lookup: () => {
+    const i18nLang = uiSettings.i18nLang;
+    return i18nLang === LANGUAGE_DEFAULT
+      ? undefined
+      : i18nLang;
+  }
+});
+
 i18n
   .use(Backend)
-  // .use(LanguageDetector)
+  .use(languageDetector)
   .use(initReactI18next)
   .init({
     backend: {
@@ -17,11 +30,14 @@ i18n
     },
     debug: false,
     defaultNS: 'ui',
+    detection: {
+      order: ['i18nLangDetector', 'navigator']
+    },
     fallbackLng: false,
     interpolation: {
       escapeValue: false
     },
-    lng: 'en',
+    load: 'languageOnly',
     ns: [
       'app-123code',
       'app-accounts',
@@ -61,4 +77,11 @@ i18n
     console.log('i18n: failure', error)
   );
 
+uiSettings.on('change', settings => {
+  const lang = settings.i18nLang === LANGUAGE_DEFAULT
+    ? i18n.services.languageDetector.detect()
+    : settings.i18nLang;
+  i18n.changeLanguage(lang);
+});
+
 export default i18n;