Show connected wallet info (#6)

packages/nextjs/components/CheckInFlag.tsx

@@ -0,0 +1,63 @@
+import { useAccount } from "wagmi";
+import { useIsCheckedIn } from "~~/hooks/scaffold-eth/useIsCheckedIn";
+
+//This is the isCheckedIn is used as flag and also as the address of the deployed checkin contract
+
+export const CheckInFlag = () => {
+  const isCheckedIn = useIsCheckedIn();
+  const { isConnected } = useAccount();
+  const openModal = (modalId: string) => {
+    const modal = document.getElementById(modalId) as HTMLDialogElement;
+    if (modal) {
+      modal.showModal();
+    }
+  };
+  return (
+    <div>
+      <dialog id="my_modal_1" className="modal ">
+        <div className="modal-box">
+          <h3 className={`font-bold text-xl ${isCheckedIn ? "" : "hidden"}`}>You have successfully checked in🎉</h3>
+          <h3 className={`font-bold text-xl ${isCheckedIn ? "hidden" : ""}`}>You have to yet check in 😌</h3>
+          <div className={` ${isCheckedIn ? "" : "hidden"}`}>
+            <p className="pt-4 mb-1">You used the below contract to check in</p>
+            <p className="m-0 font-semibold">{isCheckedIn}</p>
+          </div>
+
+          <div className={` ${isCheckedIn ? "hidden" : ""}`}>
+            <p className="text-lg">Visit the github issue for the checkIn challenge</p>
+          </div>
+
+          <div className="modal-action mt-10">
+            <form method="dialog" className="w-full flex justify-between">
+              <button className="btn dark:bg-slate-500 dark:text-slate-800 dark:hover:text-slate-900 hover:text-slate-600 dark:hover:bg-slate-400 transition-all border-none text-slate-400">
+                Close
+              </button>
+              <a
+                className={`btn  ${isCheckedIn ? "hidden" : ""}`}
+                href="https://github.com/BuidlGuidl/batch8.buidlguidl.com/issues/10"
+                target="_blank"
+              >
+                Onwards to checkIn <span className="text-lg">👩🏽‍✈️</span>
+              </a>
+              <a
+                className={`btn ${isCheckedIn ? "" : "hidden"}`}
+                //Here the is checked provides the address of the deployed contract!!!
+                href={`https://optimistic.etherscan.io/address/${isCheckedIn}`}
+                target="_blank"
+              >
+                See on block explorer <span className="text-lg">🕵️‍♂️</span>
+              </a>
+            </form>
+          </div>
+        </div>
+      </dialog>
+      <button
+        className={`btn btn-sm border-none ${isCheckedIn ? "dark:bg-emerald-600 bg-emerald-400 dark:hover:bg-emerald-700 hover:bg-emerald-500" : "bg-red-500 dark:hover:bg-red-600"} ${isConnected ? "" : "hidden"} sm:py-1.5 rounded-full shadow-xl font-semibold text-sm transition-all`}
+        onClick={() => openModal("my_modal_1")}
+      >
+        <span className="hidden sm:inline-block">{isCheckedIn ? "CheckedIn 🎉" : "CheckIn 🤔"}</span>
+        <span className="sm:hidden"> {isCheckedIn ? "🎉" : "🤔"}</span>
+      </button>
+    </div>
+  );
+};

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 classNameWord="fill-current dark:text-white text-slate-700" 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/components/scaffold-eth/RainbowKitCustomConnectButton/WrongNetworkDropdown.tsx

@@ -6,7 +6,7 @@ export const WrongNetworkDropdown = () => {
   const { disconnect } = useDisconnect();
 
   return (
-    <div className="dropdown dropdown-end mr-2">
+    <div className="dropdown dropdown-end mr-2 ml-3">
       <label tabIndex={0} className="btn btn-error btn-sm dropdown-toggle gap-1">
         <span>Wrong network</span>
         <ChevronDownIcon className="h-6 w-4 ml-2 sm:ml-0" />

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;
+};