Merge pull request #185 from blockworks-foundation/perp-positions-updates
new layout and add liq price to perp positions
This commit is contained in:
saml33
GitHub
commit
8cb8df79cd
|
|
@ -2,18 +2,20 @@ import Decimal from 'decimal.js'
|
|||
import { formatCurrencyValue, formatNumericValue } from 'utils/numbers'
|
||||
|
||||
const FormatNumericValue = ({
|
||||
classNames,
|
||||
value,
|
||||
decimals,
|
||||
isUsd,
|
||||
roundUp,
|
||||
}: {
|
||||
classNames?: string
|
||||
value: Decimal | number | string
|
||||
decimals?: number
|
||||
isUsd?: boolean
|
||||
roundUp?: boolean
|
||||
}) => {
|
||||
return (
|
||||
<span>
|
||||
<span className={classNames}>
|
||||
{isUsd
|
||||
? formatCurrencyValue(value, decimals)
|
||||
: formatNumericValue(value, decimals, roundUp)}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,12 @@ import Button, { IconButton, LinkButton } from '@components/shared/Button'
|
|||
import ConnectEmptyState from '@components/shared/ConnectEmptyState'
|
||||
import FormatNumericValue from '@components/shared/FormatNumericValue'
|
||||
import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
|
||||
import { NoSymbolIcon } from '@heroicons/react/20/solid'
|
||||
import {
|
||||
ArrowTrendingDownIcon,
|
||||
ArrowTrendingUpIcon,
|
||||
ChevronDownIcon,
|
||||
NoSymbolIcon,
|
||||
} from '@heroicons/react/20/solid'
|
||||
import { useWallet } from '@solana/wallet-adapter-react'
|
||||
import mangoStore from '@store/mangoStore'
|
||||
import useMangoAccount from 'hooks/useMangoAccount'
|
||||
|
|
@ -14,8 +19,6 @@ import useSelectedMarket from 'hooks/useSelectedMarket'
|
|||
import useUnownedAccount from 'hooks/useUnownedAccount'
|
||||
import { useViewport } from 'hooks/useViewport'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/router'
|
||||
import { useCallback, useState } from 'react'
|
||||
import {
|
||||
floorToDecimal,
|
||||
|
|
@ -26,9 +29,10 @@ import { breakpoints } from 'utils/theme'
|
|||
import { calculateLimitPriceForMarketOrder } from 'utils/tradeForm'
|
||||
import MarketCloseModal from './MarketCloseModal'
|
||||
import MarketLogos from './MarketLogos'
|
||||
import PerpSideBadge from './PerpSideBadge'
|
||||
import TableMarketName from './TableMarketName'
|
||||
import Tooltip from '@components/shared/Tooltip'
|
||||
import { Disclosure, Transition } from '@headlessui/react'
|
||||
import useOpenPerpPositions from 'hooks/useOpenPerpPositions'
|
||||
|
||||
const PerpPositions = () => {
|
||||
const { t } = useTranslation(['common', 'trade'])
|
||||
|
|
@ -41,14 +45,13 @@ const PerpPositions = () => {
|
|||
const [positionToShare, setPositionToShare] = useState<PerpPosition | null>(
|
||||
null
|
||||
)
|
||||
const perpPositions = mangoStore((s) => s.mangoAccount.perpPositions)
|
||||
const openPerpPositions = useOpenPerpPositions()
|
||||
const { selectedMarket } = useSelectedMarket()
|
||||
const { connected } = useWallet()
|
||||
const { mangoAccountAddress } = useMangoAccount()
|
||||
const { mangoAccount } = useMangoAccount()
|
||||
const { isUnownedAccount } = useUnownedAccount()
|
||||
const { width } = useViewport()
|
||||
const showTableView = width ? width > breakpoints.md : false
|
||||
const { asPath } = useRouter()
|
||||
|
||||
const handlePositionClick = (positionSize: number, market: PerpMarket) => {
|
||||
const tradeForm = mangoStore.getState().tradeForm
|
||||
|
|
@ -94,21 +97,9 @@ const PerpPositions = () => {
|
|||
|
||||
if (!group) return null
|
||||
|
||||
const openPerpPositions = Object.values(perpPositions)
|
||||
.filter((p) => p.basePositionLots.toNumber())
|
||||
.sort((a, b) => {
|
||||
const aMarket = group.getPerpMarketByMarketIndex(a.marketIndex)
|
||||
const bMarket = group.getPerpMarketByMarketIndex(b.marketIndex)
|
||||
const aBasePosition = a.getBasePositionUi(aMarket)
|
||||
const bBasePosition = b.getBasePositionUi(bMarket)
|
||||
const aNotional = aBasePosition * aMarket._uiPrice
|
||||
const bNotional = bBasePosition * bMarket._uiPrice
|
||||
return Math.abs(bNotional) - Math.abs(aNotional)
|
||||
})
|
||||
|
||||
return (
|
||||
<>
|
||||
{mangoAccountAddress && openPerpPositions.length ? (
|
||||
{mangoAccount && openPerpPositions.length ? (
|
||||
showTableView ? (
|
||||
<>
|
||||
<div className="thin-scroll overflow-x-auto">
|
||||
|
|
@ -116,14 +107,17 @@ const PerpPositions = () => {
|
|||
<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:avg-entry-price')}</Th>
|
||||
<Th className="text-right">{t('trade:oracle-price')}</Th>
|
||||
<Th className="text-right">{`${t('trade:unsettled')} ${t(
|
||||
'pnl'
|
||||
)}`}</Th>
|
||||
<Th>
|
||||
<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>
|
||||
</Th>
|
||||
<Th className="text-right">{t('trade:unrealized-pnl')}</Th>
|
||||
{!isUnownedAccount ? <Th /> : null}
|
||||
</TrHead>
|
||||
|
|
@ -144,11 +138,22 @@ const PerpPositions = () => {
|
|||
|
||||
if (!basePosition) return null
|
||||
|
||||
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
|
||||
const estLiqPrice = position.getLiquidationPriceUi(
|
||||
group,
|
||||
mangoAccount
|
||||
)
|
||||
|
||||
return (
|
||||
<TrBody
|
||||
|
|
@ -156,14 +161,14 @@ const PerpPositions = () => {
|
|||
className="my-1 p-2"
|
||||
>
|
||||
<Td>
|
||||
<TableMarketName market={market} />
|
||||
</Td>
|
||||
<Td className="text-right">
|
||||
<PerpSideBadge basePosition={basePosition} />
|
||||
<TableMarketName
|
||||
market={market}
|
||||
side={isLong ? 'buy' : 'sell'}
|
||||
/>
|
||||
</Td>
|
||||
<Td className="text-right font-mono">
|
||||
<p className="flex justify-end">
|
||||
{isSelectedMarket ? (
|
||||
{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={() =>
|
||||
|
|
@ -177,68 +182,99 @@ const PerpPositions = () => {
|
|||
)}
|
||||
/>
|
||||
</LinkButton>
|
||||
) : (
|
||||
<FormatNumericValue
|
||||
classNames="text-xs text-th-fgd-3"
|
||||
value={
|
||||
Math.abs(floorBasePosition) * market._uiPrice
|
||||
}
|
||||
isUsd
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-end space-y-0.5">
|
||||
<FormatNumericValue
|
||||
value={Math.abs(basePosition)}
|
||||
decimals={getDecimalCount(market.minOrderSize)}
|
||||
/>
|
||||
)}
|
||||
</p>
|
||||
</Td>
|
||||
<Td className="text-right font-mono">
|
||||
<FormatNumericValue
|
||||
value={
|
||||
Math.abs(floorBasePosition) * market._uiPrice
|
||||
}
|
||||
isUsd
|
||||
/>
|
||||
</Td>
|
||||
<Td className="text-right font-mono">
|
||||
<FormatNumericValue
|
||||
value={position.getAverageEntryPriceUi(market)}
|
||||
decimals={getDecimalCount(market.tickSize)}
|
||||
isUsd
|
||||
/>
|
||||
</Td>
|
||||
<Td className="text-right font-mono">
|
||||
<FormatNumericValue
|
||||
value={market.uiPrice}
|
||||
decimals={getDecimalCount(market.tickSize)}
|
||||
isUsd
|
||||
/>
|
||||
</Td>
|
||||
<Td className={`text-right font-mono`}>
|
||||
<FormatNumericValue
|
||||
value={unsettledPnl}
|
||||
isUsd
|
||||
decimals={2}
|
||||
/>
|
||||
</Td>
|
||||
<Td className="text-right font-mono">
|
||||
<Tooltip
|
||||
content={
|
||||
<PnlTooltipContent
|
||||
unrealizedPnl={unrealizedPnl}
|
||||
realizedPnl={realizedPnl}
|
||||
totalPnl={totalPnl}
|
||||
<FormatNumericValue
|
||||
classNames="text-xs text-th-fgd-3"
|
||||
value={
|
||||
Math.abs(floorBasePosition) * market._uiPrice
|
||||
}
|
||||
isUsd
|
||||
/>
|
||||
}
|
||||
delay={100}
|
||||
>
|
||||
</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>
|
||||
<Td className="text-right font-mono">
|
||||
{estLiqPrice ? (
|
||||
<FormatNumericValue
|
||||
value={estLiqPrice}
|
||||
decimals={getDecimalCount(market.tickSize)}
|
||||
isUsd
|
||||
/>
|
||||
) : (
|
||||
'–'
|
||||
)}
|
||||
</Td>
|
||||
<Td className="text-right font-mono">
|
||||
<div className="flex flex-col items-end space-y-0.5">
|
||||
<Tooltip
|
||||
content={
|
||||
<PnlTooltipContent
|
||||
unrealizedPnl={unrealizedPnl}
|
||||
realizedPnl={realizedPnl}
|
||||
totalPnl={totalPnl}
|
||||
unsettledPnl={unsettledPnl}
|
||||
/>
|
||||
}
|
||||
delay={100}
|
||||
>
|
||||
<span
|
||||
className={`tooltip-underline ${
|
||||
unrealizedPnl >= 0
|
||||
? 'text-th-up'
|
||||
: 'text-th-down'
|
||||
}`}
|
||||
>
|
||||
<FormatNumericValue
|
||||
value={unrealizedPnl}
|
||||
isUsd
|
||||
decimals={2}
|
||||
/>
|
||||
</span>
|
||||
</Tooltip>
|
||||
<span
|
||||
className={`tooltip-underline ${
|
||||
unrealizedPnl > 0
|
||||
? 'text-th-up'
|
||||
: 'text-th-down'
|
||||
}`}
|
||||
className={
|
||||
roe >= 0 ? 'text-th-up' : 'text-th-down'
|
||||
}
|
||||
>
|
||||
<FormatNumericValue
|
||||
value={unrealizedPnl}
|
||||
isUsd
|
||||
classNames="text-xs"
|
||||
value={roe}
|
||||
decimals={2}
|
||||
/>
|
||||
%{' '}
|
||||
<span className="font-body text-xs text-th-fgd-3">
|
||||
(ROE)
|
||||
</span>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</Td>
|
||||
{!isUnownedAccount ? (
|
||||
<Td>
|
||||
|
|
@ -278,8 +314,8 @@ const PerpPositions = () => {
|
|||
) : null}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{openPerpPositions.map((position) => {
|
||||
<div className="border-b border-th-bkg-3">
|
||||
{openPerpPositions.map((position, i) => {
|
||||
const market = group.getPerpMarketByMarketIndex(
|
||||
position.marketIndex
|
||||
)
|
||||
|
|
@ -293,111 +329,266 @@ const PerpPositions = () => {
|
|||
selectedMarket.perpMarketIndex === position.marketIndex
|
||||
|
||||
if (!basePosition) return null
|
||||
const side =
|
||||
basePosition > 0 ? 'buy' : basePosition < 0 ? 'sell' : ''
|
||||
const avgEntryPrice = position.getAverageEntryPriceUi(market)
|
||||
const totalPnl =
|
||||
position.cumulativePnlOverPositionLifetimeUi(market)
|
||||
const unrealizedPnl = position.getUnRealizedPnlUi(market)
|
||||
const realizedPnl = position.getRealizedPnlUi()
|
||||
const roe =
|
||||
(unrealizedPnl / (Math.abs(basePosition) * avgEntryPrice)) * 100
|
||||
const estLiqPrice = position.getLiquidationPriceUi(
|
||||
group,
|
||||
mangoAccount
|
||||
)
|
||||
const unsettledPnl = position.getUnsettledPnlUi(market)
|
||||
return (
|
||||
<div
|
||||
className="flex items-center justify-between border-b border-th-bkg-3 p-4"
|
||||
key={`${position.marketIndex}`}
|
||||
>
|
||||
<div className="flex items-start">
|
||||
<div className="mt-0.5">
|
||||
<MarketLogos market={market} size="large" />
|
||||
</div>
|
||||
<div>
|
||||
<div className="mb-1 flex space-x-1 leading-none text-th-fgd-2">
|
||||
{selectedMarket?.name === market.name ? (
|
||||
<span className="whitespace-nowrap">
|
||||
{market.name}
|
||||
</span>
|
||||
) : (
|
||||
<Link href={`/trade?name=${market.name}`}>
|
||||
<div className="flex items-center underline underline-offset-2 md:hover:text-th-fgd-3 md:hover:no-underline">
|
||||
<span className="whitespace-nowrap">
|
||||
{market.name}
|
||||
</span>
|
||||
</div>
|
||||
</Link>
|
||||
)}
|
||||
<PerpSideBadge basePosition={basePosition} />
|
||||
</div>
|
||||
<div className="flex items-center space-x-1 leading-none">
|
||||
<p className="flex text-th-fgd-4">
|
||||
<span className="font-mono text-th-fgd-3">
|
||||
{isSelectedMarket && asPath === '/trade' ? (
|
||||
<LinkButton
|
||||
className="font-normal underline underline-offset-2 md:underline-offset-4 md:hover:no-underline"
|
||||
onClick={() =>
|
||||
handlePositionClick(floorBasePosition, market)
|
||||
}
|
||||
>
|
||||
<FormatNumericValue
|
||||
value={Math.abs(basePosition)}
|
||||
decimals={getDecimalCount(
|
||||
market.minOrderSize
|
||||
)}
|
||||
/>
|
||||
</LinkButton>
|
||||
) : (
|
||||
<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' : ''
|
||||
}`}
|
||||
>
|
||||
<div className="flex w-full flex-col sm:flex-row sm:items-center sm:justify-between">
|
||||
<div
|
||||
className={`flex items-center ${
|
||||
side === 'buy'
|
||||
? 'text-th-up'
|
||||
: side === 'sell'
|
||||
? 'text-th-down'
|
||||
: 'text-th-fgd-2'
|
||||
}`}
|
||||
>
|
||||
<MarketLogos market={market} size="large" />
|
||||
<span className="mr-1 whitespace-nowrap">
|
||||
{market.name}
|
||||
</span>
|
||||
{side === 'buy' ? (
|
||||
<ArrowTrendingUpIcon className="h-5 w-5" />
|
||||
) : side === 'sell' ? (
|
||||
<ArrowTrendingDownIcon className="h-5 w-5" />
|
||||
) : null}
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="font-mono">
|
||||
<FormatNumericValue
|
||||
value={Math.abs(basePosition)}
|
||||
decimals={getDecimalCount(market.minOrderSize)}
|
||||
/>{' '}
|
||||
<span className="font-body text-th-fgd-3">
|
||||
{market.name.split('-')[0]}
|
||||
</span>
|
||||
</span>
|
||||
<span className="text-th-fgd-4">|</span>
|
||||
<span
|
||||
className={`font-mono ${
|
||||
unrealizedPnl > 0
|
||||
? 'text-th-up'
|
||||
: 'text-th-down'
|
||||
}`}
|
||||
>
|
||||
<FormatNumericValue
|
||||
value={unrealizedPnl}
|
||||
isUsd
|
||||
decimals={2}
|
||||
/>
|
||||
)}
|
||||
</span>
|
||||
<span className="mx-1">from</span>
|
||||
<span className="font-mono text-th-fgd-3">
|
||||
<FormatNumericValue
|
||||
value={position.getAverageEntryPriceUi(market)}
|
||||
decimals={getDecimalCount(market.tickSize)}
|
||||
isUsd
|
||||
/>
|
||||
</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-4">
|
||||
<div
|
||||
className={`text-right font-mono leading-none ${
|
||||
unrealizedPnl > 0 ? 'text-th-up' : 'text-th-down'
|
||||
}`}
|
||||
>
|
||||
<Tooltip
|
||||
content={
|
||||
<PnlTooltipContent
|
||||
unrealizedPnl={unrealizedPnl}
|
||||
realizedPnl={realizedPnl}
|
||||
totalPnl={totalPnl}
|
||||
/>
|
||||
}
|
||||
delay={100}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<ChevronDownIcon
|
||||
className={`${
|
||||
open ? 'rotate-180' : 'rotate-360'
|
||||
} ml-3 h-6 w-6 flex-shrink-0 text-th-fgd-3`}
|
||||
/>
|
||||
</Disclosure.Button>
|
||||
<Transition
|
||||
enter="transition ease-in duration-200"
|
||||
enterFrom="opacity-0"
|
||||
enterTo="opacity-100"
|
||||
>
|
||||
<p className="tooltip-underline mb-1 font-body text-th-fgd-4">
|
||||
{t('trade:unrealized-pnl')}
|
||||
</p>
|
||||
</Tooltip>
|
||||
<FormatNumericValue value={unrealizedPnl} isUsd />
|
||||
</div>
|
||||
{!isUnownedAccount ? (
|
||||
<Button
|
||||
className="text-xs"
|
||||
secondary
|
||||
size="small"
|
||||
onClick={() => showClosePositionModal(position)}
|
||||
>
|
||||
Close
|
||||
</Button>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
<Disclosure.Panel>
|
||||
<div className="mx-4 grid grid-cols-2 gap-4 border-t border-th-bkg-3 pt-4 pb-4">
|
||||
<div className="col-span-1">
|
||||
<p className="text-xs text-th-fgd-3">
|
||||
{t('trade:size')}
|
||||
</p>
|
||||
<p>
|
||||
{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,
|
||||
market
|
||||
)
|
||||
}
|
||||
>
|
||||
<FormatNumericValue
|
||||
value={Math.abs(basePosition)}
|
||||
decimals={getDecimalCount(
|
||||
market.minOrderSize
|
||||
)}
|
||||
/>
|
||||
</LinkButton>
|
||||
<FormatNumericValue
|
||||
classNames="text-xs text-th-fgd-3"
|
||||
value={
|
||||
Math.abs(floorBasePosition) *
|
||||
market._uiPrice
|
||||
}
|
||||
isUsd
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col font-mono text-th-fgd-2">
|
||||
<FormatNumericValue
|
||||
value={Math.abs(basePosition)}
|
||||
decimals={getDecimalCount(
|
||||
market.minOrderSize
|
||||
)}
|
||||
/>
|
||||
<FormatNumericValue
|
||||
classNames="text-xs text-th-fgd-3"
|
||||
value={
|
||||
Math.abs(floorBasePosition) *
|
||||
market._uiPrice
|
||||
}
|
||||
isUsd
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<p className="text-xs text-th-fgd-3">
|
||||
{t('trade:avg-entry-price')}
|
||||
</p>
|
||||
<div className="flex flex-col font-mono">
|
||||
<FormatNumericValue
|
||||
classNames="text-th-fgd-2"
|
||||
value={avgEntryPrice}
|
||||
decimals={getDecimalCount(market.tickSize)}
|
||||
isUsd
|
||||
/>
|
||||
<FormatNumericValue
|
||||
classNames="text-xs text-th-fgd-3"
|
||||
value={market.uiPrice}
|
||||
decimals={getDecimalCount(market.tickSize)}
|
||||
isUsd
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<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>
|
||||
<p className="font-mono text-th-fgd-2">
|
||||
{estLiqPrice ? (
|
||||
<FormatNumericValue
|
||||
value={estLiqPrice}
|
||||
decimals={getDecimalCount(market.tickSize)}
|
||||
isUsd
|
||||
/>
|
||||
) : (
|
||||
'–'
|
||||
)}
|
||||
</p>
|
||||
</div>
|
||||
<div className="col-span-1">
|
||||
<p className="text-xs text-th-fgd-3">
|
||||
{t('trade:unsettled')} {t('pnl')}
|
||||
</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>
|
||||
<p className="font-mono text-th-fgd-2">
|
||||
<Tooltip
|
||||
content={
|
||||
<PnlTooltipContent
|
||||
unrealizedPnl={unrealizedPnl}
|
||||
realizedPnl={realizedPnl}
|
||||
totalPnl={totalPnl}
|
||||
unsettledPnl={unsettledPnl}
|
||||
/>
|
||||
}
|
||||
delay={100}
|
||||
>
|
||||
<span
|
||||
className={`tooltip-underline mb-1 ${
|
||||
unrealizedPnl >= 0
|
||||
? 'text-th-up'
|
||||
: 'text-th-down'
|
||||
}`}
|
||||
>
|
||||
<FormatNumericValue
|
||||
value={unrealizedPnl}
|
||||
isUsd
|
||||
decimals={2}
|
||||
/>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</p>
|
||||
</div>
|
||||
<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'
|
||||
}`}
|
||||
>
|
||||
<FormatNumericValue value={roe} decimals={2} />%
|
||||
</p>
|
||||
</div>
|
||||
<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">
|
||||
<TwitterIcon className="mr-2 h-4 w-4" />
|
||||
{t('trade:tweet-position')}
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Disclosure.Panel>
|
||||
</Transition>
|
||||
</>
|
||||
)}
|
||||
</Disclosure>
|
||||
)
|
||||
})}
|
||||
</>
|
||||
</div>
|
||||
)
|
||||
) : mangoAccountAddress || connected ? (
|
||||
) : mangoAccount || connected ? (
|
||||
<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>
|
||||
|
|
@ -425,15 +616,25 @@ const PnlTooltipContent = ({
|
|||
unrealizedPnl,
|
||||
realizedPnl,
|
||||
totalPnl,
|
||||
unsettledPnl,
|
||||
}: {
|
||||
unrealizedPnl: number
|
||||
realizedPnl: number
|
||||
totalPnl: number
|
||||
unsettledPnl: number
|
||||
}) => {
|
||||
const { t } = useTranslation(['common', 'trade'])
|
||||
return (
|
||||
<>
|
||||
<div className="mb-3 space-y-1">
|
||||
<div className="flex justify-between border-b border-th-bkg-3 pb-2">
|
||||
<p className="mr-3">
|
||||
{t('trade:unsettled')} {t('pnl')}
|
||||
</p>
|
||||
<span className="font-mono text-th-fgd-2">
|
||||
{formatCurrencyValue(unsettledPnl, 2)}
|
||||
</span>
|
||||
</div>
|
||||
<div className="mb-3 space-y-1 pt-2">
|
||||
<div className="flex justify-between">
|
||||
<p className="mr-3">{t('trade:unrealized-pnl')}</p>
|
||||
<span className="font-mono text-th-fgd-2">
|
||||
|
|
|
|||
|
|
@ -3,24 +3,68 @@ import useSelectedMarket from 'hooks/useSelectedMarket'
|
|||
import Link from 'next/link'
|
||||
import { useRouter } from 'next/router'
|
||||
import MarketLogos from './MarketLogos'
|
||||
import {
|
||||
ArrowTrendingDownIcon,
|
||||
ArrowTrendingUpIcon,
|
||||
} from '@heroicons/react/20/solid'
|
||||
|
||||
const TableMarketName = ({ market }: { market: PerpMarket | Serum3Market }) => {
|
||||
const TableMarketName = ({
|
||||
market,
|
||||
side,
|
||||
}: {
|
||||
market: PerpMarket | Serum3Market
|
||||
side?: 'buy' | 'sell'
|
||||
}) => {
|
||||
const { selectedMarket } = useSelectedMarket()
|
||||
const { asPath } = useRouter()
|
||||
|
||||
return selectedMarket?.name === market.name && asPath.includes('/trade') ? (
|
||||
<div className="flex items-center">
|
||||
<MarketLogos market={market} size="large" />
|
||||
<span className="whitespace-nowrap">{market.name}</span>
|
||||
<div
|
||||
className={`flex items-center ${
|
||||
side === 'buy'
|
||||
? 'text-th-up'
|
||||
: side === 'sell'
|
||||
? 'text-th-down'
|
||||
: 'text-th-fgd-2'
|
||||
}`}
|
||||
>
|
||||
<NameAndSide market={market} side={side} />
|
||||
</div>
|
||||
) : (
|
||||
<Link href={`/trade?name=${market.name}`}>
|
||||
<div className="flex items-center underline underline-offset-2 md:underline-offset-4 md:hover:text-th-fgd-3 md:hover:no-underline">
|
||||
<MarketLogos market={market} size="large" />
|
||||
<span className="whitespace-nowrap">{market.name}</span>
|
||||
<div
|
||||
className={`flex items-center underline underline-offset-2 md:underline-offset-4 md:hover:text-th-fgd-3 md:hover:no-underline ${
|
||||
side === 'buy'
|
||||
? 'text-th-up'
|
||||
: side === 'sell'
|
||||
? 'text-th-down'
|
||||
: 'text-th-fgd-2'
|
||||
}`}
|
||||
>
|
||||
<NameAndSide market={market} side={side} />
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
export default TableMarketName
|
||||
|
||||
const NameAndSide = ({
|
||||
market,
|
||||
side,
|
||||
}: {
|
||||
market: PerpMarket | Serum3Market
|
||||
side?: 'buy' | 'sell'
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
<MarketLogos market={market} size="large" />
|
||||
<span className="mr-1 whitespace-nowrap">{market.name}</span>
|
||||
{side === 'buy' ? (
|
||||
<ArrowTrendingUpIcon className="h-5 w-5" />
|
||||
) : side === 'sell' ? (
|
||||
<ArrowTrendingDownIcon className="h-5 w-5" />
|
||||
) : null}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,10 +7,19 @@ const useOpenPerpPositions = () => {
|
|||
const perpPositions = mangoStore((s) => s.mangoAccount.perpPositions)
|
||||
|
||||
const openPositions = useMemo(() => {
|
||||
if (!mangoAccountAddress) return []
|
||||
return Object.values(perpPositions).filter((p) =>
|
||||
p.basePositionLots.toNumber()
|
||||
)
|
||||
const group = mangoStore.getState().group
|
||||
if (!mangoAccountAddress || !group) return []
|
||||
return Object.values(perpPositions)
|
||||
.filter((p) => p.basePositionLots.toNumber())
|
||||
.sort((a, b) => {
|
||||
const aMarket = group.getPerpMarketByMarketIndex(a.marketIndex)
|
||||
const bMarket = group.getPerpMarketByMarketIndex(b.marketIndex)
|
||||
const aBasePosition = a.getBasePositionUi(aMarket)
|
||||
const bBasePosition = b.getBasePositionUi(bMarket)
|
||||
const aNotional = aBasePosition * aMarket._uiPrice
|
||||
const bNotional = bBasePosition * bMarket._uiPrice
|
||||
return Math.abs(bNotional) - Math.abs(aNotional)
|
||||
})
|
||||
}, [mangoAccountAddress, perpPositions])
|
||||
|
||||
return openPositions
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"@blockworks-foundation/mango-feeds": "0.1.6",
|
||||
"@blockworks-foundation/mango-v4": "^0.16.7",
|
||||
"@blockworks-foundation/mango-v4": "^0.16.9",
|
||||
"@headlessui/react": "1.6.6",
|
||||
"@heroicons/react": "2.0.10",
|
||||
"@metaplex-foundation/js": "0.18.3",
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
"copy-and-share": "Copy Image to Clipboard",
|
||||
"current-price": "Current Price",
|
||||
"edit-order": "Edit Order",
|
||||
"est-liq-price": "Est. Liq. Price",
|
||||
"avg-entry-price": "Avg. Entry Price",
|
||||
"est-slippage": "Est. Slippage",
|
||||
"funding-limits": "Funding Limits",
|
||||
|
|
@ -81,6 +82,7 @@
|
|||
"tooltip-borrow-balance": "You'll use your {{balance}} {{token}} balance and borrow {{borrowAmount}} {{token}} to execute this trade. The current {{token}} variable borrow rate is {{rate}}%",
|
||||
"tooltip-borrow-no-balance": "You'll borrow {{borrowAmount}} {{token}} to execute this trade. The current {{token}} variable borrow rate is {{rate}}%",
|
||||
"tooltip-enable-margin": "Enable spot margin for this trade",
|
||||
"tooltip-est-liq-price": "Estimated liquidation price is calculated in isolation and does not factor price changes in other markets/tokens.",
|
||||
"tooltip-ioc": "Immediate-Or-Cancel (IOC) orders are guaranteed to be the taker and must be executed immediately. Any portion of the order that can't be filled immediately will be cancelled",
|
||||
"tooltip-insured": "Whether or not {{tokenOrMarket}} losses can be recovered from the insurance fund in the event of bankruptcies.",
|
||||
"tooltip-post": "Post orders are guaranteed to be the maker or they will be canceled",
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
"copy-and-share": "Copy Image to Clipboard",
|
||||
"current-price": "Current Price",
|
||||
"edit-order": "Edit Order",
|
||||
"est-liq-price": "Est. Liq. Price",
|
||||
"avg-entry-price": "Avg. Entry Price",
|
||||
"est-slippage": "Est. Slippage",
|
||||
"funding-limits": "Funding Limits",
|
||||
|
|
@ -81,6 +82,7 @@
|
|||
"tooltip-borrow-balance": "You'll use your {{balance}} {{token}} balance and borrow {{borrowAmount}} {{token}} to execute this trade. The current {{token}} variable borrow rate is {{rate}}%",
|
||||
"tooltip-borrow-no-balance": "You'll borrow {{borrowAmount}} {{token}} to execute this trade. The current {{token}} variable borrow rate is {{rate}}%",
|
||||
"tooltip-enable-margin": "Enable spot margin for this trade",
|
||||
"tooltip-est-liq-price": "Estimated liquidation price is calculated in isolation and does not factor price changes in other markets/tokens.",
|
||||
"tooltip-ioc": "Immediate-Or-Cancel (IOC) orders are guaranteed to be the taker and must be executed immediately. Any portion of the order that can't be filled immediately will be cancelled",
|
||||
"tooltip-insured": "Whether or not {{tokenOrMarket}} losses can be recovered from the insurance fund in the event of bankruptcies.",
|
||||
"tooltip-post": "Post orders are guaranteed to be the maker or they will be canceled",
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
"copy-and-share": "Copy Image to Clipboard",
|
||||
"current-price": "Current Price",
|
||||
"edit-order": "Edit Order",
|
||||
"est-liq-price": "Est. Liq. Price",
|
||||
"avg-entry-price": "Avg. Entry Price",
|
||||
"est-slippage": "Est. Slippage",
|
||||
"funding-limits": "Funding Limits",
|
||||
|
|
@ -81,6 +82,7 @@
|
|||
"tooltip-borrow-balance": "You'll use your {{balance}} {{token}} balance and borrow {{borrowAmount}} {{token}} to execute this trade. The current {{token}} variable borrow rate is {{rate}}%",
|
||||
"tooltip-borrow-no-balance": "You'll borrow {{borrowAmount}} {{token}} to execute this trade. The current {{token}} variable borrow rate is {{rate}}%",
|
||||
"tooltip-enable-margin": "Enable spot margin for this trade",
|
||||
"tooltip-est-liq-price": "Estimated liquidation price is calculated in isolation and does not factor price changes in other markets/tokens.",
|
||||
"tooltip-ioc": "Immediate-Or-Cancel (IOC) orders are guaranteed to be the taker and must be executed immediately. Any portion of the order that can't be filled immediately will be cancelled",
|
||||
"tooltip-insured": "Whether or not {{tokenOrMarket}} losses can be recovered from the insurance fund in the event of bankruptcies.",
|
||||
"tooltip-post": "Post orders are guaranteed to be the maker or they will be canceled",
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
"copy-and-share": "Copy Image to Clipboard",
|
||||
"current-price": "Current Price",
|
||||
"edit-order": "Edit Order",
|
||||
"est-liq-price": "Est. Liq. Price",
|
||||
"avg-entry-price": "Avg. Entry Price",
|
||||
"est-slippage": "Est. Slippage",
|
||||
"funding-limits": "Funding Limits",
|
||||
|
|
@ -81,6 +82,7 @@
|
|||
"tooltip-borrow-balance": "You'll use your {{balance}} {{token}} balance and borrow {{borrowAmount}} {{token}} to execute this trade. The current {{token}} variable borrow rate is {{rate}}%",
|
||||
"tooltip-borrow-no-balance": "You'll borrow {{borrowAmount}} {{token}} to execute this trade. The current {{token}} variable borrow rate is {{rate}}%",
|
||||
"tooltip-enable-margin": "Enable spot margin for this trade",
|
||||
"tooltip-est-liq-price": "Estimated liquidation price is calculated in isolation and does not factor price changes in other markets/tokens.",
|
||||
"tooltip-ioc": "Immediate-Or-Cancel (IOC) orders are guaranteed to be the taker and must be executed immediately. Any portion of the order that can't be filled immediately will be cancelled",
|
||||
"tooltip-insured": "Whether or not {{tokenOrMarket}} losses can be recovered from the insurance fund in the event of bankruptcies.",
|
||||
"tooltip-post": "Post orders are guaranteed to be the maker or they will be canceled",
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
"copy-and-share": "Copy Image to Clipboard",
|
||||
"current-price": "Current Price",
|
||||
"edit-order": "Edit Order",
|
||||
"est-liq-price": "Est. Liq. Price",
|
||||
"avg-entry-price": "Avg. Entry Price",
|
||||
"est-slippage": "Est. Slippage",
|
||||
"funding-limits": "Funding Limits",
|
||||
|
|
@ -81,6 +82,7 @@
|
|||
"tooltip-borrow-balance": "You'll use your {{balance}} {{token}} balance and borrow {{borrowAmount}} {{token}} to execute this trade. The current {{token}} variable borrow rate is {{rate}}%",
|
||||
"tooltip-borrow-no-balance": "You'll borrow {{borrowAmount}} {{token}} to execute this trade. The current {{token}} variable borrow rate is {{rate}}%",
|
||||
"tooltip-enable-margin": "Enable spot margin for this trade",
|
||||
"tooltip-est-liq-price": "Estimated liquidation price is calculated in isolation and does not factor price changes in other markets/tokens.",
|
||||
"tooltip-ioc": "Immediate-Or-Cancel (IOC) orders are guaranteed to be the taker and must be executed immediately. Any portion of the order that can't be filled immediately will be cancelled",
|
||||
"tooltip-insured": "Whether or not {{tokenOrMarket}} losses can be recovered from the insurance fund in the event of bankruptcies.",
|
||||
"tooltip-post": "Post orders are guaranteed to be the maker or they will be canceled",
|
||||
|
|
|
|||
|
|
@ -610,7 +610,7 @@ input[type='range']::-webkit-slider-runnable-track {
|
|||
}
|
||||
|
||||
.tooltip-underline {
|
||||
@apply default-transition w-max border-b border-dashed border-current leading-tight hover:cursor-help hover:border-transparent;
|
||||
@apply default-transition box-border w-max border-b border-dashed border-current leading-tight hover:cursor-help hover:border-transparent;
|
||||
}
|
||||
|
||||
.radial-gradient-bg {
|
||||
|
|
|
|||
|
|
@ -21,10 +21,10 @@
|
|||
dependencies:
|
||||
ws "^8.13.0"
|
||||
|
||||
"@blockworks-foundation/mango-v4@^0.16.7":
|
||||
version "0.16.7"
|
||||
resolved "https://registry.yarnpkg.com/@blockworks-foundation/mango-v4/-/mango-v4-0.16.7.tgz#44e0d06bf62f12fb6ced35ccc67c0b3b6d6da93e"
|
||||
integrity sha512-ZuspGdg6K0ANzK/C8+HwUDp8T6ZybMFshFVjg/WWYuQp6CY5OFdrdsCFB/Dm1Rf4AkdehB0e+QAmDaMsQ6g2Xg==
|
||||
"@blockworks-foundation/mango-v4@^0.16.9":
|
||||
version "0.16.9"
|
||||
resolved "https://registry.yarnpkg.com/@blockworks-foundation/mango-v4/-/mango-v4-0.16.9.tgz#85cdc374bc057d5ff37ec80fc097af6743c022ab"
|
||||
integrity sha512-UYw3lqLWyHwPG4bRB5xff0ozpCpXLsbjqCthwAj7YFQqo1WMrKqLPUwI9wDi09aJWhkmAvdJbzRDy2y7FyevAQ==
|
||||
dependencies:
|
||||
"@coral-xyz/anchor" "^0.27.0"
|
||||
"@project-serum/serum" "0.13.65"
|
||||
|
|
|
|||
Loading…
Reference in New Issue