chore: tidy imports

chore: remove unnecessary spreading of store slice
chore: lint
2023-06-26 14:30:11 -07:00 · 2023-06-26 14:24:41 -07:00 · 2023-06-26 14:20:36 -07:00 · 2023-06-26 14:20:36 -07:00 · 2023-06-26 14:20:36 -07:00 · 2023-06-26 14:20:36 -07:00
107 changed files with 2381 additions and 1337 deletions
@@ -49,7 +49,7 @@ module.exports = defineConfig({
    vegaTokenContractAddress: '0xF41bD86d462D36b997C0bbb4D97a0a3382f205B7',
    vegaTokenAddress: '0x67175Da1D5e966e40D11c4B2519392B2058373de',
    txTimeout: { timeout: 70000 },
-    epochTimeout: { timeout: 10000 },
+    epochTimeout: { timeout: 12000 },
    blockConfirmations: 3,
    grepTags: '@regression @smoke @slow',
    grepFilterSpecs: true,
@@ -0,0 +1,63 @@
+export const previousEpochData = {
+  epoch: {
+    id: '7611',
+    validatorsConnection: {
+      edges: [
+        {
+          node: {
+            id: 'cd96782bc0ad5679869cf69fe7838a92212da7f53b4a214bed68067117494122',
+            stakedTotal: '3154229668720612941799',
+            rewardScore: {
+              rawValidatorScore: '0.2',
+              performanceScore: '1',
+              multisigScore: '0',
+              validatorScore: '0.2',
+              normalisedScore: '0.2007216887087119',
+              validatorStatus: 'VALIDATOR_NODE_STATUS_TENDERMINT',
+              __typename: 'RewardScore',
+            },
+            rankingScore: {
+              status: 'VALIDATOR_NODE_STATUS_TENDERMINT',
+              previousStatus: 'VALIDATOR_NODE_STATUS_TENDERMINT',
+              rankingScore: '0.211713765544955625',
+              stakeScore: '0.2016321576618625',
+              performanceScore: '1',
+              votingPower: '2007',
+              __typename: 'RankingScore',
+            },
+            __typename: 'Node',
+          },
+          __typename: 'NodeEdge',
+        },
+        {
+          node: {
+            id: '887d936f797a47032eceb572a13b69b581d3b1fa595a7d021a3e3cf2a5d2acfd',
+            stakedTotal: '3151161904761904764551',
+            rewardScore: {
+              rawValidatorScore: '0.2',
+              performanceScore: '1',
+              multisigScore: '1',
+              validatorScore: '0.2',
+              normalisedScore: '0.2007216887087119',
+              validatorStatus: 'VALIDATOR_NODE_STATUS_TENDERMINT',
+              __typename: 'RewardScore',
+            },
+            rankingScore: {
+              status: 'VALIDATOR_NODE_STATUS_TENDERMINT',
+              previousStatus: 'VALIDATOR_NODE_STATUS_TENDERMINT',
+              rankingScore: '0.211507855409133255',
+              stakeScore: '0.2014360527706031',
+              performanceScore: '1',
+              votingPower: '2007',
+              __typename: 'RankingScore',
+            },
+            __typename: 'Node',
+          },
+          __typename: 'NodeEdge',
+        },
+      ],
+      __typename: 'NodesConnection',
+    },
+    __typename: 'Epoch',
+  },
+};
@@ -89,8 +89,14 @@ context(
      });
      cy.get(proposalStatus).should('have.text', 'Open');
      voteForProposal('for');
-      cy.get(proposalStatus, proposalTimeout).should('have.text', 'Passed');
-      cy.get(proposalStatus, proposalTimeout).should('have.text', 'Enacted');
+      cy.get(proposalStatus, proposalTimeout)
+        .should('have.text', 'Passed')
+        .then(() => {
+          cy.get(proposalStatus, proposalTimeout).should(
+            'have.text',
+            'Enacted'
+          );
+        });
      cy.get(votesTable).within(() => {
        cy.contains('Vote passed.').should('be.visible');
        cy.contains('Voting has ended.').should('be.visible');
@@ -130,7 +130,7 @@ context(
      createRawProposal();
    });

-    it.skip('Creating a proposal - proposal rejected - when closing time sooner than system default', function () {
+    it('Creating a proposal - proposal rejected - when closing time sooner than system default', function () {
      goToMakeNewProposal(governanceProposalType.FREEFORM);
      enterUniqueFreeFormProposalBody('0.1', generateFreeFormProposalTitle());
      cy.get('input:invalid')
@@ -138,7 +138,7 @@ context(
        .should('equal', 'Value must be greater than or equal to 1.');
    });

-    it.skip('Creating a proposal - proposal rejected - when closing time later than system default', function () {
+    it('Creating a proposal - proposal rejected - when closing time later than system default', function () {
      goToMakeNewProposal(governanceProposalType.FREEFORM);
      enterUniqueFreeFormProposalBody(
        '100000',
@@ -8,6 +8,7 @@ import {
 } from '../../support/common.functions';
 import {
  getDownloadedProposalJsonPath,
+  getProposalFromTitle,
  submitUniqueRawProposal,
 } from '../../support/governance.functions';
 import {
@@ -55,7 +56,8 @@ const feedbackError = '[data-testid="Error"]';
 const viewProposalBtn = 'view-proposal-btn';
 const liquidityVoteStatus = 'liquidity-votes-status';
 const tokenVoteStatus = 'token-votes-status';
-const proposalTermsSection = 'proposal';
+const proposalJsonToggle = 'proposal-json-toggle';
+const proposalJsonSection = 'proposal-json';
 const vegaWalletPublicKey = Cypress.env('vegaWalletPublicKey');
 const fUSDCId =
  '816af99af60d684502a40824758f6b5377e6af48e50a9ee8ef478ecb879ea8bc';
@@ -186,7 +188,7 @@ context(
      cy.get(maxVoteDeadline).click();
      cy.get(enactmentDeadlineError).should(
        'have.text',
-        'Proposal will fail if enactment is earlier than the voting deadline'
+        'The proposal will fail if enactment is earlier than the voting deadline'
      );
      cy.get(proposalDownloadBtn)
        .should('be.visible')
@@ -210,6 +212,7 @@ context(
      'Able to submit valid new market proposal',
      { tags: '@smoke' },
      function () {
+        const proposalTitle = 'Test new market proposal';
        goToMakeNewProposal(governanceProposalType.NEW_MARKET);
        cy.get(newProposalTitle).type('Test new market proposal');
        cy.get(newProposalDescription).type('E2E test for proposals');
@@ -231,6 +234,23 @@ context(
              submitUniqueRawProposal({ proposalBody: filePath }); // 3003-PMAN-003
            });
          });
+        navigateTo(navigation.proposals);
+        getProposalFromTitle(proposalTitle).within(() =>
+          cy.getByTestId('view-proposal-btn').click()
+        );
+        cy.getByTestId('proposal-market-data').within(() => {
+          cy.getByTestId('proposal-market-data-toggle').click();
+          cy.contains('Key details').click();
+          getMarketProposalDetailsFromTable('Name').should(
+            'have.text',
+            'Token test market'
+          );
+          cy.contains('Settlement asset').click();
+          // Settlement asset symbol
+          cy.getByTestId('3_value').should('have.text', 'fBTC');
+          cy.contains('Oracle').click();
+          cy.getByTestId('oracle-spec-links').should('have.attr', 'href');
+        });
      }
    );

@@ -454,8 +474,8 @@ context(
        .within(() => {
          cy.getByTestId(viewProposalBtn).click();
        });
-      cy.getByTestId('proposal-terms-toggle').click();
-      cy.getByTestId(proposalTermsSection).within(() => {
+      cy.getByTestId(proposalJsonToggle).click();
+      cy.getByTestId(proposalJsonSection).within(() => {
        cy.contains('USDT Coin').should('be.visible');
        cy.contains('USDT').should('be.visible');
      });
@@ -501,13 +521,11 @@ context(
        .invoke('text')
        .should('not.be.empty');
      // 3001-VOTE-030 3001-VOTE-031
-      cy.getByTestId('proposal-terms-toggle').click();
-      cy.getByTestId('proposal-terms').within(() => {
-        getProposalInformationFromTable('assetId').should('have.text', assetId);
-        getProposalInformationFromTable('lifetimeLimit').should(
-          'have.text',
-          '10'
-        );
+      cy.getByTestId(proposalJsonToggle).click();
+      cy.getByTestId(proposalJsonSection).within(() => {
+        cy.contains(assetId).should('be.visible');
+        cy.contains('lifetimeLimit').should('be.visible');
+        cy.contains('10').should('be.visible');
      });
    });

@@ -605,5 +623,13 @@ context(
        });
      });
    }
+
+    function getMarketProposalDetailsFromTable(heading: string) {
+      return cy
+        .getByTestId('key-value-table-row')
+        .contains(heading)
+        .parent()
+        .siblings();
+    }
  }
 );
@@ -58,8 +58,6 @@ context(
    before('visit staking tab and connect vega wallet', function () {
      cy.visit('/');
      ethereumWalletConnect();
-      // this is a workaround for #2422 which can be removed once issue is resolved
-      cy.associateTokensToVegaWallet('4');
      vegaWalletSetSpecifiedApprovalAmount('1000');
    });

@@ -1,5 +1,6 @@
 /// <reference types="cypress" />

+import { aliasGQLQuery } from '@vegaprotocol/cypress';
 import {
  navigation,
  verifyPageHeader,
@@ -9,6 +10,7 @@ import {
  clickOnValidatorFromList,
  waitForBeginningOfEpoch,
 } from '../../support/staking.functions';
+import { previousEpochData } from '../../fixtures/mocks/previous-epoch';

 const guideLink = '[data-testid="staking-guide-link"]';
 const validatorTitle = '[data-testid="validator-node-title"]';
@@ -30,7 +32,7 @@ const normalisedVotingPowerToolTip =
  '[data-testid="normalised-voting-power-tooltip"]';
 const performancePenaltyToolTip = '[data-testid="performance-penalty-tooltip"]';
 const overstakedPenaltyToolTip = '[data-testid="overstaked-penalty-tooltip"]';
-const totalPenaltyToolTip = '[data-testid="total-penalty-tooltip"]';
+const multisigPenaltyToolTip = '[data-testid="multisig-error-tooltip"]';
 const epochCountDown = '[data-testid="epoch-countdown"]';
 const stakeNumberRegex = /^\d{1,3}(,\d{3})*(\.\d+)?$/;

@@ -143,9 +145,6 @@ context('Validators Page - verify elements on page', function () {
        cy.get(overstakedPenaltyToolTip)
          .invoke('text')
          .should('contain', 'Overstaked penalty: 60.00%'); // value not asserted due to #2886
-        cy.get(totalPenaltyToolTip)
-          .invoke('text')
-          .should('contain', 'Total penalties: 60.00%');
      });

      it('Should be able to see validator pending stake', function () {
@@ -155,6 +154,22 @@ context('Validators Page - verify elements on page', function () {
            cy.wrap($pendingStake).should('contain.text', '0.00');
          });
      });
+
+      it('Should be able to see multisig error', function () {
+        cy.mockGQL((req) => {
+          aliasGQLQuery(req, 'PreviousEpoch', previousEpochData);
+        });
+        waitForBeginningOfEpoch();
+        cy.getByTestId('total-penalty').first().realHover();
+        cy.get(multisigPenaltyToolTip)
+          .invoke('text')
+          .should('contain', 'Multisig penalty: 100%');
+
+        cy.getByTestId('total-penalty').eq(1).realHover();
+        cy.get(multisigPenaltyToolTip)
+          .invoke('text')
+          .should('contain', 'Multisig penalty: 100%');
+      });
    }
  );

@@ -287,28 +287,28 @@ context(
            name: 'USDC (fake)',
            symbol: 'fUSDC',
            amount: '1000000',
-            expectedAmount: '10.00',
+            expectedAmount: 10.0,
          },
          {
            id: '8566db7257222b5b7ef2886394ad28b938b28680a54a169bbc795027b89d6665',
            name: 'DAI (fake)',
            symbol: 'fDAI',
            amount: '200000',
-            expectedAmount: '2.00',
+            expectedAmount: 2.0,
          },
          {
            id: '73174a6fb1d5802ba0ac7bd7ab79e0a3a4837b262de0a4e80815a55442692bd0',
            name: 'BTC (fake)',
            symbol: 'fBTC',
            amount: '600000',
-            expectedAmount: '6.00',
+            expectedAmount: 6.0,
          },
          {
            id: 'e02d4c15d790d1d2dffaf2dcd1cf06a1fe656656cf4ed18c8ce99f9e83643567',
            name: 'EURO (fake)',
            symbol: 'fEURO',
            amount: '800000',
-            expectedAmount: '8.00',
+            expectedAmount: 8.0,
          },
        ];

@@ -319,12 +319,6 @@ context(
          cy.reload();
          waitForSpinner();
          cy.connectVegaWallet();
-          cy.get(walletContainer).within(() => {
-            cy.getByTestId('currency-title', txTimeout).should(
-              'have.length.at.least',
-              5
-            );
-          });
        });

        for (const { name, symbol, expectedAmount } of assets) {
@@ -338,10 +332,10 @@ context(
                .contains(name)
                .parent()
                .siblings()
-                .invoke('text')
-                .should('have.length.at.least', 4)
-                .then(parseFloat)
-                .should('be.gte', parseFloat(expectedAmount));
+                .then((elementAmount) => {
+                  const displayedAmount = parseFloat(elementAmount.text());
+                  expect(displayedAmount).be.gte(expectedAmount);
+                });

              cy.get(vegaWalletCurrencyTitle)
                .contains(name)
@@ -37,7 +37,7 @@ export function navigateTo(page: navigation) {
      });
  } else {
    return cy.get(navigation.section, { timeout: 10000 }).within(() => {
-      cy.get(page).eq(0).click();
+      cy.get(page).eq(0).click({ force: true });
    });
  }
 }
@@ -786,6 +786,7 @@
  "performancePenalty": "Performance penalty",
  "overstaked": "Overstaked",
  "overstakedPenalty": "Overstaked penalty",
+  "multisigPenalty": "Multisig penalty",
  "homeProposalsIntro": "Decisions on the Vega network are on-chain, with tokenholders creating proposals that other tokenholders vote to approve or reject. Network upgrades are proposed and approved by validators.",
  "homeProposalsButtonText": "Browse, vote, and propose",
  "homeValidatorsIntro": "Vega runs on a delegated proof of stake blockchain, where validators earn fees for validating block transactions. Tokenholders can nominate validators by staking tokens to them.",
@@ -36,6 +36,7 @@ import {
  toBigNum,
 } from '@vegaprotocol/utils';
 import { VALIDATOR_LOGO_MAP } from './logo-map';
+import { getMultisigStatusInfo } from '../../../../lib/get-multisig-status-info';

 interface CanonisedConsensusNodeProps {
  id: string;
@@ -137,6 +138,10 @@ export const ConsensusValidatorsTable = ({
    [totalStake]
  );

+  const multisigStatus = previousEpochData
+    ? getMultisigStatusInfo(previousEpochData)
+    : undefined;
+
  const allNodesInPreviousEpoch = removePaginationWrapper(
    previousEpochData?.epoch.validatorsConnection?.edges
  );
@@ -223,6 +228,8 @@ export const ConsensusValidatorsTable = ({
            [ValidatorFields.USER_STAKE_SHARE]: userStakeShare
              ? formatNumberPercentage(new BigNumber(userStakeShare), 2)
              : undefined,
+            [ValidatorFields.MULTISIG_ERROR]:
+              multisigStatus?.showMultisigStatusError,
          };
        }
      );
@@ -332,6 +339,7 @@ export const ConsensusValidatorsTable = ({
    data,
    decimals,
    hideTopThird,
+    multisigStatus?.showMultisigStatusError,
    previousEpochData,
    thirdOfTotalStake,
    validatorsView,
@@ -39,6 +39,7 @@ export enum ValidatorFields {
  STAKED_BY_USER = 'stakedByUser',
  PENDING_USER_STAKE = 'pendingUserStake',
  USER_STAKE_SHARE = 'userStakeShare',
+  MULTISIG_ERROR = 'multisigError',
 }

 export const addUserDataToValidator = (
@@ -326,6 +327,7 @@ interface TotalPenaltiesRendererProps {
    overstakedAmount: string;
    overstakingPenalty: string;
    totalPenalties: string;
+    multisigError?: boolean;
  };
 }

@@ -344,10 +346,11 @@ export const TotalPenaltiesRenderer = ({
          <div data-testid="overstaked-penalty-tooltip">
            {t('overstakedPenalty')}: {data.overstakingPenalty}
          </div>
-          <div data-testid="total-penalty-tooltip">
-            {t('totalPenalties')}:{' '}
-            <span className="font-bold">{data.totalPenalties}</span>
-          </div>
+          {data.multisigError && (
+            <div data-testid="multisig-error-tooltip">
+              {t('multisigPenalty')}: 100%
+            </div>
+          )}
        </>
      }
    >
@@ -0,0 +1,15 @@
+describe('charts', { tags: '@smoke' }, () => {
+  before(() => {
+    cy.mockTradingPage();
+    cy.mockSubscription();
+    cy.visit('/#/markets/market-0');
+    cy.wait('@Markets');
+    cy.getByTestId('Depth').click();
+  });
+
+  it('can see market depth chart', () => {
+    // 6006-DEPC-001
+    cy.getByTestId('tab-depth').should('be.visible');
+    cy.get('.depth-chart-module_canvas__260De').should('be.visible');
+  });
+});
@@ -182,7 +182,7 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
      .contains('Liquidity monitoring parameters')
      .click();

-    validateMarketDataRow(0, 'Triggering Ratio', '0');
+    validateMarketDataRow(0, 'Triggering Ratio', '0.7');
    validateMarketDataRow(1, 'Time Window', '3,600');
    validateMarketDataRow(2, 'Scaling Factor', '10');
  });
@@ -1,5 +1,4 @@
-import { checkSorting } from '@vegaprotocol/cypress';
-import { aliasGQLQuery } from '@vegaprotocol/cypress';
+import { checkSorting, aliasGQLQuery } from '@vegaprotocol/cypress';
 import { marketsDataQuery } from '@vegaprotocol/mock';
 import { positionsQuery } from '@vegaprotocol/mock';

@@ -15,13 +14,12 @@ const toastContent = 'toast-content';
 const tooltipContent = 'tooltip-content';
 // #endregion

-beforeEach(() => {
-  cy.mockTradingPage();
-  cy.mockSubscription();
-  cy.setVegaWallet();
-});
-
 describe('positions', { tags: '@smoke', testIsolation: true }, () => {
+  beforeEach(() => {
+    cy.mockTradingPage();
+    cy.mockSubscription();
+    cy.setVegaWallet();
+  });
  it('renders positions on trading page', () => {
    visitAndClickPositions();
    // 7004-POSI-001
@@ -64,7 +62,14 @@ describe('positions', { tags: '@smoke', testIsolation: true }, () => {
    );
  });
 });
+
 describe('positions', { tags: '@regression', testIsolation: true }, () => {
+  beforeEach(() => {
+    cy.mockTradingPage();
+    cy.mockSubscription();
+    cy.setVegaWallet();
+  });
+
  it('rows should be displayed despite errors', () => {
    const errors = [
      {
@@ -164,8 +169,9 @@ describe('positions', { tags: '@regression', testIsolation: true }, () => {
    );
  });

+  // let elementWidth: number;
+
  it('Resize column', () => {
-    let elementWidth: number;
    visitAndClickPositions();
    cy.get('.ag-overlay-loading-wrapper').should('not.be.visible');
    cy.get('.ag-header-container').within(() => {
@@ -180,29 +186,33 @@ describe('positions', { tags: '@regression', testIsolation: true }, () => {
    cy.get(`[col-id="marketName"]`)
      .invoke('width')
      .should('be.greaterThan', 250);
-    cy.get(`[col-id="marketName"]`)
-      .invoke('width')
-      .then((width) => {
-        elementWidth = width as number;
-      })
-      .then(() => {
-        let localStorageCopy: Record<string, string>;
-        cy.window().then((win) => {
-          localStorageCopy = { ...win.localStorage };
-        });
+  });

-        cy.reload();
-        cy.window().then((win) => {
-          Object.keys(localStorageCopy).forEach((key) => {
-            win.localStorage.setItem(key, localStorageCopy[key]);
-          });
-        });
+  // This test depends on the previous one
+  it('Has persisted column widths', () => {
+    const width = 400;

-        // 7004-POSI-012
-        cy.get('[col-id="marketName"]')
-          .invoke('width')
-          .should('equal', elementWidth);
-      });
+    cy.window().then((win) => {
+      win.localStorage.setItem(
+        'vega_positions_store',
+        JSON.stringify({
+          state: {
+            gridStore: {
+              columnState: [{ colId: 'marketName', width }],
+            },
+          },
+        })
+      );
+    });
+
+    visitAndClickPositions();
+
+    // 7004-POSI-012
+    cy.get('.ag-center-cols-container .ag-row')
+      .first()
+      .find('[col-id="marketName"]')
+      .invoke('outerWidth')
+      .should('equal', width);
  });

  it('Scroll horizontally', () => {
@@ -291,6 +301,7 @@ describe('positions', { tags: '@regression', testIsolation: true }, () => {
    cy.getByTestId(dialogContent).should('be.visible');
  });
 });
+
 function validatePositionsDisplayed(multiKey = false) {
  cy.getByTestId('tab-positions').should('be.visible');
  cy.getByTestId('tab-positions')
@@ -326,6 +337,7 @@ function validatePositionsDisplayed(multiKey = false) {

  cy.getByTestId('close-position').should('be.visible').and('have.length', 3);
 }
+
 function assertPNLColor(
  pnlSelector: string,
  positiveClass: string,
@@ -347,6 +359,7 @@ function assertPNLColor(
    }
  });
 }
+
 function visitAndClickPositions() {
  cy.visit('/#/markets/market-0');
  cy.getByTestId(positions).click();
@@ -1,7 +1,5 @@
 import {
  matchFilter,
-  liquidityProvisionsDataProvider,
-  LiquidityTable,
  lpAggregatedDataProvider,
  useCheckLiquidityStatus,
 } from '@vegaprotocol/liquidity';
@@ -24,18 +22,16 @@ import {
  ExternalLink,
 } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import { memo, useEffect, useRef, useState } from 'react';
+import { memo, useEffect, useState } from 'react';

 import { Header, HeaderStat, HeaderTitle } from '../../components/header';

-import type { AgGridReact } from 'ag-grid-react';
-
-import type { Filter } from '@vegaprotocol/liquidity';
 import { Link, useParams } from 'react-router-dom';
 import { Links, Routes } from '../../pages/client-router';

 import { useMarket, useStaticMarketData } from '@vegaprotocol/markets';
 import { DocsLinks } from '@vegaprotocol/environment';
+import { LiquidityContainer } from '../../components/liquidity-container';

 const enum LiquidityTabs {
  Active = 'active',
@@ -49,65 +45,6 @@ export const Liquidity = () => {
  return <LiquidityViewContainer marketId={marketId} />;
 };

-const useReloadLiquidityData = (marketId: string | undefined) => {
-  const { reload } = useDataProvider({
-    dataProvider: liquidityProvisionsDataProvider,
-    variables: { marketId: marketId || '' },
-    update: () => true,
-    skip: !marketId,
-  });
-  useEffect(() => {
-    const interval = setInterval(reload, 30000);
-    return () => clearInterval(interval);
-  }, [reload]);
-};
-
-export const LiquidityContainer = ({
-  marketId,
-  filter,
-}: {
-  marketId: string | undefined;
-  filter?: Filter;
-}) => {
-  const gridRef = useRef<AgGridReact | null>(null);
-  const { data: market } = useMarket(marketId);
-
-  // To be removed when liquidityProvision subscriptions are working
-  useReloadLiquidityData(marketId);
-
-  const { data, error } = useDataProvider({
-    dataProvider: lpAggregatedDataProvider,
-    variables: { marketId: marketId || '', filter },
-    skip: !marketId,
-  });
-
-  const assetDecimalPlaces =
-    market?.tradableInstrument.instrument.product.settlementAsset.decimals || 0;
-  const quantum =
-    market?.tradableInstrument.instrument.product.settlementAsset.quantum || 0;
-  const symbol =
-    market?.tradableInstrument.instrument.product.settlementAsset.symbol;
-
-  const { params } = useNetworkParams([
-    NetworkParams.market_liquidity_stakeToCcyVolume,
-  ]);
-  const stakeToCcyVolume = params.market_liquidity_stakeToCcyVolume;
-
-  return (
-    <div className="h-full relative">
-      <LiquidityTable
-        ref={gridRef}
-        rowData={data}
-        symbol={symbol}
-        assetDecimalPlaces={assetDecimalPlaces}
-        quantum={quantum}
-        stakeToCcyVolume={stakeToCcyVolume}
-        overlayNoRowsTemplate={error ? error.message : t('No data')}
-      />
-    </div>
-  );
-};
-
 const LiquidityViewHeader = memo(({ marketId }: { marketId?: string }) => {
  const { data: market } = useMarket(marketId);
  const { data: marketData } = useStaticMarketData(marketId);
@@ -8,7 +8,7 @@ import {
  VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
 import type { CSSProperties } from 'react';
-import { useState } from 'react';
+import { useCallback, useState, useMemo } from 'react';
 import { Link } from 'react-router-dom';
 import { FixedSizeList } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -184,7 +184,6 @@ const MarketList = ({
  if (error) {
    return <div>{error.message}</div>;
  }
-
  return (
    <AutoSizer>
      {({ width, height }) => (
@@ -204,6 +203,29 @@ const MarketList = ({
  );
 };

+interface ListItemData {
+  data: MarketMaybeWithDataAndCandles[];
+  onSelect?: (marketId: string) => void;
+  currentMarketId?: string;
+}
+
+const ListItem = ({
+  index,
+  style,
+  data,
+}: {
+  index: number;
+  style: CSSProperties;
+  data: ListItemData;
+}) => (
+  <MarketSelectorItem
+    market={data.data[index]}
+    currentMarketId={data.currentMarketId}
+    style={style}
+    onSelect={data.onSelect}
+  />
+);
+
 const List = ({
  data,
  loading,
@@ -212,28 +234,20 @@ const List = ({
  onSelect,
  noItems,
  currentMarketId,
-}: {
-  data: MarketMaybeWithDataAndCandles[];
+}: ListItemData & {
  loading: boolean;
  width: number;
  height: number;
  noItems: string;
-  onSelect?: (marketId: string) => void;
-  currentMarketId?: string;
 }) => {
-  const row = ({ index, style }: { index: number; style: CSSProperties }) => {
-    const market = data[index];
-
-    return (
-      <MarketSelectorItem
-        market={market}
-        currentMarketId={currentMarketId}
-        style={style}
-        onSelect={onSelect}
-      />
-    );
-  };
-
+  const itemKey = useCallback(
+    (index: number, data: ListItemData) => data.data[index].id,
+    []
+  );
+  const itemData = useMemo(
+    () => ({ data, onSelect, currentMarketId }),
+    [data, onSelect, currentMarketId]
+  );
  if (!data || loading) {
    return (
      <div style={{ width, height }}>
@@ -259,11 +273,13 @@ const List = ({
    <FixedSizeList
      className="virtualized-list"
      itemCount={data.length}
+      itemData={itemData}
      itemSize={130}
+      itemKey={itemKey}
      width={width}
      height={height}
    >
-      {row}
+      {ListItem}
    </FixedSizeList>
  );
 };
@@ -19,10 +19,7 @@ import {
  VegaIcon,
  VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
-import {
-  useMarketClickHandler,
-  useMarketLiquidityClickHandler,
-} from '../../lib/hooks/use-market-click-handler';
+import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
 import { VegaWalletContainer } from '../../components/vega-wallet-container';
 import { HeaderTitle } from '../../components/header';
 import {
@@ -49,7 +46,6 @@ const MarketBottomPanel = memo(
    const [sizes, handleOnLayoutChange] = usePaneLayout({ id: 'bottom' });
    const { screenSize } = useScreenDimensions();
    const onMarketClick = useMarketClickHandler(true);
-    const onOrderTypeClick = useMarketLiquidityClickHandler();

    return 'xxxl' === screenSize ? (
      <ResizableGrid
@@ -69,10 +65,6 @@ const MarketBottomPanel = memo(
                  <TradingViews.orders.component
                    marketId={marketId}
                    filter={Filter.Open}
-                    onMarketClick={onMarketClick}
-                    onOrderTypeClick={onOrderTypeClick}
-                    enforceBottomPlaceholder
-                    storeKey="marketOpenOrders"
                  />
                </VegaWalletContainer>
              </Tab>
@@ -81,10 +73,6 @@ const MarketBottomPanel = memo(
                  <TradingViews.orders.component
                    marketId={marketId}
                    filter={Filter.Closed}
-                    onMarketClick={onMarketClick}
-                    onOrderTypeClick={onOrderTypeClick}
-                    enforceBottomPlaceholder
-                    storeKey="marketClosedOrders"
                  />
                </VegaWalletContainer>
              </Tab>
@@ -93,22 +81,12 @@ const MarketBottomPanel = memo(
                  <TradingViews.orders.component
                    marketId={marketId}
                    filter={Filter.Rejected}
-                    onMarketClick={onMarketClick}
-                    onOrderTypeClick={onOrderTypeClick}
-                    enforceBottomPlaceholder
-                    storeKey="marketRejectOrders"
                  />
                </VegaWalletContainer>
              </Tab>
              <Tab id="orders" name={t('All')}>
                <VegaWalletContainer>
-                  <TradingViews.orders.component
-                    marketId={marketId}
-                    onMarketClick={onMarketClick}
-                    onOrderTypeClick={onOrderTypeClick}
-                    enforceBottomPlaceholder
-                    storeKey="marketAllOrders"
-                  />
+                  <TradingViews.orders.component marketId={marketId} />
                </VegaWalletContainer>
              </Tab>
              <Tab id="fills" name={t('Fills')}>
@@ -116,7 +94,6 @@ const MarketBottomPanel = memo(
                  <TradingViews.fills.component
                    marketId={marketId}
                    onMarketClick={onMarketClick}
-                    storeKey="marketFills"
                  />
                </VegaWalletContainer>
              </Tab>
@@ -134,8 +111,6 @@ const MarketBottomPanel = memo(
                <VegaWalletContainer>
                  <TradingViews.positions.component
                    onMarketClick={onMarketClick}
-                    noBottomPlaceholder
-                    storeKey="marketPositions"
                  />
                </VegaWalletContainer>
              </Tab>
@@ -145,7 +120,6 @@ const MarketBottomPanel = memo(
                    pinnedAsset={pinnedAsset}
                    onMarketClick={onMarketClick}
                    hideButtons
-                    storeKey="marketCollateral"
                  />
                </VegaWalletContainer>
              </Tab>
@@ -158,10 +132,7 @@ const MarketBottomPanel = memo(
        <Tabs storageKey="console-trade-grid-bottom">
          <Tab id="positions" name={t('Positions')}>
            <VegaWalletContainer>
-              <TradingViews.positions.component
-                onMarketClick={onMarketClick}
-                storeKey="marketPositions"
-              />
+              <TradingViews.positions.component onMarketClick={onMarketClick} />
            </VegaWalletContainer>
          </Tab>
          <Tab id="open-orders" name={t('Open')}>
@@ -169,10 +140,6 @@ const MarketBottomPanel = memo(
              <TradingViews.orders.component
                marketId={marketId}
                filter={Filter.Open}
-                onMarketClick={onMarketClick}
-                onOrderTypeClick={onOrderTypeClick}
-                enforceBottomPlaceholder
-                storeKey="marketOpenOrders"
              />
            </VegaWalletContainer>
          </Tab>
@@ -181,10 +148,6 @@ const MarketBottomPanel = memo(
              <TradingViews.orders.component
                marketId={marketId}
                filter={Filter.Closed}
-                onMarketClick={onMarketClick}
-                onOrderTypeClick={onOrderTypeClick}
-                enforceBottomPlaceholder
-                storeKey="marketClosedOrders"
              />
            </VegaWalletContainer>
          </Tab>
@@ -193,22 +156,12 @@ const MarketBottomPanel = memo(
              <TradingViews.orders.component
                marketId={marketId}
                filter={Filter.Rejected}
-                onMarketClick={onMarketClick}
-                onOrderTypeClick={onOrderTypeClick}
-                enforceBottomPlaceholder
-                storeKey="marketRejectedOrders"
              />
            </VegaWalletContainer>
          </Tab>
          <Tab id="orders" name={t('All')}>
            <VegaWalletContainer>
-              <TradingViews.orders.component
-                marketId={marketId}
-                onMarketClick={onMarketClick}
-                onOrderTypeClick={onOrderTypeClick}
-                enforceBottomPlaceholder
-                storeKey="marketAllOrders"
-              />
+              <TradingViews.orders.component marketId={marketId} />
            </VegaWalletContainer>
          </Tab>
          <Tab id="fills" name={t('Fills')}>
@@ -216,7 +169,6 @@ const MarketBottomPanel = memo(
              <TradingViews.fills.component
                marketId={marketId}
                onMarketClick={onMarketClick}
-                storeKey="marketFills"
              />
            </VegaWalletContainer>
          </Tab>
@@ -226,7 +178,6 @@ const MarketBottomPanel = memo(
                pinnedAsset={pinnedAsset}
                onMarketClick={onMarketClick}
                hideButtons
-                storeKey="marketCollateral"
              />
            </VegaWalletContainer>
          </Tab>
@@ -1,18 +1,19 @@
+import type { ComponentProps } from 'react';
+import { Splash } from '@vegaprotocol/ui-toolkit';
 import { DealTicketContainer } from '@vegaprotocol/deal-ticket';
 import { MarketInfoAccordionContainer } from '@vegaprotocol/markets';
-import { OrderbookContainer } from '@vegaprotocol/market-depth';
-import { OrderListContainer, Filter } from '@vegaprotocol/orders';
-import type { OrderListContainerProps } from '@vegaprotocol/orders';
-import { FillsContainer } from '@vegaprotocol/fills';
-import { PositionsContainer } from '@vegaprotocol/positions';
 import { TradesContainer } from '@vegaprotocol/trades';
-import type { ComponentProps } from 'react';
 import { DepthChartContainer } from '@vegaprotocol/market-depth';
 import { CandlesChartContainer } from '@vegaprotocol/candles-chart';
-import { Splash } from '@vegaprotocol/ui-toolkit';
-import { AccountsContainer } from '../../components/accounts-container';
+import { OrderbookContainer } from '@vegaprotocol/market-depth';
+import { Filter } from '@vegaprotocol/orders';
 import { NO_MARKET } from './constants';
-import { LiquidityContainer } from '../liquidity/liquidity';
+import { FillsContainer } from '../../components/fills-container';
+import { PositionsContainer } from '../../components/positions-container';
+import { AccountsContainer } from '../../components/accounts-container';
+import { LiquidityContainer } from '../../components/liquidity-container';
+import type { OrderContainerProps } from '../../components/orders-container';
+import { OrdersContainer } from '../../components/orders-container';

 type MarketDependantView =
  | typeof CandlesChartContainer
@@ -65,25 +66,25 @@ export const TradingViews = {
  positions: { label: 'Positions', component: PositionsContainer },
  activeOrders: {
    label: 'Active',
-    component: (props: OrderListContainerProps) => (
-      <OrderListContainer {...props} filter={Filter.Open} />
+    component: (props: OrderContainerProps) => (
+      <OrdersContainer {...props} filter={Filter.Open} />
    ),
  },
  closedOrders: {
    label: 'Closed',
-    component: (props: OrderListContainerProps) => (
-      <OrderListContainer {...props} filter={Filter.Closed} />
+    component: (props: OrderContainerProps) => (
+      <OrdersContainer {...props} filter={Filter.Closed} />
    ),
  },
  rejectedOrders: {
    label: 'Rejected',
-    component: (props: OrderListContainerProps) => (
-      <OrderListContainer {...props} filter={Filter.Rejected} />
+    component: (props: OrderContainerProps) => (
+      <OrdersContainer {...props} filter={Filter.Rejected} />
    ),
  },
  orders: {
    label: 'All',
-    component: OrderListContainer,
+    component: OrdersContainer,
  },
  collateral: { label: 'Collateral', component: AccountsContainer },
  fills: { label: 'Fills', component: FillsContainer },
@@ -313,7 +313,6 @@ const ClosedMarketsDataGrid = ({
        minWidth: 100,
      }}
      overlayNoRowsTemplate={error ? error.message : t('No markets')}
-      storeKey="closedMarkets"
    />
  );
 };
@@ -2,7 +2,6 @@ import { Button } from '@vegaprotocol/ui-toolkit';
 import { useDepositDialog, DepositsTable } from '@vegaprotocol/deposits';
 import { depositsProvider } from '@vegaprotocol/deposits';
 import { t } from '@vegaprotocol/i18n';
-import { useBottomPlaceholder } from '@vegaprotocol/datagrid';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useRef } from 'react';
@@ -17,17 +16,13 @@ export const DepositsContainer = () => {
    skip: !pubKey,
  });
  const openDepositDialog = useDepositDialog((state) => state.open);
-  const bottomPlaceholderProps = useBottomPlaceholder({ gridRef });
  return (
    <div className="h-full">
-      <div className="h-full relative">
-        <DepositsTable
-          rowData={data}
-          ref={gridRef}
-          {...bottomPlaceholderProps}
-          overlayNoRowsTemplate={error ? error.message : t('No deposits')}
-        />
-      </div>
+      <DepositsTable
+        rowData={data}
+        ref={gridRef}
+        overlayNoRowsTemplate={error ? error.message : t('No deposits')}
+      />
      {!isReadOnly && (
        <div className="h-auto flex justify-end px-[11px] py-2 bottom-0 right-3 absolute dark:bg-black/75 bg-white/75 rounded">
          <Button
@@ -1,29 +1,39 @@
+import { useEffect } from 'react';
+import type { ReactNode } from 'react';
+import { LayoutPriority } from 'allotment';
 import { titlefy } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import { PositionsContainer } from '@vegaprotocol/positions';
-import { OrderListContainer } from '@vegaprotocol/orders';
-import { Tab, LocalStoragePersistTabs as Tabs } from '@vegaprotocol/ui-toolkit';
-import { WithdrawalsContainer } from './withdrawals-container';
-import { FillsContainer } from '@vegaprotocol/fills';
-import type { ReactNode } from 'react';
-import { useEffect } from 'react';
+import { useIncompleteWithdrawals } from '@vegaprotocol/withdraws';
 import { usePaneLayout } from '@vegaprotocol/react-helpers';
-import { VegaWalletContainer } from '../../components/vega-wallet-container';
-import { DepositsContainer } from './deposits-container';
-import { LayoutPriority } from 'allotment';
+import { Tab, LocalStoragePersistTabs as Tabs } from '@vegaprotocol/ui-toolkit';
 import { usePageTitleStore } from '../../stores';
-import { LedgerContainer } from '@vegaprotocol/ledger';
+import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
 import { AccountsContainer } from '../../components/accounts-container';
+import { DepositsContainer } from './deposits-container';
+import { FillsContainer } from '../../components/fills-container';
+import { PositionsContainer } from '../../components/positions-container';
+import { WithdrawalsContainer } from './withdrawals-container';
+import { OrdersContainer } from '../../components/orders-container';
+import { VegaWalletContainer } from '../../components/vega-wallet-container';
+import { LedgerContainer } from '../../components/ledger-container';
 import { AccountHistoryContainer } from './account-history-container';
-import {
-  useMarketClickHandler,
-  useMarketLiquidityClickHandler,
-} from '../../lib/hooks/use-market-click-handler';
 import {
  ResizableGrid,
  ResizableGridPanel,
 } from '../../components/resizable-grid';

+const WithdrawalsIndicator = () => {
+  const { ready } = useIncompleteWithdrawals();
+  if (!ready || ready.length === 0) {
+    return null;
+  }
+  return (
+    <span className="bg-vega-blue-450 text-white text-[10px] rounded p-[3px] pb-[2px] leading-none">
+      {ready.length}
+    </span>
+  );
+};
+
 export const Portfolio = () => {
  const { updateTitle } = usePageTitleStore((store) => ({
    updateTitle: store.updateTitle,
@@ -34,7 +44,6 @@ export const Portfolio = () => {
  }, [updateTitle]);

  const onMarketClick = useMarketClickHandler(true);
-  const onOrderTypeClick = useMarketLiquidityClickHandler();
  const [sizes, handleOnLayoutChange] = usePaneLayout({ id: 'portfolio' });
  const wrapperClasses = 'h-full max-h-full flex flex-col';
  return (
@@ -50,29 +59,17 @@ export const Portfolio = () => {
              </Tab>
              <Tab id="positions" name={t('Positions')}>
                <VegaWalletContainer>
-                  <PositionsContainer
-                    onMarketClick={onMarketClick}
-                    noBottomPlaceholder
-                    storeKey="portfolioPositions"
-                    allKeys
-                  />
+                  <PositionsContainer onMarketClick={onMarketClick} allKeys />
                </VegaWalletContainer>
              </Tab>
              <Tab id="orders" name={t('Orders')}>
                <VegaWalletContainer>
-                  <OrderListContainer
-                    onMarketClick={onMarketClick}
-                    onOrderTypeClick={onOrderTypeClick}
-                    storeKey="portfolioOrders"
-                  />
+                  <OrdersContainer />
                </VegaWalletContainer>
              </Tab>
              <Tab id="fills" name={t('Fills')}>
                <VegaWalletContainer>
-                  <FillsContainer
-                    onMarketClick={onMarketClick}
-                    storeKey="portfolioFills"
-                  />
+                  <FillsContainer onMarketClick={onMarketClick} />
                </VegaWalletContainer>
              </Tab>
              <Tab id="ledger-entries" name={t('Ledger entries')}>
@@ -92,10 +89,7 @@ export const Portfolio = () => {
            <Tabs storageKey="console-portfolio-bottom">
              <Tab id="collateral" name={t('Collateral')}>
                <VegaWalletContainer>
-                  <AccountsContainer
-                    storeKey="portfolioCollateral"
-                    onMarketClick={onMarketClick}
-                  />
+                  <AccountsContainer />
                </VegaWalletContainer>
              </Tab>
              <Tab id="deposits" name={t('Deposits')}>
@@ -103,7 +97,11 @@ export const Portfolio = () => {
                  <DepositsContainer />
                </VegaWalletContainer>
              </Tab>
-              <Tab id="withdrawals" name={t('Withdrawals')}>
+              <Tab
+                id="withdrawals"
+                name={t('Withdrawals')}
+                indicator={<WithdrawalsIndicator />}
+              >
                <WithdrawalsContainer />
              </Tab>
            </Tabs>
@@ -3,6 +3,7 @@ import {
  withdrawalProvider,
  useWithdrawalDialog,
  WithdrawalsTable,
+  useIncompleteWithdrawals,
 } from '@vegaprotocol/withdraws';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { t } from '@vegaprotocol/i18n';
@@ -17,6 +18,7 @@ export const WithdrawalsContainer = () => {
    skip: !pubKey,
  });
  const openWithdrawDialog = useWithdrawalDialog((state) => state.open);
+  const { ready, delayed } = useIncompleteWithdrawals();

  return (
    <VegaWalletContainer>
@@ -25,6 +27,8 @@ export const WithdrawalsContainer = () => {
          data-testid="withdrawals-history"
          rowData={data}
          overlayNoRowsTemplate={error ? error.message : t('No withdrawals')}
+          ready={ready}
+          delayed={delayed}
        />
      </div>
      {!isReadOnly && (
@@ -8,16 +8,19 @@ import { useVegaWallet } from '@vegaprotocol/wallet';
 import type { PinnedAsset } from '@vegaprotocol/accounts';
 import { AccountManager, useTransferDialog } from '@vegaprotocol/accounts';
 import { useDepositDialog } from '@vegaprotocol/deposits';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { useDataGridEvents } from '@vegaprotocol/datagrid';
+import type { DataGridSlice } from '../../stores/datagrid-store-slice';
+import { createDataGridSlice } from '../../stores/datagrid-store-slice';

 export const AccountsContainer = ({
  pinnedAsset,
  hideButtons,
-  storeKey,
  onMarketClick,
 }: {
  pinnedAsset?: PinnedAsset;
  hideButtons?: boolean;
-  storeKey?: string;
  onMarketClick?: (marketId: string, metaKey?: boolean) => void;
 }) => {
  const { pubKey, isReadOnly } = useVegaWallet();
@@ -26,6 +29,12 @@ export const AccountsContainer = ({
  const openDepositDialog = useDepositDialog((store) => store.open);
  const openTransferDialog = useTransferDialog((store) => store.open);

+  const gridStore = useAccountStore((store) => store.gridStore);
+  const updateGridStore = useAccountStore((store) => store.updateGridStore);
+  const gridStoreCallbacks = useDataGridEvents(gridStore, (colState) => {
+    updateGridStore(colState);
+  });
+
  const onClickAsset = useCallback(
    (assetId?: string) => {
      assetId && openAssetDetailsDialog(assetId);
@@ -51,7 +60,7 @@ export const AccountsContainer = ({
        onMarketClick={onMarketClick}
        isReadOnly={isReadOnly}
        pinnedAsset={pinnedAsset}
-        storeKey={storeKey}
+        gridProps={gridStoreCallbacks}
      />
      {!isReadOnly && !hideButtons && (
        <div className="flex gap-2 justify-end p-2 px-[11px] absolute lg:fixed bottom-0 right-3 dark:bg-black/75 bg-white/75 rounded">
@@ -75,3 +84,9 @@ export const AccountsContainer = ({
    </div>
  );
 };
+
+const useAccountStore = create<DataGridSlice>()(
+  persist(createDataGridSlice, {
+    name: 'vega_accounts_store',
+  })
+);
@@ -1,13 +1,16 @@
+import type { DefaultWeb3ProviderContextShape } from '@vegaprotocol/web3';
 import {
  useEthereumConfig,
  createConnectors,
  Web3Provider as Web3ProviderInternal,
  useWeb3ConnectStore,
+  createDefaultProvider,
 } from '@vegaprotocol/web3';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
 import { useEnvironment } from '@vegaprotocol/environment';
 import type { ReactNode } from 'react';
+import { useState } from 'react';
 import { useEffect } from 'react';

 export const Web3Provider = ({ children }: { children: ReactNode }) => {
@@ -17,10 +20,13 @@ export const Web3Provider = ({ children }: { children: ReactNode }) => {

  const connectors = useWeb3ConnectStore((store) => store.connectors);
  const initializeConnectors = useWeb3ConnectStore((store) => store.initialize);
+  const [defaultProvider, setDefaultProvider] = useState<
+    DefaultWeb3ProviderContextShape['provider'] | undefined
+  >(undefined);

  useEffect(() => {
    if (config?.chain_id) {
-      return initializeConnectors(
+      initializeConnectors(
        createConnectors(
          ETHEREUM_PROVIDER_URL,
          Number(config?.chain_id),
@@ -29,6 +35,11 @@ export const Web3Provider = ({ children }: { children: ReactNode }) => {
        ),
        Number(config.chain_id)
      );
+      const defaultProvider = createDefaultProvider(
+        ETHEREUM_PROVIDER_URL,
+        Number(config?.chain_id)
+      );
+      setDefaultProvider(defaultProvider);
    }
  }, [
    config?.chain_id,
@@ -49,7 +60,10 @@ export const Web3Provider = ({ children }: { children: ReactNode }) => {
      }}
      noDataMessage={t('Could not fetch Ethereum configuration')}
    >
-      <Web3ProviderInternal connectors={connectors}>
+      <Web3ProviderInternal
+        connectors={connectors}
+        defaultProvider={defaultProvider}
+      >
        <>{children}</>
      </Web3ProviderInternal>
    </AsyncRenderer>
@@ -0,0 +1,49 @@
+import { t } from '@vegaprotocol/i18n';
+import { Splash } from '@vegaprotocol/ui-toolkit';
+import { useVegaWallet } from '@vegaprotocol/wallet';
+import { FillsManager } from '@vegaprotocol/fills';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { useDataGridEvents } from '@vegaprotocol/datagrid';
+import type { DataGridSlice } from '../../stores/datagrid-store-slice';
+import { createDataGridSlice } from '../../stores/datagrid-store-slice';
+
+export const FillsContainer = ({
+  marketId,
+  onMarketClick,
+}: {
+  marketId?: string;
+  onMarketClick?: (marketId: string, metaKey?: boolean) => void;
+}) => {
+  const { pubKey } = useVegaWallet();
+
+  const gridStore = useFillsStore((store) => store.gridStore);
+  const updateGridStore = useFillsStore((store) => store.updateGridStore);
+
+  const gridStoreCallbacks = useDataGridEvents(gridStore, (colState) => {
+    updateGridStore(colState);
+  });
+
+  if (!pubKey) {
+    return (
+      <Splash>
+        <p>{t('Please connect Vega wallet')}</p>
+      </Splash>
+    );
+  }
+
+  return (
+    <FillsManager
+      partyId={pubKey}
+      marketId={marketId}
+      onMarketClick={onMarketClick}
+      gridProps={gridStoreCallbacks}
+    />
+  );
+};
+
+const useFillsStore = create<DataGridSlice>()(
+  persist(createDataGridSlice, {
+    name: 'vega_fills_store',
+  })
+);
@@ -0,0 +1 @@
+export * from './fills-container';
@@ -0,0 +1 @@
+export * from './ledger-container';
@@ -0,0 +1,36 @@
+import { useDataGridEvents } from '@vegaprotocol/datagrid';
+import { t } from '@vegaprotocol/i18n';
+import { LedgerManager } from '@vegaprotocol/ledger';
+import { Splash } from '@vegaprotocol/ui-toolkit';
+import { useVegaWallet } from '@vegaprotocol/wallet';
+import type { DataGridSlice } from '../../stores/datagrid-store-slice';
+import { createDataGridSlice } from '../../stores/datagrid-store-slice';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export const LedgerContainer = () => {
+  const { pubKey } = useVegaWallet();
+
+  const gridStore = useLedgerStore((store) => store.gridStore);
+  const updateGridStore = useLedgerStore((store) => store.updateGridStore);
+
+  const gridStoreCallbacks = useDataGridEvents(gridStore, (colState) => {
+    updateGridStore(colState);
+  });
+
+  if (!pubKey) {
+    return (
+      <Splash>
+        <p>{t('Please connect Vega wallet')}</p>
+      </Splash>
+    );
+  }
+
+  return <LedgerManager partyId={pubKey} gridProps={gridStoreCallbacks} />;
+};
+
+const useLedgerStore = create<DataGridSlice>()(
+  persist(createDataGridSlice, {
+    name: 'vega_ledger_store',
+  })
+);
@@ -0,0 +1 @@
+export * from './liquidity-container';
@@ -0,0 +1,93 @@
+import { useDataProvider } from '@vegaprotocol/data-provider';
+import { useDataGridEvents } from '@vegaprotocol/datagrid';
+import { t } from '@vegaprotocol/i18n';
+import {
+  lpAggregatedDataProvider,
+  type Filter,
+  LiquidityTable,
+  liquidityProvisionsDataProvider,
+} from '@vegaprotocol/liquidity';
+import { useMarket } from '@vegaprotocol/markets';
+import {
+  NetworkParams,
+  useNetworkParams,
+} from '@vegaprotocol/network-parameters';
+import type { AgGridReact } from 'ag-grid-react';
+import type { DataGridSlice } from '../../stores/datagrid-store-slice';
+import { createDataGridSlice } from '../../stores/datagrid-store-slice';
+import { useEffect, useRef } from 'react';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+
+export const LiquidityContainer = ({
+  marketId,
+  filter,
+}: {
+  marketId: string | undefined;
+  filter?: Filter;
+}) => {
+  const gridRef = useRef<AgGridReact | null>(null);
+
+  const gridStore = useLiquidityStore((store) => store.gridStore);
+  const updateGridStore = useLiquidityStore((store) => store.updateGridStore);
+
+  const gridStoreCallbacks = useDataGridEvents(gridStore, (colState) => {
+    updateGridStore(colState);
+  });
+  const { data: market } = useMarket(marketId);
+
+  // To be removed when liquidityProvision subscriptions are working
+  useReloadLiquidityData(marketId);
+
+  const { data, error } = useDataProvider({
+    dataProvider: lpAggregatedDataProvider,
+    variables: { marketId: marketId || '', filter },
+    skip: !marketId,
+  });
+
+  const assetDecimalPlaces =
+    market?.tradableInstrument.instrument.product.settlementAsset.decimals || 0;
+  const quantum =
+    market?.tradableInstrument.instrument.product.settlementAsset.quantum || 0;
+  const symbol =
+    market?.tradableInstrument.instrument.product.settlementAsset.symbol;
+
+  const { params } = useNetworkParams([
+    NetworkParams.market_liquidity_stakeToCcyVolume,
+  ]);
+  const stakeToCcyVolume = params.market_liquidity_stakeToCcyVolume;
+
+  return (
+    <div className="h-full relative">
+      <LiquidityTable
+        ref={gridRef}
+        rowData={data}
+        symbol={symbol}
+        assetDecimalPlaces={assetDecimalPlaces}
+        quantum={quantum}
+        stakeToCcyVolume={stakeToCcyVolume}
+        overlayNoRowsTemplate={error ? error.message : t('No data')}
+        {...gridStoreCallbacks}
+      />
+    </div>
+  );
+};
+
+const useReloadLiquidityData = (marketId: string | undefined) => {
+  const { reload } = useDataProvider({
+    dataProvider: liquidityProvisionsDataProvider,
+    variables: { marketId: marketId || '' },
+    update: () => true,
+    skip: !marketId,
+  });
+  useEffect(() => {
+    const interval = setInterval(reload, 30000);
+    return () => clearInterval(interval);
+  }, [reload]);
+};
+
+const useLiquidityStore = create<DataGridSlice>()(
+  persist(createDataGridSlice, {
+    name: 'vega_ledger_store',
+  })
+);
@@ -0,0 +1 @@
+export * from './orders-container';
@@ -0,0 +1,106 @@
+import { act, renderHook } from '@testing-library/react';
+import {
+  FilterStatusValue,
+  STORAGE_KEY,
+  useOrderListGridState,
+} from './orders-container';
+import { Filter } from '@vegaprotocol/orders';
+import { OrderType } from '@vegaprotocol/types';
+
+describe('useOrderListGridState', () => {
+  afterAll(() => {
+    localStorage.clear();
+  });
+
+  const setup = (filter: Filter | undefined) => {
+    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) => {
+      const filterModel = {
+        type: {
+          value: [OrderType.TYPE_LIMIT],
+        },
+      };
+      const { result } = setup(filter);
+
+      act(() => {
+        result.current.updateGridState(filter, {
+          filterModel,
+        });
+      });
+
+      expect(result.current.gridState).toEqual({
+        columnState: undefined,
+        filterModel: {
+          ...filterModel,
+          status: {
+            value: FilterStatusValue[filter],
+          },
+        },
+      });
+
+      const columnState = [{ colId: 'status', width: 200 }];
+
+      act(() => {
+        result.current.updateGridState(filter, {
+          columnState,
+        });
+      });
+
+      expect(result.current.gridState).toEqual({
+        columnState,
+        filterModel: {
+          ...filterModel,
+          status: {
+            value: FilterStatusValue[filter],
+          },
+        },
+      });
+
+      const storeKeyMap = {
+        [Filter.Open]: 'open',
+        [Filter.Rejected]: 'rejected',
+        [Filter.Closed]: 'closed',
+      };
+
+      expect(JSON.parse(localStorage.getItem(STORAGE_KEY) || '')).toMatchObject(
+        {
+          state: {
+            [storeKeyMap[filter]]: {
+              columnState,
+              filterModel, // no need to check that status is set, hook will return status
+            },
+          },
+        }
+      );
+    }
+  );
+});
@@ -0,0 +1,166 @@
+import { useDataGridEvents } from '@vegaprotocol/datagrid';
+import { t } from '@vegaprotocol/i18n';
+import { Filter } from '@vegaprotocol/orders';
+import { OrderListManager } from '@vegaprotocol/orders';
+import { Splash } from '@vegaprotocol/ui-toolkit';
+import { useVegaWallet } from '@vegaprotocol/wallet';
+import {
+  useMarketClickHandler,
+  useMarketLiquidityClickHandler,
+} from '../../lib/hooks/use-market-click-handler';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import type { DataGridStore } from '../../stores/datagrid-store-slice';
+import { OrderStatus } from '@vegaprotocol/types';
+
+export const FilterStatusValue = {
+  [Filter.Open]: [OrderStatus.STATUS_ACTIVE, OrderStatus.STATUS_PARKED],
+  [Filter.Closed]: [
+    OrderStatus.STATUS_CANCELLED,
+    OrderStatus.STATUS_EXPIRED,
+    OrderStatus.STATUS_FILLED,
+    OrderStatus.STATUS_PARTIALLY_FILLED,
+    OrderStatus.STATUS_STOPPED,
+  ],
+  [Filter.Rejected]: [OrderStatus.STATUS_REJECTED],
+};
+
+export interface OrderContainerProps {
+  marketId?: string;
+  filter?: Filter;
+}
+
+export const OrdersContainer = ({ marketId, filter }: OrderContainerProps) => {
+  const { pubKey, isReadOnly } = useVegaWallet();
+  const onMarketClick = useMarketClickHandler(true);
+  const onOrderTypeClick = useMarketLiquidityClickHandler();
+  const { gridState, updateGridState } = useOrderListGridState(filter);
+  const gridStoreCallbacks = useDataGridEvents(gridState, (newState) => {
+    updateGridState(filter, newState);
+  });
+
+  if (!pubKey) {
+    return <Splash>{t('Please connect Vega wallet')}</Splash>;
+  }
+
+  return (
+    <OrderListManager
+      partyId={pubKey}
+      marketId={marketId}
+      filter={filter}
+      onMarketClick={onMarketClick}
+      onOrderTypeClick={onOrderTypeClick}
+      isReadOnly={isReadOnly}
+      gridProps={gridStoreCallbacks}
+    />
+  );
+};
+
+export const STORAGE_KEY = 'vega_order_list_store';
+const useOrderListStore = create<{
+  open: DataGridStore;
+  closed: DataGridStore;
+  rejected: DataGridStore;
+  all: DataGridStore;
+  update: (filter: Filter | undefined, gridStore: DataGridStore) => void;
+}>()(
+  persist(
+    (set) => ({
+      open: {},
+      closed: {},
+      rejected: {},
+      all: {},
+      update: (filter, newStore) => {
+        switch (filter) {
+          case Filter.Open: {
+            set((curr) => ({
+              open: {
+                ...curr.open,
+                ...newStore,
+              },
+            }));
+            return;
+          }
+          case Filter.Closed: {
+            set((curr) => ({
+              closed: {
+                ...curr.closed,
+                ...newStore,
+              },
+            }));
+            return;
+          }
+          case Filter.Rejected: {
+            set((curr) => ({
+              rejected: {
+                ...curr.rejected,
+                ...newStore,
+              },
+            }));
+            return;
+          }
+          case undefined: {
+            set((curr) => ({
+              all: {
+                ...curr.all,
+                ...newStore,
+              },
+            }));
+            return;
+          }
+        }
+      },
+    }),
+    {
+      name: STORAGE_KEY,
+    }
+  )
+);
+
+export const useOrderListGridState = (filter: Filter | undefined) => {
+  const updateGridState = useOrderListStore((store) => store.update);
+  const gridState = useOrderListStore((store) => {
+    // Return the column/filter state for the given filter but ensuring that
+    // each filter controlled by the tab is always applied
+    switch (filter) {
+      case Filter.Open: {
+        return {
+          columnState: store.open.columnState,
+          filterModel: {
+            ...store.open.filterModel,
+            status: {
+              value: FilterStatusValue[Filter.Open],
+            },
+          },
+        };
+      }
+      case Filter.Closed: {
+        return {
+          columnState: store.closed.columnState,
+          filterModel: {
+            ...store.closed.filterModel,
+            status: {
+              value: FilterStatusValue[Filter.Closed],
+            },
+          },
+        };
+      }
+      case Filter.Rejected: {
+        return {
+          columnState: store.rejected.columnState,
+          filterModel: {
+            ...store.rejected.filterModel,
+            status: {
+              value: FilterStatusValue[Filter.Rejected],
+            },
+          },
+        };
+      }
+      default: {
+        return store.all;
+      }
+    }
+  });
+
+  return { gridState, updateGridState };
+};
@@ -0,0 +1 @@
+export * from './positions-container';
@@ -1,21 +1,28 @@
+import { useDataGridEvents } from '@vegaprotocol/datagrid';
 import { t } from '@vegaprotocol/i18n';
+import { PositionsManager } from '@vegaprotocol/positions';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import { PositionsManager } from './positions-manager';
+import type { DataGridSlice } from '../../stores/datagrid-store-slice';
+import { createDataGridSlice } from '../../stores/datagrid-store-slice';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';

 export const PositionsContainer = ({
  onMarketClick,
-  noBottomPlaceholder,
-  storeKey,
  allKeys,
 }: {
  onMarketClick?: (marketId: string) => void;
-  noBottomPlaceholder?: boolean;
-  storeKey?: string;
  allKeys?: boolean;
 }) => {
  const { pubKey, pubKeys, isReadOnly } = useVegaWallet();

+  const gridStore = usePositionsStore((store) => store.gridStore);
+  const updateGridStore = usePositionsStore((store) => store.updateGridStore);
+  const gridStoreCallbacks = useDataGridEvents(gridStore, (colState) => {
+    updateGridStore(colState);
+  });
+
  if (!pubKey) {
    return (
      <Splash>
@@ -38,8 +45,13 @@ export const PositionsContainer = ({
      partyIds={partyIds}
      onMarketClick={onMarketClick}
      isReadOnly={isReadOnly}
-      noBottomPlaceholder={noBottomPlaceholder}
-      storeKey={storeKey}
+      gridProps={gridStoreCallbacks}
    />
  );
 };
+
+const usePositionsStore = create<DataGridSlice>()(
+  persist(createDataGridSlice, {
+    name: 'vega_positions_store',
+  })
+);
@@ -3,12 +3,17 @@ import { useUpdateNetworkParametersToasts } from '@vegaprotocol/proposals';
 import { useVegaTransactionToasts } from '@vegaprotocol/web3';
 import { useEthereumTransactionToasts } from '@vegaprotocol/web3';
 import { useEthereumWithdrawApprovalsToasts } from '@vegaprotocol/web3';
+import { Routes } from './client-router';
+import { useReadyToWithdrawalToasts } from '@vegaprotocol/withdraws';

 export const ToastsManager = () => {
  useUpdateNetworkParametersToasts();
  useVegaTransactionToasts();
  useEthereumTransactionToasts();
  useEthereumWithdrawApprovalsToasts();
+  useReadyToWithdrawalToasts({
+    withdrawalsLink: `${Routes.PORTFOLIO}`,
+  });

  const toasts = useToasts((store) => store.toasts);
  return <ToastsContainer order="desc" toasts={toasts} />;
@@ -0,0 +1,25 @@
+import type { ColumnState } from 'ag-grid-community';
+import type { StateCreator } from 'zustand';
+
+export type DataGridStore = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  filterModel?: { [key: string]: any };
+  columnState?: ColumnState[];
+};
+
+export type DataGridSlice = {
+  gridStore: DataGridStore;
+  updateGridStore: (gridStore: DataGridStore) => void;
+};
+
+export const createDataGridSlice: StateCreator<DataGridSlice> = (set) => ({
+  gridStore: {},
+  updateGridStore: (newStore) => {
+    set((curr) => ({
+      gridStore: {
+        ...curr.gridStore,
+        ...newStore,
+      },
+    }));
+  },
+});
@@ -7,6 +7,7 @@ import {
 } from '@testing-library/react';
 import * as helpers from '@vegaprotocol/data-provider';
 import { AccountManager } from './accounts-manager';
+import type { useDataGridEvents } from '@vegaprotocol/datagrid';

 const mockedUseDataProvider = jest.fn();
 jest.mock('@vegaprotocol/data-provider', () => ({
@@ -14,6 +15,13 @@ jest.mock('@vegaprotocol/data-provider', () => ({
  useDataProvider: jest.fn(() => mockedUseDataProvider()),
 }));

+const gridProps = {
+  onGridReady: jest.fn(),
+  onColumnResized: jest.fn(),
+  onFilterChanged: jest.fn(),
+  onSortChanged: jest.fn(),
+} as unknown as ReturnType<typeof useDataGridEvents>;
+
 describe('AccountManager', () => {
  describe('when rerender', () => {
    beforeEach(() => {
@@ -43,6 +51,7 @@ describe('AccountManager', () => {
          partyId="partyOne"
          onClickAsset={jest.fn}
          isReadOnly={false}
+          gridProps={gridProps}
        />
      );
      expect(
@@ -55,6 +64,7 @@ describe('AccountManager', () => {
            partyId="partyTwo"
            onClickAsset={jest.fn}
            isReadOnly={false}
+            gridProps={gridProps}
          />
        );
      });
@@ -72,6 +82,7 @@ describe('AccountManager', () => {
            partyId="partyOne"
            onClickAsset={jest.fn}
            isReadOnly={false}
+            gridProps={gridProps}
          />
        );
        rerenderer = rerender;
@@ -85,6 +96,7 @@ describe('AccountManager', () => {
            partyId="partyOne"
            onClickAsset={jest.fn}
            isReadOnly={false}
+            gridProps={gridProps}
          />
        );
      });
@@ -110,6 +122,7 @@ describe('AccountManager', () => {
          partyId="partyOne"
          onClickAsset={jest.fn}
          isReadOnly={false}
+          gridProps={gridProps}
        />
      );
    });
@@ -11,6 +11,7 @@ import type { PinnedAsset } from './accounts-table';
 import { AccountTable } from './accounts-table';
 import { Dialog } from '@vegaprotocol/ui-toolkit';
 import BreakdownTable from './breakdown-table';
+import type { useDataGridEvents } from '@vegaprotocol/datagrid';

 const AccountBreakdown = ({
  assetId,
@@ -102,7 +103,7 @@ interface AccountManagerProps {
  onMarketClick?: (marketId: string, metaKey?: boolean) => void;
  isReadOnly: boolean;
  pinnedAsset?: PinnedAsset;
-  storeKey?: string;
+  gridProps?: ReturnType<typeof useDataGridEvents>;
 }

 export const AccountManager = ({
@@ -112,12 +113,11 @@ export const AccountManager = ({
  partyId,
  isReadOnly,
  pinnedAsset,
-  storeKey,
  onMarketClick,
+  gridProps,
 }: AccountManagerProps) => {
  const gridRef = useRef<AgGridReact | null>(null);
  const [breakdownAssetId, setBreakdownAssetId] = useState<string>();
-
  const { data, error } = useDataProvider({
    dataProvider: aggregatedAccountsDataProvider,
    variables: { partyId },
@@ -144,8 +144,8 @@ export const AccountManager = ({
        onClickBreakdown={setBreakdownAssetId}
        isReadOnly={isReadOnly}
        pinnedAsset={pinnedAsset}
-        storeKey={storeKey}
        overlayNoRowsTemplate={error ? error.message : t('No accounts')}
+        {...gridProps}
      />
      <AccountBreakdownDialog
        assetId={breakdownAssetId}
@@ -73,7 +73,6 @@ export interface AccountTableProps extends AgGridReactProps {
  onClickBreakdown?: (assetId: string) => void;
  isReadOnly: boolean;
  pinnedAsset?: PinnedAsset;
-  storeKey?: string;
 }

 export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
@@ -307,7 +306,6 @@ export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
      <AgGrid
        {...props}
        style={{ width: '100%', height: '100%' }}
-        overlayNoRowsTemplate={t('No accounts')}
        getRowId={({ data }: { data: AccountFields }) => data.asset.id}
        ref={ref}
        tooltipShowDelay={500}
@@ -0,0 +1,11 @@
+import type { ProposalSubmissionBody } from '@vegaprotocol/wallet';
+import { sendVegaTx } from './wallet-client';
+import { waitForProposal } from './propose-market';
+import { determineId } from '../utils';
+const vegaPubKey = Cypress.env('VEGA_PUBLIC_KEY');
+
+export async function submitProposal(proposalTx: ProposalSubmissionBody) {
+  cy.highlight('Submitting proposal');
+  const result = await sendVegaTx(vegaPubKey, proposalTx);
+  await waitForProposal(determineId(result.result.transaction.signature.value));
+}
@@ -1,5 +1,6 @@
-import { createWalletClient, sendVegaTx } from '../capsule/wallet-client';
+import { createWalletClient } from '../capsule/wallet-client';
 import type { ProposalSubmissionBody } from '@vegaprotocol/wallet';
+import { submitProposal } from '../capsule/submit-proposal';

 declare global {
  // eslint-disable-next-line @typescript-eslint/no-namespace
@@ -15,11 +16,8 @@ export const addVegaWalletSubmitProposal = () => {
  Cypress.Commands.add('VegaWalletSubmitProposal', (proposalTx) => {
    const vegaWalletUrl = Cypress.env('VEGA_WALLET_URL');
    const token = Cypress.env('VEGA_WALLET_API_TOKEN');
-    const vegaPubKey = Cypress.env('VEGA_PUBLIC_KEY');

    createWalletClient(vegaWalletUrl, token);
-
-    cy.highlight('Submitting proposal');
-    sendVegaTx(vegaPubKey, proposalTx);
+    cy.wrap(submitProposal(proposalTx));
  });
 };
@@ -1,5 +1,4 @@
 export * from './lib/ag-grid/ag-grid-lazy';
-export * from './lib/ag-grid/use-column-sizes';

 export * from './lib/column-definitions';

@@ -24,4 +23,4 @@ export * from './lib/type-helpers';
 export * from './lib/cells/grid-progress-bar';

 export * from './lib/ag-grid-update';
-export * from './lib/use-bottom-placeholder';
+export * from './lib/use-datagrid-events';
@@ -2,23 +2,16 @@ import type { AgGridReactProps, AgReactUiProps } from 'ag-grid-react';
 import { AgGridReact } from 'ag-grid-react';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 import { t } from '@vegaprotocol/i18n';
-import { useColumnSizes } from './use-column-sizes';
 import classNames from 'classnames';

 export const AgGridThemed = ({
  style,
  gridRef,
-  storeKey,
  ...props
 }: (AgGridReactProps | AgReactUiProps) & {
  style?: React.CSSProperties;
  gridRef?: React.ForwardedRef<AgGridReact>;
-  storeKey?: string;
 }) => {
-  const commonColumnCallbacks = useColumnSizes({
-    storeKey,
-    props,
-  });
  const { theme } = useThemeSwitcher();
  const defaultProps = {
    rowHeight: 22,
@@ -36,12 +29,7 @@ export const AgGridThemed = ({

  return (
    <div className={wrapperClasses} style={style}>
-      <AgGridReact
-        {...defaultProps}
-        {...props}
-        {...commonColumnCallbacks}
-        ref={gridRef}
-      />
+      <AgGridReact {...defaultProps} {...props} ref={gridRef} />
    </div>
  );
 };
@@ -4,7 +4,6 @@ import type { AgGridReactProps, AgGridReact } from 'ag-grid-react';
 type Props = AgGridReactProps & {
  style?: React.CSSProperties;
  gridRef?: React.Ref<AgGridReact>;
-  storeKey?: string;
 };

 export const AgGridLazyInternal = lazy(() =>
@@ -1,122 +0,0 @@
-import type {
-  Column,
-  ColumnResizedEvent,
-  GridSizeChangedEvent,
-  GridReadyEvent,
-} from 'ag-grid-community';
-import { renderHook, act, waitFor } from '@testing-library/react';
-import { useColumnSizes } from './use-column-sizes';
-import * as reactHelpers from '@vegaprotocol/react-helpers';
-
-const mockApis = {
-  api: {
-    sizeColumnsToFit: jest.fn(),
-  },
-  columnApi: {
-    setColumnWidths: jest.fn(),
-  },
-};
-
-const mockValueSetter = jest.fn();
-const mockStore = {
-  sizes: { testid: { col1: 100 } },
-  valueSetter: mockValueSetter,
-};
-jest.mock('zustand', () => ({
-  ...jest.requireActual('zustand'),
-  create: () =>
-    jest.fn(() =>
-      jest.fn().mockImplementation((creator) => {
-        return creator(mockStore);
-      })
-    ),
-}));
-describe('UseColumnSizes hook', () => {
-  const storeKey = 'testid';
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-  it('should return proper methods', () => {
-    const { result } = renderHook(() =>
-      useColumnSizes({ storeKey, props: {} })
-    );
-    expect(Object.keys(result.current)).toHaveLength(3);
-    expect(result.current).toStrictEqual({
-      onColumnResized: expect.any(Function),
-      onGridReady: expect.any(Function),
-      onGridSizeChanged: expect.any(Function),
-    });
-  });
-
-  it('onGridSizeChanged should call setSize', async () => {
-    jest
-      .spyOn(reactHelpers, 'useScreenDimensions')
-      .mockReturnValue({ screenSize: 'xxl' });
-    const { result } = renderHook(() =>
-      useColumnSizes({ storeKey, props: {} })
-    );
-    await act(() => {
-      result.current.onGridSizeChanged?.({
-        clientWidth: 1000,
-        ...mockApis,
-      } as GridSizeChangedEvent);
-    });
-    await waitFor(() => {
-      expect(mockApis.columnApi.setColumnWidths).toHaveBeenCalledWith([
-        { key: 'col1', newWidth: 100 },
-      ]);
-    });
-  });
-
-  it('onColumnResized should fill up store', async () => {
-    const columns: Column[] = [
-      { getColId: () => 'col1', getActualWidth: () => 100 },
-      { getColId: () => 'col2', getActualWidth: () => 200 },
-    ] as Column[];
-    const sizeObj = { col1: 100, col2: 200, clientWidth: 1000 };
-    const { result } = renderHook(() =>
-      useColumnSizes({ storeKey, props: {} })
-    );
-    await act(() => {
-      result.current.onGridSizeChanged?.({
-        clientWidth: 1000,
-        ...mockApis,
-      } as GridSizeChangedEvent);
-    });
-    await act(() => {
-      result.current.onColumnResized?.({
-        columns,
-        finished: true,
-        source: 'uiColumnDragged',
-        ...mockApis,
-      } as ColumnResizedEvent);
-    });
-    await waitFor(() => {
-      expect(mockValueSetter).toHaveBeenCalledWith(storeKey, sizeObj);
-    });
-  });
-
-  it('onGridReady should call setSizes', async () => {
-    const props = { onGridReady: jest.fn() };
-
-    const { result } = renderHook(() => useColumnSizes({ storeKey, props }));
-    const obTest = { cool: 1, ...mockApis };
-    await act(() => {
-      result.current.onGridReady?.(obTest as GridReadyEvent);
-    });
-    expect(props.onGridReady).toHaveBeenCalledWith(obTest);
-    expect(mockApis.api.sizeColumnsToFit).toHaveBeenCalledWith();
-  });
-
-  it('if no storeKey should be transparent', () => {
-    const { result } = renderHook(() =>
-      useColumnSizes({ storeKey: '', props: {} })
-    );
-    expect(result.current).toStrictEqual({
-      onColumnResized: undefined,
-      onGridReady: undefined,
-      onGridSizeChanged: undefined,
-    });
-  });
-});
@@ -1,145 +0,0 @@
-import { useCallback, useRef } from 'react';
-import type {
-  GridSizeChangedEvent,
-  GridReadyEvent,
-  ColumnResizedEvent,
-} from 'ag-grid-community';
-import type { AgGridReactProps, AgReactUiProps } from 'ag-grid-react';
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
-import { immer } from 'zustand/middleware/immer';
-import { useScreenDimensions } from '@vegaprotocol/react-helpers';
-
-const STORAGE_KEY = 'vega_columns_sizes_store';
-
-export const useColumnSizesStore = create<{
-  sizes: Record<string, Record<string, number>>;
-  valueSetter: (storeKey: string, value: Record<string, number>) => void;
-}>()(
-  persist(
-    immer((set) => ({
-      sizes: {},
-      valueSetter: (storeKey, value) =>
-        set((state) => {
-          state.sizes[storeKey] = {
-            ...(state.sizes[storeKey] || {}),
-            ...value,
-          };
-          return state;
-        }),
-    })),
-    { name: STORAGE_KEY }
-  )
-);
-
-interface UseColumnSizesProps {
-  props: AgGridReactProps | AgReactUiProps;
-  storeKey?: string;
-}
-
-export const useColumnSizes = ({
-  storeKey = '',
-  props,
-}: UseColumnSizesProps): {
-  onColumnResized?: (event: ColumnResizedEvent) => void;
-  onGridReady?: (event: GridReadyEvent) => void;
-  onGridSizeChanged?: (event: GridSizeChangedEvent) => void;
-} => {
-  const sizes = useColumnSizesStore((store) => store.sizes[storeKey] || {});
-  const valueSetter = useColumnSizesStore((store) => store.valueSetter);
-  const widthRef = useRef(sizes['clientWidth'] || 0);
-  const {
-    onColumnResized: parentOnColumnResized,
-    onGridReady: parentOnGridReady,
-    onGridSizeChanged: parentOnGridSizeChanged,
-  } = props;
-  const recalculateSizes = useCallback((sizes: Record<string, number>) => {
-    if (
-      widthRef.current &&
-      sizes['clientWidth'] &&
-      widthRef.current !== sizes['clientWidth']
-    ) {
-      const oldWidth = sizes['clientWidth'];
-      const ratio = widthRef.current / oldWidth;
-      return {
-        ...Object.entries(sizes).reduce((agg, [key, value]) => {
-          agg[key] = value * ratio;
-          return agg;
-        }, {} as Record<string, number>),
-        width: widthRef.current,
-      } as Record<string, number>;
-    }
-    return sizes;
-  }, []);
-
-  const onColumnResized = useCallback(
-    (event: ColumnResizedEvent) => {
-      parentOnColumnResized?.(event);
-      if (
-        storeKey &&
-        event.source === 'uiColumnDragged' &&
-        event.finished &&
-        widthRef.current
-      ) {
-        const { columns } = event;
-        if (columns?.length) {
-          const sizesObj = columns.reduce((aggr, column) => {
-            aggr[column.getColId()] = column.getActualWidth();
-            return aggr;
-          }, {} as Record<string, number>);
-          sizesObj['clientWidth'] = widthRef.current;
-          valueSetter(storeKey, sizesObj);
-        }
-      }
-    },
-    [valueSetter, storeKey, parentOnColumnResized]
-  );
-  const { screenSize } = useScreenDimensions();
-  const largeScreen = ['xl', 'xxl', 'xxxl'].includes(screenSize);
-  const setSizes = useCallback(
-    (apiEvent: GridReadyEvent | GridSizeChangedEvent) => {
-      if (!storeKey || !Object.keys(sizes).length || !widthRef.current) {
-        largeScreen && apiEvent?.api.sizeColumnsToFit();
-      } else {
-        const recalculatedSizes = recalculateSizes(sizes);
-        const newSizes = Object.entries(recalculatedSizes).map(
-          ([key, size]) => ({
-            key,
-            newWidth: size,
-          })
-        );
-        apiEvent.columnApi.setColumnWidths(newSizes);
-      }
-    },
-    [storeKey, recalculateSizes, sizes, largeScreen]
-  );
-
-  const onGridReady = useCallback(
-    (event: GridReadyEvent) => {
-      parentOnGridReady?.(event);
-      setSizes(event);
-    },
-    [setSizes, parentOnGridReady]
-  );
-
-  const onGridSizeChanged = useCallback(
-    (event: GridSizeChangedEvent) => {
-      parentOnGridSizeChanged?.(event);
-      widthRef.current = event.clientWidth;
-      setSizes(event);
-    },
-    [parentOnGridSizeChanged, setSizes]
-  );
-  if (storeKey) {
-    return {
-      onGridReady,
-      onGridSizeChanged,
-      onColumnResized,
-    };
-  }
-  return {
-    onGridReady: parentOnGridReady,
-    onGridSizeChanged: parentOnGridSizeChanged,
-    onColumnResized: parentOnColumnResized,
-  };
-};
@@ -1,68 +0,0 @@
-import type { RefObject } from 'react';
-import { useCallback, useMemo } from 'react';
-import type { AgGridReact } from 'ag-grid-react';
-import type { IsFullWidthRowParams, RowHeightParams } from 'ag-grid-community';
-
-const NO_HOVER_CSS_RULE = { 'no-hover': 'data?.isLastPlaceholder' };
-const ROW_ID = 'bottom-placeholder';
-const fullWidthCellRenderer = () => null;
-const isFullWidthRow = (params: IsFullWidthRowParams) =>
-  params.rowNode.data?.isLastPlaceholder;
-
-interface Props {
-  gridRef: RefObject<AgGridReact>;
-  disabled?: boolean;
-}
-// eslint-disable-next-line @typescript-eslint/ban-types
-export const useBottomPlaceholder = ({ gridRef, disabled }: Props) => {
-  const onBodyScrollEnd = useCallback(() => {
-    const rowCont = gridRef.current?.api.getDisplayedRowCount() ?? 0;
-    if (rowCont) {
-      const lastRow = gridRef.current?.api.getDisplayedRowAtIndex(rowCont - 1);
-      if (lastRow && lastRow.data) {
-        const placeholderRow = {
-          ...lastRow.data,
-          isLastPlaceholder: true,
-          id: ROW_ID,
-        };
-        const transaction = gridRef.current?.api.getRowNode(ROW_ID)
-          ? { update: [placeholderRow] }
-          : { add: [placeholderRow] };
-        gridRef.current?.api.applyTransaction(transaction);
-      }
-    }
-  }, [gridRef]);
-
-  const onRowsChanged = useCallback(() => {
-    const placeholderNode = gridRef.current?.api.getRowNode(ROW_ID);
-    if (placeholderNode) {
-      const transaction = {
-        remove: [placeholderNode.data],
-      };
-      gridRef.current?.api.applyTransaction(transaction);
-    }
-    onBodyScrollEnd();
-  }, [gridRef, onBodyScrollEnd]);
-
-  const getRowHeight = useCallback(
-    (params: RowHeightParams) =>
-      params.data?.isLastPlaceholder ? 50 : undefined,
-    []
-  );
-
-  return useMemo(
-    () =>
-      !disabled
-        ? {
-            onBodyScrollEnd,
-            rowClassRules: NO_HOVER_CSS_RULE,
-            isFullWidthRow,
-            fullWidthCellRenderer,
-            onSortChanged: onRowsChanged,
-            onFilterChanged: onRowsChanged,
-            getRowHeight,
-          }
-        : {},
-    [onBodyScrollEnd, onRowsChanged, disabled, getRowHeight]
-  );
-};
@@ -0,0 +1,185 @@
+import { act, render, waitFor } from '@testing-library/react';
+import {
+  useDataGridEvents,
+  GRID_EVENT_DEBOUNCE_TIME,
+} from './use-datagrid-events';
+import { AgGridThemed } from './ag-grid/ag-grid-lazy-themed';
+import type { MutableRefObject } from 'react';
+import { useRef } from 'react';
+import type { AgGridReact } from 'ag-grid-react';
+
+const gridProps = {
+  rowData: [{ id: 1 }],
+  columnDefs: [
+    {
+      field: 'id',
+      width: 100,
+      resizable: true,
+      filter: 'agNumberColumnFilter',
+    },
+  ],
+  style: { width: 500, height: 300 },
+};
+
+// Not using render hook so I can pass event callbacks
+// to a rendered grid
+function setup(...args: Parameters<typeof useDataGridEvents>) {
+  let gridRef;
+
+  function TestComponent() {
+    const hookCallbacks = useDataGridEvents(...args);
+    gridRef = useRef<AgGridReact | null>(null);
+    return <AgGridThemed gridRef={gridRef} {...gridProps} {...hookCallbacks} />;
+  }
+  render(<TestComponent />);
+  return gridRef as unknown as MutableRefObject<AgGridReact>;
+}
+
+describe('useDataGridEvents', () => {
+  const originalWarn = console.warn;
+
+  beforeAll(() => {
+    jest.useFakeTimers();
+
+    // disabling some ag grid warnings that are caused by test setup only
+    console.warn = () => undefined;
+  });
+
+  afterAll(() => {
+    jest.useRealTimers();
+    console.warn = originalWarn;
+  });
+
+  it('default state is set and callback is called on column or filter event', async () => {
+    const callback = jest.fn();
+    const initialState = {
+      filterModel: undefined,
+      columnState: undefined,
+    };
+
+    const result = setup(initialState, callback);
+
+    // column state was not updated, so the default width provided by the
+    // col def should be set
+    expect(result.current.columnApi.getColumnState()[0].width).toEqual(
+      gridProps.columnDefs[0].width
+    );
+    // no filters set
+    expect(result.current.api.getFilterModel()).toEqual({});
+
+    const newWidth = 400;
+
+    // Set col width
+    await act(async () => {
+      result.current.columnApi.setColumnWidth('id', newWidth);
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(GRID_EVENT_DEBOUNCE_TIME);
+    });
+
+    expect(callback).toHaveBeenCalledWith({
+      columnState: [expect.objectContaining({ colId: 'id', width: newWidth })],
+      filterModel: {},
+    });
+    callback.mockClear();
+    expect(result.current.columnApi.getColumnState()[0].width).toEqual(
+      newWidth
+    );
+
+    // Set filter
+    await act(async () => {
+      result.current.columnApi.applyColumnState({
+        state: [{ colId: 'id', sort: 'asc' }],
+        applyOrder: true,
+      });
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(GRID_EVENT_DEBOUNCE_TIME);
+    });
+
+    expect(callback).toHaveBeenCalledWith({
+      columnState: [expect.objectContaining({ colId: 'id', sort: 'asc' })],
+      filterModel: {},
+    });
+    callback.mockClear();
+    expect(result.current.columnApi.getColumnState()[0].sort).toEqual('asc');
+
+    // Set filter
+    const idFilter = {
+      filter: 1,
+      filterType: 'number',
+      type: 'equals',
+    };
+    await act(async () => {
+      result.current.api.setFilterModel({
+        id: idFilter,
+      });
+    });
+
+    act(() => {
+      jest.advanceTimersByTime(GRID_EVENT_DEBOUNCE_TIME);
+    });
+
+    expect(callback).toHaveBeenCalledWith({
+      columnState: expect.any(Object),
+      filterModel: {
+        id: idFilter,
+      },
+    });
+    callback.mockClear();
+    expect(result.current.api.getFilterModel()['id']).toEqual(idFilter);
+  });
+
+  it('applies grid state on ready', async () => {
+    const idFilter = {
+      filter: 1,
+      filterType: 'number',
+      type: 'equals',
+    };
+    const colState = { colId: 'id', width: 300, sort: 'desc' as const };
+    const initialState = {
+      filterModel: {
+        id: idFilter,
+      },
+      columnState: [colState],
+    };
+
+    const result = setup(initialState, jest.fn());
+
+    await waitFor(() => {
+      expect(result.current.api.getFilterModel()['id']).toEqual(idFilter);
+      expect(result.current.columnApi.getColumnState()[0]).toEqual(
+        expect.objectContaining(colState)
+      );
+    });
+  });
+
+  it('debounces events', async () => {
+    const callback = jest.fn();
+    const initialState = {
+      filterModel: undefined,
+      columnState: undefined,
+    };
+
+    const result = setup(initialState, callback);
+
+    const newWidth = 400;
+
+    // Set col width multiple times
+    await act(async () => {
+      result.current.columnApi.setColumnWidth('id', newWidth);
+      result.current.columnApi.setColumnWidth('id', newWidth);
+      result.current.columnApi.setColumnWidth('id', newWidth);
+    });
+
+    expect(callback).not.toHaveBeenCalled();
+
+    act(() => {
+      jest.advanceTimersByTime(GRID_EVENT_DEBOUNCE_TIME);
+    });
+
+    expect(callback).toHaveBeenCalledTimes(1);
+  });
+});
@@ -0,0 +1,66 @@
+import debounce from 'lodash/debounce';
+import type {
+  ColumnResizedEvent,
+  ColumnState,
+  FilterChangedEvent,
+  GridReadyEvent,
+  SortChangedEvent,
+} from 'ag-grid-community';
+import { useCallback, useMemo } from 'react';
+
+type State = {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  filterModel?: { [key: string]: any };
+  columnState?: ColumnState[];
+};
+
+type Event = ColumnResizedEvent | FilterChangedEvent | SortChangedEvent;
+
+export const GRID_EVENT_DEBOUNCE_TIME = 300;
+
+export const useDataGridEvents = (
+  state: State,
+  callback: (data: State) => void
+) => {
+  // This function can be called very frequently by the onColumnResized
+  // grid callback, so its memoized to only update after resizing is finished
+  const onGridChange = useMemo(
+    () =>
+      debounce(({ api, columnApi }: Event) => {
+        if (!api || !columnApi) return;
+        const columnState = columnApi.getColumnState();
+        const filterModel = api.getFilterModel();
+        callback({ columnState, filterModel });
+      }, GRID_EVENT_DEBOUNCE_TIME),
+    [callback]
+  );
+
+  // check if we have stored column states or filter models and apply if we do
+  const onGridReady = useCallback(
+    ({ api, columnApi }: GridReadyEvent) => {
+      if (!api || !columnApi) return;
+
+      if (state.columnState) {
+        columnApi.applyColumnState({
+          state: state.columnState,
+          applyOrder: true,
+        });
+      } else {
+        // ensure columns fit available space if no widths are set
+        api.sizeColumnsToFit();
+      }
+
+      if (state.filterModel) {
+        api.setFilterModel(state.filterModel);
+      }
+    },
+    [state]
+  );
+
+  return {
+    onGridReady,
+    onColumnResized: onGridChange,
+    onFilterChanged: onGridChange,
+    onSortChanged: onGridChange,
+  };
+};
@@ -24,10 +24,8 @@ export const DepositsTable = forwardRef<
  return (
    <AgGrid
      ref={ref}
-      defaultColDef={{ resizable: true }}
+      defaultColDef={{ flex: 1 }}
      style={{ width: '100%', height: '100%' }}
-      suppressCellFocus={true}
-      storeKey="depositTable"
      {...props}
    >
      <AgGridColumn headerName="Asset" field="asset.symbol" />
@@ -1,3 +1,3 @@
-export * from './lib/fills-container';
+export * from './lib/fills-manager';
 export * from './lib/fills-data-provider';
 export * from './lib/__generated__/Fills';
@@ -1,33 +0,0 @@
-import { t } from '@vegaprotocol/i18n';
-import { Splash } from '@vegaprotocol/ui-toolkit';
-import { useVegaWallet } from '@vegaprotocol/wallet';
-import { FillsManager } from './fills-manager';
-
-export const FillsContainer = ({
-  marketId,
-  onMarketClick,
-  storeKey,
-}: {
-  marketId?: string;
-  onMarketClick?: (marketId: string, metaKey?: boolean) => void;
-  storeKey?: string;
-}) => {
-  const { pubKey } = useVegaWallet();
-
-  if (!pubKey) {
-    return (
-      <Splash>
-        <p>{t('Please connect Vega wallet')}</p>
-      </Splash>
-    );
-  }
-
-  return (
-    <FillsManager
-      partyId={pubKey}
-      marketId={marketId}
-      onMarketClick={onMarketClick}
-      storeKey={storeKey}
-    />
-  );
-};
@@ -2,7 +2,7 @@ import type { AgGridReact } from 'ag-grid-react';
 import { useRef } from 'react';
 import { t } from '@vegaprotocol/i18n';
 import { FillsTable } from './fills-table';
-import { useBottomPlaceholder } from '@vegaprotocol/datagrid';
+import type { useDataGridEvents } from '@vegaprotocol/datagrid';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import type * as Schema from '@vegaprotocol/types';
 import { fillsWithMarketProvider } from './fills-data-provider';
@@ -11,14 +11,14 @@ interface FillsManagerProps {
  partyId: string;
  marketId?: string;
  onMarketClick?: (marketId: string, metaKey?: boolean) => void;
-  storeKey?: string;
+  gridProps: ReturnType<typeof useDataGridEvents>;
 }

 export const FillsManager = ({
  partyId,
  marketId,
  onMarketClick,
-  storeKey,
+  gridProps,
 }: FillsManagerProps) => {
  const gridRef = useRef<AgGridReact | null>(null);
  const filter: Schema.TradesFilter | Schema.TradesSubscriptionFilter = {
@@ -38,9 +38,6 @@ export const FillsManager = ({
    },
    variables: { filter },
  });
-  const bottomPlaceholderProps = useBottomPlaceholder({
-    gridRef,
-  });

  return (
    <FillsTable
@@ -48,9 +45,8 @@ export const FillsManager = ({
      rowData={data}
      partyId={partyId}
      onMarketClick={onMarketClick}
-      storeKey={storeKey}
-      {...bottomPlaceholderProps}
      overlayNoRowsTemplate={error ? error.message : t('No fills')}
+      {...gridProps}
    />
  );
 };
@@ -39,7 +39,6 @@ export type Role = typeof TAKER | typeof MAKER | '-';
 export type Props = (AgGridReactProps | AgReactUiProps) & {
  partyId: string;
  onMarketClick?: (marketId: string, metaKey?: boolean) => void;
-  storeKey?: string;
 };

 export const FillsTable = forwardRef<AgGridReact, Props>(
@@ -1,3 +1,2 @@
-export * from './lib/ledger-container';
 export * from './lib/ledger-manager';
 export * from './lib/__generated__/LedgerEntries';
@@ -1,17 +0,0 @@
-import { t } from '@vegaprotocol/i18n';
-import { Splash } from '@vegaprotocol/ui-toolkit';
-import { useVegaWallet } from '@vegaprotocol/wallet';
-import { LedgerManager } from './ledger-manager';
-
-export const LedgerContainer = () => {
-  const { pubKey } = useVegaWallet();
-  if (!pubKey) {
-    return (
-      <Splash>
-        <p>{t('Please connect Vega wallet')}</p>
-      </Splash>
-    );
-  }
-
-  return <LedgerManager partyId={pubKey} />;
-};
@@ -10,6 +10,7 @@ import { LedgerTable } from './ledger-table';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import type * as Types from '@vegaprotocol/types';
 import { LedgerExportLink } from './ledger-export-link';
+import type { useDataGridEvents } from '@vegaprotocol/datagrid';

 export interface Filter {
  vegaTime?: {
@@ -24,7 +25,13 @@ const defaultFilter = {
  },
 };

-export const LedgerManager = ({ partyId }: { partyId: string }) => {
+export const LedgerManager = ({
+  partyId,
+  gridProps,
+}: {
+  partyId: string;
+  gridProps: ReturnType<typeof useDataGridEvents>;
+}) => {
  const gridRef = useRef<AgGridReact | null>(null);
  const [filter, setFilter] = useState<Filter>(defaultFilter);

@@ -33,7 +40,7 @@ export const LedgerManager = ({ partyId }: { partyId: string }) => {
      partyId,
      dateRange: filter?.vegaTime?.value,
      pagination: {
-        first: 5000,
+        first: 10,
      },
    }),
    [partyId, filter?.vegaTime?.value]
@@ -45,18 +52,23 @@ export const LedgerManager = ({ partyId }: { partyId: string }) => {
    skip: !variables.partyId,
  });

-  const onFilterChanged = useCallback((event: FilterChangedEvent) => {
-    const updatedFilter = { ...defaultFilter, ...event.api.getFilterModel() };
-    setFilter(updatedFilter);
-  }, []);
+  const onFilterChanged = useCallback(
+    (event: FilterChangedEvent) => {
+      const updatedFilter = { ...defaultFilter, ...event.api.getFilterModel() };
+      setFilter(updatedFilter);
+      gridProps.onFilterChanged(event);
+    },
+    [gridProps]
+  );

  return (
    <div className="h-full relative">
      <LedgerTable
        ref={gridRef}
        rowData={data}
-        onFilterChanged={onFilterChanged}
        overlayNoRowsTemplate={error ? error.message : t('No entries')}
+        {...gridProps}
+        onFilterChanged={onFilterChanged}
      />
      {data && <LedgerExportLink entries={data} partyId={partyId} />}
    </div>
@@ -49,7 +49,7 @@ export const LedgerTable = forwardRef<AgGridReact, LedgerEntryProps>(
  (props, ref) => {
    return (
      <AgGrid
-        style={{ width: '100%', height: 'calc(100% - 50px)' }}
+        style={{ width: '100%', height: '100%' }}
        ref={ref}
        tooltipShowDelay={500}
        defaultColDef={{
@@ -61,9 +61,6 @@ export const LedgerTable = forwardRef<AgGridReact, LedgerEntryProps>(
            buttons: ['reset'],
          },
        }}
-        storeKey="ledgerTable"
-        suppressLoadingOverlay
-        suppressNoRowsOverlay
        {...props}
      >
        <AgGridColumn
@@ -1,6 +1,7 @@
 # Liquidity Provisions

 fragment LiquidityProvisionFields on LiquidityProvision {
+  id
  party {
    id
    accountsConnection(marketId: $marketId, type: ACCOUNT_TYPE_BOND) {
@@ -3,14 +3,14 @@ import * as Types from '@vegaprotocol/types';
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
 const defaultOptions = {} as const;
-export type LiquidityProvisionFieldsFragment = { __typename?: 'LiquidityProvision', createdAt: any, updatedAt?: any | null, commitmentAmount: string, fee: string, status: Types.LiquidityProvisionStatus, party: { __typename?: 'Party', id: string, accountsConnection?: { __typename?: 'AccountsConnection', edges?: Array<{ __typename?: 'AccountEdge', node: { __typename?: 'AccountBalance', type: Types.AccountType, balance: string } } | null> | null } | null } };
+export type LiquidityProvisionFieldsFragment = { __typename?: 'LiquidityProvision', id?: string | null, createdAt: any, updatedAt?: any | null, commitmentAmount: string, fee: string, status: Types.LiquidityProvisionStatus, party: { __typename?: 'Party', id: string, accountsConnection?: { __typename?: 'AccountsConnection', edges?: Array<{ __typename?: 'AccountEdge', node: { __typename?: 'AccountBalance', type: Types.AccountType, balance: string } } | null> | null } | null } };

 export type LiquidityProvisionsQueryVariables = Types.Exact<{
  marketId: Types.Scalars['ID'];
 }>;


-export type LiquidityProvisionsQuery = { __typename?: 'Query', market?: { __typename?: 'Market', liquidityProvisionsConnection?: { __typename?: 'LiquidityProvisionsConnection', edges?: Array<{ __typename?: 'LiquidityProvisionsEdge', node: { __typename?: 'LiquidityProvision', createdAt: any, updatedAt?: any | null, commitmentAmount: string, fee: string, status: Types.LiquidityProvisionStatus, party: { __typename?: 'Party', id: string, accountsConnection?: { __typename?: 'AccountsConnection', edges?: Array<{ __typename?: 'AccountEdge', node: { __typename?: 'AccountBalance', type: Types.AccountType, balance: string } } | null> | null } | null } } } | null> | null } | null } | null };
+export type LiquidityProvisionsQuery = { __typename?: 'Query', market?: { __typename?: 'Market', liquidityProvisionsConnection?: { __typename?: 'LiquidityProvisionsConnection', edges?: Array<{ __typename?: 'LiquidityProvisionsEdge', node: { __typename?: 'LiquidityProvision', id?: string | null, createdAt: any, updatedAt?: any | null, commitmentAmount: string, fee: string, status: Types.LiquidityProvisionStatus, party: { __typename?: 'Party', id: string, accountsConnection?: { __typename?: 'AccountsConnection', edges?: Array<{ __typename?: 'AccountEdge', node: { __typename?: 'AccountBalance', type: Types.AccountType, balance: string } } | null> | null } | null } } } | null> | null } | null } | null };

 export type LiquidityProvisionsUpdateSubscriptionVariables = Types.Exact<{
  partyId?: Types.InputMaybe<Types.Scalars['ID']>;
@@ -31,6 +31,7 @@ export type LiquidityProviderFeeShareQuery = { __typename?: 'Query', market?: {

 export const LiquidityProvisionFieldsFragmentDoc = gql`
    fragment LiquidityProvisionFields on LiquidityProvision {
+  id
  party {
    id
    accountsConnection(marketId: $marketId, type: ACCOUNT_TYPE_BOND) {
@@ -38,8 +38,7 @@ export const liquidityProvisionsDataProvider = makeDataProvider<
  ) => {
    return produce(data || [], (draft) => {
      deltas?.forEach((delta) => {
-        const id = delta.id;
-        const index = draft.findIndex((a) => delta.id === id);
+        const index = draft.findIndex((a) => delta.id === a.id);
        if (index !== -1) {
          draft[index].commitmentAmount = delta.commitmentAmount;
          draft[index].fee = delta.fee;
@@ -47,6 +46,7 @@ export const liquidityProvisionsDataProvider = makeDataProvider<
          draft[index].status = delta.status;
        } else {
          draft.unshift({
+            id: delta.id,
            commitmentAmount: delta.commitmentAmount,
            fee: delta.fee,
            status: delta.status,
@@ -188,7 +188,7 @@ export const LiquidityTable = forwardRef<AgGridReact, LiquidityTableProps>(
      <AgGrid
        style={{ width: '100%', height: '100%' }}
        overlayNoRowsTemplate={t('No liquidity provisions')}
-        getRowId={({ data }) => `${data.party.id}-${data.status}`}
+        getRowId={({ data }) => data.id}
        ref={ref}
        tooltipShowDelay={500}
        defaultColDef={{
@@ -197,10 +197,9 @@ export const LiquidityTable = forwardRef<AgGridReact, LiquidityTableProps>(
          tooltipComponent: TooltipCellComponent,
          sortable: true,
        }}
-        storeKey="liquidityProvisionTable"
        {...props}
        columnDefs={colDefs}
-      ></AgGrid>
+      />
    );
  }
 );
@@ -1,6 +1,5 @@
 import {
  addDecimalsFormatNumber,
-  formatNumber,
  formatNumberPercentage,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
@@ -47,7 +46,10 @@ const Row = ({
    if (asPercentage) {
      return formatNumberPercentage(new BigNumber(value).times(100));
    }
-    return `${formatNumber(Number(value))} ${assetSymbol}`;
+    if (assetSymbol) {
+      return `${Number(value).toLocaleString()} ${assetSymbol}`;
+    }
+    return Number(value).toLocaleString();
  };

  const formattedValue = getFormattedValue(value);
@@ -94,7 +94,7 @@ export const marketInfoQuery = (
      },
      lpPriceRange: '0.02',
      liquidityMonitoringParameters: {
-        triggeringRatio: '0',
+        triggeringRatio: '0.7',
        targetStakeParameters: {
          timeWindow: 3600,
          scalingFactor: 10,
@@ -61,7 +61,6 @@ export const MarketListTable = forwardRef<
      columnDefs={columnDefs}
      suppressCellFocus
      components={{ PriceFlashCell, MarketName }}
-      storeKey="allMarkets"
      {...props}
    />
  );
@@ -1,13 +1,50 @@
 import { marketDataErrorPolicyGuard } from '@vegaprotocol/data-provider';
 import { makeDataProvider } from '@vegaprotocol/data-provider';
-import type { MarketsDataQuery } from './__generated__/markets-data';
+import type {
+  MarketsDataQuery,
+  MarketsDataQueryVariables,
+} from './__generated__/markets-data';
+import type {
+  MarketDataUpdateSubscription,
+  MarketDataUpdateFieldsFragment,
+  MarketDataUpdateSubscriptionVariables,
+} from './__generated__/market-data';
+import { MarketDataUpdateDocument } from './__generated__/market-data';
 import { MarketsDataDocument } from './__generated__/markets-data';
 import type { MarketData } from './market-data-provider';

-const getData = (responseData: MarketsDataQuery | null): MarketData[] | null =>
+const getData = (responseData: MarketsDataQuery | null): MarketData[] =>
  responseData?.marketsConnection?.edges
    .filter((edge) => edge.node.data)
-    .map((edge) => edge.node.data as MarketData) || null;
+    .map((edge) => edge.node.data as MarketData) || [];
+
+export const mapMarketDataUpdateToMarketData = (
+  delta: MarketDataUpdateFieldsFragment
+): MarketData => {
+  const { marketId, __typename, ...marketData } = delta;
+  return { ...marketData, market: { id: marketId } };
+};
+
+const update = (
+  data: MarketData[] | null,
+  delta: MarketDataUpdateFieldsFragment
+) => {
+  const updatedData = data ? [...data] : [];
+  const item = mapMarketDataUpdateToMarketData(delta);
+  const index = updatedData.findIndex(
+    (data) => data.market.id === item.market.id
+  );
+  if (index !== -1) {
+    updatedData[index] = { ...updatedData[index], ...item };
+  } else {
+    updatedData.push(item);
+  }
+  return updatedData;
+};
+
+const getDelta = (
+  subscriptionData: MarketDataUpdateSubscription
+): MarketDataUpdateFieldsFragment => subscriptionData.marketsData[0];

 export const marketsDataProvider = makeDataProvider<
  MarketsDataQuery,
@@ -19,3 +56,25 @@ export const marketsDataProvider = makeDataProvider<
  getData,
  errorPolicyGuard: marketDataErrorPolicyGuard,
 });
+
+type Variables = { marketIds: string[] };
+
+export const marketsLiveDataProvider = makeDataProvider<
+  MarketsDataQuery,
+  MarketData[],
+  MarketDataUpdateSubscription,
+  MarketDataUpdateFieldsFragment,
+  Variables,
+  MarketDataUpdateSubscriptionVariables,
+  MarketsDataQueryVariables
+>({
+  query: MarketsDataDocument,
+  subscriptionQuery: MarketDataUpdateDocument,
+  getData,
+  getDelta,
+  update,
+  errorPolicyGuard: marketDataErrorPolicyGuard,
+  getQueryVariables: () => ({}),
+  getSubscriptionVariables: ({ marketIds }: Variables) =>
+    marketIds.map((marketId) => ({ marketId })),
+});
@@ -10,10 +10,15 @@ import type {
 } from './__generated__/markets';
 import type { MarketsCandlesQueryVariables } from './__generated__/markets-candles';

-import { marketsDataProvider } from './markets-data-provider';
+import {
+  marketsDataProvider,
+  marketsLiveDataProvider,
+  mapMarketDataUpdateToMarketData,
+} from './markets-data-provider';
 import { marketDataProvider } from './market-data-provider';
 import { marketsCandlesProvider } from './markets-candles-provider';
 import type { MarketData } from './market-data-provider';
+import type { MarketDataUpdateFieldsFragment } from './__generated__';
 import type { MarketCandles } from './markets-candles-provider';
 import { useMemo } from 'react';
 import * as Schema from '@vegaprotocol/types';
@@ -160,6 +165,44 @@ export const allMarketsWithDataProvider = makeDerivedDataProvider<
  addData(parts[0] as Market[], parts[1] as MarketData[])
 );

+export const allMarketsWithLiveDataProvider = makeDerivedDataProvider<
+  MarketMaybeWithData[],
+  MarketMaybeWithData,
+  { marketIds: string[] }
+>(
+  [
+    (callback, client, variables) =>
+      marketsProvider(callback, client, undefined),
+    marketsLiveDataProvider,
+  ],
+  (partsData, variables, prevData, parts) => {
+    if (prevData && parts[1].isUpdate) {
+      const data = mapMarketDataUpdateToMarketData(parts[1].delta);
+      const index = prevData.findIndex(
+        (market) => market.id === data.market.id
+      );
+      if (index !== -1) {
+        const updatedData = [...prevData];
+        updatedData[index] = { ...updatedData[index], data };
+        return updatedData;
+      } else {
+        return prevData;
+      }
+    }
+    return addData(partsData[0] as Market[], partsData[1] as MarketData[]);
+  },
+  (data, parts) => {
+    if (!parts[1].isUpdate && parts[1].delta) {
+      return;
+    }
+    return data.find(
+      (market) =>
+        market.id ===
+        (parts[1].delta as MarketDataUpdateFieldsFragment).marketId
+    );
+  }
+);
+
 export type MarketMaybeWithDataAndCandles = MarketMaybeWithData &
  MarketMaybeWithCandles;

@@ -1,5 +1,4 @@
 export * from './order-data-provider';
 export * from './order-list';
 export * from './order-list-manager';
-export * from './order-list-container';
 export * from './mocks/generate-orders';
@@ -1,42 +0,0 @@
-import { t } from '@vegaprotocol/i18n';
-import { Splash } from '@vegaprotocol/ui-toolkit';
-import { useVegaWallet } from '@vegaprotocol/wallet';
-import type { Filter } from './order-list-manager';
-import { OrderListManager } from './order-list-manager';
-
-export interface OrderListContainerProps {
-  marketId?: string;
-  onMarketClick?: (marketId: string, metaKey?: boolean) => void;
-  onOrderTypeClick?: (marketId: string, metaKey?: boolean) => void;
-  enforceBottomPlaceholder?: boolean;
-  filter?: Filter;
-  storeKey?: string;
-}
-
-export const OrderListContainer = ({
-  marketId,
-  onMarketClick,
-  onOrderTypeClick,
-  enforceBottomPlaceholder,
-  filter,
-  storeKey,
-}: OrderListContainerProps) => {
-  const { pubKey, isReadOnly } = useVegaWallet();
-
-  if (!pubKey) {
-    return <Splash>{t('Please connect Vega wallet')}</Splash>;
-  }
-
-  return (
-    <OrderListManager
-      partyId={pubKey}
-      marketId={marketId}
-      filter={filter}
-      onMarketClick={onMarketClick}
-      onOrderTypeClick={onOrderTypeClick}
-      isReadOnly={isReadOnly}
-      enforceBottomPlaceholder={enforceBottomPlaceholder}
-      storeKey={storeKey}
-    />
-  );
-};
@@ -2,11 +2,9 @@ import { t } from '@vegaprotocol/i18n';
 import { useCallback, useRef, useState } from 'react';
 import { Button } from '@vegaprotocol/ui-toolkit';
 import type { AgGridReact } from 'ag-grid-react';
-import type { GridReadyEvent, FilterChangedEvent } from 'ag-grid-community';
-
 import { OrderListTable } from '../order-list/order-list';
 import { useHasAmendableOrder } from '../../order-hooks/use-has-amendable-order';
-import { useBottomPlaceholder } from '@vegaprotocol/datagrid';
+import type { useDataGridEvents } from '@vegaprotocol/datagrid';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { ordersWithMarketProvider } from '../order-data-provider/order-data-provider';
 import {
@@ -16,59 +14,31 @@ import {
 import type { OrderTxUpdateFieldsFragment } from '@vegaprotocol/wallet';
 import { OrderEditDialog } from '../order-list/order-edit-dialog';
 import type { Order } from '../order-data-provider';
-import { OrderStatus } from '@vegaprotocol/types';

 export enum Filter {
-  'Open',
-  'Closed',
-  'Rejected',
+  'Open' = 'Open',
+  'Closed' = 'Closed',
+  'Rejected' = 'Rejected',
 }

-const FilterStatusValue = {
-  [Filter.Open]: [OrderStatus.STATUS_ACTIVE, OrderStatus.STATUS_PARKED],
-  [Filter.Closed]: [
-    OrderStatus.STATUS_CANCELLED,
-    OrderStatus.STATUS_EXPIRED,
-    OrderStatus.STATUS_FILLED,
-    OrderStatus.STATUS_PARTIALLY_FILLED,
-    OrderStatus.STATUS_STOPPED,
-  ],
-  [Filter.Rejected]: [OrderStatus.STATUS_REJECTED],
-};
-
 export interface OrderListManagerProps {
  partyId: string;
  marketId?: string;
  onMarketClick?: (marketId: string, metaKey?: boolean) => void;
  onOrderTypeClick?: (marketId: string, metaKey?: boolean) => void;
  isReadOnly: boolean;
-  enforceBottomPlaceholder?: boolean;
  filter?: Filter;
-  storeKey?: string;
+  gridProps?: ReturnType<typeof useDataGridEvents>;
 }

-const CancelAllOrdersButton = ({ onClick }: { onClick: () => void }) => (
-  <div className="dark:bg-black/75 bg-white/75 h-auto flex justify-end px-[11px] py-2 absolute bottom-0 right-3 rounded">
-    <Button
-      variant="primary"
-      size="sm"
-      onClick={onClick}
-      data-testid="cancelAll"
-    >
-      {t('Cancel all')}
-    </Button>
-  </div>
-);
-
 export const OrderListManager = ({
  partyId,
  marketId,
  onMarketClick,
  onOrderTypeClick,
  isReadOnly,
-  enforceBottomPlaceholder,
  filter,
-  storeKey,
+  gridProps,
 }: OrderListManagerProps) => {
  const gridRef = useRef<AgGridReact | null>(null);
  const [editOrder, setEditOrder] = useState<Order | null>(null);
@@ -91,14 +61,6 @@ export const OrderListManager = ({
    },
  });

-  const {
-    onFilterChanged: bottomPlaceholderOnFilterChanged,
-    ...bottomPlaceholderProps
-  } = useBottomPlaceholder({
-    gridRef,
-    disabled: !enforceBottomPlaceholder && !isReadOnly && !hasAmendableOrder,
-  });
-
  const cancel = useCallback(
    (order: Order) => {
      if (!order.market) return;
@@ -112,26 +74,6 @@ export const OrderListManager = ({
    [create]
  );

-  const onGridReady = useCallback(
-    ({ api }: GridReadyEvent) => {
-      if (filter !== undefined) {
-        api.setFilterModel({
-          status: {
-            value: FilterStatusValue[filter],
-          },
-        });
-      }
-    },
-    [filter]
-  );
-
-  const onFilterChanged = useCallback(
-    (event: FilterChangedEvent) => {
-      bottomPlaceholderOnFilterChanged?.();
-    },
-    [bottomPlaceholderOnFilterChanged]
-  );
-
  const cancelAll = useCallback(() => {
    create({
      orderCancellation: {},
@@ -142,20 +84,17 @@ export const OrderListManager = ({
    <>
      <div className="h-full relative">
        <OrderListTable
-          rowData={data as Order[]}
+          rowData={data}
          ref={gridRef}
          filter={filter}
-          onGridReady={onGridReady}
          onCancel={cancel}
          onEdit={setEditOrder}
          onMarketClick={onMarketClick}
          onOrderTypeClick={onOrderTypeClick}
-          onFilterChanged={onFilterChanged}
          isReadOnly={isReadOnly}
-          storeKey={storeKey}
          suppressAutoSize
          overlayNoRowsTemplate={error ? error.message : t('No orders')}
-          {...bottomPlaceholderProps}
+          {...gridProps}
        />
      </div>
      {!isReadOnly && hasAmendableOrder && (
@@ -198,3 +137,16 @@ export const OrderListManager = ({
    </>
  );
 };
+
+const CancelAllOrdersButton = ({ onClick }: { onClick: () => void }) => (
+  <div className="dark:bg-black/75 bg-white/75 h-auto flex justify-end px-[11px] py-2 absolute bottom-0 right-3 rounded">
+    <Button
+      variant="primary"
+      size="sm"
+      onClick={onClick}
+      data-testid="cancelAll"
+    >
+      {t('Cancel all')}
+    </Button>
+  </div>
+);
@@ -2,14 +2,13 @@ import {
  addDecimalsFormatNumber,
  getDateTimeFormat,
  isNumeric,
+  toBigNum,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import * as Schema from '@vegaprotocol/types';
 import { ButtonLink } from '@vegaprotocol/ui-toolkit';
-import { AgGridColumn } from 'ag-grid-react';
-import BigNumber from 'bignumber.js';
 import type { ForwardedRef } from 'react';
-import { memo, forwardRef } from 'react';
+import { memo, forwardRef, useMemo } from 'react';
 import {
  AgGridLazy as AgGrid,
  SetFilter,
@@ -24,11 +23,13 @@ import type {
  TypedDataAgGrid,
  VegaICellRendererParams,
  VegaValueFormatterParams,
+  VegaValueGetterParams,
 } from '@vegaprotocol/datagrid';
 import type { AgGridReact } from 'ag-grid-react';
 import type { Order } from '../order-data-provider';
 import { OrderActionsDropdown } from '../order-actions-dropdown';
 import { Filter } from '../order-list-manager';
+import type { ColDef } from 'ag-grid-community';

 export type OrderListTableProps = TypedDataAgGrid<Order> & {
  marketId?: string;
@@ -38,7 +39,6 @@ export type OrderListTableProps = TypedDataAgGrid<Order> & {
  onOrderTypeClick?: (marketId: string, metaKey?: boolean) => void;
  filter?: Filter;
  isReadOnly: boolean;
-  storeKey?: string;
 };

 export const OrderListTable = memo<
@@ -54,49 +54,40 @@ export const OrderListTable = memo<
        : filter === undefined || filter === Filter.Open
        ? true
        : false;
-
-      return (
-        <AgGrid
-          ref={ref}
-          defaultColDef={{
-            resizable: true,
-            sortable: true,
-            filterParams: { buttons: ['reset'] },
-          }}
-          style={{
-            width: '100%',
-            height: '100%',
-          }}
-          getRowId={({ data }) => data.id}
-          components={{ MarketNameCell, OrderTypeCell }}
-          {...props}
-        >
-          <AgGridColumn
-            headerName={t('Market')}
-            field="market.tradableInstrument.instrument.code"
-            cellRenderer="MarketNameCell"
-            cellRendererParams={{ idPath: 'market.id', onMarketClick }}
-            minWidth={150}
-          />
-          <AgGridColumn
-            headerName={t('Size')}
-            field="size"
-            cellClass="font-mono text-right"
-            type="rightAligned"
-            cellClassRules={{
+      const columnDefs: ColDef[] = useMemo(
+        () => [
+          {
+            headerName: t('Market'),
+            field: 'market.tradableInstrument.instrument.code',
+            cellRenderer: 'MarketNameCell',
+            cellRendererParams: { idPath: 'market.id', onMarketClick },
+            minWidth: 150,
+          },
+          {
+            headerName: t('Size'),
+            field: 'size',
+            cellClass: 'font-mono text-right',
+            type: 'rightAligned',
+            cellClassRules: {
              [positiveClassNames]: ({ data }: { data: Order }) =>
                data?.side === Schema.Side.SIDE_BUY,
              [negativeClassNames]: ({ data }: { data: Order }) =>
                data?.side === Schema.Side.SIDE_SELL,
-            }}
-            valueFormatter={({
-              value,
+            },
+            valueGetter: ({ data }: VegaValueGetterParams<Order>) => {
+              return data?.size && data.market
+                ? toBigNum(data.size, data.market.positionDecimalPlaces ?? 0)
+                    .multipliedBy(data.side === Schema.Side.SIDE_SELL ? -1 : 1)
+                    .toNumber()
+                : undefined;
+            },
+            valueFormatter: ({
              data,
            }: VegaValueFormatterParams<Order, 'size'>) => {
              if (!data) {
-                return undefined;
+                return '';
              }
-              if (!data?.market || !isNumeric(value)) {
+              if (!data?.market || !isNumeric(data.size)) {
                return '-';
              }
              const prefix = data
@@ -107,33 +98,33 @@ export const OrderListTable = memo<
              return (
                prefix +
                addDecimalsFormatNumber(
-                  value,
+                  data.size,
                  data.market.positionDecimalPlaces
                )
              );
-            }}
-            minWidth={80}
-          />
-          <AgGridColumn
-            field="type"
-            filter={SetFilter}
-            filterParams={{
+            },
+            minWidth: 80,
+          },
+          {
+            field: 'type',
+            filter: SetFilter,
+            filterParams: {
              set: Schema.OrderTypeMapping,
-            }}
-            cellRenderer="OrderTypeCell"
-            cellRendererParams={{
+            },
+            cellRenderer: 'OrderTypeCell',
+            cellRendererParams: {
              onClick: onOrderTypeClick,
-            }}
-            minWidth={80}
-          />
-          <AgGridColumn
-            field="status"
-            filter={SetFilter}
-            filterParams={{
+            },
+            minWidth: 80,
+          },
+          {
+            field: 'status',
+            filter: SetFilter,
+            filterParams: {
              set: Schema.OrderStatusMapping,
              readonly: filter !== undefined,
-            }}
-            valueFormatter={({
+            },
+            valueFormatter: ({
              value,
              data,
            }: VegaValueFormatterParams<Order, 'status'>) => {
@@ -145,8 +136,8 @@ export const OrderListTable = memo<
                }`;
              }
              return value ? Schema.OrderStatusMapping[value] : '';
-            }}
-            cellRenderer={({
+            },
+            cellRenderer: ({
              valueFormatted,
              data,
            }: {
@@ -156,45 +147,51 @@ export const OrderListTable = memo<
              <span data-testid={`order-status-${data?.id}`}>
                {valueFormatted}
              </span>
-            )}
-            minWidth={100}
-          />
-          <AgGridColumn
-            headerName={t('Filled')}
-            field="remaining"
-            cellClass="font-mono text-right"
-            type="rightAligned"
-            valueFormatter={({
+            ),
+            minWidth: 100,
+          },
+          {
+            headerName: t('Filled'),
+            field: 'remaining',
+            cellClass: 'font-mono text-right',
+            type: 'rightAligned',
+            valueGetter: ({ data }: VegaValueGetterParams<Order>) => {
+              return data?.size && data.market
+                ? toBigNum(
+                    (BigInt(data.size) - BigInt(data.remaining)).toString(),
+                    data.market.positionDecimalPlaces ?? 0
+                  ).toNumber()
+                : undefined;
+            },
+            valueFormatter: ({
              data,
              value,
-            }: VegaValueFormatterParams<Order, 'remaining'>) => {
+            }: VegaValueFormatterParams<Order, 'remaining'>): string => {
              if (!data) {
-                return undefined;
+                return '';
              }
              if (!data?.market || !isNumeric(value) || !isNumeric(data.size)) {
                return '-';
              }
-              const dps = data.market.positionDecimalPlaces;
-              const size = new BigNumber(data.size);
-              const remaining = new BigNumber(value);
-              const fills = size.minus(remaining);
+              const { positionDecimalPlaces } = data.market;
+              const filled = BigInt(data.size) - BigInt(data.remaining);
              return `${addDecimalsFormatNumber(
-                fills.toString(),
-                dps
-              )}/${addDecimalsFormatNumber(size.toString(), dps)}`;
-            }}
-            minWidth={100}
-          />
-          <AgGridColumn
-            field="price"
-            type="rightAligned"
-            cellClass="font-mono text-right"
-            valueFormatter={({
+                filled.toString(),
+                positionDecimalPlaces
+              )}/${addDecimalsFormatNumber(data.size, positionDecimalPlaces)}`;
+            },
+            minWidth: 100,
+          },
+          {
+            field: 'price',
+            type: 'rightAligned',
+            cellClass: 'font-mono text-right',
+            valueFormatter: ({
              value,
              data,
            }: VegaValueFormatterParams<Order, 'price'>) => {
              if (!data) {
-                return undefined;
+                return '';
              }
              if (
                !data?.market ||
@@ -204,16 +201,16 @@ export const OrderListTable = memo<
                return '-';
              }
              return addDecimalsFormatNumber(value, data.market.decimalPlaces);
-            }}
-            minWidth={100}
-          />
-          <AgGridColumn
-            field="timeInForce"
-            filter={SetFilter}
-            filterParams={{
+            },
+            minWidth: 100,
+          },
+          {
+            field: 'timeInForce',
+            filter: SetFilter,
+            filterParams: {
              set: Schema.OrderTimeInForceMapping,
-            }}
-            valueFormatter={({
+            },
+            valueFormatter: ({
              value,
              data,
            }: VegaValueFormatterParams<Order, 'timeInForce'>) => {
@@ -235,13 +232,13 @@ export const OrderListTable = memo<
              }${data?.reduceOnly ? t('. Reduce only') : ''}`;

              return label;
-            }}
-            minWidth={150}
-          />
-          <AgGridColumn
-            field="createdAt"
-            filter={DateRangeFilter}
-            cellRenderer={({
+            },
+            minWidth: 150,
+          },
+          {
+            field: 'createdAt',
+            filter: DateRangeFilter,
+            cellRenderer: ({
              value,
            }: VegaICellRendererParams<Order, 'createdAt'>) => {
              return (
@@ -249,12 +246,12 @@ export const OrderListTable = memo<
                  {value ? getDateTimeFormat().format(new Date(value)) : value}
                </span>
              );
-            }}
-            minWidth={150}
-          />
-          <AgGridColumn
-            field="updatedAt"
-            cellRenderer={({
+            },
+            minWidth: 150,
+          },
+          {
+            field: 'updatedAt',
+            cellRenderer: ({
              data,
              value,
            }: VegaICellRendererParams<Order, 'updatedAt'>) => {
@@ -266,15 +263,15 @@ export const OrderListTable = memo<
                  {value ? getDateTimeFormat().format(new Date(value)) : '-'}
                </span>
              );
-            }}
-            minWidth={150}
-          />
-          <AgGridColumn
-            colId="amend"
-            {...COL_DEFS.actions}
-            minWidth={showAllActions ? 120 : COL_DEFS.actions.minWidth}
-            maxWidth={showAllActions ? 120 : COL_DEFS.actions.minWidth}
-            cellRenderer={({ data }: { data?: Order }) => {
+            },
+            minWidth: 150,
+          },
+          {
+            colId: 'amend',
+            ...COL_DEFS.actions,
+            minWidth: showAllActions ? 120 : COL_DEFS.actions.minWidth,
+            maxWidth: showAllActions ? 120 : COL_DEFS.actions.minWidth,
+            cellRenderer: ({ data }: { data?: Order }) => {
              if (!data) return null;

              return (
@@ -298,9 +295,37 @@ export const OrderListTable = memo<
                  <OrderActionsDropdown id={data?.id} />
                </div>
              );
-            }}
-          />
-        </AgGrid>
+            },
+          },
+        ],
+        [
+          filter,
+          onCancel,
+          onEdit,
+          onMarketClick,
+          onOrderTypeClick,
+          props.isReadOnly,
+          showAllActions,
+        ]
+      );
+
+      return (
+        <AgGrid
+          ref={ref}
+          defaultColDef={{
+            resizable: true,
+            sortable: true,
+            filterParams: { buttons: ['reset'] },
+          }}
+          columnDefs={columnDefs}
+          style={{
+            width: '100%',
+            height: '100%',
+          }}
+          getRowId={({ data }) => data.id}
+          components={{ MarketNameCell, OrderTypeCell }}
+          {...props}
+        />
      );
    }
  )
@@ -1,7 +1,6 @@
 export * from './lib/__generated__/Positions';
-export * from './lib/positions-container';
 export * from './lib/positions-data-providers';
 export * from './lib/positions-table';
+export * from './lib/positions-manager';
 export * from './lib/use-market-margin';
 export * from './lib/use-open-volume';
-export * from './lib/use-positions-data';
@@ -14,7 +14,7 @@ import type {
  MarketMaybeWithData,
  MarketDataQueryVariables,
 } from '@vegaprotocol/markets';
-import { allMarketsWithDataProvider } from '@vegaprotocol/markets';
+import { allMarketsWithLiveDataProvider } from '@vegaprotocol/markets';
 import type {
  PositionsQuery,
  PositionFieldsFragment,
@@ -144,8 +144,9 @@ export const update = (
  data: PositionFieldsFragment[] | null,
  deltas: PositionsSubscriptionSubscription['positions']
 ) => {
-  return produce(data || [], (draft) => {
+  const updatedData = produce(data || [], (draft) => {
    deltas.forEach((delta) => {
+      const { marketId, partyId, __typename, ...position } = delta;
      const index = draft.findIndex(
        (node) =>
          node.market.id === delta.marketId && node.party.id === delta.partyId
@@ -154,29 +155,25 @@ export const update = (
        const currNode = draft[index];
        draft[index] = {
          ...currNode,
-          realisedPNL: delta.realisedPNL,
-          unrealisedPNL: delta.unrealisedPNL,
-          openVolume: delta.openVolume,
-          averageEntryPrice: delta.averageEntryPrice,
-          updatedAt: delta.updatedAt,
-          lossSocializationAmount: delta.lossSocializationAmount,
-          positionStatus: delta.positionStatus,
+          ...position,
        };
      } else {
        draft.unshift({
-          ...delta,
+          ...position,
          __typename: 'Position',
          market: {
            __typename: 'Market',
            id: delta.marketId,
          },
          party: {
+            __typename: 'Party',
            id: delta.partyId,
          },
        });
      }
    });
  });
+  return updatedData;
 };

 const getSubscriptionVariables = (
@@ -242,41 +239,54 @@ export const rejoinPositionData = (
  | null => {
  if (positions && marketsData) {
    return positions.map((node) => {
+      const market =
+        marketsData?.find((market) => market.id === node.market.id) || null;
      return {
        ...node,
-        market:
-          marketsData?.find((market) => market.id === node.market.id) || null,
+        market,
      };
    });
  }
  return null;
 };

+export const positionsMarketsProvider = makeDerivedDataProvider<
+  string[],
+  never,
+  PositionsQueryVariables
+>([positionsDataProvider], ([positions]) => {
+  return Array.from(
+    new Set(
+      (positions as PositionFieldsFragment[]).map(
+        (position) => position.market.id
+      )
+    )
+  ).sort();
+});
+
 export const positionsMetricsProvider = makeDerivedDataProvider<
  Position[],
  Position[],
-  PositionsQueryVariables
+  PositionsQueryVariables & { marketIds: string[] }
 >(
  [
-    positionsDataProvider,
+    (callback, client, variables) =>
+      positionsDataProvider(callback, client, { partyIds: variables.partyIds }),
    (callback, client, variables) =>
      accountsDataProvider(callback, client, {
        partyId: Array.isArray(variables.partyIds)
          ? variables.partyIds[0]
          : variables.partyIds,
      }),
-    (callback, client) =>
-      allMarketsWithDataProvider(callback, client, undefined),
+    (callback, client, variables) =>
+      allMarketsWithLiveDataProvider(callback, client, {
+        marketIds: variables.marketIds,
+      }),
  ],
-  ([positions, accounts, marketsData], variables) => {
+  ([positions, accounts, marketsData]) => {
    const positionsData = rejoinPositionData(positions, marketsData);
-    if (!variables) {
-      return [];
-    }
-    return sortBy(
-      getMetrics(positionsData, accounts as Account[] | null),
-      'marketName'
-    );
+    const metrics = getMetrics(positionsData, accounts as Account[] | null);
+    return sortBy(metrics, 'marketName');
  },
  (data, delta, previousData) =>
    data.filter((row) => {
@@ -1,65 +1,67 @@
-import { useRef } from 'react';
-import { usePositionsData } from './use-positions-data';
+import { useCallback } from 'react';
 import { PositionsTable } from './positions-table';
-import type { AgGridReact } from 'ag-grid-react';
 import * as Schema from '@vegaprotocol/types';
 import { useVegaTransactionStore } from '@vegaprotocol/wallet';
 import { t } from '@vegaprotocol/i18n';
-import { useBottomPlaceholder } from '@vegaprotocol/datagrid';
+import { useDataProvider } from '@vegaprotocol/data-provider';
+import {
+  positionsMetricsProvider,
+  positionsMarketsProvider,
+} from './positions-data-providers';
+import type { useDataGridEvents } from '@vegaprotocol/datagrid';
 import { useVegaWallet } from '@vegaprotocol/wallet';

 interface PositionsManagerProps {
  partyIds: string[];
  onMarketClick?: (marketId: string) => void;
  isReadOnly: boolean;
-  noBottomPlaceholder?: boolean;
-  storeKey?: string;
+  gridProps: ReturnType<typeof useDataGridEvents>;
 }

 export const PositionsManager = ({
  partyIds,
  onMarketClick,
  isReadOnly,
-  noBottomPlaceholder,
-  storeKey,
+  gridProps,
 }: PositionsManagerProps) => {
  const { pubKeys, pubKey } = useVegaWallet();
-  const gridRef = useRef<AgGridReact | null>(null);
-  const { data, error } = usePositionsData(partyIds, gridRef);
  const create = useVegaTransactionStore((store) => store.create);
-  const onClose = ({
-    marketId,
-    openVolume,
-  }: {
-    marketId: string;
-    openVolume: string;
-  }) =>
-    create({
-      batchMarketInstructions: {
-        cancellations: [
-          {
-            marketId,
-            orderId: '', // omit order id to cancel all active orders
-          },
-        ],
-        submissions: [
-          {
-            marketId: marketId,
-            type: Schema.OrderType.TYPE_MARKET as const,
-            timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_IOC as const,
-            side: openVolume.startsWith('-')
-              ? Schema.Side.SIDE_BUY
-              : Schema.Side.SIDE_SELL,
-            size: openVolume.replace('-', ''),
-            reduceOnly: true,
-          },
-        ],
-      },
-    });
+  const onClose = useCallback(
+    ({ marketId, openVolume }: { marketId: string; openVolume: string }) =>
+      create({
+        batchMarketInstructions: {
+          cancellations: [
+            {
+              marketId,
+              orderId: '', // omit order id to cancel all active orders
+            },
+          ],
+          submissions: [
+            {
+              marketId: marketId,
+              type: Schema.OrderType.TYPE_MARKET as const,
+              timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_IOC as const,
+              side: openVolume.startsWith('-')
+                ? Schema.Side.SIDE_BUY
+                : Schema.Side.SIDE_SELL,
+              size: openVolume.replace('-', ''),
+              reduceOnly: true,
+            },
+          ],
+        },
+      }),
+    [create]
+  );

-  const bottomPlaceholderProps = useBottomPlaceholder({
-    gridRef,
-    disabled: noBottomPlaceholder,
+  const { data: marketIds } = useDataProvider({
+    dataProvider: positionsMarketsProvider,
+    variables: { partyIds },
+  });
+
+  const { data, error } = useDataProvider({
+    dataProvider: positionsMetricsProvider,
+    variables: { partyIds, marketIds: marketIds || [] },
+    skip: !marketIds,
  });

  return (
@@ -68,14 +70,12 @@ export const PositionsManager = ({
        pubKey={pubKey}
        pubKeys={pubKeys}
        rowData={error ? [] : data}
-        ref={gridRef}
        onMarketClick={onMarketClick}
        onClose={onClose}
        isReadOnly={isReadOnly}
-        {...bottomPlaceholderProps}
-        storeKey={storeKey}
        multipleKeys={partyIds.length > 1}
        overlayNoRowsTemplate={error ? error.message : t('No positions')}
+        {...gridProps}
      />
    </div>
  );
@@ -36,7 +36,6 @@ import { t } from '@vegaprotocol/i18n';
 import type { AgGridReact } from 'ag-grid-react';
 import type { Position } from './positions-data-providers';
 import * as Schema from '@vegaprotocol/types';
-import { getRowId } from './use-positions-data';
 import { PositionStatus, PositionStatusMapping } from '@vegaprotocol/types';
 import { DocsLinks } from '@vegaprotocol/environment';
 import { PositionTableActions } from './position-actions-dropdown';
@@ -49,7 +48,6 @@ interface Props extends TypedDataAgGrid<Position> {
  onMarketClick?: (id: string, metaKey?: boolean) => void;
  style?: CSSProperties;
  isReadOnly: boolean;
-  storeKey?: string;
  multipleKeys?: boolean;
  pubKeys?: VegaWalletContextShape['pubKeys'];
  pubKey?: VegaWalletContextShape['pubKey'];
@@ -86,6 +84,9 @@ export const AmountCell = ({ valueFormatted }: AmountCellProps) => {

 AmountCell.displayName = 'AmountCell';

+export const getRowId = ({ data }: { data: Position }) =>
+  `${data.partyId}-${data.marketId}`;
+
 export const PositionsTable = forwardRef<AgGridReact, Props>(
  (
    {
@@ -1,107 +0,0 @@
-import type { AgGridReact } from 'ag-grid-react';
-import { MockedProvider } from '@apollo/client/testing';
-import { renderHook, waitFor } from '@testing-library/react';
-import { usePositionsData } from './use-positions-data';
-import type { Position } from './positions-data-providers';
-
-let mockData: Position[] = [
-  {
-    marketName: 'M1',
-    marketId: 'market-0',
-    openVolume: '1',
-  },
-  {
-    marketName: 'M2',
-    marketId: 'market-1',
-    openVolume: '-1985',
-  },
-  {
-    marketName: 'M3',
-    marketId: 'market-2',
-    openVolume: '0',
-  },
-  {
-    marketName: 'M4',
-    marketId: 'market-3',
-    openVolume: '0',
-  },
-  {
-    marketName: 'M5',
-    marketId: 'market-4',
-    openVolume: '3',
-  },
-] as Position[];
-
-let mockDataProviderData = {
-  data: mockData,
-  error: undefined,
-  loading: false,
-  totalCount: undefined,
-};
-
-let updateMock: jest.Mock;
-const mockDataProvider = jest.fn((args) => {
-  updateMock = args.update;
-  return mockDataProviderData;
-});
-jest.mock('@vegaprotocol/data-provider', () => ({
-  ...jest.requireActual('@vegaprotocol/data-provider'),
-  useDataProvider: jest.fn((args) => mockDataProvider(args)),
-}));
-
-describe('usePositionData Hook', () => {
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-  const mockRefreshInfiniteCache = jest.fn();
-  const mockGetRowNode = jest
-    .fn()
-    .mockImplementation((id: string) =>
-      mockData.find((position) => position.marketId === id)
-    );
-  const partyIds = ['partyId'];
-  const anUpdatedOne = {
-    marketId: 'market-1',
-    openVolume: '1',
-  };
-  const gridRef = {
-    current: {
-      api: {
-        refreshInfiniteCache: mockRefreshInfiniteCache,
-        getRowNode: mockGetRowNode,
-        getModel: () => ({ getType: () => 'infinite' }),
-      },
-    } as unknown as AgGridReact,
-  };
-
-  it('should return proper data', async () => {
-    const { result } = renderHook(() => usePositionsData(partyIds, gridRef), {
-      wrapper: MockedProvider,
-    });
-    expect(result.current.data?.length ?? 0).toEqual(5);
-  });
-
-  it('should call mockRefreshInfiniteCache', async () => {
-    renderHook(() => usePositionsData(partyIds, gridRef), {
-      wrapper: MockedProvider,
-    });
-    await waitFor(() => {
-      updateMock({ delta: [anUpdatedOne] as Position[] });
-    });
-
-    expect(mockRefreshInfiniteCache).toHaveBeenCalledWith();
-  });
-
-  it('no data should return null', () => {
-    mockData = [];
-    mockDataProviderData = {
-      ...mockDataProviderData,
-      data: mockData,
-      loading: false,
-    };
-    const { result } = renderHook(() => usePositionsData(partyIds, gridRef), {
-      wrapper: MockedProvider,
-    });
-    expect(result.current.data).toEqual([]);
-  });
-});
@@ -1,81 +0,0 @@
-import { useCallback, useMemo, useRef } from 'react';
-import type { RefObject } from 'react';
-import type { AgGridReact } from 'ag-grid-react';
-import type { Position } from './positions-data-providers';
-import { positionsMetricsProvider } from './positions-data-providers';
-import type { PositionsQueryVariables } from './__generated__/Positions';
-import { updateGridData } from '@vegaprotocol/datagrid';
-import { useDataProvider } from '@vegaprotocol/data-provider';
-import type { GetRowsParams } from '@vegaprotocol/datagrid';
-import isEqual from 'lodash/isEqual';
-
-export const getRowId = ({
-  data,
-}: {
-  data: Position & { isLastPlaceholder?: boolean; id?: string };
-}) =>
-  data.isLastPlaceholder && data.id
-    ? data.id
-    : `${data.partyId}-${data.marketId}`;
-
-export const usePositionsData = (
-  partyIds: string[],
-  gridRef: RefObject<AgGridReact>
-) => {
-  const variables = useMemo<PositionsQueryVariables>(
-    () => ({ partyIds }),
-    [partyIds]
-  );
-  const dataRef = useRef<Position[] | null>(null);
-  const update = useCallback(
-    ({ data }: { data: Position[] | null }) => {
-      if (gridRef.current?.api?.getModel().getType() === 'infinite') {
-        return updateGridData(dataRef, data, gridRef);
-      }
-
-      const update: Position[] = [];
-      const add: Position[] = [];
-      data?.forEach((row) => {
-        const rowNode = gridRef.current?.api?.getRowNode(
-          getRowId({ data: row })
-        );
-        if (rowNode) {
-          if (!isEqual(rowNode.data, row)) {
-            update.push(row);
-          }
-        } else {
-          add.push(row);
-        }
-      });
-      gridRef.current?.api?.applyTransaction({
-        update,
-        add,
-        addIndex: 0,
-      });
-      return true;
-    },
-    [gridRef]
-  );
-  const { data, error, loading, reload } = useDataProvider({
-    dataProvider: positionsMetricsProvider,
-    update,
-    variables,
-  });
-  const getRows = useCallback(
-    async ({ successCallback, startRow, endRow }: GetRowsParams<Position>) => {
-      const rowsThisBlock = dataRef.current
-        ? dataRef.current.slice(startRow, endRow)
-        : [];
-      const lastRow = dataRef.current ? dataRef.current.length : 0;
-      successCallback(rowsThisBlock, lastRow);
-    },
-    []
-  );
-  return {
-    data,
-    error,
-    loading,
-    getRows,
-    reload,
-  };
-};
@@ -38,7 +38,6 @@ export const ProposalsList = () => {
        columnDefs={columnDefs}
        rowData={filteredData}
        defaultColDef={defaultColDef}
-        storeKey="proposedMarkets"
        getRowId={({ data }) => data.id}
        style={{ width: '100%', height: '100%' }}
        overlayNoRowsTemplate={error ? error.message : t('No markets')}
@@ -55,7 +55,6 @@ export const TradesTable = forwardRef<AgGridReact, Props>((props, ref) => {
      ref={ref}
      defaultColDef={{
        flex: 1,
-        resizable: true,
      }}
      {...props}
    >
@@ -45,7 +45,8 @@ export const Tabs = ({
                'cursor-default': isActive,
                'text-neutral-400 hover:text-neutral-500 dark:hover:text-neutral-300':
                  !isActive,
-              }
+              },
+              'flex items-center gap-2'
            );
            const borderClass = classNames(
              'absolute bottom-[-1px] left-0 w-full h-0 border-b',
@@ -58,6 +59,7 @@ export const Tabs = ({
                value={child.props.id}
                className={triggerClass}
              >
+                {child.props.indicator}
                {child.props.name}
                <span className={borderClass} />
              </TabsPrimitive.Trigger>
@@ -87,6 +89,7 @@ interface TabProps {
  children: ReactNode;
  id: string;
  name: string;
+  indicator?: ReactNode;
  hidden?: boolean;
 }

@@ -18,6 +18,8 @@ export type ToastContent = JSX.Element | undefined;

 type ToastState = 'initial' | 'showing' | 'expired';

+type WithdrawalInfoMeta = { withdrawalId: string | undefined };
+
 export type Toast = {
  id: string;
  intent: Intent;
@@ -26,6 +28,9 @@ export type Toast = {
  onClose?: () => void;
  signal?: 'close';
  loader?: boolean;
+  hidden?: boolean;
+  // meta information
+  meta?: WithdrawalInfoMeta | undefined;
 };

 type ToastProps = Toast & {
@@ -13,11 +13,13 @@ import { Portal } from '@radix-ui/react-portal';
 type ToastsContainerProps = {
  toasts: Toasts;
  order: 'asc' | 'desc';
+  showHidden?: boolean;
 };

 export const ToastsContainer = ({
  toasts,
  order = 'asc',
+  showHidden = false,
 }: ToastsContainerProps) => {
  const ref = useRef<HTMLDivElement>();
  const closeAll = useToasts((store) => store.closeAll);
@@ -41,6 +43,10 @@ export const ToastsContainer = ({
    };
  }, [count, order, toasts]);

+  const validToasts = Object.values(toasts).filter(
+    (t) => !t.hidden || showHidden
+  );
+
  return (
    <Portal
      ref={ref as Ref<HTMLDivElement>}
@@ -71,14 +77,16 @@ export const ToastsContainer = ({
          'flex-col-reverse': order === 'desc',
        })}
      >
-        {toasts &&
-          Object.values(toasts).map((toast) => {
-            return (
-              <li key={toast.id}>
-                <Toast {...toast} />
-              </li>
-            );
-          })}
+        {validToasts.length > 0 &&
+          validToasts
+            .filter((t) => !t.hidden || showHidden)
+            .map((toast) => {
+              return (
+                <li key={toast.id}>
+                  <Toast {...toast} />
+                </li>
+              );
+            })}
        <Button
          title={t('Dismiss all toasts')}
          size="sm"
@@ -89,7 +97,7 @@ export const ToastsContainer = ({
            'opacity-0 group-hover:opacity-50 hover:!opacity-100',
            'text-sm text-black dark:text-white bg-white dark:bg-black hover:!bg-white hover:dark:!bg-black',
            {
-              hidden: Object.keys(toasts).length === 0,
+              hidden: validToasts.length === 0,
            }
          )}
          onClick={() => {
@@ -46,12 +46,20 @@ type Actions = {
   * Arbitrary removes all toasts
   */
  removeAll: () => void;
+  /**
+   * Checks if a given toasts exists in the collection
+   */
+  hasToast: (id: string) => boolean;
+  /**
+   * Closes toast by meta
+   */
+  closeBy: (meta: Toast['meta']) => void;
 };

 type ToastsStore = State & Actions;

 export const useToasts = create<ToastsStore>()(
-  immer((set) => ({
+  immer((set, get) => ({
    toasts: {},
    count: 0,
    add: (toast) =>
@@ -97,6 +105,18 @@ export const useToasts = create<ToastsStore>()(
        }
      }),
    removeAll: () => set({ toasts: {}, count: 0 }),
+    hasToast: (id) => get().toasts[id] != null,
+    closeBy: (meta) => {
+      if (!meta) return;
+      set((state) => {
+        const found = Object.values(state.toasts).find((t) =>
+          isEqual(t.meta, meta)
+        );
+        if (found) {
+          found.signal = 'close';
+        }
+      });
+    },
  }))
 );

@@ -10,7 +10,7 @@ import {
 import type { ITooltipParams } from 'ag-grid-community';

 const tooltipContentClasses =
-  'max-w-sm bg-vega-light-100 dark:bg-vega-dark-100 border border-vega-light-200 dark:border-vega-dark-200 px-2 py-1 z-20 rounded text-xs break-word';
+  'max-w-sm bg-vega-light-100 dark:bg-vega-dark-100 border border-vega-light-200 dark:border-vega-dark-200 px-2 py-1 z-20 rounded text-xs text-black dark:text-white break-word';
 export interface TooltipProps {
  children: React.ReactElement;
  description?: string | ReactNode;
@@ -27,3 +27,4 @@ export * from './lib/web3-connectors';
 export * from './lib/web3-provider';
 export * from './lib/withdrawal-approval-dialog';
 export * from './lib/withdrawal-approval-status';
+export * from './lib/default-web3-provider';
@@ -16,3 +16,6 @@ export const getChainName = (chainId: number | null | undefined) => {
 */
 export const WALLETCONNECT_PROJECT_ID =
  process.env['NX_WALLETCONNECT_PROJECT_ID'] || '';
+
+export const ETHEREUM_PROVIDER_URL =
+  process.env['NX_ETHEREUM_PROVIDER_URL'] || '';
@@ -0,0 +1,19 @@
+import type { ethers } from 'ethers';
+import { createContext, useContext } from 'react';
+
+export type DefaultWeb3ProviderContextShape = {
+  provider?: ethers.providers.JsonRpcProvider;
+};
+export const DefaultWeb3ProviderContext = createContext<
+  DefaultWeb3ProviderContextShape | undefined
+>(undefined);
+
+export const useDefaultWeb3Provider = () => {
+  const context = useContext(DefaultWeb3ProviderContext);
+  if (context === undefined) {
+    throw new Error(
+      'useDefaultWeb3Provider must be used within DefaultWeb3ProviderContext'
+    );
+  }
+  return context;
+};
@@ -2,23 +2,40 @@ import { CollateralBridge } from '@vegaprotocol/smart-contracts';
 import { useWeb3React } from '@web3-react/core';
 import { useMemo } from 'react';
 import { useEthereumConfig } from './use-ethereum-config';
+import { useDefaultWeb3Provider } from './default-web3-provider';
+import { localLoggerFactory } from '@vegaprotocol/logger';

-export const useBridgeContract = () => {
-  const { provider } = useWeb3React();
+export const useBridgeContract = (allowDefaultProvider = false) => {
+  const { provider: activeProvider } = useWeb3React();
+  const { provider: defaultProvider } = useDefaultWeb3Provider();
  const { config } = useEthereumConfig();
+  const logger = localLoggerFactory({ application: 'web3' });
+
+  const provider = useMemo(() => {
+    if (!activeProvider && allowDefaultProvider) {
+      logger.info('will use default web3 provider');
+      return defaultProvider;
+    }
+    return activeProvider;
+  }, [activeProvider, allowDefaultProvider, defaultProvider, logger]);
+
+  // this has to be memoized, otherwise it ticks like crazy
+  const signer = useMemo(() => {
+    return !activeProvider && allowDefaultProvider
+      ? undefined
+      : activeProvider?.getSigner();
+  }, [activeProvider, allowDefaultProvider]);

  const contract = useMemo(() => {
    if (!provider || !config) {
      return null;
    }

-    const signer = provider.getSigner();
-
    return new CollateralBridge(
      config.collateral_bridge_contract.address,
      signer || provider
    );
-  }, [provider, config]);
+  }, [provider, signer, config]);

  return contract;
 };
@@ -4,7 +4,10 @@ import type { MultisigControl } from '@vegaprotocol/smart-contracts';
 import type { CollateralBridge } from '@vegaprotocol/smart-contracts';
 import type { Token } from '@vegaprotocol/smart-contracts';

-import type { DepositBusEventFieldsFragment } from '@vegaprotocol/wallet';
+import type {
+  DepositBusEventFieldsFragment,
+  WithdrawalBusEventFieldsFragment,
+} from '@vegaprotocol/wallet';

 import type { EthTxState } from './use-ethereum-transaction';
 import { EthTxStatus } from './use-ethereum-transaction';
@@ -27,6 +30,7 @@ export interface EthStoredTxState extends EthTxState {
  requiresConfirmation: boolean; // whether or not the tx needs external confirmation (IE from a subscription even)
  assetId?: string;
  deposit?: DepositBusEventFieldsFragment;
+  withdrawal?: WithdrawalBusEventFieldsFragment;
 }

 export interface EthTransactionStore {
@@ -37,7 +41,8 @@ export interface EthTransactionStore {
    args: string[],
    assetId?: string,
    requiredConfirmations?: number,
-    requiresConfirmation?: boolean
+    requiresConfirmation?: boolean,
+    withdrawal?: EthStoredTxState['withdrawal']
  ) => number;
  update: (
    id: EthStoredTxState['id'],
@@ -62,7 +67,8 @@ export const useEthTransactionStore = create<EthTransactionStore>()(
      args: string[] = [],
      assetId?: string,
      requiredConfirmations = 1,
-      requiresConfirmation = false
+      requiresConfirmation = false,
+      withdrawal = undefined
    ) => {
      const transactions = get().transactions;
      const now = new Date();
@@ -82,6 +88,7 @@ export const useEthTransactionStore = create<EthTransactionStore>()(
        requiredConfirmations,
        requiresConfirmation,
        assetId,
+        withdrawal,
      };
      set({ transactions: transactions.concat(transaction) });
      return transaction.id;
@@ -162,9 +162,10 @@ const isFinal = (tx: EthStoredTxState) =>
  [EthTxStatus.Confirmed, EthTxStatus.Error].includes(tx.status);

 export const useEthereumTransactionToasts = () => {
-  const [setToast, removeToast] = useToasts((store) => [
+  const [setToast, removeToast, closeToastBy] = useToasts((store) => [
    store.setToast,
    store.remove,
+    store.closeBy,
  ]);

  const dismissTx = useEthTransactionStore((state) => state.dismiss);
@@ -173,8 +174,16 @@ export const useEthereumTransactionToasts = () => {
    (tx: EthStoredTxState) => () => {
      dismissTx(tx.id);
      removeToast(`eth-${tx.id}`);
+      // closes related "Funds released" toast after successful withdrawal
+      if (
+        isWithdrawTransaction(tx) &&
+        tx.status === EthTxStatus.Confirmed &&
+        tx.withdrawal
+      ) {
+        closeToastBy({ withdrawalId: tx.withdrawal.id });
+      }
    },
-    [dismissTx, removeToast]
+    [closeToastBy, dismissTx, removeToast]
  );

  const fromEthTransaction = useCallback(
@@ -298,14 +298,19 @@ describe('useEthWithdrawApprovalsManager', () => {
    mockEthTransactionStoreState.mockReturnValue({ create });
    render();
    await waitForNextTick();
-    expect(create).toBeCalledWith({}, 'withdraw_asset', [
-      erc20WithdrawalApproval.assetSource,
-      erc20WithdrawalApproval.amount,
-      erc20WithdrawalApproval.targetAddress,
-      erc20WithdrawalApproval.creation,
-      erc20WithdrawalApproval.nonce,
-      erc20WithdrawalApproval.signatures,
-    ]);
+    expect(create).toHaveBeenCalled();
+    expect(create.mock.calls[0][0]).toEqual({});
+    expect(create.mock.calls[0][1]).toEqual('withdraw_asset');
+    expect(create.mock.calls[0][2]).toEqual(
+      expect.arrayContaining([
+        erc20WithdrawalApproval.assetSource,
+        erc20WithdrawalApproval.amount,
+        erc20WithdrawalApproval.targetAddress,
+        erc20WithdrawalApproval.creation,
+        erc20WithdrawalApproval.nonce,
+        erc20WithdrawalApproval.signatures,
+      ])
+    );
  });

  it('detect wrong chainId', () => {
@@ -91,7 +91,8 @@ export const useEthWithdrawApprovalsManager = () => {
      if (threshold && amount.isGreaterThan(threshold)) {
        const delaySecs = await getDelay();
        const completeTimestamp =
-          new Date(withdrawal.createdTimestamp).getTime() + delaySecs * 1000;
+          new Date(withdrawal.createdTimestamp).getTime() +
+          (delaySecs as number) * 1000;
        const now = Date.now();
        if (now < completeTimestamp) {
          update(transaction.id, {
@@ -139,7 +140,11 @@ export const useEthWithdrawApprovalsManager = () => {
          approval.creation,
          approval.nonce,
          approval.signatures,
-        ]
+        ],
+        undefined,
+        undefined,
+        undefined,
+        transaction.withdrawal || undefined
      );
    })().catch((err) => {
      localLoggerFactory({ application: 'web3' }).error(
@@ -3,21 +3,44 @@ import { useCallback } from 'react';
 import { localLoggerFactory } from '@vegaprotocol/logger';

 /**
- * Gets the delay in seconds thats required if the withdrawal amount is
- * over the withdrawal threshold (contract.get_withdraw_threshold)
+ * The withdraw delay is a global value set on the contract bridge which may be
+ * changed via a proposal therefore it can be cached for a set amount of time
+ * (MAX_AGE) and re-retrieved when necessary.
+ */
+
+const MAX_AGE = 5 * 60 * 1000; // 5 minutes
+
+type TimestampedDelay = { value: number | undefined; ts: number };
+const DELAY: TimestampedDelay = { value: undefined, ts: 0 };
+
+/**
+ * Returns a function that gets the delay in seconds that's required if the
+ * withdrawal amount is over the withdrawal threshold
+ * (contract.get_withdraw_threshold)
 */
 export const useGetWithdrawDelay = () => {
-  const contract = useBridgeContract();
+  const contract = useBridgeContract(true);
+  const logger = localLoggerFactory({ application: 'web3' });
+
  const getDelay = useCallback(async () => {
-    const logger = localLoggerFactory({ application: 'web3' });
-    try {
-      logger.info('get withdraw delay', { contract: contract?.toString() });
-      const res = await contract?.default_withdraw_delay();
-      return res.toNumber();
-    } catch (err) {
-      logger.error('get withdraw delay', err);
+    if (DELAY.value != null && Date.now() - DELAY.ts <= MAX_AGE) {
+      return DELAY.value;
    }
-  }, [contract]);
+    if (!contract) {
+      logger.info('could not get withdraw delay: no bridge contract');
+      return undefined;
+    }
+    try {
+      const res = await contract?.default_withdraw_delay();
+      logger.info(`retrieved withdraw delay: ${res} seconds`);
+      DELAY.value = res.toNumber();
+      DELAY.ts = Date.now();
+      return res.toNumber() as number;
+    } catch (err) {
+      logger.error('could not get withdraw delay', err);
+      return undefined;
+    }
+  }, [contract, logger]);

  return getDelay;
 };
@@ -3,33 +3,74 @@ import { useBridgeContract } from './use-bridge-contract';
 import BigNumber from 'bignumber.js';
 import { addDecimal } from '@vegaprotocol/utils';
 import type { WithdrawalBusEventFieldsFragment } from '@vegaprotocol/wallet';
+import { localLoggerFactory } from '@vegaprotocol/logger';
+
+type Asset = Pick<
+  WithdrawalBusEventFieldsFragment['asset'],
+  'source' | 'decimals'
+>;

 /**
- * Returns a function to get the threshold amount for a withdrawal. If a withdrawal amount
- * is greater than this value it will incur a delay before being able to be completed. The delay is set
- * on the smart contract and can be retrieved using contract.default_withdraw_delay
+ * The withdraw threshold is a value set on the contract bridge per asset which
+ * may be changed via a proposal therefore it can be cached for a set amount of
+ * time (MAX_AGE) and re-retrieved when necessary.
+ */
+
+const MAX_AGE = 5 * 60 * 1000; // 5 minutes
+
+export const BUILTIN_ASSET_ADDRESS = 'builtin';
+export const BUILTIN_ASSET_THRESHOLD = new BigNumber(Infinity);
+type TimestampedThreshold = { value: BigNumber; ts: number };
+const THRESHOLDS: Record<string, TimestampedThreshold> = {};
+const setThreshold = (address: string, value: BigNumber) =>
+  (THRESHOLDS[address] = { value, ts: Date.now() });
+
+export const addr = (asset: Asset | undefined) =>
+  asset && asset.source.__typename === 'ERC20'
+    ? asset.source.contractAddress
+    : BUILTIN_ASSET_ADDRESS;
+
+/**
+ * Returns a function to get the threshold amount for a withdrawal.
+ * If a withdrawal amount is greater than this value it will incur a delay
+ * before being able to be completed. The delay is set on the smart contract and
+ * can be retrieved using contract.default_withdraw_delay
 */
 export const useGetWithdrawThreshold = () => {
-  const contract = useBridgeContract();
+  const logger = localLoggerFactory({ application: 'web3' });
+  const contract = useBridgeContract(true);
+
  const getThreshold = useCallback(
-    async (
-      asset:
-        | Pick<WithdrawalBusEventFieldsFragment['asset'], 'source' | 'decimals'>
-        | undefined
-    ) => {
-      if (!contract || asset?.source.__typename !== 'ERC20') {
-        return new BigNumber(Infinity);
+    async (asset: Asset | undefined) => {
+      const contractAddress = addr(asset);
+      // return cached value if still valid
+      const thr = THRESHOLDS[contractAddress];
+      if (thr && Date.now() - thr.ts <= MAX_AGE) {
+        return thr.value;
+      }
+      if (!contract || !asset || contractAddress === BUILTIN_ASSET_ADDRESS) {
+        setThreshold(BUILTIN_ASSET_ADDRESS, BUILTIN_ASSET_THRESHOLD);
+        return BUILTIN_ASSET_THRESHOLD;
+      }
+      try {
+        const res = await contract.get_withdraw_threshold(contractAddress);
+        const value = new BigNumber(addDecimal(res.toString(), asset.decimals));
+        const threshold = value.isEqualTo(0)
+          ? new BigNumber(Infinity)
+          : value.minus(new BigNumber(addDecimal('1', asset.decimals)));
+        logger.info(
+          `retrieved withdraw threshold for ${addr(
+            asset
+          )}: ${threshold.toString()}`
+        );
+        setThreshold(contractAddress, threshold);
+        return threshold;
+      } catch (err) {
+        logger.error('could not get the withdraw thresholds', err);
+        return undefined;
      }
-      const res = await contract.get_withdraw_threshold(
-        asset.source.contractAddress
-      );
-      const value = new BigNumber(addDecimal(res.toString(), asset.decimals));
-      const threshold = value.isEqualTo(0)
-        ? new BigNumber(Infinity)
-        : value.minus(new BigNumber(addDecimal('1', asset.decimals)));
-      return threshold;
    },
-    [contract]
+    [contract, logger]
  );

  return getThreshold;
@@ -666,6 +666,12 @@ export const useVegaTransactionToasts = () => {
    const closeAfter =
      isFinal(tx) && !isWithdrawTransaction(tx.body) ? CLOSE_AFTER : undefined;

+    // marks "Funds unlocked" toast so it can be found in eth toasts
+    const meta =
+      isFinal(tx) && isWithdrawTransaction(tx.body)
+        ? { withdrawalId: tx.withdrawal?.id }
+        : undefined;
+
    return {
      id: `vega-${tx.id}`,
      intent,
@@ -673,6 +679,7 @@ export const useVegaTransactionToasts = () => {
      loader: tx.status === VegaTxStatus.Pending,
      content,
      closeAfter,
+      meta,
    };
  };

@@ -9,6 +9,11 @@ import { initializeUrlConnector } from './url-connector';
 import { WALLETCONNECT_PROJECT_ID } from './constants';
 import { useWeb3ConnectStore } from './web3-connect-store';
 import { theme } from '@vegaprotocol/tailwindcss-config';
+import { ethers } from 'ethers';
+
+export const createDefaultProvider = (providerUrl: string, chainId: number) => {
+  return new ethers.providers.JsonRpcProvider(providerUrl, chainId);
+};

 export const initializeCoinbaseConnector = (providerUrl: string) =>
  initializeConnector<CoinbaseWallet>(
@@ -1,14 +1,21 @@
-import type { Web3ReactHooks } from '@web3-react/core';
-import { Web3ReactProvider } from '@web3-react/core';
-import type { Connector } from '@web3-react/types';
 import { useMemo } from 'react';
+import { Web3ReactProvider } from '@web3-react/core';
+import type { Web3ReactHooks } from '@web3-react/core';
+import type { Connector } from '@web3-react/types';
+import type { DefaultWeb3ProviderContextShape } from './default-web3-provider';
+import { DefaultWeb3ProviderContext } from './default-web3-provider';

 interface Web3ProviderProps {
  children: JSX.Element | JSX.Element[];
  connectors: [Connector, Web3ReactHooks][];
+  defaultProvider?: DefaultWeb3ProviderContextShape['provider'];
 }

-export const Web3Provider = ({ children, connectors }: Web3ProviderProps) => {
+export const Web3Provider = ({
+  children,
+  connectors,
+  defaultProvider,
+}: Web3ProviderProps) => {
  /**
   * The connectors prop passed to Web3ReactProvider must be referentially static.
   * https://github.com/Uniswap/web3-react/blob/31742897f9fddb38e00e36c2516029d3df9a9c54/packages/core/src/provider.tsx#L66
@@ -20,8 +27,10 @@ export const Web3Provider = ({ children, connectors }: Web3ProviderProps) => {
  );

  return (
-    <Web3ReactProvider key={key} connectors={connectors}>
-      {children}
-    </Web3ReactProvider>
+    <DefaultWeb3ProviderContext.Provider value={{ provider: defaultProvider }}>
+      <Web3ReactProvider key={key} connectors={connectors}>
+        {children}
+      </Web3ReactProvider>
+    </DefaultWeb3ProviderContext.Provider>
  );
 };
@@ -11,3 +11,4 @@ export * from './lib/withdrawal-dialog';
 export * from './lib/withdrawal-feedback';
 export * from './lib/withdrawals-provider';
 export * from './lib/withdrawals-table';
+export * from './lib/use-ready-to-complete-withdrawals-toast';
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Matthew Russell	598cfbd372	chore: tidy imports	2023-06-26 14:30:11 -07:00
Matthew Russell	0fd277f7cc	chore: remove unnecessary spreading of store slice	2023-06-26 14:24:41 -07:00
Matthew Russell	212a8f6409	chore: lint	2023-06-26 14:20:36 -07:00
Matthew Russell	fdbb41a27c	test: add test for orders-container hooks	2023-06-26 14:20:36 -07:00
Matthew Russell	72d8805b52	chore: use separate selectors for get and set store	2023-06-26 14:20:36 -07:00
Matthew Russell	e78dd4206c	chore: move custom orders container logic to own hook	2023-06-26 14:20:36 -07:00
Matthew Russell	5f3414cfec	chore: revert setting of row data	2023-06-26 14:20:36 -07:00
Matthew Russell	0bf1efc3c9	fix: order filters	2023-06-26 14:20:36 -07:00
Matthew Russell	475fa9768a	chore: split orderlist store selectors	2023-06-26 14:20:36 -07:00
Matthew Russell	709076724f	chore: used shared data grid store type	2023-06-26 14:20:36 -07:00
Matthew Russell	d9d4d5529d	chore: remove subscribe selector from orders store	2023-06-26 14:20:36 -07:00
Matthew Russell	f3607a77ab	feat: add shared data grid slice for grid store logic	2023-06-26 14:20:36 -07:00
Matthew Russell	5fa7078833	chore: remove unnecessary usage of subscribeWithSelector	2023-06-26 14:20:36 -07:00
Matthew Russell	ccd0007e36	test: separate column width set and get tests	2023-06-26 14:20:36 -07:00
Matthew Russell	7d3c2ff44c	chore: make AccountsManager optionally take grid props	2023-06-26 14:20:36 -07:00
Matthew Russell	420b58c6ea	chore: remove test warnings and stray log	2023-06-26 14:20:36 -07:00
Matthew Russell	287a0cae58	test: add unit test for use-datagrid-events hook	2023-06-26 14:20:35 -07:00
Matthew Russell	c4decf3f2d	chore: rename data grid hook	2023-06-26 14:20:34 -07:00
Matthew Russell	43012d8cdd	chore: delete useColumnSizes hook	2023-06-26 14:19:08 -07:00
Matthew Russell	4c6af7bfc6	chore: make buttons overlay bottom rows	2023-06-26 14:19:08 -07:00
Matthew Russell	92bf90e976	test: add mocked gridProps to account manager test	2023-06-26 14:19:08 -07:00
Matthew Russell	d9d45451bb	chore: delete bottom placeholder hook	2023-06-26 14:19:08 -07:00
Matthew Russell	d059b3f710	feat: update other tables to use stored grid data	2023-06-26 14:19:08 -07:00
Matthew Russell	0152720006	feat: update other tables to use stored grid data	2023-06-26 14:19:06 -07:00
Matthew Russell	0d41f2a3cf	chore: improve types and add debounce	2023-06-26 14:15:45 -07:00
Matthew Russell	a3bb50fdc5	refactor: store column state and filter model	2023-06-26 14:15:45 -07:00
Matthew Russell	84e19427c7	feat: remove column sizes use and store key props	2023-06-26 14:15:44 -07:00
Matthew Russell	77a391448b	fix(liquidity): use LiquidityProvision id (#4191 )	2023-06-26 20:43:28 +00:00
ArtandBartłomiej Głownia	484d7888cf	feat(web3): ready to withdraw toast (#4142 ) Co-authored-by: Bartłomiej Głownia <bglownia@gmail.com>	2023-06-26 16:28:14 +02:00
Joe Tsang	187f1929fe	chore(governance): increase epoch timeout (#4185 )	2023-06-26 14:09:44 +00:00
Matthew Russell	0a4333645b	chore(trading,governance,explorer): re-enable nx-cloud (#4182 )	2023-06-26 14:47:22 +02:00
Bartłomiej Głownia	310506e5af	feat(positions): live update market data in positions table (#4154 )	2023-06-26 12:50:57 +02:00
Joe Tsang	0b33ed4299	test(governance): 3802 multisig error test (#4169 )	2023-06-26 10:21:13 +01:00
Matthew Russell	13f2e51798	chore(ui-toolkit): remove forwardRef as refs weren't being passed (#4160 )	2023-06-23 15:36:21 -07:00
Bartłomiej Głownia	fc047feeee	fix(trading): avoid items remounting in MarketSelector List (#4162 )	2023-06-23 15:35:50 -07:00
Bartłomiej Głownia	005455c870	chore(orders): use columnDefs in orders list, fix sorting by size and filled (#4170 )	2023-06-23 15:33:25 -07:00
daro-maj	2c2bc391e8	test(trading): chart depth e2e tests (#4171 )	2023-06-23 15:13:28 +02:00
m.ray	445a085190	fix(trading): market info number formatting (#4163 )	2023-06-23 12:44:18 +01:00
Sam Keen	bb1b236cdf	feat(governance): show multisig penalty in tooltip (#4140 )	2023-06-22 09:43:46 +01:00
Joe Tsang	da66b7b20d	test(governance): test market details specifications (#4153 )	2023-06-22 08:32:33 +01:00