Write contract

Writing to the contract is a very similar operation to sending a transaction. In fact, it does send the transaction under the hood but provides a more convenient way to encode the data argument for it. Let's look at the code right away:

In the UI we will have a form to transfer Watermelon tokens to another account:

It will call a transfer method on the ERC-20 contract to send the tokens. We will need to specify the contract information: hash and ABI first. And then, do the job with the useWriteContract hook:

import { useWriteContract } from 'wagmi';

export function ERC20Transfer() {
  const { data: hash, writeContract, error, isPending } = useWriteContract();

  async function submit(e: FormEvent<HTMLFormElement>) {
    ...
    writeContract({
      ...contractConfig,
      functionName: 'transfer',
      args: [
        to, //recipient address
        value, //amount of WTM tokens to transfer
      ],
    });
  }

  return (
    <div className="container">
      <div className="stack">
        <div>Send Watermelons 🍉🍉🍉</div>
        <br />
        <form className="set" onSubmit={submit}>
          <input name="address" placeholder="Address" required />
          <input
            name="value"
            placeholder="Amount (Watermelons)"
            type="number"
            step="1"
            required
          />
          <button disabled={isPending} type="submit">
            {isPending ? 'Confirming...' : 'Send'}
          </button>
        </form>
      </div>
    </div>
  );
}

You can also use useWaitForTransactionReceipt hook to get the receipt and track confirmation of the transaction as it was done in Send Transaction article.

note

If you want to practice more, you can also read this Wagmi tutorial with minting NFTs.