What Is Web3.js?
Web3.js is a JavaScript library that allows your DApp to interact with Ethereum-compatible blockchains. It enables:
✅ Reading blockchain data (balances, transactions)
✅ Sending transactions (token transfers, smart contract calls)
✅ Listening to events (real-time updates)
Key Features:
- Works with MetaMask and other wallets
- Supports Ethereum, Polygon, BSC
- Open-source (GitHub)
Prerequisites for Web3.js Integration
1. Development Tools
| Tool | Purpose | Link |
|---|---|---|
| Node.js | JavaScript runtime | Download |
| MetaMask | Browser wallet | Install |
| Hardhat | Local blockchain | Docs |
2. Basic Knowledge
- JavaScript/TypeScript
- Smart contract basics
- Ethereum RPC endpoints
Step-by-Step Integration Guide
Step 1: Install Web3.js
bash
npm install web3 # or yarn add web3
Step 2: Connect to Blockchain
javascript
import Web3 from 'web3';
// Connect to MetaMask
const web3 = new Web3(window.ethereum);
// Or use a provider like Infura
const web3 = new Web3('https://mainnet.infura.io/v3/YOUR_API_KEY');
Step 3: Interact with Smart Contracts
javascript
const contractABI = [...]; // From your compiled contract
const contractAddress = '0x...';
const myContract = new web3.eth.Contract(contractABI, contractAddress);
// Call a view function
const data = await myContract.methods.myFunction().call();
// Send a transaction
await myContract.methods.updateFunction(newValue).send({ from: userAddress });
Key Web3.js Methods
1. Wallet Interactions
javascript
// Request account access
const accounts = await window.ethereum.request({ method: 'eth_requestAccounts' });
// Get balance
const balance = await web3.eth.getBalance(accounts[0]);
2. Transaction Handling
javascript
// Send ETH
await web3.eth.sendTransaction({
from: accounts[0],
to: '0x...',
value: web3.utils.toWei('1', 'ether')
});
3. Event Listening
javascript
myContract.events.MyEvent()
.on('data', event => console.log(event))
.on('error', console.error);
Common Issues & Solutions
| Problem | Solution |
|---|---|
| “Provider not set” | Check MetaMask installation |
| “Invalid ABI” | Verify contract compilation |
| “Gas estimation failed” | Increase gas limit |
Advanced Tips
1. Error Handling
javascript
try {
await myContract.methods.fail().send();
} catch (error) {
console.error('Transaction failed:', error.message);
}
2. Gas Optimization
javascript
// Estimate gas first
const gas = await myContract.methods.update().estimateGas();
await myContract.methods.update().send({ gas: gas + 10000 });
3. Unit Testing
javascript
// Using Hardhat + Ethers.js
const { expect } = require('chai');
describe('MyContract', () => {
it('Should return correct value', async () => {
expect(await contract.myFunction()).to.equal(42);
});
});
Conclusion
You’ve learned how to:
✔ Install and configure Web3.js
✔ Connect to wallets and blockchains
✔ Interact with smart contracts
✔ Handle transactions and events
Next Steps:
- Explore Web3.js Documentation
- Build a full-stack DApp with React
