Comment créer une application simple de suivi du gas avec Gas API et Next.js

Le terme « Gas » désigne une unité qui mesure la quantité d'effort de calcul nécessaire pour exécuter des opérations, comme effectuer des transactions ou exécuter des smart contracts. C'est comparable au carburant d'une voiture – indispensable pour que le réseau puisse traiter et valider les opérations. Chaque transaction sur Ethereum nécessite une quantité spécifique de gas, déterminée par sa complexité. Les utilisateurs définissent un prix du gas en Gwei (1 Gwei = 1 milliardième d'un Ether), représentant le montant d'Ether qu'ils sont prêts à payer par unité de gas.

Comprendre les prix du gas est essentiel dans les réseaux blockchain, car cela aide les utilisateurs à gérer le coût de leurs transactions. La connaissance des prix du gas actuels permet aux utilisateurs de choisir le moment le plus économique pour initier une transaction et d'en déterminer la vitesse. Être informé des prix du gas est également indispensable pour éviter les transactions échouées, planifier des budgets, comprendre la congestion du réseau et prendre des décisions d'investissement éclairées.

L'API Gas de MetaMask

L'API Gas de MetaMask, disponible via Infura, est un outil spécialisé conçu pour fournir des informations en temps réel sur les prix du gas pour les réseaux compatibles avec l'Ethereum Virtual Machine (EVM). Elle fonctionne comme un oracle, offrant des données actualisées sur les coûts de calcul requis pour exécuter des opérations ou des transactions sur ces réseaux. L'API permet aux développeurs de créer des fonctionnalités avancées d'estimation du gas, pouvant générer des économies sur les opérations de transaction back-end ou améliorer l'interface utilisateur.

Dans ce tutoriel, nous allons apprendre à créer une application Gas Tracker en utilisant l'API Gas, Next.js et ShadcnUI. Cette application permettra aux utilisateurs de dapp d'accéder aux prix du gas recommandés en fonction de leurs priorités de transaction, contribuant ainsi à garantir l'inclusion efficace de ces transactions dans un bloc blockchain.

Prérequis

• Une clé API Web3 et un secret de clé API valides.

• Node.js et npm ou yarn installés.

• Une bonne connaissance de Next.js et React.

Configuration de Next.js + ShadcnUI

Tout d'abord, assurez-vous que Node.js est installé sur votre machine. Une fois Node.js configuré, démarrez une nouvelle application Next.js en ouvrant votre terminal et en exécutant la commande suivante :

Après l'exécution de la commande, plusieurs invites apparaîtront et un nouveau répertoire sera créé sous le nom de projet que vous avez spécifié – j'ai utilisé gastracker-app – établissant ainsi la structure de base de Next.js et installant les dépendances essentielles. Accédez maintenant au répertoire de votre projet :

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
Copier

Naviguez dans votre nouveau répertoire de projet et activez l'application Next.js en mode développement. Vous pouvez ensuite explorer votre application en accédant à http://localhost:3000 dans votre navigateur.

cd gastracker-app
npm run dev
Copier

Conception de l'interface utilisateur

Pour notre application, nous utiliserons une bibliothèque de composants. Commençons par installer ShadcnUI :

Lors de l'installation, vous serez guidé pour configurer le fichier components.json avec les invites suivantes :

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
Copier

Cela étant fait, installons également le composant Card de Shadcn UI :

Dans ce tutoriel, nous nous concentrerons sur l'utilisation du composant Card de Shadcn UI. Pour en savoir plus sur ces composants, visitez le site web de Shadcn UI. Notre front end étant maintenant configuré, nous sommes prêts à commencer à travailler avec l'API Gas.

Dans le répertoire racine, créez un fichier nommé .env, dans lequel nous stockerons les identifiants suivants :

INFURA_API_KEY=
INFURA_API_KEY_SECRET=
Copier

Assurez-vous d'obtenir l'API_KEY et l'API_KEY_SECRET depuis votre tableau de bord Infura. Il est essentiel de ne pas pousser la clé API vers GitHub. Dans le répertoire racine, vérifiez le fichier .gitignore pour confirmer que les lignes nécessaires y figurent.

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

Nous aurons également besoin des packages axios et dotenv :

npm install axios
npm install dotenv
Copier

Maintenant, créez un fichier nommé 'index.js' à la racine de notre gastracker-app et copiez-y le code suivant :

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);
  }
})();
Copier

Dans une autre fenêtre de terminal, exécutez la commande suivante.

Vous devriez voir ce qui suit :

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'
}
Copier

Si vous observez les données affichées dans le terminal, cela indique que nous recevons bien des réponses de l'API. L'étape suivante consiste à présenter ces données sur notre frontend. Vous pouvez maintenant supprimer le fichier index.js.

Affichage des données gas sur le frontend

