From e6d89e22e5bcb92e7b323df37846d02d78c09c22 Mon Sep 17 00:00:00 2001
From: Pablo Alayeto <55535804+Pabl0cks@users.noreply.github.com>
Date: Thu, 18 Apr 2024 00:40:05 +0200
Subject: [PATCH] Customize apply button and feedback depending on connected
 address

---
 .../app/_components/ApplyEligibilityLink.tsx  | 82 +++++++++++++++++++
 .../nextjs/app/_components/CommunityGrant.tsx |  9 +-
 2 files changed, 84 insertions(+), 7 deletions(-)
 create mode 100644 packages/nextjs/app/_components/ApplyEligibilityLink.tsx

diff --git a/packages/nextjs/app/_components/ApplyEligibilityLink.tsx b/packages/nextjs/app/_components/ApplyEligibilityLink.tsx
new file mode 100644
index 0000000..fee07ff
--- /dev/null
+++ b/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>
+  );
+};
diff --git a/packages/nextjs/app/_components/CommunityGrant.tsx b/packages/nextjs/app/_components/CommunityGrant.tsx
index 7c35b16..26b5266 100644
--- a/packages/nextjs/app/_components/CommunityGrant.tsx
+++ b/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&apos;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) */}