c4f8f4eab0
* MP-1757: implemented the WalletProvider and connect buttons * tidy: tidy up the search * MP-1691: moved modals outside of the DOM * MP-1691: changed CreditManager into AccountDetails * fix: fixed the naming * MP-1691: UX approvements * MP-1691: global confirm and delete modal added * fix: merged the credit-account and wallet branch * MP-1757: added the status store * fix: updated the store interaction * MP-1757: major cleanup of stores * tidy: format
85 lines
2.7 KiB
TypeScript
85 lines
2.7 KiB
TypeScript
import BigNumber from 'bignumber.js'
|
|
import { useEffect } from 'react'
|
|
|
|
import { BorrowCapacity } from 'components/BorrowCapacity'
|
|
import Button from 'components/Button'
|
|
import FormattedNumber from 'components/FormattedNumber'
|
|
import Gauge from 'components/Gauge'
|
|
import Text from 'components/Text'
|
|
import useCreateCreditAccount from 'hooks/mutations/useCreateCreditAccount'
|
|
import useAccountStats from 'hooks/useAccountStats'
|
|
import useCreditAccounts from 'hooks/useCreditAccounts'
|
|
import { useModalStore } from 'stores'
|
|
import { chain } from 'utils/chains'
|
|
import { formatValue } from 'utils/formatters'
|
|
|
|
const AccountStatus = () => {
|
|
const accountStats = useAccountStats()
|
|
const { data: creditAccountsList } = useCreditAccounts()
|
|
const { mutate: createCreditAccount, isLoading: isLoadingCreate } = useCreateCreditAccount()
|
|
useEffect(() => {
|
|
useModalStore.setState({ createAccountModal: isLoadingCreate })
|
|
}, [isLoadingCreate])
|
|
|
|
const hasCreditAccounts = creditAccountsList && creditAccountsList.length > 0
|
|
|
|
if (!hasCreditAccounts) {
|
|
return (
|
|
<Button className='my-3 mr-6' onClick={() => createCreditAccount()}>
|
|
Create Credit Account
|
|
</Button>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className='flex w-[400px] items-center justify-between gap-3 border-l border-l-white/20 px-3 py-3'>
|
|
{accountStats && (
|
|
<>
|
|
<Text size='sm' className='flex flex-grow text-white'>
|
|
<FormattedNumber
|
|
amount={BigNumber(accountStats.netWorth)
|
|
.dividedBy(10 ** chain.stakeCurrency.coinDecimals)
|
|
.toNumber()}
|
|
animate
|
|
prefix='$: '
|
|
/>
|
|
</Text>
|
|
|
|
<Gauge
|
|
value={accountStats.currentLeverage / accountStats.maxLeverage}
|
|
label='Lvg'
|
|
tooltip={
|
|
<Text size='sm'>
|
|
Current Leverage:{' '}
|
|
{formatValue(accountStats.currentLeverage, 0, 2, true, false, 'x')}
|
|
<br />
|
|
Max Leverage: {formatValue(accountStats.maxLeverage, 0, 2, true, false, 'x')}
|
|
</Text>
|
|
}
|
|
/>
|
|
|
|
<Gauge
|
|
value={accountStats.risk}
|
|
label='Risk'
|
|
tooltip={
|
|
<Text size='sm'>
|
|
Current Risk: {formatValue(accountStats.risk * 100, 0, 2, true, false, '%')}
|
|
</Text>
|
|
}
|
|
/>
|
|
<BorrowCapacity
|
|
limit={80}
|
|
max={100}
|
|
balance={100 - accountStats.health * 100}
|
|
barHeight='16px'
|
|
hideValues={true}
|
|
showTitle={false}
|
|
className='w-[140px]'
|
|
/>
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
export default AccountStatus
|