Community Grants section - Customize apply button and feedback depend…

…ing on connected address (#116) Co-authored-by: Shiv Bhonde <[email protected]>
BuidlGuidl · Apr 18, 2024 · 9e1d0f9 · 9e1d0f9
1 parent b26c43b
commit 9e1d0f9
Show file tree

Hide file tree

Showing 3 changed files with 92 additions and 10 deletions.
diff --git a/packages/nextjs/app/_components/ApplyEligibilityLink.tsx b/packages/nextjs/app/_components/ApplyEligibilityLink.tsx
@@ -0,0 +1,86 @@
+"use client";
+
+import Link from "next/link";
+import { useConnectModal } from "@rainbow-me/rainbowkit";
+import { useAccount } from "wagmi";
+import { LockClosedIcon, LockOpenIcon } from "@heroicons/react/24/outline";
+import { useBGBuilderData } from "~~/hooks/useBGBuilderData";
+
+type BuilderStatus = "notConnected" | "notMember" | "eligible";
+
+const FeedbackMessage = ({ builderStatus }: { builderStatus: BuilderStatus }) => {
+  if (builderStatus === "notConnected") {
+    return (
+      <div className="leading-snug">
+        <p>
+          🔎 <strong>Connect your wallet</strong> to verify eligibility.
+        </p>
+      </div>
+    );
+  }
+  if (builderStatus === "notMember") {
+    return (
+      <div className="leading-snug">
+        <p className="-mb-2">
+          ❌ <strong>Not a BuidlGuidl member.</strong>
+        </p>
+        <p>
+          Join by completing challenges at{" "}
+          <a href="https://speedrunethereum.com" target="_blank" rel="noopener noreferrer" className="underline">
+            speedrunethereum.com
+          </a>
+        </p>
+      </div>
+    );
+  }
+  // builderStatus is "eligible"
+  return (
+    <div className="leading-snug">
+      <p className="-mb-2">
+        ✅ <strong>You are eligible to apply!</strong>
+      </p>
+      <p>Participate in the grants program as a member.</p>
+    </div>
+  );
+};
+
+export const ApplyEligibilityLink = () => {
+  const { isConnected, address: connectedAddress } = useAccount();
+  const { isBuilderPresent, isLoading: isFetchingBuilderData } = useBGBuilderData(connectedAddress);
+  const { openConnectModal } = useConnectModal();
+
+  const builderStatus: BuilderStatus =
+    !isConnected || isFetchingBuilderData ? "notConnected" : !isBuilderPresent ? "notMember" : "eligible";
+
+  return (
+    <div className="mx-auto lg:m-0 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 builderStatus={builderStatus} />
+      {builderStatus === "eligible" ? (
+        <Link
+          href="/apply"
+          className="btn px-4 md:px-8 btn-md border-1 border-black hover:border-1 hover:border-black rounded-2xl shadow-none font-medium bg-customGreen hover:bg-customGreen hover:opacity-80"
+        >
+          <LockOpenIcon className="h-5 w-5 mr-1 inline-block" />
+          APPLY FOR A GRANT
+        </Link>
+      ) : (
+        <button
+          className={`btn px-4 md:px-8 btn-md border-1 border-black hover:border-1 hover:border-black rounded-2xl shadow-none font-medium ${
+            builderStatus === "notConnected" ? "btn-primary" : "btn-warning cursor-not-allowed"
+          }`}
+          onClick={() => {
+            if (!isConnected && openConnectModal) openConnectModal();
+          }}
+        >
+          {isFetchingBuilderData ? (
+            <span className="loading loading-spinner h-5 w-5"></span>
+          ) : (
+            <LockClosedIcon className="h-5 w-5 mr-1 inline-block" />
+          )}
+          {!isConnected ? "CONNECT WALLET" : "APPLY FOR A GRANT"}
+        </button>
+      )}
+    </div>
+  );
+};
diff --git a/packages/nextjs/app/_components/CommunityGrant.tsx b/packages/nextjs/app/_components/CommunityGrant.tsx
@@ -1,12 +1,12 @@
 import Image from "next/image";
-import Link from "next/link";
+import { ApplyEligibilityLink } from "./ApplyEligibilityLink";
 
 export const CommunityGrant = () => {
   return (
     <div id="communityGrants" className="bg-secondary">
       <div className="container max-w-[90%] sm:max-w-md lg:max-w-[90%] xl:max-w-7xl m-auto xl:pl-4 lg:pt-10 flex flex-col-reverse lg:flex-row gap-5 lg:gap-0 my-6 lg:my-0">
         {/* Left section(Title, desc and btn) */}
-        <div className="my-4 lg:py-16 space-y-2 lg:max-w-[40%] flex flex-col items-center lg:items-start">
+        <div className="my-4 lg:py-16 space-y-2 lg:max-w-[45%] flex flex-col items-center lg:items-start">
           {/* Title  */}
           <div>
             <h2 className="text-3xl sm:text-4xl lg:text-5xl text-center lg:text-left font-ppEditorial mb-0 lg:mb-2">
@@ -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) */}

diff --git a/packages/nextjs/tailwind.config.js b/packages/nextjs/tailwind.config.js
@@ -22,7 +22,7 @@ module.exports = {
           "base-content": "#212638",
           info: "#93BBFB",
           success: "#34EEB6",
-          warning: "#FFCF72",
+          warning: "#FEC297",
           error: "#FF8863",
 
           ".tooltip": {
@@ -72,7 +72,8 @@ module.exports = {
   theme: {
     extend: {
       colors: {
-        customBlue: '#D5DAFF',
+        customBlue: "#D5DAFF",
+        customGreen: "#DDFFB3",
       },
       boxShadow: {
         center: "0 0 12px -2px rgb(0 0 0 / 0.05)",