✨ Added Elixir Potions weekly

src/components/market/DynamicElixirPotionsMultiplier.vue

@@ -1,23 +1,33 @@
 <template>
   <div class="dynamic-elixir-potions-wrap">
     <div class="dynamic-elixir-potions">
-      <div class="title">
-        Elixir Potions Multiplier
-        <TooltipIcon
-          :width="20"
-          :height="20"
-          fill="#FFF"
-          tooltip="Leverage your position to gain bigger multiplier on Elixir Potions"
-        />
+      <div class="row">
+        <div class="title">
+          Elixir Potions Multiplier
+          <TooltipIcon
+            :width="20"
+            :height="20"
+            fill="#FFF"
+            tooltip="Leverage your position to gain bigger multiplier on Elixir Potions"
+          />
+        </div>
+        <div class="value">{{ estimationResult }}X</div>
+      </div>
+      <div class="weekly">
+        1 sdeUSD earns
+        <span class="weekly-value">{{ formatToFixed(elixirRate, 3) }}</span>
+        Potions weekly
       </div>
-      <div class="value">{{ estimationResult }}X</div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { formatToFixed } from "@/helpers/filters";
+import axios from "axios";
 import { defineAsyncComponent } from "vue";
+import { formatToFixed } from "@/helpers/filters";
+import { ELIXIR_POTIONS_URL } from "@/constants/global";
+import { LS_ELIXIR_RARE_KEY } from "@/helpers/dataStore";
 
 const ELIXIR_POTIONS_BASE_MULTIPLIER = 5;
 
@@ -29,6 +39,12 @@ export default {
     },
   },
 
+  data() {
+    return {
+      elixirRate: 0,
+    };
+  },
+
   computed: {
     estimationResult() {
       return formatToFixed(ELIXIR_POTIONS_BASE_MULTIPLIER * this.multiplier, 2);
@@ -40,6 +56,41 @@ export default {
       () => import("@/components/ui/icons/Tooltip.vue")
     ),
   },
+
+  methods: {
+    formatToFixed,
+
+    async getElixirRate() {
+      try {
+        this.checkLocalElixirRate();
+
+        const { data } = await axios.get(`${ELIXIR_POTIONS_URL}`);
+
+        this.elixirRate =
+          data.weeks.filter(({ preliminary }: any) => !preliminary).at(-1)
+            .rate || 0;
+
+        localStorage.setItem(LS_ELIXIR_RARE_KEY, this.elixirRate.toString());
+
+        return;
+      } catch (error) {
+        this.elixirRate = 0;
+        return;
+      }
+    },
+
+    checkLocalElixirRate() {
+      const lsElixirRate = localStorage.getItem(LS_ELIXIR_RARE_KEY);
+
+      if (lsElixirRate) {
+        this.elixirRate = Number(lsElixirRate);
+      }
+    },
+  },
+
+  async created() {
+    await this.getElixirRate();
+  },
 };
 </script>
 
