Merge pull request #1 from danitome24/6-connected-wallet-info-arjanjohan

Issue 6.  Added a single message depending on state

packages/nextjs/components/scaffold-eth/RainbowKitCustomConnectButton/BatchDetails.tsx

@@ -5,10 +5,15 @@ type BatchProps = {
   address: Address;
 };
 
+type Text = {
+  title: string;
+  message: string;
+};
+
 const zeroAddress = "0x0000000000000000000000000000000000000000";
 
 export const BatchDetails = ({ address }: BatchProps) => {
-  const { data: allowListed, isLoading: allowListLoading } = useScaffoldReadContract({
+  const { data: isAllowListed, isLoading: allowListLoading } = useScaffoldReadContract({
     contractName: "BatchRegistry",
     functionName: "allowList",
     args: [address],
@@ -20,14 +25,28 @@ export const BatchDetails = ({ address }: BatchProps) => {
     args: [address],
   });
 
+  const hasCheckedIn = zeroAddress !== checkedIn;
+
+  const getTextToShow = (): Text => {
+    if (isAllowListed) {
+      if (hasCheckedIn) {
+        return { title: "", message: "You are an up to date builder🥇" };
+      }
+      return { title: "Hey builder 🏗️!", message: "Remember to check in :)" };
+    }
+    return { title: "Oops!", message: "Reach us to be a builder" };
+  };
+
+  const textToShow = getTextToShow();
+
+  if (allowListLoading || checkedInLoading) {
+    return null;
+  }
+
   return (
-    <>
-      {!allowListLoading && !checkedInLoading && (
-        <div>
-          <span className="text-xs">{allowListed ? <p>✅ Allow Listed</p> : <p>❌ Not Allow Listed</p>}</span>
-          <span className="text-xs">{checkedIn != zeroAddress ? <p>✅ Checked in</p> : <p>❌ Not checked in</p>}</span>
-        </div>
-      )}
-    </>
+    <div className="bg-base-300  p-4 rounded shadow-lg">
+      <p className="text-lg m-0">{textToShow.title}</p>
+      <p className="text-sm m-0">{textToShow.message}</p>
+    </div>
   );
 };