From fd041e02282cbd2d8616d30e77e535a7cb8ba034 Mon Sep 17 00:00:00 2001
From: nicolasito1411 <60229704+Marchand-Nicolas@users.noreply.github.com>
Date: Sun, 15 Oct 2023 13:14:01 +0200
Subject: [PATCH 1/4] feat: number of steps and participants

---
 components/quests/questDetails.tsx | 56 ++++++++++++++++++++++++++++++
 styles/quests.module.css           | 22 ++++++++++++
 2 files changed, 78 insertions(+)

diff --git a/components/quests/questDetails.tsx b/components/quests/questDetails.tsx
index 7761f436..09863dc6 100644
--- a/components/quests/questDetails.tsx
+++ b/components/quests/questDetails.tsx
@@ -3,6 +3,7 @@ import React, {
   useEffect,
   useState,
   FunctionComponent,
+  useContext,
 } from "react";
 import styles from "../../styles/quests.module.css";
 import Task from "./task";
@@ -23,6 +24,7 @@ import { generateCodeChallenge } from "../../utils/codeChallenge";
 import Timer from "./timer";
 import NftImage from "./nftImage";
 import { splitByNftContract } from "../../utils/rewards";
+import { StarknetIdJsContext } from "../../context/StarknetIdJsProvider";
 
 type QuestDetailsProps = {
   quest: QuestDocument;
@@ -45,6 +47,7 @@ const QuestDetails: FunctionComponent<QuestDetailsProps> = ({
   const { provider } = useProvider();
   const [tasks, setTasks] = useState<UserTask[]>([]);
   const [rewardsEnabled, setRewardsEnabled] = useState<boolean>(false);
+  const { starknetIdNavigator } = useContext(StarknetIdJsContext);
   const [eligibleRewards, setEligibleRewards] = useState<
     Record<string, EligibleReward[]>
   >({});
@@ -54,7 +57,44 @@ const QuestDetails: FunctionComponent<QuestDetailsProps> = ({
   const [mintCalldata, setMintCalldata] = useState<Call[]>();
   const [taskError, setTaskError] = useState<TaskError>();
   const [showQuiz, setShowQuiz] = useState<ReactNode>();
+
   const questId = quest.id.toString();
+  const [participants, setParticipants] = useState({
+    count: 0,
+    firstParticipants: [] as string[],
+  });
+
+  // This fetches the number of participants in the quest and up to 3 of their starknet ids
+  useEffect(() => {
+    if (questId && starknetIdNavigator) {
+      fetch(
+        `http://127.0.0.1:8080/get_quest_participants?quest_id=${questId}`,
+        {
+          method: "GET",
+        }
+      )
+        .then((response) => response.json())
+        .then(async (data) => {
+          setParticipants(data);
+          const addrs = data.firstParticipants;
+          const identities = addrs.map(async (addr: string) => {
+            const domain = await starknetIdNavigator
+              ?.getStarkName(addr)
+              .catch((err) => {});
+            return domain
+              ? await starknetIdNavigator
+                  ?.getStarknetId(domain)
+                  .catch((err) => {})
+              : 0;
+          });
+          const identitiesResolved = await Promise.all(identities);
+          setParticipants({
+            count: data.count,
+            firstParticipants: identitiesResolved,
+          });
+        });
+    }
+  }, [questId, starknetIdNavigator]);
 
   // this fetches all tasks of this quest from db
   useEffect(() => {
@@ -272,6 +312,22 @@ const QuestDetails: FunctionComponent<QuestDetailsProps> = ({
           <TasksSkeleton />
         ) : (
           <>
+            <div className={styles.questStats}>
+              <p>{tasks.length} steps</p>
+              <div className="ml-auto flex">
+                <div className={styles.participantAvatars}>
+                  {participants.firstParticipants.map((participant, index) => (
+                    <img
+                      src={`https://www.starknet.id/api/identicons/${participant}`}
+                      alt="user icons"
+                      width="24"
+                      key={index}
+                    />
+                  ))}
+                </div>
+                <p>{participants.count || 0} participants</p>
+              </div>
+            </div>
             {tasks.map((task) => {
               return (
                 <Task
diff --git a/styles/quests.module.css b/styles/quests.module.css
index c2d1defa..d2e65a9f 100644
--- a/styles/quests.module.css
+++ b/styles/quests.module.css
@@ -129,6 +129,12 @@
   flex-grow: 0;
 }
 
+.questStats {
+  max-width: 90%;
+  width: 728px;
+  display: flex;
+}
+
 .taskTitle {
   display: flex;
   flex-direction: row;
@@ -261,6 +267,22 @@
   align-items: flex-start;
 }
 
+.participantAvatars {
+  display: flex;
+  align-items: right;
+  justify-content: right;
+  margin-right: calc(1rem + 10px);
+  height: 24px;
+  min-width: 72px;
+}
+
+.participantAvatars img {
+  margin-right: -10px;
+  border-radius: 100px;
+  width: 24px;
+  height: 24px;
+}
+
 @media (max-width: 1024px) {
   .verifyButton {
     width: 100px;

From 014b8779599ab6427eaed82f7a9a4fb535a57a6a Mon Sep 17 00:00:00 2001
From: nicolasito1411 <60229704+Marchand-Nicolas@users.noreply.github.com>
Date: Sun, 15 Oct 2023 13:17:07 +0200
Subject: [PATCH 2/4] fixing build errors

---
 components/quests/questDetails.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/quests/questDetails.tsx b/components/quests/questDetails.tsx
index 09863dc6..0edf097a 100644
--- a/components/quests/questDetails.tsx
+++ b/components/quests/questDetails.tsx
@@ -80,11 +80,11 @@ const QuestDetails: FunctionComponent<QuestDetailsProps> = ({
           const identities = addrs.map(async (addr: string) => {
             const domain = await starknetIdNavigator
               ?.getStarkName(addr)
-              .catch((err) => {});
+              .catch(console.error);
             return domain
               ? await starknetIdNavigator
                   ?.getStarknetId(domain)
-                  .catch((err) => {})
+                  .catch(console.error)
               : 0;
           });
           const identitiesResolved = await Promise.all(identities);

From cc1f26e3943b61e0e469d4ad6c4bd37c4dfd39fd Mon Sep 17 00:00:00 2001
From: nicolasito1411 <60229704+Marchand-Nicolas@users.noreply.github.com>
Date: Mon, 16 Oct 2023 09:57:02 +0200
Subject: [PATCH 3/4] using env var for the api request

---
 components/quests/questDetails.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/quests/questDetails.tsx b/components/quests/questDetails.tsx
index 0edf097a..9b5ffe70 100644
--- a/components/quests/questDetails.tsx
+++ b/components/quests/questDetails.tsx
@@ -68,7 +68,7 @@ const QuestDetails: FunctionComponent<QuestDetailsProps> = ({
   useEffect(() => {
     if (questId && starknetIdNavigator) {
       fetch(
-        `http://127.0.0.1:8080/get_quest_participants?quest_id=${questId}`,
+        `${process.env.NEXT_PUBLIC_API_LINK}/get_quest_participants?quest_id=${questId}`,
         {
           method: "GET",
         }

From d7e389155e823aef9a5a15d2fcd7d3cbc520cd17 Mon Sep 17 00:00:00 2001
From: nicolasito1411 <60229704+Marchand-Nicolas@users.noreply.github.com>
Date: Mon, 16 Oct 2023 10:43:57 +0200
Subject: [PATCH 4/4] using an env var for identicons

---
 components/quests/questDetails.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/quests/questDetails.tsx b/components/quests/questDetails.tsx
index 9b5ffe70..01935212 100644
--- a/components/quests/questDetails.tsx
+++ b/components/quests/questDetails.tsx
@@ -318,7 +318,7 @@ const QuestDetails: FunctionComponent<QuestDetailsProps> = ({
                 <div className={styles.participantAvatars}>
                   {participants.firstParticipants.map((participant, index) => (
                     <img
-                      src={`https://www.starknet.id/api/identicons/${participant}`}
+                      src={`${process.env.NEXT_PUBLIC_STARKNET_ID_LINK}/api/identicons/${participant}`}
                       alt="user icons"
                       width="24"
                       key={index}