fix(types): better types and autocomplete for custom contract hooks

.github/workflows/lint.yaml

@@ -30,7 +30,7 @@ jobs:
       - name: Install dependencies
         run: yarn install --immutable
 
-      - name: Run hardhat node & deploy contracts 
+      - name: Run hardhat node, deploy contracts (& generate contracts typescript output)
         run: yarn chain & yarn deploy 
 
       - name: Run nextjs lint

packages/hardhat/package.json

@@ -5,9 +5,10 @@
     "account": "hardhat run scripts/listAccount.ts",
     "chain": "hardhat node --network hardhat --no-deploy",
     "compile": "hardhat compile",
-    "deploy": "hardhat deploy --export-all ../nextjs/generated/hardhat_contracts.json",
+    "deploy": "hardhat deploy --export-all ../nextjs/generated/hardhat_contracts.json && yarn generateTsAbis",
     "fork": "MAINNET_FORKING_ENABLED=true hardhat node --network hardhat --no-deploy",
     "generate": "hardhat run scripts/generateAccount.ts",
+    "generateTsAbis": "hardhat run scripts/generateTsAbis.ts",
     "lint": "eslint --config ./.eslintrc.json --ignore-path ./.eslintignore ./*.ts ./deploy/**/*.ts ./scripts/**/*.ts ./test/**/*.ts",
     "lint-staged": "eslint --config ./.eslintrc.json --ignore-path ./.eslintignore",
     "test": "REPORT_GAS=true hardhat test --network hardhat",

packages/hardhat/scripts/generateTsAbis.ts

@@ -0,0 +1,26 @@
+import * as fs from "fs";
+//@ts-expect-error  This script runs after `hardhat deploy --export` therefore its deterministic that it will present
+import allGeneratedContracts from "../../nextjs/generated/hardhat_contracts.json";
+import prettier from "prettier";
+
+function main() {
+  const GENERATED_PATH = "../nextjs/generated/hardhat_contracts";
+
+  const fileContent = Object.entries(allGeneratedContracts).reduce((content, [chainId, chainConfig]) => {
+    return `${content}${parseInt(chainId).toFixed(0)}:${JSON.stringify(chainConfig, null, 2)},`;
+  }, "");
+
+  fs.writeFileSync(
+    `${GENERATED_PATH}.ts`,
+    prettier.format(`export default {${fileContent}} as const;`, { parser: "typescript" }),
+  );
+  // remove json file due to ambiguity
+  fs.unlinkSync(`${GENERATED_PATH}.json`);
+}
+
+try {
+  main();
+} catch (error) {
+  console.error(error);
+  process.exitCode = 1;
+}

packages/nextjs/components/example-ui/ContractData.tsx

@@ -1,5 +1,4 @@
 import { useEffect, useRef, useState } from "react";
-import { BigNumber } from "ethers";
 import Marquee from "react-fast-marquee";
 import { useAnimationConfig, useScaffoldContractRead, useScaffoldEventSubscriber } from "~~/hooks/scaffold-eth";
 
