Empower Front-Chain : Guide

The web interface for Empower's blockchain

github


Introduction

Publishing blockchain data as web content, whether to build a dashboard, a block explorer, or simply display certain data on the web, is often tedious, especially for front-end developers with no knowledge of technologies such as blockchain.

In addition, additional infrastructure is usually necessary to access such data, such as dedicated servers, RPC nodes, installation of services like Prometheus, Grafana, etc.

Empower Front-Chain extracts data from two sources:

What does Empower Front Chain solve?

With this small framework we aim to solve the development time and infrastructure for publishing blockchain data on the web. Making it easy for designers to create content with a few lines of html code.

A quick example of what we can do

Imagine you are a front-end designer and you want to integrate the data from a blockchain into a fun and attractive Dashboard for the public. You don't have to worry about anything but the design. Enter the necessary functions to display the data in the header of the page and the id to the html elements with which you want to associate the metric values. That's it! Are you ready to go?

Getting Started

1) Add the following code inside the header <head>:

<script type="text/javascript" src="imp_data.js"></script>

2) Add the function code that corresponds to the metric to display, inside the <head> header:

  <script>
//Function call (metric name, chain-id)
showdata("block","empowerchain-1");
</script>

3) In case you enter a metric that is frequently updated you can add the following line:

 
<script>
     setInterval(function(){
        showdata("block","empowerchain-1");
 },5000); // delay 5 seg
</script>

NOTE: You can see all available metrics here.

4) Add the id attribute with the name of the function to the tag you want to use to display the metric value:

<p>Empower empowerchain-1Height: <span id="block"></span></p>

You can see the full example here.

Package

imp_data.js

Holds the methods needed to create an XMLHttpRequest connection and extract the data from Prometheus or the RPC node.


get_prometheus.php

Contains the routines needed to open the Prometheus path (in empowerchain-1) and trace the code needed to display and print the metrics. Being able to display tendermint metrics:

https://docs.tendermint.com/v0.34/tendermint-core/metrics.html

get_rpc.php


Contains the routines needed to access the RPC node (empowerchain-1) and execute the RPC protocols:

https://docs.tendermint.com/v0.34/rpc/

Printing the results on screen.

NOTE: we have chosen to print directly in an HTML tag identified by the id attribute, instead of sending the variable via AJAX, javascript, etc. to the interface environment to simplify the task of the front-end designer at the cost of limiting the possibility of having more flexibility to perform calculations and interactions by the designer (e.g. percentage of voting power).

This way the designer can get the data from the blockchain without having any knowledge of how the metrics work, and we get a much cleaner web interface.

What else can we do?

In addition to displaying the data we can create different ways to interact with the blockchain metrics, such as sending forms with data requests, adapting the blockchain metrics to fun ways of displaying the information, such as animations, element positions, etc...

For a more complete demonstration please visit our example Dashboard.

Métrics Empower Test

Metrics from Prometheus - get_prometheus.php

Chain:

DataDescriptionFuntionId
Nº block: consensus_height: Height of the chainshowdata("block","empowerchain-1");
id="block"
Nº validators: consensus_validators: Number of validatorsshowdata("num_val","empowerchain-1");
showdata("num_val","mocha");
id="num_val"
Validator Voting Power: consensus_validators_power: Total voting power of all validatorsshowdata("val_power","empowerchain-1");
id="val_power"
Validator Missing Voting Power: consensus_missing_validators_power : Total voting power of the missing validatorsshowdata("missing_power","empowerchain-1");
id="missing_power"
Online Validators: consensus_validators-consensus_missing_validators : Number of validators - Total voting power of the missing validatorsshowdata("online_validators","empowerchain-1");
id="online_validators"
Block time: segconsensus_block_interval_seconds : Time between this and last blockshowdata("block_time","empowerchain-1");
id="block_time"
Nº txs: consensus_total_txs : Total number of transactions committedshowdata("num_tx","empowerchain-1");
id="num_tx"
Block size: Kbconsensus_block_size_bytes : Block size in bytesshowdata("block_size_b","empowerchain-1");
id="block_size_b"
Connected Peers: p2p_peers : Number of peers node's connected toshowdata("num_peers","empowerchain-1");
id="num_peers"

Metrics from RPC - get-rpc.php

Functions accepting requests

DataDescriptionFuntionIdParameters
Get hash block:
Returns the hash of the requested block number rpc_data("get_hash","433","empowerchain-1");
id="get_hash"
num block

Functions without requests

DataDescriptionFuntionId
Get max validators: Returns the number of validators allowed in the active setrpc_data("get_max_validators","empowerchain-1");
id="get_max_validators"
Get unbonding time: Returns the unbonding timerpc_data("get_unbonding_time","empowerchain-1");
id="get_unbonding_time"
Get last block: Returns the last block of the chainrpc_data("get_block_rpc","empowerchain-1");
id="get_block_rpc"
Get RPC status: Tests if the RPC node we are connected to is synchronised and returns a green colour, or red if it is not.rpc_data("get_rpc_status","empowerchain-1");
id="get_rpc_status"

Metrics from antoher RPC - get-other-rpc.php

Always with RPC URL requests

DataDescriptionFuntionId
Get test RPC:
Returns status of the RPC server another_rpc_data("get_test_rpc","https://empower-testnet-rpc.polkachu.com:443/");
id="get_test_rpc"
Get moniker RPC:
Returns moniker of the RPC server another_rpc_data("get_moniker_rpc","https://empower-testnet-rpc.polkachu.com:443/");
id="get_test_rpc"
Get chain RPC:
Returns chain-is of the RPC server another_rpc_data("get_chain_rpc","https://empower-testnet-rpc.polkachu.com:443/");
id="get_chain_rpc"
Get tx_index RPC:
Returns tx_index state of the RPC server another_rpc_data("get_tx_index_rpc","https://empower-testnet-rpc.polkachu.com:443/");
id="get_tx_index_rpc"