The purpose of this front-end template is to allow you to quickly create a front-end application that connects to a Substrate node without much configuration and simplify the underlying connection and handling of Polkadot-JS.
The encapsulation is handled by components inside substrate-lib
. Substrate
connection information is exposed out via substrate-lib/useSubstrate.js
custom hook.
The app configuration can be set in the src/config
folder, with
common.json
loaded in both development and production environments, and then the environment
specific JSON file (with higher priority). More on React enviornment variables
can be seen here.
When writing and deploying an front end with your own node, you likely want to change:
-
CUSTOM_TYPES
insrc/config/common.json
. See Extending types. -
PROVIDER_SOCKET
insrc/config/production.json
pointing to your own deployed node. -
DEVELOPMENT_KEYRING
insrc/config/common.json
be set tofalse
. See Keyring.
cd ./substrate-front-end-template
yarn install
yarn start
The useSubstrate
custom hook exposes this object:
{
socket,
types,
keyring,
keyringState,
api,
apiState,
}
socket
- The remote provider socket it is connecting to.types
- The custom type used in the connected node.keyring
- Keyring of the connected node.keyringState
- One of [READY
,ERROR
] states.keyring
is valid only whenkeyringState
===READY
.api
- The remote api to the connected node.apiState
- One of [CONNECTING
,READY
,ERROR
] states.api
is valid only whenapiState
===READY
.
There is a TxButton
component in
src/substrate-lib/components/TxButton.js.
It handles a basic query
and transaction requests to the
connected node, and app developers can reuse this component by passing the
right parameters in. See src/Transfer.js for a transaction
example and src/ChainState.js for a query example.
-
To learn more about Substrate front-end development, go to our Substrate Front-End Tutorial.
-
To try an in-depth tutorial for building a custom Substrate runtime as well as a user interface, goto our Substrate Collectables Workshop.
-
To learn how the underlying Polkadot-JS API library works, go to polkadot-js/api.