2f7b266e6b
* MP-1674: replaced the logo and added dekstop only nav
* MP-1677: borrowCapacity implemented into the SubAccount Nav
* MP-1677: adjusted the SubAccount navigation
* M1677: fixed the button and SearchInput component
* MP-1674: fixed the NavLink component
* MP-1674: fixed the SubAccount navigation
* tidy: cleaning up the trading view
* MP-1674: added withdraw and funding functions
* MP-1674: worked on the AccountStats
* MP-1671: modal work
* MP-1647: improvised CreditAccount expander
* tidy: fixed the page structure
* MP-1758: finished the SearchInput layout
* MP-1759: updated the semicircle graphs
* MP-1759: SemiCircle to Gauge
* fix: implemented animated numbers
* tidy: refactor
* MP-1759: added Tooltip to the Gauge
* fix: replace animate={true} with animate
* fix: fixed the Gauge timing
* fix: updated the BorrowCapacity styles
* fix: renamed SubAccount to Account
* fix: Text should not be a button, Button should be
* tidy: format
* fix: Text no clicky
* fix: replaced all the Text appearances with onClick
81 lines
2.5 KiB
TypeScript
81 lines
2.5 KiB
TypeScript
import BigNumber from 'bignumber.js'
|
|
|
|
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 useAccountStats from 'hooks/useAccountStats'
|
|
import useCreditAccounts from 'hooks/useCreditAccounts'
|
|
import { chain } from 'utils/chains'
|
|
import { formatValue } from 'utils/formatters'
|
|
|
|
interface Props {
|
|
createCreditAccount: () => void
|
|
}
|
|
|
|
const AccountStatus = ({ createCreditAccount }: Props) => {
|
|
const accountStats = useAccountStats()
|
|
const { data: creditAccountsList, isLoading: isLoadingCreditAccounts } = useCreditAccounts()
|
|
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
|