2022-11-16 21:17:18 -08:00
|
|
|
import { PerpMarket } from '@blockworks-foundation/mango-v4'
|
|
|
|
import { LinkButton } from '@components/shared/Button'
|
2022-11-20 02:44:14 -08:00
|
|
|
import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
|
2023-01-03 03:06:37 -08:00
|
|
|
import { NoSymbolIcon } from '@heroicons/react/20/solid'
|
2022-11-01 06:10:08 -07:00
|
|
|
import mangoStore from '@store/mangoStore'
|
2023-01-03 18:06:00 -08:00
|
|
|
import useMangoAccount from 'hooks/useMangoAccount'
|
2022-11-20 12:32:38 -08:00
|
|
|
import useMangoGroup from 'hooks/useMangoGroup'
|
2022-11-20 12:20:27 -08:00
|
|
|
import useSelectedMarket from 'hooks/useSelectedMarket'
|
2022-11-01 06:10:08 -07:00
|
|
|
import { useTranslation } from 'next-i18next'
|
2022-12-03 13:19:12 -08:00
|
|
|
import {
|
2023-01-17 15:31:58 -08:00
|
|
|
formatDecimal,
|
2022-12-03 13:19:12 -08:00
|
|
|
formatFixedDecimals,
|
|
|
|
getDecimalCount,
|
|
|
|
numberFormat,
|
|
|
|
trimDecimals,
|
|
|
|
} from 'utils/numbers'
|
2022-12-14 13:24:08 -08:00
|
|
|
import { calculateLimitPriceForMarketOrder } from 'utils/tradeForm'
|
2022-11-01 06:10:08 -07:00
|
|
|
import PerpSideBadge from './PerpSideBadge'
|
2022-12-11 18:43:16 -08:00
|
|
|
import TableMarketName from './TableMarketName'
|
2022-11-01 06:10:08 -07:00
|
|
|
|
2022-10-31 12:11:34 -07:00
|
|
|
const PerpPositions = () => {
|
2022-11-01 06:10:08 -07:00
|
|
|
const { t } = useTranslation(['common', 'trade'])
|
2022-11-20 12:32:38 -08:00
|
|
|
const { group } = useMangoGroup()
|
2022-11-01 06:10:08 -07:00
|
|
|
const perpPositions = mangoStore((s) => s.mangoAccount.perpPositions)
|
2022-11-20 12:20:27 -08:00
|
|
|
const { selectedMarket } = useSelectedMarket()
|
2023-01-03 18:06:00 -08:00
|
|
|
const { mangoAccount } = useMangoAccount()
|
2022-11-16 21:17:18 -08:00
|
|
|
|
|
|
|
const handlePositionClick = (positionSize: number) => {
|
|
|
|
const tradeForm = mangoStore.getState().tradeForm
|
|
|
|
const set = mangoStore.getState().set
|
|
|
|
|
2022-12-14 12:54:25 -08:00
|
|
|
let price = Number(tradeForm.price)
|
2022-11-16 21:17:18 -08:00
|
|
|
if (tradeForm.tradeType === 'Market') {
|
|
|
|
const orderbook = mangoStore.getState().selectedMarket.orderbook
|
2022-12-14 13:24:08 -08:00
|
|
|
price = calculateLimitPriceForMarketOrder(
|
|
|
|
orderbook,
|
|
|
|
positionSize,
|
|
|
|
tradeForm.side
|
|
|
|
)
|
2022-11-16 21:17:18 -08:00
|
|
|
}
|
2022-11-20 15:35:59 -08:00
|
|
|
const newSide = positionSize > 0 ? 'sell' : 'buy'
|
2022-11-16 21:17:18 -08:00
|
|
|
|
2022-11-19 17:40:06 -08:00
|
|
|
set((s) => {
|
2022-11-20 15:35:59 -08:00
|
|
|
s.tradeForm.side = newSide
|
|
|
|
s.tradeForm.baseSize = positionSize.toString()
|
|
|
|
if (newSide === 'buy') {
|
|
|
|
s.tradeForm.quoteSize = (positionSize * price).toString()
|
|
|
|
} else {
|
|
|
|
s.tradeForm.quoteSize = (positionSize / price).toString()
|
|
|
|
}
|
2022-11-19 17:40:06 -08:00
|
|
|
})
|
2022-11-16 21:17:18 -08:00
|
|
|
}
|
2022-11-01 06:10:08 -07:00
|
|
|
|
|
|
|
if (!group) return null
|
|
|
|
|
2022-11-20 18:29:51 -08:00
|
|
|
const openPerpPositions = Object.values(perpPositions).filter((p) =>
|
|
|
|
p.basePositionLots.toNumber()
|
|
|
|
)
|
|
|
|
|
2023-01-03 18:06:00 -08:00
|
|
|
return mangoAccount && openPerpPositions.length ? (
|
|
|
|
<div>
|
|
|
|
<Table>
|
|
|
|
<thead>
|
|
|
|
<TrHead>
|
|
|
|
<Th className="text-left">{t('market')}</Th>
|
|
|
|
<Th className="text-right">{t('trade:side')}</Th>
|
|
|
|
<Th className="text-right">{t('trade:size')}</Th>
|
|
|
|
<Th className="text-right">{t('trade:notional')}</Th>
|
|
|
|
<Th className="text-right">{t('trade:entry-price')}</Th>
|
2023-01-17 15:31:58 -08:00
|
|
|
<Th className="text-right">Unsettled PnL</Th>
|
|
|
|
<Th className="text-right">PnL</Th>
|
2023-01-03 18:06:00 -08:00
|
|
|
</TrHead>
|
|
|
|
</thead>
|
|
|
|
<tbody>
|
|
|
|
{openPerpPositions.map((position) => {
|
|
|
|
const market = group.getPerpMarketByMarketIndex(
|
|
|
|
position.marketIndex
|
|
|
|
)
|
|
|
|
const basePosition = position.getBasePositionUi(market)
|
|
|
|
const trimmedBasePosition = trimDecimals(
|
|
|
|
basePosition,
|
|
|
|
getDecimalCount(market.minOrderSize)
|
|
|
|
)
|
|
|
|
const isSelectedMarket =
|
|
|
|
selectedMarket instanceof PerpMarket &&
|
|
|
|
selectedMarket.perpMarketIndex === position.marketIndex
|
2022-11-16 21:17:18 -08:00
|
|
|
|
2023-01-03 18:06:00 -08:00
|
|
|
if (!basePosition) return null
|
2022-11-20 18:29:51 -08:00
|
|
|
|
2023-01-17 15:31:58 -08:00
|
|
|
const unsettledPnl = position.getUnsettledPnlUi(group, market)
|
|
|
|
const cummulativePnl = position.cumulativePnlOverPositionLifetimeUi(
|
|
|
|
group,
|
|
|
|
market
|
|
|
|
)
|
2022-12-03 13:19:12 -08:00
|
|
|
|
2023-01-03 18:06:00 -08:00
|
|
|
return (
|
|
|
|
<TrBody key={`${position.marketIndex}`} className="my-1 p-2">
|
|
|
|
<Td>
|
|
|
|
<TableMarketName market={market} />
|
|
|
|
</Td>
|
|
|
|
<Td className="text-right">
|
|
|
|
<PerpSideBadge basePosition={basePosition} />
|
|
|
|
</Td>
|
2023-01-17 15:31:58 -08:00
|
|
|
<Td className="text-right font-mono">
|
2023-01-03 18:06:00 -08:00
|
|
|
<p className="flex justify-end">
|
|
|
|
{isSelectedMarket ? (
|
|
|
|
<LinkButton
|
|
|
|
onClick={() => handlePositionClick(trimmedBasePosition)}
|
|
|
|
>
|
|
|
|
{Math.abs(trimmedBasePosition)}
|
|
|
|
</LinkButton>
|
|
|
|
) : (
|
|
|
|
Math.abs(trimmedBasePosition)
|
|
|
|
)}
|
|
|
|
</p>
|
|
|
|
</Td>
|
|
|
|
<Td className="text-right font-mono">
|
|
|
|
<div>
|
|
|
|
$
|
|
|
|
{Math.abs(trimmedBasePosition * market._uiPrice).toFixed(2)}
|
|
|
|
</div>
|
|
|
|
</Td>
|
|
|
|
<Td className="text-right font-mono">
|
|
|
|
<div>
|
|
|
|
$
|
|
|
|
{numberFormat.format(
|
|
|
|
position.getAverageEntryPriceUi(market)
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</Td>
|
2023-01-17 15:31:58 -08:00
|
|
|
<Td className={`text-right font-mono`}>
|
|
|
|
<div>{formatDecimal(unsettledPnl, market.baseDecimals)}</div>
|
|
|
|
</Td>
|
2023-01-03 18:06:00 -08:00
|
|
|
<Td
|
|
|
|
className={`text-right font-mono ${
|
2023-01-17 15:31:58 -08:00
|
|
|
cummulativePnl > 0 ? 'text-th-up' : 'text-th-down'
|
2023-01-03 18:06:00 -08:00
|
|
|
}`}
|
|
|
|
>
|
2023-01-17 15:31:58 -08:00
|
|
|
<div>{formatFixedDecimals(cummulativePnl, true)}</div>
|
2023-01-03 18:06:00 -08:00
|
|
|
</Td>
|
|
|
|
</TrBody>
|
|
|
|
)
|
|
|
|
})}
|
|
|
|
</tbody>
|
|
|
|
</Table>
|
|
|
|
</div>
|
2022-11-04 06:14:50 -07:00
|
|
|
) : (
|
2023-01-03 18:06:00 -08:00
|
|
|
<div className="flex flex-col items-center p-8">
|
|
|
|
<NoSymbolIcon className="mb-2 h-6 w-6 text-th-fgd-4" />
|
|
|
|
<p>{t('trade:no-positions')}</p>
|
2022-11-04 06:14:50 -07:00
|
|
|
</div>
|
2022-10-31 12:11:34 -07:00
|
|
|
)
|
|
|
|
}
|
|
|
|
|
|
|
|
export default PerpPositions
|