Merge branch 'main' into feat/members-list

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

@@ -0,0 +1,70 @@
+import Image from "next/image";
+import type { NextPage } from "next";
+import { FaDiscord, FaGithub, FaTelegram } from "react-icons/fa";
+import { Address } from "~~/components/scaffold-eth";
+
+const PeterProfile: NextPage = () => {
+  const socials = [
+    {
+      name: "Telegram",
+      icon: <FaTelegram size={24} />,
+      address: "https://telegram.me/pbkompasz",
+    },
+    {
+      name: "Discord",
+      icon: <FaDiscord size={24} />,
+      address: "https://discordapp.com/users/kbence9208",
+    },
+    {
+      name: "GitHub",
+      icon: <FaGithub size={24} />,
+      address: "https://github.com/pbkompasz",
+    },
+  ];
+
+  return (
+    <div className="flex items-center justify-center h-full max-h-screen pt-16">
+      <div className="card shadow-lg rounded-lg p-6 max-w-md">
+        <Image
+          src={"/0x26BfbD8ED2B302ec2c2B6f063C4caF7abcB062e0-avatar.jpg"}
+          width={100}
+          height={100}
+          alt={"Profile"}
+          className="rounded-full self-center"
+        />
+        <div className="px-6 py-4 flex flex-col items-center">
+          <h2 className="font-bold text-xl mb-2 text-center">Peter Kompasz</h2>
+          <div className="text-center">
+            <p>Fullstack Developer</p>
+            <p>
+              Hello! I&apos;m Peter.
+              <br />
+              My journey into <span className="font-bold">web3</span> began with studying computer science at
+              university, followed by a stint in web development.
+              <br />
+              Currently, I&apos;m transitioning into <span className="font-bold">web3</span> and{" "}
+              <span className="font-bold">smart contract development</span>, which I&apos;m really{" "}
+              <span className="font-bold">passionate</span> about
+            </p>
+          </div>
+          <div className="flex justify-center space-x-4">
+            {socials.map((social, id) => (
+              <a
+                key={id}
+                href={social.address}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="btn btn-ghost btn-square"
+              >
+                {social.icon}
+              </a>
+            ))}
+          </div>
+          <Address address="0x26BfbD8ED2B302ec2c2B6f063C4caF7abcB062e0" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default PeterProfile;

packages/nextjs/app/builders/0xe9Ad7D1C2069E0Fa9b5852Adc77C9196651BB8b8/components/Socials.tsx

@@ -0,0 +1,21 @@
+import Link from "next/link";
+import { FaGithub, FaXTwitter } from "react-icons/fa6";
+
+const Socials: React.FC = () => {
+  const socialPlatforms = [
+    { name: "github", url: "https://github.com/krvvs", icon: <FaGithub size={24} /> },
+    { name: "twitter", url: "https://x.com/xkrvsx", icon: <FaXTwitter size={24} /> },
+  ];
+
+  return (
+    <div className="flex flex-row gap-4">
+      {socialPlatforms.map(social => (
+        <Link key={social.name} href={social.url} target="_blank">
+          {social.icon}
+        </Link>
+      ))}
+    </div>
+  );
+};
+
+export default Socials;

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

@@ -0,0 +1,54 @@
+"use client";
+
+import Socials from "./components/Socials";
+import type { NextPage } from "next";
+import { useEnsAvatar, useEnsName } from "wagmi";
+import { Address } from "~~/components/scaffold-eth";
+
+const builderAddress = "0xe9Ad7D1C2069E0Fa9b5852Adc77C9196651BB8b8";
+const shortBuilderAddress = builderAddress.slice(0, 6);
+
+const KrvvsProfile: NextPage = () => {
+  const { data: fetchedEns } = useEnsName({
+    address: builderAddress,
+    chainId: 1,
+  });
+
+  const { data: fetchedEnsAvatar } = useEnsAvatar({
+    name: fetchedEns ? fetchedEns : "",
+    chainId: 1,
+  });
+
+  return (
+    <div className="flex justify-center">
+      <div className="w-[800px] min-w-[200px] max-w-[800px] p-[30px] m-[50px] bg-base-200 shadow-2xl rounded-2xl flex flex-col gap-6 items-center">
+        <div className="avatar">
+          <div className="w-40 rounded-full">
+            {/* eslint-disable-next-line @next/next/no-img-element */}
+            <img
+              src={fetchedEnsAvatar || "https://avatars.githubusercontent.com/u/141290516?v=4"}
+              alt="Builder's Avatar"
+            />
+          </div>
+        </div>
+        <div className="flex flex-col items-center gap-4">
+          <div className="card-title">{fetchedEns || shortBuilderAddress}</div>
+          <Socials />
+        </div>
+
+        <div className="text-center max-w-[400px] mt-[8px]">
+          <p>Hello World!</p>
+          <p>
+            I am a builder who enjoys learning and creating value, with a strong interest in bringing blockchain
+            technologies to life.
+          </p>
+        </div>
+        <div className="flex items-center mt-8">
+          <Address address={builderAddress} format="short" size="xs" onlyEnsOrAddress={true} />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default KrvvsProfile;

packages/nextjs/app/page.tsx

@@ -3,8 +3,18 @@
 import Link from "next/link";
 import type { NextPage } from "next";
 import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
 
 const Home: NextPage = () => {
+  const {
+    data: checkedInCounter,
+    error,
+    isLoading: contractLoading,
+  } = useScaffoldReadContract({
+    contractName: "BatchRegistry",
+    functionName: "checkedInCounter",
+  });
+
   return (
     <>
       <div className="flex items-center flex-col flex-grow pt-10">
@@ -14,14 +24,23 @@ const Home: NextPage = () => {
             <span className="block text-4xl font-bold">Batch 10</span>
           </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{" "}
-              <a href="/builders" className="link">
-                page
-              </a>
-            </span>
-          </p>
+
+          {error ? (
+            <div className="p-4 rounded-lg bg-red-100 text-red-700" role="alert">
+              <p>Error fetching contract data: {error.message}</p>
+            </div>
+          ) : (
+            <div className="text-lg flex gap-2 justify-center">
+              <span className="font-bold">Checked in builders count:</span>
+              {contractLoading ? (
+                <span className="animate-pulse">
+                  <div className="h-6 bg-gray-200 rounded w-12"></div>
+                </span>
+              ) : (
+                <span>{checkedInCounter !== undefined ? Number(checkedInCounter) : "0"}</span>
+              )}
+            </div>
+          )}
         </div>
 
         <div className="flex-grow bg-base-300 w-full mt-16 px-8 py-12">

packages/nextjs/components/Header.tsx

@@ -90,11 +90,11 @@ export const Header = () => {
         </div>
         <Link href="/" passHref className="hidden lg:flex items-center gap-2 ml-4 mr-6 shrink-0">
           <div className="flex relative w-10 h-10">
-            <Image alt="SE2 logo" className="cursor-pointer" fill src="/logo.svg" />
+            <Image alt="Batch10 logo" className="cursor-pointer" fill src="/logo.png" />
           </div>
           <div className="flex flex-col">
-            <span className="font-bold leading-tight">Scaffold-ETH</span>
-            <span className="text-xs">Ethereum dev stack</span>
+            <span className="font-bold leading-tight">BATCH #10</span>
+            <span className="text-xs">NextGen Builders</span>
           </div>
         </Link>
         <ul className="hidden lg:flex lg:flex-nowrap menu menu-horizontal px-1 gap-2">

packages/nextjs/next.config.js

@@ -14,6 +14,16 @@ const nextConfig = {
     config.externals.push("pino-pretty", "lokijs", "encoding");
     return config;
   },
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "avatars.githubusercontent.com",
+        port: "",
+        pathname: "/u/**",
+      },
+    ],
+  },
 };
 
 module.exports = nextConfig;