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

2023-08-04 11:08:28 +01:00 · 2023-08-04 11:08:28 +01:00 · 1041864ad8
commit 1041864ad8
parent 015e0188ec
17 changed files with 1082 additions and 1181 deletions
--- a/apps/trading/client-pages/portfolio/deposits-container.tsx
+++ b/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 && (
--- a/libs/accounts/src/lib/accounts-manager.tsx
+++ b/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}
--- a/libs/accounts/src/lib/accounts-table.tsx
+++ b/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
-    },
-    ref
-  ) => {
+}: AccountTableProps) => {
  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}
    />
  );
-  }
-);
+};
--- a/libs/datagrid/src/index.ts
+++ b/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';
--- a/libs/datagrid/src/lib/ag-grid-update.ts
+++ b/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;
-};
--- a/libs/deposits/src/lib/deposits-table.tsx
+++ b/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<
-  AgGridReact,
-  TypedDataAgGrid<DepositFieldsFragment>
->((props, ref) => {
+export const DepositsTable = (
+  props: TypedDataAgGrid<DepositFieldsFragment>
+) => {
  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}
    />
  );
-});
+};
--- a/libs/ledger/src/lib/ledger-manager.tsx
+++ b/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, useRef, useState, useMemo } from 'react';
+import { useCallback, 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}
--- a/libs/ledger/src/lib/ledger-table.tsx
+++ b/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>(
-  (props, ref) => {
+export const LedgerTable = (props: LedgerEntryProps) => {
  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}
    />
  );
-  }
-);
+};
--- a/libs/markets/src/lib/components/markets-container/market-list-table.tsx
+++ b/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,
 };
-
-export const MarketListTable = forwardRef<
-  AgGridReact,
-  TypedDataAgGrid<MarketMaybeWithData> & {
+type Props = 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;
--- a/libs/markets/src/lib/components/markets-container/markets-container.tsx
+++ b/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 type { AgGridReact } from 'ag-grid-react';
+import React, { useEffect } from '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;
--- a/libs/orders/src/lib/components/stop-orders-manager/stop-orders-manager.spec.tsx
+++ b/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
-// avoid warnings about padding refs
-stopOrdersTableMock.StopOrdersTable = forwardRef(() => (
-  <div>StopOrdersTable</div>
-));
+jest.mock('../stop-orders-table/stop-orders-table', () => ({
+  StopOrdersTable: () => <div>StopOrdersTable</div>,
+}));

 const generateJsx = () => {
  const pubKey = '0x123';
--- a/libs/orders/src/lib/components/stop-orders-table/stop-orders-table.tsx
+++ b/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> }
->(
-  forwardRef<AgGridReact, StopOrdersTableProps>(
-    ({ onCancel, onMarketClick, ...props }, ref) => {
+>(({ onCancel, onMarketClick, ...props }: StopOrdersTableProps) => {
  const showAllActions = !props.isReadOnly;
  const columnDefs: ColDef[] = useMemo(
    () => [
@ -70,10 +68,7 @@ export const StopOrdersTable = memo<
              data.market.decimalPlaces
            )}`;
          }
-              if (
-                data &&
-                value?.__typename === 'StopOrderTrailingPercentOffset'
-              ) {
+          if (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}`}>
-                {valueFormatted}
-              </span>
+          <span data-testid={`order-status-${data?.id}`}>{valueFormatted}</span>
        ),
        minWidth: 100,
      },
@ -222,10 +215,7 @@ export const StopOrdersTable = memo<
        },
        valueFormatter: ({
          value,
-            }: VegaValueFormatterParams<
-              StopOrder,
-              'submission.timeInForce'
-            >) => {
+        }: VegaValueFormatterParams<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}
    />
  );
-    }
-  )
-);
+});
--- a/libs/positions/src/lib/positions-table.tsx
+++ b/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
-    },
-    ref
-  ) => {
+}: Props) => {
  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(
-                      data.notional,
-                      data.marketDecimalPlaces
-                    ).toNumber();
+                : toBigNum(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(
-                      data.markPrice,
-                      data.marketDecimalPlaces
-                    ).toNumber();
+                : toBigNum(data.markPrice, data.marketDecimalPlaces).toNumber();
            },
            valueFormatter: ({
              data,
@ -318,9 +306,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
                valueFormatter: ({
                  value,
                }: VegaValueFormatterParams<Position, 'currentLeverage'>) =>
-                    value === undefined
-                      ? ''
-                      : formatNumber(value.toString(), 1),
+                  value === undefined ? '' : formatNumber(value.toString(), 1),
                minWidth: 100,
              },
          multipleKeys
@ -422,9 +408,7 @@ export const PositionsTable = forwardRef<AgGridReact, Props>(
          onClose && !isReadOnly
            ? {
                ...COL_DEFS.actions,
-                  cellRenderer: ({
-                    data,
-                  }: VegaICellRendererParams<Position>) => {
+                cellRenderer: ({ 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;

--- a/libs/proposals/src/components/proposals-list/proposals-list.tsx
+++ b/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}
--- a/libs/trades/src/lib/trades-container.tsx
+++ b/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) {
--- a/libs/trades/src/lib/trades-table.tsx
+++ b/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>(
-  ({ onClick, ...props }, ref) => {
+export const TradesTable = ({ onClick, ...props }: Props) => {
  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}
    />
  );
-  }
-);
+};
--- a/libs/withdraws/src/lib/withdrawals-table.tsx
+++ b/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}
    />
  );