How to use prepare hooks when needing to pass contract arguments to useContractWrite?

[ldiego08]

I'm experiencing UX issues while sending a transaction via Rainbow wallet + WalletConnect (redirection to a website instead of opening the wallet right away) and I'm looking to move to prepared hooks as suggested in the wagmi docs. However, I fail to understand how to use this setup when I don't have the arguments ready by the time I call useContractWrite(config) as these need to be specified via a form by the user.

I need to call writeAsync inside a click handler that fires when the user submits the form and set the arguments that will be passed to the contract, but the only way to do this is by using recklesslyUnprepared mode, which I think defeats the purpose of using prepared hooks. Moreover, since I don't have the arguments ready, I get an error in the console about missing params expected by the contract (seems like it's trying to eagerly send the transaction?)

I looked for examples of achieving this, but so far haven't found any. If someone can provide guidance or an example it would be very much appreciated!

[dev-cz]

I am running into this same issue. Only thing I can think of is that after form information is submitted and values are set. Like maybe onChange of fields, it refetches the usePreparecontractWrite so it has the updated values by the time you click on the button to submit the write?

[GeminonProtocol]

I began using that usePreparecontractWrite() setup as shown in the docs and now I'm trying to disable it since it's throwing errors all the time and it can't be disabled. I have lost many hours of development trying to solve problems with this new setup.

[martindavid]

I have the similar issue too. Previously, I'll pass the instantiate the useContractWrite first and use the write function later from the consumer (which is the onClick handler. Here's what I have previously.

export const usePublicMint = (address: string): UsePublicMint => {
  const {
    write,
    isLoading: contractIsLoading,
    data: trx,
  } = useContractWrite({
    ...ContractConfig,
    functionName: 'publicMint',,
    onSettled: data => {
      if (data) {
        notifySubmitted(data?.hash)
      }
    },
    onError: error => {
           notifyError({ message: error?.data?.message ?? error?.message })
    },
  })
  const { isLoading: trxIsProcessing } = useWaitForTransaction({
    hash: trx?.hash,
    onError: error => {
      // @ts-expect-error may not be needed to construct a custom type for error
      notifyError({ message: error?.data?.message ?? error?.message })
    },
    onSuccess: data => {
      if (data) {
        notifySuccess()
      }
    },
  })

  const mint = (invocations: number) => {
    if (!address) {
      notifyError({ message: 'Please connect to wallet first.' })
    }

    if (invocations > maxInvocation) {
      notifyError({ message: 'Trying to mint too many' })
    }

    const mintValue = config.totalPriceAllocation[invocations - 1]
    const overrides = {
      value: ethers.utils.parseEther(mintValue.toString()),
      gasLimit: COLLECTION_DISTRIBUTION.gasLimit,
    }

    write({ args: [invocations], overrides })
  }

  return {
    isLoading: contractIsLoading || trxIsProcessing,
    mint,
  }
}

As you can see, in my custom hook, I return the mint function which can be called from the button onClick with the number of item to mint for example.

How does that works with the current prepare hook? Does that mean, my use case won't be feasible to do with the prepare hook?

[armatrix]

any updates?

[humblecoder]

I just use the Core functions directly.

const config = await prepareContractWrite?.(...);
const tx = await writeContract?.(config)

[jxom]

I might write some examples up this week when I have the time, but the best way to migrate from passing in args "lazily"/imperatively (via write/writeAsync's args), to passing in args "eagerly"/declaratively (via usePrepareContractWrite's args), would be to hoist it up in React state.

Below is a naive example, but hopefully good enough to convey the idea.

Before:

function Example() {
  const inputRef = useRef()

  const { data, write } = useContractWrite({
    addressOrName: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
    contractInterface: nftABI,
    functionName: 'mint'
  })
  
  return (
    <div>
      <input ref={inputRef} placeholder="Quantity"  />
      <button onClick={() => write({ args: [inputRef.current.value] })}>Mint</button>
    </div>
  )
}

