So erstellst du eine einfache Gas-Tracker-App mit Gas API und Next.js

'Gas' bezeichnet eine Einheit, die den Rechenaufwand misst, der für die Ausführung von Operationen erforderlich ist, z. B. für Transaktionen oder die Ausführung von Smart Contracts. Es ist vergleichbar mit dem Kraftstoff eines Autos – notwendig, damit das Netzwerk Operationen verarbeiten und validieren kann. Jede Transaktion auf Ethereum erfordert eine bestimmte Menge an Gas, die durch ihre Komplexität bestimmt wird. Nutzer legen einen Gaspreis in Gwei fest (1 Gwei = 1 Milliardstel Ether), der den Betrag an Ether darstellt, den sie pro Gaseinheit zu zahlen bereit sind.

Das Verständnis von Gaspreisen ist in Blockchain-Netzwerken entscheidend, da es Nutzern hilft, die Kosten ihrer Transaktionen zu verwalten. Die Kenntnis aktueller Gaspreise ermöglicht es Nutzern, den günstigsten Zeitpunkt für eine Transaktion zu wählen und deren Geschwindigkeit zu bestimmen. Das Bewusstsein für Gaspreise ist außerdem wichtig, um fehlgeschlagene Transaktionen zu vermeiden, Budgets zu planen, Netzwerküberlastungen zu verstehen und fundierte Investitionsentscheidungen zu treffen.

Die MetaMask Gas API

Die MetaMask Gas API, verfügbar über Infura, ist ein spezialisiertes Tool, das Echtzeit-Gaspreisdaten für Ethereum Virtual Machine (EVM)-kompatible Netzwerke bereitstellt. Sie fungiert als Oracle und liefert aktuelle Daten zu den Rechenkosten, die für die Ausführung von Operationen oder Transaktionen in diesen Netzwerken erforderlich sind. Die API ermöglicht es Entwicklern, fortschrittliche Gas-Schätzungsfunktionen zu erstellen, die zu Kosteneinsparungen bei Back-End-Transaktionsoperationen führen oder die Benutzeroberfläche für Nutzer verbessern können.

In diesem Tutorial lernen wir, wie man eine Gas Tracker App mithilfe der Gas API, Next.js und ShadcnUI erstellt. Diese Anwendung ermöglicht es Dapp-Nutzern, empfohlene Gaspreise abzurufen, die auf ihre Transaktionsprioritäten zugeschnitten sind, und unterstützt so die effiziente Aufnahme dieser Transaktionen in einen Blockchain-Block.

Voraussetzungen

• Ein gültiger Web3-API-Schlüssel und ein API-Schlüssel-Secret.

• Node.js sowie npm oder yarn müssen installiert sein.

• Kenntnisse in Next.js und React.

Next.js + ShadcnUI einrichten

Stellen Sie zunächst sicher, dass Node.js auf Ihrem Rechner installiert ist. Sobald Node.js eingerichtet ist, starten Sie eine neue Next.js-Anwendung, indem Sie Ihr Terminal öffnen und den folgenden Befehl ausführen:

Nach der Ausführung des Befehls erscheinen nicht nur mehrere Eingabeaufforderungen, sondern es wird auch ein neues Verzeichnis unter dem von Ihnen angegebenen Projektnamen erstellt – ich habe gastracker-app verwendet – und damit die grundlegende Struktur von Next.js aufgebaut sowie die wesentlichen Abhängigkeiten installiert. Wechseln Sie nun in das Verzeichnis Ihres Projekts:

