simplify position cards
This commit is contained in:
parent
a4becb4f7c
commit
b4c362a9ed
|
@ -1,6 +1,6 @@
|
||||||
import useMangoGroup from 'hooks/useMangoGroup'
|
import useMangoGroup from 'hooks/useMangoGroup'
|
||||||
import { useMemo } from 'react'
|
import { useMemo } from 'react'
|
||||||
import { BORROW_TOKEN, SHOW_INACTIVE_POSITIONS_KEY } from 'utils/constants'
|
import { SHOW_INACTIVE_POSITIONS_KEY } from 'utils/constants'
|
||||||
import TokenLogo from './shared/TokenLogo'
|
import TokenLogo from './shared/TokenLogo'
|
||||||
import Button from './shared/Button'
|
import Button from './shared/Button'
|
||||||
import { formatTokenSymbol } from 'utils/tokens'
|
import { formatTokenSymbol } from 'utils/tokens'
|
||||||
|
@ -15,7 +15,6 @@ import {
|
||||||
} from '@blockworks-foundation/mango-v4'
|
} from '@blockworks-foundation/mango-v4'
|
||||||
import useBankRates from 'hooks/useBankRates'
|
import useBankRates from 'hooks/useBankRates'
|
||||||
import usePositions from 'hooks/usePositions'
|
import usePositions from 'hooks/usePositions'
|
||||||
import Tooltip from './shared/Tooltip'
|
|
||||||
|
|
||||||
const set = mangoStore.getState().set
|
const set = mangoStore.getState().set
|
||||||
|
|
||||||
|
@ -36,7 +35,7 @@ const getLiquidationRatio = (
|
||||||
return (
|
return (
|
||||||
(Math.abs(borrowBalance) * borrowBank.maintLiabWeight.toNumber()) /
|
(Math.abs(borrowBalance) * borrowBank.maintLiabWeight.toNumber()) /
|
||||||
(stakeBalance * stakeBank.maintAssetWeight.toNumber())
|
(stakeBalance * stakeBank.maintAssetWeight.toNumber())
|
||||||
).toFixed(3)
|
).toFixed(2)
|
||||||
}
|
}
|
||||||
|
|
||||||
const Positions = ({
|
const Positions = ({
|
||||||
|
@ -137,6 +136,8 @@ const PositionItem = ({
|
||||||
return [liqRatio, liqPriceChangePercentage.toFixed(2)]
|
return [liqRatio, liqPriceChangePercentage.toFixed(2)]
|
||||||
}, [bank, borrowBalance, borrowBank, stakeBalance])
|
}, [bank, borrowBalance, borrowBank, stakeBalance])
|
||||||
|
|
||||||
|
console.log('liq price change percentage', liqPriceChangePercentage)
|
||||||
|
|
||||||
const { estimatedNetAPY, stakeBankDepositRate } = useBankRates(
|
const { estimatedNetAPY, stakeBankDepositRate } = useBankRates(
|
||||||
bank.name,
|
bank.name,
|
||||||
leverage,
|
leverage,
|
||||||
|
@ -154,13 +155,7 @@ const PositionItem = ({
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<h3>{formatTokenSymbol(bank.name)}</h3>
|
<h3>{formatTokenSymbol(bank.name)}</h3>
|
||||||
{/* <span
|
<p>${bank.uiPrice.toFixed(2)}</p>
|
||||||
className={`text-sm ${
|
|
||||||
stakeBalance ? 'text-th-fgd-1' : 'text-th-fgd-4'
|
|
||||||
}`}
|
|
||||||
>
|
|
||||||
{stakeBalance ? 'Opened 2 weeks ago' : 'No Position'}
|
|
||||||
</span> */}
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Button onClick={() => handleAddOrManagePosition(bank.name)}>
|
<Button onClick={() => handleAddOrManagePosition(bank.name)}>
|
||||||
|
@ -178,26 +173,17 @@ const PositionItem = ({
|
||||||
decimals={2}
|
decimals={2}
|
||||||
/>{' '}
|
/>{' '}
|
||||||
{'USDC'}
|
{'USDC'}
|
||||||
{' '}
|
|
||||||
<span
|
|
||||||
className="text-s"
|
|
||||||
style={{ color: pnl >= 0 ? 'lightgreen' : 'red' }}
|
|
||||||
>
|
|
||||||
(<FormatNumericValue roundUp={true} value={pnl} decimals={2} />)
|
|
||||||
</span>
|
|
||||||
</span>
|
</span>
|
||||||
{bank.name != 'USDC' ? (
|
{bank.name !== 'USDC' ? (
|
||||||
<div className="text-m font-bold text-th-fgd-1">
|
<p className="text-th-fgd-4">
|
||||||
<FormatNumericValue
|
<FormatNumericValue
|
||||||
roundUp={true}
|
roundUp={true}
|
||||||
value={stakeBalance}
|
value={stakeBalance}
|
||||||
decimals={3}
|
decimals={3}
|
||||||
/>{' '}
|
/>{' '}
|
||||||
{formatTokenSymbol(bank.name)}
|
{formatTokenSymbol(bank.name)}
|
||||||
</div>
|
</p>
|
||||||
) : (
|
) : null}
|
||||||
<div className="text-m font-bold text-th-fgd-1"></div>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<p className="mb-1 text-th-fgd-4">Est. APY</p>
|
<p className="mb-1 text-th-fgd-4">Est. APY</p>
|
||||||
|
@ -205,9 +191,25 @@ const PositionItem = ({
|
||||||
<FormatNumericValue value={uiRate} decimals={2} />%
|
<FormatNumericValue value={uiRate} decimals={2} />%
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
{position.bank.name == 'USDC' ? (
|
<div>
|
||||||
<></>
|
<p className="mb-1 text-th-fgd-4">Total Earned</p>
|
||||||
) : (
|
<span
|
||||||
|
className={`text-xl font-bold ${
|
||||||
|
!stakeBalance
|
||||||
|
? 'text-th-fgd-4'
|
||||||
|
: pnl >= 0
|
||||||
|
? 'text-th-success'
|
||||||
|
: 'text-th-error'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
{stakeBalance || pnl ? (
|
||||||
|
<FormatNumericValue value={pnl} decimals={2} isUsd />
|
||||||
|
) : (
|
||||||
|
'–'
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
{position.bank.name == 'USDC' ? null : (
|
||||||
<>
|
<>
|
||||||
<div>
|
<div>
|
||||||
<p className="mb-1 text-th-fgd-4">Leverage</p>
|
<p className="mb-1 text-th-fgd-4">Leverage</p>
|
||||||
|
@ -215,28 +217,20 @@ const PositionItem = ({
|
||||||
{leverage ? leverage.toFixed(2) : 0.0}x
|
{leverage ? leverage.toFixed(2) : 0.0}x
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
{/* <div>
|
|
||||||
<p className="mb-1 text-th-fgd-4">Earned</p>
|
|
||||||
<span className="text-xl font-bold text-th-fgd-1">
|
|
||||||
{stakeBalance
|
|
||||||
? `X.XX ${formatTokenSymbol(bank.name)}`
|
|
||||||
: `0 ${formatTokenSymbol(bank.name)}`}
|
|
||||||
</span>
|
|
||||||
</div> */}
|
|
||||||
<div>
|
<div>
|
||||||
<p className="mb-1 text-th-fgd-4">Est. Liquidation Price</p>
|
<p className="mb-1 text-th-fgd-4">Est. Liquidation Price</p>
|
||||||
<div className="flex flex-wrap items-end">
|
<div className="flex flex-wrap items-end">
|
||||||
<span className="mr-2 whitespace-nowrap text-xl font-bold text-th-fgd-1">
|
<span className="mr-2 whitespace-nowrap text-xl font-bold text-th-fgd-1">
|
||||||
{liqRatio} {`${formatTokenSymbol(bank.name)}/${BORROW_TOKEN}`}
|
${liqRatio}
|
||||||
</span>
|
</span>
|
||||||
{liqPriceChangePercentage ? (
|
|
||||||
<Tooltip content="Estimated price change required for liquidation.">
|
|
||||||
<p className="tooltip-underline mb-0.5 text-th-fgd-4">
|
|
||||||
{liqPriceChangePercentage}%
|
|
||||||
</p>
|
|
||||||
</Tooltip>
|
|
||||||
) : null}
|
|
||||||
</div>
|
</div>
|
||||||
|
{/* {liqPriceChangePercentage ? (
|
||||||
|
<Tooltip content="Estimated price change required for liquidation.">
|
||||||
|
<p className="tooltip-underline mb-0.5 text-th-fgd-4">
|
||||||
|
{liqPriceChangePercentage}%
|
||||||
|
</p>
|
||||||
|
</Tooltip>
|
||||||
|
) : null} */}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
Loading…
Reference in New Issue