diff --git a/apps/trading/components/accounts-container/accounts-container.tsx b/apps/trading/components/accounts-container/accounts-container.tsx index df1e1dc6c..e9dc391a1 100644 --- a/apps/trading/components/accounts-container/accounts-container.tsx +++ b/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()( + persist( + (...args) => ({ + ...createDataGridSlice(...args), }), { name: 'vega_accounts_store', diff --git a/apps/trading/components/fills-container/fills-container.tsx b/apps/trading/components/fills-container/fills-container.tsx index 3b625c6d0..7909d6e0c 100644 --- a/apps/trading/components/fills-container/fills-container.tsx +++ b/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()( + persist( + (...args) => ({ + ...createDataGridSlice(...args), }), { name: 'vega_fills_store', diff --git a/apps/trading/components/ledger-container/ledger-container.tsx b/apps/trading/components/ledger-container/ledger-container.tsx index 3c1e0adcf..cf68991f0 100644 --- a/apps/trading/components/ledger-container/ledger-container.tsx +++ b/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 ; }; -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()( persist( - (set) => ({ - gridStore: {}, - update: (newStore) => { - set((curr) => ({ - gridStore: { - ...curr.gridStore, - ...newStore, - }, - })); - }, + (...args) => ({ + ...createDataGridSlice(...args), }), { name: 'vega_ledger_store', diff --git a/apps/trading/components/liquidity-container/liquidity-container.tsx b/apps/trading/components/liquidity-container/liquidity-container.tsx index f3169150d..0f29b0809 100644 --- a/apps/trading/components/liquidity-container/liquidity-container.tsx +++ b/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()( persist( - (set) => ({ - gridStore: {}, - update: (newStore) => { - set((curr) => ({ - gridStore: { - ...curr.gridStore, - ...newStore, - }, - })); - }, + (...args) => ({ + ...createDataGridSlice(...args), }), { name: 'vega_ledger_store', diff --git a/apps/trading/components/positions-container/positions-container.tsx b/apps/trading/components/positions-container/positions-container.tsx index e3671da5c..2ffb5eb0d 100644 --- a/apps/trading/components/positions-container/positions-container.tsx +++ b/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()( persist( - (set) => ({ - gridStore: {}, - update: (newStore) => { - set((curr) => ({ - gridStore: { - ...curr.gridStore, - ...newStore, - }, - })); - }, + (...args) => ({ + ...createDataGridSlice(...args), }), { name: 'vega_positions_store', diff --git a/apps/trading/stores/datagrid-store-slice.ts b/apps/trading/stores/datagrid-store-slice.ts new file mode 100644 index 000000000..3886371a8 --- /dev/null +++ b/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 = (set) => ({ + gridStore: {}, + updateGridStore: (newStore) => { + set((curr) => ({ + gridStore: { + ...curr.gridStore, + ...newStore, + }, + })); + }, +});