Merge pull request #31 from byte-hedgy/dev-hedgy-issue-g

Add builders page.

Author: melanke

packages/nextjs/app/builders/page.tsx

@@ -0,0 +1,21 @@
+import fs from "fs/promises";
+import path from "path";
+import BuildersGrid from "~~/components/builders/BuildersGrid";
+
+export default async function BuildersPage() {
+  const currentDir = path.join(process.cwd(), "app", "builders");
+  const files = await fs.readdir(currentDir, { withFileTypes: true });
+  const publishedBuilders = files.filter(file => file.isDirectory()).map(dir => dir.name);
+  return (
+    <div className="flex items-center flex-col flex-grow pt-10">
+      <div className="text-center w-full lg:w-2/3">
+        <h1 className="font-extrabold mb-2 bg-gradient-to-r from-purple-500 to-indigo-600 bg-clip-text text-transparent text-xl sm:text-2xl md:text-3xl lg:text-4xl leading-relaxed">
+          Batch 18: Checked-in Builders
+        </h1>
+        <div>
+          <BuildersGrid publishedBuilders={publishedBuilders} />
+        </div>
+      </div>
+    </div>
+  );
+}

packages/nextjs/components/Header.tsx

@@ -5,7 +5,7 @@ import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
 import { hardhat } from "viem/chains";
-import { Bars3Icon, BugAntIcon } from "@heroicons/react/24/outline";
+import { Bars3Icon, BugAntIcon, UsersIcon } from "@heroicons/react/24/outline";
 import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useOutsideClick, useTargetNetwork } from "~~/hooks/scaffold-eth";
 
@@ -20,6 +20,11 @@ export const menuLinks: HeaderMenuLink[] = [
     label: "Home",
     href: "/",
   },
+  {
+    label: "Builders",
+    href: "/builders",
+    icon: <UsersIcon className="h-4 w-4" />,
+  },
   {
     label: "Debug Contracts",
     href: "/debug",

packages/nextjs/components/builders/BuildersGrid.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import Link from "next/link";
+import { Address } from "~~/components/scaffold-eth";
+import { useScaffoldEventHistory } from "~~/hooks/scaffold-eth";
+
+type Props = {
+  publishedBuilders: string[];
+};
+
+const CONTRACT_FROM_BLOCK: bigint = 355913556n;
+
+export default function BuildersGrid({ publishedBuilders }: Props) {
+  const { data: checkedInEvents, isLoading: isEventsLoading } = useScaffoldEventHistory({
+    contractName: "BatchRegistry",
+    eventName: "CheckedIn",
+    fromBlock: CONTRACT_FROM_BLOCK,
+    blocksBatchSize: 5000000, // default 500, so slowly.
+  });
+  const filteredEvents = checkedInEvents?.filter(event => event?.args?.first);
+
+  return isEventsLoading ? (
+    <p>Loading checked-in events...</p>
+  ) : (
+    <div className="grid grid-cols-1 lg:grid-cols-3 px-6 lg:px-10 lg:gap-4 w-full max-w-7xl">
+      {filteredEvents?.map((event, index) => {
+        return (
+          <div
+            key={index}
+            className="bg-base-100 border-base-300 border shadow-md shadow-secondary rounded-3xl px-6 lg:px-8 py-4"
+          >
+            <div className="flex">
+              <div className="flex flex-col gap-1 w-full">
+                <div className="flex gap-3 items-center">
+                  <span className="font-bold w-1/4">Builder</span>
+                  <Address address={event.args.builder} onlyEnsOrAddress />
+                </div>
+                <div className="flex gap-3 items-center">
+                  <span className="font-bold w-1/4">Contract</span>
+                  <Address address={event.args.checkInContract} format="short" onlyEnsOrAddress />
+                </div>
+                <div className="flex gap-3 items-center">
+                  <span className="font-bold w-1/4">Profile</span>
+                  {publishedBuilders.includes(event.args.builder ?? "") ? (
+                    <div className="flex gap-3 items-center">
+                      <Link href={`builders/${event.args.builder}`} target="_blank">
+                        <button className="btn btn-secondary btn-xs self-end md:self-start">View 🧑‍💻</button>
+                      </Link>
+                    </div>
+                  ) : (
+                    <span className="text-sm">N/A</span>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}