test: move wait to the if

test: revert before
test: force click
2023-02-23 10:40:00 +01:00 · 2023-02-23 10:18:40 +01:00 · 2023-02-23 09:29:56 +01:00 · 2023-02-23 08:54:18 +01:00 · 2023-02-22 19:36:08 +01:00 · 2023-02-22 19:14:12 +01:00
1241 changed files with 11312 additions and 19638 deletions
@@ -11,7 +11,7 @@ on:
        type: choice
        options:
          - explorer-e2e
-          - governance-e2e
+          - token-e2e
          - trading-e2e
      tags:
        description: 'Test tags to run'
@@ -10,5 +10,5 @@ jobs:
    uses: ./.github/workflows/cypress-run.yml
    secrets: inherit
    with:
-      projects: '["explorer-e2e","governance-e2e","trading-e2e"]'
+      projects: '["explorer-e2e","token-e2e","trading-e2e"]'
      tags: '@smoke @regression @slow'
@@ -42,10 +42,10 @@ jobs:
          affected=$(yarn nx print-affected --base=${{ env.NX_BASE }} --head=${{ env.NX_HEAD }} --select=projects)
          echo -n "Affected projects: $affected"
          projects=""
-          if [[ $affected == *"governance"* ]]; then projects+='"governance-e2e" '; fi
+          if [[ $affected == *"token"* ]]; then projects+='"token-e2e" '; fi
          if [[ $affected == *"trading"* ]]; then projects+='"trading-e2e" '; fi
          if [[ $affected == *"explorer"* ]]; then projects+='"explorer-e2e" '; fi
