UserBadges with a cascading approach

BuidlGuidl · Nov 21, 2024 · 9b27aae · 9b27aae
1 parent e3966ea
commit 9b27aae
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 8 deletions.
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
@@ -5,6 +5,7 @@ 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";
@@ -59,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), []),
@@ -103,7 +106,7 @@ export const Header = () => {
         </ul>
       </div>
       <div className="navbar-end flex-grow mr-4">
-        <UserBadges />
+        {isConnected && <UserBadges />}
         <RainbowKitCustomConnectButton />
         <FaucetButton />
       </div>

diff --git a/packages/nextjs/components/UserBadges.tsx b/packages/nextjs/components/UserBadges.tsx
@@ -1,5 +1,5 @@
 import { useAccount } from "wagmi";
-import { IdentificationIcon, PuzzlePieceIcon } from "@heroicons/react/24/outline";
+import { BookmarkSquareIcon, IdentificationIcon, SignalSlashIcon } from "@heroicons/react/24/outline";
 import { useScaffoldReadContract } from "~~/hooks/scaffold-eth";
 
 export const UserBadges = () => {
@@ -21,14 +21,17 @@ export const UserBadges = () => {
 
   return (
     <div className="flex gap-2 mr-2">
-      {isBuilderOfBatch11 && (
-        <div className="tooltip tooltip-bottom" data-tip="Is builder of batch 11">
+      {madeCheckin ? (
+        <div className="tooltip tooltip-bottom" data-tip="A builder of batch 11 with confirmed checkin">
+          <BookmarkSquareIcon className="h-6 w-6 text-success" />
+        </div>
+      ) : isBuilderOfBatch11 ? (
+        <div className="tooltip tooltip-bottom" data-tip="A builder of batch 11">
           <IdentificationIcon className="h-6 w-6 text-success" />
         </div>
-      )}
-      {madeCheckin && (
-        <div className="tooltip tooltip-bottom" data-tip="Made checkin">
-          <PuzzlePieceIcon className="h-6 w-6 text-success" />
+      ) : (
+        <div className="tooltip tooltip-bottom" data-tip="Not a builder of batch 11">
+          <SignalSlashIcon className="h-6 w-6 opacity-50" />
         </div>
       )}
     </div>