fix: accomodate type changes for libs/liquidity

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

.dockerignore

@@ -1,5 +1,5 @@
-dist/*
-node_modules/*
+apps/**/dist/*
+apps/**/node_modules/*
 tmp/*
 .dockerignore
-Dockerfile
+dockerfiles

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

@@ -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
@@ -47,12 +47,20 @@ 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
         with:
           repository: vegaprotocol/vegacapsule
-          ref: v0.2.1
+          ref: main
           token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
           path: './capsule'
 
@@ -66,22 +74,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: v0.54.0
           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
 
       ######
@@ -94,7 +104,7 @@ jobs:
         run: vegacapsule nomad &
 
       - name: Bootstrap network
-        run: vegacapsule network bootstrap --config-path=./net_confs/config.hcl --force
+        run: vegacapsule network bootstrap --config-path=../frontend-monorepo/vegacapsule/config.hcl --force
         working-directory: capsule
 
       ######
@@ -118,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

@@ -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
@@ -31,12 +31,20 @@ 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
         with:
           repository: vegaprotocol/vegacapsule
-          ref: v0.2.1
+          ref: main
           token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
           path: './capsule'
 
@@ -50,22 +58,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: v0.54.0
           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
 
       ######
@@ -78,7 +88,7 @@ jobs:
         run: vegacapsule nomad &
 
       - name: Bootstrap network
-        run: vegacapsule network bootstrap --config-path=./net_confs/config.hcl --force
+        run: vegacapsule network bootstrap --config-path=../frontend-monorepo/vegacapsule/config.hcl --force
         working-directory: capsule
 
       ######
@@ -102,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

@@ -6,12 +6,17 @@ on:
       - master
       - develop
   pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - ready_for_review
 
 jobs:
   pr:
     name: Run capsule tests - PR
     runs-on: ubuntu-latest
-    if: ${{ github.event_name == 'pull_request' }}
+    if: ${{ github.event_name == 'pull_request' && github.event.pull_request.draft == false }}
     env:
       GO111MODULE: 'on'
     steps:
@@ -22,7 +27,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
@@ -33,12 +38,20 @@ 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
         with:
           repository: vegaprotocol/vegacapsule
-          ref: v0.2.1
+          ref: main
           token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
           path: './capsule'
 
@@ -52,22 +65,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: v0.54.0
           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
 
       ######
@@ -80,7 +95,7 @@ jobs:
         run: vegacapsule nomad &
 
       - name: Bootstrap network
-        run: vegacapsule network bootstrap --config-path=./net_confs/config.hcl --force
+        run: vegacapsule network bootstrap --config-path=../frontend-monorepo/vegacapsule/config.hcl --force
         working-directory: capsule
 
       ######
@@ -104,23 +119,19 @@ 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: Derive appropriate SHAs for base and head for `nx affected` commands
         uses: nrwl/nx-set-shas@v2
         with:
+          working-directory: frontend-monorepo
           main-branch-name: master
 
       - name: Install root dependencies
         run: yarn install
+        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 }}
           CYPRESS_SLACK_WEBHOOK: ${{ secrets.CYPRESS_SLACK_WEBHOOK }}

.github/workflows/publish-containers-cra.yml

@@ -1,60 +0,0 @@
-name: Publish NextJs containers
-
-'on':
-  push:
-    tags:
-      - 'v[0-9]+.[0-9]+.[0-9]+'
-      - 'v[0-9]+.[0-9]+.[0-9]+-pre[0-9]+'
-
-jobs:
-  master:
-    strategy:
-      matrix:
-        build-platform: ['linux/amd64']
-        app: ['trading']
-    name: Build the ${{ inputs.image_name }} image
-    runs-on: ubuntu-latest
-    steps:
-      - name: Set output
-        id: vars
-        run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
-      - name: Check output
-        env:
-          RELEASE_VERSION: ${{ steps.vars.outputs.tag }}
-        run: |
-          echo $RELEASE_VERSION
-          echo ${{ steps.vars.outputs.tag }}
-      - uses: actions/checkout@v3
-      - name: Set up QEMU
-        id: quemu
-        uses: docker/setup-qemu-action@v2
-
-      - name: Setup Docker Buildx
-        uses: docker/setup-buildx-action@v2
-
-      - name: Collect images data
-        id: tags
-        run: |
-          echo '::set-output name=current::vegaprotocol/${{ matrix.app }}:${{ steps.vars.outputs.tag }}'
-          echo '::set-output name=latest::vegaprotocol/${{ matrix.app }}:latest'
-
-      - name: Echo tags
-        run: |
-          echo ${{ steps.tags.outputs.latest }}
-          echo ${{ steps.tags.outputs.current }}
-
-      - name: Login to DockerHub
-        uses: docker/login-action@v2
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Docker build
-        uses: docker/build-push-action@v3
-        with:
-          context: '.'
-          file: './Dockerfile.next'
-          build-args: 'APP=${{ matrix.app }}'
-          platforms: ${{ matrix.build-platform }}
-          tags: ${{ steps.tags.outputs.latest }},${{ steps.tags.outputs.current }}
-          push: true

.github/workflows/publish-containers-next.yml

@@ -1,60 +0,0 @@
-name: Publish CRA containers
-
-'on':
-  push:
-    tags:
-      - 'v[0-9]+.[0-9]+.[0-9]+'
-      - 'v[0-9]+.[0-9]+.[0-9]+-pre[0-9]+'
-
-jobs:
-  master:
-    strategy:
-      matrix:
-        build-platform: ['linux/amd64']
-        app: ['explorer', 'token']
-    name: Build the ${{ inputs.image_name }} image
-    runs-on: ubuntu-latest
-    steps:
-      - name: Set output
-        id: vars
-        run: echo ::set-output name=tag::${GITHUB_REF#refs/*/}
-      - name: Check output
-        env:
-          RELEASE_VERSION: ${{ steps.vars.outputs.tag }}
-        run: |
-          echo $RELEASE_VERSION
-          echo ${{ steps.vars.outputs.tag }}
-      - uses: actions/checkout@v3
-      - name: Set up QEMU
-        id: quemu
-        uses: docker/setup-qemu-action@v2
-
-      - name: Setup Docker Buildx
-        uses: docker/setup-buildx-action@v2
-
-      - name: Collect images data
-        id: tags
-        run: |
-          echo '::set-output name=current::vegaprotocol/${{ matrix.app }}:${{ steps.vars.outputs.tag }}'
-          echo '::set-output name=latest::vegaprotocol/${{ matrix.app }}:latest'
-
-      - name: Echo tags
-        run: |
-          echo ${{ steps.tags.outputs.latest }}
-          echo ${{ steps.tags.outputs.current }}
-
-      - name: Login to DockerHub
-        uses: docker/login-action@v2
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Docker build
-        uses: docker/build-push-action@v3
-        with:
-          context: '.'
-          file: './Dockerfile.cra'
-          build-args: 'APP=${{ matrix.app }}'
-          platforms: ${{ matrix.build-platform }}
-          tags: ${{ steps.tags.outputs.latest }},${{ steps.tags.outputs.current }}
-          push: true

.github/workflows/publish-docker-containers.yml

