React/Typescript error when adding promise to a function?

Question

I am using the following function from useWagmi to write a transaction to an ethereum contract: https://wagmi.sh/docs/hooks/useContractWrite

const [{ data, error, loading }, write] = useContractWrite(
    {
      addressOrName: 'Address',
      contractInterface: Interface,
    },
    'publicSaleMint',
    {
      args: [thirdHashRef.current],
    }
  ) 

This has worked perfectly. However, I want to return the transaction response after the transaction is sent - I followed the documentation and added a promise to the end of the transaction:

const [{ data, error, loading }, write] = useContractWrite(
    {
      addressOrName: 'Address',
      contractInterface: Interface,
    },
    'publicSaleMint',
    {
      args: [hashRef.current],
    }
  )=> Promise<{ data?: TransactionResponse, error?: Error }> **Added this**

And am calling the function here:

async function handleSubmit() {
    await cleanEntries()
      .then(() => { write() })
      .then((data) => { console.log(data.TransactionResponse) })
  }

However, now I am getting the following errors:

Operator '<' cannot be applied to types 'PromiseConstructor' and '{ data: any; error: ErrorConstructor; }'.ts(2365)

Operator '>' cannot be applied to types 'boolean' and '() => Promise<void>'.ts(2365)

How can I fix this?

Answer 1

The documentation you mention says this:

Return Values

write

(
  config: {
    args: any | any[]
    overrides?: Overrides
  } = {},
) => Promise<{ data?: TransactionResponse; error?: Error }>

That documentation is not telling you to write that code, it's just showing you the arguments and the type of the return value. This is a fragment of a function declaration where the part after the => is the return type of the function. This is written by the library author, and you don't need to add it.

So the write function returned by useContractWrite already returns a promise, all you have to do is use it. You don't need to add any special syntax.

const [{ data, error, loading }, write] = useContractWrite(/* ... */)
write().then(() => console.log('promise resolved'))

Playground