Создание газового трекера Ethereum с помощью Infura: руководство
ethereum web3 gas-fees infura gas

Создание газового трекера Ethereum с помощью Infura: руководство

28 февраля 2023 г.

Когда вы впервые начинаете создавать смарт-контракты на Ethereum, вы быстро понимаете, что понимание газа и цен на газ имеет основополагающее значение для успешных проектов. Если все сделано правильно, отслеживание цен на газ может помочь вам сэкономить тысячи долларов на развертывании.

Но что такое газ и цены на газ и как их отслеживать?

Давайте ответим на этот вопрос, а затем с помощью Infura — мощного набора API и инструментов разработки — создадим собственный газоанализатор, который поможет вам стать успешным разработчиком Ethereum.

Что такое газ и цены на газ?

Короче говоря, если вы хотите выполнить операцию или транзакцию на Ethereum, вы должны заплатить комиссию так же, как в банке. Эта плата состоит из двух частей: газа и цены на газ.

Газ – это единица измерения количества вычислительных ресурсов, необходимых для выполнения определенной операции в сети Ethereum. Как правило, чем сложнее программа (или смарт-контракт), тем больше газа она потребляет.

Цена газа – это сумма, уплачиваемая разработчиком (или отправителем) за каждую единицу газа. Цены на газ, как правило, сильно колеблются в общедоступных блокчейнах, особенно в Ethereum, и способ его вычисления также сильно изменился с момента его создания.

Как рассчитываются цены на газ?

Ранее в жизненном цикле Ethereum цены на газ рассчитывались с использованием модели слепого аукциона. В этой модели вы предлагаете цену на газ для выполнения своей операции.

Таким образом, за выполнение операции на Ethereum вы заплатили единицы газа * цена газа.

Затем майнер обычно выбирает транзакции с самыми высокими ценами и присваивает себе всю сумму.

Кроме того, блок может содержать только 15 миллионов транзакций газа, независимо от объема трафика в сети.

Лондонский хард-форк, реализовавший предложение EIP-1559, привел к следующим изменениям:

  1. Стоимость слепого аукциона заменена двумя сборами: базовым и приоритетным.

2. Сеть автоматически рассчитывает базовую плату за предстоящий блок. Он может увеличиваться или уменьшаться максимум на 12,5% в зависимости от объема. Эта плата сжигается сетью.

3. Плата за приоритет — это чаевые, определяемые пользователем и выплачиваемые валидатору. Как правило, чем выше плата за приоритет, тем быстрее подтверждается операция.

4. Максимальный объем блока был удвоен до 30 миллионов газа, чтобы справиться с внезапными всплесками трафика. Однако ожидается, что средний объем будет колебаться около 50%.

Итак, теперь вы платите = единицы газа * (базовый сбор + приоритетный сбор). (подробнее см. здесь).

Таким образом, чтобы выполнить операцию на Ethereum и оценить соответствующую стоимость, вам необходимо отслеживать три вещи:

  1. Базовая комиссия

2. Диапазон приоритетных сборов

3. Объем или газ, использованный последней блокировкой.

Проект

Теперь, когда мы разобрались с газом и ценами на газ, давайте создадим полнофункциональное средство отслеживания газа Ethereum, чтобы вы могли следить за ценами на газ в режиме реального времени. Это руководство разделено на две части:

  1. В первой части мы создадим скрипт узла, который извлекает историю цен на газ за последние пять блоков каждый раз, когда добывается новый блок.

2. Во второй части мы развернем приложение React, основанное на сценарии, созданном в первой части. Это приложение будет выступать в качестве интерактивной панели управления базовой комиссией и использованием за последние пять блоков.

Часть 1. Скрипт узла отслеживания газа

Шаг 1. Установите NPM и узел

Мы создадим наш проект, используя node и NPM. Нажмите здесь, чтобы установить их на свой локальный компьютер.

Чтобы убедиться, что все работает правильно, выполните следующую команду:

$ узел -v

Если все пойдет хорошо, вы увидите номер версии узла.

Шаг 2. Зарегистрируйте учетную запись Infura

Чтобы получить последние цены на газ и историю цен, мы будем использовать Ethereum API от Infura. Мы используем Infura, потому что это просто, быстро и надежно. Infura позволяет нам получить всю необходимую информацию с помощью одного вызова API.

Зарегистрируйте бесплатную учетную запись здесь. После создания учетной записи перейдите на панель управления и выберите Создать новый ключ. n

