feat(explorer): all links can have props passed

chore(explorer): add link tests
feat(explorer): add time to tx details
2022-11-17 15:06:42 +00:00 · 2022-11-17 14:03:16 +00:00 · 2022-11-16 16:31:16 +00:00 · 2022-11-16 15:37:06 +00:00 · 2022-11-16 14:49:52 +00:00 · 2022-11-16 12:43:41 +00:00
1424 changed files with 76933 additions and 39435 deletions
@@ -51,8 +51,7 @@
            "ul": ["list"],
            "ol": ["list"]
          }
-        ],
-        "curly": "warn"
+        ]
      }
    },
    {
@@ -75,7 +74,8 @@
            "prefer": "type-imports",
            "disallowTypeAnnotations": true
          }
-        ]
+        ],
+        "curly": ["error", "multi-line"]
      }
    },
    {
@@ -0,0 +1,45 @@
+---
+name: "\U0001F41B Bug"
+about: Create a report to help us improve
+title: ''
+labels: "\U0001F41B bug"
+assignees: ''
+---
+
+## Description
+
+A clear and concise description of what the bug is.
+
+## Steps to Reproduce
+
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+## Expected behavior
+
+A clear and concise description of what you expected to happen.
+
+## Screenshots
+
+If applicable, add screenshots to help explain your problem.
+
+## Device details
+
+**Desktop (please complete the following information):**
+
+- OS: [e.g. iOS]
+- Browser [e.g. chrome, safari]
+- Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+
+- Device: [e.g. iPhone6]
+- OS: [e.g. iOS8.1]
+- Browser [e.g. stock browser, safari]
+- Version [e.g. 22]
+
+## Additional context
+
+Add any other context about the problem here.
@@ -0,0 +1,21 @@
+---
+name: Chore
+about:
+  A template to capture non feature / enhancement work we need to do like work
+  to support other functions or housekeeping etc.
+title: ''
+labels: chore
+assignees: ''
+---
+
+## The Chore
+
+What we need to achieve and who for
+
+## Tasks
+
+- [ ] What do we need to do first
+- [ ] and then what?
+- [ ] Etc.
+
+## Additional details / background info
@@ -0,0 +1,33 @@
+---
+name: User Story
+about:
+  A template to describe a features or enhancements we want to make from a users
+  perspective to ensure we understand what is needed and the value it would add
+title: ''
+labels: feature
+assignees: ''
+---
+
+## Story
+
+As a
+I want
+So that
+
+## Acceptance Criteria
+
+- [ ] I can
+- [ ] I can
+- [ ] I can
+
+## Tasks
+
+- [ ] Explore and sketch
+- [ ] Team and stakeholder review
+- [ ] Visual Design
+- [ ] Team review
+- [ ] Etc.
+
+## Sketch
+
+## Additional details / background info
@@ -0,0 +1,28 @@
+inputs:
+  all:
+    description: 'Install all binaries'
+    default: false
+  version:
+    description: 'Vega version'
+  gobin:
+    description: 'GOBIN path'
+    default: '/home/runner/go/bin'
+runs:
+  using: 'composite'
+  steps:
+    - name: Install Vega binaries
+      shell: bash
+      run: |
+        wget 'https://github.com/vegaprotocol/vega/releases/download/${{ inputs.version }}/vega-linux-amd64.zip' -q
+        unzip vega-linux-amd64.zip -d ${{ inputs.gobin }}
+
+    - name: Checkout vegawallet-dummy
+      uses: actions/checkout@v3
+      with:
+        repository: 'vegaprotocol/vegawallet-dummy'
+        path: './dummy'
+
+    - name: Install vegawallet-dummy binaries
+      shell: bash
+      run: go install
+      working-directory: ./dummy
@@ -0,0 +1,30 @@
+inputs:
+  github-token:
+    description: 'github token'
+runs:
+  using: 'composite'
+  steps:
+    - name: Checkout capsule
+      uses: actions/checkout@v2
+      with:
+        repository: vegaprotocol/vegacapsule
+        ref: main
+        token: ${{ inputs.github-token }}
+        path: './capsule'
+
+    - name: Build capsule
+      run: go install
+      shell: bash
+      working-directory: capsule
+
+    - name: Login to docker
+      shell: bash
+      run: echo -n ${{ inputs.github-token }} | docker login https://ghcr.io -u vega-ci-bot --password-stdin
+
+    - name: Start nomad
+      shell: bash
+      run: vegacapsule nomad &
+
+    - name: Bootstrap network
+      shell: bash
+      run: vegacapsule network bootstrap --config-path=./frontend-monorepo/vegacapsule/config.hcl --force
@@ -0,0 +1,47 @@
+inputs:
+  recovery:
+    description: 'Recovery phrase'
+  passphrase:
+    description: 'Wallet password'
+  capsule:
+    description: 'Is Capsule network used'
+    default: 'false'
+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
+      if: ${{ inputs.capsule=='false' }}
+      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
+      if: ${{ inputs.capsule=='false' }}
+      run: vega wallet key generate -w UI_Trading_Test -p ./passphrase --home ~/.vegacapsule/testnet/wallet
+
+    - name: Import network
+      shell: bash
+      if: ${{ inputs.capsule=='false' }}
+      run: vega wallet network import --from-url="https://raw.githubusercontent.com/vegaprotocol/networks-internal/master/stagnet3/stagnet3.toml" --force --home ~/.vegacapsule/testnet/wallet
+
+    - name: Start service using fairground network
+      shell: bash
+      if: ${{ inputs.capsule=='false' }}
+      run: vegawallet-dummy service run --network stagnet3 --wallet UI_Trading_Test --passphrase-file ./passphrase --home ~/.vegacapsule/testnet/wallet &
+
+    - name: Start service using capsule network
+      shell: bash
+      if: ${{ inputs.capsule=='true' }}
+      run: vegawallet-dummy service run --network DV --wallet capsule_wallet --passphrase-file ./passphrase --home ~/.vegacapsule/testnet/wallet &
@@ -1,25 +1,27 @@
 ---
-name: Auto Assign Issue to New Project
+name: 'Add Issues To Project Board'

 'on':
  issues:
-    types: [opened]
+    types:
+      - opened
+env:
+  GH_TOKEN: ${{ secrets.GH_NEW_CARD_TO_PROJECT }}
+  PROJECT_ID: ${{ secrets.FRONT_END_PROJECT_ID }}
+  ISSUE_ID: ${{ github.event.issue.node_id }}
+  USER: ${{ github.actor }}

 jobs:
  add_issue:
    runs-on: ubuntu-latest
    steps:
-      - name: Add Issue to New Front End Project Board
-        env:
-          GITHUB_TOKEN: ${{ secrets.GH_NEW_CARD_TO_PROJECT }}
-          PROJECT_ID: ${{ secrets.FRONT_END_PROJECT_ID }}
-          ISSUE_ID: ${{ github.event.issue.node_id }}
+      - name: 'Add issue to project board'
        run: |
          gh api graphql -f query='
-            mutation($project:ID!, $issue:ID!) {
-              addProjectNextItem(input: {projectId: $project, contentId: $issue}) {
-                projectNextItem {
+            mutation($user:String!, $project:ID!, $issue:ID!) {
+              addProjectV2ItemById(input: {clientMutationId: $user, projectId: $project, contentId: $issue}) {
+                item {
                  id
                }
              }
-            }' -f project=$PROJECT_ID -f issue=$ISSUE_ID --jq '.data.addProjectNextItem.projectNextItem.id'
+            }' -f project=$PROJECT_ID -f issue=$ISSUE_ID -f user=$USER
@@ -1,4 +1,4 @@
-name: Capsule tests -- manual trigger
+name: Cypress tests -- manual trigger

 # This workflow runs the frontend tests against chosen branch

@@ -10,146 +10,52 @@ on:
        required: true
        type: choice
        options:
-          - explorer-e2e
          - console-lite-e2e
+          - explorer-e2e
+          - liquidity-provision-dashboard-e2e
          - stats-e2e
          - token-e2e
          - trading-e2e
-      includeFlows:
-        description: 'Include long flows (if any)?'
+      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: true
+        default: false
+env:
+  GOBIN: /home/runner/go/bin
+  VEGA_VERSION: 'v0.62.1'

 jobs:
  manual:
-    name: Run capsule tests -- manual trigger
+    name: Run Cypress tests -- manual trigger
    runs-on: ubuntu-latest
-    env:
-      GO111MODULE: 'on'
-      GOPROXY: ${{ secrets.GO_PROXY }}
    steps:
-      #######
-      ## Setup langs
-      #######
-      - name: Set up Go
-        uses: actions/setup-go@v3
-        id: go
-        with:
-          go-version: 1.19
-      - name: Set up Node 16
-        uses: actions/setup-node@v2
-        id: npm
-        with:
-          node-version: 16
+      - name: Set tags
+        run: echo TAGS="--env.grepTags '[ ${{ github.event.inputs.tags }} ]'" >> $GITHUB_ENV

-      #######
-      ## Checkout capsule
-      #######
+      - name: Set --skip-nx-cache flag
+        if: ${{ github.event.inputs.skip-nx-cache == 'true' }}
+        run: echo SKIP_NX_CACHE="--skip-nx-cache" >> $GITHUB_ENV

-      # Checkout front ends
-      - name: Checkout frontend mono repo
-        uses: actions/checkout@v2
-        with:
-          ref: ${{ github.event.pull_request.head.ref }}
-          fetch-depth: 0
-          path: './frontend-monorepo'
+    outputs:
+      vega-version: ${{env.VEGA_VERSION}}
+      gobin: ${{env.GOBIN}}
+      skip-cache: ${{env.SKIP_NX_CACHE}}
+      tags: ${{env.TAGS}}

-      # Checkout capsule to build local network
-      - name: Checkout capsule
-        uses: actions/checkout@v2
-        with:
-          repository: vegaprotocol/vegacapsule
-          ref: main
-          token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
-          path: './capsule'
-
-      #######
-      ## Build binaries
-      #######
-      - name: Build capsule
-        run: go install
-        working-directory: capsule
-
-      - name: Set GOBIN
-        run: echo GOBIN=$(go env GOPATH)/bin >> $GITHUB_ENV
-
-      - name: Checkout Vega
-        uses: actions/checkout@v2
-        with:
-          repository: vegaprotocol/vega
-          ref: v0.54.0
-          token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
-          path: './vega'
-
-      - name: Install Vega binaries
-        run: go install -v ./cmd/vega
-        working-directory: vega
-
-      - name: Install Vega wallet binaries
-        run: go install ./cmd/vegawallet
-        working-directory: vega
-
-      - name: Install date-node binaries
-        run: go install ./cmd/data-node
-        working-directory: vega
-
-      ######
-      ## Start capsule
-      ######
-      - name: Login to docker
-        run: echo -n ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }} | docker login https://ghcr.io -u vega-ci-bot --password-stdin
-
-      - name: Start nomad
-        run: vegacapsule nomad &
-
-      - name: Bootstrap network
-        run: vegacapsule network bootstrap --config-path=../frontend-monorepo/vegacapsule/config.hcl --force
-        working-directory: capsule
-
-      ######
-      ## Setup a Vega wallet for our user
-      ######
-      - name: Create passphrase
-        run: echo "${{ secrets.CYPRESS_TRADING_TEST_VEGA_WALLET_PASSPHRASE }}" > ./passphrase
-      - name: Create recovery
-        run: echo "${{ secrets.TRADING_TEST_VEGA_WALLET_RECOVERY }}" > ./recovery
-
-      - name: Initialize wallet
-        run: vegawallet init -f --home ~/.vegacapsule/testnet/wallet
-      - name: Import wallet
-        run: vegawallet import -w UI_Trading_Test --recovery-phrase-file ./recovery -p ./passphrase --home ~/.vegacapsule/testnet/wallet
-      - name: Create public key 2
-        run: vegawallet key generate -w UI_Trading_Test -p ./passphrase --home ~/.vegacapsule/testnet/wallet
-      - name: Start service
-        run: vegawallet service run --network DV --automatic-consent  --home ~/.vegacapsule/testnet/wallet &
-
-      ######
-      ## Run some tests
-      ######
-
-      - name: Install root dependencies
-        run: yarn install
-        working-directory: frontend-monorepo
-
-      - name: Run Cypress tests
-        run: yarn nx run ${{ github.event.inputs.project }}:e2e --record --key ${{ secrets.CYPRESS_RECORD_KEY }}
-        working-directory: frontend-monorepo
-        env:
-          CYPRESS_TRADING_TEST_VEGA_WALLET_PASSPHRASE: ${{ secrets.CYPRESS_TRADING_TEST_VEGA_WALLET_PASSPHRASE }}
-          CYPRESS_SLACK_WEBHOOK: ${{ secrets.CYPRESS_SLACK_WEBHOOK }}
-          CYPRESS_ETH_WALLET_MNEMONIC: ${{ secrets.CYPESS_ETH_WALLET_MNEMONIC }}
-          CYPRESS_INCLUDE_FLOWS: ${{ github.event.inputs.includeFlows }}
-
-      ######
-      ## Upload logs
-      ######
-
-      - name: Logs
-        if: ${{ always() }}
-        run: vegacapsule network logs > vega-capsule-logs.txt
-
-      - uses: actions/upload-artifact@v2
-        with:
-          name: logs
-          path: ./vega-capsule-logs.txt
+  dispatch:
+    needs: manual
+    uses: ./.github/workflows/tests-dispatcher.yml
+    secrets: inherit
+    with:
+      project: ${{ inputs.project }}
+      vega-version: ${{needs.manual.outputs.vega-version}}
+      gobin: ${{needs.manual.outputs.gobin}}
+      skip-cache: ${{needs.manual.outputs.skip-cache}}
+      tags: ${{needs.manual.outputs.tags}}
+      capsule-teardown: false
@@ -1,140 +1,20 @@
-name: Capsule tests -- night run
+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:
-    name: Run capsule tests -- nightly
-    runs-on: ubuntu-latest
-    env:
-      GO111MODULE: 'on'
-    steps:
-      #######
-      ## Setup langs
-      #######
-      - name: Set up Go
-        uses: actions/setup-go@v3
-        id: go
-        with:
-          go-version: 1.19
-      - name: Set up Node 16
-        uses: actions/setup-node@v2
-        id: npm
-        with:
-          node-version: 16
-
-      #######
-      ## Checkout capsule
-      #######
-
-      # Checkout front ends
-      - name: Checkout frontend mono repo
-        uses: actions/checkout@v2
-        with:
-          ref: ${{ github.event.pull_request.head.ref }}
-          fetch-depth: 0
-          path: './frontend-monorepo'
-
-      # Checkout capsule to build local network
-      - name: Checkout capsule
-        uses: actions/checkout@v2
-        with:
-          repository: vegaprotocol/vegacapsule
-          ref: main
-          token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
-          path: './capsule'
-
-      #######
-      ## Build binaries
-      #######
-      - name: Build capsule
-        run: go install
-        working-directory: capsule
-
-      - name: Set GOBIN
-        run: echo GOBIN=$(go env GOPATH)/bin >> $GITHUB_ENV
-
-      - name: Checkout Vega
-        uses: actions/checkout@v2
-        with:
-          repository: vegaprotocol/vega
-          ref: v0.54.0
-          token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
-          path: './vega'
-
-      - name: Install Vega binaries
-        run: go install -v ./cmd/vega
-        working-directory: vega
-
-      - name: Install Vega wallet binaries
-        run: go install ./cmd/vegawallet
-        working-directory: vega
-
-      - name: Install date-node binaries
-        run: go install ./cmd/data-node
-        working-directory: vega
-
-      ######
-      ## Start capsule
-      ######
-      - name: Login to docker
-        run: echo -n ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }} | docker login https://ghcr.io -u vega-ci-bot --password-stdin
-
-      - name: Start nomad
-        run: vegacapsule nomad &
-
-      - name: Bootstrap network
-        run: vegacapsule network bootstrap --config-path=../frontend-monorepo/vegacapsule/config.hcl --force
-        working-directory: capsule
-
-      ######
-      ## Setup a Vega wallet for our user
-      ######
-      - name: Create passphrase
-        run: echo "${{ secrets.CYPRESS_TRADING_TEST_VEGA_WALLET_PASSPHRASE }}" > ./passphrase
-      - name: Create recovery
-        run: echo "${{ secrets.TRADING_TEST_VEGA_WALLET_RECOVERY }}" > ./recovery
-
-      - name: Initialize wallet
-        run: vegawallet init -f --home ~/.vegacapsule/testnet/wallet
-      - name: Import wallet
-        run: vegawallet import -w UI_Trading_Test --recovery-phrase-file ./recovery -p ./passphrase --home ~/.vegacapsule/testnet/wallet
-      - name: Create public key 2
-        run: vegawallet key generate -w UI_Trading_Test -p ./passphrase --home ~/.vegacapsule/testnet/wallet
-      - name: Start service
-        run: vegawallet service run --network DV --automatic-consent  --home ~/.vegacapsule/testnet/wallet &
-
-      ######
-      ## Run some tests
-      ######
-
-      - name: Install root dependencies
-        run: yarn install
-        working-directory: frontend-monorepo
-
-      - name: Run Cypress tests
-        run: yarn nx run-many --target=e2e --all --record --key ${{ secrets.CYPRESS_RECORD_KEY }}
-        working-directory: frontend-monorepo
-        env:
-          CYPRESS_TRADING_TEST_VEGA_WALLET_PASSPHRASE: ${{ secrets.CYPRESS_TRADING_TEST_VEGA_WALLET_PASSPHRASE }}
-          CYPRESS_SLACK_WEBHOOK: ${{ secrets.CYPRESS_SLACK_WEBHOOK }}
-          CYPRESS_ETH_WALLET_MNEMONIC: ${{ secrets.CYPESS_ETH_WALLET_MNEMONIC }}
-          CYPRESS_NIGHTLY_RUN: true
-          CYPRESS_INCLUDE_FLOWS: true
-
-      ######
-      ## Upload logs
-      ######
-
-      - name: Logs
-        if: ${{ always() }}
-        run: vegacapsule network logs > vega-capsule-logs.txt
-
-      - uses: actions/upload-artifact@v2
-        with:
-          name: logs
-          path: ./vega-capsule-logs.txt
+    uses: ./.github/workflows/tests-dispatcher.yml
+    secrets: inherit
+    with:
+      project: '[console-lite-e2e, explorer-e2e, liquidity-provision-dashboard-e2e, stats-e2e, token-e2e, trading-e2e]'
+      vega-version: 'v0.62.1'
+      gobin: /home/runner/go/bin
+      tags: --env.grepTags '[ @smoke, @regression, @slow ]'
+      night-run: true
+      capsule-teardown: false
@@ -1,10 +1,10 @@
-name: Capsule tests
+name: Cypress tests - PR

 on:
  push:
    branches:
-      - master
      - develop
+      - main
  pull_request:
    types:
      - opened
@@ -12,142 +12,59 @@ on:
      - synchronize
      - ready_for_review

+env:
+  GOBIN: /home/runner/go/bin
+  VEGA_VERSION: 'v0.62.1'
+
 jobs:
  pr:
-    name: Run capsule tests - PR
    runs-on: ubuntu-latest
-    if: ${{ github.event_name == 'pull_request' && github.event.pull_request.draft == false }}
-    env:
-      GO111MODULE: 'on'
    steps:
-      #######
-      ## Setup langs
-      #######
-      - name: Set up Go
-        uses: actions/setup-go@v3
-        id: go
-        with:
-          go-version: 1.19
-      - name: Set up Node 16
-        uses: actions/setup-node@v2
-        id: npm
-        with:
-          node-version: 16
-
-      #######
-      ## Checkout capsule
-      #######
-
      # Checkout front ends
      - name: Checkout frontend mono repo
        uses: actions/checkout@v2
        with:
-          ref: ${{ github.event.pull_request.head.ref }}
          fetch-depth: 0
          path: './frontend-monorepo'

-      # Checkout capsule to build local network
-      - name: Checkout capsule
-        uses: actions/checkout@v2
+      # Restore node_modules from cache if possible
+      - name: Restore node_modules from cache
+        uses: actions/cache@v3
        with:
-          repository: vegaprotocol/vegacapsule
-          ref: main
-          token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
-          path: './capsule'
+          path: |
+            frontend-monorepo/node_modules
+            /home/runner/.cache/Cypress
+          key: node_modules_cypress-${{ hashFiles('frontend-monorepo/yarn.lock') }}

-      #######
-      ## Build binaries
-      #######
-      - name: Build capsule
-        run: go install
-        working-directory: capsule
-
-      - name: Set GOBIN
-        run: echo GOBIN=$(go env GOPATH)/bin >> $GITHUB_ENV
-
-      - name: Checkout Vega
-        uses: actions/checkout@v2
-        with:
-          repository: vegaprotocol/vega
-          ref: v0.54.0
-          token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
-          path: './vega'
-
-      - name: Install Vega binaries
-        run: go install -v ./cmd/vega
-        working-directory: vega
-
-      - name: Install Vega wallet binaries
-        run: go install ./cmd/vegawallet
-        working-directory: vega
-
-      - name: Install date-node binaries
-        run: go install ./cmd/data-node
-        working-directory: vega
-
-      ######
-      ## Start capsule
-      ######
-      - name: Login to docker
-        run: echo -n ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }} | docker login https://ghcr.io -u vega-ci-bot --password-stdin
-
-      - name: Start nomad
-        run: vegacapsule nomad &
-
-      - name: Bootstrap network
-        run: vegacapsule network bootstrap --config-path=../frontend-monorepo/vegacapsule/config.hcl --force
-        working-directory: capsule
-
-      ######
-      ## Setup a Vega wallet for our user
-      ######
-      - name: Create passphrase
-        run: echo "${{ secrets.CYPRESS_TRADING_TEST_VEGA_WALLET_PASSPHRASE }}" > ./passphrase
-      - name: Create recovery
-        run: echo "${{ secrets.TRADING_TEST_VEGA_WALLET_RECOVERY }}" > ./recovery
-
-      - name: Initialize wallet
-        run: vegawallet init -f --home ~/.vegacapsule/testnet/wallet
-      - name: Import wallet
-        run: vegawallet import -w UI_Trading_Test --recovery-phrase-file ./recovery -p ./passphrase --home ~/.vegacapsule/testnet/wallet
-      - name: Create public key 2
-        run: vegawallet key generate -w UI_Trading_Test -p ./passphrase --home ~/.vegacapsule/testnet/wallet
-      - name: Start service
-        run: vegawallet service run --network DV --automatic-consent  --home ~/.vegacapsule/testnet/wallet &
-
-      ######
-      ## Run some tests
-      ######
+      # 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: master
+          main-branch-name: ${{ github.base_ref || github.ref_name }}
+          set-environment-variables-for-job: true

-      - name: Install root dependencies
-        run: yarn install
+      # 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

