BTC
ETH
HTX
SOL
BNB
Xem thị trường
简中
繁中
English
日本語
한국어
ภาษาไทย
Tiếng Việt

Hiểu cách xây dựng trình theo dõi khí Ethereum trong năm phút

ChinaDeFi
特邀专栏作者
2022-01-07 07:13
Bài viết này có khoảng 6731 từ, đọc toàn bộ bài viết mất khoảng 10 phút
Hiểu rõ hơn và đánh giá cao những cải tiến mà nó mang lại cho các giao dịch Ethereum bằng cách xây dựng bộ theo dõi gas cho EIP-1559 ngay từ đầu.
Tóm tắt AI
Mở rộng
Hiểu rõ hơn và đánh giá cao những cải tiến mà nó mang lại cho các giao dịch Ethereum bằng cách xây dựng bộ theo dõi gas cho EIP-1559 ngay từ đầu.

giới thiệu

tiêu đề phụ

giới thiệu

  • Hard fork ở London vào tháng 8 năm 2021 đã mang lại bản nâng cấp lớn nhất trong lịch sử của mạng Ethereum. Đợt fork thực hiện EIP-1559; một cơ chế định giá gas được quảng cáo là vượt trội so với mô hình đấu giá mù. Nó cũng giới thiệu một sự thay đổi cơ bản trong chính sách tiền tệ của Ethereum (ETH), khiến nó trở thành một loại tiền tệ giảm phát, ít nhất là trong ngắn hạn.

  • Trong hướng dẫn này, chúng tôi sẽ xây dựng một trình theo dõi gas theo dõi hai thành phần mới của phí gas trong EIP-1559 và các thống kê khác (chẳng hạn như kích thước khối) cho 20 khối gần đây nhất. Bằng cách này, chúng ta sẽ đạt được hai mục tiêu quan trọng:

Hiểu sâu hơn về cách thức hoạt động của EIP-1559 và những cải tiến mà nó mang lại.

Một ứng dụng theo dõi gas đầy đủ tính năng truy xuất khối lượng khối và phí gas mới nhất, được phân loại theo phí cơ bản và phí ưu tiên.

Để thực hiện việc này, chúng tôi sẽ sử dụng Alchemy, thư viện web3.js của Alchemy, Node và React. Nếu những từ này nghe có vẻ xa lạ với bạn, đừng lo lắng, chúng tôi sẽ đề cập đến chúng một cách chi tiết!

Hướng dẫn này giả định rằng người đọc đã có hiểu biết cơ bản về cách gas và giá gas hoạt động trên Ethereum. Hiểu biết sơ bộ về EIP-1559 cũng hữu ích, nhưng không bắt buộc.

  • Đánh giá nhanh EIP-1559

  • EIP-1559 mang đến những thay đổi sau đối với cơ chế định giá gas của Ethereum:

  • Phí gas đấu giá mù hiện được thay thế bằng hai loại phí: phí cơ bản và phí ưu tiên (hoặc tiền boa cho người khai thác).

  • Phí cơ sở được xác định tự động bởi mạng. Nó có thể tăng lên 12,5% nếu khối trước đó đầy và giảm xuống 12,5% nếu khối trước đó trống.

Tiền boa của người khai thác được xác định bởi người dùng và có thể được điều chỉnh theo mức độ khẩn cấp của giao dịch.

Phí cơ sở được mạng đốt cháy để ngăn chặn các công cụ khai thác làm ngập các khối một cách giả tạo. Tuy nhiên, những người khai thác có thể bỏ túi tiền boa.

Ngoài việc cải thiện giá gas, EIP-1559 cũng đề xuất các cải tiến để trang bị mạng tốt hơn nhằm xử lý các đợt lưu lượng truy cập đột ngột. Như bạn có thể biết, các giao dịch trong Ethereum được nhóm thành các khối. Trước ngã ba, một khối chỉ có thể chứa 15 triệu giao dịch gas bất kể lưu lượng truy cập.

Với việc nâng cấp, giới hạn kích thước khối đã tăng gấp đôi lên 30 triệu gas. Điều này được thực hiện để đáp ứng tốt hơn với các giai đoạn nhu cầu gia tăng. Tuy nhiên, dự kiến ​​phí cơ sở sẽ điều chỉnh ở mức trung bình 50% khối lượng khối (hoặc khí được sử dụng bởi khối) hoặc khoảng 15 triệu gas.

Bạn có thể thấy tất cả những thứ này hoạt động như thế nào trong thời gian thực với bộ theo dõi khí mà chúng tôi đã tạo. Chúng tôi sẽ xây dựng dự án này thành hai phần: Trong phần đầu tiên, chúng tôi sẽ viết một tập lệnh nút theo dõi lịch sử phí giao dịch trong thời gian thực. Trong phần thứ hai, chúng tôi sẽ sử dụng tập lệnh này để tạo ứng dụng React nhằm xây dựng trình theo dõi cuối cùng.

