Building a Web3 App - Crypto Gas Tracker

What is this post about ?

Hello fellow humanoids. Blockchain has made it way one way or another in your life, if you have already dug deep in rabbit hole then you might know how expensive transaction fees can become on certain chains E.g: Ethereum.
Check out the app here : Crypto gas tracker

Content

Setup NextJS
Get address from metamask
Fetch transaction details
Calculate Gas Fee

Lets go deep dive into each one and explore how it was implemented.

Setup NextJS

Next JS is a framework (built on-top of React JS) that allows us to create pre-rendered React websites. Follow this link to get yourself started on the setup

Get address from metamask

For this case we would be using metamask as our wallet. You can choose any as per your preference. Using Web3 apis we can connect to metamask and fetch the current network address of the user.

Fetch transaction details

For fetching transactions we would be using Etherscan API to fetch the transaction details for the given address

Calculate Gas Fee

As per the API response the fields gasUsed and gasPrice are used to get the total eth spent.

gasFee = gasUsed * gasPrice

Since ETHUSD pair price is very volatile, we would fetch the ETHUSD on the date of the transaction using Coingecko api

Conclusion

This app was made as part of learning Web3 apps. There might be bugs and enhancements on the way. Please feel free to provide feedback.
Stay safe and lend a hand to another :)