Comment construire un traqueur de gaz Ethereum avec Infura

Introduction

Lorsque vous commencez à créer des contrats intelligents sur Ethereum, vous réalisez rapidement que comprendre le gaz et les prix du gaz est fondamental pour des projets réussis. Lorsqu’il est effectué correctement, le suivi des prix du gaz peut vous aider à réaliser des milliers de dollars d’économies sur les déploiements.

Mais que sont exactement le gaz et les prix du gaz, et comment les suivez-vous ?

Répondons à cette question, puis utilisons Infura, une puissante suite d’API et d’outils de développement, pour créer votre propre traqueur de gaz qui peut vous aider à devenir un développeur Ethereum prospère.

Quels sont les prix du gaz et du gaz ?

En bref, si vous souhaitez exécuter une opération ou une transaction sur Ethereum, vous devez payer des frais comme vous le faites à la banque. Cette redevance est composée de deux parties : le gaz et le prix du gaz.

Gaz est une unité qui mesure la quantité d’effort de calcul nécessaire pour effectuer une opération spécifique sur le réseau Ethereum. En général, plus un programme (ou smart contract) est complexe, plus il consomme de gaz.

Le prix du gaz fait référence au montant payé par le déployeur (ou l’expéditeur) pour chaque unité de gaz. Les prix du gaz ont tendance à fluctuer énormément sur les chaînes de blocs publiques, en particulier Ethereum, et la façon de le calculer a également radicalement changé depuis sa création.

Comment sont calculés les prix du gaz ?

Plus tôt dans le cycle de vie d’Ethereum, les prix du gaz étaient calculés à l’aide d’un modèle d’enchères à l’aveugle. Dans ce modèle, vous offririez un prix du gaz pour exécuter votre opération.

Donc, ce que vous avez payé pour exécuter une opération sur Ethereum était unités de gaz * prix du gaz.

Un mineur choisirait alors généralement les transactions qui offraient les prix les plus élevés et empocherait la totalité du montant.

De plus, un bloc ne pouvait contenir que 15 millions de gaz de transactions, quel que soit le volume de trafic rencontré par le réseau.

Le London Hard Fork, qui a mis en œuvre la proposition EIP-1559, a entraîné les changements suivants :

1. Le prix de l’enchère à l’aveugle a été remplacé par deux frais : un frais de base et un frais de priorité.
2. Le réseau calcule automatiquement les frais de base pour le bloc à venir. Il peut augmenter ou diminuer de 12,5 % au maximum, selon le volume. Cette redevance est brûlée par le réseau.
3. Le droit de priorité est un pourboire déterminé par l’utilisateur et versé au validateur. En général, plus les frais de priorité sont élevés, plus l’opération est confirmée rapidement.
4. Le volume maximal de blocs a été doublé à 30 millions de gaz pour gérer les pics soudains de trafic. Cependant, on s’attend à ce que le volume moyen oscille autour de 50 %.

Alors maintenant, ce que vous payez = unités de gaz * (frais de base + frais de priorité). (pour plus de détails, voir ici).

Afin d’exécuter une opération sur Ethereum et d’estimer le coût correspondant, vous devrez surveiller trois choses :

1. Le tarif de base
2. La gamme des frais prioritaires
3. Le volume ou le gaz utilisé par le dernier bloc.

Le projet

Maintenant que nous comprenons les prix du gaz et du gaz, construisons un traqueur de gaz Ethereum entièrement fonctionnel afin que vous puissiez surveiller les prix du gaz en temps réel. Ce tutoriel est divisé en deux parties :

1. Dans la première partie, nous allons créer un script de nœud qui extrait l’historique des prix du gaz des cinq derniers blocs à chaque fois qu’un nouveau bloc est extrait.
2. Dans la deuxième partie, nous déploierons une application React qui s’appuie sur le script créé dans la première partie. Cette application agira comme un tableau de bord en direct des frais de base et de l’utilisation constatée au cours des cinq derniers blocs.

Partie 1 : Script de nœud de suivi de gaz

Étape 1 : Installer NPM et Node

Nous allons construire notre projet en utilisant node et NPM. Cliquez ici pour les installer sur votre ordinateur local.

Pour vous assurer que tout fonctionne correctement, exécutez la commande suivante : $ node -v

Si tout se passe bien, vous devriez voir un numéro de version pour le nœud.

Étape 2 : Créer un compte Infura

Afin d’obtenir les derniers prix du gaz et l’historique des prix, nous utiliserons l’API Ethereum d’Infura. Nous utilisons Infura parce que c’est simple, rapide et fiable.

Infura nous permet d’obtenir toutes les informations dont nous avons besoin en utilisant un seul appel API.

Après avoir créé votre compte, accédez au tableau de bord et Créer une nouvelle clé.

Pour le réseau, choisissez API Web3 et nommez-le Traqueur de gaz.

Une fois que vous aurez cliqué sur Créer, Infura générera une clé API pour vous et vous fournira automatiquement des points de terminaison RPC vers Ethereum, L2 et L1 non EVM.

Pour ce tutoriel, nous nous intéressons uniquement au point de terminaison Ethereum RPC. Cette URL est : https://mainnet.infura.io/v3/←API KEY→

Étape 3 : Créer un projet de nœud

Nous avons maintenant tout ce dont nous avons besoin pour créer notre script de nœud. Ouvrez un terminal et exécutez les commandes suivantes pour créer un nouveau projet de nœud :

