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

…leveraging it (#851)

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

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;

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

@@ -44,22 +44,22 @@ 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 },
                       })
                     }
                     buttonType={EButtonType.TRANSPARENT}
                     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>

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

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