I Made a Blockchain Explorer
When I first learned the definition of the word “blockchain”, this was what my mind pictured:
At first, the blockchain seemed very out of reach for me. When people exchange cryptocurrencies, how did they know the transaction was recorded? How did people make sure that smart contracts were deployed successfully? How do people even know the gas costs of each transaction? How did all of this operate without any government control?
Etherscan provides a record for how all this is done.
Everyone Needs Etherscan.
Blockchain developers would code smart contracts using solidity, then test their smart contracts using a javascript emulator or deploying the contract on a test net. These smart contracts would be essential for decentralized web applications in areas like De-Fi, gaming, or cryptocurrency exchanges.
After developers use a compiler to deploy the smart contract, they need a way to check whether if transactions were successfully deployed. Etherscan was the solution.
Etherscan records information such as the timestamp of the transaction, the value of each transaction, and the public keys of those involved. All of this is done with anonymity to both parties involved in the transaction. Etherscan also allows you to track all transactions that occurred in your smart contract with an option to search the address of the smart contract. For example, if you deploy your smart contract onto the testnet via. a web3 injection on Remix, you would then be able to transfer test tokens from your Metamask wallet to your smart contract. Metamask will then give you the link to the smart contract in which your transaction took place if it is deployed successfully.
I decided to build a lite replica of this site for my private usage, so that I can hop onto the website and check the most recent block mined, the miner, and which block it was appended to. With this, I now had a model of the blockchain to educate all of my friends and family with. After all, seeing is believing, and what better way to illustrate a global network of interlinked data than this? This also served as my gateway to web3 and blockchain development.
Here’s how I did it:
First Things First — Fetching the Latest Block
After importing all of my dependencies (React & Web3), I first started by connecting to infura.io to tap into the Ethereum blockchain network. Infura.io is where I can access the information about the Ethereum blockchain for all of the tracking features of my site via an HTTPS connection. Next, I set up the states and the console-logging for the latest block fetched using the web3.eth.getBlock function, listing the block number and its difficulty (how hard it was to mine). These states must be set so that I can call them later to put into tables.
Step Two: Get some more info about the block
After our first steps, I put in similar functions to fetch the gas price and fetch the same information about the latest 10 blocks. Such information was also logged into the console of the web app.
Next, I fetched the 10 newest block from the blockchain, in descending order from newest to the 10th recorded (oldest). For every single block (starting from the first, up to block number 9), the function would fetch blocks whose blocks numbers are the block number of the latest block minus an integer i, where i is the order of the block. The push function is responsible for repeating this process up to the 10th block. The function would then log all of this block information in the console, and set all of the information retrieved as the “latestBlocks”.
Afterwards, I began on the front-end part of the website. I inputted a small description on the top left that says “X’s block tracker”, linked that to my personal website, and inputted all of the information that we just fetched from the Ethereum main net into a table format, just like how it is on Etherscan.
The notable part is that each table fetches its information from “this.state.____”. We had already assigned information to each of these states earlier with “this.setState” functions. We are now calling the data from these states to display on the frontend.
This was the final result:
You Should Try It Too!
As a starter project in blockchain development, I found this immensely helpful. I originally tried to create a blockchain model using Python, but this was much better than creating a blockchain model in other coding languages. Moreover, it was a great opportunity to practice web3 syntax and understand how the static coding language worked. As someone who has never coded before, I got to not only see how the blockchain worked while creating something with a daily use case. I strongly recommend that every blockchain-beginner get their hands on trying a project such as this.
I encourage all who have read this article to share with your friends, high-school or collegiate blockchain clubs, or to try out the code for yourself at this Github repository! I initially created this to explain the blockchain to friends, classmates, and family, and I would love for you to do so as well!
What’s up y’all, it’s Xiangan. Appreciate you reading! If you enjoyed the article, please feel free to follow me on my LinkedIn. Drop me a line and let me know your thoughts.
