fix: Portals are missing from search results (#510)

explorer/src/assets/locales/en/en.json

@@ -52,7 +52,7 @@
   "home": {
     "title": "Your Reputation Under Your Control",
     "description": "Explore the ecosystem to find out how you can unlock your data from across the web and share it with the world on your own terms",
-    "exploreEcosystem": "or explore the ecosystem",
+    "exploreEcosystem": "or <bold>explore the ecosystem...</bold>",
     "info": {
       "issueYourAttestation": "Want to issue your own attestation?",
       "aboutVerax": "Want to know more about Verax?"
@@ -140,6 +140,14 @@
       "title": "Revokable",
       "yes": "Yes",
       "no": "No"
+    },
+    "list": {
+      "title": "Explore Portals",
+      "columns": {
+        "name": "Portal Name",
+        "description": "Portal Description",
+        "owner": "Owner Address"
+      }
     }
   }
 }

explorer/src/components/NotFoundPage/index.tsx

@@ -15,18 +15,18 @@ export const NotFoundPage: React.FC<NotFoundPageProps> = ({ id, page }) => {
     <section className="container flex justify-center px-4">
       <div className="flex flex-col max-w-[1200px] w-full h-[644px] items-center justify-center gap-6 border border-solid mt-8 rounded-3xl">
         <img src={archive} className="!h-[32px] !w-[32px]" />
-        <p className="flex gap-1 font-medium text-base text-center text-[#646a86]">
+        <p className="flex gap-1 font-medium text-base text-center text-text-darkGrey">
           <span>{pageData.title}</span>
           {pageData.showId && (
-            <span className="max-w-[100px] md:max-w-[200px] text-[#3d3d50] overflow-hidden text-ellipsis">
+            <span className="max-w-[100px] md:max-w-[200px] text-text-darkBlue overflow-hidden text-ellipsis dark:text-white">
               {decodedId}
             </span>
           )}
           <span>{t("common.messages.hasntBeenFound")}</span>
         </p>
         <Link
           to={pageData.to}
-          className="flex gap-2 border border-solid rounded-md px-4 py-3 border-button-secondary-border hover:border-button-secondary-hover"
+          className="flex gap-2 border border-solid rounded-md px-4 py-3 border-button-secondary-border hover:border-button-secondary-hover dark:text-white"
         >
           <ChevronLeft width={24} height={24} />
           {t("common.actions.goBackTo", { to: page })}

explorer/src/components/SearchInput/index.tsx

@@ -8,7 +8,7 @@ import { keyboard } from "@/constants/keyboard";
 import { EQueryParams } from "@/enums/queryParams";
 import { useHandleSearch } from "@/hooks/useHandleSearch";
 
-export const SearchInput: React.FC<{ className?: string }> = ({ className }) => {
+export const SearchInput: React.FC<{ className?: string; height?: string }> = ({ className, height = "h-12" }) => {
   const [searchParams] = useSearchParams();
   const search = searchParams.get(EQueryParams.SEARCH_QUERY);
   const [searchQuery, setSearchQuery] = useState<string>(search || EMPTY_STRING);
@@ -22,7 +22,7 @@ export const SearchInput: React.FC<{ className?: string }> = ({ className }) =>
 
   return (
     <div
-      className={`w-full md:max-w-[370px] xl:min-w-[auto] h-12 p-2 bg-white dark:bg-transparent rounded-md border border-border-card dark:border-border-cardDark justify-between items-center inline-flex focus-within:border-border-inputFocus ${className}`}
+      className={`w-full md:max-w-[370px] xl:min-w-[auto] ${height} p-2 bg-white dark:bg-transparent rounded-md border border-border-card dark:border-border-cardDark justify-between items-center inline-flex focus-within:border-border-inputFocus ${className}`}
     >
       <input
         value={searchQuery}

explorer/src/constants/columns/portal.tsx

@@ -0,0 +1,57 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { Portal } from "@verax-attestation-registry/verax-sdk";
+import { t } from "i18next";
+
+import { TdHandler } from "@/components/DataTable/components/TdHandler";
+import { HelperIndicator } from "@/components/HelperIndicator";
+import { Link } from "@/components/Link";
+import { toPortalById } from "@/routes/constants";
+import { cropString } from "@/utils/stringUtils";
+
+import { links } from "../index";
+
+export const columns = ({ chainId }: { chainId: number }): ColumnDef<Portal>[] => [
+  {
+    accessorKey: "name",
+    header: () => (
+      <div className="flex items-center gap-2.5">
+        <HelperIndicator type="portal" />
+        {t("portal.list.columns.name")}
+      </div>
+    ),
+    cell: ({ row }) => {
+      const name = row.getValue("name") as string;
+      const id = row.original.id;
+
+      return (
+        <Link to={toPortalById(id)} className="hover:underline" onClick={(e) => e.stopPropagation()}>
+          {name}
+        </Link>
+      );
+    },
+  },
+  {
+    accessorKey: "description",
+    header: () => t("portal.list.columns.description"),
+    cell: ({ row }) => {
+      const description = row.getValue("description") as string;
+      return <p className="max-w-[300px] overflow-hidden text-ellipsis">{description}</p>;
+    },
+  },
+  {
+    accessorKey: "owner",
+    header: () => <p>{t("portal.list.columns.owner")}</p>,
+    cell: ({ row }) => {
+      const address = row.original.ownerAddress;
+      const id = row.original.id;
+
+      return (
+        <TdHandler
+          valueUrl={chainId ? `${links[chainId].address}/${address}` : "#"}
+          value={cropString(address)}
+          to={toPortalById(id)}
+        />
+      );
+    },
+  },
+];

explorer/src/interfaces/swr/enum.ts

@@ -13,4 +13,5 @@ export enum SWRKeys {
   GET_PORTALS_BY_ISSUER = "getPortalsByIssuer",
   GET_PORTAL_BY_ID = "getPortalByID",
   GET_PORTAL_MODULE_LIST = "getPortalModuleList",
+  GET_PORTAL_LIST = "getPortalList",
 }

explorer/src/pages/Home/components/Jumbotron/index.tsx

@@ -1,5 +1,6 @@
 import { t } from "i18next";
 import { ArrowUpRight } from "lucide-react";
+import { Trans } from "react-i18next";
 
 import { Button } from "@/components/Buttons";
 import { EButtonType } from "@/components/Buttons/enum";
@@ -22,13 +23,17 @@ export const Jumbotron: React.FC = () => {
             handler={() => window.open(veraxLink, "_blank")}
             buttonType={EButtonType.PRIMARY_LIME}
             iconRight={<ArrowUpRight />}
+            height="h-10"
           />
           <p className="text-text-tertiary text-base not-italic font-normal leading-[140%]">
-            {t("home.exploreEcosystem")}
+            <Trans i18nKey="home.exploreEcosystem" components={{ bold: <strong /> }} />
           </p>
         </div>
       </div>
-      <SearchInput className="md:max-w-full lg:absolute lg:w-[30rem] lg:bottom-0 lg:right-0 xl:w-[35.5625rem]" />
+      <SearchInput
+        className="pl-2 pr-1 py-2 md:max-w-full lg:absolute lg:w-[30rem] lg:bottom-0 lg:right-0 xl:w-[35.5625rem]"
+        height="h-10"
+      />
     </div>
   );
 };

explorer/src/pages/Search/components/SearchModules/loadModuleList.ts

@@ -8,10 +8,10 @@ export const loadModuleList = async (module: ModuleDataMapper, parsedString: Par
   const [listByName, listByDescription] = parsedString.nameOrDescription
     ? await Promise.all([
         module.findBy(ITEMS_PER_PAGE_DEFAULT, undefined, {
-          name_starts_with: parsedString.nameOrDescription,
+          name_contains_nocase: parsedString.nameOrDescription,
         }),
         module.findBy(ITEMS_PER_PAGE_DEFAULT, undefined, {
-          description_starts_with: parsedString.nameOrDescription,
+          description_contains_nocase: parsedString.nameOrDescription,
         }),
       ])
     : [];

explorer/src/pages/Search/components/SearchPortals/index.tsx

@@ -0,0 +1,37 @@
+import { t } from "i18next";
+import useSWR from "swr";
+
+import { DataTable } from "@/components/DataTable";
+import { columns } from "@/constants/columns/portal";
+import { SWRKeys } from "@/interfaces/swr/enum";
+import { useNetworkContext } from "@/providers/network-provider/context";
+import { APP_ROUTES } from "@/routes/constants";
+
+import { loadPortalList } from "./loadPortalList";
+import { SearchComponentProps } from "../interfaces";
+import { SearchWrapper } from "../SearchWrapper";
+
+export const SearchPortals: React.FC<SearchComponentProps> = ({ getSearchData, parsedString, search }) => {
+  const {
+    sdk: { portal },
+    network: { chain },
+  } = useNetworkContext();
+
+  const { data } = useSWR(
+    `${SWRKeys.GET_PORTAL_LIST}/${SWRKeys.SEARCH}/${search}/${chain.id}`,
+    async () => loadPortalList(portal, parsedString),
+    {
+      shouldRetryOnError: false,
+      revalidateAll: false,
+      onSuccess: (successData) => getSearchData(successData.length, true),
+      onError: () => getSearchData(0, true),
+    },
+  );
+
+  if (!data || !data.length) return null;
+  return (
+    <SearchWrapper title={t("portal.title")} items={data.length}>
+      <DataTable columns={columns({ chainId: chain.id })} data={data} link={APP_ROUTES.PORTAL_BY_ID} />
+    </SearchWrapper>
+  );
+};

explorer/src/pages/Search/components/SearchPortals/loadPortalList.ts

@@ -0,0 +1,26 @@
+import PortalDataMapper from "@verax-attestation-registry/verax-sdk/lib/types/src/dataMapper/PortalDataMapper";
+
+import { ITEMS_PER_PAGE_DEFAULT } from "@/constants";
+import { ResultParseSearch } from "@/interfaces/components";
+import { isNotNullOrUndefined } from "@/utils";
+
+export const loadPortalList = async (portal: PortalDataMapper, parsedString: Partial<ResultParseSearch>) => {
+  const [listByName, listByDescription] = parsedString.nameOrDescription
+    ? await Promise.all([
+        portal.findBy(ITEMS_PER_PAGE_DEFAULT, undefined, {
+          name_contains_nocase: parsedString.nameOrDescription,
+        }),
+        portal.findBy(ITEMS_PER_PAGE_DEFAULT, undefined, {
+          description_contains_nocase: parsedString.nameOrDescription,
+        }),
+      ])
+    : [];
+
+  const listByIds = (
+    parsedString.address ? await Promise.all(parsedString.address.map((id) => portal.findOneById(id))) : []
+  ).filter(isNotNullOrUndefined);
+
+  const result = [...(listByIds || []), ...(listByName || []), ...(listByDescription || [])];
+
+  return result;
+};

explorer/src/pages/Search/components/SearchSchemas/loadSchemaList.ts

@@ -8,10 +8,10 @@ export const loadSchemaList = async (schema: SchemaDataMapper, parsedString: Par
   const [listByName, listByDescription] = parsedString.nameOrDescription
     ? await Promise.all([
         schema.findBy(ITEMS_PER_PAGE_DEFAULT, undefined, {
-          name_contains: parsedString.nameOrDescription,
+          name_contains_nocase: parsedString.nameOrDescription,
         }),
         schema.findBy(ITEMS_PER_PAGE_DEFAULT, undefined, {
-          description_contains: parsedString.nameOrDescription,
+          description_contains_nocase: parsedString.nameOrDescription,
         }),
       ])
     : [];

explorer/src/pages/Search/index.tsx

@@ -12,6 +12,7 @@ import { parseSearch } from "@/utils/searchUtils";
 
 import { SearchAttestations } from "./components/SearchAttestations";
 import { SearchModules } from "./components/SearchModules";
+import { SearchPortals } from "./components/SearchPortals";
 import { SearchSchemas } from "./components/SearchSchemas";
 
 //todo: load more and loading for child
@@ -61,6 +62,11 @@ export const Search = () => {
               parsedString={parsedString}
               getSearchData={(count, loaded) => updateSearchElement("module", count, loaded)}
             />
+            <SearchPortals
+              search={search || EMPTY_STRING}
+              parsedString={parsedString}
+              getSearchData={(count, loaded) => updateSearchElement("portal", count, loaded)}
+            />
           </div>
         </>
       )}