Fix #5 - checked in counter

packages/nextjs/app/builders/0xd1B41bE30F980315b8A6b754754aAa299C7abea2/page.tsx

@@ -1,15 +1,17 @@
+import Image from "next/image";
+import profileUrl from "./_assets/RolandTheFrank.jpg";
 import { GitHubIcon, LinkedInIcon, TwitterIcon, YouTubeIcon } from "./profileLinks";
 import type { NextPage } from "next";
 import { Address } from "~~/components/scaffold-eth";
 
-const profileUrl = "https://pbs.twimg.com/media/Ey8oK6gXMAUKrEX.jpg";
-
 const RolandTheFrank: NextPage = () => {
   return (
     <div className="flex items-center flex-col flex-grow pt-10">
       <div className="w-96 px-6 py-6  text-center bg-gray-800 rounded-lg lg:mt-0 xl:px-10">
         <div className="space-y-4 xl:space-y-6 pt-8">
-          <img className="mx-auto rounded-full h-36 w-36" src={profileUrl} alt="author avatar" />
+          <div className="mx-auto rounded-full h-36 w-36 overflow-hidden">
+            <Image alt="author avatar" width={144} height={144} src={profileUrl} className="object-cover" />
+          </div>
           <div className="space-y-2">
             <div className="flex justify-center items-center flex-col space-y-3 text-lg font-medium leading-6">
               <h3 className="text-amber-50">

packages/nextjs/app/builders/0xfb8b972b0D1cF9BB242A40F7AEA8E9a1bF89E0E3/page.tsx

@@ -1,8 +1,8 @@
 import React from "react";
 import Image from "next/image";
-import { NextPage } from "next"; 
+import { NextPage } from "next";
 
-const Zeze : NextPage = () => {
+const Zeze: NextPage = () => {
   return (
     <>
       <div className="basis-full md:basis-1/2 flex justify-center items-center h-screen">
@@ -52,4 +52,4 @@ const Zeze : NextPage = () => {
   );
 };
 
-export default Zeze
+export default Zeze;

packages/nextjs/app/page.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import Link from "next/link";
+import CheckedInCounter from "../components/CheckedInCounter";
 import type { NextPage } from "next";
 import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 
@@ -15,8 +16,7 @@ const Home: NextPage = () => {
           </h1>
           <p className="text-center text-lg">Get started by taking a look at your batch GitHub repository.</p>
           <p className="text-lg flex gap-2 justify-center">
-            <span className="font-bold">Checked in builders count:</span>
-            <span>To Be Implemented</span>
+            <CheckedInCounter />
           </p>
         </div>
 

packages/nextjs/components/CheckedInCounter.tsx

@@ -0,0 +1,34 @@
+import { useEffect, useState } from "react";
+import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
+
+const CheckInCount = () => {
+  const [feedback, setFeedback] = useState<string>("");
+  const [result, setResult] = useState<string>();
+
+  const {
+    data: checkedIn,
+    isLoading: checkInLoading,
+    error: checkInError,
+  } = useScaffoldReadContract({
+    contractName: "BatchRegistry",
+    functionName: "checkedInCounter",
+  });
+
+  useEffect(() => {
+    if (checkInError) {
+      setFeedback("Something went wrong");
+      console.error(checkInError);
+    } else {
+      setResult(checkInLoading ? "..." : String(Number(checkedIn)));
+    }
+  }, [checkInError, checkInLoading, checkedIn]);
+
+  return (
+    <>
+      <span className="font-bold">Checked in builders count: {result}</span>
+      {feedback && <p>{feedback}</p>}
+    </>
+  );
+};
+
+export default CheckInCount;