✨ Added Elixir potions (#464)

* added elixir potions * updated search total potions * updated ElixirInfo --------- Co-authored-by: Andrey <[email protected]>
Abracadabra-money · Sep 12, 2024 · 3d1bda2 · 3d1bda2
1 parent 2928c1f
commit 3d1bda2
Show file tree

Hide file tree

Showing 5 changed files with 129 additions and 11 deletions.
diff --git a/src/components/myPositions/CauldronPositionItem.vue b/src/components/myPositions/CauldronPositionItem.vue
@@ -41,7 +41,12 @@
     </div>
 
     <div class="position-info">
-      <ul class="position-indicators">
+      <ul
+        :class="[
+          'position-indicators',
+          { 'elixir-potions': isElixirPotions.isShow },
+        ]"
+      >
         <PositionIndicator
           tooltip="Current dollar value of the Collateral Deposited."
           :value="collateralPrice"
@@ -63,6 +68,15 @@
         >
           Required Drop in Price
         </PositionIndicator>
+
+        <PositionIndicator
+          v-if="isElixirPotions.isShow"
+          tooltip=""
+          :value="isElixirPotions.value"
+          tokenFormat
+        >
+          Elixir Potions earned
+        </PositionIndicator>
       </ul>
       <HealthProgress
         :positionHealth="
@@ -80,22 +94,27 @@
 </template>
 
 <script lang="ts">
-import { defineAsyncComponent, type PropType } from "vue";
 import {
   formatUSD,
   formatTokenBalance,
   formatPercent,
 } from "@/helpers/filters";
-import { mapGetters } from "vuex";
 import { ethers } from "ethers";
-//@ts-ignore
+import { mapGetters } from "vuex";
 import mimIcon from "@/assets/images/tokens/MIM.png";
-import type { UserOpenPosition } from "@/helpers/cauldron/position/getUserOpenPositions";
+import { defineAsyncComponent, type PropType } from "vue";
 import type { AssetInfo } from "@/components/myPositions/PositionAssets.vue";
