Web 3 - JS
Web 3 - JS
Key Features:
1.
Blockchain Communication:
2.
1. Sends transactions.
2. Reads smart contract data.
3. Calls Ethereum nodes using JSON-RPC.
3.
4.
5.
Account Management:
6.
7.
Event Listening:
8.
9.
Compatibility:
10.
Modules:
1.
web3.eth:
2.
3.
web3.utils:
4.
5.
web3.net:
6.
7.
web3.contract:
8.
9.
web3.personal (optional):
10.
Installation:
bash
Copy code
npm install web3
Basic Example:
javascript
Copy code
const Web3 = require('web3');const web3 = new
Web3('https://mainnet.infura.io/v3/YOUR_INFURA_PROJECT_ID');
// Fetch account balance
web3.eth.getBalance('0xYourEthereumAddress').then(console.log);
Core Components:
1.
Providers:
2.
javascript
Copy code
const Web3 = require('web3');const web3 = new
Web3('https://mainnet.infura.io/v3/YOUR_INFURA_PROJECT_ID');
3.
Accounts:
4.
o Create/manage accounts.
o Sign transactions and data.
javascript
Copy code
const account =
web3.eth.accounts.create();console.log(account.address,
account.privateKey);
5.
Transactions:
6.
javascript
Copy code
web3.eth.sendTransaction({
from: '0xSenderAddress',
to: '0xRecipientAddress',
value: web3.utils.toWei('1', 'ether')
});
7.
Smart Contracts:
8.
javascript
Copy code
const contract = new web3.eth.Contract(abi,
'0xContractAddress');
contract.methods.myFunction().call().then(console.log);
9.
Events:
10.
javascript
Copy code
contract.events.MyEvent({}, (error, event) =>
console.log(event));
Advanced Features:
ENS Integration:
javascript
Copy code
web3.eth.ens.getAddress('vitalik.eth').then(console.log);
javascript
Copy code
web3.eth.getPastLogs({
address: '0xContractAddress',
topics: ['0xTopicHash']
}).then(console.log);
javascript
Copy code
web3.eth.estimateGas({
to: '0xRecipientAddress',
value: web3.utils.toWei('1', 'ether')
}).then(console.log);
Pros:
Alternatives:
Web3.js is a powerful tool for building and interacting with blockchain applications!
Web3.js In-Depth:
Modules Overview:
1.
web3.eth:
2.
javascript
Copy code
web3.eth.getBlock('latest').then(console.log);
3.
web3.utils:
4.
javascript
Copy code
web3.utils.toWei('1', 'ether'); // Convert Ether to Wei
web3.utils.sha3('data'); // Generate Keccak256 hash
5.
web3.givenProvider:
6.
7.
web3.bzz:
8.
9.
web3.shh:
10.
1.
Define a Contract:
2.
javascript
Copy code
const contract = new web3.eth.Contract(ABI,
'0xContractAddress');
3.
Calling Methods:
4.
javascript
Copy code
contract.methods.getData().call().then(console.log);
javascript
Copy code
contract.methods.setData('newValue')
.send({ from: '0xYourAddress' });
5.
Event Subscriptions:
6.
javascript
Copy code
contract.events.DataChanged({}, (error, event) => {
console.log(event);
});
Generate accounts
programmatically:
javascript
Copy code
Encrypt/Decrypt private keys:
javascript
Copy code
javascript
Copy code
web3.eth.getGasPrice().then(console.log);
Manually estimate gas:
javascript
Copy code
web3.eth.estimateGas(txObject).then(console.log);
Provider Integration:
HTTP Provider
(Infura/Alchemy):
javascript
Copy code
WebSocket Provider (for real-
time updates):
javascript
Copy code
Error Handling:
1.
Use try...catch for async calls:
2.
3.
javascript
4.
5.
Copy code
6.
7.
try {
const balance = await web3.eth.getBalance('0xAddress');
console.log(balance);
} catch (error) {
console.error(error);
}
8.
9.
10.
11.
12.
javascript
13.
14.
Copy code
15.
16.
web3.eth.sendTransaction(txObject)
.on('receipt', console.log)
.on('error', console.error);
17.
18.
Web3.js vs Ethers.js:
Common Applications:
1. DApp Development:
2. DeFi Platforms:
3. NFT Marketplaces:
4. Analytics:
Here’s an in-depth exploration of Web3.js that delves into its architecture, practical
applications, and advanced use cases.
1. Web3.js Architecture and Design
Web3.js is structured around the concept of modularity, with each module serving a
specific purpose for blockchain interaction:
Core Modules
web3.eth:
web3.utils:
o Provides utility functions like hashing, encoding, decoding, and unit conversions
(Wei <-> Ether).
web3.net:
web3.shh (deprecated):
web3.bzz:
javascript
Copy code
javascript
Copy code
const web3 = new Web3(new
Web3.providers.WebsocketProvider('wss://mainnet.infura.io/ws/v3
/YOUR_INFURA_ID'));
3. Key Functionalities
javascript
Copy code
const contract = new web3.eth.Contract(abi);const deploy =
contract.deploy({
data: '0xContractBytecode',
arguments: [arg1, arg2]
});
deploy.send({
from: '0xYourAddress',
gas: 1500000,
gasPrice: '30000000000'
}).then((newContractInstance) => {
console.log('Deployed at:', newContractInstance.options.address);
});
javascript
Copy code
contract.events.Transfer({
filter: { from: '0xSenderAddress' }, // Optional filters
fromBlock: 0
}, (error, event) => {
if (error) console.error(error);
console.log(event);
});
javascript
Copy code
const token = new web3.eth.Contract(erc20ABI, tokenAddress);
token.methods.balanceOf('0xYourAddress').call().then(console.log);
Gas Optimization
javascript
Copy code
web3.eth.estimateGas({
from: '0xYourAddress',
to: '0xRecipientAddress',
data: '0xSmartContractData'
}).then(console.log);
javascript
Copy code
const account = web3.eth.accounts.create();const signedTx =
account.signTransaction({
to: '0xRecipientAddress',
value: web3.utils.toWei('0.1', 'ether'),
gas: 21000
});
web3.eth.sendSignedTransaction(signedTx.rawTransaction).then(console.
log);
Automated Market Maker (AMM) Interaction: Call Uniswap or
SushiSwap contracts to swap tokens.
javascript
Copy code
javascript
Copy code
Layer 2 Interactions
javascript
Copy code
const batch = new web3.BatchRequest();
batch.add(web3.eth.getBalance.request('0xAddress1', 'latest',
console.log));
batch.add(web3.eth.getBalance.request('0xAddress2', 'latest',
console.log));
batch.execute();
Limitations:
Lightweight applications.
Better TypeScript support.
Need for a more developer-friendly interface.
6. Future of Web3.js
Resources
Official Documentation
GitHub Repository
Infura and Alchemy for node providers.
Here’s an exhaustive look at Web3.js with deeper insights, advanced concepts, and
practical implementations:
javascript
Copy code
javascript
Copy code
const wallet = web3.eth.accounts.wallet.create(5,
'randomEntropy');console.log(wallet);
javascript
Copy code
const tx = {
from: '0xSenderAddress',
to: '0xRecipientAddress',
value: web3.utils.toWei('0.1', 'ether'),
gas: 2000000,
};
web3.eth.accounts.signTransaction(tx, privateKey).then(signed
=> {
web3.eth.sendSignedTransaction(signed.rawTransaction).then(cons
ole.log);
});
Copy code
contract.methodsurAddress' });
Custom Providers
Use Metamask,
WalletConnect, or other
wallets as providers:
javascript
Copy code
2. Advanced Utilities
javascript
Copy code
javascript
Copy code
Decode logs/events:
javascript
Copy code
Gas Management
javascript
Copy code
const tx = {
maxPriorityFeePerGas: web3.utils.toWei('2', 'gwei'),
maxFeePerGas: web3.utils.toWei('100', 'gwei'),
gasLimit: 21000,
...
};
Gas Token Refunds: Use contracts like Chi for cheaper gas during
congestion.
javascript
Copy code
web3.eth.getBlock(12345678).then(console.log);
Retrieve logs:
javascript
Copy code
web3.eth.getPastLogs({
fromBlock: 'earliest',
topics: ['0xTopicHash']
}).then(console.log);
Cross-Chain Operations
javascript
Copy code
Real-Time Monitoring
Pending Transactions:
javascript
Copy code
Syncing State:
javascript
Copy code
web3.eth.isSyncing().then(console.log);
javascript
Copy code
Frontend Integration
javascript
Copy code
javascript
Copy code
NFT Platforms
Batch Minting:
javascript
Copy code
6. Performance Tips
7. Debugging Tools
Web3.js is a robust tool for Ethereum development. For specific use cases, feel free to
ask!
1. Web3.js Lifecycle
1. Initialization:
2. Execution:
3. Termination:
o Clean up subscriptions and instances when done.
Example:
javascript
Copy code
const Web3 = require('web3');const web3 = new Web3(new
Web3.providers.HttpProvider('https://mainnet.infura.io/v3/YOUR_PROJEC
T_ID'));
// Terminate (only for WebSocket)
web3.currentProvider.disconnect();
javascript
Copy code
const web3 = new Web3('http://127.0.0.1:7545'); // Ganache default
port
Consortium/Private Networks
javascript
Copy code
const provider = new Web3.providers.HttpProvider('https://your-node-
url', {
headers: [{ name: 'Authorization', value: 'Bearer YOUR_TOKEN' }]
});const web3 = new Web3(provider);
3. Provider Management
Provider Injection
javascript
Copy code
const setProvider = (providerUrl) => {
web3.setProvider(new Web3.providers.HttpProvider(providerUrl));
};setProvider('https://polygon-rpc.com');
Custom Middleware
javascript
Copy code
class CustomProvider extends Web3.providers.HttpProvider {
send(payload, callback) {
console.log('Request:', payload);
super.send(payload, callback);
}
}const web3 = new Web3(new
CustomProvider('https://mainnet.infura.io/v3/YOUR_PROJECT_ID'));
4. Cross-Chain Bridges
javascript
Copy code
const bscWeb3 = new Web3('https://bsc-dataseed.binance.org');const
ethWeb3 = new Web3('https://mainnet.infura.io/v3/YOUR_PROJECT_ID');
Pending Blocks
javascript
Copy code
web3.eth.subscribe('pendingTransactions', (error, txHash) => {
if (!error) console.log(txHash);
});
Event Filtering
javascript
Copy code
contract.getPastEvents('Transfer', {
filter: { from: '0xSenderAddress' },
fromBlock: 0,
toBlock: 'latest'
}).then(console.log);
javascript
Copy code
web3.currentProvider.send({
method: 'trace_replayTransaction',
params: ['0xTransactionHash', ['trace']],
}, console.log);
6. Wallet Integrations
Hardware Wallets
Multi-Signature Wallets
javascript
Copy code
const gnosisSafe = new web3.eth.Contract(gnosisSafeABI,
gnosisSafeAddress);await gnosisSafe.methods.submitTransaction(target,
value, data).send({ from: sender });
javascript
Copy code
const oracle = new web3.eth.Contract(chainlinkOracleABI,
oracleAddress);
oracle.methods.requestData(...args).send({ from: userAddress });
javascript
Copy code
const { didJWT } = require('uport-credentials');const token =
didJWT.createJWT({ ...payload }, { signer });console.log(token);
javascript
Copy code
const MyContract = artifacts.require("MyContract");
contract("MyContract Test", accounts => {
it("should interact with the contract", async () => {
const instance = await MyContract.deployed();
const result = await instance.myFunction({ from: accounts[0] });
assert.equal(result, expected);
});
});
Debugging Tools
javascript
Copy code
web3.currentProvider.send({
method: 'debug_traceTransaction',
params: ['0xTransactionHash'],
}, console.log);
Optimism:
javascript
Copy code
Arbitrum:
javascript
Copy code
12. Optimizing Performance
javascript
Copy code
const batch = new web3.BatchRequest();
batch.add(web3.eth.getBalance.request('0xAddress1', 'latest',
console.log));
batch.add(web3.eth.getBalance.request('0xAddress2', 'latest',
console.log));
batch.execute();
Parallel Queries
javascript
Copy code
const addresses = ['0x1', '0x2'];Promise.all(addresses.map(addr =>
web3.eth.getBalance(addr))).then(console.log);
Web3.js is vast; let’s dive into advanced details, edge cases, and specialized
integrations.
Failover Providers
Automatically switch between multiple providers for reliability:
javascript
Copy code
const provider1 = new
Web3.providers.HttpProvider('https://mainnet.infura.io/v3/YOUR_ID');c
onst provider2 = new Web3.providers.HttpProvider('https://backup-
node.io');const web3 = new Web3(provider1);
web3.currentProvider.on('error', () => {
console.log('Switching provider...');
web3.setProvider(provider2);
});
javascript
Copy code
if (window.ethereum) {
const web3 = new Web3(window.ethereum);
window.ethereum.request({ method: 'eth_requestAccounts' });
}
javascript
Copy code
const IPFS = require('ipfs-http-client');const ipfs =
IPFS.create('https://ipfs.infura.io:5001');
const { cid } = await ipfs.add('Hello, Web3!');console.log('Uploaded
CID:', cid.toString());
javascript
Copy code
const web3 = new Web3('https://swarm-gateways.net');
web3.bzz.upload('Decentralized storage data').then(console.log);
3. Advanced Smart Contract Use
Multisig Transactions
javascript
Copy code
const multisig = new web3.eth.Contract(multisigABI,
multisigAddress);await
multisig.methods.submitTransaction('0xRecipient', value,
data).send({ from: owner });
Fallback Functions
javascript
Copy code
web3.eth.sendTransaction({
to: '0xContractAddress',
data: '0xFallbackFunctionData',
from: '0xSenderAddress',
value: web3.utils.toWei('0.01', 'ether'),
});
javascript
Copy code
const optimismWeb3 = new Web3('https://mainnet.optimism.io');const
arbitrumWeb3 = new Web3('https://arb1.arbitrum.io/rpc');
const balance = await
optimismWeb3.eth.getBalance('0xAddress');console.log('Optimism
Balance:', web3.utils.fromWei(balance, 'ether'));
Bridges
javascript
Copy code
const bridgeContract = new web3.eth.Contract(bridgeABI,
bridgeAddress);await bridgeContract.methods.transferToOtherChain(to,
value).send({ from: user });
5. Performance Optimization
javascript
Copy code
const batch = new web3.BatchRequest();
batch.add(web3.eth.getBalance.request('0xAddress1', 'latest',
console.log));
batch.add(web3.eth.getBalance.request('0xAddress2', 'latest',
console.log));
batch.execute();
Caching
javascript
Copy code
const balanceCache = localStorage.getItem('balance');if
(!balanceCache) {
const balance = await web3.eth.getBalance('0xAddress');
localStorage.setItem('balance', balance);
}
javascript
Copy code
const uniswap = new web3.eth.Contract(uniswapV2ABI,
uniswapRouterAddress);await
uniswap.methods.addLiquidity(...args).send({ from: user });
Flash Loan Execution
javascript
Copy code
const aave = new web3.eth.Contract(aaveABI, aaveAddress);await
aave.methods.flashLoan(receiver, assets, amounts, modes,
params).send({ from: user });
7. Blockchain Analytics
javascript
Copy code
const txCount = await web3.eth.getTransactionCount('0xAddress',
12345678);console.log(txCount);
Trace Calls
javascript
Copy code
web3.currentProvider.send({
method: 'debug_traceTransaction',
params: ['0xTransactionHash'],
}, console.log);
8. Security Practices
javascript
Copy code
const signedTx = await web3.eth.accounts.signTransaction(tx,
privateKey);await
web3.eth.sendSignedTransaction(signedTx.rawTransaction);
Rate Limiting
Throttle requests to avoid bans from node providers:
javascript
Copy code
const delay = (ms) => new Promise(resolve => setTimeout(resolve,
ms));for (const address of addresses) {
const balance = await web3.eth.getBalance(address);
console.log(balance);
await delay(1000); // 1-second delay
}
Ganache Setup
bash
Copy code
ganache-cli --accounts 10 --defaultBalanceEther 100
javascript
Copy code
it('should deploy a contract', async () => {
const instance = await MyContract.deployed();
assert.ok(instance.address);
});
javascript
Copy code
const entryPoint = new web3.eth.Contract(entryPointABI,
entryPointAddress);await
entryPoint.methods.handleOps(...args).send({ from: sponsor });
Gasless Transactions
javascript
Copy code
const forwarder = new web3.eth.Contract(forwarderABI,
forwarderAddress);await forwarder.methods.execute(userAddress, data,
fee).send({ from: relayer });