Merge pull request #30 from ishtails/4-home-page

Issue 4 - created new home page
BuidlGuidl · Sep 23, 2024 · 62d5bac · 62d5bac
2 parents 49449fa + 0ab8407
commit 62d5bac
Show file tree

Hide file tree

Showing 13 changed files with 329 additions and 91 deletions.
diff --git a/packages/nextjs/app/layout.tsx b/packages/nextjs/app/layout.tsx
@@ -1,18 +1,21 @@
+import { Inter } from "next/font/google";
 import "@rainbow-me/rainbowkit/styles.css";
 import { ScaffoldEthAppWithProviders } from "~~/components/ScaffoldEthAppWithProviders";
 import { ThemeProvider } from "~~/components/ThemeProvider";
 import "~~/styles/globals.css";
 import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
 
 export const metadata = getMetadata({
-  title: "Scaffold-ETH 2 App",
+  title: "BuidlGuidl Batch 9",
   description: "Built with 🏗 Scaffold-ETH 2",
 });
 
+const inter = Inter({ subsets: ["latin"] });
+
 const ScaffoldEthApp = ({ children }: { children: React.ReactNode }) => {
   return (
     <html suppressHydrationWarning>
-      <body>
+      <body className={inter.className}>
         <ThemeProvider enableSystem>
           <ScaffoldEthAppWithProviders>{children}</ScaffoldEthAppWithProviders>
         </ThemeProvider>

diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
@@ -1,11 +1,30 @@
 "use client";
 
+import { useEffect, useState } from "react";
+import Image from "next/image";
 import Link from "next/link";
 import type { NextPage } from "next";
-import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
+import { useAccount } from "wagmi";
+import Card from "~~/components/Card";
 import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
 
 const Home: NextPage = () => {
+  const { address: connectedAddress } = useAccount();
+  const zeroAddress = "0x0000000000000000000000000000000000000000";
+  const [builderPageExists, setBuilderPageExists] = useState<boolean>(false);
+
+  const { data: isAllowed } = useScaffoldReadContract({
+    contractName: "BatchRegistry",
+    functionName: "allowList",
+    args: [connectedAddress],
+  });
+
+  const { data: IsCheckIn } = useScaffoldReadContract({
+    contractName: "BatchRegistry",
+    functionName: "yourContractAddress",
+    args: [connectedAddress],
+  });
+
   const { data: checkedInCounter, error } = useScaffoldReadContract({
     contractName: "BatchRegistry",
     functionName: "checkedInCounter",
@@ -14,57 +33,138 @@ const Home: NextPage = () => {
   if (error) {
     console.log("Error fetching checkedInCounter", error);
   }
+
+  useEffect(() => {
+    const verifyBuilderPage = async (address: string) => {
+      try {
+        const response = await fetch(`/builders/${address}`);
+        setBuilderPageExists(response.status === 200);
+      } catch (error) {
+        setBuilderPageExists(false);
+      }
+    };
+
+    if (connectedAddress) {
+      verifyBuilderPage(connectedAddress);
+    } else {
+      setBuilderPageExists(false);
+    }
+  }, [connectedAddress]);
+
   return (
-    <>
-      <div className="flex items-center flex-col flex-grow pt-10">
-        <div className="px-5">
-          <h1 className="text-center">
-            <span className="block text-2xl mb-2">Welcome to</span>
-            <span className="block text-4xl font-bold">Batch 9</span>
+    <div className="dark:bg-zinc-950 bg-zinc-200 dark:text-st_white text-st_background min-h-screen h-fit relative overflow-clip flex items-center justify-center">
+      <div className="absolute w-full h-full pointer-events-none">
+        <Image
+          src="/blur_yellow.svg"
+          alt="Blurred Yellow Background"
+          className="absolute -top-[10%] -left-[40%] w-200 h-200 blur-2xl"
+          width={2000}
+          height={2000}
+        />
+      </div>
+
+      <div className="absolute w-full h-full pointer-events-none">
+        <Image
+          src="/blur_blue.svg"
+          alt="Blurred Blue Background"
+          className="absolute -bottom-[10%] -right-[40%] blur-2xl"
+          width={2000}
+          height={2000}
+        />
+      </div>
+
+      <div className="max-w-7xl px-4 mt-8 sm:mt-0 sm:px-0 mx-auto flex flex-col items-center justify-center">
+        {/* Punks BG */}
+        <div className="overflow-clip">
+          <Image src="/cryptopunks.png" alt="punks" width={2000} height={2000} />
+        </div>
+
+        {/* Header / SubHeader */}
+        <div className="mt-10 sm:mt-16 tracking-wider flex flex-col items-center justify-center">
+          <h1 className="font-semibold text-center text-4xl md:text-5xl lg:text-6xl xl:text-7xl">
+            Welcome to Batch 9 of
+            <span className="ml-3 font-bold">
+              <span className="text-st_cyan">Buidl</span>
+              <span className="text-st_yellow">Guidl</span>
+            </span>
           </h1>
-          <p className="text-center text-lg">Get started by taking a look at your batch GitHub repository.</p>
-          <div className="flex justify-center items-center">
-            {checkedInCounter === undefined && !error ? (
-              <div className="w-64 h-8 bg-base-300 animate-pulse rounded-lg"></div>
-            ) : checkedInCounter ? (
-              <p className="text-lg flex gap-2 justify-center">
-                <span className="font-bold">Checked in builders count:</span>
-                <span>{checkedInCounter.toString()}</span>
-              </p>
-            ) : (
-              <p className="text-lg flex gap-2 justify-center">
-                <span className="font-bold">An error occurred, check your console for more information 👀</span>
-              </p>
-            )}
-          </div>
+          <p className="text-lg md:text-xl text-center lg:text-2xl xl:text-3xl">
+            Get started by taking a look at your batch GitHub repository.
+          </p>
         </div>
 
-        <div className="flex-grow bg-base-300 w-full mt-16 px-8 py-12">
-          <div className="flex justify-center items-center gap-12 flex-col sm:flex-row">
-            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-              <BugAntIcon className="h-8 w-8 fill-secondary" />
-              <p>
-                Tinker with your smart contract using the{" "}
-                <Link href="/debug" passHref className="link">
-                  Debug Contracts
-                </Link>{" "}
-                tab.
-              </p>
-            </div>
-            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-              <MagnifyingGlassIcon className="h-8 w-8 fill-secondary" />
+        <div className="flex justify-center items-center">
+          {checkedInCounter === undefined && !error ? (
+            <div className="w-64 h-8 bg-st_gray/20 animate-pulse rounded-lg"></div>
+          ) : checkedInCounter ? (
+            <p className="flex border border-zinc-500 py-4 px-8 rounded-full font-semibold gap-2 justify-center">
+              <span className="font-medium">Checked-in count:</span>
+              <span>{checkedInCounter.toString()}</span>
+            </p>
+          ) : null}
+        </div>
+
+        {/* Member Status */}
+        {builderPageExists ? (
+          <Link
+            href={`/builders/${connectedAddress}`}
+            target="_blank"
+            title="View Your Builder Page"
+            className="w-[16rem] sm:w-[34rem] text-center tracking-widest py-5 mt-6 text-st_cyan font-semibold rounded-xl border border-zinc-500 uppercase shadow-sm hover:bg-zinc-300 dark:hover:bg-zinc-800 transition-all"
+          >
+            Batch Member {isAllowed ? "✅" : "❌"}
+          </Link>
+        ) : (
+          <div
+            title="No Builder Page Found"
+            className="w-[16rem] sm:w-[34rem] text-center tracking-widest py-5 mt-6 text-st_cyan font-semibold rounded-xl border border-zinc-500 uppercase shadow-sm transition-all"
+          >
+            Batch Member {isAllowed ? "✅" : "❌"}
+          </div>
+        )}
+
+        {isAllowed && IsCheckIn !== zeroAddress ? (
+          <div className="text-center italic text-zinc-500">
+            <p>Cheers 🍻.. You are checked in!</p>
+          </div>
+        ) : (
+          isAllowed && (
+            <div className="text-center italic text-zinc-400">
               <p>
-                Explore your local transactions with the{" "}
-                <Link href="/blockexplorer" passHref className="link">
-                  Block Explorer
-                </Link>{" "}
-                tab.
+                <span>
+                  Hey there! Ready for an adventure?{" "}
+                  <Link
+                    target="_blank"
+                    href="https://github.com/BuidlGuidl/batch9.buidlguidl.com/issues/10"
+                    className="underline underline-offset-1 hover:underline-offset-2 transition-all text-st_cyan/70"
+                  >
+                    Check-In
+                  </Link>
+                </span>{" "}
+                to get started! 🚀
               </p>
             </div>
-          </div>
+          )
+        )}
+
+        {/* Cards */}
+        <div className="flex flex-col sm:flex-row sm:gap-8 mb-8">
+          {/* Debug Contract Card */}
+          <Card
+            mainText="Tinker with your smart contract using the Debug Contracts tab."
+            footerLink="/debug"
+            footerText="Try it out.."
+          />
+
+          {/* Block Explorer Card */}
+          <Card
+            mainText="Explore your local transactions with the Block Explorer tab."
+            footerLink="/blockexplorer"
+            footerText="Try it out.."
+          />
         </div>
       </div>
-    </>
+    </div>
   );
 };
 

diff --git a/packages/nextjs/components/Arrow_Icon.tsx b/packages/nextjs/components/Arrow_Icon.tsx
@@ -0,0 +1,28 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { useTheme } from "next-themes";
+
+const Arrow_Icon = () => {
+  const { theme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) return null;
+
+  return (
+    <svg width="12" height="12" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16 16.5V0.5H0V2.5H13L0 15.5L1 16.5L14 3.5V16.5H16ZM16 0.5H13V3.5H16V0.5Z"
+        fill={`${theme === "light" ? "#000000" : "#868686"}`}
+      />
+    </svg>
+  );
+};
+
+export default Arrow_Icon;
diff --git a/packages/nextjs/components/Card.tsx b/packages/nextjs/components/Card.tsx
@@ -0,0 +1,28 @@
+import Link from "next/link";
+import Arrow_Icon from "~~/components/Arrow_Icon";
+
+type Props = {
+  mainText: string;
+  footerText: string;
+  footerLink: string;
+};
+
+const Card = ({ mainText, footerText, footerLink }: Props) => {
+  return (
+    <div className="shadow-sm border rounded-xl w-[16rem] h-[12rem] font-light mt-6 border-zinc-500 flex flex-col">
+      <div className="w-full flex items-center justify-center flex-grow-[5] px-4 rounded-t-xl">{mainText}</div>
+
+      <hr className="border-t border-zinc-500" />
+
+      <div className="hover:bg-st_cyan/10 rounded-b-xl transition-all border-zinc-500 flex-grow">
+        <Link href={footerLink} target="_blank" passHref className="flex items-center justify-between h-full px-4">
+          <p className="font-medium flex flex-col items-center justify-center">{footerText}</p>
+
+          <Arrow_Icon />
+        </Link>
+      </div>
+    </div>
+  );
+};
+
+export default Card;