From 1318994dccedafffe3437b78e150a42c169a364b Mon Sep 17 00:00:00 2001
From: Hanwen Cheng <heawen.cheng@gmail.com>
Date: Tue, 10 Mar 2020 01:34:09 +0100
Subject: [PATCH 01/13] init the network specs change screen

---
 .../apps/public/locales/en/app-settings.json  |  1 +
 .../apps/public/locales/zh/app-settings.json  |  1 +
 packages/page-settings/src/General.tsx        | 12 +++
 .../page-settings/src/modals/NetworkSpecs.tsx | 83 +++++++++++++++++++
 4 files changed, 97 insertions(+)
 create mode 100644 packages/page-settings/src/modals/NetworkSpecs.tsx

diff --git a/packages/apps/public/locales/en/app-settings.json b/packages/apps/public/locales/en/app-settings.json
index e0c50e9ececc..0d865da712c8 100644
--- a/packages/apps/public/locales/en/app-settings.json
+++ b/packages/apps/public/locales/en/app-settings.json
@@ -16,6 +16,7 @@
   "default interface language": "default interface language",
   "Cancel": "Cancel",
   "Save & Reload": "Save & Reload",
+  "Export Network Specs": "Export Network Specs",
   "General": "General",
   "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",
diff --git a/packages/apps/public/locales/zh/app-settings.json b/packages/apps/public/locales/zh/app-settings.json
index 78556de6598e..dc72d2d8ca49 100644
--- a/packages/apps/public/locales/zh/app-settings.json
+++ b/packages/apps/public/locales/zh/app-settings.json
@@ -16,6 +16,7 @@
   "default interface language": "默认接口语言",
   "Cancel": "取消",
   "Save & Reload": "保存并重载",
+  "Export Network Specs": "导出网络配置",
   "General": "通用",
   "Developer": "开发者",
   "Select the remote endpoint, either from the dropdown on manual entered via the custom toggle": "选择远程终端，或者通过自定义切换输入的手动下拉菜单中的任意一个",
diff --git a/packages/page-settings/src/General.tsx b/packages/page-settings/src/General.tsx
index ff5b3e512386..a570d7a2c8a4 100644
--- a/packages/page-settings/src/General.tsx
+++ b/packages/page-settings/src/General.tsx
@@ -13,6 +13,7 @@ import uiSettings, { SettingsStruct } from '@polkadot/ui-settings';
 import { useTranslation } from './translate';
 import { createIdenticon, createOption, save, saveAndReload } from './util';
 import SelectUrl from './SelectUrl';
+import NetworkSpecs from './modals/NetworkSpecs';
 
 interface Props {
   className?: string;
@@ -26,6 +27,7 @@ function General ({ className, isModalContent, onClose }: Props): React.ReactEle
   const { t } = useTranslation();
   // tri-state: null = nothing changed, false = no reload, true = reload required
   const [changed, setChanged] = useState<boolean | null>(null);
+  const [isQrOpen, setQrOpen] = useState<boolean>(false);
   const [settings, setSettings] = useState(uiSettings.get());
   const iconOptions = useMemo((): Option[] => {
     return uiSettings.availableIcons.map((o): Option => createIdenticon(t, o, ['default']));
@@ -68,6 +70,8 @@ function General ({ className, isModalContent, onClose }: Props): React.ReactEle
     },
     [settings]
   );
+  const _showNetworkSpecsQr = (): void => setQrOpen(true);
+  const _closeNetworkSpecsQr = (): void => setQrOpen(false);
 
   const { icon, i18nLang, ledgerConn, prefix, uiMode } = settings;
 
@@ -131,6 +135,14 @@ function General ({ className, isModalContent, onClose }: Props): React.ReactEle
             <Button.Or />
           </>
         )}
+        <Button
+          isDisabled={changed !== null}
+          isPrimary
+          onClick={_showNetworkSpecsQr}
+          label={t('Export Network Specs')}
+          icon='external'
+        />
+        {isQrOpen && <NetworkSpecs onClose={_closeNetworkSpecsQr}/>}
         <Button
           isDisabled={changed === null}
           isPrimary={isModalContent}
diff --git a/packages/page-settings/src/modals/NetworkSpecs.tsx b/packages/page-settings/src/modals/NetworkSpecs.tsx
new file mode 100644
index 000000000000..50bcd2a96939
--- /dev/null
+++ b/packages/page-settings/src/modals/NetworkSpecs.tsx
@@ -0,0 +1,83 @@
+import React from 'react';
+import {BareProps} from '@polkadot/react-components/types';
+import {Button, Modal} from '@polkadot/react-components';
+import {useTranslation} from '../translate';
+import styled from "styled-components";
+import { useApi } from '@polkadot/react-hooks';
+import ApiPromise from "@polkadot/api/promise";
+import registry from "@polkadot/react-api/typeRegistry";
+import { createType } from '@polkadot/types';
+import addressDefaults from '@polkadot/util-crypto/address/defaults';
+import uiSettings from "@polkadot/ui-settings";
+
+interface Props extends BareProps {
+  onClose: () => void;
+}
+
+function getRandomColor(): string {
+  const letters = '0123456789ABCDEF';
+  let color = '#';
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+}
+
+const buildNetworkSpecs = async (api: ApiPromise): Promise<any> => {
+  const [properties, systemChain, systemName, systemVersion, metadata, blockHash] = await Promise.all([
+    api.rpc.system.properties(),
+    api.rpc.system.chain(),
+    api.rpc.system.name(),
+    api.rpc.system.version(),
+    api.runtimeMetadata.asLatest,
+    api.rpc.chain.getBlockHash(0)
+  ]);
+  const DEFAULT_DECIMALS = createType(registry, 'u32', 12);
+  const DEFAULT_SS58 = createType(registry, 'u32', addressDefaults.prefix);
+  const title = systemChain.toString();
+  const defaultPathId = title.replace(/\s/g, '_').toLowerCase();
+  const networkSpecs = {
+    decimals: properties.tokenDecimals.unwrapOr(DEFAULT_DECIMALS).toNumber(),
+    prefix: properties.ss58Format.unwrapOr(DEFAULT_SS58).toNumber(),
+    unit: properties.tokenSymbol.toString(),
+    pathId: defaultPathId,
+    title,
+    color: getRandomColor(),
+    genesisHash: blockHash.toString(),
+    metadata: metadata.toString(),
+  };
+  console.log('networkSpecs is', networkSpecs);
+  return networkSpecs;
+};
+
+function NetworkSpecs ({ onClose }: Props): React.ReactElement<Props> {
+  const {t} = useTranslation();
+  const apiProps = useApi();
+  if (!apiProps.isApiReady) return null;
+  const networkSpecs = buildNetworkSpecs(apiProps.api);
+  return <Modal
+    className='settings--networkSpecs-modal'
+    header={t('Export Network Specs')}
+  >
+    <Modal.Content>
+
+    </Modal.Content>
+    <Modal.Actions onCancel={onClose}>
+      <Button
+        icon='close'
+        label={t('Cancel')}
+        onClick={onClose}
+      />
+    </Modal.Actions>
+  </Modal>;
+}
+
+export default styled(NetworkSpecs)`
+  position: relative;
+
+  .settings--networkSpecs-modal {
+    position: absolute;
+    top: .5rem;
+    right: 3.5rem;
+  }
+`;

From c708a58d2fb25d69957f85543d40c508e9067e77 Mon Sep 17 00:00:00 2001
From: Hanwen Cheng <heawen.cheng@gmail.com>
Date: Tue, 10 Mar 2020 01:42:04 +0100
Subject: [PATCH 02/13] meta data should be comment out

---
 packages/page-settings/src/modals/NetworkSpecs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/page-settings/src/modals/NetworkSpecs.tsx b/packages/page-settings/src/modals/NetworkSpecs.tsx
index 50bcd2a96939..8c1cb1a56a13 100644
--- a/packages/page-settings/src/modals/NetworkSpecs.tsx
+++ b/packages/page-settings/src/modals/NetworkSpecs.tsx
@@ -44,7 +44,7 @@ const buildNetworkSpecs = async (api: ApiPromise): Promise<any> => {
     title,
     color: getRandomColor(),
     genesisHash: blockHash.toString(),
-    metadata: metadata.toString(),
+    // metadata: metadata.toString(),
   };
   console.log('networkSpecs is', networkSpecs);
   return networkSpecs;

From 4091c6e100a30a0ed39c6b3452674ca056e8d50c Mon Sep 17 00:00:00 2001
From: Hanwen Cheng <heawen.cheng@gmail.com>
Date: Mon, 23 Mar 2020 14:37:29 +0100
Subject: [PATCH 03/13] update component

---
 .../page-settings/src/modals/NetworkSpecs.tsx | 98 +++++++++++++++++--
 1 file changed, 89 insertions(+), 9 deletions(-)

diff --git a/packages/page-settings/src/modals/NetworkSpecs.tsx b/packages/page-settings/src/modals/NetworkSpecs.tsx
index 8c1cb1a56a13..fad8c16f841b 100644
--- a/packages/page-settings/src/modals/NetworkSpecs.tsx
+++ b/packages/page-settings/src/modals/NetworkSpecs.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, {useEffect, useState} from 'react';
 import {BareProps} from '@polkadot/react-components/types';
-import {Button, Modal} from '@polkadot/react-components';
+import {Button, Dropdown, Input, Modal} from '@polkadot/react-components';
 import {useTranslation} from '../translate';
 import styled from "styled-components";
 import { useApi } from '@polkadot/react-hooks';
@@ -8,12 +8,22 @@ import ApiPromise from "@polkadot/api/promise";
 import registry from "@polkadot/react-api/typeRegistry";
 import { createType } from '@polkadot/types';
 import addressDefaults from '@polkadot/util-crypto/address/defaults';
-import uiSettings from "@polkadot/ui-settings";
 
 interface Props extends BareProps {
   onClose: () => void;
 }
 
