114 lines
3.8 KiB
TypeScript
114 lines
3.8 KiB
TypeScript
import Image from 'next/image'
|
|
|
|
import mangoStore from '../store/state'
|
|
import { formatDecimal, numberFormat } from '../utils/numbers'
|
|
import ContentBox from './shared/ContentBox'
|
|
|
|
const TokenList = () => {
|
|
const mangoAccount = mangoStore((s) => s.mangoAccount)
|
|
const group = mangoStore((s) => s.group)
|
|
|
|
const banks = group?.banksMap
|
|
? Array.from(group?.banksMap, ([key, value]) => ({ key, value }))
|
|
: []
|
|
|
|
return (
|
|
<ContentBox hideBorder hidePadding>
|
|
<h2>Tokens</h2>
|
|
<table className="min-w-full">
|
|
<thead>
|
|
<tr>
|
|
<th className="text-left">Asset</th>
|
|
<th className="text-right">Deposits</th>
|
|
<th className="text-right">APR</th>
|
|
<th className="text-right">Borrows</th>
|
|
<th className="text-right">APR</th>
|
|
<th className="text-right">Your Balance</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{banks.map((bank) => {
|
|
const oraclePrice = bank.value.price
|
|
return (
|
|
<tr key={bank.key}>
|
|
<td>
|
|
<div className="flex items-center">
|
|
<div className="mr-2.5 flex flex-shrink-0 items-center">
|
|
<Image
|
|
alt=""
|
|
width="24"
|
|
height="24"
|
|
src={`/icons/${bank.value.name.toLowerCase()}.svg`}
|
|
/>
|
|
</div>
|
|
<div className="flex flex-col">
|
|
<p className="font-bold">{bank.value.name}</p>
|
|
<p className="text-xs text-th-fgd-4">
|
|
${formatDecimal(oraclePrice.toNumber(), 2)}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div className="flex flex-col text-right">
|
|
<p>
|
|
{formatDecimal(
|
|
bank.value.uiDeposits(),
|
|
bank.value.mintDecimals
|
|
)}
|
|
</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div className="flex flex-col text-right">
|
|
<p className="text-th-green">
|
|
{formatDecimal(bank.value.getDepositRate().toNumber(), 2)}
|
|
%
|
|
</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div className="flex flex-col text-right">
|
|
<p>
|
|
{formatDecimal(
|
|
bank.value.uiBorrows(),
|
|
bank.value.mintDecimals
|
|
)}
|
|
</p>
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div className="flex flex-col text-right">
|
|
<p className="text-th-red">
|
|
{formatDecimal(bank.value.getBorrowRate().toNumber(), 2)}%
|
|
</p>
|
|
</div>
|
|
</td>
|
|
<td className="pt-4 text-right">
|
|
<p className="px-2">
|
|
{mangoAccount
|
|
? formatDecimal(mangoAccount.getUi(bank.value))
|
|
: '-'}
|
|
</p>
|
|
<p className="px-2 text-xs text-th-fgd-4">
|
|
{mangoAccount
|
|
? `$${formatDecimal(
|
|
mangoAccount.getUi(bank.value) *
|
|
oraclePrice.toNumber(),
|
|
2
|
|
)}`
|
|
: '-'}
|
|
</p>
|
|
</td>
|
|
</tr>
|
|
)
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
<div className="mt-2 space-y-2 p-2"></div>
|
|
</ContentBox>
|
|
)
|
|
}
|
|
|
|
export default TokenList
|