chore: focus on toggle (2562)

.dockerignore

@@ -3,7 +3,3 @@ apps/**/node_modules/*
 tmp/*
 .dockerignore
 dockerfiles
-node_modules
-.git
-.github
-.vscode

.github/ISSUE_TEMPLATE/release.md

@@ -1,21 +0,0 @@
----
-name: Release
-about: A template to outline the steps needed to for a successful release of our frontend apps
-title: 'Release [add dapp version]-core-[add core version]'
-labels:
-assignees: ''
----
-
-### Tasks
-
-- [ ] Review [link to core release](xxx)
-- [ ] Tag frontend-monorepo
-- [ ] Create release and generate release notes
-- [ ] Run `@smoke` tests
-- [ ] Run `@regression` tests
-- [ ] Run `@slow` tests
-- [ ] Explorative testing of key flows
-- [ ] Set `release/[network]` to tagged commit
-- [ ] Verify builds (on Netlify and Fleek) are successful
-- [ ] Verify build has been deployed
-- [ ] Smoke testing on deployed app

.github/actions/run-vegacapsule/action.yml

@@ -1,18 +1,6 @@
-outputs:
-  token:
-    description: 'api-token of wallet'
-    value: ${{ steps.generate-api-token.outputs.api-token }}
 runs:
   using: 'composite'
   steps:
-    - name: Vegacapsule version
-      shell: bash
-      run: vegacapsule version
-
-    - name: Vega wallet version
-      shell: bash
-      run: vega wallet software version
-
     - name: Start nomad
       shell: bash
       run: vegacapsule nomad &
@@ -20,32 +8,3 @@ runs:
     - name: Bootstrap network
       shell: bash
       run: vegacapsule network bootstrap --config-path=./frontend-monorepo/vegacapsule/config.hcl --force
-
-    - name: Initialize wallet
-      shell: bash
-      run: vega wallet init -f --home ~/.vegacapsule/testnet/wallet
-
-    - name: Import wallet
-      shell: bash
-      run: vega wallet import -w capsule_wallet --recovery-phrase-file ./frontend-monorepo/vegacapsule/recovery -p ./frontend-monorepo/vegacapsule/passphrase --home ~/.vegacapsule/testnet/wallet
-
-    - name: Generate second public key
-      shell: bash
-      run: vega wallet key generate -w capsule_wallet -p ./frontend-monorepo/vegacapsule/passphrase --home ~/.vegacapsule/testnet/wallet
-
-    - name: Import network
-      shell: bash
-      run: vega wallet network import --force --from-file ./frontend-monorepo/vegacapsule/wallet-config.toml --home ~/.vegacapsule/testnet/wallet
-
-    - name: Init api-token
-      shell: bash
-      run: vega wallet api-token init --home ~/.vegacapsule/testnet/wallet --passphrase-file ./frontend-monorepo/vegacapsule/passphrase
-
-    - name: Generate api-token
-      id: generate-api-token
-      shell: bash
-      run: echo api-token=$(vega wallet api-token generate --wallet-name capsule_wallet --tokens-passphrase-file ./frontend-monorepo/vegacapsule/passphrase  --wallet-passphrase-file ./frontend-monorepo/vegacapsule/passphrase --home ~/.vegacapsule/testnet/wallet | grep -Eo '[a-zA-Z0-9]{64}') >> $GITHUB_OUTPUT
-
-    - name: Start service using capsule network
-      shell: bash
-      run: vega wallet service run -n DV --load-tokens --tokens-passphrase-file ./frontend-monorepo/vegacapsule/passphrase --no-version-check --automatic-consent --home ~/.vegacapsule/testnet/wallet &

.github/actions/setup-vegawallet-docker/action.yml

@@ -0,0 +1,35 @@
+outputs:
+  token:
+    description: 'api-token of wallet'
+    value: ${{ steps.generate-api-token.outputs.api-token }}
+runs:
+  using: 'composite'
+  steps:
+    - name: Initialize wallet
+      shell: bash
+      run: vega wallet init -f --home ~/.vegacapsule/testnet/wallet
+
+    - name: Import wallet
+      shell: bash
+      run: vega wallet import -w capsule_wallet --recovery-phrase-file ./frontend-monorepo/vegacapsule/recovery -p ./frontend-monorepo/vegacapsule/passphrase --home ~/.vegacapsule/testnet/wallet
+
+    - name: Generate second public key
+      shell: bash
+      run: vega wallet key generate -w capsule_wallet -p ./frontend-monorepo/vegacapsule/passphrase --home ~/.vegacapsule/testnet/wallet
+
+    - name: Import network
+      shell: bash
+      run: vega wallet network import --force --from-file ./frontend-monorepo/vegacapsule/wallet-config.toml --home ~/.vegacapsule/testnet/wallet
+
+    - name: Init api-token
+      shell: bash
+      run: vega wallet api-token init --home ~/.vegacapsule/testnet/wallet --passphrase-file ./frontend-monorepo/vegacapsule/passphrase
+
+    - name: Generate api-token
+      id: generate-api-token
+      shell: bash
+      run: echo api-token=$(vega wallet api-token generate --wallet-name capsule_wallet --tokens-passphrase-file ./frontend-monorepo/vegacapsule/passphrase  --wallet-passphrase-file ./frontend-monorepo/vegacapsule/passphrase --home ~/.vegacapsule/testnet/wallet | grep -Eo '[a-zA-Z0-9]{64}') >> $GITHUB_OUTPUT
+
+    - name: Start service using capsule network
+      shell: bash
+      run: vega wallet service run -n DV --load-tokens --tokens-passphrase-file ./frontend-monorepo/vegacapsule/passphrase --no-version-check --automatic-consent --home ~/.vegacapsule/testnet/wallet &

.github/actions/setup-vegawallet/action.yml

@@ -0,0 +1,48 @@
+inputs:
+  recovery:
+    description: 'Recovery phrase'
+  passphrase:
+    description: 'Wallet password'
+outputs:
+  token:
+    description: 'api-token of wallet'
+    value: ${{ steps.generate-api-token.outputs.api-token }}
+runs:
+  using: 'composite'
+  steps:
+    - name: Create passphrase
+      shell: bash
+      run: echo "${{ inputs.passphrase }}" > ./passphrase
+
+    - name: Create recovery
+      shell: bash
+      run: echo "${{ inputs.recovery }}" > ./recovery
+
+    - name: Initialize wallet
+      shell: bash
+      run: vega wallet init -f --home ~/.vegacapsule/testnet/wallet
+
+    - name: Import wallet
+      shell: bash
+      run: vega wallet import -w UI_Trading_Test --recovery-phrase-file ./recovery -p ./passphrase --home ~/.vegacapsule/testnet/wallet
+
+    - name: Create public key 2
+      shell: bash
+      run: vega wallet key generate -w UI_Trading_Test -p ./passphrase --home ~/.vegacapsule/testnet/wallet
+
+    - name: Import network
+      shell: bash
+      run: vega wallet network import --from-url="https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/stagnet3/vegawallet-stagnet3.toml" --force --home ~/.vegacapsule/testnet/wallet
+
+    - name: Init api-token
+      shell: bash
+      run: vega wallet api-token init --home ~/.vegacapsule/testnet/wallet --passphrase-file passphrase
+
+    - name: Generate api-token
+      id: generate-api-token
+      shell: bash
+      run: echo api-token=$(vega wallet api-token generate --wallet-name UI_Trading_Test --tokens-passphrase-file passphrase  --wallet-passphrase-file passphrase --home ~/.vegacapsule/testnet/wallet | grep -Eo '[a-zA-Z0-9]{64}') >> $GITHUB_OUTPUT
+
+    - name: Start service using stagnet3 network
+      shell: bash
+      run: vega wallet service run -n stagnet3 --load-tokens --tokens-passphrase-file passphrase --no-version-check --automatic-consent --home ~/.vegacapsule/testnet/wallet &

.github/workflows/add_issue_new_projects.yml

@@ -13,7 +13,7 @@ env:
 
 jobs:
   add_issue:
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
     steps:
       - name: 'Add issue to project board'
         run: |

.github/workflows/branch-length.yml

@@ -1,16 +0,0 @@
-name: 'Check if branch is shorter than 52 chars'
-on: pull_request
-
-jobs:
-  branch-naming-rules:
-    runs-on: ubuntu-latest
-    steps:
-      # echo "branches that are longer than 51 chars can't be parsed by kubernetes to create previews. Each app has prefix of it's name like: 'governance-' (12 chars), what leaves 51 max branch length"
-      # current parsable length: $( git rev-parse --abbrev-ref HEAD | sed -r s/[^a-zA-Z0-9]+/-/g | sed -r s/^-+\|-+$//g | wc -c)
-      - uses: deepakputhraya/action-branch-name@master
-        with:
-          # regex: '([a-z])+\/([a-z])+' # Regex the branch should match. This example enforces grouping
-          # allowed_prefixes: 'feature,stable,fix' # All branches should start with the given prefix
-          # ignore: master,develop # Ignore exactly matching branch names from convention
-          min_length: 1 # Min length of the branch name
-          max_length: 51 # Max length of the branch name

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

@@ -0,0 +1,50 @@
+name: Cypress tests -- manual trigger
+
+# This workflow runs the frontend tests against chosen branch
+
+on:
+  workflow_dispatch:
+    inputs:
+      project:
+        description: 'Project'
+        required: true
+        type: choice
+        options:
+          - console-lite-e2e
+          - explorer-e2e
+          - token-e2e
+          - trading-e2e
+      tags:
+        description: 'Test tags to run'
+        required: true
+        type: string
+        default: '@smoke, @regression, @slow'
+      skip-nx-cache:
+        description: 'Add --skip-nx-cache to cypress test'
+        required: false
+        type: boolean
+        default: false
+jobs:
+  manual:
+    name: Run Cypress tests -- manual trigger
+    runs-on: ubuntu-latest
+    steps:
+      - name: Set tags
+        run: echo TAGS="--env.grepTags '[ ${{ github.event.inputs.tags }} ]'" >> $GITHUB_ENV
+
+      - name: Set --skip-nx-cache flag
+        if: ${{ github.event.inputs.skip-nx-cache == 'true' }}
+        run: echo SKIP_NX_CACHE="--skip-nx-cache" >> $GITHUB_ENV
+
+    outputs:
+      skip-cache: ${{env.SKIP_NX_CACHE}}
+      tags: ${{env.TAGS}}
+
+  dispatch:
+    needs: manual
+    uses: ./.github/workflows/tests-dispatcher.yml
+    secrets: inherit
+    with:
+      project: ${{ inputs.project }}
+      skip-cache: ${{needs.manual.outputs.skip-cache}}
+      tags: ${{needs.manual.outputs.tags}}

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

@@ -0,0 +1,17 @@
+name: Cypress tests -- night run
+
+# This workflow runs the frontend tests against latest develop of the core to preempt breaking changes
+
+on:
+  schedule:
+    - cron: '0 4 * * *'
+  workflow_dispatch:
+
+jobs:
+  nightly:
+    uses: ./.github/workflows/tests-dispatcher.yml
+    secrets: inherit
+    with:
+      project: '[console-lite-e2e, explorer-e2e, token-e2e, trading-e2e]'
+      tags: --env.grepTags '[ @smoke, @regression, @slow ]'
+      night-run: true

.github/workflows/capsule-cypress.yml

@@ -0,0 +1,61 @@
+name: Cypress tests - PR
+
+on:
+  push:
+    branches:
+      - develop
+      - main
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - ready_for_review
+jobs:
+  pr:
+    runs-on: ubuntu-latest
+    steps:
+      # Checkout front ends
+      - name: Checkout frontend mono repo
+        uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+          path: './frontend-monorepo'
+
+      # Restore node_modules from cache if possible
+      - name: Restore node_modules from cache
+        uses: actions/cache@v3
+        with:
+          path: |
+            frontend-monorepo/node_modules
+            /home/runner/.cache/Cypress
+          key: node_modules_cypress-${{ hashFiles('frontend-monorepo/yarn.lock', 'frontend-monorepo/package.json') }}
+
+      # Install frontend dependencies
+      - name: Install root dependencies
+        run: yarn install --frozen-lockfile
+        working-directory: frontend-monorepo
+
+      # Check SHAs
+      - 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: ${{ github.base_ref || github.ref_name }}
+          set-environment-variables-for-job: true
+
+      # See affected projects
+      - name: See affected apps
+        run: echo AFFECTED=$(yarn nx print-affected --base=${{ env.NX_BASE }} --head=${{ env.NX_HEAD }} --select=projects) >> $GITHUB_ENV
+        working-directory: frontend-monorepo
+
+    outputs:
+      projects: ${{ env.AFFECTED }}
+
+  dispatch:
+    needs: pr
+    uses: ./.github/workflows/tests-dispatcher.yml
+    secrets: inherit
+    with:
+      project: ${{ needs.pr.outputs.projects }}
+      tags: "--env.grepTags='[ @smoke, @regression ]'"

.github/workflows/ci-cd-trigger.yml

@@ -1,211 +0,0 @@
-name: CI/CD
-
-on:
-  push:
-    branches:
-      - release/*
-      - develop
-  pull_request:
-    types:
-      - opened
-      - ready_for_review
-      - reopened
-      - edited
-      - synchronize
-jobs:
-  node-modules:
-    runs-on: ubuntu-22.04
-    name: 'Cache yarn modules'
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Cache node modules
-        id: cache
-        uses: actions/cache@v3
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-cache-node-modules-${{ hashFiles('yarn.lock') }}
-          # comment out "restore-keys" if you need to rebuild yarn from 0
-          restore-keys: |
-            ${{ runner.os }}-cache-node-modules-
-
-      - name: Setup node
-        uses: actions/setup-node@v3
-        if: steps.cache.outputs.cache-hit != 'true'
-        with:
-          node-version-file: '.nvmrc'
-          # https://stackoverflow.com/questions/61010294/how-to-cache-yarn-packages-in-github-actions
-          cache: yarn
-
-      - name: yarn install
-        if: steps.cache.outputs.cache-hit != 'true'
-        run: yarn install --pure-lockfile
-
-  lint-pr-title:
-    needs: node-modules
-    if: ${{ github.event_name == 'pull_request' }}
-    name: Verify PR title
-    uses: ./.github/workflows/lint-pr.yml
-    secrets: inherit
-
-  lint-test-build:
-    timeout-minutes: 60
-    needs: node-modules
-    runs-on: ubuntu-22.04
-    name: '(CI) lint + unit test + build'
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-        with:
-          fetch-depth: 0
-
-      - name: Setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version-file: '.nvmrc'
-          # https://stackoverflow.com/questions/61010294/how-to-cache-yarn-packages-in-github-actions
-          cache: yarn
-
-      - name: Cache node modules
-        uses: actions/cache@v3
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-cache-node-modules-${{ hashFiles('yarn.lock') }}
-
-      - name: Derive appropriate SHAs for base and head for `nx affected` commands
-        uses: nrwl/nx-set-shas@v3
-        with:
-          main-branch-name: develop
-
-      - name: Check formatting
-        run: yarn nx format:check
-
-      - name: Lint affected
-        run: yarn nx affected:lint --max-warnings=0
-
-      - name: Build affected spec
-        run: yarn nx affected --target=build-spec
-
-      - name: Test affected
-        run: yarn nx affected:test
-
-      - name: Build affected
-        run: yarn nx affected:build || (yarn install && yarn nx affected:build)
-
-      # See affected apps
-      - name: See affected apps
-        run: |
-          echo ">>>> debug"
-          echo "NX Version: $nx_version"
-          echo "NX_BASE: ${{ env.NX_BASE }}"
-          echo "NX_HEAD: ${{ env.NX_HEAD }}"
-          echo ">>>> eof debug"
-
-          affected="$(yarn nx print-affected --base=${{ env.NX_BASE }} --head=${{ env.NX_HEAD }} --select=projects)"
-          echo -n "Affected projects: $affected"
-
-          branch_slug="$(echo ${{ github.head_ref || github.ref_name }} | sed -r s/[^a-zA-Z0-9]+/-/g | sed -r s/^-+\|-+$//g | cut -c 1-50 )"
-          projects_e2e=""
-          preview_governance="not deployed"
-          preview_trading="not deployed"
-          preview_explorer="not deployed"
-          if [[ -z "$projects_e2e" ]]; then
-            projects_e2e+='"governance-e2e" "trading-e2e" "explorer-e2e" '
-            preview_governance=$(printf "https://%s.%s.vega.rocks" "governance" "$branch_slug")
-            preview_trading=$(printf "https://%s.%s.vega.rocks" "trading" "$branch_slug")
-            preview_explorer=$(printf "https://%s.%s.vega.rocks" "explorer" "$branch_slug")
-          else
-            if [[ $affected == *"governance"* ]]; then
-              projects_e2e+='"governance-e2e" '
-              preview_governance=$(printf "https://%s.%s.vega.rocks" "governance" "$branch_slug")
-            fi
-            if [[ $affected == *"trading"* ]]; then
-              projects_e2e+='"trading-e2e" '
-              preview_trading=$(printf "https://%s.%s.vega.rocks" "trading" "$branch_slug")
-            fi
-            if [[ $affected == *"explorer"* ]]; then
-              projects_e2e+='"explorer-e2e" '
-              preview_explorer=$(printf "https://%s.%s.vega.rocks" "explorer" "$branch_slug")
-            fi
-          fi
-          projects_e2e=${projects_e2e%?}
-          projects_e2e=[${projects_e2e// /,}]
-          echo PROJECTS_E2E=$projects_e2e >> $GITHUB_ENV
-          echo PROJECTS=$(echo $projects_e2e | sed 's|-e2e||g') >> $GITHUB_ENV
-          echo PREVIEW_GOVERNANCE=$preview_governance >> $GITHUB_ENV
-          echo PREVIEW_TRADING=$preview_trading >> $GITHUB_ENV
-          echo PREVIEW_EXPLORER=$preview_explorer >> $GITHUB_ENV
-
-    outputs:
-      projects: ${{ env.PROJECTS }}
-      projects-e2e: ${{ env.PROJECTS_E2E }}
-      preview_governance: ${{ env.PREVIEW_GOVERNANCE }}
-      preview_trading: ${{ env.PREVIEW_TRADING }}
-      preview_explorer: ${{ env.PREVIEW_EXPLORER }}
-
-  cypress:
-    needs: lint-test-build
-    name: '(CI) cypress'
-    if: ${{ needs.lint-test-build.outputs.projects != '[]' }}
-    uses: ./.github/workflows/cypress-run.yml
-    secrets: inherit
-    with:
-      projects: ${{ needs.lint-test-build.outputs.projects-e2e }}
-      tags: '@smoke @regression'
-
-  publish-dist:
-    needs: lint-test-build
-    name: '(CD) publish dist'
-    if: ${{ needs.lint-test-build.outputs.projects != '[]' }}
-    uses: ./.github/workflows/publish-dist.yml
-    secrets: inherit
-    with:
-      projects: ${{ needs.lint-test-build.outputs.projects }}
-
-  dist-check:
-    runs-on: ubuntu-latest
-    needs:
-      - publish-dist
-      - lint-test-build
-    if: ${{ github.event_name == 'pull_request' }}
-    name: '(CD) comment preview links'
-    steps:
-      - name: Find Comment
-        uses: peter-evans/find-comment@v2
-        id: fc
-        with:
-          issue-number: ${{ github.event.pull_request.number }}
-          body-includes: Previews
-
-      - name: Create comment
-        uses: peter-evans/create-or-update-comment@v3
-        if: ${{ steps.fc.outputs.comment-id == 0 }}
-        with:
-          issue-number: ${{ github.event.pull_request.number }}
-          body: |
-            Previews:
-            * governance: ${{ needs.lint-test-build.outputs.preview_governance }}
-            * explorer: ${{ needs.lint-test-build.outputs.preview_explorer  }}
-            * trading: ${{ needs.lint-test-build.outputs.preview_trading }}
-
-  cypress-check:
-    name: '(CI) cypress - check'
-    runs-on: ubuntu-latest
-    needs: cypress
-    steps:
-      - run: echo Done!
-
-  # Report single result at the end, to avoid mess with required checks in PR
-  cypress-result:
-    if: ${{ always() }}
-    needs: cypress
-    runs-on: ubuntu-22.04
-    steps:
-      - run: |
-          result="${{ needs.cypress.result }}"
-          if [[ $result == "success" || $result == "skipped" ]]; then
-            exit 0
-          else
-            exit 1
-          fi

.github/workflows/cypress-console-lite-e2e.yml

@@ -0,0 +1,67 @@
+name: Cypress - console-lite
+
+on:
+  workflow_call:
+    inputs:
+      trigger:
+        required: true
+        type: string
+        default: 'false'
+      skip-cache:
+        required: false
+        type: string
+      tags:
+        required: false
+        type: string
+
+jobs:
+  console-lite-e2e:
+    if: ${{ inputs.trigger == 'true' }}
+    runs-on: self-hosted
+    steps:
+      - name: Vega version
+        run: vega version
+
+      # Checkout front ends
+      - name: Checkout frontend mono repo
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          path: './frontend-monorepo'
+
+      # Restore node_modules from cache if possible
+      - name: Restore node_modules from cache
+        uses: actions/cache@v3
+        with:
+          path: |
+            frontend-monorepo/node_modules
+            /home/runner/.cache/Cypress
+          key: node_modules_cypress-${{ hashFiles('frontend-monorepo/yarn.lock', 'frontend-monorepo/package.json') }}
+
+      # Install frontend dependencies
+      - name: Install root dependencies
+        run: yarn install --frozen-lockfile
+        working-directory: frontend-monorepo
+      ######
+      ## Setup a Vega wallet for our user
+      ######
+
+      - name: Run Vegacapsule network
+        uses: ./frontend-monorepo/.github/actions/run-vegacapsule
+
+      - name: Set up Vegawallet for capsule
+        id: setup-vega
+        uses: ./frontend-monorepo/.github/actions/setup-vegawallet-docker
+
+      # To make sure that all Cypress binaries are installed properly
+      - name: Install cypress bins
+        run: yarn cypress install
+        working-directory: frontend-monorepo
+
+      - name: Run Cypress tests
+        run: npx nx run console-lite-e2e:e2e ${{ inputs.skip-cache }} --record --key ${{ secrets.CYPRESS_RECORD_KEY }} --browser chrome ${{ inputs.tags }}
+        working-directory: frontend-monorepo
+        env:
+          CYPRESS_SLACK_WEBHOOK: ${{ secrets.CYPRESS_SLACK_WEBHOOK }}
+          CYPRESS_ETH_WALLET_MNEMONIC: ${{ secrets.CYPRESS_ETH_WALLET_MNEMONIC }}
+          CYPRESS_VEGA_WALLET_API_TOKEN: ${{ steps.setup-vega.outputs.token }}

.github/workflows/cypress-explorer-e2e.yml

@@ -1,31 +1,34 @@
-name: (CI) Cypress Run
+name: Cypress - explorer
+
 on:
   workflow_call:
     inputs:
-      projects:
+      trigger:
         required: true
         type: string
+        default: 'false'
       skip-cache:
         required: false
-        type: boolean
+        type: string
       tags:
         required: false
         type: string
+      night-run:
+        required: false
+        type: boolean
+        default: false
 
 jobs:
-  e2e:
-    strategy:
-      fail-fast: false
-      matrix:
-        project: ${{ fromJSON(inputs.projects) }}
-    name: ${{ matrix.project }}
-    runs-on: self-hosted-runner
-    timeout-minutes: 40
+  explorer-e2e:
+    if: ${{ inputs.trigger == 'true' }}
+    runs-on: self-hosted
+    timeout-minutes: 30
     steps:
-      # Checks if skip cache was requested
-      - name: Set skip-nx-cache flag
-        if: ${{ inputs.skip-cache == true }}
-        run: echo "SKIP_CACHE=--skip-nx-cache" >> $GITHUB_ENV
+      - name: Vega version
+        run: vega version
+
+      - name: Vegacapsule version
+        run: vegacapsule version
 
       # Checkout front ends
       - name: Checkout frontend mono repo
@@ -48,28 +51,33 @@ jobs:
         run: yarn install --frozen-lockfile
         working-directory: frontend-monorepo
 
-      # Make sure that all Cypress binaries are installed properly
-      - name: Install cypress bins
-        run: yarn cypress install
-        working-directory: frontend-monorepo
-
       ######
-      ## Setup Vegacapsule and Vega wallet
+      ## Setup a Vega wallet for our user
       ######
 
-      - name: Run Vegacapsule network and Vega wallet
-        id: setup-vega
+      - name: Run Vegacapsule network
         uses: ./frontend-monorepo/.github/actions/run-vegacapsule
 
+      - name: Set up Vegawallet for capsule
+        id: setup-vega
+        uses: ./frontend-monorepo/.github/actions/setup-vegawallet-docker
+
       ######
       ## Run some tests
       ######
 
+      # To make sure that all Cypress binaries are installed properly
+      - name: Install cypress bins
+        run: yarn cypress install
+        working-directory: frontend-monorepo
+
       - name: Run Cypress tests
-        run: yarn nx run ${{ matrix.project }}:e2e ${{ env.SKIP_CACHE }} --record --key ${{ secrets.CYPRESS_RECORD_KEY }} --browser chrome --env.grepTags="${{ inputs.tags }}"
+        run: npx nx run explorer-e2e:e2e ${{ inputs.skip-cache }} --record --key ${{ secrets.CYPRESS_RECORD_KEY }} --browser chrome ${{ inputs.tags }}
         working-directory: frontend-monorepo
         env:
           CYPRESS_SLACK_WEBHOOK: ${{ secrets.CYPRESS_SLACK_WEBHOOK }}
+          CYPRESS_ETH_WALLET_MNEMONIC: ${{ secrets.CYPRESS_ETH_WALLET_MNEMONIC }}
+          CYPRESS_NIGHTLY_RUN: ${{ inputs.night-run }}
           CYPRESS_VEGA_WALLET_API_TOKEN: ${{ steps.setup-vega.outputs.token }}
 
       ######
@@ -84,18 +92,8 @@ jobs:
             mv "${file}" "$(echo ${file} | sed 's|:|-|g')"
           done< <(find /home/runner/.vegacapsule/testnet/logs -type f)
 
-      - name: Print logs files
+      - uses: actions/upload-artifact@v2
         if: ${{ always() }}
-        run: ls -alsh /home/runner/.vegacapsule/testnet/logs/
-
-      - uses: actions/upload-artifact@v3
-        if: ${{ failure() }}
         with:
-          name: logs-${{ matrix.project }}
+          name: logs
           path: /home/runner/.vegacapsule/testnet/logs
-
-      - uses: actions/upload-artifact@v3
-        if: ${{ failure() }}
-        with:
-          name: test-report-${{ matrix.project }}
-          path: frontend-monorepo/apps/trading-e2e/cypress/reports

.github/workflows/cypress-live-test.yml

@@ -13,17 +13,11 @@ on:
 jobs:
   cypress-run:
     name: Run Cypress Trading tests -- live environment
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v2
 
-      - name: Use Node.js 16
-        id: Node
-        uses: actions/setup-node@v2
-        with:
-          node-version: 16.15.1
-
       - name: Run Cypress tests
         uses: cypress-io/github-action@v4
         with:

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

@@ -1,33 +0,0 @@
-name: Cypress tests -- manual trigger
-
-# This workflow runs the frontend tests against chosen branch
-
-on:
-  workflow_dispatch:
-    inputs:
-      project:
-        description: 'Project'
-        required: true
-        type: choice
-        options:
-          - explorer-e2e
-          - governance-e2e
-          - trading-e2e
-      tags:
-        description: 'Test tags to run'
-        required: true
-        type: string
-        default: '@smoke @regression @slow'
-      skip-nx-cache:
-        description: 'Skip NX cache'
-        required: false
-        type: boolean
-        default: false
-jobs:
-  manual:
-    uses: ./.github/workflows/cypress-run.yml
-    secrets: inherit
-    with:
-      projects: '["${{inputs.project}}"]'
-      skip-cache: ${{inputs.skip-nx-cache}}
-      tags: ${{inputs.tags}}

.github/workflows/cypress-nightly.yml

@@ -1,14 +0,0 @@
-name: Cypress tests -- night run
-
-on:
-  schedule:
-    - cron: '0 4 * * *'
-  workflow_dispatch:
-
-jobs:
-  nightly:
-    uses: ./.github/workflows/cypress-run.yml
-    secrets: inherit
-    with:
-      projects: '["explorer-e2e","governance-e2e","trading-e2e"]'
-      tags: '@smoke @regression @slow'

.github/workflows/cypress-token-e2e.yml

@@ -0,0 +1,94 @@
+name: Cypress - token
+
+on:
+  workflow_call:
+    inputs:
+      trigger:
+        required: true
+        type: string
+        default: 'false'
+      skip-cache:
+        required: false
+        type: string
+      tags:
+        required: false
+        type: string
+
+jobs:
+  token-e2e:
+    if: ${{ inputs.trigger == 'true' }}
+    runs-on: self-hosted
+    timeout-minutes: 60
+    steps:
+      - name: Vega version
+        run: vega version
+
+      - name: Vegacapsule version
+        run: vegacapsule version
+
+      # Checkout front ends
+      - name: Checkout frontend mono repo
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          path: './frontend-monorepo'
+
+      # Restore node_modules from cache if possible
+      - name: Restore node_modules from cache
+        uses: actions/cache@v3
+        with:
+          path: |
+            frontend-monorepo/node_modules
+            /home/runner/.cache/Cypress
+          key: node_modules_cypress-${{ hashFiles('frontend-monorepo/yarn.lock', 'frontend-monorepo/package.json') }}
+
+      # Install frontend dependencies
+      - name: Install root dependencies
+        run: yarn install --frozen-lockfile
+        working-directory: frontend-monorepo
+
+      ######
+      ## Setup a Vega wallet for our user
+      ######
+
+      - name: Run Vegacapsule network
+        uses: ./frontend-monorepo/.github/actions/run-vegacapsule
+
+      - name: Set up Vegawallet for capsule
+        id: setup-vega
+        uses: ./frontend-monorepo/.github/actions/setup-vegawallet-docker
+
+      ######
+      ## Run some tests
+      ######
+
+      # To make sure that all Cypress binaries are installed properly
+      - name: Install cypress bins
+        run: yarn cypress install
+        working-directory: frontend-monorepo
+
+      - name: Run Cypress tests
+        run: npx nx run token-e2e:e2e ${{ inputs.skip-cache }} --record --key ${{ secrets.CYPRESS_RECORD_KEY }} --browser chrome ${{ inputs.tags }}
+        working-directory: frontend-monorepo
+        env:
+          CYPRESS_SLACK_WEBHOOK: ${{ secrets.CYPRESS_SLACK_WEBHOOK }}
+          CYPRESS_ETH_WALLET_MNEMONIC: ${{ secrets.CYPRESS_ETH_WALLET_MNEMONIC }}
+          CYPRESS_VEGA_WALLET_API_TOKEN: ${{ steps.setup-vega.outputs.token }}
+
+      ######
+      ## Upload logs
+      ######
+
+      # Artifact path is not valid: /ganache-1/capsule-logscolletor.stderr-2022-12-22T10:20:30Z.log. Contains the following character:  Colon :
+      - name: Rename files to allow archive
+        if: ${{ always() }}
+        run: |
+          while read -r file; do
+            mv "${file}" "$(echo ${file} | sed 's|:|-|g')"
+          done< <(find /home/runner/.vegacapsule/testnet/logs -type f)
+
+      - uses: actions/upload-artifact@v2
+        if: ${{ always() }}
+        with:
+          name: logs-token
+          path: /home/runner/.vegacapsule/testnet/logs

.github/workflows/cypress-trading-e2e.yml

@@ -0,0 +1,86 @@
+name: Cypress - trading
+
+on:
+  workflow_call:
+    inputs:
+      trigger:
+        required: true
+        type: string
+        default: 'false'
+      skip-cache:
+        required: false
+        type: string
+      tags:
+        required: false
+        type: string
+
+jobs:
+  trading-e2e:
+    if: ${{ inputs.trigger == 'true' }}
+    timeout-minutes: 30
+    runs-on: self-hosted
+    steps:
+      - name: Vega version
+        run: vega version
+
+      # Checkout front ends
+      - name: Checkout frontend mono repo
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+          path: './frontend-monorepo'
+
+      # Restore node_modules from cache if possible
+      - name: Restore node_modules from cache
+        uses: actions/cache@v3
+        with:
+          path: |
+            frontend-monorepo/node_modules
+            /home/runner/.cache/Cypress
+          key: node_modules_cypress-${{ hashFiles('frontend-monorepo/yarn.lock', 'frontend-monorepo/package.json') }}
+
+      # Install frontend dependencies
+      - name: Install root dependencies
+        run: yarn install --frozen-lockfile
+        working-directory: frontend-monorepo
+
+      ######
+      ## Setup a Vega wallet for our user
+      ######
+
+      - name: Run Vegacapsule network
+        uses: ./frontend-monorepo/.github/actions/run-vegacapsule
+
+      - name: Set up Vegawallet for capsule
+        id: setup-vega
+        uses: ./frontend-monorepo/.github/actions/setup-vegawallet-docker
+
+      # To make sure that all Cypress binaries are installed properly
+      - name: Install cypress bins
+        run: yarn cypress install
+        working-directory: frontend-monorepo
+
+      - name: Run Cypress tests
+        run: npx nx run trading-e2e:e2e ${{ inputs.skip-cache }} --record --key ${{ secrets.CYPRESS_RECORD_KEY }} --browser chrome ${{ inputs.tags }}
+        working-directory: frontend-monorepo
+        env:
+          CYPRESS_SLACK_WEBHOOK: ${{ secrets.CYPRESS_SLACK_WEBHOOK }}
+          CYPRESS_ETH_WALLET_MNEMONIC: ${{ secrets.CYPRESS_ETH_WALLET_MNEMONIC }}
+          CYPRESS_VEGA_WALLET_API_TOKEN: ${{ steps.setup-vega.outputs.token }}
+
+      ######
+      ## Upload logs
+      ######
+
+      - name: Rename files to allow archive
+        if: ${{ always() }}
+        run: |
+          while read -r file; do
+            mv "${file}" "$(echo ${file} | sed 's|:|-|g')"
+          done< <(find /home/runner/.vegacapsule/testnet/logs -type f)
+
+      - uses: actions/upload-artifact@v2
+        if: ${{ always() }}
+        with:
+          name: logs-trading
+          path: /home/runner/.vegacapsule/testnet/logs

.github/workflows/generate-queries.yml

@@ -8,25 +8,22 @@ on:
 jobs:
   master:
     name: Generate Queries
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup node
-        uses: actions/setup-node@v3
+        uses: actions/checkout@v2
         with:
-          node-version-file: '.nvmrc'
-          # https://stackoverflow.com/questions/61010294/how-to-cache-yarn-packages-in-github-actions
-          cache: yarn
-
+          fetch-depth: 0
+      - name: Use Node.js 16
+        id: Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16.14.0
       - name: Install root dependencies
-        run: yarn install --frozen-lockfile
-
+        run: yarn install
       - name: Generate queries
         run: node ./scripts/get-queries.js
-
       - uses: actions/upload-artifact@v2
         with:
           name: queries

.github/workflows/lint-pr.yml

@@ -1,29 +0,0 @@
----
-name: Verify PR title
-
-on:
-  workflow_call:
-
-jobs:
-  lint_pr:
-    timeout-minutes: 10
-    runs-on: ubuntu-22.04
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version-file: '.nvmrc'
-          # https://stackoverflow.com/questions/61010294/how-to-cache-yarn-packages-in-github-actions
-          cache: yarn
-
-      - name: Cache node modules
-        uses: actions/cache@v3
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-cache-node-modules-${{ hashFiles('yarn.lock') }}
-
-      - name: Check PR title
-        run: echo "${{ github.event.pull_request.title }}" | npx commitlint --config ./commitlint.config-ci.js

.github/workflows/lint_pr.yml

@@ -0,0 +1,21 @@
+---
+name: Verify PR title
+
+on:
+  pull_request:
+    types: [opened, ready_for_review, reopened, edited, synchronize]
+jobs:
+  lint_pr:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Use Node.js 16
+        id: Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16.14.0
+      - name: Install commitlint cli and config
+        run: npm install @commitlint/cli @commitlint/config-conventional
+      - name: Create config
+        run: echo "module.exports = {extends:['@commitlint/config-conventional']};" > commitlint.config.js
+      - name: Check PR title
+        run: echo "${{ github.event.pull_request.title }}" | npx commitlint

.github/workflows/process-tranches.yml

@@ -7,7 +7,7 @@ on:
 jobs:
   master:
     name: Generate Queries
-    runs-on: ubuntu-22.04
+    runs-on: ubuntu-latest
 
     steps:
       - name: Checkout
@@ -19,7 +19,7 @@ jobs:
         id: Node
         uses: actions/setup-node@v2
         with:
-          node-version: 16.15.1
+          node-version: 16.14.0
       - name: Install root dependencies
         run: yarn install
       - name: Generate queries

.github/workflows/publish-dist.yml

@@ -1,171 +0,0 @@
-name: (CD) Publish docker + s3
-
-on:
-  workflow_call:
-    inputs:
-      projects:
-        required: true
-        type: string
-
-jobs:
-  publish-dist:
-    strategy:
-      fail-fast: false
-      matrix:
-        app: ${{ fromJSON(inputs.projects) }}
-    name: ${{ matrix.app }}
-    runs-on: ubuntu-22.04
-    timeout-minutes: 25
-    steps:
-      - name: Check out code
-        uses: actions/checkout@v3
-
-      - 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: Log in to the Container registry
-        uses: docker/login-action@v2
-        with:
-          registry: ghcr.io
-          username: ${{ github.actor }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-
-      - name: Setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version-file: '.nvmrc'
-          # https://stackoverflow.com/questions/61010294/how-to-cache-yarn-packages-in-github-actions
-          cache: yarn
-
-      - name: Cache node modules
-        uses: actions/cache@v3
-        with:
-          path: node_modules
-          key: ${{ runner.os }}-cache-node-modules-${{ hashFiles('yarn.lock') }}
-
-      # https://docs.github.com/en/actions/learn-github-actions/contexts
-      - name: Define variables
-        run: |
-          envName=''
-          dockerfile="dist.Dockerfile"
-          if [[ "${{ github.event_name }}" = "push" ]]; then
-            domain="vega.rocks"
-            if [[ "${{ github.ref }}" =~ .*release/.* ]]; then
-              envName="$(echo ${{ github.ref }} | rev | cut -d '/' -f 1 | rev)"
-              if [[ "${{ github.ref }}" =~ .*mainnet.* ]]; then
-                domain="vega.community"
-                if [[ "${{ matrix.app }}" = "trading" ]]; then
-                  dockerfile="ipfs.Dockerfile"
-                fi
-              fi
-            elif [[ "${{ github.ref }}" =~ .*develop$ ]]; then
-              envName="stagnet1"
-            fi
-            bucketName="${{ matrix.app }}.${envName}.${domain}"
-            echo BUCKET_NAME=${bucketName} >> $GITHUB_ENV
-          fi
-          nodeVersion=$(cat .nvmrc | head -n 1)
-          echo ENV_NAME=${envName} >> $GITHUB_ENV
-          echo NODE_VERSION=${nodeVersion} >> $GITHUB_ENV
-          echo DOCKERFILE=docker/${dockerfile} >> $GITHUB_ENV
-
-      - name: Build local dist
-        if: ${{ env.DOCKERFILE != 'docker/ipfs.Dockerfile' }}
-        run: |
-          flags=""
-          if [[ ! -z "${{ env.ENV_NAME }}" ]]; then
-            if [[ "${{ env.ENV_NAME }}" != "ops-vega" ]]; then
-              flags="--env=${{ env.ENV_NAME }}"
-            fi
-          fi
-
-          if [ "${{ matrix.app }}" = "trading" ]; then
-            yarn nx export trading $flags || (yarn install && yarn nx export trading $flags)
-            DIST_LOCATION=dist/apps/trading/exported
-          else
-            yarn nx build ${{ matrix.app }} $flags || (yarn install && yarn nx build ${{ matrix.app }} $flags)
-            DIST_LOCATION=dist/apps/${{ matrix.app }}
-          fi
-          mv $DIST_LOCATION dist-result
-          tree dist-result
-
-      - name: Build and export to local Docker
-        id: docker_build
-        if: ${{ github.event_name == 'pull_request' || ( env.DOCKERFILE == 'docker/ipfs.Dockerfile' && github.event_name == 'push' ) }}
-        uses: docker/build-push-action@v3
-        with:
-          context: .
-          file: ${{ env.DOCKERFILE }}
-          load: true
-          build-args: |
-            APP=${{ matrix.app }}
-            NODE_VERSION=${{ env.NODE_VERSION }}
-            ENV_NAME=${{ env.ENV_NAME }}
-          tags: |
-            ghcr.io/vegaprotocol/frontend/${{ matrix.app }}:local
-
-      - name: Image digest
-        if: ${{ github.event_name == 'pull_request' || ( env.DOCKERFILE == 'docker/ipfs.Dockerfile' && github.event_name == 'push' ) }}
-        run: echo ${{ steps.docker_build.outputs.digest }}
-
-      - name: Sanity check docker image
-        if: ${{ github.event_name == 'pull_request' || ( env.DOCKERFILE == 'docker/ipfs.Dockerfile' && github.event_name == 'push' ) }}
-        run: |
-          echo "Check ipfs-hash"
-          if [[ "${{ env.DOCKERFILE }}" = "docker/ipfs.Dockerfile" ]];  then
-            docker run --rm ghcr.io/vegaprotocol/frontend/${{ matrix.app }}:local cat /ipfs-hash
-          fi
-
-          echo "List html directory"
-          docker run --rm ghcr.io/vegaprotocol/frontend/${{ matrix.app }}:local sh -c 'apk add --update tree; tree .'
-
-      - name: Copy dist to local filesystem
-        if: ${{ env.DOCKERFILE == 'docker/ipfs.Dockerfile' && github.event_name == 'push' }}
-        run: |
-          docker create --name=dist ghcr.io/vegaprotocol/frontend/${{ matrix.app }}:local
-          docker cp dist:/usr/share/nginx/html dist
-
-          echo "check local dist files"
-          tree dist/html
-          mv dist/html dist-result
-
-      - name: Publish dist as docker image
-        uses: docker/build-push-action@v3
-        if: ${{ github.event_name == 'pull_request' }}
-        with:
-          context: .
-          file: ${{ env.DOCKERFILE }}
-          push: true
-          build-args: |
-            APP=${{ matrix.app }}
-            NODE_VERSION=${{ env.NODE_VERSION }}
-            ENV_NAME=${{ env.ENV_NAME }}
-          tags: |
-            ghcr.io/vegaprotocol/frontend/${{ matrix.app }}:${{ github.event.pull_request.head.sha || github.sha }}
-
-      # bucket creation in github.com/vegaprotocol/terraform//frontend
-      - name: Publish dist to s3
-        uses: jakejarvis/s3-sync-action@master
-        if: ${{ github.event_name == 'push' }}
-        with:
-          args: --acl private --follow-symlinks --delete
-        env:
-          AWS_S3_BUCKET: ${{ env.BUCKET_NAME }}
-          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
-          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
-          AWS_REGION: 'eu-west-1'
-          SOURCE_DIR: 'dist-result'
-
-      - name: Add preview label
-        uses: actions-ecosystem/action-add-labels@v1
-        if: ${{ github.event_name == 'pull_request' }}
-        with:
-          labels: ${{ matrix.app }}-preview
-          number: ${{ github.event.number }}

.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]+-*'
+
+  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/publish-npm.yml

@@ -1,48 +0,0 @@
-name: Publish libs to npm
-
-on:
-  workflow_dispatch:
-    inputs:
-      project:
-        description: 'Monorepo project to publish'
-        required: true
-        type: choice
-        options:
-          - announcements
-          - ui-toolkit
-          - react-helpers
-          - tailwindcss-config
-          - types
-          - utils
-          - i18n
-
-jobs:
-  publish:
-    name: Build & Publish - Tag
-    runs-on: ubuntu-22.04
-    permissions:
-      contents: 'read'
-      actions: 'read'
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-
-      - name: Setup node
-        uses: actions/setup-node@v3
-        with:
-          node-version-file: '.nvmrc'
-          # https://stackoverflow.com/questions/61010294/how-to-cache-yarn-packages-in-github-actions
-          cache: yarn
-
-      - name: Install root dependencies
-        run: yarn install --frozen-lockfile
-
-      - name: Build project
-        run: yarn nx build ${{inputs.project}}
-
-      - name: Publish project to @vegaprotocol
-        uses: JS-DevTools/npm-publish@v1
-        with:
-          token: ${{ secrets.NPM_TOKEN }}
-          package: dist/libs/${{inputs.project}}/package.json
-          access: public

.github/workflows/test.yml

@@ -0,0 +1,46 @@
+name: Unit tests & build
+
+on:
+  push:
+    branches:
+      - develop
+      - main
+  pull_request:
+jobs:
+  pr:
+    name: Test and lint - PR
+    runs-on: ubuntu-latest
+    permissions:
+      contents: 'read'
+      actions: 'read'
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: Derive appropriate SHAs for base and head for `nx affected` commands
+        uses: nrwl/nx-set-shas@v2
+        with:
+          main-branch-name: ${{ github.base_ref }}
+      - name: Use Node.js 16
+        id: Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.14.0
+      - name: Restore node_modules from cache
+        uses: actions/cache@v3
+        with:
+          path: '**/node_modules'
+          key: node_modules-${{ hashFiles('**/yarn.lock') }}
+      - name: Install root dependencies
+        run: yarn install --frozen-lockfile
+      - name: Check formatting
+        run: yarn nx format:check
+      - name: Lint affected
+        run: yarn nx affected:lint --max-warnings=0
+      - name: Test affected
+        run: yarn nx affected:test
+      - name: Build affected
+        run: yarn nx affected:build
+      - name: Build affected spec
+        run: yarn nx affected --target=build-spec

