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.
Roller Front-Chain extracts data from some sources:
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.
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?
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)
showdata("block");
</script>
3) In case you enter a metric that is frequently updated you can add the following line:
<script>
setInterval(function(){
showdata("block");
},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>Froopyland Height: <span id="block"></span></p>
You can see the full example here.
Holds the methods needed to create an XMLHttpRequest connection and extract the data from Prometheus or the RPC node. |
|
Contains the routines needed to open the Prometheus path (in froopyland) 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 |
|
|
|
Contains the routines needed to access the RPC node (froopyland) and execute the RPC protocols: https://docs.tendermint.com/v0.34/rpc/ Printing the results on screen. |
get_node.php |
Contains the routines needed to access the CLI Scripts to take different data tables from the chain (Validator Set, RPC Scam and Missing Blocks) 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.
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.
| Data | Description | Funtion | Id |
|---|---|---|---|
| Nº block: | consensus_height: Height of the chain | showdata("block"); | id="block" |
| Nº validators: | consensus_validators: Number of validators | showdata("num_val");showdata("num_val"); | id="num_val" |
| Validator Voting Power: | consensus_validators_power: Total voting power of all validators | showdata("val_power"); | id="val_power" |
| Validator Missing Voting Power: | consensus_missing_validators_power : Total voting power of the missing validators | showdata("missing_power"); | id="missing_power" |
| Online Validators: | consensus_validators-consensus_missing_validators : Number of validators - Total voting power of the missing validators | showdata("online_validators"); | id="online_validators" |
| Block time: seg | consensus_block_interval_seconds : Time between this and last block | showdata("block_time"); | id="block_time" |
| Nº txs: | consensus_total_txs : Total number of transactions committed | showdata("num_tx"); | id="num_tx" |
| Block size: Kb | consensus_block_size_bytes : Block size in bytes | showdata("block_size_b"); | id="block_size_b" |
| Connected Peers: | p2p_peers : Number of peers node's connected to | showdata("num_peers"); | id="num_peers" |
| Data | Description | Funtion | Id | Parameters |
|---|---|---|---|---|
| Get hash block: | Returns the hash of the requested block number | rpc_data("get_hash","1652923"); | id="get_hash" | num block |
| Data | Description | Funtion | Id |
|---|---|---|---|
| Get max validators: | Returns the number of validators allowed in the active set | rpc_data("get_max_validators"); | id="get_max_validators" |
| Get unbonding time: | Returns the unbonding time | rpc_data("get_unbonding_time"); | id="get_unbonding_time" |
| Get last block: | Returns the last block of the chain | rpc_data("get_block_rpc"); | 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"); | id="get_rpc_status" |
| Data | Description | Funtion | Id |
|---|---|---|---|
| Get RPC SCAM: | Return list of tested public RPCs | get_node("rpc_scan"); | id="rpc_scam" |
| Get VALIDATOR SET: | Return list of Active Validators from Chain | get_node("val_set"); | id="val_set" |
| Get MISSING BLOCKS: | Return list of Missing Blocks for Validator | get_node("miss_block"); | id="miss_block" |