add orders/position count

This commit is contained in:
saml33 2021-08-22 22:45:10 +10:00
parent 12db262794
commit 945f8a1a90
6 changed files with 216 additions and 181 deletions

View File

@ -7,11 +7,9 @@ import {
PerpMarket,
QUOTE_INDEX,
ZERO_BN,
ZERO_I80F48,
} from '@blockworks-foundation/mango-client'
import Button from './Button'
import { notify } from '../utils/notifications'
import BN from 'bn.js'
import SideBadge from './SideBadge'
import { useState } from 'react'
import Loading from './Loading'
@ -19,6 +17,7 @@ import { formatUsdValue, usdFormatter } from '../utils'
import useTradeHistory from '../hooks/useTradeHistory'
import Tooltip from './Tooltip'
import { SettlePnlTooltip } from './MarketPosition'
import usePerpPositions from '../hooks/usePerpPositions'
export function getAvgEntryPrice(
mangoAccount,
@ -76,22 +75,7 @@ const PositionsTable = () => {
const [settlingPerpAcc, setSettlingPerpAcc] = useState(null)
const tradeHistory = useTradeHistory()
const setMangoStore = useMangoStore((s) => s.set)
const perpAccounts = mangoAccount
? groupConfig.perpMarkets.map((m) => {
return {
perpAccount: mangoAccount.perpAccounts[m.marketIndex],
marketIndex: m.marketIndex,
}
})
: []
const filteredPerpAccounts = perpAccounts.filter(
({ perpAccount }) =>
!(
perpAccount.quotePosition.eq(ZERO_I80F48) &&
perpAccount.basePosition.eq(new BN(0))
)
)
const perpPositions = usePerpPositions()
const handleSettlePnl = async (
perpMarket: PerpMarket,
@ -141,7 +125,7 @@ const PositionsTable = () => {
<div className="flex flex-col py-4">
<div className="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div className="align-middle inline-block min-w-full sm:px-6 lg:px-8">
{filteredPerpAccounts.length ? (
{perpPositions.length ? (
<div className="overflow-hidden border-b border-th-bkg-2 sm:rounded-m">
<Table className="min-w-full divide-y divide-th-bkg-2">
<Thead>
@ -175,147 +159,145 @@ const PositionsTable = () => {
</Tr>
</Thead>
<Tbody>
{filteredPerpAccounts.map(
({ perpAccount, marketIndex }, index) => {
const perpMarketInfo = mangoGroup.perpMarkets[marketIndex]
const marketConfig = getMarketByPublicKey(
groupConfig,
perpMarketInfo.perpMarket
)
const perpMarketCache =
mangoCache.perpMarketCache[marketIndex]
const price = mangoCache.priceCache[marketIndex].price
const perpMarket = allMarkets[
marketConfig.publicKey.toString()
] as PerpMarket
const perpTradeHistory = tradeHistory.filter(
(t) => t.marketName === marketConfig.name
)
{perpPositions.map(({ perpAccount, marketIndex }, index) => {
const perpMarketInfo = mangoGroup.perpMarkets[marketIndex]
const marketConfig = getMarketByPublicKey(
groupConfig,
perpMarketInfo.perpMarket
)
const perpMarketCache =
mangoCache.perpMarketCache[marketIndex]
const price = mangoCache.priceCache[marketIndex].price
const perpMarket = allMarkets[
marketConfig.publicKey.toString()
] as PerpMarket
const perpTradeHistory = tradeHistory.filter(
(t) => t.marketName === marketConfig.name
)
return (
<Tr
key={`${marketIndex}`}
className={`border-b border-th-bkg-3
return (
<Tr
key={`${marketIndex}`}
className={`border-b border-th-bkg-3
${index % 2 === 0 ? `bg-th-bkg-3` : `bg-th-bkg-2`}
`}
>
<Td className="px-6 py-2 whitespace-nowrap text-sm text-th-fgd-1">
<div className="flex items-center">
<img
alt=""
width="20"
height="20"
src={`/assets/icons/${marketConfig.baseSymbol.toLowerCase()}.svg`}
className={`mr-2.5`}
/>
<div>{marketConfig.name}</div>
</div>
</Td>
<Td className="px-2 py-2 whitespace-nowrap text-sm text-th-fgd-1">
{!perpAccount.basePosition.eq(ZERO_BN) ? (
<SideBadge
side={
perpAccount.basePosition.gt(ZERO_BN)
? 'long'
: 'short'
}
/>
) : (
'-'
)}
</Td>
<Td className="px-2 py-2 whitespace-nowrap text-sm text-th-fgd-1">
{perpAccount &&
Math.abs(
perpMarket.baseLotsToNumber(
perpAccount.basePosition
)
) > 0 ? (
<span
className="cursor-pointer underline hover:no-underline"
onClick={() =>
handleSizeClick(
Math.abs(
perpMarket.baseLotsToNumber(
perpAccount.basePosition
)
)
)
}
>
{`${Math.abs(
perpMarket.baseLotsToNumber(
perpAccount.basePosition
)
)} ${marketConfig.baseSymbol}`}
</span>
) : (
`0 ${marketConfig.baseSymbol}`
)}
</Td>
<Th
scope="col"
className="px-2 py-2 text-left font-normal"
>
<Td className="px-6 py-2 whitespace-nowrap text-sm text-th-fgd-1">
<div className="flex items-center">
<img
alt=""
width="20"
height="20"
src={`/assets/icons/${marketConfig.baseSymbol.toLowerCase()}.svg`}
className={`mr-2.5`}
/>
<div>{marketConfig.name}</div>
</div>
</Td>
<Td className="px-2 py-2 whitespace-nowrap text-sm text-th-fgd-1">
{!perpAccount.basePosition.eq(ZERO_BN) ? (
<SideBadge
side={
perpAccount.basePosition.gt(ZERO_BN)
? 'long'
: 'short'
}
/>
) : (
'-'
)}
</Td>
<Td className="px-2 py-2 whitespace-nowrap text-sm text-th-fgd-1">
{perpAccount &&
{usdFormatter(
Math.abs(
perpMarket.baseLotsToNumber(
perpAccount.basePosition
)
) > 0 ? (
<span
className="cursor-pointer underline hover:no-underline"
onClick={() =>
handleSizeClick(
Math.abs(
perpMarket.baseLotsToNumber(
perpAccount.basePosition
)
)
)
}
>
{`${Math.abs(
perpMarket.baseLotsToNumber(
perpAccount.basePosition
)
)} ${marketConfig.baseSymbol}`}
</span>
) : (
`0 ${marketConfig.baseSymbol}`
)}
</Td>
<Th
scope="col"
className="px-2 py-2 text-left font-normal"
>
{usdFormatter(
Math.abs(
perpMarket.baseLotsToNumber(
perpAccount.basePosition
) *
mangoGroup
.getPrice(marketIndex, mangoCache)
.toNumber()
)
)}
</Th>
<Td className="px-2 py-2 whitespace-nowrap text-sm text-th-fgd-1">
{getAvgEntryPrice(
mangoAccount,
perpAccount,
perpMarket,
perpTradeHistory
)}
</Td>
<Td className="px-2 py-2 whitespace-nowrap text-sm text-th-fgd-1">
{getBreakEvenPrice(
mangoAccount,
perpAccount,
perpMarket,
perpTradeHistory
)}
</Td>
<Td className="px-2 py-2 whitespace-nowrap text-sm text-th-fgd-1">
{usdFormatter(
+nativeI80F48ToUi(
perpAccount.getPnl(
perpMarketInfo,
perpMarketCache,
price
),
marketConfig.quoteDecimals
)
)}
</Td>
<Td className="px-2 py-2 whitespace-nowrap text-sm text-th-fgd-1">
<div className="flex justify-end">
<Button
onClick={() =>
handleSettlePnl(perpMarket, perpAccount)
}
className="ml-3 text-xs pt-0 pb-0 h-8 pl-3 pr-3"
>
{settlingPerpAcc == perpAccount ? (
<Loading />
) : (
<span>Settle PNL</span>
)}
</Button>
</div>
</Td>
</Tr>
)
}
)}
) *
mangoGroup
.getPrice(marketIndex, mangoCache)
.toNumber()
)
)}
</Th>
<Td className="px-2 py-2 whitespace-nowrap text-sm text-th-fgd-1">
{getAvgEntryPrice(
mangoAccount,
perpAccount,
perpMarket,
perpTradeHistory
)}
</Td>
<Td className="px-2 py-2 whitespace-nowrap text-sm text-th-fgd-1">
{getBreakEvenPrice(
mangoAccount,
perpAccount,
perpMarket,
perpTradeHistory
)}
</Td>
<Td className="px-2 py-2 whitespace-nowrap text-sm text-th-fgd-1">
{usdFormatter(
+nativeI80F48ToUi(
perpAccount.getPnl(
perpMarketInfo,
perpMarketCache,
price
),
marketConfig.quoteDecimals
)
)}
</Td>
<Td className="px-2 py-2 whitespace-nowrap text-sm text-th-fgd-1">
<div className="flex justify-end">
<Button
onClick={() =>
handleSettlePnl(perpMarket, perpAccount)
}
className="ml-3 text-xs pt-0 pb-0 h-8 pl-3 pr-3"
>
{settlingPerpAcc == perpAccount ? (
<Loading />
) : (
<span>Settle PNL</span>
)}
</Button>
</div>
</Td>
</Tr>
)
})}
</Tbody>
</Table>
</div>

View File

@ -14,7 +14,7 @@ const SideBadge: FunctionComponent<SideBadgeProps> = ({ side }) => {
}
px-2 py-1 text-xs`}
>
{side.toUpperCase()}
{side?.toUpperCase()}
</div>
)
}

View File

@ -42,12 +42,9 @@ const TradeHistoryTable = () => {
<Table className="min-w-full divide-y divide-th-bkg-2">
<Thead>
<Tr className="text-th-fgd-3 text-xs">
<Th
scope="col"
className={`px-6 py-2 text-left font-normal`}
>
<Th scope="col" className={`px-6 py-2 text-left`}>
<LinkButton
className="flex items-center no-underline"
className="flex items-center no-underline font-normal"
onClick={() => requestSort('market')}
>
Market
@ -62,9 +59,9 @@ const TradeHistoryTable = () => {
/>
</LinkButton>
</Th>
<Th scope="col" className="px-6 py-2 text-left font-normal">
<Th scope="col" className="px-6 py-2 text-left">
<LinkButton
className="flex items-center no-underline"
className="flex items-center no-underline font-normal"
onClick={() => requestSort('side')}
>
Side
@ -79,9 +76,9 @@ const TradeHistoryTable = () => {
/>
</LinkButton>
</Th>
<Th scope="col" className="px-6 py-2 text-left font-normal">
<Th scope="col" className="px-6 py-2 text-left">
<LinkButton
className="flex items-center no-underline"
className="flex items-center no-underline font-normal"
onClick={() => requestSort('size')}
>
Size
@ -96,9 +93,9 @@ const TradeHistoryTable = () => {
/>
</LinkButton>
</Th>
<Th scope="col" className="px-6 py-2 text-left font-normal">
<Th scope="col" className="px-6 py-2 text-left">
<LinkButton
className="flex items-center no-underline"
className="flex items-center no-underline font-normal"
onClick={() => requestSort('price')}
>
Price
@ -113,9 +110,9 @@ const TradeHistoryTable = () => {
/>
</LinkButton>
</Th>
<Th scope="col" className="px-6 py-2 text-left font-normal">
<Th scope="col" className="px-6 py-2 text-left">
<LinkButton
className="flex items-center no-underline"
className="flex items-center no-underline font-normal"
onClick={() => requestSort('value')}
>
Value
@ -130,9 +127,9 @@ const TradeHistoryTable = () => {
/>
</LinkButton>
</Th>
<Th scope="col" className="px-6 py-2 text-left font-normal">
<Th scope="col" className="px-6 py-2 text-left">
<LinkButton
className="flex items-center no-underline"
className="flex items-center no-underline font-normal"
onClick={() => requestSort('liquidity')}
>
Liquidity
@ -147,9 +144,9 @@ const TradeHistoryTable = () => {
/>
</LinkButton>
</Th>
<Th scope="col" className="px-6 py-2 text-left font-normal">
<Th scope="col" className="px-6 py-2 text-left">
<LinkButton
className="flex items-center no-underline"
className="flex items-center no-underline font-normal"
onClick={() => requestSort('feeCost')}
>
Fee
@ -164,9 +161,9 @@ const TradeHistoryTable = () => {
/>
</LinkButton>
</Th>
<Th scope="col" className="px-6 py-2 text-left font-normal">
<Th scope="col" className="px-6 py-2 text-left">
<LinkButton
className="flex items-center no-underline"
className="flex items-center no-underline font-normal"
onClick={() => requestSort('loadTimestamp')}
>
Approx Time

View File

@ -1,4 +1,8 @@
import { useEffect, useState } from 'react'
import styled from '@emotion/styled'
import useMangoStore from '../stores/useMangoStore'
import { useOpenOrders } from '../hooks/useOpenOrders'
import usePerpPositions from '../hooks/usePerpPositions'
import FloatingElement from './FloatingElement'
import OpenOrdersTable from './OpenOrdersTable'
import BalancesTable from './BalancesTable'
@ -15,7 +19,13 @@ const TABS = [
'Trade History',
]
const StyledAlertCount = styled.span`
font-size: 0.6rem;
`
const UserInfoTabs = ({ activeTab, setActiveTab }) => {
const openOrders = useOpenOrders()
const perpPositions = usePerpPositions()
const handleTabChange = (tabName) => {
setActiveTab(tabName)
}
@ -46,7 +56,7 @@ const UserInfoTabs = ({ activeTab, setActiveTab }) => {
<a
key={tabName}
onClick={() => handleTabChange(tabName)}
className={`whitespace-nowrap pt-2 pb-4 px-1 border-b-2 font-semibold cursor-pointer default-transition hover:opacity-100
className={`whitespace-nowrap pt-2 pb-4 px-1 border-b-2 font-semibold cursor-pointer default-transition relative hover:opacity-100
${
activeTab === tabName
? `border-th-primary text-th-primary`
@ -54,7 +64,13 @@ const UserInfoTabs = ({ activeTab, setActiveTab }) => {
}
`}
>
{tabName}
{tabName}{' '}
{tabName === 'Open Orders' && openOrders?.length > 0 ? (
<Count count={openOrders?.length} />
) : null}
{tabName === 'Perp Positions' && perpPositions?.length > 0 ? (
<Count count={perpPositions?.length} />
) : null}
</a>
))}
</nav>
@ -64,6 +80,14 @@ const UserInfoTabs = ({ activeTab, setActiveTab }) => {
)
}
const Count = ({ count }) => (
<div className="absolute -top-2 -right-2 z-20">
<StyledAlertCount className="h-4 p-1 bg-th-bkg-4 inline-flex rounded-lg flex items-center justify-center text-th-fgd-2">
{count}
</StyledAlertCount>
</div>
)
const TabContent = ({ activeTab }) => {
switch (activeTab) {
case 'Open Orders':
@ -83,6 +107,7 @@ const TabContent = ({ activeTab }) => {
const UserInfo = () => {
const { asPath } = useRouter()
const connected = useMangoStore((s) => s.wallet.connected)
const [activeTab, setActiveTab] = useState('')
useEffect(() => {
@ -90,9 +115,11 @@ const UserInfo = () => {
}, [asPath])
return (
<FloatingElement>
<UserInfoTabs activeTab={activeTab} setActiveTab={setActiveTab} />
<TabContent activeTab={activeTab} />
<FloatingElement showConnect>
<div className={!connected ? 'filter blur-sm' : null}>
<UserInfoTabs activeTab={activeTab} setActiveTab={setActiveTab} />
<TabContent activeTab={activeTab} />
</div>
</FloatingElement>
)
}

View File

@ -356,12 +356,12 @@ export default function AccountOverview() {
</div>
) : null}
<div className="pb-8">
<div className="pb-4 text-th-fgd-1 text-lg">Perp Positions</div>
<div className="pb-2 text-th-fgd-1 text-lg">Perp Positions</div>
<PositionsTable />
</div>
<div className="pb-4 text-th-fgd-1 text-lg">Assets & Liabilities</div>
<div className="grid grid-flow-col grid-cols-1 grid-rows-2 md:grid-cols-2 md:grid-rows-1 gap-4 pb-4">
<div className="grid grid-flow-col grid-cols-1 grid-rows-2 md:grid-cols-2 md:grid-rows-1 gap-4 pb-8">
<div className="border border-th-bkg-4 p-4 rounded-lg">
<div className="pb-0.5 text-xs text-th-fgd-3">Total Assets Value</div>
<div className="flex items-center">
@ -385,7 +385,8 @@ export default function AccountOverview() {
</div>
</div>
</div>
<div className="flex justify-end pb-4">
<div className="flex justify-between pb-4">
<div className="text-th-fgd-1 text-lg">Balances</div>
<Switch
checked={showZeroBalances}
className="text-xs"

View File

@ -0,0 +1,28 @@
import useMangoStore from '../stores/useMangoStore'
import { ZERO_I80F48 } from '@blockworks-foundation/mango-client'
import BN from 'bn.js'
const usePerpPositions = () => {
const groupConfig = useMangoStore((s) => s.selectedMangoGroup.config)
const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
const perpAccounts = mangoAccount
? groupConfig.perpMarkets.map((m) => {
return {
perpAccount: mangoAccount.perpAccounts[m.marketIndex],
marketIndex: m.marketIndex,
}
})
: []
const filteredPerpAccounts = perpAccounts.filter(
({ perpAccount }) =>
!(
perpAccount.quotePosition.eq(ZERO_I80F48) &&
perpAccount.basePosition.eq(new BN(0))
)
)
return filteredPerpAccounts
}
export default usePerpPositions