From 5ef31c3dd333e09865f98c1f640cb20a94d73d1e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Tom=C3=A9=20Fern=C3=A1ndez?=
 <danieltomefer@gmail.com>
Date: Sat, 14 Sep 2024 22:25:08 +0200
Subject: [PATCH 01/13] First version of template

---
 packages/nextjs/app/builders/page.tsx | 96 +++++++++++++++++++++++++++
 packages/nextjs/components/Header.tsx |  4 ++
 2 files changed, 100 insertions(+)
 create mode 100644 packages/nextjs/app/builders/page.tsx

diff --git a/packages/nextjs/app/builders/page.tsx b/packages/nextjs/app/builders/page.tsx
new file mode 100644
index 0000000..b3bbecc
--- /dev/null
+++ b/packages/nextjs/app/builders/page.tsx
@@ -0,0 +1,96 @@
+import type { NextPage } from "next";
+import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
+
+export const metadata = getMetadata({
+  title: "Builders",
+  description: "List of members of the batch #9",
+});
+
+const getRandomGender = () => {
+  return Math.random() < 0.5 ? "men" : "women";
+};
+
+const getRandomUserImage = () => {
+  const randomInt = Math.floor(Math.random() * 50);
+  const randomGender = getRandomGender();
+
+  return `https://randomuser.me/api/portraits/${randomGender}/${randomInt}.jpg`;
+};
+
+const mentors = [
+  { name: "Mentor 1", imgUrl: getRandomUserImage(), link: "/builders/0x000000" },
+  { name: "Mentor 2", imgUrl: getRandomUserImage(), link: "/builders/0x000000" },
+  { name: "Mentor 3", imgUrl: getRandomUserImage(), link: "/builders/0x000000" },
+];
+
+const builders = [
+  { name: "Builder 1", imgUrl: getRandomUserImage(), link: "/builders/0x000000", checkIn: true },
+  { name: "Builder 2", imgUrl: getRandomUserImage(), link: "/builders/0x000000", checkIn: false },
+  { name: "Builder 3", imgUrl: getRandomUserImage(), link: "/builders/0x000000", checkIn: true },
+  { name: "Builder 1", imgUrl: getRandomUserImage(), link: "/builders/0x000000", checkIn: true },
+  { name: "Builder 2", imgUrl: getRandomUserImage(), link: "/builders/0x000000", checkIn: false },
+  { name: "Builder 3", imgUrl: getRandomUserImage(), link: "/builders/0x000000", checkIn: true },
+  { name: "Builder 1", imgUrl: getRandomUserImage(), link: "/builders/0x000000", checkIn: true },
+  { name: "Builder 2", imgUrl: getRandomUserImage(), link: "/builders/0x000000", checkIn: false },
+  { name: "Builder 3", imgUrl: getRandomUserImage(), link: "/builders/0x000000", checkIn: true },
+];
+
+const Builders: NextPage = () => {
+  const totalBuilders = builders.length;
+  const buildersCheckedIn = builders.filter(builder => builder.checkIn).length;
+
+  return (
+    <>
+      <div className="text-center bg-secondary p-10">
+        <h1 className="text-4xl my-0">Builders</h1>
+      </div>
+      <div className="max-w-screen-lg mx-auto mt-10 p-6 bg-base-300 shadow-md rounded-lg">
+        <div className="container mx-auto px-4 py-8">
+          <h1 className="text-sm font-bold text-center mb-8">
+            Builders that checkedIn: {buildersCheckedIn} de {totalBuilders}
+          </h1>
+
+          <div className="mb-12">
+            <h2 className="text-2xl font-semibold text-center mb-6">Mentors</h2>
+            <div className="grid grid-cols-3 gap-6">
+              {mentors.map(mentor => (
+                <div key={mentor.name} className="text-center">
+                  <img className="w-24 h-24 rounded-full mx-auto" src={mentor.imgUrl} alt={mentor.name} />
+                  <a
+                    href={mentor.link}
+                    className="mt-2 block text-blue-600 hover:underline font-medium"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {mentor.name}
+                  </a>
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div>
+            <h2 className="text-2xl font-semibold text-center mb-6">Builders 🏗</h2>
+            <div className="grid grid-cols-6 gap-6">
+              {builders.map(builder => (
+                <div key={builder.name} className="text-center">
+                  <img className="w-24 h-24 rounded-full mx-auto" src={builder.imgUrl} alt={builder.name} />
+                  <a
+                    href={builder.link}
+                    className="mt-2 block text-blue-600 hover:underline font-medium"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {builder.name}
+                  </a>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default Builders;
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
index 58e9572..0e02123 100644
--- a/packages/nextjs/components/Header.tsx
+++ b/packages/nextjs/components/Header.tsx
@@ -19,6 +19,10 @@ export const menuLinks: HeaderMenuLink[] = [
     label: "Home",
     href: "/",
   },
+  {
+    label: "Builders",
+    href: "/builders",
+  },
   {
     label: "Debug Contracts",
     href: "/debug",

From 0f22fd48f14d1a26d19f8d9e571262c321691f9a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Tom=C3=A9=20Fern=C3=A1ndez?=
 <danieltomefer@gmail.com>
Date: Sat, 14 Sep 2024 22:34:44 +0200
Subject: [PATCH 02/13] Moved builders checked in

---
 packages/nextjs/app/builders/page.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/nextjs/app/builders/page.tsx b/packages/nextjs/app/builders/page.tsx
index b3bbecc..553bb3d 100644
--- a/packages/nextjs/app/builders/page.tsx
+++ b/packages/nextjs/app/builders/page.tsx
@@ -42,14 +42,11 @@ const Builders: NextPage = () => {
   return (
     <>
       <div className="text-center bg-secondary p-10">
-        <h1 className="text-4xl my-0">Builders</h1>
+        <h1 className="text-4xl my-0">Batch #9 people 💻 </h1>
       </div>
+
       <div className="max-w-screen-lg mx-auto mt-10 p-6 bg-base-300 shadow-md rounded-lg">
         <div className="container mx-auto px-4 py-8">
-          <h1 className="text-sm font-bold text-center mb-8">
-            Builders that checkedIn: {buildersCheckedIn} de {totalBuilders}
-          </h1>
-
           <div className="mb-12">
             <h2 className="text-2xl font-semibold text-center mb-6">Mentors</h2>
             <div className="grid grid-cols-3 gap-6">
@@ -71,7 +68,10 @@ const Builders: NextPage = () => {
 
           <div>
             <h2 className="text-2xl font-semibold text-center mb-6">Builders 🏗</h2>
-            <div className="grid grid-cols-6 gap-6">
+            <p className="text-sm font-bold text-center mb-8">
+              Builders that checkedIn: {buildersCheckedIn} de {totalBuilders}
+            </p>
+            <div className="grid grid-cols-5 gap-20">
               {builders.map(builder => (
                 <div key={builder.name} className="text-center">
                   <img className="w-24 h-24 rounded-full mx-auto" src={builder.imgUrl} alt={builder.name} />

From 70eeb0e5fc2cdaba26f86e957143b6e46d97966c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Tom=C3=A9=20Fern=C3=A1ndez?=
 <danieltomefer@gmail.com>
Date: Sat, 14 Sep 2024 23:07:58 +0200
Subject: [PATCH 03/13] Get builders from contract

---
 packages/nextjs/app/builders/page.tsx | 79 ++++++++++++++++-----------
 1 file changed, 48 insertions(+), 31 deletions(-)

diff --git a/packages/nextjs/app/builders/page.tsx b/packages/nextjs/app/builders/page.tsx
index 553bb3d..290a2f6 100644
--- a/packages/nextjs/app/builders/page.tsx
+++ b/packages/nextjs/app/builders/page.tsx
@@ -1,10 +1,7 @@
-import type { NextPage } from "next";
-import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
+"use client";
 
-export const metadata = getMetadata({
-  title: "Builders",
-  description: "List of members of the batch #9",
-});
+import type { NextPage } from "next";
+import { useScaffoldEventHistory } from "~~/hooks/scaffold-eth";
 
 const getRandomGender = () => {
   return Math.random() < 0.5 ? "men" : "women";
@@ -18,26 +15,48 @@ const getRandomUserImage = () => {
 };
 
 const mentors = [
-  { name: "Mentor 1", imgUrl: getRandomUserImage(), link: "/builders/0x000000" },
-  { name: "Mentor 2", imgUrl: getRandomUserImage(), link: "/builders/0x000000" },
-  { name: "Mentor 3", imgUrl: getRandomUserImage(), link: "/builders/0x000000" },
+  { name: "Eda", imgUrl: "https://avatars.githubusercontent.com/u/22100698?v=4", link: "/builders/0x000000" },
+  { name: "Derrek", imgUrl: "https://avatars.githubusercontent.com/u/80121818?v=4", link: "/builders/0x000000" },
+  { name: "Philip", imgUrl: "https://avatars.githubusercontent.com/u/90064316?v=4", link: "/builders/0x000000" },
 ];
 
-const builders = [
-  { name: "Builder 1", imgUrl: getRandomUserImage(), link: "/builders/0x000000", checkIn: true },
-  { name: "Builder 2", imgUrl: getRandomUserImage(), link: "/builders/0x000000", checkIn: false },
-  { name: "Builder 3", imgUrl: getRandomUserImage(), link: "/builders/0x000000", checkIn: true },
-  { name: "Builder 1", imgUrl: getRandomUserImage(), link: "/builders/0x000000", checkIn: true },
-  { name: "Builder 2", imgUrl: getRandomUserImage(), link: "/builders/0x000000", checkIn: false },
-  { name: "Builder 3", imgUrl: getRandomUserImage(), link: "/builders/0x000000", checkIn: true },
-  { name: "Builder 1", imgUrl: getRandomUserImage(), link: "/builders/0x000000", checkIn: true },
-  { name: "Builder 2", imgUrl: getRandomUserImage(), link: "/builders/0x000000", checkIn: false },
-  { name: "Builder 3", imgUrl: getRandomUserImage(), link: "/builders/0x000000", checkIn: true },
-];
+type Builder = {
+  image: string;
+  link: string;
+  checkedIn: boolean;
+};
+
+const getBuilderFromEvent = (event: any): Builder => {
+  const args = event.args;
+
+  const person: Builder = {
+    image: getRandomUserImage(),
+    link: "builders/" + args.builder,
+    checkedIn: true,
+  };
+
+  return person;
+};
 
 const Builders: NextPage = () => {
-  const totalBuilders = builders.length;
-  const buildersCheckedIn = builders.filter(builder => builder.checkIn).length;
+  const { data: events } = useScaffoldEventHistory({
+    contractName: "BatchRegistry",
+    eventName: "CheckedIn",
+    fromBlock: 31231n,
+    watch: true,
+    filters: { first: true } as any,
+    blockData: true,
+    transactionData: true,
+    receiptData: true,
+  });
+
+  let buildersCheckedIn = 0;
+  let builders: Builder[] = [];
+
+  if (events != undefined) {
+    buildersCheckedIn = events.length;
+    builders = events.map(e => getBuilderFromEvent(e));
+  }
 
   return (
     <>
@@ -50,8 +69,8 @@ const Builders: NextPage = () => {
           <div className="mb-12">
             <h2 className="text-2xl font-semibold text-center mb-6">Mentors</h2>
             <div className="grid grid-cols-3 gap-6">
-              {mentors.map(mentor => (
-                <div key={mentor.name} className="text-center">
+              {mentors.map((mentor, i) => (
+                <div key={i} className="text-center">
                   <img className="w-24 h-24 rounded-full mx-auto" src={mentor.imgUrl} alt={mentor.name} />
                   <a
                     href={mentor.link}
@@ -68,20 +87,18 @@ const Builders: NextPage = () => {
 
           <div>
             <h2 className="text-2xl font-semibold text-center mb-6">Builders 🏗</h2>
-            <p className="text-sm font-bold text-center mb-8">
-              Builders that checkedIn: {buildersCheckedIn} de {totalBuilders}
-            </p>
+            <p className="text-sm font-bold text-center mb-8">Builders that checkedIn: {buildersCheckedIn}</p>
             <div className="grid grid-cols-5 gap-20">
-              {builders.map(builder => (
-                <div key={builder.name} className="text-center">
-                  <img className="w-24 h-24 rounded-full mx-auto" src={builder.imgUrl} alt={builder.name} />
+              {builders.map((builder, i) => (
+                <div key={i} className="text-center">
                   <a
                     href={builder.link}
                     className="mt-2 block text-blue-600 hover:underline font-medium"
                     target="_blank"
                     rel="noopener noreferrer"
                   >
-                    {builder.name}
+                    <img className="w-24 h-24 rounded-full mx-auto" src={builder.image} alt={builder.link} />
+                    See profile
                   </a>
                 </div>
               ))}

From c97cf7af931cca89797b1a6ab5e988251518ead8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Tom=C3=A9=20Fern=C3=A1ndez?=
 <danieltomefer@gmail.com>
Date: Sat, 14 Sep 2024 23:14:33 +0200
Subject: [PATCH 04/13] Swap into next Image component from <img/>

---
 packages/nextjs/app/builders/page.tsx | 17 +++++++++++++++--
 packages/nextjs/next.config.js        | 16 ++++++++++++++++
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/packages/nextjs/app/builders/page.tsx b/packages/nextjs/app/builders/page.tsx
index 290a2f6..a34b829 100644
--- a/packages/nextjs/app/builders/page.tsx
+++ b/packages/nextjs/app/builders/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import Image from "next/image";
 import type { NextPage } from "next";
 import { useScaffoldEventHistory } from "~~/hooks/scaffold-eth";
 
@@ -71,7 +72,13 @@ const Builders: NextPage = () => {
             <div className="grid grid-cols-3 gap-6">
               {mentors.map((mentor, i) => (
                 <div key={i} className="text-center">
-                  <img className="w-24 h-24 rounded-full mx-auto" src={mentor.imgUrl} alt={mentor.name} />
+                  <Image
+                    width={100}
+                    height={100}
+                    className="w-24 h-24 rounded-full mx-auto"
+                    src={mentor.imgUrl}
+                    alt={mentor.name}
+                  />
                   <a
                     href={mentor.link}
                     className="mt-2 block text-blue-600 hover:underline font-medium"
@@ -97,7 +104,13 @@ const Builders: NextPage = () => {
                     target="_blank"
                     rel="noopener noreferrer"
                   >
-                    <img className="w-24 h-24 rounded-full mx-auto" src={builder.image} alt={builder.link} />
+                    <Image
+                      width={100}
+                      height={100}
+                      className="w-24 h-24 rounded-full mx-auto"
+                      src={builder.image}
+                      alt={builder.link}
+                    />
                     See profile
                   </a>
                 </div>
diff --git a/packages/nextjs/next.config.js b/packages/nextjs/next.config.js
index d765869..c58f41d 100644
--- a/packages/nextjs/next.config.js
+++ b/packages/nextjs/next.config.js
@@ -14,6 +14,22 @@ const nextConfig = {
     config.externals.push("pino-pretty", "lokijs", "encoding");
     return config;
   },
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'avatars.githubusercontent.com',
+        port: '',
+        pathname: '/u/**',
+      },
+      {
+        protocol: 'https',
+        hostname: 'randomuser.me',
+        port: '',
+        pathname: '/api/portraits/**',
+      }
+    ],
+  },
 };
 
 module.exports = nextConfig;

From f0374123610d1dd5eac7f3f04dc7648bbe847f96 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Tom=C3=A9=20Fern=C3=A1ndez?=
 <danieltomefer@gmail.com>
Date: Sun, 15 Sep 2024 08:46:20 +0200
Subject: [PATCH 05/13] Splitted code into smaller components

---
 .../builders/_components/ProfilePicture.tsx   | 29 ++++++++
 packages/nextjs/app/builders/page.tsx         | 69 +++++++------------
 packages/nextjs/types/builders.ts             |  6 ++
 3 files changed, 58 insertions(+), 46 deletions(-)
 create mode 100644 packages/nextjs/app/builders/_components/ProfilePicture.tsx
 create mode 100644 packages/nextjs/types/builders.ts

diff --git a/packages/nextjs/app/builders/_components/ProfilePicture.tsx b/packages/nextjs/app/builders/_components/ProfilePicture.tsx
new file mode 100644
index 0000000..e32ebd0
--- /dev/null
+++ b/packages/nextjs/app/builders/_components/ProfilePicture.tsx
@@ -0,0 +1,29 @@
+import Image from "next/image";
+import { Builder } from "~~/types/builders";
+
+type ProfilePictureProps = {
+  builder: Builder;
+  key: number;
+};
+
+export const ProfilePicture = ({ builder, key }: ProfilePictureProps) => {
+  return (
+    <div key={key} className="text-center">
+      <a
+        href={builder.link}
+        className="mt-2 block text-blue-600 hover:underline font-medium"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <Image
+          width={100}
+          height={100}
+          className="w-24 h-24 rounded-full mx-auto"
+          src={builder.image}
+          alt={builder.link}
+        />
+        See profile
+      </a>
+    </div>
+  );
+};
diff --git a/packages/nextjs/app/builders/page.tsx b/packages/nextjs/app/builders/page.tsx
index a34b829..ded803b 100644
--- a/packages/nextjs/app/builders/page.tsx
+++ b/packages/nextjs/app/builders/page.tsx
@@ -1,8 +1,9 @@
 "use client";
 
-import Image from "next/image";
+import { ProfilePicture } from "./_components/ProfilePicture";
 import type { NextPage } from "next";
 import { useScaffoldEventHistory } from "~~/hooks/scaffold-eth";
+import { Builder } from "~~/types/builders";
 
 const getRandomGender = () => {
   return Math.random() < 0.5 ? "men" : "women";
@@ -15,18 +16,27 @@ const getRandomUserImage = () => {
   return `https://randomuser.me/api/portraits/${randomGender}/${randomInt}.jpg`;
 };
 
-const mentors = [
-  { name: "Eda", imgUrl: "https://avatars.githubusercontent.com/u/22100698?v=4", link: "/builders/0x000000" },
-  { name: "Derrek", imgUrl: "https://avatars.githubusercontent.com/u/80121818?v=4", link: "/builders/0x000000" },
-  { name: "Philip", imgUrl: "https://avatars.githubusercontent.com/u/90064316?v=4", link: "/builders/0x000000" },
+const mentors: Builder[] = [
+  {
+    name: "Eda",
+    image: "https://avatars.githubusercontent.com/u/22100698?v=4",
+    link: "/builders/0x000000",
+    checkedIn: false,
+  },
+  {
+    name: "Derrek",
+    image: "https://avatars.githubusercontent.com/u/80121818?v=4",
+    link: "/builders/0x000000",
+    checkedIn: false,
+  },
+  {
+    name: "Philip",
+    image: "https://avatars.githubusercontent.com/u/90064316?v=4",
+    link: "/builders/0x000000",
+    checkedIn: false,
+  },
 ];
 
-type Builder = {
-  image: string;
-  link: string;
-  checkedIn: boolean;
-};
-
 const getBuilderFromEvent = (event: any): Builder => {
   const args = event.args;
 
@@ -64,30 +74,13 @@ const Builders: NextPage = () => {
       <div className="text-center bg-secondary p-10">
         <h1 className="text-4xl my-0">Batch #9 people 💻 </h1>
       </div>
-
       <div className="max-w-screen-lg mx-auto mt-10 p-6 bg-base-300 shadow-md rounded-lg">
         <div className="container mx-auto px-4 py-8">
           <div className="mb-12">
             <h2 className="text-2xl font-semibold text-center mb-6">Mentors</h2>
             <div className="grid grid-cols-3 gap-6">
               {mentors.map((mentor, i) => (
-                <div key={i} className="text-center">
-                  <Image
-                    width={100}
-                    height={100}
-                    className="w-24 h-24 rounded-full mx-auto"
-                    src={mentor.imgUrl}
-                    alt={mentor.name}
-                  />
-                  <a
-                    href={mentor.link}
-                    className="mt-2 block text-blue-600 hover:underline font-medium"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    {mentor.name}
-                  </a>
-                </div>
+                <ProfilePicture builder={mentor} key={i} />
               ))}
             </div>
           </div>
@@ -97,23 +90,7 @@ const Builders: NextPage = () => {
             <p className="text-sm font-bold text-center mb-8">Builders that checkedIn: {buildersCheckedIn}</p>
             <div className="grid grid-cols-5 gap-20">
               {builders.map((builder, i) => (
-                <div key={i} className="text-center">
-                  <a
-                    href={builder.link}
-                    className="mt-2 block text-blue-600 hover:underline font-medium"
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  >
-                    <Image
-                      width={100}
-                      height={100}
-                      className="w-24 h-24 rounded-full mx-auto"
-                      src={builder.image}
-                      alt={builder.link}
-                    />
-                    See profile
-                  </a>
-                </div>
+                <ProfilePicture builder={builder} key={i} />
               ))}
             </div>
           </div>
diff --git a/packages/nextjs/types/builders.ts b/packages/nextjs/types/builders.ts
new file mode 100644
index 0000000..43d6fc6
--- /dev/null
+++ b/packages/nextjs/types/builders.ts
@@ -0,0 +1,6 @@
+export type Builder = {
+  name?: string;
+  image: string;
+  link: string;
+  checkedIn: boolean;
+};

From 0f672b420de1b09d469bc8c9ddda2331a59fdf83 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Tom=C3=A9=20Fern=C3=A1ndez?=
 <danieltomefer@gmail.com>
Date: Sun, 15 Sep 2024 09:00:40 +0200
Subject: [PATCH 06/13] Splitted code into even smaller components

---
 ...{ProfilePicture.tsx => BuilderPicture.tsx} | 15 +++-----
 .../builders/_components/MentorPicture.tsx    | 24 +++++++++++++
 .../nextjs/app/builders/_components/index.tsx |  2 ++
 packages/nextjs/app/builders/page.tsx         | 34 +++++++++----------
 packages/nextjs/types/builders.ts             |  5 ++-
 5 files changed, 52 insertions(+), 28 deletions(-)
 rename packages/nextjs/app/builders/_components/{ProfilePicture.tsx => BuilderPicture.tsx} (51%)
 create mode 100644 packages/nextjs/app/builders/_components/MentorPicture.tsx
 create mode 100644 packages/nextjs/app/builders/_components/index.tsx

diff --git a/packages/nextjs/app/builders/_components/ProfilePicture.tsx b/packages/nextjs/app/builders/_components/BuilderPicture.tsx
similarity index 51%
rename from packages/nextjs/app/builders/_components/ProfilePicture.tsx
rename to packages/nextjs/app/builders/_components/BuilderPicture.tsx
index e32ebd0..af17c30 100644
--- a/packages/nextjs/app/builders/_components/ProfilePicture.tsx
+++ b/packages/nextjs/app/builders/_components/BuilderPicture.tsx
@@ -2,25 +2,20 @@ import Image from "next/image";
 import { Builder } from "~~/types/builders";
 
 type ProfilePictureProps = {
-  builder: Builder;
+  person: Builder;
   key: number;
 };
 
-export const ProfilePicture = ({ builder, key }: ProfilePictureProps) => {
+export const BuilderPicture = ({ person, key }: ProfilePictureProps) => {
   return (
     <div key={key} className="text-center">
-      <a
-        href={builder.link}
-        className="mt-2 block text-blue-600 hover:underline font-medium"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
+      <a href={person.link} className="link" target="_blank" rel="noopener noreferrer">
         <Image
           width={100}
           height={100}
           className="w-24 h-24 rounded-full mx-auto"
-          src={builder.image}
-          alt={builder.link}
+          src={person.image}
+          alt={person.link}
         />
         See profile
       </a>
diff --git a/packages/nextjs/app/builders/_components/MentorPicture.tsx b/packages/nextjs/app/builders/_components/MentorPicture.tsx
new file mode 100644
index 0000000..da69bb5
--- /dev/null
+++ b/packages/nextjs/app/builders/_components/MentorPicture.tsx
@@ -0,0 +1,24 @@
+import Image from "next/image";
+import { Mentor } from "~~/types/builders";
+
+type ProfilePictureProps = {
+  person: Mentor;
+  key: number;
+};
+
+export const MentorPicture = ({ person, key }: ProfilePictureProps) => {
+  return (
+    <div key={key} className="text-center">
+      <a href={person.link} className="link" target="_blank" rel="noopener noreferrer">
+        <Image
+          width={100}
+          height={100}
+          className="w-24 h-24 rounded-full mx-auto"
+          src={person.image}
+          alt={person.link}
+        />
+        {person.name}
+      </a>
+    </div>
+  );
+};
diff --git a/packages/nextjs/app/builders/_components/index.tsx b/packages/nextjs/app/builders/_components/index.tsx
new file mode 100644
index 0000000..d1d0239
--- /dev/null
+++ b/packages/nextjs/app/builders/_components/index.tsx
@@ -0,0 +1,2 @@
+export * from "./MentorPicture";
+export * from "./BuilderPicture";
diff --git a/packages/nextjs/app/builders/page.tsx b/packages/nextjs/app/builders/page.tsx
index ded803b..7e12f18 100644
--- a/packages/nextjs/app/builders/page.tsx
+++ b/packages/nextjs/app/builders/page.tsx
@@ -1,9 +1,9 @@
 "use client";
 
-import { ProfilePicture } from "./_components/ProfilePicture";
+import { BuilderPicture, MentorPicture } from "./_components/index";
 import type { NextPage } from "next";
 import { useScaffoldEventHistory } from "~~/hooks/scaffold-eth";
-import { Builder } from "~~/types/builders";
+import { Builder, Mentor } from "~~/types/builders";
 
 const getRandomGender = () => {
   return Math.random() < 0.5 ? "men" : "women";
@@ -16,7 +16,19 @@ const getRandomUserImage = () => {
   return `https://randomuser.me/api/portraits/${randomGender}/${randomInt}.jpg`;
 };
 
-const mentors: Builder[] = [
+const getBuilderFromEvent = (event: any): Builder => {
+  const args = event.args;
+
+  const person: Builder = {
+    image: getRandomUserImage(),
+    link: "builders/" + args.builder,
+    checkedIn: true,
+  };
+
+  return person;
+};
+
+const mentors: Mentor[] = [
   {
     name: "Eda",
     image: "https://avatars.githubusercontent.com/u/22100698?v=4",
@@ -37,18 +49,6 @@ const mentors: Builder[] = [
   },
 ];
 
-const getBuilderFromEvent = (event: any): Builder => {
-  const args = event.args;
-
-  const person: Builder = {
-    image: getRandomUserImage(),
-    link: "builders/" + args.builder,
-    checkedIn: true,
-  };
-
-  return person;
-};
-
 const Builders: NextPage = () => {
   const { data: events } = useScaffoldEventHistory({
     contractName: "BatchRegistry",
@@ -80,7 +80,7 @@ const Builders: NextPage = () => {
             <h2 className="text-2xl font-semibold text-center mb-6">Mentors</h2>
             <div className="grid grid-cols-3 gap-6">
               {mentors.map((mentor, i) => (
-                <ProfilePicture builder={mentor} key={i} />
+                <MentorPicture person={mentor} key={i} />
               ))}
             </div>
           </div>
@@ -90,7 +90,7 @@ const Builders: NextPage = () => {
             <p className="text-sm font-bold text-center mb-8">Builders that checkedIn: {buildersCheckedIn}</p>
             <div className="grid grid-cols-5 gap-20">
               {builders.map((builder, i) => (
-                <ProfilePicture builder={builder} key={i} />
+                <BuilderPicture person={builder} key={i} />
               ))}
             </div>
           </div>
diff --git a/packages/nextjs/types/builders.ts b/packages/nextjs/types/builders.ts
index 43d6fc6..ed147c7 100644
--- a/packages/nextjs/types/builders.ts
+++ b/packages/nextjs/types/builders.ts
@@ -1,6 +1,9 @@
 export type Builder = {
-  name?: string;
   image: string;
   link: string;
   checkedIn: boolean;
 };
+
+export type Mentor = Builder & {
+  name: string;
+};

From e0623c9f7c61f8f792b8d19021d1dd9f603624f6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Tom=C3=A9=20Fern=C3=A1ndez?=
 <danieltomefer@gmail.com>
Date: Sun, 15 Sep 2024 09:06:24 +0200
Subject: [PATCH 07/13] Removed some log error with div and key prop

---
 packages/nextjs/app/builders/_components/BuilderPicture.tsx | 5 ++---
 packages/nextjs/app/builders/_components/MentorPicture.tsx  | 5 ++---
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/nextjs/app/builders/_components/BuilderPicture.tsx b/packages/nextjs/app/builders/_components/BuilderPicture.tsx
index af17c30..24fc357 100644
--- a/packages/nextjs/app/builders/_components/BuilderPicture.tsx
+++ b/packages/nextjs/app/builders/_components/BuilderPicture.tsx
@@ -3,12 +3,11 @@ import { Builder } from "~~/types/builders";
 
 type ProfilePictureProps = {
   person: Builder;
-  key: number;
 };
 
-export const BuilderPicture = ({ person, key }: ProfilePictureProps) => {
+export const BuilderPicture = ({ person }: ProfilePictureProps) => {
   return (
-    <div key={key} className="text-center">
+    <div className="text-center">
       <a href={person.link} className="link" target="_blank" rel="noopener noreferrer">
         <Image
           width={100}
diff --git a/packages/nextjs/app/builders/_components/MentorPicture.tsx b/packages/nextjs/app/builders/_components/MentorPicture.tsx
index da69bb5..eee8d46 100644
--- a/packages/nextjs/app/builders/_components/MentorPicture.tsx
+++ b/packages/nextjs/app/builders/_components/MentorPicture.tsx
@@ -3,12 +3,11 @@ import { Mentor } from "~~/types/builders";
 
 type ProfilePictureProps = {
   person: Mentor;
-  key: number;
 };
 
-export const MentorPicture = ({ person, key }: ProfilePictureProps) => {
+export const MentorPicture = ({ person }: ProfilePictureProps) => {
   return (
-    <div key={key} className="text-center">
+    <div className="text-center">
       <a href={person.link} className="link" target="_blank" rel="noopener noreferrer">
         <Image
           width={100}

From 19645498417347ec70b1251f3e1d3b5ae9513de6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Tom=C3=A9=20Fern=C3=A1ndez?=
 <danieltomefer@gmail.com>
Date: Sun, 15 Sep 2024 09:16:07 +0200
Subject: [PATCH 08/13] Refactored code to use useState and useEffect

---
 packages/nextjs/app/builders/page.tsx | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/packages/nextjs/app/builders/page.tsx b/packages/nextjs/app/builders/page.tsx
index 7e12f18..a711fd4 100644
--- a/packages/nextjs/app/builders/page.tsx
+++ b/packages/nextjs/app/builders/page.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import { BuilderPicture, MentorPicture } from "./_components/index";
 import type { NextPage } from "next";
 import { useScaffoldEventHistory } from "~~/hooks/scaffold-eth";
@@ -50,7 +51,10 @@ const mentors: Mentor[] = [
 ];
 
 const Builders: NextPage = () => {
-  const { data: events } = useScaffoldEventHistory({
+  const [buildersCheckedIn, setBuildersCheckedIn] = useState(0);
+  const [builders, setBuilders] = useState<Builder[]>([]);
+
+  const { data: events, isLoading: isLoadingEvents } = useScaffoldEventHistory({
     contractName: "BatchRegistry",
     eventName: "CheckedIn",
     fromBlock: 31231n,
@@ -61,13 +65,12 @@ const Builders: NextPage = () => {
     receiptData: true,
   });
 
-  let buildersCheckedIn = 0;
-  let builders: Builder[] = [];
-
-  if (events != undefined) {
-    buildersCheckedIn = events.length;
-    builders = events.map(e => getBuilderFromEvent(e));
-  }
+  useEffect(() => {
+    if (!isLoadingEvents && events != undefined) {
+      setBuildersCheckedIn(events.length);
+      setBuilders(events.map(e => getBuilderFromEvent(e)));
+    }
+  }, [isLoadingEvents, events]);
 
   return (
     <>

From 38ce76788d18b55dd0a056a002c4b31de72f7c1c Mon Sep 17 00:00:00 2001
From: danieltomefernandez <danieltomefer@gmail.com>
Date: Wed, 18 Sep 2024 21:34:25 +0200
Subject: [PATCH 09/13] Refactor code

---
 packages/nextjs/app/builders/page.tsx | 16 +++++-----------
 1 file changed, 5 insertions(+), 11 deletions(-)

diff --git a/packages/nextjs/app/builders/page.tsx b/packages/nextjs/app/builders/page.tsx
index a711fd4..6fd49db 100644
--- a/packages/nextjs/app/builders/page.tsx
+++ b/packages/nextjs/app/builders/page.tsx
@@ -17,17 +17,11 @@ const getRandomUserImage = () => {
   return `https://randomuser.me/api/portraits/${randomGender}/${randomInt}.jpg`;
 };
 
-const getBuilderFromEvent = (event: any): Builder => {
-  const args = event.args;
-
-  const person: Builder = {
-    image: getRandomUserImage(),
-    link: "builders/" + args.builder,
-    checkedIn: true,
-  };
-
-  return person;
-};
+const getBuilderFromEvent = (event: any): Builder => ({
+  image: getRandomUserImage(),
+  link: "builders/" + event.args.builder,
+  checkedIn: true,
+});
 
 const mentors: Mentor[] = [
   {

From 55527058e944583df202fc38e0d28a26cfa2159b Mon Sep 17 00:00:00 2001
From: danieltomefernandez <danieltomefer@gmail.com>
Date: Wed, 18 Sep 2024 21:50:02 +0200
Subject: [PATCH 10/13] Added Link Component and github links for mentors

---
 packages/nextjs/app/builders/_components/BuilderPicture.tsx | 5 +++--
 packages/nextjs/app/builders/_components/MentorPicture.tsx  | 5 +++--
 packages/nextjs/app/builders/page.tsx                       | 6 +++---
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/packages/nextjs/app/builders/_components/BuilderPicture.tsx b/packages/nextjs/app/builders/_components/BuilderPicture.tsx
index 24fc357..5aa93ba 100644
--- a/packages/nextjs/app/builders/_components/BuilderPicture.tsx
+++ b/packages/nextjs/app/builders/_components/BuilderPicture.tsx
@@ -1,5 +1,6 @@
 import Image from "next/image";
 import { Builder } from "~~/types/builders";
+import Link from 'next/link';
 
 type ProfilePictureProps = {
   person: Builder;
@@ -8,7 +9,7 @@ type ProfilePictureProps = {
 export const BuilderPicture = ({ person }: ProfilePictureProps) => {
   return (
     <div className="text-center">
-      <a href={person.link} className="link" target="_blank" rel="noopener noreferrer">
+      <Link href={person.link} className="link" rel="noopener noreferrer">
         <Image
           width={100}
           height={100}
@@ -17,7 +18,7 @@ export const BuilderPicture = ({ person }: ProfilePictureProps) => {
           alt={person.link}
         />
         See profile
-      </a>
+      </Link>
     </div>
   );
 };
diff --git a/packages/nextjs/app/builders/_components/MentorPicture.tsx b/packages/nextjs/app/builders/_components/MentorPicture.tsx
index eee8d46..2755f5d 100644
--- a/packages/nextjs/app/builders/_components/MentorPicture.tsx
+++ b/packages/nextjs/app/builders/_components/MentorPicture.tsx
@@ -1,5 +1,6 @@
 import Image from "next/image";
 import { Mentor } from "~~/types/builders";
+import Link from 'next/link';
 
 type ProfilePictureProps = {
   person: Mentor;
@@ -8,7 +9,7 @@ type ProfilePictureProps = {
 export const MentorPicture = ({ person }: ProfilePictureProps) => {
   return (
     <div className="text-center">
-      <a href={person.link} className="link" target="_blank" rel="noopener noreferrer">
+      <Link href={person.link} className="link" target="_blank" rel="noopener noreferrer">
         <Image
           width={100}
           height={100}
@@ -17,7 +18,7 @@ export const MentorPicture = ({ person }: ProfilePictureProps) => {
           alt={person.link}
         />
         {person.name}
-      </a>
+      </Link>
     </div>
   );
 };
diff --git a/packages/nextjs/app/builders/page.tsx b/packages/nextjs/app/builders/page.tsx
index 6fd49db..2a8b11b 100644
--- a/packages/nextjs/app/builders/page.tsx
+++ b/packages/nextjs/app/builders/page.tsx
@@ -27,19 +27,19 @@ const mentors: Mentor[] = [
   {
     name: "Eda",
     image: "https://avatars.githubusercontent.com/u/22100698?v=4",
-    link: "/builders/0x000000",
+    link: "https://github.com/edakturk14",
     checkedIn: false,
   },
   {
     name: "Derrek",
     image: "https://avatars.githubusercontent.com/u/80121818?v=4",
-    link: "/builders/0x000000",
+    link: "https://github.com/derrekcoleman",
     checkedIn: false,
   },
   {
     name: "Philip",
     image: "https://avatars.githubusercontent.com/u/90064316?v=4",
-    link: "/builders/0x000000",
+    link: "https://github.com/phipsae",
     checkedIn: false,
   },
 ];

From d564a5539bf8d917c91e2e37d3f1f5ad42a2edc0 Mon Sep 17 00:00:00 2001
From: danieltomefernandez <danieltomefer@gmail.com>
Date: Wed, 18 Sep 2024 22:23:35 +0200
Subject: [PATCH 11/13] Removed lint issues

---
 packages/nextjs/app/builders/_components/BuilderPicture.tsx | 2 +-
 packages/nextjs/app/builders/_components/MentorPicture.tsx  | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/nextjs/app/builders/_components/BuilderPicture.tsx b/packages/nextjs/app/builders/_components/BuilderPicture.tsx
index 5aa93ba..3ebe0cc 100644
--- a/packages/nextjs/app/builders/_components/BuilderPicture.tsx
+++ b/packages/nextjs/app/builders/_components/BuilderPicture.tsx
@@ -1,6 +1,6 @@
 import Image from "next/image";
+import Link from "next/link";
 import { Builder } from "~~/types/builders";
-import Link from 'next/link';
 
 type ProfilePictureProps = {
   person: Builder;
diff --git a/packages/nextjs/app/builders/_components/MentorPicture.tsx b/packages/nextjs/app/builders/_components/MentorPicture.tsx
index 2755f5d..ce3fd9f 100644
--- a/packages/nextjs/app/builders/_components/MentorPicture.tsx
+++ b/packages/nextjs/app/builders/_components/MentorPicture.tsx
@@ -1,6 +1,6 @@
 import Image from "next/image";
+import Link from "next/link";
 import { Mentor } from "~~/types/builders";
-import Link from 'next/link';
 
 type ProfilePictureProps = {
   person: Mentor;

From a36c63ca797b37348e39727b29962da0fc69b292 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Daniel=20Tom=C3=A9=20Fern=C3=A1ndez?=
 <danieltomefer@gmail.com>
Date: Fri, 20 Sep 2024 00:48:14 +0200
Subject: [PATCH 12/13] Used blockieAvatar for user profiles images

---
 .../app/builders/_components/BuilderPicture.tsx      | 12 +++---------
 .../app/builders/_components/MentorPicture.tsx       |  4 ++--
 packages/nextjs/app/builders/page.tsx                | 10 ++++++----
 packages/nextjs/types/builders.ts                    |  3 ++-
 4 files changed, 13 insertions(+), 16 deletions(-)

diff --git a/packages/nextjs/app/builders/_components/BuilderPicture.tsx b/packages/nextjs/app/builders/_components/BuilderPicture.tsx
index 3ebe0cc..efddc65 100644
--- a/packages/nextjs/app/builders/_components/BuilderPicture.tsx
+++ b/packages/nextjs/app/builders/_components/BuilderPicture.tsx
@@ -1,5 +1,5 @@
-import Image from "next/image";
 import Link from "next/link";
+import { BlockieAvatar } from "~~/components/scaffold-eth";
 import { Builder } from "~~/types/builders";
 
 type ProfilePictureProps = {
@@ -9,14 +9,8 @@ type ProfilePictureProps = {
 export const BuilderPicture = ({ person }: ProfilePictureProps) => {
   return (
     <div className="text-center">
-      <Link href={person.link} className="link" rel="noopener noreferrer">
-        <Image
-          width={100}
-          height={100}
-          className="w-24 h-24 rounded-full mx-auto"
-          src={person.image}
-          alt={person.link}
-        />
+      <Link href={person.profileLink} className="link" rel="noopener noreferrer">
+        <BlockieAvatar address={person.address as `0x${string}`} size={100} />
         See profile
       </Link>
     </div>
diff --git a/packages/nextjs/app/builders/_components/MentorPicture.tsx b/packages/nextjs/app/builders/_components/MentorPicture.tsx
index ce3fd9f..48ac47a 100644
--- a/packages/nextjs/app/builders/_components/MentorPicture.tsx
+++ b/packages/nextjs/app/builders/_components/MentorPicture.tsx
@@ -9,13 +9,13 @@ type ProfilePictureProps = {
 export const MentorPicture = ({ person }: ProfilePictureProps) => {
   return (
     <div className="text-center">
-      <Link href={person.link} className="link" target="_blank" rel="noopener noreferrer">
+      <Link href={person.profileLink} className="link" target="_blank" rel="noopener noreferrer">
         <Image
           width={100}
           height={100}
           className="w-24 h-24 rounded-full mx-auto"
           src={person.image}
-          alt={person.link}
+          alt={person.profileLink}
         />
         {person.name}
       </Link>
diff --git a/packages/nextjs/app/builders/page.tsx b/packages/nextjs/app/builders/page.tsx
index 2a8b11b..6b88036 100644
--- a/packages/nextjs/app/builders/page.tsx
+++ b/packages/nextjs/app/builders/page.tsx
@@ -19,7 +19,8 @@ const getRandomUserImage = () => {
 
 const getBuilderFromEvent = (event: any): Builder => ({
   image: getRandomUserImage(),
-  link: "builders/" + event.args.builder,
+  profileLink: "builders/" + event.args.builder,
+  address: event.args.builder,
   checkedIn: true,
 });
 
@@ -27,19 +28,20 @@ const mentors: Mentor[] = [
   {
     name: "Eda",
     image: "https://avatars.githubusercontent.com/u/22100698?v=4",
-    link: "https://github.com/edakturk14",
+    profileLink: "https://github.com/edakturk14",
     checkedIn: false,
   },
   {
     name: "Derrek",
     image: "https://avatars.githubusercontent.com/u/80121818?v=4",
-    link: "https://github.com/derrekcoleman",
+    profileLink: "https://github.com/derrekcoleman",
+
     checkedIn: false,
   },
   {
     name: "Philip",
     image: "https://avatars.githubusercontent.com/u/90064316?v=4",
-    link: "https://github.com/phipsae",
+    profileLink: "https://github.com/phipsae",
     checkedIn: false,
   },
 ];
diff --git a/packages/nextjs/types/builders.ts b/packages/nextjs/types/builders.ts
index ed147c7..bf52477 100644
--- a/packages/nextjs/types/builders.ts
+++ b/packages/nextjs/types/builders.ts
@@ -1,6 +1,7 @@
 export type Builder = {
   image: string;
-  link: string;
+  profileLink: string;
+  address?: `0x${string}`;
   checkedIn: boolean;
 };
 

From 7a3975a320f0bc47887f37cfdea349d34b647972 Mon Sep 17 00:00:00 2001
From: Styles <kartik100100@gmail.com>
Date: Sat, 21 Sep 2024 02:42:02 +0530
Subject: [PATCH 13/13] improvements on existing layout

- ens avatar is displayed whenever it exists
- user address is displayed below the avatar for identification
- filtered duplicate builder entries before rendering
---
 .../builders/_components/BuilderPicture.tsx   | 49 +++++++++++++++++--
 packages/nextjs/app/builders/page.tsx         |  2 +-
 2 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/packages/nextjs/app/builders/_components/BuilderPicture.tsx b/packages/nextjs/app/builders/_components/BuilderPicture.tsx
index efddc65..1bc63f7 100644
--- a/packages/nextjs/app/builders/_components/BuilderPicture.tsx
+++ b/packages/nextjs/app/builders/_components/BuilderPicture.tsx
@@ -1,5 +1,11 @@
+"use client";
+
+import { useEffect, useState } from "react";
 import Link from "next/link";
-import { BlockieAvatar } from "~~/components/scaffold-eth";
+import { getAddress, isAddress } from "viem";
+import { normalize } from "viem/ens";
+import { useEnsAvatar, useEnsName } from "wagmi";
+import { Address, BlockieAvatar } from "~~/components/scaffold-eth";
 import { Builder } from "~~/types/builders";
 
 type ProfilePictureProps = {
@@ -7,12 +13,45 @@ type ProfilePictureProps = {
 };
 
 export const BuilderPicture = ({ person }: ProfilePictureProps) => {
+  const [ensAvatar, setEnsAvatar] = useState<string | null>();
+  const checkSumAddress = person.address ? getAddress(person.address) : undefined;
+
+  const { data: fetchedEns } = useEnsName({
+    address: checkSumAddress,
+    chainId: 1,
+    query: {
+      enabled: isAddress(checkSumAddress ?? ""),
+    },
+  });
+
+  const { data: fetchedEnsAvatar } = useEnsAvatar({
+    name: fetchedEns ? normalize(fetchedEns) : undefined,
+    chainId: 1,
+    query: {
+      enabled: Boolean(fetchedEns),
+      gcTime: 30_000,
+    },
+  });
+
+  useEffect(() => {
+    setEnsAvatar(fetchedEnsAvatar);
+  }, [fetchedEnsAvatar]);
+
   return (
     <div className="text-center">
-      <Link href={person.profileLink} className="link" rel="noopener noreferrer">
-        <BlockieAvatar address={person.address as `0x${string}`} size={100} />
-        See profile
-      </Link>
+      <div className="flex flex-col items-center justify-center gap-2" rel="noopener noreferrer">
+        <BlockieAvatar address={person.address as `0x${string}`} ensImage={ensAvatar} size={100} />
+
+        <div>
+          <Address address={person.address} size="xs" />
+          <Link
+            href={person.profileLink}
+            className="underline underline-offset-2 hover:underline-offset-4 transition-all"
+          >
+            See Profile
+          </Link>
+        </div>
+      </div>
     </div>
   );
 };
diff --git a/packages/nextjs/app/builders/page.tsx b/packages/nextjs/app/builders/page.tsx
index 6b88036..e18afe6 100644
--- a/packages/nextjs/app/builders/page.tsx
+++ b/packages/nextjs/app/builders/page.tsx
@@ -88,7 +88,7 @@ const Builders: NextPage = () => {
             <h2 className="text-2xl font-semibold text-center mb-6">Builders 🏗</h2>
             <p className="text-sm font-bold text-center mb-8">Builders that checkedIn: {buildersCheckedIn}</p>
             <div className="grid grid-cols-5 gap-20">
-              {builders.map((builder, i) => (
+              {[...new Map(builders.map(builder => [builder.address, builder])).values()].map((builder, i) => (
                 <BuilderPicture person={builder} key={i} />
               ))}
             </div>