-          if [[ -z "$projects" ]]; then projects+='"governance-e2e" "trading-e2e" "explorer-e2e" '; fi
+          if [[ -z "$projects" ]]; then projects+='"token-e2e" "trading-e2e" "explorer-e2e" '; fi
          projects=${projects%?}
          projects=[${projects// /,}]
          echo PROJECTS=$projects >> $GITHUB_ENV
@@ -87,7 +87,7 @@ jobs:
        run: ls -alsh /home/runner/.vegacapsule/testnet/logs/

      - uses: actions/upload-artifact@v3
-        if: ${{ failure() }}
+        if: ${{ always() }}
        with:
          name: logs-${{ matrix.project }}
          path: /home/runner/.vegacapsule/testnet/logs
@@ -12,8 +12,6 @@ on:
          - react-helpers
          - tailwindcss-config
          - types
-          - utils
-          - i18n

 jobs:
  publish:
@@ -161,7 +161,7 @@ In order to setup and run vegawallet for e2e capsule tests, in a separate termin
 bash setup-vegawallet.sh
 ```

-3. copy generated `api-token` and paste the token into `CYPRESS_VEGA_WALLET_API_TOKEN` environment variable in either `apps/governance-e2e/.env` or `apps/explorer-e2e/.env` depending on which project needs testing.
+3. copy generated `api-token` and paste the token into `CYPRESS_VEGA_WALLET_API_TOKEN` environment variable in either `apps/token-e2e/.env` or `apps/explorer-e2e/.env` depending on which project needs testing.

 Note: The script is only needed if capsule was built for first time or fresh. To run existing wallet service for capsule:

@@ -22,6 +22,7 @@
    "governance.proposal.updateAsset.minProposerBalance",
    "governance.proposal.updateAsset.minVoterBalance",
    "governance.proposal.updateAsset.requiredParticipation",
+    "governance.proposal.updateMarket.minProposerEquityLikeShare",
    "market.fee.factors.infrastructureFee",
    "market.fee.factors.makerFee",
    "market.liquidity.bondPenaltyParameter",
@@ -76,7 +77,6 @@
    "governance.proposal.updateMarket.requiredParticipationLP",
    "governance.proposal.updateNetParam.requiredMajority",
    "governance.proposal.updateNetParam.requiredParticipation",
-    "governance.proposal.updateMarket.minProposerEquityLikeShare",
    "validators.vote.required"
  ],
  "duration": [
@@ -8,7 +8,7 @@ context('Asset page', { tags: '@regression' }, () => {

    it('should be able to see full assets list', () => {
      cy.getAssets().then((assets) => {
-        assets.forEach((asset) => {
+        Object.values(assets).forEach((asset) => {
          cy.get(`[row-id="${asset.id}"]`).should('be.visible');
        });
      });
@@ -25,7 +25,7 @@ context('Asset page', { tags: '@regression' }, () => {
      });

      cy.getAssets().then((assets) => {
-        assets.forEach((asset) => {
+        Object.values(assets).forEach((asset) => {
          cy.get(`[row-id="${asset.id}"]`).should('be.visible');
        });
      });
@@ -33,7 +33,7 @@ context('Asset page', { tags: '@regression' }, () => {

    it('should open details page when clicked on "View details"', () => {
      cy.getAssets().then((assets) => {
-        assets.forEach((asset) => {
+        Object.values(assets).forEach((asset) => {
          cy.get(`[row-id="${asset.id}"] [col-id="actions"] button`)
            .eq(0)
            .should('contain.text', 'View details');
@@ -1,27 +1,33 @@
 context('Blocks page', { tags: '@regression' }, function () {
+  before('visit token home page', function () {
+    cy.visit('/');
+  });
+
  describe('Verify elements on page', function () {
-    beforeEach(() => {
-      cy.visit('/blocks');
-    });
+    const blockNavigation = 'a[href="/blocks"]';
    const blockHeight = '[data-testid="block-height"]';
    const blockTime = '[data-testid="block-time"]';
    const blockHeader = '[data-testid="block-header"]';
    const previousBlockBtn = '[data-testid="previous-block"]';
    const infiniteScrollWrapper = '[data-testid="infinite-scroll-wrapper"]';

+    beforeEach('navigate to blocks page', function () {
+      cy.get(blockNavigation).click();
+    });
+
    it('Blocks page is displayed', function () {
      validateBlocksDisplayed();
    });

    it('Blocks page is displayed on mobile', function () {
-      cy.switchToMobile();
+      cy.common_switch_to_mobile_and_click_toggle();
+      cy.get(blockNavigation).click();
      validateBlocksDisplayed();
    });

    it('Block validator page is displayed', function () {
      waitForBlocksResponse();
-      cy.get(blockHeight).eq(0).find('a').click({ force: true });
-
+      cy.get(blockHeight).eq(0).click();
      cy.get('[data-testid="block-validator"]').should('not.be.empty');
      cy.get(blockTime).should('not.be.empty');
      //TODO: Add assertion for transactions when txs are added
@@ -29,7 +35,7 @@ context('Blocks page', { tags: '@regression' }, function () {

    it('Navigate to previous block', function () {
      waitForBlocksResponse();
-      cy.get(blockHeight).eq(0).find('a').click({ force: true });
+      cy.get(blockHeight).eq(0).click();
      cy.get(blockHeader)
        .invoke('text')
        .then(($blockHeaderTxt) => {
@@ -2,14 +2,17 @@ context('Network parameters page', { tags: '@smoke' }, function () {
  before('navigate to network parameter page', function () {
    cy.fixture('net_parameter_format_lookup').as('networkParameterFormat');
  });
-  describe('Verify elements on page', function () {
-    beforeEach(() => {
-      cy.visit('/network-parameters');
-    });

+  describe('Verify elements on page', function () {
+    const networkParametersNavigation = 'a[href="/network-parameters"]';
    const networkParametersHeader = '[data-testid="network-param-header"]';
    const tableRows = '[data-testid="key-value-table-row"]';

+    before('navigate to network parameter page', function () {
+      cy.visit('/');
+      cy.get(networkParametersNavigation).click();
+    });
+
    it('should show network parameter heading at top of page', function () {
      cy.get(networkParametersHeader)
        .should('have.text', 'Network Parameters')
@@ -198,8 +201,55 @@ context('Network parameters page', { tags: '@smoke' }, function () {
      });
    });

-    it('should be able to see network parameters - on mobile', function () {
-      cy.switchToMobile();
+    it('should be able to switch network parameter page - between light and dark mode', function () {
+      const whiteThemeSelectedMenuOptionColor = 'rgb(255, 7, 127)';
+      const whiteThemeJsonFieldBackColor = 'rgb(255, 255, 255)';
+      const whiteThemeSideMenuBackgroundColor = 'rgb(255, 255, 255)';
+      const darkThemeSelectedMenuOptionColor = 'rgb(215, 251, 80)';
+      const darkThemeJsonFieldBackColor = 'rgb(38, 38, 38)';
+      const darkThemeSideMenuBackgroundColor = 'rgb(0, 0, 0)';
+      const themeSwitcher = '[data-testid="theme-switcher"]';
+      const jsonFields = '.hljs';
+      const sideMenuBackground = '.absolute';
+
+      // Engage dark mode if not already set
+      cy.get(sideMenuBackground)
+        .should('have.css', 'background-color')
+        .then((background_color) => {
+          if (background_color.includes(whiteThemeSideMenuBackgroundColor))
+            cy.get(themeSwitcher).click();
+        });
+
+      // Engage white mode
+      cy.get(themeSwitcher).click();
+
+      // White Mode
+      cy.get(networkParametersNavigation)
+        .should('have.css', 'background-color')
+        .and('include', whiteThemeSelectedMenuOptionColor);
+      cy.get(jsonFields)
+        .should('have.css', 'background-color')
+        .and('include', whiteThemeJsonFieldBackColor);
+      cy.get(sideMenuBackground)
+        .should('have.css', 'background-color')
+        .and('include', whiteThemeSideMenuBackgroundColor);
+
+      // Dark Mode
+      cy.get(themeSwitcher).click();
+      cy.get(networkParametersNavigation)
+        .should('have.css', 'background-color')
+        .and('include', darkThemeSelectedMenuOptionColor);
+      cy.get(jsonFields)
+        .should('have.css', 'background-color')
+        .and('include', darkThemeJsonFieldBackColor);
+      cy.get(sideMenuBackground)
+        .should('have.css', 'background-color')
+        .and('include', darkThemeSideMenuBackgroundColor);
+    });
+
+    it.skip('should be able to see network parameters - on mobile', function () {
+      cy.common_switch_to_mobile_and_click_toggle();
+      cy.get(networkParametersNavigation).click();
      cy.get_network_parameters().then((network_parameters) => {
        network_parameters = Object.entries(network_parameters);
        network_parameters.forEach((network_parameter) => {
@@ -1,15 +1,303 @@
 context('Validator page', { tags: '@smoke' }, function () {
+  const validatorMenuHeading = 'a[href="/validators"]';
+  const tendermintDataHeader = '[data-testid="tendermint-header"]';
+  const vegaDataHeader = '[data-testid="vega-header"]';
+  const jsonSection = '.language-json';
+
  before('Visit validators page and obtain data', function () {
-    cy.visit('/validators');
+    cy.visit('/');
+    cy.get(validatorMenuHeading).click();
+    cy.get_validators().as('validators');
+    cy.get_nodes().as('nodes');
  });

  describe('Verify elements on page', function () {
-    it('should be able to see validator tiles', function () {
-      cy.getNodes().then((nodes) => {
-        nodes.forEach((node) => {
-          cy.get(`[validator-id="${node.id}"]`).should('be.visible');
+    before('Ensure at least two validators are present', function () {
+      assert.isAtLeast(
+        this.validators.length,
+        2,
+        'Ensuring at least two validators exist'
+      );
+    });
+
+    it('should be able to see validator page sections', function () {
+      cy.get(vegaDataHeader)
+        .contains('Vega data')
+        .and('is.visible')
+        .next()
+        .within(() => {
+          cy.get(jsonSection).should('not.be.empty');
+        });
+
+      cy.get(tendermintDataHeader)
+        .contains('Tendermint data')
+        .and('is.visible')
+        .next()
+        .within(() => {
+          cy.get(jsonSection).should('not.be.empty');
+        });
+    });
+
+    it('should be able to see relevant validator information in tendermint section', function () {
+      cy.get(tendermintDataHeader)
+        .contains('Tendermint data')
+        .next()
+        .within(() => {
+          cy.get(jsonSection)
+            .invoke('text')
+            .convert_string_json_to_js_object()
+            .then((validatorsInJson) => {
+              this.validators.forEach((validator, index) => {
+                const validatorInJson =
+                  validatorsInJson.result.validators[index];
+
+                assert.equal(
+                  validatorInJson.address,
+                  validator.address,
+                  `Checking that validator address shown in json matches system data`
+                );
+                cy.contains(validator.address).should('be.visible');
+
+                assert.equal(
+                  validatorInJson.pub_key.type,
+                  validator.pub_key.type,
+                  `Checking that validator public key type shown in json matches system data`
+                );
+                cy.contains(validator.pub_key.type).should('be.visible');
+
+                assert.equal(
+                  validatorInJson.pub_key.value,
+                  validator.pub_key.value,
+                  `Checking that validator public key value shown in json matches system data`
+                );
+                cy.contains(validator.pub_key.value).should('be.visible');
+
+                assert.equal(
+                  validatorInJson.voting_power,
+                  validator.voting_power,
+                  `Checking that validator voting power in json matches system data`
+                );
+                cy.contains(validator.voting_power).should('be.visible');
+
+                // Proposer priority can change frequently mid test
+                // Therefore only checking the field name is present.
+                cy.contains('proposer_priority').should('be.visible');
+              });
+            });
+        });
+    });
+
+    // Test disabled 2022/11/15 during the 0.62.1 upgrade. The JSON structure changed, and
+    // this test failed. Rather than fix it, it will be replaced when the validator view displays
+    // something useful rather than just dumping out the JSON.
+    xit('should be able to see relevant node information in vega data section', function () {
+      cy.get(vegaDataHeader)
+        .contains('Vega data')
+        .next()
+        .within(() => {
+          cy.get(jsonSection)
+            .invoke('text')
+            .convert_string_json_to_js_object()
+            .then((nodesInJson) => {
+              this.nodes.forEach((node, index) => {
+                const nodeInJson = nodesInJson.edges[index].node;
+
+                // Vegacapsule shows no info or null for following fields:
+                // name, infoURL, avatarUrl, location, epoch data
+                // Therefore, these values remain unchecked.
+
+                assert.equal(
+                  nodeInJson.__typename,
+                  node.__typename,
+                  `Checking that node __typename shown in json matches system data`
+                );
+                cy.contains(node.__typename).should('be.visible');
+
+                assert.equal(
+                  nodeInJson.id,
+                  node.id,
+                  `Checking that node id shown in json matches system data`
+                );
+                cy.contains(node.id).should('be.visible');
+
+                assert.equal(
+                  nodeInJson.pubkey,
+                  node.pubkey,
+                  `Checking that node pubkey shown in json matches system data`
+                );
+                cy.contains(node.pubkey).should('be.visible');
+
+                assert.equal(
+                  nodeInJson.tmPubkey,
+                  node.tmPubkey,
+                  `Checking that node tmPubkey shown in json matches system data`
+                );
+                cy.contains(node.tmPubkey).should('be.visible');
+
+                assert.equal(
+                  nodeInJson.ethereumAddress,
+                  node.ethereumAddress,
+                  `Checking that node ethereumAddress shown in json matches system data`
+                );
+                cy.contains(node.ethereumAddress).should('be.visible');
+
+                assert.equal(
+                  nodeInJson.stakedByOperator,
+                  node.stakedByOperator,
+                  `Checking that node stakedByOperator value shown in json matches system data`
+                );
+                cy.contains(node.stakedByOperator).should('be.visible');
+
+                assert.equal(
+                  nodeInJson.stakedByDelegates,
+                  node.stakedByDelegates,
+                  `Checking that node stakedByDelegates value shown in json matches system data`
+                );
+                cy.contains(node.stakedByDelegates).should('be.visible');
+
+                assert.equal(
+                  nodeInJson.stakedTotal,
+                  node.stakedTotal,
+                  `Checking that node stakedTotal shown in json matches system data`
+                );
+                cy.contains(node.stakedTotal).should('be.visible');
+
+                assert.equal(
+                  nodeInJson.pendingStake,
+                  node.pendingStake,
+                  `Checking that node pendingStake shown in json matches system data`
+                );
+                cy.contains(node.pendingStake).should('be.visible');
+
+                assert.equal(
+                  nodeInJson.status,
+                  node.status,
+                  `Checking that node status shown in json matches system data`
+                );
+                cy.contains(node.status).should('be.visible');
+              });
+            });
+        });
+    });
+
+    it('should be able to see validator page displayed on mobile', function () {
+      cy.common_switch_to_mobile_and_click_toggle();
+      cy.get(validatorMenuHeading).click();
+      cy.get(vegaDataHeader)
+        .contains('Vega data')
+        .and('is.visible')
+        .next()
+        .within(() => {
+          cy.get(jsonSection).should('not.be.empty');
+        });
+
+      cy.get(tendermintDataHeader)
+        .contains('Tendermint data')
+        .and('is.visible')
+        .next()
+        .within(() => {
+          cy.get(jsonSection).should('not.be.empty');
+        });
+
+      cy.get(tendermintDataHeader)
+        .contains('Tendermint data')
+        .next()
+        .within(() => {
+          this.validators.forEach((validator) => {
+            cy.contains(validator.address).should('be.visible');
+            cy.contains(validator.pub_key.type).should('be.visible');
+            cy.contains(validator.pub_key.value).should('be.visible');
+            cy.contains(validator.voting_power).should('be.visible');
+            // Proposer priority can change frequently mid test
+            // Therefore only checking the field name is present.
+            cy.contains('proposer_priority').should('be.visible');
+          });
+        });
+    });
+
+    it('should be able to switch validator page between light and dark mode', function () {
+      const whiteThemeSelectedMenuOptionColor = 'rgb(255, 7, 127)';
+      const whiteThemeJsonFieldBackColor = 'rgb(255, 255, 255)';
+      const whiteThemeSideMenuBackgroundColor = 'rgb(255, 255, 255)';
+      const darkThemeSelectedMenuOptionColor = 'rgb(215, 251, 80)';
+      const darkThemeJsonFieldBackColor = 'rgb(38, 38, 38)';
+      const darkThemeSideMenuBackgroundColor = 'rgb(0, 0, 0)';
+      const themeSwitcher = '[data-testid="theme-switcher"]';
+      const jsonFields = '.hljs';
+      const sideMenuBackground = '.absolute';
+
+      // Engage dark mode if not allready set
+      cy.get(sideMenuBackground)
+        .should('have.css', 'background-color')
+        .then((background_color) => {
+          if (background_color.includes(whiteThemeSideMenuBackgroundColor))
+            cy.get(themeSwitcher).click();
+        });
+
+      // Engage white mode
+      cy.get(themeSwitcher).click();
+
+      // White Mode
+      cy.get(validatorMenuHeading)
+        .should('have.css', 'background-color')
+        .and('include', whiteThemeSelectedMenuOptionColor);
+      cy.get(jsonFields)
+        .should('have.css', 'background-color')
+        .and('include', whiteThemeJsonFieldBackColor);
+      cy.get(sideMenuBackground)
+        .should('have.css', 'background-color')
+        .and('include', whiteThemeSideMenuBackgroundColor);
+
+      // Dark Mode
+      cy.get(themeSwitcher).click();
+      cy.get(validatorMenuHeading)
+        .should('have.css', 'background-color')
+        .and('include', darkThemeSelectedMenuOptionColor);
+      cy.get(jsonFields)
+        .should('have.css', 'background-color')
+        .and('include', darkThemeJsonFieldBackColor);
+      cy.get(sideMenuBackground)
+        .should('have.css', 'background-color')
+        .and('include', darkThemeSideMenuBackgroundColor);
+    });
+
+    Cypress.Commands.add('get_validators', () => {
+      cy.request({
+        method: 'GET',
+        url: `http://localhost:26617/validators`,
+        headers: { 'content-type': 'application/json' },
+      })
+        .its(`body.result.validators`)
+        .then(function (response) {
+          let validators = [];
+          response.forEach((account, index) => {
+            validators[index] = account;
+          });
+          return validators;
+        });
+    });
+
+    Cypress.Commands.add('get_nodes', () => {
+      const mutation =
+        '{nodesConnection { edges { node { id name infoUrl avatarUrl pubkey tmPubkey ethereumAddress \
+          location stakedByOperator stakedByDelegates stakedTotal pendingStake \
+          epochData { total offline online __typename } status name __typename}}}}';
+      cy.request({
+        method: 'POST',
+        url: `http://localhost:3028/query`,
+        body: {
+          query: mutation,
+        },
+        headers: { 'content-type': 'application/json' },
+      })
+        .its(`body.data.nodesConnection.edges`)
+        .then(function (response) {
+          let nodes = [];
+          response.forEach((node) => {
+            nodes.push(node);
+          });
+          return nodes;
        });
-      });
    });
  });
 });
