2024-02-25 12:13:47 -08:00
|
|
|
import FormatNumericValue from '@components/shared/FormatNumericValue'
|
|
|
|
import TokenLogo from '@components/shared/TokenLogo'
|
|
|
|
import useMangoGroup from 'hooks/useMangoGroup'
|
|
|
|
import { useMemo } from 'react'
|
|
|
|
import { STAKEABLE_TOKENS } from 'utils/constants'
|
|
|
|
import { formatTokenSymbol } from 'utils/tokens'
|
|
|
|
|
|
|
|
const StatsPage = () => {
|
|
|
|
const { group } = useMangoGroup()
|
|
|
|
|
|
|
|
const banks = useMemo(() => {
|
|
|
|
if (!group) return []
|
|
|
|
const positionBanks = []
|
|
|
|
for (const token of STAKEABLE_TOKENS) {
|
|
|
|
const bank = group.banksMapByName.get(token)?.[0]
|
|
|
|
if (bank !== undefined) {
|
|
|
|
positionBanks.push(bank)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return positionBanks
|
|
|
|
}, [group])
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div className="rounded-2xl border-2 border-th-fgd-1 bg-th-bkg-1 p-6">
|
|
|
|
<h1>Stats</h1>
|
|
|
|
<div className="space-y-2">
|
|
|
|
{banks.map((bank) => (
|
2024-02-25 12:18:35 -08:00
|
|
|
<div
|
|
|
|
className="flex flex-col pt-4 md:flex-row md:items-center md:justify-between"
|
|
|
|
key={bank.name}
|
|
|
|
>
|
|
|
|
<div className="mb-4 flex items-center space-x-3 md:mb-0">
|
|
|
|
<div
|
|
|
|
className={`inner-shadow-bottom-sm flex h-12 w-12 items-center justify-center rounded-full border border-th-bkg-2 bg-gradient-to-b from-th-bkg-1 to-th-bkg-2`}
|
|
|
|
>
|
|
|
|
<TokenLogo bank={bank} size={28} />
|
|
|
|
</div>
|
|
|
|
<div>
|
|
|
|
<h3>{formatTokenSymbol(bank.name)}</h3>
|
2024-02-25 12:13:47 -08:00
|
|
|
</div>
|
2024-02-25 12:18:35 -08:00
|
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-8 sm:grid-cols-2">
|
|
|
|
<div>
|
|
|
|
<p className="mb-1 text-th-fgd-4">Deposits</p>
|
|
|
|
<span className="text-xl font-bold text-th-fgd-1">
|
|
|
|
<FormatNumericValue value={bank.uiDeposits()} decimals={2} />
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
{bank.name == 'USDC' ? (
|
2024-02-25 12:13:47 -08:00
|
|
|
<div>
|
2024-02-25 12:18:35 -08:00
|
|
|
<p className="mb-1 text-th-fgd-4">Borrows</p>
|
2024-02-25 12:13:47 -08:00
|
|
|
<span className="text-xl font-bold text-th-fgd-1">
|
2024-02-25 12:18:35 -08:00
|
|
|
<FormatNumericValue value={bank.uiBorrows()} decimals={2} />
|
2024-02-25 12:13:47 -08:00
|
|
|
</span>
|
|
|
|
</div>
|
2024-02-25 12:18:35 -08:00
|
|
|
) : undefined}
|
2024-02-25 12:13:47 -08:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
))}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default StatsPage
|