fix(4422): jest tests updated

.github/workflows/ci-cd-trigger.yml

@@ -137,7 +137,7 @@ jobs:
     secrets: inherit
     with:
       projects: ${{ needs.lint-test-build.outputs.projects-e2e }}
-      tags: '@smoke'
+      tags: '@smoke @regression'
 
   publish-dist:
     needs: lint-test-build

apps/explorer-e2e/cypress.config.js

@@ -23,7 +23,6 @@ module.exports = defineConfig({
     viewportWidth: 1440,
     viewportHeight: 900,
     testIsolation: false,
-    experimentalMemoryManagement: true,
   },
   env: {
     environment: 'CUSTOM',

apps/explorer-e2e/src/integration/market.cy.js

@@ -1,8 +1,8 @@
-import { createSuccessorMarketProposal } from '../support/governance.functions';
-
 context('Market page', { tags: '@regression' }, function () {
   describe('Verify elements on page', function () {
     const marketHeaders = 'markets-heading';
+    const createdMarketId =
+      '2eab0e66545a789047561bc5a2e5cbc3b19eb708da41104e3cac2474ee36c4d4';
 
     before('Create market', function () {
       cy.visit('/');
@@ -11,7 +11,7 @@ context('Market page', { tags: '@regression' }, function () {
 
     beforeEach('Get market id', function () {
       cy.navigate_to('markets');
-      cy.get('[col-id="id"]').last().invoke('text').as('createdMarketId');
+      cy.get('[col-id="id"]').eq(1).invoke('text').as('createdMarketId');
     });
 
     it('Market displayed on market page', function () {
@@ -106,7 +106,6 @@ context('Market page', { tags: '@regression' }, function () {
       // Able to view Json
       cy.contains('View JSON').click();
       cy.get('.language-json').should('exist');
-      cy.getByTestId('icon-cross').click();
     });
 
     // Skipping due to resize observer loop limit error
@@ -114,60 +113,17 @@ context('Market page', { tags: '@regression' }, function () {
       cy.common_switch_to_mobile_and_click_toggle();
       cy.navigate_to('markets', true);
       cy.getByTestId(marketHeaders).should('be.visible');
-      cy.get(`[row-id="${this.createdMarketId}"]`)
+      cy.get(`[row-id="${createdMarketId}"]`)
         .should('be.visible')
         .within(() => {
           cy.get_element_by_col_id('code').should('have.text', 'TEST.24h');
           cy.get_element_by_col_id('name').should('have.text', 'Test market 1');
           cy.get_element_by_col_id('state').should('have.text', 'Pending');
           cy.get_element_by_col_id('asset').should('have.text', 'fUSDC');
-          cy.get_element_by_col_id('id').should(
-            'have.text',
-            this.createdMarketId
-          );
+          cy.get_element_by_col_id('id').should('have.text', createdMarketId);
           cy.get_element_by_col_id('actions')
             .find('a')
-            .should('have.attr', 'href', `/markets/${this.createdMarketId}`);
-        });
-    });
-
-    it('Able to go to market details page for successor market', function () {
-      const successionLineItem = 'succession-line-item';
-      const successionLineMarketId = 'succession-line-item-market-id';
-
-      createSuccessorMarketProposal(this.createdMarketId);
-      cy.navigate_to('markets');
-      cy.reload();
-      cy.contains('Token test market', { timeout: 8000 }).should('be.visible');
-      cy.get('[row-index="0"]')
-        .invoke('attr', 'row-id')
-        .as('successorMarketId');
-      cy.contains('Token test market').click();
-      cy.getByTestId(marketHeaders).should('have.text', 'Token test market');
-      cy.validate_proposal_change_type('Triggering Ratio', 'Added');
-      cy.validate_element_from_table('Triggering Ratio', '0.7');
-      cy.validate_proposal_change_type('Time Window', 'Added');
-      cy.validate_element_from_table('Time Window', '3,600');
-      cy.validate_proposal_change_type('Scaling Factor', 'Added');
-      cy.validate_element_from_table('Scaling Factor', '10');
-
-      cy.getByTestId(successionLineItem)
-        .first()
-        .within(() => {
-          cy.contains('Test market 1');
-          cy.getByTestId(successionLineMarketId).should(
-            'have.text',
-            this.createdMarketId
-          );
-        });
-      cy.getByTestId(successionLineItem)
-        .eq(1)
-        .within(() => {
-          cy.contains('Token test market');
-          cy.getByTestId(successionLineMarketId).should(
-            'have.text',
-            this.successorMarketId
-          );
+            .should('have.attr', 'href', `/markets/${createdMarketId}`);
         });
     });
   });

apps/explorer-e2e/src/integration/proposal.cy.js

@@ -13,31 +13,28 @@ context('Proposal page', { tags: '@smoke' }, function () {
     it('Able to view proposal', function () {
       cy.navigate_to('governanceProposals');
       cy.getByTestId(proposalHeading).should('be.visible');
-      cy.contains(proposalTitle)
-        .parent()
-        .parent()
-        .parent()
-        .within(() => {
-          cy.get_element_by_col_id('title').should('have.text', proposalTitle);
-          cy.get_element_by_col_id('type').should('have.text', 'NewMarket');
-          cy.get_element_by_col_id('state').should('have.text', 'Enacted');
-          cy.getByTestId('vote-progress').should('be.visible');
-          cy.get('[col-id="cDate"]')
-            .invoke('text')
-            .should('match', dateTimeRegex);
-          cy.get('[col-id="eDate"]')
-            .invoke('text')
-            .should('match', dateTimeRegex);
-          cy.getByTestId('external-link')
-            .should('have.attr', 'href')
-            .and('contains', 'https://governance.fairground.wtf/proposals/');
-          cy.contains('View terms').should('exist').click();
-        });
+      // get first proposal in list
+      cy.get('[row-index="0"]').within(() => {
+        cy.get_element_by_col_id('title').should('have.text', proposalTitle);
+        cy.get_element_by_col_id('type').should('have.text', 'NewMarket');
+        cy.get_element_by_col_id('state').should('have.text', 'Enacted');
+        cy.getByTestId('vote-progress').should('be.visible');
+        cy.get('[col-id="cDate"]')
+          .invoke('text')
+          .should('match', dateTimeRegex);
+        cy.get('[col-id="eDate"]')
+          .invoke('text')
+          .should('match', dateTimeRegex);
+        cy.getByTestId('external-link')
+          .should('have.attr', 'href')
+          .and('contains', 'https://governance.fairground.wtf/proposals/');
+        cy.contains('View terms').should('exist').click();
+      });
       cy.getByTestId('dialog-title').should('have.text', proposalTitle);
       cy.get('.language-json').should('exist');
     });
 
-    it.skip('Proposal page displayed on mobile', function () {
+    it('Proposal page displayed on mobile', function () {
       cy.common_switch_to_mobile_and_click_toggle();
       cy.navigate_to('governanceProposals', true);
       cy.getByTestId(proposalHeading).should('be.visible');

apps/explorer-e2e/src/support/common.functions.js

@@ -127,10 +127,3 @@ Cypress.Commands.add(
       .should('have.text', tableRowValue);
   }
 );
-
-Cypress.Commands.add(
-  'validate_proposal_change_type',
-  (tableRowName, changeType) => {
-    cy.contains(tableRowName).siblings().should('have.text', changeType);
-  }
-);

apps/explorer-e2e/src/support/governance.functions.js

@@ -1,130 +0,0 @@
-export function createSuccessorMarketProposal(parentMarketId) {
-  cy.VegaWalletSubmitProposal(getSuccessorTxBody(parentMarketId));
-}
-
-function getSuccessorTxBody(parentMarketId) {
-  return {
-    proposalSubmission: {
-      rationale: {
-        title: 'Test successor market proposal details',
-        description: 'E2E test for successor market',
-      },
-      terms: {
-        newMarket: {
-          changes: {
-            decimalPlaces: '5',
-            positionDecimalPlaces: '5',
-            linearSlippageFactor: '0.001',
-            quadraticSlippageFactor: '0',
-            lpPriceRange: '10',
-            instrument: {
-              name: 'Token test market',
-              code: 'TEST.24h',
-              future: {
-                settlementAsset:
-                  '816af99af60d684502a40824758f6b5377e6af48e50a9ee8ef478ecb879ea8bc',
-                quoteName: 'fUSDC',
-                dataSourceSpecForSettlementData: {
-                  external: {
-                    oracle: {
-                      signers: [
-                        {
-                          pubKey: {
-                            key: '70d14a321e02e71992fd115563df765000ccc4775cbe71a0e2f9ff5a3b9dc680',
-                          },
-                        },
-                      ],
-                      filters: [
-                        {
-                          key: {
-                            name: 'prices.BTC.value',
-                            type: 'TYPE_INTEGER',
-                            numberDecimalPlaces: '0',
-                          },
-                          conditions: [
-                            {
-                              operator: 'OPERATOR_GREATER_THAN',
-                              value: '0',
-                            },
-                          ],
-                        },
-                      ],
-                    },
-                  },
-                },
-                dataSourceSpecForTradingTermination: {
-                  external: {
-                    oracle: {
-                      signers: [
-                        {
-                          pubKey: {
-                            key: '70d14a321e02e71992fd115563df765000ccc4775cbe71a0e2f9ff5a3b9dc680',
-                          },
-                        },
-                      ],
-                      filters: [
-                        {
-                          key: {
-                            name: 'trading.terminated.ETH5',
-                            type: 'TYPE_BOOLEAN',
-                          },
-                          conditions: [
-                            {
-                              operator: 'OPERATOR_EQUALS',
-                              value: 'true',
-                            },
-                          ],
-                        },
-                      ],
-                    },
-                  },
-                },
-                dataSourceSpecBinding: {
-                  settlementDataProperty: 'prices.BTC.value',
-                  tradingTerminationProperty: 'trading.terminated.ETH5',
-                },
-              },
-            },
-            metadata: [
-              'sector:food',
-              'sector:materials',
-              'source:docs.vega.xyz',
-            ],
-            priceMonitoringParameters: {
-              triggers: [
-                {
-                  horizon: '43200',
-                  probability: '0.9999999',
-                  auctionExtension: '600',
-                },
-              ],
-            },
-            liquidityMonitoringParameters: {
-              targetStakeParameters: {
-                timeWindow: '3600',
-                scalingFactor: 10,
-              },
-              triggeringRatio: '0.7',
-              auctionExtension: '1',
-            },
-            logNormal: {
-              tau: 0.0001140771161,
-              riskAversionParameter: 0.01,
-              params: {
-                mu: 0,
-                r: 0.016,
-                sigma: 0.5,
-              },
-            },
-            successor: {
-              parentMarketId: parentMarketId,
-              insurancePoolFraction: '0.75',
-            },
-          },
-        },
-        closingTimestamp: 1695666618,
-        enactmentTimestamp: 1695666618,
-      },
-    },
-  };
-}

apps/explorer/src/index.html

@@ -17,7 +17,7 @@
     <meta name="og:site_name" content="Vega Protocol - Explorer" />
     <meta name="og:image" content="https://static.vega.xyz/favicon.ico" />
 
-    <meta name="twitter:card" content="https://static.vega.xyz/favicon.ico" />
+    <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="Vega Protocol - Explorer" />
     <meta name="twitter:description" content="Vega Protocol - Explorer" />
     <meta name="twitter:image" content="https://static.vega.xyz/favicon.ico" />

apps/governance-e2e/cypress.config.js

@@ -28,7 +28,6 @@ module.exports = defineConfig({
     numTestsKeptInMemory: 5,
     downloadsFolder: 'cypress/downloads',
     testIsolation: false,
-    experimentalMemoryManagement: true,
   },
   env: {
     ethProviderUrl: 'http://localhost:8545/',

apps/governance-e2e/src/integration/flow/proposal-details.cy.ts

@@ -55,12 +55,12 @@ describe(
     before('connect wallets and set approval limit', function () {
       cy.visit('/');
       ethereumWalletConnect();
+      // cy.associateTokensToVegaWallet('1');
     });
 
     beforeEach('visit proposals tab', function () {
       cy.clearLocalStorage();
       turnTelemetryOff();
-      cy.mockChainId();
       cy.reload();
       waitForSpinner();
       cy.connectVegaWallet();

apps/governance-e2e/src/integration/flow/proposal-enacted.cy.ts

@@ -42,7 +42,6 @@ context(
     beforeEach('visit proposals', function () {
       cy.clearLocalStorage();
       turnTelemetryOff();
-      cy.mockChainId();
       cy.reload();
       waitForSpinner();
       cy.connectVegaWallet();

apps/governance-e2e/src/integration/flow/proposal-flow.cy.ts

@@ -82,7 +82,6 @@ context(
       cy.clearLocalStorage();
       turnTelemetryOff();
       cy.reload();
-      cy.mockChainId();
       waitForSpinner();
       cy.connectVegaWallet();
       ethereumWalletConnect();

apps/governance-e2e/src/integration/flow/proposal-forms.cy.ts

@@ -74,7 +74,6 @@ context(
     beforeEach('visit governance tab', function () {
       cy.clearLocalStorage();
       turnTelemetryOff();
-      cy.mockChainId();
       cy.reload();
       waitForSpinner();
       cy.connectVegaWallet();

apps/governance-e2e/src/integration/flow/proposal-list.cy.ts

@@ -42,7 +42,6 @@ describe('Governance flow for proposal list', { tags: '@slow' }, function () {
     cy.clearLocalStorage();
     turnTelemetryOff();
     cy.reload();
-    cy.mockChainId();
     waitForSpinner();
     cy.connectVegaWallet();
     ethereumWalletConnect();

apps/governance-e2e/src/integration/flow/rewards-flow.cy.ts

@@ -26,7 +26,6 @@ context('rewards - flow', { tags: '@slow' }, function () {
   before('set up environment to allow rewards', function () {
     cy.clearLocalStorage();
     turnTelemetryOff();
-    cy.mockChainId();
     cy.visit('/');
     waitForSpinner();
     ethereumWalletConnect();

apps/governance-e2e/src/integration/flow/staking-flow.cy.ts

@@ -25,6 +25,8 @@ import {
   vegaWalletSetSpecifiedApprovalAmount,
   vegaWalletTeardown,
 } from '../../support/wallet-functions';
+import { aliasGQLQuery } from '@vegaprotocol/cypress';
+import { chainIdQuery, statisticsQuery } from '@vegaprotocol/mock';
 
 const stakeValidatorListTotalStake = 'total-stake';
 const stakeValidatorListTotalShare = 'total-stake-share';
@@ -56,6 +58,10 @@ context(
   function () {
     // 1002-STKE-002, 1002-STKE-032
     before('visit staking tab and connect vega wallet', function () {
+      cy.mockGQL((req) => {
+        aliasGQLQuery(req, 'ChainId', chainIdQuery());
+        aliasGQLQuery(req, 'Statistics', statisticsQuery());
+      });
       cy.visit('/');
       ethereumWalletConnect();
       cy.connectVegaWallet();
@@ -66,9 +72,12 @@ context(
       beforeEach(
         'teardown wallet & drill into a specific validator',
         function () {
+          cy.mockGQL((req) => {
+            aliasGQLQuery(req, 'ChainId', chainIdQuery());
+            aliasGQLQuery(req, 'Statistics', statisticsQuery());
+          });
           cy.clearLocalStorage();
           turnTelemetryOff();
-          cy.mockChainId();
           // Go to homepage to allow wallet teardown without epoch timer refreshing page
           navigateTo(navigation.home);
           vegaWalletTeardown();

apps/governance-e2e/src/integration/flow/token-association-flow.cy.ts

@@ -56,7 +56,6 @@ context(
         function () {
           cy.clearLocalStorage();
           turnTelemetryOff();
-          cy.mockChainId();
           cy.reload();
           waitForSpinner();
           cy.connectVegaWallet();

apps/governance-e2e/src/integration/flow/withdrawal-flow.cy.ts

@@ -6,6 +6,8 @@ import {
 } from '../../support/common.functions';
 import { ethereumWalletConnect } from '../../support/wallet-eth.functions';
 import { depositAsset } from '../../support/wallet-functions';
+import { aliasGQLQuery } from '@vegaprotocol/cypress';
+import { chainIdQuery, statisticsQuery } from '@vegaprotocol/mock';
 
 const withdraw = 'withdraw';
 const withdrawalForm = 'withdraw-form';
@@ -42,15 +44,22 @@ context(
   { tags: '@slow' },
   function () {
     before('visit withdrawals and connect vega wallet', function () {
+      cy.mockGQL((req) => {
+        aliasGQLQuery(req, 'ChainId', chainIdQuery());
+        aliasGQLQuery(req, 'Statistics', statisticsQuery());
+      });
       cy.visit('/');
       ethereumWalletConnect();
       depositAsset(usdcEthAddress, '1000', 5);
     });
 
     beforeEach('Navigate to withdrawal page', function () {
+      cy.mockGQL((req) => {
+        aliasGQLQuery(req, 'ChainId', chainIdQuery());
+        aliasGQLQuery(req, 'Statistics', statisticsQuery());
+      });
       cy.clearLocalStorage();
       turnTelemetryOff();
-      cy.mockChainId();
       cy.reload();
       waitForSpinner();
       navigateTo(navigation.withdraw);
@@ -97,8 +106,7 @@ context(
       });
     });
 
-    // eslint-disable-next-line
-    it.skip(
+    it(
       'Able to withdraw asset: -eth wallet connected -withdraw funds button',
       { tags: '@smoke' },
       function () {

apps/governance-e2e/src/integration/view/proposal.cy.ts

@@ -231,7 +231,7 @@ context(
     });
 
     // 3009-NTWU-001 3009-NTWU-002 3009-NTWU-006 3009-NTWU-009
-    it.skip('should display network upgrade banner with estimate', function () {
+    it('should display network upgrade banner with estimate', function () {
       mockNetworkUpgradeProposal();
       cy.visit('/');
       cy.getByTestId('banners').within(() => {

apps/governance/src/index.html

@@ -17,7 +17,7 @@
     <meta name="og:site_name" content="Vega Protocol - Governance" />
     <meta name="og:image" content="https://static.vega.xyz/favicon.ico" />
 
-    <meta name="twitter:card" content="https://static.vega.xyz/favicon.ico" />
+    <meta name="twitter:card" content="summary_large_image" />
     <meta name="twitter:title" content="Vega Protocol - Governance" />
     <meta name="twitter:description" content="Vega Protocol - Governance" />
     <meta name="twitter:image" content="https://static.vega.xyz/favicon.ico" />

apps/governance/src/routes/proposals/components/proposal-detail-header/proposal-header.spec.tsx

@@ -24,6 +24,7 @@ import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 import type { MockedResponse } from '@apollo/client/testing';
 import { FLAGS } from '@vegaprotocol/environment';
 import { BrowserRouter } from 'react-router-dom';
+import { VoteState } from '../vote-details/use-user-vote';
 
 jest.mock('@vegaprotocol/proposals', () => ({
   ...jest.requireActual('@vegaprotocol/proposals'),
@@ -36,7 +37,8 @@ jest.mock('@vegaprotocol/proposals', () => ({
 const renderComponent = (
   proposal: ProposalQuery['proposal'],
   isListItem = true,
-  mocks: MockedResponse[] = []
+  mocks: MockedResponse[] = [],
+  voteState?: VoteState
 ) =>
   render(
     <AppStateProvider>
@@ -47,6 +49,7 @@ const renderComponent = (
               proposal={proposal}
               isListItem={isListItem}
               networkParams={mockNetworkParams}
+              voteState={voteState}
             />
           </VegaWalletContext.Provider>
         </MockedProvider>
@@ -386,10 +389,15 @@ describe('Proposal header', () => {
         closingDatetime: nextWeek.toString(),
       },
     });
-    renderComponent(proposal, true, [
-      // @ts-ignore generateProposal always creates an id
-      createUserVoteQueryMock(proposal.id, VoteValue.VALUE_NO),
-    ]);
+    renderComponent(
+      proposal,
+      true,
+      [
+        // @ts-ignore generateProposal always creates an id
+        createUserVoteQueryMock(proposal.id, VoteValue.VALUE_NO),
+      ],
+      VoteState.No
+    );
     expect(await screen.findByTestId('user-voted-no')).toBeInTheDocument();
   });
 
@@ -400,10 +408,15 @@ describe('Proposal header', () => {
         closingDatetime: nextWeek.toString(),
       },
     });
-    renderComponent(proposal, true, [
-      // @ts-ignore generateProposal always creates an id
-      createUserVoteQueryMock(proposal.id, VoteValue.VALUE_YES),
-    ]);
+    renderComponent(
+      proposal,
+      true,
+      [
+        // @ts-ignore generateProposal always creates an id
+        createUserVoteQueryMock(proposal.id, VoteValue.VALUE_YES),
+      ],
+      VoteState.Yes
+    );
     expect(await screen.findByTestId('user-voted-yes')).toBeInTheDocument();
   });
 });

apps/governance/src/routes/proposals/components/proposal-detail-header/proposal-header.tsx

@@ -8,25 +8,26 @@ import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 import { truncateMiddle } from '../../../../lib/truncate-middle';
 import { CurrentProposalState } from '../current-proposal-state';
 import { ProposalInfoLabel } from '../proposal-info-label';
-import { useUserVote } from '../vote-details/use-user-vote';
 import { ProposalVotingStatus } from '../proposal-voting-status';
 import type { NetworkParamsResult } from '@vegaprotocol/network-parameters';
 import { useSuccessorMarketProposalDetails } from '@vegaprotocol/proposals';
 import { FLAGS } from '@vegaprotocol/environment';
 import Routes from '../../../routes';
 import { Link } from 'react-router-dom';
+import type { VoteState } from '../vote-details/use-user-vote';
 
 export const ProposalHeader = ({
   proposal,
   networkParams,
   isListItem = true,
+  voteState,
 }: {
   proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
   networkParams: Partial<NetworkParamsResult>;
   isListItem?: boolean;
+  voteState?: VoteState | null;
 }) => {
   const { t } = useTranslation();
-  const { voteState } = useUserVote(proposal?.id);
   const change = proposal?.terms.change;
 
   let details: ReactNode;

apps/governance/src/routes/proposals/components/proposal/proposal.spec.tsx

@@ -1,4 +1,6 @@
 import { MemoryRouter } from 'react-router-dom';
+import { MockedProvider } from '@apollo/client/testing';
+import { VegaWalletProvider } from '@vegaprotocol/wallet';
 import { render, screen } from '@testing-library/react';
 import { generateProposal } from '../../test-helpers/generate-proposals';
 import { Proposal } from './proposal';
@@ -44,11 +46,15 @@ jest.mock('../list-asset', () => ({
 const renderComponent = (proposal: ProposalQuery['proposal']) => {
   render(
     <MemoryRouter>
-      <Proposal
-        restData={{}}
-        proposal={proposal as ProposalQuery['proposal']}
-        networkParams={mockNetworkParams}
-      />
+      <MockedProvider>
+        <VegaWalletProvider>
+          <Proposal
+            restData={{}}
+            proposal={proposal as ProposalQuery['proposal']}
+            networkParams={mockNetworkParams}
+          />
+        </VegaWalletProvider>
+      </MockedProvider>
     </MemoryRouter>
   );
 };

apps/governance/src/routes/proposals/components/proposal/proposal.tsx

@@ -19,6 +19,8 @@ import { removePaginationWrapper } from '@vegaprotocol/utils';
 import { ProposalState } from '@vegaprotocol/types';
 import { ProposalMarketChanges } from '../proposal-market-changes';
 import type { NetworkParamsResult } from '@vegaprotocol/network-parameters';
+import { useVoteSubmit } from '@vegaprotocol/proposals';
+import { useUserVote } from '../vote-details/use-user-vote';
 
 export enum ProposalType {
   PROPOSAL_NEW_MARKET = 'PROPOSAL_NEW_MARKET',
@@ -53,6 +55,8 @@ export const Proposal = ({
   mostRecentlyEnactedAssociatedMarketProposal,
 }: ProposalProps) => {
   const { t } = useTranslation();
+  const { submit, Dialog, finalizedVote } = useVoteSubmit();
+  const { voteState, voteDatetime } = useUserVote(proposal?.id, finalizedVote);
 
   if (!proposal) {
     return null;
@@ -132,10 +136,12 @@ export const Proposal = ({
           </div>
         )}
       </div>
+
       <ProposalHeader
         proposal={proposal}
         isListItem={false}
         networkParams={networkParams}
+        voteState={voteState}
       />
 
       <div id="details">
@@ -207,6 +213,10 @@ export const Proposal = ({
               spamProtectionMinTokens={
                 networkParams?.spam_protection_voting_min_tokens
               }
+              submit={submit}
+              dialog={Dialog}
+              voteState={voteState}
+              voteDatetime={voteDatetime}
             />
           </RoundedWrapper>
         </div>

apps/governance/src/routes/proposals/components/proposals-list-item/proposals-list-item.tsx

@@ -1,6 +1,7 @@
 import { RoundedWrapper } from '@vegaprotocol/ui-toolkit';
 import { ProposalHeader } from '../proposal-detail-header/proposal-header';
 import { ProposalsListItemDetails } from './proposals-list-item-details';
+import { useUserVote } from '../vote-details/use-user-vote';
 import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
 import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 import type { NetworkParamsResult } from '@vegaprotocol/network-parameters';
@@ -14,12 +15,17 @@ export const ProposalsListItem = ({
   proposal,
   networkParams,
 }: ProposalsListItemProps) => {
+  const { voteState } = useUserVote(proposal?.id);
   if (!proposal || !proposal.id || !networkParams) return null;
 
   return (
     <li id={proposal.id} data-testid="proposals-list-item">
       <RoundedWrapper paddingBottom={true} heightFull={true}>
-        <ProposalHeader proposal={proposal} networkParams={networkParams} />
+        <ProposalHeader
+          proposal={proposal}
+          networkParams={networkParams}
+          voteState={voteState}
+        />
         <ProposalsListItemDetails proposal={proposal} />
       </RoundedWrapper>
     </li>

apps/governance/src/routes/proposals/components/vote-details/vote-buttons.tsx

@@ -188,11 +188,7 @@ export const VoteButtons = ({
         (voteState === VoteState.Yes || voteState === VoteState.No) && (
           <p data-testid="you-voted">
             <span>{t('youVoted')}:</span>{' '}
-            <span
-              className={
-                voteState === VoteState.Yes ? 'text-success' : 'text-danger'
-              }
-            >
+            <span className="text-white font-bold">
               {t(`voteState_${voteState}`)}
             </span>{' '}
             {voteDatetime ? (

apps/governance/src/routes/proposals/components/vote-details/vote-details.tsx

@@ -3,23 +3,29 @@ import { formatDistanceToNow } from 'date-fns';
 import { RoundedWrapper, Icon, ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { ProposalState } from '@vegaprotocol/types';
-import { useVoteSubmit, VoteProgress } from '@vegaprotocol/proposals';
+import { VoteProgress } from '@vegaprotocol/proposals';
 import { formatNumber } from '../../../../lib/format-number';
 import { ConnectToVega } from '../../../../components/connect-to-vega';
 import { useVoteInformation } from '../../hooks';
-import { useUserVote } from './use-user-vote';
 import { CurrentProposalStatus } from '../current-proposal-status';
 import { VoteButtonsContainer } from './vote-buttons';
 import { SubHeading } from '../../../../components/heading';
 import { ProposalType } from '../proposal/proposal';
+import type { VoteValue } from '@vegaprotocol/types';
+import type { DialogProps } from '@vegaprotocol/wallet';
 import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
 import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
+import type { VoteState } from './use-user-vote';
 
 interface VoteDetailsProps {
   proposal: ProposalFieldsFragment | ProposalQuery['proposal'];
   minVoterBalance: string | null | undefined;
   spamProtectionMinTokens: string | null | undefined;
   proposalType: ProposalType | null;
+  submit: (voteValue: VoteValue, proposalId: string | null) => Promise<void>;
+  dialog: (props: DialogProps) => JSX.Element;
+  voteState: VoteState | null;
+  voteDatetime: Date | null;
 }
 
 export const VoteDetails = ({
@@ -27,6 +33,10 @@ export const VoteDetails = ({
   minVoterBalance,
   spamProtectionMinTokens,
   proposalType,
+  submit,
+  dialog,
+  voteState,
+  voteDatetime,
 }: VoteDetailsProps) => {
   const { pubKey } = useVegaWallet();
   const {
@@ -48,8 +58,7 @@ export const VoteDetails = ({
   } = useVoteInformation({ proposal });
 
   const { t } = useTranslation();
-  const { submit, Dialog, finalizedVote } = useVoteSubmit();
-  const { voteState, voteDatetime } = useUserVote(proposal?.id, finalizedVote);
+
   const defaultDecimals = 2;
   const daysLeft = t('daysLeft', {
     daysLeft: formatDistanceToNow(new Date(proposal?.terms.closingDatetime)),
@@ -219,7 +228,7 @@ export const VoteDetails = ({
                 spamProtectionMinTokens={spamProtectionMinTokens}
                 className="flex"
                 submit={submit}
-                dialog={Dialog}
+                dialog={dialog}
               />
             )
           ) : (

apps/trading-e2e/cypress.config.js

@@ -26,7 +26,6 @@ module.exports = defineConfig({
     requestTimeout: 20000,
     retries: 1,
     testIsolation: false,
-    experimentalMemoryManagement: true,
   },
   env: {
     ETHERSCAN_URL: 'https://sepolia.etherscan.io',

apps/trading-e2e/src/integration/assets.cy.ts

@@ -0,0 +1,177 @@
+// #region consts
+const assetColId = '[col-id="asset.symbol"]';
+const assetDetailsDialog = 'dialog-content';
+const assetRow = 'key-value-table-row';
+const contractAddress = '7_value';
+const dialogCloseBtn = 'close-asset-details-dialog';
+const dialogCloseX = 'dialog-close';
+const dialogTitle = 'dialog-title';
+
+const indicesWithLabelTooltips = [4, 5, 6, 7, 8, 9, 11, 12, 13, 14];
+const indicesWithValueTooltips = [1, 6];
+
+const labelValueToolTipPairs = [
+  {
+    label: 'ID',
+    value: 'asset-id',
+  },
+  {
+    label: 'Type',
+    value: 'ERC20',
+    valueToolTip: 'An asset originated from an Ethereum ERC20 Token',
+  },
+  {
+    label: 'Name',
+    value: 'Euro',
+  },
+  {
+    label: 'Symbol',
+    value: 'tEURO',
+  },
+  {
+    label: 'Decimals',
+    value: '5',
+    labelTooltip: 'Number of decimal / precision handled by this asset',
+  },
+  {
+    label: 'Quantum',
+    value: '0.00001',
+    labelTooltip: 'The minimum economically meaningful amount of the asset',
+  },
+  {
+    label: 'Status',
+    value: 'Enabled',
+    labelTooltip: 'The status of the asset in the Vega network',
+    valueToolTip: 'Asset can be used on the Vega network',
+  },
+  {
+    label: 'Contract address',
+    value: '0x0158031158Bb4dF2AD02eAA31e8963E84EA978a4 ',
+    labelTooltip:
+      'The address of the contract for the token, on the ethereum network',
+  },
+  {
+    label: 'Withdrawal threshold',
+    value: '0.0005',
+    labelTooltip:
+      "The maximum you can withdraw instantly. There's no limit on the size of a withdrawal, but all withdrawals over the threshold will have a delay time added to them",
+  },
+  {
+    label: 'Lifetime limit',
+    value: '1,230.00',
+    labelTooltip:
+      'The lifetime deposit limit per address. Note: this is a temporary measure that can be changed or removed through governance',
+  },
+  { label: '', value: '' },
+  {
+    label: 'Infrastructure fee account balance',
+    value: '0.00001',
+    labelTooltip: 'The infrastructure fee account in this asset',
+  },
+  {
+    label: 'Global reward pool account balance',
+    value: '0.00002',
+    labelTooltip: 'The global rewards acquired in this asset',
+  },
+  {
+    label: 'Maker paid fees account balance',
+    value: '0.00003',
+    labelTooltip:
+      'The rewards acquired based on the fees paid to makers in this asset',
+  },
+  {
+    label: 'Maker received fees account balance',
+    value: '0.00004',
+    labelTooltip:
+      'The rewards acquired based on fees received for being a maker on trades',
+  },
+  {
+    label: 'Liquidity provision fee reward account balance',
+    value: '0.00005',
+    labelTooltip:
+      'The rewards acquired based on the liquidity provision fees in this asset',
+  },
+  {
+    label: 'Market proposer reward account balance',
+    value: '0.00006',
+    labelTooltip:
+      'The rewards acquired based on the market proposer reward in this asset',
+  },
+];
+//endregion
+
+beforeEach(() => {
+  cy.mockTradingPage();
+  cy.mockSubscription();
+  cy.setVegaWallet();
+});
+
+const visitPortfolioAndClickAsset = (assetName: string) => {
+  cy.visit('/#/portfolio');
+  cy.get(assetColId).contains(assetName).click();
+};
+
+const testTooltip = (index: number, testId: string, tooltip: string) => {
+  cy.getByTestId(`${index}_${testId}`).realHover();
+  cy.get('[role="tooltip"]').find('div').should('have.text', tooltip);
+  cy.getByTestId(dialogTitle).click();
+};
+
+describe('assets', { tags: '@smoke', testIsolation: true }, () => {
+  it('asset details', () => {
+    visitPortfolioAndClickAsset('tBTC');
+
+    cy.getByTestId(assetRow).each((element, index) => {
+      if (index === 10) {
+        return;
+      }
+      const { label, value, labelTooltip, valueToolTip } =
+        labelValueToolTipPairs[index];
+      // 6501-ASSE-001
+      // 6501-ASSE-002
+      // 6501-ASSE-003
+      // 6501-ASSE-004
+      // 6501-ASSE-005
+      // 6501-ASSE-006
+      // 6501-ASSE-007
+      // 6501-ASSE-008
+      // 6501-ASSE-009
+      // 6501-ASSE-010
+      // 6501-ASSE-011
+      cy.getByTestId(`${index}_label`).should('have.text', label);
+      cy.getByTestId(`${index}_value`).should('have.text', value);
+
+      // 6501-ASSE-012
+      if (indicesWithLabelTooltips.includes(index)) {
+        if (labelTooltip) {
+          testTooltip(index, 'label', labelTooltip);
+        }
+      }
+      if (indicesWithValueTooltips.includes(index)) {
+        if (valueToolTip) {
+          testTooltip(index, 'value', valueToolTip);
+        }
+      }
+    });
+    // 6501-ASSE-013
+    cy.getByTestId(dialogCloseX).click();
+    cy.document().then((doc) => {
+      expect(doc.querySelector(assetDetailsDialog)).to.not.exist;
+    });
+  });
+
+  it('ERC20 Contract address', () => {
+    visitPortfolioAndClickAsset('tBTC');
+    cy.getByTestId(contractAddress).within(() => {
+      // 6501-ASSE-014
+      cy.getByTestId('external-link')
+        .should('have.attr', 'target', '_blank')
+        .should('have.text', '0x0158031158Bb4dF2AD02eAA31e8963E84EA978a4');
+    });
+    // 6501-ASSE-013
+    cy.getByTestId(dialogCloseBtn).click();
+    cy.document().then((doc) => {
+      expect(doc.querySelector(assetDetailsDialog)).to.not.exist;
+    });
+  });
+});

apps/trading-e2e/src/integration/home.cy.ts

@@ -0,0 +1,207 @@
+import { aliasGQLQuery } from '@vegaprotocol/cypress';
+import type { ProposalListFieldsFragment } from '@vegaprotocol/proposals';
+import * as Schema from '@vegaprotocol/types';
+
+const dialogContent = 'welcome-dialog';
+
+const generateProposal = (code: string): ProposalListFieldsFragment => ({
+  __typename: 'Proposal',
+  reference: '',
+  state: Schema.ProposalState.STATE_OPEN,
+  datetime: '',
+  votes: {
+    __typename: undefined,
+    yes: {
+      __typename: undefined,
+      totalTokens: '',
+      totalNumber: '',
+      totalWeight: '',
+    },
+    no: {
+      __typename: undefined,
+      totalTokens: '',
+      totalNumber: '',
+      totalWeight: '',
+    },
+  },
+  requiredMajority: '',
+  party: {
+    __typename: 'Party',
+    id: '',
+  },
+  rationale: {
+    __typename: 'ProposalRationale',
+    description: '',
+    title: '',
+  },
+  requiredParticipation: '',
+  errorDetails: '',
+  rejectionReason: null,
+  requiredLpMajority: '',
+  requiredLpParticipation: '',
+  terms: {
+    __typename: 'ProposalTerms',
+    closingDatetime: '',
+    enactmentDatetime: undefined,
+    change: {
+      __typename: 'NewMarket',
+      decimalPlaces: 1,
+      lpPriceRange: '',
+      riskParameters: {
+        __typename: 'SimpleRiskModel',
+        params: {
+          __typename: 'SimpleRiskModelParams',
+          factorLong: 0,
+          factorShort: 1,
+        },
+      },
+      metadata: [],
+      instrument: {
+        __typename: 'InstrumentConfiguration',
+        code: code,
+        name: code,
+        futureProduct: {
+          __typename: 'FutureProduct',
+          settlementAsset: {
+            __typename: 'Asset',
+            id: 'A',
+            name: 'A',
+            symbol: 'A',
+            decimals: 1,
+            quantum: '',
+          },
+          quoteName: '',
+          dataSourceSpecBinding: {
+            __typename: 'DataSourceSpecToFutureBinding',
+            settlementDataProperty: '',
+            tradingTerminationProperty: '',
+          },
+          dataSourceSpecForSettlementData: {
+            __typename: 'DataSourceDefinition',
+            sourceType: {
+              __typename: 'DataSourceDefinitionInternal',
+            },
+          },
+          dataSourceSpecForTradingTermination: {
+            __typename: 'DataSourceDefinition',
+            sourceType: {
+              __typename: 'DataSourceDefinitionInternal',
+            },
+          },
+        },
+      },
+    },
+  },
+});
+
+describe('home', { tags: '@regression' }, () => {
+  beforeEach(() => {
+    cy.clearLocalStorage();
+    cy.mockTradingPage();
+    cy.mockSubscription();
+  });
+
+  describe('default market found', () => {
+    it('redirects to a default market with the landing dialog open', () => {
+      cy.visit('/');
+      cy.wait('@Markets');
+
+      cy.get('[data-testid^="pathname-/markets/"]');
+
+      // the choose market overlay is no longer showing
+      cy.contains('Loading...').should('not.exist');
+      cy.url().should('eq', Cypress.config().baseUrl + '/#/markets/market-0');
+    });
+  });
+
+  describe('no markets found', () => {
+    beforeEach(() => {
+      cy.mockGQL((req) => {
+        const data = {
+          marketsConnection: {
+            __typename: 'MarketConnection',
+            edges: [],
+          },
+        };
+        const proposalA: ProposalListFieldsFragment =
+          generateProposal('AAAZZZ');
+
+        aliasGQLQuery(req, 'Markets', data);
+        aliasGQLQuery(req, 'MarketsData', data);
+        aliasGQLQuery(req, 'ProposalsList', {
+          proposalsConnection: {
+            __typename: 'ProposalsConnection',
+            edges: [{ __typename: 'ProposalEdge', node: proposalA }],
+          },
+        });
+      });
+      cy.visit('/');
+      cy.wait('@Markets');
+      cy.wait('@MarketsData');
+    });
+
+    it('close welcome dialog should redirect to market/all', () => {
+      cy.url().should('eq', Cypress.config().baseUrl + `/#/markets/all`);
+      cy.getByTestId('welcome-dialog').should('be.visible');
+      cy.getByTestId('welcome-title').should('contain.text', 'Console CUSTOM');
+      cy.getByTestId('browse-markets-button').should('not.be.disabled');
+      cy.getByTestId('get-started-banner').should('be.visible');
+      cy.getByTestId('get-started-button').should('not.be.disabled');
+      cy.getByTestId('dialog-close').click();
+      cy.url().should('eq', Cypress.config().baseUrl + `/#/markets/all`);
+      cy.window().then((window) => {
+        expect(window.localStorage.getItem('vega_onboarding_viewed')).to.equal(
+          'true'
+        );
+      });
+    });
+
+    it('click browse markets button should redirect to market/all', () => {
+      cy.getByTestId('welcome-dialog').should('be.visible');
+      cy.getByTestId('browse-markets-button').click();
+      cy.url().should('eq', Cypress.config().baseUrl + `/#/markets/all`);
+      cy.window().then((window) => {
+        expect(window.localStorage.getItem('vega_onboarding_viewed')).to.equal(
+          'true'
+        );
+      });
+    });
+
+    it('click get started button should open connect dialog', () => {
+      cy.getByTestId('welcome-dialog').should('be.visible');
+      cy.url().should('eq', Cypress.config().baseUrl + `/#/markets/all`);
+      cy.window().then((window) => {
+        // @ts-ignore stub it out just for test case
+        window.vega = {};
+        cy.getByTestId('get-started-button').click();
+        cy.getByTestId('wallet-dialog-title').should('contain.text', 'Connect');
+      });
+    });
+  });
+
+  describe('redirect should take last visited market into consideration', () => {
+    it('marketId comes from existing market', () => {
+      cy.window().then((window) => {
+        window.localStorage.setItem('marketId', 'market-1');
+        cy.visit('/');
+        cy.getByTestId('dialog-close').click();
+        cy.location('hash').should('equal', '#/markets/market-1');
+        cy.getByTestId(dialogContent).should('not.exist');
+      });
+    });
+
+    it('marketId comes from not-existing market', () => {
+      cy.window().then((window) => {
+        window.localStorage.setItem('marketId', 'market-not-existing');
+        cy.mockGQL((req) => {
+          aliasGQLQuery(req, 'Market', null);
+        });
+        cy.visit('/');
+        cy.wait('@Markets');
+        cy.getByTestId('dialog-close').click();
+        cy.location('hash').should('equal', '#/markets/market-not-existing');
+        cy.getByTestId(dialogContent).should('not.exist');
+      });
+    });
+  });
+});

apps/trading-e2e/src/integration/trading-positions.cy.ts

@@ -27,8 +27,7 @@ describe('positions', { tags: '@smoke', testIsolation: true }, () => {
     validatePositionsDisplayed();
   });
 
-  // TODO: move this to sim, its flakey
-  it.skip('renders positions on portfolio page', () => {
+  it('renders positions on portfolio page', () => {
     cy.mockGQL((req) => {
       const positions = positionsQuery();
       if (positions.positions?.edges) {
@@ -231,7 +230,7 @@ describe('positions', { tags: '@regression', testIsolation: true }, () => {
       deltaX: 500,
     });
     // 7004-POSI-004
-    cy.get('[col-id="unrealisedPNL"]').should('be.visible');
+    cy.get('[col-id="updatedAt"]').should('be.visible');
   });
 
   it('Drag and drop columns', () => {

apps/trading-e2e/src/integration/trading-trades.cy.ts

@@ -59,7 +59,8 @@ describe('trades', { tags: '@smoke' }, () => {
     cy.getByTestId(tradesTable) // order table shares identical col id
       .find(`${colIdCreatedAt} ${colHeader}`)
       .should('have.text', 'Created at');
-    const dateTimeRegex = /(\d{1,2}):(\d{1,2}):(\d{1,2})/gm;
+    const dateTimeRegex =
+      /(\d{1,2})\/(\d{1,2})\/(\d{4}), (\d{1,2}):(\d{1,2}):(\d{1,2})/gm;
     cy.getByTestId(tradesTable)
       .get(`.ag-center-cols-container ${colIdCreatedAt}`)
       .each(($tradeDateTime) => {
@@ -86,7 +87,6 @@ describe('trades', { tags: '@smoke' }, () => {
   });
 
   it('copy price to deal ticket form', () => {
-    cy.getByTestId('Order').click();
     // 6005-THIS-007
     cy.get(colIdPrice).last().should('be.visible').click();
     cy.getByTestId('order-price').should('have.value', '171.16898');

apps/trading/client-pages/market/trade-views.tsx

@@ -1,5 +1,6 @@
 import type { ComponentProps } from 'react';
 import { Splash } from '@vegaprotocol/ui-toolkit';
+import { TradesContainer } from '@vegaprotocol/trades';
 import { DepthChartContainer } from '@vegaprotocol/market-depth';
 import {
   CandlesChartContainer,
@@ -7,7 +8,6 @@ import {
 } from '@vegaprotocol/candles-chart';
 import { Filter, OpenOrdersMenu } from '@vegaprotocol/orders';
 import { NO_MARKET } from './constants';
-import { TradesContainer } from '../../components/trades-container';
 import { OrderbookContainer } from '../../components/orderbook-container';
 import { FillsContainer } from '../../components/fills-container';
 import { PositionsContainer } from '../../components/positions-container';

apps/trading/client-pages/markets/closed.tsx

@@ -276,9 +276,15 @@ const ClosedMarketsDataGrid = ({
 
   return (
     <AgGrid
+      style={{ width: '100%', height: '100%' }}
       rowData={rowData}
       columnDefs={colDefs}
       getRowId={({ data }) => data.id}
+      defaultColDef={{
+        resizable: true,
+        minWidth: 100,
+        flex: 1,
+      }}
       components={{ SuccessorMarketRenderer }}
       overlayNoRowsTemplate={error ? error.message : t('No markets')}
     />

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

@@ -15,7 +15,9 @@ export const PositionsContainer = ({ allKeys }: { allKeys?: boolean }) => {
 
   const gridStore = usePositionsStore((store) => store.gridStore);
   const updateGridStore = usePositionsStore((store) => store.updateGridStore);
-  const gridStoreCallbacks = useDataGridEvents(gridStore, updateGridStore);
+  const gridStoreCallbacks = useDataGridEvents(gridStore, (colState) => {
+    updateGridStore(colState);
+  });
 
   if (!pubKey) {
     return (

apps/trading/components/trades-container/index.ts

@@ -1 +0,0 @@
-export * from './trades-container';

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

@@ -1,24 +0,0 @@
-import { TradesManager } from '@vegaprotocol/trades';
-import type { DataGridSlice } from '../../stores/datagrid-store-slice';
-import { createDataGridSlice } from '../../stores/datagrid-store-slice';
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
-import { useDataGridEvents } from '@vegaprotocol/datagrid';
-
-interface TradesContainerProps {
-  marketId: string;
-}
-
-export const TradesContainer = ({ marketId }: TradesContainerProps) => {
-  const gridStore = useTradesStore((store) => store.gridStore);
-  const updateGridStore = useTradesStore((store) => store.updateGridStore);
-  const gridStoreCallbacks = useDataGridEvents(gridStore, updateGridStore);
-
-  return <TradesManager marketId={marketId} gridProps={gridStoreCallbacks} />;
-};
-
-const useTradesStore = create<DataGridSlice>()(
-  persist(createDataGridSlice, {
-    name: 'vega_trades_store',
-  })
-);

apps/trading/pages/_document.page.tsx

@@ -5,45 +5,12 @@ export default function Document() {
     <Html>
       <Head>
         <link rel="stylesheet" href="https://static.vega.xyz/fonts.css" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <meta charSet="utf-8" />
-        <link
-          rel="icon"
-          type="image/x-icon"
-          href="https://static.vega.xyz/favicon.ico"
-        />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <meta name="theme-color" content="#000000" />
-        <meta name="description" content="Vega Protocol - VEGA Console" />
-        <meta name="og:type" content="website" />
-        <meta name="og:url" content="https://console.vega.xyz/" />
-        <meta name="og:title" content="Vega Protocol - Console" />
-        <meta name="og:site_name" content="Vega Protocol - Console" />
-        <meta name="og:image" content="https://static.vega.xyz/favicon.ico" />
-
-        <meta
-          name="twitter:card"
-          content="https://static.vega.xyz/favicon.ico"
-        />
-        <meta name="twitter:title" content="Vega Protocol - Console" />
-        <meta name="twitter:description" content="Vega Protocol - Console" />
-        <meta
-          name="twitter:image"
-          content="https://static.vega.xyz/favicon.ico"
-        />
-        <meta name="twitter:image:alt" content="VEGA logo" />
-        <meta name="twitter:site" content="@vegaprotocol" />
-
-        <meta name="description" content="Vega Protocol - Console" />
-        <link
-          rel="apple-touch-icon"
-          content="https://static.vega.xyz/favicon.ico"
-        />
         <link
           rel="preload"
           href="https://static.vega.xyz/AlphaLyrae-Medium.woff2"
           as="font"
           type="font/woff2"
+          crossOrigin="anonymous"
         />
         {/* eslint-disable-next-line @next/next/no-css-tags */}
         <link rel="stylesheet" href="/preloader.css" media="all" />

apps/trading/pages/index.page.tsx

@@ -1,3 +1,4 @@
+import Head from 'next/head';
 import { ClientRouter } from './client-router';
 
 /**
@@ -6,5 +7,30 @@ import { ClientRouter } from './client-router';
  * have to serve a static site via next export
  */
 export default function Index() {
-  return <ClientRouter />;
+  return (
+    <>
+      <Head>
+        <meta charSet="utf-8" />
+        <link
+          rel="icon"
+          type="image/x-icon"
+          href="https://static.vega.xyz/favicon.ico"
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <meta name="description" content="Vega Protocol - Console" />
+
+        <link rel="apple-touch-icon" href="assets/apple-touch-icon.png" />
+        <link rel="manifest" href="assets/manifest.json" />
+        <link
+          rel="preload"
+          href="https://static.vega.xyz/AlphaLyrae-Medium.woff2"
+          as="font"
+          type="font/woff2"
+        />
+        <title>VEGA Console dApp</title>
+      </Head>
+      <ClientRouter />
+    </>
+  );
 }

apps/trading/pages/styles.css

@@ -142,19 +142,12 @@ html [data-theme='dark'] {
   border-width: 0;
 }
 
-.vega-ag-grid .ag-cell .ag-cell-wrapper {
-  height: 100%;
-}
-
 .vega-ag-grid .ag-header-row {
   @apply font-alpha font-normal;
 }
 
 /* Light variables */
 .ag-theme-balham {
-  --ag-grid-size: 2px; /* Used for compactness */
-  --ag-row-height: 36px;
-  --ag-header-height: 36px;
   --ag-background-color: theme(colors.white);
   --ag-border-color: theme(colors.vega.clight.600);
   --ag-header-background-color: theme(colors.vega.clight.700);
@@ -167,9 +160,6 @@ html [data-theme='dark'] {
 
 /* Dark variables */
 .ag-theme-balham-dark {
-  --ag-grid-size: 2px; /* Used for compactness */
-  --ag-row-height: 36px;
-  --ag-header-height: 36px;
   --ag-background-color: theme(colors.vega.cdark.900);
   --ag-border-color: theme(colors.vega.cdark.600);
   --ag-header-background-color: theme(colors.vega.cdark.700);

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

@@ -58,12 +58,6 @@ export const accountValuesComparator = (
   return valueA > valueB ? 1 : -1;
 };
 
-const defaultColDef = {
-  resizable: true,
-  sortable: true,
-  tooltipComponent: TooltipCellComponent,
-  comparator: accountValuesComparator,
-};
 export interface GetRowsParams extends Omit<IGetRowsParams, 'successCallback'> {
   successCallback(rowsThisBlock: AccountFields[], lastRow?: number): void;
 }
@@ -312,10 +306,16 @@ export const AccountTable = ({
   return (
     <AgGrid
       {...props}
+      style={{ width: '100%', height: '100%' }}
       getRowId={({ data }: { data: AccountFields }) => data.asset.id}
       tooltipShowDelay={500}
       rowData={data}
-      defaultColDef={defaultColDef}
+      defaultColDef={{
+        resizable: true,
+        tooltipComponent: TooltipCellComponent,
+        sortable: true,
+        comparator: accountValuesComparator,
+      }}
       columnDefs={colDefs}
       getRowHeight={getPinnedAssetRowHeight}
       pinnedTopRowData={pinnedRow ? [pinnedRow] : undefined}

libs/accounts/src/lib/breakdown-table.tsx

@@ -20,10 +20,6 @@ import { MarginHealthChart } from './margin-health-chart';
 import { MarketNameCell } from '@vegaprotocol/datagrid';
 import { AccountType } from '@vegaprotocol/types';
 
-const defaultColDef = {
-  resizable: true,
-  sortable: true,
-};
 interface BreakdownTableProps extends AgGridReactProps {
   data: AccountFields[] | null;
   onMarketClick?: (marketId: string, metaKey?: boolean) => void;
@@ -45,6 +41,7 @@ const BreakdownTable = forwardRef<AgGridReact, BreakdownTableProps>(
             if (!value) return 'None';
             return value;
           },
+          minWidth: 200,
         },
         {
           headerName: t('Account type'),
@@ -61,6 +58,7 @@ const BreakdownTable = forwardRef<AgGridReact, BreakdownTableProps>(
         {
           headerName: t('Balance'),
           field: 'used',
+          flex: 2,
           maxWidth: 500,
           type: 'rightAligned',
           tooltipComponent: TooltipCellComponent,
@@ -99,6 +97,7 @@ const BreakdownTable = forwardRef<AgGridReact, BreakdownTableProps>(
         {
           headerName: t('Margin health'),
           field: 'market.id',
+          flex: 2,
           maxWidth: 500,
           sortable: false,
           cellRenderer: ({
@@ -119,6 +118,7 @@ const BreakdownTable = forwardRef<AgGridReact, BreakdownTableProps>(
 
     return (
       <AgGrid
+        style={{ width: '100%', height: '100%' }}
         overlayNoRowsTemplate={t('Collateral not used')}
         rowData={data}
         getRowId={({ data }: { data: AccountFields }) =>
@@ -128,7 +128,11 @@ const BreakdownTable = forwardRef<AgGridReact, BreakdownTableProps>(
         rowHeight={34}
         components={{ PriceCell, MarketNameCell, ProgressBarCell }}
         tooltipShowDelay={500}
-        defaultColDef={defaultColDef}
+        defaultColDef={{
+          flex: 1,
+          resizable: true,
+          sortable: true,
+        }}
         columnDefs={coldefs}
       />
     );

libs/cypress/src/index.ts

@@ -24,7 +24,6 @@ import { addVegaWalletSubmitLiquidityProvision } from './lib/commands/vega-walle
 import { addImportNodeWallets } from './lib/commands/import-node-wallets';
 import { addVegaWalletTopUpRewardsPool } from './lib/commands/vega-wallet-top-up-rewards-pool';
 import { addAssociateTokensToVegaWallet } from './lib/commands/associate-tokens-to-vega-wallet';
-import { addMockChainId } from './lib/commands/mock-chain-id';
 
 addGetTestIdcommand();
 addMockGQLCommand();
@@ -50,7 +49,6 @@ addVegaWalletSubmitLiquidityProvision();
 addImportNodeWallets();
 addVegaWalletTopUpRewardsPool();
 addAssociateTokensToVegaWallet();
-addMockChainId();
 
 export {
   mockConnectWallet,

libs/cypress/src/lib/commands/mock-chain-id.ts

@@ -1,22 +0,0 @@
-import { aliasGQLQuery } from '../mock-gql';
-// eslint-disable-next-line @nx/enforce-module-boundaries
-import { chainIdQuery, statisticsQuery } from '@vegaprotocol/mock';
-
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace Cypress {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    interface Chainable<Subject> {
-      mockChainId(): void;
-    }
-  }
-}
-
-export function addMockChainId() {
-  Cypress.Commands.add('mockChainId', () => {
-    cy.mockGQL((req) => {
-      aliasGQLQuery(req, 'ChainId', chainIdQuery());
-      aliasGQLQuery(req, 'Statistics', statisticsQuery());
-    });
-  });
-}

libs/datagrid/src/lib/ag-grid/ag-grid-lazy-themed.tsx

@@ -3,20 +3,6 @@ import { AgGridReact } from 'ag-grid-react';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 import { t } from '@vegaprotocol/i18n';
 import classNames from 'classnames';
-import type { ColDef } from 'ag-grid-community';
-
-const defaultProps: AgGridReactProps = {
-  enableCellTextSelection: true,
-  overlayLoadingTemplate: t('Loading...'),
-  overlayNoRowsTemplate: t('No data'),
-  suppressCellFocus: true,
-  suppressColumnMoveAnimation: true,
-};
-
-const defaultColDef: ColDef = {
-  resizable: true,
-  sortable: true,
-};
 
 export const AgGridThemed = ({
   style,
@@ -27,20 +13,23 @@ export const AgGridThemed = ({
   gridRef?: React.ForwardedRef<AgGridReact>;
 }) => {
   const { theme } = useThemeSwitcher();
+  const defaultProps = {
+    rowHeight: 22,
+    headerHeight: 22,
+    enableCellTextSelection: true,
+    overlayLoadingTemplate: t('Loading...'),
+    overlayNoRowsTemplate: t('No data'),
+    suppressCellFocus: true,
+  };
 
-  const wrapperClasses = classNames('vega-ag-grid', 'w-full h-full', {
+  const wrapperClasses = classNames('vega-ag-grid', {
     'ag-theme-balham': theme === 'light',
     'ag-theme-balham-dark': theme === 'dark',
   });
 
   return (
-    <div className={wrapperClasses}>
-      <AgGridReact
-        defaultColDef={defaultColDef}
-        ref={gridRef}
-        {...defaultProps}
-        {...props}
-      />
+    <div className={wrapperClasses} style={style}>
+      <AgGridReact {...defaultProps} {...props} ref={gridRef} />
     </div>
   );
 };

libs/datagrid/src/lib/cells/market-name-cell.tsx

@@ -29,11 +29,7 @@ export const MarketNameCell = ({
   );
   if (!value || !data) return null;
   return onMarketClick ? (
-    <button
-      onClick={handleOnClick}
-      tabIndex={0}
-      className="block text-left text-ellipsis overflow-hidden whitespace-nowrap w-full"
-    >
+    <button onClick={handleOnClick} tabIndex={0}>
       {value}
     </button>
   ) : (

libs/datagrid/src/lib/column-definitions.ts

@@ -4,8 +4,8 @@ export const COL_DEFS = {
     sortable: false,
     resizable: false,
     filter: false,
-    minWidth: 30,
-    maxWidth: 30,
+    minWidth: 45,
+    maxWidth: 45,
     type: 'rightAligned',
     pinned: 'right' as const,
   },

libs/datagrid/src/lib/use-datagrid-events.spec.tsx

@@ -14,6 +14,7 @@ const gridProps = {
     {
       field: 'id',
       width: 100,
+      resizable: true,
       filter: 'agNumberColumnFilter',
     },
   ],
@@ -49,7 +50,7 @@ describe('useDataGridEvents', () => {
     console.warn = originalWarn;
   });
 
-  it('default state is set and callback is called on filter event', async () => {
+  it('default state is set and callback is called on column or filter event', async () => {
     const callback = jest.fn();
     const initialState = {
       filterModel: undefined,
@@ -66,6 +67,45 @@ describe('useDataGridEvents', () => {
     // 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,
@@ -83,7 +123,7 @@ describe('useDataGridEvents', () => {
     });
 
     expect(callback).toHaveBeenCalledWith({
-      columnState: undefined,
+      columnState: expect.any(Object),
       filterModel: {
         id: idFilter,
       },
@@ -98,7 +138,7 @@ describe('useDataGridEvents', () => {
       filterType: 'number',
       type: 'equals',
     };
-    const colState = { colId: 'id', sort: 'desc' as const };
+    const colState = { colId: 'id', width: 300, sort: 'desc' as const };
     const initialState = {
       filterModel: {
         id: idFilter,
@@ -116,7 +156,7 @@ describe('useDataGridEvents', () => {
     });
   });
 
-  it('ignores events that were not made via the UI', async () => {
+  it('debounces events', async () => {
     const callback = jest.fn();
     const initialState = {
       filterModel: undefined,
@@ -130,6 +170,8 @@ describe('useDataGridEvents', () => {
     // 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();
@@ -138,6 +180,6 @@ describe('useDataGridEvents', () => {
       jest.advanceTimersByTime(GRID_EVENT_DEBOUNCE_TIME);
     });
 
-    expect(callback).toHaveBeenCalledTimes(0);
+    expect(callback).toHaveBeenCalledTimes(1);
   });
 });

libs/datagrid/src/lib/use-datagrid-events.ts

@@ -1,13 +1,12 @@
+import debounce from 'lodash/debounce';
 import type {
-  ColumnMovedEvent,
   ColumnResizedEvent,
   ColumnState,
-  ColumnVisibleEvent,
   FilterChangedEvent,
-  FirstDataRenderedEvent,
+  GridReadyEvent,
   SortChangedEvent,
 } from 'ag-grid-community';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 
 type State = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -15,70 +14,30 @@ type State = {
   columnState?: ColumnState[];
 };
 
+type Event = ColumnResizedEvent | FilterChangedEvent | SortChangedEvent;
+
+export const GRID_EVENT_DEBOUNCE_TIME = 300;
+
 export const useDataGridEvents = (
   state: State,
   callback: (data: State) => void
 ) => {
-  /**
-   * Callback for filter events
-   */
-  const onFilterChanged = useCallback(
-    ({ api }: FilterChangedEvent) => {
-      if (!api) return;
-      const filterModel = api.getFilterModel();
-      callback({ filterModel });
-    },
+  // 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]
   );
 
-  /**
-   * Callback for column resized and column moved events, which can be
-   * triggered in quick succession. Uses the finished flag to not call the
-   * store callback unnecessarily
-   */
-  const onDebouncedColumnChange = useCallback(
-    ({
-      columnApi,
-      source,
-      finished,
-    }: ColumnResizedEvent | ColumnMovedEvent) => {
-      if (!finished) return;
-
-      // only call back on user interactions, and not events triggered from the api
-      const permittedEvents = [
-        'uiColumnResized',
-        'uiColumnDragged',
-        'uiColumnMoved',
-      ];
-
-      if (!permittedEvents.includes(source)) {
-        return;
-      }
-
-      const columnState = columnApi.getColumnState();
-
-      callback({ columnState });
-    },
-    [callback]
-  );
-
-  /**
-   * Callback for sort and visible events
-   */
-  const onColumnChange = useCallback(
-    ({ columnApi }: SortChangedEvent | ColumnVisibleEvent) => {
-      const columnState = columnApi.getColumnState();
-      callback({ columnState });
-    },
-    [callback]
-  );
-
-  /**
-   * Callback for grid startup to apply stored column and filter states.
-   * State only applied if found, otherwise columns sized to fit available space
-   */
+  // check if we have stored column states or filter models and apply if we do
   const onGridReady = useCallback(
-    ({ api, columnApi }: FirstDataRenderedEvent) => {
+    ({ api, columnApi }: GridReadyEvent) => {
       if (!api || !columnApi) return;
 
       if (state.columnState) {
@@ -87,6 +46,7 @@ export const useDataGridEvents = (
           applyOrder: true,
         });
       } else {
+        // ensure columns fit available space if no widths are set
         api.sizeColumnsToFit();
       }
 
@@ -99,12 +59,8 @@ export const useDataGridEvents = (
 
   return {
     onGridReady,
-    // these events don't use the 'finished' flag
-    onFilterChanged,
-    onSortChanged: onColumnChange,
-    onColumnVisible: onColumnChange,
-    // these trigger a lot so this callback uses the 'finished' flag
-    onColumnMoved: onDebouncedColumnChange,
-    onColumnResized: onDebouncedColumnChange,
+    onColumnResized: onGridChange,
+    onFilterChanged: onGridChange,
+    onSortChanged: onGridChange,
   };
 };

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

@@ -70,9 +70,17 @@ export const DepositsTable = (
             </EtherscanLink>
           );
         },
+        flex: 1,
       },
     ],
     []
   );
-  return <AgGrid columnDefs={columnDefs} {...props} />;
+  return (
+    <AgGrid
+      defaultColDef={{ flex: 1 }}
+      columnDefs={columnDefs}
+      style={{ width: '100%', height: '100%' }}
+      {...props}
+    />
+  );
 };

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

@@ -124,6 +124,8 @@ export const FillsTable = forwardRef<AgGridReact, Props>(
         ref={ref}
         columnDefs={columnDefs}
         overlayNoRowsTemplate={t('No fills')}
+        defaultColDef={{ resizable: true }}
+        style={{ width: '100%', height: '100%' }}
         getRowId={({ data }) => data?.id}
         tooltipShowDelay={0}
         tooltipHideDelay={2000}

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

@@ -42,16 +42,6 @@ const dateRangeFilterParams = {
   maxNextDays: 0,
   defaultValue,
 };
-const defaultColDef = {
-  resizable: true,
-  sortable: true,
-  tooltipComponent: TransferTooltipCellComponent,
-  filterParams: {
-    ...dateRangeFilterParams,
-    buttons: ['reset'],
-  },
-};
-
 type LedgerEntryProps = TypedDataAgGrid<LedgerEntry>;
 
 export const LedgerTable = (props: LedgerEntryProps) => {
@@ -187,14 +177,24 @@ export const LedgerTable = (props: LedgerEntryProps) => {
           value ? getDateTimeFormat().format(fromNanoSeconds(value)) : '-',
         filterParams: dateRangeFilterParams,
         filter: DateRangeFilter,
+        flex: 1,
       },
     ],
     []
   );
   return (
     <AgGrid
+      style={{ width: '100%', height: '100%' }}
       tooltipShowDelay={500}
-      defaultColDef={defaultColDef}
+      defaultColDef={{
+        resizable: true,
+        sortable: true,
+        tooltipComponent: TransferTooltipCellComponent,
+        filterParams: {
+          ...dateRangeFilterParams,
+          buttons: ['reset'],
+        },
+      }}
       columnDefs={columnDefs}
       {...props}
     />

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

@@ -31,12 +31,6 @@ const dateValueFormatter = ({ value }: { value?: string | null }) => {
   return getDateTimeFormat().format(new Date(value));
 };
 
-const defaultColDef = {
-  resizable: true,
-  sortable: true,
-  tooltipComponent: TooltipCellComponent,
-};
-
 export interface LiquidityTableProps
   extends TypedDataAgGrid<LiquidityProvisionData> {
   symbol?: string;
@@ -130,6 +124,7 @@ export const LiquidityTable = ({
         headerTooltip: t(
           'The valuation of the market at the time the liquidity commitment was made. Commitments made at a lower valuation earlier in the lifetime of the market would be expected to have a higher equity-like share if the market has grown. If a commitment is amended, value will reflect the average of the market valuations across the lifetime of the commitment.'
         ),
+        minWidth: 160,
         valueFormatter: assetDecimalsQuantumFormatter,
         tooltipValueGetter: assetDecimalsFormatter,
       },
@@ -188,10 +183,16 @@ export const LiquidityTable = ({
 
   return (
     <AgGrid
+      style={{ width: '100%', height: '100%' }}
       overlayNoRowsTemplate={t('No liquidity provisions')}
       getRowId={({ data }: { data: LiquidityProvisionData }) => data.id || ''}
       tooltipShowDelay={500}
-      defaultColDef={defaultColDef}
+      defaultColDef={{
+        resizable: true,
+        minWidth: 100,
+        tooltipComponent: TooltipCellComponent,
+        sortable: true,
+      }}
       {...props}
       columnDefs={colDefs}
     />

libs/markets/src/lib/components/markets-container/market-list-table.tsx

@@ -35,9 +35,11 @@ const MarketName = (props: MarketNameCellProps) => (
 );
 
 const defaultColDef = {
+  resizable: true,
   sortable: true,
   filter: true,
   filterParams: { buttons: ['reset'] },
+  minWidth: 100,
 };
 type Props = TypedDataAgGrid<MarketMaybeWithData> & {
   onMarketClick: (marketId: string, metaKey?: boolean) => void;
@@ -56,6 +58,7 @@ export const MarketListTable = ({
   };
   return (
     <AgGrid
+      style={{ width: '100%', height: '100%' }}
       getRowId={getRowId}
       defaultColDef={defaultColDef}
       columnDefs={columnDefs}

libs/markets/src/lib/components/markets-container/use-column-defs.tsx

@@ -40,6 +40,7 @@ export const useColumnDefs = ({ onMarketClick }: Props) => {
         {
           headerName: t('Trading mode'),
           field: 'tradingMode',
+          minWidth: 170,
           valueFormatter: ({
             data,
           }: VegaValueFormatterParams<MarketMaybeWithData, 'data'>) => {

libs/orders/src/lib/components/order-list-manager/order-list-manager.tsx

@@ -84,6 +84,7 @@ export const OrderListManager = ({
           onMarketClick={onMarketClick}
           onOrderTypeClick={onOrderTypeClick}
           isReadOnly={isReadOnly}
+          suppressAutoSize
           overlayNoRowsTemplate={error ? error.message : t('No orders')}
           {...gridProps}
         />

libs/orders/src/lib/components/order-list/order-list.tsx

@@ -37,12 +37,6 @@ import type { Order } from '../order-data-provider';
 import { Filter } from '../order-list-manager';
 import type { ColDef } from 'ag-grid-community';
 
-const defaultColDef = {
-  resizable: true,
-  sortable: true,
-  filterParams: { buttons: ['reset'] },
-};
-
 export type OrderListTableProps = TypedDataAgGrid<Order> & {
   marketId?: string;
   onCancel: (order: Order) => void;
@@ -82,6 +76,7 @@ export const OrderListTable = memo<
             field: 'market.tradableInstrument.instrument.code',
             cellRenderer: 'MarketNameCell',
             cellRendererParams: { idPath: 'market.id', onMarketClick },
+            minWidth: 150,
           },
           {
             headerName: t('Filled'),
@@ -115,6 +110,9 @@ export const OrderListTable = memo<
                 data.market.positionDecimalPlaces ?? 0
               );
             },
+            minWidth: 50,
+            width: 90,
+            flex: 0,
           },
           {
             headerName: t('Size'),
@@ -156,6 +154,9 @@ export const OrderListTable = memo<
                 )
               );
             },
+            minWidth: 50,
+            width: 80,
+            flex: 0,
           },
           {
             field: 'type',
@@ -167,6 +168,7 @@ export const OrderListTable = memo<
             cellRendererParams: {
               onClick: onOrderTypeClick,
             },
+            minWidth: 80,
           },
           {
             field: 'status',
@@ -199,6 +201,7 @@ export const OrderListTable = memo<
                 {valueFormatted}
               </span>
             ),
+            minWidth: 100,
           },
           {
             field: 'price',
@@ -220,6 +223,7 @@ export const OrderListTable = memo<
               }
               return addDecimalsFormatNumber(value, data.market.decimalPlaces);
             },
+            minWidth: 100,
           },
           {
             field: 'timeInForce',
@@ -248,6 +252,7 @@ export const OrderListTable = memo<
 
               return label;
             },
+            minWidth: 150,
           },
           {
             field: 'updatedAt',
@@ -267,12 +272,13 @@ export const OrderListTable = memo<
                 </span>
               );
             },
+            minWidth: 150,
           },
           {
             colId: 'amend',
             ...COL_DEFS.actions,
-            minWidth: showAllActions ? 110 : COL_DEFS.actions.minWidth,
-            maxWidth: showAllActions ? 110 : COL_DEFS.actions.minWidth,
+            minWidth: showAllActions ? 120 : COL_DEFS.actions.minWidth,
+            maxWidth: showAllActions ? 120 : COL_DEFS.actions.minWidth,
             cellRenderer: ({ data }: { data?: Order }) => {
               if (!data) return null;
 
@@ -330,8 +336,16 @@ export const OrderListTable = memo<
       return (
         <AgGrid
           ref={ref}
-          defaultColDef={defaultColDef}
+          defaultColDef={{
+            resizable: true,
+            sortable: true,
+            filterParams: { buttons: ['reset'] },
+          }}
           columnDefs={columnDefs}
+          style={{
+            width: '100%',
+            height: '100%',
+          }}
           getRowId={({ data }) => data.id}
           components={{ MarketNameCell, OrderTypeCell }}
           {...props}

libs/orders/src/lib/components/stop-orders-table/stop-orders-table.tsx

@@ -29,12 +29,6 @@ import type { AgGridReact } from 'ag-grid-react';
 import type { StopOrder } from '../order-data-provider/stop-orders-data-provider';
 import type { ColDef } from 'ag-grid-community';
 
-const defaultColDef = {
-  resizable: true,
-  sortable: true,
-  filterParams: { buttons: ['reset'] },
-};
-
 export type StopOrdersTableProps = TypedDataAgGrid<StopOrder> & {
   onCancel: (order: StopOrder) => void;
   onMarketClick?: (marketId: string, metaKey?: boolean) => void;
@@ -52,6 +46,7 @@ export const StopOrdersTable = memo<
         field: 'market.tradableInstrument.instrument.code',
         cellRenderer: 'MarketNameCell',
         cellRendererParams: { idPath: 'market.id', onMarketClick },
+        minWidth: 150,
       },
       {
         headerName: t('Trigger'),
@@ -63,6 +58,7 @@ export const StopOrdersTable = memo<
           data,
         }: VegaValueFormatterParams<StopOrder, 'trigger'>): string =>
           data ? formatTrigger(data, data.market.decimalPlaces) : '',
+        minWidth: 100,
       },
       {
         field: 'expiresAt',
@@ -86,6 +82,7 @@ export const StopOrdersTable = memo<
           }
           return '';
         },
+        minWidth: 150,
       },
       {
         headerName: t('Size'),
@@ -132,6 +129,7 @@ export const StopOrdersTable = memo<
             )
           );
         },
+        minWidth: 80,
       },
       {
         field: 'submission.type',
@@ -143,6 +141,7 @@ export const StopOrdersTable = memo<
           value,
         }: VegaICellRendererParams<StopOrder, 'submission.type'>) =>
           value ? Schema.OrderTypeMapping[value] : '',
+        minWidth: 80,
       },
       {
         field: 'status',
@@ -164,6 +163,7 @@ export const StopOrdersTable = memo<
         }) => (
           <span data-testid={`order-status-${data?.id}`}>{valueFormatted}</span>
         ),
+        minWidth: 100,
       },
       {
         field: 'submission.price',
@@ -185,6 +185,7 @@ export const StopOrdersTable = memo<
           }
           return addDecimalsFormatNumber(value, data.market.decimalPlaces);
         },
+        minWidth: 100,
       },
       {
         field: 'submission.timeInForce',
@@ -197,6 +198,7 @@ export const StopOrdersTable = memo<
         }: VegaValueFormatterParams<StopOrder, 'submission.timeInForce'>) => {
           return value ? Schema.OrderTimeInForceCode[value] : '';
         },
+        minWidth: 150,
       },
       {
         field: 'updatedAt',
@@ -216,6 +218,7 @@ export const StopOrdersTable = memo<
             </span>
           );
         },
+        minWidth: 150,
       },
       {
         colId: 'actions',
@@ -246,8 +249,16 @@ export const StopOrdersTable = memo<
 
   return (
     <AgGrid
-      defaultColDef={defaultColDef}
+      defaultColDef={{
+        resizable: true,
+        sortable: true,
+        filterParams: { buttons: ['reset'] },
+      }}
       columnDefs={columnDefs}
+      style={{
+        width: '100%',
+        height: '100%',
+      }}
       getRowId={({ data }) => data.id}
       components={{ MarketNameCell }}
       {...props}

libs/positions/src/lib/positions-manager.tsx

@@ -65,16 +65,18 @@ export const PositionsManager = ({
   });
 
   return (
-    <PositionsTable
-      pubKey={pubKey}
-      pubKeys={pubKeys}
-      rowData={error ? [] : data}
-      onMarketClick={onMarketClick}
-      onClose={onClose}
-      isReadOnly={isReadOnly}
-      multipleKeys={partyIds.length > 1}
-      overlayNoRowsTemplate={error ? error.message : t('No positions')}
-      {...gridProps}
-    />
+    <div className="h-full relative">
+      <PositionsTable
+        pubKey={pubKey}
+        pubKeys={pubKeys}
+        rowData={error ? [] : data}
+        onMarketClick={onMarketClick}
+        onClose={onClose}
+        isReadOnly={isReadOnly}
+        multipleKeys={partyIds.length > 1}
+        overlayNoRowsTemplate={error ? error.message : t('No positions')}
+        {...gridProps}
+      />
+    </div>
   );
 };

libs/positions/src/lib/positions-table.spec.tsx

@@ -57,7 +57,7 @@ describe('Positions', () => {
     });
 
     const headers = screen.getAllByRole('columnheader');
-    expect(headers).toHaveLength(11);
+    expect(headers).toHaveLength(12);
     expect(
       headers.map((h) => h.querySelector('[ref="eText"]')?.textContent?.trim())
     ).toEqual([
@@ -66,12 +66,13 @@ describe('Positions', () => {
       'Open volume',
       'Mark price',
       'Liquidation price',
-      'Asset',
+      'Settlement asset',
       'Entry price',
       'Leverage',
-      'Margin',
+      'Margin allocated',
       'Realised PNL',
       'Unrealised PNL',
+      'Updated',
     ]);
   });
 
@@ -211,7 +212,7 @@ describe('Positions', () => {
       );
     });
     const cells = screen.getAllByRole('gridcell');
-    expect(cells[11].textContent).toEqual('Close');
+    expect(cells[12].textContent).toEqual('Close');
   });
 
   it('do not display close button if openVolume is zero', async () => {
@@ -227,7 +228,7 @@ describe('Positions', () => {
       );
     });
     const cells = screen.getAllByRole('gridcell');
-    expect(cells[11].textContent).toEqual('');
+    expect(cells[12].textContent).toEqual('');
   });
 
   describe('PNLCell', () => {

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

@@ -12,6 +12,7 @@ import { COL_DEFS } from '@vegaprotocol/datagrid';
 import { ProgressBarCell } from '@vegaprotocol/datagrid';
 import {
   AgGridLazy as AgGrid,
+  DateRangeFilter,
   PriceFlashCell,
   signedNumberCssClass,
   signedNumberCssClassRules,
@@ -28,6 +29,7 @@ import {
   volumePrefix,
   toBigNum,
   formatNumber,
+  getDateTimeFormat,
   addDecimalsFormatNumber,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
@@ -84,14 +86,6 @@ AmountCell.displayName = 'AmountCell';
 export const getRowId = ({ data }: { data: Position }) =>
   `${data.partyId}-${data.marketId}`;
 
-const defaultColDef = {
-  sortable: true,
-  filter: true,
-  filterParams: { buttons: ['reset'] },
-  tooltipComponent: TooltipCellComponent,
-  resizable: true,
-};
-
 export const PositionsTable = ({
   onClose,
   onMarketClick,
@@ -104,16 +98,24 @@ export const PositionsTable = ({
   const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
   return (
     <AgGrid
+      style={{ width: '100%', height: '100%' }}
       overlayNoRowsTemplate={t('No positions')}
       getRowId={getRowId}
       tooltipShowDelay={500}
-      defaultColDef={defaultColDef}
+      defaultColDef={{
+        resizable: true,
+        sortable: true,
+        filter: true,
+        filterParams: { buttons: ['reset'] },
+        tooltipComponent: TooltipCellComponent,
+      }}
       components={{
         AmountCell,
         PriceFlashCell,
         ProgressBarCell,
         MarketNameCell,
       }}
+      {...props}
       columnDefs={useMemo<ColDef[]>(() => {
         const columnDefs: (ColDef | null)[] = [
           multipleKeys
@@ -126,6 +128,7 @@ export const PositionsTable = ({
                     pubKeys.find((key) => key.publicKey === data.partyId)
                       ?.name) ||
                   data?.partyId,
+                minWidth: 190,
               }
             : null,
           {
@@ -133,6 +136,7 @@ export const PositionsTable = ({
             field: 'marketName',
             cellRenderer: 'MarketNameCell',
             cellRendererParams: { idPath: 'marketId', onMarketClick },
+            minWidth: 190,
           },
           {
             headerName: t('Notional'),
@@ -156,6 +160,7 @@ export const PositionsTable = ({
                     data.marketDecimalPlaces
                   );
             },
+            minWidth: 80,
           },
           {
             headerName: t('Open volume'),
@@ -185,6 +190,7 @@ export const PositionsTable = ({
                   );
             },
             cellRenderer: OpenVolumeCell,
+            minWidth: 100,
           },
           {
             headerName: t('Mark price'),
@@ -218,12 +224,12 @@ export const PositionsTable = ({
                 data.marketDecimalPlaces
               );
             },
+            minWidth: 100,
           },
           {
             headerName: t('Liquidation price'),
             colId: 'liquidationPrice',
             type: 'rightAligned',
-            cellClass: 'font-mono text-right',
             cellRenderer: ({ data }: VegaICellRendererParams<Position>) => {
               if (!data) return null;
               return (
@@ -238,9 +244,10 @@ export const PositionsTable = ({
             },
           },
           {
-            headerName: t('Asset'),
+            headerName: t('Settlement asset'),
             field: 'assetSymbol',
             colId: 'asset',
+            minWidth: 100,
             cellRenderer: ({ data }: VegaICellRendererParams<Position>) => {
               if (!data) return null;
               return (
@@ -286,6 +293,7 @@ export const PositionsTable = ({
                 data.marketDecimalPlaces
               );
             },
+            minWidth: 100,
           },
           multipleKeys
             ? null
@@ -299,11 +307,12 @@ export const PositionsTable = ({
                   value,
                 }: VegaValueFormatterParams<Position, 'currentLeverage'>) =>
                   value === undefined ? '' : formatNumber(value.toString(), 1),
+                minWidth: 100,
               },
           multipleKeys
             ? null
             : {
-                headerName: t('Margin'),
+                headerName: t('Margin allocated'),
                 field: 'marginAccountBalance',
                 type: 'rightAligned',
                 filter: 'agNumberColumnFilter',
@@ -330,6 +339,7 @@ export const PositionsTable = ({
                     data.decimals
                   );
                 },
+                minWidth: 100,
               },
           {
             headerName: t('Realised PNL'),
@@ -354,6 +364,7 @@ export const PositionsTable = ({
               'Profit or loss is realised whenever your position is reduced to zero and the margin is released back to your collateral balance. P&L excludes any fees paid.'
             ),
             cellRenderer: PNLCell,
+            minWidth: 100,
           },
           {
             headerName: t('Unrealised PNL'),
@@ -377,6 +388,22 @@ export const PositionsTable = ({
               'Unrealised profit is the current profit on your open position. Margin is still allocated to your position.'
             ),
             cellRenderer: PNLCell,
+            minWidth: 100,
+          },
+          {
+            headerName: t('Updated'),
+            field: 'updatedAt',
+            type: 'rightAligned',
+            filter: DateRangeFilter,
+            valueFormatter: ({
+              value,
+            }: VegaValueFormatterParams<Position, 'updatedAt'>) => {
+              if (!value) {
+                return '';
+              }
+              return getDateTimeFormat().format(new Date(value));
+            },
+            minWidth: 150,
           },
           onClose && !isReadOnly
             ? {
@@ -400,8 +427,8 @@ export const PositionsTable = ({
                     </div>
                   );
                 },
-                minWidth: 75,
-                maxWidth: 75,
+                minWidth: 90,
+                maxWidth: 90,
               }
             : null,
         ];
@@ -417,7 +444,6 @@ export const PositionsTable = ({
         pubKey,
         pubKeys,
       ])}
-      {...props}
     />
   );
 };

libs/proposals/src/components/proposals-list/proposals-list.tsx

@@ -42,6 +42,7 @@ export const ProposalsList = ({
         rowData={filteredData}
         defaultColDef={defaultColDef}
         getRowId={({ data }) => data.id}
+        style={{ width: '100%', height: '100%' }}
         overlayNoRowsTemplate={t('No markets')}
         components={{ SuccessorMarketRenderer }}
       />

libs/proposals/src/components/proposals-list/use-column-defs.tsx

@@ -42,6 +42,7 @@ export const useColumnDefs = () => {
         colId: 'market',
         headerName: t('Market'),
         field: 'terms.change.instrument.code',
+        minWidth: 150,
         cellStyle: { lineHeight: '14px' },
         cellRenderer: ({
           data,
@@ -143,6 +144,7 @@ export const useColumnDefs = () => {
           'terms.enactmentDatetime'
         >) => (value ? getDateTimeFormat().format(new Date(value)) : '-'),
         filter: DateRangeFilter,
+        flex: 1,
       },
       {
         colId: 'proposal-actions',
@@ -153,6 +155,7 @@ export const useColumnDefs = () => {
           if (!data?.id) return null;
           return <ProposalActionsDropdown id={data.id} />;
         },
+        flex: 1,
       },
     ]);
   }, [VEGA_TOKEN_URL, requiredMajorityPercentage]);
@@ -160,8 +163,10 @@ export const useColumnDefs = () => {
   const defaultColDef: ColDef = useMemo(() => {
     return {
       sortable: true,
+      resizable: true,
       filter: true,
       filterParams: { buttons: ['reset'] },
+      minWidth: 100,
     };
   }, []);
 

libs/trades/src/index.ts

@@ -1,2 +1,2 @@
-export * from './lib/trades-manager';
+export * from './lib/trades-container';
 export * from './lib/__generated__/Trades';

libs/trades/src/lib/trades-container.tsx

@@ -3,17 +3,12 @@ import { tradesWithMarketProvider } from './trades-data-provider';
 import { TradesTable } from './trades-table';
 import { useDealTicketFormValues } from '@vegaprotocol/deal-ticket';
 import { t } from '@vegaprotocol/i18n';
-import type { useDataGridEvents } from '@vegaprotocol/datagrid';
 
 interface TradesContainerProps {
   marketId: string;
-  gridProps?: ReturnType<typeof useDataGridEvents>;
 }
 
-export const TradesManager = ({
-  marketId,
-  gridProps,
-}: TradesContainerProps) => {
+export const TradesContainer = ({ marketId }: TradesContainerProps) => {
   const update = useDealTicketFormValues((state) => state.updateAll);
 
   const { data, error } = useDataProvider({
@@ -28,7 +23,6 @@ export const TradesManager = ({
         update(marketId, { price });
       }}
       overlayNoRowsTemplate={error ? error.message : t('No trades')}
-      {...gridProps}
     />
   );
 };

libs/trades/src/lib/trades-table.spec.tsx

@@ -1,5 +1,5 @@
 import { act, render, screen } from '@testing-library/react';
-import { getTimeFormat } from '@vegaprotocol/utils';
+import { getDateTimeFormat } from '@vegaprotocol/utils';
 import { SELL_CLASS, TradesTable, BUY_CLASS } from './trades-table';
 import type { Trade } from './trades-data-provider';
 import { Side } from '@vegaprotocol/types';
@@ -39,7 +39,7 @@ describe('TradesTable', () => {
     const expectedValues = [
       '1,111,222.00',
       '20.00',
-      getTimeFormat().format(new Date(trade.createdAt)),
+      getDateTimeFormat().format(new Date(trade.createdAt)),
     ];
     cells.forEach((cell, i) => {
       expect(cell).toHaveTextContent(expectedValues[i]);

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

@@ -8,7 +8,7 @@ import { AgGridLazy as AgGrid, NumericCell } from '@vegaprotocol/datagrid';
 import {
   addDecimal,
   addDecimalsFormatNumber,
-  getTimeFormat,
+  getDateTimeFormat,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import type { IDatasource, IGetRowsParams } from 'ag-grid-community';
@@ -53,6 +53,7 @@ export const TradesTable = ({ onClick, ...props }: Props) => {
         headerName: t('Price'),
         field: 'price',
         type: 'rightAligned',
+        width: 130,
         cellClass: changeCellClass,
         valueFormatter: ({
           value,
@@ -86,6 +87,7 @@ export const TradesTable = ({ onClick, ...props }: Props) => {
       {
         headerName: t('Size'),
         field: 'size',
+        width: 125,
         type: 'rightAligned',
         valueFormatter: ({
           value,
@@ -105,12 +107,12 @@ export const TradesTable = ({ onClick, ...props }: Props) => {
         headerName: t('Created at'),
         field: 'createdAt',
         type: 'rightAligned',
+        width: 170,
         cellClass: 'text-right',
-        flex: 1, // make created at always fill remaining space
         valueFormatter: ({
           value,
         }: VegaValueFormatterParams<Trade, 'createdAt'>) => {
-          return value && getTimeFormat().format(new Date(value));
+          return value && getDateTimeFormat().format(new Date(value));
         },
       },
     ],
@@ -118,9 +120,12 @@ export const TradesTable = ({ onClick, ...props }: Props) => {
   );
   return (
     <AgGrid
+      style={{ width: '100%', height: '100%' }}
       getRowId={({ data }) => data.id}
+      defaultColDef={{
+        flex: 1,
+      }}
       columnDefs={columnDefs}
-      rowHeight={22}
       {...props}
     />
   );

libs/ui-toolkit/src/components/trading-dropdown/actions-dropdown.tsx

@@ -7,7 +7,10 @@ import {
 
 export const ActionsDropdownTrigger = () => {
   return (
-    <TradingDropdownTrigger data-testid="dropdown-menu">
+    <TradingDropdownTrigger
+      className='hover:bg-vega-light-200 dark:hover:bg-vega-dark-200 [&[aria-expanded="true"]]:bg-vega-light-200 dark:[&[aria-expanded="true"]]:bg-vega-dark-200 p-0.5 rounded-full'
+      data-testid="dropdown-menu"
+    >
       <button type="button">
         <VegaIcon name={VegaIconNames.KEBAB} />
       </button>

libs/withdraws/src/lib/withdrawals-table.tsx

@@ -115,6 +115,7 @@ export const WithdrawalsTable = ({
       {
         headerName: t('Transaction'),
         field: 'txHash',
+        flex: 2,
         type: 'rightAligned',
         cellRendererParams: {
           complete: (withdrawal: WithdrawalFieldsFragment) => {
@@ -134,6 +135,8 @@ export const WithdrawalsTable = ({
     <AgGrid
       overlayNoRowsTemplate={t('No withdrawals')}
       columnDefs={columnDefs}
+      defaultColDef={{ flex: 1 }}
+      style={{ width: '100%', height: '100%' }}
       components={{
         RecipientCell,
         StatusCell,