Listening to events (frontend) in Blockchain / Solidity - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to listen for the 'Transfer' event on a contract.

Blockchain / Solidity

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

Drag options to blanks, or click blank then click option'

ATransfer

BApproval

CDeposit

DWithdraw

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong event name like 'Approval' instead of 'Transfer'.

Forgetting to put the event name as a string.

The event name to listen for is 'Transfer'. This matches the event emitted by the contract.

2fill in blank

medium

Complete the code to remove the event listener for 'Transfer'.

Blockchain / Solidity

contract.[1]('Transfer', callbackFunction);

Drag options to blanks, or click blank then click option'

Alisten

Boff

CremoveListener

Dstop

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'off' which may not be supported in some libraries.

Using 'listen' which is not a valid method.

To remove a specific event listener, use removeListener with the event name and callback.

3fill in blank

hard

Fix the error in the code to correctly listen for events with filters.

Blockchain / Solidity

const filter = contract.filters.[1](null, userAddress);
contract.on(filter, (from, to, amount) => {
  console.log(`Filtered transfer from ${from} to ${to} of ${amount}`);
});

Drag options to blanks, or click blank then click option'

AApproval

BTransfer

CDeposit

DWithdraw

Attempts:

3 left

💡 Hint

Common Mistakes

Using the wrong event name in the filter.

Passing incorrect parameters to the filter method.

The filter should be created for the 'Transfer' event to listen for transfers involving the user address.

4fill in blank

hard

Fill both blanks to create a filter for 'Approval' events where the owner is a specific address.

Blockchain / Solidity

const filter = contract.filters.[1]([2], null);

Drag options to blanks, or click blank then click option'

AApproval

B0x1234567890abcdef1234567890abcdef12345678

CTransfer

D0xabcdefabcdefabcdefabcdefabcdefabcdefabcd

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'Transfer' instead of 'Approval' for the event name.

Using the wrong address or null in the filter parameters.

The filter is for 'Approval' events where the first parameter (owner) matches the given address.

5fill in blank

hard

Fill all three blanks to listen for 'Deposit' events and log the depositor and amount.

Blockchain / Solidity

contract.on('[1]', ([2], [3]) => {
  console.log(`Deposit by ${depositor} of ${amount}`);
});

Drag options to blanks, or click blank then click option'

ADeposit

Bdepositor

Camount

Dwithdrawer

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong event name like 'Withdraw'.

Using incorrect parameter names that don't match the event.

The event name is 'Deposit'. The callback parameters are 'depositor' and 'amount' to match the event signature.

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