Table fixes (#563)

* fix: fixed the sorting of the tables

* fix: added sorting functions

* fix: farm sorting for deposit cap

* fix: fixed Row types

src/components/Borrow/Table/AvailableBorrowingsTable.tsx

@@ -3,6 +3,7 @@ import { Table as TanstackTable } from '@tanstack/table-core/build/lib/types'
 import { useCallback } from 'react'
 
 import BorrowActionButtons from 'components/Borrow/BorrowActionButtons'
+import { NAME_META } from 'components/Borrow/Table/Columns/Name'
 import useAvailableColumns from 'components/Borrow/Table/Columns/useAvailableColumns'
 import MarketDetails from 'components/MarketDetails'
 import Table from 'components/Table'
@@ -14,7 +15,7 @@ type Props = {
 }
 
 export default function AvailableBorrowingsTable(props: Props) {
-  const columns = useAvailableColumns({ isLoading: props.isLoading })
+  const columns = useAvailableColumns()
 
   const renderExpanded = useCallback(
     (row: Row<BorrowMarketTableData>, _: TanstackTable<BorrowMarketTableData>) => {
@@ -38,7 +39,7 @@ export default function AvailableBorrowingsTable(props: Props) {
       title='Available to Borrow'
       columns={columns}
       data={props.data}
-      initialSorting={[{ id: 'asset.name', desc: true }]}
+      initialSorting={[{ id: NAME_META.id, desc: false }]}
       renderExpanded={renderExpanded}
     />
   )

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

@@ -1,20 +1,40 @@
-import React from 'react'
+import { Row } from '@tanstack/react-table'
 
 import AmountAndValue from 'components/AmountAndValue'
 import { BN_ZERO } from 'constants/math'
+import { byDenom } from 'utils/array'
 import { getEnabledMarketAssets } from 'utils/assets'
 
 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.debt || !b.original.debt) return 0
+  const assetAPrice = (a.original.liquidity?.value ?? BN_ZERO).div(
+    a.original.liquidity?.amount ?? BN_ZERO,
+  )
+  const assetBPrice = (b.original.liquidity?.value ?? BN_ZERO).div(
+    b.original.liquidity?.amount ?? BN_ZERO,
+  )
+  const debtA = a.original.debt.times(assetAPrice).shiftedBy(-assetA.decimals)
+  const debtB = b.original.debt.times(assetBPrice).shiftedBy(-assetB.decimals)
+  return debtA.minus(debtB).toNumber()
+}
+
 interface Props {
   data: BorrowMarketTableData
 }
 
 export default function Debt(props: Props) {
   const marketAssets = getEnabledMarketAssets()
-  const asset = marketAssets.find((asset) => asset.denom === props.data.asset.denom)
+  const asset = marketAssets.find(byDenom(props.data.asset.denom))
 
   if (!asset) return null
 

src/components/Borrow/Table/Columns/Liquidity.tsx

@@ -1,18 +1,38 @@
-import React from 'react'
+import { Row } from '@tanstack/react-table'
 
 import AmountAndValue from 'components/AmountAndValue'
 import Loading from 'components/Loading'
 import { BN_ZERO } from 'constants/math'
+import { byDenom } from 'utils/array'
 import { getEnabledMarketAssets } from 'utils/assets'
+import { demagnify } from 'utils/formatters'
+
+export const LIQUIDITY_META = {
+  accessorKey: 'liquidity',
+  header: 'Liquidity Available',
+  id: 'liquidity',
+}
+
+export const liquiditySortingFn = (
+  a: Row<BorrowMarketTableData>,
+  b: Row<BorrowMarketTableData>,
+): number => {
+  const assetA = a.original.asset
+  const assetB = b.original.asset
+  const liquidityA = demagnify(a.original.liquidity?.amount ?? 0, assetA)
+  const liquidityB = demagnify(b.original.liquidity?.amount ?? 0, assetB)
+
+  return liquidityA - liquidityB
+}
 
-export const LIQUIDITY_META = { accessorKey: 'asset.name', header: 'Asset', id: 'symbol' }
 interface Props {
   data: BorrowMarketTableData
 }
+
 export default function Liquidity(props: Props) {
   const { liquidity, asset: borrowAsset } = props.data
   const marketAssets = getEnabledMarketAssets()
-  const asset = marketAssets.find((asset) => asset.denom === borrowAsset.denom)
+  const asset = marketAssets.find(byDenom(borrowAsset.denom))
 
   if (!asset) return null
 

src/components/Borrow/Table/Columns/Name.tsx

@@ -1,9 +1,7 @@
-import React from 'react'
-
 import AssetImage from 'components/Asset/AssetImage'
 import TitleAndSubCell from 'components/TitleAndSubCell'
 
-export const NAME_META = { accessorKey: 'asset.name', header: 'Asset', id: 'symbol' }
+export const NAME_META = { accessorKey: 'asset.symbol', header: 'Asset', id: 'symbol' }
 
 interface Props {
   data: BorrowMarketTableData

src/components/Borrow/Table/Columns/useAvailableColumns.tsx

@@ -1,16 +1,15 @@
 import { ColumnDef } from '@tanstack/react-table'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 
 import BorrowRate, { BORROW_RATE_META } from 'components/Borrow/Table/Columns/BorrowRate'
-import Liquidity, { LIQUIDITY_META } from 'components/Borrow/Table/Columns/Liquidity'
+import Liquidity, {
+  LIQUIDITY_META,
+  liquiditySortingFn,
+} from 'components/Borrow/Table/Columns/Liquidity'
 import Manage, { MANAGE_META } from 'components/Borrow/Table/Columns/Manage'
 import Name, { NAME_META } from 'components/Borrow/Table/Columns/Name'
 
-interface Props {
+export default function useAvailableColumns() {
-  isLoading: boolean
-}
-
-export default function useAvailableColumns(props: Props) {
   return useMemo<ColumnDef<BorrowMarketTableData>[]>(() => {
     return [
       {
@@ -24,6 +23,7 @@ export default function useAvailableColumns(props: Props) {
       {
         ...LIQUIDITY_META,
         cell: ({ row }) => <Liquidity data={row.original} />,
+        sortingFn: liquiditySortingFn,
       },
       {
         ...MANAGE_META,

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

@@ -1,17 +1,16 @@
 import { ColumnDef } from '@tanstack/react-table'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 
 import BorrowRate, { BORROW_RATE_META } from 'components/Borrow/Table/Columns/BorrowRate'
-import Debt, { DEBT_META } from 'components/Borrow/Table/Columns/Debt'
+import Debt, { DEBT_META, debtSortingFn } from 'components/Borrow/Table/Columns/Debt'
-import Liquidity, { LIQUIDITY_META } from 'components/Borrow/Table/Columns/Liquidity'
+import Liquidity, {
+  LIQUIDITY_META,
+  liquiditySortingFn,
+} from 'components/Borrow/Table/Columns/Liquidity'
 import Manage, { MANAGE_META } from 'components/Borrow/Table/Columns/Manage'
 import Name, { NAME_META } from 'components/Borrow/Table/Columns/Name'
 
-interface Props {
+export default function useDepositedColumns() {
-  isLoading: boolean
-}
-
-export default function useDepositedColumns(props: Props) {
   return useMemo<ColumnDef<BorrowMarketTableData>[]>(() => {
     return [
       {
@@ -21,6 +20,7 @@ export default function useDepositedColumns(props: Props) {
       {
         ...DEBT_META,
         cell: ({ row }) => <Debt data={row.original} />,
+        sortingFn: debtSortingFn,
       },
       {
         ...BORROW_RATE_META,
@@ -29,6 +29,7 @@ export default function useDepositedColumns(props: Props) {
       {
         ...LIQUIDITY_META,
         cell: ({ row }) => <Liquidity data={row.original} />,
+        sortingFn: liquiditySortingFn,
       },
       {
         ...MANAGE_META,

src/components/Borrow/Table/DepositedBorrowingsTable.tsx

@@ -1,11 +1,12 @@
 import { Row } from '@tanstack/react-table'
 import { useCallback } from 'react'
 
+import BorrowActionButtons from 'components/Borrow/BorrowActionButtons'
+import { NAME_META } from 'components/Borrow/Table/Columns/Name'
 import useDepositedColumns from 'components/Borrow/Table/Columns/useDepositedColumns'
 import MarketDetails from 'components/MarketDetails'
 import Table from 'components/Table'
 import ActionButtonRow from 'components/Table/ActionButtonRow'
-import BorrowActionButtons from 'components/Borrow/BorrowActionButtons'
 
 type Props = {
   data: BorrowMarketTableData[]
@@ -13,7 +14,7 @@ type Props = {
 }
 
 export default function DepositedBorrowingsTable(props: Props) {
-  const columns = useDepositedColumns({ isLoading: props.isLoading })
+  const columns = useDepositedColumns()
 
   const renderExpanded = useCallback((row: Row<BorrowMarketTableData>) => {
     const currentRow = row as Row<BorrowMarketTableData>
@@ -34,7 +35,7 @@ export default function DepositedBorrowingsTable(props: Props) {
       title='Borrowed Assets'
       columns={columns}
       data={props.data}
-      initialSorting={[{ id: 'asset.name', desc: true }]}
+      initialSorting={[{ id: NAME_META.id, desc: false }]}
       renderExpanded={renderExpanded}
     />
   )

src/components/Earn/Farm/Table/Columns/DepositCap.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { Row } from '@tanstack/react-table'
 
 import { FormattedNumber } from 'components/FormattedNumber'
 import Loading from 'components/Loading'
@@ -13,6 +13,15 @@ interface Props {
   isLoading: boolean
 }
 
+export const depositCapSortingFn = (
+  a: Row<Vault> | Row<DepositedVault>,
+  b: Row<Vault> | Row<DepositedVault>,
+): number => {
+  const depositCapA = a.original.cap.max
+  const depositCapB = b.original.cap.max
+  return depositCapA.minus(depositCapB).toNumber()
+}
+
 export default function DepositCap(props: Props) {
   const { vault } = props
 

src/components/Earn/Farm/Table/Columns/useAvailableColumns.tsx

@@ -1,9 +1,12 @@
 import { ColumnDef } from '@tanstack/react-table'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 
 import Apy, { APY_META } from 'components/Earn/Farm/Table/Columns/Apy'
 import { Deposit } from 'components/Earn/Farm/Table/Columns/Deposit'
-import DepositCap, { DEPOSIT_CAP_META } from 'components/Earn/Farm/Table/Columns/DepositCap'
+import DepositCap, {
+  DEPOSIT_CAP_META,
+  depositCapSortingFn,
+} from 'components/Earn/Farm/Table/Columns/DepositCap'
 import MaxLTV, { LTV_MAX_META } from 'components/Earn/Farm/Table/Columns/MaxLTV'
 import Name, { NAME_META } from 'components/Earn/Farm/Table/Columns/Name'
 import TVL, { TVL_META } from 'components/Earn/Farm/Table/Columns/TVL'
@@ -32,6 +35,7 @@ export default function useAvailableColumns(props: Props) {
       {
         ...DEPOSIT_CAP_META,
         cell: ({ row }) => <DepositCap vault={row.original as Vault} isLoading={props.isLoading} />,
+        sortingFn: depositCapSortingFn,
       },
       {
         ...LTV_MAX_META,

src/components/Earn/Farm/Table/Columns/useDepositedColumns.tsx

@@ -1,8 +1,11 @@
 import { ColumnDef, Row } from '@tanstack/react-table'
-import React, { useMemo } from 'react'
+import { useMemo } from 'react'
 
 import Apy, { APY_META } from 'components/Earn/Farm/Table/Columns/Apy'
-import DepositCap, { DEPOSIT_CAP_META } from 'components/Earn/Farm/Table/Columns/DepositCap'
+import DepositCap, {
+  DEPOSIT_CAP_META,
+  depositCapSortingFn,
+} from 'components/Earn/Farm/Table/Columns/DepositCap'
 import Details, { DETAILS_META } from 'components/Earn/Farm/Table/Columns/Details'
 import MaxLTV, { LTV_MAX_META } from 'components/Earn/Farm/Table/Columns/MaxLTV'
 import Name, { NAME_META } from 'components/Earn/Farm/Table/Columns/Name'
@@ -43,6 +46,7 @@ export default function useDepositedColumns(props: Props) {
         cell: ({ row }) => (
           <DepositCap vault={row.original as DepositedVault} isLoading={props.isLoading} />
         ),
+        sortingFn: depositCapSortingFn,
       },
       {
         ...LTV_MAX_META,

src/components/Earn/Lend/Table/AvailableLendsTable.tsx

@@ -35,7 +35,7 @@ export default function AvailableLendsTable(props: Props) {
       title='Available Markets'
       columns={columns}
       data={props.data}
-      initialSorting={[{ id: NAME_META.id, desc: true }]}
+      initialSorting={[{ id: NAME_META.id, desc: false }]}
       renderExpanded={renderExpanded}
     />
   )

src/components/Earn/Lend/Table/Columns/DepositCap.tsx

@@ -1,10 +1,28 @@
-import React from 'react'
+import { Row } from '@tanstack/react-table'
 
 import { FormattedNumber } from 'components/FormattedNumber'
 import Loading from 'components/Loading'
 import TitleAndSubCell from 'components/TitleAndSubCell'
+import { demagnify } from 'utils/formatters'
 
-export const DEPOSIT_CAP_META = { accessorKey: 'marketDepositCap', header: 'Depo. Cap' }
+export const DEPOSIT_CAP_META = {
+  accessorKey: 'marketDepositCap',
+  header: 'Depo. Cap',
+  id: 'marketDepositCap',
+}
+
+export const marketDepositCapSortingFn = (
+  a: Row<LendingMarketTableData>,
+  b: Row<LendingMarketTableData>,
+): number => {
+  const assetA = a.original.asset
+  const assetB = b.original.asset
+  if (!a.original.marketDepositCap || !b.original.marketDepositCap) return 0
+
+  const marketDepositCapA = demagnify(a.original.marketDepositCap, assetA)
+  const marketDepositCapB = demagnify(b.original.marketDepositCap, assetB)
+  return marketDepositCapA - marketDepositCapB
+}
 
 interface Props {
   isLoading: boolean

src/components/Earn/Lend/Table/Columns/DepositValue.tsx

@@ -1,10 +1,22 @@
-import React from 'react'
+import { Row } from '@tanstack/react-table'
 
 import AmountAndValue from 'components/AmountAndValue'
 import { BN_ZERO } from 'constants/math'
 import { BN } from 'utils/helpers'
 
-export const DEPOSIT_VALUE_META = { accessorKey: 'accountDepositValue', header: 'Deposited' }
+export const DEPOSIT_VALUE_META = {
+  accessorKey: 'accountLentValue',
+  header: 'Deposited',
+}
+
+export const depositedSortingFn = (
+  a: Row<LendingMarketTableData>,
+  b: Row<LendingMarketTableData>,
+): number => {
+  const depositValueA = BN(a.original?.accountLentValue ?? 0)
+  const depositValueB = BN(b.original?.accountLentValue ?? 0)
+  return depositValueA.minus(depositValueB).toNumber()
+}
 
 interface Props {
   asset: Asset

src/components/Earn/Lend/Table/Columns/Name.tsx

@@ -1,9 +1,7 @@
-import React from 'react'
-
 import AssetImage from 'components/Asset/AssetImage'
 import TitleAndSubCell from 'components/TitleAndSubCell'
 
-export const NAME_META = { accessorKey: 'asset.name', header: 'Asset', id: 'symbol' }
+export const NAME_META = { accessorKey: 'asset.symbol', header: 'Asset', id: 'symbol' }
 interface Props {
   asset: Asset
 }

src/components/Earn/Lend/Table/Columns/useAvailableColumns.tsx

@@ -2,7 +2,10 @@ import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
 import Apy, { APY_META } from 'components/Earn/Lend/Table/Columns/Apy'
-import DepositCap, { DEPOSIT_CAP_META } from 'components/Earn/Lend/Table/Columns/DepositCap'
+import DepositCap, {
+  DEPOSIT_CAP_META,
+  marketDepositCapSortingFn,
+} from 'components/Earn/Lend/Table/Columns/DepositCap'
 import Manage, { MANAGE_META } from 'components/Earn/Lend/Table/Columns/Manage'
 import Name, { NAME_META } from 'components/Earn/Lend/Table/Columns/Name'
 
@@ -30,6 +33,7 @@ export default function useAvailableColumns(props: Props) {
       {
         ...DEPOSIT_CAP_META,
         cell: ({ row }) => <DepositCap isLoading={props.isLoading} data={row.original} />,
+        sortingFn: marketDepositCapSortingFn,
       },
       {
         ...MANAGE_META,

src/components/Earn/Lend/Table/Columns/useDepositedColumns.tsx

@@ -2,8 +2,14 @@ import { ColumnDef } from '@tanstack/react-table'
 import { useMemo } from 'react'
 
 import Apy, { APY_META } from 'components/Earn/Lend/Table/Columns/Apy'
-import DepositCap, { DEPOSIT_CAP_META } from 'components/Earn/Lend/Table/Columns/DepositCap'
+import DepositCap, {
-import DepositValue, { DEPOSIT_VALUE_META } from 'components/Earn/Lend/Table/Columns/DepositValue'
+  DEPOSIT_CAP_META,
+  marketDepositCapSortingFn,
+} from 'components/Earn/Lend/Table/Columns/DepositCap'
+import DepositValue, {
+  DEPOSIT_VALUE_META,
+  depositedSortingFn,
+} from 'components/Earn/Lend/Table/Columns/DepositValue'
 import Manage, { MANAGE_META } from 'components/Earn/Lend/Table/Columns/Manage'
 import Name, { NAME_META } from 'components/Earn/Lend/Table/Columns/Name'
 
@@ -23,6 +29,7 @@ export default function useDepositedColumns(props: Props) {
         cell: ({ row }) => (
           <DepositValue asset={row.original.asset} lentAmount={row.original.accountLentAmount} />
         ),
+        sortingFn: depositedSortingFn,
       },
       {
         ...APY_META,
@@ -37,6 +44,7 @@ export default function useDepositedColumns(props: Props) {
       {
         ...DEPOSIT_CAP_META,
         cell: ({ row }) => <DepositCap isLoading={props.isLoading} data={row.original} />,
+        sortingFn: marketDepositCapSortingFn,
       },
       {
         ...MANAGE_META,

src/components/Earn/Lend/Table/DepositedLendsTable.tsx

@@ -35,7 +35,7 @@ export default function DepositedLendsTable(props: Props) {
       title='Lent Assets'
       columns={columns}
       data={props.data}
-      initialSorting={[{ id: NAME_META.id, desc: true }]}
+      initialSorting={[{ id: NAME_META.id, desc: false }]}
       renderExpanded={renderExpanded}
     />
   )

src/components/Table/Row.tsx

@@ -13,7 +13,7 @@ export default function Row<T>(props: Props<T>) {
   return (
     <>
       <tr
-        key={props.row.id}
+        key={`${props.row.id}-row`}
         className={classNames(
           'group/row transition-bg',
           props.renderExpanded && 'hover:cursor-pointer',