Societal Front-End

This is this the front-end for the Societal node. The UI allows for easy use of the features of the Societal node.

The front-end 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 Front-End

Installation

The codebase is installed using git and yarn. This instructions below assume 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/sctllabs/societal-front-end.git
cd societal-front-end
yarn install

Usage

You can start the front-end in a 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.

Specifying Connecting WebSocket

There are two ways to specify it:

• With PROVIDER_SOCKET in {common, development, production}.json.
• With rpc=<ws or wss connection> query parameter after the URL. This overrides the above setting.

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.