[Release] New @celo/abis library to conveniently import (core) contract ABIs

[arthurgousset]

Hi all 👋

TLDR

We just released a new @celo/abis library.

We hope this helps you import (core) contract ABIs into your JS/TS application more conveniently and helps you access Celo's core contracts more easily.

Usage

Here is an example of how you can import core contract ABIs using @celo/abis:

// json abi
import Accounts from '@celo/abis/Accounts.json'

// ethers
import { Accounts } from '@celo/abis/types/ethers'

// web3
import Accounts from '@celo/abis/types/web3/Accounts'

// truffle
import { AccountsContract } from '@celo/abis/types/truffle'

Next steps

Please let us know if you run into any issues or have any feature requests.
All comments and suggestions welcome! 🙏

[viral-sangani]

I have been playing around with this

import { registryABI } from "@celo/abis/types/wagmi";
import { readContracts } from "wagmi";

export const useProposals = () => {
  const REGISTRY_CONTRACT_ADDRESS =
    "0x000000000000000000000000000000000000ce10";

  const getAllProposals = async () => {
    const data = await readContracts({
      contracts: [
        {
          address: REGISTRY_CONTRACT_ADDRESS,
          abi: registryABI,
          functionName: "getAddressForString",
          args: ["StableTokenEUR"],
        },
      ],
    });
    console.log("data", data);
  };

  return { getAllProposals };
};

I was getting this error -

Note
💡 Solved: Copying cp -f node_modules/@celo/abis/types/wagmi/index.ts to the root directory and using it instead of importing from the @celo/abi works.

Working Example -

import { governanceABI, registryABI } from "@/utils/Celo";
import {} from "@rainbow-me/rainbowkit";
import { readContracts } from "wagmi";

export const useProposals = () => {
  const REGISTRY_CONTRACT_ADDRESS =
    "0x000000000000000000000000000000000000ce10";

  const getAllProposals = async () => {
    const governanceAddress = (
      await readContracts({
        contracts: [
          {
            address: REGISTRY_CONTRACT_ADDRESS,
            abi: registryABI,
            functionName: "getAddressForString",
            args: ["Governance"],
          },
        ],
      })
    )[0];
    if (governanceAddress.result) {
      const governanceProposals = (
        await readContracts({
          contracts: [
            {
              address: governanceAddress.result,
              abi: governanceABI,
              functionName: "getDequeue",
            },
          ],
        })
      )[0];
      // convert bigint to int
      const proposals = governanceProposals.result!.map((proposal: any) => {
        return parseInt(proposal);
      });
      console.log("proposals", proposals);
    }
  };

  return { getAllProposals };
};

Suggestions:

• Need better docs/readme in NPM, I can help if needed
• @celo/abis/types/wagmi is not working out of the box. Need to copy the file from node_modules to make it work.
• It would be GREAT if we can export contract addresses as well along with ABIs from @celo/abi so that we don’t have to ping REGISTRY_CONTRACT and it’s a one less thing to manage.

[arthurgousset]

Thanks for sharing this here @viral-sangani !

[nicolasbrugneaux]

Thank you for sharing that, you're completely right with the fact you need to copy the typescript files, I'm currently working on a fix on @celo/abis I'll try to have it published asap so it "just works" as intended, without the copying phase.

Regarding the addresses, I think it defeats the point of the registry tbh, we can discuss it some more but having the addresses fetched dynamically works quite well with the whole wagmi hooks paradigm. You can find an example here:

export default function useCeloRegistryAddress(contractName: string) {
  const { data: address } = useContractRead({
    address: celoRegistry.address,
    abi: celoRegistry.abi,
    functionName: 'getAddressForString',
    args: [contractName],
  });

  if (address && parseInt(address, 16) === 0) {
    return undefined;
  }
  return address;
}


/// Then somewhere within a component or another hook

const address = useCeloRegistryAddress('EpochRewards');
const { data: rewardsMultiplierFraction, isLoading: multiplierLoading } = useContractRead({
  abi: epochRewardsABI,
  // wagmi hooks don't fetch data until the `address` is set
  // it's functionnaly equivalent to adding: 
  // enabled: !!address,
  address,
  functionName: 'getRewardsMultiplier',
});

[nicolasbrugneaux]

Hi @viral-sangani I published @celo/[email protected] which should solve the copying problem :) LEt me know if you encounter the same error or another one.

[arthurgousset]

@nicolasbrugneaux (Tiny nit)

Are there any release notes we can link to for @celo/[email protected] (for future reference)?

I had a look but couldn't find anything in monorepo/releases or npm @celo/abis/v/9.0.3. Maybe I missed something sorry!

I'm putting myself in the shoes of a new dev that hasn't seen this thread and is curious about the difference between @celo/[email protected] and @celo/[email protected]. A couple of sentences (basically what you wrote above) would be really useful I think.