แนะนำ

ชื่อเรื่องรอง

แนะนำ

• การ hard fork ในลอนดอนในเดือนสิงหาคม 2021 นำมาซึ่งการอัปเกรดครั้งใหญ่ที่สุดในประวัติศาสตร์ของเครือข่าย Ethereum Fork ใช้ EIP-1559 ซึ่งเป็นกลไกการกำหนดราคาก๊าซที่เรียกได้ว่าเหนือกว่ารูปแบบการประมูลแบบปิดตา นอกจากนี้ยังแนะนำการเปลี่ยนแปลงขั้นพื้นฐานในนโยบายการเงินของ Ethereum (ETH) ทำให้เป็นสกุลเงินเงินฝืด อย่างน้อยก็ในระยะสั้น

• ในบทช่วยสอนนี้ เราจะสร้างตัวติดตามก๊าซที่ติดตามองค์ประกอบใหม่สองส่วนของค่าธรรมเนียมก๊าซใน EIP-1559 และสถิติอื่นๆ (เช่น ขนาดบล็อก) สำหรับ 20 บล็อกล่าสุด เมื่อทำเช่นนี้ เราจะบรรลุเป้าหมายสำคัญสองประการ:

ทำความเข้าใจอย่างลึกซึ้งยิ่งขึ้นเกี่ยวกับวิธีการทำงานของ EIP-1559 และการปรับปรุงอะไรบ้าง

แอปพลิเคชั่นติดตามก๊าซที่มีคุณสมบัติครบถ้วนซึ่งดึงข้อมูลปริมาณบล็อกล่าสุดและค่าธรรมเนียมก๊าซ โดยจัดหมวดหมู่ตามค่าธรรมเนียมพื้นฐานและลำดับความสำคัญ

ในการทำเช่นนี้ เราจะใช้ Alchemy, ไลบรารี Alchemy web3.js, Node และ React หากคำเหล่านี้ฟังดูแปลกสำหรับคุณ ไม่ต้องกังวล เราจะอธิบายอย่างละเอียด!

บทช่วยสอนนี้ถือว่าผู้อ่านมีความเข้าใจพื้นฐานเกี่ยวกับวิธีการทำงานของราคาก๊าซและก๊าซบน Ethereum ความเข้าใจเบื้องต้นเกี่ยวกับ EIP-1559 ก็มีประโยชน์เช่นกัน แต่ไม่จำเป็น

• EIP-1559 ทบทวนอย่างรวดเร็ว

• EIP-1559 นำการเปลี่ยนแปลงต่อไปนี้มาสู่กลไกการกำหนดราคาก๊าซของ Ethereum:

• ค่าธรรมเนียมการประมูลแบบตาบอดถูกแทนที่ด้วยค่าธรรมเนียมสองรายการ: ค่าธรรมเนียมพื้นฐานและค่าธรรมเนียมการจัดลำดับความสำคัญ (หรือทิปสำหรับนักขุด)

• ค่าธรรมเนียมพื้นฐานจะถูกกำหนดโดยอัตโนมัติโดยเครือข่าย สามารถเพิ่มเป็น 12.5% ​​หากบล็อกก่อนหน้าเต็มและลดลงเป็น 12.5% ​​หากบล็อกก่อนหน้าว่างเปล่า

ผู้ใช้จะกำหนดทิปของนักขุดและสามารถปรับเปลี่ยนได้ตามความเร่งด่วนของการทำธุรกรรม

ค่าธรรมเนียมพื้นฐานจะถูกเผาโดยเครือข่ายเพื่อป้องกันไม่ให้นักขุดสร้างบล็อกน้ำท่วม อย่างไรก็ตาม นักขุดสามารถเก็บทิปได้

นอกจากการปรับปรุงราคาน้ำมันแล้ว EIP-1559 ยังเสนอการปรับปรุงเพื่อให้เครือข่ายรองรับการจราจรที่พุ่งสูงขึ้นอย่างรวดเร็ว อย่างที่คุณทราบ ธุรกรรมใน Ethereum จะถูกจัดกลุ่มเป็นบล็อกๆ ก่อนทางแยก บล็อกหนึ่งสามารถเก็บธุรกรรมก๊าซได้เพียง 15 ล้านธุรกรรมโดยไม่คำนึงถึงการจราจร

