feat(explorer): As a user, I want the Module page to display Portals leveraging it

explorer/src/constants/columns/portal.tsx

@@ -6,6 +6,7 @@ import { Chain } from "viem";
 import { TdHandler } from "@/components/DataTable/components/TdHandler";
 import { HelperIndicator } from "@/components/HelperIndicator";
 import { Link } from "@/components/Link";
+import { EMPTY_0X_STRING, EMPTY_STRING, ZERO } from "@/constants";
 import { toPortalById } from "@/routes/constants";
 import { getBlockExplorerLink } from "@/utils";
 import { cropString } from "@/utils/stringUtils";
@@ -55,3 +56,29 @@ export const columns = ({ chain }: { chain: Chain }): ColumnDef<Portal>[] => [
     },
   },
 ];
+
+export const portalColumnsOption = {
+  name: {
+    width: "25%",
+  },
+  description: {
+    width: "50%",
+  },
+  owner: {
+    width: "25%",
+  },
+};
+
+export const skeletonPortals = (count: number) =>
+  Array(count)
+    .fill(null)
+    .map((_, index) => ({
+      id: `0x${index.toString(16).padStart(40, "0")}` as `0x${string}`,
+      name: EMPTY_STRING,
+      description: EMPTY_STRING,
+      ownerAddress: `${EMPTY_0X_STRING}${"0".repeat(40)}` as `0x${string}`,
+      ownerName: EMPTY_STRING,
+      modules: [] as `0x${string}`[],
+      isRevocable: false,
+      attestationCounter: ZERO,
+    }));

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",

explorer/src/pages/Issuer/components/Portals/index.tsx

@@ -20,7 +20,12 @@ export const Portals: React.FC<IPortalProps> = ({ address }) => {
   const location = useLocation();
 
   const { data: portals } = useSWR(`${SWRKeys.GET_PORTALS_BY_ISSUER}/${address}`, () =>
-    sdk.portal.findBy(undefined, undefined, { ownerAddress: address }),
+    sdk.portal.findBy(undefined, undefined, { ownerAddress: address }).then((portalList) =>
+      portalList.map((portal) => ({
+        ...portal,
+        id: portal.id as `0x${string}`,
+      })),
+    ),
   );
 
   if (!portals) return null;

explorer/src/pages/Module/components/ModulePortals/index.tsx

@@ -0,0 +1,45 @@
+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 () => {
+      const portalList = await sdk.portal.findBy(5, 0, { modules_contains: [moduleId] }, "attestationCounter", "desc");
+      return portalList.map((portal) => ({
+        ...portal,
+        id: portal.id as `0x${string}`,
+      }));
+    },
+    {
+      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>
+  );
+};

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>
   );
 };