Web3.js vs ethers.js in Blockchain / Solidity

Introduction

Web3.js and ethers.js help your app talk to the blockchain. They make it easy to read data and send transactions.

You want to build a website that shows cryptocurrency balances.

You need to send tokens or interact with smart contracts from your app.

You want to listen for blockchain events like new transactions.

You are learning how to connect your app to Ethereum or similar blockchains.

You want to create a wallet or decentralized app (dApp).

Syntax

Blockchain / Solidity

const Web3 = require('web3');
const web3 = new Web3(provider);

const { ethers } = require('ethers');
const provider = new ethers.providers.JsonRpcProvider(url);

Both libraries connect to blockchain nodes using a provider.

Web3.js uses a Web3 object; ethers.js uses a Provider and Signer.

Examples

Get the latest block number using Web3.js.

Blockchain / Solidity

const Web3 = require('web3');
const web3 = new Web3('https://mainnet.infura.io/v3/YOUR-PROJECT-ID');

web3.eth.getBlockNumber().then(console.log);

Get the latest block number using ethers.js.

Blockchain / Solidity

const { ethers } = require('ethers');
const provider = new ethers.providers.JsonRpcProvider('https://mainnet.infura.io/v3/YOUR-PROJECT-ID');

provider.getBlockNumber().then(console.log);

Check an account balance with Web3.js and convert from Wei to Ether.

Blockchain / Solidity

const web3 = new Web3(provider);
const balance = await web3.eth.getBalance('0xabc...');
console.log(web3.utils.fromWei(balance, 'ether'));

Check an account balance with ethers.js and format it to Ether.

Blockchain / Solidity

const provider = new ethers.providers.JsonRpcProvider(url);
const balance = await provider.getBalance('0xabc...');
console.log(ethers.utils.formatEther(balance));

Sample Program

This program uses ethers.js to get the latest block number and the ETH balance of a famous address.

Blockchain / Solidity

import { ethers } from 'ethers';

async function main() {
  const provider = new ethers.providers.JsonRpcProvider('https://mainnet.infura.io/v3/YOUR-PROJECT-ID');
  const blockNumber = await provider.getBlockNumber();
  console.log(`Latest block number: ${blockNumber}`);

  const address = '0x742d35Cc6634C0532925a3b844Bc454e4438f44e';
  const balance = await provider.getBalance(address);
  console.log(`Balance of address: ${ethers.utils.formatEther(balance)} ETH`);
}

main();

Important Notes

Web3.js is older and has more features but can be heavier to use.

ethers.js is smaller, simpler, and often easier for beginners.

Both work well; choice depends on your project needs and preferences.

Summary

Web3.js and ethers.js let your app talk to Ethereum blockchain.

Web3.js is bigger and older; ethers.js is lighter and simpler.

Both can get blockchain data and send transactions easily.

Practice

1. Which of the following is a key difference between Web3.js and ethers.js?

easy

A. ethers.js is a backend-only library, Web3.js is frontend-only.

B. Web3.js only works with Bitcoin, ethers.js only with Ethereum.

C. ethers.js cannot send transactions, Web3.js can.

D. Web3.js is larger and older, while ethers.js is lighter and simpler.

Solution

1. Step 1: Understand library origins

   Web3.js is an older, larger library designed for Ethereum interaction.

2. Step 2: Compare library features

   ethers.js is newer, designed to be lightweight and simpler to use.

3. Final Answer:

   Web3.js is larger and older, while ethers.js is lighter and simpler. -> Option D

4. Quick Check:

   Library size and age = A [OK]

Hint: Remember: Web3.js is big and old; ethers.js is small and new [OK]

Common Mistakes:

• Thinking ethers.js only works on backend
• Confusing blockchain support (Bitcoin vs Ethereum)
• Believing ethers.js can't send transactions

2. Which of the following is the correct way to create a provider using ethers.js?

easy

A. const provider = new ethers.providers.JsonRpcProvider();

B. const provider = new Web3.providers.HttpProvider();

C. const provider = new ethers.Web3Provider();

