diff --git a/src/components/Borrow/Table/AvailableBorrowingsTable.tsx b/src/components/Borrow/Table/AvailableBorrowingsTable.tsx index 9ba25a86..05d91c60 100644 --- a/src/components/Borrow/Table/AvailableBorrowingsTable.tsx +++ b/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, _: TanstackTable) => { @@ -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} /> ) diff --git a/src/components/Borrow/Table/Columns/Debt.tsx b/src/components/Borrow/Table/Columns/Debt.tsx index 8aaad2bf..35ccf42b 100644 --- a/src/components/Borrow/Table/Columns/Debt.tsx +++ b/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, + b: Row, +): 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 diff --git a/src/components/Borrow/Table/Columns/Liquidity.tsx b/src/components/Borrow/Table/Columns/Liquidity.tsx index 3a955275..64854b87 100644 --- a/src/components/Borrow/Table/Columns/Liquidity.tsx +++ b/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, + b: Row, +): 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 diff --git a/src/components/Borrow/Table/Columns/Name.tsx b/src/components/Borrow/Table/Columns/Name.tsx index 331ef0b4..352a61bb 100644 --- a/src/components/Borrow/Table/Columns/Name.tsx +++ b/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 diff --git a/src/components/Borrow/Table/Columns/useAvailableColumns.tsx b/src/components/Borrow/Table/Columns/useAvailableColumns.tsx index 289fb661..70413d5b 100644 --- a/src/components/Borrow/Table/Columns/useAvailableColumns.tsx +++ b/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 { - isLoading: boolean -} - -export default function useAvailableColumns(props: Props) { +export default function useAvailableColumns() { return useMemo[]>(() => { return [ { @@ -24,6 +23,7 @@ export default function useAvailableColumns(props: Props) { { ...LIQUIDITY_META, cell: ({ row }) => , + sortingFn: liquiditySortingFn, }, { ...MANAGE_META, diff --git a/src/components/Borrow/Table/Columns/useDepositedColumns.tsx b/src/components/Borrow/Table/Columns/useDepositedColumns.tsx index ab95f5a5..bd3d66b6 100644 --- a/src/components/Borrow/Table/Columns/useDepositedColumns.tsx +++ b/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 Liquidity, { LIQUIDITY_META } from 'components/Borrow/Table/Columns/Liquidity' +import Debt, { DEBT_META, debtSortingFn } from 'components/Borrow/Table/Columns/Debt' +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 { - isLoading: boolean -} - -export default function useDepositedColumns(props: Props) { +export default function useDepositedColumns() { return useMemo[]>(() => { return [ { @@ -21,6 +20,7 @@ export default function useDepositedColumns(props: Props) { { ...DEBT_META, cell: ({ row }) => , + sortingFn: debtSortingFn, }, { ...BORROW_RATE_META, @@ -29,6 +29,7 @@ export default function useDepositedColumns(props: Props) { { ...LIQUIDITY_META, cell: ({ row }) => , + sortingFn: liquiditySortingFn, }, { ...MANAGE_META, diff --git a/src/components/Borrow/Table/DepositedBorrowingsTable.tsx b/src/components/Borrow/Table/DepositedBorrowingsTable.tsx index 00a18cea..f37b4e31 100644 --- a/src/components/Borrow/Table/DepositedBorrowingsTable.tsx +++ b/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) => { const currentRow = row as Row @@ -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} /> ) diff --git a/src/components/Earn/Farm/Table/Columns/DepositCap.tsx b/src/components/Earn/Farm/Table/Columns/DepositCap.tsx index f68c02bc..37ca70b9 100644 --- a/src/components/Earn/Farm/Table/Columns/DepositCap.tsx +++ b/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 | Row, + b: Row | Row, +): 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 diff --git a/src/components/Earn/Farm/Table/Columns/useAvailableColumns.tsx b/src/components/Earn/Farm/Table/Columns/useAvailableColumns.tsx index f9f0e0f4..132ab70d 100644 --- a/src/components/Earn/Farm/Table/Columns/useAvailableColumns.tsx +++ b/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 }) => , + sortingFn: depositCapSortingFn, }, { ...LTV_MAX_META, diff --git a/src/components/Earn/Farm/Table/Columns/useDepositedColumns.tsx b/src/components/Earn/Farm/Table/Columns/useDepositedColumns.tsx index 35fb20be..44a6559a 100644 --- a/src/components/Earn/Farm/Table/Columns/useDepositedColumns.tsx +++ b/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 }) => ( ), + sortingFn: depositCapSortingFn, }, { ...LTV_MAX_META, diff --git a/src/components/Earn/Lend/Table/AvailableLendsTable.tsx b/src/components/Earn/Lend/Table/AvailableLendsTable.tsx index e776ac4f..e93d83b6 100644 --- a/src/components/Earn/Lend/Table/AvailableLendsTable.tsx +++ b/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} /> ) diff --git a/src/components/Earn/Lend/Table/Columns/DepositCap.tsx b/src/components/Earn/Lend/Table/Columns/DepositCap.tsx index 845ec0c4..280cec4a 100644 --- a/src/components/Earn/Lend/Table/Columns/DepositCap.tsx +++ b/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, + b: Row, +): 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 diff --git a/src/components/Earn/Lend/Table/Columns/DepositValue.tsx b/src/components/Earn/Lend/Table/Columns/DepositValue.tsx index 5913703f..3d895ed8 100644 --- a/src/components/Earn/Lend/Table/Columns/DepositValue.tsx +++ b/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, + b: Row, +): number => { + const depositValueA = BN(a.original?.accountLentValue ?? 0) + const depositValueB = BN(b.original?.accountLentValue ?? 0) + return depositValueA.minus(depositValueB).toNumber() +} interface Props { asset: Asset diff --git a/src/components/Earn/Lend/Table/Columns/Name.tsx b/src/components/Earn/Lend/Table/Columns/Name.tsx index 58de2e7f..965b0513 100644 --- a/src/components/Earn/Lend/Table/Columns/Name.tsx +++ b/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 } diff --git a/src/components/Earn/Lend/Table/Columns/useAvailableColumns.tsx b/src/components/Earn/Lend/Table/Columns/useAvailableColumns.tsx index 297b6c8a..2fdf2269 100644 --- a/src/components/Earn/Lend/Table/Columns/useAvailableColumns.tsx +++ b/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 }) => , + sortingFn: marketDepositCapSortingFn, }, { ...MANAGE_META, diff --git a/src/components/Earn/Lend/Table/Columns/useDepositedColumns.tsx b/src/components/Earn/Lend/Table/Columns/useDepositedColumns.tsx index 4aff3f9f..73127ed3 100644 --- a/src/components/Earn/Lend/Table/Columns/useDepositedColumns.tsx +++ b/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 DepositValue, { DEPOSIT_VALUE_META } from 'components/Earn/Lend/Table/Columns/DepositValue' +import DepositCap, { + 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 }) => ( ), + sortingFn: depositedSortingFn, }, { ...APY_META, @@ -37,6 +44,7 @@ export default function useDepositedColumns(props: Props) { { ...DEPOSIT_CAP_META, cell: ({ row }) => , + sortingFn: marketDepositCapSortingFn, }, { ...MANAGE_META, diff --git a/src/components/Earn/Lend/Table/DepositedLendsTable.tsx b/src/components/Earn/Lend/Table/DepositedLendsTable.tsx index 16b7a6e5..ff355480 100644 --- a/src/components/Earn/Lend/Table/DepositedLendsTable.tsx +++ b/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} /> ) diff --git a/src/components/Table/Row.tsx b/src/components/Table/Row.tsx index 79af29a7..f7220281 100644 --- a/src/components/Table/Row.tsx +++ b/src/components/Table/Row.tsx @@ -13,7 +13,7 @@ export default function Row(props: Props) { return ( <>