Chore: updated hall of fame to show graduates

Author: zachyo

packages/nextjs/app/hall-of-fame/_components/GraduateCard.tsx

@@ -1,8 +1,8 @@
 "use client";
 
 import { useEffect, useState } from "react";
+import Image from "next/image";
 import Link from "next/link";
-import { Address } from "@scaffold-ui/components";
 import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
 
 export const GraduateCard = ({ tokenId, graduateAddress }: { tokenId: bigint; graduateAddress: string }) => {
@@ -40,22 +40,18 @@ export const GraduateCard = ({ tokenId, graduateAddress }: { tokenId: bigint; gr
   }
 
   return (
-    <div className="card w-full bg-base-100 shadow-xl hover:shadow-2xl transition-all duration-300 hover:-translate-y-1 border border-base-300">
+    <div className="">
       <Link href={`/builders/${graduateAddress}`} className="w-full">
         <figure className="bg-base-200 cursor-pointer">
-          <img src={metadata.image} alt={metadata.name} className="rounded-t-xl shadow-lg w-full object-cover h-64" />
+          <Image src={metadata.image} alt={metadata.name} className="" />
         </figure>
       </Link>
       <div className="card-body items-center text-center pt-2.5">
         <Link href={`/builders/${graduateAddress}`} className="hover:underline cursor-pointer">
-          <h2 className="card-title text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary dark:text-white dark:bg-none">
-            {metadata.name}
+          <h2 className="card-title truncate text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-primary dark:text-white dark:bg-none">
+            {metadata.name.replaceAll("Graduate", "")}
           </h2>
         </Link>
-        <p className="text-sm text-gray-500 italic mb-2 mt-0">{metadata.description}</p>
-        <div className="w-full flex justify-center">
-          <Address address={graduateAddress} />
-        </div>
       </div>
     </div>
   );

packages/nextjs/app/hall-of-fame/page.tsx

@@ -1,19 +1,48 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import { GraduateCard } from "./_components/GraduateCard";
+import { parseAbiItem } from "viem";
+import { usePublicClient } from "wagmi";
 import { TrophyIcon } from "@heroicons/react/24/outline";
-import { useScaffoldEventHistory } from "~~/hooks/scaffold-eth";
+import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
 
 export default function HallOfFame() {
-  const { data: transferEvents, isLoading } = useScaffoldEventHistory({
-    contractName: "BatchGraduationNFT",
-    eventName: "Transfer",
-    fromBlock: 0n,
-    filters: { from: "0x0000000000000000000000000000000000000000" },
+  const { data: nftAddress } = useScaffoldReadContract({
+    contractName: "BatchRegistry",
+    functionName: "batchGraduationNFT",
   });
 
+  const publicClient = usePublicClient();
+  const [transferEvents, setTransferEvents] = useState<any[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchEvents = async () => {
+      if (!nftAddress || !publicClient) return;
+
+      setIsLoading(true);
+      try {
+        const logs = await publicClient.getLogs({
+          address: nftAddress,
+          event: parseAbiItem("event Transfer(address indexed from, address indexed to, uint256 indexed tokenId)"),
+          args: { from: "0x0000000000000000000000000000000000000000" },
+          fromBlock: 0n,
+          toBlock: "latest",
+        });
+        setTransferEvents(logs);
+      } catch (e) {
+        console.error(e);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchEvents();
+  }, [nftAddress, publicClient]);
+
   // I use this to sort events by tokenId (descending) to show newest graduates first
-  const sortedEvents = transferEvents?.slice().sort((a, b) => {
+  const sortedEvents = transferEvents?.slice().sort((a: any, b: any) => {
     const tokenIdA = a.args.tokenId || 0n;
     const tokenIdB = b.args.tokenId || 0n;
     return Number(tokenIdB - tokenIdA);
@@ -36,7 +65,7 @@ export default function HallOfFame() {
           <span className="loading loading-spinner loading-lg text-primary"></span>
         </div>
       ) : (
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 p-6 max-w-7xl w-full">
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-8 p-6 max-w-7xl w-full">
           {sortedEvents?.map((event: any) => (
             <GraduateCard
               key={event.args.tokenId?.toString()}