.github/workflows/tests-dispatcher.yml

@@ -0,0 +1,49 @@
+on:
+  workflow_call:
+    inputs:
+      project:
+        required: true
+        type: string
+      skip-cache:
+        required: false
+        type: string
+      tags:
+        required: false
+        type: string
+      night-run:
+        required: false
+        type: boolean
+
+jobs:
+  run-console-lite-e2e:
+    uses: ./.github/workflows/cypress-console-lite-e2e.yml
+    secrets: inherit
+    with:
+      trigger: ${{ contains(inputs.project, 'console-lite-e2e') || contains(inputs.project, 'console-lite') }}
+      skip-cache: ${{ inputs.skip-cache }}
+      tags: ${{ inputs.tags }}
+
+  run-explorer-e2e:
+    uses: ./.github/workflows/cypress-explorer-e2e.yml
+    secrets: inherit
+    with:
+      trigger: ${{ contains(inputs.project, 'explorer-e2e') || contains(inputs.project, 'explorer') }}
+      skip-cache: ${{ inputs.skip-cache }}
+      tags: ${{ inputs.tags }}
+      night-run: ${{ inputs.night-run }}
+
+  run-token-e2e:
+    uses: ./.github/workflows/cypress-token-e2e.yml
+    secrets: inherit
+    with:
+      trigger: ${{ contains(inputs.project, 'token-e2e') || contains(inputs.project, 'token') }}
+      skip-cache: ${{ inputs.skip-cache }}
+      tags: ${{ inputs.tags }}
+
+  run-trading-e2e:
+    uses: ./.github/workflows/cypress-trading-e2e.yml
+    secrets: inherit
+    with:
+      trigger: ${{ contains(inputs.project, 'trading-e2e') || contains(inputs.project, 'trading') }}
+      skip-cache: ${{ inputs.skip-cache }}
+      tags: ${{ inputs.tags }}

