Gist to show how to use transactor with wagmi write contract hook

page.tsx

"use client";

import type { NextPage } from "next";
import { erc20Abi } from "viem";
import { useAccount, useWriteContract } from "wagmi";
import { useTransactor } from "~~/hooks/scaffold-eth";

const ERC20_ABI = erc20Abi;

const Home: NextPage = () => {
  const { address: connectedAddress } = useAccount();

  // Dynamic address
  const dynmaicAddress = "0x0000000000000000000000000000000000000000";

  // Using wagmi write hook
  const { writeContractAsync } = useWriteContract();

  // Using scaffold-eth transactor hook
  const writeTx = useTransactor();

  const handleButtonClick = async () => {
    // First we create a function that will be used to write to the contract (passing args to wagmi's write hoook)
    const makeWriteWithParams = () =>
      writeContractAsync({
        abi: ERC20_ABI,
        address: dynmaicAddress,
        functionName: "transfer",
        args: [connectedAddress || "", 100n],
      });

    // Then we use the transactor hook to send the transaction
    await writeTx(makeWriteWithParams);
  };

  return (
    <>
      <button onClick={handleButtonClick}>Click me</button>
    </>
  );
};

export default Home;