After:

function Example() {
  const [quantity, setQuantity] = useState()

  const { config } = usePrepareContractWrite({
    addressOrName: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
    contractInterface: nftABI,
    functionName: 'mint',
    enabled: Boolean(quantity),
    args: [quantity]
  })
  
  const { data, write } = useContractWrite(config)
  
  return (
    <div>
      <input onChange={e => setQuantity(e.target.value)} value={quantity} placeholder="Quantity"  />
      <button disabled={!write} onClick={() => write()}>Mint</button>
    </div>
  )
}

Obviously, you'd probably want to debounce the quantity value (using a useDebounce hook or smth) so you're not spamming the RPC in the prepare phase, but this is the general idea of how you'd pass args to useContractWrite.

[jgeary]

similar question as @0xPT. I'm debugging an issue with usePrepareContractWrite where the first time it runs it is still loading / fetching and then useContractWrite doesn't run properly and thus has an undefined write func. on the very next key stroke when the input is validated again and for the rest of this page lifecycle usePrepareContractWrite works totally fine. I've already confirmed that there's nothing missing / incorrect that usePrepareContractWrite is receiving on the first call as opposed to subsequent calls. so it just seems like i need a way to wait for it to be done.

[jxom]

@0xPT – write should come back undefined if it is not prepared, so something like <button disabled={!write} onClick={() => write()} >Mint</button> should work!

@jgeary – can you provide a code snippet?

[jgeary]

im using the hooks exactly like in the docs:

  const { config, error } = usePrepareContractWrite({
    addressOrName: '0xecb504d39723b0be0e3a9aa33d646642d1051ee1',
    contractInterface: wagmigotchiABI,
    functionName: 'feed',
  })
  const { write } = useContractWrite(config)

