mobile, colors, more mouse events
This commit is contained in:
saml33
parent
854fdec3b5
commit
c962cbf6ab
|
|
@ -1,16 +1,23 @@
|
|||
// import { useTranslation } from 'next-i18next'
|
||||
import HealthContributionsChart from './HealthContributionsChart'
|
||||
import useMangoGroup from 'hooks/useMangoGroup'
|
||||
import useMangoAccount from 'hooks/useMangoAccount'
|
||||
import { useMemo } from 'react'
|
||||
import { useMemo, useState } from 'react'
|
||||
import { HealthType } from '@blockworks-foundation/mango-v4'
|
||||
import { ArrowLeftIcon } from '@heroicons/react/20/solid'
|
||||
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'
|
||||
|
||||
export interface HealthContribution {
|
||||
asset: string
|
||||
|
|
@ -22,12 +29,19 @@ const HealthContributions = ({ hideView }: { hideView: () => void }) => {
|
|||
const { t } = useTranslation(['common', 'account', 'trade'])
|
||||
const { group } = useMangoGroup()
|
||||
const { mangoAccount } = useMangoAccount()
|
||||
const [initActiveIndex, setInitActiveIndex] = useState<number | undefined>(
|
||||
undefined
|
||||
)
|
||||
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 [[], []]
|
||||
const init = mangoAccount
|
||||
.getHealthContributionPerAssetUi(group, HealthType.init)
|
||||
// .filter((asset) => Math.abs(asset.contribution) > 0.01)
|
||||
.map((item) => ({
|
||||
...item,
|
||||
contribution: Math.abs(item.contribution),
|
||||
|
|
@ -35,7 +49,6 @@ const HealthContributions = ({ hideView }: { hideView: () => void }) => {
|
|||
}))
|
||||
const maint = mangoAccount
|
||||
.getHealthContributionPerAssetUi(group, HealthType.maint)
|
||||
// .filter((asset) => Math.abs(asset.contribution) > 0.01)
|
||||
.map((item) => ({
|
||||
...item,
|
||||
contribution: Math.abs(item.contribution),
|
||||
|
|
@ -84,6 +97,79 @@ const HealthContributions = ({ hideView }: { hideView: () => void }) => {
|
|||
return [markets, tokens]
|
||||
}, [maintHealthContributions])
|
||||
|
||||
const handleLegendClick = (item: HealthContribution) => {
|
||||
const maintIndex = maintChartData.findIndex((d) => d.asset === item.asset)
|
||||
const initIndex = initChartData.findIndex((d) => d.asset === item.asset)
|
||||
setMaintActiveIndex(maintIndex)
|
||||
setInitActiveIndex(initIndex)
|
||||
}
|
||||
|
||||
const handleLegendMouseEnter = (item: HealthContribution) => {
|
||||
const maintIndex = maintChartData.findIndex((d) => d.asset === item.asset)
|
||||
const initIndex = initChartData.findIndex((d) => d.asset === item.asset)
|
||||
setMaintActiveIndex(maintIndex)
|
||||
setInitActiveIndex(initIndex)
|
||||
}
|
||||
|
||||
const handleLegendMouseLeave = () => {
|
||||
setInitActiveIndex(undefined)
|
||||
setMaintActiveIndex(undefined)
|
||||
}
|
||||
|
||||
const renderLegendLogo = (asset: string) => {
|
||||
const group = mangoStore.getState().group
|
||||
if (!group)
|
||||
return <QuestionMarkCircleIcon className="h-6 w-6 text-th-fgd-3" />
|
||||
const isSpotMarket = asset.includes('/')
|
||||
if (isSpotMarket) {
|
||||
const market = group.getSerum3MarketByName(asset)
|
||||
return market ? (
|
||||
<MarketLogos market={market} size="small" />
|
||||
) : (
|
||||
<QuestionMarkCircleIcon className="h-6 w-6 text-th-fgd-3" />
|
||||
)
|
||||
} else {
|
||||
const bank = group.banksMapByName.get(asset)?.[0]
|
||||
return bank ? (
|
||||
<div className="mr-1.5">
|
||||
<TokenLogo bank={bank} size={16} />
|
||||
</div>
|
||||
) : (
|
||||
<QuestionMarkCircleIcon className="h-6 w-6 text-th-fgd-3" />
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
const initChartData = useMemo(() => {
|
||||
if (!initHealthContributions.length) return []
|
||||
return initHealthContributions
|
||||
.filter((cont) => {
|
||||
if (cont.asset.includes('/')) {
|
||||
return cont.contribution > 0.01
|
||||
} else return cont
|
||||
})
|
||||
.sort((a, b) => {
|
||||
const aMultiplier = a.isAsset ? 1 : -1
|
||||
const bMultiplier = b.isAsset ? 1 : -1
|
||||
return b.contribution * bMultiplier - a.contribution * aMultiplier
|
||||
})
|
||||
}, [initHealthContributions])
|
||||
|
||||
const maintChartData = useMemo(() => {
|
||||
if (!maintHealthContributions.length) return []
|
||||
return maintHealthContributions
|
||||
.filter((cont) => {
|
||||
if (cont.asset.includes('/')) {
|
||||
return cont.contribution > 0.01
|
||||
} else return cont
|
||||
})
|
||||
.sort((a, b) => {
|
||||
const aMultiplier = a.isAsset ? 1 : -1
|
||||
const bMultiplier = b.isAsset ? 1 : -1
|
||||
return b.contribution * bMultiplier - a.contribution * aMultiplier
|
||||
})
|
||||
}, [maintHealthContributions])
|
||||
|
||||
return group && mangoAccount ? (
|
||||
<>
|
||||
<div className="hide-scroll flex h-14 items-center space-x-4 overflow-x-auto border-b border-th-bkg-3">
|
||||
|
|
@ -93,55 +179,197 @@ const HealthContributions = ({ hideView }: { hideView: () => void }) => {
|
|||
>
|
||||
<ArrowLeftIcon className="h-5 w-5" />
|
||||
</button>
|
||||
<h2 className="text-lg">{t('account:health-breakdown')}</h2>
|
||||
<h2 className="text-lg">{t('account:health-contributions')}</h2>
|
||||
</div>
|
||||
<div className="mx-auto grid max-w-[1140px] grid-cols-2 gap-8 p-6">
|
||||
<div className="mx-auto grid max-w-[1140px] grid-cols-2 gap-6 p-6 sm:gap-8">
|
||||
<div className="col-span-1 flex h-full flex-col items-center">
|
||||
<Tooltip content={t('account:tooltip-init-health')}>
|
||||
<h3 className="tooltip-underline mb-6 text-base">
|
||||
{t('account:init-health')}
|
||||
<h3 className="tooltip-underline text-xs sm:text-base">
|
||||
{t('account:init-health-contributions')}
|
||||
</h3>
|
||||
</Tooltip>
|
||||
<HealthContributionsChart data={initHealthContributions} />
|
||||
<HealthContributionsChart
|
||||
data={initChartData}
|
||||
activeIndex={initActiveIndex}
|
||||
setActiveIndex={setInitActiveIndex}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-1 flex flex-col items-center">
|
||||
<Tooltip content={t('account:tooltip-maint-health')}>
|
||||
<h3 className="tooltip-underline mb-6 text-base">
|
||||
{t('account:maint-health')}
|
||||
<h3 className="tooltip-underline text-xs sm:text-base">
|
||||
{t('account:maint-health-contributions')}
|
||||
</h3>
|
||||
</Tooltip>
|
||||
<HealthContributionsChart data={maintHealthContributions} />
|
||||
<HealthContributionsChart
|
||||
data={maintChartData}
|
||||
activeIndex={maintActiveIndex}
|
||||
setActiveIndex={setMaintActiveIndex}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-2 mx-auto flex max-w-[600px] flex-wrap justify-center space-x-4">
|
||||
{[...maintChartData]
|
||||
.sort((a, b) => b.contribution - a.contribution)
|
||||
.map((d, i) => {
|
||||
return (
|
||||
<div
|
||||
key={d.asset + i}
|
||||
className={`default-transition flex h-7 cursor-pointer items-center md:hover:text-th-active`}
|
||||
onClick={() => handleLegendClick(d)}
|
||||
onMouseEnter={() => handleLegendMouseEnter(d)}
|
||||
onMouseLeave={handleLegendMouseLeave}
|
||||
>
|
||||
{renderLegendLogo(d.asset)}
|
||||
<span className={`default-transition`}>{d.asset}</span>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
{maintHealthTokens.length ? (
|
||||
<div className="border-t border-th-bkg-3 py-6">
|
||||
<div className="border-t border-th-bkg-3 pt-6">
|
||||
<h2 className="mb-1 px-6 text-lg">{t('tokens')}</h2>
|
||||
<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')}
|
||||
</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')}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</Th>
|
||||
</TrHead>
|
||||
</thead>
|
||||
<tbody>
|
||||
{!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) => {
|
||||
|
|
@ -177,106 +405,243 @@ const HealthContributions = ({ hideView }: { hideView: () => void }) => {
|
|||
const maintContribution = contribution * assetOrLiabMultiplier
|
||||
|
||||
return (
|
||||
<TrBody key={asset}>
|
||||
<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}
|
||||
isUsd
|
||||
/>{' '}
|
||||
<span className={`block text-th-fgd-4`}>
|
||||
<FormatNumericValue
|
||||
value={balance}
|
||||
decimals={bank.mintDecimals}
|
||||
<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`}
|
||||
/>
|
||||
</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>
|
||||
</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>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
{maintHealthMarkets.length ? (
|
||||
<>
|
||||
<div className="pt-6">
|
||||
<h2 className="mb-1 px-6 text-lg">{t('markets')}</h2>
|
||||
<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')}
|
||||
</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')}
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</Th>
|
||||
</TrHead>
|
||||
</thead>
|
||||
<tbody>
|
||||
{!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) => {
|
||||
|
|
@ -311,57 +676,100 @@ const HealthContributions = ({ hideView }: { hideView: () => void }) => {
|
|||
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>
|
||||
<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>
|
||||
)
|
||||
})}
|
||||
</tbody>
|
||||
</Table>
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
) : null
|
||||
|
|
|
|||
|
|
@ -4,25 +4,32 @@ import {
|
|||
Cell,
|
||||
Pie,
|
||||
PieChart,
|
||||
// ResponsiveContainer,
|
||||
ResponsiveContainer,
|
||||
Sector,
|
||||
SectorProps,
|
||||
} from 'recharts'
|
||||
import { COLORS } from 'styles/colors'
|
||||
import { HealthContribution } from './HealthContributions'
|
||||
import { useMemo, useState } from 'react'
|
||||
import { useMemo } from 'react'
|
||||
import { formatCurrencyValue } from 'utils/numbers'
|
||||
import mangoStore from '@store/mangoStore'
|
||||
import { QuestionMarkCircleIcon } from '@heroicons/react/20/solid'
|
||||
import TokenLogo from '@components/shared/TokenLogo'
|
||||
import MarketLogos from '@components/trade/MarketLogos'
|
||||
import { useViewport } from 'hooks/useViewport'
|
||||
import { breakpoints } from 'utils/theme'
|
||||
|
||||
const HealthContributionsChart = ({ data }: { data: HealthContribution[] }) => {
|
||||
const HealthContributionsChart = ({
|
||||
data,
|
||||
activeIndex,
|
||||
setActiveIndex,
|
||||
}: {
|
||||
data: HealthContribution[]
|
||||
activeIndex: number | undefined
|
||||
setActiveIndex: (i: number | undefined) => void
|
||||
}) => {
|
||||
const { t } = useTranslation(['common', 'account'])
|
||||
const { theme } = useTheme()
|
||||
const [activeIndex, setActiveIndex] = useState<number | undefined>(undefined)
|
||||
const { width } = useViewport()
|
||||
const isMobile = width ? width < breakpoints.sm : false
|
||||
|
||||
const handleLegendClick = (entry: HealthContribution, index: number) => {
|
||||
const handleClick = (index: number) => {
|
||||
setActiveIndex(index)
|
||||
}
|
||||
|
||||
|
|
@ -34,35 +41,26 @@ const HealthContributionsChart = ({ data }: { data: HealthContribution[] }) => {
|
|||
setActiveIndex(undefined)
|
||||
}
|
||||
|
||||
const pieSizes = { size: 240, outerRadius: 120, innerRadius: 96 }
|
||||
const pieSizes = isMobile
|
||||
? { size: 160, outerRadius: 80, innerRadius: 64 }
|
||||
: { size: 240, outerRadius: 120, innerRadius: 96 }
|
||||
const { size, outerRadius, innerRadius } = pieSizes
|
||||
|
||||
const filteredData = useMemo(() => {
|
||||
if (!data.length) return []
|
||||
return data
|
||||
.filter((cont) => cont.contribution > 0.01)
|
||||
.sort((a, b) => {
|
||||
const aMultiplier = a.isAsset ? 1 : -1
|
||||
const bMultiplier = b.isAsset ? 1 : -1
|
||||
return b.contribution * bMultiplier - a.contribution * aMultiplier
|
||||
})
|
||||
}, [data])
|
||||
|
||||
const [chartHeroAsset, chartHeroValue] = useMemo(() => {
|
||||
if (!filteredData.length) return [undefined, undefined]
|
||||
if (!data.length) return [undefined, undefined]
|
||||
if (activeIndex === undefined) {
|
||||
const value = filteredData.reduce((a, c) => {
|
||||
const value = data.reduce((a, c) => {
|
||||
const assetOrLiabMultiplier = c.isAsset ? 1 : -1
|
||||
return a + c.contribution * assetOrLiabMultiplier
|
||||
}, 0)
|
||||
return [t('total'), value]
|
||||
} else {
|
||||
const asset = filteredData[activeIndex]
|
||||
const asset = data[activeIndex]
|
||||
const assetOrLiabMultiplier = asset.isAsset ? 1 : -1
|
||||
const value = asset.contribution * assetOrLiabMultiplier
|
||||
return [asset.asset, value]
|
||||
}
|
||||
}, [activeIndex, filteredData])
|
||||
}, [activeIndex, data])
|
||||
|
||||
const renderActiveShape = ({
|
||||
cx,
|
||||
|
|
@ -78,8 +76,8 @@ const HealthContributionsChart = ({ data }: { data: HealthContribution[] }) => {
|
|||
<Sector
|
||||
cx={cx}
|
||||
cy={cy}
|
||||
innerRadius={innerRadius! - 4}
|
||||
outerRadius={outerRadius}
|
||||
innerRadius={innerRadius}
|
||||
outerRadius={outerRadius! + 4}
|
||||
startAngle={startAngle}
|
||||
endAngle={endAngle}
|
||||
fill={fill}
|
||||
|
|
@ -88,100 +86,61 @@ const HealthContributionsChart = ({ data }: { data: HealthContribution[] }) => {
|
|||
)
|
||||
}
|
||||
|
||||
const renderLegendLogo = (asset: string) => {
|
||||
const group = mangoStore.getState().group
|
||||
if (!group)
|
||||
return <QuestionMarkCircleIcon className="h-6 w-6 text-th-fgd-3" />
|
||||
const isSpotMarket = asset.includes('/')
|
||||
if (isSpotMarket) {
|
||||
const market = group.getSerum3MarketByName(asset)
|
||||
return market ? (
|
||||
<MarketLogos market={market} size="small" />
|
||||
) : (
|
||||
<QuestionMarkCircleIcon className="h-6 w-6 text-th-fgd-3" />
|
||||
)
|
||||
} else {
|
||||
const bank = group.banksMapByName.get(asset)?.[0]
|
||||
return bank ? (
|
||||
<div className="mr-1.5">
|
||||
<TokenLogo bank={bank} size={16} />
|
||||
</div>
|
||||
) : (
|
||||
<QuestionMarkCircleIcon className="h-6 w-6 text-th-fgd-3" />
|
||||
)
|
||||
}
|
||||
}
|
||||
return data.length ? (
|
||||
<div className="mt-4 flex h-full w-full flex-col items-center">
|
||||
<div className="relative h-[168px] w-[168px] sm:h-[248px] sm:w-[248px]">
|
||||
<ResponsiveContainer height="100%" width="100%">
|
||||
<PieChart width={size} height={size}>
|
||||
<Pie
|
||||
cursor="pointer"
|
||||
data={data}
|
||||
dataKey="contribution"
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
outerRadius={outerRadius}
|
||||
innerRadius={innerRadius}
|
||||
minAngle={2}
|
||||
startAngle={90}
|
||||
endAngle={450}
|
||||
activeIndex={activeIndex}
|
||||
activeShape={renderActiveShape}
|
||||
onClick={handleClick}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
{data.map((entry, index) => {
|
||||
const fillColor = entry.isAsset
|
||||
? COLORS.UP[theme]
|
||||
: COLORS.DOWN[theme]
|
||||
|
||||
return filteredData.length ? (
|
||||
<div className="flex h-full w-full flex-col items-center">
|
||||
<div className="relative">
|
||||
{/* <ResponsiveContainer width="100%" height="100%"> */}
|
||||
<PieChart width={size} height={size}>
|
||||
<Pie
|
||||
cursor="pointer"
|
||||
data={filteredData}
|
||||
dataKey="contribution"
|
||||
cx="50%"
|
||||
cy="50%"
|
||||
outerRadius={outerRadius}
|
||||
innerRadius={innerRadius}
|
||||
minAngle={2}
|
||||
startAngle={90}
|
||||
endAngle={450}
|
||||
paddingAngle={1}
|
||||
activeIndex={activeIndex}
|
||||
activeShape={renderActiveShape}
|
||||
onClick={handleLegendClick}
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
{filteredData.map((entry, index) => {
|
||||
const fillColor = entry.isAsset
|
||||
? COLORS.UP[theme]
|
||||
: COLORS.DOWN[theme]
|
||||
return (
|
||||
<Cell
|
||||
key={`cell-${index}`}
|
||||
fill={fillColor}
|
||||
opacity={1 / ((index + 1) / 2.5)}
|
||||
stroke="none"
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</Pie>
|
||||
</PieChart>
|
||||
{/* </ResponsiveContainer> */}
|
||||
{chartHeroValue ? (
|
||||
let opacity
|
||||
|
||||
if (entry.isAsset) {
|
||||
opacity = 1 - index * 0.1
|
||||
} else {
|
||||
opacity = 1 - Math.abs((index - (data.length - 1)) * 0.1)
|
||||
}
|
||||
return (
|
||||
<Cell
|
||||
key={`cell-${index}`}
|
||||
fill={fillColor}
|
||||
opacity={opacity}
|
||||
stroke="none"
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</Pie>
|
||||
</PieChart>
|
||||
</ResponsiveContainer>
|
||||
{chartHeroValue !== undefined ? (
|
||||
<div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-center">
|
||||
<p>{chartHeroAsset}</p>
|
||||
<span className="text-xl font-bold">
|
||||
{formatCurrencyValue(chartHeroValue)}
|
||||
<p className="text-xs sm:text-sm">{chartHeroAsset}</p>
|
||||
<span className="text-base font-bold sm:text-xl">
|
||||
{formatCurrencyValue(chartHeroValue, 2)}
|
||||
</span>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="mt-6 flex max-w-[420px] flex-wrap justify-center space-x-4">
|
||||
{filteredData.map((d, i) => (
|
||||
<div
|
||||
key={d.asset + i}
|
||||
className={`default-transition flex h-7 cursor-pointer items-center ${
|
||||
activeIndex !== undefined && activeIndex !== i ? 'opacity-60' : ''
|
||||
}`}
|
||||
onClick={() => handleLegendClick(d, i)}
|
||||
onMouseEnter={() => handleMouseEnter(d, i)}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
>
|
||||
{renderLegendLogo(d.asset)}
|
||||
<p
|
||||
className={`default-transition ${
|
||||
activeIndex === i ? 'text-th-fgd-1' : ''
|
||||
}`}
|
||||
>
|
||||
{d.asset}
|
||||
</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import dayjs from 'dayjs'
|
||||
import { ReactNode, forwardRef } from 'react'
|
||||
import { MouseEventHandler, ReactNode, forwardRef } from 'react'
|
||||
|
||||
export const Table = ({
|
||||
children,
|
||||
|
|
@ -43,15 +44,19 @@ interface TrBodyProps {
|
|||
children: ReactNode
|
||||
className?: string
|
||||
onClick?: () => void
|
||||
onMouseEnter?: (x: any) => void
|
||||
onMouseLeave?: MouseEventHandler
|
||||
}
|
||||
|
||||
export const TrBody = forwardRef<HTMLTableRowElement, TrBodyProps>(
|
||||
(props, ref) => {
|
||||
const { children, className, onClick } = props
|
||||
const { children, className, onClick, onMouseEnter, onMouseLeave } = props
|
||||
return (
|
||||
<tr
|
||||
className={`border-y border-th-bkg-3 ${className}`}
|
||||
onClick={onClick}
|
||||
onMouseEnter={onMouseEnter}
|
||||
onMouseLeave={onMouseLeave}
|
||||
ref={ref}
|
||||
>
|
||||
{children}
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
"daily-volume": "24h Volume",
|
||||
"export": "Export {{dataType}}",
|
||||
"funding-chart": "Funding Chart",
|
||||
"health-breakdown": "Health Breakdown",
|
||||
"init-health": "Init Health",
|
||||
"health-contributions": "Health Contributions",
|
||||
"init-health-contributions": "Init Health Contributions",
|
||||
"liabilities": "Liabilities",
|
||||
"lifetime-volume": "Lifetime Trade Volume",
|
||||
"maint-health": "Maint Health",
|
||||
"maint-health-contributions": "Maint Health Contributions",
|
||||
"no-data": "No data to display",
|
||||
"no-pnl-history": "No PnL History",
|
||||
"pnl-chart": "PnL Chart",
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
"daily-volume": "24h Volume",
|
||||
"export": "Export {{dataType}}",
|
||||
"funding-chart": "Funding Chart",
|
||||
"health-breakdown": "Health Breakdown",
|
||||
"init-health": "Init Health",
|
||||
"health-contributions": "Health Contributions",
|
||||
"init-health-contributions": "Init Health Contributions",
|
||||
"liabilities": "Liabilities",
|
||||
"lifetime-volume": "Lifetime Trade Volume",
|
||||
"maint-health": "Maint Health",
|
||||
"maint-health-contributions": "Maint Health Contributions",
|
||||
"no-data": "No data to display",
|
||||
"no-pnl-history": "No PnL History",
|
||||
"pnl-chart": "PnL Chart",
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
"daily-volume": "24h Volume",
|
||||
"export": "Export {{dataType}}",
|
||||
"funding-chart": "Funding Chart",
|
||||
"health-breakdown": "Health Breakdown",
|
||||
"init-health": "Init Health",
|
||||
"health-contributions": "Health Contributions",
|
||||
"init-health-contributions": "Init Health Contributions",
|
||||
"liabilities": "Liabilities",
|
||||
"lifetime-volume": "Lifetime Trade Volume",
|
||||
"maint-health": "Maint Health",
|
||||
"maint-health-contributions": "Maint Health Contributions",
|
||||
"no-data": "No data to display",
|
||||
"no-pnl-history": "No PnL History",
|
||||
"pnl-chart": "PnL Chart",
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
"daily-volume": "24h Volume",
|
||||
"export": "Export {{dataType}}",
|
||||
"funding-chart": "Funding Chart",
|
||||
"health-breakdown": "Health Breakdown",
|
||||
"init-health": "Init Health",
|
||||
"health-contributions": "Health Contributions",
|
||||
"init-health-contributions": "Init Health Contributions",
|
||||
"liabilities": "Liabilities",
|
||||
"lifetime-volume": "Lifetime Trade Volume",
|
||||
"maint-health": "Maint Health",
|
||||
"maint-health-contributions": "Maint Health Contributions",
|
||||
"no-data": "No data to display",
|
||||
"no-pnl-history": "No PnL History",
|
||||
"pnl-chart": "PnL Chart",
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
"daily-volume": "24h Volume",
|
||||
"export": "Export {{dataType}}",
|
||||
"funding-chart": "Funding Chart",
|
||||
"health-breakdown": "Health Breakdown",
|
||||
"init-health": "Init Health",
|
||||
"health-contributions": "Health Contributions",
|
||||
"init-health-contributions": "Init Health Contributions",
|
||||
"liabilities": "Liabilities",
|
||||
"lifetime-volume": "Lifetime Trade Volume",
|
||||
"maint-health": "Maint Health",
|
||||
"maint-health-contributions": "Maint Health Contributions",
|
||||
"no-data": "No data to display",
|
||||
"no-pnl-history": "No PnL History",
|
||||
"pnl-chart": "PnL Chart",
|
||||
|
|
|
|||
Loading…
Reference in New Issue