chore(trading): orderbook adjustments (#4293)

Co-authored-by: Ben <ben@vega.xyz>
Co-authored-by: Mikołaj Młodzikowski <mikolaj.mlodzikowski@gmail.com>
Co-authored-by: Joe Tsang <30622993+jtsang586@users.noreply.github.com>
Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com>
Co-authored-by: m.ray <16125548+MadalinaRaicu@users.noreply.github.com>
Co-authored-by: Art <artur@vegaprotocol.io>
Co-authored-by: Bartłomiej Głownia <bglownia@gmail.com>
Co-authored-by: Gordsport <83510148+gordsport@users.noreply.github.com>

apps/trading-e2e/src/integration/order-book.cy.ts

@@ -101,13 +101,14 @@ describe('order book', { tags: '@smoke' }, () => {
       '1,000',
       '10,000',
     ];
-    cy.getByTestId(priceResolution)
+    cy.getByTestId(priceResolution).click();
-      .find('option')
+    cy.get('[role="menu"]')
+      .find('[role="menuitem"]')
       .each(($el, index) => {
         expect($el.text()).to.equal(resolutions[index]);
       });
 
-    cy.getByTestId(priceResolution).select('0.0');
+    cy.get('[role="menuitem"]').eq(4).click();
     cy.getByTestId(resPrice).should('have.text', '99.0');
     cy.getByTestId(askPrice).should('not.exist');
     cy.getByTestId(bidPrice).should('not.exist');

libs/market-depth/src/lib/orderbook-row.tsx

@@ -13,8 +13,12 @@ interface OrderbookRowProps {
   price: string;
   onClick?: (args: { price?: string; size?: string }) => void;
   type: VolumeType;
+  width: number;
 }
 
+const HIDE_VOL_WIDTH = 150;
+const HIDE_CUMULATIVE_VOL_WIDTH = 220;
+
 const CumulationBar = ({
   cumulativeValue = 0,
   type,
@@ -26,7 +30,7 @@ const CumulationBar = ({
     <div
       data-testid={`${VolumeType.bid === type ? 'bid' : 'ask'}-bar`}
       className={classNames(
-        'absolute top-0 left-0 h-full transition-all',
+        'absolute top-0 left-0 h-full',
         type === VolumeType.bid
           ? 'bg-market-green-300 dark:bg-market-green/50'
           : 'bg-market-red-300 dark:bg-market-red/30'
@@ -90,12 +94,18 @@ export const OrderbookRow = React.memo(
     price,
     onClick,
     type,
+    width,
   }: OrderbookRowProps) => {
     const txtId = type === VolumeType.bid ? 'bid' : 'ask';
+    const cols =
+      width >= HIDE_CUMULATIVE_VOL_WIDTH ? 3 : width >= HIDE_VOL_WIDTH ? 2 : 1;
     return (
-      <div className="relative">
+      <div className="relative pr-1">
         <CumulationBar cumulativeValue={cumulativeRelativeValue} type={type} />
-        <div className="grid gap-1 text-right grid-cols-3">
+        <div
+          data-testid={`${txtId}-rows-container`}
+          className={classNames('grid gap-1 text-right', `grid-cols-${cols}`)}
+        >
           <PriceCell
             testId={`price-${price}`}
             value={BigInt(price)}
@@ -109,6 +119,7 @@ export const OrderbookRow = React.memo(
                 : 'text-market-green-600 dark:text-market-green'
             }
           />
+          {width >= HIDE_VOL_WIDTH && (
             <PriceCell
               testId={`${txtId}-vol-${price}`}
               onClick={(value) =>
@@ -124,6 +135,8 @@ export const OrderbookRow = React.memo(
                 positionDecimalPlaces
               )}
             />
+          )}
+          {width >= HIDE_CUMULATIVE_VOL_WIDTH && (
             <CumulativeVol
               testId={`cumulative-vol-${price}`}
               onClick={() =>
@@ -136,6 +149,7 @@ export const OrderbookRow = React.memo(
               positionDecimalPlaces={positionDecimalPlaces}
               cumulativeValue={cumulativeValue}
             />
+          )}
         </div>
       </div>
     );

libs/market-depth/src/lib/orderbook.spec.tsx

@@ -1,4 +1,5 @@
-import { render, fireEvent, waitFor, screen } from '@testing-library/react';
+import { render, waitFor, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { generateMockData, VolumeType } from './orderbook-data';
 import { Orderbook } from './orderbook';
 import * as orderbookData from './orderbook-data';
@@ -33,6 +34,7 @@ describe('Orderbook', () => {
   const decimalPlaces = 3;
 
   beforeEach(() => {
+    jest.clearAllMocks();
     mockOffsetSize(800, 768);
   });
   it('markPrice should be in the middle', async () => {
@@ -69,12 +71,17 @@ describe('Orderbook', () => {
       await screen.findByTestId(`middle-mark-price-${params.midPrice}`)
     ).toBeInTheDocument();
     // Before resolution change the price is 122.934
-    await fireEvent.click(await screen.getByTestId('price-122901'));
+    await userEvent.click(await screen.getByTestId('price-122901'));
     expect(onClickSpy).toBeCalledWith({ price: '122.901' });
-    const resolutionSelect = screen.getByTestId(
+
-      'resolution'
+    await userEvent.click(screen.getByTestId('resolution'));
-    ) as HTMLSelectElement;
+
-    await fireEvent.change(resolutionSelect, { target: { value: '10' } });
+    await waitFor(() => {
+      expect(screen.getByRole('menu')).toBeInTheDocument();
+    });
+
+    await userEvent.click(screen.getAllByRole('menuitem')[1]);
+
     expect(orderbookData.compactRows).toHaveBeenCalledWith(
       mockedData.bids,
       VolumeType.bid,
@@ -85,7 +92,88 @@ describe('Orderbook', () => {
       VolumeType.ask,
       10
     );
-    await fireEvent.click(await screen.getByTestId('price-12294'));
+    await userEvent.click(await screen.getByTestId('price-12294'));
     expect(onClickSpy).toBeCalledWith({ price: '122.94' });
   });
+
+  it('plus - minus buttons should change resolution', async () => {
+    const onClickSpy = jest.fn();
+    jest.spyOn(orderbookData, 'compactRows');
+    const mockedData = generateMockData(params);
+    render(
+      <Orderbook
+        decimalPlaces={decimalPlaces}
+        positionDecimalPlaces={0}
+        onClick={onClickSpy}
+        {...mockedData}
+        assetSymbol="USD"
+      />
+    );
+    expect((orderbookData.compactRows as jest.Mock).mock.lastCall[2]).toEqual(
+      1
+    );
+    expect(screen.getByTestId('minus-button')).toBeDisabled();
+    userEvent.click(screen.getByTestId('plus-button'));
+    await waitFor(() => {
+      expect((orderbookData.compactRows as jest.Mock).mock.lastCall[2]).toEqual(
+        10
+      );
+    });
+    expect(screen.getByTestId('minus-button')).not.toBeDisabled();
+    userEvent.click(screen.getByTestId('minus-button'));
+    await waitFor(() => {
+      expect((orderbookData.compactRows as jest.Mock).mock.lastCall[2]).toEqual(
+        1
+      );
+    });
+    expect(screen.getByTestId('minus-button')).toBeDisabled();
+    await userEvent.click(screen.getByTestId('resolution'));
+
+    await waitFor(() => {
+      expect(screen.getByRole('menu')).toBeInTheDocument();
+    });
+    await userEvent.click(screen.getAllByRole('menuitem')[5]);
+    await waitFor(() => {
+      expect((orderbookData.compactRows as jest.Mock).mock.lastCall[2]).toEqual(
+        100000
+      );
+    });
+    expect(screen.getByTestId('plus-button')).toBeDisabled();
+  });
+
+  it('two columns', () => {
+    mockOffsetSize(200, 768);
+    const onClickSpy = jest.fn();
+    const mockedData = generateMockData(params);
+    render(
+      <Orderbook
+        decimalPlaces={decimalPlaces}
+        positionDecimalPlaces={0}
+        onClick={onClickSpy}
+        {...mockedData}
+        assetSymbol="USD"
+      />
+    );
+    screen.getAllByTestId('bid-rows-container').forEach((item) => {
+      expect(item).toHaveClass('grid-cols-2');
+    });
+  });
+
+  it('one column', () => {
+    mockOffsetSize(140, 768);
+    const onClickSpy = jest.fn();
+    const mockedData = generateMockData(params);
+    render(
+      <Orderbook
+        decimalPlaces={decimalPlaces}
+        positionDecimalPlaces={0}
+        onClick={onClickSpy}
+        {...mockedData}
+        assetSymbol="USD"
+      />
+    );
+    screen.getAllByTestId('ask-rows-container').forEach((item) => {
+      expect(item).toHaveClass('grid-cols-1');
+    });
+  });
 });

libs/market-depth/src/lib/orderbook.tsx

@@ -1,16 +1,25 @@
-import { useMemo } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import ReactVirtualizedAutoSizer from 'react-virtualized-auto-sizer';
 import {
   addDecimalsFormatNumber,
   formatNumberFixed,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
+import { usePrevious } from '@vegaprotocol/react-helpers';
 import { OrderbookRow } from './orderbook-row';
 import type { OrderbookRowData } from './orderbook-data';
 import { compactRows, VolumeType } from './orderbook-data';
-import { Splash } from '@vegaprotocol/ui-toolkit';
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Splash,
+  VegaIcon,
+  VegaIconNames,
+} from '@vegaprotocol/ui-toolkit';
 import classNames from 'classnames';
-import { useState } from 'react';
 import type { PriceLevelFieldsFragment } from './__generated__/MarketDepth';
 
 // Sets row height, will be used to calculate number of rows that can be
@@ -19,6 +28,19 @@ export const rowHeight = 17;
 const rowGap = 1;
 const midHeight = 30;
 
+type PriceChange = 'up' | 'down' | 'none';
+
+const PRICE_CHANGE_ICON_MAP: Readonly<Record<PriceChange, VegaIconNames>> = {
+  up: VegaIconNames.ARROW_UP,
+  down: VegaIconNames.ARROW_DOWN,
+  none: VegaIconNames.BULLET,
+};
+const PRICE_CHANGE_CLASS_MAP: Readonly<Record<PriceChange, string>> = {
+  up: 'text-market-green-600 dark:text-market-green',
+  down: 'text-market-red dark:text-market-red',
+  none: 'text-vega-blue-500',
+};
+
 const OrderbookTable = ({
   rows,
   resolution,
@@ -26,6 +48,7 @@ const OrderbookTable = ({
   decimalPlaces,
   positionDecimalPlaces,
   onClick,
+  width,
 }: {
   rows: OrderbookRowData[];
   resolution: number;
@@ -33,6 +56,7 @@ const OrderbookTable = ({
   positionDecimalPlaces: number;
   type: VolumeType;
   onClick?: (args: { price?: string; size?: string }) => void;
+  width: number;
 }) => {
   return (
     <div
@@ -59,6 +83,7 @@ const OrderbookTable = ({
             cumulativeValue={data.cumulativeVol.value}
             cumulativeRelativeValue={data.cumulativeVol.relativeValue}
             type={type}
+            width={width}
           />
         ))}
       </div>
@@ -99,12 +124,50 @@ export const Orderbook = ({
   const groupedBids = useMemo(() => {
     return compactRows(bids, VolumeType.bid, resolution);
   }, [bids, resolution]);
+  const [isOpen, setOpen] = useState(false);
+  const previousMidPrice = usePrevious(midPrice);
+  const priceChangeRef = useRef<'up' | 'down' | 'none'>('none');
+  if (midPrice && previousMidPrice !== midPrice) {
+    priceChangeRef.current =
+      (previousMidPrice || '') > midPrice ? 'down' : 'up';
+  }
+
+  const priceChangeIcon = (
+    <span
+      className={classNames(PRICE_CHANGE_CLASS_MAP[priceChangeRef.current])}
+    >
+      <VegaIcon name={PRICE_CHANGE_ICON_MAP[priceChangeRef.current]} />
+    </span>
+  );
+
+  const formatResolution = (r: number) => {
+    return formatNumberFixed(
+      Math.log10(r) - decimalPlaces > 0
+        ? Math.pow(10, Math.log10(r) - decimalPlaces)
+        : 0,
+      decimalPlaces - Math.log10(r)
+    );
+  };
+
+  const increaseResolution = () => {
+    const index = resolutions.indexOf(resolution);
+    if (index < resolutions.length - 1) {
+      setResolution(resolutions[index + 1]);
+    }
+  };
+
+  const decreaseResolution = () => {
+    const index = resolutions.indexOf(resolution);
+    if (index > 0) {
+      setResolution(resolutions[index - 1]);
+    }
+  };
 
   return (
     <div className="h-full pl-1 text-xs grid grid-rows-[1fr_min-content]">
       <div>
-        <ReactVirtualizedAutoSizer disableWidth>
+        <ReactVirtualizedAutoSizer>
-          {({ height }) => {
+          {({ width, height }) => {
             const limit = Math.max(
               1,
               Math.floor((height - midHeight) / 2 / (rowHeight + rowGap))
@@ -116,6 +179,7 @@ export const Orderbook = ({
                 className="overflow-hidden grid"
                 data-testid="orderbook-grid-element"
                 style={{
+                  width: width + 'px',
                   height: height + 'px',
                   gridTemplateRows: `1fr ${midHeight}px 1fr`, // cannot use tailwind here as tailwind will not parse a class string with interpolation
                 }}
@@ -129,6 +193,7 @@ export const Orderbook = ({
                       decimalPlaces={decimalPlaces}
                       positionDecimalPlaces={positionDecimalPlaces}
                       onClick={onClick}
+                      width={width}
                     />
                     <div className="flex items-center justify-center gap-2">
                       {midPrice && (
@@ -140,6 +205,7 @@ export const Orderbook = ({
                             {addDecimalsFormatNumber(midPrice, decimalPlaces)}
                           </span>
                           <span className="text-base">{assetSymbol}</span>
+                          {priceChangeIcon}
                         </>
                       )}
                     </div>
@@ -150,6 +216,7 @@ export const Orderbook = ({
                       decimalPlaces={decimalPlaces}
                       positionDecimalPlaces={positionDecimalPlaces}
                       onClick={onClick}
+                      width={width}
                     />
                   </>
                 ) : (
@@ -162,26 +229,61 @@ export const Orderbook = ({
           }}
         </ReactVirtualizedAutoSizer>
       </div>
-      <div className="border-t border-default">
+      <div className="border-t border-default flex">
-        <select
+        <Button
-          onChange={(e) => {
+          onClick={increaseResolution}
-            setResolution(Number(e.currentTarget.value));
+          size="xs"
-          }}
+          disabled={resolutions.indexOf(resolution) >= resolutions.length - 1}
-          value={resolution}
+          className="text-black dark:text-white rounded-none border-y-0 border-l-0 flex items-center border-r-1"
-          className="block bg-neutral-100 dark:bg-neutral-700 font-mono text-right"
+          data-testid="plus-button"
-          data-testid="resolution"
         >
+          <VegaIcon size={12} name={VegaIconNames.PLUS} />
+        </Button>
+        <DropdownMenu
+          open={isOpen}
+          onOpenChange={(open) => setOpen(open)}
+          trigger={
+            <DropdownMenuTrigger
+              data-testid="resolution"
+              className="flex justify-between px-1 items-center"
+              style={{
+                width: `${
+                  Math.max.apply(
+                    null,
+                    resolutions.map((item) => formatResolution(item).length)
+                  ) + 3
+                }ch`,
+              }}
+            >
+              <VegaIcon
+                size={12}
+                name={
+                  isOpen ? VegaIconNames.CHEVRON_UP : VegaIconNames.CHEVRON_DOWN
+                }
+              />
+              <div className="text-xs text-left">
+                {formatResolution(resolution)}
+              </div>
+            </DropdownMenuTrigger>
+          }
+        >
+          <DropdownMenuContent align="start">
             {resolutions.map((r) => (
-            <option key={r} value={r}>
+              <DropdownMenuItem key={r} onClick={() => setResolution(r)}>
-              {formatNumberFixed(
+                {formatResolution(r)}
-                Math.log10(r) - decimalPlaces > 0
+              </DropdownMenuItem>
-                  ? Math.pow(10, Math.log10(r) - decimalPlaces)
-                  : 0,
-                decimalPlaces - Math.log10(r)
-              )}
-            </option>
             ))}
-        </select>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <Button
+          onClick={decreaseResolution}
+          size="xs"
+          disabled={resolutions.indexOf(resolution) <= 0}
+          className="text-black dark:text-white rounded-none border-y-0 border-l-1 flex items-center"
+          data-testid="minus-button"
+        >
+          <VegaIcon size={12} name={VegaIconNames.MINUS} />
+        </Button>
       </div>
     </div>
   );

libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-arrow-up.tsx

@@ -0,0 +1,18 @@
+export const IconArrowUp = ({ size = 16 }: { size: number }) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16">
+      <path
+        d="M 7.47,3.63
+           C 7.47,3.63 2.37,8.72 2.37,8.72
+             2.37,8.72 1.63,7.98 1.63,7.98
+             1.63,7.98 8.00,1.60 8.00,1.60
+             8.00,1.60 14.37,7.98 14.37,7.98
+             14.37,7.98 13.63,8.72 13.63,8.72
+             13.63,8.72 8.53,3.63 8.53,3.63
+             8.53,3.63 8.53,14.35 8.53,14.35
+             8.53,14.35 7.47,14.35 7.47,14.35
+             7.47,14.35 7.47,3.63 7.47,3.63 Z"
+      />
+    </svg>
+  );
+};

libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-bullet.tsx

@@ -0,0 +1,7 @@
+export const IconBullet = ({ size = 16 }: { size: number }) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16">
+      <circle cx="8" cy="8" r="6" />
+    </svg>
+  );
+};

libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-minus.tsx

@@ -0,0 +1,13 @@
+export const IconMinus = ({ size = 16 }: { size: number }) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16">
+      <path
+        d="M 0.92,8.58
+           C 0.92,8.58 0.92,7.48 0.92,7.48
+             0.92,7.48 15.01,7.48 15.01,7.48
+             15.01,7.48 15.01,8.58 15.01,8.58
+             15.01,8.58 0.92,8.58 0.92,8.58 Z"
+      />
+    </svg>
+  );
+};

libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-plus.tsx

@@ -0,0 +1,21 @@
+export const IconPlus = ({ size = 16 }: { size: number }) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16">
+      <path
+        d="M 7.43,15.24
+           C 7.43,15.24 7.43,8.58 7.43,8.58
+             7.43,8.58 0.92,8.58 0.92,8.58
+             0.92,8.58 0.92,7.48 0.92,7.48
+             0.92,7.48 7.43,7.48 7.43,7.48
+             7.43,7.48 7.43,0.85 7.43,0.85
+             7.43,0.85 8.48,0.85 8.48,0.85
+             8.48,0.85 8.48,7.48 8.48,7.48
+             8.48,7.48 15.01,7.48 15.01,7.48
+             15.01,7.48 15.01,8.58 15.01,8.58
+             15.01,8.58 8.48,8.58 8.48,8.58
+             8.48,8.58 8.48,15.24 8.48,15.24
+             8.48,15.24 7.43,15.24 7.43,15.24 Z"
+      />
+    </svg>
+  );
+};

libs/ui-toolkit/src/components/icon/vega-icons/vega-icon-record.ts

@@ -1,6 +1,8 @@
 import { IconArrowDown } from './svg-icons/icon-arrow-down';
+import { IconArrowUp } from './svg-icons/icon-arrow-up';
 import { IconArrowRight } from './svg-icons/icon-arrow-right';
 import { IconBreakdown } from './svg-icons/icon-breakdown';
+import { IconBullet } from './svg-icons/icon-bullet';
 import { IconChevronDown } from './svg-icons/icon-chevron-down';
 import { IconChevronLeft } from './svg-icons/icon-chevron-left';
 import { IconChevronUp } from './svg-icons/icon-chevron-up';
@@ -13,9 +15,11 @@ import { IconGlobe } from './svg-icons/icon-globe';
 import { IconInfo } from './svg-icons/icon-info';
 import { IconKebab } from './svg-icons/icon-kebab';
 import { IconLinkedIn } from './svg-icons/icon-linkedin';
+import { IconMinus } from './svg-icons/icon-minus';
 import { IconMoon } from './svg-icons/icon-moon';
 import { IconOpenExternal } from './svg-icons/icon-open-external';
 import { IconQuestionMark } from './svg-icons/icon-question-mark';
+import { IconPlus } from './svg-icons/icon-plus';
 import { IconTick } from './svg-icons/icon-tick';
 import { IconTransfer } from './svg-icons/icon-transfer';
 import { IconTrendUp } from './svg-icons/icon-trend-up';
@@ -24,8 +28,10 @@ import { IconWithdraw } from './svg-icons/icon-withdraw';
 
 export enum VegaIconNames {
   ARROW_DOWN = 'arrow-down',
+  ARROW_UP = 'arrow-up',
   ARROW_RIGHT = 'arrow-right',
   BREAKDOWN = 'breakdown',
+  BULLET = 'bullet',
   CHEVRON_DOWN = 'chevron-down',
   CHEVRON_LEFT = 'chevron-left',
   CHEVRON_UP = 'chevron-up',
@@ -38,9 +44,11 @@ export enum VegaIconNames {
   INFO = 'info',
   KEBAB = 'kebab',
   LINKEDIN = 'linkedin',
+  MINUS = 'minus',
   MOON = 'moon',
   OPEN_EXTERNAL = 'open-external',
   QUESTION_MARK = 'question-mark',
+  PLUS = 'plus',
   TICK = 'tick',
   TRANSFER = 'transfer',
   TREND_UP = 'trend-up',
@@ -53,6 +61,7 @@ export const VegaIconNameMap: Record<
   ({ size }: { size: number }) => JSX.Element
 > = {
   'arrow-down': IconArrowDown,
+  'arrow-up': IconArrowUp,
   'arrow-right': IconArrowRight,
   'chevron-down': IconChevronDown,
   'chevron-left': IconChevronLeft,
@@ -61,6 +70,7 @@ export const VegaIconNameMap: Record<
   'question-mark': IconQuestionMark,
   'trend-up': IconTrendUp,
   breakdown: IconBreakdown,
+  bullet: IconBullet,
   copy: IconCopy,
   cross: IconCross,
   deposit: IconDeposit,
@@ -70,7 +80,9 @@ export const VegaIconNameMap: Record<
   info: IconInfo,
   kebab: IconKebab,
   linkedin: IconLinkedIn,
+  minus: IconMinus,
   moon: IconMoon,
+  plus: IconPlus,
   tick: IconTick,
   transfer: IconTransfer,
   twitter: IconTwitter,

libs/ui-toolkit/src/components/tabs/tabs.tsx

@@ -23,6 +23,7 @@ export const Tabs = ({
     }
     return children[0].props.id;
   });
+
   return (
     <TabsPrimitive.Root
       {...props}
@@ -30,7 +31,7 @@ export const Tabs = ({
       onValueChange={onValueChange || setActiveTab}
       className="h-full grid grid-rows-[min-content_1fr]"
     >
-      <div className="border-b border-default">
+      <div className="border-b border-default min-w-0">
         <TabsPrimitive.List
           className="flex flex-nowrap overflow-visible"
           role="tablist"