making requested changes

lfglabs-dev · Sep 30, 2023 · 7e7b298 · 7e7b298
1 parent 3a4d1a7
commit 7e7b298
Show file tree

Hide file tree

Showing 7 changed files with 69 additions and 63 deletions.
diff --git a/components/UI/menus/popup.tsx b/components/UI/menus/popup.tsx
@@ -9,7 +9,7 @@ type PopupProps = {
   description: string;
   buttonName: string;
   onClick: () => void;
-  onClose: () => void;
+  onClose?: () => void;
 };
 
 const Popup: FunctionComponent<PopupProps> = ({
@@ -33,9 +33,11 @@ const Popup: FunctionComponent<PopupProps> = ({
             <Button onClick={onClick}>{buttonName}</Button>
           </div>
         </div>
-        <button onClick={onClose} className={styles.close}>
-          <CloseIcon width="16" />
-        </button>
+        {onClose && (
+          <button onClick={onClose} className={styles.close}>
+            <CloseIcon width="16" />
+          </button>
+        )}
       </div>
     </div>
   );

diff --git a/components/UI/navbar.tsx b/components/UI/navbar.tsx
@@ -26,8 +26,6 @@ import AccountCircleIcon from "@mui/icons-material/AccountCircle";
 import { useRouter } from "next/router";
 import theme from "../../styles/theme";
 import { FaDiscord, FaTwitter } from "react-icons/fa";
-import useHasDomain from "../../hooks/useHasDomain";
-import Popup from "./menus/popup";
 
 const Navbar: FunctionComponent = () => {
   const [nav, setNav] = useState<boolean>(false);
@@ -48,13 +46,6 @@ const Navbar: FunctionComponent = () => {
   const { hashes } = useTransactionManager();
   const [showWallet, setShowWallet] = useState<boolean>(false);
   const router = useRouter();
-  const hasDomain = useHasDomain(address);
-  const [showDomainPopup, setShowDomainPopup] = useState<boolean>(false);
-
-  useEffect(() => {
-    if (!address) return;
-    setShowDomainPopup(!hasDomain);
-  }, [address, hasDomain]);
 
   useEffect(() => {
     // to handle autoconnect starknet-react adds connector id in local storage
@@ -162,16 +153,6 @@ const Navbar: FunctionComponent = () => {
   return (
     <>
       <div className={`fixed w-full z-[1]`} id="nav">
-        {showDomainPopup && (
-          <Popup
-            title="Mandatory Starknet Domain"
-            banner="/visuals/profile.webp"
-            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("https://app.starknet.id/")}
-            onClose={() => setShowDomainPopup(false)}
-          />
-        )}
         <div
           className={`${styles.navbarContainer} ${
             navbarBg ? styles.navbarScrolled : ""

diff --git a/components/quests/quest.tsx b/components/quests/quest.tsx
@@ -1,5 +1,9 @@
-import React, { FunctionComponent } from "react";
+import React, { FunctionComponent, useEffect, useState } from "react";
 import styles from "../../styles/quests.module.css";
+import useHasRootDomain from "../../hooks/useHasRootDomain";
+import { useAccount } from "@starknet-react/core";
+import Popup from "../UI/menus/popup";
+import { starknetIdAppLink } from "../../utils/links";
 
 type QuestProps = {
   onClick: () => void;
@@ -16,20 +20,40 @@ const Quest: FunctionComponent<QuestProps> = ({
   issuer,
   reward,
 }) => {
+  const { address } = useAccount();
+  const hasRootDomain = useHasRootDomain(address);
+  const [showDomainPopup, setShowDomainPopup] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (!address) return;
+    setShowDomainPopup(!hasRootDomain);
+  }, [address, hasRootDomain]);
+
   return (
-    <div className={styles.questCard} onClick={onClick}>
-      <img src={imgSrc} className={styles.questImage} />
-      <div className={styles.questInfos}>
-        <h3 className={styles.questTitle}>{title}</h3>
-        <div className="flex mt-2 mb-1 items-center">
-          <p className="text-gray-400">{issuer.name}</p>
-        </div>
-        <div className="flex mt-2 mb-1 items-center">
-          <img width={20} src={issuer.logoFavicon} />
-          <p className="text-white ml-2">{reward}</p>
+    <>
+      {showDomainPopup && (
+        <Popup
+          title="Mandatory Starknet Domain"
+          banner="/visuals/profile.webp"
+          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)}
+        />
+      )}
+      <div className={styles.questCard} onClick={onClick}>
+        <img src={imgSrc} className={styles.questImage} />
+        <div className={styles.questInfos}>
+          <h3 className={styles.questTitle}>{title}</h3>
+          <div className="flex mt-2 mb-1 items-center">
+            <p className="text-gray-400">{issuer.name}</p>
+          </div>
+          <div className="flex mt-2 mb-1 items-center">
+            <img width={20} src={issuer.logoFavicon} />
+            <p className="text-white ml-2">{reward}</p>
+          </div>
         </div>
       </div>
-    </div>
+    </>
   );
 };
 

diff --git a/components/quests/reward.tsx b/components/quests/reward.tsx
@@ -11,8 +11,9 @@ import { useRouter } from "next/router";
 import Lottie from "lottie-react";
 import verifiedLottie from "../../public/visuals/verifiedLottie.json";
 import { Call } from "starknet";
-import useHasDomain from "../../hooks/useHasDomain";
+import useHasRootDomain from "../../hooks/useHasRootDomain";
 import Popup from "../UI/menus/popup";
+import { starknetIdAppLink } from "../../utils/links";
 
 type RewardProps = {
   onClick: () => void;
@@ -35,7 +36,7 @@ const Reward: FunctionComponent<RewardProps> = ({
     calls: mintCalldata,
   });
   const { address } = useAccount();
-  const hasDomain = useHasDomain(address);
+  const hasRootDomain = useHasRootDomain(address);
   const [showDomainPopup, setShowDomainPopup] = useState<boolean>(false);
   const router = useRouter();
 
@@ -53,13 +54,13 @@ const Reward: FunctionComponent<RewardProps> = ({
 
   return (
     <div className={styles.reward}>
-      {showDomainPopup && !hasDomain ? (
+      {showDomainPopup && !hasRootDomain ? (
         <Popup
           title="Mandatory Starknet Domain"
           banner="/visuals/profile.webp"
           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("https://app.starknet.id/")}
+          onClick={() => window.open(starknetIdAppLink)}
           onClose={() => setShowDomainPopup(false)}
         />
       ) : null}

diff --git a/hooks/useHasDomain.ts b/hooks/useHasDomain.ts
diff --git a/hooks/useHasRootDomain.ts b/hooks/useHasRootDomain.ts
@@ -0,0 +1,19 @@
+import BN from "bn.js";
+import { useContext, useEffect, useState } from "react";
+import { StarknetIdJsContext } from "../context/StarknetIdJsProvider";
+import { hexToDecimal } from "../utils/feltService";
+
+export default function useHasRootDomain(address: string | BN | undefined) {
+  const [hasRootDomain, setHasRootDomain] = useState(false);
+  const { starknetIdNavigator } = useContext(StarknetIdJsContext);
+  useEffect(() => {
+    if (!address) return;
+    fetch(
+      `${
+        process.env.NEXT_PUBLIC_STARKNET_ID_API_LINK
+      }/addr_to_domain?addr=${hexToDecimal(address.toString())}`
+    ).then((res) => res.status === 200 && setHasRootDomain(true));
+  }, [starknetIdNavigator, address]);
+
+  return hasRootDomain;
+}
diff --git a/utils/links.ts b/utils/links.ts
@@ -0,0 +1,3 @@
+export const starknetIdAppLink = `https://${
+  process.env.NEXT_PUBLIC_IS_TESTNET ? "goerli." : ""
+}app.starknet.id/`;