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

Revert "fix vertical centering orderbook" 

This reverts commit dc649f543c.
This commit is contained in:
saml33 2022-09-26 15:59:40 +10:00
parent 6c4ad1ffb8
commit b6d0e9c9f5
1 changed files with 88 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

164
components/trade/Orderbook.tsx
View File

@ -358,9 +358,11 @@ const Orderbook = () => {
}, [serum3MarketExternal])
useEffect(() => {
window.addEventListener('resize', verticallyCenterOrderbook)
// const id = setTimeout(verticallyCenterOrderbook, 400)
// return () => clearTimeout(id)
function handleResize() {
verticallyCenterOrderbook()
}
handleResize()
window.addEventListener('resize', handleResize)
}, [verticallyCenterOrderbook])
const onGroupSizeChange = useCallback((groupSize: number) => {
@ -371,6 +373,8 @@ const Orderbook = () => {
setIsScrolled(true)
}, [])
if (!serum3MarketExternal) return null
return (
<div className="flex h-full flex-col">
<div className="flex items-center justify-between border-b border-th-bkg-3 px-4 py-2">
@ -404,30 +408,74 @@ const Orderbook = () => {
</button>
</Tooltip>
</div>
{serum3MarketExternal ? (
<Tooltip content="Grouping" placement="top">
<GroupSize
tickSize={serum3MarketExternal.tickSize}
onChange={onGroupSizeChange}
value={grouping}
/>
</Tooltip>
) : null}
<Tooltip content="Grouping" placement="top">
<GroupSize
tickSize={serum3MarketExternal.tickSize}
onChange={onGroupSizeChange}
value={grouping}
/>
</Tooltip>
</div>
<div className="grid grid-cols-2 px-4 pt-2 pb-1 text-xxs text-th-fgd-4">
<div className="col-span-1 text-right">{t('size')}</div>
<div className="col-span-1 text-right">{t('price')}</div>
</div>
<div
className="hide-scroll relative h-full overflow-y-scroll"
ref={orderbookElRef}
onScroll={handleScroll}
>
{showSells
? depthArray.map((_x, index) => {
return (
<div className="h-[24px]" key={index}>
{!!orderbookData?.asks[index] && serum3MarketExternal ? (
{orderbookData ? (
<div
className="hide-scroll relative h-full overflow-y-scroll"
ref={orderbookElRef}
onScroll={handleScroll}
>
{showSells && orderbookData?.asks?.length
? depthArray.map((_x, index) => {
return (
<div key={index}>
{orderbookData?.asks[index] ? (
<MemoizedOrderbookRow
minOrderSize={serum3MarketExternal.minOrderSize}
tickSize={serum3MarketExternal.tickSize}
// hasOpenOrder={hasOpenOrderForPriceGroup(
// openOrderPrices,
// price,
// grouping
// )}
key={orderbookData?.asks[index].price}
price={orderbookData?.asks[index].price}
size={
displayCumulativeSize
? orderbookData?.asks[index].cumulativeSize
: orderbookData?.asks[index].size
}
side="sell"
sizePercent={
displayCumulativeSize
? orderbookData?.asks[index].maxSizePercent
: orderbookData?.asks[index].sizePercent
}
grouping={grouping}
/>
) : null}
</div>
)
})
: null}
{showBuys && showSells ? (
<div className="my-2 grid grid-cols-2 border-y border-th-bkg-3 py-2 px-4 text-xs text-th-fgd-4">
<div className="col-span-1 flex justify-between">
<div className="text-xxs">{t('spread')}</div>
<div className="font-mono">
{orderbookData?.spreadPercentage.toFixed(2)}%
</div>
</div>
<div className="col-span-1 text-right font-mono">
{orderbookData?.spread.toFixed(2)}
</div>
</div>
) : null}
{showBuys && orderbookData?.bids?.length
? depthArray.map((_x, index) => (
<div key={index}>
{orderbookData?.bids[index] ? (
<MemoizedOrderbookRow
minOrderSize={serum3MarketExternal.minOrderSize}
tickSize={serum3MarketExternal.tickSize}
@ -436,70 +484,34 @@ const Orderbook = () => {
// price,
// grouping
// )}
key={orderbookData?.asks[index].price}
price={orderbookData?.asks[index].price}
price={orderbookData?.bids[index].price}
size={
displayCumulativeSize
? orderbookData?.asks[index].cumulativeSize
: orderbookData?.asks[index].size
? orderbookData?.bids[index].cumulativeSize
: orderbookData?.bids[index].size
}
side="sell"
side="buy"
sizePercent={
displayCumulativeSize
? orderbookData?.asks[index].maxSizePercent
: orderbookData?.asks[index].sizePercent
? orderbookData?.bids[index].maxSizePercent
: orderbookData?.bids[index].sizePercent
}
grouping={grouping}
/>
) : null}
</div>
)
})
: null}
{showBuys && showSells ? (
<div className="my-2 grid grid-cols-2 border-y border-th-bkg-3 py-2 px-4 text-xs text-th-fgd-4">
<div className="col-span-1 flex justify-between">
<div className="text-xxs">{t('spread')}</div>
<div className="font-mono">
{orderbookData?.spreadPercentage.toFixed(2)}%
</div>
</div>
<div className="col-span-1 text-right font-mono">
{orderbookData?.spread.toFixed(2)}
</div>
</div>
) : null}
{showBuys
? depthArray.map((_x, index) => (
<div className="h-[24px]" key={index}>
{!!orderbookData?.bids[index] && serum3MarketExternal ? (
<MemoizedOrderbookRow
minOrderSize={serum3MarketExternal.minOrderSize}
tickSize={serum3MarketExternal.tickSize}
// hasOpenOrder={hasOpenOrderForPriceGroup(
// openOrderPrices,
// price,
// grouping
// )}
price={orderbookData?.bids[index].price}
size={
displayCumulativeSize
? orderbookData?.bids[index].cumulativeSize
: orderbookData?.bids[index].size
}
side="buy"
sizePercent={
displayCumulativeSize
? orderbookData?.bids[index].maxSizePercent
: orderbookData?.bids[index].sizePercent
}
grouping={grouping}
/>
) : null}
</div>
))
: null}
</div>
))
: null}
</div>
) : (
<div className="space-y-[1px] px-4">
{depthArray.map((_x, index) => (
<SheenLoader className="flex flex-1" key={index}>
<div className="h-5 w-full rounded bg-th-bkg-2" />
</SheenLoader>
))}
</div>
)}
</div>
)
}