Listening to events on frontend in Blockchain / Solidity - Mini Project: Build & Apply

Listening to events on frontend

📖 Scenario: You are building a simple web page that listens to blockchain smart contract events and shows them live to users.This helps users see when something important happens on the blockchain, like a new token transfer.

🎯 Goal: Create a basic HTML page and JavaScript code that connects to a blockchain smart contract and listens to a specific event, then displays the event data on the page.

📋 What You'll Learn

Create an HTML page with a button to start listening to events

Add a JavaScript variable to hold the contract address

Use a JavaScript function to listen to the 'Transfer' event from the contract

Display the event details on the page when the event is received

💡 Why This Matters

🌍 Real World

Listening to blockchain events on the frontend helps users see live updates like token transfers or contract changes without refreshing the page.

💼 Career

Frontend developers working with blockchain need to handle smart contract events to build interactive and real-time user interfaces.

1

Create the HTML structure

Create a basic HTML page with a button element with id listenButton and a div element with id eventLog to show event messages.

Blockchain / Solidity

    
    
    Blockchain Event Listener


    

Hint

Use a button with id listenButton and a div with id eventLog inside the body.

2

Add contract address variable

Add a JavaScript variable called contractAddress and set it to the string '0x1234567890abcdef1234567890abcdef12345678' inside a <script> tag before the closing </body> tag.

Blockchain / Solidity

    
    
    Blockchain Event Listener


    Start Listening
    
    
    // Your code here
    

Hint

Use const contractAddress = '0x1234567890abcdef1234567890abcdef12345678'; inside a <script> tag.

3

Add event listening function

Inside the existing <script> tag, add a function called startListening that logs 'Listening to Transfer events...' to the console. Then add an event listener to the button with id listenButton that calls startListening when clicked.

Blockchain / Solidity

    
    
    Blockchain Event Listener


    Start Listening
    
    
    const contractAddress = '0x1234567890abcdef1234567890abcdef12345678';

    // Your code here
    

Hint

Define startListening function that logs the message, then add a click event listener to the button.

4

Display event data on the page

Inside the startListening function, add code to append the text 'Transfer event received!' inside the div with id eventLog each time the function is called. Then test by clicking the button to see the message appear on the page.

Blockchain / Solidity

    
    
    Blockchain Event Listener


    Start Listening
    
    
    const contractAddress = '0x1234567890abcdef1234567890abcdef12345678';

    function startListening() {
        console.log('Listening to Transfer events...');
        // Your code here
    }

    document.getElementById('listenButton').addEventListener('click', startListening);
    

Hint

Use document.getElementById('eventLog').textContent += 'Transfer event received!\n'; inside startListening.

Practice

1. What is the main purpose of listening to blockchain events on the frontend?

easy

A. To compile smart contracts

B. To send transactions to the blockchain

C. To react instantly to changes happening on the blockchain

D. To mine new blocks

Solution

1. Step 1: Understand what events represent

   Events are signals emitted by smart contracts when something important happens.

2. Step 2: Connect event listening to frontend behavior

   Listening to these events lets the frontend update immediately without waiting for manual refresh.

3. Final Answer:

   To react instantly to changes happening on the blockchain -> Option C

4. Quick Check:

   Listening to events = instant frontend updates [OK]

Hint: Events notify frontend about blockchain changes instantly [OK]

Common Mistakes:

• Confusing event listening with sending transactions
• Thinking events compile contracts
• Believing events mine blocks

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

easy

A. contract.subscribe('Transfer', (from, to, amount) => { console.log(from, to, amount); });

B. contract.listen('Transfer', (from, to, amount) => { console.log(from, to, amount); });

C. contract.addEventListener('Transfer', (from, to, amount) => { console.log(from, to, amount); });

D. contract.on('Transfer', (from, to, amount) => { console.log(from, to, amount); });

Solution

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

   In ethers.js, the method to listen to events is on.

2. Step 2: Match the correct method with parameters

   The correct syntax is contract.on(eventName, callback).

3. Final Answer:

   contract.on('Transfer', (from, to, amount) => { console.log(from, to, amount); }); -> Option D

4. Quick Check:

   ethers.js uses .on() for events [OK]

Hint: Use .on() method to listen to events in ethers.js [OK]

Common Mistakes:

• Using .listen() which does not exist in ethers.js
• Using .addEventListener() which is DOM method, not ethers.js
• Using .subscribe() which is not ethers.js syntax

3. Given the following code snippet, what will be logged when the Deposit event is emitted with arguments user='0x123' and amount=100?

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

medium

A. User undefined deposited undefined tokens

B. User 0x123 deposited 100 tokens

C. User [object Object] deposited 100 tokens

D. SyntaxError: Unexpected token

Solution

1. Step 1: Understand event callback parameters

   The callback receives event arguments in order: user and amount.

2. Step 2: Check the console.log output format

   The template string inserts user and amount correctly into the message.

3. Final Answer:

   User 0x123 deposited 100 tokens -> Option B

4. Quick Check:

   Event args used correctly = correct message [OK]

Hint: Event callback parameters match emitted event arguments [OK]

Common Mistakes:

• Assuming parameters are undefined if not destructured
• Confusing objects with strings in output
• Expecting syntax errors from correct code

4. Identify the error in this code snippet that listens to an event and suggest the fix:

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

// Later in the code
contract.off('Approval');

medium

A. The off method requires the same callback function to remove the listener

B. The event name should be lowercase 'approval' instead of 'Approval'

C. The callback function must be async to listen to events

D. The off method does not exist in ethers.js

Solution

1. Step 1: Understand how to remove event listeners in ethers.js

   To remove a listener, you must pass the exact callback function used when adding it.

2. Step 2: Check the code's off usage

   The code calls contract.off('Approval') without the callback, so it won't remove the listener.

3. Final Answer:

   The off method requires the same callback function to remove the listener -> Option A

4. Quick Check:

   Remove listener = same callback needed [OK]

Hint: Pass same callback to .off() to remove listener [OK]

Common Mistakes:

• Calling .off() without callback removes nothing
• Changing event name case incorrectly
• Thinking callback must be async

5. You want to listen to a MessageSent event on your frontend and update the UI only for messages sent by the current user. Which approach correctly filters events before updating the UI?

hard

A. Listen to all MessageSent events and inside the callback check if sender === currentUser before updating UI

B. Use contract.on('MessageSent', callback, { filter: sender === currentUser }) to filter events automatically

C. Filter events by modifying the contract ABI to include only currentUser events

D. Listen to events only once using contract.once and update UI

Solution

1. Step 1: Understand event filtering on frontend

   ethers.js does not support filtering events by passing filter objects in on method directly.

2. Step 2: Use callback logic to filter events

   Listen to all events, then check inside the callback if the sender matches the current user before updating UI.

3. Final Answer:

   Listen to all MessageSent events and inside the callback check if sender === currentUser before updating UI -> Option A

4. Quick Check:

   Filter inside callback = correct approach [OK]

Hint: Filter events inside callback, not in .on() parameters [OK]

Common Mistakes:

• Trying to filter events via .on() parameters
• Modifying ABI to filter events (not possible)
• Using .once() which listens only once, not continuously