mars-v2-frontend/src/components/Earn/Lend/Lends.tsx

import AvailableLendsTable from 'components/Earn/Lend/Table/AvailableLendsTable'
import DepositedLendsTable from 'components/Earn/Lend/Table/DepositedLendsTable'
import { BN_ZERO } from 'constants/math'
import useLendEnabledAssets from 'hooks/assets/useLendEnabledAssets'
import useLendingMarketAssetsTableData from 'hooks/useLendingMarketAssetsTableData'

export default function Lends() {
  const { accountLentAssets, availableAssets, allAssets } = useLendingMarketAssetsTableData()

  if (!allAssets?.length) {
    return <Fallback />
  }
  return (
    <>
      <DepositedLendsTable data={accountLentAssets} isLoading={false} />
      <AvailableLendsTable data={availableAssets} isLoading={false} />
    </>
  )
}

function Fallback() {
  const assets = useLendEnabledAssets()

  const data: LendingMarketTableData[] = assets.map((asset) => ({
    asset,
    marketDepositCap: BN_ZERO,
    borrowEnabled: false,
    marketDepositAmount: BN_ZERO,
    marketLiquidityAmount: BN_ZERO,
    cap: {
      max: BN_ZERO,
      used: BN_ZERO,
      denom: asset.denom,
    },
    apy: {
      borrow: 0,
      deposit: 0,
    },
    ltv: {
      max: 0,
      liq: 0,
    },
  }))

  return <AvailableLendsTable data={data} isLoading />
}