Merge pull request #167 from starknet-id/feat/implement_new_quests_sept

feat: add new quest & achievements

components/UI/footer.tsx

@@ -26,7 +26,7 @@ const Footer: FunctionComponent = () => {
           </div>
           <div
             className={styles.social}
-            onClick={() => window.open("http://discord.gg/8uS2Mgcsza")}
+            onClick={() => window.open("http://discord.gg/Td4a5wS5")}
           >
             <span>
               <DiscordIcon width="17" color="#101012" />

components/lands/land.tsx

@@ -5,6 +5,7 @@ import styles from "../../styles/profile.module.css";
 import landStyles from "../../styles/components/land.module.css";
 import Button from "../UI/button";
 import { SoloBuildings, StarkFighterBuildings } from "../../constants/nft";
+import { AchievementsDocument } from "../../types/backTypes";
 
 type LandProps = {
   address: string;
@@ -13,7 +14,6 @@ type LandProps = {
   setSinceDate: (s: string | null) => void;
   setTotalNfts: (nb: number) => void;
   setAchievementCount: (n: number) => void;
-  hasDomain: boolean;
 };
 
 export const Land = ({
@@ -23,7 +23,6 @@ export const Land = ({
   setSinceDate,
   setTotalNfts,
   setAchievementCount,
-  hasDomain,
 }: LandProps) => {
   const [userNft, setUserNft] = useState<BuildingsInfo[]>();
   const [hasNFTs, setHasNFTs] = useState<boolean>(false);
@@ -73,15 +72,14 @@ export const Land = ({
       const response = await fetch(
         `${process.env.NEXT_PUBLIC_API_LINK}/achievements/fetch?addr=${address}`
       );
-      const results: UserAchievements[] = await response.json();
-
+      const results: AchievementsDocument[] = await response.json();
       if (results) {
-        results.forEach((result: UserAchievements) => {
+        results.forEach((result: AchievementsDocument) => {
           for (let i = result.achievements.length - 1; i >= 0; i--) {
             if (result.achievements[i].completed) {
               filteredAssets.push(result.achievements[i].id);
-              if (i === 2) count++;
-              break;
+              if (i === result.achievements.length - 1) count++;
+              if (result.category_type === "levels") break;
             }
           }
         });
@@ -101,7 +99,7 @@ export const Land = ({
         }/achievements/fetch_buildings?ids=${filteredAssets.join(",")}`
       );
       const results: BuildingsInfo[] = await response.json();
-      if (results) {
+      if (results && results.length > 0) {
         setUserNft(results);
         setHasNFTs(true);
       } else setHasNFTs(false);
@@ -152,7 +150,6 @@ export const Land = ({
       );
       filteredAssets.push(highestValue);
     }
-    if (hasDomain) filteredAssets.push(64000); // add starknetid building if user has a .stark domain
 
     await getBuildingsFromAchievements(filteredAssets);
     await getBuildingsInfo(filteredAssets);

components/lands/map.tsx

@@ -69,7 +69,7 @@ export const Map: FunctionComponent<MapProps> = ({
       ) : null}
       {mapReader.roadProps ? (
         <RoadProps
-          tilesets={data?.defs.tilesets}
+          tileset={data.defs.tilesets[2]}
           cityData={mapReader.roadProps}
           tileData={mapReader.tileData[tileTypes.PROPS]}
         />

components/lands/roadProps.tsx

@@ -12,13 +12,13 @@ import { useLoader } from "@react-three/fiber";
 import RoadItem from "./roadItem";
 
 type RoadItemsProps = {
-  tilesets: Tileset[];
+  tileset: Tileset;
   cityData: (RoadObjects | null)[][];
   tileData: TileData[];
 };
 
 const RoadProps: FunctionComponent<RoadItemsProps> = ({
-  tilesets,
+  tileset,
   cityData,
   tileData,
 }) => {
@@ -27,19 +27,13 @@ const RoadProps: FunctionComponent<RoadItemsProps> = ({
       TextureLoader,
       "/land/textures/SID_BuildingSheet.png"
     );
-    texture.repeat = new Vector2(1 / 80, 1 / 80);
+    texture.repeat = new Vector2(1 / tileset.__cHei, 1 / tileset.__cWid);
     texture.magFilter = NearestFilter;
     texture.wrapS = texture.wrapT = RepeatWrapping;
 
     return texture;
   }, []);
 
-  const tileset = useMemo(() => {
-    return tilesets.find(
-      (tileset: Tileset) => tileset.identifier === "SID_BuildingSheet"
-    );
-  }, []);
-
   // Reuse same planes for props
   const simplePlane = useMemo(() => {
     // used for bench, sewerPlate & firehydrant props

components/lands/scene.tsx

@@ -44,7 +44,7 @@ export const Scene: FunctionComponent<SceneProps> = ({
   }, [data]);
 
   useEffect(() => {
-    fetch("/land/data/SIDCity_Base_V5.json")
+    fetch("/land/data/SIDCity_Base.json")
       .then((response) => {
         if (!response.ok) {
           throw new Error(response.statusText);

components/quests/questDetails.tsx

@@ -99,7 +99,11 @@ const QuestDetails: FunctionComponent<QuestDetailsProps> = ({
     address: string | undefined
   ) => {
     if (address && quest.rewards_endpoint) {
-      fetch(`${quest.rewards_endpoint}?addr=${hexToDecimal(address)}`)
+      fetch(
+        `${process.env.NEXT_PUBLIC_API_LINK}/${
+          quest.rewards_endpoint
+        }?addr=${hexToDecimal(address)}`
+      )
         .then((response) => response.json())
         .then((data) => {
           if (data.rewards) {
@@ -201,7 +205,7 @@ const QuestDetails: FunctionComponent<QuestDetailsProps> = ({
     if (task.verify_endpoint_type === "oauth_discord") {
       const rootUrl = "https://discord.com/api/oauth2/authorize";
       const options = {
-        redirect_uri: `${task.verify_endpoint}`,
+        redirect_uri: `${process.env.NEXT_PUBLIC_API_LINK}/${task.verify_endpoint}`,
         client_id: process.env.NEXT_PUBLIC_DISCORD_CLIENT_ID as string,
         response_type: "code",
         scope: ["identify", "guilds"].join(" "),

components/quests/task.tsx

@@ -57,7 +57,9 @@ const Task: FunctionComponent<Task> = ({
       setIsLoading(false);
     } else {
       try {
-        const response = await fetch(verifyEndpoint);
+        const response = await fetch(
+          `${process.env.NEXT_PUBLIC_API_LINK}/${verifyEndpoint}`
+        );
 
         if (!response.ok) {
           throw new Error(await response.text());

components/quiz/quiz.tsx

@@ -82,7 +82,7 @@ const Quiz: FunctionComponent<QuizProps> = ({
     if (answers.length !== quiz.questions.length) return;
     const load = () => {
       setPassed("loading");
-      fetch(verifyEndpoint, {
+      fetch(`${process.env.NEXT_PUBLIC_API_LINK}/${verifyEndpoint}`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",

components/skeletons/achievementSkeleton.tsx

@@ -5,25 +5,28 @@ import styles from "../../styles/achievements.module.css";
 const AchievementSkeleton: FunctionComponent = () => {
   return (
     <>
-      <Skeleton
-        variant="rounded"
-        width={650}
-        height={245}
-        sx={{
-          bgcolor: "grey.900",
-          marginBottom: "40px",
-          borderRadius: "30px",
-        }}
-      />
-      <Skeleton
-        variant="rounded"
-        width={650}
-        height={245}
-        sx={{
-          bgcolor: "grey.900",
-          borderRadius: "30px",
-        }}
-      />
+      <div className={styles.achievementSkeleton}>
+        <Skeleton
+          variant="rounded"
+          className={styles.achievementLoading}
+          sx={{
+            bgcolor: "grey.900",
+            borderRadius: "30px",
+            margin: "40px auto 0",
+          }}
+        />
+      </div>
+      <div className={styles.achievementSkeleton}>
+        <Skeleton
+          variant="rounded"
+          className={styles.achievementLoading}
+          sx={{
+            bgcolor: "grey.900",
+            borderRadius: "30px",
+            margin: "10px auto 0",
+          }}
+        />
+      </div>
     </>
   );
 };

constants/nft.ts

@@ -1,9 +1,14 @@
+// NFT names & buildings id from db
 export enum SoloBuildings {
   "Zklend Artemis" = 64001,
   "AVNU Astronaut" = 64002,
   "JediSwap Light Saber" = 64003,
   "Starknet ID Tribe Totem" = 64004,
   "Sithswap Helmet" = 64008,
+  "MySwap" = 64009,
+  "Morphine" = 64010,
+  "Carmine" = 64011,
+  "Ekubo" = 64012,
 }
 
 export enum StarkFighterBuildings {

pages/[addressOrDomain].tsx

@@ -114,7 +114,7 @@ const AddressOrDomain: NextPage = () => {
           .then((addr) => {
             setIdentity({
               starknet_id: "0",
-              addr: hexToDecimal(addr),
+              addr: addr,
               domain: addressOrDomain,
               is_owner_main: false,
             });
@@ -157,7 +157,7 @@ const AddressOrDomain: NextPage = () => {
             } else {
               setIdentity({
                 starknet_id: "0",
-                addr: hexToDecimal(addressOrDomain),
+                addr: addressOrDomain,
                 domain: name,
                 is_owner_main: false,
               });
@@ -168,7 +168,7 @@ const AddressOrDomain: NextPage = () => {
           } else {
             setIdentity({
               starknet_id: "0",
-              addr: hexToDecimal(addressOrDomain),
+              addr: addressOrDomain,
               domain: minifyAddress(addressOrDomain),
               is_owner_main: false,
             });
@@ -231,7 +231,6 @@ const AddressOrDomain: NextPage = () => {
             setSinceDate={setSinceDate}
             setTotalNfts={setTotalNfts}
             setAchievementCount={setAchievementCount}
-            hasDomain={identity.domain ? true : false}
           />
           <div className={styles.profiles}>
             <ProfileCard

pages/achievements.tsx

@@ -10,14 +10,21 @@ import {
 import Achievement from "../components/achievements/achievement";
 import { hexToDecimal } from "../utils/feltService";
 import AchievementSkeleton from "../components/skeletons/achievementSkeleton";
+import { useLocation } from "react-use";
 
 const Achievements: NextPage = () => {
+  const location = useLocation();
   const { address } = useAccount();
   const [userAchievements, setUserAchievements] = useState<
     AchievementsDocument[]
   >([]);
   const [hasChecked, setHasChecked] = useState<boolean>(false);
 
+  useEffect(() => {
+    setHasChecked(false);
+    setUserAchievements([]);
+  }, [location, address]);
+
   useEffect(() => {
     // If a call was made with an address in the first second, the call with 0 address should be cancelled
     let shouldFetchWithZeroAddress = true;
@@ -54,7 +61,7 @@ const Achievements: NextPage = () => {
     return () => {
       clearTimeout(timer);
     };
-  }, [address, hasChecked]);
+  }, [hasChecked, address]);
 
   // Map through user achievements and check if any are completed
   useEffect(() => {
@@ -63,25 +70,21 @@ const Achievements: NextPage = () => {
       userAchievements.forEach((achievementCategory, index) => {
         achievementCategory.achievements.forEach((achievement, aIndex) => {
           if (!achievement.completed) {
-            if (achievement.verify_type === "default") {
-              const fetchPromise = fetch(
-                `${
-                  process.env.NEXT_PUBLIC_API_LINK
-                }/achievements/verify_default?addr=${hexToDecimal(
-                  address
-                )}&id=${achievement.id}`
-              )
-                .then((response) => response.json())
-                .then((data: CompletedDocument) => {
-                  if (data?.achieved) {
-                    const newUserAchievements = [...userAchievements];
-                    newUserAchievements[index].achievements[aIndex].completed =
-                      true;
-                    setUserAchievements(newUserAchievements);
-                  }
-                });
-              promises.push(fetchPromise);
-            }
+            const fetchPromise = fetch(
+              `${process.env.NEXT_PUBLIC_API_LINK}/achievements/verify_${
+                achievement.verify_type
+              }?addr=${hexToDecimal(address)}&id=${achievement.id}`
+            )
+              .then((response) => response.json())
+              .then((data: CompletedDocument) => {
+                if (data?.achieved) {
+                  const newUserAchievements = [...userAchievements];
+                  newUserAchievements[index].achievements[aIndex].completed =
+                    true;
+                  setUserAchievements(newUserAchievements);
+                }
+              });
+            promises.push(fetchPromise);
           }
         });
       });
@@ -90,7 +93,7 @@ const Achievements: NextPage = () => {
         setHasChecked(true);
       });
     }
-  }, [userAchievements.length, address]);
+  }, [userAchievements.length, hasChecked]);
 
   return (
     <div className={styles.screen}>
@@ -101,10 +104,10 @@ const Achievements: NextPage = () => {
             Complete achievements and grow your Starknet on-chain reputation
           </p>
         </div>
-        <div className={styles.cardWrapper}>
-          <div className={styles.cards}>
-            {userAchievements.length > 0 ? (
-              userAchievements.map(
+        {userAchievements.length > 0 ? (
+          <div className={styles.cardWrapper}>
+            <div className={styles.cards}>
+              {userAchievements.map(
                 (achievementCategory: AchievementsDocument, index: number) => {
                   return (
                     <Achievement
@@ -114,12 +117,12 @@ const Achievements: NextPage = () => {
                     />
                   );
                 }
-              )
-            ) : (
-              <AchievementSkeleton />
-            )}
+              )}
+            </div>
           </div>
-        </div>
+        ) : (
+          <AchievementSkeleton />
+        )}
       </div>
     </div>
   );