D. const provider = new Web3.eth.JsonRpcProvider();

Solution

1. Step 1: Recall ethers.js provider syntax

   ethers.js uses ethers.providers.JsonRpcProvider() to create a JSON RPC provider.

2. Step 2: Identify correct syntax

   const provider = new ethers.providers.JsonRpcProvider(); matches the correct ethers.js syntax; others mix Web3.js or incorrect classes.

3. Final Answer:

   const provider = new ethers.providers.JsonRpcProvider(); -> Option A

4. Quick Check:

   ethers.js provider creation = D [OK]

Hint: ethers.js uses ethers.providers.JsonRpcProvider() [OK]

Common Mistakes:

• Mixing Web3.js and ethers.js syntax
• Using Web3 classes with ethers.js
• Incorrect capitalization or namespaces

3. What will be the output of this ethers.js code snippet?

const ethers = require('ethers');
const provider = new ethers.providers.JsonRpcProvider();
(async () => {
  const blockNumber = await provider.getBlockNumber();
  console.log(blockNumber);
})();

medium

A. An error because getBlockNumber() is not a function.

B. Undefined because provider is not initialized.

C. The current Ethereum block number as a number.

D. A string 'blockNumber' printed to console.

Solution

1. Step 1: Understand provider and method

   The JsonRpcProvider connects to Ethereum and getBlockNumber() returns the latest block number as a number.

2. Step 2: Analyze async function output

   The code logs the block number to console, so output is a number representing current block.

3. Final Answer:

   The current Ethereum block number as a number. -> Option C

4. Quick Check:

   getBlockNumber() returns number [OK]

Hint: getBlockNumber() returns a number, not error or string [OK]

Common Mistakes:

• Expecting a string instead of number
• Thinking getBlockNumber() is missing
• Assuming provider is uninitialized

4. Identify the error in this Web3.js code snippet:

const Web3 = require('web3');
const web3 = new Web3();
(async () => {
  const balance = await web3.eth.getBalance('0x123...');
  console.log(balance);
})();

medium

A. Missing provider URL when creating Web3 instance.

B. getBalance() is not an async function.

C. The address format is incorrect.

D. console.log cannot print balance.

Solution

1. Step 1: Check Web3 instance creation

   Web3 requires a provider URL (like HTTP or WebSocket) when instantiated to connect to Ethereum.

2. Step 2: Identify missing provider

   The code creates new Web3() without a provider, so calls like getBalance will fail.

3. Final Answer:

   Missing provider URL when creating Web3 instance. -> Option A

4. Quick Check:

   Web3 needs provider URL [OK]

Hint: Always pass provider URL to Web3 constructor [OK]

Common Mistakes:

• Thinking getBalance is not async
• Assuming address format is wrong
• Believing console.log can't print balance

5. You want to send a transaction using ethers.js and wait for it to be mined. Which code snippet correctly does this?

hard

A. const tx = await provider.sendTransaction(txData);
await tx.wait();

B. const tx = await signer.sendTransaction(txData);
await tx.wait();
console.log('Mined:', tx.hash);

C. const tx = signer.sendTransaction(txData);
console.log('Mined:', tx.hash);

D. const tx = await signer.send(txData);
await tx.wait();

Solution

1. Step 1: Identify correct method to send transaction

   In ethers.js, signer.sendTransaction() sends a transaction and returns a transaction response.

2. Step 2: Wait for transaction mining

   Calling tx.wait() waits for the transaction to be mined before proceeding.

3. Step 3: Confirm correct usage

   const tx = await signer.sendTransaction(txData; await tx.wait(); console.log('Mined:', tx.hash); correctly awaits sending, then waits for mining, then logs the hash.

4. Final Answer:

   const tx = await signer.sendTransaction(txData); await tx.wait(); console.log('Mined:', tx.hash); -> Option B

5. Quick Check:

   sendTransaction + wait() = C [OK]

Hint: Use sendTransaction() then wait() to confirm mining [OK]

Common Mistakes:

• Not awaiting sendTransaction()
• Using provider instead of signer to send
• Calling non-existent send() method