Setting up Realtime Notifications using Blockchain

TechJD
4 min readMay 9, 2024

--

Block explorers like Etherscan hold a lot of invaluable information, but let’s face it: the interface is neither user-friendly nor visually appealing. Collecting that information and organizing it to tell a story will present the opportunity for developers and SaaS founders to deliver value to web3.0 companies looking to harness and convey the vast amount of data on the blockchain in ways that are easy to understand. We do this by providing an interface layer atop our database, in this case, the block explorer, and then develop the APIs that will determine how this data is interpreted and displayed for the end user. For starters, we will set up notifications for our end users, and to do that, we first need to learn a bit about how to read events.

In the context of Ethereum and smart contracts, understanding event signatures is crucial for developers and blockchain researchers.

What is an Event Signature in Solidity?

In Solidity, an event is a type of EVM (Ethereum Virtual Machine) logging mechanism that emits information from the smart contract to the blockchain, which can then be accessed by external consumers like front-end applications or server-side monitoring systems. Events are declared in a contract and emitted with specific data values. Each event has a unique signature that helps in identifying and retrieving it from transaction logs.

How is an Event Signature Calculated?

The signature of an event is derived from its declaration. It includes the name of the event and the data types of its parameters, enclosed in parentheses and separated by commas. For example, the event signature for an Approval event declared as event Approval(address indexed owner, address indexed spender, uint256 value); is Approval(address,address,uint256).

To calculate the event signature’s hash, Solidity uses the Keccak-256 hash function — a version of SHA-3. This hashing is not done in the Solidity code itself but by the EVM at the time of contract deployment. The resulting hash is a fixed-size 32-byte hexadecimal number. Only the first 8 bytes (64 bits) of this hash are used to form the topic of the log entry for the event, which helps in identifying the event in the blockchain’s log data. We can therefore get the signature represented in byte code using RemixIDE:

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.0;

contract GetTopic {

event Approval (address owner, address spender, uint256 value);

function generateEventTopic() external pure returns (bytes32) {
return keccak256("Approval(address,address,uint256)");
}
}

By deploying this contract to the virtual machine and then calling the function. We should get this output:
afa504e0962ad93dec232a2c88581b4028671c11f4571f9edec54fb75bd7293d

To find this event in an EVM block explorer, we need to prepend it with “0x” so the event hash will be: 0xafa504e0962ad93dec232a2c88581b4028671c11f4571f9edec54fb75bd7293d

Because the event signature is determined programmatically, as long as the method name and parameters are exactly the same, this signature will always be the same. Therefore, if the event exists and is emitted by the smart contract, we can search for it under the Events tab on a block explorer. We can use this information to set up our frontend.

In order to follow the next step, you will need an etherscan api key. You can get one for free.

First, get the logs belonging to a particular contract address:

const getLogs = async () => {
const etherscan = await axios.get(
`https://api-sepolia.etherscan.io/api?
module=logs
&action=getLogs
&address=<YOUR_CONTRACT_ADDRESS>
&page=1
&offset=1000
&apikey=<YOUR_API_KEY>`
);

let { result } = etherscan.data;
console.log(result);

return result;
};

Next, filter the logs by topic and wallet address:

const getNotifications = async () => {

//Call getLogs()
let messages = [];
let d = await getLogs().then((d) => {
console.log(d);
for (let i = d.length - 1; i > 0; i--) {

if (
//Our event signature hash goes here
d[i].topics[0] ==
"0xafa504e0962ad93dec232a2c88581b4028671c11f4571f9edec54fb75bd7293d"
) {
messages.push({
id: i,
message: "Approval: ",
hash: d[i].transactionHash,
});

console.log("Approval: " + d[i].transactionHash);
}
}

});

};

Your frontend should now display all instances of the selected event. You can do this with as many events as there available to build your notification system!

If you found this article helpful and enjoy learning about all sorts of cool tricks with Solidity and DeFi hacks, star our CryptoCadet Academy repo on GitHub for more!

TechJD is the Founder of Ascendant.Finance, which assists web2 businesses to transition to web3, consulting on all facets including SEC compliance, tokenomics, development, and connecting with angel investors. For more information check out ascendant.finance or join the Discord.

https://twitter.com/ascendantfi

https://twitter.com/cryptocadetapp

https://twitter.com/thetechjd

--

--

TechJD
TechJD

Written by TechJD

Law, programming, and everything in-between! Coming up with fun coding projects with real-world application.

No responses yet