ด้วยการอัปเกรด ความจุของบล็อกเพิ่มขึ้นสองเท่าเป็น 30 ล้านแก๊ส สิ่งนี้ทำเพื่อตอบสนองความต้องการที่เพิ่มขึ้นได้ดีขึ้น อย่างไรก็ตาม คาดว่าค่าธรรมเนียมพื้นฐานจะปรับเป็นค่าเฉลี่ย 50% ของปริมาตรบล็อก (หรือก๊าซที่ใช้โดยบล็อก) หรือประมาณ 15 ล้านก๊าซ

คุณสามารถดูได้ว่าทั้งหมดนี้ทำงานอย่างไรแบบเรียลไทม์ด้วยตัวติดตามก๊าซที่เราสร้าง เราจะสร้างโครงการนี้ในสองส่วน: ในส่วนแรก เราจะเขียนโหนดสคริปต์ที่ติดตามประวัติของค่าธรรมเนียมการทำธุรกรรมแบบเรียลไทม์ ในส่วนที่สอง เราจะใช้สคริปต์นี้เพื่อสร้างแอปพลิเคชัน React เพื่อสร้างเครื่องมือติดตามขั้นสุดท้าย

ส่วนที่ 1: สคริปต์ประวัติค่าธรรมเนียมการทำธุรกรรม

ในส่วนนี้ เราจะเขียนสคริปต์ (ในโหนด) ที่จะช่วยให้เราได้รับประวัติค่าธรรมเนียมก๊าซสำหรับ 20 บล็อกล่าสุดบนเครือข่าย Ethereum

ขั้นตอนที่ 0: ติดตั้งโหนดและ npm

ตรวจสอบให้แน่ใจว่าคุณได้ติดตั้งโหนดและ npm (อย่างน้อย v14 หรือสูงกว่า) บนเครื่องของคุณ

ขั้นตอนที่ 1: สร้างบัญชีการเล่นแร่แปรธาตุ

ในการรับประวัติค่าก๊าซล่าสุดสำหรับบล็อก เราจำเป็นต้องเชื่อมต่อกับเครือข่าย Ethereum เพื่อการสื่อสาร Alchemy เป็นแพลตฟอร์มการพัฒนา blockchain ที่ช่วยให้เราทำสิ่งนี้ได้โดยไม่ต้องเปิดโหนดของเราเอง

ขั้นตอนที่ 2: สร้างแอปพลิเคชันการเล่นแร่แปรธาตุ (และคีย์ API)

สร้างแอปพลิเคชันบนแดชบอร์ดการเล่นแร่แปรธาตุ สายโซ่ถูกตั้งค่าเป็น Ethereum และเครือข่ายถูกตั้งค่าเป็น mainnet

จากนั้น ไปที่หน้าแอปพลิเคชันของคุณ แล้วคลิก ดูคีย์ ซึ่งจะเป็นการเปิดป๊อปอัปที่มี HTTP และ Websocket URL ของแอปพลิเคชัน ในบทช่วยสอนนี้ เราจะใช้ Websocket URL

ขั้นตอนที่ 3: สร้างโครงการโหนดและติดตั้งการพึ่งพา

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

ตอนนี้เราสามารถเริ่มเขียนโหนดสคริปต์ได้แล้ว มาสร้างที่เก็บเปล่าและติดตั้งการพึ่งพากัน สำหรับสคริปต์นี้ เราต้องการไลบรารี Alchemy web3.js

บนเทอร์มินัลของคุณ (หรือพรอมต์คำสั่ง) ให้รันคำสั่งต่อไปนี้:

สิ่งนี้จะสร้างที่เก็บที่เรียกว่า gas tracker-script พร้อมไฟล์และการอ้างอิงทั้งหมดที่เราต้องการ เปิด repo นี้ในตัวแก้ไขโค้ดที่คุณชื่นชอบ เราจะเขียนโค้ดทั้งหมดในไฟล์ main.js

ขั้นตอนที่ 4: สร้างอินสแตนซ์ไคลเอนต์ web3 ด้วย Alchemy

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

);

การสร้างไคลเอนต์อินสแตนซ์ด้วย Alchemy web3 นั้นง่ายมาก

ในไฟล์ main.js ให้เพิ่มบรรทัดโค้ดต่อไปนี้:

