fix: seller fills should be red (#1597)

libs/fills/src/lib/fills-table.spec.tsx

@@ -53,8 +53,7 @@ describe('FillsTable', () => {
 
     await screen.findByText('Market');
     const headers = screen.getAllByRole('columnheader');
-    expect(headers).toHaveLength(7);
+    const expectedHeaders = [
-    expect(headers.map((h) => h.textContent?.trim())).toEqual([
       'Market',
       'Size',
       'Value',
@@ -62,7 +61,9 @@ describe('FillsTable', () => {
       'Role',
       'Fee',
       'Date',
-    ]);
+    ];
+    expect(headers).toHaveLength(expectedHeaders.length);
+    expect(headers.map((h) => h.textContent?.trim())).toEqual(expectedHeaders);
   });
 
   it('formats cells correctly for buyer fill', async () => {
@@ -80,44 +81,6 @@ describe('FillsTable', () => {
       },
     });
 
-    render(<FillsTable partyId={partyId} rowData={[buyerFill]} />);
-
-    await waitForGridToBeInTheDOM();
-    await waitForDataToHaveLoaded();
-
-    const cells = screen.getAllByRole('gridcell');
-    const expectedValues = [
-      buyerFill.market?.tradableInstrument.instrument.name || '',
-      '+3.00000',
-      '1.00 BTC',
-      '3.00 BTC',
-      'Maker',
-      '0.06 BTC',
-      getDateTimeFormat().format(new Date(buyerFill.createdAt)),
-    ];
-    cells.forEach((cell, i) => {
-      expect(cell).toHaveTextContent(expectedValues[i]);
-    });
-
-    const amountCell = cells.find((c) => c.getAttribute('col-id') === 'size');
-    expect(amountCell).toHaveClass('text-vega-green-dark');
-  });
-
-  it('should format cells correctly for buyer fill', async () => {
-    const partyId = 'party-id';
-    const buyerFill = generateFill({
-      ...defaultFill,
-      buyer: {
-        id: partyId,
-      },
-      aggressor: Side.SIDE_SELL,
-      buyerFee: {
-        makerFee: '2',
-        infrastructureFee: '2',
-        liquidityFee: '2',
-      },
-    });
-
     render(<FillsTable partyId={partyId} rowData={[buyerFill]} />);
     await waitForGridToBeInTheDOM();
     await waitForDataToHaveLoaded();
@@ -175,6 +138,7 @@ describe('FillsTable', () => {
 
     const amountCell = cells.find((c) => c.getAttribute('col-id') === 'size');
     expect(amountCell).toHaveClass('text-vega-red-dark');
+    screen.debug();
   });
 
   it('should render correct maker or taker role', async () => {

libs/fills/src/lib/fills-table.stories.tsx

@@ -11,9 +11,29 @@ export default {
 const Template: Story<Props> = (args) => <FillsTable {...args} />;
 export const Default = Template.bind({});
 
+const partyId = 'party-id';
 Default.args = {
-  partyId: 'party-id',
+  partyId,
-  rowData: Array(5)
+  rowData: [
-    .fill(null)
+    generateFill({
-    .map(() => generateFill()),
+      seller: {
+        id: partyId,
+      },
+    }),
+    generateFill({
+      buyer: {
+        id: partyId,
+      },
+    }),
+    generateFill({
+      seller: {
+        id: partyId,
+      },
+    }),
+    generateFill({
+      buyer: {
+        id: partyId,
+      },
+    }),
+  ],
 };

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

@@ -10,26 +10,17 @@ import {
 } from '@vegaprotocol/react-helpers';
 import { Side } from '@vegaprotocol/types';
 import { AgGridColumn } from 'ag-grid-react';
+import type { VegaValueFormatterParams } from '@vegaprotocol/ui-toolkit';
 import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
 import { forwardRef } from 'react';
-import type { ValueFormatterParams } from 'ag-grid-community';
 import BigNumber from 'bignumber.js';
 import type { AgGridReactProps, AgReactUiProps } from 'ag-grid-react';
 import type { Trade } from './fills-data-provider';
-import type { Market } from '@vegaprotocol/market-list';
-import classNames from 'classnames';
 
 export type Props = (AgGridReactProps | AgReactUiProps) & {
   partyId: string;
 };
 
-type AccountsTableValueFormatterParams = Omit<
-  ValueFormatterParams,
-  'data' | 'value'
-> & {
-  data: Trade | null;
-};
-
 export const FillsTable = forwardRef<AgGridReact, Props>(
   ({ partyId, ...props }, ref) => {
     return (
@@ -49,11 +40,15 @@ export const FillsTable = forwardRef<AgGridReact, Props>(
           headerName={t('Size')}
           type="rightAligned"
           field="size"
-          cellClass={({ data }: { data: Trade }) => {
+          cellClassRules={{
-            return classNames('text-right', {
+            [positiveClassNames]: ({ data }: { data: Trade }) => {
-              [positiveClassNames]: data?.buyer.id === partyId,
+              const partySide = getPartySide(data, partyId);
-              [negativeClassNames]: data?.seller.id,
+              return partySide === 'buyer';
-            });
+            },
+            [negativeClassNames]: ({ data }: { data: Trade }) => {
+              const partySide = getPartySide(data, partyId);
+              return partySide === 'seller';
+            },
           }}
           valueFormatter={formatSize(partyId)}
         />
@@ -85,12 +80,7 @@ export const FillsTable = forwardRef<AgGridReact, Props>(
           field="createdAt"
           valueFormatter={({
             value,
-          }: AccountsTableValueFormatterParams & {
+          }: VegaValueFormatterParams<Trade, 'createdAt'>) => {
-            value: Trade['createdAt'];
-          }) => {
-            if (value === undefined) {
-              return value;
-            }
             return getDateTimeFormat().format(new Date(value));
           }}
         />
@@ -102,11 +92,9 @@ export const FillsTable = forwardRef<AgGridReact, Props>(
 const formatPrice = ({
   value,
   data,
-}: AccountsTableValueFormatterParams & {
+}: VegaValueFormatterParams<Trade, 'price'>) => {
-  value?: Trade['price'];
+  if (!data.market) {
-}) => {
+    return '-';
-  if (value === undefined || !data || !data?.market) {
-    return undefined;
   }
   const asset =
     data?.market.tradableInstrument.instrument.product.settlementAsset.symbol;
@@ -118,19 +106,16 @@ const formatPrice = ({
 };
 
 const formatSize = (partyId: string) => {
-  return ({
+  return ({ value, data }: VegaValueFormatterParams<Trade, 'size'>) => {
-    value,
+    if (!data.market) {
-    data,
+      return '-';
-  }: AccountsTableValueFormatterParams & {
-    value?: Trade['size'];
-  }) => {
-    if (value === undefined || !data || !data?.market) {
-      return undefined;
     }
-    let prefix;
+    let prefix = '';
-    if (data?.buyer.id === partyId) {
+    const partySide = getPartySide(data, partyId);
+
+    if (partySide === 'buyer') {
       prefix = '+';
-    } else if (data?.seller.id) {
+    } else if (partySide === 'seller') {
       prefix = '-';
     }
 
@@ -142,14 +127,25 @@ const formatSize = (partyId: string) => {
   };
 };
 
+const getPartySide = (
+  data: Trade,
+  partyId: string
+): 'buyer' | 'seller' | undefined => {
+  let result = undefined;
+  if (data?.buyer.id === partyId) {
+    result = 'buyer' as const;
+  } else if (data?.seller.id === partyId) {
+    result = 'seller' as const;
+  }
+  return result;
+};
+
 const formatTotal = ({
   value,
   data,
-}: AccountsTableValueFormatterParams & {
+}: VegaValueFormatterParams<Trade, 'price'>) => {
-  value?: Trade['price'];
+  if (!data?.market) {
-}) => {
+    return '-';
-  if (value === undefined || !data || !data?.market) {
-    return undefined;
   }
   const asset =
     data?.market.tradableInstrument.instrument.product.settlementAsset.symbol;
@@ -164,15 +160,7 @@ const formatTotal = ({
 };
 
 const formatRole = (partyId: string) => {
-  return ({
+  return ({ value, data }: VegaValueFormatterParams<Trade, 'aggressor'>) => {
-    value,
-    data,
-  }: AccountsTableValueFormatterParams & {
-    value?: Trade['aggressor'];
-  }) => {
-    if (value === undefined) {
-      return value;
-    }
     const taker = t('Taker');
     const maker = t('Maker');
     if (data?.buyer.id === partyId) {
@@ -197,11 +185,12 @@ const formatFee = (partyId: string) => {
   return ({
     value,
     data,
-  }: AccountsTableValueFormatterParams & {
+  }: VegaValueFormatterParams<
-    value?: Market['tradableInstrument']['instrument']['product'];
+    Trade,
-  }) => {
+    'market.tradableInstrument.instrument.product'
-    if (value === undefined) {
+  >) => {
-      return value;
+    if (!value?.settlementAsset) {
+      return '-';
     }
     const asset = value.settlementAsset;
     let feesObj;

libs/ui-toolkit/src/components/ag-grid/index.tsx

@@ -17,10 +17,11 @@ type RowHelper<TObj, TRow, TField extends Field> = Omit<
   value: Get<TRow, TField>;
 };
 
-export type VegaValueFormatterParams<
+export type VegaValueFormatterParams<TRow, TField extends Field> = RowHelper<
+  ValueFormatterParams,
   TRow,
-  TField extends Field = string
+  TField
-> = RowHelper<ValueFormatterParams, TRow, TField>;
+>;
 
 export type VegaICellRendererParams<
   TRow,