Merge pull request #212 from starknet-id/feat/add_braavos_quests

feat: add Braavos quests

components/UI/menus/popup.tsx

@@ -28,6 +28,7 @@ const Popup: FunctionComponent<PopupProps> = ({
           <img className={styles.banner} src={banner} alt="banner" />
         </div>
         <div className={styles.contentSide}>
+          <button className={styles.close} onClick={onClose}></button>
           <p className={styles.description}>{description}</p>
           <div className={styles.button}>
             <Button onClick={onClick}>{buttonName}</Button>

components/UI/navbar.tsx

@@ -152,7 +152,7 @@ const Navbar: FunctionComponent = () => {
 
   return (
     <>
-      <div className={`fixed w-full z-[1]`} id="nav">
+      <div className={`fixed w-full z-[2]`} id="nav">
         <div
           className={`${styles.navbarContainer} ${
             navbarBg ? styles.navbarScrolled : ""

components/quests/questDetails.tsx

@@ -29,13 +29,17 @@ type QuestDetailsProps = {
   taskId?: string;
   res?: string;
   errorMsg?: string;
+  setShowDomainPopup: (show: boolean) => void;
+  hasRootDomain: boolean;
 };
 
 const QuestDetails: FunctionComponent<QuestDetailsProps> = ({
   quest,
   taskId,
   res,
   errorMsg,
+  setShowDomainPopup,
+  hasRootDomain,
 }) => {
   const { address } = useAccount();
   const { provider } = useProvider();
@@ -300,6 +304,8 @@ const QuestDetails: FunctionComponent<QuestDetailsProps> = ({
                     name: quest.issuer,
                     logoFavicon: quest.logo,
                   }}
+                  hasRootDomain={hasRootDomain}
+                  setShowDomainPopup={setShowDomainPopup}
                 />
               );
             })}

components/quests/task.tsx

@@ -25,6 +25,8 @@ const Task: FunctionComponent<Task> = ({
   setShowQuiz,
   quizName,
   issuer,
+  setShowDomainPopup,
+  hasRootDomain,
 }) => {
   const [isClicked, setIsClicked] = useState(false);
   const [isVerified, setIsVerified] = useState(false);
@@ -157,6 +159,7 @@ const Task: FunctionComponent<Task> = ({
         ) : (
           <div
             onClick={(e) => {
+              if (!hasRootDomain) return setShowDomainPopup(true);
               if (verifyEndpointType === "quiz") return openTask();
               if (verifyRedirect && address) window.open(verifyRedirect);
               verify(e);

hooks/useHasRootOrBraavosDomain.ts

@@ -0,0 +1,20 @@
+import BN from "bn.js";
+import { useContext, useEffect, useState } from "react";
+import { StarknetIdJsContext } from "../context/StarknetIdJsProvider";
+import { utils } from "starknetid.js";
+
+export default function useHasRootOrBraavosDomain(
+  address: string | BN | undefined
+) {
+  const [hasDomain, setHasDomain] = useState(false);
+  const { starknetIdNavigator } = useContext(StarknetIdJsContext);
+  useEffect(() => {
+    if (!address) return;
+    starknetIdNavigator?.getStarkName(address.toString()).then((res) => {
+      if (utils.isStarkRootDomain(res) || utils.isBraavosSubdomain(res))
+        setHasDomain(true);
+    });
+  }, [starknetIdNavigator, address]);
+
+  return hasDomain;
+}

pages/quest/[questPage].tsx

@@ -10,6 +10,7 @@ import ErrorScreen from "../../components/UI/screens/errorScreen";
 import NftIssuer from "../../components/quests/nftIssuer";
 import BackButton from "../../components/UI/backButton";
 import useHasRootDomain from "../../hooks/useHasRootDomain";
+import useHasRootOrBraavosDomain from "../../hooks/useHasRootOrBraavosDomain";
 import { useAccount } from "@starknet-react/core";
 import { starknetIdAppLink } from "../../utils/links";
 import Popup from "../../components/UI/menus/popup";
@@ -41,13 +42,16 @@ const QuestPage: NextPage = () => {
   });
   const [errorPageDisplay, setErrorPageDisplay] = useState(false);
   const { address } = useAccount();
-  const hasRootDomain = useHasRootDomain(address);
+  const hasRootDomain =
+    questId && parseInt(questId as string) >= 100
+      ? useHasRootOrBraavosDomain(address)
+      : useHasRootDomain(address);
   const [showDomainPopup, setShowDomainPopup] = useState<boolean>(false);
 
-  useEffect(() => {
-    if (!address) return;
-    setShowDomainPopup(!hasRootDomain);
-  }, [address, hasRootDomain]);
+  // useEffect(() => {
+  //   if (!address) return;
+  //   setShowDomainPopup(!hasRootDomain);
+  // }, [address, hasRootDomain]);
 
   // this fetches quest data
   useEffect(() => {
@@ -81,6 +85,7 @@ const QuestPage: NextPage = () => {
           description="To access Starknet Quest, you must own a Starknet domain. It's your passport to the Starknet ecosystem. Get yours now."
           buttonName="Get a Starknet Domain"
           onClick={() => window.open(starknetIdAppLink)}
+          onClose={() => setShowDomainPopup(false)}
         />
       )}
       <div className={homeStyles.backButton}>
@@ -103,6 +108,8 @@ const QuestPage: NextPage = () => {
         taskId={taskId as string | undefined}
         res={res as string | undefined}
         errorMsg={errorMsg as string | undefined}
+        setShowDomainPopup={setShowDomainPopup}
+        hasRootDomain={hasRootDomain}
       />
     </div>
   );

styles/Home.module.css

@@ -1,6 +1,6 @@
 .screen404,
 .screen {
-  z-index: 0;
+  z-index: 1;
   position: relative;
   padding-top: 12vh;
   background-color: var(--background);

styles/components/popup.module.css

@@ -4,7 +4,7 @@
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: var(--z-index-popup);
+  z-index: 2;
   display: flex;
   justify-content: center;
   align-items: center;

types/frontTypes.d.ts

@@ -25,6 +25,8 @@ type Task = {
   verifyError?: string;
   quizName?: string;
   issuer?: Issuer;
+  setShowDomainPopup: (show: boolean) => void;
+  hasRootDomain: boolean;
 };
 
 type TaskProps = Task & { id: number };