@@ -0,0 +1,126 @@
+name: Publish docker containers
+
+'on':
+  push:
+    tags:
+      - 'v[0-9]+.[0-9]+.[0-9]+'
+      - 'v[0-9]+.[0-9]+.[0-9]+-pre[0-9]+'
+
+  workflow_dispatch:
+    inputs:
+      publish:
+        description: 'Publish tag to Docker Hub & GitHub Registry'
+        required: false
+        type: boolean
+        default: false
+      tag:
+        description: 'Git Tag to build and publish'
+        required: false
+        type: string
+        default: ''
+      apps:
+        description: 'Applications to build and publish'
+        required: false
+        type: choice
+        options:
+          - '["explorer", "token", "trading"]'
+          - '["explorer"]'
+          - '["token"]'
+          - '["trading"]'
+      archs:
+        description: 'Architecture to build and publish'
+        required: false
+        type: choice
+        options:
+          - linux/amd64, linux/arm64
+          - linux/amd64
+          - linux/arm64
+
+jobs:
+  master:
+    strategy:
+      fail-fast: false
+      matrix:
+        app: ${{ fromJson(inputs.apps || '["explorer", "token", "trading"]') }}
+    name: Build the ${{ matrix.app }} image
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out code
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ inputs.tag }}
+
+      - name: Set up QEMU
+        id: quemu
+        uses: docker/setup-qemu-action@v2
+
+      - name: Available platforms
+        run: echo ${{ steps.qemu.outputs.platforms }}
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v2
+
+      - name: Login to DockerHub
+        if: ${{ inputs.publish || startsWith(github.ref, 'refs/tags/') }}
+        uses: docker/login-action@v2
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_TOKEN }}
+
+      - name: Determine Docker Image tag
+        id: tags
+        run: |
+          hash=$(git rev-parse HEAD|cut -b1-8)
+          versionTag=${{ inputs.tag || startsWith(github.ref, 'refs/tags/') && github.ref_name || '${hash}' }}
+          echo ::set-output name=version::${versionTag}
+          echo ::set-output name=npmVersion::$(cat dockerfiles/${{ matrix.app =='trading' && 'Dockerfile.next' || 'Dockerfile.cra' }} | grep FROM | head -n 1 | awk '{print $2}' | cut -d ':' -f 2 | cut -d '-' -f 1 )
+
+      - name: Print config
+        run: |
+          git rev-parse --verify HEAD
+          git status
+          echo "inputs.tag=${{ inputs.tag }}"
+          echo "inputs.publish=${{ inputs.publish }}"
+          echo "inputs.apps=${{ inputs.apps }}"
+          echo "inputs.archs=${{ inputs.archs }}"
+          echo "steps.tags.outputs.version=${{ steps.tags.outputs.version }}"
+
+      - uses: actions/setup-node@v3
+        with:
+          node-version: ${{ steps.tags.outputs.npmVersion }}
+
+      - name: Build frontend dists
+        run: |
+          yarn --verbose --pure-lockfile
+          yarn nx ${{ matrix.app =='trading' && 'export' || 'build' }} ${{ matrix.app }} --pure-lockfile
+
+      - name: Build and export to local Docker
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          push: false
+          file: dockerfiles/${{ matrix.app =='trading' && 'Dockerfile.next' || 'Dockerfile.cra' }}.dist
+          build-args: APP=${{ matrix.app }}
+          load: true
+          tags: vegaprotocol/${{ matrix.app }}:local
+
+      - name: Sanity check docker image
+        run: |
+          docker run --rm vegaprotocol/${{ matrix.app }}:local cat .env
+          docker run --rm vegaprotocol/${{ matrix.app }}:local ls -lah
+
+      - name: Build and push to DockerHub
+        id: docker_build
+        uses: docker/build-push-action@v3
+        with:
+          context: .
+          push: ${{ inputs.publish || startsWith(github.ref, 'refs/tags/') }}
+          file: dockerfiles/${{ matrix.app =='trading' && 'Dockerfile.next' || 'Dockerfile.cra' }}.dist
+          build-args: APP=${{ matrix.app }}
+          platforms: ${{ inputs.archs || 'linux/amd64, linux/arm64' }}
+          tags: |
+            vegaprotocol/${{ matrix.app }}:latest
+            vegaprotocol/${{ matrix.app }}:${{ steps.tags.outputs.version }}
+
+      - name: Image digest
+        run: echo ${{ steps.docker_build.outputs.digest }}

.github/workflows/test.yml

@@ -11,10 +11,13 @@ jobs:
   master:
     name: Test and lint - main
     runs-on: ubuntu-latest
+    permissions:
+      contents: 'read'
+      actions: 'read'
     if: ${{ github.event_name != 'pull_request' }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           ref: ${{ github.event.pull_request.head.ref }}
           fetch-depth: 0
@@ -24,7 +27,7 @@ jobs:
           main-branch-name: master
       - name: Use Node.js 16
         id: Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 16.14.0
       - name: Install root dependencies
@@ -40,10 +43,13 @@ jobs:
   pr:
     name: Test and lint - PR
     runs-on: ubuntu-latest
+    permissions:
+      contents: 'read'
+      actions: 'read'
     if: ${{ github.event_name == 'pull_request' }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v2
+        uses: actions/checkout@v3
         with:
           fetch-depth: 0
       - name: Derive appropriate SHAs for base and head for `nx affected` commands
@@ -52,7 +58,7 @@ jobs:
           main-branch-name: master
       - name: Use Node.js 16
         id: Node
-        uses: actions/setup-node@v2
+        uses: actions/setup-node@v3
         with:
           node-version: 16.14.0
       - name: Install root dependencies

.gitignore

@@ -43,3 +43,6 @@ Thumbs.db
 .local.env
 .env.local
 cypress.env.json
+
+# Next.js
+.next

.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,9 +3,9 @@
 /dist
 /coverage
 __generated__
+__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

.vscode/extensions.json

@@ -4,6 +4,7 @@
     "esbenp.prettier-vscode",
     "firsttris.vscode-jest-runner",
     "dbaeumer.vscode-eslint",
-    "stevejpurves.cucumber"
+    "stevejpurves.cucumber",
+    "streetsidesoftware.code-spell-checker"
   ]
 }

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://lb.testnet.vega.xyz/query
+export  GRAPHQL_SCHEMA_PATH=https://api.n11.testnet.vega.xyz/graphql
 yarn nx run types:generate
 ```
 
@@ -106,12 +106,12 @@ Visit the [Nx Documentation](https://nx.dev/getting-started/intro) to learn more
 
 ## Docker
 
-The [Dockerfile](./Dockerfile) for running the frontends is pretty basic, merely building the application with the APP arg that is passed in and serving the application from [nginx](./nginx/nginx.conf). The only complexity that exists is that there is a script which allows the passing of run time environment variables to the containers. See configuration below for how to do this.
+The [Dockerfile](./dockerfiles) for running the frontends is pretty basic, merely building the application with the APP arg that is passed in and serving the application from [nginx](./nginx/nginx.conf). The only complexity that exists is that there is a script which allows the passing of run time environment variables to the containers. See configuration below for how to do this.
 
 You can build any of the containers locally with the following command:
 
 ```bash
-docker build . --build-arg APP=[YOUR APP] --tag=[TAG]
+docker build --dockerfile dockerfiles/Dockerfile.cra . --build-arg APP=[YOUR APP] --tag=[TAG]
 ```
 
 In order to run a container:
@@ -120,6 +120,8 @@ In order to run a container:
 docker run -p 3000:80 [TAG]
 ```
 
+Images ending with `.dist` are to pack locally created transpiled HTML files into nginx container for non-compatible with yarn architectures like M1 Mac
+
 ## Config
 
 As environment variables are build time and not run time in frontend applications. We have built a system which allows for passing run time environment variables, this generates a JSON file that will override the default environment variables that the container was built with (which is always testnet, using the default .env files).
@@ -127,7 +129,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.
@@ -138,6 +140,17 @@ Coming soon! You will be able to run the containers within Vega Capsule.
 
 You can run against a local instance of Vega Capsule today by using the .env.capsule present in the apps.
 
+If you wish to run E2E tests for Token and Block Explorer (other areas to be added soon)
+
+- Vegacapsule must be used in order for these tests to succeed, the vegacapsule repo README.md file contains the steps required to set this up, it must be installed globally.
+- However we start the capsule network a little differently to how it is laid out in those instructions:
+
+In order to run the bootstrap command to generate and start a new network, we must do so using the following:
+
+```bash
+vegacapsule network bootstrap --config-path=../frontend-monorepo/vegacapsule/config.hcl
+```
+
 # 📑 License
 
 [MIT](./LICENSE)

apps/console-lite-e2e/.env

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

apps/console-lite-e2e/cypress.config.js

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

apps/console-lite-e2e/project.json

@@ -0,0 +1,35 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "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}"]
+      }
+    },
+    "build": {
+      "executor": "@nrwl/workspace:run-commands",
+      "outputs": [],
+      "options": {
+        "command": "yarn tsc --project ./apps/console-lite-e2e/"
+      }
+    }
+  },
+  "tags": [],
+  "implicitDependencies": ["console-lite"]
+}

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

