feat: implement v1 tables into v2 with data fetching

src/api/cache.ts

@@ -10,7 +10,12 @@ import {
   TotalDepositResponse,
   VaultConfigBaseForAddr,
 } from 'types/generated/mars-params/MarsParams.types'
-import { ArrayOfMarket } from 'types/generated/mars-red-bank/MarsRedBank.types'
+import {
+  ArrayOfMarket,
+  ArrayOfUserCollateralResponse,
+  ArrayOfUserDebtResponse,
+  UserCollateralResponse,
+} from 'types/generated/mars-red-bank/MarsRedBank.types'
 
 interface Cache<T> extends Map<string, { data: T | null; timestamp: number }> {}
 
@@ -62,3 +67,5 @@ export const underlyingDebtCache: Cache<string> = new Map()
 export const previewDepositCache: Cache<{ vaultAddress: string; amount: string }> = new Map()
 export const stakingAprCache: Cache<StakingApr[]> = new Map()
 export const assetParamsCache: Cache<AssetParamsBaseForAddr[]> = new Map()
+export const userCollateralCache: Cache<ArrayOfUserCollateralResponse> = new Map()
+export const userDebtCache: Cache<ArrayOfUserDebtResponse> = new Map()

src/api/cosmwasm-client.ts

@@ -6,6 +6,7 @@ import { MarsMockVaultQueryClient } from 'types/generated/mars-mock-vault/MarsMo
 import { MarsOracleOsmosisQueryClient } from 'types/generated/mars-oracle-osmosis/MarsOracleOsmosis.client'
 import { MarsParamsQueryClient } from 'types/generated/mars-params/MarsParams.client'
 import { MarsPerpsQueryClient } from 'types/generated/mars-perps/MarsPerps.client'
+import { MarsRedBankQueryClient } from 'types/generated/mars-red-bank/MarsRedBank.client'
 import { MarsSwapperOsmosisQueryClient } from 'types/generated/mars-swapper-osmosis/MarsSwapperOsmosis.client'
 
 let _cosmWasmClient: Map<string, CosmWasmClient> = new Map()
@@ -15,6 +16,7 @@ let _paramsQueryClient: Map<string, MarsParamsQueryClient> = new Map()
 let _incentivesQueryClient: Map<string, MarsIncentivesQueryClient> = new Map()
 let _swapperOsmosisClient: Map<string, MarsSwapperOsmosisQueryClient> = new Map()
 let _perpsClient: Map<string, MarsPerpsQueryClient> = new Map()
