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

1
import { createPublicClient, http } from 'viem'
2
import { mainnet } from 'viem/chains'
3
4
const RPC_URL = 'https://rpc.ankr.com/eth'
5
6
const client = createPublicClient({
7
chain: mainnet,
8
transport: http(RPC_URL)
9
})

ทดลอง get block number

1
import { createPublicClient, http } from 'viem'
2
import { mainnet } from 'viem/chains'
3
4
const RPC_URL = 'https://rpc.ankr.com/eth'
5
6
const client = createPublicClient({
7
chain: mainnet,
8
transport: http(RPC_URL)
9
})
10
11
const run = async () => {
12
const blockNumber = await client.getBlockNumber()
13
console.log(blockNumber) // 17019110n
14
}
15
16
run()
17
.then()
18
.catch((err) => console.error(err))

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

ดู balance ของ wallet address

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

การ format unit

1
import { formatUnits } from 'viem'
2
3
const run = async () => {
4
const balance = await client.getBalance({
5
address: '0xd8dA6BF26964aF9D7eEd9e03E53415D37aA96045' // vitalik.eth
6
})
7
console.log('balance', balance)
8
console.log('balance in ETH', formatUnits(balance, 18))
9
}
10
11
// balance 5149620840741634567741n
12
// balance in ETH 5149.620840741634567741

การต่อ Contract

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

1
import { parseAbi } from 'viem'
2
3
const ERC20ABI = parseAbi([
4
'function symbol() public view returns (string)',
5
'function decimals() public view returns (uint8)',
6
'function totalSupply() public view returns (uint256)',
7
'function balanceOf(address _owner) public view returns (uint256 balance)'
8
])

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

1
const totalSupply = await client.readContract({
2
address: '0xdac17f958d2ee523a2206206994597c13d831ec7',
3
abi: ERC20ABI,
4
functionName: 'totalSupply'
5
})
6
console.log('totalSupply', totalSupply)
7
console.log('totalSupply in USDT', formatUnits(totalSupply, 6))
8
9
// totalSupply 35283904986788565n
10
// 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