-
-
-
-
- Mango
-
-
+
+
+
+
+
+
+
+
+ Mango
+
+
+
-
-
-
-
}
- title={t('account')}
- pagePath="/"
- />
-
}
- title={t('swap')}
- pagePath="/swap"
- />
-
}
- title={t('trade')}
- pagePath="/trade"
- />
-
}
- title={t('stats')}
- pagePath="/stats"
- />
-
}
- title={t('settings')}
- pagePath="/settings"
- />
-
}
- title={t('more')}
- >
- {/*
+
+
+ }
+ title={
+
+
Health Check
+
+ {mangoAccount
+ ? mangoAccount.name
+ : connected
+ ? 'No Account'
+ : 'Connect'}
+
+
+ }
+ alignBottom
+ hideIconBg
+ >
+
+
+
-
-
- }
- title={
-
-
Health Check
-
- {mangoAccount
- ? mangoAccount.name
- : connected
- ? 'No Account'
- : 'Connect'}
-
-
- }
- alignBottom
- hideIconBg
- >
-
-
-
-
-
)
}
diff --git a/components/trade/GroupSize.tsx b/components/trade/GroupSize.tsx
index 40f0af1b..39b270e4 100644
--- a/components/trade/GroupSize.tsx
+++ b/components/trade/GroupSize.tsx
@@ -1,7 +1,6 @@
import React, { useMemo } from 'react'
import { Listbox } from '@headlessui/react'
import { ChevronDownIcon } from '@heroicons/react/20/solid'
-import { isEqual } from '../../utils'
const GroupSize = ({
tickSize,
@@ -72,6 +71,4 @@ const GroupSize = ({
)
}
-export default React.memo(GroupSize, (prevProps, nextProps) =>
- isEqual(prevProps, nextProps, ['tickSize', 'value'])
-)
+export default React.memo(GroupSize)
diff --git a/components/trade/Orderbook.tsx b/components/trade/Orderbook.tsx
index 8a984e18..cfd86a58 100644
--- a/components/trade/Orderbook.tsx
+++ b/components/trade/Orderbook.tsx
@@ -1,7 +1,7 @@
import { AccountInfo } from '@solana/web3.js'
import Big from 'big.js'
import mangoStore from '@store/mangoStore'
-import React, { useEffect, useMemo, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
import { Market, Orderbook as SpotOrderBook } from '@project-serum/serum'
import useInterval from '@components/shared/useInterval'
import isEqualLodash from 'lodash/isEqual'
@@ -152,7 +152,8 @@ const Orderbook = ({ depth = 12 }) => {
const { t } = useTranslation('common')
const selectedMarket = mangoStore((s) => s.selectedMarket.current)
- const [openOrderPrices, setOpenOrderPrices] = useState
([])
+ // const [openOrderPrices, setOpenOrderPrices] = useState([])
+ const [isScrolled, setIsScrolled] = useState(false)
const [orderbookData, setOrderbookData] = useState(null)
const [defaultLayout, setDefaultLayout] = useState(true)
const [displayCumulativeSize, setDisplayCumulativeSize] = useState(false)
@@ -162,9 +163,14 @@ const Orderbook = ({ depth = 12 }) => {
const currentOrderbookData = useRef(null)
const nextOrderbookData = useRef(null)
+ const orderbookElRef = useRef(null)
const previousDepth = usePrevious(depth)
const previousGrouping = usePrevious(grouping)
+ const depthArray = useMemo(() => {
+ return Array(depth).fill(0)
+ }, [depth])
+
const serum3MarketExternal = useMemo(() => {
const group = mangoStore.getState().group
if (!group || !selectedMarket) return
@@ -188,6 +194,13 @@ const Orderbook = ({ depth = 12 }) => {
[]
)
+ const verticallyCenterOrderbook = useCallback(() => {
+ const element = orderbookElRef.current
+ if (element) {
+ element.scrollTop = (element.scrollHeight - element.offsetHeight) / 2
+ }
+ }, [])
+
useInterval(() => {
const orderbook = mangoStore.getState().selectedMarket.orderbook
const group = mangoStore.getState().group
@@ -273,6 +286,9 @@ const Orderbook = ({ depth = 12 }) => {
spread,
spreadPercentage,
})
+ if (!isScrolled) {
+ verticallyCenterOrderbook()
+ }
} else {
setOrderbookData(null)
}
@@ -337,9 +353,17 @@ const Orderbook = ({ depth = 12 }) => {
}
}, [serum3MarketExternal])
- const onGroupSizeChange = (groupSize: number) => {
+ useEffect(() => {
+ function handleResize() {
+ verticallyCenterOrderbook()
+ }
+
+ window.addEventListener('resize', handleResize)
+ }, [verticallyCenterOrderbook])
+
+ const onGroupSizeChange = useCallback((groupSize: number) => {
setGrouping(groupSize)
- }
+ }, [])
if (!serum3MarketExternal) return null
@@ -409,35 +433,43 @@ const Orderbook = ({ depth = 12 }) => {
Size
Price
- {showSells
- ? orderbookData?.asks.map(
- ({
- price,
- size,
- cumulativeSize,
- sizePercent,
- maxSizePercent,
- }: cumOrderbookSide) => (
-
+
setIsScrolled(true)}
+ >
+ {showSells && orderbookData?.asks?.length
+ ? depthArray.map((_x, index) => {
+ return (
+
+ {orderbookData?.asks[index] ? (
+
+ ) : null}
+
)
- )
+ })
: null}
{showBuys && showSells ? (
@@ -452,34 +484,35 @@ const Orderbook = ({ depth = 12 }) => {
) : null}
- {showBuys
- ? orderbookData?.bids.map(
- ({
- price,
- size,
- cumulativeSize,
- sizePercent,
- maxSizePercent,
- }: cumOrderbookSide) => (
-
- )
- )
+ {showBuys && orderbookData?.bids?.length
+ ? depthArray.map((_x, index) => (
+
+ {orderbookData?.bids[index] ? (
+
+ ) : null}
+
+ ))
: null}