blockworks-foundation
/
mango-v4-ui
mirror of https://github.com/blockworks-foundation/mango-v4-ui.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

wip: add unsettled perp

This commit is contained in:
tjs 2022-11-20 21:29:51 -05:00
parent ba35bc0ee8
commit eb3d915916
10 changed files with 95 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/account/AccountTabs.tsx
View File

@ -47,6 +47,7 @@ const TabContent = ({ activeTab }: { activeTab: string }) => {
const swapHistory = mangoStore((s) => s.mangoAccount.stats.swapHistory.data)
const loading = mangoStore((s) => s.mangoAccount.stats.swapHistory.loading)
const unsettledSpotBalances = useUnsettledSpotBalances()
const perpPositions = mangoStore((s) => s.mangoAccount.perpPositions)
switch (activeTab) {
case 'balances':
return <TokenList />
@ -55,7 +56,14 @@ const TabContent = ({ activeTab }: { activeTab: string }) => {
case 'swap:swap-history':
return <SwapHistoryTable swapHistory={swapHistory} loading={loading} />
case 'trade:unsettled':
return <UnsettledTrades unsettledSpotBalances={unsettledSpotBalances} />
return (
<UnsettledTrades
unsettledSpotBalances={unsettledSpotBalances}
unsettledPerpPositions={perpPositions.filter(
(p) => !p.basePositionLots.toNumber()
)}
/>
)
default:
return <TokenList />
}

8
components/swap/SwapInfoTabs.tsx
View File

@ -14,6 +14,7 @@ const SwapInfoTabs = () => {
const swapHistory = mangoStore((s) => s.mangoAccount.stats.swapHistory.data)
const loading = mangoStore((s) => s.mangoAccount.stats.swapHistory.loading)
const unsettledSpotBalances = useUnsettledSpotBalances()
const perpPositions = mangoStore((s) => s.mangoAccount.perpPositions)
const tabsWithCount: [string, number][] = useMemo(() => {
return [
@ -38,7 +39,12 @@ const SwapInfoTabs = () => {
<SwapHistoryTable swapHistory={swapHistory} loading={loading} />
) : null}
{selectedTab === 'trade:unsettled' ? (
<UnsettledTrades unsettledSpotBalances={unsettledSpotBalances} />
<UnsettledTrades
unsettledSpotBalances={unsettledSpotBalances}
unsettledPerpPositions={perpPositions.filter(
(p) => !p.basePositionLots.toNumber()
)}
/>
) : null}
</div>
)

2
components/trade/AdvancedTradeForm.tsx
View File

@ -254,7 +254,7 @@ const AdvancedTradeForm = () => {
selectedMarket.perpMarketIndex,
tradeForm.side === 'buy' ? PerpOrderSide.bid : PerpOrderSide.ask,
price,
baseSize,
Math.abs(baseSize),
undefined, // maxQuoteQuantity
Date.now(),
perpOrderType,

1
components/trade/Orderbook.tsx
View File

@ -594,7 +594,6 @@ const OrderbookRow = ({
tickSize: number
}) => {
const element = useRef<HTMLDivElement>(null)
// const set = mangoStore.getState().set
const [showOrderbookFlash] = useLocalStorageState(ORDERBOOK_FLASH_KEY, true)
const flashClassName = side === 'sell' ? 'red-flash' : 'green-flash'

12
components/trade/PerpPositions.tsx
View File

@ -40,7 +40,11 @@ const PerpPositions = () => {
if (!group) return null
return Object.entries(perpPositions).length ? (
const openPerpPositions = Object.values(perpPositions).filter((p) =>
p.basePositionLots.toNumber()
)
return openPerpPositions.length ? (
<div>
<Table>
<thead>
@ -53,7 +57,7 @@ const PerpPositions = () => {
</TrHead>
</thead>
<tbody>
{Object.entries(perpPositions).map(([_mkt, position]) => {
{openPerpPositions.map((position) => {
const market = group.getPerpMarketByMarketIndex(
position.marketIndex
)
@ -62,6 +66,8 @@ const PerpPositions = () => {
selectedMarket instanceof PerpMarket &&
selectedMarket.perpMarketIndex === position.marketIndex
if (!basePosition) return null
return (
<TrBody key={`${position.marketIndex}`} className="my-1 p-2">
<Td>
@ -92,7 +98,7 @@ const PerpPositions = () => {
</div>
</Td>
<Td className="text-right">
<div>{position.quoteEntryNative.toNumber()}</div>
<div>{position.quoteEntryNative.toString()}</div>
</Td>
</TrBody>
)

2
components/trade/RecentTrades.tsx
View File

@ -64,7 +64,7 @@ const RecentTrades = () => {
if (CLUSTER === 'mainnet-beta') {
fetchTradesForChart()
}
}, 5000)
}, 50000)
return (
<div className="thin-scroll h-full overflow-y-scroll px-2">
<table className="min-w-full">

17
components/trade/TradeInfoTabs.tsx
View File

@ -18,11 +18,17 @@ const TradeInfoTabs = () => {
const isMobile = width ? width < breakpoints.lg : false
const tabsWithCount: [string, number][] = useMemo(() => {
const unsettledTradeCount =
Object.values(unsettledSpotBalances).flat().length +
perpPositions.filter((p) => !p.basePositionLots.toNumber())?.length
return [
['balances', 0],
['trade:orders', Object.values(openOrders).flat().length],
['trade:unsettled', Object.values(unsettledSpotBalances).flat().length],
['Positions', perpPositions.length],
['trade:unsettled', unsettledTradeCount],
[
'Positions',
perpPositions.filter((p) => p.basePositionLots.toNumber())?.length,
],
]
}, [openOrders, perpPositions, unsettledSpotBalances])
@ -40,7 +46,12 @@ const TradeInfoTabs = () => {
{selectedTab === 'balances' ? <SwapTradeBalances /> : null}
{selectedTab === 'trade:orders' ? <OpenOrders /> : null}
{selectedTab === 'trade:unsettled' ? (
<UnsettledTrades unsettledSpotBalances={unsettledSpotBalances} />
<UnsettledTrades
unsettledSpotBalances={unsettledSpotBalances}
unsettledPerpPositions={perpPositions.filter(
(p) => !p.basePositionLots.toNumber()
)}
/>
) : null}
{selectedTab === 'Positions' ? <PerpPositions /> : null}
</div>

51
components/trade/UnsettledTrades.tsx
View File

@ -13,11 +13,14 @@ import MarketLogos from './MarketLogos'
import useMangoAccount from 'hooks/useMangoAccount'
import { Table, Td, Th, TrBody, TrHead } from '@components/shared/TableElements'
import useMangoGroup from 'hooks/useMangoGroup'
import { PerpPosition } from '@blockworks-foundation/mango-v4'
const UnsettledTrades = ({
unsettledSpotBalances,
unsettledPerpPositions,
}: {
unsettledSpotBalances: any
unsettledPerpPositions: PerpPosition[]
}) => {
const { t } = useTranslation(['common', 'trade'])
const { mangoAccount } = useMangoAccount()
@ -62,8 +65,11 @@ const UnsettledTrades = ({
if (!group) return null
console.log('unsettledPerpPositions', unsettledPerpPositions)
return mangoAccount ? (
Object.values(unsettledSpotBalances).flat().length ? (
Object.values(unsettledSpotBalances).flat().concat(unsettledPerpPositions)
.length ? (
showTableView ? (
<Table>
<thead>
@ -86,7 +92,7 @@ const UnsettledTrades = ({
<TrBody key={mktAddress} className="text-sm">
<Td>
<div className="flex items-center">
<MarketLogos market={market!} />
<MarketLogos market={market} />
<span>{market ? market.name : ''}</span>
</div>
</Td>
@ -121,6 +127,45 @@ const UnsettledTrades = ({
</TrBody>
)
})}
{unsettledPerpPositions.map((position) => {
const market = group.getPerpMarketByMarketIndex(
position.marketIndex
)
return (
<TrBody key={position.marketIndex} className="text-sm">
<Td>
<div className="flex items-center">
<MarketLogos market={market} />
<span>{market ? market.name : ''}</span>
</div>
</Td>
<Td className="text-right font-mono">
<span></span>
</Td>
<Td className="text-right font-mono">
{position.getUnsettledFunding(market).toNumber()}
</Td>
<Td>
<div className="flex justify-end">
<Tooltip content={t('trade:settle-funds')}>
<IconButton
onClick={() =>
handleSettleFunds(market.publicKey.toString())
}
size="small"
>
{settleMktAddress === market.publicKey.toString() ? (
<Loading className="h-4 w-4" />
) : (
<CheckIcon className="h-4 w-4" />
)}
</IconButton>
</Tooltip>
</div>
</Td>
</TrBody>
)
})}
</tbody>
</Table>
) : (
@ -138,7 +183,7 @@ const UnsettledTrades = ({
className="flex items-center justify-between border-b border-th-bkg-3 p-4"
>
<div className="flex items-center">
<MarketLogos market={market!} />
<MarketLogos market={market} />
<span>{market ? market.name : ''}</span>
</div>
<div className="flex items-center space-x-3">

6
hooks/useUnsettledSpotBalances.ts
View File

@ -1,13 +1,15 @@
import { toUiDecimals } from '@blockworks-foundation/mango-v4'
import mangoStore from '@store/mangoStore'
import { useMemo } from 'react'
import useMangoAccount from './useMangoAccount'
import useMangoGroup from './useMangoGroup'
export function useUnsettledSpotBalances() {
const mangoAccount = mangoStore((s) => s.mangoAccount.current)
const { group } = useMangoGroup()
const { mangoAccount } = useMangoAccount()
const openOrdersAccounts =
mangoStore.getState().mangoAccount.openOrderAccounts
const { group } = useMangoGroup()
const unsettledSpotBalances = useMemo(() => {
if (!group || !mangoAccount || !openOrdersAccounts) return {}
const unsettledBalances: Record<string, { base: number; quote: number }> =

4
public/locales/en/trade.json
View File

@ -1,6 +1,6 @@
{
"amount": "Amount",
"base": "Base Token",
"base": "Base",
"book": "Book",
"cancel-order-error": "Failed to cancel order",
"connect-orders": "Connect to view your open orders",
@ -21,7 +21,7 @@
"post": "Post",
"place-order": "Place {{side}} Order",
"placing-order": "Placing Order",
"quote": "Quote Token",
"quote": "Quote",
"settle-funds": "Settle Funds",
"settle-funds-error": "Failed to settle funds",
"show-asks": "Show Asks",