mango-v4-ui/components/shared/HealthImpact.tsx

81 lines
2.3 KiB
TypeScript

import { HealthType } from '@blockworks-foundation/mango-v4'
import { ArrowRightIcon } from '@heroicons/react/20/solid'
import { PublicKey } from '@solana/web3.js'
import { useTranslation } from 'next-i18next'
import { useMemo } from 'react'
import mangoStore from '@store/mangoStore'
const HealthImpact = ({
uiAmount,
isDeposit,
mintPk,
}: {
uiAmount: number
isDeposit?: boolean
mintPk: PublicKey
}) => {
const { t } = useTranslation('common')
const group = mangoStore.getState().group
const mangoAccount = mangoStore((s) => s.mangoAccount.current)
const currentMaintHealth = useMemo(() => {
if (!group || !mangoAccount) return 0
return mangoAccount.getHealthRatioUi(group, HealthType.maint)
}, [mangoAccount])
const maintProjectedHealth = useMemo(() => {
const group = mangoStore.getState().group
if (!group || !mangoAccount) return 0
const uiTokenAmount = isDeposit ? uiAmount : uiAmount * -1
console.log('uiAmount')
console.log('uiTokenAmount', uiTokenAmount)
const projectedHealth =
mangoAccount.simHealthRatioWithTokenPositionUiChanges(
group,
[{ mintPk, uiTokenAmount }],
HealthType.maint
)
return projectedHealth! > 100
? 100
: projectedHealth! < 0
? 0
: Math.trunc(projectedHealth!)
}, [mangoAccount, mintPk, uiAmount, isDeposit])
return (
<div className="flex justify-between">
<p>{t('health-impact')}</p>
<div className="flex items-center space-x-2 font-mono">
<p className="text-th-fgd-1">{currentMaintHealth}%</p>
<ArrowRightIcon className="h-4 w-4 text-th-fgd-4" />
<p
className={
maintProjectedHealth < 50 && maintProjectedHealth > 15
? 'text-th-orange'
: maintProjectedHealth <= 15
? 'text-th-red'
: 'text-th-green'
}
>
{maintProjectedHealth}%{' '}
<span
className={`text-xs ${
maintProjectedHealth >= currentMaintHealth!
? 'text-th-green'
: 'text-th-red'
}`}
>
({maintProjectedHealth >= currentMaintHealth! ? '+' : ''}
{maintProjectedHealth - currentMaintHealth!}%)
</span>
</p>
</div>
</div>
)
}
export default HealthImpact