-
-
-
{row.symbol}
-
{row.name}
+ cell: ({ row }) => {
+ const asset = marketAssets.find((asset) => asset.denom === row.original.denom)
+
+ if (!asset) return null
+
+ return (
+
+
+
+
{asset.symbol}
+
{asset.name}
+
-
- ),
- cell: (info) => info.getValue(),
+ )
+ },
},
{
accessorKey: 'borrowRate',
header: 'Borrow Rate',
- accessorFn: (row) => (
-
- {row.borrowRate ? `${(row.borrowRate * 100).toFixed(2)}%` : '-'}
-
- ),
- cell: (info) => info.getValue(),
+ cell: ({ row }) =>
{(Number(row.original.borrowRate) * 100).toFixed(2)}%
,
},
{
- accessorKey: 'age',
- header: 'Borrowed',
- accessorFn: (row) => (
-
- {row.borrowed ? (
-
-
{row.borrowed.amount}
-
{formatCurrency(row.borrowed.value)}
-
- ) : (
- '-'
- )}
-
- ),
- cell: (info) => info.getValue(),
- },
- {
- accessorKey: 'marketLiquidity',
+ accessorKey: 'liquidity',
header: 'Liquidity Available',
+ cell: ({ row }) => (
+
+
{row.original.liquidity.amount}
+
${row.original.liquidity.value}
+
+ ),
},
{
accessorKey: 'status',
@@ -98,7 +77,7 @@ export const BorrowTable = ({ data, onBorrowClick, onRepayClick }: Props) => {
)
const table = useReactTable({
- data,
+ data: props.data,
columns,
state: {
sorting,
@@ -110,47 +89,67 @@ export const BorrowTable = ({ data, onBorrowClick, onRepayClick }: Props) => {
})
return (
-
- {table.getHeaderGroups().map((headerGroup) => (
-
- {headerGroup.headers.map((header) => {
- return (
-
- {header.isPlaceholder ? null : (
+
+
+ {table.getHeaderGroups().map((headerGroup) => (
+
+ {headerGroup.headers.map((header, index) => {
+ return (
+ |
- {flexRender(header.column.columnDef.header, header.getContext())}
- {{
- asc: ' 🔼',
- desc: ' 🔽',
- }[header.column.getIsSorted() as string] ?? null}
+ {header.column.getCanSort()
+ ? {
+ asc: (
+
+ ),
+ desc: (
+
+ ),
+ false: (
+
+ ),
+ }[header.column.getIsSorted() as string] ?? null
+ : null}
+ {flexRender(header.column.columnDef.header, header.getContext())}
- )}
-
- )
- })}
-
- ))}
-
- {table.getRowModel().rows.length === 0 ? (
- No Data
- ) : (
- table.getRowModel().rows.map((row) => {
+ |
+ )
+ })}
+
+ ))}
+
+
+ {table.getRowModel().rows.map((row) => {
+ if (row.getIsExpanded()) {
return (
- onBorrowClick(row.original.denom)}
- onRepayClick={() => onRepayClick(row.original.denom)}
- />
+
+
+ {}}
+ onRepayClick={() => {}}
+ resetExpanded={table.resetExpanded}
+ />
+
)
- })
- )}
-
-
+ }
+ return
+ })}
+
+
)
}
diff --git a/src/components/BorrowTable.tsx b/src/components/BorrowTable.tsx
deleted file mode 100644
index e15d5291..00000000
--- a/src/components/BorrowTable.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { getBorrowData } from 'utils/api'
-
-export async function BorrowTable() {
- const borrowData = await getBorrowData()
-
- return borrowData.map((borrow) => {
- return (
-
- {borrow.denom} {borrow.borrowRate} {borrow.marketLiquidity}
-
- )
- })
-}
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index 8e8be983..fa011111 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -2,19 +2,21 @@ import classNames from 'classnames'
import { ReactNode } from 'react'
interface Props {
+ title: string
children: ReactNode
className?: string
}
-export const Card = ({ children, className }: Props) => {
+export const Card = (props: Props) => {
return (
-
- {children}
-
+
{props.title}
+
{props.children}
+
)
}
diff --git a/src/components/Loading.tsx b/src/components/Loading.tsx
index 6322b116..04fd64dd 100644
--- a/src/components/Loading.tsx
+++ b/src/components/Loading.tsx
@@ -14,10 +14,10 @@ export default function Loading(props: Props) {
diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
index a3f9660f..9855f2b0 100644
--- a/src/components/Modal.tsx
+++ b/src/components/Modal.tsx
@@ -20,7 +20,10 @@ export const Modal = ({ children, content, className, open, setOpen }: Props) =>
return open ? (
-
+
{setOpen && (
{
- const marketAssets = getMarketAssets()
-
- const [modalState, setModalState] = useState({
- show: false,
- data: { tokenDenom: '' },
- })
-
- const selectedAccount = useStore((s) => s.selectedAccount)
-
- const { data: allowedCoinsData } = useAllowedCoins()
- const { data: positionsData } = useCreditAccountPositions(selectedAccount ?? '')
- const { data: marketsData } = useMarkets()
- const { data: tokenPrices } = useTokenPrices()
- const { data: redbankBalances } = useRedbankBalances()
-
- // recreate modals and reset state whenever ref changes
- const modalId = useRef(0)
-
- const borrowedAssetsMap = useMemo(() => {
- let borrowedAssetsMap: Map = new Map()
-
- positionsData?.debts.forEach((coin) => {
- borrowedAssetsMap.set(coin.denom, coin.amount)
- })
-
- return borrowedAssetsMap
- }, [positionsData])
-
- const { borrowedAssets, notBorrowedAssets } = useMemo(() => {
- return {
- borrowedAssets:
- allowedCoinsData
- ?.filter((denom) => borrowedAssetsMap.has(denom))
- .map((denom) => {
- const { symbol, name, logo } = getTokenInfo(denom, marketAssets)
- const borrowRate = Number(marketsData?.[denom].borrow_rate) || 0
- const marketLiquidity = BigNumber(
- redbankBalances?.find((asset) => asset.denom.toLowerCase() === denom.toLowerCase())
- ?.amount || 0,
- )
- .div(10 ** getTokenDecimals(denom, marketAssets))
- .toNumber()
-
- const borrowAmount = BigNumber(borrowedAssetsMap.get(denom) as string)
- .div(10 ** getTokenDecimals(denom, marketAssets))
- .toNumber()
- const borrowValue = borrowAmount * (tokenPrices?.[denom] ?? 0)
-
- const rowData = {
- denom,
- symbol,
- logo,
- name,
- borrowed: {
- amount: borrowAmount,
- value: borrowValue,
- },
- borrowRate,
- marketLiquidity,
- }
-
- return rowData
- }) ?? [],
- notBorrowedAssets:
- allowedCoinsData
- ?.filter((denom) => !borrowedAssetsMap.has(denom))
- .map((denom) => {
- const { symbol, name, logo } = getTokenInfo(denom, marketAssets)
- const borrowRate = Number(marketsData?.[denom].borrow_rate) || 0
- const marketLiquidity = BigNumber(
- redbankBalances?.find((asset) => asset.denom.toLowerCase() === denom.toLowerCase())
- ?.amount || 0,
- )
- .div(10 ** getTokenDecimals(denom, marketAssets))
- .toNumber()
-
- const rowData = {
- denom,
- symbol,
- logo,
- name,
- borrowed: null,
- borrowRate,
- marketLiquidity,
- }
-
- return rowData
- }) ?? [],
- }
- }, [allowedCoinsData, borrowedAssetsMap, marketsData, redbankBalances, tokenPrices, marketAssets])
-
- const handleBorrowClick = (denom: string) => {
- setModalState({ show: 'borrow', data: { tokenDenom: denom } })
- modalId.current += 1
- }
-
- const handleRepayClick = (denom: string) => {
- setModalState({ show: 'repay', data: { tokenDenom: denom } })
- modalId.current += 1
- }
-
- return (
-
-
-
-
-
- Borrowings
-
-
-
-
-
-
-
- Available to Borrow
-
-
-
-
-
-
setModalState({ ...modalState, show: false })}
- />
- setModalState({ ...modalState, show: false })}
- />
-