Devahoy Logo
PublishedAt

Ethers

ลองใช้งาน Viem เปรียบเทียบกับ Ethers.js

ลองใช้งาน Viem เปรียบเทียบกับ Ethers.js

เนื่องจากผมเห็น Twitter เกี่ยวกับ Viem ผ่านๆ เมื่ออาทิตย์ที่ผ่านมา ยังไม่ได้มีเวลาลอง วันนี้ก็เลยถือโอกาสลองเล่นดูว่าจะทดแทน Ethers.js ได้หรือไม่ และดี หรือไม่ดียังไง อย่างนึงที่ผมไม่ค่อยชอบสำหรับ Ethers.js คือ Docs ไม่ค่อยน่าอ่านเท่าไหร่ 🤣

Viem

Viem เป็น Client Library สำหรับต่อกับ Ethereum Blockchain แบบเดียวกับ Ethers.js features ที่เด่นๆ คือ

  • TypeScript - รองรับ TypeScript มี type safety
  • Bundle Size - มีขนาดเล็กกว่า Ethers.js
  • Performance - ตัว Viem เคลมว่า Performance ดีสุด ดูผลเทสที่นี่
  • number จะ return เป็น bigint

บทความนี้ ผมลอง interact กับ blockchain แบบเดียวกันกับ ethers.js นะครับ

การติดตั้ง

ติดตั้งผ่าน npm

Terminal window
npm install viem

การ Connect JSON RPC

import { createPublicClient, http } from 'viem'
import { mainnet } from 'viem/chains'
const RPC_URL = 'https://rpc.ankr.com/eth'
const client = createPublicClient({
chain: mainnet,
transport: http(RPC_URL)
})

ทดลอง get block number

import { createPublicClient, http } from 'viem'
import { mainnet } from 'viem/chains'
const RPC_URL = 'https://rpc.ankr.com/eth'
const client = createPublicClient({
chain: mainnet,
transport: http(RPC_URL)
})
const run = async () => {
const blockNumber = await client.getBlockNumber()
console.log(blockNumber) // 17019110n
}
run()
.then()
.catch((err) => console.error(err))

เนื่องจาก การทำงานคล้ายๆกันคือ createPublicClient ด้วย chain และ RPC_URL ฉะนั้น ผมขอข้ามโค๊ดตรงนั้นไป และแสดงโค๊ดที่ใช้งานละกัน

ดู balance ของ wallet address

const run = async () => {
const balance = await client.getBalance({
address: '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045' // vitalik.eth
})
console.log('balance', balance) // 5149620840741634567741n
}

การ format unit

import { formatUnits } from 'viem'
const run = async () => {
const balance = await client.getBalance({
address: '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045' // vitalik.eth
})
console.log('balance', balance)
console.log('balance in ETH', formatUnits(balance, 18))
}
// balance 5149620840741634567741n
// balance in ETH 5149.620840741634567741

การต่อ Contract

อ่าน ABI แบบ human-readable จะใช้ parseAbi แบบนี้

import { parseAbi } from 'viem'
const ERC20ABI = parseAbi([
'function symbol() public view returns (string)',
'function decimals() public view returns (uint8)',
'function totalSupply() public view returns (uint256)',
'function balanceOf(address _owner) public view returns (uint256 balance)'
])

การ read contract จะใช้ client.readContract ตัวอย่าง อ่าน total supply ของ USDT บน Ethereum mainnet

const totalSupply = await client.readContract({
address: '0xdac17f958d2ee523a2206206994597c13d831ec7',
abi: ERC20ABI,
functionName: 'totalSupply'
})
console.log('totalSupply', totalSupply)
console.log('totalSupply in USDT', formatUnits(totalSupply, 6))
// totalSupply 35283904986788565n
// totalSupply in USDT 35283904986.788565

เอาจริงๆ สำหรับความคิดเห็นผมคือ ถ้าเราเคยใช้ web.js / Ethers.js มาก่อน มาใช้ Viem ก็ไม่ได้ยุ่งยาก หรือซับซ้อนอะไรเท่าไหร่ อาจจะมีการเขียนต่างกันเล็กน้อย แต่อ่าน Docs แปปเดียว ก็เข้าใจแล้ว ลองไปเล่นกันดูนะครับ

ตัวอย่างอื่นๆ สามารถไปอ่านเพิ่มเติมที่ Migrate from Ethers v5 to Viem และ Examples ได้ครับ

Happy Coding ❤️

Authors
avatar

Chai Phonbopit

เป็น Web Dev ในบริษัทแห่งหนึ่ง ทำงานมา 10 ปีกว่าๆ ด้วยภาษาและเทคโนโลยี เช่น JavaScript, Node.js, React, Vue และปัจจุบันกำลังสนใจในเรื่องของ Blockchain และ Crypto กำลังหัดเรียนภาษา Rust

Related Posts