Up wagmi, viem and rainbowkit

[technophile-04]

Description:

Upgraded wagmi, viem, rainbowkit to latest version.

Since wagmi/viem now by default removed the simulation of contract write we have to handle it now, check out wevm/wagmi#4516

Initially, I thought I would add simulation logic to useTransactor but it seems there is no simulation hook / util for normal transaction in wagmi/viem and its only available for contract interaction. So it made sense to add the logic in useScaffoldWriteContract itself.

Also added a new option to useScaffoldWriteContract and disbaleSimulate if anyone wants to disable simulation.

Please feel free to be nitpicky on naming / approach!

---

To test:

Replace this in `externalContracts.ts`

import { GenericContractsDeclaration } from "~~/utils/scaffold-eth/contract";

/**
 * @example
 * const externalContracts = {
 *   1: {
 *     DAI: {
 *       address: "0x...",
 *       abi: [...],
 *     },
 *   },
 * } as const;
 */
const externalContracts = {
  11155111: {
    YourContract: {
      address: "0x3A897AaAcFCdd13b6A5F2b9fb85F36AFFa49442c",
      abi: [
        {
          inputs: [
            {
              internalType: "address",
              name: "_owner",
              type: "address",
            },
          ],
          stateMutability: "nonpayable",
          type: "constructor",
        },
        {
          anonymous: false,
          inputs: [
            {
              indexed: true,
              internalType: "address",
              name: "greetingSetter",
              type: "address",
            },
            {
              indexed: false,
              internalType: "string",
              name: "newGreeting",
              type: "string",
            },
            {
              indexed: false,
              internalType: "bool",
              name: "premium",
              type: "bool",
            },
            {
              indexed: false,
              internalType: "uint256",
              name: "value",
              type: "uint256",
            },
          ],
          name: "GreetingChange",
          type: "event",
        },
        {
          inputs: [],
          name: "greeting",
          outputs: [
            {
              internalType: "string",
              name: "",
              type: "string",
            },
          ],
          stateMutability: "view",
          type: "function",
        },
        {
          inputs: [],
          name: "owner",
          outputs: [
            {
              internalType: "address",
              name: "",
              type: "address",
            },
          ],
          stateMutability: "view",
          type: "function",
        },
        {
          inputs: [],
          name: "premium",
          outputs: [
            {
              internalType: "bool",
              name: "",
              type: "bool",
            },
          ],
          stateMutability: "view",
          type: "function",
        },
        {
          inputs: [
            {
              internalType: "string",
              name: "_newGreeting",
              type: "string",
            },
          ],
          name: "setGreeting",
          outputs: [],
          stateMutability: "payable",
          type: "function",
        },
        {
          inputs: [],
          name: "totalCounter",
          outputs: [
            {
              internalType: "uint256",
              name: "",
              type: "uint256",
            },
          ],
          stateMutability: "view",
          type: "function",
        },
        {
          inputs: [
            {
              internalType: "address",
              name: "",
              type: "address",
            },
          ],
          name: "userGreetingCounter",
          outputs: [
            {
              internalType: "uint256",
              name: "",
              type: "uint256",
            },
          ],
          stateMutability: "view",
          type: "function",
        },
        {
          inputs: [],
          name: "withdraw",
          outputs: [],
          stateMutability: "nonpayable",
          type: "function",
        },
        {
          stateMutability: "payable",
          type: "receive",
        },
      ],
      inheritedFunctions: {},
    },
  },
} as const;

export default externalContracts satisfies GenericContractsDeclaration;

Replace `page.tsx` with

"use client";

import type { NextPage } from "next";
import { useScaffoldWriteContract } from "~~/hooks/scaffold-eth";

const Home: NextPage = () => {
  const { writeContractAsync } = useScaffoldWriteContract({
    contractName: "YourContract",
    // disableSimulate: true,
  });

  const handleWithdraw = async () => {
    try {
      await writeContractAsync({
        functionName: "withdraw",
      });
    } catch (error) {
      console.error("Withdrawal failed", error);
    }
  };

  return (
    <>
      <div className="flex items-center flex-col flex-grow pt-10">
        <button className="btn btn-primary" onClick={handleWithdraw}>
          Withdraw
        </button>
      </div>
    </>
  );
};

export default Home;

Updated scaffold.config.ts with chains.sepolia.

The deployed contract is basic YourContract from SE-2 with owner being my account. So ideally withdraw function will fail saying "Not Owner" and won't give wallet pop-up at all.

In main branch if you cd packages/nextjs && yarn up wagmi viem and try to withdraw from above branch it will give metamask pop up even when trascation will revert after sending.

[rin-st]

Lgtm!

[technophile-04]

Thanks Rinat mergin this 🙌