What are Transaction Confirmations?

In Ethereum, a transaction confirmation occurs when a transaction is included in a block and added to the blockchain. The number of confirmations indicates how many blocks have been mined after the block containing your transaction. More confirmations generally mean that the transaction is more secure and less likely to be reversed.

How to Handle Transaction Confirmations in Ethers.js

Ethers.js allows you to listen for transaction confirmations using the wait method on the transaction response object. This method can be used to wait for a specific number of confirmations before proceeding. Below is a complete HTML example demonstrating how to handle transaction confirmations using Ethers.js: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ethers.js Transaction Confirmation Example</title>
    <script src="https://cdn.jsdelivr.net/npm/ethers@5.7.0/dist/ethers.umd.min.js"></script>
</head>
<body>
    <h1>Send Ether and Wait for Confirmation</h1>
    <input type="text" id="recipientInput" placeholder="Enter recipient address" />
    <input type="number" id="amountInput" placeholder="Enter amount in ETH" />
    <input type="text" id="privateKeyInput" placeholder="Enter your private key" />
    <input type="number" id="confirmationsInput" placeholder="Enter number of confirmations to wait for" />
    <button id="sendButton">Send Ether</button>
    <pre id="transactionInfo"></pre>

    <script>
        async function sendEtherAndWaitForConfirmation() {
            const provider = new ethers.providers.Web3Provider(window.ethereum);
            const recipient = document.getElementById('recipientInput').value;
            const amount = document.getElementById('amountInput').value;
            const privateKey = document.getElementById('privateKeyInput').value;
            const confirmations = document.getElementById('confirmationsInput').value || 1;

            // Create a wallet instance
            const wallet = new ethers.Wallet(privateKey, provider);

            // Create a transaction object
            const tx = {
                to: recipient,
                value: ethers.utils.parseEther(amount) // Convert amount to Wei
            };

            try {
                // Send the transaction
                const transactionResponse = await wallet.sendTransaction(tx);
                document.getElementById('transactionInfo').innerText = "Transaction Sent: " + transactionResponse.hash;

                // Wait for the specified number of confirmations
                const receipt = await transactionResponse.wait(confirmations);
                document.getElementById('transactionInfo').innerText += "\\nTransaction Confirmed in Block: " + receipt.blockNumber + " with " + confirmations + " confirmations.";
            } catch (error) {
                document.getElementById('transactionInfo').innerText = "Error: " + error.message;
            }
        }

        document.getElementById('sendButton').onclick = sendEtherAndWaitForConfirmation;
    </script>
</body>
</html>

How It Works

In the example above:

  1. We create a simple HTML interface that allows the user to input the recipient's address, the amount of Ether to send, their private key, and the number of confirmations to wait for.
  2. The sendEtherAndWaitForConfirmation function initializes a connection to the Ethereum network using a Web3 provider.
  3. A wallet instance is created using the user's private key, which allows for signing transactions.
  4. A transaction object is constructed with the recipient's address and the amount of Ether to send, converted to Wei using ethers.utils.parseEther.
  5. The transaction is sent using wallet.sendTransaction, and the transaction hash is displayed to the user.
  6. Next, the function waits for the specified number of confirmations using the wait method on the transaction response object.
  7. Once confirmed, the block number and confirmation count are displayed on the webpage, or an error message is shown if the transaction fails.

Conclusion

Handling transaction confirmations in Ethers.js is crucial for ensuring that your transactions are securely processed on the Ethereum blockchain. By using the wait method, you can easily manage the confirmation process and provide users with feedback on the status of their transactions. This enhances the overall user experience by ensuring that they are informed about the success of their operations.