+let _redBankQueryClient: Map<string, MarsRedBankQueryClient> = new Map()
 
 const getClient = async (rpc: string) => {
   try {
@@ -137,6 +139,23 @@ const getPerpsQueryClient = async (chainConfig: ChainConfig) => {
   }
 }
 
+const getRedBankQueryClient = async (chainConfig: ChainConfig) => {
+  try {
+    const contract = chainConfig.contracts.redBank
+    const rpc = chainConfig.endpoints.rpc
+    const key = rpc + contract
+
+    if (!_redBankQueryClient.get(key)) {
+      const client = await getClient(rpc)
+      _redBankQueryClient.set(key, new MarsRedBankQueryClient(client, contract))
+    }
+
+    return _redBankQueryClient.get(key)!
+  } catch (error) {
+    throw error
+  }
+}
+
 export {
   getClient,
   getCreditManagerQueryClient,
@@ -146,4 +165,5 @@ export {
   getSwapperQueryClient,
   getVaultQueryClient,
   getPerpsQueryClient,
+  getRedBankQueryClient,
 }

src/api/v1/getV1Positions.ts

@@ -0,0 +1,41 @@
+import { cacheFn, userCollateralCache, userDebtCache } from 'api/cache'
+import { getRedBankQueryClient } from 'api/cosmwasm-client'
+import { BNCoin } from 'types/classes/BNCoin'
+import {
+  ArrayOfUserCollateralResponse,
+  ArrayOfUserDebtResponse,
+} from 'types/generated/mars-red-bank/MarsRedBank.types'
+
+export default async function getV1Positions(
+  chainConfig: ChainConfig,
+  user?: string,
+): Promise<Account> {
+  if (!user) return new Promise((_, reject) => reject('No account Wallet ID found'))
+
+  const redBankQueryClient = await getRedBankQueryClient(chainConfig)
+
+  const userCollateral: ArrayOfUserCollateralResponse = await cacheFn(
+    () => redBankQueryClient.userCollaterals({ user: user, limit: 100 }),
+    userCollateralCache,
+    `${chainConfig.id}/v1/deposits/${user}`,
+  )
+  const userDebt: ArrayOfUserDebtResponse = await cacheFn(
+    () => redBankQueryClient.userDebts({ user: user, limit: 100 }),
+    userDebtCache,
+    `${chainConfig.id}/v1/debts/${user}`,
+  )
+
+  if (userCollateral && userDebt) {
+    return {
+      id: user,
+      debts: userDebt.map((debt) => new BNCoin(debt)),
+      lends: userCollateral.map((lend) => new BNCoin(lend)),
+      deposits: [],
+      vaults: [],
+      perps: [],
+      kind: 'default',
+    }
+  }
+
+  return new Promise((_, reject) => reject('No account found'))
+}

src/components/borrow/Borrowings.tsx

@@ -5,15 +5,15 @@ import { BN_ZERO } from 'constants/math'
 import useBorrowEnabledAssets from 'hooks/assets/useBorrowEnabledAssets'
 
 export default function Borrowings() {
-  const data = useBorrowMarketAssetsTableData()
+  const { accountBorrowedAssets, availableAssets, allAssets } = useBorrowMarketAssetsTableData()
 
-  if (!data?.allAssets?.length) {
+  if (!allAssets?.length) {
     return <Fallback />
   }
   return (
     <>
-      <DepositedBorrowingsTable data={data.accountBorrowedAssets} isLoading={false} />
-      <AvailableBorrowingsTable data={data.availableAssets} isLoading={false} />
+      <DepositedBorrowingsTable data={accountBorrowedAssets} isLoading={false} />
+      <AvailableBorrowingsTable data={availableAssets} isLoading={false} />
     </>
   )
 }

src/components/borrow/Table/Columns/Debt.tsx

@@ -1,36 +0,0 @@
-import { Row } from '@tanstack/react-table'
-
-import AmountAndValue from 'components/common/AmountAndValue'
-import { BN_ZERO } from 'constants/math'
-import useMarketEnabledAssets from 'hooks/assets/useMarketEnabledAssets'
-import { byDenom } from 'utils/array'
-
-export const DEBT_META = {
-  accessorKey: 'debt',
-  header: 'Debt',
-}
-
-export const debtSortingFn = (
-  a: Row<BorrowMarketTableData>,
-  b: Row<BorrowMarketTableData>,
-): number => {
-  const assetA = a.original.asset
-  const assetB = b.original.asset
-  if (!a.original.accountDebt || !b.original.accountDebt) return 0
-  const debtA = a.original.accountDebt.shiftedBy(-assetA.decimals)
-  const debtB = b.original.accountDebt.shiftedBy(-assetB.decimals)
-  return debtA.minus(debtB).toNumber()
-}
-
-interface Props {
-  data: BorrowMarketTableData
-}
-
-export default function Debt(props: Props) {
-  const marketAssets = useMarketEnabledAssets()
-  const asset = marketAssets.find(byDenom(props.data.asset.denom))
-
-  if (!asset) return null
-
-  return <AmountAndValue asset={asset} amount={props.data?.accountDebt ?? BN_ZERO} />
-}

src/components/borrow/Table/Columns/DebtValue.tsx

@@ -0,0 +1,30 @@
+import { Row } from '@tanstack/react-table'
+
+import AmountAndValue from 'components/common/AmountAndValue'
+import { BN_ZERO } from 'constants/math'
+import { BN } from 'utils/helpers'
+
+export const DEBT_VALUE_META = {
+  id: 'accountDebtValue',
+  accessorKey: 'accountDebtValue',
+  header: 'Debt',
+}
+
+export const debtSortingFn = (
+  a: Row<BorrowMarketTableData>,
+  b: Row<BorrowMarketTableData>,
+): number => {
+  const debtValueA = BN(a.original?.accountDebtValue ?? 0)
+  const debtValueB = BN(b.original?.accountDebtValue ?? 0)
+  return debtValueA.minus(debtValueB).toNumber()
+}
+
+interface Props {
+  asset: Asset
+  debtAmount?: BigNumber
+}
+export default function DebtValue(props: Props) {
+  return (
+    <AmountAndValue asset={props.asset} amount={props.debtAmount ? props.debtAmount : BN_ZERO} />
+  )
+}

src/components/borrow/Table/Columns/useDepositedColumns.tsx

@@ -2,7 +2,10 @@ import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
 import BorrowRate, { BORROW_RATE_META } from 'components/borrow/Table/Columns/BorrowRate'
-import Debt, { DEBT_META, debtSortingFn } from 'components/borrow/Table/Columns/Debt'
+import DebtValue, {
+  DEBT_VALUE_META,
+  debtSortingFn,
+} from 'components/borrow/Table/Columns/DebtValue'
 import Liquidity, {
   LIQUIDITY_META,
   liquiditySortingFn,
@@ -18,8 +21,10 @@ export default function useDepositedColumns() {
         cell: ({ row }) => <Name data={row.original} />,
       },
       {
-        ...DEBT_META,
-        cell: ({ row }) => <Debt data={row.original} />,
+        ...DEBT_VALUE_META,
+        cell: ({ row }) => (
+          <DebtValue asset={row.original.asset} debtAmount={row.original.accountDebtAmount} />
+        ),
         sortingFn: debtSortingFn,
       },
       {

src/components/borrow/Table/DepositedBorrowingsTable.tsx

@@ -2,6 +2,7 @@ import { Row } from '@tanstack/react-table'
 import { useCallback } from 'react'
 
 import BorrowActionButtons from 'components/borrow/BorrowActionButtons'
+import { DEBT_VALUE_META } from 'components/borrow/Table/Columns/DebtValue'
 import { NAME_META } from 'components/borrow/Table/Columns/Name'
 import useDepositedColumns from 'components/borrow/Table/Columns/useDepositedColumns'
 import MarketDetails from 'components/common/MarketDetails'
@@ -11,6 +12,7 @@ import ActionButtonRow from 'components/common/Table/ActionButtonRow'
 type Props = {
   data: BorrowMarketTableData[]
   isLoading: boolean
+  v1?: boolean
 }
 
 export default function DepositedBorrowingsTable(props: Props) {
@@ -32,10 +34,17 @@ export default function DepositedBorrowingsTable(props: Props) {
 
   return (
     <Table
-      title='Borrowed Assets'
+      title={props.v1 ? 'Borrowings' : 'Borrowed Assets'}
       columns={columns}
       data={props.data}
-      initialSorting={[{ id: NAME_META.id, desc: false }]}
+      initialSorting={
+        props.v1
+          ? [
+              { id: DEBT_VALUE_META.id, desc: true },
+              { id: NAME_META.id, desc: false },
+            ]
+          : [{ id: NAME_META.id, desc: false }]
+      }
       renderExpanded={renderExpanded}
     />
   )

src/components/borrow/Table/useBorrowMarketAssetsTableData.ts

@@ -1,11 +1,14 @@
 import { useMemo } from 'react'
 
+import { BN_ZERO } from 'constants/math'
 import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
 import useMarkets from 'hooks/markets/useMarkets'
+import useDisplayCurrencyPrice from 'hooks/useDisplayCurrencyPrice'
 
 export default function useBorrowMarketAssetsTableData() {
   const account = useCurrentAccount()
   const markets = useMarkets()
+  const { convertAmount } = useDisplayCurrencyPrice()
 
   return useMemo((): {
     accountBorrowedAssets: BorrowMarketTableData[]
@@ -18,13 +21,16 @@ export default function useBorrowMarketAssetsTableData() {
     markets
       .filter((market) => market.borrowEnabled)
       .forEach((market) => {
-        const debt = account?.debts?.find((debt) => debt.denom === market.asset.denom)
+        const amount =
+          account?.debts?.find((debt) => debt.denom === market.asset.denom)?.amount ?? BN_ZERO
+        const value = amount ? convertAmount(market.asset, amount) : undefined
 
         const borrowMarketAsset: BorrowMarketTableData = {
           ...market,
-          accountDebt: debt?.amount,
+          accountDebtAmount: amount,
+          accountDebtValue: value,
         }
-        ;(borrowMarketAsset.accountDebt ? accountBorrowedAssets : availableAssets).push(
+        ;(borrowMarketAsset.accountDebtAmount ? accountBorrowedAssets : availableAssets).push(
           borrowMarketAsset,
         )
       })
@@ -34,5 +40,5 @@ export default function useBorrowMarketAssetsTableData() {
       availableAssets,
       allAssets: [...accountBorrowedAssets, ...availableAssets],
     }
-  }, [account?.debts, markets])
+  }, [account?.debts, markets, convertAmount])
 }

src/components/common/Intro.tsx

@@ -17,7 +17,7 @@ import useStore from 'store'
 interface Props {
   text: string | ReactNode
   children?: ReactNode
-  bg: 'borrow' | 'lend' | 'farm' | 'portfolio' | 'hls-farm' | 'hls-staking'
+  bg: Page
 }
 
 function IntroBackground(props: { bg: Props['bg'] }) {

src/components/earn/lend/Table/Columns/DepositValue.tsx

@@ -5,6 +5,7 @@ import { BN_ZERO } from 'constants/math'
 import { BN } from 'utils/helpers'
 
 export const DEPOSIT_VALUE_META = {
+  id: 'accountLentValue',
   accessorKey: 'accountLentValue',
   header: 'Deposited',
 }

src/components/earn/lend/Table/DepositedLendsTable.tsx

@@ -1,16 +1,18 @@
 import { Row } from '@tanstack/react-table'
 import { useCallback } from 'react'
 
-import LendingActionButtons from 'components/earn/lend/LendingActionButtons'
-import { NAME_META } from 'components/earn/lend/Table/Columns/Name'
-import useDepositedColumns from 'components/earn/lend/Table/Columns/useDepositedColumns'
 import MarketDetails from 'components/common/MarketDetails'
 import Table from 'components/common/Table'
 import ActionButtonRow from 'components/common/Table/ActionButtonRow'
+import LendingActionButtons from 'components/earn/lend/LendingActionButtons'
+import { DEPOSIT_VALUE_META } from 'components/earn/lend/Table/Columns/DepositValue'
+import { NAME_META } from 'components/earn/lend/Table/Columns/Name'
+import useDepositedColumns from 'components/earn/lend/Table/Columns/useDepositedColumns'
 
 type Props = {
   data: LendingMarketTableData[]
   isLoading: boolean
+  v1?: boolean
 }
 
 export default function DepositedLendsTable(props: Props) {
@@ -32,10 +34,17 @@ export default function DepositedLendsTable(props: Props) {
 
   return (
     <Table
-      title='Lent Assets'
+      title={props.v1 ? 'Deposits' : 'Lent Assets'}
       columns={columns}
       data={props.data}
-      initialSorting={[{ id: NAME_META.id, desc: false }]}
+      initialSorting={
+        props.v1
+          ? [
+              { id: DEPOSIT_VALUE_META.id, desc: true },
+              { id: NAME_META.id, desc: false },
+            ]
+          : [{ id: NAME_META.id, desc: false }]
+      }
       renderExpanded={renderExpanded}
     />
   )

src/components/header/DesktopHeader.tsx

@@ -40,6 +40,7 @@ export const menuTree = (walletId: WalletID, chainConfig: ChainConfig): MenuTree
   { pages: ['borrow'], label: 'Borrow' },
   ...(chainConfig.hls ? [{ pages: ['hls-staking'] as Page[], label: 'High Leverage' }] : []),
   { pages: ['portfolio'], label: 'Portfolio' },
+  { pages: ['v1'], label: 'V1' },
   { pages: ['governance'], label: 'Governance', externalUrl: getGovernanceUrl(walletId) },
 ]
 

src/components/header/navigation/Routes.tsx

@@ -12,6 +12,7 @@ import PerpsPage from 'pages/PerpsPage'
 import PortfolioAccountPage from 'pages/PortfolioAccountPage'
 import PortfolioPage from 'pages/PortfolioPage'
 import TradePage from 'pages/TradePage'
+import V1Page from 'pages/V1Page'
 import Layout from 'pages/_layout'
 
 export default function Routes() {
@@ -32,6 +33,7 @@ export default function Routes() {
         <Route path='/lend' element={<LendPage />} />
         <Route path='/borrow' element={<BorrowPage />} />
         <Route path='/portfolio' element={<PortfolioPage />} />
+        <Route path='/v1' element={<V1Page />} />
         <Route path='/mobile' element={<MobilePage />} />
         {chainConfig.hls && <Route path='/hls-staking' element={<HLSStakingPage />} />}
         {chainConfig.hls && <Route path='/hls-farm' element={<HLSFarmPage />} />}
@@ -47,6 +49,7 @@ export default function Routes() {
           <Route path='portfolio' element={<PortfolioPage />} />
           {chainConfig.hls && <Route path='hls-staking' element={<HLSStakingPage />} />}
           {chainConfig.hls && <Route path='hls-farm' element={<HLSFarmPage />} />}
+          <Route path='v1' element={<V1Page />} />
           <Route path='portfolio/:accountId'>
             <Route path='' element={<PortfolioAccountPage />} />
           </Route>

src/components/v1/Borrowings.tsx

@@ -0,0 +1,47 @@
+import BorrowingsTable from 'components/borrow/Table/DepositedBorrowingsTable'
+import useV1BorrowingsTableData from 'components/v1/Table/useV1BorrowingsTableData'
+import { BN_ZERO } from 'constants/math'
+import useBorrowEnabledAssets from 'hooks/assets/useBorrowEnabledAssets'
+
+export default function Borrowings() {
+  const { debtAssets } = useV1BorrowingsTableData()
+
+  if (!debtAssets?.length) {
+    return <Fallback />
+  }
+
+  return (
+    <>
+      <BorrowingsTable data={debtAssets} isLoading={false} v1 />
+    </>
+  )
+}
+
+function Fallback() {
+  const assets = useBorrowEnabledAssets()
+  const data: BorrowMarketTableData[] = assets.map((asset) => ({
+    asset,
+    apy: {
+      borrow: 0,
+      deposit: 0,
+    },
+    ltv: {
+      max: 0,
+      liq: 0,
+    },
+    liquidity: BN_ZERO,
+    marketLiquidityRate: 0,
+    cap: {
+      denom: asset.denom,
+      max: BN_ZERO,
+      used: BN_ZERO,
+    },
+    debt: BN_ZERO,
+    borrowEnabled: true,
+    depositEnabled: true,
+    deposits: BN_ZERO,
+    accountDebt: BN_ZERO,
+  }))
+
+  return <BorrowingsTable data={data} isLoading v1 />
+}

src/components/v1/Deposits.tsx

@@ -0,0 +1,48 @@
+import DepositsTable from 'components/earn/lend/Table/DepositedLendsTable'
+import useV1DepositsTableData from 'components/v1/Table/useV1DepositsTableData'
+import { BN_ZERO } from 'constants/math'
+import useMarketEnabledAssets from 'hooks/assets/useMarketEnabledAssets'
+
+export default function Deposits() {
+  const { depositAssets } = useV1DepositsTableData()
+
+  if (!depositAssets?.length) {
+    return <Fallback />
+  }
+
+  console.log(depositAssets)
+
+  return (
+    <>
+      <DepositsTable data={depositAssets} isLoading={false} v1 />
+    </>
+  )
+}
+
+function Fallback() {
+  const assets = useMarketEnabledAssets()
+
+  const data: LendingMarketTableData[] = assets.map((asset) => ({
+    asset,
+    borrowEnabled: true,
+    depositEnabled: true,
+    debt: BN_ZERO,
+    deposits: BN_ZERO,
+    liquidity: BN_ZERO,
+    cap: {
+      max: BN_ZERO,
+      used: BN_ZERO,
+      denom: asset.denom,
+    },
+    apy: {
+      borrow: 0,
+      deposit: 0,
+    },
+    ltv: {
+      max: 0,
+      liq: 0,
+    },
+  }))
+
+  return <DepositsTable data={data} isLoading v1 />
+}

src/components/v1/Table/useV1BorrowingsTableData.ts

@@ -0,0 +1,38 @@
+import { useMemo } from 'react'
+
+import { BN_ZERO } from 'constants/math'
+import useMarkets from 'hooks/markets/useMarkets'
+import useDisplayCurrencyPrice from 'hooks/useDisplayCurrencyPrice'
+import useV1Positions from 'hooks/v1/useV1Positions'
+import useStore from 'store'
+
+export default function useV1BorrowingsTableData() {
+  const address = useStore((s) => s.address)
+  const markets = useMarkets()
+  const { data: v1Positions } = useV1Positions(address)
+  const userDebts = v1Positions?.debts ?? []
+  const { convertAmount } = useDisplayCurrencyPrice()
+
+  return useMemo((): {
+    debtAssets: BorrowMarketTableData[]
+  } => {
+    const debtAssets: BorrowMarketTableData[] = []
+
+    markets
+      .filter((market) => market.borrowEnabled)
+      .forEach((market) => {
+        const amount =
+          userDebts.find((debt) => debt.denom === market.asset.denom)?.amount ?? BN_ZERO
+        const value = amount ? convertAmount(market.asset, amount) : undefined
+
+        const borrowMarketAsset: BorrowMarketTableData = {
+          ...market,
+          accountDebtAmount: amount,
+          accountDebtValue: value,
+        }
+        debtAssets.push(borrowMarketAsset)
+      })
+
+    return { debtAssets }
+  }, [userDebts, markets, convertAmount])
+}

src/components/v1/Table/useV1DepositsTableData.ts

@@ -0,0 +1,39 @@
+import { useMemo } from 'react'
+
+import { BN_ZERO } from 'constants/math'
+import useMarkets from 'hooks/markets/useMarkets'
+import useDisplayCurrencyPrice from 'hooks/useDisplayCurrencyPrice'
+import useV1Positions from 'hooks/v1/useV1Positions'
+import useStore from 'store'
+import { byDenom } from 'utils/array'
+
+export default function useV1DepositsTableData(): {
+  depositAssets: LendingMarketTableData[]
+} {
+  const address = useStore((s) => s.address)
+  const markets = useMarkets()
+  const { data: v1Positions } = useV1Positions(address)
+  const userCollateral = v1Positions?.lends ?? []
+  const { convertAmount } = useDisplayCurrencyPrice()
+
+  return useMemo(() => {
+    const depositAssets: LendingMarketTableData[] = []
+
+    markets.forEach((market) => {
+      const amount = userCollateral.find(byDenom(market.asset.denom))?.amount ?? BN_ZERO
+      const value = amount ? convertAmount(market.asset, amount) : undefined
+
+      const lendingMarketAsset: LendingMarketTableData = {
+        ...market,
+        accountLentValue: value,
+        accountLentAmount: amount,
+      }
+
+      depositAssets.push(lendingMarketAsset)
+    })
+
+    return {
+      depositAssets,
+    }
+  }, [markets, userCollateral, convertAmount])
+}

src/components/v1/V1Intro.tsx

@@ -0,0 +1,24 @@
+import WalletConnectButton from 'components/Wallet/WalletConnectButton'
+import Intro from 'components/common/Intro'
+import useStore from 'store'
+
+export default function V1Intro() {
+  const address = useStore((state) => state.address)
+  return (
+    <Intro
+      text={
+        <>
+          <span className='text-white'>Welcome to the Red Bank!</span>
+          <br />
+          This is the first version (v1) of the Red Bank. It provides simple lending and borrowing,
+          without the use of Credit Accounts. Funds are{' '}
+          <span className='text-white'>not cross-collateralized</span> and can't be used on v2 as
+          collateral.
+        </>
+      }
+      bg='v1'
+    >
+      {!address && <WalletConnectButton className='mt-4' />}
+    </Intro>
+  )
+}

src/hooks/v1/useV1Positions.tsx

@@ -0,0 +1,17 @@
+import useSWR from 'swr'
+
+import getV1Positions from 'api/v1/getV1Positions'
+import useChainConfig from 'hooks/useChainConfig'
+
+export default function useV1Positions(user?: string, suspense?: boolean) {
+  const chainConfig = useChainConfig()
+
+  return useSWR(
+    user && `chains/${chainConfig.id}/v1/${user}`,
+    () => getV1Positions(chainConfig, user),
+    {
+      suspense: suspense,
+      revalidateOnFocus: false,
+    },
+  )
+}

src/pages/V1Page.tsx

@@ -0,0 +1,15 @@
+import MigrationBanner from 'components/common/MigrationBanner'
+import Borrowings from 'components/v1/Borrowings'
+import Deposits from 'components/v1/Deposits'
+import V1Intro from 'components/v1/V1Intro'
+
+export default function V1Page() {
+  return (
+    <div className='flex flex-wrap w-full gap-6'>
+      <MigrationBanner />
+      <V1Intro />
+      <Deposits />
+      <Borrowings />
+    </div>
+  )
+}

src/types/interfaces/market.d.ts

@@ -17,7 +17,8 @@ interface Market {
 }
 
 interface BorrowMarketTableData extends Market {
-  accountDebt?: BigNumber
+  accountDebtAmount?: BigNumber
+  accountDebtValue?: BigNumber
 }
 
 interface LendingMarketTableData extends Market {

src/types/interfaces/route.d.ts

@@ -11,6 +11,7 @@ type Page =
   | 'hls-staking'
   | 'governance'
   | 'execute'
+  | 'v1'
 
 type OsmosisRouteResponse = {
   amount_in: {

src/types/interfaces/v1.d.ts

@@ -0,0 +1,4 @@
+interface V1Positions {
+  deposits: BNCoin[]
+  debts: BNCoin[]
+}