Ethereum: Read data from multiple contracts using wagmi and react

ileegetarmas

Ethereum: Read data from multiple contracts using wagmi and react

Reading Data from Multiple Contracts with Wagmi and React

As a developer, you’re likely familiar with the Wagmi library, which provides an easy-to-use API for interacting with multiple blockchain contracts using Web3.js and Ethers.js. In this article, we’ll explore how to use Wagmi’s useReadContracts hook to fetch data from multiple Ethereum contracts at once.

The Problem

Let’s say you have a list of 5 contracts with the same ABI (Application Binary Interface), but each contract has its own implementation. You want to fetch all the necessary data from these contracts using Wagmi, but currently, useReadContracts only returns the information about one contract at a time.

The Solution

To solve this problem, we’ll use Wagmi’s useGetContractInstance hook and create an array of instances for each contract. Then, we’ll pass this array to useReadContracts to fetch data from all contracts simultaneously.

Here’s some sample code to get you started:

import { ethers } from 'ethers';

import { useReadContracts } from '@wagmi/wagmi';


const abi = [...]; // your contract ABI


// Create an array of instances for each contract

const contractInstances = [

  {

    id: 1,

    address: '0x...',

    instance: ethers.ContractABI.fromWei(abi, ethers.utils.hexToWei('...'))(),

  },

  {

    id: 2,

    address: '0x...',

    instance: ethers.ContractABI.fromWei(abi, ethers.utils.hexToWei('...'))(),

  },

  // ...

];


// Use useGetContractInstance to get an array of contract instances

const contracts = await useReadContracts(contractInstances);


// Now you can fetch data from all contracts simultaneously using wagmi's useGetContractData hook

async function fetchData() {

  const date = [];

  for (const contract of contracts) {

    try {

      const result = await useGetContractData(contract.address, abi);

      data.push(...result.data);

    } catch ( error ) {

      console.error(error);

    }

  }

  return data;

}


// Use the fetchData function whenever you need to fetch data from multiple contracts

setInterval(fetchData, 1000); // fetch every second

Tips and Variations

• You can pass an object with contract addresses and key-value pairs for useReadContracts.

const contractInstances = [

  {

    id: 1,

    address: '0x...',

    instance: ethers.ContractABI.fromWei(abi, ethers.utils.hexToWei('...'))(),

  },

  {

    id: 2,

    address: '0x...',

    instance: ethers.ContractABI.fromWei(abi, ethers.utils.hexToWei('...'))(),

  },

];

• If you need to fetch data from contracts in parallel, you can use Wagmi’s useGetContractData hook with an object where the key is the contract address and the value is a function that returns data for each contract.

const contractInstances = [

  {

    id: 1,

    address: '0x...',

    instance: ethers.ContractABI.fromWei(abi, ethers.utils.hexToWei('...'))(),

  },

  {

    id: 2,

    address: '0x...',

    instance: ethers.ContractABI.fromWei(abi, ethers.utils.hexToWei('...'))(),

  },

];


const data = {};

for (const contract of contracts) {

  data[contract.address] = await useGetContractData(contract.address, abi);

}

Hope this helps! Let me know if you have any questions or need further assistance.