chore(trading): remove unnecessary forwarding of grid refs (#4486)

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

@@ -4,12 +4,9 @@ import { depositsProvider } from '@vegaprotocol/deposits';
 import { t } from '@vegaprotocol/i18n';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import { useRef } from 'react';
-import type { AgGridReact } from 'ag-grid-react';
 import { useSidebar, ViewType } from '../../components/sidebar';
 
 export const DepositsContainer = () => {
-  const gridRef = useRef<AgGridReact | null>(null);
   const { pubKey, isReadOnly } = useVegaWallet();
   const { data, error } = useDataProvider({
     dataProvider: depositsProvider,
@@ -24,7 +21,6 @@ export const DepositsContainer = () => {
     <div className="h-full">
       <DepositsTable
         rowData={data}
-        ref={gridRef}
         overlayNoRowsTemplate={error ? error.message : t('No deposits')}
       />
       {!isReadOnly && (

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

@@ -118,7 +118,6 @@ export const AccountManager = ({
   onMarketClick,
   gridProps,
 }: AccountManagerProps) => {
-  const gridRef = useRef<AgGridReact | null>(null);
   const [breakdownAssetId, setBreakdownAssetId] = useState<string>();
   const { data, error } = useDataProvider({
     dataProvider: aggregatedAccountsDataProvider,
@@ -138,7 +137,6 @@ export const AccountManager = ({
   return (
     <div className="relative h-full">
       <AccountTable
-        ref={gridRef}
         rowData={data}
         onClickAsset={onClickAsset}
         onClickDeposit={onClickDeposit}

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

@@ -1,4 +1,4 @@
-import { forwardRef, useMemo, useCallback } from 'react';
+import { useMemo, useCallback } from 'react';
 import {
   addDecimalsFormatNumber,
   addDecimalsFormatNumberQuantum,
@@ -21,7 +21,7 @@ import type {
   RowHeightParams,
   ColDef,
 } from 'ag-grid-community';
-import type { AgGridReact, AgGridReactProps } from 'ag-grid-react';
+import type { AgGridReactProps } from 'ag-grid-react';
 import type { AccountFields } from './accounts-data-provider';
 import type { Asset } from '@vegaprotocol/types';
 import { CenteredGridCellWrapper } from '@vegaprotocol/datagrid';
@@ -75,9 +75,7 @@ export interface AccountTableProps extends AgGridReactProps {
   pinnedAsset?: PinnedAsset;
 }
 
-export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
+export const AccountTable = ({
-  (
-    {
   onClickAsset,
   onClickWithdraw,
   onClickDeposit,
@@ -87,9 +85,7 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
   isReadOnly,
   pinnedAsset,
   ...props
-    },
+}: AccountTableProps) => {
-    ref
-  ) => {
   const pinnedRow = useMemo(() => {
     if (!pinnedAsset) {
       return;
@@ -312,7 +308,6 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
       {...props}
       style={{ width: '100%', height: '100%' }}
       getRowId={({ data }: { data: AccountFields }) => data.asset.id}
-        ref={ref}
       tooltipShowDelay={500}
       rowData={data}
       defaultColDef={{
@@ -326,5 +321,4 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
       pinnedTopRowData={pinnedRow ? [pinnedRow] : undefined}
     />
   );
-  }
+};
-);

libs/datagrid/src/index.ts

@@ -21,5 +21,4 @@ export * from './lib/type-helpers';
 
 export * from './lib/cells/grid-progress-bar';
 
-export * from './lib/ag-grid-update';
 export * from './lib/use-datagrid-events';

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

@@ -1,20 +0,0 @@
-import type { MutableRefObject, RefObject } from 'react';
-import type { AgGridReact } from 'ag-grid-react';
-
-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));
-
-export const updateGridData = (
-  dataRef: MutableRefObject<AnyArray>,
-  data: AnyArray,
-  gridRef: RefObject<AgGridReact>
-) => {
-  const rerender = isXOrWasEmpty(dataRef.current, data);
-  dataRef.current = data;
-  if (gridRef.current?.api?.getModel().getType() === 'infinite') {
-    gridRef.current?.api?.refreshInfiniteCache();
-  }
-  return !rerender;
-};

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

@@ -1,4 +1,4 @@
-import { forwardRef, useMemo } from 'react';
+import { useMemo } from 'react';
 import {
   addDecimalsFormatNumber,
   getDateTimeFormat,
@@ -6,7 +6,6 @@ import {
   isNumeric,
 } from '@vegaprotocol/utils';
 import type { ColDef } from 'ag-grid-community';
-import type { AgGridReact } from 'ag-grid-react';
 import { AgGridLazy as AgGrid } from '@vegaprotocol/datagrid';
 import type {
   VegaICellRendererParams,
@@ -17,10 +16,9 @@ import type { DepositFieldsFragment } from './__generated__/Deposit';
 import { EtherscanLink } from '@vegaprotocol/environment';
 import { DepositStatusMapping } from '@vegaprotocol/types';
 
-export const DepositsTable = forwardRef<
+export const DepositsTable = (
-  AgGridReact,
+  props: TypedDataAgGrid<DepositFieldsFragment>
-  TypedDataAgGrid<DepositFieldsFragment>
+) => {
->((props, ref) => {
   const columnDefs = useMemo<ColDef[]>(
     () => [
       { headerName: 'Asset', field: 'asset.symbol' },
@@ -79,11 +77,10 @@ export const DepositsTable = forwardRef<
   );
   return (
     <AgGrid
-      ref={ref}
       defaultColDef={{ flex: 1 }}
       columnDefs={columnDefs}
       style={{ width: '100%', height: '100%' }}
       {...props}
     />
   );
-});
+};

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

@@ -1,8 +1,7 @@
 import { t } from '@vegaprotocol/i18n';
 import type * as Schema from '@vegaprotocol/types';
 import type { FilterChangedEvent } from 'ag-grid-community';
-import type { AgGridReact } from 'ag-grid-react';
+import { useCallback, useState, useMemo } from 'react';
-import { useCallback, useRef, useState, useMemo } from 'react';
 import { subDays, formatRFC3339 } from 'date-fns';
 import { ledgerEntriesProvider } from './ledger-entries-data-provider';
 import type { LedgerEntriesQueryVariables } from './__generated__/LedgerEntries';
@@ -32,7 +31,6 @@ export const LedgerManager = ({
   partyId: string;
   gridProps: ReturnType<typeof useDataGridEvents>;
 }) => {
-  const gridRef = useRef<AgGridReact | null>(null);
   const [filter, setFilter] = useState<Filter>(defaultFilter);
 
   const variables = useMemo<LedgerEntriesQueryVariables>(
@@ -64,7 +62,6 @@ export const LedgerManager = ({
   return (
     <div className="h-full relative">
       <LedgerTable
-        ref={gridRef}
         rowData={data}
         overlayNoRowsTemplate={error ? error.message : t('No entries')}
         {...gridProps}

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

@@ -14,7 +14,6 @@ import {
   DateRangeFilter,
   SetFilter,
 } from '@vegaprotocol/datagrid';
-import type { AgGridReact } from 'ag-grid-react';
 import type * as Types from '@vegaprotocol/types';
 import type { ColDef } from 'ag-grid-community';
 import {
@@ -23,7 +22,7 @@ import {
   TransferTypeMapping,
 } from '@vegaprotocol/types';
 import type { LedgerEntry } from './ledger-entries-data-provider';
-import { forwardRef, useMemo } from 'react';
+import { useMemo } from 'react';
 import { formatRFC3339, subDays } from 'date-fns';
 
 export const TransferTooltipCellComponent = ({
@@ -45,8 +44,7 @@ const dateRangeFilterParams = {
 };
 type LedgerEntryProps = TypedDataAgGrid<LedgerEntry>;
 
-export const LedgerTable = forwardRef<AgGridReact, LedgerEntryProps>(
+export const LedgerTable = (props: LedgerEntryProps) => {
-  (props, ref) => {
   const columnDefs = useMemo<ColDef[]>(
     () => [
       {
@@ -187,7 +185,6 @@ export const LedgerTable = forwardRef<AgGridReact, LedgerEntryProps>(
   return (
     <AgGrid
       style={{ width: '100%', height: '100%' }}
-        ref={ref}
       tooltipShowDelay={500}
       defaultColDef={{
         resizable: true,
@@ -202,5 +199,4 @@ export const LedgerTable = forwardRef<AgGridReact, LedgerEntryProps>(
       {...props}
     />
   );
-  }
+};
-);

libs/markets/src/lib/components/markets-container/market-list-table.tsx

@@ -1,11 +1,9 @@
-import React, { forwardRef } from 'react';
 import type { TypedDataAgGrid } from '@vegaprotocol/datagrid';
 import {
   AgGridLazy as AgGrid,
   PriceFlashCell,
   MarketNameCell,
 } from '@vegaprotocol/datagrid';
-import type { AgGridReact } from 'ag-grid-react';
 import type { MarketMaybeWithData } from '../../markets-provider';
 import { OracleStatus } from './oracle-status';
 import { useColumnDefs } from './use-column-defs';
@@ -43,14 +41,15 @@ const defaultColDef = {
   filterParams: { buttons: ['reset'] },
   minWidth: 100,
 };
-
+type Props = TypedDataAgGrid<MarketMaybeWithData> & {
-export const MarketListTable = forwardRef<
-  AgGridReact,
-  TypedDataAgGrid<MarketMaybeWithData> & {
   onMarketClick: (marketId: string, metaKey?: boolean) => void;
   SuccessorMarketRenderer?: React.FC<{ value: string }>;
-  }
+};
->(({ onMarketClick, SuccessorMarketRenderer, ...props }, ref) => {
+export const MarketListTable = ({
+  onMarketClick,
+  SuccessorMarketRenderer,
+  ...props
+}: Props) => {
   const columnDefs = useColumnDefs({ onMarketClick });
   const components = {
     PriceFlashCell,
@@ -61,7 +60,6 @@ export const MarketListTable = forwardRef<
     <AgGrid
       style={{ width: '100%', height: '100%' }}
       getRowId={getRowId}
-      ref={ref}
       defaultColDef={defaultColDef}
       columnDefs={columnDefs}
       suppressCellFocus
@@ -69,6 +67,6 @@ export const MarketListTable = forwardRef<
       {...props}
     />
   );
-});
+};
 
 export default MarketListTable;

libs/markets/src/lib/components/markets-container/markets-container.tsx

@@ -1,6 +1,5 @@
 import type { MouseEvent } from 'react';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect } from 'react';
-import type { AgGridReact } from 'ag-grid-react';
 import type { CellClickedEvent } from 'ag-grid-community';
 import { t } from '@vegaprotocol/i18n';
 import { MarketListTable } from './market-list-table';
@@ -18,8 +17,6 @@ export const MarketsContainer = ({
   onSelect,
   SuccessorMarketRenderer,
 }: MarketsContainerProps) => {
-  const gridRef = useRef<AgGridReact | null>(null);
-
   const { data, error, reload } = useDataProvider({
     dataProvider,
     variables: undefined,
@@ -37,7 +34,6 @@ export const MarketsContainer = ({
   return (
     <div className="h-full relative">
       <MarketListTable
-        ref={gridRef}
         rowData={data}
         onCellClicked={(cellEvent: CellClickedEvent) => {
           const { data, column, event } = cellEvent;

libs/orders/src/lib/components/stop-orders-manager/stop-orders-manager.spec.tsx

@@ -2,17 +2,13 @@ import { render, screen, act } from '@testing-library/react';
 import { StopOrdersManager } from './stop-orders-manager';
 import * as useDataProviderHook from '@vegaprotocol/data-provider';
 import type { StopOrder } from '../order-data-provider/stop-orders-data-provider';
-import * as stopOrdersTableMock from '../stop-orders-table/stop-orders-table';
-import { forwardRef } from 'react';
 import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
 import { VegaWalletContext } from '@vegaprotocol/wallet';
 import { MockedProvider } from '@apollo/client/testing';
 
-// @ts-ignore StopOrdersTable is read only but we need to override with the forwardRef to
+jest.mock('../stop-orders-table/stop-orders-table', () => ({
-// avoid warnings about padding refs
+  StopOrdersTable: () => <div>StopOrdersTable</div>,
-stopOrdersTableMock.StopOrdersTable = forwardRef(() => (
+}));
-  <div>StopOrdersTable</div>
-));
 
 const generateJsx = () => {
   const pubKey = '0x123';

libs/orders/src/lib/components/stop-orders-table/stop-orders-table.tsx

@@ -8,7 +8,7 @@ import { t } from '@vegaprotocol/i18n';
 import * as Schema from '@vegaprotocol/types';
 import { ButtonLink } from '@vegaprotocol/ui-toolkit';
 import type { ForwardedRef } from 'react';
-import { memo, forwardRef, useMemo } from 'react';
+import { memo, useMemo } from 'react';
 import {
   AgGridLazy as AgGrid,
   SetFilter,
@@ -36,9 +36,7 @@ export type StopOrdersTableProps = TypedDataAgGrid<StopOrder> & {
 
 export const StopOrdersTable = memo<
   StopOrdersTableProps & { ref?: ForwardedRef<AgGridReact> }
->(
+>(({ onCancel, onMarketClick, ...props }: StopOrdersTableProps) => {
-  forwardRef<AgGridReact, StopOrdersTableProps>(
-    ({ onCancel, onMarketClick, ...props }, ref) => {
   const showAllActions = !props.isReadOnly;
   const columnDefs: ColDef[] = useMemo(
     () => [
@@ -70,10 +68,7 @@ export const StopOrdersTable = memo<
               data.market.decimalPlaces
             )}`;
           }
-              if (
+          if (data && value?.__typename === 'StopOrderTrailingPercentOffset') {
-                data &&
-                value?.__typename === 'StopOrderTrailingPercentOffset'
-              ) {
             return `${t('Mark')} ${
               data?.triggerDirection ===
               Schema.StopOrderTriggerDirection.TRIGGER_DIRECTION_FALLS_BELOW
@@ -186,9 +181,7 @@ export const StopOrdersTable = memo<
           valueFormatted: string;
           data: StopOrder;
         }) => (
-              <span data-testid={`order-status-${data?.id}`}>
+          <span data-testid={`order-status-${data?.id}`}>{valueFormatted}</span>
-                {valueFormatted}
-              </span>
         ),
         minWidth: 100,
       },
@@ -222,10 +215,7 @@ export const StopOrdersTable = memo<
         },
         valueFormatter: ({
           value,
-            }: VegaValueFormatterParams<
+        }: VegaValueFormatterParams<StopOrder, 'submission.timeInForce'>) => {
-              StopOrder,
-              'submission.timeInForce'
-            >) => {
           return value ? Schema.OrderTimeInForceCode[value] : '';
         },
         minWidth: 150,
@@ -279,7 +269,6 @@ export const StopOrdersTable = memo<
 
   return (
     <AgGrid
-          ref={ref}
       defaultColDef={{
         resizable: true,
         sortable: true,
@@ -295,6 +284,4 @@ export const StopOrdersTable = memo<
       {...props}
     />
   );
-    }
+});
-  )
-);

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

@@ -1,5 +1,5 @@
 import classNames from 'classnames';
-import { forwardRef, useMemo } from 'react';
+import { useMemo } from 'react';
 import type { CSSProperties, ReactNode } from 'react';
 import type { ColDef } from 'ag-grid-community';
 import type {
@@ -33,7 +33,6 @@ import {
   addDecimalsFormatNumber,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import type { AgGridReact } from 'ag-grid-react';
 import type { Position } from './positions-data-providers';
 import * as Schema from '@vegaprotocol/types';
 import { PositionStatus, PositionStatusMapping } from '@vegaprotocol/types';
@@ -87,9 +86,7 @@ AmountCell.displayName = 'AmountCell';
 export const getRowId = ({ data }: { data: Position }) =>
   `${data.partyId}-${data.marketId}`;
 
-export const PositionsTable = forwardRef<AgGridReact, Props>(
+export const PositionsTable = ({
-  (
-    {
   onClose,
   onMarketClick,
   multipleKeys,
@@ -97,16 +94,13 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
   pubKeys,
   pubKey,
   ...props
-    },
+}: Props) => {
-    ref
-  ) => {
   const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
   return (
     <AgGrid
       style={{ width: '100%', height: '100%' }}
       overlayNoRowsTemplate={t('No positions')}
       getRowId={getRowId}
-        ref={ref}
       tooltipShowDelay={500}
       defaultColDef={{
         resizable: true,
@@ -154,10 +148,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
             valueGetter: ({ data }: VegaValueGetterParams<Position>) => {
               return !data?.notional
                 ? undefined
-                  : toBigNum(
+                : toBigNum(data.notional, data.marketDecimalPlaces).toNumber();
-                      data.notional,
-                      data.marketDecimalPlaces
-                    ).toNumber();
             },
             valueFormatter: ({
               data,
@@ -213,10 +204,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
                 data.marketTradingMode ===
                   Schema.MarketTradingMode.TRADING_MODE_OPENING_AUCTION
                 ? undefined
-                  : toBigNum(
+                : toBigNum(data.markPrice, data.marketDecimalPlaces).toNumber();
-                      data.markPrice,
-                      data.marketDecimalPlaces
-                    ).toNumber();
             },
             valueFormatter: ({
               data,
@@ -318,9 +306,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
                 valueFormatter: ({
                   value,
                 }: VegaValueFormatterParams<Position, 'currentLeverage'>) =>
-                    value === undefined
+                  value === undefined ? '' : formatNumber(value.toString(), 1),
-                      ? ''
-                      : formatNumber(value.toString(), 1),
                 minWidth: 100,
               },
           multipleKeys
@@ -422,9 +408,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
           onClose && !isReadOnly
             ? {
                 ...COL_DEFS.actions,
-                  cellRenderer: ({
+                cellRenderer: ({ data }: VegaICellRendererParams<Position>) => {
-                    data,
-                  }: VegaICellRendererParams<Position>) => {
                   return (
                     <div className="flex gap-2 items-center justify-end">
                       {data?.openVolume &&
@@ -462,8 +446,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
       ])}
     />
   );
-  }
+};
-);
 
 export default PositionsTable;
 

libs/proposals/src/components/proposals-list/proposals-list.tsx

@@ -1,9 +1,7 @@
 import React from 'react';
-import { useRef } from 'react';
 import { AgGridLazy as AgGrid } from '@vegaprotocol/datagrid';
 import { t } from '@vegaprotocol/i18n';
 import * as Types from '@vegaprotocol/types';
-import type { AgGridReact } from 'ag-grid-react';
 import { useColumnDefs } from './use-column-defs';
 import type { ProposalListFieldsFragment } from '../../lib/proposals-data-provider/__generated__/Proposals';
 import { useProposalsListQuery } from '../../lib/proposals-data-provider/__generated__/Proposals';
@@ -25,7 +23,6 @@ interface ProposalListProps {
 export const ProposalsList = ({
   SuccessorMarketRenderer,
 }: ProposalListProps) => {
-  const gridRef = useRef<AgGridReact | null>(null);
   const { data } = useProposalsListQuery({
     variables: {
       proposalType: Types.ProposalType.TYPE_NEW_MARKET,
@@ -40,7 +37,6 @@ export const ProposalsList = ({
   return (
     <div className="relative h-full">
       <AgGrid
-        ref={gridRef}
         className="w-full h-full"
         columnDefs={columnDefs}
         rowData={filteredData}

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

@@ -1,6 +1,4 @@
 import { useDataProvider } from '@vegaprotocol/data-provider';
-import type { AgGridReact } from 'ag-grid-react';
-import { useRef } from 'react';
 import { tradesWithMarketProvider } from './trades-data-provider';
 import { TradesTable } from './trades-table';
 import { useCreateOrderStore } from '@vegaprotocol/orders';
@@ -11,7 +9,6 @@ interface TradesContainerProps {
 }
 
 export const TradesContainer = ({ marketId }: TradesContainerProps) => {
-  const gridRef = useRef<AgGridReact | null>(null);
   const useOrderStoreRef = useCreateOrderStore();
   const updateOrder = useOrderStoreRef((store) => store.update);
 
@@ -22,7 +19,6 @@ export const TradesContainer = ({ marketId }: TradesContainerProps) => {
 
   return (
     <TradesTable
-      ref={gridRef}
       rowData={data}
       onClick={(price?: string) => {
         if (price) {

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

@@ -1,7 +1,5 @@
-import type { AgGridReact } from 'ag-grid-react';
 import { useMemo } from 'react';
 import type { ColDef } from 'ag-grid-community';
-import { forwardRef } from 'react';
 import type {
   VegaICellRendererParams,
   VegaValueFormatterParams,
@@ -48,8 +46,7 @@ interface Props extends AgGridReactProps {
   onClick?: (price?: string) => void;
 }
 
-export const TradesTable = forwardRef<AgGridReact, Props>(
+export const TradesTable = ({ onClick, ...props }: Props) => {
-  ({ onClick, ...props }, ref) => {
   const columnDefs = useMemo<ColDef[]>(
     () => [
       {
@@ -125,7 +122,6 @@ export const TradesTable = forwardRef<AgGridReact, Props>(
     <AgGrid
       style={{ width: '100%', height: '100%' }}
       getRowId={({ data }) => data.id}
-        ref={ref}
       defaultColDef={{
         flex: 1,
       }}
@@ -133,5 +129,4 @@ export const TradesTable = forwardRef<AgGridReact, Props>(
       {...props}
     />
   );
-  }
+};
-);

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

@@ -1,5 +1,4 @@
 import { useEffect, useRef, useState, useMemo } from 'react';
-import type { AgGridReact } from 'ag-grid-react';
 import type { ColDef } from 'ag-grid-community';
 import {
   addDecimalsFormatNumber,
@@ -40,7 +39,6 @@ export const WithdrawalsTable = ({
   ready?: TimestampedWithdrawals;
   delayed?: TimestampedWithdrawals;
 }) => {
-  const gridRef = useRef<AgGridReact | null>(null);
   const createWithdrawApproval = useEthWithdrawApprovalsStore(
     (store) => store.create
   );
@@ -146,7 +144,6 @@ export const WithdrawalsTable = ({
         CompleteCell,
       }}
       suppressCellFocus
-      ref={gridRef}
       {...props}
     />
   );