feat: As a user, I want to be able to see the list of schemas on Expl…

…orer (#463)

Co-authored-by: Taras Oliynyk <[email protected]>
Co-authored-by: Solniechniy <[email protected]>

explorer/src/constants/columns/schema.tsx

@@ -0,0 +1,52 @@
+import { ColumnDef } from "@tanstack/react-table";
+import { Schema } from "@verax-attestation-registry/verax-sdk";
+
+import { HelperIndicator } from "@/components/HelperIndicator";
+import { Link } from "@/components/Link";
+import { toSchemaById } from "@/routes/constants";
+
+export const columns = (): ColumnDef<Schema>[] => [
+  {
+    accessorKey: "name",
+    header: () => (
+      <div className="flex items-center gap-2.5">
+        <HelperIndicator type="schema" />
+        Schema Name
+      </div>
+    ),
+    cell: ({ row }) => {
+      const name = row.getValue("name") as string;
+      const id = row.original.id;
+
+      return (
+        <Link to={toSchemaById(id)} className="hover:underline hover:text-text-quaternary">
+          {name}
+        </Link>
+      );
+    },
+  },
+  {
+    accessorKey: "description",
+    header: () => "Schema Description",
+    cell: ({ row }) => {
+      const description = row.getValue("description") as string;
+      return <p className="max-w-[300px] overflow-hidden text-ellipsis">{description}</p>;
+    },
+  },
+  {
+    accessorKey: "context",
+    header: () => "Context",
+    cell: ({ row }) => {
+      const context = row.getValue("context") as string;
+      return <p className="max-w-[300px] overflow-hidden text-ellipsis">{context}</p>;
+    },
+  },
+  {
+    accessorKey: "schema",
+    header: () => <p className="text-left pl-2">Schema</p>,
+    cell: ({ row }) => {
+      const schema = row.getValue("schema") as string;
+      return <p className="max-w-[300px] overflow-hidden text-ellipsis text-left w-full">{schema}</p>;
+    },
+  },
+];

explorer/src/interfaces/swr/enum.ts

@@ -1,5 +1,7 @@
 export enum SWRKeys {
   GET_ATTESTATION_BY_ID = "getAttestationByID",
+  GET_SCHEMAS_LIST = "getSchemasList",
+  GET_SCHEMAS_COUNT = "getSchemasCount",
   GET_SCHEMA_BY_ID = "getSchemaByID",
   GET_RELATED_ATTESTATION = "getRelatedAttestations",
   GET_ATTESTATION_LIST = "getAttestationList",

explorer/src/pages/Attestation/RelatedAttestations/index.tsx

@@ -1,9 +1,9 @@
 import { Attestation } from "@verax-attestation-registry/verax-sdk";
 import { EyeOffIcon } from "lucide-react";
+import { Link } from "react-router-dom";
 import { KeyedMutator } from "swr";
 import { Hex, hexToNumber } from "viem";
 
-import { Link } from "@/components/Link";
 import { useNetworkContext } from "@/providers/network-provider/context";
 import { toAttestationById } from "@/routes/constants";
 import { displayAmountWithComma } from "@/utils/amountUtils";

explorer/src/pages/Schemas/index.tsx

@@ -0,0 +1,49 @@
+import { useState } from "react";
+import useSWR from "swr";
+
+import { DataTable } from "@/components/DataTable";
+import { Pagination } from "@/components/Pagination";
+import { ITEMS_PER_PAGE_DEFAULT, ZERO } from "@/constants";
+import { columns } from "@/constants/columns/schema";
+import { SWRKeys } from "@/interfaces/swr/enum";
+import { useNetworkContext } from "@/providers/network-provider/context";
+import { getItemsByPage, pageBySearchParams } from "@/utils/paginationUtils";
+
+export const Schemas: React.FC = () => {
+  const {
+    sdk,
+    network: { chain },
+  } = useNetworkContext();
+
+  const { data: schemasCount } = useSWR(
+    `${SWRKeys.GET_SCHEMAS_COUNT}/${chain.id}`,
+    () => sdk.schema.getSchemasNumber() as Promise<number>,
+  );
+
+  const totalItems = schemasCount ? Number(schemasCount) : ZERO;
+  const searchParams = new URLSearchParams(window.location.search);
+  const page = pageBySearchParams(searchParams, totalItems);
+
+  const [skip, setSkip] = useState<number>(getItemsByPage(page));
+
+  const { data: schemasList } = useSWR(`${SWRKeys.GET_SCHEMAS_LIST}/${skip}/${chain.id}`, () =>
+    sdk.schema.findBy(ITEMS_PER_PAGE_DEFAULT, skip),
+  );
+
+  const handlePage = (retrievedPage: number) => {
+    setSkip(getItemsByPage(retrievedPage));
+  };
+
+  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 zinc-950">Explore Schemas</h1>
+      </div>
+      <div>
+        {/* TODO: add skeleton for table */}
+        {schemasList && <DataTable columns={columns()} data={schemasList} />}
+        {Boolean(schemasCount) && <Pagination itemsCount={totalItems} handlePage={handlePage} />}
+      </div>
+    </div>
+  );
+};

explorer/src/routes/index.tsx

@@ -6,6 +6,7 @@ import { Home } from "@/pages/Home";
 import { Modules } from "@/pages/Modules";
 import { MyAttestations } from "@/pages/MyAttestations";
 import { Schema } from "@/pages/Schema";
+import { Schemas } from "@/pages/Schemas";
 import { Providers } from "@/providers";
 import { loaderNetworkProvider } from "@/providers/network-provider/loader";
 
@@ -19,6 +20,7 @@ export const router = createBrowserRouter(
       <Route path={APP_ROUTES.ATTESTATIONS} element={<Attestations />} />
       <Route path={APP_ROUTES.MY_ATTESTATIONS} element={<MyAttestations />} />
       <Route path={APP_ROUTES.ATTESTATION_BY_ID} element={<Attestation />} />
+      <Route path={APP_ROUTES.SCHEMAS} element={<Schemas />} />
       <Route path={APP_ROUTES.SCHEMA_BY_ID} element={<Schema />} />
       <Route path={APP_ROUTES.MODULES} element={<Modules />} />
       <Route path={APP_ROUTES.DEFAULT} element={<NotFoundPage />} />