add leverage to account summary
This commit is contained in:
parent
d3d803daca
commit
cc2d32eced
|
@ -5,7 +5,7 @@ import {
|
||||||
} from '@blockworks-foundation/mango-v4'
|
} from '@blockworks-foundation/mango-v4'
|
||||||
import { formatDecimal } from '../../utils/numbers'
|
import { formatDecimal } from '../../utils/numbers'
|
||||||
import Button from '../shared/Button'
|
import Button from '../shared/Button'
|
||||||
import { useState } from 'react'
|
import { useMemo, useState } from 'react'
|
||||||
import DepositModal from '../modals/DepositModal'
|
import DepositModal from '../modals/DepositModal'
|
||||||
import WithdrawModal from '../modals/WithdrawModal'
|
import WithdrawModal from '../modals/WithdrawModal'
|
||||||
import { useTranslation } from 'next-i18next'
|
import { useTranslation } from 'next-i18next'
|
||||||
|
@ -13,6 +13,7 @@ import { ArrowDownTrayIcon } from '@heroicons/react/20/solid'
|
||||||
import { useWallet } from '@solana/wallet-adapter-react'
|
import { useWallet } from '@solana/wallet-adapter-react'
|
||||||
import HealthHeart from './HealthHeart'
|
import HealthHeart from './HealthHeart'
|
||||||
import { ExpandableMenuItem } from '../SideNav'
|
import { ExpandableMenuItem } from '../SideNav'
|
||||||
|
import Tooltip from '@components/shared/Tooltip'
|
||||||
|
|
||||||
const MangoAccountSummary = ({ collapsed }: { collapsed: boolean }) => {
|
const MangoAccountSummary = ({ collapsed }: { collapsed: boolean }) => {
|
||||||
const { t } = useTranslation('common')
|
const { t } = useTranslation('common')
|
||||||
|
@ -21,6 +22,15 @@ const MangoAccountSummary = ({ collapsed }: { collapsed: boolean }) => {
|
||||||
const [showDepositModal, setShowDepositModal] = useState(false)
|
const [showDepositModal, setShowDepositModal] = useState(false)
|
||||||
const [showWithdrawModal, setShowWithdrawModal] = useState(false)
|
const [showWithdrawModal, setShowWithdrawModal] = useState(false)
|
||||||
|
|
||||||
|
const leverage = useMemo(() => {
|
||||||
|
if (!mangoAccount) return 0
|
||||||
|
const liabsValue = mangoAccount.getLiabsValue(HealthType.init)!.toNumber()
|
||||||
|
const totalCollateral = mangoAccount
|
||||||
|
.getAssetsValue(HealthType.init)!
|
||||||
|
.toNumber()
|
||||||
|
return liabsValue / totalCollateral
|
||||||
|
}, [mangoAccount])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="mb-4 space-y-2">
|
<div className="mb-4 space-y-2">
|
||||||
|
@ -32,7 +42,7 @@ const MangoAccountSummary = ({ collapsed }: { collapsed: boolean }) => {
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p className="text-sm text-th-fgd-3">{t('account-value')}</p>
|
<p className="text-sm text-th-fgd-3">Net {t('account-value')}</p>
|
||||||
<p className="text-sm font-bold text-th-fgd-1">
|
<p className="text-sm font-bold text-th-fgd-1">
|
||||||
$
|
$
|
||||||
{mangoAccount
|
{mangoAccount
|
||||||
|
@ -71,6 +81,18 @@ const MangoAccountSummary = ({ collapsed }: { collapsed: boolean }) => {
|
||||||
: (0).toFixed(2)}
|
: (0).toFixed(2)}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
<div>
|
||||||
|
<p className="text-sm text-th-fgd-3">
|
||||||
|
<Tooltip
|
||||||
|
content={'Total position size divided by total collateral'}
|
||||||
|
>
|
||||||
|
Leverage
|
||||||
|
</Tooltip>
|
||||||
|
</p>
|
||||||
|
<p className="text-sm font-bold text-th-fgd-1">
|
||||||
|
{leverage.toFixed(2)}x
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="space-y-2">
|
<div className="space-y-2">
|
||||||
<Button
|
<Button
|
||||||
|
|
Loading…
Reference in New Issue