Career, Tech Knowledge, Web3

Web 3.0 development with Substrate. Part 8: UIs.

This post is part of a series on Web 3.0 Development with Substrate.

UIs encompass all on-screen controls that support user interactions. UIs are the final and the most important part of DApp development: without them, the general audience would not be able to submit or view on-chain transactions. As a framework, Substrate comes with an array of UI tools that facilitate designing for a wide range of users’ needs. Let’s examine some of them.

Network configuration

As we have previously seen, Substrate supports development operations of a variety of chains. Public permissionless networks, Permissioned networks and Private networks are set up via a chain spec file that summarises consensus rules for nodes. But the consensus process itself is flexible, because it emerges from the combination of 3 components: authorship, finality and fork-choice rule. Authorship is the collective of nodes that produces blocks (aka “validators“) and ensures the integrity of blockchain transaction data. Finality refers to the procedure that finalises blocks and ensures that the blockchain can never be rolled-back (aka “reversed“). Fork-choice rule is the process that resolves forks and ensures that only a single blockchain (aka “canonical chain“) persists.

Polkadot-JS targets developers and techies.
Polkadot-JS Apps: a developer-friendly SPA for all Substrate chains functionalities.

Because Substrate was designed for building a plurality of chains, it needed a developer-friendly UI for multi-chain operations and queries. Polkadot-JS Apps was (and still remains) the primary interface used in the Substrate ecosystem. It is built with the Create React App tool, which allows developers and techies to spin a lightweight and composable single page application project. Polkadot-JS Apps leverages the standard functionalities of Substrate chains which are branched out into different UIs (i.e Accounts, Staking, Democracy, etc). However, the major limitation of Polkadot-JS Apps remains its lack of responsive design.

Node monitoring

Blockchain networks can only persist over time if the majority of nodes that support consensus are operating as per the agreed rules. Already, there are multiples tools involved in managing nodes’ communication protocols during initial network setups, as opposed to launching in a single-node setting. But there is also a big difference in requirements between running nodes in development mode and in production mode, which ramps us as the peering, logic and storage start to support more complex applications.

Crunch has two simple UIs for automating staking operations on Substrate nodes.
Crunch: a validator-friendly CLI & bot for staking payouts management.

The integrity of nodes themselves needs to be checked at many levels to ensure that their blocks, messages and roles are consistent with consensus rules. To facilitate these operations, Substrate ecosystem builders have created a variety of validator-friendly UIs to monitor nodes on live networks. Polkadot Essentials (by BLD Nodes) is an example of a Substrate chain dashboard built with Grafana that helps visualise node metrics and provides custom alerts. However, not all tools come in the form of GUI. The Crunch CLI (by Turboflakes) is a tool that assists validators with automated payouts, while the Crunch bot publishes staking rewards data in decentralised chatrooms like Element. An obvious limitation is that, although these middleware can be deployed on various OS, they do not always support multiple devices.

Web3 connectivity

“Web 3.0”, a term coined by Dr Gavin Wood in 2014, is the idea that decentralised platforms can “allow people to interact in mutually beneficial ways without anyone needing to trust each other.” DApps are the backbone of Web 3.0, because they use a new technological stack for Web services that are defined by the Web3 Foundation as “Low trust metaprotocols (Relay chains), Low trust interaction protocols (Legacy blockchains or Parachains), Second layer protocols (State channels, Oracles, etc), and Protocol extensible APIs, Languages, & UI cradles“. This means that ordinary users must be fully involved in the development process; because they are the originators, producers, workers and beneficiaries of decentralised platforms themselves.

KodaDot simplifies UIs for NFT operations on Kusama.
Kodadot is a user-friendly DApp for NFT-related operations.

With the standardisation of blockchain development and the possibility of interoperable heterogeneous chains, there is also the growing realisation that more user-friendly UIs are needed to reflect the plurality of use-cases that are developed within the Substrate ecosystem. KodaDot integrates VueJS components to give its users a smooth visual experience while creating collections and minting Non-Fungible-Tokens (NFTs) on the Kusama blockchain. The choice of the framework is not surprising, because VueJS is rising in popularity among both Web designers and Front-End developers. By contrast, Talisman has chosen ReactJS to develop its Minimum Viable Product (MVP) for a community wallet, which will gradually scale to integrate a browser extension and a multi-chain asset dashboard.

Talisman wallet aggregates all accounts and assets on a single UI.
Talisman is building a multi-chain wallet for staking and crowdloaning.

Substrate’s strength lies in how it re-uses popular libraries and web development frameworks in its native stack. Front-end developers will appreciate the familiarity of well-known UI tools while they attempt to make the functionalities of Substrate chains accessible to a global audience. For Back-end developers however, the most promising opportunities lie in the highly-specialised area of Smart Contracts, which we will investigate in Part 9.


Substrate Developer Hub Tutorials:

  1. Add a pallet to your runtime
  2. Build a PoE DApp

DotLeap Tutorials:

  1. Polkadash: A VueJS Dashboard
  2. How to subscribe to Polkadot events
  3. How to read Polkadot identities

Web3 Foundation: About