update wagmi, viem and rainbowkit versions

[technophile-04]

Description

Nicely tested the whole app and everything works great 🙌

Here is the test Index.ts page file :

Test file with main hooks and imperative read/write examples :

import { useEffect } from "react";
import Link from "next/link";
import type { NextPage } from "next";
import { parseEther } from "viem";
import { useAccount, useWalletClient } from "wagmi";
import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
import { MetaHeader } from "~~/components/MetaHeader";
import { Address } from "~~/components/scaffold-eth";
import {
  useScaffoldContract,
  useScaffoldContractRead,
  useScaffoldContractWrite,
  useScaffoldEventHistory,
} from "~~/hooks/scaffold-eth";

const Home: NextPage = () => {
  const { address: connectedAddress } = useAccount();
  const { writeAsync: writeSetGreetings } = useScaffoldContractWrite({
    contractName: "YourContract",
    functionName: "setGreeting",
    args: ["Hello World!"],
    value: parseEther("0.01"),
  });

  const { data: totalCounter } = useScaffoldContractRead({
    contractName: "YourContract",
    functionName: "totalCounter",
    watch: true,
  });

  const { data: walletClient } = useWalletClient();

  const { data: YourContract } = useScaffoldContract({
    contractName: "YourContract",
    walletClient,
  });

  useEffect(() => {
    const fetchTotalCounter = async () => {
      const value = await YourContract?.read.totalCounter();
      console.log("totalCounter", value);
    };

    fetchTotalCounter();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  const { data: eventHistory } = useScaffoldEventHistory({
    contractName: "YourContract",
    eventName: "GreetingChange",
    filters: { greetingSetter: connectedAddress },
    fromBlock: 0n,
    watch: true,
  });

  console.log("eventHistory", eventHistory);

  return (
    <>
      <MetaHeader />
      <div className="flex items-center flex-col flex-grow pt-10">
        <div className="text-center mb-8">
          <span className="block text-2xl mb-2">The connected address is</span>
          <Address address={connectedAddress} />
        </div>
        <div className="px-5">
          <h1 className="text-center mb-4">
            <span className="block text-3xl mb-2">With Hooks</span>
          </h1>
          <h1 className="text-center mb-4">
            <span className="block text-2xl mb-2">The totalCounter is</span>
            <span className="block text-4xl font-bold">{totalCounter?.toString()}</span>
          </h1>
          <button className="btn btn-primary btn-sm ml-12 mb-2" onClick={() => writeSetGreetings()}>
            Send Transaction
          </button>
          <h1 className="text-center mt-8">
            <span className="block text-3xl mb-2">Imperative</span>
          </h1>
          <button
            className="btn btn-primary btn-sm"
            onClick={async () => {
              await YourContract?.write.setGreeting(["hello world"], { value: parseEther("0.01") });
            }}
          >
            Send Imperative Transaction
          </button>
        </div>
      </div>
    </>
  );
};

export default Home;

Also, I think its kind of good if we stay up-to-date with viem, Wagmi, and Rainbowkit maybe we do it every month's end (which we are kind of following already)🙌

Here is prod url : https://wagmi-viem-rainbowkit.vercel.app/

[technophile-04]

This also closes #418, since Viem has added pgn init and also added pgn to hardhat.config.ts at 7199bf6

[carletex]

Thank you @technophile-04 Everything works great.

Super helpful that you put the code to test the hooks in the PR. I'll save it for future updates :)

Also, I think its kind of good if we stay up-to-date with viem, Wagmi, and Rainbowkit maybe we do it every month's end (which we are kind of following already)🙌

💯