.gitignore

@@ -46,6 +46,3 @@ cypress.env.json
 
 # Next.js
 .next
-
-#cypress
-/apps/trading-e2e/cypress/reports/

.nvmrc

@@ -1 +1 @@
-16.15.1
+16.14.0

.prettierignore

@@ -7,4 +7,5 @@ __generated___
 
 apps/static/src/assets/devnet-tranches.json
 apps/static/src/assets/mainnet-tranches.json
+apps/static/src/assets/stagnet3-tranches.json
 apps/static/src/assets/testnet-tranches.json

Jenkinsfile

@@ -1,2 +1,20 @@
 @Library('vega-shared-library') _
-runApprobation ignoreFailure: false, frontendBranch: env.BRANCH_NAME, type: 'frontend'
+
+def commitHash = 'UNKNOWN'
+
+pipeline {
+  agent any
+  options {
+    skipDefaultCheckout true
+    parallelsAlwaysFailFast()
+  }
+  stages {
+    stage('approbation') {
+      steps {
+        sh 'printenv'
+        checkout scm
+        runApprobation ignoreFailure: false, frontendBranch: env.BRANCH_NAME, type: 'frontend'
+      }
+    }
+  }
+}

README.md

@@ -72,7 +72,7 @@ Run `nx serve my-app` for a dev server. Navigate to the port specified in `app/<
 In order to generate the schemas for your GraphQL queries, you can run `GRAPHQL_SCHEMA_PATH=[YOUR SCHEMA FILE / API URL HERE] nx run types:generate`.
 
 ```bash
-export  GRAPHQL_SCHEMA_PATH=https://api.n07.testnet.vega.xyz/graphql
+export  GRAPHQL_SCHEMA_PATH=https://api.n11.testnet.vega.xyz/graphql
 yarn nx run types:generate
 ```
 
@@ -161,7 +161,7 @@ In order to setup and run vegawallet for e2e capsule tests, in a separate termin
 bash setup-vegawallet.sh
 ```
 
-3. copy generated `api-token` and paste the token into `CYPRESS_VEGA_WALLET_API_TOKEN` environment variable in either `apps/governance-e2e/.env` or `apps/explorer-e2e/.env` depending on which project needs testing.
+3. copy generated `api-token` and paste the token into `CYPRESS_VEGA_WALLET_API_TOKEN` environment variable in either `apps/token-e2e/.env` or `apps/explorer-e2e/.env` depending on which project needs testing.
 
 Note: The script is only needed if capsule was built for first time or fresh. To run existing wallet service for capsule:
 

apps/console-lite-e2e/.env

@@ -0,0 +1,11 @@
+NX_ETHEREUM_PROVIDER_URL=http://localhost:8545
+NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_VEGA_CONFIG_URL=''
+NX_VEGA_ENV=CUSTOM
+NX_VEGA_EXPLORER_URL=https://stagnet3.explorer.vega.xyz
+NX_VEGA_URL=http://localhost:3028/query
+NX_VEGA_WALLET_URL=http://localhost:1789
+
+CYPRESS_VEGA_ENV=CUSTOM
+CYPRESS_VEGA_URL=http://localhost:3028/query
+CYPRESS_VEGA_WALLET_API_TOKEN=

apps/console-lite-e2e/.env.capsule

@@ -0,0 +1,11 @@
+NX_ETHEREUM_PROVIDER_URL=http://localhost:8545
+NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_VEGA_CONFIG_URL=''
+NX_VEGA_ENV=CUSTOM
+NX_VEGA_EXPLORER_URL=https://stagnet3.explorer.vega.xyz
+NX_VEGA_URL=http://localhost:3028/query
+NX_VEGA_WALLET_URL=http://localhost:1789
+
+CYPRESS_VEGA_ENV=CUSTOM
+CYPRESS_VEGA_URL=http://localhost:3028/query
+CYPRESS_VEGA_WALLET_API_TOKEN=

apps/console-lite-e2e/.env.stagnet3

@@ -0,0 +1,11 @@
+NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
+NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/stagnet3-network.json
+NX_VEGA_ENV=STAGNET3
+NX_VEGA_EXPLORER_URL=https://stagnet3.explorer.vega.xyz
+NX_VEGA_URL=https://api.stagnet3.vega.xyz/graphql
+NX_VEGA_WALLET_URL=http://localhost:1789
+
+CYPRESS_VEGA_ENV=STAGNET3
+CYPRESS_VEGA_URL=https://api.stagnet3.vega.xyz/graphql
+CYPRESS_VEGA_WALLET_API_TOKEN=

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

@@ -0,0 +1,29 @@
+const { defineConfig } = require('cypress');
+module.exports = defineConfig({
+  projectId: 'et4snf',
+  e2e: {
+    setupNodeEvents(on, config) {
+      require('@cypress/grep/src/plugin')(config);
+      return config;
+    },
+    baseUrl: 'http://localhost:4200',
+    fileServerFolder: '.',
+    fixturesFolder: false,
+    specPattern: './src/integration/*.ts',
+    excludeSpecPattern: '**/*.js',
+    modifyObstructiveCode: false,
+    supportFile: './src/support/index.js',
+    video: false,
+    videoUploadOnPasses: false,
+    videosFolder: '../../dist/cypress/apps/console-lite-e2e/videos',
+    screenshotsFolder: '../../dist/cypress/apps/console-lite-e2e/screenshots',
+    chromeWebSecurity: false,
+    viewportWidth: 1440,
+    viewportHeight: 900,
+  },
+  env: {
+    grepTags: '@regression @smoke @slow',
+    grepFilterSpecs: true,
+    grepOmitFiltered: true,
+  },
+});

apps/console-lite-e2e/declaration.d.ts

@@ -0,0 +1 @@
+declare module '*.scss';

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/app.test.ts

@@ -0,0 +1,10 @@
+describe('simple trading app', { tags: '@smoke' }, () => {
+  beforeEach(() => {
+    cy.mockConsole();
+    cy.visit('/');
+  });
+
+  it('render', () => {
+    cy.get('#root').should('exist');
+  });
+});

apps/console-lite-e2e/src/integration/header.test.ts

@@ -0,0 +1,30 @@
+describe('console lite header', { tags: '@smoke' }, () => {
+  beforeEach(() => {
+    window.localStorage.setItem('theme', 'dark');
+    cy.visit('/');
+  });
+
+  it('logo should linked home', () => {
+    cy.get('span').contains('Markets').click();
+    cy.location('pathname').should('eq', '/markets');
+    cy.getByTestId('header').find('a').click();
+    cy.location('pathname').should('eq', '/');
+  });
+
+  it('theme switcher should switch theme', () => {
+    cy.get('#root').children().eq(0).as('Container');
+    cy.get('@Container').should('have.css', 'background-color', 'rgb(8, 8, 8)');
+    cy.getByTestId('theme-switcher').click();
+    cy.get('@Container').should(
+      'have.css',
+      'background-color',
+      'rgb(255, 255, 255)'
+    );
+  });
+
+  it('wallet connector should open a dialog', () => {
+    cy.get('[role="dialog"]').should('not.exist');
+    cy.getByTestId('connect-vega-wallet').click();
+    cy.get('[role="dialog"]').should('be.visible');
+  });
+});

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

