diff --git a/package.json b/package.json
index 7a3b96ccdf..d4db469585 100644
--- a/package.json
+++ b/package.json
@@ -26,15 +26,9 @@
     "bootstrap": "lerna bootstrap && lerna link",
     "lint": "lerna run lint",
     "test": "lerna run --parallel test",
-    "precommit": "lint-staged",
+    "precommit": "lerna run precommit",
     "postinstall": "npm rebuild tiny-secp256k1 && lerna run rebuild:nativemodules"
   },
-  "lint-staged": {
-    "packages/*/src/**/*.{ts,tsx}": [
-      "eslint --fix",
-      "git add"
-    ]
-  },
   "devDependencies": {
     "@cryptape/sdk-ts-config": "0.0.1",
     "@types/jest": "^24.0.11",
@@ -50,9 +44,7 @@
     "eslint-plugin-jsx-a11y": "^6.1.2",
     "eslint-plugin-prettier": "^3.0.1",
     "eslint-plugin-react": "^7.12.4",
-    "husky": "^1.3.1",
     "lerna": "^3.13.2",
-    "lint-staged": "^8.1.5",
     "nodemon": "^1.18.11",
     "prettier": "^1.17.0",
     "ts-jest": "^24.0.2",
diff --git a/packages/neuron-ui/.eslintrc.js b/packages/neuron-ui/.eslintrc.js
index 598e38af75..1b089c5751 100644
--- a/packages/neuron-ui/.eslintrc.js
+++ b/packages/neuron-ui/.eslintrc.js
@@ -2,7 +2,6 @@ module.exports = {
   "extends": [
     "../../.eslintrc.js"
   ],
-  "plugins": ["react-hooks"],
   "settings": {
     "react": {
       "version": "detect"
@@ -12,6 +11,5 @@ module.exports = {
     "react/jsx-filename-extension": [1, {
       "extensions": [".ts", ".tsx"]
     }],
-    "react-hooks/rules-of-hooks": 2
   }
 }
diff --git a/packages/neuron-ui/package.json b/packages/neuron-ui/package.json
index e11d1b0da1..6f93fe640d 100644
--- a/packages/neuron-ui/package.json
+++ b/packages/neuron-ui/package.json
@@ -16,6 +16,7 @@
     "test": "react-app-rewired test --env=jsdom --color",
     "build": "react-app-rewired build",
     "clean": "rimraf build/*",
+    "precommit": "lint-staged",
     "postinstall": "npm rebuild tiny-secp256k1"
   },
   "publishConfig": {
@@ -24,12 +25,13 @@
   "eslintConfig": {
     "extends": "react-app"
   },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ],
+  "lint-staged": {
+    "src/**/*.{ts,tsx}": [
+      "eslint --fix",
+      "git add"
+    ]
+  },
+  "browserslist": ["last 2 chrome versions"],
   "dependencies": {
     "@nervosnetwork/ckb-sdk-core": "^0.8.0",
     "@types/node": "11.13.5",
@@ -60,9 +62,10 @@
     "babel-jest": "^24.7.1",
     "enzyme": "^3.8.0",
     "enzyme-adapter-react-16": "^1.9.1",
-    "eslint-plugin-react-hooks": "^1.6.0",
+    "husky": "^1.3.1",
     "jest-styled-components": "^6.3.1",
     "jsqr": "^1.2.0",
+    "lint-staged": "^8.1.5",
     "react-app-rewired": "^2.1.1",
     "rimraf": "^2.6.3"
   }
diff --git a/packages/neuron-ui/src/components/Addresses/index.tsx b/packages/neuron-ui/src/components/Addresses/index.tsx
index f880735d28..a82e24e22f 100644
--- a/packages/neuron-ui/src/components/Addresses/index.tsx
+++ b/packages/neuron-ui/src/components/Addresses/index.tsx
@@ -3,10 +3,10 @@ import { Container } from 'react-bootstrap'
 import { RouteComponentProps } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { History } from 'history'
-import Table from '../../widgets/Table'
-import { Routes, EXPLORER } from '../../utils/const'
+import { Routes, EXPLORER } from 'utils/const'
+import Table from 'widgets/Table'
+import ContextMenuZone from 'widgets/ContextMenuZone'
 import { mockAddresses } from './mock'
-import ContextMenuZone from '../../widgets/ContextMenuZone'
 
 const headers = [
   {
diff --git a/packages/neuron-ui/src/components/App/index.tsx b/packages/neuron-ui/src/components/App/index.tsx
index b6bbc546b3..405886814f 100755
--- a/packages/neuron-ui/src/components/App/index.tsx
+++ b/packages/neuron-ui/src/components/App/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import withProviders from '../../containers/Providers'
+import withProviders from 'containers/Providers'
 import Router from '../Router'
 
 const App = (props: any) => <Router {...props} />
diff --git a/packages/neuron-ui/src/components/History/index.tsx b/packages/neuron-ui/src/components/History/index.tsx
index 00d89be7eb..c1cfa5b8d8 100644
--- a/packages/neuron-ui/src/components/History/index.tsx
+++ b/packages/neuron-ui/src/components/History/index.tsx
@@ -6,18 +6,18 @@ import { useTranslation } from 'react-i18next'
 import { Close as CloseIcon } from 'grommet-icons'
 import dayjs from 'dayjs'
 
-import ContextMenuZone from '../../widgets/ContextMenuZone'
-import Pagination from '../../widgets/Table/Pagination'
-
-import { ContentProps } from '../../containers/MainContent'
-import { actionCreators, MainActions } from '../../containers/MainContent/reducer'
-import { ProviderActions } from '../../containers/Providers/reducer'
-
-import { useNeuronWallet } from '../../utils/hooks'
-import { Transaction } from '../../contexts/NeuronWallet'
-import { queryParsers } from '../../utils/parser'
-import { TransactionType, Routes, EXPLORER } from '../../utils/const'
-import { queryFormatter } from '../../utils/formatters'
+import ContextMenuZone from 'widgets/ContextMenuZone'
+import Pagination from 'widgets/Table/Pagination'
+
+import { ContentProps } from 'containers/MainContent'
+import { actionCreators, MainActions } from 'containers/MainContent/reducer'
+import { ProviderActions } from 'containers/Providers/reducer'
+
+import { useNeuronWallet } from 'utils/hooks'
+import { Transaction } from 'contexts/NeuronWallet'
+import { queryParsers } from 'utils/parser'
+import { TransactionType, Routes, EXPLORER } from 'utils/const'
+import { queryFormatter } from 'utils/formatters'
 
 const FormatOfDay = 'YYYY-MM-DD'
 const FormatOfTime = 'HH:mm'
diff --git a/packages/neuron-ui/src/components/LaunchScreen/index.tsx b/packages/neuron-ui/src/components/LaunchScreen/index.tsx
index 96d7a70885..32585cb7a7 100644
--- a/packages/neuron-ui/src/components/LaunchScreen/index.tsx
+++ b/packages/neuron-ui/src/components/LaunchScreen/index.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect } from 'react'
 import { RouteComponentProps } from 'react-router-dom'
-import Screen from '../../widgets/Screen'
-import { Spinner } from '../../widgets/Loading'
-import { useNeuronWallet } from '../../utils/hooks'
-import { Routes } from '../../utils/const'
+import Screen from 'widgets/Screen'
+import { Spinner } from 'widgets/Loading'
+import { useNeuronWallet } from 'utils/hooks'
+import { Routes } from 'utils/const'
 
 const LaunchScreen = (props: React.PropsWithoutRef<RouteComponentProps>) => {
   const {
diff --git a/packages/neuron-ui/src/components/Mnemonic/index.tsx b/packages/neuron-ui/src/components/Mnemonic/index.tsx
index e72850af4d..876143b25e 100644
--- a/packages/neuron-ui/src/components/Mnemonic/index.tsx
+++ b/packages/neuron-ui/src/components/Mnemonic/index.tsx
@@ -4,15 +4,15 @@ import styled from 'styled-components'
 import { Alert, Button, FormControl } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 
-import Screen from '../../widgets/Screen'
-import ScreenMessages from '../ScreenMessages'
-import ScreenButtonRow from '../../widgets/ScreenButtonRow'
+import Screen from 'widgets/Screen'
+import ScreenButtonRow from 'widgets/ScreenButtonRow'
 
-import { ContentProps } from '../../containers/MainContent'
-import { MainActions } from '../../containers/MainContent/reducer'
-import { MnemonicAction, Routes } from '../../utils/const'
-import { useNeuronWallet } from '../../utils/hooks'
-import { helpersCall } from '../../services/UILayer'
+import { ContentProps } from 'containers/MainContent'
+import { MainActions } from 'containers/MainContent/reducer'
+import { MnemonicAction, Routes } from 'utils/const'
+import { useNeuronWallet } from 'utils/hooks'
+import { helpersCall } from 'services/UILayer'
+import ScreenMessages from '../ScreenMessages'
 
 const Container = styled.div`
   text-align: center;
diff --git a/packages/neuron-ui/src/components/NetworkEditor/hooks.ts b/packages/neuron-ui/src/components/NetworkEditor/hooks.ts
index c653a8984c..c10990bd36 100644
--- a/packages/neuron-ui/src/components/NetworkEditor/hooks.ts
+++ b/packages/neuron-ui/src/components/NetworkEditor/hooks.ts
@@ -1,7 +1,7 @@
 import { useState, useEffect, useMemo, useCallback } from 'react'
-import { MainActions, actionCreators } from '../../containers/MainContent/reducer'
-import i18n from '../../utils/i18n'
-import { Network } from '../../contexts/NeuronWallet'
+import { MainActions, actionCreators } from 'containers/MainContent/reducer'
+import i18n from 'utils/i18n'
+import { Network } from 'contexts/NeuronWallet'
 
 enum PlaceHolder {
   Name = 'My Custom Node',
diff --git a/packages/neuron-ui/src/components/NetworkEditor/index.tsx b/packages/neuron-ui/src/components/NetworkEditor/index.tsx
index f97757e0c6..a279958116 100644
--- a/packages/neuron-ui/src/components/NetworkEditor/index.tsx
+++ b/packages/neuron-ui/src/components/NetworkEditor/index.tsx
@@ -3,10 +3,10 @@ import { RouteComponentProps } from 'react-router-dom'
 import { Card, Form, Button, Alert } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 
-import { ContentProps } from '../../containers/MainContent'
+import { ContentProps } from 'containers/MainContent'
 
-import InlineInput, { InputProps } from '../../widgets/InlineInput'
-import { useNeuronWallet } from '../../utils/hooks'
+import InlineInput, { InputProps } from 'widgets/InlineInput'
+import { useNeuronWallet } from 'utils/hooks'
 import { useInitiate, useInputs, useNetworkEditor, useIsInputsValid, useHandleSubmit } from './hooks'
 
 export interface RawNetwork {
diff --git a/packages/neuron-ui/src/components/NetworkSetting/RemoveNetworkDialog.tsx b/packages/neuron-ui/src/components/NetworkSetting/RemoveNetworkDialog.tsx
index 8b69a54f4d..ae2572786a 100644
--- a/packages/neuron-ui/src/components/NetworkSetting/RemoveNetworkDialog.tsx
+++ b/packages/neuron-ui/src/components/NetworkSetting/RemoveNetworkDialog.tsx
@@ -2,9 +2,9 @@ import React from 'react'
 import { Card, Button } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 
-import { MainActions, actionCreators } from '../../containers/MainContent/reducer'
-import { Network } from '../../contexts/NeuronWallet'
-import { UnremovableNetwork } from '../../utils/const'
+import { MainActions, actionCreators } from 'containers/MainContent/reducer'
+import { Network } from 'contexts/NeuronWallet'
+import { UnremovableNetwork } from 'utils/const'
 
 const RemoveNetworkDialog = ({
   isChecked,
diff --git a/packages/neuron-ui/src/components/NetworkSetting/index.tsx b/packages/neuron-ui/src/components/NetworkSetting/index.tsx
index 3b4eb2a0cc..c417fc4900 100644
--- a/packages/neuron-ui/src/components/NetworkSetting/index.tsx
+++ b/packages/neuron-ui/src/components/NetworkSetting/index.tsx
@@ -3,14 +3,15 @@ import { Link, RouteComponentProps } from 'react-router-dom'
 import { Form, ListGroup } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 
-import { ContentProps } from '../../containers/MainContent'
-import { Routes } from '../../utils/const'
-import { useNeuronWallet } from '../../utils/hooks'
-import { MainActions, actionCreators } from '../../containers/MainContent/reducer'
+import { ContentProps } from 'containers/MainContent'
+import { MainActions, actionCreators } from 'containers/MainContent/reducer'
 
-import Dialog from '../../widgets/Dialog'
-import ListGroupWithMaxHeight from '../../widgets/ListGroupWithMaxHeight'
-import ContextMenuZone from '../../widgets/ContextMenuZone'
+import { Routes } from 'utils/const'
+import { useNeuronWallet } from 'utils/hooks'
+
+import Dialog from 'widgets/Dialog'
+import ListGroupWithMaxHeight from 'widgets/ListGroupWithMaxHeight'
+import ContextMenuZone from 'widgets/ContextMenuZone'
 import RemoveNetworkDialog from './RemoveNetworkDialog'
 
 interface MenuItemParams {
diff --git a/packages/neuron-ui/src/components/NetworkStatus/index.tsx b/packages/neuron-ui/src/components/NetworkStatus/index.tsx
index 550c2f4540..173075438d 100644
--- a/packages/neuron-ui/src/components/NetworkStatus/index.tsx
+++ b/packages/neuron-ui/src/components/NetworkStatus/index.tsx
@@ -3,10 +3,10 @@ import styled from 'styled-components'
 import { useTranslation } from 'react-i18next'
 import { FormSubtract as HyphenIcon } from 'grommet-icons'
 
-import Dropdown from '../../widgets/Dropdown'
-import { ConnectStatus, Routes } from '../../utils/const'
-import { Network } from '../../contexts/NeuronWallet'
-import { useNeuronWallet } from '../../utils/hooks'
+import Dropdown from 'widgets/Dropdown'
+import { ConnectStatus, Routes } from 'utils/const'
+import { Network } from 'contexts/NeuronWallet'
+import { useNeuronWallet } from 'utils/hooks'
 
 const Container = styled.div`
   position: relative;
diff --git a/packages/neuron-ui/src/components/Prompt/index.tsx b/packages/neuron-ui/src/components/Prompt/index.tsx
index 94c11418e6..0ad15e7533 100644
--- a/packages/neuron-ui/src/components/Prompt/index.tsx
+++ b/packages/neuron-ui/src/components/Prompt/index.tsx
@@ -2,9 +2,9 @@ import React from 'react'
 import { RouteComponentProps } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 
-import Screen from '../../widgets/Screen'
+import Screen from 'widgets/Screen'
 
-import { queryParsers } from '../../utils/parser'
+import { queryParsers } from 'utils/parser'
 
 const Prompt = ({
   match: {
diff --git a/packages/neuron-ui/src/components/Router/index.tsx b/packages/neuron-ui/src/components/Router/index.tsx
index c045f3c083..38052fc497 100644
--- a/packages/neuron-ui/src/components/Router/index.tsx
+++ b/packages/neuron-ui/src/components/Router/index.tsx
@@ -2,11 +2,13 @@ import React from 'react'
 import { HashRouter as Router, Route, RouteComponentProps } from 'react-router-dom'
 import { createHashHistory } from 'history'
 
+import Header from 'containers/Header'
+import Sidebar from 'containers/Sidebar'
+import MainContent from 'containers/MainContent'
+import Notification from 'containers/Notification'
+import UILayer from 'services/UILayer'
+import { Routes, Channel } from 'utils/const'
 import RoutesWithProps from './RoutesWithProps'
-import Header from '../../containers/Header'
-import Sidebar from '../../containers/Sidebar'
-import MainContent from '../../containers/MainContent'
-import Notification from '../../containers/Notification'
 import WalletWizard from '../WalletWizard'
 import Mnemonic from '../Mnemonic'
 import WalletSubmission from '../WalletSubmission'
@@ -26,9 +28,6 @@ import Terminal from '../Terminal'
 import Prompt from '../Prompt'
 import LaunchScreen from '../LaunchScreen'
 
-import UILayer from '../../services/UILayer'
-import { Routes, Channel } from '../../utils/const'
-
 export interface CustomRoute {
   name: string
   path: string
diff --git a/packages/neuron-ui/src/components/ScreenMessages/index.tsx b/packages/neuron-ui/src/components/ScreenMessages/index.tsx
index 9107f736ca..5f1c8dc53d 100644
--- a/packages/neuron-ui/src/components/ScreenMessages/index.tsx
+++ b/packages/neuron-ui/src/components/ScreenMessages/index.tsx
@@ -1,5 +1,5 @@
 import React from 'react'
-import BannerMessages, { Message } from '../../widgets/BannerMessages'
+import BannerMessages, { Message } from 'widgets/BannerMessages'
 
 const style = {
   position: 'absolute',
diff --git a/packages/neuron-ui/src/components/Settings/index.tsx b/packages/neuron-ui/src/components/Settings/index.tsx
index 4c6931fdf3..277253c705 100644
--- a/packages/neuron-ui/src/components/Settings/index.tsx
+++ b/packages/neuron-ui/src/components/Settings/index.tsx
@@ -3,7 +3,7 @@ import { Location } from 'history'
 import { NavLink } from 'react-router-dom'
 import { Nav } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
-import { Routes } from '../../utils/const'
+import { Routes } from 'utils/const'
 
 const tabs = [
   { label: 'settings.setting-tabs.general', to: Routes.SettingsGeneral },
diff --git a/packages/neuron-ui/src/components/Terminal/index.tsx b/packages/neuron-ui/src/components/Terminal/index.tsx
index c615818d73..71fe1b9e71 100644
--- a/packages/neuron-ui/src/components/Terminal/index.tsx
+++ b/packages/neuron-ui/src/components/Terminal/index.tsx
@@ -1,8 +1,8 @@
 import React, { useState, useEffect, useCallback } from 'react'
 import styled from 'styled-components'
 
-import TerminalChannel from '../../services/Terminal'
-import { useNeuronWallet } from '../../utils/hooks'
+import TerminalChannel from 'services/Terminal'
+import { useNeuronWallet } from 'utils/hooks'
 
 const prompt = '=>'
 enum Hightlight {
diff --git a/packages/neuron-ui/src/components/Transaction/index.tsx b/packages/neuron-ui/src/components/Transaction/index.tsx
index 44f631ecc6..65f6fb86dc 100644
--- a/packages/neuron-ui/src/components/Transaction/index.tsx
+++ b/packages/neuron-ui/src/components/Transaction/index.tsx
@@ -3,10 +3,10 @@ import { RouteComponentProps } from 'react-router-dom'
 import { Card, Alert, Button } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 
-import { ContentProps } from '../../containers/MainContent'
-import { actionCreators, MainActions } from '../../containers/MainContent/reducer'
-import { ProviderActions } from '../../containers/Providers/reducer'
-import { useNeuronWallet } from '../../utils/hooks'
+import { ContentProps } from 'containers/MainContent'
+import { actionCreators, MainActions } from 'containers/MainContent/reducer'
+import { ProviderActions } from 'containers/Providers/reducer'
+import { useNeuronWallet } from 'utils/hooks'
 
 const Transaction = (props: React.PropsWithoutRef<ContentProps & RouteComponentProps<{ hash: string }>>) => {
   const { match, errorMsgs, dispatch, providerDispatch, history } = props
diff --git a/packages/neuron-ui/src/components/Transfer/index.tsx b/packages/neuron-ui/src/components/Transfer/index.tsx
index f0b5dfecce..d9ea5cc486 100644
--- a/packages/neuron-ui/src/components/Transfer/index.tsx
+++ b/packages/neuron-ui/src/components/Transfer/index.tsx
@@ -3,19 +3,18 @@ import { RouteComponentProps } from 'react-router-dom'
 import { Container, Row, Col, Card, Form, Button, Alert, InputGroup } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 
-import TransferConfirm from '../TransferConfirm'
-import TransferItemList from '../TransferItemList'
-
-import Dialog from '../../widgets/Dialog'
-import QRScanner from '../../widgets/QRScanner'
-import InlineInputWithDropdown from '../../widgets/InlineInput/InlineInputWithDropdown'
-import { Spinner } from '../../widgets/Loading'
+import Dialog from 'widgets/Dialog'
+import QRScanner from 'widgets/QRScanner'
+import InlineInputWithDropdown from 'widgets/InlineInput/InlineInputWithDropdown'
+import { Spinner } from 'widgets/Loading'
 
-import { ContentProps } from '../../containers/MainContent'
-import { MainActions, actionCreators } from '../../containers/MainContent/reducer'
-import initState from '../../containers/MainContent/state'
-import UILayer, { TransferItem } from '../../services/UILayer'
-import { CapacityUnit, PlaceHolders, Channel, Routes } from '../../utils/const'
+import { ContentProps } from 'containers/MainContent'
+import { MainActions, actionCreators } from 'containers/MainContent/reducer'
+import initState from 'containers/MainContent/state'
+import UILayer, { TransferItem } from 'services/UILayer'
+import { CapacityUnit, PlaceHolders, Channel, Routes } from 'utils/const'
+import TransferItemList from '../TransferItemList'
+import TransferConfirm from '../TransferConfirm'
 
 const Transfer = (props: React.PropsWithoutRef<ContentProps & RouteComponentProps>) => {
   const { t } = useTranslation()
diff --git a/packages/neuron-ui/src/components/TransferItemList/index.tsx b/packages/neuron-ui/src/components/TransferItemList/index.tsx
index 57ae97ff0d..02d2b9a851 100644
--- a/packages/neuron-ui/src/components/TransferItemList/index.tsx
+++ b/packages/neuron-ui/src/components/TransferItemList/index.tsx
@@ -1,8 +1,8 @@
 import React from 'react'
 import { ListGroup } from 'react-bootstrap'
 
-import { TransferItem } from '../../services/UILayer'
-import i18n from '../../utils/i18n'
+import { TransferItem } from 'services/UILayer'
+import i18n from 'utils/i18n'
 
 const TransferItemList = ({ items }: { items: TransferItem[] }) => (
   <ListGroup variant="flush">
diff --git a/packages/neuron-ui/src/components/WalletDetail/index.tsx b/packages/neuron-ui/src/components/WalletDetail/index.tsx
index a0915cfe4c..95826b3b08 100644
--- a/packages/neuron-ui/src/components/WalletDetail/index.tsx
+++ b/packages/neuron-ui/src/components/WalletDetail/index.tsx
@@ -2,8 +2,8 @@ import React from 'react'
 import { Card, ListGroup, Alert } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 
-import { ContentProps } from '../../containers/MainContent'
-import { useNeuronWallet } from '../../utils/hooks'
+import { ContentProps } from 'containers/MainContent'
+import { useNeuronWallet } from 'utils/hooks'
 
 const WalletDetail: React.SFC<{ children?: React.ReactNode } & Partial<ContentProps>> = () => {
   const { wallet } = useNeuronWallet()
diff --git a/packages/neuron-ui/src/components/WalletEditor/hooks.ts b/packages/neuron-ui/src/components/WalletEditor/hooks.ts
index ec5b0d42df..fbe82a5117 100644
--- a/packages/neuron-ui/src/components/WalletEditor/hooks.ts
+++ b/packages/neuron-ui/src/components/WalletEditor/hooks.ts
@@ -1,6 +1,6 @@
 import { useState, useMemo, useCallback } from 'react'
-import { MainActions } from '../../containers/MainContent/reducer'
-import i18n from '../../utils/i18n'
+import { MainActions } from 'containers/MainContent/reducer'
+import i18n from 'utils/i18n'
 
 export const useWalletEditor = () => {
   const [name, setName] = useState('')
diff --git a/packages/neuron-ui/src/components/WalletEditor/index.tsx b/packages/neuron-ui/src/components/WalletEditor/index.tsx
index 2c484eb627..7001898453 100644
--- a/packages/neuron-ui/src/components/WalletEditor/index.tsx
+++ b/packages/neuron-ui/src/components/WalletEditor/index.tsx
@@ -3,11 +3,11 @@ import { RouteComponentProps } from 'react-router-dom'
 import { Card, Form, Button, Col, Row } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 
-import { ContentProps } from '../../containers/MainContent'
-import InlineInput, { InputProps } from '../../widgets/InlineInput'
-import { MainActions, actionCreators } from '../../containers/MainContent/reducer'
-import { useNeuronWallet } from '../../utils/hooks'
-import Dialog from '../../widgets/Dialog'
+import { ContentProps } from 'containers/MainContent'
+import InlineInput, { InputProps } from 'widgets/InlineInput'
+import { MainActions, actionCreators } from 'containers/MainContent/reducer'
+import { useNeuronWallet } from 'utils/hooks'
+import Dialog from 'widgets/Dialog'
 
 import { useWalletEditor, useInputs, useAreParamsValid, useToggleDialog } from './hooks'
 
diff --git a/packages/neuron-ui/src/components/WalletSetting/hooks.ts b/packages/neuron-ui/src/components/WalletSetting/hooks.ts
index 6ad89665e0..b7a6bc460e 100644
--- a/packages/neuron-ui/src/components/WalletSetting/hooks.ts
+++ b/packages/neuron-ui/src/components/WalletSetting/hooks.ts
@@ -1,9 +1,9 @@
 import { useState, useCallback, useMemo } from 'react'
 import { History } from 'history'
-import { MainActions, actionCreators } from '../../containers/MainContent/reducer'
-import i18n from '../../utils/i18n'
-import { Routes } from '../../utils/const'
-import { Wallet } from '../../contexts/NeuronWallet/wallet'
+import { MainActions, actionCreators } from 'containers/MainContent/reducer'
+import i18n from 'utils/i18n'
+import { Routes } from 'utils/const'
+import { Wallet } from 'contexts/NeuronWallet/wallet'
 
 interface MenuItemParams {
   id: string
diff --git a/packages/neuron-ui/src/components/WalletSetting/index.tsx b/packages/neuron-ui/src/components/WalletSetting/index.tsx
index c75c990a35..f4f5fad3c4 100644
--- a/packages/neuron-ui/src/components/WalletSetting/index.tsx
+++ b/packages/neuron-ui/src/components/WalletSetting/index.tsx
@@ -3,14 +3,14 @@ import { Link, RouteComponentProps } from 'react-router-dom'
 import { Col, Card, Button, Row, ListGroup, Form, Container } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 
-import { Routes, MnemonicAction } from '../../utils/const'
-import { useNeuronWallet } from '../../utils/hooks'
-import { ContentProps } from '../../containers/MainContent'
-import { actionCreators } from '../../containers/MainContent/reducer'
+import { Routes, MnemonicAction } from 'utils/const'
+import { useNeuronWallet } from 'utils/hooks'
+import { ContentProps } from 'containers/MainContent'
+import { actionCreators } from 'containers/MainContent/reducer'
 
-import Dialog from '../../widgets/Dialog'
-import ListGroupWithMaxHeight from '../../widgets/ListGroupWithMaxHeight'
-import ContextMenuZone from '../../widgets/ContextMenuZone'
+import Dialog from 'widgets/Dialog'
+import ListGroupWithMaxHeight from 'widgets/ListGroupWithMaxHeight'
+import ContextMenuZone from 'widgets/ContextMenuZone'
 
 import { useToggleDialog, useDeleteWallet, useMenuItems, useWalletToDelete, useHandleConfirm } from './hooks'
 
diff --git a/packages/neuron-ui/src/components/WalletSubmission/index.tsx b/packages/neuron-ui/src/components/WalletSubmission/index.tsx
index 949d857bf7..e3cb4c3047 100644
--- a/packages/neuron-ui/src/components/WalletSubmission/index.tsx
+++ b/packages/neuron-ui/src/components/WalletSubmission/index.tsx
@@ -3,16 +3,16 @@ import { RouteComponentProps } from 'react-router-dom'
 import { Button, InputGroup, FormControl } from 'react-bootstrap'
 import { useTranslation } from 'react-i18next'
 
-import Screen from '../../widgets/Screen'
-import ScreenMessages from '../ScreenMessages'
-import ScreenButtonRow from '../../widgets/ScreenButtonRow'
+import Screen from 'widgets/Screen'
+import ScreenButtonRow from 'widgets/ScreenButtonRow'
 
-import { ContentProps } from '../../containers/MainContent'
-import { initState } from '../../containers/MainContent/state'
-import { MainActions, actionCreators } from '../../containers/MainContent/reducer'
+import { ContentProps } from 'containers/MainContent'
+import { initState } from 'containers/MainContent/state'
+import { MainActions, actionCreators } from 'containers/MainContent/reducer'
 
-import { verifyWalletSubmission } from '../../utils/validators'
-import { useNeuronWallet } from '../../utils/hooks'
+import { verifyWalletSubmission } from 'utils/validators'
+import { useNeuronWallet } from 'utils/hooks'
+import ScreenMessages from '../ScreenMessages'
 
 const inptus = [
   { label: 'password', key: 'password', type: 'password' },
diff --git a/packages/neuron-ui/src/components/WalletWizard/index.tsx b/packages/neuron-ui/src/components/WalletWizard/index.tsx
index 5c2149dfd1..6f6cf3de93 100644
--- a/packages/neuron-ui/src/components/WalletWizard/index.tsx
+++ b/packages/neuron-ui/src/components/WalletWizard/index.tsx
@@ -2,14 +2,14 @@ import React from 'react'
 import { Link } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 
-import Screen from '../../widgets/Screen'
-import ScreenMessages from '../ScreenMessages'
-import ScreenButtonRow from '../../widgets/ScreenButtonRow'
+import Screen from 'widgets/Screen'
+import ScreenButtonRow from 'widgets/ScreenButtonRow'
 
-import { Routes, MnemonicAction } from '../../utils/const'
+import { Routes, MnemonicAction } from 'utils/const'
 
-import { useNeuronWallet } from '../../utils/hooks'
-import { walletsCall } from '../../services/UILayer'
+import { useNeuronWallet } from 'utils/hooks'
+import { walletsCall } from 'services/UILayer'
+import ScreenMessages from '../ScreenMessages'
 
 const buttons = [
   { label: 'wizard.create-new-wallet', href: `${Routes.Mnemonic}/${MnemonicAction.Create}` },
diff --git a/packages/neuron-ui/src/containers/Header/index.tsx b/packages/neuron-ui/src/containers/Header/index.tsx
index 8b68784036..4a02613d0d 100644
--- a/packages/neuron-ui/src/containers/Header/index.tsx
+++ b/packages/neuron-ui/src/containers/Header/index.tsx
@@ -3,9 +3,9 @@ import { createPortal } from 'react-dom'
 import { RouteComponentProps } from 'react-router-dom'
 import styled from 'styled-components'
 
-import NetworkStatus from '../../components/NetworkStatus'
-import { useNeuronWallet } from '../../utils/hooks'
-import { networksCall } from '../../services/UILayer'
+import NetworkStatus from 'components/NetworkStatus'
+import { useNeuronWallet } from 'utils/hooks'
+import { networksCall } from 'services/UILayer'
 
 const AppHeader = styled.div`
   height: 100%;
diff --git a/packages/neuron-ui/src/containers/MainContent/actionCreators/networks.ts b/packages/neuron-ui/src/containers/MainContent/actionCreators/networks.ts
index 16dea1aac1..ba728442fb 100644
--- a/packages/neuron-ui/src/containers/MainContent/actionCreators/networks.ts
+++ b/packages/neuron-ui/src/containers/MainContent/actionCreators/networks.ts
@@ -1,9 +1,9 @@
-import { Network } from '../../../contexts/NeuronWallet'
-import { networksCall } from '../../../services/UILayer'
-import { MainActions } from '../reducer'
+import { Network } from 'contexts/NeuronWallet'
+import { networksCall } from 'services/UILayer'
 
-import { Message, MAX_NETWORK_NAME_LENGTH, UnremovableNetworkId, UnremovableNetwork } from '../../../utils/const'
-import i18n from '../../../utils/i18n'
+import { Message, MAX_NETWORK_NAME_LENGTH, UnremovableNetworkId, UnremovableNetwork } from 'utils/const'
+import i18n from 'utils/i18n'
+import { MainActions } from '../reducer'
 
 export default {
   getNetwork: (id: string) => {
diff --git a/packages/neuron-ui/src/containers/MainContent/actionCreators/transfer.ts b/packages/neuron-ui/src/containers/MainContent/actionCreators/transfer.ts
index b4c7a1f5bb..dc65cb8ad0 100644
--- a/packages/neuron-ui/src/containers/MainContent/actionCreators/transfer.ts
+++ b/packages/neuron-ui/src/containers/MainContent/actionCreators/transfer.ts
@@ -1,7 +1,7 @@
-import { sendCapacity, TransferItem } from '../../../services/UILayer'
+import { sendCapacity, TransferItem } from 'services/UILayer'
 
-import { Message } from '../../../utils/const'
-import { verifyAddress } from '../../../utils/validators'
+import { Message } from 'utils/const'
+import { verifyAddress } from 'utils/validators'
 
 import { MainActions } from '../reducer'
 
diff --git a/packages/neuron-ui/src/containers/MainContent/index.tsx b/packages/neuron-ui/src/containers/MainContent/index.tsx
index d0bcbdd182..325d9a2cf9 100644
--- a/packages/neuron-ui/src/containers/MainContent/index.tsx
+++ b/packages/neuron-ui/src/containers/MainContent/index.tsx
@@ -1,9 +1,9 @@
 import React, { useReducer, useEffect } from 'react'
 import styled from 'styled-components'
 
+import { useNeuronWallet } from 'utils/hooks'
 import { initState, reducer, MainDispatch, InitState } from './reducer'
 import MainActions from './actions'
-import { useNeuronWallet } from '../../utils/hooks'
 
 const Main = styled.main`
   display: flex;
diff --git a/packages/neuron-ui/src/containers/MainContent/reducer.ts b/packages/neuron-ui/src/containers/MainContent/reducer.ts
index 3b547bc4ea..aa34802ecf 100644
--- a/packages/neuron-ui/src/containers/MainContent/reducer.ts
+++ b/packages/neuron-ui/src/containers/MainContent/reducer.ts
@@ -1,4 +1,4 @@
-import { CapacityUnit } from '../../utils/const'
+import { CapacityUnit } from 'utils/const'
 import actionCreators from './actionCreators'
 import MainActions from './actions'
 import initState from './state'
diff --git a/packages/neuron-ui/src/containers/MainContent/state.ts b/packages/neuron-ui/src/containers/MainContent/state.ts
index 15b3ee6fda..8f0708a7e0 100644
--- a/packages/neuron-ui/src/containers/MainContent/state.ts
+++ b/packages/neuron-ui/src/containers/MainContent/state.ts
@@ -1,4 +1,4 @@
-import { CapacityUnit } from '../../utils/const'
+import { CapacityUnit } from 'utils/const'
 
 export const initState = {
   mnemonic: {
diff --git a/packages/neuron-ui/src/containers/Notification/index.tsx b/packages/neuron-ui/src/containers/Notification/index.tsx
index 13a1e0807b..976be4c2c3 100644
--- a/packages/neuron-ui/src/containers/Notification/index.tsx
+++ b/packages/neuron-ui/src/containers/Notification/index.tsx
@@ -3,8 +3,8 @@ import { createPortal } from 'react-dom'
 import dayjs from 'dayjs'
 import relativeTime from 'dayjs/plugin/relativeTime'
 
-import { useNeuronWallet } from '../../utils/hooks'
-import BannerMessages from '../../widgets/BannerMessages'
+import { useNeuronWallet } from 'utils/hooks'
+import BannerMessages from 'widgets/BannerMessages'
 
 dayjs.extend(relativeTime)
 
diff --git a/packages/neuron-ui/src/containers/Providers/index.tsx b/packages/neuron-ui/src/containers/Providers/index.tsx
index 0f43618906..c3c60e41b4 100644
--- a/packages/neuron-ui/src/containers/Providers/index.tsx
+++ b/packages/neuron-ui/src/containers/Providers/index.tsx
@@ -1,11 +1,11 @@
 import React, { useEffect, useReducer } from 'react'
 import { useTranslation } from 'react-i18next'
-import { history } from '../../components/Router'
-import NeuronWalletContext from '../../contexts/NeuronWallet'
-import { initProviders, ProviderActions, ProviderDispatch, reducer } from './reducer'
+import { history } from 'components/Router'
+import NeuronWalletContext from 'contexts/NeuronWallet'
 
-import UILayer, { NetworksMethod, TransactionsMethod, WalletsMethod } from '../../services/UILayer'
-import { Channel, ConnectStatus, Routes } from '../../utils/const'
+import UILayer, { NetworksMethod, TransactionsMethod, WalletsMethod } from 'services/UILayer'
+import { Channel, ConnectStatus, Routes } from 'utils/const'
+import { initProviders, ProviderActions, ProviderDispatch, reducer } from './reducer'
 
 const withProviders = (Comp: React.ComponentType<{ providerDispatch: ProviderDispatch }>) => (
   props: React.Props<any>,
diff --git a/packages/neuron-ui/src/containers/Providers/reducer.ts b/packages/neuron-ui/src/containers/Providers/reducer.ts
index e20b2e6684..5f7dac4910 100644
--- a/packages/neuron-ui/src/containers/Providers/reducer.ts
+++ b/packages/neuron-ui/src/containers/Providers/reducer.ts
@@ -1,4 +1,4 @@
-import { initNeuronWallet } from '../../contexts/NeuronWallet'
+import { initNeuronWallet } from 'contexts/NeuronWallet'
 
 export enum ProviderActions {
   Initiate = 'initiate',
diff --git a/packages/neuron-ui/src/containers/Sidebar/index.tsx b/packages/neuron-ui/src/containers/Sidebar/index.tsx
index f759e39037..fd0e7b4b7c 100644
--- a/packages/neuron-ui/src/containers/Sidebar/index.tsx
+++ b/packages/neuron-ui/src/containers/Sidebar/index.tsx
@@ -12,8 +12,8 @@ import {
 } from 'grommet-icons'
 import { useTranslation } from 'react-i18next'
 
-import { useNeuronWallet } from '../../utils/hooks'
-import { Routes } from '../../utils/const'
+import { useNeuronWallet } from 'utils/hooks'
+import { Routes } from 'utils/const'
 
 const SidebarAside = styled.nav`
   display: flex;
diff --git a/packages/neuron-ui/src/contexts/NeuronWallet/chain.ts b/packages/neuron-ui/src/contexts/NeuronWallet/chain.ts
index 586c14d516..6ff17df71a 100644
--- a/packages/neuron-ui/src/contexts/NeuronWallet/chain.ts
+++ b/packages/neuron-ui/src/contexts/NeuronWallet/chain.ts
@@ -1,5 +1,5 @@
-import { ConnectStatus, TransactionType } from '../../utils/const'
-import { RawNetwork } from '../../components/NetworkEditor'
+import { RawNetwork } from 'components/NetworkEditor'
+import { ConnectStatus, TransactionType } from 'utils/const'
 
 export interface Transaction {
   type: TransactionType
diff --git a/packages/neuron-ui/src/contexts/NeuronWallet/messages.ts b/packages/neuron-ui/src/contexts/NeuronWallet/messages.ts
index d4c99d6c96..d12a1be321 100644
--- a/packages/neuron-ui/src/contexts/NeuronWallet/messages.ts
+++ b/packages/neuron-ui/src/contexts/NeuronWallet/messages.ts
@@ -1,4 +1,4 @@
-import { Message } from '../../widgets/BannerMessages'
+import { Message } from 'widgets/BannerMessages'
 
 const messagesState = [] as Message[]
 
diff --git a/packages/neuron-ui/src/index.tsx b/packages/neuron-ui/src/index.tsx
index bda9a7cf3e..d5e6d9838c 100755
--- a/packages/neuron-ui/src/index.tsx
+++ b/packages/neuron-ui/src/index.tsx
@@ -1,9 +1,9 @@
 import React from 'react'
 import ReactDOM from 'react-dom'
-import './styles/index.scss'
-import './utils/i18n'
-import App from './components/App'
-import * as serviceWorker from './serviceWorker'
+import 'styles/index.scss'
+import 'utils/i18n'
+import App from 'components/App'
+import * as serviceWorker from 'serviceWorker'
 
 ReactDOM.render(<App />, document.getElementById('root'))
 
diff --git a/packages/neuron-ui/src/services/Terminal.ts b/packages/neuron-ui/src/services/Terminal.ts
index 407e438656..334042bdbe 100644
--- a/packages/neuron-ui/src/services/Terminal.ts
+++ b/packages/neuron-ui/src/services/Terminal.ts
@@ -1,5 +1,5 @@
+import { Channel } from 'utils/const'
 import UILayer from './UILayer'
-import { Channel } from '../utils/const'
 
 const TerminalChannel = {
   on: (cb: Function) => UILayer.on(Channel.Terminal, cb),
diff --git a/packages/neuron-ui/src/services/UILayer.ts b/packages/neuron-ui/src/services/UILayer.ts
index f6a1715bfa..f2fd4c8069 100644
--- a/packages/neuron-ui/src/services/UILayer.ts
+++ b/packages/neuron-ui/src/services/UILayer.ts
@@ -1,9 +1,9 @@
-import { Network } from '../contexts/NeuronWallet'
-import { RawNetwork } from '../components/NetworkEditor'
+import { Network } from 'contexts/NeuronWallet'
+import { RawNetwork } from 'components/NetworkEditor'
 
-import { CapacityUnit, Channel } from '../utils/const'
-import SyntheticEventEmitter from '../utils/SyntheticEventEmitter'
-import instantiateMethodCall from '../utils/instantiateMethodCall'
+import { CapacityUnit, Channel } from 'utils/const'
+import SyntheticEventEmitter from 'utils/SyntheticEventEmitter'
+import instantiateMethodCall from 'utils/instantiateMethodCall'
 
 declare global {
   interface Window {
diff --git a/packages/neuron-ui/src/utils/hooks.ts b/packages/neuron-ui/src/utils/hooks.ts
index 23e13d41b0..a079b3820c 100644
--- a/packages/neuron-ui/src/utils/hooks.ts
+++ b/packages/neuron-ui/src/utils/hooks.ts
@@ -1,5 +1,5 @@
 import { useEffect, useContext } from 'react'
-import NeuronWalletContext from '../contexts/NeuronWallet'
+import NeuronWalletContext from 'contexts/NeuronWallet'
 
 export const useFullscreen = (fullscreen: boolean) => {
   useEffect(() => {
diff --git a/packages/neuron-ui/src/utils/i18n.ts b/packages/neuron-ui/src/utils/i18n.ts
index 09f453c972..d6dcad385b 100644
--- a/packages/neuron-ui/src/utils/i18n.ts
+++ b/packages/neuron-ui/src/utils/i18n.ts
@@ -1,7 +1,7 @@
 import i18n from 'i18next'
 import { initReactI18next } from 'react-i18next'
-import zh from '../locales/zh'
-import en from '../locales/en'
+import zh from 'locales/zh'
+import en from 'locales/en'
 
 i18n.use(initReactI18next).init({
   resources: {
diff --git a/packages/neuron-ui/src/widgets/QRScanner/index.tsx b/packages/neuron-ui/src/widgets/QRScanner/index.tsx
index c94cd0a77c..46f83afc4c 100644
--- a/packages/neuron-ui/src/widgets/QRScanner/index.tsx
+++ b/packages/neuron-ui/src/widgets/QRScanner/index.tsx
@@ -4,8 +4,8 @@ import { Scan as ScanIcon } from 'grommet-icons'
 import { useTranslation } from 'react-i18next'
 import jsQR from 'jsqr'
 
+import { drawPolygon } from 'utils/canvasActions'
 import Dialog from '../Dialog'
-import { drawPolygon } from '../../utils/canvasActions'
 
 interface QRScannerProps {
   title: string
diff --git a/packages/neuron-ui/tsconfig.json b/packages/neuron-ui/tsconfig.json
index 682ebe3e44..fb114937bd 100644
--- a/packages/neuron-ui/tsconfig.json
+++ b/packages/neuron-ui/tsconfig.json
@@ -1,5 +1,6 @@
 {
   "compilerOptions": {
+    "baseUrl": "./src",
     "lib": [
       "dom",
       "dom.iterable",
diff --git a/packages/neuron-wallet/package.json b/packages/neuron-wallet/package.json
index edd64f8a67..7a00506668 100644
--- a/packages/neuron-wallet/package.json
+++ b/packages/neuron-wallet/package.json
@@ -20,8 +20,20 @@
     "test": "jest --color",
     "lint": "eslint 'src/**/*.{js,ts}'",
     "package": "./script/package.sh",
+    "precommit": "lint-staged",
     "rebuild:nativemodules": "electron-builder install-app-deps"
   },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "src/**/*.ts": [
+      "eslint --fix",
+      "git add"
+    ]
+  },
   "jest": {
     "displayName": "electron",
     "testRegex": "(/tests/.*.(test|spec))\\.(ts?|js?)$",
@@ -68,6 +80,8 @@
     "electron": "4.1.4",
     "electron-builder": "20.38.5",
     "electron-devtools-installer": "^2.2.4",
+    "husky": "^1.3.1",
+    "lint-staged": "^8.1.5",
     "rimraf": "^2.6.3",
     "spectron": "^5.0.0"
   }
diff --git a/yarn.lock b/yarn.lock
index 91867bd5c3..d19a880690 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6014,7 +6014,7 @@ eslint-plugin-prettier@^3.0.1:
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
-eslint-plugin-react-hooks@^1.5.0, eslint-plugin-react-hooks@^1.6.0:
+eslint-plugin-react-hooks@^1.5.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-1.6.0.tgz#348efcda8fb426399ac7b8609607c7b4025a6f5f"
   integrity sha512-lHBVRIaz5ibnIgNG07JNiAuBUeKhEf8l4etNx5vfAEwqQ5tcuK3jV9yjmopPgQDagQb7HwIuQVsE3IVcGrRnag==