Move APR breakdown behind FF (osmosis-labs#2560)

* Move APR breakdown behind FF * restructure
cosmostation · Dec 15, 2023 · 9f0ceca · 9f0ceca
1 parent bb1c592
commit 9f0ceca
Show file tree

Hide file tree

Showing 4 changed files with 115 additions and 41 deletions.
diff --git a/packages/web/components/complex/all-pools-table.tsx b/packages/web/components/complex/all-pools-table.tsx
@@ -22,6 +22,7 @@ import {
   useRef,
   useState,
 } from "react";
+import { ReactNode } from "react";
 
 import { Icon } from "~/components/assets";
 import { PaginatedTable } from "~/components/complex/paginated-table";
@@ -432,46 +433,53 @@ export const AllPoolsTable: FunctionComponent<{
                * If pool APR is 50 times bigger than staking APR, warn user
                * that pool may be subject to inflation
                */
-              const isAPRTooHigh = inflation.inflation.toDec().gt(new Dec(0))
-                ? pool.apr
-                    .toDec()
-                    .gt(
-                      inflation.inflation
-                        .toDec()
-                        .quo(new Dec(100))
-                        .mul(new Dec(100))
-                    )
-                : false;
+              const isAPRTooHigh =
+                !Boolean(pool.concentratedPoolDetail) &&
+                inflation.inflation.toDec().gt(new Dec(0))
+                  ? pool.apr
+                      .toDec()
+                      .gt(
+                        inflation.inflation
+                          .toDec()
+                          .quo(new Dec(100))
+                          .mul(new Dec(100))
+                      )
+                  : false;
+
+              let value: ReactNode | null;
+              if (isAPRTooHigh) {
+                // Only display warning when APR is too high
+                value = (
+                  <Tooltip
+                    className="w-5"
+                    content={t("highPoolInflationWarning")}
+                  >
+                    <p className="flex items-center gap-1.5">
+                      <Icon
+                        id="alert-triangle"
+                        className="h-4 w-4 text-osmoverse-400"
+                      />
+                      {pool.apr.toString()}
+                    </p>
+                  </Tooltip>
+                );
+              } else if (
+                Boolean(pool.concentratedPoolDetail) &&
+                flags.aprBreakdown
+              ) {
+                value = <ClAprBreakdownCell poolId={pool.queryPool.id} />;
+              } else if (flags._isInitialized) {
+                value = pool.apr.toString();
+              } else {
+                value = null;
+              }
 
               return (
                 <MetricLoaderCell
                   isLoading={
                     queriesOsmosis.queryIncentivizedPools.isAprFetching
                   }
-                  value={
-                    // Only display warning when APR is too high
-                    isAPRTooHigh ? (
-                      <Tooltip
-                        className="w-5"
-                        content={t("highPoolInflationWarning")}
-                      >
-                        <p className="flex items-center gap-1.5">
-                          <Icon
-                            id="alert-triangle"
-                            className="h-4 w-4 text-osmoverse-400"
-                          />
-                          {pool.apr.toString()}
-                        </p>
-                      </Tooltip>
-                    ) : Boolean(pool.concentratedPoolDetail) ? (
-                      <ClAprBreakdownCell
-                        poolId={pool.queryPool.id}
-                        apr={pool.apr}
-                      />
-                    ) : (
-                      pool.apr.toString()
-                    )
-                  }
+                  value={value}
                 />
               );
             }
@@ -521,6 +529,8 @@ export const AllPoolsTable: FunctionComponent<{
         quickLockTokens,
         quickRemoveLiquidity,
         t,
+        flags.aprBreakdown,
+        flags._isInitialized,
       ]
     );
 

