ccc4a42354
* 📈 Improve structure generic Table component * ♻️ Update Borrow Table and overall structure of Table comp * ♻️ Update Lend table * ✨ add loading state for lend table * 🧪 Fix unit tests
39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
import { Row } from '@tanstack/react-table'
|
|
import { Table as TanStackTable } from '@tanstack/table-core/build/lib/types'
|
|
import React, { useCallback } from 'react'
|
|
|
|
import useDepositedColumns from 'components/Borrow/Table/Columns/useDepositedColumns'
|
|
import Card from 'components/Card'
|
|
import MarketDetails from 'components/MarketDetails'
|
|
import Table from 'components/Table'
|
|
|
|
type Props = {
|
|
data: BorrowMarketTableData[]
|
|
isLoading: boolean
|
|
}
|
|
|
|
export default function DepositedBorrowingsTable(props: Props) {
|
|
const columns = useDepositedColumns({ isLoading: props.isLoading })
|
|
|
|
const renderExpanded = useCallback(
|
|
(
|
|
row: Row<BorrowMarketTableData | LendingMarketTableData>,
|
|
table: TanStackTable<BorrowMarketTableData>,
|
|
) => <MarketDetails row={row} type='borrow' />,
|
|
[],
|
|
)
|
|
|
|
if (!props.data.length) return null
|
|
|
|
return (
|
|
<Card className='w-full h-fit bg-white/5' title='Borrowed Assets'>
|
|
<Table
|
|
columns={columns}
|
|
data={props.data}
|
|
initialSorting={[{ id: 'asset.name', desc: true }]}
|
|
renderExpanded={renderExpanded}
|
|
/>
|
|
</Card>
|
|
)
|
|
}
|