2023-01-19 18:12:51 -08:00
|
|
|
|
import { PerpMarket, PerpPosition } from '@blockworks-foundation/mango-v4'
|
2023-02-26 19:09:31 -08:00
|
|
|
|
import { TwitterIcon } from '@components/icons/TwitterIcon'
|
|
|
|
|
import SharePositionModal from '@components/modals/SharePositionModal'
|
|
|
|
|
import Button, { IconButton, LinkButton } from '@components/shared/Button'
|
2023-01-19 17:45:08 -08:00
|
|
|
|
import ConnectEmptyState from '@components/shared/ConnectEmptyState'
|
2023-01-23 19:55:47 -08:00
|
|
|
|
import FormatNumericValue from '@components/shared/FormatNumericValue'
|
2022-11-20 02:44:14 -08:00
|
|
|
|
import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
|
2023-07-03 06:17:17 -07:00
|
|
|
|
import { ChevronDownIcon, NoSymbolIcon } from '@heroicons/react/20/solid'
|
2023-01-19 17:45:08 -08:00
|
|
|
|
import { useWallet } from '@solana/wallet-adapter-react'
|
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'
|
2023-02-12 18:46:41 -08:00
|
|
|
|
import useUnownedAccount from 'hooks/useUnownedAccount'
|
2023-02-12 20:03:11 -08:00
|
|
|
|
import { useViewport } from 'hooks/useViewport'
|
2022-11-01 06:10:08 -07:00
|
|
|
|
import { useTranslation } from 'next-i18next'
|
2023-08-04 00:20:58 -07:00
|
|
|
|
import { useCallback, useMemo, useState } from 'react'
|
2023-07-03 05:29:10 -07:00
|
|
|
|
import { floorToDecimal, getDecimalCount } from 'utils/numbers'
|
2023-02-12 20:03:11 -08:00
|
|
|
|
import { breakpoints } from 'utils/theme'
|
2022-12-14 13:24:08 -08:00
|
|
|
|
import { calculateLimitPriceForMarketOrder } from 'utils/tradeForm'
|
2023-01-19 18:12:51 -08:00
|
|
|
|
import MarketCloseModal from './MarketCloseModal'
|
2023-03-16 02:38:17 -07:00
|
|
|
|
import MarketLogos from './MarketLogos'
|
2022-12-11 18:43:16 -08:00
|
|
|
|
import TableMarketName from './TableMarketName'
|
2023-06-22 04:17:35 -07:00
|
|
|
|
import Tooltip from '@components/shared/Tooltip'
|
2023-06-26 19:43:15 -07:00
|
|
|
|
import { Disclosure, Transition } from '@headlessui/react'
|
2023-06-27 19:10:47 -07:00
|
|
|
|
import useOpenPerpPositions from 'hooks/useOpenPerpPositions'
|
2023-07-03 05:29:10 -07:00
|
|
|
|
import PnlTooltipContent from '@components/shared/PnlTooltipContent'
|
2023-07-03 06:17:17 -07:00
|
|
|
|
import PerpSideBadge from './PerpSideBadge'
|
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()
|
2023-01-19 18:12:51 -08:00
|
|
|
|
const [showMarketCloseModal, setShowMarketCloseModal] = useState(false)
|
|
|
|
|
const [positionToClose, setPositionToClose] = useState<PerpPosition | null>(
|
2023-07-21 11:47:53 -07:00
|
|
|
|
null,
|
2023-01-19 18:12:51 -08:00
|
|
|
|
)
|
2023-02-26 19:09:31 -08:00
|
|
|
|
const [showShareModal, setShowShareModal] = useState(false)
|
|
|
|
|
const [positionToShare, setPositionToShare] = useState<PerpPosition | null>(
|
2023-07-21 11:47:53 -07:00
|
|
|
|
null,
|
2023-02-26 19:09:31 -08:00
|
|
|
|
)
|
2023-06-27 19:10:47 -07:00
|
|
|
|
const openPerpPositions = useOpenPerpPositions()
|
2022-11-20 12:20:27 -08:00
|
|
|
|
const { selectedMarket } = useSelectedMarket()
|
2023-01-19 17:45:08 -08:00
|
|
|
|
const { connected } = useWallet()
|
2023-06-28 03:50:27 -07:00
|
|
|
|
const { mangoAccount } = useMangoAccount()
|
2023-04-08 03:56:39 -07:00
|
|
|
|
const { isUnownedAccount } = useUnownedAccount()
|
2023-02-12 20:03:11 -08:00
|
|
|
|
const { width } = useViewport()
|
|
|
|
|
const showTableView = width ? width > breakpoints.md : false
|
2022-11-16 21:17:18 -08:00
|
|
|
|
|
2023-08-09 11:49:32 -07:00
|
|
|
|
const totalPnlStats = useMemo(() => {
|
2023-08-04 00:20:58 -07:00
|
|
|
|
if (openPerpPositions.length && group !== undefined) {
|
2023-08-09 11:49:32 -07:00
|
|
|
|
const pnlByMarket = openPerpPositions.map((position) => {
|
|
|
|
|
const market = group.getPerpMarketByMarketIndex(position.marketIndex)
|
|
|
|
|
const basePosition = position.getBasePositionUi(market)
|
|
|
|
|
const avgEntryPrice = position.getAverageEntryPriceUi(market)
|
|
|
|
|
return {
|
|
|
|
|
unrealized: position.getUnRealizedPnlUi(market),
|
|
|
|
|
realized: position.getRealizedPnlUi(),
|
|
|
|
|
total: position.cumulativePnlOverPositionLifetimeUi(market),
|
|
|
|
|
unsettled: position.getUnsettledPnlUi(market),
|
|
|
|
|
averageEntryValue: Math.abs(basePosition) * avgEntryPrice,
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
const p = pnlByMarket.reduce((a, b) => {
|
|
|
|
|
return {
|
|
|
|
|
unrealized: a.unrealized + b.unrealized,
|
|
|
|
|
realized: a.realized + b.realized,
|
|
|
|
|
total: a.total + b.total,
|
|
|
|
|
unsettled: a.unsettled + b.unsettled,
|
|
|
|
|
averageEntryValue: a.averageEntryValue + b.averageEntryValue,
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
unrealized: p.unrealized,
|
|
|
|
|
realized: p.realized,
|
|
|
|
|
total: p.total,
|
|
|
|
|
unsettled: p.unsettled,
|
|
|
|
|
roe: (p.unrealized / p.averageEntryValue) * 100,
|
|
|
|
|
}
|
2023-08-04 00:20:58 -07:00
|
|
|
|
}
|
2023-08-09 11:49:32 -07:00
|
|
|
|
return { unrealized: 0, realized: 0, total: 0, unsettled: 0, roe: 0 }
|
2023-08-04 00:20:58 -07:00
|
|
|
|
}, [openPerpPositions, group])
|
|
|
|
|
|
2023-02-08 03:29:03 -08:00
|
|
|
|
const handlePositionClick = (positionSize: number, market: PerpMarket) => {
|
2022-11-16 21:17:18 -08:00
|
|
|
|
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,
|
2023-07-21 11:47:53 -07:00
|
|
|
|
tradeForm.side,
|
2022-12-14 13:24:08 -08:00
|
|
|
|
)
|
2022-11-16 21:17:18 -08:00
|
|
|
|
}
|
2022-11-20 15:35:59 -08:00
|
|
|
|
const newSide = positionSize > 0 ? 'sell' : 'buy'
|
2023-06-04 17:19:19 -07:00
|
|
|
|
const baseSize = Math.abs(positionSize)
|
2023-02-08 03:29:03 -08:00
|
|
|
|
const quoteSize = floorToDecimal(
|
2023-06-04 17:19:19 -07:00
|
|
|
|
baseSize * price,
|
2023-07-21 11:47:53 -07:00
|
|
|
|
getDecimalCount(market.tickSize),
|
2023-02-08 03:29:03 -08:00
|
|
|
|
)
|
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
|
2023-06-04 17:19:19 -07:00
|
|
|
|
s.tradeForm.baseSize = baseSize.toString()
|
2023-02-08 03:29:03 -08:00
|
|
|
|
s.tradeForm.quoteSize = quoteSize.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
|
|
|
|
|
2023-01-19 18:12:51 -08:00
|
|
|
|
const showClosePositionModal = useCallback((position: PerpPosition) => {
|
|
|
|
|
setShowMarketCloseModal(true)
|
|
|
|
|
setPositionToClose(position)
|
|
|
|
|
}, [])
|
|
|
|
|
|
|
|
|
|
const hideClosePositionModal = useCallback(() => {
|
|
|
|
|
setShowMarketCloseModal(false)
|
|
|
|
|
setPositionToClose(null)
|
|
|
|
|
}, [])
|
|
|
|
|
|
2023-02-26 19:09:31 -08:00
|
|
|
|
const handleShowShare = (position: PerpPosition) => {
|
|
|
|
|
setPositionToShare(position)
|
|
|
|
|
setShowShareModal(true)
|
|
|
|
|
}
|
|
|
|
|
|
2023-06-27 19:10:47 -07:00
|
|
|
|
if (!group) return null
|
2022-11-20 18:29:51 -08:00
|
|
|
|
|
2023-02-26 19:09:31 -08:00
|
|
|
|
return (
|
|
|
|
|
<>
|
2023-06-28 03:50:27 -07:00
|
|
|
|
{mangoAccount && openPerpPositions.length ? (
|
2023-02-26 19:09:31 -08:00
|
|
|
|
showTableView ? (
|
2023-07-03 06:17:17 -07:00
|
|
|
|
<div className="thin-scroll overflow-x-auto">
|
|
|
|
|
<Table>
|
|
|
|
|
<thead>
|
|
|
|
|
<TrHead>
|
|
|
|
|
<Th className="text-left">{t('market')}</Th>
|
|
|
|
|
<Th className="text-right">{t('trade:size')}</Th>
|
|
|
|
|
<Th className="text-right">{t('trade:avg-entry-price')}</Th>
|
2023-08-15 19:11:58 -07:00
|
|
|
|
<Th>
|
2023-07-03 06:17:17 -07:00
|
|
|
|
<div className="flex justify-end">
|
|
|
|
|
<Tooltip content={t('trade:tooltip-est-liq-price')}>
|
|
|
|
|
<span className="tooltip-underline">
|
|
|
|
|
{t('trade:est-liq-price')}
|
|
|
|
|
</span>
|
|
|
|
|
</Tooltip>
|
|
|
|
|
</div>
|
2023-08-15 19:11:58 -07:00
|
|
|
|
</Th>
|
2023-07-03 06:17:17 -07:00
|
|
|
|
<Th className="text-right">{t('trade:unrealized-pnl')}</Th>
|
|
|
|
|
{!isUnownedAccount ? <Th /> : null}
|
|
|
|
|
</TrHead>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody>
|
|
|
|
|
{openPerpPositions.map((position, index) => {
|
|
|
|
|
const market = group.getPerpMarketByMarketIndex(
|
2023-07-21 11:47:53 -07:00
|
|
|
|
position.marketIndex,
|
2023-07-03 06:17:17 -07:00
|
|
|
|
)
|
|
|
|
|
const basePosition = position.getBasePositionUi(market)
|
|
|
|
|
const floorBasePosition = floorToDecimal(
|
|
|
|
|
basePosition,
|
2023-07-21 11:47:53 -07:00
|
|
|
|
getDecimalCount(market.minOrderSize),
|
2023-07-03 06:17:17 -07:00
|
|
|
|
).toNumber()
|
|
|
|
|
const isSelectedMarket =
|
|
|
|
|
selectedMarket instanceof PerpMarket &&
|
|
|
|
|
selectedMarket.perpMarketIndex === position.marketIndex
|
2022-11-16 21:17:18 -08:00
|
|
|
|
|
2023-07-03 06:17:17 -07:00
|
|
|
|
if (!basePosition) return null
|
2022-11-20 18:29:51 -08:00
|
|
|
|
|
2023-07-03 06:17:17 -07:00
|
|
|
|
const isLong = basePosition > 0
|
|
|
|
|
const avgEntryPrice = position.getAverageEntryPriceUi(market)
|
|
|
|
|
const unsettledPnl = position.getUnsettledPnlUi(market)
|
|
|
|
|
const totalPnl =
|
|
|
|
|
position.cumulativePnlOverPositionLifetimeUi(market)
|
|
|
|
|
const unrealizedPnl = position.getUnRealizedPnlUi(market)
|
|
|
|
|
const realizedPnl = position.getRealizedPnlUi()
|
|
|
|
|
const roe =
|
|
|
|
|
(unrealizedPnl / (Math.abs(basePosition) * avgEntryPrice)) *
|
|
|
|
|
100
|
2023-08-16 08:11:02 -07:00
|
|
|
|
let estLiqPrice
|
|
|
|
|
try {
|
|
|
|
|
estLiqPrice = position.getLiquidationPriceUi(
|
|
|
|
|
group,
|
|
|
|
|
mangoAccount,
|
|
|
|
|
)
|
|
|
|
|
} catch (e) {
|
|
|
|
|
estLiqPrice = null
|
|
|
|
|
}
|
2022-12-03 13:19:12 -08:00
|
|
|
|
|
2023-07-03 06:17:17 -07:00
|
|
|
|
return (
|
|
|
|
|
<TrBody
|
|
|
|
|
key={`${position.marketIndex}`}
|
|
|
|
|
className="my-1 p-2"
|
|
|
|
|
>
|
|
|
|
|
<Td>
|
|
|
|
|
<TableMarketName
|
|
|
|
|
market={market}
|
|
|
|
|
side={isLong ? 'long' : 'short'}
|
|
|
|
|
/>
|
|
|
|
|
</Td>
|
|
|
|
|
<Td className="text-right font-mono">
|
|
|
|
|
{isSelectedMarket ? (
|
|
|
|
|
<div className="flex flex-col items-end space-y-0.5">
|
|
|
|
|
<LinkButton
|
|
|
|
|
className="font-normal underline underline-offset-2 md:underline-offset-4 md:hover:no-underline"
|
|
|
|
|
onClick={() =>
|
|
|
|
|
handlePositionClick(floorBasePosition, market)
|
|
|
|
|
}
|
|
|
|
|
>
|
2023-02-26 19:09:31 -08:00
|
|
|
|
<FormatNumericValue
|
|
|
|
|
value={Math.abs(basePosition)}
|
|
|
|
|
decimals={getDecimalCount(market.minOrderSize)}
|
|
|
|
|
/>
|
2023-07-03 06:17:17 -07:00
|
|
|
|
</LinkButton>
|
2023-06-26 19:43:15 -07:00
|
|
|
|
<FormatNumericValue
|
|
|
|
|
classNames="text-xs text-th-fgd-3"
|
2023-07-03 06:17:17 -07:00
|
|
|
|
value={
|
|
|
|
|
Math.abs(floorBasePosition) * market._uiPrice
|
|
|
|
|
}
|
2023-06-26 19:43:15 -07:00
|
|
|
|
isUsd
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
2023-07-03 06:17:17 -07:00
|
|
|
|
) : (
|
|
|
|
|
<div className="flex flex-col items-end space-y-0.5">
|
2023-06-26 19:43:15 -07:00
|
|
|
|
<FormatNumericValue
|
2023-07-03 06:17:17 -07:00
|
|
|
|
value={Math.abs(basePosition)}
|
|
|
|
|
decimals={getDecimalCount(market.minOrderSize)}
|
2023-06-26 19:43:15 -07:00
|
|
|
|
/>
|
2023-07-03 06:17:17 -07:00
|
|
|
|
<FormatNumericValue
|
|
|
|
|
classNames="text-xs text-th-fgd-3"
|
|
|
|
|
value={
|
|
|
|
|
Math.abs(floorBasePosition) * market._uiPrice
|
2023-06-27 19:10:47 -07:00
|
|
|
|
}
|
2023-07-03 06:17:17 -07:00
|
|
|
|
isUsd
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
</Td>
|
|
|
|
|
<Td className="font-mono">
|
|
|
|
|
<div className="flex flex-col items-end space-y-0.5">
|
|
|
|
|
<FormatNumericValue
|
|
|
|
|
value={avgEntryPrice}
|
|
|
|
|
decimals={getDecimalCount(market.tickSize)}
|
|
|
|
|
isUsd
|
|
|
|
|
/>
|
|
|
|
|
<FormatNumericValue
|
|
|
|
|
classNames="text-xs text-th-fgd-3"
|
|
|
|
|
value={market.uiPrice}
|
|
|
|
|
decimals={getDecimalCount(market.tickSize)}
|
|
|
|
|
isUsd
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</Td>
|
2023-08-15 19:11:58 -07:00
|
|
|
|
<Td className="text-right font-mono">
|
2023-07-03 06:17:17 -07:00
|
|
|
|
{estLiqPrice ? (
|
|
|
|
|
<FormatNumericValue
|
|
|
|
|
value={estLiqPrice}
|
|
|
|
|
decimals={getDecimalCount(market.tickSize)}
|
|
|
|
|
isUsd
|
|
|
|
|
/>
|
|
|
|
|
) : (
|
|
|
|
|
'–'
|
|
|
|
|
)}
|
2023-08-15 19:11:58 -07:00
|
|
|
|
</Td>
|
2023-07-03 06:17:17 -07:00
|
|
|
|
<Td className="text-right font-mono">
|
|
|
|
|
<div className="flex flex-col items-end ">
|
|
|
|
|
<Tooltip
|
|
|
|
|
content={
|
|
|
|
|
<PnlTooltipContent
|
|
|
|
|
unrealizedPnl={unrealizedPnl}
|
|
|
|
|
realizedPnl={realizedPnl}
|
|
|
|
|
totalPnl={totalPnl}
|
|
|
|
|
unsettledPnl={unsettledPnl}
|
2023-08-09 20:29:17 -07:00
|
|
|
|
roe={roe}
|
2023-07-03 06:17:17 -07:00
|
|
|
|
/>
|
|
|
|
|
}
|
|
|
|
|
delay={100}
|
|
|
|
|
>
|
2023-06-22 04:17:35 -07:00
|
|
|
|
<span
|
2023-07-03 06:17:17 -07:00
|
|
|
|
className={`tooltip-underline ${
|
|
|
|
|
unrealizedPnl >= 0
|
|
|
|
|
? 'text-th-up'
|
|
|
|
|
: 'text-th-down'
|
|
|
|
|
}`}
|
2023-06-22 04:17:35 -07:00
|
|
|
|
>
|
|
|
|
|
<FormatNumericValue
|
2023-07-03 06:17:17 -07:00
|
|
|
|
value={unrealizedPnl}
|
|
|
|
|
isUsd
|
2023-06-28 04:17:43 -07:00
|
|
|
|
decimals={2}
|
2023-06-22 04:17:35 -07:00
|
|
|
|
/>
|
|
|
|
|
</span>
|
2023-07-03 06:17:17 -07:00
|
|
|
|
</Tooltip>
|
|
|
|
|
</div>
|
|
|
|
|
</Td>
|
|
|
|
|
{!isUnownedAccount ? (
|
|
|
|
|
<Td>
|
|
|
|
|
<div className="flex items-center justify-end space-x-4">
|
|
|
|
|
<Button
|
|
|
|
|
className="text-xs"
|
|
|
|
|
secondary
|
|
|
|
|
size="small"
|
|
|
|
|
onClick={() => showClosePositionModal(position)}
|
|
|
|
|
>
|
|
|
|
|
Close
|
|
|
|
|
</Button>
|
|
|
|
|
<IconButton
|
|
|
|
|
hideBg
|
|
|
|
|
onClick={() =>
|
|
|
|
|
handleShowShare(openPerpPositions[index])
|
|
|
|
|
}
|
|
|
|
|
disabled={!group || !basePosition}
|
|
|
|
|
>
|
|
|
|
|
<TwitterIcon className="h-4 w-4" />
|
|
|
|
|
</IconButton>
|
2023-06-27 19:10:47 -07:00
|
|
|
|
</div>
|
2023-02-26 19:09:31 -08:00
|
|
|
|
</Td>
|
2023-07-03 06:17:17 -07:00
|
|
|
|
) : null}
|
|
|
|
|
</TrBody>
|
|
|
|
|
)
|
|
|
|
|
})}
|
2023-08-09 21:45:30 -07:00
|
|
|
|
{openPerpPositions.length > 1 ? (
|
2023-08-09 11:49:32 -07:00
|
|
|
|
<tr
|
|
|
|
|
key={`total-unrealized-pnl`}
|
2023-08-17 16:47:11 -07:00
|
|
|
|
className="my-1 border-y border-th-bkg-3 p-2"
|
2023-08-09 11:49:32 -07:00
|
|
|
|
>
|
2023-08-04 00:20:58 -07:00
|
|
|
|
<Td className="text-right font-mono">
|
|
|
|
|
<></>
|
|
|
|
|
</Td>
|
|
|
|
|
<Td className="text-right font-mono">
|
|
|
|
|
<></>
|
|
|
|
|
</Td>
|
|
|
|
|
<Td className="text-right font-mono">
|
|
|
|
|
<></>
|
|
|
|
|
</Td>
|
2023-08-15 19:11:58 -07:00
|
|
|
|
<Td className="text-right font-mono">
|
2023-08-04 00:20:58 -07:00
|
|
|
|
<></>
|
2023-08-15 19:11:58 -07:00
|
|
|
|
</Td>
|
2023-08-04 00:20:58 -07:00
|
|
|
|
<Td className="text-right font-mono">
|
2023-08-17 16:47:11 -07:00
|
|
|
|
<div className="flex items-center justify-end">
|
|
|
|
|
<span className="mr-2 font-body text-xs text-th-fgd-3">
|
2023-08-09 11:49:32 -07:00
|
|
|
|
Total:
|
2023-08-04 00:20:58 -07:00
|
|
|
|
</span>
|
2023-08-09 11:49:32 -07:00
|
|
|
|
<Tooltip
|
|
|
|
|
content={
|
|
|
|
|
<PnlTooltipContent
|
|
|
|
|
unrealizedPnl={totalPnlStats.unrealized}
|
|
|
|
|
realizedPnl={totalPnlStats.realized}
|
|
|
|
|
totalPnl={totalPnlStats.total}
|
|
|
|
|
unsettledPnl={totalPnlStats.unsettled}
|
2023-08-09 20:29:17 -07:00
|
|
|
|
roe={totalPnlStats.roe}
|
2023-08-09 11:49:32 -07:00
|
|
|
|
/>
|
|
|
|
|
}
|
|
|
|
|
delay={100}
|
|
|
|
|
>
|
|
|
|
|
<div className="flex">
|
|
|
|
|
<span>
|
|
|
|
|
<FormatNumericValue
|
|
|
|
|
classNames={`tooltip-underline ${
|
|
|
|
|
totalPnlStats.unrealized >= 0
|
|
|
|
|
? 'text-th-up'
|
|
|
|
|
: 'text-th-down'
|
|
|
|
|
}`}
|
|
|
|
|
value={totalPnlStats.unrealized}
|
|
|
|
|
isUsd
|
|
|
|
|
decimals={2}
|
|
|
|
|
/>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
</Tooltip>
|
2023-08-04 00:20:58 -07:00
|
|
|
|
</div>
|
|
|
|
|
</Td>
|
2023-08-09 11:49:32 -07:00
|
|
|
|
{!isUnownedAccount ? (
|
|
|
|
|
<Td className="text-right font-mono">
|
2023-08-09 20:29:17 -07:00
|
|
|
|
{' '}
|
|
|
|
|
<></>
|
2023-08-09 11:49:32 -07:00
|
|
|
|
</Td>
|
|
|
|
|
) : null}
|
|
|
|
|
</tr>
|
2023-08-04 00:20:58 -07:00
|
|
|
|
) : null}
|
2023-07-03 06:17:17 -07:00
|
|
|
|
</tbody>
|
|
|
|
|
</Table>
|
|
|
|
|
</div>
|
2023-02-26 19:09:31 -08:00
|
|
|
|
) : (
|
2023-06-26 19:43:15 -07:00
|
|
|
|
<div className="border-b border-th-bkg-3">
|
|
|
|
|
{openPerpPositions.map((position, i) => {
|
2023-02-26 19:09:31 -08:00
|
|
|
|
const market = group.getPerpMarketByMarketIndex(
|
2023-07-21 11:47:53 -07:00
|
|
|
|
position.marketIndex,
|
2023-02-26 19:09:31 -08:00
|
|
|
|
)
|
|
|
|
|
const basePosition = position.getBasePositionUi(market)
|
|
|
|
|
const floorBasePosition = floorToDecimal(
|
|
|
|
|
basePosition,
|
2023-07-21 11:47:53 -07:00
|
|
|
|
getDecimalCount(market.minOrderSize),
|
2023-02-26 19:09:31 -08:00
|
|
|
|
).toNumber()
|
|
|
|
|
const isSelectedMarket =
|
|
|
|
|
selectedMarket instanceof PerpMarket &&
|
|
|
|
|
selectedMarket.perpMarketIndex === position.marketIndex
|
|
|
|
|
|
|
|
|
|
if (!basePosition) return null
|
2023-06-26 19:43:15 -07:00
|
|
|
|
const side =
|
|
|
|
|
basePosition > 0 ? 'buy' : basePosition < 0 ? 'sell' : ''
|
2023-06-28 03:50:27 -07:00
|
|
|
|
const avgEntryPrice = position.getAverageEntryPriceUi(market)
|
2023-06-22 04:17:35 -07:00
|
|
|
|
const totalPnl =
|
2023-02-26 19:09:31 -08:00
|
|
|
|
position.cumulativePnlOverPositionLifetimeUi(market)
|
2023-06-22 04:17:35 -07:00
|
|
|
|
const unrealizedPnl = position.getUnRealizedPnlUi(market)
|
|
|
|
|
const realizedPnl = position.getRealizedPnlUi()
|
2023-06-28 03:50:27 -07:00
|
|
|
|
const roe =
|
2023-06-28 04:35:42 -07:00
|
|
|
|
(unrealizedPnl / (Math.abs(basePosition) * avgEntryPrice)) * 100
|
2023-08-15 19:11:58 -07:00
|
|
|
|
const estLiqPrice = position.getLiquidationPriceUi(
|
|
|
|
|
group,
|
|
|
|
|
mangoAccount,
|
|
|
|
|
)
|
2023-06-26 19:43:15 -07:00
|
|
|
|
const unsettledPnl = position.getUnsettledPnlUi(market)
|
2023-07-09 03:06:17 -07:00
|
|
|
|
const notional = Math.abs(floorBasePosition) * market._uiPrice
|
2023-02-26 19:09:31 -08:00
|
|
|
|
return (
|
2023-06-26 19:43:15 -07:00
|
|
|
|
<Disclosure key={position.marketIndex}>
|
|
|
|
|
{({ open }) => (
|
|
|
|
|
<>
|
|
|
|
|
<Disclosure.Button
|
|
|
|
|
className={`flex w-full items-center justify-between border-t border-th-bkg-3 p-4 text-left focus:outline-none ${
|
|
|
|
|
i === 0 ? 'border-t-0' : ''
|
|
|
|
|
}`}
|
|
|
|
|
>
|
2023-07-03 06:17:17 -07:00
|
|
|
|
<div className="flex items-center">
|
|
|
|
|
<MarketLogos market={market} size="large" />
|
|
|
|
|
<div>
|
|
|
|
|
<div className="flex space-x-1 text-th-fgd-2">
|
|
|
|
|
<span className="whitespace-nowrap">
|
|
|
|
|
{market.name}
|
2023-06-26 19:43:15 -07:00
|
|
|
|
</span>
|
2023-07-03 06:17:17 -07:00
|
|
|
|
<PerpSideBadge
|
|
|
|
|
basePosition={side === 'buy' ? 1 : -1}
|
2023-02-26 19:09:31 -08:00
|
|
|
|
/>
|
2023-07-03 06:17:17 -07:00
|
|
|
|
</div>
|
|
|
|
|
<div className="flex items-center space-x-2">
|
|
|
|
|
<span className="font-mono">
|
|
|
|
|
<FormatNumericValue
|
|
|
|
|
value={Math.abs(basePosition)}
|
|
|
|
|
decimals={getDecimalCount(
|
2023-07-21 11:47:53 -07:00
|
|
|
|
market.minOrderSize,
|
2023-07-03 06:17:17 -07:00
|
|
|
|
)}
|
2023-07-09 03:06:17 -07:00
|
|
|
|
/>
|
2023-07-03 06:17:17 -07:00
|
|
|
|
</span>
|
|
|
|
|
<span className="text-th-fgd-4">|</span>
|
2023-07-09 03:06:17 -07:00
|
|
|
|
<span className="font-mono">
|
|
|
|
|
<FormatNumericValue value={notional} isUsd />
|
2023-07-03 06:17:17 -07:00
|
|
|
|
</span>
|
|
|
|
|
</div>
|
2023-06-26 19:43:15 -07:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-07-09 03:06:17 -07:00
|
|
|
|
<div className="flex items-center space-x-2">
|
|
|
|
|
<span
|
|
|
|
|
className={`font-mono ${
|
|
|
|
|
unrealizedPnl > 0 ? 'text-th-up' : 'text-th-down'
|
|
|
|
|
}`}
|
|
|
|
|
>
|
|
|
|
|
<FormatNumericValue
|
|
|
|
|
value={unrealizedPnl}
|
|
|
|
|
isUsd
|
|
|
|
|
decimals={2}
|
|
|
|
|
/>
|
|
|
|
|
</span>
|
|
|
|
|
<ChevronDownIcon
|
|
|
|
|
className={`${
|
|
|
|
|
open ? 'rotate-180' : 'rotate-360'
|
|
|
|
|
} ml-3 h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
2023-06-26 19:43:15 -07:00
|
|
|
|
</Disclosure.Button>
|
|
|
|
|
<Transition
|
|
|
|
|
enter="transition ease-in duration-200"
|
|
|
|
|
enterFrom="opacity-0"
|
|
|
|
|
enterTo="opacity-100"
|
2023-02-26 19:09:31 -08:00
|
|
|
|
>
|
2023-06-26 19:43:15 -07:00
|
|
|
|
<Disclosure.Panel>
|
2023-08-17 16:47:11 -07:00
|
|
|
|
<div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pb-4 pt-4">
|
2023-06-26 19:43:15 -07:00
|
|
|
|
<div className="col-span-1">
|
|
|
|
|
<p className="text-xs text-th-fgd-3">
|
|
|
|
|
{t('trade:size')}
|
|
|
|
|
</p>
|
2023-07-04 17:05:03 -07:00
|
|
|
|
{isSelectedMarket ? (
|
|
|
|
|
<div className="space-y-0.5">
|
|
|
|
|
<LinkButton
|
|
|
|
|
className="font-normal underline underline-offset-2 md:underline-offset-4 md:hover:no-underline"
|
|
|
|
|
onClick={() =>
|
|
|
|
|
handlePositionClick(
|
|
|
|
|
floorBasePosition,
|
2023-07-21 11:47:53 -07:00
|
|
|
|
market,
|
2023-07-04 17:05:03 -07:00
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
>
|
2023-06-26 19:43:15 -07:00
|
|
|
|
<FormatNumericValue
|
|
|
|
|
value={Math.abs(basePosition)}
|
|
|
|
|
decimals={getDecimalCount(
|
2023-07-21 11:47:53 -07:00
|
|
|
|
market.minOrderSize,
|
2023-06-26 19:43:15 -07:00
|
|
|
|
)}
|
|
|
|
|
/>
|
2023-07-04 17:05:03 -07:00
|
|
|
|
</LinkButton>
|
|
|
|
|
<FormatNumericValue
|
|
|
|
|
classNames="text-xs text-th-fgd-3"
|
2023-07-09 03:06:17 -07:00
|
|
|
|
value={notional}
|
2023-07-04 17:05:03 -07:00
|
|
|
|
isUsd
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
) : (
|
|
|
|
|
<div className="flex flex-col font-mono text-th-fgd-2">
|
|
|
|
|
<FormatNumericValue
|
|
|
|
|
value={Math.abs(basePosition)}
|
|
|
|
|
decimals={getDecimalCount(
|
2023-07-21 11:47:53 -07:00
|
|
|
|
market.minOrderSize,
|
2023-07-04 17:05:03 -07:00
|
|
|
|
)}
|
|
|
|
|
/>
|
|
|
|
|
<FormatNumericValue
|
|
|
|
|
classNames="text-xs text-th-fgd-3"
|
|
|
|
|
value={
|
|
|
|
|
Math.abs(floorBasePosition) *
|
|
|
|
|
market._uiPrice
|
|
|
|
|
}
|
|
|
|
|
isUsd
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
2023-06-26 19:43:15 -07:00
|
|
|
|
</div>
|
|
|
|
|
<div className="col-span-1">
|
|
|
|
|
<p className="text-xs text-th-fgd-3">
|
2023-06-28 04:17:43 -07:00
|
|
|
|
{t('trade:avg-entry-price')}
|
2023-06-26 19:43:15 -07:00
|
|
|
|
</p>
|
|
|
|
|
<div className="flex flex-col font-mono">
|
|
|
|
|
<FormatNumericValue
|
|
|
|
|
classNames="text-th-fgd-2"
|
2023-06-28 03:50:27 -07:00
|
|
|
|
value={avgEntryPrice}
|
2023-06-26 19:43:15 -07:00
|
|
|
|
decimals={getDecimalCount(market.tickSize)}
|
|
|
|
|
isUsd
|
|
|
|
|
/>
|
|
|
|
|
<FormatNumericValue
|
|
|
|
|
classNames="text-xs text-th-fgd-3"
|
|
|
|
|
value={market.uiPrice}
|
|
|
|
|
decimals={getDecimalCount(market.tickSize)}
|
|
|
|
|
isUsd
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2023-08-15 19:11:58 -07:00
|
|
|
|
<div className="col-span-1">
|
2023-06-27 19:10:47 -07:00
|
|
|
|
<Tooltip
|
|
|
|
|
content={t('trade:tooltip-est-liq-price')}
|
|
|
|
|
>
|
|
|
|
|
<p className="tooltip-underline text-xs text-th-fgd-3">
|
|
|
|
|
{t('trade:est-liq-price')}
|
|
|
|
|
</p>
|
|
|
|
|
</Tooltip>
|
2023-06-26 19:43:15 -07:00
|
|
|
|
<p className="font-mono text-th-fgd-2">
|
|
|
|
|
{estLiqPrice ? (
|
|
|
|
|
<FormatNumericValue
|
|
|
|
|
value={estLiqPrice}
|
|
|
|
|
decimals={getDecimalCount(market.tickSize)}
|
|
|
|
|
isUsd
|
|
|
|
|
/>
|
|
|
|
|
) : (
|
|
|
|
|
'–'
|
|
|
|
|
)}
|
|
|
|
|
</p>
|
2023-08-15 19:11:58 -07:00
|
|
|
|
</div>
|
2023-06-26 19:43:15 -07:00
|
|
|
|
<div className="col-span-1">
|
|
|
|
|
<p className="text-xs text-th-fgd-3">
|
2023-06-27 19:10:47 -07:00
|
|
|
|
{t('trade:unsettled')} {t('pnl')}
|
2023-06-26 19:43:15 -07:00
|
|
|
|
</p>
|
|
|
|
|
<p className="font-mono text-th-fgd-2">
|
|
|
|
|
<FormatNumericValue
|
|
|
|
|
value={unsettledPnl}
|
|
|
|
|
isUsd
|
|
|
|
|
decimals={2}
|
|
|
|
|
/>
|
|
|
|
|
</p>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="col-span-1">
|
|
|
|
|
<p className="text-xs text-th-fgd-3">
|
|
|
|
|
{t('trade:unrealized-pnl')}
|
|
|
|
|
</p>
|
2023-07-09 03:06:17 -07:00
|
|
|
|
<Tooltip
|
|
|
|
|
content={
|
|
|
|
|
<PnlTooltipContent
|
|
|
|
|
unrealizedPnl={unrealizedPnl}
|
|
|
|
|
realizedPnl={realizedPnl}
|
|
|
|
|
totalPnl={totalPnl}
|
|
|
|
|
unsettledPnl={unsettledPnl}
|
2023-08-09 20:29:17 -07:00
|
|
|
|
roe={roe}
|
2023-07-09 03:06:17 -07:00
|
|
|
|
/>
|
|
|
|
|
}
|
|
|
|
|
delay={100}
|
|
|
|
|
>
|
|
|
|
|
<span
|
|
|
|
|
className={`tooltip-underline mb-1 font-mono ${
|
|
|
|
|
unrealizedPnl >= 0
|
|
|
|
|
? 'text-th-up'
|
|
|
|
|
: 'text-th-down'
|
|
|
|
|
}`}
|
2023-06-26 19:43:15 -07:00
|
|
|
|
>
|
2023-07-09 03:06:17 -07:00
|
|
|
|
<FormatNumericValue
|
|
|
|
|
value={unrealizedPnl}
|
|
|
|
|
isUsd
|
|
|
|
|
decimals={2}
|
|
|
|
|
/>
|
|
|
|
|
</span>
|
|
|
|
|
</Tooltip>
|
2023-06-26 19:43:15 -07:00
|
|
|
|
</div>
|
2023-06-27 19:10:47 -07:00
|
|
|
|
<div className="col-span-1">
|
|
|
|
|
<p className="text-xs text-th-fgd-3">ROE</p>
|
|
|
|
|
<p
|
|
|
|
|
className={`font-mono ${
|
|
|
|
|
roe >= 0 ? 'text-th-up' : 'text-th-down'
|
|
|
|
|
}`}
|
|
|
|
|
>
|
2023-06-28 04:17:43 -07:00
|
|
|
|
<FormatNumericValue value={roe} decimals={2} />%
|
2023-06-27 19:10:47 -07:00
|
|
|
|
</p>
|
|
|
|
|
</div>
|
2023-06-26 19:43:15 -07:00
|
|
|
|
<div className="col-span-2 mt-3 flex space-x-3">
|
|
|
|
|
<Button
|
|
|
|
|
className="w-1/2"
|
|
|
|
|
secondary
|
|
|
|
|
onClick={() => showClosePositionModal(position)}
|
|
|
|
|
>
|
|
|
|
|
{t('trade:close-position')}
|
|
|
|
|
</Button>
|
|
|
|
|
<Button
|
|
|
|
|
className="w-1/2"
|
|
|
|
|
secondary
|
|
|
|
|
onClick={() =>
|
|
|
|
|
handleShowShare(openPerpPositions[i])
|
|
|
|
|
}
|
|
|
|
|
disabled={!group || !basePosition}
|
|
|
|
|
>
|
|
|
|
|
<div className="flex items-center justify-center">
|
2023-07-03 06:17:17 -07:00
|
|
|
|
<TwitterIcon className="mr-2 h-4 w-4 flex-shrink-0" />
|
2023-06-26 19:43:15 -07:00
|
|
|
|
{t('trade:tweet-position')}
|
|
|
|
|
</div>
|
|
|
|
|
</Button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</Disclosure.Panel>
|
|
|
|
|
</Transition>
|
|
|
|
|
</>
|
|
|
|
|
)}
|
|
|
|
|
</Disclosure>
|
2023-02-26 19:09:31 -08:00
|
|
|
|
)
|
|
|
|
|
})}
|
2023-08-04 00:20:58 -07:00
|
|
|
|
{openPerpPositions.length > 0 ? (
|
2023-08-09 11:49:32 -07:00
|
|
|
|
<>
|
|
|
|
|
<Disclosure>
|
|
|
|
|
{({ open }) => (
|
|
|
|
|
<>
|
|
|
|
|
<Disclosure.Button
|
|
|
|
|
className={`flex w-full justify-end border-t border-th-bkg-3 p-1 text-right focus:outline-none`}
|
|
|
|
|
>
|
2023-08-17 16:47:11 -07:00
|
|
|
|
<div className="ml-auto mt-1 flex flex-col justify-end">
|
2023-08-09 11:49:32 -07:00
|
|
|
|
<div className="flex flex-row">
|
2023-08-17 16:47:11 -07:00
|
|
|
|
<span className="text-md mr-3 font-body text-th-fgd-3">
|
2023-08-09 11:49:32 -07:00
|
|
|
|
Total Unrealized PnL:
|
|
|
|
|
</span>
|
|
|
|
|
<span
|
2023-08-17 16:47:11 -07:00
|
|
|
|
className={`mr-2 font-mono ${
|
2023-08-09 11:49:32 -07:00
|
|
|
|
totalPnlStats.unrealized > 0
|
|
|
|
|
? 'text-th-up'
|
|
|
|
|
: 'text-th-down'
|
|
|
|
|
}`}
|
|
|
|
|
>
|
|
|
|
|
<FormatNumericValue
|
|
|
|
|
value={totalPnlStats.unrealized}
|
|
|
|
|
isUsd
|
|
|
|
|
decimals={2}
|
|
|
|
|
/>
|
|
|
|
|
</span>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className="flex flex-row justify-end">
|
|
|
|
|
<Transition
|
|
|
|
|
enter="transition ease-in duration-200"
|
|
|
|
|
enterFrom="opacity-0"
|
|
|
|
|
enterTo="opacity-100"
|
|
|
|
|
>
|
|
|
|
|
<Disclosure.Panel className="mt-1">
|
2023-08-17 16:47:11 -07:00
|
|
|
|
<span className="text-md mr-3 text-right font-body text-th-fgd-3">
|
2023-08-09 11:49:32 -07:00
|
|
|
|
Total ROE:
|
|
|
|
|
</span>
|
|
|
|
|
<span
|
2023-08-17 16:47:11 -07:00
|
|
|
|
className={`mr-1.5 font-mono ${
|
2023-08-09 11:49:32 -07:00
|
|
|
|
totalPnlStats.roe >= 0
|
|
|
|
|
? 'text-th-up'
|
|
|
|
|
: 'text-th-down'
|
|
|
|
|
}`}
|
|
|
|
|
>
|
|
|
|
|
<FormatNumericValue
|
|
|
|
|
value={totalPnlStats.roe}
|
|
|
|
|
decimals={2}
|
|
|
|
|
/>
|
|
|
|
|
%{' '}
|
|
|
|
|
</span>
|
|
|
|
|
</Disclosure.Panel>
|
|
|
|
|
</Transition>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<ChevronDownIcon
|
|
|
|
|
className={`${
|
|
|
|
|
open ? 'rotate-180' : 'rotate-360'
|
|
|
|
|
} mr-3 mt-1 h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
|
|
|
|
/>
|
|
|
|
|
</Disclosure.Button>
|
|
|
|
|
</>
|
|
|
|
|
)}
|
|
|
|
|
</Disclosure>
|
|
|
|
|
</>
|
2023-08-04 00:20:58 -07:00
|
|
|
|
) : null}
|
2023-06-26 19:43:15 -07:00
|
|
|
|
</div>
|
2023-02-26 19:09:31 -08:00
|
|
|
|
)
|
2023-06-28 03:50:27 -07:00
|
|
|
|
) : mangoAccount || connected ? (
|
2023-02-26 19:09:31 -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>
|
|
|
|
|
</div>
|
|
|
|
|
) : (
|
|
|
|
|
<div className="p-8">
|
|
|
|
|
<ConnectEmptyState text={t('trade:connect-positions')} />
|
|
|
|
|
</div>
|
|
|
|
|
)}
|
|
|
|
|
{showShareModal ? (
|
|
|
|
|
<SharePositionModal
|
|
|
|
|
group={group}
|
|
|
|
|
isOpen={showShareModal}
|
|
|
|
|
onClose={() => setShowShareModal(false)}
|
|
|
|
|
position={positionToShare!}
|
|
|
|
|
/>
|
|
|
|
|
) : null}
|
2023-07-03 06:17:17 -07:00
|
|
|
|
{showMarketCloseModal && positionToClose ? (
|
|
|
|
|
<MarketCloseModal
|
|
|
|
|
isOpen={showMarketCloseModal}
|
|
|
|
|
onClose={hideClosePositionModal}
|
|
|
|
|
position={positionToClose}
|
|
|
|
|
/>
|
|
|
|
|
) : null}
|
2023-02-26 19:09:31 -08:00
|
|
|
|
</>
|
2022-10-31 12:11:34 -07:00
|
|
|
|
)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default PerpPositions
|