Skip to content

Commit b58f4db

Browse files
author
Jimmy Chu
authored
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
1 parent 0e0eecf commit b58f4db

33 files changed

+6453
-8141
lines changed

‎.circleci/config.yml

+10-10
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,13 @@
55

66
aliases:
77
- &filter-non-gh-pages
8-
branches:
9-
ignore:
10-
- gh-pages
8+
branches:
9+
ignore:
10+
- gh-pages
1111
- &filter-only-master
12-
branches:
13-
only:
14-
- master
12+
branches:
13+
only:
14+
- master
1515

1616
version: 2
1717
jobs:
@@ -37,16 +37,16 @@ jobs:
3737
- node_modules
3838
key: v1-dependencies-{{ checksum "package.json" }}
3939
- run:
40-
name: Syntax Lint
41-
command: yarn lint:ci
40+
name: Prettier check
41+
command: yarn prettier:check
4242
- run:
4343
name: Test
4444
command: yarn test
4545
- persist_to_workspace:
4646
# relative to working_directory
47-
root: "./"
47+
root: './'
4848
paths:
49-
- "./"
49+
- './'
5050

5151
deploy:
5252
docker:

‎.gitignore

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ node_modules
22
.vscode
33
**/.DS_Store
44
build
5-
.eslintcache
5+
coverage
66
# Setting for non zero-installs (https://yarnpkg.com/getting-started/qa#which-files-should-be-gitignored)
77
.yarn/*
88
!.yarn/releases

‎.nvmrc

+1-1
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
lts/fermium
1+
lts/gallium

‎.prettierignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.vscode
3+
**/.DS_Store
4+
build
5+
coverage

‎.yarn/releases/yarn-3.1.1.cjs

+768
Large diffs are not rendered by default.

‎.yarn/releases/yarn-berry.cjs

-631
This file was deleted.

‎.yarnrc.yml

+1-1
Original file line numberDiff line numberDiff line change
@@ -4,4 +4,4 @@ plugins:
44
- path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
55
spec: "@yarnpkg/plugin-interactive-tools"
66

7-
yarnPath: .yarn/releases/yarn-berry.cjs
7+
yarnPath: .yarn/releases/yarn-3.1.1.cjs

‎README.md