@@ -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 1000 markets', () => {
+      cy.viewport(1440, 900);
+      cy.mockGQL((req) => {
+        aliasQuery(req, 'SimpleMarkets', generateLongListMarkets(1000));
+      });
+      performance.mark('start-1k');
+      cy.visit('/markets');
+      cy.get('.ag-center-cols-container', { timeout: 50000 }).then(() => {
+        performance.mark('end-1k');
+        performance.measure('load-1k', 'start-1k', 'end-1k');
+        const measure = performance.getEntriesByName('load-1k')[0];
+        expect(measure.duration).lte(20000);
+        cy.log(`Ag-grid 1k load took ${measure.duration} milliseconds.`);
+
+        cy.get('.ag-root').should('have.attr', 'aria-rowcount', '1001');
+        cy.get('.ag-center-cols-container')
+          .find('[role="row"]')
+          .its('length')
+          .then((length) => expect(length).to.be.closeTo(20, 3));
+        cy.get('.ag-cell-label-container').eq(4).click();
+        cy.get('body').then(($body) => {
+          for (let i = 0; i < 15; i++) {
+            cy.wrap($body).realPress('Tab', { pressDelay: 100 });
+          }
+        });
+        cy.focused().parent('.ag-row').should('have.attr', 'row-index', '14');
+        cy.get('.ag-center-cols-container')
+          .find('[role="row"]')
+          .its('length')
+          .then((length) => expect(length).to.be.closeTo(26, 2));
+      });
+    });
+  });
 });

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

@@ -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].tradableInstrument.instrument.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].tradableInstrument.instrument.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.state === 'STATE_ACTIVE' &&
+          market.tradableInstrument.instrument.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].tradableInstrument.instrument.name
+      );
+    }
+  });
+  // constantly failing on ci
+  it.skip('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.focused().realPress('ArrowDown');
+      cy.focused().should('contain.text', 'AAVEDAI Monthly');
+      cy.focused().realPress('ArrowDown');
+      cy.focused().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-screen');
+      cy.getByTestId('dialog-close').click();
+      cy.get('input[placeholder="Search"]').should(
+        'have.value',
+        markets[0].tradableInstrument.instrument.name
+      );
+    }
+  });
+});

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

@@ -7,6 +7,7 @@ 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 { generateMarketDepth } from '../support/mocks/generate-market-depth';
 import { connectVegaWallet } from '../support/connect-wallet';
 
 describe('Market trade', () => {
@@ -21,6 +22,7 @@ describe('Market trade', () => {
       aliasQuery(req, 'PartyBalanceQuery', generatePartyBalance());
       aliasQuery(req, 'PartyMarketData', generatePartyMarketData());
       aliasQuery(req, 'MarketMarkPrice', generateMarketMarkPrice());
+      aliasQuery(req, 'MarketDepth', generateMarketDepth());
     });
     cy.visit('/markets');
     cy.wait('@SimpleMarkets').then((response) => {
@@ -30,9 +32,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 +67,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 +130,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')
@@ -149,6 +169,96 @@ describe('Market trade', () => {
         .eq(0)
         .find('button')
         .should('have.text', '2');
+      cy.get('button').contains('Max').click();
+    }
+  });
+
+  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%');
+    }
+  });
+
+  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%)');
     }
   });
 
@@ -156,22 +266,27 @@ describe('Market trade', () => {
     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 +294,27 @@ 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();
+
+      // Start from the bottom tooltip to ensure the tooltip above
+      // can be interacted with
+      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'
+      );
+
+      cy.getByTestId('review-trade')
+        .get('#contracts_tooltip_trigger')
+        .realTouch();
+      cy.get('[data-radix-popper-content-wrapper]').contains(
+        'The number of contracts determines'
+      );
+    }
+  });
 });

apps/console-lite-e2e/src/integration/portfolio-page.test.ts

@@ -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', () => {
@@ -30,5 +30,8 @@ describe('Portfolio page', () => {
 
     cy.getByTestId('Fills').click();
     cy.getByTestId('tab-fills').should('exist');
+
+    cy.getByTestId('Deposits').click();
+    cy.getByTestId('tab-deposits').should('exist');
   });
 });

apps/console-lite-e2e/src/support/index.ts

@@ -14,5 +14,6 @@
 // ***********************************************************
 
 import '@vegaprotocol/cypress';
+import 'cypress-real-events/support';
 // Import commands.js using ES2015 syntax:
 import './commands';

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

