WAGMI: useWriteContract is unresponsive

Question

I have a simple form where I'm asking the user for a token address, token id and it's price. On submitting these values I want to call a function on my smart contract for which I'm using wagmi's useWriteContract hook.

The problem is the hook is not erroring out or firing the transaction. Since, there's no error in the console I'm unable to determine the problem. Attaching the code for the component below. Any help is appreciated :)

'use client'
import nftMarketplaceABI from 'abis/NftMarketplace';
import React from 'react';
import { useWriteContract } from 'wagmi';

const ListToken = () => {
    const { data: hash, writeContract } = useWriteContract() 

   const submitHandler = (e: any) => {
      e.preventDefault();
      const formData = new FormData(e.target as HTMLFormElement) 
      const tokenAddress = formData.get('tokenAddress') as string 
      const tokenId = formData.get('tokenId') as string 
      const tokenPrice = formData.get('tokenPrice') as string 


      writeContract({
        address: '0x386e1a98F8124C088B46dd3743cAF8a59331E932',
        abi: nftMarketplaceABI,
        functionName: 'listItem',
        args: [tokenAddress, tokenId, tokenPrice]
      })
   }

  return (
    <div className='flex flex-col justify-center items-center'>
      <h1 className="text-2xl text-black font-bold">List Item</h1>
      <div id="item-details-box" className='flex flex-col items-center'>
        <form onSubmit={submitHandler}>
        <label> <p className='text-md text-black'> Token Address </p></label>
        <input type="text" name="tokenAddress" required></input>
        <label> <p className='text-md text-black'> Token ID </p></label>
        <input type="text" name="tokenId" required></input>
                <label> <p className='text-md text-black'> Token Price </p></label>
        <input type="text" name="tokenPrice" required></input>
          <div className='mt-4'>
          <button 
          type="submit"
          className=
          'py-2 px-8 text-white bg-blue-500 hover:bg-blue-900 transition-colors duration-300 ease-in-out rounded-md'
          >
            List
          </button>
          </div>
          </form>
      </div>
       {hash && <div>Transaction Hash: {hash}</div>}
    </div>
  )
}

export default ListToken

Here's the contract address on Sepolia - 0x386e1a98F8124C088B46dd3743cAF8a59331E932

What I've checked My wallet is connected to sepolia Contract address, ABI seems to be correct The values from the form are getting destructured correctly.

Answer 1

you should use this type for your e value: e: React.FormEvent<HTMLFormElement>

the contract is nos visible to check the parameters that function needs. can you share?

are you working with plain javascript or typescript? because for ts you can do const assertion to the ABI so it inherits it's types

Answer 2

I'm facing the same issue, i have wallet connect config, where i'm able to authenticate with my wallet in the spolia network wich i have 0,5 amount where i should have gas fee enough for the transaction.

I'm also using the useWriteContract hook from wagmi package to connect to my smart contract, a pretty basic one deployed on the sepolia test net i have etherscan on it and i have tested on the web. But for me it seems like useWriteContract does not provide in the args of its api the 'value' wich you would use to parseEther and send value as parameter in a write contract function.

No console errors. 1 week on this :)

Project setup: (using all updated basically) wagmi: 2.5 React: 18 Vite: 5.1