Conditional useContract() based on the useNetwork() activeChain

[pepoospina]

I'm trying to use the useContract() hook, together with the useNetwork() hook, so that the contract address is read from a JSON based on the activeChain value.

import { useContract, useNetwork } from 'wagmi';
import hardhatContractsJson from '../generated/hardhat_contracts.json';

export const useCustomContract = (): Contract | undefined => {
  const { activeChain } = useNetwork();
  
  const contractJson =
    activeChain === undefined
      ? undefined
      : (hardhatContractsJson as any)[activeChain.id][activeChain.name]['contracts']['CampaignFactory'];
  const abi = contractJson ? contractJson['abi'] : undefined;
  
  return useContract<CampaignFactory>({
    addressOrName: contractJson ? contractJson['address'] : undefined,
    contractInterface: abi,
  });
}

However, useContract() does not support undefined inputs (which is needed when the network has not been yet connected), and I can't put the useContract insider a condition, as it breaks the rules for React hooks.

I guess I'm missing something, if anyone can give me a hand that would ve very much appreciated.

Thanks!

[tmm]

Definitely something that can be improved! In the meantime, you could try falling back to constants.AddressZero from ethers for addressOrName.