Xp boost (#846)

Resolves #844 ### What We want to have 1.2 XP boost for the final week. - add XP boost label to the countdown - calculate new XP amount ![image](https://github.com/tahowallet/dapp/assets/20949277/9b18c142-8aa1-4ac7-a3fa-d45ed3337b66)![image](https://github.com/tahowallet/dapp/assets/20949277/9d7f41ac-ce87-482c-9781-a06ea04162f7)
tahowallet · Dec 7, 2023 · 4aed06e · 4aed06e
2 parents 45668f4 + da07b6c
commit 4aed06e
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 9 deletions.
diff --git a/src/shared/assets/icons/xp-boost.svg b/src/shared/assets/icons/xp-boost.svg
diff --git a/src/shared/components/RealmPanel/RealmDetailsPanel/RealmDetailsHeader.tsx b/src/shared/components/RealmPanel/RealmDetailsPanel/RealmDetailsHeader.tsx
@@ -6,7 +6,11 @@ import {
   getRadialGradientFromRealmColor,
   separateThousandsByComma,
 } from "shared/utils"
-import { WEEKLY_XP_ALLOCATION, getRealmMapData } from "shared/constants"
+import {
+  WEEKLY_XP_ALLOCATION,
+  WEEKLY_XP_BOOST,
+  getRealmMapData,
+} from "shared/constants"
 import { RealmData } from "shared/types"
 import RealmDetailsSection from "./RealmDetailsSection"
 
@@ -54,7 +58,8 @@ export default function RealmDetailsHeader({
                 />
                 <span className="label_value">
                   {separateThousandsByComma(
-                    /* realm.xpAllocatable || */ WEEKLY_XP_ALLOCATION,
+                    /* realm.xpAllocatable || */ WEEKLY_XP_ALLOCATION *
+                      WEEKLY_XP_BOOST,
                     0
                   )}{" "}
                   XP

diff --git a/src/shared/components/RealmPanel/RealmPanelCountdown.tsx b/src/shared/components/RealmPanel/RealmPanelCountdown.tsx
@@ -6,6 +6,8 @@ import {
   useDappSelector,
 } from "redux-state"
 import { getNextSelectedWeekDay, getTimeRemaining } from "shared/utils"
+import xpBoostIcon from "shared/assets/icons/xp-boost.svg"
+import Icon from "../Icon"
 
 export default function RealmPanelCountdown() {
   const seasonWeek = useDappSelector(selectSeasonWeek)
@@ -19,14 +21,23 @@ export default function RealmPanelCountdown() {
 
   return (
     <>
-      <div className="countdown">
-        <div className="week">
-          Week {seasonWeek}{" "}
-          <span style={{ fontSize: 16, color: "var(--secondary-s1-50)" }}>
-            / {seasonDuration}
-          </span>
+      <div className="countdown row">
+        <Icon
+          type="image"
+          src={xpBoostIcon}
+          width="125px"
+          height="64px"
+          style={{ marginTop: "10px" }}
+        />
+        <div className="column">
+          <div className="week">
+            Week {seasonWeek}{" "}
+            <span style={{ fontSize: 16, color: "var(--secondary-s1-50)" }}>
+              / {seasonDuration}
+            </span>
+          </div>
+          <div className="time_remaining">{timeRemaining}</div>
         </div>
-        <div className="time_remaining">{timeRemaining}</div>
       </div>
       <style jsx>{`
         .countdown {

diff --git a/src/shared/constants/game.ts b/src/shared/constants/game.ts
@@ -1,4 +1,5 @@
 export const WEEKLY_XP_ALLOCATION = 1_000_000
+export const WEEKLY_XP_BOOST = 1.2
 export const MOBILE_BREAKPOINT = 854
 export const TABLET_BREAKPOINT = 1152
 export const XP_COMING_SOON_TEXT = "XP Drop coming soon"