Fix PoE tutorial

.circleci/config.yml

@@ -5,19 +5,19 @@
 
 aliases:
   - &filter-non-gh-pages
-      branches:
-        ignore:
-          - gh-pages
-  - &filter-only-master
-      branches:
-        only:
-          - master
+    branches:
+      ignore:
+        - gh-pages
+  - &filter-only-main
+    branches:
+      only:
+        - main
 
 version: 2
 jobs:
   test:
     docker:
-      - image: cimg/node:14.16
+      - image: cimg/node:16.14
     working_directory: ~/repo
     steps:
       - checkout
@@ -37,20 +37,20 @@ jobs:
             - node_modules
           key: v1-dependencies-{{ checksum "package.json" }}
       - run:
-          name: Syntax Lint
-          command: yarn lint:ci
+          name: ESLint / Prettier check
+          command: yarn eslint:check && yarn prettier:check
       - run:
           name: Test
           command: yarn test
       - persist_to_workspace:
           # relative to working_directory
-          root: "./"
+          root: './'
           paths:
-            - "./"
+            - './'
 
   deploy:
     docker:
-      - image: cimg/node:14.16
+      - image: cimg/node:16.14
     working_directory: ~/repo
     steps:
       - attach_workspace:
@@ -72,6 +72,6 @@ workflows:
       - test:
           filters: *filter-non-gh-pages
       - deploy:
-          filters: *filter-only-master
+          filters: *filter-only-main
           requires:
             - test

.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,17 +3,17 @@
 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/api/). Familiarity with these tools
+and [Polkadot js API](https://polkadot.js.org/docs/api/). Familiarity with these tools
 will be helpful, but the template strives to be self-explanatory.
 
 ## Using The Template
 
 ### 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
@@ -22,7 +22,7 @@ cd substrate-front-end-template
 yarn install
 ```
 
-## Usage
+### Usage
 
 You can start the template in development mode to connect to a locally running node
 
@@ -35,82 +35,111 @@ You can also build the app in production mode,
 ```bash
 yarn build
 ```
+
 and open `build/index.html` in your favorite browser.
 
+### Try the Hosted Version
+
+Connecting to Polkadot:<br/>
+https://substrate-developer-hub.github.io/substrate-front-end-template?rpc=wss://rpc.polkadot.io
+
+Connecting to your local Substrate node (Chrome and Firefox only):<br/>
+https://substrate-developer-hub.github.io/substrate-front-end-template?rpc=ws://localhost:9944
+
+Connecting to the development Substrate node `wss://dev-node.substrate.dev`:<br/>
+https://substrate-developer-hub.github.io/substrate-front-end-template
+
+
 ## Configuration
 
 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]`
 
 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/api/start/types.extend.html).
-* `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`.
-  See [Keyring](https://polkadot.js.org/api/start/keyring.html).
 
-### Specifying Connecting Node
+### Specifying Connecting WebSocket
 
 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 parameter 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/api/start/api.query.html) and
-[transaction](https://polkadot.js.org/api/start/api.tx.html) 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
 
 The [Account Selector](./src/AccountSelector.js) provides the user with a unified way to
 select their account from a keyring. If the Balances module is installed in the runtime,
 it also displays the user's token balance. It is included in the template already.
+
+## Miscellaneous
+
+- Polkadot-js API and related crypto libraries depend on [`BigInt`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt) that is only supported by modern browsers. To ensure that react-scripts properly transpile your webapp code, update the `package.json` file:
+
+  ```json
+  {
+    "browserslist": {
+      "production": [
+        ">0.2%",
+        "not ie <= 99",
+        "not android <= 4.4.4",
+        "not dead",
+        "not op_mini all"
+      ]
+    }
+  }
+  ```
+
+  Refer to [this doc page](https://github.com/vacp2p/docs.wakuconnect.dev/blob/develop/content/docs/guides/07_reactjs_relay.md).

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,65 +14,64 @@
     "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",
+    "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'"
   },
   "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",
-    "prop-types": "^15.7.2",
-    "query-string": "^7.0.1",
+    "@polkadot/api": "^7.10.1",
+    "@polkadot/extension-dapp": "^0.42.7",
+    "@polkadot/keyring": "^8.4.1",
+    "@polkadot/networks": "^8.4.1",
+    "@polkadot/types": "^7.10.1",
+    "@polkadot/ui-keyring": "^1.1.1",
+    "@polkadot/ui-settings": "^1.1.1",
+    "@polkadot/util": "^8.4.1",
+    "@polkadot/util-crypto": "^8.4.1",
+    "node-polyfill-webpack-plugin": "^1.1.4",
+    "prop-types": "^15.8.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.1.2",
+    "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": "^8.10.0",
+    "eslint-config-prettier": "^8.4.0",
+    "eslint-config-react-app": "^7.0.0",
     "gh-pages": "^3.2.3",
-    "semistandard": "^16.0.0"
+    "prettier": "2.5.1",
+    "react-app-rewired": "^2.2.1",
+    "semistandard": "^16.0.1"
   },
   "resolutions": {
-    "eslint-plugin-jsx-a11y": "6.4.1"
+    "eslint-plugin-jsx-a11y": "6.5.1"
   },
   "eslintConfig": {
     "extends": [
       "react-app",
-      "semistandard"
-    ],
-    "plugins": [
-      "only-warn"
+      "eslint:recommended",
+      "prettier"
     ]
   },
   "engines": {
-    "node": ">=14",
-    "npm": ">=7"
+    "node": ">=16",
+    "npm": ">=8"
   },
   "browserslist": {
     "production": [
       ">0.2%",
+      "not ie <= 99",
+      "not android <= 4.4.4",
       "not dead",
       "not op_mini all"
     ],
@@ -81,5 +80,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "packageManager": "yarn@3.1.1"
 }

public/assets/main.css

@@ -1,3 +1,8 @@
 .github-fork-ribbon.right-bottom:before {
-  background-color: #222
+  background-color: #666;
+}
+
+.ui.statistic.block_number > .value {
+  font-size: 2.4rem !important;
+  line-height: 4rem !important;
 }