feat(common): eslint waring adjust

.eslintrc

@@ -11,7 +11,7 @@
     "plugin:prettier/recommended"
   ],
   "rules": {
-    "quotes": [1, "single"],
+    "quotes": [1, "single", "avoid-escape"],
     "@typescript-eslint/explicit-module-boundary-types": "off",
     "@typescript-eslint/no-explicit-any": "off",
     "@typescript-eslint/no-non-null-assertion": "off"

README.md

@@ -6,52 +6,52 @@
 
 ## 2. extension's scripts
 
-below scripts live in different context!
+below 4 scripts all live in different context!
 
-- `background.js`
+### **- `background.js`**
 
-  for all async request and encrypt things.
+for all async request and encrypt things.
 
-  user's keyrings, password and wallet personal preference data all stored in chrome local storage.
+user's keyrings, password and wallet personal preference data all stored in chrome local storage.
 
-  it has 2 main controllers:
+it has 2 main controllers:
 
-  - `walletController`
+1. `walletController`
 
-    it expose methods to background window, so other scripts can access these methods with `runtime.getBackgroundPage`, like `ui`.
+   it expose methods to background window, so other scripts can access these methods with `runtime.getBackgroundPage`, e.g. `ui.js`.
 
-  - `providerController`
+2. `providerController`
 
-    it handles request from pages(dapp request).
+   it handles request from pages(dapp request).
 
-- `content-script`
+### **- `content-script`**
 
-  injected at `document_start`, share the same dom with dapp, use `broadcastChannel` to tap `pageProvider`.
+injected at `document_start`, share the same dom with dapp, use `broadcastChannel` to tap `pageProvider`.
 
-  the main purpose is inject `pageProvider.js` and pass messages between `pageProvider.js` and `background.js`.
+the main purpose is inject `pageProvider.js` and pass messages between `pageProvider.js` and `background.js`.
 
-- `pageProvider.js`
+### **- `pageProvider.js`**
 
-  this script is injected into dapp's context through content-script. it mounts `ethereum` to `window`.
+this script is injected into dapp's context through `content-script`. it mounts `ethereum` to `window`.
 
-  when dapp use `window.ethereum` to request, it will send message to `content-script` with `broadcastChannel` and wait for it's response.
+when dapp use `window.ethereum` to request, it will send message to `content-script` with `broadcastChannel` and wait for it's response.
 
-  then the `content-script` will send message to `background` with `runtime.connect`.
+then the `content-script` will send message to `background` with `runtime.connect`.
 
-  after `background` receive the message, it will use `providerController` to handle the request. and keep the message channel in `sessionSevice` for later communicate.
+after `background` receive the message, it will use `providerController` to handle the request. and keep the message channel in `sessionSevice` for later communicate.
 
-- `ui`
+### **- `ui`**
 
-  it has 3 pages, all share the same js code, but the template html is different for respective purpose.
+it's used by 3 pages which share the same js code, but the template html is different for respective purpose.
 
-  - `notification.html`
+1. `notification.html`
 
-    triggered by dapp to request user's permission.
+   triggered by dapp to request user's permission.
 
-  - `index.html`
+2. `index.html`
 
-    opened in browser tab for better user interaction experience.
+   opened in browser tab for better user interaction experience.
 
-  - `popup.html`
+3. `popup.html`
 
-    user click the extension icon on the right of address bar, the popup will show.
+   user click the extension icon on the right of address bar, the popup will show.

src/background/service/keyring/eth-hd-keyring.ts

@@ -4,7 +4,7 @@ import * as bip39 from 'bip39';
 import * as sigUtil from 'eth-sig-util';
 
 // Options:
-const hdPathString = `m/44'/60'/0'/0`;
+const hdPathString = "m/44'/60'/0'/0";
 const type = 'HD Key Tree';
 
 interface DeserializeOption {

src/background/service/keyring/eth-trezor-keyring.ts

@@ -6,7 +6,7 @@ import Transaction from 'ethereumjs-tx';
 import HDKey from 'hdkey';
 import TrezorConnect from 'trezor-connect';
 
-const hdPathString = `m/44'/60'/0'/0`;
+const hdPathString = "m/44'/60'/0'/0";
 const keyringType = 'Trezor Hardware';
 const pathBase = 'm';
 const MAX_INDEX = 1000;

src/background/service/keyring/eth-watch-keyring.ts

@@ -35,7 +35,7 @@ class WatchKeyring extends EventEmitter {
       return;
     }
     if (this.accounts.includes(this.accountToAdd)) {
-      throw new Error(`The account you're are trying to import is a duplicate`);
+      throw new Error("The account you're are trying to import is a duplicate");
     }
 
     this.accounts.push(this.accountToAdd);

src/ui/component/AddressList/AddressItem.tsx

@@ -88,11 +88,11 @@ const AddressItem = ({
     >
       <div>
         <div className="address-info">
-          <Spin spinning={balance === null}>
-            <span className="balance">
+          <span className="balance">
+            <Spin size="small">
               ${splitNumberByStep((balance || 0).toFixed(2))}
-            </span>
-          </Spin>
+            </Spin>
+          </span>
           <AddressViewer
             address={account}
             showArrow={false}

src/ui/component/Spin.tsx

@@ -1,18 +1,24 @@
 import React, { ReactNode } from 'react';
-import { Spin } from 'antd';
+import { Spin, SpinProps as AntdSpinProps } from 'antd';
 import { LoadingOutlined } from '@ant-design/icons';
 
-const antIcon = <LoadingOutlined style={{ fontSize: 24 }} spin />;
+const antIcon = <LoadingOutlined style={{ fontSize: 14 }} spin />;
 
 interface SpinProps {
   children?: ReactNode;
-  spinning: boolean;
+  spinning?: boolean;
   className?: string;
+  size?: AntdSpinProps['size'];
 }
 
-export default ({ children, spinning, className }: SpinProps) => {
+export default ({ children, spinning = true, className, size }: SpinProps) => {
   return (
-    <Spin indicator={antIcon} spinning={spinning} wrapperClassName={className}>
+    <Spin
+      indicator={antIcon}
+      spinning={spinning}
+      wrapperClassName={className}
+      size={size}
+    >
       {children}
     </Spin>
   );

src/ui/views/CreatePassword.tsx

@@ -4,7 +4,7 @@ import { StrayPageWithButton } from 'ui/component';
 import { Input, Form } from 'antd';
 import { useWallet } from 'ui/utils';
 
-const MIN_PASSWORD_LENGTH = 3;
+const MIN_PASSWORD_LENGTH = 8;
 
 const CreatePassword = () => {
   const history = useHistory();

src/ui/views/ImportHardware/LedgerHdPath.tsx

@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import { StrayPageWithButton, FieldCheckbox, Spin } from 'ui/component';
+import { StrayPageWithButton, FieldCheckbox } from 'ui/component';
 import { useWallet } from 'ui/utils';
 
-const LEDGER_LIVE_PATH = `m/44'/60'/0'/0/0`;
-const MEW_PATH = `m/44'/60'/0'`;
-export const BIP44_PATH = `m/44'/60'/0'/0`;
+const LEDGER_LIVE_PATH = "m/44'/60'/0'/0/0";
+const MEW_PATH = "m/44'/60'/0'";
+export const BIP44_PATH = "m/44'/60'/0'/0";
 
 const HD_PATHS = [
   { name: 'Ledger Live', value: LEDGER_LIVE_PATH },

src/ui/views/ImportJson.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Input, Form } from 'antd';
-import { useLocation, useHistory } from 'react-router-dom';
+import { useHistory } from 'react-router-dom';
 import { StrayPageWithButton, Uploader } from 'ui/component';
 import { useWallet } from 'ui/utils';
 

src/ui/views/ImportMode.tsx

@@ -3,8 +3,6 @@ import { useHistory } from 'react-router-dom';
 import { StrayPageWithButton, FieldCheckbox } from 'ui/component';
 import { useWallet } from 'ui/utils';
 import { KEYRING_CLASS } from 'background/service/keyring';
-import IconChecked from 'ui/assets/checked.svg';
-import IconNotChecked from 'ui/assets/not-checked.svg';
 
 const ImportMode = () => {
   const history = useHistory();

src/ui/views/SortHat.tsx

@@ -2,21 +2,20 @@ import React from 'react';
 import { useEffect, useState } from 'react';
 import { Redirect } from 'react-router-dom';
 import { useWallet, getUiType, useApproval } from 'ui/utils';
-import { Account } from 'background/service/preference';
+import { Spin } from 'ui/component';
 
 const SortHat = () => {
   const wallet = useWallet();
   const [to, setTo] = useState('');
   // eslint-disable-next-line prefer-const
-  let [approval, _, rejectApproval] = useApproval();
+  let [approval, , rejectApproval] = useApproval();
 
   const loadView = async () => {
     const isInNotification = getUiType().isNotification;
-    const isBooted = wallet.isBooted();
-    const isUnlocked = wallet.isUnlocked();
-    let currentAccount: Account | null = null;
-    if (isUnlocked) {
-      currentAccount = await wallet.getCurrentAccount();
+
+    if (isInNotification && !approval) {
+      window.close();
+      return;
     }
 
     if (!isInNotification) {
@@ -26,13 +25,19 @@ const SortHat = () => {
       approval = undefined;
     }
 
-    if (isInNotification && !approval) {
-      window.close();
-    } else if (!isBooted) {
+    if (!wallet.isBooted()) {
       setTo('/password');
-    } else if (!isUnlocked) {
+      return;
+    }
+
+    if (!wallet.isUnlocked()) {
       setTo('/unlock');
-    } else if (!currentAccount) {
+      return;
+    }
+
+    const currentAccount = await wallet.getCurrentAccount();
+
+    if (!currentAccount) {
       setTo('/no-address');
     } else if (approval) {
       setTo('/approval');
@@ -45,7 +50,11 @@ const SortHat = () => {
     loadView();
   }, []);
 
-  return to ? <Redirect to={to} /> : null;
+  return (
+    <Spin spinning={!to}>
+      <Redirect to={to} />
+    </Spin>
+  );
 };
 
 export default SortHat;

src/ui/views/Unlock/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useState } from 'react';
-import { Input, Button, Form } from 'antd';
+import { Input, Form } from 'antd';
 import { useWallet, useApproval } from 'ui/utils';
 import { StrayPageWithButton } from 'ui/component';
 
@@ -45,7 +45,7 @@ const Unlock = () => {
           validateStatus={error ? 'error' : undefined}
           help={error}
         >
-          <Input placeholder="Password" size="large" />
+          <Input type="password" placeholder="Password" size="large" />
         </Form.Item>
       </StrayPageWithButton>
     </div>