Comment implémenter l'API Gas MetaMask dans une Dapp de billetterie événementielle

Comprendre le prix du gas avant d'acheter des billets d'événements basés sur la blockchain est essentiel pour la transparence des coûts et une planification financière efficace. Dans le contexte des transactions blockchain, le terme « gas » désigne les frais nécessaires pour effectuer une transaction ou exécuter un contrat sur la blockchain.

Ces frais fluctuent en fonction de la demande du réseau. En connaissant le prix du gas à l'avance, les acheteurs de billets peuvent prendre des décisions plus éclairées concernant le coût total de leur achat. C'est particulièrement important, car les frais de gas peuvent considérablement alourdir le coût global du billet, notamment en période de forte congestion du réseau.

Dans ce tutoriel, nous allons intégrer la Gas API de MetaMask dans une dapp de billetterie événementielle existante, permettant aux utilisateurs de consulter les prix du gas lors de l'achat de billets.

Prérequis et dépendances

• 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.

Pour le framework frontend, nous utiliserons Next.js, et pour l'interface utilisateur, nous utiliserons ShadcnUI. Installons les composants ShadcnUI suivants :

npx shadcn-ui@latest add hover-card
npm i swr
Copier

Le code ci-dessus ajoutera le composant hover-card que nous utiliserons pour afficher les prix du gas, et installera la bibliothèque de hooks React SWR. La bibliothèque Stale-While-Revalidate (SWR) facilite la récupération de données depuis Internet. Elle fonctionne en utilisant d'abord les anciennes données enregistrées, puis en demandant de nouvelles données, et enfin en remplaçant les anciennes par ces nouvelles informations. Cela rend les sites web plus rapides et plus à jour.

Ensuite, nous installerons le composant react-circular-progressbar pour afficher des indicateurs de progression circulaires, utiles pour montrer la progression de tâches ou les états de chargement dans les applications web. Il est personnalisable et implémenté en SVG pour des graphiques de haute qualité.

Implémentation de la Gas API

Dans le répertoire app/web, créons le dossier suivant : app/api/gas. À l'intérieur, créons un fichier route.ts et ajoutons le code suivant :

import { NextResponse } from "next/server";

export async function GET(request: Request) {
  const { searchParams } = new URL(request.url);
  const chainId = searchParams.get("chainId");

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

  const gasPricesResp = await fetch(
    `https://gas.api.infura.io/networks/${chainId}/suggestedGasFees`,
    {
      headers: {
        Authorization: `Basic ${Auth}`,
      },
    }
  );

  const baseFeePercentileRes = await fetch(
    `https://gas.api.infura.io/networks/${chainId}/baseFeePercentile`,
    {
      headers: {
        Authorization: `Basic ${Auth}`,
      },
    }
  );

  const gasPricesData = await gasPricesResp.json();
  const baseFeePercentileData = await baseFeePercentileRes.json();

  return NextResponse.json({
    estimatedBaseFee: gasPricesData.estimatedBaseFee,
    baseFeeTrend: gasPricesData.baseFeeTrend,
    baseFeePercentile: baseFeePercentileData.baseFeePercentile,
  });
}
Copier

Voici ce que nous avons fait :

1. Extraction des paramètres de requête :- const { searchParams } = new URL(request.url); : Extrait les paramètres de recherche de l'URL de la requête.

• const chainId = searchParams.get("chainId"); : Récupère le paramètre chainId depuis l'URL, utilisé pour spécifier le réseau Ethereum.

1. Configuration de l'autorisation :- Les variables d'environnement INFURA_API_KEY et INFURA_API_SECRET sont combinées dans un Buffer, puis encodées en chaîne Base64. Cette chaîne est utilisée pour l'authentification HTTP de base lors des requêtes à l'API Infura.

2. Récupération des prix du gas et des données de percentile de frais de base :- Deux requêtes fetch asynchrones sont effectuées vers l'API Infura :- gasPricesResp récupère les frais de gas suggérés pour le réseau Ethereum spécifié (chainId).

