How to Build a Simple Gas Tracker App with Gas API and Next.js

Understanding Gas in Blockchain Networks

Gas is a unit measuring computational effort required for operations like transactions or smart contract execution on blockchain networks. Think of it as fuel for a car – essential for processing and validating operations.

Each Ethereum transaction demands a specific gas amount based on complexity. Users set a gas price in Gwei (1 Gwei = 1 billionth of an Ether), indicating what they'll pay per gas unit.

Why Gas Prices Matter

Monitoring gas prices helps users:

• Optimize costs by choosing economical transaction times.
• Prevent failed transactions and plan budgets effectively.
• Assess network congestion and make informed investment decisions.

Introducing the MetaMask Gas API

The MetaMask Gas API (via Infura) provides real-time gas price data for EVM-compatible networks. It acts as an oracle, delivering:

• Computational cost estimates for transactions.
• Advanced gas estimation features for developers.

👉 Explore the Gas API docs

Tutorial Overview

We’ll build a Gas Tracker App using:

• Next.js (React framework).
• ShadcnUI (component library).
• Gas API (for live gas data).

Prerequisites

• Web3 API key (from Infura).
• Node.js (v18+).
• Basic familiarity with Next.js and React.

Setting Up Next.js + ShadcnUI

1. Initialize Next.js

npx create-next-app@latest gastracker-app

Follow prompts to configure:

• TypeScript: Yes
• Tailwind CSS: Yes
• App Router: Yes

2. Install ShadcnUI

npx shadcn-ui@latest init

Configure as follows:

Style: Default  
Base color: Slate  
CSS Variables: Yes  
RSC: Yes  

3. Add UI Components

Install the Card component:

npx shadcn-ui@latest add card

Building the Gas Tracker App

Step 1: Configure Environment Variables

Create .env in the root directory:

INFURA_API_KEY=your_key  
INFURA_API_KEY_SECRET=your_secret  

Never commit .env to GitHub!

Step 2: Install Dependencies

npm install axios dotenv

Step 3: Fetch Gas Data

Create lib/getData.ts:

const Auth = Buffer.from(
  `${process.env.INFURA_API_KEY}:${process.env.INFURA_API_KEY_SECRET}`
).toString("base64");

export const getData = async () => {
  try {
    const res = await fetch(
      `https://gas.api.infura.io/networks/1/suggestedGasFees`,
      {
        headers: { Authorization: `Basic ${Auth}` },
      }
    );
    return await res.json();
  } catch (error) {
    console.error("Error fetching gas data:", error);
  }
};

Step 4: Display Data

Create components/GasCard.tsx:

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { getData } from "@/lib/getData";

export const GasCard = async () => {
  const data = await getData();

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
      {/* Low/Medium/High Fee Cards */}
      {data?.low && (
        <Card>
          <CardHeader>
            <CardTitle>Low Priority</CardTitle>
          </CardHeader>
          <CardContent>
            <p>Max Fee: {data.low.suggestedMaxFeePerGas} Gwei</p>
            <p>Wait Time: {data.low.maxWaitTimeEstimate}s</p>
          </CardContent>
        </Card>
      )}
      {/* Repeat for Medium/High */}
    </div>
  );
};

FAQ

1. What networks support the Gas API?

The API works with EVM chains like Ethereum, Polygon, and Avalanche.

2. How often should I refresh gas data?

Fetch updates every 15-30 seconds for accuracy.

3. Can I customize the UI further?

Absolutely! Use ShadcnUI’s theming tools or add charts via libraries like Recharts.

Final Notes

• GitHub Template: GasAPI-Template
• Advanced Use Case: Check out EventSea, a DApp integrating gas tracking.

👉 Start building today!

Happy coding! 🚀