diff --git a/packages/web/components/table/cells/cl-apr-breakdown.tsx b/packages/web/components/table/cells/cl-apr-breakdown.tsx
@@ -11,8 +11,7 @@ import { theme } from "~/tailwind.config";
 
 export const ClAprBreakdownCell: FunctionComponent<{
   poolId: string;
-  apr: RatePretty;
-}> = observer(({ poolId, apr }) => {
+}> = observer(({ poolId }) => {
   const { queriesExternalStore } = useStore();
   const poolAprs = queriesExternalStore.queryPoolAprs.getForPool(poolId);
 
@@ -33,7 +32,7 @@ export const ClAprBreakdownCell: FunctionComponent<{
         ) : (
           <Icon id="info" className="h-4 w-4 text-osmoverse-400" />
         )}
-        {apr.maxDecimals(0).toString()}
+        {poolAprs?.totalApr?.maxDecimals(0).toString() ?? ""}
       </p>
     </Tooltip>
   );

diff --git a/packages/web/hooks/use-feature-flags.ts b/packages/web/hooks/use-feature-flags.ts
@@ -20,7 +20,8 @@ export type AvailableFlags =
   | "sidecarRouter"
   | "legacyRouter"
   | "tfmRouter"
-  | "osmosisUpdatesPopUp";
+  | "osmosisUpdatesPopUp"
+  | "aprBreakdown";
 
 type ModifiedFlags =
   | Exclude<AvailableFlags, "mobileNotifications">

diff --git a/packages/web/stores/derived-data/pools/metrics.ts b/packages/web/stores/derived-data/pools/metrics.ts
@@ -1,8 +1,20 @@
-import { PricePretty, RatePretty } from "@keplr-wallet/unit";
+import {
+  Dec,
+  DecUtils,
+  Int,
+  PricePretty,
+  RatePretty,
+} from "@keplr-wallet/unit";
 import { HasMapStore, IQueriesStore } from "@osmosis-labs/keplr-stores";
+import {
+  priceToTick,
+  roundPriceToNearestTick,
+  roundToNearestDivisible,
+} from "@osmosis-labs/math";
 import {
   ChainStore,
   IPriceStore,
+  MODERATE_STRATEGY_MULTIPLIER,
   ObservableConcentratedPoolDetails,
   ObservablePoolsBonding,
   ObservableQueryActiveGauges,
@@ -102,9 +114,61 @@ export class ObservablePoolWithMetric {
       this.concentratedPoolDetail.queryConcentratedPool &&
       this.queryPool.concentratedLiquidityPoolInfo
     ) {
+      const poolDenoms =
+        this.concentratedPoolDetail.queryConcentratedPool.poolAssetDenoms;
+      const poolAssets =
+        this.concentratedPoolDetail.queryConcentratedPool.poolAssets;
+
+      // use moderate price range APR
+      const { min, max } =
+        this.externalQueries.queryTokenPairHistoricalChart.get(
+          this.queryPool.pool.id,
+          "7d",
+          poolDenoms[0],
+          poolDenoms[1]
+        );
+
+      const baseCurrency = poolAssets[0].amount.currency;
+      const quoteCurrency = poolAssets[1].amount.currency;
+
+      const multiplicationQuoteOverBase = DecUtils.getTenExponentN(
+        baseCurrency.coinDecimals - quoteCurrency.coinDecimals
+      );
+
+      const removeCurrencyDecimals = (price: number) => {
+        return new Dec(price).quo(multiplicationQuoteOverBase);
+      };
+
+      // query returns prices with decimals for display
+      const minPrice7d = removeCurrencyDecimals(min);
+      const maxPrice7d = removeCurrencyDecimals(max);
+      let priceDiff = maxPrice7d
+        .sub(minPrice7d)
+        .mul(new Dec(MODERATE_STRATEGY_MULTIPLIER));
+
+      const tickSpacing =
+        this.queryPool.concentratedLiquidityPoolInfo.tickSpacing;
+
+      const priceRange = [
+        roundPriceToNearestTick(minPrice7d.sub(priceDiff), tickSpacing, true),
+        roundPriceToNearestTick(maxPrice7d.add(priceDiff), tickSpacing, false),
+      ];
+
+      const tickDivisor = new Int(1000);
+      const tickRange = [
+        roundToNearestDivisible(priceToTick(priceRange[0]), tickDivisor),
+        roundToNearestDivisible(priceToTick(priceRange[1]), tickDivisor),
+      ];
+
+      if (tickRange[0].equals(tickRange[1])) {
+        tickRange[0] = tickRange[0].sub(tickDivisor);
+        tickRange[1] = tickRange[1].add(tickDivisor);
+      }
+
       return (
-        this.externalQueries.queryPoolAprs.getForPool(this.queryPool.id)
-          ?.totalApr ?? new RatePretty(0)
+        this.externalQueries.queryPriceRangeAprs
+          .get(this.queryPool.id, tickRange[0], tickRange[1])
+          .apr?.maxDecimals(0) ?? new RatePretty(0)
       );
     }