Added GET_RECENT_ATTESTATION_GLOBAL enum, updated RecentAttestations …

…component to handle global attestations, and made minor changes to SchemaLoadingSkeleton and Schema components.
Consensys · Nov 28, 2024 · 0e6e40e · 0e6e40e
1 parent ba69bac
commit 0e6e40e
Show file tree

Hide file tree

Showing 4 changed files with 28 additions and 17 deletions.
diff --git a/explorer/src/interfaces/swr/enum.ts b/explorer/src/interfaces/swr/enum.ts
@@ -14,4 +14,5 @@ export enum SWRKeys {
   GET_PORTAL_BY_ID = "getPortalByID",
   GET_PORTAL_MODULE_LIST = "getPortalModuleList",
   GET_PORTAL_LIST = "getPortalList",
+  GET_RECENT_ATTESTATION_GLOBAL = "GET_RECENT_ATTESTATION_GLOBAL",
 }
diff --git a/explorer/src/pages/Schema/components/RecentAttestations/index.tsx b/explorer/src/pages/Schema/components/RecentAttestations/index.tsx
@@ -9,19 +9,23 @@ 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 }> = ({ schemaId }) => {
   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}/${schemaId}/${chain.id}`
+    : `${SWRKeys.GET_RECENT_ATTESTATION_GLOBAL}/${chain.id}`;
+
+  const fetchFunction = schemaId
+    ? () => sdk.attestation.findBy(5, 0, { schema: schemaId }, "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}