Multiple fixes (monthly-2022-01 tag) (#225)

* Remove the traces on custom type and update to based on Node v16

* webpack 5 migration

* Rm eslint related dev-dependencies & use URLSearchParams over querystring

* Updated to the latest polkadot-js libs

* Integrate with prettier

* Friendlier connection failure message.

* Refactored current selected account into SubstrateContext

* bugfix

* Fix console warning

* Update README

* Update to solve a yarn berry issue

.circleci/config.yml

@@ -5,13 +5,13 @@
 
 aliases:
   - &filter-non-gh-pages
-      branches:
-        ignore:
-          - gh-pages
+    branches:
+      ignore:
+        - gh-pages
   - &filter-only-master
-      branches:
-        only:
-          - master
+    branches:
+      only:
+        - master
 
 version: 2
 jobs:
@@ -37,16 +37,16 @@ jobs:
             - node_modules
           key: v1-dependencies-{{ checksum "package.json" }}
       - run:
-          name: Syntax Lint
-          command: yarn lint:ci
+          name: Prettier check
+          command: yarn prettier:check
       - run:
           name: Test
           command: yarn test
       - persist_to_workspace:
           # relative to working_directory
-          root: "./"
+          root: './'
           paths:
-            - "./"
+            - './'
 
   deploy:
     docker:

.gitignore

@@ -2,7 +2,7 @@ node_modules
 .vscode
 **/.DS_Store
 build
-.eslintcache
+coverage
 # Setting for non zero-installs (https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored)
 .yarn/*
 !.yarn/releases

.nvmrc

@@ -1 +1 @@
-lts/fermium
+lts/gallium

.prettierignore

@@ -0,0 +1,5 @@
+node_modules
+.vscode
+**/.DS_Store
+build
+coverage

.yarnrc.yml

@@ -4,4 +4,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
     spec: "@yarnpkg/plugin-interactive-tools"
 
-yarnPath: .yarn/releases/yarn-berry.cjs
+yarnPath: .yarn/releases/yarn-3.1.1.cjs

README.md

@@ -3,7 +3,7 @@
 This template allows you to create a front-end application that connects to a
 [Substrate](https://github.com/paritytech/substrate) node back-end with minimal
 configuration. To learn about Substrate itself, visit the
-[Substrate Developer Hub](https://substrate.dev).
+[Substrate Documentation](https://docs.substrate.io).
 
 The template is built with [Create React App](https://github.com/facebook/create-react-app)
 and [Polkadot js API](https://polkadot.js.org/docs/api/). Familiarity with these tools
@@ -13,7 +13,7 @@ will be helpful, but the template strives to be self-explanatory.
 
 ### Installation
 
-The codebase is installed using [git](https://git-scm.com/) and [yarn](https://yarnpkg.com/). This tutorial assumes you have installed yarn globally prior to installing it within the subdirectories. For the most recent version and how to install yarn, please refer to [yarn](https://yarnpkg.com/) documentation and installation guides. 
+The codebase is installed using [git](https://git-scm.com/) and [yarn](https://yarnpkg.com/). This tutorial assumes you have installed yarn globally prior to installing it within the subdirectories. For the most recent version and how to install yarn, please refer to [yarn](https://yarnpkg.com/) documentation and installation guides.
 
 ```bash
 # Clone the repository
@@ -35,6 +35,7 @@ You can also build the app in production mode,
 ```bash
 yarn build
 ```
+
 and open `build/index.html` in your favorite browser.
 
 ## Configuration
@@ -43,71 +44,70 @@ The template's configuration is stored in the `src/config` directory, with
 `common.json` being loaded first, then the environment-specific json file,
 and finally environment variables, with precedence.
 
-* `development.json` affects the development environment
-* `test.json` affects the test environment, triggered in `yarn test` command.
-* `production.json` affects the production environment, triggered in
-`yarn build` command.
+- `development.json` affects the development environment
+- `test.json` affects the test environment, triggered in `yarn test` command.
+- `production.json` affects the production environment, triggered in
+  `yarn build` command.
 
 Some environment variables are read and integrated in the template `config` object,
 including:
 
-* `REACT_APP_PROVIDER_SOCKET` overriding `config[PROVIDER_SOCKET]`
-* `REACT_APP_DEVELOPMENT_KEYRING` overriding `config[DEVELOPMENT_KEYRING]`
+- `REACT_APP_PROVIDER_SOCKET` overriding `config[PROVIDER_SOCKET]`
+- `REACT_APP_DEVELOPMENT_KEYRING` overriding `config[DEVELOPMENT_KEYRING]`
 
 More on [React environment variables](https://create-react-app.dev/docs/adding-custom-environment-variables).
 
 When writing and deploying your own front end, you should configure:
 
-* Custom types as JSON in `src/config/types.json`. See
-  [Extending types](https://polkadot.js.org/docs/api/start/types.extend).
-* `PROVIDER_SOCKET` in `src/config/production.json` pointing to your own
+- `PROVIDER_SOCKET` in `src/config/production.json` pointing to your own
   deployed node.
-* `DEVELOPMENT_KEYRING` in `src/config/common.json` be set to `false`.
+- `DEVELOPMENT_KEYRING` in `src/config/common.json` be set to `false`.
   See [Keyring](https://polkadot.js.org/docs/api/start/keyring).
 
 ### Specifying Connecting Node
 
 There are two ways to specify it:
 
-* With `PROVIDER_SOCKET` in `{common, development, production}.json`.
-* With `rpc=<ws or wss connection>` query paramter after the URL. This overrides the above setting.
+- With `PROVIDER_SOCKET` in `{common, development, production}.json`.
+- With `rpc=<ws or wss connection>` query paramter after the URL. This overrides the above setting.
 
 ## Reusable Components
 
 ### useSubstrate Custom Hook
 
-The custom hook `useSubstrate` provides access to the Polkadot js API and thus the
+The custom hook `useSubstrate()` provides access to the Polkadot js API and thus the
 keyring and the blockchain itself. Specifically it exposes this API.
 
 ```js
 {
-  socket,
-  types,
-  keyring,
-  keyringState,
-  api,
-  apiState,
+  setCurrentAccount: func(acct) {...}
+  state: {
+    socket,
+    keyring,
+    keyringState,
+    api,
+    apiState,
+    currentAccount
+  }
 }
 ```
 
 - `socket` - The remote provider socket it is connecting to.
-- `types` - The custom types used in the connected node.
 - `keyring` - A keyring of accounts available to the user.
 - `keyringState` - One of `"READY"` or `"ERROR"` states. `keyring` is valid
-only when `keyringState === "READY"`.
+  only when `keyringState === "READY"`.
 - `api` - The remote api to the connected node.
 - `apiState` - One of `"CONNECTING"`, `"READY"`, or `"ERROR"` states. `api` is valid
-only when `apiState === "READY"`.
+  only when `apiState === "READY"`.
+- `currentAccount` - The current selected account pair in the application context.
+- `setCurrentAccount` - Function to update the `currentAccount` value in the application context.
 
+If you are only interested in reading the `state`, there is a shorthand `useSubstrateState()` just to retrieve the state.
 
 ### TxButton Component
 
-The [TxButton](./src/substrate-lib/components/TxButton.js) handles basic
-[query](https://polkadot.js.org/docs/api/start/api.query) and
-[transaction](https://polkadot.js.org/docs/api/start/api.tx) requests to the
-connected node. You can reuse this component for a wide variety of queries and
-transactions. See [src/Transfer.js](./src/Transfer.js) for a transaction example
-and [src/ChainState.js](./src/ChainState.js) for a query example.
+The [TxButton](./src/substrate-lib/components/TxButton.js) handles basic [query](https://polkadot.js.org/docs/api/start/api.query) and [transaction](https://polkadot.js.org/docs/api/start/api.tx) requests to the connected node.
+You can reuse this component for a wide variety of queries and transactions. See [src/Transfer.js](./src/Transfer.js) for a transaction example and [src/Balances.js](./src/ChainState.js) for a query example.
 
 ### Account Selector
 

config-overrides.js

@@ -0,0 +1,11 @@
+const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
+
+module.exports = function override(config, env) {
+  config.resolve = {
+    fallback: {
+      stream: require.resolve('stream-browserify'),
+    },
+  }
+  config.plugins.push(new NodePolyfillPlugin())
+  return config
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "substrate-front-end-template",
-  "version": "0.1.1",
+  "version": "monthly-2022-01",
   "private": true,
   "author": "Parity Technologies <admin@parity.io>",
   "license": "Unlicense",
@@ -14,44 +14,39 @@
     "polkadot-js"
   ],
   "scripts": {
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "CI=true react-scripts test",
+    "start": "react-app-rewired start",
+    "build": "react-app-rewired build",
+    "test": "CI=true react-app-rewired test",
     "eject": "react-scripts eject",
-    "lint": "eslint src/**/*.js",
-    "lint:ci": "eslint src/**/*.js --max-warnings=0",
-    "lint:fix": "eslint --fix src/**/*.js",
+    "prettier:check": "prettier -c src/*",
+    "prettier:write": "prettier -w src/*",
     "deploy": "gh-pages -d build -m '[ci skip] Updates'"
   },
   "dependencies": {
-    "@polkadot/api": "^6.7.2",
-    "@polkadot/extension-dapp": "^0.41.1",
-    "@polkadot/keyring": "^7.8.2",
-    "@polkadot/networks": "^7.8.2",
-    "@polkadot/types": "^6.7.2",
-    "@polkadot/ui-keyring": "^0.86.5",
-    "@polkadot/ui-settings": "^0.86.5",
-    "@polkadot/util": "^7.8.2",
-    "@polkadot/util-crypto": "^7.8.2",
+    "@polkadot/api": "^7.3.1",
+    "@polkadot/extension-dapp": "^0.42.5",
+    "@polkadot/keyring": "^8.3.1",
+    "@polkadot/networks": "^8.3.1",
+    "@polkadot/types": "^7.3.1",
+    "@polkadot/ui-keyring": "^0.89.1",
+    "@polkadot/ui-settings": "^0.89.1",
+    "@polkadot/util": "^8.3.1",
+    "@polkadot/util-crypto": "^8.3.1",
+    "node-polyfill-webpack-plugin": "^1.1.4",
     "prop-types": "^15.7.2",
-    "query-string": "^7.0.1",
     "react": "^17.0.2",
     "react-copy-to-clipboard": "^5.0.4",
     "react-dom": "^17.0.2",
-    "react-scripts": "^4.0.3",
-    "semantic-ui-css": "^2.4.1",
-    "semantic-ui-react": "^2.0.3"
+    "react-scripts": "^5.0.0",
+    "semantic-ui-css": "Semantic-Org/Semantic-UI-CSS#master",
+    "semantic-ui-react": "^2.0.4",
+    "stream-browserify": "^3.0.0"
   },
   "devDependencies": {
-    "eslint": "^7.32.0",
-    "eslint-config-react-app": "^6.0.0",
-    "eslint-config-semistandard": "^16.0.0",
-    "eslint-config-standard": "^16.0.3",
-    "eslint-plugin-import": "^2.25.3",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-only-warn": "^1.0.3",
-    "eslint-plugin-promise": "^5.1.1",
+    "eslint-config-prettier": "^8.3.0",
     "gh-pages": "^3.2.3",
+    "prettier": "2.5.1",
+    "react-app-rewired": "^2.1.11",
     "semistandard": "^16.0.0"
   },
   "resolutions": {
@@ -60,15 +55,12 @@
   "eslintConfig": {
     "extends": [
       "react-app",
-      "semistandard"
-    ],
-    "plugins": [
-      "only-warn"
+      "prettier"
     ]
   },
   "engines": {
-    "node": ">=14",
-    "npm": ">=7"
+    "node": ">=16",
+    "npm": ">=8"
   },
   "browserslist": {
     "production": [
@@ -81,5 +73,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "packageManager": "yarn@3.1.1"
 }

public/assets/main.css

@@ -1,3 +1,3 @@
 .github-fork-ribbon.right-bottom:before {
-  background-color: #222
+  background-color: #222;
 }

public/index.html

@@ -21,7 +21,10 @@
     -->
 
     <!-- github ribbon style: https://github.com/simonwhitaker/github-fork-ribbon-css -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css"
+    />
     <link rel="stylesheet" href="%PUBLIC_URL%/assets/main.css" />
     <title>Substrate Front End Template</title>
   </head>
@@ -38,6 +41,13 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-    <a class="github-fork-ribbon right-bottom fixed" target='_blank' href="https://github.com/substrate-developer-hub/substrate-front-end-template" data-ribbon="Fork me on GitHub" title="Fork me on GitHub">Fork me on GitHub</a>
+    <a
+      class="github-fork-ribbon right-bottom fixed"
+      target="_blank"
+      href="https://github.com/substrate-developer-hub/substrate-front-end-template"
+      data-ribbon="Fork me on GitHub"
+      title="Fork me on GitHub"
+      >Fork me on GitHub</a
+    >
   </body>
 </html>