fix(trading): lp table forward ref breaking resize grid (#4447)

apps/trading/components/liquidity-container/liquidity-container.tsx

@@ -12,10 +12,9 @@ import {
   NetworkParams,
   useNetworkParams,
 } from '@vegaprotocol/network-parameters';
-import type { AgGridReact } from 'ag-grid-react';
 import type { DataGridSlice } from '../../stores/datagrid-store-slice';
 import { createDataGridSlice } from '../../stores/datagrid-store-slice';
-import { useEffect, useRef } from 'react';
+import { useEffect } from 'react';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 
@@ -26,8 +25,6 @@ export const LiquidityContainer = ({
   marketId: string | undefined;
   filter?: Filter;
 }) => {
-  const gridRef = useRef<AgGridReact | null>(null);
-
   const gridStore = useLiquidityStore((store) => store.gridStore);
   const updateGridStore = useLiquidityStore((store) => store.updateGridStore);
 
@@ -60,7 +57,6 @@ export const LiquidityContainer = ({
   return (
     <div className="h-full relative">
       <LiquidityTable
-        ref={gridRef}
         rowData={data}
         symbol={symbol}
         assetDecimalPlaces={assetDecimalPlaces}

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

@@ -1,4 +1,4 @@
-import { forwardRef, useMemo } from 'react';
+import { useMemo } from 'react';
 import {
   addDecimalsFormatNumber,
   addDecimalsFormatNumberQuantum,
@@ -9,7 +9,6 @@ import { t } from '@vegaprotocol/i18n';
 import type { TypedDataAgGrid } from '@vegaprotocol/datagrid';
 import { AgGridLazy as AgGrid } from '@vegaprotocol/datagrid';
 import { TooltipCellComponent } from '@vegaprotocol/ui-toolkit';
-import type { AgGridReact } from 'ag-grid-react';
 import type {
   ColDef,
   ITooltipParams,
@@ -40,20 +39,20 @@ export interface LiquidityTableProps
   quantum?: string | number;
 }
 
-export const LiquidityTable = forwardRef<AgGridReact, LiquidityTableProps>(
-  (
-    { symbol = '', assetDecimalPlaces, stakeToCcyVolume, quantum, ...props },
-    ref
-  ) => {
+export const LiquidityTable = ({
+  symbol = '',
+  assetDecimalPlaces,
+  stakeToCcyVolume,
+  quantum,
+  ...props
+}: LiquidityTableProps) => {
   const colDefs = useMemo(() => {
     const assetDecimalsFormatter = ({ value }: ITooltipParams) => {
       if (!value) return '-';
       return `${addDecimalsFormatNumber(value, assetDecimalPlaces ?? 0)}`;
     };
 
-      const assetDecimalsQuantumFormatter = ({
-        value,
-      }: ValueFormatterParams) => {
+    const assetDecimalsQuantumFormatter = ({ value }: ValueFormatterParams) => {
       if (!value) return '-';
       return `${addDecimalsFormatNumberQuantum(
         value,
@@ -88,9 +87,7 @@ export const LiquidityTable = forwardRef<AgGridReact, LiquidityTableProps>(
       {
         headerName: t('Party'),
         field: 'party.id',
-          headerTooltip: t(
-            'The public key of the party making this commitment.'
-          ),
+        headerTooltip: t('The public key of the party making this commitment.'),
       },
       {
         headerName: t(`Commitment (${symbol})`),
@@ -189,7 +186,6 @@ export const LiquidityTable = forwardRef<AgGridReact, LiquidityTableProps>(
       style={{ width: '100%', height: '100%' }}
       overlayNoRowsTemplate={t('No liquidity provisions')}
       getRowId={({ data }: { data: LiquidityProvisionData }) => data.id || ''}
-        ref={ref}
       tooltipShowDelay={500}
       defaultColDef={{
         resizable: true,
@@ -201,7 +197,6 @@ export const LiquidityTable = forwardRef<AgGridReact, LiquidityTableProps>(
       columnDefs={colDefs}
     />
   );
-  }
-);
+};
 
 export default LiquidityTable;