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

Challenge - 5 Problems

❓ Predict Output

intermediate

What is the output when listening to a simple event?

Consider the following code snippet that listens to a blockchain event using ethers.js. What will be logged to the console when the event is emitted with value 42?

Blockchain / Solidity

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

const provider = new ethers.providers.JsonRpcProvider();
const contractAddress = '0x1234567890abcdef1234567890abcdef12345678';
const abi = [
  'event ValueChanged(uint256 newValue)'
];

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

contract.on('ValueChanged', (newValue) => {
  console.log(`New value is: ${newValue.toString()}`);
});

// Assume event ValueChanged(42) is emitted by the contract

A New value is: 42

B TypeError: newValue.toString is not a function

C New value is: undefined

D New value is: 0x2a

💡 Hint

Remember that ethers.js BigNumber objects have a toString() method to convert to readable strings.

The event listener receives a BigNumber object representing the value 42. Calling toString() converts it to the string '42'.

❓ Predict Output

intermediate

What happens if you forget to remove an event listener?

Given the following code, what will be the output after emitting the event twice?

Blockchain / Solidity

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

const provider = new ethers.providers.JsonRpcProvider();
const contractAddress = '0xabcdefabcdefabcdefabcdefabcdefabcdefabcd';
const abi = [
  'event DataUpdated(string data)'
];

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

function onDataUpdated(data) {
  console.log(`Data updated: ${data}`);
}

contract.on('DataUpdated', onDataUpdated);

// Event DataUpdated('First') emitted
// Event DataUpdated('Second') emitted

A

Data updated: First
Data updated: First

B

Data updated: First
Data updated: Second
Data updated: Second

C

Data updated: First
Data updated: Second

D No output because listener is not removed

💡 Hint

Think about how many times the listener is attached and if it is removed.

The listener is attached once and listens to both events, so it logs both updates once each.

🔧 Debug

advanced

Why does this event listener not log anything?

Look at the code below. The event Transfer is emitted on the contract, but the console never logs anything. What is the reason?

Blockchain / Solidity

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

const provider = new ethers.providers.JsonRpcProvider();
const contractAddress = '0xfeedfeedfeedfeedfeedfeedfeedfeedfeedfeed';
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) => {
  console.log(`Transfer from ${from} to ${to} of ${value.toString()}`);
});

A No output because the event is not indexed

B No output because event name is case-sensitive and should be 'Transfer' not 'transfer'

C No output because the callback parameters are in wrong order

D No output because the provider is not connected to the right network

💡 Hint

Check the event name spelling and capitalization.

Event names in ethers.js are case-sensitive. Using 'transfer' instead of 'Transfer' means the listener never matches the event.

📝 Syntax

advanced

Which option correctly listens to multiple events with one callback?

You want to listen to both Deposit and Withdrawal events from a contract and log their details with one function. Which code snippet is correct?

A contract.on('Deposit', (amount) => { console.log(amount); }); else contract.on('Withdrawal', (amount) => { console.log(amount); });

B contract.on('Deposit' || 'Withdrawal', (amount) => { console.log(amount); });

C contract.on(['Deposit', 'Withdrawal'], (event) => { console.log(event); });

D

contract.on('Deposit', (amount) => { console.log(amount); });
contract.on('Withdrawal', (amount) => { console.log(amount); });

💡 Hint

Think about how to attach multiple listeners properly.

Option D attaches separate listeners for each event. Option D is invalid syntax. Option D uses logical OR incorrectly. Option D has invalid syntax.

🚀 Application

expert

How to update UI state on event emission in React frontend?

You have a React app that listens to a blockchain event BalanceChanged. You want to update the displayed balance whenever the event fires. Which approach correctly updates the React state?

Blockchain / Solidity

import React, { useEffect, useState } from 'react';
import { ethers } from 'ethers';

const contractAddress = '0xabcabcabcabcabcabcabcabcabcabcabcabcabca';
const abi = [
  'event BalanceChanged(address indexed user, uint256 newBalance)'
];

export default function Balance() {
  const [balance, setBalance] = useState('0');

  useEffect(() => {
    const provider = new ethers.providers.Web3Provider(window.ethereum);
    const contract = new ethers.Contract(contractAddress, abi, provider);

    // Fill in event listener here

    return () => {
      // Clean up listener
    };
  }, []);

  return <div>Balance: {balance}</div>;
}

A

contract.on('BalanceChanged', (user, newBalance) => {
  setBalance(newBalance.toString());
});

return () => {
  contract.off('BalanceChanged');
};

B

contract.on('BalanceChanged', (user, newBalance) => {
  setBalance(newBalance);
});

return () => {
  contract.off('BalanceChanged');
};

C

contract.on('BalanceChanged', (user, newBalance) => {
  balance = newBalance.toString();
});

return () => {
  contract.removeListener('BalanceChanged');
};

D

contract.on('BalanceChanged', (user, newBalance) => {
  setBalance(parseInt(newBalance));
});

return () => {
  contract.off('BalanceChanged');
};

💡 Hint

Remember to use the React state setter and convert BigNumber to string.

Option A correctly uses setBalance with newBalance.toString() and cleans up the listener with contract.off. Option A tries to assign state variable directly which won't update UI. Option A passes BigNumber directly without conversion. Option A uses parseInt which may lose precision.