• baseFeePercentileRes récupère le percentile des frais de base pour le même réseau.

• L'en-tête Authorization est défini avec les identifiants encodés en Base64.

1. Analyse et retour des données :- Les réponses des deux requêtes fetch sont converties en JSON.

• NextResponse.json({...}) crée et retourne une réponse JSON contenant les données suivantes :- estimatedBaseFee : Les frais de base estimés pour les transactions.

• baseFeeTrend : La tendance des frais de base (par exemple, à la hausse ou à la baisse).

• baseFeePercentile : La distribution en percentile des frais de base.

Création de l'interface utilisateur

Nous allons créer un composant appelé GasFeeCard.tsx et y ajouter le code suivant :

import useSWR, { mutate } from "swr";
import {
  CircularProgressbarWithChildren,
  buildStyles,
} from "react-circular-progressbar";
import "react-circular-progressbar/dist/styles.css";
import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card";
import { useEffect, useState } from "react";
import { ArrowUp, ArrowDown, InfoIcon } from "lucide-react";
import { useSDK } from "@metamask/sdk-react";

const REFETCH_INTERVAL = 10000;
const STEP_INTERVAL = 1000;
const NETWORK_LATENCY = 2000; // rough estimate of network latency to consider when refetching

// format the gas price nicely for small values
const formatGweiValues = (value: string) => {
  const gwei = parseFloat(value);

  if (gwei < 0.01) {
    return gwei.toExponential(2);
  } else {
    return gwei.toFixed(2);
  }
};

export function GasFeeCard() {
  const { chainId } = useSDK();

  const [countdown, setCountdown] = useState(REFETCH_INTERVAL);
  const [currentChainId, setCurrentChainId] = useState(chainId);

  useEffect(() => {
    if (chainId !== currentChainId) {
      setCurrentChainId(chainId);
      mutate("gas-data");
      if (countdown < NETWORK_LATENCY) {
        setCountdown(REFETCH_INTERVAL + NETWORK_LATENCY);
      }
      setCountdown(REFETCH_INTERVAL);
    }
  }, [countdown, chainId, currentChainId, mutate]);

  useEffect(() => {
    const interval = setInterval(() => {
      setCountdown((oldCountdown) => {
        if (oldCountdown <= 0) {
          mutate("gas-data");
          return REFETCH_INTERVAL;
        } else {
          return oldCountdown - STEP_INTERVAL;
        }
      });
    }, STEP_INTERVAL);

    return () => clearInterval(interval);
  }, [chainId]);

  const fetcher = () =>
    fetch(`/api/gas?&chainId=${parseInt(chainId || "0xe704")}`).then((res) =>
      res.json()
    );

  const {
    data: gasData,
    error: gasDataError,
    isLoading: gasDataLoading,
  } = useSWR("gas-data", fetcher);

  if (gasDataLoading) {
    return <p>loading</p>;
  }

  if (gasDataError) {
    return <p className="text-red-500">error</p>;
  }

  const trendingUp = gasData?.baseFeeTrend === "up";
  const trendingDown = gasData?.baseFeeTrend === "down";

  return (
    <HoverCard>
      <HoverCardTrigger asChild>
        <div className="cursor-pointer">
          <div className="flex space-x-1">
            <div className="w-6 h-6">
              <CircularProgressbarWithChildren
                strokeWidth={12}
                styles={buildStyles({
                  pathColor: trendingUp ? "red" : "green",
                })}
                value={
                  ((REFETCH_INTERVAL - countdown) / REFETCH_INTERVAL) * 100
                }
              >
                <>
                  {trendingUp && (
                    <ArrowUp
                      className="animate-bounceUp"
                      color="red"
                      size={14}
                    />
                  )}
                  {trendingDown && (
                    <ArrowDown
                      className="animate-bounceDown"
                      color="green "
                      size={14}
                    />
                  )}
                </>
              </CircularProgressbarWithChildren>
            </div>
            <p>
              ~{formatGweiValues(gasData?.estimatedBaseFee)}
              Gwei
            </p>
            <InfoIcon size={14} />
          </div>
        </div>
      </HoverCardTrigger>
      <HoverCardContent className="p-0 w-80">
        <div className="p-2 space-y-4">
          <p>
            This is an <strong>estimated base gas fee.</strong>
          </p>
          <p>
            50% of the historical base fees are less then or equal to{" "}
            <strong>
              ~{formatGweiValues(gasData?.baseFeePercentile)} Gwei
            </strong>
          </p>
        </div>
      </HoverCardContent>
    </HoverCard>
  );
}
Copier

