ethers.js / viem

Untuk berinteraksi dengan blockchain dari JavaScript, kamu butuh library. Dua pilihan utama: ethers.js (mature, populer) dan viem (modern, TypeScript-first, performant).

ethers.js — Provider & Signer

import { ethers } from "ethers";

// Provider: koneksi read-only ke blockchain
const provider = new ethers.BrowserProvider(window.ethereum);

// Signer: bisa sign transaksi (butuh wallet)
const signer = await provider.getSigner();
const address = await signer.getAddress();

// Baca data (gratis)
const balance = await provider.getBalance(address);
console.log(ethers.formatEther(balance)); // "1.5" ETH

// Baca block number
const blockNumber = await provider.getBlockNumber();
console.log("Block:", blockNumber);

Interaksi dengan Smart Contract (ethers.js)

// ABI = Application Binary Interface
// Deskripsi fungsi-fungsi yang ada di contract
const abi = [
  "function balanceOf(address) view returns (uint256)",
  "function transfer(address to, uint256 amount) returns (bool)",
  "event Transfer(address indexed from, address indexed to, uint256 value)",
];

const contractAddress = "0x..."; // address contract di blockchain

// Read-only (pakai provider)
const contract = new ethers.Contract(contractAddress, abi, provider);
const balance = await contract.balanceOf(address);

// Write (pakai signer — akan minta approval di MetaMask)
const contractWithSigner = contract.connect(signer);
const tx = await contractWithSigner.transfer(
  "0xRecipient...",
  ethers.parseUnits("100", 18) // 100 token (18 decimals)
);
await tx.wait(); // Tunggu transaksi di-mine

viem — Modern Alternative

import { createPublicClient, createWalletClient, http } from "viem";
import { mainnet } from "viem/chains";

// Public client (read-only, seperti provider)
const publicClient = createPublicClient({
  chain: mainnet,
  transport: http(),
});

// Baca balance
const balance = await publicClient.getBalance({
  address: "0x...",
});

// Wallet client (write, seperti signer)
const walletClient = createWalletClient({
  chain: mainnet,
  transport: custom(window.ethereum),
});

// Interaksi contract dengan viem
const result = await publicClient.readContract({
  address: contractAddress,
  abi: contractAbi,
  functionName: "balanceOf",
  args: ["0x..."],
});

ethers.js vs viem

Kapan Pilih Mana?

• viem — Project baru, TypeScript, pakai wagmi/React
• ethers.js — Project existing, Node.js scripts, bot