Для сети выберите Web3 API и назовите его Gas Tracker.

Как только вы нажмете «Создать», Infura сгенерирует для вас ключ API и автоматически предоставит вам конечные точки RPC для Ethereum, L2 и L1 без EVM.

В этом руководстве нас интересует только конечная точка Ethereum RPC. Этот URL-адрес: https://mainnet.infura.io/v3/←API KEY→

Шаг 3. Создайте проект узла

Теперь у нас есть все необходимое для создания сценария узла. Откройте терминал и выполните следующие команды, чтобы создать новый проект узла:

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

Откройте файл gas-tracker в своем любимом редакторе кода. Мы будем писать весь наш код в файле main.js.

Шаг 4. Напишите скрипт для отслеживания газа

Мы будем использовать метод eth_feeHistory Infura Ethereum API, чтобы получить доступ к сборам за газ (как базовым, так и приоритетным) и объемам последних пяти блоков.

Метод eth_feeHistory принимает два обязательных аргумента: blockCount и newestBlock. Мы установим для первого значение пять, а для второго — «последний».

Откройте файл main.js и добавьте следующий код:

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

Запустите этот код с помощью следующей команды:

узел main.js

Если все пойдет хорошо, вы должны увидеть вывод, который выглядит примерно так:

{
  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
}

Из вывода видно, что у нас есть история комиссий от блоков 16690595 до 16690599. Базовая комиссия колеблется между 24 и 26 Gwei (один Gwei равен 0,000000001 ETH). Средняя загрузка этих пяти блоков также составляет около 50 % (как и ожидалось в соответствии с EIP-1559).

Запуск этого скрипта в любой момент времени предоставит вам последние цены на газ и его использование. Однако это не очень удобно для пользователя. В следующем разделе давайте создадим информационную панель с помощью React, которая обновляется каждый раз, когда создается новый блок.

Часть 2. Приложение панели мониторинга газа

Шаг 1. Загрузите начальный репозиторий

Мы уже создали для вас начальный репозиторий с пользовательскими стилями и крючками, которые будут полезны при создании нашего приложения для отслеживания газа.

Откройте терминал и выполните следующие команды:

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

Это должно установить все необходимые зависимости для нашего приложения.

Шаг 2. Напишите логику приложения

Наше приложение для отслеживания газа предоставит нам информацию о базовой комиссии, объеме газа и номере блока последних пяти блоков в блокчейне Ethereum.

Он также будет обновлять эти данные каждые 15 секунд, опрашивая Infura API с помощью пользовательского хука useInterval.

Код для извлечения данных из API почти идентичен тому, что мы делали в первой части. У нас есть только несколько дополнительных шагов, связанных с форматированием.

Откройте файл App.js и замените его содержимое следующим:

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 seconds
    getFeeHistory();

  }, 1000 * 15)

  return (
    <div className="App">
      <h1>Ethereum Gas Tracker</h1>
      {feeHistory && <table>
        <thead>
          <tr>
            <th>Block Number</th>
            <th>Base Fee (in Gwei)</th>
            <th>Gas Used</th>
          </tr>
        </thead>
        <tbody>
          {feeHistory.map(row => {
            return (
              <tr key={row[0]}>
                <td>{row[0]}</td>
                <td>{row[1]}</td>
                <td>{row[2]}%</td>
              </tr>
            )
          })}
        </tbody>
      </table>}
    </div>
  );
}

export default App;

Все готово! Давайте развернем наше приложение на локальном хосте, выполнив следующую команду:

запуск нпм

Когда вы посещаете https://localhost:3000, вы должны увидеть веб-приложение, которое выглядит примерно так: n

Вы также заметите, что таблица обновляется каждые 15 секунд, чтобы отразить добавление блоков в цепочку Ethereum.

Заключение

Поздравляем! Теперь вы понимаете, какие газы и цены на газ в Эфириуме. Вы также знаете, как создать газоанализатор с нуля с помощью Infura API.

Используя свой трекер, вы можете не только отслеживать последние цены и объемы, но и оценивать краткосрочные тренды. Попробуйте увеличить количество блоков с 5 до 20, и вы сможете четко видеть, как цены растут или падают в определенное время дня. Надеюсь, вы найдете это полезным!

Также опубликовано здесь< /эм>

Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE

COPYRIGHT 2020 COFFEE-WEB.RU