diff --git a/.ckb-version b/.ckb-version
index 5affb131c0..420000f959 100644
--- a/.ckb-version
+++ b/.ckb-version
@@ -1 +1 @@
-v0.31.1
+v0.32.0
diff --git a/.gitignore b/.gitignore
index 6707801586..4cf618898a 100755
--- a/.gitignore
+++ b/.gitignore
@@ -8,7 +8,6 @@ node_modules
 # testing
 /coverage
 *.snap
-/packages/neuron-wallet/tests-e2e/errors
 
 # production
 build
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7115913602..516c0f37ce 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,29 @@
+# 0.31.0-rc1 (2020-05-29)
+
+### Bundled CKB node
+
+[CKB v0.32.0](https://github.com/nervosnetwork/ckb/releases/tag/v0.32.0) was released on May 22nd, 2020. This version of CKB node is now bundled and preconfigured in Neuron. 
+
+### New features
+
+We added several new features with this version:
+
+* New style of logo.
+* Enable exporting transaction history.
+* Make the `Settings` window to be independent with new style.
+* Add Language Switching function in `Settings` - `General` page.
+* Export more bundled CKB logs for debug info.
+* Include the bundled CKB version on the `About Neuron` window.
+* Replace the `Expected speed` drop-down box with `Quick Pick Price` in `Advanced fee settings`.
+
+### User Experience
+
+We also make some improvements for better user expeierence:
+
+* Optimize the `Copy` component, also remove unnecessary normal context menu (right-click menu).
+* Display password error in password dialog.
+
+
 # 0.30.0 (2020-05-15)
 
 ### Bundled CKB node
diff --git a/azure-pipelines.yml b/azure-pipelines.yml
index b0068392d9..9f6f955304 100644
--- a/azure-pipelines.yml
+++ b/azure-pipelines.yml
@@ -4,7 +4,6 @@ trigger:
     include:
       - master
       - develop
-      - e2e-tests
       - rc/*
   tags:
     include:
@@ -90,27 +89,6 @@ stages:
         yarn test
       name: Test
 
-- stage: e2e_tests
-  displayName: Integration Tests
-  dependsOn: []
-  condition: false # eq(variables['build.sourceBranch'], 'refs/heads/master')
-  jobs:
-  - job: Integration
-    displayName: Integration Tests
-    pool:
-      vmImage: 'macos-10.14'
-    steps:
-    - task: NodeTool@0
-      inputs:
-        versionSpec: 12.x
-      displayName: 'Install Node.js'
-    - script: |
-        yarn global add lerna
-        yarn bootstrap
-      name: Bootstrap
-    - script: yarn test:e2e
-      name: Test
-
 - stage: release
   displayName: Release Binaries
   condition: eq(variables['build.sourceBranch'], 'refs/heads/master')
diff --git a/lerna.json b/lerna.json
index a5da955a23..8e80e9f6bf 100644
--- a/lerna.json
+++ b/lerna.json
@@ -2,7 +2,7 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.30.0",
+  "version": "0.31.0-rc1",
   "npmClient": "yarn",
   "useWorkspaces": true
 }
diff --git a/package.json b/package.json
index a68f4d29ad..126a4ab3b2 100644
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
   "name": "neuron",
   "productName": "Neuron",
   "description": "CKB Neuron Wallet",
-  "version": "0.30.0",
+  "version": "0.31.0-rc1",
   "private": true,
   "author": {
     "name": "Nervos Core Dev",
@@ -31,7 +31,6 @@
     "build": "lerna run --stream build",
     "release": "yarn build && ./scripts/copy-ui-files.sh && ./scripts/release.sh",
     "test": "lerna run --parallel test",
-    "test:e2e": "yarn build && ./scripts/copy-ui-files.sh && lerna run --parallel test:e2e",
     "lint": "lerna run --stream lint",
     "postinstall": "lerna run rebuild:nativemodules",
     "db:chain": "node ./node_modules/.bin/typeorm"
diff --git a/packages/neuron-ui/package.json b/packages/neuron-ui/package.json
index 7a1cd4c3ad..f727b2df4e 100644
--- a/packages/neuron-ui/package.json
+++ b/packages/neuron-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "neuron-ui",
-  "version": "0.30.0",
+  "version": "0.31.0-rc1",
   "private": true,
   "author": {
     "name": "Nervos Core Dev",
@@ -58,7 +58,6 @@
     "react-dom": "16.12.0",
     "react-i18next": "11.2.5",
     "react-router-dom": "5.1.2",
-    "react-scripts": "3.3.1",
     "styled-components": "5.0.0-beta.0"
   },
   "devDependencies": {
@@ -93,6 +92,7 @@
     "node-sass": "4.13.0",
     "prettier": "1.19.1",
     "react-app-rewired": "2.1.5",
+    "react-scripts": "3.4.1",
     "react-test-renderer": "16.12.0",
     "rimraf": "3.0.0",
     "storybook-react-router": "1.0.8"
diff --git a/packages/neuron-ui/public/favicon.ico b/packages/neuron-ui/public/favicon.ico
index 9bbd9ca99c..9b60cd0b22 100644
Binary files a/packages/neuron-ui/public/favicon.ico and b/packages/neuron-ui/public/favicon.ico differ
diff --git a/packages/neuron-ui/public/icon.png b/packages/neuron-ui/public/icon.png
index e132bc4987..389fe2538b 100644
Binary files a/packages/neuron-ui/public/icon.png and b/packages/neuron-ui/public/icon.png differ
diff --git a/packages/neuron-ui/src/components/Addresses/addresses.module.scss b/packages/neuron-ui/src/components/Addresses/addresses.module.scss
index 01cc5354e4..a19b6cb458 100644
--- a/packages/neuron-ui/src/components/Addresses/addresses.module.scss
+++ b/packages/neuron-ui/src/components/Addresses/addresses.module.scss
@@ -14,14 +14,14 @@ $change-color: #6666cc;
   border-collapse: collapse;
 
   tbody {
-    input+span {
+    input + span {
       display: none !important;
     }
 
     tr:hover {
       background-color: #f5f5f5;
 
-      input+span {
+      input + span {
         display: flex !important;
       }
     }
@@ -36,12 +36,10 @@ $change-color: #6666cc;
     border-bottom: 1px solid #b3b3b3;
   }
 
-
   th {
-    @include SemiBoldText;
+    @include semi-bold-text;
     font-size: 1rem;
     font-weight: 600;
-    letter-spacing: 0.6px;
     color: #000;
     padding: 18px 0;
 
@@ -52,7 +50,6 @@ $change-color: #6666cc;
 
   td {
     font-size: 0.875rem;
-    letter-spacing: 0.5px;
     color: #000;
     padding: 10px 0;
 
@@ -69,7 +66,6 @@ $change-color: #6666cc;
     }
   }
 
-
   .type {
     width: 100px;
     word-wrap: none;
@@ -84,6 +80,7 @@ $change-color: #6666cc;
   }
 
   .address {
+    line-height: 1.625rem;
     &:hover {
       div::after {
         display: block;
@@ -99,7 +96,7 @@ $change-color: #6666cc;
       .addressOverflow {
         word-break: break-all;
         text-align: right;
-        height: 1rem;
+        height: 1.625rem;
         overflow: hidden;
         text-align: right;
       }
@@ -109,22 +106,21 @@ $change-color: #6666cc;
       }
 
       @media screen and (max-width: 1365px) {
-
         .ellipsis {
           display: inline;
         }
       }
 
       @media screen and (max-width: 1680px) {
-        width: 30vw;
+        width: 20vw;
 
         &::after {
           position: absolute;
           top: 150%;
           left: 50%;
+          z-index: 1;
           content: attr(data-address);
           font-size: 0.875rem;
-          letter-spacing: 0.5px;
           color: #000;
           box-shadow: 1px 2px 6px 0 rgba(97, 97, 97, 0.5);
           background: #fff;
@@ -134,14 +130,9 @@ $change-color: #6666cc;
         }
       }
 
-      @media screen and (max-width: 1350px) {
-        width: 20vw;
-      }
-
       @media screen and (max-width: 1000px) {
         width: 15vw;
       }
-
     }
   }
 
@@ -167,13 +158,13 @@ $change-color: #6666cc;
   }
 
   .descriptionField {
-    @include descriptionField;
+    @include description-field;
 
     input {
       font-size: 0.875rem;
     }
 
-    &>div {
+    & > div {
       border: none;
     }
 
@@ -185,11 +176,16 @@ $change-color: #6666cc;
   }
 
   .balance {
+    div {
+      display: flex;
+      align-items: center;
+      height: 1.625rem;
+    }
     span {
       display: inline-block;
       min-width: 200px;
 
-      @media screen and (max-width:1160px) {
+      @media screen and (max-width: 1160px) {
         min-width: auto;
         width: 8vw;
       }
@@ -199,5 +195,4 @@ $change-color: #6666cc;
   .txCount {
     min-width: 100px;
   }
-
 }
diff --git a/packages/neuron-ui/src/components/Addresses/index.tsx b/packages/neuron-ui/src/components/Addresses/index.tsx
index 1e86dce40d..3df920d283 100644
--- a/packages/neuron-ui/src/components/Addresses/index.tsx
+++ b/packages/neuron-ui/src/components/Addresses/index.tsx
@@ -3,16 +3,21 @@ import { useHistory } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { Edit } from 'grommet-icons'
 import TextField from 'widgets/TextField'
+import CopyZone from 'widgets/CopyZone'
 
-import { useState as useGlobalState, useDispatch } from 'states/stateProvider'
+import { useState as useGlobalState, useDispatch } from 'states'
 import { openExternal, openContextMenu } from 'services/remote'
 
-import { useLocalDescription } from 'utils/hooks'
-import { localNumberFormatter, shannonToCKBFormatter } from 'utils/formatters'
-import { Routes } from 'utils/const'
-import { backToTop } from 'utils/animations'
-import getExplorerUrl from 'utils/getExplorerUrl'
-import isMainnetUtil from 'utils/isMainnet'
+import {
+  useLocalDescription,
+  backToTop,
+  RoutePath,
+  localNumberFormatter,
+  shannonToCKBFormatter,
+  getExplorerUrl,
+  isMainnet as isMainnetUtil,
+} from 'utils'
+
 import styles from './addresses.module.scss'
 
 const Addresses = () => {
@@ -54,7 +59,7 @@ const Addresses = () => {
           {
             label: t('addresses.request-payment'),
             click: () => {
-              history.push(`${Routes.Receive}/${item.address}`)
+              history.push(`${RoutePath.Receive}/${item.address}`)
             },
           },
           {
@@ -85,16 +90,20 @@ const Addresses = () => {
           {addresses.map(addr => {
             const isSelected = localDescription.key === addr.address
             const typeLabel = addr.type === 0 ? t('addresses.receiving-address') : t('addresses.change-address')
+            const balance = `${shannonToCKBFormatter(addr.balance)} CKB`
+
             return (
               <tr key={addr.address} onContextMenu={onContextMenu(addr)}>
                 <td className={styles.type} data-type={addr.type === 0 ? 'receiving' : 'change'} title={typeLabel}>
                   {typeLabel}
                 </td>
-                <td className={`${styles.address} monospacedFont`}>
+                <td className={styles.address}>
                   <div data-address={addr.address}>
-                    <span className={styles.addressOverflow}>{addr.address.slice(0, -6)}</span>
-                    <span className={styles.ellipsis}>...</span>
-                    <span>{addr.address.slice(-6)}</span>
+                    <CopyZone content={addr.address} name={t('addresses.copy-address')}>
+                      <span className={styles.addressOverflow}>{addr.address.slice(0, -6)}</span>
+                      <span className={styles.ellipsis}>...</span>
+                      <span>{addr.address.slice(-6)}</span>
+                    </CopyZone>
                   </div>
                 </td>
                 <td title={addr.description} className={styles.description}>
@@ -127,8 +136,10 @@ const Addresses = () => {
                     }
                   />
                 </td>
-                <td className={styles.balance} title={`${shannonToCKBFormatter(addr.balance)} CKB`}>
-                  <span className="textOverflow">{`${shannonToCKBFormatter(addr.balance)} CKB`}</span>
+                <td className={styles.balance} title={balance}>
+                  <CopyZone content={balance.slice(0, -4).replace(/,/g, '')}>
+                    <span className="textOverflow">{balance}</span>
+                  </CopyZone>
                 </td>
                 <td className={styles.txCount} title={localNumberFormatter(addr.txCount)}>
                   {localNumberFormatter(addr.txCount)}
diff --git a/packages/neuron-ui/src/components/BalanceSyncingIcon/balanceSyncIcon.module.scss b/packages/neuron-ui/src/components/BalanceSyncingIcon/balanceSyncIcon.module.scss
index 5d4fab27f7..a1563ce800 100644
--- a/packages/neuron-ui/src/components/BalanceSyncingIcon/balanceSyncIcon.module.scss
+++ b/packages/neuron-ui/src/components/BalanceSyncingIcon/balanceSyncIcon.module.scss
@@ -5,7 +5,6 @@ $arrow: 10px;
   position: relative;
   font-size: 0.75rem;
   color: var(--nervos-green);
-  user-select: none;
   border-radius: 2px;
   z-index: 1;
 
@@ -13,9 +12,10 @@ $arrow: 10px;
     width: 1rem;
     height: 0.75rem;
     pointer-events: none;
+    position: relative;
+    top: 1px;
   }
 
-
   &::after {
     display: none;
     content: attr(data-content);
@@ -47,7 +47,6 @@ $arrow: 10px;
   }
 
   &:hover {
-
     &::after,
     &::before {
       display: block;
diff --git a/packages/neuron-ui/src/components/BalanceSyncingIcon/index.tsx b/packages/neuron-ui/src/components/BalanceSyncingIcon/index.tsx
index 45b64a5aa6..be761394e2 100644
--- a/packages/neuron-ui/src/components/BalanceSyncingIcon/index.tsx
+++ b/packages/neuron-ui/src/components/BalanceSyncingIcon/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { ConnectionStatus, SyncStatus } from 'utils/const'
+import { ConnectionStatus, SyncStatus } from 'utils'
 import { ReactComponent as BalanceSyncing } from 'widgets/Icons/BalanceSyncing.svg'
 import { ReactComponent as BalanceSyncFailed } from 'widgets/Icons/BalanceSyncFailed.svg'
 import styles from './balanceSyncIcon.module.scss'
diff --git a/packages/neuron-ui/src/components/CompensationPeriodTooltip/index.tsx b/packages/neuron-ui/src/components/CompensationPeriodTooltip/index.tsx
index e98f561627..1ca7463ea8 100644
--- a/packages/neuron-ui/src/components/CompensationPeriodTooltip/index.tsx
+++ b/packages/neuron-ui/src/components/CompensationPeriodTooltip/index.tsx
@@ -1,11 +1,10 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import getCompensationPeriod from 'utils/getCompensationPeriod'
-import getCompensatedTime from 'utils/getCompensatedTime'
-import { WITHDRAW_EPOCHS, CompensationPeriod, IMMATURE_EPOCHS } from 'utils/const'
-import { uniformTimeFormatter } from 'utils/formatters'
+import { getCompensatedTime, getCompensationPeriod, CONSTANTS, CompensationPeriod, uniformTimeFormatter } from 'utils'
 import styles from './compensationPeriodTooltip.module.scss'
 
+const { WITHDRAW_EPOCHS, IMMATURE_EPOCHS } = CONSTANTS
+
 const HOUR = 3_600_000
 const HOURS_PER_EPOCH = 4 * HOUR
 const SECS_PER_DAY = 24 * HOUR
diff --git a/packages/neuron-ui/src/components/DepositDialog/depositDialog.module.scss b/packages/neuron-ui/src/components/DepositDialog/depositDialog.module.scss
index 38399b1454..1e4efded0d 100644
--- a/packages/neuron-ui/src/components/DepositDialog/depositDialog.module.scss
+++ b/packages/neuron-ui/src/components/DepositDialog/depositDialog.module.scss
@@ -1,7 +1,7 @@
-@import "../../styles/mixin.scss";
+@import '../../styles/mixin.scss';
 
 .dialog {
-  @include dialogContainer;
+  @include dialog-container;
   padding: 30px 50px;
 
   &::backdrop {
@@ -21,7 +21,7 @@
   line-height: 1.4;
   margin-bottom: 25px;
 
-  &>span:first-of-type {
+  & > span:first-of-type {
     font-weight: 900;
 
     &:after {
@@ -32,7 +32,6 @@
   }
 }
 
-
 .errorMessage {
   display: flex;
   align-items: center;
@@ -70,7 +69,7 @@
 }
 
 .footer {
-  @include dialogFooter;
+  @include dialog-footer;
 
   button:last-of-type {
     margin-left: 9px;
diff --git a/packages/neuron-ui/src/components/DepositDialog/index.tsx b/packages/neuron-ui/src/components/DepositDialog/index.tsx
index 08f94e0869..5fa35265b2 100644
--- a/packages/neuron-ui/src/components/DepositDialog/index.tsx
+++ b/packages/neuron-ui/src/components/DepositDialog/index.tsx
@@ -6,11 +6,14 @@ import Spinner from 'widgets/Spinner'
 import Button from 'widgets/Button'
 import { ReactComponent as Attention } from 'widgets/Icons/Attention.svg'
 import { openExternal } from 'services/remote'
-import { SHANNON_CKB_RATIO, NERVOS_DAO_RFC_URL } from 'utils/const'
-import { localNumberFormatter, shannonToCKBFormatter } from 'utils/formatters'
-import { useDialog } from 'utils/hooks'
+import { CONSTANTS, localNumberFormatter, shannonToCKBFormatter, useDialog } from 'utils'
 import styles from './depositDialog.module.scss'
 
+const { SHANNON_CKB_RATIO } = CONSTANTS
+
+const NERVOS_DAO_RFC_URL =
+  'https://www.github.com/nervosnetwork/rfcs/blob/master/rfcs/0023-dao-deposit-withdraw/0023-dao-deposit-withdraw.md'
+
 interface DepositDialogProps {
   show: boolean
   value: any
diff --git a/packages/neuron-ui/src/components/GeneralSetting/index.tsx b/packages/neuron-ui/src/components/GeneralSetting/index.tsx
index 6580ee9354..2ed2c78ad7 100644
--- a/packages/neuron-ui/src/components/GeneralSetting/index.tsx
+++ b/packages/neuron-ui/src/components/GeneralSetting/index.tsx
@@ -1,22 +1,25 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useState, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Stack, Text, ProgressIndicator } from 'office-ui-fabric-react'
+import { ProgressIndicator } from 'office-ui-fabric-react'
 import Button from 'widgets/Button'
 import Spinner from 'widgets/Spinner'
-import { StateDispatch } from 'states/stateProvider/reducer'
-import { addPopup } from 'states/stateProvider/actionCreators'
-import { checkForUpdates, downloadUpdate, installUpdate, clearCellCache } from 'services/remote'
+import Dropdown from 'widgets/Dropdown'
+import { ReactComponent as Attention } from 'widgets/Icons/Attention.svg'
+import { StateDispatch, addPopup } from 'states'
+import { checkForUpdates, downloadUpdate, installUpdate, clearCellCache, setLocale, getVersion } from 'services/remote'
+import { cacheClearDate } from 'services/localCache'
+import { CONSTANTS } from 'utils'
+
 import styles from './style.module.scss'
 
-const UpdateDownloadStatus = ({
-  progress = 0,
-  newVersion = '',
-  releaseNotes = '',
-}: {
+const { LOCALES } = CONSTANTS
+interface UpdateDowloadStatusProps {
   progress: number
   newVersion: string
   releaseNotes: string
-}) => {
+}
+
+const UpdateDownloadStatus = ({ progress = 0, newVersion = '', releaseNotes = '' }: UpdateDowloadStatusProps) => {
   const [t] = useTranslation()
   const available = newVersion !== '' && progress < 0
   const downloaded = progress >= 1
@@ -33,24 +36,15 @@ const UpdateDownloadStatus = ({
     /* eslint-disable react/no-danger */
 
     return (
-      <Stack>
-        <Text as="p" variant="medium">
-          {t('updates.updates-found-do-you-want-to-update', { version: newVersion })}
-        </Text>
-        <h3>{t('updates.release-notes')}</h3>
+      <div className={styles.install}>
+        <div>{t('updates.updates-found-do-you-want-to-update', { version: newVersion })}</div>
+        <div>
+          <Button type="primary" onClick={download} disabled={!available} label={t('updates.download-update')} />
+        </div>
         <div className={styles.releaseNotesStyle}>
           <div dangerouslySetInnerHTML={releaseNotesHtml()} />
         </div>
-        <Stack horizontal horizontalAlign="start">
-          <Button
-            type="primary"
-            onClick={download}
-            disabled={!available}
-            label={t('updates.download-update')}
-            style={{ minWidth: '180px' }}
-          />
-        </Stack>
-      </Stack>
+      </div>
     )
   }
 
@@ -60,35 +54,33 @@ const UpdateDownloadStatus = ({
     }
 
     return (
-      <Stack>
-        <Text as="p" variant="medium">
-          {t('updates.updates-downloaded-about-to-quit-and-install')}
-        </Text>
-        <Stack horizontal horizontalAlign="start">
+      <div className={styles.install}>
+        <div>{t('updates.updates-downloaded-about-to-quit-and-install')}</div>
+        <div>
           <Button
             type="primary"
             onClick={quitAndInstall}
             disabled={!downloaded}
-            style={{ minWidth: '180px' }}
             label={t('updates.quit-and-install')}
           />
-        </Stack>
-      </Stack>
+        </div>
+      </div>
     )
   }
 
-  return (
-    <ProgressIndicator
-      percentComplete={progress}
-      label={t('updates.downloading-update')}
-      styles={{ root: { width: '250px' } }}
-    />
-  )
+  return <ProgressIndicator percentComplete={progress} label={t('updates.downloading-update')} />
 }
 
-const GeneralSetting = ({ updater, dispatch }: { updater: State.AppUpdater; dispatch: StateDispatch }) => {
-  const [t] = useTranslation()
+interface GeneralSettingProps {
+  updater: State.AppUpdater
+  dispatch: StateDispatch
+}
+
+const GeneralSetting = ({ updater, dispatch }: GeneralSettingProps) => {
+  const [t, i18n] = useTranslation()
   const [clearingCache, setClearingCache] = useState(false)
+  const [lng, setLng] = useState(i18n.language)
+  const [clearedDate, setClearedDate] = useState(cacheClearDate.load())
 
   const checkUpdates = useCallback(() => {
     checkForUpdates()
@@ -99,22 +91,31 @@ const GeneralSetting = ({ updater, dispatch }: { updater: State.AppUpdater; disp
     setTimeout(() => {
       clearCellCache().finally(() => {
         addPopup('clear-cache-successfully')(dispatch)
+        const date = new Date().toISOString().slice(0, 10)
+        cacheClearDate.save(date)
+        setClearedDate(date)
         setClearingCache(false)
       })
     }, 100)
-  }, [dispatch])
+  }, [dispatch, setClearedDate])
+
+  const onApplyLanguage = useCallback(() => {
+    setLocale(lng as typeof LOCALES[number])
+  }, [lng])
+
+  const version = useMemo(() => {
+    return getVersion()
+  }, [])
+
+  const showNewVersion = updater.version !== '' || updater.downloadProgress >= 0
 
   return (
-    <Stack tokens={{ childrenGap: 25 }} className={styles.container}>
-      <Stack>
-        <Stack horizontal horizontalAlign="start">
-          {updater.version !== '' || updater.downloadProgress >= 0 ? (
-            <UpdateDownloadStatus
-              progress={updater.downloadProgress}
-              newVersion={updater.version}
-              releaseNotes={updater.releaseNotes}
-            />
-          ) : (
+    <div className={styles.container}>
+      <div className={`${styles.version} ${styles.label}`}>{t('settings.general.version')}</div>
+      {showNewVersion ? null : (
+        <>
+          <div className={`${styles.version} ${styles.value}`}>{version}</div>
+          <div className={`${styles.version} ${styles.action}`}>
             <Button
               label={t(`updates.${updater.checking ? 'checking-updates' : 'check-updates'}`)}
               type="default"
@@ -131,34 +132,62 @@ const GeneralSetting = ({ updater, dispatch }: { updater: State.AppUpdater; disp
                 (t('updates.check-updates') as string)
               )}
             </Button>
-          )}
-        </Stack>
-      </Stack>
+          </div>
+        </>
+      )}
+      <div className={styles.newVersion}>
+        {showNewVersion ? (
+          <UpdateDownloadStatus
+            progress={updater.downloadProgress}
+            newVersion={updater.version}
+            releaseNotes={updater.releaseNotes}
+          />
+        ) : null}
+      </div>
 
-      <Stack>
-        <Text as="p" variant="medium">
+      <div className={`${styles.clearCache} ${styles.detail}`}>
+        {clearedDate ? (
+          <div className={styles.date}>{t('settings.general.cache-cleared-on', { date: clearedDate })}</div>
+        ) : null}
+        <div className={styles.desc}>
+          <Attention />
           {t('settings.general.clear-cache-description')}
-        </Text>
-        <Stack horizontal horizontalAlign="start">
-          <Button
-            type="default"
-            label={t(`settings.general.${clearingCache ? 'clearing-cache' : 'clear-cache'}`)}
-            onClick={clearCache}
-            disabled={clearingCache}
-          >
-            {clearingCache ? (
-              <Spinner
-                styles={{ root: { marginRight: 5 } }}
-                label={t('settings.general.clearing-cache')}
-                labelPosition="right"
-              />
-            ) : (
-              (t('settings.general.clear-cache') as string)
-            )}
-          </Button>
-        </Stack>
-      </Stack>
-    </Stack>
+        </div>
+      </div>
+      <div className={`${styles.clearCache} ${styles.action}`}>
+        <Button
+          type="default"
+          label={t(`settings.general.${clearingCache ? 'clearing-cache' : 'clear-cache'}`)}
+          onClick={clearCache}
+          disabled={clearingCache}
+        >
+          {clearingCache ? (
+            <Spinner
+              styles={{ root: { marginRight: 5 } }}
+              label={t('settings.general.clearing-cache')}
+              labelPosition="right"
+            />
+          ) : (
+            (t('settings.general.clear-cache') as string)
+          )}
+        </Button>
+      </div>
+      <div className={`${styles.language} ${styles.label}`}>{t('settings.general.language')}</div>
+      <div className={`${styles.language} ${styles.select}`}>
+        <Dropdown
+          options={LOCALES.map(locale => ({ key: locale, text: t(`settings.locale.${locale}`) }))}
+          selectedKey={lng}
+          onChange={(_, item) => {
+            if (item) {
+              setLng(item.key as typeof LOCALES[number])
+            }
+          }}
+        />
+      </div>
+      <div className={`${styles.language} ${styles.action}`}>
+        <Button label={t('settings.general.apply')} onClick={onApplyLanguage} disabled={lng === i18n.language} />
+      </div>
+    </div>
   )
 }
 
diff --git a/packages/neuron-ui/src/components/GeneralSetting/style.module.scss b/packages/neuron-ui/src/components/GeneralSetting/style.module.scss
index 328cb7b86d..9008153480 100644
--- a/packages/neuron-ui/src/components/GeneralSetting/style.module.scss
+++ b/packages/neuron-ui/src/components/GeneralSetting/style.module.scss
@@ -1,27 +1,124 @@
+@import '../../styles/mixin.scss';
+
+$action-button-width: 11.25rem;
 .container {
+  font-size: 0.875rem;
+  margin-top: 1.25rem;
   button {
-    width: 9.375rem;
+    min-width: auto;
+    width: $action-button-width;
+    box-sizing: border-box;
+    height: 1.625rem;
+    padding: 0;
+  }
+
+  display: grid;
+  grid-template:
+    'version-label version-value version-action' auto
+    'language-label language-select language-action' auto
+    'clear-cache-detail clear-cache-detail clear-cache-action' auto/
+    120px 1fr $action-button-width;
+  grid-gap: 30px 10px;
+}
+.label {
+  @include regular-text;
+  font-weight: 600;
+  align-self: center;
+  &:after {
+    content: ':';
   }
 }
 
-.releaseNotesStyle {
-  overflow: scroll;
-  height: 200px;
-  margin-bottom: 20px;
-  padding: 10px 15px 15px 15px;
-  border: solid 1px #ccc;
+.version {
+  &.label {
+    grid-area: version-label;
+  }
+
+  &.value {
+    align-self: center;
+    grid-area: version-value;
+  }
+
+  &.action {
+    grid-area: version-action;
+  }
+}
 
-  ul {
-    list-style-type: disc;
-    padding-left: 30px;
+.newVersion {
+  grid-area: 1/2/2/4;
+}
 
-    li {
-      margin: 5px 0;
+.language {
+  &.label {
+    grid-area: language-label;
+  }
+  &.select {
+    grid-area: language-select;
+    max-width: 300px;
+    & > div {
+      margin: 0;
     }
   }
 
-  a {
-    text-decoration: none;
-    pointer-events: none;
+  &.action {
+    grid-area: language-action;
+  }
+}
+.clearCache {
+  &.detail {
+    grid-area: clear-cache-detail;
+    .date {
+      display: flex;
+      align-items: center;
+      font-size: 0.875rem;
+      height: 1.125rem;
+      margin-bottom: 5px;
+    }
+    .desc {
+      display: flex;
+      font-size: 0.6875rem;
+      color: #666;
+    }
+    svg {
+      height: 0.6875rem;
+      width: 0.6875rem;
+      filter: grayscale(1) opacity(0.6);
+      margin: 2px 5px 0 0;
+    }
+  }
+  &.action {
+    grid-area: clear-cache-action;
+  }
+}
+
+.install {
+  display: grid;
+  grid-template:
+    'note action' auto
+    'release-note release-note'/
+    1fr $action-button-width;
+
+  .releaseNotesStyle {
+    grid-area: release-note;
+    overflow: scroll;
+    min-height: 200px;
+    height: calc(100vh - 400px);
+    margin: 6px auto 20px;
+    padding: 10px 15px 15px 15px;
+    border: solid 1px #ccc;
+
+    ul {
+      list-style-type: disc;
+      padding-left: 30px;
+
+      li {
+        margin: 5px 0;
+      }
+    }
+
+    a {
+      text-decoration: none;
+      pointer-events: none;
+    }
   }
 }
diff --git a/packages/neuron-ui/src/components/History/history.module.scss b/packages/neuron-ui/src/components/History/history.module.scss
index 448f1d986a..27e649dedb 100644
--- a/packages/neuron-ui/src/components/History/history.module.scss
+++ b/packages/neuron-ui/src/components/History/history.module.scss
@@ -1,8 +1,53 @@
 @import '../../styles/mixin.scss';
 
 .history {
-  // need more discussion
-  // min-height: calc(100vh - 100px);
+  .tools {
+    display: grid;
+    grid-template:
+      'search-input search-button export-button' auto/
+      1fr auto auto;
+    margin-bottom: 15px;
+    .searchBox {
+      grid-area: search-input;
+      button:hover {
+        background: rgb(220, 220, 220);
+      }
+    }
+
+    .searchBtn,
+    .exportBtn {
+      height: 1.625rem;
+      min-width: unset;
+      padding: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 2px;
+    }
+
+    .searchBtn {
+      grid-area: search-button;
+      padding: 0 15px;
+      border-top-left-radius: 0;
+      border-bottom-left-radius: 0;
+      background-color: rgb(204, 204, 204);
+      color: rgb(97, 97, 97);
+      border: none;
+    }
+
+    .exportBtn {
+      grid-area: export-button;
+      width: 1.625rem;
+      margin-left: 10px;
+      svg {
+        width: 16px;
+        height: 16px;
+        path {
+          fill: #fff;
+        }
+      }
+    }
+  }
 
   .listContainer {
     background-color: #fff;
@@ -14,11 +59,11 @@
     display: flex;
     flex: 1;
     flex-direction: column;
-    justify-content: flex-end
+    justify-content: flex-end;
   }
 }
 
 .noTxs {
-  @include MediumText;
+  @include medium-text;
   padding: 20px 13px;
 }
diff --git a/packages/neuron-ui/src/components/History/hooks.ts b/packages/neuron-ui/src/components/History/hooks.ts
index 2c0012cb03..3e4e9c58f1 100644
--- a/packages/neuron-ui/src/components/History/hooks.ts
+++ b/packages/neuron-ui/src/components/History/hooks.ts
@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react'
 import { updateTransactionList } from 'states/stateProvider/actionCreators/transactions'
-import { queryParsers } from 'utils/parsers'
-import { backToTop } from 'utils/animations'
+import { queryParsers, backToTop } from 'utils'
 
 export const useSearch = (search: string = '', walletID: string = '', dispatch: React.Dispatch<any>) => {
   const [keywords, setKeywords] = useState('')
diff --git a/packages/neuron-ui/src/components/History/index.tsx b/packages/neuron-ui/src/components/History/index.tsx
index 86578915da..a4d3f856a6 100644
--- a/packages/neuron-ui/src/components/History/index.tsx
+++ b/packages/neuron-ui/src/components/History/index.tsx
@@ -1,14 +1,16 @@
-import React, { useCallback, useMemo } from 'react'
+import React, { useState, useCallback, useMemo } from 'react'
 import { useHistory, useLocation } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { Stack, SearchBox } from 'office-ui-fabric-react'
 import { Pagination } from '@uifabric/experiments'
 
 import TransactionList from 'components/TransactionList'
-import { useState as useGlobalState, useDispatch } from 'states/stateProvider'
+import { useState as useGlobalState, useDispatch } from 'states'
+import Button from 'widgets/Button'
+import { exportTransactions } from 'services/remote'
+import { ReactComponent as Export } from 'widgets/Icons/ExportHistory.svg'
 
-import { Routes } from 'utils/const'
-import isMainnetUtil from 'utils/isMainnet'
+import { RoutePath, isMainnet as isMainnetUtil } from 'utils'
 
 import { useSearch } from './hooks'
 import styles from './history.module.scss'
@@ -31,10 +33,21 @@ const History = () => {
   const [t] = useTranslation()
   const history = useHistory()
   const { search } = useLocation()
+  const [isExporting, setIsExporting] = useState(false)
   const isMainnet = isMainnetUtil(networks, networkID)
 
   const { keywords, onKeywordsChange } = useSearch(search, id, dispatch)
-  const onSearch = useCallback(() => history.push(`${Routes.History}?keywords=${keywords}`), [history, keywords])
+  const onSearch = useCallback(() => history.push(`${RoutePath.History}?keywords=${keywords}`), [history, keywords])
+  const onExport = useCallback(() => {
+    setIsExporting(true)
+    const timer = setTimeout(() => {
+      setIsExporting(false)
+    }, 3000)
+    exportTransactions({ walletID: id }).finally(() => {
+      clearTimeout(timer)
+      setIsExporting(false)
+    })
+  }, [id, setIsExporting])
 
   const tipBlockNumber = useMemo(() => {
     return Math.max(+syncedBlockNumber, +chainBlockNumber).toString()
@@ -43,21 +56,36 @@ const History = () => {
   const List = useMemo(() => {
     return (
       <Stack className={styles.history}>
-        <SearchBox
-          value={keywords}
-          styles={{
-            root: {
-              background: '#e3e3e3',
-              border: 'none',
-              borderRadius: 0,
-              fontSize: '1rem',
-            },
-          }}
-          placeholder={t('history.search.placeholder')}
-          onChange={onKeywordsChange}
-          onSearch={onSearch}
-          iconProps={{ iconName: 'Search', styles: { root: { height: '18px' } } }}
-        />
+        <div className={styles.tools}>
+          <SearchBox
+            value={keywords}
+            className={styles.searchBox}
+            styles={{
+              root: {
+                background: '#e3e3e3',
+                borderRadius: 0,
+                fontSize: '1rem',
+                border: '1px solid rgb(204, 204, 204)',
+                borderTopLeftRadius: 2,
+                borderBottomLeftRadius: 2,
+              },
+            }}
+            placeholder={t('history.search.placeholder')}
+            onChange={onKeywordsChange}
+            onSearch={onSearch}
+            iconProps={{ iconName: 'Search', styles: { root: { height: '18px' } } }}
+          />
+          <Button className={styles.searchBtn} type="default" label={t('history.search.button')} onClick={onSearch} />
+          <Button
+            className={styles.exportBtn}
+            type="primary"
+            disabled={isExporting}
+            onClick={onExport}
+            label={t('history.export-history')}
+          >
+            <Export />
+          </Button>
+        </div>
         <div className={styles.listContainer}>
           {totalCount ? (
             <TransactionList
@@ -90,7 +118,7 @@ const History = () => {
               lastPageIconProps={{ iconName: 'LastPage' }}
               format="buttons"
               onPageChange={(idx: number) => {
-                history.push(`${Routes.History}?pageNo=${idx + 1}&keywords=${keywords}`)
+                history.push(`${RoutePath.History}?pageNo=${idx + 1}&keywords=${keywords}`)
               }}
             />
           ) : null}
@@ -112,6 +140,8 @@ const History = () => {
     history,
     isMainnet,
     t,
+    isExporting,
+    onExport,
   ])
 
   return List
diff --git a/packages/neuron-ui/src/components/ImportKeystore/importKeystore.module.scss b/packages/neuron-ui/src/components/ImportKeystore/importKeystore.module.scss
index c1b6762a90..7180840cf1 100644
--- a/packages/neuron-ui/src/components/ImportKeystore/importKeystore.module.scss
+++ b/packages/neuron-ui/src/components/ImportKeystore/importKeystore.module.scss
@@ -13,5 +13,5 @@
 }
 
 .actions {
-  @include formFooter;
+  @include form-footer;
 }
diff --git a/packages/neuron-ui/src/components/ImportKeystore/index.tsx b/packages/neuron-ui/src/components/ImportKeystore/index.tsx
index af8e030564..1fc341cbe5 100644
--- a/packages/neuron-ui/src/components/ImportKeystore/index.tsx
+++ b/packages/neuron-ui/src/components/ImportKeystore/index.tsx
@@ -3,21 +3,22 @@ import { useHistory } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import i18n from 'i18next'
 import { importKeystore, showOpenDialogModal, showErrorMessage } from 'services/remote'
-import { useState as useGlobalState } from 'states/stateProvider'
-import { useGoBack } from 'utils/hooks'
-import generateWalletName from 'utils/generateWalletName'
+import { useState as useGlobalState } from 'states'
 import TextField from 'widgets/TextField'
 import Button from 'widgets/Button'
 import Spinner from 'widgets/Spinner'
-import { Routes, ErrorCode, MAX_WALLET_NAME_LENGTH, MAX_PASSWORD_LENGTH } from 'utils/const'
+import { generateWalletName, RoutePath, ErrorCode, CONSTANTS, useGoBack, isSuccessResponse } from 'utils'
+
 import styles from './importKeystore.module.scss'
 
+const { MAX_WALLET_NAME_LENGTH, MAX_PASSWORD_LENGTH } = CONSTANTS
+
 export const importWalletWithKeystore = (params: Controller.ImportKeystoreParams) => (
   history: ReturnType<typeof useHistory>
 ) => {
   return importKeystore(params).then(res => {
-    if (res.status === 1) {
-      history.push(Routes.Overview)
+    if (isSuccessResponse(res)) {
+      history.push(window.neuron.role === 'main' ? RoutePath.Overview : RoutePath.SettingsWallets)
     } else if (res.status > 0) {
       showErrorMessage(i18n.t(`messages.error`), i18n.t(`messages.codes.${res.status}`))
     } else if (res.message) {
diff --git a/packages/neuron-ui/src/components/LaunchScreen/index.tsx b/packages/neuron-ui/src/components/LaunchScreen/index.tsx
index 9b29df881c..106033107c 100644
--- a/packages/neuron-ui/src/components/LaunchScreen/index.tsx
+++ b/packages/neuron-ui/src/components/LaunchScreen/index.tsx
@@ -2,11 +2,10 @@ import React, { useEffect } from 'react'
 import { useHistory } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { Panel, PanelType, SpinnerSize } from 'office-ui-fabric-react'
-import { useState as useGlobalState } from 'states/stateProvider'
+import { useState as useGlobalState } from 'states'
+import { RoutePath } from 'utils'
 import Spinner from 'widgets/Spinner'
 
-import { Routes } from 'utils/const'
-
 export const LaunchScreen = () => {
   const {
     wallet: { id = '' },
@@ -16,7 +15,7 @@ export const LaunchScreen = () => {
 
   useEffect(() => {
     if (id) {
-      history.push(Routes.Overview)
+      history.push(RoutePath.Overview)
     }
   }, [id, history])
 
diff --git a/packages/neuron-ui/src/components/NervosDAO/hooks.ts b/packages/neuron-ui/src/components/NervosDAO/hooks.ts
index ffdbe55ab1..497f1bebc7 100644
--- a/packages/neuron-ui/src/components/NervosDAO/hooks.ts
+++ b/packages/neuron-ui/src/components/NervosDAO/hooks.ts
@@ -3,20 +3,16 @@ import { TFunction } from 'i18next'
 import { AppActions, StateAction } from 'states/stateProvider/reducer'
 import { updateNervosDaoData, clearNervosDaoData } from 'states/stateProvider/actionCreators'
 
-import { verifyAmount } from 'utils/validators'
-import calculateAPC from 'utils/calculateAPC'
-
-import { CKBToShannonFormatter, shannonToCKBFormatter } from 'utils/formatters'
 import {
-  MIN_AMOUNT,
-  MILLISECONDS_IN_YEAR,
-  MIN_DEPOSIT_AMOUNT,
-  MEDIUM_FEE_RATE,
-  SHANNON_CKB_RATIO,
-  MAX_DECIMAL_DIGITS,
+  calculateAPC,
   ErrorCode,
   CapacityUnit,
-} from 'utils/const'
+  CONSTANTS,
+  CKBToShannonFormatter,
+  shannonToCKBFormatter,
+  isSuccessResponse,
+  verifyAmount,
+} from 'utils'
 
 import {
   generateDaoWithdrawTx,
@@ -26,6 +22,14 @@ import {
 } from 'services/remote'
 import { ckbCore, getHeaderByNumber, calculateDaoMaximumWithdraw } from 'services/chain'
 
+const {
+  MIN_AMOUNT,
+  MILLISECONDS_IN_YEAR,
+  MIN_DEPOSIT_AMOUNT,
+  MEDIUM_FEE_RATE,
+  SHANNON_CKB_RATIO,
+  MAX_DECIMAL_DIGITS,
+} = CONSTANTS
 let timer: NodeJS.Timeout
 
 const getRecordKey = ({ depositOutPoint, outPoint }: State.NervosDAORecord) => {
@@ -49,7 +53,7 @@ export const useUpdateMaxDeposit = ({
       feeRate: `${MEDIUM_FEE_RATE}`,
     })
       .then(res => {
-        if (res.status === 1) {
+        if (isSuccessResponse(res)) {
           const fee = BigInt(res.result.fee)
           const maxValue = fee < BigInt(wallet.balance) ? BigInt(wallet.balance) - fee : BigInt(0)
           setMaxDepositAmount(maxValue)
@@ -160,7 +164,7 @@ export const useUpdateDepositValue = ({
             capacity,
             walletID,
           }).then(res => {
-            if (res.status === 1) {
+            if (isSuccessResponse(res)) {
               dispatch({
                 type: AppActions.UpdateGeneratedTx,
                 payload: res.result,
@@ -295,7 +299,7 @@ export const useOnWithdrawDialogSubmit = ({
         feeRate: `${MEDIUM_FEE_RATE}`,
       })
         .then(res => {
-          if (res.status === 1) {
+          if (isSuccessResponse(res)) {
             dispatch({
               type: AppActions.UpdateGeneratedTx,
               payload: res.result,
@@ -356,7 +360,7 @@ export const useOnActionClick = ({
             feeRate: `${MEDIUM_FEE_RATE}`,
           })
             .then(res => {
-              if (res.status === 1) {
+              if (isSuccessResponse(res)) {
                 dispatch({
                   type: AppActions.UpdateGeneratedTx,
                   payload: res.result,
diff --git a/packages/neuron-ui/src/components/NervosDAO/index.tsx b/packages/neuron-ui/src/components/NervosDAO/index.tsx
index df48845d8c..c95ef48e5b 100644
--- a/packages/neuron-ui/src/components/NervosDAO/index.tsx
+++ b/packages/neuron-ui/src/components/NervosDAO/index.tsx
@@ -1,25 +1,32 @@
 import React, { useEffect, useState, useMemo } from 'react'
 import { useTranslation } from 'react-i18next'
 
-import appState from 'states/initStates/app'
-import { useState as useGlobalState, useDispatch } from 'states/stateProvider'
+import appState from 'states/init/app'
+import { useState as useGlobalState, useDispatch } from 'states'
 
-import calculateFee from 'utils/calculateFee'
-import { shannonToCKBFormatter } from 'utils/formatters'
-import { MIN_DEPOSIT_AMOUNT, ConnectionStatus, SyncStatus } from 'utils/const'
-import { backToTop } from 'utils/animations'
-import getSyncStatus from 'utils/getSyncStatus'
-import getCurrentUrl from 'utils/getCurrentUrl'
+import {
+  CONSTANTS,
+  backToTop,
+  calculateFee,
+  ConnectionStatus,
+  SyncStatus,
+  shannonToCKBFormatter,
+  getCurrentUrl,
+  getSyncStatus,
+} from 'utils'
 
 import DepositDialog from 'components/DepositDialog'
 import WithdrawDialog from 'components/WithdrawDialog'
 import DAORecord from 'components/NervosDAORecord'
 import BalanceSyncIcon from 'components/BalanceSyncingIcon'
 import Button from 'widgets/Button'
+import CopyZone from 'widgets/CopyZone'
 
 import hooks from './hooks'
 import styles from './nervosDAO.module.scss'
 
+const { MIN_DEPOSIT_AMOUNT } = CONSTANTS
+
 const NervosDAO = () => {
   const [focusedRecord, setFocusedRecord] = useState('')
   const [tabIdx, setTabIdx] = useState('0')
@@ -256,14 +263,35 @@ const NervosDAO = () => {
 
   const onlineAndSynced = ConnectionStatus.Online === connectionStatus && SyncStatus.SyncCompleted === syncStatus
 
+  const freeBalance = shannonToCKBFormatter(`${free}`)
+  const lockedBalance = shannonToCKBFormatter(`${locked}`)
+
   const info = [
     {
       key: 'free',
-      value: `${shannonToCKBFormatter(`${free}`)} CKB`,
+      value: (
+        <CopyZone
+          content={freeBalance.replace(/,/g, '')}
+          name={t('nervos-dao.copy-balance')}
+          className={styles.balance}
+        >
+          {`${freeBalance} CKB`}
+        </CopyZone>
+      ),
     },
     {
       key: 'locked',
-      value: onlineAndSynced ? `${shannonToCKBFormatter(`${locked}`)} CKB` : `-- CKB`,
+      value: onlineAndSynced ? (
+        <CopyZone
+          content={lockedBalance.replace(/,/g, '')}
+          name={t('nervos-dao.copy-balance')}
+          className={styles.balance}
+        >
+          {`${lockedBalance} CKB`}
+        </CopyZone>
+      ) : (
+        `-- CKB`
+      ),
     },
     {
       key: 'apc',
@@ -279,13 +307,13 @@ const NervosDAO = () => {
         return (
           <div key={key} title={label} aria-label={label} className={styles[key]}>
             <span>{label}</span>
-            <span
+            <div
               style={{
                 color: onlineAndSynced ? '#000' : '#888',
               }}
             >
               {value}
-            </span>
+            </div>
           </div>
         )
       })}
diff --git a/packages/neuron-ui/src/components/NervosDAO/nervosDAO.module.scss b/packages/neuron-ui/src/components/NervosDAO/nervosDAO.module.scss
index 2ed93a63cf..3331250919 100644
--- a/packages/neuron-ui/src/components/NervosDAO/nervosDAO.module.scss
+++ b/packages/neuron-ui/src/components/NervosDAO/nervosDAO.module.scss
@@ -1,21 +1,20 @@
-@import "../../styles/mixin.scss";
+@import '../../styles/mixin.scss';
 $infoHeight: 1.75rem;
 
 .nervosDAOContainer {
   display: grid;
   grid-template:
-    'title title title'auto 'free network-alert deposit'auto 'locked . deposit'auto 'apc . .'auto 'records records records'auto/ minmax(350px, 500px) 35px 1fr;
+    'title title title' auto
+    'free network-alert deposit' auto
+    'locked . deposit' auto
+    'apc . .' auto
+    'records records records' auto/
+    minmax(350px, 500px) 35px 1fr;
 }
 
 .title {
+  @include page-title;
   grid-area: title;
-  font-size: 1.375rem;
-  font-weight: 900;
-  line-height: 1.75rem;
-  color: #000;
-  padding-top: 5px;
-  padding-bottom: 12px;
-  margin: 0;
 }
 
 .free {
@@ -45,19 +44,24 @@ $infoHeight: 1.75rem;
   height: $infoHeight;
   font-size: 0.875rem;
 
-  span:first-child {
+  & > span {
     font-weight: 600;
     padding-right: 15px;
+    white-space: nowrap;
 
     &:after {
       content: ':';
     }
   }
 
-  span:last-child {
-    text-overflow: ellipsis;
-    overflow: hidden;
+  & > div {
+    width: 70%;
     white-space: nowrap;
+    text-align: right;
+  }
+  .balance {
+    @include text-overflow-ellipsis;
+    padding: 0;
   }
 }
 
@@ -75,7 +79,7 @@ $infoHeight: 1.75rem;
     border: none;
 
     &[disabled] {
-      @include disabledBtn;
+      @include disabled-button;
     }
   }
 }
@@ -95,7 +99,7 @@ $infoHeight: 1.75rem;
     border-bottom: 1px solid #ccc;
 
     button {
-      @include BoldText;
+      @include bold-text;
       appearance: none;
       flex: 1;
       display: flex;
@@ -112,8 +116,6 @@ $infoHeight: 1.75rem;
         color: var(--nervos-green);
         opacity: 0.8;
       }
-
-
     }
 
     .underline {
@@ -136,7 +138,7 @@ $infoHeight: 1.75rem;
     }
   }
 
-  &>div {
+  & > div {
     margin: 10px auto;
   }
 
@@ -144,5 +146,4 @@ $infoHeight: 1.75rem;
     font-size: 0.875rem;
     font-weight: 600;
   }
-
 }
diff --git a/packages/neuron-ui/src/components/NervosDAORecord/daoRecordRow.module.scss b/packages/neuron-ui/src/components/NervosDAORecord/daoRecordRow.module.scss
index 2ad09b90d5..b66874ec8a 100644
--- a/packages/neuron-ui/src/components/NervosDAORecord/daoRecordRow.module.scss
+++ b/packages/neuron-ui/src/components/NervosDAORecord/daoRecordRow.module.scss
@@ -193,7 +193,7 @@
     .deposited,
     .withdrawn,
     .unlocked {
-      @include RegularText;
+      @include regular-text;
       position: relative;
       display: flex;
       justify-content: space-between;
@@ -225,7 +225,7 @@
       }
 
       &:last-of-type {
-        @include SemiBoldText;
+        @include semi-bold-text;
       }
     }
   }
diff --git a/packages/neuron-ui/src/components/NervosDAORecord/hooks.ts b/packages/neuron-ui/src/components/NervosDAORecord/hooks.ts
index 9b46c6c337..d57ef27cf0 100644
--- a/packages/neuron-ui/src/components/NervosDAORecord/hooks.ts
+++ b/packages/neuron-ui/src/components/NervosDAORecord/hooks.ts
@@ -1,8 +1,9 @@
 import { useEffect, useCallback } from 'react'
 import { showTransactionDetails } from 'services/remote'
 import { getHeaderByNumber } from 'services/chain'
-import { MILLISECONDS_IN_YEAR } from 'utils/const'
-import calculateAPC from 'utils/calculateAPC'
+import { calculateAPC, CONSTANTS } from 'utils'
+
+const { MILLISECONDS_IN_YEAR } = CONSTANTS
 
 export const useUpdateWithdrawEpochs = ({
   isWithdrawn,
diff --git a/packages/neuron-ui/src/components/NervosDAORecord/index.tsx b/packages/neuron-ui/src/components/NervosDAORecord/index.tsx
index dba903437f..6be26b774e 100644
--- a/packages/neuron-ui/src/components/NervosDAORecord/index.tsx
+++ b/packages/neuron-ui/src/components/NervosDAORecord/index.tsx
@@ -2,16 +2,24 @@ import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import CompensationProgressBar from 'components/CompensationProgressBar'
 import Button from 'widgets/Button'
-import { shannonToCKBFormatter, uniformTimeFormatter } from 'utils/formatters'
-import calculateClaimEpochValue from 'utils/calculateClaimEpochValue'
-import { epochParser } from 'utils/parsers'
-import getDAOCellStatus, { CellStatus } from 'utils/getDAOCellStatus'
-import { IMMATURE_EPOCHS, ConnectionStatus, HOURS_PER_EPOCH } from 'utils/const'
+import CopyZone from 'widgets/CopyZone'
+import {
+  calculateClaimEpochValue,
+  ConnectionStatus,
+  CONSTANTS,
+  shannonToCKBFormatter,
+  uniformTimeFormatter,
+  getDAOCellStatus,
+  CellStatus,
+  epochParser,
+} from 'utils'
 import CompensationPeriodTooltip from 'components/CompensationPeriodTooltip'
 
 import styles from './daoRecordRow.module.scss'
 import hooks from './hooks'
 
+const { IMMATURE_EPOCHS, HOURS_PER_EPOCH } = CONSTANTS
+
 const EPOCHS_PER_DAY = 6
 
 const getDaysAndHours = (seconds: number) => {
@@ -232,6 +240,8 @@ export const DAORecord = ({
     )
   }
 
+  const amount = shannonToCKBFormatter(capacity)
+
   return (
     <div className={styles.container} data-is-collapsed={isCollapsed}>
       <div className={styles.badge}>{badge}</div>
@@ -250,9 +260,7 @@ export const DAORecord = ({
         </span>
       </div>
 
-      <div className={styles.amount}>
-        <span>{`${shannonToCKBFormatter(capacity)} CKB`}</span>
-      </div>
+      <CopyZone className={styles.amount} content={amount.replace(/,/g, '')}>{`${amount} CKB`}</CopyZone>
       {progressOrPeriod}
 
       <div className={styles.apc}>
diff --git a/packages/neuron-ui/src/components/NetworkEditor/hooks.ts b/packages/neuron-ui/src/components/NetworkEditor/hooks.ts
index 4998d3b277..e5b99417e3 100644
--- a/packages/neuron-ui/src/components/NetworkEditor/hooks.ts
+++ b/packages/neuron-ui/src/components/NetworkEditor/hooks.ts
@@ -1,20 +1,30 @@
 import { useCallback } from 'react'
 import { useHistory } from 'react-router-dom'
 
-import { StateDispatch } from 'states/stateProvider/reducer'
-import { createNetwork, updateNetwork, addNotification } from 'states/stateProvider/actionCreators'
+import { StateDispatch, createNetwork, updateNetwork, addNotification } from 'states'
+import { ErrorCode, CONSTANTS } from 'utils'
 
-import { MAX_NETWORK_NAME_LENGTH, ErrorCode } from 'utils/const'
+const { MAX_NETWORK_NAME_LENGTH } = CONSTANTS
 
-export const useOnSubmit = (
-  id: string = '',
-  name: string = '',
-  remote: string = '',
-  networks: Readonly<State.Network[]> = [],
-  history: ReturnType<typeof useHistory>,
-  dispatch: StateDispatch,
+export const useOnSubmit = ({
+  id = '',
+  name = '',
+  remote = '',
+  networks = [],
+  history,
+  dispatch,
+  disabled,
+  setIsUpdating,
+}: {
+  id: string
+  name: string
+  remote: string
+  networks: Readonly<State.Network[]>
+  history: ReturnType<typeof useHistory>
+  dispatch: StateDispatch
   disabled: boolean
-) =>
+  setIsUpdating: React.Dispatch<boolean>
+}) =>
   useCallback(
     (e: React.FormEvent): void => {
       e.preventDefault()
@@ -110,15 +120,16 @@ export const useOnSubmit = (
         addNotification(errorMessage)(dispatch)
         return
       }
+      setIsUpdating(true)
       updateNetwork({
         networkID: id!,
         options: {
           name,
           remote,
         },
-      })(dispatch, history)
+      })(dispatch, history).then(() => setIsUpdating(false))
     },
-    [id, name, remote, networks, history, dispatch, disabled]
+    [id, name, remote, networks, history, dispatch, disabled, setIsUpdating]
   )
 
 export default {
diff --git a/packages/neuron-ui/src/components/NetworkEditor/index.tsx b/packages/neuron-ui/src/components/NetworkEditor/index.tsx
index d2085039e3..e6bd6cd1d4 100644
--- a/packages/neuron-ui/src/components/NetworkEditor/index.tsx
+++ b/packages/neuron-ui/src/components/NetworkEditor/index.tsx
@@ -6,18 +6,15 @@ import TextField from 'widgets/TextField'
 import Button from 'widgets/Button'
 import Spinner from 'widgets/Spinner'
 
-import { useState as useGlobalState, useDispatch } from 'states/stateProvider'
-import { verifyNetworkName, verifyURL } from 'utils/validators'
-import { useGoBack } from 'utils/hooks'
-import { MAX_NETWORK_NAME_LENGTH } from 'utils/const'
+import { CONSTANTS, useGoBack, verifyNetworkName, verifyURL } from 'utils'
+import { useState as useGlobalState, useDispatch } from 'states'
 import { useOnSubmit } from './hooks'
 import styles from './networkEditor.module.scss'
 
+const { MAX_NETWORK_NAME_LENGTH } = CONSTANTS
+
 const NetworkEditor = () => {
   const {
-    app: {
-      loadings: { network: isUpdating = false },
-    },
     settings: { networks = [] },
   } = useGlobalState()
   const dispatch = useDispatch()
@@ -36,6 +33,7 @@ const NetworkEditor = () => {
     url: '',
     urlError: '',
   })
+  const [isUpdating, setIsUpdating] = useState(false)
 
   const disabled = !!(
     !editor.name ||
@@ -89,7 +87,16 @@ const NetworkEditor = () => {
   )
   const goBack = useGoBack(history)
 
-  const onSubmit = useOnSubmit(id, editor.name, editor.url, networks, history, dispatch, disabled)
+  const onSubmit = useOnSubmit({
+    id: id!,
+    name: editor.name,
+    remote: editor.url,
+    networks,
+    history,
+    dispatch,
+    disabled,
+    setIsUpdating,
+  })
 
   return (
     <Stack tokens={{ childrenGap: 15 }}>
diff --git a/packages/neuron-ui/src/components/NetworkEditor/networkEditor.module.scss b/packages/neuron-ui/src/components/NetworkEditor/networkEditor.module.scss
index 386351e02c..d5fca86c52 100644
--- a/packages/neuron-ui/src/components/NetworkEditor/networkEditor.module.scss
+++ b/packages/neuron-ui/src/components/NetworkEditor/networkEditor.module.scss
@@ -1,5 +1,5 @@
 @import '../../styles/mixin.scss';
 
 .actions {
-  @include formFooter;
+  @include form-footer;
 }
diff --git a/packages/neuron-ui/src/components/NetworkSetting/index.tsx b/packages/neuron-ui/src/components/NetworkSetting/index.tsx
index ba21ab6c48..cc6d62037a 100644
--- a/packages/neuron-ui/src/components/NetworkSetting/index.tsx
+++ b/packages/neuron-ui/src/components/NetworkSetting/index.tsx
@@ -1,17 +1,19 @@
 import React, { useEffect, useCallback } from 'react'
 import { useHistory } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
+import { TFunction } from 'i18next'
 import { ChoiceGroup, IChoiceGroupOption } from 'office-ui-fabric-react'
 import Button from 'widgets/Button'
+import { ReactComponent as EditNetwork } from 'widgets/Icons/Edit.svg'
+import { ReactComponent as DeleteNetwork } from 'widgets/Icons/Delete.svg'
 
-import chainState from 'states/initStates/chain'
-import { setCurrentNetowrk, openContextMenu, deleteNetwork } from 'services/remote'
+import chainState from 'states/init/chain'
+import { setCurrentNetowrk } from 'services/remote'
 
-import { Routes } from 'utils/const'
-import { backToTop } from 'utils/animations'
+import { backToTop, RoutePath, useOnHandleNetwork, useOnWindowResize, useToggleChoiceGroupBorder } from 'utils'
 import styles from './networkSetting.module.scss'
 
-const Label = ({ type, t }: { type: 'ckb' | 'ckb_testnet' | 'ckb_dev' | string; t: any }) => {
+const Label = ({ type, t }: { type: 'ckb' | 'ckb_testnet' | 'ckb_dev' | string; t: TFunction }) => {
   switch (type) {
     case 'ckb': {
       return <span className="label primary">{t('settings.network.mainnet')}</span>
@@ -32,54 +34,33 @@ const NetworkSetting = ({ chain = chainState, settings: { networks = [] } }: Sta
     backToTop()
   }, [])
 
-  const onChoiceChange = useCallback((_e, option?: IChoiceGroupOption) => {
-    if (option) {
-      setCurrentNetowrk(option.key)
-    }
-  }, [])
-
-  const goToCreateNetwork = useCallback(() => {
-    history.push(`${Routes.NetworkEditor}/new`)
-  }, [history])
+  const { networkID: currentId } = chain
 
-  const onContextMenu = useCallback(
-    (e: React.MouseEvent<HTMLElement, MouseEvent>) => {
-      e.stopPropagation()
-      e.preventDefault()
-      const { networkId } = (e.target as HTMLElement).dataset
-      const item = networks.find(n => n.id === networkId)
-      if (item) {
-        const isCurrent = item.id === chain.networkID
-        const isDefault = item.type === 0
-        const menuTemplate = [
-          {
-            label: t('common.select'),
-            enabled: !isCurrent,
-            click: () => {
-              setCurrentNetowrk(item.id)
-            },
-          },
-          {
-            label: t('common.edit'),
-            enabled: true,
-            click: () => {
-              history.push(`${Routes.NetworkEditor}/${item.id}`)
-            },
-          },
-          {
-            label: t('common.delete'),
-            enabled: !isDefault,
-            click: () => {
-              deleteNetwork(item.id)
-            },
-          },
-        ]
-        openContextMenu(menuTemplate)
+  const onChoiceChange = useCallback(
+    (_e, option?: IChoiceGroupOption) => {
+      if (option && option.key !== currentId) {
+        setCurrentNetowrk(option.key)
       }
     },
-    [chain.networkID, networks, history, t]
+    [currentId]
   )
 
+  const goToCreateNetwork = useCallback(() => {
+    history.push(`${RoutePath.NetworkEditor}/new`)
+  }, [history])
+
+  const toggleBottomBorder = useToggleChoiceGroupBorder(`.${styles.networks}`, styles.hasBottomBorder)
+
+  useEffect(() => {
+    if (networks.length) {
+      toggleBottomBorder()
+    }
+  }, [toggleBottomBorder, networks.length])
+
+  useOnWindowResize(toggleBottomBorder)
+
+  const onHandleNetwork = useOnHandleNetwork({ history })
+
   return (
     <div className={styles.container}>
       <ChoiceGroup
@@ -90,18 +71,35 @@ const NetworkSetting = ({ chain = chainState, settings: { networks = [] } }: Sta
             text: network.name,
             checked: chain.networkID === network.id,
             onRenderLabel: ({ text }: IChoiceGroupOption) => {
+              const isDefault = network.type === 0
               return (
                 <div
-                  className={styles.network}
-                  data-network-id={network.id}
-                  onContextMenu={onContextMenu}
+                  role="presentation"
+                  className={`ms-ChoiceFieldLabel ${styles.choiceLabel}`}
+                  data-id={network.id}
+                  data-action="select"
+                  onClick={onHandleNetwork}
                   title={`${text}: ${network.remote}`}
                 >
-                  <span className="ms-ChoiceFieldLabel" style={{ pointerEvents: 'none' }}>
+                  <span className={styles.networkLabel}>
                     {text}
+                    <span className={styles.url}>{`(${network.remote}`}</span>
+                    <Label type={network.chain} t={t} />
                   </span>
-                  <span style={{ color: '#999', pointerEvents: 'none' }}>{`(${network.remote})`}</span>
-                  <Label type={network.chain} t={t} />
+
+                  <button type="button" data-action="edit" aria-label={t('common.edit')} title={t('common.edit')}>
+                    <EditNetwork />
+                  </button>
+                  {isDefault ? null : (
+                    <button
+                      type="button"
+                      data-action="delete"
+                      aria-label={t('common.delete')}
+                      title={t('common.delete')}
+                    >
+                      <DeleteNetwork />
+                    </button>
+                  )}
                 </div>
               )
             },
diff --git a/packages/neuron-ui/src/components/NetworkSetting/networkSetting.module.scss b/packages/neuron-ui/src/components/NetworkSetting/networkSetting.module.scss
index 650a3bdd67..5a5b8c8508 100644
--- a/packages/neuron-ui/src/components/NetworkSetting/networkSetting.module.scss
+++ b/packages/neuron-ui/src/components/NetworkSetting/networkSetting.module.scss
@@ -1,24 +1,86 @@
+@import '../../styles/mixin.scss';
+
 .container {
   display: grid;
-  grid-template:
-    'networks'auto 'actions'auto;
+  grid-template: 'networks' auto 'actions' auto;
   grid-row-gap: 15px;
 }
 
 .networks {
   grid-area: networks;
+  height: calc(100vh - 200px);
+  overflow: auto;
+  padding: 0 0 5px 8px;
 }
 
-.network {
-  span:nth-of-type(2) {
-    margin: 0 5px;
+.choiceLabel {
+  display: flex !important;
+  align-items: center;
+  border: 1px solid transparent;
+  padding: 3px;
+  box-sizing: border-box;
+
+  .networkLabel {
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+    .url {
+      position: relative;
+      @include text-overflow-ellipsis;
+      max-width: 650px;
+      color: #999;
+      pointer-events: none;
+      padding-right: 0.6em;
+      &:before {
+        position: absolute;
+        right: 0;
+        content: ')';
+      }
+    }
+  }
+  button {
+    display: flex;
+    height: 1.25rem;
+    align-items: center;
+    visibility: hidden;
+    appearance: none;
+    margin: 0 0 0 10px;
+    padding: 0;
+    border: none;
+    background: transparent;
+    svg {
+      pointer-events: none;
+      path,
+      g {
+        fill: #888;
+      }
+    }
+    &:hover {
+      svg {
+        path,
+        g {
+          fill: var(--nervos-green);
+        }
+      }
+    }
+  }
+  &:hover,
+  &:focus {
+    border-color: #aeaeae;
+    button {
+      visibility: visible;
+    }
   }
 }
 
 .actions {
   grid-area: actions;
-
+  justify-self: flex-end;
   button {
     width: 9.375rem;
   }
 }
+
+.hasBottomBorder {
+  border-bottom: 0.5px solid #ccc;
+}
diff --git a/packages/neuron-ui/src/components/NetworkStatus/index.tsx b/packages/neuron-ui/src/components/NetworkStatus/index.tsx
index 0314d7530b..7c9cd77857 100644
--- a/packages/neuron-ui/src/components/NetworkStatus/index.tsx
+++ b/packages/neuron-ui/src/components/NetworkStatus/index.tsx
@@ -1,8 +1,6 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { ConnectionStatus, SyncStatus } from 'utils/const'
-import { localNumberFormatter } from 'utils/formatters'
-
+import { ConnectionStatus, SyncStatus, localNumberFormatter } from 'utils'
 import styles from './networkStatus.module.scss'
 
 export interface NetworkStatusProps {
diff --git a/packages/neuron-ui/src/components/NetworkStatus/networkStatus.module.scss b/packages/neuron-ui/src/components/NetworkStatus/networkStatus.module.scss
index f2d73db7aa..20385f47c8 100644
--- a/packages/neuron-ui/src/components/NetworkStatus/networkStatus.module.scss
+++ b/packages/neuron-ui/src/components/NetworkStatus/networkStatus.module.scss
@@ -14,6 +14,7 @@ $hover-bg-color: #3cc68a4d;
     display: flex;
     align-items: center;
     line-height: 1em;
+    word-break: break-all;
 
     &::before {
       position: absolute;
@@ -52,7 +53,7 @@ $hover-bg-color: #3cc68a4d;
 }
 
 .tooltip {
-  @include MediumText;
+  @include medium-text;
   display: none;
   position: absolute;
   bottom: calc(100% + 10px);
@@ -69,7 +70,6 @@ $hover-bg-color: #3cc68a4d;
   box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.22);
   transition: all 0.2s ease-in-out;
   opacity: 0;
-  user-select: none;
   pointer-events: none;
   font-size: 0.75rem;
   line-height: 1.5em;
diff --git a/packages/neuron-ui/src/components/Overview/index.tsx b/packages/neuron-ui/src/components/Overview/index.tsx
index 83ba80ec71..28a9b29d1a 100644
--- a/packages/neuron-ui/src/components/Overview/index.tsx
+++ b/packages/neuron-ui/src/components/Overview/index.tsx
@@ -1,27 +1,27 @@
 import React, { useCallback, useMemo, useEffect } from 'react'
 import { useHistory } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import PropertyList, { Property } from 'widgets/PropertyList'
-import Balance from 'widgets/Balance'
+import BalanceSyncIcon from 'components/BalanceSyncingIcon'
+import CopyZone from 'widgets/CopyZone'
 
 import { showTransactionDetails } from 'services/remote'
-import { useState as useGlobalState, useDispatch } from 'states/stateProvider'
-import { updateTransactionList } from 'states/stateProvider/actionCreators'
+import { useState as useGlobalState, useDispatch, updateTransactionList } from 'states'
 
-import { localNumberFormatter, shannonToCKBFormatter, uniformTimeFormatter } from 'utils/formatters'
-import getSyncStatus from 'utils/getSyncStatus'
-import getCurrentUrl from 'utils/getCurrentUrl'
 import {
-  SyncStatus as SyncStatusEnum,
-  SyncStatusThatBalanceUpdating,
-  ConnectionStatus,
-  PAGE_SIZE,
-  Routes,
-  CONFIRMATION_THRESHOLD,
-} from 'utils/const'
-import { backToTop } from 'utils/animations'
+  localNumberFormatter,
+  shannonToCKBFormatter,
+  uniformTimeFormatter,
+  backToTop,
+  CONSTANTS,
+  RoutePath,
+  getCurrentUrl,
+  getSyncStatus,
+} from 'utils'
+
 import styles from './overview.module.scss'
 
+const { PAGE_SIZE, CONFIRMATION_THRESHOLD } = CONSTANTS
+
 const genTypeLabel = (type: 'send' | 'receive', status: 'pending' | 'confirming' | 'success' | 'failed') => {
   switch (type) {
     case 'send': {
@@ -51,7 +51,7 @@ const genTypeLabel = (type: 'send' | 'receive', status: 'pending' | 'confirming'
 const Overview = () => {
   const {
     app: { tipBlockNumber, tipBlockTimestamp },
-    wallet: { id, name, balance = '' },
+    wallet: { id, balance = '' },
     chain: {
       tipBlockNumber: syncedBlockNumber,
       transactions: { items = [] },
@@ -87,42 +87,9 @@ const Overview = () => {
     })(dispatch)
   }, [id, dispatch])
   const onGoToHistory = useCallback(() => {
-    history.push(Routes.History)
+    history.push(RoutePath.History)
   }, [history])
 
-  const balanceProperties: Property[] = useMemo(() => {
-    const balanceValue = shannonToCKBFormatter(balance)
-    let prompt = null
-    if (ConnectionStatus.Connecting === connectionStatus) {
-      prompt = <span className={styles.balancePrompt}>{t('sync.connecting')}</span>
-    } else if (ConnectionStatus.Offline === connectionStatus) {
-      prompt = (
-        <span className={styles.balancePrompt} style={{ color: 'red' }}>
-          {t('sync.sync-failed')}
-        </span>
-      )
-    } else if (SyncStatusEnum.SyncNotStart === syncStatus) {
-      prompt = (
-        <span className={styles.balancePrompt} style={{ color: 'red', wordBreak: 'break-all', whiteSpace: 'pre-line' }}>
-          {t('sync.sync-not-start')}
-        </span>
-      )
-    } else if (SyncStatusThatBalanceUpdating.includes(syncStatus) || ConnectionStatus.Connecting === connectionStatus) {
-      prompt = <span className={styles.balancePrompt}>{t('sync.syncing-balance')}</span>
-    }
-    return [
-      {
-        label: t('overview.balance'),
-        value: (
-          <div className={styles.balanceValue}>
-            <Balance balance={balanceValue} style={{ width: '280px' }} />
-            {prompt}
-          </div>
-        ),
-      },
-    ]
-  }, [t, balance, syncStatus, connectionStatus])
-
   const onRecentActivityDoubleClick = useCallback((e: React.SyntheticEvent) => {
     const cellElement = e.target as HTMLTableCellElement
     if (cellElement?.parentElement?.dataset?.hash) {
@@ -221,10 +188,19 @@ const Overview = () => {
     )
   }, [recentItems, syncedBlockNumber, tipBlockNumber, t, onRecentActivityDoubleClick])
 
+  const ckbBalance = shannonToCKBFormatter(balance)
+
   return (
     <div className={styles.overview}>
-      <h1 className={styles.walletName}>{name}</h1>
-      <PropertyList properties={balanceProperties} />
+      {/* <h1 className={styles.walletName}>{name}</h1> */}
+      <h1 className={styles.pageTitle}>{t('navbar.overview')}</h1>
+      <div className={styles.balance}>
+        <span>{`${t('overview.balance')}:`}</span>
+        <CopyZone content={ckbBalance.replace(/,/g, '')} name={t('overview.copy-balance')}>
+          <span className={styles.balanceValue}>{`${ckbBalance}`}</span>
+        </CopyZone>
+        <BalanceSyncIcon connectionStatus={connectionStatus} syncStatus={syncStatus} />
+      </div>
 
       <h2 className={styles.recentActivitiesTitle}>{t('overview.recent-activities')}</h2>
       {items.length ? (
diff --git a/packages/neuron-ui/src/components/Overview/overview.module.scss b/packages/neuron-ui/src/components/Overview/overview.module.scss
index 60bb3627be..125c1137d1 100644
--- a/packages/neuron-ui/src/components/Overview/overview.module.scss
+++ b/packages/neuron-ui/src/components/Overview/overview.module.scss
@@ -8,85 +8,50 @@ $confirming-color: #b3b3b3;
 .overview {
   display: grid;
   grid-template:
-    'wallet-name wallet-name'auto 'balance balance'auto 'activities-title activities-title'auto 'activities activities'auto 'more-link more-link'auto/ 1fr auto;
-  // padding: 39px 11px 0; this size is from design, but not used now.
-  padding: 39px 0 0;
+    'page-title page-title' auto
+    'balance balance' auto
+    'activities-title activities-title' auto
+    'activities activities' auto
+    'more-link more-link' auto/
+    1fr auto;
 }
 
-.walletName,
+.pageTitle,
 .recentActivitiesTitle {
-  @include BoldText;
+  @include bold-text;
   font-size: 1.375rem;
-  line-height: 1.22em;
-  letter-spacing: 1.1px;
   color: #000;
   margin: 0;
 }
 
-.walletName {
-  grid-area: wallet-name;
-  margin-bottom: 11px;
+.pageTitle {
+  @include page-title;
+  grid-area: page-title;
 }
 
 .recentActivitiesTitle {
   grid-area: activities-title;
-  margin-top: 45px;
-  margin-bottom: 17px;
+  margin-top: 30px;
+  margin-bottom: 15px;
+  font-size: 1rem;
+  font-weight: 500;
 }
 
 .balance {
   grid-area: balance;
+  font-size: 0.875rem;
+  font-weight: 600;
 }
 
 .balanceValue {
-  display: flex;
-  flex-direction: column;
-  text-align: left;
-}
-
-.balancePrompt {
-  @include BoldText;
-  color: var(--nervos-green);
-  font-size: 0.8rem;
-  margin-top: 3px;
-}
-
-.balanceInt {
-  @include BoldText;
-  font-size: 1.125rem;
-}
-
-section {
-  position: absolute;
-  left: 0;
-  top: 100%;
-  width: 100%;
-  background-color: #f5f5f5;
-  box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.12);
-  padding: 6px 0;
-  z-index: 1;
-
-  &>div {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 6px 11px;
-
-    &:hover {
-      background-color: #e3e3e3;
-    }
-
-    &>span {
-      font-size: 0.75rem;
-      font-weight: 600;
-      letter-spacing: 0.45px;
-      color: #000;
-
-      &:last-child {
-        font-weight: normal;
-      }
-    }
-
+  font-weight: 500;
+  max-width: 60%;
+  padding: 0 5px 0 60px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  &:after {
+    content: ' CKB';
   }
 }
 
@@ -116,7 +81,6 @@ section {
     text-align: left;
     font-size: 0.875rem;
     font-weight: 600;
-    letter-spacing: 0.7px;
     color: #000;
     line-height: 1em;
     padding: 16px 0;
@@ -126,60 +90,58 @@ section {
     font-size: 0.875rem;
     line-height: 1em;
     padding: 2px 0;
-    letter-spacing: 0.7px;
     color: #000;
   }
 
   .txStatus {
-    &>div::after {
+    & > div::after {
       position: absolute;
       display: block;
       content: '';
       border-radius: 50%;
       width: 8px;
       height: 8px;
-      left: 100%;
+      left: 0;
       top: 50%;
       transform: translateY(-50%);
     }
 
-    &[data-status="pending"]>div::after {
+    &[data-status='pending'] > div::after {
       background-color: $pending-color;
       filter: drop-shadow(0 0 1px $pending-color);
       animation: blink 5s infinite;
     }
 
-    &[data-status="confirming"]>div::after {
+    &[data-status='confirming'] > div::after {
       background-color: $pending-color;
       filter: drop-shadow(0 0 1px $pending-color);
       animation: blink 5s infinite;
     }
 
-    &[data-status="success"]>div::after {
+    &[data-status='success'] > div::after {
       background-color: $success-color;
       filter: drop-shadow(0 0 1px $success-color);
     }
 
-    &[data-status="failed"]>div::after {
+    &[data-status='failed'] > div::after {
       background-color: $failed-color;
       filter: drop-shadow(0 0 1px $failed-color);
     }
 
-    &>div {
+    & > div {
       display: flex;
       flex-direction: column;
       position: relative;
-      width: 150px;
+      padding-left: 20px;
 
-      &>span:first-child {
-        flex: 1
+      & > span:first-child {
+        flex: 1;
       }
 
-      &>span:nth-child(2) {
+      & > span:nth-child(2) {
         color: #626262;
         font-size: 0.625rem;
         line-height: 0.8125rem;
-        letter-spacing: 0.5px;
         margin-top: 3px;
       }
     }
@@ -188,22 +150,22 @@ section {
 
 .linkToHistory {
   grid-area: more-link;
-  font-size: 0.625rem;
-  letter-spacing: 0.5px;
+  font-size: 0.75rem;
   color: #000;
   margin-top: 13px;
 
-  &>span:hover {
+  & > span:hover {
     color: var(--nervos-green);
   }
 }
 
 .noActivities {
   grid-area: more-link;
+  font-size: 0.75rem;
+  color: #000;
 }
 
 @keyframes blink {
-
   from,
   to {
     opacity: 0.5;
diff --git a/packages/neuron-ui/src/components/PasswordRequest/index.tsx b/packages/neuron-ui/src/components/PasswordRequest/index.tsx
index 96abe14640..8ebbf51067 100644
--- a/packages/neuron-ui/src/components/PasswordRequest/index.tsx
+++ b/packages/neuron-ui/src/components/PasswordRequest/index.tsx
@@ -1,12 +1,20 @@
-import React, { useRef, useCallback, useMemo } from 'react'
+import React, { useState, useRef, useCallback, useMemo, useEffect } from 'react'
 import { useHistory } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import Button from 'widgets/Button'
 import TextField from 'widgets/TextField'
-import { useDialog } from 'utils/hooks'
-import { useState as useGlobalState, useDispatch } from 'states/stateProvider'
-import { AppActions } from 'states/stateProvider/reducer'
-import { sendTransaction, deleteWallet, backupWallet } from 'states/stateProvider/actionCreators'
+import Spinner from 'widgets/Spinner'
+import { useDialog, ResponseCode, ErrorCode, RoutePath } from 'utils'
+
+import {
+  useState as useGlobalState,
+  useDispatch,
+  AppActions,
+  sendTransaction,
+  deleteWallet,
+  backupWallet,
+} from 'states'
+import { PasswordIncorrectException } from 'exceptions'
 import styles from './passwordRequest.module.scss'
 
 const PasswordRequest = () => {
@@ -14,7 +22,7 @@ const PasswordRequest = () => {
     app: {
       send: { description, generatedTx },
       loadings: { sending: isSending = false },
-      passwordRequest: { walletID = '', actionType = null, password = '' },
+      passwordRequest: { walletID = '', actionType = null },
     },
     settings: { wallets = [] },
   } = useGlobalState()
@@ -22,6 +30,15 @@ const PasswordRequest = () => {
   const [t] = useTranslation()
   const history = useHistory()
   const dialogRef = useRef<HTMLDialogElement | null>(null)
+
+  const [password, setPassword] = useState('')
+  const [error, setError] = useState('')
+
+  useEffect(() => {
+    setPassword('')
+    setError('')
+  }, [actionType, setError, setPassword])
+
   const onDismiss = useCallback(() => {
     dispatch({
       type: AppActions.DismissPasswordRequest,
@@ -31,72 +48,84 @@ const PasswordRequest = () => {
 
   const wallet = useMemo(() => wallets.find(w => w.id === walletID), [walletID, wallets])
 
-  const disabled = !password || (actionType === 'send' && isSending)
+  const isLoading = ['send', 'unlock'].includes(actionType || '') && isSending
+  const disabled = !password || isSending
 
   const onSubmit = useCallback(
-    (e?: React.FormEvent): void => {
+    async (e?: React.FormEvent) => {
       if (e) {
         e.preventDefault()
       }
       if (disabled) {
         return
       }
-      switch (actionType) {
-        case 'send': {
-          if (isSending) {
+      try {
+        switch (actionType) {
+          case 'send': {
+            if (isSending) {
+              break
+            }
+            await sendTransaction({ walletID, tx: generatedTx, description, password })(dispatch).then(status => {
+              if (status === ResponseCode.SUCCESS) {
+                history.push(RoutePath.History)
+              } else if (status === ErrorCode.PasswordIncorrect) {
+                throw new PasswordIncorrectException()
+              }
+            })
             break
           }
-          sendTransaction({
-            walletID,
-            tx: generatedTx,
-            description,
-            password,
-          })(dispatch, history)
-          break
-        }
-        case 'delete': {
-          deleteWallet({
-            id: walletID,
-            password,
-          })(dispatch)
-          break
-        }
-        case 'backup': {
-          backupWallet({
-            id: walletID,
-            password,
-          })(dispatch)
-          break
-        }
-        case 'unlock': {
-          if (isSending) {
+          case 'delete': {
+            await deleteWallet({ id: walletID, password })(dispatch).then(status => {
+              if (status === ErrorCode.PasswordIncorrect) {
+                throw new PasswordIncorrectException()
+              }
+            })
+            break
+          }
+          case 'backup': {
+            await backupWallet({ id: walletID, password })(dispatch).then(status => {
+              if (status === ErrorCode.PasswordIncorrect) {
+                throw new PasswordIncorrectException()
+              }
+            })
+            break
+          }
+          case 'unlock': {
+            if (isSending) {
+              break
+            }
+            await sendTransaction({ walletID, tx: generatedTx, description, password })(dispatch).then(status => {
+              if (status === ResponseCode.SUCCESS) {
+                dispatch({
+                  type: AppActions.SetGlobalDialog,
+                  payload: 'unlock-success',
+                })
+              } else if (status === ErrorCode.PasswordIncorrect) {
+                throw new PasswordIncorrectException()
+              }
+            })
+            break
+          }
+          default: {
             break
           }
-          sendTransaction({
-            walletID,
-            tx: generatedTx,
-            description,
-            password,
-          })(dispatch, history, { type: 'unlock' })
-          break
         }
-        default: {
-          break
+      } catch (err) {
+        if (err.code === ErrorCode.PasswordIncorrect) {
+          setError(t(err.message))
         }
       }
     },
-    [dispatch, walletID, password, actionType, description, history, isSending, generatedTx, disabled]
+    [dispatch, walletID, password, actionType, description, history, isSending, generatedTx, disabled, setError, t]
   )
 
   const onChange = useCallback(
     (e: React.SyntheticEvent<HTMLInputElement>) => {
       const { value } = e.target as HTMLInputElement
-      dispatch({
-        type: AppActions.UpdatePassword,
-        payload: value,
-      })
+      setPassword(value)
+      setError('')
     },
-    [dispatch]
+    [setPassword, setError]
   )
 
   if (!wallet) {
@@ -118,10 +147,13 @@ const PasswordRequest = () => {
           autoFocus
           required
           className={styles.passwordInput}
+          error={error}
         />
         <div className={styles.footer}>
           <Button label={t('common.cancel')} type="cancel" onClick={onDismiss} />
-          <Button label={t('common.confirm')} type="submit" disabled={disabled} />
+          <Button label={t('common.confirm')} type="submit" disabled={disabled}>
+            {isLoading ? <Spinner /> : (t('common.confirm') as string)}
+          </Button>
         </div>
       </form>
     </dialog>
diff --git a/packages/neuron-ui/src/components/PasswordRequest/passwordRequest.module.scss b/packages/neuron-ui/src/components/PasswordRequest/passwordRequest.module.scss
index 08a308eb54..23802741ea 100644
--- a/packages/neuron-ui/src/components/PasswordRequest/passwordRequest.module.scss
+++ b/packages/neuron-ui/src/components/PasswordRequest/passwordRequest.module.scss
@@ -1,7 +1,7 @@
-@import '../../styles//mixin.scss';
+@import '../../styles/mixin.scss';
 
 .dialog {
-  @include dialogContainer;
+  @include dialog-container;
   padding: 49px 73px;
 
   &::backdrop {
@@ -10,7 +10,7 @@
 }
 
 .footer {
-  @include dialogFooter;
+  @include dialog-footer;
 
   button:last-of-type {
     margin-left: 9px;
@@ -26,12 +26,12 @@
 
   &:after {
     display: inline;
-    content: ':'
+    content: ':';
   }
 }
 
 .walletName {
-  @include BoldText;
+  @include bold-text;
   color: var(--nervos-green);
 }
 
diff --git a/packages/neuron-ui/src/components/Receive/index.tsx b/packages/neuron-ui/src/components/Receive/index.tsx
index 3789e55472..34e56a13e4 100644
--- a/packages/neuron-ui/src/components/Receive/index.tsx
+++ b/packages/neuron-ui/src/components/Receive/index.tsx
@@ -1,12 +1,10 @@
-import React, { useCallback, useMemo } from 'react'
+import React, { useMemo } from 'react'
 import { useRouteMatch } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { TooltipHost } from 'office-ui-fabric-react'
-import { ReactComponent as Copy } from 'widgets/Icons/ReceiveCopy.svg'
 
-import { useState as useGlobalState, useDispatch } from 'states/stateProvider'
+import { useState as useGlobalState, useDispatch } from 'states'
 import QRCode from 'widgets/QRCode'
-import { addPopup } from 'states/stateProvider/actionCreators'
+import CopyZone from 'widgets/CopyZone'
 import styles from './receive.module.scss'
 
 const Receive = () => {
@@ -20,36 +18,10 @@ const Receive = () => {
   } = useRouteMatch()
 
   const accountAddress = useMemo(
-    () => address || (addresses.find(addr => addr.type === 0 && addr.txCount === 0) || { address: '' }).address || '',
+    () => (address || addresses.find(addr => addr.type === 0 && addr.txCount === 0)?.address) ?? '',
     [address, addresses]
   )
 
-  const copyAddress = useCallback(() => {
-    window.navigator.clipboard.writeText(accountAddress)
-    addPopup('addr-copied')(dispatch)
-  }, [accountAddress, dispatch])
-
-  const Address = useMemo(
-    () => (
-      <div className={styles.address}>
-        <TooltipHost content={t('receive.click-to-copy')} calloutProps={{ gapSpace: 0 }}>
-          <>
-            <input readOnly value={accountAddress} onClick={copyAddress} />
-            <button
-              type="button"
-              aria-label={t('receive.click-to-copy')}
-              onClick={copyAddress}
-              className={styles.copyBtn}
-            >
-              <Copy />
-            </button>
-          </>
-        </TooltipHost>
-      </div>
-    ),
-    [copyAddress, accountAddress, t]
-  )
-
   if (!accountAddress) {
     return <div>{t('receive.address-not-found')}</div>
   }
@@ -62,7 +34,11 @@ const Receive = () => {
       }}
     >
       <QRCode value={accountAddress} size={256} includeMargin dispatch={dispatch} />
-      {Address}
+      <div className={styles.address}>
+        <CopyZone content={accountAddress} name={t('receive.copy-address')} style={{ lineHeight: '1.625rem' }}>
+          {accountAddress}
+        </CopyZone>
+      </div>
       <p className={styles.notation}>{t('receive.prompt')}</p>
     </div>
   )
diff --git a/packages/neuron-ui/src/components/Receive/receive.module.scss b/packages/neuron-ui/src/components/Receive/receive.module.scss
index bcdc9f87c7..7afcd40680 100644
--- a/packages/neuron-ui/src/components/Receive/receive.module.scss
+++ b/packages/neuron-ui/src/components/Receive/receive.module.scss
@@ -1,23 +1,7 @@
 .address {
-  display: flex;
-  width: 520px;
   margin: 20px auto 0;
-
-  &>div {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    flex: 1;
-  }
-
-  input {
-    flex: 1;
-    padding: 6px 17px;
-    border: 1px solid #000;
-    color: #000;
-    font-size: 1rem;
-    letter-spacing: 0.6px;
-  }
+  display: flex;
+  justify-content: center;
 }
 
 .copyBtn {
@@ -26,10 +10,8 @@
   background: transparent;
 
   &:hover {
-
     g,
     path {
-
       stroke: var(--nervos-green);
       fill: var(--nervos-green);
     }
@@ -39,6 +21,5 @@
 .notation {
   width: 450px;
   font-size: 0.75rem;
-  letter-spacing: 0.5px;
-  margin: 20px auto 0;
+  margin: 6px auto 0;
 }
diff --git a/packages/neuron-ui/src/components/Send/hooks.ts b/packages/neuron-ui/src/components/Send/hooks.ts
index ee1ca6d46e..e8a5d4fe0a 100644
--- a/packages/neuron-ui/src/components/Send/hooks.ts
+++ b/packages/neuron-ui/src/components/Send/hooks.ts
@@ -1,15 +1,21 @@
 import React, { useState, useCallback, useEffect, useMemo } from 'react'
 import { TFunction } from 'i18next'
-import i18n from 'utils/i18n'
 import jsQR from 'jsqr'
 
 import { AppActions, StateDispatch } from 'states/stateProvider/reducer'
 import { captureScreenshot, showErrorMessage } from 'services/remote'
 import { generateTx, generateSendingAllTx } from 'services/remote/wallets'
 
-import { outputsToTotalAmount, CKBToShannonFormatter, shannonToCKBFormatter } from 'utils/formatters'
-import { verifyTransactionOutputs, verifyAddress } from 'utils/validators'
-import calculateFee from 'utils/calculateFee'
+import {
+  outputsToTotalAmount,
+  CKBToShannonFormatter,
+  shannonToCKBFormatter,
+  calculateFee,
+  verifyTransactionOutputs,
+  verifyAddress,
+} from 'utils'
+import i18n from 'utils/i18n'
+
 import styles from './send.module.scss'
 
 let generateTxTimer: ReturnType<typeof setTimeout>
diff --git a/packages/neuron-ui/src/components/Send/index.tsx b/packages/neuron-ui/src/components/Send/index.tsx
index 018c52c190..4c3a327ca0 100644
--- a/packages/neuron-ui/src/components/Send/index.tsx
+++ b/packages/neuron-ui/src/components/Send/index.tsx
@@ -17,34 +17,33 @@ import Calendar from 'widgets/Icons/Calendar.png'
 import ActiveCalendar from 'widgets/Icons/ActiveCalendar.png'
 import { ReactComponent as Attention } from 'widgets/Icons/Attention.svg'
 
-import { useState as useGlobalState, useDispatch } from 'states/stateProvider'
-import appState from 'states/initStates/app'
+import { useState as useGlobalState, useDispatch } from 'states'
+import appState from 'states/init/app'
 
 import {
   PlaceHolders,
   ErrorCode,
-  MAX_DECIMAL_DIGITS,
-  MAINNET_TAG,
   SyncStatus,
   SyncStatusThatBalanceUpdating,
   ConnectionStatus,
-  SINCE_FIELD_SIZE,
-} from 'utils/const'
-import getSyncStatus from 'utils/getSyncStatus'
-import getCurrentUrl from 'utils/getCurrentUrl'
-import { shannonToCKBFormatter, localNumberFormatter } from 'utils/formatters'
-import {
+  CONSTANTS,
+  shannonToCKBFormatter,
+  localNumberFormatter,
+  getCurrentUrl,
+  getSyncStatus,
   verifyTotalAmount,
   verifyTransactionOutputs,
   verifyAmount,
   verifyAmountRange,
   verifyAddress,
-} from 'utils/validators'
+} from 'utils'
 
-import DatetimePicker from 'widgets/DatetimePicker'
+import DatetimePicker, { formatDate } from 'widgets/DatetimePicker'
 import { useInitialize } from './hooks'
 import styles from './send.module.scss'
 
+const { MAX_DECIMAL_DIGITS, MAINNET_TAG, SINCE_FIELD_SIZE } = CONSTANTS
+
 const Send = () => {
   const {
     app: {
@@ -305,7 +304,7 @@ const Send = () => {
                   <div className={styles.locktime} data-status={item.date ? 'set' : 'unset'}>
                     <img data-status="inactive" className={styles.icon} src={Calendar} alt="calendar" />
                     <img data-status="active" className={styles.icon} src={ActiveCalendar} alt="active-calendar" />
-                    {item.date ? `${t('send.release-on')}: ${new Date(+item.date).toLocaleDateString()}` : null}
+                    {item.date ? `${t('send.release-on')}: ${formatDate(new Date(+item.date))}` : null}
                     <button type="button" data-index={idx} onClick={onLocktimeClick}>
                       {item.date ? (
                         <>
diff --git a/packages/neuron-ui/src/components/Send/send.module.scss b/packages/neuron-ui/src/components/Send/send.module.scss
index 3c1e26f31e..9f81f834c6 100644
--- a/packages/neuron-ui/src/components/Send/send.module.scss
+++ b/packages/neuron-ui/src/components/Send/send.module.scss
@@ -4,8 +4,7 @@ $textfieldWidth: calc(100vw - 370px);
 .outputContainer {
   position: relative;
   display: grid;
-  grid-template:
-    'address scanner add-or-remove'auto 'amount max add-or-remove'auto 'locktime locktime locktime'auto/ $textfieldWidth 50px 30px;
+  grid-template: 'address scanner add-or-remove' auto 'amount max add-or-remove' auto 'locktime locktime locktime' auto/ $textfieldWidth 50px 30px;
   grid-gap: 15px;
   padding: 28px 0 34px;
   box-sizing: border-box;
@@ -15,7 +14,7 @@ $textfieldWidth: calc(100vw - 370px);
     grid-area: address;
   }
 
-  button[aria-label="qr-btn"] {
+  button[aria-label='qr-btn'] {
     display: none;
     position: relative;
     padding-top: 10px;
@@ -63,7 +62,6 @@ $textfieldWidth: calc(100vw - 370px);
       margin-right: 5px;
       margin-top: 0.125rem;
     }
-
   }
 
   .amountField {
@@ -83,7 +81,7 @@ $textfieldWidth: calc(100vw - 370px);
 .info {
   width: $textfieldWidth;
   display: grid;
-  grid-template: 'textfield'auto;
+  grid-template: 'textfield' auto;
   grid-gap: 15px;
   padding: 24px 0 34px;
 }
@@ -94,7 +92,7 @@ $textfieldWidth: calc(100vw - 370px);
   justify-content: flex-start;
   align-items: center;
 
-  &>div {
+  & > div {
     position: relative;
   }
 
@@ -103,19 +101,19 @@ $textfieldWidth: calc(100vw - 370px);
 
     &:after {
       display: inline;
-      content: ':'
+      content: ':';
     }
   }
 
   label,
   span {
-    @include BoldText;
+    @include bold-text;
     font-size: 1.375rem;
     letter-spacing: 1.1;
   }
 
   .balancePrompt {
-    @include BoldText;
+    @include bold-text;
     position: absolute;
     top: 100%;
     left: 0;
@@ -149,11 +147,9 @@ $textfieldWidth: calc(100vw - 370px);
     width: 100%;
   }
 
-
-
   &[disabled] {
     img[data-type='add'] {
-      filter: brightness(1.2) grayscale(1)
+      filter: brightness(1.2) grayscale(1);
     }
 
     img[data-type='remove'] {
@@ -170,16 +166,14 @@ $textfieldWidth: calc(100vw - 370px);
   padding: 0;
   line-height: auto;
 
-  &[data-is-on=true] {
+  &[data-is-on='true'] {
     color: rgba(255, 255, 255, 0.8) !important;
     box-shadow: inset 0 0 50px rgba(0, 0, 0, 0.5) !important;
   }
-
 }
 
-
 .actions {
-  @include formFooter;
+  @include form-footer;
 }
 
 .scanBtn {
@@ -193,7 +187,6 @@ $textfieldWidth: calc(100vw - 370px);
   }
 
   &:hover {
-
     g,
     path {
       stroke: var(--nervos-green);
@@ -220,17 +213,17 @@ $textfieldWidth: calc(100vw - 370px);
     width: 15px;
     pointer-events: none;
 
-    &[alt$="calendar"] {
+    &[alt$='calendar'] {
       margin-right: 6px;
     }
 
-    &[data-status="active"] {
+    &[data-status='active'] {
       display: none;
     }
   }
 
   button {
-    @include RegularText;
+    @include regular-text;
     appearance: none;
     display: flex;
     justify-content: center;
@@ -242,33 +235,33 @@ $textfieldWidth: calc(100vw - 370px);
     border: none;
 
     &:hover {
-      img[data-status="inactive"] {
-        display: none
+      img[data-status='inactive'] {
+        display: none;
       }
 
-      img[data-status="active"] {
+      img[data-status='active'] {
         display: block;
       }
     }
   }
 
-  &[data-status="unset"]:hover {
+  &[data-status='unset']:hover {
     button {
       color: var(--nervos-green);
     }
 
     .icon {
-      &[data-status="active"] {
+      &[data-status='active'] {
         display: block;
       }
 
-      &[data-status="inactive"] {
+      &[data-status='inactive'] {
         display: none;
       }
     }
   }
 
-  &[data-status="set"] {
+  &[data-status='set'] {
     button {
       margin-left: 13px;
 
diff --git a/packages/neuron-ui/src/components/SettingTabs/index.tsx b/packages/neuron-ui/src/components/SettingTabs/index.tsx
new file mode 100644
index 0000000000..8084aa7ca6
--- /dev/null
+++ b/packages/neuron-ui/src/components/SettingTabs/index.tsx
@@ -0,0 +1,75 @@
+import React, { useMemo } from 'react'
+import { Route, useHistory, useLocation } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+import { Pivot, PivotItem } from 'office-ui-fabric-react'
+
+import { useState as useGloablState, useDispatch } from 'states'
+
+import GeneralSetting from 'components/GeneralSetting'
+import WalletSetting from 'components/WalletSetting'
+import NetworkSetting from 'components/NetworkSetting'
+
+import { getPlatform } from 'services/remote'
+import { RoutePath } from 'utils'
+
+import styles from './settingTabs.module.scss'
+
+const pivotItems = [
+  { label: 'settings.setting-tabs.general', url: RoutePath.SettingsGeneral },
+  { label: 'settings.setting-tabs.wallets', url: RoutePath.SettingsWallets },
+  { label: 'settings.setting-tabs.network', url: RoutePath.SettingsNetworks },
+]
+
+const settingPanels: CustomRouter.Route[] = [
+  { name: `GeneralSetting`, path: RoutePath.SettingsGeneral, exact: false, component: GeneralSetting },
+  { name: `WalletsSetting`, path: RoutePath.SettingsWallets, exact: false, component: WalletSetting },
+  { name: `NetworkSetting`, path: RoutePath.SettingsNetworks, exact: true, component: NetworkSetting },
+]
+
+const SettingsTabs = () => {
+  const [t] = useTranslation()
+  const history = useHistory()
+  const location = useLocation()
+  const globalState = useGloablState()
+  const dispatch = useDispatch()
+  const isMac = useMemo(() => {
+    return getPlatform() === 'darwin'
+  }, [])
+
+  return (
+    <div>
+      <h1 className={styles.title}>{t(`settings.title.${isMac ? 'mac' : 'normal'}`)}</h1>
+      <Pivot
+        selectedKey={location.pathname}
+        onLinkClick={(pivotItem?: PivotItem) => {
+          if (pivotItem && pivotItem.props && pivotItem.props.itemKey) {
+            history.replace(pivotItem.props.itemKey)
+          }
+        }}
+        headersOnly
+        styles={{
+          root: {
+            borderBottom: '0.5px solid #ccc',
+          },
+        }}
+      >
+        {pivotItems.map(pivotItem => (
+          <PivotItem key={pivotItem.url} headerText={t(pivotItem.label)} itemKey={pivotItem.url} />
+        ))}
+      </Pivot>
+
+      {settingPanels.map(container => (
+        <Route
+          exact={container.exact}
+          path={`${container.path}${container.params || ''}`}
+          key={container.name}
+          render={() => <container.component {...globalState} dispatch={dispatch} />}
+        />
+      ))}
+    </div>
+  )
+}
+
+SettingsTabs.displayName = 'SettingsTabs'
+
+export default SettingsTabs
diff --git a/packages/neuron-ui/src/components/SettingTabs/settingTabs.module.scss b/packages/neuron-ui/src/components/SettingTabs/settingTabs.module.scss
new file mode 100644
index 0000000000..71e5728e00
--- /dev/null
+++ b/packages/neuron-ui/src/components/SettingTabs/settingTabs.module.scss
@@ -0,0 +1,9 @@
+@import '../../styles/mixin.scss';
+
+.title {
+  @include bold-text;
+  font-size: 1.375rem;
+  line-height: 1.75rem;
+  margin: 0 0 5px;
+  padding: 0;
+}
diff --git a/packages/neuron-ui/src/components/Settings/index.tsx b/packages/neuron-ui/src/components/Settings/index.tsx
deleted file mode 100644
index 75a4e51dd9..0000000000
--- a/packages/neuron-ui/src/components/Settings/index.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React from 'react'
-import { Route, useHistory, useLocation } from 'react-router-dom'
-import { useTranslation } from 'react-i18next'
-import { Stack, Pivot, PivotItem } from 'office-ui-fabric-react'
-
-import { useState as useGloablState, useDispatch } from 'states/stateProvider'
-
-import GeneralSetting from 'components/GeneralSetting'
-import Wallets from 'components/WalletSetting'
-import NetworkSetting from 'components/NetworkSetting'
-
-import { Routes } from 'utils/const'
-
-const pivotItems = [
-  { label: 'settings.setting-tabs.general', url: Routes.SettingsGeneral },
-  { label: 'settings.setting-tabs.wallets', url: Routes.SettingsWallets },
-  { label: 'settings.setting-tabs.network', url: Routes.SettingsNetworks },
-]
-
-const settingPanels: CustomRouter.Route[] = [
-  {
-    name: `GeneralSetting`,
-    path: Routes.SettingsGeneral,
-    exact: false,
-    component: GeneralSetting,
-  },
-  {
-    name: `WalletsSetting`,
-    path: Routes.SettingsWallets,
-    exact: false,
-    component: Wallets,
-  },
-  {
-    name: `NetworkSetting`,
-    path: Routes.SettingsNetworks,
-    exact: true,
-    component: NetworkSetting,
-  },
-]
-
-const Settings = () => {
-  const globalState = useGloablState()
-  const dispatch = useDispatch()
-  const history = useHistory()
-  const location = useLocation()
-  const [t] = useTranslation()
-
-  return (
-    <Stack tokens={{ childrenGap: 15, padding: '39px 0 0 0' }}>
-      <Pivot
-        selectedKey={location.pathname}
-        onLinkClick={(pivotItem?: PivotItem) => {
-          if (pivotItem && pivotItem.props && pivotItem.props.itemKey) {
-            history.replace(pivotItem.props.itemKey)
-          }
-        }}
-        headersOnly
-      >
-        {pivotItems.map(pivotItem => (
-          <PivotItem key={pivotItem.url} headerText={t(pivotItem.label)} itemKey={pivotItem.url} />
-        ))}
-      </Pivot>
-
-      {settingPanels.map(container => (
-        <Route
-          exact={container.exact}
-          path={`${container.path}${container.params || ''}`}
-          key={container.name}
-          render={() => <container.component {...globalState} dispatch={dispatch} />}
-        />
-      ))}
-    </Stack>
-  )
-}
-
-Settings.displayName = 'Settings'
-
-export default Settings
diff --git a/packages/neuron-ui/src/components/SignAndVerify/index.tsx b/packages/neuron-ui/src/components/SignAndVerify/index.tsx
index 5b72ac1f7a..f844f589d3 100644
--- a/packages/neuron-ui/src/components/SignAndVerify/index.tsx
+++ b/packages/neuron-ui/src/components/SignAndVerify/index.tsx
@@ -3,15 +3,13 @@ import { useTranslation } from 'react-i18next'
 import { showErrorMessage, signMessage, verifyMessage, getAddressesByWalletID } from 'services/remote'
 import Button from 'widgets/Button'
 import DownArrow from 'widgets/Icons/DownArrow.png'
-import { useExitOnWalletChange } from 'utils/hooks'
-import { shannonToCKBFormatter } from 'utils/formatters'
+import { ErrorCode, shannonToCKBFormatter, useExitOnWalletChange, isSuccessResponse, useOnLocaleChange } from 'utils'
 import Balance from 'widgets/Balance'
 import TextField from 'widgets/TextField'
 import VerificationSuccessIcon from 'widgets/Icons/VerificationSuccess.png'
 import VerificationFailureIcon from 'widgets/Icons/VerificationFailure.png'
 import Spinner from 'widgets/Spinner'
 
-import { ErrorCode } from 'utils/const'
 import { ControllerResponse } from 'services/remote/remoteApiWrapper'
 import styles from './signAndVerify.module.scss'
 
@@ -24,10 +22,12 @@ const PasswordRequest = ({
   onSubmit: (pwd: string) => Promise<void>
   error: string
 }) => {
-  const [t] = useTranslation()
+  const [t, i18n] = useTranslation()
   const [password, setPassword] = useState('')
   const [loading, setLoading] = useState(false)
 
+  useOnLocaleChange(i18n)
+
   const onChange = useCallback(
     e => {
       setPassword(e.target.value)
@@ -106,7 +106,7 @@ const AddressNotFound = ({ onDismiss }: { onDismiss: () => void }) => {
 }
 
 const SignAndVerify = () => {
-  const [t] = useTranslation()
+  const [t, i18n] = useTranslation()
   const [status, setStatus] = useState<
     'edit' | 'request-password' | 'verify-success' | 'verify-failure' | 'address-not-found'
   >('edit')
@@ -116,10 +116,16 @@ const SignAndVerify = () => {
   const [address, setAddress] = useState('')
   const [pwdErr, setPwdErr] = useState('')
 
+  useOnLocaleChange(i18n)
+  useEffect(() => {
+    window.document.title = i18n.t(`sign-and-verify.window-title`)
+    // eslint-disable-next-line
+  }, [i18n.language])
+
   useEffect(() => {
     const id = window.location.href.split('/').pop()
     getAddressesByWalletID(id || '').then(res => {
-      if (res.status === 1) {
+      if (isSuccessResponse(res)) {
         setWallet({
           id: id!,
           addresses: res.result,
@@ -206,7 +212,7 @@ const SignAndVerify = () => {
         message,
         password,
       })
-      if (res.status === 1) {
+      if (isSuccessResponse(res)) {
         setSignature(res.result)
         setStatus('edit')
       } else if (res.status === ErrorCode.PasswordIncorrect) {
@@ -236,7 +242,7 @@ const SignAndVerify = () => {
           <div role="presentation" className={styles.addrList} onClick={onAddrSelected}>
             {wallet.addresses.map(addr => (
               <div key={addr.address} className={styles.addrOpt} data-addr={addr.address}>
-                <span className="monospacedFont">{addr.address}</span>
+                <span>{addr.address}</span>
                 <Balance balance={shannonToCKBFormatter(addr.balance)} />
                 <span className={styles.addrType} data-type={addr.type}>
                   {addr.type === 0 ? t('addresses.receiving-address') : t('addresses.change-address')}
diff --git a/packages/neuron-ui/src/components/SignAndVerify/signAndVerify.module.scss b/packages/neuron-ui/src/components/SignAndVerify/signAndVerify.module.scss
index f0e9334deb..0299386093 100644
--- a/packages/neuron-ui/src/components/SignAndVerify/signAndVerify.module.scss
+++ b/packages/neuron-ui/src/components/SignAndVerify/signAndVerify.module.scss
@@ -3,18 +3,25 @@ $inputHeight: 26px;
 
 .container {
   .title {
-    @include BoldText;
+    @include bold-text;
+    font-size: 1.375rem;
+    line-height: 1.75rem;
+    margin: 0 0 5px;
+    padding: 0;
   }
 
   .label {
-    @include MediumText;
-    margin: 0 0 4px 0;
+    @include medium-text;
     padding: 0;
+    margin: 0;
+    font-size: 1rem;
+    line-height: 44px;
+    font-weight: 600;
   }
 
   input,
   textarea {
-    @include RegularText;
+    @include regular-text;
     font-size: 12px !important;
     display: block;
     resize: unset;
@@ -35,7 +42,7 @@ $inputHeight: 26px;
 }
 
 .actions {
-  @include dialogFooter;
+  @include dialog-footer;
   margin-top: 35px;
 
   button {
@@ -66,7 +73,7 @@ $inputHeight: 26px;
   }
 
   .addrList {
-    @include SemiBoldText;
+    @include semi-bold-text;
     box-shadow: 1px 2px 4px 0 rgba(0, 0, 0, 0.23);
     background-color: #ffffff;
     overflow: auto;
@@ -94,37 +101,35 @@ $inputHeight: 26px;
         font-size: inherit;
       }
 
-      &>span:nth-child(2) {
-        @include SemiBoldText;
+      & > span:nth-child(2) {
+        @include semi-bold-text;
         padding: 0px 5px;
         flex: 1;
 
         &:before {
-          content: '('
+          content: '(';
         }
 
         &:after {
-          content: ')'
+          content: ')';
         }
       }
 
       .addrType {
-        @include RegularText;
+        @include regular-text;
         color: var(--nervos-green);
         display: block;
         width: 65px;
         text-align: left;
 
-        &[data-type="1"] {
+        &[data-type='1'] {
           color: #6666cc;
         }
       }
 
-
       &:hover {
         background-color: #f5f5f5;
       }
-
     }
   }
 
@@ -152,7 +157,7 @@ $inputHeight: 26px;
   height: 100vh;
 
   .dialog {
-    @include dialogContainer;
+    @include dialog-container;
     padding: 57px 73px;
     background-color: #fff;
     min-width: auto;
@@ -163,7 +168,7 @@ $inputHeight: 26px;
   width: 400px;
 
   h2 {
-    @include BoldText;
+    @include bold-text;
     font-size: 18px;
     font-weight: bold;
     letter-spacing: 0.9px;
@@ -175,7 +180,7 @@ $inputHeight: 26px;
   }
 
   .actions {
-    @include dialogFooter;
+    @include dialog-footer;
   }
 }
 
@@ -187,7 +192,7 @@ $inputHeight: 26px;
     margin-bottom: 15px;
   }
 
-  @include SemiBoldText;
+  @include semi-bold-text;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -197,7 +202,7 @@ $inputHeight: 26px;
 }
 
 .addressNotFound {
-  @include MediumText;
+  @include medium-text;
   font-size: 0.875rem;
   letter-spacing: 0.7px;
 
diff --git a/packages/neuron-ui/src/components/SpecialAsset/index.tsx b/packages/neuron-ui/src/components/SpecialAsset/index.tsx
index c1876f71e2..ee86e389a2 100644
--- a/packages/neuron-ui/src/components/SpecialAsset/index.tsx
+++ b/packages/neuron-ui/src/components/SpecialAsset/index.tsx
@@ -1,11 +1,9 @@
 import React, { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from 'widgets/Button'
-import Balance from 'widgets/Balance'
+import CopyZone from 'widgets/CopyZone'
 import { openExternal } from 'services/remote'
-import { uniformTimeFormatter, shannonToCKBFormatter } from 'utils/formatters'
-import getExplorerUrl from 'utils/getExplorerUrl'
-import { ConnectionStatus } from 'utils/const'
+import { ConnectionStatus, uniformTimeFormatter, shannonToCKBFormatter, getExplorerUrl } from 'utils'
 import styles from './specialAsset.module.scss'
 
 const MS_PER_EPOCHS = 4 * 60 * 60 * 1000
@@ -55,15 +53,15 @@ const SpecialAsset = ({
     openExternal(`${explorerUrl}/transaction/${txHash}#${index}`)
   }, [isMainnet, txHash, index])
 
+  const balance = shannonToCKBFormatter(capacity)
+
   return (
     <div className={styles.container}>
       <div className={styles.datetime}>
         <span>{date}</span>
         <span>{time}</span>
       </div>
-      <div className={styles.capacity}>
-        <Balance balance={shannonToCKBFormatter(capacity)} />
-      </div>
+      <CopyZone className={styles.capacity} content={balance.replace(/,/g, '')}>{`${balance} CKB`}</CopyZone>
       <div className={styles.indicators}>
         <div data-on={hasTypeScript} data-tooltip="Type">
           T
diff --git a/packages/neuron-ui/src/components/SpecialAsset/specialAsset.module.scss b/packages/neuron-ui/src/components/SpecialAsset/specialAsset.module.scss
index edeb1f40a4..8f0f34db70 100644
--- a/packages/neuron-ui/src/components/SpecialAsset/specialAsset.module.scss
+++ b/packages/neuron-ui/src/components/SpecialAsset/specialAsset.module.scss
@@ -1,3 +1,5 @@
+@import '../../styles/mixin.scss';
+
 @mixin tooltip {
   &:before {
     position: absolute;
@@ -42,7 +44,8 @@
 .container {
   display: grid;
   grid-template:
-    'datetime capacity indicators actions'1fr / 120px 1fr 50px 300px;
+    'datetime capacity indicators actions' 1fr /
+    120px minmax(100px, 1fr) 50px 300px;
   grid-column-gap: 15px;
   box-sizing: border-box;
   border-bottom: 1px solid #b3b3b3;
@@ -69,12 +72,7 @@
 
 .capacity {
   grid-area: capacity;
-  overflow: hidden;
-
-  &>span {
-    transform: scale(0.875);
-    transform-origin: left center;
-  }
+  @include text-overflow-ellipsis;
 }
 
 .indicators {
diff --git a/packages/neuron-ui/src/components/SpecialAssetList/index.tsx b/packages/neuron-ui/src/components/SpecialAssetList/index.tsx
index e7ac07d83b..7dff46f48e 100644
--- a/packages/neuron-ui/src/components/SpecialAssetList/index.tsx
+++ b/packages/neuron-ui/src/components/SpecialAssetList/index.tsx
@@ -4,22 +4,30 @@ import { useHistory, useLocation } from 'react-router-dom'
 import { Pagination } from '@uifabric/experiments'
 import ExperimentalIcon from 'widgets/Icons/Experimental.png'
 import { unlockSpecialAsset, getSpecialAssets } from 'services/remote'
-import { PAGE_SIZE, Routes, PRESET_SCRIPT, MEDIUM_FEE_RATE } from 'utils/const'
-import { useState as useGlobalState, useDispatch } from 'states/stateProvider'
+import {
+  CONSTANTS,
+  RoutePath,
+  PresetScript,
+  isMainnet as isMainnetUtil,
+  isSuccessResponse,
+  queryParsers,
+  epochParser,
+} from 'utils'
+import { useState as useGlobalState, useDispatch } from 'states'
 import { AppActions } from 'states/stateProvider/reducer'
 import SpecialAsset, { SpecialAssetProps } from 'components/SpecialAsset'
-import isMainnetUtil from 'utils/isMainnet'
-import { queryParsers, epochParser } from 'utils/parsers'
 import { ckbCore } from 'services/chain'
 import styles from './specialAssetList.module.scss'
 
+const { PAGE_SIZE, MEDIUM_FEE_RATE } = CONSTANTS
+
 export interface SpecialAssetCell {
   blockHash: string
   blockNumber: string
   capacity: string
   customizedAssetInfo: {
     data: string
-    lock: PRESET_SCRIPT.Locktime | string
+    lock: PresetScript.Locktime | string
     type: string
   }
   daoData: string | null
@@ -73,7 +81,7 @@ const SpecialAssetList = () => {
         pageSize: PAGE_SIZE,
       })
         .then(res => {
-          if (res.status === 1) {
+          if (isSuccessResponse(res)) {
             const { items, totalCount: count } = res.result as { items: SpecialAssetCell[]; totalCount: string }
             setCells(items.sort((i1, i2) => +i2.timestamp - +i1.timestamp))
             setTotalCount(+count)
@@ -129,7 +137,7 @@ const SpecialAssetList = () => {
           feeRate: `${MEDIUM_FEE_RATE}`,
           customizedAssetInfo: cell.customizedAssetInfo,
         }).then(res => {
-          if (res.status === 1) {
+          if (isSuccessResponse(res)) {
             dispatch({
               type: AppActions.UpdateGeneratedTx,
               payload: res.result,
@@ -161,7 +169,7 @@ const SpecialAssetList = () => {
     return cells.map(cell => {
       let status: SpecialAssetProps['status'] = 'user-defined-asset'
       let epochInfo: { target: number; current: number } | undefined
-      if (cell.customizedAssetInfo.lock === PRESET_SCRIPT.Locktime) {
+      if (cell.customizedAssetInfo.lock === PresetScript.Locktime) {
         const targetEpochInfo = epochParser(ckbCore.utils.toHexInLittleEndian(`0x${cell.lock.args.slice(-16)}`))
         const currentEpochInfo = epochParser(epoch)
         const targetEpochFraction =
@@ -232,7 +240,7 @@ const SpecialAssetList = () => {
             lastPageIconProps={{ iconName: 'LastPage' }}
             format="buttons"
             onPageChange={(idx: number) => {
-              history.push(`${Routes.SpecialAssets}?pageNo=${idx + 1}`)
+              history.push(`${RoutePath.SpecialAssets}?pageNo=${idx + 1}`)
             }}
           />
         ) : null}
diff --git a/packages/neuron-ui/src/components/SpecialAssetList/specialAssetList.module.scss b/packages/neuron-ui/src/components/SpecialAssetList/specialAssetList.module.scss
index 1dd1f54f69..d57cf973eb 100644
--- a/packages/neuron-ui/src/components/SpecialAssetList/specialAssetList.module.scss
+++ b/packages/neuron-ui/src/components/SpecialAssetList/specialAssetList.module.scss
@@ -1,7 +1,6 @@
 @import '../../styles/mixin.scss';
 
 .container {
-
   .experimental {
     padding: 3px 0 19px;
     margin-right: -30px;
@@ -32,7 +31,7 @@
     padding: 2px 15px 48px;
 
     .listHeader {
-      @include SemiBoldText;
+      @include semi-bold-text;
       display: flex;
       justify-content: flex-start;
       align-items: center;
@@ -41,10 +40,9 @@
       letter-spacing: 0.7px;
       border-bottom: 1px solid #b3b3b3;
 
-      &>span {
+      & > span {
         flex-basis: 135px;
       }
-
     }
   }
 
@@ -53,11 +51,11 @@
     display: flex;
     flex: 1;
     flex-direction: column;
-    justify-content: flex-end
+    justify-content: flex-end;
   }
 }
 
 .noItems {
-  @include MediumText;
+  @include medium-text;
   padding: 20px 13px;
 }
diff --git a/packages/neuron-ui/src/components/SyncStatus/index.tsx b/packages/neuron-ui/src/components/SyncStatus/index.tsx
index d8b9bc803f..8cb05d00ea 100644
--- a/packages/neuron-ui/src/components/SyncStatus/index.tsx
+++ b/packages/neuron-ui/src/components/SyncStatus/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { useTranslation } from 'react-i18next'
-import { SyncStatus as SyncStatusEnum, ConnectionStatus } from 'utils/const'
+import { SyncStatus as SyncStatusEnum, ConnectionStatus } from 'utils'
 
 const SyncStatus = ({
   syncStatus,
diff --git a/packages/neuron-ui/src/components/Transaction/index.tsx b/packages/neuron-ui/src/components/Transaction/index.tsx
index 1ded08b350..865a782f2e 100644
--- a/packages/neuron-ui/src/components/Transaction/index.tsx
+++ b/packages/neuron-ui/src/components/Transaction/index.tsx
@@ -12,33 +12,49 @@ import {
 } from 'services/remote'
 import { ckbCore } from 'services/chain'
 
-import { transactionState } from 'states/initStates/chain'
+import { transactionState } from 'states/init/chain'
+import {
+  useOnLocaleChange,
+  ErrorCode,
+  CONSTANTS,
+  localNumberFormatter,
+  uniformTimeFormatter,
+  shannonToCKBFormatter,
+  useExitOnWalletChange,
+  isSuccessResponse,
+} from 'utils'
+import CopyZone from 'widgets/CopyZone'
 
-import { localNumberFormatter, uniformTimeFormatter, shannonToCKBFormatter } from 'utils/formatters'
-import { ErrorCode, MAINNET_TAG } from 'utils/const'
-import { useOnDefaultContextMenu, useExitOnWalletChange } from 'utils/hooks'
 import styles from './transaction.module.scss'
 
+const { MAINNET_TAG } = CONSTANTS
+
 const Transaction = () => {
-  const [t] = useTranslation()
+  const [t, i18n] = useTranslation()
   const [systemCodeHash, setSystemCodeHash] = useState<string>('')
   const [transaction, setTransaction] = useState(transactionState)
   const [isMainnet, setIsMainnet] = useState(false)
   const [error, setError] = useState({ code: '', message: '' })
 
   const addressPrefix = isMainnet ? ckbCore.utils.AddressPrefix.Mainnet : ckbCore.utils.AddressPrefix.Testnet
+  const hash = useMemo(() => window.location.href.split('/').pop(), [])
 
-  const onContextMenu = useOnDefaultContextMenu(t)
+  useOnLocaleChange(i18n)
+
+  useEffect(() => {
+    window.document.title = i18n.t(`transaction.window-title`, { hash })
+    // eslint-disable-next-line
+  }, [i18n.language, hash])
 
   useEffect(() => {
     getSystemCodeHash().then(res => {
-      if (res.status === 1) {
+      if (isSuccessResponse(res)) {
         setSystemCodeHash(res.result)
       }
     })
     Promise.all([getAllNetworks(), getCurrentNetworkID()])
       .then(([networksRes, idRes]) => {
-        if (networksRes.status === 1 && idRes.status === 1) {
+        if (isSuccessResponse(networksRes) && isSuccessResponse(idRes)) {
           const network = networksRes.result.find((n: any) => n.id === idRes.result)
           if (!network) {
             throw new Error('Cannot find current network in the network list')
@@ -51,7 +67,6 @@ const Transaction = () => {
 
     const currentWallet = currentWalletCache.load()
     if (currentWallet) {
-      const hash = window.location.href.split('/').pop()
       if (!hash) {
         showErrorMessage(
           t(`messages.error`),
@@ -61,7 +76,7 @@ const Transaction = () => {
       }
       getTransaction({ hash, walletID: currentWallet.id })
         .then(res => {
-          if (res.status === 1) {
+          if (isSuccessResponse(res)) {
             setTransaction(res.result)
           } else {
             showErrorMessage(
@@ -78,7 +93,7 @@ const Transaction = () => {
           })
         })
     }
-  }, [t])
+  }, [t, hash])
 
   useExitOnWalletChange()
 
@@ -87,9 +102,19 @@ const Transaction = () => {
     openExternal(`${explorerUrl}/transaction/${transaction.hash}`)
   }, [transaction.hash, isMainnet])
 
-  const basicInfoItems = useMemo(
-    () => [
-      { label: t('transaction.transaction-hash'), value: transaction.hash || 'none' },
+  const basicInfoItems = useMemo(() => {
+    const balance = shannonToCKBFormatter(transaction.value)
+
+    return [
+      {
+        label: t('transaction.transaction-hash'),
+        value:
+          (
+            <CopyZone content={transaction.hash} name={t('history.copy-tx-hash')}>
+              {transaction.hash}
+            </CopyZone>
+          ) || 'none',
+      },
       {
         label: t('transaction.block-number'),
         value: transaction.blockNumber ? localNumberFormatter(transaction.blockNumber) : 'none',
@@ -102,11 +127,14 @@ const Transaction = () => {
       },
       {
         label: t('transaction.income'),
-        value: `${shannonToCKBFormatter(transaction.value)} CKB`,
+        value: (
+          <CopyZone content={balance.replace(/,/g, '')} name={t('history.copy-balance')}>
+            {`${balance} CKB`}
+          </CopyZone>
+        ),
       },
-    ],
-    [t, transaction]
-  )
+    ]
+  }, [t, transaction])
 
   const inputsTitle = useMemo(
     () => `${t('transaction.inputs')} (${transaction.inputs.length}/${localNumberFormatter(transaction.inputsCount)})`,
@@ -148,14 +176,21 @@ const Transaction = () => {
             console.error(err)
           }
         }
+        const capacity = shannonToCKBFormatter(cell.capacity || '0')
 
         return (
           <tr key={cell.lockHash || ''} data-address={address}>
             <td title={`${index}`}>{index}</td>
-            <td title={address} className={`monospacedFont ${styles.addressCell}`}>
-              {address}
+            <td title={address} className={styles.addressCell}>
+              <CopyZone content={address} name={t('history.copy-address')}>
+                {address}
+              </CopyZone>
+            </td>
+            <td>
+              <CopyZone content={capacity.replace(/,/g, '')} name={t('history.copy-balance')}>
+                {`${capacity} CKB`}
+              </CopyZone>
             </td>
-            <td>{`${shannonToCKBFormatter(cell.capacity || '0')} CKB`}</td>
           </tr>
         )
       }),
@@ -171,7 +206,7 @@ const Transaction = () => {
   }
 
   return (
-    <div className={styles.container} onContextMenu={onContextMenu}>
+    <div className={styles.container}>
       <h2
         className={styles.infoTitle}
         title={t('history.basic-information')}
@@ -180,10 +215,10 @@ const Transaction = () => {
         {t('history.basic-information')}
       </h2>
       <div className={styles.infoDetail}>
-        {basicInfoItems.map(({ label, value }, idx) => (
+        {basicInfoItems.map(({ label, value }) => (
           <div key={label}>
             <span>{label}</span>
-            <span className={!idx ? 'monospacedFont' : ''}>{value}</span>
+            <span>{value}</span>
           </div>
         ))}
       </div>
diff --git a/packages/neuron-ui/src/components/Transaction/transaction.module.scss b/packages/neuron-ui/src/components/Transaction/transaction.module.scss
index 73ff9b4eb0..822f71bea1 100644
--- a/packages/neuron-ui/src/components/Transaction/transaction.module.scss
+++ b/packages/neuron-ui/src/components/Transaction/transaction.module.scss
@@ -3,7 +3,13 @@
 .container {
   display: grid;
   grid-template:
-    'info-title'auto 'info-detail'auto 'inputs-title'auto 'inputs'auto 'outputs-title'auto 'outputs'auto / 1fr;
+    'info-title' auto
+    'info-detail' auto
+    'inputs-title' auto
+    'inputs' auto
+    'outputs-title' auto
+    'outputs' auto /
+    1fr;
   grid-row-gap: 15px;
 
   table {
@@ -19,7 +25,7 @@
   }
 
   th {
-    @include BoldText;
+    @include bold-text;
     height: 2.625rem;
     text-align: left;
   }
@@ -28,8 +34,11 @@
     height: 1.75rem;
     word-wrap: none;
     word-break: keep-all;
-    text-overflow: ellipsis;
-    overflow: hidden;
+    & > div {
+      text-overflow: ellipsis;
+      overflow: hidden;
+      width: 100%;
+    }
   }
 
   span,
@@ -57,14 +66,12 @@
     max-width: calc(90vw - 416px);
     padding-right: 15px;
   }
-
-
 }
 
 .infoTitle,
 .inputsTitle,
 .outputsTitle {
-  @include BoldText;
+  @include bold-text;
   line-height: 1.125rem;
   font-size: 1.125rem;
   letter-spacing: 0.9px;
@@ -82,10 +89,9 @@
   grid-area: info-detail;
   margin-bottom: 21px;
 
-  &>div {
+  & > div {
     display: flex;
     justify-content: space-between;
-    pointer-events: none;
     margin-bottom: 17px;
 
     &:last-of-type {
diff --git a/packages/neuron-ui/src/components/TransactionFeePanel/index.tsx b/packages/neuron-ui/src/components/TransactionFeePanel/index.tsx
index 3dd9e2c8bf..30605c63fc 100644
--- a/packages/neuron-ui/src/components/TransactionFeePanel/index.tsx
+++ b/packages/neuron-ui/src/components/TransactionFeePanel/index.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react'
-import { Stack, Dropdown, Toggle, Icon, IDropdownOption } from 'office-ui-fabric-react'
+import { Stack, Toggle, IDropdownOption } from 'office-ui-fabric-react'
+import Dropdown from 'widgets/Dropdown'
 import TextField from 'widgets/TextField'
 import { useTranslation } from 'react-i18next'
-import { Price } from 'utils/const'
-import { localNumberFormatter } from 'utils/formatters'
+import { Price, localNumberFormatter } from 'utils'
 
 interface TransactionFee {
   fee: string
@@ -11,25 +11,10 @@ interface TransactionFee {
   onPriceChange: any
 }
 
-const calculateSpeed = (price: number) => {
-  if (price >= 16000) {
-    return Price.Immediately
-  }
-  if (price >= 4000) {
-    return Price.TenBlocks
-  }
-  if (price >= 2000) {
-    return Price.HundredBlocks
-  }
-  return Price.FiveHundredsBlocks
-}
-
 const TransactionFee: React.FunctionComponent<TransactionFee> = ({ price, fee, onPriceChange }: TransactionFee) => {
   const [t] = useTranslation()
   const [showDetail, setShowDetail] = useState(false)
 
-  const selectedSpeed = calculateSpeed(+price)
-
   return (
     <Stack tokens={{ childrenGap: 15 }} aria-label="transaction fee">
       <Stack tokens={{ childrenGap: 15 }}>
@@ -71,17 +56,14 @@ const TransactionFee: React.FunctionComponent<TransactionFee> = ({ price, fee, o
         />
 
         <Dropdown
-          label={t('send.expected-speed')}
-          selectedKey={selectedSpeed}
+          label={t('send.pick-price')}
+          selectedKey={price}
           options={[
-            { key: Price.Immediately, text: 'immediately' },
-            { key: Price.TenBlocks, text: '~ 10 blocks' },
-            { key: Price.HundredBlocks, text: '~ 100 blocks' },
-            { key: Price.FiveHundredsBlocks, text: '~ 500 blocks' },
+            { key: Price.High, text: Price.High },
+            { key: Price.Medium, text: Price.Medium },
+            { key: Price.Low, text: Price.Low },
+            { key: Price.Zero, text: Price.Zero },
           ]}
-          onRenderCaretDown={() => {
-            return <Icon iconName="ArrowDown" />
-          }}
           onChange={(e: any, item?: IDropdownOption) => {
             if (item) {
               e.target.value = item.key
@@ -89,37 +71,6 @@ const TransactionFee: React.FunctionComponent<TransactionFee> = ({ price, fee, o
             }
           }}
           aria-label="expected speed"
-          styles={{
-            label: {
-              fontSize: '0.75rem',
-              fontWeight: 500,
-            },
-
-            title: {
-              fontSize: '0.75rem!important',
-              fontWeight: 500,
-              height: '1.625rem',
-              lineHeight: '1.625rem',
-            },
-            dropdownOptionText: {
-              fontSize: '0.75rem!important',
-              boxShadow: 'border-box',
-            },
-            dropdownItem: {
-              fontSize: '0.75rem!important',
-              boxShadow: 'border-box',
-              minHeight: 'auto',
-            },
-            dropdownItemSelected: {
-              fontSize: '0.75rem!important',
-              minHeight: 'auto',
-              backgroundColor: '#e3e3e3',
-            },
-            root: {
-              fontSize: '0.75rem',
-              marginBottom: '10px',
-            },
-          }}
         />
       </Stack>
     </Stack>
diff --git a/packages/neuron-ui/src/components/TransactionList/index.tsx b/packages/neuron-ui/src/components/TransactionList/index.tsx
index c367ad17df..ffb7ef126b 100644
--- a/packages/neuron-ui/src/components/TransactionList/index.tsx
+++ b/packages/neuron-ui/src/components/TransactionList/index.tsx
@@ -1,30 +1,34 @@
 import React, { useCallback, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import TextField from 'widgets/TextField'
+import CopyZone from 'widgets/CopyZone'
 
 import { StateDispatch } from 'states/stateProvider/reducer'
 import { showTransactionDetails, openContextMenu, openExternal } from 'services/remote'
 
-import { useLocalDescription } from 'utils/hooks'
-import { shannonToCKBFormatter, uniformTimeFormatter as timeFormatter, localNumberFormatter } from 'utils/formatters'
-import getExplorerUrl from 'utils/getExplorerUrl'
-import { CONFIRMATION_THRESHOLD } from 'utils/const'
+import {
+  CONSTANTS,
+  shannonToCKBFormatter,
+  uniformTimeFormatter as timeFormatter,
+  localNumberFormatter,
+  getExplorerUrl,
+  useLocalDescription,
+} from 'utils'
+
 import styles from './transactionList.module.scss'
 
-const TransactionList = ({
-  items: txs,
-  tipBlockNumber,
-  walletID,
-  isMainnet,
-  dispatch,
-}: {
+const { CONFIRMATION_THRESHOLD } = CONSTANTS
+
+interface TransactionListProps {
   isLoading?: boolean
   walletID: string
   items: State.Transaction[]
   tipBlockNumber: string
   isMainnet: boolean
   dispatch: StateDispatch
-}) => {
+}
+
+const TransactionList = ({ items: txs, tipBlockNumber, walletID, isMainnet, dispatch }: TransactionListProps) => {
   const [txHash, setTxHash] = useState('')
   const [t] = useTranslation()
 
@@ -121,9 +125,9 @@ const TransactionList = ({
               onKeyPress={() => {}}
             >
               <time title={tx.timestamp}>{timeFormatter(tx.timestamp)}</time>
-              <span className={styles.amount} title={`${tx.value} shannons`}>
+              <CopyZone className={styles.amount} content={shannonToCKBFormatter(tx.value).replace(/,/g, '')}>
                 {`${shannonToCKBFormatter(tx.value, true)} CKB`}
-              </span>
+              </CopyZone>
               <span className={styles.status} title={statusLabel}>
                 {statusLabel}
               </span>
@@ -140,11 +144,11 @@ const TransactionList = ({
               </div>
               <div title={tx.hash} className={styles.txHash}>
                 <span>{t('history.transaction-hash')}</span>
-                <div className="monospacedFont">
+                <CopyZone content={tx.hash} name={t('history.copy-tx-hash')}>
                   <span className={styles.hashOverflow}>{tx.hash.slice(0, -6)}</span>
                   <span className={styles.ellipsis}>...</span>
                   <span>{tx.hash.slice(-6)}</span>
-                </div>
+                </CopyZone>
               </div>
               <div title={tx.description} className={styles.description}>
                 <span>{t('history.description')}</span>
diff --git a/packages/neuron-ui/src/components/TransactionList/transactionList.module.scss b/packages/neuron-ui/src/components/TransactionList/transactionList.module.scss
index ef2e0f2d33..e3a090dddc 100644
--- a/packages/neuron-ui/src/components/TransactionList/transactionList.module.scss
+++ b/packages/neuron-ui/src/components/TransactionList/transactionList.module.scss
@@ -5,7 +5,7 @@ $failed-color: #d50000;
 $pending-color: #b3b3b3;
 
 .itemContainer {
-  @include RegularText;
+  @include regular-text;
   font-size: 0.875rem;
   letter-spacing: 0.7px;
   background-color: #fff;
@@ -18,11 +18,10 @@ $pending-color: #b3b3b3;
   }
 
   .summary {
-    @include MediumText;
+    @include medium-text;
     position: relative;
     display: grid;
-    grid-template:
-      'time status'auto 'amount confirmations'auto/ 1fr 130px;
+    grid-template: 'time status' auto 'amount confirmations' auto/ 1fr 130px;
     justify-items: start;
     grid-gap: 3px;
     padding: 15px 0 15px 33px;
@@ -42,7 +41,9 @@ $pending-color: #b3b3b3;
     }
 
     .amount {
+      @include text-overflow-ellipsis;
       grid-area: amount;
+      width: 90%;
       color: var(--nervos-green);
     }
 
@@ -88,7 +89,6 @@ $pending-color: #b3b3b3;
     }
 
     &[data-status='success']:after {
-
       background-color: $success-color;
     }
 
@@ -97,30 +97,30 @@ $pending-color: #b3b3b3;
     }
   }
 
-
   .detail {
     padding: 0 33px;
     display: none;
     color: #434343;
 
-    &>div {
+    & > div {
       display: flex;
       justify-content: space-between;
       margin-bottom: 15px;
+      line-height: 1.625rem;
 
-      &>span:first-of-type {
-        @include MediumText;
+      & > span:first-of-type {
+        @include medium-text;
       }
     }
 
     .txHash {
-      &>div {
+      & > div {
         display: flex;
 
         .hashOverflow {
           word-break: break-all;
           text-align: right;
-          height: 1rem;
+          height: 1.625rem;
           overflow: hidden;
           text-align: right;
         }
@@ -135,7 +135,7 @@ $pending-color: #b3b3b3;
           }
 
           .ellipsis {
-            display: inline
+            display: inline;
           }
         }
 
@@ -154,9 +154,9 @@ $pending-color: #b3b3b3;
     }
 
     .descriptionField {
-      @include descriptionField;
+      @include description-field;
 
-      &>div {
+      & > div {
         border-top: none !important;
         border-left: none !important;
         border-right: none !important;
@@ -176,7 +176,7 @@ $pending-color: #b3b3b3;
     }
   }
 
-  &[data-is-open="true"] {
+  &[data-is-open='true'] {
     .summary:before {
       transform: translateY(-50%) rotate(90deg);
     }
diff --git a/packages/neuron-ui/src/components/WalletEditor/hooks.ts b/packages/neuron-ui/src/components/WalletEditor/hooks.ts
index 0eae4cf8e8..7cdf103e46 100644
--- a/packages/neuron-ui/src/components/WalletEditor/hooks.ts
+++ b/packages/neuron-ui/src/components/WalletEditor/hooks.ts
@@ -1,10 +1,11 @@
 import { useState, useMemo, useCallback } from 'react'
 import { useHistory } from 'react-router-dom'
-import { updateWalletProperty } from 'states/stateProvider/actionCreators'
-import { StateDispatch } from 'states/stateProvider/reducer'
-import { ErrorCode, MAX_WALLET_NAME_LENGTH } from 'utils/const'
+import { StateDispatch, updateWalletProperty } from 'states'
+import { ErrorCode, ResponseCode, RoutePath, CONSTANTS } from 'utils'
 import i18n from 'utils/i18n'
 
+const { MAX_WALLET_NAME_LENGTH } = CONSTANTS
+
 export const useWalletEditor = () => {
   const [name, setName] = useState('')
   const initialize = useCallback(
@@ -55,7 +56,11 @@ export const useOnSubmit = (
       updateWalletProperty({
         id,
         name,
-      })(dispatch, history)
+      })(dispatch).then(status => {
+        if (status === ResponseCode.SUCCESS) {
+          history.push(RoutePath.SettingsWallets)
+        }
+      })
     },
     [name, id, history, dispatch, disabled]
   )
diff --git a/packages/neuron-ui/src/components/WalletEditor/index.tsx b/packages/neuron-ui/src/components/WalletEditor/index.tsx
index 8de7adf1c4..269aaa616d 100644
--- a/packages/neuron-ui/src/components/WalletEditor/index.tsx
+++ b/packages/neuron-ui/src/components/WalletEditor/index.tsx
@@ -5,11 +5,10 @@ import { Stack } from 'office-ui-fabric-react'
 import TextField from 'widgets/TextField'
 import Button from 'widgets/Button'
 
-import { useState as useGlobalState, useDispatch } from 'states/stateProvider'
+import { useState as useGlobalState, useDispatch } from 'states'
 
-import { Routes, ErrorCode } from 'utils/const'
+import { RoutePath, ErrorCode, useGoBack } from 'utils'
 
-import { useGoBack } from 'utils/hooks'
 import { useHint, useOnSubmit, useInputs, useWalletEditor } from './hooks'
 
 const WalletNotFound = () => {
@@ -17,8 +16,8 @@ const WalletNotFound = () => {
   return (
     <div>
       <p>{t(`messages.codes.${ErrorCode.FieldNotFound}`, { fieldName: 'wallet' })}</p>
-      <Link to={Routes.SettingsWallets} className="btn btn-primary">
-        {`${t('navbar.settings')}-${t('settings.setting-tabs.wallets')}`}
+      <Link to={RoutePath.SettingsWallets} className="btn btn-primary">
+        {`${t('settings.title')}-${t('settings.setting-tabs.wallets')}`}
       </Link>
     </div>
   )
@@ -36,7 +35,7 @@ const WalletEditor = () => {
   } = useRouteMatch()
 
   const wallet = useMemo(() => wallets.find(w => w.id === id), [id, wallets]) || { id: '', name: '' }
-  const usedNames = wallets.map(w => w.name).filter(n => n !== wallet.name)
+  const usedNames = wallets.map(w => w.name).filter(w => w !== wallet.name)
 
   const editor = useWalletEditor()
   const { initialize } = editor
diff --git a/packages/neuron-ui/src/components/WalletSetting/index.tsx b/packages/neuron-ui/src/components/WalletSetting/index.tsx
index 067040258e..3f80f636e5 100644
--- a/packages/neuron-ui/src/components/WalletSetting/index.tsx
+++ b/packages/neuron-ui/src/components/WalletSetting/index.tsx
@@ -2,33 +2,40 @@ import React, { useEffect, useCallback } from 'react'
 import { useHistory } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { ChoiceGroup, IChoiceGroupOption } from 'office-ui-fabric-react'
-import Button from 'widgets/Button'
-
-import { StateDispatch } from 'states/stateProvider/reducer'
-import { setCurrentWallet } from 'states/stateProvider/actionCreators'
 
 import { WalletWizardPath } from 'components/WalletWizard'
+import Button from 'widgets/Button'
+import { ReactComponent as EditWallet } from 'widgets/Icons/Edit.svg'
+import { ReactComponent as BackupWallet } from 'widgets/Icons/BackupWallet.svg'
+import { ReactComponent as DeleteWallet } from 'widgets/Icons/Delete.svg'
+
+import { StateDispatch, setCurrentWallet } from 'states'
+import {
+  backToTop,
+  RoutePath,
+  MnemonicAction,
+  useOnHandleWallet,
+  useOnWindowResize,
+  useToggleChoiceGroupBorder,
+} from 'utils'
 
-import { openContextMenu, requestPassword } from 'services/remote'
-import { Routes, MnemonicAction } from 'utils/const'
-import { backToTop } from 'utils/animations'
 import styles from './walletSetting.module.scss'
 
 const buttons = [
   {
     label: 'wizard.create-new-wallet',
     ariaLabel: 'create a wallet',
-    url: `${Routes.WalletWizard}${WalletWizardPath.Mnemonic}/${MnemonicAction.Create}`,
+    url: `${RoutePath.WalletWizard}${WalletWizardPath.Mnemonic}/${MnemonicAction.Create}`,
   },
   {
     label: 'wizard.import-mnemonic',
     ariaLabel: 'import wallet seed',
-    url: `${Routes.WalletWizard}${WalletWizardPath.Mnemonic}/${MnemonicAction.Import}`,
+    url: `${RoutePath.WalletWizard}${WalletWizardPath.Mnemonic}/${MnemonicAction.Import}`,
   },
   {
     label: 'wizard.import-keystore',
     ariaLabel: 'import from keystore',
-    url: Routes.ImportKeystore,
+    url: RoutePath.ImportKeystore,
   },
 ]
 
@@ -39,6 +46,7 @@ const WalletSetting = ({
 }: State.AppWithNeuronWallet & { dispatch: StateDispatch }) => {
   const [t] = useTranslation()
   const history = useHistory()
+
   useEffect(() => {
     backToTop()
   }, [])
@@ -51,46 +59,10 @@ const WalletSetting = ({
     },
     [dispatch]
   )
-  const onContextMenu = useCallback(
-    (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => {
-      e.stopPropagation()
-      e.preventDefault()
-      const { id } = (e.target as HTMLSpanElement).dataset
-      if (id) {
-        const menuTemplate = [
-          {
-            label: t('common.select'),
-            click: () => {
-              setCurrentWallet(id)(dispatch)
-            },
-          },
-          {
-            label: t('common.backup'),
-            click: () => {
-              requestPassword({
-                walletID: id,
-                action: 'backup-wallet',
-              })
-            },
-          },
-          {
-            label: t('common.edit'),
-            click: () => {
-              history.push(`${Routes.WalletEditor}/${id}`)
-            },
-          },
-          {
-            label: t('common.delete'),
-            click: () => {
-              requestPassword({ walletID: id, action: 'delete-wallet' })
-            },
-          },
-        ]
-        openContextMenu(menuTemplate)
-      }
-    },
-    [t, history, dispatch]
-  )
+  const onHandleWallet = useOnHandleWallet({
+    dispatch,
+    history,
+  })
 
   const navTo = useCallback(
     (url: string = '/') => () => {
@@ -99,6 +71,16 @@ const WalletSetting = ({
     [history]
   )
 
+  const toggleBottomBorder = useToggleChoiceGroupBorder(`.${styles.wallets}`, styles.hasBottomBorder)
+
+  useEffect(() => {
+    if (wallets.length) {
+      toggleBottomBorder()
+    }
+  }, [toggleBottomBorder, wallets.length])
+
+  useOnWindowResize(toggleBottomBorder)
+
   return (
     <div className={styles.container}>
       <ChoiceGroup
@@ -109,13 +91,34 @@ const WalletSetting = ({
           checked: wallet.id === currentID,
           onRenderLabel: ({ text }: IChoiceGroupOption) => {
             return (
-              <span className="ms-ChoiceFieldLabel" data-id={wallet.id} onContextMenu={onContextMenu}>
-                {text}
+              <span
+                role="presentation"
+                className={`ms-ChoiceFieldLabel ${styles.choiceLabel}`}
+                data-id={wallet.id}
+                data-action="select"
+                onClick={onHandleWallet}
+              >
+                <span className={styles.walletName}>{text}</span>
+
+                <button type="button" data-action="edit" aria-label={t('common.edit')} title={t('common.edit')}>
+                  <EditWallet />
+                </button>
+                <button type="button" data-action="delete" aria-label={t('common-delete')} title={t('common.delete')}>
+                  <DeleteWallet />
+                </button>
+                <button type="button" data-action="backup" aria-label={t('common.backup')} title={t('common.backup')}>
+                  <BackupWallet />
+                </button>
               </span>
             )
           },
         }))}
         onChange={onChange}
+        styles={{
+          label: {
+            padding: '3px',
+          },
+        }}
       />
       <div className={styles.actions}>
         {buttons.map(({ label, ariaLabel, url }) => (
diff --git a/packages/neuron-ui/src/components/WalletSetting/walletSetting.module.scss b/packages/neuron-ui/src/components/WalletSetting/walletSetting.module.scss
index b3ba7b1d4d..6319a5c73a 100644
--- a/packages/neuron-ui/src/components/WalletSetting/walletSetting.module.scss
+++ b/packages/neuron-ui/src/components/WalletSetting/walletSetting.module.scss
@@ -1,21 +1,77 @@
 .container {
   display: grid;
-  grid-template:
-    'wallets'auto 'actions'auto;
+  grid-template: 'wallets' auto 'actions' auto;
   grid-row-gap: 15px;
-
 }
 
 .wallets {
   grid-area: wallets;
-
+  height: calc(100vh - 200px);
+  overflow: auto;
+  padding: 0 0 5px 8px;
 }
 
 .actions {
   grid-area: actions;
+  justify-self: flex-end;
 
   button {
     min-width: 9.375rem;
     margin-right: 15px;
   }
 }
+
+.choiceLabel {
+  display: flex !important;
+  align-items: center;
+  border: 1px solid transparent;
+  padding: 3px;
+  box-sizing: border-box;
+
+  .walletName {
+    display: inline-block;
+    width: 500px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  button {
+    display: flex;
+    align-items: center;
+    height: 1.25rem;
+    visibility: hidden;
+    appearance: none;
+    margin: 0 0 0 10px;
+    padding: 0;
+    border: none;
+    background: transparent;
+    svg {
+      width: 0.875rem;
+      height: 0.875rem;
+      pointer-events: none;
+      path,
+      g {
+        fill: #888;
+      }
+    }
+    &:hover {
+      svg {
+        path,
+        g {
+          fill: var(--nervos-green);
+        }
+      }
+    }
+  }
+  &:hover,
+  &:focus {
+    border-color: #aeaeae;
+    button {
+      visibility: visible;
+    }
+  }
+}
+
+.hasBottomBorder {
+  border-bottom: 0.5px solid #ccc;
+}
diff --git a/packages/neuron-ui/src/components/WalletWizard/index.tsx b/packages/neuron-ui/src/components/WalletWizard/index.tsx
index 0980ce9ab4..7fbe366371 100644
--- a/packages/neuron-ui/src/components/WalletWizard/index.tsx
+++ b/packages/neuron-ui/src/components/WalletWizard/index.tsx
@@ -1,7 +1,6 @@
 import React, { useState, useCallback, useEffect, useMemo } from 'react'
 import { useHistory, useRouteMatch } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import i18n from 'utils/i18n'
 import { Stack, Icon, Text, TextField, FontSizes } from 'office-ui-fabric-react'
 import Button from 'widgets/Button'
 import CustomTextField from 'widgets/TextField'
@@ -10,18 +9,27 @@ import Spinner from 'widgets/Spinner'
 import withWizard, { WizardElementProps, WithWizardState } from 'components/withWizard'
 import { createWallet, importMnemonic, generateMnemonic, validateMnemonic, showErrorMessage } from 'services/remote'
 
-import { Routes, MnemonicAction, ErrorCode, MAX_WALLET_NAME_LENGTH, MAX_PASSWORD_LENGTH } from 'utils/const'
+import {
+  generateWalletName,
+  RoutePath,
+  MnemonicAction,
+  ErrorCode,
+  CONSTANTS,
+  isSuccessResponse,
+  verifyPasswordComplexity,
+} from 'utils'
 import { buttonGrommetIconStyles } from 'utils/icons'
-import { verifyPasswordComplexity } from 'utils/validators'
-import generateWalletName from 'utils/generateWalletName'
+import i18n from 'utils/i18n'
 import styles from './walletWizard.module.scss'
 
+const { MAX_WALLET_NAME_LENGTH, MAX_PASSWORD_LENGTH } = CONSTANTS
+
 const createWalletWithMnemonic = (params: Controller.ImportMnemonicParams) => (
   history: ReturnType<typeof useHistory>
 ) => {
   return createWallet(params).then(res => {
-    if (res.status === 1) {
-      history.push(Routes.Overview)
+    if (isSuccessResponse(res)) {
+      history.push(window.neuron.role === 'main' ? RoutePath.Overview : RoutePath.SettingsWallets)
     } else if (res.status > 0) {
       showErrorMessage(i18n.t(`messages.error`), i18n.t(`messages.codes.${res.status}`))
     } else if (res.message) {
@@ -37,8 +45,8 @@ const importWalletWithMnemonic = (params: Controller.ImportMnemonicParams) => (
   history: ReturnType<typeof useHistory>
 ) => {
   return importMnemonic(params).then(res => {
-    if (res.status === 1) {
-      history.push(Routes.Overview)
+    if (isSuccessResponse(res)) {
+      history.push(window.neuron.role === 'main' ? RoutePath.Overview : RoutePath.SettingsWallets)
     } else if (res.status > 0) {
       showErrorMessage(i18n.t(`messages.error`), i18n.t(`messages.codes.${res.status}`))
     } else if (res.message) {
@@ -93,7 +101,7 @@ const Welcome = ({ rootPath = '/wizard', wallets = [] }: WizardElementProps) =>
   const history = useHistory()
   useEffect(() => {
     if (wallets.length) {
-      history.push(Routes.Overview)
+      history.push(RoutePath.Overview)
     }
   }, [wallets, history])
 
@@ -120,7 +128,7 @@ const Welcome = ({ rootPath = '/wizard', wallets = [] }: WizardElementProps) =>
           </>
         </Button>
         <span>{t('common.or')}</span>
-        <Button type="primary" label={t('wizard.import-keystore')} onClick={next(Routes.ImportKeystore)}>
+        <Button type="primary" label={t('wizard.import-keystore')} onClick={next(RoutePath.ImportKeystore)}>
           <>
             <Icon iconName="Keystore" styles={buttonGrommetIconStyles} />
             {t('wizard.import-keystore')}
@@ -160,8 +168,7 @@ const Mnemonic = ({ state = initState, rootPath = '/wizard', dispatch }: WizardE
   useEffect(() => {
     if (type === MnemonicAction.Create) {
       generateMnemonic().then(res => {
-        // Should always succeed
-        if (res.status === 1) {
+        if (isSuccessResponse(res)) {
           dispatch({
             type: 'generated',
             payload: res.result,
@@ -201,7 +208,7 @@ const Mnemonic = ({ state = initState, rootPath = '/wizard', dispatch }: WizardE
       })
       validateMnemonic(trimmedMnemonic).then(res => {
         let isMnemonicValid = false
-        if (res.status === 1) {
+        if (isSuccessResponse(res)) {
           isMnemonicValid = res.result
         }
         if (isMnemonicValid) {
diff --git a/packages/neuron-ui/src/components/WalletWizard/walletWizard.module.scss b/packages/neuron-ui/src/components/WalletWizard/walletWizard.module.scss
index dac0251196..fd71488273 100644
--- a/packages/neuron-ui/src/components/WalletWizard/walletWizard.module.scss
+++ b/packages/neuron-ui/src/components/WalletWizard/walletWizard.module.scss
@@ -1,4 +1,4 @@
-@import '../../styles//mixin.scss';
+@import '../../styles/mixin.scss';
 $button-gap: 10px;
 $line-gap: 15px;
 
@@ -47,7 +47,7 @@ $line-gap: 15px;
   @include center;
 
   .actions {
-    @include formFooter;
+    @include form-footer;
   }
 }
 
@@ -63,7 +63,7 @@ $line-gap: 15px;
   }
 
   .actions {
-    @include formFooter;
+    @include form-footer;
   }
 
   .submissionField {
@@ -72,7 +72,7 @@ $line-gap: 15px;
       line-height: 1.5rem;
     }
 
-    input+span {
+    input + span {
       background: #fff !important;
       font-size: 0.8rem !important;
       justify-content: flex-end !important;
diff --git a/packages/neuron-ui/src/components/WithdrawDialog/index.tsx b/packages/neuron-ui/src/components/WithdrawDialog/index.tsx
index 1eabc80be7..9b8f180691 100644
--- a/packages/neuron-ui/src/components/WithdrawDialog/index.tsx
+++ b/packages/neuron-ui/src/components/WithdrawDialog/index.tsx
@@ -1,13 +1,14 @@
 import React, { useState, useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 import Button from 'widgets/Button'
-import { shannonToCKBFormatter, localNumberFormatter } from 'utils/formatters'
+
+import { CONSTANTS, shannonToCKBFormatter, localNumberFormatter, useCalculateEpochs, useDialog } from 'utils'
 import { calculateDaoMaximumWithdraw, getHeader } from 'services/chain'
-import { useCalculateEpochs, useDialog } from 'utils/hooks'
-import { WITHDRAW_EPOCHS } from 'utils/const'
 
 import styles from './withdrawDialog.module.scss'
 
+const { WITHDRAW_EPOCHS } = CONSTANTS
+
 const WithdrawDialog = ({
   onDismiss,
   onSubmit,
diff --git a/packages/neuron-ui/src/components/WithdrawDialog/withdrawDialog.module.scss b/packages/neuron-ui/src/components/WithdrawDialog/withdrawDialog.module.scss
index 444548a77b..ea569ce187 100644
--- a/packages/neuron-ui/src/components/WithdrawDialog/withdrawDialog.module.scss
+++ b/packages/neuron-ui/src/components/WithdrawDialog/withdrawDialog.module.scss
@@ -1,7 +1,7 @@
-@import "../../styles//mixin.scss";
+@import '../../styles/mixin.scss';
 
 .dialog {
-  @include dialogContainer;
+  @include dialog-container;
   padding: 20px 30px;
 
   &::backdrop {
@@ -10,7 +10,7 @@
 }
 
 .title {
-  @include dialogTitle;
+  @include dialog-title;
 }
 
 .deposit,
@@ -33,7 +33,7 @@
 }
 
 .footer {
-  @include dialogFooter;
+  @include dialog-footer;
 
   button:last-of-type {
     margin-left: 9px;
diff --git a/packages/neuron-ui/src/components/withWizard/index.tsx b/packages/neuron-ui/src/components/withWizard/index.tsx
index 89c8caa3f2..b3d8d39b89 100644
--- a/packages/neuron-ui/src/components/withWizard/index.tsx
+++ b/packages/neuron-ui/src/components/withWizard/index.tsx
@@ -1,6 +1,6 @@
 import React, { useReducer } from 'react'
 import { Route } from 'react-router-dom'
-import { useState as useGlobalState } from 'states/stateProvider'
+import { useState as useGlobalState } from 'states'
 
 export interface Element {
   path: string
diff --git a/packages/neuron-ui/src/containers/Main/hooks.ts b/packages/neuron-ui/src/containers/Main/hooks.ts
index 0433b7f7eb..e99c8390fe 100644
--- a/packages/neuron-ui/src/containers/Main/hooks.ts
+++ b/packages/neuron-ui/src/containers/Main/hooks.ts
@@ -1,5 +1,5 @@
 import { useEffect } from 'react'
-
+import { useHistory } from 'react-router-dom'
 import { NeuronWalletActions, StateDispatch, AppActions } from 'states/stateProvider/reducer'
 import {
   updateTransactionList,
@@ -16,18 +16,20 @@ import {
   CurrentNetworkID as CurrentNetworkIDSubject,
   ConnectionStatus as ConnectionStatusSubject,
   SyncedBlockNumber as SyncedBlockNumberSubject,
-  AppUpdater as AppUpdaterSubject,
   Command as CommandSubject,
 } from 'services/subjects'
 import { ckbCore, getBlockchainInfo, getTipHeader } from 'services/chain'
-import { ConnectionStatus, ErrorCode, CONNECTING_DEADLINE } from 'utils/const'
 import { networks as networksCache, currentNetworkID as currentNetworkIDCache } from 'services/localCache'
+import { WalletWizardPath } from 'components/WalletWizard'
+import { ConnectionStatus, ErrorCode, RoutePath } from 'utils'
 
-let timer: NodeJS.Timeout
 const SYNC_INTERVAL_TIME = 4000
+const CONNECTING_BUFFER = 15_000
+let CONNECTING_DEADLINE = Date.now() + CONNECTING_BUFFER
 
 export const useSyncChainData = ({ chainURL, dispatch }: { chainURL: string; dispatch: StateDispatch }) => {
   useEffect(() => {
+    let timer: NodeJS.Timeout
     const syncBlockchainInfo = () => {
       Promise.all([getTipHeader(), getBlockchainInfo()])
         .then(([header, chainInfo]) => {
@@ -55,7 +57,7 @@ export const useSyncChainData = ({ chainURL, dispatch }: { chainURL: string; dis
           })
         })
     }
-    clearInterval(timer)
+    clearInterval(timer!)
     if (chainURL) {
       ckbCore.setNode(chainURL)
       syncBlockchainInfo()
@@ -78,7 +80,7 @@ export const useOnCurrentWalletChange = ({
 }: {
   walletID: string
   chain: State.Chain
-  history: any
+  history: ReturnType<typeof useHistory>
 
   dispatch: StateDispatch
 }) => {
@@ -98,7 +100,7 @@ export const useSubscription = ({
   walletID: string
   chain: State.Chain
   isAllowedToFetchList: boolean
-  history: any
+  history: ReturnType<typeof useHistory>
   dispatch: StateDispatch
 }) => {
   const { pageNo, pageSize, keywords } = chain.transactions
@@ -119,21 +121,25 @@ export const useSubscription = ({
           if (!isAllowedToFetchList) {
             break
           }
-          updateTransactionList({
-            walletID,
-            keywords,
-            pageNo,
-            pageSize,
-          })(dispatch)
+          updateTransactionList({ walletID, keywords, pageNo, pageSize })(dispatch)
           break
         }
         case 'current-wallet': {
-          updateCurrentWallet()(dispatch, history)
+          updateCurrentWallet()(dispatch).then(hasCurrent => {
+            if (!hasCurrent) {
+              history.push(`${RoutePath.WalletWizard}${WalletWizardPath.Welcome}`)
+            }
+          })
           break
         }
         case 'wallets': {
-          updateWalletList()(dispatch, history)
-          updateCurrentWallet()(dispatch, history)
+          Promise.all([updateWalletList, updateCurrentWallet].map(request => request()(dispatch))).then(
+            ([hasList, hasCurrent]) => {
+              if (!hasList || !hasCurrent) {
+                history.push(`${RoutePath.WalletWizard}${WalletWizardPath.Welcome}`)
+              }
+            }
+          )
           break
         }
         default: {
@@ -153,6 +159,7 @@ export const useSubscription = ({
         type: NeuronWalletActions.UpdateCurrentNetworkID,
         payload: currentNetworkID,
       })
+      CONNECTING_DEADLINE = Date.now() + CONNECTING_BUFFER
       currentNetworkIDCache.save(currentNetworkID)
     })
     const connectionStatusSubscription = ConnectionStatusSubject.subscribe(status => {
@@ -173,18 +180,14 @@ export const useSubscription = ({
       })
     })
 
-    const appUpdaterSubscription = AppUpdaterSubject.subscribe(appUpdaterInfo => {
-      dispatch({
-        type: NeuronWalletActions.UpdateAppUpdaterStatus,
-        payload: appUpdaterInfo,
-      })
-    })
-
     const commandSubscription = CommandSubject.subscribe(({ winID, type, payload }: Subject.CommandMetaInfo) => {
       if (winID && getWinID() === winID) {
         switch (type) {
+          // TODO: is this used anymore?
           case 'navigate-to-url': {
-            history.push(payload)
+            if (payload) {
+              history.push(payload)
+            }
             break
           }
           case 'delete-wallet': {
@@ -219,7 +222,6 @@ export const useSubscription = ({
       currentNetworkIDSubscription.unsubscribe()
       connectionStatusSubscription.unsubscribe()
       syncedBlockNumberSubscription.unsubscribe()
-      appUpdaterSubscription.unsubscribe()
       commandSubscription.unsubscribe()
     }
   }, [walletID, pageNo, pageSize, keywords, isAllowedToFetchList, history, dispatch])
diff --git a/packages/neuron-ui/src/containers/Main/index.tsx b/packages/neuron-ui/src/containers/Main/index.tsx
index 2a39a7a78a..2f19c60a5d 100644
--- a/packages/neuron-ui/src/containers/Main/index.tsx
+++ b/packages/neuron-ui/src/containers/Main/index.tsx
@@ -1,8 +1,8 @@
 import React, { useMemo } from 'react'
-import { Route, useHistory } from 'react-router-dom'
+import { useHistory } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 
-import { useState as useGlobalState, useDispatch } from 'states/stateProvider'
+import { useState as useGlobalState, useDispatch } from 'states'
 
 import Overview from 'components/Overview'
 import WalletWizard from 'components/WalletWizard'
@@ -11,95 +11,71 @@ import Send from 'components/Send'
 import Receive from 'components/Receive'
 import History from 'components/History'
 import Transaction from 'components/Transaction'
-import Settings from 'components/Settings'
 import Addresses from 'components/Addresses'
-import NetworkEditor from 'components/NetworkEditor'
-import WalletEditor from 'components/WalletEditor'
 import LaunchScreen from 'components/LaunchScreen'
 import PasswordRequest from 'components/PasswordRequest'
 import NervosDAO from 'components/NervosDAO'
 import SpecialAssetList from 'components/SpecialAssetList'
 
-import { Routes } from 'utils/const'
-import { useOnDefaultContextMenu } from 'utils/hooks'
+import { RoutePath, useOnDefaultContextMenu, useRoutes, useOnLocaleChange } from 'utils'
 
 import { useSubscription, useSyncChainData, useOnCurrentWalletChange } from './hooks'
 
 export const mainContents: CustomRouter.Route[] = [
   {
     name: `Launch`,
-    path: Routes.Launch,
+    path: RoutePath.Launch,
     exact: true,
     component: LaunchScreen,
   },
   {
     name: `General`,
-    path: Routes.Overview,
+    path: RoutePath.Overview,
     exact: true,
     component: Overview,
   },
   {
     name: `Send`,
-    path: Routes.Send,
+    path: RoutePath.Send,
     params: `/:address?`,
     exact: false,
     component: Send,
   },
   {
     name: `Receive`,
-    path: Routes.Receive,
+    path: RoutePath.Receive,
     params: `/:address?`,
     exact: false,
     component: Receive,
   },
   {
     name: `History`,
-    path: Routes.History,
+    path: RoutePath.History,
     exact: false,
     component: History,
   },
   {
     name: `Transaction`,
-    path: Routes.Transaction,
+    path: RoutePath.Transaction,
     params: `/:hash`,
     exact: false,
     component: Transaction,
   },
   {
     name: `Addresses`,
-    path: Routes.Addresses,
+    path: RoutePath.Addresses,
     exact: false,
     component: Addresses,
   },
-  {
-    name: `Settings`,
-    path: Routes.Settings,
-    exact: false,
-    component: Settings,
-  },
-  {
-    name: `NetworkEditor`,
-    path: Routes.NetworkEditor,
-    params: '/:id',
-    exact: false,
-    component: NetworkEditor,
-  },
-  {
-    name: `WalletEditor`,
-    path: Routes.WalletEditor,
-    params: '/:id',
-    exact: false,
-    component: WalletEditor,
-  },
   {
     name: `WalletWizard`,
-    path: Routes.WalletWizard,
+    path: RoutePath.WalletWizard,
     exact: false,
     component: WalletWizard,
   },
   {
     name: `ImportKeystore`,
-    path: Routes.ImportKeystore,
+    path: RoutePath.ImportKeystore,
     exact: false,
     component: ImportKeystore,
   },
@@ -111,13 +87,13 @@ export const mainContents: CustomRouter.Route[] = [
   },
   {
     name: `NervosDAO`,
-    path: Routes.NervosDAO,
+    path: RoutePath.NervosDAO,
     exact: true,
     component: NervosDAO,
   },
   {
     name: `SpecialAssets`,
-    path: Routes.SpecialAssets,
+    path: RoutePath.SpecialAssets,
     exact: false,
     component: SpecialAssetList,
   },
@@ -133,7 +109,7 @@ const MainContent = () => {
   } = useGlobalState()
   const dispatch = useDispatch()
   const { networkID } = chain
-  const [t] = useTranslation()
+  const [t, i18n] = useTranslation()
 
   useSubscription({
     walletID,
@@ -159,20 +135,11 @@ const MainContent = () => {
     history,
     dispatch,
   })
+  useOnLocaleChange(i18n)
   const onContextMenu = useOnDefaultContextMenu(t)
+  const routes = useRoutes(mainContents)
 
-  return (
-    <div onContextMenu={onContextMenu}>
-      {mainContents.map(container => (
-        <Route
-          exact={container.exact}
-          path={`${container.path}${container.params || ''}`}
-          key={container.name}
-          component={container.component}
-        />
-      ))}
-    </div>
-  )
+  return <div onContextMenu={onContextMenu}>{routes}</div>
 }
 
 MainContent.displayName = 'Main'
diff --git a/packages/neuron-ui/src/containers/Navbar/index.tsx b/packages/neuron-ui/src/containers/Navbar/index.tsx
index 5215d0baaa..0311498128 100644
--- a/packages/neuron-ui/src/containers/Navbar/index.tsx
+++ b/packages/neuron-ui/src/containers/Navbar/index.tsx
@@ -2,26 +2,33 @@ import React from 'react'
 import { createPortal } from 'react-dom'
 import { useHistory, useLocation } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
-import { useState as useGlobalState } from 'states/stateProvider'
+import { useState as useGlobalState } from 'states'
+
+import { showSettings } from 'services/remote'
 
 import NetworkStatus from 'components/NetworkStatus'
 import SyncStatus from 'components/SyncStatus'
 import { ReactComponent as ExperimentalIcon } from 'widgets/Icons/Flask.svg'
 
-import getSyncStatus from 'utils/getSyncStatus'
-import getCurrentUrl from 'utils/getCurrentUrl'
-import { Routes, FULL_SCREENS } from 'utils/const'
+import { RoutePath, getCurrentUrl, getSyncStatus, useOnLocaleChange } from 'utils'
 
 import styles from './navbar.module.scss'
 
+export const FULL_SCREENS = [`${RoutePath.Transaction}/`, `/wizard/`, `/keystore/`]
+
 const menuItems = [
-  { name: 'navbar.overview', key: Routes.Overview.slice(1), url: Routes.Overview, experimental: false },
-  { name: 'navbar.send', key: Routes.Send.slice(1), url: Routes.Send, experimental: false },
-  { name: 'navbar.receive', key: Routes.Receive.slice(1), url: Routes.Receive, experimental: false },
-  { name: 'navbar.history', key: Routes.History.slice(1), url: Routes.History, experimental: false },
-  { name: 'navbar.nervos-dao', key: Routes.NervosDAO.slice(1), url: Routes.NervosDAO, experimental: false },
-  { name: 'navbar.special-assets', key: Routes.SpecialAssets.slice(1), url: Routes.SpecialAssets, experimental: true },
-  { name: 'navbar.addresses', key: Routes.Addresses.slice(1), url: Routes.Addresses, experimental: false },
+  { name: 'navbar.overview', key: RoutePath.Overview.slice(1), url: RoutePath.Overview, experimental: false },
+  { name: 'navbar.send', key: RoutePath.Send.slice(1), url: RoutePath.Send, experimental: false },
+  { name: 'navbar.receive', key: RoutePath.Receive.slice(1), url: RoutePath.Receive, experimental: false },
+  { name: 'navbar.history', key: RoutePath.History.slice(1), url: RoutePath.History, experimental: false },
+  { name: 'navbar.nervos-dao', key: RoutePath.NervosDAO.slice(1), url: RoutePath.NervosDAO, experimental: false },
+  {
+    name: 'navbar.special-assets',
+    key: RoutePath.SpecialAssets.slice(1),
+    url: RoutePath.SpecialAssets,
+    experimental: true,
+  },
+  { name: 'navbar.addresses', key: RoutePath.Addresses.slice(1), url: RoutePath.Addresses, experimental: false },
 ]
 
 const Navbar = () => {
@@ -34,7 +41,8 @@ const Navbar = () => {
     chain: { connectionStatus, networkID, tipBlockNumber: syncedBlockNumber = '0' },
     settings: { wallets = [], networks = [] },
   } = neuronWallet
-  const [t] = useTranslation()
+  const [t, i18n] = useTranslation()
+  useOnLocaleChange(i18n)
 
   const selectedTab = menuItems.find(item => item.key === pathname.split('/')[1])
   const selectedKey: string | null = selectedTab ? selectedTab.key : null
@@ -96,7 +104,7 @@ const Navbar = () => {
         className={styles.name}
         title={name}
         aria-label={name}
-        onClick={() => history.push(Routes.SettingsWallets)}
+        onClick={() => showSettings({ tab: 'wallets' })}
       >
         {name}
       </button>
@@ -115,7 +123,7 @@ const Navbar = () => {
           syncedBlockNumber={syncedBlockNumber}
           networkName={networkName}
           connectionStatus={connectionStatus}
-          onAction={() => history.push(Routes.SettingsNetworks)}
+          onAction={() => showSettings({ tab: 'networks' })}
         />
       </div>
       <div className={styles.sync}>
diff --git a/packages/neuron-ui/src/containers/Navbar/navbar.module.scss b/packages/neuron-ui/src/containers/Navbar/navbar.module.scss
index 67345c3518..eafc5f9491 100644
--- a/packages/neuron-ui/src/containers/Navbar/navbar.module.scss
+++ b/packages/neuron-ui/src/containers/Navbar/navbar.module.scss
@@ -1,4 +1,4 @@
-@import '../../styles//mixin.scss';
+@import '../../styles/mixin.scss';
 
 $hover-bg-color: #3cc68a4d;
 $left-padding: 15px;
@@ -16,7 +16,7 @@ $left-padding: 15px;
 }
 
 .name {
-  @include RegularText;
+  @include regular-text;
   display: flex;
   justify-content: flex-start;
   align-items: center;
@@ -39,7 +39,7 @@ $left-padding: 15px;
   background-color: #191919;
 
   button {
-    @include MediumText;
+    @include medium-text;
     appearance: none;
     border: none;
     color: white;
@@ -68,6 +68,7 @@ $left-padding: 15px;
   & > div {
     align-items: flex-end;
     padding-left: $left-padding * 2;
+    padding-right: $left-padding;
     padding-bottom: 5px;
   }
 }
@@ -90,7 +91,6 @@ $left-padding: 15px;
   margin: 5px $left-padding;
   border-bottom: 1px solid currentColor;
   padding: 4px 0;
-  user-select: none;
   pointer-events: none;
   font-size: 0.75rem;
   display: flex;
diff --git a/packages/neuron-ui/src/containers/Notification/index.tsx b/packages/neuron-ui/src/containers/Notification/index.tsx
index a572f3240f..76de68400e 100644
--- a/packages/neuron-ui/src/containers/Notification/index.tsx
+++ b/packages/neuron-ui/src/containers/Notification/index.tsx
@@ -2,14 +2,17 @@ import React, { useMemo, useCallback, MouseEventHandler } from 'react'
 import { createPortal } from 'react-dom'
 import { useTranslation } from 'react-i18next'
 import { Stack, MessageBar, MessageBarType, IconButton, Panel, PanelType, Text } from 'office-ui-fabric-react'
-import { useState as useGlobalState, useDispatch } from 'states/stateProvider'
-import { StateDispatch } from 'states/stateProvider/reducer'
 import {
+  useState as useGlobalState,
+  useDispatch,
+  StateDispatch,
   toggleAllNotificationVisibility,
   toggleTopAlertVisibility,
   dismissNotification,
   dismissGlobalDialog,
-} from 'states/stateProvider/actionCreators'
+} from 'states'
+import { useOnLocaleChange } from 'utils'
+
 import GlobalDialog from 'widgets/GlobalDialog'
 import AlertDialog from 'widgets/AlertDialog'
 import styles from './Notification.module.scss'
@@ -71,7 +74,8 @@ export const NoticeContent = () => {
     },
   } = useGlobalState()
   const dispatch = useDispatch()
-  const [t] = useTranslation()
+  const [t, i18n] = useTranslation()
+  useOnLocaleChange(i18n)
 
   const notificationsInDesc = useMemo(() => [...notifications].reverse(), [notifications])
   const notification: State.Message | undefined = notificationsInDesc[0]
diff --git a/packages/neuron-ui/src/containers/Settings/index.tsx b/packages/neuron-ui/src/containers/Settings/index.tsx
new file mode 100644
index 0000000000..e04b11c351
--- /dev/null
+++ b/packages/neuron-ui/src/containers/Settings/index.tsx
@@ -0,0 +1,134 @@
+import React, { useCallback, useEffect } from 'react'
+import { useHistory } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
+
+import SettingTabs from 'components/SettingTabs'
+import NetworkEditor from 'components/NetworkEditor'
+import WalletEditor from 'components/WalletEditor'
+import WalletWizard from 'components/WalletWizard'
+import ImportKeystore from 'components/ImportKeystore'
+import PasswordRequest from 'components/PasswordRequest'
+
+import { useDispatch, NeuronWalletActions, AppActions } from 'states'
+
+import { LocalCacheKey } from 'services/localCache'
+import {
+  AppUpdater as AppUpdaterSubject,
+  Navigation as NavigationSubject,
+  Command as CommandSubject,
+} from 'services/subjects'
+import { getPlatform } from 'services/remote'
+import { RoutePath, useRoutes, useOnLocalStorageChange, useOnLocaleChange } from 'utils'
+
+export const settingContents: CustomRouter.Route[] = [
+  { name: `SettingTabs`, path: RoutePath.Settings, exact: false, component: SettingTabs },
+  { name: `NetworkEditor`, path: RoutePath.NetworkEditor, params: '/:id', exact: false, component: NetworkEditor },
+  { name: `WalletEditor`, path: RoutePath.WalletEditor, params: '/:id', exact: false, component: WalletEditor },
+  { name: `WalletWizard`, path: RoutePath.WalletWizard, exact: false, component: WalletWizard },
+  { name: `ImportKeystore`, path: RoutePath.ImportKeystore, exact: false, component: ImportKeystore },
+  { name: `PasswordRequest`, path: '/', exact: false, component: PasswordRequest },
+]
+
+const Settings = () => {
+  const dispatch = useDispatch()
+  const history = useHistory()
+  const [, i18n] = useTranslation()
+  useOnLocaleChange(i18n)
+  useEffect(() => {
+    const isMac = getPlatform() === 'darwin'
+    window.document.title = i18n.t(`settings.title.${isMac ? 'mac' : 'normal'}`)
+    // eslint-disable-next-line
+  }, [i18n.language])
+
+  useEffect(() => {
+    const onNavigate = (url: string) => history.push(url)
+
+    const onAppUpdaterUpdates = (info: Subject.AppUpdater) => {
+      dispatch({ type: NeuronWalletActions.UpdateAppUpdaterStatus, payload: info })
+    }
+
+    const onCommand = ({ type, payload }: Subject.CommandMetaInfo) => {
+      if (payload) {
+        switch (type) {
+          case 'delete-wallet': {
+            dispatch({ type: AppActions.RequestPassword, payload: { walletID: payload, actionType: 'delete' } })
+            break
+          }
+          case 'backup-wallet': {
+            dispatch({ type: AppActions.RequestPassword, payload: { walletID: payload, actionType: 'backup' } })
+            break
+          }
+          default: {
+            // ignore
+          }
+        }
+      } else {
+        console.warn('Empty payload from command')
+      }
+    }
+
+    const navSubscription = NavigationSubject.subscribe(onNavigate)
+    const appUpdaterSubscription = AppUpdaterSubject.subscribe(onAppUpdaterUpdates)
+    const commandSubscription = CommandSubject.subscribe(onCommand)
+
+    return () => {
+      navSubscription.unsubscribe()
+      appUpdaterSubscription.unsubscribe()
+      commandSubscription.unsubscribe()
+    }
+  }, [dispatch, history])
+
+  const onChange = useCallback(
+    (e: StorageEvent) => {
+      if (!e.newValue) {
+        return
+      }
+      try {
+        switch (e.key as LocalCacheKey) {
+          case LocalCacheKey.CurrentWallet: {
+            dispatch({
+              type: NeuronWalletActions.UpdateCurrentWallet,
+              payload: JSON.parse(e.newValue) as Partial<State.Wallet>,
+            })
+            break
+          }
+          case LocalCacheKey.Wallets: {
+            dispatch({
+              type: NeuronWalletActions.UpdateWalletList,
+              payload: JSON.parse(e.newValue) as State.WalletIdentity[],
+            })
+            break
+          }
+          case LocalCacheKey.CurrentNetworkID: {
+            dispatch({
+              type: NeuronWalletActions.UpdateCurrentNetworkID,
+              payload: e.newValue,
+            })
+            break
+          }
+          case LocalCacheKey.Networks: {
+            dispatch({
+              type: NeuronWalletActions.UpdateNetworkList,
+              payload: JSON.parse(e.newValue) as State.Network[],
+            })
+            break
+          }
+          default: {
+            // ignore
+          }
+        }
+      } catch (err) {
+        console.error(err)
+      }
+    },
+    [dispatch]
+  )
+
+  useOnLocalStorageChange(onChange)
+  const routes = useRoutes(settingContents)
+  return <>{routes}</>
+}
+
+Settings.displayName = 'Settings'
+
+export default Settings
diff --git a/packages/neuron-ui/src/exceptions/index.ts b/packages/neuron-ui/src/exceptions/index.ts
new file mode 100644
index 0000000000..9a5b1e8734
--- /dev/null
+++ b/packages/neuron-ui/src/exceptions/index.ts
@@ -0,0 +1,73 @@
+import { ErrorCode } from 'utils/enums'
+
+export class FieldInvalidException extends Error {
+  public code = ErrorCode.FieldInvalid
+  public i18n: {
+    fieldName: string
+  }
+
+  constructor(fieldName: string) {
+    super(`messages.codes.${ErrorCode.FieldInvalid}`)
+    this.i18n = {
+      fieldName,
+    }
+  }
+}
+
+export class FieldRequiredException extends Error {
+  public code = ErrorCode.FieldRequired
+  public i18n: {
+    fieldName: string
+  }
+
+  constructor(fieldName: string) {
+    super(`messages.codes.${ErrorCode.FieldRequired}`)
+    this.i18n = { fieldName }
+  }
+}
+
+export class FieldTooLongException extends Error {
+  public code = ErrorCode.FieldTooLong
+  public i18n: {
+    fieldName: string
+    length: number
+  }
+
+  constructor(fieldName: string, length: number) {
+    super(`messages.codes.${ErrorCode.FieldTooLong}`)
+    this.i18n = {
+      fieldName,
+      length,
+    }
+  }
+}
+
+export class FieldUsedException extends Error {
+  public code = ErrorCode.FieldUsed
+  public i18n: {
+    fieldName: string
+  }
+
+  constructor(fieldName: string) {
+    super(`messages.codes.${ErrorCode.FieldUsed}`)
+    this.i18n = {
+      fieldName,
+    }
+  }
+}
+
+export class AmountNotEnoughException extends Error {
+  public code = ErrorCode.AmountNotEnough
+  constructor() {
+    super(`messages.codes.${ErrorCode.AmountNotEnough}`)
+  }
+}
+
+export class PasswordIncorrectException extends Error {
+  public code = ErrorCode.PasswordIncorrect
+  constructor() {
+    super(`messages.codes.${ErrorCode.PasswordIncorrect}`)
+  }
+}
+
+export default undefined
diff --git a/packages/neuron-ui/src/index.tsx b/packages/neuron-ui/src/index.tsx
index ab429339ad..2174051d11 100755
--- a/packages/neuron-ui/src/index.tsx
+++ b/packages/neuron-ui/src/index.tsx
@@ -1,59 +1,56 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import { HashRouter as Router, Route } from 'react-router-dom'
+import { HashRouter as Router } from 'react-router-dom'
 
 import 'theme'
 import 'styles/index.scss'
 import 'utils/i18n'
+import { useRoutes } from 'utils'
 
 import Navbar from 'containers/Navbar'
 import Notification from 'containers/Notification'
 import Main from 'containers/Main'
+import Settings from 'containers/Settings'
 import Transaction from 'components/Transaction'
 import SignAndVerify from 'components/SignAndVerify'
 import ErrorBoundary from 'components/ErrorBoundary'
-import withProviders from 'states/stateProvider'
-
-export const containers: CustomRouter.Route[] = [
-  {
-    name: 'Navbar',
-    path: '/',
-    exact: false,
-    component: Navbar,
-  },
-  {
-    name: 'Main',
-    path: '/',
-    exact: false,
-    component: Main,
-  },
-  {
-    name: 'Notification',
-    path: '/',
-    exact: false,
-    component: Notification,
-  },
-]
-
-const App = withProviders(() => (
-  <ErrorBoundary>
-    <Router>
-      {containers.map(container => {
-        return <Route {...container} key={container.name} />
-      })}
-    </Router>
-  </ErrorBoundary>
-))
-
-Object.defineProperty(App, 'displayName', {
-  value: 'App',
-})
+import { withProvider } from 'states'
 
 if (window.location.hash.startsWith('#/transaction/')) {
   ReactDOM.render(<Transaction />, document.getElementById('root'))
 } else if (window.location.hash.startsWith('#/sign-verify/')) {
   ReactDOM.render(<SignAndVerify />, document.getElementById('root'))
 } else {
+  const isSettings = window.location.hash.startsWith('#/settings/')
+
+  window.neuron = {
+    role: isSettings ? 'settings' : 'main',
+  }
+
+  const containers: CustomRouter.Route[] = isSettings
+    ? [
+        { name: 'Main', path: '/', exact: false, component: Settings },
+        { name: 'Notification', path: '/', exact: false, component: Notification },
+      ]
+    : [
+        { name: 'Navbar', path: '/', exact: false, component: Navbar },
+        { name: 'Main', path: '/', exact: false, component: Main },
+        { name: 'Notification', path: '/', exact: false, component: Notification },
+      ]
+
+  const App = withProvider(() => {
+    const routes = useRoutes(containers)
+    return (
+      <ErrorBoundary>
+        <Router>{routes}</Router>
+      </ErrorBoundary>
+    )
+  })
+
+  Object.defineProperty(App, 'displayName', {
+    value: 'App',
+  })
+
   ReactDOM.render(<App />, document.getElementById('root'))
 }
 
diff --git a/packages/neuron-ui/src/locales/en.json b/packages/neuron-ui/src/locales/en.json
index f38fbcbbdf..c412c5ed7e 100644
--- a/packages/neuron-ui/src/locales/en.json
+++ b/packages/neuron-ui/src/locales/en.json
@@ -16,7 +16,6 @@
       "receive": "Receive",
       "history": "History",
       "addresses": "Addresses",
-      "settings": "Settings",
       "nervos-dao": "Nervos DAO",
       "special-assets": "Customized Assets",
       "sync-not-start": "Sync not started yet",
@@ -53,7 +52,8 @@
         "failed": "Failed",
         "pending": "Pending",
         "confirming": "Confirming"
-      }
+      },
+      "copy-balance": "Copy Balance"
     },
     "wizard": {
       "welcome-to-nervos-neuron": "Welcome to Neuron",
@@ -115,7 +115,7 @@
       "fee": "Transaction Fee",
       "advanced-fee-settings": "Advanced fee settings",
       "price": "Price",
-      "expected-speed": "Expected speed",
+      "pick-price": "Quick Pick Price",
       "total-cycles": "Total RISC-V Cycles",
       "scan-screen-qr-code": "Scan the QR Code on the screen",
       "set-locktime": "Set Locktime",
@@ -123,7 +123,7 @@
       "release-on": "Release on"
     },
     "receive": {
-      "click-to-copy": "Click to copy the address",
+      "copy-address": "Copy Address",
       "address-not-found": "Address not found",
       "prompt": "Neuron picks a new receiving address for better privacy. Please go to the Address Book if you want to use a previously used receiving address.",
       "address-qrcode": "Address QR Code",
@@ -155,15 +155,21 @@
       "blockNumber": "Block Number",
       "basic-information": "Basic Information",
       "search": {
+        "button": "Search",
         "placeholder": "Search tx hash, address or date (yyyy-mm-dd)"
       },
+      "export-history": "Export Transaction History",
       "confirmations": "Confirmations",
       "confirming-with-count": "{{confirmations}} Confirmations",
       "view-on-explorer": "View on Explorer",
       "copy-transaction-hash": "Copy Transaction Hash",
-      "no-txs": "No Transaction History"
+      "no-txs": "No Transaction History",
+      "copy-tx-hash": "Copy Transaction Hash",
+      "copy-balance": "Copy Balance",
+      "copy-address": "Copy Address"
     },
     "transaction": {
+      "window-title": "Transaction: {{hash}}",
       "date": "Date",
       "transaction-hash": "Transaction Hash",
       "block-number": "Block Number",
@@ -193,6 +199,10 @@
       "view-on-explorer": "View on Explorer"
     },
     "settings": {
+      "title": {
+        "normal": "Settings",
+        "mac": "Preference"
+      },
       "go-to-overview": "Go to Overview",
       "setting-tabs": {
         "general": "General",
@@ -204,7 +214,11 @@
         "clearing-cache": "Clearing...",
         "clear-cache-description": "Clear cache if you encounter data sync or balance display problems. Neuron will rescan block data.",
         "show": "Show",
-        "hide": "Hide"
+        "hide": "Hide",
+        "version": "Version",
+        "language": "Language",
+        "cache-cleared-on": "Cache cleared on {{date}}",
+        "apply": "Apply"
       },
       "wallet-manager": {
         "edit-wallet": {
@@ -232,6 +246,12 @@
         "mainnet": "Mainnet",
         "testnet": "Testnet",
         "devnet": "Devnet"
+      },
+      "locale": {
+        "en": "English",
+        "en-US": "English(United States)",
+        "zh": "中文(简体)",
+        "zh-TW": "中文(繁體)"
       }
     },
     "password-request": {
@@ -272,7 +292,9 @@
       "edit": "Edit",
       "delete": "Delete",
       "click-to-edit": "Click to edit",
-      "notice": "Notice"
+      "notice": "Notice",
+      "copy": "Copy",
+      "copied": "Copied"
     },
     "notification-panel": {
       "title": "Notifications"
@@ -361,6 +383,7 @@
       "free": "Available",
       "locked": "Locked",
       "deposit": "Deposit",
+      "copy-balance": "Copy Balance",
       "deposit-records": "Deposits",
       "completed-records": "Completed",
       "apc": "Current APC",
@@ -420,8 +443,7 @@
       "checking-updates": "Checking...",
       "downloading-update": "Downloading update...",
       "update-not-available": "There are currently no updates available.",
-      "release-notes": "Release Notes:",
-      "updates-found-do-you-want-to-update": "An update ({{version}}) is available, do you want to download and install now?",
+      "updates-found-do-you-want-to-update": "An update ({{version}}) is available",
       "download-update": "Install Update",
       "updates-downloaded-about-to-quit-and-install": "Update downloaded. Ready to install and relaunch.",
       "quit-and-install": "Install and relaunch"
@@ -450,6 +472,7 @@
       "start-tomorrow": "Selected time should start from tomorrow."
     },
     "sign-and-verify": {
+      "window-title": "Sign or Verify Message",
       "sign-or-verify-message": "Sign or Verify Message",
       "message": "Message",
       "address": "Address",
diff --git a/packages/neuron-ui/src/locales/zh-tw.json b/packages/neuron-ui/src/locales/zh-tw.json
index 94796d98bc..fdec2ea6d1 100644
--- a/packages/neuron-ui/src/locales/zh-tw.json
+++ b/packages/neuron-ui/src/locales/zh-tw.json
@@ -16,7 +16,6 @@
       "receive": "收款",
       "history": "交易歷史",
       "addresses": "地址管理",
-      "settings": "設定",
       "nervos-dao": "Nervos DAO",
       "special-assets": "自定義資產",
       "sync-not-start": "同步尚未開始",
@@ -53,7 +52,8 @@
         "failed": "失敗",
         "pending": "已提交",
         "confirming": "確認中"
-      }
+      },
+      "copy-balance": "複製餘額"
     },
     "wizard": {
       "welcome-to-nervos-neuron": "歡迎使用 Neuron",
@@ -115,7 +115,7 @@
       "fee": "交易費",
       "advanced-fee-settings": "交易費高級設定",
       "price": "單價",
-      "expected-speed": "預期成交速度",
+      "pick-price": "快速選擇單價",
       "total-cycles": "RISC-V Cycles 總數",
       "scan-screen-qr-code": "掃描荧幕上的二維碼",
       "set-locktime": "設置鎖定時間",
@@ -123,7 +123,7 @@
       "release-on": "鎖定至"
     },
     "receive": {
-      "click-to-copy": "點擊複製地址",
+      "copy-address": "複製地址",
       "address-not-found": "未找到地址",
       "prompt": "為了保護隱私，Neuron 會自動選擇一個新收款地址。如果您想使用舊的收款地址，請訪問地址管理頁面。",
       "address-qrcode": "地址二維碼",
@@ -155,15 +155,21 @@
       "blockNumber": "區塊高度",
       "basic-information": "基本資訊",
       "search": {
+        "button": "蒐索",
         "placeholder": "使用交易雜湊、地址或日期(yyyy-mm-dd)進行蒐索"
       },
+      "export-history": "導出交易歷史",
       "confirmations": "確認次數",
       "confirming-with-count": "已確認 {{confirmations}} 次",
       "view-on-explorer": "在瀏覽器中查看",
       "copy-transaction-hash": "複製交易雜湊",
-      "no-txs": "沒有交易記錄"
+      "no-txs": "沒有交易記錄",
+      "copy-tx-hash": "複製交易 Hash",
+      "copy-balance": "複製餘額",
+      "copy-address": "複製地址"
     },
     "transaction": {
+      "window-title": "交易: {{hash}}",
       "date": "時間",
       "transaction-hash": "交易雜湊",
       "block-number": "區塊高度",
@@ -193,6 +199,10 @@
       "view-on-explorer": "在瀏覽器中查看"
     },
     "settings": {
+      "title": {
+        "normal": "設定",
+        "mac": "偏好設置"
+      },
       "go-to-overview": "返回總覽畫面",
       "setting-tabs": {
         "general": "通用",
@@ -202,9 +212,13 @@
       "general": {
         "clear-cache": "清空緩存",
         "clearing-cache": "清空中…",
-        "clear-cache-description": "當資料同步或顯示出現問題時，可以清空緩存，Neuron 會重新同步所有塊數據。",
+        "clear-cache-description": "當資料同步或餘額顯示出現問題時，可以清空緩存，Neuron 會重新同步所有塊數據。",
         "show": "顯示",
-        "hide": "隱藏"
+        "hide": "隱藏",
+        "version": "版本",
+        "language": "語言",
+        "cache-cleared-on": "上次清空緩存時間 {{date}}",
+        "apply": "應用"
       },
       "wallet-manager": {
         "edit-wallet": {
@@ -232,6 +246,12 @@
         "mainnet": "主網",
         "testnet": "測試網",
         "devnet": "開發網"
+      },
+      "locale": {
+        "en": "English",
+        "en-US": "English(United States)",
+        "zh": "中文(简体)",
+        "zh-TW": "中文(繁體)"
       }
     },
     "password-request": {
@@ -272,7 +292,9 @@
       "edit": "編輯",
       "delete": "删除",
       "click-to-edit": "點擊編輯",
-      "notice": "注意事項"
+      "notice": "注意事項",
+      "copy": "複製",
+      "copied": "已複製"
     },
     "notification-panel": {
       "title": "通知中心"
@@ -361,6 +383,7 @@
       "free": "當前可用",
       "locked": "已鎖定",
       "deposit": "存入",
+      "copy-balance": "複製餘額",
       "deposit-records": "存入",
       "completed-records": "已解鎖",
       "apc": "當前年化鎖定補貼率",
@@ -420,8 +443,7 @@
       "checking-updates": "正在檢查…",
       "downloading-update": "正在下載更新…",
       "update-not-available": "已經在使用最新版本",
-      "release-notes": "Release Notes:",
-      "updates-found-do-you-want-to-update": "新版本 {{version}} 可供下載。要下載和安裝嗎？",
+      "updates-found-do-you-want-to-update": "新版本 {{version}} 可供下載",
       "download-update": "下載安裝",
       "updates-downloaded-about-to-quit-and-install": "下載完成。請安裝新版本。",
       "quit-and-install": "安裝並重啓應用"
@@ -450,6 +472,7 @@
       "start-tomorrow": "所選時間不能早於明天。"
     },
     "sign-and-verify": {
+      "window-title": "簽名/驗簽信息",
       "sign-or-verify-message": "簽名/驗簽信息",
       "message": "信息",
       "address": "地址",
diff --git a/packages/neuron-ui/src/locales/zh.json b/packages/neuron-ui/src/locales/zh.json
index 2b9ee60616..ce306c68a6 100644
--- a/packages/neuron-ui/src/locales/zh.json
+++ b/packages/neuron-ui/src/locales/zh.json
@@ -16,7 +16,6 @@
       "receive": "收款",
       "history": "交易历史",
       "addresses": "地址管理",
-      "settings": "设置",
       "nervos-dao": "Nervos DAO",
       "special-assets": "自定义资产",
       "sync-not-start": "同步尚未开始",
@@ -53,7 +52,8 @@
         "failed": "失败",
         "pending": "已提交",
         "confirming": "确认中"
-      }
+      },
+      "copy-balance": "复制余额"
     },
     "wizard": {
       "welcome-to-nervos-neuron": "欢迎使用 Neuron",
@@ -115,7 +115,7 @@
       "fee": "交易费",
       "advanced-fee-settings": "交易费高级设置",
       "price": "单价",
-      "expected-speed": "预期成交速度",
+      "pick-price": " 快速选择单价",
       "total-cycles": "RISC-V Cycles 总数",
       "scan-screen-qr-code": "扫描屏幕上的二维码",
       "set-locktime": "设置锁定时间",
@@ -123,7 +123,7 @@
       "release-on": "锁定至"
     },
     "receive": {
-      "click-to-copy": "点击复制地址",
+      "copy-address": "复制地址",
       "address-not-found": "未找到地址",
       "prompt": "为了保护隐私，Neuron 会自动选择一个新收款地址。如果您想使用旧的收款地址，请访问地址管理页面。",
       "address-qrcode": "地址二维码",
@@ -155,15 +155,21 @@
       "blockNumber": "区块高度",
       "basic-information": "基本信息",
       "search": {
+        "button": "搜索",
         "placeholder": "使用交易哈希、地址或日期(yyyy-mm-dd)进行搜索"
       },
+      "export-history": "导出交易历史",
       "confirmations": "确认次数",
       "confirming-with-count": " 已确认 {{confirmations}} 次",
       "view-on-explorer": "在浏览器中查看",
       "copy-transaction-hash": "复制交易哈希",
-      "no-txs": "没有交易记录"
+      "no-txs": "没有交易记录",
+      "copy-tx-hash": "复制交易 Hash",
+      "copy-balance": "复制余额",
+      "copy-address": "复制地址"
     },
     "transaction": {
+      "window-title": "交易: {{hash}}",
       "date": "时间",
       "transaction-hash": "交易哈希",
       "block-number": "区块高度",
@@ -193,6 +199,10 @@
       "view-on-explorer": "在浏览器中查看"
     },
     "settings": {
+      "title": {
+        "normal": "设置",
+        "mac": "偏好设置"
+      },
       "go-to-overview": "返回总览画面",
       "setting-tabs": {
         "general": "通用",
@@ -202,9 +212,13 @@
       "general": {
         "clear-cache": "清空缓存",
         "clearing-cache": "清空中...",
-        "clear-cache-description": "当数据同步或显示出现问题时，可以清空缓存，Neuron 会重新同步所有块数据。",
+        "clear-cache-description": "当数据同步或余额显示出现问题时，可以清空缓存，Neuron 会重新同步所有块数据。",
         "show": "显示",
-        "hide": "隐藏"
+        "hide": "隐藏",
+        "version": "版本",
+        "language": "语言",
+        "cache-cleared-on": "上次清空缓存时间 {{date}}",
+        "apply": "应用"
       },
       "wallet-manager": {
         "edit-wallet": {
@@ -232,6 +246,12 @@
         "mainnet": "主网",
         "testnet": "测试网",
         "devnet": "开发网"
+      },
+      "locale": {
+        "en": "English",
+        "en-US": "English(United States)",
+        "zh": "中文(简体)",
+        "zh-TW": "中文(繁體)"
       }
     },
     "password-request": {
@@ -272,7 +292,9 @@
       "edit": "编辑",
       "delete": "删除",
       "click-to-edit": "点击编辑",
-      "notice": "注意事项"
+      "notice": "注意事项",
+      "copy": "复制",
+      "copied": "已复制"
     },
     "notification-panel": {
       "title": "通知中心"
@@ -361,6 +383,7 @@
       "free": "当前可用",
       "locked": "已锁定",
       "deposit": "存入",
+      "copy-balance": "复制余额",
       "deposit-records": "存入",
       "completed-records": "已解锁",
       "apc": "当前年化锁定补贴率",
@@ -420,8 +443,7 @@
       "checking-updates": "正在检查...",
       "downloading-update": "正在下载更新...",
       "update-not-available": "已经在使用最新版本",
-      "release-notes": "Release Notes:",
-      "updates-found-do-you-want-to-update": "新版本 {{version}} 可供下载。要下载和安装吗？",
+      "updates-found-do-you-want-to-update": "新版本 {{version}} 可供下载",
       "download-update": "下载安装",
       "updates-downloaded-about-to-quit-and-install": "下载完成。请安装新版本。",
       "quit-and-install": "安装并重启应用"
@@ -450,6 +472,7 @@
       "start-tomorrow": "所选时间不能早于明天。"
     },
     "sign-and-verify": {
+      "window-title": "签名/验签信息",
       "sign-or-verify-message": "签名/验签信息",
       "message": "信息",
       "address": "地址",
diff --git a/packages/neuron-ui/src/services/localCache.ts b/packages/neuron-ui/src/services/localCache.ts
index 01fede29cc..e6bc7d0712 100644
--- a/packages/neuron-ui/src/services/localCache.ts
+++ b/packages/neuron-ui/src/services/localCache.ts
@@ -4,6 +4,7 @@ export enum LocalCacheKey {
   Wallets = 'wallets',
   CurrentWallet = 'currentWallet',
   CurrentNetworkID = 'currentNetworkID',
+  CacheClearDate = 'cacheClearDate',
 }
 
 export const addresses = {
@@ -105,6 +106,16 @@ export const currentNetworkID = {
   },
 }
 
+export const cacheClearDate = {
+  save: (date: string) => {
+    window.localStorage.setItem(LocalCacheKey.CacheClearDate, date)
+    return true
+  },
+  load: () => {
+    return window.localStorage.getItem(LocalCacheKey.CacheClearDate) ?? ''
+  },
+}
+
 export default {
   LocalCacheKey,
   addresses,
@@ -112,4 +123,5 @@ export default {
   wallets,
   currentWallet,
   currentNetworkID,
+  cacheClearDate,
 }
diff --git a/packages/neuron-ui/src/services/remote/app.ts b/packages/neuron-ui/src/services/remote/app.ts
index 898c69830f..8e7cf20167 100644
--- a/packages/neuron-ui/src/services/remote/app.ts
+++ b/packages/neuron-ui/src/services/remote/app.ts
@@ -1,8 +1,11 @@
+import { LOCALES } from 'utils/const'
 import { remoteApi } from './remoteApiWrapper'
 
 export const getSystemCodeHash = remoteApi<void>('get-system-codehash')
 export const getNeuronWalletState = remoteApi<void>('load-init-data')
 export const openInWindow = remoteApi<Controller.OpenInWindowParams>('open-in-window')
 export const handleViewError = remoteApi<string>('handle-view-error')
+export const showSettings = remoteApi<Controller.ShowSettingsParams>('show-settings')
+export const setLocale = remoteApi<typeof LOCALES[number]>('set-locale')
 
 export const clearCellCache = remoteApi<void>('clear-cache')
diff --git a/packages/neuron-ui/src/services/remote/index.ts b/packages/neuron-ui/src/services/remote/index.ts
index abfd90f96f..027034acf2 100644
--- a/packages/neuron-ui/src/services/remote/index.ts
+++ b/packages/neuron-ui/src/services/remote/index.ts
@@ -11,11 +11,19 @@ const REMOTE_MODULE_NOT_FOUND =
 const LIMITED_TO_ELECTRON = 'This function is limited to Electron'
 
 export const getLocale = () => {
-  if (!window.remote) {
+  if (!window.ipcRenderer) {
     console.warn(REMOTE_MODULE_NOT_FOUND)
     return window.navigator.language
   }
-  return window.remote.require('electron').app.getLocale()
+  return window.ipcRenderer.sendSync('get-locale')
+}
+
+export const getVersion = () => {
+  return window.remote?.app?.getVersion() ?? ''
+}
+
+export const getPlatform = () => {
+  return window.remote?.process?.platform ?? 'Unknown'
 }
 
 export const getWinID = () => {
diff --git a/packages/neuron-ui/src/services/remote/remoteApiWrapper.ts b/packages/neuron-ui/src/services/remote/remoteApiWrapper.ts
index c1f59e1f09..a3341635bb 100644
--- a/packages/neuron-ui/src/services/remote/remoteApiWrapper.ts
+++ b/packages/neuron-ui/src/services/remote/remoteApiWrapper.ts
@@ -1,9 +1,12 @@
-interface SuccessFromController {
-  status: 1
+import { ResponseCode, ErrorCode, isSuccessResponse } from 'utils'
+
+export interface SuccessFromController {
+  status: ResponseCode.SUCCESS
   result: any
 }
-interface FailureFromController {
-  status: 0 | 105
+
+export interface FailureFromController {
+  status: ResponseCode.FAILURE | ErrorCode.CapacityNotEnoughForChange | number
   message:
     | string
     | {
@@ -15,7 +18,7 @@ interface FailureFromController {
 export type ControllerResponse = SuccessFromController | FailureFromController
 
 export const RemoteNotLoadError = {
-  status: 0 as 0,
+  status: ResponseCode.FAILURE,
   message: {
     content: 'The remote module is not found, please make sure the UI is running inside the Electron App',
   },
@@ -29,6 +32,8 @@ type Action =
   | 'load-init-data'
   | 'open-in-window'
   | 'handle-view-error'
+  | 'show-settings'
+  | 'set-locale'
   // Wallets
   | 'get-all-wallets'
   | 'get-current-wallet'
@@ -54,6 +59,7 @@ type Action =
   | 'get-transaction'
   | 'show-transaction-details'
   | 'update-transaction-description'
+  | 'export-transactions'
   // Dao
   | 'get-dao-data'
   | 'generate-dao-deposit-tx'
@@ -81,7 +87,7 @@ export const remoteApi = <T = any>(action: Action) => async (params: T): Promise
   const res: SuccessFromController | FailureFromController = await window.ipcRenderer
     .invoke(action, params)
     .catch(() => ({
-      status: 0,
+      status: ResponseCode.FAILURE,
       message: {
         content: 'Invalid response format',
       },
@@ -96,20 +102,20 @@ export const remoteApi = <T = any>(action: Action) => async (params: T): Promise
 
   if (!res) {
     return {
-      status: 1,
+      status: ResponseCode.SUCCESS,
       result: null,
     }
   }
 
-  if (res.status === 1) {
+  if (isSuccessResponse(res)) {
     return {
-      status: 1,
+      status: ResponseCode.SUCCESS,
       result: res.result || null,
     }
   }
 
   return {
-    status: res.status || 0,
+    status: res.status || ResponseCode.FAILURE,
     message: typeof res.message === 'string' ? { content: res.message } : res.message || '',
   }
 }
diff --git a/packages/neuron-ui/src/services/remote/transactions.ts b/packages/neuron-ui/src/services/remote/transactions.ts
index 63781e01ec..765d966f98 100644
--- a/packages/neuron-ui/src/services/remote/transactions.ts
+++ b/packages/neuron-ui/src/services/remote/transactions.ts
@@ -12,4 +12,5 @@ export const getTransaction = remoteApi<{ walletID: string; hash: string }>('get
 export const updateTransactionDescription = remoteApi<Controller.UpdateTransactionDescriptionParams>(
   'update-transaction-description'
 )
+export const exportTransactions = remoteApi<Controller.ExportTransactions.Params>('export-transactions')
 export const showTransactionDetails = remoteApi<string>('show-transaction-details')
diff --git a/packages/neuron-ui/src/services/subjects.ts b/packages/neuron-ui/src/services/subjects.ts
index c16e877765..09d5d44129 100644
--- a/packages/neuron-ui/src/services/subjects.ts
+++ b/packages/neuron-ui/src/services/subjects.ts
@@ -1,3 +1,7 @@
+import { CONSTANTS } from 'utils'
+
+const { LOCALES } = CONSTANTS
+
 const FallbackSubject = {
   subscribe: (args: any) => {
     console.warn('The remote module is not found, please make sure the UI is running inside the Electron App')
@@ -21,6 +25,8 @@ const SubjectConstructor = <T>(
     | 'synced-block-number-updated'
     | 'command'
     | 'app-updater-updated'
+    | 'navigation'
+    | 'set-locale'
 ) => {
   return window.ipcRenderer
     ? {
@@ -46,6 +52,8 @@ export const ConnectionStatus = SubjectConstructor<Subject.ConnectionStatus>('co
 export const SyncedBlockNumber = SubjectConstructor<Subject.BlockNumber>('synced-block-number-updated')
 export const AppUpdater = SubjectConstructor<Subject.AppUpdater>('app-updater-updated')
 export const Command = SubjectConstructor<Subject.CommandMetaInfo>('command')
+export const Navigation = SubjectConstructor<Subject.URL>('navigation')
+export const SetLocale = SubjectConstructor<typeof LOCALES[number]>('set-locale')
 
 export default {
   DataUpdate,
@@ -57,4 +65,6 @@ export default {
   SyncedBlockNumber,
   AppUpdater,
   Command,
+  Navigation,
+  SetLocale,
 }
diff --git a/packages/neuron-ui/src/states/index.ts b/packages/neuron-ui/src/states/index.ts
new file mode 100644
index 0000000000..771992778a
--- /dev/null
+++ b/packages/neuron-ui/src/states/index.ts
@@ -0,0 +1,4 @@
+export { initStates } from './init'
+export * from './stateProvider/provider'
+export * from './stateProvider/reducer'
+export * from './stateProvider/actionCreators'
diff --git a/packages/neuron-ui/src/states/initStates/app.ts b/packages/neuron-ui/src/states/init/app.ts
similarity index 88%
rename from packages/neuron-ui/src/states/initStates/app.ts
rename to packages/neuron-ui/src/states/init/app.ts
index 0676463994..a3f586cd66 100644
--- a/packages/neuron-ui/src/states/initStates/app.ts
+++ b/packages/neuron-ui/src/states/init/app.ts
@@ -1,4 +1,6 @@
-import { CapacityUnit } from 'utils/const'
+import { CapacityUnit, CONSTANTS } from 'utils'
+
+const { INIT_SEND_PRICE } = CONSTANTS
 
 const appState: Readonly<State.App> = {
   tipBlockNumber: '',
@@ -17,14 +19,13 @@ const appState: Readonly<State.App> = {
         date: undefined,
       },
     ],
-    price: '1000',
+    price: INIT_SEND_PRICE,
     description: '',
     generatedTx: '',
   },
   passwordRequest: {
     actionType: null,
     walletID: '',
-    password: '',
   },
   messages: {
     networks: null,
@@ -41,7 +42,6 @@ const appState: Readonly<State.App> = {
     sending: false,
     addressList: false,
     transactionList: false,
-    network: false,
   },
   showTopAlert: false,
   showAllNotifications: false,
diff --git a/packages/neuron-ui/src/states/initStates/chain.ts b/packages/neuron-ui/src/states/init/chain.ts
similarity index 93%
rename from packages/neuron-ui/src/states/initStates/chain.ts
rename to packages/neuron-ui/src/states/init/chain.ts
index de834e11f9..f77bb02ad7 100644
--- a/packages/neuron-ui/src/states/initStates/chain.ts
+++ b/packages/neuron-ui/src/states/init/chain.ts
@@ -1,5 +1,5 @@
 import { currentNetworkID } from 'services/localCache'
-import { ConnectionStatus } from 'utils/const'
+import { ConnectionStatus } from 'utils'
 
 export const transactionState: Readonly<State.DetailedTransaction> = {
   value: '',
diff --git a/packages/neuron-ui/src/states/initStates/index.ts b/packages/neuron-ui/src/states/init/index.ts
similarity index 61%
rename from packages/neuron-ui/src/states/initStates/index.ts
rename to packages/neuron-ui/src/states/init/index.ts
index f393cf795e..5a09206282 100644
--- a/packages/neuron-ui/src/states/initStates/index.ts
+++ b/packages/neuron-ui/src/states/init/index.ts
@@ -5,14 +5,7 @@ import settings from './settings'
 import nervosDAO from './nervosDAO'
 import updater from './updater'
 
-export * from './app'
-export * from './chain'
-export * from './wallet'
-export * from './settings'
-export * from './nervosDAO'
-export * from './updater'
-
-const initStates = {
+export const initStates = {
   app,
   chain,
   wallet,
diff --git a/packages/neuron-ui/src/states/initStates/nervosDAO.ts b/packages/neuron-ui/src/states/init/nervosDAO.ts
similarity index 100%
rename from packages/neuron-ui/src/states/initStates/nervosDAO.ts
rename to packages/neuron-ui/src/states/init/nervosDAO.ts
diff --git a/packages/neuron-ui/src/states/initStates/settings.ts b/packages/neuron-ui/src/states/init/settings.ts
similarity index 100%
rename from packages/neuron-ui/src/states/initStates/settings.ts
rename to packages/neuron-ui/src/states/init/settings.ts
diff --git a/packages/neuron-ui/src/states/initStates/updater.ts b/packages/neuron-ui/src/states/init/updater.ts
similarity index 100%
rename from packages/neuron-ui/src/states/initStates/updater.ts
rename to packages/neuron-ui/src/states/init/updater.ts
diff --git a/packages/neuron-ui/src/states/initStates/wallet.ts b/packages/neuron-ui/src/states/init/wallet.ts
similarity index 100%
rename from packages/neuron-ui/src/states/initStates/wallet.ts
rename to packages/neuron-ui/src/states/init/wallet.ts
diff --git a/packages/neuron-ui/src/states/stateProvider/actionCreators/app.ts b/packages/neuron-ui/src/states/stateProvider/actionCreators/app.ts
index a236af2a3e..569d966e86 100644
--- a/packages/neuron-ui/src/states/stateProvider/actionCreators/app.ts
+++ b/packages/neuron-ui/src/states/stateProvider/actionCreators/app.ts
@@ -1,9 +1,8 @@
 import { NeuronWalletActions, AppActions, StateDispatch } from 'states/stateProvider/reducer'
 import { getNeuronWalletState } from 'services/remote'
-import initStates from 'states/initStates'
-import { Routes, ErrorCode } from 'utils/const'
+import initStates from 'states/init'
+import { RoutePath, ErrorCode, addressesToBalance, isSuccessResponse } from 'utils'
 import { WalletWizardPath } from 'components/WalletWizard'
-import { addressesToBalance } from 'utils/formatters'
 import {
   wallets as walletsCache,
   addresses as addressesCache,
@@ -15,7 +14,7 @@ import {
 export const initAppState = () => (dispatch: StateDispatch, history: any) => {
   getNeuronWalletState()
     .then(res => {
-      if (res.status === 1) {
+      if (isSuccessResponse(res)) {
         const {
           wallets = [],
           currentWallet: wallet = initStates.wallet,
@@ -39,9 +38,9 @@ export const initAppState = () => (dispatch: StateDispatch, history: any) => {
           },
         })
         if (!wallet) {
-          history.push(`${Routes.WalletWizard}${WalletWizardPath.Welcome}`)
+          history.push(`${RoutePath.WalletWizard}${WalletWizardPath.Welcome}`)
         } else {
-          history.push(Routes.Overview)
+          history.push(RoutePath.Overview)
         }
 
         currentWalletCache.save(wallet)
@@ -50,11 +49,11 @@ export const initAppState = () => (dispatch: StateDispatch, history: any) => {
         networksCache.save(networks)
         currentNetworkIDCache.save(currentNetworkID)
       } else {
-        history.push(`${Routes.WalletWizard}${WalletWizardPath.Welcome}`)
+        history.push(`${RoutePath.WalletWizard}${WalletWizardPath.Welcome}`)
       }
     })
     .catch(() => {
-      history.push(`${Routes.WalletWizard}${WalletWizardPath.Welcome}`)
+      history.push(`${RoutePath.WalletWizard}${WalletWizardPath.Welcome}`)
     })
 }
 
@@ -130,16 +129,3 @@ export const toggleIsAllowedToFetchList = (allowed?: boolean) => (dispatch: Stat
     payload: allowed,
   })
 }
-
-export default {
-  initAppState,
-  addNotification,
-  addPopup,
-  dismissGlobalDialog,
-  dismissNotification,
-  showAlertDialog,
-  dismissAlertDialog,
-  toggleTopAlertVisibility,
-  toggleAllNotificationVisibility,
-  toggleIsAllowedToFetchList,
-}
diff --git a/packages/neuron-ui/src/states/stateProvider/actionCreators/index.ts b/packages/neuron-ui/src/states/stateProvider/actionCreators/index.ts
index b1ea341f64..4705714c26 100644
--- a/packages/neuron-ui/src/states/stateProvider/actionCreators/index.ts
+++ b/packages/neuron-ui/src/states/stateProvider/actionCreators/index.ts
@@ -1,17 +1,4 @@
-import app from './app'
-import wallets from './wallets'
-import transactions from './transactions'
-import settings from './settings'
-
 export * from './app'
 export * from './wallets'
 export * from './transactions'
 export * from './settings'
-export const actionCreators = {
-  ...app,
-  ...wallets,
-  ...transactions,
-  ...settings,
-}
-
-export default actionCreators
diff --git a/packages/neuron-ui/src/states/stateProvider/actionCreators/settings.ts b/packages/neuron-ui/src/states/stateProvider/actionCreators/settings.ts
index 41e2c4eb18..bd3294c0b2 100644
--- a/packages/neuron-ui/src/states/stateProvider/actionCreators/settings.ts
+++ b/packages/neuron-ui/src/states/stateProvider/actionCreators/settings.ts
@@ -1,6 +1,5 @@
 import { createNetwork as createRemoteNetwork, updateNetwork as updateRemoteNetwork } from 'services/remote'
-import { Routes } from 'utils/const'
-import { failureResToNotification } from 'utils/formatters'
+import { RoutePath, failureResToNotification } from 'utils'
 import { addNotification, addPopup } from './app'
 
 import { AppActions, StateDispatch } from '../reducer'
@@ -16,7 +15,7 @@ export const createNetwork = (params: Controller.CreateNetworkParams) => (dispat
     .then(res => {
       if (res.status === 1) {
         addPopup('create-network-successfully')(dispatch)
-        history.push(Routes.SettingsNetworks)
+        history.push(RoutePath.SettingsNetworks)
       } else {
         addNotification(failureResToNotification(res))(dispatch)
       }
@@ -32,32 +31,13 @@ export const createNetwork = (params: Controller.CreateNetworkParams) => (dispat
 }
 
 export const updateNetwork = (params: Controller.UpdateNetworkParams) => (dispatch: StateDispatch, history: any) => {
-  dispatch({
-    type: AppActions.UpdateLoadings,
-    payload: {
-      network: true,
-    },
+  return updateRemoteNetwork(params).then(res => {
+    if (res.status === 1) {
+      addPopup('update-network-successfully')(dispatch)
+      history.push(RoutePath.SettingsNetworks)
+    } else {
+      addNotification(failureResToNotification(res))(dispatch)
+    }
+    return res.status
   })
-  updateRemoteNetwork(params)
-    .then(res => {
-      if (res.status === 1) {
-        addPopup('update-network-successfully')(dispatch)
-        history.push(Routes.SettingsNetworks)
-      } else {
-        addNotification(failureResToNotification(res))(dispatch)
-      }
-    })
-    .finally(() => {
-      dispatch({
-        type: AppActions.UpdateLoadings,
-        payload: {
-          network: false,
-        },
-      })
-    })
-}
-
-export default {
-  createNetwork,
-  updateNetwork,
 }
diff --git a/packages/neuron-ui/src/states/stateProvider/actionCreators/transactions.ts b/packages/neuron-ui/src/states/stateProvider/actionCreators/transactions.ts
index 5eda61b6c8..a3082716a7 100644
--- a/packages/neuron-ui/src/states/stateProvider/actionCreators/transactions.ts
+++ b/packages/neuron-ui/src/states/stateProvider/actionCreators/transactions.ts
@@ -4,12 +4,12 @@ import {
   getTransactionList,
   updateTransactionDescription as updateRemoteTransactionDescription,
 } from 'services/remote'
-import { failureResToNotification } from 'utils/formatters'
+import { failureResToNotification, isSuccessResponse } from 'utils'
 import { addNotification } from './app'
 
 export const updateTransactionList = (params: GetTransactionListParams) => (dispatch: StateDispatch) => {
   getTransactionList(params).then(res => {
-    if (res.status === 1) {
+    if (isSuccessResponse(res)) {
       dispatch({
         type: NeuronWalletActions.UpdateTransactionList,
         payload: res.result,
@@ -43,7 +43,3 @@ export const updateTransactionDescription = (params: Controller.UpdateTransactio
     }
   })
 }
-
-export default {
-  updateTransactionList,
-}
diff --git a/packages/neuron-ui/src/states/stateProvider/actionCreators/wallets.ts b/packages/neuron-ui/src/states/stateProvider/actionCreators/wallets.ts
index 16ec10b48a..f66c02f10b 100644
--- a/packages/neuron-ui/src/states/stateProvider/actionCreators/wallets.ts
+++ b/packages/neuron-ui/src/states/stateProvider/actionCreators/wallets.ts
@@ -11,22 +11,17 @@ import {
   deleteWallet as deleteRemoteWallet,
   backupWallet as backupRemoteWallet,
 } from 'services/remote'
-import { emptyWallet } from 'states/initStates/wallet'
-import { emptyNervosDaoData } from 'states/initStates/nervosDAO'
-import { WalletWizardPath } from 'components/WalletWizard'
+import { emptyWallet } from 'states/init/wallet'
+import { emptyNervosDaoData } from 'states/init/nervosDAO'
 import { wallets as walletsCache, currentWallet as currentWalletCache } from 'services/localCache'
-import { Routes, ErrorCode } from 'utils/const'
-import { addressesToBalance, failureResToNotification } from 'utils/formatters'
+import { ErrorCode, ResponseCode, addressesToBalance, failureResToNotification, isSuccessResponse } from 'utils'
 import { NeuronWalletActions } from '../reducer'
 import { addNotification, addPopup } from './app'
 
-export const updateCurrentWallet = () => (dispatch: StateDispatch, history: any) => {
-  getCurrentWallet().then(res => {
-    if (res.status === 1) {
+export const updateCurrentWallet = () => (dispatch: StateDispatch) => {
+  return getCurrentWallet().then(res => {
+    if (isSuccessResponse(res)) {
       const payload = res.result || emptyWallet
-      if (!payload || !payload.id) {
-        history.push(`${Routes.WalletWizard}${WalletWizardPath.Welcome}`)
-      }
       dispatch({
         type: NeuronWalletActions.UpdateCurrentWallet,
         payload,
@@ -35,45 +30,36 @@ export const updateCurrentWallet = () => (dispatch: StateDispatch, history: any)
     } else {
       addNotification(failureResToNotification(res))(dispatch)
     }
+    return !!(res as any)?.result?.id
   })
 }
 
-export const updateWalletList = () => (dispatch: StateDispatch, history: any) => {
-  getWalletList().then(res => {
-    if (res.status === 1) {
+export const updateWalletList = () => (dispatch: StateDispatch) => {
+  return getWalletList().then(res => {
+    if (isSuccessResponse(res)) {
       const payload = res.result || []
-      if (!payload.length) {
-        history.push(`${Routes.WalletWizard}${WalletWizardPath.Welcome}`)
-      }
-      dispatch({
-        type: NeuronWalletActions.UpdateWalletList,
-        payload,
-      })
+      dispatch({ type: NeuronWalletActions.UpdateWalletList, payload })
       walletsCache.save(payload)
     } else {
       addNotification(failureResToNotification(res))(dispatch)
     }
+    return !!(res as any)?.result?.length
   })
 }
 
-export const updateWalletProperty = (params: Controller.UpdateWalletParams) => (
-  dispatch: StateDispatch,
-  history?: any
-) => {
-  updateWallet(params).then(res => {
-    if (res.status === 1) {
+export const updateWalletProperty = (params: Controller.UpdateWalletParams) => (dispatch: StateDispatch) => {
+  return updateWallet(params).then(res => {
+    if (isSuccessResponse(res)) {
       addPopup('update-wallet-successfully')(dispatch)
-      if (history) {
-        history.push(Routes.SettingsWallets)
-      }
     } else {
       addNotification(failureResToNotification(res))(dispatch)
     }
+    return res.status
   })
 }
 export const setCurrentWallet = (id: string) => (dispatch: StateDispatch) => {
   setRemoteCurrentWallet(id).then(res => {
-    if (res.status === 1) {
+    if (isSuccessResponse(res)) {
       dispatch({
         type: AppActions.Ignore,
         payload: null,
@@ -84,70 +70,46 @@ export const setCurrentWallet = (id: string) => (dispatch: StateDispatch) => {
   })
 }
 
-export const sendTransaction = (params: Controller.SendTransactionParams) => (
-  dispatch: StateDispatch,
-  history: any,
-  options?: {
-    type: 'unlock'
-  }
-) => {
+export const sendTransaction = (params: Controller.SendTransactionParams) => async (dispatch: StateDispatch) => {
   dispatch({
     type: AppActions.UpdateLoadings,
     payload: {
       sending: true,
     },
   })
-  setTimeout(() => {
-    sendTx(params)
-      .then(res => {
-        if (res.status === 1) {
-          dispatch({
-            type: AppActions.ClearNotificationsOfCode,
-            payload: ErrorCode.PasswordIncorrect,
-          })
-          if (options && options.type === 'unlock') {
-            dispatch({
-              type: AppActions.SetGlobalDialog,
-              payload: 'unlock-success',
-            })
-          } else {
-            history.push(Routes.History)
-          }
-        } else {
-          addNotification({
-            type: 'alert',
-            timestamp: +new Date(),
-            code: res.status,
-            content: (typeof res.message === 'string' ? res.message : res.message.content || '').replace(
-              /(\b"|"\b)/g,
-              ''
-            ),
-            meta: typeof res.message === 'string' ? undefined : res.message.meta,
-          })(dispatch)
-        }
-        dispatch({
-          type: AppActions.DismissPasswordRequest,
-        })
-      })
-      .catch(err => {
-        console.warn(err)
-      })
-      .finally(() => {
-        dispatch({
-          type: AppActions.UpdateLoadings,
-          payload: {
-            sending: false,
-          },
-        })
+  try {
+    const res = await sendTx(params)
+    if (isSuccessResponse(res)) {
+      dispatch({ type: AppActions.DismissPasswordRequest })
+    } else if (res.status !== ErrorCode.PasswordIncorrect) {
+      addNotification({
+        type: 'alert',
+        timestamp: +new Date(),
+        code: res.status,
+        content: typeof res.message === 'string' ? res.message : res.message.content,
+        meta: typeof res.message === 'string' ? undefined : res.message.meta,
+      })(dispatch)
+      dispatch({
+        type: AppActions.DismissPasswordRequest,
       })
-  }, 0)
+    }
+    return res.status
+  } catch (err) {
+    console.warn(err)
+    return ResponseCode.FAILURE
+  } finally {
+    dispatch({
+      type: AppActions.UpdateLoadings,
+      payload: { sending: false },
+    })
+  }
 }
 
 export const updateAddressListAndBalance = (params: Controller.GetAddressesByWalletIDParams) => (
   dispatch: StateDispatch
 ) => {
   getAddressesByWalletID(params).then(res => {
-    if (res.status === 1) {
+    if (isSuccessResponse(res)) {
       const addresses = res.result || []
       const balance = addressesToBalance(addresses)
       dispatch({
@@ -163,16 +125,13 @@ export const updateAddressListAndBalance = (params: Controller.GetAddressesByWal
 export const updateAddressDescription = (params: Controller.UpdateAddressDescriptionParams) => (
   dispatch: StateDispatch
 ) => {
-  const descriptionParams = {
-    address: params.address,
-    description: params.description,
-  }
+  const descriptionParams = { address: params.address, description: params.description }
   dispatch({
     type: NeuronWalletActions.UpdateAddressDescription,
     payload: descriptionParams,
   })
   updateRemoteAddressDescription(params).then(res => {
-    if (res.status === 1) {
+    if (isSuccessResponse(res)) {
       dispatch({
         type: NeuronWalletActions.UpdateAddressDescription,
         payload: descriptionParams,
@@ -183,42 +142,65 @@ export const updateAddressDescription = (params: Controller.UpdateAddressDescrip
   })
 }
 
-export const deleteWallet = (params: Controller.DeleteWalletParams) => (dispatch: StateDispatch) => {
+export const deleteWallet = (params: Controller.DeleteWalletParams) => async (dispatch: StateDispatch) => {
   dispatch({
-    type: AppActions.DismissPasswordRequest,
+    type: AppActions.UpdateLoadings,
+    payload: { sending: true },
   })
-  deleteRemoteWallet(params).then(res => {
-    if (res.status === 1) {
-      addPopup('delete-wallet-successfully')(dispatch)
+  try {
+    const res = await deleteRemoteWallet(params)
+    if (res.status !== ErrorCode.PasswordIncorrect) {
       dispatch({
-        type: AppActions.ClearNotificationsOfCode,
-        payload: ErrorCode.PasswordIncorrect,
+        type: AppActions.DismissPasswordRequest,
       })
-    } else {
-      addNotification(failureResToNotification(res))(dispatch)
+      if (isSuccessResponse(res)) {
+        addPopup('delete-wallet-successfully')(dispatch)
+      } else {
+        addNotification(failureResToNotification(res))(dispatch)
+      }
     }
-  })
+    return res.status
+  } catch (err) {
+    console.warn(err)
+    return 0
+  } finally {
+    dispatch({
+      type: AppActions.UpdateLoadings,
+      payload: { sending: false },
+    })
+  }
 }
 
-export const backupWallet = (params: Controller.BackupWalletParams) => (dispatch: StateDispatch) => {
+export const backupWallet = (params: Controller.BackupWalletParams) => async (dispatch: StateDispatch) => {
   dispatch({
-    type: AppActions.DismissPasswordRequest,
+    type: AppActions.UpdateLoadings,
+    payload: { sending: true },
   })
-  backupRemoteWallet(params).then(res => {
-    if (res.status === 1) {
+  try {
+    const res = await backupRemoteWallet(params)
+    if (res.status !== ErrorCode.PasswordIncorrect) {
       dispatch({
-        type: AppActions.ClearNotificationsOfCode,
-        payload: ErrorCode.PasswordIncorrect,
+        type: AppActions.DismissPasswordRequest,
       })
-    } else {
-      addNotification(failureResToNotification(res))(dispatch)
+      if (!isSuccessResponse(res)) {
+        addNotification(failureResToNotification(res))(dispatch)
+      }
     }
-  })
+    return res.status
+  } catch (err) {
+    console.warn(err)
+    return 0
+  } finally {
+    dispatch({
+      type: AppActions.UpdateLoadings,
+      payload: { sending: false },
+    })
+  }
 }
 
 export const updateNervosDaoData = (walletID: Controller.GetNervosDaoDataParams) => (dispatch: StateDispatch) => {
   getDaoData(walletID).then(res => {
-    if (res.status === 1) {
+    if (isSuccessResponse(res)) {
       dispatch({
         type: NeuronWalletActions.UpdateNervosDaoData,
         payload: { records: res.result },
@@ -235,16 +217,3 @@ export const clearNervosDaoData = () => (dispatch: StateDispatch) => {
     payload: emptyNervosDaoData,
   })
 }
-
-export default {
-  updateCurrentWallet,
-  updateWalletList,
-  updateWallet,
-  setCurrentWallet,
-  sendTransaction,
-  updateAddressListAndBalance,
-  updateAddressDescription,
-  deleteWallet,
-  backupWallet,
-  updateNervosDaoData,
-}
diff --git a/packages/neuron-ui/src/states/stateProvider/index.tsx b/packages/neuron-ui/src/states/stateProvider/provider.tsx
similarity index 83%
rename from packages/neuron-ui/src/states/stateProvider/index.tsx
rename to packages/neuron-ui/src/states/stateProvider/provider.tsx
index 607023ba25..51c6678942 100644
--- a/packages/neuron-ui/src/states/stateProvider/index.tsx
+++ b/packages/neuron-ui/src/states/stateProvider/provider.tsx
@@ -1,5 +1,5 @@
 import React, { createContext, useReducer, useContext } from 'react'
-import initStates from 'states/initStates'
+import initStates from 'states/init'
 import { StateDispatch, reducer } from './reducer'
 
 const basicDispatch = console.info
@@ -9,7 +9,7 @@ export const NeuronWalletContext = createContext<{ state: State.AppWithNeuronWal
   dispatch: basicDispatch,
 })
 
-const withProviders = (Comp: React.ComponentType) => (props: React.Props<any>) => {
+export const withProvider = (Comp: React.ComponentType) => (props: React.Props<any>) => {
   const [providers, dispatch] = useReducer(reducer, initStates)
 
   Object.defineProperty(Comp, 'displayName', {
@@ -26,4 +26,4 @@ const withProviders = (Comp: React.ComponentType) => (props: React.Props<any>) =
 export const useState = () => useContext(NeuronWalletContext).state
 export const useDispatch = () => useContext(NeuronWalletContext).dispatch
 
-export default withProviders
+export default withProvider
diff --git a/packages/neuron-ui/src/states/stateProvider/reducer.ts b/packages/neuron-ui/src/states/stateProvider/reducer.ts
index fc93ba77f3..478431d23a 100644
--- a/packages/neuron-ui/src/states/stateProvider/reducer.ts
+++ b/packages/neuron-ui/src/states/stateProvider/reducer.ts
@@ -1,6 +1,6 @@
 import produce, { Draft } from 'immer'
-import initStates from 'states/initStates'
-import { ConnectionStatus, ErrorCode } from 'utils/const'
+import initStates from 'states/init'
+import { ConnectionStatus, ErrorCode } from 'utils'
 
 export enum NeuronWalletActions {
   InitAppState = 'initAppState',
@@ -41,7 +41,6 @@ export enum AppActions {
   CleanTransactions = 'cleanTransactions',
   RequestPassword = 'requestPassword',
   DismissPasswordRequest = 'dismissPasswordRequest',
-  UpdatePassword = 'updatePassword',
   UpdateChainInfo = 'updateChainInfo',
   UpdateLoadings = 'updateLoadings',
   UpdateAlertDialog = 'updateAlertDialog',
@@ -72,7 +71,6 @@ export type StateAction =
   | { type: AppActions.CleanTransactions }
   | { type: AppActions.RequestPassword; payload: Omit<State.PasswordRequest, 'password'> }
   | { type: AppActions.DismissPasswordRequest }
-  | { type: AppActions.UpdatePassword; payload: string }
   | { type: AppActions.UpdateChainInfo; payload: Partial<State.App> }
   | { type: AppActions.UpdateLoadings; payload: any }
   | { type: AppActions.UpdateAlertDialog; payload: State.AlertDialog }
@@ -236,17 +234,13 @@ export const reducer = produce((state: Draft<State.AppWithNeuronWallet>, action:
       break
     }
     case AppActions.RequestPassword: {
-      state.app.passwordRequest = { ...action.payload, password: '' }
+      state.app.passwordRequest = action.payload
       break
     }
     case AppActions.DismissPasswordRequest: {
       state.app.passwordRequest = initStates.app.passwordRequest
       break
     }
-    case AppActions.UpdatePassword: {
-      state.app.passwordRequest.password = action.payload
-      break
-    }
     case AppActions.UpdateMessage: {
       /**
        * payload: {type,content, timestamp}
diff --git a/packages/neuron-ui/src/stories/Addresses.stories.tsx b/packages/neuron-ui/src/stories/Addresses.stories.tsx
index cecbe1192c..87a7841870 100644
--- a/packages/neuron-ui/src/stories/Addresses.stories.tsx
+++ b/packages/neuron-ui/src/stories/Addresses.stories.tsx
@@ -5,8 +5,7 @@ import StoryRouter from 'storybook-react-router'
 import { withKnobs, text, number } from '@storybook/addon-knobs'
 import { action } from '@storybook/addon-actions'
 import Addresses from 'components/Addresses'
-import initStates from 'states/initStates'
-import { NeuronWalletContext } from 'states/stateProvider'
+import { initStates, NeuronWalletContext } from 'states'
 import addressesStates from './data/addresses'
 
 const stories = storiesOf('Addresses', module).addDecorator(StoryRouter())
diff --git a/packages/neuron-ui/src/stories/BalanceSyncIcon.stories.tsx b/packages/neuron-ui/src/stories/BalanceSyncIcon.stories.tsx
index 3523605dc1..109b5280e0 100644
--- a/packages/neuron-ui/src/stories/BalanceSyncIcon.stories.tsx
+++ b/packages/neuron-ui/src/stories/BalanceSyncIcon.stories.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
-import { ConnectionStatus, SyncStatus } from 'utils/const'
+import { ConnectionStatus, SyncStatus } from 'utils'
 import BalanceSyncIcon, { BalanceSyncIconProps } from 'components/BalanceSyncingIcon'
 
 const stories = storiesOf('Balance Sync Icon', module)
diff --git a/packages/neuron-ui/src/stories/CopyZone.stories.tsx b/packages/neuron-ui/src/stories/CopyZone.stories.tsx
new file mode 100644
index 0000000000..c5dfb92bb5
--- /dev/null
+++ b/packages/neuron-ui/src/stories/CopyZone.stories.tsx
@@ -0,0 +1,19 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import CopyZone from 'widgets/CopyZone'
+
+const stories = storiesOf('Copy Zone', module)
+
+stories.add('Basic', () => {
+  return (
+    <CopyZone
+      content="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+      style={{ maxWidth: '300px' }}
+    >
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+      magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+      consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+      Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+    </CopyZone>
+  )
+})
diff --git a/packages/neuron-ui/src/stories/GeneralSetting.stories.tsx b/packages/neuron-ui/src/stories/GeneralSetting.stories.tsx
index a8823d6ac1..f84b7b4236 100644
--- a/packages/neuron-ui/src/stories/GeneralSetting.stories.tsx
+++ b/packages/neuron-ui/src/stories/GeneralSetting.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { withKnobs } from '@storybook/addon-knobs'
 import GeneralSetting from 'components/GeneralSetting'
-import initStates from 'states/initStates'
+import { initStates } from 'states'
 
 const states: { [title: string]: boolean } = {
   'Clear cell cache on': true,
diff --git a/packages/neuron-ui/src/stories/History.stories.tsx b/packages/neuron-ui/src/stories/History.stories.tsx
index 3f0365780a..b957545fb9 100644
--- a/packages/neuron-ui/src/stories/History.stories.tsx
+++ b/packages/neuron-ui/src/stories/History.stories.tsx
@@ -4,8 +4,7 @@ import StoryRouter from 'storybook-react-router'
 import { withKnobs, text, number, boolean } from '@storybook/addon-knobs'
 import { action } from '@storybook/addon-actions'
 import History from 'components/History'
-import initStates from 'states/initStates'
-import { NeuronWalletContext } from 'states/stateProvider'
+import { initStates, NeuronWalletContext } from 'states'
 import transactions from './data/transactions'
 
 const dispatch = (a: any) => action('Dispatch')(JSON.stringify(a, null, 2))
diff --git a/packages/neuron-ui/src/stories/Navbar.stories.tsx b/packages/neuron-ui/src/stories/Navbar.stories.tsx
index 91a6e9559a..308333c560 100644
--- a/packages/neuron-ui/src/stories/Navbar.stories.tsx
+++ b/packages/neuron-ui/src/stories/Navbar.stories.tsx
@@ -3,8 +3,7 @@ import { storiesOf } from '@storybook/react'
 import StoryRouter from 'storybook-react-router'
 import { action } from '@storybook/addon-actions'
 import Navbar from 'containers/Navbar'
-import initStates from 'states/initStates'
-import { NeuronWalletContext } from 'states/stateProvider'
+import { initStates, NeuronWalletContext } from 'states'
 
 const wallets: State.WalletIdentity[] = [{ id: 'wallet id', name: 'wallet name' }]
 
diff --git a/packages/neuron-ui/src/stories/NervosDAO.stories.tsx b/packages/neuron-ui/src/stories/NervosDAO.stories.tsx
index 8fb807d864..45e09807f6 100644
--- a/packages/neuron-ui/src/stories/NervosDAO.stories.tsx
+++ b/packages/neuron-ui/src/stories/NervosDAO.stories.tsx
@@ -4,8 +4,7 @@ import { storiesOf } from '@storybook/react'
 import { withKnobs, text } from '@storybook/addon-knobs'
 import { action } from '@storybook/addon-actions'
 import NervosDAO from 'components/NervosDAO'
-import initStates from 'states/initStates'
-import { NeuronWalletContext } from 'states/stateProvider'
+import { initStates, NeuronWalletContext } from 'states'
 import transactions from './data/transactions'
 import addresses from './data/addresses'
 
diff --git a/packages/neuron-ui/src/stories/NetworkEditor.stories.tsx b/packages/neuron-ui/src/stories/NetworkEditor.stories.tsx
new file mode 100644
index 0000000000..d62297b7ec
--- /dev/null
+++ b/packages/neuron-ui/src/stories/NetworkEditor.stories.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import StoryRouter from 'storybook-react-router'
+import { action } from '@storybook/addon-actions'
+import NetworkEditor from 'components/NetworkEditor'
+import { initStates, NeuronWalletContext } from 'states'
+
+const stories = storiesOf('Settings', module).addDecorator(StoryRouter())
+
+const dispatch = (dispatchAction: any) => action('dispatch')(dispatchAction)
+
+stories.add('Network Editor', () => {
+  return (
+    <NeuronWalletContext.Provider
+      value={{
+        state: initStates,
+        dispatch,
+      }}
+    >
+      <NetworkEditor />
+    </NeuronWalletContext.Provider>
+  )
+})
diff --git a/packages/neuron-ui/src/stories/NetworkSetting.stories.tsx b/packages/neuron-ui/src/stories/NetworkSetting.stories.tsx
index a8336c2ecc..ce7cda1263 100644
--- a/packages/neuron-ui/src/stories/NetworkSetting.stories.tsx
+++ b/packages/neuron-ui/src/stories/NetworkSetting.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 import StoryRouter from 'storybook-react-router'
 import NetworkSetting from 'components/NetworkSetting'
-import initStates from 'states/initStates'
+import { initStates } from 'states'
 
 const states: { [title: string]: State.Network[] } = {
   'Empty List': [],
diff --git a/packages/neuron-ui/src/stories/NetworkStatus.stories.tsx b/packages/neuron-ui/src/stories/NetworkStatus.stories.tsx
index c185ab0d89..62eb5540ad 100644
--- a/packages/neuron-ui/src/stories/NetworkStatus.stories.tsx
+++ b/packages/neuron-ui/src/stories/NetworkStatus.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { withKnobs, text, number } from '@storybook/addon-knobs'
 import NetworkStatus, { NetworkStatusProps } from 'components/NetworkStatus'
-import { SyncStatus } from 'utils/const'
+import { SyncStatus } from 'utils'
 
 const states: { [index: string]: NetworkStatusProps } = {
   Online: {
diff --git a/packages/neuron-ui/src/stories/Overview.stories.tsx b/packages/neuron-ui/src/stories/Overview.stories.tsx
index 008042a3ca..c73c96b726 100644
--- a/packages/neuron-ui/src/stories/Overview.stories.tsx
+++ b/packages/neuron-ui/src/stories/Overview.stories.tsx
@@ -4,8 +4,7 @@ import { withKnobs, text, boolean } from '@storybook/addon-knobs'
 import StoryRouter from 'storybook-react-router'
 import { action } from '@storybook/addon-actions'
 import Overview from 'components/Overview'
-import initStates from 'states/initStates'
-import { NeuronWalletContext } from 'states/stateProvider'
+import { initStates, NeuronWalletContext } from 'states'
 import transactions from './data/transactions'
 import addresses from './data/addresses'
 
diff --git a/packages/neuron-ui/src/stories/PasswordRequest.stories.tsx b/packages/neuron-ui/src/stories/PasswordRequest.stories.tsx
index 3777106d23..c00120e364 100644
--- a/packages/neuron-ui/src/stories/PasswordRequest.stories.tsx
+++ b/packages/neuron-ui/src/stories/PasswordRequest.stories.tsx
@@ -3,8 +3,7 @@ import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
 import StoryRouter from 'storybook-react-router'
 import PasswordRequest from 'components/PasswordRequest'
-import initStates from 'states/initStates'
-import { NeuronWalletContext } from 'states/stateProvider'
+import { initStates, NeuronWalletContext } from 'states'
 
 const dispatch = action('Dispatch')
 
@@ -16,7 +15,6 @@ const states: { [title: string]: State.AppWithNeuronWallet } = {
       passwordRequest: {
         walletID: '1',
         actionType: 'delete',
-        password: '',
       },
     },
   },
@@ -31,7 +29,6 @@ const states: { [title: string]: State.AppWithNeuronWallet } = {
       passwordRequest: {
         walletID: '1',
         actionType: 'delete',
-        password: '',
       },
     },
   },
@@ -46,7 +43,6 @@ const states: { [title: string]: State.AppWithNeuronWallet } = {
       passwordRequest: {
         walletID: '1',
         actionType: 'delete',
-        password: '123456',
       },
     },
   },
@@ -61,7 +57,6 @@ const states: { [title: string]: State.AppWithNeuronWallet } = {
       passwordRequest: {
         walletID: '1',
         actionType: 'backup',
-        password: '',
       },
     },
   },
@@ -76,7 +71,6 @@ const states: { [title: string]: State.AppWithNeuronWallet } = {
       passwordRequest: {
         walletID: '1',
         actionType: 'backup',
-        password: '123456',
       },
     },
   },
@@ -91,7 +85,6 @@ const states: { [title: string]: State.AppWithNeuronWallet } = {
       passwordRequest: {
         walletID: '1',
         actionType: 'unlock',
-        password: '',
       },
     },
   },
@@ -106,7 +99,6 @@ const states: { [title: string]: State.AppWithNeuronWallet } = {
       passwordRequest: {
         walletID: '1',
         actionType: 'send',
-        password: '123456',
       },
     },
   },
diff --git a/packages/neuron-ui/src/stories/PropertyList.stories.tsx b/packages/neuron-ui/src/stories/PropertyList.stories.tsx
deleted file mode 100644
index 39ceae5bd6..0000000000
--- a/packages/neuron-ui/src/stories/PropertyList.stories.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import React from 'react'
-import { storiesOf } from '@storybook/react'
-import PropertyList, { Property, CellStyles } from 'widgets/PropertyList'
-
-const states: { [title: string]: { properties: Property[] } } = {
-  basic: {
-    properties: Array.from({ length: 15 }, (_, idx) => ({
-      label: `Property ${idx}`.repeat((idx % 5) + 1),
-      value: `Value of property ${idx}`.repeat((idx % 5) + 1),
-    })),
-  },
-}
-
-const cellStyles: CellStyles = {
-  labelWidth: '100px',
-  valueWidth: '200px',
-}
-
-const stories = storiesOf('Property List', module)
-
-Object.entries(states).forEach(([title, props]) => {
-  stories.add(title, () => {
-    return <PropertyList {...props} cellStyles={cellStyles} />
-  })
-})
diff --git a/packages/neuron-ui/src/stories/Receive.stories.tsx b/packages/neuron-ui/src/stories/Receive.stories.tsx
index 5b708021bf..af0b6603fc 100644
--- a/packages/neuron-ui/src/stories/Receive.stories.tsx
+++ b/packages/neuron-ui/src/stories/Receive.stories.tsx
@@ -4,8 +4,7 @@ import { storiesOf } from '@storybook/react'
 import { withKnobs, text, number } from '@storybook/addon-knobs'
 import { action } from '@storybook/addon-actions'
 import Receive from 'components/Receive'
-import initStates from 'states/initStates'
-import { NeuronWalletContext } from 'states/stateProvider'
+import { initStates, NeuronWalletContext } from 'states'
 import addresses from './data/addresses'
 
 const dispatch = action('Dispatch')
diff --git a/packages/neuron-ui/src/stories/SettingTabs.stories.tsx b/packages/neuron-ui/src/stories/SettingTabs.stories.tsx
new file mode 100644
index 0000000000..2270b7f921
--- /dev/null
+++ b/packages/neuron-ui/src/stories/SettingTabs.stories.tsx
@@ -0,0 +1,23 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import StoryRouter from 'storybook-react-router'
+import { action } from '@storybook/addon-actions'
+import SettingTabs from 'components/SettingTabs'
+import { initStates, NeuronWalletContext } from 'states'
+
+const stories = storiesOf('Settings', module).addDecorator(StoryRouter())
+
+const dispatch = (dispatchAction: any) => action('dispatch')(dispatchAction)
+
+stories.add('Setting Tabs', () => {
+  return (
+    <NeuronWalletContext.Provider
+      value={{
+        state: initStates,
+        dispatch,
+      }}
+    >
+      <SettingTabs />
+    </NeuronWalletContext.Provider>
+  )
+})
diff --git a/packages/neuron-ui/src/stories/WalletEditor.stories.tsx b/packages/neuron-ui/src/stories/WalletEditor.stories.tsx
new file mode 100644
index 0000000000..cd9c23b7bf
--- /dev/null
+++ b/packages/neuron-ui/src/stories/WalletEditor.stories.tsx
@@ -0,0 +1,29 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import StoryRouter from 'storybook-react-router'
+import { action } from '@storybook/addon-actions'
+import WalletEditor from 'components/WalletEditor'
+import { initStates, NeuronWalletContext } from 'states'
+
+const wallets: State.WalletIdentity[] = [{ id: 'wallet-id', name: 'wallet name' }]
+
+const stories = storiesOf('Settings', module).addDecorator(StoryRouter())
+
+const dispatch = (dispatchAction: any) => action('dispatch')(dispatchAction)
+
+stories.add('Wallet Editor', () => {
+  return (
+    <NeuronWalletContext.Provider
+      value={{
+        state: {
+          ...initStates,
+          wallet: { ...initStates.wallet, id: wallets[0].id, name: wallets[0].name },
+          settings: { ...initStates.settings, wallets },
+        },
+        dispatch,
+      }}
+    >
+      <WalletEditor />
+    </NeuronWalletContext.Provider>
+  )
+})
diff --git a/packages/neuron-ui/src/stories/WalletSetting.stories.tsx b/packages/neuron-ui/src/stories/WalletSetting.stories.tsx
index 3ab85c71bc..e7ae0ac5ce 100644
--- a/packages/neuron-ui/src/stories/WalletSetting.stories.tsx
+++ b/packages/neuron-ui/src/stories/WalletSetting.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import { storiesOf } from '@storybook/react'
 import StoryRouter from 'storybook-react-router'
 import WalletSetting from 'components/WalletSetting'
-import initStates from 'states/initStates'
+import { initStates } from 'states'
 
 const states: { [title: string]: State.WalletIdentity[] } = {
   'Empty List': [],
diff --git a/packages/neuron-ui/src/stories/index.tsx b/packages/neuron-ui/src/stories/index.tsx
index 6e50376885..1a33c54c31 100644
--- a/packages/neuron-ui/src/stories/index.tsx
+++ b/packages/neuron-ui/src/stories/index.tsx
@@ -7,6 +7,9 @@ import './Overview.stories'
 import './Addresses.stories'
 import './History.stories'
 import './Receive.stories'
+import './SettingTabs.stories'
+import './WalletEditor.stories'
+import './NetworkEditor.stories'
 import './TransactionList.stories'
 import './GeneralSetting.stories'
 import './WalletSetting.stories'
@@ -14,7 +17,6 @@ import './NetworkSetting.stories'
 import './PasswordRequest.stories'
 import './TransactionFeePanel.stories'
 import './NetworkStatus.stories'
-import './PropertyList.stories'
 import './AlertDialog.stories'
 import './NervosDAO.stories'
 import './DepositDialog.stories'
@@ -31,3 +33,4 @@ import './CompensationProgressBar.stories'
 import './BalanceSyncIcon.stories'
 
 import './Navbar.stories'
+import './CopyZone.stories'
diff --git a/packages/neuron-ui/src/stories/styles.scss b/packages/neuron-ui/src/stories/styles.scss
index 00218907c3..24bc0371bc 100644
--- a/packages/neuron-ui/src/stories/styles.scss
+++ b/packages/neuron-ui/src/stories/styles.scss
@@ -9,3 +9,7 @@ body {
     linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
   background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
 }
+
+#root {
+  grid-area: 1/1/5/5;
+}
diff --git a/packages/neuron-ui/src/styles/index.scss b/packages/neuron-ui/src/styles/index.scss
index e08f43a0e5..847fb1fe42 100755
--- a/packages/neuron-ui/src/styles/index.scss
+++ b/packages/neuron-ui/src/styles/index.scss
@@ -6,6 +6,7 @@
   outline: none !important;
   -webkit-tap-highlight-color: none !important;
   cursor: default !important;
+  user-select: none;
 }
 
 [type='button'],
@@ -25,7 +26,7 @@ html {
 }
 
 body {
-  @include RegularText;
+  @include regular-text;
   margin: 0;
   padding: 0;
   background: #f8f8f8;
@@ -34,14 +35,19 @@ body {
 }
 
 .label {
-  padding: 3px 4px;
-  font-size: 12px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 18px;
+  width: 58px;
+  padding: 0 4px;
+  font-size: 9px;
   font-weight: 600;
-  line-height: 1;
   color: #fff;
   border-radius: 2px;
   box-shadow: inset 0 -1px 0 rgba(27, 31, 35, 0.12);
   text-transform: capitalize;
+  margin-left: 10px;
 
   &.primary {
     background-color: #6f42c1;
@@ -63,10 +69,6 @@ body {
   }
 }
 
-.monospacedFont {
-  font-family: monospace;
-}
-
 .ms-DetailsHeader-cell:hover {
   background-color: inherit;
 }
@@ -164,6 +166,16 @@ body {
 }
 
 // hack fabric choice field
+.ms-ChoiceField-field {
+  &::before {
+    top: 4px;
+    left: 3px;
+  }
+  &::after {
+    top: 9px !important;
+    left: 8px !important;
+  }
+}
 .ms-ChoiceField-field.is-checked {
   &::before,
   &::after {
diff --git a/packages/neuron-ui/src/styles/layout.scss b/packages/neuron-ui/src/styles/layout.scss
index f90e8c4afa..57fa84e72d 100644
--- a/packages/neuron-ui/src/styles/layout.scss
+++ b/packages/neuron-ui/src/styles/layout.scss
@@ -1,4 +1,4 @@
-:root{
+:root {
   --sidebar-width: 200px;
 }
 
@@ -25,7 +25,7 @@ footer {
 .main-content {
   grid-area: content;
   overflow: auto;
-  padding: 15px 30px;
+  padding: 30px 30px;
 }
 
 .notification {
@@ -33,7 +33,7 @@ footer {
   z-index: 1;
 }
 
-.dialog{
+.dialog {
   grid-area: 1/1/5/5;
   dialog {
     margin: 0;
diff --git a/packages/neuron-ui/src/styles/mixin.scss b/packages/neuron-ui/src/styles/mixin.scss
index 46f95a10f3..b4704d46b3 100644
--- a/packages/neuron-ui/src/styles/mixin.scss
+++ b/packages/neuron-ui/src/styles/mixin.scss
@@ -1,26 +1,26 @@
 // font
-@mixin BoldText {
+@mixin bold-text {
   font-family: 'SourceCodePro-Regular', 'SourceHanSansCN-Regular', monospace;
   font-weight: 900;
 }
 
-@mixin SemiBoldText {
+@mixin semi-bold-text {
   font-family: 'SourceCodePro-Regular', 'SourceHanSansCN-Regular', monospace;
   font-weight: 700;
 }
 
-@mixin MediumText {
+@mixin medium-text {
   font-family: 'SourceCodePro-Regular', 'SourceHanSansCN-Regular', monospace;
   font-weight: 500;
 }
 
-@mixin RegularText {
+@mixin regular-text {
   font-family: 'SourceCodePro-Regular', 'SourceHanSansCN-Regular', monospace;
   font-weight: 400;
 }
 
 // layout
-@mixin dialogContainer {
+@mixin dialog-container {
   border: none;
   border-radius: 2px;
   box-shadow: 4px 7px 10px 0 rgba(0, 0, 0, 0.22);
@@ -29,19 +29,19 @@
   box-sizing: border-box;
 }
 
-@mixin dialogTitle {
-  @include BoldText;
+@mixin dialog-title {
+  @include bold-text;
   font-size: 1.125rem;
   letter-spacing: 0.9px;
   margin-bottom: 25px;
 }
 
-@mixin dialogFooter {
+@mixin dialog-footer {
   display: flex;
   justify-content: flex-end;
 }
 
-@mixin dialogConfirmButton {
+@mixin dialog-confirm-button {
   border: none;
   width: 5.125rem;
   height: 1.875rem;
@@ -60,12 +60,12 @@
   backdrop-filter: blur(1px);
 }
 
-@mixin disabledBtn {
+@mixin disabled-button {
   background-color: #e3e3e3;
   color: #666;
 }
 
-@mixin formFooter {
+@mixin form-footer {
   display: flex;
   justify-content: flex-end;
   align-items: center;
@@ -80,7 +80,7 @@
   }
 }
 
-@mixin descriptionField {
+@mixin description-field {
   display: flex;
 
   & > div {
@@ -100,3 +100,18 @@
     border-color: #333 !important;
   }
 }
+
+@mixin page-title {
+  @include bold-text;
+  font-size: 1.375rem;
+  color: #000;
+  padding: 0;
+  margin: 0 0 23px 0;
+}
+
+@mixin text-overflow-ellipsis {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
diff --git a/packages/neuron-ui/src/tests/calculation/calculateAPC/index.test.ts b/packages/neuron-ui/src/tests/calculation/calculateAPC/index.test.ts
index 7b41349e39..b111a7d8dd 100644
--- a/packages/neuron-ui/src/tests/calculation/calculateAPC/index.test.ts
+++ b/packages/neuron-ui/src/tests/calculation/calculateAPC/index.test.ts
@@ -2,12 +2,9 @@ import calculateAPC from 'utils/calculateAPC'
 import fixtures from './fixtures.json'
 
 describe('calculate the apc', () => {
-  const fixtureTable = Object.entries(fixtures).map(([title, { startYearNumber, endYearNumber, expected }]) => [
-    title,
-    startYearNumber,
-    endYearNumber,
-    expected,
-  ])
+  const fixtureTable: [string, number, number, number][] = Object.entries(
+    fixtures
+  ).map(([title, { startYearNumber, endYearNumber, expected }]) => [title, startYearNumber, endYearNumber, expected])
 
   test.each(fixtureTable)(`%s`, (_title, startYearNumber, endYearNumber, expected) => {
     const apc = calculateAPC({
diff --git a/packages/neuron-ui/src/tests/formatters/CKBToShannonFormatter/fixtures.ts b/packages/neuron-ui/src/tests/formatters/CKBToShannonFormatter/fixtures.ts
index 76d9fd68c3..cda2254715 100644
--- a/packages/neuron-ui/src/tests/formatters/CKBToShannonFormatter/fixtures.ts
+++ b/packages/neuron-ui/src/tests/formatters/CKBToShannonFormatter/fixtures.ts
@@ -1,4 +1,4 @@
-import { CapacityUnit } from 'utils/const'
+import { CapacityUnit } from 'utils/enums'
 
 const fixtures = [
   {
diff --git a/packages/neuron-ui/src/tests/formatters/CKBToShannonFormatter/index.test.ts b/packages/neuron-ui/src/tests/formatters/CKBToShannonFormatter/index.test.ts
index 0e5565f06f..ba6cd25116 100644
--- a/packages/neuron-ui/src/tests/formatters/CKBToShannonFormatter/index.test.ts
+++ b/packages/neuron-ui/src/tests/formatters/CKBToShannonFormatter/index.test.ts
@@ -1,8 +1,12 @@
-import { CapacityUnit } from 'utils/const'
 import { CKBToShannonFormatter } from 'utils/formatters'
+import { CapacityUnit } from 'utils'
 import fixtures from './fixtures'
 
-const fixtureTable = fixtures.map(({ ckb: { amount, unit }, expected }) => [amount, unit, expected])
+const fixtureTable: [string, CapacityUnit, string][] = fixtures.map(({ ckb: { amount, unit }, expected }) => [
+  amount,
+  unit,
+  expected,
+])
 
 describe(`Verify CKB to Shannons formatter`, () => {
   test.each(fixtureTable)(`%s %s => %s shannons`, (amount: string, unit: CapacityUnit, expected: string) => {
diff --git a/packages/neuron-ui/src/tests/validators/verifyAmount/fixtures.ts b/packages/neuron-ui/src/tests/validators/verifyAmount/fixtures.ts
index 9dcd4ac08c..341239319b 100644
--- a/packages/neuron-ui/src/tests/validators/verifyAmount/fixtures.ts
+++ b/packages/neuron-ui/src/tests/validators/verifyAmount/fixtures.ts
@@ -1,4 +1,4 @@
-import { ErrorCode } from 'utils/const'
+import { ErrorCode } from 'utils/enums'
 
 const fixtures: {
   [title: string]: {
diff --git a/packages/neuron-ui/src/tests/validators/verifyAmount/index.test.ts b/packages/neuron-ui/src/tests/validators/verifyAmount/index.test.ts
index 9efb3336d9..84553e9eb2 100644
--- a/packages/neuron-ui/src/tests/validators/verifyAmount/index.test.ts
+++ b/packages/neuron-ui/src/tests/validators/verifyAmount/index.test.ts
@@ -1,5 +1,5 @@
 import { verifyAmount } from 'utils/validators'
-import { ErrorCode } from '../../../utils/const'
+import { ErrorCode } from 'utils/enums'
 import fixtures from './fixtures'
 
 const fixtureTable = Object.entries(fixtures).map(([title, { amount, expected }]) => [title, amount, expected])
diff --git a/packages/neuron-ui/src/tests/validators/verifyNetworkName/fixtures.ts b/packages/neuron-ui/src/tests/validators/verifyNetworkName/fixtures.ts
index ea59d674e6..8691608975 100644
--- a/packages/neuron-ui/src/tests/validators/verifyNetworkName/fixtures.ts
+++ b/packages/neuron-ui/src/tests/validators/verifyNetworkName/fixtures.ts
@@ -1,4 +1,4 @@
-import { ErrorCode } from 'utils/const'
+import { ErrorCode } from 'utils/enums'
 
 const fixtures: {
   [title: string]: {
diff --git a/packages/neuron-ui/src/tests/validators/verifyNetworkName/index.test.ts b/packages/neuron-ui/src/tests/validators/verifyNetworkName/index.test.ts
index 43b350166a..8c686f482a 100644
--- a/packages/neuron-ui/src/tests/validators/verifyNetworkName/index.test.ts
+++ b/packages/neuron-ui/src/tests/validators/verifyNetworkName/index.test.ts
@@ -1,5 +1,5 @@
 import { verifyNetworkName } from 'utils/validators'
-import { ErrorCode } from 'utils/const'
+import { ErrorCode } from 'utils/enums'
 import fixtures from './fixtures'
 
 const fixtureTable = Object.entries(fixtures).map(([title, { name, usedNames, expected }]) => [
diff --git a/packages/neuron-ui/src/tests/validators/verifyURL/fixtures.ts b/packages/neuron-ui/src/tests/validators/verifyURL/fixtures.ts
index 7a2b71fea9..c77dc46592 100644
--- a/packages/neuron-ui/src/tests/validators/verifyURL/fixtures.ts
+++ b/packages/neuron-ui/src/tests/validators/verifyURL/fixtures.ts
@@ -1,4 +1,4 @@
-import { ErrorCode } from 'utils/const'
+import { ErrorCode } from 'utils/enums'
 
 const fixtures: {
   [title: string]: {
diff --git a/packages/neuron-ui/src/theme.tsx b/packages/neuron-ui/src/theme.tsx
index 086f2f1375..d0eb5b15ca 100644
--- a/packages/neuron-ui/src/theme.tsx
+++ b/packages/neuron-ui/src/theme.tsx
@@ -59,7 +59,7 @@ registerIcons({
     completed: <SuccessIcon size="16px" />,
     cancel: <DismissIcon size="16px" />,
     MiniCopy: <CopyIcon size="small" color={semanticColors.primaryButtonBackground} />,
-    Search: <SearchIcon size="16px" color="#000" />,
+    Search: <SearchIcon size="14px" color="#000" />,
     FirstPage: <LinkTopIcon size="16px" color={semanticColors.menuIcon} style={{ transform: 'rotate(-90deg)' }} />,
     LastPage: <LinkBottomIcon size="16px" color={semanticColors.menuIcon} style={{ transform: 'rotate(-90deg)' }} />,
     PrevPage: <LinkUpIcon size="16px" color={semanticColors.menuIcon} style={{ transform: 'rotate(-90deg)' }} />,
diff --git a/packages/neuron-ui/src/types/App/index.d.ts b/packages/neuron-ui/src/types/App/index.d.ts
index f506e48023..70e283ee36 100644
--- a/packages/neuron-ui/src/types/App/index.d.ts
+++ b/packages/neuron-ui/src/types/App/index.d.ts
@@ -74,7 +74,6 @@ declare namespace State {
   interface PasswordRequest {
     readonly actionType: 'send' | 'backup' | 'delete' | 'unlock' | null
     readonly walletID: string
-    readonly password: string
   }
 
   type AlertDialog = Readonly<{ title: string; message: string }> | null
@@ -100,7 +99,6 @@ declare namespace State {
       sending: boolean
       addressList: boolean
       transactionList: boolean
-      network: boolean
     }>
     readonly showTopAlert: boolean
     readonly showAllNotifications: boolean
diff --git a/packages/neuron-ui/src/types/Controller/index.d.ts b/packages/neuron-ui/src/types/Controller/index.d.ts
index ae55e1cdf7..6749a3342c 100644
--- a/packages/neuron-ui/src/types/Controller/index.d.ts
+++ b/packages/neuron-ui/src/types/Controller/index.d.ts
@@ -3,6 +3,11 @@ declare namespace Controller {
     url: string
     title: string
   }
+
+  interface ShowSettingsParams {
+    tab: 'general' | 'wallets' | 'networks'
+  }
+
   interface CreateWalletParams {
     name: string
     mnemonic: string
@@ -161,4 +166,10 @@ declare namespace Controller {
       data: string
     }
   }
+
+  namespace ExportTransactions {
+    interface Params {
+      walletID: string
+    }
+  }
 }
diff --git a/packages/neuron-ui/src/types/Subject/index.d.ts b/packages/neuron-ui/src/types/Subject/index.d.ts
index 0348084b50..41b81445a3 100644
--- a/packages/neuron-ui/src/types/Subject/index.d.ts
+++ b/packages/neuron-ui/src/types/Subject/index.d.ts
@@ -32,4 +32,5 @@ declare namespace Subject {
     version: string
     releaseNotes: string
   }
+  type URL = string
 }
diff --git a/packages/neuron-ui/src/types/global/index.d.ts b/packages/neuron-ui/src/types/global/index.d.ts
index 63fc4dd47b..b82cd55e4c 100644
--- a/packages/neuron-ui/src/types/global/index.d.ts
+++ b/packages/neuron-ui/src/types/global/index.d.ts
@@ -5,7 +5,8 @@ declare interface Window {
     getCurrentWindow: Function
     getGlobal: (name: string) => any
     require: (module: string) => any
-    process?: any
+    process: any
+    app: any
   }
   require: any
   nativeImage: any
@@ -14,6 +15,10 @@ declare interface Window {
     on(channel: string, listener: Function)
     removeListener(channel: string, listener: Function)
     removeAllListeners(channel: string)
+    sendSync(channel: string, ...args: any[]): any
+  }
+  neuron: {
+    role: 'main' | 'settings'
   }
 }
 
diff --git a/packages/neuron-ui/src/utils/calculateAPC.ts b/packages/neuron-ui/src/utils/calculateAPC.ts
index a49db8c794..c2471c6101 100644
--- a/packages/neuron-ui/src/utils/calculateAPC.ts
+++ b/packages/neuron-ui/src/utils/calculateAPC.ts
@@ -29,7 +29,7 @@ const apcInPeriod = ({ startYearNumber, endYearNumber }: { startYearNumber: numb
   return rate
 }
 
-const calculateAPC = (
+export const calculateAPC = (
   { startYearNumber, endYearNumber }: { startYearNumber: number; endYearNumber: number },
   scale: boolean = true
 ) => {
diff --git a/packages/neuron-ui/src/utils/calculateClaimEpochValue.ts b/packages/neuron-ui/src/utils/calculateClaimEpochValue.ts
index 96802cc92e..4168164451 100644
--- a/packages/neuron-ui/src/utils/calculateClaimEpochValue.ts
+++ b/packages/neuron-ui/src/utils/calculateClaimEpochValue.ts
@@ -6,7 +6,7 @@ interface EpochInfo {
   length: bigint
 }
 
-export default (depositEpochInfo: EpochInfo, withdrawingEpochInfo: EpochInfo) => {
+export const calculateClaimEpochValue = (depositEpochInfo: EpochInfo, withdrawingEpochInfo: EpochInfo) => {
   let depositedEpochs = withdrawingEpochInfo.number - depositEpochInfo.number
   const depositEpochFraction = depositEpochInfo.index * withdrawingEpochInfo.length
   const currentEpochFraction = withdrawingEpochInfo.index * depositEpochInfo.length
@@ -21,3 +21,5 @@ export default (depositEpochInfo: EpochInfo, withdrawingEpochInfo: EpochInfo) =>
     Number(depositEpochInfo.number + minLockEpochs) + Number(depositEpochInfo.index) / Number(depositEpochInfo.length)
   return targetEpochValue
 }
+
+export default calculateClaimEpochValue
diff --git a/packages/neuron-ui/src/utils/calculateFee.ts b/packages/neuron-ui/src/utils/calculateFee.ts
index e36fa958e5..709c2a0390 100644
--- a/packages/neuron-ui/src/utils/calculateFee.ts
+++ b/packages/neuron-ui/src/utils/calculateFee.ts
@@ -1,4 +1,4 @@
-export default (tx: any) => {
+export const calculateFee = (tx: any) => {
   if (!tx) {
     return '0'
   }
@@ -13,3 +13,5 @@ export default (tx: any) => {
 
   return (inputCapacities - outputCapacities).toString()
 }
+
+export default calculateFee
diff --git a/packages/neuron-ui/src/utils/canvasActions.ts b/packages/neuron-ui/src/utils/canvasActions.ts
deleted file mode 100644
index 36fd787534..0000000000
--- a/packages/neuron-ui/src/utils/canvasActions.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export interface Point {
-  x: number
-  y: number
-}
-export const drawPolygon = (_canvas: any, points: Point[], config: { color?: string }) => {
-  const canvas = _canvas
-  if (points.length < 3) {
-    throw new Error('Not a Polygon')
-  }
-  canvas.beginPath()
-  canvas.moveTo(points[0].x, points[0].y)
-  points.slice(1).forEach((p: Point) => {
-    canvas.lineTo(p.x, p.y)
-  })
-  canvas.lineTo(points[0].x, points[0].y)
-  canvas.lineWidth = 4
-  canvas.strokeStyle = config.color || 'red'
-  canvas.stroke()
-}
-
-export default undefined
diff --git a/packages/neuron-ui/src/utils/const.ts b/packages/neuron-ui/src/utils/const.ts
index 0929809404..b1ea7c5da8 100644
--- a/packages/neuron-ui/src/utils/const.ts
+++ b/packages/neuron-ui/src/utils/const.ts
@@ -19,120 +19,16 @@ export const MIN_DEPOSIT_AMOUNT = 102
 
 export const SHANNON_CKB_RATIO = 1e8
 
-export const MEDIUM_FEE_RATE = 6000
+export const MEDIUM_FEE_RATE = 2000
 export const WITHDRAW_EPOCHS = 180
 export const IMMATURE_EPOCHS = 4
 export const MILLISECONDS_IN_YEAR = 365 * 24 * 3600 * 1000
 export const HOURS_PER_EPOCH = 4
 export const HOURS_PER_DAY = 24
 
-export const CONNECTING_DEADLINE = Date.now() + 10_000
+export const INIT_SEND_PRICE = '1000'
 
 export const NERVOS_DAO_RFC_URL =
   'https://www.github.com/nervosnetwork/rfcs/blob/master/rfcs/0023-dao-deposit-withdraw/0023-dao-deposit-withdraw.md'
 
-export enum ConnectionStatus {
-  Online = 'online',
-  Offline = 'offline',
-  Connecting = 'connecting',
-}
-
-export enum Routes {
-  Launch = '/',
-  Overview = '/overview',
-  WalletWizard = '/wizard',
-  Wallet = '/wallet',
-  Send = '/send',
-  Receive = '/receive',
-  History = '/history',
-  Transaction = '/transaction',
-  Addresses = '/addresses',
-  Settings = '/settings',
-  SettingsGeneral = '/settings/general',
-  SettingsWallets = '/settings/wallets',
-  SettingsNetworks = '/settings/networks',
-  CreateWallet = '/wallets/new',
-  ImportWallet = '/wallets/import',
-  ImportKeystore = '/keystore/import',
-  NetworkEditor = '/network',
-  WalletEditor = '/editwallet',
-  Prompt = '/prompt',
-  NervosDAO = '/nervos-dao',
-  SpecialAssets = '/special-assets',
-}
-
-export enum CapacityUnit {
-  CKB = 'ckb',
-  CKKB = 'ckkb',
-  CKGB = 'ckgb',
-}
-
-export enum Price {
-  Immediately = '18000',
-  TenBlocks = '6000',
-  HundredBlocks = '3000',
-  FiveHundredsBlocks = '0',
-}
-
-export const PlaceHolders = {
-  send: {
-    Calculating: '······',
-    Amount: 'eg: 100',
-  },
-}
-
-export enum MnemonicAction {
-  Create = 'create',
-  Verify = 'verify',
-  Import = 'import',
-}
-
-export const FULL_SCREENS = [`${Routes.Transaction}/`, `/wizard/`, `/keystore/`]
-
-export enum ErrorCode {
-  // Errors from RPC
-  ErrorFromRPC = -3,
-  // Errors from neuron-wallet
-  AmountNotEnough = 100,
-  AmountTooSmall = 101,
-  PasswordIncorrect = 103,
-  NodeDisconnected = 104,
-  CapacityNotEnoughForChange = 105,
-  LocktimeAmountTooSmall = 107,
-  AddressNotFound = 108,
-  // Parameter validation errors from neuron-ui
-  FieldRequired = 201,
-  FieldUsed = 202,
-  FieldTooLong = 203,
-  FieldTooShort = 204,
-  FieldInvalid = 205,
-  DecimalExceed = 206,
-  NotNegative = 207,
-  ProtocolRequired = 208,
-  NoWhiteSpaces = 209,
-  FieldIrremovable = 301,
-  FieldNotFound = 303,
-  CameraUnavailable = 304,
-  AddressIsEmpty = 305,
-  MainnetAddressRequired = 306,
-  TestnetAddressRequired = 307,
-}
-
-export enum SyncStatus {
-  SyncNotStart,
-  SyncPending,
-  Syncing,
-  SyncCompleted,
-}
-
-export const SyncStatusThatBalanceUpdating = [SyncStatus.Syncing, SyncStatus.SyncPending]
-
-export enum PRESET_SCRIPT {
-  Locktime = 'SingleMultiSign',
-}
-
-export enum CompensationPeriod {
-  SUGGEST_START = 0.767,
-  REQUEST_START = 0.967,
-  REQUEST_END = 1,
-}
+export const LOCALES = ['zh', 'zh-TW', 'en', 'en-US'] as const
diff --git a/packages/neuron-ui/src/utils/enums.ts b/packages/neuron-ui/src/utils/enums.ts
new file mode 100644
index 0000000000..2e050cedfe
--- /dev/null
+++ b/packages/neuron-ui/src/utils/enums.ts
@@ -0,0 +1,108 @@
+export enum ConnectionStatus {
+  Online = 'online',
+  Offline = 'offline',
+  Connecting = 'connecting',
+}
+
+export enum RoutePath {
+  Launch = '/',
+  Overview = '/overview',
+  WalletWizard = '/wizard',
+  Wallet = '/wallet',
+  Send = '/send',
+  Receive = '/receive',
+  History = '/history',
+  Transaction = '/transaction',
+  Addresses = '/addresses',
+  Settings = '/settings',
+  SettingsGeneral = '/settings/general',
+  SettingsWallets = '/settings/wallets',
+  SettingsNetworks = '/settings/networks',
+  CreateWallet = '/wallets/new',
+  ImportWallet = '/wallets/import',
+  ImportKeystore = '/keystore/import',
+  NetworkEditor = '/network',
+  WalletEditor = '/editwallet',
+  Prompt = '/prompt',
+  NervosDAO = '/nervos-dao',
+  SpecialAssets = '/special-assets',
+}
+
+export enum CapacityUnit {
+  CKB = 'ckb',
+  CKKB = 'ckkb',
+  CKGB = 'ckgb',
+}
+
+export enum Price {
+  High = '5000',
+  Medium = '2000',
+  Low = '1000',
+  Zero = '0',
+}
+
+export const PlaceHolders = {
+  send: {
+    Calculating: '······',
+    Amount: 'eg: 100',
+  },
+}
+
+export enum MnemonicAction {
+  Create = 'create',
+  Verify = 'verify',
+  Import = 'import',
+}
+
+export enum ErrorCode {
+  // Errors from RPC
+  ErrorFromRPC = -3,
+  // Errors from neuron-wallet
+  AmountNotEnough = 100,
+  AmountTooSmall = 101,
+  PasswordIncorrect = 103,
+  NodeDisconnected = 104,
+  CapacityNotEnoughForChange = 105,
+  LocktimeAmountTooSmall = 107,
+  AddressNotFound = 108,
+  // Parameter validation errors from neuron-ui
+  FieldRequired = 201,
+  FieldUsed = 202,
+  FieldTooLong = 203,
+  FieldTooShort = 204,
+  FieldInvalid = 205,
+  DecimalExceed = 206,
+  NotNegative = 207,
+  ProtocolRequired = 208,
+  NoWhiteSpaces = 209,
+  FieldIrremovable = 301,
+  FieldNotFound = 303,
+  CameraUnavailable = 304,
+  AddressIsEmpty = 305,
+  MainnetAddressRequired = 306,
+  TestnetAddressRequired = 307,
+}
+
+export enum SyncStatus {
+  SyncNotStart,
+  SyncPending,
+  Syncing,
+  SyncCompleted,
+}
+
+export const SyncStatusThatBalanceUpdating = [SyncStatus.Syncing, SyncStatus.SyncPending]
+
+export enum PresetScript {
+  Locktime = 'SingleMultiSign',
+}
+
+export enum CompensationPeriod {
+  SUGGEST_START = 0.767,
+  REQUEST_START = 0.967,
+  REQUEST_END = 1,
+}
+
+export enum ResponseCode {
+  FAILURE,
+  SUCCESS,
+}
diff --git a/packages/neuron-ui/src/utils/formatters.ts b/packages/neuron-ui/src/utils/formatters.ts
index aec9c15b51..9b4d637c54 100644
--- a/packages/neuron-ui/src/utils/formatters.ts
+++ b/packages/neuron-ui/src/utils/formatters.ts
@@ -1,4 +1,4 @@
-import { CapacityUnit } from './const'
+import { CapacityUnit } from './enums'
 
 const base = 10e9
 const numberParser = (value: string, exchange: string) => {
@@ -212,16 +212,3 @@ export const difficultyFormatter = (value: bigint) => {
 
   return `${localNumberFormatter(value)} H`
 }
-
-export default {
-  queryFormatter,
-  currencyFormatter,
-  CKBToShannonFormatter,
-  shannonToCKBFormatter,
-  localNumberFormatter,
-  uniformTimeFormatter,
-  difficultyFormatter,
-  addressesToBalance,
-  outputsToTotalAmount,
-  failureResToNotification,
-}
diff --git a/packages/neuron-ui/src/utils/generateWalletName.ts b/packages/neuron-ui/src/utils/generateWalletName.ts
index ac4dc7cd39..1a36c3251a 100644
--- a/packages/neuron-ui/src/utils/generateWalletName.ts
+++ b/packages/neuron-ui/src/utils/generateWalletName.ts
@@ -1,4 +1,4 @@
-const generateWalletName = (wallets: Readonly<State.WalletIdentity[]>, baseNum: number = 0, t: any): string => {
+export const generateWalletName = (wallets: Readonly<State.WalletIdentity[]>, baseNum: number = 0, t: any): string => {
   const walletName = t('wizard.wallet-suffix', { suffix: baseNum })
   if (wallets.some(wallet => wallet.name === walletName)) {
     return generateWalletName(wallets, baseNum + 1, t)
diff --git a/packages/neuron-ui/src/utils/getCompensatedTime.ts b/packages/neuron-ui/src/utils/getCompensatedTime.ts
index b94dfd8076..5e39b3217b 100644
--- a/packages/neuron-ui/src/utils/getCompensatedTime.ts
+++ b/packages/neuron-ui/src/utils/getCompensatedTime.ts
@@ -5,7 +5,7 @@ export interface CompensatedTimeParams {
   depositEpochValue: number
 }
 
-export default ({ currentEpochValue, depositEpochValue }: CompensatedTimeParams) => {
+export const getCompensatedTime = ({ currentEpochValue, depositEpochValue }: CompensatedTimeParams) => {
   const totalHours = Math.floor((currentEpochValue - depositEpochValue) * HOURS_PER_EPOCH)
   const days = Math.floor(totalHours / HOURS_PER_DAY)
   const hours = totalHours % HOURS_PER_DAY
@@ -15,3 +15,5 @@ export default ({ currentEpochValue, depositEpochValue }: CompensatedTimeParams)
     hours,
   }
 }
+
+export default getCompensatedTime
diff --git a/packages/neuron-ui/src/utils/getCompensationPeriod.ts b/packages/neuron-ui/src/utils/getCompensationPeriod.ts
index 5889553d1d..4e3a432d74 100644
--- a/packages/neuron-ui/src/utils/getCompensationPeriod.ts
+++ b/packages/neuron-ui/src/utils/getCompensationPeriod.ts
@@ -5,7 +5,7 @@ export interface CompensationPeriodParams {
   endEpochValue: number
 }
 
-const getCompensationPeriod = ({ currentEpochValue, endEpochValue }: CompensationPeriodParams) => {
+export const getCompensationPeriod = ({ currentEpochValue, endEpochValue }: CompensationPeriodParams) => {
   const pastEpochs = currentEpochValue - endEpochValue + WITHDRAW_EPOCHS
   const totalHours = Math.ceil((WITHDRAW_EPOCHS - pastEpochs) * HOURS_PER_EPOCH)
   const leftDays = Math.floor(totalHours / HOURS_PER_DAY)
diff --git a/packages/neuron-ui/src/utils/getCurrentUrl.ts b/packages/neuron-ui/src/utils/getCurrentUrl.ts
index ed51010b1e..2cf47fe3d3 100644
--- a/packages/neuron-ui/src/utils/getCurrentUrl.ts
+++ b/packages/neuron-ui/src/utils/getCurrentUrl.ts
@@ -1,4 +1,6 @@
-export default (id: string, networks: Readonly<State.Network[]>) => {
+export const getCurrentUrl = (id: string, networks: Readonly<State.Network[]>) => {
   const network = networks.find(n => n.id === id)
   return network?.remote
 }
+
+export default getCurrentUrl
diff --git a/packages/neuron-ui/src/utils/getDAOCellStatus.ts b/packages/neuron-ui/src/utils/getDAOCellStatus.ts
index 2af10e13f8..49c3224624 100644
--- a/packages/neuron-ui/src/utils/getDAOCellStatus.ts
+++ b/packages/neuron-ui/src/utils/getDAOCellStatus.ts
@@ -28,7 +28,7 @@ export interface DAOCellStatusParams {
   depositEpoch: string
 }
 
-export default ({
+export const getDAOCellStatus = ({
   unlockInfo,
   withdrawInfo,
   status,
@@ -82,3 +82,5 @@ export default ({
   }
   return CellStatus.Deposited
 }
+
+export default getDAOCellStatus
diff --git a/packages/neuron-ui/src/utils/getExplorerUrl.ts b/packages/neuron-ui/src/utils/getExplorerUrl.ts
index 38999836a1..85e0d8f16c 100644
--- a/packages/neuron-ui/src/utils/getExplorerUrl.ts
+++ b/packages/neuron-ui/src/utils/getExplorerUrl.ts
@@ -1,3 +1,5 @@
-export default (isMainnet: boolean = true) => {
+export const getExplorerUrl = (isMainnet: boolean = true) => {
   return isMainnet ? 'https://explorer.nervos.org' : 'https://explorer.nervos.org/aggron'
 }
+
+export default getExplorerUrl
diff --git a/packages/neuron-ui/src/utils/getSyncStatus.ts b/packages/neuron-ui/src/utils/getSyncStatus.ts
index 4157e1e8fe..6090de4aa4 100644
--- a/packages/neuron-ui/src/utils/getSyncStatus.ts
+++ b/packages/neuron-ui/src/utils/getSyncStatus.ts
@@ -1,11 +1,12 @@
-import { SyncStatus, BUFFER_BLOCK_NUMBER, MAX_TIP_BLOCK_DELAY } from 'utils/const'
+import { SyncStatus } from 'utils/enums'
+import { BUFFER_BLOCK_NUMBER, MAX_TIP_BLOCK_DELAY } from 'utils/const'
 
 const TEN_MINS = 10 * 60 * 1000
 let blockNumber10MinAgo: string = ''
 let timestamp10MinAgo: number | undefined
 let prevUrl: string | undefined
 
-export default ({
+export const getSyncStatus = ({
   syncedBlockNumber,
   tipBlockNumber,
   tipBlockTimestamp,
@@ -44,3 +45,5 @@ export default ({
   }
   return SyncStatus.Syncing
 }
+
+export default getSyncStatus
diff --git a/packages/neuron-ui/src/utils/hooks.ts b/packages/neuron-ui/src/utils/hooks.ts
index e60d0e7c6f..751ef275c1 100644
--- a/packages/neuron-ui/src/utils/hooks.ts
+++ b/packages/neuron-ui/src/utils/hooks.ts
@@ -1,12 +1,19 @@
 import { useState, useMemo, useCallback, useEffect } from 'react'
-import { TFunction } from 'i18next'
-import { openContextMenu } from 'services/remote'
-import { updateTransactionDescription, updateAddressDescription } from 'states/stateProvider/actionCreators'
-import { StateDispatch, AppActions } from 'states/stateProvider/reducer'
-import { epochParser } from 'utils/parsers'
+import { useHistory } from 'react-router-dom'
+import { TFunction, i18n as i18nType } from 'i18next'
+import { openContextMenu, requestPassword, setCurrentNetowrk, deleteNetwork } from 'services/remote'
+import { SetLocale as SetLocaleSubject } from 'services/subjects'
+import {
+  StateDispatch,
+  AppActions,
+  updateTransactionDescription,
+  updateAddressDescription,
+  setCurrentWallet,
+} from 'states'
+import { epochParser, RoutePath } from 'utils'
 import calculateClaimEpochValue from 'utils/calculateClaimEpochValue'
 
-export const useGoBack = (history: any) => {
+export const useGoBack = (history: ReturnType<typeof useHistory>) => {
   return useCallback(() => {
     history.goBack()
   }, [history])
@@ -156,27 +163,32 @@ export const useDialog = ({
 }
 
 export const useOnDefaultContextMenu = (t: TFunction) =>
-  useCallback(() => {
-    const contextMenuTemplate = [
-      { label: t('contextmenu.cut'), role: 'cut' },
-      {
-        label: t('contextmenu.copy'),
-        role: 'copy',
-      },
-      {
-        label: t('contextmenu.paste'),
-        role: 'paste',
-      },
-      {
-        type: 'separator',
-      },
-      {
-        label: t('contextmenu.selectall'),
-        role: 'selectAll',
-      },
-    ]
-    openContextMenu(contextMenuTemplate)
-  }, [t])
+  useCallback(
+    (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
+      if ((e.target as HTMLElement).tagName === 'INPUT') {
+        const contextMenuTemplate = [
+          { label: t('contextmenu.cut'), role: 'cut' },
+          {
+            label: t('contextmenu.copy'),
+            role: 'copy',
+          },
+          {
+            label: t('contextmenu.paste'),
+            role: 'paste',
+          },
+          {
+            type: 'separator',
+          },
+          {
+            label: t('contextmenu.selectall'),
+            role: 'selectAll',
+          },
+        ]
+        openContextMenu(contextMenuTemplate)
+      }
+    },
+    [t]
+  )
 
 export const useExitOnWalletChange = () => {
   const listener = (e: StorageEvent) => {
@@ -191,11 +203,136 @@ export const useExitOnWalletChange = () => {
     }
   }, [])
 }
-export default {
-  useGoBack,
-  useLocalDescription,
-  useCalculateEpochs,
-  useDialog,
-  useOnDefaultContextMenu,
-  useExitOnWalletChange,
+
+export const useOnLocalStorageChange = (handler: (e: StorageEvent) => void) => {
+  return useEffect(() => {
+    window.addEventListener('storage', handler)
+    return () => {
+      window.removeEventListener('storage', handler)
+    }
+  }, [handler])
+}
+
+export const useOnLocaleChange = (i18n: i18nType) => {
+  return useEffect(() => {
+    const subcription = SetLocaleSubject.subscribe(lng => {
+      i18n.changeLanguage(lng)
+    })
+    return () => {
+      subcription.unsubscribe()
+    }
+  }, [i18n])
+}
+
+export const useOnHandleWallet = ({
+  history,
+  dispatch,
+}: {
+  history: ReturnType<typeof useHistory>
+  dispatch: StateDispatch
+}) =>
+  useCallback(
+    (e: React.SyntheticEvent) => {
+      const {
+        target: {
+          dataset: { action },
+        },
+        currentTarget: {
+          dataset: { id },
+        },
+      } = e as any
+      switch (action) {
+        case 'edit': {
+          history.push(`${RoutePath.WalletEditor}/${id}`)
+          break
+        }
+        case 'delete': {
+          requestPassword({ walletID: id, action: 'delete-wallet' })
+          break
+        }
+        case 'backup': {
+          requestPassword({
+            walletID: id,
+            action: 'backup-wallet',
+          })
+          break
+        }
+        case 'select': {
+          setCurrentWallet(id)(dispatch)
+          break
+        }
+        default: {
+          // ignore
+        }
+      }
+    },
+    [dispatch, history]
+  )
+
+export const useOnWindowResize = (handler: () => void) => {
+  useEffect(() => {
+    let rAFTimer: number | null = null
+    const listener = () => {
+      if (rAFTimer) {
+        window.cancelAnimationFrame(rAFTimer)
+      }
+      rAFTimer = window.requestAnimationFrame(handler)
+    }
+
+    window.addEventListener('resize', listener)
+    return () => {
+      window.removeEventListener('resize', listener)
+    }
+  }, [handler])
 }
+
+export const useToggleChoiceGroupBorder = (containerSelector: string, borderClassName: string) =>
+  useCallback(() => {
+    const walletListContainer = document.querySelector(containerSelector)
+    if (!walletListContainer) {
+      return
+    }
+    const walletList = walletListContainer.querySelector('[role=radiogroup]')
+    if (!walletList) {
+      return
+    }
+    const containerHeight = +window.getComputedStyle(walletListContainer).height.slice(0, -2)
+    const listHeight = +window.getComputedStyle(walletList).height.slice(0, -2)
+    if (containerHeight > listHeight + 5) {
+      walletListContainer.classList.remove(borderClassName)
+    } else {
+      walletListContainer.classList.add(borderClassName)
+    }
+  }, [containerSelector, borderClassName])
+
+export const useOnHandleNetwork = ({ history }: { history: ReturnType<typeof useHistory> }) =>
+  useCallback(
+    (e: React.SyntheticEvent) => {
+      const {
+        target: {
+          dataset: { action },
+        },
+        currentTarget: {
+          dataset: { id },
+        },
+      } = e as any
+      switch (action) {
+        case 'edit': {
+          history.push(`${RoutePath.NetworkEditor}/${id}`)
+          break
+        }
+        case 'delete': {
+          deleteNetwork(id)
+          break
+        }
+        case 'select': {
+          setCurrentNetowrk(id)
+          break
+        }
+        default: {
+          // ignore
+        }
+      }
+    },
+    [history]
+  )
diff --git a/packages/neuron-ui/src/utils/index.ts b/packages/neuron-ui/src/utils/index.ts
new file mode 100644
index 0000000000..44e86ce07a
--- /dev/null
+++ b/packages/neuron-ui/src/utils/index.ts
@@ -0,0 +1,22 @@
+import * as CONSTANTS from './const'
+
+export * from './enums'
+export * from './animations'
+export * from './calculateAPC'
+export * from './calculateClaimEpochValue'
+export * from './calculateFee'
+export * from './formatters'
+export * from './generateWalletName'
+export * from './getCompensatedTime'
+export * from './getCompensationPeriod'
+export * from './getCurrentUrl'
+export * from './getDAOCellStatus'
+export * from './getExplorerUrl'
+export * from './getSyncStatus'
+export * from './hooks'
+export * from './renderHooks'
+export * from './is'
+export * from './parsers'
+export * from './validators'
+
+export { CONSTANTS }
diff --git a/packages/neuron-ui/src/utils/instantiateMethodCall.ts b/packages/neuron-ui/src/utils/instantiateMethodCall.ts
deleted file mode 100644
index 71b65e5247..0000000000
--- a/packages/neuron-ui/src/utils/instantiateMethodCall.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export default (obj: object) => {
-  const handler = {
-    get: (target: Function, method: string) => {
-      return function callMethod(...args: any[]) {
-        const result = target.apply(null, [method, ...args])
-        return result
-      }
-    },
-  }
-  return new Proxy(obj, handler)
-}
diff --git a/packages/neuron-ui/src/utils/is.ts b/packages/neuron-ui/src/utils/is.ts
new file mode 100644
index 0000000000..7b1095c5dc
--- /dev/null
+++ b/packages/neuron-ui/src/utils/is.ts
@@ -0,0 +1,11 @@
+import { ControllerResponse, SuccessFromController } from 'services/remote/remoteApiWrapper'
+import { ResponseCode } from 'utils/enums'
+import { MAINNET_TAG } from './const'
+
+export const isMainnet = (networks: Readonly<State.Network[]>, networkID: string) => {
+  return (networks.find(n => n.id === networkID) || {}).chain === MAINNET_TAG
+}
+
+export const isSuccessResponse = (res: ControllerResponse): res is SuccessFromController => {
+  return res.status === ResponseCode.SUCCESS
+}
diff --git a/packages/neuron-ui/src/utils/isMainnet.ts b/packages/neuron-ui/src/utils/isMainnet.ts
deleted file mode 100644
index 8b8e5ba3b0..0000000000
--- a/packages/neuron-ui/src/utils/isMainnet.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { MAINNET_TAG } from './const'
-
-export default (networks: Readonly<State.Network[]>, networkID: string) => {
-  return (networks.find(n => n.id === networkID) || {}).chain === MAINNET_TAG
-}
diff --git a/packages/neuron-ui/src/utils/parsers.ts b/packages/neuron-ui/src/utils/parsers.ts
index 17392c9927..6ab67d6191 100644
--- a/packages/neuron-ui/src/utils/parsers.ts
+++ b/packages/neuron-ui/src/utils/parsers.ts
@@ -36,5 +36,3 @@ export const epochParser = (epoch: string) => {
     value: res.length > 0 ? Number(res.number) + Number(res.index) / Number(res.length) : Number(res.number),
   }
 }
-
-export default { queryParsers, epochParser }
diff --git a/packages/neuron-ui/src/utils/renderHooks.tsx b/packages/neuron-ui/src/utils/renderHooks.tsx
new file mode 100644
index 0000000000..5527db5876
--- /dev/null
+++ b/packages/neuron-ui/src/utils/renderHooks.tsx
@@ -0,0 +1,16 @@
+import React, { useMemo } from 'react'
+import { Route } from 'react-router-dom'
+
+export const useRoutes = (contents: CustomRouter.Route[]) =>
+  useMemo(() => {
+    return contents.map(content => (
+      <Route
+        exact={content.exact}
+        path={`${content.path}${content.params || ''}`}
+        key={content.name}
+        component={content.component}
+      />
+    ))
+  }, [contents])
+
+export default undefined
diff --git a/packages/neuron-ui/src/utils/validators.ts b/packages/neuron-ui/src/utils/validators.ts
index 69c8d6ebe4..9beebcce72 100644
--- a/packages/neuron-ui/src/utils/validators.ts
+++ b/packages/neuron-ui/src/utils/validators.ts
@@ -6,8 +6,8 @@ import {
   SINCE_FIELD_SIZE,
   MAX_DECIMAL_DIGITS,
   SHANNON_CKB_RATIO,
-  ErrorCode,
 } from 'utils/const'
+import { ErrorCode } from 'utils/enums'
 import { CKBToShannonFormatter } from 'utils/formatters'
 import { ckbCore } from 'services/chain'
 
@@ -152,12 +152,3 @@ export const verifyURL = (url: string) => {
   }
   return true
 }
-
-export default {
-  verifyAddress,
-  verifyAmountRange,
-  verifyTotalAmount,
-  verifyPasswordComplexity,
-  verifyTransactionOutputs,
-  verifyNetworkName,
-}
diff --git a/packages/neuron-ui/src/widgets/AlertDialog/alertDialog.module.scss b/packages/neuron-ui/src/widgets/AlertDialog/alertDialog.module.scss
index c1ac7b382f..3f9b007c06 100644
--- a/packages/neuron-ui/src/widgets/AlertDialog/alertDialog.module.scss
+++ b/packages/neuron-ui/src/widgets/AlertDialog/alertDialog.module.scss
@@ -1,7 +1,7 @@
-@import '../../styles//mixin.scss';
+@import '../../styles/mixin.scss';
 
 .alertDialog {
-  @include dialogContainer;
+  @include dialog-container;
   padding: 60px 72px;
 
   &::backdrop {
@@ -28,6 +28,6 @@
   }
 
   &::backdrop {
-    @include overlay
+    @include overlay;
   }
 }
diff --git a/packages/neuron-ui/src/widgets/AlertDialog/index.tsx b/packages/neuron-ui/src/widgets/AlertDialog/index.tsx
index 3976283d66..9ca7261c1e 100644
--- a/packages/neuron-ui/src/widgets/AlertDialog/index.tsx
+++ b/packages/neuron-ui/src/widgets/AlertDialog/index.tsx
@@ -2,7 +2,7 @@ import React, { useRef, useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { dismissAlertDialog } from 'states/stateProvider/actionCreators'
 import { AppActions } from 'states/stateProvider/reducer'
-import { useDialog } from 'utils/hooks'
+import { useDialog } from 'utils'
 import Button from 'widgets/Button'
 import styles from './alertDialog.module.scss'
 
diff --git a/packages/neuron-ui/src/widgets/Balance/balance.module.scss b/packages/neuron-ui/src/widgets/Balance/balance.module.scss
index ac8a248913..3d660ca173 100644
--- a/packages/neuron-ui/src/widgets/Balance/balance.module.scss
+++ b/packages/neuron-ui/src/widgets/Balance/balance.module.scss
@@ -1,7 +1,7 @@
 @import '../../styles/mixin.scss';
 
 .balance {
-  @include RegularText;
+  @include regular-text;
   display: block;
   font-size: 1rem;
   overflow: hidden;
@@ -10,7 +10,7 @@
   word-break: keep-all;
 
   .int {
-    @include BoldText;
+    @include bold-text;
     font-size: 1.125em;
   }
 
diff --git a/packages/neuron-ui/src/widgets/Button/button.module.scss b/packages/neuron-ui/src/widgets/Button/button.module.scss
index c171fdba59..6e4da697c6 100644
--- a/packages/neuron-ui/src/widgets/Button/button.module.scss
+++ b/packages/neuron-ui/src/widgets/Button/button.module.scss
@@ -1,15 +1,15 @@
 @import '../../styles/mixin.scss';
 
 .button {
-  @include MediumText;
+  @include medium-text;
   appearance: none;
   min-width: 5.125rem;
   font-size: 0.75rem;
   line-height: 1rem;
   font-weight: 500;
-  letter-spacing: 0.6px;
   padding: 7px 7px;
   border: none;
+  border-radius: 2px;
   margin: 0;
   box-sizing: border-box;
 
@@ -20,7 +20,7 @@
     border: 1px solid #000;
 
     &:hover {
-      @include SemiBoldText;
+      @include semi-bold-text;
     }
   }
 
@@ -29,7 +29,7 @@
     color: #000;
 
     &:hover {
-      @include SemiBoldText;
+      @include semi-bold-text;
       background-color: #d1d1d1;
     }
   }
@@ -42,18 +42,17 @@
     color: #fff;
 
     &:hover {
-      @include SemiBoldText;
+      @include semi-bold-text;
       background-color: #21b574;
     }
   }
 
   &:active {
-    @include SemiBoldText;
+    @include semi-bold-text;
     filter: invert(0.2);
   }
 
   &[disabled] {
-    border: none !important;
     opacity: 0.5;
     box-shadow: none !important;
     pointer-events: none;
diff --git a/packages/neuron-ui/src/widgets/CopyZone/copyZone.module.scss b/packages/neuron-ui/src/widgets/CopyZone/copyZone.module.scss
new file mode 100644
index 0000000000..d7ec95224d
--- /dev/null
+++ b/packages/neuron-ui/src/widgets/CopyZone/copyZone.module.scss
@@ -0,0 +1,28 @@
+.container {
+  position: relative;
+  display: inline-block;
+  padding: 0 3px;
+
+  &::before {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: none;
+    justify-content: center;
+    align-items: center;
+    content: attr(data-prompt);
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: #666;
+    background-color: rgba(224, 224, 224, 0.9);
+    backdrop-filter: blur(1px);
+    user-select: none;
+    white-space: nowrap;
+  }
+
+  &:hover::before {
+    display: flex;
+  }
+}
diff --git a/packages/neuron-ui/src/widgets/CopyZone/index.tsx b/packages/neuron-ui/src/widgets/CopyZone/index.tsx
new file mode 100644
index 0000000000..72852312e3
--- /dev/null
+++ b/packages/neuron-ui/src/widgets/CopyZone/index.tsx
@@ -0,0 +1,43 @@
+import React, { useState, useCallback, useRef } from 'react'
+import { useTranslation } from 'react-i18next'
+import styles from './copyZone.module.scss'
+
+type CopyZoneProps = React.PropsWithChildren<{
+  name?: string
+  content: string
+  style?: React.CSSProperties
+  className?: string
+}>
+const CopyZone = ({ children, content, name, style, className = '' }: CopyZoneProps) => {
+  const [t] = useTranslation()
+  const [copied, setCopied] = useState(false)
+  const timer = useRef<ReturnType<typeof setTimeout>>()
+  const prompt = copied ? t('common.copied') : name || t(`common.copy`)
+
+  const onCopy = useCallback(() => {
+    setCopied(true)
+    window.navigator.clipboard.writeText(content)
+    clearTimeout(timer.current!)
+    timer.current = setTimeout(() => {
+      setCopied(false)
+    }, 1000)
+  }, [setCopied, content])
+
+  return (
+    <div
+      role="presentation"
+      data-copied={copied}
+      data-prompt={prompt}
+      onClick={onCopy}
+      className={`${styles.container} ${className}`}
+      style={style}
+      title={content}
+    >
+      {children}
+    </div>
+  )
+}
+
+CopyZone.displayName = 'CopyZone'
+
+export default CopyZone
diff --git a/packages/neuron-ui/src/widgets/DatetimePicker/datetimePicker.module.scss b/packages/neuron-ui/src/widgets/DatetimePicker/datetimePicker.module.scss
index 707dd39fe2..82dce2985e 100644
--- a/packages/neuron-ui/src/widgets/DatetimePicker/datetimePicker.module.scss
+++ b/packages/neuron-ui/src/widgets/DatetimePicker/datetimePicker.module.scss
@@ -3,8 +3,7 @@ $width: 374px;
 
 :global {
   .p-calendar {
-    @include RegularText;
-    user-select: none;
+    @include regular-text;
 
     width: $width;
     padding: 20px 0;
@@ -26,7 +25,7 @@ $width: 374px;
       margin-bottom: 16px;
 
       .p-datepicker-next.p-link {
-        order: 1
+        order: 1;
       }
 
       @mixin chevron-line {
@@ -66,7 +65,6 @@ $width: 374px;
         }
       }
 
-
       .pi-chevron-right {
         &::before {
           @include chevron-line;
@@ -86,7 +84,6 @@ $width: 374px;
         }
       }
 
-
       .p-datepicker-month {
         margin-right: 5px;
       }
@@ -115,7 +112,6 @@ $width: 374px;
         height: 30px;
         border-radius: 50%;
         color: #000;
-        user-select: none;
 
         font-size: 12px;
         margin: auto 3px;
@@ -124,7 +120,6 @@ $width: 374px;
           color: #fff;
           background-color: var(--nervos-green);
         }
-
       }
     }
   }
@@ -146,7 +141,6 @@ $width: 374px;
     display: none;
   }
 
-
   .popup {
     display: flex;
     flex-direction: column;
@@ -158,20 +152,19 @@ $width: 374px;
     box-shadow: 4px 7px 10px 0 rgba(0, 0, 0, 0.22);
 
     .title {
-      @include dialogTitle;
+      @include dialog-title;
     }
 
     .timezone {
       span:first-child {
-        @include SemiBoldText;
+        @include semi-bold-text;
         margin-right: 5px;
       }
 
-      @include RegularText;
+      @include regular-text;
       margin-bottom: 8px;
     }
 
-
     input,
     .displayedTime {
       width: $width;
@@ -184,12 +177,12 @@ $width: 374px;
 
     .displayedTime {
       span:first-child {
-        @include RegularText;
+        @include regular-text;
         margin-right: 5px;
       }
 
       span:last-child {
-        @include SemiBoldText;
+        @include semi-bold-text;
       }
     }
 
@@ -197,27 +190,26 @@ $width: 374px;
       border-color: var(--nervos-green);
     }
 
-    &[data-status="edit"] {
+    &[data-status='edit'] {
       .calendar {
         display: flex;
       }
     }
-
   }
 
   .actions {
-    @include dialogFooter;
+    @include dialog-footer;
     width: $width;
     margin-top: 28px;
 
     button:last-child {
-      @include dialogConfirmButton;
+      @include dialog-confirm-button;
       margin-left: 9px;
     }
   }
 
   .notice {
-    @include RegularText;
+    @include regular-text;
     width: $width;
     font-size: 0.75rem;
     letter-spacing: 0.5px;
@@ -232,10 +224,9 @@ $width: 374px;
   }
 
   .error {
-    @include RegularText;
+    @include regular-text;
     color: red;
     font-size: 0.75rem;
     margin-top: 5px;
   }
-
 }
diff --git a/packages/neuron-ui/src/widgets/DatetimePicker/index.tsx b/packages/neuron-ui/src/widgets/DatetimePicker/index.tsx
index bf40e9b051..755330a5a9 100644
--- a/packages/neuron-ui/src/widgets/DatetimePicker/index.tsx
+++ b/packages/neuron-ui/src/widgets/DatetimePicker/index.tsx
@@ -12,6 +12,16 @@ if (UTC > 0) {
   UTC = `UTC${UTC}`
 }
 
+export const formatDate = (datetime: Date) => {
+  const month = (datetime.getMonth() + 1).toString().padStart(2, '0')
+  const date = datetime
+    .getDate()
+    .toString()
+    .padStart(2, '0')
+  const year = datetime.getFullYear()
+  return `${month}/${date}/${year}`
+}
+
 export interface DatetimePickerProps {
   title?: string
   preset?: Date | string | number | null
@@ -29,7 +39,7 @@ const DatetimePicker = ({
   const [t] = useTranslation()
   const [status, setStatus] = useState<'done' | 'edit'>('done')
   const [datetime, setDatetime] = useState<any>(preset ? new Date(+preset) : null)
-  const [display, setDisplay] = useState<any>(new Date(datetime).toLocaleDateString())
+  const [display, setDisplay] = useState<any>(formatDate(new Date(datetime)))
 
   const locale: any = {
     firstDayOfWeek: 0,
@@ -72,7 +82,7 @@ const DatetimePicker = ({
   const onSelected = useCallback(
     e => {
       if (e.target.tagName === 'SPAN' && e.target.className !== 'p-disabled') {
-        setDisplay(new Date(datetime).toLocaleDateString())
+        setDisplay(formatDate(new Date(datetime)))
         setStatus('done')
       }
     },
diff --git a/packages/neuron-ui/src/widgets/Dropdown/index.tsx b/packages/neuron-ui/src/widgets/Dropdown/index.tsx
new file mode 100644
index 0000000000..92f83994be
--- /dev/null
+++ b/packages/neuron-ui/src/widgets/Dropdown/index.tsx
@@ -0,0 +1,44 @@
+import React from 'react'
+import { Dropdown, IDropdownProps, Icon } from 'office-ui-fabric-react'
+
+const CustomDropdown = (props: IDropdownProps) => (
+  <Dropdown
+    onRenderCaretDown={() => {
+      return <Icon iconName="ArrowDown" />
+    }}
+    styles={{
+      label: {
+        fontSize: '0.75rem',
+        fontWeight: 500,
+      },
+
+      title: {
+        fontSize: '0.75rem!important',
+        fontWeight: 500,
+        height: '1.625rem',
+        lineHeight: '1.625rem',
+      },
+      dropdownOptionText: {
+        fontSize: '0.75rem!important',
+        boxShadow: 'border-box',
+      },
+      dropdownItem: {
+        fontSize: '0.75rem!important',
+        boxShadow: 'border-box',
+        minHeight: 'auto',
+      },
+      dropdownItemSelected: {
+        fontSize: '0.75rem!important',
+        minHeight: 'auto',
+        backgroundColor: '#e3e3e3',
+      },
+      root: {
+        fontSize: '0.75rem',
+        marginBottom: '10px',
+      },
+    }}
+    {...props}
+  />
+)
+
+export default CustomDropdown
diff --git a/packages/neuron-ui/src/widgets/GlobalDialog/globalDialog.module.scss b/packages/neuron-ui/src/widgets/GlobalDialog/globalDialog.module.scss
index b4e620c9c6..4adce7c65b 100644
--- a/packages/neuron-ui/src/widgets/GlobalDialog/globalDialog.module.scss
+++ b/packages/neuron-ui/src/widgets/GlobalDialog/globalDialog.module.scss
@@ -12,11 +12,10 @@
   height: 100vh;
 
   .dialog {
-    @include dialogContainer;
+    @include dialog-container;
     padding: 57px 73px;
     background-color: #fff;
     min-width: auto;
-    user-select: none;
 
     img {
       width: 54px;
@@ -24,7 +23,7 @@
       margin-bottom: 15px;
     }
 
-    @include SemiBoldText;
+    @include semi-bold-text;
     display: flex;
     flex-direction: column;
     justify-content: center;
diff --git a/packages/neuron-ui/src/widgets/Icons/BackupWallet.svg b/packages/neuron-ui/src/widgets/Icons/BackupWallet.svg
new file mode 100644
index 0000000000..14e5cb5c97
--- /dev/null
+++ b/packages/neuron-ui/src/widgets/Icons/BackupWallet.svg
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="60px" height="60px" viewBox="0 0 60 60" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
+    <title>Backup</title>
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M30,24 C31.7248153,24 33.1339402,25.3304855 33.2259654,27.0057138 L33.2307458,27.1802026 L33.2306154,49.2346557 L40.0286308,43.8420136 C41.4279934,42.7523178 43.1958794,43.0936203 44.3028939,44.4710907 C45.3717354,45.801062 45.1876597,47.7114013 43.9141586,48.8223785 L43.7735507,48.9382902 L30,60 L16.2264493,48.9382902 C14.8270867,47.8485943 14.5900917,45.848561 15.6971061,44.4710907 C16.7659477,43.1411193 18.6969148,42.8777823 20.0883493,43.8420136 L20.2353032,43.9500288 L26.7691238,49.2355644 L26.7692542,27.1802026 C26.7692542,25.4238252 28.2157084,24 30,24 Z M51,6.03961325e-14 C52.1045695,6.03961325e-14 53,0.8954305 53,2 L53,37 C53,38.1045695 52.1045695,39 51,39 L37,39 L37,33 L47,33 L47,6 L13,6 L13,33 L23,33 L23,39 L9,39 C7.8954305,39 7,38.1045695 7,37 L7,2 C7,0.8954305 7.8954305,6.03961325e-14 9,6.03961325e-14 L51,6.03961325e-14 Z"></path>
+    </g>
+</svg>
diff --git a/packages/neuron-ui/src/widgets/Icons/DeleteWallet.svg b/packages/neuron-ui/src/widgets/Icons/Delete.svg
similarity index 100%
rename from packages/neuron-ui/src/widgets/Icons/DeleteWallet.svg
rename to packages/neuron-ui/src/widgets/Icons/Delete.svg
diff --git a/packages/neuron-ui/src/widgets/Icons/EditWallet.svg b/packages/neuron-ui/src/widgets/Icons/Edit.svg
similarity index 100%
rename from packages/neuron-ui/src/widgets/Icons/EditWallet.svg
rename to packages/neuron-ui/src/widgets/Icons/Edit.svg
diff --git a/packages/neuron-ui/src/widgets/Icons/ExportHistory.svg b/packages/neuron-ui/src/widgets/Icons/ExportHistory.svg
new file mode 100644
index 0000000000..58d051f7a8
--- /dev/null
+++ b/packages/neuron-ui/src/widgets/Icons/ExportHistory.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="60px" height="60px" viewBox="0 0 60 60" version="1.1">
+    <!-- Generator: Sketch 62 (91390) - https://sketch.com -->
+    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M30,24 C31.7248153,24 33.1339402,25.3304855 33.2259654,27.0057138 L33.2307458,27.1802026 L33.2306154,49.2346557 L40.0286308,43.8420136 C41.4279934,42.7523178 43.1958794,43.0936203 44.3028939,44.4710907 C45.3717354,45.801062 45.1876597,47.7114013 43.9141586,48.8223785 L43.7735507,48.9382902 L30,60 L16.2264493,48.9382902 C14.8270867,47.8485943 14.5900917,45.848561 15.6971061,44.4710907 C16.7659477,43.1411193 18.6969148,42.8777823 20.0883493,43.8420136 L20.2353032,43.9500288 L26.7691238,49.2355644 L26.7692542,27.1802026 C26.7692542,25.4238252 28.2157084,24 30,24 Z M51,6.03961325e-14 C52.1045695,6.03961325e-14 53,0.8954305 53,2 L53,37 C53,38.1045695 52.1045695,39 51,39 L37,39 L37,33 L47,33 L47,6 L13,6 L13,33 L23,33 L23,39 L9,39 C7.8954305,39 7,38.1045695 7,37 L7,2 C7,0.8954305 7.8954305,6.03961325e-14 9,6.03961325e-14 L51,6.03961325e-14 Z"/>
+    </g>
+</svg>
diff --git a/packages/neuron-ui/src/widgets/PropertyList/PropertyList.module.scss b/packages/neuron-ui/src/widgets/PropertyList/PropertyList.module.scss
deleted file mode 100644
index 188cca3c39..0000000000
--- a/packages/neuron-ui/src/widgets/PropertyList/PropertyList.module.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-@import '../../styles/mixin.scss';
-
-.propertyCell {
-  display: flex;
-  padding: 5px 5px 5px 0;
-  font-size: 14px;
-
-  .label,
-  .value {
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .label {
-    @include BoldText;
-    grid-area: label;
-    padding-right: 15px;
-    flex-shrink: 0;
-  }
-
-  .value {
-    grid-area: value;
-  }
-}
diff --git a/packages/neuron-ui/src/widgets/PropertyList/index.tsx b/packages/neuron-ui/src/widgets/PropertyList/index.tsx
deleted file mode 100644
index 056f8aa450..0000000000
--- a/packages/neuron-ui/src/widgets/PropertyList/index.tsx
+++ /dev/null
@@ -1,51 +0,0 @@
-import React from 'react'
-import { List, getTheme } from 'office-ui-fabric-react'
-import styles from './PropertyList.module.scss'
-
-const theme = getTheme()
-
-export interface Property {
-  label: string
-  value: string | number | Element | React.ReactNode
-}
-export interface CellStyles {
-  color?: string
-  labelWidth?: string
-  valueWidth?: string
-  height?: string
-}
-
-const onRenderCell = (item?: Property & CellStyles) =>
-  item ? (
-    <div className={styles.propertyCell} style={{ height: item.height || 'auto' }} aria-label="property">
-      <span
-        className={styles.label}
-        style={{ width: item.labelWidth || 'auto', fontSize: '1.125rem' }}
-        title={item.label}
-        aria-label={item.label}
-      >
-        {item.label}
-      </span>
-      <span
-        className={styles.value}
-        style={{ width: item.valueWidth || 'auto', fontSize: theme.fonts.small.fontSize, textAlign: 'right' }}
-        title={typeof item.value === 'string' ? `${item.value}` : ''}
-        aria-label={item.label}
-      >
-        {item.value}
-      </span>
-    </div>
-  ) : null
-const PropertyList = ({
-  properties,
-  cellStyles = { labelWidth: '100px', height: 'auto', color: 'inherit' },
-}: {
-  properties: Property[]
-  cellStyles?: CellStyles
-}) => {
-  return <List items={properties.map(prop => ({ ...prop, ...cellStyles }))} onRenderCell={onRenderCell} />
-}
-
-PropertyList.displayName = 'PropertyList'
-
-export default PropertyList
diff --git a/packages/neuron-ui/src/widgets/TextField/textField.module.scss b/packages/neuron-ui/src/widgets/TextField/textField.module.scss
index 6d499cde94..946f553e6a 100644
--- a/packages/neuron-ui/src/widgets/TextField/textField.module.scss
+++ b/packages/neuron-ui/src/widgets/TextField/textField.module.scss
@@ -3,13 +3,12 @@
 $error-red: #d50000;
 
 .textField {
-  @include RegularText;
+  @include regular-text;
   display: grid;
-  grid-template:
-    'label input'auto 'blank message'minmax(0.6875rem, auto) / auto 1fr;
+  grid-template: 'label input' auto 'blank message' minmax(0.6875rem, auto) / auto 1fr;
   grid-gap: 4px;
 
-  &[data-required="true"] {
+  &[data-required='true'] {
     label::after {
       display: inline;
       content: '*';
@@ -17,7 +16,7 @@ $error-red: #d50000;
     }
   }
 
-  &[data-has-error="true"] {
+  &[data-has-error='true'] {
     .input {
       border-color: $error-red !important;
     }
@@ -59,7 +58,6 @@ $error-red: #d50000;
       }
     }
 
-
     .suffix {
       font-family: inherit;
       display: flex;
@@ -74,12 +72,10 @@ $error-red: #d50000;
       border-color: var(--nervos-green);
     }
   }
-
 }
 
 .stack {
-  grid-template:
-    'label'auto 'input'auto 'message'minmax(0.6875rem, auto) /auto;
+  grid-template: 'label' auto 'input' auto 'message' minmax(0.6875rem, auto) / auto;
 }
 
 .hint {
diff --git a/packages/neuron-wallet/.eslintignore b/packages/neuron-wallet/.eslintignore
index ed6c873a2d..6a3af16c06 100644
--- a/packages/neuron-wallet/.eslintignore
+++ b/packages/neuron-wallet/.eslintignore
@@ -2,5 +2,4 @@ src/migration
 dist
 src/database/**/migrations
 jest.config.js
-jest.e2e.config.js
 scripts/notarize.js
diff --git a/packages/neuron-wallet/assets/icons/icon.icns b/packages/neuron-wallet/assets/icons/icon.icns
index 3293e9d070..abfbdf45cd 100644
Binary files a/packages/neuron-wallet/assets/icons/icon.icns and b/packages/neuron-wallet/assets/icons/icon.icns differ
diff --git a/packages/neuron-wallet/assets/icons/icon.ico b/packages/neuron-wallet/assets/icons/icon.ico
index d51a526d29..9b60cd0b22 100644
Binary files a/packages/neuron-wallet/assets/icons/icon.ico and b/packages/neuron-wallet/assets/icons/icon.ico differ
diff --git a/packages/neuron-wallet/assets/icons/icon.png b/packages/neuron-wallet/assets/icons/icon.png
index e132bc4987..c17497370b 100644
Binary files a/packages/neuron-wallet/assets/icons/icon.png and b/packages/neuron-wallet/assets/icons/icon.png differ
diff --git a/packages/neuron-wallet/electron-builder.yml b/packages/neuron-wallet/electron-builder.yml
index b1b8817627..d79a897c4e 100644
--- a/packages/neuron-wallet/electron-builder.yml
+++ b/packages/neuron-wallet/electron-builder.yml
@@ -13,7 +13,7 @@ afterSign: scripts/notarize.js
 files:
   - from: "../.."
     to: "."
-    filter: ["!**/*", "ormconfig.json"]
+    filter: ["!**/*", ".ckb-version", "ormconfig.json"]
   - package.json
   - dist
   - "!**/*.map"
diff --git a/packages/neuron-wallet/jest.e2e.config.js b/packages/neuron-wallet/jest.e2e.config.js
deleted file mode 100644
index ee66890097..0000000000
--- a/packages/neuron-wallet/jest.e2e.config.js
+++ /dev/null
@@ -1,24 +0,0 @@
-module.exports = {
-  displayName: "E2E Tests",
-  testRegex: "(/tests-e2e/.*.(test|spec))\\.(ts?|js?)$",
-  transform: {
-    "^.+\\.ts?$": "ts-jest"
-  },
-  roots: [
-    "<rootDir>/src/",
-    "<rootDir>/tests-e2e/"
-  ],
-  moduleDirectories: [
-    "node_modules",
-    "src"
-  ],
-  moduleFileExtensions: [
-    "ts",
-    "js",
-    "json",
-    "node"
-  ],
-  setupFilesAfterEnv: [
-    "<rootDir>/setup-e2e-tests.ts"
-  ],
-};
diff --git a/packages/neuron-wallet/package.json b/packages/neuron-wallet/package.json
index 7bfb81b292..f226c1d5dd 100644
--- a/packages/neuron-wallet/package.json
+++ b/packages/neuron-wallet/package.json
@@ -3,7 +3,7 @@
   "productName": "Neuron",
   "description": "CKB Neuron Wallet",
   "homepage": "https://www.nervos.org/",
-  "version": "0.30.0",
+  "version": "0.31.0-rc1",
   "private": true,
   "author": {
     "name": "Nervos Core Dev",
@@ -22,7 +22,6 @@
     "build": "ttsc && ncp ./src/block-sync-renderer/index.html ./dist/block-sync-renderer/index.html",
     "clean": "rimraf dist/*",
     "test": "jest --runInBand",
-    "test:e2e": "jest --config jest.e2e.config.js --runInBand",
     "lint": "eslint --fix --ext .ts,.js src",
     "precommit": "lint-staged",
     "rebuild:nativemodules": "electron-builder install-app-deps"
@@ -63,7 +62,6 @@
     "@types/levelup": "4.3.0",
     "@types/sqlite3": "3.1.5",
     "@types/uuid": "3.4.5",
-    "@types/webdriverio": "4.13.0",
     "axios": "0.19.0",
     "devtron": "1.4.0",
     "electron": "7.1.14",
@@ -71,9 +69,8 @@
     "electron-devtools-installer": "2.2.4",
     "electron-notarize": "0.2.1",
     "lint-staged": "9.2.5",
-    "neuron-ui": "0.30.0",
+    "neuron-ui": "0.31.0-rc1",
     "rimraf": "3.0.0",
-    "spectron": "9.0.0",
     "ts-transformer-imports": "0.4.3",
     "ttypescript": "1.5.10"
   }
diff --git a/packages/neuron-wallet/setup-e2e-tests.ts b/packages/neuron-wallet/setup-e2e-tests.ts
deleted file mode 100644
index 94d0f3fed1..0000000000
--- a/packages/neuron-wallet/setup-e2e-tests.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-jest.setTimeout(30_000)
-
-export default undefined
diff --git a/packages/neuron-wallet/src/controllers/api.ts b/packages/neuron-wallet/src/controllers/api.ts
index 5ed225ceb0..72019ee895 100644
--- a/packages/neuron-wallet/src/controllers/api.ts
+++ b/packages/neuron-wallet/src/controllers/api.ts
@@ -8,7 +8,8 @@ import { NetworkType, Network } from 'models/network'
 import { ConnectionStatusSubject } from 'models/subjects/node'
 import NetworksService from 'services/networks'
 import WalletsService from 'services/wallets'
-import { ResponseCode } from 'utils/const'
+import SettingsService, { Locale } from 'services/settings'
+import { ResponseCode, SETTINGS_WINDOW_TITLE } from 'utils/const'
 
 import WalletsController from 'controllers/wallets'
 import TransactionsController from 'controllers/transactions'
@@ -58,6 +59,11 @@ export default class ApiController {
   private registerHandlers() {
     const handle = this.handleChannel
 
+    // sync messages
+    ipcMain.on('get-locale', e => {
+      e.returnValue = SettingsService.getInstance().locale
+    })
+
     // App
     handle('get-system-codehash', async () => {
       return {
@@ -137,6 +143,10 @@ export default class ApiController {
       }
     })
 
+    handle('set-locale', async (_, locale: Locale) => {
+      return SettingsService.getInstance().locale = locale
+    })
+
     // Wallets
 
     handle('get-all-wallets', async () => {
@@ -226,7 +236,13 @@ export default class ApiController {
     })
 
     handle('show-transaction-details', async (_, hash: string) => {
-      showWindow(`#/transaction/${hash}`, i18n.t(`messageBox.transaction.title`, { hash }))
+      showWindow(`#/transaction/${hash}`, i18n.t(`messageBox.transaction.title`, { hash }), {
+        height: 750
+      })
+    })
+
+    handle('export-transactions', async (_, params: { walletID: string }) => {
+      return this.transactionsController.exportTransactions(params)
     })
 
     // Dao
@@ -302,6 +318,10 @@ export default class ApiController {
 
     // Settings
 
+    handle('show-settings', (_, params: Controller.Params.ShowSettings) => {
+      showWindow(`#/settings/${params.tab}`, i18n.t(SETTINGS_WINDOW_TITLE))
+    })
+
     handle('clear-cache', async () => {
       return new SyncController().clearCache()
     })
diff --git a/packages/neuron-wallet/src/controllers/app/index.ts b/packages/neuron-wallet/src/controllers/app/index.ts
index 523001273a..6297dd6a25 100644
--- a/packages/neuron-wallet/src/controllers/app/index.ts
+++ b/packages/neuron-wallet/src/controllers/app/index.ts
@@ -2,6 +2,7 @@ import path from 'path'
 import { app as electronApp, remote, BrowserWindow } from 'electron'
 import windowStateKeeper from 'electron-window-state'
 
+import i18n from 'locales/i18n'
 import env from 'env'
 import { updateApplicationMenu } from './menu'
 import logger from 'utils/logger'
@@ -11,6 +12,7 @@ import WalletsService from 'services/wallets'
 import ApiController from 'controllers/api'
 import NodeController from 'controllers/node'
 import SyncApiController from 'controllers/sync-api'
+import { SETTINGS_WINDOW_TITLE } from 'utils/const'
 
 const app = electronApp || (remote && remote.app)
 
@@ -116,10 +118,7 @@ export default class AppController {
       if (process.platform !== 'darwin') {
         app.quit()
       }
-      if (this.mainWindow) {
-        this.mainWindow.removeAllListeners()
-        this.mainWindow = null
-      }
+      this.clearOnClosed()
     })
 
     this.mainWindow.on('focus', () => {
@@ -133,4 +132,18 @@ export default class AppController {
     this.mainWindow.loadURL(env.mainURL)
     this.updateMenu()
   }
+
+  private clearOnClosed = () => {
+    const windowsToClose = [i18n.t(SETTINGS_WINDOW_TITLE)]
+    BrowserWindow.getAllWindows().forEach(bw => {
+      if (windowsToClose.includes(bw.getTitle())) {
+        bw.close()
+      }
+    })
+
+    if (this.mainWindow) {
+      this.mainWindow.removeAllListeners()
+      this.mainWindow = null
+    }
+  }
 }
diff --git a/packages/neuron-wallet/src/controllers/app/menu.ts b/packages/neuron-wallet/src/controllers/app/menu.ts
index 9dd17e3f5e..4f6a517af1 100644
--- a/packages/neuron-wallet/src/controllers/app/menu.ts
+++ b/packages/neuron-wallet/src/controllers/app/menu.ts
@@ -1,3 +1,5 @@
+import fs from 'fs'
+import path from 'path'
 import {
   app,
   shell,
@@ -13,9 +15,11 @@ import ExportDebugController from 'controllers/export-debug'
 import { showWindow } from 'controllers/app/show-window'
 import WalletsService from 'services/wallets'
 import CommandSubject from 'models/subjects/command'
+import logger from 'utils/logger'
+import { SETTINGS_WINDOW_TITLE } from 'utils/const'
 
 enum URL {
-  Preference = '/settings/general',
+  Settings = '/settings/general',
   CreateWallet = '/wizard/mnemonic/create',
   ImportMnemonic = '/wizard/mnemonic/import',
   ImportKeystore = '/keystore/import',
@@ -34,15 +38,36 @@ const separator: MenuItemConstructorOptions = {
 }
 
 const showAbout = () => {
-  const options = {
-    type: 'info',
-    title: app.name,
-    message: app.name,
-    detail: app.getVersion(),
-    buttons: ['OK'],
-    cancelId: 0,
+  let applicationVersion = i18n.t('about.app-version', { name: app.name, version: app.getVersion() })
+
+  const appPath = app.isPackaged ? app.getAppPath() : path.join(__dirname, '../../../../..')
+  const ckbVersionPath = path.join(appPath, '.ckb-version')
+  if (fs.existsSync(ckbVersionPath)) {
+    try {
+      const ckbVersion = fs.readFileSync(ckbVersionPath, 'utf8')
+      applicationVersion += `\n${i18n.t('about.ckb-client-version', { version: ckbVersion })}`
+    } catch (err) {
+      logger.error(`[Menu]: `, err)
+    }
+  }
+
+  const isWin = process.platform === 'win32'
+
+  if (isWin) {
+    const options = {
+      type: 'info',
+      title: app.name,
+      message: app.name,
+      detail: applicationVersion,
+      buttons: ['OK'],
+      cancelId: 0,
+    }
+    dialog.showMessageBox(options)
+    return
   }
-  dialog.showMessageBox(options)
+
+  app.setAboutPanelOptions({ applicationVersion, version: '' })
+  app.showAboutPanel()
 }
 
 const navigateTo = (url: string) => {
@@ -52,6 +77,10 @@ const navigateTo = (url: string) => {
   }
 }
 
+const showSettings = () => {
+  showWindow(`#${URL.Settings}`, i18n.t(SETTINGS_WINDOW_TITLE))
+}
+
 const requestPassword = (walletID: string, actionType: 'delete-wallet' | 'backup-wallet') => {
   const window = BrowserWindow.getFocusedWindow()
   if (window) {
@@ -77,16 +106,15 @@ const updateApplicationMenu = (mainWindow: BrowserWindow | null) => {
         label: i18n.t('application-menu.neuron.about', {
           app: app.name,
         }),
-        role: 'about',
         click: () => { showAbout() },
       },
       {
         label: i18n.t('application-menu.neuron.check-updates'),
         enabled: isMainWindow && !UpdateController.isChecking,
         click: () => {
-           new UpdateController().checkUpdates()
-           navigateTo(URL.Preference)
-         }
+          new UpdateController().checkUpdates()
+          showSettings()
+        }
       },
       separator,
       {
@@ -94,7 +122,7 @@ const updateApplicationMenu = (mainWindow: BrowserWindow | null) => {
         enabled: isMainWindow,
         label: i18n.t('application-menu.neuron.preferences'),
         accelerator: 'CmdOrCtrl+,',
-        click: () => { navigateTo(URL.Preference) }
+        click: showSettings
       },
       separator,
       {
@@ -279,15 +307,15 @@ const updateApplicationMenu = (mainWindow: BrowserWindow | null) => {
     helpSubmenu.push(separator)
     helpSubmenu.push({
       id: 'preference',
-      label: i18n.t('application-menu.help.settings'),
-      click: () => { navigateTo(URL.Preference) }
+      label: i18n.t(SETTINGS_WINDOW_TITLE),
+      click: showSettings,
     })
     helpSubmenu.push({
       label: i18n.t('application-menu.neuron.check-updates'),
       enabled: isMainWindow && !UpdateController.isChecking,
       click: () => {
         new UpdateController().checkUpdates()
-        navigateTo(URL.Preference)
+        showSettings()
       }
     })
     helpSubmenu.push({
@@ -295,7 +323,6 @@ const updateApplicationMenu = (mainWindow: BrowserWindow | null) => {
       label: i18n.t('application-menu.neuron.about', {
         app: app.name
       }),
-      role: 'about',
       click: () => { showAbout() }
     })
   }
diff --git a/packages/neuron-wallet/src/controllers/app/show-window.ts b/packages/neuron-wallet/src/controllers/app/show-window.ts
index b64a20cb49..4e6d3c794e 100644
--- a/packages/neuron-wallet/src/controllers/app/show-window.ts
+++ b/packages/neuron-wallet/src/controllers/app/show-window.ts
@@ -2,25 +2,40 @@ import { BrowserWindow } from 'electron'
 import path from 'path'
 import env from 'env'
 
-const showWindow = (url: string, title: string): BrowserWindow => {
-  const win = new BrowserWindow({
-    width: 1200,
-    minWidth: 900,
-    minHeight: 600,
-    show: false,
-    webPreferences: {
-      preload: path.join(__dirname, './preload.js'),
-    },
-  })
-  const fmtUrl = url.startsWith('http') || url.startsWith('file:') ? url : env.mainURL + url
-  win.loadURL(fmtUrl)
-  win.on('ready-to-show', () => {
-    win.setTitle(title)
-    win.show()
-    win.focus()
-  })
-
-  return win
+const showWindow = (url: string, title: string, options?: Electron.BrowserWindowConstructorOptions): BrowserWindow => {
+  const opened = BrowserWindow.getAllWindows().find(bw => bw.getTitle() === title)
+  if (opened) {
+    opened.webContents.send('navigation', url.replace(/^#/, ''))
+    opened.focus()
+    return opened
+  } else {
+    const win = new BrowserWindow({
+      width: 1200,
+      minWidth: 900,
+      minHeight: 600,
+      show: false,
+      resizable: false,
+      minimizable: false,
+      maximizable: false,
+      fullscreenable: false,
+      skipTaskbar: true,
+      autoHideMenuBar: true,
+      webPreferences: {
+        devTools: env.isDevMode,
+        nodeIntegration: false,
+        preload: path.join(__dirname, './preload.js'),
+      },
+      ...options,
+    })
+    const fmtUrl = url.startsWith('http') || url.startsWith('file:') ? url : env.mainURL + url
+    win.loadURL(fmtUrl)
+    win.on('ready-to-show', () => {
+      win.setTitle(title)
+      win.show()
+      win.focus()
+    })
+    return win
+  }
 }
 
 export { showWindow }
diff --git a/packages/neuron-wallet/src/controllers/app/subscribe.ts b/packages/neuron-wallet/src/controllers/app/subscribe.ts
index f529d81f58..f0eaa37377 100644
--- a/packages/neuron-wallet/src/controllers/app/subscribe.ts
+++ b/packages/neuron-wallet/src/controllers/app/subscribe.ts
@@ -1,3 +1,4 @@
+import { BrowserWindow } from 'electron'
 import { debounceTime, sampleTime } from 'rxjs/operators'
 
 import CommandSubject from 'models/subjects/command'
@@ -7,6 +8,8 @@ import SyncedBlockNumberSubject, { ConnectionStatusSubject } from 'models/subjec
 import { WalletListSubject, CurrentWalletSubject } from 'models/subjects/wallets'
 import dataUpdateSubject from 'models/subjects/data-update'
 import AppUpdaterSubject from 'models/subjects/app-updater'
+import i18n from 'locales/i18n'
+import { SETTINGS_WINDOW_TITLE } from 'utils/const'
 
 interface AppResponder {
   sendMessage: (channel: string, arg: any) => void
@@ -34,7 +37,7 @@ export const subscribe = (dispatcher: AppResponder) => {
 
   CommandSubject.subscribe(params => {
     if (params.dispatchToUI) {
-      dispatcher.sendMessage('command', params)
+      BrowserWindow.getFocusedWindow()?.webContents.send('command', params)
     } else {
       dispatcher.runCommand(params.type, params.payload)
     }
@@ -60,6 +63,9 @@ export const subscribe = (dispatcher: AppResponder) => {
 
   AppUpdaterSubject.subscribe(params => {
     dispatcher.updateMenu()
-    dispatcher.sendMessage('app-updater-updated', params)
+    BrowserWindow
+      .getAllWindows()
+      .find(bw => bw.getTitle() === i18n.t(SETTINGS_WINDOW_TITLE))?.webContents
+      .send('app-updater-updated', params)
   })
 }
diff --git a/packages/neuron-wallet/src/controllers/export-debug.ts b/packages/neuron-wallet/src/controllers/export-debug.ts
index 1e35d5a06a..6e5df9fb16 100644
--- a/packages/neuron-wallet/src/controllers/export-debug.ts
+++ b/packages/neuron-wallet/src/controllers/export-debug.ts
@@ -6,12 +6,13 @@ import CKB from '@nervosnetwork/ckb-sdk-core'
 import { app, dialog } from 'electron'
 import logger from 'electron-log'
 import i18n from 'locales/i18n'
+import { ckbDataPath } from 'services/ckb-runner'
 import NetworksService from 'services/networks'
 import SyncedBlockNumber from 'models/synced-block-number'
 
 export default class ExportDebugController {
   archive: archiver.Archiver
-  constructor() {
+  constructor () {
     this.archive = archiver('zip', {
       zlib: { level: 9 }
     })
@@ -30,7 +31,7 @@ export default class ExportDebugController {
         return
       }
       this.archive.pipe(fs.createWriteStream(filePath))
-      await this.addStatusFile()
+      await Promise.all([this.addStatusFile(), this.addBundledCKBLog()])
       this.addLogFiles()
       await this.archive.finalize()
       dialog.showMessageBox({
@@ -47,7 +48,7 @@ export default class ExportDebugController {
     const url = NetworksService.getInstance().getCurrent().remote
     const ckb = new CKB(url)
 
-    const [syncedBlockNumber, ckbVersion, tipBlockNumber] = await Promise.all([
+    const [syncedBlockNumber, ckbVersion, tipBlockNumber, peers] = await Promise.all([
       new SyncedBlockNumber()
         .getNextBlock()
         .then(n => n.toString())
@@ -59,7 +60,10 @@ export default class ExportDebugController {
       ckb.rpc
         .getTipBlockNumber()
         .then(n => BigInt(n).toString())
-        .catch(() => '')
+        .catch(() => ''),
+      ckb.rpc
+        .getPeers()
+        .catch(() => [])
     ])
     const { platform, arch } = process
     const release = os.release()
@@ -71,7 +75,8 @@ export default class ExportDebugController {
       ckb: {
         url: /https?:\/\/(localhost|127.0.0.1)/.test(url) ? url : 'http://****:port',
         version: ckbVersion,
-        blockNumber: tipBlockNumber
+        blockNumber: tipBlockNumber,
+        peers,
       },
       client: {
         platform,
@@ -84,6 +89,39 @@ export default class ExportDebugController {
     })
   }
 
+  private addBundledCKBLog = () => {
+    const name = 'bundled-ckb-log.json'
+    const SIZE_TO_READ = 32_000
+
+    return new Promise((resolve, reject) => {
+      const logPath = path.resolve(ckbDataPath(), 'data', 'logs', 'run.log')
+      if (!fs.existsSync(logPath)) { return reject(new Error("File not found")) }
+
+      const fileStats = fs.statSync(logPath)
+      const position = fileStats.size - SIZE_TO_READ
+
+      fs.open(logPath, 'r', (openErr, fd) => {
+        if (openErr) { return reject(openErr) }
+        fs.read(fd, Buffer.alloc(SIZE_TO_READ), 0, SIZE_TO_READ, position, (readErr, _, buffer) => {
+          if (readErr) {
+            reject(readErr)
+          } else {
+            resolve(buffer.toString('utf8'))
+          }
+          fs.close(fd, closeErr => {
+            logger.error(closeErr)
+          })
+          return
+        })
+      })
+
+    }).then((log: string) => {
+      this.archive.append(log, { name })
+    }).catch(err => {
+      this.archive.append(err.message, { name })
+    })
+  }
+
   private addLogFiles = (files = ['main.log', 'renderer.log']) => {
     const logFile = logger.transports.file.getFile()
     if (!logFile?.path) {
diff --git a/packages/neuron-wallet/src/controllers/transactions.ts b/packages/neuron-wallet/src/controllers/transactions.ts
index 366edd3020..90da5ceba5 100644
--- a/packages/neuron-wallet/src/controllers/transactions.ts
+++ b/packages/neuron-wallet/src/controllers/transactions.ts
@@ -1,7 +1,9 @@
+import { dialog } from 'electron'
 import { TransactionsService, PaginationResult } from 'services/tx'
 import AddressesService from 'services/addresses'
 import WalletsService from 'services/wallets'
 
+import i18n from 'locales/i18n'
 import { ResponseCode } from 'utils/const'
 import { TransactionNotFound, CurrentWalletNotSet } from 'exceptions'
 import Transaction from 'models/chain/transaction'
@@ -97,4 +99,34 @@ export default class TransactionsController {
       result: { hash, description }
     }
   }
+
+  public async exportTransactions({ walletID }: { walletID: string }) {
+    const wallet = WalletsService.getInstance().get(walletID)
+
+    if (!wallet) {
+      throw new CurrentWalletNotSet()
+    }
+
+    try {
+      const { canceled, filePath } = await dialog.showSaveDialog({
+        title: i18n.t('export-transactions.export-transactions'),
+        defaultPath: `transactions_${Date.now()}.csv`
+      })
+      if (canceled || !filePath) {
+        return
+      }
+      const total = await TransactionsService.exportTransactions({ walletID, filePath })
+      dialog.showMessageBox({
+        type: 'info',
+        message: i18n.t('export-transactions.transactions-exported', { file: filePath, total })
+      })
+      return {
+        status: ResponseCode.Success,
+        result: total
+      }
+    } catch (err) {
+      dialog.showErrorBox(i18n.t('common.error'), err.message)
+      throw err
+    }
+  }
 }
diff --git a/packages/neuron-wallet/src/locales/en.ts b/packages/neuron-wallet/src/locales/en.ts
index a8e9153039..6b9b2785d1 100644
--- a/packages/neuron-wallet/src/locales/en.ts
+++ b/packages/neuron-wallet/src/locales/en.ts
@@ -127,7 +127,7 @@ export default {
       transaction: {
         title: 'Transaction: {{hash}}',
       },
-      'sign-and-verify':{
+      'sign-and-verify': {
         title: 'Sign/verify message'
       },
     },
@@ -147,9 +147,35 @@ export default {
       ok: 'OK',
       error: 'Error',
     },
-    'export-debug-info':{
+    'export-debug-info': {
       'export-debug-info': 'Export Debug Information',
       'debug-info-exported': 'Debug information has been exported to {{ file }}'
+    },
+    about: {
+      "app-version": "{{name}} Version: {{version}}",
+      "ckb-client-version": "CKB Client Version: {{version}}"
+    },
+    settings: {
+      title: {
+        normal: 'Settings',
+        mac: 'Preference'
+      }
+    },
+    'export-transactions': {
+      'export-transactions': 'Export Transaction History',
+      'transactions-exported': '{{total}} transaction records have been exported to {{file}}',
+      column: {
+        "time": "Time",
+        "block-number": "Block Number",
+        "tx-hash": "Transaction Hash",
+        "tx-type": "Transaction Type",
+        "amount": "Amount",
+        "description": "Description"
+      },
+      "tx-type": {
+        "send": "Send",
+        "receive": "Receive"
+      }
     }
   },
 }
diff --git a/packages/neuron-wallet/src/locales/zh-tw.ts b/packages/neuron-wallet/src/locales/zh-tw.ts
index 6f57d11695..d996f3d4c4 100644
--- a/packages/neuron-wallet/src/locales/zh-tw.ts
+++ b/packages/neuron-wallet/src/locales/zh-tw.ts
@@ -34,7 +34,7 @@ export default {
       },
       tools: {
         label: "工具",
-        "sign-and-verify": "簽名/驗證信息",
+        "sign-and-verify": "簽名/驗簽信息",
       },
       window: {
         label: '視窗',
@@ -125,8 +125,8 @@ export default {
       transaction: {
         title: '交易: {{hash}}',
       },
-      'sign-and-verify':{
-        title: '簽名/驗證信息'
+      'sign-and-verify': {
+        title: '簽名/驗簽信息'
       },
     },
     prompt: {
@@ -145,9 +145,36 @@ export default {
       ok: '確定',
       error: '錯誤'
     },
+    'export-debug-info': {
+      'export-debug-info': '導出調試信息',
+      'debug-info-exported': '調試信息已被導出至 {{ file }}'
+    },
+    about: {
+      "app-version": "{{name}} 版本: {{version}}",
+      "ckb-client-version": "CKB 節點版本: {{version}}"
+    },
+    settings: {
+      title: {
+        normal: '設置',
+        mac: '偏好設置'
+      }
+    },
+    'export-transactions': {
+      'export-transactions': '導出交易歷史',
+      'transactions-exported': '{{total}} 條交易記錄已被導出至 {{file}}',
+      column: {
+        "time": "時間",
+        "block-number": "區塊高度",
+        "tx-hash": "交易哈希",
+        "tx-type": "交易類型",
+        "amount": "金額",
+        "description": "備註"
+      },
+      "tx-type": {
+        "send": "轉賬",
+        "receive": "收款"
+      }
+    }
   },
-  'export-debug-info':{
-    'export-debug-info': '導出調試信息',
-    'debug-info-exported': '調試信息已被導出至 {{ file }}'
-  }
 }
+
diff --git a/packages/neuron-wallet/src/locales/zh.ts b/packages/neuron-wallet/src/locales/zh.ts
index 7bbedee8fc..2e640f5aeb 100644
--- a/packages/neuron-wallet/src/locales/zh.ts
+++ b/packages/neuron-wallet/src/locales/zh.ts
@@ -32,9 +32,9 @@ export default {
         paste: '粘贴',
         selectall: '全部选中',
       },
-      tools:{
+      tools: {
         label: "工具",
-        "sign-and-verify": "签名/验证信息",
+        "sign-and-verify": "签名/验签信息",
       },
       window: {
         label: '窗口',
@@ -126,8 +126,8 @@ export default {
       transaction: {
         title: '交易: {{hash}}',
       },
-      'sign-and-verify':{
-        title: '签名/验证信息'
+      'sign-and-verify': {
+        title: '签名/验签信息'
       },
     },
     prompt: {
@@ -146,9 +146,35 @@ export default {
       ok: '确定',
       error: '错误'
     },
-    'export-debug-info':{
+    'export-debug-info': {
       'export-debug-info': '导出调试信息',
       'debug-info-exported': '调试信息已被导出至 {{ file }}'
+    },
+    about: {
+      "app-version": "{{name}} 版本: {{version}}",
+      "ckb-client-version": "CKB 节点版本: {{version}}"
+    },
+    settings: {
+      title: {
+        normal: '设置',
+        mac: '偏好设置'
+      }
+    },
+    'export-transactions': {
+      'export-transactions': '导出交易历史',
+      'transactions-exported': '{{total}} 条交易记录已被导出至 {{file}}',
+      column: {
+        "time": "时间",
+        "block-number": "区块高度",
+        "tx-hash": "交易哈希",
+        "tx-type": "交易类型",
+        "amount": "金额",
+        "description": "备注"
+      },
+      "tx-type": {
+        "send": "转账",
+        "receive": "收款"
+      }
     }
   },
 }
diff --git a/packages/neuron-wallet/src/main.ts b/packages/neuron-wallet/src/main.ts
index 6749ee72b3..db36c176d6 100644
--- a/packages/neuron-wallet/src/main.ts
+++ b/packages/neuron-wallet/src/main.ts
@@ -1,6 +1,7 @@
 import { app } from 'electron'
 
 import AppController from 'controllers/app'
+import SettingsService from 'services/settings'
 import { changeLanguage } from 'locales/i18n'
 
 const appController = new AppController()
@@ -8,7 +9,7 @@ const appController = new AppController()
 const singleInstanceLock = app.requestSingleInstanceLock()
 if (singleInstanceLock) {
   app.on('ready', async () => {
-    changeLanguage(app.getLocale())
+    changeLanguage(SettingsService.getInstance().locale)
 
     appController.start()
   })
diff --git a/packages/neuron-wallet/src/services/ckb-runner.ts b/packages/neuron-wallet/src/services/ckb-runner.ts
index c2251eb994..04bc11bd5a 100644
--- a/packages/neuron-wallet/src/services/ckb-runner.ts
+++ b/packages/neuron-wallet/src/services/ckb-runner.ts
@@ -33,7 +33,7 @@ const ckbBinary = (): string => {
   return platform() === 'win' ? binary + '.exe' : binary
 }
 
-const ckbDataPath = (): string => {
+export const ckbDataPath = (): string => {
   return path.resolve(app.getPath('userData',), 'chains/mainnet')
 }
 
diff --git a/packages/neuron-wallet/src/services/settings.ts b/packages/neuron-wallet/src/services/settings.ts
new file mode 100644
index 0000000000..2e79bf7681
--- /dev/null
+++ b/packages/neuron-wallet/src/services/settings.ts
@@ -0,0 +1,42 @@
+import { BrowserWindow } from 'electron'
+import env from 'env'
+import Store from 'models/store'
+import { changeLanguage } from 'locales/i18n'
+import { updateApplicationMenu } from 'controllers/app/menu'
+
+export const locales = ['zh', 'zh-TW', 'en', 'en-US'] as const
+export type Locale = typeof locales[number]
+
+export default class SettingsService extends Store {
+  private static instance: SettingsService | null = null
+
+  public static getInstance() {
+    if (!SettingsService.instance) {
+      SettingsService.instance = new SettingsService()
+    }
+    return SettingsService.instance
+  }
+
+  get locale() {
+    return this.readSync('locale')
+  }
+
+  set locale(lng: Locale) {
+    if (locales.includes(lng)) {
+      this.writeSync('locale', lng)
+      changeLanguage(lng)
+      this.onLocaleChanged(lng)
+    } else {
+      throw new Error(`Locale ${lng} not supported`)
+    }
+  }
+
+  constructor () {
+    super('', 'settings.json', JSON.stringify({ locale: env.app.getLocale() }))
+  }
+
+  private onLocaleChanged = (lng: Locale) => {
+    BrowserWindow.getAllWindows().forEach(bw => bw.webContents.send('set-locale', lng))
+    updateApplicationMenu(null)
+  }
+}
diff --git a/packages/neuron-wallet/src/services/settings/base.ts b/packages/neuron-wallet/src/services/settings/base.ts
deleted file mode 100644
index 10ebce5bcf..0000000000
--- a/packages/neuron-wallet/src/services/settings/base.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import FileService from '../file'
-
-export default class BaseSettings {
-  private static moduleName = ''
-  private static fileName = 'settings.json'
-
-  private static instance: BaseSettings
-
-  public static getInstance(): BaseSettings {
-    if (!BaseSettings.instance) {
-      BaseSettings.instance = new BaseSettings()
-    }
-
-    return BaseSettings.instance
-  }
-
-  public updateSetting = (key: string, value: any) => {
-    let settings = this.read()
-    if (settings === undefined) {
-      settings = {}
-    }
-    Object.assign(settings, { [key]: value })
-    FileService.getInstance().writeFileSync(BaseSettings.moduleName, BaseSettings.fileName, JSON.stringify(settings))
-  }
-
-  public getSetting = (key: string) => {
-    const info = this.read()
-
-    if (info) {
-      return info[key]
-    }
-
-    return undefined
-  }
-
-  public read = () => {
-    const fileService = FileService.getInstance()
-    const { moduleName, fileName } = BaseSettings
-
-    if (fileService.hasFile(moduleName, fileName)) {
-      const info = FileService.getInstance().readFileSync(moduleName, fileName)
-      const value = JSON.parse(info)
-      return value
-    }
-
-    return undefined
-  }
-}
diff --git a/packages/neuron-wallet/src/services/tx/transaction-service.ts b/packages/neuron-wallet/src/services/tx/transaction-service.ts
index 460fa5bf21..11c9661a94 100644
--- a/packages/neuron-wallet/src/services/tx/transaction-service.ts
+++ b/packages/neuron-wallet/src/services/tx/transaction-service.ts
@@ -1,10 +1,12 @@
 import { getConnection, ObjectLiteral } from 'typeorm'
+import AddressesService from 'services/addresses'
 import { pubkeyToAddress } from '@nervosnetwork/ckb-sdk-utils'
 import TransactionEntity from 'database/chain/entities/transaction'
 import OutputEntity from 'database/chain/entities/output'
 import Transaction, { TransactionStatus } from 'models/chain/transaction'
 import InputEntity from 'database/chain/entities/input'
 import AddressParser from 'models/address-parser'
+import exportTransactions from 'utils/export-history'
 
 export interface TransactionsByAddressesParam {
   pageNo: number
@@ -368,6 +370,15 @@ export class TransactionsService {
     return getConnection().manager.save(transactionEntity)
   }
 
+  public static async exportTransactions({ walletID, filePath }: { walletID: string, filePath: string }) {
+    const addresses = AddressesService.allAddressesByWalletId(walletID).map(addr => addr.address)
+    const lockHashList = AddressParser.batchToLockHash(addresses)
+    const connection = getConnection()
+    const dbPath = connection.options.database as string
+    const total = await exportTransactions({ walletID, dbPath, lockHashList, filePath })
+    return total
+  }
+
   // only deal with address / txHash / Date
   private static async searchSQL(params: TransactionsByLockHashesParam, type: SearchType, value: string = '') {
     const base = [
diff --git a/packages/neuron-wallet/src/types/controller.d.ts b/packages/neuron-wallet/src/types/controller.d.ts
index d947c56342..f7f95eece6 100644
--- a/packages/neuron-wallet/src/types/controller.d.ts
+++ b/packages/neuron-wallet/src/types/controller.d.ts
@@ -66,6 +66,10 @@ declare module Controller {
       signature: string
       message: string
     }
+
+    interface ShowSettings {
+      tab: 'general' | 'wallets' | 'networks'
+    }
   }
 
   interface Wallet {
diff --git a/packages/neuron-wallet/src/utils/const.ts b/packages/neuron-wallet/src/utils/const.ts
index 3c6bdb1c9d..a65a5d7167 100644
--- a/packages/neuron-wallet/src/utils/const.ts
+++ b/packages/neuron-wallet/src/utils/const.ts
@@ -1,6 +1,7 @@
 export const MIN_PASSWORD_LENGTH = 8
 export const MAX_PASSWORD_LENGTH = 50
 export const BUNDLED_CKB_URL = 'http://localhost:8114'
+export const SETTINGS_WINDOW_TITLE = process.platform === 'darwin' ? 'settings.title.mac' : 'settings.title.normal'
 
 export enum ResponseCode {
   Fail,
diff --git a/packages/neuron-wallet/src/utils/export-history.ts b/packages/neuron-wallet/src/utils/export-history.ts
new file mode 100644
index 0000000000..04df6eb5d7
--- /dev/null
+++ b/packages/neuron-wallet/src/utils/export-history.ts
@@ -0,0 +1,152 @@
+import fs from 'fs'
+import sqlite3 from 'sqlite3'
+import { get as getDescription } from 'database/leveldb/transaction-description'
+import i18n from 'locales/i18n'
+import shannonToCKB from 'utils/shannonToCKB'
+
+
+interface ExportHistoryParms {
+  walletID: string
+  dbPath: string
+  lockHashList?: string[]
+  filePath: string
+}
+const exportHistory = ({
+  walletID,
+  dbPath,
+  lockHashList = [],
+  filePath
+}: ExportHistoryParms): Promise<number> => {
+  return new Promise((resolve, reject) => {
+    if (!dbPath) {
+      return reject(new Error(`Database is required`))
+    }
+
+    if (!Array.isArray(lockHashList)) {
+      return reject(new Error(`Lock hash list is expected to be an array`))
+    }
+
+    if (!filePath) {
+      return reject(new Error(`File Path is required`))
+    }
+
+    if (fs.existsSync(filePath)) {
+      fs.unlinkSync(filePath)
+    }
+
+    let total: number | undefined
+    let inserted = 0
+
+    const SEND_TYPE = i18n.t('export-transactions.tx-type.send')
+    const RECEIVE_TYPE = i18n.t('export-transactions.tx-type.receive')
+
+    const writeStream = fs.createWriteStream(filePath)
+    writeStream.write(
+      `${['time', 'block-number', 'tx-hash', 'tx-type', 'amount', 'description']
+        .map(label => i18n.t(`export-transactions.column.${label}`))}\n`
+    )
+
+    const db = new sqlite3.Database(dbPath, sqlite3.OPEN_READONLY)
+    const serializedlockHashList = lockHashList.map(l => `'${l}'`).join(`,`)
+
+    const onRowLoad = (err: Error, row: {
+      hash: string,
+      inputShannon: string | null,
+      timestamp: string,
+      blockNumber: string,
+      description: string
+    }) => {
+      db.serialize(() => {
+        if (err) {
+          return reject(err)
+        }
+        db.get(
+          `
+          SELECT
+            CAST(SUM(CAST(output.capacity AS UNSIGNED BIG ING)) AS VARCHAR) outputShannon
+          FROM
+            output
+          WHERE
+            (output.transactionHash = ? AND output.lockHash IN (${serializedlockHashList}))
+          GROUP BY
+            output.transactionHash
+          `,
+          [row.hash],
+          async (err, { outputShannon } = { outputShannon: '0' }) => {
+            if (err) {
+              return reject(err)
+            }
+            const description = await getDescription(walletID, row.hash)
+            const totalInput = BigInt(row.inputShannon || `0`)
+            const totalOutput = BigInt(outputShannon || `0`)
+            let txType = `-`
+            if (totalInput > totalOutput) {
+              txType = SEND_TYPE
+            } else if (totalInput < totalOutput) {
+              txType = RECEIVE_TYPE
+            }
+            const amount = shannonToCKB(totalOutput - totalInput)
+            writeStream.write(
+              `${new Date(+row.timestamp).toISOString()},${row.blockNumber},${
+              row.hash
+              },${txType},${amount},"${description}"\n`,
+              err => {
+                if (err) {
+                  return reject(err)
+                }
+                if (++inserted === total) {
+                  writeStream.end()
+                  return resolve(total)
+                }
+              }
+            )
+          }
+        )
+      })
+    }
+
+    const onCompleted = (err: Error, retrieved: number) => {
+      if (err) {
+        return reject(err)
+      }
+      db.close()
+      if (!retrieved) {
+        writeStream.end()
+        return resolve(0)
+      }
+      total = retrieved
+    }
+
+    db.serialize(() => {
+      db.each(
+        `
+        SELECT
+          tx.hash,
+          tx.timestamp,
+          tx.blockNumber,
+          CAST(SUM(CAST(input.capacity AS UNSIGNED BIG INT)) AS VARCHAR) inputShannon
+        FROM 'transaction' AS tx
+        LEFT JOIN
+          input ON (input.transactionHash = tx.hash AND input.lockHash in (${serializedlockHashList}))
+        WHERE
+          tx.hash IN (
+            SELECT output.transactionHash FROM output WHERE output.lockHash IN (${serializedlockHashList})
+            UNION
+            SELECT input.transactionHash FROM input WHERE input.lockHash IN (${serializedlockHashList})
+          )
+        AND
+          tx.timestamp IS NOT NULL
+        GROUP BY
+          tx.hash
+        ORDER BY
+          CAST(tx.timestamp AS UNSIGNED BIG INT)
+        `,
+        onRowLoad,
+        onCompleted
+      )
+    })
+
+  })
+}
+
+export default exportHistory
diff --git a/packages/neuron-wallet/src/utils/shannonToCKB.ts b/packages/neuron-wallet/src/utils/shannonToCKB.ts
new file mode 100644
index 0000000000..672bfc8080
--- /dev/null
+++ b/packages/neuron-wallet/src/utils/shannonToCKB.ts
@@ -0,0 +1,19 @@
+
+const DECIMAL = 8
+
+const shannonToCKB = (shannon: bigint) => {
+  if (shannon === BigInt(0)) {
+    return `0.${'0'.repeat(DECIMAL)}`
+  }
+
+  const isNegative = shannon < 0
+  const absStr = isNegative ? `${shannon}`.slice(1) : `${shannon}`
+  if (absStr.length <= DECIMAL) {
+    return `${isNegative ? '-' : '+'}0.${absStr.padStart(DECIMAL, '0')}`
+  }
+  const int = absStr.slice(0, -1 * DECIMAL)
+  const dec = absStr.slice(-1 * DECIMAL)
+  return `${isNegative ? '-' : '+'}${int}.${dec}`
+}
+
+export default shannonToCKB
diff --git a/packages/neuron-wallet/tests-e2e/address-book.test.ts b/packages/neuron-wallet/tests-e2e/address-book.test.ts
deleted file mode 100644
index 6b114ce187..0000000000
--- a/packages/neuron-wallet/tests-e2e/address-book.test.ts
+++ /dev/null
@@ -1,64 +0,0 @@
-import Application from './application'
-
-/**
- * 1. navigate to the address book
- * 2. verify the count of receiving/changing addresses
- * 3. verify default data of the first address
- * 4. update description of the first address
- * 5. refresh the view and verify the description
- */
-describe('Address book tests', () => {
-  const app = new Application()
-  beforeEach(() => app.start())
-  afterEach(() =>  app.stop())
-
-  beforeEach(async () => {
-    await app.spectron.client.waitUntilWindowLoaded()
-    await app.createWalletFromWizard()
-
-    app.spectron.client.click('button[name=Addresses]')
-    await app.spectron.client.waitUntilWindowLoaded()
-  })
-
-  app.test('Address book should have 20 receiving addresses and 10 change addresses', async () => {
-    const { client } = app.spectron
-    await client.pause(1000)
-    const countOfReceivingAddresses = await client
-      .elements('//SPAN[text()="Receiving Address"]')
-      .then(res => res.value.length)
-    expect(countOfReceivingAddresses).toBe(20)
-    await client.pause(1000)
-    const countOfChangeAddresses = await client
-      .elements('//SPAN[text()="Change Address"]')
-      .then(res => res.value.length)
-    expect(countOfChangeAddresses).toBe(10)
-  })
-
-  app.test('Update description', async () => {
-    const newDescription = 'new description'
-    const descriptionCellSelector = 'div[data-automation-key=description]'
-    const editButtonSelector = 'i[data-icon-name=Edit]'
-    const inputSelector = 'div[role=row] input'
-    const { client } = app.spectron
-
-    const descriptionBeforeUpdate = await client.$(inputSelector).getValue()
-    expect(descriptionBeforeUpdate).toBe('')
-
-    client.moveToObject(descriptionCellSelector)
-    await client.waitUntilWindowLoaded()
-    client.click(editButtonSelector)
-    await client.waitUntilWindowLoaded()
-
-    client.setValue(inputSelector, newDescription)
-    await client.waitUntilWindowLoaded()
-    await client.pause(1000)
-
-    client.click('button[name=Overview]')
-    await client.waitUntilWindowLoaded()
-    client.click('button[name=Addresses]')
-    await client.waitUntilWindowLoaded()
-
-    const descriptionAfterUpdate = await client.$(inputSelector).getValue()
-    expect(descriptionAfterUpdate).toBe(newDescription)
-  })
-}
diff --git a/packages/neuron-wallet/tests-e2e/application/env.ts b/packages/neuron-wallet/tests-e2e/application/env.ts
deleted file mode 100644
index e555fbff65..0000000000
--- a/packages/neuron-wallet/tests-e2e/application/env.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-export interface TransactionSendTo {
-  address: string
-  amount: number
-}
-
-export interface TransactionTestEnv {
-  // Used to test sending transactions, please make sure there is enough balance.
-  mnemonic: string,
-  sendTo: TransactionSendTo[]
-}
-
-export interface TestEnv {
-  transaction: TransactionTestEnv
-}
-
-const env: TestEnv = {
-  transaction: {
-    mnemonic: '',
-    sendTo: []
-  }
-}
-
-export default env;
\ No newline at end of file
diff --git a/packages/neuron-wallet/tests-e2e/application/index.ts b/packages/neuron-wallet/tests-e2e/application/index.ts
deleted file mode 100644
index 73e5d813c2..0000000000
--- a/packages/neuron-wallet/tests-e2e/application/index.ts
+++ /dev/null
@@ -1,139 +0,0 @@
-import fs from 'fs';
-import path from 'path';
-import { Application as SpectronApplication } from 'spectron';
-import { Element, RawResult } from 'webdriverio';
-import { clickMenu, deleteNetwork, editNetwork, editWallet } from './utils';
-import { createWallet } from '../operations/create-wallet'
-
-export default class Application {
-  spectron: SpectronApplication
-
-  constructor() {
-    let electronPath = path.join(__dirname, '../..', 'node_modules', '.bin', 'electron')
-    if (process.platform === 'win32') {
-      electronPath += '.cmd'
-    }
-    this.spectron = new SpectronApplication({
-      args: [
-        '--require',
-        path.join(__dirname, 'preload.js'),
-        path.join(__dirname, '../..', 'dist', 'main.js'),
-        '--lang=en',
-      ],
-      path: electronPath,
-      env: {
-        // NODE_ENV: 'test'
-      },
-    })
-  }
-
-  async start() {
-    if (this.spectron.isRunning()) {
-      return
-    }
-    await this.spectron.start()
-    await this.spectron.client.waitUntilWindowLoaded(10000)
-  }
-
-  async stop() {
-    if (!this.spectron.isRunning()) {
-      return
-    }
-    await this.spectron.stop()
-  }
-
-  async createWalletFromWizard() {
-    this.spectron.client.click('button[name=create-a-wallet]')
-    await this.spectron.client.waitUntilWindowLoaded()
-    await createWallet(this)
-    await this.spectron.client.waitUntilWindowLoaded()
-  }
-
-  async createWalletFromSettings() {
-    await this.gotoSettingsView()
-    await this.spectron.client.waitUntilWindowLoaded()
-    this.spectron.client.click('button[name=Wallets]')
-    await this.spectron.client.waitUntilWindowLoaded()
-    this.spectron.client.click('button[name=create-a-wallet]')
-    await this.spectron.client.waitUntilWindowLoaded()
-    await createWallet(this)
-    await this.spectron.client.waitUntilWindowLoaded()
-  }
-
-  test(name: string, func: () => void, timeout: number = 2000 * 10 * 1) {
-    it(name, async () => {
-      try {
-        await func()
-      } catch (error) {
-        const errorsPath = path.join(__dirname, '../errors')
-        if (!fs.existsSync(errorsPath)) {
-          fs.mkdirSync(errorsPath)
-        }
-        const errorFileName = `${name.replace(/ /g, '_')}-${new Date().getTime()}`
-
-        // save error log
-        fs.writeFileSync(path.join(errorsPath, `${errorFileName}.txt`), error.stack)
-
-        // save screenshot
-        const imageBuffer = await this.spectron.browserWindow.capturePage()
-        fs.writeFileSync(path.join(errorsPath, `${errorFileName}.png`), imageBuffer)
-
-        throw error
-      }
-    }, timeout)
-  }
-
-  // ipc
-
-  editWallet(walletId: string) {
-    return editWallet(this.spectron.electron, walletId)
-  }
-
-  clickMenu(labels: string[]) {
-    return clickMenu(this.spectron.electron, labels)
-  }
-
-  editNetwork(networkId: string) {
-    return editNetwork(this.spectron.electron, networkId)
-  }
-
-  deleteNetwork(networkId: string) {
-    return deleteNetwork(this.spectron.electron, networkId)
-  }
-
-
-  async elements(selector: string): Promise<RawResult<Element[]>> {
-    const { client } = this.spectron
-    let result: RawResult<Element[]> | undefined
-    let error: Error | undefined
-    try {
-      result = await client.elements(selector)
-    } catch (_error) {
-      error = _error
-    }
-
-    return new Promise((resolve, reject) => {
-      if (error) {
-        reject(error)
-      } else {
-        resolve(result)
-      }
-    })
-  }
-
-  async setElementValue(selector: string, text: string) {
-    const { client } = this.spectron
-    await client.selectorExecute(selector, (elements: any, args) => {
-      const element = elements[0]
-      var event = new Event('input', { bubbles: true}) as any;
-      event.simulated = true;
-      element.value = args;
-      element.dispatchEvent(event);
-      return `${element} ${args}`
-    }, text)
-  }
-
-  async gotoSettingsView() {
-    this.spectron.client.click('button[name=Settings]')
-  }
-}
diff --git a/packages/neuron-wallet/tests-e2e/application/preload.js b/packages/neuron-wallet/tests-e2e/application/preload.js
deleted file mode 100644
index 32f1fc91d2..0000000000
--- a/packages/neuron-wallet/tests-e2e/application/preload.js
+++ /dev/null
@@ -1,59 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-const electron = require("electron");
-const CommandSubject = require("../../dist/models/subjects/command").default;
-const servicesNetworks = require("../../dist/services/networks").default;
-
-electron.ipcMain.on('E2E_EDIT_WALLET', function (event, arg) {
-    const walletId = arg[0];
-    const window = electron.BrowserWindow.getFocusedWindow()
-    CommandSubject.next({ winID: window.id, type: 'navigate-to-url', payload: `/editwallet/${walletId}`, dispatchToUI: true })
-});
-
-electron.ipcMain.on('E2E_EDIT_NETWORK', function (event, arg) {
-    const networkId = arg[0];
-    const window = electron.BrowserWindow.getFocusedWindow()
-    CommandSubject.next({ winID: window.id, type: 'navigate-to-url', payload: `/network/${networkId}`, dispatchToUI: true })
-});
-
-electron.ipcMain.on('E2E_DELETE_NETWORK', function (event, arg) {
-    const networkId = arg[0];
-    const networksService = servicesNetworks.getInstance();
-    networksService.delete(networkId);
-})
-
-function findItem(menuItems, labels) {
-    var target = labels[0];
-    var rest = labels.slice(1);
-    var foundItem = menuItems.find(function (item) { return item.label === target; });
-    if (rest.length === 0) {
-        return foundItem;
-    }
-    return findItem(foundItem.submenu.items, rest);
-}
-
-electron.ipcMain.on('E2E_GET_MENU_ITEM', function (e, labels) {
-    var menuItem = findItem(electron.Menu.getApplicationMenu().items, labels);
-    if (menuItem) {
-        e.returnValue = new electron.MenuItem({
-            checked: menuItem.checked,
-            enabled: menuItem.enabled,
-            label: menuItem.label,
-            visible: menuItem.visible
-        });
-    }
-    else {
-        e.returnValue = ({
-            label: ''
-        });
-    }
-});
-
-electron.ipcMain.on('E2E_CLICK_MENU_ITEM', function (e, labels) {
-    var item = findItem(electron.Menu.getApplicationMenu().items, labels);
-    item.click();
-});
-
-electron.ipcMain.on('E2E_QUIT_APP', function () {
-    electron.app.quit()
-})
diff --git a/packages/neuron-wallet/tests-e2e/application/utils.ts b/packages/neuron-wallet/tests-e2e/application/utils.ts
deleted file mode 100644
index 31ef925119..0000000000
--- a/packages/neuron-wallet/tests-e2e/application/utils.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { AllElectron } from 'electron'
-
-// TODO: Refactor this! Integration tests should reply on UI operation, not IPC communications!
-export const clickMenu = (electron: AllElectron, labels: string[]) => {
-  return electron.ipcRenderer.send('E2E_CLICK_MENU_ITEM', labels)
-}
-
-export const getMenuItem = (electron: AllElectron, labels: string[]) => {
-  return electron.ipcRenderer.sendSync('E2E_GET_MENU_ITEM', labels)
-}
-
-export const editWallet = (electron: AllElectron, walletId: string) => {
-  return electron.ipcRenderer.send('E2E_EDIT_WALLET', [walletId])
-}
-
-export const quitApp = (electron: AllElectron) => {
-  return electron.ipcRenderer.send('E2E_QUIT_APP')
-}
-
-export const editNetwork = (electron: AllElectron, networkId: string) => {
-  return electron.ipcRenderer.send('E2E_EDIT_NETWORK', [networkId])
-}
-
-export const deleteNetwork = (electron: AllElectron, networkId: string) => {
-  return electron.ipcRenderer.send('E2E_DELETE_NETWORK', [networkId])
-}
diff --git a/packages/neuron-wallet/tests-e2e/network.test.ts b/packages/neuron-wallet/tests-e2e/network.test.ts
deleted file mode 100644
index 9bcff1db92..0000000000
--- a/packages/neuron-wallet/tests-e2e/network.test.ts
+++ /dev/null
@@ -1,145 +0,0 @@
-import Application from './application';
-
-describe('Wallet tests', () => {
-  const app = new Application()
-  beforeEach(() => app.start())
-  afterEach(() =>  app.stop())
-
-  const addNetwork = async () => {
-    const { client } = app.spectron
-    const newNodeName = 'Node-2233'
-    const newNodeRpcUrl = 'http://localhost:8114'
-
-    client.click('button[name=add-network]')
-    await client.waitUntilWindowLoaded()
-
-    // Setup Network
-    const inputElements = await client.elements('<input />')
-    expect(inputElements.value).not.toBeUndefined()
-    expect(inputElements.value.length).toBe(2)
-    await app.setElementValue('//MAIN/DIV/DIV/DIV[1]//INPUT', newNodeRpcUrl)
-    await app.setElementValue('//MAIN/DIV/DIV/DIV[2]//INPUT', newNodeName)
-    await client.waitUntilWindowLoaded()
-    // Save
-    client.click('button[name=save-network]')
-    await client.waitUntilWindowLoaded()
-    await client.pause(1000)
-
-    // Check network name
-    const title = `${newNodeName}: ${newNodeRpcUrl}`
-    const newNetworkItemElement = await client.element("//MAIN//LABEL/DIV[@title='" + title + "']")
-    expect(newNetworkItemElement.value).not.toBeUndefined()
-  }
-
-  beforeEach(async () => {
-    await app.spectron.client.waitUntilWindowLoaded()
-    await app.createWalletFromWizard()
-
-    await app.gotoSettingsView()
-    await app.spectron.client.waitUntilWindowLoaded()
-
-    app.spectron.client.click('button[name=Network]')
-    await app.spectron.client.waitUntilWindowLoaded()
-  })
-
-  app.test('add network', async () => {
-    await addNetwork()
-  })
-
-  app.test('edit network', async () => {
-    await addNetwork()
-
-    const { client } = app.spectron
-    await client.waitUntilWindowLoaded()
-
-    // Get network id
-    const inputs = await client.elements("//MAIN//INPUT")
-    const networkItemElement = inputs.value[1]
-    expect(networkItemElement).not.toBeUndefined()
-    const networkItemElementId = await client.elementIdAttribute(networkItemElement.ELEMENT, 'id')
-    const networkItemElementName = await client.elementIdAttribute(networkItemElement.ELEMENT, 'name')
-    const networkId = networkItemElementId.value.slice(networkItemElementName.value.length + 1)
-
-    // Go to edit network page
-    await app.editNetwork(networkId)
-    await client.waitUntilWindowLoaded()
-
-    // Setup Network
-    const inputElements = await client.elements('<input />')
-    expect(inputElements.value).not.toBeUndefined()
-    expect(inputElements.value.length).toBe(2)
-    const networkRpcUrlInputText = await client.elementIdAttribute(inputElements.value[0].ELEMENT, 'value')
-    const networkNameInputText = await client.elementIdAttribute(inputElements.value[1].ELEMENT, 'value')
-    const newRpcUrl = `${networkRpcUrlInputText.value}22`
-    const newName = `${networkNameInputText.value}33`
-    await app.setElementValue('//MAIN/DIV/DIV/DIV[1]//INPUT', newRpcUrl)
-    await app.setElementValue('//MAIN/DIV/DIV/DIV[2]//INPUT', newName)
-    await client.waitUntilWindowLoaded()
-
-    // Save
-    client.click('button[name=save-network]')
-    await client.waitUntilWindowLoaded()
-    await client.pause(1000)
-
-    // Check network name
-    const title = `${newName}: ${newRpcUrl}`
-    const newNetworkItemElement = await client.element("//MAIN//LABEL/DIV[@title='" + title + "']")
-    expect(newNetworkItemElement.value).not.toBeUndefined()
-  })
-
-  app.test('switch network', async () => {
-    await addNetwork()
-
-    const { client } = app.spectron
-
-    // Get target network name
-    const labels = await app.elements('//MAIN//LABEL//SPAN')
-    const targetNetworkNameElement = labels.value[3]
-    expect(targetNetworkNameElement).not.toBeUndefined()
-    const targetNetowrkName = await client.elementIdText(targetNetworkNameElement.ELEMENT)
-
-    // switch network
-    const inputs = await app.elements("//MAIN//INPUT")
-    const targetNetworkElement = inputs.value[1].ELEMENT
-    await client.elementIdClick(targetNetworkElement)
-    await client.waitUntilWindowLoaded()
-    await client.pause(3000)
-
-    // Check network name
-    const networkElement = await client.element('[id=connected-network-name]')
-    expect(networkElement).not.toBeUndefined()
-    const networkName = await client.elementIdText(networkElement.value.ELEMENT)
-    expect(networkName.value).toBe(targetNetowrkName.value)
-  })
-
-  app.test('delete network', async () => {
-    await addNetwork()
-
-    const { client } = app.spectron
-
-    // Get network name
-    const labels = await app.elements('//MAIN//LABEL//SPAN')
-    const networkNameElement = labels.value[3]
-    expect(networkNameElement).not.toBeUndefined()
-    const netowrkName = await client.elementIdText(networkNameElement.ELEMENT)
-
-    // Get network id
-    const inputs = await app.elements("//MAIN//INPUT")
-    const networkItemElement = inputs.value[1].ELEMENT
-    expect(networkItemElement).not.toBeUndefined()
-    const networkItemElementId = await client.elementIdAttribute(networkItemElement, 'id')
-    const networkItemElementName = await client.elementIdAttribute(networkItemElement, 'name')
-    const networkId = networkItemElementId.value.slice(networkItemElementName.value.length + 1)
-
-    // Delete network
-    app.deleteNetwork(networkId)
-    await client.waitUntilWindowLoaded()
-    await client.pause(3000)
-
-    // Check network name
-    const networkElement = await client.element('[id=connected-network-name]')
-    expect(networkElement).not.toBeUndefined()
-    const newNetworkName = await client.elementIdText(networkElement.value.ELEMENT)
-    expect(newNetworkName.value).not.toBe(netowrkName.value)
-  })
-})
diff --git a/packages/neuron-wallet/tests-e2e/notification.test.ts b/packages/neuron-wallet/tests-e2e/notification.test.ts
deleted file mode 100644
index 7d7f206bb4..0000000000
--- a/packages/neuron-wallet/tests-e2e/notification.test.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import Application from './application'
-
-/**
- * 1. check the alert, it should be disconnected to the network
- * 2. navigate to wallet settingsState
- * 3. delete a wallet
- * 4. input a wrong password
- * 5. check the alert, it should be incorrect password
- * 6. check the notification, it should have two messages
- *   1. incorrect PasswordRequest
- *   2. disconnected to the network
- * 7. password-incorrect alerts should be dismissed once a correct one is inputted
- */
-describe('Notification tests', () => {
-  const app = new Application()
-  beforeEach(() => app.start())
-  afterEach(() =>  app.stop())
-
-  beforeEach(async () => {
-    await app.spectron.client.waitUntilWindowLoaded()
-    await app.createWalletFromWizard()
-
-    app.spectron.client.click('button[name=Addresses]')
-    await app.spectron.client.waitUntilWindowLoaded()
-    await app.gotoSettingsView()
-
-    app.spectron.client.click('button[name=Wallets]')
-    await app.spectron.client.waitUntilWindowLoaded()
-  })
-
-  describe('Test alert message and notification', () => {
-    const messages = {
-      disconnected: 'Fail to connect to the node',
-      incorrectPassword: 'Password is incorrect',
-    }
-
-    app.test('It should have an alert message of disconnection', async () => {
-      const { client } = app.spectron
-      const alertComponent = await client.$('.ms-MessageBar-text')
-      const msg = await client.elementIdText(alertComponent.value.ELEMENT)
-      expect(msg.value).toBe(messages.disconnected)
-    })
-
-    app.test('It should have an alert message of incorrect password', async () => {
-      const { client } = app.spectron
-      await app.clickMenu(['Wallet', 'Delete Current Wallet'])
-      await client.waitUntilWindowLoaded()
-      const inputElement = await client.$('input')
-      await client.elementIdValue(inputElement.value.ELEMENT, 'Invalid Password')
-      client.click('button[type=submit]')
-      await client.waitUntilWindowLoaded()
-      await client.pause(3000)
-      const alertComponent = await client.$('.ms-MessageBar-text')
-      const msg = await client.elementIdText(alertComponent.value.ELEMENT)
-      expect(msg.value).toBe(messages.incorrectPassword)
-    })
-
-    app.test('It should have two messages in the notification', async () => {
-      const { client } = app.spectron
-      const messageComponents = await client.$$('.ms-Panel-content p')
-      expect(messageComponents.length).toBe(Object.keys(messages).length)
-      const incorrectPasswordMsg = await client.element(`//P[text()="${messages.incorrectPassword}"]`)
-      const disconnectMsg = await client.element(`//P[text()="${messages.disconnected}"]`)
-      expect(incorrectPasswordMsg.state).not.toBe('failure')
-      expect(disconnectMsg.state).not.toBe('failed')
-    })
-
-    app.test('Password-incorrect alerts should be dismissed once a correct one is inputted', async () => {
-      const { client } = app.spectron
-      await app.clickMenu(['Wallet', 'Delete Current Wallet'])
-      await client.waitUntilWindowLoaded()
-      const inputElement = await client.$('input')
-      await client.elementIdValue(inputElement.value.ELEMENT, 'Azusa2233')
-      client.click('button[type=submit]')
-      await client.waitUntilWindowLoaded()
-      await client.pause(3000)
-      const alertComponent = await client.$('.ms-MessageBar--error')
-      const msg = await client.elementIdText(alertComponent.value.ELEMENT)
-      expect(msg.value).toBe(messages.disconnected)
-    })
-  })
-}
diff --git a/packages/neuron-wallet/tests-e2e/operations/check-network-status.ts b/packages/neuron-wallet/tests-e2e/operations/check-network-status.ts
deleted file mode 100644
index 2ff50c8625..0000000000
--- a/packages/neuron-wallet/tests-e2e/operations/check-network-status.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import Application from '../application'
-
-export const checkNetworkStatus = async (app: Application) => {
-  const { client } = app.spectron
-  let retryCount = 5
-  let connected = false
-  while (!connected && retryCount > 0) {
-    retryCount -= 1
-    const networkStateElement = await client.element('//FOOTER/DIV/DIV[2]//I')
-    expect(networkStateElement.value).not.toBeNull()
-    const state = await client.elementIdAttribute(networkStateElement.value.ELEMENT, 'data-icon-name')
-    console.log(`network state ${state.value}`);
-    if (state.value === 'Disconnected') {
-      connected = false
-      await client.pause(1000)
-    } else if (state.value === 'Connected') {
-      connected = true
-      break
-    }
-  }
-  return connected
-}
diff --git a/packages/neuron-wallet/tests-e2e/operations/create-wallet.ts b/packages/neuron-wallet/tests-e2e/operations/create-wallet.ts
deleted file mode 100644
index 84f4a95f36..0000000000
--- a/packages/neuron-wallet/tests-e2e/operations/create-wallet.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import Application from '../application'
-import { importWallet } from './import-wallet'
-
-export const createWallet = async (app: Application, name: string | undefined = undefined, password: string = 'Azusa2233') => {
-  const { client } = app.spectron
-
-  // Copy mnemonic
-  const mnemonicTextarea = await client.element('<textarea />')
-  const mnemonic = await client.elementIdText(mnemonicTextarea.value.ELEMENT)
-
-  // Next
-  client.click('button[aria-label="next"]')
-  await client.waitUntilWindowLoaded()
-
-  return await importWallet(app, mnemonic.value, name, password)
-}
diff --git a/packages/neuron-wallet/tests-e2e/operations/current-wallet-address.ts b/packages/neuron-wallet/tests-e2e/operations/current-wallet-address.ts
deleted file mode 100644
index d75716d94b..0000000000
--- a/packages/neuron-wallet/tests-e2e/operations/current-wallet-address.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import Application from '../application'
-
-export const currentWalletAddress = async (app: Application) => {
-  const { client } = app.spectron
-
-  // Switch to receive page
-  client.click('button[name=Receive]')
-  await client.waitUntilWindowLoaded(1000)
-
-  const addressElement = await client.element('//INPUT')
-  expect(addressElement.value).not.toBeNull()
-  const address = await client.elementIdAttribute(addressElement.value.ELEMENT, 'placeholder')
-  await client.waitUntilWindowLoaded(1000)
-
-  // Back
-  client.click('button[name=Overview]')
-  await client.waitUntilWindowLoaded(1000)
-
-  return address.value
-}
diff --git a/packages/neuron-wallet/tests-e2e/operations/import-wallet.ts b/packages/neuron-wallet/tests-e2e/operations/import-wallet.ts
deleted file mode 100644
index fca36af7b5..0000000000
--- a/packages/neuron-wallet/tests-e2e/operations/import-wallet.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import Application from '../application'
-
-export const importWallet = async (app: Application, mnemonic: string, name: string | undefined = undefined, password: string = 'Azusa2233') => {
-  const { client } = app.spectron
-
-  // Input mnemonic
-  const inputMnemonicTextarea = await client.element('<textarea />')
-  expect(inputMnemonicTextarea.value).not.toBeNull()
-  app.setElementValue('<textarea />', mnemonic)
-  await client.waitUntilWindowLoaded()
-  // Next
-  client.click('button[aria-label="next"]')
-  await client.waitUntilWindowLoaded()
-
-  // Setup wallet
-  const inputElements = await client.elements('<input />')
-  expect(inputElements.value).not.toBeNull()
-  expect(inputElements.value.length).toBe(3)
-  if (name) {
-    await app.setElementValue('//MAIN/DIV/DIV[1]//INPUT', name)
-  }
-  await app.setElementValue('//MAIN/DIV/DIV[2]//INPUT', password)
-  await app.setElementValue('//MAIN/DIV/DIV[3]//INPUT', password)
-  const walletNameInputText = await client.elementIdAttribute(inputElements.value[0].ELEMENT, 'value')
-  await client.waitUntilWindowLoaded()
-  // Next
-  client.click('button[aria-label="next"]')
-  await client.waitUntilWindowLoaded()
-
-  // Check wallet name
-  const walletNameElement = await client.element('//MAIN/DIV/H1')
-  expect(walletNameElement.value).not.toBeNull()
-  const walletName = await client.elementIdText(walletNameElement.value.ELEMENT)
-  expect(walletName.value).toBe(walletNameInputText.value)
-
-  return walletName.value
-}
diff --git a/packages/neuron-wallet/tests-e2e/operations/index.ts b/packages/neuron-wallet/tests-e2e/operations/index.ts
deleted file mode 100644
index 6c5f88c7a6..0000000000
--- a/packages/neuron-wallet/tests-e2e/operations/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { createWallet } from './create-wallet'
-import { importWallet } from './import-wallet'
-import { searchWalletIndex } from './search-wallet-index'
-import { currentWalletAddress } from './current-wallet-address'
-import { sendTransaction } from './send-transaction'
-import { checkNetworkStatus } from './check-network-status'
-
-export {
-  createWallet,
-  importWallet,
-  searchWalletIndex,
-  currentWalletAddress,
-  sendTransaction,
-  checkNetworkStatus,
-}
diff --git a/packages/neuron-wallet/tests-e2e/operations/search-wallet-index.ts b/packages/neuron-wallet/tests-e2e/operations/search-wallet-index.ts
deleted file mode 100644
index 422ebcdeb5..0000000000
--- a/packages/neuron-wallet/tests-e2e/operations/search-wallet-index.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import Application from '../application'
-
-export const searchWalletIndex = async (app: Application, walletName: string) => {
-  const { client } = app.spectron
-  let walletIndex: number | null = null
-
-  await app.gotoSettingsView()
-
-  // Switch to wallet setting
-  client.click('button[name=Wallets]')
-  await client.waitUntilWindowLoaded(1000)
-
-  // Get wallet count
-  const groupElementPath = '//MAIN/DIV/DIV[3]/DIV/DIV/DIV/DIV'
-  const result = await client.selectorExecute(groupElementPath, (elements: any) => `${elements[0].childElementCount}`)
-  const walletCount = parseInt(result)
-
-  // Search wallet
-  for (let index = 1; index <= walletCount; index++) {
-    const elementPath = `${groupElementPath}/DIV[${index}]`
-    const element = await client.element(elementPath)
-    expect(element.value).not.toBeNull()
-    const text = await client.elementIdText(element.value.ELEMENT)
-    if (text.value === walletName) {
-      walletIndex = index
-      break
-    }
-  }
-
-  // Back
-  const backButton = await client.element('//MAIN/DIV/DIV/DIV/BUTTON')
-  expect(backButton.value).not.toBeNull()
-  await client.elementIdClick(backButton.value.ELEMENT)
-  await client.waitUntilWindowLoaded()
-
-  console.log(`searchWalletIndex - ${walletName}: ${walletIndex}`);
-  return walletIndex
-}
diff --git a/packages/neuron-wallet/tests-e2e/operations/send-transaction.ts b/packages/neuron-wallet/tests-e2e/operations/send-transaction.ts
deleted file mode 100644
index fe6a77b927..0000000000
--- a/packages/neuron-wallet/tests-e2e/operations/send-transaction.ts
+++ /dev/null
@@ -1,103 +0,0 @@
-import Application from '../application'
-import { TransactionSendTo } from '../application/env'
-import { checkNetworkStatus } from '.'
-
-export const sendTransaction = async (app: Application, password: string, sendToArr: TransactionSendTo[]) => {
-  const { client } = app.spectron
-
-  // Switch to send page
-  client.click('button[name=Send]')
-  await client.waitUntilWindowLoaded()
-
-  // Get balance
-  let balance = 0
-  let retryCount = 5
-  while (balance === 0 && retryCount > 0) {
-    retryCount -= 1
-    const balanceElement = await client.element('//MAIN/DIV/DIV[4]/DIV[2]')
-    expect(balanceElement.value).not.toBeNull()
-    const balanceText = await client.elementIdText(balanceElement.value.ELEMENT)
-    balance = parseInt(balanceText.value.slice(0, balanceText.value.length - 4))
-    console.log(`balance = ${balance}`);
-    if (balance === 0) {
-      await client.pause(1000)
-    }
-  }
-  // Check balance
-  let sendAmount = 0
-  for (let index = 0; index < sendToArr.length; index++) {
-    sendAmount += sendToArr[index].amount;
-  }
-  if (sendAmount > balance) {
-    throw `The amount sent exceeds the balance. balance: ${balance} send_amount: ${sendAmount}`
-  }
-
-  // Setup send elements
-  const sendItemGroupElementPath = '//MAIN/DIV/DIV[1]/DIV/DIV/DIV'
-  for (let index = 0; index < sendToArr.length; index++) {
-    const sendTo = sendToArr[index];
-    if (sendTo.amount < 61) {
-      throw `Amount should not be less than 61 CKB.  amount = ${sendTo.amount}`
-    }
-    const elementIndex = index + 1
-    // setup
-    const sendItemElementPath = `${sendItemGroupElementPath}/DIV[${elementIndex}]`
-    await app.setElementValue(`${sendItemElementPath}/DIV/DIV[1]//INPUT`, sendTo.address)
-    await app.setElementValue(`${sendItemElementPath}/DIV/DIV[2]//INPUT`, `${sendTo.amount}`)
-    console.log(`setup sent to ${sendTo.address} ${sendTo.amount}`);
-    if (elementIndex < sendToArr.length) {
-      // add
-      const addButton = await client.element(`${sendItemElementPath}/DIV/DIV[2]//BUTTON`)
-      expect(addButton.value).not.toBeNull()
-      await client.elementIdClick(addButton.value.ELEMENT)
-      await client.waitUntilWindowLoaded()
-    }
-  }
-
-  // Send
-  const sendButton = await client.element(`//MAIN/DIV/DIV[5]/BUTTON[2]`)
-  expect(sendButton.value).not.toBeNull()
-  await client.elementIdClick(sendButton.value.ELEMENT)
-  await client.waitUntilWindowLoaded()
-
-  // Input password
-  const passwordInputElement = await client.element('//BODY/DIV[4]/DIV/DIV/DIV/DIV[2]/DIV[2]/DIV/DIV[1]//INPUT')
-  expect(passwordInputElement.value).not.toBeNull()
-  await app.setElementValue('//BODY/DIV[4]/DIV/DIV/DIV/DIV[2]/DIV[2]/DIV/DIV[1]//INPUT', password)
-  // Confirm
-  const confirmElement = await client.element('//BODY/DIV[4]/DIV/DIV/DIV/DIV[2]/DIV[2]/DIV/DIV[2]/BUTTON[2]')
-  expect(confirmElement.value).not.toBeNull()
-  await client.elementIdClick(confirmElement.value.ELEMENT)
-  await client.waitUntilWindowLoaded()
-
-  // Transaction element
-  const transactionElementPath = `//MAIN/DIV/DIV[2]/DIV/DIV/DIV[2]/DIV/DIV/DIV/DIV/DIV/DIV[1]/DIV/DIV/DIV[2]/DIV/DIV/DIV[1]`
-  const transactionElement = await client.element(transactionElementPath)
-  expect(transactionElement.value).not.toBeNull()
-  const transactionText = await client.elementIdText(transactionElement.value.ELEMENT)
-  console.log(`transaction = ${transactionText.value}`);
-  // Transaction hash
-  const transactionHashElement = await client.element(`${transactionElementPath}/DIV/DIV/DIV[3]/SPAN`)
-  expect(transactionHashElement.value).not.toBeNull()
-  const transactionHash = await client.elementIdText(transactionHashElement.value.ELEMENT)
-  console.log(`transactionHash = ${transactionHash.value}`);
-
-  // Check transaction status
-  let success = false
-  while (!success) {
-    if (!(await checkNetworkStatus(app))) {
-      throw 'Network disconnected'
-    }
-    const transactionStatusElement = await client.element(`${transactionElementPath}/DIV/DIV/DIV[4]`)
-    expect(transactionStatusElement.value).not.toBeNull()
-    const transactionStatus = await client.elementIdText(transactionStatusElement.value.ELEMENT)
-    console.log(`transactionStatus = ${transactionStatus.value}`);
-    if (transactionStatus.value === 'success') {
-      break
-    }
-    await client.pause(2000)
-  }
-
-  console.log(`transaction success hash: ${transactionHash.value}`);
-  return transactionHash.value
-}
diff --git a/packages/neuron-wallet/tests-e2e/send-transaction.test.ts b/packages/neuron-wallet/tests-e2e/send-transaction.test.ts
deleted file mode 100644
index 44a1c0bcaa..0000000000
--- a/packages/neuron-wallet/tests-e2e/send-transaction.test.ts
+++ /dev/null
@@ -1,134 +0,0 @@
-import Application from './application'
-
-/**
- * 1. navigate to the send transaction view
- * 2. test the address input
- *   2.1 empty address
- *   2.2 invalid address
- * 3. test amount
- *   3.1 amount should be at least 61CKB
- *   3.2 the decimal places should be no more than 8
- * 4. amount not enough
- */
-describe('Send transaction tests', () => {
-  const app = new Application()
-  beforeEach(() => app.start())
-  afterEach(() =>  app.stop())
-
-  beforeEach(async () => {
-    await app.spectron.client.waitUntilWindowLoaded()
-    await app.createWalletFromWizard()
-    app.spectron.client.click('button[name=Nervos Dao]')
-    await app.spectron.client.waitUntilWindowLoaded()
-    app.spectron.client.click('button[name=Send]')
-    await app.spectron.client.waitUntilWindowLoaded()
-  })
-
-  afterEach(async () => {
-    const { client } = app.spectron
-    client.click('button[type=reset]')
-    await client.waitUntilWindowLoaded()
-  })
-
-  describe('Test address field boundary validation', () => {
-    app.test('Invalid address should show alert', async () => {
-      const { client } = app.spectron
-      const invalidAddress = 'invalid'
-      const inputs = await client.elements('input')
-      client.elementIdValue(inputs.value[0].ELEMENT, invalidAddress)
-      const errorMessage = await client.element('.ms-TextField-errorMessage')
-      const msg = await client.elementIdText(errorMessage.value.ELEMENT)
-      expect(msg.state).not.toBe('failure')
-    })
-
-    app.test('Empty address should show alert', async () => {
-      const emptyAddress = ''
-      const { client } = app.spectron
-      const inputs = await client.elements('input')
-      client.elementIdValue(inputs.value[0].ELEMENT, emptyAddress)
-      await client.waitUntilWindowLoaded()
-      const errorMessage = await client.element('.ms-TextField-errorMessage')
-      const msg = await client.elementIdText(errorMessage.value.ELEMENT)
-      expect(msg.value).toBe('Address cannot be empty')
-    })
-
-    app.test('Valid address should not show alert', async () => {
-      const validAddress = 'ckt1qyq0cwanfaf2t2cwmuxd8ujv2ww6kjv7n53sfwv2l0'
-      const { client } = app.spectron
-      const inputs = await client.elements('input')
-      client.elementIdValue(inputs.value[0].ELEMENT, validAddress)
-      const errorMessage = await client.element('.ms-TextField-errorMessage')
-      expect(errorMessage.state).toBe('failure')
-    })
-  })
-
-  describe('Test amount field boundary validation', () => {
-    const validAddress = 'ckb1qyqrdsefa43s6m882pcj53m4gdnj4k440axqdt9rtd'
-    const invalidAmount = '0.123456789'
-    app.test('Amount 0.123456789 is invalid, decimal places cannot be more than 8', async () => {
-      const { client } = app.spectron
-      const inputs = await client.elements('input')
-      client.elementIdValue(inputs.value[0].ELEMENT, validAddress)
-      client.elementIdValue(inputs.value[1].ELEMENT, invalidAmount)
-      await client.waitUntilWindowLoaded()
-      const errorMessage = await client.element('.ms-TextField-errorMessage')
-      const msg = await client.elementIdText(errorMessage.value.ELEMENT)
-      expect(msg.value).toBe(`Amount ${invalidAmount} is invalid, please enter the Amount with no more than 8 decimal places`)
-    })
-  })
-
-  describe('Amount is not enough', () => {
-    const validAddress = 'ckb1qyqrdsefa43s6m882pcj53m4gdnj4k440axqdt9rtd'
-    const invalidAmount = '61'
-    app.test('Amount is not enough', async () => {
-      const { client } = app.spectron
-      const inputs = await client.elements('input')
-      client.elementIdValue(inputs.value[0].ELEMENT, validAddress)
-      client.elementIdValue(inputs.value[1].ELEMENT, invalidAmount)
-      await client.waitUntilWindowLoaded()
-      const errorMessage = await client.element('.ms-TextField-errorMessage')
-      const msg = await client.elementIdText(errorMessage.value.ELEMENT)
-      expect(msg.value).toBe('Amount is not enough')
-    })
-  })
-
-  describe('Test the transaction fee operations', () => {
-    beforeEach(async () => {
-      const { client } = app.spectron
-      client.click('button[role=switch]')
-      await client.waitUntilWindowLoaded()
-    })
-
-    app.test('default price should be 1,000 and default speed should be 500 blocks', async () => {
-      const { client } = app.spectron
-      const transactionFeePanel = client.$('div[aria-label="transaction fee"]')
-      const [, priceField] = await transactionFeePanel.$$('input')
-      expect((await client.elementIdAttribute(priceField.value.ELEMENT, 'value')).value).toBe('1,000')
-      const speedDropdown = await client.$('div[role=listbox]')
-      expect((await client.elementIdAttribute(speedDropdown.value.ELEMENT, 'innerText')).value).toBe('~ 500 blocks')
-    })
-
-    app.test('Change speed to ~ 100 blocks and the price should be 3,000', async () => {
-      const { client } = app.spectron
-      client.click('div[role=listbox]')
-      await client.waitUntilWindowLoaded()
-      client.click('button[title="~ 100 blocks"]')
-      await client.waitUntilWindowLoaded()
-      const transactionFeePanel = client.$('div[aria-label="transaction fee"]')
-      const [, priceField] = await transactionFeePanel.$$('input')
-      expect((await client.elementIdAttribute(priceField.value.ELEMENT, 'value')).value).toBe('3,000')
-    })
-
-    app.test('Change the price to 100,000 and the speed should switch to immediately', async () => {
-      const { client } = app.spectron
-      const transactionFeePanel = client.$('div[aria-label="transaction fee"]')
-      const [, priceField] = await transactionFeePanel.$$('input')
-      client.elementIdClear(priceField.value.ELEMENT)
-      await client.waitUntilWindowLoaded()
-      client.elementIdValue(priceField.value.ELEMENT, '00')
-      const speedDropdown = await client.$('div[role=listbox]')
-
-      expect((await client.elementIdAttribute(speedDropdown.value.ELEMENT, 'innerText')).value).toBe('immediately')
-    })
-  })
-})
diff --git a/packages/neuron-wallet/tests-e2e/wallet.test.ts b/packages/neuron-wallet/tests-e2e/wallet.test.ts
deleted file mode 100644
index ceffc606c2..0000000000
--- a/packages/neuron-wallet/tests-e2e/wallet.test.ts
+++ /dev/null
@@ -1,174 +0,0 @@
-import Application from './application'
-import { importWallet } from './operations'
-
-describe('Wallet tests', () => {
-  const app = new Application()
-  beforeEach(() => app.start())
-  afterEach(() =>  app.stop())
-
-  app.test('create wallet', async () => {
-    const { client } = app.spectron
-    await client.waitUntilWindowLoaded()
-    await app.createWalletFromWizard()
-  })
-
-  app.test('import wallet', async () => {
-    const { client } = app.spectron
-    await client.waitUntilWindowLoaded()
-    await app.createWalletFromWizard()
-
-    await app.gotoSettingsView()
-    await client.waitUntilWindowLoaded()
-
-    // Switch to wallet setting
-    client.click('button[name=Wallets]')
-    await client.waitUntilWindowLoaded()
-
-    // Go to import wallet page
-    client.click('button[name=import-wallet-seed]')
-    await client.waitUntilWindowLoaded()
-
-    await importWallet(app, 'refuse ecology globe virus demand gentle couch scrub bulk project chronic dog')
-    await client.waitUntilWindowLoaded()
-  })
-
-  test.skip('switch to first wallet', async () => {
-    const { client } = app.spectron
-    await client.waitUntilWindowLoaded()
-    await app.createWalletFromWizard()
-    await app.createWalletFromSettings()
-
-    await app.gotoSettingsView()
-    await client.waitUntilWindowLoaded()
-
-    // Switch to wallet setting
-    client.click('button[name=Wallets]')
-    await client.waitUntilWindowLoaded()
-
-    // Switch to first wallet
-    const firstWallet = await client.element('label.ms-ChoiceField-field span')
-    await client.waitUntilWindowLoaded()
-    const firstWalletName = firstWallet.value.ELEMENT
-    await client.click('label.ms-ChoiceField-field span')
-    await client.waitUntilWindowLoaded(3000)
-
-    // Check wallet name
-    const walletNameElement = await client.element('//MAIN/DIV/H1')
-    expect(walletNameElement.value).not.toBeNull()
-    const walletName = await client.elementIdText(walletNameElement.value.ELEMENT)
-    expect(walletName.value).toBe(firstWalletName)
-  })
-
-  app.test('delete wallet from menu', async () => {
-    const { client } = app.spectron
-    await client.waitUntilWindowLoaded()
-    await app.createWalletFromWizard()
-    await app.createWalletFromSettings()
-
-    // Get current wallet name
-    const walletNameElement = await client.element('//MAIN/DIV/H1')
-    expect(walletNameElement.value).not.toBeNull()
-    const walletName = await client.elementIdText(walletNameElement.value.ELEMENT)
-
-    // Click delete wallet menu item
-    await app.clickMenu(['Wallet', 'Delete Current Wallet'])
-    await client.waitUntilWindowLoaded()
-
-    // Input password
-    const inputElement = await client.element('//INPUT')
-    expect(inputElement.value).not.toBeNull()
-    await app.setElementValue('//INPUT', 'Azusa2233')
-    // Confirm
-    client.click('button[name=confirm]')
-    await client.waitUntilWindowLoaded()
-
-    // Check wallet name
-    const newWalletNameElement = await client.element('//MAIN/DIV/H1')
-    expect(newWalletNameElement.value).not.toBeNull()
-    await client.waitUntilWindowLoaded()
-    const newWalletName = await client.elementIdText(newWalletNameElement.value.ELEMENT)
-    expect(newWalletName.value).not.toBe(walletName.value)
-  })
-
-  app.test('edit wallet', async () => {
-    const { client } = app.spectron
-    await client.waitUntilWindowLoaded()
-    await app.createWalletFromWizard()
-
-    await app.gotoSettingsView()
-    await client.waitUntilWindowLoaded()
-
-    // Switch to wallet setting
-    client.click('button[name=Wallets]')
-    await client.waitUntilWindowLoaded()
-
-    // Get wallet id
-    const walletItemElement = await client.element('//MAIN/DIV/DIV[3]/DIV/DIV/DIV/DIV/DIV[1]/DIV/INPUT')
-    expect(walletItemElement.value).not.toBeNull()
-    const walletItemElementId = await client.elementIdAttribute(walletItemElement.value.ELEMENT, 'id')
-    const walletItemElementName = await client.elementIdAttribute(walletItemElement.value.ELEMENT, 'name')
-    const walletId = walletItemElementId.value.slice(walletItemElementName.value.length + 1)
-
-    // Go to edit wallet page
-    await app.editWallet(walletId)
-    await client.waitUntilWindowLoaded()
-
-    // Update wallet name
-    const walletNameInputElement = await client.element('<input />')
-    expect(walletNameInputElement.value).not.toBeNull()
-    await app.setElementValue('<input />', 'Azusa')
-    await client.waitUntilWindowLoaded()
-    const walletNameInputText = await client.elementIdAttribute(walletNameInputElement.value.ELEMENT, 'value')
-    await client.waitUntilWindowLoaded()
-    // Save
-    client.click('button[name=save-wallet]')
-    await client.waitUntilWindowLoaded()
-    await client.pause(2000)
-
-    // Check wallet name
-    const newWalletNameElement = await client.element('label span')
-    expect(newWalletNameElement).not.toBeNull()
-    const newWalletName = await client.elementIdText(newWalletNameElement.value.ELEMENT)
-    await client.waitUntilWindowLoaded()
-    expect(newWalletName.value).toBe(walletNameInputText.value)
-  })
-
-  describe('Test field boundary', () => {
-    app.test('Whitespace is disallowed in password when creating wallets', async () => {
-      await app.spectron.client.waitUntilWindowLoaded()
-      await app.createWalletFromWizard()
-
-      const mnemonicText = 'refuse ecology globe virus demand gentle couch scrub bulk project chronic dog'
-      const password = ' Aa11 1111 111 '
-      const { client } = app.spectron
-      app.clickMenu(['Wallet', 'Import Wallet', 'Import Wallet Seed'])
-      await client.waitUntilWindowLoaded()
-      client.setValue('textarea', mnemonicText)
-      await client.waitUntilWindowLoaded()
-      client.click('button[type=submit]')
-      await client.waitUntilWindowLoaded()
-      client.setValue('input[type=password]', password)
-      await client.waitUntilWindowLoaded()
-      expect(await client.getValue('input[type=password]')).toEqual(
-        Array.from({ length: 2 }, () => password.replace(/\s/g, '')),
-      )
-    })
-
-    app.test('Whitespace is disallowed in password when requesting the password', async () => {
-      const password = ' Aa22 222 222 '
-      const dialogPasswordSelector = 'div[role=dialog] input[type=password]'
-      const { client } = app.spectron
-
-      await app.spectron.client.waitUntilWindowLoaded()
-      await app.createWalletFromWizard()
-
-      app.clickMenu(['Wallet', 'Delete Current Wallet'])
-      await client.waitUntilWindowLoaded()
-      client.setValue(dialogPasswordSelector, password)
-      await client.waitUntilWindowLoaded()
-      expect(await client.getValue(dialogPasswordSelector)).toBe(password.replace(/\s/g, ''))
-      client.keys(['Escape'])
-      await client.waitUntilWindowLoaded()
-    })
-  })
-})
diff --git a/packages/neuron-wallet/tests/services/settings/base.test.ts b/packages/neuron-wallet/tests/services/settings/base.test.ts
deleted file mode 100644
index 58d2b1a3c6..0000000000
--- a/packages/neuron-wallet/tests/services/settings/base.test.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-import BaseSettings from '../../../src/services/settings/base'
-import FileService from '../../../src/services/file'
-
-describe('BaseSettings', () => {
-  let base: BaseSettings | undefined
-
-  beforeEach(() => {
-    const fileService = FileService.getInstance()
-    // @ts-ignore: Private method
-    const { moduleName, fileName } = BaseSettings
-    if (fileService.hasFile(moduleName, fileName)) {
-      fileService.deleteFileSync(moduleName, fileName)
-    }
-
-    base = new BaseSettings()
-  })
-
-  const key = 'testKey'
-  const value = 'testValue'
-
-  const key2 = 'testKey2'
-  const value2 = 'testValue2'
-
-  it('getInstance', () => {
-    const baseSettings = BaseSettings.getInstance()
-    expect(baseSettings).toBeInstanceOf(BaseSettings)
-  })
-
-  it('update', () => {
-    expect(() => {
-      base!.updateSetting(key, value)
-    }).not.toThrowError()
-  })
-
-  it('read empty', () => {
-    const settings = base!.read()
-    expect(settings).toBeUndefined()
-  })
-
-  it('update and read', () => {
-    base!.updateSetting(key, value)
-    const settings = base!.read()
-    expect(settings).toEqual({ [key]: value })
-  })
-
-  it('update and get', () => {
-    base!.updateSetting(key, value)
-    const result = base!.getSetting(key)
-    expect(result).toEqual(value)
-  })
-
-  it('update multi', () => {
-    base!.updateSetting(key, value)
-    base!.updateSetting(key2, value2)
-    const result = base!.read()
-    expect(result).toEqual({
-      [key]: value,
-      [key2]: value2,
-    })
-  })
-
-  it('update multi and get', () => {
-    base!.updateSetting(key, value)
-    base!.updateSetting(key2, value2)
-    const result = base!.getSetting(key)
-    expect(result).toEqual(value)
-  })
-
-  it('update key multi times', () => {
-    base!.updateSetting(key, value)
-    base!.updateSetting(key, value2)
-
-    const result = base!.getSetting(key)
-    expect(result).toEqual(value2)
-  })
-
-  it('new instance', () => {
-    base!.updateSetting(key, value)
-    const newInstance = new BaseSettings()
-    const result = newInstance.getSetting(key)
-    expect(result).toEqual(value)
-  })
-
-  it('getSetting empty', () => {
-    expect(base!.read()).toBeUndefined()
-    const result = base!.getSetting(key)
-    expect(result).toBeUndefined()
-  })
-})
diff --git a/packages/neuron-wallet/tests/utils/shannonToCKB.test.ts b/packages/neuron-wallet/tests/utils/shannonToCKB.test.ts
new file mode 100644
index 0000000000..cf4d00974c
--- /dev/null
+++ b/packages/neuron-wallet/tests/utils/shannonToCKB.test.ts
@@ -0,0 +1,49 @@
+import shannonToCKB from '../../src/utils/shannonToCKB'
+
+const fixtures: { shannon: bigint, expected: string }[] = [
+  {
+    shannon: BigInt(0),
+    expected: '0.00000000'
+  },
+  {
+    shannon: BigInt(1234567),
+    expected: '+0.01234567'
+  },
+  {
+    shannon: BigInt(-1234567),
+    expected: '-0.01234567'
+  },
+  {
+    shannon: BigInt(12345678),
+    expected: '+0.12345678',
+  },
+  {
+    shannon: BigInt(-12345678),
+    expected: '-0.12345678',
+  },
+  {
+    shannon: BigInt(123456789),
+    expected: '+1.23456789',
+  },
+  {
+    shannon: BigInt(-123456789),
+    expected: '-1.23456789',
+  },
+  {
+    shannon: BigInt(12345678900000000),
+    expected: '+123456789.00000000'
+  },
+  {
+    shannon: BigInt(-12345678900000000),
+    expected: '-123456789.00000000'
+  }
+
+]
+
+describe('Test Shannon To CKB', () => {
+  const fixtureTable: [bigint, string][] = fixtures.map(fixture => [fixture.shannon, fixture.expected])
+  test.each(fixtureTable)(`%s shannon => %s CKB`, (shannon, expected) => {
+    const actual = shannonToCKB(shannon)
+    expect(actual).toBe(expected)
+  })
+})
diff --git a/yarn.lock b/yarn.lock
index cd2a12ef62..5c1998bf67 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -35,6 +35,15 @@
     invariant "^2.2.4"
     semver "^5.5.0"
 
+"@babel/compat-data@^7.8.6", "@babel/compat-data@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.9.0.tgz#04815556fc90b0c174abd2c0c1bb966faa036a6c"
+  integrity sha512-zeFQrr+284Ekvd9e7KAX954LkapWiOmQtsfHirhxqfdlX6MEC32iRE+pqUGlYIBchdevaCwvzxWGSy/YBNI85g==
+  dependencies:
+    browserslist "^4.9.1"
+    invariant "^2.2.4"
+    semver "^5.5.0"
+
 "@babel/core@7.8.4", "@babel/core@^7.1.0", "@babel/core@^7.1.6", "@babel/core@^7.4.5", "@babel/core@^7.7.5":
   version "7.8.4"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.8.4.tgz#d496799e5c12195b3602d0fddd77294e3e38e80e"
@@ -56,6 +65,28 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
+"@babel/core@7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.9.0.tgz#ac977b538b77e132ff706f3b8a4dbad09c03c56e"
+  integrity sha512-kWc7L0fw1xwvI0zi8OKVBuxRVefwGOrKSQMvrQ3dW+bIIavBY3/NpXmpjMy7bQnLgwgzWQZ8TlM57YHpHNHz4w==
+  dependencies:
+    "@babel/code-frame" "^7.8.3"
+    "@babel/generator" "^7.9.0"
+    "@babel/helper-module-transforms" "^7.9.0"
+    "@babel/helpers" "^7.9.0"
+    "@babel/parser" "^7.9.0"
+    "@babel/template" "^7.8.6"
+    "@babel/traverse" "^7.9.0"
+    "@babel/types" "^7.9.0"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.1"
+    json5 "^2.1.2"
+    lodash "^4.17.13"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
 "@babel/generator@^7.4.0", "@babel/generator@^7.8.4":
   version "7.8.4"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.8.4.tgz#35bbc74486956fe4251829f9f6c48330e8d0985e"
@@ -66,6 +97,16 @@
     lodash "^4.17.13"
     source-map "^0.5.0"
 
+"@babel/generator@^7.9.0", "@babel/generator@^7.9.5":
+  version "7.9.5"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.9.5.tgz#27f0917741acc41e6eaaced6d68f96c3fa9afaf9"
+  integrity sha512-GbNIxVB3ZJe3tLeDm1HSn2AhuD/mVcyLDpgtLXa5tplmWrJdF/elxB56XNqCuD6szyNkDi6wuoKXln3QeBmCHQ==
+  dependencies:
+    "@babel/types" "^7.9.5"
+    jsesc "^2.5.1"
+    lodash "^4.17.13"
+    source-map "^0.5.0"
+
 "@babel/helper-annotate-as-pure@^7.0.0", "@babel/helper-annotate-as-pure@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.8.3.tgz#60bc0bc657f63a0924ff9a4b4a0b24a13cf4deee"
@@ -81,6 +122,15 @@
     "@babel/helper-explode-assignable-expression" "^7.8.3"
     "@babel/types" "^7.8.3"
 
+"@babel/helper-builder-react-jsx-experimental@^7.9.0":
+  version "7.9.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx-experimental/-/helper-builder-react-jsx-experimental-7.9.5.tgz#0b4b3e04e6123f03b404ca4dfd6528fe6bb92fe3"
+  integrity sha512-HAagjAC93tk748jcXpZ7oYRZH485RCq/+yEv9SIWezHRPv9moZArTnkUNciUNzvwHUABmiWKlcxJvMcu59UwTg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.8.3"
+    "@babel/helper-module-imports" "^7.8.3"
+    "@babel/types" "^7.9.5"
+
 "@babel/helper-builder-react-jsx@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.8.3.tgz#dee98d7d79cc1f003d80b76fe01c7f8945665ff6"
@@ -89,6 +139,14 @@
     "@babel/types" "^7.8.3"
     esutils "^2.0.0"
 
+"@babel/helper-builder-react-jsx@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-react-jsx/-/helper-builder-react-jsx-7.9.0.tgz#16bf391990b57732700a3278d4d9a81231ea8d32"
+  integrity sha512-weiIo4gaoGgnhff54GQ3P5wsUQmnSwpkvU0r6ZHq6TzoSzKy4JxHEgnxNytaKbov2a9z/CVNyzliuCOUPEX3Jw==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.8.3"
+    "@babel/types" "^7.9.0"
+
 "@babel/helper-call-delegate@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-call-delegate/-/helper-call-delegate-7.8.3.tgz#de82619898aa605d409c42be6ffb8d7204579692"
@@ -109,6 +167,17 @@
     levenary "^1.1.1"
     semver "^5.5.0"
 
+"@babel/helper-compilation-targets@^7.8.7":
+  version "7.8.7"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.8.7.tgz#dac1eea159c0e4bd46e309b5a1b04a66b53c1dde"
+  integrity sha512-4mWm8DCK2LugIS+p1yArqvG1Pf162upsIsjE7cNBjez+NjliQpVhj20obE520nao0o14DaTnFJv+Fw5a0JpoUw==
+  dependencies:
+    "@babel/compat-data" "^7.8.6"
+    browserslist "^4.9.1"
+    invariant "^2.2.4"
+    levenary "^1.1.1"
+    semver "^5.5.0"
+
 "@babel/helper-create-class-features-plugin@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.8.3.tgz#5b94be88c255f140fd2c10dd151e7f98f4bff397"
@@ -129,6 +198,15 @@
     "@babel/helper-regex" "^7.8.3"
     regexpu-core "^4.6.0"
 
+"@babel/helper-create-regexp-features-plugin@^7.8.8":
+  version "7.8.8"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.8.8.tgz#5d84180b588f560b7864efaeea89243e58312087"
+  integrity sha512-LYVPdwkrQEiX9+1R29Ld/wTrmQu1SSKYnuOk3g0CkcZMA1p0gsNxJFj/3gBdaJ7Cg0Fnek5z0DsMULePP7Lrqg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.8.3"
+    "@babel/helper-regex" "^7.8.3"
+    regexpu-core "^4.7.0"
+
 "@babel/helper-define-map@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-define-map/-/helper-define-map-7.8.3.tgz#a0655cad5451c3760b726eba875f1cd8faa02c15"
@@ -155,6 +233,15 @@
     "@babel/template" "^7.8.3"
     "@babel/types" "^7.8.3"
 
+"@babel/helper-function-name@^7.9.5":
+  version "7.9.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.9.5.tgz#2b53820d35275120e1874a82e5aabe1376920a5c"
+  integrity sha512-JVcQZeXM59Cd1qanDUxv9fgJpt3NeKUaqBqUEvfmQ+BCOKq2xUgaWZW2hr0dkbyJgezYuplEoh5knmrnS68efw==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.8.3"
+    "@babel/template" "^7.8.3"
+    "@babel/types" "^7.9.5"
+
 "@babel/helper-get-function-arity@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.8.3.tgz#b894b947bd004381ce63ea1db9f08547e920abd5"
@@ -195,6 +282,19 @@
     "@babel/types" "^7.8.3"
     lodash "^4.17.13"
 
+"@babel/helper-module-transforms@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.9.0.tgz#43b34dfe15961918707d247327431388e9fe96e5"
+  integrity sha512-0FvKyu0gpPfIQ8EkxlrAydOWROdHpBmiCiRwLkUiBGhCUPRRbVD2/tm3sFr/c/GWFrQ/ffutGUAnx7V0FzT2wA==
+  dependencies:
+    "@babel/helper-module-imports" "^7.8.3"
+    "@babel/helper-replace-supers" "^7.8.6"
+    "@babel/helper-simple-access" "^7.8.3"
+    "@babel/helper-split-export-declaration" "^7.8.3"
+    "@babel/template" "^7.8.6"
+    "@babel/types" "^7.9.0"
+    lodash "^4.17.13"
+
 "@babel/helper-optimise-call-expression@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.8.3.tgz#7ed071813d09c75298ef4f208956006b6111ecb9"
@@ -235,6 +335,16 @@
     "@babel/traverse" "^7.8.3"
     "@babel/types" "^7.8.3"
 
+"@babel/helper-replace-supers@^7.8.6":
+  version "7.8.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.8.6.tgz#5ada744fd5ad73203bf1d67459a27dcba67effc8"
+  integrity sha512-PeMArdA4Sv/Wf4zXwBKPqVj7n9UF/xg6slNRtZW84FM7JpE1CbG8B612FyM4cxrf4fMAMGO0kR7voy1ForHHFA==
+  dependencies:
+    "@babel/helper-member-expression-to-functions" "^7.8.3"
+    "@babel/helper-optimise-call-expression" "^7.8.3"
+    "@babel/traverse" "^7.8.6"
+    "@babel/types" "^7.8.6"
+
 "@babel/helper-simple-access@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.8.3.tgz#7f8109928b4dab4654076986af575231deb639ae"
@@ -250,6 +360,11 @@
   dependencies:
     "@babel/types" "^7.8.3"
 
+"@babel/helper-validator-identifier@^7.9.5":
+  version "7.9.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.9.5.tgz#90977a8e6fbf6b431a7dc31752eee233bf052d80"
+  integrity sha512-/8arLKUFq882w4tWGj9JYzRpAlZgiWUJ+dtteNTDqrRBz9Iguck9Rn3ykuBDoUwh2TO4tSAJlrxDUOXWklJe4g==
+
 "@babel/helper-wrap-function@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.8.3.tgz#9dbdb2bb55ef14aaa01fe8c99b629bd5352d8610"
@@ -269,6 +384,15 @@
     "@babel/traverse" "^7.8.4"
     "@babel/types" "^7.8.3"
 
+"@babel/helpers@^7.9.0":
+  version "7.9.2"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.9.2.tgz#b42a81a811f1e7313b88cba8adc66b3d9ae6c09f"
+  integrity sha512-JwLvzlXVPjO8eU9c/wF9/zOIN7X6h8DYf7mG4CiFRZRvZNKEF5dQ3H3V+ASkHoIB3mWhatgl5ONhyqHRI6MppA==
+  dependencies:
+    "@babel/template" "^7.8.3"
+    "@babel/traverse" "^7.9.0"
+    "@babel/types" "^7.9.0"
+
 "@babel/highlight@^7.0.0", "@babel/highlight@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.8.3.tgz#28f173d04223eaaa59bc1d439a3836e6d1265797"
@@ -278,11 +402,16 @@
     esutils "^2.0.2"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.1.6", "@babel/parser@^7.4.3", "@babel/parser@^7.7.5", "@babel/parser@^7.8.3", "@babel/parser@^7.8.4":
+"@babel/parser@^7.1.0", "@babel/parser@^7.1.6", "@babel/parser@^7.4.3", "@babel/parser@^7.7.5", "@babel/parser@^7.8.3", "@babel/parser@^7.8.4":
   version "7.8.4"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.8.4.tgz#d1dbe64691d60358a974295fa53da074dd2ce8e8"
   integrity sha512-0fKu/QqildpXmPVaRBoXOlyBb3MC+J0A66x97qEfLOMkn3u6nfY5esWogQwi/K0BjASYy4DbnsEWnpNL6qT5Mw==
 
+"@babel/parser@^7.7.0", "@babel/parser@^7.8.6", "@babel/parser@^7.9.0":
+  version "7.9.4"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.9.4.tgz#68a35e6b0319bbc014465be43828300113f2f2e8"
+  integrity sha512-bC49otXX6N0/VYhgOMh4gnP26E9xnDZK3TmbNpxYzzz9BQLBosQwfyOe9/cXUU3txYhTzLCbcqd5c8y/OmCjHA==
+
 "@babel/plugin-proposal-async-generator-functions@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.8.3.tgz#bad329c670b382589721b27540c7d288601c6e6f"
@@ -325,7 +454,7 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-json-strings" "^7.8.0"
 
-"@babel/plugin-proposal-nullish-coalescing-operator@^7.8.3":
+"@babel/plugin-proposal-nullish-coalescing-operator@7.8.3", "@babel/plugin-proposal-nullish-coalescing-operator@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.8.3.tgz#e4572253fdeed65cddeecfdab3f928afeb2fd5d2"
   integrity sha512-TS9MlfzXpXKt6YYomudb/KU7nQI6/xnapG6in1uZxoxDghuSMZsPb6D2fyUwNYSAp4l1iR7QtFOjkqcRYcUsfw==
@@ -333,7 +462,7 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
 
-"@babel/plugin-proposal-numeric-separator@7.8.3":
+"@babel/plugin-proposal-numeric-separator@7.8.3", "@babel/plugin-proposal-numeric-separator@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-numeric-separator/-/plugin-proposal-numeric-separator-7.8.3.tgz#5d6769409699ec9b3b68684cd8116cedff93bad8"
   integrity sha512-jWioO1s6R/R+wEHizfaScNsAx+xKgwTLNXSh7tTC4Usj3ItsPEhYkEpU4h+lpnBwq7NBVOJXfO6cRFYcX69JUQ==
@@ -349,6 +478,15 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
 
+"@babel/plugin-proposal-object-rest-spread@^7.9.0":
+  version "7.9.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.9.5.tgz#3fd65911306d8746014ec0d0cf78f0e39a149116"
+  integrity sha512-VP2oXvAf7KCYTthbUHwBlewbl1Iq059f6seJGsxMizaCdgHIeczOr7FBqELhSqfkIl04Fi8okzWzl63UKbQmmg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
+    "@babel/plugin-transform-parameters" "^7.9.5"
+
 "@babel/plugin-proposal-optional-catch-binding@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.8.3.tgz#9dee96ab1650eed88646ae9734ca167ac4a9c5c9"
@@ -357,6 +495,14 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
 
+"@babel/plugin-proposal-optional-chaining@7.9.0", "@babel/plugin-proposal-optional-chaining@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.9.0.tgz#31db16b154c39d6b8a645292472b98394c292a58"
+  integrity sha512-NDn5tu3tcv4W30jNhmc2hyD5c56G6cXx4TesJubhxrJeCvuuMpttxr0OnNCqbZGhFjLrg+NIhxxC+BK5F6yS3w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+
 "@babel/plugin-proposal-optional-chaining@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.8.3.tgz#ae10b3214cb25f7adb1f3bc87ba42ca10b7e2543"
@@ -365,6 +511,14 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-optional-chaining" "^7.8.0"
 
+"@babel/plugin-proposal-unicode-property-regex@^7.4.4":
+  version "7.8.8"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.8.8.tgz#ee3a95e90cdc04fe8cd92ec3279fa017d68a0d1d"
+  integrity sha512-EVhjVsMpbhLw9ZfHWSx2iy13Q8Z/eg8e8ccVWt23sWQK5l1UdkoLJPN5w69UA4uITGBnEZD2JOe4QOHycYKv8A==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.8.8"
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-proposal-unicode-property-regex@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-unicode-property-regex/-/plugin-proposal-unicode-property-regex-7.8.3.tgz#b646c3adea5f98800c9ab45105ac34d06cd4a47f"
@@ -429,7 +583,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-numeric-separator@^7.8.3":
+"@babel/plugin-syntax-numeric-separator@^7.8.0", "@babel/plugin-syntax-numeric-separator@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-numeric-separator/-/plugin-syntax-numeric-separator-7.8.3.tgz#0e3fb63e09bea1b11e96467271c8308007e7c41f"
   integrity sha512-H7dCMAdN83PcCmqmkHB5dtp+Xa9a6LKSvA2hiFBC/5alSHxM5VgWZXFqDi0YFe8XNGT6iCa+z4V4zSt/PdZ7Dw==
@@ -516,6 +670,20 @@
     "@babel/helper-split-export-declaration" "^7.8.3"
     globals "^11.1.0"
 
+"@babel/plugin-transform-classes@^7.9.0":
+  version "7.9.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.9.5.tgz#800597ddb8aefc2c293ed27459c1fcc935a26c2c"
+  integrity sha512-x2kZoIuLC//O5iA7PEvecB105o7TLzZo8ofBVhP79N+DO3jaX+KYfww9TQcfBEZD0nikNyYcGB1IKtRq36rdmg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.8.3"
+    "@babel/helper-define-map" "^7.8.3"
+    "@babel/helper-function-name" "^7.9.5"
+    "@babel/helper-optimise-call-expression" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-replace-supers" "^7.8.6"
+    "@babel/helper-split-export-declaration" "^7.8.3"
+    globals "^11.1.0"
+
 "@babel/plugin-transform-computed-properties@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.8.3.tgz#96d0d28b7f7ce4eb5b120bb2e0e943343c86f81b"
@@ -530,7 +698,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-dotall-regex@^7.8.3":
+"@babel/plugin-transform-dotall-regex@^7.4.4", "@babel/plugin-transform-dotall-regex@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.8.3.tgz#c3c6ec5ee6125c6993c5cbca20dc8621a9ea7a6e"
   integrity sha512-kLs1j9Nn4MQoBYdRXH6AeaXMbEJFaFu/v1nQkvib6QzTj8MZI5OQzqmD83/2jEM1z0DLilra5aWO5YpyC0ALIw==
@@ -553,7 +721,15 @@
     "@babel/helper-builder-binary-assignment-operator-visitor" "^7.8.3"
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-flow-strip-types@7.8.3", "@babel/plugin-transform-flow-strip-types@^7.8.3":
+"@babel/plugin-transform-flow-strip-types@7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.9.0.tgz#8a3538aa40434e000b8f44a3c5c9ac7229bd2392"
+  integrity sha512-7Qfg0lKQhEHs93FChxVLAvhBshOPQDtJUTVHr/ZwQNRccCm4O9D79r9tVSoV8iNwjP1YgfD+e/fgHcPkN1qEQg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-flow" "^7.8.3"
+
+"@babel/plugin-transform-flow-strip-types@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.8.3.tgz#da705a655466b2a9b36046b57bf0cbcd53551bd4"
   integrity sha512-g/6WTWG/xbdd2exBBzMfygjX/zw4eyNC4X8pRaq7aRHRoDUCzAIu3kGYIXviOv8BjCuWm8vDBwjHcjiRNgXrPA==
@@ -568,6 +744,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
+"@babel/plugin-transform-for-of@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.9.0.tgz#0f260e27d3e29cd1bb3128da5e76c761aa6c108e"
+  integrity sha512-lTAnWOpMwOXpyDx06N+ywmF3jNbafZEqZ96CGYabxHrxNX8l5ny7dt4bK/rGwAh9utyP2b2Hv7PlZh1AAS54FQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-transform-function-name@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.8.3.tgz#279373cb27322aaad67c2683e776dfc47196ed8b"
@@ -599,6 +782,15 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     babel-plugin-dynamic-import-node "^2.3.0"
 
+"@babel/plugin-transform-modules-amd@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.9.0.tgz#19755ee721912cf5bb04c07d50280af3484efef4"
+  integrity sha512-vZgDDF003B14O8zJy0XXLnPH4sg+9X5hFBBGN1V+B2rgrB+J2xIypSN6Rk9imB2hSTHQi5OHLrFWsZab1GMk+Q==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.9.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    babel-plugin-dynamic-import-node "^2.3.0"
+
 "@babel/plugin-transform-modules-commonjs@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.8.3.tgz#df251706ec331bd058a34bdd72613915f82928a5"
@@ -609,6 +801,16 @@
     "@babel/helper-simple-access" "^7.8.3"
     babel-plugin-dynamic-import-node "^2.3.0"
 
+"@babel/plugin-transform-modules-commonjs@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.9.0.tgz#e3e72f4cbc9b4a260e30be0ea59bdf5a39748940"
+  integrity sha512-qzlCrLnKqio4SlgJ6FMMLBe4bySNis8DFn1VkGmOcxG9gqEyPIOzeQrA//u0HAKrWpJlpZbZMPB1n/OPa4+n8g==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.9.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/helper-simple-access" "^7.8.3"
+    babel-plugin-dynamic-import-node "^2.3.0"
+
 "@babel/plugin-transform-modules-systemjs@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.8.3.tgz#d8bbf222c1dbe3661f440f2f00c16e9bb7d0d420"
@@ -619,6 +821,16 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     babel-plugin-dynamic-import-node "^2.3.0"
 
+"@babel/plugin-transform-modules-systemjs@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.9.0.tgz#e9fd46a296fc91e009b64e07ddaa86d6f0edeb90"
+  integrity sha512-FsiAv/nao/ud2ZWy4wFacoLOm5uxl0ExSQ7ErvP7jpoihLR6Cq90ilOFyX9UXct3rbtKsAiZ9kFt5XGfPe/5SQ==
+  dependencies:
+    "@babel/helper-hoist-variables" "^7.8.3"
+    "@babel/helper-module-transforms" "^7.9.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    babel-plugin-dynamic-import-node "^2.3.0"
+
 "@babel/plugin-transform-modules-umd@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.8.3.tgz#592d578ce06c52f5b98b02f913d653ffe972661a"
@@ -627,6 +839,14 @@
     "@babel/helper-module-transforms" "^7.8.3"
     "@babel/helper-plugin-utils" "^7.8.3"
 
+"@babel/plugin-transform-modules-umd@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.9.0.tgz#e909acae276fec280f9b821a5f38e1f08b480697"
+  integrity sha512-uTWkXkIVtg/JGRSIABdBoMsoIeoHQHPTL0Y2E7xf5Oj7sLqwVsNXOkNk0VJc7vF0IMBsPeikHxFjGe+qmwPtTQ==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.9.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-transform-named-capturing-groups-regex@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.8.3.tgz#a2a72bffa202ac0e2d0506afd0939c5ecbc48c6c"
@@ -658,6 +878,14 @@
     "@babel/helper-get-function-arity" "^7.8.3"
     "@babel/helper-plugin-utils" "^7.8.3"
 
+"@babel/plugin-transform-parameters@^7.8.7", "@babel/plugin-transform-parameters@^7.9.5":
+  version "7.9.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.9.5.tgz#173b265746f5e15b2afe527eeda65b73623a0795"
+  integrity sha512-0+1FhHnMfj6lIIhVvS4KGQJeuhe1GI//h5uptK4PvLt+BGBxsoUJbd3/IW002yk//6sZPlFgsG1hY6OHLcy6kA==
+  dependencies:
+    "@babel/helper-get-function-arity" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+
 "@babel/plugin-transform-property-literals@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.8.3.tgz#33194300d8539c1ed28c62ad5087ba3807b98263"
@@ -680,6 +908,15 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
+"@babel/plugin-transform-react-jsx-development@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-development/-/plugin-transform-react-jsx-development-7.9.0.tgz#3c2a130727caf00c2a293f0aed24520825dbf754"
+  integrity sha512-tK8hWKrQncVvrhvtOiPpKrQjfNX3DtkNLSX4ObuGcpS9p0QrGetKmlySIGR07y48Zft8WVgPakqd/bk46JrMSw==
+  dependencies:
+    "@babel/helper-builder-react-jsx-experimental" "^7.9.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-jsx" "^7.8.3"
+
 "@babel/plugin-transform-react-jsx-self@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.8.3.tgz#c4f178b2aa588ecfa8d077ea80d4194ee77ed702"
@@ -688,6 +925,14 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-jsx" "^7.8.3"
 
+"@babel/plugin-transform-react-jsx-self@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-self/-/plugin-transform-react-jsx-self-7.9.0.tgz#f4f26a325820205239bb915bad8e06fcadabb49b"
+  integrity sha512-K2ObbWPKT7KUTAoyjCsFilOkEgMvFG+y0FqOl6Lezd0/13kMkkjHskVsZvblRPj1PHA44PrToaZANrryppzTvQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-jsx" "^7.8.3"
+
 "@babel/plugin-transform-react-jsx-source@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.8.3.tgz#951e75a8af47f9f120db731be095d2b2c34920e0"
@@ -696,6 +941,14 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-jsx" "^7.8.3"
 
+"@babel/plugin-transform-react-jsx-source@^7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.9.0.tgz#89ef93025240dd5d17d3122294a093e5e0183de0"
+  integrity sha512-K6m3LlSnTSfRkM6FcRk8saNEeaeyG5k7AVkBU2bZK3+1zdkSED3qNdsWrUgQBeTVD2Tp3VMmerxVO2yM5iITmw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-jsx" "^7.8.3"
+
 "@babel/plugin-transform-react-jsx@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.8.3.tgz#4220349c0390fdefa505365f68c103562ab2fc4a"
@@ -705,6 +958,16 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-jsx" "^7.8.3"
 
+"@babel/plugin-transform-react-jsx@^7.9.1":
+  version "7.9.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.9.4.tgz#86f576c8540bd06d0e95e0b61ea76d55f6cbd03f"
+  integrity sha512-Mjqf3pZBNLt854CK0C/kRuXAnE6H/bo7xYojP+WGtX8glDGSibcwnsWwhwoSuRg0+EBnxPC1ouVnuetUIlPSAw==
+  dependencies:
+    "@babel/helper-builder-react-jsx" "^7.9.0"
+    "@babel/helper-builder-react-jsx-experimental" "^7.9.0"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-jsx" "^7.8.3"
+
 "@babel/plugin-transform-regenerator@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.8.3.tgz#b31031e8059c07495bf23614c97f3d9698bc6ec8"
@@ -712,6 +975,13 @@
   dependencies:
     regenerator-transform "^0.14.0"
 
+"@babel/plugin-transform-regenerator@^7.8.7":
+  version "7.8.7"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.8.7.tgz#5e46a0dca2bee1ad8285eb0527e6abc9c37672f8"
+  integrity sha512-TIg+gAl4Z0a3WmD3mbYSk+J9ZUH6n/Yc57rtKRnlA/7rcCvpekHXe0CMZHP1gYp7/KLe9GHTuIba0vXmls6drA==
+  dependencies:
+    regenerator-transform "^0.14.2"
+
 "@babel/plugin-transform-reserved-words@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.8.3.tgz#9a0635ac4e665d29b162837dd3cc50745dfdf1f5"
@@ -719,10 +989,10 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-runtime@7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.8.3.tgz#c0153bc0a5375ebc1f1591cb7eea223adea9f169"
-  integrity sha512-/vqUt5Yh+cgPZXXjmaG9NT8aVfThKk7G4OqkVhrXqwsC5soMn/qTCxs36rZ2QFhpfTJcjw4SNDIZ4RUb8OL4jQ==
+"@babel/plugin-transform-runtime@7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.9.0.tgz#45468c0ae74cc13204e1d3b1f4ce6ee83258af0b"
+  integrity sha512-pUu9VSf3kI1OqbWINQ7MaugnitRss1z533436waNXp+0N3ur3zfut37sXiQMxkuCF4VUjwZucen/quskCh7NHw==
   dependencies:
     "@babel/helper-module-imports" "^7.8.3"
     "@babel/helper-plugin-utils" "^7.8.3"
@@ -775,6 +1045,15 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-typescript" "^7.8.3"
 
+"@babel/plugin-transform-typescript@^7.9.0":
+  version "7.9.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.9.4.tgz#4bb4dde4f10bbf2d787fce9707fb09b483e33359"
+  integrity sha512-yeWeUkKx2auDbSxRe8MusAG+n4m9BFY/v+lPjmQDgOFX5qnySkUY5oXzkp6FwPdsYqnKay6lorXYdC0n3bZO7w==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-typescript" "^7.8.3"
+
 "@babel/plugin-transform-unicode-regex@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.8.3.tgz#0cef36e3ba73e5c57273effb182f46b91a1ecaad"
@@ -783,7 +1062,73 @@
     "@babel/helper-create-regexp-features-plugin" "^7.8.3"
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/preset-env@7.8.4", "@babel/preset-env@^7.1.6", "@babel/preset-env@^7.4.5":
+"@babel/preset-env@7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.9.0.tgz#a5fc42480e950ae8f5d9f8f2bbc03f52722df3a8"
+  integrity sha512-712DeRXT6dyKAM/FMbQTV/FvRCms2hPCx+3weRjZ8iQVQWZejWWk1wwG6ViWMyqb/ouBbGOl5b6aCk0+j1NmsQ==
+  dependencies:
+    "@babel/compat-data" "^7.9.0"
+    "@babel/helper-compilation-targets" "^7.8.7"
+    "@babel/helper-module-imports" "^7.8.3"
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-proposal-async-generator-functions" "^7.8.3"
+    "@babel/plugin-proposal-dynamic-import" "^7.8.3"
+    "@babel/plugin-proposal-json-strings" "^7.8.3"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.8.3"
+    "@babel/plugin-proposal-numeric-separator" "^7.8.3"
+    "@babel/plugin-proposal-object-rest-spread" "^7.9.0"
+    "@babel/plugin-proposal-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-proposal-optional-chaining" "^7.9.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.8.3"
+    "@babel/plugin-syntax-async-generators" "^7.8.0"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.0"
+    "@babel/plugin-syntax-json-strings" "^7.8.0"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.0"
+    "@babel/plugin-syntax-numeric-separator" "^7.8.0"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.0"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.0"
+    "@babel/plugin-syntax-top-level-await" "^7.8.3"
+    "@babel/plugin-transform-arrow-functions" "^7.8.3"
+    "@babel/plugin-transform-async-to-generator" "^7.8.3"
+    "@babel/plugin-transform-block-scoped-functions" "^7.8.3"
+    "@babel/plugin-transform-block-scoping" "^7.8.3"
+    "@babel/plugin-transform-classes" "^7.9.0"
+    "@babel/plugin-transform-computed-properties" "^7.8.3"
+    "@babel/plugin-transform-destructuring" "^7.8.3"
+    "@babel/plugin-transform-dotall-regex" "^7.8.3"
+    "@babel/plugin-transform-duplicate-keys" "^7.8.3"
+    "@babel/plugin-transform-exponentiation-operator" "^7.8.3"
+    "@babel/plugin-transform-for-of" "^7.9.0"
+    "@babel/plugin-transform-function-name" "^7.8.3"
+    "@babel/plugin-transform-literals" "^7.8.3"
+    "@babel/plugin-transform-member-expression-literals" "^7.8.3"
+    "@babel/plugin-transform-modules-amd" "^7.9.0"
+    "@babel/plugin-transform-modules-commonjs" "^7.9.0"
+    "@babel/plugin-transform-modules-systemjs" "^7.9.0"
+    "@babel/plugin-transform-modules-umd" "^7.9.0"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.8.3"
+    "@babel/plugin-transform-new-target" "^7.8.3"
+    "@babel/plugin-transform-object-super" "^7.8.3"
+    "@babel/plugin-transform-parameters" "^7.8.7"
+    "@babel/plugin-transform-property-literals" "^7.8.3"
+    "@babel/plugin-transform-regenerator" "^7.8.7"
+    "@babel/plugin-transform-reserved-words" "^7.8.3"
+    "@babel/plugin-transform-shorthand-properties" "^7.8.3"
+    "@babel/plugin-transform-spread" "^7.8.3"
+    "@babel/plugin-transform-sticky-regex" "^7.8.3"
+    "@babel/plugin-transform-template-literals" "^7.8.3"
+    "@babel/plugin-transform-typeof-symbol" "^7.8.4"
+    "@babel/plugin-transform-unicode-regex" "^7.8.3"
+    "@babel/preset-modules" "^0.1.3"
+    "@babel/types" "^7.9.0"
+    browserslist "^4.9.1"
+    core-js-compat "^3.6.2"
+    invariant "^2.2.2"
+    levenary "^1.1.1"
+    semver "^5.5.0"
+
+"@babel/preset-env@^7.1.6", "@babel/preset-env@^7.4.5":
   version "7.8.4"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.8.4.tgz#9dac6df5f423015d3d49b6e9e5fa3413e4a72c4e"
   integrity sha512-HihCgpr45AnSOHRbS5cWNTINs0TwaR8BS8xIIH+QwiW8cKL0llV91njQMpeMReEPVs+1Ao0x3RLEBLtt1hOq4w==
@@ -854,7 +1199,30 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-transform-flow-strip-types" "^7.8.3"
 
-"@babel/preset-react@7.8.3", "@babel/preset-react@^7.0.0":
+"@babel/preset-modules@^0.1.3":
+  version "0.1.3"
+  resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.3.tgz#13242b53b5ef8c883c3cf7dddd55b36ce80fbc72"
+  integrity sha512-Ra3JXOHBq2xd56xSF7lMKXdjBn3T772Y1Wet3yWnkDly9zHvJki029tAFzvAAK5cf4YV3yoxuP61crYRol6SVg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
+    "@babel/plugin-transform-dotall-regex" "^7.4.4"
+    "@babel/types" "^7.4.4"
+    esutils "^2.0.2"
+
+"@babel/preset-react@7.9.1":
+  version "7.9.1"
+  resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.9.1.tgz#b346403c36d58c3bb544148272a0cefd9c28677a"
+  integrity sha512-aJBYF23MPj0RNdp/4bHnAP0NVqqZRr9kl0NAOP4nJCex6OYVio59+dnQzsAWFuogdLyeaKA1hmfUIVZkY5J+TQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-transform-react-display-name" "^7.8.3"
+    "@babel/plugin-transform-react-jsx" "^7.9.1"
+    "@babel/plugin-transform-react-jsx-development" "^7.9.0"
+    "@babel/plugin-transform-react-jsx-self" "^7.9.0"
+    "@babel/plugin-transform-react-jsx-source" "^7.9.0"
+
+"@babel/preset-react@^7.0.0":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/preset-react/-/preset-react-7.8.3.tgz#23dc63f1b5b0751283e04252e78cf1d6589273d2"
   integrity sha512-9hx0CwZg92jGb7iHYQVgi0tOEHP/kM60CtWJQnmbATSPIQQ2xYzfoCI3EdqAhFBeeJwYMdWQuDUHMsuDbH9hyQ==
@@ -865,7 +1233,15 @@
     "@babel/plugin-transform-react-jsx-self" "^7.8.3"
     "@babel/plugin-transform-react-jsx-source" "^7.8.3"
 
-"@babel/preset-typescript@7.8.3", "@babel/preset-typescript@^7.1.0":
+"@babel/preset-typescript@7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.9.0.tgz#87705a72b1f0d59df21c179f7c3d2ef4b16ce192"
+  integrity sha512-S4cueFnGrIbvYJgwsVFKdvOmpiL0XGw9MFW9D0vgRys5g36PBhZRL8NX8Gr2akz8XRtzq6HuDXPD/1nniagNUg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-transform-typescript" "^7.9.0"
+
+"@babel/preset-typescript@^7.1.0":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.8.3.tgz#90af8690121beecd9a75d0cc26c6be39d1595d13"
   integrity sha512-qee5LgPGui9zQ0jR1TeU5/fP9L+ovoArklEqY12ek8P/wV5ZeM/VYSQYwICeoT6FfpJTekG9Ilay5PhwsOpMHA==
@@ -892,14 +1268,29 @@
     core-js-pure "^3.0.0"
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@7.8.4", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.6":
+"@babel/runtime-corejs3@^7.8.3":
+  version "7.9.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.9.2.tgz#26fe4aa77e9f1ecef9b776559bbb8e84d34284b7"
+  integrity sha512-HHxmgxbIzOfFlZ+tdeRKtaxWOMUoCG5Mu3wKeUmOxjYrwb3AAHgnmtCUbPPK11/raIWLIBK250t8E2BPO0p7jA==
+  dependencies:
+    core-js-pure "^3.0.0"
+    regenerator-runtime "^0.13.4"
+
+"@babel/runtime@7.9.0":
+  version "7.9.0"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.0.tgz#337eda67401f5b066a6f205a3113d4ac18ba495b"
+  integrity sha512-cTIudHnzuWLS56ik4DnRnqqNf8MkdUzV4iFFI1h7Jo9xvrpQROYaAnaSd2mHLQAzzZAPfATynX5ord6YlNYNMA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.3.4", "@babel/runtime@^7.4.0", "@babel/runtime@^7.4.4", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.6":
   version "7.8.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.8.4.tgz#d79f5a2040f7caa24d53e563aad49cbc05581308"
   integrity sha512-neAp3zt80trRVBI1x0azq6c57aNBqYZH8KhMm3TaB7wEI5Q4A2SHfBHE8w9gOhI/lrqxtEbXZgQIrHP+wvSGwQ==
   dependencies:
     regenerator-runtime "^0.13.2"
 
-"@babel/runtime@^7.8.7":
+"@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
   version "7.9.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.2.tgz#d90df0583a3a252f09aaa619665367bae518db06"
   integrity sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==
@@ -915,7 +1306,16 @@
     "@babel/parser" "^7.8.3"
     "@babel/types" "^7.8.3"
 
-"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.4.3", "@babel/traverse@^7.7.4", "@babel/traverse@^7.8.3", "@babel/traverse@^7.8.4":
+"@babel/template@^7.8.6":
+  version "7.8.6"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.8.6.tgz#86b22af15f828dfb086474f964dcc3e39c43ce2b"
+  integrity sha512-zbMsPMy/v0PWFZEhQJ66bqjhH+z0JgMoBWuikXybgG3Gkd/3t5oQ1Rw2WQhnSrsOmsKXnZOx15tkC4qON/+JPg==
+  dependencies:
+    "@babel/code-frame" "^7.8.3"
+    "@babel/parser" "^7.8.6"
+    "@babel/types" "^7.8.6"
+
+"@babel/traverse@^7.1.0", "@babel/traverse@^7.4.3", "@babel/traverse@^7.7.4", "@babel/traverse@^7.8.3", "@babel/traverse@^7.8.4":
   version "7.8.4"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.8.4.tgz#f0845822365f9d5b0e312ed3959d3f827f869e3c"
   integrity sha512-NGLJPZwnVEyBPLI+bl9y9aSnxMhsKz42so7ApAv9D+b4vAFPpY013FTS9LdKxcABoIYFU52HcYga1pPlx454mg==
@@ -930,6 +1330,21 @@
     globals "^11.1.0"
     lodash "^4.17.13"
 
+"@babel/traverse@^7.7.0", "@babel/traverse@^7.8.6", "@babel/traverse@^7.9.0":
+  version "7.9.5"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.9.5.tgz#6e7c56b44e2ac7011a948c21e283ddd9d9db97a2"
+  integrity sha512-c4gH3jsvSuGUezlP6rzSJ6jf8fYjLj3hsMZRx/nX0h+fmHN0w+ekubRrHPqnMec0meycA2nwCsJ7dC8IPem2FQ==
+  dependencies:
+    "@babel/code-frame" "^7.8.3"
+    "@babel/generator" "^7.9.5"
+    "@babel/helper-function-name" "^7.9.5"
+    "@babel/helper-split-export-declaration" "^7.8.3"
+    "@babel/parser" "^7.9.0"
+    "@babel/types" "^7.9.5"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.13"
+
 "@babel/types@^7.0.0", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.8.3.tgz#5a383dffa5416db1b73dedffd311ffd0788fb31c"
@@ -939,6 +1354,15 @@
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.7.0", "@babel/types@^7.8.6", "@babel/types@^7.9.0", "@babel/types@^7.9.5":
+  version "7.9.5"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.9.5.tgz#89231f82915a8a566a703b3b20133f73da6b9444"
+  integrity sha512-XjnvNqenk818r5zMaba+sLQjnbda31UfUURv3ei0qPQw4u+j2jMyJ5b11y8ZHYTRSI3NnInQkkkRT4fLqqPdHg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.9.5"
+    lodash "^4.17.13"
+    to-fast-properties "^2.0.0"
+
 "@bit/primefaces.primereact.button@3.1.8":
   version "3.1.8"
   resolved "https://node.bit.dev/primefaces.primereact.button/-/primefaces.primereact.button-3.1.8.tgz#1a1947f8769b18221dadeba1b261da86ae509631"
@@ -3639,13 +4063,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/webdriverio@4.13.0":
-  version "4.13.0"
-  resolved "https://registry.yarnpkg.com/@types/webdriverio/-/webdriverio-4.13.0.tgz#05acc3cbea6de5251c7adad16da1ee626858350e"
-  integrity sha512-4SpsMUy6MatxIQidOZR4HpAgIi5Lzpvo7nCdq+7SdLvUGCNLPLaWSwdtpHK+En3CqQTb559kSIWR4SKFWT8H3w==
-  dependencies:
-    "@types/node" "*"
-
 "@types/webpack-env@^1.15.0":
   version "1.15.1"
   resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.15.1.tgz#c8e84705e08eed430b5e15b39c65b0944e4d1422"
@@ -4218,6 +4635,16 @@ ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.5.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+ajv@^6.12.0:
+  version "6.12.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.0.tgz#06d60b96d87b8454a5adaba86e7854da629db4b7"
+  integrity sha512-D6gFiFA0RRLyUbvijN74DWAjXSFxWKaWP7mldxkVhyhAV3+SWA9HEJPHQ2c9soIeTFJqcSdFDGFgdqs1iUU2Hw==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
 alphanum-sort@^1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/alphanum-sort/-/alphanum-sort-1.0.2.tgz#97a1119649b211ad33691d9f9f486a8ec9fbe0a3"
@@ -4418,18 +4845,6 @@ aproba@^1.0.3, aproba@^1.1.1, aproba@^1.1.2:
   resolved "https://registry.yarnpkg.com/aproba/-/aproba-2.0.0.tgz#52520b8ae5b569215b354efc0caa3fe1e45a8adc"
   integrity sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==
 
-archiver-utils@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/archiver-utils/-/archiver-utils-1.3.0.tgz#e50b4c09c70bf3d680e32ff1b7994e9f9d895174"
-  integrity sha1-5QtMCccL89aA4y/xt5lOn52JUXQ=
-  dependencies:
-    glob "^7.0.0"
-    graceful-fs "^4.1.0"
-    lazystream "^1.0.0"
-    lodash "^4.8.0"
-    normalize-path "^2.0.0"
-    readable-stream "^2.0.0"
-
 archiver-utils@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/archiver-utils/-/archiver-utils-2.1.0.tgz#e8a460e94b693c3e3da182a098ca6285ba9249e2"
@@ -4459,20 +4874,6 @@ archiver@3.1.1:
     tar-stream "^2.1.0"
     zip-stream "^2.1.2"
 
-archiver@~2.1.0:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/archiver/-/archiver-2.1.1.tgz#ff662b4a78201494a3ee544d3a33fe7496509ebc"
-  integrity sha1-/2YrSnggFJSj7lRNOjP+dJZQnrw=
-  dependencies:
-    archiver-utils "^1.3.0"
-    async "^2.0.0"
-    buffer-crc32 "^0.2.1"
-    glob "^7.0.0"
-    lodash "^4.8.0"
-    readable-stream "^2.0.0"
-    tar-stream "^1.5.0"
-    zip-stream "^1.2.0"
-
 are-we-there-yet@~1.1.2:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz#4b35c2944f062a8bfcda66410760350fe9ddfc21"
@@ -4718,7 +5119,7 @@ async-limiter@~1.0.0:
   resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.1.tgz#dd379e94f0db8310b08291f9d64c3209766617fd"
   integrity sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ==
 
-async@^2.0.0, async@^2.6.2, async@^2.6.3:
+async@^2.6.2, async@^2.6.3:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
   integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
@@ -4793,15 +5194,15 @@ babel-core@^7.0.0-bridge.0:
   resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
   integrity sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==
 
-babel-eslint@10.0.3:
-  version "10.0.3"
-  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.0.3.tgz#81a2c669be0f205e19462fed2482d33e4687a88a"
-  integrity sha512-z3U7eMY6r/3f3/JB9mTsLjyxrv0Yb1zb8PCWCLpguxfCzBIZUwy23R1t/XKewP+8mEN2Ck8Dtr4q20z6ce6SoA==
+babel-eslint@10.1.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
+  integrity sha512-ifWaTHQ0ce+448CYop8AdrQiBsGrnC+bMgfyKFdi6EsPLTAWG+QfyDeM6OH+FmWnKvEq5NnBMLvlBUPKQZoDSg==
   dependencies:
     "@babel/code-frame" "^7.0.0"
-    "@babel/parser" "^7.0.0"
-    "@babel/traverse" "^7.0.0"
-    "@babel/types" "^7.0.0"
+    "@babel/parser" "^7.7.0"
+    "@babel/traverse" "^7.7.0"
+    "@babel/types" "^7.7.0"
     eslint-visitor-keys "^1.0.0"
     resolve "^1.12.0"
 
@@ -4873,15 +5274,16 @@ babel-jest@^24.9.0:
     chalk "^2.4.2"
     slash "^2.0.0"
 
-babel-loader@8.0.6:
-  version "8.0.6"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.0.6.tgz#e33bdb6f362b03f4bb141a0c21ab87c501b70dfb"
-  integrity sha512-4BmWKtBOBm13uoUwd08UwjZlaw3O9GWf456R9j+5YykFZ6LUIjIKLc0zEZf+hauxPOJs96C8k6FvYD09vWzhYw==
+babel-loader@8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.1.0.tgz#c611d5112bd5209abe8b9fa84c3e4da25275f1c3"
+  integrity sha512-7q7nC1tYOrqvUrN3LQK4GwSk/TQorZSOlO9C+RZDZpODgyN4ZlCqE5q9cDsyWOliN+aU9B4JX01xK9eJXowJLw==
   dependencies:
-    find-cache-dir "^2.0.0"
-    loader-utils "^1.0.2"
-    mkdirp "^0.5.1"
+    find-cache-dir "^2.1.0"
+    loader-utils "^1.4.0"
+    mkdirp "^0.5.3"
     pify "^4.0.1"
+    schema-utils "^2.6.5"
 
 babel-plugin-add-react-displayname@^0.0.5:
   version "0.0.5"
@@ -5203,22 +5605,24 @@ babel-preset-jest@^25.1.0:
     babel-plugin-transform-undefined-to-void "^6.9.4"
     lodash "^4.17.11"
 
-babel-preset-react-app@^9.1.1:
-  version "9.1.1"
-  resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-9.1.1.tgz#d1ceb47cbe48b285fdd5c562c54c432ed5a41e0e"
-  integrity sha512-YkWP2UwY//TLltNlEBRngDOrYhvSLb+CA330G7T9M5UhGEMWe+JK/8IXJc5p2fDTSfSiETf+PY0+PYXFMix81Q==
+babel-preset-react-app@^9.1.2:
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/babel-preset-react-app/-/babel-preset-react-app-9.1.2.tgz#54775d976588a8a6d1a99201a702befecaf48030"
+  integrity sha512-k58RtQOKH21NyKtzptoAvtAODuAJJs3ZhqBMl456/GnXEQ/0La92pNmwgWoMn5pBTrsvk3YYXdY7zpY4e3UIxA==
   dependencies:
-    "@babel/core" "7.8.4"
+    "@babel/core" "7.9.0"
     "@babel/plugin-proposal-class-properties" "7.8.3"
     "@babel/plugin-proposal-decorators" "7.8.3"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "7.8.3"
     "@babel/plugin-proposal-numeric-separator" "7.8.3"
-    "@babel/plugin-transform-flow-strip-types" "7.8.3"
+    "@babel/plugin-proposal-optional-chaining" "7.9.0"
+    "@babel/plugin-transform-flow-strip-types" "7.9.0"
     "@babel/plugin-transform-react-display-name" "7.8.3"
-    "@babel/plugin-transform-runtime" "7.8.3"
-    "@babel/preset-env" "7.8.4"
-    "@babel/preset-react" "7.8.3"
-    "@babel/preset-typescript" "7.8.3"
-    "@babel/runtime" "7.8.4"
+    "@babel/plugin-transform-runtime" "7.9.0"
+    "@babel/preset-env" "7.9.0"
+    "@babel/preset-react" "7.9.1"
+    "@babel/preset-typescript" "7.9.0"
+    "@babel/runtime" "7.9.0"
     babel-plugin-macros "2.8.0"
     babel-plugin-transform-react-remove-prop-types "0.4.24"
 
@@ -5319,14 +5723,6 @@ bindings@^1.5.0:
   dependencies:
     file-uri-to-path "1.0.0"
 
-bl@^1.0.0:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/bl/-/bl-1.2.2.tgz#a160911717103c07410cef63ef51b397c025af9c"
-  integrity sha512-e8tQYnZodmebYDWGH7KMRvtzKXaJHx3BbilrgZCfvyLUYdKpK1t5PSPmpkny/SgiTSCnjfLW7v5rlONXVFkQEA==
-  dependencies:
-    readable-stream "^2.3.5"
-    safe-buffer "^5.1.1"
-
 bl@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/bl/-/bl-4.0.1.tgz#8c9b4fb754e80cc86463077722be7b88b4af3f42"
@@ -5551,6 +5947,16 @@ browserify-zlib@^0.2.0:
   dependencies:
     pako "~1.0.5"
 
+browserslist@4.10.0:
+  version "4.10.0"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.10.0.tgz#f179737913eaf0d2b98e4926ac1ca6a15cbcc6a9"
+  integrity sha512-TpfK0TDgv71dzuTsEAlQiHeWQ/tiPqgNZVdv046fvNtBZrjbv2O3TsWCDU0AWGJJKCF/KsjNdLzR9hXOsh/CfA==
+  dependencies:
+    caniuse-lite "^1.0.30001035"
+    electron-to-chromium "^1.3.378"
+    node-releases "^1.1.52"
+    pkg-up "^3.1.0"
+
 browserslist@4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.7.0.tgz#9ee89225ffc07db03409f2fee524dc8227458a17"
@@ -5560,7 +5966,7 @@ browserslist@4.7.0:
     electron-to-chromium "^1.3.247"
     node-releases "^1.1.29"
 
-browserslist@4.8.6, browserslist@^4.0.0, browserslist@^4.6.2, browserslist@^4.6.4, browserslist@^4.8.3, browserslist@^4.8.5:
+browserslist@^4.0.0, browserslist@^4.6.2, browserslist@^4.6.4, browserslist@^4.8.3, browserslist@^4.8.5:
   version "4.8.6"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.8.6.tgz#96406f3f5f0755d272e27a66f4163ca821590a7e"
   integrity sha512-ZHao85gf0eZ0ESxLfCp73GG9O/VTytYDIkIiZDlURppLTI9wErSM/5yAKEq6rcUdxBLjMELmrYUJGg5sxGKMHg==
@@ -5569,6 +5975,16 @@ browserslist@4.8.6, browserslist@^4.0.0, browserslist@^4.6.2, browserslist@^4.6.
     electron-to-chromium "^1.3.341"
     node-releases "^1.1.47"
 
+browserslist@^4.9.1:
+  version "4.11.1"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.11.1.tgz#92f855ee88d6e050e7e7311d987992014f1a1f1b"
+  integrity sha512-DCTr3kDrKEYNw6Jb9HFxVLQNaue8z+0ZfRBRjmCunKDEXEBajKDj2Y+Uelg+Pi29OnvaSGwjOsnRyNEkXzHg5g==
+  dependencies:
+    caniuse-lite "^1.0.30001038"
+    electron-to-chromium "^1.3.390"
+    node-releases "^1.1.53"
+    pkg-up "^2.0.0"
+
 bs-logger@0.x:
   version "0.2.6"
   resolved "https://registry.yarnpkg.com/bs-logger/-/bs-logger-0.2.6.tgz#eb7d365307a72cf974cc6cda76b68354ad336bd8"
@@ -5588,29 +6004,11 @@ btoa-lite@^1.0.0:
   resolved "https://registry.yarnpkg.com/btoa-lite/-/btoa-lite-1.0.0.tgz#337766da15801210fdd956c22e9c6891ab9d0337"
   integrity sha1-M3dm2hWAEhD92VbCLpxokaudAzc=
 
-buffer-alloc-unsafe@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0"
-  integrity sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==
-
-buffer-alloc@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/buffer-alloc/-/buffer-alloc-1.2.0.tgz#890dd90d923a873e08e10e5fd51a57e5b7cce0ec"
-  integrity sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==
-  dependencies:
-    buffer-alloc-unsafe "^1.1.0"
-    buffer-fill "^1.0.0"
-
 buffer-crc32@^0.2.1, buffer-crc32@^0.2.13:
   version "0.2.13"
   resolved "https://registry.yarnpkg.com/buffer-crc32/-/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
   integrity sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=
 
-buffer-fill@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/buffer-fill/-/buffer-fill-1.0.0.tgz#f8f78b76789888ef39f205cd637f68e702122b2c"
-  integrity sha1-+PeLdniYiO858gXNY39o5wISKyw=
-
 buffer-from@1.x, buffer-from@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
@@ -5947,6 +6345,11 @@ caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000981, caniuse-lite@^1.0.30000989, can
   resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001025.tgz#30336a8aca7f98618eb3cf38e35184e13d4e5fe6"
   integrity sha512-SKyFdHYfXUZf5V85+PJgLYyit27q4wgvZuf8QTOk1osbypcROihMBlx9GRar2/pIcKH2r4OehdlBr9x6PXetAQ==
 
+caniuse-lite@^1.0.30001035, caniuse-lite@^1.0.30001038:
+  version "1.0.30001039"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001039.tgz#b3814a1c38ffeb23567f8323500c09526a577bbe"
+  integrity sha512-SezbWCTT34eyFoWHgx8UWso7YtvtM7oosmFoXbCkdC6qJzRfBTeTgE9REtKtiuKXuMwWTZEvdnFNGAyVMorv8Q==
+
 canvg@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/canvg/-/canvg-2.0.0.tgz#9ff77bf8837106e358a12fb3d2bf11aeb60e5b46"
@@ -6025,11 +6428,6 @@ character-reference-invalid@^1.0.0:
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
   integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg==
 
-chardet@^0.4.0:
-  version "0.4.2"
-  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
-  integrity sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=
-
 chardet@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
@@ -6424,16 +6822,6 @@ compose-function@3.0.3:
   dependencies:
     arity-n "^1.0.4"
 
-compress-commons@^1.2.0:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/compress-commons/-/compress-commons-1.2.2.tgz#524a9f10903f3a813389b0225d27c48bb751890f"
-  integrity sha1-UkqfEJA/OoEzibAiXSfEi7dRiQ8=
-  dependencies:
-    buffer-crc32 "^0.2.1"
-    crc32-stream "^2.0.0"
-    normalize-path "^2.0.0"
-    readable-stream "^2.0.0"
-
 compress-commons@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/compress-commons/-/compress-commons-2.1.1.tgz#9410d9a534cf8435e3fbbb7c6ce48de2dc2f0610"
@@ -6776,14 +7164,6 @@ cosmiconfig@^6.0.0:
     path-type "^4.0.0"
     yaml "^1.7.2"
 
-crc32-stream@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/crc32-stream/-/crc32-stream-2.0.0.tgz#e3cdd3b4df3168dd74e3de3fbbcb7b297fe908f4"
-  integrity sha1-483TtN8xaN10494/u8t7KX/pCPQ=
-  dependencies:
-    crc "^3.4.4"
-    readable-stream "^2.0.0"
-
 crc32-stream@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/crc32-stream/-/crc32-stream-3.0.1.tgz#cae6eeed003b0e44d739d279de5ae63b171b4e85"
@@ -6972,13 +7352,6 @@ css-loader@3.4.2, css-loader@^3.0.0:
     postcss-value-parser "^4.0.2"
     schema-utils "^2.6.0"
 
-css-parse@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/css-parse/-/css-parse-2.0.0.tgz#a468ee667c16d81ccf05c58c38d2a97c780dbfd4"
-  integrity sha1-pGjuZnwW2BzPBcWMONKpfHgNv9Q=
-  dependencies:
-    css "^2.0.0"
-
 css-prefers-color-scheme@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz#6f830a2714199d4f0d0d0bb8a27916ed65cff1f4"
@@ -7033,11 +7406,6 @@ css-unit-converter@^1.1.1:
   resolved "https://registry.yarnpkg.com/css-unit-converter/-/css-unit-converter-1.1.1.tgz#d9b9281adcfd8ced935bdbaba83786897f64e996"
   integrity sha1-2bkoGtz9jO2TW9urqDeGiX9k6ZY=
 
-css-value@~0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/css-value/-/css-value-0.0.1.tgz#5efd6c2eea5ea1fd6b6ac57ec0427b18452424ea"
-  integrity sha1-Xv1sLupeof1rasV+wEJ7GEUkJOo=
-
 css-what@2.1:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
@@ -7228,7 +7596,7 @@ dateformat@^3.0.0:
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
   integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
 
-debug@2.6.9, debug@^2.1.3, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
+debug@2.6.9, debug@^2.2.0, debug@^2.3.3, debug@^2.6.0, debug@^2.6.9:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
   integrity sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==
@@ -7325,11 +7693,6 @@ deep-object-diff@^1.1.0:
   resolved "https://registry.yarnpkg.com/deep-object-diff/-/deep-object-diff-1.1.0.tgz#d6fabf476c2ed1751fc94d5ca693d2ed8c18bc5a"
   integrity sha512-b+QLs5vHgS+IoSNcUE4n9HP2NwcHj7aqnJWsjPtuG75Rh5TOaGt0OjAYInh77d5T16V5cRDC+Pw/6ZZZiETBGw==
 
-deepmerge@~2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.0.1.tgz#25c1c24f110fb914f80001b925264dd77f3f4312"
-  integrity sha512-VIPwiMJqJ13ZQfaCsIFnp5Me9tnjURiaIFxfz7EH0Ci0dTSQpZtSLrqOicXqEd/z2r+z+Klk9GzmnRsgpgbOsQ==
-
 default-gateway@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-4.2.0.tgz#167104c7500c2115f6dd69b0a536bb8ed720552b"
@@ -7500,11 +7863,6 @@ detect-port@^1.3.0:
     address "^1.0.1"
     debug "^2.6.0"
 
-dev-null@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/dev-null/-/dev-null-0.1.1.tgz#5a205ce3c2b2ef77b6238d6ba179eb74c6a0e818"
-  integrity sha1-WiBc48Ky73e2I41roXnrdMag6Bg=
-
 devtron@1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/devtron/-/devtron-1.4.0.tgz#b5e748bd6e95bbe70bfcc68aae6fe696119441e1"
@@ -7807,11 +8165,6 @@ ejs@^3.0.1:
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.0.1.tgz#30c8f6ee9948502cc32e85c37a3f8b39b5a614a5"
   integrity sha512-cuIMtJwxvzumSAkqaaoGY/L6Fc/t6YvoP9/VIaK0V/CyqKLEQ8sqODmYfy/cjXEdZ9+OOL8TecbJu+1RsofGDw==
 
-ejs@~2.5.6:
-  version "2.5.9"
-  resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.5.9.tgz#7ba254582a560d267437109a68354112475b0ce5"
-  integrity sha512-GJCAeDBKfREgkBtgrYSf9hQy9kTb3helv0zGdzqhM7iAkW8FA/ZF97VQDbwFiwIT8MQLLOe5VlPZOEvZAqtUAQ==
-
 electron-builder@22.4.0:
   version "22.4.0"
   resolved "https://registry.yarnpkg.com/electron-builder/-/electron-builder-22.4.0.tgz#c2eedd0eb982e7421b96693252525cc15ba9e6e4"
@@ -7832,14 +8185,6 @@ electron-builder@22.4.0:
     update-notifier "^4.1.0"
     yargs "^15.1.0"
 
-electron-chromedriver@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/electron-chromedriver/-/electron-chromedriver-7.0.0.tgz#204e1bfcdf2dfd56e5a3b8e6f37d19b1433a7937"
-  integrity sha512-7qymT0fn3VTit0peym1iz4Y+fTwq9EPsv1V9Qh+vQdoVqP/4SM9lOHrsBeuFN1JJADZLu7R119ZvMkP6EnLYhw==
-  dependencies:
-    electron-download "^4.1.1"
-    extract-zip "^1.6.7"
-
 electron-devtools-installer@2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/electron-devtools-installer/-/electron-devtools-installer-2.2.4.tgz#261a50337e37121d338b966f07922eb4939a8763"
@@ -7850,21 +8195,6 @@ electron-devtools-installer@2.2.4:
     rimraf "^2.5.2"
     semver "^5.3.0"
 
-electron-download@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/electron-download/-/electron-download-4.1.1.tgz#02e69556705cc456e520f9e035556ed5a015ebe8"
-  integrity sha512-FjEWG9Jb/ppK/2zToP+U5dds114fM1ZOJqMAR4aXXL5CvyPE9fiqBK/9YcwC9poIFQTEJk/EM/zyRwziziRZrg==
-  dependencies:
-    debug "^3.0.0"
-    env-paths "^1.0.0"
-    fs-extra "^4.0.1"
-    minimist "^1.2.0"
-    nugget "^2.0.1"
-    path-exists "^3.0.0"
-    rc "^1.2.1"
-    semver "^5.4.1"
-    sumchecker "^2.0.2"
-
 electron-log@4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/electron-log/-/electron-log-4.0.0.tgz#9315e4a5e6be5e2a158909856b2d2cb4d760cd6d"
@@ -7911,6 +8241,11 @@ electron-to-chromium@^1.3.247, electron-to-chromium@^1.3.341:
   resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.345.tgz#2569d0d54a64ef0f32a4b7e8c80afa5fe57c5d98"
   integrity sha512-f8nx53+Z9Y+SPWGg3YdHrbYYfIJAtbUjpFfW4X1RwTZ94iUG7geg9tV8HqzAXX7XTNgyWgAFvce4yce8ZKxKmg==
 
+electron-to-chromium@^1.3.378, electron-to-chromium@^1.3.390:
+  version "1.3.398"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.398.tgz#4c01e29091bf39e578ac3f66c1f157d92fa5725d"
+  integrity sha512-BJjxuWLKFbM5axH3vES7HKMQgAknq9PZHBkMK/rEXUQG9i1Iw5R+6hGkm6GtsQSANjSUrh/a6m32nzCNDNo/+w==
+
 electron-updater@4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/electron-updater/-/electron-updater-4.2.0.tgz#f9ecfc657f65ead737d42b9efecf628d3756b550"
@@ -7995,6 +8330,11 @@ emojis-list@^2.0.0:
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
   integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
 
+emojis-list@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
+  integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
+
 emotion-theming@^10.0.19:
   version "10.0.27"
   resolved "https://registry.yarnpkg.com/emotion-theming/-/emotion-theming-10.0.27.tgz#1887baaec15199862c89b1b984b79806f2b9ab10"
@@ -8052,11 +8392,6 @@ entities@^2.0.0:
   resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.0.tgz#68d6084cab1b079767540d80e56a39b423e4abf4"
   integrity sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw==
 
-env-paths@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-1.0.0.tgz#4168133b42bb05c38a35b1ae4397c8298ab369e0"
-  integrity sha1-QWgTO0K7BcOKNbGuQ5fIKYqzaeA=
-
 env-paths@^2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-2.2.0.tgz#cdca557dc009152917d6166e2febe1f039685e43"
@@ -8303,10 +8638,10 @@ eslint-config-prettier@6.7.0:
   dependencies:
     get-stdin "^6.0.0"
 
-eslint-config-react-app@^5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-5.2.0.tgz#135110ba56a9e378f7acfe5f36e2ae76a2317899"
-  integrity sha512-WrHjoGpKr1kLLiWDD81tme9jMM0hk5cMxasLSdyno6DdPt+IfLOrDJBVo6jN7tn4y1nzhs43TmUaZWO6Sf0blw==
+eslint-config-react-app@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/eslint-config-react-app/-/eslint-config-react-app-5.2.1.tgz#698bf7aeee27f0cea0139eaef261c7bf7dd623df"
+  integrity sha512-pGIZ8t0mFLcV+6ZirRgYK6RVqUIKRIi9MmgzUEmrIknsn3AdO0I32asO86dJgloHq+9ZPl8UIg8mYrvgP5u2wQ==
   dependencies:
     confusing-browser-globals "^1.0.9"
 
@@ -8366,10 +8701,10 @@ eslint-plugin-import@2.18.2:
     read-pkg-up "^2.0.0"
     resolve "^1.11.0"
 
-eslint-plugin-import@2.20.0:
-  version "2.20.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.20.0.tgz#d749a7263fb6c29980def8e960d380a6aa6aecaa"
-  integrity sha512-NK42oA0mUc8Ngn4kONOPsPB1XhbUvNHqF+g307dPV28aknPoiNnKLFd9em4nkswwepdF5ouieqv5Th/63U7YJQ==
+eslint-plugin-import@2.20.1:
+  version "2.20.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-import/-/eslint-plugin-import-2.20.1.tgz#802423196dcb11d9ce8435a5fc02a6d3b46939b3"
+  integrity sha512-qQHgFOTjguR+LnYRoToeZWT62XM55MBVXObHM6SKFd1VzDcX/vqT1kAz8ssqigh5eMj8qXcRoXXGZpPP6RfdCw==
   dependencies:
     array-includes "^3.0.3"
     array.prototype.flat "^1.2.1"
@@ -8427,10 +8762,10 @@ eslint-plugin-react@7.17.0:
     prop-types "^15.7.2"
     resolve "^1.13.1"
 
-eslint-plugin-react@7.18.0:
-  version "7.18.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.18.0.tgz#2317831284d005b30aff8afb7c4e906f13fa8e7e"
-  integrity sha512-p+PGoGeV4SaZRDsXqdj9OWcOrOpZn8gXoGPcIQTzo2IDMbAKhNDnME9myZWqO3Ic4R3YmwAZ1lDjWl2R2hMUVQ==
+eslint-plugin-react@7.19.0:
+  version "7.19.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.19.0.tgz#6d08f9673628aa69c5559d33489e855d83551666"
+  integrity sha512-SPT8j72CGuAP+JFbT0sJHOB80TX/pu44gQ4vXH/cq+hQTiY2PuZ6IHkqXJV6x1b28GDdo1lbInjKUrrdUf0LOQ==
   dependencies:
     array-includes "^3.1.1"
     doctrine "^2.1.0"
@@ -8440,7 +8775,10 @@ eslint-plugin-react@7.18.0:
     object.fromentries "^2.0.2"
     object.values "^1.1.1"
     prop-types "^15.7.2"
-    resolve "^1.14.2"
+    resolve "^1.15.1"
+    semver "^6.3.0"
+    string.prototype.matchall "^4.0.2"
+    xregexp "^4.3.0"
 
 eslint-scope@^4.0.3:
   version "4.0.3"
@@ -8773,15 +9111,6 @@ extend@^3.0.0, extend@~3.0.2:
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
 
-external-editor@^2.0.4:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-2.2.0.tgz#045511cfd8d133f3846673d1047c154e214ad3d5"
-  integrity sha512-bSn6gvGxKt+b7+6TKEv1ZycHleA7aHhRHyAqJyp5pbUFuYYNIzpZnQDk7AsYckyWdEnTeAnay0aCy2aV6iTk9A==
-  dependencies:
-    chardet "^0.4.0"
-    iconv-lite "^0.4.17"
-    tmp "^0.0.33"
-
 external-editor@^3.0.3:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495"
@@ -8805,7 +9134,7 @@ extglob@^2.0.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-extract-zip@^1.0.3, extract-zip@^1.6.7:
+extract-zip@^1.0.3:
   version "1.6.7"
   resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-1.6.7.tgz#a840b4b8af6403264c8db57f4f1a74333ef81fe9"
   integrity sha1-qEC0uK9kAyZMjbV/Txp0Mz74H+k=
@@ -9251,7 +9580,7 @@ fs-extra@^0.30.0:
     path-is-absolute "^1.0.0"
     rimraf "^2.2.8"
 
-fs-extra@^4.0.1, fs-extra@^4.0.2:
+fs-extra@^4.0.2:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
   integrity sha512-q6rbdDd1o2mAnQreO7YADIxf/Whx4AHBiRf6d+/cVT8h44ss+lHgxf1FemcqDnQt9X3ct4McHr+JMGlYSsK7Cg==
@@ -9382,7 +9711,7 @@ gauge@~2.7.3:
     strip-ansi "^3.0.1"
     wide-align "^1.1.0"
 
-gaze@^1.0.0, gaze@~1.1.2:
+gaze@^1.0.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/gaze/-/gaze-1.1.3.tgz#c441733e13b927ac8c0ff0b4c3b033f28812924a"
   integrity sha512-BRdNm8hbWzFzWHERTrejLqwHDfS4GibPoq5wjTPIoJHoBtKGPg3xAFfxmM+9ztbXelxcf2hwQcaz1PtmFeue8g==
@@ -9783,16 +10112,11 @@ got@^9.6.0:
     to-readable-stream "^1.0.0"
     url-parse-lax "^3.0.0"
 
-graceful-fs@^4.1.0, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@^4.2.0, graceful-fs@^4.2.2, graceful-fs@^4.2.3:
+graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@^4.2.0, graceful-fs@^4.2.2, graceful-fs@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
   integrity sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==
 
-grapheme-splitter@^1.0.2:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
-  integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
-
 grommet-icons@4.4.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/grommet-icons/-/grommet-icons-4.4.0.tgz#6503a33ca29e3c9d89ba56ef1b2bc786222e62a7"
@@ -10306,7 +10630,7 @@ i18next@17.0.13:
   dependencies:
     "@babel/runtime" "^7.3.1"
 
-iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
+iconv-lite@0.4.24, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -10560,26 +10884,6 @@ inquirer@^6.2.0:
     strip-ansi "^5.1.0"
     through "^2.3.6"
 
-inquirer@~3.3.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-3.3.0.tgz#9dd2f2ad765dcab1ff0443b491442a20ba227dc9"
-  integrity sha512-h+xtnyk4EwKvFWHrUYsWErEVR+igKtLdchu+o0Z1RL7VU/jVMFbYir2bp6bAj8efFNxWqHX0dIss6fJQ+/+qeQ==
-  dependencies:
-    ansi-escapes "^3.0.0"
-    chalk "^2.0.0"
-    cli-cursor "^2.1.0"
-    cli-width "^2.0.0"
-    external-editor "^2.0.4"
-    figures "^2.0.0"
-    lodash "^4.3.0"
-    mute-stream "0.0.7"
-    run-async "^2.2.0"
-    rx-lite "^4.0.8"
-    rx-lite-aggregates "^4.0.8"
-    string-width "^2.1.0"
-    strip-ansi "^4.0.0"
-    through "^2.3.6"
-
 internal-ip@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-4.3.0.tgz#845452baad9d2ca3b69c635a137acb9a0dad0907"
@@ -11971,6 +12275,13 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
+json5@^2.1.2:
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.3.tgz#c9b0f7fa9233bfe5807fe66fcf3a5617ed597d43"
+  integrity sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==
+  dependencies:
+    minimist "^1.2.5"
+
 jsonfile@^2.1.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-2.4.0.tgz#3736a2b428b87bbda0cc83b53fa3d633a35c2ae8"
@@ -12493,7 +12804,7 @@ loader-runner@^2.4.0:
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
   integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
 
-loader-utils@1.2.3, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.3:
+loader-utils@1.2.3, loader-utils@^1.1.0, loader-utils@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
   integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==
@@ -12502,6 +12813,15 @@ loader-utils@1.2.3, loader-utils@^1.0.2, loader-utils@^1.1.0, loader-utils@^1.2.
     emojis-list "^2.0.0"
     json5 "^1.0.1"
 
+loader-utils@^1.4.0:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
+  integrity sha512-qH0WSMBtn/oHuwjy/NucEgbx5dbxxnxup9s4PVXJUDHZBQY+s0NWA9rJf53RBnQZxfch7euUui7hpoAPvALZdA==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^1.0.1"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-2.0.0.tgz#2b568b265eec944c6d9c0de9c3dbbbca0354cd8e"
@@ -12639,7 +12959,7 @@ lodash.uniq@4.5.0, lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.0.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.5, lodash@^4.2.1, lodash@^4.3.0, lodash@^4.8.0, lodash@~4.17.10:
+"lodash@>=3.5 <5", lodash@^4.0.0, lodash@^4.0.1, lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.5, lodash@^4.2.1, lodash@~4.17.10:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
@@ -12959,7 +13279,7 @@ memory-fs@^0.5.0:
     errno "^0.1.3"
     readable-stream "^2.0.1"
 
-meow@^3.1.0, meow@^3.3.0, meow@^3.7.0:
+meow@^3.3.0, meow@^3.7.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
   integrity sha1-cstmi0JSKCkKu/qFaJJYcwioAfs=
@@ -13189,11 +13509,16 @@ minimist@0.0.8:
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
   integrity sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=
 
-minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
+minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
   integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
 
+minimist@^1.2.5:
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
+  integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
+
 minimist@~0.0.1:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
@@ -13293,6 +13618,13 @@ mkdirp@0.5.1, mkdirp@0.x, "mkdirp@>=0.5 0", mkdirp@^0.5.0, mkdirp@^0.5.1, mkdirp
   dependencies:
     minimist "0.0.8"
 
+mkdirp@^0.5.3:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/mkdirp/-/mkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
+  integrity sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==
+  dependencies:
+    minimist "^1.2.5"
+
 modify-values@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/modify-values/-/modify-values-1.0.1.tgz#b3939fa605546474e3e3e3c63d64bd43b4ee6022"
@@ -13617,6 +13949,11 @@ node-releases@^1.1.29, node-releases@^1.1.47:
   dependencies:
     semver "^6.3.0"
 
+node-releases@^1.1.52, node-releases@^1.1.53:
+  version "1.1.53"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.53.tgz#2d821bfa499ed7c5dffc5e2f28c88e78a08ee3f4"
+  integrity sha512-wp8zyQVwef2hpZ/dJH7SfSrIPD6YoJz6BDQDpGEkcA0s3LpAQoxBIYmfIq6QAhC1DhwsyCgTaTTcONwX8qzCuQ==
+
 node-sass@4.13.0:
   version "4.13.0"
   resolved "https://registry.yarnpkg.com/node-sass/-/node-sass-4.13.0.tgz#b647288babdd6a1cb726de4545516b31f90da066"
@@ -13665,7 +14002,7 @@ normalize-package-data@^2.0.0, normalize-package-data@^2.3.0, normalize-package-
     semver "2 || 3 || 4 || 5"
     validate-npm-package-license "^3.0.1"
 
-normalize-path@^2.0.0, normalize-path@^2.1.1:
+normalize-path@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/normalize-path/-/normalize-path-2.1.1.tgz#1ab28b556e198363a8c1a6f7e6fa20137fe6aed9"
   integrity sha1-GrKLVW4Zg2Oowab35vogE3/mrtk=
@@ -13717,11 +14054,6 @@ npm-conf@^1.1.3:
     config-chain "^1.1.11"
     pify "^3.0.0"
 
-npm-install-package@~2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/npm-install-package/-/npm-install-package-2.1.0.tgz#d7efe3cfcd7ab00614b896ea53119dc9ab259125"
-  integrity sha1-1+/jz816sAYUuJbqUxGdyaslkSU=
-
 npm-lifecycle@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/npm-lifecycle/-/npm-lifecycle-2.1.1.tgz#0027c09646f0fd346c5c93377bdaba59c6748fdf"
@@ -13853,19 +14185,6 @@ nth-check@^1.0.2, nth-check@~1.0.1:
   dependencies:
     boolbase "~1.0.0"
 
-nugget@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/nugget/-/nugget-2.0.1.tgz#201095a487e1ad36081b3432fa3cada4f8d071b0"
-  integrity sha1-IBCVpIfhrTYIGzQy+jytpPjQcbA=
-  dependencies:
-    debug "^2.1.3"
-    minimist "^1.1.0"
-    pretty-bytes "^1.0.2"
-    progress-stream "^1.1.0"
-    request "^2.45.0"
-    single-line-log "^1.1.2"
-    throttleit "0.0.2"
-
 num2fraction@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/num2fraction/-/num2fraction-1.2.2.tgz#6f682b6a027a4e9ddfa4564cd2589d1d4e669ede"
@@ -13920,11 +14239,6 @@ object-keys@^1.0.11, object-keys@^1.0.12, object-keys@^1.1.1:
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
-object-keys@~0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-0.4.0.tgz#28a6aae7428dd2c3a92f3d95f21335dd204e0336"
-  integrity sha1-KKaq50KN0sOpLz2V8hM13SBOAzY=
-
 object-path@0.11.4:
   version "0.11.4"
   resolved "https://registry.yarnpkg.com/object-path/-/object-path-0.11.4.tgz#370ae752fbf37de3ea70a861c23bba8915691949"
@@ -14067,7 +14381,7 @@ onetime@^5.1.0:
   dependencies:
     mimic-fn "^2.1.0"
 
-open@^6.3.0, open@^6.4.0:
+open@^6.3.0:
   version "6.4.0"
   resolved "https://registry.yarnpkg.com/open/-/open-6.4.0.tgz#5c13e96d0dc894686164f18965ecfe889ecfc8a9"
   integrity sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==
@@ -14082,6 +14396,14 @@ open@^7.0.0:
     is-docker "^2.0.0"
     is-wsl "^2.1.1"
 
+open@^7.0.2:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/open/-/open-7.0.3.tgz#db551a1af9c7ab4c7af664139930826138531c48"
+  integrity sha512-sP2ru2v0P290WFfv49Ap8MF6PkzGNnGlAwHweB4WR4mr5d2d0woiCluUeJ218w7/+PmoBy9JmYgD5A4mLcWOFA==
+  dependencies:
+    is-docker "^2.0.0"
+    is-wsl "^2.1.1"
+
 opencollective-postinstall@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.2.tgz#5657f1bede69b6e33a45939b061eb53d3c6c3a89"
@@ -14094,7 +14416,7 @@ opn@^5.5.0:
   dependencies:
     is-wsl "^1.1.0"
 
-optimist@^0.6.1, optimist@~0.6.1:
+optimist@^0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
   integrity sha1-2j6nRob6IaGaERwybpDrFaAZZoY=
@@ -14707,14 +15029,14 @@ pkg-dir@^4.1.0, pkg-dir@^4.2.0:
   dependencies:
     find-up "^4.0.0"
 
-pkg-up@2.0.0:
+pkg-up@2.0.0, pkg-up@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-2.0.0.tgz#c819ac728059a461cab1c3889a2be3c49a004d7f"
   integrity sha1-yBmscoBZpGHKscOImivjxJoATX8=
   dependencies:
     find-up "^2.1.0"
 
-pkg-up@3.1.0:
+pkg-up@3.1.0, pkg-up@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/pkg-up/-/pkg-up-3.1.0.tgz#100ec235cc150e4fd42519412596a28512a0def5"
   integrity sha512-nDywThFk1i4BQK4twPQ6TA4RT8bDY96yeuCVBWL3ePARCiEKDRSrNGbFIgUJpLp+XeIR65v8ra7WuJOFUBtkMA==
@@ -14740,12 +15062,12 @@ pnp-webpack-plugin@1.5.0:
   dependencies:
     ts-pnp "^1.1.2"
 
-pnp-webpack-plugin@1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.0.tgz#d5c068013a2fdc82224ca50ed179c8fba9036a8e"
-  integrity sha512-ZcMGn/xF/fCOq+9kWMP9vVVxjIkMCja72oy3lziR7UHy0hHFZ57iVpQ71OtveVbmzeCmphBg8pxNdk/hlK99aQ==
+pnp-webpack-plugin@1.6.4:
+  version "1.6.4"
+  resolved "https://registry.yarnpkg.com/pnp-webpack-plugin/-/pnp-webpack-plugin-1.6.4.tgz#c9711ac4dc48a685dabafc86f8b6dd9f8df84149"
+  integrity sha512-7Wjy+9E3WwLOEL30D+m8TSTF7qJJUJLONBnwQp0518siuMxUQUbgZwssaFX+QKlZkjHZcw/IpZCt/H0srrntSg==
   dependencies:
-    ts-pnp "^1.1.2"
+    ts-pnp "^1.1.6"
 
 polished@^3.3.1:
   version "3.4.4"
@@ -15469,14 +15791,6 @@ prettier@1.19.1, prettier@^1.16.4:
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
   integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
 
-pretty-bytes@^1.0.2:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-1.0.4.tgz#0a22e8210609ad35542f8c8d5d2159aff0751c84"
-  integrity sha1-CiLoIQYJrTVUL4yNXSFZr/B1HIQ=
-  dependencies:
-    get-stdin "^4.0.1"
-    meow "^3.1.0"
-
 pretty-bytes@^5.1.0:
   version "5.3.0"
   resolved "https://registry.yarnpkg.com/pretty-bytes/-/pretty-bytes-5.3.0.tgz#f2849e27db79fb4d6cfe24764fc4134f165989f2"
@@ -15554,14 +15868,6 @@ process@^0.11.10:
   resolved "https://registry.yarnpkg.com/process/-/process-0.11.10.tgz#7332300e840161bda3e69a1d1d91a7d4bc16f182"
   integrity sha1-czIwDoQBYb2j5podHZGn1LwW8YI=
 
-progress-stream@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/progress-stream/-/progress-stream-1.2.0.tgz#2cd3cfea33ba3a89c9c121ec3347abe9ab125f77"
-  integrity sha1-LNPP6jO6OonJwSHsM0er6asSX3c=
-  dependencies:
-    speedometer "~0.1.2"
-    through2 "~0.2.3"
-
 progress@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/progress/-/progress-2.0.3.tgz#7e8cf8d8f5b8f239c1bc68beb4eb78567d572ef8"
@@ -15746,7 +16052,7 @@ pupa@^2.0.1:
   dependencies:
     escape-goat "^2.0.0"
 
-q@^1.1.2, q@^1.5.1, q@~1.5.0:
+q@^1.1.2, q@^1.5.1:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
@@ -15862,7 +16168,7 @@ raw-loader@^3.1.0:
     loader-utils "^1.1.0"
     schema-utils "^2.0.1"
 
-rc@^1.0.1, rc@^1.1.6, rc@^1.2.1, rc@^1.2.7, rc@^1.2.8:
+rc@^1.0.1, rc@^1.1.6, rc@^1.2.7, rc@^1.2.8:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
   integrity sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==
@@ -15915,15 +16221,15 @@ react-color@^2.17.0:
     reactcss "^1.2.0"
     tinycolor2 "^1.4.1"
 
-react-dev-utils@^10.1.0:
-  version "10.1.0"
-  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-10.1.0.tgz#ccf82135f6dc2fc91969bc729ce57a69d8e86025"
-  integrity sha512-KmZChqxY6l+ed28IHetGrY8J9yZSvzlAHyFXduEIhQ42EBGtqftlbqQZ+dDTaC7CwNW2tuXN+66bRKE5h2HgrQ==
+react-dev-utils@^10.2.1:
+  version "10.2.1"
+  resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-10.2.1.tgz#f6de325ae25fa4d546d09df4bb1befdc6dd19c19"
+  integrity sha512-XxTbgJnYZmxuPtY3y/UV0D8/65NKkmaia4rXzViknVnZeVlklSh8u6TnaEYPfAi/Gh1TP4mEOXHI6jQOPbeakQ==
   dependencies:
     "@babel/code-frame" "7.8.3"
     address "1.1.2"
-    browserslist "4.8.6"
-    chalk "3.0.0"
+    browserslist "4.10.0"
+    chalk "2.4.2"
     cross-spawn "7.0.1"
     detect-port-alt "1.1.6"
     escape-string-regexp "2.0.0"
@@ -15937,9 +16243,9 @@ react-dev-utils@^10.1.0:
     inquirer "7.0.4"
     is-root "2.1.0"
     loader-utils "1.2.3"
-    open "^6.4.0"
+    open "^7.0.2"
     pkg-up "3.1.0"
-    react-error-overlay "^6.0.5"
+    react-error-overlay "^6.0.7"
     recursive-readdir "2.2.2"
     shell-quote "1.7.2"
     strip-ansi "6.0.0"
@@ -16008,11 +16314,16 @@ react-draggable@^4.0.3:
     classnames "^2.2.5"
     prop-types "^15.6.0"
 
-react-error-overlay@^6.0.3, react-error-overlay@^6.0.5:
+react-error-overlay@^6.0.3:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.5.tgz#55d59c2a3810e8b41922e0b4e5f85dcf239bd533"
   integrity sha512-+DMR2k5c6BqMDSMF8hLH0vYKtKTeikiFW+fj0LClN+XZg4N9b8QUAdHC62CGWNLTi/gnuuemNcNcTFrCvK1f+A==
 
+react-error-overlay@^6.0.7:
+  version "6.0.7"
+  resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.7.tgz#1dcfb459ab671d53f660a991513cb2f0a0553108"
+  integrity sha512-TAv1KJFh3RhqxNvhzxj6LeT5NWklP6rDr2a0jaTfsZ5wSZWHOGeqQyejUp3xxLfPt2UpyJEcVQB/zyPcmonNFA==
+
 react-fast-compare@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
@@ -16132,32 +16443,32 @@ react-router@5.1.2:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-scripts@3.3.1:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.3.1.tgz#dee7962045dbee5b02b1d47569815e62f7a546b5"
-  integrity sha512-DHvc+/QN0IsLvmnPQqd+H70ol+gdFD3p/SS2tX8M6z1ysjtRGvOwLWy72co1nphYGpq1NqV/Ti5dviU8SCAXpA==
+react-scripts@3.4.1:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-3.4.1.tgz#f551298b5c71985cc491b9acf3c8e8c0ae3ada0a"
+  integrity sha512-JpTdi/0Sfd31mZA6Ukx+lq5j1JoKItX7qqEK4OiACjVQletM1P38g49d9/D0yTxp9FrSF+xpJFStkGgKEIRjlQ==
   dependencies:
-    "@babel/core" "7.8.4"
+    "@babel/core" "7.9.0"
     "@svgr/webpack" "4.3.3"
     "@typescript-eslint/eslint-plugin" "^2.10.0"
     "@typescript-eslint/parser" "^2.10.0"
-    babel-eslint "10.0.3"
+    babel-eslint "10.1.0"
     babel-jest "^24.9.0"
-    babel-loader "8.0.6"
+    babel-loader "8.1.0"
     babel-plugin-named-asset-import "^0.3.6"
-    babel-preset-react-app "^9.1.1"
+    babel-preset-react-app "^9.1.2"
     camelcase "^5.3.1"
     case-sensitive-paths-webpack-plugin "2.3.0"
     css-loader "3.4.2"
     dotenv "8.2.0"
     dotenv-expand "5.1.0"
     eslint "^6.6.0"
-    eslint-config-react-app "^5.2.0"
+    eslint-config-react-app "^5.2.1"
     eslint-loader "3.0.3"
     eslint-plugin-flowtype "4.6.0"
-    eslint-plugin-import "2.20.0"
+    eslint-plugin-import "2.20.1"
     eslint-plugin-jsx-a11y "6.2.3"
-    eslint-plugin-react "7.18.0"
+    eslint-plugin-react "7.19.0"
     eslint-plugin-react-hooks "^1.6.1"
     file-loader "4.3.0"
     fs-extra "^8.1.0"
@@ -16169,24 +16480,24 @@ react-scripts@3.3.1:
     jest-watch-typeahead "0.4.2"
     mini-css-extract-plugin "0.9.0"
     optimize-css-assets-webpack-plugin "5.0.3"
-    pnp-webpack-plugin "1.6.0"
+    pnp-webpack-plugin "1.6.4"
     postcss-flexbugs-fixes "4.1.0"
     postcss-loader "3.0.0"
     postcss-normalize "8.0.1"
     postcss-preset-env "6.7.0"
     postcss-safe-parser "4.0.1"
     react-app-polyfill "^1.0.6"
-    react-dev-utils "^10.1.0"
+    react-dev-utils "^10.2.1"
     resolve "1.15.0"
     resolve-url-loader "3.1.1"
     sass-loader "8.0.2"
     semver "6.3.0"
-    style-loader "1.1.3"
-    terser-webpack-plugin "2.3.4"
-    ts-pnp "1.1.5"
+    style-loader "0.23.1"
+    terser-webpack-plugin "2.3.5"
+    ts-pnp "1.1.6"
     url-loader "2.3.0"
-    webpack "4.41.5"
-    webpack-dev-server "3.10.1"
+    webpack "4.42.0"
+    webpack-dev-server "3.10.3"
     webpack-manifest-plugin "2.2.0"
     workbox-webpack-plugin "4.3.1"
   optionalDependencies:
@@ -16405,7 +16716,7 @@ read@1, read@~1.0.1:
   dependencies:
     mute-stream "~0.0.4"
 
-"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.0, readable-stream@^2.3.3, readable-stream@^2.3.5, readable-stream@^2.3.6, readable-stream@~2.3.6:
+"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
   version "2.3.7"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
   integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
@@ -16427,16 +16738,6 @@ read@1, read@~1.0.1:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
-readable-stream@~1.1.9:
-  version "1.1.14"
-  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.1.14.tgz#7cf4c54ef648e3813084c636dd2079e166c081d9"
-  integrity sha1-fPTFTvZI44EwhMY23SB54WbAgdk=
-  dependencies:
-    core-util-is "~1.0.0"
-    inherits "~2.0.1"
-    isarray "0.0.1"
-    string_decoder "~0.10.x"
-
 readdir-scoped-modules@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/readdir-scoped-modules/-/readdir-scoped-modules-1.1.0.tgz#8d45407b4f870a0dcaebc0e28670d18e74514309"
@@ -16556,6 +16857,13 @@ regenerate-unicode-properties@^8.1.0:
   dependencies:
     regenerate "^1.4.0"
 
+regenerate-unicode-properties@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-8.2.0.tgz#e5de7111d655e7ba60c057dbe9ff37c87e65cdec"
+  integrity sha512-F9DjY1vKLo/tPePDycuH3dn9H1OTPIkVD9Kz4LODu+F2C75mgjAJ7x/gwy6ZcSNRAAkhNlJSOHRe8k3p+K9WhA==
+  dependencies:
+    regenerate "^1.4.0"
+
 regenerate@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/regenerate/-/regenerate-1.4.0.tgz#4a856ec4b56e4077c557589cae85e7a4c8869a11"
@@ -16583,6 +16891,14 @@ regenerator-transform@^0.14.0:
   dependencies:
     private "^0.1.6"
 
+regenerator-transform@^0.14.2:
+  version "0.14.4"
+  resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.14.4.tgz#5266857896518d1616a78a0479337a30ea974cc7"
+  integrity sha512-EaJaKPBI9GvKpvUz2mz4fhx7WPgvwRLY9v3hlNHWmAuJHI13T4nwKnNvm5RWJzEdnI5g5UwtOww+S8IdoUC2bw==
+  dependencies:
+    "@babel/runtime" "^7.8.4"
+    private "^0.1.8"
+
 regex-not@^1.0.0, regex-not@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/regex-not/-/regex-not-1.0.2.tgz#1f4ece27e00b0b65e0247a6810e6a85d83a5752c"
@@ -16626,6 +16942,18 @@ regexpu-core@^4.6.0:
     unicode-match-property-ecmascript "^1.0.4"
     unicode-match-property-value-ecmascript "^1.1.0"
 
+regexpu-core@^4.7.0:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-4.7.0.tgz#fcbf458c50431b0bb7b45d6967b8192d91f3d938"
+  integrity sha512-TQ4KXRnIn6tz6tjnrXEkD/sshygKH/j5KzK86X8MkeHyZ8qst/LZ89j3X4/8HEIfHANTFIP/AbXakeRhWIl5YQ==
+  dependencies:
+    regenerate "^1.4.0"
+    regenerate-unicode-properties "^8.2.0"
+    regjsgen "^0.5.1"
+    regjsparser "^0.6.4"
+    unicode-match-property-ecmascript "^1.0.4"
+    unicode-match-property-value-ecmascript "^1.2.0"
+
 registry-auth-token@^3.0.1:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/registry-auth-token/-/registry-auth-token-3.4.0.tgz#d7446815433f5d5ed6431cd5dca21048f66b397e"
@@ -16655,7 +16983,7 @@ registry-url@^5.0.0:
   dependencies:
     rc "^1.2.8"
 
-regjsgen@^0.5.0:
+regjsgen@^0.5.0, regjsgen@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/regjsgen/-/regjsgen-0.5.1.tgz#48f0bf1a5ea205196929c0d9798b42d1ed98443c"
   integrity sha512-5qxzGZjDs9w4tzT3TPhCJqWdCc3RLYwy9J2NB0nm5Lz+S273lvWcpjaTGHsT1dc6Hhfq41uSEOw8wBmxrKOuyg==
@@ -16667,6 +16995,13 @@ regjsparser@^0.6.0:
   dependencies:
     jsesc "~0.5.0"
 
+regjsparser@^0.6.4:
+  version "0.6.4"
+  resolved "https://registry.yarnpkg.com/regjsparser/-/regjsparser-0.6.4.tgz#a769f8684308401a66e9b529d2436ff4d0666272"
+  integrity sha512-64O87/dPDgfk8/RQqC4gkZoGyyWFIEUTTh80CU6CWuK5vkCGyekIx+oKcEIYtP/RAxSQltCZHCNu/mdd7fqlJw==
+  dependencies:
+    jsesc "~0.5.0"
+
 relateurl@^0.2.7:
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
@@ -16768,7 +17103,7 @@ request-promise-native@^1.0.5:
     stealthy-require "^1.1.1"
     tough-cookie "^2.3.3"
 
-request@^2.45.0, request@^2.83.0, request@^2.87.0, request@^2.88.0:
+request@^2.87.0, request@^2.88.0:
   version "2.88.0"
   resolved "https://registry.yarnpkg.com/request/-/request-2.88.0.tgz#9c2fca4f7d35b592efe57c7f0a55e81052124fef"
   integrity sha512-NAqBSrijGLZdM0WZNsInLJpkJokL72XYjUpnB0iwsRgxh7dB6COrHnTBNwN0E+lHDAJzu7kLAkDeY08z2/A0hg==
@@ -16879,7 +17214,7 @@ resolve@1.15.0:
   dependencies:
     path-parse "^1.0.6"
 
-resolve@1.x, resolve@^1.1.6, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.3.2, resolve@^1.8.1, resolve@^1.9.0:
+resolve@1.x, resolve@^1.1.6, resolve@^1.10.0, resolve@^1.11.0, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.15.1, resolve@^1.3.2, resolve@^1.8.1, resolve@^1.9.0:
   version "1.15.1"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.15.1.tgz#27bdcdeffeaf2d6244b95bb0f9f4b4653451f3e8"
   integrity sha512-84oo6ZTtoTUpjgNEr5SJyzQhzL72gaRodsSfyxC/AXRvwu0Yse9H8eF9IpGo7b8YetZhlI6v7ZQ6bKBFV/6S7w==
@@ -16947,11 +17282,6 @@ rgb-regex@^1.0.1:
   resolved "https://registry.yarnpkg.com/rgb-regex/-/rgb-regex-1.0.1.tgz#c0e0d6882df0e23be254a475e8edd41915feaeb1"
   integrity sha1-wODWiC3w4jviVKR16O3UGRX+rrE=
 
-rgb2hex@^0.1.9:
-  version "0.1.10"
-  resolved "https://registry.yarnpkg.com/rgb2hex/-/rgb2hex-0.1.10.tgz#4fdd432665273e2d5900434940ceba0a04c8a8a8"
-  integrity sha512-vKz+kzolWbL3rke/xeTE2+6vHmZnNxGyDnaVW4OckntAIcc7DcZzWkQSfxMDwqHS8vhgySnIFyBUH7lIk6PxvQ==
-
 rgba-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
@@ -17047,18 +17377,6 @@ run-queue@^1.0.0, run-queue@^1.0.3:
   dependencies:
     aproba "^1.1.1"
 
-rx-lite-aggregates@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/rx-lite-aggregates/-/rx-lite-aggregates-4.0.8.tgz#753b87a89a11c95467c4ac1626c4efc4e05c67be"
-  integrity sha1-dTuHqJoRyVRnxKwWJsTvxOBcZ74=
-  dependencies:
-    rx-lite "*"
-
-rx-lite@*, rx-lite@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-4.0.8.tgz#0b1e11af8bc44836f04a6407e92da42467b79444"
-  integrity sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=
-
 rx@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"
@@ -17190,6 +17508,14 @@ schema-utils@^2.0.1, schema-utils@^2.5.0, schema-utils@^2.6.0, schema-utils@^2.6
     ajv "^6.10.2"
     ajv-keywords "^3.4.1"
 
+schema-utils@^2.6.5:
+  version "2.6.5"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.6.5.tgz#c758f0a7e624263073d396e29cd40aa101152d8a"
+  integrity sha512-5KXuwKziQrTVHh8j/Uxz+QUbxkaLW9X/86NBlx/gnKgtsZA2GIVMUn17qWhRFwF8jdYb3Dig5hRO/W5mZqy6SQ==
+  dependencies:
+    ajv "^6.12.0"
+    ajv-keywords "^3.4.1"
+
 scss-tokenizer@^0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/scss-tokenizer/-/scss-tokenizer-0.2.3.tgz#8eb06db9a9723333824d3f5530641149847ce5d1"
@@ -17484,13 +17810,6 @@ simplebar@^4.2.3:
     lodash.throttle "^4.1.1"
     resize-observer-polyfill "^1.5.1"
 
-single-line-log@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/single-line-log/-/single-line-log-1.1.2.tgz#c2f83f273a3e1a16edb0995661da0ed5ef033364"
-  integrity sha1-wvg/Jzo+GhbtsJlWYdoO1e8DM2Q=
-  dependencies:
-    string-width "^1.0.1"
-
 sisteransi@^1.0.3:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.4.tgz#386713f1ef688c7c0304dc4c0632898941cad2e3"
@@ -17720,22 +18039,6 @@ spdy@^4.0.1:
     select-hose "^2.0.0"
     spdy-transport "^3.0.0"
 
-spectron@9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/spectron/-/spectron-9.0.0.tgz#6581780027172095e168353c82ed934212a0c97f"
-  integrity sha512-aMxprQ+5/8hDl27P6FafIuuL8jAueJ7WEc6S6pEEQNU7xGCMcfj0RY6TB1i9BtkazMymIxAkmwqlK233Fbhcgw==
-  dependencies:
-    dev-null "^0.1.1"
-    electron-chromedriver "^7.0.0"
-    request "^2.87.0"
-    split "^1.0.0"
-    webdriverio "^4.13.0"
-
-speedometer@~0.1.2:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/speedometer/-/speedometer-0.1.4.tgz#9876dbd2a169d3115402d48e6ea6329c8816a50d"
-  integrity sha1-mHbb0qFp0xFUAtSObqYynIgWpQ0=
-
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/split-string/-/split-string-3.1.0.tgz#7cb09dda3a86585705c64b39a6466038682e8fe2"
@@ -17961,7 +18264,7 @@ string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.0"
 
-"string.prototype.matchall@^4.0.0 || ^3.0.1":
+"string.prototype.matchall@^4.0.0 || ^3.0.1", string.prototype.matchall@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/string.prototype.matchall/-/string.prototype.matchall-4.0.2.tgz#48bb510326fb9fdeb6a33ceaa81a6ea04ef7648e"
   integrity sha512-N/jp6O5fMf9os0JU3E72Qhf590RSRZU/ungsL/qJUYVTNv7hTG0P/dbPjxINVN9jpscu3nzYwKESU3P3RY5tOg==
@@ -18021,11 +18324,6 @@ string_decoder@^1.0.0, string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
-string_decoder@~0.10.x:
-  version "0.10.31"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
-  integrity sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ=
-
 string_decoder@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
@@ -18143,7 +18441,15 @@ strong-log-transformer@^2.0.0:
     minimist "^1.2.0"
     through "^2.3.4"
 
-style-loader@1.1.3, style-loader@^1.0.0:
+style-loader@0.23.1:
+  version "0.23.1"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.23.1.tgz#cb9154606f3e771ab6c4ab637026a1049174d925"
+  integrity sha512-XK+uv9kWwhZMZ1y7mysB+zoihsEj4wneFWAS5qoiLwzW0WzSqMrrsIy+a3zkQJq0ipFtBpX5W3MqyRIBF/WFGg==
+  dependencies:
+    loader-utils "^1.1.0"
+    schema-utils "^1.0.0"
+
+style-loader@^1.0.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-1.1.3.tgz#9e826e69c683c4d9bf9db924f85e9abb30d5e200"
   integrity sha512-rlkH7X/22yuwFYK357fMN/BxYOorfnfq0eD7+vqlemSK4wEcejFF1dg4zxP0euBW8NrYx2WZzZ8PPFevr7D+Kw==
@@ -18212,13 +18518,6 @@ subleveldown@^4.1.4:
     levelup "^4.3.1"
     reachdown "^1.0.0"
 
-sumchecker@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/sumchecker/-/sumchecker-2.0.2.tgz#0f42c10e5d05da5d42eea3e56c3399a37d6c5b3e"
-  integrity sha1-D0LBDl0F2l1C7qPlbDOZo31sWz4=
-  dependencies:
-    debug "^2.2.0"
-
 sumchecker@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/sumchecker/-/sumchecker-3.0.1.tgz#6377e996795abb0b6d348e9b3e1dfb24345a8e42"
@@ -18259,13 +18558,6 @@ supports-color@^7.0.0, supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
-supports-color@~5.0.0:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.0.1.tgz#1c5331f22250c84202805b2f17adf16699f3a39a"
-  integrity sha512-7FQGOlSQ+AQxBNXJpVDj8efTA/FtyB5wcNE1omXXJ0cq6jm1jjDwuROlYDbnzHqdNPqliWFhcioCWSyav+xBnA==
-  dependencies:
-    has-flag "^2.0.0"
-
 svg-parser@^2.0.0:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/svg-parser/-/svg-parser-2.0.3.tgz#a38f2e4e5442986f7ecb554c11f1411cfcf8c2b9"
@@ -18323,19 +18615,6 @@ tapable@^1.0.0, tapable@^1.1.3:
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
   integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
 
-tar-stream@^1.5.0:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-1.6.2.tgz#8ea55dab37972253d9a9af90fdcd559ae435c555"
-  integrity sha512-rzS0heiNf8Xn7/mpdSVVSMAWAoy9bfb1WOTYC78Z0UQKeKa/CWS8FOq0lKGNa8DWKAn9gxjCvMLYc5PGXYlK2A==
-  dependencies:
-    bl "^1.0.0"
-    buffer-alloc "^1.2.0"
-    end-of-stream "^1.0.0"
-    fs-constants "^1.0.0"
-    readable-stream "^2.3.0"
-    to-buffer "^1.1.1"
-    xtend "^4.0.0"
-
 tar-stream@^2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-2.1.2.tgz#6d5ef1a7e5783a95ff70b69b97455a5968dc1325"
@@ -18427,10 +18706,10 @@ term-size@^2.1.0:
   resolved "https://registry.yarnpkg.com/term-size/-/term-size-2.2.0.tgz#1f16adedfe9bdc18800e1776821734086fcc6753"
   integrity sha512-a6sumDlzyHVJWb8+YofY4TW112G6p2FCPEAFk+59gIYHv3XHRhm9ltVQ9kli4hNWeQBwSpe8cRN25x0ROunMOw==
 
-terser-webpack-plugin@2.3.4, terser-webpack-plugin@^2.1.2:
-  version "2.3.4"
-  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-2.3.4.tgz#ac045703bd8da0936ce910d8fb6350d0e1dee5fe"
-  integrity sha512-Nv96Nws2R2nrFOpbzF6IxRDpIkkIfmhvOws+IqMvYdFLO7o6wAILWFKONFgaYy8+T4LVz77DQW0f7wOeDEAjrg==
+terser-webpack-plugin@2.3.5:
+  version "2.3.5"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-2.3.5.tgz#5ad971acce5c517440ba873ea4f09687de2f4a81"
+  integrity sha512-WlWksUoq+E4+JlJ+h+U+QUzXpcsMSSNXkDy9lBVkSqDn1w23Gg29L/ary9GeJVYCGiNJJX7LnVc4bwL1N3/g1w==
   dependencies:
     cacache "^13.0.1"
     find-cache-dir "^3.2.0"
@@ -18457,6 +18736,21 @@ terser-webpack-plugin@^1.4.3:
     webpack-sources "^1.4.0"
     worker-farm "^1.7.0"
 
+terser-webpack-plugin@^2.1.2:
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/terser-webpack-plugin/-/terser-webpack-plugin-2.3.4.tgz#ac045703bd8da0936ce910d8fb6350d0e1dee5fe"
+  integrity sha512-Nv96Nws2R2nrFOpbzF6IxRDpIkkIfmhvOws+IqMvYdFLO7o6wAILWFKONFgaYy8+T4LVz77DQW0f7wOeDEAjrg==
+  dependencies:
+    cacache "^13.0.1"
+    find-cache-dir "^3.2.0"
+    jest-worker "^25.1.0"
+    p-limit "^2.2.2"
+    schema-utils "^2.6.4"
+    serialize-javascript "^2.1.2"
+    source-map "^0.6.1"
+    terser "^4.4.3"
+    webpack-sources "^1.4.3"
+
 terser@^4.1.2, terser@^4.3.9, terser@^4.4.3:
   version "4.6.3"
   resolved "https://registry.yarnpkg.com/terser/-/terser-4.6.3.tgz#e33aa42461ced5238d352d2df2a67f21921f8d87"
@@ -18519,11 +18813,6 @@ throttle-debounce@^2.1.0:
   resolved "https://registry.yarnpkg.com/throttle-debounce/-/throttle-debounce-2.1.0.tgz#257e648f0a56bd9e54fe0f132c4ab8611df4e1d5"
   integrity sha512-AOvyNahXQuU7NN+VVvOOX+uW6FPaWdAOdRP5HfwYxAfCzXTFKRMoIMk+n+po318+ktcChx+F1Dd91G3YHeMKyg==
 
-throttleit@0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/throttleit/-/throttleit-0.0.2.tgz#cfedf88e60c00dd9697b61fdd2a8343a9b680eaf"
-  integrity sha1-z+34jmDADdlpe2H90qg0OptoDq8=
-
 through2@^2.0.0, through2@^2.0.2:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
@@ -18539,14 +18828,6 @@ through2@^3.0.0:
   dependencies:
     readable-stream "2 || 3"
 
-through2@~0.2.3:
-  version "0.2.3"
-  resolved "https://registry.yarnpkg.com/through2/-/through2-0.2.3.tgz#eb3284da4ea311b6cc8ace3653748a52abf25a3f"
-  integrity sha1-6zKE2k6jEbbMis42U3SKUqvyWj8=
-  dependencies:
-    readable-stream "~1.1.9"
-    xtend "~2.1.1"
-
 through@2, "through@>=2.2.7 <3", through@^2.3.4, through@^2.3.6:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/through/-/through-2.3.8.tgz#0dd4c9ffaabc357960b1b724115d7e0e86a2e1f5"
@@ -18611,11 +18892,6 @@ to-arraybuffer@^1.0.0:
   resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
   integrity sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=
 
-to-buffer@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/to-buffer/-/to-buffer-1.1.1.tgz#493bd48f62d7c43fcded313a03dcadb2e1213a80"
-  integrity sha512-lx9B5iv7msuFYE3dytT+KE5tap+rNYw+K4jVkb9R/asAb+pbBSM17jtunHplhBe6RRJdZx3Pn2Jph24O32mOVg==
-
 to-fast-properties@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-2.0.0.tgz#dc5e698cbd079265bc73e0377681a4e4e83f616e"
@@ -18765,11 +19041,21 @@ ts-jest@24.0.2:
     semver "^5.5"
     yargs-parser "10.x"
 
-ts-pnp@1.1.5, ts-pnp@^1.1.2:
+ts-pnp@1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.6.tgz#389a24396d425a0d3162e96d2b4638900fdc289a"
+  integrity sha512-CrG5GqAAzMT7144Cl+UIFP7mz/iIhiy+xQ6GGcnjTezhALT02uPMRw7tgDSESgB5MsfKt55+GPWw4ir1kVtMIQ==
+
+ts-pnp@^1.1.2:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.5.tgz#840e0739c89fce5f3abd9037bb091dbff16d9dec"
   integrity sha512-ti7OGMOUOzo66wLF3liskw6YQIaSsBgc4GOAlWRnIEj8htCxJUxskanMUoJOD6MDCRAXo36goXJZch+nOS0VMA==
 
+ts-pnp@^1.1.6:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.2.0.tgz#a500ad084b0798f1c3071af391e65912c86bca92"
+  integrity sha512-csd+vJOb/gkzvcCHgTGSChYpy5f1/XKNsmvBGO4JXS+z1v2HobugDz4s1IeFXM3wZB44uczs+eazB5Q/ccdhQw==
+
 ts-transformer-imports@0.4.3:
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/ts-transformer-imports/-/ts-transformer-imports-0.4.3.tgz#d1527978cae552af9f821b06cc2233cdf2e09e42"
@@ -18959,6 +19245,11 @@ unicode-match-property-value-ecmascript@^1.1.0:
   resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.1.0.tgz#5b4b426e08d13a80365e0d657ac7a6c1ec46a277"
   integrity sha512-hDTHvaBk3RmFzvSl0UVrUmC3PuW9wKVnpoUDYH0JDkSIovzw+J5viQmeYHxVSBptubnr7PbH2e0fnpDRQnQl5g==
 
+unicode-match-property-value-ecmascript@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/unicode-match-property-value-ecmascript/-/unicode-match-property-value-ecmascript-1.2.0.tgz#0d91f600eeeb3096aa962b1d6fc88876e64ea531"
+  integrity sha512-wjuQHGQVofmSJv1uVISKLE5zO2rNGzM/KCYZch/QQvez7C1hUhBIuZ701fYXExuufJFMPhv2SyL8CyoIfMLbIQ==
+
 unicode-property-aliases-ecmascript@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.0.5.tgz#a9cc6cc7ce63a0a3023fc99e341b94431d405a57"
@@ -19241,7 +19532,7 @@ url-parse@^1.4.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
-url@^0.11.0, url@~0.11.0:
+url@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/url/-/url-0.11.0.tgz#3838e97cfc60521eb73c525a8e55bfdd9e2e28f1"
   integrity sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=
@@ -19478,44 +19769,11 @@ wcwidth@^1.0.0:
   dependencies:
     defaults "^1.0.3"
 
-wdio-dot-reporter@~0.0.8:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/wdio-dot-reporter/-/wdio-dot-reporter-0.0.10.tgz#facfb7c9c5984149951f59cbc3cd0752101cf0e0"
-  integrity sha512-A0TCk2JdZEn3M1DSG9YYbNRcGdx/YRw19lTiRpgwzH4qqWkO/oRDZRmi3Snn4L2j54KKTfPalBhlOtc8fojVgg==
-
 web-namespaces@^1.0.0, web-namespaces@^1.1.2:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/web-namespaces/-/web-namespaces-1.1.4.tgz#bc98a3de60dadd7faefc403d1076d529f5e030ec"
   integrity sha512-wYxSGajtmoP4WxfejAPIr4l0fVh+jeMXZb08wNc0tMg6xsfZXj3cECqIK0G7ZAqUq0PP8WlMDtaOGVBTAWztNw==
 
-webdriverio@^4.13.0:
-  version "4.14.4"
-  resolved "https://registry.yarnpkg.com/webdriverio/-/webdriverio-4.14.4.tgz#f7a94e9a6530819796088f42b009833d83de0386"
-  integrity sha512-Knp2vzuzP5c5ybgLu+zTwy/l1Gh0bRP4zAr8NWcrStbuomm9Krn9oRF0rZucT6AyORpXinETzmeowFwIoo7mNA==
-  dependencies:
-    archiver "~2.1.0"
-    babel-runtime "^6.26.0"
-    css-parse "^2.0.0"
-    css-value "~0.0.1"
-    deepmerge "~2.0.1"
-    ejs "~2.5.6"
-    gaze "~1.1.2"
-    glob "~7.1.1"
-    grapheme-splitter "^1.0.2"
-    inquirer "~3.3.0"
-    json-stringify-safe "~5.0.1"
-    mkdirp "~0.5.1"
-    npm-install-package "~2.1.0"
-    optimist "~0.6.1"
-    q "~1.5.0"
-    request "^2.83.0"
-    rgb2hex "^0.1.9"
-    safe-buffer "~5.1.1"
-    supports-color "~5.0.0"
-    url "~0.11.0"
-    wdio-dot-reporter "~0.0.8"
-    wgxpath "~1.0.0"
-
 webidl-conversions@^4.0.2:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.2.tgz#a855980b1f0b6b359ba1d5d9fb39ae941faa63ad"
@@ -19532,10 +19790,10 @@ webpack-dev-middleware@^3.7.0, webpack-dev-middleware@^3.7.2:
     range-parser "^1.2.1"
     webpack-log "^2.0.0"
 
-webpack-dev-server@3.10.1:
-  version "3.10.1"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.10.1.tgz#1ff3e5cccf8e0897aa3f5909c654e623f69b1c0e"
-  integrity sha512-AGG4+XrrXn4rbZUueyNrQgO4KGnol+0wm3MPdqGLmmA+NofZl3blZQKxZ9BND6RDNuvAK9OMYClhjOSnxpWRoA==
+webpack-dev-server@3.10.3:
+  version "3.10.3"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.10.3.tgz#f35945036813e57ef582c2420ef7b470e14d3af0"
+  integrity sha512-e4nWev8YzEVNdOMcNzNeCN947sWJNd43E5XvsJzbAL08kGc2frm1tQ32hTJslRS+H65LCb/AaUCYU7fjHCpDeQ==
   dependencies:
     ansi-html "0.0.7"
     bonjour "^3.5.0"
@@ -19614,7 +19872,36 @@ webpack-virtual-modules@^0.2.0:
   dependencies:
     debug "^3.0.0"
 
-webpack@4.41.5, webpack@^4.33.0, webpack@^4.38.0:
+webpack@4.42.0:
+  version "4.42.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.42.0.tgz#b901635dd6179391d90740a63c93f76f39883eb8"
+  integrity sha512-EzJRHvwQyBiYrYqhyjW9AqM90dE4+s1/XtCfn7uWg6cS72zH+2VPFAlsnW0+W0cDi0XRjNKUMoJtpSi50+Ph6w==
+  dependencies:
+    "@webassemblyjs/ast" "1.8.5"
+    "@webassemblyjs/helper-module-context" "1.8.5"
+    "@webassemblyjs/wasm-edit" "1.8.5"
+    "@webassemblyjs/wasm-parser" "1.8.5"
+    acorn "^6.2.1"
+    ajv "^6.10.2"
+    ajv-keywords "^3.4.1"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^4.1.0"
+    eslint-scope "^4.0.3"
+    json-parse-better-errors "^1.0.2"
+    loader-runner "^2.4.0"
+    loader-utils "^1.2.3"
+    memory-fs "^0.4.1"
+    micromatch "^3.1.10"
+    mkdirp "^0.5.1"
+    neo-async "^2.6.1"
+    node-libs-browser "^2.2.1"
+    schema-utils "^1.0.0"
+    tapable "^1.1.3"
+    terser-webpack-plugin "^1.4.3"
+    watchpack "^1.6.0"
+    webpack-sources "^1.4.1"
+
+webpack@^4.33.0, webpack@^4.38.0:
   version "4.41.5"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.41.5.tgz#3210f1886bce5310e62bb97204d18c263341b77c"
   integrity sha512-wp0Co4vpyumnp3KlkmpM5LWuzvZYayDwM2n17EHFr4qxBBbRokC7DJawPJC7TfSFZ9HZ6GsdH40EBj4UV0nmpw==
@@ -19657,11 +19944,6 @@ websocket-extensions@>=0.1.1:
   resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29"
   integrity sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==
 
-wgxpath@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/wgxpath/-/wgxpath-1.0.0.tgz#eef8a4b9d558cc495ad3a9a2b751597ecd9af690"
-  integrity sha1-7vikudVYzEla06mit1FZfs2a9pA=
-
 whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3, whatwg-encoding@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.5.tgz#5abacf777c32166a51d085d6b4f3e7d27113ddb0"
@@ -20061,18 +20343,18 @@ xmlchars@^2.1.1:
   resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb"
   integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==
 
+xregexp@^4.3.0:
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/xregexp/-/xregexp-4.3.0.tgz#7e92e73d9174a99a59743f67a4ce879a04b5ae50"
+  integrity sha512-7jXDIFXh5yJ/orPn4SXjuVrWWoi4Cr8jfV1eHv9CixKSbU+jY4mxfrBwAuDvupPNKpMUY+FeIqsVw/JLT9+B8g==
+  dependencies:
+    "@babel/runtime-corejs3" "^7.8.3"
+
 xtend@^4.0.0, xtend@^4.0.1, xtend@^4.0.2, xtend@~4.0.0, xtend@~4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
   integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 
-xtend@~2.1.1:
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/xtend/-/xtend-2.1.2.tgz#6efecc2a4dad8e6962c4901b337ce7ba87b5d28b"
-  integrity sha1-bv7MKk2tjmlixJAbM3znuoe10os=
-  dependencies:
-    object-keys "~0.4.0"
-
 y18n@^3.2.1:
   version "3.2.1"
   resolved "https://registry.yarnpkg.com/y18n/-/y18n-3.2.1.tgz#6d15fba884c08679c0d77e88e7759e811e07fa41"
@@ -20280,16 +20562,6 @@ yauzl@2.4.1:
   dependencies:
     fd-slicer "~1.0.1"
 
-zip-stream@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/zip-stream/-/zip-stream-1.2.0.tgz#a8bc45f4c1b49699c6b90198baacaacdbcd4ba04"
-  integrity sha1-qLxF9MG0lpnGuQGYuqyqzbzUugQ=
-  dependencies:
-    archiver-utils "^1.3.0"
-    compress-commons "^1.2.0"
-    lodash "^4.8.0"
-    readable-stream "^2.0.0"
-
 zip-stream@^2.1.2:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/zip-stream/-/zip-stream-2.1.3.tgz#26cc4bdb93641a8590dd07112e1f77af1758865b"