add basic stats page
This commit is contained in:
Tyler Shipe
parent
562753f937
commit
05a46993ba
|
|
@ -1,25 +1,13 @@
|
|||
import { Table, Thead, Tbody, Tr, Th, Td } from 'react-super-responsive-table'
|
||||
import { formatBalanceDisplay, tokenPrecision } from '../../utils/index'
|
||||
import { I80F48 } from '@blockworks-foundation/mango-client'
|
||||
import useMangoStats from '../../hooks/useMangoStats'
|
||||
import useHistoricPrices from '../../hooks/useHistoricPrices'
|
||||
import useMarketList from '../../hooks/useMarketList'
|
||||
import useMangoStore from '../../stores/useMangoStore'
|
||||
import Chart from '../Chart'
|
||||
|
||||
const icons = {
|
||||
BTC: '/assets/icons/btc.svg',
|
||||
ETH: '/assets/icons/eth.svg',
|
||||
SOL: '/assets/icons/sol.svg',
|
||||
SRM: '/assets/icons/srm.svg',
|
||||
USDT: '/assets/icons/usdt.svg',
|
||||
USDC: '/assets/icons/usdc.svg',
|
||||
WUSDT: '/assets/icons/usdt.svg',
|
||||
}
|
||||
|
||||
export default function StatsTotals() {
|
||||
const { latestStats, stats } = useMangoStats()
|
||||
const { prices } = useHistoricPrices()
|
||||
// const selectedMangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
|
||||
// TODO: fix this
|
||||
const backupPrices = [0, 0]
|
||||
const { getTokenIndex, symbols } = useMarketList()
|
||||
|
|
@ -173,39 +161,29 @@ export default function StatsTotals() {
|
|||
<Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
<div className="flex items-center">
|
||||
<img
|
||||
src={icons[stat.symbol]}
|
||||
alt={icons[stat.symbol]}
|
||||
alt=""
|
||||
width="20"
|
||||
height="20"
|
||||
className="mr-2.5"
|
||||
src={`/assets/icons/${stat.symbol.toLowerCase()}.svg`}
|
||||
className={`mr-2.5`}
|
||||
/>
|
||||
{stat.symbol}
|
||||
</div>
|
||||
</Td>
|
||||
<Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
{formatBalanceDisplay(
|
||||
stat.totalDeposits,
|
||||
tokenPrecision[stat.symbol]
|
||||
).toLocaleString(undefined, {
|
||||
maximumFractionDigits: tokenPrecision[stat.symbol],
|
||||
})}
|
||||
{stat.totalDeposits}
|
||||
</Td>
|
||||
<Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
{formatBalanceDisplay(
|
||||
stat.totalBorrows,
|
||||
tokenPrecision[stat.symbol]
|
||||
).toLocaleString(undefined, {
|
||||
maximumFractionDigits: tokenPrecision[stat.symbol],
|
||||
})}
|
||||
{stat.totalBorrows}
|
||||
</Td>
|
||||
<Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
{stat.depositInterest.toFixed(2)}%
|
||||
{stat.depositInterest.toString()}%
|
||||
</Td>
|
||||
<Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
{stat.borrowInterest.toFixed(2)}%
|
||||
{stat.borrowInterest.toString()}%
|
||||
</Td>
|
||||
<Td className="px-6 py-4 whitespace-nowrap text-sm text-th-fgd-1">
|
||||
{(parseFloat(stat.utilization) * 100).toFixed(2)}%
|
||||
{stat.utilization.mul(I80F48.fromNumber(100)).toFixed(3)}%
|
||||
</Td>
|
||||
</Tr>
|
||||
))}
|
||||
|
|
|
|||
|
|
@ -20,8 +20,8 @@ const useMangoStats = () => {
|
|||
const { cluster } = useConnection()
|
||||
const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
|
||||
const mangoGroupName = useMangoStore((s) => s.selectedMangoGroup.name)
|
||||
const connection = useMangoStore((s) => s.connection.current);
|
||||
const config = useMangoGroupConfig();
|
||||
const connection = useMangoStore((s) => s.connection.current)
|
||||
const config = useMangoGroupConfig()
|
||||
|
||||
useEffect(() => {
|
||||
const fetchStats = async () => {
|
||||
|
|
@ -31,36 +31,48 @@ const useMangoStats = () => {
|
|||
const stats = await response.json()
|
||||
setStats(stats)
|
||||
}
|
||||
fetchStats()
|
||||
// fetchStats()
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
const getLatestStats = async () => {
|
||||
if (mangoGroup) {
|
||||
const rootBanks = await mangoGroup.loadRootBanks(connection);
|
||||
const rootBanks = await mangoGroup.loadRootBanks(connection)
|
||||
const latestStats = config.tokens.map((token) => {
|
||||
const rootBank = rootBanks.find((bank) => {
|
||||
if (!bank) {
|
||||
return false;
|
||||
|
||||
return false
|
||||
}
|
||||
return bank.publicKey.toBase58() == token.rootKey.toBase58();
|
||||
return bank.publicKey.toBase58() == token.rootKey.toBase58()
|
||||
})
|
||||
const totalDeposits = rootBank.getUiTotalDeposit(mangoGroup);
|
||||
const totalBorrows = rootBank.getUiTotalBorrow(mangoGroup);
|
||||
const totalDeposits = rootBank.getUiTotalDeposit(mangoGroup)
|
||||
console.log(
|
||||
`total deposits for ${token.symbol}: `,
|
||||
totalDeposits.toFixed(),
|
||||
totalDeposits
|
||||
)
|
||||
|
||||
const totalBorrows = rootBank.getUiTotalBorrow(mangoGroup)
|
||||
|
||||
return {
|
||||
time: new Date(),
|
||||
symbol: token.symbol,
|
||||
totalDeposits: totalDeposits,
|
||||
totalBorrows: totalBorrows,
|
||||
depositInterest: rootBank.getDepositRate(mangoGroup).mul(I80F48.fromNumber(100)),
|
||||
borrowInterest: rootBank.getBorrowRate(mangoGroup).mul(I80F48.fromNumber(100)),
|
||||
utilization: totalDeposits > I80F48.fromNumber(0) ? totalBorrows.div(totalDeposits) : I80F48.fromNumber(0),
|
||||
totalDeposits: totalDeposits.toFixed(),
|
||||
totalBorrows: totalBorrows.toFixed(),
|
||||
depositInterest: rootBank
|
||||
.getDepositRate(mangoGroup)
|
||||
.mul(I80F48.fromNumber(100)),
|
||||
borrowInterest: rootBank
|
||||
.getBorrowRate(mangoGroup)
|
||||
.mul(I80F48.fromNumber(100)),
|
||||
utilization:
|
||||
totalDeposits > I80F48.fromNumber(0)
|
||||
? totalBorrows.div(totalDeposits)
|
||||
: I80F48.fromNumber(0),
|
||||
}
|
||||
});
|
||||
})
|
||||
setLatestStats(latestStats)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
getLatestStats()
|
||||
|
|
|
|||
|
|
@ -7,8 +7,8 @@ import StatsPerps from '../components/stats-page/StatsPerps'
|
|||
|
||||
const TABS = [
|
||||
'Totals',
|
||||
'Assets',
|
||||
'Perps',
|
||||
// 'Assets',
|
||||
// 'Perps',
|
||||
// 'Markets',
|
||||
// 'Liquidations',
|
||||
]
|
||||
|
|
|
|||
Loading…
Reference in New Issue