Merge pull request #372 from starknet-id/ayush/focustree-fe

feat: add rewards modal

app/quest/[questPage]/quest.tsx

@@ -48,11 +48,13 @@ const Quest: FunctionComponent<QuestPageProps> = ({
     expiry_timestamp: "loading",
     mandatory_domain: null,
     expired: false,
+    rewards_description: null,
   });
   const [errorPageDisplay, setErrorPageDisplay] = useState(false);
   const { address } = useAccount();
   const [showDomainPopup, setShowDomainPopup] = useState<boolean>(false);
   const hasRootDomain = useHasRootDomain(quest.mandatory_domain, address);
+  const [hasNftReward, setHasNftReward] = useState<boolean>(false);
   const { domain } = useDomainFromAddress(address);
 
   // this fetches quest data
@@ -61,6 +63,12 @@ const Quest: FunctionComponent<QuestPageProps> = ({
       .then((response) => response.json())
       .then((data: QuestDocument | QueryError) => {
         if ((data as QuestDocument).name) {
+          if (
+            (data as QuestDocument).rewards_nfts &&
+            (data as QuestDocument).rewards_nfts.length > 0
+          ) {
+            setHasNftReward(true);
+          }
           setQuest(data as QuestDocument);
         }
       })
@@ -125,6 +133,7 @@ const Quest: FunctionComponent<QuestPageProps> = ({
           errorMsg={errorMsg as string | undefined}
           setShowDomainPopup={setShowDomainPopup}
           hasRootDomain={hasRootDomain}
+          hasNftReward={hasNftReward}
         />
       </div>
     </>

components/quests/questDetails.tsx

@@ -33,6 +33,7 @@ type QuestDetailsProps = {
   errorMsg?: string;
   setShowDomainPopup: (show: boolean) => void;
   hasRootDomain: boolean;
+  hasNftReward?: boolean;
 };
 
 const QuestDetails: FunctionComponent<QuestDetailsProps> = ({
@@ -42,6 +43,7 @@ const QuestDetails: FunctionComponent<QuestDetailsProps> = ({
   errorMsg,
   setShowDomainPopup,
   hasRootDomain,
+  hasNftReward,
 }) => {
   const { address } = useAccount();
   const { provider } = useProvider();
@@ -165,6 +167,7 @@ const QuestDetails: FunctionComponent<QuestDetailsProps> = ({
   // this filters the claimable rewards to find only the unclaimed ones (on chain)
   useEffect(() => {
     (async () => {
+      if (hasNftReward === false) return;
       let unclaimed: EligibleReward[] = [];
       for (const contractAddr in eligibleRewards) {
         const perContractRewards = eligibleRewards[contractAddr];
@@ -206,7 +209,6 @@ const QuestDetails: FunctionComponent<QuestDetailsProps> = ({
   // this builds multicall for minting rewards
   useEffect(() => {
     const calldata: Call[] = [];
-
     // if the sequencer query failed, let's consider the eligible as unclaimed
     const to_claim =
       unclaimedRewards === undefined
@@ -366,12 +368,14 @@ const QuestDetails: FunctionComponent<QuestDetailsProps> = ({
               );
             })}
             <Reward
+              quest={quest}
+              hasNftReward={hasNftReward}
               reward={quest.rewards_title}
               imgSrc={quest.rewards_img}
               onClick={() => {
                 setRewardsEnabled(false);
               }}
-              disabled={!rewardsEnabled}
+              disabled={hasNftReward ? !rewardsEnabled : false}
               mintCalldata={mintCalldata}
               questName={quest.name}
             />

components/quests/reward.tsx

@@ -12,15 +12,21 @@ import {
   NotificationType,
   TransactionType,
 } from "../../constants/notifications";
+import { QuestDocument } from "../../types/backTypes";
+import RewardModal from "./rewardModal";
+import rewardStyles from "../../styles/components/quests/modal.module.css";
 import { CDNImg } from "../cdn/image";
 
+
 type RewardProps = {
   onClick: () => void;
   reward: string;
   imgSrc: string;
   disabled: boolean;
   mintCalldata: Call[] | undefined;
   questName: string;
+  hasNftReward?: boolean;
+  quest: QuestDocument;
 };
 
 const Reward: FunctionComponent<RewardProps> = ({
@@ -30,16 +36,23 @@ const Reward: FunctionComponent<RewardProps> = ({
   disabled,
   mintCalldata,
   questName,
+  hasNftReward,
+  quest,
 }) => {
   const [modalTxOpen, setModalTxOpen] = useState(false);
   const { address } = useAccount();
   const { addTransaction } = useNotificationManager();
   const { writeAsync: executeMint } = useContractWrite({
     calls: mintCalldata,
   });
+  const [showSuccessModal, setShowSuccessModal] = useState(false);
   const router = useRouter();
 
   const submitTx = useCallback(async () => {
+    if (!hasNftReward) {
+      setShowSuccessModal(true);
+      return;
+    }
     if (!address) return;
     const tx = await executeMint();
     onClick();
@@ -89,6 +102,39 @@ const Reward: FunctionComponent<RewardProps> = ({
           </div>
         }
       />
+
+      <RewardModal
+        open={showSuccessModal}
+        closeModal={() => setShowSuccessModal(false)}
+        message={
+          <div className="flex flex-col items-center justify-center text-center">
+            <div className="bg-[#1F1F25] w-full flex p-8 justify-center items-center flex-col gap-8 rounded-tr-3xl rounded-tl-3xl">
+              <p className={rewardStyles.menu_title}>Unlock Your Gift!</p>
+              <img
+                src="/icons/gift.svg"
+                width={183}
+                height={177}
+                alt="trophy icon"
+              />
+            </div>
+            <div className="flex flex-col justify-center p-4 w-auto">
+              <div className="flex flex-col justify-center gap-2 px-8 pt-6">
+                <div className="flex flex-row justify-center items-center gap-2 pb-4">
+                  <img width={40} src={quest.logo} />
+                  <p className="text-2xl font-bold">{quest.issuer}</p>
+                </div>
+                <p>Congratulations on completing the quest! 🎉 </p>
+                <p>{quest.rewards_description}</p>
+              </div>
+              <div className="p-6 w-max self-center">
+                <Button onClick={() => setShowSuccessModal(false)}>
+                  Claim Rewards
+                </Button>
+              </div>
+            </div>
+          </div>
+        }
+      />
     </div>
   );
 };

components/quests/rewardModal.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import styles from "../../styles/components/quests/modal.module.css";
+import { FunctionComponent, ReactNode } from "react";
+import { Modal } from "@mui/material";
+
+type RewardModalProps = {
+  message: ReactNode;
+  closeModal: () => void;
+  open: boolean;
+};
+
+const RewardModal: FunctionComponent<RewardModalProps> = ({
+  message,
+  closeModal,
+  open,
+}) => {
+  return (
+    <Modal
+      disableAutoFocus
+      open={open}
+      onClose={closeModal}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+    >
+      <div className={styles.menu}>
+        <button className={styles.menu_close} onClick={closeModal}>
+          <svg viewBox="0 0 24 24">
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M6 18L18 6M6 6l12 12"
+            ></path>
+          </svg>
+        </button>
+        {message}
+      </div>
+    </Modal>
+  );
+};
+export default RewardModal;

styles/components/quests/modal.module.css

@@ -0,0 +1,57 @@
+.menu {
+    position: absolute;
+    background-color: var(--background600);
+    align-self: center;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    border-radius: 20px;
+    max-width: 694px;
+    display: flex;
+    flex-direction: column;
+    z-index: 1000;
+    width: 100vw;
+}
+
+.blackFilter {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    background-color: rgba(0, 0, 0, 0.192);
+    z-index: auto;
+}
+
+.menu_close {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    width: 22px;
+    stroke: rgb(101, 101, 101);
+    cursor: url(../../../public/icons/pointer-cursor.png), pointer;
+    transition: 0.3s;
+    background-color: transparent;
+    border: none;
+}
+
+.menu_close:hover {
+    stroke: white;
+}
+
+.menu_title {
+    color: var(--secondary);
+    font-size: 25px;
+    font-weight: bold;
+    text-align: center;
+}
+
+@media (max-width: 820px) {
+    .menu {
+        width: 90%;
+        padding: 30px;
+    }
+
+    .menu_title {
+        font-size: 19px;
+        margin: -7px -2px 2px;
+    }
+}

types/backTypes.d.ts

@@ -18,6 +18,7 @@ type QuestDocument = {
   expiry_timestamp: string | null;
   mandatory_domain: string | null;
   expired: boolean;
+  rewards_description: string | null;
 };
 
 type NFTItem = {