+interface NetworkSpecs {
+  color: string;
+  decimals: number;
+  genesisHash: string;
+  // logo: number;
+  pathId: string;
+  prefix: number;
+  title: string;
+  unit: string;
+}
+
 function getRandomColor(): string {
   const letters = '0123456789ABCDEF';
   let color = '#';
@@ -23,7 +33,7 @@ function getRandomColor(): string {
   return color;
 }
 
-const buildNetworkSpecs = async (api: ApiPromise): Promise<any> => {
+const buildNetworkSpecs = async (api: ApiPromise): Promise<NetworkSpecs> => {
   const [properties, systemChain, systemName, systemVersion, metadata, blockHash] = await Promise.all([
     api.rpc.system.properties(),
     api.rpc.system.chain(),
@@ -50,17 +60,75 @@ const buildNetworkSpecs = async (api: ApiPromise): Promise<any> => {
   return networkSpecs;
 };
 
-function NetworkSpecs ({ onClose }: Props): React.ReactElement<Props> {
+function NetworkSpecs ({ onClose }: Props): React.ReactNode<Props> {
   const {t} = useTranslation();
+  const [title, setTitle] = useState<string>('');
+  const [pathId, setPathId] = useState<string>('');
+  const [colorCode, setColorCode] = useState<string>('');
   const apiProps = useApi();
   if (!apiProps.isApiReady) return null;
-  const networkSpecs = buildNetworkSpecs(apiProps.api);
+
+  useEffect((): void => {
+    const getNetworkSpec = async (): Promise<void> => {
+      const networkSpecs = await buildNetworkSpecs(apiProps.api);
+      setTitle(networkSpecs.title);
+      setColorCode(networkSpecs.color);
+      setPathId(networkSpecs.pathId);
+    };
+    getNetworkSpec();
+  }, [apiProps]);
+
+  const _onChangeTitle = (v: string): void => setTitle(v);
+  const _onChangePathId = (v: string): void => setPathId(v);
+  const _onChangeColorCode = (v: string): void => setColorCode(v);
+  const _checkPathIdValid = (): boolean => /^[\w-.]+$/.test(pathId);
+  const _checkColorCodeValid = (): boolean => /^#[\da-fA-F]{6}|#[\da-fA-F]{3}$/.test(colorCode);
+  const _onSetRandomColor = (): void => setColorCode(getRandomColor());
+
   return <Modal
     className='settings--networkSpecs-modal'
     header={t('Export Network Specs')}
   >
     <Modal.Content>
-
+      <Input
+        autoFocus
+        className='full'
+        help={t('Name of the network. You can change it, it only for display purpose.')}
+        label={t('name')}
+        onChange={_onChangeTitle}
+        placeholder={t('')}
+        value={title}
+      />
+      <Input
+        autoFocus
+        className='full'
+        help={t('the path id used as the path prefix when deriving new account, all the accounts under this network will have the same prefix')}
+        isError={!_checkPathIdValid()}
+        label={t('pathId')}
+        onChange={_onChangePathId}
+        placeholder={t('')}
+        value={pathId}
+      />
+      <Input
+        autoFocus
+        className='full'
+        help={t('the color used to distinguish this network with others, use color code with 3 or 6 digits, like "#FFF" or "#111111"')}
+        isError={!_checkColorCodeValid()}
+        label={t('color')}
+        onChange={_onChangeColorCode}
+        placeholder={t('#ffffff')}
+        value={colorCode}
+      >
+        <div className='settings--networkSpecs-colorButton'>
+          <Button
+            label={t('Generate Random Color')}
+            icon='add'
+            key='spread'
+            onClick={_onSetRandomColor}
+          />
+          <div className='settings--networkSpecs-colorDisplay' color={colorCode}/>
+        </div>
+      </Input>
     </Modal.Content>
     <Modal.Actions onCancel={onClose}>
       <Button
@@ -72,7 +140,7 @@ function NetworkSpecs ({ onClose }: Props): React.ReactElement<Props> {
   </Modal>;
 }
 
-export default styled(NetworkSpecs)`
+export default React.memo(styled(NetworkSpecs)`
   position: relative;
 
   .settings--networkSpecs-modal {
@@ -80,4 +148,16 @@ export default styled(NetworkSpecs)`
     top: .5rem;
     right: 3.5rem;
   }
-`;
+  
+  .settings--networkSpecs-colorButton {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    
+    .settings--networkSpecs-colorDisplay {
+      color: palevioletred;
+      flex: 1;
+    }
+  }
+`);

From b82d4d26e2892cb0de9f637b14de8b951fed548d Mon Sep 17 00:00:00 2001
From: Hanwen Cheng <heawen.cheng@gmail.com>
Date: Tue, 24 Mar 2020 00:04:37 +0100
Subject: [PATCH 04/13] component ui

---
 .../apps/public/locales/zh/app-settings.json  |   3 +-
 packages/page-settings/src/General.tsx        |   9 +-
 .../page-settings/src/modals/NetworkSpecs.tsx | 161 ++++++++++--------
 3 files changed, 101 insertions(+), 72 deletions(-)

diff --git a/packages/apps/public/locales/zh/app-settings.json b/packages/apps/public/locales/zh/app-settings.json
index dc72d2d8ca49..e5ad82cedcd2 100644
--- a/packages/apps/public/locales/zh/app-settings.json
+++ b/packages/apps/public/locales/zh/app-settings.json
@@ -22,5 +22,6 @@
   "Select the remote endpoint, either from the dropdown on manual entered via the custom toggle": "选择远程终端，或者通过自定义切换输入的手动下拉菜单中的任意一个",
   "remote node/endpoint to connect to": "远程节点/终端连接到",
   "custom endpoint": "自定义终端",
-  "Default browser language (auto-detect)": "默认浏览器语言 (自动检测)"
+  "Default browser language (auto-detect)": "默认浏览器语言 (自动检测)",
+  "Generate Random Color": "随机生成颜色"
 }
diff --git a/packages/page-settings/src/General.tsx b/packages/page-settings/src/General.tsx
index a570d7a2c8a4..e15966410b5e 100644
--- a/packages/page-settings/src/General.tsx
+++ b/packages/page-settings/src/General.tsx
@@ -3,6 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { Option } from '@polkadot/apps-config/settings/types';
+import { useApi } from '@polkadot/react-hooks';
 
 import React, { useCallback, useEffect, useState, useMemo } from 'react';
 import { availableLanguages, availableSs58 } from '@polkadot/apps-config/settings';
@@ -29,6 +30,7 @@ function General ({ className, isModalContent, onClose }: Props): React.ReactEle
   const [changed, setChanged] = useState<boolean | null>(null);
   const [isQrOpen, setQrOpen] = useState<boolean>(false);
   const [settings, setSettings] = useState(uiSettings.get());
+  const apiProps = useApi();
   const iconOptions = useMemo((): Option[] => {
     return uiSettings.availableIcons.map((o): Option => createIdenticon(t, o, ['default']));
   }, [t]);
@@ -135,14 +137,15 @@ function General ({ className, isModalContent, onClose }: Props): React.ReactEle
             <Button.Or />
           </>
         )}
+        {isQrOpen && <NetworkSpecs onClose={_closeNetworkSpecsQr}/>}
         <Button
-          isDisabled={changed !== null}
-          isPrimary
+          isDisabled={!apiProps.isApiReady}
+          isPrimary={isModalContent}
           onClick={_showNetworkSpecsQr}
           label={t('Export Network Specs')}
           icon='external'
         />
-        {isQrOpen && <NetworkSpecs onClose={_closeNetworkSpecsQr}/>}
+        <Button.Or/>
         <Button
           isDisabled={changed === null}
           isPrimary={isModalContent}
diff --git a/packages/page-settings/src/modals/NetworkSpecs.tsx b/packages/page-settings/src/modals/NetworkSpecs.tsx
index fad8c16f841b..0ca70aa1c944 100644
--- a/packages/page-settings/src/modals/NetworkSpecs.tsx
+++ b/packages/page-settings/src/modals/NetworkSpecs.tsx
@@ -1,14 +1,20 @@
-import React, {useEffect, useState} from 'react';
-import {BareProps} from '@polkadot/react-components/types';
-import {Button, Dropdown, Input, Modal} from '@polkadot/react-components';
-import {useTranslation} from '../translate';
-import styled from "styled-components";
+// Copyright 2017-2020 @polkadot/app-settings authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { Button, Input, Modal } from '@polkadot/react-components';
+import { BareProps } from '@polkadot/react-components/types';
 import { useApi } from '@polkadot/react-hooks';
-import ApiPromise from "@polkadot/api/promise";
-import registry from "@polkadot/react-api/typeRegistry";
+import registry from '@polkadot/react-api/typeRegistry';
+import ApiPromise from '@polkadot/api/promise';
 import { createType } from '@polkadot/types';
 import addressDefaults from '@polkadot/util-crypto/address/defaults';
 
+import React, { useEffect, useReducer } from 'react';
+import styled from 'styled-components';
+
+import { useTranslation } from '../translate';
+
 interface Props extends BareProps {
   onClose: () => void;
 }
@@ -17,14 +23,13 @@ interface NetworkSpecs {
   color: string;
   decimals: number;
   genesisHash: string;
-  // logo: number;
   pathId: string;
   prefix: number;
   title: string;
   unit: string;
 }
 
-function getRandomColor(): string {
+function getRandomColor (): string {
   const letters = '0123456789ABCDEF';
   let color = '#';
   for (let i = 0; i < 6; i++) {
@@ -33,13 +38,10 @@ function getRandomColor(): string {
   return color;
 }
 
-const buildNetworkSpecs = async (api: ApiPromise): Promise<NetworkSpecs> => {
-  const [properties, systemChain, systemName, systemVersion, metadata, blockHash] = await Promise.all([
+const buildNetworkSpecs = async (api: ApiPromise): Promise<Partial<NetworkSpecs>> => {
+  const [properties, systemChain, blockHash] = await Promise.all([
     api.rpc.system.properties(),
     api.rpc.system.chain(),
-    api.rpc.system.name(),
-    api.rpc.system.version(),
-    api.runtimeMetadata.asLatest,
     api.rpc.chain.getBlockHash(0)
   ]);
   const DEFAULT_DECIMALS = createType(registry, 'u32', 12);
@@ -52,112 +54,135 @@ const buildNetworkSpecs = async (api: ApiPromise): Promise<NetworkSpecs> => {
     unit: properties.tokenSymbol.toString(),
     pathId: defaultPathId,
     title,
-    color: getRandomColor(),
-    genesisHash: blockHash.toString(),
-    // metadata: metadata.toString(),
+    genesisHash: blockHash.toString()
   };
   console.log('networkSpecs is', networkSpecs);
   return networkSpecs;
 };
 
-function NetworkSpecs ({ onClose }: Props): React.ReactNode<Props> {
-  const {t} = useTranslation();
-  const [title, setTitle] = useState<string>('');
-  const [pathId, setPathId] = useState<string>('');
-  const [colorCode, setColorCode] = useState<string>('');
+function NetworkSpecs ({ className, onClose }: Props): React.ReactElement<Props> | null {
+  const { t } = useTranslation();
+  const initialState = {
+    decimals: 0,
+    prefix: 0,
+    unit: 'UNIT',
+    pathId: '',
+    title: '',
+    color: getRandomColor(),
+    genesisHash: ''
+  };
+  const reducer = (state: NetworkSpecs, delta: Partial<NetworkSpecs>): NetworkSpecs => ({
+    ...state,
+    ...delta
+  });
+  const [networkSpecs, setNetworkSpecs] = useReducer(reducer, initialState);
   const apiProps = useApi();
   if (!apiProps.isApiReady) return null;
 
   useEffect((): void => {
     const getNetworkSpec = async (): Promise<void> => {
       const networkSpecs = await buildNetworkSpecs(apiProps.api);
-      setTitle(networkSpecs.title);
-      setColorCode(networkSpecs.color);
-      setPathId(networkSpecs.pathId);
+      setNetworkSpecs(networkSpecs);
     };
     getNetworkSpec();
   }, [apiProps]);
 
-  const _onChangeTitle = (v: string): void => setTitle(v);
-  const _onChangePathId = (v: string): void => setPathId(v);
-  const _onChangeColorCode = (v: string): void => setColorCode(v);
-  const _checkPathIdValid = (): boolean => /^[\w-.]+$/.test(pathId);
-  const _checkColorCodeValid = (): boolean => /^#[\da-fA-F]{6}|#[\da-fA-F]{3}$/.test(colorCode);
-  const _onSetRandomColor = (): void => setColorCode(getRandomColor());
+  type inputListener = (v: string) => void;
+  const _onChangeValue = (k: keyof NetworkSpecs): inputListener => (v: string): void => setNetworkSpecs({ [k]: v });
+  const _onSetRandomColor = (): void => setNetworkSpecs({ color: getRandomColor() });
+  const _checkPathIdValid = (): boolean => /^[\w-.]+$/.test(networkSpecs.pathId);
+  const _checkColorValid = (): boolean => /^#[\da-fA-F]{6}|#[\da-fA-F]{3}$/.test(networkSpecs.color);
 
   return <Modal
-    className='settings--networkSpecs-modal'
+    className={className}
     header={t('Export Network Specs')}
   >
     <Modal.Content>
       <Input
-        autoFocus
         className='full'
-        help={t('Name of the network. You can change it, it only for display purpose.')}
-        label={t('name')}
-        onChange={_onChangeTitle}
-        placeholder={t('')}
-        value={title}
+        help={t('Name of the network. It only for display purpose.')}
+        label={t('Name')}
+        onChange={_onChangeValue('title')}
+        value={networkSpecs.title}
       />
       <Input
         autoFocus
         className='full'
         help={t('the path id used as the path prefix when deriving new account, all the accounts under this network will have the same prefix')}
         isError={!_checkPathIdValid()}
-        label={t('pathId')}
-        onChange={_onChangePathId}
-        placeholder={t('')}
-        value={pathId}
+        label={t('Path Id')}
+        onChange={_onChangeValue('pathId')}
+        value={networkSpecs.pathId}
       />
       <Input
-        autoFocus
         className='full'
-        help={t('the color used to distinguish this network with others, use color code with 3 or 6 digits, like "#FFF" or "#111111"')}
-        isError={!_checkColorCodeValid()}
-        label={t('color')}
-        onChange={_onChangeColorCode}
-        placeholder={t('#ffffff')}
-        value={colorCode}
+        help={t('The color used to distinguish this network with others, use color code with 3 or 6 digits, like "#FFF" or "#111111"')}
+        isError={!_checkColorValid()}
+        label={t('Color')}
+        onChange={_onChangeValue('color')}
+        value={networkSpecs.color}
       >
         <div className='settings--networkSpecs-colorButton'>
           <Button
             label={t('Generate Random Color')}
-            icon='add'
+            icon='sync'
             key='spread'
             onClick={_onSetRandomColor}
           />
-          <div className='settings--networkSpecs-colorDisplay' color={colorCode}/>
+          <ColoredComponent color={networkSpecs.color}/>
         </div>
       </Input>
-    </Modal.Content>
-    <Modal.Actions onCancel={onClose}>
-      <Button
-        icon='close'
-        label={t('Cancel')}
-        onClick={onClose}
+      <Input
+        className='full'
+        help={t('Genesis Hash refers to initial state of the chain, it cannot be changed once the chain is launched')}
+        isDisabled
+        label={t('Genesis Hash')}
+        value={networkSpecs.genesisHash}
+      />
+      <Input
+        className='full'
+        help={t('Unit decides the name of 1 unit token, e.g. "DOT" for Polkadot')}
+        isDisabled
+        label={t('Unit')}
+        value={networkSpecs.unit}
       />
+      <Input
+        className='full'
+        help={t('Prefix indicates the address format in this network, is a number between 0 ~ 255 describes the precise format of the bytes of the address')}
+        isDisabled
+        label={t('Prefix')}
+        value={networkSpecs.prefix}
+      />
+      <Input
+        className='full'
+        help={t('Decimals decides the smallest unit of the token, which is 1/10^decimals')}
+        isDisabled
+        label={t('Decimals')}
+        value={networkSpecs.decimals}
+      />
+    </Modal.Content>
+    <Modal.Actions onCancel={onClose} withOr={false}>
     </Modal.Actions>
   </Modal>;
 }
 
-export default React.memo(styled(NetworkSpecs)`
-  position: relative;
+interface ColoredComponentProps extends BareProps {
+  color: string;
+}
+const ColoredComponent = React.memo(styled(({ color, className }: ColoredComponentProps) => (<div color={color} className={className}/>))`
+    background-color: ${(props: ColoredComponentProps): string => props.color};
+    width: 100px;
+    flex: 1;
+    border-radius: 4px;
+`);
 
-  .settings--networkSpecs-modal {
+export default React.memo(styled(NetworkSpecs)`
     position: absolute;
     top: .5rem;
     right: 3.5rem;
-  }
   
   .settings--networkSpecs-colorButton {
     display: flex;
     flex-direction: row;
-    align-items: center;
-    justify-content: center;
-    
-    .settings--networkSpecs-colorDisplay {
-      color: palevioletred;
-      flex: 1;
-    }
   }
 `);

From 615f77ae09b245f225df70bd26f1a3f98074325c Mon Sep 17 00:00:00 2001
From: Hanwen Cheng <heawen.cheng@gmail.com>
Date: Tue, 24 Mar 2020 15:34:26 +0100
Subject: [PATCH 05/13] complete the component with @polkadot/ui

---
 .../page-settings/src/modals/NetworkSpecs.tsx | 49 +++++++++++--------
 1 file changed, 28 insertions(+), 21 deletions(-)

diff --git a/packages/page-settings/src/modals/NetworkSpecs.tsx b/packages/page-settings/src/modals/NetworkSpecs.tsx
index 0ca70aa1c944..1324c69fff39 100644
--- a/packages/page-settings/src/modals/NetworkSpecs.tsx
+++ b/packages/page-settings/src/modals/NetworkSpecs.tsx
@@ -4,13 +4,15 @@
 
 import { Button, Input, Modal } from '@polkadot/react-components';
 import { BareProps } from '@polkadot/react-components/types';
-import { useApi } from '@polkadot/react-hooks';
+import { useApi, useDebounce } from '@polkadot/react-hooks';
 import registry from '@polkadot/react-api/typeRegistry';
 import ApiPromise from '@polkadot/api/promise';
 import { createType } from '@polkadot/types';
 import addressDefaults from '@polkadot/util-crypto/address/defaults';
+import { QRNetworkSpecs } from '@polkadot/react-qr'
+import { NetworkSpecsStruct } from '@polkadot/ui-settings';
 
-import React, { useEffect, useReducer } from 'react';
+import React, {useEffect, useReducer, useState} from 'react';
 import styled from 'styled-components';
 
 import { useTranslation } from '../translate';
@@ -19,16 +21,6 @@ interface Props extends BareProps {
   onClose: () => void;
 }
 
-interface NetworkSpecs {
-  color: string;
-  decimals: number;
-  genesisHash: string;
-  pathId: string;
-  prefix: number;
-  title: string;
-  unit: string;
-}
-
 function getRandomColor (): string {
   const letters = '0123456789ABCDEF';
   let color = '#';
@@ -38,7 +30,7 @@ function getRandomColor (): string {
   return color;
 }
 
-const buildNetworkSpecs = async (api: ApiPromise): Promise<Partial<NetworkSpecs>> => {
+const buildNetworkSpecs = async (api: ApiPromise): Promise<Partial<NetworkSpecsStruct>> => {
   const [properties, systemChain, blockHash] = await Promise.all([
     api.rpc.system.properties(),
     api.rpc.system.chain(),
@@ -56,7 +48,6 @@ const buildNetworkSpecs = async (api: ApiPromise): Promise<Partial<NetworkSpecs>
     title,
     genesisHash: blockHash.toString()
   };
-  console.log('networkSpecs is', networkSpecs);
   return networkSpecs;
 };
 
@@ -71,24 +62,34 @@ function NetworkSpecs ({ className, onClose }: Props): React.ReactElement<Props>
     color: getRandomColor(),
     genesisHash: ''
   };
-  const reducer = (state: NetworkSpecs, delta: Partial<NetworkSpecs>): NetworkSpecs => ({
-    ...state,
-    ...delta
-  });
+  const [qrData, setQrData] = useState<NetworkSpecsStruct>(initialState);
+  const debouncedQrData = useDebounce(qrData, 500);
+  const reducer = (state: NetworkSpecsStruct, delta: Partial<NetworkSpecsStruct>): NetworkSpecsStruct => {
+    const newState = {
+      ...state,
+      ...delta
+    };
+    setQrData(newState);
+    return newState;
+  };
   const [networkSpecs, setNetworkSpecs] = useReducer(reducer, initialState);
+
   const apiProps = useApi();
   if (!apiProps.isApiReady) return null;
 
   useEffect((): void => {
     const getNetworkSpec = async (): Promise<void> => {
-      const networkSpecs = await buildNetworkSpecs(apiProps.api);
-      setNetworkSpecs(networkSpecs);
+      const defaultNetworkSpecs = await buildNetworkSpecs(apiProps.api);
+      setNetworkSpecs(defaultNetworkSpecs);
     };
     getNetworkSpec();
   }, [apiProps]);
 
+  useEffect((): void => {
+  });
+
   type inputListener = (v: string) => void;
-  const _onChangeValue = (k: keyof NetworkSpecs): inputListener => (v: string): void => setNetworkSpecs({ [k]: v });
+  const _onChangeValue = (k: keyof NetworkSpecsStruct): inputListener => (v: string): void => setNetworkSpecs({ [k]: v });
   const _onSetRandomColor = (): void => setNetworkSpecs({ color: getRandomColor() });
   const _checkPathIdValid = (): boolean => /^[\w-.]+$/.test(networkSpecs.pathId);
   const _checkColorValid = (): boolean => /^#[\da-fA-F]{6}|#[\da-fA-F]{3}$/.test(networkSpecs.color);
@@ -160,6 +161,7 @@ function NetworkSpecs ({ className, onClose }: Props): React.ReactElement<Props>
         label={t('Decimals')}
         value={networkSpecs.decimals}
       />
+      <QRNetworkSpecs className='settings--networkSpecs-qr' networkSpecs={debouncedQrData}/>
     </Modal.Content>
     <Modal.Actions onCancel={onClose} withOr={false}>
     </Modal.Actions>
@@ -185,4 +187,9 @@ export default React.memo(styled(NetworkSpecs)`
     display: flex;
     flex-direction: row;
   }
+  
+  .settings--networkSpecs-qr {
+    max-width: 30rem;
+    margin: 0 auto;
+  }
 `);

From 839c0e6803368560c8ac49bb43df127b50d703cf Mon Sep 17 00:00:00 2001
From: Hanwen Cheng <heawen.cheng@gmail.com>
Date: Tue, 24 Mar 2020 16:14:10 +0100
Subject: [PATCH 06/13] update transalation

---
 .../apps/public/locales/en/app-settings.json  | 17 ++++++++++++++++-
 .../apps/public/locales/ja/app-settings.json  | 17 ++++++++++++++++-
 .../apps/public/locales/zh/app-settings.json  | 19 ++++++++++++++++++-
 .../page-settings/src/modals/NetworkSpecs.tsx | 10 +++++-----
 4 files changed, 55 insertions(+), 8 deletions(-)

diff --git a/packages/apps/public/locales/en/app-settings.json b/packages/apps/public/locales/en/app-settings.json
index 0d865da712c8..7ff7f4b8a351 100644
--- a/packages/apps/public/locales/en/app-settings.json
+++ b/packages/apps/public/locales/en/app-settings.json
@@ -26,5 +26,20 @@
   "No upgradable extensions found": "No upgradable extensions found",
   "upgradable extensions": "upgradable extensions",
   "Update metadata": "Update metadata",
-  "Extensions {{count}}": "Extensions {{count}}"
+  "Extensions {{count}}": "Extensions {{count}}",
+  "Generate Random Color": "Generate Random Color",
+  "Network Name": "Network Name",
+  "Name of the network. It only for display purpose.": "Name of the network. It only for display purpose.",
+  "Path ID": "Path ID",
+  "the path id used as the path prefix when deriving new account, all the accounts under this network will have the same prefix": "the path id used as the path prefix when deriving new account, all the accounts under this network will have the same prefix",
+  "Color": "Color",
+  "The color used to distinguish this network with others, use color code with 3 or 6 digits, like \"#FFF\" or \"#111111\"": "The color used to distinguish this network with others, use color code with 3 or 6 digits, like \"#FFF\" or \"#111111\"",
+  "Genesis Hash": "Genesis Hash",
+  "Genesis Hash refers to initial state of the chain, it cannot be changed once the chain is launched": "Genesis Hash refers to initial state of the chain, it cannot be changed once the chain is launched",
+  "Unit": "Unit",
+  "Unit decides the name of 1 unit token, e.g. \"DOT\" for Polkadot": "Unit decides the name of 1 unit token, e.g. \"DOT\" for Polkadot",
+  "Address Prefix": "Address Prefix",
+  "Prefix indicates the ss58 address format in this network, is a number between 0 ~ 255 describes the precise format of the bytes of the address": "Prefix indicates the ss58 address format in this network, is a number between 0 ~ 255 describes the precise format of the bytes of the address",
+  "Decimals": "Decimals",
+  "Decimals decides the smallest unit of the token, which is 1/10^decimals": "Decimals decides the smallest unit of the token, which is 1/10^decimals"
 }
diff --git a/packages/apps/public/locales/ja/app-settings.json b/packages/apps/public/locales/ja/app-settings.json
index aca814d61b27..99b3a480960d 100644
--- a/packages/apps/public/locales/ja/app-settings.json
+++ b/packages/apps/public/locales/ja/app-settings.json
@@ -21,5 +21,20 @@
   "Select the remote endpoint, either from the dropdown on manual entered via the custom toggle": "ドロップダウンの中からリモートノードを選択するかカスタムエンドポイントをオンにして記入します",
   "remote node/endpoint to connect to": "リモートノード・エンドポイント",
   "custom endpoint": "カスタムエンドポイント",
-  "Default browser language (auto-detect)": "ブラウザー設定言語（自動反映）"
+  "Default browser language (auto-detect)": "ブラウザー設定言語（自動反映）",
+  "Generate Random Color": "Generate Random Color",
+  "Network Name": "Network Name",
+  "Name of the network. It only for display purpose.": "Name of the network. It only for display purpose.",
+  "Path ID": "Path ID",
+  "the path id used as the path prefix when deriving new account, all the accounts under this network will have the same prefix": "the path id used as the path prefix when deriving new account, all the accounts under this network will have the same prefix",
+  "Color": "Color",
+  "The color used to distinguish this network with others, use color code with 3 or 6 digits, like \"#FFF\" or \"#111111\"": "The color used to distinguish this network with others, use color code with 3 or 6 digits, like \"#FFF\" or \"#111111\"",
+  "Genesis Hash": "Genesis Hash",
+  "Genesis Hash refers to initial state of the chain, it cannot be changed once the chain is launched": "Genesis Hash refers to initial state of the chain, it cannot be changed once the chain is launched",
+  "Unit": "Unit",
+  "Unit decides the name of 1 unit token, e.g. \"DOT\" for Polkadot": "Unit decides the name of 1 unit token, e.g. \"DOT\" for Polkadot",
+  "Address Prefix": "Address Prefix",
+  "Prefix indicates the ss58 address format in this network, is a number between 0 ~ 255 describes the precise format of the bytes of the address": "Prefix indicates the ss58 address format in this network, is a number between 0 ~ 255 describes the precise format of the bytes of the address",
+  "Decimals": "Decimals",
+  "Decimals decides the smallest unit of the token, which is 1/10^decimals": "Decimals decides the smallest unit of the token, which is 1/10^decimals"
 }
diff --git a/packages/apps/public/locales/zh/app-settings.json b/packages/apps/public/locales/zh/app-settings.json
index e5ad82cedcd2..a14701c4e7c6 100644
--- a/packages/apps/public/locales/zh/app-settings.json
+++ b/packages/apps/public/locales/zh/app-settings.json
@@ -23,5 +23,22 @@
   "remote node/endpoint to connect to": "远程节点/终端连接到",
   "custom endpoint": "自定义终端",
   "Default browser language (auto-detect)": "默认浏览器语言 (自动检测)",
-  "Generate Random Color": "随机生成颜色"
+  "No upgradable extensions found": "没有找到可以升级的浏览器插件",
+  "upgradable extensions": "升级浏览器插件",
+  "Update metadata": "升级metadata",
+  "Generate Random Color": "随机生成颜色",
+  "Network Name": "网络名称",
+  "Name of the network. It only for display purpose.": "网络名称，仅作为显示用",
+  "Path ID": "路径名",
+  "the path id used as the path prefix when deriving new account, all the accounts under this network will have the same prefix": "路径名是所有派生账户的前缀，此网络下的所有账号都有相同的路径前缀",
+  "Color": "颜色",
+  "The color used to distinguish this network with others, use color code with 3 or 6 digits, like \"#FFF\" or \"#111111\"": "颜色用来和其他网络相区别，用3位或者6位的16进制码表示，比如#FFF或#111111",
+  "Genesis Hash": "创世区块哈希",
+  "Genesis Hash refers to initial state of the chain, it cannot be changed once the chain is launched": "创世区块哈希代表网络的初始状态，在网络启动后不可改变",
+  "Unit": "单位",
+  "Unit decides the name of 1 unit token, e.g. \"DOT\" for Polkadot": "每一个token的单位，比如Polkadot的单位是DOT",
+  "Address Prefix": "地址前缀",
+  "Prefix indicates the ss58 address format in this network, is a number between 0 ~ 255 describes the precise format of the bytes of the address": "地址前缀用0~255的数来来表示SS58地址的编码格式",
+  "Decimals": "小数",
+  "Decimals decides the smallest unit of the token, which is 1/10^decimals": "小数代表每一单位token最小可以精确到多少位小数"
 }
diff --git a/packages/page-settings/src/modals/NetworkSpecs.tsx b/packages/page-settings/src/modals/NetworkSpecs.tsx
index 1324c69fff39..a856aca559e1 100644
--- a/packages/page-settings/src/modals/NetworkSpecs.tsx
+++ b/packages/page-settings/src/modals/NetworkSpecs.tsx
@@ -102,7 +102,7 @@ function NetworkSpecs ({ className, onClose }: Props): React.ReactElement<Props>
       <Input
         className='full'
         help={t('Name of the network. It only for display purpose.')}
-        label={t('Name')}
+        label={t('Network Name')}
         onChange={_onChangeValue('title')}
         value={networkSpecs.title}
       />
@@ -111,7 +111,7 @@ function NetworkSpecs ({ className, onClose }: Props): React.ReactElement<Props>
         className='full'
         help={t('the path id used as the path prefix when deriving new account, all the accounts under this network will have the same prefix')}
         isError={!_checkPathIdValid()}
-        label={t('Path Id')}
+        label={t('Path ID')}
         onChange={_onChangeValue('pathId')}
         value={networkSpecs.pathId}
       />
@@ -141,7 +141,7 @@ function NetworkSpecs ({ className, onClose }: Props): React.ReactElement<Props>
         value={networkSpecs.genesisHash}
       />
       <Input
-        className='full'
+        classNtame='full'
         help={t('Unit decides the name of 1 unit token, e.g. "DOT" for Polkadot')}
         isDisabled
         label={t('Unit')}
@@ -149,9 +149,9 @@ function NetworkSpecs ({ className, onClose }: Props): React.ReactElement<Props>
       />
       <Input
         className='full'
-        help={t('Prefix indicates the address format in this network, is a number between 0 ~ 255 describes the precise format of the bytes of the address')}
+        help={t('Prefix indicates the his network, is a number between 0 ~ 255 describes the precise format of the bytes of the address')}
         isDisabled
-        label={t('Prefix')}
+        label={t('Address Prefix')}
         value={networkSpecs.prefix}
       />
       <Input

From 6fd6764ac6d9f46b2fe23c904cb29748b8ffd99b Mon Sep 17 00:00:00 2001
From: Hanwen Cheng <heawen.cheng@gmail.com>
Date: Tue, 24 Mar 2020 16:20:26 +0100
Subject: [PATCH 07/13] center the modal

---
 packages/page-settings/src/modals/NetworkSpecs.tsx | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/packages/page-settings/src/modals/NetworkSpecs.tsx b/packages/page-settings/src/modals/NetworkSpecs.tsx
index a856aca559e1..a83512ebf9b1 100644
--- a/packages/page-settings/src/modals/NetworkSpecs.tsx
+++ b/packages/page-settings/src/modals/NetworkSpecs.tsx
@@ -179,9 +179,8 @@ const ColoredComponent = React.memo(styled(({ color, className }: ColoredCompone
 `);
 
 export default React.memo(styled(NetworkSpecs)`
-    position: absolute;
-    top: .5rem;
-    right: 3.5rem;
+  position: absolute;
+  top: .3rem;
   
   .settings--networkSpecs-colorButton {
     display: flex;
@@ -189,7 +188,7 @@ export default React.memo(styled(NetworkSpecs)`
   }
   
   .settings--networkSpecs-qr {
-    max-width: 30rem;
     margin: 0 auto;
+    max-width: 30rem;
   }
 `);

From 22fa7cbd64d681e4cd1d70a7e7b8fa79974efed9 Mon Sep 17 00:00:00 2001
From: Hanwen Cheng <heawen.cheng@gmail.com>
Date: Tue, 24 Mar 2020 16:22:14 +0100
Subject: [PATCH 08/13] change name

---
 packages/page-settings/src/modals/NetworkSpecs.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/page-settings/src/modals/NetworkSpecs.tsx b/packages/page-settings/src/modals/NetworkSpecs.tsx
index a83512ebf9b1..de754093997a 100644
--- a/packages/page-settings/src/modals/NetworkSpecs.tsx
+++ b/packages/page-settings/src/modals/NetworkSpecs.tsx
@@ -9,7 +9,7 @@ import registry from '@polkadot/react-api/typeRegistry';
 import ApiPromise from '@polkadot/api/promise';
 import { createType } from '@polkadot/types';
 import addressDefaults from '@polkadot/util-crypto/address/defaults';
-import { QRNetworkSpecs } from '@polkadot/react-qr'
+import { QrNetworkSpecs } from '@polkadot/react-qr'
 import { NetworkSpecsStruct } from '@polkadot/ui-settings';
 
 import React, {useEffect, useReducer, useState} from 'react';
@@ -161,7 +161,7 @@ function NetworkSpecs ({ className, onClose }: Props): React.ReactElement<Props>
         label={t('Decimals')}
         value={networkSpecs.decimals}
       />
-      <QRNetworkSpecs className='settings--networkSpecs-qr' networkSpecs={debouncedQrData}/>
+      <QrNetworkSpecs className='settings--networkSpecs-qr' networkSpecs={debouncedQrData}/>
     </Modal.Content>
     <Modal.Actions onCancel={onClose} withOr={false}>
     </Modal.Actions>

From ce216f0f78d7d6c38ff4cd31665d5cdaeb8d6474 Mon Sep 17 00:00:00 2001
From: Hanwen Cheng <heawen.cheng@gmail.com>
Date: Tue, 24 Mar 2020 22:52:26 +0100
Subject: [PATCH 09/13] use default color of chain

---
 packages/apps-config/src/ui/general/index.ts  |  8 ++++++
 packages/apps/src/Apps.tsx                    | 12 +++------
 .../page-settings/src/modals/NetworkSpecs.tsx | 26 +++++++++----------
 3 files changed, 24 insertions(+), 22 deletions(-)

diff --git a/packages/apps-config/src/ui/general/index.ts b/packages/apps-config/src/ui/general/index.ts
index 847e58ff973b..2c0f13cee886 100644
--- a/packages/apps-config/src/ui/general/index.ts
+++ b/packages/apps-config/src/ui/general/index.ts
@@ -37,6 +37,14 @@ const nodeColors: Record<string, any> = [
   [node.toLowerCase().replace(/-/g, ' ')]: color
 }), {});
 
+function sanitize (value?: string): string {
+  return value?.toLowerCase().replace('-', ' ') || '';
+}
+
+export const getSystemChainColor = (systemChain: string, systemName: string): string | undefined => {
+  return chainColors[sanitize(systemChain)] || nodeColors[sanitize(systemName)];
+};
+
 export {
   defaultColor,
   chainColors,
diff --git a/packages/apps/src/Apps.tsx b/packages/apps/src/Apps.tsx
index c9b82aff1e8e..cb243f43b518 100644
--- a/packages/apps/src/Apps.tsx
+++ b/packages/apps/src/Apps.tsx
@@ -7,7 +7,7 @@ import { BareProps as Props } from '@polkadot/react-components/types';
 import React, { useCallback, useMemo, useState } from 'react';
 import store from 'store';
 import styled from 'styled-components';
-import { defaultColor, chainColors, nodeColors } from '@polkadot/apps-config/ui/general';
+import { defaultColor, getSystemChainColor } from '@polkadot/apps-config/ui/general';
 import GlobalStyle from '@polkadot/react-components/styles';
 import { useApi } from '@polkadot/react-hooks';
 import Signer from '@polkadot/react-signer';
@@ -28,10 +28,6 @@ interface SidebarState {
 
 export const PORTAL_ID = 'portals';
 
-function sanitize (value?: string): string {
-  return value?.toLowerCase().replace('-', ' ') || '';
-}
-
 function Apps ({ className }: Props): React.ReactElement<Props> {
   const { systemChain, systemName } = useApi();
   const [sidebar, setSidebar] = useState<SidebarState>({
@@ -41,9 +37,9 @@ function Apps ({ className }: Props): React.ReactElement<Props> {
     ...store.get('sidebar', {}),
     isMenu: window.innerWidth < SIDEBAR_MENU_THRESHOLD
   });
-  const uiHighlight = useMemo((): string | undefined => {
-    return chainColors[sanitize(systemChain)] || nodeColors[sanitize(systemName)];
-  }, [systemChain, systemName]);
+  const uiHighlight = useMemo((): string | undefined =>
+    getSystemChainColor(systemChain, systemName), [systemChain, systemName]
+  );
   const { isCollapsed, isMenu, isMenuOpen } = sidebar;
 
   const _setSidebar = useCallback(
diff --git a/packages/page-settings/src/modals/NetworkSpecs.tsx b/packages/page-settings/src/modals/NetworkSpecs.tsx
index de754093997a..9261104aa17c 100644
--- a/packages/page-settings/src/modals/NetworkSpecs.tsx
+++ b/packages/page-settings/src/modals/NetworkSpecs.tsx
@@ -2,6 +2,7 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { getSystemChainColor } from '@polkadot/apps-config/ui/general';
 import { Button, Input, Modal } from '@polkadot/react-components';
 import { BareProps } from '@polkadot/react-components/types';
 import { useApi, useDebounce } from '@polkadot/react-hooks';
@@ -9,10 +10,10 @@ import registry from '@polkadot/react-api/typeRegistry';
 import ApiPromise from '@polkadot/api/promise';
 import { createType } from '@polkadot/types';
 import addressDefaults from '@polkadot/util-crypto/address/defaults';
-import { QrNetworkSpecs } from '@polkadot/react-qr'
+import { QrNetworkSpecs } from '@polkadot/react-qr';
 import { NetworkSpecsStruct } from '@polkadot/ui-settings';
 
-import React, {useEffect, useReducer, useState} from 'react';
+import React, { useEffect, useReducer, useState } from 'react';
 import styled from 'styled-components';
 
 import { useTranslation } from '../translate';
@@ -30,17 +31,18 @@ function getRandomColor (): string {
   return color;
 }
 
-const buildNetworkSpecs = async (api: ApiPromise): Promise<Partial<NetworkSpecsStruct>> => {
-  const [properties, systemChain, blockHash] = await Promise.all([
+const buildNetworkSpecs = async (api: ApiPromise, systemChain: string, systemName: string): Promise<Partial<NetworkSpecsStruct>> => {
+  const [properties, blockHash] = await Promise.all([
     api.rpc.system.properties(),
-    api.rpc.system.chain(),
     api.rpc.chain.getBlockHash(0)
   ]);
   const DEFAULT_DECIMALS = createType(registry, 'u32', 12);
   const DEFAULT_SS58 = createType(registry, 'u32', addressDefaults.prefix);
   const title = systemChain.toString();
   const defaultPathId = title.replace(/\s/g, '_').toLowerCase();
-  const networkSpecs = {
+  const chainColor = getSystemChainColor(systemChain, systemName) || getRandomColor();
+  return {
+    color: chainColor,
     decimals: properties.tokenDecimals.unwrapOr(DEFAULT_DECIMALS).toNumber(),
     prefix: properties.ss58Format.unwrapOr(DEFAULT_SS58).toNumber(),
     unit: properties.tokenSymbol.toString(),
@@ -48,7 +50,6 @@ const buildNetworkSpecs = async (api: ApiPromise): Promise<Partial<NetworkSpecsS
     title,
     genesisHash: blockHash.toString()
   };
-  return networkSpecs;
 };
 
 function NetworkSpecs ({ className, onClose }: Props): React.ReactElement<Props> | null {
@@ -74,19 +75,16 @@ function NetworkSpecs ({ className, onClose }: Props): React.ReactElement<Props>
   };
   const [networkSpecs, setNetworkSpecs] = useReducer(reducer, initialState);
 
-  const apiProps = useApi();
-  if (!apiProps.isApiReady) return null;
+  const { api, systemChain, systemName, isApiReady } = useApi();
+  if (!isApiReady) return null;
 
   useEffect((): void => {
     const getNetworkSpec = async (): Promise<void> => {
-      const defaultNetworkSpecs = await buildNetworkSpecs(apiProps.api);
+      const defaultNetworkSpecs = await buildNetworkSpecs(api, systemChain, systemName);
       setNetworkSpecs(defaultNetworkSpecs);
     };
     getNetworkSpec();
-  }, [apiProps]);
-
-  useEffect((): void => {
-  });
+  }, [api]);
 
   type inputListener = (v: string) => void;
   const _onChangeValue = (k: keyof NetworkSpecsStruct): inputListener => (v: string): void => setNetworkSpecs({ [k]: v });

From a33123976a872e65df1dfc587210b80ab8b7ea2d Mon Sep 17 00:00:00 2001
From: Hanwen Cheng <heawen.cheng@gmail.com>
Date: Wed, 25 Mar 2020 21:16:12 +0100
Subject: [PATCH 10/13] remove path id in network specs

---
 packages/apps/public/locales/en/app-settings.json  |  2 --
 packages/apps/public/locales/ja/app-settings.json  |  2 --
 packages/apps/public/locales/zh/app-settings.json  |  2 --
 packages/page-settings/src/modals/NetworkSpecs.tsx | 14 +-------------
 4 files changed, 1 insertion(+), 19 deletions(-)

diff --git a/packages/apps/public/locales/en/app-settings.json b/packages/apps/public/locales/en/app-settings.json
index 7ff7f4b8a351..a4446bbd7145 100644
--- a/packages/apps/public/locales/en/app-settings.json
+++ b/packages/apps/public/locales/en/app-settings.json
@@ -30,8 +30,6 @@
   "Generate Random Color": "Generate Random Color",
   "Network Name": "Network Name",
   "Name of the network. It only for display purpose.": "Name of the network. It only for display purpose.",
-  "Path ID": "Path ID",
-  "the path id used as the path prefix when deriving new account, all the accounts under this network will have the same prefix": "the path id used as the path prefix when deriving new account, all the accounts under this network will have the same prefix",
   "Color": "Color",
   "The color used to distinguish this network with others, use color code with 3 or 6 digits, like \"#FFF\" or \"#111111\"": "The color used to distinguish this network with others, use color code with 3 or 6 digits, like \"#FFF\" or \"#111111\"",
   "Genesis Hash": "Genesis Hash",
diff --git a/packages/apps/public/locales/ja/app-settings.json b/packages/apps/public/locales/ja/app-settings.json
index 99b3a480960d..01076fbaacf6 100644
--- a/packages/apps/public/locales/ja/app-settings.json
+++ b/packages/apps/public/locales/ja/app-settings.json
@@ -25,8 +25,6 @@
   "Generate Random Color": "Generate Random Color",
   "Network Name": "Network Name",
   "Name of the network. It only for display purpose.": "Name of the network. It only for display purpose.",
-  "Path ID": "Path ID",
-  "the path id used as the path prefix when deriving new account, all the accounts under this network will have the same prefix": "the path id used as the path prefix when deriving new account, all the accounts under this network will have the same prefix",
   "Color": "Color",
   "The color used to distinguish this network with others, use color code with 3 or 6 digits, like \"#FFF\" or \"#111111\"": "The color used to distinguish this network with others, use color code with 3 or 6 digits, like \"#FFF\" or \"#111111\"",
   "Genesis Hash": "Genesis Hash",
diff --git a/packages/apps/public/locales/zh/app-settings.json b/packages/apps/public/locales/zh/app-settings.json
index a14701c4e7c6..9bd5dc6bd3bb 100644
--- a/packages/apps/public/locales/zh/app-settings.json
+++ b/packages/apps/public/locales/zh/app-settings.json
@@ -29,8 +29,6 @@
   "Generate Random Color": "随机生成颜色",
   "Network Name": "网络名称",
   "Name of the network. It only for display purpose.": "网络名称，仅作为显示用",
-  "Path ID": "路径名",
-  "the path id used as the path prefix when deriving new account, all the accounts under this network will have the same prefix": "路径名是所有派生账户的前缀，此网络下的所有账号都有相同的路径前缀",
   "Color": "颜色",
   "The color used to distinguish this network with others, use color code with 3 or 6 digits, like \"#FFF\" or \"#111111\"": "颜色用来和其他网络相区别，用3位或者6位的16进制码表示，比如#FFF或#111111",
   "Genesis Hash": "创世区块哈希",
diff --git a/packages/page-settings/src/modals/NetworkSpecs.tsx b/packages/page-settings/src/modals/NetworkSpecs.tsx
index 9261104aa17c..80cc2c123d79 100644
--- a/packages/page-settings/src/modals/NetworkSpecs.tsx
+++ b/packages/page-settings/src/modals/NetworkSpecs.tsx
@@ -39,14 +39,12 @@ const buildNetworkSpecs = async (api: ApiPromise, systemChain: string, systemNam
   const DEFAULT_DECIMALS = createType(registry, 'u32', 12);
   const DEFAULT_SS58 = createType(registry, 'u32', addressDefaults.prefix);
   const title = systemChain.toString();
-  const defaultPathId = title.replace(/\s/g, '_').toLowerCase();
   const chainColor = getSystemChainColor(systemChain, systemName) || getRandomColor();
   return {
     color: chainColor,
     decimals: properties.tokenDecimals.unwrapOr(DEFAULT_DECIMALS).toNumber(),
     prefix: properties.ss58Format.unwrapOr(DEFAULT_SS58).toNumber(),
     unit: properties.tokenSymbol.toString(),
-    pathId: defaultPathId,
     title,
     genesisHash: blockHash.toString()
   };
@@ -58,7 +56,6 @@ function NetworkSpecs ({ className, onClose }: Props): React.ReactElement<Props>
     decimals: 0,
     prefix: 0,
     unit: 'UNIT',
-    pathId: '',
     title: '',
     color: getRandomColor(),
     genesisHash: ''
@@ -89,7 +86,6 @@ function NetworkSpecs ({ className, onClose }: Props): React.ReactElement<Props>
   type inputListener = (v: string) => void;
   const _onChangeValue = (k: keyof NetworkSpecsStruct): inputListener => (v: string): void => setNetworkSpecs({ [k]: v });
   const _onSetRandomColor = (): void => setNetworkSpecs({ color: getRandomColor() });
-  const _checkPathIdValid = (): boolean => /^[\w-.]+$/.test(networkSpecs.pathId);
   const _checkColorValid = (): boolean => /^#[\da-fA-F]{6}|#[\da-fA-F]{3}$/.test(networkSpecs.color);
 
   return <Modal
@@ -98,21 +94,13 @@ function NetworkSpecs ({ className, onClose }: Props): React.ReactElement<Props>
   >
     <Modal.Content>
       <Input
+        autoFocus
         className='full'
         help={t('Name of the network. It only for display purpose.')}
         label={t('Network Name')}
         onChange={_onChangeValue('title')}
         value={networkSpecs.title}
       />
-      <Input
-        autoFocus
-        className='full'
-        help={t('the path id used as the path prefix when deriving new account, all the accounts under this network will have the same prefix')}
-        isError={!_checkPathIdValid()}
-        label={t('Path ID')}
-        onChange={_onChangeValue('pathId')}
-        value={networkSpecs.pathId}
-      />
       <Input
         className='full'
         help={t('The color used to distinguish this network with others, use color code with 3 or 6 digits, like "#FFF" or "#111111"')}

From 741d91ab2ca0557246287ae978330ebbc6c5f198 Mon Sep 17 00:00:00 2001
From: Hanwen Cheng <heawen.cheng@gmail.com>
Date: Thu, 26 Mar 2020 18:19:03 +0100
Subject: [PATCH 11/13] refactor modal into metadata

---
 packages/apps-config/src/ui/general/index.ts  |   8 -
 packages/apps-config/src/ui/index.ts          |   8 +
 .../apps/public/locales/en/app-settings.json  |   2 +-
 .../apps/public/locales/ja/app-settings.json  |   3 +
 .../apps/public/locales/zh/app-settings.json  |   7 +-
 packages/apps/src/Apps.tsx                    |   3 +-
 packages/page-settings/src/General.tsx        |  15 --
 .../src/Metadata/ChainColorIndicator.tsx      |  23 +++
 .../src/{ => Metadata}/Extensions.tsx         |   6 +-
 .../src/Metadata/NetworkSpecs.tsx             | 146 ++++++++++++++
 packages/page-settings/src/Metadata/index.tsx |  27 +++
 packages/page-settings/src/index.tsx          |  23 +--
 .../page-settings/src/modals/NetworkSpecs.tsx | 180 ------------------
 packages/page-settings/src/useChainInfo.ts    |  13 +-
 14 files changed, 233 insertions(+), 231 deletions(-)
 create mode 100644 packages/page-settings/src/Metadata/ChainColorIndicator.tsx
 rename packages/page-settings/src/{ => Metadata}/Extensions.tsx (92%)
 create mode 100644 packages/page-settings/src/Metadata/NetworkSpecs.tsx
 create mode 100644 packages/page-settings/src/Metadata/index.tsx
 delete mode 100644 packages/page-settings/src/modals/NetworkSpecs.tsx

diff --git a/packages/apps-config/src/ui/general/index.ts b/packages/apps-config/src/ui/general/index.ts
index 2c0f13cee886..847e58ff973b 100644
--- a/packages/apps-config/src/ui/general/index.ts
+++ b/packages/apps-config/src/ui/general/index.ts
@@ -37,14 +37,6 @@ const nodeColors: Record<string, any> = [
   [node.toLowerCase().replace(/-/g, ' ')]: color
 }), {});
 
-function sanitize (value?: string): string {
-  return value?.toLowerCase().replace('-', ' ') || '';
-}
-
-export const getSystemChainColor = (systemChain: string, systemName: string): string | undefined => {
-  return chainColors[sanitize(systemChain)] || nodeColors[sanitize(systemName)];
-};
-
 export {
   defaultColor,
   chainColors,
diff --git a/packages/apps-config/src/ui/index.ts b/packages/apps-config/src/ui/index.ts
index a7797ddb04ca..c20b3ac47457 100644
--- a/packages/apps-config/src/ui/index.ts
+++ b/packages/apps-config/src/ui/index.ts
@@ -2,8 +2,16 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import { chainColors, nodeColors } from './general';
 import { identityNodes } from './identityIcons';
 
+function sanitize (value?: string): string {
+  return value?.toLowerCase().replace('-', ' ') || '';
+}
 export function getSystemIcon (systemName: string): 'beachball' | 'polkadot' | 'substrate' {
   return (identityNodes[systemName.toLowerCase().replace(/-/g, ' ')] || 'substrate') as 'substrate';
 }
+
+export const getSystemChainColor = (systemChain: string, systemName: string): string | undefined => {
+  return chainColors[sanitize(systemChain)] || nodeColors[sanitize(systemName)];
+};
diff --git a/packages/apps/public/locales/en/app-settings.json b/packages/apps/public/locales/en/app-settings.json
index a4446bbd7145..05d9951ad850 100644
--- a/packages/apps/public/locales/en/app-settings.json
+++ b/packages/apps/public/locales/en/app-settings.json
@@ -16,7 +16,6 @@
   "default interface language": "default interface language",
   "Cancel": "Cancel",
   "Save & Reload": "Save & Reload",
-  "Export Network Specs": "Export Network Specs",
   "General": "General",
   "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",
@@ -27,6 +26,7 @@
   "upgradable extensions": "upgradable extensions",
   "Update metadata": "Update metadata",
   "Extensions {{count}}": "Extensions {{count}}",
+  "Chain Specifications as a QR Code": "Chain Specifications as a QR Code",
   "Generate Random Color": "Generate Random Color",
   "Network Name": "Network Name",
   "Name of the network. It only for display purpose.": "Name of the network. It only for display purpose.",
diff --git a/packages/apps/public/locales/ja/app-settings.json b/packages/apps/public/locales/ja/app-settings.json
index 01076fbaacf6..1edd819ce7fa 100644
--- a/packages/apps/public/locales/ja/app-settings.json
+++ b/packages/apps/public/locales/ja/app-settings.json
@@ -22,6 +22,9 @@
   "remote node/endpoint to connect to": "リモートノード・エンドポイント",
   "custom endpoint": "カスタムエンドポイント",
   "Default browser language (auto-detect)": "ブラウザー設定言語（自動反映）",
+  "Update metadata": "Update metadata",
+  "Extensions {{count}}": "Extensions {{count}}",
+  "Chain Specifications as a QR Code": "Chain Specifications as a QR Code",
   "Generate Random Color": "Generate Random Color",
   "Network Name": "Network Name",
   "Name of the network. It only for display purpose.": "Name of the network. It only for display purpose.",
diff --git a/packages/apps/public/locales/zh/app-settings.json b/packages/apps/public/locales/zh/app-settings.json
index 9bd5dc6bd3bb..8cd384766fc5 100644
--- a/packages/apps/public/locales/zh/app-settings.json
+++ b/packages/apps/public/locales/zh/app-settings.json
@@ -16,16 +16,17 @@
   "default interface language": "默认接口语言",
   "Cancel": "取消",
   "Save & Reload": "保存并重载",
-  "Export Network Specs": "导出网络配置",
   "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": "自定义终端",
   "Default browser language (auto-detect)": "默认浏览器语言 (自动检测)",
-  "No upgradable extensions found": "没有找到可以升级的浏览器插件",
+  "No upgradable extensions found": "没有需要升级的浏览器插件",
   "upgradable extensions": "升级浏览器插件",
-  "Update metadata": "升级metadata",
+  "Update metadata": "升级Metadata",
+  "Extensions {{count}}": "浏览器插件 {{count}}",
+  "Chain Specifications as a QR Code": "生成含网络参数的二维码",
   "Generate Random Color": "随机生成颜色",
   "Network Name": "网络名称",
   "Name of the network. It only for display purpose.": "网络名称，仅作为显示用",
diff --git a/packages/apps/src/Apps.tsx b/packages/apps/src/Apps.tsx
index cb243f43b518..4ca2d4a6bdb5 100644
--- a/packages/apps/src/Apps.tsx
+++ b/packages/apps/src/Apps.tsx
@@ -7,7 +7,8 @@ import { BareProps as Props } from '@polkadot/react-components/types';
 import React, { useCallback, useMemo, useState } from 'react';
 import store from 'store';
 import styled from 'styled-components';
-import { defaultColor, getSystemChainColor } from '@polkadot/apps-config/ui/general';
+import { getSystemChainColor } from '@polkadot/apps-config/ui';
+import { defaultColor } from '@polkadot/apps-config/ui/general';
 import GlobalStyle from '@polkadot/react-components/styles';
 import { useApi } from '@polkadot/react-hooks';
 import Signer from '@polkadot/react-signer';
diff --git a/packages/page-settings/src/General.tsx b/packages/page-settings/src/General.tsx
index e15966410b5e..ff5b3e512386 100644
--- a/packages/page-settings/src/General.tsx
+++ b/packages/page-settings/src/General.tsx
@@ -3,7 +3,6 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { Option } from '@polkadot/apps-config/settings/types';
-import { useApi } from '@polkadot/react-hooks';
 
 import React, { useCallback, useEffect, useState, useMemo } from 'react';
 import { availableLanguages, availableSs58 } from '@polkadot/apps-config/settings';
@@ -14,7 +13,6 @@ import uiSettings, { SettingsStruct } from '@polkadot/ui-settings';
 import { useTranslation } from './translate';
 import { createIdenticon, createOption, save, saveAndReload } from './util';
 import SelectUrl from './SelectUrl';
-import NetworkSpecs from './modals/NetworkSpecs';
 
 interface Props {
   className?: string;
@@ -28,9 +26,7 @@ function General ({ className, isModalContent, onClose }: Props): React.ReactEle
   const { t } = useTranslation();
   // tri-state: null = nothing changed, false = no reload, true = reload required
   const [changed, setChanged] = useState<boolean | null>(null);
-  const [isQrOpen, setQrOpen] = useState<boolean>(false);
   const [settings, setSettings] = useState(uiSettings.get());
-  const apiProps = useApi();
   const iconOptions = useMemo((): Option[] => {
     return uiSettings.availableIcons.map((o): Option => createIdenticon(t, o, ['default']));
   }, [t]);
@@ -72,8 +68,6 @@ function General ({ className, isModalContent, onClose }: Props): React.ReactEle
     },
     [settings]
   );
-  const _showNetworkSpecsQr = (): void => setQrOpen(true);
-  const _closeNetworkSpecsQr = (): void => setQrOpen(false);
 
   const { icon, i18nLang, ledgerConn, prefix, uiMode } = settings;
 
@@ -137,15 +131,6 @@ function General ({ className, isModalContent, onClose }: Props): React.ReactEle
             <Button.Or />
           </>
         )}
-        {isQrOpen && <NetworkSpecs onClose={_closeNetworkSpecsQr}/>}
-        <Button
-          isDisabled={!apiProps.isApiReady}
-          isPrimary={isModalContent}
-          onClick={_showNetworkSpecsQr}
-          label={t('Export Network Specs')}
-          icon='external'
-        />
-        <Button.Or/>
         <Button
           isDisabled={changed === null}
           isPrimary={isModalContent}
diff --git a/packages/page-settings/src/Metadata/ChainColorIndicator.tsx b/packages/page-settings/src/Metadata/ChainColorIndicator.tsx
new file mode 100644
index 000000000000..6bf8671a53b8
--- /dev/null
+++ b/packages/page-settings/src/Metadata/ChainColorIndicator.tsx
@@ -0,0 +1,23 @@
+// Copyright 2017-2020 @polkadot/app-settings authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import React from 'react';
+import styled from 'styled-components';
+
+import { BareProps } from '@polkadot/react-components/types';
+
+interface Props extends BareProps {
+  color: string;
+}
+
+function ChainColorIndicator ({ color, className }: Props): React.ReactElement<Props> {
+  return <div color={color} className={className}/>;
+}
+
+export default React.memo(styled(ChainColorIndicator)`
+    background-color: ${(props: Props): string => props.color} !important;
+    width: 100px;
+    flex: 1;
+    border-radius: 4px;
+`);
diff --git a/packages/page-settings/src/Extensions.tsx b/packages/page-settings/src/Metadata/Extensions.tsx
similarity index 92%
rename from packages/page-settings/src/Extensions.tsx
rename to packages/page-settings/src/Metadata/Extensions.tsx
index d816b87e53bf..6c31547381bb 100644
--- a/packages/page-settings/src/Extensions.tsx
+++ b/packages/page-settings/src/Metadata/Extensions.tsx
@@ -6,9 +6,9 @@ import React, { useCallback, useMemo, useState } from 'react';
 import { Button, Dropdown } from '@polkadot/react-components';
 import { useToggle } from '@polkadot/react-hooks';
 
-import { useTranslation } from './translate';
-import useChainInfo from './useChainInfo';
-import useExtensions from './useExtensions';
+import { useTranslation } from '../translate';
+import useChainInfo from '../useChainInfo';
+import useExtensions from '../useExtensions';
 
 function Extensions (): React.ReactElement {
   const { t } = useTranslation();
diff --git a/packages/page-settings/src/Metadata/NetworkSpecs.tsx b/packages/page-settings/src/Metadata/NetworkSpecs.tsx
new file mode 100644
index 000000000000..a263122a8ef2
--- /dev/null
+++ b/packages/page-settings/src/Metadata/NetworkSpecs.tsx
@@ -0,0 +1,146 @@
+// Copyright 2017-2020 @polkadot/app-settings authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
+import { Button, Input } from '@polkadot/react-components';
+import { BareProps } from '@polkadot/react-components/types';
+import { useApi, useDebounce } from '@polkadot/react-hooks';
+import { QrNetworkSpecs } from '@polkadot/react-qr';
+import { NetworkSpecsStruct } from '@polkadot/ui-settings';
+
+import React, { useEffect, useReducer, useState } from 'react';
+import styled from 'styled-components';
+
+import ChainColorIndicator from './ChainColorIndicator';
+import { useTranslation } from '../translate';
+import useChainInfo from '../useChainInfo';
+
+function getRandomColor (): string {
+  const letters = '0123456789ABCDEF';
+  let color = '#';
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+}
+
+function NetworkSpecs ({ className }: BareProps): React.ReactElement<BareProps> | null {
+  const { t } = useTranslation();
+  const { isApiReady, systemChain } = useApi();
+  const chainInfo = useChainInfo();
+  const initialState = {
+    decimals: 0,
+    prefix: 0,
+    unit: 'UNIT',
+    title: '',
+    color: '#FFFFFF',
+    genesisHash: ''
+  };
+  const [qrData, setQrData] = useState<NetworkSpecsStruct>(initialState);
+  const debouncedQrData = useDebounce(qrData, 500);
+  const reducer = (state: NetworkSpecsStruct, delta: Partial<NetworkSpecsStruct>): NetworkSpecsStruct => {
+    const newState = {
+      ...state,
+      ...delta
+    };
+    setQrData(newState);
+    return newState;
+  };
+  const [networkSpecs, setNetworkSpecs] = useReducer(reducer, initialState);
+
+  useEffect((): void => {
+    if (chainInfo != null) {
+      setNetworkSpecs({
+        color: chainInfo.color || getRandomColor(),
+        decimals: chainInfo.tokenDecimals,
+        prefix: chainInfo.ss58Format,
+        unit: chainInfo.tokenSymbol,
+        title: systemChain,
+        genesisHash: chainInfo.genesisHash
+      });
+    }
+  }, [chainInfo, systemChain]);
+
+  if (!isApiReady) {
+    return null;
+  }
+
+  type inputListener = (v: string) => void;
+  const _onChangeValue = (k: keyof NetworkSpecsStruct): inputListener => (v: string): void => setNetworkSpecs({ [k]: v });
+  const _onSetRandomColor = (): void => setNetworkSpecs({ color: getRandomColor() });
+  const _checkColorValid = (): boolean => /^#[\da-fA-F]{6}|#[\da-fA-F]{3}$/.test(networkSpecs.color);
+
+  return <div
+    className={className}
+  >
+    <Input
+      autoFocus
+      className='full'
+      help={t('Name of the network. It only for display purpose.')}
+      label={t('Network Name')}
+      onChange={_onChangeValue('title')}
+      value={networkSpecs.title}
+    />
+    <Input
+      className='full'
+      help={t('The color used to distinguish this network with others, use color code with 3 or 6 digits, like "#FFF" or "#111111"')}
+      isError={!_checkColorValid()}
+      label={t('Color')}
+      onChange={_onChangeValue('color')}
+      value={networkSpecs.color}
+    >
+      <div className='settings--networkSpecs-colorButton'>
+        <Button
+          label={t('Generate Random Color')}
+          icon='sync'
+          key='spread'
+          onClick={_onSetRandomColor}
+        />
+        <ChainColorIndicator color={networkSpecs.color}/>
+      </div>
+    </Input>
+    <Input
+      className='full'
+      help={t('Genesis Hash refers to initial state of the chain, it cannot be changed once the chain is launched')}
+      isDisabled
+      label={t('Genesis Hash')}
+      value={networkSpecs.genesisHash}
+    />
+    <Input
+      className='full'
+      help={t('Unit decides the name of 1 unit token, e.g. "DOT" for Polkadot')}
+      isDisabled
+      label={t('Unit')}
+      value={networkSpecs.unit}
+    />
+    <Input
+      className='full'
+      help={t('Prefix indicates the his network, is a number between 0 ~ 255 describes the precise format of the bytes of the address')}
+      isDisabled
+      label={t('Address Prefix')}
+      value={networkSpecs.prefix}
+    />
+    <Input
+      className='full'
+      help={t('Decimals decides the smallest unit of the token, which is 1/10^decimals')}
+      isDisabled
+      label={t('Decimals')}
+      value={networkSpecs.decimals}
+    />
+    <QrNetworkSpecs className='settings--networkSpecs-qr' networkSpecs={debouncedQrData}/>
+  </div>;
+}
+
+export default React.memo(styled(NetworkSpecs)`
+  top: .3rem;
+  
+  .settings--networkSpecs-colorButton {
+    display: flex;
+    flex-direction: row;
+  }
+  
+  .settings--networkSpecs-qr {
+    margin: 2rem auto;
+    max-width: 15rem;
+  }
+`);
diff --git a/packages/page-settings/src/Metadata/index.tsx b/packages/page-settings/src/Metadata/index.tsx
new file mode 100644
index 000000000000..25e6d54fa494
--- /dev/null
+++ b/packages/page-settings/src/Metadata/index.tsx
@@ -0,0 +1,27 @@
+import { useTranslation } from '@polkadot/app-settings/translate';
+import useCounter from '@polkadot/app-settings/useCounter';
+import React, { useMemo } from 'react';
+
+import Extensions from './Extensions';
+import NetworkSpecs from './NetworkSpecs';
+
+export default function Metadata (): React.ReactElement {
+  const { t } = useTranslation();
+  const numExtensions = useCounter();
+  const extensionsTitle = useMemo(() => t('Extensions {{count}}', {
+    replace: {
+      count: numExtensions
+        ? `(${numExtensions})`
+        : ''
+    }
+  }), [numExtensions, t]);
+
+  return (
+    <>
+      <h1>{extensionsTitle}</h1>
+      <Extensions />
+      <h1>{t('Chain Specifications as a QR Code')}</h1>
+      <NetworkSpecs />
+    </>
+  );
+}
diff --git a/packages/page-settings/src/index.tsx b/packages/page-settings/src/index.tsx
index 0ce4062899b9..dc0ef85cd349 100644
--- a/packages/page-settings/src/index.tsx
+++ b/packages/page-settings/src/index.tsx
@@ -4,7 +4,7 @@
 
 import { AppProps as Props } from '@polkadot/react-components/types';
 
-import React, { useMemo } from 'react';
+import React from 'react';
 import { Route, Switch } from 'react-router';
 import { HelpOverlay, Tabs } from '@polkadot/react-components';
 import uiSettings from '@polkadot/ui-settings';
@@ -12,7 +12,7 @@ import uiSettings from '@polkadot/ui-settings';
 import md from './md/basics.md';
 import { useTranslation } from './translate';
 import Developer from './Developer';
-import Extensions from './Extensions';
+import Metadata from './Metadata';
 import General from './General';
 import useCounter from './useCounter';
 
@@ -23,29 +23,22 @@ const hidden = uiSettings.uiMode === 'full'
   : ['developer'];
 
 function SettingsApp ({ basePath, onStatusChange }: Props): React.ReactElement<Props> {
-  const numExtensions = useCounter();
   const { t } = useTranslation();
-  const items = useMemo(() => [
+  const items = [
     {
       isRoot: true,
       name: 'general',
       text: t('General')
     },
     {
-      name: 'extensions',
-      text: t('Extensions {{count}}', {
-        replace: {
-          count: numExtensions
-            ? `(${numExtensions})`
-            : ''
-        }
-      })
+      name: 'metadata',
+      text: t('Metadata')
     },
     {
       name: 'developer',
       text: t('Developer')
     }
-  ], [numExtensions, t]);
+  ];
 
   return (
     <main className='settings--App'>
@@ -64,8 +57,8 @@ function SettingsApp ({ basePath, onStatusChange }: Props): React.ReactElement<P
             onStatusChange={onStatusChange}
           />
         </Route>
-        <Route path={`${basePath}/extensions`}>
-          <Extensions />
+        <Route path={`${basePath}/metadata`}>
+          <Metadata />
         </Route>
         <Route component={General} />
       </Switch>
diff --git a/packages/page-settings/src/modals/NetworkSpecs.tsx b/packages/page-settings/src/modals/NetworkSpecs.tsx
deleted file mode 100644
index 80cc2c123d79..000000000000
--- a/packages/page-settings/src/modals/NetworkSpecs.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-// Copyright 2017-2020 @polkadot/app-settings authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import { getSystemChainColor } from '@polkadot/apps-config/ui/general';
-import { Button, Input, Modal } from '@polkadot/react-components';
-import { BareProps } from '@polkadot/react-components/types';
-import { useApi, useDebounce } from '@polkadot/react-hooks';
-import registry from '@polkadot/react-api/typeRegistry';
-import ApiPromise from '@polkadot/api/promise';
-import { createType } from '@polkadot/types';
-import addressDefaults from '@polkadot/util-crypto/address/defaults';
-import { QrNetworkSpecs } from '@polkadot/react-qr';
-import { NetworkSpecsStruct } from '@polkadot/ui-settings';
-
-import React, { useEffect, useReducer, useState } from 'react';
-import styled from 'styled-components';
-
-import { useTranslation } from '../translate';
-
-interface Props extends BareProps {
-  onClose: () => void;
-}
-
-function getRandomColor (): string {
-  const letters = '0123456789ABCDEF';
-  let color = '#';
-  for (let i = 0; i < 6; i++) {
-    color += letters[Math.floor(Math.random() * 16)];
-  }
-  return color;
-}
-
-const buildNetworkSpecs = async (api: ApiPromise, systemChain: string, systemName: string): Promise<Partial<NetworkSpecsStruct>> => {
-  const [properties, blockHash] = await Promise.all([
-    api.rpc.system.properties(),
-    api.rpc.chain.getBlockHash(0)
-  ]);
-  const DEFAULT_DECIMALS = createType(registry, 'u32', 12);
-  const DEFAULT_SS58 = createType(registry, 'u32', addressDefaults.prefix);
-  const title = systemChain.toString();
-  const chainColor = getSystemChainColor(systemChain, systemName) || getRandomColor();
-  return {
-    color: chainColor,
-    decimals: properties.tokenDecimals.unwrapOr(DEFAULT_DECIMALS).toNumber(),
-    prefix: properties.ss58Format.unwrapOr(DEFAULT_SS58).toNumber(),
-    unit: properties.tokenSymbol.toString(),
-    title,
-    genesisHash: blockHash.toString()
-  };
-};
-
-function NetworkSpecs ({ className, onClose }: Props): React.ReactElement<Props> | null {
-  const { t } = useTranslation();
-  const initialState = {
-    decimals: 0,
-    prefix: 0,
-    unit: 'UNIT',
-    title: '',
-    color: getRandomColor(),
-    genesisHash: ''
-  };
-  const [qrData, setQrData] = useState<NetworkSpecsStruct>(initialState);
-  const debouncedQrData = useDebounce(qrData, 500);
-  const reducer = (state: NetworkSpecsStruct, delta: Partial<NetworkSpecsStruct>): NetworkSpecsStruct => {
-    const newState = {
-      ...state,
-      ...delta
-    };
-    setQrData(newState);
-    return newState;
-  };
-  const [networkSpecs, setNetworkSpecs] = useReducer(reducer, initialState);
-
-  const { api, systemChain, systemName, isApiReady } = useApi();
-  if (!isApiReady) return null;
-
-  useEffect((): void => {
-    const getNetworkSpec = async (): Promise<void> => {
-      const defaultNetworkSpecs = await buildNetworkSpecs(api, systemChain, systemName);
-      setNetworkSpecs(defaultNetworkSpecs);
-    };
-    getNetworkSpec();
-  }, [api]);
-
-  type inputListener = (v: string) => void;
-  const _onChangeValue = (k: keyof NetworkSpecsStruct): inputListener => (v: string): void => setNetworkSpecs({ [k]: v });
-  const _onSetRandomColor = (): void => setNetworkSpecs({ color: getRandomColor() });
-  const _checkColorValid = (): boolean => /^#[\da-fA-F]{6}|#[\da-fA-F]{3}$/.test(networkSpecs.color);
-
-  return <Modal
-    className={className}
-    header={t('Export Network Specs')}
-  >
-    <Modal.Content>
-      <Input
-        autoFocus
-        className='full'
-        help={t('Name of the network. It only for display purpose.')}
-        label={t('Network Name')}
-        onChange={_onChangeValue('title')}
-        value={networkSpecs.title}
-      />
-      <Input
-        className='full'
-        help={t('The color used to distinguish this network with others, use color code with 3 or 6 digits, like "#FFF" or "#111111"')}
-        isError={!_checkColorValid()}
-        label={t('Color')}
-        onChange={_onChangeValue('color')}
-        value={networkSpecs.color}
-      >
-        <div className='settings--networkSpecs-colorButton'>
-          <Button
-            label={t('Generate Random Color')}
-            icon='sync'
-            key='spread'
-            onClick={_onSetRandomColor}
-          />
-          <ColoredComponent color={networkSpecs.color}/>
-        </div>
-      </Input>
-      <Input
-        className='full'
-        help={t('Genesis Hash refers to initial state of the chain, it cannot be changed once the chain is launched')}
-        isDisabled
-        label={t('Genesis Hash')}
-        value={networkSpecs.genesisHash}
-      />
-      <Input
-        classNtame='full'
-        help={t('Unit decides the name of 1 unit token, e.g. "DOT" for Polkadot')}
-        isDisabled
-        label={t('Unit')}
-        value={networkSpecs.unit}
-      />
-      <Input
-        className='full'
-        help={t('Prefix indicates the his network, is a number between 0 ~ 255 describes the precise format of the bytes of the address')}
-        isDisabled
-        label={t('Address Prefix')}
-        value={networkSpecs.prefix}
-      />
-      <Input
-        className='full'
-        help={t('Decimals decides the smallest unit of the token, which is 1/10^decimals')}
-        isDisabled
-        label={t('Decimals')}
-        value={networkSpecs.decimals}
-      />
-      <QrNetworkSpecs className='settings--networkSpecs-qr' networkSpecs={debouncedQrData}/>
-    </Modal.Content>
-    <Modal.Actions onCancel={onClose} withOr={false}>
-    </Modal.Actions>
-  </Modal>;
-}
-
-interface ColoredComponentProps extends BareProps {
-  color: string;
-}
-const ColoredComponent = React.memo(styled(({ color, className }: ColoredComponentProps) => (<div color={color} className={className}/>))`
-    background-color: ${(props: ColoredComponentProps): string => props.color};
-    width: 100px;
-    flex: 1;
-    border-radius: 4px;
-`);
-
-export default React.memo(styled(NetworkSpecs)`
-  position: absolute;
-  top: .3rem;
-  
-  .settings--networkSpecs-colorButton {
-    display: flex;
-    flex-direction: row;
-  }
-  
-  .settings--networkSpecs-qr {
-    margin: 0 auto;
-    max-width: 30rem;
-  }
-`);
diff --git a/packages/page-settings/src/useChainInfo.ts b/packages/page-settings/src/useChainInfo.ts
index 162cfde25b0f..e40294b0e09f 100644
--- a/packages/page-settings/src/useChainInfo.ts
+++ b/packages/page-settings/src/useChainInfo.ts
@@ -4,21 +4,24 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { MetadataDef } from '@polkadot/extension-inject/types';
-
-import { useEffect, useState } from 'react';
 import { getChainTypes } from '@polkadot/apps-config/api';
-import { getSystemIcon } from '@polkadot/apps-config/ui';
+import { getSystemChainColor, getSystemIcon } from '@polkadot/apps-config/ui';
 import { useApi } from '@polkadot/react-hooks';
 
-interface ChainInfo extends MetadataDef {}
+import { useEffect, useState } from 'react';
+
+interface ChainInfo extends MetadataDef {
+  color: string | undefined;
+}
 
 export default function useChainInfo (): ChainInfo | null {
   const { api, isApiReady, systemChain, systemName } = useApi();
-  const [state, setState] = useState<MetadataDef | null>(null);
+  const [state, setState] = useState<ChainInfo | null>(null);
 
   useEffect((): void => {
     isApiReady && setState({
       chain: systemChain,
+      color: getSystemChainColor(systemChain, systemName),
       genesisHash: api.genesisHash.toHex(),
       icon: getSystemIcon(systemName),
       metaCalls: Buffer.from(api.runtimeMetadata.asCallsOnly.toU8a()).toString('base64'),

From c957b1291af904086c76db68dfacd9ea3ae64cdd Mon Sep 17 00:00:00 2001
From: Hanwen Cheng <heawen.cheng@gmail.com>
Date: Thu, 26 Mar 2020 21:16:25 +0100
Subject: [PATCH 12/13] Update packages/page-settings/src/Metadata/index.tsx

Co-Authored-By: Jaco Greeff <jacogr@gmail.com>
---
 packages/page-settings/src/Metadata/index.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/page-settings/src/Metadata/index.tsx b/packages/page-settings/src/Metadata/index.tsx
index 25e6d54fa494..3097fe487ae8 100644
--- a/packages/page-settings/src/Metadata/index.tsx
+++ b/packages/page-settings/src/Metadata/index.tsx
@@ -1,3 +1,7 @@
+// Copyright 2017-2020 @polkadot/app-settings authors & contributors
+// This software may be modified and distributed under the terms
+// of the Apache-2.0 license. See the LICENSE file for details.
+
 import { useTranslation } from '@polkadot/app-settings/translate';
 import useCounter from '@polkadot/app-settings/useCounter';
 import React, { useMemo } from 'react';

From d0c6eb6cbb09273d823ffa5240fea3ea4829b281 Mon Sep 17 00:00:00 2001
From: Hanwen Cheng <heawen.cheng@gmail.com>
Date: Thu, 26 Mar 2020 21:21:38 +0100
Subject: [PATCH 13/13] reformat

---
 .../src/Metadata/NetworkSpecs.tsx             | 118 +++++++++---------
 1 file changed, 59 insertions(+), 59 deletions(-)

diff --git a/packages/page-settings/src/Metadata/NetworkSpecs.tsx b/packages/page-settings/src/Metadata/NetworkSpecs.tsx
index a263122a8ef2..6deddf06f084 100644
--- a/packages/page-settings/src/Metadata/NetworkSpecs.tsx
+++ b/packages/page-settings/src/Metadata/NetworkSpecs.tsx
@@ -70,65 +70,65 @@ function NetworkSpecs ({ className }: BareProps): React.ReactElement<BareProps>
   const _onSetRandomColor = (): void => setNetworkSpecs({ color: getRandomColor() });
   const _checkColorValid = (): boolean => /^#[\da-fA-F]{6}|#[\da-fA-F]{3}$/.test(networkSpecs.color);
 
-  return <div
-    className={className}
-  >
-    <Input
-      autoFocus
-      className='full'
-      help={t('Name of the network. It only for display purpose.')}
-      label={t('Network Name')}
-      onChange={_onChangeValue('title')}
-      value={networkSpecs.title}
-    />
-    <Input
-      className='full'
-      help={t('The color used to distinguish this network with others, use color code with 3 or 6 digits, like "#FFF" or "#111111"')}
-      isError={!_checkColorValid()}
-      label={t('Color')}
-      onChange={_onChangeValue('color')}
-      value={networkSpecs.color}
-    >
-      <div className='settings--networkSpecs-colorButton'>
-        <Button
-          label={t('Generate Random Color')}
-          icon='sync'
-          key='spread'
-          onClick={_onSetRandomColor}
-        />
-        <ChainColorIndicator color={networkSpecs.color}/>
-      </div>
-    </Input>
-    <Input
-      className='full'
-      help={t('Genesis Hash refers to initial state of the chain, it cannot be changed once the chain is launched')}
-      isDisabled
-      label={t('Genesis Hash')}
-      value={networkSpecs.genesisHash}
-    />
-    <Input
-      className='full'
-      help={t('Unit decides the name of 1 unit token, e.g. "DOT" for Polkadot')}
-      isDisabled
-      label={t('Unit')}
-      value={networkSpecs.unit}
-    />
-    <Input
-      className='full'
-      help={t('Prefix indicates the his network, is a number between 0 ~ 255 describes the precise format of the bytes of the address')}
-      isDisabled
-      label={t('Address Prefix')}
-      value={networkSpecs.prefix}
-    />
-    <Input
-      className='full'
-      help={t('Decimals decides the smallest unit of the token, which is 1/10^decimals')}
-      isDisabled
-      label={t('Decimals')}
-      value={networkSpecs.decimals}
-    />
-    <QrNetworkSpecs className='settings--networkSpecs-qr' networkSpecs={debouncedQrData}/>
-  </div>;
+  return (
+    <div className={className}>
+      <Input
+        autoFocus
+        className='full'
+        help={t('Name of the network. It only for display purpose.')}
+        label={t('Network Name')}
+        onChange={_onChangeValue('title')}
+        value={networkSpecs.title}
+      />
+      <Input
+        className='full'
+        help={t('The color used to distinguish this network with others, use color code with 3 or 6 digits, like "#FFF" or "#111111"')}
+        isError={!_checkColorValid()}
+        label={t('Color')}
+        onChange={_onChangeValue('color')}
+        value={networkSpecs.color}
+      >
+        <div className='settings--networkSpecs-colorButton'>
+          <Button
+            label={t('Generate Random Color')}
+            icon='sync'
+            key='spread'
+            onClick={_onSetRandomColor}
+          />
+          <ChainColorIndicator color={networkSpecs.color}/>
+        </div>
+      </Input>
+      <Input
+        className='full'
+        help={t('Genesis Hash refers to initial state of the chain, it cannot be changed once the chain is launched')}
+        isDisabled
+        label={t('Genesis Hash')}
+        value={networkSpecs.genesisHash}
+      />
+      <Input
+        className='full'
+        help={t('Unit decides the name of 1 unit token, e.g. "DOT" for Polkadot')}
+        isDisabled
+        label={t('Unit')}
+        value={networkSpecs.unit}
+      />
+      <Input
+        className='full'
+        help={t('Prefix indicates the his network, is a number between 0 ~ 255 describes the precise format of the bytes of the address')}
+        isDisabled
+        label={t('Address Prefix')}
+        value={networkSpecs.prefix}
+      />
+      <Input
+        className='full'
+        help={t('Decimals decides the smallest unit of the token, which is 1/10^decimals')}
+        isDisabled
+        label={t('Decimals')}
+        value={networkSpecs.decimals}
+      />
+      <QrNetworkSpecs className='settings--networkSpecs-qr' networkSpecs={debouncedQrData}/>
+    </div>
+  );
 }
 
 export default React.memo(styled(NetworkSpecs)`