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 :)
Top comments (1)
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/