fix: format

fix: imports
fix: format
2022-08-26 19:39:10 +02:00 · 2022-08-26 19:38:15 +02:00 · 2022-08-26 18:55:11 +02:00 · 2022-08-26 18:54:33 +02:00 · 2022-08-26 15:52:17 +02:00 · 2022-08-26 13:38:26 +02:00
527 changed files with 13805 additions and 6197 deletions
@@ -11,7 +11,7 @@ on:
        type: choice
        options:
          - explorer-e2e
-          - simple-trading-app-e2e
+          - console-lite-e2e
          - stats-e2e
          - token-e2e
          - trading-e2e
@@ -36,7 +36,7 @@ jobs:
        uses: actions/setup-go@v3
        id: go
        with:
-          go-version: 1.18
+          go-version: 1.19
      - name: Set up Node 16
        uses: actions/setup-node@v2
        id: npm
@@ -52,7 +52,7 @@ jobs:
        uses: actions/checkout@v2
        with:
          repository: vegaprotocol/vegacapsule
-          ref: v0.2.1
+          ref: main
          token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
          path: './capsule'

@@ -66,22 +66,24 @@ jobs:
      - name: Set GOBIN
        run: echo GOBIN=$(go env GOPATH)/bin >> $GITHUB_ENV

-      - name: Install binaries
-        run: vegacapsule install-bins
-        env:
-          GITHUB_TOKEN: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
-          GOBIN: ${{ env.GOBIN }}
-
      - name: Checkout Vega
        uses: actions/checkout@v2
        with:
          repository: vegaprotocol/vega
-          ref: tm35.9
+          ref: develop
          token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
          path: './vega'

-      - name: Install binary from Vega repo
-        run: go install ./cmd/vega
+      - name: Install Vega binaries
+        run: go install -v ./cmd/vega
+        working-directory: vega
+
+      - name: Install Vega wallet binaries
+        run: go install ./cmd/vegawallet
+        working-directory: vega
+
+      - name: Install date-node binaries
+        run: go install ./cmd/data-node
        working-directory: vega

      ######
@@ -20,7 +20,7 @@ jobs:
        uses: actions/setup-go@v3
        id: go
        with:
-          go-version: 1.18
+          go-version: 1.19
      - name: Set up Node 16
        uses: actions/setup-node@v2
        id: npm
@@ -36,7 +36,7 @@ jobs:
        uses: actions/checkout@v2
        with:
          repository: vegaprotocol/vegacapsule
-          ref: v0.2.1
+          ref: main
          token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
          path: './capsule'

@@ -50,22 +50,24 @@ jobs:
      - name: Set GOBIN
        run: echo GOBIN=$(go env GOPATH)/bin >> $GITHUB_ENV

-      - name: Install binaries
-        run: vegacapsule install-bins
-        env:
-          GITHUB_TOKEN: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
-          GOBIN: ${{ env.GOBIN }}
-
      - name: Checkout Vega
        uses: actions/checkout@v2
        with:
          repository: vegaprotocol/vega
-          ref: tm35.9
+          ref: develop
          token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
          path: './vega'

-      - name: Install binary from Vega repo
-        run: go install ./cmd/vega
+      - name: Install Vega binaries
+        run: go install -v ./cmd/vega
+        working-directory: vega
+
+      - name: Install Vega wallet binaries
+        run: go install ./cmd/vegawallet
+        working-directory: vega
+
+      - name: Install date-node binaries
+        run: go install ./cmd/data-node
        working-directory: vega

      ######
@@ -22,7 +22,7 @@ jobs:
        uses: actions/setup-go@v3
        id: go
        with:
-          go-version: 1.18
+          go-version: 1.19
      - name: Set up Node 16
        uses: actions/setup-node@v2
        id: npm
@@ -38,7 +38,7 @@ jobs:
        uses: actions/checkout@v2
        with:
          repository: vegaprotocol/vegacapsule
-          ref: v0.2.1
+          ref: main
          token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
          path: './capsule'

@@ -52,22 +52,24 @@ jobs:
      - name: Set GOBIN
        run: echo GOBIN=$(go env GOPATH)/bin >> $GITHUB_ENV

-      - name: Install binaries
-        run: vegacapsule install-bins
-        env:
-          GITHUB_TOKEN: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
-          GOBIN: ${{ env.GOBIN }}
-
      - name: Checkout Vega
        uses: actions/checkout@v2
        with:
          repository: vegaprotocol/vega
-          ref: tm35.9
+          ref: develop
          token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
          path: './vega'

-      - name: Install binary from Vega repo
-        run: go install ./cmd/vega
+      - name: Install Vega binaries
+        run: go install -v ./cmd/vega
+        working-directory: vega
+
+      - name: Install Vega wallet binaries
+        run: go install ./cmd/vegawallet
+        working-directory: vega
+
+      - name: Install date-node binaries
+        run: go install ./cmd/data-node
        working-directory: vega

      ######
@@ -6,6 +6,5 @@ __generated__

 apps/static/src/assets/devnet-tranches.json
 apps/static/src/assets/mainnet-tranches.json
-apps/static/src/assets/stagnet1-tranches.json
-apps/static/src/assets/stagnet2-tranches.json
+apps/static/src/assets/stagnet3-tranches.json
 apps/static/src/assets/testnet-tranches.json
@@ -4,6 +4,7 @@
    "esbenp.prettier-vscode",
    "firsttris.vscode-jest-runner",
    "dbaeumer.vscode-eslint",
-    "stevejpurves.cucumber"
+    "stevejpurves.cucumber",
+    "streetsidesoftware.code-spell-checker"
  ]
 }
@@ -72,7 +72,7 @@ Run `nx serve my-app` for a dev server. Navigate to the port specified in `app/<
 In order to generate the schemas for your GraphQL queries, you can run `NX_VEGA_URL=[YOUR URL HERE] nx run types:generate`.

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

@@ -127,7 +127,7 @@ As environment variables are build time and not run time in frontend application
 In order to override specific environment variables you can pass these to the container like this:

 ```bash
