bug: Types of property 'abi' are incompatible.

Is there an existing issue for this?

• I have searched the existing issues

Package Version

0.7.3

Current Behavior

I upgraded from 0.6.8 to 0.7.3. I followed the migration guide, principally addressOrName and contractInterface renamed to address and abi. My config from usePrepareConfigWrite now throws an error when passed into useContractWrite

      Types of property 'abi' are incompatible.
        Type 'readonly unknown[]' is not assignable to type 'readonly {}[]'.
          Type 'unknown' is not assignable to type '{}'.

Expected Behavior

With the fields renamed, I expected the config to work as it did previously

Steps To Reproduce

Before, with 0.6.8:

  const { config } = usePrepareContractWrite({
    addressOrName: contractAddresses(writeContractName),
    contractInterface: abis[writeContractName],
    functionName: 'safeClaimUBI',
    args: [outstandingCharacters]
  });

  const { writeAsync } = useContractWrite({ ...config, chainId: genesisChain.id });

After, with 0.7.3:

  const { config } = usePrepareContractWrite({
    address: contractAddresses(writeContractName),
    abi: abis[writeContractName],
    functionName: 'safeClaimUBI',
    args: [outstandingCharacters]
  });

  const { writeAsync } = useContractWrite({ ...config, chainId: genesisChain.id }); // this line throws the error:

Error:

TS2345: Argument of type '{ chainId: number; abi: readonly unknown[]; address: string; functionName: "safeClaimUBI"; mode: "prepared"; request: ethers.PopulatedTransaction & { to: `0x${string}`; gasLimit: ethers.BigNumber; }; }' is not assignable to parameter of type 'UseContractWriteConfig<readonly unknown[], "safeClaimUBI"> | undefined'.
  Type '{ chainId: number; abi: readonly unknown[]; address: string; functionName: "safeClaimUBI"; mode: "prepared"; request: ethers.PopulatedTransaction & { to: `0x${string}`; gasLimit: ethers.BigNumber; }; }' is not assignable to type 'MutationConfig<SendTransactionResult, Error, UseContractWriteArgs<Abi, string>> & Omit<ContractConfig<Omit<{ ...; }, OmitConfigProperties>, readonly unknown[], "safeClaimUBI", never, { ...; }>, "args"> & ... 5 more ... & Omit<...>'.
    Type '{ chainId: number; abi: readonly unknown[]; address: string; functionName: "safeClaimUBI"; mode: "prepared"; request: ethers.PopulatedTransaction & { to: `0x${string}`; gasLimit: ethers.BigNumber; }; }' is not assignable to type 'Omit<ContractConfig<Omit<{ abi: readonly unknown[]; functionName: "safeClaimUBI"; chainId?: number | undefined; }, OmitConfigProperties>, readonly unknown[], "safeClaimUBI", never, { isAbiOptional: true; isAddressOptional: true; isArgsOptional: true; isFunctionNameOptional: true; isRequestOptional: true; }>, "args">'.
      Types of property 'abi' are incompatible.
        Type 'readonly unknown[]' is not assignable to type 'readonly {}[]'.
          Type 'unknown' is not assignable to type '{}'.
    87 |   });
    88 |
  > 89 |   const { writeAsync } = useContractWrite({ ...config, chainId: genesisChain.id });

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

[oveddan]

I have this same issue and it’s tough to track down what is wrong or whats wrong with my ABI - given i generate it directly using hardhats generation functionality.

[oveddan]

Ok well I figured out a workaround. I"m using hardhat’s sample deploy script to generate the abi.

The current script has this function:

function saveFrontendFiles(token) {
  const fs = require("fs");
  const contractsDir = path.join(__dirname, "..", "frontend", "src", "contracts");

  if (!fs.existsSync(contractsDir)) {
    fs.mkdirSync(contractsDir);
  }

  fs.writeFileSync(
    path.join(contractsDir, "contract-address.json"),
    JSON.stringify({ Token: token.address }, undefined, 2)
  );

  const TokenArtifact = artifacts.readArtifactSync("Token");

  fs.writeFileSync(
    path.join(contractsDir, "Token.json"),
    JSON.stringify(TokenArtifact, null, 2)
  );
}

I can generate a typescript friendly abi with the following code:

 const abiTs = `export const abi = ${JSON.stringify(ContractArtifact.abi, null, 2)} as const`;

Altogether it looks like:

function saveFrontendFiles(token) {
  const fs = require("fs");
  const contractsDir = path.join(__dirname, "..", "frontend", "src", "contracts");

  if (!fs.existsSync(contractsDir)) {
    fs.mkdirSync(contractsDir);
  }

  fs.writeFileSync(
    path.join(contractsDir, "contract-address.json"),
    JSON.stringify({ Token: token.address }, undefined, 2)
  );

  const TokenArtifact = artifacts.readArtifactSync("Token");

  const abiTs = `export const abi = ${JSON.stringify(ContractArtifact.abi, null, 2)} as const`;

  fs.writeFileSync(
    path.join(contractsDir, "abi.ts"),
    abiTs
  );
}

Then in my code I can do:

import { abi } from '../contracts/abi';

and use that abi successfully.

Not sure if theres a better way to generate the ts abi file but open to suggestions.