@@ -59,9 +110,9 @@ export default {
 }
 
 .dynamic-elixir-potions {
+  gap: 8px;
   display: flex;
-  align-items: center;
-  justify-content: space-between;
+  flex-direction: column;
   padding: 5px 12px;
   border-radius: 8px;
   background-color: rgba(0, 0, 0, 0.385);
@@ -70,6 +121,12 @@ export default {
   line-height: 150%;
 }
 
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
 .title {
   gap: 4px;
   display: flex;
@@ -80,4 +137,15 @@ export default {
 .value {
   text-transform: uppercase;
 }
+
+.weekly {
+  color: #99a0b2;
+  font-size: 14px;
+  line-height: 21px;
+}
+
+.weekly-value {
+  color: #fff;
+  font-weight: 500;
+}
 </style>

src/components/myPositions/MyPositionsInfo.vue

@@ -15,7 +15,9 @@
       >
         <h4 class="reward-title">Total {{ data.title }}</h4>
         <div class="reward-values">
-          <div class="token-amount">
+          <div
+            :class="['token-amount', { 'elixir-token-amount': index === 0 }]"
+          >
             <img
               class="token-icon"
               src="@/assets/images/tokens/MIM.png"
@@ -25,6 +27,11 @@
             {{ data.value }}
           </div>
         </div>
+        <div class="reward-weekly" v-if="data?.rate">
+          1 sdeUSD earns
+          <span class="reward-weekly-value">{{ data.rate }}</span> Potions
+          weekly
+        </div>
       </div>
     </div>
   </div>
@@ -36,6 +43,7 @@ import type { PropType } from "vue";
 export type TotalAssetsData = {
   title: string;
   value: string | number;
+  rate?: string;
 };
 
 export default {
@@ -127,6 +135,17 @@ export default {
   font-weight: 500;
 }
 
+.elixir-token-amount {
+  background: -webkit-linear-gradient(
+    180deg,
+    #ffe47c 0%,
+    #ff43c3 53.78%,
+    #8150d6 102.24%
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
 .token-icon {
   width: 32px;
   height: 32px;
@@ -160,6 +179,17 @@ export default {
   background-origin: padding-box, border-box;
 }
 
+.reward-weekly {
+  font-size: 12px;
+  line-height: 18px;
+  color: #99a0b2;
+}
+
+.reward-weekly-value {
+  font-weight: 500;
+  color: #fff;
+}
+
 @media screen and (max-width: 1050px) {
   .myPositions-info {
     flex-direction: column;
@@ -175,7 +205,6 @@ export default {
 @media screen and (max-width: 620px) {
   .reward-card {
     width: 100%;
-    height: 73px;
   }
 
   .title {

src/helpers/dataStore.ts

@@ -10,6 +10,7 @@ export const LS_MAGIC_GLP_STAKE_KEY = "abracadabraMagicGlpStakeData";
 export const LS_MAGIC_GLP_STAKE_CHART_KEY = "abracadabraMagicGlpChartData";
 export const LS_MAGIC_APE_STAKE_KEY = "abracadabraMagicApeStakeData";
 export const LS_MAGIC_APE_STAKE_CHART_KEY = "abracadabraMagicApeChartData";
+export const LS_ELIXIR_RARE_KEY = "abracadabraElixirRate";
 
 export const bigintStringify = (payload: any) =>
   JSON.stringify(payload, (key, value) =>
@@ -58,7 +59,7 @@ export const getAndParseCaldronsList = () => {
     const data = cauldronsList.map((item: any) =>
       jsonBigIntTransform(jsonBigNumberTransform(item))
     );
-    
+
     return { data, isCreated: true };
   } catch (error) {
     console.log("getAndParseCaldronsList -> error", error);

src/views/MyPositions.vue

@@ -78,6 +78,8 @@ import type { UserTotalAssets } from "@/helpers/cauldron/types";
 import type { SortOrder } from "@/types/common";
 import axios from "axios";
 import { ELIXIR_POTIONS_URL } from "@/constants/global";
+import { LS_ELIXIR_RARE_KEY } from "@/helpers/dataStore";
+
 export type PositionsSortKey =
   | "positionHealth"
   | "collateralDepositedUsd"
@@ -102,6 +104,7 @@ export default {
       sortOrder: "up" as SortOrder,
       isFiltersPopupOpened: false,
       userElixirInfo: null as any,
+      elixirRate: 0,
     };
   },
 
@@ -149,6 +152,7 @@ export default {
         {
           title: " Elixir Potions Earned",
           value: formatTokenBalance(userElixirPotions),
+          rate: formatToFixed(this.elixirRate, 3),
         },
         {
           title: "Collateral Deposit",
@@ -202,7 +206,7 @@ export default {
     sortByKey(cauldrons: UserOpenPosition[], key: PositionsSortKey) {
       if (this.sortOrder === null || this.cauldrons.length < 2)
         return this.cauldrons;
-      const sortedByKey = cauldrons.sort((a, b) => {
+      const sortedByKey = [...cauldrons].sort((a, b) => {
         const prev = (key === "positionHealth" ? a[key].percent : a[key]) || 0;
         const cur = (key === "positionHealth" ? b[key].percent : b[key]) || 0;
 
@@ -343,10 +347,18 @@ export default {
 
     async getElixirInfo() {
       try {
+        this.checkLocalElixirRate();
+
         const { data } = await axios.get(
           `${ELIXIR_POTIONS_URL}?addresses=${this.account}`
         );
 
+        this.elixirRate =
+          data.weeks.filter(({ preliminary }: any) => !preliminary).at(-1)
+            .rate || 0;
+
+        localStorage.setItem(LS_ELIXIR_RARE_KEY, this.elixirRate.toString());
+
         const { users } = data.totals;
 
         if (!Object.keys(users).length) {
@@ -361,11 +373,40 @@ export default {
         return;
       }
     },
+
+    async getElixirRate() {
+      try {
+        this.checkLocalElixirRate();
+
+        const { data } = await axios.get(`${ELIXIR_POTIONS_URL}`);
+
+        this.elixirRate =
+          data.weeks.filter(({ preliminary }: any) => !preliminary).at(-1)
+            .rate || 0;
+
+        localStorage.setItem(LS_ELIXIR_RARE_KEY, this.elixirRate.toString());
+
+        return;
+      } catch (error) {
+        this.elixirRate = 0;
+        return;
+      }
+    },
+
+    checkLocalElixirRate() {
+      const lsElixirRate = localStorage.getItem(LS_ELIXIR_RARE_KEY);
+
+      if (lsElixirRate) {
+        this.elixirRate = Number(lsElixirRate);
+      }
+    },
   },
 
   async created() {
     if (this.account) {
       await this.getElixirInfo();
+    } else {
+      await this.getElixirRate();
     }
 
     this.positionsIsLoading = true;