-docker run -e NX_VEGA_URL=https://n04.d.vega.xyz/query -p 3000:80 [TAG]
+docker run -e NX_VEGA_URL=https://api.n04.d.vega.xyz/graphql -p 3000:80 [TAG]
 ```

 Which will now point the app to use a devnet data node. To see a list of all possible config properties see the readme.md for each app in the app directory.
@@ -21,7 +21,7 @@ NX_URL=$URL
 NX_DEPLOY_URL=$DEPLOY_URL
 NX_DEPLOY_PRIME_URL=$DEPLOY_PRIME_URL

-NX_VEGA_URL=https://lb.testnet.vega.xyz/query
+NX_VEGA_URL=https://api.n11.testnet.vega.xyz/graphql
 NX_VEGA_ENV=TESTNET
-NX_VEGA_REST=https://lb.testnet.vega.xyz/datanode/rest
+NX_VEGA_REST=https://api.n11.testnet.vega.xyz
 NX_VEGA_WALLET_URL=http://localhost:1789/api/v1
@@ -12,9 +12,8 @@ module.exports = defineConfig({
    supportFile: './src/support/index.ts',
    video: true,
    videoUploadOnPasses: false,
-    videosFolder: '../../dist/cypress/apps/simple-trading-app-e2e/videos',
-    screenshotsFolder:
-      '../../dist/cypress/apps/simple-trading-app-e2e/screenshots',
+    videosFolder: '../../dist/cypress/apps/console-lite-e2e/videos',
+    screenshotsFolder: '../../dist/cypress/apps/console-lite-e2e/screenshots',
    chromeWebSecurity: false,
    viewportWidth: 1440,
    viewportHeight: 900,
@@ -0,0 +1,28 @@
+{
+  "root": "apps/console-lite-e2e",
+  "sourceRoot": "apps/console-lite-e2e/src",
+  "projectType": "application",
+  "targets": {
+    "e2e": {
+      "executor": "@nrwl/cypress:cypress",
+      "options": {
+        "cypressConfig": "apps/console-lite-e2e/cypress.config.js",
+        "devServerTarget": "console-lite:serve"
+      },
+      "configurations": {
+        "production": {
+          "devServerTarget": "console-lite:serve:production"
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["apps/console-lite-e2e/**/*.{js,ts}"]
+      }
+    }
+  },
+  "tags": [],
+  "implicitDependencies": ["console-lite"]
+}
@@ -1,13 +1,14 @@
 import { aliasQuery } from '@vegaprotocol/cypress';
-import { generateSimpleMarkets } from '../support/mocks/generate-markets';
-import { generateFilters } from '../support/mocks/generate-filters';
+import {
+  generateLongListMarkets,
+  generateSimpleMarkets,
+} from '../support/mocks/generate-markets';

 describe('market list', () => {
  describe('simple url', () => {
    beforeEach(() => {
      cy.mockGQL((req) => {
        aliasQuery(req, 'SimpleMarkets', generateSimpleMarkets());
-        aliasQuery(req, 'MarketFilters', generateFilters());
      });
      cy.visit('/markets');
    });
@@ -62,7 +63,6 @@ describe('market list', () => {
    beforeEach(() => {
      cy.mockGQL((req) => {
        aliasQuery(req, 'SimpleMarkets', generateSimpleMarkets());
-        aliasQuery(req, 'MarketFilters', generateFilters());
      });
    });

@@ -73,7 +73,7 @@ describe('market list', () => {

    it('last asset (if exists)', () => {
      cy.visit('/markets');
-      cy.wait('@MarketFilters').then((filters) => {
+      cy.wait('@SimpleMarkets').then((filters) => {
        if (filters?.response?.body?.data?.markets?.length) {
          const asset =
            filters.response.body.data.markets[0].tradableInstrument.instrument
@@ -93,4 +93,39 @@ describe('market list', () => {
        .should('have.text', 'Future');
    });
  });
+
+  describe('long list of results should be handled properly', () => {
+    it('handles 5000 markets', () => {
+      cy.viewport(1440, 900);
+      cy.mockGQL((req) => {
+        aliasQuery(req, 'SimpleMarkets', generateLongListMarkets(5000));
+      });
+      performance.mark('start-5k');
+      cy.visit('/markets');
+      cy.get('.ag-center-cols-container', { timeout: 50000 }).then(() => {
+        performance.mark('end-5k');
+        performance.measure('load-5k', 'start-5k', 'end-5k');
+        const measure = performance.getEntriesByName('load-5k')[0];
+        expect(measure.duration).lte(20000);
+        cy.log(`Ag-grid 5k load took ${measure.duration} milliseconds.`);
+
+        cy.get('.ag-root').should('have.attr', 'aria-rowcount', '5001');
+        cy.get('.ag-center-cols-container')
+          .find('[role="row"]')
+          .its('length')
+          .then((length) => expect(length).to.be.closeTo(21, 2));
+        cy.get('.ag-cell-label-container').eq(4).click();
+        cy.get('body').then(($body) => {
+          for (let i = 0; i < 20; i++) {
+            cy.wrap($body).realPress('Tab', { pressDelay: 300 });
+          }
+        });
+        cy.focused().parent('.ag-row').should('have.attr', 'row-index', '19');
+        cy.get('.ag-center-cols-container')
+          .find('[role="row"]')
+          .its('length')
+          .then((length) => expect(length).to.be.closeTo(31, 2));
+      });
+    });
+  });
 });
@@ -0,0 +1,138 @@
+import { connectVegaWallet } from '../support/connect-wallet';
+import { aliasQuery } from '@vegaprotocol/cypress';
+import { generateSimpleMarkets } from '../support/mocks/generate-markets';
+import { generateDealTicket } from '../support/mocks/generate-deal-ticket';
+import { generateMarketTags } from '../support/mocks/generate-market-tags';
+import { generateMarketPositions } from '../support/mocks/generate-market-positions';
+import { generateEstimateOrder } from '../support/mocks/generate-estimate-order';
+import { generatePartyBalance } from '../support/mocks/generate-party-balance';
+import { generatePartyMarketData } from '../support/mocks/generate-party-market-data';
+import { generateMarketMarkPrice } from '../support/mocks/generate-market-mark-price';
+import { generateMarketNames } from '../support/mocks/generate-market-names';
+
+describe('market selector', () => {
+  let markets;
+  beforeEach(() => {
+    cy.mockGQL((req) => {
+      aliasQuery(req, 'SimpleMarkets', generateSimpleMarkets());
+      aliasQuery(req, 'DealTicketQuery', generateDealTicket());
+      aliasQuery(req, 'MarketTags', generateMarketTags());
+      aliasQuery(req, 'MarketPositions', generateMarketPositions());
+      aliasQuery(req, 'EstimateOrder', generateEstimateOrder());
+      aliasQuery(req, 'PartyBalanceQuery', generatePartyBalance());
+      aliasQuery(req, 'PartyMarketData', generatePartyMarketData());
+      aliasQuery(req, 'MarketMarkPrice', generateMarketMarkPrice());
+      aliasQuery(req, 'MarketNames', generateMarketNames());
+    });
+
+    cy.visit('/markets');
+    cy.wait('@SimpleMarkets').then((response) => {
+      if (response.response.body.data?.markets?.length) {
+        markets = response.response.body.data.markets;
+      }
+    });
+  });
+
+  it('should be properly rendered', () => {
+    if (markets?.length) {
+      cy.visit(`/trading/${markets[0].id}`);
+      connectVegaWallet();
+      cy.get('input[placeholder="Search"]').should(
+        'have.value',
+        markets[0].name
+      );
+      cy.getByTestId('arrow-button').click();
+      cy.getByTestId('market-pane').should('be.visible');
+      cy.getByTestId('market-pane')
+        .children()
+        .find('[role="button"]')
+        .first()
+        .should('contain.text', markets[0].name);
+      cy.getByTestId('market-pane')
+        .children()
+        .find('[role="button"]')
+        .first()
+        .click();
+      cy.getByTestId('market-pane').should('not.be.visible');
+    }
+  });
+
+  it('typing should change list', () => {
+    if (markets?.length) {
+      cy.visit(`/trading/${markets[0].id}`);
+      connectVegaWallet();
+      cy.get('input[placeholder="Search"]').type('{backspace}');
+      cy.getByTestId('market-pane')
+        .children()
+        .find('[role="button"]')
+        .should('have.length.at.least', 1);
+      cy.get('input[placeholder="Search"]').clear();
+      cy.get('input[placeholder="Search"]').type('aa');
+      const filtered = markets.filter(
+        (market) =>
+          market.data.market.state === 'STATE_ACTIVE' &&
+          market.name.match(/aa/i)
+      );
+      cy.getByTestId('market-pane')
+        .children()
+        .find('[role="button"]')
+        .should('have.length', filtered.length);
+      cy.getByTestId('market-pane')
+        .children()
+        .find('[role="button"]')
+        .last()
+        .click();
+      cy.location('pathname').should(
+        'eq',
+        `/trading/${filtered[filtered.length - 1].id}`
+      );
+      cy.get('input[placeholder="Search"]').should(
+        'have.value',
+        filtered[filtered.length - 1].name
+      );
+    }
+  });
+
+  it('keyboard navigation should work well', () => {
+    if (markets?.length) {
+      cy.visit(`/trading/${markets[0].id}`);
+      connectVegaWallet();
+      cy.get('input[placeholder="Search"]').type('{backspace}');
+      cy.get('input[placeholder="Search"]').clear();
+      cy.get('body').realPress('ArrowDown');
+      cy.focused().eq(0).should('contain.text', 'AAVEDAI Monthly');
+      cy.get('body').realPress('ArrowDown');
+      cy.focused().eq(0).should('contain.text', 'ETHBTC').realPress('Enter');
+      cy.location('pathname').should('eq', '/trading/ethbtc-quaterly');
+
+      cy.get('input[placeholder="Search"]').type('{backspace}');
+      cy.get('input[placeholder="Search"]').clear();
+      cy.getByTestId('market-pane').should('be.visible');
+      cy.get('body').realPress('ArrowDown');
+      cy.get('body').realPress('Tab');
+      cy.getByTestId('market-pane').should('not.be.visible');
+    }
+  });
+
+  it('mobile view', () => {
+    if (markets?.length) {
+      cy.viewport('iphone-xr');
+      cy.visit(`/trading/${markets[0].id}`);
+      connectVegaWallet();
+      cy.get('[role="dialog"]').should('not.exist');
+      cy.getByTestId('arrow-button').click();
+      cy.get('[role="dialog"]').should('be.visible');
+      cy.get('input[placeholder="Search"]').clear();
+      cy.getByTestId('market-pane')
+        .children()
+        .find('[role="button"]')
+        .should('have.length', 3);
+      cy.get('div[role="dialog"]').should('have.class', 'w-full');
+      cy.getByTestId('dialog-close').click();
+      cy.get('input[placeholder="Search"]').should(
+        'have.value',
+        markets[0].name
+      );
+    }
+  });
+});
@@ -30,9 +30,23 @@ describe('Market trade', () => {
    });
  });

+  it('should not display steps if wallet is disconnected', () => {
+    cy.visit(`/trading/${markets[0].id}`);
+    cy.getByTestId('trading-connect-wallet')
+      .find('h3')
+      .should('have.text', 'Please connect your Vega wallet to make a trade');
+    cy.getByTestId('trading-connect-wallet')
+      .find('button')
+      .should('have.text', 'Connect Vega wallet');
+    cy.getByTestId('trading-connect-wallet')
+      .find('a')
+      .should('have.text', 'https://vega.xyz/wallet');
+  });
+
  it('side selector should work well', () => {
    if (markets?.length) {
      cy.visit(`/trading/${markets[0].id}`);
+      connectVegaWallet();
      cy.get('#step-1-control [aria-label^="Selected value"]').should(
        'have.text',
        'Long'
@@ -51,6 +65,7 @@ describe('Market trade', () => {
    if (markets?.length) {
      cy.viewport('iphone-xr');
      cy.visit(`/trading/${markets[0].id}`);
+      connectVegaWallet();
      cy.getByTestId('next-button').scrollIntoView().click();

      cy.get('button[aria-label="Open long position"]').should(
@@ -113,6 +128,9 @@ describe('Market trade', () => {
        .eq(0)
        .find('button')
        .should('have.text', '1');
+
+      cy.getByTestId('max-label').should('have.text', '21');
+
      cy.getByTestId('percentage-selector')
        .find('button')
        .contains('Max')
@@ -152,26 +170,76 @@ describe('Market trade', () => {
    }
  });

+  it('notional position size should be present', () => {
+    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('#step-2-panel')
+        .find('dd')
+        .eq(0)
+        .find('button')
+        .should('have.text', '1');
+      cy.get('#step-2-panel').find('dd').eq(0).find('button').click();
+      cy.get('#step-2-panel')
+        .find('dd')
+        .eq(0)
+        .find('input')
+        .type('{backspace}2');
+      cy.get('#step-2-panel').find('dd').eq(0).find('button').click();
+      cy.get('#step-2-panel')
+        .find('dt')
+        .eq(2)
+        .should('have.text', 'Est. Position Size (tDAI)');
+      cy.get('#step-2-panel').find('dd').eq(2).should('have.text', '197.86012');
+    }
+  });
+
+  it('total fees 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('#step-2-panel')
+        .find('dt')
+        .eq(3)
+        .should('have.text', 'Est. Fees (tDAI)');
+      cy.get('#step-2-panel')
+        .find('dd')
+        .eq(3)
+        .should('have.text', '3.00000 (3.03%)');
+    }
+  });
+
  it('order review should display proper calculations', () => {
    if (markets?.length) {
      cy.visit(`/trading/${markets[0].id}`);
      connectVegaWallet();
-      cy.get('h3').contains('Review Trade').click();
-      cy.getByTestId('key-value-table')
-        .find('dl')
-        .eq(1)
-        .find('dd div')
-        .should('have.text', '25.78726');
-      cy.getByTestId('key-value-table')
-        .find('dl')
-        .eq(2)
-        .find('dd div')
-        .should('have.text', '1.00000');
-      cy.getByTestId('key-value-table')
-        .find('dl')
+      cy.get('#step-3-control').click();
+
+      cy.getByTestId('review-trade')
+        .get('#contracts_tooltip_trigger')
+        .trigger('click')
+        .realTouch();
+
+      cy.get('[data-radix-popper-content-wrapper]').contains(
+        'The number of contracts determines'
+      );
+      cy.get('#step-3-panel').find('dd').eq(1).should('have.text', '1');
+
+      cy.get('#step-3-panel').find('dd').eq(2).should('have.text', '98.93006');
+
+      cy.get('#step-3-panel')
+        .find('dd')
        .eq(3)
-        .find('dd div')
-        .should('have.text', ' - ');
+        .should('have.text', '3.00000 (3.03%)');
+
+      cy.get('#step-3-panel').find('dd').eq(4).should('have.text', ' - ');
+
      cy.getByTestId('place-order').click();
      cy.getByTestId('dialog-title').should(
        'have.text',
@@ -179,4 +247,25 @@ describe('Market trade', () => {
      );
    }
  });
+
+  it('info tooltip on mobile view should work well', () => {
+    if (markets?.length) {
+      cy.viewport('iphone-xr');
+      cy.visit(`/trading/${markets[0].id}`);
+      connectVegaWallet();
+      cy.get('#step-3-control').click();
+
+      cy.getByTestId('review-trade')
+        .get('#contracts_tooltip_trigger')
+        .realTouch();
+      cy.get('[data-radix-popper-content-wrapper]').contains(
+        'The number of contracts determines'
+      );
+
+      cy.getByTestId('review-trade').get('div.cursor-help').eq(1).realTouch();
+      cy.get('[data-radix-popper-content-wrapper]').contains(
+        'The notional size represents the position size'
+      );
+    }
+  });
 });
@@ -11,9 +11,9 @@ describe('Portfolio page', () => {
  it('button for wallet connect should work', () => {
    cy.visit('/');
    cy.get('[href="/portfolio"]').eq(0).click();
-    cy.getByTestId('connect-vega-wallet-text').should('be.visible');
+    cy.getByTestId('trading-connect-wallet').should('be.visible');
    connectVegaWallet();
-    cy.getByTestId('connect-vega-wallet-text').should('not.exist');
+    cy.getByTestId('trading-connect-wallet').should('not.exist');
  });

  it('certain tabs should exist', () => {
@@ -14,5 +14,6 @@
 // ***********************************************************

 import '@vegaprotocol/cypress';
+import 'cypress-real-events/support';
 // Import commands.js using ES2015 syntax:
 import './commands';
@@ -0,0 +1,112 @@
+const protoCandles = [
+  { open: '9556163', close: '9587028', __typename: 'Candle' },
+  {
+    open: '9587028',
+    close: '9769899',
+    __typename: 'Candle',
+  },
+  { open: '9769899', close: '9586292', __typename: 'Candle' },
+  {
+    open: '9586292',
+    close: '9261774',
+    __typename: 'Candle',
+  },
+  { open: '9261773', close: '9236369', __typename: 'Candle' },
+  {
+    open: '9236369',
+    close: '9226070',
+    __typename: 'Candle',
+  },
+  { open: '9226077', close: '9233252', __typename: 'Candle' },
+  {
+    open: '9249854',
+    close: '9333038',
+    __typename: 'Candle',
+  },
+  { open: '9333038', close: '9410371', __typename: 'Candle' },
+  {
+    open: '9410371',
+    close: '9626249',
+    __typename: 'Candle',
+  },
+  { open: '9626247', close: '9493253', __typename: 'Candle' },
+  {
+    open: '9493253',
+    close: '9309054',
+    __typename: 'Candle',
+  },
+  { open: '9309054', close: '9378428', __typename: 'Candle' },
+  {
+    open: '9378428',
+    close: '9352996',
+    __typename: 'Candle',
+  },
+  { open: '9352996', close: '9451142', __typename: 'Candle' },
+  {
+    open: '9451142',
+    close: '9691070',
+    __typename: 'Candle',
+  },
+  { open: '9691071', close: '9622031', __typename: 'Candle' },
+  {
+    open: '9622034',
+    close: '9519285',
+    __typename: 'Candle',
+  },
+  { open: '9528904', close: '9671275', __typename: 'Candle' },
+  {
+    open: '9671275',
+    close: '9988454',
+    __typename: 'Candle',
+  },
+  { open: '9982457', close: '10085537', __typename: 'Candle' },
+  {
+    open: '10085537',
+    close: '9967390',
+    __typename: 'Candle',
+  },
+  { open: '9967390', close: '9974844', __typename: 'Candle' },
+  {
+    open: '9974844',
+    close: '9940706',
+    __typename: 'Candle',
+  },
+];
+
+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',
+  },
+  tradableInstrument: {
+    instrument: {
+      code: 'AAVEDAI.MF21',
+      metadata: {
+        tags: [
+          'formerly:2839D9B2329C9E70',
+          'base:AAVE',
+          'quote:DAI',
+          'class:fx/crypto',
+          'monthly',
+          'sector:defi',
+        ],
+        __typename: 'InstrumentMetadata',
+      },
+      product: {
+        __typename: 'Future',
+        quoteName: 'DAI',
+        settlementAsset: { symbol: 'tDAI', __typename: 'Asset' },
+      },
+      __typename: 'Instrument',
+    },
+    __typename: 'TradableInstrument',
+  },
+  candles: protoCandles,
+  __typename: 'Market',
+};
@@ -5,7 +5,7 @@ export const generateDealTicket = () => {
      name: 'AAVEDAI Monthly (30 Jun 2022)',
      decimalPlaces: 5,
      positionDecimalPlaces: 0,
-      state: 'Active',
+      state: 'STATE_ACTIVE',
      tradingMode: 'Continuous',
      tradableInstrument: {
        instrument: {
@@ -1,7 +1,12 @@
 export const generateEstimateOrder = () => {
  return {
    estimateOrder: {
-      totalFeeAmount: '16085.09240212.7380425.46',
+      fee: {
+        __typename: 'TradeFee',
+        makerFee: '100000',
+        liquidityFee: '100000',
+        infrastructureFee: '100000',
+      },
      marginLevels: {
        initialLevel: '2844054.80937741220203',
        __typename: 'MarginLevels',
@@ -0,0 +1,136 @@
+import { protoMarket } from './commons';
+
+export const generateMarketNames = () => {
+  return {
+    markets: [
+      { ...protoMarket },
+      {
+        id: '1d7ddf67dac4924db03f5bf58571a7bcb1908d70c66580467717aabc5345b68a',
+        name: 'Apple Monthly (30 Jun 2022)',
+        state: 'STATE_SUSPENDED',
+        tradableInstrument: {
+          instrument: {
+            code: 'AAPL.MF21',
+            metadata: {
+              tags: [
+                'formerly:4899E01009F1A721',
+                'quote:USD',
+                'ticker:AAPL',
+                'class:equities/single-stock-futures',
+                'sector:tech',
+                'listing_venue:NASDAQ',
+                'country:US',
+              ],
+              __typename: 'InstrumentMetadata',
+            },
+            product: { quoteName: 'USD', __typename: 'Future' },
+            __typename: 'Instrument',
+          },
+          __typename: 'TradableInstrument',
+        },
+        __typename: 'Market',
+      },
+      {
+        id: '87ae87cd3244fc1fab4b0e2dad2437879864192bb969f3109b69293421644c8b',
+        name: 'Tesla Quarterly (30 Jun 2022)',
+        state: 'STATE_SUSPENDED',
+        tradableInstrument: {
+          instrument: {
+            code: 'TSLA.QM21',
+            metadata: {
+              tags: [
+                'formerly:5A86B190C384997F',
+                'quote:EURO',
+                'ticker:TSLA',
+                'class:equities/single-stock-futures',
+                'sector:tech',
+                'listing_venue:NASDAQ',
+                'country:US',
+              ],
+              __typename: 'InstrumentMetadata',
+            },
+            product: { quoteName: 'EURO', __typename: 'Future' },
+            __typename: 'Instrument',
+          },
+          __typename: 'TradableInstrument',
+        },
+        __typename: 'Market',
+      },
+      {
+        id: '69205712a854f1bbfb69fa3d11b60e01a1e249bafb5ece88115e7451e8ef07b3',
+        name: 'BTCUSD Monthly (30 Jun 2022)',
+        state: 'STATE_SUSPENDED',
+        tradableInstrument: {
+          instrument: {
+            code: 'BTCUSD.MF21',
+            metadata: {
+              tags: [
+                'formerly:076BB86A5AA41E3E',
+                'base:BTC',
+                'quote:USD',
+                'class:fx/crypto',
+                'monthly',
+                'sector:crypto',
+              ],
+              __typename: 'InstrumentMetadata',
+            },
+            product: { quoteName: 'USD', __typename: 'Future' },
+            __typename: 'Instrument',
+          },
+          __typename: 'TradableInstrument',
+        },
+        __typename: 'Market',
+      },
+      {
+        id: 'ethbtc-quaterly',
+        name: 'ETHBTC Quarterly (30 Jun 2022)',
+        state: 'STATE_ACTIVE',
+        tradableInstrument: {
+          instrument: {
+            code: 'ETHBTC.QM21',
+            metadata: {
+              tags: [
+                'formerly:1F0BB6EB5703B099',
+                'base:ETH',
+                'quote:BTC',
+                'class:fx/crypto',
+                'quarterly',
+                'sector:crypto',
+              ],
+              __typename: 'InstrumentMetadata',
+            },
+            product: { quoteName: 'BTC', __typename: 'Future' },
+            __typename: 'Instrument',
+          },
+          __typename: 'TradableInstrument',
+        },
+        __typename: 'Market',
+      },
+      {
+        id: '3c62b2714c4332d1a689a5352bff090e6aabccfd6bd87ce018936b38372530c9',
+        name: 'UNIDAI Monthly (30 Jun 2022)',
+        state: 'STATE_ACTIVE',
+        tradableInstrument: {
+          instrument: {
+            code: 'UNIDAI.MF21',
+            metadata: {
+              tags: [
+                'formerly:3C58ED2A4A6C5D7E',
+                'base:UNI',
+                'quote:DAI',
+                'class:fx/crypto',
+                'monthly',
+                'sector:defi',
+              ],
+              __typename: 'InstrumentMetadata',
+            },
+            product: { quoteName: 'DAI', __typename: 'Future' },
+            __typename: 'Instrument',
+          },
+          __typename: 'TradableInstrument',
+        },
+        __typename: 'Market',
+      },
+    ],
+  };
+};
@@ -1,123 +1,17 @@
+import { protoMarket } from './commons';
+
 export const generateSimpleMarkets = () => {
  return {
    markets: [
-      {
-        id: 'first-btcusd-id',
-        name: 'AAVEDAI Monthly (30 Jun 2022)',
-        data: {
-          market: {
-            id: 'first-btcusd-id',
-            state: 'Active',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
-        tradableInstrument: {
-          instrument: {
-            code: 'AAVEDAI.MF21',
-            metadata: {
-              tags: [
-                'formerly:2839D9B2329C9E70',
-                'base:AAVE',
-                'quote:DAI',
-                'class:fx/crypto',
-                'monthly',
-                'sector:defi',
-              ],
-              __typename: 'InstrumentMetadata',
-            },
-            product: {
-              __typename: 'Future',
-              quoteName: 'DAI',
-              settlementAsset: { symbol: 'tDAI', __typename: 'Asset' },
-            },
-            __typename: 'Instrument',
-          },
-          __typename: 'TradableInstrument',
-        },
-        candles: [
-          { open: '9556163', close: '9587028', __typename: 'Candle' },
-          {
-            open: '9587028',
-            close: '9769899',
-            __typename: 'Candle',
-          },
-          { open: '9769899', close: '9586292', __typename: 'Candle' },
-          {
-            open: '9586292',
-            close: '9261774',
-            __typename: 'Candle',
-          },
-          { open: '9261773', close: '9236369', __typename: 'Candle' },
-          {
-            open: '9236369',
-            close: '9226070',
-            __typename: 'Candle',
-          },
-          { open: '9226077', close: '9233252', __typename: 'Candle' },
-          {
-            open: '9249854',
-            close: '9333038',
-            __typename: 'Candle',
-          },
-          { open: '9333038', close: '9410371', __typename: 'Candle' },
-          {
-            open: '9410371',
-            close: '9626249',
-            __typename: 'Candle',
-          },
-          { open: '9626247', close: '9493253', __typename: 'Candle' },
-          {
-            open: '9493253',
-            close: '9309054',
-            __typename: 'Candle',
-          },
-          { open: '9309054', close: '9378428', __typename: 'Candle' },
-          {
-            open: '9378428',
-            close: '9352996',
-            __typename: 'Candle',
-          },
-          { open: '9352996', close: '9451142', __typename: 'Candle' },
-          {
-            open: '9451142',
-            close: '9691070',
-            __typename: 'Candle',
-          },
-          { open: '9691071', close: '9622031', __typename: 'Candle' },
-          {
-            open: '9622034',
-            close: '9519285',
-            __typename: 'Candle',
-          },
-          { open: '9528904', close: '9671275', __typename: 'Candle' },
-          {
-            open: '9671275',
-            close: '9988454',
-            __typename: 'Candle',
-          },
-          { open: '9982457', close: '10085537', __typename: 'Candle' },
-          {
-            open: '10085537',
-            close: '9967390',
-            __typename: 'Candle',
-          },
-          { open: '9967390', close: '9974844', __typename: 'Candle' },
-          {
-            open: '9974844',
-            close: '9940706',
-            __typename: 'Candle',
-          },
-        ],
-        __typename: 'Market',
-      },
+      { ...protoMarket },
      {
        id: '57fbaa322e97cfc8bb5f1de048c37e033c41b1ac1906d3aed9960912a067ef5a',
        name: 'CELUSD (June 2022)',
+        state: 'Active',
        data: {
          market: {
            id: '57fbaa322e97cfc8bb5f1de048c37e033c41b1ac1906d3aed9960912a067ef5a',
-            state: 'Pending',
+            state: 'STATE_PENDING',
            __typename: 'Market',
          },
          __typename: 'MarketData',
@@ -150,10 +44,11 @@ export const generateSimpleMarkets = () => {
      {
        id: 'ccf2f04865e5951ac3405da6e16b7cbdb535a0ad32df4df2dbed4262cf473255',
        name: 'XMRUSD market',
+        state: 'Suspended',
        data: {
          market: {
            id: 'ccf2f04865e5951ac3405da6e16b7cbdb535a0ad32df4df2dbed4262cf473255',
-            state: 'Proposed',
+            state: 'STATE_PROPOSED',
            __typename: 'Market',
          },
          __typename: 'MarketData',
@@ -186,10 +81,11 @@ export const generateSimpleMarkets = () => {
      {
        id: '6030e5b4e0ca3297a26081e5af4d453f97f96baab2d74bf56f84efcffc4c382f',
        name: 'UNIDAI Monthly (30 Jun 2022)',
+        state: 'Active',
        data: {
          market: {
            id: '6030e5b4e0ca3297a26081e5af4d453f97f96baab2d74bf56f84efcffc4c382f',
-            state: 'Suspended',
+            state: 'STATE_SUSPENDED',
            __typename: 'Market',
          },
          __typename: 'MarketData',
@@ -296,10 +192,11 @@ export const generateSimpleMarkets = () => {
      {
        id: 'de74a5572045b300e8ec50d136896912ec76e7d7ec135bc305dfd4854d9363a4',
        name: 'XMRUSD market',
+        state: 'Pending',
        data: {
          market: {
            id: 'de74a5572045b300e8ec50d136896912ec76e7d7ec135bc305dfd4854d9363a4',
-            state: 'Active',
+            state: 'STATE_ACTIVE',
            __typename: 'Market',
          },
          __typename: 'MarketData',
@@ -405,10 +302,11 @@ export const generateSimpleMarkets = () => {
      {
        id: '31ea96284611771e486c820acb26a325a99664f9854b5a7e7ad99023efa8f9e6',
        name: 'ApeCoin (18 Jul 2022)',
+        state: 'Closed',
        data: {
          market: {
            id: '31ea96284611771e486c820acb26a325a99664f9854b5a7e7ad99023efa8f9e6',
-            state: 'Proposed',
+            state: 'STATE_PROPOSED',
            __typename: 'Market',
          },
          __typename: 'MarketData',
@@ -440,10 +338,11 @@ export const generateSimpleMarkets = () => {
      {
        id: '34cff959cdc2ffdb0f167820d701fe8b51cc6b8588e650d93369aaa22d6f8b74',
        name: 'BTCUSD Monthly (18 Jul 2022)',
+        state: 'Settled',
        data: {
          market: {
            id: '34cff959cdc2ffdb0f167820d701fe8b51cc6b8588e650d93369aaa22d6f8b74',
-            state: 'Proposed',
+            state: 'STATE_PROPOSED',
            __typename: 'Market',
          },
          __typename: 'MarketData',
@@ -477,10 +376,11 @@ export const generateSimpleMarkets = () => {
      {
        id: '87b0bbb3c171baa5d97dfc3852332829c91e5c5dc9f7c8fb584c6d8ac75aaaf2',
        name: 'Builders Club x ETHcc',
+        state: 'Settled',
        data: {
          market: {
            id: '87b0bbb3c171baa5d97dfc3852332829c91e5c5dc9f7c8fb584c6d8ac75aaaf2',
-            state: 'Active',
+            state: 'STATE_ACTIVE',
            __typename: 'Market',
          },
          __typename: 'MarketData',
@@ -574,10 +474,11 @@ export const generateSimpleMarkets = () => {
      {
        id: '45266143c6e9b58f4cff9b8906e971c531bb29ea7af01066973f9b77e8134823',
        name: 'BTCUSD Monthly (18 Jul 2022)',
+        state: 'Pending',
        data: {
          market: {
            id: '45266143c6e9b58f4cff9b8906e971c531bb29ea7af01066973f9b77e8134823',
-            state: 'Proposed',
+            state: 'STATE_PROPOSED',
            __typename: 'Market',
          },
          __typename: 'MarketData',
@@ -611,10 +512,11 @@ export const generateSimpleMarkets = () => {
      {
        id: '65663ebdc96161162769c4d5c5508137416748178d7cb28e2cb0d07a151a2bc6',
        name: 'ETHBTC Quarterly (30 Jun 2022)',
+        state: 'Active',
        data: {
          market: {
            id: '65663ebdc96161162769c4d5c5508137416748178d7cb28e2cb0d07a151a2bc6',
-            state: 'Active',
+            state: 'STATE_ACTIVE',
            __typename: 'Market',
          },
          __typename: 'MarketData',
@@ -721,10 +623,11 @@ export const generateSimpleMarkets = () => {
      {
        id: '234afabd27e3bce1a879039c041f9f00f915d98459935ddafd0169d38dd13850',
        name: 'Apple Monthly (30 Jun 2022)',
+        state: 'Active',
        data: {
          market: {
            id: '234afabd27e3bce1a879039c041f9f00f915d98459935ddafd0169d38dd13850',
-            state: 'Active',
+            state: 'STATE_ACTIVE',
            __typename: 'Market',
          },
          __typename: 'MarketData',
@@ -832,10 +735,11 @@ export const generateSimpleMarkets = () => {
      {
        id: '9f2a3c1caa67bb0773ec18d908d32b55b129b9ec2d106a8e9a87f6aa5c0375a6',
        name: 'Tesla Quarterly (30 Jun 2022)',
+        state: 'Active',
        data: {
          market: {
            id: '9f2a3c1caa67bb0773ec18d908d32b55b129b9ec2d106a8e9a87f6aa5c0375a6',
-            state: 'Active',
+            state: 'STATE_ACTIVE',
            __typename: 'Market',
          },
          __typename: 'MarketData',
@@ -943,10 +847,11 @@ export const generateSimpleMarkets = () => {
      {
        id: '8a45ee934d3ddac4b036f9884df1064a5353c620a56f775ba36597d0edef9a7a',
        name: 'Go big or Go home',
+        state: 'Active',
        data: {
          market: {
            id: '8a45ee934d3ddac4b036f9884df1064a5353c620a56f775ba36597d0edef9a7a',
-            state: 'Settled',
+            state: 'STATE_SUSPENDED',
            __typename: 'Market',
          },
          __typename: 'MarketData',
@@ -993,10 +898,11 @@ export const generateSimpleMarkets = () => {
      {
        id: 'aede7b9ac0c3b225004929c5455160a00f59864aad32ec366e8a2bff1b30fd0f',
        name: 'BTCUSD Monthly (08 Jul 2022)',
+        state: 'Active',
        data: {
          market: {
            id: 'aede7b9ac0c3b225004929c5455160a00f59864aad32ec366e8a2bff1b30fd0f',
-            state: 'Proposed',
+            state: 'STATE_PROPOSED',
            __typename: 'Market',
          },
          __typename: 'MarketData',
@@ -1030,10 +936,11 @@ export const generateSimpleMarkets = () => {
      {
        id: '9398707e01daa1a1f1ca6ff87cf8d6c03fe7373ce31121ce81b99a129e6bda47',
        name: 'BTCUSD Monthly (18 Jul 2022)',
+        state: 'Active',
        data: {
          market: {
            id: '9398707e01daa1a1f1ca6ff87cf8d6c03fe7373ce31121ce81b99a129e6bda47',
-            state: 'Proposed',
+            state: 'STATE_PROPOSED',
            __typename: 'Market',
          },
          __typename: 'MarketData',
@@ -1067,3 +974,20 @@ 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,
+      },
+    });
+  }
+  return { markets };
+};
@@ -4,7 +4,7 @@ export const generatePartyBalance = () => {
      accounts: [
        {
          balance: '88474051',
-          type: 'General',
+          type: 'ACCOUNT_TYPE_GENERAL',
          asset: {
            id: '6d9d35f657589e40ddfb448b7ad4a7463b66efb307527fedd2aa7df1bbd5ea61',
            symbol: 'tDAI',
@@ -16,7 +16,7 @@ export const generatePartyBalance = () => {
        },
        {
          balance: '100000000',
-          type: 'General',
+          type: 'ACCOUNT_TYPE_GENERAL',
          asset: {
            id: '8b52d4a3a4b0ffe733cddbc2b67be273816cfeb6ca4c8b339bac03ffba08e4e4',
            symbol: 'tEURO',
@@ -28,7 +28,7 @@ export const generatePartyBalance = () => {
        },
        {
          balance: '3412867',
-          type: 'General',
+          type: 'ACCOUNT_TYPE_GENERAL',
          asset: {
            id: '6d9d35f657589e40ddfb448b7ad4a7463b66efb307527fedd2aa7df1bbd5ea61',
            symbol: 'tDAI',
@@ -40,7 +40,7 @@ export const generatePartyBalance = () => {
        },
        {
          balance: '70007',
-          type: 'General',
+          type: 'ACCOUNT_TYPE_GENERAL',
          asset: {
            id: '6d9d35f657589e40ddfb448b7ad4a7463b66efb307527fedd2aa7df1bbd5ea61',
            symbol: 'tDAI',
@@ -4,7 +4,7 @@
    "sourceMap": false,
    "outDir": "../../dist/out-tsc",
    "allowJs": true,
-    "types": ["cypress", "node"]
+    "types": ["cypress", "node", "cypress-real-events"]
  },
  "include": ["src/**/*.ts", "src/**/*.js"]
 }
@@ -19,9 +19,9 @@ NX_DEPLOY_URL=$DEPLOY_URL
 NX_DEPLOY_PRIME_URL=$DEPLOY_PRIME_URL
 NX_VEGA_CONFIG_URL="https://static.vega.xyz/assets/testnet-network.json"
 NX_VEGA_ENV = 'TESTNET'
-NX_VEGA_URL="https://lb.testnet.vega.xyz/query"
+NX_VEGA_URL="https://api.n11.testnet.vega.xyz/graphql"
 NX_VEGA_WALLET_URL=http://localhost:1789/api/v1
 NX_ETHEREUM_PROVIDER_URL=https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://ropsten.etherscan.io
-NX_VEGA_NETWORKS={\"MAINNET\":\"https://alpha.console.vega.xyz\"}
+NX_VEGA_NETWORKS={"MAINNET":"https://alpha.console.vega.xyz"}
 NX_VEGA_EXPLORER_URL=https://explorer.fairground.wtf
@@ -1,8 +1,8 @@
 # App configuration variables
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/devnet-network.json
-NX_VEGA_URL=https://n04.d.vega.xyz/query
+NX_VEGA_URL=https://api.n04.d.vega.xyz/graphql
 NX_VEGA_ENV=DEVNET
-NX_VEGA_REST=https://n04.d.vega.xyz/datanode/rest
+NX_VEGA_REST=https://api.n04.d.vega.xyz
 NX_VEGA_NETWORKS={\"MAINNET\":\"https://alpha.console.vega.xyz\"}
 NX_ETHEREUM_PROVIDER_URL=https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://ropsten.etherscan.io
@@ -2,7 +2,7 @@
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/mainnet-network.json
 NX_VEGA_URL=https://api.token.vega.xyz/query
 NX_VEGA_ENV=MAINNET
-NX_VEGA_REST=https://api.token.vega.xyz/
+NX_VEGA_REST=https://api.token.vega.xyz
 NX_VEGA_NETWORKS='{\"MAINNET\":\"https://alpha.console.vega.xyz\"}'
 NX_ETHEREUM_PROVIDER_URL=https://mainnet.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://etherscan.io
@@ -1,8 +1,8 @@
 # App configuration variables
-NX_VEGA_ENV=STAGNET2
-NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/stagnet2-network.json
-NX_VEGA_URL=https://n03.stagnet2.vega.xyz/query
-NX_VEGA_NETWORKS='{\"MAINNET\":\"https://alpha.console.vega.xyz\"}'
+NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/stagnet3-network.json
+NX_VEGA_URL=https://api.n01.stagnet3.vega.xyz/graphql
+NX_VEGA_ENV=STAGNET3
+NX_VEGA_REST=https://api.n01.stagnet3.vega.xyz
 NX_ETHEREUM_PROVIDER_URL=https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://ropsten.etherscan.io
 NX_VEGA_EXPLORER_URL=https://staging2.explorer.vega.xyz
@@ -1,8 +1,8 @@
 # App configuration variables
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/testnet-network.json
-NX_VEGA_URL=https://lb.testnet.vega.xyz/query
+NX_VEGA_URL=https://api.n11.testnet.vega.xyz/graphql
 NX_VEGA_ENV=TESTNET
-NX_VEGA_REST=https://lb.testnet.vega.xyz/datanode/rest
+NX_VEGA_REST=https://api.n11.testnet.vega.xyz
 NX_VEGA_NETWORKS='{\"MAINNET\":\"https://alpha.console.vega.xyz\"}'
 NX_ETHEREUM_PROVIDER_URL=https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://ropsten.etherscan.io
@@ -1,11 +1,11 @@
 module.exports = {
-  displayName: 'simple-trading-app',
+  displayName: 'console-lite',
  preset: '../../jest.preset.js',
  transform: {
    '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nrwl/react/plugins/jest',
    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nrwl/next/babel'] }],
  },
  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
-  coverageDirectory: '../../coverage/apps/simple-trading-app',
+  coverageDirectory: '../../coverage/apps/console-lite',
  setupFilesAfterEnv: ['./setup-tests.ts'],
 };
@@ -1,6 +1,6 @@
 {
-  "root": "apps/simple-trading-app",
-  "sourceRoot": "apps/simple-trading-app/src",
+  "root": "apps/console-lite",
+  "sourceRoot": "apps/console-lite/src",
  "projectType": "application",
  "targets": {
    "build": {
@@ -9,17 +9,17 @@
      "defaultConfiguration": "production",
      "options": {
        "compiler": "babel",
-        "outputPath": "dist/apps/simple-trading-app",
-        "index": "apps/simple-trading-app/src/index.html",
+        "outputPath": "dist/apps/console-lite",
+        "index": "apps/console-lite/src/index.html",
        "baseHref": "/",
-        "main": "apps/simple-trading-app/src/main.tsx",
-        "polyfills": "apps/simple-trading-app/src/polyfills.ts",
-        "tsConfig": "apps/simple-trading-app/tsconfig.app.json",
+        "main": "apps/console-lite/src/main.tsx",
+        "polyfills": "apps/console-lite/src/polyfills.ts",
+        "tsConfig": "apps/console-lite/tsconfig.app.json",
        "assets": [
-          "apps/simple-trading-app/src/favicon.ico",
-          "apps/simple-trading-app/src/assets"
+          "apps/console-lite/src/favicon.ico",
+          "apps/console-lite/src/assets"
        ],
-        "styles": ["apps/simple-trading-app/src/styles.scss"],
+        "styles": ["apps/console-lite/src/styles.scss"],
        "scripts": [],
        "webpackConfig": "@nrwl/react/plugins/webpack"
      },
@@ -27,8 +27,8 @@
        "production": {
          "fileReplacements": [
            {
-              "replace": "apps/simple-trading-app/src/environments/environment.ts",
-              "with": "apps/simple-trading-app/src/environments/environment.prod.ts"
+              "replace": "apps/console-lite/src/environments/environment.ts",
+              "with": "apps/console-lite/src/environments/environment.prod.ts"
            }
          ],
          "optimization": true,
@@ -43,13 +43,13 @@
    "serve": {
      "executor": "./tools/executors/webpack:serve",
      "options": {
-        "buildTarget": "simple-trading-app:build",
+        "buildTarget": "console-lite:build",
        "hmr": true,
        "port": 4001
      },
      "configurations": {
        "production": {
-          "buildTarget": "simple-trading-app:build:production",
+          "buildTarget": "console-lite:build:production",
          "hmr": false
        }
      }
@@ -58,14 +58,14 @@
      "executor": "@nrwl/linter:eslint",
      "outputs": ["{options.outputFile}"],
      "options": {
-        "lintFilePatterns": ["apps/simple-trading-app/**/*.{ts,tsx,js,jsx}"]
+        "lintFilePatterns": ["apps/console-lite/**/*.{ts,tsx,js,jsx}"]
      }
    },
    "test": {
      "executor": "@nrwl/jest:jest",
-      "outputs": ["coverage/apps/simple-trading-app"],
+      "outputs": ["coverage/apps/console-lite"],
      "options": {
-        "jestConfig": "apps/simple-trading-app/jest.config.js",
+        "jestConfig": "apps/console-lite/jest.config.js",
        "passWithNoTests": true
      }
    },
@@ -73,8 +73,8 @@
      "builder": "@nrwl/workspace:run-commands",
      "options": {
        "commands": [
-          "cp apps/simple-trading-app/netlify.toml netlify.toml",
-          "nx build simple-trading-app"
+          "cp apps/console-lite/netlify.toml netlify.toml",
+          "nx build console-lite"
        ]
      }
    }
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
 import { createClient } from './lib/apollo-client';
 import { ThemeContext } from '@vegaprotocol/react-helpers';
@@ -18,17 +18,17 @@ import LocalContext from './context/local-context';
 import useLocalValues from './hooks/use-local-values';

 function App() {
-  const localValues = useLocalValues();
  const [theme, toggleTheme] = useThemeSwitcher();
-
-  const [menuOpen, setMenuOpen] = useState(false);
-  const onToggle = () => setMenuOpen(!menuOpen);
-
+  const localValues = useLocalValues(toggleTheme);
+  const {
+    vegaWalletDialog,
+    menu: { setMenuOpen },
+  } = localValues;
  const location = useLocation();

  useEffect(() => {
    setMenuOpen(false);
-  }, [location]);
+  }, [location, setMenuOpen]);

  return (
    <EnvironmentProvider>
@@ -38,16 +38,16 @@ function App() {
            <LocalContext.Provider value={localValues}>
              <AppLoader>
                <div className="max-h-full min-h-full dark:bg-lite-black dark:text-white-60 bg-white text-black-60 grid grid-rows-[min-content,1fr]">
-                  <Header toggleTheme={toggleTheme} />
-                  <Main isMenuOpen={menuOpen} onToggle={onToggle} />
+                  <Header />
+                  <Main />
                  <VegaConnectDialog
                    connectors={Connectors}
-                    dialogOpen={localValues.vegaWalletDialog.connect}
-                    setDialogOpen={localValues.vegaWalletDialog.setConnect}
+                    dialogOpen={vegaWalletDialog.connect}
+                    setDialogOpen={vegaWalletDialog.setConnect}
                  />
                  <VegaManageDialog
-                    dialogOpen={localValues.vegaWalletDialog.manage}
-                    setDialogOpen={localValues.vegaWalletDialog.setManage}
+                    dialogOpen={vegaWalletDialog.manage}
+                    setDialogOpen={vegaWalletDialog.setManage}
                  />
                </div>
              </AppLoader>
@@ -26,7 +26,7 @@ export interface MarketTags_market_tradableInstrument_instrument {
 export interface MarketTags_market_tradableInstrument {
  __typename: "TradableInstrument";
  /**
-   * An instance of or reference to a fully specified instrument.
+   * An instance of, or reference to, a fully specified instrument.
   */
  instrument: MarketTags_market_tradableInstrument_instrument;
 }
@@ -34,14 +34,14 @@ export interface MarketTags_market_tradableInstrument {
 export interface MarketTags_market {
  __typename: "Market";
  /**
-   * An instance of or reference to a tradable instrument.
+   * An instance of, or reference to, a tradable instrument.
   */
  tradableInstrument: MarketTags_market_tradableInstrument;
 }

 export interface MarketTags {
  /**
-   * An instrument that is trading on the VEGA network
+   * An instrument that is trading on the Vega network
   */
  market: MarketTags_market | null;
 }
@@ -12,7 +12,7 @@ import { AccountType } from "@vegaprotocol/types";
 export interface PartyBalanceQuery_party_accounts_asset {
  __typename: "Asset";
  /**
-   * The id of the asset
+   * The ID of the asset
   */
  id: string;
  /**
@@ -24,7 +24,7 @@ export interface PartyBalanceQuery_party_accounts_asset {
   */
  name: string;
  /**
-   * The precision of the asset
+   * 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;
 }
@@ -55,7 +55,7 @@ export interface PartyBalanceQuery_party {

 export interface PartyBalanceQuery {
  /**
-   * An entity that is trading on the VEGA network
+   * An entity that is trading on the Vega network
   */
  party: PartyBalanceQuery_party | null;
 }
@@ -5,7 +5,7 @@ import Star from '../icons/star';

 const Baubles = () => {
  return (
-    <div className="relative right-0 top-0 h-[700px] hidden md:block md:w-1/2 overflow-hidden">
+    <aside className="relative right-0 top-0 h-[700px] hidden md:block md:w-1/2 overflow-hidden">
      <div className="absolute top-[100px] w-[393px] left-[19%] h-[517px]">
        <div className="absolute top-[82px] right-[34px] w-[100px] h-[100px] clip-path-rounded">
          <Video />
@@ -29,7 +29,7 @@ const Baubles = () => {
          <Star />
        </div>
      </div>
-    </div>
+    </aside>
  );
 };

@@ -0,0 +1,17 @@
+import { t } from '@vegaprotocol/react-helpers';
+
+export const EST_MARGIN_TOOLTIP_TEXT = t(
+  'When opening a position on a futures market, you must post margin to cover any potential losses that you may incur. The margin is typically a fraction of the notional position size. For example, for a notional position size of $500, if the margin requirement is 10%, then the estimated margin would be approximately $50.'
+);
+export const CONTRACTS_MARGIN_TOOLTIP_TEXT = t(
+  'The number of contracts determines how many units of the futures contract to buy or sell. For example, this is similar to buying one share of a listed company. The value of 1 contract is equivalent to the price of the contract. For example, if the current price is $50, then one contract is worth $50.'
+);
+export const EST_CLOSEOUT_TOOLTIP_TEXT = t(
+  'Because you only need to post a fraction of your position size as margin when trading futures, it is possible to obtain leverage meaning your notional position size exceeds your account balance. In this scenario, if the market moves against your position, it will sometimes be necessary to force close your position due to insufficient funds. The estimated close out tells you the price at which that would happen based on current position and account balance.'
+);
+export const NOTIONAL_SIZE_TOOLTIP_TEXT = t(
+  'The notional size represents the position size in the settlement asset of the futures contract. The notional size is calculated by multiplying the number of contracts by the price of the contract. For example, ten contracts traded at a price of $50 has a notional size of $500.'
+);
+export const EST_FEES_TOOLTIP_TEXT = t(
+  'When you execute a new buy or sell order, you must pay a small amount of commission to the network for doing so. This fee is used to provide income to the node operates of the network and market makers who make prices on the futures market you are trading.'
+);
@@ -18,7 +18,7 @@ const tDAI: PartyBalanceQuery_party_accounts_asset = {
 const accounts: PartyBalanceQuery_party_accounts[] = [
  {
    __typename: 'Account',
-    type: AccountType.General,
+    type: AccountType.ACCOUNT_TYPE_GENERAL,
    balance: '1000000',
    asset: tDAI,
  },
@@ -24,7 +24,7 @@ export const DealTicketBalance = ({
  const settlementAccount = useSettlementAccount(
    settlementAssetId,
    accounts,
-    AccountType.General
+    AccountType.ACCOUNT_TYPE_GENERAL
  );
  const formatedNumber =
    settlementAccount?.balance &&
@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { useParams } from 'react-router-dom';
+import { gql, useQuery } from '@apollo/client';
+import {
+  DealTicketManager,
+  DealTicketContainer as Container,
+} from '@vegaprotocol/deal-ticket';
+import { Loader } from '@vegaprotocol/ui-toolkit';
+import { t } from '@vegaprotocol/react-helpers';
+import { useVegaWallet } from '@vegaprotocol/wallet';
+import { DealTicketSteps } from './deal-ticket-steps';
+import { DealTicketBalance } from './deal-ticket-balance';
+import Baubles from './baubles-decor';
+import type { PartyBalanceQuery } from './__generated__/PartyBalanceQuery';
+import ConnectWallet from '../wallet-connector';
+
+const tempEmptyText = (
+  <p>{t('Please select a market from the markets page')}</p>
+);
+
+const PARTY_BALANCE_QUERY = gql`
+  query PartyBalanceQuery($partyId: ID!) {
+    party(id: $partyId) {
+      accounts {
+        type
+        balance
+        asset {
+          id
+          symbol
+          name
+          decimals
+        }
+      }
+    }
+  }
+`;
+
+export const DealTicketContainer = () => {
+  const { marketId } = useParams<{ marketId: string }>();
+  const { keypair } = useVegaWallet();
+
+  const { data: partyData, loading } = useQuery<PartyBalanceQuery>(
+    PARTY_BALANCE_QUERY,
+    {
+      variables: { partyId: keypair?.pub },
+      skip: !keypair?.pub,
+    }
+  );
+
+  const loader = <Loader />;
+
+  const container = marketId ? (
+    <Container marketId={marketId}>
+      {(data) => {
+        const balance = (
+          <DealTicketBalance
+            className="mb-16"
+            settlementAsset={
+              data.market.tradableInstrument.instrument.product?.settlementAsset
+            }
+            accounts={partyData?.party?.accounts || []}
+            isWalletConnected={!!keypair?.pub}
+          />
+        );
+
+        return (
+          <DealTicketManager market={data.market}>
+            {loading ? loader : balance}
+            <DealTicketSteps market={data.market} partyData={partyData} />
+          </DealTicketManager>
+        );
+      }}
+    </Container>
+  ) : (
+    tempEmptyText
+  );
+
+  return (
+    <section className="flex">
+      <section className="w-full md:w-1/2 md:min-w-[500px]">
+        {keypair ? container : <ConnectWallet />}
+      </section>
+      <Baubles />
+    </section>
+  );
+};
@@ -0,0 +1,118 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import { t } from '@vegaprotocol/react-helpers';
+import { Icon, Tooltip } from '@vegaprotocol/ui-toolkit';
+import { IconNames } from '@blueprintjs/icons';
+import * as constants from './constants';
+
+interface DealTicketEstimatesProps {
+  quoteName?: string;
+  price?: string;
+  estCloseOut?: string;
+  estMargin?: string;
+  fees?: string;
+  notionalSize?: string;
+  size?: string;
+}
+
+interface DataTitleProps {
+  children: ReactNode;
+  quoteName?: string;
+}
+
+const DataTitle = ({ children, quoteName = '' }: DataTitleProps) => (
+  <dt>
+    {children}
+    {quoteName && <small> ({quoteName})</small>}
+  </dt>
+);
+
+interface ValueTooltipProps {
+  value: string;
+  description: string;
+  id?: string;
+}
+
+const ValueTooltipRow = ({ value, description, id }: ValueTooltipProps) => (
+  <dd className="flex gap-x-5 items-center">
+    {value}
+    <Tooltip align="center" description={description}>
+      <div className="cursor-help" id={id || ''} tabIndex={-1}>
+        <Icon
+          name={IconNames.ISSUE}
+          className="block rotate-180"
+          ariaLabel={description}
+        />
+      </div>
+    </Tooltip>
+  </dd>
+);
+
+export const DealTicketEstimates = ({
+  price,
+  quoteName,
+  estCloseOut,
+  estMargin,
+  fees,
+  notionalSize,
+  size,
+}: DealTicketEstimatesProps) => (
+  <dl className="text-black dark:text-white">
+    {size && (
+      <div className="flex justify-between mb-8">
+        <DataTitle>{t('Contracts')}</DataTitle>
+        <ValueTooltipRow
+          value={size}
+          description={constants.CONTRACTS_MARGIN_TOOLTIP_TEXT}
+          id="contracts_tooltip_trigger"
+        />
+      </div>
+    )}
+    {price && (
+      <div className="flex justify-between mb-8">
+        <DataTitle>{t('Est. Price')}</DataTitle>
+        <dd>{price}</dd>
+      </div>
+    )}
+    {notionalSize && (
+      <div className="flex justify-between mb-8">
+        <DataTitle quoteName={quoteName}>{t('Est. Position Size')}</DataTitle>
+        <ValueTooltipRow
+          value={notionalSize}
+          description={constants.NOTIONAL_SIZE_TOOLTIP_TEXT}
+        />
+      </div>
+    )}
+    {fees && (
+      <div className="flex justify-between mb-8">
+        <DataTitle quoteName={quoteName}>{t('Est. Fees')}</DataTitle>
+        <ValueTooltipRow
+          value={fees}
+          description={constants.EST_FEES_TOOLTIP_TEXT}
+        />
+      </div>
+    )}
+    {estMargin && (
+      <div className="flex justify-between mb-8">
+        <DataTitle quoteName={quoteName}>{t('Est. Margin')}</DataTitle>
+        <ValueTooltipRow
+          value={estMargin}
+          description={constants.EST_MARGIN_TOOLTIP_TEXT}
+        />
+      </div>
+    )}
+    {estCloseOut && (
+      <div className="flex justify-between">
+        <dt>
+          <span>{t('Est. Close out')}</span>
+          &nbsp;
+          <small>({quoteName})</small>
+        </dt>
+        <ValueTooltipRow
+          value={estCloseOut}
+          description={constants.EST_CLOSEOUT_TOOLTIP_TEXT}
+        />
+      </div>
+    )}
+  </dl>
+);
@@ -10,6 +10,7 @@ import {
  FormGroup,
 } from '@vegaprotocol/ui-toolkit';
 import { BigNumber } from 'bignumber.js';
+import { DealTicketEstimates } from './deal-ticket-estimates';

 interface DealTicketSizeProps {
  step: number;
@@ -22,7 +23,9 @@ interface DealTicketSizeProps {
  price: string;
  estCloseOut: string;
  estMargin: string;
+  fees: string;
  positionDecimalPlaces: number;
+  notionalSize: string;
 }

 const getSizeLabel = (value: number): string => {
@@ -47,6 +50,8 @@ export const DealTicketSize = ({
  onValueChange,
  estCloseOut,
  positionDecimalPlaces,
+  fees,
+  notionalSize,
 }: DealTicketSizeProps) => {
  const sizeRatios = [0, 25, 50, 75, 100];
  const [inputValue, setInputValue] = useState(value);
@@ -104,8 +109,8 @@ export const DealTicketSize = ({
  ) : (
    <div>
      <div className="flex justify-between text-black dark:text-white mb-8">
-        <span>{min}</span>
-        <span>{max}</span>
+        <span data-testid="min-label">{min}</span>
+        <span data-testid="max-label">{max}</span>
      </div>
      <SliderRoot
        className="mb-8"
@@ -142,11 +147,7 @@ export const DealTicketSize = ({

      <dl className="text-black dark:text-white">
        <div className="flex items-center justify-between mb-8">
-          <dt>
-            <span>{t('Size')}</span>
-            &nbsp;
-            <small>({quoteName})</small>
-          </dt>
+          <dt>{t('Contracts')}</dt>
          <dd className="flex justify-end w-full">
            <FormGroup
              className="mb-0 flex items-center"
@@ -187,15 +188,14 @@ export const DealTicketSize = ({
            </FormGroup>
          </dd>
        </div>
-        <div className="flex justify-between mb-8">
-          <dt>{t('Est. price')}</dt>
-          <dd>{price}</dd>
-        </div>
-        <div className="flex justify-between">
-          <dt>{t('Est. close out')}</dt>
-          <dd>{estCloseOut}</dd>
-        </div>
      </dl>
+      <DealTicketEstimates
+        quoteName={quoteName}
+        fees={fees}
+        estCloseOut={estCloseOut}
+        price={price}
+        notionalSize={notionalSize}
+      />
    </div>
  );
 };
@@ -72,6 +72,14 @@ export const DealTicketSteps = ({
    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 || '',
@@ -92,7 +100,6 @@ export const DealTicketSteps = ({
  }, [maxTrade, market.positionDecimalPlaces]);

  const { message: invalidText, isDisabled } = useOrderValidation({
-    step,
    market,
    orderType,
    orderTimeInForce,
@@ -112,6 +119,28 @@ export const DealTicketSteps = ({
    }
  };

+  useEffect(() => {
+    if (market?.depth?.lastTrade?.price) {
+      const size = new BigNumber(market.depth.lastTrade.price)
+        .multipliedBy(value)
+        .toNumber();
+
+      setNotionalSize(addDecimal(size, market.decimalPlaces));
+    }
+  }, [market, value]);
+
+  useEffect(() => {
+    if (estMargin?.fees && notionalSize) {
+      const percentage = new BigNumber(estMargin?.fees)
+        .dividedBy(notionalSize)
+        .multipliedBy(100)
+        .decimalPlaces(2)
+        .toString();
+
+      setFees(`${estMargin.fees} (${percentage}%)`);
+    }
+  }, [estMargin, notionalSize]);
+
  const transactionStatus =
    transaction.status === VegaTxStatus.Requested ||
    transaction.status === VegaTxStatus.Pending
@@ -163,15 +192,16 @@ export const DealTicketSteps = ({
            onValueChange={onSizeChange}
            value={new BigNumber(orderSize).toNumber()}
            name="size"
-            price={
-              market.depth.lastTrade
-                ? addDecimal(market.depth.lastTrade.price, market.decimalPlaces)
-                : ''
-            }
+            price={price || emptyString}
            positionDecimalPlaces={market.positionDecimalPlaces}
-            quoteName={market.tradableInstrument.instrument.product.quoteName}
+            quoteName={
+              market.tradableInstrument.instrument.product.settlementAsset
+                .symbol
+            }
+            notionalSize={notionalSize || emptyString}
            estCloseOut={estCloseOut}
-            estMargin={estMargin || ' - '}
+            fees={fees || emptyString}
+            estMargin={estMargin?.margin || emptyString}
          />
        ) : (
          'loading...'
@@ -193,7 +223,14 @@ export const DealTicketSteps = ({
            transactionStatus={transactionStatus}
            order={order}
            estCloseOut={estCloseOut}
-            estMargin={estMargin || ' - '}
+            estMargin={estMargin?.margin || emptyString}
+            price={price || emptyString}
+            quoteName={
+              market.tradableInstrument.instrument.product.settlementAsset
+                .symbol
+            }
+            notionalSize={notionalSize || emptyString}
+            fees={fees || emptyString}
          />
          <TransactionDialog
            title={getOrderDialogTitle(finalizedOrder?.status)}
@@ -1,7 +1,6 @@
-import { addDecimal, formatNumber, t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/react-helpers';
 import {
  Button,
-  Icon,
  KeyValueTable,
  KeyValueTableRow,
 } from '@vegaprotocol/ui-toolkit';
@@ -10,14 +9,14 @@ import classNames from 'classnames';
 import type { DealTicketQuery_market } from '@vegaprotocol/deal-ticket';
 import type { Order } from '@vegaprotocol/orders';
 import { SIDE_NAMES } from './side-selector';
-import { VegaWalletOrderSide } from '@vegaprotocol/wallet';
 import SimpleMarketExpires from '../simple-market-list/simple-market-expires';
 import { gql, useQuery } from '@apollo/client';
 import type {
  MarketTags,
  MarketTagsVariables,
 } from './__generated__/MarketTags';
-import { IconNames } from '@blueprintjs/icons';
+import { DealTicketEstimates } from './deal-ticket-estimates';
+import { Side } from '@vegaprotocol/types';

 export const MARKET_TAGS_QUERY = gql`
  query MarketTags($marketId: ID!) {
@@ -40,6 +39,10 @@ interface Props {
  order: Order;
  estCloseOut: string;
  estMargin: string;
+  quoteName: string;
+  price: string;
+  fees: string;
+  notionalSize: string;
 }

 export default ({
@@ -48,7 +51,10 @@ export default ({
  order,
  transactionStatus,
  estCloseOut,
-  estMargin,
+  quoteName,
+  fees,
+  price,
+  notionalSize,
 }: Props) => {
  const { data: tagsData } = useQuery<MarketTags, MarketTagsVariables>(
    MARKET_TAGS_QUERY,
@@ -58,17 +64,16 @@ export default ({
  );

  return (
-    <div className="mb-8 text-black dark:text-white">
+    <div className="mb-8 text-black dark:text-white" data-testid="review-trade">
      <KeyValueTable>
        <KeyValueTableRow noBorder>
          <div className="flex flex-none gap-x-5 items-center">
            <div
              className={classNames(
                {
-                  'buyButton dark:buyButtonDark':
-                    order.side === VegaWalletOrderSide.Buy,
+                  'buyButton dark:buyButtonDark': order.side === Side.SIDE_BUY,
                  'sellButton dark:sellButtonDark':
-                    order.side === VegaWalletOrderSide.Sell,
+                    order.side === Side.SIDE_SELL,
                },
                'px-8 py-4 inline text-ui-small'
              )}
@@ -88,41 +93,20 @@ export default ({
            </div>
          </div>
          <div className="text-blue">
-            @{' '}
-            {market.depth.lastTrade
-              ? addDecimal(market.depth.lastTrade.price, market.decimalPlaces)
-              : ' - '}{' '}
+            {`@ ${price} `}
            <span className="text-ui-small inline">(EST)</span>
          </div>
        </KeyValueTableRow>
-        <KeyValueTableRow noBorder>
-          <>{t('Est. margin')}</>
-          <div className="text-black dark:text-white flex gap-x-5 items-center">
-            {estMargin}
-            <Icon name={IconNames.ISSUE} className="rotate-180" />
-          </div>
-        </KeyValueTableRow>
-        <KeyValueTableRow noBorder>
-          <>
-            {t('Size')}{' '}
-            <div className="text-ui-small inline">
-              ({market.tradableInstrument.instrument.product.quoteName})
-            </div>
-          </>
-          <div className="text-black dark:text-white flex gap-x-5 items-center">
-            {formatNumber(order.size, market.decimalPlaces)}
-            <Icon name={IconNames.ISSUE} className="rotate-180" />
-          </div>
-        </KeyValueTableRow>
-        <KeyValueTableRow noBorder>
-          <>{t('Est. close out')}</>
-          <div className="text-black dark:text-white flex gap-x-5 items-center">
-            {estCloseOut}
-            <Icon name={IconNames.ISSUE} className="rotate-180" />
-          </div>
-        </KeyValueTableRow>
      </KeyValueTable>

+      <DealTicketEstimates
+        size={order.size}
+        quoteName={quoteName}
+        fees={fees}
+        estCloseOut={estCloseOut}
+        notionalSize={notionalSize}
+      />
+
      <Button
        className="w-full !py-8 mt-64 max-w-sm"
        boxShadow={false}
@@ -1,17 +1,17 @@
 import React from 'react';
 import classNames from 'classnames';
 import { FormGroup, Button } from '@vegaprotocol/ui-toolkit';
-import { VegaWalletOrderSide } from '@vegaprotocol/wallet';
 import { t } from '@vegaprotocol/react-helpers';
+import { Side } from '@vegaprotocol/types';

 interface SideSelectorProps {
-  value: VegaWalletOrderSide;
-  onSelect: (side: VegaWalletOrderSide) => void;
+  value: Side;
+  onSelect: (side: Side) => void;
 }

-export const SIDE_NAMES: Record<VegaWalletOrderSide, string> = {
-  [VegaWalletOrderSide.Buy]: t('Long'),
-  [VegaWalletOrderSide.Sell]: t('Short'),
+export const SIDE_NAMES: Record<Side, string> = {
+  [Side.SIDE_BUY]: t('Long'),
+  [Side.SIDE_SELL]: t('Short'),
 };

 export default ({ value, onSelect }: SideSelectorProps) => {
@@ -31,9 +31,9 @@ export default ({ value, onSelect }: SideSelectorProps) => {
          className={classNames(
            'py-8',
            'buyButton hover:buyButton dark:buyButtonDark dark:hover:buyButtonDark',
-            { selected: value === VegaWalletOrderSide.Buy }
+            { selected: value === Side.SIDE_BUY }
          )}
-          onClick={() => onSelect(VegaWalletOrderSide.Buy)}
+          onClick={() => onSelect(Side.SIDE_BUY)}
        >
          {t('Long')}
        </Button>
@@ -43,9 +43,9 @@ export default ({ value, onSelect }: SideSelectorProps) => {
          className={classNames(
            'py-8',
            'sellButton hover:sellButton dark:sellButtonDark dark:hover:sellButtonDark',
-            { selected: value === VegaWalletOrderSide.Sell }
+            { selected: value === Side.SIDE_SELL }
          )}
-          onClick={() => onSelect(VegaWalletOrderSide.Sell)}
+          onClick={() => onSelect(Side.SIDE_SELL)}
        >
          {t('Short')}
        </Button>
@@ -4,12 +4,10 @@ import Logo from './logo';
 import { VegaWalletConnectButton } from '../vega-wallet-connect-button';
 import LocalContext from '../../context/local-context';

-interface Props {
-  toggleTheme: () => void;
-}
-const Header = ({ toggleTheme }: Props) => {
+const Header = () => {
  const {
    vegaWalletDialog: { setConnect, setManage },
+    toggleTheme,
  } = useContext(LocalContext);
  return (
    <div
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import { useRoutes } from 'react-router-dom';
 import {
  NavigationDrawer,
@@ -9,6 +9,7 @@ import {
 } from '../drawer';
 import { Nav, TabBar } from '../nav';
 import { routerConfig } from '../../routes/router-config';
+import LocalContext from '../../context/local-context';

 export interface RouteChildProps {
  name: string;
@@ -16,15 +17,13 @@ export interface RouteChildProps {

 export const AppRouter = () => useRoutes(routerConfig);

-interface Props {
-  onToggle(): void;
-  isMenuOpen: boolean;
-}
-
-export const Main = ({ onToggle, isMenuOpen }: Props) => {
+export const Main = () => {
+  const {
+    menu: { menuOpen, onToggle },
+  } = useContext(LocalContext);
  return (
    <DrawerWrapper>
-      <NavigationDrawer rtl onToggle={onToggle} isMenuOpen={isMenuOpen}>
+      <NavigationDrawer rtl onToggle={onToggle} isMenuOpen={menuOpen}>
        <DrawerToggle
          onToggle={onToggle}
          variant={DRAWER_TOGGLE_VARIANTS.CLOSE}
@@ -0,0 +1,32 @@
+import { routerConfig } from '../../routes';
+import { NavLink } from 'react-router-dom';
+import { NavItem } from './nav-item';
+import React from 'react';
+
+interface NavProps {
+  className?: string;
+  tabs?: boolean;
+}
+
+export const Nav = ({ className, tabs = false }: NavProps) => {
+  return (
+    <nav role={tabs ? 'tablist' : 'menu'} className={className}>
+      {routerConfig
+        .filter((r) => r.isNavItem)
+        .map((r) => (
+          <NavLink
+            role={tabs ? 'tab' : 'menuitem'}
+            key={r.name}
+            to={r.path}
+            className={({ isActive }) =>
+              `text-h5 block md:mb-40 px-40 md:text-black md:dark:text-white ${
+                isActive && 'text-white md:text-blue md:dark:text-blue'
+              }`
+            }
+          >
+            <NavItem iconName={r.icon} label={r.text} />
+          </NavLink>
+        ))}
+    </nav>
+  );
+};
@@ -1,34 +1,17 @@
-import { useContext } from 'react';
+import * as React from 'react';
 import { AccountsContainer } from '@vegaprotocol/accounts';
 import { t } from '@vegaprotocol/react-helpers';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import { Button, Splash, Tabs, Tab } from '@vegaprotocol/ui-toolkit';
-import LocalContext from '../../context/local-context';
+import { Tabs, Tab } from '@vegaprotocol/ui-toolkit';
 import { OrderListContainer } from '@vegaprotocol/orders';
 import { PositionsContainer } from '@vegaprotocol/positions';
 import { FillsContainer } from '@vegaprotocol/fills';
+import ConnectWallet from '../wallet-connector';

 export const Portfolio = () => {
  const { keypair } = useVegaWallet();
-  const {
-    vegaWalletDialog: { setConnect },
-  } = useContext(LocalContext);
  if (!keypair) {
-    return (
-      <Splash>
-        <div className="text-center">
-          <p className="mb-12" data-testid="connect-vega-wallet-text">
-            {t('Connect your Vega wallet')}
-          </p>
-          <Button
-            onClick={() => setConnect(true)}
-            data-testid="vega-wallet-connect"
-          >
-            {t('Connect')}
-          </Button>
-        </div>
-      </Splash>
-    );
+    return <ConnectWallet />;
  }
  return (
    <Tabs>
@@ -24,7 +24,7 @@ export interface SimpleMarketDataFields_market {
 export interface SimpleMarketDataFields {
  __typename: "MarketData";
  /**
-   * market id of the associated mark price
+   * market ID of the associated mark price
   */
  market: SimpleMarketDataFields_market;
 }
@@ -24,7 +24,7 @@ export interface SimpleMarketDataSub_marketData_market {
 export interface SimpleMarketDataSub_marketData {
  __typename: "MarketData";
  /**
-   * market id of the associated mark price
+   * market ID of the associated mark price
   */
  market: SimpleMarketDataSub_marketData_market;
 }
@@ -24,7 +24,7 @@ export interface SimpleMarkets_markets_data_market {
 export interface SimpleMarkets_markets_data {
  __typename: "MarketData";
  /**
-   * market id of the associated mark price
+   * market ID of the associated mark price
   */
  market: SimpleMarkets_markets_data_market;
 }
@@ -76,7 +76,7 @@ export interface SimpleMarkets_markets_tradableInstrument_instrument {
 export interface SimpleMarkets_markets_tradableInstrument {
  __typename: "TradableInstrument";
  /**
-   * An instance of or reference to a fully specified instrument.
+   * An instance of, or reference to, a fully specified instrument.
   */
  instrument: SimpleMarkets_markets_tradableInstrument_instrument;
 }
@@ -103,16 +103,20 @@ export interface SimpleMarkets_markets {
   * Market full name
   */
  name: string;
+  /**
+   * Current state of the market
+   */
+  state: MarketState;
  /**
   * marketData for the given market
   */
  data: SimpleMarkets_markets_data | null;
  /**
-   * An instance of or reference to a tradable instrument.
+   * An instance of, or reference to, a tradable instrument.
   */
  tradableInstrument: SimpleMarkets_markets_tradableInstrument;
  /**
-   * Candles on a market, for the 'last' n candles, at 'interval' seconds as specified by params
+   * Candles on a market, for the 'last' n candles, at 'interval' seconds as specified by parameters
   */
  candles: (SimpleMarkets_markets_candles | null)[] | null;
 }
@@ -1,25 +1,27 @@
 import { t } from '@vegaprotocol/react-helpers';
 import { themelite as theme } from '@vegaprotocol/tailwindcss-config';
+import { MarketState } from '@vegaprotocol/types';
 import { IS_MARKET_TRADABLE } from '../../constants';
 import type { SimpleMarkets_markets } from './__generated__/SimpleMarkets';

 export const STATES_FILTER = [
  { value: 'all', text: t('All') },
-  { value: 'Active', text: t('Active') },
-  { value: 'Cancelled', text: t('Cancelled') },
-  { value: 'Closed', text: t('Closed') },
-  { value: 'Pending', text: t('Pending') },
-  { value: 'Proposed', text: t('Proposed') },
-  { value: 'Rejected', text: t('Rejected') },
-  { value: 'Settled', text: t('Settled') },
-  { value: 'Suspended', text: t('Suspended') },
-  { value: 'TradingTerminated', text: t('TradingTerminated') },
+  { value: MarketState.STATE_ACTIVE, text: t('Active') },
+  { value: MarketState.STATE_CANCELLED, text: t('Cancelled') },
+  { value: MarketState.STATE_CLOSED, text: t('Closed') },
+  { value: MarketState.STATE_PENDING, text: t('Pending') },
+  { value: MarketState.STATE_PROPOSED, text: t('Proposed') },
+  { value: MarketState.STATE_REJECTED, text: t('Rejected') },
+  { value: MarketState.STATE_SETTLED, text: t('Settled') },
+  { value: MarketState.STATE_SUSPENDED, text: t('Suspended') },
+  { value: MarketState.STATE_TRADING_TERMINATED, text: t('TradingTerminated') },
 ];

 export const agGridLightVariables = `
  .ag-theme-balham {
    --ag-row-border-color: ${theme.colors.transparent};
    --ag-row-hover-color: ${theme.colors.transparent};
+    --ag-border-color: ${theme.colors.transparent};
    --ag-font-size: 15px;
  }
  .ag-theme-balham .ag-header-cell{
@@ -56,6 +58,7 @@ export const agGridLightVariables = `
  }
  .ag-theme-balham .ag-header{
     border-bottom-width: 0;
+     border-bottom: none;
  }
  .ag-theme-balham .ag-has-focus .ag-row.ag-row-focus{
    border: 1px solid #0091ea;
@@ -101,7 +104,7 @@ export const agGridLightVariables = `

 export const agGridDarkVariables = `
  .ag-theme-balham-dark {
-    --ag-background-color: ${theme.colors.lite.black};
+    --ag-background-color: ${theme.colors.transparent};
    --ag-row-border-color: ${theme.colors.transparent};
    --ag-row-hover-color: ${theme.colors.transparent};
    --ag-odd-row-background-color: ${theme.colors.transparent};
@@ -142,6 +145,7 @@ export const agGridDarkVariables = `
  }
  .ag-theme-balham-dark .ag-header{
     border-bottom-width: 0;
+     border-bottom: none;
  }
  .ag-theme-balham-dark .ag-has-focus .ag-row.ag-row-focus{
    border: 1px solid #0091ea;
@@ -25,6 +25,7 @@ export const MARKETS_QUERY = gql`
    markets {
      id
      name
+      state
      data {
        ...SimpleMarketDataFields
      }
@@ -45,7 +46,7 @@ export const MARKETS_QUERY = gql`
          }
        }
      }
-      candles(interval: I1H, since: $CandleSince) {
+      candles(interval: INTERVAL_I1H, since: $CandleSince) {
        open
        close
      }
@@ -64,31 +65,12 @@ const MARKET_DATA_SUB = gql`

 export const CANDLE_SUB = gql`
  subscription CandleLive($marketId: ID!) {
-    candles(marketId: $marketId, interval: I1H) {
+    candles(marketId: $marketId, interval: INTERVAL_I1H) {
      close
    }
  }
 `;

-export const FILTERS_QUERY = gql`
-  query MarketFilters {
-    markets {
-      tradableInstrument {
-        instrument {
-          product {
-            __typename
-            ... on Future {
-              settlementAsset {
-                symbol
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-`;
-
 const update = (
  data: SimpleMarkets_markets[],
  delta: SimpleMarketDataSub_marketData
@@ -10,14 +10,13 @@ import {
 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 { FILTERS_QUERY, MARKETS_QUERY } from './data-provider';
+import { MARKETS_QUERY } from './data-provider';
 import type {
  SimpleMarkets_markets,
  SimpleMarkets,
 } from './__generated__/SimpleMarkets';
-import type { MarketFilters } from './__generated__/MarketFilters';
+import { MarketState } from '@vegaprotocol/types';

 const mockedNavigate = jest.fn();

@@ -32,15 +31,6 @@ jest.mock('date-fns', () => ({
 }));

 describe('SimpleMarketList', () => {
-  const filterMock: MockedResponse<MarketFilters> = {
-    request: {
-      query: FILTERS_QUERY,
-    },
-    result: {
-      data: { markets: [] },
-    },
-  };
-
  afterEach(() => {
    jest.clearAllMocks();
    cleanup();
@@ -60,8 +50,7 @@ describe('SimpleMarketList', () => {
    };
    await act(async () => {
      render(
-        // @ts-ignore different versions of react types in apollo and app
-        <MockedProvider mocks={[mocks, filterMock]}>
+        <MockedProvider mocks={[mocks]}>
          <SimpleMarketList />
        </MockedProvider>,
        { wrapper: BrowserRouter }
@@ -79,7 +68,7 @@ describe('SimpleMarketList', () => {
        id: '1',
        data: {
          market: {
-            state: MarketState.Active,
+            state: MarketState.STATE_ACTIVE,
          },
        },
        tradableInstrument: {
@@ -99,7 +88,7 @@ describe('SimpleMarketList', () => {
        id: '2',
        data: {
          market: {
-            state: MarketState.Active,
+            state: MarketState.STATE_ACTIVE,
          },
        },
        tradableInstrument: {
@@ -130,8 +119,7 @@ describe('SimpleMarketList', () => {
    };
    await act(async () => {
      render(
-        // @ts-ignore different versions of react types in apollo and app
-        <MockedProvider mocks={[mocks, filterMock]}>
+        <MockedProvider mocks={[mocks]}>
          <SimpleMarketList />
        </MockedProvider>,
        { wrapper: BrowserRouter }
@@ -143,8 +131,9 @@ describe('SimpleMarketList', () => {
        document.querySelector('.ag-center-cols-container')
      ).toBeInTheDocument();
    });
-
-    const container = document.querySelector('.ag-center-cols-container');
-    expect(getAllByRole(container as HTMLDivElement, 'row')).toHaveLength(2);
+    await waitFor(() => {
+      const container = document.querySelector('.ag-center-cols-container');
+      expect(getAllByRole(container as HTMLDivElement, 'row')).toHaveLength(2);
+    });
  });
 });
@@ -131,7 +131,7 @@ const SimpleMarketList = () => {

  return (
    <div className="h-full grid grid-rows-[min-content,1fr]">
-      <SimpleMarketToolbar />
+      <SimpleMarketToolbar data={data || []} />
      <AsyncRenderer loading={loading} error={error} data={localData}>
        <AgGrid
          className="mb-32 min-h-[300px]"
@@ -0,0 +1,131 @@
+import React from 'react';
+import { useLocation, useRoutes, BrowserRouter } from 'react-router-dom';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import { MockedProvider } from '@apollo/react-testing';
+import SimpleMarketToolbar from './simple-market-toolbar';
+import type { SimpleMarkets_markets } from './__generated__/SimpleMarkets';
+import { markets as filterData } from './mocks/market-filters.json';
+
+describe('SimpleMarketToolbar', () => {
+  const WrappedCompForTest = () => {
+    const routes = useRoutes([
+      {
+        path: '/',
+        element: (
+          <SimpleMarketToolbar data={filterData as SimpleMarkets_markets[]} />
+        ),
+      },
+      {
+        path: 'markets',
+        children: [
+          {
+            path: `:state`,
+            element: (
+              <SimpleMarketToolbar
+                data={filterData as SimpleMarkets_markets[]}
+              />
+            ),
+            children: [
+              {
+                path: `:product`,
+                element: (
+                  <SimpleMarketToolbar
+                    data={filterData as SimpleMarkets_markets[]}
+                  />
+                ),
+                children: [
+                  {
+                    path: `:asset`,
+                    element: (
+                      <SimpleMarketToolbar
+                        data={filterData as SimpleMarkets_markets[]}
+                      />
+                    ),
+                  },
+                ],
+              },
+            ],
+          },
+        ],
+        element: (
+          <SimpleMarketToolbar data={filterData as SimpleMarkets_markets[]} />
+        ),
+      },
+    ]);
+    const location = useLocation();
+    return (
+      <>
+        {routes}
+        <div data-testid="location-display">{location.pathname}</div>
+      </>
+    );
+  };
+
+  afterEach(() => {
+    jest.resetAllMocks();
+  });
+
+  it('should be properly rendered', async () => {
+    render(
+      <MockedProvider mocks={[]} addTypename={false}>
+        <WrappedCompForTest />
+      </MockedProvider>,
+      { wrapper: BrowserRouter }
+    );
+    await waitFor(() => {
+      expect(screen.getByText('Future')).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByText('Future'));
+    await waitFor(() => {
+      expect(screen.getByTestId('market-products-menu').children).toHaveLength(
+        3
+      );
+      expect(screen.getByTestId('market-assets-menu').children).toHaveLength(6);
+    });
+    fireEvent.click(screen.getByTestId('state-trigger'));
+    waitFor(() => {
+      expect(screen.getByRole('menu')).toBeInTheDocument();
+      expect(screen.getByRole('menu').children).toHaveLength(10);
+    });
+  });
+
+  it('navigation should work well', async () => {
+    render(
+      <MockedProvider mocks={[]} addTypename={false}>
+        <WrappedCompForTest />
+      </MockedProvider>,
+      { wrapper: BrowserRouter }
+    );
+
+    await waitFor(() => {
+      expect(screen.getByText('Future')).toBeInTheDocument();
+    });
+    fireEvent.click(screen.getByText('Future'));
+
+    await waitFor(() => {
+      expect(screen.getByTestId('location-display')).toHaveTextContent(
+        '/markets/STATE_ACTIVE/Future'
+      );
+    });
+
+    fireEvent.click(
+      screen
+        .getByTestId('market-assets-menu')
+        .children[5].querySelector('a') as HTMLAnchorElement
+    );
+    await waitFor(() => {
+      expect(screen.getByTestId('location-display')).toHaveTextContent(
+        '/markets/STATE_ACTIVE/Future/tEURO'
+      );
+    });
+
+    fireEvent.click(screen.getByTestId('state-trigger'));
+    waitFor(() => {
+      expect(screen.getByRole('menu')).toBeInTheDocument();
+      fireEvent.click(screen.getByText('Pending'));
+      expect(screen.getByTestId('location-display')).toHaveTextContent(
+        '/markets/Pending/Future/tEURO'
+      );
+    });
+  });
+});
--- a/Show More
+++ b/Show More