- Scaffold structure for fetching GQL data

- Configure gql.tada
- Auto fetch schemas
- GQL Fragments for Hypercerts
- Generate TS types for GQL queries
- Functions for fetching hypercerts
- Fetch hypercerts for explore page
- Pagination for explore page

Author: kristoferlund

Diff for: .vscode/settings.json

@@ -0,0 +1,4 @@
+{
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "typescript.enablePromptUseWorkspaceTsdk": true
+}

Diff for: app/explore/loading.tsx

@@ -0,0 +1,9 @@
+export default function Loading() {
+  return (
+    <div className="flex items-center justify-center h-screen">
+      <div className="animate-spin">
+        <div className="h-12 w-12 border-t-4 border-b-4 border-blue-500 rounded-full"></div>
+      </div>
+    </div>
+  );
+}

Diff for: app/explore/page.tsx

@@ -1,65 +1,30 @@
 import HypercertCard, {
   type HypercertCardProps,
 } from "@/components/hypercert-card";
+import { getAllHypercerts } from "../../hypercerts/getAllHypercerts";
+import Pagination from "../../components/explore/Pagination";
+import { HYPERCERTS_PER_PAGE } from "../../configs/ui";
+import { Suspense } from "react";
+import Loading from "./loading";
 
 export const metadata = {
   title: "Explore",
   description:
     "The best place to discover and contribute to hypercerts and hyperboards.",
 };
 
