feat(market-depth): additional orderbook grouping levels (#4658)

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

@@ -1,117 +0,0 @@
-const orderbookTab = 'Orderbook';
-const orderbookTable = 'tab-orderbook';
-const askPrice = 'price-9894185';
-const bidPrice = 'price-9889001';
-const askVolume = 'ask-vol-9894185';
-const bidVolume = 'bid-vol-9889001';
-const askCumulative = 'cumulative-vol-9894185';
-const bidCumulative = 'cumulative-vol-9889001';
-const midPrice = 'last-traded-4612690000';
-const priceResolution = 'resolution';
-const dealTicketPrice = 'order-price';
-const dealTicketSize = 'order-size';
-const resPrice = 'price-990';
-
-describe('order book', { tags: '@smoke' }, () => {
-  before(() => {
-    cy.setOnBoardingViewed();
-    cy.mockTradingPage();
-    cy.mockSubscription();
-    cy.visit('/#/markets/market-0');
-    cy.wait('@Markets');
-  });
-
-  beforeEach(() => {
-    cy.mockTradingPage();
-  });
-
-  it('show order book', () => {
-    // 6003-ORDB-001
-    // 6003-ORDB-002
-    cy.getByTestId(orderbookTab).click();
-    cy.getByTestId(orderbookTable).should('be.visible');
-    cy.getByTestId(orderbookTable).should('not.be.empty');
-  });
-
-  it('show orders prices', () => {
-    // 6003-ORDB-003
-    cy.getByTestId(askPrice).should('have.text', '98.94185');
-    cy.getByTestId(bidPrice).should('have.text', '98.89001');
-  });
-
-  it('show prices volumes', () => {
-    // 6003-ORDB-004
-    cy.getByTestId(askVolume).should('have.text', '1');
-    cy.getByTestId(bidVolume).should('have.text', '1');
-  });
-
-  it('show prices cumulative volumes', () => {
-    // 6003-ORDB-005
-    cy.getByTestId(askCumulative).should('have.text', '38');
-    cy.getByTestId(bidCumulative).should('have.text', '7');
-  });
-
-  it('show mid price', () => {
-    // 6003-ORDB-006
-    cy.getByTestId(midPrice).should('have.text', '46,126.90');
-  });
-
-  it('sort prices descending', () => {
-    // 6003-ORDB-007
-    const prices: number[] = [];
-    cy.getByTestId(orderbookTable).within(() => {
-      cy.get('[data-testid*=price]')
-        .each(($el) => {
-          prices.push(Number($el.text()));
-        })
-        .then(() => {
-          expect(prices).to.deep.equal(prices.sort((a, b) => b - a));
-        });
-    });
-  });
-
-  it('copy price to deal ticket form', () => {
-    // 6003-ORDB-009
-    cy.getByTestId(askPrice).click();
-    cy.getByTestId(dealTicketPrice).should('have.value', '98.94185');
-  });
-
-  it('copy size to deal ticket form', () => {
-    // 6003-ORDB-009
-    cy.getByTestId(bidCumulative).click();
-    cy.getByTestId(dealTicketSize).should('have.value', '7');
-  });
-
-  it('copy size to deal ticket form', () => {
-    // 6003-ORDB-009
-    cy.getByTestId(bidVolume).click();
-    cy.getByTestId(dealTicketSize).should('have.value', '1');
-  });
-
-  it('change price resolution', () => {
-    // 6003-ORDB-008
-    const resolutions = [
-      '0.00000',
-      '0.0000',
-      '0.000',
-      '0.00',
-      '0.0',
-      '0',
-      '10',
-      '100',
-      '1,000',
-      '10,000',
-    ];
-    cy.getByTestId(priceResolution).click();
-    cy.get('[role="menu"]')
-      .find('[role="menuitem"]')
-      .each(($el, index) => {
-        expect($el.text()).to.equal(resolutions[index]);
-      });
-
-    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-controls.tsx

@@ -7,7 +7,7 @@ import {
   TradingDropdownContent,
   TradingDropdownItem,
 } from '@vegaprotocol/ui-toolkit';
-import { formatNumberFixed } from '@vegaprotocol/utils';
+import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
 
 export const OrderbookControls = ({
   lastTradedPrice,
@@ -15,27 +15,14 @@ export const OrderbookControls = ({
   decimalPlaces,
   setResolution,
 }: {
-  lastTradedPrice: string | undefined;
+  lastTradedPrice: string;
   resolution: number;
   decimalPlaces: number;
   setResolution: (resolution: number) => void;
 }) => {
   const [isOpen, setOpen] = useState(false);
 
-  const resolutions = new Array(
+  const resolutions = createResolutions(lastTradedPrice, decimalPlaces);
-    Math.max(lastTradedPrice?.toString().length ?? 0, decimalPlaces + 1)
-  )
-    .fill(null)
-    .map((v, i) => Math.pow(10, i));
-
-  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);
@@ -56,7 +43,7 @@ export const OrderbookControls = ({
       <button
         onClick={increaseResolution}
         disabled={resolutions.indexOf(resolution) >= resolutions.length - 1}
-        className="flex items-center px-2 border-r cursor-pointer border-default"
+        className="flex items-center px-2 border-r cursor-pointer border-default disabled:cursor-default"
         data-testid="plus-button"
       >
         <VegaIcon size={12} name={VegaIconNames.PLUS} />
@@ -67,12 +54,14 @@ export const OrderbookControls = ({
         trigger={
           <TradingDropdownTrigger data-testid="resolution">
             <button
-              className="flex items-center px-2 text-left gap-1"
+              className="flex items-center justify-between px-2 gap-1"
               style={{
                 minWidth: `${
                   Math.max.apply(
                     null,
-                    resolutions.map((item) => formatResolution(item).length)
+                    resolutions.map(
+                      (item) => formatResolution(item, decimalPlaces).length
+                    )
                   ) + 5
                 }ch`,
               }}
@@ -83,15 +72,19 @@ export const OrderbookControls = ({
                   isOpen ? VegaIconNames.CHEVRON_UP : VegaIconNames.CHEVRON_DOWN
                 }
               />
-              {formatResolution(resolution)}
+              {formatResolution(resolution, decimalPlaces)}
             </button>
           </TradingDropdownTrigger>
         }
       >
         <TradingDropdownContent align="start">
           {resolutions.map((r) => (
-            <TradingDropdownItem key={r} onClick={() => setResolution(r)}>
+            <TradingDropdownItem
-              {formatResolution(r)}
+              key={r}
+              onClick={() => setResolution(r)}
+              className="justify-end"
+            >
+              {formatResolution(r, decimalPlaces)}
             </TradingDropdownItem>
           ))}
         </TradingDropdownContent>
@@ -99,7 +92,7 @@ export const OrderbookControls = ({
       <button
         onClick={decreaseResolution}
         disabled={resolutions.indexOf(resolution) <= 0}
-        className="flex items-center px-2 cursor-pointer border-x border-default"
+        className="flex items-center px-2 cursor-pointer border-x border-default disabled:cursor-default"
         data-testid="minus-button"
       >
         <VegaIcon size={12} name={VegaIconNames.MINUS} />
@@ -107,3 +100,49 @@ export const OrderbookControls = ({
     </div>
   );
 };
+
+export const formatResolution = (r: number, decimalPlaces: number) => {
+  let num = addDecimalsFormatNumber(r, decimalPlaces);
+
+  // Remove trailing zeroes
+  num = num.replace(/\.?0+$/, '');
+
+  return num;
+};
+
+/**
+ * Create a list of resolutions based on the largest and smallest
+ * possible values using the last traded price and the market
+ * decimal places
+ */
+export const createResolutions = (
+  lastTradedPrice: string,
+  decimalPlaces: number
+) => {
+  // number of levels determined by either the number
+  // of digits in the last traded price OR the number of decimal
+  // places. For example:
+  //
+  // last traded = 1 (0.001)
+  // dps = 3
+  // result = 3
+  //
+  // last traded = 100001 (1000.01
+  // dps = 2
+  // result = 6
+  const levelCount = Math.max(lastTradedPrice.length ?? 0, decimalPlaces + 1);
+  const generatedResolutions = new Array(levelCount)
+    .fill(null)
+    .map((_, i) => Math.pow(10, i));
+  const customResolutions = [2, 5, 20, 50, 200, 500];
+  const combined = customResolutions.concat(generatedResolutions);
+  combined.sort((a, b) => a - b);
+
+  // Remove any resolutions higher than the generated ones as
+  // we dont want a custom resolution higher than necessary
+  const resolutions = combined.filter((r) => {
+    return r <= generatedResolutions[generatedResolutions.length - 1];
+  });
+
+  return resolutions;
+};

libs/market-depth/src/lib/orderbook-data.ts

@@ -12,7 +12,7 @@ export interface OrderbookRowData {
   cumulativeVol: number;
 }
 
-export const getPriceLevel = (price: string | bigint, resolution: number) => {
+export const getPriceLevel = (price: string, resolution: number) => {
   const p = BigInt(price);
   const r = BigInt(resolution);
   let priceLevel = (p / r) * r;
@@ -43,7 +43,7 @@ const updateCumulativeVolumeByType = (
 };
 
 export const compactRows = (
-  data: PriceLevelFieldsFragment[] | null | undefined,
+  data: PriceLevelFieldsFragment[],
   dataType: VolumeType,
   resolution: number
 ) => {

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

@@ -13,6 +13,7 @@ interface OrderbookRowProps {
   cumulativeVolume: number;
   decimalPlaces: number;
   positionDecimalPlaces: number;
+  priceFormatDecimalPlaces: number;
   price: string;
   onClick: (args: { price?: string; size?: string }) => void;
   type: VolumeType;
@@ -26,6 +27,7 @@ export const OrderbookRow = memo(
     cumulativeVolume,
     decimalPlaces,
     positionDecimalPlaces,
+    priceFormatDecimalPlaces,
     price,
     onClick,
     type,
@@ -35,6 +37,7 @@ export const OrderbookRow = memo(
     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 px-1">
         <CumulationBar
@@ -54,7 +57,8 @@ export const OrderbookRow = memo(
               value={BigInt(price)}
               valueFormatted={addDecimalsFixedFormatNumber(
                 price,
-                decimalPlaces
+                decimalPlaces,
+                priceFormatDecimalPlaces
               )}
               className={classNames({
                 'text-market-red dark:text-market-red': type === VolumeType.ask,

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

@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event';
 import { generateMockData, VolumeType } from './orderbook-data';
 import { Orderbook, OrderbookMid } from './orderbook';
 import * as orderbookData from './orderbook-data';
+import { createResolutions, formatResolution } from './orderbook-controls';
 
 function mockOffsetSize(width: number, height: number) {
   Object.defineProperty(HTMLElement.prototype, 'getBoundingClientRect', {
@@ -37,7 +38,8 @@ describe('Orderbook', () => {
     jest.clearAllMocks();
     mockOffsetSize(800, 768);
   });
-  it('markPrice should be in the middle', async () => {
+
+  it('lastTradedPrice should be in the middle', async () => {
     render(
       <Orderbook
         decimalPlaces={decimalPlaces}
@@ -71,6 +73,7 @@ describe('Orderbook', () => {
     expect(
       await screen.findByTestId(`last-traded-${params.lastTradedPrice}`)
     ).toBeInTheDocument();
+
     // Before resolution change the price is 122.934
     await userEvent.click(screen.getByTestId('price-122901'));
     expect(onClickSpy).toBeCalledWith({ price: '122.901' });
@@ -86,15 +89,16 @@ describe('Orderbook', () => {
     expect(orderbookData.compactRows).toHaveBeenCalledWith(
       mockedData.bids,
       VolumeType.bid,
-      10
+      2
     );
     expect(orderbookData.compactRows).toHaveBeenCalledWith(
       mockedData.asks,
       VolumeType.ask,
-      10
+      2
     );
-    await userEvent.click(screen.getByTestId('price-12294'));
+
-    expect(onClickSpy).toBeCalledWith({ price: '122.94' });
+    await userEvent.click(screen.getByTestId('price-122938'));
+    expect(onClickSpy).toBeCalledWith({ price: '122.938' });
   });
 
   it('plus - minus buttons should change resolution', async () => {
@@ -114,26 +118,30 @@ describe('Orderbook', () => {
       1
     );
     expect(screen.getByTestId('minus-button')).toBeDisabled();
-    userEvent.click(screen.getByTestId('plus-button'));
+    await userEvent.click(screen.getByTestId('plus-button'));
+    expect((orderbookData.compactRows as jest.Mock).mock.lastCall[2]).toEqual(
+      2
+    );
+
+    await userEvent.click(screen.getByTestId('plus-button'));
+    expect((orderbookData.compactRows as jest.Mock).mock.lastCall[2]).toEqual(
+      5
+    );
+
+    expect(screen.getByTestId('minus-button')).not.toBeDisabled();
+    await userEvent.click(screen.getByTestId('minus-button'));
     await waitFor(() => {
       expect((orderbookData.compactRows as jest.Mock).mock.lastCall[2]).toEqual(
-        10
+        2
       );
     });
     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 userEvent.click(screen.getByTestId('resolution'));
     await waitFor(() => {
       expect(screen.getByRole('menu')).toBeInTheDocument();
     });
-    await userEvent.click(screen.getAllByRole('menuitem')[5]);
+    await userEvent.click(screen.getAllByRole('menuitem')[11]);
     await waitFor(() => {
       expect((orderbookData.compactRows as jest.Mock).mock.lastCall[2]).toEqual(
         100000
@@ -223,3 +231,58 @@ describe('OrderbookMid', () => {
     expect(screen.getByTestId('icon-arrow-down')).toBeInTheDocument();
   });
 });
+
+describe('createResolutions', () => {
+  it('create resolutions relative to the market', () => {
+    expect(
+      createResolutions(
+        '1', // 0.001
+        3
+      )
+    ).toEqual([1, 2, 5, 10, 20, 50, 100, 200, 500, 1000]);
+
+    expect(
+      createResolutions(
+        '190017', // 1900.17
+        2
+      )
+    ).toEqual([1, 2, 5, 10, 20, 50, 100, 200, 500, 1000, 10000, 100000]);
+
+    expect(
+      createResolutions(
+        '123456789', // 1234.56789
+        5
+      )
+    ).toEqual([
+      1, 2, 5, 10, 20, 50, 100, 200, 500, 1000, 10000, 100000, 1000000,
+      10000000, 100000000,
+    ]);
+  });
+
+  it('removes resolutions that arent precise enough for the market', () => {
+    expect(
+      createResolutions(
+        '1', // 0.01
+        2
+      )
+    ).toEqual([1, 2, 5, 10, 20, 50, 100]);
+  });
+});
+
+describe('formatResolution', () => {
+  it('formats less than 1', () => {
+    expect(formatResolution(1, 2)).toEqual('0.01');
+    expect(formatResolution(1, 3)).toEqual('0.001');
+    expect(formatResolution(2, 4)).toEqual('0.0002');
+    expect(formatResolution(5, 8)).toEqual('0.00000005');
+    expect(formatResolution(10000, 5)).toEqual('0.1');
+  });
+
+  it('formats greater than 1', () => {
+    expect(formatResolution(1000, 2)).toEqual('10');
+    expect(formatResolution(100000, 4)).toEqual('10');
+    expect(formatResolution(10000000, 2)).toEqual('100,000');
+    expect(formatResolution(500, 2)).toEqual('5');
+    expect(formatResolution(500, 1)).toEqual('50');
+  });
+});

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

@@ -23,6 +23,7 @@ const OrderbookSide = ({
   type,
   decimalPlaces,
   positionDecimalPlaces,
+  priceFormatDecimalPlaces,
   onClick,
   width,
   maxVol,
@@ -31,6 +32,7 @@ const OrderbookSide = ({
   resolution: number;
   decimalPlaces: number;
   positionDecimalPlaces: number;
+  priceFormatDecimalPlaces: number;
   type: VolumeType;
   onClick: (args: { price?: string; size?: string }) => void;
   width: number;
@@ -53,10 +55,11 @@ const OrderbookSide = ({
         {rows.map((data) => (
           <OrderbookRow
             key={data.price}
-            price={(BigInt(data.price) / BigInt(resolution)).toString()}
+            price={data.price}
             onClick={onClick}
-            decimalPlaces={decimalPlaces - Math.log10(resolution)}
+            decimalPlaces={decimalPlaces}
             positionDecimalPlaces={positionDecimalPlaces}
+            priceFormatDecimalPlaces={priceFormatDecimalPlaces}
             volume={data.volume}
             cumulativeVolume={data.cumulativeVol}
             type={type}
@@ -165,6 +168,12 @@ export const Orderbook = ({
   const bestAskPrice = asks[0] ? asks[0].price : '0';
   const bestBidPrice = bids[0] ? bids[0].price : '0';
 
+  // we'll want to only display a relevant number of dps based on the
+  // current resolution selection
+  const priceFormatDecimalPlaces = Math.ceil(
+    decimalPlaces - Math.log10(resolution)
+  );
+
   return (
     <div className="h-full text-xs grid grid-rows-[1fr_min-content]">
       <div>
@@ -203,6 +212,7 @@ export const Orderbook = ({
                       resolution={resolution}
                       decimalPlaces={decimalPlaces}
                       positionDecimalPlaces={positionDecimalPlaces}
+                      priceFormatDecimalPlaces={priceFormatDecimalPlaces}
                       onClick={onClick}
                       width={width}
                       maxVol={maxVol}
@@ -220,6 +230,7 @@ export const Orderbook = ({
                       resolution={resolution}
                       decimalPlaces={decimalPlaces}
                       positionDecimalPlaces={positionDecimalPlaces}
+                      priceFormatDecimalPlaces={priceFormatDecimalPlaces}
                       onClick={onClick}
                       width={width}
                       maxVol={maxVol}