Signing transactions using Web3.js via Metamask: a step-by-step guide

As a developer building blockchain-based applications, you’re probably familiar with the concept of interacting with the blockchain. However, executing transactions programmatically from your web application can be difficult. In this article, we’ll walk you through the process of signing transactions using Web3.js and implementing Metamask functionality in your browser to ensure secure transactions.

Prerequisites

Before continuing, make sure that:

• You have basic knowledge of JavaScript, HTML and CSS.

• You have installed Node.js and npm (package manager for Node.js) on your system.

• You have a blockchain-based project set up, including contract implementation and an internal server.

Step 1: Setting Up Metamask

Metamask is a browser extension that allows users to manage their digital assets, including private keys and wallet addresses. To use Metamask with Web3.js, you need:

• Install the MetaMask browser extension.

• Create an account in MetaMask by entering your email address and creating a password.

• Turn on the Web3 extension in the browser settings.

Step 2: Configuring Web3.js

Web3.js is a popular JavaScript library for interacting with the Ethereum blockchain. To use it, you need:

• Install Node.js and npm (as mentioned earlier).

• Create a new Node.js project using npm init.

• Initialize your project by running npm install web3 in your terminal.

• Import Web3.js into your application: const Web3 = require('web3').

Step 3: Implementing Metamask functionality in your browser

To implement Metamask functionality in your browser, you need:

• Create a new file named index.html and add the following code:

Sign the transaction using Metamask with Web3.js

In this code, we use the web3.min.js file from the CDN to import Web3.js.

Step 4: Create the script.js file

Create a new file named script.js and add the following code:

const Web3 = require('web3');
const web3 = new Web3(window.ethereum);
document.getElementById('web3').addEventListener('input', (e) => {
const privateKey = e.target.value;
web3.eth accounts.add(privateKey).then((account) => {
document.getElementById('transaction-response').innerHTML = The transaction was signed with account: ${account.address};
});
});
document.getElementById('sign-transaction').addEventListener('click', async () => {
try {
const signature = await web3.eth.signTransaction({
from: '0x...your_account_address...', // Replace with your account address
data: '', // Signature data (eg txHash, contract methods)
gasPrice: 20, // Gas price for the transaction
});
const transactionResponse = await web3.eth.sendSignedTransaction(signature.rawTransaction);
document.getElementById('transaction-response').innerHTML = The transaction is signed and sent to the blockchain!;
} catch (error) {
console.error(error);
}
});

In this code, we use Web3.js to create a new Ethereum account using the user's private key.