Update configuration with cra3

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",

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
   }
 }

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"
   }

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 = [
   {

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} />

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'

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 {

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;

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',

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 {

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,

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 {

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;

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: {

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

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',

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 },

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 {

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

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()

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">

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()

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('')