Caution! This repo is deprecated. The new Front End will be based on polkadot/apps.

Kylin Front End for Development

Kylin Front End for Development allows you to connect to Kylin Node.

It's built with Create React App and Polkadot js API. Familiarity with these tools will be helpful.

Installation

The codebase is installed using git and yarn.

# Clone the repository
git clone https://github.com/Kylin-Network/kylin-front-end.git
cd ./kylin-front-end
yarn install

Run

You can start the Kylin Front End in development mode to connect to a locally running Kylin Node

yarn start

You can also build the app in production mode,

yarn build

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

Configuration

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

When writing and deploying your own front end, you should configure:

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

Specifying Connecting Node

There are two ways to specify it:

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

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.

{
  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 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/ChainState.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.