MEP 26/01/2023

app/quest-boost/[boostId]/page.tsx

@@ -19,6 +19,7 @@ import BackButton from "@components/UI/backButton";
 import useBoost from "@hooks/useBoost";
 import { getTokenName } from "@utils/tokenService";
 import BoostSkeleton from "@components/skeletons/boostSkeleton";
+import { TOKEN_DECIMAL_MAP } from "@utils/constants";
 
 type BoostQuestPageProps = {
   params: {
@@ -95,7 +96,7 @@ export default function Page({ params }: BoostQuestPageProps) {
       updateBoostClaimStatus(address, boost?.id, true);
 
     router.push(`/quest-boost/claim/${boost?.id}`);
-  }, [boost, address]);
+  }, [boost, address, winnerList]);
 
   useEffect(() => {
     fetchPageData();
@@ -142,7 +143,20 @@ export default function Page({ params }: BoostQuestPageProps) {
               <p>Reward:</p>
               <div className="flex flex-row gap-2">
                 <p className={styles.claim_button_text_highlight}>
-                  {boost?.amount} {getTokenName(boost?.token ?? "")}
+                  {boost
+                    ? parseInt(
+                        String(
+                          boost?.amount /
+                            Math.pow(
+                              10,
+                              TOKEN_DECIMAL_MAP[
+                                getTokenName(boost?.token ?? "")
+                              ]
+                            )
+                        )
+                      )
+                    : 0}{" "}
+                  {getTokenName(boost?.token ?? "")}
                 </p>
                 <TokenSymbol tokenAddress={boost?.token ?? ""} />
               </div>

app/quest-boost/claim/[boostId]/page.tsx

@@ -15,6 +15,7 @@ import { hexToDecimal } from "@utils/feltService";
 import { boostClaimCall } from "@utils/callData";
 import { getTokenName } from "@utils/tokenService";
 import useBoost from "@hooks/useBoost";
+import { TOKEN_DECIMAL_MAP } from "@utils/constants";
 
 type BoostQuestPageProps = {
   params: {
@@ -75,7 +76,10 @@ export default function Page({ params }: BoostQuestPageProps) {
     // convert values in winner array from hex to decimal
     if (!boost.winner) return false;
 
-    setDisplayAmount(parseInt(String(boost?.amount / boost?.num_of_winners)));
+    setDisplayAmount(
+      parseInt(String(boost?.amount / boost?.num_of_winners)) /
+        Math.pow(10, TOKEN_DECIMAL_MAP[getTokenName(boost?.token ?? "")])
+    );
     return winnerList.includes(hexToDecimal(address));
   }, [boost, address, winnerList]);
 
@@ -104,7 +108,9 @@ export default function Page({ params }: BoostQuestPageProps) {
       const { transaction_hash } = await account.execute(
         boostClaimCall(boost, sign)
       );
-      updateBoostClaimStatus(address, boost?.id, true);
+      if (transaction_hash) {
+        updateBoostClaimStatus(address, boost?.id, true);
+      }
       setTransactionHash(transaction_hash);
     };
 
@@ -144,6 +150,14 @@ export default function Page({ params }: BoostQuestPageProps) {
                         height={97}
                         alt="usdc icon"
                       />
+                    ) : boost && getTokenName(boost?.token) === "LORDS" ? (
+                      <CDNImage
+                        src={"/icons/lord.webp"}
+                        priority
+                        width={97}
+                        height={97}
+                        alt="lords icon"
+                      />
                     ) : (
                       <CDNImage
                         src={"/icons/eth.svg"}

components/UI/navbar.tsx

@@ -33,6 +33,8 @@ import { getPendingBoostClaims } from "@services/apiService";
 import { hexToDecimal } from "@utils/feltService";
 import CloseFilledIcon from "./iconsComponents/icons/closeFilledIcon";
 import { getCurrentNetwork } from "@utils/network";
+import { TOKEN_DECIMAL_MAP } from "@utils/constants";
+import { getTokenName } from "@utils/tokenService";
 
 const Navbar: FunctionComponent = () => {
   const currentNetwork = getCurrentNetwork();
@@ -73,7 +75,10 @@ const Navbar: FunctionComponent = () => {
     res.forEach((boost: Boost) => {
       const data = {
         title: "Congratulations! 🎉",
-        subtext: `You have just won ${boost.amount} USDC thanks to the "${boost.name}” boost`,
+        subtext: `You have just won ${
+          parseInt(String(boost?.amount / boost?.num_of_winners)) /
+          Math.pow(10, TOKEN_DECIMAL_MAP[getTokenName(boost?.token ?? "")])
+        } USDC thanks to the "${boost.name}” boost`,
         link: "/quest-boost/" + boost.id,
         linkText: "Claim your reward",
       };

components/achievements/level.tsx

@@ -3,6 +3,7 @@ import styles from "@styles/achievements.module.css";
 import { AchievementDocument } from "../../types/backTypes";
 import { CustomTooltip } from "@components/UI/tooltip";
 import { CDNImg } from "@components/cdn/image";
+import CheckIcon from "@components/UI/iconsComponents/icons/checkIcon";
 
 type AchievementLevelProps = {
   achievement: AchievementDocument;
@@ -39,6 +40,11 @@ const AchievementLevel: FunctionComponent<AchievementLevelProps> = ({
         >
           <CDNImg src={achievement.img_url} alt="achievement level image" />
         </div>
+        {achievement.completed && (
+          <div className={styles.checkIcon}>
+            <CheckIcon width="24" color="#6AFFAF" />
+          </div>
+        )}
       </div>
     </CustomTooltip>
   );

components/quest-boost/TokenSymbol.tsx

@@ -28,6 +28,10 @@ const TokenSymbol: FunctionComponent<TokenSymbolProps> = ({
         setTokenImageLink("/icons/eth.svg");
         imageDimensions = { width: 15, height: 20 };
         break;
+      case TOKEN_ADDRESS_MAP[network].LORDS:
+        setTokenImageLink("/icons/lord.webp");
+        imageDimensions = { width: 20, height: 20 };
+        break;
       default:
         setTokenImageLink("/icons/usdc.svg");
         break;

components/quest-boost/boostCard.tsx

@@ -9,6 +9,8 @@ import TokenSymbol from "./TokenSymbol";
 import useBoost from "@hooks/useBoost";
 import theme from "@styles/theme";
 import { useAccount } from "@starknet-react/core";
+import { TOKEN_DECIMAL_MAP } from "@utils/constants";
+import { getTokenName } from "@utils/tokenService";
 
 type BoostCardProps = {
   boost: Boost;
@@ -86,7 +88,17 @@ const BoostCard: FunctionComponent<BoostCardProps> = ({
           </p>
           {!hasUserCompletedBoost && boost.expiry > Date.now() ? (
             <div className="flex flex-row gap-2 items-center p-1.5">
-              <p>{boost?.amount}</p>
+              <p>
+                {parseInt(
+                  String(
+                    boost?.amount /
+                      Math.pow(
+                        10,
+                        TOKEN_DECIMAL_MAP[getTokenName(boost?.token ?? "")]
+                      )
+                  )
+                )}
+              </p>
               <TokenSymbol tokenAddress={boost.token} />
             </div>
           ) : (

components/quests/quest.tsx

@@ -14,6 +14,8 @@ 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";
 
 type QuestProps = {
   onClick: () => void;
@@ -110,7 +112,17 @@ const Quest: FunctionComponent<QuestProps> = ({
             style={{ gap: 0, padding: "8px 16px" }}
           >
             <TokenSymbol tokenAddress={boost?.token} />
-            <p className="text-white ml-2">{boost?.amount}</p>
+            <p className="text-white ml-2">
+              {parseInt(
+                String(
+                  boost?.amount /
+                    Math.pow(
+                      10,
+                      TOKEN_DECIMAL_MAP[getTokenName(boost?.token ?? "")]
+                    )
+                )
+              )}
+            </p>
           </div>
         ) : null}
       </div>

components/quests/questDetails.tsx

@@ -379,7 +379,7 @@ const QuestDetails: FunctionComponent<QuestDetailsProps> = ({
                   verifyRedirect={task.verify_redirect}
                   verifyEndpoint={
                     task.verify_endpoint_type &&
-                    task.verify_endpoint_type === "default"
+                    task.verify_endpoint_type.startsWith("default")
                       ? `${task.verify_endpoint}?addr=${hexToDecimal(address)}`
                       : task.verify_endpoint_type === "quiz"
                       ? task.verify_endpoint

components/quests/task.tsx

@@ -73,14 +73,20 @@ const Task: FunctionComponent<Task> = ({
         }
 
         if (verifyRedirect) {
+          // if the verify_endpoint_type contains a timeout indication we use it,
+          // otherwise we use the default timeout of 15 seconds
+          const timeout =
+            verifyEndpointType.split("_").length === 2
+              ? parseInt(verifyEndpointType.split("_")[1]) ?? 15000
+              : 15000;
           await new Promise((resolve) =>
             setTimeout(() => {
               setIsVerified(true);
               checkUserRewards();
               refreshRewards();
               setIsLoading(false);
               resolve(null);
-            }, 15000)
+            }, timeout)
           );
         } else {
           setIsVerified(true);

context/QuestsProvider.tsx

@@ -89,20 +89,24 @@ export const QuestsContextProvider = ({
 
       setCategories(categoriesWithImages);
       setQuests(q);
-
-      const notExpired = q.filter((quest) => !quest.expired);
-      setFeaturedQuest(
-        notExpired.length >= 1 ? notExpired[notExpired.length - 1] : undefined
-      );
     })();
   }, []);
 
   useMemo(() => {
-    getTrendingQuests().then((data: QuestDocument[] | QueryError) => {
-      if ((data as QueryError).error) return;
-      setTrendingQuests(data as QuestDocument[]);
-    });
-  }, []);
+    getTrendingQuests(hexToDecimal(address)).then(
+      (data: QuestDocument[] | QueryError) => {
+        if ((data as QueryError).error) return;
+        const quests = data as QuestDocument[];
+        setTrendingQuests(quests);
+        const notExpired = quests.filter((quest) => !quest.expired);
+        setFeaturedQuest(
+          notExpired.length >= 1
+            ? notExpired[Math.floor(Math.random() * notExpired.length)]
+            : undefined
+        );
+      }
+    );
+  }, [address]);
 
   useMemo(() => {
     if (!address) return;

services/apiService.ts

@@ -120,9 +120,11 @@ export const getQuests = async () => {
   }
 };
 
-export const getTrendingQuests = async () => {
+export const getTrendingQuests = async (addr = "") => {
   try {
-    const response = await fetch(`${baseurl}/get_trending_quests`);
+    const response = await fetch(
+      `${baseurl}/get_trending_quests${addr ? `?addr=${addr}` : ""}`
+    );
     return await response.json();
   } catch (err) {
     console.log("Error while fetching trending quests", err);

styles/achievements.module.css

@@ -80,9 +80,9 @@
   position: absolute;
   border-radius: 30px;
   background: linear-gradient(
-      90deg,
-      rgba(17, 16, 24, 0),
-      rgba(17, 16, 24, 0.51)
+    90deg,
+    rgba(17, 16, 24, 0),
+    rgba(17, 16, 24, 0.51)
   );
   width: 100%;
   height: 100%;
@@ -109,12 +109,14 @@
   right: -1px;
   left: 1px;
   bottom: 1px;
-  background: linear-gradient(90deg,
-      #437aba 0%,
-      #59c2e8 45%,
-      #00ff77 60%,
-      #59c2e8 70%,
-      #437aba50 100%);
+  background: linear-gradient(
+    90deg,
+    #437aba 0%,
+    #59c2e8 45%,
+    #00ff77 60%,
+    #59c2e8 70%,
+    #437aba50 100%
+  );
   border-radius: 30px;
   z-index: -1;
 }
@@ -125,12 +127,14 @@
 }
 
 .cardContainer:nth-child(even) .card::before {
-  background: linear-gradient(90deg,
-      #437aba 0%,
-      #1e74d6 45%,
-      #00fbff 60%,
-      #1e74d6 70%,
-      #437aba50 100%);
+  background: linear-gradient(
+    90deg,
+    #437aba 0%,
+    #1e74d6 45%,
+    #00fbff 60%,
+    #1e74d6 70%,
+    #437aba50 100%
+  );
 }
 
 .cardTitle {
@@ -178,6 +182,7 @@
   flex-grow: 1;
   min-width: 0;
   justify-content: space-between;
+  position: relative;
 }
 
 .levelContainer.completed {
@@ -286,6 +291,12 @@
   line-height: 24px;
 }
 
+.checkIcon {
+  position: absolute;
+  right: 16px;
+  top: 8px;
+}
+
 @media (max-width: 928px) {
   .container {
     padding: 0;
@@ -318,7 +329,6 @@
   }
 }
 
-
 .container:has(.skeleton) {
   padding: 0 30px;
-}
+}

tests/utils/tokenService.test.js

@@ -14,6 +14,12 @@ describe("getTokenName function", () => {
     expect(tokenName).toBe("ETH");
   });
 
+  it("should return 'LORDS' for LORDS token address on the current network", () => {
+    // Assuming TOKEN_ADDRESS_MAP is defined and has the necessary structure
+    const tokenName = getTokenName(TOKEN_ADDRESS_MAP["MAINNET"].LORDS);
+    expect(tokenName).toBe("LORDS");
+  });
+
   it("should return 'USDC' for unknown token addresses on the current network", () => {
     // Assuming TOKEN_ADDRESS_MAP is defined and has the necessary structure
     const tokenName = getTokenName("unknownTokenAddress");

utils/constants.ts

@@ -29,9 +29,17 @@ export const TOKEN_ADDRESS_MAP = {
   MAINNET: {
     USDC: "0x053c91253bc9682c04929ca02ed00b3e423f6710d2ee7e0d5ebb06f3ecf368a8",
     ETH: "0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
+    LORDS: "0x0124aeb495b947201f5fac96fd1138e326ad86195b98df6dec9009158a533b49",
   },
   TESTNET: {
     USDC: "0x005a643907b9a4bc6a55e9069c4fd5fd1f5c79a22470690f75556c4736e34426",
     ETH: "0x049d36570d4e46f48e99674bd3fcc84644ddd6b96f7c741b1562b82f9e004dc7",
+    LORDS: "0x05e367ac160e5f90c5775089b582dfc987dd148a5a2f977c49def2a6644f724b",
   },
 };
+
+export const TOKEN_DECIMAL_MAP = {
+  USDC: 6,
+  ETH: 18,
+  LORDS:18,
+};

utils/tokenService.ts

@@ -8,6 +8,8 @@ export const getTokenName = (token: string) => {
       return "USDC";
     case TOKEN_ADDRESS_MAP[network].ETH:
       return "ETH";
+    case TOKEN_ADDRESS_MAP[network].LORDS:
+      return "LORDS";
     default:
       return "USDC";
   }