Listening to events on frontend in Blockchain / Solidity

Introduction

We listen to events on the frontend to know when something important happens in the blockchain. This helps us update the webpage automatically without refreshing.

When you want to show a message after a user sends a transaction.

When you want to update the balance on the page after it changes.

When you want to react to a new block or a contract event.

When you want to notify users about changes in real-time.

When you want to keep your app data synced with the blockchain.

Syntax

Blockchain / Solidity

const contract = new ethers.Contract(contractAddress, contractABI, provider);

contract.on('EventName', (param1, param2, event) => {
  // Your code to handle the event
  console.log(param1, param2);
});

You need the contract address, ABI, and a provider or signer to listen to events.

The callback function receives event parameters and an event object with extra info.

Examples

Listen to a Transfer event and print who sent tokens, who received, and how many.

Blockchain / Solidity

contract.on('Transfer', (from, to, amount, event) => {
  console.log(`Transfer from ${from} to ${to} of ${amount.toString()}`);
});

Listen to Approval event to know when someone approves spending tokens.

Blockchain / Solidity

contract.on('Approval', (owner, spender, value) => {
  console.log(`Approval: ${owner} allowed ${spender} to spend ${value.toString()}`);
});

Listen to an event that has no parameters.

Blockchain / Solidity

contract.on('EventName', () => {
  console.log('Event happened with no parameters');
});

Sample Program

This program connects to the Ethereum mainnet and listens for Transfer events on the DAI token contract. When a transfer happens, it prints details to the console.

Blockchain / Solidity

import { ethers } from 'ethers';

async function main() {
  // Connect to Ethereum mainnet via default provider
  const provider = ethers.getDefaultProvider();

  // Example contract: DAI stablecoin
  const contractAddress = '0x6B175474E89094C44Da98b954EedeAC495271d0F';
  const contractABI = [
    'event Transfer(address indexed from, address indexed to, uint256 value)'
  ];

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

  console.log('Listening for Transfer events on DAI contract...');

  // Listen to Transfer events
  contract.on('Transfer', (from, to, value, event) => {
    console.log(`Transfer event detected:`);
    console.log(`From: ${from}`);
    console.log(`To: ${to}`);
    console.log(`Value: ${value.toString()}`);
    console.log('---');
  });

  // Keep the script running
  // In a real frontend app, this runs as part of the app lifecycle
}

main().catch(console.error);

Important Notes

Listening to events uses network resources; avoid listening to too many events at once.

Time complexity: O(1) per event received, but depends on event frequency.

Space complexity: O(1) as events are handled one by one.

Common mistake: forgetting to remove listeners when no longer needed, which can cause memory leaks.

Use event listening when you want real-time updates; use polling only if event listening is not supported.

Summary

Listening to blockchain events lets your frontend react instantly to changes.

You need contract address, ABI, and a provider to listen to events.

Always clean up listeners to keep your app efficient.