Create Your Own Ethereum Blockchain Explorer From Scratch by@Niharika3297

Create Your Own Ethereum Blockchain Explorer From Scratch

June 23rd 2022 4,196 reads
Read on Terminal Reader
react to story with heart
react to story with light
react to story with boat
react to story with money
image
Niharika Singh HackerNoon profile picture

Niharika Singh

Blockchain’s beauty lies in its blockchain explorer. If you really own Ethers (Ethereum’s cryptocurrency), you’d know the importance of etherscan.io
image
If your organisation is operating on private ethereum network, then a blockchain explorer would be a treat. But seldom people get stuck on where to start.
In this tutorial, we will connect to Ethereum’s main network using Infura. If you get the essence of this article, then you will be able to develop a blockchain explorer for a ethereum private blockchain as well.

Technology stack I am going to use:

  • Web3.js (Ethereum’s JavaScript API)
  • Infura keys
  • HTML (You can alsouse React/Angular for the frontend)








































<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Blockchain Explorer</title><!-- Bootstrap --><link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"><!-- Styles --><style>body {padding-top: 20px;}h1 {margin: 20px 0px;}</style></head><body><div class="container"><div class="row"><div class="col-lg-12 text-center" ><img src="img/picture.png"><h1>Blockchain Explorer</h1><h3> Latest 20 blocks </h3><table class="table"><thead><tr><th scope="col">TxHash</th><th scope="col">Block</th><th scope="col">Timestamp</th><th scope="col">Gas Used</th></tr></thead><tbody></tbody></table></div></div></div>



<!-- Bootstrap --><script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

<script>  
  var provider = '[https://mainnet.infura.io/v3/'](https://mainnet.infura.io/v3/32d7425cd6b741f8a54653b6aa4c6b3c%27); //Your Infura Endpoint  
  var web3Provider = new Web3.providers.HttpProvider(provider);  
  var web3 = new Web3(web3Provider);
var latestBlock = web3.eth.blockNumber;








// List blocks in tablefor (var i = 0; i < 20; i++) {var block = web3.eth.getBlock(latestBlock - i);var number = block.number;var hash = block.hash;var time = block.timestamp;var gas = block.gasUsed;//var sender = web3.eth.getTransaction(hash.from);convertTimestamp(time);









function convertTimestamp(time) {var d = new Date(time * 1000), // Convert the passed timestamp to millisecondsyyyy = d.getFullYear(),mm = ('0' + (d.getMonth() + 1)).slice(-2), // Months are zero based. Add leading 0.dd = ('0' + d.getDate()).slice(-2), // Add leading 0.hh = d.getHours(),h = hh,min = ('0' + d.getMinutes()).slice(-2), // Add leading 0.ampm = 'AM',time;








if (hh > 12) {h = hh - 12;ampm = 'PM';} else if (hh === 12) {h = 12;ampm = 'PM';} else if (hh == 0) {h = 12;}



// ie: 2014-03-24, 3:00 PMtime1 = yyyy + '-' + mm + '-' + dd + ', ' + h + ':' + min + ' ' + ampm;return time1;}
    $('tbody').append("<tr><td>" + hash + "</td><td>" + number + "</td><td>" + time1 + "</td><td>" + gas + "</tr>");  
  }

</script>  

</body></html>
If you want to access your private blockchain, replace the provider URL with your private blockchain metamask URL.
Practically, all we used is Infura keys to access the main ethereum network. Web3 to query the network. The JSON response received from Web3 is put into HTML. That’s all.
image
This is what it looks like
react to story with heart
react to story with light
react to story with boat
react to story with money
L O A D I N G
. . . comments & more!