ตรวจสอบให้แน่ใจว่าได้แทนที่ตัวยึดตำแหน่งด้านบนด้วย websocket URL ของแอปพลิเคชันของคุณ

ขั้นตอนที่ 5: รับประวัติของ 20 ช่วงตึกล่าสุด

เราต้องการประวัติค่าน้ำมันในช่วง 10 บล็อกที่ผ่านมา ข้อมูลที่เราสนใจประกอบด้วยค่าธรรมเนียมพื้นฐาน ช่วงค่าธรรมเนียมที่ต้องการ ขนาดบล็อก และหมายเลขบล็อก

โชคดีที่การเล่นแร่แปรธาตุมี eth_feeHistory ที่มีประโยชน์มากซึ่งจะส่งคืนข้อมูลทั้งหมดที่กล่าวมาโดยอัตโนมัติ

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

สิ่งที่เราต้องระบุคือบล็อกล่าสุดที่เราต้องการข้อมูล จำนวนบล็อกทั้งหมดที่ต้องการดู และช่วงเปอร์เซ็นต์สำหรับค่าธรรมเนียมที่ต้องการ

เราสนใจ 20 บล็อกล่าสุดและเปอร์เซ็นไทล์ที่ 25, 50 และ 75 ของค่าธรรมเนียมลำดับความสำคัญ

การเรียกใช้สคริปต์นี้ (โดยใช้โหนด main.js) ควรดึงข้อมูลที่คุณต้องการ นี่คือข้อมูลบางส่วน ผลลัพธ์ที่ฉันได้รับหลังจากขอข้อมูล 5 บล็อก

ขั้นตอนที่ 6: การจัดรูปแบบเอาต์พุต

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;

ผลลัพธ์ที่เราได้รับในขั้นตอนที่ 5 นั้นถูกต้อง แต่ไม่สามารถอ่านได้มากนัก ค่าธรรมเนียมแสดงเป็นเลขฐานสิบหก และโครงสร้างข้อมูลทำให้ยากที่จะทราบว่าข้อมูลใดสอดคล้องกับบล็อกใด

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

});

ลองเขียนฟังก์ชันเล็กๆ ที่แปลงข้อมูลดิบเป็นรายการพจนานุกรม โดยที่พจนานุกรมแต่ละรายการจะมีข้อมูลในบล็อกเฉพาะ ฟังก์ชันนี้ยังแปลงค่าแก๊สเลขฐานสิบหกทั้งหมดที่แสดงใน Wei ให้เป็นเลขฐานสิบที่แสดงใน Gwei

สุดท้าย ให้ใช้ฟังก์ชันนี้เป็นค่าประวัติ

การรันสคริปต์เวอร์ชันนี้ควรสร้างเอาต์พุตในรูปแบบต่อไปนี้:

ขั้นตอนที่ 7: สมัครสมาชิกส่วนหัวของบล็อกล่าสุด

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

});

บล็อกใหม่จะถูกเพิ่มเข้าไปใน Ethereum blockchain ทุก ๆ 15 วินาทีโดยประมาณ ดังนั้น ตามหลักแล้ว เราต้องการสมัครรับข้อมูลเหตุการณ์สำหรับการบล็อกที่เพิ่มเข้ามา และอัปเดตประวัติการทำธุรกรรมของเราเพื่อให้แสดงข้อมูลจาก 20 บล็อกล่าสุดเสมอ

มาซ้อนฟังก์ชัน getFeeHistory ภายในการเรียกกลับเหตุการณ์การสมัคร

การรันสคริปต์ main.js ในตอนนี้จะแสดงชุดข้อมูลล่าสุดทุกๆ 15 วินาทีหรือมากกว่านั้น หากคุณมาไกลขนาดนี้ ยินดีด้วย ตอนนี้คุณมีเครื่องติดตามก๊าซที่ทำงานได้อย่างสมบูรณ์แล้ว

ส่วนที่ 2: ตอบสนองแอปพลิเคชัน

ในส่วนก่อนหน้านี้ เราได้เขียนสคริปต์ที่ดึงประวัติค่าธรรมเนียมสำหรับ 20 บล็อกล่าสุดทุกครั้งที่มีการเพิ่มบล็อกใหม่ไปยัง Ethereum mainnet

