bug: usePrepareContractWrite chainId validation not working

[Fugashu]

Is there an existing issue for this?

• [X] I have searched the existing issues

Package Version

0.6.4

Current Behavior

I'm using the usePrepareContractWrite function in order to mint a NFT on Ethereum Mainnet.

In my MVP I'm calling the function as described here:

const {
    config,
    error: prepareError,
    isError: isPrepareError,
  } = usePrepareContractWrite({
    addressOrName: "0xaf0326d92b97df1221759476b072abfd8084f9be",
    contractInterface: ["function mint()"],
    functionName: "mint",
    chainId: 1,
  });

  const { data, error, isError, write } = useContractWrite(config);

When the user switches chains via Metamask extension, the write function invokes a transaction of 0 ETH to the specified contract address. The same behaviour occurs in the Docs page, while sometimes the 'Mint' button is disabled, occasionally when hopping chains it still tries to send a transaction when it's on the wrong chain.

Expected Behavior

An actual error whenever the current user is not on the specified chain chainId . The write function should not execute an empty transaction.

Steps To Reproduce

No response

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

No response

Anything else?

[ivelin]

I believe this is related to a previously reported bug which was closed without a fix: https://github.com/wagmi-dev/wagmi/issues/827

[tmm]

@ivelin #827 was closed because it needs a minimal reproducible example (see https://github.com/wagmi-dev/wagmi/issues/827#issuecomment-1210061779). If you believe this issue is related, it could be helpful to provide one.

[Fugashu]

import * as React from "react";
import {
  usePrepareContractWrite,
  useContractWrite,
  useWaitForTransaction,
} from "wagmi";

export function MintNFT() {
  const { config } = usePrepareContractWrite({
    addressOrName: "0xaf0326d92b97df1221759476b072abfd8084f9be",
    contractInterface: ["function mint()"],
    functionName: "mint",
    chainId: 1,
  });
  const { data, write } = useContractWrite(config);

  const { isLoading, isSuccess } = useWaitForTransaction({
    hash: data?.hash,
  });

  return (
    <div>
      <button disabled={!write || isLoading} onClick={() => write?.()}>
        {isLoading ? "Minting..." : "Mint"}
      </button>
    </div>
  );
}

Here I want to use usePrepareContractWrite with the parameter chainId: 1 in order to mint an NFT on the Ethereum Mainnet only. Whenever I switch chains and trigger the mint button, which calls the write function, Metamasks opens and prompts the user to send ETH to the specified contract address. I expected that the write function is not populated/shows an error.

[ivelin]

@ivelin #827 was closed because it needs a minimal reproducible example (see #827 (comment)). If you believe this issue is related, it could be helpful to provide one.

Not sure if you saw the follow up comment on the issue by @wuichen: https://github.com/wagmi-dev/wagmi/issues/827#issuecomment-1219285514

[jxom]

Issue has been identified. I am working on a fix. :)

[Fugashu]

Issue has been identified. I am working on a fix. :)

Thank you very much!

[github-actions[bot]]

This issue has been locked since it has been closed for more than 14 days.

If you found a concrete bug or regression related to it, please open a new bug report with a reproduction against the latest wagmi version. If you have any other comments you can create a new discussion.