/substrate-front-end-template

A Polkadot.js API + React based template for building Substrate Front Ends

Primary LanguageJavaScriptThe UnlicenseUnlicense

Substrate Front End Template

Purpose

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.

Configuration

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 in src/config/common.json. See Extending types.

  • 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.

Install and Start

cd ./substrate-front-end-template
yarn install
yarn start

Component Details

useSubstrate Custom Hook

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 when keyringState === READY.
  • api - The remote api to the connected node.
  • apiState - One of [CONNECTING, READY, ERROR] states. api is valid only when apiState === READY.

TxButton Component

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.

Further Learning