$ mkdir gas-tracker && cd gas-tracker
$ npm init -y
$ npm install axios
$ touch main.js

Étape 4 : Rédigez le script de suivi des gaz

Nous utiliserons les API Infura Ethereum eth_feeHistory méthode pour avoir accès aux frais de gaz (à la fois de base et prioritaires) et aux volumes des cinq derniers blocs.

Le eth_feeHistory prend deux arguments obligatoires : blockCount et bloc le plus récent. Nous définirons le premier sur cinq et le second sur le « dernier ».

Ouvrez le main.js fichier et ajoutez le code suivant :

const axios = require('axios');

// Infura URl
const baseUrl = "https://mainnet.infura.io/v3/fbd1cd3ce9494434ac35c07bac0e4e74";

let data = JSON.stringify({
    "jsonrpc": "2.0",
    "method": "eth_feeHistory",
    "params": [
        "0x5",
        "latest",
        []
    ],
    "id": 1
});

var config = {
    method: 'post',
    url: baseUrl,
    headers: {
        'Content-Type': 'application/json'
    },
    data: data
};

axios(config)
    .then(function (response) {

        // Extract fee history
        let history = response['data']['result'];

        // Convert base fee to decimal Gwei
        history['baseFeePerGas'] = history['baseFeePerGas'].map(x => parseInt(x) / 10 ** 9);

        // Convert block numnber to decimal
        history['oldestBlock'] = parseInt(history['oldestBlock'])

        // Print formatted history
        console.log(history);
    })
    .catch(function (error) {
        console.log(error);
    });

Exécutez ce code à l’aide de la commande suivante : node main.js

Si tout se passe bien, vous devriez voir une sortie qui ressemble à ceci :

{
  baseFeePerGas: [
    25.509376962,
    25.514591928,
    24.67088008,
    24.426258847,
    24.10987203,
    25.914394489
  ],
  gasUsedRatio: [
    0.5008177333333333,
    0.36772873333333334,
    0.46033846666666667,
    0.4481890666666667,
    0.7993831666666666
  ],
  oldestBlock: 16690595
}

L’exécution de ce script à tout moment vous permettra d’obtenir les derniers prix et utilisation du gaz. Cependant, ce n’est pas très convivial. Dans la section suivante, construisons un tableau de bord à l’aide de React qui se met à jour chaque fois qu’un nouveau bloc est extrait.

Partie 2 : Application de tableau de bord Gas Tracker

Étape 1 : Téléchargez le référentiel de démarrage

Nous avons déjà créé un référentiel de démarrage pour vous avec des styles et des crochets personnalisés qui seront utiles pour créer notre application de suivi des gaz.

Ouvrez votre terminal et exécutez les commandes suivantes :

$ git clone https://github.com/rounakbanik/infura-gas-tracker.git
$ npm install

Cela devrait installer toutes les dépendances requises pour notre application.

Étape 2 : Écrivez la logique de l’application

Notre application de suivi du gaz nous donnera des informations sur les frais de base, le volume de gaz et le numéro de bloc des cinq derniers blocs sur la blockchain Ethereum.

Il actualisera également ces données toutes les 15 secondes en interrogeant l’API Infura à l’aide du crochet personnalisé useInterval.

Le code pour extraire les données de l’API est presque identique à ce que nous avons fait dans la partie 1. Nous n’avons que quelques étapes supplémentaires liées au formatage.

Ouvrez le fichier App.js et remplacez son contenu par ce qui suit :

import './App.css';
import axios from 'axios';
import { useState } from 'react';
import { useInterval } from './hooks/useInterval';

// Infura URl
const baseUrl = "https://mainnet.infura.io/v3/fbd1cd3ce9494434ac35c07bac0e4e74";

// Data and configuration required to make the API request
let data = JSON.stringify({
  "jsonrpc": "2.0",
  "method": "eth_feeHistory",
  "params": [
    "0x5",
    "latest",
    []
  ],
  "id": 1
});

let config = {
  method: 'post',
  url: baseUrl,
  headers: {
    'Content-Type': 'application/json'
  },
  data: data
};

function App() {

  // Variable that holds history of the last 5 blocks
  const [feeHistory, setFeeHistory] = useState(null);

  // useInterval is like useEffect, except that it is called after a certain interval 
  // In our case, this is 15 seconds
  useInterval(() => {

    const getFeeHistory = async () => {

      // Extract fee history
      const response = await axios(config);
      let history = response['data']['result'];

      // Convert base fee to Gwei
      history['baseFeePerGas'] = history['baseFeePerGas'].map(x => (parseInt(x) / 10 ** 9).toFixed(2));

      // Convert block to decimal
      history['oldestBlock'] = parseInt(history['oldestBlock'])

      // Truncate decimals of gas used and convert to percentage
      history['gasUsedRatio'] = history['gasUsedRatio'].map(x => (x * 100).toFixed(2))

      // Get block range
      let blockRange = []
      for (let i = 0; i < 5; i++) blockRange.push(history['oldestBlock'] + i);

      // Create a 2D array consisting of all the information received from the API
      let formattedHistory = [
        blockRange,
        history['baseFeePerGas'].slice(0, 5),
        history['gasUsedRatio']
      ];

      // Transpose the array
      // This is done so we can populate HTML tables more easily
      const transpose = m => m[0].map((x, i) => m.map(x => x[i]))
      formattedHistory = transpose(formattedHistory);

      setFeeHistory(formattedHistory);
      console.log(formattedHistory);
    }

    // Call function every 15...