feat(trading): copy order book volume value to deal ticket (#4333)

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

@@ -9,6 +9,7 @@ const bidCumulative = 'cumulative-vol-9889001';
 const midPrice = 'middle-mark-price-4612690000';
 const priceResolution = 'resolution';
 const dealTicketPrice = 'order-price';
+const dealTicketSize = 'order-size';
 const resPrice = 'price-990';
 
 describe('order book', { tags: '@smoke' }, () => {
@@ -74,6 +75,18 @@ describe('order book', { tags: '@smoke' }, () => {
     cy.getByTestId(dealTicketPrice).should('have.value', '98.94585');
   });
 
+  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 = [

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

@@ -66,10 +66,13 @@ export const OrderbookManager = ({ marketId }: OrderbookManagerProps) => {
         decimalPlaces={market?.decimalPlaces ?? 0}
         positionDecimalPlaces={market?.positionDecimalPlaces ?? 0}
         assetSymbol={market?.tradableInstrument.instrument.product.quoteName}
-        onClick={(price: string) => {
+        onClick={({ price, size }) => {
           if (price) {
             updateOrder(marketId, { price });
           }
+          if (size) {
+            updateOrder(marketId, { size });
+          }
         }}
         midPrice={marketData?.midPrice}
       />

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

@@ -11,7 +11,7 @@ interface OrderbookRowProps {
   decimalPlaces: number;
   positionDecimalPlaces: number;
   price: string;
-  onClick?: (price: string) => void;
+  onClick?: (args: { price?: string; size?: string }) => void;
   type: VolumeType;
 }
 
@@ -43,6 +43,7 @@ const CumulativeVol = memo(
     testId,
     positionDecimalPlaces,
     cumulativeValue,
+    onClick,
   }: {
     ask?: number;
     bid?: number;
@@ -50,6 +51,7 @@ const CumulativeVol = memo(
     testId?: string;
     className?: string;
     positionDecimalPlaces: number;
+    onClick?: (size?: string | number) => void;
   }) => {
     const volume = cumulativeValue ? (
       <NumericCell
@@ -61,7 +63,15 @@ const CumulativeVol = memo(
       />
     ) : null;
 
-    return (
+    return onClick && volume ? (
+      <button
+        data-testid={testId}
+        onClick={() => onClick(cumulativeValue)}
+        className="hover:dark:bg-neutral-800 hover:bg-neutral-200 text-right pr-1"
+      >
+        {volume}
+      </button>
+    ) : (
       <div className="pr-1" data-testid={testId}>
         {volume}
       </div>
@@ -89,7 +99,9 @@ export const OrderbookRow = React.memo(
           <PriceCell
             testId={`price-${price}`}
             value={BigInt(price)}
-            onClick={() => onClick && onClick(addDecimal(price, decimalPlaces))}
+            onClick={() =>
+              onClick && onClick({ price: addDecimal(price, decimalPlaces) })
+            }
             valueFormatted={addDecimalsFixedFormatNumber(price, decimalPlaces)}
             className={
               type === VolumeType.ask
@@ -97,8 +109,15 @@ export const OrderbookRow = React.memo(
                 : 'text-market-green-600 dark:text-market-green'
             }
           />
-          <NumericCell
+          <PriceCell
             testId={`${txtId}-vol-${price}`}
+            onClick={(value) =>
+              onClick &&
+              value &&
+              onClick({
+                size: addDecimal(value, positionDecimalPlaces),
+              })
+            }
             value={value}
             valueFormatted={addDecimalsFixedFormatNumber(
               value,
@@ -107,6 +126,13 @@ export const OrderbookRow = React.memo(
           />
           <CumulativeVol
             testId={`cumulative-vol-${price}`}
+            onClick={() =>
+              onClick &&
+              cumulativeValue &&
+              onClick({
+                size: addDecimal(cumulativeValue, positionDecimalPlaces),
+              })
+            }
             positionDecimalPlaces={positionDecimalPlaces}
             cumulativeValue={cumulativeValue}
           />

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

@@ -70,7 +70,7 @@ describe('Orderbook', () => {
     ).toBeInTheDocument();
     // Before resolution change the price is 122.934
     await fireEvent.click(await screen.getByTestId('price-122901'));
-    expect(onClickSpy).toBeCalledWith('122.901');
+    expect(onClickSpy).toBeCalledWith({ price: '122.901' });
     const resolutionSelect = screen.getByTestId(
       'resolution'
     ) as HTMLSelectElement;
@@ -86,6 +86,6 @@ describe('Orderbook', () => {
       10
     );
     await fireEvent.click(await screen.getByTestId('price-12294'));
-    expect(onClickSpy).toBeCalledWith('122.94');
+    expect(onClickSpy).toBeCalledWith({ price: '122.94' });
   });
 });

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

@@ -32,7 +32,7 @@ const OrderbookTable = ({
   decimalPlaces: number;
   positionDecimalPlaces: number;
   type: VolumeType;
-  onClick?: (price: string) => void;
+  onClick?: (args: { price?: string; size?: string }) => void;
 }) => {
   return (
     <div
@@ -69,7 +69,7 @@ const OrderbookTable = ({
 interface OrderbookProps {
   decimalPlaces: number;
   positionDecimalPlaces: number;
-  onClick?: (price: string) => void;
+  onClick?: (args: { price?: string; size?: string }) => void;
   midPrice?: string;
   bids: PriceLevelFieldsFragment[];
   asks: PriceLevelFieldsFragment[];