Universaldot WEB APP: The Front-End of the digital economy

In the past, people have created organizations and corporations by obtaining legal status from a government or a state. In the future, organizations and corporations will be created digitally and will have global instead of local reach. UNIVERSALDOT Foundation provides the needed infrastructure for people to organize themselves by creating digital identities and tasks. We enable the creation of a new digital future.

This repository represents the front-end of the application. It is built with Substrate-frontend-template, Create React App and Polkadot js API. Familiarity with these tools will be helpful, but not mandatory.

Using The Web Application

Installation

The codebase is installed using git and npm. This tutorial assumes you have installed npm globally prior to installing it within the subdirectories. For the most recent version and how to install npm, please refer to npm documentation and installation guides.

# Clone the repository
git clone https://github.com/UniversalDot/front-end.git
cd front-end
npm install --legacy-peer-deps

Usage

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

npm run start

You can also build the app in production mode,

npm run build

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

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.

• development.json affects the development environment
• test.json affects the test environment, triggered in npm run test command.
• production.json affects the production environment, triggered in npm run 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 as JSON in src/config/types.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.

Testing

This project uses Cypress for testing.

Cypress is a next generation front end testing tool built for the modern web. Cypress is most often compared to Selenium; however Cypress is both fundamentally and architecturally different. Cypress is not constrained by the same restrictions as Selenium.This enables you to write faster, easier and more reliable tests. Cypress can test anything that runs in a browser.

Cypress enables you to write all types of tests:

• End-to-end tests
• Integration tests
• Unit tests

Before running your Cypress Tests, make sure that your front end application is running locally. All tests are configured to run on localhost:8000

npm run start

Once your application is running locally, to launch the Cypress Test Runner run this command:

npm run cypress:open

You can then proceed to the Cypress UI where you can select to run individual tests or run all tests.

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

Supported by Web3 Foundation

UniversalDot is recipient of the technical grant from Web3 Foundation.

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

Please make sure to update tests as appropriate.

Maintainers

@SlaveAtanasov @Slave Mitev