fix(trading): fix formatting on clicking on orderbook cell after decimal resolution update (#3409)

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

@@ -1,8 +1,6 @@
-import React from 'react';
 import throttle from 'lodash/throttle';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import { Orderbook } from './orderbook';
-import { addDecimal } from '@vegaprotocol/utils';
 import { useDataProvider } from '@vegaprotocol/react-helpers';
 import { marketDepthProvider } from './market-depth-provider';
 import { marketDataProvider, marketProvider } from '@vegaprotocol/market-list';
@@ -195,10 +193,9 @@ export const OrderbookManager = ({ marketId }: OrderbookManagerProps) => {
         positionDecimalPlaces={market?.positionDecimalPlaces ?? 0}
         resolution={resolution}
         onResolutionChange={(resolution: number) => setResolution(resolution)}
-        onClick={(price?: string | number) => {
+        onClick={(price: string) => {
           if (price) {
-            const priceValue = addDecimal(price, market?.decimalPlaces ?? 0);
-            updateOrder(marketId, { price: priceValue });
+            updateOrder(marketId, { price });
           }
         }}
       />

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { addDecimalsFixedFormatNumber } from '@vegaprotocol/utils';
+import { addDecimal, addDecimalsFixedFormatNumber } from '@vegaprotocol/utils';
 import { PriceCell, VolCell, CumulativeVol } from '@vegaprotocol/datagrid';
 
 interface OrderbookRowProps {
@@ -15,7 +15,7 @@ interface OrderbookRowProps {
   price: string;
   relativeAsk?: number;
   relativeBid?: number;
-  onClick?: (price?: string | number) => void;
+  onClick?: (price: string) => void;
 }
 
 export const OrderbookRow = React.memo(
@@ -59,7 +59,7 @@ export const OrderbookRow = React.memo(
         <PriceCell
           testId={`price-${price}`}
           value={BigInt(price)}
-          onClick={() => onClick && onClick(price)}
+          onClick={() => onClick && onClick(addDecimal(price, decimalPlaces))}
           valueFormatted={addDecimalsFixedFormatNumber(price, decimalPlaces)}
         />
         <CumulativeVol

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

@@ -20,7 +20,7 @@ describe('Orderbook', () => {
   const decimalPlaces = 3;
   it('should scroll to mid price on init', async () => {
     window.innerHeight = 11 * rowHeight;
-    const result = render(
+    render(
       <Orderbook
         decimalPlaces={decimalPlaces}
         positionDecimalPlaces={0}
@@ -30,7 +30,7 @@ describe('Orderbook', () => {
       />
     );
     await waitFor(() => screen.getByTestId(`bid-vol-${params.midPrice}`));
-    expect(result.getByTestId('scroll').scrollTop).toBe(91 * rowHeight);
+    expect(screen.getByTestId('scroll').scrollTop).toBe(91 * rowHeight);
   });
 
   it('should keep mid price row in the middle', async () => {
@@ -45,7 +45,7 @@ describe('Orderbook', () => {
       />
     );
     await waitFor(() => screen.getByTestId(`bid-vol-${params.midPrice}`));
-    expect(result.getByTestId('scroll').scrollTop).toBe(91 * rowHeight);
+    expect(screen.getByTestId('scroll').scrollTop).toBe(91 * rowHeight);
     result.rerender(
       <Orderbook
         decimalPlaces={decimalPlaces}
@@ -121,7 +121,7 @@ describe('Orderbook', () => {
       />
     );
     await waitFor(() => screen.getByTestId(`bid-vol-${params.midPrice}`));
-    expect(result.getByTestId('scroll').scrollTop).toBe(91 * rowHeight + 0.01);
+    expect(screen.getByTestId('scroll').scrollTop).toBe(91 * rowHeight + 0.01);
   });
 
   it('should get back to mid price on click', async () => {
@@ -143,7 +143,7 @@ describe('Orderbook', () => {
     expect(result.getByTestId('scroll').scrollTop).toBe(1);
     const scrollToMidPriceButton = result.getByTestId('scroll-to-midprice');
     fireEvent.click(scrollToMidPriceButton);
-    expect(result.getByTestId('scroll').scrollTop).toBe(91 * rowHeight + 1);
+    expect(screen.getByTestId('scroll').scrollTop).toBe(91 * rowHeight + 1);
   });
 
   it('should get back to mid price on resolution change', async () => {
@@ -158,12 +158,12 @@ describe('Orderbook', () => {
       />
     );
     await waitFor(() => screen.getByTestId(`bid-vol-${params.midPrice}`));
-    const scrollElement = result.getByTestId('scroll');
+    const scrollElement = screen.getByTestId('scroll');
     expect(scrollElement.scrollTop).toBe(91 * rowHeight);
     scrollElement.scrollTop = 1;
     fireEvent.scroll(scrollElement);
-    expect(result.getByTestId('scroll').scrollTop).toBe(1);
-    const resolutionSelect = result.getByTestId(
+    expect(screen.getByTestId('scroll').scrollTop).toBe(1);
+    const resolutionSelect = screen.getByTestId(
       'resolution'
     ) as HTMLSelectElement;
     fireEvent.change(resolutionSelect, { target: { value: '10' } });
@@ -181,6 +181,47 @@ describe('Orderbook', () => {
         onResolutionChange={onResolutionChange}
       />
     );
-    expect(result.getByTestId('scroll').scrollTop).toBe(6 * rowHeight);
+    expect(screen.getByTestId('scroll').scrollTop).toBe(6 * rowHeight);
+  });
+
+  it('should format correctly the numbers on resolution change', async () => {
+    const onClickSpy = jest.fn();
+    const result = render(
+      <Orderbook
+        decimalPlaces={decimalPlaces}
+        positionDecimalPlaces={0}
+        onClick={onClickSpy}
+        fillGaps
+        {...generateMockData(params)}
+        onResolutionChange={onResolutionChange}
+      />
+    );
+    expect(
+      await screen.findByTestId(`bid-vol-${params.midPrice}`)
+    ).toBeInTheDocument();
+    // Before resolution change the price is 122.934
+    await fireEvent.click(await screen.getByTestId('price-122934'));
+    expect(onClickSpy).toBeCalledWith('122.934');
+    const resolutionSelect = screen.getByTestId(
+      'resolution'
+    ) as HTMLSelectElement;
+    await fireEvent.change(resolutionSelect, { target: { value: '10' } });
+    await result.rerender(
+      <Orderbook
+        decimalPlaces={decimalPlaces}
+        positionDecimalPlaces={0}
+        onClick={onClickSpy}
+        fillGaps
+        {...generateMockData({
+          ...params,
+          resolution: 10,
+        })}
+        onResolutionChange={onResolutionChange}
+      />
+    );
+    await fireEvent.click(await screen.getByTestId('price-12299'));
+    // After resolution change the price is 122.99
+    expect(onResolutionChange.mock.calls[0][0]).toBe(10);
+    expect(onClickSpy).toBeCalledWith('122.99');
   });
 });

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

@@ -21,7 +21,7 @@ interface OrderbookProps extends OrderbookData {
   positionDecimalPlaces: number;
   resolution: number;
   onResolutionChange: (resolution: number) => void;
-  onClick?: (price?: string | number) => void;
+  onClick?: (price: string) => void;
   fillGaps?: boolean;
 }