chore: remove unused import

apps/governance-e2e/src/integration/flow/proposal-details.cy.ts

@@ -4,11 +4,12 @@ import {
   navigation,
 } from '../../support/common.functions';
 import {
+  convertUnixTimestampToDateformat,
   createRawProposal,
   createTenDigitUnixTimeStampForSpecifiedDays,
   enterUniqueFreeFormProposalBody,
   generateFreeFormProposalTitle,
-  getDateFormatForSpecifiedDays,
+  getGovernanceProposalDateFormatForSpecifiedDays,
   getProposalIdFromList,
   getProposalInformationFromTable,
   getSubmittedProposalFromProposalList,
@@ -22,7 +23,6 @@ import { ensureSpecifiedUnstakedTokensAreAssociated } from '../../../../governan
 import { ethereumWalletConnect } from '../../../../governance-e2e/src/support/wallet-eth.functions';
 import { vegaWalletSetSpecifiedApprovalAmount } from '../../../../governance-e2e/src/support/wallet-teardown.functions';
 import type { testFreeformProposal } from '../../support/common-interfaces';
-import { formatDateWithLocalTimezone } from '@vegaprotocol/utils';
 
 const proposalVoteProgressForPercentage =
   '[data-testid="vote-progress-indicator-percentage-for"]';
@@ -99,22 +99,20 @@ describe(
       getSubmittedProposalFromProposalList(proposalTitle).within(() =>
         cy.get(viewProposalButton).click()
       );
-      cy.wrap(
-        formatDateWithLocalTimezone(new Date(proposalTimeStamp * 1000))
-      ).then((closingDate) => {
-        getProposalInformationFromTable('Closes on')
-          .contains(closingDate)
-          .should('be.visible');
-      });
-      cy.wrap(
-        formatDateWithLocalTimezone(
-          new Date(createTenDigitUnixTimeStampForSpecifiedDays(0) * 1000)
-        )
-      ).then((proposalDate) => {
-        getProposalInformationFromTable('Proposed on')
-          .contains(proposalDate)
-          .should('be.visible');
-      });
+      convertUnixTimestampToDateformat(proposalTimeStamp).then(
+        (closingDate) => {
+          getProposalInformationFromTable('Closes on')
+            .contains(closingDate)
+            .should('be.visible');
+        }
+      );
+      getGovernanceProposalDateFormatForSpecifiedDays(0).then(
+        (proposalDate) => {
+          getProposalInformationFromTable('Proposed on')
+            .contains(proposalDate)
+            .should('be.visible');
+        }
+      );
     });
 
     it('Newly created proposal details - shows default status set to fail', function () {
@@ -157,16 +155,18 @@ describe(
       cy.getByTestId('vote-buttons').contains('against').should('be.visible');
       cy.getByTestId('vote-buttons').contains('for').should('be.visible');
       voteForProposal('for');
-      getDateFormatForSpecifiedDays(0).then((votedDate) => {
-        // 3001-VOTE-051
-        // 3001-VOTE-093
-        cy.contains('You voted:')
-          .siblings()
-          .contains('For')
-          .siblings()
-          .contains(votedDate)
-          .should('be.visible');
-      });
+      getGovernanceProposalDateFormatForSpecifiedDays(0, 'shortMonth').then(
+        (votedDate) => {
+          // 3001-VOTE-051
+          // 3001-VOTE-093
+          cy.contains('You voted:')
+            .siblings()
+            .contains('For')
+            .siblings()
+            .contains(votedDate)
+            .should('be.visible');
+        }
+      );
       cy.get(proposalVoteProgressForPercentage) // 3001-VOTE-072
         .contains('100.00%')
         .and('be.visible');

apps/governance-e2e/src/support/governance.functions.ts

@@ -1,4 +1,3 @@
-import { format } from 'date-fns';
 import { closeDialog, navigateTo, navigation } from './common.functions';
 import { ensureSpecifiedUnstakedTokensAreAssociated } from './staking.functions';
 
@@ -16,6 +15,35 @@ const newProposalSubmitButton = '[data-testid="proposal-submit"]';
 const epochTimeout = Cypress.env('epochTimeout');
 const proposalTimeout = { timeout: 14000 };
 
+export function convertUnixTimestampToDateformat(
+  unixTimestamp: number,
+  monthTextLength = 'longMonth'
+) {
+  const dateSupplied = new Date(unixTimestamp * 1000);
+  const year = dateSupplied.getFullYear();
+  const months = [
+    'January',
+    'February',
+    'March',
+    'April',
+    'May',
+    'June',
+    'July',
+    'August',
+    'September',
+    'October',
+    'November',
+    'December',
+  ];
+  const month = months[dateSupplied.getMonth()];
+  const shortMonth = months[dateSupplied.getMonth()].substring(0, 3),
+    date = dateSupplied.getDate();
+
+  if (monthTextLength === 'longMonth') {
+    return cy.wrap(`${date} ${month} ${year}`);
+  } else return cy.wrap(`${date} ${shortMonth} ${year}`);
+}
+
 export function createTenDigitUnixTimeStampForSpecifiedDays(
   durationDays: number
 ) {
@@ -24,13 +52,6 @@ export function createTenDigitUnixTimeStampForSpecifiedDays(
   return (timestamp = Math.floor(timestamp / 1000));
 }
 
-export function getDateFormatForSpecifiedDays(days: number) {
-  const date = new Date(
-    createTenDigitUnixTimeStampForSpecifiedDays(days) * 1000
-  );
-  return cy.wrap(format(date, 'dd MMM yyyy'));
-}
-
 export function enterRawProposalBody(timestamp: number) {
   cy.fixture('/proposals/raw.json').then((rawProposal) => {
     rawProposal.terms.closingTimestamp = timestamp;
@@ -83,6 +104,16 @@ export function getProposalIdFromList(proposalTitle: string) {
     });
 }
 
+export function getGovernanceProposalDateFormatForSpecifiedDays(
+  days: number,
+  shortOrLong?: string
+) {
+  return convertUnixTimestampToDateformat(
+    createTenDigitUnixTimeStampForSpecifiedDays(days),
+    shortOrLong
+  );
+}
+
 export function getProposalInformationFromTable(heading: string) {
   return cy.get(proposalInformationTableRows).contains(heading).siblings();
 }

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

@@ -49,7 +49,7 @@
     "tranche_end": "2023-05-20T00:00:00.000Z",
     "total_added": "19242.125",
     "total_removed": "1523.8177488329475",
-    "locked_amount": "7048.7719635898923554",
+    "locked_amount": "7212.6566671006941451225",
     "deposits": [
       {
         "amount": "188",
@@ -4861,7 +4861,7 @@
     "tranche_end": "2023-12-05T00:00:00.000Z",
     "total_added": "86666.297",
     "total_removed": "0",
-    "locked_amount": "49860.3304086439895572664",
+    "locked_amount": "49920.9990150801905814456",
     "deposits": [
       {
         "amount": "86666.297",
@@ -4927,7 +4927,7 @@
     "tranche_end": "2023-06-01T00:00:00.000Z",
     "total_added": "2500",
     "total_removed": "0",
-    "locked_amount": "315.79113883801385",
+    "locked_amount": "319.3008814102563",
     "deposits": [
       {
         "amount": "2500",
@@ -4960,7 +4960,7 @@
     "tranche_end": "2023-11-01T00:00:00.000Z",
     "total_added": "15000.000000000000015",
     "total_removed": "0",
-    "locked_amount": "14346.9778457125605143469778457125605",
+    "locked_amount": "14367.8074048913055143678074048913055",
     "deposits": [
       {
         "amount": "1.5e-14",
@@ -5048,7 +5048,7 @@
     "tranche_end": "2023-09-01T00:00:00.000Z",
     "total_added": "17500",
     "total_removed": "0",
-    "locked_amount": "10936.51038521537825",
+    "locked_amount": "10960.81153759058075",
     "deposits": [
       {
         "amount": "12500",
@@ -5315,7 +5315,7 @@
     "tranche_end": "2023-08-01T00:00:00.000Z",
     "total_added": "37500",
     "total_removed": "18077.0118744",
-    "locked_amount": "17401.159165899324375",
+    "locked_amount": "17454.09616712707275",
     "deposits": [
       {
         "amount": "7500",
@@ -5734,7 +5734,7 @@
     "tranche_end": "2023-12-05T00:00:00.000Z",
     "total_added": "129999.45",
     "total_removed": "0",
-    "locked_amount": "49814.839130813438918838",
+    "locked_amount": "49875.452384779875914865",
     "deposits": [
       {
         "amount": "129999.45",
@@ -5767,7 +5767,7 @@
     "tranche_end": "2024-04-01T00:00:00.000Z",
     "total_added": "54144.7663",
     "total_removed": "0",
-    "locked_amount": "48521.63924888864092183046",
+    "locked_amount": "48559.43839951727367721104",
     "deposits": [
       {
         "amount": "54144.7663",
@@ -5800,7 +5800,7 @@
     "tranche_end": "2023-09-03T00:00:00.000Z",
     "total_added": "62600",
     "total_removed": "0",
-    "locked_amount": "20064.516825215627982",
+    "locked_amount": "20108.33841324200696",
     "deposits": [
       {
         "amount": "10000",
@@ -5993,7 +5993,7 @@
     "tranche_end": "2023-09-17T00:00:00.000Z",
     "total_added": "5000",
     "total_removed": "0",
-    "locked_amount": "1794.3780124302383",
+    "locked_amount": "1797.8781392694065",
     "deposits": [
       {
         "amount": "5000",
@@ -7062,7 +7062,7 @@
     "tranche_end": "2023-06-02T00:00:00.000Z",
     "total_added": "1939928.38",
     "total_removed": "1709370.7872515768348",
-    "locked_amount": "127501.632837213895787904",
+    "locked_amount": "128859.6319149943131426072",
     "deposits": [
       {
         "amount": "1852091.69",
@@ -40934,7 +40934,7 @@
     "tranche_end": "2023-06-05T00:00:00.000Z",
     "total_added": "3732368.4671",
     "total_removed": "715655.108029600523393",
-    "locked_amount": "220426.943046411634396105333",
+    "locked_amount": "222513.620297182261029038238",
     "deposits": [
       {
         "amount": "1998.95815",
@@ -42327,7 +42327,7 @@
     "tranche_end": "2023-12-05T00:00:00.000Z",
     "total_added": "15870102.715470999700000001",
     "total_removed": "871680.07831804700259352",
-    "locked_amount": "6081307.37292098829210815160177023943687484",
+    "locked_amount": "6088706.59647473650614127721578713908867263",
     "deposits": [
       {
         "amount": "16249.93",
@@ -59070,7 +59070,7 @@
     "tranche_end": "2023-06-05T00:00:00.000Z",
     "total_added": "472355.6199999996",
     "total_removed": "44479.0535455583416",
-    "locked_amount": "34927.90913982811608735474530694",
+    "locked_amount": "35258.555078168385972699682090332",
     "deposits": [
       {
         "amount": "3000",

apps/trading/client-pages/liquidity/liquidity.tsx

@@ -12,7 +12,7 @@ import {
   formatNumberPercentage,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import { updateGridData } from '@vegaprotocol/react-helpers';
+import { updateGridData } from '@vegaprotocol/datagrid';
 import {
   NetworkParams,
   useNetworkParams,

apps/trading/client-pages/portfolio/deposits-container.tsx

@@ -2,7 +2,7 @@ import { AsyncRenderer, Button } from '@vegaprotocol/ui-toolkit';
 import { useDepositDialog, DepositsTable } from '@vegaprotocol/deposits';
 import { depositsProvider } from '@vegaprotocol/deposits';
 import { t } from '@vegaprotocol/i18n';
-import { useBottomPlaceholder } from '@vegaprotocol/react-helpers';
+import { useBottomPlaceholder } from '@vegaprotocol/datagrid';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useRef } from 'react';

libs/accounts/src/lib/accounts-manager.tsx

@@ -1,6 +1,6 @@
 import { useRef, useMemo, memo, useCallback } from 'react';
 import { t } from '@vegaprotocol/i18n';
-import { useBottomPlaceholder } from '@vegaprotocol/react-helpers';
+import { useBottomPlaceholder } from '@vegaprotocol/datagrid';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import type { AgGridReact } from 'ag-grid-react';

libs/datagrid/src/index.ts

@@ -10,6 +10,7 @@ export * from './lib/cells/vol-cell';
 export * from './lib/cells/centered-grid-cell';
 export * from './lib/cells/market-name-cell';
 export * from './lib/cells/order-type-cell';
+export * from './lib/cells/size';
 
 export * from './lib/filters/date-range-filter';
 export * from './lib/filters/set-filter';
@@ -18,3 +19,6 @@ export * from './lib/cell-class-rules';
 export * from './lib/type-helpers';
 
 export * from './lib/cells/grid-progress-bar';
+
+export * from './lib/ag-grid-update';
+export * from './lib/use-bottom-placeholder';

libs/datagrid/src/lib/ag-grid-update.ts

@@ -1,7 +1,8 @@
 import type { MutableRefObject, RefObject } from 'react';
 import type { AgGridReact } from 'ag-grid-react';
-import type { IGetRowsParams } from 'ag-grid-community';
+
 type AnyArray = Array<any> | null; // eslint-disable-line @typescript-eslint/no-explicit-any
+
 export const isXOrWasEmpty = (prev?: AnyArray, curr?: AnyArray) =>
   Boolean(Number(!!prev?.length) ^ Number(!!curr?.length));
 
@@ -17,14 +18,3 @@ export const updateGridData = (
   }
   return !rerender;
 };
-
-export const makeGetRows =
-  (dataRef: MutableRefObject<AnyArray>) =>
-  () =>
-  async ({ successCallback, startRow, endRow }: IGetRowsParams) => {
-    const rowsThisBlock = dataRef.current
-      ? dataRef.current.slice(startRow, endRow)
-      : [];
-    const lastRow = dataRef.current ? dataRef.current.length : 0;
-    successCallback(rowsThisBlock, lastRow);
-  };

libs/deal-ticket/src/components/deal-ticket/deal-ticket.spec.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { VegaWalletContext } from '@vegaprotocol/wallet';
-import { act, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { generateMarket, generateMarketData } from '../../test-helpers';
 import { DealTicket } from './deal-ticket';
@@ -40,21 +40,12 @@ describe('DealTicket', () => {
   });
 
   it('should display ticket defaults', () => {
-    const { container } = render(generateJsx());
+    render(generateJsx());
 
     // Assert defaults are used
     expect(
       screen.getByTestId(`order-type-${Schema.OrderType.TYPE_MARKET}`)
     ).toBeInTheDocument();
-    expect(
-      screen.getByTestId(`order-type-${Schema.OrderType.TYPE_LIMIT}`)
-    ).toBeInTheDocument();
-
-    const oderTypeLimitToggle = container.querySelector(
-      `[data-testid="order-type-${Schema.OrderType.TYPE_LIMIT}"] input[type="radio"]`
-    );
-    expect(oderTypeLimitToggle).toBeChecked();
-
     expect(
       screen.queryByTestId('order-side-SIDE_BUY')?.querySelector('input')
     ).toBeChecked();
@@ -63,15 +54,8 @@ describe('DealTicket', () => {
     ).not.toBeChecked();
     expect(screen.getByTestId('order-size')).toHaveDisplayValue('0');
     expect(screen.getByTestId('order-tif')).toHaveValue(
-      Schema.OrderTimeInForce.TIME_IN_FORCE_GTC
+      Schema.OrderTimeInForce.TIME_IN_FORCE_IOC
     );
-  });
-
-  it('should display last price for market type order', () => {
-    render(generateJsx());
-    act(() => {
-      screen.getByTestId(`order-type-${Schema.OrderType.TYPE_MARKET}`).click();
-    });
     // Assert last price is shown
     expect(screen.getByTestId('last-price')).toHaveTextContent(
       // eslint-disable-next-line
@@ -222,11 +206,7 @@ describe('DealTicket', () => {
   it('handles TIF select box dependent on order type', async () => {
     render(generateJsx());
 
-    act(() => {
-      screen.getByTestId(`order-type-${Schema.OrderType.TYPE_MARKET}`).click();
-    });
-
-    // Only FOK and IOC should be present for type market order
+    // Only FOK and IOC should be present by default (type market order)
     expect(
       Array.from(screen.getByTestId('order-tif').children).map(
         (o) => o.textContent

libs/deal-ticket/src/components/deal-ticket/type-selector.tsx

@@ -20,8 +20,8 @@ interface TypeSelectorProps {
 }
 
 const toggles = [
-  { label: t('Limit'), value: Schema.OrderType.TYPE_LIMIT },
   { label: t('Market'), value: Schema.OrderType.TYPE_MARKET },
+  { label: t('Limit'), value: Schema.OrderType.TYPE_LIMIT },
 ];
 
 export const TypeSelector = ({

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

@@ -6,7 +6,7 @@ import { FillsTable } from './fills-table';
 import type { BodyScrollEvent, BodyScrollEndEvent } from 'ag-grid-community';
 import { useFillsList } from './use-fills-list';
 import type { Trade } from './fills-data-provider';
-import { useBottomPlaceholder } from '@vegaprotocol/react-helpers';
+import { useBottomPlaceholder } from '@vegaprotocol/datagrid';
 
 interface FillsManagerProps {
   partyId: string;

libs/fills/src/lib/use-fills-list.ts

@@ -2,7 +2,7 @@ import type { RefObject } from 'react';
 import type { AgGridReact } from 'ag-grid-react';
 import { useCallback, useRef } from 'react';
 import { makeInfiniteScrollGetRows } from '@vegaprotocol/data-provider';
-import { updateGridData } from '@vegaprotocol/react-helpers';
+import { updateGridData } from '@vegaprotocol/datagrid';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import type { Trade, TradeEdge } from './fills-data-provider';
 import { fillsWithMarketProvider } from './fills-data-provider';

libs/ledger/src/lib/ledger-entries-data-provider.ts

@@ -3,7 +3,7 @@ import { assetsProvider } from '@vegaprotocol/assets';
 import type { Market } from '@vegaprotocol/market-list';
 import { marketsProvider } from '@vegaprotocol/market-list';
 import { makeInfiniteScrollGetRows } from '@vegaprotocol/data-provider';
-import { updateGridData } from '@vegaprotocol/react-helpers';
+import { updateGridData } from '@vegaprotocol/datagrid';
 import {
   makeDataProvider,
   makeDerivedDataProvider,

libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx

@@ -7,7 +7,7 @@ import type { GridReadyEvent, FilterChangedEvent } from 'ag-grid-community';
 
 import { OrderListTable } from '../order-list/order-list';
 import { useHasAmendableOrder } from '../../order-hooks/use-has-amendable-order';
-import { useBottomPlaceholder } from '@vegaprotocol/react-helpers';
+import { useBottomPlaceholder } from '@vegaprotocol/datagrid';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { ordersWithMarketProvider } from '../order-data-provider/order-data-provider';
 import {

libs/orders/src/lib/components/order-list/order-edit-dialog.tsx

@@ -6,7 +6,7 @@ import {
   validateAmount,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import { Size } from '@vegaprotocol/react-helpers';
+import { Size } from '@vegaprotocol/datagrid';
 import * as Schema from '@vegaprotocol/types';
 import {
   FormGroup,

libs/orders/src/lib/order-hooks/use-order-store.ts

@@ -109,9 +109,9 @@ export const useOrder = (marketId: string) => {
 
 export const getDefaultOrder = (marketId: string): OrderObj => ({
   marketId,
-  type: OrderType.TYPE_LIMIT,
+  type: OrderType.TYPE_MARKET,
   side: Side.SIDE_BUY,
-  timeInForce: OrderTimeInForce.TIME_IN_FORCE_GTC,
+  timeInForce: OrderTimeInForce.TIME_IN_FORCE_IOC,
   size: '0',
   price: '0',
   expiresAt: undefined,

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

@@ -6,7 +6,7 @@ import type { AgGridReact } from 'ag-grid-react';
 import * as Schema from '@vegaprotocol/types';
 import { useVegaTransactionStore } from '@vegaprotocol/wallet';
 import { t } from '@vegaprotocol/i18n';
-import { useBottomPlaceholder } from '@vegaprotocol/react-helpers';
+import { useBottomPlaceholder } from '@vegaprotocol/datagrid';
 
 interface PositionsManagerProps {
   partyId: string;

libs/positions/src/lib/use-positions-data.tsx

@@ -4,7 +4,7 @@ import type { AgGridReact } from 'ag-grid-react';
 import type { Position } from './positions-data-providers';
 import { positionsMetricsProvider } from './positions-data-providers';
 import type { PositionsQueryVariables } from './__generated__/Positions';
-import { updateGridData } from '@vegaprotocol/react-helpers';
+import { updateGridData } from '@vegaprotocol/datagrid';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import type { GetRowsParams } from '@vegaprotocol/datagrid';
 import isEqual from 'lodash/isEqual';

libs/react-helpers/.eslintrc.json

@@ -9,6 +9,8 @@
           "error",
           "@apollo/client",
           "@vegaprotocol/data-provider",
+          "ag-grid-react",
+          "ag-grid-community",
           "graphql",
           "graphql-tag",
           "graphql-ws",

libs/react-helpers/src/hooks/index.ts

@@ -1,4 +1,3 @@
-export * from './use-apply-grid-transaction';
 export * from './use-fetch';
 export * from './use-local-storage';
 export * from './use-mutation-observer';
@@ -13,5 +12,4 @@ export * from './use-storybook-theme-observer';
 export * from './use-yesterday';
 export * from './use-previous';
 export * from './use-logger';
-export * from './use-bottom-placeholder';
 export * from './use-pane-layout';

libs/react-helpers/src/hooks/use-apply-grid-transaction.spec.ts

@@ -1,74 +0,0 @@
-import { useApplyGridTransaction } from './use-apply-grid-transaction';
-import { renderHook } from '@testing-library/react';
-
-type Items = Array<{ id: string; value: number }>;
-
-const item = {
-  id: '1',
-  value: 1,
-};
-const item2 = {
-  id: '2',
-  value: 2,
-};
-const items = [item, item2];
-
-function setup(items: Items, rowNodes: Items) {
-  const gridApiMock = {
-    applyTransaction: jest.fn(),
-    getRowNode: (id: string) => {
-      const node = rowNodes.find((i) => i.id === id);
-      if (node) {
-        return { data: node };
-      }
-      return undefined;
-    },
-  };
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  renderHook(() => useApplyGridTransaction(items, gridApiMock as any));
-  return gridApiMock;
-}
-
-it('Adds items', () => {
-  const gridApiMock = setup(items, []);
-  expect(gridApiMock.applyTransaction).toHaveBeenCalledWith({
-    update: [],
-    add: items,
-    addIndex: 0,
-  });
-});
-
-it('Doesnt update rows without changes', () => {
-  const rowNodes: Array<{ id: string; value: number }> = [...items];
-  const gridApiMock = setup(items, rowNodes);
-  expect(gridApiMock.applyTransaction).toHaveBeenCalledWith({
-    update: [],
-    add: [],
-    addIndex: 0,
-  });
-});
-
-it('Update rows with changes', () => {
-  const rowNodes = [...items];
-  const updatedItems = [
-    { id: '1', value: 10 },
-    { id: '2', value: 20 },
-  ];
-  const gridApiMock = setup(updatedItems, rowNodes);
-  expect(gridApiMock.applyTransaction).toHaveBeenCalledWith({
-    update: updatedItems,
-    add: [],
-    addIndex: 0,
-  });
-});
-
-it('Updates and adds at the same time', () => {
-  const newItem = { id: '3', value: 3 };
-  const updatedItem = { id: '2', value: 20 };
-  const gridApiMock = setup([newItem, updatedItem], [...items]);
-  expect(gridApiMock.applyTransaction).toHaveBeenCalledWith({
-    update: [updatedItem],
-    add: [newItem],
-    addIndex: 0,
-  });
-});

libs/react-helpers/src/hooks/use-apply-grid-transaction.ts

@@ -1,36 +0,0 @@
-import type { GridApi } from 'ag-grid-community';
-import { useEffect } from 'react';
-import isEqual from 'lodash/isEqual';
-
-export const useApplyGridTransaction = <T extends { id: string }>(
-  data: T[],
-  gridApi: GridApi | null
-) => {
-  useEffect(() => {
-    if (!gridApi) return;
-
-    const update: T[] = [];
-    const add: T[] = [];
-
-    // split into updates and adds
-    data.forEach((d) => {
-      if (!gridApi) return;
-
-      const rowNode = gridApi.getRowNode(d.id);
-
-      if (rowNode) {
-        if (!isEqual(rowNode.data, d)) {
-          update.push(d);
-        }
-      } else {
-        add.push(d);
-      }
-    });
-
-    gridApi.applyTransaction({
-      update,
-      add,
-      addIndex: 0,
-    });
-  }, [data, gridApi]);
-};

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

@@ -1,2 +0,0 @@
-export * from './size';
-export * from './summary-rows';

libs/react-helpers/src/lib/grid/summary-rows.spec.ts

@@ -1,75 +0,0 @@
-import type { GridApi, ColumnApi } from 'ag-grid-community';
-import { addSummaryRows } from './summary-rows';
-
-type RowMock = { group: string; count: string };
-
-const getGroupId = jest.fn();
-getGroupId.mockImplementation(
-  (data: { group: string; __summaryRow: boolean }) =>
-    data.__summaryRow ? null : data.group
-);
-const getGroupSummaryRow = jest.fn();
-getGroupSummaryRow.mockImplementation(
-  (data: RowMock[]): Partial<RowMock> | null => {
-    if (!data.length) {
-      return null;
-    }
-    const row: Partial<RowMock> = {
-      count: data.reduce((a, c) => a + parseFloat(c.count), 0).toString(),
-    };
-    return row;
-  }
-);
-
-const api = {
-  forEachNodeAfterFilterAndSort: jest.fn(),
-  applyTransactionAsync: jest.fn(),
-};
-
-const columnsApi = {};
-
-describe('addSummaryRows', () => {
-  it('should render search input and button', () => {
-    const nodes = [
-      { data: { group: 'a', count: 10 } },
-      { data: { group: 'a', count: 10, __summaryRow: true } },
-      { data: { group: 'a', count: 20 } },
-      { data: { group: 'b', count: 30 } },
-      { data: { group: 'c', count: 40 } },
-      { data: { group: 'c', count: 50 } },
-      { data: { group: 'c', count: 60 } },
-      { data: { group: 'd', count: 10, __summaryRow: true } },
-      { data: { group: 'd', count: 70 } },
-      { data: { group: 'd', count: 80 } },
-    ];
-    api.forEachNodeAfterFilterAndSort.mockImplementationOnce(
-      nodes.forEach.bind(nodes)
-    );
-    addSummaryRows(
-      api as unknown as GridApi,
-      columnsApi as unknown as ColumnApi,
-      getGroupId,
-      getGroupSummaryRow
-    );
-    expect(api.forEachNodeAfterFilterAndSort).toBeCalledTimes(1);
-    expect(api.applyTransactionAsync).toBeCalledTimes(5);
-    expect(api.applyTransactionAsync).toHaveBeenNthCalledWith(1, {
-      remove: [nodes[1].data],
-    });
-    expect(api.applyTransactionAsync).toHaveBeenNthCalledWith(2, {
-      add: [{ count: '30' }],
-      addIndex: 2,
-    });
-    expect(api.applyTransactionAsync).toHaveBeenNthCalledWith(3, {
-      remove: [nodes[7].data],
-    });
-    expect(api.applyTransactionAsync).toHaveBeenNthCalledWith(4, {
-      add: [{ count: '150' }],
-      addIndex: 7,
-    });
-    expect(api.applyTransactionAsync).toHaveBeenNthCalledWith(5, {
-      add: [{ count: '150' }],
-      addIndex: 10,
-    });
-  });
-});

libs/react-helpers/src/lib/grid/summary-rows.ts

@@ -1,47 +0,0 @@
-import type { ColumnApi, GridApi } from 'ag-grid-community';
-
-export interface SummaryRow {
-  __summaryRow?: boolean;
-}
-
-export function addSummaryRows<T extends SummaryRow>(
-  api: GridApi,
-  columnApi: ColumnApi,
-  getGroupId: (data: T, columnApi: ColumnApi) => string | null | undefined,
-  getGroupSummaryRow: (data: T[], columnApi: ColumnApi) => Partial<T> | null
-) {
-  let currentGroupId: string | null | undefined = undefined;
-  let group: T[] = [];
-  let addIndex = 0;
-  api.forEachNodeAfterFilterAndSort((node) => {
-    const nodeGroupId = getGroupId(node.data, columnApi);
-    if (currentGroupId === undefined) {
-      currentGroupId = nodeGroupId;
-    }
-    if (node.data.__summaryRow) {
-      api.applyTransactionAsync({
-        remove: [node.data],
-      });
-      addIndex -= 1;
-    } else if (currentGroupId !== undefined && currentGroupId !== nodeGroupId) {
-      if (group.length > 1) {
-        api.applyTransactionAsync({
-          add: [getGroupSummaryRow(group, columnApi)],
-          addIndex,
-        });
-        addIndex += 1;
-      }
-      group = [node.data];
-      currentGroupId = nodeGroupId;
-    } else if (currentGroupId) {
-      group.push(node.data);
-    }
-    addIndex += 1;
-  });
-  if (group.length > 1) {
-    api.applyTransactionAsync({
-      add: [getGroupSummaryRow(group, columnApi)],
-      addIndex,
-    });
-  }
-}

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

@@ -1,4 +1,2 @@
-export * from './ag-grid-update';
 export * from './format';
-export * from './grid';
 export * from './validation';

libs/utils/.eslintrc.json

@@ -9,6 +9,8 @@
           "error",
           "@apollo/client",
           "@vegaprotocol/data-provider",
+          "ag-grid-react",
+          "ag-grid-community",
           "graphql",
           "graphql-tag",
           "graphql-ws",

libs/web3/src/lib/use-vega-transaction-toasts.tsx

@@ -48,7 +48,7 @@ import {
 import { useMarketList } from '@vegaprotocol/market-list';
 import type { Side } from '@vegaprotocol/types';
 import { OrderStatusMapping } from '@vegaprotocol/types';
-import { Size } from '@vegaprotocol/react-helpers';
+import { Size } from '@vegaprotocol/datagrid';
 
 const intentMap: { [s in VegaTxStatus]: Intent } = {
   Default: Intent.Primary,

libs/withdraws/src/lib/withdrawals-table.tsx

@@ -7,7 +7,7 @@ import {
   isNumeric,
   truncateByChars,
 } from '@vegaprotocol/utils';
-import { useBottomPlaceholder } from '@vegaprotocol/react-helpers';
+import { useBottomPlaceholder } from '@vegaprotocol/datagrid';
 import { t } from '@vegaprotocol/i18n';
 import { ButtonLink } from '@vegaprotocol/ui-toolkit';
 import type {