-      - name: Run Cypress tests
-        run: npx nx affected:e2e --record --key ${{ secrets.CYPRESS_RECORD_KEY }}
-        working-directory: frontend-monorepo
-        env:
-          CYPRESS_TRADING_TEST_VEGA_WALLET_PASSPHRASE: ${{ secrets.CYPRESS_TRADING_TEST_VEGA_WALLET_PASSPHRASE }}
-          CYPRESS_SLACK_WEBHOOK: ${{ secrets.CYPRESS_SLACK_WEBHOOK }}
-          CYPRESS_ETH_WALLET_MNEMONIC: ${{ secrets.CYPESS_ETH_WALLET_MNEMONIC }}
-          CYPRESS_INCLUDE_FLOWS: false
+    outputs:
+      projects: ${{ env.AFFECTED }}
+      vega-version: ${{ env.VEGA_VERSION }}
+      gobin: ${{ env.GOBIN }}

-      ######
-      ## Upload logs
-      ######
-
-      - name: Logs
-        if: ${{ always() }}
-        run: vegacapsule network logs > vega-capsule-logs.txt
-
-      - uses: actions/upload-artifact@v2
-        if: ${{ always() }}
-        with:
-          name: logs
-          path: ./vega-capsule-logs.txt
+  dispatch:
+    needs: pr
+    uses: ./.github/workflows/tests-dispatcher.yml
+    secrets: inherit
+    with:
+      project: ${{ needs.pr.outputs.projects }}
+      vega-version: ${{needs.pr.outputs.vega-version}}
+      gobin: ${{needs.pr.outputs.gobin}}
+      tags: "--env.grepTags='@smoke'"
@@ -0,0 +1,86 @@
+name: Cypress - console-lite
+
+on:
+  workflow_call:
+    inputs:
+      trigger:
+        required: true
+        type: string
+        default: 'false'
+      vega-version:
+        required: true
+        type: string
+      gobin:
+        required: false
+        type: string
+        default: /home/runner/go/bin
+      skip-cache:
+        required: false
+        type: string
+      tags:
+        required: false
+        type: string
+
+jobs:
+  console-lite-e2e:
+    if: ${{ inputs.trigger == 'true' }}
+    runs-on: self-hosted
+    steps:
+      # Add GOBIN to PATH
+      - name: Add GOBIN to PATH
+        run: echo ${{ inputs.gobin }} >> $GITHUB_PATH
+
+      # 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') }}
+
+      # Install frontend dependencies
+      - name: Install root dependencies
+        run: yarn install --frozen-lockfile
+        working-directory: frontend-monorepo
+
+      #######
+      ## Build and run Vegacapsule network
+      #######
+
+      - name: Install Vega binaries
+        uses: ./frontend-monorepo/.github/actions/install-vega-binaries
+        with:
+          version: ${{ inputs.vega-version }}
+          gobin: ${{ inputs.gobin }}
+
+      ######
+      ## Setup a Vega wallet for our user
+      ######
+
+      - name: Set up Vegawallet
+        uses: ./frontend-monorepo/.github/actions/setup-vegawallet
+        with:
+          recovery: ${{ secrets.TRADING_TEST_VEGA_WALLET_RECOVERY }}
+          passphrase: ${{ secrets.CYPRESS_TRADING_TEST_VEGA_WALLET_PASSPHRASE }}
+          capsule: false
+
+      # 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_TRADING_TEST_VEGA_WALLET_PASSPHRASE: ${{ secrets.CYPRESS_TRADING_TEST_VEGA_WALLET_PASSPHRASE }}
+          CYPRESS_SLACK_WEBHOOK: ${{ secrets.CYPRESS_SLACK_WEBHOOK }}
+          CYPRESS_ETH_WALLET_MNEMONIC: ${{ secrets.CYPRESS_ETH_WALLET_MNEMONIC }}
@@ -0,0 +1,118 @@
+name: Cypress - explorer
+
+on:
+  workflow_call:
+    inputs:
+      trigger:
+        required: true
+        type: string
+        default: 'false'
+      vega-version:
+        required: true
+        type: string
+      gobin:
+        required: false
+        type: string
+        default: /home/runner/go/bin
+      skip-cache:
+        required: false
+        type: string
+      tags:
+        required: false
+        type: string
+      night-run:
+        required: false
+        type: boolean
+        default: false
+      capsule-teardown:
+        required: false
+        type: boolean
+        default: false
+
+jobs:
+  explorer-e2e:
+    if: ${{ inputs.trigger == 'true' }}
+    runs-on: self-hosted
+    timeout-minutes: 30
+    steps:
+      # Add GOBIN to PATH
+      - name: Add GOBIN to PATH
+        run: echo ${{ inputs.gobin }} >> $GITHUB_PATH
+
+      # 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') }}
+
+      # Install frontend dependencies
+      - name: Install root dependencies
+        run: yarn install --frozen-lockfile
+        working-directory: frontend-monorepo
+
+      #######
+      ## Build and run Vegacapsule network
+      #######
+
+      - name: Install Vega binaries
+        uses: ./frontend-monorepo/.github/actions/install-vega-binaries
+        with:
+          version: ${{ inputs.vega-version }}
+          gobin: ${{ inputs.gobin }}
+
+      - name: Build and run Vegacapsule network
+        uses: ./frontend-monorepo/.github/actions/run-vegacapsule
+        with:
+          github-token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
+
+      ######
+      ## Setup a Vega wallet for our user
+      ######
+
+      - name: Set up Vegawallet
+        uses: ./frontend-monorepo/.github/actions/setup-vegawallet
+        with:
+          recovery: ${{ secrets.TRADING_TEST_VEGA_WALLET_RECOVERY }}
+          passphrase: ${{ secrets.CYPRESS_TRADING_TEST_VEGA_WALLET_PASSPHRASE }}
+          capsule: true
+
+      ######
+      ## 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 explorer-e2e:e2e ${{ inputs.skip-cache }} --record --key ${{ secrets.CYPRESS_RECORD_KEY }} --browser chrome ${{ inputs.tags }}
+        working-directory: frontend-monorepo
+        env:
+          CYPRESS_TRADING_TEST_VEGA_WALLET_PASSPHRASE: ${{ secrets.CYPRESS_TRADING_TEST_VEGA_WALLET_PASSPHRASE }}
+          CYPRESS_SLACK_WEBHOOK: ${{ secrets.CYPRESS_SLACK_WEBHOOK }}
+          CYPRESS_ETH_WALLET_MNEMONIC: ${{ secrets.CYPRESS_ETH_WALLET_MNEMONIC }}
+          CYPRESS_TEARDOWN_NETWORK_AFTER_FLOWS: ${{ inputs.capsule-teardown }}
+          CYPRESS_NIGHTLY_RUN: ${{ inputs.night-run }}
+
+      ######
+      ## Upload logs
+      ######
+
+      - name: Logs
+        run: vegacapsule network logs > vega-capsule-logs.txt
+
+      - uses: actions/upload-artifact@v2
+        with:
+          name: logs
+          path: ./vega-capsule-logs.txt
@@ -0,0 +1,47 @@
+name: Cypress - liquidity provision dashboard
+
+on:
+  workflow_call:
+    inputs:
+      trigger:
+        required: true
+        type: string
+        default: 'false'
+
+jobs:
+  liquidity-provision-dashboard-e2e:
+    timeout-minutes: 10
+    if: ${{ inputs.trigger == 'true' }}
+    runs-on: self-hosted
+    steps:
+      # 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') }}
+
+      # Install frontend dependencies
+      - name: Install root dependencies
+        run: yarn install --frozen-lockfile
+        working-directory: frontend-monorepo
+
+      # 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 liquidity-provision-dashboard-e2e:e2e --record --key ${{ secrets.CYPRESS_RECORD_KEY }} --browser chrome
+        working-directory: frontend-monorepo
+        env:
+          CYPRESS_SLACK_WEBHOOK: ${{ secrets.CYPRESS_SLACK_WEBHOOK }}
@@ -0,0 +1,31 @@
+name: Cypress Console tests -- live environment
+
+# This workflow runs using provided url
+
+on:
+  workflow_dispatch:
+    inputs:
+      url:
+        description: 'Url'
+        required: true
+        type: string
+
+jobs:
+  cypress-run:
+    name: Run Cypress Trading tests -- live environment
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Run Cypress tests
+        uses: cypress-io/github-action@v4
+        with:
+          browser: chrome
+          record: true
+          project: ./apps/trading-e2e
+          config: baseUrl=${{ github.event.inputs.url }}
+          env: grepTags=@live
+        env:
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
@@ -0,0 +1,47 @@
+name: Cypress - stats
+
+on:
+  workflow_call:
+    inputs:
+      trigger:
+        required: true
+        type: string
+        default: 'false'
+
+jobs:
+  stats-e2e:
+    runs-on: self-hosted
+    if: ${{ inputs.trigger == 'true' }}
+    timeout-minutes: 10
+    steps:
+      # 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') }}
+
+      # Install frontend dependencies
+      - name: Install root dependencies
+        run: yarn install --frozen-lockfile
+        working-directory: frontend-monorepo
+
+      # 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 stats-e2e:e2e --record --key ${{ secrets.CYPRESS_RECORD_KEY }} --browser chrome
+        working-directory: frontend-monorepo
+        env:
+          CYPRESS_SLACK_WEBHOOK: ${{ secrets.CYPRESS_SLACK_WEBHOOK }}
@@ -0,0 +1,113 @@
+name: Cypress - token
+
+on:
+  workflow_call:
+    inputs:
+      trigger:
+        required: true
+        type: string
+        default: 'false'
+      vega-version:
+        required: true
+        type: string
+      gobin:
+        required: false
+        type: string
+        default: /home/runner/go/bin
+      skip-cache:
+        required: false
+        type: string
+      tags:
+        required: false
+        type: string
+      capsule-teardown:
+        required: false
+        type: boolean
+        default: false
+
+jobs:
+  token-e2e:
+    if: ${{ inputs.trigger == 'true' }}
+    runs-on: self-hosted
+    timeout-minutes: 60
+    steps:
+      # Add GOBIN to PATH
+      - name: Add GOBIN to PATH
+        run: echo ${{ inputs.gobin }} >> $GITHUB_PATH
+
+      # 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') }}
+
+      # Install frontend dependencies
+      - name: Install root dependencies
+        run: yarn install --frozen-lockfile
+        working-directory: frontend-monorepo
+
+      #######
+      ## Build and run Vegacapsule network
+      #######
+
+      - name: Install Vega binaries
+        uses: ./frontend-monorepo/.github/actions/install-vega-binaries
+        with:
+          version: ${{ inputs.vega-version }}
+          gobin: ${{ inputs.gobin }}
+
+      - name: Build and run Vegacapsule network
+        uses: ./frontend-monorepo/.github/actions/run-vegacapsule
+        with:
+          github-token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
+
+      ######
+      ## Setup a Vega wallet for our user
+      ######
+
+      - name: Set up Vegawallet
+        uses: ./frontend-monorepo/.github/actions/setup-vegawallet
+        with:
+          recovery: ${{ secrets.TRADING_TEST_VEGA_WALLET_RECOVERY }}
+          passphrase: ${{ secrets.CYPRESS_TRADING_TEST_VEGA_WALLET_PASSPHRASE }}
+          capsule: true
+
+      ######
+      ## 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_TRADING_TEST_VEGA_WALLET_PASSPHRASE: ${{ secrets.CYPRESS_TRADING_TEST_VEGA_WALLET_PASSPHRASE }}
+          CYPRESS_SLACK_WEBHOOK: ${{ secrets.CYPRESS_SLACK_WEBHOOK }}
+          CYPRESS_ETH_WALLET_MNEMONIC: ${{ secrets.CYPRESS_ETH_WALLET_MNEMONIC }}
+          CYPRESS_TEARDOWN_NETWORK_AFTER_FLOWS: ${{ inputs.capsule-teardown }}
+
+      ######
+      ## Upload logs
+      ######
+
+      - name: Logs
+        run: vegacapsule network logs > vega-capsule-logs.txt
+
+      - uses: actions/upload-artifact@v2
+        with:
+          name: logs
+          path: ./vega-capsule-logs.txt
@@ -0,0 +1,87 @@
+name: Cypress - trading
+
+on:
+  workflow_call:
+    inputs:
+      trigger:
+        required: true
+        type: string
+        default: 'false'
+      vega-version:
+        required: true
+        type: string
+      gobin:
+        required: false
+        type: string
+        default: /home/runner/go/bin
+      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:
+      # Add GOBIN to PATH
+      - name: Add GOBIN to PATH
+        run: echo ${{ inputs.gobin }} >> $GITHUB_PATH
+
+      # 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') }}
+
+      # Install frontend dependencies
+      - name: Install root dependencies
+        run: yarn install --frozen-lockfile
+        working-directory: frontend-monorepo
+
+      #######
+      ## Build and run Vegacapsule network
+      #######
+
+      - name: Install Vega binaries
+        uses: ./frontend-monorepo/.github/actions/install-vega-binaries
+        with:
+          version: ${{ inputs.vega-version }}
+          gobin: ${{ inputs.gobin }}
+
+      ######
+      ## Setup a Vega wallet for our user
+      ######
+
+      - name: Set up Vegawallet
+        uses: ./frontend-monorepo/.github/actions/setup-vegawallet
+        with:
+          recovery: ${{ secrets.TRADING_TEST_VEGA_WALLET_RECOVERY }}
+          passphrase: ${{ secrets.CYPRESS_TRADING_TEST_VEGA_WALLET_PASSPHRASE }}
+          capsule: false
+
+      # 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_TRADING_TEST_VEGA_WALLET_PASSPHRASE: ${{ secrets.CYPRESS_TRADING_TEST_VEGA_WALLET_PASSPHRASE }}
+          CYPRESS_SLACK_WEBHOOK: ${{ secrets.CYPRESS_SLACK_WEBHOOK }}
+          CYPRESS_ETH_WALLET_MNEMONIC: ${{ secrets.CYPRESS_ETH_WALLET_MNEMONIC }}
@@ -3,7 +3,7 @@ name: Generate queries
 on:
  push:
    branches:
-      - master
+      - develop

 jobs:
  master:
@@ -1,32 +0,0 @@
---
-name: Deploy affected projects to IPFS
-
-'on':
-  # Triggers the workflow on push to main branch
-  push:
-    branches: [master]
-
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch: null
-
-jobs:
-  master:
-    name: Publish NX Affected
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-        with:
-          ref: ${{ github.event.pull_request.head.ref }}
-          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
-      - name: Run deploy for affected sites
-        env:
-          FLEEK_API_KEY: ${{ secrets.FLEEK_API_KEY }}
-        run: ./tools/ipfs-deploy.js
@@ -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
@@ -3,50 +3,16 @@ name: Unit tests & build
 on:
  push:
    branches:
-      - master
      - develop
+      - main
  pull_request:
-
 jobs:
-  master:
-    name: Test and lint - main
-    runs-on: ubuntu-latest
-    permissions:
-      contents: 'read'
-      actions: 'read'
-    if: ${{ github.event_name != 'pull_request' }}
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-        with:
-          ref: ${{ github.event.pull_request.head.ref }}
-          fetch-depth: 0
-      - name: Derive appropriate SHAs for base and head for `nx affected` commands
-        uses: nrwl/nx-set-shas@v2
-        with:
-          main-branch-name: master
-      - name: Use Node.js 16
-        id: Node
-        uses: actions/setup-node@v3
-        with:
-          node-version: 16.14.0
-      - name: Install root dependencies
-        run: yarn install
-      - 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
  pr:
    name: Test and lint - PR
    runs-on: ubuntu-latest
    permissions:
      contents: 'read'
      actions: 'read'
-    if: ${{ github.event_name == 'pull_request' }}
    steps:
      - name: Checkout
        uses: actions/checkout@v3
@@ -55,14 +21,19 @@ jobs:
      - name: Derive appropriate SHAs for base and head for `nx affected` commands
        uses: nrwl/nx-set-shas@v2
        with:
-          main-branch-name: master
+          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
+        run: yarn install --frozen-lockfile
      - name: Check formatting
        run: yarn nx format:check
      - name: Lint affected
@@ -71,3 +42,5 @@ jobs:
        run: yarn nx affected:test
      - name: Build affected
        run: yarn nx affected:build
+      - name: Build affected spec
+        run: yarn nx affected --target=build-spec
@@ -0,0 +1,81 @@
+on:
+  workflow_call:
+    inputs:
+      project:
+        required: true
+        type: string
+      vega-version:
+        required: true
+        type: string
+      gobin:
+        required: false
+        type: string
+        default: /home/runner/go/bin
+      skip-cache:
+        required: false
+        type: string
+      tags:
+        required: false
+        type: string
+      night-run:
+        required: false
+        type: boolean
+      capsule-teardown:
+        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') }}
+      vega-version: ${{ inputs.vega-version }}
+      gobin: ${{ inputs.gobin }}
+      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') }}
+      vega-version: ${{ inputs.vega-version }}
+      gobin: ${{ inputs.gobin }}
+      skip-cache: ${{ inputs.skip-cache }}
+      tags: ${{ inputs.tags }}
+      night-run: ${{ inputs.night-run }}
+      capsule-teardown: ${{ inputs.capsule-teardown }}
+
+  run-liquidity-e2e:
+    uses: ./.github/workflows/cypress-liquidity-provision-dashboard-e2e.yml
+    secrets: inherit
+    with:
+      trigger: ${{ contains(inputs.project, 'liquidity-provision-dashboard-e2e') || contains(inputs.project, 'liquidity-provision-dashboard') }}
+
+  run-stats-e2e:
+    uses: ./.github/workflows/cypress-stats-e2e.yml
+    secrets: inherit
+    with:
+      trigger: ${{ contains(inputs.project, 'stats-e2e') || contains(inputs.project, 'stats') }}
+
+  run-token-e2e:
+    uses: ./.github/workflows/cypress-token-e2e.yml
+    secrets: inherit
+    with:
+      trigger: ${{ contains(inputs.project, 'token-e2e') || contains(inputs.project, 'token') }}
+      vega-version: ${{ inputs.vega-version }}
+      gobin: ${{ inputs.gobin }}
+      skip-cache: ${{ inputs.skip-cache }}
+      tags: ${{ inputs.tags }}
+      capsule-teardown: ${{ inputs.capsule-teardown }}
+
+  run-trading-e2e:
+    uses: ./.github/workflows/cypress-trading-e2e.yml
+    secrets: inherit
+    with:
+      trigger: ${{ contains(inputs.project, 'trading-e2e') || contains(inputs.project, 'trading') }}
+      vega-version: ${{ inputs.vega-version }}
+      gobin: ${{ inputs.gobin }}
+      skip-cache: ${{ inputs.skip-cache }}
+      tags: ${{ inputs.tags }}
@@ -0,0 +1,20 @@
+@Library('vega-shared-library') _
+
+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'
+      }
+    }
+  }
+}
@@ -30,6 +30,10 @@ An application for the status of the Vega network. Showing block height and othe

 Hosting for static content being shared across apps, for example fonts.

+### [Multisig-signer](./apps/multisig-signer)
+
+The utility dApp for validators wishing to add or remove themselves as a signer of the multisig contract.
+
 # 🧱 Libraries in this repo

 ### [UI toolkit](./libs/ui-toolkit)
