0ae70899e5
* tidy: refactor text * feat: added unstyled select * tidy: useToggle * tidy: useToggle * MP-2344: first unstyled version of Select * fix: fixed the build * MP-2344: progress on the Select * MP-2344: almost finished the Select * env: update wallet-connector * fix: relative imports * env: started adding osmo-test-5 contracts * refactor: rename stargate.ts to d.ts * env: adjusted tsconfig.json * feat: updated modals to use the dialog element * env: added mainnet config * env: enabled osmosis-1 * tidy: refactor * fix: fixed decimals * fix: fixed the NaN issue for ETH * fix: fixed price calculations for large decimals * feat: finished conversion to <dialog> * fix: fixed some logic issues * fix: layout fix * fix: fixed token slider and input * tidy: format * fix: added currentAccount hook * Mp 2345 withdraw from credit account flow (#180) * MP-2345: created the barebone for withdraw * MP-2351: changed the AccountHealth logic * MP-2345: enabled withdraw function * MP-2351: added animation to Accordion * fix: adjusted according to feedback * fix: reduced complexity * tidy: format * env: enabled osmo-test-5 support * feat: added USDC.n * env: updated dependencies * fix: hotfixed react-draggable * fix: fixed vault info
59 lines
1.6 KiB
TypeScript
59 lines
1.6 KiB
TypeScript
'use client'
|
|
import classNames from 'classnames'
|
|
|
|
import { Heart } from 'components/Icons'
|
|
import Text from 'components/Text'
|
|
import useStore from 'store'
|
|
|
|
interface Props {
|
|
health: number
|
|
hasLabel?: boolean
|
|
classNames?: string
|
|
}
|
|
|
|
export default function AccountHealth(props: Props) {
|
|
const enableAnimations = useStore((s) => s.enableAnimations)
|
|
const healthBarWidth = (props.health / 100) * 53
|
|
|
|
return (
|
|
<div className={classNames('flex items-center gap-1.5', props.classNames)}>
|
|
<div className='flex h-4 w-3 flex-auto'>
|
|
<Heart />
|
|
</div>
|
|
{props.hasLabel && (
|
|
<Text size='xs' className='pr-0.5 text-white/70'>
|
|
Health
|
|
</Text>
|
|
)}
|
|
<div className='flex flex-shrink'>
|
|
<svg width='100%' viewBox='0 0 53 4' fill='none' xmlns='http://www.w3.org/2000/svg'>
|
|
<rect width='53' height='4' rx='2' fill='white' fillOpacity='0.1' />
|
|
<rect
|
|
width={healthBarWidth}
|
|
height='4'
|
|
rx='2'
|
|
fill='url(#bar)'
|
|
style={{
|
|
transition: enableAnimations ? 'width 1s ease' : 'none',
|
|
}}
|
|
/>
|
|
<defs>
|
|
<linearGradient
|
|
id='bar'
|
|
x1='0%'
|
|
y1='0%'
|
|
x2='100%'
|
|
y2='0%'
|
|
gradientUnits='userSpaceOnUse'
|
|
>
|
|
<stop stopColor='#FF645F' />
|
|
<stop offset='0.5' stopColor='#FFB1AE' />
|
|
<stop offset='1' stopColor='#FFD5D3' />
|
|
</linearGradient>
|
|
</defs>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|