fb830c08cc
* update assets config and chains
* make clients dynamic
* feat: formatted ChainSelect
* fix infinite rerender on trade page
* feat: added NTRN icon
* fix: fixed ChainInfoID
* fix: fixed autoLendEnabled for NTRN
* fix: fixed the navigation and dependencies
* fix: fixed the pricefeed id
* fix: fixed the header menu
* fix: fixed the trading charts
* fix: fixed the healthbars
* fix: fixed naming of pion-1
* feast: updated xdefi image
* env: updated contracts
* make localStorage chain agnostic
* fix: made the selected chain persistant
* fix: fixed the wallet providers
* fix: updated auto connect
* fix: fixed auto connecting
* fix: added ChainSelect to focusMode
* store raw strings in localstorage
* 🔥 remnove tests
* update caching keys + disconnect wallet on change chain
* fix: fixed the chain select
* env: bumped version
---------
Co-authored-by: Bob van der Helm <34470358+bobthebuidlr@users.noreply.github.com>
72 lines
2.0 KiB
TypeScript
72 lines
2.0 KiB
TypeScript
import { ReactElement, useMemo } from 'react'
|
|
|
|
import { CircularProgress } from 'components/CircularProgress'
|
|
import Text from 'components/Text'
|
|
import { Tooltip } from 'components/Tooltip'
|
|
import { BN } from 'utils/helpers'
|
|
|
|
interface Props {
|
|
health: number
|
|
healthFactor: number
|
|
children: ReactElement
|
|
}
|
|
|
|
function HealthTooltipContent({ health, healthFactor }: { health: number; healthFactor: number }) {
|
|
const healthStatus = useMemo(() => {
|
|
if (health > 30) return 'Healthy'
|
|
if (health > 10) return 'Attention'
|
|
if (health > 0 && health <= 10) return 'Close to Liquidation'
|
|
|
|
return 'Liquidation Risk'
|
|
}, [health])
|
|
|
|
if (healthFactor === 0)
|
|
return (
|
|
<div className='flex flex-wrap justify-center'>
|
|
<Text size='xs' className='w-full mb-1 text-center'>
|
|
Loading...
|
|
</Text>
|
|
<CircularProgress size={14} />
|
|
</div>
|
|
)
|
|
|
|
return (
|
|
<div className='flex flex-wrap justify-center w-20'>
|
|
<Text size='xs' className='text-center'>
|
|
Health: {health}%
|
|
</Text>
|
|
<Text size='2xs' className='mb-1 text-center'>
|
|
({healthStatus})
|
|
</Text>
|
|
<Text size='2xs' className='text-center text-white/70'>
|
|
Health Factor: {BN(healthFactor).toPrecision(4)}
|
|
</Text>
|
|
{health > 0 && health <= 10 && (
|
|
<Text size='2xs' className='mt-2 text-center text-info'>
|
|
A small price movement can cause your account to be become liquidatable!
|
|
</Text>
|
|
)}
|
|
{health === 0 && (
|
|
<Text size='2xs' className='mt-2 text-center text-martian-red'>
|
|
Your account is unhealthy and can be liquidated!
|
|
</Text>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default function HealthTooltip(props: Props) {
|
|
const { health, healthFactor, children } = props
|
|
|
|
return (
|
|
<Tooltip
|
|
type='info'
|
|
hideArrow={health <= 10}
|
|
className='flex items-center w-full'
|
|
content={<HealthTooltipContent health={health} healthFactor={healthFactor} />}
|
|
>
|
|
{children}
|
|
</Tooltip>
|
|
)
|
|
}
|