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

Listening to events (frontend)

📖 Scenario: You are building a simple web page that listens to blockchain events from a smart contract. When the contract emits an event, your page will show a message to the user.

🎯 Goal: Create a small frontend script that connects to a blockchain contract and listens for a specific event. When the event happens, display the event data on the page.

📋 What You'll Learn

Create a variable called contractAddress with the exact value '0x1234567890abcdef1234567890abcdef12345678'.

Create a variable called contractABI with the exact value [{"anonymous":false,"inputs":[{"indexed":false,"internalType":"string","name":"message","type":"string"}],"name":"NewMessage","type":"event"}].

Create a variable called provider using new ethers.providers.Web3Provider(window.ethereum).

Create a variable called contract using new ethers.Contract(contractAddress, contractABI, provider).

Use contract.on('NewMessage', (message) => { ... }) to listen to the event and update the page.

Display the event message inside the HTML element with id eventMessage.

💡 Why This Matters

🌍 Real World

Listening to blockchain events is essential for building interactive decentralized applications (dApps) that respond to changes on the blockchain in real time.

💼 Career

Frontend developers working with blockchain need to know how to connect to smart contracts and listen to events to create responsive user interfaces.

1

Set up contract address and ABI

Create a variable called contractAddress with the value '0x1234567890abcdef1234567890abcdef12345678'. Then create a variable called contractABI with the exact event ABI array: [{"anonymous":false,"inputs":[{"indexed":false,"internalType":"string","name":"message","type":"string"}],"name":"NewMessage","type":"event"}].

Blockchain / Solidity

# Your code here

Need a hint?

Use const to create variables. The ABI is an array with one event object.

2

Create provider and contract instance

Create a variable called provider using new ethers.providers.Web3Provider(window.ethereum). Then create a variable called contract using new ethers.Contract(contractAddress, contractABI, provider).

Blockchain / Solidity

const contractAddress = '0x1234567890abcdef1234567890abcdef12345678';
const contractABI = [{"anonymous":false,"inputs":[{"indexed":false,"internalType":"string","name":"message","type":"string"}],"name":"NewMessage","type":"event"}];
# Your code here

Need a hint?

Use new ethers.providers.Web3Provider(window.ethereum) to create the provider. Then use new ethers.Contract() with the address, ABI, and provider.

3

Listen to the NewMessage event

Use contract.on('NewMessage', (message) => { ... }) to listen to the event. Inside the callback, update the text content of the HTML element with id eventMessage to the message received.

Blockchain / Solidity

const contractAddress = '0x1234567890abcdef1234567890abcdef12345678';
const contractABI = [{"anonymous":false,"inputs":[{"indexed":false,"internalType":"string","name":"message","type":"string"}],"name":"NewMessage","type":"event"}];
const provider = new ethers.providers.Web3Provider(window.ethereum);
const contract = new ethers.Contract(contractAddress, contractABI, provider);
# Your code here

Need a hint?

Use contract.on to listen. Use document.getElementById('eventMessage').textContent = message to show the message.

4

Display the event message on the page

Write a line to print the text content of the element with id eventMessage after the event is received. Use console.log to print the message from the element.

Blockchain / Solidity

const contractAddress = '0x1234567890abcdef1234567890abcdef12345678';
const contractABI = [{"anonymous":false,"inputs":[{"indexed":false,"internalType":"string","name":"message","type":"string"}],"name":"NewMessage","type":"event"}];
const provider = new ethers.providers.Web3Provider(window.ethereum);
const contract = new ethers.Contract(contractAddress, contractABI, provider);
contract.on('NewMessage', (message) => {
    document.getElementById('eventMessage').textContent = message;
    # Your code here
});

Need a hint?

Use console.log(document.getElementById('eventMessage').textContent) inside the event callback.