-const cardData: HypercertCardProps[] = [
-  {
-    title: "Moslev's Supreme Treasure Hunt",
-    description:
-      "A treasure hunt to find the hidden treasure in the hypercerts.",
-    hypercertId: "0x12234",
-    banner:
-      "https://www.kathrynwilking.com/wp-content/uploads/2018/03/Treasure-Box-blog-iStock-542285574.jpg",
-    logo: "https://upload.wikimedia.org/wikipedia/commons/c/cc/Treasure_logo_2023.png",
-  },
-  {
-    title: "Global Reforestation Initiative",
-    description:
-      "Join efforts to plant trees worldwide and combat deforestation.",
-    hypercertId: "0x334455",
-    banner: "https://images.unsplash.com/photo-1518837695005-2083093ee35b",
-    logo: "https://upload.wikimedia.org/wikipedia/commons/2/21/The_logo_of_the_two_swords_and_the_palm_tree.jpg",
-  },
-  {
-    title: "Ocean Cleanup Project",
-    description: "Help remove plastics and other waste from our oceans.",
-    hypercertId: "0x556677",
-    banner: "https://images.unsplash.com/photo-1507525428034-b723cf961d3e",
-    logo: "https://upload.wikimedia.org/wikipedia/commons/5/5a/Nick_Mason_DW_%22Waves%22_Kit_2022.jpg",
-  },
-  {
-    title: "Renewable Energy Research",
-    description:
-      "Support advancements in sustainable and renewable energy sources.",
-    hypercertId: "0x778899",
-    banner: "https://images.unsplash.com/photo-1504196606672-aef5c9cefc92",
-    logo: "https://upload.wikimedia.org/wikipedia/commons/e/ef/Cristian_Sun_Logo_Transparente.png",
-  },
-  {
-    title: "Wildlife Conservation Network",
-    description:
-      "Contribute to the protection of endangered species and their habitats.",
-    hypercertId: "0x9900aa",
-    banner: "https://images.unsplash.com/photo-1470770903676-69b98201ea1c",
-    logo: "https://upload.wikimedia.org/wikipedia/commons/d/d1/Logo_du_groupe_wolf_pack.jpg",
-  },
-  {
-    title: "Clean Air Initiative",
-    description:
-      "Promote projects that aim to reduce air pollution in urban areas.",
-    hypercertId: "0xbbccdd",
-    banner: "https://images.unsplash.com/photo-1495954484750-af469f2f9be5",
-    logo: "https://upload.wikimedia.org/wikipedia/commons/4/40/Wind_logo_2017.svg",
-  },
-];
+async function ExplorePageInner({
+  searchParams,
+}: {
+  searchParams: Record<string, string>;
+}) {
+  const currentPage = Number(searchParams?.p) || 1;
+
+  const hypercerts = await getAllHypercerts({
+    first: HYPERCERTS_PER_PAGE,
+    offset: HYPERCERTS_PER_PAGE * (currentPage - 1),
+  });
 
-export default function Explore() {
   return (
     <>
       <main className="flex flex-col p-8 md:p-24 pb-24">
@@ -76,11 +41,29 @@ export default function Explore() {
 
         <div className="p-3"></div>
         <div className="flex flex-wrap gap-5">
-          {cardData.map((card) => (
-            <HypercertCard {...card} key={card.hypercertId} />
-          ))}
+          {hypercerts?.data?.map((hypercert) => {
+            const props: HypercertCardProps = {
+              hypercertId: hypercert.hypercert_id as string,
+              title: hypercert.metadata?.name as string,
+              description: hypercert.metadata?.description as string,
+            };
+            return <HypercertCard {...props} key={hypercert.hypercert_id} />;
+          })}
         </div>
+        <Pagination searchParams={searchParams} />
       </main>
     </>
   );
 }
+
+export default async function ExplorePage({
+  searchParams,
+}: {
+  searchParams: Record<string, string>;
+}) {
+  return (
+    <Suspense fallback={<Loading />}>
+      {ExplorePageInner({ searchParams })}
+    </Suspense>
+  );
+}

Diff for: components/explore/Pagination.tsx

@@ -0,0 +1,55 @@
+import { HYPERCERTS_PER_PAGE } from "../../configs/ui";
+import PaginationButton from "./PaginationButton";
+import { getHypercertsTotal } from "../../hypercerts/getHypercertsTotal";
+
+export default async function Pagination({
+  searchParams,
+}: {
+  searchParams: Record<string, string>;
+}) {
+  const totalCount = await getHypercertsTotal();
+  const totalPages = Math.ceil((totalCount || 0) / HYPERCERTS_PER_PAGE);
+  const currentPage = Number(searchParams?.p) || 1;
+
+  const urlSearchParams = new URLSearchParams(searchParams);
+  const navQs = (toPage: number) => {
+    urlSearchParams.set("p", toPage.toString());
+    return urlSearchParams.toString();
+  };
+
+  return (
+    <div className="flex items-center justify-between w-full border border-black p-5">
+      <div className="flex items-center justify-start gap-2 w-[250px]">
+        {currentPage > 1 && (
+          <PaginationButton arrow="left" qs={navQs(1)}>
+            First
+          </PaginationButton>
+        )}
+
+        {currentPage > 1 && (
+          <PaginationButton arrow="left" qs={navQs(currentPage - 1)}>
+            Previous
+          </PaginationButton>
+        )}
+      </div>
+
+      <div className="pt-1 text-sm text-gray-500 whitespace-nowrap">
+        {currentPage} of {totalPages}
+      </div>
+
+      <div className="flex items-center justify-end gap-2 w-[250px]">
+        {currentPage < totalPages && (
+          <PaginationButton arrow="right" qs={navQs(currentPage + 1)}>
+            Next
+          </PaginationButton>
+        )}
+
+        {currentPage < totalPages && (
+          <PaginationButton arrow="right" qs={navQs(totalPages)}>
+            Last
+          </PaginationButton>
+        )}
+      </div>
+    </div>
+  );
+}

Diff for: components/explore/PaginationButton.tsx

@@ -0,0 +1,28 @@
+import { ChevronLeft, ChevronRight } from "lucide-react";
+
+import { Button } from "../ui/button";
+import Link from "next/link";
+
+export default function PaginationButton({
+  qs,
+  arrow,
+  children,
+}: {
+  qs: string;
+  arrow: "left" | "right";
+  children: string;
+}) {
+  return (
+    <Link href={`/?${qs}`} prefetch={true}>
+      <Button aria-label={children} className="flex items-center gap-2">
+        {arrow === "left" && (
+          <ChevronLeft style={{ width: "10px", height: "10px" }} />
+        )}
+        {arrow === "right" && (
+          <ChevronRight style={{ width: "10px", height: "10px" }} />
+        )}
+        {children}
+      </Button>
+    </Link>
+  );
+}

Diff for: configs/hypercerts.ts

@@ -0,0 +1,5 @@
+export const HYPERCERTS_API_URL =
+  "https://hypercerts-api-staging.up.railway.app/graphql";
+
+export const HYPERCERTS_DEFAULT_CONTRACT =
+  "0xa16dfb32eb140a6f3f2ac68f41dad8c7e83c4941";

Diff for: configs/ui.ts

@@ -0,0 +1,2 @@
+export const HYPERCERTS_PER_PAGE = 12;
+export const ATTESTORS_PER_PAGE = 10;