added in useAllModuleContractInfo hook

Author: GWSzeto

apps/dashboard/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "preinstall": "npx only-allow pnpm",
-    "dev": "next dev --turbo",
+    "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "format": "biome format ./src --write",

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/InstalledModulesTable.tsx

@@ -6,6 +6,7 @@ import { CircleSlash } from "lucide-react";
 import type { ContractOptions } from "thirdweb";
 import type { Account } from "thirdweb/wallets";
 import { ModuleCard } from "./module-card";
+import { useAllModuleContractInfo } from "./moduleContractInfo";
 
 export const InstalledModulesTable = (props: {
   contract: ContractOptions;
@@ -18,6 +19,12 @@ export const InstalledModulesTable = (props: {
 }) => {
   const { installedModules, ownerAccount } = props;
 
+  const allModuleContractInfo = useAllModuleContractInfo(
+    installedModules.data || [],
+    props.contract,
+  );
+  console.log("allModuleContractInfo: ", allModuleContractInfo);
+
   const sectionTitle = (
     <h2 className="mb-3 font-bold text-2xl tracking-tight">
       Installed Modules

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/components/moduleContractInfo.ts

@@ -1,9 +1,71 @@
+import { useQuery } from "@tanstack/react-query";
+import { fetchPublishedContractsFromDeploy } from "components/contract-components/fetchPublishedContractsFromDeploy";
 import { usePublishedContractsFromDeploy } from "components/contract-components/hooks";
 import { THIRDWEB_DEPLOYER_ADDRESS } from "constants/addresses";
 import { useMemo } from "react";
-import type { ThirdwebContract } from "thirdweb";
+import { type ThirdwebContract, getContract } from "thirdweb";
 import { useActiveAccount } from "thirdweb/react";
 
+export async function getAllModuleContractInfo(
+  activeAccountAddress: string,
+  installedModules: string[],
+  contract: ThirdwebContract,
+) {
+  if (!activeAccountAddress) {
+    return [];
+  }
+
+  return Promise.all(
+    installedModules.map(async (moduleAddress) => {
+      const publishedContractsFromDeploy =
+        await fetchPublishedContractsFromDeploy({
+          contract: getContract({
+            address: moduleAddress,
+            chain: contract.chain,
+            client: contract.client,
+          }),
+          client: contract.client,
+        });
+
+      const reversedPublishedContractsFromDeploy = [
+        ...(publishedContractsFromDeploy || []),
+      ].reverse();
+
+      const publishedContractToShow =
+        reversedPublishedContractsFromDeploy.find(
+          (publishedContract) =>
+            publishedContract.publisher === activeAccountAddress,
+        ) ||
+        reversedPublishedContractsFromDeploy.find(
+          (publishedContract) =>
+            publishedContract.publisher === THIRDWEB_DEPLOYER_ADDRESS,
+        ) ||
+        reversedPublishedContractsFromDeploy[
+          reversedPublishedContractsFromDeploy.length - 1
+        ] ||
+        undefined;
+
+      return publishedContractToShow as
+        | typeof publishedContractToShow
+        | undefined;
+    }),
+  );
+}
+
+export function useAllModuleContractInfo(
+  installedModules: string[],
+  contract: ThirdwebContract,
+) {
+  const address = useActiveAccount()?.address;
+
+  return useQuery({
+    queryKey: ["all-module-contract-info", installedModules, contract, address],
+    queryFn: () =>
+      getAllModuleContractInfo(address || "", installedModules || [], contract),
+    enabled: !!address && !!contract,
+  });
+}
+
 export function useModuleContractInfo(contract: ThirdwebContract) {
   const address = useActiveAccount()?.address;
 

apps/dashboard/src/app/(dashboard)/(chain)/[chain_id]/[contractAddress]/modules/page.tsx

@@ -18,6 +18,7 @@ export default async function Page(props: {
   }
 
   const { contract } = info;
+
   if (contract.chain.id === localhost.id) {
     return <ContractEditModulesPageClient contract={contract} />;
   }