From 6a6a9aaff19b5f68a846d4adab5a9149a093f153 Mon Sep 17 00:00:00 2001
From: Chirag <157453139+Chirag-S-Kotian@users.noreply.github.com>
Date: Mon, 9 Dec 2024 23:13:06 +0530
Subject: [PATCH] feat(explorer): As a user, I want the Module page to display
 Portals leveraging it (#851)

---
 explorer/src/constants/columns/portal.tsx     | 32 +++++++++++++++
 explorer/src/constants/index.ts               |  2 +
 explorer/src/interfaces/swr/enum.ts           |  1 +
 .../pages/Issuer/components/Portals/index.tsx | 12 +++---
 .../Module/components/ModulePortals/index.tsx | 39 +++++++++++++++++++
 explorer/src/pages/Module/index.tsx           |  2 +
 6 files changed, 82 insertions(+), 6 deletions(-)
 create mode 100644 explorer/src/pages/Module/components/ModulePortals/index.tsx

diff --git a/explorer/src/constants/columns/portal.tsx b/explorer/src/constants/columns/portal.tsx
index 980da05c..b96b5fb1 100644
--- a/explorer/src/constants/columns/portal.tsx
+++ b/explorer/src/constants/columns/portal.tsx
@@ -6,6 +6,8 @@ import { Chain } from "viem";
 import { TdHandler } from "@/components/DataTable/components/TdHandler";
 import { HelperIndicator } from "@/components/HelperIndicator";
 import { Link } from "@/components/Link";
+import { EMPTY_STRING, ZERO, ZERO_ADDRESS } from "@/constants";
+import { ColumnsOptions } from "@/interfaces/components";
 import { toPortalById } from "@/routes/constants";
 import { getBlockExplorerLink } from "@/utils";
 import { cropString } from "@/utils/stringUtils";
@@ -55,3 +57,33 @@ export const columns = ({ chain }: { chain: Chain }): ColumnDef<Portal>[] => [
     },
   },
 ];
+
+export const portalColumnsOption: ColumnsOptions = {
+  0: {
+    minWidth: 150,
+    maxWidth: 200,
+    isRandomWidth: true,
+  },
+  1: {
+    minWidth: 200,
+    maxWidth: 400,
+    isRandomWidth: true,
+  },
+  2: {
+    width: 150,
+  },
+};
+
+export const skeletonPortals = (count: number) =>
+  Array(count)
+    .fill(null)
+    .map(() => ({
+      id: ZERO_ADDRESS,
+      name: EMPTY_STRING,
+      description: EMPTY_STRING,
+      ownerAddress: ZERO_ADDRESS,
+      ownerName: EMPTY_STRING,
+      modules: [],
+      isRevocable: false,
+      attestationCounter: ZERO,
+    }));
diff --git a/explorer/src/constants/index.ts b/explorer/src/constants/index.ts
index c839242f..dd6502d5 100644
--- a/explorer/src/constants/index.ts
+++ b/explorer/src/constants/index.ts
@@ -1,3 +1,4 @@
+import { Address } from "viem";
 import { arbitrum, arbitrumSepolia, base, baseSepolia, bsc, bscTestnet, linea } from "wagmi/chains";
 
 import { lineaSepolia } from "@/config";
@@ -10,6 +11,7 @@ export const DASH = "-";
 export const ZERO_STRING = "0";
 export const TEN = 10;
 export const ZERO = 0;
+export const ZERO_ADDRESS: Address = "0x0000000000000000000000000000000000000000";
 export const ITEMS_PER_PAGE_DEFAULT = 10;
 export const ITEMS_SEARCHED_DEFAULT = 100;
 export const CURRENT_PAGE_DEFAULT = 1;
