Up viem, wagmi and rainbowkit

[rin-st]

Description

Step 1 of #917 (comment)

Up viem, wagmi and rainbowkit. Not updating abitype since it breaking the app because version will differ with abitype inside viem

Also added yarn plugin which helps to update dependencies. How to use: yarn upgrade-interactive

Additional Information

• This is not a duplicate of any existing pull request
• I have read the contributing docs (if this is your first contribution)

[technophile-04]

Tysm @rin-st !! Just checked everything and everything works like a charm! Just pushed a small commit updating abitype.

Test Code :

"use client";

import { ReactNode, useState } from "react";
import type { NextPage } from "next";
import { formatEther, parseEther } from "viem";
import { useAccount, useWalletClient } from "wagmi";
import { Address, AddressInput, Balance, EtherInput, InputBase } from "~~/components/scaffold-eth";
import {
  useScaffoldContract,
  useScaffoldEventHistory,
  useScaffoldReadContract,
  useScaffoldWriteContract,
  useTransactor,
} from "~~/hooks/scaffold-eth";

const ExampleWrapper = ({ children }: { children: ReactNode }) => {
  return <div className="flex flex-col gap-4 bg-base-100 shadow-xl rounded-xl p-5">{children}</div>;
};

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

  // ------ State ------
  const [newGreeting, setNewGreeting] = useState("");
  const [greetingValue, setNewGreetingValue] = useState("");
  const [counterAddress, setCounterAddress] = useState("");

  // --------------------- SE-2 Custom Hook -------------------
  const transactorWrite = useTransactor();

  // ---- WRITE METHODS ----
  // TEST: Autocompleteion for contractName
  const { writeContractAsync: writeYourContractAsync } = useScaffoldWriteContract("YourContract");

  const { data: walletClient } = useWalletClient();
  const { data: YourContract } = useScaffoldContract({
    // TEST: Autocompleteion for contractName
    contractName: "YourContract",
    // TEST: If you remove walletClient, this it should give TS error at line 115 that `write` is not defined property
    walletClient,
  });

  // --- READ METHODS ---
  const { data: userGreetingCounter, refetch } = useScaffoldReadContract({
    // TEST: Autocompleteion for contractName and functionName
    contractName: "YourContract",
    functionName: "userGreetingCounter",
    args: [counterAddress],
    query: {
      enabled: false,
    },
  });

  const { data: connectedAddressCounter } = useScaffoldReadContract({
    contractName: "YourContract",
    functionName: "userGreetingCounter",
    args: [connectedAddress],
  });

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

  return (
    <>
      <div className="flex items-center flex-col flex-grow pt-10 gap-8">
        <div className="px-5 flex flex-col items-center">
          <h1 className="text-center">
            <span className="block text-2xl mb-2">Welcome to</span>
            <span className="block text-4xl font-bold">Scaffold-ETH 2</span>
          </h1>
          <div className="flex gap-2">
            <span>Connected Address: </span>
            <Address address={connectedAddress} />
          </div>
          <div className="flex gap-2 mt-2 items-center">
            <span>Balance: </span>
            <Balance address={connectedAddress} />
          </div>
          <div className="flex gap-2 mb-3">
            <span>My counter</span>
            <span>{connectedAddressCounter?.toString() || 0}</span>
          </div>

          <button
            className="btn btn-primary"
            onClick={async () => {
              try {
                await transactorWrite({
                  to: "0x55b9CB0bCf56057010b9c471e7D42d60e1111EEa",
                  value: parseEther("5"),
                });
              } catch (error) {}
            }}
          >
            Send 5 ETH
          </button>
        </div>
        {/*--------- Write Demo -------------- */}
        {/*Demo with useScaffoldContractWrite Input + Value*/}
        <ExampleWrapper>
          <h1 className="text-center text-lg underline">UseScaffoldContractWrite Example</h1>
          <InputBase placeholder="Set new greeting" value={newGreeting} onChange={value => setNewGreeting(value)} />
          <EtherInput value={greetingValue} onChange={value => setNewGreetingValue(value)} />
          <button
            className="btn btn-primary btn-md"
            onClick={async () => {
              try {
                await writeYourContractAsync({
                  // TEST: TS autocompletion and types for functioName, args and value
                  functionName: "setGreeting",
                  args: [newGreeting],
                  value: greetingValue ? parseEther(greetingValue) : undefined,
                });
              } catch (error) {
                console.error("Error setting greeting", error);
              }
            }}
          >
            Set Greeting
          </button>
        </ExampleWrapper>

        {/*Demo with bare useScaffolContract */}
        <ExampleWrapper>
          <h1 className="text-center text-lg underline">useScaffoldContract Example</h1>
          <InputBase placeholder="Set new greeting" value={newGreeting} onChange={value => setNewGreeting(value)} />
          <EtherInput value={greetingValue} onChange={value => setNewGreetingValue(value)} />
          <button
            className="btn btn-primary btn-md"
            onClick={async () => {
              try {
                if (!YourContract) throw new Error("YourContract not loaded");
                await transactorWrite(() =>
                  YourContract.write.setGreeting([newGreeting], {
                    value: greetingValue ? parseEther(greetingValue) : undefined,
                  }),
                );
              } catch (error) {
                console.error("Error setting greeting", error);
              }
            }}
          >
            Set Greeting
          </button>
        </ExampleWrapper>

        {/*--------- Read Demo -------------- */}
        <ExampleWrapper>
          <h1 className="text-center text-lg underline">useScaffoldContractRead Example</h1>
          <AddressInput placeholder="Counter for address" value={counterAddress} onChange={setCounterAddress} />
          <p>Counter: {userGreetingCounter?.toString()} </p>
          <button className="btn btn-primary btn-md" onClick={() => refetch()}>
            Read
          </button>
        </ExampleWrapper>

        <ExampleWrapper>
          <h1 className="text-center text-lg underline">useScaffoldEventHistory Example</h1>
          <div className="overflow-x-auto">
            <table className="table">
              {/* head */}
              <thead>
                <tr>
                  <th></th>
                  <th>Address</th>
                  <th>Greetings</th>
                  <th>Premium</th>
                </tr>
              </thead>
              <tbody>
                {greetingsChangeLogs?.map((log, index) => (
                  <tr key={index}>
                    <th>{index + 1}</th>
                    <th>
                      <Address address={log.args.greetingSetter} />
                    </th>
                    <th>{log.args.newGreeting}</th>
                    <th>{log.args.value ? formatEther(log.args.value) : "0"} ETH</th>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        </ExampleWrapper>
      </div>
    </>
  );
};

export default Home;

---

Nitpick: Umm I am a bit skeptical on adding yarn interactive-tools-plugin , I just tried it out and its great for us maintainers! But not sure if it would helpful for people who will be using SE-2 . Seems like it will be just an hidden feature for us maintainer. So not sure if we should ship this plugin out of the box. But yeah let's here from others 🙌

[rin-st]

Thanks for update!

Nitpick: Umm I am a bit skeptical on adding yarn interactive-tools-plugin , I just tried it out and its great for us maintainers! But not sure if it would helpful for people who will be using SE-2 . Seems like it will be just an hidden feature for us maintainer. So not sure if we should ship this plugin out of the box. But yeah let's here from others 🙌

I think it's better to leave it, because

• it's easier to users to maintain their builds if they know how to use it
• we don't mention this plugin in docs (we can do it later if needed)
• in yarn v4 this plugin is included by default, so if/when we up yarn to v4 we will have it anyway

But it's not critical to me, I can remove it if you sure it's better

[damianmarti]

It's working well for me!

I only had this deprecation warning:

✓ Compiled / in 11.3s (5775 modules)
(node:824138) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead.
(Use node --trace-deprecation ... to show where the warning was created)
○ Compiling /debug ...
✓ Compiled /debug in 1319ms (5813 modules)

I'm not sure it's related to this PR.

[rin-st]

I'm getting only this warning (exists on main too)

○ Compiling / ...
Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme

It will be fixed in next pr's after autoprefixer version update

[technophile-04]

in yarn v4 this plugin is included by default, so if/when we up yarn to v4 we will have it anyway

Ohhhh nice!! Didn't know this! Thanks! Merging this 🙌