fix(explorer): use position decimal places to format size in order summary for batch orders (#2892)

apps/explorer/src/app/components/order-summary/order-summary.tsx

@@ -1,6 +1,7 @@
 import { useExplorerDeterministicOrderQuery } from '../order-details/__generated__/Order';
 import PriceInMarket from '../price-in-market/price-in-market';
 import { sideText } from '../order-details/lib/order-labels';
+import SizeInMarket from '../size-in-market/size-in-market';
 
 // Note: Edited has no style currently
 export type OrderSummaryModifier = 'cancelled' | 'edited';
@@ -41,7 +42,8 @@ const OrderSummary = ({ id, modifier }: OrderSummaryProps) => {
   return (
     <div data-testid="order-summary" className={getClassName(modifier)}>
       <span>{sideText[order.side]}</span>&nbsp;
-      <span>{order.size}</span>&nbsp;<i>@</i>&nbsp;
+      <SizeInMarket marketId={order.market.id} size={order.size} />
+      &nbsp;<i>@</i>&nbsp;
       <PriceInMarket marketId={order.market.id} price={order.price} />
     </div>
   );

apps/explorer/src/app/components/order-summary/order-tx-summary.spec.tsx

@@ -112,13 +112,14 @@ describe('Order TX Summary component', () => {
     const res = renderComponent(o, [mock]);
     expect(res.queryByTestId('order-summary')).toBeInTheDocument();
     expect(res.getByText('Buy')).toBeInTheDocument();
-    expect(res.getByText('10')).toBeInTheDocument();
 
-    // Initially renders price alone
+    // Initially renders price and size unformatted
     expect(res.getByText('333')).toBeInTheDocument();
+    expect(res.getByText('10')).toBeInTheDocument();
 
     // After fetch renders formatted price and asset quotename
     expect(await res.findByText('3.33')).toBeInTheDocument();
     expect(await res.findByText('TEST')).toBeInTheDocument();
+    expect(await res.getByText('0.10')).toBeInTheDocument();
   });
 });

apps/explorer/src/app/components/order-summary/order-tx-summary.tsx

@@ -2,6 +2,7 @@ import type { components } from '../../../types/explorer';
 
 import PriceInMarket from '../price-in-market/price-in-market';
 import { sideText } from '../order-details/lib/order-labels';
+import SizeInMarket from '../size-in-market/size-in-market';
 
 export type OrderSummaryProps = {
   order: components['schemas']['v1OrderSubmission'];
@@ -29,7 +30,12 @@ const OrderTxSummary = ({ order }: OrderSummaryProps) => {
   return (
     <div data-testid="order-summary">
       <span>{sideText[order.side]}</span>&nbsp;
-      <span>{order.size}</span>&nbsp;<i className="text-xs">@</i>&nbsp;
+      {order.size ? (
+        <SizeInMarket size={order.size} marketId={order.marketId} />
+      ) : (
+        '-'
+      )}
+      &nbsp;<i className="text-xs">@</i>&nbsp;
       <PriceInMarket
         marketId={order.marketId}
         price={order.price}

apps/explorer/src/app/components/size-in-market/size-in-market.spec.tsx

@@ -7,7 +7,7 @@ import type { DecimalSource } from './size-in-market';
 import { ExplorerMarketDocument } from '../links/market-link/__generated__/Market';
 
 function renderComponent(
-  price: string,
+  size: string | undefined,
   marketId: string,
   mocks: MockedResponse[],
   decimalSource: DecimalSource = 'MARKET'
@@ -17,7 +17,7 @@ function renderComponent(
       <MemoryRouter>
         <SizeInMarket
           marketId={marketId}
-          size={price}
+          size={size}
           decimalSource={decimalSource}
         />
       </MemoryRouter>
@@ -57,6 +57,11 @@ const fullMock = {
 };
 
 describe('Size in Market component', () => {
+  it('Renders a dash size when there is no size', () => {
+    const res = render(renderComponent(undefined, '123', []));
+    expect(res.getByText('-')).toBeInTheDocument();
+  });
+
   it('Renders the raw size when there is no market data', () => {
     const res = render(renderComponent('100', '123', []));
     expect(res.getByText('100')).toBeInTheDocument();

apps/explorer/src/app/components/size-in-market/size-in-market.tsx

@@ -5,7 +5,7 @@ export type DecimalSource = 'MARKET';
 
 export type PriceInMarketProps = {
   marketId: string;
-  size: string | number;
+  size?: string | number;
   decimalSource?: DecimalSource;
 };
 
@@ -22,6 +22,9 @@ const SizeInMarket = ({
     variables: { id: marketId },
     fetchPolicy: 'cache-first',
   });
+  if (!size) {
+    return <span>-</span>;
+  }
 
   let label = size;