import FormatNumericValue from '@components/shared/FormatNumericValue' import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements' import TokenLogo from '@components/shared/TokenLogo' import Tooltip from '@components/shared/Tooltip' import { Disclosure, Transition } from '@headlessui/react' import { ChevronDownIcon } from '@heroicons/react/20/solid' import { useTranslation } from 'next-i18next' import useMangoGroup from 'hooks/useMangoGroup' import useMangoAccount from 'hooks/useMangoAccount' import { useViewport } from 'hooks/useViewport' import { MouseEventHandler } from 'react' import { ContributionDetails, HealthContribution } from 'types' const TokensHealthTable = ({ initTokens, maintTokens, handleLegendClick, handleLegendMouseEnter, handleLegendMouseLeave, }: { initTokens: HealthContribution[] maintTokens: HealthContribution[] handleLegendClick: (cont: HealthContribution) => void handleLegendMouseEnter: (cont: HealthContribution) => void handleLegendMouseLeave: MouseEventHandler }) => { const { t } = useTranslation(['common', 'account', 'trade']) const { group } = useMangoGroup() const { mangoAccount } = useMangoAccount() const { isMobile } = useViewport() return group && mangoAccount ? ( !isMobile ? (
{t('token')} | {t('trade:notional')} |
|
|
{asset} |
{bank ? (
|
{initContribution > 0 ? initAssetWeight.toFixed(2) : initContribution < 0 ? initLiabWeight.toFixed(2) : 0} x |
{maintContribution > 0 ? maintAssetWeight.toFixed(2) : maintContribution < 0 ? maintLiabWeight.toFixed(2) : 0} x |
---|
{asset}
{t('trade:notional')}
{bank ? (
{t('account:init-health-contribution')}
{initContribution > 0 ? initAssetWeight.toFixed(2) : initContribution < 0 ? initLiabWeight.toFixed(2) : 0} x
{t('account:maint-health-contribution')}
{maintContribution > 0 ? maintAssetWeight.toFixed(2) : maintContribution < 0 ? maintLiabWeight.toFixed(2) : 0} x
{t('spot')}
{perp.market}