Ethereum - lesson 6 | HackIndia Skills

Ethereum - lesson 6 | HackIndia Skills | HackIndia

Example

Write button example

This example calls a simple contract function named increment. Replace the address, ABI, and function name with your own project contract.

Keep the button text boring and clear. A recruiter should understand the transaction path in 10 seconds.

import { useWriteContract, useWaitForTransactionReceipt } from 'wagmi'

const counterAbi = [
  {
    type: 'function',
    name: 'increment',
    stateMutability: 'nonpayable',
    inputs: [],
    outputs: [],
  },
]

const counterAddress = '0x0000000000000000000000000000000000000000'

export function IncrementButton() {
  const {
    data: hash,
    writeContract,
    isPending: isWalletOpen,
    error: writeError,
  } = useWriteContract()

  const {
    isLoading: isConfirming,
    isSuccess: isConfirmed,
    error: receiptError,
  } = useWaitForTransactionReceipt({
    hash,
  })

  function sendIncrement() {
    writeContract({
      address: counterAddress,
      abi: counterAbi,
      functionName: 'increment',
    })
  }

  return (
    <section>
      <button onClick={sendIncrement} disabled={isWalletOpen || isConfirming}>
        {isWalletOpen ? 'Check wallet' : isConfirming ? 'Waiting for confirmation' : 'Increment counter'}
      </button>

      {hash && <p>Transaction hash: {hash}</p>}
      {isConfirmed && <p>Confirmed on-chain.</p>}
      {writeError && <p>Transaction was not sent: {writeError.message}</p>}
      {receiptError && <p>Transaction failed after sending: {receiptError.message}</p>}
    </section>
  )
}

Write and Wait Transactions

One flow

Write vs read

What your UI tracks

Write button example

Show the hash

Do not fake success

What to explain

Do this now

Quick check