5 min read

Optimizing Smart Contract Interactions: A Guide to Multi Call integration in Web3 Front-End DApp

In this article we’ll explore the implementation of Multi Call in a Web3 dApp.

Leonardo Simone Digiorgio

Leonardo Simone Digiorgio

16 Oct 2023

Multicall intro


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 smart contract

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:

Smart contract Multidell

Or simply imported from Openzeppelin like in this case:

Smart contract import

How multicall works?

Smart contract explain

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:

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)

Front end 1 and 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).

Front end 3 and 4

Front end 5

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

Front end 6

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

Front end 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:


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.


bytecode 2

If you console.log argsBytes, you can observe it in the browser’s console output.

bytecode 3

You can observe how the multicall will work in this specific scenario.

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


And from app perspective will be:

app perspective 1

app perspective 2

After you confirm the request for multicall addContact, you’ll see the contacts added in your addressBook.


And if you navigate to the Goerli Etherscan, you can view your Multicall transaction record.


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.


Want to Be In-The-Know with Our Newest Projects?

Join our newsletter to be the first to know when we start building new projects and other updates from Ethereal.

We care about your data in our privacy policy.

Provezero dApp