fix(explorer): Explorer is not displaying all the attestations from a…

… given address
Consensys · Jun 6, 2024 · 8764eb7 · 8764eb7
1 parent 0ecd767
commit 8764eb7
Show file tree

Hide file tree

Showing 6 changed files with 78 additions and 54 deletions.
diff --git a/explorer/src/assets/icons/magnifying-glass.svg b/explorer/src/assets/icons/magnifying-glass.svg
diff --git a/explorer/src/assets/locales/en/en.json b/explorer/src/assets/locales/en/en.json
@@ -25,6 +25,7 @@
       "notFound": "Not Found",
       "noResults": "No Results",
       "hasntBeenFound": "hasn`t been found",
+      "searchInProgress": "Searching for <bold>“{{search}}”</bold>...",
       "searchNotFound": "Nothing found on <bold>“{{search}}”</bold> search request",
       "searchFound": "<bold>{{count}}</bold> results found on <bold>“{{search}}”</bold> search request",
       "perPage": "per page"
@@ -64,6 +65,8 @@
   },
   "attestation": {
     "title": "Attestation",
+    "received": "Attestations received",
+    "issued": "Attestations issued",
     "list": {
       "title": "Explore Attestations",
       "switch": {

diff --git a/explorer/src/constants/index.ts b/explorer/src/constants/index.ts
@@ -10,6 +10,7 @@ export const ZERO_STRING = "0";
 export const TEN = 10;
 export const ZERO = 0;
 export const ITEMS_PER_PAGE_DEFAULT = 10;
+export const ITEMS_SEARCHED_DEFAULT = 100;
 export const CURRENT_PAGE_DEFAULT = 1;
 export const THOUSAND = 1e3;
 export const BILLION = 1e9;

diff --git a/...h/components/SearchAttestations/index.tsx → ...ents/SearchAttestationsReceived/index.tsx b/...h/components/SearchAttestations/index.tsx → ...ents/SearchAttestationsReceived/index.tsx
@@ -7,19 +7,19 @@ import { SWRKeys } from "@/interfaces/swr/enum";
 import { useNetworkContext } from "@/providers/network-provider/context";
 import { APP_ROUTES } from "@/routes/constants";
 
-import { loadAttestationList } from "./loadAttestationList";
+import { loadAttestationReceivedList } from "./loadAttestationReceivedList.ts";
 import { SearchComponentProps } from "../interfaces";
 import { SearchWrapper } from "../SearchWrapper";
 
-export const SearchAttestations: React.FC<SearchComponentProps> = ({ getSearchData, parsedString, search }) => {
+export const SearchAttestationsReceived: React.FC<SearchComponentProps> = ({ getSearchData, parsedString, search }) => {
   const {
     sdk,
     network: { chain },
   } = useNetworkContext();
 
   const { data } = useSWR(
     `${SWRKeys.GET_ATTESTATION_LIST}/${SWRKeys.SEARCH}/${search}/${chain.id}`,
-    async () => loadAttestationList(sdk.attestation, parsedString),
+    async () => loadAttestationReceivedList(sdk.attestation, parsedString),
     {
       shouldRetryOnError: false,
       revalidateAll: false,
@@ -30,7 +30,7 @@ export const SearchAttestations: React.FC<SearchComponentProps> = ({ getSearchDa
 
   if (!data || !data.length) return null;
   return (
-    <SearchWrapper title={t("attestation.title")} items={data.length}>
+    <SearchWrapper title={t("attestation.received")} items={data.length}>
       <DataTable columns={columns({ sdk, chainId: chain.id })} data={data} link={APP_ROUTES.ATTESTATION_BY_ID} />
     </SearchWrapper>
   );

diff --git a/...SearchAttestations/loadAttestationList.ts → ...nsReceived/loadAttestationReceivedList.ts b/...SearchAttestations/loadAttestationList.ts → ...nsReceived/loadAttestationReceivedList.ts
@@ -1,24 +1,20 @@
 import AttestationDataMapper from "@verax-attestation-registry/verax-sdk/lib/types/src/dataMapper/AttestationDataMapper";
 
-import { ITEMS_PER_PAGE_DEFAULT } from "@/constants";
+import { ITEMS_SEARCHED_DEFAULT } from "@/constants";
 import { ResultParseSearch } from "@/interfaces/components";
 import { isNotNullOrUndefined } from "@/utils";
 import { uniqMap } from "@/utils/searchUtils";
 
-export const loadAttestationList = async (
+export const loadAttestationReceivedList = async (
   attestation: AttestationDataMapper,
   parsedString: Partial<ResultParseSearch>,
 ) => {
-  const [listByAddress] = parsedString.address
+  const [listBySubject] = parsedString.address
     ? await Promise.all(
         parsedString.address.map(async (address) => {
-          const attestationResults = attestation.findBy(ITEMS_PER_PAGE_DEFAULT, undefined, {
-            attester_contains: address,
+          return attestation.findBy(ITEMS_SEARCHED_DEFAULT, undefined, {
+            subject: address,
           });
-          const subjectResults = attestation.findBy(ITEMS_PER_PAGE_DEFAULT, undefined, {
-            subject_contains: address,
-          });
-          return Promise.all([attestationResults, subjectResults]);
         }),
       )
     : [];
@@ -30,15 +26,10 @@ export const loadAttestationList = async (
   ).filter(isNotNullOrUndefined);
 
   const listBySchemaString = parsedString.schemaString
-    ? await attestation.findBy(ITEMS_PER_PAGE_DEFAULT, undefined, { schemaString: parsedString.schemaString })
+    ? await attestation.findBy(ITEMS_SEARCHED_DEFAULT, undefined, { schemaString: parsedString.schemaString })
     : [];
 
-  const results = [
-    ...(listByIds || []),
-    ...(listByAddress?.[0] || []),
-    ...(listByAddress?.[1] || []),
-    ...(listBySchemaString || []),
-  ];
+  const results = [...(listByIds || []), ...(listBySubject || []), ...(listBySchemaString || [])];
 
   return uniqMap(results, "id");
 };
diff --git a/explorer/src/pages/Search/index.tsx b/explorer/src/pages/Search/index.tsx
@@ -1,16 +1,17 @@
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { Trans } from "react-i18next";
 import { useSearchParams } from "react-router-dom";
 
 import archive from "@/assets/icons/archive.svg";
+import magnifyingGlass from "@/assets/icons/magnifying-glass.svg";
 import { InfoBlock } from "@/components/InfoBlock";
 import { EMPTY_STRING } from "@/constants";
 import { DEFAULT_SEARCH_ELEMENTS } from "@/constants/components";
 import { EQueryParams } from "@/enums/queryParams";
 import { Page, SearchElementProps } from "@/interfaces/components";
 import { parseSearch } from "@/utils/searchUtils";
 
-import { SearchAttestations } from "./components/SearchAttestations";
+import { SearchAttestationsReceived } from "./components/SearchAttestationsReceived";
 import { SearchModules } from "./components/SearchModules";
 import { SearchPortals } from "./components/SearchPortals";
 import { SearchSchemas } from "./components/SearchSchemas";
@@ -22,17 +23,37 @@ export const Search = () => {
   const parsedString = useMemo(() => parseSearch(search), [search]);
 
   const [searchElements, setSearchElements] = useState<SearchElementProps>(DEFAULT_SEARCH_ELEMENTS);
-  const count = Object.values(searchElements).reduce((acc, currentValue) => acc + currentValue.count, 0);
-  const isLoaded = Object.values(searchElements).every((element) => element.loaded);
+  const [notFound, setNotFound] = useState(false);
+  const [count, setCount] = useState(0);
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  useEffect(() => {
+    const newCount = Object.values(searchElements).reduce((acc, currentValue) => acc + currentValue.count, 0);
+    const newIsLoaded = Object.values(searchElements).every((element) => element.loaded);
+
+    setCount(newCount);
+    setIsLoaded(newIsLoaded);
+    setNotFound(newIsLoaded && newCount === 0);
+  }, [searchElements]);
 
   const updateSearchElement = (page: Page, count: number, loaded: boolean) => {
     setSearchElements((prev) => ({ ...prev, [page]: { loaded, count } }));
   };
-  const notFound = isLoaded && count === 0;
 
   return (
     <section className="container flex flex-col items-start gap-10 lg:mt-16 md:mt-8 mt-5">
-      {notFound ? (
+      {!isLoaded && (
+        <InfoBlock
+          icon={<img src={magnifyingGlass} alt="magnifying glass" />}
+          message={
+            <span className="break-all [&>strong]:text-text-primary dark:[&>strong]:text-text-secondaryDark">
+              <Trans i18nKey="common.messages.searchInProgress" values={{ search }} components={{ bold: <strong /> }} />
+            </span>
+          }
+        />
+      )}
+
+      {notFound && (
         <InfoBlock
           icon={<img src={archive} alt="archive" />}
           message={
@@ -41,35 +62,37 @@ export const Search = () => {
             </span>
           }
         />
-      ) : (
-        <>
-          <p className="text-text-tertiary text-base dark:text-tertiary [&>strong]:text-text-primary dark:[&>strong]:text-text-secondaryDark break-word">
-            <Trans i18nKey="common.messages.searchFound" values={{ count, search }} components={{ bold: <strong /> }} />
-          </p>
-          <div className="flex flex-col gap-12 w-full">
-            <SearchAttestations
-              search={search || EMPTY_STRING}
-              parsedString={parsedString}
-              getSearchData={(count, loaded) => updateSearchElement("attestation", count, loaded)}
-            />
-            <SearchSchemas
-              search={search || EMPTY_STRING}
-              parsedString={parsedString}
-              getSearchData={(count, loaded) => updateSearchElement("schema", count, loaded)}
-            />
-            <SearchModules
-              search={search || EMPTY_STRING}
-              parsedString={parsedString}
-              getSearchData={(count, loaded) => updateSearchElement("module", count, loaded)}
-            />
-            <SearchPortals
-              search={search || EMPTY_STRING}
-              parsedString={parsedString}
-              getSearchData={(count, loaded) => updateSearchElement("portal", count, loaded)}
-            />
-          </div>
-        </>
       )}
+
+      {count > 0 && (
+        <p
+          className="text-text-tertiary text-base dark:text-tertiary [&>strong]:text-text-primary dark:[&>strong]:text-text-secondaryDark break-word">
+          <Trans i18nKey="common.messages.searchFound" values={{ count, search }} components={{ bold: <strong /> }} />
+        </p>
+      )}
+
+      <div className="flex flex-col gap-12 w-full">
+        <SearchAttestationsReceived
+          search={search || EMPTY_STRING}
+          parsedString={parsedString}
+          getSearchData={(count, loaded) => updateSearchElement("attestation", count, loaded)}
+        />
+        <SearchSchemas
+          search={search || EMPTY_STRING}
+          parsedString={parsedString}
+          getSearchData={(count, loaded) => updateSearchElement("schema", count, loaded)}
+        />
+        <SearchModules
+          search={search || EMPTY_STRING}
+          parsedString={parsedString}
+          getSearchData={(count, loaded) => updateSearchElement("module", count, loaded)}
+        />
+        <SearchPortals
+          search={search || EMPTY_STRING}
+          parsedString={parsedString}
+          getSearchData={(count, loaded) => updateSearchElement("portal", count, loaded)}
+        />
+      </div>
     </section>
   );
 };