Using usePrepareContractWrite with a dynamic abi property

[smhutch]

I'm currently running into a pretty gnarly TypeScript error when using usePrepareContractWrite with a dynamic configuration object passed into the hook. I believe this is only a TypeScript issue, and doesn't create any issues at runtime. Please let me know if there's a better way to do what I'm trying to achieve here.

I'm running into issues when writing code similar to this:

const result = usePrepareContractWrite(
    someBoolean
      ? {
          abi: MarketContractAbi,
          functionName: "list",
          args: ["0x999", BigNumber.from(1), BigNumber.from(2)]
        }
      : {
          abi: DropContractAbi,
          functionName: "createDrop",
          args: ["hello", "world", BigNumber.from(0), BigNumber.from(1)]
        }
  );

In reality, the code I have is more complex than that, but ultimately results in a union type being passed into usePrepareContractWrite. Here's an example closer to what I'm actually doing:

// This is a helper function that always returns a configuration object (one of multiple options)
const getPrepareConfig = ({ formValues: getFormValues(), nft: props.nft }) => {
   // internals not relevant
}

// This gives us a union of configuration objects, each with an abi, functionName, args
const prepareConfig  = getPrepareConfig()

const result = usePrepareContractWrite(prepareConfig)

Both of these examples lead to a variation of the following error:

Argument of type '{ abi: readonly [{ readonly inputs: readonly [{ readonly internalType: "address"; readonly name: "nftContract"; readonly type: "address"; }, { readonly internalType: "uint256"; readonly name: "tokenId"; readonly type: "uint256"; }, { ...; }]; readonly name: "list"; readonly outputs: readonly []; readonly stateMutabi...' is not assignable to parameter of type 'UsePrepareContractWriteConfig<readonly [{ readonly inputs: readonly [{ readonly internalType: "address"; readonly name: "nftContract"; readonly type: "address"; }, { readonly internalType: "uint256"; readonly name: "tokenId"; readonly type: "uint256"; }, { ...; }]; readonly name: "list"; readonly outputs: readonly [...'.
  Type '{ abi: readonly [{ readonly inputs: readonly [{ readonly internalType: "string"; readonly name: "name"; readonly type: "string"; }, { readonly internalType: "string"; readonly name: "slug"; readonly type: "string"; }, { ...; }, { ...; }]; readonly name: "createDrop"; readonly outputs: readonly []; readonly stateMuta...' is not assignable to type 'UsePrepareContractWriteConfig<readonly [{ readonly inputs: readonly [{ readonly internalType: "address"; readonly name: "nftContract"; readonly type: "address"; }, { readonly internalType: "uint256"; readonly name: "tokenId"; readonly type: "uint256"; }, { ...; }]; readonly name: "list"; readonly outputs: readonly [...'.
    Type '{ abi: readonly [{ readonly inputs: readonly [{ readonly internalType: "string"; readonly name: "name"; readonly type: "string"; }, { readonly internalType: "string"; readonly name: "slug"; readonly type: "string"; }, { ...; }, { ...; }]; readonly name: "createDrop"; readonly outputs: readonly []; readonly stateMuta...' is not assignable to type 'Partial<Pick<PrepareWriteContractConfig<readonly [{ readonly inputs: readonly [{ readonly internalType: "address"; readonly name: "nftContract"; readonly type: "address"; }, { readonly internalType: "uint256"; readonly name: "tokenId"; readonly type: "uint256"; }, { ...; }]; readonly name: "list"; readonly outputs: ...'.
      Types of property 'abi' are incompatible.
        Type 'readonly [{ readonly inputs: readonly [{ readonly internalType: "string"; readonly name: "name"; readonly type: "string"; }, { readonly internalType: "string"; readonly name: "slug"; readonly type: "string"; }, { ...; }, { ...; }]; readonly name: "createDrop"; readonly outputs: readonly []; readonly stateMutability:...' is not assignable to type 'readonly [{ readonly inputs: readonly [{ readonly internalType: "address"; readonly name: "nftContract"; readonly type: "address"; }, { readonly internalType: "uint256"; readonly name: "tokenId"; readonly type: "uint256"; }, { ...; }]; readonly name: "list"; readonly outputs: readonly []; readonly stateMutability: "...'.
          Source has 1 element(s) but target requires 2.

This error is obviously pretty hard to parse, but in short it's saying that abi 1 has one item, while abi 2 has two. In another case I have seen developing against real ABIs, the error is the same, but reflects the length of each ABI (Source has 24 element(s) but target requires 113).

My understanding of what's happening is that I am essentially creating a union of two possible objects, something roughly like this:

type PrepareConfig =
 | { abi: typeof ExampleAbiOne, functionName: 'a', args: [string, number, number]}
 | { abi: typeof ExampleAbiTwo, functionName: 'b', args: [number] , 

This type is accurate for what I'm trying to do here — I do want it to be one of two posible object shapes. When this type gets passed into usePrepareContractWrite though, I believe internally it's being converted to something like this, which later leads to the nasty type error I'm encountering:

type SomeTypeInsideUsePrepareContractWrite = {
  abi: typeof ExampleAbiOne | typeof ExampleAbiTwo,
  functionName: 'a' | 'b',
  args: [string, number, number] | [number]
}

This type is no longer quite accurate, and looses some safety since the relationship between args, functionName and abi has been lost. This type then gets passed into useContractWrite, leading to more somewhat cryptic type errors.

I'm wondering if there is a way to use usePrepareContractWrite, but opt-out of the type-checking for the options object that gets passed in to the hook? I think the types are correct, but don't work in the specific scenario of using a union of config objects. I have tried various versions of passing generic types into usePrepareContractWrite, but can't ever get it to work with dynamic abis.

I created this sandbox with a few examples to repro the type errors we have been seeing. Any advice here would be appreciated. Thanks! 😄

[smhutch]

My feeling is that I am going to need to do something like this:

const useCustomPrepareContractWrite(config: NewTypeThatSupportsUnions) => {
  return usePrepareContractWrite(config)
}

This approach seems fine to me, and I could use some type casting internally to make the config passed in work with usePrepareContractWrite.

In my previous attempts to do this, I ended up basically moving the problem on to useContractWrite (since the return type of useCustomPrepareContractWrite got passed along to useContractWrite and also conflicted).

[nascob]

I'm experiencing issues with the same issue when using readContract and it makes sense as to why - but I think there is a way to make this easier on devs.

What I'm currently experimenting with extracting something similar to your NewTypeThatSupportsUnions.

type ReadContractFunc = typeof readContract; // Extract the readContract type
type PreparedReadConfig = Parameters<ReadContractFunc>[0]; // Extract the readContractParams

Now we can use this to prepare some read configs in advance (while preserving type safety for input args):

const configA: PreparedReadConfig = { 
    address: SOME_TOKEN_ADDRESS,
    abi: erc20ABI,
    functionName: "allowance",
    args: [ WALLET_ADDRESS ],
}

const configB: PreparedReadConfig = { 
    address: SOME_TOKEN_ADDRESS,
    abi: erc20ABI,
    functionName: "balanceOf",
    args: [ WALLET_ADDRESS ],
}

const res = await readContract(someBool ? configA : configB);

It seems to screw up the return type of the readContract for me.
Feel free to experiment with the same approach for the write contract func and see if that works?