fix: trades table layout

Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

apps/static/src/assets/mainnet-tranches.json

@@ -2761,7 +2761,7 @@
     "tranche_end": "2023-12-05T00:00:00.000Z",
     "total_added": "86666.297",
     "total_removed": "0",
-    "locked_amount": "67551.1212618119962533247",
+    "locked_amount": "67431.7709760302471446137",
     "deposits": [
       {
         "amount": "86666.297",
@@ -2827,7 +2827,7 @@
     "tranche_end": "2023-06-01T00:00:00.000Z",
     "total_added": "2500",
     "total_removed": "0",
-    "locked_amount": "1339.22196148758675",
+    "locked_amount": "1332.31742216117225",
     "deposits": [
       {
         "amount": "2500",
@@ -3215,7 +3215,7 @@
     "tranche_end": "2023-08-01T00:00:00.000Z",
     "total_added": "37500",
     "total_removed": "3143.644010625",
-    "locked_amount": "32837.43621470227125",
+    "locked_amount": "32733.2959254143625",
     "deposits": [
       {
         "amount": "7500",
@@ -3348,7 +3348,7 @@
     "tranche_end": "2023-12-05T00:00:00.000Z",
     "total_added": "129999.45",
     "total_removed": "0",
-    "locked_amount": "67489.48936326858252012",
+    "locked_amount": "67370.24796960538422384",
     "deposits": [
       {
         "amount": "129999.45",
@@ -3414,7 +3414,7 @@
     "tranche_end": "2023-09-03T00:00:00.000Z",
     "total_added": "62600",
     "total_removed": "0",
-    "locked_amount": "32842.76564561136774",
+    "locked_amount": "32756.55764840182394",
     "deposits": [
       {
         "amount": "10000",
@@ -3607,7 +3607,7 @@
     "tranche_end": "2023-09-17T00:00:00.000Z",
     "total_added": "5000",
     "total_removed": "0",
-    "locked_amount": "2815.0049150177575",
+    "locked_amount": "2808.119292237443",
     "deposits": [
       {
         "amount": "5000",
@@ -3818,7 +3818,7 @@
     "tranche_end": "2023-04-05T00:00:00.000Z",
     "total_added": "97499.58",
     "total_removed": "0",
-    "locked_amount": "9423.1037579670513950004",
+    "locked_amount": "9306.139058621721417648",
     "deposits": [
       {
         "amount": "97499.58",
@@ -3851,7 +3851,7 @@
     "tranche_end": "2023-04-05T00:00:00.000Z",
     "total_added": "135173.4239508",
     "total_removed": "98230.390980249184455396",
-    "locked_amount": "12879.756006144750319358883816",
+    "locked_amount": "12719.885455252614044934219276",
     "deposits": [
       {
         "amount": "135173.4239508",
@@ -3897,7 +3897,7 @@
     "tranche_end": "2023-04-05T00:00:00.000Z",
     "total_added": "32499.86",
     "total_removed": "0",
-    "locked_amount": "3964.1370226789100048754",
+    "locked_amount": "3914.9319935366472037122",
     "deposits": [
       {
         "amount": "32499.86",
@@ -3930,7 +3930,7 @@
     "tranche_end": "2023-04-05T00:00:00.000Z",
     "total_added": "10833.29",
     "total_removed": "0",
-    "locked_amount": "1290.2881338068485965526",
+    "locked_amount": "1274.2723742953435790832",
     "deposits": [
       {
         "amount": "10833.29",
@@ -3963,7 +3963,7 @@
     "tranche_end": "2023-04-05T00:00:00.000Z",
     "total_added": "22749.93",
     "total_removed": "4720.860935375",
-    "locked_amount": "4823.3852248200248753928",
+    "locked_amount": "4763.5147387107336270879",
     "deposits": [
       {
         "amount": "6500",
@@ -4115,7 +4115,7 @@
     "tranche_end": "2023-05-01T00:00:00.000Z",
     "total_added": "22500",
     "total_removed": "4680.6740139",
-    "locked_amount": "8265.997640423574",
+    "locked_amount": "8203.51346685082785",
     "deposits": [
       {
         "amount": "7500",
@@ -4368,7 +4368,7 @@
     "tranche_end": "2023-06-02T00:00:00.000Z",
     "total_added": "1939928.38",
     "total_removed": "928642.9598472029154",
-    "locked_amount": "523490.2515814186817628832",
+    "locked_amount": "520818.7285723174191856326",
     "deposits": [
       {
         "amount": "1852091.69",
@@ -36681,8 +36681,8 @@
     "tranche_start": "2022-03-05T00:00:00.000Z",
     "tranche_end": "2023-06-05T00:00:00.000Z",
     "total_added": "3732368.4671",
-    "total_removed": "609657.626547646980493",
-    "locked_amount": "828923.486935640836165707372",
+    "total_removed": "615950.831401702010493",
+    "locked_amount": "824818.380722890032696157668",
     "deposits": [
       {
         "amount": "1998.95815",
@@ -36856,6 +36856,11 @@
         "user": "0xB523235B6c7C74DDB26b10E78bFb2d0Cb63Ae289",
         "tx": "0x2c5cfeee95fba21323fdbfde219501aeafe8d7f236d1283b4f8f7c7760e4401c"
       },
+      {
+        "amount": "6293.20485405503",
+        "user": "0xE6CacAE56Cca8dFdB7910b5A13578719D4E57DA0",
+        "tx": "0x5952d8d6e0f304875b996b35428690f70a896151c547cedf9dc46699c0094d19"
+      },
       {
         "amount": "144779.049152",
         "user": "0x1da69E9C22d77Ef8Ccbf5a1F2d83eDBc5Dcc20fA",
@@ -37220,6 +37225,12 @@
           }
         ],
         "withdrawals": [
+          {
+            "amount": "6293.20485405503",
+            "user": "0xE6CacAE56Cca8dFdB7910b5A13578719D4E57DA0",
+            "tranche_id": 1,
+            "tx": "0x5952d8d6e0f304875b996b35428690f70a896151c547cedf9dc46699c0094d19"
+          },
           {
             "amount": "2069.469124279649",
             "user": "0xE6CacAE56Cca8dFdB7910b5A13578719D4E57DA0",
@@ -37498,8 +37509,8 @@
           }
         ],
         "total_tokens": "187637.95",
-        "withdrawn_tokens": "139761.298849858013",
-        "remaining_tokens": "47876.651150141987"
+        "withdrawn_tokens": "146054.503703913043",
+        "remaining_tokens": "41583.446296086957"
       },
       {
         "address": "0x1A71e3ED1996CAbB91bB043f880CE963D601707e",
@@ -38019,8 +38030,8 @@
     "tranche_start": "2022-06-05T00:00:00.000Z",
     "tranche_end": "2023-12-05T00:00:00.000Z",
     "total_added": "15870102.715470999700000001",
-    "total_removed": "577690.67124866818551952",
-    "locked_amount": "8238997.0483398786834501176341895734712084",
+    "total_removed": "578564.32540623060826952",
+    "locked_amount": "8224440.6052824762891842324270115092214112",
     "deposits": [
       {
         "amount": "16249.93",
@@ -38599,6 +38610,16 @@
         "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
         "tx": "0xb55fa2352ed3079722cfc023a587ac1d089f287267f6e2eedb4ebfbda89ac6c9"
       },
+      {
+        "amount": "345.7620519411935",
+        "user": "0xE6CacAE56Cca8dFdB7910b5A13578719D4E57DA0",
+        "tx": "0x6d7ba07ccbaab604d1842555433ea542422320c14d35d633bc032f4c8d2c9dce"
+      },
+      {
+        "amount": "527.89210562122925",
+        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+        "tx": "0x681298b3ed6fe2181d9e4391f57c92855bd069bbc989fadfe9d45abbb865b08e"
+      },
       {
         "amount": "856.08784586478614",
         "user": "0xe3eB4CF43C072658401996b71D43eE26E573562D",
@@ -40343,6 +40364,12 @@
             "tranche_id": 2,
             "tx": "0xb55fa2352ed3079722cfc023a587ac1d089f287267f6e2eedb4ebfbda89ac6c9"
           },
+          {
+            "amount": "527.89210562122925",
+            "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+            "tranche_id": 2,
+            "tx": "0x681298b3ed6fe2181d9e4391f57c92855bd069bbc989fadfe9d45abbb865b08e"
+          },
           {
             "amount": "966.75883976995675",
             "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@@ -41485,8 +41512,8 @@
           }
         ],
         "total_tokens": "259998.8875",
-        "withdrawn_tokens": "124670.831698608740875",
-        "remaining_tokens": "135328.055801391259125"
+        "withdrawn_tokens": "125198.723804229970125",
+        "remaining_tokens": "134800.163695770029875"
       },
       {
         "address": "0x89051CAb67Bc7F8CC44F7e270c6EDaf1EC57676c",
@@ -42825,6 +42852,12 @@
           }
         ],
         "withdrawals": [
+          {
+            "amount": "345.7620519411935",
+            "user": "0xE6CacAE56Cca8dFdB7910b5A13578719D4E57DA0",
+            "tranche_id": 2,
+            "tx": "0x6d7ba07ccbaab604d1842555433ea542422320c14d35d633bc032f4c8d2c9dce"
+          },
           {
             "amount": "113.697899560567",
             "user": "0xE6CacAE56Cca8dFdB7910b5A13578719D4E57DA0",
@@ -43085,8 +43118,8 @@
           }
         ],
         "total_tokens": "12362.05",
-        "withdrawn_tokens": "5603.4115869825835",
-        "remaining_tokens": "6758.6384130174165"
+        "withdrawn_tokens": "5949.173638923777",
+        "remaining_tokens": "6412.876361076223"
       },
       {
         "address": "0xb091D456d0dFCB94dcba6f355379056C5bb995fC",
@@ -43717,8 +43750,8 @@
     "tranche_start": "2021-11-05T00:00:00.000Z",
     "tranche_end": "2023-05-05T00:00:00.000Z",
     "total_added": "14597706.0446472999",
-    "total_removed": "4397854.702109741180950406",
-    "locked_amount": "1884744.24224421827521951700476425",
+    "total_removed": "4398585.884511068476445906",
+    "locked_amount": "1871305.826957390415017991546703653",
     "deposits": [
       {
         "amount": "129284.449",
@@ -43987,6 +44020,11 @@
         "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
         "tx": "0x4b9a1720f8b7cdd71f9b219186b0d8b5f07864ccac02b3ec278201064ca5b5ac"
       },
+      {
+        "amount": "731.1824013272954955",
+        "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
+        "tx": "0xc6bcc24f815785c515cad1409206cdd00d671fdaabc89ef4970b53c08ef8ac90"
+      },
       {
         "amount": "1333.9237119810715295",
         "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
@@ -46919,6 +46957,12 @@
             "tranche_id": 3,
             "tx": "0x4b9a1720f8b7cdd71f9b219186b0d8b5f07864ccac02b3ec278201064ca5b5ac"
           },
+          {
+            "amount": "731.1824013272954955",
+            "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
+            "tranche_id": 3,
+            "tx": "0xc6bcc24f815785c515cad1409206cdd00d671fdaabc89ef4970b53c08ef8ac90"
+          },
           {
             "amount": "1333.9237119810715295",
             "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
@@ -49363,8 +49407,8 @@
           }
         ],
         "total_tokens": "359123.469575",
-        "withdrawn_tokens": "312272.154922915220267",
-        "remaining_tokens": "46851.314652084779733"
+        "withdrawn_tokens": "313003.3373242425157625",
+        "remaining_tokens": "46120.1322507574842375"
       },
       {
         "address": "0xBdd412797c1B78535Afc5F71503b91fAbD0160fB",
@@ -50708,7 +50752,7 @@
     "tranche_end": "2023-04-05T00:00:00.000Z",
     "total_added": "5778205.3912159303",
     "total_removed": "3055768.040200763217391295",
-    "locked_amount": "427770.445408785243391682636297101",
+    "locked_amount": "422460.846254100436361378508596402",
     "deposits": [
       {
         "amount": "552496.6455",
@@ -52747,7 +52791,7 @@
     "tranche_end": "2023-06-05T00:00:00.000Z",
     "total_added": "472355.6199999996",
     "total_removed": "34187.9039333162685",
-    "locked_amount": "131347.6648336110261253122222222",
+    "locked_amount": "130697.1872884131237831293607306",
     "deposits": [
       {
         "amount": "3000",

apps/trading/client-pages/portfolio/account-history-container.tsx

@@ -6,6 +6,7 @@ import {
 } from '@vegaprotocol/react-helpers';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import compact from 'lodash/compact';
+import uniqBy from 'lodash/uniqBy';
 import type { ChangeEvent } from 'react';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import type { AccountHistoryQuery } from './__generated__/AccountHistory';
@@ -134,15 +135,9 @@ const AccountHistoryManager = ({
         ?.filter((item: Account) => Boolean(item && item.market))
         .map<Market>((item) => item.market as Market) ?? null;
     return arr
-      ? Array.from(
-          new Set(
-            arr
-              .filter(marketFilterCb)
-              .sort((a, b) =>
-                a.tradableInstrument.instrument.code.localeCompare(
-                  b.tradableInstrument.instrument.code
-                )
-              )
+      ? uniqBy(arr.filter(marketFilterCb), 'id').sort((a, b) =>
+          a.tradableInstrument.instrument.code.localeCompare(
+            b.tradableInstrument.instrument.code
           )
         )
       : null;
@@ -240,6 +235,11 @@ const AccountHistoryManager = ({
         }
       >
         <DropdownMenuContent>
+          {market && (
+            <DropdownMenuItem key="0" onClick={() => setMarket(null)}>
+              {t('All markets')}
+            </DropdownMenuItem>
+          )}
           {markets?.map((m) => (
             <DropdownMenuItem key={m.id} onClick={() => resolveMarket(m)}>
               {m.tradableInstrument.instrument.code}
@@ -253,14 +253,12 @@ const AccountHistoryManager = ({
   useEffect(() => {
     if (
       accountType !== Schema.AccountType.ACCOUNT_TYPE_MARGIN ||
-      (asset &&
-        market &&
-        market.tradableInstrument.instrument.product.settlementAsset.id !==
-          asset.id)
+      market?.tradableInstrument.instrument.product.settlementAsset.id !==
+        asset?.id
     ) {
       setMarket(null);
     }
-  }, [accountType, asset, market]);
+  }, [accountType, asset?.id, market]);
 
   return (
     <div className="h-full w-full flex flex-col gap-8">

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

@@ -70,7 +70,6 @@ export const OrderbookRow = React.memo(
           relativeAsk={cumulativeRelativeAsk}
           relativeBid={cumulativeRelativeBid}
           indicativeVolume={indicativeVolume}
-          className="pr-4 text-black dark:text-white"
         />
       </>
     );

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

@@ -201,26 +201,8 @@ const OrderbookDebugInfo = ({
   midPrice?: string;
 }) => (
   <Fragment>
-    <div
-      style={{
-        position: 'absolute',
-        top: '50%',
-        left: '0',
-        borderTop: '1px solid rgba(255,0,0,0.5)',
-        background: 'black',
-        width: '100%',
-        transform: 'translateY(-50%)',
-      }}
-    ></div>
-    <div
-      className="absolute left-0 bottom-0 font-mono"
-      style={{
-        fontSize: '10px',
-        color: '#FFF',
-        background: '#000',
-        padding: '2px',
-      }}
-    >
+    <div className="absolute top-1/2 left-0 border-t border-t-black w-full" />
+    <div className="text-xs p-2 bg-black/80 text-white absolute left-0 bottom-6 font-mono">
       <pre>
         {JSON.stringify(
           {
@@ -493,12 +475,7 @@ export const Orderbook = ({
 
   const tableBody =
     data && data.length !== 0 ? (
-      <div
-        className="grid grid-cols-4 gap-[0.3125rem] text-right"
-        style={{
-          gridAutoRows: '17px',
-        }}
-      >
+      <div className="grid grid-cols-4 gap-1 text-right auto-rows-[17px]">
         {data.map((data, i) => (
           <OrderbookRow
             key={data.price}
@@ -559,14 +536,13 @@ export const Orderbook = ({
       onDoubleClick={() => setDebug(!debug)}
     >
       <div
-        className="absolute top-0 grid grid-cols-4 gap-2 text-right border-b pt-2 bg-white dark:bg-black z-10 border-default w-full"
-        style={{ gridAutoRows: '17px' }}
+        className="absolute top-0 grid grid-cols-4 auto-rows-[17px] gap-2 text-right border-b pt-2 bg-white dark:bg-black z-10 border-default w-full"
         ref={headerElement}
       >
         <div>{t('Bid vol')}</div>
         <div>{t('Ask vol')}</div>
         <div>{t('Price')}</div>
-        <div className="pr-[2px] whitespace-nowrap overflow-hidden text-ellipsis">
+        <div className="pr-1 whitespace-nowrap overflow-hidden text-ellipsis">
           {t('Cumulative vol')}
         </div>
       </div>
@@ -605,8 +581,7 @@ export const Orderbook = ({
         )}
       </div>
       <div
-        className="absolute bottom-0 grid grid-cols-4 gap-2 border-t-[1px] border-default mt-2 z-10 bg-white dark:bg-black w-full"
-        style={{ gridAutoRows: '20px' }}
+        className="absolute bottom-0 grid grid-cols-4 gap-2 border-t border-default mt-2 z-10 bg-white dark:bg-black w-full"
         ref={footerElement}
       >
         <div className="col-span-2">

libs/positions/src/lib/positions-table.tsx

@@ -323,6 +323,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
           field="realisedPNL"
           type="rightAligned"
           cellClassRules={signedNumberCssClassRules}
+          cellClass="text-right font-mono"
           filter="agNumberColumnFilter"
           valueGetter={({
             data,
@@ -347,6 +348,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
           field="unrealisedPNL"
           type="rightAligned"
           cellClassRules={signedNumberCssClassRules}
+          cellClass="text-right font-mono"
           filter="agNumberColumnFilter"
           valueGetter={({
             data,

libs/react-helpers/src/lib/grid/cumulative-vol-cell.tsx

@@ -1,7 +1,6 @@
-import React from 'react';
-import type { ICellRendererParams } from 'ag-grid-community';
-import classNames from 'classnames';
+import { memo } from 'react';
 import { BID_COLOR, ASK_COLOR } from './vol-cell';
+import { NumericCell } from './numeric-cell';
 import { addDecimalsFormatNumber } from '../format';
 
 export interface CumulativeVolProps {
@@ -15,11 +14,7 @@ export interface CumulativeVolProps {
   positionDecimalPlaces: number;
 }
 
-export interface ICumulativeVolCellProps extends ICellRendererParams {
-  value: CumulativeVolProps;
-}
-
-export const CumulativeVol = React.memo(
+export const CumulativeVol = memo(
   ({
     relativeAsk,
     relativeBid,
@@ -27,7 +22,6 @@ export const CumulativeVol = React.memo(
     bid,
     indicativeVolume,
     testId,
-    className,
     positionDecimalPlaces,
   }: CumulativeVolProps) => {
     const askBar = relativeAsk ? (
@@ -40,7 +34,7 @@ export const CumulativeVol = React.memo(
           backgroundColor: ASK_COLOR,
           opacity: 0.6,
         }}
-      ></div>
+      />
     ) : null;
     const bidBar = relativeBid ? (
       <div
@@ -53,25 +47,48 @@ export const CumulativeVol = React.memo(
           backgroundColor: BID_COLOR,
           opacity: 0.6,
         }}
-      ></div>
+      />
     ) : null;
 
     const volume = indicativeVolume ? (
-      <span className="relative">
-        ({addDecimalsFormatNumber(indicativeVolume, positionDecimalPlaces ?? 0)}
+      <span>
+        (
+        <NumericCell
+          value={Number(indicativeVolume)}
+          valueFormatted={addDecimalsFormatNumber(
+            indicativeVolume,
+            positionDecimalPlaces ?? 0
+          )}
+        />
         )
       </span>
     ) : (
-      <span className="relative">
-        {ask ? addDecimalsFormatNumber(ask, positionDecimalPlaces ?? 0) : null}
+      <span>
+        {ask ? (
+          <NumericCell
+            value={ask}
+            valueFormatted={addDecimalsFormatNumber(
+              ask,
+              positionDecimalPlaces ?? 0
+            )}
+          />
+        ) : null}
         {ask && bid ? '/' : null}
-        {bid ? addDecimalsFormatNumber(bid, positionDecimalPlaces ?? 0) : null}
+        {bid ? (
+          <NumericCell
+            value={ask}
+            valueFormatted={addDecimalsFormatNumber(
+              bid,
+              positionDecimalPlaces ?? 0
+            )}
+          />
+        ) : null}
       </span>
     );
 
     return (
       <div
-        className={classNames('h-full relative', className)}
+        className="relative font-mono pr-1"
         data-testid={testId || 'cumulative-vol'}
       >
         {askBar}
@@ -83,9 +100,3 @@ export const CumulativeVol = React.memo(
 );
 
 CumulativeVol.displayName = 'CumulativeVol';
-
-export const CumulativeVolCell = ({ value }: ICumulativeVolCellProps) => (
-  <CumulativeVol {...value} />
-);
-
-CumulativeVolCell.displayName = 'CumulativeVolCell';

libs/react-helpers/src/lib/grid/index.ts

@@ -8,3 +8,4 @@ export * from './summary-rows';
 export * from './vol-cell';
 export * from './set-filter';
 export * from './date-range-filter';
+export * from './numeric-cell';

libs/react-helpers/src/lib/grid/numeric-cell.spec.tsx

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+
+import { NumericCell } from './numeric-cell';
+
+describe('NumericCell', () => {
+  const testId = 'cell';
+  it('Displays formatted value', () => {
+    const valueFormatted = '111.00';
+    render(
+      <NumericCell
+        value={111}
+        valueFormatted={valueFormatted}
+        testId={testId}
+      />
+    );
+    expect(screen.getByTestId(testId)).toHaveTextContent(valueFormatted);
+    expect(screen.getByText('00')).toBeInTheDocument();
+    expect(screen.getByText('00')).toHaveClass('opacity-60');
+  });
+
+  it('Displays 0', () => {
+    render(<NumericCell value={0} valueFormatted="0.00" testId={testId} />);
+    expect(screen.getByTestId(testId)).toHaveTextContent('0.00');
+  });
+
+  it('Displays - if value is not a number', () => {
+    render(<NumericCell value={null} valueFormatted="" testId={testId} />);
+    expect(screen.getByTestId(testId)).toHaveTextContent('-');
+  });
+});

libs/react-helpers/src/lib/grid/numeric-cell.tsx

@@ -0,0 +1,44 @@
+import { forwardRef } from 'react';
+import { getDecimalSeparator, isNumeric } from '../format';
+
+interface NumericCellProps {
+  value: number | bigint | null | undefined;
+  valueFormatted: string;
+  testId?: string;
+}
+
+/**
+ * Renders a numeric value in a consistent way for data grid
+ * use, right aligned, monospace and decimals deemphasised
+ */
+export const NumericCell = forwardRef<HTMLSpanElement, NumericCellProps>(
+  ({ value, valueFormatted, testId }, ref) => {
+    if (!isNumeric(value)) {
+      return (
+        <span ref={ref} data-testid={testId}>
+          -
+        </span>
+      );
+    }
+
+    const decimalSeparator = getDecimalSeparator();
+    const valueSplit: string[] = decimalSeparator
+      ? valueFormatted.split(decimalSeparator).map((v) => `${v}`)
+      : [`${value}`];
+
+    return (
+      <span
+        ref={ref}
+        className="font-mono relative text-black dark:text-white whitespace-nowrap overflow-hidden text-ellipsis text-right rtl-dir"
+        data-testid={testId}
+        title={valueFormatted}
+      >
+        {valueSplit[0]}
+        {valueSplit[1] ? decimalSeparator : null}
+        {valueSplit[1] ? (
+          <span className="opacity-60">{valueSplit[1]}</span>
+        ) : null}
+      </span>
+    );
+  }
+);

libs/react-helpers/src/lib/grid/price-cell.spec.tsx

@@ -1,15 +1,15 @@
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
-import * as React from 'react';
+import userEvent from '@testing-library/user-event';
 
 import { PriceCell } from './price-cell';
 
-describe('<PriceCell />', () => {
+describe('PriceCell', () => {
   it('Displays formatted value', () => {
     render(<PriceCell value={100} valueFormatted="100.00" />);
     expect(screen.getByTestId('price')).toHaveTextContent('100.00');
     expect(screen.getByTestId('price')).toHaveAttribute('title', '100.00');
   });
+
   it('Displays 0', () => {
     render(<PriceCell value={0} valueFormatted="0.00" />);
     expect(screen.getByTestId('price')).toHaveTextContent('0.00');
@@ -19,4 +19,14 @@ describe('<PriceCell />', () => {
     render(<PriceCell value={null} valueFormatted="" />);
     expect(screen.getByTestId('price')).toHaveTextContent('-');
   });
+
+  it('can be clicked if given an onClick handler', async () => {
+    const mockOnClick = jest.fn();
+    const value = 100;
+    render(
+      <PriceCell value={value} valueFormatted="100.00" onClick={mockOnClick} />
+    );
+    await userEvent.click(screen.getByTestId('price'));
+    expect(mockOnClick).toHaveBeenCalledWith(value);
+  });
 });

libs/react-helpers/src/lib/grid/price-cell.tsx

@@ -1,5 +1,6 @@
 import { memo, forwardRef } from 'react';
-import { getDecimalSeparator, isNumeric } from '../format';
+import { isNumeric } from '../format';
+import { NumericCell } from './numeric-cell';
 export interface IPriceCellProps {
   value: number | bigint | null | undefined;
   valueFormatted: string;
@@ -17,41 +18,23 @@ export const PriceCell = memo(
           </span>
         );
       }
-      const decimalSeparator = getDecimalSeparator();
-      const valueSplit: string[] = decimalSeparator
-        ? valueFormatted.split(decimalSeparator).map((v) => `${v}`)
-        : [`${value}`];
       return onClick ? (
         <button
           onClick={() => onClick(value)}
-          className="hover:dark:bg-neutral-800 hover:bg-neutral-200"
+          className="hover:dark:bg-neutral-800 hover:bg-neutral-200 text-right"
         >
-          <span
-            ref={ref}
-            className="font-mono relative text-black dark:text-white whitespace-nowrap overflow-hidden text-ellipsis text-right rtl-dir"
-            data-testid={testId || 'price'}
-            title={valueFormatted}
-          >
-            {valueSplit[0]}
-            {valueSplit[1] ? decimalSeparator : null}
-            {valueSplit[1] ? (
-              <span className="opacity-60">{valueSplit[1]}</span>
-            ) : null}
-          </span>
+          <NumericCell
+            value={value}
+            valueFormatted={valueFormatted}
+            testId={testId || 'price'}
+          />
         </button>
       ) : (
-        <span
-          ref={ref}
-          className="font-mono relative text-black dark:text-white whitespace-nowrap overflow-hidden text-ellipsis text-right rtl-dir"
-          data-testid={testId || 'price'}
-          title={valueFormatted}
-        >
-          {valueSplit[0]}
-          {valueSplit[1] ? decimalSeparator : null}
-          {valueSplit[1] ? (
-            <span className="opacity-60">{valueSplit[1]}</span>
-          ) : null}
-        </span>
+        <NumericCell
+          value={value}
+          valueFormatted={valueFormatted}
+          testId={testId || 'price'}
+        />
       );
     }
   )

libs/react-helpers/src/lib/grid/vol-cell.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { ICellRendererParams } from 'ag-grid-community';
-import { PriceCell } from './price-cell';
 import classNames from 'classnames';
 import * as tailwind from '@vegaprotocol/tailwindcss-config';
+import { NumericCell } from './numeric-cell';
 
 export enum VolumeType {
   bid,
@@ -43,17 +43,11 @@ export const Vol = React.memo(
             backgroundColor: type === VolumeType.bid ? BID_COLOR : ASK_COLOR,
             opacity: type === VolumeType.bid ? 0.6 : 0.6,
           }}
-        ></div>
-        <PriceCell value={value} valueFormatted={valueFormatted} />
+        />
+        <NumericCell value={value} valueFormatted={valueFormatted} />
       </div>
     );
   }
 );
 
 Vol.displayName = 'Vol';
-
-export const VolCell = ({ value, valueFormatted }: IVolCellProps) => (
-  <Vol value={value} {...valueFormatted} />
-);
-
-VolCell.displayName = 'VolCell';

libs/trades/src/lib/trades-table.tsx

@@ -1,16 +1,20 @@
 import type { AgGridReact } from 'ag-grid-react';
 import { AgGridColumn } from 'ag-grid-react';
 import { forwardRef } from 'react';
-import type { VegaICellRendererParams } from '@vegaprotocol/ui-toolkit';
+import type {
+  VegaICellRendererParams,
+  VegaValueFormatterParams,
+} from '@vegaprotocol/ui-toolkit';
 import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
 import {
   addDecimal,
   addDecimalsFormatNumber,
   getDateTimeFormat,
+  NumericCell,
   t,
 } from '@vegaprotocol/react-helpers';
 import type { IDatasource, IGetRowsParams } from 'ag-grid-community';
-import type { CellClassParams, ValueFormatterParams } from 'ag-grid-community';
+import type { CellClassParams } from 'ag-grid-community';
 import type { AgGridReactProps } from 'ag-grid-react';
 import type { Trade } from './trades-data-provider';
 import { Side } from '@vegaprotocol/types';
@@ -44,21 +48,15 @@ interface Props extends AgGridReactProps {
   onClick?: (price?: string) => void;
 }
 
-type TradesTableValueFormatterParams = Omit<
-  ValueFormatterParams,
-  'data' | 'value'
-> & {
-  data: Trade | null;
-};
-
 export const TradesTable = forwardRef<AgGridReact, Props>((props, ref) => {
   return (
     <AgGrid
-      style={{ width: '100%', height: '100%' }}
+      style={{ width: '100%', height: '100%', background: 'red' }}
       overlayNoRowsTemplate={t('No trades')}
       getRowId={({ data }) => data.id}
       ref={ref}
       defaultColDef={{
+        flex: 1,
         resizable: true,
       }}
       {...props}
@@ -72,10 +70,8 @@ export const TradesTable = forwardRef<AgGridReact, Props>((props, ref) => {
         valueFormatter={({
           value,
           data,
-        }: TradesTableValueFormatterParams & {
-          value: Trade['price'];
-        }) => {
-          if (!data?.market) {
+        }: VegaValueFormatterParams<Trade, 'price'>) => {
+          if (!value || !data?.market) {
             return null;
           }
           return addDecimalsFormatNumber(value, data.market.decimalPlaces);
@@ -110,10 +106,8 @@ export const TradesTable = forwardRef<AgGridReact, Props>((props, ref) => {
         valueFormatter={({
           value,
           data,
-        }: TradesTableValueFormatterParams & {
-          value: Trade['size'];
-        }) => {
-          if (!data?.market) {
+        }: VegaValueFormatterParams<Trade, 'size'>) => {
+          if (!value || !data?.market) {
             return null;
           }
           return addDecimalsFormatNumber(
@@ -121,16 +115,17 @@ export const TradesTable = forwardRef<AgGridReact, Props>((props, ref) => {
             data.market.positionDecimalPlaces
           );
         }}
+        cellRenderer={NumericCell}
       />
       <AgGridColumn
         headerName={t('Created at')}
         field="createdAt"
+        type="rightAligned"
         width={170}
+        cellClass="text-right"
         valueFormatter={({
           value,
-        }: TradesTableValueFormatterParams & {
-          value: Trade['createdAt'];
-        }) => {
+        }: VegaValueFormatterParams<Trade, 'createdAt'>) => {
           return value && getDateTimeFormat().format(new Date(value));
         }}
       />

libs/ui-toolkit/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@vegaprotocol/ui-toolkit",
-  "version": "0.7.0"
+  "version": "0.0.1"
 }

package.json

@@ -14,7 +14,7 @@
     "vegacapsule": "vegacapsule network bootstrap --config-path=../frontend-monorepo/vegacapsule/config.hcl"
   },
   "engines": {
-    "node": ">=16.15.1"
+    "node": ">=16.14.0"
   },
   "private": true,
   "dependencies": {