Merge pull request #6 from AcalaNetwork/bump

Bump

.eslintrc.json

@@ -17,5 +17,10 @@
     "sourceType": "module"
   },
   "plugins": ["react", "@typescript-eslint"],
-  "rules": {}
+  "rules": {},
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
 }

package.json

@@ -7,23 +7,21 @@
     "build": "craco build",
     "test": "craco test",
     "eject": "react-scripts eject",
-    "eslint": "eslint {public,src}/**/*.{js,jsx,ts,tsx}",
-    "prettier": "prettier --check {public,src}/**/*.{js,jsx,ts,tsx,htm,html,json,xml,yml,css,scss,sass,less,webmanifest,svg}",
-    "prettier:fix": "prettier --write {public,src}/**/*.{js,jsx,ts,tsx,htm,html,json,xml,yml,css,scss,sass,less,webmanifest,svg}"
+    "eslint": "eslint src/**/*.{ts,tsx}",
+    "prettier": "prettier --check src/**/*.{ts,tsx,json,css,less}",
+    "prettier:fix": "prettier --write src/**/*.{ts,tsx,json,css,less}"
+  },
+  "resolutions": {
+    "@polkadot/types": "^6.12.1",
+    "@polkadot/util": "^8.2.2",
+    "@polkadot/util-crypto": "^8.2.2"
   },
   "dependencies": {
     "@ant-design/icons": "^4.6.4",
-    "@craco/craco": "^6.3.0",
-    "@polkadot/api": "^6.4.2",
-    "@polkadot/apps-config": "^0.97.1",
-    "@polkadot/util": "^7.5.1",
-    "@testing-library/jest-dom": "^5.11.4",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
-    "@types/jest": "^26.0.15",
-    "@types/node": "^12.0.0",
-    "@types/react": "^17.0.0",
-    "@types/react-dom": "^17.0.0",
+    "@craco/craco": "^6.4.3",
+    "@polkadot/api": "^6.12.1",
+    "@polkadot/apps-config": "^0.98.2-162",
+    "@polkadot/util": "^8.2.2",
     "antd": "^4.16.13",
     "craco-antd": "^1.19.0",
     "moment": "^2.29.1",
@@ -41,15 +39,21 @@
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "@types/jest": "^26.0.15",
+    "@types/node": "^12.0.0",
+    "@types/react": "^17.0.0",
     "@types/react-copy-to-clipboard": "^5.0.1",
+    "@types/react-dom": "^17.0.0",
     "@types/react-router-dom": "^5.1.8",
     "@types/webfontloader": "^1.6.33",
-    "@typescript-eslint/eslint-plugin": "^4.31.0",
-    "@typescript-eslint/parser": "^4.31.0",
-    "eslint": "^7.32.0",
+    "@typescript-eslint/eslint-plugin": "^5.7.0",
+    "@typescript-eslint/parser": "^5.7.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-react": "^7.25.1",
-    "prettier": "^2.4.0"
+    "eslint-plugin-react": "^7.27.1",
+    "prettier": "^2.5.1"
   },
   "eslintConfig": {
     "extends": [
@@ -59,14 +63,17 @@
   },
   "browserslist": {
     "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
     ],
     "development": [
       "last 1 chrome version",
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "prettier": {
+    "semi": false
   }
 }

src/components/Config/Configuration.tsx

@@ -1,5 +1,14 @@
 import React, { ReactNode, useContext, useState } from "react"
-import { Button, Divider, message, Row, Space, Switch, Table } from "antd"
+import {
+  Button,
+  Divider,
+  message,
+  Row,
+  Space,
+  Switch,
+  Table,
+  Popconfirm,
+} from "antd"
 import "./Configuration.less"
 import { useAppDispatch, useAppSelector } from "../../store/hooks"
 import {
@@ -9,9 +18,15 @@ import {
   deleteEndpoint,
   setUtcTime,
   toggleEndpoint,
+  resetConfig,
 } from "../../store/actions/configActions"
 import { PolkadotNetwork, RPCEndpoint } from "../../types"
-import { CheckOutlined, DeleteOutlined, PlusOutlined } from "@ant-design/icons"
+import {
+  CheckOutlined,
+  DeleteOutlined,
+  PlusOutlined,
+  UndoOutlined,
+} from "@ant-design/icons"
 import AddEndpointModal from "./AddEndpointModal"
 import { ApiContext, ApiContextData } from "../utils/ApiProvider"
 import AddNetworkModal from "./AddNetworkModal"
@@ -22,7 +37,7 @@ function Configuration(): React.ReactElement {
   const [showAddNetworkModal, setShowAddNetworkModal] = useState(false)
   const [showAddEndpointModal, setShowAddEndpointModal] = useState(false)
   const [networkChosenToAdd, setNetworkChosenToAdd] = useState("")
-  const config = useAppSelector(state => state.config)
+  const config = useAppSelector((state) => state.config)
 
   const onUtcChange = (checked: boolean) => {
     dispatch(setUtcTime(checked))
@@ -33,7 +48,7 @@ function Configuration(): React.ReactElement {
       <>
         {text}
         {row.hostedBy ? (
-          <span className='hosted-by-label'> - {row.hostedBy}</span>
+          <span className="hosted-by-label"> - {row.hostedBy}</span>
         ) : (
           ""
         )}
@@ -72,12 +87,17 @@ function Configuration(): React.ReactElement {
     deleteNetworkConnection(networkName)
   }
 
+  const handleResetConfig = () => {
+    dispatch(resetConfig())
+    setTimeout(() => location.reload(), 100)
+  }
+
   const renderNetworkToggle = (row: PolkadotNetwork) => {
     return (
       <Switch
         checked={row.enabled}
-        checkedChildren='Enabled'
-        unCheckedChildren='Disabled'
+        checkedChildren="Enabled"
+        unCheckedChildren="Disabled"
         onChange={() => {
           if (row.networkName === config?.selectedNetwork?.networkName) {
             message.warning("Can't disable the selected network")
@@ -93,24 +113,26 @@ function Configuration(): React.ReactElement {
     return (
       <Space>
         <Button
-          type='default'
+          type="default"
           danger
-          size='small'
+          size="small"
           icon={<DeleteOutlined />}
           onClick={() => handleDeleteNetwork(row)}
-          disabled={row.networkName === config?.selectedNetwork?.networkName}>
+          disabled={row.networkName === config?.selectedNetwork?.networkName}
+        >
           Delete
         </Button>
         {config?.selectedNetwork?.networkName === row.networkName ? (
-          <Button type='primary' size='small' icon={<CheckOutlined />}>
+          <Button type="primary" size="small" icon={<CheckOutlined />}>
             Default
           </Button>
         ) : (
           <Button
-            type='default'
+            type="default"
             onClick={() => handleSelectNetwork(row)}
-            size='small'
-            disabled={!row.enabled}>
+            size="small"
+            disabled={!row.enabled}
+          >
             Select as default
           </Button>
         )}
@@ -141,10 +163,11 @@ function Configuration(): React.ReactElement {
     const renderAddEndpointHeader = (): ReactNode => {
       return (
         <Button
-          className='add-endpoint-button'
-          type='default'
+          className="add-endpoint-button"
+          type="default"
           onClick={() => handleAddEndpoint(row.networkName)}
-          icon={<PlusOutlined />}>
+          icon={<PlusOutlined />}
+        >
           Add endpoint
         </Button>
       )
@@ -157,7 +180,7 @@ function Configuration(): React.ReactElement {
         dataSource={row.endpoints}
         pagination={false}
         title={renderAddEndpointHeader}
-        rowKey='value'
+        rowKey="value"
       />
     )
   }
@@ -169,11 +192,11 @@ function Configuration(): React.ReactElement {
     return (
       <Switch
         checked={endpoint.enabled}
-        checkedChildren='Enabled'
-        unCheckedChildren='Disabled'
+        checkedChildren="Enabled"
+        unCheckedChildren="Disabled"
         onChange={() => {
           const enabledList = network.endpoints.filter(
-            auxEndpoint => auxEndpoint.enabled
+            (auxEndpoint) => auxEndpoint.enabled
           )
           if (
             enabledList.length === 1 &&
@@ -195,13 +218,13 @@ function Configuration(): React.ReactElement {
     return (
       <Space>
         <Button
-          type='default'
+          type="default"
           danger
-          size='small'
+          size="small"
           icon={<DeleteOutlined />}
           onClick={() => {
             const enabledList = network.endpoints.filter(
-              auxEndpoint => auxEndpoint.enabled
+              (auxEndpoint) => auxEndpoint.enabled
             )
             if (
               enabledList.length === 1 &&
@@ -211,7 +234,8 @@ function Configuration(): React.ReactElement {
               return
             }
             handleDeleteEndpoint(network.networkName, endpoint)
-          }}>
+          }}
+        >
           Delete
         </Button>
       </Space>
@@ -237,47 +261,62 @@ function Configuration(): React.ReactElement {
   ]
 
   return (
-    <div className='configuration-container'>
-      <Row align='middle'>
+    <div className="configuration-container">
+      <Row align="middle">
         <Space>
-          <h2 className='mb-0'>Transform to UTC Time:</h2>
+          <h2 className="mb-0">Transform to UTC Time:</h2>
           <Switch
             checked={config.utcTime}
             onChange={onUtcChange}
-            checkedChildren='Yes'
-            unCheckedChildren='No'
+            checkedChildren="Yes"
+            unCheckedChildren="No"
           />
         </Space>
       </Row>
-      <label htmlFor='utcSwitch'>
+      <label htmlFor="utcSwitch">
         {config.utcTime
           ? "Displaying all datetime with UTC format"
           : "Displaying all datetime in local timezone"}
       </label>
       <Divider />
       <div>
-        <h2 className='mb-1'>Networks:</h2>
+        <h2 className="mb-1">Networks:</h2>
         <div>
           Currently Selected is{" "}
-          <span className='highlight-endpoint'>
+          <span className="highlight-endpoint">
             {config.selectedNetwork?.networkName}
           </span>
         </div>
-        <Row className='my-3'>
+        <Row className="my-3">
           <Button
-            className='add-network-button'
-            type='default'
+            className="add-network-button"
+            type="default"
             onClick={handleAddNetwork}
-            icon={<PlusOutlined />}>
+            icon={<PlusOutlined />}
+          >
             Add network
           </Button>
+          <Popconfirm
+            title="Are you sure you want to reset network configuration?"
+            onConfirm={handleResetConfig}
+            okText="Reset"
+            okType="danger"
+          >
+            <Button
+              className="add-network-button"
+              type="default"
+              icon={<UndoOutlined />}
+            >
+              Reset Config
+            </Button>
+          </Popconfirm>
         </Row>
         <Table
-          className='networks-table'
+          className="networks-table"
           dataSource={config.networks}
           columns={columns}
           expandable={{ expandedRowRender: renderExpandedRow }}
-          rowKey='networkName'
+          rowKey="networkName"
         />
       </div>
       <AddNetworkModal