@@ -13,15 +12,22 @@ export const ContractData = () => {
   const containerRef = useRef<HTMLDivElement>(null);
   const greetingRef = useRef<HTMLDivElement>(null);
 
-  const { data: totalCounter } = useScaffoldContractRead<BigNumber>("YourContract", "totalCounter");
+  const { data: totalCounter } = useScaffoldContractRead({
+    contractName: "YourContract",
+    functionName: "totalCounter",
+  });
 
-  const { data: currentGreeting, isLoading: isGreetingLoading } = useScaffoldContractRead<string>(
-    "YourContract",
-    "greeting",
-  );
+  const { data: currentGreeting, isLoading: isGreetingLoading } = useScaffoldContractRead({
+    contractName: "YourContract",
+    functionName: "greeting",
+  });
 
-  useScaffoldEventSubscriber("YourContract", "GreetingChange", (greetingSetter, newGreeting, premium, value) => {
-    console.log(greetingSetter, newGreeting, premium, value);
+  useScaffoldEventSubscriber({
+    contractName: "YourContract",
+    eventName: "GreetingChange",
+    listener: (greetingSetter, newGreeting, premium, value) => {
+      console.log(greetingSetter, newGreeting, premium, value);
+    },
   });
 
   const { showAnimation } = useAnimationConfig(totalCounter);

packages/nextjs/components/example-ui/ContractInteraction.tsx

@@ -9,7 +9,12 @@ export const ContractInteraction = () => {
   const [visible, setVisible] = useState(true);
   const [newGreeting, setNewGreeting] = useState("");
 
-  const { writeAsync, isLoading } = useScaffoldContractWrite("YourContract", "setGreeting", [newGreeting], "0.01");
+  const { writeAsync, isLoading } = useScaffoldContractWrite({
+    contractName: "YourContract",
+    functionName: "setGreeting",
+    args: [newGreeting],
+    value: "0.01",
+  });
 
   return (
     <div className="flex bg-base-300 relative pb-10">

packages/nextjs/components/scaffold-eth/Contract/ContractUI.tsx

@@ -1,5 +1,5 @@
 import { useMemo, useState } from "react";
-import { Contract } from "ethers";
+import { Abi } from "abitype";
 import { useContract, useProvider } from "wagmi";
 import { Spinner } from "~~/components/Spinner";
 import {
@@ -11,32 +11,28 @@ import {
   getContractWriteMethods,
 } from "~~/components/scaffold-eth";
 import { useDeployedContractInfo, useNetworkColor } from "~~/hooks/scaffold-eth";
+import { ContractName } from "~~/hooks/scaffold-eth/contract.types";
 import { getTargetNetwork } from "~~/utils/scaffold-eth";
 
-type TContractUIProps = {
-  contractName: string;
+type ContractUIProps = {
+  contractName: ContractName;
   className?: string;
 };
 
 /**
  * UI component to interface with deployed contracts.
  **/
-export const ContractUI = ({ contractName, className = "" }: TContractUIProps) => {
+export const ContractUI = ({ contractName, className = "" }: ContractUIProps) => {
   const provider = useProvider();
   const [refreshDisplayVariables, setRefreshDisplayVariables] = useState(false);
   const configuredNetwork = getTargetNetwork();
 
-  let contractAddress = "";
-  let contractABI = [];
   const { data: deployedContractData, isLoading: deployedContractLoading } = useDeployedContractInfo(contractName);
   const networkColor = useNetworkColor();
-  if (deployedContractData) {
-    ({ address: contractAddress, abi: contractABI } = deployedContractData);
-  }
 
-  const contract: Contract | null = useContract({
-    address: contractAddress,
-    abi: contractABI,
+  const contract = useContract({
+    address: deployedContractData?.address,
+    abi: deployedContractData?.abi as Abi,
     signerOrProvider: provider,
   });
 
@@ -63,7 +59,7 @@ export const ContractUI = ({ contractName, className = "" }: TContractUIProps) =
     );
   }
 
-  if (!contractAddress) {
+  if (!deployedContractData) {
     return (
       <p className="text-3xl mt-14">
         {`No contract found by the name of "${contractName}" on chain "${configuredNetwork.name}"!`}
@@ -79,10 +75,10 @@ export const ContractUI = ({ contractName, className = "" }: TContractUIProps) =
             <div className="flex">
               <div className="flex flex-col gap-1">
                 <span className="font-bold">{contractName}</span>
-                <Address address={contractAddress} />
+                <Address address={deployedContractData.address} />
                 <div className="flex gap-1 items-center">
                   <span className="font-bold text-sm">Balance:</span>
-                  <Balance address={contractAddress} className="px-0 h-1.5 min-h-[0.375rem]" />
+                  <Balance address={deployedContractData.address} className="px-0 h-1.5 min-h-[0.375rem]" />
                 </div>
               </div>
             </div>

packages/nextjs/hooks/scaffold-eth/contract.types.ts

@@ -0,0 +1,126 @@
+import contracts from "../../generated/hardhat_contracts";
+import { Abi, AbiParametersToPrimitiveTypes, ExtractAbiEvent, ExtractAbiEventNames, ExtractAbiFunction } from "abitype";
+import type { ExtractAbiFunctionNames } from "abitype";
+import { UseContractReadConfig, UseContractWriteConfig } from "wagmi";
+import scaffoldConfig from "~~/scaffold.config";
+
+export type Chain = keyof typeof contracts;
+
+type SelectedChainId = (typeof scaffoldConfig)["targetNetwork"]["id"];
+
+type Contracts = (typeof contracts)[SelectedChainId][0]["contracts"];
+
+export type ContractName = keyof Contracts;
+
+export type Contract<TContractName extends ContractName> = Contracts[TContractName];
+
+type InferContractAbi<TContract> = TContract extends { abi: infer TAbi } ? TAbi : never;
+
+export type ContractAbi<TContractName extends ContractName = ContractName> = InferContractAbi<Contract<TContractName>>;
+
+export type AbiFunctionInputs<TAbi extends Abi, TFunctionName extends string> = ExtractAbiFunction<
+  TAbi,
+  TFunctionName
+>["inputs"];
+
+export type AbiFunctionArguments<TAbi extends Abi, TFunctionName extends string> = AbiParametersToPrimitiveTypes<
+  AbiFunctionInputs<TAbi, TFunctionName>
+>;
+
+export type AbiFunctionOutputs<TAbi extends Abi, TFunctionName extends string> = ExtractAbiFunction<
+  TAbi,
+  TFunctionName
+>["outputs"];
+
+export type AbiFunctionReturnType<TAbi extends Abi, TFunctionName extends string> = AbiParametersToPrimitiveTypes<
+  AbiFunctionOutputs<TAbi, TFunctionName>
+>[0];
+
+export type AbiEventInputs<TAbi extends Abi, TEventName extends ExtractAbiEventNames<TAbi>> = ExtractAbiEvent<
+  TAbi,
+  TEventName
+>["inputs"];
+
+export type AbiEventArgs<
+  TAbi extends Abi,
+  TEventName extends ExtractAbiEventNames<TAbi>,
+> = AbiParametersToPrimitiveTypes<AbiEventInputs<TAbi, TEventName>>;
+
+export enum ContractCodeStatus {
+  "LOADING",
+  "DEPLOYED",
+  "NOT_FOUND",
+}
+
+type AbiStateMutability = "pure" | "view" | "nonpayable" | "payable";
+
+export type FunctionNamesWithoutInputs<
+  TAbi extends Abi,
+  TAbiStateMutibility extends AbiStateMutability = AbiStateMutability,
+> = Extract<
+  TAbi[number],
+  {
+    type: "function";
+    stateMutability: TAbiStateMutibility;
+    inputs: readonly [];
+  }
+>["name"];
+
+export type FunctionNamesWithInputs<
+  TAbi extends Abi,
+  TAbiStateMutibility extends AbiStateMutability = AbiStateMutability,
+> = Exclude<
+  Extract<
+    TAbi[number],
+    {
+      type: "function";
+      stateMutability: TAbiStateMutibility;
+    }
+  >,
+  {
+    inputs: readonly [];
+  }
+>["name"];
+
+type ReadAbiStateMutability = "view" | "pure";
+type WriteAbiStateMutability = "nonpayable" | "payable";
+
+type RestConfigParam<TAbiStateMutability extends AbiStateMutability> = Partial<
+  Omit<
+    TAbiStateMutability extends ReadAbiStateMutability ? UseContractReadConfig : UseContractWriteConfig,
+    "chainId" | "abi" | "address" | "functionName" | "args"
+  >
+>;
+
+type OptionalTupple<T> = T extends readonly [infer H, ...infer R] ? readonly [H | undefined, ...OptionalTupple<R>] : T;
+
+type UseScaffoldArgsParam<
+  TContractName extends ContractName,
+  TAbiStateMutability extends AbiStateMutability,
+  TFunctionName extends ExtractAbiFunctionNames<ContractAbi<TContractName>, TAbiStateMutability>,
+> = TFunctionName extends FunctionNamesWithInputs<ContractAbi<TContractName>, TAbiStateMutability>
+  ? {
+      args: OptionalTupple<AbiFunctionArguments<ContractAbi<TContractName>, TFunctionName>>;
+    }
+  : {
+      args?: never;
+    };
+
+export type UseScaffoldReadConfig<
+  TContractName extends ContractName,
+  TFunctionName extends ExtractAbiFunctionNames<ContractAbi<TContractName>, ReadAbiStateMutability>,
+> = {
+  contractName: TContractName;
+  functionName: TFunctionName;
+} & UseScaffoldArgsParam<TContractName, ReadAbiStateMutability, TFunctionName> &
+  RestConfigParam<ReadAbiStateMutability>;
+
+export type UseScaffoldWriteConfig<
+  TContractName extends ContractName,
+  TFunctionName extends ExtractAbiFunctionNames<ContractAbi<TContractName>, WriteAbiStateMutability>,
+> = {
+  contractName: TContractName;
+  functionName: TFunctionName;
+  value?: string;
+} & UseScaffoldArgsParam<TContractName, WriteAbiStateMutability, TFunctionName> &
+  RestConfigParam<WriteAbiStateMutability>;

packages/nextjs/hooks/scaffold-eth/index.ts

@@ -3,7 +3,6 @@ export * from "./useAnimationConfig";
 export * from "./useAutoConnect";
 export * from "./useBurnerWallet";
 export * from "./useDeployedContractInfo";
-export * from "./useDeployedContractNames";
 export * from "./useEthPrice";
 export * from "./useNetworkColor";
 export * from "./useOutsideClick";

packages/nextjs/hooks/scaffold-eth/useDeployedContractInfo.ts

@@ -1,54 +1,47 @@
 import { useEffect, useState } from "react";
+import contracts from "../../generated/hardhat_contracts";
+import { Contract, ContractCodeStatus, ContractName } from "./contract.types";
+import { useIsMounted } from "usehooks-ts";
 import { useProvider } from "wagmi";
-import { getTargetNetwork } from "~~/utils/scaffold-eth";
-
-type GeneratedContractType = {
-  address: string;
-  abi: any[];
-};
+import scaffoldConfig from "~~/scaffold.config";
 
 /**
  * @dev use this hook to get a deployed contract from `yarn deploy` generated files.
  * @param contractName - name of deployed contract
  * @returns {GeneratedContractType | undefined} object containing contract address and abi or undefined if contract is not found
  */
-export const useDeployedContractInfo = (contractName: string | undefined | null) => {
-  const [deployedContractData, setDeployedContractData] = useState<undefined | GeneratedContractType>(undefined);
-  const [isLoading, setIsLoading] = useState(true);
-  const configuredNetwork = getTargetNetwork();
-
-  const provider = useProvider({ chainId: configuredNetwork.id });
+export const useDeployedContractInfo = <TContractName extends ContractName>(contractName: TContractName) => {
+  const isMounted = useIsMounted();
+  const deployedContract = contracts[scaffoldConfig.targetNetwork.id]?.[0]?.contracts?.[
+    contractName as ContractName
+  ] as Contract<TContractName>;
+  const [status, setStatus] = useState<ContractCodeStatus>(ContractCodeStatus.LOADING);
+  const provider = useProvider({ chainId: scaffoldConfig.targetNetwork.id });
 
   useEffect(() => {
-    const getDeployedContractInfo = async () => {
-      setIsLoading(true);
-      let ContractData;
-      try {
-        ContractData = require("~~/generated/hardhat_contracts.json");
-        const contractsAtChain = ContractData[configuredNetwork.id as keyof typeof ContractData];
-        const contractsData = contractsAtChain?.[0]?.contracts;
-        const deployedContract = contractsData?.[contractName as keyof typeof contractsData];
-
-        if (!deployedContract || !contractName || !provider) {
-          return;
-        }
+    const checkContractDeployment = async () => {
+      if (!deployedContract) {
+        setStatus(ContractCodeStatus.NOT_FOUND);
+        return;
+      }
+      const code = await provider.getCode((deployedContract as Contract<TContractName>).address);
 
-        const code = await provider.getCode(deployedContract.address);
-        // If contract code is `0x` => no contract deployed on that address
-        if (code === "0x" || !contractsData || !(contractName in contractsData)) {
-          return;
-        }
-        setDeployedContractData(contractsData[contractName]);
-      } catch (e) {
-        // Contract not deployed or file doesn't exist.
-        setDeployedContractData(undefined);
-      } finally {
-        setIsLoading(false);
+      if (!isMounted()) {
+        return;
+      }
+      // If contract code is `0x` => no contract deployed on that address
+      if (code === "0x") {
+        setStatus(ContractCodeStatus.NOT_FOUND);
+        return;
       }
+      setStatus(ContractCodeStatus.DEPLOYED);
     };
 
-    getDeployedContractInfo();
-  }, [configuredNetwork.id, contractName, provider]);
+    checkContractDeployment();
+  }, [isMounted, contractName, deployedContract, provider]);
 
-  return { data: deployedContractData, isLoading };
+  return {
+    data: status === ContractCodeStatus.DEPLOYED ? deployedContract : undefined,
+    isLoading: status === ContractCodeStatus.LOADING,
+  };
 };