ในส่วนนี้ เราจะสร้างแอปพลิเคชัน React ขนาดเล็กที่สตรีมข้อมูลนี้จากเทอร์มินัลไปยังเบราว์เซอร์ นอกจากประวัติการทำธุรกรรมค่าธรรมเนียมแล้ว เรายังแสดงค่าธรรมเนียมก๊าซเฉลี่ยและขนาดบล็อกในช่วง 20 บล็อกที่ผ่านมา

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

ขั้นตอนที่ 1: เริ่มต้นโครงการ React และติดตั้งการพึ่งพา

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

ดำเนินการคำสั่งต่อไปนี้:

สิ่งนี้จะสร้างโครงการ React ตัวอย่าง นอกจากการพึ่งพาการตอบสนองแล้ว เรายังจำเป็นต้องติดตั้งไลบรารี Alchemy web3 จากส่วนก่อนหน้าด้วย

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 (
   

}export default App;

ขั้นตอนที่ 2: เติมไฟล์ App.js

ตรรกะทั้งหมดของเราจะอยู่ในไฟล์ App.js คัดลอกเนื้อหาต่อไปนี้ไปยังไฟล์ด้านบน

เนื่องจากนี่ไม่ใช่หลักสูตร React เราจะไม่เจาะลึกในส่วนเฉพาะของ React แต่คุณควรสังเกตได้ว่าสิ่งที่เรากำลังทำอยู่คือการเรียกข้อมูลประวัติค่าใช้จ่ายตามที่เราทำในสคริปต์และส่งออกเป็นตาราง HTML

ตรรกะเพิ่มเติมเพียงอย่างเดียวที่เราใช้คือการคำนวณราคาก๊าซเฉลี่ยและขนาดบล็อกเฉลี่ยมากกว่า 20 บล็อก ซึ่งเป็นงานเล็กน้อย

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

(ไม่บังคับ) ขั้นตอนที่ 3: เพิ่มสไตล์บางอย่าง

คุณสามารถเพิ่มสไตล์พื้นฐานในไฟล์ App.css ได้ดังนี้:

npm start

ขั้นตอนที่ 4: ปรับใช้แอปพลิเคชันกับ localhost

แอพควรมีลักษณะดังนี้:

วิเคราะห์

ขอแสดงความยินดี คุณมีแอปพลิเคชันติดตามก๊าซที่ทำงานได้อย่างสมบูรณ์

• วิเคราะห์

• ลองย้อนกลับไปวิเคราะห์ข้อมูลข้างต้น ต่อไปนี้คือผลลัพธ์โดยตรงของการใช้งาน EIP-1559 ที่เราสามารถสังเกตได้

• ค่าธรรมเนียมฐานไม่ผันผวนอย่างมากในแต่ละบล็อก อันที่จริงแล้ว การเพิ่มขึ้นหรือลดลงที่ใหญ่ที่สุดคือ 12.5%

ขนาดบล็อกมักจะผันผวน แต่ขนาดบล็อกเฉลี่ยอยู่ที่ประมาณ 50%

สรุปแล้ว

ดูเหมือนว่าข้อมูลจะบ่งชี้ว่าต้นทุนก๊าซสามารถคาดการณ์ได้มากขึ้นในแบบจำลองนี้ เนื่องจากทุกคนจ่ายค่าธรรมเนียมพื้นฐานและลำดับความสำคัญเท่ากัน และในกรณีส่วนใหญ่ ค่าธรรมเนียมการจัดลำดับความสำคัญเป็นเพียงส่วนเล็กๆ ของค่าธรรมเนียมทั้งหมด ธุรกรรมส่วนใหญ่จึงไม่ได้ลงเอยด้วยการจ่ายค่าน้ำมันแพงเกินไป ดังนั้น ข้อมูลตัวอย่างนี้แสดงให้เห็นว่า EIP-1559 ประสบความสำเร็จตามเป้าหมาย ราคาก๊าซที่คาดการณ์ได้มากขึ้น การจ่ายก๊าซส่วนเกินน้อยลง

เราได้กล่าวถึงมากมายในบทความนี้ ด้วยการสร้างตัวติดตามแก๊สสำหรับ EIP-1559 ตั้งแต่เริ่มต้น ฉันหวังว่าคุณจะเข้าใจและชื่นชมการปรับปรุงที่นำมาสู่ธุรกรรม Ethereum

ลิงค์ต้นฉบับ