basically just using that snippet but with an arg which is coming from props (this component is only rendered when that arg is non-null and valid and I've confirmed through console.log the arg is not the problem).

The first time the component renders there is a console error during the usePrepareContractWrite (contract.signer.getAddress is not a function which I believe is a bug on wagmi's end) and because of that calling useContractWrite immediately after fails. The second time the component renders and every time after, it works fine.

In my opinion it doesn't really make sense for usePrepareContractWrite and useContractWrite to be separate hooks - if you're using the two as intended, you would only ever want to call useContractWrite after you called usePrepareContractWrite successfully. It would be much easier if the whole process of preparing the contract write was abstracted away and rolled into useContractWrite.

How is one supposed to gracefully wait to call useContractWrite until after usePrepareContractWrite succeeds? My temporary solution is to just pass

{
  ...
  onSettled(data, error) {
    if (error) {
      prepareContractWrite.refetch();
    }
  }
}

into usePrepareContractWrite, but this gets me about ~5 of the same ugly console errors before it finally works.

[dev-cz]

100% agree with this. The useContractWrite should be a single hook, with usePrepare piece embedd where on usePrepare success, then write can be called. Like you my console log is rattled with errors.

And because some of the write functions are undefined values that only get set once a user sets them, no way to clean it up.

[jxom]

@jgeary – unable to reproduce your issue (contract.signer.getAddress is not a function) when connected & unconnected in the wagmi _dev example. The usePrepareContractWrite hook shouldn't invoke until you are connected. If you believe it is a bug in wagmi, can you please provide a minimal reproducible example via a CodeSandbox?

In my opinion it doesn't really make sense for usePrepareContractWrite and useContractWrite to be separate hooks

Our original direction was to go in the direction of having both the prepare & send step in the same hook. However, as we were building this out, we realised that managing the states between the prepare & send phases got really complicated (e.g. how do you know if an error occurred in the prepare phase vs send phase, what if a consumer just wanted to see if the prepare phase is loading?), by having it abstracted into a single hook, then we would start to make assumptions about our consumers (there are many different use cases of useContractWrite). By having them as separate hooks, we can enable our consumers to create their own version of useContractWrite (that can consist of wagmi's usePrepareContractWrite & useContractWrite) and create their own opinionated hook. Having said that, I do understand where you are coming from. We have been discussing that down the line on the roadmap, wagmi can eventually have opinionated "flow" hooks (like useContractWriteFlow or something) that cover the more common use cases.

[ldiego08]

I'm posting the solution to my use case for posterity (a form that places a bid on an ERC-721 auction contract):

const NoopEventHandler = () => { return; }

type BidSubmitFormProps = {
  tokenId: number;
  onSuccess: (amount: ethers.BigNumber, transactionHash: string) => void;
  onError: (error: string) => void;
};

const BidSubmitForm = ({ 
  tokenId, 
  onSuccess = NoopEventHandler,
  onError = NoopEventHandler, 
}) => {
  const [bid, setBid] = useState(ethers.BigNumber.from(0));

  const { config } = usePrepareContractWrite({
    addressOrName: '0x',
    contractInterface: ContractAbi,
    functionName: 'placeBid(uint256,uint256)',
    args: [tokenId, bid],
    overrides: {
      value: bid,
    },
  });

  const { write } = useContractWrite({
    ...config,
    onSuccess: ({ hash }) => onSuccess(bid, hash),
    onError: ({ message }) => onError(message),
  });

  return (
    <div>
      <input 
        onChange={e => setBid(ethers.BigNumber.from(e.target.value))} 
        value={bid}
      />
      <button disabled={!write} onClick={write}>Place Bid</button>
    </div>
  );
}

Things to consider:

• Awaiting for asyncWrite inside a handler even if it's the only thing happening inside it instead of write causes UX issues (in my case with Rainbow wallet and Metamark mobile.) Seems like write is preferable.
• Event handlers are preferable to awaiting for asyncWrite and reporting success or error afterward.
• Switching wallet providers via disconnect causes the write fn to be undefined.
• If you need the transaction hash, use the onSuccess event on useContractWrite instead of usePrepareContractWrite as the later doesn't pass it on the args.

[koolamusic]

I got away with this by leveraging a TransactionModal it looks something like this

export function TransactionModal({ onClose, isOpen, onCompleteHook, callValues, isFetching }: Props) {
    const network = useNetwork();
    const toast = useToast();

    const { config } = usePrepareContractWrite({
        addressOrName: config.registry,
        contractInterface: Nnax__factory.abi,
        chainId: network.chain?.id,
        functionName: 'stake',
        args: callValues,
        enabled: false,
    });

    const callContract = useContractWrite({
        ...config,
        onError(error) {
            console.warn('Error', error);
        },
        onSettled(data, error) {

            if (error || (error as any) instanceof UserRejectedRequestError) {
                toast({
                    title: (error as unknown as ProviderRpcError).message ?? 'Operation Failed',
                    status: 'error',
                    duration: 5000,
                    isClosable: true,
                });
            } else {
                toast({
                    title: 'Operation Successful',
                    status: 'success',
                    duration: 5000,
                    isClosable: true,
                });
            }
        }
    });

 useWaitForTransaction({
        wait: callContract.data?.wait,
        hash: callContract.data?.hash,
        onSettled(data, error) {
            !error && onCompleteHook && onCompleteHook(data);
        },
    });


    useEffect(() => {
        if (isOpen) {
            try {
                callContract.writeAsync?.();
            } catch (error) {
                toast({
                    title: (error as unknown as ProviderRpcError).message ?? 'Operation Failed',
                    status: 'error',
                    duration: 5000,
                    isClosable: true,
                });
            }
        }

        return () => {
            callContract.reset();
        };
    }, [isOpen, callValues]);


    return (
        <Modal isOpen={isOpen} onClose={onClose} size="3xl" closeOnOverlayClick={false}>
</Modal>

Then in my form, I can then push transactions by opening up the transaction modal

   const handleComplete = async (data: any) => await storage.mutateAsync({ ...data})

    const { renderForm, control } = useForm<FormInputRequest>({
        onSubmit: handleSubmit,
        defaultValues: Model.formDefaultValues,
        schema: Model.validationSchema,
    });

    /* Watch form values from react context */
    const { limitMaxTicketSupply } = useWatch({
        control,
    });

    return renderForm(
     <>
        <FormWithReactHook />
            <TransactionModal onCompleteHook={handleComplete} callValues={callParams} isOpen={isOpen} onClose={onClose} />
   </>

So the transaction modal is just a neat ui with a circular progress, that shows up and then tracks the completion of a transaction before exiting.

This pained me, and cost me over 24 hours trying to maneuver wagmi as the workflow I use for handling hooks just could not work with this new setup for prepareWrite.

[koolamusic]

So what my handleSubmit does it to open up the transaction modal. and the Modal will handle the rest. This is a very narrow case for my own needs, however, I feel like it's also a lot of code to be able to enable contract writes. As far as UX, the Modal is could be used to provide feedback for gas estimate, transaction hash etc.

But i don't like writing plenty code 😢 that's why I went with wagmi in the first place lol.

[jxom]

There is now an official example for this!

https://next.wagmi.sh/examples/contract-write-dynamic

[koolamusic]

Thanks so much, it has really helped a lot, i actually came back here to share it when I saw it, and was happy you already shared it. Well done to you and the team 💪🏾

[humblecoder]

I'm sure part of this is a misunderstanding of WAGMI, and the other part is a misunderstanding at the winding road that is React . . .

. . . but, what about situations in which you're using WAGMI inside another custom hook. I have a highly dynamic setup (previously using react-moralis) that didn't need any foreknowledge -- I could configure the entire call at the time of the call based on params passed from other (non-UI) sources.

While I realize that may not be as performant or clean, it gave me the ability to call the function as needed as dynamically as needed.

I've given the recklesslySetUnprepared a try but I'm receiving writeAsync not a function errors so I'm guessing I'm passing args or otherwise incorrectly there.

Dynamic Args wasn't helpful as it assumes the items are being set via useState, rather than being passed along to a future "hooked" function.

Any direction in this regard? 🤔

[growindiedev]

that is true. I cannot request NFT metadata from nft.storge unless I submit the form. How can I pass the asynchronous result to usePrepareContractWrite if it is not ready?

[humblecoder]

So turns out that using the Core functions directly works for me. And anything you need "later" you can calculate and send via overrides: {...} in the actual call:

const config = await prepareWriteContract?.({
        abi: "...",
        chainId: "...",
        address: "...",
        functionName: "...",
        overrides: {
          value: "...",
        },
        args: "...",
      });

[kashyapro]

Hey @humblecoder can you share the full codebase how you are using the Core function? from where you are getting the prepareWriteContract?

I am facing same issue as you, I am also migrating from react-moralis and there I have complete dynamic setup for every type run contract.

[humblecoder]

@kashyapro

https://wagmi.sh/core/actions/prepareWriteContract

[kashyapro]

Thanks @humblecoder .

[paulobordignon]

There is the possibility of using refetch from prepareWriteContract. This method worked for my use case.

const { config: configRemove, refetch: refetchRemove } =
    usePrepareContractWrite({
      address: contractAddress,
      abi: abi.abi,
      functionName: "removeProject",
      from: walletClient?.account?.address,
      enabled: false,
      args: [removeId || 0],
    });

The enabled: false disable automatic refetching, then only before the contract call happens the refetch method will be called to update the args.

See more:
https://github.com/paulobordignon/portfolio/blob/33ff09448b319065e67db4a5dd4bab792bb8b71d/src/components/organisms/Admin/Admin.tsx

[larenztatee]

Following some unreal broker on Instagram, I end up losing my saving money and profits. With the help of "' wiki help desks AT g mail . co m " I was able to recover my funds and I am Investing via wiki fx because they are secure, fast and reliable.

[chilljello]

whats the implementation in 2024? I have encountered the same issue now.