1

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.

4
  • Could you please attach your NftMarketplace.json ABI file?
    – Mila A
    Mar 2 at 15:48
  • Also please check whether status indicates anything, like this: const { status, data: hash, writeContract } = useWriteContract(); and then display the status on the UI.
    – Mila A
    Mar 2 at 15:50
  • 1
    Hey. First of all, thanks for this. status returned "error" on going deeper into the docs I found out that the hook returns an error object as well which pointed me to the fact that tokenPrice was not a BigInt. That was the underlying problem. Thanks!
    – Sam Hawkz
    Mar 4 at 15:27
  • Glad to help!! You're welcome! :)
    – Mila A
    Mar 4 at 17:00

2 Answers 2

0

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

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.