+import type { UserOpenPosition } from "@/helpers/cauldron/position/getUserOpenPositions";
+
+type ElixirInfo = Record<
+  string,
+  { cauldrons: Record<string, number>; total: number }
+>;
 
 export default {
   props: {
     cauldron: { type: Object as PropType<UserOpenPosition>, required: true },
+    userElixirInfo: { type: Object as PropType<ElixirInfo> | null },
   },
 
   data() {
@@ -107,7 +126,7 @@ export default {
   },
 
   computed: {
-    ...mapGetters({ chainId: "getChainId" }),
+    ...mapGetters({ chainId: "getChainId", account: "getAccount" }),
 
     collateralSymbol() {
       return (
@@ -182,6 +201,30 @@ export default {
       if (this.windowWidth < 600) return "50px";
       return "54px";
     },
+
+    isElixirPotions() {
+      const account = this.account?.toLowerCase();
+      const cauldronConfigAddress =
+        this.cauldron?.config?.contract?.address?.toLocaleLowerCase();
+
+      if (!this.userElixirInfo || !account || !cauldronConfigAddress) {
+        return { isShow: false, value: 0 };
+      }
+
+      const cauldrons = this.userElixirInfo[account]?.cauldrons;
+      const cauldronAddress = Object.keys(cauldrons || {}).find(
+        (address) => address.toLocaleLowerCase() === cauldronConfigAddress
+      );
+
+      if (!cauldronAddress) {
+        return { isShow: false, value: 0 };
+      }
+
+      return {
+        isShow: true,
+        value: cauldrons[cauldronAddress],
+      };
+    },
   },
 
   methods: {
@@ -226,6 +269,7 @@ export default {
       () => import("@/components/ui/icons/Tooltip.vue")
     ),
     TokenChainIcon: defineAsyncComponent(
+      // @ts-ignore
       () => import("@/components/ui/icons/TokenChainIcon.vue")
     ),
     OrderButton: defineAsyncComponent(
@@ -321,6 +365,7 @@ export default {
   display: flex;
   gap: 24px;
   margin-bottom: 15px;
+  min-height: 114px;
 }
 
 .position-indicators {
@@ -331,6 +376,10 @@ export default {
   width: 100%;
 }
 
+.elixir-potions {
+  gap: 6px;
+}
+
 .safe {
   border-color: #355237;
 }
@@ -361,6 +410,7 @@ export default {
 @media screen and (max-width: 700px) {
   .position-info {
     flex-direction: column-reverse;
+    min-height: 250px;
   }
 
   .token-name {

diff --git a/src/components/myPositions/MyPositionsInfo.vue b/src/components/myPositions/MyPositionsInfo.vue
@@ -9,7 +9,7 @@
 
     <div class="reward-cards">
       <div
-        :class="['reward-card', { mim: index }]"
+        :class="['reward-card', { elixir: index === 0 }, { mim: index === 2 }]"
         v-for="(data, index) in totalAssetsData"
         :key="data.title"
       >
@@ -151,6 +151,15 @@ export default {
   background-position: 20% 30%;
 }
 
+.elixir {
+  border: 1px solid transparent;
+  border-radius: 16px;
+  background: linear-gradient(to right, #14182a, #14182a),
+    linear-gradient(90deg, #8c4fd5 0%, #ff43c3 50%, #ffda80 100%);
+  background-clip: padding-box, border-box;
+  background-origin: padding-box, border-box;
+}
+
 @media screen and (max-width: 1050px) {
   .myPositions-info {
     flex-direction: column;

diff --git a/src/components/myPositions/PositionIndicator.vue b/src/components/myPositions/PositionIndicator.vue
@@ -2,28 +2,35 @@
   <li :class="['indicator', positionRisk]">
     <span class="title">
       <slot></slot>
-      <Tooltip :tooltip="tooltip" :fill="tooltipColor" />
+      <Tooltip v-if="tooltip" :tooltip="tooltip" :fill="tooltipColor" />
     </span>
-    <span class="value">{{ formattedValue }}</span>
+    <span :class="['value', { 'text-gradient': tokenFormat }]">{{
+      tokenFormat ? formatedTokenValue : formattedValue
+    }}</span>
   </li>
 </template>
 
 <script lang="ts">
-import { formatUSD } from "@/helpers/filters";
+import { formatTokenBalance, formatUSD } from "@/helpers/filters";
 import Tooltip from "@/components/ui/icons/Tooltip.vue";
 
 export default {
   props: {
     value: { type: [Number, String], required: true },
     positionRisk: { type: String, default: "" },
     tooltip: { type: String },
+    tokenFormat: { type: Boolean, default: false },
   },
 
   computed: {
     formattedValue() {
       return formatUSD(this.value);
     },
 
+    formatedTokenValue() {
+      return formatTokenBalance(this.value);
+    },
+
     tooltipColor() {
       switch (this.positionRisk) {
         case "safe":
@@ -73,6 +80,17 @@ export default {
   color: #8c4040;
 }
 
+.text-gradient {
+  background: linear-gradient(
+    270deg,
+    #ffe47c 0%,
+    #ff43c3 53.78%,
+    #8150d6 102.24%
+  );
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
 @media screen and (max-width: 700px) {
   .title,
   .value {

diff --git a/src/constants/global.ts b/src/constants/global.ts
@@ -31,3 +31,5 @@ export const GNOSIS_SAFE_ADDRESS = "0xDF2C270f610Dc35d8fFDA5B453E74db5471E126B";
 
 export const APR_KEY = "abracadabraCauldronsApr";
 export const ETHER_DECIMALS = 18;
+export const ELIXIR_POTIONS_URL =
+  "https://api.0xdreamy.dev/functions/v1/elixir-potions/users";
diff --git a/src/views/MyPositions.vue b/src/views/MyPositions.vue
@@ -33,6 +33,7 @@
           v-for="cauldron in sortedCauldrons"
           :key="`${cauldron.config.id} - ${cauldron.config.chainId}`"
           :cauldron="cauldron"
+          :userElixirInfo="userElixirInfo"
         />
       </div>
 
@@ -65,6 +66,7 @@ import {
 import { mapGetters, mapMutations } from "vuex";
 import { APR_KEY } from "@/constants/global";
 import { getEthersProvider } from "@/helpers/chains/getChainsInfo";
+// @ts-ignore
 import { isApyCalcExist, fetchTokenApy } from "@/helpers/collateralsApy";
 import { getUsersTotalAssets } from "@/helpers/cauldron/position/getUsersTotalAssets";
 import {
@@ -74,7 +76,8 @@ import {
 import type { Address } from "viem";
 import type { UserTotalAssets } from "@/helpers/cauldron/types";
 import type { SortOrder } from "@/types/common";
-
+import axios from "axios";
+import { ELIXIR_POTIONS_URL } from "@/constants/global";
 export type PositionsSortKey =
   | "positionHealth"
   | "collateralDepositedUsd"
@@ -98,6 +101,7 @@ export default {
       sortKey: "mimBorrowed" as PositionsSortKey,
       sortOrder: "up" as SortOrder,
       isFiltersPopupOpened: false,
+      userElixirInfo: null as any,
     };
   },
 
@@ -137,7 +141,15 @@ export default {
     },
 
     totalAssetsData() {
+      const userElixirPotions = !this.userElixirInfo
+        ? 0
+        : this.userElixirInfo[this.account.toLowerCase()].total;
+
       return [
+        {
+          title: " Elixir Potions Earned",
+          value: formatTokenBalance(userElixirPotions),
+        },
         {
           title: "Collateral Deposit",
           value: formatUSD(this.totalAssets?.collateralDepositedInUsd || 0),
@@ -168,7 +180,9 @@ export default {
       if (!this.account) {
         this.cauldrons = [];
         this.totalAssets = null;
+        this.userElixirInfo = null;
       } else {
+        await this.getElixirInfo();
         this.checkLocalData();
         await this.createOpenPositions();
       }
@@ -326,9 +340,34 @@ export default {
         this.totalAssets = this.userTotalAssets.data;
       }
     },
+
+    async getElixirInfo() {
+      try {
+        const { data } = await axios.get(
+          `${ELIXIR_POTIONS_URL}?addresses=${this.account}`
+        );
+
+        const { users } = data.totals;
+
+        if (!Object.keys(users).length) {
+          this.userElixirInfo = null;
+        } else {
+          this.userElixirInfo = users;
+        }
+
+        return;
+      } catch (error) {
+        this.userElixirInfo = null;
+        return;
+      }
+    },
   },
 
   async created() {
+    if (this.account) {
+      await this.getElixirInfo();
+    }
+
     this.positionsIsLoading = true;
     this.checkLocalData();
     await this.createOpenPositions();