Hotfix 1.17.5 (#780)

* Add ability to add third party APRs & add Lido steth APR

* 1.17.5

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@balancer-labs/frontend-v2",
-  "version": "1.17.4",
+  "version": "1.17.5",
   "engines": {
     "node": "14.x",
     "npm": ">=7"

src/components/tooltips/LiquidityMiningTooltip.vue

@@ -19,6 +19,15 @@
           {{ fNum(pool.dynamic.apr.pool, 'percent') }}
           <span class="ml-1 text-gray-500 text-xs">{{ $t('swapFeeAPR') }}</span>
         </div>
+        <div
+          v-if="hasThirdPartyAPR"
+          class="whitespace-nowrap flex items-center mb-1"
+        >
+          {{ fNum(pool.dynamic.apr.thirdParty, 'percent') }}
+          <span class="ml-1 text-gray-500 text-xs">
+            {{ thirdPartyAPRLabel }}
+          </span>
+        </div>
         <div class="whitespace-nowrap flex items-center">
           {{ fNum(pool.dynamic.apr.liquidityMining, 'percent') }}
           <span class="ml-1 text-gray-500 text-xs flex items-center">
@@ -54,6 +63,9 @@ import { defineComponent, PropType, computed } from 'vue';
 import useNumbers from '@/composables/useNumbers';
 import useTokens from '@/composables/useTokens';
 import { DecoratedPool } from '@/services/balancer/subgraph/types';
+import { bnum } from '@/lib/utils';
+import { isWstETH } from '@/composables/usePool';
+import { useI18n } from 'vue-i18n';
 
 export default defineComponent({
   name: 'LiquidityMiningTooltip',
@@ -71,6 +83,7 @@ export default defineComponent({
      */
     const { fNum } = useNumbers();
     const { getTokens } = useTokens();
+    const { t } = useI18n();
 
     /**
      * COMPUTED
@@ -85,11 +98,22 @@ export default defineComponent({
       () => Object.keys(lmTokens.value).length > 1
     );
 
+    const hasThirdPartyAPR = computed(() =>
+      bnum(props.pool.dynamic.apr.thirdParty).gt(0)
+    );
+
+    const thirdPartyAPRLabel = computed(() => {
+      if (isWstETH(props.pool)) return t('thirdPartyAPR.steth');
+      return '';
+    });
+
     return {
       lmBreakdown,
       fNum,
       lmTokens,
-      multiRewardPool
+      multiRewardPool,
+      hasThirdPartyAPR,
+      thirdPartyAPRLabel
     };
   }
 });

src/composables/useTime.ts

@@ -3,7 +3,7 @@ export const oneMinInMs = 60 * oneSecondInMs;
 export const oneHourInMs = 60 * oneMinInMs;
 
 export const twentyFourHoursInMs = 24 * oneHourInMs;
-export const twentyFourHourseInSecs = twentyFourHoursInMs / oneSecondInMs;
+export const twentyFourHoursInSecs = twentyFourHoursInMs / oneSecondInMs;
 
 export const timeNowInMs = Math.floor(Date.now() / oneSecondInMs);
 
@@ -13,6 +13,6 @@ export default function useTime() {
     oneMinInMs,
     oneHourInMs,
     twentyFourHoursInMs,
-    twentyFourHourseInSecs
+    twentyFourHoursInSecs
   };
 }

src/locales/default.json

@@ -120,6 +120,9 @@
     "tradeSuccess": "Successfully traded your tokens",
     "tradeInterface": "Trade interface",
     "tradeInterfaceTooltip": "Choose Balancer for the best liquidity across Balancer V1 and V2 pools. Choose Gnosis to buy and sell tokens using gas-less orders while providing MEV protection.",
+    "thirdPartyAPR": {
+        "steth": "stETH staking rewards APR"
+    },
     "investmentPools": "Investment pools",
     "investmentSettled": "Your investment has settled",
     "investmentSuccess": "Your tokens have been added to this pool, and you have received a new LP token representing this investment.",
@@ -391,4 +394,4 @@
     "yearAbbrev": "y",
     "youDidIt": "You did it!",
     "yourTransactions": "Your transactions in this pool"
-}
+}

src/services/balancer/subgraph/entities/pools/index.ts

@@ -19,7 +19,9 @@ import { NetworkId } from '@/constants/network';
 import { configService as _configService } from '@/services/config/config.service';
 import { TokenPrices } from '@/services/coingecko/api/price.service';
 import { FiatCurrency } from '@/constants/currency';
-import { isStable } from '@/composables/usePool';
+import { isStable, isWstETH } from '@/composables/usePool';
+import { twentyFourHoursInSecs } from '@/composables/useTime';
+import { lidoService } from '@/services/lido/lido.service';
 
 const IS_LIQUIDITY_MINING_ENABLED = true;
 
@@ -60,14 +62,14 @@ export default class Pools {
     return this.serialize(pools, pastPools, period, prices, currency);
   }
 
-  private serialize(
+  private async serialize(
     pools: Pool[],
     pastPools: Pool[],
     period: TimeTravelPeriod,
     prices: TokenPrices,
     currency: FiatCurrency
-  ): DecoratedPool[] {
-    return pools.map(pool => {
+  ): Promise<DecoratedPool[]> {
+    const promises = pools.map(async pool => {
       pool.address = this.addressFor(pool.id);
       pool.tokenAddresses = pool.tokensList.map(t => getAddress(t));
       pool.tokens = this.formatPoolTokens(pool);
@@ -82,7 +84,12 @@ export default class Pools {
         liquidityMiningAPR,
         liquidityMiningBreakdown
       } = this.calcLiquidityMiningAPR(pool, prices, currency);
-      const totalAPR = this.calcTotalAPR(poolAPR, liquidityMiningAPR);
+      const thirdPartyAPR = await this.calcThirdPartyAPR(pool);
+      const totalAPR = this.calcTotalAPR(
+        poolAPR,
+        liquidityMiningAPR,
+        thirdPartyAPR
+      );
 
       return {
         ...pool,
@@ -93,13 +100,16 @@ export default class Pools {
           fees,
           apr: {
             pool: poolAPR,
+            thirdParty: thirdPartyAPR,
             liquidityMining: liquidityMiningAPR,
             liquidityMiningBreakdown,
             total: totalAPR
           }
         }
       };
     });
+
+    return Promise.all(promises);
   }
 
   private formatPoolTokens(pool: Pool): PoolToken[] {
@@ -171,9 +181,26 @@ export default class Pools {
     };
   }
 
-  private calcTotalAPR(poolAPR: string, liquidityMiningAPR: string): string {
+  /**
+   * Fetch additional APRs not covered by pool swap fees and
+   * liquidity minning rewards. These APRs may require 3rd party
+   * API requests.
+   */
+  private async calcThirdPartyAPR(pool: Pool): Promise<string> {
+    if (isWstETH(pool)) {
+      return await lidoService.calcStEthAPRFor(pool);
+    }
+    return '0';
+  }
+
+  private calcTotalAPR(
+    poolAPR: string,
+    liquidityMiningAPR: string,
+    thirdPartyAPR: string
+  ): string {
     return bnum(poolAPR)
       .plus(liquidityMiningAPR)
+      .plus(thirdPartyAPR)
       .toString();
   }
 
@@ -187,8 +214,9 @@ export default class Pools {
 
   private async timeTravelBlock(period: TimeTravelPeriod): Promise<number> {
     const currentBlock = await this.service.rpcProviderService.getBlockNumber();
-    const dayInSecs = 24 * 60 * 60;
-    const blocksInDay = Math.round(dayInSecs / this.service.blockTime);
+    const blocksInDay = Math.round(
+      twentyFourHoursInSecs / this.service.blockTime
+    );
 
     switch (period) {
       case '24h':

src/services/balancer/subgraph/types.ts

@@ -42,6 +42,7 @@ export interface DecoratedPool extends Pool {
     volume: string;
     apr: {
       pool: string;
+      thirdParty: string;
       liquidityMining: string;
       liquidityMiningBreakdown: { [address: string]: string };
       total: string;

src/services/coingecko/api/price.service.ts

@@ -9,7 +9,7 @@ import { configService as _configService } from '@/services/config/config.servic
 import { invert } from 'lodash';
 import { returnChecksum } from '@/lib/decorators/return-checksum.decorator';
 import { retryPromiseWithDelay } from '@/lib/utils/promise';
-import { twentyFourHourseInSecs } from '@/composables/useTime';
+import { twentyFourHoursInSecs } from '@/composables/useTime';
 
 /**
  * TYPES
@@ -117,8 +117,8 @@ export class PriceService {
       throw new Error('To many requests for rate limit.');
 
     const now = Math.floor(Date.now() / 1000);
-    const end = now - (now % twentyFourHourseInSecs);
-    const start = end - days * twentyFourHourseInSecs;
+    const end = now - (now % twentyFourHoursInSecs);
+    const start = end - days * twentyFourHoursInSecs;
 
     // TODO - remove once wsteth is supported
     addresses = addresses.filter(
@@ -184,7 +184,7 @@ export class PriceService {
               address === this.appAddresses.stETH
                 ? price * TOKENS.Prices.ExchangeRates.wstETH.stETH
                 : price;
-            dayTimestamp += twentyFourHourseInSecs;
+            dayTimestamp += twentyFourHoursInSecs;
           }
         }
         return [address, prices];

src/services/lido/lido.service.ts

@@ -0,0 +1,53 @@
+import { bnum } from '@/lib/utils';
+import axios from 'axios';
+import { Pool } from '../balancer/subgraph/types';
+import ConfigService, { configService } from '../config/config.service';
+
+type LidoAPRs = {
+  eth: string;
+  steth: string;
+};
+
+type ApiResponse = {
+  data: LidoAPRs;
+};
+
+export default class LidoService {
+  wethAddress: string;
+  wstEthAddress: string;
+
+  constructor(readonly config: ConfigService = configService) {
+    this.wethAddress = config.network.addresses.weth;
+    this.wstEthAddress = config.network.addresses.wstETH;
+  }
+
+  async getStEthAPR(): Promise<string> {
+    try {
+      const {
+        data: { data: aprs }
+      } = await axios.get<ApiResponse>('https://stake.lido.fi/api/apr');
+      return bnum(aprs.steth)
+        .div(100)
+        .toString();
+    } catch (error) {
+      console.error('Failed to fetch stETH APR:', error);
+      return '0';
+    }
+  }
+
+  async calcStEthAPRFor(pool: Pool): Promise<string> {
+    const stethAPR = await this.getStEthAPR();
+    const wethBalance =
+      pool.tokens.find(t => t.address === this.wethAddress)?.balance || '0';
+    const wstethBalance =
+      pool.tokens.find(t => t.address === this.wstEthAddress)?.balance || '0';
+    const totalBalance = bnum(wethBalance).plus(wstethBalance);
+    const wstethRatio = bnum(wstethBalance).div(totalBalance);
+
+    return bnum(stethAPR)
+      .times(wstethRatio)
+      .toString();
+  }
+}
+
+export const lidoService = new LidoService();

src/services/web3/useWeb3.ts

@@ -3,7 +3,7 @@ import { useQuery } from 'vue-query';
 import { Web3Plugin, Web3ProviderSymbol } from './web3.plugin';
 import { Web3Provider } from '@ethersproject/providers';
 import QUERY_KEYS from '@/constants/queryKeys';
-import ConfigService from '../config/config.service';
+import { configService } from '../config/config.service';
 import { isAddress } from '@ethersproject/address';
 import { web3Service } from './web3.service';
 import { rpcProviderService } from '../rpc-provider/rpc-provider.service';
@@ -32,7 +32,6 @@ export default function useWeb3() {
     disconnectWallet,
     connectWallet
   } = inject(Web3ProviderSymbol) as Web3Plugin;
-  const configService = new ConfigService();
   const appNetworkConfig = configService.network;
   const isV1Supported = isAddress(
     configService.network.addresses.exchangeProxy