Feat: show connected wallet info

packages/nextjs/components/BuilderStateInBatch.tsx

@@ -0,0 +1,17 @@
+import { showBuilderNotification } from "./builderState/BuilderNotification";
+import { BuilderStateIcon } from "./builderState/BuilderStateIcon";
+import { useBuilderStateConfig } from "~~/hooks/useBuilderState";
+
+export const BuilderStateInBatch = () => {
+  const { state, config } = useBuilderStateConfig();
+
+  return (
+    <div className="flex items-center">
+      <BuilderStateIcon
+        type={state}
+        tooltip={config.tooltip}
+        onClick={() => showBuilderNotification(config.notification)}
+      />
+    </div>
+  );
+};

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 { BuilderStateInBatch } from "./BuilderStateInBatch";
 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">
+        <BuilderStateInBatch />
         <RainbowKitCustomConnectButton />
         <FaucetButton />
       </div>

packages/nextjs/components/builderState/BuilderNotification.tsx

@@ -0,0 +1,30 @@
+import { notification } from "~~/utils/scaffold-eth";
+
+type NotificationLink = {
+  text: string;
+  url: string;
+};
+
+type NotificationConfig = {
+  message: string;
+  link?: NotificationLink;
+  type?: "info" | "success" | "warning";
+};
+
+export const showBuilderNotification = ({ message, link, type = "info" }: NotificationConfig) => {
+  const content = (
+    <div>
+      {message}
+      {link && (
+        <>
+          {" "}
+          <a href={link.url} target="_blank" className="underline">
+            {link.text}
+          </a>
+        </>
+      )}
+    </div>
+  );
+
+  notification[type](content);
+};

packages/nextjs/components/builderState/BuilderStateIcon.tsx

@@ -0,0 +1,28 @@
+import { WalletIcon } from "@heroicons/react/24/outline";
+import { CheckCircleIcon, UserGroupIcon } from "@heroicons/react/24/solid";
+
+type BuilderStateIconProps = {
+  type: "disconnected" | "notAllowlisted" | "notCheckedIn" | "checkedIn" | "wrongNetwork";
+  onClick: () => void;
+  tooltip: string;
+};
+
+export const BuilderStateIcon = ({ type, onClick, tooltip }: BuilderStateIconProps) => {
+  const baseStyles = "h-6 w-6 cursor-pointer";
+  const warningStyles = `${baseStyles} text-warning animate-pulse`;
+  const walletStyles = `${warningStyles} mr-2`;
+
+  const icons = {
+    notAllowlisted: <UserGroupIcon className={warningStyles} />,
+    notCheckedIn: <CheckCircleIcon className={warningStyles} />,
+    checkedIn: <CheckCircleIcon className={`${baseStyles} text-success`} />,
+    disconnected: <WalletIcon className={walletStyles} />,
+    wrongNetwork: <WalletIcon className={walletStyles} />,
+  };
+
+  return (
+    <div className="tooltip tooltip-bottom" data-tip={tooltip} onClick={onClick}>
+      {icons[type]}
+    </div>
+  );
+};

packages/nextjs/hooks/useBuilderState.ts

@@ -0,0 +1,79 @@
+import { useScaffoldReadContract } from "./scaffold-eth/useScaffoldReadContract";
+import { Address } from "viem";
+import { useAccount, useChainId } from "wagmi";
+
+type BuilderState = "disconnected" | "notAllowlisted" | "notCheckedIn" | "checkedIn" | "wrongNetwork";
+
+const stateConfigs = {
+  disconnected: {
+    tooltip: "Please connect your wallet",
+    notification: {
+      message: "Please connect your wallet to check your builder status",
+      type: "warning",
+    },
+  },
+  notAllowlisted: {
+    tooltip: "Connected wallet is not allowlisted. Please apply to the next batch.",
+    notification: {
+      message: "Connected wallet is not allowlisted. Please ",
+      link: { text: "apply to the next batch", url: "https://buidlguidl.com/batches" },
+    },
+  },
+  notCheckedIn: {
+    tooltip: "You need to check in to start building",
+    notification: {
+      message: "You need to check in to start building. Follow instructions in ",
+      link: { text: "this GitHub issue", url: "https://github.com/BuidlGuidl/batch12.buidlguidl.com/issues/12" },
+    },
+  },
+  checkedIn: {
+    tooltip: "You are checked in and ready to build! Check ",
+    notification: {
+      message: "You are checked in and ready to build! Check ",
+      link: { text: "GitHub issues", url: "https://github.com/BuidlGuidl/batch12.buidlguidl.com/issues/12" },
+      type: "success" as const,
+    },
+  },
+  wrongNetwork: {
+    tooltip: "Switch to Optimism network",
+    notification: {
+      message: "Please switch to Optimism network",
+      type: "warning" as const,
+    },
+  },
+} as const;
+
+export const useBuilderState = (address?: Address) => {
+  const { data: isAllowListed } = useScaffoldReadContract({
+    contractName: "BatchRegistry",
+    functionName: "allowList",
+    args: [address],
+  });
+
+  const { data: contractAddress } = useScaffoldReadContract({
+    contractName: "BatchRegistry",
+    functionName: "yourContractAddress",
+    args: [address],
+  });
+
+  const isCheckedIn = contractAddress && contractAddress !== "0x0000000000000000000000000000000000000000";
+
+  return { isAllowListed, isCheckedIn };
+};
+
+export const useBuilderStateConfig = () => {
+  const { address } = useAccount();
+  const chainId = useChainId();
+  const { isAllowListed, isCheckedIn } = useBuilderState(address);
+
+  const getState = (): BuilderState => {
+    if (!address) return "disconnected";
+    if (chainId !== 10) return "wrongNetwork";
+    if (!isAllowListed) return "notAllowlisted";
+    if (!isCheckedIn) return "notCheckedIn";
+    return "checkedIn";
+  };
+
+  const state = getState();
+  return { state, config: stateConfigs[state] };
+};