Handle Rejection and Pending Requests

function getWalletErrorMessage(error: unknown) {
  const err = error as { code?: number; message?: string }

  if (err.code === 4001) {
    return 'You rejected the request in your wallet.'
  }

  if (err.code === -32002) {
    return 'A wallet request is already open. Open MetaMask and approve or reject it.'
  }

  return err.message || 'Something went wrong. Please try again.'
}

import { useState } from 'react'
import { useWaitForTransactionReceipt, useWriteContract } from 'wagmi'

export function MintButton({ abi, address }: { abi: any; address: `0x${string}` }) {
  const [hash, setHash] = useState<`0x${string}` | undefined>()
  const [message, setMessage] = useState('')
  const [waitingForWallet, setWaitingForWallet] = useState(false)

  const { writeContractAsync } = useWriteContract()

  const receipt = useWaitForTransactionReceipt({
    hash,
  })

  const busy = waitingForWallet || receipt.isLoading

  async function onMint() {
    if (busy) return

    setMessage('Check your wallet. You are about to send a transaction.')
    setWaitingForWallet(true)

    try {
      const txHash = await writeContractAsync({
        abi,
        address,
        functionName: 'mint',
        args: [],
      })

      setHash(txHash)
      setMessage('Transaction sent. Waiting for confirmation.')
    } catch (error) {
      setMessage(getWalletErrorMessage(error))
    } finally {
      setWaitingForWallet(false)
    }
  }

  return (
    <div>
      <button onClick={onMint} disabled={busy}>
        {waitingForWallet ? 'Waiting for wallet' : receipt.isLoading ? 'Confirming' : 'Mint'}
      </button>
      {hash && <p>Transaction hash: {hash}</p>}
      {receipt.isSuccess && <p>Confirmed.</p>}
      {receipt.isError && <p>Transaction failed or reverted.</p>}
      <p>{message}</p>
    </div>
  )
}