Web3.js Example. Latest version 4.x. Transfer, Mint and Query the Blockchain
Updated: 23 hours ago
The newest version of web3.js, 4.x, has just been unveiled. In this guide, we’ll delve into integrating web3.js into HTML to Transfer, Mint NFTs as well as querying the Blockchain. Several features within the web3.js v 1.10.0 documentation are set to be deprecated, therefore we have compiled the most up-to-date methods for this web3.js tutorial. We will refrain from using a framework like React js. Without using any frameworks, we are compelled to acquire a deeper understanding of the fundamental concepts involved in Dapp development. This hands-on approach helps you build a robust foundation for your blockchain development skills. Simply follow the step-by-step instructions, copy-paste codes, and read through the provided code snippets. Here’s what we cover in this tutorial:
Web3.js 4.x Migration Highlights
Getting Started: Web3.js
Part 1: Connect to Metamask
Part 2: Display Account Information
Part 2: Send Transaction
Part 3: Interact with a Smart Contract
We provide examples and visuals throughout this tutorial to illustrate the concepts being discussed.
Web3.js 4.x Migration Highlights
This guide walks you through some of the significant code changes for the migration to Web3.js 4.x.
Breaking Changes
1. Module Import
// Web3.js 1.x import
const Web3 = require('web3');
// Web3.js 4.x import
const { Web3 } = require('web3');
In Web3.js 4.x, we’ve switched to the destructuring syntax for importing the Web3 object.
2. Default Providers
In Web3.js 4.x, the web3.givenProvider and web3.currentProvider defaults are undefined. Previously, they were null when web3 was instantiated without a provider.
// Defaults to undefined in Web3.js 4.x, previously null
console.log(web3.givenProvider);
console.log(web3.currentProvider);
If you’re using MetaMask, it’s recommended to pass window.ethereum directly to the Web3 constructor, instead of using Web3.givenProvider.
// Instantiate Web3 with MetaMask providerconst web3 = new Web3(window.ethereum);
3. Callbacks in Functions
Callbacks are no longer supported in functions, except for event listeners. Here’s an example of invalid use of callbacks in Web3.js 4.x, which was valid in version 1:
// INVALID in Web3.js 4.x
web3.eth.getBalance("0x407d73d8a49eeb85d32cf465507dd71d507100c1", function(err, result) {
if (err) {
console.log(err);
} else {
console.log(result);
}
});
Minor Changes
1. Instantiating a Contract
In Web3.js 4.x, you must use the new keyword to instantiate a web3.eth.Contract() object.
// Web3.js 1.x
const contract = web3.eth.Contract(jsonInterface, address);
// Web3.js 4.x
const contract = new web3.eth.Contract(jsonInterface, address);
2. getBalance
In Web3.js 4.x, getBalance returns a BigInt instead of a String. For the full migration guide visit the web3.js docs: https://web3js.org/#/
Getting Started: Web3.js
Create a folder with the following directory: directory/ |- index.html |- main.js |- styles.css
Where to download web3.js:
CDN link: web3.js
Find this project on:
Github project Link: https://github.com/AymericRT/web3.js.git
Part 1: Connect to MetaMask
We will now create a button that establishes a connection with MetaMask. The frontend codes will be put in index.htmland the web3.js javascript codes in main.js
Index.html
The codes below contain the following:
HTML boilerplate
Meta Mask button
web3.js CDN package Script Tag
main.js Script Tag
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Web3.js Example</title>
<link rel="stylesheet" href="./styles.css" />
<script
src="https://cdnjs.cloudflare.com/ajax/libs/web3/4.0.1-alpha.5/web3.min.js"
integrity="sha512-NfffVWpEqu1nq+658gzlJQilRBOvjs+PhEKSjT9gkQXRy9OfxI2TOXr33zS7MgGyTpBa5qtC6mKJkQGd9dN/rw=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
></script>
</head>
<body>
<main>
<p id="status1" class="status" style="color: red">disconnected</p>
<p id="status2" style="color: white"></p>
<div class="maincontainer">
<!-- Connect Wallet -->
<div class="container">
<div class="buttonswrapper">
<div class="buttonswrapperGrid">
<button id="metamask" class="button28">MetaMask</button>
</div>
</div>
</div>
<!-- Account Info Button -->
<!-- Send Transaction -->
<!-- Mint -->
</div>
</main>
<script src="./main.js"></script>
</body>
</html>
HTML Code snippet elaborations
<script src="https://cdnjs.cloudflare.com/ajax/libs/web3/4.0.1-alpha.5/web3.min.js"
integrity="sha512-NfffVWpEqu1nq+658gzlJQilRBOvjs+PhEKSjT9gkQXRy9OfxI2TOXr33zS7MgGyTpBa5qtC6mKJkQGd9dN/rw=="
crossorigin="anonymous" referrerpolicy="no-referrer">
This script tag in the <head> section is used to load the web3.js CDN library.
This is the equivalent of const { Web3 } = require(‘web3’);
<script src="./main.js"></script>
This loads our “main.js” functions into the HTML. Best practice is to place it at bottom of body to avoid accessing DOM elements before rendering.
Styles.css
Copy paste the css codes from Github: Github link to file: https://github.com/AymericRT/web3.js/blob/master/styles.css
Main.js File
In the main.js file, we will incorporate the necessary javascript functions to activate the MetaMask button. There are three primary functions below:
Event Listener for “metamask” Button
Upon a click event, it checks if MetaMask is available and connected.
If yes, it calls the ConnectWallet function.
Otherwise, it logs an error message to the console and updates the status on the web page to indicate the absence of MetaMask.
checkMetaMaskAvailability()
The function is used to determine if a MetaMask browser extension is present and connected.
It checks for the existence of window.ethereum and attempts to request access to MetaMask accounts through ConnectMetaMask().
If the account access is granted, the function returns true, indicating successful connection. Otherwise, it logs an error message and returns false.
ConnectMetaMask();
This function is responsible for connecting to MetaMask.
It attempts to request access to MetaMask accounts using eth_requestAccounts.
Cross-reference the explanations above with the codes below.
const web3 = new Web3(window.ethereum);
// Function to check if MetaMask is available
async function checkMetaMaskAvailability() {
if (window.ethereum) {
try {
// Request access to MetaMask accounts
await window.ethereum.request({ method: "eth_requestAccounts" });
return true;
} catch (err) {
console.error("Failed to connect to MetaMask:", err);
return false;
}
} else {
console.error("MetaMask not found");
return false;
}
}
// Event listener for MetaMask button
document.getElementById("metamask").addEventListener("click", async () => {
const metaMaskAvailable = await checkMetaMaskAvailability();
if (metaMaskAvailable) {
await ConnectWallet();
} else {
// MetaMask not available
console.error("MetaMask not found");
// Update status
document.getElementById("status1").innerText = "MetaMask not found";
document.getElementById("status1").style.color = "red";
}
});
//Function to connect to MetaMask
async function ConnectWallet() {
try {
// Request access to MetaMask accounts
await window.ethereum.request({ method: "eth_requestAccounts" });
// Update status
document.getElementById("status1").innerText = "Connected to MetaMask";
document.getElementById("status1").style.color = "green";
} catch (err) {
// Handle error
console.error("Failed to connect to MetaMask:", err);
// Update status
document.getElementById("status1").innerText = "Failed to connect to MetaMask";
document.getElementById("status1").style.color = "red";
}
}
Important Code Snippets: Connect to MetaMask
web3.js window.ethereum
const web3 = new Web3(window.ethereum);
web3 is a new instance of the Web3.js library.
By assigning window.ethereum to the Web3 constructor, web3 variable uses the provided Ethereum provider for interacting with the Ethereum network.
web3.js request Accounts
await window.ethereum.request({ method: "eth_requestAccounts" });
This code requests access to the user’s Ethereum accounts in the web app using the eth_requestAccounts method.
Run your server
In your terminal, navigate to your directory and run this Python command, it will automatically deploy your server in port 8000.
python -m SimpleHTTPServer 8000
This is how your website should look on localhost:8000
Part 2: Display Account Information
Now that our MetaMask is connected, we are capable of querying the blockchain for essential account details such as the connected account address, balance the current network fees. We’ll create a button for this functionality and name it “Account_Information”.
Index.html
Insert the “account_Information” button under the comment.
<!-- Account Information Button -->
<div class="secondcontainer">
<button id="accountbutton" class="button49">
Account Information
</button>
</div>
Main.js
We’ll write a function that fetches data from MetaMask. The data will display the following:
Account address
Account balance
The current network fees
The two primary functions required are:
Event Listener for Account Information Button
Upon a click event, it checks if MetaMask is available and connected.
If yes, it calls the AccountInfo() function.
Otherwise, it logs an error and updates the web page status.
AccountInformarion();
This function is responsible for fetching data from the Ethereum Wallet.
It retrieves the account address using the web3.eth.getAccounts() method.
The account balance is obtained through the web3.eth.getBalance(from) method.
Additionally, it retrieves the current gas price by calling the web3.eth.getGasPrice() method.
// Event Listener for Account Information
document.getElementById("accountbutton").addEventListener("click", async () => {
const metaMaskAvailable = await checkMetaMaskAvailability();
if (metaMaskAvailable) {
await AccountInformation();
}
});
//Function to call the Account Information
async function AccountInformation() {
const account = await web3.eth.getAccounts();
const from = account[0];
const balanceInWei = await web3.eth.getBalance(from);
const balanceInEth = web3.utils.fromWei(balanceInWei, "ether");
const gasPrice = await web3.eth.getGasPrice();
const gasPriceInEth = web3.utils.fromWei(gasPrice, "ether");
// Display the account information
document.getElementById("status2").innerText ="Account Address: " + from + "\nBalance: " + balanceInEth + " ETH" +"\nGas Price: " + gasPriceInEth;
document.getElementById("status2").style.color = "white";
}
Important Code Snippets: Display Account Information
web3.js get Accounts
const account = await web3.eth.getAccounts() //returns list of account
const from = account[0]; // gets the first account in the list
The getAccounts() method returns a list of accounts the node controls. Basically, it returns the connected MetaMask accounts.
The first element in the list will represent the primary connected account.
web3.js get Balance
web3.eth.getBalance(from)
The getBalance() method fetches the balance of the account address passed to the parameter in Wei. Note that 1 Ether is equivalent to 10^18 Wei.
web3.js get Gas Price
web3.eth.getGasPrice()
The getGasPrice() method retrieves the current gas price in Wei for transactions on the Ethereum network.
web3.js convert Wei to Ether
web3.utils.fromWei(balanceInWei, "ether")
This method converts your balance from Wei units to Ether. If you want to convert it into GWEI, simply change “ether” to “gwei”.
Part 3: Send Ether Transaction
Send Transaction requires the following arguments:
Sender Address
Recipient Address
Specified Amount
Our sender Address will be the default connected account. For the recipient address and the specified amount, we will generate a form with two input fields and a “send” button that will initiate the transfer.
Index.html
Insert the form under the <!— Send Transaction —> comment.
<!-- Send Transaction -->
<form>
<div class="inputcontainer">
<input
id="addressinput"
class="myinput"
placeholder="Address 0x0..."
/>
<input
id="amountinput"
class="myinput"
placeholder