Overview

In Ethereum, smart contracts can emit events to signal that something has happened on the blockchain. These events can be listened to by applications to react to changes or updates. Ethers.js provides a straightforward way to listen for these events, making it easier to build responsive decentralized applications (dApps).

Prerequisites

Before you can listen to events, you need the following:

  • The address of the deployed smart contract.
  • The ABI (Application Binary Interface) of the contract, which includes the event definitions.
  • A provider to connect to the Ethereum network (e.g., Infura, Alchemy, or a local node).

Sample Event

For this example, let's assume we have a simple ERC20 token contract that emits a Transfer event whenever tokens are transferred. Below is the ABI for the event: 

const contractABI = [
    "event Transfer(address indexed from, address indexed to, uint256 value)"
];

Sample Code

Below is a complete HTML example that demonstrates how to listen for the Transfer event of a smart contract 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 Event Listening Example</title>
    <script src="https://cdn.jsdelivr.net/npm/ethers@5.7.0/dist/ethers.umd.min.js"></script>
</head>
<body>
    <h1>Listen for Transfer Events</h1>
    <pre id="eventInfo"></pre>

    <script>
        async function listenToEvents() {
            const provider = new ethers.providers.Web3Provider(window.ethereum);
            const contractAddress = "0xYourContractAddressHere"; // Replace with your contract address

            const contractABI = [
                "event Transfer(address indexed from, address indexed to, uint256 value)"
            ];

            // Create a contract instance
            const contract = new ethers.Contract(contractAddress, contractABI, provider);

            // Listen for the Transfer event
            contract.on("Transfer", (from, to, value, event) => {
                const info = `Transfer Event: From ${from} to ${to} of value ${value.toString()}`;
                console.log(info);
                document.getElementById('eventInfo').innerText += info + "\\n";
            });
        }

        window.onload = listenToEvents;
    </script>
</body>
</html>

How It Works

In the example above:

  1. We create a simple HTML interface that displays the information about the transfer events.
  2. The listenToEvents function initializes a connection to the Ethereum network using a Web3 provider.
  3. A contract instance is created using the specified contract address and ABI.
  4. We set up an event listener for the Transfer event using the contract.on method. When the event is emitted, the callback function is triggered, logging the details of the transfer to the console and updating the displayed information on the webpage.

Conclusion

Listening to events emitted by a smart contract using Ethers.js is a powerful feature that allows your dApp to respond to changes on the blockchain in real-time. By setting up event listeners, you can create interactive and dynamic user experiences that reflect the current state of the blockchain.