ci-make-deploy-preview

fix: add gas estimates with a buffer for all token app tx
fix(governance): validators list comparing stringified numbers (#3170 )
2023-03-31 11:57:34 +01:00 · 2023-03-30 14:27:17 -07:00 · 2023-03-13 15:12:15 +00:00 · 2023-03-01 12:46:26 +00:00 · 2023-02-17 18:15:09 +00:00 · 2023-02-17 18:06:32 +00:00
581 changed files with 23141 additions and 6146 deletions
@@ -47,6 +47,14 @@ jobs:
      ## Checkout capsule
      #######

+      # Checkout front ends
+      - name: Checkout frontend mono repo
+        uses: actions/checkout@v2
+        with:
+          ref: ${{ github.event.pull_request.head.ref }}
+          fetch-depth: 0
+          path: './frontend-monorepo'
+
      # Checkout capsule to build local network
      - name: Checkout capsule
        uses: actions/checkout@v2
@@ -70,7 +78,7 @@ jobs:
        uses: actions/checkout@v2
        with:
          repository: vegaprotocol/vega
-          ref: develop
+          ref: v0.54.0
          token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
          path: './vega'

@@ -120,18 +128,13 @@ jobs:
      ## Run some tests
      ######

-      # Checkout front ends
-      - name: Checkout frontend mono repo
-        uses: actions/checkout@v2
-        with:
-          ref: ${{ github.event.pull_request.head.ref }}
-          fetch-depth: 0
-
      - name: Install root dependencies
        run: yarn install
+        working-directory: frontend-monorepo

      - name: Run Cypress tests
        run: yarn nx run ${{ github.event.inputs.project }}:e2e --record --key ${{ secrets.CYPRESS_RECORD_KEY }} --browser chrome
+        working-directory: frontend-monorepo
        env:
          CYPRESS_TRADING_TEST_VEGA_WALLET_PASSPHRASE: ${{ secrets.CYPRESS_TRADING_TEST_VEGA_WALLET_PASSPHRASE }}
          CYPRESS_SLACK_WEBHOOK: ${{ secrets.CYPRESS_SLACK_WEBHOOK }}
@@ -31,6 +31,14 @@ jobs:
      ## Checkout capsule
      #######

+      # Checkout front ends
+      - name: Checkout frontend mono repo
+        uses: actions/checkout@v2
+        with:
+          ref: ${{ github.event.pull_request.head.ref }}
+          fetch-depth: 0
+          path: './frontend-monorepo'
+
      # Checkout capsule to build local network
      - name: Checkout capsule
        uses: actions/checkout@v2
@@ -54,7 +62,7 @@ jobs:
        uses: actions/checkout@v2
        with:
          repository: vegaprotocol/vega
-          ref: develop
+          ref: v0.54.0
          token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
          path: './vega'

@@ -104,18 +112,13 @@ jobs:
      ## Run some tests
      ######

-      # Checkout front ends
-      - name: Checkout frontend mono repo
-        uses: actions/checkout@v2
-        with:
-          ref: master
-          fetch-depth: 0
-
      - name: Install root dependencies
        run: yarn install
+        working-directory: frontend-monorepo

      - name: Run Cypress tests
        run: yarn nx run-many --target=e2e --all --record --key ${{ secrets.CYPRESS_RECORD_KEY }} --browser chrome
+        working-directory: frontend-monorepo
        env:
          CYPRESS_TRADING_TEST_VEGA_WALLET_PASSPHRASE: ${{ secrets.CYPRESS_TRADING_TEST_VEGA_WALLET_PASSPHRASE }}
          CYPRESS_SLACK_WEBHOOK: ${{ secrets.CYPRESS_SLACK_WEBHOOK }}
@@ -51,7 +51,7 @@ jobs:
        uses: actions/checkout@v2
        with:
          repository: vegaprotocol/vegacapsule
-          ref: main
+          ref: v0.2.3
          token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
          path: './capsule'

@@ -69,7 +69,7 @@ jobs:
        uses: actions/checkout@v2
        with:
          repository: vegaprotocol/vega
-          ref: develop
+          ref: v0.54.0
          token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
          path: './vega'

@@ -120,10 +120,10 @@ jobs:
      ######

      - name: Derive appropriate SHAs for base and head for `nx affected` commands
-        uses: nrwl/nx-set-shas@v2
+        uses: nrwl/nx-set-shas@v3
        with:
          working-directory: frontend-monorepo
-          main-branch-name: master
+          main-branch-name: main

      - name: Install root dependencies
        run: yarn install
@@ -22,9 +22,9 @@ jobs:
          ref: ${{ github.event.pull_request.head.ref }}
          fetch-depth: 0
      - name: Derive appropriate SHAs for base and head for `nx affected` commands
-        uses: nrwl/nx-set-shas@v2
+        uses: nrwl/nx-set-shas@v3
        with:
-          main-branch-name: master
+          main-branch-name: main
      - name: Use Node.js 16
        id: Node
        uses: actions/setup-node@v3
@@ -53,9 +53,9 @@ jobs:
        with:
          fetch-depth: 0
      - name: Derive appropriate SHAs for base and head for `nx affected` commands
-        uses: nrwl/nx-set-shas@v2
+        uses: nrwl/nx-set-shas@v3
        with:
-          main-branch-name: master
+          main-branch-name: main
      - name: Use Node.js 16
        id: Node
        uses: actions/setup-node@v3
@@ -6,7 +6,3 @@ yarn commitlint --edit "${1}"

 # Lint all staged files
 yarn lint-staged
-
-# Build & test affected apps
-yarn nx affected:build --uncommitted
-yarn nx affected:test --uncommitted
@@ -3,6 +3,7 @@
 /dist
 /coverage
 __generated__
+__generated___

 apps/static/src/assets/devnet-tranches.json
 apps/static/src/assets/mainnet-tranches.json
@@ -69,10 +69,10 @@ Run `nx serve my-app` for a dev server. Navigate to the port specified in `app/<

 ### Using Apollo GraphQL and Generate Types

-In order to generate the schemas for your GraphQL queries, you can run `NX_VEGA_URL=[YOUR URL HERE] nx run types:generate`.
+In order to generate the schemas for your GraphQL queries, you can run `GRAPHQL_SCHEMA_PATH=[YOUR SCHEMA FILE / API URL HERE] nx run types:generate`.

 ```bash
-export  NX_VEGA_URL=https://api.n11.testnet.vega.xyz/graphql
+export  GRAPHQL_SCHEMA_PATH=https://api.n11.testnet.vega.xyz/graphql
 yarn nx run types:generate
 ```

@@ -39,7 +39,7 @@ describe('market selector', () => {
      connectVegaWallet();
      cy.get('input[placeholder="Search"]').should(
        'have.value',
-        markets[0].name
+        markets[0].tradableInstrument.instrument.name
      );
      cy.getByTestId('arrow-button').click();
      cy.getByTestId('market-pane').should('be.visible');
@@ -47,7 +47,7 @@ describe('market selector', () => {
        .children()
        .find('[role="button"]')
        .first()
-        .should('contain.text', markets[0].name);
+        .should('contain.text', markets[0].tradableInstrument.instrument.name);
      cy.getByTestId('market-pane')
        .children()
        .find('[role="button"]')
@@ -70,8 +70,8 @@ describe('market selector', () => {
      cy.get('input[placeholder="Search"]').type('aa');
      const filtered = markets.filter(
        (market) =>
-          market.data.market.state === 'STATE_ACTIVE' &&
-          market.name.match(/aa/i)
+          market.state === 'STATE_ACTIVE' &&
+          market.tradableInstrument.instrument.name.match(/aa/i)
      );
      cy.getByTestId('market-pane')
        .children()
@@ -88,7 +88,7 @@ describe('market selector', () => {
      );
      cy.get('input[placeholder="Search"]').should(
        'have.value',
-        filtered[filtered.length - 1].name
+        filtered[filtered.length - 1].tradableInstrument.instrument.name
      );
    }
  });
@@ -131,7 +131,7 @@ describe('market selector', () => {
      cy.getByTestId('dialog-close').click();
      cy.get('input[placeholder="Search"]').should(
        'have.value',
-        markets[0].name
+        markets[0].tradableInstrument.instrument.name
      );
    }
  });
@@ -170,7 +170,50 @@ describe('Market trade', () => {
        .find('button')
        .should('have.text', '2');
      cy.get('button').contains('Max').click();
-      cy.getByTestId('price-slippage-value').should('have.text', '0.02%');
+    }
+  });
+
+  it('slippage value should be displayed', () => {
+    if (markets?.length) {
+      cy.visit(`/trading/${markets[1].id}`);
+      connectVegaWallet();
+      cy.get('#step-1-control [aria-label^="Selected value"]').click();
+      cy.get('button[aria-label="Open short position"]').click();
+      cy.get('#step-2-control').click();
+      cy.get('button').contains('Max').click();
+      cy.get('#step-2-panel')
+        .find('dl')
+        .eq(2)
+        .find('dd')
+        .should('have.text', '0.02%');
+    }
+  });
+
+  it('allow slippage value to be adjusted', () => {
+    if (markets?.length) {
+      cy.visit(`/trading/${markets[1].id}`);
+      connectVegaWallet();
+      cy.get('#step-1-control [aria-label^="Selected value"]').click();
+      cy.get('button[aria-label="Open short position"]').click();
+      cy.get('#step-2-control').click();
+      cy.get('button').contains('Max').click();
+      cy.get('#step-2-panel')
+        .find('dl')
+        .eq(2)
+        .find('dd')
+        .should('have.text', '0.02%');
+      cy.get('#step-2-panel').find('dl').eq(2).find('button').click();
+      cy.get('#input-order-slippage')
+        .focus()
+        .type('{backspace}{backspace}{backspace}1');
+
+      cy.getByTestId('slippage-dialog').find('button').click();
+
+      cy.get('#step-2-panel')
+        .find('dl')
+        .eq(2)
+        .find('dd')
+        .should('have.text', '1%');
    }
  });

@@ -195,9 +238,9 @@ describe('Market trade', () => {
      cy.get('#step-2-panel').find('dd').eq(0).find('button').click();
      cy.get('#step-2-panel')
        .find('dt')
-        .eq(3)
+        .eq(2)
        .should('have.text', 'Est. Position Size (tDAI)');
-      cy.get('#step-2-panel').find('dd').eq(3).should('have.text', '197.86012');
+      cy.get('#step-2-panel').find('dd').eq(2).should('have.text', '197.86012');
    }
  });

@@ -210,11 +253,11 @@ describe('Market trade', () => {
      cy.get('#step-2-control').click();
      cy.get('#step-2-panel')
        .find('dt')
-        .eq(4)
+        .eq(3)
        .should('have.text', 'Est. Fees (tDAI)');
      cy.get('#step-2-panel')
        .find('dd')
-        .eq(4)
+        .eq(3)
        .should('have.text', '3.00000 (3.03%)');
    }
  });
@@ -75,18 +75,11 @@ const protoCandles = [

 export const protoMarket = {
  id: 'first-btcusd-id',
-  name: 'AAVEDAI Monthly (30 Jun 2022)',
-  data: {
-    market: {
-      id: 'first-btcusd-id',
-      state: 'STATE_ACTIVE',
-      __typename: 'Market',
-    },
-    __typename: 'MarketData',
-  },
+  state: 'STATE_ACTIVE',
  tradableInstrument: {
    instrument: {
      code: 'AAVEDAI.MF21',
+      name: 'AAVEDAI Monthly (30 Jun 2022)',
      metadata: {
        tags: [
          'formerly:2839D9B2329C9E70',
@@ -2,13 +2,13 @@ export const generateDealTicket = () => {
  return {
    market: {
      id: 'first-btcusd-id',
-      name: 'AAVEDAI Monthly (30 Jun 2022)',
      decimalPlaces: 5,
      positionDecimalPlaces: 0,
      state: 'STATE_ACTIVE',
      tradingMode: 'Continuous',
      tradableInstrument: {
        instrument: {
+          name: 'AAVEDAI Monthly (30 Jun 2022)',
          product: {
            quoteName: 'DAI',
            settlementAsset: {
@@ -6,11 +6,11 @@ export const generateMarketNames = () => {
      { ...protoMarket },
      {
        id: '1d7ddf67dac4924db03f5bf58571a7bcb1908d70c66580467717aabc5345b68a',
-        name: 'Apple Monthly (30 Jun 2022)',
        state: 'STATE_SUSPENDED',
        tradableInstrument: {
          instrument: {
            code: 'AAPL.MF21',
+            name: 'Apple Monthly (30 Jun 2022)',
            metadata: {
              tags: [
                'formerly:4899E01009F1A721',
@@ -32,11 +32,11 @@ export const generateMarketNames = () => {
      },
      {
        id: '87ae87cd3244fc1fab4b0e2dad2437879864192bb969f3109b69293421644c8b',
-        name: 'Tesla Quarterly (30 Jun 2022)',
        state: 'STATE_SUSPENDED',
        tradableInstrument: {
          instrument: {
            code: 'TSLA.QM21',
+            name: 'Tesla Quarterly (30 Jun 2022)',
            metadata: {
              tags: [
                'formerly:5A86B190C384997F',
@@ -58,11 +58,11 @@ export const generateMarketNames = () => {
      },
      {
        id: '69205712a854f1bbfb69fa3d11b60e01a1e249bafb5ece88115e7451e8ef07b3',
-        name: 'BTCUSD Monthly (30 Jun 2022)',
        state: 'STATE_SUSPENDED',
        tradableInstrument: {
          instrument: {
            code: 'BTCUSD.MF21',
+            name: 'BTCUSD Monthly (30 Jun 2022)',
            metadata: {
              tags: [
                'formerly:076BB86A5AA41E3E',
@@ -83,11 +83,11 @@ export const generateMarketNames = () => {
      },
      {
        id: 'ethbtc-quaterly',
-        name: 'ETHBTC Quarterly (30 Jun 2022)',
        state: 'STATE_ACTIVE',
        tradableInstrument: {
          instrument: {
            code: 'ETHBTC.QM21',
+            name: 'ETHBTC Quarterly (30 Jun 2022)',
            metadata: {
              tags: [
                'formerly:1F0BB6EB5703B099',
@@ -108,11 +108,11 @@ export const generateMarketNames = () => {
      },
      {
        id: '3c62b2714c4332d1a689a5352bff090e6aabccfd6bd87ce018936b38372530c9',
-        name: 'UNIDAI Monthly (30 Jun 2022)',
        state: 'STATE_ACTIVE',
        tradableInstrument: {
          instrument: {
            code: 'UNIDAI.MF21',
+            name: 'UNIDAI Monthly (30 Jun 2022)',
            metadata: {
              tags: [
                'formerly:3C58ED2A4A6C5D7E',
@@ -6,19 +6,11 @@ export const generateSimpleMarkets = () => {
      { ...protoMarket },
      {
        id: '57fbaa322e97cfc8bb5f1de048c37e033c41b1ac1906d3aed9960912a067ef5a',
-        name: 'CELUSD (June 2022)',
        state: 'Active',
-        data: {
-          market: {
-            id: '57fbaa322e97cfc8bb5f1de048c37e033c41b1ac1906d3aed9960912a067ef5a',
-            state: 'STATE_PENDING',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
        tradableInstrument: {
          instrument: {
            code: 'CELUSD',
+            name: 'CELUSD (June 2022)',
            metadata: {
              tags: [
                'base:CEL',
@@ -43,19 +35,11 @@ export const generateSimpleMarkets = () => {
      },
      {
        id: 'ccf2f04865e5951ac3405da6e16b7cbdb535a0ad32df4df2dbed4262cf473255',
-        name: 'XMRUSD market',
        state: 'Suspended',
-        data: {
-          market: {
-            id: 'ccf2f04865e5951ac3405da6e16b7cbdb535a0ad32df4df2dbed4262cf473255',
-            state: 'STATE_PROPOSED',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
        tradableInstrument: {
          instrument: {
            code: 'XMRUSD',
+            name: 'XMRUSD market',
            metadata: {
              tags: [
                'base:monero',
@@ -80,19 +64,11 @@ export const generateSimpleMarkets = () => {
      },
      {
        id: '6030e5b4e0ca3297a26081e5af4d453f97f96baab2d74bf56f84efcffc4c382f',
-        name: 'UNIDAI Monthly (30 Jun 2022)',
        state: 'Active',
-        data: {
-          market: {
-            id: '6030e5b4e0ca3297a26081e5af4d453f97f96baab2d74bf56f84efcffc4c382f',
-            state: 'STATE_SUSPENDED',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
        tradableInstrument: {
          instrument: {
            code: 'UNIDAI.MF21',
+            name: 'UNIDAI Monthly (30 Jun 2022)',
            metadata: {
              tags: [
                'formerly:3C58ED2A4A6C5D7E',
@@ -191,19 +167,11 @@ export const generateSimpleMarkets = () => {
      },
      {
        id: 'de74a5572045b300e8ec50d136896912ec76e7d7ec135bc305dfd4854d9363a4',
-        name: 'XMRUSD market',
        state: 'Pending',
-        data: {
-          market: {
-            id: 'de74a5572045b300e8ec50d136896912ec76e7d7ec135bc305dfd4854d9363a4',
-            state: 'STATE_ACTIVE',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
        tradableInstrument: {
          instrument: {
            code: 'XMRUSD',
+            name: 'XMRUSD market',
            metadata: {
              tags: [
                'base:monero',
@@ -301,19 +269,11 @@ export const generateSimpleMarkets = () => {
      },
      {
        id: '31ea96284611771e486c820acb26a325a99664f9854b5a7e7ad99023efa8f9e6',
-        name: 'ApeCoin (18 Jul 2022)',
        state: 'Closed',
-        data: {
-          market: {
-            id: '31ea96284611771e486c820acb26a325a99664f9854b5a7e7ad99023efa8f9e6',
-            state: 'STATE_PROPOSED',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
        tradableInstrument: {
          instrument: {
            code: 'APE/USD',
+            name: 'ApeCoin (18 Jul 2022)',
            metadata: {
              tags: [
                'quote:USD',
@@ -337,19 +297,11 @@ export const generateSimpleMarkets = () => {
      },
      {
        id: '34cff959cdc2ffdb0f167820d701fe8b51cc6b8588e650d93369aaa22d6f8b74',
-        name: 'BTCUSD Monthly (18 Jul 2022)',
        state: 'Settled',
-        data: {
-          market: {
-            id: '34cff959cdc2ffdb0f167820d701fe8b51cc6b8588e650d93369aaa22d6f8b74',
-            state: 'STATE_PROPOSED',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
        tradableInstrument: {
          instrument: {
            code: 'BTCUSD.MF21',
+            name: 'BTCUSD Monthly (18 Jul 2022)',
            metadata: {
              tags: [
                'formerly:076BB86A5AA41E3E',
@@ -375,19 +327,11 @@ export const generateSimpleMarkets = () => {
      },
      {
        id: '87b0bbb3c171baa5d97dfc3852332829c91e5c5dc9f7c8fb584c6d8ac75aaaf2',
-        name: 'Builders Club x ETHcc',
        state: 'Settled',
-        data: {
-          market: {
-            id: '87b0bbb3c171baa5d97dfc3852332829c91e5c5dc9f7c8fb584c6d8ac75aaaf2',
-            state: 'STATE_ACTIVE',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
        tradableInstrument: {
          instrument: {
            code: 'LTCUSD',
+            name: 'Builders Club x ETHcc',
            metadata: {
              tags: [
                'base:litecoin',
@@ -473,19 +417,11 @@ export const generateSimpleMarkets = () => {
      },
      {
        id: '45266143c6e9b58f4cff9b8906e971c531bb29ea7af01066973f9b77e8134823',
-        name: 'BTCUSD Monthly (18 Jul 2022)',
        state: 'Pending',
-        data: {
-          market: {
-            id: '45266143c6e9b58f4cff9b8906e971c531bb29ea7af01066973f9b77e8134823',
-            state: 'STATE_PROPOSED',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
        tradableInstrument: {
          instrument: {
            code: 'BTCUSD.MF21',
+            name: 'BTCUSD Monthly (18 Jul 2022)',
            metadata: {
              tags: [
                'formerly:076BB86A5AA41E3E',
@@ -511,19 +447,11 @@ export const generateSimpleMarkets = () => {
      },
      {
        id: '65663ebdc96161162769c4d5c5508137416748178d7cb28e2cb0d07a151a2bc6',
-        name: 'ETHBTC Quarterly (30 Jun 2022)',
        state: 'Active',
-        data: {
-          market: {
-            id: '65663ebdc96161162769c4d5c5508137416748178d7cb28e2cb0d07a151a2bc6',
-            state: 'STATE_ACTIVE',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
        tradableInstrument: {
          instrument: {
            code: 'ETHBTC.QM21',
+            name: 'ETHBTC Quarterly (30 Jun 2022)',
            metadata: {
              tags: [
                'formerly:1F0BB6EB5703B099',
@@ -622,19 +550,11 @@ export const generateSimpleMarkets = () => {
      },
      {
        id: '234afabd27e3bce1a879039c041f9f00f915d98459935ddafd0169d38dd13850',
-        name: 'Apple Monthly (30 Jun 2022)',
        state: 'Active',
-        data: {
-          market: {
-            id: '234afabd27e3bce1a879039c041f9f00f915d98459935ddafd0169d38dd13850',
-            state: 'STATE_ACTIVE',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
        tradableInstrument: {
          instrument: {
            code: 'AAPL.MF21',
+            name: 'Apple Monthly (30 Jun 2022)',
            metadata: {
              tags: [
                'formerly:4899E01009F1A721',
@@ -734,19 +654,11 @@ export const generateSimpleMarkets = () => {
      },
      {
        id: '9f2a3c1caa67bb0773ec18d908d32b55b129b9ec2d106a8e9a87f6aa5c0375a6',
-        name: 'Tesla Quarterly (30 Jun 2022)',
        state: 'Active',
-        data: {
-          market: {
-            id: '9f2a3c1caa67bb0773ec18d908d32b55b129b9ec2d106a8e9a87f6aa5c0375a6',
-            state: 'STATE_ACTIVE',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
        tradableInstrument: {
          instrument: {
            code: 'TSLA.QM21',
+            name: 'Tesla Quarterly (30 Jun 2022)',
            metadata: {
              tags: [
                'formerly:5A86B190C384997F',
@@ -846,19 +758,11 @@ export const generateSimpleMarkets = () => {
      },
      {
        id: '8a45ee934d3ddac4b036f9884df1064a5353c620a56f775ba36597d0edef9a7a',
-        name: 'Go big or Go home',
        state: 'Active',
-        data: {
-          market: {
-            id: '8a45ee934d3ddac4b036f9884df1064a5353c620a56f775ba36597d0edef9a7a',
-            state: 'STATE_SUSPENDED',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
        tradableInstrument: {
          instrument: {
            code: 'LTCUSD',
+            name: 'Go big or Go home',
            metadata: {
              tags: [
                'base:litecoin',
@@ -897,19 +801,11 @@ export const generateSimpleMarkets = () => {
      },
      {
        id: 'aede7b9ac0c3b225004929c5455160a00f59864aad32ec366e8a2bff1b30fd0f',
-        name: 'BTCUSD Monthly (08 Jul 2022)',
        state: 'Active',
-        data: {
-          market: {
-            id: 'aede7b9ac0c3b225004929c5455160a00f59864aad32ec366e8a2bff1b30fd0f',
-            state: 'STATE_PROPOSED',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
        tradableInstrument: {
          instrument: {
            code: 'BTCUSD.MF21',
+            name: 'BTCUSD Monthly (08 Jul 2022)',
            metadata: {
              tags: [
                'formerly:076BB86A5AA41E3E',
@@ -935,19 +831,11 @@ export const generateSimpleMarkets = () => {
      },
      {
        id: '9398707e01daa1a1f1ca6ff87cf8d6c03fe7373ce31121ce81b99a129e6bda47',
-        name: 'BTCUSD Monthly (18 Jul 2022)',
        state: 'Active',
-        data: {
-          market: {
-            id: '9398707e01daa1a1f1ca6ff87cf8d6c03fe7373ce31121ce81b99a129e6bda47',
-            state: 'STATE_PROPOSED',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
        tradableInstrument: {
          instrument: {
            code: 'BTCUSD.MF21',
+            name: 'BTCUSD Monthly (18 Jul 2022)',
            metadata: {
              tags: [
                'formerly:076BB86A5AA41E3E',
@@ -978,14 +866,15 @@ export const generateSimpleMarkets = () => {
 export const generateLongListMarkets = (count: number) => {
  const markets = [];
  for (let i = 0; i < count; i++) {
-    const { id, name } = protoMarket;
    markets.push({
      ...protoMarket,
-      id: id + i,
-      name: name + i,
-      data: {
-        ...protoMarket.data,
-        id: id + i,
+      id: protoMarket.id + i,
+      tradableInstrument: {
+        ...protoMarket.tradableInstrument,
+        instrument: {
+          ...protoMarket.tradableInstrument.instrument,
+          name: protoMarket.tradableInstrument.instrument.name + i,
+        },
      },
    });
  }
@@ -1,8 +1,8 @@
 # App configuration variables
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/mainnet-network.json
-NX_VEGA_URL=https://api.token.vega.xyz/query
+NX_VEGA_URL=https://api.vega.xyz/query
 NX_VEGA_ENV=MAINNET
-NX_VEGA_REST=https://api.token.vega.xyz
+NX_VEGA_REST=https://api.vega.xyz
 NX_VEGA_NETWORKS='{\"MAINNET\":\"https://alpha.console.vega.xyz\"}'
 NX_ETHEREUM_PROVIDER_URL=https://mainnet.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://etherscan.io
@@ -1,6 +1,6 @@
 {
  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*", "__generated__"],
+  "ignorePatterns": ["!**/*", "__generated__", "__generated___"],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
@@ -1,7 +1,29 @@
 import '@testing-library/jest-dom';
 import { defaultFallbackInView } from 'react-intersection-observer';
+import ResizeObserver from 'resize-observer-polyfill';

 defaultFallbackInView(true);
+global.ResizeObserver = ResizeObserver;
+
+global.DOMRect = class DOMRect {
+  bottom = 0;
+  left = 0;
+  right = 0;
+  top = 0;
+
+  constructor(
+    public x = 0,
+    public y = 0,
+    public width = 0,
+    public height = 0
+  ) {}
+  static fromRect(other?: DOMRectInit): DOMRect {
+    return new DOMRect(other?.x, other?.y, other?.width, other?.height);
+  }
+  toJSON() {
+    return JSON.stringify(this);
+  }
+};

 Object.defineProperty(window, 'matchMedia', {
  writable: true,
@@ -0,0 +1,11 @@
+query MarketTags($marketId: ID!) {
+  market(id: $marketId) {
+    tradableInstrument {
+      instrument {
+        metadata {
+          tags
+        }
+      }
+    }
+  }
+}
@@ -0,0 +1,14 @@
+query PartyBalanceQuery($partyId: ID!) {
+  party(id: $partyId) {
+    accounts {
+      type
+      balance
+      asset {
+        id
+        symbol
+        name
+        decimals
+      }
+    }
+  }
+}
@@ -26,7 +26,7 @@ export interface MarketTags_market_tradableInstrument_instrument {
 export interface MarketTags_market_tradableInstrument {
  __typename: "TradableInstrument";
  /**
-   * An instance of, or reference to, a fully specified instrument.
+   * An instance of or reference to a fully specified instrument.
   */
  instrument: MarketTags_market_tradableInstrument_instrument;
 }
@@ -34,14 +34,14 @@ export interface MarketTags_market_tradableInstrument {
 export interface MarketTags_market {
  __typename: "Market";
  /**
-   * An instance of, or reference to, a tradable instrument.
+   * An instance of or reference to a tradable instrument.
   */
  tradableInstrument: MarketTags_market_tradableInstrument;
 }

 export interface MarketTags {
  /**
-   * An instrument that is trading on the Vega network
+   * An instrument that is trading on the VEGA network
   */
  market: MarketTags_market | null;
 }
@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.

-import { AccountType } from "@vegaprotocol/types";
+import { AccountType } from "./../../../../../../../libs/types/src/__generated__/globalTypes";

 // ====================================================
 // GraphQL query operation: PartyBalanceQuery
@@ -12,7 +12,7 @@ import { AccountType } from "@vegaprotocol/types";
 export interface PartyBalanceQuery_party_accounts_asset {
  __typename: "Asset";
  /**
-   * The ID of the asset
+   * The id of the asset
   */
  id: string;
  /**
@@ -24,7 +24,7 @@ export interface PartyBalanceQuery_party_accounts_asset {
   */
  name: string;
  /**
-   * The precision of the asset. Should match the decimal precision of the asset on its native chain, e.g: for ERC20 assets, it is often 18
+   * The precision of the asset
   */
  decimals: number;
 }
@@ -55,7 +55,7 @@ export interface PartyBalanceQuery_party {

 export interface PartyBalanceQuery {
  /**
-   * An entity that is trading on the Vega network
+   * An entity that is trading on the VEGA network
   */
  party: PartyBalanceQuery_party | null;
 }
@@ -0,0 +1,54 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type MarketTagsQueryVariables = Types.Exact<{
+  marketId: Types.Scalars['ID'];
+}>;
+
+
+export type MarketTagsQuery = { __typename?: 'Query', market?: { __typename?: 'Market', tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', metadata: { __typename?: 'InstrumentMetadata', tags?: Array<string> | null } } } } | null };
+
+
+export const MarketTagsDocument = gql`
+    query MarketTags($marketId: ID!) {
+  market(id: $marketId) {
+    tradableInstrument {
+      instrument {
+        metadata {
+          tags
+        }
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useMarketTagsQuery__
+ *
+ * To run a query within a React component, call `useMarketTagsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useMarketTagsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useMarketTagsQuery({
+ *   variables: {
+ *      marketId: // value for 'marketId'
+ *   },
+ * });
+ */
+export function useMarketTagsQuery(baseOptions: Apollo.QueryHookOptions<MarketTagsQuery, MarketTagsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MarketTagsQuery, MarketTagsQueryVariables>(MarketTagsDocument, options);
+      }
+export function useMarketTagsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MarketTagsQuery, MarketTagsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MarketTagsQuery, MarketTagsQueryVariables>(MarketTagsDocument, options);
+        }
+export type MarketTagsQueryHookResult = ReturnType<typeof useMarketTagsQuery>;
+export type MarketTagsLazyQueryHookResult = ReturnType<typeof useMarketTagsLazyQuery>;
+export type MarketTagsQueryResult = Apollo.QueryResult<MarketTagsQuery, MarketTagsQueryVariables>;
@@ -0,0 +1,57 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type PartyBalanceQueryQueryVariables = Types.Exact<{
+  partyId: Types.Scalars['ID'];
+}>;
+
+
+export type PartyBalanceQueryQuery = { __typename?: 'Query', party?: { __typename?: 'Party', accounts?: Array<{ __typename?: 'Account', type: Types.AccountType, balance: string, asset: { __typename?: 'Asset', id: string, symbol: string, name: string, decimals: number } }> | null } | null };
+
+
+export const PartyBalanceQueryDocument = gql`
+    query PartyBalanceQuery($partyId: ID!) {
+  party(id: $partyId) {
+    accounts {
+      type
+      balance
+      asset {
+        id
+        symbol
+        name
+        decimals
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __usePartyBalanceQueryQuery__
+ *
+ * To run a query within a React component, call `usePartyBalanceQueryQuery` and pass it any options that fit your needs.
+ * When your component renders, `usePartyBalanceQueryQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = usePartyBalanceQueryQuery({
+ *   variables: {
+ *      partyId: // value for 'partyId'
+ *   },
+ * });
+ */
+export function usePartyBalanceQueryQuery(baseOptions: Apollo.QueryHookOptions<PartyBalanceQueryQuery, PartyBalanceQueryQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<PartyBalanceQueryQuery, PartyBalanceQueryQueryVariables>(PartyBalanceQueryDocument, options);
+      }
+export function usePartyBalanceQueryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<PartyBalanceQueryQuery, PartyBalanceQueryQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<PartyBalanceQueryQuery, PartyBalanceQueryQueryVariables>(PartyBalanceQueryDocument, options);
+        }
+export type PartyBalanceQueryQueryHookResult = ReturnType<typeof usePartyBalanceQueryQuery>;
+export type PartyBalanceQueryLazyQueryHookResult = ReturnType<typeof usePartyBalanceQueryLazyQuery>;
+export type PartyBalanceQueryQueryResult = Apollo.QueryResult<PartyBalanceQueryQuery, PartyBalanceQueryQueryVariables>;
@@ -4,6 +4,7 @@ import { t } from '@vegaprotocol/react-helpers';
 import { Icon, Tooltip } from '@vegaprotocol/ui-toolkit';
 import { IconNames } from '@blueprintjs/icons';
 import * as constants from './constants';
+import { TrafficLight } from '../traffic-light';

 interface DealTicketEstimatesProps {
  quoteName?: string;
@@ -13,6 +14,7 @@ interface DealTicketEstimatesProps {
  fees?: string;
  notionalSize?: string;
  size?: string;
+  slippage?: string;
 }

 interface DataTitleProps {
@@ -20,7 +22,7 @@ interface DataTitleProps {
  quoteName?: string;
 }

-const DataTitle = ({ children, quoteName = '' }: DataTitleProps) => (
+export const DataTitle = ({ children, quoteName = '' }: DataTitleProps) => (
  <dt>
    {children}
    {quoteName && <small> ({quoteName})</small>}
@@ -28,14 +30,20 @@ const DataTitle = ({ children, quoteName = '' }: DataTitleProps) => (
 );

 interface ValueTooltipProps {
-  value: string;
+  value?: string;
+  children?: ReactNode;
  description: string;
  id?: string;
 }

-const ValueTooltipRow = ({ value, description, id }: ValueTooltipProps) => (
+export const ValueTooltipRow = ({
+  value,
+  children,
+  description,
+  id,
+}: ValueTooltipProps) => (
  <dd className="flex gap-x-2 items-center">
-    {value}
+    {value || children}
    <Tooltip align="center" description={description}>
      <div className="cursor-help" id={id || ''} tabIndex={-1}>
        <Icon
@@ -56,6 +64,7 @@ export const DealTicketEstimates = ({
  fees,
  notionalSize,
  size,
+  slippage,
 }: DealTicketEstimatesProps) => (
  <dl className="text-black dark:text-white">
    {size && (
@@ -93,7 +102,7 @@ export const DealTicketEstimates = ({
      </div>
    )}
    {estMargin && (
-      <div className="flex justify-between mb-8">
+      <div className="flex justify-between mb-2">
        <DataTitle quoteName={quoteName}>{t('Est. Margin')}</DataTitle>
        <ValueTooltipRow
          value={estMargin}
@@ -102,17 +111,23 @@ export const DealTicketEstimates = ({
      </div>
    )}
    {estCloseOut && (
-      <div className="flex justify-between">
-        <dt>
-          <span>{t('Est. Close out')}</span>
-          &nbsp;
-          <small>({quoteName})</small>
-        </dt>
+      <div className="flex justify-between mb-2">
+        <DataTitle quoteName={quoteName}>{t('Est. Close out')}</DataTitle>
        <ValueTooltipRow
          value={estCloseOut}
          description={constants.EST_CLOSEOUT_TOOLTIP_TEXT}
        />
      </div>
    )}
+    {slippage && (
+      <div className="flex justify-between mb-2">
+        <DataTitle>{t('Est. Price Impact / Slippage')}</DataTitle>
+        <ValueTooltipRow description={constants.EST_SLIPPAGE}>
+          <TrafficLight value={parseFloat(slippage)} q1={1} q2={5}>
+            {slippage}%
+          </TrafficLight>
+        </ValueTooltipRow>
+      </div>
+    )}
  </dl>
 );
@@ -0,0 +1,149 @@
+import React, { useCallback, useState } from 'react';
+import { BigNumber } from 'bignumber.js';
+import { t } from '@vegaprotocol/react-helpers';
+import {
+  SliderRoot,
+  SliderThumb,
+  SliderTrack,
+  SliderRange,
+  FormGroup,
+} from '@vegaprotocol/ui-toolkit';
+import { InputSetter } from '../input-setter';
+
+interface DealTicketSizeInputProps {
+  step: number;
+  min: number;
+  max: number;
+  value: number;
+  onValueChange: (value: number) => void;
+  positionDecimalPlaces: number;
+}
+
+const getSizeLabel = (value: number): string => {
+  const MIN_LABEL = 'Min';
+  const MAX_LABEL = 'Max';
+  if (value === 0) {
+    return MIN_LABEL;
+  } else if (value === 100) {
+    return MAX_LABEL;
+  }
+
+  return `${value}%`;
+};
+
+export const DealTicketSizeInput = ({
+  value,
+  step,
+  min,
+  max,
+  onValueChange,
+  positionDecimalPlaces,
+}: DealTicketSizeInputProps) => {
+  const sizeRatios = [0, 25, 50, 75, 100];
+  const [inputValue, setInputValue] = useState(value);
+
+  const onInputValueChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      let value = parseFloat(event.target.value);
+      const isLessThanMin = value < min;
+      const isMoreThanMax = value > max;
+      if (isLessThanMin) {
+        value = min;
+      } else if (isMoreThanMax) {
+        value = max;
+      }
+
+      if (value) {
+        onValueChange(value);
+      }
+
+      setInputValue(value);
+    },
+    [min, max, onValueChange, setInputValue]
+  );
+
+  const onButtonValueChange = (size: number) => {
+    const newVal = new BigNumber(size)
+      .decimalPlaces(positionDecimalPlaces)
+      .toNumber();
+    onValueChange(newVal);
+    setInputValue(newVal);
+  };
+
+  const onSliderValueChange = useCallback(
+    (value: number[]) => {
+      const val = value[0];
+      setInputValue(val);
+      onValueChange(val);
+    },
+    [onValueChange]
+  );
+
+  return (
+    <div>
+      <div className="flex justify-between text-black dark:text-white mb-2">
+        <span data-testid="min-label">{min}</span>
+        <span data-testid="max-label">{max}</span>
+      </div>
+      <SliderRoot
+        className="mb-2"
+        value={[value]}
+        onValueChange={onSliderValueChange}
+        step={step}
+        min={min}
+        max={max}
+      >
+        <SliderTrack className="bg-lightGrey dark:bg-offBlack">
+          <SliderRange className="!bg-black dark:!bg-white" />
+        </SliderTrack>
+        <SliderThumb />
+      </SliderRoot>
+
+      <div
+        data-testid="percentage-selector"
+        className="flex w-full justify-between text-black dark:text-white mb-6"
+      >
+        {sizeRatios.map((size, index) => {
+          const proportionalSize = size ? (size / 100) * max : min;
+          return (
+            <button
+              className="no-underline hover:underline text-blue"
+              onClick={() => onButtonValueChange(proportionalSize)}
+              type="button"
+              key={index}
+            >
+              {getSizeLabel(size)}
+            </button>
+          );
+        })}
+      </div>
+
+      <dl className="text-black dark:text-white">
+        <div className="flex items-center justify-between">
+          <dt>{t('Contracts')}</dt>
+          <dd className="flex justify-end w-full">
+            <FormGroup
+              hideLabel={true}
+              label="Enter Size"
+              labelFor="trade-size-input"
+              className="mb-1"
+            >
+              <InputSetter
+                id="input-order-size-market"
+                type="number"
+                step={step}
+                min={min}
+                max={max}
+                className="w-full"
+                value={inputValue}
+                onChange={onInputValueChange}
+              >
+                {inputValue}
+              </InputSetter>
+            </FormGroup>
+          </dd>
+        </div>
+      </dl>
+    </div>
+  );
+};
@@ -1,27 +1,13 @@
-import React, { useCallback, useState } from 'react';
-import classNames from 'classnames';
-import { IconNames } from '@blueprintjs/icons';
-import { t } from '@vegaprotocol/react-helpers';
-import {
-  SliderRoot,
-  SliderThumb,
-  SliderTrack,
-  SliderRange,
-  FormGroup,
-  Icon,
-  Tooltip,
-} from '@vegaprotocol/ui-toolkit';
-import { BigNumber } from 'bignumber.js';
+import React from 'react';
 import { DealTicketEstimates } from './deal-ticket-estimates';
-import { InputSetter } from '../input-setter';
-import * as constants from './constants';
+import { DealTicketSizeInput } from './deal-ticket-size-input';

 interface DealTicketSizeProps {
  step: number;
  min: number;
  max: number;
-  value: number;
-  onValueChange: (value: number[]) => void;
+  size: number;
+  onSizeChange: (value: number) => void;
  name: string;
  quoteName: string;
  price: string;
@@ -30,173 +16,33 @@ interface DealTicketSizeProps {
  fees: string;
  positionDecimalPlaces: number;
  notionalSize: string;
-  slippage: string | null;
 }

-const getSizeLabel = (value: number): string => {
-  const MIN_LABEL = 'Min';
-  const MAX_LABEL = 'Max';
-  if (value === 0) {
-    return MIN_LABEL;
-  } else if (value === 100) {
-    return MAX_LABEL;
-  }
-
-  return `${value}%`;
-};
-
 export const DealTicketSize = ({
-  value,
  step,
  min,
  max,
  price,
  quoteName,
-  onValueChange,
+  size,
+  onSizeChange,
  estCloseOut,
  positionDecimalPlaces,
  fees,
  notionalSize,
-  slippage,
 }: DealTicketSizeProps) => {
-  const sizeRatios = [0, 25, 50, 75, 100];
-  const [inputValue, setInputValue] = useState(value);
-
-  const onInputValueChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      const value = parseFloat(event.target.value);
-      const isLessThanMin = value < min;
-      const isMoreThanMax = value > max;
-      if (value) {
-        if (isLessThanMin) {
-          onValueChange([min]);
-        } else if (isMoreThanMax) {
-          onValueChange([max]);
-        } else {
-          onValueChange([value]);
-        }
-      }
-      setInputValue(value);
-    },
-    [min, max, onValueChange, setInputValue]
-  );
-
-  const onButtonValueChange = useCallback(
-    (size: number) => {
-      const newVal = new BigNumber(size)
-        .decimalPlaces(positionDecimalPlaces)
-        .toNumber();
-      onValueChange([newVal]);
-      setInputValue(newVal);
-    },
-    [onValueChange, positionDecimalPlaces]
-  );
-
-  const onSliderValueChange = useCallback(
-    (value: number[]) => {
-      setInputValue(value[0]);
-      onValueChange(value);
-    },
-    [onValueChange]
-  );
-
  return max === 0 ? (
    <p>Not enough balance to trade</p>
  ) : (
    <div>
-      <div className="flex justify-between text-black dark:text-white mb-2">
-        <span data-testid="min-label">{min}</span>
-        <span data-testid="max-label">{max}</span>
-      </div>
-      <SliderRoot
-        className="mb-2"
-        value={[value]}
-        onValueChange={onSliderValueChange}
+      <DealTicketSizeInput
        step={step}
        min={min}
        max={max}
-      >
-        <SliderTrack className="bg-lightGrey dark:bg-offBlack">
-          <SliderRange className="!bg-black dark:!bg-white" />
-        </SliderTrack>
-        <SliderThumb />
-      </SliderRoot>
-
-      <div
-        data-testid="percentage-selector"
-        className="flex w-full justify-between text-black dark:text-white mb-6"
-      >
-        {sizeRatios.map((size, index) => {
-          const proportionalSize = size ? (size / 100) * max : min;
-          return (
-            <button
-              className="no-underline hover:underline text-blue"
-              onClick={() => onButtonValueChange(proportionalSize)}
-              type="button"
-              key={index}
-            >
-              {getSizeLabel(size)}
-            </button>
-          );
-        })}
-      </div>
-
-      <dl className="text-black dark:text-white">
-        <div className="flex items-center justify-between mb-4">
-          <dt>{t('Contracts')}</dt>
-          <dd className="flex justify-end w-full">
-            <FormGroup
-              hideLabel={true}
-              label="Enter Size"
-              labelFor="trade-size-input"
-            >
-              <InputSetter
-                id="input-order-size-market"
-                type="number"
-                step={step}
-                min={min}
-                max={max}
-                className="w-full"
-                value={inputValue}
-                onChange={onInputValueChange}
-              />
-            </FormGroup>
-          </dd>
-        </div>
-      </dl>
-      {slippage && (
-        <dl className="text-black dark:text-white">
-          <div className="flex items-center justify-between mb-8">
-            <dt>{t('Est. Price Impact / Slippage')}</dt>
-            <dd
-              className="flex justify-end gap-x-5"
-              data-testid="price-slippage-value"
-              aria-label={t('Est. Price Impact / Slippage')}
-            >
-              <span
-                className={classNames({
-                  'text-darkerGreen dark:text-lightGreen':
-                    parseFloat(slippage) < 1,
-                  'text-amber':
-                    parseFloat(slippage) >= 1 && parseFloat(slippage) < 5,
-                  'text-vega-red': parseFloat(slippage) >= 5,
-                })}
-              >
-                {slippage}%
-              </span>
-              <Tooltip align="center" description={constants.EST_SLIPPAGE}>
-                <div className="cursor-help" tabIndex={-1}>
-                  <Icon
-                    name={IconNames.ISSUE}
-                    className="block rotate-180"
-                    ariaLabel={constants.EST_SLIPPAGE}
-                  />
-                </div>
-              </Tooltip>
-            </dd>
-          </div>
-        </dl>
-      )}
+        value={size}
+        onValueChange={onSizeChange}
+        positionDecimalPlaces={positionDecimalPlaces}
+      />
      <DealTicketEstimates
        quoteName={quoteName}
        fees={fees}
@@ -0,0 +1,104 @@
+import React, { useCallback, useState } from 'react';
+import { t } from '@vegaprotocol/react-helpers';
+import * as constants from './constants';
+import { TrafficLight } from '../traffic-light';
+import { Dialog, Icon, Intent, Tooltip } from '@vegaprotocol/ui-toolkit';
+import { InputSetter } from '../../components/input-setter';
+import { IconNames } from '@blueprintjs/icons';
+import { DataTitle, ValueTooltipRow } from './deal-ticket-estimates';
+
+interface DealTicketSlippageProps {
+  step?: number;
+  min?: number;
+  max?: number;
+  value: number;
+  onValueChange(value: number): void;
+}
+
+export const DealTicketSlippage = ({
+  value,
+  step = 0.01,
+  min = 0,
+  max = 50,
+  onValueChange,
+}: DealTicketSlippageProps) => {
+  const [isDialogVisible, setIsDialogVisible] = useState(false);
+
+  const onChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const value = event.target.value;
+      const numericValue = parseFloat(value);
+      onValueChange(numericValue);
+    },
+    [onValueChange]
+  );
+
+  const toggleDialog = useCallback(() => {
+    setIsDialogVisible(!isDialogVisible);
+  }, [isDialogVisible]);
+
+  const formLabel = (
+    <label className="flex items-center mb-1">
+      <span className="mr-1">{t('Adjust slippage tolerance')}</span>
+      <Tooltip align="center" description={constants.EST_SLIPPAGE}>
+        <div className="cursor-help" tabIndex={-1}>
+          <Icon
+            name={IconNames.ISSUE}
+            className="block rotate-180"
+            ariaLabel={constants.EST_SLIPPAGE}
+          />
+        </div>
+      </Tooltip>
+    </label>
+  );
+
+  return (
+    <>
+      <Dialog
+        open={isDialogVisible}
+        onChange={toggleDialog}
+        intent={Intent.None}
+        title={t('Transaction Settings')}
+      >
+        <div data-testid="slippage-dialog">
+          {formLabel}
+          <InputSetter
+            id="input-order-slippage"
+            isInputVisible
+            hasError={!value}
+            type="number"
+            step={step}
+            min={min}
+            max={max}
+            className="w-full"
+            value={value}
+            onChange={onChange}
+          >
+            {value}%
+          </InputSetter>
+        </div>
+      </Dialog>
+      <dl className="text-black dark:text-white">
+        <div className="flex justify-between mb-2">
+          <DataTitle>{t('Est. Price Impact / Slippage')}</DataTitle>
+          <div className="flex">
+            <div className="mr-1">
+              <ValueTooltipRow description={constants.EST_SLIPPAGE}>
+                <TrafficLight value={value} q1={1} q2={5}>
+                  {value}%
+                </TrafficLight>
+              </ValueTooltipRow>
+            </div>
+            <button type="button" onClick={toggleDialog}>
+              <Icon
+                name={IconNames.COG}
+                className="block rotate-180"
+                ariaLabel={t('Override slippage value')}
+              />
+            </button>
+          </div>
+        </div>
+      </dl>
+    </>
+  );
+};
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useForm, Controller } from 'react-hook-form';
 import { Stepper } from '../stepper';
@@ -10,7 +10,7 @@ import type { Order } from '@vegaprotocol/orders';
 import { useVegaWallet, VegaTxStatus } from '@vegaprotocol/wallet';
 import {
  t,
-  addDecimal,
+  addDecimalsFormatNumber,
  toDecimal,
  removeDecimal,
 } from '@vegaprotocol/react-helpers';
@@ -33,6 +33,8 @@ import useOrderCloseOut from '../../hooks/use-order-closeout';
 import useOrderMargin from '../../hooks/use-order-margin';
 import useMaximumPositionSize from '../../hooks/use-maximum-position-size';
 import useCalculateSlippage from '../../hooks/use-calculate-slippage';
+import { Side, OrderType } from '@vegaprotocol/types';
+import { DealTicketSlippage } from './deal-ticket-slippage';

 interface DealTicketMarketProps {
  market: DealTicketQuery_market;
@@ -62,28 +64,26 @@ export const DealTicketSteps = ({
    defaultValues: getDefaultOrder(market),
  });

-  const [max, setMax] = useState<number | null>(null);
+  const emptyString = ' - ';
  const step = toDecimal(market.positionDecimalPlaces);
  const orderType = watch('type');
  const orderTimeInForce = watch('timeInForce');
  const orderSide = watch('side');
  const orderSize = watch('size');
  const order = watch();
-  const estCloseOut = useOrderCloseOut({ order, market, partyData });
+  const { message: invalidText, isDisabled } = useOrderValidation({
+    market,
+    orderType,
+    orderTimeInForce,
+    fieldErrors: errors,
+  });
+  const { submit, transaction, finalizedOrder, Dialog } = useOrderSubmit();
  const { keypair } = useVegaWallet();
  const estMargin = useOrderMargin({
    order,
    market,
    partyId: keypair?.pub || '',
  });
-  const value = new BigNumber(orderSize).toNumber();
-  const price =
-    market.depth.lastTrade &&
-    addDecimal(market.depth.lastTrade.price, market.decimalPlaces);
-  const emptyString = ' - ';
-
-  const [notionalSize, setNotionalSize] = useState<string | null>(null);
-  const [fees, setFees] = useState<string | null>(null);

  const maxTrade = useMaximumPositionSize({
    partyId: keypair?.pub || '',
@@ -94,46 +94,48 @@ export const DealTicketSteps = ({
    price: market?.depth?.lastTrade?.price,
    order,
  });
+
+  const estCloseOut = useOrderCloseOut({ order, market, partyData });
  const slippage = useCalculateSlippage({ marketId: market.id, order });
-  useEffect(() => {
-    setMax(
-      new BigNumber(maxTrade)
-        .decimalPlaces(market.positionDecimalPlaces)
-        .toNumber()
-    );
-  }, [maxTrade, market.positionDecimalPlaces]);
-
-  const { message: invalidText, isDisabled } = useOrderValidation({
-    market,
-    orderType,
-    orderTimeInForce,
-    fieldErrors: errors,
-  });
-
-  const { submit, transaction, finalizedOrder, TransactionDialog } =
-    useOrderSubmit();
-
-  const onSizeChange = (value: number[]) => {
-    const newVal = new BigNumber(value[0])
-      .decimalPlaces(market.positionDecimalPlaces)
-      .toString();
-    const isValid = validateSize(step)(newVal);
-    if (isValid !== 'step') {
-      setValue('size', newVal);
-    }
-  };
+  const [slippageValue, setSlippageValue] = useState(
+    slippage ? parseFloat(slippage) : 0
+  );
+  const transactionStatus =
+    transaction.status === VegaTxStatus.Requested ||
+    transaction.status === VegaTxStatus.Pending
+      ? 'pending'
+      : 'default';

  useEffect(() => {
-    if (market?.depth?.lastTrade?.price) {
-      const size = new BigNumber(market.depth.lastTrade.price)
-        .multipliedBy(value)
+    setSlippageValue(slippage ? parseFloat(slippage) : 0);
+  }, [slippage]);
+
+  const price = useMemo(() => {
+    if (slippage && market?.depth?.lastTrade?.price) {
+      const isLong = order.side === Side.SIDE_BUY;
+      const multiplier = new BigNumber(1)[isLong ? 'plus' : 'minus'](
+        parseFloat(slippage) / 100
+      );
+      return new BigNumber(market?.depth?.lastTrade?.price)
+        .multipliedBy(multiplier)
        .toNumber();
-
-      setNotionalSize(addDecimal(size, market.decimalPlaces));
    }
-  }, [market, value]);
+    return null;
+  }, [market?.depth?.lastTrade?.price, order.side, slippage]);

-  useEffect(() => {
+  const formattedPrice =
+    price && addDecimalsFormatNumber(price, market.decimalPlaces);
+
+  const notionalSize = useMemo(() => {
+    if (price) {
+      const size = new BigNumber(price).multipliedBy(orderSize).toNumber();
+
+      return addDecimalsFormatNumber(size, market.decimalPlaces);
+    }
+    return null;
+  }, [market.decimalPlaces, orderSize, price]);
+
+  const fees = useMemo(() => {
    if (estMargin?.fees && notionalSize) {
      const percentage = new BigNumber(estMargin?.fees)
        .dividedBy(notionalSize)
@@ -141,17 +143,66 @@ export const DealTicketSteps = ({
        .decimalPlaces(2)
        .toString();

-      setFees(`${estMargin.fees} (${percentage}%)`);
+      return `${estMargin.fees} (${percentage}%)`;
    }
-  }, [estMargin, notionalSize]);

-  const transactionStatus =
-    transaction.status === VegaTxStatus.Requested ||
-    transaction.status === VegaTxStatus.Pending
-      ? 'pending'
-      : 'default';
+    return null;
+  }, [estMargin?.fees, notionalSize]);

-  const onSubmit = React.useCallback(
+  const max = useMemo(() => {
+    return new BigNumber(maxTrade)
+      .decimalPlaces(market.positionDecimalPlaces)
+      .toNumber();
+  }, [market.positionDecimalPlaces, maxTrade]);
+
+  const onSizeChange = useCallback(
+    (value: number) => {
+      const newVal = new BigNumber(value)
+        .decimalPlaces(market.positionDecimalPlaces)
+        .toString();
+      const isValid = validateSize(step)(newVal);
+      if (isValid !== 'step') {
+        setValue('size', newVal);
+      }
+    },
+    [market.positionDecimalPlaces, setValue, step]
+  );
+
+  const onSlippageChange = useCallback(
+    (value: number) => {
+      if (market?.depth?.lastTrade?.price) {
+        if (value) {
+          const isLong = order.side === Side.SIDE_BUY;
+          const multiplier = new BigNumber(1)[isLong ? 'plus' : 'minus'](
+            value / 100
+          );
+          const bestAskPrice = new BigNumber(market?.depth?.lastTrade?.price)
+            .multipliedBy(multiplier)
+            .decimalPlaces(market.decimalPlaces)
+            .toString();
+
+          setValue('price', bestAskPrice);
+
+          if (orderType === OrderType.TYPE_MARKET) {
+            setValue('type', OrderType.TYPE_LIMIT);
+          }
+        } else {
+          setValue('type', OrderType.TYPE_MARKET);
+          setValue('price', market?.depth?.lastTrade?.price);
+        }
+      }
+      setSlippageValue(value);
+    },
+    [
+      market.decimalPlaces,
+      market?.depth?.lastTrade?.price,
+      order.side,
+      orderType,
+      setValue,
+    ]
+  );
+
+  const onSubmit = useCallback(
    (order: Order) => {
      if (transactionStatus !== 'pending') {
        submit({
@@ -180,7 +231,7 @@ export const DealTicketSteps = ({
          ItemRenderer={MarketNameRenderer}
        />
      ),
-      value: market.name,
+      value: market.tradableInstrument.instrument.name,
    },
    {
      label: t('Select Direction'),
@@ -199,25 +250,30 @@ export const DealTicketSteps = ({
      label: t('Choose Position Size'),
      component:
        max !== null ? (
-          <DealTicketSize
-            step={step}
-            min={step}
-            max={max}
-            onValueChange={onSizeChange}
-            value={new BigNumber(orderSize).toNumber()}
-            name="size"
-            price={price || emptyString}
-            positionDecimalPlaces={market.positionDecimalPlaces}
-            quoteName={
-              market.tradableInstrument.instrument.product.settlementAsset
-                .symbol
-            }
-            notionalSize={notionalSize || emptyString}
-            estCloseOut={estCloseOut}
-            fees={fees || emptyString}
-            estMargin={estMargin?.margin || emptyString}
-            slippage={slippage}
-          />
+          <>
+            <DealTicketSize
+              step={step}
+              min={step}
+              max={max}
+              onSizeChange={onSizeChange}
+              size={new BigNumber(orderSize).toNumber()}
+              name="size"
+              price={formattedPrice || emptyString}
+              positionDecimalPlaces={market.positionDecimalPlaces}
+              quoteName={
+                market.tradableInstrument.instrument.product.settlementAsset
+                  .symbol
+              }
+              notionalSize={notionalSize || emptyString}
+              estCloseOut={estCloseOut}
+              fees={fees || emptyString}
+              estMargin={estMargin?.margin || emptyString}
+            />
+            <DealTicketSlippage
+              value={slippageValue}
+              onValueChange={onSlippageChange}
+            />
+          </>
        ) : (
          'loading...'
        ),
@@ -241,21 +297,22 @@ export const DealTicketSteps = ({
            order={order}
            estCloseOut={estCloseOut}
            estMargin={estMargin?.margin || emptyString}
-            price={price || emptyString}
+            price={formattedPrice || emptyString}
            quoteName={
              market.tradableInstrument.instrument.product.settlementAsset
                .symbol
            }
            notionalSize={notionalSize || emptyString}
            fees={fees || emptyString}
+            slippage={slippageValue}
          />
-          <TransactionDialog
+          <Dialog
            title={getOrderDialogTitle(finalizedOrder?.status)}
            intent={getOrderDialogIntent(finalizedOrder?.status)}
            icon={getOrderDialogIcon(finalizedOrder?.status)}
          >
            <OrderFeedback transaction={transaction} order={finalizedOrder} />
-          </TransactionDialog>
+          </Dialog>
        </div>
      ),
      disabled: true,
@@ -43,6 +43,7 @@ interface Props {
  price: string;
  fees: string;
  notionalSize: string;
+  slippage: number;
 }

 export default ({
@@ -55,6 +56,7 @@ export default ({
  fees,
  price,
  notionalSize,
+  slippage,
 }: Props) => {
  const { data: tagsData } = useQuery<MarketTags, MarketTagsVariables>(
    MARKET_TAGS_QUERY,
@@ -105,6 +107,7 @@ export default ({
        fees={fees}
        estCloseOut={estCloseOut}
        notionalSize={notionalSize}
+        slippage={slippage.toString()}
      />

      <div className="mt-12 max-w-sm">
@@ -0,0 +1,17 @@
+query Deposits {
+  assetsConnection {
+    edges {
+      node {
+        id
+        name
+        symbol
+        decimals
+        source {
+          ... on ERC20 {
+            contractAddress
+          }
+        }
+      }
+    }
+  }
+}
@@ -3,6 +3,8 @@
 // @generated
 // This file was automatically generated and should not be edited.

+import { AssetStatus } from "./../../../../../../../libs/types/src/__generated__/globalTypes";
+
 // ====================================================
 // GraphQL query operation: Deposits
 // ====================================================
@@ -14,7 +16,7 @@ export interface Deposits_assetsConnection_edges_node_source_BuiltinAsset {
 export interface Deposits_assetsConnection_edges_node_source_ERC20 {
  __typename: "ERC20";
  /**
-   * The address of the ERC20 contract
+   * The address of the erc20 contract
   */
  contractAddress: string;
 }
@@ -24,7 +26,7 @@ export type Deposits_assetsConnection_edges_node_source = Deposits_assetsConnect
 export interface Deposits_assetsConnection_edges_node {
  __typename: "Asset";
  /**
-   * The ID of the asset
+   * The id of the asset
   */
  id: string;
  /**
@@ -36,11 +38,15 @@ export interface Deposits_assetsConnection_edges_node {
   */
  symbol: string;
  /**
-   * The precision of the asset. Should match the decimal precision of the asset on its native chain, e.g: for ERC20 assets, it is often 18
+   * The precision of the asset
   */
  decimals: number;
  /**
-   * The origin source of the asset (e.g: an ERC20 asset)
+   * The status of the asset in the vega network
+   */
+  status: AssetStatus;
+  /**
+   * The origin source of the asset (e.g: an erc20 asset)
   */
  source: Deposits_assetsConnection_edges_node_source;
 }
@@ -60,7 +66,7 @@ export interface Deposits_assetsConnection {

 export interface Deposits {
  /**
-   * The list of all assets in use in the Vega network or the specified asset if ID is provided
+   * The list of all assets in use in the vega network or the specified asset if id is provided
   */
  assetsConnection: Deposits_assetsConnection;
 }
@@ -0,0 +1,57 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type DepositsQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type DepositsQuery = { __typename?: 'Query', assetsConnection: { __typename?: 'AssetsConnection', edges?: Array<{ __typename?: 'AssetEdge', node: { __typename?: 'Asset', id: string, name: string, symbol: string, decimals: number, source: { __typename?: 'BuiltinAsset' } | { __typename?: 'ERC20', contractAddress: string } } } | null> | null } };
+
+
+export const DepositsDocument = gql`
+    query Deposits {
+  assetsConnection {
+    edges {
+      node {
+        id
+        name
+        symbol
+        decimals
+        source {
+          ... on ERC20 {
+            contractAddress
+          }
+        }
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useDepositsQuery__
+ *
+ * To run a query within a React component, call `useDepositsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useDepositsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useDepositsQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useDepositsQuery(baseOptions?: Apollo.QueryHookOptions<DepositsQuery, DepositsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<DepositsQuery, DepositsQueryVariables>(DepositsDocument, options);
+      }
+export function useDepositsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<DepositsQuery, DepositsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<DepositsQuery, DepositsQueryVariables>(DepositsDocument, options);
+        }
+export type DepositsQueryHookResult = ReturnType<typeof useDepositsQuery>;
+export type DepositsLazyQueryHookResult = ReturnType<typeof useDepositsLazyQuery>;
+export type DepositsQueryResult = Apollo.QueryResult<DepositsQuery, DepositsQueryVariables>;
@@ -1,11 +1,10 @@
 import { gql, useQuery } from '@apollo/client';
 import { DepositManager } from '@vegaprotocol/deposits';
-import { t } from '@vegaprotocol/react-helpers';
+import { getEnabledAssets, t } from '@vegaprotocol/react-helpers';
 import { Networks, useEnvironment } from '@vegaprotocol/environment';
 import { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { Web3Container } from '@vegaprotocol/web3';
-import { assetsConnectionToAssets } from '@vegaprotocol/react-helpers';
 import type { Deposits } from './__generated__/Deposits';

 const DEPOSITS_QUERY = gql`
@@ -17,6 +16,7 @@ const DEPOSITS_QUERY = gql`
          name
          symbol
          decimals
+          status
          source {
            ... on ERC20 {
              contractAddress
@@ -40,7 +40,7 @@ export const DepositContainer = () => {
    skip: !keypair?.pub,
  });

-  const assets = assetsConnectionToAssets(data?.assetsConnection);
+  const assets = getEnabledAssets(data);

  return (
    <AsyncRenderer<Deposits> data={data} loading={loading} error={error}>
@@ -22,9 +22,8 @@ export const NavigationDrawer = ({
  const width = 'w-full md:w-auto md:min-w-[15%] shrink-0';
  const position = 'absolute inset-0 h-full z-10 md:static';
  const background = 'bg-black/50 dark:bg-white/50';
-  const border = 'border-r border-neutral-300 dark:border-neutral-700';
  const flex = 'flex justify-end overflow-hidden';
-  const joinedClasses = [flex, width, position, background, border].join(' ');
+  const joinedClasses = [flex, width, position, background].join(' ');

  const outerStyles = classNames(joinedClasses, {
    visible: isMenuOpen,
@@ -12,7 +12,7 @@ const Header = () => {
  } = useContext(LocalContext);
  return (
    <div
-      className="flex items-stretch pr-6 py-6 bg-black text-neutral-400 border-b border-neutral-300 dark:border-neutral-700"
+      className="flex items-stretch pr-6 py-6 bg-black text-neutral-400"
      data-testid="header"
    >
      <Logo />
@@ -1,20 +1,19 @@
 import React, { useCallback, useState } from 'react';
+import type { ReactNode } from 'react';
 import { t } from '@vegaprotocol/react-helpers';
 import { Input } from '@vegaprotocol/ui-toolkit';
 import type { InputProps } from '@vegaprotocol/ui-toolkit';

 interface InputSetterProps {
  buttonLabel?: string;
-  value: string | number;
  isInputVisible?: boolean;
-  onValueChange?: () => string;
+  children?: ReactNode;
 }

 export const InputSetter = ({
  buttonLabel = t('set'),
-  value = '',
  isInputVisible = false,
-  onValueChange,
+  children,
  ...props
 }: InputSetterProps & InputProps) => {
  const [isInputToggled, setIsInputToggled] = useState(isInputVisible);
@@ -35,7 +34,7 @@ export const InputSetter = ({

  return isInputToggled ? (
    <div className="flex items-center">
-      <Input {...props} value={value} onKeyDown={onInputEnter} />
+      <Input {...props} onKeyDown={onInputEnter} />
      <button
        type="button"
        className="no-underline hover:underline text-blue ml-2"
@@ -47,10 +46,10 @@ export const InputSetter = ({
  ) : (
    <button
      type="button"
-      className="no-underline hover:underline text-blue"
+      className="no-underline hover:underline text-blue py-1.5"
      onClick={toggleInput}
    >
-      {value}
+      {children || props.value}
    </button>
  );
 };
@@ -0,0 +1,5 @@
+subscription CandleLive($marketId: ID!) {
+  candles(marketId: $marketId, interval: INTERVAL_I1H) {
+    close
+  }
+}
@@ -0,0 +1,44 @@
+fragment SimpleMarketDataFields on MarketData {
+  market {
+    id
+    state
+  }
+}
+
+query SimpleMarkets($CandleSince: String!) {
+  markets {
+    id
+    name
+    state
+    data {
+      ...SimpleMarketDataFields
+    }
+    tradableInstrument {
+      instrument {
+        code
+        metadata {
+          tags
+        }
+        product {
+          __typename
+          ... on Future {
+            quoteName
+            settlementAsset {
+              symbol
+            }
+          }
+        }
+      }
+    }
+    candles(interval: INTERVAL_I1H, since: $CandleSince) {
+      open
+      close
+    }
+  }
+}
+
+subscription SimpleMarketDataSub {
+  marketData {
+    ...SimpleMarketDataFields
+  }
+}
@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.

-import { MarketState } from "@vegaprotocol/types";
+import { MarketState } from "./../../../../../../../libs/types/src/__generated__/globalTypes";

 // ====================================================
 // GraphQL subscription operation: SimpleMarketDataSub
@@ -24,7 +24,7 @@ export interface SimpleMarketDataSub_marketData_market {
 export interface SimpleMarketDataSub_marketData {
  __typename: "MarketData";
  /**
-   * market ID of the associated mark price
+   * market id of the associated mark price
   */
  market: SimpleMarketDataSub_marketData_market;
 }
@@ -3,32 +3,12 @@
 // @generated
 // This file was automatically generated and should not be edited.

-import { MarketState } from "@vegaprotocol/types";
+import { MarketState } from "./../../../../../../../libs/types/src/__generated__/globalTypes";

 // ====================================================
 // GraphQL query operation: SimpleMarkets
 // ====================================================

-export interface SimpleMarkets_markets_data_market {
-  __typename: "Market";
-  /**
-   * Market ID
-   */
-  id: string;
-  /**
-   * Current state of the market
-   */
-  state: MarketState;
-}
-
-export interface SimpleMarkets_markets_data {
-  __typename: "MarketData";
-  /**
-   * market ID of the associated mark price
-   */
-  market: SimpleMarkets_markets_data_market;
-}
-
 export interface SimpleMarkets_markets_tradableInstrument_instrument_metadata {
  __typename: "InstrumentMetadata";
  /**
@@ -63,6 +43,10 @@ export interface SimpleMarkets_markets_tradableInstrument_instrument {
   * A short non necessarily unique code used to easily describe the instrument (e.g: FX:BTCUSD/DEC18) (string)
   */
  code: string;
+  /**
+   * Full and fairly descriptive name for the instrument
+   */
+  name: string;
  /**
   * Metadata for this instrument
   */
@@ -76,7 +60,7 @@ export interface SimpleMarkets_markets_tradableInstrument_instrument {
 export interface SimpleMarkets_markets_tradableInstrument {
  __typename: "TradableInstrument";
  /**
-   * An instance of, or reference to, a fully specified instrument.
+   * An instance of or reference to a fully specified instrument.
   */
  instrument: SimpleMarkets_markets_tradableInstrument_instrument;
 }
@@ -99,24 +83,16 @@ export interface SimpleMarkets_markets {
   * Market ID
   */
  id: string;
-  /**
-   * Market full name
-   */
-  name: string;
  /**
   * Current state of the market
   */
  state: MarketState;
  /**
-   * marketData for the given market
-   */
-  data: SimpleMarkets_markets_data | null;
-  /**
-   * An instance of, or reference to, a tradable instrument.
+   * An instance of or reference to a tradable instrument.
   */
  tradableInstrument: SimpleMarkets_markets_tradableInstrument;
  /**
-   * Candles on a market, for the 'last' n candles, at 'interval' seconds as specified by parameters
+   * Candles on a market, for the 'last' n candles, at 'interval' seconds as specified by params
   */
  candles: (SimpleMarkets_markets_candles | null)[] | null;
 }
@@ -0,0 +1,43 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type CandleLiveSubscriptionVariables = Types.Exact<{
+  marketId: Types.Scalars['ID'];
+}>;
+
+
+export type CandleLiveSubscription = { __typename?: 'Subscription', candles: { __typename?: 'Candle', close: string } };
+
+
+export const CandleLiveDocument = gql`
+    subscription CandleLive($marketId: ID!) {
+  candles(marketId: $marketId, interval: INTERVAL_I1H) {
+    close
+  }
+}
+    `;
+
+/**
+ * __useCandleLiveSubscription__
+ *
+ * To run a query within a React component, call `useCandleLiveSubscription` and pass it any options that fit your needs.
+ * When your component renders, `useCandleLiveSubscription` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the subscription, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useCandleLiveSubscription({
+ *   variables: {
+ *      marketId: // value for 'marketId'
+ *   },
+ * });
+ */
+export function useCandleLiveSubscription(baseOptions: Apollo.SubscriptionHookOptions<CandleLiveSubscription, CandleLiveSubscriptionVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useSubscription<CandleLiveSubscription, CandleLiveSubscriptionVariables>(CandleLiveDocument, options);
+      }
+export type CandleLiveSubscriptionHookResult = ReturnType<typeof useCandleLiveSubscription>;
+export type CandleLiveSubscriptionResult = Apollo.SubscriptionResult<CandleLiveSubscription>;
@@ -0,0 +1,117 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type SimpleMarketDataFieldsFragment = { __typename?: 'MarketData', market: { __typename?: 'Market', id: string, state: Types.MarketState } };
+
+export type SimpleMarketsQueryVariables = Types.Exact<{
+  CandleSince: Types.Scalars['String'];
+}>;
+
+
+export type SimpleMarketsQuery = { __typename?: 'Query', markets?: Array<{ __typename?: 'Market', id: string, name: string, state: Types.MarketState, data?: { __typename?: 'MarketData', market: { __typename?: 'Market', id: string, state: Types.MarketState } } | null, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', code: string, metadata: { __typename?: 'InstrumentMetadata', tags?: Array<string> | null }, product: { __typename: 'Future', quoteName: string, settlementAsset: { __typename?: 'Asset', symbol: string } } } }, candles?: Array<{ __typename?: 'Candle', open: string, close: string } | null> | null }> | null };
+
+export type SimpleMarketDataSubSubscriptionVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type SimpleMarketDataSubSubscription = { __typename?: 'Subscription', marketData: { __typename?: 'MarketData', market: { __typename?: 'Market', id: string, state: Types.MarketState } } };
+
+export const SimpleMarketDataFieldsFragmentDoc = gql`
+    fragment SimpleMarketDataFields on MarketData {
+  market {
+    id
+    state
+  }
+}
+    `;
+export const SimpleMarketsDocument = gql`
+    query SimpleMarkets($CandleSince: String!) {
+  markets {
+    id
+    name
+    state
+    data {
+      ...SimpleMarketDataFields
+    }
+    tradableInstrument {
+      instrument {
+        code
+        metadata {
+          tags
+        }
+        product {
+          __typename
+          ... on Future {
+            quoteName
+            settlementAsset {
+              symbol
+            }
+          }
+        }
+      }
+    }
+    candles(interval: INTERVAL_I1H, since: $CandleSince) {
+      open
+      close
+    }
+  }
+}
+    ${SimpleMarketDataFieldsFragmentDoc}`;
+
+/**
+ * __useSimpleMarketsQuery__
+ *
+ * To run a query within a React component, call `useSimpleMarketsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useSimpleMarketsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useSimpleMarketsQuery({
+ *   variables: {
+ *      CandleSince: // value for 'CandleSince'
+ *   },
+ * });
+ */
+export function useSimpleMarketsQuery(baseOptions: Apollo.QueryHookOptions<SimpleMarketsQuery, SimpleMarketsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<SimpleMarketsQuery, SimpleMarketsQueryVariables>(SimpleMarketsDocument, options);
+      }
+export function useSimpleMarketsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<SimpleMarketsQuery, SimpleMarketsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<SimpleMarketsQuery, SimpleMarketsQueryVariables>(SimpleMarketsDocument, options);
+        }
+export type SimpleMarketsQueryHookResult = ReturnType<typeof useSimpleMarketsQuery>;
+export type SimpleMarketsLazyQueryHookResult = ReturnType<typeof useSimpleMarketsLazyQuery>;
+export type SimpleMarketsQueryResult = Apollo.QueryResult<SimpleMarketsQuery, SimpleMarketsQueryVariables>;
+export const SimpleMarketDataSubDocument = gql`
+    subscription SimpleMarketDataSub {
+  marketData {
+    ...SimpleMarketDataFields
+  }
+}
+    ${SimpleMarketDataFieldsFragmentDoc}`;
+
+/**
+ * __useSimpleMarketDataSubSubscription__
+ *
+ * To run a query within a React component, call `useSimpleMarketDataSubSubscription` and pass it any options that fit your needs.
+ * When your component renders, `useSimpleMarketDataSubSubscription` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the subscription, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useSimpleMarketDataSubSubscription({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useSimpleMarketDataSubSubscription(baseOptions?: Apollo.SubscriptionHookOptions<SimpleMarketDataSubSubscription, SimpleMarketDataSubSubscriptionVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useSubscription<SimpleMarketDataSubSubscription, SimpleMarketDataSubSubscriptionVariables>(SimpleMarketDataSubDocument, options);
+      }
+export type SimpleMarketDataSubSubscriptionHookResult = ReturnType<typeof useSimpleMarketDataSubSubscription>;
+export type SimpleMarketDataSubSubscriptionResult = Apollo.SubscriptionResult<SimpleMarketDataSubSubscription>;
@@ -195,3 +195,5 @@ export const ROW_CLASS_RULES = {
  'cursor-pointer': ({ data }: { data: SimpleMarkets_markets }) =>
    IS_MARKET_TRADABLE(data || {}),
 };
+
+export const LARGE_SCREENS = ['xl', 'xxl'];
@@ -10,28 +10,15 @@ import type {
  SimpleMarketDataSub_marketData,
 } from './__generated__/SimpleMarketDataSub';

-const MARKET_DATA_FRAGMENT = gql`
-  fragment SimpleMarketDataFields on MarketData {
-    market {
-      id
-      state
-    }
-  }
-`;
-
 export const MARKETS_QUERY = gql`
-  ${MARKET_DATA_FRAGMENT}
  query SimpleMarkets($CandleSince: String!) {
    markets {
      id
-      name
      state
-      data {
-        ...SimpleMarketDataFields
-      }
      tradableInstrument {
        instrument {
          code
+          name
          metadata {
            tags
          }
@@ -46,7 +33,7 @@ export const MARKETS_QUERY = gql`
          }
        }
      }
-      candles(interval: INTERVAL_I1H, since: $CandleSince) {
+      candles(interval: I1H, since: $CandleSince) {
        open
        close
      }
@@ -55,17 +42,19 @@ export const MARKETS_QUERY = gql`
 `;

 const MARKET_DATA_SUB = gql`
-  ${MARKET_DATA_FRAGMENT}
  subscription SimpleMarketDataSub {
    marketData {
-      ...SimpleMarketDataFields
+      market {
+        id
+        state
+      }
    }
  }
 `;

 export const CANDLE_SUB = gql`
  subscription CandleLive($marketId: ID!) {
-    candles(marketId: $marketId, interval: INTERVAL_I1H) {
+    candles(marketId: $marketId, interval: I1H) {
      close
    }
  }
@@ -78,7 +67,7 @@ const update = (
  return produce(data, (draft) => {
    const index = draft.findIndex((m) => m.id === delta.market.id);
    if (index !== -1) {
-      draft[index].data = delta;
+      draft[index].state = delta.market.state;
    }
    // @TODO - else push new market to draft
  });
@@ -6,17 +6,19 @@ import {
  waitFor,
  cleanup,
  getAllByRole,
+  fireEvent,
 } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
 import type { MockedResponse } from '@apollo/client/testing';
 import { BrowserRouter } from 'react-router-dom';
+import { MarketState } from '@vegaprotocol/types';
 import SimpleMarketList from './simple-market-list';
 import { MARKETS_QUERY } from './data-provider';
 import type {
  SimpleMarkets_markets,
  SimpleMarkets,
 } from './__generated__/SimpleMarkets';
-import { MarketState } from '@vegaprotocol/types';
+import type { SimpleMarketDataSub_marketData } from './__generated__/SimpleMarketDataSub';

 const mockedNavigate = jest.fn();

@@ -30,93 +32,85 @@ jest.mock('date-fns', () => ({
  subDays: () => new Date('2022-06-02T11:11:21.721Z'),
 }));

+let updateMock: ({
+  delta,
+}: {
+  delta: SimpleMarketDataSub_marketData;
+}) => boolean;
+
+let mockData = [
+  {
+    id: '1',
+    name: 'Market 1',
+    state: MarketState.STATE_ACTIVE,
+    tradableInstrument: {
+      instrument: {
+        product: {
+          settlementAsset: {
+            symbol: 'tUSD',
+          },
+        },
+        metadata: {
+          tags: [],
+        },
+      },
+    },
+  },
+  {
+    id: '2',
+    name: 'Market 2',
+    state: MarketState.STATE_ACTIVE,
+    tradableInstrument: {
+      instrument: {
+        product: {
+          settlementAsset: {
+            symbol: 'ETH',
+          },
+        },
+        metadata: {
+          tags: [],
+        },
+      },
+    },
+  },
+] as unknown as SimpleMarkets_markets[];
+
+const mockUseDataProvider = ({ update }: { update: () => boolean }) => {
+  updateMock = update;
+  return { data: mockData, loading: false, error: false };
+};
+
+jest.mock('@vegaprotocol/react-helpers', () => ({
+  ...jest.requireActual('@vegaprotocol/react-helpers'),
+  useDataProvider: jest.fn((args) => mockUseDataProvider(args)),
+}));
+
+const mockIsTradable = jest.fn((_arg) => true);
+
+jest.mock('../../constants', () => ({
+  ...jest.requireActual('../../constants'),
+  IS_MARKET_TRADABLE: jest.fn((arg) => mockIsTradable(arg)),
+}));
+
 describe('SimpleMarketList', () => {
  afterEach(() => {
    jest.clearAllMocks();
    cleanup();
  });

-  it('should be properly renderer as empty', async () => {
-    const mocks: MockedResponse<SimpleMarkets> = {
-      request: {
-        query: MARKETS_QUERY,
-        variables: {
-          CandleSince: '2022-06-02T11:11:21.721Z',
-        },
+  const mocks: MockedResponse<SimpleMarkets> = {
+    request: {
+      query: MARKETS_QUERY,
+      variables: {
+        CandleSince: '2022-06-02T11:11:21.721Z',
      },
-      result: {
-        data: { markets: [] },
-      },
-    };
-    await act(async () => {
-      render(
-        <MockedProvider mocks={[mocks]}>
-          <SimpleMarketList />
-        </MockedProvider>,
-        { wrapper: BrowserRouter }
-      );
-      await new Promise((resolve) => setTimeout(resolve, 0));
-    });
-    await waitFor(() => {
-      expect(screen.getByText('No data to display')).toBeInTheDocument();
-    });
-  });
+    },
+    result: {
+      data: { markets: mockData },
+    },
+  };

  it('should be properly rendered with some data', async () => {
-    const data = [
-      {
-        id: '1',
-        data: {
-          market: {
-            state: MarketState.STATE_ACTIVE,
-          },
-        },
-        tradableInstrument: {
-          instrument: {
-            product: {
-              settlementAsset: {
-                symbol: 'tUSD',
-              },
-            },
-            metadata: {
-              tags: [],
-            },
-          },
-        },
-      },
-      {
-        id: '2',
-        data: {
-          market: {
-            state: MarketState.STATE_ACTIVE,
-          },
-        },
-        tradableInstrument: {
-          instrument: {
-            product: {
-              settlementAsset: {
-                symbol: 'ETH',
-              },
-            },
-            metadata: {
-              tags: [],
-            },
-          },
-        },
-      },
-    ] as unknown as SimpleMarkets_markets[];
-
-    const mocks: MockedResponse<SimpleMarkets> = {
-      request: {
-        query: MARKETS_QUERY,
-        variables: {
-          CandleSince: '2022-06-02T11:11:21.721Z',
-        },
-      },
-      result: {
-        data: { markets: data },
-      },
-    };
    await act(async () => {
      render(
        <MockedProvider mocks={[mocks]}>
@@ -136,4 +130,92 @@ describe('SimpleMarketList', () => {
      expect(getAllByRole(container as HTMLDivElement, 'row')).toHaveLength(2);
    });
  });
+
+  it('update should return proper boolean value', async () => {
+    await act(async () => {
+      render(
+        <MockedProvider mocks={[mocks]}>
+          <SimpleMarketList />
+        </MockedProvider>,
+        { wrapper: BrowserRouter }
+      );
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+    await waitFor(() => {
+      expect(
+        document.querySelector('.ag-center-cols-container')
+      ).toBeInTheDocument();
+    });
+
+    await expect(
+      updateMock({
+        delta: {
+          __typename: 'MarketData',
+          market: {
+            __typename: 'Market',
+            id: '2',
+            state: MarketState.STATE_ACTIVE,
+          },
+        },
+      })
+    ).toEqual(true);
+
+    await expect(
+      updateMock({
+        delta: {
+          __typename: 'MarketData',
+          market: {
+            __typename: 'Market',
+            id: '2',
+            state: MarketState.STATE_SUSPENDED,
+          },
+        },
+      })
+    ).toEqual(false);
+  });
+
+  it('click on row should be properly handled', async () => {
+    await act(async () => {
+      render(
+        <MockedProvider mocks={[mocks]}>
+          <SimpleMarketList />
+        </MockedProvider>,
+        { wrapper: BrowserRouter }
+      );
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+    await waitFor(() => {
+      expect(
+        document.querySelector('.ag-center-cols-container')
+      ).toBeInTheDocument();
+    });
+    mockIsTradable.mockClear();
+    const container = document.querySelector('.ag-center-cols-container');
+    const firstRow = getAllByRole(container as HTMLDivElement, 'row')[0];
+    expect(firstRow).toHaveAttribute('row-id', '1');
+    fireEvent.click(firstRow);
+    await waitFor(() => {
+      expect(mockIsTradable).toHaveBeenCalledWith({
+        ...mockData[0],
+        percentChange: '-',
+      });
+      expect(mockedNavigate).toHaveBeenCalledWith(`/trading/${mockData[0].id}`);
+    });
+  });
+
+  it('should be properly renderer as empty', async () => {
+    mockData = [];
+    await act(async () => {
+      render(
+        <MockedProvider mocks={[mocks]}>
+          <SimpleMarketList />
+        </MockedProvider>,
+        { wrapper: BrowserRouter }
+      );
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+    await waitFor(() => {
+      expect(screen.getByText('No data to display')).toBeInTheDocument();
+    });
+  });
 });
@@ -45,7 +45,7 @@ export type RouterParams = Partial<{
 }>;

 const SimpleMarketList = () => {
-  const { isMobile } = useScreenDimensions();
+  const { isMobile, screenSize } = useScreenDimensions();
  const navigate = useNavigate();
  const params = useParams<RouterParams>();
  const theme = useContext(ThemeContext);
@@ -80,7 +80,7 @@ const SimpleMarketList = () => {
  useEffect(() => {
    const statuses: Record<string, MarketState | ''> = {};
    data?.forEach((market) => {
-      statuses[market.id] = market.data?.market.state || '';
+      statuses[market.id] = market.state || '';
    });
    statusesRef.current = statuses;
  }, [data, statusesRef]);
@@ -129,6 +129,10 @@ const SimpleMarketList = () => {
    [handleRowClicked]
  );

+  const shouldSuppressHorizontalScroll = useMemo(() => {
+    return !isMobile && constants.LARGE_SCREENS.includes(screenSize);
+  }, [isMobile, screenSize]);
+
  return (
    <div className="h-full p-4 md:p-6 grid grid-rows-[min-content,1fr]">
      <SimpleMarketToolbar data={data || []} />
@@ -156,6 +160,7 @@ const SimpleMarketList = () => {
          suppressRowTransform
          onCellKeyDown={onCellKeyDown}
          tabToNextCell={onTabToNextCell}
+          suppressHorizontalScroll={shouldSuppressHorizontalScroll}
        />
      </AsyncRenderer>
    </div>
@@ -0,0 +1,36 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import type { MarketNames_markets } from '@vegaprotocol/deal-ticket';
+import { MarketState } from '@vegaprotocol/types';
+import MarketNameRenderer from './simple-market-renderer';
+
+describe('SimpleMarketRenderer', () => {
+  const market = {
+    id: 'marketId',
+    state: MarketState.STATE_ACTIVE,
+    tradableInstrument: {
+      instrument: {
+        code: 'Market code',
+        name: 'Market Name',
+        product: {
+          quoteName: 'Quote name',
+        },
+        metadata: {
+          tags: null,
+        },
+      },
+    },
+  } as MarketNames_markets;
+
+  it('should properly render not mobile', () => {
+    render(<MarketNameRenderer market={market} isMobile={false} />);
+    expect(screen.getByText('Market Name')).toBeInTheDocument();
+    expect(screen.getByText('Quote name')).toBeInTheDocument();
+  });
+
+  it('should properly render mobile', () => {
+    render(<MarketNameRenderer market={market} isMobile={true} />);
+    expect(screen.getByText('Market code')).toBeInTheDocument();
+    expect(screen.getByText('Quote name')).toBeInTheDocument();
+  });
+});
@@ -17,7 +17,9 @@ const MarketNameRenderer = ({ market, isMobile }: Props) => {
        )}
      />
      <div className="col-span-2 uppercase justify-start text-black dark:text-white text-ui-small md:text-market self-end">
-        {isMobile ? market.tradableInstrument.instrument.code : market.name}{' '}
+        {isMobile
+          ? market.tradableInstrument.instrument.code
+          : market.tradableInstrument.instrument.name}{' '}
        <SimpleMarketExpires
          tags={market.tradableInstrument.instrument.metadata.tags}
        />
@@ -1,11 +1,35 @@
 import React from 'react';
-import { useLocation, useRoutes, BrowserRouter } from 'react-router-dom';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import {
+  useLocation,
+  useRoutes,
+  BrowserRouter,
+  useParams,
+} from 'react-router-dom';
+import {
+  render,
+  screen,
+  fireEvent,
+  waitFor,
+  act,
+  getAllByText,
+} from '@testing-library/react';
 import { MockedProvider } from '@apollo/react-testing';
+import { MarketState } from '@vegaprotocol/types';
 import SimpleMarketToolbar from './simple-market-toolbar';
 import type { SimpleMarkets_markets } from './__generated__/SimpleMarkets';
 import { markets as filterData } from './mocks/market-filters.json';

+const mockedNavigate = jest.fn();
+
+jest.mock('react-router-dom', () => {
+  const actualRouter = jest.requireActual('react-router-dom');
+  return {
+    ...actualRouter,
+    useNavigate: () => mockedNavigate,
+    useParams: jest.fn(() => actualRouter.useParams()),
+  };
+});
+
 describe('SimpleMarketToolbar', () => {
  const WrappedCompForTest = () => {
    const routes = useRoutes([
@@ -60,9 +84,8 @@ describe('SimpleMarketToolbar', () => {
      </>
    );
  };
-
  afterEach(() => {
-    jest.resetAllMocks();
+    jest.clearAllMocks();
  });

  it('should be properly rendered', async () => {
@@ -83,7 +106,7 @@ describe('SimpleMarketToolbar', () => {
      expect(screen.getByTestId('market-assets-menu').children).toHaveLength(6);
    });
    fireEvent.click(screen.getByTestId('state-trigger'));
-    waitFor(() => {
+    await waitFor(() => {
      expect(screen.getByRole('menu')).toBeInTheDocument();
      expect(screen.getByRole('menu').children).toHaveLength(10);
    });
@@ -104,7 +127,7 @@ describe('SimpleMarketToolbar', () => {

    await waitFor(() => {
      expect(screen.getByTestId('location-display')).toHaveTextContent(
-        '/markets/STATE_ACTIVE/Future'
+        `/markets/${MarketState.STATE_ACTIVE}/Future`
      );
    });

@@ -115,17 +138,91 @@ describe('SimpleMarketToolbar', () => {
    );
    await waitFor(() => {
      expect(screen.getByTestId('location-display')).toHaveTextContent(
-        '/markets/STATE_ACTIVE/Future/tEURO'
+        `/markets/${MarketState.STATE_ACTIVE}/Future/tEURO`
      );
    });

    fireEvent.click(screen.getByTestId('state-trigger'));
-    waitFor(() => {
+    await waitFor(() => {
      expect(screen.getByRole('menu')).toBeInTheDocument();
-      fireEvent.click(screen.getByText('Pending'));
-      expect(screen.getByTestId('location-display')).toHaveTextContent(
-        '/markets/Pending/Future/tEURO'
+    });
+    const menu = screen.getByRole('menu');
+    const pending = getAllByText(menu, 'Pending')[0];
+    await act(() => {
+      fireEvent.click(pending);
+    });
+    await waitFor(() => {
+      expect(mockedNavigate).toHaveBeenCalledWith(
+        `/markets/${MarketState.STATE_PENDING}/Future/tEURO`
      );
    });
  });
+
+  it('stateChange callback should work well', async () => {
+    (useParams as jest.Mock).mockImplementation(() => ({
+      asset: 'asset1',
+      product: 'product1',
+      state: 'state1',
+    }));
+    render(
+      <MockedProvider mocks={[]} addTypename={false}>
+        <SimpleMarketToolbar data={filterData as SimpleMarkets_markets[]} />
+      </MockedProvider>,
+      { wrapper: BrowserRouter }
+    );
+    fireEvent.click(screen.getByTestId('state-trigger'));
+    await waitFor(() => {
+      expect(screen.getByRole('menu')).toBeInTheDocument();
+    });
+    const menu = screen.getByRole('menu');
+    const suspended = getAllByText(menu, 'Suspended')[0];
+    fireEvent.click(suspended);
+
+    expect(mockedNavigate).toHaveBeenCalledWith(
+      `/markets/${MarketState.STATE_SUSPENDED}/product1/asset1`
+    );
+  });
+
+  it('stateChange callback should call navigate with url with state only', async () => {
+    (useParams as jest.Mock).mockImplementation(() => ({}));
+    render(
+      <MockedProvider mocks={[]} addTypename={false}>
+        <SimpleMarketToolbar data={filterData as SimpleMarkets_markets[]} />
+      </MockedProvider>,
+      { wrapper: BrowserRouter }
+    );
+    fireEvent.click(screen.getByTestId('state-trigger'));
+    await waitFor(() => {
+      expect(screen.getByRole('menu')).toBeInTheDocument();
+    });
+    const menu = screen.getByRole('menu');
+    const closed = getAllByText(menu, 'Closed')[0];
+    fireEvent.click(closed);
+
+    expect(mockedNavigate).toHaveBeenCalledWith(
+      `/markets/${MarketState.STATE_CLOSED}`
+    );
+  });
+
+  it('stateChange callback should call navigate with no asset', async () => {
+    (useParams as jest.Mock).mockImplementation(() => ({
+      asset: 'all',
+      state: 'state1',
+    }));
+    render(
+      <MockedProvider mocks={[]} addTypename={false}>
+        <SimpleMarketToolbar data={filterData as SimpleMarkets_markets[]} />
+      </MockedProvider>,
+      { wrapper: BrowserRouter }
+    );
+    fireEvent.click(screen.getByTestId('state-trigger'));
+    await waitFor(() => {
+      expect(screen.getByRole('menu')).toBeInTheDocument();
+    });
+
+    const menu = screen.getByRole('menu');
+    const active = getAllByText(menu, 'Active')[0];
+    fireEvent.click(active);
+    expect(mockedNavigate).toHaveBeenCalledWith('/markets');
+  });
 });
@@ -75,7 +75,7 @@ const SimpleMarketToolbar = ({ data }: Props) => {
  );

  return (
-    <div className="w-full max-w-full mb-4 font-alpha">
+    <div className="w-full max-w-full mb-2 md:mb-8 font-alpha">
      <ul
        ref={slideContRef}
        className="grid grid-flow-col auto-cols-min gap-4 relative pb-2 mb-2"
@@ -121,12 +121,13 @@ const SimpleMarketToolbar = ({ data }: Props) => {
          style={sliderStyles}
        />
      </ul>
-      <div className="grid gap-8 pb-4 mt-6 md:grid-cols-[min-content,min-content,1fr]">
-        <div className="pb-8">
-          <DropdownMenu onOpenChange={(open) => setOpen(open)}>
+      <div className="grid gap-4 pb-2 mt-2 md:mt-6 md:grid-cols-[min-content,min-content,1fr]">
+        <div className="pb-2">
+          <DropdownMenu open={isOpen} onOpenChange={(open) => setOpen(open)}>
            <DropdownMenuTrigger
              className="mr-2 w-auto text-capMenu text-black dark:text-white"
              data-testid="state-trigger"
+              onClick={() => setOpen(!isOpen)}
            >
              <div className="w-full justify-between uppercase inline-flex items-center justify-center box-border">
                {STATES_FILTER.find(
@@ -148,7 +149,7 @@ const SimpleMarketToolbar = ({ data }: Props) => {
            <DropdownMenuContent>
              {STATES_FILTER.map(({ value, text }) => (
                <DropdownMenuCheckboxItem
-                  className="uppercase text-ui dark:text-white"
+                  className="uppercase text-ui"
                  key={value}
                  checked={
                    value === params.state ||
@@ -170,7 +171,7 @@ const SimpleMarketToolbar = ({ data }: Props) => {
        </div>
        {activeNumber > 0 && (
          <ul
-            className="md:gap-6 gap-4 pb-4 md:ml-2 flex flex-wrap"
+            className="md:gap-x-6 gap-x-4 gap-y-1 pb-2 md:ml-2 flex flex-wrap"
            data-testid="market-assets-menu"
            aria-label={t('Asset on the market')}
          >
@@ -88,7 +88,7 @@ export const Stepper = ({ steps }: StepperProps) => {
                        'md:mt-0 font-alpha uppercase text-black dark:text-white',
                        {
                          'mt-2 text-md md:text-2xl': isActive,
-                          'mt-4 text-sm md:text-lg md:ml-8': !isActive,
+                          'mt-4 text-sm md:text-lg md:ml-2': !isActive,
                        }
                      )}
                    >
@@ -0,0 +1 @@
+export * from './traffic-light';
@@ -0,0 +1,25 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import classNames from 'classnames';
+
+interface TrafficLightProps {
+  value: number;
+  q1: number;
+  q2: number;
+  children: ReactNode;
+}
+
+export const TrafficLight = ({
+  value,
+  q1,
+  q2,
+  children,
+}: TrafficLightProps) => {
+  const slippageClassName = classNames({
+    'text-darkerGreen dark:text-lightGreen': value < q1,
+    'text-amber': value >= q1 && value < q2,
+    'text-vega-red': value >= q2,
+  });
+
+  return <div className={slippageClassName}>{children || value}</div>;
+};
@@ -10,7 +10,7 @@ export const TRADABLE_STATES = {
 };

 export const IS_MARKET_TRADABLE = (market: SimpleMarkets_markets) =>
-  Boolean((market.data?.market.state ?? '') in TRADABLE_STATES && market?.id);
+  Boolean((market.state ?? '') in TRADABLE_STATES && market?.id);

 export const MARKET_STATES_MAP: Record<MarketState | '', string> = {
  [MarketState.STATE_ACTIVE]: t('Active'),
@@ -0,0 +1,30 @@
+query EstimateOrder(
+  $marketId: ID!
+  $partyId: ID!
+  $price: String
+  $size: String!
+  $side: Side!
+  $timeInForce: OrderTimeInForce!
+  $expiration: String
+  $type: OrderType!
+) {
+  estimateOrder(
+    marketId: $marketId
+    partyId: $partyId
+    price: $price
+    size: $size
+    side: $side
+    timeInForce: $timeInForce
+    expiration: $expiration
+    type: $type
+  ) {
+    fee {
+      makerFee
+      infrastructureFee
+      liquidityFee
+    }
+    marginLevels {
+      initialLevel
+    }
+  }
+}
@@ -0,0 +1,8 @@
+query MarketMarkPrice($marketId: ID!) {
+  market(id: $marketId) {
+    decimalPlaces
+    data {
+      markPrice
+    }
+  }
+}
@@ -0,0 +1,25 @@
+query MarketPositions($partyId: ID!) {
+  party(id: $partyId) {
+    id
+    accounts {
+      type
+      balance
+      asset {
+        decimals
+      }
+      market {
+        id
+      }
+    }
+    positionsConnection {
+      edges {
+        node {
+          openVolume
+          market {
+            id
+          }
+        }
+      }
+    }
+  }
+}
@@ -0,0 +1,28 @@
+query PartyMarketData($partyId: ID!) {
+  party(id: $partyId) {
+    id
+    accounts {
+      type
+      balance
+      asset {
+        id
+        decimals
+      }
+      market {
+        id
+      }
+    }
+    marginsConnection {
+      edges {
+        node {
+          market {
+            id
+          }
+          initialLevel
+          maintenanceLevel
+          searchLevel
+        }
+      }
+    }
+  }
+}
@@ -10,7 +10,7 @@
 export interface MarketMarkPrice_market_data {
  __typename: "MarketData";
  /**
-   * the mark price (an unsigned integer)
+   * the mark price (actually an unsigned int)
   */
  markPrice: string;
 }
@@ -19,7 +19,7 @@ export interface MarketMarkPrice_market {
  __typename: "Market";
  /**
   * decimalPlaces indicates the number of decimal places that an integer must be shifted by in order to get a correct
-   * number denominated in the currency of the market. (uint64)
+   * number denominated in the currency of the Market. (uint64)
   * 
   * Examples:
   * Currency     Balance  decimalPlaces  Real Balance
@@ -42,7 +42,7 @@ export interface MarketMarkPrice_market {

 export interface MarketMarkPrice {
  /**
-   * An instrument that is trading on the Vega network
+   * An instrument that is trading on the VEGA network
   */
  market: MarketMarkPrice_market | null;
 }
@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.

-import { AccountType } from "@vegaprotocol/types";
+import { AccountType } from "./../../../../../../libs/types/src/__generated__/globalTypes";

 // ====================================================
 // GraphQL query operation: PartyMarketData
@@ -12,11 +12,11 @@ import { AccountType } from "@vegaprotocol/types";
 export interface PartyMarketData_party_accounts_asset {
  __typename: "Asset";
  /**
-   * The ID of the asset
+   * The id of the asset
   */
  id: string;
  /**
-   * The precision of the asset. Should match the decimal precision of the asset on its native chain, e.g: for ERC20 assets, it is often 18
+   * The precision of the asset
   */
  decimals: number;
 }
@@ -64,15 +64,15 @@ export interface PartyMarketData_party_marginsConnection_edges_node {
   */
  market: PartyMarketData_party_marginsConnection_edges_node_market;
  /**
-   * this is the minimum margin required for a party to place a new order on the network (unsigned integer)
+   * this is the minimal margin required for a party to place a new order on the network (unsigned int actually)
   */
  initialLevel: string;
  /**
-   * minimal margin for the position to be maintained in the network (unsigned integer)
+   * minimal margin for the position to be maintained in the network (unsigned int actually)
   */
  maintenanceLevel: string;
  /**
-   * if the margin is between maintenance and search, the network will initiate a collateral search (unsigned integer)
+   * if the margin is between maintenance and search, the network will initiate a collateral search (unsigned int actually)
   */
  searchLevel: string;
 }
@@ -101,14 +101,14 @@ export interface PartyMarketData_party {
   */
  accounts: PartyMarketData_party_accounts[] | null;
  /**
-   * Margin levels for a market
+   * Margin level for a market
   */
  marginsConnection: PartyMarketData_party_marginsConnection;
 }

 export interface PartyMarketData {
  /**
-   * An entity that is trading on the Vega network
+   * An entity that is trading on the VEGA network
   */
  party: PartyMarketData_party | null;
 }
@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.

-import { Side, OrderTimeInForce, OrderType } from "@vegaprotocol/types";
+import { Side, OrderTimeInForce, OrderType } from "./../../../../../../libs/types/src/__generated__/globalTypes";

 // ====================================================
 // GraphQL query operation: EstimateOrder
@@ -12,15 +12,15 @@ import { Side, OrderTimeInForce, OrderType } from "@vegaprotocol/types";
 export interface EstimateOrder_estimateOrder_fee {
  __typename: "TradeFee";
  /**
-   * The maker fee, paid by the aggressive party to the other party (the one who had an order in the book)
+   * The maker fee, aggressive party to the other party (the one who had an order in the book)
   */
  makerFee: string;
  /**
-   * The infrastructure fee, a fee paid to the validators to maintain the Vega network
+   * The infrastructure fee, a fee paid to the node runner to maintain the vega network
   */
  infrastructureFee: string;
  /**
-   * The fee paid to the liquidity providers that committed liquidity to the market
+   * The fee paid to the market makers to provide liquidity in the market
   */
  liquidityFee: string;
 }
@@ -28,7 +28,7 @@ export interface EstimateOrder_estimateOrder_fee {
 export interface EstimateOrder_estimateOrder_marginLevels {
  __typename: "MarginLevels";
  /**
-   * this is the minimum margin required for a party to place a new order on the network (unsigned integer)
+   * this is the minimal margin required for a party to place a new order on the network (unsigned int actually)
   */
  initialLevel: string;
 }
@@ -3,7 +3,7 @@
 // @generated
 // This file was automatically generated and should not be edited.

-import { AccountType } from "@vegaprotocol/types";
+import { AccountType } from "./../../../../../../libs/types/src/__generated__/globalTypes";

 // ====================================================
 // GraphQL query operation: MarketPositions
@@ -12,7 +12,7 @@ import { AccountType } from "@vegaprotocol/types";
 export interface MarketPositions_party_accounts_asset {
  __typename: "Asset";
  /**
-   * The precision of the asset. Should match the decimal precision of the asset on its native chain, e.g: for ERC20 assets, it is often 18
+   * The precision of the asset
   */
  decimals: number;
 }
@@ -96,7 +96,7 @@ export interface MarketPositions_party {

 export interface MarketPositions {
  /**
-   * An entity that is trading on the Vega network
+   * An entity that is trading on the VEGA network
   */
  party: MarketPositions_party | null;
 }
@@ -0,0 +1,78 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type EstimateOrderQueryVariables = Types.Exact<{
+  marketId: Types.Scalars['ID'];
+  partyId: Types.Scalars['ID'];
+  price?: Types.InputMaybe<Types.Scalars['String']>;
+  size: Types.Scalars['String'];
+  side: Types.Side;
+  timeInForce: Types.OrderTimeInForce;
+  expiration?: Types.InputMaybe<Types.Scalars['String']>;
+  type: Types.OrderType;
+}>;
+
+
+export type EstimateOrderQuery = { __typename?: 'Query', estimateOrder: { __typename?: 'OrderEstimate', fee: { __typename?: 'TradeFee', makerFee: string, infrastructureFee: string, liquidityFee: string }, marginLevels: { __typename?: 'MarginLevels', initialLevel: string } } };
+
+
+export const EstimateOrderDocument = gql`
+    query EstimateOrder($marketId: ID!, $partyId: ID!, $price: String, $size: String!, $side: Side!, $timeInForce: OrderTimeInForce!, $expiration: String, $type: OrderType!) {
+  estimateOrder(
+    marketId: $marketId
+    partyId: $partyId
+    price: $price
+    size: $size
+    side: $side
+    timeInForce: $timeInForce
+    expiration: $expiration
+    type: $type
+  ) {
+    fee {
+      makerFee
+      infrastructureFee
+      liquidityFee
+    }
+    marginLevels {
+      initialLevel
+    }
+  }
+}
+    `;
+
+/**
+ * __useEstimateOrderQuery__
+ *
+ * To run a query within a React component, call `useEstimateOrderQuery` and pass it any options that fit your needs.
+ * When your component renders, `useEstimateOrderQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useEstimateOrderQuery({
+ *   variables: {
+ *      marketId: // value for 'marketId'
+ *      partyId: // value for 'partyId'
+ *      price: // value for 'price'
+ *      size: // value for 'size'
+ *      side: // value for 'side'
+ *      timeInForce: // value for 'timeInForce'
+ *      expiration: // value for 'expiration'
+ *      type: // value for 'type'
+ *   },
+ * });
+ */
+export function useEstimateOrderQuery(baseOptions: Apollo.QueryHookOptions<EstimateOrderQuery, EstimateOrderQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<EstimateOrderQuery, EstimateOrderQueryVariables>(EstimateOrderDocument, options);
+      }
+export function useEstimateOrderLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<EstimateOrderQuery, EstimateOrderQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<EstimateOrderQuery, EstimateOrderQueryVariables>(EstimateOrderDocument, options);
+        }
+export type EstimateOrderQueryHookResult = ReturnType<typeof useEstimateOrderQuery>;
+export type EstimateOrderLazyQueryHookResult = ReturnType<typeof useEstimateOrderLazyQuery>;
+export type EstimateOrderQueryResult = Apollo.QueryResult<EstimateOrderQuery, EstimateOrderQueryVariables>;
@@ -0,0 +1,51 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type MarketMarkPriceQueryVariables = Types.Exact<{
+  marketId: Types.Scalars['ID'];
+}>;
+
+
+export type MarketMarkPriceQuery = { __typename?: 'Query', market?: { __typename?: 'Market', decimalPlaces: number, data?: { __typename?: 'MarketData', markPrice: string } | null } | null };
+
+
+export const MarketMarkPriceDocument = gql`
+    query MarketMarkPrice($marketId: ID!) {
+  market(id: $marketId) {
+    decimalPlaces
+    data {
+      markPrice
+    }
+  }
+}
+    `;
+
+/**
+ * __useMarketMarkPriceQuery__
+ *
+ * To run a query within a React component, call `useMarketMarkPriceQuery` and pass it any options that fit your needs.
+ * When your component renders, `useMarketMarkPriceQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useMarketMarkPriceQuery({
+ *   variables: {
+ *      marketId: // value for 'marketId'
+ *   },
+ * });
+ */
+export function useMarketMarkPriceQuery(baseOptions: Apollo.QueryHookOptions<MarketMarkPriceQuery, MarketMarkPriceQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MarketMarkPriceQuery, MarketMarkPriceQueryVariables>(MarketMarkPriceDocument, options);
+      }
+export function useMarketMarkPriceLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MarketMarkPriceQuery, MarketMarkPriceQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MarketMarkPriceQuery, MarketMarkPriceQueryVariables>(MarketMarkPriceDocument, options);
+        }
+export type MarketMarkPriceQueryHookResult = ReturnType<typeof useMarketMarkPriceQuery>;
+export type MarketMarkPriceLazyQueryHookResult = ReturnType<typeof useMarketMarkPriceLazyQuery>;
+export type MarketMarkPriceQueryResult = Apollo.QueryResult<MarketMarkPriceQuery, MarketMarkPriceQueryVariables>;
@@ -0,0 +1,68 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type MarketPositionsQueryVariables = Types.Exact<{
+  partyId: Types.Scalars['ID'];
+}>;
+
+
+export type MarketPositionsQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, accounts?: Array<{ __typename?: 'Account', type: Types.AccountType, balance: string, asset: { __typename?: 'Asset', decimals: number }, market?: { __typename?: 'Market', id: string } | null }> | null, positionsConnection: { __typename?: 'PositionConnection', edges?: Array<{ __typename?: 'PositionEdge', node: { __typename?: 'Position', openVolume: string, market: { __typename?: 'Market', id: string } } }> | null } } | null };
+
+
+export const MarketPositionsDocument = gql`
+    query MarketPositions($partyId: ID!) {
+  party(id: $partyId) {
+    id
+    accounts {
+      type
+      balance
+      asset {
+        decimals
+      }
+      market {
+        id
+      }
+    }
+    positionsConnection {
+      edges {
+        node {
+          openVolume
+          market {
+            id
+          }
+        }
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useMarketPositionsQuery__
+ *
+ * To run a query within a React component, call `useMarketPositionsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useMarketPositionsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useMarketPositionsQuery({
+ *   variables: {
+ *      partyId: // value for 'partyId'
+ *   },
+ * });
+ */
+export function useMarketPositionsQuery(baseOptions: Apollo.QueryHookOptions<MarketPositionsQuery, MarketPositionsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MarketPositionsQuery, MarketPositionsQueryVariables>(MarketPositionsDocument, options);
+      }
+export function useMarketPositionsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MarketPositionsQuery, MarketPositionsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MarketPositionsQuery, MarketPositionsQueryVariables>(MarketPositionsDocument, options);
+        }
+export type MarketPositionsQueryHookResult = ReturnType<typeof useMarketPositionsQuery>;
+export type MarketPositionsLazyQueryHookResult = ReturnType<typeof useMarketPositionsLazyQuery>;
+export type MarketPositionsQueryResult = Apollo.QueryResult<MarketPositionsQuery, MarketPositionsQueryVariables>;
@@ -0,0 +1,71 @@
+import * as Types from '@vegaprotocol/types/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type PartyMarketDataQueryVariables = Types.Exact<{
+  partyId: Types.Scalars['ID'];
+}>;
+
+
+export type PartyMarketDataQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, accounts?: Array<{ __typename?: 'Account', type: Types.AccountType, balance: string, asset: { __typename?: 'Asset', id: string, decimals: number }, market?: { __typename?: 'Market', id: string } | null }> | null, marginsConnection: { __typename?: 'MarginConnection', edges?: Array<{ __typename?: 'MarginEdge', node: { __typename?: 'MarginLevels', initialLevel: string, maintenanceLevel: string, searchLevel: string, market: { __typename?: 'Market', id: string } } }> | null } } | null };
+
+
+export const PartyMarketDataDocument = gql`
+    query PartyMarketData($partyId: ID!) {
+  party(id: $partyId) {
+    id
+    accounts {
+      type
+      balance
+      asset {
+        id
+        decimals
+      }
+      market {
+        id
+      }
+    }
+    marginsConnection {
+      edges {
+        node {
+          market {
+            id
+          }
+          initialLevel
+          maintenanceLevel
+          searchLevel
+        }
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __usePartyMarketDataQuery__
+ *
+ * To run a query within a React component, call `usePartyMarketDataQuery` and pass it any options that fit your needs.
+ * When your component renders, `usePartyMarketDataQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = usePartyMarketDataQuery({
+ *   variables: {
+ *      partyId: // value for 'partyId'
+ *   },
+ * });
+ */
+export function usePartyMarketDataQuery(baseOptions: Apollo.QueryHookOptions<PartyMarketDataQuery, PartyMarketDataQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<PartyMarketDataQuery, PartyMarketDataQueryVariables>(PartyMarketDataDocument, options);
+      }
+export function usePartyMarketDataLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<PartyMarketDataQuery, PartyMarketDataQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<PartyMarketDataQuery, PartyMarketDataQueryVariables>(PartyMarketDataDocument, options);
+        }
+export type PartyMarketDataQueryHookResult = ReturnType<typeof usePartyMarketDataQuery>;
+export type PartyMarketDataLazyQueryHookResult = ReturnType<typeof usePartyMarketDataLazyQuery>;
+export type PartyMarketDataQueryResult = Apollo.QueryResult<PartyMarketDataQuery, PartyMarketDataQueryVariables>;
@@ -22,7 +22,7 @@ const useColumnDefinitions = ({ isMobile }: Props) => {
        headerName: t('Markets'),
        headerClass: 'uppercase',
        minWidth: isMobile ? 160 : 350,
-        field: 'name',
+        field: 'tradableInstrument.instrument.name',
        cellClass: 'overflow-visible',
        cellRenderer: ({ data }: { data: SimpleMarketsType }) => (
          <MarketNameRenderer market={data} isMobile={isMobile} />
@@ -93,13 +93,13 @@ const useColumnDefinitions = ({ isMobile }: Props) => {
      {
        colId: 'status',
        headerName: t('Status'),
-        field: 'data.market.state',
+        field: 'state',
        headerClass: 'uppercase',
        minWidth: 100,
        cellRenderer: ({ data }: { data: SimpleMarkets_markets }) => (
          <div className="uppercase flex h-full items-center justify-center">
-            <div className="border text-center px-2 md:px-8 leading-4 md:leading-6">
-              {MARKET_STATES_MAP[data.data?.market.state || '']}
+            <div className="border text-center px-2 md:px-6 leading-4 md:leading-6">
+              {MARKET_STATES_MAP[data.state || '']}
            </div>
          </div>
        ),
@@ -27,7 +27,7 @@ const useMarketsFilterData = (
        : params.state
        ? params.state
        : MarketState.STATE_ACTIVE;
-    if (state && state !== item.data?.market.state) {
+    if (state && state !== item.state) {
      return false;
    }
    return true;
@@ -2,9 +2,9 @@
 NX_CHAIN_EXPLORER_URL=https://explorer.vega.trading/.netlify/functions/chain-explorer-api
 NX_TENDERMINT_URL=https://mainnet-observer-proxy01.ops.vega.xyz/
 NX_TENDERMINT_WEBSOCKET_URL=wss://mainnet-observer-proxy01.ops.vega.xyz/websocket
-NX_VEGA_URL=https://api.token.vega.xyz/query
+NX_VEGA_URL=https://api.vega.xyz/query
 NX_VEGA_ENV=MAINNET
-NX_VEGA_REST=https://api.token.vega.xyz/
+NX_VEGA_REST=https://api.vega.xyz/

 # App flags
 NX_EXPLORER_ASSETS=1
@@ -1,6 +1,6 @@
 # App configuration variables
 NX_CHAIN_EXPLORER_URL=https://explorer.vega.trading/.netlify/functions/chain-explorer-api
-NX_TENDERMINT_URL=https://tm.n06.testnet.vega.xyz/tm
+NX_TENDERMINT_URL=https://tm.n07.testnet.vega.xyz/tm
 NX_TENDERMINT_WEBSOCKET_URL=wss://lb.testnet.vega.xyz/tm/websocket
 NX_VEGA_URL=https://api.n11.testnet.vega.xyz/graphql
 NX_VEGA_ENV=TESTNET
@@ -1,20 +1,148 @@
-import '../support/common.functions';
+context('Asset page', { tags: '@regression' }, function () {
+  before('gather system asset information', function () {
+    cy.get_asset_information().as('assetsInfo');
+  });

-context('Asset page', function () {
  describe('Verify elements on page', function () {
    const assetsNavigation = 'a[href="/assets"]';
    const assetHeader = '[data-testid="asset-header"]';
+    const jsonSection = '.language-json';

-    it('Assets page is displayed', function () {
+    before('Navigate to assets page', function () {
      cy.visit('/');
      cy.get(assetsNavigation).click();
-      cy.common_validate_blocks_data_displayed(assetHeader);
+
+      // Check we have enough enough assets
+      const assetNames = Object.keys(this.assetsInfo);
+      assert.isAtLeast(
+        assetNames.length,
+        5,
+        'Ensuring we have at least 5 assets to test'
+      );
    });

-    it('Assets page displayed in mobile', function () {
+    it('should be able to see assets page sections', function () {
+      const assetNames = Object.keys(this.assetsInfo);
+      assetNames.forEach((assetName) => {
+        cy.get(assetHeader)
+          .contains(assetName)
+          .should('be.visible')
+          .next()
+          .within(() => {
+            cy.get(jsonSection).should('not.be.empty');
+          });
+      });
+    });
+
+    it('should be able to see all asset details displayed in JSON', function () {
+      const assetNames = Object.keys(this.assetsInfo);
+      assetNames.forEach((assetName) => {
+        cy.get(assetHeader)
+          .contains(assetName)
+          .next()
+          .within(() => {
+            cy.get(jsonSection)
+              .invoke('text')
+              .convert_string_json_to_js_object()
+              .then((assetsListedInJson) => {
+                const assetInfo = this.assetsInfo[assetName];
+
+                assert.equal(assetsListedInJson.name, assetInfo.name);
+                assert.equal(assetsListedInJson.id, assetInfo.id);
+                assert.equal(assetsListedInJson.decimals, assetInfo.decimals);
+                assert.equal(assetsListedInJson.symbol, assetInfo.symbol);
+                assert.equal(
+                  assetsListedInJson.source.__typename,
+                  assetInfo.source.__typename
+                );
+
+                if (assetInfo.source.__typename == 'ERC20') {
+                  assert.equal(
+                    assetsListedInJson.source.contractAddress,
+                    assetInfo.source.contractAddress
+                  );
+                }
+
+                if (assetInfo.source.__typename == 'BuiltinAsset') {
+                  assert.equal(
+                    assetsListedInJson.source.maxFaucetAmountMint,
+                    assetInfo.source.maxFaucetAmountMint
+                  );
+                }
+
+                let knownAssetTypes = ['BuiltinAsset', 'ERC20'];
+                assert.include(
+                  knownAssetTypes,
+                  assetInfo.source.__typename,
+                  `Checking that current asset type of ${assetInfo.source.__typename} /
+                  is one of: ${knownAssetTypes}: /
+                  If fail then we need to add extra tests for un-encountered asset types`
+                );
+              });
+          });
+      });
+    });
+
+    it('should be able to switch assets 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(assetsNavigation)
+        .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(assetsNavigation)
+        .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('should be able to see assets page displayed in mobile', function () {
      cy.common_switch_to_mobile_and_click_toggle();
      cy.get(assetsNavigation).click();
-      cy.common_validate_blocks_data_displayed(assetHeader);
+
+      const assetNames = Object.keys(this.assetsInfo);
+      assetNames.forEach((assetName) => {
+        cy.get(assetHeader)
+          .contains(assetName)
+          .should('be.visible')
+          .next()
+          .within(() => {
+            cy.get(jsonSection).should('not.be.empty');
+          });
+      });
    });
  });
 });
@@ -1,35 +1,267 @@
-import '../support/common.functions';
-
-context('Network parameters page', function () {
-  before('visit token home page', function () {
-    cy.visit('/');
+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 () {
    const networkParametersNavigation = 'a[href="/network-parameters"]';
+    const networkParametersHeader = '[data-testid="network-param-header"]';
+    const tableRows = '[data-testid="key-value-table-row"]';

-    beforeEach('Navigate to network parameter page', function () {
+    before('navigate to network parameter page', function () {
+      cy.visit('/');
      cy.get(networkParametersNavigation).click();
    });

-    it('Network paremeter page is displayed', function () {
-      verifyNetworkParametersPageDisplayed();
+    it('should show network parameter heading at top of page', function () {
+      cy.get(networkParametersHeader)
+        .should('have.text', 'Network Parameters')
+        .and('be.visible');
    });

-    it('Network parameter page displayed on mobile', function () {
+    it('should list each of the network parameters available', function () {
+      cy.get_network_parameters().then((network_parameters) => {
+        const numberOfNetworkParametersInSystem =
+          Object.keys(network_parameters).length;
+        cy.get(tableRows).should(
+          'have.length',
+          numberOfNetworkParametersInSystem
+        );
+      });
+    });
+
+    it('should list each network parameter displayed with json - in the correct format', function () {
+      cy.get_network_parameters().then((network_parameters) => {
+        network_parameters = Object.entries(network_parameters);
+        network_parameters.forEach((network_parameter) => {
+          const parameterName = network_parameter[0];
+          const parameterValue = network_parameter[1];
+          if (this.networkParameterFormat.json.includes(parameterName)) {
+            cy.get(tableRows)
+              .contains(parameterName)
+              .should('be.visible')
+              .next()
+              .invoke('text')
+              .convert_string_json_to_js_object()
+              .then((jsonOnPage) => {
+                cy.wrap(parameterValue, { log: false })
+                  .convert_string_json_to_js_object()
+                  .then((jsonInSystem) =>
+                    assert.deepEqual(
+                      jsonOnPage,
+                      jsonInSystem,
+                      `Checking ${parameterName} has the correct value of ${jsonInSystem}`
+                    )
+                  );
+              });
+          }
+        });
+      });
+    });
+
+    it('should list each network parameter displayed as a percentage - in the correct format', function () {
+      cy.get_network_parameters().then((network_parameters) => {
+        network_parameters = Object.entries(network_parameters);
+        network_parameters.forEach((network_parameter) => {
+          const parameterName = network_parameter[0];
+          const parameterValue = network_parameter[1];
+          if (this.networkParameterFormat.percentage.includes(parameterName)) {
+            const formattedPercentageParameter =
+              (parseFloat(parameterValue) * 100).toFixed(0) + '%';
+            cy.get(tableRows)
+              .contains(parameterName)
+              .should('be.visible')
+              .next()
+              .invoke('text')
+              .then((parameterValueOnPage) => {
+                assert.equal(
+                  parameterValueOnPage,
+                  formattedPercentageParameter,
+                  `Checking ${parameterName} has the correct value of ${formattedPercentageParameter}`
+                );
+                cy.contains(parameterValueOnPage).should('be.visible');
+              });
+          }
+        });
+      });
+    });
+
+    it('should list each network parameter displayed as an id - in the correct format', function () {
+      cy.get_network_parameters().then((network_parameters) => {
+        network_parameters = Object.entries(network_parameters);
+        network_parameters.forEach((network_parameter) => {
+          const parameterName = network_parameter[0];
+          const parameterValue = network_parameter[1];
+          if (this.networkParameterFormat.id.includes(parameterName)) {
+            cy.get(tableRows)
+              .contains(parameterName)
+              .should('be.visible')
+              .next()
+              .should('contain', parameterValue)
+              .and('be.visible')
+              .invoke('text');
+          }
+        });
+      });
+    });
+
+    it('should list each network parameter displayed as a date - in the correct format', function () {
+      cy.get_network_parameters().then((network_parameters) => {
+        network_parameters = Object.entries(network_parameters);
+        network_parameters.forEach((network_parameter) => {
+          const parameterName = network_parameter[0];
+          const parameterValue = network_parameter[1];
+          if (this.networkParameterFormat.date.includes(parameterName)) {
+            cy.get(tableRows)
+              .contains(parameterName)
+              .should('be.visible')
+              .next()
+              .should('contain', parameterValue)
+              .and('be.visible');
+          }
+        });
+      });
+    });
+
+    it('should list each network parameter displayed as a duration - in the correct format', function () {
+      cy.get_network_parameters().then((network_parameters) => {
+        network_parameters = Object.entries(network_parameters);
+        network_parameters.forEach((network_parameter) => {
+          const parameterName = network_parameter[0];
+          const parameterValue = network_parameter[1];
+          if (this.networkParameterFormat.duration.includes(parameterName)) {
+            cy.get(tableRows)
+              .contains(parameterName)
+              .should('be.visible')
+              .next()
+              .should('contain', parameterValue)
+              .and('be.visible');
+          }
+        });
+      });
+    });
+
+    it('should list each network parameter displayed as a currency value with four decimals - in the correct format', function () {
+      cy.get_network_parameters().then((network_parameters) => {
+        network_parameters = Object.entries(network_parameters);
+        network_parameters.forEach((network_parameter) => {
+          const parameterName = network_parameter[0];
+          const parameterValue = network_parameter[1];
+          if (this.networkParameterFormat.fiveDecimal.includes(parameterName)) {
+            cy.convert_number_to_four_decimal(parameterValue)
+              .add_commas_to_number_if_large_enough()
+              .then((parameterValueFormatted) => {
+                cy.get(tableRows)
+                  .contains(parameterName)
+                  .should('be.visible')
+                  .next()
+                  .invoke('text')
+                  .then((parameterValueOnPage) => {
+                    assert.equal(
+                      parameterValueOnPage,
+                      parameterValueFormatted,
+                      `Checking ${parameterName} has the correct value of ${parameterValueFormatted}`
+                    );
+                    cy.contains(parameterValueOnPage).should('be.visible');
+                  });
+              });
+          }
+        });
+      });
+    });
+
+    it('should list each network parameter displayed as a currency value with eighteen decimals - in the correct format', function () {
+      cy.get_network_parameters().then((network_parameters) => {
+        network_parameters = Object.entries(network_parameters);
+        network_parameters.forEach((network_parameter) => {
+          const parameterName = network_parameter[0];
+          const parameterValue = network_parameter[1];
+          if (
+            this.networkParameterFormat.eighteenDecimal.includes(parameterName)
+          ) {
+            cy.convert_number_to_eighteen_decimal(parameterValue)
+              .add_commas_to_number_if_large_enough()
+              .then((parameterValueFormatted) => {
+                cy.get(tableRows)
+                  .contains(parameterName)
+                  .should('be.visible')
+                  .next()
+                  .invoke('text')
+                  .then((parameterValueOnPage) => {
+                    assert.equal(
+                      parameterValueOnPage,
+                      parameterValueFormatted,
+                      `Checking ${parameterName} has the correct value of ${parameterValueFormatted}`
+                    );
+                    cy.contains(parameterValueOnPage).should('be.visible');
+                  });
+              });
+          }
+        });
+      });
+    });
+
+    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 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(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('should be able to see network parameters - on mobile', function () {
      cy.common_switch_to_mobile_and_click_toggle();
      cy.get(networkParametersNavigation).click();
-      verifyNetworkParametersPageDisplayed();
+      cy.get_network_parameters().then((network_parameters) => {
+        network_parameters = Object.entries(network_parameters);
+        network_parameters.forEach((network_parameter) => {
+          const parameterName = network_parameter[0];
+          cy.get(tableRows)
+            .contains(parameterName)
+            .should('be.visible')
+            .next()
+            .should('not.be.empty')
+            .and('be.visible');
+        });
+      });
    });
  });
-
-  function verifyNetworkParametersPageDisplayed() {
-    cy.get('[data-testid="network-param-header"]').should(
-      'have.text',
-      'Network Parameters'
-    );
-    cy.common_verify_json_parameters(18);
-    cy.common_verify_json_string_values(6);
-    cy.common_verify_json_int_values(7);
-  }
 });
@@ -0,0 +1,264 @@
+const vegaWalletPublicKey = Cypress.env('vegaWalletPublicKey');
+const partiesMenuHeader = 'a[href="/parties"]';
+const partiesSearchBox = '[data-testid="party-input"]';
+const partiesSearchAction = '[data-testid="go-submit"]';
+const partiesJsonSection = '[data-testid="parties-json"]';
+const txTimeout = Cypress.env('txTimeout');
+
+let assetData = {
+  fUSDC: { id: 'fUSDC', name: 'USDC (fake)', amount: '10' },
+  fBTC: { id: 'fBTC', name: 'BTC (fake)', amount: '6' },
+  fEURO: { id: 'fEURO', name: 'EURO (fake)', amount: '8' },
+  fDAI: { id: 'fDAI', name: 'DAI (fake)', amount: '2' },
+};
+
+const assetsInTest = Object.keys(assetData);
+
+context('Parties page', { tags: '@regression' }, function () {
+  before('send-faucet assets to connected vega wallet', function () {
+    cy.vega_wallet_import();
+    assetsInTest.forEach((asset) => {
+      cy.vega_wallet_receive_fauceted_asset(
+        assetData[asset].name,
+        assetData[asset].amount,
+        vegaWalletPublicKey
+      );
+    });
+    cy.visit('/');
+  });
+
+  describe('Verify parties page content', function () {
+    before('navigate to parties page and search for party', function () {
+      cy.get(partiesMenuHeader).click();
+      // Deliberate slow entry of party id/key - enabling transactions to sync
+      cy.get(partiesSearchBox).type(vegaWalletPublicKey, { delay: 120 });
+      cy.get(partiesSearchAction).click();
+      cy.get_connected_parties_accounts().as('party_accounts');
+
+      // Ensure balance of each party asset is correct
+      cy.get('@party_accounts').then((accounts) => {
+        assetsInTest.forEach((asset) => {
+          cy.get_asset_decimals(assetData[asset].id).then((assetDecimals) => {
+            assert.equal(
+              accounts[assetData[asset].id].balance,
+              assetData[asset].amount + assetDecimals,
+              `Checking ${assetData[asset].id} faucet was successfull`
+            );
+          });
+        });
+      });
+    });
+
+    it('should see party address id - having searched', function () {
+      cy.getByTestId('parties-header')
+        .siblings()
+        .contains(vegaWalletPublicKey.substring(0, 14))
+        .should('be.visible');
+    });
+
+    it('should see each asset and balance - within asset data section', function () {
+      assetsInTest.forEach((asset) => {
+        cy.contains(assetData[asset].name, txTimeout).should('be.visible');
+        cy.contains(assetData[asset].name)
+          .siblings()
+          .contains(assetData[asset].id)
+          .should('be.visible');
+        cy.contains(assetData[asset].name, txTimeout)
+          .parent()
+          .siblings()
+          .within(() => {
+            cy.get_asset_decimals(asset).then((assetDecimals) => {
+              cy.contains_exactly(
+                assetData[asset].amount + '.' + assetDecimals
+              ).should('be.visible');
+            });
+          });
+      });
+    });
+
+    it(
+      'should be able to copy the party address id',
+      { browser: 'chrome' },
+      function () {
+        cy.monitor_clipboard().as('clipboard');
+        cy.getByTestId('parties-header')
+          .next()
+          .within(() => {
+            cy.get('button').click();
+          });
+        cy.get('@clipboard')
+          .get_copied_text_from_clipboard()
+          .should('equal', vegaWalletPublicKey);
+      }
+    );
+
+    it(
+      'should be able to copy an asset id',
+      { browser: 'chrome' },
+      function () {
+        cy.monitor_clipboard().as('clipboard');
+
+        cy.contains(assetData.fDAI.name, txTimeout).should('be.visible');
+        cy.contains(assetData.fDAI.name)
+          .parent()
+          .parent()
+          .siblings()
+          .within(() => {
+            cy.get('[data-state="closed"]').last().click({ force: true });
+          });
+
+        cy.get('@clipboard')
+          .get_copied_text_from_clipboard()
+          .should('equal', assetData.fDAI.id);
+      }
+    );
+
+    it('should be able to see JSON of each asset containing correct balance and decimals', function () {
+      cy.get(partiesJsonSection).should('be.visible');
+
+      assetsInTest.forEach((assetInTest) => {
+        cy.get(partiesJsonSection)
+          .invoke('text')
+          .convert_string_json_to_js_object()
+          .get_party_accounts_data_from_js_object()
+          .then((accountsListedInJson) => {
+            cy.get_asset_information().then((assetsInfo) => {
+              const assetInfo =
+                assetsInfo[accountsListedInJson[assetInTest].asset.name];
+
+              assert.equal(
+                accountsListedInJson[assetInTest].asset.name,
+                assetInfo.name
+              );
+              assert.equal(
+                accountsListedInJson[assetInTest].asset.id,
+                assetInfo.id
+              );
+              assert.equal(
+                accountsListedInJson[assetInTest].asset.decimals,
+                assetInfo.decimals
+              );
+              assert.equal(
+                accountsListedInJson[assetInTest].asset.symbol,
+                assetInfo.symbol
+              );
+              assert.equal(
+                accountsListedInJson[assetInTest].asset.source.__typename,
+                assetInfo.source.__typename
+              );
+              cy.get_asset_decimals(assetInTest).then((assetDecimals) => {
+                assert.equal(
+                  accountsListedInJson[assetInTest].balance,
+                  assetData[assetInTest].amount + assetDecimals
+                );
+              });
+            });
+          });
+      });
+    });
+
+    it('should be able to switch parties 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(partiesMenuHeader)
+        .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(partiesMenuHeader)
+        .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);
+    });
+
+    after(
+      'teardown environment to prevent test data bleeding into other tests',
+      function () {
+        if (Cypress.env('TEARDOWN_NETWORK_AFTER_FLOWS')) {
+          cy.restart_vegacapsule_network();
+        }
+      }
+    );
+
+    Cypress.Commands.add('get_asset_decimals', (assetID) => {
+      cy.get_asset_information().then((assetsInfo) => {
+        const assetDecimals = assetsInfo[assetData[assetID].name].decimals;
+        let decimals = '';
+        for (let i = 0; i < assetDecimals; i++) decimals += '0';
+        return decimals;
+      });
+    });
+
+    Cypress.Commands.add('get_connected_parties_accounts', () => {
+      const mutation =
+        '{partiesConnection {edges{node{accountsConnection{edges{node{\
+          balance type asset {id symbol decimals}}}}}}}}';
+      cy.request({
+        method: 'POST',
+        url: `http://localhost:3028/query`,
+        body: {
+          query: mutation,
+        },
+        headers: { 'content-type': 'application/json' },
+      })
+        .its(
+          `body.data.partiesConnection.edges.1.node.accountsConnection.edges`
+        )
+        .then(function (response) {
+          let accounts = {};
+          response.forEach((account) => {
+            accounts[account.node.asset.id] = account.node;
+          });
+          return accounts;
+        });
+    });
+
+    Cypress.Commands.add(
+      'get_party_accounts_data_from_js_object',
+      { prevSubject: true },
+      (jsObject) => {
+        const accounts = jsObject.party.accounts.reduce(function (
+          account,
+          entry
+        ) {
+          account[entry.asset.id] = entry;
+          return account;
+        },
+        {});
+        return accounts;
+      }
+    );
+  });
+});
@@ -1,27 +1,300 @@
-import '../support/common.functions';
+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('/');
+    cy.get(validatorMenuHeading).click();
+    cy.get_validators().as('validators');
+    cy.get_nodes().as('nodes');
+  });

-context('Validator page', function () {
  describe('Verify elements on page', function () {
-    const validatorNavigation = 'a[href="/validators"]';
-
-    it('Validator page is displayed', function () {
-      cy.visit('/');
-      cy.get(validatorNavigation).click();
-      validateValidatorsDisplayed();
-    });
-
-    it('Validator page is displayed on mobile', function () {
-      cy.common_switch_to_mobile_and_click_toggle();
-      cy.get(validatorNavigation).click();
-      validateValidatorsDisplayed();
-    });
-
-    function validateValidatorsDisplayed() {
-      cy.get('[data-testid="tendermint-header"]').should(
-        'have.text',
-        'Tendermint data'
+    before('Ensure at least two validators are present', function () {
+      assert.isAtLeast(
+        this.validators.length,
+        2,
+        'Ensuring at least two validators exist'
      );
-      cy.get('[data-testid="tendermint-data"]').should('not.be.empty');
-    }
+    });
+
+    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');
+              });
+            });
+        });
+    });
+
+    it('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.nodes[index];
+
+                // 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 =
+        '{nodes { 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.nodes`)
+        .then(function (response) {
+          let nodes = [];
+          response.forEach((node) => {
+            nodes.push(node);
+          });
+          return nodes;
+        });
+    });
  });
 });
@@ -1,17 +1,12 @@
-NX_CHAIN_EXPLORER_URL=https://explorer.vega.trading/.netlify/functions/chain-explorer-api
-NX_TENDERMINT_URL=http://localhost:26617
-NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26617/websocket
-NX_VEGA_URL=http://localhost:3028/query
-NX_VEGA_ENV=CUSTOM
-
 NX_CHAIN_EXPLORER_URL=https://explorer.vega.trading/.netlify/functions/chain-explorer-api
 NX_TENDERMINT_URL=https://n01.stagnet3.vega.xyz/tm
 NX_TENDERMINT_WEBSOCKET_URL=wss://n01.stagnet3.vega.xyz/tm/websocket
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/stagnet3-network.json
-NX_VEGA_URL=https://api.n01.stagnet3.vega.xyz/graphql
-NX_VEGA_NETWORKS='{"TESTNET":"https://explorer.fairground.wtf","MAINNET":"https://explorer.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
+NX_BLOCK_EXPLORER=

 # App flags
 NX_EXPLORER_ASSETS=1
@@ -22,4 +17,4 @@ NX_EXPLORER_PARTIES=1
 NX_EXPLORER_VALIDATORS=1
 NX_EXPLORER_MARKETS=1
 NX_EXPLORER_ORACLES=1
-NX_EXPLORER_TXS_LIST=1
+NX_EXPLORER_TXS_LIST=0
@@ -3,7 +3,7 @@ NX_CHAIN_EXPLORER_URL=https://explorer.vega.trading/.netlify/functions/chain-exp
 NX_TENDERMINT_URL=http://localhost:26617
 NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26617/websocket
 NX_VEGA_URL=http://localhost:3028/query
-NX_VEGA_NETWORKS='{"TESTNET":"https://explorer.fairground.wtf","MAINNET":"https://explorer.vega.xyz"}'
+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

@@ -4,6 +4,7 @@ NX_TENDERMINT_URL=https://n04.d.vega.xyz/tm
 NX_TENDERMINT_WEBSOCKET_URL=wss://n04.d.vega.xyz/tm/websocket
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/devnet-network.json
 NX_VEGA_URL=https://api.n04.d.vega.xyz/graphql
-NX_VEGA_NETWORKS='{"TESTNET":"https://explorer.fairground.wtf","MAINNET":"https://explorer.vega.xyz"}'
+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
@@ -1,9 +1,13 @@
 # App configuration variables
 NX_CHAIN_EXPLORER_URL=https://explorer.vega.trading/.netlify/functions/chain-explorer-api
-NX_TENDERMINT_URL=https://mainnet-observer-proxy01.ops.vega.xyz/
-NX_TENDERMINT_WEBSOCKET_URL=wss://mainnet-observer-proxy01.ops.vega.xyz/websocket
+NX_TENDERMINT_URL=https://be.explorer.vega.xyz
+NX_TENDERMINT_WEBSOCKET_URL=wss://be.explorer.vega.xyz
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/mainnet-network.json
-NX_VEGA_URL=https://api.token.vega.xyz/query
-NX_VEGA_NETWORKS='{"TESTNET":"https://explorer.fairground.wtf","MAINNET":"https://explorer.vega.xyz"}'
+NX_VEGA_URL=https://api.vega.xyz/query
+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/
+
+# 0.53.0 misreports total nodes, including ex-validators
+NX_HACK_53_TOTAL_NODES=7
@@ -0,0 +1,20 @@
+# App configuration variables
+NX_TENDERMINT_URL=https://tm.be.mainnet-mirror.vega.xyz
+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
+
+# App flags
+NX_EXPLORER_ASSETS=1
+NX_EXPLORER_GENESIS=1
+NX_EXPLORER_GOVERNANCE=1
+NX_EXPLORER_NETWORK_PARAMETERS=1
+NX_EXPLORER_PARTIES=1
+NX_EXPLORER_VALIDATORS=1
+NX_EXPLORER_MARKETS=0
+NX_EXPLORER_ORACLES=0
+NX_EXPLORER_TXS_LIST=1
@@ -0,0 +1,11 @@
+# App configuration variables
+NX_VEGA_URL=https://api.sandbox.vega.xyz/graphql
+NX_VEGA_ENV=SANDBOX
+NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/sandbox-network.json
+NX_VEGA_EXPLORER_URL=https://sandbox.explorer.vega.xyz
+NX_VEGA_DOCS_URL=https://docs.vega.xyz/docs/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.n01.sandbox.vega.xyz
+NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n01.sandbox.vega.xyz/websocket
@@ -0,0 +1,13 @@
+NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
+NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+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_URL=https://api.n00.stagnet1.vega.xyz/graphql
+NX_VEGA_WALLET_URL=http://localhost:1789
+NX_TENDERMINT_URL=https://tm.n01.stagnet1.vega.xyz
+NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n01.stagnet1.vega.xyz/websocket
+NX_BLOCK_EXPLORER=https://be.stagnet1.vega.xyz/rest
@@ -4,6 +4,7 @@ NX_TENDERMINT_URL=https://n01.stagnet3.vega.xyz/tm
 NX_TENDERMINT_WEBSOCKET_URL=wss://n01.stagnet3.vega.xyz/tm/websocket
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/stagnet3-network.json
 NX_VEGA_URL=https://api.n01.stagnet3.vega.xyz/graphql
-NX_VEGA_NETWORKS='{"TESTNET":"https://explorer.fairground.wtf","MAINNET":"https://explorer.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_BLOCK_EXPLORER=https://blockexplorer.n01.stagnet3.vega.xyz/rest
@@ -1,9 +1,10 @@
 # App configuration variables
 NX_CHAIN_EXPLORER_URL=https://explorer.vega.trading/.netlify/functions/chain-explorer-api
-NX_TENDERMINT_URL=https://tm.n06.testnet.vega.xyz
-NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n06.testnet.vega.xyz/websocket
+NX_TENDERMINT_URL=https://tm.n07.testnet.vega.xyz
+NX_BLOCK_EXPLORER=https://be.testnet.vega.xyz/rest
+NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n07.testnet.vega.xyz/websocket
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/testnet-network.json
-NX_VEGA_URL=https://api.n09.testnet.vega.xyz/graphql
-NX_VEGA_NETWORKS='{"TESTNET":"https://explorer.fairground.wtf","MAINNET":"https://explorer.vega.xyz"}'
+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.n09.testnet.vega.xyz/graphql
@@ -5,3 +5,4 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26607/websocket
 NX_VEGA_URL=http://localhost:3003/query
 NX_VEGA_ENV=CUSTOM
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
+NX_BLOCK_EXPLORER=
@@ -1,6 +1,6 @@
 {
  "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*", "__generated__"],
+  "ignorePatterns": ["!**/*", "__generated__", "__generated___"],
  "overrides": [
    {
      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
@@ -14,5 +14,8 @@
      "files": ["*.js", "*.jsx"],
      "rules": {}
    }
-  ]
+  ],
+  "env": {
+    "jest": true
+  }
 }
@@ -45,7 +45,7 @@ function App() {
              menuOpen && 'h-[100vh] overflow-hidden'
            } antialiased m-0 bg-white dark:bg-black text-black dark:text-white`}
          >
-            <div className="min-h-[100vh] max-w-[1300px] grid grid-rows-[repeat(2,_auto)_1fr] grid-cols-[1fr] md:grid-rows-[auto_minmax(700px,_1fr)] md:grid-cols-[300px_1fr] border-neutral-700 dark:border-neutral-300 lg:border-l lg:border-r mx-auto">
+            <div className="grid grid-rows-[repeat(2,_auto)_1fr] grid-cols-[1fr] md:grid-rows-[auto_minmax(700px,_1fr)] md:grid-cols-[300px_1fr] border-neutral-700 dark:border-neutral-300 lg:border-l lg:border-r mx-auto">
              <Header
                theme={theme}
                toggleTheme={toggleTheme}
@@ -2,13 +2,24 @@ import { render, screen } from '@testing-library/react';
 import { Header } from './header';
 import { MemoryRouter } from 'react-router-dom';

+jest.mock('@vegaprotocol/environment', () => ({
+  NetworkSwitcher: () => (
+    <div data-testid="network-switcher">NetworkSwitcher</div>
+  ),
+}));
+
 jest.mock('../search', () => ({
  Search: () => <div data-testid="search">OrderList</div>,
 }));

 const renderComponent = () => (
  <MemoryRouter>
-    <Header />
+    <Header
+      theme="dark"
+      toggleTheme={jest.fn()}
+      menuOpen={false}
+      setMenuOpen={jest.fn()}
+    />
  </MemoryRouter>
 );

@@ -25,4 +36,10 @@ describe('Header', () => {

    expect(screen.getByTestId('search')).toBeInTheDocument();
  });
+
+  it('should render network switcher', () => {
+    render(renderComponent());
+
+    expect(screen.getByTestId('network-switcher')).toBeInTheDocument();
+  });
 });
@@ -5,6 +5,7 @@ import { t } from '@vegaprotocol/react-helpers';
 import { Search } from '../search';
 import { Routes } from '../../routes/route-names';
 import type { Dispatch, SetStateAction } from 'react';
+import { NetworkSwitcher } from '@vegaprotocol/environment';

 interface ThemeToggleProps {
  theme: 'light' | 'dark';
@@ -23,27 +24,31 @@ export const Header = ({
    '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'
+    'border-b border-neutral-700 dark:border-neutral-300 bg-black',
+    'dark text-white'
  );
  return (
    <header className={headerClasses}>
-      <Link to={Routes.HOME}>
-        <h1
-          className="text-3xl font-alpha uppercase calt mb-0"
-          data-testid="explorer-header"
-        >
-          {t('Vega Explorer')}
-        </h1>
-      </Link>
+      <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"
+        className="md:hidden text-white"
        onClick={() => setMenuOpen(!menuOpen)}
      >
        <Icon name={menuOpen ? 'cross' : 'menu'} />
      </button>
      <Search />
-      <ThemeSwitcher theme={theme} onToggle={toggleTheme} />
+      <ThemeSwitcher theme={theme} onToggle={toggleTheme} className="-my-4" />
    </header>
  );
 };
@@ -0,0 +1 @@
+export * from './info-block';
@@ -0,0 +1,29 @@
+import { Icon, Tooltip } from '@vegaprotocol/ui-toolkit';
+import React from 'react';
+
+export interface InfoBlockProps {
+  title: string;
+  subtitle: string;
+  tooltipInfo: string;
+}
+
+export const InfoBlock = ({ title, subtitle, tooltipInfo }: InfoBlockProps) => {
+  return (
+    <div className="flex flex-col text-center	">
+      <h3 className="text-4xl">{title}</h3>
+      <p className="text-zinc-800 dark:text-zinc-300">
+        {subtitle}
+        {tooltipInfo ? (
+          <Tooltip description={tooltipInfo} align="center">
+            <span>
+              <Icon
+                name="info-sign"
+                className="ml-2 text-zinc-400 dark:text-zinc-600"
+              />
+            </span>
+          </Tooltip>
+        ) : undefined}
+      </p>
+    </div>
+  );
+};
@@ -0,0 +1 @@
+export * from './info-panel';
@@ -0,0 +1,81 @@
+import React, { useMemo } from 'react';
+import type { ReactNode } from 'react';
+import { Panel } from '../panel';
+import {
+  CopyWithTooltip,
+  Icon,
+  Intent,
+  Lozenge,
+  Tooltip,
+} from '@vegaprotocol/ui-toolkit';
+import { TruncateInline } from '../truncate/truncate';
+import { useScreenDimensions } from '@vegaprotocol/react-helpers';
+
+interface InfoPanelProps {
+  children?: ReactNode | ReactNode[];
+  title: string;
+  id: string;
+  type?: string;
+  copy?: boolean;
+}
+
+export const InfoPanel = ({
+  children,
+  title,
+  id,
+  type,
+  copy = true,
+}: InfoPanelProps) => {
+  const { screenSize } = useScreenDimensions();
+  const isTruncated = useMemo(
+    () => ['xs', 'sm', 'md', 'lg'].includes(screenSize),
+    [screenSize]
+  );
+  const isDesktop = useMemo(() => ['lg'].includes(screenSize), [screenSize]);
+  const visibleChars = useMemo(() => (isDesktop ? 20 : 10), [isDesktop]);
+  return (
+    <Panel>
+      <section className="flex justify-between items-center items-center">
+        <div>
+          <div className="flex gap-3 items-center">
+            <h3 className="text-lg font-medium">{title}</h3>
+            {isTruncated ? (
+              <TruncateInline
+                text={id}
+                startChars={visibleChars}
+                endChars={visibleChars}
+                className="text-black dark:text-zinc-200"
+              />
+            ) : (
+              <p
+                title={id}
+                className="text-black dark:text-zinc-200 truncate ..."
+              >
+                {id}
+              </p>
+            )}
+
+            {type && (
+              <Lozenge
+                className="text-xs leading-relaxed cursor-auto"
+                variant={Intent.None}
+              >
+                <Tooltip side="top" description={type} align="center">
+                  <span>{type}</span>
+                </Tooltip>
+              </Lozenge>
+            )}
+          </div>
+          <div>{children}</div>
+        </div>
+        {copy && (
+          <CopyWithTooltip text={id}>
+            <button className="bg-zinc-100 dark:bg-zinc-900 rounded-sm py-2 px-3">
+              <Icon name="duplicate" />
+            </button>
+          </CopyWithTooltip>
+        )}
+      </section>
+    </Panel>
+  );
+};
@@ -0,0 +1 @@
+export * from './nested-data-list';
@@ -0,0 +1,110 @@
+import { render, waitFor } from '@testing-library/react';
+import {
+  BORDER_COLOURS,
+  NestedDataList,
+  sortNestedDataByChildren,
+} from './nested-data-list';
+import userEvent from '@testing-library/user-event';
+
+const mockData = {
+  nonce: '5980890939790185837',
+  validatorHeartbeat: {
+    nodeId: 'e07d2cd299659590c16ec1cc1c69936ad747083c379ea6b6cfeaa6e22c8af0cb',
+    ethereumSignature: {
+      value:
+        '8b157cb43a716ad541065f643e38cd92d7b1857c7beeb7d81e878be4f9a48f5a346be973e478eba3c18907888678625ba6700b086f65406d5ce0af0cae1d419300',
+      algo: 'eth',
+      version: 0,
+    },
+    vegaSignature: {
+      value:
+        'abffba6ddf07b3a732214dd780c35c94f7f0aeb9c5e9ce7d1a3ee641926a6ac568a2ecf0160c859633d327712c7a1b1590db4245d40646559a1ab2cc44d6fa01',
+      algo: 'vega/ed25519',
+      version: 0,
+    },
+  },
+  blockHeight: '174534',
+};
+
+describe('NestedDataList', () => {
+  it('should display the parent as a button', () => {
+    const tree = render(<NestedDataList data={mockData} />);
+    const { getAllByRole } = tree;
+    expect(getAllByRole('button')[0]).toHaveTextContent('Validator Heartbeat');
+  });
+
+  it('should display the children when a row is clicked', async () => {
+    const tree = render(<NestedDataList data={mockData} />);
+    const user = userEvent.setup();
+    const { getAllByRole } = tree;
+
+    const parent = getAllByRole('listitem', { name: 'Validator Heartbeat' });
+    const nestedContainer = parent[0].querySelector('[aria-hidden]');
+    const expandBtn = parent[0].querySelector('button');
+    expect(nestedContainer).toHaveAttribute('aria-hidden', 'true');
+    await user.click(expandBtn as HTMLButtonElement);
+    await waitFor(() => nestedContainer);
+    expect(nestedContainer).toHaveAttribute('aria-hidden', 'false');
+  });
+
+  it('add border to the title of the parent', () => {
+    const tree = render(<NestedDataList data={mockData} />);
+    const { getAllByRole } = tree;
+    const parent = getAllByRole('listitem', { name: 'Validator Heartbeat' });
+    expect(parent[0]).toHaveClass('pl-4 border-l-4');
+  });
+
+  it('add a border the children with the same colour', () => {
+    const tree = render(<NestedDataList data={mockData} />);
+    const { getAllByRole } = tree;
+    const parent = getAllByRole('listitem', { name: 'Validator Heartbeat' });
+    expect(parent[0].querySelector('li')).toHaveClass('pl-4 border-l-4 pt-2');
+  });
+
+  it('should repeat the border colours in the correct order', () => {
+    const colourMockData = {
+      t0: {
+        t1: {
+          t2: {
+            t3: {
+              t4: {
+                t5: {
+                  t6: {
+                    t7: {
+                      t8: {
+                        hello: 'world',
+                      },
+                    },
+                  },
+                },
+              },
+            },
+          },
+        },
+      },
+    };
+    const tree = render(<NestedDataList data={colourMockData} />);
+    const { getByTestId } = tree;
+
+    for (let i = 0; i < 8; i++) {
+      const item = getByTestId(`T${i}`);
+      const expected = BORDER_COLOURS.dark[i % 5];
+      expect(item.style.borderColor.toUpperCase()).toBe(expected);
+    }
+  });
+
+  it('should sort the data by values with children', () => {
+    const mockData = {
+      nonce: '5980890939790185837',
+      validatorHeartbeat: {
+        nodeId:
+          'e07d2cd299659590c16ec1cc1c69936ad747083c379ea6b6cfeaa6e22c8af0cb',
+        someArray: ['0', '1', '2'],
+      },
+      blockHeight: '174534',
+    };
+    const expected = ['nonce', 'blockHeight', 'validatorHeartbeat'];
+    const result = sortNestedDataByChildren(mockData);
+    expect(result).toStrictEqual(expected);
+  });
+});
@@ -0,0 +1,178 @@
+import React, { useCallback, useContext, useMemo, useState } from 'react';
+import classNames from 'classnames';
+import isObject from 'lodash/isObject';
+import { ThemeContext } from '@vegaprotocol/react-helpers';
+import { Icon } from '@vegaprotocol/ui-toolkit';
+import { IconNames } from '@blueprintjs/icons';
+import { VegaColours } from '@vegaprotocol/tailwindcss-config';
+import isArray from 'lodash/isArray';
+
+export type UnknownObject = Record<string, unknown>;
+export type UnknownArray = unknown[];
+
+interface NestedDataListProps {
+  data: UnknownObject | UnknownArray;
+  level?: number;
+}
+
+interface NestedDataListItemProps {
+  label: string;
+  value: unknown;
+  index: number;
+}
+
+export const BORDER_COLOURS = {
+  dark: [
+    VegaColours.pink.dark,
+    VegaColours.purple.dark,
+    VegaColours.green.dark,
+    VegaColours.blue.dark,
+    VegaColours.yellow.dark,
+  ],
+  light: [
+    VegaColours.pink.DEFAULT,
+    VegaColours.purple.DEFAULT,
+    VegaColours.green.DEFAULT,
+    VegaColours.blue.DEFAULT,
+    VegaColours.yellow.DEFAULT,
+  ],
+};
+
+const camelToTitle = (text: string) => {
+  const result = text.replace(/([A-Z])/g, ' $1');
+  return result.charAt(0).toUpperCase() + result.slice(1);
+};
+
+const getBorderColour = (index: number, theme: keyof typeof BORDER_COLOURS) => {
+  const colours = BORDER_COLOURS[theme];
+  const length = colours.length;
+  const modulo = index % length;
+  return colours[modulo];
+};
+
+const NestedDataListItem = ({
+  label,
+  value,
+  index,
+}: NestedDataListItemProps) => {
+  const [isCollapsed, setCollapsed] = useState(true);
+  const toggleVisible = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+      event.stopPropagation();
+      setCollapsed(!isCollapsed);
+    },
+    [isCollapsed]
+  );
+  const hasChildren = isObject(value) && !!Object.keys(value).length;
+  const title = useMemo(() => camelToTitle(label), [label]);
+  const theme = useContext(ThemeContext);
+  const currentLevelBorder = useMemo(
+    () => getBorderColour(index, theme),
+    [index, theme]
+  );
+  const nextLevelBorder = useMemo(
+    () => getBorderColour(index + 1, theme),
+    [index, theme]
+  );
+  const isArr = isArray(value);
+
+  const listItemClasses = classNames('pl-4 border-l-4', {
+    'pt-10 last:pb-0': hasChildren,
+    'first:pt-0': hasChildren && !index,
+    'pt-2': !hasChildren && index,
+  });
+
+  const titleClasses = classNames({
+    'text-xl pl-4 border-l-4 font-alpha': hasChildren,
+    'text-base font-medium whitespace-nowrap': !hasChildren,
+  });
+
+  return (
+    <li
+      data-testid={title}
+      title={title}
+      className={listItemClasses}
+      style={{ borderColor: currentLevelBorder }}
+    >
+      <div className="flex flex-wrap">
+        <h4 className={titleClasses} style={{ borderColor: nextLevelBorder }}>
+          {hasChildren ? (
+            <button
+              className="flex items-center gap-2"
+              type="button"
+              onClick={toggleVisible}
+            >
+              <span className="">{title}</span>
+              <small className="px-1 text-sm rounded bg-vega-light-200 dark:bg-vega-dark-200">
+                {isArr ? 'array' : typeof value}
+              </small>
+              <Icon
+                name={
+                  isCollapsed ? IconNames.CHEVRON_DOWN : IconNames.CHEVRON_UP
+                }
+              />
+            </button>
+          ) : (
+            <span className="mr-2">{title}:</span>
+          )}
+        </h4>
+        {!hasChildren && (
+          <code className="text-vega-light-400 mb-2 last:mb-0 dark:text-vega-dark-400 break-all">
+            {JSON.stringify(value, null, '  ')}
+          </code>
+        )}
+      </div>
+      {hasChildren && (
+        <div aria-hidden={isCollapsed} className={isCollapsed ? 'hidden' : ''}>
+          <NestedDataList
+            data={value as UnknownObject | UnknownArray}
+            level={index + 1}
+          />
+        </div>
+      )}
+    </li>
+  );
+};
+
+export const sortNestedDataByChildren = (data: UnknownObject | UnknownArray) =>
+  Object.keys(data)
+    .filter((key) => key)
+    .sort((a, b) => {
+      const isArr = isArray(data);
+      const valA = isArr ? data[+a] : data[a];
+      const valB = isArr ? data[+b] : data[b];
+      const hasChildrenA = isObject(valA) && !!Object.keys(valA).length;
+      const hasChildrenB = isObject(valB) && !!Object.keys(valB).length;
+
+      if (hasChildrenA && !hasChildrenB) {
+        return 1;
+      }
+
+      if (!hasChildrenA && hasChildrenB) {
+        return -1;
+      }
+
+      return 0;
+    });
+
+export const NestedDataList = ({ data, level = 0 }: NestedDataListProps) => {
+  const nestedItems = useMemo(() => {
+    const sortedData = sortNestedDataByChildren(data);
+    const isArr = isArray(data);
+
+    if (sortedData.length) {
+      return sortedData.map((key) => (
+        <NestedDataListItem
+          key={key}
+          label={key}
+          value={isArr ? data[Number(key)] : data[key]}
+          index={level}
+        />
+      ));
+    }
+
+    return null;
+  }, [data, level]);
+
+  return <ul className="list-none">{nestedItems}</ul>;
+};
@@ -0,0 +1 @@
+export * from './page-header';
@@ -0,0 +1,49 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import { TruncateInline } from '../truncate/truncate';
+import { CopyWithTooltip, Icon } from '@vegaprotocol/ui-toolkit';
+
+interface PageHeaderProps {
+  title: string;
+  truncateStart?: number;
+  truncateEnd?: number;
+  copy?: boolean;
+  prefix?: string | ReactNode;
+  className?: string;
+}
+
+export const PageHeader = ({
+  prefix,
+  title,
+  truncateStart,
+  truncateEnd,
+  copy = false,
+  className,
+}: PageHeaderProps) => {
+  const titleClasses = 'text-4xl xl:text-5xl uppercase font-alpha';
+  return (
+    <header className={className}>
+      <span className={`${titleClasses} block`}>{prefix}</span>
+      <div className="flex items-center gap-x-4">
+        <h2 className={titleClasses}>
+          {truncateStart && truncateEnd ? (
+            <TruncateInline
+              text={title}
+              startChars={truncateStart}
+              endChars={truncateEnd}
+            />
+          ) : (
+            title
+          )}
+        </h2>
+        {copy && (
+          <CopyWithTooltip data-testid="copy-to-clipboard" text={title}>
+            <button className="bg-zinc-100 dark:bg-zinc-900 rounded-sm py-2 px-3">
+              <Icon name="duplicate" className="" />
+            </button>
+          </CopyWithTooltip>
+        )}
+      </div>
+    </header>
+  );
+};
@@ -0,0 +1 @@
+export * from './panel';
@@ -0,0 +1,17 @@
+import classNames from 'classnames';
+import type { ReactNode } from 'react';
+
+interface PanelProps {
+  children: ReactNode;
+  className?: string;
+}
+export const Panel = ({ children, className }: PanelProps) => (
+  <div
+    className={classNames(
+      'border border-zinc-200 dark:border-zinc-800 rounded-md p-5 mb-5',
+      className
+    )}
+  >
+    {children}
+  </div>
+);
@@ -14,7 +14,7 @@ export const RouteTitle = ({
 }: RouteTitleProps) => {
  const classes = classnames(
    'font-alpha',
-    'text-2xl',
+    'text-4xl',
    'uppercase',
    'mb-8',
    className
@@ -0,0 +1,189 @@
+import {
+  detectTypeByFetching,
+  detectTypeFromQuery,
+  getSearchType,
+  isBlock,
+  isHexadecimal,
+  isNetworkParty,
+  isNonHex,
+  SearchTypes,
+  toHex,
+  toNonHex,
+} from './detect-search';
+import { DATA_SOURCES } from '../../config';
+
+global.fetch = jest.fn();
+
+describe('Detect Search', () => {
+  it("should detect that it's a hexadecimal", () => {
+    const expected = true;
+    const testString =
+      '0x073ceaab59e5f2dd0561dec4883e7ee5bc7165cd4de34717a3ab8f2cbe3007f9';
+    const actual = isHexadecimal(testString);
+    expect(actual).toBe(expected);
+  });
+
+  it("should detect that it's not hexadecimal", () => {
+    const expected = true;
+    const testString =
+      '073ceaab59e5f2dd0561dec4883e7ee5bc7165cd4de34717a3ab8f2cbe3007f9';
+    const actual = isNonHex(testString);
+    expect(actual).toBe(expected);
+  });
+
+  it("should detect that it's a network party", () => {
+    const expected = true;
+    const testString = 'network';
+    const actual = isNetworkParty(testString);
+    expect(actual).toBe(expected);
+  });
+
+  it("should detect that it's a block", () => {
+    const expected = true;
+    const testString = '3188';
+    const actual = isBlock(testString);
+    expect(actual).toBe(expected);
+  });
+
+  it('should convert from non-hex to hex', () => {
+    const expected = '0x123';
+    const testString = '123';
+    const actual = toHex(testString);
+    expect(actual).toBe(expected);
+  });
+
+  it('should convert from hex to non-hex', () => {
+    const expected = '123';
+    const testString = '0x123';
+    const actual = toNonHex(testString);
+    expect(actual).toBe(expected);
+  });
+
+  it("should detect type client side from query if it's a hexadecimal", () => {
+    const expected = [SearchTypes.Party, SearchTypes.Transaction];
+    const testString =
+      '0x4624293CFE3D8B67A0AB448BAFF8FBCF1A1B770D9D5F263761D3D6CBEA94D97F';
+    const actual = detectTypeFromQuery(testString);
+    expect(actual).toStrictEqual(expected);
+  });
+
+  it("should detect type client side from query if it's a non hex", () => {
+    const expected = [SearchTypes.Party, SearchTypes.Transaction];
+    const testString =
+      '4624293CFE3D8B67A0AB448BAFF8FBCF1A1B770D9D5F263761D3D6CBEA94D97F';
+    const actual = detectTypeFromQuery(testString);
+    expect(actual).toStrictEqual(expected);
+  });
+
+  it("should detect type client side from query if it's a network party", () => {
+    const expected = [SearchTypes.Party];
+    const testString = 'network';
+    const actual = detectTypeFromQuery(testString);
+    expect(actual).toStrictEqual(expected);
+  });
+
+  it("should detect type client side from query if it's a block (number)", () => {
+    const expected = [SearchTypes.Block];
+    const testString = '23432';
+    const actual = detectTypeFromQuery(testString);
+    expect(actual).toStrictEqual(expected);
+  });
+
+  it("detectTypeByFetching should call fetch with non-hex query it's a transaction", async () => {
+    const query = '0xabc';
+    const type = SearchTypes.Transaction;
+    // @ts-ignore issue related to polyfill
+    fetch.mockImplementation(
+      jest.fn(() =>
+        Promise.resolve({
+          ok: true,
+          json: () =>
+            Promise.resolve({
+              transaction: {
+                hash: query,
+              },
+            }),
+        })
+      )
+    );
+    const result = await detectTypeByFetching(query);
+    expect(fetch).toHaveBeenCalledWith(
+      `${DATA_SOURCES.blockExplorerUrl}/transactions/${toNonHex(query)}`
+    );
+    expect(result).toBe(type);
+  });
+
+  it("detectTypeByFetching should call fetch with non-hex query it's a party", async () => {
+    const query = 'abc';
+    const type = SearchTypes.Party;
+    // @ts-ignore issue related to polyfill
+    fetch.mockImplementation(
+      jest.fn(() =>
+        Promise.resolve({
+          ok: false,
+        })
+      )
+    );
+    const result = await detectTypeByFetching(query);
+    expect(result).toBe(type);
+  });
+
+  it('getSearchType should return party from fetch response', async () => {
+    const query =
+      '0x4624293CFE3D8B67A0AB448BAFF8FBCF1A1B770D9D5F263761D3D6CBEA94D97F';
+    const expected = SearchTypes.Party;
+    // @ts-ignore issue related to polyfill
+    fetch.mockImplementation(
+      jest.fn(() =>
+        Promise.resolve({
+          ok: false,
+        })
+      )
+    );
+    const result = await getSearchType(query);
+    expect(result).toBe(expected);
+  });
+
+  it('getSearchType should return transaction from fetch response', async () => {
+    const query =
+      '4624293CFE3D8B67A0AB448BAFF8FBCF1A1B770D9D5F263761D3D6CBEA94D97F';
+    const expected = SearchTypes.Transaction;
+    // @ts-ignore issue related to polyfill
+    fetch.mockImplementation(
+      jest.fn(() =>
+        Promise.resolve({
+          ok: true,
+          json: () =>
+            Promise.resolve({
+              transaction: {
+                hash: query,
+              },
+            }),
+        })
+      )
+    );
+    const result = await getSearchType(query);
+    expect(result).toBe(expected);
+  });
+
+  it('getSearchType should return undefined from transaction response', async () => {
+    const query = 'u';
+    const expected = undefined;
+    const result = await getSearchType(query);
+    expect(result).toBe(expected);
+  });
+
+  it('getSearchType should return block if query is number', async () => {
+    const query = '123';
+    const expected = SearchTypes.Block;
+    const result = await getSearchType(query);
+    expect(result).toBe(expected);
+  });
+
+  it('getSearchType should return party if query is network', async () => {
+    const query = 'network';
+    const expected = SearchTypes.Party;
+    const result = await getSearchType(query);
+    expect(result).toBe(expected);
+  });
+});
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
sam-keen	3fd8205587	ci-make-deploy-preview	2023-03-31 11:57:34 +01:00
Matthew Russell	2b77421600	fix: add gas estimates with a buffer for all token app tx	2023-03-30 14:27:17 -07:00
Sam Keen	26d27c1487	fix(governance): validators list comparing stringified numbers (#3170 )	2023-03-13 15:12:15 +00:00
Dexter Edwards	fbb1b55e41	fix(token): router incorrectly configured, causing query spamming (#3042 )	2023-03-01 12:46:26 +00:00
Sam Keen	81cdbd8140	updated leaving validator list to include Nala (#2937 )	2023-02-17 18:15:09 +00:00
Edd	21c1f95172	Update .env fix for block explorer	2023-02-17 18:06:32 +00:00
Dexter Edwards	c376a50587	Chore/validators leaving (#2769 )	2023-01-30 09:18:07 +00:00
Dexter Edwards	d71159eed1	chore: add logo map override for incorrectly specified validator logos (#2686 )	2023-01-25 10:01:22 +00:00
Edd	bb236d0445	fix(explorer): add workaround for v53 misreporting total node count (#2671 )	2023-01-19 12:53:46 +00:00
Dexter Edwards	3e06c9478c	Hack/mainnet leaving validators (#2576 ) * feat: hacky thing to tell people the validators that are leaving * chore: put back empty state * style: lint	2023-01-11 14:58:07 +00:00
Joe Tsang	326a2e6412	chore: pull capsule from v0.2.3 (#2520 )	2023-01-04 17:14:45 +00:00
Edd	5a1bd5a73f	chore(explorer): add mirror env (#2517 ) * chore(explorer): add mirror env * chore: bump nx sha3 in extra workflows	2023-01-04 17:03:32 +00:00
Edd	0416e916e1	chore: bump nx sha3 in workflows	2023-01-04 16:13:09 +00:00
Dexter	af3bb2dcd5	chore: update mirror url	2023-01-04 14:33:48 +00:00
Dexter	6229e6f92b	chore: adjust mirror env vars	2023-01-04 13:28:29 +00:00
Dexter Edwards	f03aa655c3	chore: fix percetnages (#2501 )	2023-01-03 12:43:20 +00:00
Dexter EdwardsandMatthew Russell	20dd1995ca	chore: remove validating nodes (#2454 ) * chore: remove validating nodes * fix: explorer home * chore: remove stray log Co-authored-by: Matthew Russell <mattrussell36@gmail.com>	2022-12-21 17:26:19 +00:00
Dexter	266f2462bc	fix: rounding error	2022-12-14 09:17:59 +00:00
Dexter Edwards	14052c4088	fix: rewards page (#2393 )	2022-12-13 17:01:37 +00:00
Dexter Edwards	d4231ea531	Fix/rest delegations (#2392 ) * chore: create use delegations hook * chore: add polling to use delegations * chore: remove polling logic from hook * chore: remove delegations from staking form * chore: fix more delegations queries * chore: rename file * fix: spelling issues	2022-12-13 15:37:11 +00:00
Dexter Edwards	718c93f486	chore: poll delegations less frequently (#2390 )	2022-12-13 10:45:24 +00:00
Dexter Edwards	4ef5d7f19c	feat: mirror environment (#2342 ) * feat: mirror environment * chore: update networks to have correct data node * chore: update netowrks to point to correct data nodes	2022-12-07 10:11:23 +00:00
Edd	51f341ea94	fix(#2012 ): fix mainnet block explorer (#2020 ) * chore(explorer): add urls for mainnet explorer api	2022-11-10 16:28:09 +00:00
Elmar	6d09e4ee64	chore(#1976 ): block explorer txs list (#1996 ) * Feat/1334 replace json (#1459) * feat(explorer): add panel component * feat(explorer): add info panel component * feat(explorer): change layout styles * feat(explorer): render json data in component for parties * feat(explorer): change testnet env * feat(explorer): change eslint json * feat(explorer): render staking json in info panel component * fix(explorer): pr comments * fix(explorer): theme dark nav (#1498) * fix(explorer): add party to consolidated search (#1588) * fix(explorer): add party to consolidated search * chore(explorer): add missing tests for detect-search.spec.ts * feat(explorer): add txs infinite scroll list (#1625) * Feat/1682 fix api endpoints (#1690) * chore(explorer): replace tendermint api with block explorer api for transaction related searches * feat(explorer): replace detect search type to be by process of elimination as temp measure * fix(explorer): fix broken tests * Feat/397 list transactions (#1770) * chore(explorer): add stagnet 1 env vars * feat(explorer): add info block component * feat(explorer): change tx order type lozenge * feat(explorer): change truncated-link.tsx style * feat(explorer): add stats info component for txs * feat(explorer): change page title size * feat(explorer): update txs list and add txs for party * fix(explorer): remove unused var * fix(explorer): change copy and remove unused vars * fix(explorer): pr review fixes * Feat/1501 improve party details (#1785) * feat(explorer): change styling party details page * feat(explorer): use panel component in txs-stats-info.tsx * feat(explorer): change order for party details sections * chore(explorer): add stagnet-1 env vars (#1846) * chore(explorer): add sandbox env vars (#1867) * chore(explorer): update BE api urls (#1886) * Feat/1416 tx detail (#1953) * chore(explorer): add new vega colours to tw config * feat(explorer): add new nested data list component * feat(explorer): abstract page header with copy to new component * feat(explorer): update styles tx details page * fix(explorer): linting errors * fix(explorer): fix txs type * fix(explorer): fix strong typing * fix(explorer): fix styling error for e2e test * fix(explorer): reduce limit of txs from 100 to 20	2022-11-09 10:03:02 +00:00
Elmar	63bfcb6e75	fix(explorer): fix uptime to reference genesisTime field (#1819 )	2022-10-21 13:11:56 +01:00
Elmar	66046a9471	fix(stats-manager): fix uptime pointing to incorrect field (#1328 ) (#1725 )	2022-10-21 12:16:35 +01:00
Dexter Edwards	4263a6b07b	fix: do no allow min or max fraction digits to go out of range (#1806 ) * fix: do no allow min or max fraction digits to go out of range * style: lint * chore: assign variable to remove magic number	2022-10-20 14:41:19 +01:00
Dexter Edwards	389291785b	fix: wallet connect (#1706 )	2022-10-11 12:30:05 +01:00
Dexter Edwards	a1746019b6	Chore/api endpoints (#1392 ) * ci: correct api endpoints * ci: force build	2022-09-20 11:32:17 +01:00
Dexter Edwards	be38f630d8	Chore/more env config (#1363 ) * chore: remove vega URL as no longer needed * chore: remove bad env config * chore: remove config caching * chore: remove silly text * style: lint * chore: style lint * test: remove test for removed functionality	2022-09-16 18:23:02 +01:00
Matthew Russell	c49c52a635	fix: supporting text content on withdrawals page	2022-09-08 15:13:37 -07:00
Matthew Russell	a94fc689b9	chore: appease nx import path	2022-09-08 12:42:05 -07:00
Matthew Russell	25f63d2fd2	fix: regen types from mainnet and fix errors	2022-09-08 12:31:10 -07:00
Dexter	1ac0cf554f	ci: force build	2022-09-08 15:08:02 +01:00
Dexter	48004d836d	Revert "chore: proposal schema change (1057) (#1169 )" This reverts commit `d2791f2e59`.	2022-09-08 15:03:26 +01:00
Dexter	32e2e22c64	chore: revert ethereumAddress changes which are not on mainnet yet	2022-09-08 15:02:23 +01:00
Dexter	71c8b31ffe	fix: tranches styles look terrible	2022-09-08 14:59:35 +01:00
Elmar	37aa5be725	Feat/1089 override slippage (#1283 ) * feat(console-lite): add traffic light component * fix(console-lite): add slippage to deal ticket estimates * feat(console-lite): refactor deal ticket steps and add slippage dialog * feat(console-lite): add e2e tests for slippage and fix broken ones * fix(console-lite): fix styling issue after theme update	2022-09-08 13:04:17 +01:00
macqbatandmaciek	65528a8007	feat: [console-lite] - additional unit tests (#1273 ) * feat: [console-lite] - additional unit tests * feat: [console-lite] - additional unit tests * feat: [console-lite] - additional unit tests * feat: [console-lite] - additional unit tests - fixes after feedback Co-authored-by: maciek <maciek@vegaprotocol.io>	2022-09-08 13:18:32 +02:00
Edd	87ae478b9c	fix(positions): split market name more defensively (#1265 )	2022-09-08 11:12:01 +01:00
botond	dc59859964	fix: readme with new env var for type gen (#1288 )	2022-09-08 12:07:08 +02:00
Joe Tsang	621feada26	chore: revert back to using previous ubuntu runners (#1286 )	2022-09-08 10:37:11 +01:00
Dexter Edwards	bb81c1786c	chore: remove build and test precommit checks (#1285 )	2022-09-08 10:24:11 +01:00
mattrussell36	760be23c27	chore: update tranches Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2022-09-08 06:18:41 +00:00
mattrussell36	19e12145cb	chore: update tranches Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2022-09-08 00:11:15 +00:00
Art	c83b5bf93c	chore(#1259 ): replaced market name with tradable instrument name (#1269 ) * chore: replaced market name with tradable instrument name (1259) * removed lodash import that must have added itself magically * =aligned cypress tests with code changed * =aligned console lite cypress mocks to the code changes * changed cypress market info key details test * changed cypress market info key details test * generate markets for console lite	2022-09-07 11:37:39 -07:00
botond	9f6376c1b2	fix: dialog alignment (#1281 )	2022-09-07 11:35:48 -07:00
Mikołaj Młodzikowski	b5271d07e4	chore: use bigger runners for capusle (#1248 )	2022-09-07 11:14:52 -07:00
mattrussell36	6ddf706cf2	chore: update tranches Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2022-09-07 18:04:21 +00:00
Art	d2791f2e59	chore: proposal schema change (1057) (#1169 ) * chore: moved proposal queries to lib/governance * chore: used new rationale title and description * chore: addressed PR comments, refactored * chore: moved proposal queries to lib/governance * chore: used new rationale title and description * chore: addressed PR comments, refactored * fix: dropped s after merge * fix: fixed lodash imports	2022-09-07 18:35:29 +02:00
Art	9de3683bf3	chore: filter assets by status (1108) (#1192 ) * chore: filter assets by status (1108) * chore: moved asset status * chore: re-adding filterin after merge (changed upstream) * chore: filter assets by status (1108) * chore: moved asset status * types * fixed deposit cypress tests	2022-09-07 18:01:16 +02:00
botond	293e2ffbc3	Fix/UI dialog overflows (#1276 ) * fix: dialog overflows * fix: hide close icon when no change function passed in	2022-09-07 14:02:23 +01:00
mattrussell36	beeb1db1e1	chore: update tranches Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2022-09-07 12:04:38 +00:00
m.ray botond candida-d Bartłomiej Głownia Matthew Russell Joe	cae6162a7f	feat: liquidity provisions view (#1133 ) * feat(#473): add positions metrics data provider * feat(#473) add positions stats * feat(#473) add positions stats * feat(#473): add positions stats * feat(#473): add positions stats * feat(#473): position metrics, test and refactoring * feat(#473): add unit tests to positions table * feat(#473): fix spelling, order positions by updated at desc * feat(#473): protect from division by 0 * feat(#473): fix trading positions e2e tests * feat(#473): fix e2e data mocks * feat(#473): post code review clean up * feat(#993): dependencies handling in data provider * feat(#993): fix e2e tests data mocks * feat(#993): remove position metrics mocks, add market data market id * feat: #994 add price monitoring bounds and candles update interface * fix: move best bid price to diff section * feat(#993): add missing mocks, fix combine function * fix: add insurance pool and calc volume 24h * feat: display some oracle min info, asset id, insurance pool, move open interest and 24hVol * fix: add market-info.cy.ts case * fix: remove # from numbered price monitoring settings * fix: add insurance pool test * fix: format 24hvol * feat(#993): set loading initially to true, add unit tests * feat(#993): cleanup, add comments * feat(#993): remove undefined from client type * fix: remove indicativeVolume and oracleSpecBinding from market info * feat(#993): cosmetic changes * fix: add oracleSpecBinding back * Update libs/deal-ticket/src/components/info-market.tsx Co-authored-by: botond <105208209+notbot00@users.noreply.github.com> * feat: add initial queries * fix: memo yesterday's timestamp * fix: add back info * fix: update query * fix: add view full oracle details link and update mappings * fix: regen code, make link reactnode, fix index.ts * feat: add liquidity lib, refactor info market * fix: remove liquidity query from deal-ticket * feat:(#993): pass informaton about update callback cause * fix: small ui tweaks * fix: display in grid * feat: navigate to oracle by termination id * feat: #491 add use liquidity provision merging * fix: remove logs, add extra check on my liquidity provision * fix: type number trivially inferred from a number literal, remove type annotation * fix: cypress tests and formatting for market info * Update libs/deal-ticket/src/components/market-info/info-market.tsx * fix: use position decimal places for stake and market value proxy * fix: #491 use size/position decimal places for obligation, supplied and commitment amount * fix: add size component and use decimal places * fix: update readme liquidity * fix: #491 add correct asset decimal formatters * Update libs/deal-ticket/src/components/market-info/tooltip-mapping.tsx Co-authored-by: candida-d <62548908+candida-d@users.noreply.github.com> * fix: make link instead of button to open liquidity * fix: #491 add liquidity page, link to trading mode tooltip, tabs hidden or choose active * fix: remove LP dialog, use only link to page * fix: add market id in LP view * fix: follow trade grid design * fix: add one line tabs , remove link styling, remove any, add value formatters * fix: remove falsy check LP undefined * fix: keep date formatter in LP table * fix: add generic type market info, hooks in body function * fix: revert number formatters * fix: use one param only in network params query * fix: use network param in web3 lib * fix: move lp container to trading app * fix: remove resizable panel * feat: add header component, remove isEstimate * chore: remove unnecessary type cast * fix: fix build with children map clone element * chore: lint * fix: move use network params to react helpers * fix: add const for LP tabs * fix: fix formatting on LP page * fix: only show tilde for liquidity monitoring auction end date * fix: market id being rendered twice in market info * chore: fix lint * fix: types for generate withdraw form query * chore: fix intermittent failing withdrawal test * Update libs/deal-ticket/src/components/market-info/info-market.tsx * chore: add another wait for market Co-authored-by: Bartłomiej Głownia <bglownia@gmail.com> Co-authored-by: botond <105208209+notbot00@users.noreply.github.com> Co-authored-by: candida-d <62548908+candida-d@users.noreply.github.com> Co-authored-by: Matthew Russell <mattrussell36@gmail.com> Co-authored-by: Joe <joe@vega.xyz>	2022-09-07 12:05:28 +01:00
Joe Tsang	fa6ddcfdf1	Chore/use vega 0.54.0 (#1268 ) * chore: change vega version to use 0.54.0 * chore: update remaining workflows	2022-09-07 10:26:26 +01:00
Joe Tsang	e06b5e741c	chore: fix test manual and nightly workflows (#1264 )	2022-09-07 09:05:02 +01:00
mattrussell36	925c1721aa	chore: update tranches Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2022-09-07 06:26:40 +00:00
mattrussell36	002b11eb4a	chore: update tranches Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2022-09-07 00:08:41 +00:00
mattrussell36	bc1324aafe	chore: update tranches Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2022-09-06 18:04:20 +00:00
Joe Tsang	510b6ad0d5	Test/840 positions update (#1250 ) * test: add test for positions in portfolio * test: update position validation to include updates * chore: add wait for marketlist	2022-09-06 17:34:40 +01:00
AndyWhiteVega	e97f82edfe	test: checkout front end changes to cypress workflows (#1258 ) * test: checkout front end changes to cypress workflows * test: remove old fe checkout * test: remove dup	2022-09-06 15:03:49 +01:00
Dexter Edwards	bacd2a509e	fix: polling not working on governance page (#1255 ) * fix: polling not working on governance page * style: lint	2022-09-06 15:03:23 +01:00
mattrussell36	f401870848	chore: update tranches Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2022-09-06 12:05:27 +00:00
Matthew Russell	a5f21ed1f8	fix: styles on staking and nodes page (#1252 )	2022-09-06 10:10:31 +01:00
botond	a57d484496	Fix/1083: Update type generator (#1219 ) * feat: add new generator with config * feat: split off gql queries to separate files for the new generator * fix: delete dummy schema * feat: add generated queries with new codegen * fix: regenerate from scratch and remove duplicates * fix: libs and app gen folders * fix: remove more duplicate queries * fix: add generated files to be ignored by the formatter * fix: format * fix: generated imports * fix: lint * fix: accounts export * fix: more imports * fix: add type alias for new type system and regenerate * fix: format * fix: delete leftover file from merge	2022-09-06 10:03:10 +01:00
mattrussell36	b531094fda	chore: update tranches Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2022-09-06 06:27:47 +00:00
macqbatandmaciek	7fe282a9fb	feat: [console-lite] - refactor market-list view afetr design update (#1244 ) * feat: [console-lite] - refactor market-list view afetr design update * feat: [console-lite] - refactor market-list fix failing test * feat: [console-lite] - refactor market-list fix failing test * feat: [console-lite] - refactor market-list fix failing test Co-authored-by: maciek <maciek@vegaprotocol.io>	2022-09-06 08:13:17 +02:00
Matthew Russell	5eb06254de	feat (#896 ): large withdraws (#1180 ) * feat: add deposits table to deposits tab on portfolio page * feat: refactor use-withdraw hook to not invoke eth tx * feat: rename hook for clarity * feat: fix withdrawal creation test * feat: update withdraw-manager and withrawals-table tests * chore: fix lint * feat: remove web3 input to avoid double dialog * chore: use renderHook from testing-library/react * chore: update to use non deprecated fields * chore: remove usage of all bridge contract * feat: correctly merge cache update in withdrawals table * feat: changes to support token app withdrawals * chore: add height to ag grid table wrapping element * feat: add txhash col to withdraw table * feat: provide better ui if withdrawal is not ready to be completed * feat: use separate dialogs for txs * feat: allow user to immediately complete withdrawal if delay not triggered * feat: add withdraw store to tidy up state management * chore: fix tests * chore: convert callback to promises, fix tests, delete withdraw page * chore: fix lint errors * fix: withdrawals link in nav * feat: style changes after design update * fix: proposal form test * chore: tidy error ui logic * feat: review comments * chore: lint * feat: add better typing for tables * chore: put withdrawals tab at the end * chore: update i18n * fix: dialog in positions manager due to rename * chore: increase spacing in withdrawal form * chore: update tests * chore: lint * chore: use new assetsConnection and update cy test * fix: incorrect shape of withdrawal generate function * feat: delete withdrawals page now that its shown on the portfolio page * chore: update tests to check for withdrawals page * chore: fix tests again * fix: page title test	2022-09-05 18:30:13 -07:00
mattrussell36	578d6ecf6f	chore: update tranches Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2022-09-06 00:08:57 +00:00
m.ray	744c084ca2	feat: add network switcher to block explorer (#1242 ) * feat: add network switcher to block explorer * fix: add mock for @vegaprotocol/environment * fix: #723 add test to see if network switcher gets rendered * fix: formatting on header.spec.tsx	2022-09-05 20:28:21 +01:00
mattrussell36	adec04918e	chore: update tranches Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2022-09-05 18:04:46 +00:00
Matthew Russell	9cb84df35c	chore: refactor global store (#1241 )	2022-09-05 15:25:33 +01:00