Merge branch 'develop' into 5394-pane-settings-view

fix(trading): use correct interpolation prefix in market info label (#5537 )
chore: minor style changes
2023-12-28 09:42:29 +00:00 · 2023-12-27 18:47:19 +00:00 · 2023-12-27 18:33:54 +00:00 · 2023-12-27 14:07:27 +01:00 · 2023-12-27 08:17:20 +00:00 · 2023-12-22 18:05:31 +00:00
76 changed files with 587 additions and 312 deletions
@@ -24,7 +24,7 @@ export const AssetsTable = ({ data }: AssetsTableProps) => {
  const navigate = useNavigate();
  const ref = useRef<AgGridReact>(null);
  const showColumnsOnDesktop = () => {
-    ref.current?.columnApi.setColumnsVisible(
+    ref.current?.api.setColumnsVisible(
      ['id', 'type', 'status'],
      window.innerWidth > BREAKPOINT_MD
    );
@@ -29,7 +29,7 @@ export const MarketsTable = ({ data }: MarketsTableProps) => {
  const gridRef = useRef<AgGridReact>(null);
  useLayoutEffect(() => {
    const showColumnsOnDesktop = () => {
-      gridRef.current?.columnApi.setColumnsVisible(
+      gridRef.current?.api.setColumnsVisible(
        ['id', 'state', 'asset'],
        window.innerWidth > BREAKPOINT_MD
      );
@@ -44,11 +44,11 @@ export const ProposalsTable = ({ data }: ProposalsTableProps) => {
  const gridRef = useRef<AgGridReact>(null);
  useLayoutEffect(() => {
    const showColumnsOnDesktop = () => {
-      gridRef.current?.columnApi.setColumnsVisible(
+      gridRef.current?.api.setColumnsVisible(
        ['voting', 'cDate', 'eDate', 'type'],
        window.innerWidth > BREAKPOINT_MD
      );
-      gridRef.current?.columnApi.setColumnWidth(
+      gridRef.current?.api.setColumnWidth(
        'actions',
        window.innerWidth > BREAKPOINT_MD ? 221 : 80
      );
@@ -90,7 +90,11 @@ const MainGrid = memo(
                  {market &&
                  market.tradableInstrument.instrument.product.__typename ===
                    'Perpetual' ? (
-                    <Tab id="funding-payments" name={t('Funding payments')}>
+                    <Tab
+                      id="funding-payments"
+                      name={t('Funding payments')}
+                      settings={<TradingViews.fundingPayments.settings />}
+                    >
                      <ErrorBoundary feature="funding-payments">
                        <TradingViews.fundingPayments.component
                          marketId={marketId}
@@ -112,7 +116,11 @@ const MainGrid = memo(
                      <TradingViews.orderbook.component marketId={marketId} />
                    </ErrorBoundary>
                  </Tab>
-                  <Tab id="trades" name={t('Trades')}>
+                  <Tab
+                    id="trades"
+                    name={t('Trades')}
+                    settings={<TradingViews.trades.settings />}
+                  >
                    <ErrorBoundary feature="trades">
                      <TradingViews.trades.component marketId={marketId} />
                    </ErrorBoundary>
@@ -133,6 +141,7 @@ const MainGrid = memo(
                id="positions"
                name={t('Positions')}
                menu={<TradingViews.positions.menu />}
+                settings={<TradingViews.positions.settings />}
              >
                <ErrorBoundary feature="positions">
                  <TradingViews.positions.component />
@@ -142,17 +151,26 @@ const MainGrid = memo(
                id="open-orders"
                name={t('Open')}
                menu={<TradingViews.activeOrders.menu />}
+                settings={<TradingViews.activeOrders.settings />}
              >
                <ErrorBoundary feature="activeOrders">
                  <TradingViews.activeOrders.component />
                </ErrorBoundary>
              </Tab>
-              <Tab id="closed-orders" name={t('Closed')}>
+              <Tab
+                id="closed-orders"
+                name={t('Closed')}
+                settings={<TradingViews.closedOrders.settings />}
+              >
                <ErrorBoundary feature="closedOrders">
                  <TradingViews.closedOrders.component />
                </ErrorBoundary>
              </Tab>
-              <Tab id="rejected-orders" name={t('Rejected')}>
+              <Tab
+                id="rejected-orders"
+                name={t('Rejected')}
+                settings={<TradingViews.rejectedOrders.settings />}
+              >
                <ErrorBoundary feature="rejectedOrders">
                  <TradingViews.rejectedOrders.component />
                </ErrorBoundary>
@@ -161,25 +179,35 @@ const MainGrid = memo(
                id="orders"
                name={t('All')}
                menu={<TradingViews.orders.menu />}
+                settings={<TradingViews.orders.settings />}
              >
                <ErrorBoundary feature="orders">
                  <TradingViews.orders.component />
                </ErrorBoundary>
              </Tab>
              {featureFlags.STOP_ORDERS ? (
-                <Tab id="stop-orders" name={t('Stop orders')}>
+                <Tab
+                  id="stop-orders"
+                  name={t('Stop orders')}
+                  settings={<TradingViews.stopOrders.settings />}
+                >
                  <ErrorBoundary feature="stop-orders">
                    <TradingViews.stopOrders.component />
                  </ErrorBoundary>
                </Tab>
              ) : null}
-              <Tab id="fills" name={t('Fills')}>
+              <Tab
+                id="fills"
+                name={t('Fills')}
+                settings={<TradingViews.fills.settings />}
+              >
                <TradingViews.fills.component />
              </Tab>
              <Tab
                id="accounts"
                name={t('Collateral')}
                menu={<TradingViews.collateral.menu />}
+                settings={<TradingViews.collateral.settings />}
              >
                <ErrorBoundary feature="collateral">
                  <TradingViews.collateral.component
@@ -4,7 +4,12 @@ import { OracleBanner } from '@vegaprotocol/markets';
 import { useState } from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import classNames from 'classnames';
-import { Splash } from '@vegaprotocol/ui-toolkit';
+import {
+  Popover,
+  Splash,
+  VegaIcon,
+  VegaIconNames,
+} from '@vegaprotocol/ui-toolkit';
 import { useT } from '../../lib/use-t';
 import {
  MarketSuccessorBanner,
@@ -24,6 +29,7 @@ interface TradePanelsProps {
 export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
  const featureFlags = useFeatureFlags((state) => state.flags);
  const [view, setView] = useState<TradingView>('chart');
+  const viewCfg = TradingViews[view];

  const renderView = () => {
    const Component = TradingViews[view].component;
@@ -44,19 +50,27 @@ export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
  };

  const renderMenu = () => {
-    const viewCfg = TradingViews[view];
-
-    if ('menu' in viewCfg) {
-      const Menu = viewCfg.menu;
-
+    if ('menu' in viewCfg || 'settings' in viewCfg) {
      return (
        <div className="flex items-center justify-end gap-1 p-1 bg-vega-clight-800 dark:bg-vega-cdark-800 border-b border-default">
-          <Menu />
+          {'menu' in viewCfg ? <viewCfg.menu /> : null}
+          {'settings' in viewCfg ? (
+            <Popover
+              align="end"
+              trigger={
+                <span className="ml-1 flex items-center justify-center h-6 w-6">
+                  <VegaIcon name={VegaIconNames.COG} size={16} />
+                </span>
+              }
+            >
+              <div className="p-4 flex justify-end">
+                <viewCfg.settings />
+              </div>
+            </Popover>
+          ) : null}
        </div>
      );
    }
-
-    return null;
  };

  return (
@@ -72,7 +86,7 @@ export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
        <OracleBanner marketId={market?.id || ''} />
      </div>
      <div>{renderMenu()}</div>
-      <div className="h-full">
+      <div className="h-full relative">
        <AutoSizer>
          {({ width, height }) => (
            <div style={{ width, height }} className="overflow-auto">
@@ -110,7 +124,9 @@ export const TradePanels = ({ market, pinnedAsset }: TradePanelsProps) => {
                key={key}
                view={key}
                isActive={isActive}
-                onClick={() => setView(key)}
+                onClick={() => {
+                  setView(key);
+                }}
              />
            );
          })}
@@ -1,15 +1,36 @@
 import { DepthChartContainer } from '@vegaprotocol/market-depth';
 import { Filter, OpenOrdersMenu } from '@vegaprotocol/orders';
-import { TradesContainer } from '../../components/trades-container';
+import {
+  TradesContainer,
+  TradesSettings,
+} from '../../components/trades-container';
 import { OrderbookContainer } from '../../components/orderbook-container';
-import { FillsContainer } from '../../components/fills-container';
-import { PositionsContainer } from '../../components/positions-container';
-import { AccountsContainer } from '../../components/accounts-container';
+import {
+  FillsContainer,
+  FillsSettings,
+} from '../../components/fills-container';
+import {
+  PositionsContainer,
+  PositionsSettings,
+} from '../../components/positions-container';
+import {
+  AccountsContainer,
+  AccountsSettings,
+} from '../../components/accounts-container';
 import { LiquidityContainer } from '../../components/liquidity-container';
 import { FundingContainer } from '../../components/funding-container';
-import { FundingPaymentsContainer } from '../../components/funding-payments-container';
-import { OrdersContainer } from '../../components/orders-container';
-import { StopOrdersContainer } from '../../components/stop-orders-container';
+import {
+  FundingPaymentsContainer,
+  FundingPaymentsSettings,
+} from '../../components/funding-payments-container';
+import {
+  OrdersContainer,
+  OrdersSettings,
+} from '../../components/orders-container';
+import {
+  StopOrdersContainer,
+  StopOrdersSettings,
+} from '../../components/stop-orders-container';
 import { AccountsMenu } from '../../components/accounts-menu';
 import { PositionsMenu } from '../../components/positions-menu';
 import { ChartContainer, ChartMenu } from '../../components/chart-container';
@@ -32,37 +53,46 @@ export const TradingViews = {
  },
  fundingPayments: {
    component: FundingPaymentsContainer,
+    settings: FundingPaymentsSettings,
  },
  orderbook: {
    component: OrderbookContainer,
  },
  trades: {
    component: TradesContainer,
+    settings: TradesSettings,
  },
  positions: {
    component: PositionsContainer,
    menu: PositionsMenu,
+    settings: PositionsSettings,
  },
  activeOrders: {
    component: () => <OrdersContainer filter={Filter.Open} />,
    menu: OpenOrdersMenu,
+    settings: () => <OrdersSettings filter={Filter.Open} />,
  },
  closedOrders: {
    component: () => <OrdersContainer filter={Filter.Closed} />,
+    settings: () => <OrdersSettings filter={Filter.Closed} />,
  },
  rejectedOrders: {
    component: () => <OrdersContainer filter={Filter.Rejected} />,
+    settings: () => <OrdersSettings filter={Filter.Rejected} />,
  },
  orders: {
    component: OrdersContainer,
    menu: OpenOrdersMenu,
+    settings: OrdersSettings,
  },
  stopOrders: {
    component: StopOrdersContainer,
+    settings: StopOrdersSettings,
  },
  collateral: {
    component: AccountsContainer,
    menu: AccountsMenu,
+    settings: AccountsSettings,
  },
-  fills: { component: FillsContainer },
+  fills: { component: FillsContainer, settings: FillsSettings },
 } as const;
@@ -42,7 +42,7 @@ export const createDataGridSlice: StateCreator<DataGridSlice> = (set) => ({
  },
 });

-const useMarketsStore = create<DataGridSlice>()(
+export const useMarketsStore = create<DataGridSlice>()(
  persist(createDataGridSlice, {
    name: 'vega_market_list_store',
  })
@@ -16,6 +16,7 @@ import {
 } from '@vegaprotocol/environment';
 import { useT } from '../../lib/use-t';
 import { ErrorBoundary } from '../../components/error-boundary';
+import { MarketsSettings } from './markets-settings';

 export const MarketsPage = () => {
  const t = useT();
@@ -34,7 +35,11 @@ export const MarketsPage = () => {
    <div className="h-full pt-0.5 pb-3 px-1.5">
      <div className="h-full my-1 border rounded-sm border-default">
        <Tabs storageKey="console-markets">
-          <Tab id="open-markets" name={t('Open markets')}>
+          <Tab
+            id="open-markets"
+            name={t('Open markets')}
+            settings={<MarketsSettings />}
+          >
            <ErrorBoundary feature="markets-open">
              <OpenMarkets />
            </ErrorBoundary>
@@ -42,6 +47,7 @@ export const MarketsPage = () => {
          <Tab
            id="proposed-markets"
            name={t('Proposed markets')}
+            settings={<MarketsSettings />}
            menu={
              <TradingAnchorButton
                size="extra-small"
@@ -56,7 +62,11 @@ export const MarketsPage = () => {
              <Proposed />
            </ErrorBoundary>
          </Tab>
-          <Tab id="closed-markets" name={t('Closed markets')}>
+          <Tab
+            id="closed-markets"
+            name={t('Closed markets')}
+            settings={<MarketsSettings />}
+          >
            <ErrorBoundary feature="markets-closed">
              <Closed />
            </ErrorBoundary>
@@ -0,0 +1,8 @@
+import { GridSettings } from '../../components/grid-settings/grid-settings';
+import { useMarketsStore } from './market-list-table';
+
+export const MarketsSettings = () => (
+  <GridSettings
+    updateGridStore={useMarketsStore((store) => store.updateGridStore)}
+  />
+);
@@ -5,14 +5,29 @@ import { titlefy } from '@vegaprotocol/utils';
 import { useIncompleteWithdrawals } from '@vegaprotocol/withdraws';
 import { Tab, LocalStoragePersistTabs as Tabs } from '@vegaprotocol/ui-toolkit';
 import { usePageTitleStore } from '../../stores';
-import { AccountsContainer } from '../../components/accounts-container';
+import {
+  AccountsContainer,
+  AccountsSettings,
+} from '../../components/accounts-container';
 import { DepositsContainer } from '../../components/deposits-container';
-import { FillsContainer } from '../../components/fills-container';
-import { FundingPaymentsContainer } from '../../components/funding-payments-container';
-import { PositionsContainer } from '../../components/positions-container';
+import {
+  FillsContainer,
+  FillsSettings,
+} from '../../components/fills-container';
+import {
+  FundingPaymentsContainer,
+  FundingPaymentsSettings,
+} from '../../components/funding-payments-container';
+import {
+  PositionsContainer,
+  PositionsSettings,
+} from '../../components/positions-container';
 import { PositionsMenu } from '../../components/positions-menu';
 import { WithdrawalsContainer } from '../../components/withdrawals-container';
-import { OrdersContainer } from '../../components/orders-container';
+import {
+  OrdersContainer,
+  OrdersSettings,
+} from '../../components/orders-container';
 import { LedgerContainer } from '../../components/ledger-container';
 import {
  ResizableGrid,
@@ -76,22 +91,27 @@ export const Portfolio = () => {
                id="positions"
                name={t('Positions')}
                menu={<PositionsMenu />}
+                settings={<PositionsSettings />}
              >
                <ErrorBoundary feature="portfolio-positions">
                  <PositionsContainer allKeys />
                </ErrorBoundary>
              </Tab>
-              <Tab id="orders" name={t('Orders')}>
+              <Tab id="orders" name={t('Orders')} settings={<OrdersSettings />}>
                <ErrorBoundary feature="portfolio-orders">
                  <OrdersContainer />
                </ErrorBoundary>
              </Tab>
-              <Tab id="fills" name={t('Fills')}>
+              <Tab id="fills" name={t('Fills')} settings={<FillsSettings />}>
                <ErrorBoundary feature="portfolio-fills">
                  <FillsContainer />
                </ErrorBoundary>
              </Tab>
-              <Tab id="funding-payments" name={t('Funding payments')}>
+              <Tab
+                id="funding-payments"
+                name={t('Funding payments')}
+                settings={<FundingPaymentsSettings />}
+              >
                <ErrorBoundary feature="portfolio-funding-payments">
                  <FundingPaymentsContainer />
                </ErrorBoundary>
@@ -114,6 +134,7 @@ export const Portfolio = () => {
              <Tab
                id="collateral"
                name={t('Collateral')}
+                settings={<AccountsSettings />}
                menu={<AccountsMenu />}
              >
                <ErrorBoundary feature="portfolio-accounts">
@@ -73,7 +73,7 @@ export const AccountsContainer = ({
  );
 };

-const useAccountStore = create<DataGridSlice>()(
+export const useAccountStore = create<DataGridSlice>()(
  persist(createDataGridSlice, {
    name: 'vega_accounts_store',
  })
@@ -0,0 +1,8 @@
+import { GridSettings } from '../grid-settings/grid-settings';
+import { useAccountStore } from './accounts-container';
+
+export const AccountsSettings = () => (
+  <GridSettings
+    updateGridStore={useAccountStore((store) => store.updateGridStore)}
+  />
+);
@@ -1 +1,2 @@
 export * from './accounts-container';
+export * from './accounts-settings';
@@ -38,7 +38,7 @@ export const FillsContainer = () => {
  );
 };

-const useFillsStore = create<DataGridSlice>()(
+export const useFillsStore = create<DataGridSlice>()(
  persist(createDataGridSlice, {
    name: 'vega_fills_store',
  })
@@ -0,0 +1,8 @@
+import { GridSettings } from '../grid-settings/grid-settings';
+import { useFillsStore } from './fills-container';
+
+export const FillsSettings = () => (
+  <GridSettings
+    updateGridStore={useFillsStore((store) => store.updateGridStore)}
+  />
+);
@@ -1 +1,2 @@
 export * from './fills-container';
+export * from './fills-settings';
@@ -45,7 +45,7 @@ export const FundingPaymentsContainer = ({
  );
 };

-const useFundingPaymentsStore = create<DataGridSlice>()(
+export const useFundingPaymentsStore = create<DataGridSlice>()(
  persist(createDataGridSlice, {
    name: 'vega_funding_payments_store',
  })
@@ -0,0 +1,8 @@
+import { GridSettings } from '../grid-settings/grid-settings';
+import { useFundingPaymentsStore } from './funding-payments-container';
+
+export const FundingPaymentsSettings = () => (
+  <GridSettings
+    updateGridStore={useFundingPaymentsStore((store) => store.updateGridStore)}
+  />
+);
@@ -1 +1,2 @@
 export * from './funding-payments-container';
+export * from './funding-payments-settings';
@@ -0,0 +1,24 @@
+import { useT } from '../../lib/use-t';
+import type { DataGridStore } from '../../stores/datagrid-store-slice';
+import { TradingButton as Button } from '@vegaprotocol/ui-toolkit';
+
+export const GridSettings = ({
+  updateGridStore,
+}: {
+  updateGridStore: (gridStore: DataGridStore) => void;
+}) => {
+  const t = useT();
+  return (
+    <Button
+      onClick={() =>
+        updateGridStore({
+          columnState: undefined,
+          filterModel: undefined,
+        })
+      }
+      size="extra-small"
+    >
+      {t('Reset Columns')}
+    </Button>
+  );
+};
@@ -27,7 +27,7 @@ export const MarketHeader = () => {
            title={
              <Popover
                open={open}
-                onChange={setOpen}
+                onOpenChange={setOpen}
                trigger={
                  <HeaderTitle>
                    <span>
@@ -1,9 +1,5 @@
 import { act, renderHook } from '@testing-library/react';
-import {
-  FilterStatusValue,
-  STORAGE_KEY,
-  useOrderListGridState,
-} from './orders-container';
+import { STORAGE_KEY, useOrderListGridState } from './orders-container';
 import { Filter } from '@vegaprotocol/orders';
 import { OrderType } from '@vegaprotocol/types';

@@ -16,31 +12,6 @@ describe('useOrderListGridState', () => {
    return renderHook(() => useOrderListGridState(filter));
  };

-  it.each(Object.values(Filter))(
-    'providers correct AgGrid filter for %s',
-    (filter) => {
-      const { result } = setup(filter);
-      expect(typeof result.current.updateGridState).toBe('function');
-      expect(result.current.gridState).toEqual({
-        columnState: undefined,
-        filterModel: {
-          status: {
-            value: FilterStatusValue[filter],
-          },
-        },
-      });
-    }
-  );
-
-  it('provides correct AgGrid filter for all', () => {
-    const { result } = setup(undefined);
-    expect(typeof result.current.updateGridState).toBe('function');
-    expect(result.current.gridState).toEqual({
-      columnState: undefined,
-      filterModel: undefined,
-    });
-  });
-
  it.each(Object.values(Filter))(
    'sets and stores column state and filters for %s',
    (filter) => {
@@ -59,12 +30,7 @@ describe('useOrderListGridState', () => {

      expect(result.current.gridState).toEqual({
        columnState: undefined,
-        filterModel: {
-          ...filterModel,
-          status: {
-            value: FilterStatusValue[filter],
-          },
-        },
+        filterModel,
      });

      const columnState = [{ colId: 'status', width: 200 }];
@@ -77,12 +43,7 @@ describe('useOrderListGridState', () => {

      expect(result.current.gridState).toEqual({
        columnState,
-        filterModel: {
-          ...filterModel,
-          status: {
-            value: FilterStatusValue[filter],
-          },
-        },
+        filterModel,
      });

      const storeKeyMap = {
@@ -9,6 +9,7 @@ import type { DataGridStore } from '../../stores/datagrid-store-slice';
 import { OrderStatus } from '@vegaprotocol/types';
 import { Links } from '../../lib/links';
 import { useT } from '../../lib/use-t';
+import { GridSettings } from '../grid-settings/grid-settings';

 const resolveNoRowsMessage = (
  filter: Filter | undefined,
@@ -38,6 +39,24 @@ export const FilterStatusValue = {
  [Filter.Rejected]: [OrderStatus.STATUS_REJECTED],
 };

+export const DefaultFilterModel = {
+  [Filter.Open]: {
+    status: {
+      value: FilterStatusValue[Filter.Open],
+    },
+  },
+  [Filter.Closed]: {
+    status: {
+      value: FilterStatusValue[Filter.Closed],
+    },
+  },
+  [Filter.Rejected]: {
+    status: {
+      value: FilterStatusValue[Filter.Rejected],
+    },
+  },
+};
+
 export interface OrderContainerProps {
  filter?: Filter;
 }
@@ -54,7 +73,8 @@ export const OrdersContainer = ({ filter }: OrderContainerProps) => {
    (newState) => {
      updateGridState(filter, newState);
    },
-    AUTO_SIZE_COLUMNS
+    AUTO_SIZE_COLUMNS,
+    filter && DefaultFilterModel[filter]
  );

  if (!pubKey) {
@@ -80,7 +100,7 @@ export const OrdersContainer = ({ filter }: OrderContainerProps) => {
 };

 export const STORAGE_KEY = 'vega_order_list_store';
-const useOrderListStore = create<{
+export const useOrderListStore = create<{
  open: DataGridStore;
  closed: DataGridStore;
  rejected: DataGridStore;
@@ -149,34 +169,19 @@ export const useOrderListGridState = (filter: Filter | undefined) => {
      case Filter.Open: {
        return {
          columnState: store.open.columnState,
-          filterModel: {
-            ...store.open.filterModel,
-            status: {
-              value: FilterStatusValue[Filter.Open],
-            },
-          },
+          filterModel: store.open.filterModel,
        };
      }
      case Filter.Closed: {
        return {
          columnState: store.closed.columnState,
-          filterModel: {
-            ...store.closed.filterModel,
-            status: {
-              value: FilterStatusValue[Filter.Closed],
-            },
-          },
+          filterModel: store.closed.filterModel,
        };
      }
      case Filter.Rejected: {
        return {
          columnState: store.rejected.columnState,
-          filterModel: {
-            ...store.rejected.filterModel,
-            status: {
-              value: FilterStatusValue[Filter.Rejected],
-            },
-          },
+          filterModel: store.rejected.filterModel,
        };
      }
      default: {
@@ -187,3 +192,14 @@ export const useOrderListGridState = (filter: Filter | undefined) => {

  return { gridState, updateGridState };
 };
+
+export const OrdersSettings = ({ filter }: { filter?: Filter }) => {
+  const updateGridState = useOrderListStore((state) => state.update);
+  return (
+    <GridSettings
+      updateGridStore={(gridStore: DataGridStore) =>
+        updateGridState(filter, gridStore)
+      }
+    />
+  );
+};
@@ -1 +1,2 @@
 export * from './positions-container';
+export * from './positions-settings';
@@ -0,0 +1,8 @@
+import { GridSettings } from '../grid-settings/grid-settings';
+import { usePositionsStore } from './positions-container';
+
+export const PositionsSettings = () => (
+  <GridSettings
+    updateGridStore={usePositionsStore((store) => store.updateGridStore)}
+  />
+);
@@ -1 +1,3 @@
 export * from './stop-orders-container';
+
+export * from './stop-orders-settings';
@@ -35,7 +35,7 @@ export const StopOrdersContainer = () => {
  );
 };

-const useStopOrdersStore = create<DataGridSlice>()(
+export const useStopOrdersStore = create<DataGridSlice>()(
  persist(createDataGridSlice, {
    name: 'vega_stop_orders_store',
  })
@@ -0,0 +1,8 @@
+import { GridSettings } from '../grid-settings/grid-settings';
+import { useStopOrdersStore } from './stop-orders-container';
+
+export const StopOrdersSettings = () => (
+  <GridSettings
+    updateGridStore={useStopOrdersStore((store) => store.updateGridStore)}
+  />
+);
@@ -1 +1,2 @@
 export * from './trades-container';
+export * from './trades-settings';
@@ -17,7 +17,7 @@ export const TradesContainer = ({ marketId }: TradesContainerProps) => {
  return <TradesManager marketId={marketId} gridProps={gridStoreCallbacks} />;
 };

-const useTradesStore = create<DataGridSlice>()(
+export const useTradesStore = create<DataGridSlice>()(
  persist(createDataGridSlice, {
    name: 'vega_trades_store',
  })
@@ -0,0 +1,8 @@
+import { GridSettings } from '../grid-settings/grid-settings';
+import { useTradesStore } from './trades-container';
+
+export const TradesSettings = () => (
+  <GridSettings
+    updateGridStore={useTradesStore((store) => store.updateGridStore)}
+  />
+);
@@ -1,6 +1,6 @@
 import pytest
 from playwright.sync_api import Page, expect
-from vega_sim.service import VegaService
+from vega_sim.null_service import VegaServiceNull
 from datetime import datetime, timedelta
 from conftest import init_vega
 from fixtures.market import setup_continuous_market
@@ -24,7 +24,7 @@ def continuous_market(vega):
    return setup_continuous_market(vega)

@pytest.mark.usefixtures("auth", "risk_accepted")
-def test_limit_buy_order_GTT(continuous_market, vega: VegaService, page: Page):
+def test_limit_buy_order_GTT(continuous_market, vega: VegaServiceNull, page: Page):
    page.goto(f"/#/markets/{continuous_market}")
    page.get_by_test_id(tif).select_option("Good 'til Time (GTT)")
    page.get_by_test_id(order_size).fill("10")
@@ -52,7 +52,7 @@ def test_limit_buy_order_GTT(continuous_market, vega: VegaService, page: Page):
    )

@pytest.mark.usefixtures("auth", "risk_accepted")
-def test_limit_buy_order(continuous_market, vega: VegaService, page: Page):
+def test_limit_buy_order(continuous_market, vega: VegaServiceNull, page: Page):
    page.goto(f"/#/markets/{continuous_market}")
    
    page.get_by_test_id(order_size).fill("10")
@@ -69,7 +69,7 @@ def test_limit_buy_order(continuous_market, vega: VegaService, page: Page):
    )

@pytest.mark.usefixtures("auth", "risk_accepted")
-def test_limit_sell_order(continuous_market, vega: VegaService, page: Page):
+def test_limit_sell_order(continuous_market, vega: VegaServiceNull, page: Page):
    page.goto(f"/#/markets/{continuous_market}")
    page.get_by_test_id(order_size).fill("10")
    page.get_by_test_id(order_price).fill("100")
@@ -93,7 +93,7 @@ def test_limit_sell_order(continuous_market, vega: VegaService, page: Page):
    )

@pytest.mark.usefixtures("auth", "risk_accepted")
-def test_market_sell_order(continuous_market, vega: VegaService, page: Page):
+def test_market_sell_order(continuous_market, vega: VegaServiceNull, page: Page):
    page.goto(f"/#/markets/{continuous_market}")
    page.get_by_test_id(market_order).click()
    page.get_by_test_id(order_size).fill("10")
@@ -117,7 +117,7 @@ def test_market_sell_order(continuous_market, vega: VegaService, page: Page):
    )

@pytest.mark.usefixtures("auth", "risk_accepted")
-def test_market_buy_order(continuous_market, vega: VegaService, page: Page):
+def test_market_buy_order(continuous_market, vega: VegaServiceNull, page: Page):
    page.goto(f"/#/markets/{continuous_market}")
    page.get_by_test_id(market_order).click()
    page.get_by_test_id(order_size).fill("10")
@@ -1,6 +1,6 @@
 import pytest
 from playwright.sync_api import Page, expect
-from vega_sim.service import VegaService
+from vega_sim.null_service import VegaServiceNull
 from actions.vega import submit_order
 from actions.utils import wait_for_toast_confirmation

@@ -13,7 +13,7 @@ market_trading_mode = "market-trading-mode"

@pytest.mark.skip("tbd")
@pytest.mark.usefixtures("auth", "risk_accepted")
-def test_margin_and_fees_estimations(continuous_market, vega: VegaService, page: Page):
+def test_margin_and_fees_estimations(continuous_market, vega: VegaServiceNull, page: Page):
    # setup continuous trading market with one user buy trade
    market_id = continuous_market
    page.goto(f"/#/markets/{market_id}")
@@ -1,6 +1,6 @@
 import pytest
 from playwright.sync_api import Page, expect
-from vega_sim.service import VegaService
+from vega_sim.null_service import VegaServiceNull
 from actions.vega import submit_order
 from datetime import datetime, timedelta
 from conftest import init_vega
@@ -38,7 +38,7 @@ timeInForce_col = '[col-id="submission.timeInForce"]'
 updatedAt_col = '[col-id="updatedAt"]'
 close_toast = "toast-close"

-def create_position(vega: VegaService, market_id):
+def create_position(vega: VegaServiceNull, market_id):
    submit_order(vega, "Key 1", market_id, "SIDE_SELL", 100, 110)
    submit_order(vega, "Key 1", market_id, "SIDE_BUY", 100, 110)
    vega.forward("10s")
@@ -69,7 +69,7 @@ def test_stop_order_form_error_validation(continuous_market, page: Page):

@pytest.mark.skip("core issue")
@pytest.mark.usefixtures("auth", "risk_accepted")
-def test_submit_stop_order_rejected(continuous_market, vega: VegaService, page: Page):
+def test_submit_stop_order_rejected(continuous_market, vega: VegaServiceNull, page: Page):
    page.goto(f"/#/markets/{continuous_market}")
    page.get_by_test_id(stop_orders_tab).click()
    page.get_by_test_id(stop_order_btn).click()
@@ -108,7 +108,7 @@ def test_submit_stop_order_rejected(continuous_market, vega: VegaService, page:
@pytest.mark.skip("core issue")
@pytest.mark.usefixtures("auth", "risk_accepted")
 def test_submit_stop_market_order_triggered(
-    continuous_market, vega: VegaService, page: Page
+    continuous_market, vega: VegaServiceNull, page: Page
 ):
    # 7002-SORD-071
    # 7002-SORD-074
@@ -166,7 +166,7 @@ def test_submit_stop_market_order_triggered(
@pytest.mark.skip("core issue")
@pytest.mark.usefixtures("auth", "risk_accepted")
 def test_submit_stop_limit_order_pending(
-    continuous_market, vega: VegaService, page: Page
+    continuous_market, vega: VegaServiceNull, page: Page
 ):
    # 7002-SORD-071
    # 7002-SORD-074
@@ -227,7 +227,7 @@ def test_submit_stop_limit_order_pending(
@pytest.mark.skip("core issue")
@pytest.mark.usefixtures("auth", "risk_accepted")
 def test_submit_stop_limit_order_cancel(
-    continuous_market, vega: VegaService, page: Page
+    continuous_market, vega: VegaServiceNull, page: Page
 ):
    page.goto(f"/#/markets/{continuous_market}")
    page.get_by_test_id(stop_orders_tab).click()
@@ -348,7 +348,7 @@ class TestStopOcoValidation:
    @pytest.mark.skip("core issue")
    @pytest.mark.usefixtures("auth", "risk_accepted")
    def test_maximum_number_of_active_stop_orders(
-        self, continuous_market, vega: VegaService, page: Page
+        self, continuous_market, vega: VegaServiceNull, page: Page
    ):
        page.goto(f"/#/markets/{continuous_market}")
        page.get_by_test_id(stop_orders_tab).click()
@@ -1,6 +1,6 @@
 import pytest
 from playwright.sync_api import Page, expect
-from vega_sim.service import VegaService
+from vega_sim.null_service import VegaServiceNull
 from actions.vega import submit_order
 from actions.utils import wait_for_toast_confirmation

@@ -42,7 +42,7 @@ trigger_price_oco = "triggerPrice-oco"
 order_size_oco = "order-size-oco"
 order_limit_price_oco = "order-price-oco"

-def create_position(vega: VegaService, market_id):
+def create_position(vega: VegaServiceNull, market_id):
    submit_order(vega, "Key 1", market_id, "SIDE_SELL", 100, 110)
    submit_order(vega, "Key 1", market_id, "SIDE_BUY", 100, 110)
    vega.wait_fn(1)
@@ -51,7 +51,7 @@ def create_position(vega: VegaService, market_id):

@pytest.mark.usefixtures("auth", "risk_accepted")
 def test_submit_stop_order_market_oco_rejected(
-    continuous_market, vega: VegaService, page: Page
+    continuous_market, vega: VegaServiceNull, page: Page
 ):
    page.goto(f"/#/markets/{continuous_market}")
    page.get_by_test_id(stop_orders_tab).click()
@@ -128,7 +128,7 @@ def test_submit_stop_order_market_oco_rejected(

@pytest.mark.usefixtures("auth", "risk_accepted")
 def test_submit_stop_oco_market_order_triggered(
-    continuous_market, vega: VegaService, page: Page
+    continuous_market, vega: VegaServiceNull, page: Page
 ):
    create_position(vega, continuous_market)
    page.goto(f"/#/markets/{continuous_market}")
@@ -205,7 +205,7 @@ def test_submit_stop_oco_market_order_triggered(

@pytest.mark.usefixtures("auth", "risk_accepted")
 def test_submit_stop_oco_market_order_pending(
-    continuous_market, vega: VegaService, page: Page
+    continuous_market, vega: VegaServiceNull, page: Page
 ):  
    create_position(vega, continuous_market)
    page.goto(f"/#/markets/{continuous_market}")
@@ -237,7 +237,7 @@ def test_submit_stop_oco_market_order_pending(

@pytest.mark.usefixtures("page", "continuous_market", "auth", "risk_accepted")
 def test_submit_stop_oco_limit_order_pending(
-    continuous_market, vega: VegaService, page: Page
+    continuous_market, vega: VegaServiceNull, page: Page
 ):
    create_position(vega, continuous_market)
    page.goto(f"/#/markets/{continuous_market}")
@@ -288,7 +288,7 @@ def test_submit_stop_oco_limit_order_pending(

@pytest.mark.usefixtures("auth", "risk_accepted")
 def test_submit_stop_oco_limit_order_cancel(
-    continuous_market, vega: VegaService, page: Page
+    continuous_market, vega: VegaServiceNull, page: Page
 ):
    create_position(vega, continuous_market)
    page.goto(f"/#/markets/{continuous_market}")
@@ -1,6 +1,6 @@
 import pytest
 from playwright.sync_api import Page, expect
-from vega_sim.service import VegaService
+from vega_sim.null_service import VegaServiceNull
 from actions.utils import change_keys
 from conftest import init_vega
 from fixtures.market import setup_continuous_market
@@ -33,7 +33,7 @@ def test_should_display_info_and_button_for_deposit(continuous_market, page: Pag
    expect(page.get_by_test_id("sidebar-content")).to_contain_text("DepositFrom")
    
@pytest.mark.usefixtures("auth", "risk_accepted")
-def test_should_show_an_error_if_your_balance_is_zero(continuous_market, vega: VegaService, page: Page):
+def test_should_show_an_error_if_your_balance_is_zero(continuous_market, vega: VegaServiceNull, page: Page):
    page.goto(f"/#/markets/{continuous_market}")
    vega.create_key("key_empty")
    change_keys(page, vega, "key_empty")
@@ -1,7 +1,7 @@
 import pytest

 from playwright.sync_api import Page, expect
-from vega_sim.service import VegaService
+from vega_sim.null_service import VegaServiceNull
 from actions.vega import submit_order
 from wallet_config import MM_WALLET
 from conftest import init_vega, init_page, auth_setup
@@ -143,7 +143,7 @@ def auth(vega_instance, page):
    return auth_setup(vega_instance, page)


-def setup_market_with_volume_discount_program(vega: VegaService, tier: int):
+def setup_market_with_volume_discount_program(vega: VegaServiceNull, tier: int):
    market = setup_continuous_market(vega, custom_quantum=100000)
    vega.update_volume_discount_program(
        proposal_key=MM_WALLET.name,
@@ -169,7 +169,7 @@ def setup_market_with_volume_discount_program(vega: VegaService, tier: int):
    return market


-def setup_market_with_referral_discount_program(vega: VegaService, tier: int):
+def setup_market_with_referral_discount_program(vega: VegaServiceNull, tier: int):
    market = setup_continuous_market(vega, custom_quantum=100000)
    vega.update_referral_program(
        proposal_key=MM_WALLET.name,
@@ -208,7 +208,7 @@ def setup_market_with_referral_discount_program(vega: VegaService, tier: int):
    return market


-def setup_combined_market(vega: VegaService):
+def setup_combined_market(vega: VegaServiceNull):
    market = setup_continuous_market(vega, custom_quantum=100000)
    vega.update_volume_discount_program(
        proposal_key=MM_WALLET.name,
@@ -1,7 +1,7 @@
 import pytest
 from playwright.sync_api import expect, Page
 import json
-from vega_sim.service import VegaService
+from vega_sim.null_service import VegaServiceNull
 from fixtures.market import setup_simple_market
 from conftest import init_vega
 from actions.vega import submit_order
@@ -16,11 +16,11 @@ def vega():
        yield vega

@pytest.fixture(scope="class")
-def simple_market(vega: VegaService):
+def simple_market(vega: VegaServiceNull):
    return setup_simple_market(vega)

 class TestGetStarted:
-    def test_get_started_interactive(self, vega: VegaService, page: Page):
+    def test_get_started_interactive(self, vega: VegaServiceNull, page: Page):
        page.goto("/")
        # 0007-FUGS-001
        expect(page.get_by_test_id("order-connect-wallet")).to_be_visible
@@ -166,7 +166,8 @@ class TestGetStarted:
        page.wait_for_selector('[data-testid="sidebar-content"]', state="visible")
        expect(page.get_by_test_id("get-started-banner")).not_to_be_visible()

-    def test_redirect_default_market(self, continuous_market, vega: VegaService, page: Page):
+    @pytest.mark.skip("tbd-market-sim")
+    def test_redirect_default_market(self, continuous_market, vega: VegaServiceNull, page: Page):
        page.goto("/")
        # 0007-FUGS-012
        expect(page).to_have_url(
@@ -177,7 +178,7 @@ class TestGetStarted:
        expect(page.get_by_test_id("welcome-dialog")).not_to_be_visible()

 class TestBrowseAll: 
-    def test_get_started_browse_all(self, simple_market, vega: VegaService, page: Page):
+    def test_get_started_browse_all(self, simple_market, vega: VegaServiceNull, page: Page):
        page.goto("/")
        print(simple_market)
        page.get_by_test_id("browse-markets-button").click()
@@ -1,6 +1,6 @@
 import pytest
 from playwright.sync_api import expect, Page
-from vega_sim.service import VegaService
+from vega_sim.null_service import VegaServiceNull
 from actions.vega import submit_order
 from conftest import init_vega
 from fixtures.market import setup_continuous_market
@@ -22,7 +22,7 @@ class TestIcebergOrdersValidations:
        return setup_continuous_market(vega)

    @pytest.mark.usefixtures("auth", "risk_accepted")
-    def test_iceberg_submit(self, continuous_market, vega: VegaService, page: Page):
+    def test_iceberg_submit(self, continuous_market, vega: VegaServiceNull, page: Page):
        page.goto(f"/#/markets/{continuous_market}")
        page.get_by_test_id("iceberg").click()
        page.get_by_test_id("order-peak-size").type("2")
@@ -47,7 +47,7 @@ class TestIcebergOrdersValidations:
        ).to_have_text("Limit (Iceberg)")

@pytest.mark.usefixtures("auth", "risk_accepted")
-def test_iceberg_open_order(continuous_market, vega: VegaService, page: Page):
+def test_iceberg_open_order(continuous_market, vega: VegaServiceNull, page: Page):
    page.goto(f"/#/markets/{continuous_market}")

    submit_order(vega, "Key 1", continuous_market, "SIDE_SELL", 102, 101, 2, 1)
@@ -65,16 +65,17 @@ def test_iceberg_open_order(continuous_market, vega: VegaService, page: Page):
    page.wait_for_selector(".ag-center-cols-container .ag-row")

    expect(
-        page.locator(".ag-center-cols-container .ag-row [col-id='remaining']")
+        page.locator(".ag-center-cols-container .ag-row [col-id='remaining']").first
    ).to_have_text("99")
    expect(
-        page.locator(".ag-center-cols-container .ag-row [col-id='size']")
+        page.locator(".ag-center-cols-container .ag-row [col-id='size']").first
    ).to_have_text("-102")
+    page.pause()
    expect(
-        page.locator(".ag-center-cols-container .ag-row [col-id='type'] ")
+        page.locator(".ag-center-cols-container .ag-row [col-id='type'] ").first
    ).to_have_text("Limit (Iceberg)")
    expect(
-        page.locator(".ag-center-cols-container .ag-row [col-id='status']")
+        page.locator(".ag-center-cols-container .ag-row [col-id='status']").first
    ).to_have_text("Active")
    expect(page.get_by_test_id("price-10100000")).to_be_visible
    expect(page.get_by_test_id("ask-vol-10100000")).to_have_text("3")
@@ -1,6 +1,6 @@
 import pytest
 from playwright.sync_api import Page, expect
-from vega_sim.service import VegaService
+from vega_sim.null_service import VegaServiceNull
 from conftest import init_vega
 from fixtures.market import setup_continuous_market
 from actions.utils import next_epoch, truncate_middle, change_keys
@@ -18,7 +18,7 @@ def continuous_market(vega):


@pytest.mark.usefixtures("auth", "risk_accepted")
-def test_liquidity_provision_amendment(continuous_market, vega: VegaService, page: Page):
+def test_liquidity_provision_amendment(continuous_market, vega: VegaServiceNull, page: Page):
    # TODO Refactor asserting the grid
    page.goto(f"/#/liquidity/{continuous_market}")
    change_keys(page, vega, "market_maker")
@@ -77,7 +77,7 @@ def test_liquidity_provision_amendment(continuous_market, vega: VegaService, pag

@pytest.mark.skip("Waiting for the ability to cancel LP")
@pytest.mark.usefixtures("auth", "risk_accepted")
-def test_liquidity_provision_inactive(continuous_market, vega: VegaService, page: Page):
+def test_liquidity_provision_inactive(continuous_market, vega: VegaServiceNull, page: Page):
    # TODO Refactor asserting the grid
    page.goto(f"/#/liquidity/{continuous_market}")
    change_keys(page, vega, "market_maker")
@@ -1,7 +1,7 @@
 import pytest
 import re
 import vega_sim.api.governance as governance
-from vega_sim.service import VegaService
+from vega_sim.null_service import VegaServiceNull
 from playwright.sync_api import Page, expect
 from fixtures.market import setup_continuous_market
 from conftest import init_vega
@@ -14,7 +14,7 @@ def vega():


@pytest.fixture(scope="class")
-def create_settled_market(vega: VegaService):
+def create_settled_market(vega: VegaServiceNull):
    market_id = setup_continuous_market(vega)
    vega.submit_termination_and_settlement_data(
        settlement_key="FJMKnwfZdd48C8NqvYrG",
@@ -115,7 +115,7 @@ class TestSettledMarket:


@pytest.mark.usefixtures("risk_accepted", "auth")
-def test_terminated_market_no_settlement_date(page: Page, vega: VegaService):
+def test_terminated_market_no_settlement_date(page: Page, vega: VegaServiceNull):
    setup_continuous_market(vega)
    print("I have started test_terminated_market_no_settlement_date")
    governance.submit_oracle_data(
@@ -1,6 +1,6 @@
 import pytest
 from playwright.sync_api import Page, expect
-from vega_sim.service import VegaService
+from vega_sim.null_service import VegaServiceNull
 from actions.vega import submit_order
 from actions.utils import change_keys
 from wallet_config import MM_WALLET, MM_WALLET2
@@ -30,9 +30,9 @@ initial_volume: float = 1
 initial_spread: float = 0.1
 market_name = "BTC:DAI_2023"

-
+@pytest.mark.skip("tbd")
@pytest.mark.usefixtures("risk_accepted", "auth")
-def test_price_monitoring(simple_market, vega: VegaService, page: Page):
+def test_price_monitoring(simple_market, vega: VegaServiceNull, page: Page):
    page.goto(f"/#/markets/all")
    expect(page.locator(table_row_selector).locator(trading_mode_col)).to_have_text(
        "Opening auction"
@@ -202,7 +202,7 @@ COL_ID_FEE = ".ag-center-cols-container [col-id='fee'] .ag-cell-value"


@pytest.mark.usefixtures("risk_accepted", "auth")
-def test_auction_uncross_fees(continuous_market, vega: VegaService, page: Page):
+def test_auction_uncross_fees(continuous_market, vega: VegaServiceNull, page: Page):
    page.goto(f"/#/markets/{continuous_market}")
    page.get_by_test_id("Fills").click()
    expect(page.locator(COL_ID_FEE)).to_have_text("0.00 tDAI")
@@ -1,7 +1,7 @@
 import re
 import pytest
 from playwright.sync_api import Page, expect
-from vega_sim.service import VegaService
+from vega_sim.null_service import VegaServiceNull
 from fixtures.market import setup_continuous_market
 from conftest import init_page, init_vega, risk_accepted_setup

@@ -42,7 +42,7 @@ def validate_info_section(page: Page, fields: [[str, str]]):
            page.get_by_test_id("key-value-table-row").nth(rowNumber).locator("dd")
        ).to_contain_text(value)

-
+@pytest.mark.skip("tbd-market-sim")
 def test_market_info_current_fees(page: Page):
    # 6002-MDET-101
    page.get_by_test_id(market_title_test_id).get_by_text("Current fees").click()
@@ -54,7 +54,7 @@ def test_market_info_current_fees(page: Page):
    ]
    validate_info_section(page, fields)

-
+@pytest.mark.skip("tbd-market-sim")
 def test_market_info_market_price(page: Page):
    # 6002-MDET-102
    page.get_by_test_id(market_title_test_id).get_by_text("Market price").click()
@@ -66,7 +66,7 @@ def test_market_info_market_price(page: Page):
    ]
    validate_info_section(page, fields)

-
+@pytest.mark.skip("tbd-market-sim")
 def test_market_info_market_volume(page: Page):
    # 6002-MDET-103
    page.get_by_test_id(market_title_test_id).get_by_text("Market volume").click()
@@ -80,15 +80,15 @@ def test_market_info_market_volume(page: Page):
    ]
    validate_info_section(page, fields)

-
+@pytest.mark.skip("tbd-market-sim")
 def test_market_info_insurance_pool(page: Page):
    # 6002-MDET-104
    page.get_by_test_id(market_title_test_id).get_by_text("Insurance pool").click()
    fields = [["Balance", "0.00 tDAI"]]
    validate_info_section(page, fields)

-
-def test_market_info_key_details(page: Page, vega: VegaService):
+@pytest.mark.skip("tbd-market-sim")
+def test_market_info_key_details(page: Page, vega: VegaServiceNull):
    # 6002-MDET-201
    page.get_by_test_id(market_title_test_id).get_by_text("Key details").click()
    market_id = vega.find_market_id("BTC:DAI_2023")
@@ -106,7 +106,7 @@ def test_market_info_key_details(page: Page, vega: VegaService):
    ]
    validate_info_section(page, fields)

-
+@pytest.mark.skip("tbd-market-sim")
 def test_market_info_instrument(page: Page):
    # 6002-MDET-202
    page.get_by_test_id(market_title_test_id).get_by_text("Instrument").click()
@@ -121,7 +121,7 @@ def test_market_info_instrument(page: Page):

 # @pytest.mark.skip("oracle test to be fixed")

-
+@pytest.mark.skip("tbd-market-sim")
 def test_market_info_oracle(page: Page):
    # 6002-MDET-203
    page.get_by_test_id(market_title_test_id).get_by_text("Oracle").click()
@@ -135,8 +135,8 @@ def test_market_info_oracle(page: Page):
    #     "href", re.compile(rf'(\/oracles\/{vega.find_market_id("BTC:DAI_2023")})')
    # )

-
-def test_market_info_settlement_asset(page: Page, vega: VegaService):
+@pytest.mark.skip("tbd-market-sim")
+def test_market_info_settlement_asset(page: Page, vega: VegaServiceNull):
    # 6002-MDET-206
    page.get_by_test_id(market_title_test_id).get_by_text("Settlement asset").click()
    tdai_id = vega.find_asset_id("tDAI")
@@ -155,7 +155,7 @@ def test_market_info_settlement_asset(page: Page, vega: VegaService):
    ]
    validate_info_section(page, fields)

-
+@pytest.mark.skip("tbd-market-sim")
 def test_market_info_metadata(page: Page):
    # 6002-MDET-207
    page.get_by_test_id(market_title_test_id).get_by_text("Metadata").click()
@@ -164,7 +164,7 @@ def test_market_info_metadata(page: Page):
    ]
    validate_info_section(page, fields)

-
+@pytest.mark.skip("tbd-market-sim")
 def test_market_info_risk_model(page: Page):
    # 6002-MDET-208
    page.get_by_test_id(market_title_test_id).get_by_text("Risk model").click()
@@ -175,7 +175,7 @@ def test_market_info_risk_model(page: Page):
    ]
    validate_info_section(page, fields)

-
+@pytest.mark.skip("tbd-market-sim")
 def test_market_info_margin_scaling_factors(page: Page):
    # 6002-MDET-209
    page.get_by_test_id(market_title_test_id).get_by_text(
@@ -190,7 +190,7 @@ def test_market_info_margin_scaling_factors(page: Page):
    ]
    validate_info_section(page, fields)

-
+@pytest.mark.skip("tbd-market-sim")
 def test_market_info_risk_factors(page: Page):
    # 6002-MDET-210
    page.get_by_test_id(market_title_test_id).get_by_text("Risk factors").click()
@@ -204,7 +204,7 @@ def test_market_info_risk_factors(page: Page):
    ]
    validate_info_section(page, fields)

-
+@pytest.mark.skip("tbd-market-sim")
 def test_market_info_price_monitoring_bounds(page: Page):
    # 6002-MDET-211
    page.get_by_test_id(market_title_test_id).get_by_text(
@@ -220,7 +220,7 @@ def test_market_info_price_monitoring_bounds(page: Page):
    ]
    validate_info_section(page, fields)

-
+@pytest.mark.skip("tbd-market-sim")
 def test_market_info_liquidity_monitoring_parameters(page: Page):
    # 6002-MDET-212
    page.get_by_test_id(market_title_test_id).get_by_text(
@@ -233,7 +233,7 @@ def test_market_info_liquidity_monitoring_parameters(page: Page):
    ]
    validate_info_section(page, fields)

-
+@pytest.mark.skip("tbd-market-sim")
 # Liquidity resolves to 3 results
 def test_market_info_liquidit(page: Page):
    # 6002-MDET-213
@@ -246,7 +246,7 @@ def test_market_info_liquidit(page: Page):
    ]
    validate_info_section(page, fields)

-
+@pytest.mark.skip("tbd-market-sim")
 def test_market_info_liquidity_price_range(page: Page):
    # 6002-MDET-214
    page.get_by_test_id(market_title_test_id).get_by_text(
@@ -259,8 +259,8 @@ def test_market_info_liquidity_price_range(page: Page):
    ]
    validate_info_section(page, fields)

-
-def test_market_info_proposal(page: Page, vega: VegaService):
+@pytest.mark.skip("tbd-market-sim")
+def test_market_info_proposal(page: Page, vega: VegaServiceNull):
    # 6002-MDET-301
    page.get_by_test_id(market_title_test_id).get_by_text("Proposal").click()
    first_link = (
@@ -280,8 +280,9 @@ def test_market_info_proposal(page: Page, vega: VegaService):
        "href", re.compile(r"(\/proposals\/propose\/update-market)")
    )

+    
@pytest.mark.skip("tbd-market-sim")
-def test_market_info_succession_line(page: Page, vega: VegaService):
+def test_market_info_succession_line(page: Page, vega: VegaServiceNull):
    page.get_by_test_id(market_title_test_id).get_by_text("Succession line").click()
    market_id = vega.find_market_id("BTC:DAI_2023")
    succession_line = page.get_by_test_id("succession-line-item")
@@ -2,7 +2,7 @@ import pytest
 import vega_sim.api.governance as governance
 import re
 from playwright.sync_api import Page, expect
-from vega_sim.service import VegaService
+from vega_sim.null_service import VegaServiceNull
 from conftest import init_vega
 from fixtures.market import setup_simple_market
 from wallet_config import MM_WALLET
@@ -18,7 +18,7 @@ def vega(request):


@pytest.fixture(scope="module")
-def proposed_market(vega: VegaService):
+def proposed_market(vega: VegaServiceNull):
    # setup market without liquidity provided
    market_id = setup_simple_market(vega, approve_proposal=False)
    # approve market
@@ -1,6 +1,6 @@
 import pytest
 from playwright.sync_api import Page, expect
-from vega_sim.service import VegaService
+from vega_sim.null_service import VegaServiceNull
 from actions.vega import submit_order
 from fixtures.market import setup_simple_market
 from conftest import init_vega
@@ -20,7 +20,7 @@ def simple_market(vega):


@pytest.fixture(scope="module")
-def setup_market_monitoring_auction(vega: VegaService, simple_market):
+def setup_market_monitoring_auction(vega: VegaServiceNull, simple_market):
    vega.submit_liquidity(
        key_name=MM_WALLET.name,
        market_id=simple_market,
@@ -82,7 +82,7 @@ def setup_market_monitoring_auction(vega: VegaService, simple_market):

@pytest.mark.usefixtures("risk_accepted", "auth", "setup_market_monitoring_auction")
 def test_market_monitoring_auction_price_volatility_limit_order(
-    page: Page, simple_market, vega: VegaService
+    page: Page, simple_market, vega: VegaServiceNull
 ):
    page.goto(f"/#/markets/{simple_market}")
    page.get_by_test_id("order-size").clear()
@@ -2,7 +2,8 @@ import pytest
 import re
 import vega_sim.api.governance as governance
 from playwright.sync_api import Page, expect
-from vega_sim.service import VegaService, PeggedOrder
+from vega_sim.null_service import VegaServiceNull
+from vega_sim.service import PeggedOrder
 import vega_sim.api.governance as governance
 from actions.vega import submit_order
 from actions.utils import next_epoch
@@ -10,7 +11,7 @@ from wallet_config import MM_WALLET, MM_WALLET2, GOVERNANCE_WALLET


@pytest.mark.usefixtures("risk_accepted")
-def test_market_lifecycle(proposed_market, vega: VegaService, page: Page):
+def test_market_lifecycle(proposed_market, vega: VegaServiceNull, page: Page):
    # 7002-SORD-001
    # 7002-SORD-002
    trading_mode = page.get_by_test_id("market-trading-mode").get_by_test_id(
@@ -1,7 +1,7 @@
 import pytest
 import re
 from playwright.sync_api import expect, Page
-from vega_sim.service import VegaService
+from vega_sim.null_service import VegaServiceNull
 from actions.vega import submit_order

 order_details = [
@@ -52,7 +52,7 @@ def verify_order_value(
@pytest.mark.skip("tbd")
@pytest.mark.usefixtures("auth", "risk_accepted")
 def test_order_details_are_correctly_displayed(
-    continuous_market, vega: VegaService, page: Page
+    continuous_market, vega: VegaServiceNull, page: Page
 ):
    page.goto(f"/#/markets/{continuous_market}")
    submit_order(vega, "Key 1", vega.all_markets()[0].id, "SIDE_SELL", 102, 101, 2, 1)
@@ -2,7 +2,7 @@ import pytest
 import re
 import logging
 from playwright.sync_api import expect, Page
-from vega_sim.service import VegaService
+from vega_sim.null_service import VegaServiceNull
 from playwright.sync_api import expect
 from actions.vega import submit_order

@@ -16,11 +16,11 @@ def verify_data_grid(page: Page, data_test_id, expected_pattern):
    expect(
        page.locator(
            f'[data-testid^="tab-{data_test_id.lower()}"] >> .ag-center-cols-container .ag-row-first'
-        )
+        ).first
    ).to_be_visible()
    actual_text = page.locator(
        f'[data-testid^="tab-{data_test_id.lower()}"] >> .ag-center-cols-container .ag-row-first'
-    ).text_content()
+    ).first.text_content()
    lines = actual_text.strip().split("\n")
    for expected, actual in zip(expected_pattern, lines):
        # We are using regex so that we can run tests in different timezones.
@@ -38,7 +38,7 @@ def verify_data_grid(page: Page, data_test_id, expected_pattern):
                raise AssertionError(f"Pattern does not match: {expected} != {actual}")


-def submit_order(vega: VegaService, wallet_name, market_id, side, volume, price):
+def submit_order(vega: VegaServiceNull, wallet_name, market_id, side, volume, price):
    vega.submit_order(
        trading_key=wallet_name,
        market_id=market_id,
@@ -52,7 +52,7 @@ def submit_order(vega: VegaService, wallet_name, market_id, side, volume, price)

@pytest.mark.usefixtures("auth", "risk_accepted")
 def test_limit_order_trade_open_order(
-    opening_auction_market, vega: VegaService, page: Page
+    opening_auction_market, vega: VegaServiceNull, page: Page
 ):
    market_id = opening_auction_market
    submit_order(vega, "Key 1", market_id, "SIDE_BUY", 1, 110)
@@ -1,6 +1,7 @@
 import pytest
 from playwright.sync_api import Page, expect
-from vega_sim.service import VegaService, PeggedOrder
+from vega_sim.service import PeggedOrder
+from vega_sim.null_service import VegaServiceNull
 from conftest import auth_setup, init_page, init_vega, risk_accepted_setup
 from fixtures.market import setup_continuous_market, setup_simple_market
 from actions.utils import wait_for_toast_confirmation
@@ -15,7 +16,7 @@ def vega(request):


@pytest.fixture(scope="module", autouse=True)
-def markets(vega: VegaService):
+def markets(vega: VegaServiceNull):
    market_1 = setup_continuous_market(
        vega,
        custom_market_name="market-1",
@@ -357,7 +358,7 @@ def test_order_status_pegged_mid(page: Page):
    )


-def test_order_amend_order(vega: VegaService, page: Page):
+def test_order_amend_order(vega: VegaServiceNull, page: Page):
    #  7002-SORD-053
    #  7003-MORD-012
    #  7003-MORD-014
@@ -377,7 +378,7 @@ def test_order_amend_order(vega: VegaService, page: Page):
    )


-def test_order_cancel_single_order(vega: VegaService, page: Page):
+def test_order_cancel_single_order(vega: VegaServiceNull, page: Page):
    #  7003-MORD-009
    #  7003-MORD-010
    #  7003-MORD-011
@@ -394,7 +395,7 @@ def test_order_cancel_single_order(vega: VegaService, page: Page):
    )


-def test_order_cancel_all_orders(vega: VegaService, page: Page):
+def test_order_cancel_all_orders(vega: VegaServiceNull, page: Page):
    #  7003-MORD-009
    #  7003-MORD-010
    #  7003-MORD-011
@@ -1,7 +1,7 @@
 import pytest
 import re
 from playwright.sync_api import Page, expect
-from vega_sim.service import VegaService
+from vega_sim.null_service import VegaServiceNull
 from vega_sim.service import MarketStateUpdateType
 from datetime import datetime, timedelta
 from conftest import init_vega
@@ -21,7 +21,7 @@ class TestPerpetuals:
            yield vega

    @pytest.fixture(scope="class")
-    def perps_market(self, vega: VegaService):
+    def perps_market(self, vega: VegaServiceNull):
        perps_market = setup_perps_market(vega)
        submit_multiple_orders(
            vega, MM_WALLET.name, perps_market, "SIDE_SELL", [[1, 110], [1, 105]]
@@ -96,7 +96,7 @@ class TestPerpetuals:


@pytest.mark.usefixtures("risk_accepted", "auth")
-def test_perps_market_termination_proposed(page: Page, vega: VegaService):
+def test_perps_market_termination_proposed(page: Page, vega: VegaServiceNull):
    perpetual_market = setup_perps_market(vega)
    page.goto(f"/#/markets/{perpetual_market}")
    vega.update_market_state(
@@ -124,7 +124,7 @@ def test_perps_market_termination_proposed(page: Page, vega: VegaService):


@pytest.mark.usefixtures("risk_accepted", "auth")
-def test_perps_market_terminated(page: Page, vega: VegaService):
+def test_perps_market_terminated(page: Page, vega: VegaServiceNull):
    perpetual_market = setup_perps_market(vega)
    vega.update_market_state(
        proposal_key=MM_WALLET.name,
@@ -1,6 +1,6 @@
 import pytest
 from playwright.sync_api import Page
-from vega_sim.service import VegaService
+from vega_sim.null_service import VegaServiceNull
 from actions.vega import submit_order
 from actions.utils import change_keys

@@ -13,7 +13,7 @@ def check_pnl_color_value(element, expected_color, expected_value):


@pytest.mark.usefixtures("auth", "risk_accepted")
-def test_pnl(continuous_market, vega: VegaService, page: Page):
+def test_pnl(continuous_market, vega: VegaServiceNull, page: Page):
    page.set_viewport_size({"width": 1748, "height": 977})
    submit_order(vega, "Key 1", continuous_market, "SIDE_BUY", 1, 104.50000)
    vega.wait_fn(1)
@@ -1,6 +1,6 @@
 import pytest
 from playwright.sync_api import Page, expect
-from vega_sim.service import VegaService
+from vega_sim.null_service import VegaServiceNull
 from conftest import init_vega
 from fixtures.market import setup_continuous_market

@@ -16,7 +16,7 @@ def vega(request):


@pytest.fixture(scope="module")
-def continuous_market(vega: VegaService):
+def continuous_market(vega: VegaServiceNull):
    return setup_continuous_market(vega)


@@ -1,13 +1,13 @@
 import pytest
 from playwright.sync_api import Page, expect
-from vega_sim.service import VegaService
+from vega_sim.null_service import VegaServiceNull
 from fixtures.market import (
    setup_continuous_market,
 )


@pytest.mark.usefixtures("auth", "risk_accepted")
-def test_closed_market_position(vega: VegaService, page: Page):
+def test_closed_market_position(vega: VegaServiceNull, page: Page):
    market_id = setup_continuous_market(vega)

    vega.submit_termination_and_settlement_data(
@@ -1,6 +1,6 @@
 import pytest
-from playwright.sync_api import Page, expect
-from vega_sim.service import VegaService
+from playwright.sync_api import Page
+from vega_sim.null_service import VegaServiceNull
 from conftest import init_vega
 from fixtures.market import setup_continuous_market, setup_simple_market
 from actions.utils import change_keys, create_and_faucet_wallet, forward_time, selector_contains_text
@@ -72,7 +72,7 @@ def create_staking_tier(minimum_staked_tokens, referral_reward_multiplier):
    }


-def setup_market_and_referral_scheme(vega: VegaService, continuous_market: str, page: Page):
+def setup_market_and_referral_scheme(vega: VegaServiceNull, continuous_market: str, page: Page):
    page.goto(f"/#/markets/{continuous_market}")

    create_and_faucet_wallet(vega=vega, wallet=PARTY_A)
@@ -118,7 +118,7 @@ def setup_market_and_referral_scheme(vega: VegaService, continuous_market: str,


@pytest.mark.usefixtures("page", "auth", "risk_accepted")
-def test_can_traverse_up_and_down_through_tiers(continuous_market, vega: VegaService, page: Page):
+def test_can_traverse_up_and_down_through_tiers(continuous_market, vega: VegaServiceNull, page: Page):
    setup_market_and_referral_scheme(vega, continuous_market, page)
    change_keys(page, vega, PARTY_B.name)
    submit_order(vega, PARTY_B.name, continuous_market, "SIDE_BUY", 1, 115)
@@ -162,7 +162,7 @@ def test_can_traverse_up_and_down_through_tiers(continuous_market, vega: VegaSer


@pytest.mark.usefixtures("page", "auth", "risk_accepted")
-def test_does_not_move_up_tiers_when_not_enough_epochs(continuous_market, vega: VegaService, page: Page):
+def test_does_not_move_up_tiers_when_not_enough_epochs(continuous_market, vega: VegaServiceNull, page: Page):
    setup_market_and_referral_scheme(vega, continuous_market, page)
    change_keys(page, vega, PARTY_B.name)
    submit_order(vega, PARTY_B.name, continuous_market, "SIDE_BUY", 2, 115)
@@ -0,0 +1,36 @@
+import pytest
+from playwright.sync_api import expect, Page
+
+settings_icon = "icon-cog"
+settings_column_btn = "popover-trigger"
+settings_close_btn = "settings-close"
+split_view_view = "split-view-view"
+
+@pytest.mark.usefixtures("page", "continuous_market", "auth", "risk_accepted")
+def test_column_settings_is_visible(continuous_market, page: Page):
+    page.goto(f"/#/markets/{continuous_market}")
+    expect(page.get_by_test_id(split_view_view).get_by_test_id(settings_column_btn)).to_be_visible()
+    page.goto("/#/portfolio")
+    expect(page.get_by_test_id(split_view_view).get_by_test_id(settings_column_btn).nth(0)).to_be_visible()
+    expect(page.get_by_test_id(split_view_view).get_by_test_id(settings_column_btn).nth(1)).to_be_visible()
+    page.goto(f"/#/markets/all")
+    expect(page.get_by_test_id(settings_column_btn)).to_be_visible()
+    page.click('[data-testid="Proposed markets"]')
+    expect(page.get_by_test_id(settings_column_btn)).to_be_visible()
+    page.click('[data-testid="Closed markets"]')
+    expect(page.get_by_test_id(settings_column_btn)).to_be_visible()
+
+@pytest.mark.usefixtures("page", "continuous_market", "auth", "risk_accepted")
+def test_can_reset_columns_state(continuous_market, page: Page):
+    page.goto(f"/#/markets/all")
+    col_market = page.locator('[col-id="tradableInstrument.instrument.code"]').first
+    col_settlement_asset = page.locator('[col-id="tradableInstrument.instrument.product.settlementAsset.symbol"]').first
+    col_market.drag_to(col_settlement_asset)
+
+    # Check the attribute of the dragged element
+    attribute_value = col_market.get_attribute("aria-colindex")
+    assert attribute_value != "1"
+    page.get_by_test_id(settings_column_btn).click()
+    page.get_by_role("button", name="Reset Columns").click()
+    attribute_value_after_reset = col_market.get_attribute("aria-colindex")
+    assert attribute_value_after_reset  == "1"
@@ -1,12 +1,12 @@
 import pytest
 from playwright.sync_api import Page, expect
-from vega_sim.service import VegaService
+from vega_sim.null_service import VegaServiceNull
 from fixtures.market import setup_continuous_market, setup_simple_successor_market


@pytest.fixture
@pytest.mark.usefixtures()
-def successor_market(vega: VegaService):
+def successor_market(vega: VegaServiceNull):
    parent_market_id = setup_continuous_market(vega)
    tdai_id = vega.find_asset_id(symbol="tDAI")
    successor_market_id = setup_simple_successor_market(
@@ -22,7 +22,7 @@ def successor_market(vega: VegaService):
    vega.wait_for_total_catchup()
    return successor_market_id

-
+@pytest.mark.skip("tbd")
@pytest.mark.usefixtures("risk_accepted")
 def test_succession_line(page: Page, successor_market):
    page.goto(f"/#/markets/{successor_market}")
@@ -5,7 +5,7 @@ from playwright.sync_api import expect
 from actions.vega import submit_order
 from conftest import init_vega
 from playwright.sync_api import Page
-from vega_sim.null_service import VegaService
+from vega_sim.null_service import VegaServiceNull

 logger = logging.getLogger()

@@ -47,7 +47,7 @@ def verify_data_grid(page: Page, data_test_id, expected_pattern):

@pytest.mark.usefixtures("auth", "risk_accepted")
 def test_limit_order_new_trade_top_of_list(
-    continuous_market, vega: VegaService, page: Page
+    continuous_market, vega: VegaServiceNull, page: Page
 ):
    submit_order(vega, "Key 1", continuous_market, "SIDE_BUY", 1, 110)
    vega.wait_fn(1)
@@ -1,13 +1,13 @@
 import pytest
 from playwright.sync_api import expect, Page
-from vega_sim.service import VegaService
+from vega_sim.null_service import VegaServiceNull

 from actions.vega import submit_multiple_orders


@pytest.mark.skip("tbd")
@pytest.mark.usefixtures("auth", "risk_accepted")
-def test_trade_match_table(opening_auction_market: str, vega: VegaService, page: Page):
+def test_trade_match_table(opening_auction_market: str, vega: VegaServiceNull, page: Page):
    row_locator = ".ag-center-cols-container .ag-row"
    page.goto(f"/#/markets/{opening_auction_market}")

@@ -2,7 +2,7 @@
 # import re
 # from collections import namedtuple
 # from playwright.sync_api import Page
-# from vega_sim.service import VegaService
+from vega_sim.null_service import VegaServiceNull
 # from actions.vega import submit_order

 # import logging
@@ -14,7 +14,7 @@
 # @pytest.mark.skip("temporary skip")
 # @pytest.mark.parametrize(, [120], indirect=True)
 # @pytest.mark.usefixtures("continuous_market","risk_accepted", "auth")
-# def test_trading_chart(continuous_market, vega: VegaService, page: Page):
+# def test_trading_chart(continuous_market, vega: VegaServiceNull, page: Page):
 #     page.goto(f"/#/markets/{continuous_market}")
 #     vega.forward("24h")
 #     vega.wait_for_total_catchup()
@@ -1,7 +1,7 @@
 import pytest
 import re
 from playwright.sync_api import Page, expect
-from vega_sim.service import VegaService
+from vega_sim.null_service import VegaServiceNull
 from actions.utils import (
    wait_for_toast_confirmation,
    create_and_faucet_wallet,
@@ -18,7 +18,7 @@ PARTY_C = WalletConfig("party_c", "party_c")


@pytest.mark.usefixtures("auth", "risk_accepted")
-def test_transfer_submit(continuous_market, vega: VegaService, page: Page):
+def test_transfer_submit(continuous_market, vega: VegaServiceNull, page: Page):
    # 1003-TRAN-001
    # 1003-TRAN-006
    # 1003-TRAN-007
@@ -64,7 +64,7 @@ def test_transfer_submit(continuous_market, vega: VegaService, page: Page):

@pytest.mark.usefixtures("auth", "risk_accepted")
 def test_transfer_vesting_below_minimum(
-    continuous_market, vega: VegaService, page: Page
+    continuous_market, vega: VegaServiceNull, page: Page
 ):
    vega.update_network_parameter(
        "market_maker",
@@ -2,7 +2,6 @@ import pytest
 import re
 import json
 from playwright.sync_api import Page, expect, Route
-from vega_sim.service import VegaService
 from conftest import init_vega
 from fixtures.market import setup_continuous_market

@@ -29,7 +29,7 @@ const AccountBreakdown = ({
    variables: { partyId, assetId },
    update: ({ data }) => {
      if (gridRef.current?.api && data?.breakdown) {
-        gridRef.current?.api.setRowData(data?.breakdown);
+        gridRef.current?.api.setGridOption('rowData', data?.breakdown);
        return true;
      }
      return false;
@@ -65,18 +65,9 @@ export const DateRangeFilter = forwardRef(
    useImperativeHandle(ref, () => {
      return {
        doesFilterPass(params: IDoesFilterPassParams) {
-          const { api, colDef, column, columnApi, context } = props;
+          const { column } = props;
          const { node } = params;
-          const rowValue = props.valueGetter({
-            api,
-            colDef,
-            column,
-            columnApi,
-            context,
-            data: node.data,
-            getValue: (field) => node.data[field],
-            node,
-          });
+          const rowValue = props.getValue(node, column);
          if (
            value.start &&
            rowValue &&
@@ -19,18 +19,9 @@ export const SetFilter = forwardRef(
    useImperativeHandle(ref, () => {
      return {
        doesFilterPass(params: IDoesFilterPassParams) {
-          const { api, colDef, column, columnApi, context } = props;
+          const { column } = props;
          const { node } = params;
-          const getValue = props.valueGetter({
-            api,
-            colDef,
-            column,
-            columnApi,
-            context,
-            data: node.data,
-            getValue: (field) => node.data[field],
-            node,
-          });
+          const getValue = props.getValue(node, column);
          return Array.isArray(value)
            ? value.includes(getValue)
            : getValue === value;
@@ -61,7 +61,7 @@ describe('useDataGridEvents', () => {

    // column state was not updated, so the default width provided by the
    // col def should be set
-    expect(gridRef?.current?.columnApi.getColumnState()[0].width).toEqual(
+    expect(gridRef?.current?.api.getColumnState()[0].width).toEqual(
      gridProps.columnDefs[0].width
    );
    // no filters set
@@ -107,16 +107,57 @@ describe('useDataGridEvents', () => {
      columnState: [colState],
    };

-    setup(initialState, jest.fn());
+    setup(initialState, jest.fn(), undefined);

    await waitFor(() => {
      expect(gridRef?.current?.api.getFilterModel()['id']).toEqual(idFilter);
-      expect(gridRef?.current?.columnApi.getColumnState()[0]).toEqual(
+      expect(gridRef?.current?.api.getColumnState()[0]).toEqual(
        expect.objectContaining(colState)
      );
    });
  });

+  it('applies default filter model', async () => {
+    const idFilter = {
+      filter: 1,
+      filterType: 'number',
+      type: 'equals',
+    };
+
+    setup({}, jest.fn(), undefined, {
+      id: idFilter,
+    });
+
+    await waitFor(() => {
+      expect(gridRef?.current?.api.getFilterModel()['id']).toEqual(idFilter);
+    });
+  });
+
+  it('default filter overwrites stored filter model', async () => {
+    const idFilter = {
+      filter: 1,
+      filterType: 'number',
+      type: 'equals',
+    };
+
+    setup(
+      {
+        filterModel: {
+          id: { ...idFilter, filter: 2 },
+        },
+      },
+      jest.fn(),
+      undefined,
+      {
+        id: idFilter,
+      }
+    );
+
+    await waitFor(() => {
+      expect(gridRef?.current?.api.getFilterModel()['id']).toEqual(idFilter);
+    });
+  });
+
  it('ignores events that were not made via the UI', async () => {
    const callback = jest.fn();
    const initialState = {
@@ -130,7 +171,7 @@ describe('useDataGridEvents', () => {

    // Set col width multiple times
    await act(async () => {
-      gridRef?.current?.columnApi.setColumnWidth('id', newWidth);
+      gridRef?.current?.api.setColumnWidth('id', newWidth);
    });

    expect(callback).not.toHaveBeenCalled();
@@ -150,14 +191,14 @@ describe('useDataGridEvents', () => {
    };

    const { rerender } = setup(initialState, callback, ['id']);
-    jest.spyOn(gridRef?.current?.columnApi, 'autoSizeColumns');
+    if (gridRef?.current?.api) {
+      jest.spyOn(gridRef?.current?.api, 'autoSizeColumns');
+    }
    rerender(<TestComponent hookParams={[initialState, callback, ['id']]} />);
    act(() => {
-      gridRef?.current?.api.setRowData([{ id: 'test-id' }]);
+      gridRef?.current?.api.setGridOption('rowData', [{ id: 'test-id' }]);
      jest.advanceTimersByTime(GRID_EVENT_DEBOUNCE_TIME);
    });
-    expect(gridRef?.current?.columnApi.autoSizeColumns).toHaveBeenCalledWith([
-      'id',
-    ]);
+    expect(gridRef?.current?.api.autoSizeColumns).toHaveBeenCalledWith(['id']);
  });
 });
@@ -7,8 +7,9 @@ import {
  type FirstDataRenderedEvent,
  type SortChangedEvent,
  type GridReadyEvent,
+  GridApi,
 } from 'ag-grid-community';
-import { useCallback } from 'react';
+import { useCallback, useEffect, useRef } from 'react';

 type State = {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -19,8 +20,32 @@ type State = {
 export const useDataGridEvents = (
  state: State,
  callback: (data: State) => void,
-  autoSizeColumns?: string[]
+  autoSizeColumns?: string[],
+  defaultFilterModel?: State['filterModel']
 ) => {
+  const apiRef = useRef<GridApi | undefined>();
+  const hasStateRef = useRef(Boolean(state.columnState || state.filterModel));
+
+  useEffect(() => {
+    if (apiRef.current?.isDestroyed()) {
+      apiRef.current = undefined;
+    }
+    const hasState = Boolean(state.columnState || state.filterModel);
+    if (apiRef.current && hasStateRef.current && !hasState) {
+      if (!state.columnState) {
+        apiRef.current.resetColumnState();
+        apiRef.current.sizeColumnsToFit();
+        if (autoSizeColumns?.length) {
+          apiRef.current.autoSizeColumns(autoSizeColumns);
+        }
+      }
+      if (!state.filterModel) {
+        apiRef.current.setFilterModel(defaultFilterModel);
+      }
+    }
+    hasStateRef.current = hasState;
+  }, [state, defaultFilterModel, autoSizeColumns]);
+
  /**
   * Callback for filter events
   */
@@ -39,11 +64,7 @@ export const useDataGridEvents = (
   * store callback unnecessarily
   */
  const onDebouncedColumnChange = useCallback(
-    ({
-      columnApi,
-      source,
-      finished,
-    }: ColumnResizedEvent | ColumnMovedEvent) => {
+    ({ api, source, finished }: ColumnResizedEvent | ColumnMovedEvent) => {
      if (!finished) return;

      // only call back on user interactions, and not events triggered from the api
@@ -57,7 +78,7 @@ export const useDataGridEvents = (
        return;
      }

-      const columnState = columnApi.getColumnState();
+      const columnState = api.getColumnState();

      callback({ columnState });
    },
@@ -68,8 +89,8 @@ export const useDataGridEvents = (
   * Callback for sort and visible events
   */
  const onColumnChange = useCallback(
-    ({ columnApi }: SortChangedEvent | ColumnVisibleEvent) => {
-      const columnState = columnApi.getColumnState();
+    ({ api }: SortChangedEvent | ColumnVisibleEvent) => {
+      const columnState = api.getColumnState();
      callback({ columnState });
    },
    [callback]
@@ -80,11 +101,11 @@ export const useDataGridEvents = (
   * State only applied if found, otherwise columns sized to fit available space
   */
  const onGridReady = useCallback(
-    ({ api, columnApi }: GridReadyEvent) => {
-      if (!api || !columnApi) return;
-
+    ({ api }: GridReadyEvent) => {
+      apiRef.current = api;
+      if (!api) return;
      if (state.columnState) {
-        columnApi.applyColumnState({
+        api.applyColumnState({
          state: state.columnState,
          applyOrder: true,
        });
@@ -92,18 +113,18 @@ export const useDataGridEvents = (
        api.sizeColumnsToFit();
      }

-      if (state.filterModel) {
-        api.setFilterModel(state.filterModel);
+      if (state.filterModel || defaultFilterModel) {
+        api.setFilterModel({ ...state.filterModel, ...defaultFilterModel });
      }
    },
-    [state]
+    [state, defaultFilterModel]
  );

  const onFirstDataRendered = useCallback(
-    ({ columnApi }: FirstDataRenderedEvent) => {
-      if (!columnApi) return;
+    ({ api }: FirstDataRenderedEvent) => {
+      if (!api) return;
      if (!state?.columnState && autoSizeColumns?.length) {
-        columnApi.autoSizeColumns(autoSizeColumns);
+        api.autoSizeColumns(autoSizeColumns);
      }
    },
    [state, autoSizeColumns]
@@ -36,7 +36,7 @@ export const FundingPaymentsManager = ({
    dataProvider: fundingPaymentsWithMarketProvider,
    update: ({ data }) => {
      if (data?.length && gridRef.current?.api) {
-        gridRef.current?.api.setRowData(data);
+        gridRef.current?.api.setGridOption('rowData', data);
        return true;
      }
      return false;
@@ -108,7 +108,7 @@
  "The fraction of the insurance pool balance that is carried over from the parent market to the successor.": "The fraction of the insurance pool balance that is carried over from the parent market to the successor.",
  "The ID of the market this market succeeds.": "The ID of the market this market succeeds.",
  "The length of time over which open interest is measured.": "The length of time over which open interest is measured.",
-  "The liquidity price range is a {{{liquidityPriceRange}} difference from the mid price.": "The liquidity price range is a {{{liquidityPriceRange}} difference from the mid price.",
+  "The liquidity price range is a {{liquidityPriceRange}} difference from the mid price.": "The liquidity price range is a {{liquidityPriceRange}} difference from the mid price.",
  "The lower bound for the probability of trading calculation, used to measure liquidity available on a market to determine if LPs are meeting their commitment. This is a network parameter.": "The lower bound for the probability of trading calculation, used to measure liquidity available on a market to determine if LPs are meeting their commitment. This is a network parameter.",
  "The market's liquidity requirement which is derived from the maximum open interest observed over a rolling time window.": "The market's liquidity requirement which is derived from the maximum open interest observed over a rolling time window.",
  "The maximum amount, as a fraction, that an LP's bond can be slashed by if they fail to reach the minimum SLA. This is a network parameter.": "The maximum amount, as a fraction, that an LP's bond can be slashed by if they fail to reach the minimum SLA. This is a network parameter.",
@@ -235,6 +235,7 @@
  "Rejected": "Rejected",
  "Required epochs": "Required epochs",
  "Required for next tier": "Required for next tier",
+  "Reset Columns": "Reset Columns",
  "Resources": "Resources",
  "Rewards": "Rewards",
  "Rewards history": "Rewards history",
@@ -970,7 +970,7 @@ export const LiquidityPriceRangeInfoPanel = ({
      />
      <p className="mb-2 mt-2 border-l-2 pl-2 text-xs">
        {t(
-          'The liquidity price range is a {{{liquidityPriceRange}} difference from the mid price.',
+          'The liquidity price range is a {{liquidityPriceRange}} difference from the mid price.',
          { liquidityPriceRange }
        )}
      </p>
@@ -15,7 +15,7 @@ const Template: ComponentStory<typeof Popover> = (args) => {
    <div>
      <Popover
        open={open}
-        onChange={setOpen}
+        onOpenChange={setOpen}
        trigger={<Button variant="primary">Trigger</Button>}
      >
        {args.children}
@@ -4,29 +4,29 @@ export interface PopoverProps extends PopoverPrimitive.PopoverProps {
  trigger: React.ReactNode | string;
  children: React.ReactNode;
  open?: boolean;
-  onChange?: (open: boolean) => void;
-  sideOffset?: number;
-  alignOffset?: number;
+  sideOffset?: PopoverPrimitive.PopperContentProps['sideOffset'];
+  alignOffset?: PopoverPrimitive.PopperContentProps['alignOffset'];
+  align?: PopoverPrimitive.PopperContentProps['align'];
 }

 export const Popover = ({
  trigger,
  children,
-  open,
-  onChange,
  sideOffset = 17,
  alignOffset = 0,
+  align = 'start',
+  ...props
 }: PopoverProps) => {
  return (
-    <PopoverPrimitive.Root open={open} onOpenChange={(x) => onChange?.(x)}>
+    <PopoverPrimitive.Root {...props}>
      <PopoverPrimitive.Trigger data-testid="popover-trigger">
        {trigger}
      </PopoverPrimitive.Trigger>
      <PopoverPrimitive.Portal>
        <PopoverPrimitive.Content
          data-testid="popover-content"
-          align="start"
-          className="rounded bg-vega-clight-800 dark:bg-vega-cdark-800 text-default border border-default"
+          align={align}
+          className="rounded bg-vega-clight-700 dark:bg-vega-cdark-700 text-default border border-vega-clight-500 dark:border-vega-cdark-500"
          sideOffset={sideOffset}
          alignOffset={alignOffset}
        >
@@ -7,6 +7,9 @@ import {
 import classNames from 'classnames';
 import type { ReactElement, ReactNode } from 'react';
 import { Children, isValidElement, useRef, useState } from 'react';
+import { VegaIcon } from '../icon/vega-icons/vega-icon';
+import { VegaIconNames } from '../icon/vega-icons/vega-icon-record';
+import { Popover } from '../popover/popover';
 export interface TabsProps extends TabsPrimitive.TabsProps {
  children: (ReactElement<TabProps> | null)[];
 }
@@ -18,12 +21,9 @@ export const Tabs = ({
  onValueChange,
  ...props
 }: TabsProps) => {
-  const [activeTab, setActiveTab] = useState<string | undefined>(() => {
-    if (defaultValue) {
-      return defaultValue;
-    }
-    return children.find((v) => v)?.props.id;
-  });
+  const [activeTab, setActiveTab] = useState<string | undefined>(
+    () => value || defaultValue || children.find((v) => v)?.props.id
+  );

  // Bunch of refs in order to detect wrapping in side the tabs so that we
  // can apply a bg color
@@ -42,8 +42,13 @@ export const Tabs = ({
    <TabsPrimitive.Root
      {...props}
      value={value || activeTab}
-      onValueChange={onValueChange || setActiveTab}
-      className="h-full grid grid-rows-[min-content_1fr]"
+      onValueChange={(value) => {
+        setActiveTab(value);
+        if (onValueChange) {
+          onValueChange(value);
+        }
+      }}
+      className="h-full grid grid-rows-[min-content_1fr] relative"
    >
      <div
        ref={wrapperRef}
@@ -87,7 +92,7 @@ export const Tabs = ({
        </TabsPrimitive.List>
        <div
          ref={menuRef}
-          className={classNames('flex-1 p-1', {
+          className={classNames('flex justify-end flex-1 p-1', {
            'bg-vega-clight-700 dark:bg-vega-cdark-700': wrapped,
          })}
        >
@@ -101,12 +106,26 @@ export const Tabs = ({
                })}
              >
                {child.props.menu}
+                {isValidElement(child.props.settings) && (
+                  <Popover
+                    align="end"
+                    trigger={
+                      <span className="flex items-center justify-center h-6 w-6">
+                        <VegaIcon name={VegaIconNames.COG} size={16} />
+                      </span>
+                    }
+                  >
+                    <div className="p-2 lg:p-4 lg:min-w-[290px] flex justify-end">
+                      {child.props.settings}
+                    </div>
+                  </Popover>
+                )}
              </TabsPrimitive.Content>
            );
          })}
        </div>
      </div>
-      <div className="h-full overflow-auto">
+      <div className="relative h-full overflow-auto">
        {Children.map(children, (child) => {
          if (!isValidElement(child) || child.props.hidden) return null;
          return (
@@ -134,6 +153,7 @@ interface TabProps {
  hidden?: boolean;
  overflowHidden?: boolean;
  menu?: ReactNode;
+  settings?: ReactNode;
 }

 export const Tab = ({ children, ...props }: TabProps) => {
@@ -49,8 +49,8 @@
    "@web3-react/metamask": "^8.1.2-beta.0",
    "@web3-react/walletconnect": "8.1.3-beta.0",
    "@web3-react/walletconnect-v2": "^8.1.3-beta.0",
-    "ag-grid-community": "^29.3.5",
-    "ag-grid-react": "^29.3.5",
+    "ag-grid-community": "^31.0.1",
+    "ag-grid-react": "^31.0.1",
    "allotment": "1.19.2",
    "alpha-lyrae": "vegaprotocol/alpha-lyrae",
    "apollo-link-timeout": "^4.0.0",
@@ -16,7 +16,7 @@ bucket_name = ''
 if 'release/' in args.github_ref:
  if 'mainnet-mirror' in args.github_ref:
    env_name = 'mainnet-mirror'
-  if 'validators-testnet' in args.github_ref:
+  elif 'validators-testnet' in args.github_ref or 'validator-testnet' in args.github_ref:
    env_name = 'validators-testnet'
  else:
    # remove prefixing release/ and take the first string limited by - which is supposed to be name of the environment for releasing (format: release/testnet-trading)
@@ -8609,16 +8609,17 @@ aes-js@^3.1.2:
  resolved "https://registry.yarnpkg.com/aes-js/-/aes-js-3.1.2.tgz#db9aabde85d5caabbfc0d4f2a4446960f627146a"
  integrity sha512-e5pEa2kBnBOgR4Y/p20pskXI74UEz7de8ZGVo58asOtvSVG5YAbJeELPZxOmt+Bnz3rX753YKhfIn4X4l1PPRQ==

-ag-grid-community@^29.3.5:
-  version "29.3.5"
-  resolved "https://registry.yarnpkg.com/ag-grid-community/-/ag-grid-community-29.3.5.tgz#16897896d10fa3ecac79279aad50d3aaa17c5f33"
-  integrity sha512-LxUo21f2/CH31ACEs1C7Q/ggGGI1fQPSTB4aY5OThmM+lBkygZ7QszBE8jpfgWOIjvjdtcdIeQbmbjkHeMsA7A==
+ag-grid-community@^31.0.1, ag-grid-community@~31.0.1:
+  version "31.0.1"
+  resolved "https://registry.yarnpkg.com/ag-grid-community/-/ag-grid-community-31.0.1.tgz#26022b29a7b90a0515076837d630ac9cd24cf28d"
+  integrity sha512-RZQlW1DTOJHsUR/tnbnTJQKgAnDlHi05YYyTe5AgNor/1TlX1hoYdcqrGsJjvcHQgTjeEgzWOL0yf+KcqXZzxg==

-ag-grid-react@^29.3.5:
-  version "29.3.5"
-  resolved "https://registry.yarnpkg.com/ag-grid-react/-/ag-grid-react-29.3.5.tgz#0eae8934d372c7751e98789542fc663aee0ad6ad"
-  integrity sha512-Eg0GJ8hEBuxdVaN5g+qITOzhw0MGL9avL0Oaajr+p7QRtq2pIFHLZSknWsCBzUTjidiu75WZMKwlZjtGEuafdQ==
+ag-grid-react@^31.0.1:
+  version "31.0.1"
+  resolved "https://registry.yarnpkg.com/ag-grid-react/-/ag-grid-react-31.0.1.tgz#c7e3cf029ea1b97ab7f1d5134c8bb0086b4d2aac"
+  integrity sha512-9nmYPsgH1YUDUDOTiyaFsysoNAx/y72ovFJKuOffZC1V7OrQMadyP6DbqGFWCqzzoLJOY7azOr51dDQzAIXLpw==
  dependencies:
+    ag-grid-community "~31.0.1"
    prop-types "^15.8.1"

 agent-base@5:
Author	SHA1	Message	Date
Matthew Russell	9be48c987a	Merge branch 'develop' into 5394-pane-settings-view	2023-12-28 09:42:29 +00:00
Bartłomiej Głownia	515932d401	fix(trading): use correct interpolation prefix in market info label (#5537 )	2023-12-27 18:47:19 +00:00
Matthew Russell	8b7ae9bf2e	chore: minor style changes	2023-12-27 18:33:54 +00:00
daro-maj	723ff2805d	chore(trading): check e2e tests issue (#5544 )	2023-12-27 14:07:27 +01:00
Ben	424cced4be	chore(trading): vegaservice import (#5536 )	2023-12-27 08:17:20 +00:00
Daniel	b2c7ee82c5	feat(ci): validators testnet deployment (#5541 )	2023-12-22 18:05:31 +00:00
m.rayandDaniel	4cc63be4f9	chore(trading): update validator testnet pipelines (#5543 ) Co-authored-by: Daniel <daniel.1302@gmail.com>	2023-12-22 18:03:45 +00:00
Dariusz Majcherczyk	71d1183d58	feat(trading): add e2e tests	2023-12-22 09:57:02 +01:00
Bartłomiej Głownia	d774fa6a1d	feat: display table settings in popover	2023-12-21 15:47:46 +01:00
Matthew Russell	8bfdac34c5	chore: styles and refactor of tab setting logic	2023-12-21 12:14:45 +01:00
Bartłomiej Głownia	224481e8d3	feat: resize columns on reset, add setings to markets table	2023-12-21 11:00:22 +01:00
Dariusz Majcherczyk	d82c045a99	feat(trading): fix e2e tests	2023-12-19 13:19:59 +01:00
Bartłomiej Głownia	c8bc2ac9c6	feat: add grid settings to portfolio	2023-12-18 14:24:46 +01:00
Bartłomiej Głownia	4dcb183c71	feat: add grid settings to market page panes	2023-12-15 17:16:37 +01:00
Bartłomiej Głownia	bfb778b58b	chore: upgrade ag-grid	2023-12-15 13:35:07 +01:00
Bartłomiej Głownia	231fc7ddd3	feat(trading): add pane settings view	2023-12-14 13:34:41 +01:00