import { useTranslation } from 'next-i18next' import useMangoStore from '../stores/useMangoStore' import useMangoAccount from '../hooks/useMangoAccount' import { I80F48, nativeI80F48ToUi, QUOTE_INDEX, ZERO_I80F48, } from '@blockworks-foundation/mango-client' import { abbreviateAddress, formatUsdValue, usdFormatter } from 'utils' import { DataLoader } from './MarketPosition' const AccountOverviewPopover = ({ collapsed, health, }: { collapsed: boolean health: I80F48 }) => { const { t } = useTranslation('common') const mangoGroup = useMangoStore((s) => s.selectedMangoGroup.current) const mangoCache = useMangoStore((s) => s.selectedMangoGroup.cache) const { mangoAccount, initialLoad } = useMangoAccount() const marketConfig = useMangoStore((s) => s.selectedMarket.config) const I80F48_100 = I80F48.fromString('100') const initHealth = mangoAccount && mangoGroup && mangoCache ? mangoAccount.getHealth(mangoGroup, mangoCache, 'Init') : I80F48_100 const equity = mangoAccount && mangoGroup && mangoCache ? mangoAccount.computeValue(mangoGroup, mangoCache) : ZERO_I80F48 return ( <> {mangoAccount ? (
{t('account')}
{abbreviateAddress(mangoAccount.publicKey)}
{t('value')}
{initialLoad ?
{t('health')}
{health.gt(I80F48_100) ? '>100' : health.toFixed(2)}%
{t('leverage')}
{initialLoad ? (
{t('collateral-available')}
{initialLoad ? (
{marketConfig.name} {t('margin-available')}
{mangoAccount && mangoGroup && mangoCache ? usdFormatter( nativeI80F48ToUi( mangoAccount.getMarketMarginAvailable( mangoGroup, mangoCache, marketConfig.marketIndex, marketConfig.kind ), mangoGroup.tokens[QUOTE_INDEX].decimals ).toFixed() ) : '0.00'}