table components
This commit is contained in:
saml33
parent
c962cbf6ab
commit
21202ed274
|
|
@ -5,19 +5,15 @@ import { useMemo, useState } from 'react'
|
|||
import { HealthType } from '@blockworks-foundation/mango-v4'
|
||||
import {
|
||||
ArrowLeftIcon,
|
||||
ChevronDownIcon,
|
||||
QuestionMarkCircleIcon,
|
||||
} from '@heroicons/react/20/solid'
|
||||
import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
|
||||
import Tooltip from '@components/shared/Tooltip'
|
||||
import TokenLogo from '@components/shared/TokenLogo'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import MarketLogos from '@components/trade/MarketLogos'
|
||||
import FormatNumericValue from '@components/shared/FormatNumericValue'
|
||||
import mangoStore from '@store/mangoStore'
|
||||
import { useViewport } from 'hooks/useViewport'
|
||||
import { breakpoints } from 'utils/theme'
|
||||
import { Disclosure, Transition } from '@headlessui/react'
|
||||
import TokensHealthTable from './TokensHealthTable'
|
||||
import MarketsHealthTable from './MarketsHealthTable'
|
||||
|
||||
export interface HealthContribution {
|
||||
asset: string
|
||||
|
|
@ -35,8 +31,6 @@ const HealthContributions = ({ hideView }: { hideView: () => void }) => {
|
|||
const [maintActiveIndex, setMaintActiveIndex] = useState<number | undefined>(
|
||||
undefined
|
||||
)
|
||||
const { width } = useViewport()
|
||||
const isMobile = width ? width < breakpoints.sm : false
|
||||
|
||||
const [initHealthContributions, maintHealthContributions] = useMemo(() => {
|
||||
if (!group || !mangoAccount) return [[], []]
|
||||
|
|
@ -228,547 +222,25 @@ const HealthContributions = ({ hideView }: { hideView: () => void }) => {
|
|||
{maintHealthTokens.length ? (
|
||||
<div className="border-t border-th-bkg-3 pt-6">
|
||||
<h2 className="mb-1 px-6 text-lg">{t('tokens')}</h2>
|
||||
{!isMobile ? (
|
||||
<Table>
|
||||
<thead>
|
||||
<TrHead>
|
||||
<Th className="text-left">{t('token')}</Th>
|
||||
<Th className="text-right">{t('trade:notional')}</Th>
|
||||
<Th>
|
||||
<div className="flex justify-end">
|
||||
<Tooltip content={t('account:tooltip-init-health')}>
|
||||
<span className="tooltip-underline">
|
||||
{t('account:init-health-contributions')}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</Th>
|
||||
<Th>
|
||||
<div className="flex justify-end">
|
||||
<Tooltip content={t('account:tooltip-maint-health')}>
|
||||
<span className="tooltip-underline">
|
||||
{t('account:maint-health-contributions')}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</Th>
|
||||
</TrHead>
|
||||
</thead>
|
||||
<tbody>
|
||||
{maintHealthTokens
|
||||
.sort((a, b) => b.contribution - a.contribution)
|
||||
.map((cont) => {
|
||||
const { asset, contribution, isAsset } = cont
|
||||
const bank = group.banksMapByName.get(asset)?.[0]
|
||||
|
||||
let initAssetWeight = 0
|
||||
let initLiabWeight = 0
|
||||
let maintAssetWeight = 0
|
||||
let maintLiabWeight = 0
|
||||
|
||||
let balance = 0
|
||||
|
||||
if (bank) {
|
||||
initAssetWeight = bank
|
||||
.scaledInitAssetWeight(bank.price)
|
||||
.toNumber()
|
||||
initLiabWeight = bank
|
||||
.scaledInitLiabWeight(bank.price)
|
||||
.toNumber()
|
||||
maintAssetWeight = bank.maintAssetWeight.toNumber()
|
||||
maintLiabWeight = bank.maintLiabWeight.toNumber()
|
||||
|
||||
balance = mangoAccount.getTokenBalanceUi(bank)
|
||||
}
|
||||
|
||||
const assetOrLiabMultiplier = isAsset ? 1 : -1
|
||||
|
||||
const initContribution =
|
||||
(initHealthTokens.find((cont) => cont.asset === asset)
|
||||
?.contribution || 0) * assetOrLiabMultiplier
|
||||
|
||||
const maintContribution =
|
||||
contribution * assetOrLiabMultiplier
|
||||
|
||||
return (
|
||||
<TrBody
|
||||
key={asset}
|
||||
className="cursor-pointer md:hover:bg-th-bkg-2"
|
||||
onClick={() => handleLegendClick(cont)}
|
||||
onMouseEnter={() => handleLegendMouseEnter(cont)}
|
||||
onMouseLeave={handleLegendMouseLeave}
|
||||
>
|
||||
<Td>
|
||||
<div className="flex items-center">
|
||||
<div className="mr-2.5 flex flex-shrink-0 items-center">
|
||||
<TokenLogo bank={bank} />
|
||||
</div>
|
||||
<p className="font-body">{asset}</p>
|
||||
</div>
|
||||
</Td>
|
||||
<Td className="text-right">
|
||||
{bank ? (
|
||||
<p>
|
||||
<FormatNumericValue
|
||||
value={balance * bank.uiPrice}
|
||||
decimals={2}
|
||||
isUsd
|
||||
/>{' '}
|
||||
<span className={`block text-th-fgd-4`}>
|
||||
<FormatNumericValue
|
||||
value={balance}
|
||||
decimals={bank.mintDecimals}
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
) : (
|
||||
'–'
|
||||
)}
|
||||
</Td>
|
||||
<Td>
|
||||
<div className="text-right">
|
||||
<p>
|
||||
<FormatNumericValue
|
||||
value={initContribution}
|
||||
decimals={2}
|
||||
isUsd
|
||||
/>
|
||||
</p>
|
||||
<p className="text-th-fgd-3">
|
||||
{initContribution > 0
|
||||
? initAssetWeight.toFixed(2)
|
||||
: initContribution < 0
|
||||
? initLiabWeight.toFixed(2)
|
||||
: 0}
|
||||
x
|
||||
</p>
|
||||
</div>
|
||||
</Td>
|
||||
<Td>
|
||||
<div className="text-right">
|
||||
<p>
|
||||
<FormatNumericValue
|
||||
value={maintContribution}
|
||||
decimals={2}
|
||||
isUsd
|
||||
/>
|
||||
</p>
|
||||
<p className="text-th-fgd-3">
|
||||
{maintContribution > 0
|
||||
? maintAssetWeight.toFixed(2)
|
||||
: maintContribution < 0
|
||||
? maintLiabWeight.toFixed(2)
|
||||
: 0}
|
||||
x
|
||||
</p>
|
||||
</div>
|
||||
</Td>
|
||||
</TrBody>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</Table>
|
||||
) : (
|
||||
<div className="mt-3 border-y border-th-bkg-3">
|
||||
{maintHealthTokens
|
||||
.sort((a, b) => b.contribution - a.contribution)
|
||||
.map((cont) => {
|
||||
const { asset, contribution, isAsset } = cont
|
||||
const bank = group.banksMapByName.get(asset)?.[0]
|
||||
|
||||
let initAssetWeight = 0
|
||||
let initLiabWeight = 0
|
||||
let maintAssetWeight = 0
|
||||
let maintLiabWeight = 0
|
||||
|
||||
let balance = 0
|
||||
|
||||
if (bank) {
|
||||
initAssetWeight = bank
|
||||
.scaledInitAssetWeight(bank.price)
|
||||
.toNumber()
|
||||
initLiabWeight = bank
|
||||
.scaledInitLiabWeight(bank.price)
|
||||
.toNumber()
|
||||
maintAssetWeight = bank.maintAssetWeight.toNumber()
|
||||
maintLiabWeight = bank.maintLiabWeight.toNumber()
|
||||
|
||||
balance = mangoAccount.getTokenBalanceUi(bank)
|
||||
}
|
||||
|
||||
const assetOrLiabMultiplier = isAsset ? 1 : -1
|
||||
|
||||
const initContribution =
|
||||
(initHealthTokens.find((cont) => cont.asset === asset)
|
||||
?.contribution || 0) * assetOrLiabMultiplier
|
||||
|
||||
const maintContribution = contribution * assetOrLiabMultiplier
|
||||
|
||||
return (
|
||||
<Disclosure key={asset}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Disclosure.Button
|
||||
className={`w-full border-t border-th-bkg-3 p-4 text-left first:border-t-0 focus:outline-none`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<div className="mr-2.5">
|
||||
<TokenLogo bank={bank} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-th-fgd-1">{asset}</p>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
||||
/>
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
<Transition
|
||||
enter="transition ease-in duration-200"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
>
|
||||
<Disclosure.Panel>
|
||||
<div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
|
||||
<div className="col-span-1">
|
||||
<p className="text-xs text-th-fgd-3">
|
||||
{t('trade:notional')}
|
||||
</p>
|
||||
<p>
|
||||
{bank ? (
|
||||
<span className="font-mono text-th-fgd-2">
|
||||
<FormatNumericValue
|
||||
value={balance * bank.uiPrice}
|
||||
decimals={2}
|
||||
isUsd
|
||||
/>{' '}
|
||||
<span className={`block text-th-fgd-4`}>
|
||||
<FormatNumericValue
|
||||
value={balance}
|
||||
decimals={bank.mintDecimals}
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
) : (
|
||||
'–'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<p className="text-xs text-th-fgd-3">
|
||||
<Tooltip
|
||||
content={t('account:tooltip-init-health')}
|
||||
>
|
||||
<span className="tooltip-underline">
|
||||
{t('account:init-health-contributions')}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</p>
|
||||
<p className="font-mono text-th-fgd-2">
|
||||
<FormatNumericValue
|
||||
value={initContribution}
|
||||
decimals={2}
|
||||
isUsd
|
||||
/>
|
||||
</p>
|
||||
<p className="font-mono text-th-fgd-3">
|
||||
{initContribution > 0
|
||||
? initAssetWeight.toFixed(2)
|
||||
: initContribution < 0
|
||||
? initLiabWeight.toFixed(2)
|
||||
: 0}
|
||||
x
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<p className="text-xs text-th-fgd-3">
|
||||
<Tooltip
|
||||
content={t(
|
||||
'account:tooltip-maint-health'
|
||||
)}
|
||||
>
|
||||
<span className="tooltip-underline">
|
||||
{t(
|
||||
'account:maint-health-contributions'
|
||||
)}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</p>
|
||||
<p className="font-mono text-th-fgd-2">
|
||||
<FormatNumericValue
|
||||
value={maintContribution}
|
||||
decimals={2}
|
||||
isUsd
|
||||
/>
|
||||
</p>
|
||||
<p className="font-mono text-th-fgd-3">
|
||||
{maintContribution > 0
|
||||
? maintAssetWeight.toFixed(2)
|
||||
: maintContribution < 0
|
||||
? maintLiabWeight.toFixed(2)
|
||||
: 0}
|
||||
x
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
<TokensHealthTable
|
||||
initTokens={initHealthTokens}
|
||||
maintTokens={maintHealthTokens}
|
||||
handleLegendClick={handleLegendClick}
|
||||
handleLegendMouseEnter={handleLegendMouseEnter}
|
||||
handleLegendMouseLeave={handleLegendMouseLeave}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
{maintHealthMarkets.length ? (
|
||||
<div className="pt-6">
|
||||
<h2 className="mb-1 px-6 text-lg">{t('markets')}</h2>
|
||||
{!isMobile ? (
|
||||
<Table>
|
||||
<thead>
|
||||
<TrHead>
|
||||
<Th className="text-left">{t('market')}</Th>
|
||||
<Th>
|
||||
<div className="flex justify-end">
|
||||
<Tooltip content={t('account:tooltip-init-health')}>
|
||||
<span className="tooltip-underline">
|
||||
{t('account:init-health-contributions')}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</Th>
|
||||
<Th>
|
||||
<div className="flex justify-end">
|
||||
<Tooltip content={t('account:tooltip-maint-health')}>
|
||||
<span className="tooltip-underline">
|
||||
{t('account:maint-health-contributions')}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</Th>
|
||||
</TrHead>
|
||||
</thead>
|
||||
<tbody>
|
||||
{maintHealthMarkets
|
||||
.sort((a, b) => b.contribution - a.contribution)
|
||||
.map((cont) => {
|
||||
const { asset, contribution, isAsset } = cont
|
||||
const market = group.getSerum3MarketByName(asset)
|
||||
const bank = group.banksMapByTokenIndex.get(
|
||||
market.baseTokenIndex
|
||||
)?.[0]
|
||||
|
||||
let initAssetWeight = 0
|
||||
let initLiabWeight = 0
|
||||
let maintAssetWeight = 0
|
||||
let maintLiabWeight = 0
|
||||
|
||||
if (bank) {
|
||||
initAssetWeight = bank
|
||||
.scaledInitAssetWeight(bank.price)
|
||||
.toNumber()
|
||||
initLiabWeight = bank
|
||||
.scaledInitLiabWeight(bank.price)
|
||||
.toNumber()
|
||||
maintAssetWeight = bank.maintAssetWeight.toNumber()
|
||||
maintLiabWeight = bank.maintLiabWeight.toNumber()
|
||||
}
|
||||
|
||||
const assetOrLiabMultiplier = isAsset ? 1 : -1
|
||||
|
||||
const initContribution =
|
||||
(initHealthMarkets.find((cont) => cont.asset === asset)
|
||||
?.contribution || 0) * assetOrLiabMultiplier
|
||||
|
||||
const maintContribution =
|
||||
contribution * assetOrLiabMultiplier
|
||||
|
||||
return (
|
||||
<TrBody key={asset}>
|
||||
<Td>
|
||||
<div className="flex items-center">
|
||||
<MarketLogos market={market} />
|
||||
<p className="font-body">{asset}</p>
|
||||
</div>
|
||||
</Td>
|
||||
<Td>
|
||||
<div className="text-right">
|
||||
<p>
|
||||
<FormatNumericValue
|
||||
value={initContribution}
|
||||
decimals={2}
|
||||
isUsd
|
||||
/>
|
||||
</p>
|
||||
<p className="text-th-fgd-3">
|
||||
{initContribution > 0
|
||||
? initAssetWeight.toFixed(2)
|
||||
: initContribution < 0
|
||||
? initLiabWeight.toFixed(2)
|
||||
: 0}
|
||||
x
|
||||
</p>
|
||||
</div>
|
||||
</Td>
|
||||
<Td>
|
||||
<div className="text-right">
|
||||
<p>
|
||||
<FormatNumericValue
|
||||
value={maintContribution}
|
||||
decimals={2}
|
||||
isUsd
|
||||
/>
|
||||
</p>
|
||||
<p className="text-th-fgd-3">
|
||||
{maintContribution > 0
|
||||
? maintAssetWeight.toFixed(2)
|
||||
: maintContribution < 0
|
||||
? maintLiabWeight.toFixed(2)
|
||||
: 0}
|
||||
x
|
||||
</p>
|
||||
</div>
|
||||
</Td>
|
||||
</TrBody>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</Table>
|
||||
) : (
|
||||
<div className="mt-3 border-y border-th-bkg-3">
|
||||
{maintHealthMarkets
|
||||
.sort((a, b) => b.contribution - a.contribution)
|
||||
.map((cont) => {
|
||||
const { asset, contribution, isAsset } = cont
|
||||
const market = group.getSerum3MarketByName(asset)
|
||||
const bank = group.banksMapByTokenIndex.get(
|
||||
market.baseTokenIndex
|
||||
)?.[0]
|
||||
|
||||
let initAssetWeight = 0
|
||||
let initLiabWeight = 0
|
||||
let maintAssetWeight = 0
|
||||
let maintLiabWeight = 0
|
||||
|
||||
if (bank) {
|
||||
initAssetWeight = bank
|
||||
.scaledInitAssetWeight(bank.price)
|
||||
.toNumber()
|
||||
initLiabWeight = bank
|
||||
.scaledInitLiabWeight(bank.price)
|
||||
.toNumber()
|
||||
maintAssetWeight = bank.maintAssetWeight.toNumber()
|
||||
maintLiabWeight = bank.maintLiabWeight.toNumber()
|
||||
}
|
||||
|
||||
const assetOrLiabMultiplier = isAsset ? 1 : -1
|
||||
|
||||
const initContribution =
|
||||
(initHealthMarkets.find((cont) => cont.asset === asset)
|
||||
?.contribution || 0) * assetOrLiabMultiplier
|
||||
|
||||
const maintContribution = contribution * assetOrLiabMultiplier
|
||||
|
||||
return (
|
||||
<Disclosure key={asset}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Disclosure.Button
|
||||
className={`w-full border-t border-th-bkg-3 p-4 text-left first:border-t-0 focus:outline-none`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<MarketLogos market={market} />
|
||||
<div>
|
||||
<p className="text-th-fgd-1">{asset}</p>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
||||
/>
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
<Transition
|
||||
enter="transition ease-in duration-200"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
>
|
||||
<Disclosure.Panel>
|
||||
<div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
|
||||
<div className="col-span-1">
|
||||
<p className="text-xs text-th-fgd-3">
|
||||
<Tooltip
|
||||
content={t('account:tooltip-init-health')}
|
||||
>
|
||||
<span className="tooltip-underline">
|
||||
{t('account:init-health-contributions')}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</p>
|
||||
<p className="font-mono text-th-fgd-2">
|
||||
<FormatNumericValue
|
||||
value={initContribution}
|
||||
decimals={2}
|
||||
isUsd
|
||||
/>
|
||||
</p>
|
||||
<p className="font-mono text-th-fgd-3">
|
||||
{initContribution > 0
|
||||
? initAssetWeight.toFixed(2)
|
||||
: initContribution < 0
|
||||
? initLiabWeight.toFixed(2)
|
||||
: 0}
|
||||
x
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<p className="text-xs text-th-fgd-3">
|
||||
<Tooltip
|
||||
content={t(
|
||||
'account:tooltip-maint-health'
|
||||
)}
|
||||
>
|
||||
<span className="tooltip-underline">
|
||||
{t(
|
||||
'account:maint-health-contributions'
|
||||
)}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</p>
|
||||
<p className="font-mono text-th-fgd-2">
|
||||
<FormatNumericValue
|
||||
value={maintContribution}
|
||||
decimals={2}
|
||||
isUsd
|
||||
/>
|
||||
</p>
|
||||
<p className="font-mono text-th-fgd-3">
|
||||
{maintContribution > 0
|
||||
? maintAssetWeight.toFixed(2)
|
||||
: maintContribution < 0
|
||||
? maintLiabWeight.toFixed(2)
|
||||
: 0}
|
||||
x
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
<MarketsHealthTable
|
||||
initMarkets={initHealthMarkets}
|
||||
maintMarkets={maintHealthMarkets}
|
||||
handleLegendClick={handleLegendClick}
|
||||
handleLegendMouseEnter={handleLegendMouseEnter}
|
||||
handleLegendMouseLeave={handleLegendMouseLeave}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,276 @@
|
|||
import FormatNumericValue from '@components/shared/FormatNumericValue'
|
||||
import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
|
||||
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 { HealthContribution } from './HealthContributions'
|
||||
import useMangoGroup from 'hooks/useMangoGroup'
|
||||
import useMangoAccount from 'hooks/useMangoAccount'
|
||||
import { useViewport } from 'hooks/useViewport'
|
||||
import { breakpoints } from 'utils/theme'
|
||||
import { MouseEventHandler } from 'react'
|
||||
import MarketLogos from '@components/trade/MarketLogos'
|
||||
|
||||
const MarketsHealthTable = ({
|
||||
initMarkets,
|
||||
maintMarkets,
|
||||
handleLegendClick,
|
||||
handleLegendMouseEnter,
|
||||
handleLegendMouseLeave,
|
||||
}: {
|
||||
initMarkets: HealthContribution[]
|
||||
maintMarkets: HealthContribution[]
|
||||
handleLegendClick: (cont: HealthContribution) => void
|
||||
handleLegendMouseEnter: (cont: HealthContribution) => void
|
||||
handleLegendMouseLeave: MouseEventHandler
|
||||
}) => {
|
||||
const { t } = useTranslation(['common', 'account', 'trade'])
|
||||
const { group } = useMangoGroup()
|
||||
const { mangoAccount } = useMangoAccount()
|
||||
const { width } = useViewport()
|
||||
const isMobile = width ? width < breakpoints.sm : false
|
||||
return group && mangoAccount ? (
|
||||
!isMobile ? (
|
||||
<Table>
|
||||
<thead>
|
||||
<TrHead>
|
||||
<Th className="text-left">{t('market')}</Th>
|
||||
<Th>
|
||||
<div className="flex justify-end">
|
||||
<Tooltip content={t('account:tooltip-init-health')}>
|
||||
<span className="tooltip-underline">
|
||||
{t('account:init-health-contribution')}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</Th>
|
||||
<Th>
|
||||
<div className="flex justify-end">
|
||||
<Tooltip content={t('account:tooltip-maint-health')}>
|
||||
<span className="tooltip-underline">
|
||||
{t('account:maint-health-contribution')}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</Th>
|
||||
</TrHead>
|
||||
</thead>
|
||||
<tbody>
|
||||
{maintMarkets
|
||||
.sort((a, b) => b.contribution - a.contribution)
|
||||
.map((cont) => {
|
||||
const { asset, contribution, isAsset } = cont
|
||||
const market = group.getSerum3MarketByName(asset)
|
||||
const bank = group.banksMapByTokenIndex.get(
|
||||
market.baseTokenIndex
|
||||
)?.[0]
|
||||
|
||||
let initAssetWeight = 0
|
||||
let initLiabWeight = 0
|
||||
let maintAssetWeight = 0
|
||||
let maintLiabWeight = 0
|
||||
|
||||
if (bank) {
|
||||
initAssetWeight = bank
|
||||
.scaledInitAssetWeight(bank.price)
|
||||
.toNumber()
|
||||
initLiabWeight = bank
|
||||
.scaledInitLiabWeight(bank.price)
|
||||
.toNumber()
|
||||
maintAssetWeight = bank.maintAssetWeight.toNumber()
|
||||
maintLiabWeight = bank.maintLiabWeight.toNumber()
|
||||
}
|
||||
|
||||
const assetOrLiabMultiplier = isAsset ? 1 : -1
|
||||
|
||||
const initContribution =
|
||||
(initMarkets.find((cont) => cont.asset === asset)
|
||||
?.contribution || 0) * assetOrLiabMultiplier
|
||||
|
||||
const maintContribution = contribution * assetOrLiabMultiplier
|
||||
|
||||
return (
|
||||
<TrBody
|
||||
key={asset}
|
||||
className="cursor-pointer md:hover:bg-th-bkg-2"
|
||||
onClick={() => handleLegendClick(cont)}
|
||||
onMouseEnter={() => handleLegendMouseEnter(cont)}
|
||||
onMouseLeave={handleLegendMouseLeave}
|
||||
>
|
||||
<Td>
|
||||
<div className="flex items-center">
|
||||
<MarketLogos market={market} />
|
||||
<p className="font-body">{asset}</p>
|
||||
</div>
|
||||
</Td>
|
||||
<Td>
|
||||
<div className="text-right">
|
||||
<p>
|
||||
<FormatNumericValue
|
||||
value={initContribution}
|
||||
decimals={2}
|
||||
isUsd
|
||||
/>
|
||||
</p>
|
||||
<p className="text-th-fgd-3">
|
||||
{initContribution > 0
|
||||
? initAssetWeight.toFixed(2)
|
||||
: initContribution < 0
|
||||
? initLiabWeight.toFixed(2)
|
||||
: 0}
|
||||
x
|
||||
</p>
|
||||
</div>
|
||||
</Td>
|
||||
<Td>
|
||||
<div className="text-right">
|
||||
<p>
|
||||
<FormatNumericValue
|
||||
value={maintContribution}
|
||||
decimals={2}
|
||||
isUsd
|
||||
/>
|
||||
</p>
|
||||
<p className="text-th-fgd-3">
|
||||
{maintContribution > 0
|
||||
? maintAssetWeight.toFixed(2)
|
||||
: maintContribution < 0
|
||||
? maintLiabWeight.toFixed(2)
|
||||
: 0}
|
||||
x
|
||||
</p>
|
||||
</div>
|
||||
</Td>
|
||||
</TrBody>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</Table>
|
||||
) : (
|
||||
<div className="mt-3 border-y border-th-bkg-3">
|
||||
{maintMarkets
|
||||
.sort((a, b) => b.contribution - a.contribution)
|
||||
.map((cont) => {
|
||||
const { asset, contribution, isAsset } = cont
|
||||
const market = group.getSerum3MarketByName(asset)
|
||||
const bank = group.banksMapByTokenIndex.get(
|
||||
market.baseTokenIndex
|
||||
)?.[0]
|
||||
|
||||
let initAssetWeight = 0
|
||||
let initLiabWeight = 0
|
||||
let maintAssetWeight = 0
|
||||
let maintLiabWeight = 0
|
||||
|
||||
if (bank) {
|
||||
initAssetWeight = bank
|
||||
.scaledInitAssetWeight(bank.price)
|
||||
.toNumber()
|
||||
initLiabWeight = bank.scaledInitLiabWeight(bank.price).toNumber()
|
||||
maintAssetWeight = bank.maintAssetWeight.toNumber()
|
||||
maintLiabWeight = bank.maintLiabWeight.toNumber()
|
||||
}
|
||||
|
||||
const assetOrLiabMultiplier = isAsset ? 1 : -1
|
||||
|
||||
const initContribution =
|
||||
(initMarkets.find((cont) => cont.asset === asset)?.contribution ||
|
||||
0) * assetOrLiabMultiplier
|
||||
|
||||
const maintContribution = contribution * assetOrLiabMultiplier
|
||||
|
||||
return (
|
||||
<Disclosure key={asset}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Disclosure.Button
|
||||
className={`w-full border-t border-th-bkg-3 p-4 text-left first:border-t-0 focus:outline-none`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<MarketLogos market={market} />
|
||||
<div>
|
||||
<p className="text-th-fgd-1">{asset}</p>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
||||
/>
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
<Transition
|
||||
enter="transition ease-in duration-200"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
>
|
||||
<Disclosure.Panel>
|
||||
<div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
|
||||
<div className="col-span-1">
|
||||
<p className="text-xs text-th-fgd-3">
|
||||
<Tooltip
|
||||
content={t('account:tooltip-init-health')}
|
||||
>
|
||||
<span className="tooltip-underline">
|
||||
{t('account:init-health-contribution')}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</p>
|
||||
<p className="font-mono text-th-fgd-2">
|
||||
<FormatNumericValue
|
||||
value={initContribution}
|
||||
decimals={2}
|
||||
isUsd
|
||||
/>
|
||||
</p>
|
||||
<p className="font-mono text-th-fgd-3">
|
||||
{initContribution > 0
|
||||
? initAssetWeight.toFixed(2)
|
||||
: initContribution < 0
|
||||
? initLiabWeight.toFixed(2)
|
||||
: 0}
|
||||
x
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<p className="text-xs text-th-fgd-3">
|
||||
<Tooltip
|
||||
content={t('account:tooltip-maint-health')}
|
||||
>
|
||||
<span className="tooltip-underline">
|
||||
{t('account:maint-health-contribution')}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</p>
|
||||
<p className="font-mono text-th-fgd-2">
|
||||
<FormatNumericValue
|
||||
value={maintContribution}
|
||||
decimals={2}
|
||||
isUsd
|
||||
/>
|
||||
</p>
|
||||
<p className="font-mono text-th-fgd-3">
|
||||
{maintContribution > 0
|
||||
? maintAssetWeight.toFixed(2)
|
||||
: maintContribution < 0
|
||||
? maintLiabWeight.toFixed(2)
|
||||
: 0}
|
||||
x
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
) : null
|
||||
}
|
||||
|
||||
export default MarketsHealthTable
|
||||
|
|
@ -0,0 +1,326 @@
|
|||
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 { HealthContribution } from './HealthContributions'
|
||||
import useMangoGroup from 'hooks/useMangoGroup'
|
||||
import useMangoAccount from 'hooks/useMangoAccount'
|
||||
import { useViewport } from 'hooks/useViewport'
|
||||
import { breakpoints } from 'utils/theme'
|
||||
import { MouseEventHandler } from 'react'
|
||||
|
||||
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 { width } = useViewport()
|
||||
const isMobile = width ? width < breakpoints.sm : false
|
||||
return group && mangoAccount ? (
|
||||
!isMobile ? (
|
||||
<Table>
|
||||
<thead>
|
||||
<TrHead>
|
||||
<Th className="text-left">{t('token')}</Th>
|
||||
<Th className="text-right">{t('trade:notional')}</Th>
|
||||
<Th>
|
||||
<div className="flex justify-end">
|
||||
<Tooltip content={t('account:tooltip-init-health')}>
|
||||
<span className="tooltip-underline">
|
||||
{t('account:init-health-contribution')}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</Th>
|
||||
<Th>
|
||||
<div className="flex justify-end">
|
||||
<Tooltip content={t('account:tooltip-maint-health')}>
|
||||
<span className="tooltip-underline">
|
||||
{t('account:maint-health-contribution')}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</Th>
|
||||
</TrHead>
|
||||
</thead>
|
||||
<tbody>
|
||||
{maintTokens
|
||||
.sort((a, b) => b.contribution - a.contribution)
|
||||
.map((cont) => {
|
||||
const { asset, contribution, isAsset } = cont
|
||||
const bank = group.banksMapByName.get(asset)?.[0]
|
||||
|
||||
let initAssetWeight = 0
|
||||
let initLiabWeight = 0
|
||||
let maintAssetWeight = 0
|
||||
let maintLiabWeight = 0
|
||||
|
||||
let balance = 0
|
||||
|
||||
if (bank) {
|
||||
initAssetWeight = bank
|
||||
.scaledInitAssetWeight(bank.price)
|
||||
.toNumber()
|
||||
initLiabWeight = bank
|
||||
.scaledInitLiabWeight(bank.price)
|
||||
.toNumber()
|
||||
maintAssetWeight = bank.maintAssetWeight.toNumber()
|
||||
maintLiabWeight = bank.maintLiabWeight.toNumber()
|
||||
|
||||
balance = mangoAccount.getTokenBalanceUi(bank)
|
||||
}
|
||||
|
||||
const assetOrLiabMultiplier = isAsset ? 1 : -1
|
||||
|
||||
const initContribution =
|
||||
(initTokens.find((cont) => cont.asset === asset)
|
||||
?.contribution || 0) * assetOrLiabMultiplier
|
||||
|
||||
const maintContribution = contribution * assetOrLiabMultiplier
|
||||
|
||||
return (
|
||||
<TrBody
|
||||
key={asset}
|
||||
className="cursor-pointer md:hover:bg-th-bkg-2"
|
||||
onClick={() => handleLegendClick(cont)}
|
||||
onMouseEnter={() => handleLegendMouseEnter(cont)}
|
||||
onMouseLeave={handleLegendMouseLeave}
|
||||
>
|
||||
<Td>
|
||||
<div className="flex items-center">
|
||||
<div className="mr-2.5 flex flex-shrink-0 items-center">
|
||||
<TokenLogo bank={bank} />
|
||||
</div>
|
||||
<p className="font-body">{asset}</p>
|
||||
</div>
|
||||
</Td>
|
||||
<Td className="text-right">
|
||||
{bank ? (
|
||||
<p>
|
||||
<FormatNumericValue
|
||||
value={balance * bank.uiPrice}
|
||||
decimals={2}
|
||||
isUsd
|
||||
/>{' '}
|
||||
<span className={`block text-th-fgd-4`}>
|
||||
<FormatNumericValue
|
||||
value={balance}
|
||||
decimals={bank.mintDecimals}
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
) : (
|
||||
'–'
|
||||
)}
|
||||
</Td>
|
||||
<Td>
|
||||
<div className="text-right">
|
||||
<p>
|
||||
<FormatNumericValue
|
||||
value={initContribution}
|
||||
decimals={2}
|
||||
isUsd
|
||||
/>
|
||||
</p>
|
||||
<p className="text-th-fgd-3">
|
||||
{initContribution > 0
|
||||
? initAssetWeight.toFixed(2)
|
||||
: initContribution < 0
|
||||
? initLiabWeight.toFixed(2)
|
||||
: 0}
|
||||
x
|
||||
</p>
|
||||
</div>
|
||||
</Td>
|
||||
<Td>
|
||||
<div className="text-right">
|
||||
<p>
|
||||
<FormatNumericValue
|
||||
value={maintContribution}
|
||||
decimals={2}
|
||||
isUsd
|
||||
/>
|
||||
</p>
|
||||
<p className="text-th-fgd-3">
|
||||
{maintContribution > 0
|
||||
? maintAssetWeight.toFixed(2)
|
||||
: maintContribution < 0
|
||||
? maintLiabWeight.toFixed(2)
|
||||
: 0}
|
||||
x
|
||||
</p>
|
||||
</div>
|
||||
</Td>
|
||||
</TrBody>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</Table>
|
||||
) : (
|
||||
<div className="mt-3 border-y border-th-bkg-3">
|
||||
{maintTokens
|
||||
.sort((a, b) => b.contribution - a.contribution)
|
||||
.map((cont) => {
|
||||
const { asset, contribution, isAsset } = cont
|
||||
const bank = group.banksMapByName.get(asset)?.[0]
|
||||
|
||||
let initAssetWeight = 0
|
||||
let initLiabWeight = 0
|
||||
let maintAssetWeight = 0
|
||||
let maintLiabWeight = 0
|
||||
|
||||
let balance = 0
|
||||
|
||||
if (bank) {
|
||||
initAssetWeight = bank
|
||||
.scaledInitAssetWeight(bank.price)
|
||||
.toNumber()
|
||||
initLiabWeight = bank.scaledInitLiabWeight(bank.price).toNumber()
|
||||
maintAssetWeight = bank.maintAssetWeight.toNumber()
|
||||
maintLiabWeight = bank.maintLiabWeight.toNumber()
|
||||
|
||||
balance = mangoAccount.getTokenBalanceUi(bank)
|
||||
}
|
||||
|
||||
const assetOrLiabMultiplier = isAsset ? 1 : -1
|
||||
|
||||
const initContribution =
|
||||
(initTokens.find((cont) => cont.asset === asset)?.contribution ||
|
||||
0) * assetOrLiabMultiplier
|
||||
|
||||
const maintContribution = contribution * assetOrLiabMultiplier
|
||||
|
||||
return (
|
||||
<Disclosure key={asset}>
|
||||
{({ open }) => (
|
||||
<>
|
||||
<Disclosure.Button
|
||||
className={`w-full border-t border-th-bkg-3 p-4 text-left first:border-t-0 focus:outline-none`}
|
||||
>
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center">
|
||||
<div className="mr-2.5">
|
||||
<TokenLogo bank={bank} />
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-th-fgd-1">{asset}</p>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
||||
/>
|
||||
</div>
|
||||
</Disclosure.Button>
|
||||
<Transition
|
||||
enter="transition ease-in duration-200"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
>
|
||||
<Disclosure.Panel>
|
||||
<div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
|
||||
<div className="col-span-1">
|
||||
<p className="text-xs text-th-fgd-3">
|
||||
{t('trade:notional')}
|
||||
</p>
|
||||
<p>
|
||||
{bank ? (
|
||||
<span className="font-mono text-th-fgd-2">
|
||||
<FormatNumericValue
|
||||
value={balance * bank.uiPrice}
|
||||
decimals={2}
|
||||
isUsd
|
||||
/>{' '}
|
||||
<span className={`block text-th-fgd-4`}>
|
||||
<FormatNumericValue
|
||||
value={balance}
|
||||
decimals={bank.mintDecimals}
|
||||
/>
|
||||
</span>
|
||||
</span>
|
||||
) : (
|
||||
'–'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<p className="text-xs text-th-fgd-3">
|
||||
<Tooltip
|
||||
content={t('account:tooltip-init-health')}
|
||||
>
|
||||
<span className="tooltip-underline">
|
||||
{t('account:init-health-contribution')}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</p>
|
||||
<p className="font-mono text-th-fgd-2">
|
||||
<FormatNumericValue
|
||||
value={initContribution}
|
||||
decimals={2}
|
||||
isUsd
|
||||
/>
|
||||
</p>
|
||||
<p className="font-mono text-th-fgd-3">
|
||||
{initContribution > 0
|
||||
? initAssetWeight.toFixed(2)
|
||||
: initContribution < 0
|
||||
? initLiabWeight.toFixed(2)
|
||||
: 0}
|
||||
x
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<p className="text-xs text-th-fgd-3">
|
||||
<Tooltip
|
||||
content={t('account:tooltip-maint-health')}
|
||||
>
|
||||
<span className="tooltip-underline">
|
||||
{t('account:maint-health-contribution')}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</p>
|
||||
<p className="font-mono text-th-fgd-2">
|
||||
<FormatNumericValue
|
||||
value={maintContribution}
|
||||
decimals={2}
|
||||
isUsd
|
||||
/>
|
||||
</p>
|
||||
<p className="font-mono text-th-fgd-3">
|
||||
{maintContribution > 0
|
||||
? maintAssetWeight.toFixed(2)
|
||||
: maintContribution < 0
|
||||
? maintLiabWeight.toFixed(2)
|
||||
: 0}
|
||||
x
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
) : null
|
||||
}
|
||||
|
||||
export default TokensHealthTable
|
||||
|
|
@ -6,9 +6,11 @@
|
|||
"export": "Export {{dataType}}",
|
||||
"funding-chart": "Funding Chart",
|
||||
"health-contributions": "Health Contributions",
|
||||
"init-health-contribution": "Init Health Contribution",
|
||||
"init-health-contributions": "Init Health Contributions",
|
||||
"liabilities": "Liabilities",
|
||||
"lifetime-volume": "Lifetime Trade Volume",
|
||||
"maint-health-contribution": "Maint Health Contribution",
|
||||
"maint-health-contributions": "Maint Health Contributions",
|
||||
"no-data": "No data to display",
|
||||
"no-pnl-history": "No PnL History",
|
||||
|
|
|
|||
|
|
@ -6,9 +6,11 @@
|
|||
"export": "Export {{dataType}}",
|
||||
"funding-chart": "Funding Chart",
|
||||
"health-contributions": "Health Contributions",
|
||||
"init-health-contribution": "Init Health Contribution",
|
||||
"init-health-contributions": "Init Health Contributions",
|
||||
"liabilities": "Liabilities",
|
||||
"lifetime-volume": "Lifetime Trade Volume",
|
||||
"maint-health-contribution": "Maint Health Contribution",
|
||||
"maint-health-contributions": "Maint Health Contributions",
|
||||
"no-data": "No data to display",
|
||||
"no-pnl-history": "No PnL History",
|
||||
|
|
|
|||
|
|
@ -6,9 +6,11 @@
|
|||
"export": "Export {{dataType}}",
|
||||
"funding-chart": "Funding Chart",
|
||||
"health-contributions": "Health Contributions",
|
||||
"init-health-contribution": "Init Health Contribution",
|
||||
"init-health-contributions": "Init Health Contributions",
|
||||
"liabilities": "Liabilities",
|
||||
"lifetime-volume": "Lifetime Trade Volume",
|
||||
"maint-health-contribution": "Maint Health Contribution",
|
||||
"maint-health-contributions": "Maint Health Contributions",
|
||||
"no-data": "No data to display",
|
||||
"no-pnl-history": "No PnL History",
|
||||
|
|
|
|||
|
|
@ -6,9 +6,11 @@
|
|||
"export": "Export {{dataType}}",
|
||||
"funding-chart": "Funding Chart",
|
||||
"health-contributions": "Health Contributions",
|
||||
"init-health-contribution": "Init Health Contribution",
|
||||
"init-health-contributions": "Init Health Contributions",
|
||||
"liabilities": "Liabilities",
|
||||
"lifetime-volume": "Lifetime Trade Volume",
|
||||
"maint-health-contribution": "Maint Health Contribution",
|
||||
"maint-health-contributions": "Maint Health Contributions",
|
||||
"no-data": "No data to display",
|
||||
"no-pnl-history": "No PnL History",
|
||||
|
|
|
|||
|
|
@ -6,9 +6,11 @@
|
|||
"export": "Export {{dataType}}",
|
||||
"funding-chart": "Funding Chart",
|
||||
"health-contributions": "Health Contributions",
|
||||
"init-health-contribution": "Init Health Contribution",
|
||||
"init-health-contributions": "Init Health Contributions",
|
||||
"liabilities": "Liabilities",
|
||||
"lifetime-volume": "Lifetime Trade Volume",
|
||||
"maint-health-contribution": "Maint Health Contribution",
|
||||
"maint-health-contributions": "Maint Health Contributions",
|
||||
"no-data": "No data to display",
|
||||
"no-pnl-history": "No PnL History",
|
||||
|
|
|
|||
Loading…
Reference in New Issue