make useScaffoldWriteContract & useDeployedContractInfo backward compatible

[technophile-04]

Description:

This allows developers to consume useScaffoldWriteContract and useDeployedContractInfo hook in both ways until we make breaking changes release :

Example of useScaffoldWriteContract

Old:

  const { writeContractAsync: depeRecatedWriteAsync } = useScaffoldWriteContract("YourContract");

When using the Old way the IDE should give the warning :

New:

  const { writeContractAsync: newWriteAsync } = useScaffoldWriteContract({
    contractName: "YourContract",
    chainId: 31337,
  });

To test:

Copy this in page.tsx

"use client";

import type { NextPage } from "next";
import { useAccount } from "wagmi";
import { Address } from "~~/components/scaffold-eth";
import { useDeployedContractInfo, useScaffoldReadContract, useScaffoldWriteContract } from "~~/hooks/scaffold-eth";

const Home: NextPage = () => {
  const { address: connectedAddress } = useAccount();
  const { data: depecatedContractInfo } = useDeployedContractInfo("YourContract");
  const { data: newContractInfo } = useDeployedContractInfo({ contractName: "YourContract", chainId: 31337 });

  console.log({ depecatedContractInfo, newContractInfo });

  const { writeContractAsync: depeRecatedWriteAsync } = useScaffoldWriteContract("YourContract");

  const { writeContractAsync: newWriteAsync } = useScaffoldWriteContract({
    contractName: "YourContract",
    chainId: 31337,
  });

  const { data: currGreeting } = useScaffoldReadContract({
    contractName: "YourContract",
    functionName: "greeting",
  });

  const handleWriteWithDeperecated = async () => {
    try {
      await depeRecatedWriteAsync({
        functionName: "setGreeting",
        args: ["With deprecated write!"],
      });
    } catch {}
  };

  const handleNewWrite = async () => {
    try {
      await newWriteAsync({
        functionName: "setGreeting",
        args: ["With new write!"],
      });
    } catch {}
  };

  return (
    <>
      <div className="flex items-center flex-col flex-grow pt-10">
        <div className="px-5">
          <div className="flex justify-center items-center space-x-2 flex-col sm:flex-row">
            <p className="my-2 font-medium">Connected Address:</p>
            <Address address={connectedAddress} />
          </div>
        </div>
        <p>{currGreeting}</p>
        <div className="flex flex-col space-y-3">
          <button onClick={handleWriteWithDeperecated} className="btn btn-primary">
            Write with Deperecated
          </button>

          <button onClick={handleNewWrite} className="btn btn-primary">
            Write with New
          </button>
        </div>
      </div>
    </>
  );
};

export default Home;

Question:

Shall we also console.warn("Warning: Using useScaffoldWriteContract with a string parameter is deprecated. Please use the object parameter version instead") log this warning in browser? if people use string param?

[carletex]

Good stuff @technophile-04 this is great!

Left a tiny comment.

Shall we also console.warn("Warning: Using useScaffoldWriteContract with a string parameter is deprecated. Please use the object parameter version instead") log this warning in browser? if people use string param?

No strong opinion here. Up to you all.

P.S. I was trying to understand why we needed the explicit return type (introduced in #931) and not sure if we needed it there, but we definitely need it here because of the overloads (requires a function declaration syntax). So all good!

[technophile-04]

P.S. I was trying to understand why we needed the explicit return type (introduced in #931) and not sure if we needed it there, but we definitely need it here because of the overloads (requires a function declaration syntax). So all good!

Ohh we didn't add any explicitly return type there, no? In https://github.com/scaffold-eth/scaffold-eth-2/pull/931/files#diff-9cc9e3c8fd6916932f4a4dd3a27f0147d2753318c962178abfa880cab12cc79e we just created a type for args obj UseScaffoldWriteConfig<TContractName> but maybe I missed the point

[damianmarti]

@technophile-04 This is great!! The code looks good and it's working as expected.

Question:

Shall we also console.warn("Warning: Using useScaffoldWriteContract with a string parameter is deprecated. Please use the object parameter version instead") log this warning in browser? if people use string param?

I think the IDE messages are great, but it would be useful to give more visibility (and it's more annoying to see) by showing the warning log with the deprecated messages, too.

[rin-st]

Lgtm! For vscode/cursor it even cross out deprecated variants!

Shall we also console.warn("Warning: Using useScaffoldWriteContract with a string parameter is deprecated. Please use the object parameter version instead") log this warning in browser? if people use string param?

No strong opinion too, but agree with Damu

[technophile-04]

Added the warning log feel free to suggest a better message!

[damianmarti]

@technophile-04 The console warn message looks good to me. Thanks!!