Listening to events (frontend) in Blockchain / Solidity

Introduction

Listening to events lets your webpage know when something important happens on the blockchain. This helps your app update automatically without needing to refresh.

You want to show a message when a user receives tokens.

You want to update the balance on the page after a transaction.

You want to notify users when a new item is added to a marketplace.

You want to track when a smart contract changes state.

You want to log blockchain activity in real-time for analytics.

Syntax

Blockchain / Solidity

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

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

You need the contract address, ABI, and a provider (like MetaMask or Infura) 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(`Tokens moved from ${from} to ${to}: ${amount.toString()}`);
});

Listen to an Approval event to know when someone allows another to spend tokens.

Blockchain / Solidity

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

If no events happen, your app just waits without errors.

Blockchain / Solidity

// Edge case: No events emitted yet
// The listener will wait silently until an event happens.
contract.on('NewItem', (itemId) => {
  console.log(`New item added with ID: ${itemId}`);
});

Use once to listen only to the next event and then stop listening.

Blockchain / Solidity

// Edge case: Only one event emitted
contract.once('Sold', (buyer, price) => {
  console.log(`Item sold to ${buyer} for ${price.toString()}`);
});

Sample Program

This program connects to the Ethereum mainnet and listens for Transfer events on a token contract. When a transfer happens, it prints details about who sent tokens, who received them, the amount, and the block number.

Blockchain / Solidity

import { ethers } from 'ethers';

// Example contract info (replace with real values)
const contractAddress = '0x1234567890abcdef1234567890abcdef12345678';
const contractABI = [
  'event Transfer(address indexed from, address indexed to, uint256 value)'
];

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

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

  console.log('Listening for Transfer events...');

  // 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('Event block number:', event.blockNumber);
  });
}

main().catch(console.error);

Important Notes

Listening to events is fast and efficient because it waits for blockchain changes instead of checking repeatedly.

Time complexity is low since events are pushed to your app only when they happen.

Common mistake: forgetting to remove listeners when the component unmounts, which can cause memory leaks.

Use once if you only want to listen to a single event occurrence.

Summary

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

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

Use contract.on for continuous listening and contract.once for a single event.

Practice

1. What is the main purpose of listening to blockchain events in a frontend application?

easy

A. To create new smart contracts

B. To send transactions to the blockchain

C. To react instantly when something changes on the blockchain

D. To mine new blocks on the blockchain

Solution

1. Step 1: Understand event listening in frontend

   Listening to events means the app waits and reacts when blockchain data changes.

2. Step 2: Identify the purpose of event listening

   The main goal is to update the app instantly when something happens on the blockchain.

3. Final Answer:

   To react instantly when something changes on the blockchain -> Option C

4. Quick Check:

   Listening to events = instant reaction [OK]

Hint: Events let your app update instantly on blockchain changes [OK]

Common Mistakes:

• Confusing event listening with sending transactions
• Thinking event listening creates contracts
• Mixing event listening with mining blocks

2. Which of the following is the correct way to listen continuously to an event named Transfer using ethers.js?

easy

A. contract.once('Transfer', callback)

B. contract.watch('Transfer', callback)

C. contract.listen('Transfer', callback)

D. contract.on('Transfer', callback)

Solution

1. Step 1: Recall ethers.js event listening methods

   Use contract.on to listen continuously to events.

2. Step 2: Match method to event name

   For event 'Transfer', the syntax is contract.on('Transfer', callback).

3. Final Answer:

   contract.on('Transfer', callback) -> Option D

4. Quick Check:

   Continuous listening = contract.on [OK]

Hint: Use contract.on for continuous event listening [OK]

Common Mistakes:

• Using contract.once for continuous listening
• Using non-existent methods like listen or watch
• Confusing method names

3. Given this code snippet using ethers.js:

contract.once('Approval', (owner, spender, value) => {
  console.log(`Owner: ${owner}`);
  console.log(`Spender: ${spender}`);
  console.log(`Value: ${value}`);
});

// Event emitted: Approval('0xabc', '0xdef', 100)

What will be printed to the console?

medium

A. Owner: 0xabc\nSpender: 0xdef\nValue: 100

B. Owner: 0xdef\nSpender: 0xabc\nValue: 100

C. Owner: 0xabc\nSpender: 0xdef

D. No output because contract.once listens only once

Solution

1. Step 1: Understand contract.once behavior

   contract.once listens for the next single event and runs the callback once.

2. Step 2: Match event parameters to callback

   The event emits Approval('0xabc', '0xdef', 100), so owner='0xabc', spender='0xdef', value=100.

3. Final Answer:

   Owner: 0xabc\nSpender: 0xdef\nValue: 100 -> Option A

4. Quick Check:

   contract.once prints event data once [OK]

Hint: contract.once triggers callback once with event args [OK]

Common Mistakes:

• Swapping owner and spender values
• Thinking contract.once never prints
• Missing the value parameter in output

4. You wrote this code to listen to a Deposit event:

contract.on('Deposit', (user, amount) => {
  console.log(`User ${user} deposited ${amount}`);
});

But your app never logs anything even though deposits happen. What is the most likely mistake?

medium

A. The event name 'Deposit' is misspelled or does not exist in ABI

B. You used contract.once instead of contract.on

C. You did not import ethers.js library

D. You forgot to connect the provider to the contract

Solution

1. Step 1: Check event name and ABI

   If the event name is wrong or missing in ABI, the listener won't trigger.

2. Step 2: Verify other common issues

   Provider connection and import errors usually cause runtime errors, not silent no logs.

3. Final Answer:

   The event name 'Deposit' is misspelled or does not exist in ABI -> Option A

4. Quick Check:

   Correct event name in ABI = logs appear [OK]

Hint: Check event name spelling and ABI matches [OK]

Common Mistakes:

• Assuming contract.once listens continuously
• Ignoring ABI event definitions
• Not connecting provider causes errors, not silent failure

5. You want your frontend app to listen to a Transfer event but only react to transfers where the from address is your wallet address 0x123. Which approach correctly filters these events using ethers.js?

hard

A. contract.on('Transfer', { from: '0x123' }, callback)

B. contract.on('Transfer', (from, to, amount) => { if (from === '0x123') { /* react */ } })

C. contract.filter('Transfer').from('0x123').on(callback)

D. contract.once('Transfer', (from, to, amount) => { if (from === '0x123') { /* react */ } })

Solution

1. Step 1: Understand event filtering in ethers.js frontend

   Direct filtering by event parameters in contract.on is not supported; filtering must be done inside the callback.

2. Step 2: Choose correct method to filter by 'from'

   Use contract.on('Transfer', callback) and inside callback check if from === '0x123'.

3. Final Answer:

   contract.on('Transfer', (from, to, amount) => { if (from === '0x123') { /* react */ } }) -> Option B

4. Quick Check:

   Filter inside callback for specific addresses [OK]

Hint: Filter event data inside callback, not in contract.on params [OK]

Common Mistakes:

• Trying to filter events by passing object to contract.on
• Using contract.once for continuous filtering
• Using non-existent filter chaining methods