feat: add tags and modify text on cards (#498)

* feat: add tags and modify text on cards * adding boost reward tag
lfglabs-dev · Feb 3, 2024 · 999f377 · 999f377
1 parent 31330d0
commit 999f377
Show file tree

Hide file tree

Showing 12 changed files with 116 additions and 94 deletions.
diff --git a/app/leaderboard/page.tsx b/app/leaderboard/page.tsx
@@ -317,6 +317,7 @@ export default function Page() {
               reward={featuredQuest?.rewards_title}
               desc={featuredQuest?.desc}
               expiry={featuredQuest?.expiry_timestamp}
+              questId={featuredQuest?.id}
             />
           </div>
           <div className={styles.leaderboard_layout}>

diff --git a/app/page.tsx b/app/page.tsx
@@ -36,6 +36,7 @@ export default function Page() {
             reward={featuredQuest?.rewards_title}
             desc={featuredQuest?.desc}
             expiry={featuredQuest?.expiry_timestamp}
+            questId={featuredQuest?.id}
           />
         </div>
 

diff --git a/app/quest-boost/[boostId]/page.tsx b/app/quest-boost/[boostId]/page.tsx
@@ -2,6 +2,7 @@
 
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import styles from "@styles/questboost.module.css";
+import questStyles from "@styles/quests.module.css";
 import {
   getBoostById,
   getQuestParticipants,
@@ -141,8 +142,8 @@ export default function Page({ params }: BoostQuestPageProps) {
           <div className={styles.claim_button_container}>
             <div className={styles.claim_button_text_content}>
               <p>Reward:</p>
-              <div className="flex flex-row gap-2">
-                <p className={styles.claim_button_text_highlight}>
+              <div className={questStyles.issuer}>
+                <p>
                   {boost?.amount} {getTokenName(boost?.token ?? "")}
                 </p>
                 <TokenSymbol tokenAddress={boost?.token ?? ""} />

diff --git a/app/quest/[questPage]/quest.tsx b/app/quest/[questPage]/quest.tsx
@@ -8,7 +8,6 @@ import { useRouter } from "next/navigation";
 import { QueryError, QuestDocument } from "../../../types/backTypes";
 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";

diff --git a/components/UI/featured_banner/featuredQuest.tsx b/components/UI/featured_banner/featuredQuest.tsx
@@ -5,6 +5,7 @@ import { useMediaQuery } from "@mui/material";
 import FeaturedQuestSkeleton from "@components/skeletons/featuredQuestSkeleton";
 import Timer from "@components/quests/timer";
 import { CDNImg } from "@components/cdn/image";
+import BoostReward from "@components/quests/boostReward";
 
 type FeaturedQuestProps = {
   onClick?: () => void;
@@ -15,6 +16,7 @@ type FeaturedQuestProps = {
   desc?: string;
   expiry: string | null | undefined;
   heading: string;
+  questId?: number;
 };
 
 const FeaturedQuest: FunctionComponent<FeaturedQuestProps> = ({
@@ -26,6 +28,7 @@ const FeaturedQuest: FunctionComponent<FeaturedQuestProps> = ({
   desc,
   expiry,
   heading,
+  questId,
 }) => {
   const isSmallScreen = useMediaQuery("(max-width: 1024px)");
 
@@ -35,13 +38,18 @@ const FeaturedQuest: FunctionComponent<FeaturedQuestProps> = ({
         <p className={styles.featuredQuestHeading}>{heading}</p>
         <h3 className={styles.featuredQuestTitle}>{title}</h3>
         <p className={styles.featuredQuestDescription}>{desc}</p>
-        <div className="flex mt-4 mb-4 items-center">
-          <CDNImg
-            width={20}
-            src={issuer?.logoFavicon}
-            className={styles.featuredQuestRewardIcon}
-          />
-          <p className={styles.featuredQuestReward}>{reward}</p>
+        <div className="flex items-center mb-4 mt-6 gap-2">
+          {issuer?.name || issuer?.logoFavicon ? (
+            <div className={styles.issuer}>
+              <CDNImg
+                width={20}
+                src={issuer?.logoFavicon}
+                className={styles.featuredQuestRewardIcon}
+              />
+              <p className={styles.featuredQuestReward}>{reward}</p>
+            </div>
+          ) : null}
+          {questId ? <BoostReward questId={questId} /> : null}
         </div>
         <div className={styles.featuredQuestButtonContainer}>
           <Button onClick={onClick}>Begin</Button>

diff --git a/components/quest-boost/boostCard.tsx b/components/quest-boost/boostCard.tsx
@@ -1,5 +1,6 @@
 import React, { FunctionComponent, useEffect, useMemo, useState } from "react";
 import styles from "@styles/questboost.module.css";
+import questStyles from "@styles/quests.module.css";
 import Cardstyles from "@styles/components/card.module.css";
 import Link from "next/link";
 import UnavailableIcon from "@components/UI/iconsComponents/icons/unavailableIcon";
@@ -87,10 +88,12 @@ const BoostCard: FunctionComponent<BoostCardProps> = ({
             {boost?.quests.length} quest{boost.quests.length > 1 ? "s" : ""}
           </p>
           {!hasUserCompletedBoost && boost.expiry > Date.now() ? (
-            <div className="flex flex-row gap-2 items-center p-1.5">
-              <p>{boost?.amount}</p>
-              <TokenSymbol tokenAddress={boost.token} />
-            </div>
+            <>
+              <div className={questStyles.issuer}>
+                <p>{boost?.amount}</p>
+                <TokenSymbol tokenAddress={boost.token} />
+              </div>
+            </>
           ) : (
             <div className="flex w-full">
               <div className="flex items-center">

diff --git a/components/quests/boostReward.tsx b/components/quests/boostReward.tsx
@@ -0,0 +1,61 @@
+import React, {
+  FunctionComponent,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
+import { getBoosts } from "@services/apiService";
+import TokenSymbol from "@components/quest-boost/TokenSymbol";
+import { QuestsContext } from "@context/QuestsProvider";
+import styles from "../../styles/quests.module.css";
+
+type BoostRewardProps = {
+  questId: number;
+};
+
+const BoostReward: FunctionComponent<BoostRewardProps> = ({ questId }) => {
+  const { boostedQuests } = useContext(QuestsContext);
+  const [boost, setBoost] = useState<Boost>();
+  const [isQuestBoosted, setIsQuestBoosted] = useState<boolean>(false);
+  const checkIfBoostedQuest = useCallback(async () => {
+    if (!boostedQuests) return;
+    if (boostedQuests.length > 0 && boostedQuests.includes(questId))
+      setIsQuestBoosted(true);
+  }, []);
+
+  const fetchBoosts = useCallback(async (id: string) => {
+    try {
+      const response = await getBoosts();
+      if (!response) return;
+      const boost = response.find((b: Boost) =>
+        b.quests.includes(parseInt(id))
+      );
+      if (!boost) return;
+      setBoost(boost);
+    } catch (err) {
+      console.log("Error while fetching boost by id", err);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isQuestBoosted) return;
+    fetchBoosts(questId.toString());
+  }, [isQuestBoosted, questId]);
+
+  useEffect(() => {
+    checkIfBoostedQuest();
+  }, []);
+  return (
+    <>
+      {boost && isQuestBoosted ? (
+        <div className={styles.issuer} style={{ gap: 0, padding: "8px 16px" }}>
+          <TokenSymbol tokenAddress={boost?.token} />
+          <p className="text-white ml-2">{boost?.amount}</p>
+        </div>
+      ) : null}
+    </>
+  );
+};
+
+export default BoostReward;
diff --git a/components/quests/quest.tsx b/components/quests/quest.tsx
@@ -1,21 +1,12 @@
-import React, {
-  FunctionComponent,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from "react";
+import React, { FunctionComponent, useMemo } from "react";
 import { useContext } from "react";
 import { QuestsContext } from "@context/QuestsProvider";
 import CheckIcon from "@components/UI/iconsComponents/icons/checkIcon";
 import UnavailableIcon from "@components/UI/iconsComponents/icons/unavailableIcon";
 import styles from "@styles/quests.module.css";
 import { CDNImg } from "@components/cdn/image";
 import QuestCard from "./questCard";
-import { getBoosts } from "@services/apiService";
-import TokenSymbol from "@components/quest-boost/TokenSymbol";
-import { TOKEN_DECIMAL_MAP } from "@utils/constants";
-import { getTokenName } from "@utils/tokenService";
+import BoostReward from "./boostReward";
 
 type QuestProps = {
   onClick: () => void;
@@ -36,42 +27,11 @@ const Quest: FunctionComponent<QuestProps> = ({
   id,
   expired,
 }) => {
-  const { completedQuestIds, boostedQuests } = useContext(QuestsContext);
+  const { completedQuestIds } = useContext(QuestsContext);
   const isCompleted = useMemo(
     () => completedQuestIds.includes(id),
     [id, completedQuestIds]
   );
-  const [boost, setBoost] = useState<Boost>();
-  const [isQuestBoosted, setIsQuestBoosted] = useState<boolean>(false);
-
-  const checkIfBoostedQuest = useCallback(async () => {
-    if (!boostedQuests) return;
-    if (boostedQuests.length > 0 && boostedQuests.includes(id))
-      setIsQuestBoosted(true);
-  }, []);
-
-  const fetchBoosts = useCallback(async (id: string) => {
-    try {
-      const response = await getBoosts();
-      if (!response) return;
-      const boost = response.find((b: Boost) =>
-        b.quests.includes(parseInt(id))
-      );
-      if (!boost) return;
-      setBoost(boost);
-    } catch (err) {
-      console.log("Error while fetching boost by id", err);
-    }
-  }, []);
-
-  useEffect(() => {
-    if (!isQuestBoosted) return;
-    fetchBoosts(id.toString());
-  }, [isQuestBoosted, id]);
-
-  useEffect(() => {
-    checkIfBoostedQuest();
-  }, []);
 
   return (
     <QuestCard
@@ -87,7 +47,7 @@ const Quest: FunctionComponent<QuestProps> = ({
       >
         <p className="text-gray-400">{issuer.name}</p>
       </div>
-      <div className="flex gap-2">
+      <div className="flex gap-2 mt-3">
         <div className={styles.issuer}>
           {isCompleted ? (
             <>
@@ -106,15 +66,7 @@ const Quest: FunctionComponent<QuestProps> = ({
             </>
           )}
         </div>
-        {boost && isQuestBoosted ? (
-          <div
-            className={styles.issuer}
-            style={{ gap: 0, padding: "8px 16px" }}
-          >
-            <TokenSymbol tokenAddress={boost?.token} />
-            <p className="text-white ml-2">{boost?.amount}</p>
-          </div>
-        ) : null}
+        <BoostReward questId={id} />
       </div>
     </QuestCard>
   );

diff --git a/components/quests/reward.tsx b/components/quests/reward.tsx
@@ -8,14 +8,12 @@ import Lottie from "lottie-react";
 import verifiedLottie from "@public/visuals/verifiedLottie.json";
 import { Call } from "starknet";
 import { useNotificationManager } from "@hooks/useNotificationManager";
-import {
-  NotificationType,
-  TransactionType,
-} from "@constants/notifications";
+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 "@components/cdn/image";
+import BoostReward from "./boostReward";
 
 type RewardProps = {
   onClick: () => void;
@@ -70,10 +68,13 @@ const Reward: FunctionComponent<RewardProps> = ({
 
   return (
     <div className={styles.reward}>
-      <div className="flex items-center">
-        <p className="mr-1">Reward: </p>
-        <CDNImg width={25} src={imgSrc} />
-        <p className="ml-1">{reward}</p>
+      <div className="flex items-center gap-2">
+        <p>Reward: </p>
+        <div className={styles.issuer}>
+          <p>{reward}</p>
+          <CDNImg width={25} src={imgSrc} />
+        </div>
+        <BoostReward questId={quest.id} />
       </div>
       <div className="max-w-lg">
         {/* getReward */}

diff --git a/styles/components/quests/card.module.css b/styles/components/quests/card.module.css
@@ -35,8 +35,12 @@
   font-size: 1.3rem;
   color: var(--secondary);
   font-family: "Sora-Bold";
-  margin: 0px;
+  margin: 0;
   text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 240px;
 }
 
 .card[aria-disabled="true"] {

diff --git a/styles/questboost.module.css b/styles/questboost.module.css
@@ -52,16 +52,12 @@
   font-size: 1.2rem;
   color: var(--secondary);
   font-family: "Sora-Bold";
-  margin: 0px;
-  text-align: left;
-}
-
-.card_title {
-  font-size: 1.2rem;
-  color: var(--secondary);
-  font-family: "Sora-Bold";
-  margin: 0px;
+  margin: 0;
   text-align: left;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 210px;
 }
 
 .issuer {
@@ -87,7 +83,7 @@
   justify-content: space-between;
   align-items: center;
   border-radius: 0.5rem;
-  background: #29282b;
+  background: var(--menu-background);
   box-shadow: 0px 2px 30px 0px rgba(16, 16, 18, 0.06);
 }
 

diff --git a/styles/quests.module.css b/styles/quests.module.css
@@ -70,8 +70,7 @@
   max-width: 90%;
   width: 728px;
 
-  /* Background/600 */
-  background: #29282b;
+  background-color: var(--menu-background);
   border-radius: 8px;
   cursor: url(../public/icons/pointer-cursor.png), pointer;
   padding: 5px 24px;
@@ -170,8 +169,7 @@
   max-width: 90%;
   margin-top: 1.5rem;
 
-  /* Background/600 */
-  background: #29282b;
+  background-color: var(--menu-background);
 
   /* Small Shadow */
   box-shadow: 0px 2px 30px rgba(16, 16, 18, 0.06);
@@ -249,15 +247,12 @@
 
 .issuer {
   display: flex;
-  margin-top: 0.5rem;
-  margin-bottom: 0.25rem;
   /* Auto layout */
   flex-direction: row;
   justify-content: center;
   align-items: center;
-  padding: 8px 24px;
+  padding: 4px 1rem;
   gap: 10px;
-  margin-top: 1rem;
   height: 36px;
   /* Background/600 */
   background: var(--background600);