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.

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