feat: add external flag to external contracts

packages/nextjs/pages/debug.tsx

@@ -1,13 +1,15 @@
 import { useEffect } from "react";
 import type { NextPage } from "next";
 import { useLocalStorage } from "usehooks-ts";
+import { BarsArrowUpIcon } from "@heroicons/react/20/solid";
 import { MetaHeader } from "~~/components/MetaHeader";
 import { ContractUI } from "~~/components/scaffold-eth";
 import { ContractName } from "~~/utils/scaffold-eth/contract";
-import { getContractNames } from "~~/utils/scaffold-eth/contractNames";
+import { getAllContracts } from "~~/utils/scaffold-eth/contractsData";
 
 const selectedContractStorageKey = "scaffoldEth2.selectedContract";
-const contractNames = getContractNames();
+const contractsData = getAllContracts();
+const contractNames = Object.keys(contractsData) as ContractName[];
 
 const Debug: NextPage = () => {
   const [selectedContract, setSelectedContract] = useLocalStorage<ContractName>(
@@ -36,13 +38,18 @@ const Debug: NextPage = () => {
               <div className="flex flex-row gap-2 w-full max-w-7xl pb-1 px-6 lg:px-10 flex-wrap">
                 {contractNames.map(contractName => (
                   <button
-                    className={`btn btn-secondary btn-sm font-thin ${
-                      contractName === selectedContract ? "bg-base-300" : "bg-base-100"
+                    className={`btn btn-secondary btn-sm font-light hover:bg-secondary ${
+                      contractName === selectedContract ? "bg-base-300 hover:bg-base-300" : "bg-base-100"
                     }`}
                     key={contractName}
                     onClick={() => setSelectedContract(contractName)}
                   >
                     {contractName}
+                    {contractsData[contractName].external && (
+                      <span className="tooltip tooltip-top tooltip-accent" data-tip="External contract">
+                        <BarsArrowUpIcon className="h-4 w-4 cursor-pointer" />
+                      </span>
+                    )}
                   </button>
                 ))}
               </div>

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

@@ -23,17 +23,34 @@ import deployedContractsData from "~~/contracts/deployedContracts";
 import externalContractsData from "~~/contracts/externalContracts";
 import scaffoldConfig from "~~/scaffold.config";
 
-const deepMergeContracts = <D extends Record<PropertyKey, any>, S extends Record<PropertyKey, any>>(
-  destination: D,
-  source: S,
+type AddExternalFlag<T> = {
+  [ChainId in keyof T]: {
+    [ContractName in keyof T[ChainId]]: T[ChainId][ContractName] & { external?: true };
+  };
+};
+
+const deepMergeContracts = <L extends Record<PropertyKey, any>, E extends Record<PropertyKey, any>>(
+  local: L,
+  external: E,
 ) => {
   const result: Record<PropertyKey, any> = {};
-  const allKeys = Array.from(new Set([...Object.keys(source), ...Object.keys(destination)]));
+  const allKeys = Array.from(new Set([...Object.keys(external), ...Object.keys(local)]));
   for (const key of allKeys) {
-    result[key] = { ...destination[key], ...source[key] };
+    if (!external[key]) {
+      result[key] = local[key];
+      continue;
+    }
+    const amendedExternal = Object.fromEntries(
+      Object.entries(external[key] as Record<string, Record<string, unknown>>).map(([contractName, declaration]) => [
+        contractName,
+        { ...declaration, external: true },
+      ]),
+    );
+    result[key] = { ...local[key], ...amendedExternal };
   }
-  return result as MergeDeepRecord<D, S, { arrayMergeMode: "replace" }>;
+  return result as MergeDeepRecord<AddExternalFlag<L>, AddExternalFlag<E>, { arrayMergeMode: "replace" }>;
 };
+
 const contractsData = deepMergeContracts(deployedContractsData, externalContractsData);
 
 export type InheritedFunctions = { readonly [key: string]: string };
@@ -42,6 +59,7 @@ export type GenericContract = {
   address: Address;
   abi: Abi;
   inheritedFunctions?: InheritedFunctions;
+  external?: true;
 };
 
 export type GenericContractsDeclaration = {

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

@@ -0,0 +1,8 @@
+import scaffoldConfig from "~~/scaffold.config";
+import { contracts } from "~~/utils/scaffold-eth/contract";
+
+export function getAllContracts() {
+  const contractsData = contracts?.[scaffoldConfig.targetNetworks[0].id];
+  console.log("The contracts data is:", contractsData);
+  return contractsData ? contractsData : {};
+}