@@ -82,13 +86,14 @@ Run `yarn nx run <my-app>-e2e:e2e` to execute the e2e tests with [cypress](https

 Run `nx test my-app` to execute the unit tests with [Jest](https://jestjs.io), or `nx affected:test` to execute just unit tests affected by a change. You can also use `--watch` with these test to run jest in watch mode, see [Jest executor](https://nx.dev/packages/jest/executors/jest) for all CLI flags.

-#### Trading app E2E tests
+### Using wallet

 To run tests locally using your own wallets you can add the following environment variables to `cypress.json`

 1. Change `TRADING_TEST_VEGA_WALLET_NAME` to your Vega wallet name
 2. Add `TRADING_TEST_VEGA_WALLET_PASSPHRASE` as your wallet passphrase
 3. Add `ETH_WALLET_MNEMONIC` as your Ethereum wallet mnemonic
+4. Use [vegawallet-dummy](https://github.com/vegaprotocol/vegawallet-dummy) to avoid being prompted in CLI during test execution.

 ### Formatting

@@ -1,27 +1,9 @@
-# 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_URL=https://api.n11.testnet.vega.xyz/graphql
-NX_VEGA_ENV=TESTNET
-NX_VEGA_REST=https://api.n11.testnet.vega.xyz
-NX_VEGA_WALLET_URL=http://localhost:1789/api/v1
+# App configuration variables
+NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/stagnet3-network.json
+NX_VEGA_URL=https://api.n01.stagnet3.vega.xyz/graphql
+NX_VEGA_ENV=STAGNET3
+NX_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
+NX_VEGA_WALLET_URL=http://localhost:1789
+CYPRESS_VEGA_ENV=STAGNET3
@@ -3,14 +3,18 @@ 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.ts',
-    video: true,
+    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',
@@ -21,7 +25,7 @@ module.exports = defineConfig({
  env: {
    TRADING_TEST_VEGA_WALLET_NAME: 'UI_Trading_Test',
    ETHEREUM_PROVIDER_URL:
-      'https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8',
+      'https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8',
    VEGA_PUBLIC_KEY:
      '47836c253520d2661bf5bed6339c0de08fd02cf5d4db0efee3b4373f20c7d278',
    VEGA_PUBLIC_KEY2:
@@ -29,11 +33,14 @@ module.exports = defineConfig({
    TRUNCATED_VEGA_PUBLIC_KEY: '47836c…c7d278',
    TRUNCATED_VEGA_PUBLIC_KEY2: '1a18cd…0cf2e4',
    ETHEREUM_WALLET_ADDRESS: '0x265Cc6d39a1B53d0d92068443009eE7410807158',
-    ETHERSCAN_URL: 'https://ropsten.etherscan.io',
+    ETHERSCAN_URL: 'https://sepolia.etherscan.io',
    tsConfig: 'tsconfig.json',
    TAGS: 'not @todo and not @ignore and not @manual',
    TRADING_TEST_VEGA_WALLET_PASSPHRASE: '123',
    ETH_WALLET_MNEMONIC:
      'ugly gallery notice network true range brave clarify flat logic someone chunk',
+    grepTags: '@regression @smoke @slow',
+    grepFilterSpecs: true,
+    grepOmitFiltered: true,
  },
 });
@@ -0,0 +1 @@
+declare module '*.scss';
@@ -1,5 +1,17 @@
-describe('simple trading app', () => {
-  beforeEach(() => cy.visit('/'));
+import { aliasQuery } from '@vegaprotocol/cypress';
+import {
+  generateSimpleMarkets,
+  generateMarketsCandles,
+} from '../support/mocks/generate-markets';
+
+describe('simple trading app', { tags: '@smoke' }, () => {
+  beforeEach(() => {
+    cy.mockGQL((req) => {
+      aliasQuery(req, 'Markets', generateSimpleMarkets());
+      aliasQuery(req, 'MarketsCandles', generateMarketsCandles());
+    });
+    cy.visit('/');
+  });

  it('render', () => {
    cy.get('#root').should('exist');
@@ -1,4 +1,4 @@
-describe('console lite header', () => {
+describe('console lite header', { tags: '@smoke' }, () => {
  beforeEach(() => {
    window.localStorage.setItem('theme', 'dark');
    cy.visit('/');
@@ -1,14 +1,17 @@
 import { aliasQuery } from '@vegaprotocol/cypress';
+import type { MarketsQuery } from '@vegaprotocol/market-list';
 import {
  generateLongListMarkets,
  generateSimpleMarkets,
+  generateMarketsCandles,
 } from '../support/mocks/generate-markets';

-describe('market list', () => {
+describe('market list', { tags: '@smoke' }, () => {
  describe('simple url', () => {
    beforeEach(() => {
      cy.mockGQL((req) => {
-        aliasQuery(req, 'SimpleMarkets', generateSimpleMarkets());
+        aliasQuery(req, 'Markets', generateSimpleMarkets());
+        aliasQuery(req, 'MarketsCandles', generateMarketsCandles());
      });
      cy.visit('/markets');
    });
@@ -62,7 +65,8 @@ describe('market list', () => {
  describe('url params should select filters', () => {
    beforeEach(() => {
      cy.mockGQL((req) => {
-        aliasQuery(req, 'SimpleMarkets', generateSimpleMarkets());
+        aliasQuery(req, 'Markets', generateSimpleMarkets());
+        aliasQuery(req, 'MarketsCandles', generateMarketsCandles());
      });
    });

@@ -73,10 +77,11 @@ describe('market list', () => {

    it('last asset (if exists)', () => {
      cy.visit('/markets');
-      cy.wait('@SimpleMarkets').then((filters) => {
-        if (filters?.response?.body?.data?.markets?.length) {
+      cy.wait('@Markets').then((filters) => {
+        const data: MarketsQuery | undefined = filters?.response?.body?.data;
+        if (data?.marketsConnection?.edges.length) {
          const asset =
-            filters.response.body.data.markets[0].tradableInstrument.instrument
+            data?.marketsConnection?.edges[0].node.tradableInstrument.instrument
              .product.settlementAsset.symbol;
          cy.visit(`/markets/Suspended/Future/${asset}`);
          cy.getByTestId('market-assets-menu')
@@ -98,7 +103,8 @@ describe('market list', () => {
    it('handles 1000 markets', () => {
      cy.viewport(1440, 900);
      cy.mockGQL((req) => {
-        aliasQuery(req, 'SimpleMarkets', generateLongListMarkets(1000));
+        aliasQuery(req, 'Markets', generateLongListMarkets(1000));
+        aliasQuery(req, 'MarketsCandles', generateMarketsCandles());
      });
      performance.mark('start-1k');
      cy.visit('/markets');
@@ -1,6 +1,9 @@
-import { connectVegaWallet } from '../support/connect-wallet';
 import { aliasQuery } from '@vegaprotocol/cypress';
-import { generateSimpleMarkets } from '../support/mocks/generate-markets';
+import {
+  generateMarketsCandles,
+  generateMarketsData,
+  generateSimpleMarkets,
+} from '../support/mocks/generate-markets';
 import { generateDealTicket } from '../support/mocks/generate-deal-ticket';
 import { generateMarketTags } from '../support/mocks/generate-market-tags';
 import { generateMarketPositions } from '../support/mocks/generate-market-positions';
@@ -9,26 +12,32 @@ import { generatePartyBalance } from '../support/mocks/generate-party-balance';
 import { generatePartyMarketData } from '../support/mocks/generate-party-market-data';
 import { generateMarketMarkPrice } from '../support/mocks/generate-market-mark-price';
 import { generateMarketNames } from '../support/mocks/generate-market-names';
+import { generateMarketDepth } from '../support/mocks/generate-market-depth';
+import type { Market, MarketsQuery } from '@vegaprotocol/market-list';

-describe('market selector', () => {
-  let markets;
+describe('market selector', { tags: '@smoke' }, () => {
+  let markets: Market[];
  beforeEach(() => {
    cy.mockGQL((req) => {
-      aliasQuery(req, 'SimpleMarkets', generateSimpleMarkets());
-      aliasQuery(req, 'DealTicketQuery', generateDealTicket());
+      aliasQuery(req, 'Markets', generateSimpleMarkets());
+      aliasQuery(req, 'MarketsCandles', generateMarketsCandles());
+      aliasQuery(req, 'MarketsData', generateMarketsData());
+      aliasQuery(req, 'DealTicket', generateDealTicket());
      aliasQuery(req, 'MarketTags', generateMarketTags());
      aliasQuery(req, 'MarketPositions', generateMarketPositions());
      aliasQuery(req, 'EstimateOrder', generateEstimateOrder());
-      aliasQuery(req, 'PartyBalanceQuery', generatePartyBalance());
+      aliasQuery(req, 'PartyBalance', generatePartyBalance());
      aliasQuery(req, 'PartyMarketData', generatePartyMarketData());
      aliasQuery(req, 'MarketMarkPrice', generateMarketMarkPrice());
      aliasQuery(req, 'MarketNames', generateMarketNames());
+      aliasQuery(req, 'MarketDepth', generateMarketDepth());
    });

    cy.visit('/markets');
-    cy.wait('@SimpleMarkets').then((response) => {
-      if (response.response.body.data?.markets?.length) {
-        markets = response.response.body.data.markets;
+    cy.wait('@Markets').then((response) => {
+      const data: MarketsQuery | undefined = response?.response?.body?.data;
+      if (data?.marketsConnection?.edges.length) {
+        markets = data?.marketsConnection?.edges.map((edge) => edge.node);
      }
    });
  });
@@ -36,7 +45,7 @@ describe('market selector', () => {
  it('should be properly rendered', () => {
    if (markets?.length) {
      cy.visit(`/trading/${markets[0].id}`);
-      connectVegaWallet();
+      cy.connectVegaWallet();
      cy.get('input[placeholder="Search"]').should(
        'have.value',
        markets[0].tradableInstrument.instrument.name
@@ -60,7 +69,7 @@ describe('market selector', () => {
  it('typing should change list', () => {
    if (markets?.length) {
      cy.visit(`/trading/${markets[0].id}`);
-      connectVegaWallet();
+      cy.connectVegaWallet();
      cy.get('input[placeholder="Search"]').type('{backspace}');
      cy.getByTestId('market-pane')
        .children()
@@ -96,7 +105,7 @@ describe('market selector', () => {
  it.skip('keyboard navigation should work well', () => {
    if (markets?.length) {
      cy.visit(`/trading/${markets[0].id}`);
-      connectVegaWallet();
+      cy.connectVegaWallet();
      cy.get('input[placeholder="Search"]').type('{backspace}');
      cy.get('input[placeholder="Search"]').clear();
      cy.focused().realPress('ArrowDown');
@@ -118,7 +127,7 @@ describe('market selector', () => {
    if (markets?.length) {
      cy.viewport('iphone-xr');
      cy.visit(`/trading/${markets[0].id}`);
-      connectVegaWallet();
+      cy.connectVegaWallet();
      cy.get('[role="dialog"]').should('not.exist');
      cy.getByTestId('arrow-button').click();
      cy.get('[role="dialog"]').should('be.visible');
@@ -126,7 +135,7 @@ describe('market selector', () => {
      cy.getByTestId('market-pane')
        .children()
        .find('[role="button"]')
-        .should('have.length', 3);
+        .should('have.length', 9);
      cy.get('div[role="dialog"]').should('have.class', 'w-screen');
      cy.getByTestId('dialog-close').click();
      cy.get('input[placeholder="Search"]').should(
@@ -1,5 +1,10 @@
 import { aliasQuery } from '@vegaprotocol/cypress';
-import { generateSimpleMarkets } from '../support/mocks/generate-markets';
+import {
+  generateSimpleMarkets,
+  generateMarketsCandles,
+  generateMarketsData,
+  generateMarket,
+} from '../support/mocks/generate-markets';
 import { generateDealTicket } from '../support/mocks/generate-deal-ticket';
 import { generateMarketTags } from '../support/mocks/generate-market-tags';
 import { generateMarketPositions } from '../support/mocks/generate-market-positions';
@@ -8,26 +13,31 @@ import { generatePartyBalance } from '../support/mocks/generate-party-balance';
 import { generatePartyMarketData } from '../support/mocks/generate-party-market-data';
 import { generateMarketMarkPrice } from '../support/mocks/generate-market-mark-price';
 import { generateMarketDepth } from '../support/mocks/generate-market-depth';
-import { connectVegaWallet } from '../support/connect-wallet';
+import type { MarketsQuery, Market } from '@vegaprotocol/market-list';

-describe('Market trade', () => {
-  let markets;
+describe('Market trade', { tags: '@smoke' }, () => {
+  let markets: Market[];
  beforeEach(() => {
    cy.mockGQL((req) => {
+      aliasQuery(req, 'Markets', generateSimpleMarkets());
+      aliasQuery(req, 'MarketsCandles', generateMarketsCandles());
+      aliasQuery(req, 'MarketsData', generateMarketsData());
      aliasQuery(req, 'SimpleMarkets', generateSimpleMarkets());
-      aliasQuery(req, 'DealTicketQuery', generateDealTicket());
+      aliasQuery(req, 'DealTicket', generateDealTicket());
      aliasQuery(req, 'MarketTags', generateMarketTags());
      aliasQuery(req, 'MarketPositions', generateMarketPositions());
      aliasQuery(req, 'EstimateOrder', generateEstimateOrder());
-      aliasQuery(req, 'PartyBalanceQuery', generatePartyBalance());
+      aliasQuery(req, 'PartyBalance', generatePartyBalance());
      aliasQuery(req, 'PartyMarketData', generatePartyMarketData());
      aliasQuery(req, 'MarketMarkPrice', generateMarketMarkPrice());
      aliasQuery(req, 'MarketDepth', generateMarketDepth());
+      aliasQuery(req, 'Market', generateMarket());
    });
    cy.visit('/markets');
-    cy.wait('@SimpleMarkets').then((response) => {
-      if (response.response.body.data?.markets?.length) {
-        markets = response.response.body.data.markets;
+    cy.wait('@Markets').then((response) => {
+      const data: MarketsQuery | undefined = response?.response?.body?.data;
+      if (data?.marketsConnection?.edges.length) {
+        markets = data?.marketsConnection?.edges.map((edge) => edge.node);
      }
    });
  });
@@ -48,7 +58,7 @@ describe('Market trade', () => {
  it('side selector should work well', () => {
    if (markets?.length) {
      cy.visit(`/trading/${markets[0].id}`);
-      connectVegaWallet();
+      cy.connectVegaWallet();
      cy.get('#step-1-control [aria-label^="Selected value"]').should(
        'have.text',
        'Long'
@@ -67,7 +77,7 @@ describe('Market trade', () => {
    if (markets?.length) {
      cy.viewport('iphone-xr');
      cy.visit(`/trading/${markets[0].id}`);
-      connectVegaWallet();
+      cy.connectVegaWallet();
      cy.getByTestId('next-button').scrollIntoView().click();

      cy.get('button[aria-label="Open long position"]').should(
@@ -99,7 +109,7 @@ describe('Market trade', () => {
  it('size slider should work well', () => {
    if (markets?.length) {
      cy.visit(`/trading/${markets[1].id}`);
-      connectVegaWallet();
+      cy.connectVegaWallet();
      cy.get('#step-1-control [aria-label^="Selected value"]').click();
      cy.get('button[aria-label="Open short position"]').click();
      cy.get('#step-2-control').click();
@@ -121,7 +131,7 @@ describe('Market trade', () => {
  it('percentage selection should work well', () => {
    if (markets?.length) {
      cy.visit(`/trading/${markets[1].id}`);
-      connectVegaWallet();
+      cy.connectVegaWallet();
      cy.get('#step-1-control [aria-label^="Selected value"]').click();
      cy.get('button[aria-label="Open short position"]').click();
      cy.get('#step-2-control').click();
@@ -148,7 +158,7 @@ describe('Market trade', () => {
  it('size input should work well', () => {
    if (markets?.length) {
      cy.visit(`/trading/${markets[1].id}`);
-      connectVegaWallet();
+      cy.connectVegaWallet();
      cy.get('#step-1-control [aria-label^="Selected value"]').click();
      cy.get('button[aria-label="Open short position"]').click();
      cy.get('#step-2-control').click();
@@ -176,7 +186,7 @@ describe('Market trade', () => {
  it('slippage value should be displayed', () => {
    if (markets?.length) {
      cy.visit(`/trading/${markets[1].id}`);
-      connectVegaWallet();
+      cy.connectVegaWallet();
      cy.get('#step-1-control [aria-label^="Selected value"]').click();
      cy.get('button[aria-label="Open short position"]').click();
      cy.get('#step-2-control').click();
@@ -192,7 +202,7 @@ describe('Market trade', () => {
  it('allow slippage value to be adjusted', () => {
    if (markets?.length) {
      cy.visit(`/trading/${markets[1].id}`);
-      connectVegaWallet();
+      cy.connectVegaWallet();
      cy.get('#step-1-control [aria-label^="Selected value"]').click();
      cy.get('button[aria-label="Open short position"]').click();
      cy.get('#step-2-control').click();
@@ -220,7 +230,7 @@ describe('Market trade', () => {
  it('notional position size should be present', () => {
    if (markets?.length) {
      cy.visit(`/trading/${markets[1].id}`);
-      connectVegaWallet();
+      cy.connectVegaWallet();
      cy.get('#step-1-control [aria-label^="Selected value"]').click();
      cy.get('button[aria-label="Open short position"]').click();
      cy.get('#step-2-control').click();
@@ -247,7 +257,7 @@ describe('Market trade', () => {
  it('total fees should be displayed', () => {
    if (markets?.length) {
      cy.visit(`/trading/${markets[1].id}`);
-      connectVegaWallet();
+      cy.connectVegaWallet();
      cy.get('#step-1-control [aria-label^="Selected value"]').click();
      cy.get('button[aria-label="Open short position"]').click();
      cy.get('#step-2-control').click();
@@ -255,17 +265,14 @@ describe('Market trade', () => {
        .find('dt')
        .eq(3)
        .should('have.text', 'Est. Fees (tDAI)');
-      cy.get('#step-2-panel')
-        .find('dd')
-        .eq(3)
-        .should('have.text', '3.00000 (3.03%)');
+      cy.get('#step-2-panel').find('dd').eq(3).should('have.text', '3 (3.03%)');
    }
  });

  it('order review should display proper calculations', () => {
    if (markets?.length) {
      cy.visit(`/trading/${markets[0].id}`);
-      connectVegaWallet();
+      cy.connectVegaWallet();
      cy.get('#step-3-control').click();

      cy.getByTestId('review-trade')
@@ -280,18 +287,11 @@ describe('Market trade', () => {

      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.00000 (3.03%)');
+      cy.get('#step-3-panel').find('dd').eq(3).should('have.text', '3 (3.03%)');

      cy.get('#step-3-panel').find('dd').eq(4).should('have.text', ' - ');

-      cy.getByTestId('place-order').click();
-      cy.getByTestId('dialog-title').should(
-        'have.text',
-        'Confirm transaction in wallet'
-      );
+      cy.getByTestId('place-order').should('be.enabled').click();
    }
  });

@@ -299,7 +299,7 @@ describe('Market trade', () => {
    if (markets?.length) {
      cy.viewport('iphone-xr');
      cy.visit(`/trading/${markets[0].id}`);
-      connectVegaWallet();
+      cy.connectVegaWallet();
      cy.get('#step-3-control').click();

      // Start from the bottom tooltip to ensure the tooltip above
@@ -1,37 +1,181 @@
+import { aliasQuery } from '@vegaprotocol/cypress';
 import {
-  connectVegaWallet,
-  disconnectVegaWallet,
-} from '../support/connect-wallet';
-
-describe('Portfolio page', () => {
-  afterEach(() => {
-    disconnectVegaWallet();
-  });
+  generatePositions,
+  emptyPositions,
+  generateMargins,
+} from '../support/mocks/generate-positions';
+import { generateAccounts } from '../support/mocks/generate-accounts';
+import { generateAssets } from '../support/mocks/generate-assets';
+import { generateOrders } from '../support/mocks/generate-orders';
+import { generateFills } from '../support/mocks/generate-fills';
+import {
+  generateFillsMarkets,
+  generateMarketsData,
+  generatePositionsMarkets,
+} from '../support/mocks/generate-markets';

+describe('Portfolio page - wallet', { tags: '@smoke' }, () => {
  it('button for wallet connect should work', () => {
    cy.visit('/');
    cy.get('[href="/portfolio"]').eq(0).click();
    cy.getByTestId('trading-connect-wallet').should('be.visible');
-    connectVegaWallet();
+    cy.connectVegaWallet();
    cy.getByTestId('trading-connect-wallet').should('not.exist');
  });
+});
+
+describe('Portfolio page tabs', { tags: '@smoke' }, () => {
+  before(() => {
+    cy.mockGQL((req) => {
+      aliasQuery(req, 'Positions', generatePositions());
+      aliasQuery(req, 'Margins', generateMargins());
+      aliasQuery(req, 'Markets', generatePositionsMarkets());
+      aliasQuery(req, 'MarketsData', generateMarketsData());
+      aliasQuery(req, 'Accounts', generateAccounts());
+      aliasQuery(req, 'Assets', generateAssets());
+    });
+  });

  it('certain tabs should exist', () => {
    cy.visit('/portfolio');
-    connectVegaWallet();
-    cy.getByTestId('Assets').should('exist');
-    cy.getByTestId('tab-assets').should('exist');
+    cy.connectVegaWallet();

-    cy.getByTestId('Positions').click();
-    cy.getByTestId('tab-positions').should('exist');
+    cy.getByTestId('assets').click();
+    cy.location('pathname').should('eq', '/portfolio/assets');

-    cy.getByTestId('Orders').click();
-    cy.getByTestId('tab-orders').should('exist');
+    cy.getByTestId('positions').click();
+    cy.location('pathname').should('eq', '/portfolio/positions');

-    cy.getByTestId('Fills').click();
-    cy.getByTestId('tab-fills').should('exist');
+    cy.getByTestId('orders').click();
+    cy.location('pathname').should('eq', '/portfolio/orders');

-    cy.getByTestId('Deposits').click();
-    cy.getByTestId('tab-deposits').should('exist');
+    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', () => {
+    before(() => {
+      cy.mockGQL((req) => {
+        aliasQuery(req, 'Positions', generatePositions());
+        aliasQuery(req, 'Margins', generateMargins());
+        aliasQuery(req, 'Markets', generatePositionsMarkets());
+        aliasQuery(req, 'MarketsData', generateMarketsData());
+        aliasQuery(req, 'Accounts', generateAccounts());
+        aliasQuery(req, 'Assets', generateAssets());
+      });
+      cy.visit('/portfolio/assets');
+      cy.connectVegaWallet();
+    });
+
+    it('data should be properly rendered', () => {
+      cy.get('.ag-center-cols-container .ag-row').should('have.length', 3);
+      cy.get(
+        '.ag-center-cols-container [row-id="ACCOUNT_TYPE_GENERAL-asset-id-null"]'
+      )
+        .find('button')
+        .click();
+      cy.getByTestId('dialog-title').should(
+        'have.text',
+        'Asset details - tEURO'
+      );
+      cy.getByTestId('dialog-close').click();
+    });
+  });
+
+  describe('Positions view', () => {
+    beforeEach(() => {
+      cy.mockGQL((req) => {
+        aliasQuery(req, 'Positions', generatePositions());
+        aliasQuery(req, 'Accounts', generateAccounts());
+        aliasQuery(req, 'Margins', generateMargins());
+        aliasQuery(req, 'Markets', generatePositionsMarkets());
+        aliasQuery(req, 'MarketsData', generateMarketsData());
+        aliasQuery(req, 'Assets', generateAssets());
+      });
+      cy.visit('/portfolio/positions');
+      cy.connectVegaWallet();
+    });
+
+    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) => {
+        aliasQuery(req, 'Orders', generateOrders());
+        aliasQuery(req, 'Markets', generateFillsMarkets());
+      });
+      cy.visit('/portfolio/orders');
+      cy.connectVegaWallet();
+    });
+
+    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) => {
+        aliasQuery(req, 'Fills', generateFills());
+        aliasQuery(req, 'Markets', generateFillsMarkets());
+      });
+      cy.visit('/portfolio/fills');
+      cy.connectVegaWallet();
+    });
+
+    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) => {
+        aliasQuery(req, 'Positions', emptyPositions());
+        aliasQuery(req, 'Accounts', { party: null });
+        aliasQuery(req, 'Orders', { party: null });
+        aliasQuery(req, 'Fills', { party: null });
+        aliasQuery(req, 'Markets', {
+          marketsConnection: { edges: [], __typename: 'MarketConnection' },
+        });
+        aliasQuery(req, 'Assets', {
+          assetsConnection: { edges: null, __typename: 'AssetsConnection' },
+        });
+      });
+      cy.visit('/portfolio');
+      cy.connectVegaWallet();
+    });
+
+    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'
+      );
+    });
  });
 });
@@ -1,16 +0,0 @@
-export const connectVegaWallet = () => {
-  const form = 'rest-connector-form';
-  const walletName = Cypress.env('TRADING_TEST_VEGA_WALLET_NAME');
-  const walletPassphrase = Cypress.env('TRADING_TEST_VEGA_WALLET_PASSPHRASE');
-
-  cy.getByTestId('connect-vega-wallet').click();
-  cy.getByTestId('connectors-list').find('button').click();
-  cy.getByTestId(form).find('#wallet').click().type(walletName);
-  cy.getByTestId(form).find('#passphrase').click().type(walletPassphrase);
-  cy.getByTestId('rest-connector-form').find('button[type=submit]').click();
-};
-
-export const disconnectVegaWallet = () => {
-  cy.getByTestId('connect-vega-wallet').click();
-  cy.getByTestId('disconnect').click();
-};
@@ -0,0 +1,36 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+import '@vegaprotocol/cypress';
+import 'cypress-real-events/support';
+// Import commands.js using ES2015 syntax:
+import './commands';
+import registerCypressGrep from 'cypress-grep';
+import { aliasQuery } from '@vegaprotocol/cypress';
+registerCypressGrep();
+
+before(() => {
+  // Mock chainId fetch which happens on every page for wallet connection
+  cy.mockGQL((req) => {
+    aliasQuery(req, 'ChainId', {
+      statistics: {
+        __typename: 'Statistics',
+        chainId:
+          Cypress.env('VEGA_ENV').toLowerCase() ||
+          'vega-fairground-202210041151',
+      },
+    });
+  });
+});
@@ -1,4 +1,8 @@
-const protoCandles = [
+import type { Market } from '@vegaprotocol/market-list';
+import { Schema } from '@vegaprotocol/types';
+import type { SingleMarketFieldsFragment } from '@vegaprotocol/market-list';
+
+export const protoCandles = [
  { open: '9556163', close: '9587028', __typename: 'Candle' },
  {
    open: '9587028',
@@ -73,11 +77,29 @@ const protoCandles = [
  },
 ];

-export const protoMarket = {
-  id: 'first-btcusd-id',
-  state: 'STATE_ACTIVE',
+export const protoMarket: Market = {
+  id: 'ca7768f6de84bf86a21bbb6b0109d9659c81917b0e0339b2c262566c9b581a15',
+  tradingMode: Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS,
+  state: Schema.MarketState.STATE_ACTIVE,
+  decimalPlaces: 5,
+  positionDecimalPlaces: 0,
+  marketTimestamps: {
+    __typename: 'MarketTimestamps',
+    close: '',
+    open: '',
+  },
+  fees: {
+    __typename: 'Fees',
+    factors: {
+      __typename: 'FeeFactors',
+      makerFee: '',
+      infrastructureFee: '',
+      liquidityFee: '',
+    },
+  },
  tradableInstrument: {
    instrument: {
+      id: '',
      code: 'AAVEDAI.MF21',
      name: 'AAVEDAI Monthly (30 Jun 2022)',
      metadata: {
@@ -94,12 +116,32 @@ export const protoMarket = {
      product: {
        __typename: 'Future',
        quoteName: 'DAI',
-        settlementAsset: { symbol: 'tDAI', __typename: 'Asset' },
+        settlementAsset: { symbol: 'tDAI', __typename: 'Asset', decimals: 5 },
      },
      __typename: 'Instrument',
    },
    __typename: 'TradableInstrument',
  },
-  candles: protoCandles,
  __typename: 'Market',
 };
+
+export const singleMarket: SingleMarketFieldsFragment = {
+  ...protoMarket,
+  tradableInstrument: {
+    ...protoMarket.tradableInstrument,
+    instrument: {
+      ...protoMarket.tradableInstrument.instrument,
+      product: {
+        ...protoMarket.tradableInstrument.instrument.product,
+        settlementAsset: {
+          ...protoMarket.tradableInstrument.instrument.product.settlementAsset,
+          id: 'dai-id',
+          name: 'DAI Name',
+        },
+        dataSourceSpecForTradingTermination: {
+          id: 'oid',
+        },
+      },
+    },
+  },
+};
@@ -0,0 +1,77 @@
+import merge from 'lodash/merge';
+import type { AccountsQuery } from '@vegaprotocol/accounts';
+import { Schema as Types } from '@vegaprotocol/types';
+import type { PartialDeep } from 'type-fest';
+
+export const generateAccounts = (
+  override?: PartialDeep<AccountsQuery>
+): AccountsQuery => {
+  const defaultAccounts: AccountsQuery = {
+    party: {
+      __typename: 'Party',
+      id: Cypress.env('VEGA_PUBLIC_KEY'),
+      accounts: [
+        {
+          __typename: 'AccountBalance',
+          type: Types.AccountType.ACCOUNT_TYPE_GENERAL,
+          balance: '100000000',
+          market: null,
+          asset: {
+            __typename: 'Asset',
+            id: 'asset-id',
+          },
+        },
+        {
+          __typename: 'AccountBalance',
+          type: Types.AccountType.ACCOUNT_TYPE_GENERAL,
+          balance: '100000000',
+          market: {
+            id: '0604e8c918655474525e1a95367902266ade70d318c2c908f0cca6e3d11dcb13',
+            __typename: 'Market',
+          },
+          asset: {
+            __typename: 'Asset',
+            id: 'asset-id-2',
+          },
+        },
+        {
+          __typename: 'AccountBalance',
+          type: Types.AccountType.ACCOUNT_TYPE_MARGIN,
+          balance: '1000',
+          market: {
+            __typename: 'Market',
+            id: '5a4b0b9e9c0629f0315ec56fcb7bd444b0c6e4da5ec7677719d502626658a376',
+          },
+          asset: {
+            __typename: 'Asset',
+            id: 'asset-id',
+          },
+        },
+        {
+          __typename: 'AccountBalance',
+          type: Types.AccountType.ACCOUNT_TYPE_MARGIN,
+          balance: '1000',
+          market: {
+            __typename: 'Market',
+            id: 'c9f5acd348796011c075077e4d58d9b7f1689b7c1c8e030a5e886b83aa96923d',
+          },
+          asset: {
+            __typename: 'Asset',
+            id: 'asset-id-2',
+          },
+        },
+        {
+          __typename: 'AccountBalance',
+          type: Types.AccountType.ACCOUNT_TYPE_GENERAL,
+          balance: '100000000',
+          market: null,
+          asset: {
+            __typename: 'Asset',
+            id: 'asset-0',
+          },
+        },
+      ],
+    },
+  };
+  return merge(defaultAccounts, override);
+};
@@ -0,0 +1,120 @@
+import merge from 'lodash/merge';
+import type { AssetsQuery } from '@vegaprotocol/assets';
+import { Schema as Types } from '@vegaprotocol/types';
+import type { PartialDeep } from 'type-fest';
+
+export const generateAssets = (override?: PartialDeep<AssetsQuery>) => {
+  const defaultAssets: AssetsQuery = {
+    assetsConnection: {
+      edges: [
+        {
+          node: {
+            id: 'asset-id',
+            symbol: 'tEURO',
+            decimals: 5,
+            name: 'Euro',
+            source: {
+              __typename: 'ERC20',
+              contractAddress: '0x0158031158Bb4dF2AD02eAA31e8963E84EA978a4',
+              lifetimeLimit: '1',
+              withdrawThreshold: '2',
+            },
+            quantum: '',
+            status: Types.AssetStatus.STATUS_ENABLED,
+            infrastructureFeeAccount: {
+              balance: '1',
+              __typename: 'AccountBalance',
+            },
+            globalRewardPoolAccount: {
+              balance: '2',
+              __typename: 'AccountBalance',
+            },
+            takerFeeRewardAccount: {
+              balance: '3',
+              __typename: 'AccountBalance',
+            },
+            makerFeeRewardAccount: {
+              balance: '4',
+              __typename: 'AccountBalance',
+            },
+            lpFeeRewardAccount: {
+              balance: '5',
+              __typename: 'AccountBalance',
+            },
+            marketProposerRewardAccount: {
+              balance: '6',
+              __typename: 'AccountBalance',
+            },
+            __typename: 'Asset',
+          },
+        },
+        {
+          node: {
+            id: 'asset-id-2',
+            symbol: 'tDAI',
+            decimals: 5,
+            name: 'DAI',
+            source: {
+              __typename: 'ERC20',
+              contractAddress: '0x0158031158Bb4dF2AD02eAA31e8963E84EA978a4',
+              lifetimeLimit: '1',
+              withdrawThreshold: '2',
+            },
+            quantum: '',
+            status: Types.AssetStatus.STATUS_ENABLED,
+            infrastructureFeeAccount: {
+              balance: '1',
+              __typename: 'AccountBalance',
+            },
+            globalRewardPoolAccount: {
+              balance: '2',
+              __typename: 'AccountBalance',
+            },
+            takerFeeRewardAccount: {
+              balance: '3',
+              __typename: 'AccountBalance',
+            },
+            makerFeeRewardAccount: {
+              balance: '4',
+              __typename: 'AccountBalance',
+            },
+            lpFeeRewardAccount: {
+              balance: '5',
+              __typename: 'AccountBalance',
+            },
+            marketProposerRewardAccount: {
+              balance: '6',
+              __typename: 'AccountBalance',
+            },
+            __typename: 'Asset',
+          },
+        },
+        {
+          node: {
+            id: 'asset-0',
+            symbol: 'AST0',
+            decimals: 5,
+            name: 'Asto',
+            source: {
+              __typename: 'BuiltinAsset',
+              maxFaucetAmountMint: '3',
+            },
+            quantum: '',
+            status: Types.AssetStatus.STATUS_ENABLED,
+            infrastructureFeeAccount: {
+              balance: '0',
+              __typename: 'AccountBalance',
+            },
+            globalRewardPoolAccount: null,
+            takerFeeRewardAccount: null,
+            makerFeeRewardAccount: null,
+            lpFeeRewardAccount: null,
+            marketProposerRewardAccount: null,
+            __typename: 'Asset',
+          },
+        },
+      ],
+    },
+  };
+  return merge(defaultAssets, override);
+};
@@ -1,13 +1,21 @@
-export const generateDealTicket = () => {
-  return {
+import type { DealTicketQuery } from '@vegaprotocol/deal-ticket';
+import { Schema } from '@vegaprotocol/types';
+import merge from 'lodash/merge';
+import type { PartialDeep } from 'type-fest';
+
+export const generateDealTicket = (
+  override?: PartialDeep<DealTicketQuery>
+): DealTicketQuery => {
+  const defaultResult: DealTicketQuery = {
    market: {
-      id: 'first-btcusd-id',
+      id: 'ca7768f6de84bf86a21bbb6b0109d9659c81917b0e0339b2c262566c9b581a15',
      decimalPlaces: 5,
      positionDecimalPlaces: 0,
-      state: 'STATE_ACTIVE',
-      tradingMode: 'Continuous',
+      state: Schema.MarketState.STATE_ACTIVE,
+      tradingMode: Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS,
      tradableInstrument: {
        instrument: {
+          id: 'c9f5acd348796011c075077e4d58d9b7f1689b7c1c8e030a5e886b83aa96923d',
          name: 'AAVEDAI Monthly (30 Jun 2022)',
          product: {
            quoteName: 'DAI',
@@ -15,6 +23,7 @@ export const generateDealTicket = () => {
              id: '6d9d35f657589e40ddfb448b7ad4a7463b66efb307527fedd2aa7df1bbd5ea61',
              symbol: 'tDAI',
              name: 'tDAI TEST',
+              decimals: 5,
              __typename: 'Asset',
            },
            __typename: 'Future',
@@ -27,7 +36,17 @@ export const generateDealTicket = () => {
        lastTrade: { price: '9893006', __typename: 'Trade' },
        __typename: 'MarketDepth',
      },
+      fees: {
+        factors: {
+          makerFee: '0.0002',
+          infrastructureFee: '0.0005',
+          liquidityFee: '0.001',
+          __typename: 'FeeFactors',
+        },
+        __typename: 'Fees',
+      },
      __typename: 'Market',
    },
  };
+  return merge(defaultResult, override);
 };
@@ -0,0 +1,111 @@
+import type { FillsQuery, FillFieldsFragment } from '@vegaprotocol/fills';
+import { Schema } from '@vegaprotocol/types';
+import merge from 'lodash/merge';
+import type { PartialDeep } from 'type-fest';
+
+export const generateFills = (
+  override?: PartialDeep<FillsQuery>
+): FillsQuery => {
+  const fills: FillFieldsFragment[] = [
+    generateFill({
+      buyer: {
+        id: Cypress.env('VEGA_PUBLIC_KEY'),
+      },
+    }),
+    generateFill({
+      id: '1',
+      seller: {
+        id: Cypress.env('VEGA_PUBLIC_KEY'),
+      },
+      aggressor: Schema.Side.SIDE_SELL,
+      buyerFee: {
+        infrastructureFee: '5000',
+      },
+      market: {
+        id: 'market-1',
+      },
+    }),
+    generateFill({
+      id: '2',
+      seller: {
+        id: Cypress.env('VEGA_PUBLIC_KEY'),
+      },
+      aggressor: Schema.Side.SIDE_BUY,
+    }),
+    generateFill({
+      id: '3',
+      aggressor: Schema.Side.SIDE_SELL,
+      market: {
+        id: 'market-2',
+      },
+      buyer: {
+        id: Cypress.env('VEGA_PUBLIC_KEY'),
+      },
+    }),
+  ];
+
+  const defaultResult: FillsQuery = {
+    party: {
+      id: 'buyer-id',
+      tradesConnection: {
+        __typename: 'TradeConnection',
+        edges: fills.map((f) => {
+          return {
+            __typename: 'TradeEdge',
+            node: f,
+            cursor: '3',
+          };
+        }),
+        pageInfo: {
+          __typename: 'PageInfo',
+          startCursor: '1',
+          endCursor: '2',
+          hasNextPage: false,
+          hasPreviousPage: false,
+        },
+      },
+      __typename: 'Party',
+    },
+  };
+
+  return merge(defaultResult, override);
+};
+
+export const generateFill = (override?: PartialDeep<FillFieldsFragment>) => {
+  const defaultFill: FillFieldsFragment = {
+    __typename: 'Trade',
+    id: '0',
+    createdAt: new Date().toISOString(),
+    price: '10000000',
+    size: '50000',
+    buyOrder: 'buy-order',
+    sellOrder: 'sell-order',
+    aggressor: Schema.Side.SIDE_BUY,
+    buyer: {
+      __typename: 'Party',
+      id: 'buyer-id',
+    },
+    seller: {
+      __typename: 'Party',
+      id: 'seller-id',
+    },
+    buyerFee: {
+      __typename: 'TradeFee',
+      makerFee: '100',
+      infrastructureFee: '100',
+      liquidityFee: '100',
+    },
+    sellerFee: {
+      __typename: 'TradeFee',
+      makerFee: '200',
+      infrastructureFee: '200',
+      liquidityFee: '200',
+    },
+    market: {
+      __typename: 'Market',
+      id: 'market-0',
+    },
+  };
+
+  return merge(defaultFill, override);
+};
@@ -1,24 +1,15 @@
-export const generateMarketDepth = () => {
-  return {
+import merge from 'lodash/merge';
+import type { PartialDeep } from 'type-fest';
+// eslint-disable-next-line @nrwl/nx/enforce-module-boundaries
+import type { MarketDepthQuery } from '../../../../../libs/market-depth/src/lib/__generated___/MarketDepth';
+
+export const generateMarketDepth = (
+  override?: PartialDeep<MarketDepthQuery>
+): MarketDepthQuery => {
+  const defaultResult: MarketDepthQuery = {
    market: {
      id: 'a46bd7e5277087723b7ab835844dec3cef8b4445738101269624bf5537d5d423',
-      decimalPlaces: 5,
-      positionDecimalPlaces: 0,
-      data: {
-        staticMidPrice: '9893006',
-        marketTradingMode: 'TRADING_MODE_CONTINUOUS',
-        indicativeVolume: '0',
-        indicativePrice: '0',
-        bestStaticBidPrice: '9893006',
-        bestStaticOfferPrice: '9893006',
-        market: {
-          id: 'a46bd7e5277087723b7ab835844dec3cef8b4445738101269624bf5537d5d423',
-          __typename: 'Market',
-        },
-        __typename: 'MarketData',
-      },
      depth: {
-        lastTrade: { price: '9893006', __typename: 'Trade' },
        sell: [
          {
            price: '9893007',
@@ -215,4 +206,5 @@ export const generateMarketDepth = () => {
      __typename: 'Market',
    },
  };
+  return merge(defaultResult, override);
 };
@@ -21,7 +21,7 @@ export const generateMarketPositions = () => {
          },
          balance: '265329',
          market: {
-            id: 'first-btcusd-id',
+            id: 'ca7768f6de84bf86a21bbb6b0109d9659c81917b0e0339b2c262566c9b581a15',
            __typename: 'Market',
          },
        },
@@ -43,7 +43,7 @@ export const generateMarketPositions = () => {
            node: {
              openVolume: '12',
              market: {
-                id: 'first-btcusd-id',
+                id: 'ca7768f6de84bf86a21bbb6b0109d9659c81917b0e0339b2c262566c9b581a15',
                __typename: 'Market',
              },
              __typename: 'Position',
@@ -0,0 +1,143 @@
+import merge from 'lodash/merge';
+import type { PartialDeep } from 'type-fest';
+import type { OrdersQuery, OrderFieldsFragment } from '@vegaprotocol/orders';
+import { Schema } from '@vegaprotocol/types';
+
+export const generateOrders = (
+  override?: PartialDeep<OrdersQuery>
+): OrdersQuery => {
+  const orders: OrderFieldsFragment[] = [
+    {
+      __typename: 'Order',
+      id: '066468C06549101DAF7BC51099E1412A0067DC08C246B7D8013C9D0CBF1E8EE7',
+      market: {
+        __typename: 'Market',
+        id: 'market-0',
+      },
+      size: '10',
+      type: Schema.OrderType.TYPE_LIMIT,
+      status: Schema.OrderStatus.STATUS_FILLED,
+      side: Schema.Side.SIDE_BUY,
+      remaining: '0',
+      price: '20000000',
+      timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
+      createdAt: new Date(2020, 1, 30).toISOString(),
+      updatedAt: null,
+      expiresAt: null,
+      rejectionReason: null,
+      liquidityProvision: null,
+      peggedOrder: null,
+    },
+    {
+      __typename: 'Order',
+      id: '48DB6767E4E4E0F649C5A13ABFADE39F8451C27DA828DAF14B7A1E8E5EBDAD99',
+      market: {
+        __typename: 'Market',
+        id: 'market-1',
+      },
+      size: '1',
+      type: Schema.OrderType.TYPE_LIMIT,
+      status: Schema.OrderStatus.STATUS_FILLED,
+      side: Schema.Side.SIDE_BUY,
+      remaining: '0',
+      price: '100',
+      timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
+      createdAt: new Date(2020, 1, 29).toISOString(),
+      updatedAt: null,
+      expiresAt: null,
+      rejectionReason: null,
+      liquidityProvision: null,
+      peggedOrder: null,
+    },
+    {
+      __typename: 'Order',
+      id: '4e93702990712c41f6995fcbbd94f60bb372ad12d64dfa7d96d205c49f790336',
+      market: {
+        __typename: 'Market',
+        id: 'market-2',
+      },
+      size: '1',
+      type: Schema.OrderType.TYPE_LIMIT,
+      status: Schema.OrderStatus.STATUS_FILLED,
+      side: Schema.Side.SIDE_BUY,
+      remaining: '0',
+      price: '20000',
+      timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
+      createdAt: new Date(2020, 1, 28).toISOString(),
+      updatedAt: null,
+      expiresAt: null,
+      rejectionReason: null,
+      liquidityProvision: null,
+      peggedOrder: null,
+    },
+    {
+      __typename: 'Order',
+      id: '94737d2bafafa4bc3b80a56ef084ae52a983b91aa067c31e243c61a0f962a836',
+      market: {
+        __typename: 'Market',
+        id: 'market-3',
+      },
+      size: '1',
+      type: Schema.OrderType.TYPE_LIMIT,
+      status: Schema.OrderStatus.STATUS_ACTIVE,
+      side: Schema.Side.SIDE_BUY,
+      remaining: '0',
+      price: '100000',
+      timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
+      createdAt: new Date(2020, 1, 27).toISOString(),
+      updatedAt: null,
+      expiresAt: null,
+      rejectionReason: null,
+      liquidityProvision: null,
+      peggedOrder: null,
+    },
+    {
+      __typename: 'Order',
+      id: '94aead3ca92dc932efcb503631b03a410e2a5d4606cae6083e2406dc38e52f78',
+      market: {
+        __typename: 'Market',
+        id: 'market-3',
+      },
+      size: '10',
+      type: Schema.OrderType.TYPE_LIMIT,
+      status: Schema.OrderStatus.STATUS_PARTIALLY_FILLED,
+      side: Schema.Side.SIDE_SELL,
+      remaining: '3',
+      price: '100000',
+      timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
+      createdAt: new Date(2020, 1, 27).toISOString(),
+      updatedAt: null,
+      expiresAt: null,
+      liquidityProvision: null,
+      peggedOrder: null,
+      rejectionReason: null,
+    },
+  ];
+
+  const defaultResult: OrdersQuery = {
+    party: {
+      id: Cypress.env('VEGA_PUBLIC_KEY'),
+      ordersConnection: {
+        __typename: 'OrderConnection',
+        edges: orders.map((f) => {
+          return {
+            __typename: 'OrderEdge',
+            node: f,
+            cursor: f.id,
+          };
+        }),
+        pageInfo: {
+          __typename: 'PageInfo',
+          startCursor:
+            '066468C06549101DAF7BC51099E1412A0067DC08C246B7D8013C9D0CBF1E8EE7',
+          endCursor:
+            '94737d2bafafa4bc3b80a56ef084ae52a983b91aa067c31e243c61a0f962a836',
+          hasNextPage: false,
+          hasPreviousPage: false,
+        },
+      },
+      __typename: 'Party',
+    },
+  };
+  return merge(defaultResult, override);
+};
@@ -1,10 +1,17 @@
-export const generatePartyBalance = () => {
-  return {
+import merge from 'lodash/merge';
+import type { PartyBalanceQuery } from '@vegaprotocol/deal-ticket';
+import type { PartialDeep } from 'type-fest';
+import { Schema as Types } from '@vegaprotocol/types';
+
+export const generatePartyBalance = (
+  override?: PartialDeep<PartyBalanceQuery>
+): PartyBalanceQuery => {
+  const defaultResult: PartyBalanceQuery = {
    party: {
      accounts: [
        {
          balance: '88474051',
-          type: 'ACCOUNT_TYPE_GENERAL',
+          type: Types.AccountType.ACCOUNT_TYPE_GENERAL,
          asset: {
            id: '6d9d35f657589e40ddfb448b7ad4a7463b66efb307527fedd2aa7df1bbd5ea61',
            symbol: 'tDAI',
@@ -12,11 +19,11 @@ export const generatePartyBalance = () => {
            decimals: 5,
            __typename: 'Asset',
          },
-          __typename: 'Account',
+          __typename: 'AccountBalance',
        },
        {
          balance: '100000000',
-          type: 'ACCOUNT_TYPE_GENERAL',
+          type: Types.AccountType.ACCOUNT_TYPE_GENERAL,
          asset: {
            id: '8b52d4a3a4b0ffe733cddbc2b67be273816cfeb6ca4c8b339bac03ffba08e4e4',
            symbol: 'tEURO',
@@ -24,11 +31,11 @@ export const generatePartyBalance = () => {
            decimals: 5,
            __typename: 'Asset',
          },
-          __typename: 'Account',
+          __typename: 'AccountBalance',
        },
        {
          balance: '3412867',
-          type: 'ACCOUNT_TYPE_GENERAL',
+          type: Types.AccountType.ACCOUNT_TYPE_GENERAL,
          asset: {
            id: '6d9d35f657589e40ddfb448b7ad4a7463b66efb307527fedd2aa7df1bbd5ea61',
            symbol: 'tDAI',
@@ -36,11 +43,11 @@ export const generatePartyBalance = () => {
            decimals: 5,
            __typename: 'Asset',
          },
-          __typename: 'Account',
+          __typename: 'AccountBalance',
        },
        {
          balance: '70007',
-          type: 'ACCOUNT_TYPE_GENERAL',
+          type: Types.AccountType.ACCOUNT_TYPE_GENERAL,
          asset: {
            id: '6d9d35f657589e40ddfb448b7ad4a7463b66efb307527fedd2aa7df1bbd5ea61',
            symbol: 'tDAI',
@@ -48,10 +55,12 @@ export const generatePartyBalance = () => {
            decimals: 5,
            __typename: 'Asset',
          },
-          __typename: 'Account',
+          __typename: 'AccountBalance',
        },
      ],
      __typename: 'Party',
    },
  };
+
+  return merge(defaultResult, override);
 };
@@ -1,14 +1,28 @@
+import { Schema as Types } from '@vegaprotocol/types';
+
 export const generatePartyMarketData = () => {
  return {
    party: {
      id: '2e1ef32e5804e14232406aebaad719087d326afa5c648b7824d0823d8a46c8d1',
      accounts: [
        {
-          type: 'General',
+          type: Types.AccountType.ACCOUNT_TYPE_GENERAL,
          balance: '1200000',
          asset: { id: 'fBTC', decimals: 5, __typename: 'Asset' },
          market: null,
-          __typename: 'Account',
+          __typename: 'AccountBalance',
+        },
+        {
+          __typename: 'AccountBalance',
+          type: Types.AccountType.ACCOUNT_TYPE_GENERAL,
+          balance: '0.000000001',
+          asset: {
+            __typename: 'Asset',
+            id: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c',
+            symbol: 'tUSD',
+            name: 'usd',
+            decimals: 0,
+          },
        },
      ],
      marginsConnection: { edges: null, __typename: 'MarginConnection' },
@@ -0,0 +1,145 @@
+import merge from 'lodash/merge';
+import type { PartialDeep } from 'type-fest';
+import type {
+  PositionsQuery,
+  PositionFieldsFragment,
+  MarginsQuery,
+} from '@vegaprotocol/positions';
+
+export const generatePositions = (
+  override?: PartialDeep<PositionsQuery>
+): PositionsQuery => {
+  const nodes: PositionFieldsFragment[] = [
+    {
+      __typename: 'Position',
+      realisedPNL: '0',
+      openVolume: '6',
+      unrealisedPNL: '895000',
+      averageEntryPrice: '1129935',
+      updatedAt: '2022-07-28T15:09:34.441143Z',
+      market: {
+        id: 'c9f5acd348796011c075077e4d58d9b7f1689b7c1c8e030a5e886b83aa96923d',
+        __typename: 'Market',
+      },
+    },
+    {
+      __typename: 'Position',
+      realisedPNL: '100',
+      openVolume: '20',
+      unrealisedPNL: '895000',
+      averageEntryPrice: '8509338',
+      updatedAt: '2022-07-28T15:09:34.441143Z',
+      market: {
+        id: '0604e8c918655474525e1a95367902266ade70d318c2c908f0cca6e3d11dcb13',
+        __typename: 'Market',
+      },
+    },
+    {
+      realisedPNL: '0',
+      openVolume: '1',
+      unrealisedPNL: '-22519',
+      averageEntryPrice: '84400088',
+      updatedAt: '2022-07-28T14:53:54.725477Z',
+      market: {
+        id: '5a4b0b9e9c0629f0315ec56fcb7bd444b0c6e4da5ec7677719d502626658a376',
+        __typename: 'Market',
+      },
+      __typename: 'Position',
+    },
+  ];
+
+  const defaultResult: PositionsQuery = {
+    party: {
+      __typename: 'Party',
+      id: Cypress.env('VEGA_PUBLIC_KEY'),
+      positionsConnection: {
+        __typename: 'PositionConnection',
+        edges: nodes.map((node) => {
+          return {
+            __typename: 'PositionEdge',
+            node,
+          };
+        }),
+      },
+    },
+  };
+
+  return merge(defaultResult, override);
+};
+
+export const emptyPositions = (): PositionsQuery => {
+  return {
+    party: {
+      id: Cypress.env('VEGA_PUBLIC_KEY'),
+      positionsConnection: { edges: null, __typename: 'PositionConnection' },
+      __typename: 'Party',
+    },
+  };
+};
+
+export const generateMargins = (): MarginsQuery => {
+  return {
+    party: {
+      id: Cypress.env('VEGA_PUBLIC_KEY'),
+      marginsConnection: {
+        edges: [
+          {
+            node: {
+              __typename: 'MarginLevels',
+              maintenanceLevel: '0',
+              searchLevel: '0',
+              initialLevel: '0',
+              collateralReleaseLevel: '0',
+              market: {
+                __typename: 'Market',
+                id: 'c9f5acd348796011c075077e4d58d9b7f1689b7c1c8e030a5e886b83aa96923d',
+              },
+              asset: {
+                __typename: 'Asset',
+                id: 'tDAI-id',
+              },
+            },
+          },
+          {
+            node: {
+              __typename: 'MarginLevels',
+              maintenanceLevel: '0',
+              searchLevel: '0',
+              initialLevel: '0',
+              collateralReleaseLevel: '0',
+              market: {
+                __typename: 'Market',
+                id: '0604e8c918655474525e1a95367902266ade70d318c2c908f0cca6e3d11dcb13',
+              },
+              asset: {
+                __typename: 'Asset',
+                id: 'tDAI-id',
+              },
+            },
+            __typename: 'MarginEdge',
+          },
+          {
+            node: {
+              __typename: 'MarginLevels',
+              maintenanceLevel: '0',
+              searchLevel: '0',
+              initialLevel: '0',
+              collateralReleaseLevel: '0',
+              market: {
+                __typename: 'Market',
+                id: '5a4b0b9e9c0629f0315ec56fcb7bd444b0c6e4da5ec7677719d502626658a376',
+              },
+              asset: {
+                __typename: 'Asset',
+                id: 'tEURO-id',
+              },
+            },
+            __typename: 'MarginEdge',
+          },
+        ],
+        __typename: 'MarginConnection',
+      },
+      __typename: 'Party',
+    },
+  };
+};
@@ -1,12 +1,13 @@
 {
  "extends": "../../tsconfig.base.json",
  "compilerOptions": {
+    "strict": true,
    "jsx": "react-jsx",
    "sourceMap": false,
    "allowSyntheticDefaultImports": true,
    "outDir": "../../dist/out-tsc",
    "allowJs": true,
-    "types": ["cypress", "node", "cypress-real-events"]
+    "types": ["cypress", "node", "cypress-real-events", "cypress-grep"]
  },
-  "include": ["src/**/*.ts", "src/**/*.js"]
+  "include": ["src/**/*.ts", "src/**/*.js", "./declaration.d.ts"]
 }
@@ -17,11 +17,11 @@ 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/testnet-network.json"
-NX_VEGA_ENV = 'TESTNET'
-NX_VEGA_URL="https://api.n11.testnet.vega.xyz/graphql"
-NX_VEGA_WALLET_URL=http://localhost:1789/api/v1
-NX_ETHEREUM_PROVIDER_URL=https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
-NX_ETHERSCAN_URL=https://ropsten.etherscan.io
+NX_VEGA_CONFIG_URL="https://static.vega.xyz/assets/stagnet3-network.json"
+NX_VEGA_ENV=STAGNET3
+NX_VEGA_URL="https://api.n01.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
@@ -1,4 +1,3 @@
 # App configuration variables
 NX_VEGA_URL=http://localhost:3028/query
 NX_VEGA_ENV=LOCAL
-NX_VEGA_REST=http://localhost:3029
@@ -2,8 +2,7 @@
 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_REST=https://api.n04.d.vega.xyz
 NX_VEGA_NETWORKS={\"MAINNET\":\"https://alpha.console.vega.xyz\"}
-NX_ETHEREUM_PROVIDER_URL=https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
-NX_ETHERSCAN_URL=https://ropsten.etherscan.io
+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
@@ -1,8 +1,7 @@
 # App configuration variables
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/mainnet-network.json
-NX_VEGA_URL=https://api.token.vega.xyz/query
+NX_VEGA_URL=https://api.vega.xyz/query
 NX_VEGA_ENV=MAINNET
-NX_VEGA_REST=https://api.token.vega.xyz
 NX_VEGA_NETWORKS='{\"MAINNET\":\"https://alpha.console.vega.xyz\"}'
 NX_ETHEREUM_PROVIDER_URL=https://mainnet.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://etherscan.io
@@ -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
@@ -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
@@ -2,7 +2,6 @@
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/stagnet3-network.json
 NX_VEGA_URL=https://api.n01.stagnet3.vega.xyz/graphql
 NX_VEGA_ENV=STAGNET3
-NX_VEGA_REST=https://api.n01.stagnet3.vega.xyz
-NX_ETHEREUM_PROVIDER_URL=https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
-NX_ETHERSCAN_URL=https://ropsten.etherscan.io
-NX_VEGA_EXPLORER_URL=https://staging2.explorer.vega.xyz
+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
@@ -1,9 +1,8 @@
 # App configuration variables
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/testnet-network.json
-NX_VEGA_URL=https://api.n11.testnet.vega.xyz/graphql
+NX_VEGA_URL=https://api.n12.testnet.vega.xyz/graphql
 NX_VEGA_ENV=TESTNET
-NX_VEGA_REST=https://api.n11.testnet.vega.xyz
 NX_VEGA_NETWORKS='{\"MAINNET\":\"https://alpha.console.vega.xyz\"}'
-NX_ETHEREUM_PROVIDER_URL=https://ropsten.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
-NX_ETHERSCAN_URL=https://ropsten.etherscan.io
+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
@@ -77,6 +77,13 @@
          "nx build console-lite"
        ]
      }
+    },
+    "build-spec": {
+      "executor": "@nrwl/workspace:run-commands",
+      "outputs": [],
+      "options": {
+        "command": "yarn tsc --project ./apps/console-lite/tsconfig.spec.json"
+      }
    }
  },
  "tags": []
@@ -1,4 +1,5 @@
 import '@testing-library/jest-dom';
+import 'jest-canvas-mock';
 import { defaultFallbackInView } from 'react-intersection-observer';
 import ResizeObserver from 'resize-observer-polyfill';

@@ -38,3 +39,5 @@ Object.defineProperty(window, 'matchMedia', {
    dispatchEvent: jest.fn(),
  })),
 });
+
+jest.setTimeout(30000);
@@ -1,6 +1,5 @@
 import { useEffect } from 'react';
 import { useLocation } from 'react-router-dom';
-import { createClient } from './lib/apollo-client';
 import { ThemeContext } from '@vegaprotocol/react-helpers';
 import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 import { EnvironmentProvider, NetworkLoader } from '@vegaprotocol/environment';
@@ -16,6 +15,7 @@ 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 [theme, toggleTheme] = useThemeSwitcher();
@@ -30,21 +30,41 @@ function App() {
    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>
      <ThemeContext.Provider value={theme}>
-        <NetworkLoader createClient={createClient}>
+        <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}
-                    dialogOpen={vegaWalletDialog.connect}
-                    setDialogOpen={vegaWalletDialog.setConnect}
-                  />
+                  <VegaConnectDialog connectors={Connectors} />
                  <VegaManageDialog
                    dialogOpen={vegaWalletDialog.manage}
                    setDialogOpen={vegaWalletDialog.setManage}
@@ -0,0 +1,112 @@
+import React, {
+  forwardRef,
+  useCallback,
+  useContext,
+  useMemo,
+  useRef,
+} from 'react';
+import classNames from 'classnames';
+import type { AgGridReact } from 'ag-grid-react';
+import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
+import { ThemeContext, useScreenDimensions } 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 = useContext(ThemeContext);
+  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;
@@ -0,0 +1 @@
+export { default as ConsoleLiteGrid } from './console-lite-grid';
@@ -1,65 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-import { AccountType } from "@vegaprotocol/types";
-
-// ====================================================
-// GraphQL query operation: PartyBalanceQuery
-// ====================================================
-
-export interface PartyBalanceQuery_party_accounts_asset {
-  __typename: "Asset";
-  /**
-   * The ID of the asset
-   */
-  id: string;
-  /**
-   * The symbol of the asset (e.g: GBP)
-   */
-  symbol: string;
-  /**
-   * The full name of the asset (e.g: Great British Pound)
-   */
-  name: string;
-  /**
-   * The precision of the asset. Should match the decimal precision of the asset on its native chain, e.g: for ERC20 assets, it is often 18
-   */
-  decimals: number;
-}
-
-export interface PartyBalanceQuery_party_accounts {
-  __typename: "Account";
-  /**
-   * Account type (General, Margin, etc)
-   */
-  type: AccountType;
-  /**
-   * Balance as string - current account balance (approx. as balances can be updated several times per second)
-   */
-  balance: string;
-  /**
-   * Asset, the 'currency'
-   */
-  asset: PartyBalanceQuery_party_accounts_asset;
-}
-
-export interface PartyBalanceQuery_party {
-  __typename: "Party";
-  /**
-   * Collateral accounts relating to a party
-   */
-  accounts: PartyBalanceQuery_party_accounts[] | null;
-}
-
-export interface PartyBalanceQuery {
-  /**
-   * An entity that is trading on the Vega network
-   */
-  party: PartyBalanceQuery_party | null;
-}
-
-export interface PartyBalanceQueryVariables {
-  partyId: string;
-}
@@ -8,7 +8,7 @@ export type PartyBalanceQueryQueryVariables = Types.Exact<{
 }>;


-export type PartyBalanceQueryQuery = { __typename?: 'Query', party?: { __typename?: 'Party', accounts?: Array<{ __typename?: 'Account', type: Types.AccountType, balance: string, asset: { __typename?: 'Asset', id: string, symbol: string, name: string, decimals: number } }> | null } | null };
+export type PartyBalanceQueryQuery = { __typename?: 'Query', party?: { __typename?: 'Party', accounts?: Array<{ __typename?: 'AccountBalance', type: Types.AccountType, balance: string, asset: { __typename?: 'Asset', id: string, symbol: string, name: string, decimals: number } }> | null } | null };


 export const PartyBalanceQueryDocument = gql`
@@ -1,24 +1,25 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 import type {
-  PartyBalanceQuery_party_accounts,
-  PartyBalanceQuery_party_accounts_asset,
-} from './__generated__/PartyBalanceQuery';
+  AccountFragment,
+  DealTicketMarketFragment,
+} from '@vegaprotocol/deal-ticket';
 import { DealTicketBalance } from './deal-ticket-balance';
-import { AccountType } from '@vegaprotocol/types';
+import { Schema } from '@vegaprotocol/types';

-const tDAI: PartyBalanceQuery_party_accounts_asset = {
-  __typename: 'Asset',
-  id: '1',
-  symbol: 'tDAI',
-  name: 'TDAI',
-  decimals: 2,
-};
-
-const accounts: PartyBalanceQuery_party_accounts[] = [
+const tDAI: DealTicketMarketFragment['tradableInstrument']['instrument']['product']['settlementAsset'] =
  {
-    __typename: 'Account',
-    type: AccountType.ACCOUNT_TYPE_GENERAL,
+    __typename: 'Asset',
+    id: '1',
+    symbol: 'tDAI',
+    name: 'TDAI',
+    decimals: 2,
+  };
+
+const accounts: AccountFragment[] = [
+  {
+    __typename: 'AccountBalance',
+    type: Schema.AccountType.ACCOUNT_TYPE_GENERAL,
    balance: '1000000',
    asset: tDAI,
  },
@@ -1,14 +1,15 @@
-import * as React from 'react';
 import classNames from 'classnames';
-import type { DealTicketQuery_market_tradableInstrument_instrument_product_settlementAsset } from '@vegaprotocol/deal-ticket';
-import type { PartyBalanceQuery_party_accounts } from './__generated__/PartyBalanceQuery';
-import { useSettlementAccount } from '../../hooks/use-settlement-account';
 import { addDecimalsFormatNumber, t } from '@vegaprotocol/react-helpers';
-import { AccountType } from '@vegaprotocol/types';
+import { Schema } from '@vegaprotocol/types';
+import type {
+  AccountFragment,
+  DealTicketMarketFragment,
+} from '@vegaprotocol/deal-ticket';
+import { useSettlementAccount } from '@vegaprotocol/deal-ticket';

 interface DealTicketBalanceProps {
-  settlementAsset: DealTicketQuery_market_tradableInstrument_instrument_product_settlementAsset;
-  accounts: PartyBalanceQuery_party_accounts[];
+  settlementAsset: DealTicketMarketFragment['tradableInstrument']['instrument']['product']['settlementAsset'];
+  accounts: AccountFragment[];
  isWalletConnected: boolean;
  className?: string;
 }
@@ -24,9 +25,9 @@ export const DealTicketBalance = ({
  const settlementAccount = useSettlementAccount(
    settlementAssetId,
    accounts,
-    AccountType.ACCOUNT_TYPE_GENERAL
+    Schema.AccountType.ACCOUNT_TYPE_GENERAL
  );
-  const formatedNumber =
+  const formattedNumber =
    settlementAccount?.balance &&
    settlementAccount.asset.decimals &&
    addDecimalsFormatNumber(
@@ -37,7 +38,7 @@ export const DealTicketBalance = ({
  const balance = (
    <p className="text-blue text-lg font-semibold">
      {settlementAccount
-        ? t(`${formatedNumber}`)
+        ? t(`${formattedNumber}`)
        : `No ${settlementAssetSymbol} left to trade`}
    </p>
  );
@@ -1,9 +1,8 @@
-import * as React from 'react';
 import { useParams } from 'react-router-dom';
-import { gql, useQuery } from '@apollo/client';
 import {
  DealTicketManager,
  DealTicketContainer as Container,
+  usePartyBalanceQuery,
 } from '@vegaprotocol/deal-ticket';
 import { Loader } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/react-helpers';
@@ -11,47 +10,30 @@ import { useVegaWallet } from '@vegaprotocol/wallet';
 import { DealTicketSteps } from './deal-ticket-steps';
 import { DealTicketBalance } from './deal-ticket-balance';
 import Baubles from './baubles-decor';
-import type { PartyBalanceQuery } from './__generated__/PartyBalanceQuery';
 import ConnectWallet from '../wallet-connector';

 const tempEmptyText = (
  <p>{t('Please select a market from the markets page')}</p>
 );

-const PARTY_BALANCE_QUERY = gql`
-  query PartyBalanceQuery($partyId: ID!) {
-    party(id: $partyId) {
-      accounts {
-        type
-        balance
-        asset {
-          id
-          symbol
-          name
-          decimals
-        }
-      }
-    }
-  }
-`;
-
 export const DealTicketContainer = () => {
  const { marketId } = useParams<{ marketId: string }>();
-  const { keypair } = useVegaWallet();
+  const { pubKey } = useVegaWallet();

-  const { data: partyData, loading } = useQuery<PartyBalanceQuery>(
-    PARTY_BALANCE_QUERY,
-    {
-      variables: { partyId: keypair?.pub },
-      skip: !keypair?.pub,
-    }
-  );
+  const { data: partyData, loading } = usePartyBalanceQuery({
+    variables: { partyId: pubKey || '' },
+    skip: !pubKey,
+  });

  const loader = <Loader />;

  const container = marketId ? (
    <Container marketId={marketId}>
      {(data) => {
+        if (!data.market) {
+          return null as unknown as JSX.Element;
+        }
+
        const balance = (
          <DealTicketBalance
            className="mb-4"
@@ -59,14 +41,14 @@ export const DealTicketContainer = () => {
              data.market.tradableInstrument.instrument.product?.settlementAsset
            }
            accounts={partyData?.party?.accounts || []}
-            isWalletConnected={!!keypair?.pub}
+            isWalletConnected={!!pubKey}
          />
        );

        return (
          <DealTicketManager market={data.market}>
            {loading ? loader : balance}
-            <DealTicketSteps market={data.market} partyData={partyData} />
+            <DealTicketSteps market={data.market} />
          </DealTicketManager>
        );
      }}
@@ -78,7 +60,7 @@ export const DealTicketContainer = () => {
  return (
    <section className="flex p-4 md:p-6">
      <section className="w-full md:w-1/2 md:min-w-[500px]">
-        {keypair ? container : <ConnectWallet />}
+        {pubKey ? container : <ConnectWallet />}
      </section>
      <Baubles />
    </section>
@@ -1,5 +1,4 @@
-import React from 'react';
-import { DealTicketEstimates } from './deal-ticket-estimates';
+import { DealTicketEstimates } from '@vegaprotocol/deal-ticket';
 import { DealTicketSizeInput } from './deal-ticket-size-input';

 interface DealTicketSizeProps {
@@ -1,11 +1,19 @@
 import React, { useCallback, useState } from 'react';
 import { t } from '@vegaprotocol/react-helpers';
-import * as constants from './constants';
-import { TrafficLight } from '../traffic-light';
-import { Dialog, Icon, Intent, Tooltip } from '@vegaprotocol/ui-toolkit';
+import {
+  Dialog,
+  Icon,
+  Intent,
+  Tooltip,
+  TrafficLight,
+} from '@vegaprotocol/ui-toolkit';
 import { InputSetter } from '../../components/input-setter';
 import { IconNames } from '@blueprintjs/icons';
-import { DataTitle, ValueTooltipRow } from './deal-ticket-estimates';
+import {
+  DataTitle,
+  EST_SLIPPAGE,
+  ValueTooltipRow,
+} from '@vegaprotocol/deal-ticket';

 interface DealTicketSlippageProps {
  step?: number;
@@ -40,12 +48,12 @@ export const DealTicketSlippage = ({
  const formLabel = (
    <label className="flex items-center mb-1">
      <span className="mr-1">{t('Adjust slippage tolerance')}</span>
-      <Tooltip align="center" description={constants.EST_SLIPPAGE}>
+      <Tooltip align="center" description={EST_SLIPPAGE}>
        <div className="cursor-help" tabIndex={-1}>
          <Icon
            name={IconNames.ISSUE}
            className="block rotate-180"
-            ariaLabel={constants.EST_SLIPPAGE}
+            ariaLabel={EST_SLIPPAGE}
          />
        </div>
      </Tooltip>
@@ -83,7 +91,7 @@ export const DealTicketSlippage = ({
          <DataTitle>{t('Est. Price Impact / Slippage')}</DataTitle>
          <div className="flex">
            <div className="mr-1">
-              <ValueTooltipRow description={constants.EST_SLIPPAGE}>
+              <ValueTooltipRow description={EST_SLIPPAGE}>
                <TrafficLight value={value} q1={1} q2={5}>
                  {value}%
                </TrafficLight>
@@ -1,50 +1,54 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+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 type { DealTicketQuery_market } from '@vegaprotocol/deal-ticket';
-import { InputError } from '@vegaprotocol/ui-toolkit';
-import { BigNumber } from 'bignumber.js';
-import { MarketSelector } from '@vegaprotocol/deal-ticket';
-import type { Order } from '@vegaprotocol/orders';
-import { useVegaWallet, VegaTxStatus } from '@vegaprotocol/wallet';
+import type { DealTicketMarketFragment } from '@vegaprotocol/deal-ticket';
 import {
-  t,
-  addDecimalsFormatNumber,
-  toDecimal,
-  removeDecimal,
-} from '@vegaprotocol/react-helpers';
+  useOrderCloseOut,
+  useOrderMargin,
+  usePartyBalanceQuery,
+  useMaximumPositionSize,
+  useCalculateSlippage,
+} from '@vegaprotocol/deal-ticket';
 import {
  getDefaultOrder,
  useOrderValidation,
+  validateSize,
+} 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,
+  addDecimalsNormalizeNumber,
+  addDecimal,
+  formatNumber,
+} from '@vegaprotocol/react-helpers';
+import {
  useOrderSubmit,
  getOrderDialogTitle,
  getOrderDialogIntent,
  getOrderDialogIcon,
  OrderFeedback,
-  validateSize,
 } from '@vegaprotocol/orders';
 import { DealTicketSize } from './deal-ticket-size';
 import MarketNameRenderer from '../simple-market-list/simple-market-renderer';
 import SideSelector, { SIDE_NAMES } from './side-selector';
 import ReviewTrade from './review-trade';
-import type { PartyBalanceQuery } from './__generated__/PartyBalanceQuery';
-import useOrderCloseOut from '../../hooks/use-order-closeout';
-import useOrderMargin from '../../hooks/use-order-margin';
-import useMaximumPositionSize from '../../hooks/use-maximum-position-size';
-import useCalculateSlippage from '../../hooks/use-calculate-slippage';
-import { Side, OrderType } from '@vegaprotocol/types';
+import { Schema } from '@vegaprotocol/types';
 import { DealTicketSlippage } from './deal-ticket-slippage';

 interface DealTicketMarketProps {
-  market: DealTicketQuery_market;
-  partyData?: PartyBalanceQuery;
+  market: DealTicketMarketFragment;
 }

-export const DealTicketSteps = ({
-  market,
-  partyData,
-}: DealTicketMarketProps) => {
+export const DealTicketSteps = ({ market }: DealTicketMarketProps) => {
  const navigate = useNavigate();
  const setMarket = useCallback(
    (marketId: string) => {
@@ -59,35 +63,37 @@ export const DealTicketSteps = ({
    watch,
    setValue,
    formState: { errors },
-  } = useForm<Order>({
+  } = useForm<OrderSubmissionBody['orderSubmission']>({
    mode: 'onChange',
    defaultValues: getDefaultOrder(market),
  });

  const emptyString = ' - ';
  const step = toDecimal(market.positionDecimalPlaces);
-  const orderType = watch('type');
-  const orderTimeInForce = watch('timeInForce');
-  const orderSide = watch('side');
-  const orderSize = watch('size');
  const order = watch();
-  const { message: invalidText, isDisabled } = useOrderValidation({
-    market,
-    orderType,
-    orderTimeInForce,
-    fieldErrors: errors,
-  });
-  const { submit, transaction, finalizedOrder, Dialog } = useOrderSubmit();
-  const { keypair } = useVegaWallet();
+  const { pubKey } = useVegaWallet();
  const estMargin = useOrderMargin({
    order,
    market,
-    partyId: keypair?.pub || '',
+    partyId: pubKey || '',
+  });
+  const { message: invalidText, isDisabled } = useOrderValidation({
+    market,
+    orderType: order.type,
+    orderTimeInForce: order.timeInForce,
+    fieldErrors: errors,
+    estMargin,
+  });
+  const { submit, transaction, finalizedOrder, Dialog } = useOrderSubmit();
+
+  const { data: partyBalance } = usePartyBalanceQuery({
+    variables: { partyId: pubKey || '' },
+    skip: !pubKey,
  });

  const maxTrade = useMaximumPositionSize({
-    partyId: keypair?.pub || '',
-    accounts: partyData?.party?.accounts || [],
+    partyId: pubKey || '',
+    accounts: partyBalance?.party?.accounts || [],
    marketId: market.id,
    settlementAssetId:
      market.tradableInstrument.instrument.product.settlementAsset.id,
@@ -95,7 +101,11 @@ export const DealTicketSteps = ({
    order,
  });

-  const estCloseOut = useOrderCloseOut({ order, market, partyData });
+  const estCloseOut = useOrderCloseOut({
+    order,
+    market,
+    partyData: partyBalance,
+  });
  const slippage = useCalculateSlippage({ marketId: market.id, order });
  const [slippageValue, setSlippageValue] = useState(
    slippage ? parseFloat(slippage) : 0
@@ -112,7 +122,7 @@ export const DealTicketSteps = ({

  const price = useMemo(() => {
    if (slippage && market?.depth?.lastTrade?.price) {
-      const isLong = order.side === Side.SIDE_BUY;
+      const isLong = order.side === Schema.Side.SIDE_BUY;
      const multiplier = new BigNumber(1)[isLong ? 'plus' : 'minus'](
        parseFloat(slippage) / 100
      );
@@ -128,26 +138,32 @@ export const DealTicketSteps = ({

  const notionalSize = useMemo(() => {
    if (price) {
-      const size = new BigNumber(price).multipliedBy(orderSize).toNumber();
+      const size = new BigNumber(price).multipliedBy(order.size).toNumber();

      return addDecimalsFormatNumber(size, market.decimalPlaces);
    }
    return null;
-  }, [market.decimalPlaces, orderSize, price]);
+  }, [market.decimalPlaces, order.size, price]);
+
+  const assetDecimals =
+    market.tradableInstrument.instrument.product.settlementAsset.decimals;

  const fees = useMemo(() => {
-    if (estMargin?.fees && notionalSize) {
-      const percentage = new BigNumber(estMargin?.fees)
+    if (estMargin?.totalFees && notionalSize) {
+      const percentage = new BigNumber(estMargin?.totalFees)
        .dividedBy(notionalSize)
        .multipliedBy(100)
        .decimalPlaces(2)
        .toString();

-      return `${estMargin.fees} (${percentage}%)`;
+      return `${addDecimalsNormalizeNumber(
+        estMargin.totalFees,
+        assetDecimals
+      )} (${formatNumber(addDecimal(percentage, assetDecimals), 2)}%)`;
    }

    return null;
-  }, [estMargin?.fees, notionalSize]);
+  }, [assetDecimals, estMargin?.totalFees, notionalSize]);

  const max = useMemo(() => {
    return new BigNumber(maxTrade)
@@ -155,6 +171,10 @@ export const DealTicketSteps = ({
      .toNumber();
  }, [market.positionDecimalPlaces, maxTrade]);

+  useEffect(() => {
+    setSlippageValue(slippage ? parseFloat(slippage) : 0);
+  }, [slippage]);
+
  const onSizeChange = useCallback(
    (value: number) => {
      const newVal = new BigNumber(value)
@@ -172,7 +192,7 @@ export const DealTicketSteps = ({
    (value: number) => {
      if (market?.depth?.lastTrade?.price) {
        if (value) {
-          const isLong = order.side === Side.SIDE_BUY;
+          const isLong = order.side === Schema.Side.SIDE_BUY;
          const multiplier = new BigNumber(1)[isLong ? 'plus' : 'minus'](
            value / 100
          );
@@ -183,11 +203,11 @@ export const DealTicketSteps = ({

          setValue('price', bestAskPrice);

-          if (orderType === OrderType.TYPE_MARKET) {
-            setValue('type', OrderType.TYPE_LIMIT);
+          if (order.type === Schema.OrderType.TYPE_MARKET) {
+            setValue('type', Schema.OrderType.TYPE_LIMIT);
          }
        } else {
-          setValue('type', OrderType.TYPE_MARKET);
+          setValue('type', Schema.OrderType.TYPE_MARKET);
          setValue('price', market?.depth?.lastTrade?.price);
        }
      }
@@ -197,13 +217,14 @@ export const DealTicketSteps = ({
      market.decimalPlaces,
      market?.depth?.lastTrade?.price,
      order.side,
-      orderType,
+      order.type,
+      setSlippageValue,
      setValue,
    ]
  );

  const onSubmit = useCallback(
-    (order: Order) => {
+    (order: OrderSubmissionBody['orderSubmission']) => {
      if (transactionStatus !== 'pending') {
        submit({
          ...order,
@@ -244,7 +265,7 @@ export const DealTicketSteps = ({
          )}
        />
      ),
-      value: SIDE_NAMES[orderSide] || '',
+      value: SIDE_NAMES[order.side] || '',
    },
    {
      label: t('Choose Position Size'),
@@ -256,7 +277,7 @@ export const DealTicketSteps = ({
              min={step}
              max={max}
              onSizeChange={onSizeChange}
-              size={new BigNumber(orderSize).toNumber()}
+              size={new BigNumber(order.size).toNumber()}
              name="size"
              price={formattedPrice || emptyString}
              positionDecimalPlaces={market.positionDecimalPlaces}
@@ -265,7 +286,7 @@ export const DealTicketSteps = ({
                  .symbol
              }
              notionalSize={notionalSize || emptyString}
-              estCloseOut={estCloseOut}
+              estCloseOut={estCloseOut || emptyString}
              fees={fees || emptyString}
              estMargin={estMargin?.margin || emptyString}
            />
@@ -275,9 +296,9 @@ export const DealTicketSteps = ({
            />
          </>
        ) : (
-          'loading...'
+          t('Loading...')
        ),
-      value: orderSize,
+      value: order.size,
    },
    {
      label: t('Review Trade'),
@@ -295,7 +316,7 @@ export const DealTicketSteps = ({
            isDisabled={isDisabled}
            transactionStatus={transactionStatus}
            order={order}
-            estCloseOut={estCloseOut}
+            estCloseOut={estCloseOut || emptyString}
            estMargin={estMargin?.margin || emptyString}
            price={formattedPrice || emptyString}
            quoteName={
@@ -310,9 +331,15 @@ export const DealTicketSteps = ({
            title={getOrderDialogTitle(finalizedOrder?.status)}
            intent={getOrderDialogIntent(finalizedOrder?.status)}
            icon={getOrderDialogIcon(finalizedOrder?.status)}
-          >
-            <OrderFeedback transaction={transaction} order={finalizedOrder} />
-          </Dialog>
+            content={{
+              Complete: (
+                <OrderFeedback
+                  transaction={transaction}
+                  order={finalizedOrder}
+                />
+              ),
+            }}
+          />
        </div>
      ),
      disabled: true,
@@ -4,19 +4,18 @@ import {
  KeyValueTable,
  KeyValueTableRow,
 } from '@vegaprotocol/ui-toolkit';
-import * as React from 'react';
 import classNames from 'classnames';
-import type { DealTicketQuery_market } from '@vegaprotocol/deal-ticket';
-import type { Order } from '@vegaprotocol/orders';
+import type { DealTicketMarketFragment } from '@vegaprotocol/deal-ticket';
+import { DealTicketEstimates } from '@vegaprotocol/deal-ticket';
+import type { OrderSubmissionBody } from '@vegaprotocol/wallet';
 import { SIDE_NAMES } from './side-selector';
-import SimpleMarketExpires from '../simple-market-list/simple-market-expires';
 import { gql, useQuery } from '@apollo/client';
 import type {
  MarketTags,
  MarketTagsVariables,
 } from './__generated__/MarketTags';
-import { DealTicketEstimates } from './deal-ticket-estimates';
-import { Side } from '@vegaprotocol/types';
+import { Schema } from '@vegaprotocol/types';
+import { MarketExpires } from '@vegaprotocol/market-info';

 export const MARKET_TAGS_QUERY = gql`
  query MarketTags($marketId: ID!) {
@@ -33,10 +32,10 @@ export const MARKET_TAGS_QUERY = gql`
 `;

 interface Props {
-  market: DealTicketQuery_market;
+  market: DealTicketMarketFragment;
  isDisabled: boolean;
  transactionStatus?: string;
-  order: Order;
+  order: OrderSubmissionBody['orderSubmission'];
  estCloseOut: string;
  estMargin: string;
  quoteName: string;
@@ -73,9 +72,10 @@ export default ({
            <div
              className={classNames(
                {
-                  'buyButton dark:buyButtonDark': order.side === Side.SIDE_BUY,
+                  'buyButton dark:buyButtonDark':
+                    order.side === Schema.Side.SIDE_BUY,
                  'sellButton dark:sellButtonDark':
-                    order.side === Side.SIDE_SELL,
+                    order.side === Schema.Side.SIDE_SELL,
                },
                'px-2 py-1 inline text-ui-small'
              )}
@@ -86,7 +86,7 @@ export default ({
            <div>
              {tagsData?.market?.tradableInstrument.instrument.metadata
                .tags && (
-                <SimpleMarketExpires
+                <MarketExpires
                  tags={
                    tagsData?.market.tradableInstrument.instrument.metadata.tags
                  }
@@ -2,16 +2,16 @@ import React from 'react';
 import classNames from 'classnames';
 import { FormGroup } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/react-helpers';
-import { Side } from '@vegaprotocol/types';
+import { Schema } from '@vegaprotocol/types';

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

-export const SIDE_NAMES: Record<Side, string> = {
-  [Side.SIDE_BUY]: t('Long'),
-  [Side.SIDE_SELL]: t('Short'),
+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) => {
@@ -31,9 +31,9 @@ export default ({ value, onSelect }: SideSelectorProps) => {
          className={classNames(
            'px-8 py-2',
            'buyButton hover:buyButton dark:buyButtonDark dark:hover:buyButtonDark',
-            { selected: value === Side.SIDE_BUY }
+            { selected: value === Schema.Side.SIDE_BUY }
          )}
-          onClick={() => onSelect(Side.SIDE_BUY)}
+          onClick={() => onSelect(Schema.Side.SIDE_BUY)}
        >
          {t('Long')}
        </button>
@@ -43,9 +43,9 @@ export default ({ value, onSelect }: SideSelectorProps) => {
          className={classNames(
            'px-8 py-2',
            'sellButton hover:sellButton dark:sellButtonDark dark:hover:sellButtonDark',
-            { selected: value === Side.SIDE_SELL }
+            { selected: value === Schema.Side.SIDE_SELL }
          )}
-          onClick={() => onSelect(Side.SIDE_SELL)}
+          onClick={() => onSelect(Schema.Side.SIDE_SELL)}
        >
          {t('Short')}
        </button>
@@ -1,17 +0,0 @@
-query Deposits {
-  assetsConnection {
-    edges {
-      node {
-        id
-        name
-        symbol
-        decimals
-        source {
-          ... on ERC20 {
-            contractAddress
-          }
-        }
-      }
-    }
-  }
-}
@@ -1,72 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-import { AssetStatus } from "@vegaprotocol/types";
-
-// ====================================================
-// GraphQL query operation: Deposits
-// ====================================================
-
-export interface Deposits_assetsConnection_edges_node_source_BuiltinAsset {
-  __typename: "BuiltinAsset";
-}
-
-export interface Deposits_assetsConnection_edges_node_source_ERC20 {
-  __typename: "ERC20";
-  /**
-   * The address of the ERC20 contract
-   */
-  contractAddress: string;
-}
-
-export type Deposits_assetsConnection_edges_node_source = Deposits_assetsConnection_edges_node_source_BuiltinAsset | Deposits_assetsConnection_edges_node_source_ERC20;
-
-export interface Deposits_assetsConnection_edges_node {
-  __typename: "Asset";
-  /**
-   * The ID of the asset
-   */
-  id: string;
-  /**
-   * The full name of the asset (e.g: Great British Pound)
-   */
-  name: string;
-  /**
-   * The symbol of the asset (e.g: GBP)
-   */
-  symbol: string;
-  /**
-   * The precision of the asset. Should match the decimal precision of the asset on its native chain, e.g: for ERC20 assets, it is often 18
-   */
-  decimals: number;
-  /**
-   * The status of the asset in the Vega network
-   */
-  status: AssetStatus;
-  /**
-   * The origin source of the asset (e.g: an ERC20 asset)
-   */
-  source: Deposits_assetsConnection_edges_node_source;
-}
-
-export interface Deposits_assetsConnection_edges {
-  __typename: "AssetEdge";
-  node: Deposits_assetsConnection_edges_node;
-}
-
-export interface Deposits_assetsConnection {
-  __typename: "AssetsConnection";
-  /**
-   * The assets
-   */
-  edges: (Deposits_assetsConnection_edges | null)[] | null;
-}
-
-export interface Deposits {
-  /**
-   * The list of all assets in use in the Vega network or the specified asset if ID is provided
-   */
-  assetsConnection: Deposits_assetsConnection;
-}
@@ -1,57 +0,0 @@
-import { Schema as Types } from '@vegaprotocol/types';
-
-import { gql } from '@apollo/client';
-import * as Apollo from '@apollo/client';
-const defaultOptions = {} as const;
-export type DepositsQueryVariables = Types.Exact<{ [key: string]: never; }>;
-
-
-export type DepositsQuery = { __typename?: 'Query', assetsConnection: { __typename?: 'AssetsConnection', edges?: Array<{ __typename?: 'AssetEdge', node: { __typename?: 'Asset', id: string, name: string, symbol: string, decimals: number, source: { __typename?: 'BuiltinAsset' } | { __typename?: 'ERC20', contractAddress: string } } } | null> | null } };
-
-
-export const DepositsDocument = gql`
-    query Deposits {
-  assetsConnection {
-    edges {
-      node {
-        id
-        name
-        symbol
-        decimals
-        source {
-          ... on ERC20 {
-            contractAddress
-          }
-        }
-      }
-    }
-  }
-}
-    `;
-
-/**
- * __useDepositsQuery__
- *
- * To run a query within a React component, call `useDepositsQuery` and pass it any options that fit your needs.
- * When your component renders, `useDepositsQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useDepositsQuery({
- *   variables: {
- *   },
- * });
- */
-export function useDepositsQuery(baseOptions?: Apollo.QueryHookOptions<DepositsQuery, DepositsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<DepositsQuery, DepositsQueryVariables>(DepositsDocument, options);
-      }
-export function useDepositsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<DepositsQuery, DepositsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<DepositsQuery, DepositsQueryVariables>(DepositsDocument, options);
-        }
-export type DepositsQueryHookResult = ReturnType<typeof useDepositsQuery>;
-export type DepositsLazyQueryHookResult = ReturnType<typeof useDepositsLazyQuery>;
-export type DepositsQueryResult = Apollo.QueryResult<DepositsQuery, DepositsQueryVariables>;
@@ -1,61 +1,22 @@
-import { gql, useQuery } from '@apollo/client';
-import { DepositManager } from '@vegaprotocol/deposits';
-import { getEnabledAssets, t } from '@vegaprotocol/react-helpers';
-import { Networks, useEnvironment } from '@vegaprotocol/environment';
-import { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit';
-import { useVegaWallet } from '@vegaprotocol/wallet';
-import { Web3Container } from '@vegaprotocol/web3';
-import type { Deposits } from './__generated__/Deposits';
-
-const DEPOSITS_QUERY = gql`
-  query Deposits {
-    assetsConnection {
-      edges {
-        node {
-          id
-          name
-          symbol
-          decimals
-          status
-          source {
-            ... on ERC20 {
-              contractAddress
-            }
-          }
-        }
-      }
-    }
-  }
-`;
+import { useState } from 'react';
+import { t } from '@vegaprotocol/react-helpers';
+import { Button } from '@vegaprotocol/ui-toolkit';
+import { DepositDialog } from '@vegaprotocol/deposits';

 /**
 *  Fetches data required for the Deposit page
 */
 export const DepositContainer = () => {
-  const { VEGA_ENV } = useEnvironment();
-  const { keypair } = useVegaWallet();
-
-  const { data, loading, error } = useQuery<Deposits>(DEPOSITS_QUERY, {
-    variables: { partyId: keypair?.pub },
-    skip: !keypair?.pub,
-  });
-
-  const assets = getEnabledAssets(data);
-
+  const [depositDialog, setDepositDialog] = useState(false);
  return (
-    <AsyncRenderer<Deposits> data={data} loading={loading} error={error}>
-      {assets.length ? (
-        <Web3Container>
-          <DepositManager
-            assets={assets}
-            isFaucetable={VEGA_ENV !== Networks.MAINNET}
-          />
-        </Web3Container>
-      ) : (
-        <Splash>
-          <p>{t('No assets on this network')}</p>
-        </Splash>
-      )}
-    </AsyncRenderer>
+    <div>
+      <DepositDialog
+        depositDialog={depositDialog}
+        setDepositDialog={setDepositDialog}
+      />
+      <Button size="sm" onClick={() => setDepositDialog(true)}>
+        {t('Make deposit')}
+      </Button>
+    </div>
  );
 };
@@ -1,32 +1,31 @@
 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: { setConnect, setManage },
+    vegaWalletDialog: { setManage },
    theme,
    toggleTheme,
  } = useContext(LocalContext);
  return (
    <div
-      className="flex items-stretch pr-6 py-6 bg-black text-neutral-400"
+      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={setConnect}
+          setConnectDialog={updateVegaWalletDialog}
          setManageDialog={setManage}
        />
-        <ThemeSwitcher
-          theme={theme}
-          onToggle={toggleTheme}
-          className="-my-4"
-          fixedBg="dark"
-        />
+        <ThemeSwitcher theme={theme} onToggle={toggleTheme} className="-my-4" />
      </div>
    </div>
  );
@@ -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;
@@ -0,0 +1,2 @@
+export { default as HorizontalMenu } from './horizontal-menu';
+export type { Item as HorizontalMenuItem } from './horizontal-menu';
@@ -0,0 +1,76 @@
+import { useMemo, useRef, useCallback } from 'react';
+import { useOutletContext } from 'react-router-dom';
+import type { AgGridReact } from 'ag-grid-react';
+import { PriceCell, useDataProvider } from '@vegaprotocol/react-helpers';
+import type { AccountFields } from '@vegaprotocol/accounts';
+import { aggregatedAccountsDataProvider, getId } from '@vegaprotocol/accounts';
+import type { IGetRowsParams } from 'ag-grid-community';
+import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
+import {
+  AssetDetailsDialog,
+  useAssetDetailsDialogStore,
+} from '@vegaprotocol/assets';
+import { NO_DATA_MESSAGE } from '../../../constants';
+import { ConsoleLiteGrid } from '../../console-lite-grid';
+import { useAccountColumnDefinitions } from '.';
+
+const AccountsManager = () => {
+  const { partyId = '' } = useOutletContext<{ partyId: string }>();
+  const { isOpen, symbol, setOpen } = useAssetDetailsDialogStore();
+  const gridRef = useRef<AgGridReact | null>(null);
+  const dataRef = useRef<AccountFields[] | null>(null);
+  const variables = useMemo(() => ({ partyId }), [partyId]);
+  const update = useCallback(
+    ({ data }: { data: AccountFields[] | null }) => {
+      dataRef.current = data;
+      gridRef.current?.api?.refreshInfiniteCache();
+      return true;
+    },
+    [gridRef]
+  );
+  const { data, error, loading } = useDataProvider<AccountFields[], never>({
+    dataProvider: aggregatedAccountsDataProvider,
+    update,
+    variables,
+  });
+  const getRows = async ({
+    successCallback,
+    startRow,
+    endRow,
+  }: IGetRowsParams) => {
+    const rowsThisBlock = dataRef.current
+      ? dataRef.current.slice(startRow, endRow)
+      : [];
+    const lastRow = dataRef.current?.length ?? -1;
+    successCallback(rowsThisBlock, lastRow);
+  };
+  const { columnDefs, defaultColDef } = useAccountColumnDefinitions();
+  return (
+    <>
+      <AsyncRenderer
+        loading={loading}
+        error={error}
+        data={data}
+        noDataMessage={NO_DATA_MESSAGE}
+      >
+        <ConsoleLiteGrid<AccountFields>
+          rowData={data?.length ? undefined : []}
+          rowModelType={data?.length ? 'infinite' : 'clientSide'}
+          ref={gridRef}
+          datasource={{ getRows }}
+          columnDefs={columnDefs}
+          defaultColDef={defaultColDef}
+          components={{ PriceCell }}
+          getRowId={({ data }) => getId(data)}
+        />
+      </AsyncRenderer>
+      <AssetDetailsDialog
+        assetSymbol={symbol}
+        open={isOpen}
+        onChange={(open) => setOpen(open)}
+      />
+    </>
+  );
+};
+
+export default AccountsManager;
@@ -0,0 +1,2 @@
+export { default as AccountManager } from './accounts';
+export { default as useAccountColumnDefinitions } from './use-column-definitions';
@@ -0,0 +1,80 @@
+import React, { useMemo } from 'react';
+import { addDecimalsFormatNumber, t } from '@vegaprotocol/react-helpers';
+import type { AccountFields } from '@vegaprotocol/accounts';
+import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
+import type { ColDef, GroupCellRendererParams } from 'ag-grid-community';
+import type { VegaValueFormatterParams } from '@vegaprotocol/ui-toolkit';
+
+const useAccountColumnDefinitions = () => {
+  const { open } = useAssetDetailsDialogStore();
+  const columnDefs: ColDef[] = useMemo(() => {
+    return [
+      {
+        colId: 'account-asset',
+        headerName: t('Asset'),
+        field: 'asset.symbol',
+        headerClass: 'uppercase justify-start',
+        cellClass: 'uppercase flex h-full items-center md:pl-4',
+        cellRenderer: ({ value }: GroupCellRendererParams) =>
+          value && value.length > 0 ? (
+            <div className="md:pl-4 grid h-full items-center" title={value}>
+              <div className="truncate min-w-0">
+                <button
+                  className="hover:underline"
+                  onClick={() => {
+                    open(value);
+                  }}
+                >
+                  {value}
+                </button>
+              </div>
+            </div>
+          ) : (
+            ''
+          ),
+      },
+      {
+        colId: 'deposited',
+        headerName: t('Deposited'),
+        field: 'deposited',
+        cellRenderer: 'PriceCell',
+        valueFormatter: ({
+          value,
+          data,
+        }: VegaValueFormatterParams<AccountFields, 'deposited'>) => {
+          if (value && data) {
+            return addDecimalsFormatNumber(value, data.asset.decimals);
+          }
+          return '-';
+        },
+      },
+      {
+        colId: 'used',
+        headerName: t('Used'),
+        field: 'used',
+        cellRenderer: 'PriceCell',
+        valueFormatter: ({
+          value,
+          data,
+        }: VegaValueFormatterParams<AccountFields, 'used'>) => {
+          if (value && data) {
+            return addDecimalsFormatNumber(value, data.asset.decimals);
+          }
+          return '-';
+        },
+      },
+    ];
+  }, [open]);
+
+  const defaultColDef = useMemo(() => {
+    return {
+      sortable: true,
+      unSortIcon: true,
+      headerClass: 'uppercase',
+      editable: false,
+    };
+  }, []);
+  return { columnDefs, defaultColDef };
+};
+
+export default useAccountColumnDefinitions;
@@ -0,0 +1,35 @@
+import { t } from '@vegaprotocol/react-helpers';
+
+export const PORTFOLIO_ASSETS = 'assets';
+export const PORTFOLIO_POSITIONS = 'positions';
+export const PORTFOLIO_ORDERS = 'orders';
+export const PORTFOLIO_FILLS = 'fills';
+export const PORTFOLIO_DEPOSITS = 'deposits';
+
+export const PORTFOLIO_ITEMS = [
+  {
+    name: t('Assets'),
+    id: PORTFOLIO_ASSETS,
+    url: `/portfolio/${PORTFOLIO_ASSETS}`,
+  },
+  {
+    name: t('Positions'),
+    id: PORTFOLIO_POSITIONS,
+    url: `/portfolio/${PORTFOLIO_POSITIONS}`,
+  },
+  {
+    name: t('Orders'),
+    id: PORTFOLIO_ORDERS,
+    url: `/portfolio/${PORTFOLIO_ORDERS}`,
+  },
+  {
+    name: t('Fills'),
+    id: PORTFOLIO_FILLS,
+    url: `/portfolio/${PORTFOLIO_FILLS}`,
+  },
+  {
+    name: t('Deposits'),
+    id: PORTFOLIO_DEPOSITS,
+    url: `/portfolio/${PORTFOLIO_DEPOSITS}`,
+  },
+];
@@ -0,0 +1,53 @@
+import { useRef } from 'react';
+import { useOutletContext } from 'react-router-dom';
+import type { AgGridReact } from 'ag-grid-react';
+import type { Trade } from '@vegaprotocol/fills';
+import { useFillsList } from '@vegaprotocol/fills';
+import type { BodyScrollEndEvent, BodyScrollEvent } from 'ag-grid-community';
+import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
+import { ConsoleLiteGrid } from '../../console-lite-grid';
+import { NO_DATA_MESSAGE } from '../../../constants';
+import useColumnDefinitions from './use-column-definitions';
+
+const FillsManager = () => {
+  const { partyId } = useOutletContext<{ partyId: string }>();
+  const { columnDefs, defaultColDef } = useColumnDefinitions({ partyId });
+  const gridRef = useRef<AgGridReact | null>(null);
+  const scrolledToTop = useRef(true);
+  const { data, error, loading, addNewRows, getRows } = useFillsList({
+    partyId,
+    gridRef,
+    scrolledToTop,
+  });
+
+  const onBodyScrollEnd = (event: BodyScrollEndEvent) => {
+    if (event.top === 0) {
+      addNewRows();
+    }
+  };
+
+  const onBodyScroll = (event: BodyScrollEvent) => {
+    scrolledToTop.current = event.top <= 0;
+  };
+
+  return (
+    <AsyncRenderer
+      loading={loading}
+      error={error}
+      data={data?.length ? data : null}
+      noDataMessage={NO_DATA_MESSAGE}
+    >
+      <ConsoleLiteGrid<Trade>
+        ref={gridRef}
+        rowModelType="infinite"
+        datasource={{ getRows }}
+        onBodyScrollEnd={onBodyScrollEnd}
+        onBodyScroll={onBodyScroll}
+        columnDefs={columnDefs}
+        defaultColDef={defaultColDef}
+      />
+    </AsyncRenderer>
+  );
+};
+
+export default FillsManager;
@@ -0,0 +1 @@
+export { default as FillsManager } from './fills';
@@ -0,0 +1,190 @@
+import { useMemo } from 'react';
+import type { ColDef, ValueFormatterParams } from 'ag-grid-community';
+import type { Trade } from '@vegaprotocol/fills';
+import classNames from 'classnames';
+import {
+  addDecimal,
+  addDecimalsFormatNumber,
+  formatNumber,
+  getDateTimeFormat,
+  negativeClassNames,
+  positiveClassNames,
+  t,
+} from '@vegaprotocol/react-helpers';
+import BigNumber from 'bignumber.js';
+import { Schema } from '@vegaprotocol/types';
+
+interface Props {
+  partyId: string;
+}
+
+const useColumnDefinitions = ({ partyId }: Props) => {
+  const columnDefs: ColDef[] = useMemo(() => {
+    return [
+      {
+        colId: 'market',
+        headerName: t('Market'),
+        field: 'market.tradableInstrument.instrument.name',
+        cellClass: '!flex h-full items-center !md:pl-4',
+        minWidth: 150,
+      },
+      {
+        colId: 'size',
+        headerName: t('Size'),
+        headerClass: 'uppercase',
+        field: 'size',
+        width: 100,
+        cellClass: ({ data }: { data: Trade }) => {
+          return classNames('!flex h-full items-center justify-center', {
+            [positiveClassNames]: data?.buyer.id === partyId,
+            [negativeClassNames]: data?.seller.id,
+          });
+        },
+        valueFormatter: ({ value, data }: ValueFormatterParams) => {
+          if (value && data?.market) {
+            let prefix;
+            if (data.buyer.id === partyId) {
+              prefix = '+';
+            } else if (data.seller.id) {
+              prefix = '-';
+            }
+
+            const size = addDecimalsFormatNumber(
+              value,
+              data.market.positionDecimalPlaces
+            );
+            return `${prefix}${size}`;
+          }
+          return '-';
+        },
+      },
+      {
+        colId: 'value',
+        headerName: t('Value'),
+        headerClass: 'uppercase text-center',
+        cellClass: '!flex h-full items-center',
+        field: 'price',
+        valueFormatter: ({ value, data }: ValueFormatterParams) => {
+          if (value && data?.market) {
+            const asset =
+              data.market.tradableInstrument.instrument.product.settlementAsset
+                .symbol;
+            const valueFormatted = addDecimalsFormatNumber(
+              value,
+              data.market.decimalPlaces
+            );
+            return `${valueFormatted} ${asset}`;
+          }
+          return '-';
+        },
+        type: 'rightAligned',
+      },
+      {
+        colId: 'filledvalue',
+        headerName: t('Filled value'),
+        headerClass: 'uppercase text-center',
+        cellClass: '!flex h-full items-center',
+        field: 'price',
+        valueFormatter: ({ value, data }: ValueFormatterParams) => {
+          if (value && data?.market) {
+            const asset =
+              data.market.tradableInstrument.instrument.product.settlementAsset
+                .symbol;
+            const size = new BigNumber(
+              addDecimal(data.size, data.market.positionDecimalPlaces)
+            );
+            const price = new BigNumber(
+              addDecimal(value, data.market.decimalPlaces)
+            );
+
+            const total = size.times(price).toString();
+            const valueFormatted = formatNumber(
+              total,
+              data?.market.decimalPlaces
+            );
+            return `${valueFormatted} ${asset}`;
+          }
+          return '-';
+        },
+        type: 'rightAligned',
+      },
+      {
+        colId: 'role',
+        headerName: t('Role'),
+        field: 'aggressor',
+        width: 100,
+        valueFormatter: ({ value, data }: ValueFormatterParams) => {
+          if (value && data) {
+            const taker = t('Taker');
+            const maker = t('Maker');
+            if (data?.buyer.id === partyId) {
+              if (value === Schema.Side.SIDE_BUY) {
+                return taker;
+              } else {
+                return maker;
+              }
+            } else if (data?.seller.id === partyId) {
+              if (value === Schema.Side.SIDE_SELL) {
+                return taker;
+              } else {
+                return maker;
+              }
+            }
+          }
+          return '-';
+        },
+      },
+      {
+        colId: 'fee',
+        headerName: t('Fee'),
+        headerClass: 'uppercase text-center',
+        cellClass: '!flex h-full items-center',
+        field: 'market.tradableInstrument.instrument.product',
+        valueFormatter: ({ value, data }: ValueFormatterParams) => {
+          if (value && data) {
+            const asset = value.settlementAsset;
+            let feesObj;
+            if (data.buyer.id === partyId) {
+              feesObj = data.buyerFee;
+            } else if (data?.seller.id === partyId) {
+              feesObj = data?.sellerFee;
+            } else {
+              return '-';
+            }
+
+            const fee = new BigNumber(feesObj.makerFee)
+              .plus(feesObj.infrastructureFee)
+              .plus(feesObj.liquidityFee);
+            const totalFees = addDecimalsFormatNumber(
+              fee.toString(),
+              asset.decimals
+            );
+            return `${totalFees} ${asset.symbol}`;
+          }
+          return '-';
+        },
+        type: 'rightAligned',
+      },
+      {
+        colId: 'date',
+        headerName: t('Date'),
+        field: 'createdAt',
+        valueFormatter: ({ value }: ValueFormatterParams) => {
+          return value ? getDateTimeFormat().format(new Date(value)) : '-';
+        },
+      },
+    ];
+  }, [partyId]);
+
+  const defaultColDef = useMemo(() => {
+    return {
+      sortable: true,
+      unSortIcon: true,
+      headerClass: 'uppercase',
+      cellClass: '!flex h-full items-center',
+    };
+  }, []);
+  return { columnDefs, defaultColDef };
+};
+
+export default useColumnDefinitions;
@@ -1 +1,6 @@
 export * from './portfolio';
+export * from './accounts';
+export * from './fills';
+export * from './orders';
+export * from './positions';
+export * as constants from './constants';
@@ -0,0 +1 @@
+export { default as OrdersManager } from './orders';
@@ -0,0 +1,107 @@
+import { useRef, useState } from 'react';
+import type { AgGridReact } from 'ag-grid-react';
+import type { BodyScrollEndEvent, BodyScrollEvent } from 'ag-grid-community';
+import { useOutletContext } from 'react-router-dom';
+import type { Order } from '@vegaprotocol/orders';
+import {
+  useOrderCancel,
+  useOrderListData,
+  useOrderEdit,
+  OrderFeedback,
+  getCancelDialogTitle,
+  getCancelDialogIntent,
+  getEditDialogTitle,
+  OrderEditDialog,
+} from '@vegaprotocol/orders';
+import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
+import { ConsoleLiteGrid } from '../../console-lite-grid';
+import { NO_DATA_MESSAGE } from '../../../constants';
+import useColumnDefinitions from './use-column-definitions';
+
+const OrdersManager = () => {
+  const { partyId } = useOutletContext<{ partyId: string }>();
+  const [editOrder, setEditOrder] = useState<Order | null>(null);
+  const orderCancel = useOrderCancel();
+  const orderEdit = useOrderEdit(editOrder);
+  const { columnDefs, defaultColDef } = useColumnDefinitions({
+    setEditOrder,
+    orderCancel,
+  });
+
+  const gridRef = useRef<AgGridReact | null>(null);
+  const scrolledToTop = useRef(true);
+
+  const { data, error, loading, addNewRows, getRows } = useOrderListData({
+    partyId,
+    gridRef,
+    scrolledToTop,
+  });
+
+  const onBodyScrollEnd = (event: BodyScrollEndEvent) => {
+    if (event.top === 0) {
+      addNewRows();
+    }
+  };
+
+  const onBodyScroll = (event: BodyScrollEvent) => {
+    scrolledToTop.current = event.top <= 0;
+  };
+
+  return (
+    <AsyncRenderer
+      loading={loading}
+      error={error}
+      data={data?.length ? data : null}
+      noDataMessage={NO_DATA_MESSAGE}
+    >
+      <ConsoleLiteGrid<Order>
+        ref={gridRef}
+        rowModelType={data?.length ? 'infinite' : 'clientSide'}
+        rowData={data?.length ? undefined : []}
+        datasource={{ getRows }}
+        onBodyScrollEnd={onBodyScrollEnd}
+        onBodyScroll={onBodyScroll}
+        columnDefs={columnDefs}
+        defaultColDef={defaultColDef}
+      />
+      <orderCancel.Dialog
+        title={getCancelDialogTitle(orderCancel)}
+        intent={getCancelDialogIntent(orderCancel)}
+        content={{
+          Complete: (
+            <OrderFeedback
+              transaction={orderCancel.transaction}
+              order={orderCancel.cancelledOrder}
+            />
+          ),
+        }}
+      />
+      <orderEdit.Dialog
+        title={getEditDialogTitle(orderEdit.updatedOrder?.status)}
+        content={{
+          Complete: (
+            <OrderFeedback
+              transaction={orderEdit.transaction}
+              order={orderEdit.updatedOrder}
+            />
+          ),
+        }}
+      />
+      {editOrder && (
+        <OrderEditDialog
+          isOpen={Boolean(editOrder)}
+          onChange={(isOpen) => {
+            if (!isOpen) setEditOrder(null);
+          }}
+          order={editOrder}
+          onSubmit={(fields) => {
+            setEditOrder(null);
+            orderEdit.edit({ price: fields.limitPrice });
+          }}
+        />
+      )}
+    </AsyncRenderer>
+  );
+};
+
+export default OrdersManager;
@@ -0,0 +1,275 @@
+import { useMemo } from 'react';
+import type {
+  ColDef,
+  ValueFormatterParams,
+  ICellRendererParams,
+} from 'ag-grid-community';
+import {
+  addDecimal,
+  getDateTimeFormat,
+  negativeClassNames,
+  positiveClassNames,
+  t,
+} from '@vegaprotocol/react-helpers';
+import type { OrderFieldsFragment, Order } from '@vegaprotocol/orders';
+import type { OrderCancellationBody } from '@vegaprotocol/wallet';
+import { isOrderActive } from '@vegaprotocol/orders';
+import {
+  OrderRejectionReasonMapping,
+  OrderStatusMapping,
+  OrderTypeMapping,
+  Schema,
+  OrderTimeInForceMapping,
+} from '@vegaprotocol/types';
+
+import BigNumber from 'bignumber.js';
+import { Button } from '@vegaprotocol/ui-toolkit';
+
+type StatusKey = keyof typeof OrderStatusMapping;
+type RejectReasonKey = keyof typeof OrderRejectionReasonMapping;
+type OrderTimeKey = keyof typeof OrderTimeInForceMapping;
+interface Props {
+  setEditOrder: (order: Order) => void;
+  orderCancel: {
+    cancel: (args: OrderCancellationBody['orderCancellation']) => void;
+    [key: string]: unknown;
+  };
+}
+
+const useColumnDefinitions = ({ setEditOrder, orderCancel }: Props) => {
+  const columnDefs: ColDef[] = useMemo(() => {
+    return [
+      {
+        colId: 'market',
+        headerName: t('Market'),
+        field: 'market.tradableInstrument.instrument.code',
+        headerClass: 'uppercase justify-start',
+        cellClass: '!flex h-full items-center !md:pl-4',
+      },
+      {
+        colId: 'size',
+        headerName: t('Size'),
+        field: 'size',
+        headerClass: 'uppercase',
+        cellClass: 'font-mono !flex h-full items-center',
+        width: 80,
+        cellClassRules: {
+          [positiveClassNames]: ({ data }: { data: OrderFieldsFragment }) =>
+            data?.side === Schema.Side.SIDE_BUY,
+          [negativeClassNames]: ({ data }: { data: OrderFieldsFragment }) =>
+            data?.side === Schema.Side.SIDE_SELL,
+        },
+        valueFormatter: ({ value, data }: ValueFormatterParams) => {
+          if (value && data && data.market) {
+            const prefix = data
+              ? data.side === Schema.Side.SIDE_BUY
+                ? '+'
+                : '-'
+              : '';
+            return (
+              prefix + addDecimal(value, data.market.positionDecimalPlaces)
+            );
+          }
+          return '-';
+        },
+      },
+      {
+        colId: 'type',
+        field: 'type',
+        width: 80,
+        valueFormatter: ({
+          value,
+        }: ValueFormatterParams & {
+          value?: OrderFieldsFragment['type'];
+        }) => OrderTypeMapping[value as Schema.OrderType],
+      },
+      {
+        colId: 'status',
+        field: 'status',
+        cellClass: 'text-center font-mono !flex h-full items-center',
+        valueFormatter: ({
+          value,
+          data,
+        }: ValueFormatterParams & {
+          value?: StatusKey;
+        }) => {
+          if (value && data && data.market) {
+            if (value === Schema.OrderStatus.STATUS_REJECTED) {
+              return `${OrderStatusMapping[value as StatusKey]}: ${
+                data.rejectionReason &&
+                OrderRejectionReasonMapping[
+                  data.rejectionReason as RejectReasonKey
+                ]
+              }`;
+            }
+            return OrderStatusMapping[value as StatusKey] as string;
+          }
+          return '-';
+        },
+      },
+      {
+        colId: 'filled',
+        headerName: t('Filled'),
+        headerClass: 'uppercase',
+        field: 'remaining',
+        cellClass: 'font-mono text-center !flex h-full items-center',
+        width: 80,
+        valueFormatter: ({
+          data,
+          value,
+        }: ValueFormatterParams & {
+          value?: OrderFieldsFragment['remaining'];
+        }) => {
+          if (value && data && data.market) {
+            const dps = data.market.positionDecimalPlaces;
+            const size = new BigNumber(data.size);
+            const remaining = new BigNumber(value);
+            const fills = size.minus(remaining);
+            return `${addDecimal(fills.toString(), dps)}/${addDecimal(
+              size.toString(),
+              dps
+            )}`;
+          }
+          return '-';
+        },
+      },
+      {
+        colId: 'price',
+        field: 'price',
+        type: 'rightAligned',
+        width: 125,
+        headerClass: 'uppercase text-right',
+        cellClass: 'font-mono text-right !flex h-full items-center',
+        valueFormatter: ({
+          value,
+          data,
+        }: ValueFormatterParams & {
+          value?: OrderFieldsFragment['price'];
+        }) => {
+          if (
+            value === undefined ||
+            !data ||
+            !data.market ||
+            data.type === Schema.OrderType.TYPE_MARKET
+          ) {
+            return '-';
+          }
+          return addDecimal(value, data.market.decimalPlaces);
+        },
+      },
+      {
+        colId: 'timeInForce',
+        field: 'timeInForce',
+        minWidth: 120,
+        valueFormatter: ({
+          value,
+          data,
+        }: ValueFormatterParams & {
+          value?: OrderTimeKey;
+        }) => {
+          if (value && data?.market) {
+            if (
+              value === Schema.OrderTimeInForce.TIME_IN_FORCE_GTT &&
+              data.expiresAt
+            ) {
+              const expiry = getDateTimeFormat().format(
+                new Date(data.expiresAt)
+              );
+              return `${
+                OrderTimeInForceMapping[value as OrderTimeKey]
+              }: ${expiry}`;
+            }
+
+            return OrderTimeInForceMapping[value as OrderTimeKey];
+          }
+          return '-';
+        },
+      },
+      {
+        colId: 'createdat',
+        field: 'createdAt',
+        valueFormatter: ({
+          value,
+        }: ValueFormatterParams & {
+          value?: OrderFieldsFragment['createdAt'];
+        }) => {
+          return value ? getDateTimeFormat().format(new Date(value)) : value;
+        },
+      },
+      {
+        colId: 'updated',
+        field: 'updatedAt',
+        cellClass: '!flex h-full items-center justify-center',
+        valueFormatter: ({
+          value,
+        }: ValueFormatterParams & {
+          value?: OrderFieldsFragment['updatedAt'];
+        }) => {
+          return value ? getDateTimeFormat().format(new Date(value)) : '-';
+        },
+      },
+      {
+        colId: 'edit',
+        field: 'edit',
+        width: 75,
+        cellRenderer: ({ data }: ICellRendererParams) => {
+          if (!data) return null;
+          if (isOrderActive(data.status)) {
+            return (
+              <Button
+                data-testid="edit"
+                onClick={() => {
+                  setEditOrder(data);
+                }}
+                size="xs"
+              >
+                {t('Edit')}
+              </Button>
+            );
+          }
+
+          return null;
+        },
+      },
+      {
+        colId: 'cancel',
+        field: 'cancel',
+        minWidth: 130,
+        cellRenderer: ({ data }: ICellRendererParams) => {
+          if (!data) return null;
+          if (isOrderActive(data.status)) {
+            return (
+              <Button
+                size="xs"
+                data-testid="cancel"
+                onClick={() => {
+                  if (data.market) {
+                    orderCancel.cancel({
+                      orderId: data.id,
+                      marketId: data.market.id,
+                    });
+                  }
+                }}
+              >
+                Cancel
+              </Button>
+            );
+          }
+
+          return null;
+        },
+      },
+    ];
+  }, [orderCancel, setEditOrder]);
+  const defaultColDef = useMemo(() => {
+    return {
+      sortable: true,
+      unSortIcon: true,
+      headerClass: 'uppercase',
+      cellClass: '!flex h-full items-center',
+    };
+  }, []);
+  return { columnDefs, defaultColDef };
+};
+
+export default useColumnDefinitions;
@@ -1,40 +1,27 @@
-import * as React from 'react';
-import { AccountsContainer } from '@vegaprotocol/accounts';
-import { t } from '@vegaprotocol/react-helpers';
+import React from 'react';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import { Tabs, Tab } from '@vegaprotocol/ui-toolkit';
-import { OrderListContainer } from '@vegaprotocol/orders';
-import { PositionsContainer } from '@vegaprotocol/positions';
-import { FillsContainer } from '@vegaprotocol/fills';
 import ConnectWallet from '../wallet-connector';
-import { DepositContainer } from '../deposits';
+import { useOutlet, useLocation } from 'react-router-dom';
+import { HorizontalMenu } from '../horizontal-menu';
+import * as constants from './constants';

 export const Portfolio = () => {
-  const { keypair } = useVegaWallet();
-  if (!keypair) {
+  const { pubKey } = useVegaWallet();
+  const { pathname } = useLocation();
+  const module = pathname.split('/portfolio/')?.[1] ?? '';
+  const outlet = useOutlet({ partyId: pubKey || '' });
+  if (!pubKey) {
    return (
      <section className="xl:w-1/2">
        <ConnectWallet />
      </section>
    );
  }
+
  return (
-    <Tabs>
-      <Tab id="assets" name={t('Assets')}>
-        <AccountsContainer />
-      </Tab>
-      <Tab id="positions" name={t('Positions')}>
-        <PositionsContainer />
-      </Tab>
-      <Tab id="orders" name={t('Orders')}>
-        <OrderListContainer />
-      </Tab>
-      <Tab id="fills" name={t('Fills')}>
-        <FillsContainer />
-      </Tab>
-      <Tab id="deposits" name={t('Deposits')}>
-        <DepositContainer />
-      </Tab>
-    </Tabs>
+    <div className="h-full p-4 md:p-6 grid grid-rows-[min-content_1fr]">
+      <HorizontalMenu active={module} items={constants.PORTFOLIO_ITEMS} />
+      {outlet}
+    </div>
  );
 };
@@ -0,0 +1 @@
+export { default as PositionsManager } from './positions';
@@ -0,0 +1,39 @@
+import { useOutletContext } from 'react-router-dom';
+import { PriceFlashCell } from '@vegaprotocol/react-helpers';
+import { usePositionsData, getRowId } from '@vegaprotocol/positions';
+import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
+import { ConsoleLiteGrid } from '../../console-lite-grid';
+import { useRef } from 'react';
+import type { AgGridReact } from 'ag-grid-react';
+import type { Position } from '@vegaprotocol/positions';
+import { NO_DATA_MESSAGE } from '../../../constants';
+
+import useColumnDefinitions from './use-column-definitions';
+
+const Positions = () => {
+  const gridRef = useRef<AgGridReact | null>(null);
+  const { partyId } = useOutletContext<{ partyId: string }>();
+  const { data, error, loading } = usePositionsData(partyId, gridRef);
+  const { columnDefs, defaultColDef } = useColumnDefinitions();
+  return (
+    <AsyncRenderer
+      loading={loading}
+      error={error}
+      data={data?.length ? data : null}
+      noDataMessage={NO_DATA_MESSAGE}
+    >
+      <ConsoleLiteGrid<Position>
+        ref={gridRef}
+        domLayout="autoHeight"
+        classNamesParam="h-auto"
+        columnDefs={columnDefs}
+        defaultColDef={defaultColDef}
+        getRowId={getRowId}
+        rowData={data || undefined}
+        components={{ PriceFlashCell }}
+      />
+    </AsyncRenderer>
+  );
+};
+
+export default Positions;
@@ -0,0 +1,278 @@
+import { useMemo } from 'react';
+import {
+  addDecimalsFormatNumber,
+  formatNumber,
+  getDateTimeFormat,
+  PriceFlashCell,
+  signedNumberCssClassRules,
+  t,
+} from '@vegaprotocol/react-helpers';
+import type { Position } from '@vegaprotocol/positions';
+import { AmountCell } from '@vegaprotocol/positions';
+import type {
+  CellRendererSelectorResult,
+  ICellRendererParams,
+  ValueGetterParams,
+  GroupCellRendererParams,
+  ColDef,
+} from 'ag-grid-community';
+import { Schema } from '@vegaprotocol/types';
+import type { VegaValueFormatterParams } from '@vegaprotocol/ui-toolkit';
+import { Intent, ProgressBarCell } from '@vegaprotocol/ui-toolkit';
+
+const EmptyCell = () => '';
+
+const useColumnDefinitions = () => {
+  const columnDefs: ColDef[] = useMemo(() => {
+    return [
+      {
+        colId: 'market',
+        headerName: t('Market'),
+        headerClass: 'uppercase justify-start',
+        cellClass: '!flex h-full items-center !md:pl-4',
+        field: 'marketName',
+        cellRenderer: ({ value }: GroupCellRendererParams) => {
+          if (!value) {
+            return null;
+          }
+          const valueFormatted: [string, string?] = (() => {
+            // split market name into two parts, 'Part1 (Part2)' or 'Part1 - Part2'
+            const matches = value.match(/^(.*)(\((.*)\)| - (.*))\s*$/);
+            if (matches && matches[1] && matches[3]) {
+              return [matches[1].trim(), matches[3].trim()];
+            }
+            return [value];
+          })();
+          if (valueFormatted && valueFormatted[1]) {
+            return (
+              <div className="leading-tight">
+                <div>{valueFormatted[0]}</div>
+                <div>{valueFormatted[1]}</div>
+              </div>
+            );
+          }
+          return valueFormatted ? valueFormatted[0] : null;
+        },
+      },
+      {
+        colId: 'amount',
+        headerName: t('Amount'),
+        headerClass: 'uppercase',
+        cellClass: '!flex h-full items-center',
+        field: 'openVolume',
+        valueGetter: ({ node, data }: ValueGetterParams) => {
+          return node?.rowPinned ? data?.notional : data?.openVolume;
+        },
+        type: 'rightAligned',
+        cellRendererSelector: (
+          params: ICellRendererParams
+        ): CellRendererSelectorResult => {
+          return {
+            component: params.node.rowPinned ? PriceFlashCell : AmountCell,
+          };
+        },
+        valueFormatter: ({
+          value,
+          data,
+          node,
+        }: VegaValueFormatterParams<Position, 'openVolume'>) => {
+          let ret;
+          if (value && data) {
+            ret = node?.rowPinned
+              ? addDecimalsFormatNumber(value, data.decimals)
+              : data;
+          }
+          // FIXME this column needs refactoring
+          return ret as unknown as string;
+        },
+      },
+      {
+        colId: 'markprice',
+        headerName: t('Mark price'),
+        headerClass: 'uppercase',
+        cellClass: '!flex h-full items-center justify-center',
+        field: 'markPrice',
+        cellRendererSelector: (
+          params: ICellRendererParams
+        ): CellRendererSelectorResult => {
+          return {
+            component: params.node.rowPinned ? EmptyCell : PriceFlashCell,
+          };
+        },
+        valueFormatter: ({
+          value,
+          data,
+          node,
+        }: VegaValueFormatterParams<Position, 'markPrice'>) => {
+          if (
+            data &&
+            value &&
+            node?.rowPinned &&
+            data.marketTradingMode ===
+              Schema.MarketTradingMode.TRADING_MODE_OPENING_AUCTION
+          ) {
+            return addDecimalsFormatNumber(
+              value.toString(),
+              data.marketDecimalPlaces
+            );
+          }
+          return '-';
+        },
+      },
+      {
+        colId: 'entryprice',
+        headerName: t('Entry price'),
+        headerClass: 'uppercase',
+        cellClass: '!flex h-full items-center',
+        field: 'averageEntryPrice',
+        headerComponentParams: {
+          template:
+            '<div class="ag-cell-label-container" role="presentation">' +
+            `  <span>${t('Liquidation price (est)')}</span>` +
+            '  <span ref="eText" class="ag-header-cell-text"></span>' +
+            '</div>',
+        },
+        cellRenderer: ({ node, data }: GroupCellRendererParams) => {
+          const valueFormatted =
+            data && !node?.rowPinned
+              ? (() => {
+                  const min = BigInt(data.averageEntryPrice);
+                  const max = BigInt(data.liquidationPrice);
+                  const mid = BigInt(data.markPrice);
+                  const range = max - min;
+                  return {
+                    low: addDecimalsFormatNumber(
+                      min.toString(),
+                      data.marketDecimalPlaces
+                    ),
+                    high: addDecimalsFormatNumber(
+                      max.toString(),
+                      data.marketDecimalPlaces
+                    ),
+                    value: range
+                      ? Number(((mid - min) * BigInt(100)) / range)
+                      : 0,
+                    intent: data.lowMarginLevel ? Intent.Warning : undefined,
+                  };
+                })()
+              : undefined;
+          return node.rowPinned ? (
+            ''
+          ) : (
+            <ProgressBarCell valueFormatted={valueFormatted} />
+          );
+        },
+      },
+      {
+        colId: 'leverage',
+        headerName: t('Leverage'),
+        headerClass: 'uppercase',
+        cellClass: '!flex h-full items-center justify-center',
+        field: 'currentLeverage',
+        type: 'rightAligned',
+        cellRendererSelector: (
+          params: ICellRendererParams
+        ): CellRendererSelectorResult => {
+          return {
+            component: params.node.rowPinned ? EmptyCell : PriceFlashCell,
+          };
+        },
+        valueFormatter: ({
+          value,
+          node,
+        }: VegaValueFormatterParams<Position, 'currentLeverage'>) =>
+          value === undefined ? '' : formatNumber(value.toString(), 1),
+      },
+      {
+        colId: 'marginallocated',
+        headerName: t('Margin allocated'),
+        headerClass: 'uppercase',
+        cellClass: '!flex h-full flex-col justify-center',
+        field: 'capitalUtilisation',
+        type: 'rightAligned',
+        cellRenderer: ({ value, node, data }: GroupCellRendererParams) => {
+          const valueFormatted =
+            data && value
+              ? (() => {
+                  return {
+                    low: `${formatNumber(value, 2)}%`,
+                    high: addDecimalsFormatNumber(
+                      data.totalBalance,
+                      data.decimals
+                    ),
+                    value: Number(value),
+                  };
+                })()
+              : undefined;
+          return node.rowPinned ? (
+            ''
+          ) : (
+            <ProgressBarCell valueFormatted={valueFormatted} />
+          );
+        },
+      },
+      {
+        colId: 'realisedpnl',
+        headerName: t('Realised PNL'),
+        headerClass: 'uppercase',
+        cellClass: '!flex h-full items-center',
+        field: 'realisedPNL',
+        type: 'rightAligned',
+        cellClassRules: signedNumberCssClassRules,
+        valueFormatter: ({
+          value,
+          data,
+        }: VegaValueFormatterParams<Position, 'realisedPNL'>) =>
+          value === undefined || data === undefined
+            ? ''
+            : addDecimalsFormatNumber(value.toString(), data.decimals),
+        cellRenderer: 'PriceFlashCell',
+        headerTooltip: t('P&L excludes any fees paid.'),
+      },
+      {
+        colId: 'unrealisedpnl',
+        headerName: t('Unrealised PNL'),
+        headerClass: 'uppercase',
+        cellClass: '!flex h-full items-center',
+        field: 'unrealisedPNL',
+        type: 'rightAligned',
+        cellClassRules: signedNumberCssClassRules,
+        valueFormatter: ({
+          value,
+          data,
+        }: VegaValueFormatterParams<Position, 'unrealisedPNL'>) =>
+          value === undefined || data === undefined
+            ? ''
+            : addDecimalsFormatNumber(value.toString(), data.decimals),
+        cellRenderer: 'PriceFlashCell',
+      },
+      {
+        colId: 'updated',
+        headerName: t('Updated'),
+        headerClass: 'uppercase',
+        cellClass: '!flex h-full items-center',
+        field: 'updatedAt',
+        type: 'rightAligned',
+        valueFormatter: ({
+          value,
+        }: VegaValueFormatterParams<Position, 'updatedAt'>) => {
+          if (!value) {
+            return '';
+          }
+          return getDateTimeFormat().format(new Date(value));
+        },
+      },
+    ];
+  }, []);
+  const defaultColDef = useMemo(() => {
+    return {
+      sortable: true,
+      unSortIcon: true,
+      headerClass: 'uppercase',
+      cellClass: '!flex h-full items-center',
+    };
+  }, []);
+  return { columnDefs, defaultColDef };
+};
+
+export default useColumnDefinitions;
@@ -1,5 +0,0 @@
-subscription CandleLive($marketId: ID!) {
-  candles(marketId: $marketId, interval: INTERVAL_I1H) {
-    close
-  }
-}
@@ -1,44 +0,0 @@
-fragment SimpleMarketDataFields on MarketData {
-  market {
-    id
-    state
-  }
-}
-
-query SimpleMarkets($CandleSince: String!) {
-  markets {
-    id
-    name
-    state
-    data {
-      ...SimpleMarketDataFields
-    }
-    tradableInstrument {
-      instrument {
-        code
-        metadata {
-          tags
-        }
-        product {
-          __typename
-          ... on Future {
-            quoteName
-            settlementAsset {
-              symbol
-            }
-          }
-        }
-      }
-    }
-    candles(interval: INTERVAL_I1H, since: $CandleSince) {
-      open
-      close
-    }
-  }
-}
-
-subscription SimpleMarketDataSub {
-  marketData {
-    ...SimpleMarketDataFields
-  }
-}
@@ -1,30 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-import { MarketState } from "@vegaprotocol/types";
-
-// ====================================================
-// GraphQL fragment: SimpleMarketDataFields
-// ====================================================
-
-export interface SimpleMarketDataFields_market {
-  __typename: "Market";
-  /**
-   * Market ID
-   */
-  id: string;
-  /**
-   * Current state of the market
-   */
-  state: MarketState;
-}
-
-export interface SimpleMarketDataFields {
-  __typename: "MarketData";
-  /**
-   * market ID of the associated mark price
-   */
-  market: SimpleMarketDataFields_market;
-}
@@ -1,37 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-import { MarketState } from "@vegaprotocol/types";
-
-// ====================================================
-// GraphQL subscription operation: SimpleMarketDataSub
-// ====================================================
-
-export interface SimpleMarketDataSub_marketData_market {
-  __typename: "Market";
-  /**
-   * Market ID
-   */
-  id: string;
-  /**
-   * Current state of the market
-   */
-  state: MarketState;
-}
-
-export interface SimpleMarketDataSub_marketData {
-  __typename: "MarketData";
-  /**
-   * market ID of the associated mark price
-   */
-  market: SimpleMarketDataSub_marketData_market;
-}
-
-export interface SimpleMarketDataSub {
-  /**
-   * Subscribe to the mark price changes
-   */
-  marketData: SimpleMarketDataSub_marketData;
-}
@@ -1,109 +0,0 @@
-/* tslint:disable */
-/* eslint-disable */
-// @generated
-// This file was automatically generated and should not be edited.
-
-import { MarketState } from "@vegaprotocol/types";
-
-// ====================================================
-// GraphQL query operation: SimpleMarkets
-// ====================================================
-
-export interface SimpleMarkets_markets_tradableInstrument_instrument_metadata {
-  __typename: "InstrumentMetadata";
-  /**
-   * An arbitrary list of tags to associated to associate to the Instrument (string list)
-   */
-  tags: string[] | null;
-}
-
-export interface SimpleMarkets_markets_tradableInstrument_instrument_product_settlementAsset {
-  __typename: "Asset";
-  /**
-   * The symbol of the asset (e.g: GBP)
-   */
-  symbol: string;
-}
-
-export interface SimpleMarkets_markets_tradableInstrument_instrument_product {
-  __typename: "Future";
-  /**
-   * String representing the quote (e.g. BTCUSD -> USD is quote)
-   */
-  quoteName: string;
-  /**
-   * The name of the asset (string)
-   */
-  settlementAsset: SimpleMarkets_markets_tradableInstrument_instrument_product_settlementAsset;
-}
-
-export interface SimpleMarkets_markets_tradableInstrument_instrument {
-  __typename: "Instrument";
-  /**
-   * A short non necessarily unique code used to easily describe the instrument (e.g: FX:BTCUSD/DEC18) (string)
-   */
-  code: string;
-  /**
-   * Full and fairly descriptive name for the instrument
-   */
-  name: string;
-  /**
-   * Metadata for this instrument
-   */
-  metadata: SimpleMarkets_markets_tradableInstrument_instrument_metadata;
-  /**
-   * A reference to or instance of a fully specified product, including all required product parameters for that product (Product union)
-   */
-  product: SimpleMarkets_markets_tradableInstrument_instrument_product;
-}
-
-export interface SimpleMarkets_markets_tradableInstrument {
-  __typename: "TradableInstrument";
-  /**
-   * An instance of, or reference to, a fully specified instrument.
-   */
-  instrument: SimpleMarkets_markets_tradableInstrument_instrument;
-}
-
-export interface SimpleMarkets_markets_candles {
-  __typename: "Candle";
-  /**
-   * Open price (uint64)
-   */
-  open: string;
-  /**
-   * Close price (uint64)
-   */
-  close: string;
-}
-
-export interface SimpleMarkets_markets {
-  __typename: "Market";
-  /**
-   * Market ID
-   */
-  id: string;
-  /**
-   * Current state of the market
-   */
-  state: MarketState;
-  /**
-   * An instance of, or reference to, a tradable instrument.
-   */
-  tradableInstrument: SimpleMarkets_markets_tradableInstrument;
-  /**
-   * Candles on a market, for the 'last' n candles, at 'interval' seconds as specified by parameters
-   */
-  candles: (SimpleMarkets_markets_candles | null)[] | null;
-}
-
-export interface SimpleMarkets {
-  /**
-   * One or more instruments that are trading on the VEGA network
-   */
-  markets: SimpleMarkets_markets[] | null;
-}
-
-export interface SimpleMarketsVariables {
-  CandleSince: string;
-}
@@ -1,117 +0,0 @@
-import { Schema as Types } from '@vegaprotocol/types';
-
-import { gql } from '@apollo/client';
-import * as Apollo from '@apollo/client';
-const defaultOptions = {} as const;
-export type SimpleMarketDataFieldsFragment = { __typename?: 'MarketData', market: { __typename?: 'Market', id: string, state: Types.MarketState } };
-
-export type SimpleMarketsQueryVariables = Types.Exact<{
-  CandleSince: Types.Scalars['String'];
-}>;
-
-
-export type SimpleMarketsQuery = { __typename?: 'Query', markets?: Array<{ __typename?: 'Market', id: string, name: string, state: Types.MarketState, data?: { __typename?: 'MarketData', market: { __typename?: 'Market', id: string, state: Types.MarketState } } | null, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', code: string, metadata: { __typename?: 'InstrumentMetadata', tags?: Array<string> | null }, product: { __typename: 'Future', quoteName: string, settlementAsset: { __typename?: 'Asset', symbol: string } } } }, candles?: Array<{ __typename?: 'Candle', open: string, close: string } | null> | null }> | null };
-
-export type SimpleMarketDataSubSubscriptionVariables = Types.Exact<{ [key: string]: never; }>;
-
-
-export type SimpleMarketDataSubSubscription = { __typename?: 'Subscription', marketData: { __typename?: 'MarketData', market: { __typename?: 'Market', id: string, state: Types.MarketState } } };
-
-export const SimpleMarketDataFieldsFragmentDoc = gql`
-    fragment SimpleMarketDataFields on MarketData {
-  market {
-    id
-    state
-  }
-}
-    `;
-export const SimpleMarketsDocument = gql`
-    query SimpleMarkets($CandleSince: String!) {
-  markets {
-    id
-    name
-    state
-    data {
-      ...SimpleMarketDataFields
-    }
-    tradableInstrument {
-      instrument {
-        code
-        metadata {
-          tags
-        }
-        product {
-          __typename
-          ... on Future {
-            quoteName
-            settlementAsset {
-              symbol
-            }
-          }
-        }
-      }
-    }
-    candles(interval: INTERVAL_I1H, since: $CandleSince) {
-      open
-      close
-    }
-  }
-}
-    ${SimpleMarketDataFieldsFragmentDoc}`;
-
-/**
- * __useSimpleMarketsQuery__
- *
- * To run a query within a React component, call `useSimpleMarketsQuery` and pass it any options that fit your needs.
- * When your component renders, `useSimpleMarketsQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useSimpleMarketsQuery({
- *   variables: {
- *      CandleSince: // value for 'CandleSince'
- *   },
- * });
- */
-export function useSimpleMarketsQuery(baseOptions: Apollo.QueryHookOptions<SimpleMarketsQuery, SimpleMarketsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<SimpleMarketsQuery, SimpleMarketsQueryVariables>(SimpleMarketsDocument, options);
-      }
-export function useSimpleMarketsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<SimpleMarketsQuery, SimpleMarketsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<SimpleMarketsQuery, SimpleMarketsQueryVariables>(SimpleMarketsDocument, options);
-        }
-export type SimpleMarketsQueryHookResult = ReturnType<typeof useSimpleMarketsQuery>;
-export type SimpleMarketsLazyQueryHookResult = ReturnType<typeof useSimpleMarketsLazyQuery>;
-export type SimpleMarketsQueryResult = Apollo.QueryResult<SimpleMarketsQuery, SimpleMarketsQueryVariables>;
-export const SimpleMarketDataSubDocument = gql`
-    subscription SimpleMarketDataSub {
-  marketData {
-    ...SimpleMarketDataFields
-  }
-}
-    ${SimpleMarketDataFieldsFragmentDoc}`;
-
-/**
- * __useSimpleMarketDataSubSubscription__
- *
- * To run a query within a React component, call `useSimpleMarketDataSubSubscription` and pass it any options that fit your needs.
- * When your component renders, `useSimpleMarketDataSubSubscription` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the subscription, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useSimpleMarketDataSubSubscription({
- *   variables: {
- *   },
- * });
- */
-export function useSimpleMarketDataSubSubscription(baseOptions?: Apollo.SubscriptionHookOptions<SimpleMarketDataSubSubscription, SimpleMarketDataSubSubscriptionVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useSubscription<SimpleMarketDataSubSubscription, SimpleMarketDataSubSubscriptionVariables>(SimpleMarketDataSubDocument, options);
-      }
-export type SimpleMarketDataSubSubscriptionHookResult = ReturnType<typeof useSimpleMarketDataSubSubscription>;
-export type SimpleMarketDataSubSubscriptionResult = Apollo.SubscriptionResult<SimpleMarketDataSubSubscription>;
--- a/Show More
+++ b/Show More
				`@@ -0,0 +1 @@`
				`export { default as ConsoleLiteGrid } from './console-lite-grid';`
				`@@ -0,0 +1 @@`
				`export { default as FillsManager } from './fills';`
				`@@ -0,0 +1 @@`
				`export { default as OrdersManager } from './orders';`
				`@@ -0,0 +1 @@`
				`export { default as PositionsManager } from './positions';`