Categories
blockchain

A Simple Ethereum Blockchain Explorer with Javascript, QuickNode, and Tailwind CSS

Below is a screenshot of our app’s final version. 

HTML Starter

To get started, we will be setting up a basic HTML file called index.html. Since we will be using Tailwind CSS, the Tailwind HTML starter template is a good starting point. We will also be using the CDN link for styles.

N.B. We will be using this since we’re just running a test setup. Using the npm installation is advised for production setups and not the CDN link.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Ethereum Blockchain Explorer</title>
        <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
   
    </head>
    <body>
    </body>
</html>

Table Setup

For this tutorial, we will be highlighting the block number, Ethereum address, hash, and timestamp of each generated block. To do this, we will be setting up the basic blocks of our table. I also added an official logo and a short description to make the whole project look more appealing. 

<div class="py-10">
      <div class="text-center">
        <img src="img/ethereum-logo.png" class="w-1/3 h-1/2 mx-auto" alt="logo">
        <p class="py-5" >A simple Ethereum Blockchain Explorer that displays the last 10 transactions with selected details</p>
      </div>

      <div class="flex flex-col">
          <div class="my-2 overflow-x-auto sm:mx-6 lg:mx-2">
            <div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-3">
                <div class="shadow overflow-hidden border-b border-gray-200 sm:rounded-lg">
                <table class="min-w-full divide-y divide-gray-200 px-10 ">
                    <thead class="bg-gray-50">
                      <tr>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Block Number
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                              Address
                        </th>
                        <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Hash
                        </th>
                        <th scope="col" class="px-1 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
                            Timestamp
                        </th>
                      </tr>
                      </thead>
                    <tbody class="bg-white divide-y-2 divide-gray-100 ">
                           
                      </tbody>
                  </table>
              </div>
          </div>
          </div>
      </div>
    </div>

This creates:

Getting Block Data From The blockchain

To do this, we will be using web3.js and QuickNode. Web3.js is a collection of Javascript libraries that help you talk to an Ethereum Node.

To add web.js, as seen on the official docs, we will be using the minified js file, which will link to our HTML file.  You can download the minified web.js file directly from here or from the official web3.js Github page. Unzip the folder and get the file from dist/web3.min.js.

Here’s my current file structure:

We then import below to our <body> tag.


        <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous">
        </script>
        <!-- Web3 -->
        <script src="js/web3.min.js"></script>

Setting Up a Node

To set up a node:

1. Create an account on the QuickNode Homepage

2. After verifying your email, you will be directed to a page to set up your node.

3. We will be using the 7-day free trial. Please don’t forget your trial before the 7 days elapse.

4. Select the Mainnet Network

5. You will be required to input your credit card details after this. Again, don’t forget to cancel your free trial if you don’t wish to continue using their node APIs after this. 

Copy the HTTP provider as we will be using it along with web3.js

QuickNode provides an official quickstart code snippet. However, require won’t work because it is not supported on the client/browser.

6. Initialization.  

Here, we will be connecting to the node which we set up on the QuickNode dashboard.

<script>const provider = '/'; // Add your quiknode HTTP provider link here
const web3Provider = new Web3.providers.HttpProvider(provider);
const web3 = new Web3(web3Provider);</script>

Add the code blocks below to your script to see if you’re connected to the node.

web3.eth.getBlock('latest').then(answer => console.log(answer))
web3.eth.getBlockNumber().then(blockNum => console.log(blockNum))

Both should get a number and an Object containing the latest block information.

Displaying details about the last 10 blocks

web3.eth.getBlockNumber() and web3.eth.getBlock() are Javascript promises, and we will be combining both to get the last 10 blocks of the Ethereum chain.

web3.eth.getBlockNumber().then(blockNum => {
        //loop through and get the last 10
        for (let i = 0; i < 10; i++) {
              web3.eth.getBlock(blockNum - i).then(answer => {
                  $('tbody').append("<tr><td class='px-6 py-4 whitespace-nowrap text-sm text-gray-500'>" + answer.number + "</td><td>" + answer.author + "</td><td class='text-gray-600 text-sm'>" + answer.hash + "</td><td class=' px-2 py-1 mt-3 inline-flex text-sm leading-5 font-semibold rounded-full bg-green-100 text-green-800'>" + answer.timestamp + "</td></tr>");
                    })
    }
})

Doing that will load the parsed data on our HTML page, as shown below

For further checks, you can find the complete code below

https://gist.github.com/thestriver/05419c8215c039aeed3630d7e34e6732