Skip to content

Commit 3966da4

Browse files
00hello00hello
committed
Updated LICENSE and README
1 parent e36c75d commit 3966da4

3 files changed

Lines changed: 165 additions & 164 deletions

File tree

‎LICENSE‎

Lines changed: 17 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,21 @@
1-
This is free and unencumbered software released into the public domain.
1+
MIT License
22

3-
Anyone is free to copy, modify, publish, use, compile, sell, or
4-
distribute this software, either in source code form or as a compiled
5-
binary, for any purpose, commercial or non-commercial, and by any
6-
means.
3+
Copyright (c) 2022 Grassland
74

8-
In jurisdictions that recognize copyright laws, the author or authors
9-
of this software dedicate any and all copyright interest in the
10-
software to the public domain. We make this dedication for the benefit
11-
of the public at large and to the detriment of our heirs and
12-
successors. We intend this dedication to be an overt act of
13-
relinquishment in perpetuity of all present and future rights to this
14-
software under copyright law.
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
1511

16-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17-
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
18-
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
19-
IN NO EVENT SHALL THE AUTHORS BE LIABLE FOR ANY CLAIM, DAMAGES OR
20-
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
21-
ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
22-
OTHER DEALINGS IN THE SOFTWARE.
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
2314

24-
For more information, please refer to <http://unlicense.org>
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md‎

Lines changed: 3 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -1,145 +1,4 @@
1-
# Substrate Front End Template
1+
# substrate_node_front_end
2+
A Polkadot.js API + React Front End to the Grassland Substrate Node
23

