Introduction

In Ethereum and various other blockchain networks, engaging with smart contracts often proves to be both resource-intensive and expensive.

Every transaction or contract interaction results in a gas fee, and executing numerous calls individually can swiftly accumulate significant costs. Fortunately, the solution lies in the innovative concept of Multi Call.

Multi Call stands as a strategic approach enabling the bundling of numerous contract calls into a single transaction. This method drastically curtails gas expenses, boosting the efficiency of our decentralized applications (dApps). By consolidating multiple calls, we eliminate the unnecessary overhead linked with executing each call independently. As a result, users can preserve substantial funds when utilizing our smart contracts, making their interactions with blockchain technology more cost-effective and user-friendly.

In this guide, we’ll explore the implementation of Multi Call in a Web3 dApp, utilizing a simple Address Book project to effectively illustrate the concept.

This smart contract is for learning and entertainment purposes only. The address book solidity smart contract code has not been audited. Use at your own risk.

In this project we are going to use:

• The WalletConnect / WebModal V3 for wallet connectivity
• The Wagmi for read and write call smart contract (which include multicall) from our front-end dApp

The smart contract

There is nothing special about this contract, it allows one to save a list of Ethereum account address’s to the blockchain with an alias name. However it also implemented the ability to be able to add multiple contacts with only a single transaction that save gas fees (multicall).

To implement multicall you can add this function in your smart contract:

Or simply imported from Openzeppelin like in this case:

How multicall works?

Essentially, you provide the desired functions as an array of encoded data (bytes[] memory data). A for loop iterates through each data element (in this project, likely invoking the addContacts function multiple times). Each iteration involves a delegatecall to the same address (in this case, the AddressBook smart contract). This call returns two outputs: a boolean ok indicating the success or failure status of the function, and the result (bytes memory res) of the function call.

In Solidity, the delegatecall function is a low-level operation that enables a contract to delegate its invocation to another contract, essentially borrowing the functionality of the target contract. Importantly, this process maintains the calling contract’s storage and context, allowing seamless interaction between contracts while preserving the integrity of their individual states.

The front-end dApp

To try the demo, navigate to: https://multicall-address-book.vercel.app/

We’ll begin with a single addContacts transaction.

First and foremost, connect a wallet of your choice. In this instance, I used Coinbase Wallet, but feel free to use MetaMask or any other compatible wallet. (1,2)

Next, fill the address input with an Ethereum address and provide a name of your choice (3). Then, click on “Add Contact” and confirm the request (4,5).

If everything is successful, you’ll be able to see the newly added contact displayed on the bottom left corner. (6)

Additionally, if you navigate to the contract address on Goerli Etherscan, you can view your transaction record. (7)

From a code perspective, this single write call is executed using the Wagmi hook, utilizing usePrepareContractWrite and useContractWrite.

To call the multicall function, we first need the bytecode of the desired functions to be called. In this case:

• addContact(“0x033…f7D1”, “John”)
• addContact(“0x04B…B17F”, “Tom”)

To obtain the bytecode, we can use the encodeFunctionData encodeFunctionData function (from Viem), which encodes the function name and parameters into an ABI encoded value. This encoded value includes the 4-byte selector and the function arguments.

Now that we have everything, we can now prepare the contract write for the multicall and execute it.

And from app perspective will be:

Conclusion

Congratulations! You now know how to effectively use Multicall in your front-end dApp, this potent technique for optimizing contract interactions on the Ethereum blockchain. By consolidating multiple calls into a single transaction, you can dramatically slash gas costs, boost scalability, and elevate the overall user experience of your dApps.

Implementing Multicall demands a thoughtful strategy, a deep understanding of your dApp’s requirements, and meticulous design of the aggregation logic. However, the effort invested unquestionably pays off in the form of the benefits it delivers.