Pour définir des types personnalisés à utiliser dans tout le projet, créez un fichier nommé 'index.d.ts' dans le répertoire racine et ajoutez-y les lignes suivantes :

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';
  }
Copier

Ces déclarations d'interfaces TypeScript dans un fichier global définissent des structures pour les estimations de frais de gas et les réponses de l'API. Elles comprennent des détails tels que les suggestions de frais, les temps d'attente, la congestion du réseau et les tendances des frais pour différents niveaux de priorité de transaction sur un réseau blockchain.

Dans le dossier 'lib', créez un fichier nommé 'getData.ts' et ajoutez le code suivant :

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);
  }
};
Copier

Ces codes récupèrent les données de frais de gas depuis l'API Gas :

1. Configuration de l'authentification : Crée un Buffer à partir de l'INFURA_API_KEY et de l'INFURA_API_KEY_SECRET, définis comme variables d'environnement. Ce Buffer est ensuite converti en chaîne base64 (nommée 'Auth') pour l'authentification de base dans les requêtes API.

2. Spécification du Chain ID : Définit la variable chainId à 1, représentant généralement le mainnet Ethereum dans les contextes blockchain.

3. Fonction getData : Une fonction asynchrone conçue pour récupérer les données de frais de gas :

• Elle utilise fetch pour effectuer une requête GET vers le point de terminaison de l'API Infura, récupérant les frais de gas suggérés pour le chainId spécifié.

• Elle définit l'en-tête Authorization dans la requête en utilisant le token Auth créé précédemment.

• En cas de succès, elle analyse la réponse en JSON et la retourne sous forme de GasFeesApiResponse, conformément à l'interface définie précédemment.

• Elle consigne toutes les erreurs, telles que les problèmes réseau ou les erreurs serveur, dans la console.

Variabilité du Chain ID : Le chainId peut être ajusté en fonction du réseau pour lequel l'application est construite. L'API Gas sur Infura prend en charge la plupart des principaux réseaux EVM. Pour plus d'informations sur les réseaux pris en charge, consultez la documentation.

Travail sur l'interface utilisateur

Nous voici maintenant à la partie la plus intéressante, où nous allons nous concentrer sur l'interface utilisateur pour afficher les données. Naviguons vers le dossier components et créons un composant nommé '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>
  );
};
Copier

Voici ce qui s'est passé :

1. Imports et récupération des données :

• Le composant importe la fonction getData pour récupérer les données de frais de gas, ainsi que divers composants d'interface utilisateur tels que Card, CardContent, CardHeader et CardTitle, qui font partie de Shadcn UI installé précédemment.

• À l'intérieur du composant GasCard, la fonction getData est invoquée pour récupérer les données de frais de gas.

1. Rendu des estimations de frais de gas :

• Une fonction nommée renderGasFeeEstimateCard est définie, qui affiche une interface de carte pour une estimation de frais de gas spécifique (GasFeeEstimate) et un titre (title).

• Cette fonction construit un composant Card affichant des détails tels que les frais de priorité maximaux, les frais maximaux par gas et les temps d'attente estimés.

1. Structure du composant :

• La structure JSX du composant GasCard est décrite dans l'instruction return. Elle utilise une mise en page en grille pour afficher des cartes pour les estimations de frais de gas faibles, moyennes et élevées, affichées conditionnellement selon la disponibilité des données.

• Une carte supplémentaire affiche plus d'informations telles que les frais de base estimés, la congestion du réseau, les plages de frais de priorité (récentes et historiques) et les tendances des frais de priorité et de base.

Il ne reste plus qu'à importer GasCard.tsx dans le fichier page.tsx. Après cela, toutes les données devraient être visibles sur notre frontend.

Commencer à utiliser l'API Gas

L'utilisation de l'API Gas sur Infura offre des avantages significatifs aux développeurs travaillant avec des réseaux compatibles EVM. Elle fournit des informations en temps réel sur le marché fluctuant du gas, permettant aux utilisateurs de prendre des décisions éclairées concernant leurs frais de transaction. Cela est particulièrement bénéfique pour optimiser à la fois la rapidité et la rentabilité des transactions.

Ce tutoriel explique comment démarrer avec l'API Gas et créer une application Gas Tracker simple. Vous pouvez trouver le code ici : GasAPI-Template sur GitHub.

Mais nous pouvons faire bien plus de choses intéressantes avec cela ; nous pouvons ajouter des moyens d'actualiser les données Gas à certains intervalles avec un compte à rebours, et nous pouvons également intégrer l'API Gas dans n'importe quelle application existante. Je vous recommande de consulter les ressources suivantes :

Documentation de l'API Gas : Documentation de l'API Gas Infura

EventSea : Une dapp Events full-stack qui utilise de manière créative l'API Gas : EventSea sur GitHub

Bonne construction ! 🚀