Listening to events (frontend) in Blockchain / Solidity - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output when listening to a smart contract event?

Consider the following code snippet that listens to a smart contract event using ethers.js. What will be logged to the console when the event is emitted?

Blockchain / Solidity

const { ethers } = require('ethers');

const provider = new ethers.providers.JsonRpcProvider('https://mainnet.infura.io/v3/YOUR_PROJECT_ID');
const contractAddress = '0x1234567890abcdef1234567890abcdef12345678';
const abi = [
  'event Transfer(address indexed from, address indexed to, uint256 value)'
];

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

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

// Assume the Transfer event is emitted with from='0xabc...', to='0xdef...', value=1000

A Transfer from undefined to undefined of undefined tokens

B Transfer from 0xabc... to 0xdef... of 1000 tokens

C SyntaxError: Unexpected token 'on'

D TypeError: contract.on is not a function

💡 Hint

Remember that ethers.js contract objects have an 'on' method to listen to events.

The 'on' method listens to the 'Transfer' event and receives the event parameters. The console.log prints the event details as expected.

🧠 Conceptual

intermediate

Which statement about event listeners in blockchain frontend is true?

Select the correct statement about listening to blockchain events in a frontend application.

A Event listeners require the contract ABI and provider to work properly.

B Event listeners can only listen to events after the listener is set up, not past events.

C Event listeners automatically fetch past events without extra configuration.

D Event listeners do not need the contract address to listen to events.

💡 Hint

Think about what information is needed to decode and listen to events.

To listen to events, the frontend needs the contract ABI to decode event data and the provider to connect to the blockchain. Past events require special queries, not just listeners.

🔧 Debug

advanced

Why does this event listener code fail to log events?

The following code is intended to listen to a smart contract event but does not log anything when the event is emitted. What is the most likely cause?

Blockchain / Solidity

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

contract.once('MyEvent', (data) => {
  console.log('Event data:', data);
});

// Event 'MyEvent' is emitted multiple times after this code runs

A The event name is case-sensitive and 'MyEvent' does not match the emitted event.

B The contract ABI is missing the event definition, so no events are decoded.

C The provider is not connected to the correct network.

D The 'once' method listens only for the first event and ignores subsequent ones.

💡 Hint

Check the difference between 'on' and 'once' methods.

'once' listens only for the first occurrence of the event and then removes the listener. If multiple events are emitted, only the first triggers the callback.

📝 Syntax

advanced

Identify the syntax error in this event listener code

Which option contains the correct syntax to listen to a smart contract event named 'Approval' using ethers.js?

A contract.on('Approval', (owner, spender, value) => { console.log(owner, spender, value); });

B contract.on('Approval', function owner, spender, value { console.log(owner, spender, value); });

C contract.on['Approval', (owner, spender, value) => { console.log(owner, spender, value); }];

D contract.on('Approval' (owner, spender, value) => { console.log(owner, spender, value); });

💡 Hint

Check the parentheses and brackets usage in function calls.

Option A uses correct syntax: method call with event name string and arrow function callback. Other options have missing commas, wrong brackets, or incorrect function syntax.

🚀 Application

expert

How to efficiently update UI on multiple event emissions?

You have a frontend app listening to a 'NewBid' event emitted frequently by a smart contract. To avoid UI lag, which approach is best to update the UI efficiently?

A Update the UI immediately inside the event listener callback for every event.

B Ignore some events to reduce updates and only show the latest event.

C Batch event data in an array and update the UI periodically using a timer.

D Use synchronous blocking code inside the event listener to ensure order.

💡 Hint

Think about how to reduce frequent UI re-renders while keeping data fresh.

Batching events and updating the UI periodically reduces rendering overhead and improves performance when events are frequent.