fix: accomodate type changes for libs/liquidity

Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.github/workflows/capsule-cypress-manual-trigger.yml

@@ -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
+        run: yarn nx run ${{ github.event.inputs.project }}:e2e --record --key ${{ secrets.CYPRESS_RECORD_KEY }}
+        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 }}

.github/workflows/capsule-cypress-night-run.yml

@@ -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
+        run: yarn nx run-many --target=e2e --all --record --key ${{ secrets.CYPRESS_RECORD_KEY }}
+        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 }}

.github/workflows/capsule-cypress.yml

@@ -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'
 
@@ -130,7 +130,7 @@ jobs:
         working-directory: frontend-monorepo
 
       - name: Run Cypress tests
-        run: npx nx affected:e2e --record --key ${{ secrets.CYPRESS_RECORD_KEY }} --browser chrome
+        run: npx nx affected:e2e --record --key ${{ secrets.CYPRESS_RECORD_KEY }}
         working-directory: frontend-monorepo
         env:
           CYPRESS_TRADING_TEST_VEGA_WALLET_PASSPHRASE: ${{ secrets.CYPRESS_TRADING_TEST_VEGA_WALLET_PASSPHRASE }}

.husky/commit-msg

@@ -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

.prettierignore

@@ -3,6 +3,7 @@
 /dist
 /coverage
 __generated__
+__generated___
 
 apps/static/src/assets/devnet-tranches.json
 apps/static/src/assets/mainnet-tranches.json

README.md

@@ -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
 ```
 

apps/console-lite-e2e/src/integration/market-selector.test.ts

@@ -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
       );
     }
   });

apps/console-lite-e2e/src/integration/market-trade.test.ts

@@ -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%)');
     }
   });

apps/console-lite-e2e/src/support/mocks/commons.ts

@@ -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',

apps/console-lite-e2e/src/support/mocks/generate-deal-ticket.ts

@@ -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: {

apps/console-lite-e2e/src/support/mocks/generate-market-names.ts

@@ -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',

apps/console-lite-e2e/src/support/mocks/generate-markets.ts

@@ -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,
+        },
       },
     });
   }

apps/console-lite/.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*", "__generated__"],
+  "ignorePatterns": ["!**/*", "__generated__", "__generated___"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

apps/console-lite/setup-tests.ts

@@ -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,

apps/console-lite/src/app/components/deal-ticket/MarketTags.graphql

@@ -0,0 +1,11 @@
+query MarketTags($marketId: ID!) {
+  market(id: $marketId) {
+    tradableInstrument {
+      instrument {
+        metadata {
+          tags
+        }
+      }
+    }
+  }
+}

apps/console-lite/src/app/components/deal-ticket/PartyBalance.graphql

@@ -0,0 +1,14 @@
+query PartyBalanceQuery($partyId: ID!) {
+  party(id: $partyId) {
+    accounts {
+      type
+      balance
+      asset {
+        id
+        symbol
+        name
+        decimals
+      }
+    }
+  }
+}

apps/console-lite/src/app/components/deal-ticket/__generated___/MarketTags.ts

@@ -0,0 +1,54 @@
+import { Schema as Types } from '@vegaprotocol/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>;

apps/console-lite/src/app/components/deal-ticket/__generated___/PartyBalance.ts

@@ -0,0 +1,57 @@
+import { Schema as Types } from '@vegaprotocol/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>;

apps/console-lite/src/app/components/deal-ticket/deal-ticket-estimates.tsx

@@ -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>
 );

apps/console-lite/src/app/components/deal-ticket/deal-ticket-size-input.tsx

@@ -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>
+  );
+};

apps/console-lite/src/app/components/deal-ticket/deal-ticket-size.tsx

@@ -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}

apps/console-lite/src/app/components/deal-ticket/deal-ticket-slippage.tsx

@@ -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>
+    </>
+  );
+};

apps/console-lite/src/app/components/deal-ticket/deal-ticket-steps.tsx

@@ -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,

apps/console-lite/src/app/components/deal-ticket/review-trade.tsx

@@ -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">

apps/console-lite/src/app/components/deposits/Deposits.graphql

@@ -0,0 +1,17 @@
+query Deposits {
+  assetsConnection {
+    edges {
+      node {
+        id
+        name
+        symbol
+        decimals
+        source {
+          ... on ERC20 {
+            contractAddress
+          }
+        }
+      }
+    }
+  }
+}

apps/console-lite/src/app/components/deposits/__generated__/Deposits.ts

@@ -3,6 +3,8 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
+import { AssetStatus } from "@vegaprotocol/types";
+
 // ====================================================
 // GraphQL query operation: Deposits
 // ====================================================
@@ -39,6 +41,10 @@ export interface Deposits_assetsConnection_edges_node {
    * 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
    */
   decimals: number;
+  /**
+   * The status of the asset in the Vega network
+   */
+  status: AssetStatus;
   /**
    * The origin source of the asset (e.g: an ERC20 asset)
    */
@@ -62,5 +68,5 @@ export interface Deposits {
   /**
    * The list of all assets in use in the Vega network or the specified asset if ID is provided
    */
-  assetsConnection: Deposits_assetsConnection;
+  assetsConnection: Deposits_assetsConnection | null;
 }

apps/console-lite/src/app/components/deposits/__generated___/Deposits.ts

@@ -0,0 +1,57 @@
+import { Schema as Types } from '@vegaprotocol/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 } | 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>;

apps/console-lite/src/app/components/deposits/deposits.tsx

@@ -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}>

apps/console-lite/src/app/components/drawer/drawer.tsx

@@ -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,

apps/console-lite/src/app/components/header/header.tsx

@@ -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 />

apps/console-lite/src/app/components/input-setter/input-setter.tsx

@@ -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>
   );
 };

apps/console-lite/src/app/components/nav/tab-bar.tsx

@@ -8,7 +8,7 @@ interface TabBarProps {
 export const TabBar = ({ className }: TabBarProps) => (
   <div role="group" aria-label="Tab Bar Navigation Menu" className={className}>
     <div role="presentation" className="py-[42px]" />
-    <div className="md:hidden fixed bottom-0 left-0 right-0 bg-black py-4 border-t border-neutral-300 dark:border-neutral-700">
+    <div className="md:hidden fixed bottom-0 left-0 right-0 bg-black py-4 border-t border-neutral-300 dark:border-neutral-600">
       <Nav tabs className="flex justify-evenly items-center" />
     </div>
   </div>

apps/console-lite/src/app/components/simple-market-list/Candles.graphql

@@ -0,0 +1,5 @@
+subscription CandleLive($marketId: ID!) {
+  candles(marketId: $marketId, interval: INTERVAL_I1H) {
+    close
+  }
+}

apps/console-lite/src/app/components/simple-market-list/SimpleMarkets.graphql

@@ -0,0 +1,39 @@
+fragment SimpleMarketDataFields on ObservableMarketData {
+  marketId
+  marketState
+}
+
+query SimpleMarkets($CandleSince: String!) {
+  markets {
+    id
+    state
+    tradableInstrument {
+      instrument {
+        name
+        code
+        metadata {
+          tags
+        }
+        product {
+          __typename
+          ... on Future {
+            quoteName
+            settlementAsset {
+              symbol
+            }
+          }
+        }
+      }
+    }
+    candles(interval: INTERVAL_I1H, since: $CandleSince) {
+      open
+      close
+    }
+  }
+}
+
+subscription SimpleMarketDataSub($marketIds: [ID!]!) {
+  marketsData(marketIds: $marketIds) {
+    ...SimpleMarketDataFields
+  }
+}

apps/console-lite/src/app/components/simple-market-list/__generated__/SimpleMarketDataFields.ts

@@ -1,30 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-import { MarketState } from "@vegaprotocol/types";
-
-// ====================================================
-// GraphQL fragment: SimpleMarketDataFields
-// ====================================================
-
-export interface SimpleMarketDataFields_market {
-  __typename: "Market";
-  /**
-   * Market ID
-   */
-  id: string;
-  /**
-   * Current state of the market
-   */
-  state: MarketState;
-}
-
-export interface SimpleMarketDataFields {
-  __typename: "MarketData";
-  /**
-   * market ID of the associated mark price
-   */
-  market: SimpleMarketDataFields_market;
-}

apps/console-lite/src/app/components/simple-market-list/__generated__/SimpleMarketDataSub.ts

@@ -9,29 +9,25 @@ import { MarketState } from "@vegaprotocol/types";
 // GraphQL subscription operation: SimpleMarketDataSub
 // ====================================================
 
-export interface SimpleMarketDataSub_marketData_market {
-  __typename: "Market";
+export interface SimpleMarketDataSub_marketsData {
+  __typename: "ObservableMarketData";
   /**
-   * Market ID
+   * current state of the market
    */
-  id: string;
-  /**
-   * Current state of the market
-   */
-  state: MarketState;
-}
-
-export interface SimpleMarketDataSub_marketData {
-  __typename: "MarketData";
+  marketState: MarketState;
   /**
    * market ID of the associated mark price
    */
-  market: SimpleMarketDataSub_marketData_market;
+  marketId: string;
 }
 
 export interface SimpleMarketDataSub {
   /**
    * Subscribe to the mark price changes
    */
-  marketData: SimpleMarketDataSub_marketData;
+  marketsData: SimpleMarketDataSub_marketsData[];
+}
+
+export interface SimpleMarketDataSubVariables {
+  marketIds: string[];
 }

apps/console-lite/src/app/components/simple-market-list/__generated__/SimpleMarkets.ts

@@ -9,26 +9,6 @@ import { MarketState } from "@vegaprotocol/types";
 // 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
    */
@@ -99,18 +83,10 @@ 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.
    */

apps/console-lite/src/app/components/simple-market-list/__generated___/Candles.ts

@@ -0,0 +1,43 @@
+import { Schema as Types } from '@vegaprotocol/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>;

apps/console-lite/src/app/components/simple-market-list/__generated___/SimpleMarkets.ts

@@ -0,0 +1,115 @@
+import { Schema as Types } from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type SimpleMarketDataFieldsFragment = { __typename?: 'ObservableMarketData', marketId: string, marketState: Types.MarketState };
+
+export type SimpleMarketsQueryVariables = Types.Exact<{
+  CandleSince: Types.Scalars['String'];
+}>;
+
+
+export type SimpleMarketsQuery = { __typename?: 'Query', markets?: Array<{ __typename?: 'Market', id: string, state: Types.MarketState, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, 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<{
+  marketIds: Array<Types.Scalars['ID']> | Types.Scalars['ID'];
+}>;
+
+
+export type SimpleMarketDataSubSubscription = { __typename?: 'Subscription', marketsData: Array<{ __typename?: 'ObservableMarketData', marketId: string, marketState: Types.MarketState }> };
+
+export const SimpleMarketDataFieldsFragmentDoc = gql`
+    fragment SimpleMarketDataFields on ObservableMarketData {
+  marketId
+  marketState
+}
+    `;
+export const SimpleMarketsDocument = gql`
+    query SimpleMarkets($CandleSince: String!) {
+  markets {
+    id
+    state
+    tradableInstrument {
+      instrument {
+        name
+        code
+        metadata {
+          tags
+        }
+        product {
+          __typename
+          ... on Future {
+            quoteName
+            settlementAsset {
+              symbol
+            }
+          }
+        }
+      }
+    }
+    candles(interval: INTERVAL_I1H, since: $CandleSince) {
+      open
+      close
+    }
+  }
+}
+    `;
+
+/**
+ * __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($marketIds: [ID!]!) {
+  marketsData(marketIds: $marketIds) {
+    ...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: {
+ *      marketIds: // value for 'marketIds'
+ *   },
+ * });
+ */
+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>;

apps/console-lite/src/app/components/simple-market-list/constants.ts

@@ -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'];

apps/console-lite/src/app/components/simple-market-list/data-provider.ts

@@ -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
           }
@@ -55,10 +42,10 @@ export const MARKETS_QUERY = gql`
 `;
 
 const MARKET_DATA_SUB = gql`
