feat(explorer): As a user, I want to see indication that I am current…

…ly looking at a filtered view of Attestations (#766)

Co-authored-by: Alain Nicolas <[email protected]>

explorer/src/pages/Attestations/components/TitleAndSwitcher/index.tsx

@@ -3,12 +3,12 @@ import { PropsWithChildren } from "react";
 
 import { ListSwitcher } from "../ListSwitcher";
 
-export const TitleAndSwitcher = ({ children }: PropsWithChildren) => {
+export const TitleAndSwitcher = ({ children, title }: PropsWithChildren & { title?: string }) => {
   return (
     <div className="container mt-5 md:mt-8">
       <div className="flex flex-col md:flex-row items-start md:items-center justify-between mb-6 md:mb-8 gap-6 md:gap-0">
         <h1 className="text-2xl md:text-[2rem]/[2rem] font-semibold tracking-tighter text-text-primary dark:text-whiteDefault">
-          {t("attestation.list.title")}
+          {title || t("attestation.list.title")}
         </h1>
       </div>
       <div>

explorer/src/pages/Attestations/index.tsx

@@ -1,17 +1,19 @@
 import { Attestation_filter, OrderDirection } from "@verax-attestation-registry/verax-sdk/lib/types/.graphclient";
-import { useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { useSearchParams } from "react-router-dom";
 import useSWR from "swr";
 
 import { DataTable } from "@/components/DataTable";
 import { Pagination } from "@/components/Pagination";
 import { BasicPagination } from "@/components/Pagination/Basic";
-import { ITEMS_PER_PAGE_DEFAULT, ZERO } from "@/constants";
+import { EMPTY_STRING, ITEMS_PER_PAGE_DEFAULT, ZERO } from "@/constants";
 import { attestationColumnsOption, columns, skeletonAttestations } from "@/constants/columns/attestation";
 import { columnsSkeleton } from "@/constants/columns/skeleton";
+import { regexEthAddress } from "@/constants/regex";
 import { EQueryParams } from "@/enums/queryParams";
 import { ETableSorting } from "@/enums/tableSorting";
 import { SWRKeys } from "@/interfaces/swr/enum";
+import { issuersData } from "@/pages/Home/data";
 import { useNetworkContext } from "@/providers/network-provider/context";
 import { APP_ROUTES } from "@/routes/constants";
 import { buildAttestationId } from "@/utils/attestationIdUtils.ts";
@@ -36,9 +38,50 @@ export const Attestations: React.FC = () => {
   const where = searchParams.get(EQueryParams.WHERE)
     ? (JSON.parse(searchParams.get(EQueryParams.WHERE) ?? "") as Attestation_filter)
     : undefined;
-
   const [lastID, setLastID] = useState<number>(getItemsByPage(page, itemsPerPage));
 
+  const findIssuerBySchema = () =>
+    issuersData.find((issuer) =>
+      issuer.attestationDefinitions.some(
+        (definition) => definition.schema === where?.schema_?.id && definition.portal === where?.portal_?.id,
+      ),
+    );
+
+  const findIssuerByPortal = () =>
+    issuersData.find((issuer) =>
+      issuer.attestationDefinitions.some((definition) => where?.portal_in?.includes(definition.portal)),
+    );
+
+  const findAttestation = () =>
+    attestationDefinitions?.filter((definition) => definition.schema === where?.schema_?.id)[0];
+
+  const isByAttestationType = "schema_" in (where || {});
+  const isFilteredByWhere = where && (isByAttestationType || where.portal_in?.length);
+  const { name, attestationDefinitions } = isByAttestationType
+    ? findIssuerBySchema() || {}
+    : findIssuerByPortal() || {};
+  const { name: attestationName, portal: attestationPortal } = findAttestation() || {};
+  const portalId = isByAttestationType ? where?.portal_?.id : where?.portal_in?.[0];
+  const schemaId = where?.schema_?.id;
+  const isPortalMatch = portalId === attestationPortal;
+
+  const { data: portal } = useSWR(isPortalMatch ? null : `${SWRKeys.GET_PORTAL_LIST}`, async () => {
+    if (portalId && regexEthAddress.byNumberOfChar[42].test(portalId))
+      return sdk.portal.findOneById(portalId || EMPTY_STRING);
+  });
+
+  const { data: schema } = useSWR(`${SWRKeys.GET_SCHEMA_BY_ID}/${schemaId}/${network.chain.id}`, async () => {
+    if (schemaId && regexEthAddress.byNumberOfChar[64].test(schemaId)) return sdk.schema.findOneById(schemaId);
+  });
+
+  const generateTitle = useCallback(() => {
+    const titleByAttestationType = isPortalMatch
+      ? `${name} - ${attestationName}`
+      : `Attestations matching Portal ${portal?.name} for Schema ${schema?.name}`;
+    const titleByIssuer = `Attestations from ${name || portal?.ownerName}`;
+    return isByAttestationType ? titleByAttestationType : titleByIssuer;
+  }, [isPortalMatch, portal, schema, name, attestationName, isByAttestationType]);
+
   const { data: attestationsList, isLoading } = useSWR(
     totalItems > 0
       ? `${SWRKeys.GET_ATTESTATION_LIST}/${itemsPerPage}/${lastID}/${sortByDateDirection}/${network.chain.id}`
@@ -82,7 +125,7 @@ export const Attestations: React.FC = () => {
   };
 
   return (
-    <TitleAndSwitcher>
+    <TitleAndSwitcher {...(isFilteredByWhere && { title: generateTitle() })}>
       <DataTable columns={data.columns} data={data.list} link={APP_ROUTES.ATTESTATION_BY_ID} />
       {renderPagination()}
     </TitleAndSwitcher>