npx create-next-app@latest
✔ What is your project named? … gastracker-app
✔ Would you like to use TypeScript? … No / Yes
✔ Would you like to use ESLint? … No / Yes
✔ Would you like to use Tailwind CSS? … No / Yes
✔ Would you like to use `src/` directory? … No / Yes
✔ Would you like to use App Router? (recommended) … No / Yes
✔ Would you like to customize the default import alias (@/*)? … No / Yes
Kopieren

Navigieren Sie in Ihr neues Projektverzeichnis und aktivieren Sie die Next.js-Anwendung im Entwicklungsmodus. Sie können Ihre Anwendung anschließend erkunden, indem Sie in Ihrem Browser zu http://localhost:3000 navigieren.

cd gastracker-app
npm run dev
Kopieren

Die Benutzeroberfläche gestalten

Für unsere Anwendung verwenden wir eine Komponentenbibliothek. Beginnen wir mit der Installation von ShadcnUI:

Während der Installation werden Sie durch die Konfiguration der Datei components.json mit den folgenden Eingabeaufforderungen geführt:

Would you like to use TypeScript (recommended)? no / yes
Which style would you like to use? › Default
Which color would you like to use as base color? › Slate
Where is your global CSS file? › › app/globals.css
Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js
Configure the import alias for components: › @/components
Configure the import alias for utils: › @/lib/utils
Are you using React Server Components? › no / yes
Kopieren

Nachdem das erledigt ist, installieren wir auch die Card-Komponente von Shadcn UI:

In diesem Tutorial konzentrieren wir uns auf die Verwendung der Card-Komponente von Shadcn UI. Um mehr über diese Komponenten zu erfahren, besuchen Sie die Shadcn UI-Website. Da unser Frontend nun eingerichtet ist, können wir mit der Gas API arbeiten.

Erstellen Sie im Stammverzeichnis eine Datei namens .env, in der wir die folgenden Zugangsdaten speichern:

INFURA_API_KEY=
INFURA_API_KEY_SECRET=
Kopieren

Stellen Sie sicher, dass Sie den API_KEY und das API_KEY_SECRET aus Ihrem Infura-Dashboard beziehen. Es ist wichtig, den API-Schlüssel nicht auf GitHub zu veröffentlichen. Überprüfen Sie im Stammverzeichnis die .gitignore-Datei, um sicherzustellen, dass die erforderlichen Zeilen enthalten sind.

# Ignore environment variables
.env
.env.local
.env.development.local
.env.test.local
.env.production.local
Kopieren

Wir benötigen außerdem die Pakete axios und dotenv:

npm install axios
npm install dotenv
Kopieren

Erstellen Sie nun eine Datei namens 'index.js' im Stammverzeichnis unserer gastracker-app und kopieren Sie den folgenden Code hinein:

const axios = require("axios");
require("dotenv").config();

const Auth = Buffer.from(
  process.env.INFURA_API_KEY + ":" + process.env.INFURA_API_KEY_SECRET,
).toString("base64");

// The chain ID of the supported network
const chainId = 1;

(async () => {
  try {
    const { data } = await axios.get(
      `https://gas.api.infura.io/networks/${chainId}/suggestedGasFees`,
      {
        headers: {
          Authorization: `Basic ${Auth}`,
        },
      },
    );
    console.log("Suggested gas fees:", data);
  } catch (error) {
    console.log("Server responded with:", error);
  }
})();
Kopieren

Führen Sie in einem anderen Terminalfenster den folgenden Befehl aus.

Sie sollten Folgendes sehen:

Suggested gas fees: {
  low: {
    suggestedMaxPriorityFeePerGas: '0.05',
    suggestedMaxFeePerGas: '28.501086221',
    minWaitTimeEstimate: 15000,
    maxWaitTimeEstimate: 30000
  },
  medium: {
    suggestedMaxPriorityFeePerGas: '0.1',
    suggestedMaxFeePerGas: '38.508966399',
    minWaitTimeEstimate: 15000,
    maxWaitTimeEstimate: 45000
  },
  high: {
    suggestedMaxPriorityFeePerGas: '0.3',
    suggestedMaxFeePerGas: '48.666846576',
    minWaitTimeEstimate: 15000,
    maxWaitTimeEstimate: 60000
  },
  estimatedBaseFee: '28.451086221',
  networkCongestion: 0.7718,
  latestPriorityFeeRange: [ '0.05', '9.249760902' ],
  historicalPriorityFeeRange: [ '0.023435712', '56.009283908' ],
  historicalBaseFeeRange: [ '19.277073248', '31.361941035' ],
  priorityFeeTrend: 'down',
  baseFeeTrend: 'up'
}
Kopieren

Wenn Sie die im Terminal angezeigten Daten sehen, bedeutet dies, dass wir erfolgreich Antworten von der API erhalten. Der nächste Schritt besteht darin, diese Daten auf unserem Frontend darzustellen. Sie können die Datei index.js nun löschen.

Gasdaten im Frontend anzeigen

Um benutzerdefinierte Typen für das gesamte Projekt zu definieren, erstellen Sie eine Datei namens 'index.d.ts' im Stammverzeichnis und fügen Sie die folgenden Zeilen hinzu:

interface GasFeeEstimate {
    suggestedMaxPriorityFeePerGas: string;
    suggestedMaxFeePerGas: string;
    minWaitTimeEstimate: number;
    maxWaitTimeEstimate: number;
  }

  interface GasFeesApiResponse {
    low: GasFeeEstimate;
    medium: GasFeeEstimate;
    high: GasFeeEstimate;
    estimatedBaseFee: string;
    networkCongestion: number;
    latestPriorityFeeRange: string[];
    historicalPriorityFeeRange: string[];
    historicalBaseFeeRange: string[];
    priorityFeeTrend: 'up' | 'down';
    baseFeeTrend: 'up' | 'down';
  }
Kopieren

Diese TypeScript-Interface-Deklarationen in einer globalen Datei definieren Strukturen für Gas-Gebührenschätzungen und API-Antworten. Sie umfassen Details wie Gebührenvorschläge, Wartezeiten, Netzwerküberlastung und Gebührentrends für verschiedene Transaktionsprioritätsstufen in einem Blockchain-Netzwerk.

Erstellen Sie im Ordner 'lib' eine Datei namens 'getData.ts' und fügen Sie den folgenden Code hinzu:

const Auth = Buffer.from(
  process.env["INFURA_API_KEY"] + ":" + process.env["INFURA_API_KEY_SECRET"]
).toString("base64");

// The chain ID of the supported network
const chainId = 1;

export const getData = async () => {
  try {
    const res = await fetch(
      `https://gas.api.infura.io/networks/${chainId}/suggestedGasFees`,
      {
        headers: {
          Authorization: `Basic ${Auth}`,
        },
      }
    );

    const data = await res.json();

    return data as GasFeesApiResponse;
  } catch (error) {
    console.log("Server responded with:", error);
  }
};
Kopieren

Dieser Code ruft Gas-Gebührendaten von der Gas API ab:

1. Authentifizierungs-Setup: Erstellt einen Buffer aus dem INFURA_API_KEY und dem INFURA_API_KEY_SECRET, die als Umgebungsvariablen gesetzt sind. Dieser Buffer wird dann in einen base64-String (namens 'Auth') für die Basisauthentifizierung bei API-Anfragen umgewandelt.

2. Chain-ID-Angabe: Setzt die Variable chainId auf 1, was in Blockchain-Kontexten typischerweise das Ethereum-Mainnet repräsentiert.

3. getData-Funktion: Eine asynchrone Funktion zum Abrufen von Gas-Gebührendaten:

• Sie verwendet fetch, um eine GET-Anfrage an den Infura-API-Endpunkt zu stellen und empfohlene Gasgebühren für die angegebene chainId abzurufen.

• Sie setzt den Authorization-Header in der Anfrage mithilfe des zuvor erstellten Auth-Tokens.

• Bei Erfolg wird die Antwort als JSON geparst und als GasFeesApiResponse zurückgegeben, entsprechend dem zuvor definierten Interface.

• Fehler wie Netzwerkprobleme oder Serverfehler werden in der Konsole protokolliert.

Variabilität der Chain-ID: Die chainId kann je nach Netzwerk, für das die App erstellt wird, angepasst werden. Die Gas API auf Infura unterstützt die meisten wichtigen EVM-Netzwerke. Weitere Informationen zu unterstützten Netzwerken finden Sie in der Dokumentation.

An der Benutzeroberfläche arbeiten

Wir haben nun den spannenden Teil erreicht, in dem wir uns auf die Benutzeroberfläche zur Datenanzeige konzentrieren. Navigieren wir zum Komponentenordner und erstellen eine Komponente namens 'GasCard.tsx'.

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

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

  const renderGasFeeEstimateCard = (
    estimate: GasFeeEstimate,
    title: string
  ) => (
    <Card>
      <CardHeader>
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <p>Max Priority Fee: {estimate.suggestedMaxPriorityFeePerGas}</p>
        <p>Max Fee Per Gas: {estimate.suggestedMaxFeePerGas}</p>
        <p>Min Wait Time: {estimate.minWaitTimeEstimate} seconds</p>
        <p>Max Wait Time: {estimate.maxWaitTimeEstimate} seconds</p>
      </CardContent>
    </Card>
  );

  return (
    <div className="space-y-4">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {data?.low &&
          renderGasFeeEstimateCard(data.low, "Low Gas Fee Estimate")}
        {data?.medium &&
          renderGasFeeEstimateCard(data.medium, "Medium Gas Fee Estimate")}
        {data?.high &&
          renderGasFeeEstimateCard(data.high, "High Gas Fee Estimate")}
      </div>
      <Card>
        <CardContent>
          <h2 className="font-semibold">Estimated Base Fee</h2>
          <p>Gas Price: {data?.estimatedBaseFee}</p>
          <h2 className="font-semibold">Network Congestion</h2>
          <p>{data?.networkCongestion}</p>
          <h2 className="font-semibold">Latest Priority Fee Range</h2>
          <p>{data?.latestPriorityFeeRange.join(" - ")}</p>
          <h2 className="font-semibold">Historical Priority Fee Range</h2>
          <p>{data?.historicalPriorityFeeRange.join(" - ")}</p>
          <h2 className="font-semibold">Historical Base Fee Range</h2>
          <p>{data?.historicalBaseFeeRange.join(" - ")}</p>
          <h2 className="font-semibold">Priority Fee Trend</h2>
          <p>{data?.priorityFeeTrend}</p>
          <h2 className="font-semibold">Base Fee Trend</h2>
          <p>{data?.baseFeeTrend}</p>
        </CardContent>
      </Card>
    </div>
  );
};
Kopieren

Schauen wir uns an, was hier passiert ist:

1. Importe und Datenabruf:

• Die Komponente importiert die getData-Funktion zum Abrufen von Gas-Gebührendaten sowie verschiedene UI-Komponenten wie Card, CardContent, CardHeader und CardTitle, die Teil des zuvor installierten Shadcn UI sind.

• Innerhalb der GasCard-Komponente wird die getData-Funktion aufgerufen, um Gas-Gebührendaten abzurufen.

1. Darstellung der Gas-Gebührenschätzungen:

• Eine Funktion namens renderGasFeeEstimateCard wird definiert, die eine Karten-UI für eine bestimmte Gas-Gebührenschätzung (GasFeeEstimate) und einen Titel (title) rendert.

• Diese Funktion erstellt eine Card-Komponente, die Details wie die maximale Prioritätsgebühr, die maximale Gebühr pro Gas und die geschätzten Wartezeiten anzeigt.

1. Komponentenstruktur:

• Die JSX-Struktur der GasCard-Komponente ist in der return-Anweisung beschrieben. Sie verwendet ein Grid-Layout, um Karten für niedrige, mittlere und hohe Gas-Gebührenschätzungen anzuzeigen, die je nach Datenverfügbarkeit bedingt dargestellt werden.

• Eine zusätzliche Karte zeigt weitere Informationen wie die geschätzte Basisgebühr, Netzwerküberlastung, Prioritätsgebührenbereiche (aktuell und historisch) sowie Trends bei Prioritäts- und Basisgebühren.

Der einzige verbleibende Schritt besteht nun darin, GasCard.tsx in die Datei page.tsx zu importieren. Danach sollten alle Daten auf unserem Frontend sichtbar sein.

Erste Schritte mit der Gas API

Die Nutzung der Gas API auf Infura bietet Entwicklern, die mit EVM-kompatiblen Netzwerken arbeiten, erhebliche Vorteile. Sie liefert Echtzeit-Einblicke in den schwankenden Gasmarkt und ermöglicht es Nutzern, fundierte Entscheidungen über ihre Transaktionsgebühren zu treffen. Dies ist besonders vorteilhaft für die Optimierung sowohl der Geschwindigkeit als auch der Kosteneffizienz von Transaktionen.

Dieses Tutorial zeigt, wie man mit der GasAPI startet und eine einfache Gas Tracker App erstellt. Den Code finden Sie hier: GasAPI-Template auf GitHub.

Aber wir können damit noch viel mehr interessante Dinge tun: Wir können Möglichkeiten hinzufügen, GasData zu bestimmten Zeiten mit einem Countdown zu aktualisieren, und wir können die GasAPI auch in jede bestehende Anwendung integrieren. Ich empfehle, die folgenden Ressourcen zu besuchen:

Gas API Docs: Infura Gas API Dokumentation

EventSea: Eine Full-Stack-Events-Dapp, die die GasAPI kreativ nutzt: EventSea auf GitHub

Viel Spaß beim Entwickeln! 🚀