blockworks-foundation
/
lev-stake-sol
mirror of https://github.com/blockworks-foundation/lev-stake-sol.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

PnlUI

This commit is contained in:
Finn 2024-02-23 09:31:24 +00:00
parent e81a1defdb
commit b402252149
2 changed files with 27 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/Positions.tsx
View File

@ -55,9 +55,8 @@ const Positions = ({
return (
<>
<div className="mb-2 flex items-center justify-between rounded-lg border-2 border-th-fgd-1 bg-th-bkg-1 px-6 py-3.5">
<p className="font-medium">{`You have ${numberOfPositions} active position${
numberOfPositions !== 1 ? 's' : ''
}`}</p>
<p className="font-medium">{`You have ${numberOfPositions} active position${numberOfPositions !== 1 ? 's' : ''
}`}</p>
<Switch
checked={showInactivePositions}
onChange={(checked) => setShowInactivePositions(checked)}
@ -97,7 +96,7 @@ const PositionItem = ({
borrowBank: Bank | undefined
}) => {
const { group } = useMangoGroup()
const { stakeBalance, borrowBalance, bank, acct } = position
const { stakeBalance, borrowBalance, bank, pnlPerc, acct } = position
console.log(position.bank, borrowBank)
const handleAddOrManagePosition = (token: string) => {
@ -173,9 +172,22 @@ const PositionItem = ({
<div>
<p className="mb-1 text-th-fgd-4">Position Size</p>
<span className="text-xl font-bold text-th-fgd-1">
<FormatNumericValue value={stakeBalance} decimals={6} />{' '}
{formatTokenSymbol(bank.name)}
<FormatNumericValue value={stakeBalance * bank?.uiPrice} decimals={3} />{' '}
{'USDC'}
{' '}
<span className='text-s' style={{ color: pnlPerc >= 0 ? 'lightgreen' : 'red' }}>
(<FormatNumericValue value={pnlPerc} decimals={2} />%)
</span>
</span>
{bank.name != 'USDC' ?
<div className="text-m font-bold text-th-fgd-1">
<FormatNumericValue value={stakeBalance} decimals={3} />{' '}
{formatTokenSymbol(bank.name)}
</div>
:
<div className="text-m font-bold text-th-fgd-1">
</div>
}
</div>
<div>
<p className="mb-1 text-th-fgd-4">Est. APY</p>

12
hooks/usePositions.ts
View File

@ -2,6 +2,9 @@ import { useMemo } from 'react'
import { BORROW_TOKEN, STAKEABLE_TOKENS } from 'utils/constants'
import useStakeAccounts from './useStakeAccounts'
import useMangoGroup from './useMangoGroup'
import {
toUiDecimalsForQuote,
} from '@blockworks-foundation/mango-v4'
export default function usePositions(showInactive = false) {
const { stakeAccounts } = useStakeAccounts()
@ -25,11 +28,14 @@ export default function usePositions(showInactive = false) {
const positions = []
for (const bank of banks) {
if (!bank) continue
if (!bank || !group) continue
const acct = stakeAccounts?.find((acc) => acc.getTokenBalanceUi(bank) > 0)
const price = acct ? bank.uiPrice : 0
const stakeBalance = acct ? acct.getTokenBalanceUi(bank) : 0
const pnl = acct ? toUiDecimalsForQuote(acct.getPnl(group).toNumber()) : 0
const pnlPerc = stakeBalance > 0 ? (100 * pnl)/(price * stakeBalance - pnl) : 0
const borrowBalance = acct && borrowBank ? acct.getTokenBalanceUi(borrowBank) : 0
positions.push({ borrowBalance, stakeBalance, bank, acct })
positions.push({ borrowBalance, stakeBalance, bank, pnl, pnlPerc, acct })
}
const sortedPositions = positions.sort(
(a, b) => b.stakeBalance - a.stakeBalance,
@ -37,7 +43,7 @@ export default function usePositions(showInactive = false) {
return showInactive
? sortedPositions
: sortedPositions.filter((pos) => pos.stakeBalance > 0)
}, [banks, showInactive, stakeAccounts, borrowBank])
}, [banks, showInactive, stakeAccounts, group, borrowBank])
return { borrowBank, positions }
}