Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/shawntabrizi/substrate-society
A basic front-end for the Substrate Society pallet
https://github.com/shawntabrizi/substrate-society
Last synced: about 1 month ago
JSON representation
A basic front-end for the Substrate Society pallet
- Host: GitHub
- URL: https://github.com/shawntabrizi/substrate-society
- Owner: shawntabrizi
- License: unlicense
- Created: 2020-01-16T16:46:18.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T05:15:51.000Z (almost 2 years ago)
- Last Synced: 2024-05-01T14:17:57.328Z (7 months ago)
- Language: JavaScript
- Homepage: https://www.shawntabrizi.com/substrate-society/
- Size: 19.3 MB
- Stars: 6
- Watchers: 4
- Forks: 2
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-substrate - `substrate-society` - A basic front-end for the FRAME Society pallet. (Tools)
- awesome-substrate - `substrate-society` - A basic front-end for the FRAME Society pallet. (Tools)
README
# Substrate Front End Template
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).
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
will be helpful, but the template strives to be self-explanatory. To learn how
this template was built, visit the
[Substrate Front-End Tutorial](https://substrate.dev/docs/en/tutorials/substrate-front-end/).
## Using The Template
### Installation
The code can be installed using [git](https://git-scm.com/) and [yarn](https://yarnpkg.com/).
```bash
# Clone the repository
git clone https://substrate-developer-hub/substrate-front-end-template.git
cd ./substrate-front-end-template
```
```bash
yarn install
```
## Usage
You can start the template in development mode to connect to a locally running node
```bash
yarn start
```
You can also build the app in production mode,
```bash
yarn build
```
and open `build/index.html` in your favorite browser.
## 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.
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]`
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` in `src/config/common.json`. See
[Extending types](https://polkadot.js.org/api/start/types.extend.html).
* `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).
## Reusable Components
### useSubstrate Custom Hook
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,
}
```
- `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"`.
- `api` - The remote api to the connected node.
- `apiState` - One of `"CONNECTING"`, `"READY"`, or `"ERROR"` states. `api` is valid
only when `apiState === "READY"`.
### 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.
### 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.