Minting with Wagmi

Question

I am using Wagmi hooks in my dapp. Also, I have utilized RainbowKit for wallet connection. Now, I am trying to use Wagmi to execute the mint function of my smart contract. As shown, it takes three arguments.

function mint(uint256 _amount, string memory _uri, bytes memory _data) public onlyOwner {}

I am aware that to get proper results from issuing transactions by Wagmi, we need to populate these hooks in order, usePrepareContractWrtie(), useContractWrite(), and useWaitForTransaction()

Now, let's see what my question is. In my usePrepareContractWrite(), I am passing some fixed parameters to the mint function to practice how this approach works. For instance, [100,"",[]] ( according to my contract's mint function ). It works great for me.

However, I am facing an error whenever I try to use my form inputs ( dynamic params ), which are stored in the useState() hook in my component. In other words, I can only mint tokens based on fixed conditions and can not yet mint NFTs according to my inputs.

const { config } = usePrepareContractWrite({
    address: f_nftaddress,
    abi: F_NFT.abi,
    functionName: 'mint',
    args: [ 200, "", []],
})

My form input states:

const [ formInput, updateFormInput ] = useState({ quantity: "", name: "", description: "" });
const [ tokenUrl, setTokenUrl ] = useState(null);

In usePrepareContractWrite(), In args: [ 200, "", []], I need formInput.quantitiy to be used instead of 200, and tokenUrl instead of "".

Can someone help me with this issue?

Thanks in advance

Answer 1

To use the form input values in the usePrepareContractWrite() hook, you can destructure the values from the formInput state and pass them as arguments in the args property. For example:

const { quantity, name, description } = formInput;
const { config } = usePrepareContractWrite({
  address: f_nftaddress,
  abi: F_NFT.abi,
  functionName: "mint",
  args: [quantity, tokenUrl, [name, description]],
});

This will use the quantity and tokenUrl values from the formInput state and the tokenUrl state in the args property of the usePrepareContractWrite() hook.