Web3 Development with ethers.js: A Complete Guide

Web3 Development with ethers.js

Ethers.js has become the go-to library for Ethereum blockchain interactions. Let’s explore how to build robust Web3 applications using ethers.js.

Getting Started with ethers.js

1. Basic Setup

import { ethers } from 'ethers';

// Connect to Ethereum network
const provider = new ethers.providers.Web3Provider(window.ethereum);
const signer = provider.getSigner();

// Request account access
async function connectWallet() {
 try {
 await window.ethereum.request({ method: 'eth_requestAccounts' });
 const address = await signer.getAddress();
 console.log('Connected wallet:', address);
 return address;
 } catch (error) {
 console.error('Failed to connect wallet:', error);
 }
}

Smart Contract Interaction

1. Contract Instance Creation

const contractAddress = "0x123..."; // Your contract address
const contractABI = [
 "function balanceOf(address) view returns (uint)",
 "function transfer(address to, uint amount) returns (bool)",
];

const contract = new ethers.Contract(
 contractAddress,
 contractABI,
 signer
);

2. Reading Contract Data

async function getTokenBalance(address: string) {
 try {
 const balance = await contract.balanceOf(address);
 // Convert from Wei to Ether
 return ethers.utils.formatEther(balance);
 } catch (error) {
 console.error('Error fetching balance:', error);
 throw error;
 }
}

// Reading events
const filter = contract.filters.Transfer();
contract.on(filter, (from, to, amount) => {
 console.log(`${from} sent ${amount} tokens to ${to}`);
});

Transaction Management

1. Sending Transactions

async function sendTransaction(to: string, amount: string) {
 try {
 // Convert Ether to Wei
 const amountWei = ethers.utils.parseEther(amount);
 
 // Create transaction
 const tx = await signer.sendTransaction({
 to,
 value: amountWei
 });
 
 // Wait for confirmation
 const receipt = await tx.wait();
 console.log('Transaction confirmed:', receipt.transactionHash);
 return receipt;
 } catch (error) {
 console.error('Transaction failed:', error);
 throw error;
 }
}

2. Gas Estimation

async function estimateGas(to: string, amount: string) {
 const amountWei = ethers.utils.parseEther(amount);
 
 // Estimate gas limit
 const gasLimit = await signer.estimateGas({
 to,
 value: amountWei
 });
 
 // Get current gas price
 const gasPrice = await provider.getGasPrice();
 
 // Calculate total gas cost
 const gasCost = gasLimit.mul(gasPrice);
 return ethers.utils.formatEther(gasCost);
}

Advanced Contract Interactions

1. Contract Deployment

async function deployContract(contractBytecode: string, contractABI: any[]) {
 const factory = new ethers.ContractFactory(
 contractABI,
 contractBytecode,
 signer
 );
 
 const contract = await factory.deploy();
 await contract.deployed();
 
 console.log('Contract deployed to:', contract.address);
 return contract;
}

2. Batch Transactions

async function batchTransfer(recipients: string[], amounts: string[]) {
 // Create a multi-call contract instance
 const multicall = new ethers.Contract(
 MULTICALL_ADDRESS,
 MULTICALL_ABI,
 signer
 );
 
 const calls = recipients.map((recipient, index) => ({
 target: TOKEN_ADDRESS,
 callData: contract.interface.encodeFunctionData('transfer', [
 recipient,
 ethers.utils.parseEther(amounts[index])
 ])
 }));
 
 const tx = await multicall.aggregate(calls);
 return await tx.wait();
}

Error Handling and Security

1. Transaction Error Handling

async function safeContractCall(
 method: string,
 params: any[]
): Promise<any> {
 try {
 const tx = await contract[method](...params);
 const receipt = await tx.wait();
 
 if (receipt.status === 0) {
 throw new Error('Transaction failed');
 }
 
 return receipt;
 } catch (error: any) {
 if (error.code === 'INSUFFICIENT_FUNDS') {
 throw new Error('Not enough ETH for transaction');
 }
 if (error.code === 'UNPREDICTABLE_GAS_LIMIT') {
 throw new Error('Contract call will fail');
 }
 throw error;
 }
}

2. Signature Verification

async function verifySignature(
 message: string,
 signature: string,
 address: string
): Promise<boolean> {
 try {
 const signerAddr = ethers.utils.verifyMessage(message, signature);
 return signerAddr.toLowerCase() === address.toLowerCase();
 } catch {
 return false;
 }
}

Event Monitoring

1. Real-time Event Tracking

function watchContractEvents() {
 contract.on('Transfer', (from, to, amount, event) => {
 console.log({
 from,
 to,
 amount: ethers.utils.formatEther(amount),
 blockNumber: event.blockNumber,
 transactionHash: event.transactionHash
 });
 });
}

2. Historical Event Query

async function getHistoricalEvents(
 fromBlock: number,
 toBlock: number
) {
 const events = await contract.queryFilter(
 contract.filters.Transfer(),
 fromBlock,
 toBlock
 );
 
 return events.map(event => ({
 from: event.args?.from,
 to: event.args?.to,
 amount: ethers.utils.formatEther(event.args?.amount),
 blockNumber: event.blockNumber,
 transactionHash: event.transactionHash
 }));
}

Best Practices

1. Provider Management

• Always handle network changes
• Implement proper fallback providers
• Cache provider connections

2. Transaction Safety

• Always estimate gas before sending
• Implement proper nonce management
• Handle transaction replacements

3. Error Recovery

• Implement proper retry mechanisms
• Handle RPC errors gracefully
• Monitor transaction status

Resources

• ethers.js Documentation
• Ethereum JSON-RPC API
• EIP Standards
• Web3 Developer Tools