Show inherited functions in Debug (when deploying with hardhat)

packages/hardhat/deploy/99_generateTsAbis.ts

@@ -10,6 +10,9 @@ import * as fs from "fs";
 import prettier from "prettier";
 import { DeployFunction } from "hardhat-deploy/types";
 
+const DEPLOYMENTS_DIR = "./deployments";
+const ARTIFACTS_DIR = "./artifacts";
+
 function getDirectories(path: string) {
   return fs
     .readdirSync(path, { withFileTypes: true })
@@ -24,7 +27,22 @@ function getContractNames(path: string) {
     .map(dirent => dirent.name.split(".")[0]);
 }
 
-const DEPLOYMENTS_DIR = "./deployments";
+function getInheritedFunctions(sources: { [key: string]: any }, contractName: string) {
+  const inheritedFunctions = {} as Record<string, any>;
+  for (const sourcePath of Object.keys(sources)) {
+    const sourceName = sourcePath.split("/").pop()?.split(".sol")[0];
+    if (sourceName === contractName) {
+      continue;
+    }
+    const { abi } = JSON.parse(fs.readFileSync(`${ARTIFACTS_DIR}/${sourcePath}/${sourceName}.json`).toString());
+    for (const functionAbi of abi) {
+      if (functionAbi.type === "function") {
+        inheritedFunctions[functionAbi.name] = sourcePath;
+      }
+    }
+  }
+  return inheritedFunctions;
+}
 
 function getContractDataFromDeployments() {
   if (!fs.existsSync(DEPLOYMENTS_DIR)) {
@@ -35,10 +53,11 @@ function getContractDataFromDeployments() {
     const chainId = fs.readFileSync(`${DEPLOYMENTS_DIR}/${chainName}/.chainId`).toString();
     const contracts = {} as Record<string, any>;
     for (const contractName of getContractNames(`${DEPLOYMENTS_DIR}/${chainName}`)) {
-      const { abi, address } = JSON.parse(
+      const { abi, address, metadata } = JSON.parse(
         fs.readFileSync(`${DEPLOYMENTS_DIR}/${chainName}/${contractName}.json`).toString(),
       );
-      contracts[contractName] = { address, abi };
+      const inheritedFunctions = getInheritedFunctions(JSON.parse(metadata).sources, contractName);
+      contracts[contractName] = { address, abi, inheritedFunctions };
     }
     output[chainId] = [
       {

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

@@ -1,6 +1,6 @@
 import { ReadOnlyFunctionForm } from "./ReadOnlyFunctionForm";
 import { Abi, AbiFunction } from "abitype";
-import { Contract, ContractName } from "~~/utils/scaffold-eth/contract";
+import { Contract, ContractName, InheritedFunctions } from "~~/utils/scaffold-eth/contract";
 
 export const ContractReadMethods = ({ deployedContractData }: { deployedContractData: Contract<ContractName> }) => {
   if (!deployedContractData) {
@@ -21,9 +21,16 @@ export const ContractReadMethods = ({ deployedContractData }: { deployedContract
 
   return (
     <>
-      {functionsToDisplay.map(fn => (
-        <ReadOnlyFunctionForm contractAddress={deployedContractData.address} abiFunction={fn} key={fn.name} />
-      ))}
+      {functionsToDisplay
+        .map(fn => (
+          <ReadOnlyFunctionForm
+            contractAddress={deployedContractData.address}
+            abiFunction={fn}
+            key={fn.name}
+            inheritedBy={(deployedContractData.inheritedFunctions as InheritedFunctions)[fn.name]}
+          />
+        ))
+        .sort((a, b) => (b.props.inheritedBy ? b.props.inheritedBy.localeCompare(a.props.inheritedBy) : 1))}
     </>
   );
 };

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

@@ -1,6 +1,6 @@
 import { DisplayVariable } from "./DisplayVariable";
 import { Abi, AbiFunction } from "abitype";
-import { Contract, ContractName } from "~~/utils/scaffold-eth/contract";
+import { Contract, ContractName, InheritedFunctions } from "~~/utils/scaffold-eth/contract";
 
 export const ContractVariables = ({
   refreshDisplayVariables,
@@ -27,14 +27,17 @@ export const ContractVariables = ({
 
   return (
     <>
-      {functionsToDisplay.map(fn => (
-        <DisplayVariable
-          abiFunction={fn}
-          contractAddress={deployedContractData.address}
-          key={fn.name}
-          refreshDisplayVariables={refreshDisplayVariables}
-        />
-      ))}
+      {functionsToDisplay
+        .map(fn => (
+          <DisplayVariable
+            abiFunction={fn}
+            contractAddress={deployedContractData.address}
+            key={fn.name}
+            refreshDisplayVariables={refreshDisplayVariables}
+            inheritedBy={(deployedContractData.inheritedFunctions as InheritedFunctions)[fn.name]}
+          />
+        ))
+        .sort((a, b) => (b.props.inheritedBy ? b.props.inheritedBy.localeCompare(a.props.inheritedBy) : 1))}
     </>
   );
 };

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

@@ -1,6 +1,6 @@
 import { WriteOnlyFunctionForm } from "./WriteOnlyFunctionForm";
 import { Abi, AbiFunction } from "abitype";
-import { Contract, ContractName } from "~~/utils/scaffold-eth/contract";
+import { Contract, ContractName, InheritedFunctions } from "~~/utils/scaffold-eth/contract";
 
 export const ContractWriteMethods = ({
   onChange,
@@ -26,14 +26,17 @@ export const ContractWriteMethods = ({
 
   return (
     <>
-      {functionsToDisplay.map((fn, idx) => (
-        <WriteOnlyFunctionForm
-          key={`${fn.name}-${idx}}`}
-          abiFunction={fn}
-          onChange={onChange}
-          contractAddress={deployedContractData.address}
-        />
-      ))}
+      {functionsToDisplay
+        .map((fn, idx) => (
+          <WriteOnlyFunctionForm
+            key={`${fn.name}-${idx}}`}
+            abiFunction={fn}
+            onChange={onChange}
+            contractAddress={deployedContractData.address}
+            inheritedBy={(deployedContractData.inheritedFunctions as InheritedFunctions)[fn.name]}
+          />
+        ))
+        .sort((a, b) => (b.props.inheritedBy ? b.props.inheritedBy.localeCompare(a.props.inheritedBy) : 1))}
     </>
   );
 };

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

@@ -11,9 +11,15 @@ type DisplayVariableProps = {
   contractAddress: Address;
   abiFunction: AbiFunction;
   refreshDisplayVariables: boolean;
+  inheritedBy?: string;
 };
 
-export const DisplayVariable = ({ contractAddress, abiFunction, refreshDisplayVariables }: DisplayVariableProps) => {
+export const DisplayVariable = ({
+  contractAddress,
+  abiFunction,
+  refreshDisplayVariables,
+  inheritedBy,
+}: DisplayVariableProps) => {
   const {
     data: result,
     isFetching,
@@ -36,7 +42,20 @@ export const DisplayVariable = ({ contractAddress, abiFunction, refreshDisplayVa
   return (
     <div className="space-y-1 pb-2">
       <div className="flex items-center gap-2">
-        <h3 className="font-medium text-lg mb-0 break-all">{abiFunction.name}</h3>
+        <h3 className="font-medium text-lg mb-0 break-all">
+          {abiFunction.name}
+          {inheritedBy && (
+            <span className="has-tooltip p-2">
+              <span>*</span>
+              <span className="nested-tooltip bg-secondary rounded p-3 m-2">
+                Inherited by:{" "}
+                <code className="italic bg-base-300 text-base font-bold break-words break-all inline-block">
+                  {inheritedBy}
+                </code>
+              </span>
+            </span>
+          )}
+        </h3>
         <button className="btn btn-ghost btn-xs" onClick={async () => await refetch()}>
           {isFetching ? (
             <span className="loading loading-spinner loading-xs"></span>

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

@@ -14,9 +14,10 @@ import { notification } from "~~/utils/scaffold-eth";
 type TReadOnlyFunctionFormProps = {
   contractAddress: Address;
   abiFunction: AbiFunction;
+  inheritedBy?: string;
 };
 
-export const ReadOnlyFunctionForm = ({ contractAddress, abiFunction }: TReadOnlyFunctionFormProps) => {
+export const ReadOnlyFunctionForm = ({ contractAddress, abiFunction, inheritedBy }: TReadOnlyFunctionFormProps) => {
   const [form, setForm] = useState<Record<string, any>>(() => getInitialFormState(abiFunction));
   const [result, setResult] = useState<unknown>();
 
@@ -49,7 +50,20 @@ export const ReadOnlyFunctionForm = ({ contractAddress, abiFunction }: TReadOnly
 
   return (
     <div className="flex flex-col gap-3 py-5 first:pt-0 last:pb-1">
-      <p className="font-medium my-0 break-words">{abiFunction.name}</p>
+      <p className="font-medium my-0 break-words">
+        {abiFunction.name}
+        {inheritedBy && (
+          <span className="has-tooltip p-2">
+            <span>*</span>
+            <span className="nested-tooltip bg-secondary rounded p-3 m-2">
+              Inherited by:{" "}
+              <code className="italic bg-base-300 text-base font-bold break-words break-all inline-block">
+                {inheritedBy}
+              </code>
+            </span>
+          </span>
+        )}
+      </p>
       {inputElements}
       <div className="flex justify-between gap-2 flex-wrap">
         <div className="flex-grow w-4/5">

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

@@ -18,9 +18,15 @@ type WriteOnlyFunctionFormProps = {
   abiFunction: AbiFunction;
   onChange: () => void;
   contractAddress: Address;
+  inheritedBy?: string;
 };
 
-export const WriteOnlyFunctionForm = ({ abiFunction, onChange, contractAddress }: WriteOnlyFunctionFormProps) => {
+export const WriteOnlyFunctionForm = ({
+  abiFunction,
+  onChange,
+  contractAddress,
+  inheritedBy,
+}: WriteOnlyFunctionFormProps) => {
   const [form, setForm] = useState<Record<string, any>>(() => getInitialFormState(abiFunction));
   const [txValue, setTxValue] = useState<string | bigint>("");
   const { chain } = useNetwork();
@@ -81,7 +87,20 @@ export const WriteOnlyFunctionForm = ({ abiFunction, onChange, contractAddress }
   return (
     <div className="py-5 space-y-3 first:pt-0 last:pb-1">
       <div className={`flex gap-3 ${zeroInputs ? "flex-row justify-between items-center" : "flex-col"}`}>
-        <p className="font-medium my-0 break-words">{abiFunction.name}</p>
+        <p className="font-medium my-0 break-words">
+          {abiFunction.name}{" "}
+          {inheritedBy && (
+            <span className="has-tooltip p-2">
+              <span>*</span>
+              <span className="nested-tooltip bg-secondary rounded p-3 m-2">
+                Inherited by:{" "}
+                <code className="italic bg-base-300 text-base font-bold break-words break-all inline-block">
+                  {inheritedBy}
+                </code>
+              </span>
+            </span>
+          )}
+        </p>
         {inputs}
         {abiFunction.stateMutability === "payable" ? (
           <IntegerInput

packages/nextjs/tailwind.config.js

@@ -30,6 +30,14 @@ module.exports = {
           ".tooltip": {
             "--tooltip-tail": "6px",
           },
+          ".nested-tooltip": {
+            visibility: "hidden",
+            position: "absolute",
+          },
+          ".has-tooltip:hover .nested-tooltip": {
+            visibility: "visible",
+            "z-index": "100",
+          },
         },
       },
       {
@@ -57,6 +65,14 @@ module.exports = {
             "--tooltip-tail": "6px",
             "--tooltip-color": "hsl(var(--p))",
           },
+          ".nested-tooltip": {
+            visibility: "hidden",
+            position: "absolute",
+          },
+          ".has-tooltip:hover .nested-tooltip": {
+            visibility: "visible",
+            "z-index": "100",
+          },
         },
       },
       {

packages/nextjs/utils/scaffold-eth/contract.ts

@@ -30,6 +30,8 @@ type Prettify<T> = {
   [K in keyof T]: T[K];
 } & unknown;
 
+export type InheritedFunctions = { readonly [key: string]: string };
+
 export type GenericContractsDeclaration = {
   [key: number]: readonly {
     name: string;
@@ -38,6 +40,7 @@ export type GenericContractsDeclaration = {
       [key: string]: {
         address: Address;
         abi: Abi;
+        inheritedFunctions: InheritedFunctions;
       };
     };
   }[];