@@ -0,0 +1,139 @@
+import { aliasGQLQuery } from '@vegaprotocol/cypress';
+import type { MarketsQuery } from '@vegaprotocol/market-list';
+import { marketCandlesQuery, marketsQuery } from '@vegaprotocol/mock';
+
+describe('market list', { tags: '@smoke' }, () => {
+  describe('simple url', () => {
+    beforeEach(() => {
+      cy.mockConsole();
+      cy.visit('/markets');
+    });
+
+    it('selects menus', () => {
+      cy.get('[aria-label="Sidebar Navigation Menu"] [aria-current]').should(
+        'have.text',
+        'Markets'
+      );
+      cy.getByTestId('state-trigger').should('have.text', 'Active');
+      cy.get('[aria-label="Future"]').click();
+      cy.get('[data-testid="market-assets-menu"] a.active').should(
+        'have.text',
+        'All'
+      );
+    });
+
+    it('navigation should make possibly shortest url', () => {
+      cy.location('pathname').should('equal', '/markets');
+
+      cy.getByTestId('state-trigger').click();
+      cy.get('[role=menuitemcheckbox]').contains('All').click();
+      cy.location('pathname').should('equal', '/markets/all');
+
+      cy.get('[aria-label="Future"]').click();
+      cy.location('pathname').should('eq', '/markets/all/Future');
+      let asset = '';
+      cy.getByTestId('market-assets-menu')
+        .children()
+        .then((children) => {
+          if (children.length > 1) {
+            asset = children[1].innerText;
+            if (asset) {
+              cy.wrap(children[1]).click();
+              cy.location('pathname').should(
+                'match',
+                new RegExp(`/markets/all/Future/${asset}`, 'i')
+              );
+              cy.get('a').contains('All Markets').click();
+              cy.location('pathname').should('eq', '/markets/all');
+            }
+          }
+        });
+
+      cy.getByTestId('state-trigger').click();
+      cy.get('[role=menuitemcheckbox]').contains('Active').click();
+      cy.location('pathname').should('equal', '/markets');
+    });
+  });
+
+  describe('url params should select filters', () => {
+    beforeEach(() => {
+      cy.mockConsole();
+    });
+
+    it('suspended status', () => {
+      cy.visit('/markets/Suspended');
+      cy.getByTestId('state-trigger').should('have.text', 'Suspended');
+    });
+
+    it('last asset (if exists)', () => {
+      cy.visit('/markets');
+      cy.wait('@Markets').then((filters) => {
+        const data: MarketsQuery | undefined = filters?.response?.body?.data;
+        if (data?.marketsConnection?.edges.length) {
+          const asset =
+            data?.marketsConnection?.edges[0].node.tradableInstrument.instrument
+              .product.settlementAsset.symbol;
+          cy.visit(`/markets/Suspended/Future/${asset}`);
+          cy.getByTestId('market-assets-menu')
+            .find('a.active')
+            .should('have.text', asset);
+        }
+      });
+    });
+
+    it('Future product', () => {
+      cy.visit('/markets/Suspended/Future');
+      cy.getByTestId('market-products-menu')
+        .find('a.active')
+        .should('have.text', 'Future');
+    });
+  });
+
+  describe('long list of results should be handled properly', () => {
+    beforeEach(() => {
+      cy.mockConsole();
+      cy.viewport(1440, 900);
+      const market = marketsQuery().marketsConnection?.edges[0];
+      const edges = new Array(1000)
+        .fill('')
+        .map(() => Object.assign({}, market));
+      cy.mockGQL((req) => {
+        aliasGQLQuery(
+          req,
+          'Markets',
+          marketsQuery({ marketsConnection: { edges } })
+        );
+        aliasGQLQuery(req, 'MarketsCandles', marketCandlesQuery());
+      });
+      performance.mark('start-1k');
+      cy.visit('/markets');
+      cy.wait('@Markets');
+    });
+    it('handles 1000 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,85 @@
+const marketId = 'market-0';
+const marketName = 'ACTIVE MARKET';
+
+describe('market selector', { tags: '@smoke' }, () => {
+  beforeEach(() => {
+    cy.mockConsole();
+    cy.setVegaWallet();
+    cy.visit(`/trading/${marketId}`);
+    cy.wait('@Markets');
+  });
+
+  it('should be properly rendered', () => {
+    cy.get('input[placeholder="Search"]').should('have.value', marketName);
+    cy.getByTestId('arrow-button').click();
+    cy.getByTestId('market-pane').should('be.visible');
+    cy.getByTestId('market-pane')
+      .children()
+      .find('[role="button"]')
+      .first()
+      .should('contain.text', marketName);
+    cy.getByTestId('market-pane')
+      .children()
+      .find('[role="button"]')
+      .first()
+      .click();
+    cy.getByTestId('market-pane').should('not.be.visible');
+  });
+
+  it('typing should change list', () => {
+    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('ACTIVE');
+    cy.getByTestId('market-pane')
+      .children()
+      .find('[role="button"]')
+      .should('have.length', 1);
+    cy.getByTestId('market-pane')
+      .children()
+      .find('[role="button"]')
+      .last()
+      .click();
+    cy.location('pathname').should('eq', `/trading/${marketId}`);
+    cy.get('input[placeholder="Search"]').should('have.value', marketName);
+  });
+  // constantly failing on ci
+  it.skip('keyboard navigation should work well', () => {
+    cy.get('input[placeholder="Search"]').type('{backspace}');
+    cy.get('input[placeholder="Search"]').clear();
+    cy.focused().realPress('ArrowDown');
+    cy.focused().should('contain.text', marketName);
+    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', () => {
+    cy.viewport('iphone-xr');
+    cy.visit(`/trading/${marketId}`);
+    cy.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"]').then((search) => {
+      cy.wrap(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', marketName);
+  });
+});

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

@@ -0,0 +1,277 @@
+import { aliasGQLQuery } from '@vegaprotocol/cypress';
+import { marketQuery, marketsQuery } from '@vegaprotocol/mock';
+
+const marketId =
+  marketsQuery().marketsConnection?.edges[1].node.id || 'market-1';
+const marketOverride = {
+  market: {
+    depth: {
+      lastTrade: {
+        price: '9893006',
+      },
+    },
+    id: marketId,
+    tradableInstrument: {
+      instrument: {
+        product: {
+          settlementAsset: {
+            id: 'asset-id-2',
+            name: 'DAI Name',
+            symbol: 'tDAI',
+          },
+        },
+      },
+    },
+  },
+};
+
+describe('Market trade with wallet disconnected', { tags: '@smoke' }, () => {
+  before(() => {
+    cy.mockConsole();
+    cy.visit(`/trading/${marketId}`);
+    cy.wait('@Market');
+  });
+  it('should not display steps', () => {
+    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');
+  });
+});
+
+describe('Market trade', { tags: '@regression' }, () => {
+  beforeEach(() => {
+    cy.mockConsole();
+    cy.mockGQL((req) => {
+      aliasGQLQuery(req, 'Market', marketQuery(marketOverride));
+    });
+    cy.setVegaWallet();
+    cy.visit(`/trading/${marketId}`);
+    cy.wait('@Market');
+  });
+
+  it('side selector should work well', () => {
+    cy.get('#step-1-control [aria-label^="Selected value"]').should(
+      'have.text',
+      'Long'
+    );
+    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-1-control [aria-label^="Selected value"]').should(
+      'have.text',
+      'Short'
+    );
+  });
+
+  it('side selector mobile view should work well', () => {
+    cy.viewport('iphone-xr');
+    cy.getByTestId('next-button').scrollIntoView().click();
+
+    cy.get('button[aria-label="Open long position"]').should(
+      'have.class',
+      'selected'
+    );
+    cy.get('button[aria-label="Open short position"]').should(
+      'not.have.class',
+      'selected'
+    );
+
+    cy.get('button[aria-label="Open short position"]').click();
+    cy.get('button[aria-label="Open long position"]').should(
+      'not.have.class',
+      'selected'
+    );
+    cy.get('button[aria-label="Open short position"]').should(
+      'have.class',
+      'selected'
+    );
+    cy.getByTestId('next-button').scrollIntoView().click();
+    cy.get('#step-1-control').should(
+      'contain.html',
+      'aria-label="Selected value Short"'
+    );
+  });
+
+  it('size slider should work well', () => {
+    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('[role="slider"]').type('{rightarrow}');
+
+    cy.get('#step-2-panel')
+      .find('dd')
+      .eq(0)
+      .find('button')
+      .should('have.text', '2');
+  });
+
+  it('percentage selection should work well', () => {
+    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.getByTestId('max-label').should('have.text', '10');
+
+    cy.getByTestId('percentage-selector')
+      .find('button')
+      .contains('Max')
+      .click();
+    cy.get('#step-2-panel')
+      .find('dd')
+      .eq(0)
+      .find('button')
+      .should('have.text', '10');
+  });
+
+  it('size input should work well', () => {
+    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('dd')
+      .eq(0)
+      .find('button')
+      .should('have.text', '2');
+    cy.get('button').contains('Max').click();
+  });
+
+  it('slippage value should be displayed', () => {
+    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.01%');
+  });
+
+  it('allow slippage value to be adjusted', () => {
+    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.01%');
+    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', () => {
+    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', () => {
+    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.00 (3.03%)');
+  });
+
+  it('order review should display proper calculations', () => {
+    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)
+      .should('have.text', '3.00 (3.03%)');
+
+    cy.get('#step-3-panel')
+      .find('dd')
+      .eq(4)
+      .should('have.text', '45,126.90058');
+
+    cy.getByTestId('place-order').should('be.enabled').click();
+  });
+
+  it('info tooltip on mobile view should work well', () => {
+    cy.viewport('iphone-xr');
+    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

@@ -0,0 +1,184 @@
+import { aliasGQLQuery } from '@vegaprotocol/cypress';
+import {
+  accountsQuery,
+  assetsQuery,
+  chainIdQuery,
+  fillsQuery,
+  marginsQuery,
+  marketsDataQuery,
+  marketsQuery,
+  ordersQuery,
+  positionsQuery,
+  statisticsQuery,
+} from '@vegaprotocol/mock';
+
+describe('Portfolio page - wallet', { tags: '@smoke' }, () => {
+  it('button for wallet connect should work', () => {
+    cy.mockConsole();
+    cy.visit('/');
+    cy.get('[href="/portfolio"]').eq(0).click();
+    cy.getByTestId('trading-connect-wallet').should('be.visible');
+    cy.connectVegaWallet();
+    cy.getByTestId('trading-connect-wallet').should('not.exist');
+  });
+});
+
+describe('Portfolio page tabs', { tags: '@smoke' }, () => {
+  before(() => {
+    cy.mockGQL((req) => {
+      aliasGQLQuery(req, 'ChainId', chainIdQuery());
+      aliasGQLQuery(req, 'Statistics', statisticsQuery());
+      aliasGQLQuery(req, 'Positions', positionsQuery());
+      aliasGQLQuery(req, 'Margins', marginsQuery());
+      aliasGQLQuery(req, 'Markets', marketsQuery());
+      aliasGQLQuery(req, 'MarketsData', marketsDataQuery());
+      aliasGQLQuery(req, 'Accounts', accountsQuery());
+      aliasGQLQuery(req, 'Assets', assetsQuery());
+    });
+    cy.setVegaWallet();
+  });
+
+  it('certain tabs should exist', () => {
+    cy.visit('/portfolio');
+
+    cy.getByTestId('assets').click();
+    cy.location('pathname').should('eq', '/portfolio/assets');
+
+    cy.getByTestId('positions').click();
+    cy.location('pathname').should('eq', '/portfolio/positions');
+
+    cy.getByTestId('orders').click();
+    cy.location('pathname').should('eq', '/portfolio/orders');
+
+    cy.getByTestId('fills').click();
+    cy.location('pathname').should('eq', '/portfolio/fills');
+
+    cy.getByTestId('deposits').click();
+    cy.location('pathname').should('eq', '/portfolio/deposits');
+  });
+
+  describe('Assets view', () => {
+    beforeEach(() => {
+      cy.mockConsole();
+      cy.setVegaWallet();
+      cy.visit('/portfolio/assets');
+    });
+
+    it('data should be properly rendered', () => {
+      cy.get('.ag-center-cols-container .ag-row').should('have.length', 5);
+      cy.get('[role="gridcell"][col-id="account-asset"] button')
+        .contains('tEURO')
+        .click();
+      cy.getByTestId('dialog-title').should(
+        'have.text',
+        'Asset details - tEURO'
+      );
+      cy.getByTestId('dialog-close').click();
+    });
+  });
+
+  describe('Positions view', () => {
+    beforeEach(() => {
+      cy.mockGQL((req) => {
+        aliasGQLQuery(req, 'ChainId', chainIdQuery());
+        aliasGQLQuery(req, 'Statistics', statisticsQuery());
+        aliasGQLQuery(req, 'Positions', positionsQuery());
+        aliasGQLQuery(req, 'Margins', marginsQuery());
+        aliasGQLQuery(req, 'Markets', marketsQuery());
+        aliasGQLQuery(req, 'MarketsData', marketsDataQuery());
+        aliasGQLQuery(req, 'Accounts', accountsQuery());
+        aliasGQLQuery(req, 'Assets', assetsQuery());
+      });
+      cy.setVegaWallet();
+      cy.visit('/portfolio/positions');
+    });
+
+    it('data should be properly rendered', () => {
+      cy.get('.ag-center-cols-container .ag-row').should('have.length', 2);
+    });
+  });
+
+  describe('Orders view', () => {
+    beforeEach(() => {
+      cy.mockGQL((req) => {
+        aliasGQLQuery(req, 'ChainId', chainIdQuery());
+        aliasGQLQuery(req, 'Statistics', statisticsQuery());
+        aliasGQLQuery(req, 'Orders', ordersQuery());
+        aliasGQLQuery(req, 'Markets', marketsQuery());
+      });
+      cy.setVegaWallet();
+      cy.visit('/portfolio/orders');
+    });
+
+    it('data should be properly rendered', () => {
+      cy.get('.ag-center-cols-container .ag-row').should('have.length', 5);
+    });
+  });
+
+  describe('Fills view', () => {
+    beforeEach(() => {
+      cy.mockGQL((req) => {
+        aliasGQLQuery(req, 'ChainId', chainIdQuery());
+        aliasGQLQuery(req, 'Statistics', statisticsQuery());
+        aliasGQLQuery(req, 'Orders', ordersQuery());
+        aliasGQLQuery(req, 'Markets', marketsQuery());
+        aliasGQLQuery(req, 'Fills', fillsQuery());
+      });
+      cy.setVegaWallet();
+      cy.visit('/portfolio/fills');
+    });
+
+    it('data should be properly rendered', () => {
+      cy.get('.ag-center-cols-container .ag-row').should('have.length', 4);
+    });
+  });
+
+  describe('Empty views', () => {
+    beforeEach(() => {
+      cy.mockGQL((req) => {
+        aliasGQLQuery(req, 'ChainId', chainIdQuery());
+        aliasGQLQuery(req, 'Statistics', statisticsQuery());
+        aliasGQLQuery(req, 'Positions', { party: null });
+        aliasGQLQuery(req, 'Accounts', { party: null });
+        aliasGQLQuery(req, 'Orders', { party: null });
+        aliasGQLQuery(req, 'Fills', { party: null });
+        aliasGQLQuery(req, 'Markets', {
+          marketsConnection: { edges: [], __typename: 'MarketConnection' },
+        });
+        aliasGQLQuery(req, 'Assets', {
+          assetsConnection: { edges: null, __typename: 'AssetsConnection' },
+        });
+        aliasGQLQuery(req, 'Margins', marginsQuery());
+        aliasGQLQuery(req, 'MarketsData', marketsDataQuery());
+      });
+      cy.setVegaWallet();
+      cy.visit('/portfolio');
+    });
+
+    it('"No data to display" should be always displayed', () => {
+      cy.getByTestId('assets').click();
+      cy.get('div.flex.items-center.justify-center').should(
+        'contain.text',
+        'No data to display'
+      );
+
+      cy.getByTestId('positions').click();
+      cy.get('div.flex.items-center.justify-center').should(
+        'contain.text',
+        'No data to display'
+      );
+
+      cy.getByTestId('orders').click();
+      cy.get('div.flex.items-center.justify-center').should(
+        'contain.text',
+        'No data to display'
+      );
+
+      cy.getByTestId('fills').click();
+      cy.get('div.flex.items-center.justify-center').should(
+        'contain.text',
+        'No data to display'
+      );
+    });
+  });
+});

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

@@ -0,0 +1,58 @@
+import { aliasGQLQuery } from '@vegaprotocol/cypress';
+import type { CyHttpMessages } from 'cypress/types/net-stubbing';
+import {
+  accountsQuery,
+  assetsQuery,
+  chainIdQuery,
+  estimateOrderQuery,
+  fillsQuery,
+  marginsQuery,
+  marketDataQuery,
+  marketDepthQuery,
+  marketQuery,
+  marketsCandlesQuery,
+  marketsDataQuery,
+  marketsQuery,
+  networkParamsQuery,
+  ordersQuery,
+  positionsQuery,
+  statisticsQuery,
+} from '@vegaprotocol/mock';
+
+declare global {
+  // eslint-disable-next-line @typescript-eslint/no-namespace
+  namespace Cypress {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    interface Chainable<Subject> {
+      mockConsole(): void;
+    }
+  }
+}
+
+const mockPage = (req: CyHttpMessages.IncomingHttpRequest) => {
+  aliasGQLQuery(req, 'ChainId', chainIdQuery());
+  aliasGQLQuery(req, 'Statistics', statisticsQuery());
+  aliasGQLQuery(req, 'Markets', marketsQuery());
+  aliasGQLQuery(req, 'MarketsCandles', marketsCandlesQuery());
+  aliasGQLQuery(req, 'MarketsData', marketsDataQuery());
+  aliasGQLQuery(req, 'MarketData', marketDataQuery());
+  aliasGQLQuery(req, 'Market', marketQuery());
+  aliasGQLQuery(req, 'MarketTags', {});
+  aliasGQLQuery(req, 'EstimateOrder', estimateOrderQuery());
+  aliasGQLQuery(req, 'MarketNames', {});
+  aliasGQLQuery(req, 'MarketDepth', marketDepthQuery());
+  aliasGQLQuery(req, 'Positions', positionsQuery());
+  aliasGQLQuery(req, 'Margins', marginsQuery());
+  aliasGQLQuery(req, 'Accounts', accountsQuery());
+  aliasGQLQuery(req, 'Assets', assetsQuery());
+  aliasGQLQuery(req, 'SimpleMarkets', marketsQuery());
+  aliasGQLQuery(req, 'Orders', ordersQuery());
+  aliasGQLQuery(req, 'Fills', fillsQuery());
+  aliasGQLQuery(req, 'NetworkParams', networkParamsQuery());
+};
+
+export const addMockConsole = () => {
+  Cypress.Commands.add('mockConsole', () => {
+    cy.mockGQL(mockPage);
+  });
+};

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

@@ -0,0 +1,7 @@
+import '@vegaprotocol/cypress';
+import 'cypress-real-events/support';
+import registerCypressGrep from '@cypress/grep';
+import { addMockConsole } from './console-mock';
+
+registerCypressGrep();
+addMockConsole();

apps/console-lite-e2e/tsconfig.json

@@ -1,8 +1,6 @@
 {
   "extends": "../../tsconfig.base.json",
   "compilerOptions": {
-    "target": "es5",
-    "lib": ["es5", "dom", "es2021"],
     "strict": true,
     "jsx": "react-jsx",
     "sourceMap": false,
@@ -11,5 +9,5 @@
     "allowJs": true,
     "types": ["cypress", "node", "cypress-real-events", "@cypress/grep"]
   },
-  "include": ["src/**/*.ts", "src/**/*.js"]
+  "include": ["src/**/*.ts", "src/**/*.js", "./declaration.d.ts", "index.d.ts"]
 }

apps/console-lite/.env

@@ -0,0 +1,27 @@
+# React Environment Variables
+# https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables#expanding-environment-variables-in-env
+
+# Netlify Environment Variables
+# https://www.netlify.com/docs/continuous-deployment/#environment-variables
+NX_VERSION=$npm_package_version
+NX_REPOSITORY_URL=$REPOSITORY_URL
+NX_BRANCH=$BRANCH
+NX_PULL_REQUEST=$PULL_REQUEST
+NX_HEAD=$HEAD
+NX_COMMIT_REF=$COMMIT_REF
+NX_CONTEXT=$CONTEXT
+NX_REVIEW_ID=$REVIEW_ID
+NX_INCOMING_HOOK_TITLE=$INCOMING_HOOK_TITLE
+NX_INCOMING_HOOK_URL=$INCOMING_HOOK_URL
+NX_INCOMING_HOOK_BODY=$INCOMING_HOOK_BODY
+NX_URL=$URL
+NX_DEPLOY_URL=$DEPLOY_URL
+NX_DEPLOY_PRIME_URL=$DEPLOY_PRIME_URL
+NX_VEGA_CONFIG_URL="https://static.vega.xyz/assets/stagnet3-network.json"
+NX_VEGA_ENV=STAGNET3
+NX_VEGA_URL="https://api.stagnet3.vega.xyz/graphql"
+NX_VEGA_WALLET_URL=http://localhost:1789
+NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
+NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_VEGA_NETWORKS={"MAINNET":"https://alpha.console.vega.xyz"}
+NX_VEGA_EXPLORER_URL=https://explorer.fairground.wtf

apps/console-lite/.env.capsule

@@ -0,0 +1,3 @@
+# App configuration variables
+NX_VEGA_URL=http://localhost:3028/query
+NX_VEGA_ENV=LOCAL

apps/console-lite/.env.devnet

@@ -0,0 +1,8 @@
+# App configuration variables
+NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/devnet-network.json
+NX_VEGA_URL=https://api.n04.d.vega.xyz/graphql
+NX_VEGA_ENV=DEVNET
+NX_VEGA_NETWORKS={\"MAINNET\":\"https://alpha.console.vega.xyz\"}
+NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
+NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_VEGA_EXPLORER_URL=https://dev.explorer.vega.xyz

apps/console-lite/.env.mainnet

@@ -0,0 +1,8 @@
+# App configuration variables
+NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/mainnet-network.json
+NX_VEGA_URL=https://api.vega.xyz/query
+NX_VEGA_ENV=MAINNET
+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
+NX_VEGA_EXPLORER_URL=https://explorer.vega.xyz

apps/console-lite/.env.sandbox

@@ -0,0 +1,7 @@
+NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/sandbox-network.json
+NX_VEGA_URL=https://api.sandbox.vega.xyz/graphql
+NX_VEGA_ENV=SANDBOX
+NX_VEGA_NETWORKS='{"DEVNET":"https://dev.token.vega.xyz","STAGNET3":"https://stagnet3.token.vega.xyz","STAGNET1":"https://stagnet1.token.vega.xyz","TESTNET":"https://token.fairground.wtf","MAINNET":"https://token.vega.xyz"}'
+NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/sandbox-network.json
+NX_VEGA_EXPLORER_URL=https://sandbox.explorer.vega.xyz
+NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet

apps/console-lite/.env.stagnet1

@@ -0,0 +1,10 @@
+NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
+NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
+NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/stagnet1-network.json
+NX_VEGA_ENV=STAGNET1
+NX_VEGA_EXPLORER_URL=https://stagnet1.explorer.vega.xyz
+NX_VEGA_NETWORKS={\"TESTNET\":\"https://console.fairground.wtf\",\"STAGNET1\":\"https://stagnet1.console.vega.xyz\",\"STAGNET3\":\"https://stagnet3.console.vega.xyz\"}
+NX_VEGA_TOKEN_URL=https://stagnet1.token.vega.xyz
+NX_VEGA_URL=https://api.n00.stagnet1.vega.xyz/graphql
+NX_VEGA_WALLET_URL=http://localhost:1789

apps/console-lite/.env.stagnet3

@@ -0,0 +1,7 @@
+# App configuration variables
+NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/stagnet3-network.json
+NX_VEGA_URL=https://api.stagnet3.vega.xyz/graphql
+NX_VEGA_ENV=STAGNET3
+NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
+NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_VEGA_EXPLORER_URL=https://stagnet3.explorer.vega.xyz

apps/console-lite/.env.testnet

@@ -0,0 +1,8 @@
+# App configuration variables
+NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/testnet-network.json
+NX_VEGA_URL=https://api.n12.testnet.vega.xyz/graphql
+NX_VEGA_ENV=TESTNET
+NX_VEGA_NETWORKS='{\"MAINNET\":\"https://alpha.console.vega.xyz\"}'
+NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
+NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+NX_VEGA_EXPLORER_URL=https://explorer.fairground.wtf

apps/console-lite/jest.config.ts

@@ -0,0 +1,12 @@
+/* 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/console-lite',
+  setupFilesAfterEnv: ['./setup-tests.ts'],
+};

apps/console-lite/project.json

@@ -0,0 +1,90 @@
+{
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "apps/console-lite/src",
+  "projectType": "application",
+  "targets": {
+    "build": {
+      "executor": "./tools/executors/webpack:build",
+      "outputs": ["{options.outputPath}"],
+      "defaultConfiguration": "production",
+      "options": {
+        "compiler": "babel",
+        "outputPath": "dist/apps/console-lite",
+        "index": "apps/console-lite/src/index.html",
+        "baseHref": "/",
+        "main": "apps/console-lite/src/main.tsx",
+        "polyfills": "apps/console-lite/src/polyfills.ts",
+        "tsConfig": "apps/console-lite/tsconfig.app.json",
+        "assets": [
+          "apps/console-lite/src/favicon.ico",
+          "apps/console-lite/src/assets"
+        ],
+        "styles": ["apps/console-lite/src/styles.scss"],
+        "scripts": [],
+        "webpackConfig": "@nrwl/react/plugins/webpack"
+      },
+      "configurations": {
+        "production": {
+          "fileReplacements": [
+            {
+              "replace": "apps/console-lite/src/environments/environment.ts",
+              "with": "apps/console-lite/src/environments/environment.prod.ts"
+            }
+          ],
+          "optimization": true,
+          "outputHashing": "all",
+          "sourceMap": false,
+          "namedChunks": false,
+          "extractLicenses": true,
+          "vendorChunk": false
+        }
+      }
+    },
+    "serve": {
+      "executor": "./tools/executors/webpack:serve",
+      "options": {
+        "buildTarget": "console-lite:build:development",
+        "hmr": true,
+        "port": 4001
+      },
+      "configurations": {
+        "production": {
+          "buildTarget": "console-lite:build:production",
+          "hmr": false
+        }
+      }
+    },
+    "lint": {
+      "executor": "@nrwl/linter:eslint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["apps/console-lite/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "test": {
+      "executor": "@nrwl/jest:jest",
+      "outputs": ["coverage/apps/console-lite"],
+      "options": {
+        "jestConfig": "apps/console-lite/jest.config.ts",
+        "passWithNoTests": true
+      }
+    },
+    "build-netlify": {
+      "executor": "@nrwl/workspace:run-commands",
+      "options": {
+        "commands": [
+          "cp apps/console-lite/netlify.toml netlify.toml",
+          "nx build console-lite"
+        ]
+      }
+    },
+    "build-spec": {
+      "executor": "@nrwl/workspace:run-commands",
+      "outputs": [],
+      "options": {
+        "command": "yarn tsc --project ./apps/console-lite/tsconfig.spec.json"
+      }
+    }
+  },
+  "tags": []
+}

apps/console-lite/setup-tests.ts

@@ -1,8 +1,11 @@
 import '@testing-library/jest-dom';
 import 'jest-canvas-mock';
+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;
@@ -22,3 +25,19 @@ global.DOMRect = class DOMRect {
     return JSON.stringify(this);
   }
 };
+
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation((query) => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
+jest.setTimeout(30000);

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

@@ -0,0 +1,77 @@
+import { useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { EnvironmentProvider, NetworkLoader } from '@vegaprotocol/environment';
+import {
+  VegaConnectDialog,
+  VegaManageDialog,
+  VegaWalletProvider,
+} from '@vegaprotocol/wallet';
+import { Connectors } from './lib/vega-connectors';
+import '../styles.scss';
+import { AppLoader } from './components/app-loader';
+import Header from './components/header';
+import { Main } from './components/main';
+import LocalContext from './context/local-context';
+import useLocalValues from './hooks/use-local-values';
+import type { InMemoryCacheConfig } from '@apollo/client';
+
+function App() {
+  const localValues = useLocalValues();
+  const {
+    vegaWalletDialog,
+    menu: { setMenuOpen },
+  } = localValues;
+  const location = useLocation();
+
+  useEffect(() => {
+    setMenuOpen(false);
+  }, [location, setMenuOpen]);
+
+  const cacheConfig: InMemoryCacheConfig = {
+    typePolicies: {
+      Market: {
+        merge: true,
+      },
+      Party: {
+        merge: true,
+      },
+      Query: {},
+      Account: {
+        keyFields: false,
+        fields: {
+          balanceFormatted: {},
+        },
+      },
+      Node: {
+        keyFields: false,
+      },
+      Instrument: {
+        keyFields: false,
+      },
+    },
+  };
+
+  return (
+    <EnvironmentProvider>
+      <NetworkLoader cache={cacheConfig}>
+        <VegaWalletProvider>
+          <LocalContext.Provider value={localValues}>
+            <AppLoader>
+              <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} />
+                <VegaManageDialog
+                  dialogOpen={vegaWalletDialog.manage}
+                  setDialogOpen={vegaWalletDialog.setManage}
+                />
+              </div>
+            </AppLoader>
+          </LocalContext.Provider>
+        </VegaWalletProvider>
+      </NetworkLoader>
+    </EnvironmentProvider>
+  );
+}
+
+export default App;

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

@@ -0,0 +1,19 @@
+import { useEagerConnect } from '@vegaprotocol/wallet';
+import type { ReactNode } from 'react';
+import { Connectors } from '../../lib/vega-connectors';
+
+interface AppLoaderProps {
+  children: ReactNode;
+}
+
+/**
+ * Component to handle any app initialization, startup querys and other things
+ * that must happen for it can be used
+ */
+export function AppLoader({ children }: AppLoaderProps) {
+  // Get keys from vega wallet immediately
+  useEagerConnect(Connectors);
+
+  // eslint-disable-next-line react/jsx-no-useless-fragment
+  return <>{children}</>;
+}

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

@@ -0,0 +1,109 @@
+import React, { forwardRef, useCallback, useMemo, useRef } from 'react';
+import classNames from 'classnames';
+import type { AgGridReact } from 'ag-grid-react';
+import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
+import {
+  useScreenDimensions,
+  useThemeSwitcher,
+} from '@vegaprotocol/react-helpers';
+import type {
+  GridOptions,
+  GetRowIdParams,
+  TabToNextCellParams,
+  CellKeyDownEvent,
+  FullWidthCellKeyDownEvent,
+  IGetRowsParams,
+  IDatasource,
+} from 'ag-grid-community';
+import { NO_DATA_MESSAGE } from '../../constants';
+import * as constants from '../simple-market-list/constants';
+
+export interface GetRowsParams<T>
+  extends Omit<IGetRowsParams, 'successCallback'> {
+  successCallback(rowsThisBlock: T[], lastRow?: number): void;
+}
+
+export interface Datasource<T> extends IDatasource {
+  getRows(params: GetRowsParams<T>): void;
+}
+interface Props<T> extends GridOptions {
+  rowData?: T[];
+  datasource?: Datasource<T>;
+  handleRowClicked?: (event: { data: T }) => void;
+  components?: Record<string, unknown>;
+  classNamesParam?: string | string[];
+}
+
+const ConsoleLiteGrid = <T extends { id?: string }>(
+  { handleRowClicked, getRowId, classNamesParam, ...props }: Props<T>,
+  ref?: React.Ref<AgGridReact>
+) => {
+  const { isMobile, screenSize } = useScreenDimensions();
+  const gridRef = useRef<AgGridReact | null>(null);
+  const { theme } = useThemeSwitcher();
+  const handleOnGridReady = useCallback(() => {
+    (
+      (ref as React.RefObject<AgGridReact>) || gridRef
+    ).current?.api?.sizeColumnsToFit();
+  }, [gridRef, ref]);
+  const onTabToNextCell = useCallback((params: TabToNextCellParams) => {
+    const {
+      api,
+      previousCellPosition: { rowIndex },
+    } = params;
+    const rowCount = api.getDisplayedRowCount();
+    if (rowCount <= rowIndex + 1) {
+      return null;
+    }
+    return { ...params.previousCellPosition, rowIndex: rowIndex + 1 };
+  }, []);
+  const getRowIdLocal = useCallback(({ data }: GetRowIdParams) => data.id, []);
+  const onCellKeyDown = useCallback(
+    (
+      params: (CellKeyDownEvent | FullWidthCellKeyDownEvent) & {
+        event: KeyboardEvent;
+      }
+    ) => {
+      const { event: { key = '' } = {}, data } = params;
+      if (key === 'Enter') {
+        handleRowClicked?.({ data });
+      }
+    },
+    [handleRowClicked]
+  );
+  const shouldSuppressHorizontalScroll = useMemo(() => {
+    return !isMobile && constants.LARGE_SCREENS.includes(screenSize);
+  }, [isMobile, screenSize]);
+
+  return (
+    <AgGrid
+      className={classNames(classNamesParam)}
+      rowHeight={60}
+      customThemeParams={
+        theme === 'dark'
+          ? constants.agGridDarkVariables
+          : constants.agGridLightVariables
+      }
+      onGridReady={handleOnGridReady}
+      onRowClicked={handleRowClicked}
+      rowClass={isMobile ? 'mobile' : ''}
+      rowClassRules={constants.ROW_CLASS_RULES}
+      ref={ref || gridRef}
+      overlayNoRowsTemplate={NO_DATA_MESSAGE}
+      suppressContextMenu
+      getRowId={getRowId || getRowIdLocal}
+      suppressMovableColumns
+      suppressRowTransform
+      onCellKeyDown={onCellKeyDown}
+      tabToNextCell={onTabToNextCell}
+      suppressHorizontalScroll={shouldSuppressHorizontalScroll}
+      {...props}
+    />
+  );
+};
+
+const ConsoleLiteGridForwarder = forwardRef(ConsoleLiteGrid) as <T>(
+  p: Props<T> & { ref?: React.Ref<AgGridReact> }
+) => React.ReactElement;
+
+export default ConsoleLiteGridForwarder;

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

@@ -0,0 +1 @@
+export { default as ConsoleLiteGrid } from './console-lite-grid';

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/__generated__/MarketTags.ts

@@ -0,0 +1,54 @@
+import * 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/baubles-decor.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import Video from '../header/video';
+import Comet from '../header/comet';
+import Star from '../icons/star';
+
+const Baubles = () => {
+  return (
+    <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 />
+        </div>
+        <div className="absolute bottom-[100px] left-[59px] w-[200px] h-[200px] clip-path-rounded">
+          <Video />
+        </div>
+        <div className="absolute w-[118px] h-[85px] right-0 bottom-[178px]">
+          <Comet />
+        </div>
+        <div className="absolute w-[118px] h-[82px] left-0 bottom-[120px]">
+          <Comet />
+        </div>
+        <div className="absolute w-[20px] h-[20px] top-0 left-[49px]">
+          <Star />
+        </div>
+        <div className="absolute w-[20px] h-[20px] top-[89px] left-[184px]">
+          <Star />
+        </div>
+        <div className="absolute w-[10px] h-[10px] bottom-0 right-[137px]">
+          <Star />
+        </div>
+      </div>
+    </aside>
+  );
+};
+
+export default Baubles;

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import type { MarketDealTicketAsset } from '@vegaprotocol/market-list';
+import { DealTicketBalance } from './deal-ticket-balance';
+
+jest.mock('@vegaprotocol/wallet', () => ({
+  ...jest.requireActual('@vegaprotocol/wallet'),
+  useVegaWallet: jest.fn().mockReturnValue('wallet-pub-key'),
+}));
+
+const tDAI: MarketDealTicketAsset = {
+  __typename: 'Asset',
+  id: '1',
+  symbol: 'tDAI',
+  name: 'TDAI',
+  decimals: 2,
+};
+
+let mockAccountBalance: {
+  accountBalance: string;
+  accountDecimals: number | null;
+} = { accountBalance: '1000000', accountDecimals: 2 };
+jest.mock('@vegaprotocol/accounts', () => ({
+  ...jest.requireActual('@vegaprotocol/accounts'),
+  useAccountBalance: jest.fn(() => mockAccountBalance),
+}));
+
+describe('DealTicketBalance', function () {
+  it('should render the balance', () => {
+    const { getByText, getByRole } = render(
+      <DealTicketBalance settlementAsset={tDAI} isWalletConnected />,
+      { wrapper: MockedProvider }
+    );
+
+    expect(getByRole('complementary')).toHaveAccessibleName('tDAI Balance');
+    expect(getByText('10,000.00')).toBeInTheDocument();
+    expect(getByText('tDAI')).toBeInTheDocument();
+  });
+
+  it('should prompt to connect wallet', () => {
+    const { getByText } = render(
+      <DealTicketBalance settlementAsset={tDAI} isWalletConnected={false} />,
+      { wrapper: MockedProvider }
+    );
+
+    expect(
+      getByText('Please connect your Vega wallet to see your balance')
+    ).toBeInTheDocument();
+  });
+
+  it('should display zero balance', () => {
+    mockAccountBalance = { accountBalance: '', accountDecimals: null };
+    const { getByText } = render(
+      <DealTicketBalance settlementAsset={tDAI} isWalletConnected={true} />,
+      { wrapper: MockedProvider }
+    );
+
+    expect(getByText('No tDAI left to trade')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,58 @@
+import classNames from 'classnames';
+import {
+  addDecimalsFormatNumber,
+  t,
+  toBigNum,
+} from '@vegaprotocol/react-helpers';
+import type { MarketDealTicket } from '@vegaprotocol/market-list';
+import { useAccountBalance } from '@vegaprotocol/accounts';
+
+interface DealTicketBalanceProps {
+  settlementAsset: MarketDealTicket['tradableInstrument']['instrument']['product']['settlementAsset'];
+  isWalletConnected: boolean;
+  className?: string;
+}
+
+export const DealTicketBalance = ({
+  settlementAsset,
+  isWalletConnected,
+  className = '',
+}: DealTicketBalanceProps) => {
+  const settlementAssetId = settlementAsset?.id;
+  const settlementAssetSymbol = settlementAsset?.symbol;
+
+  const { accountBalance, accountDecimals } =
+    useAccountBalance(settlementAssetId) || {};
+  const settlementBalance = toBigNum(accountBalance || 0, accountDecimals || 0);
+
+  const formattedNumber =
+    accountBalance &&
+    accountDecimals &&
+    addDecimalsFormatNumber(accountBalance, accountDecimals);
+
+  const balance = (
+    <p className="text-blue text-lg font-semibold">
+      {!settlementBalance.isZero()
+        ? t(`${formattedNumber}`)
+        : `No ${settlementAssetSymbol} left to trade`}
+    </p>
+  );
+
+  const connectWallet = (
+    <p>{t('Please connect your Vega wallet to see your balance')}</p>
+  );
+
+  const ariaLabel = t(`${settlementAssetSymbol} Balance`);
+
+  return (
+    <aside
+      aria-label={ariaLabel}
+      className={classNames('text-right', className)}
+    >
+      <div className="inline-block">
+        <span className="text-blue">{settlementAssetSymbol}</span>
+        {isWalletConnected ? balance : connectWallet}
+      </div>
+    </aside>
+  );
+};

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

@@ -0,0 +1,74 @@
+import { useParams } from 'react-router-dom';
+import { Loader, Splash } from '@vegaprotocol/ui-toolkit';
+import { t, useDataProvider } 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 ConnectWallet from '../wallet-connector';
+import { useMemo } from 'react';
+import type {
+  MarketDataUpdateFieldsFragment,
+  MarketDealTicket,
+} from '@vegaprotocol/market-list';
+import { marketDealTicketProvider } from '@vegaprotocol/market-list';
+
+const tempEmptyText = (
+  <p>{t('Please select a market from the markets page')}</p>
+);
+
+export const DealTicketContainer = () => {
+  const { marketId } = useParams<{ marketId: string }>();
+  const { pubKey } = useVegaWallet();
+
+  const variables = useMemo(
+    () => ({
+      marketId: marketId || '',
+    }),
+    [marketId]
+  );
+  const { data, loading } = useDataProvider<
+    MarketDealTicket,
+    MarketDataUpdateFieldsFragment
+  >({
+    dataProvider: marketDealTicketProvider,
+    variables,
+    skip: !marketId,
+  });
+
+  const loader = <Loader />;
+  if (marketId && data) {
+    const balance = (
+      <DealTicketBalance
+        className="mb-4"
+        settlementAsset={
+          data.tradableInstrument.instrument.product?.settlementAsset
+        }
+        isWalletConnected={!!pubKey}
+      />
+    );
+
+    const container = (
+      <>
+        {loading ? loader : balance}
+        <DealTicketSteps market={data} />
+      </>
+    );
+
+    return (
+      <section className="flex p-4 md:p-6">
+        <section className="w-full md:w-1/2 md:min-w-[500px]">
+          {pubKey ? container : <ConnectWallet />}
+        </section>
+        <Baubles />
+      </section>
+    );
+  }
+  return marketId ? (
+    <Splash>
+      <p>{t('Could not load market')}</p>
+    </Splash>
+  ) : (
+    tempEmptyText
+  );
+};

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,54 @@
+import { DealTicketEstimates } from '@vegaprotocol/deal-ticket';
+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,112 @@
+import React, { useCallback, useState } from 'react';
+import { t } from '@vegaprotocol/react-helpers';
+import {
+  Dialog,
+  Icon,
+  Intent,
+  Tooltip,
+  TrafficLight,
+} from '@vegaprotocol/ui-toolkit';
+import { InputSetter } from '../../components/input-setter';
+import { IconNames } from '@blueprintjs/icons';
+import {
+  DataTitle,
+  ValueTooltipRow,
+  EST_SLIPPAGE,
+} from '@vegaprotocol/deal-ticket';
+
+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={EST_SLIPPAGE}>
+        <div className="cursor-help" tabIndex={-1}>
+          <Icon
+            name={IconNames.ISSUE}
+            className="block rotate-180"
+            ariaLabel={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={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,343 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useForm, Controller } from 'react-hook-form';
+import { Stepper } from '../stepper';
+import {
+  getDefaultOrder,
+  useOrderCloseOut,
+  useOrderMargin,
+  useMaximumPositionSize,
+  useCalculateSlippage,
+} from '@vegaprotocol/deal-ticket';
+import { InputError } from '@vegaprotocol/ui-toolkit';
+import { BigNumber } from 'bignumber.js';
+import { MarketSelector } from '@vegaprotocol/deal-ticket';
+import type { OrderSubmissionBody } from '@vegaprotocol/wallet';
+import { useVegaWallet } from '@vegaprotocol/wallet';
+import { VegaTxStatus } from '@vegaprotocol/wallet';
+import {
+  t,
+  toDecimal,
+  removeDecimal,
+  addDecimalsFormatNumber,
+  addDecimal,
+  formatNumber,
+  validateAmount,
+} from '@vegaprotocol/react-helpers';
+import {
+  useOrderSubmit,
+  getOrderDialogTitle,
+  getOrderDialogIntent,
+  getOrderDialogIcon,
+  OrderFeedback,
+} 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 * as Schema from '@vegaprotocol/types';
+import { DealTicketSlippage } from './deal-ticket-slippage';
+import { useOrderValidation } from './use-order-validation';
+import type { MarketDealTicket } from '@vegaprotocol/market-list';
+
+interface DealTicketMarketProps {
+  market: MarketDealTicket;
+}
+
+export const DealTicketSteps = ({ market }: DealTicketMarketProps) => {
+  const navigate = useNavigate();
+  const setMarket = useCallback(
+    (marketId: string) => {
+      navigate(`/trading/${marketId}`);
+    },
+    [navigate]
+  );
+
+  const {
+    control,
+    handleSubmit,
+    watch,
+    setValue,
+    formState: { errors },
+  } = useForm<OrderSubmissionBody['orderSubmission']>({
+    mode: 'onChange',
+    defaultValues: getDefaultOrder(market),
+  });
+
+  const emptyString = ' - ';
+  const step = toDecimal(market.positionDecimalPlaces);
+  const order = watch();
+  const { pubKey } = useVegaWallet();
+  const { message: invalidText, isDisabled } = useOrderValidation({
+    market,
+    order,
+    fieldErrors: errors,
+  });
+  const { submit, transaction, finalizedOrder, Dialog } = useOrderSubmit();
+
+  const maxTrade = useMaximumPositionSize({
+    marketId: market.id,
+    settlementAssetId:
+      market.tradableInstrument.instrument.product.settlementAsset.id,
+    price: market?.depth?.lastTrade?.price,
+    order,
+  });
+
+  const closeOut = useOrderCloseOut({
+    order,
+    market,
+  });
+  const estCloseOut = closeOut && formatNumber(closeOut, market.decimalPlaces);
+  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 === Schema.Side.SIDE_BUY;
+      const multiplier = new BigNumber(1)[isLong ? 'plus' : 'minus'](
+        parseFloat(slippage) / 100
+      );
+      return new BigNumber(market?.depth?.lastTrade?.price)
+        .multipliedBy(multiplier)
+        .toString();
+    }
+    return undefined;
+  }, [market?.depth?.lastTrade?.price, order.side, slippage]);
+
+  const estMargin = useOrderMargin({
+    order,
+    market,
+    partyId: pubKey || '',
+    derivedPrice: price,
+  });
+
+  const formattedPrice =
+    price && addDecimalsFormatNumber(price, market.decimalPlaces);
+
+  const notionalSize = useMemo(() => {
+    if (price) {
+      const size = new BigNumber(price).multipliedBy(order.size).toNumber();
+
+      return addDecimalsFormatNumber(size, market.decimalPlaces);
+    }
+    return null;
+  }, [market.decimalPlaces, order.size, price]);
+
+  const assetDecimals =
+    market.tradableInstrument.instrument.product.settlementAsset.decimals;
+
+  const fees = useMemo(() => {
+    if (estMargin?.totalFees && notionalSize) {
+      const percentage = new BigNumber(estMargin?.totalFees)
+        .dividedBy(notionalSize)
+        .multipliedBy(100)
+        .decimalPlaces(2)
+        .toString();
+
+      return `${addDecimalsFormatNumber(
+        estMargin.totalFees,
+        assetDecimals
+      )} (${formatNumber(addDecimal(percentage, assetDecimals), 2)}%)`;
+    }
+
+    return null;
+  }, [assetDecimals, estMargin?.totalFees, notionalSize]);
+
+  const max = useMemo(() => {
+    return new BigNumber(maxTrade)
+      .decimalPlaces(market.positionDecimalPlaces)
+      .toNumber();
+  }, [market.positionDecimalPlaces, maxTrade]);
+
+  useEffect(() => {
+    setSlippageValue(slippage ? parseFloat(slippage) : 0);
+  }, [slippage]);
+
+  const onSizeChange = useCallback(
+    (value: number) => {
+      const newVal = new BigNumber(value)
+        .decimalPlaces(market.positionDecimalPlaces)
+        .toString();
+      const isValid = validateAmount(step, 'Size')(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 === Schema.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 (order.type === Schema.OrderType.TYPE_MARKET) {
+            setValue('type', Schema.OrderType.TYPE_LIMIT);
+          }
+        } else {
+          setValue('type', Schema.OrderType.TYPE_MARKET);
+          setValue('price', market?.depth?.lastTrade?.price);
+        }
+      }
+      setSlippageValue(value);
+    },
+    [
+      market.decimalPlaces,
+      market?.depth?.lastTrade?.price,
+      order.side,
+      order.type,
+      setSlippageValue,
+      setValue,
+    ]
+  );
+
+  const onSubmit = useCallback(
+    (order: OrderSubmissionBody['orderSubmission']) => {
+      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[order.side] || '',
+    },
+    {
+      label: t('Choose Position Size'),
+      component:
+        max !== null ? (
+          <>
+            <DealTicketSize
+              step={step}
+              min={step}
+              max={max}
+              onSizeChange={onSizeChange}
+              size={new BigNumber(order.size).toNumber()}
+              name="size"
+              price={formattedPrice || emptyString}
+              positionDecimalPlaces={market.positionDecimalPlaces}
+              quoteName={
+                market.tradableInstrument.instrument.product.settlementAsset
+                  .symbol
+              }
+              notionalSize={notionalSize || emptyString}
+              estCloseOut={estCloseOut || emptyString}
+              fees={fees || emptyString}
+              estMargin={estMargin?.margin || emptyString}
+            />
+            <DealTicketSlippage
+              value={slippageValue}
+              onValueChange={onSlippageChange}
+            />
+          </>
+        ) : (
+          t('Loading...')
+        ),
+      value: order.size,
+    },
+    {
+      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 || emptyString}
+            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)}
+            content={{
+              Complete: (
+                <OrderFeedback
+                  transaction={transaction}
+                  order={finalizedOrder}
+                />
+              ),
+            }}
+          />
+        </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/index.ts

@@ -0,0 +1,2 @@
+export * from './deal-ticket-container';
+export * from './deal-ticket-size';

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

@@ -0,0 +1,105 @@
+import { t } from '@vegaprotocol/react-helpers';
+import {
+  Button,
+  KeyValueTable,
+  KeyValueTableRow,
+} from '@vegaprotocol/ui-toolkit';
+import classNames from 'classnames';
+import { DealTicketEstimates } from '@vegaprotocol/deal-ticket';
+import type { OrderSubmissionBody } from '@vegaprotocol/wallet';
+import { SIDE_NAMES } from './side-selector';
+import * as Schema from '@vegaprotocol/types';
+import { MarketExpires } from '@vegaprotocol/market-info';
+import type { MarketDealTicket } from '@vegaprotocol/market-list';
+import { useMarketTagsQuery } from './__generated__/MarketTags';
+
+interface Props {
+  market: MarketDealTicket;
+  isDisabled: boolean;
+  transactionStatus?: string;
+  order: OrderSubmissionBody['orderSubmission'];
+  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 } = useMarketTagsQuery({
+    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 === Schema.Side.SIDE_BUY,
+                  'sellButton dark:sellButtonDark':
+                    order.side === Schema.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 && (
+                <MarketExpires
+                  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

@@ -0,0 +1,60 @@
+import React from 'react';
+import classNames from 'classnames';
+import { FormGroup } from '@vegaprotocol/ui-toolkit';
+import { t } from '@vegaprotocol/react-helpers';
+import * as Schema from '@vegaprotocol/types';
+
+interface SideSelectorProps {
+  value: Schema.Side;
+  onSelect: (side: Schema.Side) => void;
+}
+
+export const SIDE_NAMES: Record<Schema.Side, string> = {
+  [Schema.Side.SIDE_BUY]: t('Long'),
+  [Schema.Side.SIDE_SELL]: t('Short'),
+};
+
+export default ({ value, onSelect }: SideSelectorProps) => {
+  return (
+    <FormGroup
+      label={t('Direction')}
+      labelFor="order-side-toggle"
+      hideLabel={true}
+    >
+      <fieldset
+        className="w-full grid md:grid-cols-2 gap-4"
+        id="order-side-toggle"
+      >
+        <button
+          aria-label={t('Open long position')}
+          type="button"
+          className={classNames(
+            'px-8 py-2',
+            'buyButton hover:buyButton dark:buyButtonDark dark:hover:buyButtonDark',
+            { selected: value === Schema.Side.SIDE_BUY }
+          )}
+          onClick={() => onSelect(Schema.Side.SIDE_BUY)}
+        >
+          {t('Long')}
+        </button>
+        <button
+          aria-label={t('Open short position')}
+          type="button"
+          className={classNames(
+            'px-8 py-2',
+            'sellButton hover:sellButton dark:sellButtonDark dark:hover:sellButtonDark',
+            { selected: value === Schema.Side.SIDE_SELL }
+          )}
+          onClick={() => onSelect(Schema.Side.SIDE_SELL)}
+        >
+          {t('Short')}
+        </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.'
+          )}
+        </div>
+      </fieldset>
+    </FormGroup>
+  );
+};

apps/console-lite/src/app/components/deal-ticket/use-order-validation.spec.tsx

@@ -0,0 +1,415 @@
+import * as React from 'react';
+import { renderHook } from '@testing-library/react';
+import { useVegaWallet } from '@vegaprotocol/wallet';
+import { MockedProvider } from '@apollo/client/testing';
+import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
+import * as Schema from '@vegaprotocol/types';
+import type { ValidationProps } from './use-order-validation';
+import { marketTranslations, useOrderValidation } from './use-order-validation';
+import type { MarketDealTicket } from '@vegaprotocol/market-list';
+import * as DealTicket from '@vegaprotocol/deal-ticket';
+
+jest.mock('@vegaprotocol/wallet');
+jest.mock('@vegaprotocol/deal-ticket', () => {
+  return {
+    ...jest.requireActual('@vegaprotocol/deal-ticket'),
+    useOrderMarginValidation: jest.fn(),
+  };
+});
+
+type SettlementAsset =
+  MarketDealTicket['tradableInstrument']['instrument']['product']['settlementAsset'];
+const asset: SettlementAsset = {
+  __typename: 'Asset',
+  id: 'asset-id',
+  symbol: 'asset-symbol',
+  name: 'asset-name',
+  decimals: 2,
+};
+
+const market: MarketDealTicket = {
+  id: 'market-id',
+  decimalPlaces: 2,
+  positionDecimalPlaces: 1,
+  tradingMode: Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS,
+  state: Schema.MarketState.STATE_ACTIVE,
+  tradableInstrument: {
+    __typename: 'TradableInstrument',
+    instrument: {
+      __typename: 'Instrument',
+      id: 'instrument-id',
+      name: 'instrument-name',
+      code: 'instriment-code',
+      metadata: {
+        tags: [],
+      },
+      product: {
+        __typename: 'Future',
+        quoteName: 'quote-name',
+        settlementAsset: asset,
+        dataSourceSpecForTradingTermination: {
+          id: 'dataSource-id',
+        },
+      },
+    },
+  },
+  depth: {
+    __typename: 'MarketDepth',
+    lastTrade: {
+      __typename: 'Trade',
+      price: '100',
+    },
+  },
+  fees: {
+    __typename: 'Fees',
+    factors: {
+      __typename: 'FeeFactors',
+      makerFee: '1',
+      infrastructureFee: '2',
+      liquidityFee: '3',
+    },
+  },
+  data: {
+    __typename: 'MarketData',
+    bestBidPrice: '1605489971',
+    bestOfferPrice: '1606823730',
+    markPrice: '1606823730',
+    trigger: Schema.AuctionTrigger.AUCTION_TRIGGER_UNSPECIFIED,
+    staticMidPrice: '1606156850',
+    marketTradingMode: Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS,
+    marketState: Schema.MarketState.STATE_ACTIVE,
+    indicativeVolume: '0',
+    indicativePrice: '0',
+    bestStaticBidPrice: '1605489971',
+    bestStaticOfferPrice: '1606823730',
+    targetStake: '8561302732',
+    suppliedStake: '727654170336',
+    auctionStart: null,
+    auctionEnd: null,
+    market: { __typename: 'Market', id: 'market-id' },
+  },
+  marketTimestamps: {
+    __typename: 'MarketTimestamps',
+    close: null,
+    open: null,
+  },
+};
+
+const defaultWalletContext = {
+  pubKey: '111111__111111',
+  pubKeys: [],
+  sendTx: jest.fn().mockReturnValue(Promise.resolve(null)),
+  connect: jest.fn(),
+  disconnect: jest.fn(),
+  selectPubKey: jest.fn(),
+  connector: null,
+};
+
+const order = {
+  type: Schema.OrderType.TYPE_MARKET,
+  timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_FOK,
+  marketId: 'market-id',
+  side: Schema.Side.SIDE_BUY,
+  size: '0.1',
+};
+
+const defaultOrder = {
+  market: { ...market },
+  step: 0.1,
+  order: {
+    ...order,
+  },
+};
+
+const ERROR = {
+  KEY_MISSING: 'No public key selected',
+  KEY_TAINTED: 'Selected public key has been tainted',
+  MARKET_SUSPENDED: 'Market is currently suspended',
+  MARKET_INACTIVE: 'Market is no longer active',
+  MARKET_WAITING: 'Market is not active yet',
+  MARKET_CONTINUOUS_LIMIT:
+    'Only limit orders are permitted when market is in auction',
+  MARKET_CONTINUOUS_TIF:
+    'Until the auction ends, you can only place GFA, GTT, or GTC limit orders',
+  FIELD_SIZE_REQ: 'You need to provide a size',
+  FIELD_SIZE_MIN: `Size cannot be lower than "${defaultOrder.step}"`,
+  FIELD_PRICE_REQ: 'You need to provide a price',
+  FIELD_PRICE_MIN: 'The price cannot be negative',
+  FIELD_PRICE_STEP_NULL: 'Order sizes must be in whole numbers for this market',
+  FIELD_PRICE_STEP_DECIMAL: `The size field accepts up to ${market.positionDecimalPlaces} decimal places`,
+};
+
+function setup(
+  props?: Partial<ValidationProps>,
+  context?: Partial<VegaWalletContextShape>
+) {
+  const mockUseVegaWallet = useVegaWallet as jest.Mock;
+  mockUseVegaWallet.mockReturnValue({ ...defaultWalletContext, context });
+  return renderHook(() => useOrderValidation({ ...defaultOrder, ...props }), {
+    wrapper: MockedProvider,
+  });
+}
+
+describe('useOrderValidation', () => {
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('Returns empty string when given valid data', () => {
+    jest.spyOn(DealTicket, 'useOrderMarginValidation').mockReturnValue({
+      balance: '0',
+      margin: '100',
+      balanceError: false,
+    });
+
+    const { result } = setup();
+    expect(result.current).toStrictEqual({
+      isDisabled: false,
+      message: ``,
+      section: '',
+    });
+  });
+
+  it('Returns an error message when no keypair found', () => {
+    jest.spyOn(DealTicket, 'useOrderMarginValidation').mockReturnValue({
+      balance: '0',
+      margin: '100',
+      balanceError: false,
+    });
+    const { result } = setup(defaultOrder, { pubKey: null });
+    expect(result.current).toStrictEqual({
+      isDisabled: false,
+      message: ``,
+      section: '',
+    });
+  });
+
+  it.each`
+    state
+    ${Schema.MarketState.STATE_SETTLED}
+    ${Schema.MarketState.STATE_REJECTED}
+    ${Schema.MarketState.STATE_TRADING_TERMINATED}
+    ${Schema.MarketState.STATE_CLOSED}
+    ${Schema.MarketState.STATE_CANCELLED}
+  `(
+    'Returns an error message for market state when not accepting orders',
+    ({ state }) => {
+      const market = {
+        ...defaultOrder.market,
+        data: { ...defaultOrder.market.data, marketState: state },
+      };
+      const { result } = setup({ market });
+      expect(result.current).toStrictEqual({
+        isDisabled: true,
+        message: `This market is ${marketTranslations(
+          state
+        )} and not accepting orders`,
+        section: 'sec-summary',
+      });
+    }
+  );
+
+  it.each`
+    state
+    ${Schema.MarketState.STATE_PENDING}
+    ${Schema.MarketState.STATE_PROPOSED}
+  `(
+    'Returns an error message for market state suspended or pending',
+    ({ state }) => {
+      jest.spyOn(DealTicket, 'useOrderMarginValidation').mockReturnValue({
+        balance: '0',
+        margin: '100',
+        balanceError: false,
+      });
+
+      const market = {
+        ...defaultOrder.market,
+        data: {
+          ...defaultOrder.market.data,
+          marketState: state,
+          marketTradingMode:
+            Schema.MarketTradingMode.TRADING_MODE_BATCH_AUCTION,
+        },
+      };
+      const { result } = setup({
+        market,
+        order: {
+          ...order,
+          type: Schema.OrderType.TYPE_LIMIT,
+          timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTT,
+        },
+      });
+      expect(result.current).toStrictEqual({
+        isDisabled: false,
+        message: `This market is ${Schema.MarketStateMapping[
+          state as Schema.MarketState
+        ].toLowerCase()} and only accepting liquidity commitment orders`,
+        section: 'sec-summary',
+      });
+    }
+  );
+
+  it.each`
+    tradingMode                                                 | errorMessage
+    ${Schema.MarketTradingMode.TRADING_MODE_BATCH_AUCTION}      | ${ERROR.MARKET_CONTINUOUS_LIMIT}
+    ${Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION} | ${ERROR.MARKET_CONTINUOUS_LIMIT}
+    ${Schema.MarketTradingMode.TRADING_MODE_OPENING_AUCTION}    | ${ERROR.MARKET_CONTINUOUS_LIMIT}
+  `(
+    `Returns an error message when trying to submit a non-limit order for a "$tradingMode" market`,
+    ({ tradingMode, errorMessage }) => {
+      const market = {
+        ...defaultOrder.market,
+        data: { ...defaultOrder.market.data, marketTradingMode: tradingMode },
+      };
+      const { result } = setup({
+        market,
+        order: {
+          ...order,
+          type: Schema.OrderType.TYPE_MARKET,
+        },
+      });
+      expect(result.current.isDisabled).toBeTruthy();
+      expect(result.current.message).toBe(errorMessage);
+    }
+  );
+
+  it.each`
+    tradingMode                                                 | orderTimeInForce                             | errorMessage
+    ${Schema.MarketTradingMode.TRADING_MODE_BATCH_AUCTION}      | ${Schema.OrderTimeInForce.TIME_IN_FORCE_FOK} | ${ERROR.MARKET_CONTINUOUS_TIF}
+    ${Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION} | ${Schema.OrderTimeInForce.TIME_IN_FORCE_FOK} | ${ERROR.MARKET_CONTINUOUS_TIF}
+    ${Schema.MarketTradingMode.TRADING_MODE_OPENING_AUCTION}    | ${Schema.OrderTimeInForce.TIME_IN_FORCE_FOK} | ${ERROR.MARKET_CONTINUOUS_TIF}
+    ${Schema.MarketTradingMode.TRADING_MODE_BATCH_AUCTION}      | ${Schema.OrderTimeInForce.TIME_IN_FORCE_IOC} | ${ERROR.MARKET_CONTINUOUS_TIF}
+    ${Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION} | ${Schema.OrderTimeInForce.TIME_IN_FORCE_IOC} | ${ERROR.MARKET_CONTINUOUS_TIF}
+    ${Schema.MarketTradingMode.TRADING_MODE_OPENING_AUCTION}    | ${Schema.OrderTimeInForce.TIME_IN_FORCE_IOC} | ${ERROR.MARKET_CONTINUOUS_TIF}
+    ${Schema.MarketTradingMode.TRADING_MODE_BATCH_AUCTION}      | ${Schema.OrderTimeInForce.TIME_IN_FORCE_GFN} | ${ERROR.MARKET_CONTINUOUS_TIF}
+    ${Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION} | ${Schema.OrderTimeInForce.TIME_IN_FORCE_GFN} | ${ERROR.MARKET_CONTINUOUS_TIF}
+    ${Schema.MarketTradingMode.TRADING_MODE_OPENING_AUCTION}    | ${Schema.OrderTimeInForce.TIME_IN_FORCE_GFN} | ${ERROR.MARKET_CONTINUOUS_TIF}
+  `(
+    `Returns an error message when submitting a limit order with a "$orderTimeInForce" value to a "$tradingMode" market`,
+    ({ tradingMode, orderTimeInForce, errorMessage }) => {
+      const market = {
+        ...defaultOrder.market,
+        data: { ...defaultOrder.market.data, marketTradingMode: tradingMode },
+      };
+      const { result } = setup({
+        market,
+        order: {
+          ...order,
+          type: Schema.OrderType.TYPE_LIMIT,
+          timeInForce: orderTimeInForce,
+        },
+      });
+      expect(result.current).toStrictEqual({
+        isDisabled: true,
+        message: errorMessage,
+        section: 'sec-force',
+      });
+    }
+  );
+
+  it.each`
+    fieldName  | errorType     | section        | errorMessage
+    ${`size`}  | ${`required`} | ${'sec-size'}  | ${ERROR.FIELD_SIZE_REQ}
+    ${`size`}  | ${`min`}      | ${'sec-size'}  | ${ERROR.FIELD_SIZE_MIN}
+    ${`price`} | ${`required`} | ${'sec-price'} | ${ERROR.FIELD_PRICE_REQ}
+    ${`price`} | ${`min`}      | ${'sec-price'} | ${ERROR.FIELD_PRICE_MIN}
+  `(
+    `Returns an error message when the order $fieldName "$errorType" validation fails`,
+    ({ fieldName, errorType, section, errorMessage }) => {
+      const { result } = setup({
+        fieldErrors: { [fieldName]: { type: errorType } },
+        order: {
+          ...order,
+          type: Schema.OrderType.TYPE_LIMIT,
+        },
+      });
+      expect(result.current).toStrictEqual({
+        isDisabled: true,
+        message: errorMessage,
+        section,
+      });
+    }
+  );
+
+  it('Returns an error message when the order size incorrectly has decimal values', () => {
+    const { result } = setup({
+      market: { ...market, positionDecimalPlaces: 0 },
+      fieldErrors: {
+        size: { type: `validate`, message: DealTicket.ERROR_SIZE_DECIMAL },
+      },
+    });
+    expect(result.current).toStrictEqual({
+      isDisabled: true,
+      message: ERROR.FIELD_PRICE_STEP_NULL,
+      section: 'sec-size',
+    });
+  });
+
+  it('Returns an error message when the order size has more decimals than allowed', () => {
+    const { result } = setup({
+      fieldErrors: {
+        size: { type: `validate`, message: DealTicket.ERROR_SIZE_DECIMAL },
+      },
+    });
+    expect(result.current).toStrictEqual({
+      isDisabled: true,
+      message: ERROR.FIELD_PRICE_STEP_DECIMAL,
+      section: 'sec-size',
+    });
+  });
+
+  it('Returns an error message when the estimated margin is higher than collateral', async () => {
+    const invalidatedMockValue = {
+      balance: '100',
+      margin: '200',
+      balanceError: true,
+    };
+
+    jest
+      .spyOn(DealTicket, 'useOrderMarginValidation')
+      .mockReturnValue(invalidatedMockValue);
+
+    const { result } = setup({});
+
+    expect(result.current.isDisabled).toBe(false);
+
+    const testElement = (
+      <DealTicket.MarginWarning
+        margin={invalidatedMockValue.margin}
+        balance={invalidatedMockValue.balance}
+        asset={asset}
+      />
+    );
+    expect((result.current.message as React.ReactElement)?.props).toEqual(
+      testElement.props
+    );
+    expect((result.current.message as React.ReactElement)?.type).toEqual(
+      testElement.type
+    );
+  });
+
+  it.each`
+    state
+    ${Schema.MarketState.STATE_PENDING}
+    ${Schema.MarketState.STATE_PROPOSED}
+  `(
+    'Returns error when market state is pending and size is wrong',
+    ({ state }) => {
+      const market = {
+        ...defaultOrder.market,
+        data: { ...defaultOrder.market.data, marketState: state },
+      };
+      const { result } = setup({
+        fieldErrors: {
+          size: { type: `validate`, message: DealTicket.ERROR_SIZE_DECIMAL },
+        },
+        market,
+      });
+      expect(result.current).toStrictEqual({
+        isDisabled: true,
+        message: ERROR.FIELD_PRICE_STEP_DECIMAL,
+        section: 'sec-size',
+      });
+    }
+  );
+});

apps/console-lite/src/app/components/deal-ticket/use-order-validation.tsx

@@ -0,0 +1,383 @@
+import type { ReactNode } from 'react';
+import type { FieldErrors } from 'react-hook-form';
+import { useMemo } from 'react';
+import { DataGrid, t, toDecimal } from '@vegaprotocol/react-helpers';
+import { useVegaWallet } from '@vegaprotocol/wallet';
+import * as Schema from '@vegaprotocol/types';
+import type { OrderSubmissionBody } from '@vegaprotocol/wallet';
+import { Tooltip } from '@vegaprotocol/ui-toolkit';
+import {
+  compileGridData,
+  MarginWarning,
+  isMarketInAuction,
+  ERROR_SIZE_DECIMAL,
+  useOrderMarginValidation,
+} from '@vegaprotocol/deal-ticket';
+import type { MarketDealTicket } from '@vegaprotocol/market-list';
+
+export const DEAL_TICKET_SECTION = {
+  TYPE: 'sec-type',
+  SIZE: 'sec-size',
+  PRICE: 'sec-price',
+  FORCE: 'sec-force',
+  EXPIRY: 'sec-expiry',
+  SUMMARY: 'sec-summary',
+};
+
+export const ERROR_EXPIRATION_IN_THE_PAST = 'ERROR_EXPIRATION_IN_THE_PAST';
+
+export type ValidationProps = {
+  step?: number;
+  market: MarketDealTicket;
+  order: OrderSubmissionBody['orderSubmission'];
+  fieldErrors?: FieldErrors<OrderSubmissionBody['orderSubmission']>;
+};
+
+export const marketTranslations = (marketState: Schema.MarketState) => {
+  switch (marketState) {
+    case Schema.MarketState.STATE_TRADING_TERMINATED:
+      return t('terminated');
+    default:
+      return t(Schema.MarketStateMapping[marketState]).toLowerCase();
+  }
+};
+
+export type DealTicketSection =
+  | ''
+  | typeof DEAL_TICKET_SECTION[keyof typeof DEAL_TICKET_SECTION];
+
+export const useOrderValidation = ({
+  market,
+  fieldErrors,
+  order,
+}: ValidationProps): {
+  message: ReactNode | string;
+  isDisabled: boolean;
+  section: DealTicketSection;
+} => {
+  const { pubKey } = useVegaWallet();
+  const minSize = toDecimal(market.positionDecimalPlaces);
+  const isInvalidOrderMargin = useOrderMarginValidation({ market, order });
+
+  const fieldErrorChecking = useMemo<{
+    message: ReactNode | string;
+    isDisabled: boolean;
+    section: DealTicketSection;
+  } | null>(() => {
+    if (fieldErrors?.size?.type || fieldErrors?.price?.type) {
+      if (fieldErrors?.size?.type === 'required') {
+        return {
+          isDisabled: true,
+          message: t('You need to provide a size'),
+          section: DEAL_TICKET_SECTION.SIZE,
+        };
+      }
+
+      if (fieldErrors?.size?.type === 'min') {
+        return {
+          isDisabled: true,
+          message: t(`Size cannot be lower than "${minSize}"`),
+          section: DEAL_TICKET_SECTION.SIZE,
+        };
+      }
+
+      if (
+        fieldErrors?.price?.type === 'required' &&
+        order.type !== Schema.OrderType.TYPE_MARKET
+      ) {
+        return {
+          isDisabled: true,
+          message: t('You need to provide a price'),
+          section: DEAL_TICKET_SECTION.PRICE,
+        };
+      }
+
+      if (
+        fieldErrors?.price?.type === 'min' &&
+        order.type !== Schema.OrderType.TYPE_MARKET
+      ) {
+        return {
+          isDisabled: true,
+          message: t(`The price cannot be negative`),
+          section: DEAL_TICKET_SECTION.PRICE,
+        };
+      }
+
+      if (
+        fieldErrors?.size?.type === 'validate' &&
+        fieldErrors?.size?.message === ERROR_SIZE_DECIMAL
+      ) {
+        if (market.positionDecimalPlaces === 0) {
+          return {
+            isDisabled: true,
+            message: t('Order sizes must be in whole numbers for this market'),
+            section: DEAL_TICKET_SECTION.SIZE,
+          };
+        }
+        return {
+          isDisabled: true,
+          message: t(
+            `The size field accepts up to ${market.positionDecimalPlaces} decimal places`
+          ),
+          section: DEAL_TICKET_SECTION.SIZE,
+        };
+      }
+    }
+
+    if (
+      fieldErrors?.expiresAt?.type === 'validate' &&
+      fieldErrors?.expiresAt.message === ERROR_EXPIRATION_IN_THE_PAST
+    ) {
+      return {
+        isDisabled: false,
+        message: t(
+          'The expiry date that you have entered appears to be in the past'
+        ),
+        section: DEAL_TICKET_SECTION.EXPIRY,
+      };
+    }
+    return null;
+  }, [
+    fieldErrors?.size?.type,
+    fieldErrors?.size?.message,
+    fieldErrors?.price?.type,
+    fieldErrors?.expiresAt?.type,
+    fieldErrors?.expiresAt?.message,
+    order.type,
+    minSize,
+    market.positionDecimalPlaces,
+  ]);
+
+  const { message, isDisabled, section } = useMemo<{
+    message: ReactNode | string;
+    isDisabled: boolean;
+    section: DealTicketSection;
+  }>(() => {
+    if (!pubKey) {
+      return {
+        message: t('No public key selected'),
+        isDisabled: true,
+        section: DEAL_TICKET_SECTION.SUMMARY,
+      };
+    }
+
+    if (
+      [
+        Schema.MarketState.STATE_SETTLED,
+        Schema.MarketState.STATE_REJECTED,
+        Schema.MarketState.STATE_TRADING_TERMINATED,
+        Schema.MarketState.STATE_CANCELLED,
+        Schema.MarketState.STATE_CLOSED,
+      ].includes(market.data.marketState)
+    ) {
+      return {
+        isDisabled: true,
+        message: t(
+          `This market is ${marketTranslations(
+            market.data.marketState
+          )} and not accepting orders`
+        ),
+        section: DEAL_TICKET_SECTION.SUMMARY,
+      };
+    }
+
+    if (
+      [
+        Schema.MarketState.STATE_PROPOSED,
+        Schema.MarketState.STATE_PENDING,
+      ].includes(market.data.marketState)
+    ) {
+      if (fieldErrorChecking) {
+        return fieldErrorChecking;
+      }
+      return {
+        isDisabled: false,
+        message: t(
+          `This market is ${marketTranslations(
+            market.data.marketState
+          )} and only accepting liquidity commitment orders`
+        ),
+        section: DEAL_TICKET_SECTION.SUMMARY,
+      };
+    }
+
+    if (isMarketInAuction(market)) {
+      if (order.type === Schema.OrderType.TYPE_MARKET) {
+        if (
+          market.data.marketTradingMode ===
+            Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
+          market.data.trigger ===
+            Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY
+        ) {
+          return {
+            isDisabled: true,
+            message: (
+              <span>
+                {t('This market is in auction until it reaches')}{' '}
+                <Tooltip
+                  description={
+                    <DataGrid grid={compileGridData(market, market.data)} />
+                  }
+                >
+                  <span>{t('sufficient liquidity')}</span>
+                </Tooltip>
+                {'. '}
+                {t('Only limit orders are permitted when market is in auction')}
+              </span>
+            ),
+            section: DEAL_TICKET_SECTION.TYPE,
+          };
+        }
+        if (
+          market.data.marketTradingMode ===
+            Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
+          market.data.trigger === Schema.AuctionTrigger.AUCTION_TRIGGER_PRICE
+        ) {
+          return {
+            isDisabled: true,
+            message: (
+              <span>
+                {t('This market is in auction due to')}{' '}
+                <Tooltip
+                  description={
+                    <DataGrid grid={compileGridData(market, market.data)} />
+                  }
+                >
+                  <span>{t('high price volatility')}</span>
+                </Tooltip>
+                {'. '}
+                {t('Only limit orders are permitted when market is in auction')}
+              </span>
+            ),
+            section: DEAL_TICKET_SECTION.TYPE,
+          };
+        }
+        return {
+          isDisabled: true,
+          message: t(
+            'Only limit orders are permitted when market is in auction'
+          ),
+          section: DEAL_TICKET_SECTION.SUMMARY,
+        };
+      }
+      if (
+        order.type === Schema.OrderType.TYPE_LIMIT &&
+        [
+          Schema.OrderTimeInForce.TIME_IN_FORCE_FOK,
+          Schema.OrderTimeInForce.TIME_IN_FORCE_IOC,
+          Schema.OrderTimeInForce.TIME_IN_FORCE_GFN,
+        ].includes(order.timeInForce)
+      ) {
+        if (
+          market.data.marketTradingMode ===
+            Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
+          market.data.trigger ===
+            Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY
+        ) {
+          return {
+            isDisabled: true,
+            message: (
+              <span>
+                {t('This market is in auction until it reaches')}{' '}
+                <Tooltip
+                  description={
+                    <DataGrid grid={compileGridData(market, market.data)} />
+                  }
+                >
+                  <span>{t('sufficient liquidity')}</span>
+                </Tooltip>
+                {'. '}
+                {t(
+                  `Until the auction ends, you can only place GFA, GTT, or GTC limit orders`
+                )}
+              </span>
+            ),
+            section: DEAL_TICKET_SECTION.FORCE,
+          };
+        }
+        if (
+          market.data.marketTradingMode ===
+            Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
+          market.data.trigger === Schema.AuctionTrigger.AUCTION_TRIGGER_PRICE
+        ) {
+          return {
+            isDisabled: true,
+            message: (
+              <span>
+                {t('This market is in auction due to')}{' '}
+                <Tooltip
+                  description={
+                    <DataGrid grid={compileGridData(market, market.data)} />
+                  }
+                >
+                  <span>{t('high price volatility')}</span>
+                </Tooltip>
+                {'. '}
+                {t(
+                  `Until the auction ends, you can only place GFA, GTT, or GTC limit orders`
+                )}
+              </span>
+            ),
+            section: DEAL_TICKET_SECTION.FORCE,
+          };
+        }
+        return {
+          isDisabled: true,
+          message: t(
+            `Until the auction ends, you can only place GFA, GTT, or GTC limit orders`
+          ),
+          section: DEAL_TICKET_SECTION.FORCE,
+        };
+      }
+    }
+
+    if (fieldErrorChecking) {
+      return fieldErrorChecking;
+    }
+
+    if (isInvalidOrderMargin.balanceError) {
+      return {
+        isDisabled: false,
+        message: (
+          <MarginWarning
+            margin={isInvalidOrderMargin.margin}
+            balance={isInvalidOrderMargin.balance}
+            asset={market.tradableInstrument.instrument.product.settlementAsset}
+          />
+        ),
+        section: DEAL_TICKET_SECTION.PRICE,
+      };
+    }
+
+    if (
+      [
+        Schema.MarketTradingMode.TRADING_MODE_BATCH_AUCTION,
+        Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION,
+        Schema.MarketTradingMode.TRADING_MODE_OPENING_AUCTION,
+      ].includes(market.data.marketTradingMode)
+    ) {
+      return {
+        isDisabled: false,
+        message: t(
+          'Any orders placed now will not trade until the auction ends'
+        ),
+        section: DEAL_TICKET_SECTION.SUMMARY,
+      };
+    }
+
+    return {
+      isDisabled: false,
+      message: '',
+      section: '',
+    };
+  }, [
+    pubKey,
+    market,
+    fieldErrorChecking,
+    isInvalidOrderMargin,
+    order.type,
+    order.timeInForce,
+  ]);
+
+  return { message, isDisabled, section };
+};

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

@@ -0,0 +1,18 @@
+import { t } from '@vegaprotocol/react-helpers';
+import { Button } from '@vegaprotocol/ui-toolkit';
+import { DepositDialog, useDepositDialog } from '@vegaprotocol/deposits';
+
+/**
+ *  Fetches data required for the Deposit page
+ */
+export const DepositContainer = () => {
+  const openDepositDialog = useDepositDialog((state) => state.open);
+  return (
+    <div>
+      <DepositDialog />
+      <Button size="sm" onClick={() => openDepositDialog()}>
+        {t('Make deposit')}
+      </Button>
+    </div>
+  );
+};

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

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import type { ReactElement } from 'react';
+
+interface Props {
+  children: ReactElement | ReactElement[];
+  className?: string;
+}
+
+export const DrawerContent = ({ children, className = '' }: Props) => {
+  const classes = classNames(
+    'w-full sm:w-full grow-1 overflow-hidden',
+    className
+  );
+
+  return (
+    <main aria-label="Page Content" className={classes}>
+      {children}
+    </main>
+  );
+};

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

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { ButtonLink, Icon } from '@vegaprotocol/ui-toolkit';
+import { IconNames } from '@blueprintjs/icons';
+import type { IconName } from '@vegaprotocol/ui-toolkit';
+import { useEffect, useState } from 'react';
+
+export const enum DRAWER_TOGGLE_VARIANTS {
+  OPEN = 'open',
+  CLOSE = 'close',
+}
+
+interface Props {
+  onToggle: React.MouseEventHandler<HTMLButtonElement>;
+  variant: DRAWER_TOGGLE_VARIANTS.OPEN | DRAWER_TOGGLE_VARIANTS.CLOSE;
+  className?: string;
+}
+
+export const DrawerToggle = ({
+  onToggle,
+  variant = DRAWER_TOGGLE_VARIANTS.CLOSE,
+  className = '',
+}: Props) => {
+  const [iconName, setIconName] = useState(IconNames.MENU);
+  const classes = classNames('md:hidden', className);
+
+  useEffect(() => {
+    if (variant === DRAWER_TOGGLE_VARIANTS.OPEN) {
+      setIconName(IconNames.MENU);
+    } else {
+      setIconName(IconNames.CROSS);
+    }
+  }, [variant]);
+
+  const ariaLabel = `${
+    variant === DRAWER_TOGGLE_VARIANTS.OPEN ? 'Open' : 'Close'
+  } Sidebar Navigation Menu`;
+
+  return (
+    <span className={classes}>
+      <ButtonLink aria-label={ariaLabel} onClick={onToggle}>
+        <Icon name={iconName as IconName} />
+      </ButtonLink>
+    </span>
+  );
+};

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

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import type { ReactElement } from 'react';
+
+interface Props {
+  children: ReactElement | ReactElement[];
+  className?: string;
+}
+
+export const DrawerWrapper = ({ children, className = '' }: Props) => {
+  const classes = classNames('flex dark:bg-lite-black md:flex-row', className);
+  return <div className={classes}>{children}</div>;
+};

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

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import type { ReactElement } from 'react';
+
+interface Props {
+  children?: ReactElement | ReactElement[];
+  isMenuOpen?: boolean;
+  onToggle(): void;
+  rtl?: boolean;
+  outerClasses?: string;
+  innerClasses?: string;
+}
+
+export const NavigationDrawer = ({
+  isMenuOpen = false,
+  onToggle,
+  children,
+  rtl,
+  outerClasses = '',
+  innerClasses = '',
+}: Props) => {
+  const width = 'w-full md:w-auto md:min-w-[15%] shrink-0';
+  const position = 'absolute inset-0 h-full z-10 md:static';
+  const background = 'bg-black/50 dark:bg-white/50';
+  const flex = 'flex justify-end overflow-hidden';
+  const joinedClasses = [flex, width, position, background].join(' ');
+
+  const outerStyles = classNames(joinedClasses, {
+    visible: isMenuOpen,
+    'invisible md:visible': !isMenuOpen,
+    'flex-row-reverse': !rtl,
+    [outerClasses]: outerClasses,
+  });
+
+  const translateClose = rtl ? 'translate-x-full' : '-translate-x-full';
+
+  const innerStyles = classNames(
+    'w-3/4 md:w-full bg-white dark:bg-lite-black',
+    {
+      'translate-x-0 transition-transform md:transform-none': isMenuOpen,
+      [`${translateClose} md:transform-none`]: !isMenuOpen,
+      [innerClasses]: innerClasses,
+    }
+  );
+
+  return (
+    <aside aria-label="Sidebar Navigation Menu" className={outerStyles}>
+      <div
+        role="presentation"
+        aria-label="Content Overlay - Click To Close Sidebar Navigation"
+        className="md:hidden grow h-full"
+        onClick={onToggle}
+      />
+      <div
+        role="group"
+        aria-label="Sidebar Navigation Grouped Content"
+        className={innerStyles}
+      >
+        {children}
+      </div>
+    </aside>
+  );
+};

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

@@ -0,0 +1,4 @@
+export * from './drawer';
+export * from './drawer-toggle';
+export * from './drawer-content';
+export * from './drawer-wrapper';

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

@@ -0,0 +1,48 @@
+import React from 'react';
+
+const Comet = () => {
+  return (
+    <svg
+      viewBox="0 0 118 82"
+      fill="currentColor"
+      className="max-w-[7.5rem] mx-auto"
+    >
+      <g className="fill-black dark:fill-white">
+        <path d="M44.3791 67.5864H41.5859V70.3796H44.3791V67.5864Z"></path>
+        <path d="M47.173 64.7932V62H44.3799V64.7932V67.5863H47.173V64.7932Z"></path>
+        <path d="M41.5863 70.3794H36V73.1726H41.5863V70.3794Z"></path>
+        <path d="M44.3791 73.1719H41.5859V75.965H44.3791V73.1719Z"></path>
+        <path d="M47.173 75.9658H44.3799V81.5521H47.173V75.9658Z"></path>
+        <path d="M49.966 73.1719H47.1729V75.965H49.966V73.1719Z"></path>
+        <path d="M55.5521 70.3794H49.9658V73.1726H55.5521V70.3794Z"></path>
+        <path d="M49.966 67.5864H47.1729V70.3796H49.966V67.5864Z"></path>
+        <path d="M57.1876 60.564H54V63.7515H57.1876V60.564Z"></path>
+        <path d="M60.3751 57.3765H57.1875V60.564H60.3751V57.3765Z"></path>
+        <path d="M63.5626 54.1885H60.375V57.3761H63.5626V54.1885Z"></path>
+        <path d="M66.7501 51.001H63.5625V54.1886H66.7501V51.001Z"></path>
+        <path d="M69.9376 47.8135H66.75V51.0011H69.9376V47.8135Z"></path>
+        <path d="M73.1251 44.626H69.9375V47.8136H73.1251V44.626Z"></path>
+        <path d="M76.3126 41.4385H73.125V44.6261H76.3126V41.4385Z"></path>
+        <path d="M79.5001 38.251H76.3125V41.4386H79.5001V38.251Z"></path>
+        <path d="M82.6886 35.0635H79.501V38.2511H82.6886V35.0635Z"></path>
+        <path d="M85.8761 31.876H82.6885V35.0636H85.8761V31.876Z"></path>
+        <path d="M89.0636 28.688H85.876V31.8756H89.0636V28.688Z"></path>
+        <path d="M92.2511 25.5005H89.0635V28.6881H92.2511V25.5005Z"></path>
+        <path d="M95.4386 22.313H92.251V25.5006H95.4386V22.313Z"></path>
+        <path d="M98.6261 19.1255H95.4385V22.3131H98.6261V19.1255Z"></path>
+        <path d="M101.814 15.938H98.626V19.1256H101.814V15.938Z"></path>
+        <path d="M105.001 12.7505H101.813V15.9381H105.001V12.7505Z"></path>
+        <path d="M108.189 9.5625H105.001V12.7501H108.189V9.5625Z"></path>
+        <path d="M111.376 6.375H108.188V9.56258H111.376V6.375Z"></path>
+        <path d="M114.565 3.1875H111.377V6.37508H114.565V3.1875Z"></path>
+        <path d="M117.752 0H114.564V3.18758H117.752V0Z"></path>
+        <path d="M2.79316 20.793H0V23.5861H2.79316V20.793Z"></path>
+        <path d="M5.58612 18H2.79297V20.7932H5.58612V18Z"></path>
+        <path d="M5.58612 23.5859H2.79297V26.3791H5.58612V23.5859Z"></path>
+        <path d="M8.37909 20.793H5.58594V23.5861H8.37909V20.793Z"></path>
+      </g>
+    </svg>
+  );
+};
+
+export default Comet;

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

@@ -0,0 +1,32 @@
+import React, { useContext } from 'react';
+import { ThemeSwitcher } from '@vegaprotocol/ui-toolkit';
+import { useVegaWalletDialogStore } from '@vegaprotocol/wallet';
+import Logo from './logo';
+import { VegaWalletConnectButton } from '../vega-wallet-connect-button';
+import LocalContext from '../../context/local-context';
+
+const Header = () => {
+  const { updateVegaWalletDialog } = useVegaWalletDialogStore((store) => ({
+    updateVegaWalletDialog: store.updateVegaWalletDialog,
+  }));
+  const {
+    vegaWalletDialog: { setManage },
+  } = useContext(LocalContext);
+  return (
+    <div
+      className="dark flex items-stretch pr-6 py-6 bg-black text-neutral-400"
+      data-testid="header"
+    >
+      <Logo />
+      <div className="flex items-center gap-2 ml-auto relative z-10">
+        <VegaWalletConnectButton
+          setConnectDialog={updateVegaWalletDialog}
+          setManageDialog={setManage}
+        />
+        <ThemeSwitcher className="-my-4" />
+      </div>
+    </div>
+  );
+};
+
+export default Header;

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

@@ -0,0 +1 @@
+export { default } from './header';

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+import { t } from '@vegaprotocol/react-helpers';
+import { VLogo } from '@vegaprotocol/ui-toolkit';
+
+const Logo = () => {
+  return (
+    <NavLink
+      className="mx-6 text-white"
+      aria-label={t('Go to home page')}
+      to="/"
+    >
+      <VLogo className="mx-6 my-2" />
+    </NavLink>
+  );
+};
+
+export default Logo;

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import classNames from 'classnames';
+
+interface Props {
+  width: number;
+  height: number;
+  className: string;
+}
+
+const Video = ({ width = 60, height = 60, className = '' }: Partial<Props>) => {
+  return (
+    <video
+      width={width}
+      height={height}
+      autoPlay
+      muted
+      loop
+      playsInline
+      className={classNames(
+        'absolute left-0 top-0 w-full h-full object-cover',
+        className
+      )}
+      poster="https://vega.xyz/static/poster-image.jpg"
+    >
+      <source
+        src="https://d33wubrfki0l68.cloudfront.net/2500bc5ef1b96927e0220eeb2bef0b22b87bcda1/3e0d3/static/moshed-aa65f0933af9abe9afb5e5663c9b3f68.mp4"
+        type="video/mp4"
+      />
+    </video>
+  );
+};
+
+export default Video;

apps/console-lite/src/app/components/horizontal-menu/horizontal-menu.tsx

@@ -0,0 +1,103 @@
+import classNames from 'classnames';
+import React, { useEffect, useRef, useState } from 'react';
+import { Link } from 'react-router-dom';
+
+export interface Item {
+  name: string;
+  id: string;
+  url?: string;
+  isActive?: boolean;
+  color?: string;
+  cssClass?: string;
+}
+
+interface Props {
+  active?: string;
+  cssClass?: string[];
+  items: Item[];
+  'data-testid'?: string;
+  'aria-label'?: string;
+}
+
+const MenuItem = ({ id, name, url, isActive, cssClass }: Item): JSX.Element => {
+  if (!url) {
+    return <span data-testid={id}>{name}</span>;
+  }
+  return (
+    <Link
+      to={url}
+      aria-label={name}
+      className={classNames('pl-0 hover:opacity-75', cssClass, {
+        active: isActive,
+      })}
+      data-testid={id}
+    >
+      {name}
+    </Link>
+  );
+};
+
+const findActive = (active?: string, items?: Item[]) => {
+  if (!active && items?.length) {
+    return 0;
+  }
+  return items?.length
+    ? items.findIndex((item) => item.id === active) || 0
+    : -1;
+};
+
+export const HorizontalMenu = ({
+  items,
+  active,
+  'data-testid': dataTestId,
+  'aria-label': ariaLabel,
+}: Props) => {
+  const [activeNumber, setActiveNumber] = useState<number>(
+    findActive(active, items)
+  );
+  const slideContRef = useRef<HTMLUListElement | null>(null);
+  const [sliderStyles, setSliderStyles] = useState<Record<string, string>>({});
+
+  useEffect(() => {
+    setActiveNumber(findActive(active, items));
+  }, [active, items]);
+
+  useEffect(() => {
+    const contStyles = (
+      slideContRef.current as HTMLUListElement
+    ).getBoundingClientRect();
+    const selectedStyles = (slideContRef.current as HTMLUListElement).children[
+      activeNumber
+    ]?.getBoundingClientRect();
+    const styles: Record<string, string> = selectedStyles
+      ? {
+          backgroundColor: items[activeNumber].color || '',
+          width: `${selectedStyles.width}px`,
+          left: `${selectedStyles.left - contStyles.left}px`,
+        }
+      : {};
+    setSliderStyles(styles);
+  }, [activeNumber, slideContRef, items]);
+
+  return items.length ? (
+    <ul
+      ref={slideContRef}
+      className="grid grid-flow-col auto-cols-min gap-4 relative pb-2 mb-2"
+      data-testid={dataTestId}
+      aria-label={ariaLabel}
+    >
+      {items.map((item, i) => (
+        <li key={item.id} className="md:mr-2 whitespace-nowrap">
+          <MenuItem {...item} isActive={i === activeNumber} />
+        </li>
+      ))}
+      <li
+        className="absolute bottom-0 h-[2px] transition-left duration-300 dark:bg-white bg-black"
+        key="slider"
+        style={sliderStyles}
+      />
+    </ul>
+  ) : null;
+};
+
+export default HorizontalMenu;

apps/console-lite/src/app/components/horizontal-menu/index.ts

@@ -0,0 +1,2 @@
+export { default as HorizontalMenu } from './horizontal-menu';
+export type { Item as HorizontalMenuItem } from './horizontal-menu';

apps/console-lite/src/app/components/icons/icon.tsx

@@ -0,0 +1,51 @@
+import type { ReactElement } from 'react';
+import { LiquidityIconPath } from './liquidity-icon';
+import { MarketIconPath } from './market-icon';
+import { TradeIconPath } from './trade-icon';
+import { PortfolioIconPath } from './portfolio-icon';
+
+interface IconProps {
+  name: string;
+  className: string;
+}
+
+interface IconSVGWrapperProps {
+  className: string;
+  children: ReactElement | ReactElement[] | null;
+}
+
+const getIconPath = (name: string): ReactElement | null => {
+  switch (name) {
+    case 'liquidity':
+      return <LiquidityIconPath />;
+    case 'market':
+      return <MarketIconPath />;
+    case 'trade':
+      return <TradeIconPath />;
+    case 'portfolio':
+      return <PortfolioIconPath />;
+    default:
+      return null;
+  }
+};
+
+const IconSVGWrapper = ({ className, children }: IconSVGWrapperProps) => {
+  return (
+    <svg
+      role="presentation"
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+    >
+      {children}
+    </svg>
+  );
+};
+
+export const Icon = ({ name, className }: IconProps) => {
+  return (
+    <IconSVGWrapper className={className}>{getIconPath(name)}</IconSVGWrapper>
+  );
+};