-  ${MARKET_DATA_FRAGMENT}
-  subscription SimpleMarketDataSub {
-    marketData {
-      ...SimpleMarketDataFields
+  subscription SimpleMarketDataSub($marketIds: [ID!]!) {
+    marketsData(marketIds: $marketIds) {
+      marketState
+      marketId
     }
   }
 `;
@@ -78,7 +65,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
   });

apps/console-lite/src/app/components/simple-market-list/simple-market-list.spec.tsx

@@ -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();
+    });
+  });
 });

apps/console-lite/src/app/components/simple-market-list/simple-market-list.tsx

@@ -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>

apps/console-lite/src/app/components/simple-market-list/simple-market-renderer.spec.tsx

@@ -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();
+  });
+});

apps/console-lite/src/app/components/simple-market-list/simple-market-renderer.tsx

@@ -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}
         />

apps/console-lite/src/app/components/simple-market-list/simple-market-toolbar.spec.tsx

@@ -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');
+  });
 });

apps/console-lite/src/app/components/simple-market-list/simple-market-toolbar.tsx

@@ -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')}
           >

apps/console-lite/src/app/components/stepper/stepper.tsx

@@ -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,
                         }
                       )}
                     >

apps/console-lite/src/app/components/traffic-light/index.ts

@@ -0,0 +1 @@
+export * from './traffic-light';

apps/console-lite/src/app/components/traffic-light/traffic-light.tsx

@@ -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>;
+};

apps/console-lite/src/app/constants/index.ts

@@ -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'),

apps/console-lite/src/app/hooks/EstimateOrder.graphql

@@ -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
+    }
+  }
+}

apps/console-lite/src/app/hooks/MarketMarkPrice.graphql

@@ -0,0 +1,8 @@
+query MarketMarkPrice($marketId: ID!) {
+  market(id: $marketId) {
+    decimalPlaces
+    data {
+      markPrice
+    }
+  }
+}

apps/console-lite/src/app/hooks/MarketPositions.graphql

@@ -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
+          }
+        }
+      }
+    }
+  }
+}

apps/console-lite/src/app/hooks/PartyMarketData.graphql

@@ -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
+        }
+      }
+    }
+  }
+}

apps/console-lite/src/app/hooks/__generated__/PartyMarketData.ts

@@ -103,7 +103,7 @@ export interface PartyMarketData_party {
   /**
    * Margin levels for a market
    */
-  marginsConnection: PartyMarketData_party_marginsConnection;
+  marginsConnection: PartyMarketData_party_marginsConnection | null;
 }
 
 export interface PartyMarketData {

apps/console-lite/src/app/hooks/__generated__/marketPositions.ts

@@ -91,7 +91,7 @@ export interface MarketPositions_party {
   /**
    * Trading positions relating to a party
    */
-  positionsConnection: MarketPositions_party_positionsConnection;
+  positionsConnection: MarketPositions_party_positionsConnection | null;
 }
 
 export interface MarketPositions {

apps/console-lite/src/app/hooks/__generated___/EstimateOrder.ts

@@ -0,0 +1,78 @@
+import { Schema as Types } from '@vegaprotocol/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>;

apps/console-lite/src/app/hooks/__generated___/MarketMarkPrice.ts

@@ -0,0 +1,51 @@
+import { Schema as Types } from '@vegaprotocol/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>;

apps/console-lite/src/app/hooks/__generated___/MarketPositions.ts

@@ -0,0 +1,68 @@
+import { Schema as Types } from '@vegaprotocol/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 } | 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>;

apps/console-lite/src/app/hooks/__generated___/PartyMarketData.ts

@@ -0,0 +1,71 @@
+import { Schema as Types } from '@vegaprotocol/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 } | 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>;

apps/console-lite/src/app/hooks/use-column-definitions.tsx

@@ -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>
         ),

apps/console-lite/src/app/hooks/use-markets-filter-data.ts

@@ -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;

apps/explorer/.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*", "__generated__"],
+  "ignorePatterns": ["!**/*", "__generated__", "__generated___"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

apps/explorer/src/app/components/header/header.spec.tsx

@@ -2,6 +2,12 @@ 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>,
 }));
@@ -25,4 +31,10 @@ describe('Header', () => {
 
     expect(screen.getByTestId('search')).toBeInTheDocument();
   });
+
+  it('should render network switcher', () => {
+    render(renderComponent());
+
+    expect(screen.getByTestId('network-switcher')).toBeInTheDocument();
+  });
 });

apps/explorer/src/app/components/header/header.tsx

@@ -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';
@@ -27,14 +28,17 @@ export const Header = ({
   );
   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-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"

apps/explorer/src/app/routes/assets/Assets.graphql

@@ -0,0 +1,27 @@
+query AssetsQuery {
+  assetsConnection {
+    edges {
+      node {
+        id
+        name
+        symbol
+        decimals
+        source {
+          ... on ERC20 {
+            contractAddress
+          }
+          ... on BuiltinAsset {
+            maxFaucetAmountMint
+          }
+        }
+        infrastructureFeeAccount {
+          type
+          balance
+          market {
+            id
+          }
+        }
+      }
+    }
+  }
+}

apps/explorer/src/app/routes/assets/__generated__/AssetsQuery.ts

@@ -96,5 +96,5 @@ export interface AssetsQuery {
   /**
    * The list of all assets in use in the Vega network or the specified asset if ID is provided
    */
-  assetsConnection: AssetsQuery_assetsConnection;
+  assetsConnection: AssetsQuery_assetsConnection | null;
 }

apps/explorer/src/app/routes/assets/__generated___/Assets.ts

@@ -0,0 +1,67 @@
+import { Schema as Types } from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type AssetsQueryQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type AssetsQueryQuery = { __typename?: 'Query', assetsConnection?: { __typename?: 'AssetsConnection', edges?: Array<{ __typename?: 'AssetEdge', node: { __typename?: 'Asset', id: string, name: string, symbol: string, decimals: number, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string }, infrastructureFeeAccount: { __typename?: 'Account', type: Types.AccountType, balance: string, market?: { __typename?: 'Market', id: string } | null } } } | null> | null } | null };
+
+
+export const AssetsQueryDocument = gql`
+    query AssetsQuery {
+  assetsConnection {
+    edges {
+      node {
+        id
+        name
+        symbol
+        decimals
+        source {
+          ... on ERC20 {
+            contractAddress
+          }
+          ... on BuiltinAsset {
+            maxFaucetAmountMint
+          }
+        }
+        infrastructureFeeAccount {
+          type
+          balance
+          market {
+            id
+          }
+        }
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useAssetsQueryQuery__
+ *
+ * To run a query within a React component, call `useAssetsQueryQuery` and pass it any options that fit your needs.
+ * When your component renders, `useAssetsQueryQuery` 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 } = useAssetsQueryQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useAssetsQueryQuery(baseOptions?: Apollo.QueryHookOptions<AssetsQueryQuery, AssetsQueryQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<AssetsQueryQuery, AssetsQueryQueryVariables>(AssetsQueryDocument, options);
+      }
+export function useAssetsQueryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<AssetsQueryQuery, AssetsQueryQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<AssetsQueryQuery, AssetsQueryQueryVariables>(AssetsQueryDocument, options);
+        }
+export type AssetsQueryQueryHookResult = ReturnType<typeof useAssetsQueryQuery>;
+export type AssetsQueryLazyQueryHookResult = ReturnType<typeof useAssetsQueryLazyQuery>;
+export type AssetsQueryQueryResult = Apollo.QueryResult<AssetsQueryQuery, AssetsQueryQueryVariables>;

apps/explorer/src/app/routes/assets/index.tsx

@@ -1,5 +1,6 @@
+import compact from 'lodash/compact';
 import { gql, useQuery } from '@apollo/client';
-import { assetsConnectionToAssets, t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/react-helpers';
 import React from 'react';
 import { RouteTitle } from '../../components/route-title';
 import { SubHeading } from '../../components/sub-heading';
@@ -39,7 +40,7 @@ export const ASSETS_QUERY = gql`
 const Assets = () => {
   const { data } = useQuery<AssetsQuery>(ASSETS_QUERY);
 
-  const assets = assetsConnectionToAssets(data?.assetsConnection);
+  const assets = compact(data?.assetsConnection?.edges).map((e) => e.node);
 
   return (
     <section>

apps/explorer/src/app/routes/governance/Proposals.graphql

@@ -0,0 +1,74 @@
+query ProposalsQuery {
+  proposals {
+    id
+    reference
+    state
+    datetime
+    rejectionReason
+    party {
+      id
+    }
+    terms {
+      closingDatetime
+      enactmentDatetime
+      change {
+        ... on NewMarket {
+          instrument {
+            name
+          }
+        }
+        ... on UpdateMarket {
+          marketId
+        }
+        ... on NewAsset {
+          __typename
+          symbol
+          source {
+            ... on BuiltinAsset {
+              maxFaucetAmountMint
+            }
+            ... on ERC20 {
+              contractAddress
+            }
+          }
+        }
+        ... on UpdateNetworkParameter {
+          networkParameter {
+            key
+            value
+          }
+        }
+      }
+    }
+    votes {
+      yes {
+        totalTokens
+        totalNumber
+        votes {
+          value
+          party {
+            id
+            stake {
+              currentStakeAvailable
+            }
+          }
+          datetime
+        }
+      }
+      no {
+        totalTokens
+        totalNumber
+        votes {
+          value
+          party {
+            id
+            stake {
+              currentStakeAvailable
+            }
+          }
+          datetime
+        }
+      }
+    }
+  }
+}

apps/explorer/src/app/routes/governance/__generated__/ProposalsQuery.ts

@@ -9,7 +9,23 @@ import { ProposalState, ProposalRejectionReason, VoteValue } from "@vegaprotocol
 // GraphQL query operation: ProposalsQuery
 // ====================================================
 
-export interface ProposalsQuery_proposals_party {
+export interface ProposalsQuery_proposalsConnection_edges_node_rationale {
+  __typename: "ProposalRationale";
+  /**
+   * Title to be used to give a short description of the proposal in lists.
+   * This is to be between 0 and 100 unicode characters.
+   * This is mandatory for all proposals.
+   */
+  title: string;
+  /**
+   * Description to show a short title / something in case the link goes offline.
+   * This is to be between 0 and 20k unicode characters.
+   * This is mandatory for all proposals.
+   */
+  description: string;
+}
+
+export interface ProposalsQuery_proposalsConnection_edges_node_party {
   __typename: "Party";
   /**
    * Party identifier
@@ -17,11 +33,11 @@ export interface ProposalsQuery_proposals_party {
   id: string;
 }
 
-export interface ProposalsQuery_proposals_terms_change_UpdateAsset {
+export interface ProposalsQuery_proposalsConnection_edges_node_terms_change_UpdateAsset {
   __typename: "UpdateAsset" | "NewFreeform";
 }
 
-export interface ProposalsQuery_proposals_terms_change_NewMarket_instrument {
+export interface ProposalsQuery_proposalsConnection_edges_node_terms_change_NewMarket_instrument {
   __typename: "InstrumentConfiguration";
   /**
    * Full and fairly descriptive name for the instrument
@@ -29,20 +45,20 @@ export interface ProposalsQuery_proposals_terms_change_NewMarket_instrument {
   name: string;
 }
 
-export interface ProposalsQuery_proposals_terms_change_NewMarket {
+export interface ProposalsQuery_proposalsConnection_edges_node_terms_change_NewMarket {
   __typename: "NewMarket";
   /**
    * New market instrument configuration
    */
-  instrument: ProposalsQuery_proposals_terms_change_NewMarket_instrument;
+  instrument: ProposalsQuery_proposalsConnection_edges_node_terms_change_NewMarket_instrument;
 }
 
-export interface ProposalsQuery_proposals_terms_change_UpdateMarket {
+export interface ProposalsQuery_proposalsConnection_edges_node_terms_change_UpdateMarket {
   __typename: "UpdateMarket";
   marketId: string;
 }
 
-export interface ProposalsQuery_proposals_terms_change_NewAsset_source_BuiltinAsset {
+export interface ProposalsQuery_proposalsConnection_edges_node_terms_change_NewAsset_source_BuiltinAsset {
   __typename: "BuiltinAsset";
   /**
    * Maximum amount that can be requested by a party through the built-in asset faucet at a time
@@ -50,7 +66,7 @@ export interface ProposalsQuery_proposals_terms_change_NewAsset_source_BuiltinAs
   maxFaucetAmountMint: string;
 }
 
-export interface ProposalsQuery_proposals_terms_change_NewAsset_source_ERC20 {
+export interface ProposalsQuery_proposalsConnection_edges_node_terms_change_NewAsset_source_ERC20 {
   __typename: "ERC20";
   /**
    * The address of the ERC20 contract
@@ -58,9 +74,9 @@ export interface ProposalsQuery_proposals_terms_change_NewAsset_source_ERC20 {
   contractAddress: string;
 }
 
-export type ProposalsQuery_proposals_terms_change_NewAsset_source = ProposalsQuery_proposals_terms_change_NewAsset_source_BuiltinAsset | ProposalsQuery_proposals_terms_change_NewAsset_source_ERC20;
+export type ProposalsQuery_proposalsConnection_edges_node_terms_change_NewAsset_source = ProposalsQuery_proposalsConnection_edges_node_terms_change_NewAsset_source_BuiltinAsset | ProposalsQuery_proposalsConnection_edges_node_terms_change_NewAsset_source_ERC20;
 
-export interface ProposalsQuery_proposals_terms_change_NewAsset {
+export interface ProposalsQuery_proposalsConnection_edges_node_terms_change_NewAsset {
   __typename: "NewAsset";
   /**
    * The symbol of the asset (e.g: GBP)
@@ -69,10 +85,10 @@ export interface ProposalsQuery_proposals_terms_change_NewAsset {
   /**
    * The source of the new asset
    */
-  source: ProposalsQuery_proposals_terms_change_NewAsset_source;
+  source: ProposalsQuery_proposalsConnection_edges_node_terms_change_NewAsset_source;
 }
 
-export interface ProposalsQuery_proposals_terms_change_UpdateNetworkParameter_networkParameter {
+export interface ProposalsQuery_proposalsConnection_edges_node_terms_change_UpdateNetworkParameter_networkParameter {
   __typename: "NetworkParameter";
   /**
    * The name of the network parameter
@@ -84,14 +100,14 @@ export interface ProposalsQuery_proposals_terms_change_UpdateNetworkParameter_ne
   value: string;
 }
 
-export interface ProposalsQuery_proposals_terms_change_UpdateNetworkParameter {
+export interface ProposalsQuery_proposalsConnection_edges_node_terms_change_UpdateNetworkParameter {
   __typename: "UpdateNetworkParameter";
-  networkParameter: ProposalsQuery_proposals_terms_change_UpdateNetworkParameter_networkParameter;
+  networkParameter: ProposalsQuery_proposalsConnection_edges_node_terms_change_UpdateNetworkParameter_networkParameter;
 }
 
-export type ProposalsQuery_proposals_terms_change = ProposalsQuery_proposals_terms_change_UpdateAsset | ProposalsQuery_proposals_terms_change_NewMarket | ProposalsQuery_proposals_terms_change_UpdateMarket | ProposalsQuery_proposals_terms_change_NewAsset | ProposalsQuery_proposals_terms_change_UpdateNetworkParameter;
+export type ProposalsQuery_proposalsConnection_edges_node_terms_change = ProposalsQuery_proposalsConnection_edges_node_terms_change_UpdateAsset | ProposalsQuery_proposalsConnection_edges_node_terms_change_NewMarket | ProposalsQuery_proposalsConnection_edges_node_terms_change_UpdateMarket | ProposalsQuery_proposalsConnection_edges_node_terms_change_NewAsset | ProposalsQuery_proposalsConnection_edges_node_terms_change_UpdateNetworkParameter;
 
-export interface ProposalsQuery_proposals_terms {
+export interface ProposalsQuery_proposalsConnection_edges_node_terms {
   __typename: "ProposalTerms";
   /**
    * RFC3339Nano time and date when voting closes for this proposal.
@@ -107,18 +123,18 @@ export interface ProposalsQuery_proposals_terms {
   /**
    * Actual change being introduced by the proposal - action the proposal triggers if passed and enacted.
    */
-  change: ProposalsQuery_proposals_terms_change;
+  change: ProposalsQuery_proposalsConnection_edges_node_terms_change;
 }
 
-export interface ProposalsQuery_proposals_votes_yes_votes_party_stake {
-  __typename: "PartyStake";
+export interface ProposalsQuery_proposalsConnection_edges_node_votes_yes_votes_party_stakingSummary {
+  __typename: "StakingSummary";
   /**
    * The stake currently available for the party
    */
   currentStakeAvailable: string;
 }
 
-export interface ProposalsQuery_proposals_votes_yes_votes_party {
+export interface ProposalsQuery_proposalsConnection_edges_node_votes_yes_votes_party {
   __typename: "Party";
   /**
    * Party identifier
@@ -127,10 +143,10 @@ export interface ProposalsQuery_proposals_votes_yes_votes_party {
   /**
    * The staking information for this Party
    */
-  stake: ProposalsQuery_proposals_votes_yes_votes_party_stake;
+  stakingSummary: ProposalsQuery_proposalsConnection_edges_node_votes_yes_votes_party_stakingSummary;
 }
 
-export interface ProposalsQuery_proposals_votes_yes_votes {
+export interface ProposalsQuery_proposalsConnection_edges_node_votes_yes_votes {
   __typename: "Vote";
   /**
    * The vote value cast
@@ -139,14 +155,14 @@ export interface ProposalsQuery_proposals_votes_yes_votes {
   /**
    * The party casting the vote
    */
-  party: ProposalsQuery_proposals_votes_yes_votes_party;
+  party: ProposalsQuery_proposalsConnection_edges_node_votes_yes_votes_party;
   /**
    * RFC3339Nano time and date when the vote reached Vega network
    */
   datetime: string;
 }
 
-export interface ProposalsQuery_proposals_votes_yes {
+export interface ProposalsQuery_proposalsConnection_edges_node_votes_yes {
   __typename: "ProposalVoteSide";
   /**
    * Total number of governance tokens from the votes cast for this side
@@ -159,18 +175,18 @@ export interface ProposalsQuery_proposals_votes_yes {
   /**
    * All votes cast for this side
    */
-  votes: ProposalsQuery_proposals_votes_yes_votes[] | null;
+  votes: ProposalsQuery_proposalsConnection_edges_node_votes_yes_votes[] | null;
 }
 
-export interface ProposalsQuery_proposals_votes_no_votes_party_stake {
-  __typename: "PartyStake";
+export interface ProposalsQuery_proposalsConnection_edges_node_votes_no_votes_party_stakingSummary {
+  __typename: "StakingSummary";
   /**
    * The stake currently available for the party
    */
   currentStakeAvailable: string;
 }
 
-export interface ProposalsQuery_proposals_votes_no_votes_party {
+export interface ProposalsQuery_proposalsConnection_edges_node_votes_no_votes_party {
   __typename: "Party";
   /**
    * Party identifier
@@ -179,10 +195,10 @@ export interface ProposalsQuery_proposals_votes_no_votes_party {
   /**
    * The staking information for this Party
    */
-  stake: ProposalsQuery_proposals_votes_no_votes_party_stake;
+  stakingSummary: ProposalsQuery_proposalsConnection_edges_node_votes_no_votes_party_stakingSummary;
 }
 
-export interface ProposalsQuery_proposals_votes_no_votes {
+export interface ProposalsQuery_proposalsConnection_edges_node_votes_no_votes {
   __typename: "Vote";
   /**
    * The vote value cast
@@ -191,14 +207,14 @@ export interface ProposalsQuery_proposals_votes_no_votes {
   /**
    * The party casting the vote
    */
-  party: ProposalsQuery_proposals_votes_no_votes_party;
+  party: ProposalsQuery_proposalsConnection_edges_node_votes_no_votes_party;
   /**
    * RFC3339Nano time and date when the vote reached Vega network
    */
   datetime: string;
 }
 
-export interface ProposalsQuery_proposals_votes_no {
+export interface ProposalsQuery_proposalsConnection_edges_node_votes_no {
   __typename: "ProposalVoteSide";
   /**
    * Total number of governance tokens from the votes cast for this side
@@ -211,27 +227,31 @@ export interface ProposalsQuery_proposals_votes_no {
   /**
    * All votes cast for this side
    */
-  votes: ProposalsQuery_proposals_votes_no_votes[] | null;
+  votes: ProposalsQuery_proposalsConnection_edges_node_votes_no_votes[] | null;
 }
 
-export interface ProposalsQuery_proposals_votes {
+export interface ProposalsQuery_proposalsConnection_edges_node_votes {
   __typename: "ProposalVotes";
   /**
    * Yes votes cast for this proposal
    */
-  yes: ProposalsQuery_proposals_votes_yes;
+  yes: ProposalsQuery_proposalsConnection_edges_node_votes_yes;
   /**
    * No votes cast for this proposal
    */
-  no: ProposalsQuery_proposals_votes_no;
+  no: ProposalsQuery_proposalsConnection_edges_node_votes_no;
 }
 
-export interface ProposalsQuery_proposals {
+export interface ProposalsQuery_proposalsConnection_edges_node {
   __typename: "Proposal";
   /**
    * Proposal ID that is filled by Vega once proposal reaches the network
    */
   id: string | null;
+  /**
+   * Rationale behind the proposal
+   */
+  rationale: ProposalsQuery_proposalsConnection_edges_node_rationale;
   /**
    * A UUID reference to aid tracking proposals on Vega
    */
@@ -251,20 +271,36 @@ export interface ProposalsQuery_proposals {
   /**
    * Party that prepared the proposal
    */
-  party: ProposalsQuery_proposals_party;
+  party: ProposalsQuery_proposalsConnection_edges_node_party;
   /**
    * Terms of the proposal
    */
-  terms: ProposalsQuery_proposals_terms;
+  terms: ProposalsQuery_proposalsConnection_edges_node_terms;
   /**
    * Votes cast for this proposal
    */
-  votes: ProposalsQuery_proposals_votes;
+  votes: ProposalsQuery_proposalsConnection_edges_node_votes;
+}
+
+export interface ProposalsQuery_proposalsConnection_edges {
+  __typename: "ProposalEdge";
+  /**
+   * The proposal data
+   */
+  node: ProposalsQuery_proposalsConnection_edges_node;
+}
+
+export interface ProposalsQuery_proposalsConnection {
+  __typename: "ProposalsConnection";
+  /**
+   * List of proposals available for the connection
+   */
+  edges: (ProposalsQuery_proposalsConnection_edges | null)[] | null;
 }
 
 export interface ProposalsQuery {
   /**
    * All governance proposals in the Vega network
    */
-  proposals: ProposalsQuery_proposals[] | null;
+  proposalsConnection: ProposalsQuery_proposalsConnection | null;
 }

apps/explorer/src/app/routes/governance/__generated___/Proposals.ts

@@ -0,0 +1,114 @@
+import { Schema as Types } from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type ProposalsQueryQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type ProposalsQueryQuery = { __typename?: 'Query', proposals?: Array<{ __typename?: 'Proposal', id?: string | null, reference: string, state: Types.ProposalState, datetime: string, rejectionReason?: Types.ProposalRejectionReason | null, party: { __typename?: 'Party', id: string }, terms: { __typename?: 'ProposalTerms', closingDatetime: string, enactmentDatetime?: string | null, change: { __typename: 'NewAsset', symbol: string, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string } } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket', instrument: { __typename?: 'InstrumentConfiguration', name: string } } | { __typename?: 'UpdateAsset' } | { __typename?: 'UpdateMarket', marketId: string } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } }, votes: { __typename?: 'ProposalVotes', yes: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, votes?: Array<{ __typename?: 'Vote', value: Types.VoteValue, datetime: string, party: { __typename?: 'Party', id: string, stake: { __typename?: 'PartyStake', currentStakeAvailable: string } } }> | null }, no: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, votes?: Array<{ __typename?: 'Vote', value: Types.VoteValue, datetime: string, party: { __typename?: 'Party', id: string, stake: { __typename?: 'PartyStake', currentStakeAvailable: string } } }> | null } } }> | null };
+
+
+export const ProposalsQueryDocument = gql`
+    query ProposalsQuery {
+  proposals {
+    id
+    reference
+    state
+    datetime
+    rejectionReason
+    party {
+      id
+    }
+    terms {
+      closingDatetime
+      enactmentDatetime
+      change {
+        ... on NewMarket {
+          instrument {
+            name
+          }
+        }
+        ... on UpdateMarket {
+          marketId
+        }
+        ... on NewAsset {
+          __typename
+          symbol
+          source {
+            ... on BuiltinAsset {
+              maxFaucetAmountMint
+            }
+            ... on ERC20 {
+              contractAddress
+            }
+          }
+        }
+        ... on UpdateNetworkParameter {
+          networkParameter {
+            key
+            value
+          }
+        }
+      }
+    }
+    votes {
+      yes {
+        totalTokens
+        totalNumber
+        votes {
+          value
+          party {
+            id
+            stake {
+              currentStakeAvailable
+            }
+          }
+          datetime
+        }
+      }
+      no {
+        totalTokens
+        totalNumber
+        votes {
+          value
+          party {
+            id
+            stake {
+              currentStakeAvailable
+            }
+          }
+          datetime
+        }
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useProposalsQueryQuery__
+ *
+ * To run a query within a React component, call `useProposalsQueryQuery` and pass it any options that fit your needs.
+ * When your component renders, `useProposalsQueryQuery` 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 } = useProposalsQueryQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useProposalsQueryQuery(baseOptions?: Apollo.QueryHookOptions<ProposalsQueryQuery, ProposalsQueryQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ProposalsQueryQuery, ProposalsQueryQueryVariables>(ProposalsQueryDocument, options);
+      }
+export function useProposalsQueryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ProposalsQueryQuery, ProposalsQueryQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ProposalsQueryQuery, ProposalsQueryQueryVariables>(ProposalsQueryDocument, options);
+        }
+export type ProposalsQueryQueryHookResult = ReturnType<typeof useProposalsQueryQuery>;
+export type ProposalsQueryLazyQueryHookResult = ReturnType<typeof useProposalsQueryLazyQuery>;
+export type ProposalsQueryQueryResult = Apollo.QueryResult<ProposalsQueryQuery, ProposalsQueryQueryVariables>;

apps/explorer/src/app/routes/governance/index.tsx

@@ -1,98 +1,94 @@
+import compact from 'lodash/compact';
 import { gql, useQuery } from '@apollo/client';
 import { t } from '@vegaprotocol/react-helpers';
 import React from 'react';
 import { RouteTitle } from '../../components/route-title';
 import { SubHeading } from '../../components/sub-heading';
 import { SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
+import { getProposals } from '@vegaprotocol/governance';
 import type {
   ProposalsQuery,
-  ProposalsQuery_proposals_terms_change,
+  ProposalsQuery_proposalsConnection_edges_node,
 } from './__generated__/ProposalsQuery';
 
-export function getProposalName(change: ProposalsQuery_proposals_terms_change) {
-  if (change.__typename === 'NewAsset') {
-    return t(`New asset: ${change.symbol}`);
-  } else if (change.__typename === 'NewMarket') {
-    return t(`New market: ${change.instrument.name}`);
-  } else if (change.__typename === 'UpdateMarket') {
-    return t(`Update market: ${change.marketId}`);
-  } else if (change.__typename === 'UpdateNetworkParameter') {
-    return t(`Update network: ${change.networkParameter.key}`);
-  }
-
-  return t('Unknown proposal');
-}
-
-const PROPOSAL_QUERY = gql`
+const PROPOSALS_QUERY = gql`
   query ProposalsQuery {
-    proposals {
-      id
-      reference
-      state
-      datetime
-      rejectionReason
-      party {
-        id
-      }
-      terms {
-        closingDatetime
-        enactmentDatetime
-        change {
-          ... on NewMarket {
-            instrument {
-              name
-            }
+    proposalsConnection {
+      edges {
+        node {
+          id
+          rationale {
+            title
+            description
           }
-          ... on UpdateMarket {
-            marketId
+          reference
+          state
+          datetime
+          rejectionReason
+          party {
+            id
           }
-          ... on NewAsset {
-            __typename
-            symbol
-            source {
-              ... on BuiltinAsset {
-                maxFaucetAmountMint
+          terms {
+            closingDatetime
+            enactmentDatetime
+            change {
+              ... on NewMarket {
+                instrument {
+                  name
+                }
               }
-              ... on ERC20 {
-                contractAddress
+              ... on UpdateMarket {
+                marketId
+              }
+              ... on NewAsset {
+                __typename
+                symbol
+                source {
+                  ... on BuiltinAsset {
+                    maxFaucetAmountMint
+                  }
+                  ... on ERC20 {
+                    contractAddress
+                  }
+                }
+              }
+              ... on UpdateNetworkParameter {
+                networkParameter {
+                  key
+                  value
+                }
               }
             }
           }
-          ... on UpdateNetworkParameter {
-            networkParameter {
-              key
-              value
-            }
-          }
-        }
-      }
-      votes {
-        yes {
-          totalTokens
-          totalNumber
           votes {
-            value
-            party {
-              id
-              stake {
-                currentStakeAvailable
+            yes {
+              totalTokens
+              totalNumber
+              votes {
+                value
+                party {
+                  id
+                  stakingSummary {
+                    currentStakeAvailable
+                  }
+                }
+                datetime
               }
             }
-            datetime
-          }
-        }
-        no {
-          totalTokens
-          totalNumber
-          votes {
-            value
-            party {
-              id
-              stake {
-                currentStakeAvailable
+            no {
+              totalTokens
+              totalNumber
+              votes {
+                value
+                party {
+                  id
+                  stakingSummary {
+                    currentStakeAvailable
+                  }
+                }
+                datetime
               }
             }
-            datetime
           }
         }
       }
@@ -101,19 +97,25 @@ const PROPOSAL_QUERY = gql`
 `;
 
 const Governance = () => {
-  const { data } = useQuery<ProposalsQuery>(PROPOSAL_QUERY, {
+  const { data } = useQuery<ProposalsQuery>(PROPOSALS_QUERY, {
     errorPolicy: 'ignore',
   });
 
+  const proposals = compact(data?.proposalsConnection?.edges).map(
+    (e) => e.node
+  );
+
   if (!data) return null;
   return (
     <section>
       <RouteTitle data-testid="governance-header">
         {t('Governance Proposals')}
       </RouteTitle>
-      {data.proposals?.map((p) => (
+      {proposals.map((p) => (
         <React.Fragment key={p.id}>
-          <SubHeading>{getProposalName(p.terms.change)}</SubHeading>
+          <SubHeading>
+            {p.rationale.title || p.rationale.description}
+          </SubHeading>
           <SyntaxHighlighter data={p} />
         </React.Fragment>
       ))}

apps/explorer/src/app/routes/markets/Markets.graphql

@@ -0,0 +1,133 @@
+query MarketsQuery {
+  markets {
+    id
+    fees {
+      factors {
+        makerFee
+        infrastructureFee
+        liquidityFee
+      }
+    }
+    tradableInstrument {
+      instrument {
+        name
+        metadata {
+          tags
+        }
+        id
+        code
+        product {
+          ... on Future {
+            settlementAsset {
+              id
+              name
+              decimals
+              globalRewardPoolAccount {
+                balance
+              }
+            }
+          }
+        }
+      }
+      riskModel {
+        ... on LogNormalRiskModel {
+          tau
+          riskAversionParameter
+          params {
+            r
+            sigma
+            mu
+          }
+        }
+        ... on SimpleRiskModel {
+          params {
+            factorLong
+            factorShort
+          }
+        }
+      }
+      marginCalculator {
+        scalingFactors {
+          searchLevel
+          initialMargin
+          collateralRelease
+        }
+      }
+    }
+    decimalPlaces
+    openingAuction {
+      durationSecs
+      volume
+    }
+    priceMonitoringSettings {
+      parameters {
+        triggers {
+          horizonSecs
+          probability
+          auctionExtensionSecs
+        }
+      }
+    }
+    liquidityMonitoringParameters {
+      triggeringRatio
+      targetStakeParameters {
+        timeWindow
+        scalingFactor
+      }
+    }
+    tradingMode
+    state
+    proposal {
+      id
+    }
+    state
+    accounts {
+      asset {
+        id
+        name
+      }
+      balance
+      type
+    }
+    data {
+      markPrice
+      bestBidPrice
+      bestBidVolume
+      bestOfferPrice
+      bestOfferVolume
+      bestStaticBidPrice
+      bestStaticBidVolume
+      bestStaticOfferPrice
+      bestStaticOfferVolume
+      midPrice
+      staticMidPrice
+      timestamp
+      openInterest
+      auctionEnd
+      auctionStart
+      indicativePrice
+      indicativeVolume
+      trigger
+      extensionTrigger
+      targetStake
+      suppliedStake
+      priceMonitoringBounds {
+        minValidPrice
+        maxValidPrice
+        trigger {
+          auctionExtensionSecs
+          probability
+        }
+        referencePrice
+      }
+      marketValueProxy
+      liquidityProviderFeeShare {
+        party {
+          id
+        }
+        equityLikeShare
+        averageEntryValuation
+      }
+    }
+  }
+}

apps/explorer/src/app/routes/markets/__generated__/MarketsQuery.ts

@@ -465,10 +465,6 @@ export interface MarketsQuery_markets {
    * Market ID
    */
   id: string;
-  /**
-   * Market full name
-   */
-  name: string;
   /**
    * Fees related data
    */

apps/explorer/src/app/routes/markets/__generated___/Markets.ts

@@ -0,0 +1,173 @@
+import { Schema as Types } from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type MarketsQueryQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type MarketsQueryQuery = { __typename?: 'Query', markets?: Array<{ __typename?: 'Market', id: string, decimalPlaces: number, tradingMode: Types.MarketTradingMode, state: Types.MarketState, fees: { __typename?: 'Fees', factors: { __typename?: 'FeeFactors', makerFee: string, infrastructureFee: string, liquidityFee: string } }, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, id: string, code: string, metadata: { __typename?: 'InstrumentMetadata', tags?: Array<string> | null }, product: { __typename?: 'Future', settlementAsset: { __typename?: 'Asset', id: string, name: string, decimals: number, globalRewardPoolAccount?: { __typename?: 'Account', balance: string } | null } } }, riskModel: { __typename?: 'LogNormalRiskModel', tau: number, riskAversionParameter: number, params: { __typename?: 'LogNormalModelParams', r: number, sigma: number, mu: number } } | { __typename?: 'SimpleRiskModel', params: { __typename?: 'SimpleRiskModelParams', factorLong: number, factorShort: number } }, marginCalculator?: { __typename?: 'MarginCalculator', scalingFactors: { __typename?: 'ScalingFactors', searchLevel: number, initialMargin: number, collateralRelease: number } } | null }, openingAuction: { __typename?: 'AuctionDuration', durationSecs: number, volume: number }, priceMonitoringSettings: { __typename?: 'PriceMonitoringSettings', parameters?: { __typename?: 'PriceMonitoringParameters', triggers?: Array<{ __typename?: 'PriceMonitoringTrigger', horizonSecs: number, probability: number, auctionExtensionSecs: number }> | null } | null }, liquidityMonitoringParameters: { __typename?: 'LiquidityMonitoringParameters', triggeringRatio: number, targetStakeParameters: { __typename?: 'TargetStakeParameters', timeWindow: number, scalingFactor: number } }, proposal?: { __typename?: 'Proposal', id?: string | null } | null, accounts?: Array<{ __typename?: 'Account', balance: string, type: Types.AccountType, asset: { __typename?: 'Asset', id: string, name: string } }> | null, data?: { __typename?: 'MarketData', markPrice: string, bestBidPrice: string, bestBidVolume: string, bestOfferPrice: string, bestOfferVolume: string, bestStaticBidPrice: string, bestStaticBidVolume: string, bestStaticOfferPrice: string, bestStaticOfferVolume: string, midPrice: string, staticMidPrice: string, timestamp: string, openInterest: string, auctionEnd?: string | null, auctionStart?: string | null, indicativePrice: string, indicativeVolume: string, trigger: Types.AuctionTrigger, extensionTrigger: Types.AuctionTrigger, targetStake?: string | null, suppliedStake?: string | null, marketValueProxy: string, priceMonitoringBounds?: Array<{ __typename?: 'PriceMonitoringBounds', minValidPrice: string, maxValidPrice: string, referencePrice: string, trigger: { __typename?: 'PriceMonitoringTrigger', auctionExtensionSecs: number, probability: number } }> | null, liquidityProviderFeeShare?: Array<{ __typename?: 'LiquidityProviderFeeShare', equityLikeShare: string, averageEntryValuation: string, party: { __typename?: 'Party', id: string } }> | null } | null }> | null };
+
+
+export const MarketsQueryDocument = gql`
+    query MarketsQuery {
+  markets {
+    id
+    fees {
+      factors {
+        makerFee
+        infrastructureFee
+        liquidityFee
+      }
+    }
+    tradableInstrument {
+      instrument {
+        name
+        metadata {
+          tags
+        }
+        id
+        code
+        product {
+          ... on Future {
+            settlementAsset {
+              id
+              name
+              decimals
+              globalRewardPoolAccount {
+                balance
+              }
+            }
+          }
+        }
+      }
+      riskModel {
+        ... on LogNormalRiskModel {
+          tau
+          riskAversionParameter
+          params {
+            r
+            sigma
+            mu
+          }
+        }
+        ... on SimpleRiskModel {
+          params {
+            factorLong
+            factorShort
+          }
+        }
+      }
+      marginCalculator {
+        scalingFactors {
+          searchLevel
+          initialMargin
+          collateralRelease
+        }
+      }
+    }
+    decimalPlaces
+    openingAuction {
+      durationSecs
+      volume
+    }
+    priceMonitoringSettings {
+      parameters {
+        triggers {
+          horizonSecs
+          probability
+          auctionExtensionSecs
+        }
+      }
+    }
+    liquidityMonitoringParameters {
+      triggeringRatio
+      targetStakeParameters {
+        timeWindow
+        scalingFactor
+      }
+    }
+    tradingMode
+    state
+    proposal {
+      id
+    }
+    state
+    accounts {
+      asset {
+        id
+        name
+      }
+      balance
+      type
+    }
+    data {
+      markPrice
+      bestBidPrice
+      bestBidVolume
+      bestOfferPrice
+      bestOfferVolume
+      bestStaticBidPrice
+      bestStaticBidVolume
+      bestStaticOfferPrice
+      bestStaticOfferVolume
+      midPrice
+      staticMidPrice
+      timestamp
+      openInterest
+      auctionEnd
+      auctionStart
+      indicativePrice
+      indicativeVolume
+      trigger
+      extensionTrigger
+      targetStake
+      suppliedStake
+      priceMonitoringBounds {
+        minValidPrice
+        maxValidPrice
+        trigger {
+          auctionExtensionSecs
+          probability
+        }
+        referencePrice
+      }
+      marketValueProxy
+      liquidityProviderFeeShare {
+        party {
+          id
+        }
+        equityLikeShare
+        averageEntryValuation
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useMarketsQueryQuery__
+ *
+ * To run a query within a React component, call `useMarketsQueryQuery` and pass it any options that fit your needs.
+ * When your component renders, `useMarketsQueryQuery` 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 } = useMarketsQueryQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useMarketsQueryQuery(baseOptions?: Apollo.QueryHookOptions<MarketsQueryQuery, MarketsQueryQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MarketsQueryQuery, MarketsQueryQueryVariables>(MarketsQueryDocument, options);
+      }
+export function useMarketsQueryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MarketsQueryQuery, MarketsQueryQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MarketsQueryQuery, MarketsQueryQueryVariables>(MarketsQueryDocument, options);
+        }
+export type MarketsQueryQueryHookResult = ReturnType<typeof useMarketsQueryQuery>;
+export type MarketsQueryLazyQueryHookResult = ReturnType<typeof useMarketsQueryLazyQuery>;
+export type MarketsQueryQueryResult = Apollo.QueryResult<MarketsQueryQuery, MarketsQueryQueryVariables>;

apps/explorer/src/app/routes/markets/index.tsx

@@ -11,7 +11,6 @@ const MARKETS_QUERY = gql`
   query MarketsQuery {
     markets {
       id
-      name
       fees {
         factors {
           makerFee
@@ -154,7 +153,9 @@ const Markets = () => {
       {data?.markets
         ? data.markets.map((m) => (
             <React.Fragment key={m.id}>
-              <SubHeading data-testid="markets-header">{m.name}</SubHeading>
+              <SubHeading data-testid="markets-header">
+                {m.tradableInstrument.instrument.name}
+              </SubHeading>
               <SyntaxHighlighter data={m} />
             </React.Fragment>
           ))

apps/explorer/src/app/routes/network-parameters/NetworkParameters.graphql

@@ -0,0 +1,6 @@
+query NetworkParametersQuery {
+  networkParameters {
+    key
+    value
+  }
+}

apps/explorer/src/app/routes/network-parameters/__generated___/NetworkParameters.ts

@@ -0,0 +1,46 @@
+import { Schema as Types } from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type NetworkParametersQueryQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type NetworkParametersQueryQuery = { __typename?: 'Query', networkParameters?: Array<{ __typename?: 'NetworkParameter', key: string, value: string }> | null };
+
+
+export const NetworkParametersQueryDocument = gql`
+    query NetworkParametersQuery {
+  networkParameters {
+    key
+    value
+  }
+}
+    `;
+
+/**
+ * __useNetworkParametersQueryQuery__
+ *
+ * To run a query within a React component, call `useNetworkParametersQueryQuery` and pass it any options that fit your needs.
+ * When your component renders, `useNetworkParametersQueryQuery` 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 } = useNetworkParametersQueryQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useNetworkParametersQueryQuery(baseOptions?: Apollo.QueryHookOptions<NetworkParametersQueryQuery, NetworkParametersQueryQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<NetworkParametersQueryQuery, NetworkParametersQueryQueryVariables>(NetworkParametersQueryDocument, options);
+      }
+export function useNetworkParametersQueryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<NetworkParametersQueryQuery, NetworkParametersQueryQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<NetworkParametersQueryQuery, NetworkParametersQueryQueryVariables>(NetworkParametersQueryDocument, options);
+        }
+export type NetworkParametersQueryQueryHookResult = ReturnType<typeof useNetworkParametersQueryQuery>;
+export type NetworkParametersQueryLazyQueryHookResult = ReturnType<typeof useNetworkParametersQueryLazyQuery>;
+export type NetworkParametersQueryQueryResult = Apollo.QueryResult<NetworkParametersQueryQuery, NetworkParametersQueryQueryVariables>;

apps/explorer/src/app/routes/oracles/OracleSpecs.graphql

@@ -0,0 +1,22 @@
+query OracleSpecs {
+  oracleSpecs {
+    status
+    id
+    createdAt
+    updatedAt
+    pubKeys
+    filters {
+      key {
+        name
+        type
+      }
+      conditions {
+        value
+        operator
+      }
+    }
+    data {
+      pubKeys
+    }
+  }
+}

apps/explorer/src/app/routes/oracles/__generated___/OracleSpecs.ts

@@ -0,0 +1,62 @@
+import { Schema as Types } from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type OracleSpecsQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type OracleSpecsQuery = { __typename?: 'Query', oracleSpecs?: Array<{ __typename?: 'OracleSpec', status: Types.OracleSpecStatus, id: string, createdAt: string, updatedAt?: string | null, pubKeys?: Array<string> | null, filters?: Array<{ __typename?: 'Filter', key: { __typename?: 'PropertyKey', name?: string | null, type: Types.PropertyKeyType }, conditions?: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator }> | null }> | null, data: Array<{ __typename?: 'OracleData', pubKeys?: Array<string> | null }> }> | null };
+
+
+export const OracleSpecsDocument = gql`
+    query OracleSpecs {
+  oracleSpecs {
+    status
+    id
+    createdAt
+    updatedAt
+    pubKeys
+    filters {
+      key {
+        name
+        type
+      }
+      conditions {
+        value
+        operator
+      }
+    }
+    data {
+      pubKeys
+    }
+  }
+}
+    `;
+
+/**
+ * __useOracleSpecsQuery__
+ *
+ * To run a query within a React component, call `useOracleSpecsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useOracleSpecsQuery` 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 } = useOracleSpecsQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useOracleSpecsQuery(baseOptions?: Apollo.QueryHookOptions<OracleSpecsQuery, OracleSpecsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<OracleSpecsQuery, OracleSpecsQueryVariables>(OracleSpecsDocument, options);
+      }
+export function useOracleSpecsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<OracleSpecsQuery, OracleSpecsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<OracleSpecsQuery, OracleSpecsQueryVariables>(OracleSpecsDocument, options);
+        }
+export type OracleSpecsQueryHookResult = ReturnType<typeof useOracleSpecsQuery>;
+export type OracleSpecsLazyQueryHookResult = ReturnType<typeof useOracleSpecsLazyQuery>;
+export type OracleSpecsQueryResult = Apollo.QueryResult<OracleSpecsQuery, OracleSpecsQueryVariables>;

apps/explorer/src/app/routes/parties/PartyAssets.graphql

@@ -0,0 +1,32 @@
+query PartyAssetsQuery($partyId: ID!) {
+  party(id: $partyId) {
+    id
+    delegations {
+      amount
+      node {
+        id
+        name
+      }
+      epoch
+    }
+    stake {
+      currentStakeAvailable
+    }
+    accounts {
+      asset {
+        name
+        id
+        decimals
+        symbol
+        source {
+          __typename
+          ... on ERC20 {
+            contractAddress
+          }
+        }
+      }
+      type
+      balance
+    }
+  }
+}

apps/explorer/src/app/routes/parties/__generated___/PartyAssets.ts

@@ -0,0 +1,75 @@
+import { Schema as Types } from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type PartyAssetsQueryQueryVariables = Types.Exact<{
+  partyId: Types.Scalars['ID'];
+}>;
+
+
+export type PartyAssetsQueryQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, delegations?: Array<{ __typename?: 'Delegation', amount: string, epoch: number, node: { __typename?: 'Node', id: string, name: string } }> | null, stake: { __typename?: 'PartyStake', currentStakeAvailable: string }, accounts?: Array<{ __typename?: 'Account', type: Types.AccountType, balance: string, asset: { __typename?: 'Asset', name: string, id: string, decimals: number, symbol: string, source: { __typename: 'BuiltinAsset' } | { __typename: 'ERC20', contractAddress: string } } }> | null } | null };
+
+
+export const PartyAssetsQueryDocument = gql`
+    query PartyAssetsQuery($partyId: ID!) {
+  party(id: $partyId) {
+    id
+    delegations {
+      amount
+      node {
+        id
+        name
+      }
+      epoch
+    }
+    stake {
+      currentStakeAvailable
+    }
+    accounts {
+      asset {
+        name
+        id
+        decimals
+        symbol
+        source {
+          __typename
+          ... on ERC20 {
+            contractAddress
+          }
+        }
+      }
+      type
+      balance
+    }
+  }
+}
+    `;
+
+/**
+ * __usePartyAssetsQueryQuery__
+ *
+ * To run a query within a React component, call `usePartyAssetsQueryQuery` and pass it any options that fit your needs.
+ * When your component renders, `usePartyAssetsQueryQuery` 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 } = usePartyAssetsQueryQuery({
+ *   variables: {
+ *      partyId: // value for 'partyId'
+ *   },
+ * });
+ */
+export function usePartyAssetsQueryQuery(baseOptions: Apollo.QueryHookOptions<PartyAssetsQueryQuery, PartyAssetsQueryQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<PartyAssetsQueryQuery, PartyAssetsQueryQueryVariables>(PartyAssetsQueryDocument, options);
+      }
+export function usePartyAssetsQueryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<PartyAssetsQueryQuery, PartyAssetsQueryQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<PartyAssetsQueryQuery, PartyAssetsQueryQueryVariables>(PartyAssetsQueryDocument, options);
+        }
+export type PartyAssetsQueryQueryHookResult = ReturnType<typeof usePartyAssetsQueryQuery>;
+export type PartyAssetsQueryLazyQueryHookResult = ReturnType<typeof usePartyAssetsQueryLazyQuery>;
+export type PartyAssetsQueryQueryResult = Apollo.QueryResult<PartyAssetsQueryQuery, PartyAssetsQueryQueryVariables>;

apps/explorer/src/app/routes/validators/Nodes.graphql

@@ -0,0 +1,23 @@
+query NodesQuery {
+  nodes {
+    id
+    name
+    infoUrl
+    avatarUrl
+    pubkey
+    tmPubkey
+    ethereumAddress
+    location
+    stakedByOperator
+    stakedByDelegates
+    stakedTotal
+    pendingStake
+    epochData {
+      total
+      offline
+      online
+    }
+    status
+    name
+  }
+}

apps/explorer/src/app/routes/validators/__generated___/Nodes.ts

@@ -0,0 +1,63 @@
+import { Schema as Types } from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type NodesQueryQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type NodesQueryQuery = { __typename?: 'Query', nodes?: Array<{ __typename?: 'Node', id: string, name: string, infoUrl: string, avatarUrl?: string | null, pubkey: string, tmPubkey: string, ethereumAddress: string, location: string, stakedByOperator: string, stakedByDelegates: string, stakedTotal: string, pendingStake: string, status: Types.NodeStatus, epochData?: { __typename?: 'EpochData', total: number, offline: number, online: number } | null }> | null };
+
+
+export const NodesQueryDocument = gql`
+    query NodesQuery {
+  nodes {
+    id
+    name
+    infoUrl
+    avatarUrl
+    pubkey
+    tmPubkey
+    ethereumAddress
+    location
+    stakedByOperator
+    stakedByDelegates
+    stakedTotal
+    pendingStake
+    epochData {
+      total
+      offline
+      online
+    }
+    status
+    name
+  }
+}
+    `;
+
+/**
+ * __useNodesQueryQuery__
+ *
+ * To run a query within a React component, call `useNodesQueryQuery` and pass it any options that fit your needs.
+ * When your component renders, `useNodesQueryQuery` 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 } = useNodesQueryQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useNodesQueryQuery(baseOptions?: Apollo.QueryHookOptions<NodesQueryQuery, NodesQueryQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<NodesQueryQuery, NodesQueryQueryVariables>(NodesQueryDocument, options);
+      }
+export function useNodesQueryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<NodesQueryQuery, NodesQueryQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<NodesQueryQuery, NodesQueryQueryVariables>(NodesQueryDocument, options);
+        }
+export type NodesQueryQueryHookResult = ReturnType<typeof useNodesQueryQuery>;
+export type NodesQueryLazyQueryHookResult = ReturnType<typeof useNodesQueryLazyQuery>;
+export type NodesQueryQueryResult = Apollo.QueryResult<NodesQueryQuery, NodesQueryQueryVariables>;

apps/static/src/assets/testnet-tranches.json

@@ -89,7 +89,7 @@
     "tranche_end": "2022-10-12T00:53:20.000Z",
     "total_added": "1010.000000000000000001",
     "total_removed": "668.4622323651",
-    "locked_amount": "101.09377473363779510010009284627092851",
+    "locked_amount": "81.0314903602232870000802291983764587",
     "deposits": [
       {
         "amount": "1000",

apps/token-e2e/src/integration/view/home.cy.js

@@ -3,7 +3,7 @@ const navHome = '[href="/"]';
 const navVesting = '[href="/vesting"]';
 const navStaking = '[href="/staking"]';
 const navRewards = '[href="/rewards"]';
-const navWithdraw = '[href="/withdraw"]';
+const navWithdraw = '[href="/withdrawals"]';
 const navGovernance = '[href="/governance"]';
 
 const tokenDetailsTable = '.token-details';

apps/token-e2e/src/integration/view/withdraw.cy.js

@@ -1,18 +1,17 @@
 const connectToVegaBtn = '[data-testid="connect-to-vega-wallet-btn"]';
-const warning = '[data-testid="callout"]';
 
 context('Withdraw Page - verify elements on page', function () {
-  before('navigate to withdraw page', function () {
-    cy.visit('/').navigate_to('withdraw');
+  before('navigate to withdrawals page', function () {
+    cy.visit('/').navigate_to('withdrawals');
   });
 
   describe('with wallets disconnected', function () {
     it('should have withdraw tab highlighted', function () {
-      cy.verify_tab_highlighted('withdraw');
+      cy.verify_tab_highlighted('withdrawals');
     });
 
     it('should have WITHDRAW header visible', function () {
-      cy.verify_page_header('Withdraw');
+      cy.verify_page_header('Withdrawals');
     });
 
     it('should have connect Vega wallet button', function () {
@@ -20,9 +19,5 @@ context('Withdraw Page - verify elements on page', function () {
         .should('be.visible')
         .and('have.text', 'Connect Vega wallet');
     });
-
-    it('should have withdraw information box', function () {
-      cy.get(warning).should('be.visible');
-    });
   });
 });

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

@@ -12,7 +12,7 @@ const navigation = {
   vesting: '[href="/vesting"]',
   staking: '[href="/staking"]',
   rewards: '[href="/rewards"]',
-  withdraw: '[href="/withdraw"]',
+  withdrawals: '[href="/withdrawals"]',
   governance: '[href="/governance"]',
   pageSpinner: '[data-testid="splash-loader"]',
 };

apps/token/.env

@@ -1,10 +1,10 @@
 # App configuration variables
 NX_VEGA_ENV=TESTNET
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/testnet-network.json
-NX_VEGA_URL=https://api.n11.testnet.vega.xyz/graphql
+NX_VEGA_URL=https://api.n07.testnet.vega.xyz/graphql
 NX_ETHEREUM_PROVIDER_URL=https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://ropsten.etherscan.io
-NX_VEGA_REST=https://api.n11.testnet.vega.xyz
+NX_VEGA_REST=https://api.n07.testnet.vega.xyz
 NX_FAIRGROUND=false
 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_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions

apps/token/.env.capsule

@@ -1,5 +1,5 @@
 # App configuration variables
-NX_VEGA_ENV=TESTNET
+NX_VEGA_ENV=CUSTOM
 NX_ETHEREUM_PROVIDER_URL=http://localhost:8545
 NX_ETHERSCAN_URL=https://ropsten.etherscan.io
 NX_FAIRGROUND=false

apps/token/.eslintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": ["plugin:@nrwl/nx/react", "../../.eslintrc.json"],
-  "ignorePatterns": ["!**/*", "__generated__"],
+  "ignorePatterns": ["!**/*", "__generated__", "__generated___"],
   "overrides": [
     {
       "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],

apps/token/client.graphql

@@ -0,0 +1,43 @@
+extend type Delegation {
+  "The amount field formatted by the client"
+  amountFormatted: String!
+}
+
+extend type PartyStake {
+  "The currently available stake formatted by the client"
+  currentStakeAvailableFormatted: String!
+}
+
+extend type NodeData {
+  "The total staked field formatted by the client"
+  stakedTotalFormatted: String!
+}
+
+extend type Node {
+  "The total staked field formatted by the client"
+  stakedTotalFormatted: String!
+
+  "The pending staked field formatted by the client"
+  pendingStakeFormatted: String!
+
+  "The stakes by operator field formatted by the client"
+  stakedByOperatorFormatted: String!
+
+  "The stakes by delegates field formatted by the client"
+  stakedByDelegatesFormatted: String!
+}
+
+extend type Reward {
+  "The amount field formatted by the client"
+  amountFormatted: String!
+}
+
+extend type RewardPerAssetDetail {
+  "The total amount field formatted by the client"
+  totalAmountFormatted: String!
+}
+
+extend type Account {
+  "The balance field formatted by the client"
+  balanceFormatted: String!
+}

apps/token/src/components/nav/nav.tsx

@@ -224,7 +224,7 @@ const NavLinks = ({
     { route: Routes.VESTING, text: t('Vesting') },
     { route: Routes.STAKING, text: t('Staking') },
     { route: Routes.REWARDS, text: t('Rewards') },
-    { route: Routes.WITHDRAW, text: t('Withdraw') },
+    { route: Routes.WITHDRAWALS, text: t('Withdraw') },
     { route: Routes.GOVERNANCE, text: t('Governance') },
   ];
   const navClasses = classNames('flex', {

apps/token/src/components/token-input/token-input.tsx

@@ -37,7 +37,7 @@ export const AmountInput = ({
 }) => {
   const { t } = useTranslation();
   return (
-    <div className="flex">
+    <div className="flex gap-4">
       <div className="flex-1">
         <Input
           data-testid="token-amount-input"
@@ -61,14 +61,12 @@ export const AmountInput = ({
         />
       </div>
       {maximum && (
-        <div className="flex flex-col justify-center p-8 h-28 my-0 mx-8">
-          <ButtonLink
-            onClick={() => setAmount(maximum.toString())}
-            data-testid="token-amount-use-maximum"
-          >
-            {t('Use maximum')}
-          </ButtonLink>
-        </div>
+        <ButtonLink
+          onClick={() => setAmount(maximum.toString())}
+          data-testid="token-amount-use-maximum"
+        >
+          {t('Use maximum')}
+        </ButtonLink>
       )}
     </div>
   );
@@ -169,7 +167,7 @@ export const TokenInput = ({
   } else if (requireApproval) {
     approveContent = (
       <Callout iconName="tick" intent={Intent.Success}>
-        <p>{`${currency} are approved for staking`}</p>
+        <p className="mb-0">{`${currency} are approved for staking`}</p>
       </Callout>
     );
   }
@@ -188,7 +186,7 @@ export const TokenInput = ({
           currency={currency}
         />
       </FormGroup>
-      {approveContent ? <div className="mb-24">{approveContent}</div> : null}
+      {approveContent ? <div className="mb-4">{approveContent}</div> : null}
       <Button
         data-testid="token-input-submit-button"
         fill={true}

apps/token/src/components/vega-wallet/Delegations.graphql

@@ -0,0 +1,37 @@
+query Delegations($partyId: ID!) {
+  epoch {
+    id
+  }
+  party(id: $partyId) {
+    id
+    delegations {
+      amountFormatted @client
+      amount
+      node {
+        id
+        name
+      }
+      epoch
+    }
+    stake {
+      currentStakeAvailable
+      currentStakeAvailableFormatted @client
+    }
+    accounts {
+      asset {
+        name
+        id
+        decimals
+        symbol
+        source {
+          __typename
+          ... on ERC20 {
+            contractAddress
+          }
+        }
+      }
+      type
+      balance
+    }
+  }
+}

apps/token/src/components/vega-wallet/__generated__/Delegations.ts

@@ -28,6 +28,9 @@ export interface Delegations_party_delegations_node {
 
 export interface Delegations_party_delegations {
   __typename: "Delegation";
+  /**
+   * The amount field formatted by the client
+   */
   amountFormatted: string;
   /**
    * Amount delegated
@@ -49,6 +52,9 @@ export interface Delegations_party_stake {
    * The stake currently available for the party
    */
   currentStakeAvailable: string;
+  /**
+   * The currently available stake formatted by the client
+   */
   currentStakeAvailableFormatted: string;
 }
 

apps/token/src/components/vega-wallet/__generated__/PartyDelegations.ts

@@ -1,52 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-// ====================================================
-// GraphQL query operation: PartyDelegations
-// ====================================================
-
-export interface PartyDelegations_epoch {
-  __typename: "Epoch";
-  /**
-   * Presumably this is an integer or something. If there's no such thing, disregard
-   */
-  id: string;
-}
-
-export interface PartyDelegations_party_delegations {
-  __typename: "Delegation";
-  /**
-   * Amount delegated
-   */
-  amount: string;
-  /**
-   * URL of node you are delegating to
-   */
-  node: string;
-  /**
-   * Epoch of delegation
-   */
-  epoch: number;
-}
-
-export interface PartyDelegations_party {
-  __typename: "Party";
-  delegations: PartyDelegations_party_delegations[] | null;
-}
-
-export interface PartyDelegations {
-  /**
-   * get data for a specific epoch, if id omitted it gets the current epoch
-   */
-  epoch: PartyDelegations_epoch;
-  /**
-   * An entity that is trading on the VEGA network
-   */
-  party: PartyDelegations_party | null;
-}
-
-export interface PartyDelegationsVariables {
-  partyId: string;
-}