3-
This template allows you to create a front-end application that connects to a
4-
[Substrate](https://github.com/paritytech/substrate) node back-end with minimal
5-
configuration. To learn about Substrate itself, visit the
6-
[Substrate Documentation](https://docs.substrate.io).
7-
8-
The template is built with [Create React App](https://github.com/facebook/create-react-app)
9-
and [Polkadot js API](https://polkadot.js.org/docs/api/). Familiarity with these tools
10-
will be helpful, but the template strives to be self-explanatory.
11-
12-
## Using The Template
13-
14-
### Installation
15-
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.
17-
18-
```bash
19-
# Clone the repository
20-
git clone https://github.com/substrate-developer-hub/substrate-front-end-template.git
21-
cd substrate-front-end-template
22-
yarn install
23-
```
24-
25-
### Usage
26-
27-
You can start the template in development mode to connect to a locally running node
28-
29-
```bash
30-
yarn start
31-
```
32-
33-
You can also build the app in production mode,
34-
35-
```bash
36-
yarn build
37-
```
38-
39-
and open `build/index.html` in your favorite browser.
40-
41-
### Try the Hosted Version
42-
43-
Connecting to Polkadot:<br/>
44-
https://substrate-developer-hub.github.io/substrate-front-end-template?rpc=wss://rpc.polkadot.io
45-
46-
Connecting to your local Substrate node (Chrome and Firefox only):<br/>
47-
https://substrate-developer-hub.github.io/substrate-front-end-template?rpc=ws://localhost:9944
48-
49-
Connecting to the development Substrate node `wss://dev-node.substrate.dev`:<br/>
50-
https://substrate-developer-hub.github.io/substrate-front-end-template
51-
52-
53-
## Configuration
54-
55-
The template's configuration is stored in the `src/config` directory, with
56-
`common.json` being loaded first, then the environment-specific json file,
57-
and finally environment variables, with precedence.
58-
59-
- `development.json` affects the development environment
60-
- `test.json` affects the test environment, triggered in `yarn test` command.
61-
- `production.json` affects the production environment, triggered in
62-
`yarn build` command.
63-
64-
Some environment variables are read and integrated in the template `config` object,
65-
including:
66-
67-
- `REACT_APP_PROVIDER_SOCKET` overriding `config[PROVIDER_SOCKET]`
68-
69-
More on [React environment variables](https://create-react-app.dev/docs/adding-custom-environment-variables).
70-
71-
When writing and deploying your own front end, you should configure:
72-
73-
- `PROVIDER_SOCKET` in `src/config/production.json` pointing to your own
74-
deployed node.
75-
76-
### Specifying Connecting WebSocket
77-
78-
There are two ways to specify it:
79-
80-
- With `PROVIDER_SOCKET` in `{common, development, production}.json`.
81-
- With `rpc=<ws or wss connection>` query parameter after the URL. This overrides the above setting.
82-
83-
## Reusable Components
84-
85-
### useSubstrate Custom Hook
86-
87-
The custom hook `useSubstrate()` provides access to the Polkadot js API and thus the
88-
keyring and the blockchain itself. Specifically it exposes this API.
89-
90-
```js
91-
{
92-
setCurrentAccount: func(acct) {...}
93-
state: {
94-
socket,
95-
keyring,
96-
keyringState,
97-
api,
98-
apiState,
99-
currentAccount
100-
}
101-
}
102-
```
103-
104-
- `socket` - The remote provider socket it is connecting to.
105-
- `keyring` - A keyring of accounts available to the user.
106-
- `keyringState` - One of `"READY"` or `"ERROR"` states. `keyring` is valid
107-
only when `keyringState === "READY"`.
108-
- `api` - The remote api to the connected node.
109-
- `apiState` - One of `"CONNECTING"`, `"READY"`, or `"ERROR"` states. `api` is valid
110-
only when `apiState === "READY"`.
111-
- `currentAccount` - The current selected account pair in the application context.
112-
- `setCurrentAccount` - Function to update the `currentAccount` value in the application context.
113-
114-
If you are only interested in reading the `state`, there is a shorthand `useSubstrateState()` just to retrieve the state.
115-
116-
### TxButton Component
117-
118-
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.
119-
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.
120-
121-
### Account Selector
122-
123-
The [Account Selector](./src/AccountSelector.js) provides the user with a unified way to
124-
select their account from a keyring. If the Balances module is installed in the runtime,
125-
it also displays the user's token balance. It is included in the template already.
126-
127-
## Miscellaneous
128-
129-
- 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:
130-
131-
```json
132-
{
133-
"browserslist": {
134-
"production": [
135-
">0.2%",
136-
"not ie <= 99",
137-
"not android <= 4.4.4",
138-
"not dead",
139-
"not op_mini all"
140-
]
141-
}
142-
}
143-
```
144-
145-
Refer to [this doc page](https://github.com/vacp2p/docs.wakuconnect.dev/blob/develop/content/docs/guides/07_reactjs_relay.md).
4+
See "docs" directory for Substrate Front End template documentation

‎docs/README.md‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
# Substrate Front End Template
2+
3+
This template allows you to create a front-end application that connects to a
4+
[Substrate](https://github.com/paritytech/substrate) node back-end with minimal
5+
configuration. To learn about Substrate itself, visit the
6+
[Substrate Documentation](https://docs.substrate.io).
7+
8+
The template is built with [Create React App](https://github.com/facebook/create-react-app)
9+
and [Polkadot js API](https://polkadot.js.org/docs/api/). Familiarity with these tools
10+
will be helpful, but the template strives to be self-explanatory.
11+
12+
## Using The Template
13+
14+
### Installation
15+
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.
17+
18+
```bash
19+
# Clone the repository
20+
git clone https://github.com/substrate-developer-hub/substrate-front-end-template.git
21+
cd substrate-front-end-template
22+
yarn install
23+
```
24+
25+
### Usage
26+
27+
You can start the template in development mode to connect to a locally running node
28+
29+
```bash
30+
yarn start
31+
```
32+
33+
You can also build the app in production mode,
34+
35+
```bash
36+
yarn build
37+
```
38+
39+
and open `build/index.html` in your favorite browser.
40+
41+
### Try the Hosted Version
42+
43+
Connecting to Polkadot:<br/>
44+
https://substrate-developer-hub.github.io/substrate-front-end-template?rpc=wss://rpc.polkadot.io
45+
46+
Connecting to your local Substrate node (Chrome and Firefox only):<br/>
47+
https://substrate-developer-hub.github.io/substrate-front-end-template?rpc=ws://localhost:9944
48+
49+
Connecting to the development Substrate node `wss://dev-node.substrate.dev`:<br/>
50+
https://substrate-developer-hub.github.io/substrate-front-end-template
51+
52+
53+
## Configuration
54+
55+
The template's configuration is stored in the `src/config` directory, with
56+
`common.json` being loaded first, then the environment-specific json file,
57+
and finally environment variables, with precedence.
58+
59+
- `development.json` affects the development environment
60+
- `test.json` affects the test environment, triggered in `yarn test` command.
61+
- `production.json` affects the production environment, triggered in
62+
`yarn build` command.
63+
64+
Some environment variables are read and integrated in the template `config` object,
65+
including:
66+
67+
- `REACT_APP_PROVIDER_SOCKET` overriding `config[PROVIDER_SOCKET]`
68+
69+
More on [React environment variables](https://create-react-app.dev/docs/adding-custom-environment-variables).
70+
71+
When writing and deploying your own front end, you should configure:
72+
73+
- `PROVIDER_SOCKET` in `src/config/production.json` pointing to your own
74+
deployed node.
75+
76+
### Specifying Connecting WebSocket
77+
78+
There are two ways to specify it:
79+
80+
- With `PROVIDER_SOCKET` in `{common, development, production}.json`.
81+
- With `rpc=<ws or wss connection>` query parameter after the URL. This overrides the above setting.
82+
83+
## Reusable Components
84+
85+
### useSubstrate Custom Hook
86+
87+
The custom hook `useSubstrate()` provides access to the Polkadot js API and thus the
88+
keyring and the blockchain itself. Specifically it exposes this API.
89+
90+
```js
91+
{
92+
setCurrentAccount: func(acct) {...}
93+
state: {
94+
socket,
95+
keyring,
96+
keyringState,
97+
api,
98+
apiState,
99+
currentAccount
100+
}
101+
}
102+
```
103+
104+
- `socket` - The remote provider socket it is connecting to.
105+
- `keyring` - A keyring of accounts available to the user.
106+
- `keyringState` - One of `"READY"` or `"ERROR"` states. `keyring` is valid
107+
only when `keyringState === "READY"`.
108+
- `api` - The remote api to the connected node.
109+
- `apiState` - One of `"CONNECTING"`, `"READY"`, or `"ERROR"` states. `api` is valid
110+
only when `apiState === "READY"`.
111+
- `currentAccount` - The current selected account pair in the application context.
112+
- `setCurrentAccount` - Function to update the `currentAccount` value in the application context.
113+
114+
If you are only interested in reading the `state`, there is a shorthand `useSubstrateState()` just to retrieve the state.
115+
116+
### TxButton Component
117+
118+
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.
119+
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.
120+
121+
### Account Selector
122+
123+
The [Account Selector](./src/AccountSelector.js) provides the user with a unified way to
124+
select their account from a keyring. If the Balances module is installed in the runtime,
125+
it also displays the user's token balance. It is included in the template already.
126+
127+
## Miscellaneous
128+
129+
- 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:
130+
131+
```json
132+
{
133+
"browserslist": {
134+
"production": [
135+
">0.2%",
136+
"not ie <= 99",
137+
"not android <= 4.4.4",
138+
"not dead",
139+
"not op_mini all"
140+
]
141+
}
142+
}
143+
```
144+
145+
Refer to [this doc page](https://github.com/vacp2p/docs.wakuconnect.dev/blob/develop/content/docs/guides/07_reactjs_relay.md).

0 commit comments

Comments
 (0)