In the previous post, I showed how to read from and write to the blockchain – essential information you need to know when building a Web3 application. The next step would be learning more about blockchain events, how to listen and react to them, and other important and helpful features Wagmi offers.
Blockchain Events and Their Benefits
In smart contracts, events are an excellent signal that “something” (an event) has occurred. Blockchain events are genuinely beneficial in broadcasting information across the chain. The reason is events add very little to the deployment and function calling gas costs, and they are free to read from the blockchain.
Let’s dive deeper into how events are stored and how you can query and filter them. I’ll introduce an image that includes a JSON representing the data in a block.
Among many things, a block has a field called “logs,” which contains relevant information about emitted events in that block. Every log has three essential fields that form the “event”:
- The address shows which contract emitted the event.
- Data includes the parameters sent with the event.
- Topics cover information about the name of the emitted event and up to 3 indexed parameters.
Since every block contains data about all the events emitted, that means anyone can build software that queries, filters, and sorts these blockchain events. Luckily, there are already many projects out there that do that, like The Graph.
Three main use cases for events and logs are the following:
- Smart contract return values for the user interface. When a smart contract emits an event, it can also send many parameters alongside. You can read these parameters on the UI.
- Asynchronous triggers with data. Directly linked with the above use case, on-chain events are asynchronous and can send some small data, like addresses, numbers, or booleans.
- A cheaper form of storage. This might not be necessarily important, but events are really cheap to store, about 8 gas per byte. By comparison, contract storage costs roughly 20.000 gas per 32 bytes. For example, if you want to show a user all his deposits, it would be better if you emitted an event for each deposit and query all the deposits instead of saving that data in the contract.
Events are really useful for web applications because they can make the website more interactive and interesting. For example, you may want to show your users notifications when certain things happen, like:
- if certain goals were met
- if an expensive item was bought
- when a user transaction was successful, or even a complete history of this user’s transactions
A Step-by-Step Process on How to Listen to Blockchain Events
When it comes to listening to events and reacting to them, Wagmi comes with a simple hook called “useContractEvent” that lets you do just that.
As you can see in the following photo taken from the documentation, the function signature is really similar to reading and writing. The first two parameters are the contract address and contract interface (ABI), followed by the event name.
The difference from the reading and writing phase is that a function will be called when the event is triggered on the blockchain.
How do events benefit our project? As I presented in the previous post, I wanted to refresh the greeting for every website user when it changed. I showed a fast but inefficient solution. The better way to do this is listening to the “ChangeGreeting” event.
One last bit of the puzzle is that the “useContractRead” hook used for reading from the blockchain also returns a “refetch” function. You can use this function when the “ChangeGreeting” event is emitted. This “refetch” function will fetch the latest data on the blockchain about the greeting.
By taking the code from the documentation and adapting it to my needs, I came up with the following:
This example also shows the significant similarities between the parameters of these two hooks.
Extra Helpful Wagmi – React Hooks You Can Use
Now, I’ll show some helpful hooks Wagmi offers that might come in handy at some point.
1.useSignMessage – as its name implies, you can use this hook to make the user sign a message. The message can then be decoded by someone to verify the authenticity and the sender of the message. If even one character of the message is modified, the encoded message will be destroyed, and won’t be authentic anymore.
2. useNetwork – a hook that tells you the current network the user has selected in his wallet. This hook is useful for two reasons:
- You can show the user error messages if he connects to the wrong network.
- You can communicate with the wallet and prompt the user to change the network (by using the switchNetwork function returned by the hook)
3. useAccount – a hook that shows the address of the currently connected account.
4. useEnsName – a hook that will fetch the ENS (Ethereum Name Service) of an address. You can combine this with the previous hook, useAccount, to show the current user ENS name if he has one. You can find three more ENS hooks in the documentation.
5. useContract – a hook I mentioned in the previous article. This is a more advanced hook as it returns the ethers Contract object. You can read, write, and listen to blockchain events through that object. But since Wagmi comes with easier ways to do that, you might just end up using them.
This sums up Wagmi, a highly maintained, highly tested, easy-to-use library that will only improve as people start using it and report issues.
I recommend you give it a try and check its many hooks that come with it.
Thanks for reading!
Solving Ethernaut Level 29: Switch 
How to Double-Check Smart Contract State Changes with Hardhat Tasks