@@ -1,7 +1,7 @@
 NX_TENDERMINT_URL=https://tm.n00.stagnet3.vega.xyz
 NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n00.stagnet3.vega.xyz/websocket
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/stagnet3-network.json
-NX_VEGA_NETWORKS='{"SANDBOX":"https://sandbox.explorer.vega.xyz","STAGNET1":"https://stagnet1.token.vega.xyz", "STAGNET3":"https://stagnet3.explorer.vega.xyz","VALIDATOR_TESTNET":"https://validator-testnet.fairground.wtf","TESTNET":"https://token.fairground.wtf","MAINNET":"https://token.vega.xyz"}'
+NX_VEGA_NETWORKS={\"MAINNET"\:\"https://explorer.vega.xyz"\,\"TESTNET\":\"https://explorer.fairground.wtf\"}
 NX_VEGA_ENV=STAGNET3
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
@@ -1,7 +1,9 @@
 # App configuration variables
 NX_TENDERMINT_URL=http://localhost:26617
 NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26617/websocket
+NX_VEGA_NETWORKS={\"MAINNET"\:\"https://explorer.vega.xyz"\,\"TESTNET\":\"https://explorer.fairground.wtf\"}
 NX_VEGA_ENV=CUSTOM
+NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io

 # App flags
@@ -1,8 +1,10 @@
 # App configuration variables
 NX_TENDERMINT_URL=https://tm.be.devnet1.vega.xyz/tm
-NX_TENDERMINT_WEBSOCKET_URL=wss://be.devnet1.vega.xyz/websocket
+NX_TENDERMINT_WEBSOCKET_URL=wss://tm.be.devnet1.vega.xyz/websocket
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/devnet-network.json
+NX_VEGA_NETWORKS={\"MAINNET"\:\"https://explorer.vega.xyz"\,\"TESTNET\":\"https://explorer.fairground.wtf\"}
 NX_VEGA_ENV=DEVNET
+NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_BLOCK_EXPLORER=https://be.devnet1.vega.xyz/rest
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_VEGA_GOVERNANCE_URL=https://dev.token.vega.xyz
@@ -1,8 +1,10 @@
 # App configuration variables
 NX_TENDERMINT_URL=https://be.explorer.vega.xyz
-NX_TENDERMINT_WEBSOCKET_URL=wss://be.explorer.vega.xyz/websocket
+NX_TENDERMINT_WEBSOCKET_URL=wss://be.explorer.vega.xyz
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/mainnet-network.json
+NX_VEGA_NETWORKS={\"MAINNET"\:\"https://explorer.vega.xyz"\,\"TESTNET\":\"https://explorer.fairground.wtf\"}
 NX_VEGA_ENV=MAINNET
+NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_BLOCK_EXPLORER=https://be.explorer.vega.xyz/rest/
 NX_ETHERSCAN_URL=https://etherscan.io
-NX_VEGA_GOVERNANCE_URL=https://token.vega.xyz
+NX_VEGA_GOVERNANCE_URL=https://token.vega.xyz
@@ -1,8 +1,10 @@
 # App configuration variables
 NX_TENDERMINT_URL=https://tm.be.mainnet-mirror.vega.xyz
-NX_TENDERMINT_WEBSOCKET_URL=wss://be.mainnet-mirror.vega.xyz/websocket
+NX_TENDERMINT_WEBSOCKET_URL=https://tm.be.mainnet-mirror.vega.xyz
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/mirror-network.json
+NX_VEGA_NETWORKS='{"DEVNET":"https://dev.token.vega.xyz","STAGNET3":"https://stagnet3.token.vega.xyz","TESTNET":"https://token.fairground.wtf","MAINNET":"https://token.vega.xyz"}'
 NX_VEGA_ENV=MIRROR
+NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_BLOCK_EXPLORER=https://be.mainnet-mirror.vega.xyz/rest/
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_VEGA_GOVERNANCE_URL=https://mainnet-mirror.token.vega.xyz
@@ -5,7 +5,8 @@ NX_VEGA_EXPLORER_URL=https://sandbox.explorer.vega.xyz
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_VEGA_NETWORKS={\"MAINNET"\:\"https://explorer.vega.xyz"\,\"TESTNET\":\"https://explorer.fairground.wtf\"}
 NX_TENDERMINT_URL=https://tm.sandbox.vega.xyz
-NX_TENDERMINT_WEBSOCKET_URL=wss://be.sandbox.vega.xyz/websocket
+NX_TENDERMINT_WEBSOCKET_URL=wss://tm.sandbox.vega.xyz/websocket
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_VEGA_GOVERNANCE_URL=https://sandbox.token.vega.xyz
@@ -4,6 +4,7 @@ NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/stagnet1-network.json
 NX_VEGA_ENV=STAGNET1
 NX_VEGA_EXPLORER_URL=https://stagnet1.explorer.vega.xyz
+NX_VEGA_NETWORKS={\"MAINNET"\:\"https://explorer.vega.xyz"\,\"TESTNET\":\"https://explorer.fairground.wtf\"}
 NX_VEGA_TOKEN_URL=https://stagnet1.token.vega.xyz
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_TENDERMINT_URL=https://tm.n01.stagnet1.vega.xyz
@@ -1,7 +1,9 @@
 NX_TENDERMINT_URL=https://tm.n00.stagnet3.vega.xyz
-NX_TENDERMINT_WEBSOCKET_URL=wss://be.stagnet3.vega.xyz/websocket
+NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n00.stagnet3.vega.xyz/websocket
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/stagnet3-network.json
+NX_VEGA_NETWORKS={\"MAINNET"\:\"https://explorer.vega.xyz"\,\"TESTNET\":\"https://explorer.fairground.wtf\"}
 NX_VEGA_ENV=STAGNET3
+NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_BLOCK_EXPLORER=https://be.stagnet3.vega.xyz/rest
 NX_VEGA_GOVERNANCE_URL=https://stagnet3.token.vega.xyz
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega-dev-releases/releases/
@@ -1,10 +1,13 @@
 # App configuration variables
 NX_TENDERMINT_URL=https://tm.be.testnet.vega.xyz
 NX_BLOCK_EXPLORER=https://be.testnet.vega.xyz/rest
-NX_TENDERMINT_WEBSOCKET_URL=wss://be.testnet.vega.xyz/websocket
+NX_TENDERMINT_WEBSOCKET_URL=wss://tm.be.testnet.vega.xyz/websocket/
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/testnet-network.json
+NX_VEGA_NETWORKS={\"MAINNET"\:\"https://explorer.vega.xyz"\,\"TESTNET\":\"https://explorer.fairground.wtf\"}
 NX_VEGA_ENV=TESTNET
+NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_VEGA_URL=https://api.n07.testnet.vega.xyz/graphql
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
+NX_VEGA_NETWORKS={}
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
-NX_VEGA_GOVERNANCE_URL=https://token.fairground.wtf
+NX_VEGA_GOVERNANCE_URL=https://token.fairground.wtf
@@ -1,12 +0,0 @@
-# App configuration variables
-NX_VEGA_ENV=VALIDATOR_TESTNET
-NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/validator-testnet-network.json
-NX_VEGA_URL=https://api.validators-testnet.vega.xyz/graphql
-NX_VEGA_REST=https://api.validators-testnet.vega.xyz/
-NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
-NX_ETHERSCAN_URL=https://sepolia.etherscan.io
-
-NX_VEGA_GOVERNANCE_URL=https://validator-testnet.governance.vega.xyz
-NX_TENDERMINT_URL=https://tm.be.validators-testnet.vega.xyz
-NX_BLOCK_EXPLORER=https://be.validators-testnet.vega.xyz/rest
-NX_TENDERMINT_WEBSOCKET_URL=wss://be.validators-testnet.vega.xyz/websocket
@@ -2,5 +2,6 @@
 NX_TENDERMINT_URL=http://localhost:26607/
 NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26607/websocket
 NX_VEGA_ENV=CUSTOM
+NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_BLOCK_EXPLORER=
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
@@ -1,5 +0,0 @@
-function ReactMarkdown({ children }) {
-  return <div>{children}</div>;
-}
-
-export default ReactMarkdown;
@@ -1,20 +1,16 @@
+import classnames from 'classnames';
 import { NetworkLoader, useInitializeEnv } from '@vegaprotocol/environment';
+import { Nav } from './components/nav';
 import { Header } from './components/header';
 import { Main } from './components/main';
 import { TendermintWebsocketProvider } from './contexts/websocket/tendermint-websocket-provider';
 import { Footer } from './components/footer/footer';
-import {
-  AnnouncementBanner,
-  ExternalLink,
-  Icon,
-} from '@vegaprotocol/ui-toolkit';
+import { AnnouncementBanner, ExternalLink } from '@vegaprotocol/ui-toolkit';
 import {
  AssetDetailsDialog,
  useAssetDetailsDialogStore,
 } from '@vegaprotocol/assets';
 import { DEFAULT_CACHE_CONFIG } from '@vegaprotocol/apollo-client';
-import classNames from 'classnames';
-import { useState } from 'react';

 const DialogsContainer = () => {
  const { isOpen, id, trigger, asJson, setOpen } = useAssetDetailsDialogStore();
@@ -29,58 +25,35 @@ const DialogsContainer = () => {
  );
 };

-const MainnetSimAd = () => {
-  const [shouldDisplayBanner, setShouldDisplayBanner] = useState<boolean>(true);
-
-  // Return an empty div so that the grid layout in _app.page.ts
-  // renders correctly
-  if (!shouldDisplayBanner) {
-    return <div />;
-  }
-
-  return (
-    <AnnouncementBanner>
-      <div className="grid grid-cols-[auto_1fr] gap-4 font-alpha calt uppercase text-center text-lg text-white">
-        <button
-          className="flex items-center"
-          onClick={() => setShouldDisplayBanner(false)}
-        >
-          <Icon name="cross" className="w-6 h-6" ariaLabel="dismiss" />
-        </button>
-        <div>
-          <span className="pr-4">Mainnet sim 3 is live!</span>
-          <ExternalLink href="https://fairground.wtf/">Learn more</ExternalLink>
-        </div>
-      </div>
-    </AnnouncementBanner>
-  );
-};
-
 function App() {
+  const layoutClasses = classnames(
+    'grid grid-rows-[auto_1fr_auto] grid-cols-[1fr] md:grid-rows-[auto_minmax(700px,_1fr)_auto] md:grid-cols-[300px_1fr]',
+    'min-h-[100vh] mx-auto my-0',
+    'border-neutral-700 dark:border-neutral-300 lg:border-l lg:border-r',
+    'bg-white dark:bg-black',
+    'antialiased text-black dark:text-white',
+    'overflow-hidden relative'
+  );
+
  return (
    <TendermintWebsocketProvider>
      <NetworkLoader cache={DEFAULT_CACHE_CONFIG}>
-        <div
-          className={classNames(
-            'max-w-[1500px] min-h-[100vh]',
-            'mx-auto my-0',
-            'grid grid-rows-[auto_1fr_auto] grid-cols-1',
-            'border-vega-light-200 dark:border-vega-dark-200 lg:border-l lg:border-r',
-            'antialiased text-black dark:text-white',
-            'overflow-hidden relative'
-          )}
-        >
-          <div>
-            <Header />
-            <MainnetSimAd />
-          </div>
-          <div>
-            <Main />
-          </div>
-          <div>
-            <Footer />
+        <AnnouncementBanner>
+          <div className="font-alpha calt uppercase text-center text-lg text-white">
+            <span className="pr-4">Mainnet sim 2 coming in March!</span>
+            <ExternalLink href="https://fairground.wtf/">
+              Learn more
+            </ExternalLink>
          </div>
+        </AnnouncementBanner>
+
+        <div className={layoutClasses}>
+          <Header />
+          <Nav />
+          <Main />
+          <Footer />
        </div>
+
        <DialogsContainer />
      </NetworkLoader>
    </TendermintWebsocketProvider>
@@ -1,5 +1,5 @@
 import { useAssetDataProvider } from '@vegaprotocol/assets';
-import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
+import { addDecimalsFormatNumber } from '@vegaprotocol/react-helpers';
 import { AssetLink } from '../links';

 export type AssetBalanceProps = {
@@ -1,4 +1,4 @@
-import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
+import { addDecimalsFormatNumber } from '@vegaprotocol/react-helpers';
 import { useExplorerGovernanceAssetQuery } from './__generated__/Governance-asset';
 import AssetBalance from './asset-balance';

@@ -1,11 +1,11 @@
 import type { AssetFieldsFragment } from '@vegaprotocol/assets';
 import { AssetTypeMapping, AssetStatusMapping } from '@vegaprotocol/assets';
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';
+import type { VegaICellRendererParams } from '@vegaprotocol/ui-toolkit';
 import { ButtonLink } from '@vegaprotocol/ui-toolkit';
 import type { AgGridReact } from 'ag-grid-react';
 import { AgGridColumn } from 'ag-grid-react';
-import { AgGridDynamic as AgGrid } from '@vegaprotocol/datagrid';
-import type { VegaICellRendererParams } from '@vegaprotocol/datagrid';
+import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
 import { useRef, useLayoutEffect } from 'react';
 import { BREAKPOINT_MD } from '../../config/breakpoints';
 import { useNavigate } from 'react-router-dom';
@@ -2,11 +2,11 @@ import React from 'react';
 import type { BlockMeta } from '../../routes/blocks/tendermint-blockchain-response';
 import { Routes } from '../../routes/route-names';
 import { Link } from 'react-router-dom';
-import { getDateTimeFormat } from '@vegaprotocol/utils';
+import { getDateTimeFormat } from '@vegaprotocol/react-helpers';
 import { Tooltip } from '@vegaprotocol/ui-toolkit';
 import { TimeAgo } from '../time-ago';
 import { TableWithTbody, TableRow, TableCell } from '../table';
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';

 interface BlockProps {
  block: BlockMeta;
@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';
 import React from 'react';
 import type { TendermintBlockchainResponse } from '../../routes/blocks/tendermint-blockchain-response';
 import { BlockData } from './block-data';
@@ -1,7 +1,7 @@
 import React from 'react';
 import { FixedSizeList as List } from 'react-window';
 import InfiniteLoader from 'react-window-infinite-loader';
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';
 import type { BlockMeta } from '../../routes/blocks/tendermint-blockchain-response';
 import { BlockData } from './block-data';
 import EmptyList from '../empty-list/empty-list';
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useTendermintWebsocket } from '../../hooks/use-tendermint-websocket';
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';
 import { ButtonLink } from '@vegaprotocol/ui-toolkit';

 interface BlocksRefetchProps {
@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';
 import {
  Button,
  Dialog,
@@ -19,12 +19,12 @@ const EmptyList = ({ heading, label }: EmptyListProps) => {

      <div className="mt-4">
        {heading ? (
-          <h1 className="font-alpha calt text-xl uppercase text-center leading-relaxed">
+          <h1 className="font-alpha text-xl uppercase text-center leading-relaxed">
            {heading}
          </h1>
        ) : null}
        {label ? (
-          <p className="font-alpha calt text-gray-500 text-center">{label}</p>
+          <p className="font-alpha text-gray-500 text-center">{label}</p>
        ) : null}
      </div>
    </div>
@@ -22,3 +22,29 @@ query ExplorerFutureEpoch {
    }
  }
 }
+
+# query ExplorerEpoch($id: ID!) {
+#
+##### This could be useful for calculating roughly when a future epoch will
+##### occur, but epoch not exist results in a total error
+#  networkParameter(key: "validators.epoch.length") {
+#    value
+# }
+#
+##### This could be useful for relating where we are in time, but as above
+##### the total failure caused by epoch(id) not existing
+##### means this is useful
+#  currentEpoch: epoch {
+#    id
+#  }
+#
+#  epoch(id: $id) {
+#    id
+#    timestamps {
+#      start
+#      end
+#      firstBlock
+#      lastBlock
+#    }
+#  }
+#}
@@ -1,7 +1,7 @@
 import { MockedProvider } from '@apollo/client/testing';
 import { render } from '@testing-library/react';
 import EpochMissingOverview, { calculateEpochData } from './epoch-missing';
-import { getSecondsFromInterval } from '@vegaprotocol/utils';
+import { getSecondsFromInterval } from '@vegaprotocol/react-helpers';
 const START_DATE_PAST = 'Monday, 17 February 2022 11:44:09';

 describe('getSecondsFromInterval', () => {
@@ -4,7 +4,8 @@ import addSeconds from 'date-fns/addSeconds';
 import formatDistance from 'date-fns/formatDistance';
 import { Icon, Tooltip } from '@vegaprotocol/ui-toolkit';
 import isFuture from 'date-fns/isFuture';
-import { getSecondsFromInterval, isValidDate } from '@vegaprotocol/utils';
+import { isValidDate } from '@vegaprotocol/react-helpers';
+import { getSecondsFromInterval } from '@vegaprotocol/react-helpers';

 export type EpochMissingOverviewProps = {
  missingEpochId?: string;
@@ -1,6 +1,6 @@
 import { useExplorerEpochQuery } from './__generated__/Epoch';

-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';
 import { BlockLink } from '../links';
 import { Time } from '../time';
 import { TimeAgo } from '../time-ago';
@@ -1,6 +1,5 @@
 import { NodeSwitcherDialog, useEnvironment } from '@vegaprotocol/environment';
-import { t } from '@vegaprotocol/i18n';
-import { useScreenDimensions } from '@vegaprotocol/react-helpers';
+import { t, useScreenDimensions } from '@vegaprotocol/react-helpers';
 import { ExternalLink, Link } from '@vegaprotocol/ui-toolkit';
 import { useMemo, useState } from 'react';
 import { ENV } from '../../config/env';
@@ -16,7 +15,7 @@ export const Footer = () => {

  return (
    <>
-      <footer className="grid grid-rows-2 grid-cols-[1fr_auto] text-xs md:text-md md:flex md:col-span-2 px-4 py-2 gap-4 border-t border-vega-light-200 dark:border-vega-dark-200">
+      <footer className="grid grid-rows-2 grid-cols-[1fr_auto] text-xs md:text-md md:flex md:col-span-2 px-4 py-2 gap-4 border-t border-neutral-700 dark:border-neutral-300">
        <div className="flex justify-between gap-2 align-middle">
          {GIT_COMMIT_HASH && (
            <div className="content-center flex border-r border-neutral-700 dark:border-neutral-300 pr-4">
@@ -19,10 +19,12 @@ const renderComponent = () => (
 );

 describe('Header', () => {
-  it('should render navigation', () => {
+  it('should render heading', () => {
    render(renderComponent());

-    expect(screen.getByTestId('navigation')).toHaveTextContent('Explorer');
+    expect(screen.getByTestId('explorer-header')).toHaveTextContent(
+      'Vega Explorer'
+    );
  });
  it('should render search', () => {
    render(renderComponent());
@@ -1,108 +1,43 @@
-import { matchPath, useLocation } from 'react-router-dom';
-import {
-  ThemeSwitcher,
-  Navigation,
-  NavigationList,
-  NavigationItem,
-  NavigationLink,
-  NavigationBreakpoint,
-  NavigationTrigger,
-  NavigationContent,
-} from '@vegaprotocol/ui-toolkit';
-import { t } from '@vegaprotocol/i18n';
+import classnames from 'classnames';
+import { Link } from 'react-router-dom';
+import { ThemeSwitcher, Icon } from '@vegaprotocol/ui-toolkit';
+import { t } from '@vegaprotocol/react-helpers';
+import { Search } from '../search';
 import { Routes } from '../../routes/route-names';
 import { NetworkSwitcher } from '@vegaprotocol/environment';
-import type { Navigable } from '../../routes/router-config';
-import routerConfig from '../../routes/router-config';
-import { useMemo } from 'react';
-import compact from 'lodash/compact';
-import { Search } from '../search';
-
-const routeToNavigationItem = (r: Navigable) => (
-  <NavigationItem key={r.name}>
-    <NavigationLink to={r.path}>{r.text}</NavigationLink>
-  </NavigationItem>
-);
+import { useNavStore } from '../nav';

 export const Header = () => {
-  const mainItems = compact(
-    [Routes.TX, Routes.BLOCKS, Routes.ORACLES, Routes.VALIDATORS].map((n) =>
-      routerConfig.find((r) => r.path === n)
-    )
+  const [open, toggle] = useNavStore((state) => [state.open, state.toggle]);
+  const headerClasses = classnames(
+    'md:col-span-2',
+    'grid grid-rows-2 md:grid-rows-1 grid-cols-[1fr_auto] md:grid-cols-[auto_1fr_auto] items-center',
+    'p-4 gap-2 md:gap-4',
+    'border-b border-neutral-700 dark:border-neutral-300 bg-black',
+    'dark text-white'
  );
-
-  const groupedItems = compact(
-    [
-      Routes.PARTIES,
-      Routes.ASSETS,
-      Routes.MARKETS,
-      Routes.GOVERNANCE,
-      Routes.NETWORK_PARAMETERS,
-      Routes.GENESIS,
-    ].map((n) => routerConfig.find((r) => r.path === n))
-  );
-
-  const { pathname } = useLocation();
-
-  /**
-   * Because the grouped items are displayed in a sub menu under an "Other" item
-   * we need to determine whether any underlying item is active to highlight the
-   * trigger in the same fashion as any other top-level `NavigationLink`.
-   * This function checks whether the current location pathname is one of the
-   * underlying NavigationLinks.
-   */
-  const isOnOther = useMemo(() => {
-    for (const path of groupedItems.map((r) => r.path)) {
-      const matched = matchPath(`${path}/*`, pathname);
-      if (matched) return true;
-    }
-    return false;
-  }, [groupedItems, pathname]);
-
  return (
-    <Navigation
-      appName="Explorer"
-      theme="system"
-      breakpoints={[490, 900]}
-      actions={
-        <>
-          <ThemeSwitcher />
-          <Search />
-        </>
-      }
-      onResize={(width, el) => {
-        if (width < 1157) {
-          // switch to magnifying glass trigger when width < 1157
-          el.classList.remove('nav-search-full');
-          el.classList.add('nav-search-compact');
-        } else {
-          el.classList.remove('nav-search-compact');
-          el.classList.add('nav-search-full');
-        }
-      }}
-    >
-      <NavigationList hide={[NavigationBreakpoint.Small]}>
-        <NavigationItem>
-          <NetworkSwitcher />
-        </NavigationItem>
-      </NavigationList>
-      <NavigationList
-        hide={[NavigationBreakpoint.Small, NavigationBreakpoint.Narrow]}
+    <header className={headerClasses}>
+      <div className="flex h-full items-center sm:items-stretch gap-4">
+        <Link to={Routes.HOME}>
+          <h1
+            className="text-white text-3xl font-alpha uppercase calt mb-0"
+            data-testid="explorer-header"
+          >
+            {t('Vega Explorer')}
+          </h1>
+        </Link>
+        <NetworkSwitcher />
+      </div>
+      <button
+        data-testid="open-menu"
+        className="md:hidden text-white"
+        onClick={() => toggle()}
      >
-        {mainItems.map(routeToNavigationItem)}
-        {groupedItems && (
-          <NavigationItem>
-            <NavigationTrigger isActive={Boolean(isOnOther)}>
-              {t('Other')}
-            </NavigationTrigger>
-            <NavigationContent>
-              <NavigationList>
-                {groupedItems.map(routeToNavigationItem)}
-              </NavigationList>
-            </NavigationContent>
-          </NavigationItem>
-        )}
-      </NavigationList>
-    </Navigation>
+        <Icon name={open ? 'cross' : 'menu'} />
+      </button>
+      <Search />
+      <ThemeSwitcher className="-my-4" />
+    </header>
  );
 };
@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Routes } from '../../routes/route-names';
@@ -1,6 +1,6 @@
 import type { HTMLInputTypeAttribute, SyntheticEvent } from 'react';
 import { Input, Button } from '@vegaprotocol/ui-toolkit';
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';

 interface JumpToProps {
  label: string;
@@ -3,7 +3,7 @@ import { useExplorerMarketQuery } from './__generated__/Market';
 import { Link } from 'react-router-dom';

 import type { ComponentProps } from 'react';
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';
 import Hash from '../hash';

 export type MarketLinkProps = Partial<ComponentProps<typeof Link>> & {
@@ -48,7 +48,7 @@ const MarketLink = ({
      <Link
        className="underline"
        {...props}
-        to={`/${Routes.MARKETS}/${id}`}
+        to={`/${Routes.MARKETS}#${id}`}
        title={id}
      >
        {label}
@@ -56,7 +56,7 @@ const MarketLink = ({
    );
  } else {
    return (
-      <Link className="underline" {...props} to={`/${Routes.MARKETS}/${id}`}>
+      <Link className="underline" {...props} to={`/${Routes.MARKETS}#${id}`}>
        <Hash text={id} />
      </Link>
    );
@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';

 import type { ComponentProps } from 'react';
 import Hash from '../hash';
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';
 import { isValidPartyId } from '../../../routes/parties/id/components/party-id-error';
 import { truncateMiddle } from '@vegaprotocol/ui-toolkit';

@@ -4,14 +4,13 @@ import { ENV } from '../../../config/env';
 import Hash from '../hash';
 export type ProposalLinkProps = {
  id: string;
-  text?: string;
 };

 /**
 * Given a proposal ID, generates an external link over to
 * the Governance page for more information
 */
-const ProposalLink = ({ id, text }: ProposalLinkProps) => {
+const ProposalLink = ({ id }: ProposalLinkProps) => {
  const { data } = useExplorerProposalQuery({
    variables: { id },
  });
@@ -21,7 +20,7 @@ const ProposalLink = ({ id, text }: ProposalLinkProps) => {

  return (
    <ExternalLink href={`${base}/proposals/${id}`}>
-      {text ? text : <Hash text={label} />}
+      <Hash text={label} />
    </ExternalLink>
  );
 };
@@ -2,10 +2,11 @@ import {
  addDecimalsFormatNumber,
  formatNumberPercentage,
  getMarketExpiryDateFormatted,
-} from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
-import type { MarketInfoWithData } from '@vegaprotocol/market-info';
+  t,
+} from '@vegaprotocol/react-helpers';
+import type { MarketInfoNoCandlesQuery } from '@vegaprotocol/market-info';
 import { MarketInfoTable } from '@vegaprotocol/market-info';
+import pick from 'lodash/pick';
 import {
  MarketStateMapping,
  MarketTradingModeMapping,
@@ -16,8 +17,13 @@ import BigNumber from 'bignumber.js';
 import { useMemo } from 'react';
 import { Link } from 'react-router-dom';

-export const MarketDetails = ({ market }: { market: MarketInfoWithData }) => {
-  const quoteUnit = market?.tradableInstrument.instrument.product.quoteName;
+export const MarketDetails = ({
+  market,
+}: {
+  market: MarketInfoNoCandlesQuery['market'];
+}) => {
+  const assetSymbol =
+    market?.tradableInstrument.instrument.product?.settlementAsset.symbol;
  const assetId = useMemo(
    () => market?.tradableInstrument.instrument.product?.settlementAsset.id,
    [market]
@@ -27,18 +33,12 @@ export const MarketDetails = ({ market }: { market: MarketInfoWithData }) => {
  if (!market) return null;

  const keyDetails = {
-    decimalPlaces: market.decimalPlaces,
-    positionDecimalPlaces: market.positionDecimalPlaces,
-    tradingMode: market.tradingMode,
+    ...pick(market, 'decimalPlaces', 'positionDecimalPlaces', 'tradingMode'),
    state: MarketStateMapping[market.state],
  };
  const assetDecimals =
    market.tradableInstrument.instrument.product.settlementAsset.decimals;

-  const liquidityPriceRange = formatNumberPercentage(
-    new BigNumber(market.lpPriceRange).times(100)
-  );
-
  const panels = [
    {
      title: t('Key details'),
@@ -179,40 +179,32 @@ export const MarketDetails = ({ market }: { market: MarketInfoWithData }) => {
    {
      title: t('Liquidity price range'),
      content: (
-        <>
-          <p className="text-xs mb-4">
-            {`For liquidity orders to count towards a commitment, they must be
-            within the liquidity monitoring bounds.`}
-          </p>
-          <p className="text-xs mb-4">
-            {`The liquidity price range is a ${liquidityPriceRange} difference from the mid
-        price.`}
-          </p>
-          <MarketInfoTable
-            noBorder={false}
-            data={{
-              liquidityPriceRange: `${liquidityPriceRange} of mid price`,
-              lowestPrice:
-                market.data?.midPrice &&
-                `${addDecimalsFormatNumber(
-                  new BigNumber(1)
-                    .minus(market.lpPriceRange)
-                    .times(market.data.midPrice)
-                    .toString(),
-                  market.decimalPlaces
-                )} ${quoteUnit}`,
-              highestPrice:
-                market.data?.midPrice &&
-                `${addDecimalsFormatNumber(
-                  new BigNumber(1)
-                    .plus(market.lpPriceRange)
-                    .times(market.data.midPrice)
-                    .toString(),
-                  market.decimalPlaces
-                )} ${quoteUnit}`,
-            }}
-          ></MarketInfoTable>
-        </>
+        <MarketInfoTable
+          noBorder={false}
+          data={{
+            liquidityPriceRange: formatNumberPercentage(
+              new BigNumber(market.lpPriceRange).times(100)
+            ),
+            LPVolumeMin:
+              market.data?.midPrice &&
+              `${addDecimalsFormatNumber(
+                new BigNumber(1)
+                  .minus(market.lpPriceRange)
+                  .times(market.data.midPrice)
+                  .toString(),
+                market.decimalPlaces
+              )} ${assetSymbol}`,
+            LPVolumeMax:
+              market.data?.midPrice &&
+              `${addDecimalsFormatNumber(
+                new BigNumber(1)
+                  .plus(market.lpPriceRange)
+                  .times(market.data.midPrice)
+                  .toString(),
+                market.decimalPlaces
+              )} ${assetSymbol}`,
+          }}
+        ></MarketInfoTable>
      ),
    },
    {
@@ -245,7 +237,7 @@ export const MarketDetails = ({ market }: { market: MarketInfoWithData }) => {
    <>
      {panels.map((p) => (
        <div className="mb-3">
-          <h2 className="font-alpha calt text-xl">{p.title}</h2>
+          <h2 className="font-alpha text-xl">{p.title}</h2>
          {p.content}
        </div>
      ))}
@@ -1,13 +1,13 @@
 import type { MarketFieldsFragment } from '@vegaprotocol/market-list';
-import { t } from '@vegaprotocol/i18n';
-import { ButtonLink } from '@vegaprotocol/ui-toolkit';
-import type { AgGridReact } from 'ag-grid-react';
-import { AgGridColumn } from 'ag-grid-react';
-import { AgGridDynamic as AgGrid } from '@vegaprotocol/datagrid';
+import { t } from '@vegaprotocol/react-helpers';
 import type {
  VegaICellRendererParams,
  VegaValueGetterParams,
-} from '@vegaprotocol/datagrid';
+} from '@vegaprotocol/ui-toolkit';
+import { ButtonLink } from '@vegaprotocol/ui-toolkit';
+import type { AgGridReact } from 'ag-grid-react';
+import { AgGridColumn } from 'ag-grid-react';
+import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
 import { useRef, useLayoutEffect } from 'react';
 import { BREAKPOINT_MD } from '../../config/breakpoints';
 import { MarketStateMapping } from '@vegaprotocol/types';
@@ -0,0 +1,181 @@
+import { NavLink, useLocation } from 'react-router-dom';
+import type { Navigable } from '../../routes/router-config';
+import routerConfig from '../../routes/router-config';
+import classnames from 'classnames';
+import { create } from 'zustand';
+import {
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+} from 'react';
+import { Icon } from '@vegaprotocol/ui-toolkit';
+import first from 'lodash/first';
+import last from 'lodash/last';
+import { BREAKPOINT_MD } from '../../config/breakpoints';
+
+type NavStore = {
+  open: boolean;
+  toggle: () => void;
+  hide: () => void;
+};
+
+export const useNavStore = create<NavStore>((set, get) => ({
+  open: false,
+  toggle: () => set({ open: !get().open }),
+  hide: () => set({ open: false }),
+}));
+
+const NavLinks = ({ links }: { links: Navigable[] }) => {
+  const navLinks = links.map((r) => (
+    <li key={r.name}>
+      <NavLink
+        to={r.path}
+        className={({ isActive }) =>
+          classnames(
+            'block mb-2 px-2',
+            'text-lg hover:bg-vega-pink dark:hover:bg-vega-yellow hover:text-white dark:hover:text-black',
+            {
+              'bg-vega-pink text-white dark:bg-vega-yellow dark:text-black':
+                isActive,
+            }
+          )
+        }
+      >
+        {r.text}
+      </NavLink>
+    </li>
+  ));
+
+  return <ul className="pr-8 md:pr-0">{navLinks}</ul>;
+};
+
+export const Nav = () => {
+  const [open, hide] = useNavStore((state) => [state.open, state.hide]);
+  const location = useLocation();
+
+  const navRef = useRef<HTMLElement>(null);
+  const btnRef = useRef<HTMLButtonElement>(null);
+
+  const focusable = useMemo(
+    () =>
+      navRef.current
+        ? [
+            ...(navRef.current.querySelectorAll(
+              'a, button'
+            ) as NodeListOf<HTMLElement>),
+          ]
+        : [],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [navRef.current] // do not remove `navRef.current` from deps
+  );
+
+  const closeNav = useCallback(() => {
+    hide();
+    console.log(focusable);
+    focusable.forEach((fe) =>
+      fe.setAttribute(
+        'tabindex',
+        window.innerWidth > BREAKPOINT_MD ? '0' : '-1'
+      )
+    );
+  }, [focusable, hide]);
+
+  // close navigation when location changes
+  useEffect(() => {
+    closeNav();
+  }, [closeNav, location]);
+
+  useLayoutEffect(() => {
+    if (open) {
+      focusable.forEach((fe) => fe.setAttribute('tabindex', '0'));
+    }
+
+    document.body.style.overflow = open ? 'hidden' : '';
+    const offset =
+      document.querySelector('header')?.getBoundingClientRect().top || 0;
+    if (navRef.current) {
+      navRef.current.style.height = `calc(100vh - ${offset}px)`;
+    }
+
+    // focus current by default
+    if (navRef.current && open) {
+      (navRef.current.querySelector('a[aria-current]') as HTMLElement)?.focus();
+    }
+
+    const closeOnEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        closeNav();
+      }
+    };
+
+    // tabbing loop
+    const focusLast = (e: FocusEvent) => {
+      e.preventDefault();
+      const isNavElement =
+        e.relatedTarget && navRef.current?.contains(e.relatedTarget as Node);
+      if (!isNavElement && open) {
+        last(focusable)?.focus();
+      }
+    };
+    const focusFirst = (e: FocusEvent) => {
+      e.preventDefault();
+      const isNavElement =
+        e.relatedTarget && navRef.current?.contains(e.relatedTarget as Node);
+      if (!isNavElement && open) {
+        first(focusable)?.focus();
+      }
+    };
+
+    const resetOnDesktop = () => {
+      focusable.forEach((fe) =>
+        fe.setAttribute(
+          'tabindex',
+          window.innerWidth > BREAKPOINT_MD ? '0' : '-1'
+        )
+      );
+    };
+
+    window.addEventListener('resize', resetOnDesktop);
+
+    first(focusable)?.addEventListener('focusout', focusLast);
+    last(focusable)?.addEventListener('focusout', focusFirst);
+
+    document.addEventListener('keydown', closeOnEsc);
+    return () => {
+      window.removeEventListener('resize', resetOnDesktop);
+      document.removeEventListener('keydown', closeOnEsc);
+      first(focusable)?.removeEventListener('focusout', focusLast);
+      last(focusable)?.removeEventListener('focusout', focusFirst);
+    };
+  }, [closeNav, focusable, open]);
+
+  return (
+    <nav
+      ref={navRef}
+      className={classnames(
+        'absolute top-0 z-20 overflow-y-auto',
+        'transition-[right]',
+        {
+          'right-[-200vw] h-full': !open,
+          'right-0 h-[100vh]': open,
+        },
+        'w-full p-4  border-neutral-700 dark:border-neutral-300',
+        'bg-white dark:bg-black',
+        'md:static md:border-r'
+      )}
+    >
+      <NavLinks links={routerConfig} />
+      <button
+        ref={btnRef}
+        className="absolute top-0 right-0 p-4 md:hidden"
+        onClick={() => {
+          closeNav();
+        }}
+      >
+        <Icon name="cross" />
+      </button>
+    </nav>
+  );
+};
@@ -83,7 +83,7 @@ const NestedDataListItem = ({
  });

  const titleClasses = classNames({
-    'text-xl pl-4 border-l-4 font-alpha calt': hasChildren,
+    'text-xl pl-4 border-l-4 font-alpha': hasChildren,
    'text-base font-medium whitespace-nowrap': !hasChildren,
  });

@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';
 import { useExplorerDeterministicOrderQuery } from './__generated__/Order';
 import { MarketLink } from '../links';
 import PriceInMarket from '../price-in-market/price-in-market';
@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';
 import { useExplorerDeterministicOrderQuery } from './__generated__/Order';
 import { MarketLink } from '../links';
 import PriceInMarket from '../price-in-market/price-in-market';
@@ -101,7 +101,7 @@ const DeterministicOrderDetails = ({
                  {t('Remaining')}
                </h2>
                <h5 className="text-lg font-medium text-gray-500 mb-0">
-                  <SizeInMarket size={o.remaining} marketId={o.market.id} />
+                  {o.remaining}
                </h5>
              </div>
            )}
@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';
 import type * as Schema from '@vegaprotocol/types';
 import type { components } from '../../../../types/explorer';

@@ -1,26 +0,0 @@
-import { t } from '@vegaprotocol/i18n';
-
-interface CancelSummaryProps {
-  orderId?: string;
-  marketId?: string;
-}
-
-/**
- * Simple component for rendering a reasonable string from an order cancellation
- */
-export const CancelSummary = ({ orderId, marketId }: CancelSummaryProps) => {
-  return <span className="font-bold">{getLabel(orderId, marketId)}</span>;
-};
-
-export function getLabel(
-  orderId: string | undefined,
-  marketId: string | undefined
-): string {
-  if (!orderId && !marketId) {
-    return t('All orders');
-  } else if (marketId && !orderId) {
-    return t('All in market');
-  }
-
-  return '-';
-}
@@ -20,7 +20,7 @@ export const PageHeader = ({
  copy = false,
  className,
 }: PageHeaderProps) => {
-  const titleClasses = 'text-4xl xl:text-5xl uppercase font-alpha calt';
+  const titleClasses = 'text-4xl xl:text-5xl uppercase font-alpha';
  return (
    <header className={className}>
      <span className={`${titleClasses} block`}>{prefix}</span>
@@ -1 +0,0 @@
-export * from './page-actions';
@@ -1,10 +0,0 @@
-import type { HTMLAttributes } from 'react';
-
-export const PageActions = ({
-  children,
-  ...props
-}: HTMLAttributes<HTMLDivElement>) => (
-  <div className="flex flex-row items-start gap-1" {...props}>
-    {children}
-  </div>
-);
@@ -1,45 +0,0 @@
-import classNames from 'classnames';
-import type { HTMLAttributes, ReactNode } from 'react';
-import { useDocumentTitle } from '../../hooks/use-document-title';
-import { RouteTitle } from '../route-title';
-import { PageActions } from './page-actions';
-
-type PageTitleProps = {
-  /**
-   * The page title
-   * (also sets the document title unless overwritten by
-   * `documentTitle` property)
-   */
-  title: string;
-  /**
-   * The react node that consists of CTA buttons, links, etc.
-   */
-  actions?: ReactNode;
-  /**
-   * Overwrites the document title
-   */
-  documentTitle?: Parameters<typeof useDocumentTitle>[0];
-} & Omit<HTMLAttributes<HTMLHeadingElement>, 'children'>;
-
-export const PageTitle = ({
-  title,
-  actions,
-  documentTitle,
-  className,
-  ...props
-}: PageTitleProps) => {
-  useDocumentTitle(
-    documentTitle && documentTitle.length > 0 ? documentTitle : [title]
-  );
-  return (
-    <div
-      className="flex flex-col md:flex-row gap-1 justify-between content-start mb-8"
-      data-testid="page-title"
-    >
-      <RouteTitle className={classNames('mb-1', className)} {...props}>
-        {title}
-      </RouteTitle>
-      {actions && <PageActions>{actions}</PageActions>}
-    </div>
-  );
-};
@@ -1,5 +1,4 @@
-import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
+import { addDecimalsFormatNumber, t } from '@vegaprotocol/react-helpers';
 import isUndefined from 'lodash/isUndefined';
 import { useExplorerMarketQuery } from '../links/market-link/__generated__/Market';
 import get from 'lodash/get';
@@ -1,18 +1,21 @@
-import type { ProposalListFieldsFragment } from '@vegaprotocol/proposals';
-import { VoteProgress } from '@vegaprotocol/proposals';
+import type { ProposalListFieldsFragment } from '@vegaprotocol/governance';
+import { VoteProgress } from '@vegaprotocol/governance';
 import type { AgGridReact } from 'ag-grid-react';
 import { AgGridColumn } from 'ag-grid-react';
-import { ExternalLink } from '@vegaprotocol/ui-toolkit';
-import { AgGridDynamic as AgGrid } from '@vegaprotocol/datagrid';
 import type {
  VegaICellRendererParams,
  VegaValueFormatterParams,
-} from '@vegaprotocol/datagrid';
+} from '@vegaprotocol/ui-toolkit';
+import { ExternalLink } from '@vegaprotocol/ui-toolkit';
+import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
 import { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import type { RowClickedEvent } from 'ag-grid-community';
-import { getDateTimeFormat } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
-import { NetworkParams, useNetworkParams } from '@vegaprotocol/react-helpers';
+import {
+  getDateTimeFormat,
+  NetworkParams,
+  t,
+  useNetworkParams,
+} from '@vegaprotocol/react-helpers';
 import { ProposalStateMapping } from '@vegaprotocol/types';
 import BigNumber from 'bignumber.js';
 import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';
 import { StatusMessage } from '../status-message';

 interface RenderFetchedProps {
@@ -13,7 +13,7 @@ export const RouteTitle = ({
  ...props
 }: RouteTitleProps) => {
  const classes = classnames(
-    'font-alpha calt',
+    'font-alpha',
    'text-4xl',
    'uppercase',
    'mb-8',
@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';
 import React from 'react';

 interface RouteErrorBoundaryProps {
@@ -1,35 +1,15 @@
 import { useCallback, useState } from 'react';
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';
 import { Button, Input, InputError } from '@vegaprotocol/ui-toolkit';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';
 import { getSearchType, SearchTypes, toHex } from './detect-search';
 import { Routes } from '../../routes/route-names';
-import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
-import classNames from 'classnames';

 interface FormFields {
  search: string;
 }

-const MagnifyingGlass = () => (
-  <svg
-    className="w-4 h-4"
-    viewBox="0 0 18 18"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <line
-      x1="12.8202"
-      y1="13.1798"
-      x2="17.0629"
-      y2="17.4224"
-      stroke="currentColor"
-    />
-    <circle cx="8" cy="8" r="7.5" stroke="currentColor" />
-  </svg>
-);
-
 export const Search = () => {
  const { register, handleSubmit } = useForm<FormFields>();
  const navigate = useNavigate();
@@ -69,95 +49,39 @@ export const Search = () => {
    [navigate]
  );

-  const searchForm = (
-    <form className="block min-w-[290px]" onSubmit={handleSubmit(onSubmit)}>
-      <div className="flex relative items-stretch gap-2 text-xs">
-        <label htmlFor="search" className="sr-only">
-          {t('Search by block number or transaction hash')}
-        </label>
-        <button
-          className={classNames(
-            'absolute top-[50%] translate-y-[-50%] left-2',
-            'text-vega-light-300 dark:text-vega-dark-300'
-          )}
-        >
-          <MagnifyingGlass />
-        </button>
-        <Input
-          {...register('search')}
-          id="search"
-          data-testid="search"
-          className={classNames(
-            'peer',
-            'pl-8 py-2 text-xs',
-            'border rounded border-vega-light-200 dark:border-vega-dark-200'
-          )}
-          hasError={Boolean(error?.message)}
-          type="text"
-          placeholder={t('Enter block number, public key or transaction hash')}
-        />
-        {error?.message && (
-          <div
-            className={classNames(
-              'hidden peer-focus:block',
-              'bg-white dark:bg-black',
-              'border rounded-b border-t-0 border-vega-light-200 dark:border-vega-dark-200',
-              'absolute top-[100%] flex-1 w-full pb-2 px-2 text-black dark:text-white'
+  return (
+    <form
+      onSubmit={handleSubmit(onSubmit)}
+      className="w-full md:max-w-[620px] justify-self-end"
+    >
+      <label htmlFor="search" className="sr-only">
+        {t('Search by block number or transaction hash')}
+      </label>
+      <div className="flex items-stretch gap-2">
+        <div className="flex grow relative">
+          <Input
+            {...register('search')}
+            id="search"
+            data-testid="search"
+            className="text-white"
+            hasError={Boolean(error?.message)}
+            type="text"
+            placeholder={t(
+              'Enter block number, public key or transaction hash'
            )}
-          >
-            <InputError
-              data-testid="search-error"
-              intent="danger"
-              className="text-xs"
-            >
-              {error.message}
-            </InputError>
-          </div>
-        )}
-        <Button
-          className="hidden [.search-dropdown_&]:block"
-          type="submit"
-          size="xs"
-          data-testid="search-button"
-        >
+          />
+          {error?.message && (
+            <div className="bg-white border border-t-0 border-accent absolute top-[100%] flex-1 w-full pb-2 px-2 rounded-b text-black">
+              <InputError data-testid="search-error" intent="danger">
+                {error.message}
+              </InputError>
+            </div>
+          )}
+        </div>
+        <Button type="submit" size="sm" data-testid="search-button">
          {t('Search')}
        </Button>
      </div>
    </form>
  );
-
-  const searchTrigger = (
-    <DropdownMenu.Root>
-      <DropdownMenu.Trigger asChild>
-        <button className="text-vega-light-300 dark:text-vega-dark-300 data-open:text-black dark:data-open:text-white flex items-center">
-          <MagnifyingGlass />
-        </button>
-      </DropdownMenu.Trigger>
-      <DropdownMenu.Portal>
-        <DropdownMenu.Content
-          className={classNames(
-            'search-dropdown',
-            'p-2 min-w-[290px] z-20',
-            'text-vega-light-300 dark:text-vega-dark-300',
-            'bg-white dark:bg-black',
-            'border rounded border-vega-light-200 dark:border-vega-dark-200',
-            'shadow-[8px_8px_16px_0_rgba(0,0,0,0.4)]'
-          )}
-          align="end"
-          sideOffset={10}
-        >
-          {searchForm}
-        </DropdownMenu.Content>
-      </DropdownMenu.Portal>
-    </DropdownMenu.Root>
-  );
-
-  return (
-    <>
-      <div className="hidden [.nav-search-full_&]:block">{searchForm}</div>
-      <div className="hidden [.nav-search-compact_&]:block">
-        {searchTrigger}
-      </div>
-    </>
-  );
 };
@@ -1,5 +1,5 @@
 import { useAssetDataProvider } from '@vegaprotocol/assets';
-import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
+import { addDecimalsFormatNumber } from '@vegaprotocol/react-helpers';
 import { AssetLink } from '../links';

 export type DecimalSource = 'ASSET';
@@ -1,4 +1,4 @@
-import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
+import { addDecimalsFormatNumber } from '@vegaprotocol/react-helpers';
 import { useExplorerMarketQuery } from '../links/market-link/__generated__/Market';

 export type DecimalSource = 'MARKET';
@@ -11,7 +11,7 @@ export const StatusMessage = ({
  className,
  ...props
 }: StatusMessageProps) => {
-  const classes = classnames('font-alpha calt text-2xl mb-28', className);
+  const classes = classnames('font-alpha text-2xl mb-28', className);
  return (
    <h3 className={classes} {...props}>
      {children}
@@ -12,7 +12,7 @@ export const SubHeading = ({
  ...props
 }: SubHeadingProps) => {
  const classes = classnames(
-    'font-alpha calt',
+    'font-alpha',
    'text-2xl',
    'uppercase',
    'mt-8 mb-2',
@@ -1,5 +1,5 @@
 import { formatDistanceToNowStrict } from 'date-fns';
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';
 import { useEffect, useState } from 'react';

 interface TimeAgoProps {
@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';

 interface TimeProps {
  date: string | null | undefined;
@@ -1,4 +1,4 @@
-import { truncateByChars } from '@vegaprotocol/utils';
+import { truncateByChars } from '@vegaprotocol/react-helpers';
 import * as React from 'react';

 interface TruncateInlineProps {
@@ -2,7 +2,6 @@ import type { BatchCancellationInstruction } from '../../../../routes/types/bloc
 import { TxOrderType } from '../../tx-order-type';
 import { MarketLink } from '../../../links';
 import OrderSummary from '../../../order-summary/order-summary';
-import { CancelSummary } from '../../../order-summary/order-cancellation';

 interface BatchCancelProps {
  index: number;
@@ -20,14 +19,7 @@ export const BatchCancel = ({ index, submission }: BatchCancelProps) => {
        <TxOrderType orderType={'OrderCancellation'} />
      </td>
      <td>
-        {submission.orderId ? (
-          <OrderSummary id={submission.orderId} modifier="cancelled" />
-        ) : (
-          <CancelSummary
-            orderId={submission.orderId}
-            marketId={submission.marketId}
-          />
-        )}
+        <OrderSummary id={submission.orderId} modifier="cancelled" />
      </td>
      <td>
        <MarketLink id={submission.marketId} />
@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 import { TxDetailsChainEventBuiltinDeposit } from './tx-builtin-deposit';
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';

 import type { components } from '../../../../../types/explorer';
 import omit from 'lodash/omit';
@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';
 import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import { AssetLink, PartyLink } from '../../../links';
@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 import { TxDetailsChainEventBuiltinWithdrawal } from './tx-builtin-withdrawal';
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';

 import type { components } from '../../../../../types/explorer';
 import omit from 'lodash/omit';
@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';
 import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import { AssetLink, PartyLink } from '../../../links';
@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';

 import type { components } from '../../../../../types/explorer';
 import omit from 'lodash/omit';
@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';
 import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import { AssetLink } from '../../../links';
@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';

 import type { components } from '../../../../../types/explorer';
 import omit from 'lodash/omit';
@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';
 import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import { AssetLink } from '../../../links';
@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';

 import type { components } from '../../../../../types/explorer';
 import omit from 'lodash/omit';
@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';
 import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import { AssetLink } from '../../../links';
@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';
 import { TxDetailsChainEventErc20BridgePause } from './tx-erc20-bridge-pause';

 describe('Chain Event: ERC20 bridge pause', () => {
@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';
 import { TableRow, TableCell } from '../../../table';

 export interface TxDetailsChainEventErc20BridgePauseProps {
@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';

 import type { components } from '../../../../../types/explorer';
 import omit from 'lodash/omit';
@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';
 import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import { AssetLink, PartyLink } from '../../../links';
@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';

 import type { components } from '../../../../../types/explorer';
 import omit from 'lodash/omit';
@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';
 import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import { AssetLink } from '../../../links';
@@ -1,10 +1,11 @@
 import { render } from '@testing-library/react';
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';

 import type { components } from '../../../../../types/explorer';
 import { MockedProvider } from '@apollo/client/testing';
 import { MemoryRouter } from 'react-router-dom';
 import { TxDetailsChainMultisigSigner } from './tx-multisig-signer';
+import { getBlockTime } from './lib/get-block-time';

 type Added = components['schemas']['vegaERC20SignerAdded'];
 type Removed = components['schemas']['vegaERC20SignerRemoved'];
@@ -60,7 +61,10 @@ describe('Chain Event: multisig signer change', () => {
    expect(screen.getByText(t('Add signer'))).toBeInTheDocument();
    expect(screen.getByText(`${addedMock.newSigner}`)).toBeInTheDocument();

+    const expectedDate = getBlockTime(mockBlockTime);
+
    expect(screen.getByText(t('Signer change at'))).toBeInTheDocument();
+    expect(screen.getByText(expectedDate)).toBeInTheDocument();
  });

  it('Renders TableRows if all data is provided', () => {
@@ -89,6 +93,9 @@ describe('Chain Event: multisig signer change', () => {
    expect(screen.getByText(t('Remove signer'))).toBeInTheDocument();
    expect(screen.getByText(`${removedMock.oldSigner}`)).toBeInTheDocument();

+    const expectedDate = getBlockTime(mockBlockTime);
+
    expect(screen.getByText(t('Signer change at'))).toBeInTheDocument();
+    expect(screen.getByText(expectedDate)).toBeInTheDocument();
  });
 });
@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';
 import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import { getBlockTime } from './lib/get-block-time';
@@ -1,11 +1,12 @@
 import { render } from '@testing-library/react';
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';

 import type { components } from '../../../../../types/explorer';
 import { MockedProvider } from '@apollo/client/testing';
 import { MemoryRouter } from 'react-router-dom';
 import { TxDetailsChainMultisigThreshold } from './tx-multisig-threshold';
 import omit from 'lodash/omit';
+import { getBlockTime } from './lib/get-block-time';

 type Threshold =
  components['schemas']['vegaERC20MultiSigEvent']['thresholdSet'];
@@ -73,6 +74,9 @@ describe('Chain Event: multisig threshold change', () => {
    expect(screen.getByText(t('Threshold'))).toBeInTheDocument();
    expect(screen.getByText(`66.7%`)).toBeInTheDocument();

+    const expectedDate = getBlockTime(mockBlockTime);
+
    expect(screen.getByText(t('Threshold change date'))).toBeInTheDocument();
+    expect(screen.getByText(expectedDate)).toBeInTheDocument();
  });
 });
@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';
 import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import isNumber from 'lodash/isNumber';
@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';

 import type { components } from '../../../../../types/explorer';
 import omit from 'lodash/omit';
@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';
 import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import { PartyLink } from '../../../links';
@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';

 import type { components } from '../../../../../types/explorer';
 import omit from 'lodash/omit';
@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';
 import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import { PartyLink } from '../../../links';
@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';

 import type { components } from '../../../../../types/explorer';
 import omit from 'lodash/omit';
@@ -1,5 +1,4 @@
-import { formatNumber, toBigNum } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
+import { formatNumber, t, toBigNum } from '@vegaprotocol/react-helpers';
 import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import {
@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/i18n';
+import { t } from '@vegaprotocol/react-helpers';

 import type { components } from '../../../../../../types/explorer';
 import { TableRow } from '../../../../table';
@@ -1,5 +1,5 @@
 import { useExplorerSettlementAssetForMarketQuery } from '../__generated__/Explorer-settlement-asset';
-import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
+import { addDecimalsFormatNumber } from '@vegaprotocol/react-helpers';
 import type { ExplorerSettlementAssetForMarketQuery } from '../__generated__/Explorer-settlement-asset';
 import type { VegaSide } from './liquidity-provision-details-row';

--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Dariusz Majcherczyk	c53ac3b73a	test: move wait to the if	2023-02-23 10:40:00 +01:00
Dariusz Majcherczyk	1489fe9e16	test: revert before	2023-02-23 10:18:40 +01:00
Dariusz Majcherczyk	80cb921713	test: force click	2023-02-23 09:29:56 +01:00
Dariusz Majcherczyk	1f26c1494b	test: wait for full page	2023-02-23 08:54:18 +01:00
Dariusz Majcherczyk	49f6849c01	test: updated node version for live workflow	2023-02-22 19:36:08 +01:00
Dariusz Majcherczyk	f68c6aabad	test: added check if row market is visible	2023-02-22 19:14:12 +01:00
Dariusz Majcherczyk	c50b06100c	test: improved a dropdown verification test	2023-02-22 18:48:04 +01:00