♻️⚡️ Cauldrons Apr: refactoring & optimization (#535)

* initial apr fetching optimization * import ts fix * saving aprs to localStorage + skeletonm for APRS * getLUSDApy viem rewrite * updated getCRVApy for viem * console.log cleanup * uncommented ls saving logic * glp aprs * updated getMagicApeApy, distribution ended. --------- Co-authored-by: Andrey <[email protected]>
Abracadabra-money · Feb 19, 2025 · a7dca06 · a7dca06
1 parent 3dc66b9
commit a7dca06
Show file tree

Hide file tree

Showing 25 changed files with 708 additions and 354 deletions.
diff --git a/src/components/cauldrons/CauldronCardItem.vue b/src/components/cauldrons/CauldronCardItem.vue
@@ -18,7 +18,7 @@
         {{ cauldron.config.name }}
       </div>
 
-      <RewardInfo :cauldron="cauldron" small />
+      <RewardInfo :cauldron="cauldron" :aprsLoading="aprsLoading" small />
     </div>
 
     <div class="row">
@@ -77,6 +77,7 @@ export default {
       type: Object as () => CauldronListItem,
       required: true,
     },
+    aprsLoading: { type: Boolean, default: false },
   },
 
   data() {

diff --git a/src/components/cauldrons/CauldronsTable.vue b/src/components/cauldrons/CauldronsTable.vue
@@ -33,6 +33,7 @@
             v-for="(cauldron, index) in cauldronsToRender"
             :key="index"
             :cauldron="cauldron"
+            :aprsLoading="aprsLoading"
           />
         </div>
         <div class="card-wrapper">
@@ -71,6 +72,7 @@ export default {
       required: true,
     },
     cauldronsLoading: { type: Boolean },
+    aprsLoading: { type: Boolean },
     tableKeys: {
       type: Array,
       required: true,

diff --git a/src/components/cauldrons/RewardInfo.vue b/src/components/cauldrons/RewardInfo.vue
@@ -9,7 +9,9 @@
           alt="Elixir icon"
         />
       </div>
-      <div class="elixir-apr" v-if="loopApr">
+
+      <RowSkeleton v-if="aprsLoading" height="24px" />
+      <div class="elixir-apr" v-else>
         {{ loopApr }}
         <img
           class="token-icon"
@@ -21,14 +23,19 @@
   </div>
 
   <div :class="['column', 'apr', { small }]" v-else>
-    {{ loopApr }}
+    <RowSkeleton v-if="aprsLoading" height="24px" />
+
+    <template v-else>
+      {{ loopApr }}
+    </template>
   </div>
 </template>
 
 <script lang="ts">
 import { MAINNET_CHAIN_ID } from "@/constants/global";
 import type { CauldronListItem } from "@/helpers/cauldron/lists/getMarketList";
 import { formatToFixed } from "@/helpers/filters";
+import { defineAsyncComponent } from "vue";
 
 export default {
   props: {
@@ -41,6 +48,8 @@ export default {
       type: Boolean,
       default: false,
     },
+
+    aprsLoading: { type: Boolean, default: false },
   },
 
   data() {
@@ -61,9 +70,18 @@ export default {
       if (!this.cauldron.apr.value) return "-";
 
       const { value, multiplier } = this.cauldron.apr;
-      return `${value}% - ${formatToFixed(value * multiplier, 2)}%`;
+      return `${formatToFixed(value, 2)}% - ${formatToFixed(
+        value * multiplier,
+        2
+      )}%`;
     },
   },
+
+  components: {
+    RowSkeleton: defineAsyncComponent(
+      () => import("@/components/ui/skeletons/RowSkeleton.vue")
+    ),
+  },
 };
 </script>
 
@@ -157,6 +175,10 @@ export default {
   line-height: 150%;
 }
 
+.row-skeleton {
+  margin: auto;
+}
+
 @media screen and (max-width: 600px) {
   .reward-info {
     padding: 5px 8px;

diff --git a/src/configs/cauldrons/arbitrumCauldrons.ts b/src/configs/cauldrons/arbitrumCauldrons.ts
@@ -86,6 +86,7 @@ const config: Array<CauldronConfig> = [
       hasWithdrawableLimit: false,
       localBorrowAmountLimit: false,
       hasCrvClaimLogic: false,
+      isAprExist: true,
     },
     contract: {
       name: "CauldronV4",
@@ -137,6 +138,7 @@ const config: Array<CauldronConfig> = [
       localBorrowAmountLimit: false,
       hasCrvClaimLogic: false,
       isMagicGLP: true,
+      isAprExist: true,
     },
     contract: {
       name: "CauldronV4",
@@ -194,6 +196,7 @@ const config: Array<CauldronConfig> = [
       localBorrowAmountLimit: false,
       hasCrvClaimLogic: false,
       isGMXMarket: true,
+      isAprExist: true,
       weight: 3,
     },
     contract: {
@@ -238,6 +241,7 @@ const config: Array<CauldronConfig> = [
       localBorrowAmountLimit: false,
       hasCrvClaimLogic: false,
       isGMXMarket: true,
+      isAprExist: true,
       weight: 3,
     },
     contract: {
@@ -282,6 +286,7 @@ const config: Array<CauldronConfig> = [
       localBorrowAmountLimit: false,
       hasCrvClaimLogic: false,
       isGMXMarket: true,
+      isAprExist: true,
       weight: 3,
     },
     contract: {
@@ -326,6 +331,7 @@ const config: Array<CauldronConfig> = [
       localBorrowAmountLimit: false,
       hasCrvClaimLogic: false,
       isGMXMarket: true,
+      isAprExist: true,
       weight: 3,
     },
     contract: {
@@ -370,6 +376,7 @@ const config: Array<CauldronConfig> = [
       localBorrowAmountLimit: false,
       hasCrvClaimLogic: false,
       isGMXMarket: true,
+      isAprExist: true,
       weight: 3,
     },
     contract: {
@@ -573,6 +580,7 @@ const config: Array<CauldronConfig> = [
       localBorrowAmountLimit: false,
       hasCrvClaimLogic: false,
       isGMXMarket: true,
+      isAprExist: true,
       weight: 3,
     },
     contract: {
@@ -618,6 +626,7 @@ const config: Array<CauldronConfig> = [
       localBorrowAmountLimit: false,
       hasCrvClaimLogic: false,
       isGMXMarket: true,
+      isAprExist: true,
       weight: 3,
     },
     contract: {

diff --git a/src/configs/cauldrons/configTypes.ts b/src/configs/cauldrons/configTypes.ts
@@ -37,6 +37,7 @@ type CauldronSettings = {
   isNoDeleverage?: boolean;
   hasElixirPotions?: boolean;
   isUSD0?: boolean;
+  isAprExist?: boolean;
   isBeraDesign?: boolean;
   weight?: number;
 };

diff --git a/src/configs/cauldrons/ethereumCauldrons.ts b/src/configs/cauldrons/ethereumCauldrons.ts
@@ -581,6 +581,7 @@ const config: Array<CauldronConfig> = [
       localBorrowAmountLimit: false,
       hasCrvClaimLogic: false,
       isCvxTricrypto: true,
+      isAprExist: true,
     },
     contract: {
       name: "PrivilegedCheckpointCauldronV4",
@@ -887,6 +888,7 @@ const config: Array<CauldronConfig> = [
       hasWithdrawableLimit: false,
       localBorrowAmountLimit: false,
       hasCrvClaimLogic: true,
+      isAprExist: true,
     },
     contract: {
       name: "CauldronV2Flat",
@@ -931,6 +933,7 @@ const config: Array<CauldronConfig> = [
       localBorrowAmountLimit: false,
       hasCrvClaimLogic: false,
       isCvx3pool: true,
+      isAprExist: true,
     },
     contract: {
       name: "PrivilegedCheckpointCauldronV4",
@@ -1334,6 +1337,7 @@ const config: Array<CauldronConfig> = [
       hasWithdrawableLimit: true,
       localBorrowAmountLimit: false,
       hasCrvClaimLogic: false,
+      isAprExist: true,
     },
     contract: {
       name: "CauldronV3_2",
@@ -1529,6 +1533,7 @@ const config: Array<CauldronConfig> = [
       localBorrowAmountLimit: false,
       hasCrvClaimLogic: false,
       isMagicApe: true,
+      isAprExist: true,
     },
     contract: {
       name: "CauldronV4",
@@ -1706,6 +1711,7 @@ const config: Array<CauldronConfig> = [
       iStdeUSD: true,
       isNoDeleverage: true,
       hasElixirPotions: true,
+      isAprExist: true,
       weight: 2,
     },
     contract: {
@@ -1754,6 +1760,7 @@ const config: Array<CauldronConfig> = [
       iStdeUSD: true,
       isNoDeleverage: true,
       hasElixirPotions: true,
+      isAprExist: true,
     },
     contract: {
       name: "CauldronV4",
@@ -1799,6 +1806,7 @@ const config: Array<CauldronConfig> = [
       localBorrowAmountLimit: false,
       hasCrvClaimLogic: false,
       isUSD0: true,
+      isAprExist: true,
       weight: 4,
     },
     contract: {

diff --git a/src/constants/global.ts b/src/constants/global.ts
@@ -13,6 +13,7 @@ export const ONE_MILLISECOND: number = 1000;
 export const RANDOM_ACCOUNT: string = Wallet.createRandom().address;
 
 export const MAINNET_CHAIN_ID: number = 1;
+export const OPTIMISM_CHAIN_ID: number = 10;
 export const BSC_CHAIN_ID: number = 56;
 export const KAVA_CHAIN_ID: number = 2222;
 export const ARBITRUM_CHAIN_ID: number = 42161;