Customize apply button and feedback depending on connected address

packages/nextjs/app/_components/ApplyEligibilityLink.tsx

@@ -0,0 +1,82 @@
+"use client";
+
+import Link from "next/link";
+import { useAccount } from "wagmi";
+import { LockClosedIcon, LockOpenIcon } from "@heroicons/react/24/outline";
+import { useBGBuilderData } from "~~/hooks/useBGBuilderData";
+
+export const ApplyEligibilityLink = () => {
+  const { isConnected, address: connectedAddress } = useAccount();
+  const { isBuilderPresent, isLoading: isFetchingBuilderData } = useBGBuilderData(connectedAddress);
+
+  const applyButtonColor = !isConnected
+    ? "btn-primary disabled"
+    : !isBuilderPresent
+    ? "btn-warning disabled"
+    : "btn-success";
+
+  const notConnectedMessage = (
+    <div className="leading-snug">
+      <p className="">
+        🔎 <strong>Connect your wallet</strong> to verify whether you qualify to apply or not.
+      </p>
+    </div>
+  );
+
+  const notBgMemberMessage = (
+    <div className="leading-snug">
+      <p className="-mb-2">
+        ❌ <strong>Not a BuidlGuidl member.</strong>
+      </p>
+      <p>
+        Join BuidlGuidl by completing the first 3 challenges of{" "}
+        <a href="https://speedrunethereum.com" target="_blank" rel="noopener noreferrer" className="underline">
+          speedrunethereum.com
+        </a>
+      </p>
+    </div>
+  );
+
+  const eligibleToApplyMessage = (
+    <div className="leading-snug">
+      <p className="-mb-2">
+        ✅ <strong>You are eligible to apply!</strong>
+      </p>
+      <p>As a member of BuidlGuidl, you can participate in the grants program.</p>
+    </div>
+  );
+
+  const feedbackMessage =
+    !isConnected || isFetchingBuilderData
+      ? notConnectedMessage
+      : !isBuilderPresent
+      ? notBgMemberMessage
+      : eligibleToApplyMessage;
+
+  const Icon = !isConnected || !isBuilderPresent ? LockClosedIcon : LockOpenIcon;
+
+  const ApplyButton = isBuilderPresent ? (
+    <Link
+      href="/apply"
+      className={`btn ${applyButtonColor} hover:opacity-90 px-4 md:px-8 btn-md border-1 border-black hover:border-1 hover:border-black rounded-2xl shadow-none font-medium`}
+    >
+      <Icon className="h-5 w-5 mr-1 inline-block" />
+      APPLY FOR A GRANT
+    </Link>
+  ) : (
+    <div
+      className={`btn ${applyButtonColor} px-4 md:px-8 btn-md border-1 border-black hover:border-1 hover:border-black rounded-2xl shadow-none font-medium cursor-not-allowed`}
+    >
+      <Icon className="h-5 w-5 mr-1 inline-block" />
+      APPLY FOR A GRANT
+    </div>
+  );
+
+  return (
+    <div className="flex flex-col items-start bg-white px-6 py-2 pb-6 font-spaceGrotesk space-y-1 w-4/5 rounded-2xl text-left">
+      <p className="text-2xl font-semibold mb-0">Do you qualify?</p>
+      {feedbackMessage}
+      {ApplyButton}
+    </div>
+  );
+};

packages/nextjs/app/_components/CommunityGrant.tsx

@@ -1,5 +1,5 @@
 import Image from "next/image";
-import Link from "next/link";
+import { ApplyEligibilityLink } from "./ApplyEligibilityLink";
 
 export const CommunityGrant = () => {
   return (
@@ -31,12 +31,7 @@ export const CommunityGrant = () => {
               Are you a BG member eager to make an impact in the ecosystem? At BuidlGuidl, we're excited to support
               your builds. We offer sponsorships of up to 1 ETH for projects that drive the community forward.
             </p>
-            <Link
-              href="/apply"
-              className="btn bg-white hover:opacity-90 hover:bg-white btn-md border-1 border-black hover:border-1 hover:border-black rounded-2xl px-6 shadow-none font-medium"
-            >
-              Apply for a grant
-            </Link>
+            <ApplyEligibilityLink />
           </div>
         </div>
         {/* Right section (Who, process, payment, etc) */}