diff --git a/libs/market-depth/src/lib/orderbook-row.tsx b/libs/market-depth/src/lib/orderbook-row.tsx index 5f88239f5..701ed7e17 100644 --- a/libs/market-depth/src/lib/orderbook-row.tsx +++ b/libs/market-depth/src/lib/orderbook-row.tsx @@ -75,7 +75,56 @@ export const OrderbookRow = React.memo( ); } ); - OrderbookRow.displayName = 'OrderbookRow'; -export default OrderbookRow; +export const OrderbookContinuousRow = React.memo( + ({ + ask, + bid, + cumulativeAsk, + cumulativeBid, + cumulativeRelativeAsk, + cumulativeRelativeBid, + decimalPlaces, + positionDecimalPlaces, + indicativeVolume, + price, + relativeAsk, + relativeBid, + onClick, + }: OrderbookRowProps) => { + const type = bid ? 'bid' : 'ask'; + const value = bid || ask; + const relativeValue = bid ? relativeBid : relativeAsk; + return ( + <> + + onClick && onClick(addDecimal(price, decimalPlaces))} + valueFormatted={addDecimalsFixedFormatNumber(price, decimalPlaces)} + /> + + + ); + } +); +OrderbookContinuousRow.displayName = 'OrderbookContinuousRow'; diff --git a/libs/market-depth/src/lib/orderbook.spec.tsx b/libs/market-depth/src/lib/orderbook.spec.tsx index f8a5fab15..d505a6c3b 100644 --- a/libs/market-depth/src/lib/orderbook.spec.tsx +++ b/libs/market-depth/src/lib/orderbook.spec.tsx @@ -224,4 +224,37 @@ describe('Orderbook', () => { expect(onResolutionChange.mock.calls[0][0]).toBe(10); expect(onClickSpy).toBeCalledWith('122.99'); }); + + it('should have three or four columns', async () => { + window.innerHeight = 11 * rowHeight; + const { rerender } = render( + + ); + await waitFor(() => { + expect(screen.queryByText('Bid / Ask vol')).toBeInTheDocument(); + }); + rerender( + + ); + await waitFor(() => { + expect(screen.getByText('Bid vol')).toBeInTheDocument(); + expect(screen.getByText('Ask vol')).toBeInTheDocument(); + }); + await expect(screen.queryByText('Bid / Ask vol')).not.toBeInTheDocument(); + }); }); diff --git a/libs/market-depth/src/lib/orderbook.tsx b/libs/market-depth/src/lib/orderbook.tsx index eb8dda3a4..46eef4ee4 100644 --- a/libs/market-depth/src/lib/orderbook.tsx +++ b/libs/market-depth/src/lib/orderbook.tsx @@ -1,5 +1,12 @@ import colors from 'tailwindcss/colors'; -import { useEffect, useRef, useState, useCallback, Fragment } from 'react'; +import { + useEffect, + useRef, + useState, + useCallback, + Fragment, + useMemo, +} from 'react'; import classNames from 'classnames'; import { addDecimalsFixedFormatNumber, @@ -11,7 +18,7 @@ import { useThemeSwitcher, } from '@vegaprotocol/react-helpers'; import * as Schema from '@vegaprotocol/types'; -import { OrderbookRow } from './orderbook-row'; +import { OrderbookRow, OrderbookContinuousRow } from './orderbook-row'; import { createRow } from './orderbook-data'; import { Checkbox, Icon, Splash, TinyScroll } from '@vegaprotocol/ui-toolkit'; import type { OrderbookData, OrderbookRowData } from './orderbook-data'; @@ -472,39 +479,75 @@ export const Orderbook = ({ ); useResizeObserver(gridElement.current, gridResizeHandler); useResizeObserver(rootElement.current, rootElementResizeHandler); - - const tableBody = - data && data.length !== 0 ? ( -
- {data.map((data, i) => ( - - ))} + const isContinuousMode = + marketTradingMode === Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS; + const tableHeader = useMemo(() => { + return ( +
+ {isContinuousMode ? ( +
{t('Bid / Ask vol')}
+ ) : ( + <> +
{t('Bid vol')}
+
{t('Ask vol')}
+ + )} +
{t('Price')}
+
+ {t('Cumulative vol')} +
- ) : null; + ); + }, [isContinuousMode]); + + const OrderBookRowComponent = isContinuousMode + ? OrderbookContinuousRow + : OrderbookRow; + + const tableBody = data?.length ? ( +
+ {data.map((data, i) => ( + + ))} +
+ ) : null; const c = theme === 'dark' ? colors.neutral[600] : colors.neutral[300]; - const gradientStyles = `linear-gradient(${c},${c}) 24.6% 0/1px 100% no-repeat, linear-gradient(${c},${c}) 50% 0/1px 100% no-repeat, linear-gradient(${c},${c}) 75.2% 0/1px 100% no-repeat`; + const gradientStyles = isContinuousMode + ? `linear-gradient(${c},${c}) 33.4% 0/1px 100% no-repeat, linear-gradient(${c},${c}) 66.7% 0/1px 100% no-repeat` + : `linear-gradient(${c},${c}) 25% 0/1px 100% no-repeat, linear-gradient(${c},${c}) 50% 0/1px 100% no-repeat, linear-gradient(${c},${c}) 75% 0/1px 100% no-repeat`; const resolutions = new Array(decimalPlaces + 1) .fill(null) @@ -531,21 +574,11 @@ export const Orderbook = ({ /* eslint-disable jsx-a11y/no-static-element-interactions */ return (
setDebug(!debug)} > -
-
{t('Bid vol')}
-
{t('Ask vol')}
-
{t('Price')}
-
- {t('Cumulative vol')} -
-
+ {tableHeader}