Tutorial: Building an Ethereum Gas Tracker

Introduction

The Ethereum London Hard Fork in August 2021 introduced EIP-1559, a major upgrade to Ethereum's gas fee mechanism. This replaced the traditional blind auction model with a more predictable system comprising two components:

• Base Fee: Automatically adjusted by the network.
• Priority Fee (Tip): Set by users to incentivize miners.

In this tutorial, you’ll build a gas tracker to monitor these fees and block statistics (e.g., volume) for the latest 20 blocks. By the end, you’ll:

1. Understand how EIP-1559 improves gas pricing.
2. Have a functional app displaying real-time fee data.

Tech Stack: Alchemy, Web3.js, Node.js, and React.

Part 1: Transaction Fee History Script

Step 0: Prerequisites

• Install Node.js (v14+).

Step 1: Set Up Alchemy

1. Create a free Alchemy account.
2. Generate an API key under "Ethereum Mainnet."

Step 2: Initialize Project

mkdir gas-tracker-script && cd gas-tracker-script  
npm init -y  
npm install @alch/alchemy-web3  
touch main.js  

Step 3: Connect to Ethereum

const { createAlchemyWeb3 } = require("@alch/alchemy-web3");  
const web3 = createAlchemyWeb3("wss://eth-mainnet.alchemyapi.io/v2/YOUR_API_KEY");  

Step 4: Fetch Fee History

Retrieve data for the latest 20 blocks:

web3.eth.getFeeHistory(20, "latest", [25, 50, 75]).then(console.log);  

Step 5: Format Data

Convert hex values to Gwei and structure output:

const formatOutput = (data) => {  
  return data.map(block => ({  
    blockNumber: Number(block.oldestBlock) + i,  
    baseFeePerGas: Math.round(Number(block.baseFeePerGas) / 1e9),  
    reward: block.reward.map(r => Math.round(Number(r) / 1e9)),  
    gasUsedRatio: Math.round(block.gasUsedRatio * 100)  
  }));  
};  

Step 6: Subscribe to New Blocks

Update data dynamically:

web3.eth.subscribe('newBlockHeaders').on("data", () => {  
  web3.eth.getFeeHistory(20, "latest", [25, 50, 75]).then(data => {  
    console.log(formatOutput(data));  
  });  
});  

👉 Explore Ethereum Gas Tools

Part 2: React Gas Tracker App

Step 1: Initialize React App

npx create-react-app gas-tracker-frontend  
cd gas-tracker-frontend  
npm install @alch/alchemy-web3  

Step 2: Build the UI

Update App.js to display fee history in a table:

import { useState, useEffect } from 'react';  
import { createAlchemyWeb3 } from '@alch/alchemy-web3';  

function App() {  
  const [blocks, setBlocks] = useState([]);  

  useEffect(() => {  
    const web3 = createAlchemyWeb3("YOUR_ALCHEMY_WS_URL");  
    web3.eth.subscribe('newBlockHeaders').on("data", () => {  
      web3.eth.getFeeHistory(20, "latest", [25, 50, 75]).then(data => {  
        setBlocks(formatOutput(data));  
      });  
    });  
  }, []);  

  return (  
    <div>  
      <h1>EIP-1559 Gas Tracker</h1>  
      <table>{/* Render blocks data */}</table>  
    </div>  
  );  
}  

Step 3: Optional Styling

Add CSS for better readability:

table { border-collapse: collapse; margin: 20px auto; }  
th { background: linear-gradient(267.45deg, #05d5ff -34.23%, #53f 99.39%); }  

Step 4: Run the App

npm start  

Key Observations

1. Base Fee Stability: Adjusts by ≤12.5% per block.
2. Priority Fees: Typically a small fraction of total fees.
3. Block Volume: Averages ~50% capacity.

👉 Learn More About EIP-1559

FAQs

Q1: Why did EIP-1559 replace the auction model?

A: To make gas fees predictable and reduce overpayment.

Q2: How often does the base fee change?

A: Every block (~15s), capped at ±12.5%.

Q3: What tools are needed to build a gas tracker?

A: A node provider (like Alchemy), Web3.js, and a frontend framework (e.g., React).

Conclusion

This tutorial walked you through building a real-time Ethereum gas tracker while explaining EIP-1559 mechanics. For further learning, check out Alchemy’s documentation.

Join our Discord: Scrappy Squirrels Community