Voici ce que nous avons fait :

1. Constantes :- REFETCH_INTERVAL, STEP_INTERVAL, NETWORK_LATENCY : Constantes pour gérer l'intervalle de récupération des données, l'intervalle de pas pour les mises à jour du compte à rebours, et la latence réseau estimée.

2. Fonction utilitaire :- formatGweiValues : Une fonction pour formater les valeurs de prix du gas dans un format lisible, utilisant la notation exponentielle pour les petites valeurs ou la notation à virgule fixe pour les valeurs plus grandes.

3. Composant GasFeeCard :- Utilise useSDK pour obtenir le chainId Ethereum actuel.

• Les variables d'état countdown et currentChainId sont initialisées.

• Le premier hook useEffect met à jour l'ID de chaîne actuel et déclenche une nouvelle récupération des données (mutate) lors d'un changement d'ID de chaîne. Il réinitialise également le minuteur du compte à rebours.

• Le second useEffect configure un intervalle qui décrémente le compte à rebours et déclenche une nouvelle récupération des données lorsque celui-ci atteint zéro. Il nettoie l'intervalle lors du démontage.

• fetcher : Une fonction qui récupère les données de gas depuis un endpoint API côté serveur, en passant l'ID de chaîne actuel comme paramètre de requête.

• useSWR : Ce hook est utilisé pour récupérer les données de gas via la fonction fetcher et fournit les états de données, de chargement et d'erreur.

1. Logique de rendu :- Le composant affiche conditionnellement les états de chargement et d'erreur.

• trendingUp et trendingDown sont des booléens déterminés par baseFeeTrend à partir des données de gas récupérées.

• L'interface principale consiste en une HoverCard avec un CircularProgressbarWithChildren indiquant la progression du compte à rebours et une icône de flèche montrant la tendance du prix du gas. Elle affiche les frais de base estimés en Gwei.

• Le HoverCardContent affiche des informations plus détaillées sur les frais de base estimés et le percentile historique des frais de base.

1. Style :- Le code utilise les classes Tailwind CSS pour le style (par exemple, text-red-500, cursor-pointer).

• Le CircularProgressbarWithChildren est stylisé pour changer de couleur en fonction de la tendance du prix du gas (rouge pour une hausse, vert pour une baisse).

Nous avons également utilisé les icônes ArrowUp, ArrowDown et InfoIcon de lucide-react. Il ne reste plus qu'à importer ce composant dans le composant GetTicket.tsx, afin qu'il s'affiche sous le prix total des billets.

Continuer à développer avec la Gas API de MetaMask

La connaissance du prix du gas permet aux acheteurs de choisir le moment le plus rentable pour effectuer leur achat, en réalisant potentiellement des économies en effectuant leurs transactions pendant les périodes où les prix du gas sont plus bas. Pour une plateforme de billetterie événementielle, fournir cette information renforce la transparence et la satisfaction des clients, car les utilisateurs se sentent davantage maîtres de leurs dépenses et peuvent éviter des frais inattendus.

Nous avons intégré la Gas API dans une dapp de billetterie événementielle existante. Vous pouvez trouver le code de ce tutoriel ici.

Je vous recommande également de consulter les ressources suivantes :

Documentation de la Gas API : https://docs.infura.io/infura-expansion-apis/gas-api

Template Gas API : https://github.com/meowyx/GasAPI-Template

Bonne création 🚀