diff --git a/explorer/src/interfaces/swr/enum.ts b/explorer/src/interfaces/swr/enum.ts
index f717d253..87afc72c 100644
--- a/explorer/src/interfaces/swr/enum.ts
+++ b/explorer/src/interfaces/swr/enum.ts
@@ -11,6 +11,7 @@ export enum SWRKeys {
   GET_RECENT_ATTESTATION_GLOBAL = "getRecentAttestations",
   GET_MODULE_LIST = "getModuleList",
   GET_MODULE_COUNT = "getModuleCount",
+  GET_MODULE_PORTAL_LIST = "getModulePortalList",
   SEARCH = "search",
   GET_PORTALS_BY_ISSUER = "getPortalsByIssuer",
   GET_PORTAL_BY_ID = "getPortalByID",
diff --git a/explorer/src/pages/Issuer/components/Portals/index.tsx b/explorer/src/pages/Issuer/components/Portals/index.tsx
index a65ffe51..3619ab6e 100644
--- a/explorer/src/pages/Issuer/components/Portals/index.tsx
+++ b/explorer/src/pages/Issuer/components/Portals/index.tsx
@@ -44,13 +44,13 @@ export const Portals: React.FC<IPortalProps> = ({ address }) => {
             </tr>
           </thead>
           <tbody className="divide-y">
-            {portals.map(({ id, name, description, attestationCounter }) => (
-              <tr key={id}>
+            {portals.map((portal) => (
+              <tr key={portal.id}>
                 <td className="px-6 py-4 whitespace-nowrap text-xs font-medium">
                   <Button
-                    name={name}
+                    name={portal.name}
                     handler={() =>
-                      navigate(toPortalById(id).replace(CHAIN_ID_ROUTE, network), {
+                      navigate(toPortalById(portal.id).replace(CHAIN_ID_ROUTE, network), {
                         state: { from: location.pathname },
                       })
                     }
@@ -58,8 +58,8 @@ export const Portals: React.FC<IPortalProps> = ({ address }) => {
                     iconRight={<ArrowRight />}
                   />
                 </td>
-                <td className="px-6 py-4 whitespace-nowrap text-xs">{description}</td>
-                <td className="px-6 py-4 whitespace-nowrap text-xs font-medium">{attestationCounter}</td>
+                <td className="px-6 py-4 whitespace-nowrap text-xs">{portal.description}</td>
+                <td className="px-6 py-4 whitespace-nowrap text-xs font-medium">{portal.attestationCounter}</td>
               </tr>
             ))}
           </tbody>
diff --git a/explorer/src/pages/Module/components/ModulePortals/index.tsx b/explorer/src/pages/Module/components/ModulePortals/index.tsx
new file mode 100644
index 00000000..944d28e1
--- /dev/null
+++ b/explorer/src/pages/Module/components/ModulePortals/index.tsx
@@ -0,0 +1,39 @@
+import { t } from "i18next";
+import { useRef } from "react";
+import useSWR from "swr";
+import { Address } from "viem";
+
+import { DataTable } from "@/components/DataTable";
+import { columns, portalColumnsOption, skeletonPortals } from "@/constants/columns/portal";
+import { columnsSkeleton } from "@/constants/columns/skeleton";
+import { SWRKeys } from "@/interfaces/swr/enum";
+import { useNetworkContext } from "@/providers/network-provider/context";
+import { APP_ROUTES } from "@/routes/constants";
+import { isNotNullOrUndefined } from "@/utils";
+
+export const ModulePortals: React.FC<{ moduleId: Address }> = ({ moduleId }) => {
+  const {
+    sdk,
+    network: { chain },
+  } = useNetworkContext();
+
+  const { data: portals, isLoading } = useSWR(
+    `${SWRKeys.GET_MODULE_PORTAL_LIST}/${moduleId}/${chain.id}`,
+    async () => sdk.portal.findBy(undefined, undefined, { modules_contains: [moduleId] }),
+    {
+      shouldRetryOnError: false,
+    },
+  );
+
+  const columnsSkeletonRef = useRef(columnsSkeleton(columns({ chain }), portalColumnsOption));
+  const data = isLoading
+    ? { columns: columnsSkeletonRef.current, list: skeletonPortals(5) }
+    : { columns: columns({ chain }), list: portals?.filter(isNotNullOrUndefined) || [] };
+
+  return (
+    <div className="flex flex-col gap-6 w-full px-5 md:px-10">
+      <p className="text-xl not-italic font-semibold text-text-primary dark:text-whiteDefault">{t("portal.title")}</p>
+      <DataTable columns={data.columns} data={data.list} link={APP_ROUTES.PORTAL_BY_ID} />
+    </div>
+  );
+};
diff --git a/explorer/src/pages/Module/index.tsx b/explorer/src/pages/Module/index.tsx
index eed87040..19ff0923 100644
--- a/explorer/src/pages/Module/index.tsx
+++ b/explorer/src/pages/Module/index.tsx
@@ -10,6 +10,7 @@ import { useNetworkContext } from "@/providers/network-provider/context";
 import { getBlockExplorerLink } from "@/utils";
 
 import { ModuleLoadingSkeleton } from "./components/ModuleLoadingSkeleton";
+import { ModulePortals } from "./components/ModulePortals";
 
 export const Module = () => {
   const { id } = useParams();
@@ -60,6 +61,7 @@ export const Module = () => {
           <ArrowUpRight height="auto" width="1rem" />
         </a>
       </div>
+      <ModulePortals moduleId={module.moduleAddress} />
     </section>
   );
 };