Merge pull request #171 from starknet-id/feat/domain-popup

components/UI/iconsComponents/icons/closeIcon.tsx

@@ -1,8 +1,8 @@
 import React, { FunctionComponent } from "react";
 
-const CloseIcon: FunctionComponent = () => {
+const CloseIcon: FunctionComponent<IconProps> = ({ width }) => {
   return (
-    <svg viewBox="0 0 24 24">
+    <svg viewBox="0 0 24 24" width={width} height={width}>
       <path
         strokeLinecap="round"
         strokeLinejoin="round"

components/UI/menus/popup.tsx

@@ -0,0 +1,46 @@
+import React, { FunctionComponent } from "react";
+import styles from "../../../styles/components/popup.module.css";
+import Button from "../button";
+import CloseIcon from "../iconsComponents/icons/closeIcon";
+
+type PopupProps = {
+  title: string;
+  banner: string;
+  description: string;
+  buttonName: string;
+  onClick: () => void;
+  onClose?: () => void;
+};
+
+const Popup: FunctionComponent<PopupProps> = ({
+  title,
+  banner,
+  description,
+  buttonName,
+  onClick,
+  onClose,
+}) => {
+  return (
+    <div className={styles.popupContainer}>
+      <div className={styles.popup}>
+        <div className={styles.titleSide}>
+          <h1 className={styles.title}>{title}</h1>
+          <img className={styles.banner} src={banner} alt="banner" />
+        </div>
+        <div className={styles.contentSide}>
+          <p className={styles.description}>{description}</p>
+          <div className={styles.button}>
+            <Button onClick={onClick}>{buttonName}</Button>
+          </div>
+        </div>
+        {onClose && (
+          <button onClick={onClose} className={styles.close}>
+            <CloseIcon width="16" />
+          </button>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default Popup;

components/UI/modalWallet.tsx

@@ -74,7 +74,7 @@ const ModalWallet: FunctionComponent<ModalWalletProps> = ({
     >
       <div className={styles.menu}>
         <button className={styles.menu_close} onClick={closeModal}>
-          <CloseIcon />
+          <CloseIcon width="24" />
         </button>
         <div className={styles.menu_title}>
           <div className={styles.menu_title}>

components/quests/quest.tsx

@@ -17,19 +17,21 @@ const Quest: FunctionComponent<QuestProps> = ({
   reward,
 }) => {
   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>
+    <>
+      <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>
+    </>
   );
 };
 

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;
+}

pages/quest/[questPage].tsx

@@ -9,6 +9,10 @@ import RewardSkeleton from "../../components/skeletons/rewardSkeleton";
 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 { useAccount } from "@starknet-react/core";
+import { starknetIdAppLink } from "../../utils/links";
+import Popup from "../../components/UI/menus/popup";
 
 const QuestPage: NextPage = () => {
   const router = useRouter();
@@ -36,6 +40,14 @@ const QuestPage: NextPage = () => {
     expiry_timestamp: "loading",
   });
   const [errorPageDisplay, setErrorPageDisplay] = useState(false);
+  const { address } = useAccount();
+  const hasRootDomain = useHasRootDomain(address);
+  const [showDomainPopup, setShowDomainPopup] = useState<boolean>(false);
+
+  useEffect(() => {
+    if (!address) return;
+    setShowDomainPopup(!hasRootDomain);
+  }, [address, hasRootDomain]);
 
   // this fetches quest data
   useEffect(() => {
@@ -62,6 +74,15 @@ const QuestPage: NextPage = () => {
     />
   ) : (
     <div className={homeStyles.screen}>
+      {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={homeStyles.backButton}>
         <BackButton onClick={() => router.back()} />
       </div>

styles/components/popup.module.css

@@ -0,0 +1,134 @@
+.popupContainer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: var(--z-index-popup);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0, 0, 0, 0.5);
+}
+
+.popup {
+  position: relative;
+  width: calc(100% - 2rem);
+  max-width: 800px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
+  display: flex;
+  border-radius: 5px;
+  background-color: var(--background600);
+  border-radius: 16px;
+}
+
+.titleSide,
+.contentSide {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  align-items: flex-start;
+  padding: 30.75px 46.125px;
+}
+
+.titleSide {
+  background-color: var(--menu-background);
+  max-width: 52%;
+  border-radius: 16px 0px 0px 16px;
+}
+
+.contentSide {
+  max-width: 48%;
+}
+
+.title {
+  color: var(--secondary);
+  text-align: center;
+  text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
+
+  /* Title/H2 */
+  font-family: Sora;
+  font-size: 36px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 48px; /* 133.333% */
+  margin-top: 24px;
+}
+
+.button {
+  margin-bottom: auto;
+}
+
+.description {
+  margin: auto 0;
+  color: var(--secondary);
+  text-align: center;
+
+  /* Body/default/regular */
+  font-family: Sora;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 32px; /* 200% */
+}
+
+.banner {
+  margin: 24px 0;
+}
+
+.close {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+  width: 30px;
+  height: 30px;
+  cursor: pointer;
+  stroke: var(--background500);
+}
+
+.close::before,
+.close::after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 100%;
+  height: 2px;
+  background-color: var(--color-black);
+  transform: translate(-50%, -50%) rotate(45deg);
+}
+
+.close::after {
+  transform: translate(-50%, -50%) rotate(-45deg);
+}
+
+@media (max-width: 768px) {
+  .popupContainer {
+    align-items: flex-end;
+  }
+  .popup {
+    flex-direction: column;
+    align-items: center;
+    margin-top: 12vh;
+    max-height: calc(88vh - 1rem);
+    overflow-y: auto;
+    padding: 48px 24px;
+    background-color: var(--menu-background);
+    border-radius: 16px 16px 0 0;
+  }
+  .titleSide,
+  .contentSide {
+    max-width: 100%;
+    padding: 0 24px;
+    background-color: unset;
+    align-items: center;
+  }
+  .button {
+    margin-top: 2rem;
+  }
+  .banner {
+    width: 400px;
+  }
+}

utils/links.ts

@@ -0,0 +1,3 @@
+export const starknetIdAppLink = `https://${
+  process.env.NEXT_PUBLIC_IS_TESTNET ? "goerli." : ""
+}app.starknet.id/`;