From 3ce871030bf7c71dfe49d690bd68c48b3b5e4aaa Mon Sep 17 00:00:00 2001
From: nicolasito1411 <60229704+Marchand-Nicolas@users.noreply.github.com>
Date: Sat, 13 Jan 2024 13:51:02 +0100
Subject: [PATCH 1/2] fix: category and empty string when no boost

---
 app/quest-boost/page.tsx     |   5 +
 services/apiService.ts       |   1 +
 styles/questboost.module.css | 431 ++++++++++++++++++-----------------
 3 files changed, 228 insertions(+), 209 deletions(-)

diff --git a/app/quest-boost/page.tsx b/app/quest-boost/page.tsx
index cb9e3693..77ed2b11 100644
--- a/app/quest-boost/page.tsx
+++ b/app/quest-boost/page.tsx
@@ -58,6 +58,11 @@ export default function Page() {
             />
           );
         })}
+        {boosts?.length === 0 && (
+          <h2 className={styles.noBoosts}>
+            No quest are being boosted at the moment.
+          </h2>
+        )}
       </div>
 
       <section className={styles.instructions_container}>
diff --git a/services/apiService.ts b/services/apiService.ts
index 701fc7ef..22cc5f5a 100644
--- a/services/apiService.ts
+++ b/services/apiService.ts
@@ -43,6 +43,7 @@ export const fetchLeaderboardRankings = async (
 export const getBoosts = async () => {
   try {
     const response = await fetch(`${baseurl}/boost/get_boosts`);
+    return [];
     return await response.json();
   } catch (err) {
     console.log("Error while fetching boosts", err);
diff --git a/styles/questboost.module.css b/styles/questboost.module.css
index b0fecf9a..733b69a9 100644
--- a/styles/questboost.module.css
+++ b/styles/questboost.module.css
@@ -1,309 +1,322 @@
 .title {
-    font-family: "Sora-Bold";
-    font-size: 2.5rem;
-    text-align: center;
-    background: linear-gradient(45deg, var(--primary), var(--tertiary));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    color: transparent;
+  font-family: "Sora-Bold";
+  font-size: 2.5rem;
+  text-align: center;
+  background: linear-gradient(45deg, var(--primary), var(--tertiary));
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  color: transparent;
 }
 
 .container {
-    padding: 12vh 1.5rem;
+  padding: 12vh 1.5rem;
 }
 
 .boost_card_container {
-    display: flex;
-    flex-direction: column;
-    border-radius: 0.5rem;
-    padding: 1.5rem;
-    align-items: center;
-    gap: 1.5rem;
-    background-color: #1f1f25;
-    border: 1px solid transparent;
-    transition: all 0.2s ease-in-out;
-    max-width: 260px;
+  display: flex;
+  flex-direction: column;
+  border-radius: 0.5rem;
+  padding: 1.5rem;
+  align-items: center;
+  gap: 1.5rem;
+  background-color: #1f1f25;
+  border: 1px solid transparent;
+  transition: all 0.2s ease-in-out;
+  max-width: 260px;
 }
 
 .boost_card_container:hover {
-    border-color: var(--secondary500);
+  border-color: var(--secondary500);
 }
 
 .boost_card_content {
-    display: flex;
-    flex-direction: column;
-    align-items: start;
-    gap: 0.75rem;
-    width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: start;
+  gap: 0.75rem;
+  width: 100%;
 }
 
 .card_container {
-    padding: 1rem;
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: row;
-    gap: 1rem;
-    justify-content: center;
-    min-height: 400px;
+  padding: 1rem;
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  gap: 1rem;
+  justify-content: center;
+  min-height: 400px;
 }
 
 .card_title {
-    font-size: 1.2rem;
-    color: var(--secondary);
-    font-family: "Sora-Bold";
-    margin: 0px;
-    text-align: left;
+  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;
-    text-align: left;
+  font-size: 1.2rem;
+  color: var(--secondary);
+  font-family: "Sora-Bold";
+  margin: 0px;
+  text-align: left;
 }
 
 .issuer {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-    gap: 10px;
-    height: 36px;
-    border-radius: 100px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  height: 36px;
+  border-radius: 100px;
 }
 
 .instructions_container {
-    padding: 4rem 8rem;
+  padding: 4rem 8rem;
 }
 
 .claim_button_container {
-    margin: 2rem auto;
-    display: flex;
-    padding: 1.5rem;
-    width: 100%;
-    max-width: 1000px;
-    justify-content: space-between;
-    align-items: center;
-    border-radius: 0.5rem;
-    background: #29282b;
-    box-shadow: 0px 2px 30px 0px rgba(16, 16, 18, 0.06);
+  margin: 2rem auto;
+  display: flex;
+  padding: 1.5rem;
+  width: 100%;
+  max-width: 1000px;
+  justify-content: space-between;
+  align-items: center;
+  border-radius: 0.5rem;
+  background: #29282b;
+  box-shadow: 0px 2px 30px 0px rgba(16, 16, 18, 0.06);
 }
 
 .claim_button_text_content {
-    display: flex;
-    gap: 0.75rem;
-    align-items: center;
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
 }
 
 .claim_button_text_highlight {
-    font-size: 20px;
-    font-weight: 700;
+  font-size: 20px;
+  font-weight: 700;
 }
 
 .claim_button_cta {
-    color: #101012;
-    padding: 1em 3em;
-    border-radius: 10px;
-    background: var(--primary-gradient,
-            linear-gradient(90deg, #6affaf -0.12%, #5ce3fe 99.88%));
-
-    /* Button shadow */
-    box-shadow: 0px 0px 6px 0px rgba(106, 255, 175, 0.1);
+  color: #101012;
+  padding: 1em 3em;
+  border-radius: 10px;
+  background: var(
+    --primary-gradient,
+    linear-gradient(90deg, #6affaf -0.12%, #5ce3fe 99.88%)
+  );
+
+  /* Button shadow */
+  box-shadow: 0px 0px 6px 0px rgba(106, 255, 175, 0.1);
 }
 
 .backButton {
-    margin-left: 39px;
-    z-index: 10;
+  margin-left: 39px;
+  z-index: 10;
 }
 
 @media screen and (max-width: 740px) {
-    .claim_button_container {
-        flex-direction: column;
-        gap: 1rem;
-    }
+  .claim_button_container {
+    flex-direction: column;
+    gap: 1rem;
+  }
 
-    .instructions_container {
-        padding: 0rem;
-    }
+  .instructions_container {
+    padding: 0rem;
+  }
 
-    .backButton {
-        margin: 3rem 0;
-    }
+  .backButton {
+    margin: 3rem 0;
+  }
 }
 
 .claim_screen_container {
-    width: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-direction: column;
-    gap: 2rem;
-    height: 100vh;
-    background: url("/utils/dotBackground.svg") no-repeat center var(--background);
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 2rem;
+  height: 100vh;
+  background: url("/utils/dotBackground.svg") no-repeat center var(--background);
 }
 
-
 @keyframes rotateCard {
-    0% {
-        transform: rotate(0deg) scale(0.3);
-    }
+  0% {
+    transform: rotate(0deg) scale(0.3);
+  }
 
-    100% {
-        transform: rotate(1080deg) scale(1);
-    }
+  100% {
+    transform: rotate(1080deg) scale(1);
+  }
 }
 
 .claim_amount_card::before {
-    content: "";
-    position: absolute;
-    top: -2px;
-    right: -2px;
-    left: -1px;
-    bottom: 327px;
-    background: linear-gradient(90deg,
-            #437aba 0%,
-            #59c2e8 45%,
-            #00ff77 60%,
-            #59c2e8 70%,
-            #437aba50 100%);
-    border-radius: 8px;
-    z-index: 1;
-    mask: linear-gradient(0deg, transparent 92%, black);
+  content: "";
+  position: absolute;
+  top: -2px;
+  right: -2px;
+  left: -1px;
+  bottom: 327px;
+  background: linear-gradient(
+    90deg,
+    #437aba 0%,
+    #59c2e8 45%,
+    #00ff77 60%,
+    #59c2e8 70%,
+    #437aba50 100%
+  );
+  border-radius: 8px;
+  z-index: 1;
+  mask: linear-gradient(0deg, transparent 92%, black);
 }
 
 .claim_amount_card {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    width: 350px;
-    padding: 1.5rem;
-    border-radius: 0.5rem;
-    background-color: #1F1F25;
-    border: 1px solid transparent;
-    animation: rotateCard 3s;
-    aspect-ratio: 1/1;
-    gap: 1rem;
-    position: relative;
-    margin-top: 1px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 350px;
+  padding: 1.5rem;
+  border-radius: 0.5rem;
+  background-color: #1f1f25;
+  border: 1px solid transparent;
+  animation: rotateCard 3s;
+  aspect-ratio: 1/1;
+  gap: 1rem;
+  position: relative;
+  margin-top: 1px;
 }
 
 .claim_amount {
-    font-family: Sora;
-    font-size: 42px;
-    font-weight: 700;
-    line-height: 40px;
-    letter-spacing: 0em;
-    text-align: center;
+  font-family: Sora;
+  font-size: 42px;
+  font-weight: 700;
+  line-height: 40px;
+  letter-spacing: 0em;
+  text-align: center;
 }
 
 @keyframes opacityAnimation {
-    0% {
-        opacity: 0;
-    }
+  0% {
+    opacity: 0;
+  }
 
-    100% {
-        opacity: 1;
-    }
+  100% {
+    opacity: 1;
+  }
 }
 
 @keyframes fadeInText {
-    0% {
-        opacity: 0;
-        transform: translateY(-20px);
-        height: 0px;
-    }
+  0% {
+    opacity: 0;
+    transform: translateY(-20px);
+    height: 0px;
+  }
 
-    100% {
-        opacity: 1;
-        transform: translateY(0);
-        height: 42px;
-    }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+    height: 42px;
+  }
 }
 
 @keyframes moveImg {
-    0% {
-        transform: translateY(0px);
-    }
+  0% {
+    transform: translateY(0px);
+  }
 
-    100% {
-        transform: translateY(-20px);
-    }
+  100% {
+    transform: translateY(-20px);
+  }
 }
 
-
 .claim_button_animation {
-    opacity: 0;
-    animation: opacityAnimation 2s;
-    animation-delay: 3s;
-    animation-fill-mode: forwards;
+  opacity: 0;
+  animation: opacityAnimation 2s;
+  animation-delay: 3s;
+  animation-fill-mode: forwards;
 }
 
 .claim_button_text {
-    opacity: 0;
-    height: 0px;
-    padding: 1rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    animation: fadeInText 1s;
-    animation-delay: 3s;
-    animation-fill-mode: forwards;
+  opacity: 0;
+  height: 0px;
+  padding: 1rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: fadeInText 1s;
+  animation-delay: 3s;
+  animation-fill-mode: forwards;
 }
 
 .token_logo {
-    animation: moveImg 1s;
-    animation-delay: 3s;
-    animation-fill-mode: forwards;
-    transform-origin: center;
+  animation: moveImg 1s;
+  animation-delay: 3s;
+  animation-fill-mode: forwards;
+  transform-origin: center;
 }
 
 .token_symbol_container {
-    opacity: 0;
-    width: 100px;
-    height: 50px;
-    padding: 16px;
-    border-radius: 12px;
-    gap: 13px;
-    background: linear-gradient(90deg, #6AFFAF -0.12%, #5CE3FE 99.88%);
-    padding: 1px;
-    position: absolute;
-    bottom: 0px;
-    transform: translateY(50%);
-    display: flex;
-    flex: 1;
-    animation: opacityAnimation 2s;
-    animation-delay: 3s;
-    animation-fill-mode: forwards;
+  opacity: 0;
+  width: 100px;
+  height: 50px;
+  padding: 16px;
+  border-radius: 12px;
+  gap: 13px;
+  background: linear-gradient(90deg, #6affaf -0.12%, #5ce3fe 99.88%);
+  padding: 1px;
+  position: absolute;
+  bottom: 0px;
+  transform: translateY(50%);
+  display: flex;
+  flex: 1;
+  animation: opacityAnimation 2s;
+  animation-delay: 3s;
+  animation-fill-mode: forwards;
 }
 
 .skeleton_card {
-    height: 425px;
-    position: relative;
-    overflow: hidden;
-    width: 290px;
+  height: 425px;
+  position: relative;
+  overflow: hidden;
+  width: 290px;
 }
 
 .skeleton_title {
-    height: 100px;
-    position: relative;
-    overflow: hidden;
-    width: 50%;
+  height: 100px;
+  position: relative;
+  overflow: hidden;
+  width: 50%;
 }
 
 .skeleton_reward {
-    height: 100px;
-    position: relative;
-    overflow: hidden;
-    width: 75%;
+  height: 100px;
+  position: relative;
+  overflow: hidden;
+  width: 75%;
 }
 
 .skeleton_loading {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 80%;
-}
\ No newline at end of file
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 80%;
+}
+
+.card_container:has(.noBoosts) {
+  min-height: fit-content;
+}
+
+.noBoosts {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}

From 68752fbd655bbdf9fe3c415c494ef3de374f46f7 Mon Sep 17 00:00:00 2001
From: nicolasito1411 <60229704+Marchand-Nicolas@users.noreply.github.com>
Date: Sat, 13 Jan 2024 13:53:14 +0100
Subject: [PATCH 2/2] remove mock value

---
 services/apiService.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/services/apiService.ts b/services/apiService.ts
index 22cc5f5a..701fc7ef 100644
--- a/services/apiService.ts
+++ b/services/apiService.ts
@@ -43,7 +43,6 @@ export const fetchLeaderboardRankings = async (
 export const getBoosts = async () => {
   try {
     const response = await fetch(`${baseurl}/boost/get_boosts`);
-    return [];
     return await response.json();
   } catch (err) {
     console.log("Error while fetching boosts", err);