Home

Awesome

Substrate Front End Template

This template allows you to create a front-end application that connects to a Substrate node back-end with minimal configuration. To learn about Substrate itself, visit the Substrate Documentation.

The template is built with Create React App and Polkadot JS API. Familiarity with these tools will be helpful, but the template strives to be self-explanatory.

Using The Template

Install Locally

The codebase is installed using git and yarn. Make sure 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 documentation and installation guides.

# Clone the repository
git clone https://github.com/substrate-developer-hub/substrate-front-end-template.git
cd substrate-front-end-template
yarn install

Usage

You can start the template in development mode to connect to a locally running node

yarn start

You can also build the app in production mode,

yarn build

and open build/index.html in your favorite browser.

Try the Hosted Version

Connecting to your local Substrate node (Chrome and Firefox only):

https://substrate-developer-hub.github.io/substrate-front-end-template?rpc=ws://localhost:9944

Connecting to Polkadot:

https://substrate-developer-hub.github.io/substrate-front-end-template?rpc=wss://rpc.polkadot.io

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.

To deploy your own front-end to production, you need to configure:

Some environment variables are read and integrated in the template config object, including:

More on React environment variables.

How to Specify the WebSocket to Connect to

There are two ways to specify the websocket to connect to:

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.

{
  setCurrentAccount: func(acct) {...}
  state: {
    socket,
    keyring,
    keyringState,
    api,
    apiState,
    currentAccount
  }
}

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

TxButton Component

The TxButton handles basic query and transaction requests to the connected node. You can reuse this component for a wide variety of queries and transactions. See src/Transfer.js for a transaction example and src/Balances.js for a query example.

Account Selector

The Account Selector 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