Mp 3367 staking interactions (#613)

* ♻️ Refactor borrowRate to be in full numbers * ✨Enter into HLS Staking strategy * ✨HLS Staking deposited table + Portfolio pages * tidy: refactored the masks for HealthBar --------- Co-authored-by: Linkie Link <linkielink.dev@gmail.com>
2023-11-03 15:01:15 +01:00 · 2023-11-03 15:01:15 +01:00 · d2afe06b16
commit d2afe06b16
parent dd29f17a42
58 changed files with 743 additions and 194 deletions
--- a/src/api/accounts/getAccount.ts
+++ b/src/api/accounts/getAccount.ts
@ -4,16 +4,20 @@ import getDepositedVaults from 'api/vaults/getDepositedVaults'
 import { BNCoin } from 'types/classes/BNCoin'
 import { Positions } from 'types/generated/mars-credit-manager/MarsCreditManager.types'

-export default async function getAccount(accountIdAndKind: AccountIdAndKind): Promise<Account> {
+export default async function getAccount(accountId?: string): Promise<Account> {
+  if (!accountId) return new Promise((_, reject) => reject('No account ID found'))
+
  const creditManagerQueryClient = await getCreditManagerQueryClient()

  const accountPosition: Positions = await cacheFn(
-    () => creditManagerQueryClient.positions({ accountId: accountIdAndKind.id }),
+    () => creditManagerQueryClient.positions({ accountId: accountId }),
    positionsCache,
-    `account/${accountIdAndKind.id}`,
+    `account/${accountId}`,
  )

-  const depositedVaults = await getDepositedVaults(accountIdAndKind.id, accountPosition)
+  const accountKind = await creditManagerQueryClient.accountKind({ accountId: accountId })
+
+  const depositedVaults = await getDepositedVaults(accountId, accountPosition)

  if (accountPosition) {
    return {
@ -22,7 +26,7 @@ export default async function getAccount(accountIdAndKind: AccountIdAndKind): Pr
      lends: accountPosition.lends.map((lend) => new BNCoin(lend)),
      deposits: accountPosition.deposits.map((deposit) => new BNCoin(deposit)),
      vaults: depositedVaults,
-      kind: accountIdAndKind.kind,
+      kind: accountKind,
    }
  }

--- a/src/api/hls/getHLSStakingAccounts.ts
+++ b/src/api/hls/getHLSStakingAccounts.ts
@ -0,0 +1,41 @@
+import getHLSStakingAssets from 'api/hls/getHLSStakingAssets'
+import getPrices from 'api/prices/getPrices'
+import getAccounts from 'api/wallets/getAccounts'
+import { calculateAccountLeverage, getAccountPositionValues, isAccountEmpty } from 'utils/accounts'
+
+export default async function getHLSStakingAccounts(
+  address?: string,
+): Promise<HLSAccountWithStrategy[]> {
+  const accounts = await getAccounts('high_levered_strategy', address)
+  const activeAccounts = accounts.filter((account) => !isAccountEmpty(account))
+  const hlsStrategies = await getHLSStakingAssets()
+  const prices = await getPrices()
+  const hlsAccountsWithStrategy: HLSAccountWithStrategy[] = []
+
+  activeAccounts.forEach((account) => {
+    if (account.deposits.length === 0 || account.debts.length === 0) return
+
+    const strategy = hlsStrategies.find(
+      (strategy) =>
+        strategy.denoms.deposit === account.deposits.at(0).denom &&
+        strategy.denoms.borrow === account.debts.at(0).denom,
+    )
+
+    if (!strategy) return
+
+    const [deposits, lends, debts, vaults] = getAccountPositionValues(account, prices)
+
+    hlsAccountsWithStrategy.push({
+      ...account,
+      strategy,
+      values: {
+        net: deposits.minus(debts),
+        debt: debts,
+        total: deposits,
+      },
+      leverage: calculateAccountLeverage(account, prices).toNumber(),
+    })
+  })
+
+  return hlsAccountsWithStrategy
+}
--- a/src/api/hls/getHLSStakingAssets.ts
+++ b/src/api/hls/getHLSStakingAssets.ts
@ -1,14 +1,18 @@
 import { getParamsQueryClient } from 'api/cosmwasm-client'
 import getAssetParams from 'api/params/getAssetParams'
+import { getStakingAssets } from 'utils/assets'
 import { BN } from 'utils/helpers'
 import { resolveHLSStrategies } from 'utils/resolvers'

 export default async function getHLSStakingAssets() {
+  const stakingAssetDenoms = getStakingAssets().map((asset) => asset.denom)
  const assetParams = await getAssetParams()
-  const client = await getParamsQueryClient()
-  const HLSAssets = assetParams.filter((asset) => asset.credit_manager.hls)
+  const HLSAssets = assetParams
+    .filter((asset) => stakingAssetDenoms.includes(asset.denom))
+    .filter((asset) => asset.credit_manager.hls)
  const strategies = resolveHLSStrategies('coin', HLSAssets)

+  const client = await getParamsQueryClient()
  const depositCaps$ = strategies.map((strategy) =>
    client.totalDeposit({ denom: strategy.denoms.deposit }),
  )
--- a/src/api/vaults/getVaults.ts
+++ b/src/api/vaults/getVaults.ts
@ -41,7 +41,7 @@ export default async function getVaults(): Promise<Vault[]> {
          ),
        },
        apy: apr ? convertAprToApy(apr.apr, 365) : null,
-        apr: apr ? apr.apr / 100 : null,
+        apr: apr ? apr.apr : null,
        ltv: {
          max: Number(vaultConfig.max_loan_to_value),
          liq: Number(vaultConfig.liquidation_threshold),
--- a/src/api/wallets/getAccounts.ts
+++ b/src/api/wallets/getAccounts.ts
@ -8,7 +8,7 @@ export default async function getAccounts(kind: AccountKind, address?: string):

  const $accounts = accountIdsAndKinds
    .filter((a) => a.kind === kind)
-    .map((account) => getAccount(account))
+    .map((account) => getAccount(account.id))

  const accounts = await Promise.all($accounts).then((accounts) => accounts)

--- a/src/components/Account/AccountBalancesTable/useAccountBalanceData.tsx
+++ b/src/components/Account/AccountBalancesTable/useAccountBalanceData.tsx
@ -65,7 +65,7 @@ export default function useAccountBalanceData(props: Props) {
      const prevDebt = updatedAccount
        ? account?.debts.find((position) => position.denom === debt.denom)
        : debt
-      return getAssetAccountBalanceRow('borrowing', asset, prices, debt, apy * -100, prevDebt)
+      return getAssetAccountBalanceRow('borrowing', asset, prices, debt, apy, prevDebt)
    })
    return [...deposits, ...lends, ...vaults, ...debts]
  }, [prices, account, updatedAccount, borrowingData, lendingData])
--- a/src/components/Account/AccountList/AccountStats.tsx
+++ b/src/components/Account/AccountList/AccountStats.tsx
@ -21,7 +21,7 @@ interface Props {

 export default function AccountStats(props: Props) {
  const { accountId, isActive, setShowMenu } = props
-  const { data: account } = useAccount('default', accountId)
+  const { data: account } = useAccount(accountId)
  const { data: prices } = usePrices()
  const positionBalance = useMemo(
    () => (!account ? null : calculateAccountBalanceValue(account, prices)),
--- a/src/components/Account/Health/HealthBar.tsx
+++ b/src/components/Account/Health/HealthBar.tsx
@ -1,6 +1,7 @@
 import classNames from 'classnames'
 import { useMemo } from 'react'

+import HealthIcon from 'components/Account/Health/HealthIcon'
 import HealthTooltip from 'components/Account/Health/HealthTooltip'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
 import { LocalStorageKeys } from 'constants/localStorageKeys'
@ -9,12 +10,15 @@ import useLocalStorage from 'hooks/useLocalStorage'
 import { getHealthIndicatorColors } from 'utils/healthIndicator'

 interface Props {
+  className?: string
+  hasLabel?: boolean
  health: number
  healthFactor: number
+  height?: string
+  iconClassName?: string
  updatedHealth?: number
  updatedHealthFactor?: number
-  hasLabel?: boolean
-  className?: string
+  showIcon?: boolean
 }

 function calculateHealth(health: number): number {
@ -36,6 +40,9 @@ export default function HealthBar({
  healthFactor = 0,
  updatedHealthFactor = 0,
  className,
+  height = '4',
+  iconClassName = 'w-5',
+  showIcon = false,
 }: Props) {
  const [reduceMotion] = useLocalStorage<boolean>(
    LocalStorageKeys.REDUCE_MOTION,
@ -57,74 +64,97 @@ export default function HealthBar({
      health={isUpdated ? updatedHealth : health}
      healthFactor={isUpdated ? updatedHealthFactor : healthFactor}
    >
-      <div className={classNames('flex w-full', className)}>
-        <svg version='1.1' xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 184 4'>
-          <mask id='healthBarMask'>
-            <path fill='#FFFFFF' d='M0,2c0-1.1,0.9-2,2-2h41.6v4H2C0.9,4,0,3.1,0,2z' />
-            <rect x='46' fill='#FFFFFF' width='47' height='4' />
-            <path fill='#FFFFFF' d='M95.5,0H182c1.1,0,2,0.9,2,2s-0.9,2-2,2H95.5V0z' />
-          </mask>
-          <mask id='backgroundHealthBarMask'>
-            <rect x='62.1' fill='white' width='2.4' height='4' />
-            <rect x='48' fill='white' width='2' height='4' />
-            <rect x='57.3' fill='white' width='2.4' height='4' />
-            <rect x='52.5' fill='white' width='2.4' height='4' />
-            <rect x='66.9' fill='white' width='2.4' height='4' />
-            <rect x='86.1' fill='white' width='2.4' height='4' />
-            <rect x='81.3' fill='white' width='2.4' height='4' />
-            <rect x='71.7' fill='white' width='2.4' height='4' />
-            <rect x='90.9' fill='white' width='2.1' height='4' />
-            <rect x='76.5' fill='white' width='2.4' height='4' />
-            <rect x='119.2' fill='white' width='2.4' height='4' />
-            <rect x='143.2' fill='white' width='2.4' height='4' />
-            <rect x='138.4' fill='white' width='2.4' height='4' />
-            <rect x='133.6' fill='white' width='2.4' height='4' />
-            <rect x='124' fill='white' width='2.4' height='4' />
-            <rect x='100' fill='white' width='2.4' height='4' />
-            <rect x='104.8' fill='white' width='2.4' height='4' />
-            <rect x='109.6' fill='white' width='2.4' height='4' />
-            <rect x='114.4' fill='white' width='2.4' height='4' />
-            <rect x='128.8' fill='white' width='2.4' height='4' />
-            <rect x='172' fill='white' width='2.4' height='4' />
-            <rect x='176.8' fill='white' width='2.4' height='4' />
-            <rect x='95.5' fill='white' width='2.1' height='4' />
-            <path fill='white' d='M182,0h-0.4v4h0.4c1.1,0,2-0.9,2-2S183.1,0,182,0z' />
-            <rect x='162.4' fill='white' width='2.4' height='4' />
-            <rect x='152.8' fill='white' width='2.4' height='4' />
-            <rect x='157.6' fill='white' width='2.4' height='4' />
-            <rect x='167.2' fill='white' width='2.4' height='4' />
-            <rect x='148' fill='white' width='2.4' height='4' />
-            <rect x='17.2' fill='white' width='2.4' height='4' />
-            <rect x='12.4' fill='white' width='2.4' height='4' />
-            <rect x='3.1' fill='white' width='2.1' height='4' />
-            <rect x='7.6' fill='white' width='2.4' height='4' />
-            <rect x='22' fill='white' width='2.4' height='4' />
-            <rect x='41.2' fill='white' width='2.4' height='4' />
-            <rect x='36.4' fill='white' width='2.4' height='4' />
-            <rect x='26.8' fill='white' width='2.4' height='4' />
-            <path fill='white' d='M0.7,0.5C0.3,0.9,0,1.4,0,2s0.3,1.1,0.7,1.5V0.5z' />
-            <rect x='31.6' fill='white' width='2.4' height='4' />
-          </mask>
-          <rect className='fill-white/10' width='184' height='4' mask='url(#healthBarMask)' />
-          <rect
-            className={classNames(backgroundColor, !reduceMotion && 'transition-all duration-500')}
-            width={isUpdated && isIncrease ? updatedWidth : width}
-            height='4'
-            mask={isUpdated ? 'url(#backgroundHealthBarMask)' : 'url(#healthBarMask)'}
+      <>
+        {showIcon && (
+          <HealthIcon
+            health={health}
+            isLoading={healthFactor === 0}
+            className={classNames('mr-2', iconClassName)}
+            colorClass='text-white'
          />
-          {isUpdated && (
+        )}
+        <div className={classNames('flex w-full', 'rounded-full overflow-hidden', className)}>
+          <svg
+            version='1.1'
+            xmlns='http://www.w3.org/2000/svg'
+            x='0px'
+            y='0px'
+            viewBox={`0 0 184 ${height}`}
+          >
+            <mask id='healthBarMask'>
+              <rect fill='#FFFFFF' x='46' width='47' height={height} />
+              <rect fill='#FFFFFF' width='43.6' height={height} />
+              <rect fill='#FFFFFF' x='95.5' width='88.5' height={height} />
+            </mask>
+            <mask id='backgroundHealthBarMask'>
+              <rect fill='#FFFFFF' x='0' y='0' width='6.4' height='{height}' />
+              <rect fill='#FFFFFF' x='8.9' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='13.7' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='18.5' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='23.3' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='28.1' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='32.9' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='37.7' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='42.5' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='47.3' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='52.1' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='56.9' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='61.7' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='66.5' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='71.3' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='76.1' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='80.9' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='85.7' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='90.5' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='95.3' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='100.1' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='104.9' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='109.7' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='114.5' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='119.2' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='124' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='128.8' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='133.6' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='138.4' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='143.2' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='148' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='152.8' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='157.6' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='162.4' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='167.2' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='172' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='176.8' y='0' width='2.4' height='{height}' />
+              <rect fill='#FFFFFF' x='181.6' y='0' width='2.4' height='{height}' />
+            </mask>
            <rect
-              className={classNames(
-                foreGroundColor,
-                !reduceMotion && 'transition-all duration-500',
-              )}
-              width={isUpdated && !isIncrease ? updatedWidth : width}
-              height='4'
+              className='fill-white/10'
+              width='184'
+              height={height}
              mask='url(#healthBarMask)'
            />
-          )}
-        </svg>
-      </div>
+            <rect
+              className={classNames(
+                backgroundColor,
+                !reduceMotion && 'transition-all duration-500',
+              )}
+              width={isUpdated && isIncrease ? updatedWidth : width}
+              height={height}
+              mask={isUpdated ? 'url(#backgroundHealthBarMask)' : 'url(#healthBarMask)'}
+            />
+            {isUpdated && (
+              <rect
+                className={classNames(
+                  foreGroundColor,
+                  !reduceMotion && 'transition-all duration-500',
+                )}
+                width={isUpdated && !isIncrease ? updatedWidth : width}
+                height={height}
+                mask='url(#healthBarMask)'
+              />
+            )}
+          </svg>
+        </div>
+      </>
    </HealthTooltip>
  )
 }
--- a/src/components/Account/Health/HealthIcon.tsx
+++ b/src/components/Account/Health/HealthIcon.tsx
@ -16,7 +16,7 @@ export default function HealthIcon(props: Props) {
  return (
    <>
      {!isLoading && health === 0 ? (
-        <ExclamationMarkCircled className='w-5 text-loss animate-pulse' />
+        <ExclamationMarkCircled className={classNames('w-5 text-loss animate-pulse', className)} />
      ) : (
        <Heart
          className={classNames(
--- a/src/components/Borrow/Table/Columns/BorrowRate.tsx
+++ b/src/components/Borrow/Table/Columns/BorrowRate.tsx
@ -17,7 +17,7 @@ export default function BorrowRate(props: Props) {
  return (
    <FormattedNumber
      className='justify-end text-xs'
-      amount={props.borrowRate * 100}
+      amount={props.borrowRate}
      options={{ minDecimals: 2, maxDecimals: 2, suffix: '%' }}
      animate
    />
--- a/src/components/DepositCapCell.tsx
+++ b/src/components/DepositCapCell.tsx
@ -0,0 +1,38 @@
+import { FormattedNumber } from 'components/FormattedNumber'
+import TitleAndSubCell from 'components/TitleAndSubCell'
+import { VAULT_DEPOSIT_BUFFER } from 'constants/vaults'
+import { getAssetByDenom } from 'utils/assets'
+
+interface Props {
+  depositCap: DepositCap
+}
+
+export default function DepositCapCell(props: Props) {
+  const percent = props.depositCap.used
+    .dividedBy(props.depositCap.max.multipliedBy(VAULT_DEPOSIT_BUFFER))
+    .multipliedBy(100)
+    .integerValue()
+
+  const decimals = getAssetByDenom(props.depositCap.denom)?.decimals ?? 6
+
+  return (
+    <TitleAndSubCell
+      title={
+        <FormattedNumber
+          amount={props.depositCap.max.toNumber()}
+          options={{ minDecimals: 2, abbreviated: true, decimals }}
+          className='text-xs'
+          animate
+        />
+      }
+      sub={
+        <FormattedNumber
+          amount={percent.toNumber()}
+          options={{ minDecimals: 2, maxDecimals: 2, suffix: '% Filled' }}
+          className='text-xs'
+          animate
+        />
+      }
+    />
+  )
+}
--- a/src/components/Earn/Farm/Table/Columns/DepositCap.tsx
+++ b/src/components/Earn/Farm/Table/Columns/DepositCap.tsx
@ -1,10 +1,7 @@
 import { Row } from '@tanstack/react-table'

-import { FormattedNumber } from 'components/FormattedNumber'
+import DepositCapCell from 'components/DepositCapCell'
 import Loading from 'components/Loading'
-import TitleAndSubCell from 'components/TitleAndSubCell'
-import { VAULT_DEPOSIT_BUFFER } from 'constants/vaults'
-import { getAssetByDenom } from 'utils/assets'

 export const DEPOSIT_CAP_META = { accessorKey: 'cap', header: 'Deposit Cap' }

@ -27,31 +24,5 @@ export default function DepositCap(props: Props) {

  if (props.isLoading) return <Loading />

-  const percent = vault.cap.used
-    .dividedBy(vault.cap.max.multipliedBy(VAULT_DEPOSIT_BUFFER))
-    .multipliedBy(100)
-    .integerValue()
-
-  const decimals = getAssetByDenom(vault.cap.denom)?.decimals ?? 6
-
-  return (
-    <TitleAndSubCell
-      title={
-        <FormattedNumber
-          amount={vault.cap.max.toNumber()}
-          options={{ minDecimals: 2, abbreviated: true, decimals }}
-          className='text-xs'
-          animate
-        />
-      }
-      sub={
-        <FormattedNumber
-          amount={percent.toNumber()}
-          options={{ minDecimals: 2, maxDecimals: 2, suffix: '% Filled' }}
-          className='text-xs'
-          animate
-        />
-      }
-    />
-  )
+  return <DepositCapCell depositCap={vault.cap} />
 }
--- a/src/components/Earn/Farm/VaultCard.tsx
+++ b/src/components/Earn/Farm/VaultCard.tsx
@ -74,7 +74,7 @@ export default function VaultCard(props: Props) {
            abbreviated: true,
            decimals: getAssetByDenom(props.vault.cap.denom)?.decimals,
          })}
-          sub={'Depo. Cap'}
+          sub={'Deposit Cap'}
        />
      </div>
      <ActionButton onClick={openVaultModal} color='secondary' text='Deposit' className='w-full' />
--- a/src/components/Earn/Lend/Table/Columns/Apy.tsx
+++ b/src/components/Earn/Lend/Table/Columns/Apy.tsx
@ -14,7 +14,7 @@ export default function Apr(props: Props) {

  return (
    <AssetRate
-      rate={convertAprToApy((props.marketLiquidityRate ?? 0) * 100, 365)}
+      rate={convertAprToApy(props.marketLiquidityRate ?? 0, 365)}
      isEnabled={props.borrowEnabled}
      className='justify-end text-xs'
      type='apy'
--- a/src/components/Earn/Lend/Table/Columns/DepositCap.tsx
+++ b/src/components/Earn/Lend/Table/Columns/DepositCap.tsx
@ -7,7 +7,7 @@ import { demagnify } from 'utils/formatters'

 export const DEPOSIT_CAP_META = {
  accessorKey: 'marketDepositCap',
-  header: 'Depo. Cap',
+  header: 'Deposit Cap',
  id: 'marketDepositCap',
 }

--- a/src/components/HLS/HLSTag.tsx
+++ b/src/components/HLS/HLSTag.tsx
@ -0,0 +1,11 @@
+import React from 'react'
+
+import Text from 'components/Text'
+
+export default function HLSTag() {
+  return (
+    <Text tag='span' className='rounded-sm gradient-hls px-2 font-bold py-0.5 ml-2' size='xs'>
+      HLS
+    </Text>
+  )
+}
--- a/src/components/HLS/Staking/ActiveStakingAccounts.tsx
+++ b/src/components/HLS/Staking/ActiveStakingAccounts.tsx
@ -0,0 +1,24 @@
+import { NAME_META } from 'components/HLS/Farm/Table/Columns/Name'
+import useDepositedColumns from 'components/HLS/Staking/Table/Columns/useDepositedColumns'
+import Table from 'components/Table'
+import useHLSStakingAccounts from 'hooks/useHLSStakingAccounts'
+import useStore from 'store'
+
+const title = 'Active Strategies'
+
+export default function ActiveStakingAccounts() {
+  const address = useStore((s) => s.address)
+  const columns = useDepositedColumns({ isLoading: false })
+  const { data: hlsStakingAccounts } = useHLSStakingAccounts(address)
+
+  if (!hlsStakingAccounts.length) return null
+
+  return (
+    <Table
+      title={title}
+      columns={columns}
+      data={hlsStakingAccounts}
+      initialSorting={[{ id: NAME_META.id, desc: true }]}
+    />
+  )
+}
--- a/src/components/HLS/Staking/AvailableHLSStakingAssets.tsx
+++ b/src/components/HLS/Staking/AvailableHLSStakingAssets.tsx
@ -6,7 +6,7 @@ import Table from 'components/Table'
 import useHLSStakingAssets from 'hooks/useHLSStakingAssets'
 import { getEnabledMarketAssets } from 'utils/assets'

-const title = 'Available HLS Staking'
+const title = 'Available Strategies'

 function Content() {
  const assets = getEnabledMarketAssets()
--- a/src/components/HLS/Staking/Table/Columns/Account.tsx
+++ b/src/components/HLS/Staking/Table/Columns/Account.tsx
@ -0,0 +1,30 @@
+import React from 'react'
+
+import HealthBar from 'components/Account/Health/HealthBar'
+import TitleAndSubCell from 'components/TitleAndSubCell'
+import useHealthComputer from 'hooks/useHealthComputer'
+
+export const ACCOUNT_META = { id: 'account', header: 'Account', accessorKey: 'id' }
+interface Props {
+  account: HLSAccountWithStrategy
+}
+
+export default function Name(props: Props) {
+  const { health, healthFactor } = useHealthComputer(props.account)
+  return (
+    <TitleAndSubCell
+      className=''
+      title={`Account ${props.account.id}`}
+      sub={
+        <HealthBar
+          health={health}
+          healthFactor={healthFactor}
+          className=''
+          showIcon
+          height='10'
+          iconClassName='mr-0.5 w-3'
+        />
+      }
+    />
+  )
+}
--- a/src/components/HLS/Staking/Table/Columns/ActiveApy.tsx
+++ b/src/components/HLS/Staking/Table/Columns/ActiveApy.tsx
@ -0,0 +1,22 @@
+import { Row } from '@tanstack/react-table'
+import React from 'react'
+
+import TitleAndSubCell from 'components/TitleAndSubCell'
+
+export const ACTIVE_APY_META = { header: 'APY', accessorKey: 'strategy' }
+
+export const activeApySortingFn = (
+  a: Row<HLSAccountWithStrategy>,
+  b: Row<HLSAccountWithStrategy>,
+): number => {
+  // TODO: Properly implement this
+  return 0
+}
+
+interface Props {
+  account: HLSAccountWithStrategy
+}
+
+export default function ActiveAPY(props: Props) {
+  return <TitleAndSubCell title={'-'} sub={'-%/day'} />
+}
--- a/src/components/HLS/Staking/Table/Columns/DebtValue.tsx
+++ b/src/components/HLS/Staking/Table/Columns/DebtValue.tsx
@ -0,0 +1,25 @@
+import { Row } from '@tanstack/react-table'
+
+import DisplayCurrency from 'components/DisplayCurrency'
+import { BNCoin } from 'types/classes/BNCoin'
+
+export const DEBT_VAL_META = { header: 'Debt Value', accessorKey: 'values.debt' }
+interface Props {
+  account: HLSAccountWithStrategy
+}
+
+export function debtValueSorting(
+  a: Row<HLSAccountWithStrategy>,
+  b: Row<HLSAccountWithStrategy>,
+): number {
+  return a.original.values.debt.minus(b.original.values.debt).toNumber()
+}
+
+export default function DebtValue(props: Props) {
+  return (
+    <DisplayCurrency
+      coin={BNCoin.fromDenomAndBigNumber('usd', props.account.values.debt)}
+      className='text-xs'
+    />
+  )
+}
--- a/src/components/HLS/Staking/Table/Columns/DepositCap.tsx
+++ b/src/components/HLS/Staking/Table/Columns/DepositCap.tsx
@ -0,0 +1,23 @@
+import { Row } from '@tanstack/react-table'
+import React from 'react'
+
+import DepositCapCell from 'components/DepositCapCell'
+
+export const CAP_META = { header: 'Cap', accessorKey: 'strategy.depositCap' }
+
+export const depositCapSortingFn = (
+  a: Row<HLSAccountWithStrategy>,
+  b: Row<HLSAccountWithStrategy>,
+): number => {
+  const depositCapA = a.original.strategy.depositCap.max
+  const depositCapB = b.original.strategy.depositCap.max
+  return depositCapA.minus(depositCapB).toNumber()
+}
+
+interface Props {
+  account: HLSAccountWithStrategy
+}
+
+export default function Name(props: Props) {
+  return <DepositCapCell depositCap={props.account.strategy.depositCap} />
+}
--- a/src/components/HLS/Staking/Table/Columns/Leverage.tsx
+++ b/src/components/HLS/Staking/Table/Columns/Leverage.tsx
@ -0,0 +1,25 @@
+import { Row } from '@tanstack/react-table'
+import React from 'react'
+
+import { FormattedNumber } from 'components/FormattedNumber'
+
+export const LEV_META = { accessorKey: 'leverage ', header: 'Leverage' }
+
+interface Props {
+  account: HLSAccountWithStrategy
+}
+
+export function leverageSortingFn(a: Row<HLSAccountWithStrategy>, b: Row<HLSAccountWithStrategy>) {
+  return a.original.leverage - b.original.leverage
+}
+
+export default function MaxLeverage(props: Props) {
+  return (
+    <FormattedNumber
+      amount={props.account.leverage}
+      options={{ minDecimals: 2, maxDecimals: 2, suffix: 'x' }}
+      className='text-xs'
+      animate
+    />
+  )
+}
--- a/src/components/HLS/Staking/Table/Columns/Manage.tsx
+++ b/src/components/HLS/Staking/Table/Columns/Manage.tsx
@ -0,0 +1,14 @@
+import React from 'react'
+
+import Button from 'components/Button'
+
+export const MANAGE_META = { id: 'manage' }
+
+interface Props {
+  account: HLSAccountWithStrategy
+}
+
+export default function Manage(props: Props) {
+  // TODO: Impelement dropdown
+  return <Button text='Manage' color='tertiary' />
+}
--- a/src/components/HLS/Staking/Table/Columns/Name.tsx
+++ b/src/components/HLS/Staking/Table/Columns/Name.tsx
@ -5,7 +5,7 @@ import Loading from 'components/Loading'
 import TitleAndSubCell from 'components/TitleAndSubCell'
 import { getAssetByDenom } from 'utils/assets'

-export const NAME_META = { id: 'name', header: 'Vault', accessorKey: 'denoms.deposit' }
+export const NAME_META = { id: 'name', header: 'Strategy', accessorKey: 'strategy.denoms.deposit' }
 interface Props {
  strategy: HLSStrategy
 }
@ -21,8 +21,8 @@ export default function Name(props: Props) {
      {depositAsset && borrowAsset ? (
        <TitleAndSubCell
          className='ml-2 mr-2 text-left'
-          title={`${depositAsset.symbol}/${borrowAsset.symbol}`}
-          sub='Staking'
+          title={`${depositAsset.symbol} - ${borrowAsset.symbol}`}
+          sub='Via MARS'
        />
      ) : (
        <Loading />
--- a/src/components/HLS/Staking/Table/Columns/NetValue.tsx
+++ b/src/components/HLS/Staking/Table/Columns/NetValue.tsx
@ -0,0 +1,25 @@
+import { Row } from '@tanstack/react-table'
+
+import DisplayCurrency from 'components/DisplayCurrency'
+import { BNCoin } from 'types/classes/BNCoin'
+
+export const NET_VAL_META = { header: 'Net Value', accessorKey: 'values.net' }
+interface Props {
+  account: HLSAccountWithStrategy
+}
+
+export function netValueSorting(
+  a: Row<HLSAccountWithStrategy>,
+  b: Row<HLSAccountWithStrategy>,
+): number {
+  return a.original.values.net.minus(b.original.values.net).toNumber()
+}
+
+export default function NetValue(props: Props) {
+  return (
+    <DisplayCurrency
+      coin={BNCoin.fromDenomAndBigNumber('usd', props.account.values.net)}
+      className='text-xs'
+    />
+  )
+}
--- a/src/components/HLS/Staking/Table/Columns/PositionValue.tsx
+++ b/src/components/HLS/Staking/Table/Columns/PositionValue.tsx
@ -0,0 +1,25 @@
+import { Row } from '@tanstack/react-table'
+
+import DisplayCurrency from 'components/DisplayCurrency'
+import { BNCoin } from 'types/classes/BNCoin'
+
+export const POS_VAL_META = { header: 'Pos. Value', accessorKey: 'values.total' }
+interface Props {
+  account: HLSAccountWithStrategy
+}
+
+export function positionValueSorting(
+  a: Row<HLSAccountWithStrategy>,
+  b: Row<HLSAccountWithStrategy>,
+): number {
+  return a.original.values.total.minus(b.original.values.total).toNumber()
+}
+
+export default function PositionValue(props: Props) {
+  return (
+    <DisplayCurrency
+      coin={BNCoin.fromDenomAndBigNumber('usd', props.account.values.total)}
+      className='text-xs'
+    />
+  )
+}
--- a/src/components/HLS/Staking/Table/Columns/useDepositedColumns.tsx
+++ b/src/components/HLS/Staking/Table/Columns/useDepositedColumns.tsx
@ -0,0 +1,84 @@
+import { ColumnDef } from '@tanstack/react-table'
+import React, { useMemo } from 'react'
+
+import Account, { ACCOUNT_META } from 'components/HLS/Staking/Table/Columns/Account'
+import ActiveApy, {
+  ACTIVE_APY_META,
+  activeApySortingFn,
+} from 'components/HLS/Staking/Table/Columns/ActiveApy'
+import DebtValue, {
+  DEBT_VAL_META,
+  debtValueSorting,
+} from 'components/HLS/Staking/Table/Columns/DebtValue'
+import DepositCap, {
+  CAP_META,
+  depositCapSortingFn,
+} from 'components/HLS/Staking/Table/Columns/DepositCap'
+import Leverage, {
+  LEV_META,
+  leverageSortingFn,
+} from 'components/HLS/Staking/Table/Columns/Leverage'
+import Manage, { MANAGE_META } from 'components/HLS/Staking/Table/Columns/Manage'
+import Name, { NAME_META } from 'components/HLS/Staking/Table/Columns/Name'
+import NetValue, {
+  NET_VAL_META,
+  netValueSorting,
+} from 'components/HLS/Staking/Table/Columns/NetValue'
+import PositionValue, {
+  POS_VAL_META,
+  positionValueSorting,
+} from 'components/HLS/Staking/Table/Columns/PositionValue'
+
+interface Props {
+  isLoading: boolean
+}
+
+export default function useDepositedColumns(props: Props) {
+  return useMemo<ColumnDef<HLSAccountWithStrategy>[]>(
+    () => [
+      {
+        ...NAME_META,
+        cell: ({ row }) => <Name strategy={row.original.strategy} />,
+      },
+      {
+        ...ACCOUNT_META,
+        cell: ({ row }) => <Account account={row.original} />,
+      },
+      {
+        ...LEV_META,
+        cell: ({ row }) => <Leverage account={row.original} />,
+        sortingFn: leverageSortingFn,
+      },
+      {
+        ...POS_VAL_META,
+        cell: ({ row }) => <PositionValue account={row.original} />,
+        sortingFn: positionValueSorting,
+      },
+      {
+        ...NET_VAL_META,
+        cell: ({ row }) => <NetValue account={row.original} />,
+        sortingFn: netValueSorting,
+      },
+      {
+        ...DEBT_VAL_META,
+        cell: ({ row }) => <DebtValue account={row.original} />,
+        sortingFn: debtValueSorting,
+      },
+      {
+        ...CAP_META,
+        cell: ({ row }) => <DepositCap account={row.original} />,
+        sortingFn: depositCapSortingFn,
+      },
+      {
+        ...ACTIVE_APY_META,
+        cell: ({ row }) => <ActiveApy account={row.original} />,
+        sortingFn: activeApySortingFn,
+      },
+      {
+        ...MANAGE_META,
+        cell: ({ row }) => <Manage account={row.original} />,
+      },
+    ],
+    [],
+  )
+}
--- a/src/components/Modals/AssetsSelect/useAssetTableColumns.tsx
+++ b/src/components/Modals/AssetsSelect/useAssetTableColumns.tsx
@ -30,7 +30,7 @@ export default function useAssetTableColumns(isBorrow: boolean) {
          const borrowAsset = row.original.asset as BorrowAsset
          const showRate = !borrowAsset?.borrowRate
          const rate = isBorrow ? market?.borrowRate : market?.liquidityRate
-          const apy = convertAprToApy((rate ?? 0) * 100, 365)
+          const apy = convertAprToApy(rate ?? 0, 365)

          return (
            <div className='flex items-center'>
--- a/src/components/Modals/HLS/ChooseAccount.tsx
+++ b/src/components/Modals/HLS/ChooseAccount.tsx
@ -1,17 +0,0 @@
-import React from 'react'
-
-import Button from 'components/Button'
-import { ArrowRight } from 'components/Icons'
-
-interface Props {
-  hlsAccounts: AccountIdAndKind[]
-  onClickBtn: () => void
-}
-
-export default function ChooseAccount(props: Props) {
-  return (
-    <div className='p-4'>
-      <Button onClick={props.onClickBtn} text='Continue' rightIcon={<ArrowRight />} />
-    </div>
-  )
-}
--- a/src/components/Modals/HLS/Content/useAccordionItems.tsx
+++ b/src/components/Modals/HLS/Content/useAccordionItems.tsx
@ -65,6 +65,7 @@ export default function useAccordionItems(props: Props) {
            onChangeAmount={props.onChangeDebt}
            onClickBtn={() => props.toggleIsOpen(2)}
            max={props.maxBorrowAmount}
+            positionValue={props.positionValue}
          />
        ),
        renderSubTitle: () => (
@ -78,7 +79,7 @@ export default function useAccordionItems(props: Props) {
        toggleOpen: props.toggleIsOpen,
      },
      ...[
-        props.hlsAccounts.length > 2
+        props.emptyHlsAccounts.length > 0
          ? {
              title: 'Select HLS Account',
              renderContent: () => (
--- a/src/components/Modals/HLS/Content/useStakingController.tsx
+++ b/src/components/Modals/HLS/Content/useStakingController.tsx
@ -1,8 +1,14 @@
-import { useCallback } from 'react'
+import { useCallback, useMemo } from 'react'

+import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
+import { LocalStorageKeys } from 'constants/localStorageKeys'
 import useDepositHlsVault from 'hooks/useDepositHlsVault'
+import useHealthComputer from 'hooks/useHealthComputer'
+import useLocalStorage from 'hooks/useLocalStorage'
 import { useUpdatedAccount } from 'hooks/useUpdatedAccount'
-import { BN } from 'utils/helpers'
+import useStore from 'store'
+import { BNCoin } from 'types/classes/BNCoin'
+import { Action } from 'types/generated/mars-credit-manager/MarsCreditManager.types'

 interface Props {
  borrowAsset: Asset
@ -12,6 +18,8 @@ interface Props {

 export default function useVaultController(props: Props) {
  const { collateralAsset, borrowAsset, selectedAccount } = props
+  const [slippage] = useLocalStorage<number>(LocalStorageKeys.SLIPPAGE, DEFAULT_SETTINGS.slippage)
+  const addToStakingStrategy = useStore((s) => s.addToStakingStrategy)

  const {
    leverage,
@ -25,17 +33,66 @@ export default function useVaultController(props: Props) {
    borrowDenom: borrowAsset.denom,
  })

-  const actions = []
+  const depositCoin = useMemo(
+    () => BNCoin.fromDenomAndBigNumber(collateralAsset.denom, depositAmount),
+    [collateralAsset.denom, depositAmount],
+  )

-  const { updatedAccount, simulateVaultDeposit } = useUpdatedAccount(selectedAccount)
+  const borrowCoin = useMemo(
+    () => BNCoin.fromDenomAndBigNumber(borrowAsset.denom, borrowAmount),
+    [borrowAsset.denom, borrowAmount],
+  )

-  const execute = () => null
+  const actions: Action[] = useMemo(
+    () => [
+      {
+        deposit: depositCoin.toCoin(),
+      },
+      {
+        borrow: borrowCoin.toCoin(),
+      },
+      {
+        swap_exact_in: {
+          denom_out: collateralAsset.denom,
+          slippage: slippage.toString(),
+          coin_in: BNCoin.fromDenomAndBigNumber(borrowAsset.denom, borrowAmount).toActionCoin(),
+        },
+      },
+    ],
+    [borrowAmount, borrowAsset.denom, borrowCoin, collateralAsset.denom, depositCoin, slippage],
+  )
+
+  const { updatedAccount, addDeposits } = useUpdatedAccount(selectedAccount)
+  const { computeMaxBorrowAmount } = useHealthComputer(updatedAccount)
+
+  const maxBorrowAmount = useMemo(() => {
+    // TODO: Perhaps we need a specific target for this -> target = swap
+    return computeMaxBorrowAmount(props.borrowAsset.denom, 'deposit')
+  }, [computeMaxBorrowAmount, props.borrowAsset.denom])
+
+  const execute = useCallback(() => {
+    addToStakingStrategy({
+      actions,
+      accountId: selectedAccount.id,
+      borrowCoin: BNCoin.fromDenomAndBigNumber(borrowAsset.denom, borrowAmount),
+      depositCoin: BNCoin.fromDenomAndBigNumber(collateralAsset.denom, depositAmount),
+    })
+  }, [
+    actions,
+    addToStakingStrategy,
+    borrowAmount,
+    borrowAsset.denom,
+    collateralAsset.denom,
+    depositAmount,
+    selectedAccount.id,
+  ])

  const onChangeCollateral = useCallback(
    (amount: BigNumber) => {
      setDepositAmount(amount)
+      addDeposits([BNCoin.fromDenomAndBigNumber(collateralAsset.denom, amount)])
    },
-    [setDepositAmount],
+    [addDeposits, collateralAsset.denom, setDepositAmount],
  )

  const onChangeDebt = useCallback(
@ -50,7 +107,7 @@ export default function useVaultController(props: Props) {
    depositAmount,
    execute,
    leverage,
-    maxBorrowAmount: BN(0),
+    maxBorrowAmount,
    onChangeCollateral,
    onChangeDebt,
    positionValue,
--- a/src/components/Modals/HLS/Header.tsx
+++ b/src/components/Modals/HLS/Header.tsx
@ -1,6 +1,7 @@
 import React from 'react'

 import DoubleLogo from 'components/DoubleLogo'
+import HLSTag from 'components/HLS/HLSTag'
 import Text from 'components/Text'
 import { getAssetByDenom } from 'utils/assets'

@ -19,9 +20,7 @@ export default function Header(props: Props) {
    <div className='flex items-center gap-2'>
      <DoubleLogo primaryDenom={props.primaryDenom} secondaryDenom={props.secondaryDenom} />
      <Text>{`${primaryAsset.symbol} - ${secondaryAsset.symbol}`}</Text>
-      <Text className='rounded-sm gradient-hls px-2 font-bold py-0.5' size='xs'>
-        HLS
-      </Text>
+      <HLSTag />
    </div>
  )
 }
--- a/src/components/Modals/HLS/Leverage.tsx
+++ b/src/components/Modals/HLS/Leverage.tsx
@ -11,6 +11,7 @@ interface Props {
  max: BigNumber
  onChangeAmount: (amount: BigNumber) => void
  onClickBtn: () => void
+  positionValue: BigNumber
 }

 export default function Leverage(props: Props) {
@ -23,7 +24,7 @@ export default function Leverage(props: Props) {
        onChange={props.onChangeAmount}
        maxText='Max borrow'
      />
-      <LeverageSummary asset={props.asset} />
+      <LeverageSummary asset={props.asset} positionValue={props.positionValue} />
      <Button onClick={props.onClickBtn} text='Continue' rightIcon={<ArrowRight />} />
    </div>
  )
--- a/src/components/Modals/HLS/LeverageSummary.tsx
+++ b/src/components/Modals/HLS/LeverageSummary.tsx
@ -2,14 +2,19 @@ import React, { useMemo } from 'react'

 import { FormattedNumber } from 'components/FormattedNumber'
 import Text from 'components/Text'
+import useBorrowAsset from 'hooks/useBorrowAsset'

 interface Props {
  asset: Asset
+  positionValue: BigNumber
 }

 export default function LeverageSummary(props: Props) {
+  const borrowAsset = useBorrowAsset(props.asset.denom)
+
  const items: { title: string; amount: number; options: FormatOptions }[] = useMemo(() => {
    return [
+      // TODO: Get APY numbers
      {
        title: 'APY',
        amount: 0,
@ -17,16 +22,16 @@ export default function LeverageSummary(props: Props) {
      },
      {
        title: `Borrow APR ${props.asset.symbol}`,
-        amount: 0,
-        options: { suffix: '%', minDecimals: 1, maxDecimals: 1 },
+        amount: borrowAsset?.borrowRate || 0,
+        options: { suffix: '%', minDecimals: 2, maxDecimals: 2 },
      },
      {
        title: 'Total Position Size',
-        amount: 0,
+        amount: props.positionValue.toNumber(),
        options: { prefix: '$' },
      },
    ]
-  }, [props.asset.symbol])
+  }, [borrowAsset?.borrowRate, props.asset.symbol, props.positionValue])

  return (
    <div className='grid grid-cols-2 gap-2'>
--- a/src/components/Modals/HLS/Summary/YourPosition.tsx
+++ b/src/components/Modals/HLS/Summary/YourPosition.tsx
@ -48,6 +48,14 @@ export default function YourPosition(props: Props) {
          className='text-white/60 place-self-end text-xs'
        />
      </div>
+      <div className='flex justify-between mb-2'>
+        <Text className='text-white/60 text-xs'>Leverage</Text>
+        <FormattedNumber
+          amount={props.leverage}
+          options={{ suffix: 'x' }}
+          className='text-white/60 place-self-end text-xs'
+        />
+      </div>
      <div className='flex justify-between'>
        <Text className='text-xs group/apytooltip' tag='span'>
          <Tooltip
--- a/src/components/Portfolio/Account/Balances.tsx
+++ b/src/components/Portfolio/Account/Balances.tsx
@ -13,7 +13,7 @@ interface Props {
 }

 function Content(props: Props) {
-  const { data: account } = useAccount('high_levered_strategy', props.accountId, true)
+  const { data: account } = useAccount(props.accountId, true)

  const { data } = useBorrowMarketAssetsTableData(false)
  const borrowAssets = useMemo(() => data?.allAssets || [], [data])
--- a/src/components/Portfolio/Account/Summary.tsx
+++ b/src/components/Portfolio/Account/Summary.tsx
@ -17,7 +17,7 @@ interface Props {
 }

 function Content(props: Props) {
-  const { data: account } = useAccount('default', props.accountId, true)
+  const { data: account } = useAccount(props.accountId, true)
  const { data: prices } = usePrices()
  const { health, healthFactor } = useHealthComputer(account)
  const { data } = useBorrowMarketAssetsTableData(false)
@ -80,6 +80,7 @@ function Content(props: Props) {
      health={health}
      healthFactor={healthFactor}
      title={`Credit Account ${props.accountId}`}
+      accountId={props.accountId}
    />
  )
 }
@ -88,7 +89,12 @@ export default function Summary(props: Props) {
  return (
    <Suspense
      fallback={
-        <Skeleton health={0} healthFactor={0} title={`Credit Account ${props.accountId}`} />
+        <Skeleton
+          health={0}
+          healthFactor={0}
+          title={`Credit Account ${props.accountId}`}
+          accountId={props.accountId}
+        />
      }
    >
      <Content {...props} />
--- a/src/components/Portfolio/Card/Skeleton.tsx
+++ b/src/components/Portfolio/Card/Skeleton.tsx
@ -1,8 +1,8 @@
 import React from 'react'

 import HealthBar from 'components/Account/Health/HealthBar'
-import HealthIcon from 'components/Account/Health/HealthIcon'
 import Card from 'components/Card'
+import HLSTag from 'components/HLS/HLSTag'
 import Text from 'components/Text'
 import TitleAndSubCell from 'components/TitleAndSubCell'

@ -12,6 +12,7 @@ interface Props {
  healthFactor: number
  accountId: string
  isCurrent?: boolean
+  isHls?: boolean
 }

 export default function Skeleton(props: Props) {
@ -19,7 +20,10 @@ export default function Skeleton(props: Props) {
  return (
    <Card className='p-4 bg-white/5'>
      <div className='flex items-center justify-between'>
-        <Text>Credit Account {accountId}</Text>
+        <Text>
+          Credit Account {accountId}
+          {props.isHls && <HLSTag />}
+        </Text>
        <Text size='xs' className='text-white/60'>
          {isCurrent && '(current)'}
        </Text>
@ -30,13 +34,7 @@ export default function Skeleton(props: Props) {
        ))}
      </div>
      <div className='flex gap-1 mt-6'>
-        <HealthIcon
-          isLoading={healthFactor === 0}
-          health={health}
-          className='w-5'
-          colorClass='text-white/60'
-        />
-        <HealthBar health={health} healthFactor={healthFactor} />
+        <HealthBar health={health} healthFactor={healthFactor} showIcon />
      </div>
    </Card>
  )
--- a/src/components/Portfolio/Card/index.tsx
+++ b/src/components/Portfolio/Card/index.tsx
@ -27,7 +27,7 @@ interface Props {
 }

 export default function PortfolioCard(props: Props) {
-  const { data: account } = useAccount('default', props.accountId)
+  const { data: account } = useAccount(props.accountId)
  const { health, healthFactor } = useHealthComputer(account)
  const { address: urlAddress } = useParams()
  const { data: prices } = usePrices()
@ -110,6 +110,7 @@ export default function PortfolioCard(props: Props) {
        healthFactor={healthFactor}
        accountId={props.accountId}
        isCurrent={props.accountId === currentAccountId}
+        isHls={account.kind === 'high_levered_strategy'}
      />
    </NavLink>
  )
--- a/src/components/Portfolio/Overview/Summary.tsx
+++ b/src/components/Portfolio/Overview/Summary.tsx
@ -91,5 +91,5 @@ export default function PortfolioSummary() {

  if (!walletAddress && !urlAddress) return null

-  return <SummarySkeleton title='Portfolio Summary' stats={stats} />
+  return <SummarySkeleton title='Portfolio Summary' stats={stats} accountId='' />
 }
--- a/src/components/Portfolio/SummarySkeleton.tsx
+++ b/src/components/Portfolio/SummarySkeleton.tsx
@ -3,9 +3,11 @@ import React from 'react'
 import HealthBar from 'components/Account/Health/HealthBar'
 import HealthIcon from 'components/Account/Health/HealthIcon'
 import Card from 'components/Card'
+import HLSTag from 'components/HLS/HLSTag'
 import Loading from 'components/Loading'
 import Text from 'components/Text'
 import TitleAndSubCell from 'components/TitleAndSubCell'
+import useAccount from 'hooks/useAccount'
 import { DEFAULT_PORTFOLIO_STATS } from 'utils/constants'

 interface Props {
@ -13,16 +15,21 @@ interface Props {
  health?: number
  healthFactor?: number
  title: string
+  accountId: string
 }

 export default function SummarySkeleton(props: Props) {
  const { health, healthFactor, title } = props
  const stats = props.stats || DEFAULT_PORTFOLIO_STATS
+  const { data: account } = useAccount(props.accountId, false)

  return (
    <div className='flex flex-col w-full gap-8'>
      <div className='flex justify-between'>
-        <Text size='2xl'>{title}</Text>
+        <div className='flex items-center'>
+          <Text size='2xl'>{title}</Text>
+          {account?.kind === 'high_levered_strategy' && <HLSTag />}
+        </div>
        {health !== undefined && healthFactor !== undefined && (
          <div className='flex gap-1 max-w-[300px] flex-grow'>
            <HealthIcon isLoading={healthFactor === 0} health={health} className='w-5' />
--- a/src/components/Select/Option.tsx
+++ b/src/components/Select/Option.tsx
@ -80,7 +80,7 @@ export default function Option(props: Props) {
          })}
        </Text>
        <AssetRate
-          rate={convertAprToApy((marketAsset?.borrowRate ?? 0) * 100, 365)}
+          rate={convertAprToApy(marketAsset?.borrowRate ?? 0, 365)}
          isEnabled={marketAsset?.borrowEnabled ?? false}
          className='col-span-2 text-white/50'
          type='apy'
--- a/src/components/Table/Row.tsx
+++ b/src/components/Table/Row.tsx
@ -45,7 +45,7 @@ export default function Row<T>(props: Props<T>) {
              key={cell.id}
              className={classNames(
                isSymbolOrName ? 'text-left' : 'text-right',
-                props.spacingClassName ?? 'p-4',
+                props.spacingClassName ?? 'px-3 py-4',
                borderClasses,
              )}
            >
--- a/src/components/Table/index.tsx
+++ b/src/components/Table/index.tsx
@ -79,10 +79,10 @@ export default function Table<T>(props: Props<T>) {
                        'align-center',
                      )}
                    >
-                      <span className='w-6 h-6 text-white'>
+                      <span className='w-5 h-5 text-white'>
                        {header.column.getCanSort()
                          ? {
-                              asc: <SortAsc />,
+                              asc: <SortAsc size={16} />,
                              desc: <SortDesc />,
                              false: <SortNone />,
                            }[header.column.getIsSorted() as string] ?? null
@ -90,8 +90,8 @@ export default function Table<T>(props: Props<T>) {
                      </span>
                      <Text
                        tag='span'
-                        size='sm'
-                        className='flex items-center font-normal text-white/70'
+                        size='xs'
+                        className='flex items-center font-normal text-white/60'
                      >
                        {flexRender(header.column.columnDef.header, header.getContext())}
                      </Text>
--- a/src/constants/assets.ts
+++ b/src/constants/assets.ts
@ -58,6 +58,7 @@ export const ASSETS: Asset[] = [
    isDisplayCurrency: ENV.NETWORK !== NETWORK.TESTNET,
    isAutoLendEnabled: false,
    poolId: 803,
+    isStaking: true,
  },
  {
    symbol: 'WBTC.axl',
--- a/src/hooks/useAccount.tsx
+++ b/src/hooks/useAccount.tsx
@ -1,10 +1,9 @@
 import useSWR from 'swr'

 import getAccount from 'api/accounts/getAccount'
-import { AccountKind } from 'types/generated/mars-rover-health-computer/MarsRoverHealthComputer.types'

-export default function useAccount(kind: AccountKind, accountId?: string, suspense?: boolean) {
-  return useSWR(`account${accountId}`, () => getAccount({ id: accountId || '', kind }), {
+export default function useAccount(accountId?: string, suspense?: boolean) {
+  return useSWR(`account${accountId}`, () => getAccount(accountId), {
    suspense: suspense,
    revalidateOnFocus: false,
  })
--- a/src/hooks/useHLSStakingAccounts.tsx
+++ b/src/hooks/useHLSStakingAccounts.tsx
@ -0,0 +1,11 @@
+import useSWR from 'swr'
+
+import getHLSStakingAccounts from 'api/hls/getHLSStakingAccounts'
+
+export default function useHLSStakingAccounts(address?: string) {
+  return useSWR(`${address}/hlsStakingAccounts`, () => getHLSStakingAccounts(address), {
+    fallbackData: [],
+    suspense: true,
+    revalidateOnFocus: false,
+  })
+}
--- a/src/pages/HLSStakingPage.tsx
+++ b/src/pages/HLSStakingPage.tsx
@ -1,4 +1,5 @@
 import Tab from 'components/Earn/Tab'
+import ActiveStakingAccounts from 'components/HLS/Staking/ActiveStakingAccounts'
 import AvailableHlsStakingAssets from 'components/HLS/Staking/AvailableHLSStakingAssets'
 import HLSStakingIntro from 'components/HLS/Staking/HLSStakingIntro'
 import MigrationBanner from 'components/MigrationBanner'
@ -11,6 +12,7 @@ export default function HLSStakingPage() {
      <Tab tabs={HLS_TABS} activeTabIdx={1} />
      <HLSStakingIntro />
      <AvailableHlsStakingAssets />
+      <ActiveStakingAccounts />
    </div>
  )
 }
--- a/src/store/slices/broadcast.ts
+++ b/src/store/slices/broadcast.ts
@ -1,9 +1,11 @@
 import { MsgExecuteContract } from '@delphi-labs/shuttle-react'
+import BigNumber from 'bignumber.js'
 import moment from 'moment'
 import { isMobile } from 'react-device-detect'
 import { GetState, SetState } from 'zustand'

 import { ENV } from 'constants/env'
+import { BN_ZERO } from 'constants/math'
 import { Store } from 'store'
 import { BNCoin } from 'types/classes/BNCoin'
 import { ExecuteMsg as AccountNftExecuteMsg } from 'types/generated/mars-account-nft/MarsAccountNft.types'
@ -121,6 +123,7 @@ export default function createBroadcastSlice(
          coins: changes.deposits?.map((debt) => debt.toCoin()) ?? [],
          text: action === 'vaultCreate' ? 'Created a Vault Position' : 'Added to Vault Position',
        })
+        break
    }

    set({ toast })
@ -156,6 +159,41 @@ export default function createBroadcastSlice(

  return {
    toast: null,
+    addToStakingStrategy: async (options: {
+      accountId: string
+      actions: Action[]
+      depositCoin: BNCoin
+      borrowCoin: BNCoin
+    }) => {
+      const msg: CreditManagerExecuteMsg = {
+        update_credit_account: {
+          account_id: options.accountId,
+          actions: options.actions,
+        },
+      }
+
+      const response = get().executeMsg({
+        messages: [
+          generateExecutionMessage(get().address, ENV.ADDRESS_CREDIT_MANAGER, msg, [
+            options.depositCoin.toCoin(),
+          ]),
+        ],
+      })
+
+      const swapOptions = { denomOut: options.depositCoin.denom, coinIn: options.borrowCoin }
+
+      get().setToast({
+        response,
+        options: {
+          action: 'hls-staking',
+          accountId: options.accountId,
+          changes: { deposits: [options.depositCoin], debts: [options.borrowCoin] },
+        },
+        swapOptions,
+      })
+
+      return response.then((response) => !!response.result)
+    },
    borrow: async (options: { accountId: string; coin: BNCoin; borrowToWallet: boolean }) => {
      const borrowAction: Action = { borrow: options.coin.toCoin() }
      const withdrawAction: Action = { withdraw: options.coin.toActionCoin() }
@ -687,12 +725,23 @@ export default function createBroadcastSlice(
            getSingleValueFromBroadcastResult(response.result, 'wasm', 'token_id') ?? undefined
        }

-        if (toast.options.action === 'swap' && toast.swapOptions) {
+        if (toast.swapOptions) {
          const coinOut = getTokenOutFromSwapResponse(response, toast.swapOptions.denomOut)
-          const successMessage = `Swapped ${formatAmountWithSymbol(
-            toast.swapOptions.coinIn.toCoin(),
-          )} for ${formatAmountWithSymbol(coinOut)}`
-          toast.options.message = successMessage
+
+          if (toast.options.action === 'swap') {
+            toast.options.message = `Swapped ${formatAmountWithSymbol(
+              toast.swapOptions.coinIn.toCoin(),
+            )} for ${formatAmountWithSymbol(coinOut)}`
+          }
+
+          if (toast.options.action === 'hls-staking') {
+            const depositAmount: BigNumber = toast.options.changes?.deposits?.length
+              ? toast.options.changes.deposits[0].amount
+              : BN_ZERO
+
+            coinOut.amount = depositAmount.plus(coinOut.amount).toFixed(0)
+            toast.options.message = `Added ${formatAmountWithSymbol(coinOut)}`
+          }
        }

        handleResponseMessages({
--- a/src/types/interfaces/account.d.ts
+++ b/src/types/interfaces/account.d.ts
@ -29,3 +29,13 @@ interface AccountIdAndKind {
  id: string
  kind: AccountKind
 }
+
+interface HLSAccountWithStrategy extends Account {
+  leverage: number
+  strategy: HLSStrategy
+  values: {
+    net: BigNumber
+    debt: BigNumber
+    total: BigNumber
+  }
+}
--- a/src/types/interfaces/asset.d.ts
+++ b/src/types/interfaces/asset.d.ts
@ -54,6 +54,7 @@ interface Asset {
  pythPriceFeedId?: string
  forceFetchPrice?: boolean
  testnetDenom?: string
+  isStaking?: boolean
 }

 interface PseudoAsset {
--- a/src/types/interfaces/store/broadcast.d.ts
+++ b/src/types/interfaces/store/broadcast.d.ts
@ -71,6 +71,7 @@ interface HandleResponseProps {
    | 'unlock'
    | 'swap'
    | 'oracle'
+    | 'hls-staking'
  lend?: boolean
  accountId?: string
  changes?: { debts?: BNCoin[]; deposits?: BNCoin[]; lends?: BNCoin[] }
@ -79,6 +80,12 @@ interface HandleResponseProps {
 }

 interface BroadcastSlice {
+  addToStakingStrategy: (options: {
+    accountId: string
+    actions: Action[]
+    depositCoin: BNCoin
+    borrowCoin: BNCoin
+  }) => Promise<boolean>
  borrow: (options: {
    accountId: string
    coin: BNCoin
--- a/src/utils/accounts.ts
+++ b/src/utils/accounts.ts
@ -89,13 +89,13 @@ export const calculateAccountApr = (
    const apr =
      lendingAssetsData.find((lendingAsset) => lendingAsset.asset.denom === lend.denom)
        ?.marketLiquidityRate ?? 0
-    const positionInterest = amount.multipliedBy(price).multipliedBy(apr)
+    const positionInterest = amount.multipliedBy(price).multipliedBy(apr).dividedBy(100)
    totalLendsInterestValue = totalLendsInterestValue.plus(positionInterest)
  })

  vaults?.forEach((vault) => {
    const lockedValue = vault.values.primary.plus(vault.values.secondary)
-    const positionInterest = lockedValue.multipliedBy(vault?.apr ?? 0)
+    const positionInterest = lockedValue.multipliedBy(vault?.apr ?? 0).dividedBy(100)
    totalVaultsInterestValue = totalVaultsInterestValue.plus(positionInterest)
  })

@ -107,15 +107,19 @@ export const calculateAccountApr = (
    const apy =
      borrowAssetsData.find((borrowAsset) => borrowAsset.asset.denom === debt.denom)?.borrowRate ??
      0
-    const positionInterest = amount.multipliedBy(price).multipliedBy(convertApyToApr(apy, 365))
+    const positionInterest = amount
+      .multipliedBy(price)
+      .multipliedBy(convertApyToApr(apy, 365))
+      .dividedBy(100)
+
    totalDebtInterestValue = totalDebtInterestValue.plus(positionInterest)
  })

-  const totalInterstValue = totalLendsInterestValue
+  const totalInterestValue = totalLendsInterestValue
    .plus(totalVaultsInterestValue)
    .minus(totalDebtInterestValue)

-  return totalInterstValue.dividedBy(totalNetValue).times(100)
+  return totalInterestValue.dividedBy(totalNetValue).times(100)
 }

 export function calculateAccountLeverage(account: Account, prices: BNCoin[]) {
--- a/src/utils/assets.ts
+++ b/src/utils/assets.ts
@ -43,3 +43,7 @@ export function getLendEnabledAssets() {
 export function getBorrowEnabledAssets() {
  return ASSETS.filter((asset) => asset.isBorrowEnabled)
 }
+
+export function getStakingAssets() {
+  return ASSETS.filter((asset) => asset.isStaking)
+}
--- a/src/utils/formatters.ts
+++ b/src/utils/formatters.ts
@ -148,7 +148,7 @@ export function formatLeverage(leverage: number) {
 }

 export function formatPercent(percent: number | string, minDecimals?: number) {
-  return formatValue(+percent * 100, {
+  return formatValue(+percent, {
    minDecimals: minDecimals ?? 0,
    suffix: '%',
  })
@ -209,6 +209,5 @@ export function getCoinAmount(denom: string, value: BigNumber, prices: BNCoin[])
 }

 export function convertLiquidityRateToAPR(rate: number) {
-  const rateMulHundred = rate * 100
-  return rateMulHundred >= 0.01 ? rateMulHundred : 0.0
+  return rate >= 0.01 ? rate : 0.0
 }
--- a/src/utils/parsers.ts
+++ b/src/utils/parsers.ts
@ -14,8 +14,8 @@ export const convertAprToApy = (apr: number, numberOfCompoundingPeriods: number)
 }

 export const convertApyToApr = (apy: number, numberOfCompoundingPeriods: number): number => {
-  const periodicRate = (1 + apy) ** (1 / numberOfCompoundingPeriods) - 1
-  return periodicRate * numberOfCompoundingPeriods
+  const periodicRate = (1 + apy / 100) ** (1 / numberOfCompoundingPeriods) - 1
+  return periodicRate * numberOfCompoundingPeriods * 100
 }

 export const combineBNCoins = (coins: BNCoin[]): BNCoin[] => {
--- a/src/utils/resolvers.ts
+++ b/src/utils/resolvers.ts
@ -13,7 +13,7 @@ export function resolveMarketResponse(
 ): Market {
  return {
    denom: marketResponse.denom,
-    borrowRate: Number(marketResponse.borrow_rate),
+    borrowRate: Number(marketResponse.borrow_rate) * 100,
    debtTotalScaled: marketResponse.debt_total_scaled,
    collateralTotalScaled: marketResponse.collateral_total_scaled,
    depositEnabled: assetParamsResponse.red_bank.deposit_enabled,
@ -24,7 +24,7 @@ export function resolveMarketResponse(
      max: BN(assetParamsResponse.deposit_cap),
    },
    maxLtv: Number(assetParamsResponse.max_loan_to_value),
-    liquidityRate: Number(marketResponse.liquidity_rate),
+    liquidityRate: Number(marketResponse.liquidity_rate) * 100,
    liquidationThreshold: Number(assetParamsResponse.liquidation_threshold),
  }
 }
@ -60,8 +60,8 @@ export function resolveHLSStrategies(
        maxLeverage: getLeverageFromLTV(+asset.credit_manager.hls!.max_loan_to_value),
        maxLTV: +asset.credit_manager.hls!.max_loan_to_value,
        denoms: {
-          deposit: correlatedDenom,
-          borrow: asset.denom,
+          deposit: asset.denom,
+          borrow: correlatedDenom,
        },
      }),
    )