Phần 1: Kịch bản lịch sử phí giao dịch

Trong phần này, chúng tôi sẽ viết một tập lệnh (trong một nút) cho phép chúng tôi lấy lịch sử phí gas cho 20 khối cuối cùng trên mạng Ethereum.

Bước 0: Cài đặt nút và npm

Đảm bảo rằng bạn đã cài đặt nút và npm (ít nhất là v14 trở lên) trên máy cục bộ của mình.

Bước 1: Tạo tài khoản Alchemy

Để có được lịch sử phí gas mới nhất cho một khối, chúng tôi cần kết nối với mạng Ethereum để liên lạc. Alchemy là một nền tảng phát triển chuỗi khối cho phép chúng tôi thực hiện điều này mà không cần khởi chạy các nút của riêng mình.

Bước 2: Tạo ứng dụng Alchemy (và khóa API)

Tạo một ứng dụng trên bảng điều khiển Alchemy. Chuỗi được đặt thành Ethereum và mạng được đặt thành mạng chính.

Tiếp theo, hãy truy cập trang ứng dụng của bạn và nhấp vào Xem khóa. Thao tác này sẽ mở một cửa sổ bật lên chứa URL HTTP và Websocket của ứng dụng. Trong hướng dẫn này, chúng tôi sẽ sử dụng URL Websocket.

Bước 3: Tạo một dự án nút và cài đặt các phụ thuộc

> mkdir gas-tracker-script && cd gas-tracker-script > npm init -y > npm install --save @alch/alchemy-web3 > touch main.js

Bây giờ chúng ta có thể bắt đầu viết tập lệnh nút. Hãy tạo một kho lưu trữ trống và cài đặt các phụ thuộc. Đối với tập lệnh này, chúng tôi sẽ cần thư viện Alchemy web3.js.

Trên thiết bị đầu cuối của bạn (hoặc dấu nhắc lệnh), hãy chạy lệnh sau:

Thao tác này sẽ tạo một kho lưu trữ có tên là gas tracker-script với tất cả các tệp và phần phụ thuộc mà chúng tôi cần. Mở repo này trong trình chỉnh sửa mã yêu thích của bạn. Chúng tôi sẽ viết tất cả mã trong tệp main.js.

Bước 4: Tạo phiên bản máy khách web3 bằng Alchemy

const { createAlchemyWeb3 } = require("@alch/alchemy-web3");// Using WebSockets
const web3 = createAlchemyWeb3(
   "wss://eth-mainnet.alchemyapi.io/v2/<--API KEY-->",

);

Tạo một phiên bản máy khách với Alchemy web3 rất đơn giản.

Trong tệp main.js, hãy thêm các dòng mã sau:

Đảm bảo thay thế trình giữ chỗ ở trên bằng URL websocket của ứng dụng của bạn.

Bước 5: Lấy lịch sử của 20 khối gần nhất

Chúng tôi muốn lịch sử chi phí gas cho 10 khối cuối cùng. Dữ liệu chúng tôi quan tâm bao gồm phí cơ bản, phạm vi phí ưa thích, kích thước khối và số khối.

May mắn thay, Alchemy có một eth_feeHistory rất tiện dụng, tự động trả về tất cả dữ liệu nói trên.

web3.eth.getFeeHistory(20, "latest", [25, 50, 75]).then(console.log)

Tất cả những gì chúng tôi cần chỉ định là khối gần đây nhất mà chúng tôi muốn có dữ liệu, tổng số khối cần xem và phạm vi phần trăm cho mức phí ưu tiên.

Chúng tôi quan tâm đến 20 khối gần đây nhất và phần trăm thứ 25, 50 và 75 của phí ưu tiên.

Chạy tập lệnh này (sử dụng nút main.js) sẽ tìm nạp dữ liệu bạn đang tìm kiếm. Đây là một số dữ liệu, kết quả tôi nhận được sau khi yêu cầu 5 khối dữ liệu.

Bước 6: Định dạng đầu ra