+30-30
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
This template allows you to create a front-end application that connects to a
44
[Substrate](https://github.com/paritytech/substrate) node back-end with minimal
55
configuration. To learn about Substrate itself, visit the
6-
[Substrate Developer Hub](https://substrate.dev).
6+
[Substrate Documentation](https://docs.substrate.io).
77

88
The template is built with [Create React App](https://github.com/facebook/create-react-app)
99
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.
1313

1414
### Installation
1515

16-
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.
16+
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.
1717

1818
```bash
1919
# Clone the repository
@@ -35,6 +35,7 @@ You can also build the app in production mode,
3535
```bash
3636
yarn build
3737
```
38+
3839
and open `build/index.html` in your favorite browser.
3940

4041
## Configuration
@@ -43,71 +44,70 @@ The template's configuration is stored in the `src/config` directory, with
4344
`common.json` being loaded first, then the environment-specific json file,
4445
and finally environment variables, with precedence.
4546

46-
* `development.json` affects the development environment
47-
* `test.json` affects the test environment, triggered in `yarn test` command.
48-
* `production.json` affects the production environment, triggered in
49-
`yarn build` command.
47+
- `development.json` affects the development environment
48+
- `test.json` affects the test environment, triggered in `yarn test` command.
49+
- `production.json` affects the production environment, triggered in
50+
`yarn build` command.
5051

5152
Some environment variables are read and integrated in the template `config` object,
5253
including:
5354

54-
* `REACT_APP_PROVIDER_SOCKET` overriding `config[PROVIDER_SOCKET]`
55-
* `REACT_APP_DEVELOPMENT_KEYRING` overriding `config[DEVELOPMENT_KEYRING]`
55+
- `REACT_APP_PROVIDER_SOCKET` overriding `config[PROVIDER_SOCKET]`
56+
- `REACT_APP_DEVELOPMENT_KEYRING` overriding `config[DEVELOPMENT_KEYRING]`
5657

5758
More on [React environment variables](https://create-react-app.dev/docs/adding-custom-environment-variables).
5859

5960
When writing and deploying your own front end, you should configure:
6061

61-
* Custom types as JSON in `src/config/types.json`. See
62-
[Extending types](https://polkadot.js.org/docs/api/start/types.extend).
63-
* `PROVIDER_SOCKET` in `src/config/production.json` pointing to your own
62+
- `PROVIDER_SOCKET` in `src/config/production.json` pointing to your own
6463
deployed node.
65-
* `DEVELOPMENT_KEYRING` in `src/config/common.json` be set to `false`.
64+
- `DEVELOPMENT_KEYRING` in `src/config/common.json` be set to `false`.
6665
See [Keyring](https://polkadot.js.org/docs/api/start/keyring).
6766

6867
### Specifying Connecting Node
6968

7069
There are two ways to specify it:
7170

72-
* With `PROVIDER_SOCKET` in `{common, development, production}.json`.
73-
* With `rpc=<ws or wss connection>` query paramter after the URL. This overrides the above setting.
71+
- With `PROVIDER_SOCKET` in `{common, development, production}.json`.
72+
- With `rpc=<ws or wss connection>` query paramter after the URL. This overrides the above setting.
7473

7574
## Reusable Components
7675

7776
### useSubstrate Custom Hook
7877

79-
The custom hook `useSubstrate` provides access to the Polkadot js API and thus the
78+
The custom hook `useSubstrate()` provides access to the Polkadot js API and thus the
8079
keyring and the blockchain itself. Specifically it exposes this API.
8180

8281
```js
8382
{
84-
socket,
85-
types,
86-
keyring,
87-
keyringState,
88-
api,
89-
apiState,
83+
setCurrentAccount: func(acct) {...}
84+
state: {
85+
socket,
86+
keyring,
87+
keyringState,
88+
api,
89+
apiState,
90+
currentAccount
91+
}
9092
}
9193
```
9294

9395
- `socket` - The remote provider socket it is connecting to.
94-
- `types` - The custom types used in the connected node.
9596
- `keyring` - A keyring of accounts available to the user.
9697
- `keyringState` - One of `"READY"` or `"ERROR"` states. `keyring` is valid
97-
only when `keyringState === "READY"`.
98+
only when `keyringState === "READY"`.
9899
- `api` - The remote api to the connected node.
99100
- `apiState` - One of `"CONNECTING"`, `"READY"`, or `"ERROR"` states. `api` is valid
100-
only when `apiState === "READY"`.
101+
only when `apiState === "READY"`.
102+
- `currentAccount` - The current selected account pair in the application context.
103+
- `setCurrentAccount` - Function to update the `currentAccount` value in the application context.
101104

105+
If you are only interested in reading the `state`, there is a shorthand `useSubstrateState()` just to retrieve the state.
102106

103107
### TxButton Component
104108

105-
The [TxButton](./src/substrate-lib/components/TxButton.js) handles basic
106-
[query](https://polkadot.js.org/docs/api/start/api.query) and
107-
[transaction](https://polkadot.js.org/docs/api/start/api.tx) requests to the
108-
connected node. You can reuse this component for a wide variety of queries and
109-
transactions. See [src/Transfer.js](./src/Transfer.js) for a transaction example
110-
and [src/ChainState.js](./src/ChainState.js) for a query example.
109+
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.
110+
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.
111111

112112
### Account Selector
113113

‎config-overrides.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')
2+
3+
module.exports = function override(config, env) {
4+
config.resolve = {
5+
fallback: {
6+
stream: require.resolve('stream-browserify'),
7+
},
8+
}
9+
config.plugins.push(new NodePolyfillPlugin())
10+
return config
11+
}

‎package.json

+28-35
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "substrate-front-end-template",
3-
"version": "0.1.1",
3+
"version": "monthly-2022-01",
44
"private": true,
55
"author": "Parity Technologies <[email protected]>",
66
"license": "Unlicense",
@@ -14,44 +14,39 @@
1414
"polkadot-js"
1515
],
1616
"scripts": {
17-
"start": "react-scripts start",
18-
"build": "react-scripts build",
19-
"test": "CI=true react-scripts test",
17+
"start": "react-app-rewired start",
18+
"build": "react-app-rewired build",
19+
"test": "CI=true react-app-rewired test",
2020
"eject": "react-scripts eject",
21-
"lint": "eslint src/**/*.js",
22-
"lint:ci": "eslint src/**/*.js --max-warnings=0",
23-
"lint:fix": "eslint --fix src/**/*.js",
21+
"prettier:check": "prettier -c src/*",
22+
"prettier:write": "prettier -w src/*",
2423
"deploy": "gh-pages -d build -m '[ci skip] Updates'"
2524
},
2625
"dependencies": {
27-
"@polkadot/api": "^6.7.2",
28-
"@polkadot/extension-dapp": "^0.41.1",
29-
"@polkadot/keyring": "^7.8.2",
30-
"@polkadot/networks": "^7.8.2",
31-
"@polkadot/types": "^6.7.2",
32-
"@polkadot/ui-keyring": "^0.86.5",
33-
"@polkadot/ui-settings": "^0.86.5",
34-
"@polkadot/util": "^7.8.2",
35-
"@polkadot/util-crypto": "^7.8.2",
26+
"@polkadot/api": "^7.3.1",
27+
"@polkadot/extension-dapp": "^0.42.5",
28+
"@polkadot/keyring": "^8.3.1",
29+
"@polkadot/networks": "^8.3.1",
30+
"@polkadot/types": "^7.3.1",
31+
"@polkadot/ui-keyring": "^0.89.1",
32+
"@polkadot/ui-settings": "^0.89.1",
33+
"@polkadot/util": "^8.3.1",
34+
"@polkadot/util-crypto": "^8.3.1",
35+
"node-polyfill-webpack-plugin": "^1.1.4",
3636
"prop-types": "^15.7.2",
37-
"query-string": "^7.0.1",
3837
"react": "^17.0.2",
3938
"react-copy-to-clipboard": "^5.0.4",
4039
"react-dom": "^17.0.2",
41-
"react-scripts": "^4.0.3",
42-
"semantic-ui-css": "^2.4.1",
43-
"semantic-ui-react": "^2.0.3"
40+
"react-scripts": "^5.0.0",
41+
"semantic-ui-css": "Semantic-Org/Semantic-UI-CSS#master",
42+
"semantic-ui-react": "^2.0.4",
43+
"stream-browserify": "^3.0.0"
4444
},
4545
"devDependencies": {
46-
"eslint": "^7.32.0",
47-
"eslint-config-react-app": "^6.0.0",
48-
"eslint-config-semistandard": "^16.0.0",
49-
"eslint-config-standard": "^16.0.3",
50-
"eslint-plugin-import": "^2.25.3",
51-
"eslint-plugin-node": "^11.1.0",
52-
"eslint-plugin-only-warn": "^1.0.3",
53-
"eslint-plugin-promise": "^5.1.1",
46+
"eslint-config-prettier": "^8.3.0",
5447
"gh-pages": "^3.2.3",
48+
"prettier": "2.5.1",
49+
"react-app-rewired": "^2.1.11",
5550
"semistandard": "^16.0.0"
5651
},
5752
"resolutions": {
@@ -60,15 +55,12 @@
6055
"eslintConfig": {
6156
"extends": [
6257
"react-app",
63-
"semistandard"
64-
],
65-
"plugins": [
66-
"only-warn"
58+
"prettier"
6759
]
6860
},
6961
"engines": {
70-
"node": ">=14",
71-
"npm": ">=7"
62+
"node": ">=16",
63+
"npm": ">=8"
7264
},
7365
"browserslist": {
7466
"production": [
@@ -81,5 +73,6 @@
8173
"last 1 firefox version",
8274
"last 1 safari version"
8375
]
84-
}
76+
},
77+
"packageManager": "[email protected]"
8578
}

‎public/assets/main.css

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
11
.github-fork-ribbon.right-bottom:before {
2-
background-color: #222
2+
background-color: #222;
33
}

‎public/index.html

+12-2
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,10 @@
2121
-->
2222

2323
<!-- github ribbon style: https://github.com/simonwhitaker/github-fork-ribbon-css -->
24-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css" />
24+
<link
25+
rel="stylesheet"
26+
href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.2.3/gh-fork-ribbon.min.css"
27+
/>
2528
<link rel="stylesheet" href="%PUBLIC_URL%/assets/main.css" />
2629
<title>Substrate Front End Template</title>
2730
</head>
@@ -38,6 +41,13 @@
3841
To begin the development, run `npm start` or `yarn start`.
3942
To create a production bundle, use `npm run build` or `yarn build`.
4043
-->
41-
<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>
44+
<a
45+
class="github-fork-ribbon right-bottom fixed"
46+
target="_blank"
47+
href="https://github.com/substrate-developer-hub/substrate-front-end-template"
48+
data-ribbon="Fork me on GitHub"
49+
title="Fork me on GitHub"
50+
>Fork me on GitHub</a
51+
>
4252
</body>
4353
</html>

0 commit comments

Comments
 (0)