@@ -0,0 +1,105 @@
+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',
+  state: 'STATE_ACTIVE',
+  tradableInstrument: {
+    instrument: {
+      code: 'AAVEDAI.MF21',
+      name: 'AAVEDAI Monthly (30 Jun 2022)',
+      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',
+};

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: 'Active',
+      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-estimate-order.ts

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

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

@@ -0,0 +1,218 @@
+export const generateMarketDepth = () => {
+  return {
+    market: {
+      id: 'a46bd7e5277087723b7ab835844dec3cef8b4445738101269624bf5537d5d423',
+      decimalPlaces: 5,
+      positionDecimalPlaces: 0,
+      data: {
+        staticMidPrice: '9893006',
+        marketTradingMode: 'TRADING_MODE_CONTINUOUS',
+        indicativeVolume: '0',
+        indicativePrice: '0',
+        bestStaticBidPrice: '9893006',
+        bestStaticOfferPrice: '9893006',
+        market: {
+          id: 'a46bd7e5277087723b7ab835844dec3cef8b4445738101269624bf5537d5d423',
+          __typename: 'Market',
+        },
+        __typename: 'MarketData',
+      },
+      depth: {
+        lastTrade: { price: '9893006', __typename: 'Trade' },
+        sell: [
+          {
+            price: '9893007',
+            volume: '3',
+            numberOfOrders: '3',
+            __typename: 'PriceLevel',
+          },
+          {
+            price: '9893010',
+            volume: '4',
+            numberOfOrders: '4',
+            __typename: 'PriceLevel',
+          },
+          {
+            price: '9893012',
+            volume: '1',
+            numberOfOrders: '1',
+            __typename: 'PriceLevel',
+          },
+          {
+            price: '9893015',
+            volume: '1',
+            numberOfOrders: '1',
+            __typename: 'PriceLevel',
+          },
+          {
+            price: '9893017',
+            volume: '2',
+            numberOfOrders: '2',
+            __typename: 'PriceLevel',
+          },
+          {
+            price: '9893021',
+            volume: '4',
+            numberOfOrders: '1',
+            __typename: 'PriceLevel',
+          },
+          {
+            price: '9893025',
+            volume: '5',
+            numberOfOrders: '1',
+            __typename: 'PriceLevel',
+          },
+          {
+            price: '9893125',
+            volume: '4',
+            numberOfOrders: '1',
+            __typename: 'PriceLevel',
+          },
+          {
+            price: '9893135',
+            volume: '2',
+            numberOfOrders: '1',
+            __typename: 'PriceLevel',
+          },
+          {
+            price: '9893165',
+            volume: '5',
+            numberOfOrders: '1',
+            __typename: 'PriceLevel',
+          },
+          {
+            price: '9893175',
+            volume: '3',
+            numberOfOrders: '1',
+            __typename: 'PriceLevel',
+          },
+          {
+            price: '9893185',
+            volume: '3',
+            numberOfOrders: '3',
+            __typename: 'PriceLevel',
+          },
+          {
+            price: '9894185',
+            volume: '1',
+            numberOfOrders: '1',
+            __typename: 'PriceLevel',
+          },
+          {
+            price: '9894585',
+            volume: '1',
+            numberOfOrders: '1',
+            __typename: 'PriceLevel',
+          },
+          {
+            price: '9895585',
+            volume: '4',
+            numberOfOrders: '1',
+            __typename: 'PriceLevel',
+          },
+          {
+            price: '9896585',
+            volume: '2',
+            numberOfOrders: '2',
+            __typename: 'PriceLevel',
+          },
+        ],
+        buy: [
+          {
+            price: '9893005',
+            volume: '4',
+            numberOfOrders: '3',
+            __typename: 'PriceLevel',
+          },
+          {
+            price: '9893003',
+            volume: '2',
+            numberOfOrders: '1',
+            __typename: 'PriceLevel',
+          },
+          {
+            price: '9893001',
+            volume: '1',
+            numberOfOrders: '1',
+            __typename: 'PriceLevel',
+          },
+          {
+            price: '9892006',
+            volume: '3',
+            numberOfOrders: '2',
+            __typename: 'PriceLevel',
+          },
+          {
+            price: '9891006',
+            volume: '2',
+            numberOfOrders: '1',
+            __typename: 'PriceLevel',
+          },
+          {
+            price: '9891001',
+            volume: '1',
+            numberOfOrders: '1',
+            __typename: 'PriceLevel',
+          },
+          {
+            price: '9890101',
+            volume: '2',
+            numberOfOrders: '1',
+            __typename: 'PriceLevel',
+          },
+          {
+            price: '9890091',
+            volume: '5',
+            numberOfOrders: '1',
+            __typename: 'PriceLevel',
+          },
+          {
+            price: '9890081',
+            volume: '4',
+            numberOfOrders: '1',
+            __typename: 'PriceLevel',
+          },
+          {
+            price: '9890050',
+            volume: '2',
+            numberOfOrders: '1',
+            __typename: 'PriceLevel',
+          },
+          {
+            price: '9890040',
+            volume: '6',
+            numberOfOrders: '3',
+            __typename: 'PriceLevel',
+          },
+          {
+            price: '9890030',
+            volume: '6',
+            numberOfOrders: '2',
+            __typename: 'PriceLevel',
+          },
+          {
+            price: '9890021',
+            volume: '3',
+            numberOfOrders: '1',
+            __typename: 'PriceLevel',
+          },
+          {
+            price: '9890011',
+            volume: '1',
+            numberOfOrders: '1',
+            __typename: 'PriceLevel',
+          },
+          {
+            price: '9890001',
+            volume: '11',
+            numberOfOrders: '1',
+            __typename: 'PriceLevel',
+          },
+        ],
+        sequenceNumber: '1661773865550746910',
+        __typename: 'MarketDepth',
+      },
+      __typename: 'Market',
+    },
+  };
+};

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

@@ -0,0 +1,136 @@
+import { protoMarket } from './commons';
+
+export const generateMarketNames = () => {
+  return {
+    markets: [
+      { ...protoMarket },
+      {
+        id: '1d7ddf67dac4924db03f5bf58571a7bcb1908d70c66580467717aabc5345b68a',
+        state: 'STATE_SUSPENDED',
+        tradableInstrument: {
+          instrument: {
+            code: 'AAPL.MF21',
+            name: 'Apple Monthly (30 Jun 2022)',
+            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',
+        state: 'STATE_SUSPENDED',
+        tradableInstrument: {
+          instrument: {
+            code: 'TSLA.QM21',
+            name: 'Tesla Quarterly (30 Jun 2022)',
+            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',
+        state: 'STATE_SUSPENDED',
+        tradableInstrument: {
+          instrument: {
+            code: 'BTCUSD.MF21',
+            name: 'BTCUSD Monthly (30 Jun 2022)',
+            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',
+        state: 'STATE_ACTIVE',
+        tradableInstrument: {
+          instrument: {
+            code: 'ETHBTC.QM21',
+            name: 'ETHBTC Quarterly (30 Jun 2022)',
+            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',
+        state: 'STATE_ACTIVE',
+        tradableInstrument: {
+          instrument: {
+            code: 'UNIDAI.MF21',
+            name: 'UNIDAI Monthly (30 Jun 2022)',
+            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',
+      },
+    ],
+  };
+};

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

@@ -1,130 +1,16 @@
+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)',
-        data: {
-          market: {
-            id: '57fbaa322e97cfc8bb5f1de048c37e033c41b1ac1906d3aed9960912a067ef5a',
-            state: 'Pending',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
+        state: 'Active',
         tradableInstrument: {
           instrument: {
             code: 'CELUSD',
+            name: 'CELUSD (June 2022)',
             metadata: {
               tags: [
                 'base:CEL',
@@ -149,18 +35,11 @@ export const generateSimpleMarkets = () => {
       },
       {
         id: 'ccf2f04865e5951ac3405da6e16b7cbdb535a0ad32df4df2dbed4262cf473255',
-        name: 'XMRUSD market',
-        data: {
-          market: {
-            id: 'ccf2f04865e5951ac3405da6e16b7cbdb535a0ad32df4df2dbed4262cf473255',
-            state: 'Proposed',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
+        state: 'Suspended',
         tradableInstrument: {
           instrument: {
             code: 'XMRUSD',
+            name: 'XMRUSD market',
             metadata: {
               tags: [
                 'base:monero',
@@ -185,18 +64,11 @@ export const generateSimpleMarkets = () => {
       },
       {
         id: '6030e5b4e0ca3297a26081e5af4d453f97f96baab2d74bf56f84efcffc4c382f',
-        name: 'UNIDAI Monthly (30 Jun 2022)',
-        data: {
-          market: {
-            id: '6030e5b4e0ca3297a26081e5af4d453f97f96baab2d74bf56f84efcffc4c382f',
-            state: 'Suspended',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
+        state: 'Active',
         tradableInstrument: {
           instrument: {
             code: 'UNIDAI.MF21',
+            name: 'UNIDAI Monthly (30 Jun 2022)',
             metadata: {
               tags: [
                 'formerly:3C58ED2A4A6C5D7E',
@@ -295,18 +167,11 @@ export const generateSimpleMarkets = () => {
       },
       {
         id: 'de74a5572045b300e8ec50d136896912ec76e7d7ec135bc305dfd4854d9363a4',
-        name: 'XMRUSD market',
-        data: {
-          market: {
-            id: 'de74a5572045b300e8ec50d136896912ec76e7d7ec135bc305dfd4854d9363a4',
-            state: 'Active',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
+        state: 'Pending',
         tradableInstrument: {
           instrument: {
             code: 'XMRUSD',
+            name: 'XMRUSD market',
             metadata: {
               tags: [
                 'base:monero',
@@ -404,18 +269,11 @@ export const generateSimpleMarkets = () => {
       },
       {
         id: '31ea96284611771e486c820acb26a325a99664f9854b5a7e7ad99023efa8f9e6',
-        name: 'ApeCoin (18 Jul 2022)',
-        data: {
-          market: {
-            id: '31ea96284611771e486c820acb26a325a99664f9854b5a7e7ad99023efa8f9e6',
-            state: 'Proposed',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
+        state: 'Closed',
         tradableInstrument: {
           instrument: {
             code: 'APE/USD',
+            name: 'ApeCoin (18 Jul 2022)',
             metadata: {
               tags: [
                 'quote:USD',
@@ -439,18 +297,11 @@ export const generateSimpleMarkets = () => {
       },
       {
         id: '34cff959cdc2ffdb0f167820d701fe8b51cc6b8588e650d93369aaa22d6f8b74',
-        name: 'BTCUSD Monthly (18 Jul 2022)',
-        data: {
-          market: {
-            id: '34cff959cdc2ffdb0f167820d701fe8b51cc6b8588e650d93369aaa22d6f8b74',
-            state: 'Proposed',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
+        state: 'Settled',
         tradableInstrument: {
           instrument: {
             code: 'BTCUSD.MF21',
+            name: 'BTCUSD Monthly (18 Jul 2022)',
             metadata: {
               tags: [
                 'formerly:076BB86A5AA41E3E',
@@ -476,18 +327,11 @@ export const generateSimpleMarkets = () => {
       },
       {
         id: '87b0bbb3c171baa5d97dfc3852332829c91e5c5dc9f7c8fb584c6d8ac75aaaf2',
-        name: 'Builders Club x ETHcc',
-        data: {
-          market: {
-            id: '87b0bbb3c171baa5d97dfc3852332829c91e5c5dc9f7c8fb584c6d8ac75aaaf2',
-            state: 'Active',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
+        state: 'Settled',
         tradableInstrument: {
           instrument: {
             code: 'LTCUSD',
+            name: 'Builders Club x ETHcc',
             metadata: {
               tags: [
                 'base:litecoin',
@@ -573,18 +417,11 @@ export const generateSimpleMarkets = () => {
       },
       {
         id: '45266143c6e9b58f4cff9b8906e971c531bb29ea7af01066973f9b77e8134823',
-        name: 'BTCUSD Monthly (18 Jul 2022)',
-        data: {
-          market: {
-            id: '45266143c6e9b58f4cff9b8906e971c531bb29ea7af01066973f9b77e8134823',
-            state: 'Proposed',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
+        state: 'Pending',
         tradableInstrument: {
           instrument: {
             code: 'BTCUSD.MF21',
+            name: 'BTCUSD Monthly (18 Jul 2022)',
             metadata: {
               tags: [
                 'formerly:076BB86A5AA41E3E',
@@ -610,18 +447,11 @@ export const generateSimpleMarkets = () => {
       },
       {
         id: '65663ebdc96161162769c4d5c5508137416748178d7cb28e2cb0d07a151a2bc6',
-        name: 'ETHBTC Quarterly (30 Jun 2022)',
-        data: {
-          market: {
-            id: '65663ebdc96161162769c4d5c5508137416748178d7cb28e2cb0d07a151a2bc6',
-            state: 'Active',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
+        state: 'Active',
         tradableInstrument: {
           instrument: {
             code: 'ETHBTC.QM21',
+            name: 'ETHBTC Quarterly (30 Jun 2022)',
             metadata: {
               tags: [
                 'formerly:1F0BB6EB5703B099',
@@ -720,18 +550,11 @@ export const generateSimpleMarkets = () => {
       },
       {
         id: '234afabd27e3bce1a879039c041f9f00f915d98459935ddafd0169d38dd13850',
-        name: 'Apple Monthly (30 Jun 2022)',
-        data: {
-          market: {
-            id: '234afabd27e3bce1a879039c041f9f00f915d98459935ddafd0169d38dd13850',
-            state: 'Active',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
+        state: 'Active',
         tradableInstrument: {
           instrument: {
             code: 'AAPL.MF21',
+            name: 'Apple Monthly (30 Jun 2022)',
             metadata: {
               tags: [
                 'formerly:4899E01009F1A721',
@@ -831,18 +654,11 @@ export const generateSimpleMarkets = () => {
       },
       {
         id: '9f2a3c1caa67bb0773ec18d908d32b55b129b9ec2d106a8e9a87f6aa5c0375a6',
-        name: 'Tesla Quarterly (30 Jun 2022)',
-        data: {
-          market: {
-            id: '9f2a3c1caa67bb0773ec18d908d32b55b129b9ec2d106a8e9a87f6aa5c0375a6',
-            state: 'Active',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
+        state: 'Active',
         tradableInstrument: {
           instrument: {
             code: 'TSLA.QM21',
+            name: 'Tesla Quarterly (30 Jun 2022)',
             metadata: {
               tags: [
                 'formerly:5A86B190C384997F',
@@ -942,18 +758,11 @@ export const generateSimpleMarkets = () => {
       },
       {
         id: '8a45ee934d3ddac4b036f9884df1064a5353c620a56f775ba36597d0edef9a7a',
-        name: 'Go big or Go home',
-        data: {
-          market: {
-            id: '8a45ee934d3ddac4b036f9884df1064a5353c620a56f775ba36597d0edef9a7a',
-            state: 'Settled',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
+        state: 'Active',
         tradableInstrument: {
           instrument: {
             code: 'LTCUSD',
+            name: 'Go big or Go home',
             metadata: {
               tags: [
                 'base:litecoin',
@@ -992,18 +801,11 @@ export const generateSimpleMarkets = () => {
       },
       {
         id: 'aede7b9ac0c3b225004929c5455160a00f59864aad32ec366e8a2bff1b30fd0f',
-        name: 'BTCUSD Monthly (08 Jul 2022)',
-        data: {
-          market: {
-            id: 'aede7b9ac0c3b225004929c5455160a00f59864aad32ec366e8a2bff1b30fd0f',
-            state: 'Proposed',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
+        state: 'Active',
         tradableInstrument: {
           instrument: {
             code: 'BTCUSD.MF21',
+            name: 'BTCUSD Monthly (08 Jul 2022)',
             metadata: {
               tags: [
                 'formerly:076BB86A5AA41E3E',
@@ -1029,18 +831,11 @@ export const generateSimpleMarkets = () => {
       },
       {
         id: '9398707e01daa1a1f1ca6ff87cf8d6c03fe7373ce31121ce81b99a129e6bda47',
-        name: 'BTCUSD Monthly (18 Jul 2022)',
-        data: {
-          market: {
-            id: '9398707e01daa1a1f1ca6ff87cf8d6c03fe7373ce31121ce81b99a129e6bda47',
-            state: 'Proposed',
-            __typename: 'Market',
-          },
-          __typename: 'MarketData',
-        },
+        state: 'Active',
         tradableInstrument: {
           instrument: {
             code: 'BTCUSD.MF21',
+            name: 'BTCUSD Monthly (18 Jul 2022)',
             metadata: {
               tags: [
                 'formerly:076BB86A5AA41E3E',
@@ -1067,3 +862,21 @@ export const generateSimpleMarkets = () => {
     ],
   };
 };
+
+export const generateLongListMarkets = (count: number) => {
+  const markets = [];
+  for (let i = 0; i < count; i++) {
+    markets.push({
+      ...protoMarket,
+      id: protoMarket.id + i,
+      tradableInstrument: {
+        ...protoMarket.tradableInstrument,
+        instrument: {
+          ...protoMarket.tradableInstrument.instrument,
+          name: protoMarket.tradableInstrument.instrument.name + i,
+        },
+      },
+    });
+  }
+  return { markets };
+};

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

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

apps/console-lite-e2e/tsconfig.json

@@ -1,10 +1,12 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
+    "jsx": "react-jsx",
     "sourceMap": false,
+    "allowSyntheticDefaultImports": true,
     "outDir": "../../dist/out-tsc",
     "allowJs": true,
-    "types": ["cypress", "node"]
+    "types": ["cypress", "node", "cypress-real-events"]
   },
   "include": ["src/**/*.ts", "src/**/*.js"]
 }

apps/console-lite/.env

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

apps/console-lite/.env.devnet

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

apps/console-lite/.env.mainnet

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

apps/console-lite/.env.stagnet3

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

apps/console-lite/.env.testnet

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

apps/console-lite/.eslintrc.json

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

apps/console-lite/jest.config.ts

@@ -1,11 +1,12 @@
-module.exports = {
-  displayName: 'simple-trading-app',
+/* eslint-disable */
+export default {
+  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'],
 };

apps/console-lite/project.json

@@ -1,6 +1,6 @@
 {
-  "root": "apps/simple-trading-app",
-  "sourceRoot": "apps/simple-trading-app/src",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "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:development",
         "hmr": true,
         "port": 4001
       },
       "configurations": {
         "production": {
-          "buildTarget": "simple-trading-app:build:production",
+          "buildTarget": "console-lite:build:production",
           "hmr": false
         }
       }
@@ -58,23 +58,23 @@
       "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.ts",
         "passWithNoTests": true
       }
     },
     "build-netlify": {
-      "builder": "@nrwl/workspace:run-commands",
+      "executor": "@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"
         ]
       }
     }

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/app.tsx

@@ -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(theme, toggleTheme);
+  const {
+    vegaWalletDialog,
+    menu: { setMenuOpen },
+  } = localValues;
   const location = useLocation();
 
   useEffect(() => {
     setMenuOpen(false);
-  }, [location]);
+  }, [location, setMenuOpen]);
 
   return (
     <EnvironmentProvider>
@@ -37,17 +37,17 @@ function App() {
           <VegaWalletProvider>
             <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} />
+                <div className="max-h-full min-h-full dark:bg-lite-black dark:text-neutral-200 bg-white text-neutral-800 grid grid-rows-[min-content,1fr]">
+                  <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>

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

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

apps/console-lite/src/app/components/deal-ticket/__generated__/PartyBalanceQuery.ts

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

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/baubles-decor.tsx

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

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

@@ -0,0 +1,21 @@
+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.'
+);
+
+export const EST_SLIPPAGE = t(
+  'When you execute a trade on Vega, the price obtained in the market may differ from the best available price displayed at the time of placing the trade. The estimated slippage shows the difference between the best available price and the estimated execution price, determined by market liquidity and your chosen order size.'
+);

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

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

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

@@ -24,7 +24,7 @@ export const DealTicketBalance = ({
   const settlementAccount = useSettlementAccount(
     settlementAssetId,
     accounts,
-    AccountType.General
+    AccountType.ACCOUNT_TYPE_GENERAL
   );
   const formatedNumber =
     settlementAccount?.balance &&

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

@@ -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-4"
+            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 p-4 md:p-6">
+      <section className="w-full md:w-1/2 md:min-w-[500px]">
+        {keypair ? container : <ConnectWallet />}
+      </section>
+      <Baubles />
+    </section>
+  );
+};

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

@@ -0,0 +1,133 @@
+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';
+import { TrafficLight } from '../traffic-light';
+
+interface DealTicketEstimatesProps {
+  quoteName?: string;
+  price?: string;
+  estCloseOut?: string;
+  estMargin?: string;
+  fees?: string;
+  notionalSize?: string;
+  size?: string;
+  slippage?: string;
+}
+
+interface DataTitleProps {
+  children: ReactNode;
+  quoteName?: string;
+}
+
+export const DataTitle = ({ children, quoteName = '' }: DataTitleProps) => (
+  <dt>
+    {children}
+    {quoteName && <small> ({quoteName})</small>}
+  </dt>
+);
+
+interface ValueTooltipProps {
+  value?: string;
+  children?: ReactNode;
+  description: string;
+  id?: string;
+}
+
+export const ValueTooltipRow = ({
+  value,
+  children,
+  description,
+  id,
+}: ValueTooltipProps) => (
+  <dd className="flex gap-x-2 items-center">
+    {value || children}
+    <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,
+  slippage,
+}: DealTicketEstimatesProps) => (
+  <dl className="text-black dark:text-white">
+    {size && (
+      <div className="flex justify-between mb-2">
+        <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-2">
+        <DataTitle>{t('Est. Price')}</DataTitle>
+        <dd>{price}</dd>
+      </div>
+    )}
+    {notionalSize && (
+      <div className="flex justify-between mb-2">
+        <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-2">
+        <DataTitle quoteName={quoteName}>{t('Est. Fees')}</DataTitle>
+        <ValueTooltipRow
+          value={fees}
+          description={constants.EST_FEES_TOOLTIP_TEXT}
+        />
+      </div>
+    )}
+    {estMargin && (
+      <div className="flex justify-between mb-2">
+        <DataTitle quoteName={quoteName}>{t('Est. Margin')}</DataTitle>
+        <ValueTooltipRow
+          value={estMargin}
+          description={constants.EST_MARGIN_TOOLTIP_TEXT}
+        />
+      </div>
+    )}
+    {estCloseOut && (
+      <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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { DealTicketEstimates } from './deal-ticket-estimates';
+import { DealTicketSizeInput } from './deal-ticket-size-input';
+
+interface DealTicketSizeProps {
+  step: number;
+  min: number;
+  max: number;
+  size: number;
+  onSizeChange: (value: number) => void;
+  name: string;
+  quoteName: string;
+  price: string;
+  estCloseOut: string;
+  estMargin: string;
+  fees: string;
+  positionDecimalPlaces: number;
+  notionalSize: string;
+}
+
+export const DealTicketSize = ({
+  step,
+  min,
+  max,
+  price,
+  quoteName,
+  size,
+  onSizeChange,
+  estCloseOut,
+  positionDecimalPlaces,
+  fees,
+  notionalSize,
+}: DealTicketSizeProps) => {
+  return max === 0 ? (
+    <p>Not enough balance to trade</p>
+  ) : (
+    <div>
+      <DealTicketSizeInput
+        step={step}
+        min={min}
+        max={max}
+        value={size}
+        onValueChange={onSizeChange}
+        positionDecimalPlaces={positionDecimalPlaces}
+      />
+      <DealTicketEstimates
+        quoteName={quoteName}
+        fees={fees}
+        estCloseOut={estCloseOut}
+        price={price}
+        notionalSize={notionalSize}
+      />
+    </div>
+  );
+};

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

@@ -0,0 +1,327 @@
+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';
+import type { DealTicketQuery_market } from '@vegaprotocol/deal-ticket';
+import { InputError } from '@vegaprotocol/ui-toolkit';
+import { BigNumber } from 'bignumber.js';
+import { MarketSelector } from '@vegaprotocol/deal-ticket';
+import type { Order } from '@vegaprotocol/orders';
+import { useVegaWallet, VegaTxStatus } from '@vegaprotocol/wallet';
+import {
+  t,
+  addDecimalsFormatNumber,
+  toDecimal,
+  removeDecimal,
+} from '@vegaprotocol/react-helpers';
+import {
+  getDefaultOrder,
+  useOrderValidation,
+  useOrderSubmit,
+  getOrderDialogTitle,
+  getOrderDialogIntent,
+  getOrderDialogIcon,
+  OrderFeedback,
+  validateSize,
+} from '@vegaprotocol/orders';
+import { DealTicketSize } from './deal-ticket-size';
+import MarketNameRenderer from '../simple-market-list/simple-market-renderer';
+import SideSelector, { SIDE_NAMES } from './side-selector';
+import ReviewTrade from './review-trade';
+import type { PartyBalanceQuery } from './__generated__/PartyBalanceQuery';
+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;
+  partyData?: PartyBalanceQuery;
+}
+
+export const DealTicketSteps = ({
+  market,
+  partyData,
+}: DealTicketMarketProps) => {
+  const navigate = useNavigate();
+  const setMarket = useCallback(
+    (marketId: string) => {
+      navigate(`/trading/${marketId}`);
+    },
+    [navigate]
+  );
+
+  const {
+    control,
+    handleSubmit,
+    watch,
+    setValue,
+    formState: { errors },
+  } = useForm<Order>({
+    mode: 'onChange',
+    defaultValues: getDefaultOrder(market),
+  });
+
+  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 { 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 maxTrade = useMaximumPositionSize({
+    partyId: keypair?.pub || '',
+    accounts: partyData?.party?.accounts || [],
+    marketId: market.id,
+    settlementAssetId:
+      market.tradableInstrument.instrument.product.settlementAsset.id,
+    price: market?.depth?.lastTrade?.price,
+    order,
+  });
+
+  const estCloseOut = useOrderCloseOut({ order, market, partyData });
+  const slippage = useCalculateSlippage({ marketId: market.id, order });
+  const [slippageValue, setSlippageValue] = useState(
+    slippage ? parseFloat(slippage) : 0
+  );
+  const transactionStatus =
+    transaction.status === VegaTxStatus.Requested ||
+    transaction.status === VegaTxStatus.Pending
+      ? 'pending'
+      : 'default';
+
+  useEffect(() => {
+    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();
+    }
+    return null;
+  }, [market?.depth?.lastTrade?.price, order.side, slippage]);
+
+  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)
+        .multipliedBy(100)
+        .decimalPlaces(2)
+        .toString();
+
+      return `${estMargin.fees} (${percentage}%)`;
+    }
+
+    return null;
+  }, [estMargin?.fees, notionalSize]);
+
+  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({
+          ...order,
+          price:
+            order.price && removeDecimal(order.price, market.decimalPlaces),
+          size: removeDecimal(order.size, market.positionDecimalPlaces),
+        });
+      }
+    },
+    [
+      transactionStatus,
+      submit,
+      market.decimalPlaces,
+      market.positionDecimalPlaces,
+    ]
+  );
+
+  const steps = [
+    {
+      label: t('Select Market'),
+      component: (
+        <MarketSelector
+          market={market}
+          setMarket={setMarket}
+          ItemRenderer={MarketNameRenderer}
+        />
+      ),
+      value: market.tradableInstrument.instrument.name,
+    },
+    {
+      label: t('Select Direction'),
+      component: (
+        <Controller
+          name="side"
+          control={control}
+          render={({ field }) => (
+            <SideSelector value={field.value} onSelect={field.onChange} />
+          )}
+        />
+      ),
+      value: SIDE_NAMES[orderSide] || '',
+    },
+    {
+      label: t('Choose Position Size'),
+      component:
+        max !== null ? (
+          <>
+            <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...'
+        ),
+      value: orderSize,
+    },
+    {
+      label: t('Review Trade'),
+      component: (
+        <div className="mb-8">
+          {invalidText && (
+            <div className="mb-2">
+              <InputError data-testid="dealticket-error-message">
+                {invalidText}
+              </InputError>
+            </div>
+          )}
+          <ReviewTrade
+            market={market}
+            isDisabled={isDisabled}
+            transactionStatus={transactionStatus}
+            order={order}
+            estCloseOut={estCloseOut}
+            estMargin={estMargin?.margin || emptyString}
+            price={formattedPrice || emptyString}
+            quoteName={
+              market.tradableInstrument.instrument.product.settlementAsset
+                .symbol
+            }
+            notionalSize={notionalSize || emptyString}
+            fees={fees || emptyString}
+            slippage={slippageValue}
+          />
+          <Dialog
+            title={getOrderDialogTitle(finalizedOrder?.status)}
+            intent={getOrderDialogIntent(finalizedOrder?.status)}
+            icon={getOrderDialogIcon(finalizedOrder?.status)}
+          >
+            <OrderFeedback transaction={transaction} order={finalizedOrder} />
+          </Dialog>
+        </div>
+      ),
+      disabled: true,
+    },
+  ];
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)} className="px-2 py-4">
+      <Stepper steps={steps} />
+    </form>
+  );
+};

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

@@ -0,0 +1,126 @@
+import { t } from '@vegaprotocol/react-helpers';
+import {
+  Button,
+  KeyValueTable,
+  KeyValueTableRow,
+} from '@vegaprotocol/ui-toolkit';
+import * as React from 'react';
+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 SimpleMarketExpires from '../simple-market-list/simple-market-expires';
+import { gql, useQuery } from '@apollo/client';
+import type {
+  MarketTags,
+  MarketTagsVariables,
+} from './__generated__/MarketTags';
+import { DealTicketEstimates } from './deal-ticket-estimates';
+import { Side } from '@vegaprotocol/types';
+
+export const MARKET_TAGS_QUERY = gql`
+  query MarketTags($marketId: ID!) {
+    market(id: $marketId) {
+      tradableInstrument {
+        instrument {
+          metadata {
+            tags
+          }
+        }
+      }
+    }
+  }
+`;
+
+interface Props {
+  market: DealTicketQuery_market;
+  isDisabled: boolean;
+  transactionStatus?: string;
+  order: Order;
+  estCloseOut: string;
+  estMargin: string;
+  quoteName: string;
+  price: string;
+  fees: string;
+  notionalSize: string;
+  slippage: number;
+}
+
+export default ({
+  isDisabled,
+  market,
+  order,
+  transactionStatus,
+  estCloseOut,
+  quoteName,
+  fees,
+  price,
+  notionalSize,
+  slippage,
+}: Props) => {
+  const { data: tagsData } = useQuery<MarketTags, MarketTagsVariables>(
+    MARKET_TAGS_QUERY,
+    {
+      variables: { marketId: market.id },
+    }
+  );
+
+  return (
+    <div className="mb-8 text-black dark:text-white" data-testid="review-trade">
+      <KeyValueTable>
+        <KeyValueTableRow noBorder>
+          <div className="flex flex-none gap-x-2 items-center">
+            <div
+              className={classNames(
+                {
+                  'buyButton dark:buyButtonDark': order.side === Side.SIDE_BUY,
+                  'sellButton dark:sellButtonDark':
+                    order.side === Side.SIDE_SELL,
+                },
+                'px-2 py-1 inline text-ui-small'
+              )}
+            >
+              {SIDE_NAMES[order.side]}
+            </div>
+            <div>{market.tradableInstrument.instrument.product.quoteName}</div>
+            <div>
+              {tagsData?.market?.tradableInstrument.instrument.metadata
+                .tags && (
+                <SimpleMarketExpires
+                  tags={
+                    tagsData?.market.tradableInstrument.instrument.metadata.tags
+                  }
+                />
+              )}
+            </div>
+          </div>
+          <div className="text-blue">
+            {`@ ${price} `}
+            <span className="text-ui-small inline">(EST)</span>
+          </div>
+        </KeyValueTableRow>
+      </KeyValueTable>
+
+      <DealTicketEstimates
+        size={order.size}
+        quoteName={quoteName}
+        fees={fees}
+        estCloseOut={estCloseOut}
+        notionalSize={notionalSize}
+        slippage={slippage.toString()}
+      />
+
+      <div className="mt-12 max-w-sm">
+        <Button
+          fill={true}
+          type="submit"
+          disabled={transactionStatus === 'pending' || isDisabled}
+          data-testid="place-order"
+          rightIcon="arrow-top-right"
+        >
+          {transactionStatus === 'pending' ? t('Pending...') : t('Submit')}
+        </Button>
+      </div>
+    </div>
+  );
+};

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

@@ -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 { FormGroup } from '@vegaprotocol/ui-toolkit';
 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) => {
@@ -19,36 +19,36 @@ export default ({ value, onSelect }: SideSelectorProps) => {
     <FormGroup
       label={t('Direction')}
       labelFor="order-side-toggle"
-      labelClassName="sr-only"
+      hideLabel={true}
     >
       <fieldset
-        className="w-full grid md:grid-cols-2 gap-20"
+        className="w-full grid md:grid-cols-2 gap-4"
         id="order-side-toggle"
       >
-        <Button
-          variant="inline-link"
+        <button
           aria-label={t('Open long position')}
+          type="button"
           className={classNames(
-            'py-8',
+            'px-8 py-2',
             '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>
-        <Button
-          variant="inline-link"
+        </button>
+        <button
           aria-label={t('Open short position')}
+          type="button"
           className={classNames(
-            'py-8',
+            'px-8 py-2',
             '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>
+        </button>
         <div className="md:col-span-2 text-black dark:text-white text-ui-small">
           {t(
             'Trading derivatives allows you to make a profit or loss regardless of whether the market you are trading goes up or down. If you open a "long" position, you will make a profit if the price of your chosen market goes up, and you will make a profit for "short" positions when the price goes down.'

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

@@ -0,0 +1,72 @@
+/* tslint:disable */
+/* eslint-disable */
+// @generated
+// This file was automatically generated and should not be edited.
+
+import { AssetStatus } from "@vegaprotocol/types";
+
+// ====================================================
+// GraphQL query operation: Deposits
+// ====================================================
+
+export interface Deposits_assetsConnection_edges_node_source_BuiltinAsset {
+  __typename: "BuiltinAsset";
+}
+
+export interface Deposits_assetsConnection_edges_node_source_ERC20 {
+  __typename: "ERC20";
+  /**
+   * The address of the ERC20 contract
+   */
+  contractAddress: string;
+}
+
+export type Deposits_assetsConnection_edges_node_source = Deposits_assetsConnection_edges_node_source_BuiltinAsset | Deposits_assetsConnection_edges_node_source_ERC20;
+
+export interface Deposits_assetsConnection_edges_node {
+  __typename: "Asset";
+  /**
+   * The ID of the asset
+   */
+  id: string;
+  /**
+   * The full name of the asset (e.g: Great British Pound)
+   */
+  name: string;
+  /**
+   * The symbol of the asset (e.g: GBP)
+   */
+  symbol: string;
+  /**
+   * The precision of the asset. Should match the decimal precision of the asset on its native chain, e.g: for ERC20 assets, it is often 18
+   */
+  decimals: number;
+  /**
+   * The status of the asset in the Vega network
+   */
+  status: AssetStatus;
+  /**
+   * The origin source of the asset (e.g: an ERC20 asset)
+   */
+  source: Deposits_assetsConnection_edges_node_source;
+}
+
+export interface Deposits_assetsConnection_edges {
+  __typename: "AssetEdge";
+  node: Deposits_assetsConnection_edges_node;
+}
+
+export interface Deposits_assetsConnection {
+  __typename: "AssetsConnection";
+  /**
+   * The assets
+   */
+  edges: (Deposits_assetsConnection_edges | null)[] | null;
+}
+
+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 | 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

@@ -0,0 +1,61 @@
+import { gql, useQuery } from '@apollo/client';
+import { DepositManager } from '@vegaprotocol/deposits';
+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 type { Deposits } from './__generated__/Deposits';
+
+const DEPOSITS_QUERY = gql`
+  query Deposits {
+    assetsConnection {
+      edges {
+        node {
+          id
+          name
+          symbol
+          decimals
+          status
+          source {
+            ... on ERC20 {
+              contractAddress
+            }
+          }
+        }
+      }
+    }
+  }
+`;
+
+/**
+ *  Fetches data required for the Deposit page
+ */
+export const DepositContainer = () => {
+  const { VEGA_ENV } = useEnvironment();
+  const { keypair } = useVegaWallet();
+
+  const { data, loading, error } = useQuery<Deposits>(DEPOSITS_QUERY, {
+    variables: { partyId: keypair?.pub },
+    skip: !keypair?.pub,
+  });
+
+  const assets = getEnabledAssets(data);
+
+  return (
+    <AsyncRenderer<Deposits> data={data} loading={loading} error={error}>
+      {assets.length ? (
+        <Web3Container>
+          <DepositManager
+            assets={assets}
+            isFaucetable={VEGA_ENV !== Networks.MAINNET}
+          />
+        </Web3Container>
+      ) : (
+        <Splash>
+          <p>{t('No assets on this network')}</p>
+        </Splash>
+      )}
+    </AsyncRenderer>
+  );
+};

apps/console-lite/src/app/components/deposits/index.ts

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

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

@@ -9,7 +9,7 @@ interface Props {
 
 export const DrawerContent = ({ children, className = '' }: Props) => {
   const classes = classNames(
-    'w-full sm:w-full grow-1 p-12 md:p-20 overflow-hidden',
+    'w-full sm:w-full grow-1 overflow-hidden',
     className
   );
 

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import { Button, Icon } from '@vegaprotocol/ui-toolkit';
+import { ButtonLink, Icon } from '@vegaprotocol/ui-toolkit';
 import { IconNames } from '@blueprintjs/icons';
 import type { IconName } from '@vegaprotocol/ui-toolkit';
 import { useEffect, useState } from 'react';
@@ -37,13 +37,10 @@ export const DrawerToggle = ({
   } Sidebar Navigation Menu`;
 
   return (
-    <Button
-      aria-label={ariaLabel}
-      variant="inline-link"
-      className={classes}
-      onClick={onToggle}
-    >
-      <Icon name={iconName as IconName} />
-    </Button>
+    <span className={classes}>
+      <ButtonLink aria-label={ariaLabel} onClick={onToggle}>
+        <Icon name={iconName as IconName} />
+      </ButtonLink>
+    </span>
   );
 };

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

@@ -4,28 +4,28 @@ 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 },
+    theme,
+    toggleTheme,
   } = useContext(LocalContext);
   return (
     <div
-      className="flex items-stretch pr-16 py-16 bg-black text-white-60"
+      className="flex items-stretch pr-6 py-6 bg-black text-neutral-400"
       data-testid="header"
     >
       <Logo />
-      <div className="flex items-center gap-4 ml-auto mr-8 relative z-10">
+      <div className="flex items-center gap-2 ml-auto relative z-10">
         <VegaWalletConnectButton
           setConnectDialog={setConnect}
           setManageDialog={setManage}
         />
         <ThemeSwitcher
+          theme={theme}
           onToggle={toggleTheme}
           className="-my-4"
-          sunClassName="text-white"
+          fixedBg="dark"
         />
       </div>
     </div>

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

@@ -6,11 +6,11 @@ import { VLogo } from '@vegaprotocol/ui-toolkit';
 const Logo = () => {
   return (
     <NavLink
-      className="mx-20 text-white"
+      className="mx-6 text-white"
       aria-label={t('Go to home page')}
       to="/"
     >
-      <VLogo />
+      <VLogo className="mx-6 my-2" />
     </NavLink>
   );
 };

apps/console-lite/src/app/components/input-setter/index.ts

@@ -0,0 +1 @@
+export * from './input-setter';

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

@@ -0,0 +1,64 @@
+import React from 'react';
+import { render, waitFor, fireEvent } from '@testing-library/react';
+import { InputSetter } from './index';
+
+describe('InputSetter Component', () => {
+  it('should show the correct value and visibility based on props', async () => {
+    const value = 'Hello';
+    const isInputVisible = true;
+    const { getByRole } = await render(
+      <InputSetter
+        id="input-order-size-market"
+        type="number"
+        className="w-full"
+        value={value}
+        isInputVisible={isInputVisible}
+        onChange={() => false}
+      />
+    );
+    const input = getByRole('spinbutton');
+    const btn = getByRole('button');
+    expect(input).toHaveAttribute('value', value);
+    expect(btn).toBeTruthy();
+  });
+
+  it('should toggle the visibility of the input when the button is clicked', async () => {
+    const value = 'Hello';
+    const isInputVisible = true;
+    const { getByRole } = await render(
+      <InputSetter
+        id="input-order-size-market"
+        type="number"
+        className="w-full"
+        value={value}
+        isInputVisible={isInputVisible}
+        onChange={() => false}
+      />
+    );
+    const btn = getByRole('button');
+    fireEvent.click(btn);
+    await waitFor(() => getByRole('button'));
+    expect(getByRole('button')).toHaveTextContent(value);
+  });
+
+  it('should toggle the visibility of the input when the enter key is pressed', async () => {
+    const value = 'Hello';
+    const isInputVisible = true;
+    const { getByRole } = await render(
+      <InputSetter
+        id="input-order-size-market"
+        name="input-order-size-market"
+        type="number"
+        className="w-full"
+        value={value}
+        isInputVisible={isInputVisible}
+        onChange={() => false}
+      />
+    );
+    fireEvent.keyDown(getByRole('spinbutton'), {
+      key: 'Enter',
+    });
+    await waitFor(() => getByRole('button'));
+    expect(getByRole('button')).toHaveTextContent(value);
+  });
+});

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

@@ -0,0 +1,55 @@
+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;
+  isInputVisible?: boolean;
+  children?: ReactNode;
+}
+
+export const InputSetter = ({
+  buttonLabel = t('set'),
+  isInputVisible = false,
+  children,
+  ...props
+}: InputSetterProps & InputProps) => {
+  const [isInputToggled, setIsInputToggled] = useState(isInputVisible);
+
+  const toggleInput = useCallback(() => {
+    setIsInputToggled(!isInputToggled);
+  }, [isInputToggled]);
+
+  const onInputEnter = useCallback(
+    (event: React.KeyboardEvent) => {
+      if (event.key === 'Enter') {
+        event.stopPropagation();
+        toggleInput();
+      }
+    },
+    [toggleInput]
+  );
+
+  return isInputToggled ? (
+    <div className="flex items-center">
+      <Input {...props} onKeyDown={onInputEnter} />
+      <button
+        type="button"
+        className="no-underline hover:underline text-blue ml-2"
+        onClick={toggleInput}
+      >
+        {buttonLabel}
+      </button>
+    </div>
+  ) : (
+    <button
+      type="button"
+      className="no-underline hover:underline text-blue py-1.5"
+      onClick={toggleInput}
+    >
+      {children || props.value}
+    </button>
+  );
+};

apps/console-lite/src/app/components/main/index.tsx

@@ -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,21 +17,19 @@ 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}
           className="p-16"
         />
-        <Nav className="hidden md:block my-20 h-full" />
+        <Nav className="hidden md:block my-6 h-full" />
       </NavigationDrawer>
       <DrawerContent>
         <AppRouter />