feat(explorer): As a user, I want the Portal page to display latest A…

…ttestations (#837)
Consensys · Nov 29, 2024 · ef284ae · ef284ae
1 parent 251a440
commit ef284ae
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 18 deletions.
diff --git a/explorer/src/interfaces/swr/enum.ts b/explorer/src/interfaces/swr/enum.ts
@@ -6,7 +6,9 @@ export enum SWRKeys {
   GET_RELATED_ATTESTATION = "getRelatedAttestations",
   GET_ATTESTATION_LIST = "getAttestationList",
   GET_ATTESTATION_COUNT = "getAttestationCount",
-  GET_RECENT_ATTESTATION = "getRecentAttestations",
+  GET_RECENT_ATTESTATION_SCHEMA = "getRecentAttestationsSchema",
+  GET_RECENT_ATTESTATION_PORTAL = "getRecentAttestationsPortal",
+  GET_RECENT_ATTESTATION_GLOBAL = "getRecentAttestations",
   GET_MODULE_LIST = "getModuleList",
   GET_MODULE_COUNT = "getModuleCount",
   SEARCH = "search",

diff --git a/explorer/src/pages/Portal/index.tsx b/explorer/src/pages/Portal/index.tsx
@@ -15,6 +15,7 @@ import { useNetworkContext } from "@/providers/network-provider/context";
 
 import { PortalLoadingSkeleton } from "./components/PortalLoadingSkeleton";
 import { PortalModules } from "./components/PortalModules";
+import { RecentAttestations } from "../Schema/components/RecentAttestations";
 
 export const Portal = () => {
   const { id } = useParams();
@@ -92,6 +93,7 @@ export const Portal = () => {
           ))}
         </div>
       </div>
+      <RecentAttestations portalId={portal.id} />
       <PortalModules portalModules={portal.modules} />
     </section>
   );

diff --git a/explorer/src/pages/Schema/components/RecentAttestations/index.tsx b/explorer/src/pages/Schema/components/RecentAttestations/index.tsx
@@ -9,19 +9,27 @@ import { SWRKeys } from "@/interfaces/swr/enum";
 import { useNetworkContext } from "@/providers/network-provider/context";
 import { APP_ROUTES } from "@/routes/constants";
 
