diff --git a/src/components/market/DynamicElixirPotionsMultiplier.vue b/src/components/market/DynamicElixirPotionsMultiplier.vue index 1711589ec..3e3894c64 100644 --- a/src/components/market/DynamicElixirPotionsMultiplier.vue +++ b/src/components/market/DynamicElixirPotionsMultiplier.vue @@ -1,23 +1,33 @@ @@ -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; +} diff --git a/src/components/myPositions/MyPositionsInfo.vue b/src/components/myPositions/MyPositionsInfo.vue index 5872d9c82..7e036e73f 100644 --- a/src/components/myPositions/MyPositionsInfo.vue +++ b/src/components/myPositions/MyPositionsInfo.vue @@ -15,7 +15,9 @@ >

Total {{ data.title }}

-
+
+
+ 1 sdeUSD earns + {{ data.rate }} Potions + weekly +
@@ -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 { diff --git a/src/helpers/dataStore.ts b/src/helpers/dataStore.ts index 8b0897b7f..f098c7a82 100644 --- a/src/helpers/dataStore.ts +++ b/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); diff --git a/src/views/MyPositions.vue b/src/views/MyPositions.vue index 138d3bd48..457e7b248 100644 --- a/src/views/MyPositions.vue +++ b/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;