Signing Transactions with Web3.js via Metamask: A Step-by-Step Guide

As a developer building blockchain-based applications, you are likely familiar with interacting with the blockchain. However, executing transactions programmatically within a web application can be challenging. In this article, we will walk you through signing a transaction using Web3.js and adding Metamask functionality to your browser to make it easier to execute the transaction securely.

Prerequisites

Before you proceed, make sure that:

• You have a basic understanding of JavaScript, HTML, and CSS.

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

• You have a blockchain-based project that includes a contract implementation and a backend server.

Step 1: Configure 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 to:

• Install the MetaMask browser extension.

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

• Enable the Web3 extension in your browser settings.

Step 2: Configure Web3.js

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

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

• Create a new Node.js project using the “npm init” command.

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

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

Step 3: Add Metamask functionality to your browser

To add Metamask functionality to your browser, you need to:

• Create a new file called “index.html” and add the following code:

Sign a transaction with metamask using Web3.js

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

Step 4: Create a 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 = Transaction signed by 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: '', // Data to be signed (e.g. txHash, contract methods)
gasPrice: 20, // Gas price for the transaction
});
const transactionResponse = await web3.eth.sendSignedTransaction(signature.rawTransaction);
document.getElementById('transaction-response').innerHTML = Transaction signed and sent to the blockchain!;
} catch (error) {
console.error(error);
}
});

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

ethereum builder network infrastructure