-export const RecentAttestations: React.FC<{ schemaId: string }> = ({ schemaId }) => {
+export const RecentAttestations: React.FC<{ schemaId?: string; portalId?: string }> = ({ schemaId, portalId }) => {
   const {
     sdk,
     network: { chain, network },
   } = useNetworkContext();
 
-  const { data: attestations, isLoading } = useSWR(
-    `${SWRKeys.GET_RECENT_ATTESTATION}/${schemaId}/${chain.id}`,
-    () => sdk.attestation.findBy(5, 0, { schema: schemaId }, "attestedDate", "desc"),
-    {
-      shouldRetryOnError: false,
-    },
-  );
+  const fetchKey = schemaId
+    ? `${SWRKeys.GET_RECENT_ATTESTATION_SCHEMA}/${schemaId}/${chain.id}`
+    : portalId
+    ? `${SWRKeys.GET_RECENT_ATTESTATION_PORTAL}/${portalId}/${chain.id}`
+    : `${SWRKeys.GET_RECENT_ATTESTATION_GLOBAL}/${chain.id}`;
+
+  const fetchFunction = schemaId
+    ? () => sdk.attestation.findBy(5, 0, { schema: schemaId }, "attestedDate", "desc")
+    : portalId
+    ? () => sdk.attestation.findBy(5, 0, { portal: portalId }, "attestedDate", "desc")
+    : () => sdk.attestation.findBy(5, 0, {}, "attestedDate", "desc");
+
+  const { data: attestations, isLoading } = useSWR(fetchKey, fetchFunction, {
+    shouldRetryOnError: false,
+  });
 
   const columnsSkeletonRef = useRef(columnsSkeleton(columns({ sortByDate: false }), attestationColumnsOption));
   const data = isLoading

diff --git a/explorer/src/pages/Schema/components/SchemaLoadingSkeleton/index.tsx b/explorer/src/pages/Schema/components/SchemaLoadingSkeleton/index.tsx
@@ -4,24 +4,24 @@ export const SchemaLoadingSkeleton = () => {
   return (
     <section className="flex flex-col gap-6 w-full mb-10 md:mb-20 xl:max-w-[1200px] xl:m-auto">
       <div className="flex flex-col px-5 md:px-10 gap-6">
-        <Skeleton className="w-[70px] h-[25px] rounded-3xl" />
+        <Skeleton className="w-[70px] h-[25px] rounded-3xl" aria-hidden="true" />
         <div className="flex flex-col gap-3">
-          <Skeleton className="w-full max-w-[300px] h-8 rounded-3xl" />
-          <Skeleton className="w-full max-w-[250px] h-6 rounded-3xl" />
+          <Skeleton className="w-full max-w-[300px] h-8 rounded-3xl" aria-hidden="true" />
+          <Skeleton className="w-full max-w-[250px] h-6 rounded-3xl" aria-hidden="true" />
         </div>
         <hr className="bg-border-card" />
       </div>
       <div className="flex flex-col gap-6 px-5 md:px-10 xl:flex-row xl:justify-between">
         <div className="flex flex-col gap-2">
           <div className="flex flex-col gap-2">
-            <Skeleton className="w-[70px] h-4 rounded-3xl" />
-            <Skeleton className="w-full max-w-[320px] h-6 rounded-3xl xl:w-[320px]" />
+            <Skeleton className="w-[70px] h-4 rounded-3xl" aria-hidden="true" />
+            <Skeleton className="w-full max-w-[320px] h-6 rounded-3xl xl:w-[320px]" aria-hidden="true" />
           </div>
         </div>
         <div className="flex flex-col gap-2 xl:max-w-[600px] w-full">
-          <Skeleton className="w-[70px] h-4 rounded-3xl" />
+          <Skeleton className="w-[70px] h-4 rounded-3xl" aria-hidden="true" />
           <div className="flex animate-pulse h-[113px] md:h-[131px] px-4 py-2 md:p-4 rounded-xl bg-surface-magenta20 text-text-tertiary md:text-base">
-            <Skeleton className="w-full max-w-[320px] h-4 rounded-3xl" />
+            <Skeleton className="w-full max-w-[320px] h-4 rounded-3xl" aria-hidden="true" />
           </div>
         </div>
       </div>

diff --git a/explorer/src/pages/Schema/index.tsx b/explorer/src/pages/Schema/index.tsx
@@ -11,7 +11,7 @@ import { useNetworkContext } from "@/providers/network-provider/context";
 import { RecentAttestations } from "./components/RecentAttestations";
 import { SchemaLoadingSkeleton } from "./components/SchemaLoadingSkeleton";
 
-export const Schema = () => {
+export const Schema: React.FC = () => {
   const { id } = useParams();
   const {
     sdk,
@@ -25,7 +25,9 @@ export const Schema = () => {
   } = useSWR(
     `${SWRKeys.GET_SCHEMA_BY_ID}/${id}/${chain.id}`,
     async () => {
-      if (id && regexEthAddress.byNumberOfChar[64].test(id)) return sdk.schema.findOneById(id);
+      if (id && regexEthAddress.byNumberOfChar[64].test(id)) {
+        return sdk.schema.findOneById(id);
+      }
     },
     {
       shouldRetryOnError: false,
@@ -34,8 +36,11 @@ export const Schema = () => {
   );
 
   if (isLoading || isValidating) return <SchemaLoadingSkeleton />;
+
   if (!schema) return <NotFoundPage page="schema" id={id} />;
+
   const isContextURL = urlRegex.test(schema.context);
+
   return (
     <section className="flex flex-col gap-6 w-full mb-10 md:mb-20 xl:max-w-[1200px] xl:m-auto">
       <div className="flex flex-col px-5 md:px-10 gap-6">
@@ -55,6 +60,7 @@ export const Schema = () => {
             <a
               href={schema.context}
               target="_blank"
+              rel="noopener noreferrer"
               className="cursor-pointer hover:underline overflow-hidden text-ellipsis sm:max-w-[320px] whitespace-nowrap dark:text-text-secondaryDark"
             >
               {schema.context}