DEV Community

Cover image for Building a Web3 App - Crypto Gas Tracker
vigneshiyergithub
vigneshiyergithub

Posted on • Updated on

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

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
Enter fullscreen mode Exit fullscreen mode

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 :)

Top comments (1)

Collapse
 
wslyvh profile image
wslyvh

Cool project! Nice to see how much gas you've spent yourself.

I would recommend to monitor and track gas prices to reduce your transaction fees and save money. E.g. ethgastracker.com/