issue number 6 solved

packages/nextjs/components/CheckInFlag.tsx

@@ -0,0 +1,20 @@
+import { useAccount } from "wagmi";
+import { useIsCheckedIn } from "~~/hooks/scaffold-eth/useIsCheckedIn";
+
+export const CheckInFlag = () => {
+  const isCheckedIn = useIsCheckedIn();
+  const { isConnected } = useAccount();
+  return (
+    <button
+      className={`${isCheckedIn ? "bg-green-600" : "bg-red-500 mr-3"} ${isConnected ? "" : "hidden"} px-3 py-2 sm:py-1.5 rounded-full shadow-xl font-semibold text-sm `}
+      onClick={() =>
+        isCheckedIn
+          ? alert(`You have checkedIn using the above contract ${isCheckedIn}`)
+          : window.open("https://github.com/BuidlGuidl/batch8.buidlguidl.com/issues/10", "_blank")
+      }
+    >
+      <span className="hidden sm:inline-block">{isCheckedIn ? "CheckedIn 🎉" : "CheckIn 🤔"}</span>
+      <span className="sm:hidden"> {isCheckedIn ? "🎉" : "🤔"}</span>
+    </button>
+  );
+};

packages/nextjs/components/Footer.tsx

@@ -1,11 +1,12 @@
-import React from "react";
 import Link from "next/link";
+import { BatchMemberLogo } from "./assets/BatchMemberLogo";
 import { hardhat } from "viem/chains";
 import { CurrencyDollarIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import { HeartIcon } from "@heroicons/react/24/outline";
 import { SwitchTheme } from "~~/components/SwitchTheme";
 import { BuidlGuidlLogo } from "~~/components/assets/BuidlGuidlLogo";
 import { Faucet } from "~~/components/scaffold-eth";
+import { useCheckIsMember } from "~~/hooks/scaffold-eth/useCheckIsMember";
 import { useTargetNetwork } from "~~/hooks/scaffold-eth/useTargetNetwork";
 import { useGlobalState } from "~~/services/store/store";
 
@@ -16,18 +17,23 @@ export const Footer = () => {
   const nativeCurrencyPrice = useGlobalState(state => state.nativeCurrency.price);
   const { targetNetwork } = useTargetNetwork();
   const isLocalNetwork = targetNetwork.id === hardhat.id;
+  const isMember = useCheckIsMember();
 
   return (
     <div className="min-h-0 py-5 px-1 mb-11 lg:mb-0">
       <div>
         <div className="fixed flex justify-between items-center w-full z-10 p-4 bottom-0 left-0 pointer-events-none">
           <div className="flex flex-col md:flex-row gap-2 pointer-events-auto">
             {nativeCurrencyPrice > 0 && (
-              <div>
+              <div className="flex gap-5 items-center">
                 <div className="btn btn-primary btn-sm font-normal gap-1 cursor-auto">
                   <CurrencyDollarIcon className="h-4 w-4" />
                   <span>{nativeCurrencyPrice.toFixed(2)}</span>
                 </div>
+                {/* Conditionally renders the batch member logo is they are in the allow list */}
+                <div className={`${isMember ? "" : "hidden"}`}>
+                  <BatchMemberLogo className="" />
+                </div>
               </div>
             )}
             {isLocalNetwork && (

packages/nextjs/components/Header.tsx

@@ -4,6 +4,7 @@ import React, { useCallback, useRef, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { CheckInFlag } from "./CheckInFlag";
 import { Bars3Icon, BugAntIcon } from "@heroicons/react/24/outline";
 import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useOutsideClick } from "~~/hooks/scaffold-eth";
@@ -102,6 +103,7 @@ export const Header = () => {
         </ul>
       </div>
       <div className="navbar-end flex-grow mr-4">
+        <CheckInFlag />
         <RainbowKitCustomConnectButton />
         <FaucetButton />
       </div>

packages/nextjs/hooks/scaffold-eth/useCheckIsMember.ts

@@ -0,0 +1,14 @@
+import { useScaffoldReadContract } from "./useScaffoldReadContract";
+import { useAccount } from "wagmi";
+
+//Checks whether they are a member of batch 8!
+export const useCheckIsMember = () => {
+  const { address } = useAccount();
+  const { data } = useScaffoldReadContract({
+    contractName: "BatchRegistry",
+    functionName: "allowList",
+    args: [address],
+  });
+
+  return data;
+};

packages/nextjs/hooks/scaffold-eth/useIsCheckedIn.ts

@@ -0,0 +1,15 @@
+import { useScaffoldReadContract } from "./useScaffoldReadContract";
+import { useAccount } from "wagmi";
+
+export const useIsCheckedIn = () => {
+  const { address } = useAccount();
+  const { data } = useScaffoldReadContract({
+    contractName: "BatchRegistry",
+    functionName: "yourContractAddress",
+    args: [address],
+  });
+  if (data == "0x0000000000000000000000000000000000000000") {
+    return false;
+  }
+  return data;
+};