Merge pull request #15 from melanke/batch11-badges

Showing badges for members - for issue #5

packages/nextjs/components/Header.tsx

@@ -4,6 +4,8 @@ import React, { useCallback, useRef, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import { UserBadges } from "./UserBadges";
+import { useAccount } from "wagmi";
 import { Bars3Icon, BugAntIcon } from "@heroicons/react/24/outline";
 import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useOutsideClick } from "~~/hooks/scaffold-eth";
@@ -58,6 +60,8 @@ export const HeaderMenuLinks = () => {
 export const Header = () => {
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
   const burgerMenuRef = useRef<HTMLDivElement>(null);
+  const { isConnected } = useAccount();
+
   useOutsideClick(
     burgerMenuRef,
     useCallback(() => setIsDrawerOpen(false), []),
@@ -102,6 +106,7 @@ export const Header = () => {
         </ul>
       </div>
       <div className="navbar-end flex-grow mr-4">
+        {isConnected && <UserBadges />}
         <RainbowKitCustomConnectButton />
         <FaucetButton />
       </div>

packages/nextjs/components/UserBadges.tsx

@@ -0,0 +1,39 @@
+import { useAccount } from "wagmi";
+import { BookmarkSquareIcon, IdentificationIcon, SignalSlashIcon } from "@heroicons/react/24/outline";
+import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
+
+export const UserBadges = () => {
+  const { address } = useAccount();
+
+  const { data: isBuilderOfBatch11 } = useScaffoldReadContract({
+    contractName: "BatchRegistry",
+    functionName: "allowList",
+    args: [address],
+  });
+
+  const { data: contractAddress } = useScaffoldReadContract({
+    contractName: "BatchRegistry",
+    functionName: "yourContractAddress",
+    args: [address],
+  });
+
+  const madeCheckin = contractAddress && contractAddress !== "0x0000000000000000000000000000000000000000";
+
+  return (
+    <div className="flex gap-2 mr-2">
+      {madeCheckin ? (
+        <div className="tooltip tooltip-bottom" data-tip="A builder of batch 11 with confirmed checkin">
+          <BookmarkSquareIcon className="h-7 w-7 p-1 bg-secondary-content text-secondary rounded-full" />
+        </div>
+      ) : isBuilderOfBatch11 ? (
+        <div className="tooltip tooltip-bottom" data-tip="A builder of batch 11">
+          <IdentificationIcon className="h-7 w-7 p-1 bg-secondary-content text-secondary rounded-full" />
+        </div>
+      ) : (
+        <div className="tooltip tooltip-bottom" data-tip="Not a builder of batch 11">
+          <SignalSlashIcon className="h-7 w-7 p-1 opacity-50" />
+        </div>
+      )}
+    </div>
+  );
+};