Multicall batcher example

[1evi7eo]

Description

This PR introduces a new Multicall Batcher Example tool for BNB Smart Chain (BSC), a BNBChain Cookbook demo that demonstrates how to batch multiple contract calls into a single RPC call using multicall contracts. This approach significantly reduces gas costs, improves performance, and minimizes RPC round trips when interacting with multiple smart contracts.

Key Features:

• Batch Contract Calls: Combine multiple contract calls into a single multicall execution using the Multicall3 contract deployed on BSC mainnet
• Gas Savings: Reduce transaction overhead by batching calls together, with gas savings estimation functionality
• Performance Comparison: Compare multicall execution vs individual calls to demonstrate the efficiency gains
• Token Examples: Pre-configured examples for popular BSC tokens (BUSD, USDT, USDC, WBNB) with common ERC-20 function calls
• Call Encoding & Decoding: Automatic encoding of function calls and decoding of return data using ethers.js Interface
• Flexible Execution: Support for aggregate3 method which allows individual call failures without failing the entire batch
• Real-time Results: Display decoded results from batched calls with success status for each call
• Example Call Generation: Helper functions to create example token calls (name, symbol, decimals, totalSupply, balanceOf)

How Multicall Works:

1. Encode Calls: Each contract call is encoded with its target address and call data using ethers.js Interface
2. Batch Execution: All calls are sent to the Multicall3 contract (0xcA11bde05977b3631167028862bE2a173976CA11) in a single transaction
3. Atomic Execution: All calls execute against the same block state, ensuring consistency
4. Results: Returns success status and return data for each call, allowing partial failures

Use Cases:

• Fetching multiple token balances in one call
• Querying multiple contract states simultaneously
• Reducing RPC round trips for better performance
• Saving gas when executing multiple operations
• Building efficient dApps that need to query multiple contracts

Tech Stack:

• TypeScript for type safety and maintainability
• ethers.js v6 for blockchain interaction, call encoding/decoding, and contract interfaces
• Vite for build tooling and development server
• Vitest for comprehensive unit testing
• Plain HTML/CSS/JS for frontend with modern dark theme UI

This implementation provides a complete, production-ready example that demonstrates best practices for multicall batching on BSC, making it easier for developers to optimize their dApp interactions.

Fixes # (issue)

Type of change

Please delete options that are not relevant.

• New feature (non-breaking change which adds functionality)
• Bug fix (non-breaking change which fixes an issue)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• This change requires a documentation update

How Has This Been Tested?

Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce.

• Ran unit tests with npm test to verify all multicall functions (encoding, decoding, execution)
• Tested encodeCall function with various ERC-20 function signatures and arguments
• Verified decodeCall function correctly decodes return data for different function types
• Tested executeMulticall function with multiple contract calls using Multicall3 aggregate3 method
• Validated executeIndividualCalls function for comparison testing
• Tested createExampleTokenCalls function generates correct calls for token metadata queries
• Verified estimateGasSavings function calculates appropriate gas savings estimates
• Tested with real BSC token addresses (BUSD, USDT, USDC, WBNB) to verify RPC integration
• Validated multicall execution returns correct block number and results array
• Tested error handling for empty call arrays, invalid addresses, and failed contract calls
• Verified frontend UI correctly displays batched call results and decoded return values
• Tested performance comparison between multicall and individual call execution
• Built and tested production build with npm run build && npm run preview
• Tested on BSC mainnet with real token contracts and multicall execution

Reproduction Steps:

1. Clone the repository and run ./clone-and-run.sh (or manually: npm install, cp .env.example .env, npm test, npm run dev)
2. Open the dev server URL (e.g., http://localhost:5173) in a browser
3. Select a pre-configured token example (BUSD, USDT, USDC, WBNB) or enter a custom token address
4. Optionally enter an address for balanceOf query
5. Click "Execute Multicall" to batch all token queries into a single RPC call
6. Verify all results are returned simultaneously with decoded values (name, symbol, decimals, totalSupply, balance)
7. Compare with individual call execution to see the performance difference
8. Review gas savings estimation displayed in the UI

Checklist:

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes

[vivixu-cmd]

Congratulations! You have received a Cookbook reward. Please reply with your BSC wallet address.Thanks

[1evi7eo]

Congratulations! You have received a Cookbook reward. Please reply with your BSC wallet address.Thanks

Thank you for the opportunity to contribute!
0x23b23556c3CAA3C582EeE23Fc0D972352FB2a62c