64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
import { HealthType } from '@blockworks-foundation/mango-v4'
|
||
import { ArrowRightIcon } from '@heroicons/react/20/solid'
|
||
import { useTranslation } from 'next-i18next'
|
||
import { useMemo } from 'react'
|
||
import mangoStore from '@store/mangoStore'
|
||
import Tooltip from './Tooltip'
|
||
import useMangoAccount from 'hooks/useMangoAccount'
|
||
|
||
const HealthImpact = ({
|
||
maintProjectedHealth,
|
||
small,
|
||
}: {
|
||
maintProjectedHealth: number
|
||
small?: boolean
|
||
}) => {
|
||
const { t } = useTranslation('common')
|
||
const group = mangoStore.getState().group
|
||
const { mangoAccount } = useMangoAccount()
|
||
|
||
const currentMaintHealth = useMemo(() => {
|
||
if (!group || !mangoAccount) return 0
|
||
return mangoAccount.getHealthRatioUi(group, HealthType.maint)
|
||
}, [mangoAccount])
|
||
|
||
return (
|
||
<div className="flex flex-wrap items-start justify-between">
|
||
<Tooltip content={t('health-tooltip')} delay={100}>
|
||
<p
|
||
className={`tooltip-underline mr-4 ${small ? 'text-xs' : 'text-sm'}`}
|
||
>
|
||
{t('health-impact')}
|
||
</p>
|
||
</Tooltip>
|
||
{currentMaintHealth ? (
|
||
<div className="flex items-center space-x-1.5 font-mono">
|
||
<p
|
||
className={`font-mono text-th-fgd-2 ${
|
||
small ? 'text-xs' : 'text-sm'
|
||
}`}
|
||
>
|
||
{currentMaintHealth}%
|
||
</p>
|
||
<ArrowRightIcon className="h-4 w-4 text-th-fgd-4" />
|
||
<p
|
||
className={`font-mono ${
|
||
maintProjectedHealth < 50 && maintProjectedHealth > 15
|
||
? 'text-th-warning'
|
||
: maintProjectedHealth <= 15
|
||
? 'text-th-down'
|
||
: 'text-th-up'
|
||
} ${small ? 'text-xs' : 'text-sm'}`}
|
||
>
|
||
{maintProjectedHealth}%
|
||
</p>
|
||
</div>
|
||
) : (
|
||
<span className="text-xs text-th-fgd-2">–</span>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default HealthImpact
|