TxButton enhancement & general packages maintenance (jimmychu0807#239)

* dev (wip)

* Using prettier and added eslint for project

* Using the latest package without changing package.json

Author: jimmychu0807

.circleci/config.yml

@@ -17,7 +17,7 @@ version: 2
 jobs:
   test:
     docker:
-      - image: cimg/node:16.4
+      - image: cimg/node:16.14
     working_directory: ~/repo
     steps:
       - checkout
@@ -37,8 +37,8 @@ jobs:
             - node_modules
           key: v1-dependencies-{{ checksum "package.json" }}
       - run:
-          name: Prettier check
-          command: yarn prettier:check
+          name: ESLint / Prettier check
+          command: yarn eslint:check && yarn prettier:check
       - run:
           name: Test
           command: yarn test
@@ -50,7 +50,7 @@ jobs:
 
   deploy:
     docker:
-      - image: cimg/node:16.4
+      - image: cimg/node:16.14
     working_directory: ~/repo
     steps:
       - attach_workspace:

package.json

@@ -18,6 +18,8 @@
     "build": "react-app-rewired build",
     "test": "CI=true react-app-rewired test",
     "eject": "react-scripts eject",
+    "eslint:check": "eslint --ext .jsx,.js src/",
+    "eslint:write": "eslint --fix --ext .jsx,.js src/",
     "prettier:check": "prettier -c src/*",
     "prettier:write": "prettier -w src/*",
     "deploy": "gh-pages -d build -m '[ci skip] Updates'"
@@ -43,7 +45,9 @@
     "stream-browserify": "^3.0.0"
   },
   "devDependencies": {
+    "eslint": "^8.10.0",
     "eslint-config-prettier": "^8.4.0",
+    "eslint-config-react-app": "^7.0.0",
     "gh-pages": "^3.2.3",
     "prettier": "2.5.1",
     "react-app-rewired": "^2.2.1",
@@ -55,6 +59,7 @@
   "eslintConfig": {
     "extends": [
       "react-app",
+      "eslint:recommended",
       "prettier"
     ]
   },

src/substrate-lib/components/TxButton.js

@@ -7,13 +7,14 @@ import { useSubstrateState } from '../'
 import utils from '../utils'
 
 function TxButton({
+  attrs = null,
+  color = 'blue',
+  disabled = false,
   label,
   setStatus,
-  color = 'blue',
   style = null,
   type = 'QUERY',
-  attrs = null,
-  disabled = false,
+  txOnClickHandler = null,
 }) {
   // Hooks
   const { api, currentAccount } = useSubstrateState()
@@ -158,13 +159,21 @@ function TxButton({
     }
 
     setStatus('Sending...')
-    ;(isSudo() && sudoTx()) ||
-      (isUncheckedSudo() && uncheckedSudoTx()) ||
-      (isSigned() && signedTx()) ||
-      (isUnsigned() && unsignedTx()) ||
-      (isQuery() && query()) ||
-      (isRpc() && rpc()) ||
-      (isConstant() && constant())
+
+    const asyncFunc =
+      (isSudo() && sudoTx) ||
+      (isUncheckedSudo() && uncheckedSudoTx) ||
+      (isSigned() && signedTx) ||
+      (isUnsigned() && unsignedTx) ||
+      (isQuery() && query) ||
+      (isRpc() && rpc) ||
+      (isConstant() && constant)
+
+    await asyncFunc()
+
+    return txOnClickHandler && typeof txOnClickHandler === 'function'
+      ? txOnClickHandler(unsub)
+      : null
   }
 
   const transformParams = (