From b76f617fd05e02049eeb93b777aa1e9a222966f1 Mon Sep 17 00:00:00 2001
From: Iris <iris.devillars@gmail.com>
Date: Mon, 9 Oct 2023 11:44:03 +0200
Subject: [PATCH 1/3] ref: allow braavos subdomains on specific quest pages

---
 components/UI/navbar.tsx           |  2 +-
 hooks/useHasRootOrBraavosDomain.ts | 20 ++++++++++++++++++++
 pages/quest/[questPage].tsx        |  6 +++++-
 styles/Home.module.css             |  2 +-
 styles/components/popup.module.css |  2 +-
 5 files changed, 28 insertions(+), 4 deletions(-)
 create mode 100644 hooks/useHasRootOrBraavosDomain.ts

diff --git a/components/UI/navbar.tsx b/components/UI/navbar.tsx
index bc7ce831..471d22eb 100644
--- a/components/UI/navbar.tsx
+++ b/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 : ""
diff --git a/hooks/useHasRootOrBraavosDomain.ts b/hooks/useHasRootOrBraavosDomain.ts
new file mode 100644
index 00000000..1b39c3bb
--- /dev/null
+++ b/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;
+}
diff --git a/pages/quest/[questPage].tsx b/pages/quest/[questPage].tsx
index 6c9efc68..900bba4c 100644
--- a/pages/quest/[questPage].tsx
+++ b/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,7 +42,10 @@ 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(() => {
diff --git a/styles/Home.module.css b/styles/Home.module.css
index 4a97e990..a5c42f02 100644
--- a/styles/Home.module.css
+++ b/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);
diff --git a/styles/components/popup.module.css b/styles/components/popup.module.css
index 30a91a16..fc5d6f65 100644
--- a/styles/components/popup.module.css
+++ b/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;

From 45dc97d399f3d19b0680f60c2731fd17482976b2 Mon Sep 17 00:00:00 2001
From: Iris <iris.devillars@gmail.com>
Date: Mon, 9 Oct 2023 12:02:49 +0200
Subject: [PATCH 2/3] ref: show popup on btn click

---
 components/quests/questDetails.tsx |  6 ++++++
 components/quests/task.tsx         |  3 +++
 pages/quest/[questPage].tsx        | 10 ++++++----
 types/frontTypes.d.ts              |  2 ++
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/components/quests/questDetails.tsx b/components/quests/questDetails.tsx
index e84f28d3..7761f436 100644
--- a/components/quests/questDetails.tsx
+++ b/components/quests/questDetails.tsx
@@ -29,6 +29,8 @@ type QuestDetailsProps = {
   taskId?: string;
   res?: string;
   errorMsg?: string;
+  setShowDomainPopup: (show: boolean) => void;
+  hasRootDomain: boolean;
 };
 
 const QuestDetails: FunctionComponent<QuestDetailsProps> = ({
@@ -36,6 +38,8 @@ const QuestDetails: FunctionComponent<QuestDetailsProps> = ({
   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}
                 />
               );
             })}
diff --git a/components/quests/task.tsx b/components/quests/task.tsx
index 2d98eeef..89c12536 100644
--- a/components/quests/task.tsx
+++ b/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);
diff --git a/pages/quest/[questPage].tsx b/pages/quest/[questPage].tsx
index 900bba4c..0d13639d 100644
--- a/pages/quest/[questPage].tsx
+++ b/pages/quest/[questPage].tsx
@@ -48,10 +48,10 @@ const QuestPage: NextPage = () => {
       : 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(() => {
@@ -107,6 +107,8 @@ const QuestPage: NextPage = () => {
         taskId={taskId as string | undefined}
         res={res as string | undefined}
         errorMsg={errorMsg as string | undefined}
+        setShowDomainPopup={setShowDomainPopup}
+        hasRootDomain={hasRootDomain}
       />
     </div>
   );
diff --git a/types/frontTypes.d.ts b/types/frontTypes.d.ts
index a7daa9ca..ff2de17e 100644
--- a/types/frontTypes.d.ts
+++ b/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 };

From f859208f4f0f1873f06cab6a7c2828cb65c84be5 Mon Sep 17 00:00:00 2001
From: Iris <iris.devillars@gmail.com>
Date: Mon, 9 Oct 2023 12:09:24 +0200
Subject: [PATCH 3/3] feat: add close btn on popup modal

---
 components/UI/menus/popup.tsx | 1 +
 pages/quest/[questPage].tsx   | 1 +
 2 files changed, 2 insertions(+)

diff --git a/components/UI/menus/popup.tsx b/components/UI/menus/popup.tsx
index d2f73af0..e579c30b 100644
--- a/components/UI/menus/popup.tsx
+++ b/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>
diff --git a/pages/quest/[questPage].tsx b/pages/quest/[questPage].tsx
index 0d13639d..e960dd0c 100644
--- a/pages/quest/[questPage].tsx
+++ b/pages/quest/[questPage].tsx
@@ -85,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}>