Hls latest (#637)

* env: enable HLS

* feat: added background and orb fading

* tidy: updated the token logos (#629)

* tidy: updated the token logos

* feat: added dydx

* fix: increase load spead of trading charts

* feat: first version of the UI shift

* Deployment for HLS testing

* ✨ add APY to HLS staking

* ✨ add APY account overview and summary

* fix: fixed the intro component visibility

* ✨ add warning messages HLS

* fix: menu order

* ✨ implement live APRs

* auto-select first account, add no balance message

* enable tabs for hls, fix net APY for deposit

* fix button for hls, sorting apy and console warnings

* disable feature flag HLS

* fix slider

* update routing

---------

Co-authored-by: Linkie Link <linkielink.dev@gmail.com>

src/api/cache.ts

@@ -60,3 +60,4 @@ export const totalDepositCache: Cache<TotalDepositResponse> = new Map()
 export const allParamsCache: Cache<AssetParamsBaseForAddr[]> = new Map()
 export const underlyingDebtCache: Cache<string> = new Map()
 export const previewDepositCache: Cache<{ vaultAddress: string; amount: string }> = new Map()
+export const stakingAprCache: Cache<StakingApr[]> = new Map()

src/api/hls/getAprs.ts

@@ -0,0 +1,22 @@
+import { cacheFn, stakingAprCache } from 'api/cache'
+import { ENV } from 'constants/env'
+
+export default async function getStakingAprs() {
+  try {
+    return cacheFn(() => fetchAprs(), stakingAprCache, `stakingAprs`)
+  } catch (error) {
+    throw error
+  }
+}
+
+interface StakingAprResponse {
+  stats: StakingApr[]
+}
+
+async function fetchAprs(): Promise<StakingApr[]> {
+  const url = ENV.STRIDE_APRS
+
+  const response = await fetch(url)
+  const body = (await response.json()) as StakingAprResponse
+  return body.stats
+}

src/api/hls/getHLSStakingAssets.ts

@@ -1,6 +1,7 @@
 import { getParamsQueryClient } from 'api/cosmwasm-client'
+import getStakingAprs from 'api/hls/getAprs'
 import getAssetParams from 'api/params/getAssetParams'
-import { getStakingAssets } from 'utils/assets'
+import { getAssetByDenom, getStakingAssets } from 'utils/assets'
 import { BN } from 'utils/helpers'
 import { resolveHLSStrategies } from 'utils/resolvers'
 
@@ -17,8 +18,11 @@ export default async function getHLSStakingAssets() {
     client.totalDeposit({ denom: strategy.denoms.deposit }),
   )
 
+  const aprs = await getStakingAprs()
+
   return Promise.all(depositCaps$).then((depositCaps) => {
     return depositCaps.map((depositCap, index) => {
+      const borrowSymbol = getAssetByDenom(strategies[index].denoms.borrow)?.symbol
       return {
         ...strategies[index],
         depositCap: {
@@ -26,7 +30,7 @@ export default async function getHLSStakingAssets() {
           used: BN(depositCap.amount),
           max: BN(depositCap.cap),
         },
-        apy: 18, // TODO: Actually implement the APY here!
+        apy: (aprs.find((stakingApr) => stakingApr.denom === borrowSymbol)?.strideYield || 0) * 100,
       } as HLSStrategy
     })
   })