const formatOutput = (data, numBlocks) => {    let blocks = []
   for (let i = 0; i < numBlocks; i++) {
       blocks.push({
           blockNumber: Number(data.oldestBlock) + i,
           reward: data.reward[i].map(r => Math.round(Number(r) / 10 ** 9)),
           baseFeePerGas: Math.round(Number(data.baseFeePerGas[i]) / 10 ** 9),
           gasUsedRatio: data.gasUsedRatio[i],
       })
   }

   return blocks;

Đầu ra chúng tôi nhận được ở bước 5 là chính xác, nhưng không dễ đọc lắm. Các khoản phí được thể hiện ở dạng thập lục phân và cấu trúc dữ liệu gây khó khăn cho việc tìm ra dữ liệu nào tương ứng với khối nào.

const numBlocks = 5;web3.eth.getFeeHistory(numBlocks, "latest", [25, 50, 75]).then((data) => {
   const blocks = formatOutput(data, numBlocks);
   console.log(blocks);

});

Hãy viết một hàm nhỏ chuyển đổi dữ liệu thô thành danh sách từ điển, trong đó mỗi từ điển sẽ chứa dữ liệu trên một khối cụ thể. Chức năng này cũng chuyển đổi tất cả các giá trị khí thập lục phân được biểu thị bằng wei thành số thập phân được biểu thị bằng Gwei.

Cuối cùng, hãy sử dụng hàm này dưới dạng feeHistory.

Chạy phiên bản tập lệnh này sẽ tạo đầu ra ở định dạng sau:

Bước 7: Đăng ký tiêu đề khối mới nhất

let subscription = web3.eth.subscribe('newBlockHeaders');subscription.on("data", () => {
   web3.eth.getFeeHistory(numBlocks, "latest", [25, 50, 75]).then((data) => {
       const blocks = formatOutput(data, numBlocks);
       console.log(blocks);
   });

});

Một khối mới được thêm vào chuỗi khối Ethereum cứ sau 15 giây. Vì vậy, lý tưởng nhất là chúng tôi muốn đăng ký các sự kiện cho các khối được thêm vào và cập nhật lịch sử giao dịch của chúng tôi để nó luôn hiển thị dữ liệu từ 20 khối gần nhất.

Hãy lồng hàm getFeeHistory bên trong cuộc gọi lại sự kiện đăng ký.

Chạy tập lệnh main.js bây giờ sẽ xuất ra một loạt dữ liệu mới nhất cứ sau 15 giây hoặc lâu hơn. Nếu bạn đã đi xa đến mức này, xin chúc mừng! Bây giờ bạn đã có một bộ theo dõi khí đầy đủ chức năng.

Phần 2: Ứng dụng React

Trong phần trước, chúng tôi đã viết một tập lệnh truy xuất lịch sử phí cho 20 khối gần nhất mỗi khi một khối mới được thêm vào mạng chính Ethereum.

Trong phần này, chúng ta sẽ xây dựng một ứng dụng React nhỏ truyền dữ liệu này từ thiết bị đầu cuối đến trình duyệt. Ngoài lịch sử giao dịch phí, chúng tôi cũng sẽ hiển thị phí gas trung bình và kích thước khối trong 20 khối vừa qua.

> npx create-react-app gas-tracker-frontend > cd gas-tracker-frontend

Bước 1: Khởi tạo dự án React và cài đặt các phụ thuộc

> npm install --save @alch/alchemy-web3

Thực hiện lệnh sau:

Điều này sẽ tạo ra một dự án React mẫu. Ngoài các phụ thuộc phản ứng, chúng ta cũng cần cài đặt thư viện Alchemy web3 từ phần trước.

import './App.css';
import { useEffect, useState } from 'react';
import { createAlchemyWeb3 } from '@alch/alchemy-web3';const NUM_BLOCKS = 20;function App() {  const [blockHistory, setBlockHistory] = useState(null);
 const [avgGas, setAvgGas] = useState(null);
 const [avgBlockVolume, setAvgBlockVolume] = useState(null);  const formatOutput = (data) => {    let avgGasFee = 0;
   let avgFill = 0;
   let blocks = [];    for (let i = 0; i < NUM_BLOCKS; i++) {      avgGasFee = avgGasFee + Number(data.reward[i][1]) + Number(data.baseFeePerGas[i])
     avgFill = avgFill + Math.round(data.gasUsedRatio[i] * 100);      blocks.push({
       blockNumber: Number(data.oldestBlock) + i,
       reward: data.reward[i].map(r => Math.round(Number(r) / 10 ** 9)),
       baseFeePerGas: Math.round(Number(data.baseFeePerGas[i]) / 10 ** 9),
       gasUsedRatio: Math.round(data.gasUsedRatio[i] * 100),
     })
   }    avgGasFee = avgGasFee / NUM_BLOCKS;
   avgGasFee = Math.round(avgGasFee / 10 ** 9)    avgFill = avgFill / NUM_BLOCKS;
   return [blocks, avgGasFee, avgFill];
 }  useEffect(() => {    const web3 = createAlchemyWeb3(
     "wss://eth-mainnet.alchemyapi.io/v2/<--API KEY-->",
   );    let subscription = web3.eth.subscribe('newBlockHeaders');    subscription.on('data', () => {
     web3.eth.getFeeHistory(NUM_BLOCKS, "latest", [25, 50, 75]).then((feeHistory) => {
       const [blocks, avgGasFee, avgFill] = formatOutput(feeHistory, NUM_BLOCKS);
       setBlockHistory(blocks);
       setAvgGas(avgGasFee);
       setAvgBlockVolume(avgFill);
     });
   });    return () => {
     web3.eth.clearSubscriptions();
   }
 }, [])
 return (
   


     

EIP-1559 Gas Tracker


     {!blockHistory &&

Data is loading...

}
     {avgGas && avgBlockVolume &&


       {avgGas} Gwei | {avgBlockVolume}% Volume
     

}
     {blockHistory &&
       
         
           
           
           
           
           
           
         
       
       
         {blockHistory.map(block => {
           return (
             
               
               
               
               
               
               
             
           )
         })}
       
     
Block NumberBase FeeReward (25%)Reward (50%)Reward (75%)Gas Used
{block.blockNumber}{block.baseFeePerGas}{block.reward[0]}{block.reward[1]}{block.reward[2]}{block.gasUsedRatio}%
}
   

 );

}export default App;

Bước 2: Điền vào tệp App.js

Tất cả logic của chúng tôi sẽ nằm trong tệp App.js. Sao chép nội dung sau vào tệp trên.

Vì đây không phải là khóa học về React nên chúng tôi sẽ không đi sâu vào các phần dành riêng cho React. Nhưng bạn sẽ có thể quan sát thấy rằng tất cả những gì chúng tôi đang làm là truy xuất lịch sử chi phí như chúng tôi đã làm trong tập lệnh và xuất nó dưới dạng bảng HTML.

Logic bổ sung duy nhất mà chúng tôi sử dụng là tính giá gas trung bình và kích thước khối trung bình trên 20 khối, đây là một nhiệm vụ tầm thường.

.main-container {
   text-align: center;
}table {
   border-collapse: collapse;
   margin: 20px auto;
   box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}thead {
   background: linear-gradient(267.45deg,#05d5ff -34.23%,#53f 99.39%);
   color: white;
   padding: 10px;
}th {
   font-size: 18px;
   padding: 15px;}tbody > tr {
   border-top: 1px solid #ccc;
   border-bottom: 1px solid #ccc;
   margin: 0px;
   padding: 15px;
}td {
   padding: 6px;
}.gas {
   color: #4299E1;
}.vol {

   color: #4C51BF;

(Tùy chọn) Bước 3: Thêm một số kiểu

Bạn có thể thêm một số kiểu cơ bản trong tệp App.css như sau:

npm start

Bước 4: Deploy ứng dụng lên localhost

Đây là giao diện của ứng dụng:

phân tích

Xin chúc mừng! Bạn có một ứng dụng theo dõi khí đầy đủ chức năng.

  • phân tích

  • Hãy quay lại và phân tích dữ liệu ở trên. Sau đây là kết quả trực tiếp của việc triển khai EIP-1559 mà chúng ta có thể quan sát được.

  • Phí cơ sở không dao động nhiều từ khối này sang khối khác. Trên thực tế, mức tăng hoặc giảm lớn nhất của nó là 12,5%.

Kích thước khối có xu hướng dao động, nhưng kích thước khối trung bình dao động khoảng 50%.

Tóm lại là

Dữ liệu dường như chỉ ra rằng chi phí gas dễ dự đoán hơn nhiều trong mô hình này. Vì mọi người đều trả phí cơ bản và phí ưu tiên như nhau, và trong hầu hết các trường hợp, phí ưu tiên chỉ là một phần nhỏ trong tổng số phí, nên hầu hết các giao dịch cuối cùng không phải trả giá cắt cổ cho tiền xăng. Do đó, dữ liệu mẫu này cho thấy EIP-1559 đã đạt được thành công các mục tiêu của mình; giá gas dễ dự đoán hơn, ít thanh toán thừa gas hơn.

Chúng tôi đã đề cập rất nhiều trong bài viết này. Bằng cách xây dựng bộ theo dõi gas cho EIP-1559 từ đầu, tôi hy vọng bạn có thể hiểu và đánh giá cao những cải tiến mà nó mang lại cho các giao dịch Ethereum.

liên kết gốc

ETH
Chào mừng tham gia cộng đồng chính thức của Odaily
Nhóm đăng ký
https://t.me/Odaily_News
Nhóm trò chuyện
https://t.me/Odaily_CryptoPunk
Tài khoản chính thức
https://twitter.com/OdailyChina
Nhóm trò chuyện
https://t.me/Odaily_CryptoPunk