feat: add shared data grid slice for grid store logic

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

@@ -10,8 +10,9 @@ import { AccountManager, useTransferDialog } from '@vegaprotocol/accounts';
 import { useDepositDialog } from '@vegaprotocol/deposits';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
-import type { ColumnState } from 'ag-grid-community';
 import { useDataGridEvents } from '@vegaprotocol/datagrid';
+import type { DataGridSlice } from '../../stores/datagrid-store-slice';
+import { createDataGridSlice } from '../../stores/datagrid-store-slice';
 
 export const AccountsContainer = ({
   pinnedAsset,
@@ -30,7 +31,7 @@ export const AccountsContainer = ({
 
   const [gridStore, update] = useAccountStore((store) => [
     store.gridStore,
-    store.update,
+    store.updateGridStore,
   ]);
   const gridStoreCallbacks = useDataGridEvents(gridStore, (colState) => {
     update(colState);
@@ -86,26 +87,10 @@ export const AccountsContainer = ({
   );
 };
 
-type Store = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  filterModel?: { [key: string]: any };
-  columnState?: ColumnState[];
-};
-
-const useAccountStore = create<{
-  gridStore: Store;
-  update: (gridStore: Store) => void;
-}>()(
-  persist((set) => ({
-      gridStore: {},
-      update: (newStore) => {
-        set((curr) => ({
-          gridStore: {
-            ...curr.gridStore,
-            ...newStore,
-          },
-        }));
-      },
+const useAccountStore = create<DataGridSlice>()(
+  persist(
+    (...args) => ({
+      ...createDataGridSlice(...args),
     }),
     {
       name: 'vega_accounts_store',

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

@@ -4,8 +4,9 @@ import { useVegaWallet } from '@vegaprotocol/wallet';
 import { FillsManager } from '@vegaprotocol/fills';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
-import type { ColumnState } from 'ag-grid-community';
 import { useDataGridEvents } from '@vegaprotocol/datagrid';
+import type { DataGridSlice } from '../../stores/datagrid-store-slice';
+import { createDataGridSlice } from '../../stores/datagrid-store-slice';
 
 export const FillsContainer = ({
   marketId,
@@ -18,7 +19,7 @@ export const FillsContainer = ({
 
   const [gridStore, update] = useFillsStore((store) => [
     store.gridStore,
-    store.update,
+    store.updateGridStore,
   ]);
 
   const gridStoreCallbacks = useDataGridEvents(gridStore, (colState) => {
@@ -43,26 +44,10 @@ export const FillsContainer = ({
   );
 };
 
-type Store = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  filterModel?: { [key: string]: any };
-  columnState?: ColumnState[];
-};
-
-const useFillsStore = create<{
-  gridStore: Store;
-  update: (gridStore: Store) => void;
-}>()(
-  persist((set) => ({
-      gridStore: {},
-      update: (newStore) => {
-        set((curr) => ({
-          gridStore: {
-            ...curr.gridStore,
-            ...newStore,
-          },
-        }));
-      },
+const useFillsStore = create<DataGridSlice>()(
+  persist(
+    (...args) => ({
+      ...createDataGridSlice(...args),
     }),
     {
       name: 'vega_fills_store',

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

@@ -3,7 +3,8 @@ import { t } from '@vegaprotocol/i18n';
 import { LedgerManager } from '@vegaprotocol/ledger';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import type { ColumnState } from 'ag-grid-community';
+import type { DataGridSlice } from '../../stores/datagrid-store-slice';
+import { createDataGridSlice } from '../../stores/datagrid-store-slice';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 
@@ -12,7 +13,7 @@ export const LedgerContainer = () => {
 
   const [gridStore, update] = useLedgerStore((store) => [
     store.gridStore,
-    store.update,
+    store.updateGridStore,
   ]);
 
   const gridStoreCallbacks = useDataGridEvents(gridStore, (colState) => {
@@ -30,27 +31,10 @@ export const LedgerContainer = () => {
   return <LedgerManager partyId={pubKey} gridProps={gridStoreCallbacks} />;
 };
 
-type Store = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  filterModel?: { [key: string]: any };
-  columnState?: ColumnState[];
-};
-
-const useLedgerStore = create<{
-  gridStore: Store;
-  update: (gridStore: Store) => void;
-}>()(
+const useLedgerStore = create<DataGridSlice>()(
   persist(
-    (set) => ({
-      gridStore: {},
-      update: (newStore) => {
-        set((curr) => ({
-          gridStore: {
-            ...curr.gridStore,
-            ...newStore,
-          },
-        }));
-      },
+    (...args) => ({
+      ...createDataGridSlice(...args),
     }),
     {
       name: 'vega_ledger_store',

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

@@ -12,8 +12,9 @@ import {
   NetworkParams,
   useNetworkParams,
 } from '@vegaprotocol/network-parameters';
-import type { ColumnState } from 'ag-grid-community';
 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 { create } from 'zustand';
 import { persist } from 'zustand/middleware';
@@ -29,7 +30,7 @@ export const LiquidityContainer = ({
 
   const [gridStore, update] = useLiquidityStore((store) => [
     store.gridStore,
-    store.update,
+    store.updateGridStore,
   ]);
 
   const gridStoreCallbacks = useDataGridEvents(gridStore, (colState) => {
@@ -48,7 +49,8 @@ export const LiquidityContainer = ({
 
   const assetDecimalPlaces =
     market?.tradableInstrument.instrument.product.settlementAsset.decimals || 0;
-  const quantum = market?.tradableInstrument.instrument.product.settlementAsset.quantum || 0;
+  const quantum =
+    market?.tradableInstrument.instrument.product.settlementAsset.quantum || 0;
   const symbol =
     market?.tradableInstrument.instrument.product.settlementAsset.symbol;
 
@@ -86,27 +88,10 @@ const useReloadLiquidityData = (marketId: string | undefined) => {
   }, [reload]);
 };
 
-type Store = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  filterModel?: { [key: string]: any };
-  columnState?: ColumnState[];
-};
-
-const useLiquidityStore = create<{
-  gridStore: Store;
-  update: (gridStore: Store) => void;
-}>()(
+const useLiquidityStore = create<DataGridSlice>()(
   persist(
-    (set) => ({
-      gridStore: {},
-      update: (newStore) => {
-        set((curr) => ({
-          gridStore: {
-            ...curr.gridStore,
-            ...newStore,
-          },
-        }));
-      },
+    (...args) => ({
+      ...createDataGridSlice(...args),
     }),
     {
       name: 'vega_ledger_store',

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

@@ -3,7 +3,8 @@ import { t } from '@vegaprotocol/i18n';
 import { PositionsManager } from '@vegaprotocol/positions';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import type { ColumnState } from 'ag-grid-community';
+import type { DataGridSlice } from '../../stores/datagrid-store-slice';
+import { createDataGridSlice } from '../../stores/datagrid-store-slice';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 
@@ -18,7 +19,7 @@ export const PositionsContainer = ({
 
   const [gridStore, update] = usePositionsStore((store) => [
     store.gridStore,
-    store.update,
+    store.updateGridStore,
   ]);
   const gridStoreCallbacks = useDataGridEvents(gridStore, (colState) => {
     update(colState);
@@ -51,27 +52,10 @@ export const PositionsContainer = ({
   );
 };
 
-type Store = {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  filterModel?: { [key: string]: any };
-  columnState?: ColumnState[];
-};
-
-const usePositionsStore = create<{
-  gridStore: Store;
-  update: (gridStore: Store) => void;
-}>()(
+const usePositionsStore = create<DataGridSlice>()(
   persist(
-    (set) => ({
-      gridStore: {},
-      update: (newStore) => {
-        set((curr) => ({
-          gridStore: {
-            ...curr.gridStore,
-            ...newStore,
-          },
-        }));
-      },
+    (...args) => ({
+      ...createDataGridSlice(...args),
     }),
     {
       name: 'vega_positions_store',

apps/trading/stores/datagrid-store-slice.ts

@@ -0,0 +1,25 @@
+import type { ColumnState } from 'ag-grid-community';
+import type { StateCreator } from 'zustand';
+
+export type DataGridStore = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  filterModel?: { [key: string]: any };
+  columnState?: ColumnState[];
+};
+
+export type DataGridSlice = {
+  gridStore: DataGridStore;
+  updateGridStore: (gridStore: DataGridStore) => void;
+};
+
+export const createDataGridSlice: StateCreator<DataGridSlice> = (set) => ({
+  gridStore: {},
+  updateGridStore: (newStore) => {
+    set((curr) => ({
+      gridStore: {
+        ...curr.gridStore,
+        ...newStore,
+      },
+    }));
+  },
+});