chore: trigger test run

* chore: fix DealTicket mock

* chore: fix React Hydration Error

* test: change tag

Co-authored-by: Rado <szpiechrados@gmail.com>

.eslintrc.json

@@ -51,8 +51,7 @@
             "ul": ["list"],
             "ol": ["list"]
           }
-        ],
-        "curly": "warn"
+        ]
       }
     },
     {
@@ -75,7 +74,8 @@
             "prefer": "type-imports",
             "disallowTypeAnnotations": true
           }
-        ]
+        ],
+        "curly": ["error", "multi-line"]
       }
     },
     {

.github/ISSUE_TEMPLATE/---bug.md

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

.github/ISSUE_TEMPLATE/chore.md

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

.github/ISSUE_TEMPLATE/user-story.md

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

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

@@ -15,19 +15,19 @@ on:
           - stats-e2e
           - token-e2e
           - trading-e2e
-      includeFlows:
-        description: 'Include long flows (if any)?'
+      runAlltests:
+        description: 'Run only smoke tests?'
         required: true
         type: boolean
-        default: true
+        default: false
 
 jobs:
   manual:
     name: Run capsule tests -- manual trigger
-    runs-on: ubuntu-latest
+    runs-on: self-hosted
     env:
       GO111MODULE: 'on'
-      GOPROXY: ${{ secrets.GO_PROXY }}
+      VEGA_VERSION: 'v0.57.0'
     steps:
       #######
       ## Setup langs
@@ -44,11 +44,31 @@ jobs:
           node-version: 16
 
       #######
-      ## Checkout capsule
+      ## Install Yarn
       #######
+      - name: Setup yarn
+        run: npm install -g yarn
+
+      #######
+      ## Checkout repos
+      #######
+
+      # 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'
+
+      # See if we capsule is needed for this project
+      - name: See if capsule is necessary
+        if: ${{  github.event.inputs.project == 'explorer-e2e' || github.event.inputs.project == 'token-e2e' }}
+        run: echo RUN_CAPSULE=true >> $GITHUB_ENV
 
       # Checkout capsule to build local network
       - name: Checkout capsule
+        if: ${{ env.RUN_CAPSULE }}
         uses: actions/checkout@v2
         with:
           repository: vegaprotocol/vegacapsule
@@ -56,46 +76,61 @@ jobs:
           token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
           path: './capsule'
 
+      # 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 binaries
       #######
       - name: Build capsule
+        if: ${{ env.RUN_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: develop
-          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
+        if: ${{ env.RUN_CAPSULE }}
+        run: |
+          wget 'https://github.com/vegaprotocol/vega/releases/download/${{ env.VEGA_VERSION }}/vega-linux-amd64.zip'
+          unzip vega-linux-amd64.zip -d ${{ env.GOBIN }}
 
       - name: Install date-node binaries
-        run: go install ./cmd/data-node
-        working-directory: vega
+        if: ${{ env.RUN_CAPSULE }}
+        run: |
+          wget 'https://github.com/vegaprotocol/vega/releases/download/${{ env.VEGA_VERSION }}/data-node-linux-amd64.zip'
+          unzip data-node-linux-amd64.zip -d ${{ env.GOBIN }}
+
+      - name: Install Vega wallet binaries
+        run: |
+          wget 'https://github.com/vegaprotocol/vega/releases/download/${{ env.VEGA_VERSION }}/vegawallet-linux-amd64.zip'
+          unzip vegawallet-linux-amd64.zip -d ${{ env.GOBIN }}
 
       ######
       ## Start capsule
       ######
       - name: Login to docker
+        if: ${{ env.RUN_CAPSULE }}
         run: echo -n ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }} | docker login https://ghcr.io -u vega-ci-bot --password-stdin
 
       - name: Start nomad
+        if: ${{ env.RUN_CAPSULE }}
         run: vegacapsule nomad &
 
       - name: Bootstrap network
+        if: ${{ env.RUN_CAPSULE }}
         run: vegacapsule network bootstrap --config-path=../frontend-monorepo/vegacapsule/config.hcl --force
         working-directory: capsule
 
@@ -113,40 +148,58 @@ jobs:
         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 &
+
+      - name: Import fairground network
+        if: ${{ env.RUN_CAPSULE==false }}
+        run: vegawallet network import --from-url="https://raw.githubusercontent.com/vegaprotocol/networks/master/fairground/fairground.toml" --force --home ~/.vegacapsule/testnet/wallet
+
+      - name: Start service using fairground network
+        if: ${{ env.RUN_CAPSULE==false }}
+        run: vegawallet service run --network fairground --automatic-consent --home ~/.vegacapsule/testnet/wallet --no-version-check &
+
+      - name: Start service using capsule network
+        if: ${{ env.RUN_CAPSULE }}
+        run: vegawallet service run --network DV --automatic-consent  --home ~/.vegacapsule/testnet/wallet --no-version-check &
 
       ######
       ## Run some tests
       ######
 
-      # Checkout front ends
-      - name: Checkout frontend mono repo
-        uses: actions/checkout@v2
-        with:
-          ref: ${{ github.event.pull_request.head.ref }}
-          fetch-depth: 0
+      # To make sure that all Cypress binaries are installed properly
+      - name: Install cypress bins
+        run: yarn cypress install
+        working-directory: frontend-monorepo
 
-      - name: Install root dependencies
-        run: yarn install
-
-      - name: Run Cypress tests
-        run: yarn nx run ${{ github.event.inputs.project }}:e2e --record --key ${{ secrets.CYPRESS_RECORD_KEY }} --browser chrome
+      - name: Run smoke Cypress tests
+        if: ${{ github.event.inputs.runAlltests == 'true' }}
+        run: yarn nx run ${{ github.event.inputs.project }}:e2e --record --key ${{ secrets.CYPRESS_RECORD_KEY }} --env.grepTags='@smoke' --browser chrome
+        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 }}
+          CYPRESS_TEARDOWN_NETWORK_AFTER_FLOWS: true
+
+      - name: Run Cypress tests
+        if: ${{ github.event.inputs.runAlltests == 'false' }}
+        run: yarn nx run ${{ github.event.inputs.project }}:e2e --record --key ${{ secrets.CYPRESS_RECORD_KEY }} --browser chrome
+        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_TEARDOWN_NETWORK_AFTER_FLOWS: true
 
       ######
       ## Upload logs
       ######
 
       - name: Logs
-        if: ${{ always() }}
+        if: ${{ env.RUN_CAPSULE }}
         run: vegacapsule network logs > vega-capsule-logs.txt
 
       - uses: actions/upload-artifact@v2
+        if: ${{ env.RUN_CAPSULE }}
         with:
           name: logs
           path: ./vega-capsule-logs.txt

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

@@ -9,9 +9,10 @@ on:
 jobs:
   nightly:
     name: Run capsule tests -- nightly
-    runs-on: ubuntu-latest
+    runs-on: self-hosted
     env:
       GO111MODULE: 'on'
+      VEGA_VERSION: 'v0.57.0'
     steps:
       #######
       ## Setup langs
@@ -28,8 +29,22 @@ jobs:
           node-version: 16
 
       #######
-      ## Checkout capsule
+      ## Install Yarn
       #######
+      - name: Setup yarn
+        run: npm install -g yarn
+
+      #######
+      ## Checkout repos
+      #######
+
+      # 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
@@ -40,6 +55,20 @@ jobs:
           token: ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }}
           path: './capsule'
 
+      # 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 binaries
       #######
@@ -50,25 +79,20 @@ jobs:
       - name: Set GOBIN
         run: echo GOBIN=$(go env GOPATH)/bin >> $GITHUB_ENV
 
-      - name: Checkout Vega
-        uses: actions/checkout@v2
-        with:
-          repository: vegaprotocol/vega
-          ref: develop
-          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
+        run: |
+          wget 'https://github.com/vegaprotocol/vega/releases/download/${{ env.VEGA_VERSION }}/vega-linux-amd64.zip'
+          unzip vega-linux-amd64.zip -d ${{ env.GOBIN }}
 
       - name: Install date-node binaries
-        run: go install ./cmd/data-node
-        working-directory: vega
+        run: |
+          wget 'https://github.com/vegaprotocol/vega/releases/download/${{ env.VEGA_VERSION }}/data-node-linux-amd64.zip'
+          unzip data-node-linux-amd64.zip -d ${{ env.GOBIN }}
+
+      - name: Install Vega wallet binaries
+        run: |
+          wget 'https://github.com/vegaprotocol/vega/releases/download/${{ env.VEGA_VERSION }}/vegawallet-linux-amd64.zip'
+          unzip vegawallet-linux-amd64.zip -d ${{ env.GOBIN }}
 
       ######
       ## Start capsule
@@ -98,37 +122,32 @@ jobs:
       - 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: vegawallet service run --network DV --automatic-consent  --home ~/.vegacapsule/testnet/wallet --no-version-check &
 
       ######
       ## Run some tests
       ######
 
-      # Checkout front ends
-      - name: Checkout frontend mono repo
-        uses: actions/checkout@v2
-        with:
-          ref: master
-          fetch-depth: 0
-
-      - name: Install root dependencies
-        run: yarn install
+      # To make sure that all Cypress binaries are installed properly
+      - name: Install cypress bins
+        run: yarn cypress install
+        working-directory: frontend-monorepo
 
       - name: Run Cypress tests
         run: yarn nx run-many --target=e2e --all --record --key ${{ secrets.CYPRESS_RECORD_KEY }} --browser chrome
+        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
+          CYPRESS_TEARDOWN_NETWORK_AFTER_FLOWS: true
 
       ######
       ## Upload logs
       ######
 
       - name: Logs
-        if: ${{ always() }}
         run: vegacapsule network logs > vega-capsule-logs.txt
 
       - uses: actions/upload-artifact@v2

.github/workflows/capsule-cypress.yml

@@ -3,8 +3,8 @@ name: Capsule tests
 on:
   push:
     branches:
-      - master
       - develop
+      - main
   pull_request:
     types:
       - opened
@@ -15,10 +15,10 @@ on:
 jobs:
   pr:
     name: Run capsule tests - PR
-    runs-on: ubuntu-latest
-    if: ${{ github.event_name == 'pull_request' && github.event.pull_request.draft == false }}
+    runs-on: self-hosted
     env:
       GO111MODULE: 'on'
+      VEGA_VERSION: 'v0.57.0'
     steps:
       #######
       ## Setup langs
@@ -35,7 +35,13 @@ jobs:
           node-version: 16
 
       #######
-      ## Checkout capsule
+      ## Install Yarn
+      #######
+      - name: Setup yarn
+        run: npm install -g yarn
+
+      #######
+      ## Checkout repos
       #######
 
       # Checkout front ends
@@ -46,8 +52,32 @@ jobs:
           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
+
+      # See affected apps to see if building all binaries is necessary
+      - name: See affected apps
+        run: echo AFFECTED=$(yarn nx print-affected --base=origin/${{github.base_ref}} --head=${{github.head_ref}} --select=projects) >> $GITHUB_ENV
+        working-directory: frontend-monorepo
+
+      - name: See if capsule is necessary
+        if: ${{ contains(env.AFFECTED, 'token') || contains(env.AFFECTED, 'token-e2e') || contains(env.AFFECTED, 'explorer') || contains(env.AFFECTED, 'explorer-e2e') }}
+        run: echo RUN_CAPSULE=true >> $GITHUB_ENV
+
       # Checkout capsule to build local network
       - name: Checkout capsule
+        if: ${{ env.RUN_CAPSULE }}
         uses: actions/checkout@v2
         with:
           repository: vegaprotocol/vegacapsule
@@ -59,42 +89,43 @@ jobs:
       ## Build binaries
       #######
       - name: Build capsule
+        if: ${{ env.RUN_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: develop
-          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
+        if: ${{ env.RUN_CAPSULE }}
+        run: |
+          wget 'https://github.com/vegaprotocol/vega/releases/download/${{ env.VEGA_VERSION }}/vega-linux-amd64.zip'
+          unzip vega-linux-amd64.zip -d ${{ env.GOBIN }}
 
       - name: Install date-node binaries
-        run: go install ./cmd/data-node
-        working-directory: vega
+        if: ${{ env.RUN_CAPSULE }}
+        run: |
+          wget 'https://github.com/vegaprotocol/vega/releases/download/${{ env.VEGA_VERSION }}/data-node-linux-amd64.zip'
+          unzip data-node-linux-amd64.zip -d ${{ env.GOBIN }}
+
+      - name: Install Vega wallet binaries
+        run: |
+          wget 'https://github.com/vegaprotocol/vega/releases/download/${{ env.VEGA_VERSION }}/vegawallet-linux-amd64.zip'
+          unzip vegawallet-linux-amd64.zip -d ${{ env.GOBIN }}
 
       ######
       ## Start capsule
       ######
       - name: Login to docker
+        if: ${{ env.RUN_CAPSULE }}
         run: echo -n ${{ secrets.VEGA_CI_BOT_GITHUB_TOKEN }} | docker login https://ghcr.io -u vega-ci-bot --password-stdin
 
       - name: Start nomad
+        if: ${{ env.RUN_CAPSULE }}
         run: vegacapsule nomad &
 
       - name: Bootstrap network
+        if: ${{ env.RUN_CAPSULE }}
         run: vegacapsule network bootstrap --config-path=../frontend-monorepo/vegacapsule/config.hcl --force
         working-directory: capsule
 
@@ -112,8 +143,18 @@ jobs:
         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 &
+
+      - name: Import fairground network
+        if: ${{ env.RUN_CAPSULE==false }}
+        run: vegawallet network import --from-url="https://raw.githubusercontent.com/vegaprotocol/networks/master/fairground/fairground.toml" --force --home ~/.vegacapsule/testnet/wallet
+
+      - name: Start service using fairground network
+        if: ${{ env.RUN_CAPSULE==false }}
+        run: vegawallet service run --network fairground --automatic-consent --home ~/.vegacapsule/testnet/wallet --no-version-check &
+
+      - name: Start service using capsule network
+        if: ${{ env.RUN_CAPSULE }}
+        run: vegawallet service run --network DV --automatic-consent  --home ~/.vegacapsule/testnet/wallet --no-version-check &
 
       ######
       ## Run some tests
@@ -123,31 +164,32 @@ jobs:
         uses: nrwl/nx-set-shas@v2
         with:
           working-directory: frontend-monorepo
-          main-branch-name: master
+          main-branch-name: ${{github.base_ref}}
 
-      - name: Install root dependencies
-        run: yarn install
+      # 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 affected:e2e --record --key ${{ secrets.CYPRESS_RECORD_KEY }} --browser chrome
+        run: npx nx affected:e2e --record --key ${{ secrets.CYPRESS_RECORD_KEY }} --env.grepTags='@smoke' --browser chrome
         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
+          CYPRESS_TEARDOWN_NETWORK_AFTER_FLOWS: true
 
       ######
       ## Upload logs
       ######
 
       - name: Logs
-        if: ${{ always() }}
+        if: ${{ env.RUN_CAPSULE }}
         run: vegacapsule network logs > vega-capsule-logs.txt
 
       - uses: actions/upload-artifact@v2
-        if: ${{ always() }}
+        if: ${{ env.RUN_CAPSULE }}
         with:
           name: logs
           path: ./vega-capsule-logs.txt

.github/workflows/ipfs.yml

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

.github/workflows/test.yml

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

.husky/commit-msg

@@ -6,7 +6,3 @@ yarn commitlint --edit "${1}"
 
 # Lint all staged files
 yarn lint-staged
-
-# Build & test affected apps
-yarn nx affected:build --uncommitted
-yarn nx affected:test --uncommitted

.prettierignore

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

README.md

@@ -69,10 +69,10 @@ Run `nx serve my-app` for a dev server. Navigate to the port specified in `app/<
 
 ### Using Apollo GraphQL and Generate Types
 
-In order to generate the schemas for your GraphQL queries, you can run `NX_VEGA_URL=[YOUR URL HERE] nx run types:generate`.
+In order to generate the schemas for your GraphQL queries, you can run `GRAPHQL_SCHEMA_PATH=[YOUR SCHEMA FILE / API URL HERE] nx run types:generate`.
 
 ```bash
-export  NX_VEGA_URL=https://api.n11.testnet.vega.xyz/graphql
+export  GRAPHQL_SCHEMA_PATH=https://api.n11.testnet.vega.xyz/graphql
 yarn nx run types:generate
 ```
 

apps/console-lite-e2e/.env

@@ -23,5 +23,4 @@ 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

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

@@ -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',
@@ -35,5 +39,8 @@ module.exports = defineConfig({
     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,
   },
 });

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

@@ -1,4 +1,4 @@
-describe('simple trading app', () => {
+describe('simple trading app', { tags: '@smoke' }, () => {
   beforeEach(() => cy.visit('/'));
 
   it('render', () => {

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

@@ -1,4 +1,4 @@
-describe('console lite header', () => {
+describe('console lite header', { tags: '@smoke' }, () => {
   beforeEach(() => {
     window.localStorage.setItem('theme', 'dark');
     cy.visit('/');

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

@@ -1,14 +1,19 @@
 import { aliasQuery } from '@vegaprotocol/cypress';
+import type { Markets } from '@vegaprotocol/market-list';
 import {
   generateLongListMarkets,
   generateSimpleMarkets,
+  generateMarketsData,
+  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, 'MarketsDataQuery', generateMarketsData());
+        aliasQuery(req, 'MarketsCandlesQuery', generateMarketsCandles());
       });
       cy.visit('/markets');
     });
@@ -62,7 +67,9 @@ describe('market list', () => {
   describe('url params should select filters', () => {
     beforeEach(() => {
       cy.mockGQL((req) => {
-        aliasQuery(req, 'SimpleMarkets', generateSimpleMarkets());
+        aliasQuery(req, 'Markets', generateSimpleMarkets());
+        aliasQuery(req, 'MarketsDataQuery', generateMarketsData());
+        aliasQuery(req, 'MarketsCandlesQuery', generateMarketsCandles());
       });
     });
 
@@ -73,10 +80,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: Markets | 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 +106,9 @@ 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, 'MarketsDataQuery', generateMarketsData());
+        aliasQuery(req, 'MarketsCandlesQuery', generateMarketsCandles());
       });
       performance.mark('start-1k');
       cy.visit('/markets');

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

@@ -1,6 +1,10 @@
 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,13 +13,17 @@ 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, Markets } 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, 'MarketsCandlesQuery', generateMarketsCandles());
+      aliasQuery(req, 'MarketsDataQuery', generateMarketsData());
+      aliasQuery(req, 'DealTicket', generateDealTicket());
       aliasQuery(req, 'MarketTags', generateMarketTags());
       aliasQuery(req, 'MarketPositions', generateMarketPositions());
       aliasQuery(req, 'EstimateOrder', generateEstimateOrder());
@@ -23,12 +31,14 @@ describe('market selector', () => {
       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: Markets | undefined = response?.response?.body?.data;
+      if (data.marketsConnection.edges.length) {
+        markets = data.marketsConnection.edges.map((edge) => edge.node);
       }
     });
   });
@@ -39,7 +49,7 @@ describe('market selector', () => {
       connectVegaWallet();
       cy.get('input[placeholder="Search"]').should(
         'have.value',
-        markets[0].name
+        markets[0].tradableInstrument.instrument.name
       );
       cy.getByTestId('arrow-button').click();
       cy.getByTestId('market-pane').should('be.visible');
@@ -47,7 +57,7 @@ describe('market selector', () => {
         .children()
         .find('[role="button"]')
         .first()
-        .should('contain.text', markets[0].name);
+        .should('contain.text', markets[0].tradableInstrument.instrument.name);
       cy.getByTestId('market-pane')
         .children()
         .find('[role="button"]')
@@ -70,8 +80,8 @@ describe('market selector', () => {
       cy.get('input[placeholder="Search"]').type('aa');
       const filtered = markets.filter(
         (market) =>
-          market.data.market.state === 'STATE_ACTIVE' &&
-          market.name.match(/aa/i)
+          market.state === 'STATE_ACTIVE' &&
+          market.tradableInstrument.instrument.name.match(/aa/i)
       );
       cy.getByTestId('market-pane')
         .children()
@@ -88,7 +98,7 @@ describe('market selector', () => {
       );
       cy.get('input[placeholder="Search"]').should(
         'have.value',
-        filtered[filtered.length - 1].name
+        filtered[filtered.length - 1].tradableInstrument.instrument.name
       );
     }
   });
@@ -126,12 +136,12 @@ 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(
         'have.value',
-        markets[0].name
+        markets[0].tradableInstrument.instrument.name
       );
     }
   });

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

@@ -1,5 +1,9 @@
 import { aliasQuery } from '@vegaprotocol/cypress';
-import { generateSimpleMarkets } from '../support/mocks/generate-markets';
+import {
+  generateSimpleMarkets,
+  generateMarketsCandles,
+  generateMarketsData,
+} 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,13 +13,17 @@ import { generatePartyMarketData } from '../support/mocks/generate-party-market-
 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 { Markets, 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, 'MarketsCandlesQuery', generateMarketsCandles());
+      aliasQuery(req, 'MarketsDataQuery', 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());
@@ -25,9 +33,10 @@ describe('Market trade', () => {
       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: Markets | undefined = response?.response?.body?.data;
+      if (data.marketsConnection.edges.length) {
+        markets = data.marketsConnection.edges.map((edge) => edge.node);
       }
     });
   });
@@ -170,7 +179,50 @@ describe('Market trade', () => {
         .find('button')
         .should('have.text', '2');
       cy.get('button').contains('Max').click();
-      cy.getByTestId('price-slippage-value').should('have.text', '0.02%');
+    }
+  });
+
+  it('slippage value should be displayed', () => {
+    if (markets?.length) {
+      cy.visit(`/trading/${markets[1].id}`);
+      connectVegaWallet();
+      cy.get('#step-1-control [aria-label^="Selected value"]').click();
+      cy.get('button[aria-label="Open short position"]').click();
+      cy.get('#step-2-control').click();
+      cy.get('button').contains('Max').click();
+      cy.get('#step-2-panel')
+        .find('dl')
+        .eq(2)
+        .find('dd')
+        .should('have.text', '0.02%');
+    }
+  });
+
+  it('allow slippage value to be adjusted', () => {
+    if (markets?.length) {
+      cy.visit(`/trading/${markets[1].id}`);
+      connectVegaWallet();
+      cy.get('#step-1-control [aria-label^="Selected value"]').click();
+      cy.get('button[aria-label="Open short position"]').click();
+      cy.get('#step-2-control').click();
+      cy.get('button').contains('Max').click();
+      cy.get('#step-2-panel')
+        .find('dl')
+        .eq(2)
+        .find('dd')
+        .should('have.text', '0.02%');
+      cy.get('#step-2-panel').find('dl').eq(2).find('button').click();
+      cy.get('#input-order-slippage')
+        .focus()
+        .type('{backspace}{backspace}{backspace}1');
+
+      cy.getByTestId('slippage-dialog').find('button').click();
+
+      cy.get('#step-2-panel')
+        .find('dl')
+        .eq(2)
+        .find('dd')
+        .should('have.text', '1%');
     }
   });
 
@@ -195,9 +247,9 @@ describe('Market trade', () => {
       cy.get('#step-2-panel').find('dd').eq(0).find('button').click();
       cy.get('#step-2-panel')
         .find('dt')
-        .eq(3)
+        .eq(2)
         .should('have.text', 'Est. Position Size (tDAI)');
-      cy.get('#step-2-panel').find('dd').eq(3).should('have.text', '197.86012');
+      cy.get('#step-2-panel').find('dd').eq(2).should('have.text', '197.86012');
     }
   });
 
@@ -210,11 +262,11 @@ describe('Market trade', () => {
       cy.get('#step-2-control').click();
       cy.get('#step-2-panel')
         .find('dt')
-        .eq(4)
+        .eq(3)
         .should('have.text', 'Est. Fees (tDAI)');
       cy.get('#step-2-panel')
         .find('dd')
-        .eq(4)
+        .eq(3)
         .should('have.text', '3.00000 (3.03%)');
     }
   });

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

@@ -2,8 +2,17 @@ import {
   connectVegaWallet,
   disconnectVegaWallet,
 } from '../support/connect-wallet';
+import { aliasQuery } from '@vegaprotocol/cypress';
+import {
+  generatePositions,
+  emptyPositions,
+} from '../support/mocks/generate-positions';
+import { generateAccounts } from '../support/mocks/generate-accounts';
+import { generateOrders } from '../support/mocks/generate-orders';
+import { generateFills } from '../support/mocks/generate-fills';
+import { generateFillsMarkets } from '../support/mocks/generate-markets';
 
-describe('Portfolio page', () => {
+describe('Portfolio page', { tags: '@smoke' }, () => {
   afterEach(() => {
     disconnectVegaWallet();
   });
@@ -19,19 +28,129 @@ describe('Portfolio page', () => {
   it('certain tabs should exist', () => {
     cy.visit('/portfolio');
     connectVegaWallet();
-    cy.getByTestId('Assets').should('exist');
-    cy.getByTestId('tab-assets').should('exist');
 
-    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', () => {
+    beforeEach(() => {
+      cy.mockGQL((req) => {
+        aliasQuery(req, 'Positions', generatePositions());
+        aliasQuery(req, 'Accounts', generateAccounts());
+      });
+      cy.visit('/portfolio/assets');
+      connectVegaWallet();
+    });
+
+    it('data should be properly rendered', () => {
+      cy.get('.ag-center-cols-container .ag-row').should('have.length', 5);
+      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());
+      });
+      cy.visit('/portfolio/positions');
+      connectVegaWallet();
+    });
+
+    it('data should be properly rendered', () => {
+      cy.getByTestId('positions-asset-tDAI').should('exist');
+      cy.getByTestId('positions-asset-tEURO').should('exist');
+    });
+  });
+
+  describe('Orders view', () => {
+    beforeEach(() => {
+      cy.mockGQL((req) => {
+        aliasQuery(req, 'Orders', generateOrders());
+        aliasQuery(req, 'Markets', generateFillsMarkets());
+      });
+      cy.visit('/portfolio/orders');
+      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');
+      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' },
+        });
+      });
+      cy.visit('/portfolio');
+      connectVegaWallet();
+    });
+
+    it('"No data to display" should be always displayed', () => {
+      cy.getByTestId('assets').click();
+      cy.get('div.flex.items-center.justify-center').contains(
+        'No data to display'
+      );
+
+      cy.getByTestId('positions').click();
+      cy.get('div.flex.items-center.justify-center').contains(
+        'No data to display'
+      );
+
+      cy.getByTestId('orders').click();
+      cy.get('div.flex.items-center.justify-center').contains(
+        'No data to display'
+      );
+
+      cy.getByTestId('fills').click();
+      cy.get('div.flex.items-center.justify-center').contains(
+        'No data to display'
+      );
+    });
   });
 });

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

@@ -17,3 +17,5 @@ import '@vegaprotocol/cypress';
 import 'cypress-real-events/support';
 // Import commands.js using ES2015 syntax:
 import './commands';
+import registerCypressGrep from 'cypress-grep';
+registerCypressGrep();

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

@@ -1,4 +1,7 @@
-const protoCandles = [
+import type { Market } from '@vegaprotocol/market-list';
+import { MarketState, MarketTradingMode } from '@vegaprotocol/types';
+
+export const protoCandles = [
   { open: '9556163', close: '9587028', __typename: 'Candle' },
   {
     open: '9587028',
@@ -73,20 +76,31 @@ const protoCandles = [
   },
 ];
 
-export const protoMarket = {
+export const protoMarket: Market = {
   id: 'first-btcusd-id',
-  name: 'AAVEDAI Monthly (30 Jun 2022)',
-  data: {
-    market: {
-      id: 'first-btcusd-id',
-      state: 'STATE_ACTIVE',
-      __typename: 'Market',
+  tradingMode: MarketTradingMode.TRADING_MODE_CONTINUOUS,
+  state: MarketState.STATE_ACTIVE,
+  decimalPlaces: 5,
+  positionDecimalPlaces: 0,
+  marketTimestamps: {
+    __typename: 'MarketTimestamps',
+    close: '',
+    open: '',
+  },
+  fees: {
+    __typename: 'Fees',
+    factors: {
+      __typename: 'FeeFactors',
+      makerFee: '',
+      infrastructureFee: '',
+      liquidityFee: '',
     },
-    __typename: 'MarketData',
   },
   tradableInstrument: {
     instrument: {
+      id: '',
       code: 'AAVEDAI.MF21',
+      name: 'AAVEDAI Monthly (30 Jun 2022)',
       metadata: {
         tags: [
           'formerly:2839D9B2329C9E70',
@@ -101,12 +115,11 @@ 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',
 };

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

@@ -0,0 +1,108 @@
+import merge from 'lodash/merge';
+import type { AccountsQuery } from '@vegaprotocol/accounts';
+import { AccountType } 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: 'Account',
+          type: AccountType.ACCOUNT_TYPE_GENERAL,
+          balance: '100000000',
+          market: null,
+          asset: {
+            __typename: 'Asset',
+            id: 'asset-id',
+            symbol: 'tEURO',
+            decimals: 5,
+          },
+        },
+        {
+          __typename: 'Account',
+          type: AccountType.ACCOUNT_TYPE_GENERAL,
+          balance: '100000000',
+          market: {
+            id: '0604e8c918655474525e1a95367902266ade70d318c2c908f0cca6e3d11dcb13',
+            tradableInstrument: {
+              __typename: 'TradableInstrument',
+              instrument: {
+                __typename: 'Instrument',
+                name: 'AAVEDAI Monthly (30 Jun 2022)',
+              },
+            },
+            __typename: 'Market',
+          },
+          asset: {
+            __typename: 'Asset',
+            id: 'asset-id-2',
+            symbol: 'tDAI',
+            decimals: 5,
+          },
+        },
+        {
+          __typename: 'Account',
+          type: AccountType.ACCOUNT_TYPE_MARGIN,
+          balance: '1000',
+          market: {
+            __typename: 'Market',
+            tradableInstrument: {
+              __typename: 'TradableInstrument',
+              instrument: {
+                __typename: 'Instrument',
+                name: '',
+              },
+            },
+            id: '5a4b0b9e9c0629f0315ec56fcb7bd444b0c6e4da5ec7677719d502626658a376',
+          },
+          asset: {
+            __typename: 'Asset',
+            id: 'asset-id',
+            symbol: 'tEURO',
+            decimals: 5,
+          },
+        },
+        {
+          __typename: 'Account',
+          type: AccountType.ACCOUNT_TYPE_MARGIN,
+          balance: '1000',
+          market: {
+            __typename: 'Market',
+            tradableInstrument: {
+              __typename: 'TradableInstrument',
+              instrument: {
+                __typename: 'Instrument',
+                name: '',
+              },
+            },
+            id: 'c9f5acd348796011c075077e4d58d9b7f1689b7c1c8e030a5e886b83aa96923d',
+          },
+          asset: {
+            __typename: 'Asset',
+            id: 'asset-id-2',
+            symbol: 'tDAI',
+            decimals: 5,
+          },
+        },
+        {
+          __typename: 'Account',
+          type: AccountType.ACCOUNT_TYPE_GENERAL,
+          balance: '100000000',
+          market: null,
+          asset: {
+            __typename: 'Asset',
+            id: 'asset-0',
+            symbol: 'AST0',
+            decimals: 5,
+          },
+        },
+      ],
+    },
+  };
+  return merge(defaultAccounts, override);
+};

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

@@ -2,13 +2,13 @@ export const generateDealTicket = () => {
   return {
     market: {
       id: 'first-btcusd-id',
-      name: 'AAVEDAI Monthly (30 Jun 2022)',
       decimalPlaces: 5,
       positionDecimalPlaces: 0,
       state: 'STATE_ACTIVE',
       tradingMode: 'Continuous',
       tradableInstrument: {
         instrument: {
+          name: 'AAVEDAI Monthly (30 Jun 2022)',
           product: {
             quoteName: 'DAI',
             settlementAsset: {

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

@@ -0,0 +1,111 @@
+import type { FillsQuery, FillFieldsFragment } from '@vegaprotocol/fills';
+import { Side } 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: Side.SIDE_SELL,
+      buyerFee: {
+        infrastructureFee: '5000',
+      },
+      market: {
+        id: 'market-1',
+      },
+    }),
+    generateFill({
+      id: '2',
+      seller: {
+        id: Cypress.env('VEGA_PUBLIC_KEY'),
+      },
+      aggressor: Side.SIDE_BUY,
+    }),
+    generateFill({
+      id: '3',
+      aggressor: 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: 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);
+};

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

@@ -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 { MarketDepth } from '../../../../../libs/market-depth/src/lib/__generated__/MarketDepth';
+
+export const generateMarketDepth = (
+  override?: PartialDeep<MarketDepth>
+): MarketDepth => {
+  const defaultResult: MarketDepth = {
     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);
 };

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

@@ -6,11 +6,11 @@ export const generateMarketNames = () => {
       { ...protoMarket },
       {
         id: '1d7ddf67dac4924db03f5bf58571a7bcb1908d70c66580467717aabc5345b68a',
-        name: 'Apple Monthly (30 Jun 2022)',
         state: 'STATE_SUSPENDED',
         tradableInstrument: {
           instrument: {
             code: 'AAPL.MF21',
+            name: 'Apple Monthly (30 Jun 2022)',
             metadata: {
               tags: [
                 'formerly:4899E01009F1A721',
@@ -32,11 +32,11 @@ export const generateMarketNames = () => {
       },
       {
         id: '87ae87cd3244fc1fab4b0e2dad2437879864192bb969f3109b69293421644c8b',
-        name: 'Tesla Quarterly (30 Jun 2022)',
         state: 'STATE_SUSPENDED',
         tradableInstrument: {
           instrument: {
             code: 'TSLA.QM21',
+            name: 'Tesla Quarterly (30 Jun 2022)',
             metadata: {
               tags: [
                 'formerly:5A86B190C384997F',
@@ -58,11 +58,11 @@ export const generateMarketNames = () => {
       },
       {
         id: '69205712a854f1bbfb69fa3d11b60e01a1e249bafb5ece88115e7451e8ef07b3',
-        name: 'BTCUSD Monthly (30 Jun 2022)',
         state: 'STATE_SUSPENDED',
         tradableInstrument: {
           instrument: {
             code: 'BTCUSD.MF21',
+            name: 'BTCUSD Monthly (30 Jun 2022)',
             metadata: {
               tags: [
                 'formerly:076BB86A5AA41E3E',
@@ -83,11 +83,11 @@ export const generateMarketNames = () => {
       },
       {
         id: 'ethbtc-quaterly',
-        name: 'ETHBTC Quarterly (30 Jun 2022)',
         state: 'STATE_ACTIVE',
         tradableInstrument: {
           instrument: {
             code: 'ETHBTC.QM21',
+            name: 'ETHBTC Quarterly (30 Jun 2022)',
             metadata: {
               tags: [
                 'formerly:1F0BB6EB5703B099',
@@ -108,11 +108,11 @@ export const generateMarketNames = () => {
       },
       {
         id: '3c62b2714c4332d1a689a5352bff090e6aabccfd6bd87ce018936b38372530c9',
-        name: 'UNIDAI Monthly (30 Jun 2022)',
         state: 'STATE_ACTIVE',
         tradableInstrument: {
           instrument: {
             code: 'UNIDAI.MF21',
+            name: 'UNIDAI Monthly (30 Jun 2022)',
             metadata: {
               tags: [
                 'formerly:3C58ED2A4A6C5D7E',

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

@@ -0,0 +1,139 @@
+import merge from 'lodash/merge';
+import type { PartialDeep } from 'type-fest';
+import type {
+  Orders,
+  Orders_party_ordersConnection_edges_node,
+} from '@vegaprotocol/orders';
+import {
+  OrderStatus,
+  OrderTimeInForce,
+  OrderType,
+  Side,
+} from '@vegaprotocol/types';
+
+export const generateOrders = (override?: PartialDeep<Orders>): Orders => {
+  const orders: Orders_party_ordersConnection_edges_node[] = [
+    {
+      __typename: 'Order',
+      id: '066468C06549101DAF7BC51099E1412A0067DC08C246B7D8013C9D0CBF1E8EE7',
+      market: {
+        __typename: 'Market',
+        id: 'market-0',
+      },
+      size: '10',
+      type: OrderType.TYPE_LIMIT,
+      status: OrderStatus.STATUS_FILLED,
+      side: Side.SIDE_BUY,
+      remaining: '0',
+      price: '20000000',
+      timeInForce: OrderTimeInForce.TIME_IN_FORCE_GTC,
+      createdAt: new Date(2020, 1, 30).toISOString(),
+      updatedAt: null,
+      expiresAt: null,
+      rejectionReason: null,
+    },
+    {
+      __typename: 'Order',
+      id: '48DB6767E4E4E0F649C5A13ABFADE39F8451C27DA828DAF14B7A1E8E5EBDAD99',
+      market: {
+        __typename: 'Market',
+        id: 'market-1',
+      },
+      size: '1',
+      type: OrderType.TYPE_LIMIT,
+      status: OrderStatus.STATUS_FILLED,
+      side: Side.SIDE_BUY,
+      remaining: '0',
+      price: '100',
+      timeInForce: OrderTimeInForce.TIME_IN_FORCE_GTC,
+      createdAt: new Date(2020, 1, 29).toISOString(),
+      updatedAt: null,
+      expiresAt: null,
+      rejectionReason: null,
+    },
+    {
+      __typename: 'Order',
+      id: '4e93702990712c41f6995fcbbd94f60bb372ad12d64dfa7d96d205c49f790336',
+      market: {
+        __typename: 'Market',
+        id: 'market-2',
+      },
+      size: '1',
+      type: OrderType.TYPE_LIMIT,
+      status: OrderStatus.STATUS_FILLED,
+      side: Side.SIDE_BUY,
+      remaining: '0',
+      price: '20000',
+      timeInForce: OrderTimeInForce.TIME_IN_FORCE_GTC,
+      createdAt: new Date(2020, 1, 28).toISOString(),
+      updatedAt: null,
+      expiresAt: null,
+      rejectionReason: null,
+    },
+    {
+      __typename: 'Order',
+      id: '94737d2bafafa4bc3b80a56ef084ae52a983b91aa067c31e243c61a0f962a836',
+      market: {
+        __typename: 'Market',
+        id: 'market-3',
+      },
+      size: '1',
+      type: OrderType.TYPE_LIMIT,
+      status: OrderStatus.STATUS_ACTIVE,
+      side: Side.SIDE_BUY,
+      remaining: '0',
+      price: '100000',
+      timeInForce: OrderTimeInForce.TIME_IN_FORCE_GTC,
+      createdAt: new Date(2020, 1, 27).toISOString(),
+      updatedAt: null,
+      expiresAt: null,
+      rejectionReason: null,
+    },
+    {
+      __typename: 'Order',
+      id: '94aead3ca92dc932efcb503631b03a410e2a5d4606cae6083e2406dc38e52f78',
+      market: {
+        __typename: 'Market',
+        id: 'market-3',
+      },
+      size: '10',
+      type: OrderType.TYPE_LIMIT,
+      status: OrderStatus.STATUS_PARTIALLY_FILLED,
+      side: Side.SIDE_SELL,
+      remaining: '3',
+      price: '100000',
+      timeInForce: OrderTimeInForce.TIME_IN_FORCE_GTC,
+      createdAt: new Date(2020, 1, 27).toISOString(),
+      updatedAt: null,
+      expiresAt: null,
+      rejectionReason: null,
+    },
+  ];
+
+  const defaultResult: Orders = {
+    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);
+};

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

@@ -0,0 +1,201 @@
+import merge from 'lodash/merge';
+import type { PartialDeep } from 'type-fest';
+import type {
+  Positions,
+  Positions_party_positionsConnection_edges_node,
+} from '@vegaprotocol/positions';
+import { MarketTradingMode } from '@vegaprotocol/types';
+
+export const generatePositions = (
+  override?: PartialDeep<Positions>
+): Positions => {
+  const nodes: Positions_party_positionsConnection_edges_node[] = [
+    {
+      __typename: 'Position',
+      realisedPNL: '0',
+      openVolume: '6',
+      unrealisedPNL: '895000',
+      averageEntryPrice: '1129935',
+      updatedAt: '2022-07-28T15:09:34.441143Z',
+      marginsConnection: {
+        __typename: 'MarginConnection',
+        edges: [
+          {
+            __typename: 'MarginEdge',
+            node: {
+              __typename: 'MarginLevels',
+              maintenanceLevel: '0',
+              searchLevel: '0',
+              initialLevel: '0',
+              collateralReleaseLevel: '0',
+              market: {
+                __typename: 'Market',
+                id: 'c9f5acd348796011c075077e4d58d9b7f1689b7c1c8e030a5e886b83aa96923d',
+              },
+              asset: {
+                __typename: 'Asset',
+                symbol: 'tDAI',
+              },
+            },
+          },
+        ],
+      },
+      market: {
+        id: 'c9f5acd348796011c075077e4d58d9b7f1689b7c1c8e030a5e886b83aa96923d',
+        tradingMode: MarketTradingMode.TRADING_MODE_CONTINUOUS,
+        data: {
+          markPrice: '17588787',
+          __typename: 'MarketData',
+          market: {
+            __typename: 'Market',
+            id: 'c9f5acd348796011c075077e4d58d9b7f1689b7c1c8e030a5e886b83aa96923d',
+          },
+        },
+        decimalPlaces: 5,
+        positionDecimalPlaces: 0,
+        tradableInstrument: {
+          instrument: {
+            name: 'UNIDAI Monthly (30 Jun 2022)',
+            __typename: 'Instrument',
+          },
+          __typename: 'TradableInstrument',
+        },
+        __typename: 'Market',
+      },
+    },
+    {
+      __typename: 'Position',
+      realisedPNL: '100',
+      openVolume: '20',
+      unrealisedPNL: '895000',
+      averageEntryPrice: '8509338',
+      updatedAt: '2022-07-28T15:09:34.441143Z',
+      marginsConnection: {
+        __typename: 'MarginConnection',
+        edges: [
+          {
+            __typename: 'MarginEdge',
+            node: {
+              __typename: 'MarginLevels',
+              maintenanceLevel: '0',
+              searchLevel: '0',
+              initialLevel: '0',
+              collateralReleaseLevel: '0',
+              market: {
+                __typename: 'Market',
+                id: '0604e8c918655474525e1a95367902266ade70d318c2c908f0cca6e3d11dcb13',
+              },
+              asset: {
+                __typename: 'Asset',
+                symbol: 'tDAI',
+              },
+            },
+          },
+        ],
+      },
+      market: {
+        id: '0604e8c918655474525e1a95367902266ade70d318c2c908f0cca6e3d11dcb13',
+        tradingMode: MarketTradingMode.TRADING_MODE_CONTINUOUS,
+        data: {
+          markPrice: '8649338',
+          __typename: 'MarketData',
+          market: {
+            __typename: 'Market',
+            id: '0604e8c918655474525e1a95367902266ade70d318c2c908f0cca6e3d11dcb13',
+          },
+        },
+        decimalPlaces: 5,
+        positionDecimalPlaces: 0,
+        tradableInstrument: {
+          instrument: {
+            name: 'AAVEDAI Monthly (30 Jun 2022)',
+            __typename: 'Instrument',
+          },
+          __typename: 'TradableInstrument',
+        },
+        __typename: 'Market',
+      },
+    },
+    {
+      realisedPNL: '0',
+      openVolume: '1',
+      unrealisedPNL: '-22519',
+      averageEntryPrice: '84400088',
+      updatedAt: '2022-07-28T14:53:54.725477Z',
+      marginsConnection: {
+        __typename: 'MarginConnection',
+        edges: [
+          {
+            __typename: 'MarginEdge',
+            node: {
+              __typename: 'MarginLevels',
+              maintenanceLevel: '0',
+              searchLevel: '0',
+              initialLevel: '0',
+              collateralReleaseLevel: '0',
+              market: {
+                __typename: 'Market',
+                id: '5a4b0b9e9c0629f0315ec56fcb7bd444b0c6e4da5ec7677719d502626658a376',
+              },
+              asset: {
+                __typename: 'Asset',
+                symbol: 'tEURO',
+              },
+            },
+          },
+        ],
+      },
+      market: {
+        id: '5a4b0b9e9c0629f0315ec56fcb7bd444b0c6e4da5ec7677719d502626658a376',
+        tradingMode: MarketTradingMode.TRADING_MODE_CONTINUOUS,
+        data: {
+          markPrice: '84377569',
+          __typename: 'MarketData',
+          market: {
+            __typename: 'Market',
+            id: '5a4b0b9e9c0629f0315ec56fcb7bd444b0c6e4da5ec7677719d502626658a376',
+          },
+        },
+        decimalPlaces: 5,
+        positionDecimalPlaces: 0,
+        tradableInstrument: {
+          instrument: {
+            name: 'Tesla Quarterly (30 Jun 2022)',
+            __typename: 'Instrument',
+          },
+          __typename: 'TradableInstrument',
+        },
+        __typename: 'Market',
+      },
+      __typename: 'Position',
+    },
+  ];
+
+  const defaultResult: Positions = {
+    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 = () => {
+  return {
+    party: {
+      id: Cypress.env('VEGA_PUBLIC_KEY'),
+      positionsConnection: { edges: null, __typename: 'PositionConnection' },
+      __typename: 'Party',
+    },
+  };
+};

apps/console-lite-e2e/tsconfig.json

@@ -6,7 +6,7 @@
     "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"]
 }

apps/console-lite/.env.capsule

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

apps/console-lite/.env.devnet

@@ -2,7 +2,6 @@
 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

apps/console-lite/.env.mainnet

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

apps/console-lite/.env.stagnet3

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

apps/console-lite/.env.testnet

@@ -1,8 +1,7 @@
 # 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

apps/console-lite/.eslintrc.json

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

apps/console-lite/setup-tests.ts

@@ -1,7 +1,30 @@
 import '@testing-library/jest-dom';
+import 'jest-canvas-mock';
 import { defaultFallbackInView } from 'react-intersection-observer';
+import ResizeObserver from 'resize-observer-polyfill';
 
 defaultFallbackInView(true);
+global.ResizeObserver = ResizeObserver;
+
+global.DOMRect = class DOMRect {
+  bottom = 0;
+  left = 0;
+  right = 0;
+  top = 0;
+
+  constructor(
+    public x = 0,
+    public y = 0,
+    public width = 0,
+    public height = 0
+  ) {}
+  static fromRect(other?: DOMRectInit): DOMRect {
+    return new DOMRect(other?.x, other?.y, other?.width, other?.height);
+  }
+  toJSON() {
+    return JSON.stringify(this);
+  }
+};
 
 Object.defineProperty(window, 'matchMedia', {
   writable: true,
@@ -16,3 +39,5 @@ Object.defineProperty(window, 'matchMedia', {
     dispatchEvent: jest.fn(),
   })),
 });
+
+jest.setTimeout(30000);

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

@@ -0,0 +1,114 @@
+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 extends { id?: string }
+>(
+  p: Props<T> & { ref?: React.Ref<AgGridReact> }
+) => React.ReactElement;
+
+export default ConsoleLiteGridForwarder;

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

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

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

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

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

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

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

@@ -0,0 +1,54 @@
+import { Schema as Types } from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type MarketTagsQueryVariables = Types.Exact<{
+  marketId: Types.Scalars['ID'];
+}>;
+
+
+export type MarketTagsQuery = { __typename?: 'Query', market?: { __typename?: 'Market', tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', metadata: { __typename?: 'InstrumentMetadata', tags?: Array<string> | null } } } } | null };
+
+
+export const MarketTagsDocument = gql`
+    query MarketTags($marketId: ID!) {
+  market(id: $marketId) {
+    tradableInstrument {
+      instrument {
+        metadata {
+          tags
+        }
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useMarketTagsQuery__
+ *
+ * To run a query within a React component, call `useMarketTagsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useMarketTagsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useMarketTagsQuery({
+ *   variables: {
+ *      marketId: // value for 'marketId'
+ *   },
+ * });
+ */
+export function useMarketTagsQuery(baseOptions: Apollo.QueryHookOptions<MarketTagsQuery, MarketTagsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<MarketTagsQuery, MarketTagsQueryVariables>(MarketTagsDocument, options);
+      }
+export function useMarketTagsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<MarketTagsQuery, MarketTagsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<MarketTagsQuery, MarketTagsQueryVariables>(MarketTagsDocument, options);
+        }
+export type MarketTagsQueryHookResult = ReturnType<typeof useMarketTagsQuery>;
+export type MarketTagsLazyQueryHookResult = ReturnType<typeof useMarketTagsLazyQuery>;
+export type MarketTagsQueryResult = Apollo.QueryResult<MarketTagsQuery, MarketTagsQueryVariables>;

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

@@ -0,0 +1,57 @@
+import { Schema as Types } from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type PartyBalanceQueryQueryVariables = Types.Exact<{
+  partyId: Types.Scalars['ID'];
+}>;
+
+
+export type PartyBalanceQueryQuery = { __typename?: 'Query', party?: { __typename?: 'Party', accounts?: Array<{ __typename?: 'Account', type: Types.AccountType, balance: string, asset: { __typename?: 'Asset', id: string, symbol: string, name: string, decimals: number } }> | null } | null };
+
+
+export const PartyBalanceQueryDocument = gql`
+    query PartyBalanceQuery($partyId: ID!) {
+  party(id: $partyId) {
+    accounts {
+      type
+      balance
+      asset {
+        id
+        symbol
+        name
+        decimals
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __usePartyBalanceQueryQuery__
+ *
+ * To run a query within a React component, call `usePartyBalanceQueryQuery` and pass it any options that fit your needs.
+ * When your component renders, `usePartyBalanceQueryQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = usePartyBalanceQueryQuery({
+ *   variables: {
+ *      partyId: // value for 'partyId'
+ *   },
+ * });
+ */
+export function usePartyBalanceQueryQuery(baseOptions: Apollo.QueryHookOptions<PartyBalanceQueryQuery, PartyBalanceQueryQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<PartyBalanceQueryQuery, PartyBalanceQueryQueryVariables>(PartyBalanceQueryDocument, options);
+      }
+export function usePartyBalanceQueryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<PartyBalanceQueryQuery, PartyBalanceQueryQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<PartyBalanceQueryQuery, PartyBalanceQueryQueryVariables>(PartyBalanceQueryDocument, options);
+        }
+export type PartyBalanceQueryQueryHookResult = ReturnType<typeof usePartyBalanceQueryQuery>;
+export type PartyBalanceQueryLazyQueryHookResult = ReturnType<typeof usePartyBalanceQueryLazyQuery>;
+export type PartyBalanceQueryQueryResult = Apollo.QueryResult<PartyBalanceQueryQuery, PartyBalanceQueryQueryVariables>;

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

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import type { DealTicketQuery_market_tradableInstrument_instrument_product_settlementAsset } from '@vegaprotocol/deal-ticket';
+import type { DealTicketMarketFragment } 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';
 
 interface DealTicketBalanceProps {
-  settlementAsset: DealTicketQuery_market_tradableInstrument_instrument_product_settlementAsset;
+  settlementAsset: DealTicketMarketFragment['tradableInstrument']['instrument']['product']['settlementAsset'];
   accounts: PartyBalanceQuery_party_accounts[];
   isWalletConnected: boolean;
   className?: string;

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

@@ -52,6 +52,10 @@ export const DealTicketContainer = () => {
   const container = marketId ? (
     <Container marketId={marketId}>
       {(data) => {
+        if (!data.market) {
+          return null as unknown as JSX.Element;
+        }
+
         const balance = (
           <DealTicketBalance
             className="mb-4"

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

@@ -4,6 +4,7 @@ import { t } from '@vegaprotocol/react-helpers';
 import { Icon, Tooltip } from '@vegaprotocol/ui-toolkit';
 import { IconNames } from '@blueprintjs/icons';
 import * as constants from './constants';
+import { TrafficLight } from '../traffic-light';
 
 interface DealTicketEstimatesProps {
   quoteName?: string;
@@ -13,6 +14,7 @@ interface DealTicketEstimatesProps {
   fees?: string;
   notionalSize?: string;
   size?: string;
+  slippage?: string;
 }
 
 interface DataTitleProps {
@@ -20,7 +22,7 @@ interface DataTitleProps {
   quoteName?: string;
 }
 
-const DataTitle = ({ children, quoteName = '' }: DataTitleProps) => (
+export const DataTitle = ({ children, quoteName = '' }: DataTitleProps) => (
   <dt>
     {children}
     {quoteName && <small> ({quoteName})</small>}
@@ -28,14 +30,20 @@ const DataTitle = ({ children, quoteName = '' }: DataTitleProps) => (
 );
 
 interface ValueTooltipProps {
-  value: string;
+  value?: string;
+  children?: ReactNode;
   description: string;
   id?: string;
 }
 
-const ValueTooltipRow = ({ value, description, id }: ValueTooltipProps) => (
+export const ValueTooltipRow = ({
+  value,
+  children,
+  description,
+  id,
+}: ValueTooltipProps) => (
   <dd className="flex gap-x-2 items-center">
-    {value}
+    {value || children}
     <Tooltip align="center" description={description}>
       <div className="cursor-help" id={id || ''} tabIndex={-1}>
         <Icon
@@ -56,6 +64,7 @@ export const DealTicketEstimates = ({
   fees,
   notionalSize,
   size,
+  slippage,
 }: DealTicketEstimatesProps) => (
   <dl className="text-black dark:text-white">
     {size && (
@@ -93,7 +102,7 @@ export const DealTicketEstimates = ({
       </div>
     )}
     {estMargin && (
-      <div className="flex justify-between mb-8">
+      <div className="flex justify-between mb-2">
         <DataTitle quoteName={quoteName}>{t('Est. Margin')}</DataTitle>
         <ValueTooltipRow
           value={estMargin}
@@ -102,17 +111,23 @@ export const DealTicketEstimates = ({
       </div>
     )}
     {estCloseOut && (
-      <div className="flex justify-between">
-        <dt>
-          <span>{t('Est. Close out')}</span>
-          &nbsp;
-          <small>({quoteName})</small>
-        </dt>
+      <div className="flex justify-between mb-2">
+        <DataTitle quoteName={quoteName}>{t('Est. Close out')}</DataTitle>
         <ValueTooltipRow
           value={estCloseOut}
           description={constants.EST_CLOSEOUT_TOOLTIP_TEXT}
         />
       </div>
     )}
+    {slippage && (
+      <div className="flex justify-between mb-2">
+        <DataTitle>{t('Est. Price Impact / Slippage')}</DataTitle>
+        <ValueTooltipRow description={constants.EST_SLIPPAGE}>
+          <TrafficLight value={parseFloat(slippage)} q1={1} q2={5}>
+            {slippage}%
+          </TrafficLight>
+        </ValueTooltipRow>
+      </div>
+    )}
   </dl>
 );

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

@@ -0,0 +1,149 @@
+import React, { useCallback, useState } from 'react';
+import { BigNumber } from 'bignumber.js';
+import { t } from '@vegaprotocol/react-helpers';
+import {
+  SliderRoot,
+  SliderThumb,
+  SliderTrack,
+  SliderRange,
+  FormGroup,
+} from '@vegaprotocol/ui-toolkit';
+import { InputSetter } from '../input-setter';
+
+interface DealTicketSizeInputProps {
+  step: number;
+  min: number;
+  max: number;
+  value: number;
+  onValueChange: (value: number) => void;
+  positionDecimalPlaces: number;
+}
+
+const getSizeLabel = (value: number): string => {
+  const MIN_LABEL = 'Min';
+  const MAX_LABEL = 'Max';
+  if (value === 0) {
+    return MIN_LABEL;
+  } else if (value === 100) {
+    return MAX_LABEL;
+  }
+
+  return `${value}%`;
+};
+
+export const DealTicketSizeInput = ({
+  value,
+  step,
+  min,
+  max,
+  onValueChange,
+  positionDecimalPlaces,
+}: DealTicketSizeInputProps) => {
+  const sizeRatios = [0, 25, 50, 75, 100];
+  const [inputValue, setInputValue] = useState(value);
+
+  const onInputValueChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      let value = parseFloat(event.target.value);
+      const isLessThanMin = value < min;
+      const isMoreThanMax = value > max;
+      if (isLessThanMin) {
+        value = min;
+      } else if (isMoreThanMax) {
+        value = max;
+      }
+
+      if (value) {
+        onValueChange(value);
+      }
+
+      setInputValue(value);
+    },
+    [min, max, onValueChange, setInputValue]
+  );
+
+  const onButtonValueChange = (size: number) => {
+    const newVal = new BigNumber(size)
+      .decimalPlaces(positionDecimalPlaces)
+      .toNumber();
+    onValueChange(newVal);
+    setInputValue(newVal);
+  };
+
+  const onSliderValueChange = useCallback(
+    (value: number[]) => {
+      const val = value[0];
+      setInputValue(val);
+      onValueChange(val);
+    },
+    [onValueChange]
+  );
+
+  return (
+    <div>
+      <div className="flex justify-between text-black dark:text-white mb-2">
+        <span data-testid="min-label">{min}</span>
+        <span data-testid="max-label">{max}</span>
+      </div>
+      <SliderRoot
+        className="mb-2"
+        value={[value]}
+        onValueChange={onSliderValueChange}
+        step={step}
+        min={min}
+        max={max}
+      >
+        <SliderTrack className="bg-lightGrey dark:bg-offBlack">
+          <SliderRange className="!bg-black dark:!bg-white" />
+        </SliderTrack>
+        <SliderThumb />
+      </SliderRoot>
+
+      <div
+        data-testid="percentage-selector"
+        className="flex w-full justify-between text-black dark:text-white mb-6"
+      >
+        {sizeRatios.map((size, index) => {
+          const proportionalSize = size ? (size / 100) * max : min;
+          return (
+            <button
+              className="no-underline hover:underline text-blue"
+              onClick={() => onButtonValueChange(proportionalSize)}
+              type="button"
+              key={index}
+            >
+              {getSizeLabel(size)}
+            </button>
+          );
+        })}
+      </div>
+
+      <dl className="text-black dark:text-white">
+        <div className="flex items-center justify-between">
+          <dt>{t('Contracts')}</dt>
+          <dd className="flex justify-end w-full">
+            <FormGroup
+              hideLabel={true}
+              label="Enter Size"
+              labelFor="trade-size-input"
+              className="mb-1"
+            >
+              <InputSetter
+                id="input-order-size-market"
+                type="number"
+                step={step}
+                min={min}
+                max={max}
+                className="w-full"
+                value={inputValue}
+                onChange={onInputValueChange}
+              >
+                {inputValue}
+              </InputSetter>
+            </FormGroup>
+          </dd>
+        </div>
+      </dl>
+    </div>
+  );
+};

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

@@ -1,27 +1,13 @@
-import React, { useCallback, useState } from 'react';
-import classNames from 'classnames';
-import { IconNames } from '@blueprintjs/icons';
-import { t } from '@vegaprotocol/react-helpers';
-import {
-  SliderRoot,
-  SliderThumb,
-  SliderTrack,
-  SliderRange,
-  FormGroup,
-  Icon,
-  Tooltip,
-} from '@vegaprotocol/ui-toolkit';
-import { BigNumber } from 'bignumber.js';
+import React from 'react';
 import { DealTicketEstimates } from './deal-ticket-estimates';
-import { InputSetter } from '../input-setter';
-import * as constants from './constants';
+import { DealTicketSizeInput } from './deal-ticket-size-input';
 
 interface DealTicketSizeProps {
   step: number;
   min: number;
   max: number;
-  value: number;
-  onValueChange: (value: number[]) => void;
+  size: number;
+  onSizeChange: (value: number) => void;
   name: string;
   quoteName: string;
   price: string;
@@ -30,173 +16,33 @@ interface DealTicketSizeProps {
   fees: string;
   positionDecimalPlaces: number;
   notionalSize: string;
-  slippage: string | null;
 }
 
-const getSizeLabel = (value: number): string => {
-  const MIN_LABEL = 'Min';
-  const MAX_LABEL = 'Max';
-  if (value === 0) {
-    return MIN_LABEL;
-  } else if (value === 100) {
-    return MAX_LABEL;
-  }
-
-  return `${value}%`;
-};
-
 export const DealTicketSize = ({
-  value,
   step,
   min,
   max,
   price,
   quoteName,
-  onValueChange,
+  size,
+  onSizeChange,
   estCloseOut,
   positionDecimalPlaces,
   fees,
   notionalSize,
-  slippage,
 }: DealTicketSizeProps) => {
-  const sizeRatios = [0, 25, 50, 75, 100];
-  const [inputValue, setInputValue] = useState(value);
-
-  const onInputValueChange = useCallback(
-    (event: React.ChangeEvent<HTMLInputElement>) => {
-      const value = parseFloat(event.target.value);
-      const isLessThanMin = value < min;
-      const isMoreThanMax = value > max;
-      if (value) {
-        if (isLessThanMin) {
-          onValueChange([min]);
-        } else if (isMoreThanMax) {
-          onValueChange([max]);
-        } else {
-          onValueChange([value]);
-        }
-      }
-      setInputValue(value);
-    },
-    [min, max, onValueChange, setInputValue]
-  );
-
-  const onButtonValueChange = useCallback(
-    (size: number) => {
-      const newVal = new BigNumber(size)
-        .decimalPlaces(positionDecimalPlaces)
-        .toNumber();
-      onValueChange([newVal]);
-      setInputValue(newVal);
-    },
-    [onValueChange, positionDecimalPlaces]
-  );
-
-  const onSliderValueChange = useCallback(
-    (value: number[]) => {
-      setInputValue(value[0]);
-      onValueChange(value);
-    },
-    [onValueChange]
-  );
-
   return max === 0 ? (
     <p>Not enough balance to trade</p>
   ) : (
     <div>
-      <div className="flex justify-between text-black dark:text-white mb-2">
-        <span data-testid="min-label">{min}</span>
-        <span data-testid="max-label">{max}</span>
-      </div>
-      <SliderRoot
-        className="mb-2"
-        value={[value]}
-        onValueChange={onSliderValueChange}
+      <DealTicketSizeInput
         step={step}
         min={min}
         max={max}
-      >
-        <SliderTrack className="bg-lightGrey dark:bg-offBlack">
-          <SliderRange className="!bg-black dark:!bg-white" />
-        </SliderTrack>
-        <SliderThumb />
-      </SliderRoot>
-
-      <div
-        data-testid="percentage-selector"
-        className="flex w-full justify-between text-black dark:text-white mb-6"
-      >
-        {sizeRatios.map((size, index) => {
-          const proportionalSize = size ? (size / 100) * max : min;
-          return (
-            <button
-              className="no-underline hover:underline text-blue"
-              onClick={() => onButtonValueChange(proportionalSize)}
-              type="button"
-              key={index}
-            >
-              {getSizeLabel(size)}
-            </button>
-          );
-        })}
-      </div>
-
-      <dl className="text-black dark:text-white">
-        <div className="flex items-center justify-between mb-4">
-          <dt>{t('Contracts')}</dt>
-          <dd className="flex justify-end w-full">
-            <FormGroup
-              hideLabel={true}
-              label="Enter Size"
-              labelFor="trade-size-input"
-            >
-              <InputSetter
-                id="input-order-size-market"
-                type="number"
-                step={step}
-                min={min}
-                max={max}
-                className="w-full"
-                value={inputValue}
-                onChange={onInputValueChange}
-              />
-            </FormGroup>
-          </dd>
-        </div>
-      </dl>
-      {slippage && (
-        <dl className="text-black dark:text-white">
-          <div className="flex items-center justify-between mb-8">
-            <dt>{t('Est. Price Impact / Slippage')}</dt>
-            <dd
-              className="flex justify-end gap-x-5"
-              data-testid="price-slippage-value"
-              aria-label={t('Est. Price Impact / Slippage')}
-            >
-              <span
-                className={classNames({
-                  'text-darkerGreen dark:text-lightGreen':
-                    parseFloat(slippage) < 1,
-                  'text-amber':
-                    parseFloat(slippage) >= 1 && parseFloat(slippage) < 5,
-                  'text-vega-red': parseFloat(slippage) >= 5,
-                })}
-              >
-                {slippage}%
-              </span>
-              <Tooltip align="center" description={constants.EST_SLIPPAGE}>
-                <div className="cursor-help" tabIndex={-1}>
-                  <Icon
-                    name={IconNames.ISSUE}
-                    className="block rotate-180"
-                    ariaLabel={constants.EST_SLIPPAGE}
-                  />
-                </div>
-              </Tooltip>
-            </dd>
-          </div>
-        </dl>
-      )}
+        value={size}
+        onValueChange={onSizeChange}
+        positionDecimalPlaces={positionDecimalPlaces}
+      />
       <DealTicketEstimates
         quoteName={quoteName}
         fees={fees}

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

@@ -0,0 +1,104 @@
+import React, { useCallback, useState } from 'react';
+import { t } from '@vegaprotocol/react-helpers';
+import * as constants from './constants';
+import { TrafficLight } from '../traffic-light';
+import { Dialog, Icon, Intent, Tooltip } from '@vegaprotocol/ui-toolkit';
+import { InputSetter } from '../../components/input-setter';
+import { IconNames } from '@blueprintjs/icons';
+import { DataTitle, ValueTooltipRow } from './deal-ticket-estimates';
+
+interface DealTicketSlippageProps {
+  step?: number;
+  min?: number;
+  max?: number;
+  value: number;
+  onValueChange(value: number): void;
+}
+
+export const DealTicketSlippage = ({
+  value,
+  step = 0.01,
+  min = 0,
+  max = 50,
+  onValueChange,
+}: DealTicketSlippageProps) => {
+  const [isDialogVisible, setIsDialogVisible] = useState(false);
+
+  const onChange = useCallback(
+    (event: React.ChangeEvent<HTMLInputElement>) => {
+      const value = event.target.value;
+      const numericValue = parseFloat(value);
+      onValueChange(numericValue);
+    },
+    [onValueChange]
+  );
+
+  const toggleDialog = useCallback(() => {
+    setIsDialogVisible(!isDialogVisible);
+  }, [isDialogVisible]);
+
+  const formLabel = (
+    <label className="flex items-center mb-1">
+      <span className="mr-1">{t('Adjust slippage tolerance')}</span>
+      <Tooltip align="center" description={constants.EST_SLIPPAGE}>
+        <div className="cursor-help" tabIndex={-1}>
+          <Icon
+            name={IconNames.ISSUE}
+            className="block rotate-180"
+            ariaLabel={constants.EST_SLIPPAGE}
+          />
+        </div>
+      </Tooltip>
+    </label>
+  );
+
+  return (
+    <>
+      <Dialog
+        open={isDialogVisible}
+        onChange={toggleDialog}
+        intent={Intent.None}
+        title={t('Transaction Settings')}
+      >
+        <div data-testid="slippage-dialog">
+          {formLabel}
+          <InputSetter
+            id="input-order-slippage"
+            isInputVisible
+            hasError={!value}
+            type="number"
+            step={step}
+            min={min}
+            max={max}
+            className="w-full"
+            value={value}
+            onChange={onChange}
+          >
+            {value}%
+          </InputSetter>
+        </div>
+      </Dialog>
+      <dl className="text-black dark:text-white">
+        <div className="flex justify-between mb-2">
+          <DataTitle>{t('Est. Price Impact / Slippage')}</DataTitle>
+          <div className="flex">
+            <div className="mr-1">
+              <ValueTooltipRow description={constants.EST_SLIPPAGE}>
+                <TrafficLight value={value} q1={1} q2={5}>
+                  {value}%
+                </TrafficLight>
+              </ValueTooltipRow>
+            </div>
+            <button type="button" onClick={toggleDialog}>
+              <Icon
+                name={IconNames.COG}
+                className="block rotate-180"
+                ariaLabel={t('Override slippage value')}
+              />
+            </button>
+          </div>
+        </div>
+      </dl>
+    </>
+  );
+};

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

@@ -1,8 +1,8 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useForm, Controller } from 'react-hook-form';
 import { Stepper } from '../stepper';
-import type { DealTicketQuery_market } from '@vegaprotocol/deal-ticket';
+import type { DealTicketMarketFragment } from '@vegaprotocol/deal-ticket';
 import { InputError } from '@vegaprotocol/ui-toolkit';
 import { BigNumber } from 'bignumber.js';
 import { MarketSelector } from '@vegaprotocol/deal-ticket';
@@ -10,7 +10,7 @@ import type { Order } from '@vegaprotocol/orders';
 import { useVegaWallet, VegaTxStatus } from '@vegaprotocol/wallet';
 import {
   t,
-  addDecimal,
+  addDecimalsFormatNumber,
   toDecimal,
   removeDecimal,
 } from '@vegaprotocol/react-helpers';
@@ -33,9 +33,11 @@ import useOrderCloseOut from '../../hooks/use-order-closeout';
 import useOrderMargin from '../../hooks/use-order-margin';
 import useMaximumPositionSize from '../../hooks/use-maximum-position-size';
 import useCalculateSlippage from '../../hooks/use-calculate-slippage';
+import { Side, OrderType } from '@vegaprotocol/types';
+import { DealTicketSlippage } from './deal-ticket-slippage';
 
 interface DealTicketMarketProps {
-  market: DealTicketQuery_market;
+  market: DealTicketMarketFragment;
   partyData?: PartyBalanceQuery;
 }
 
@@ -62,28 +64,26 @@ export const DealTicketSteps = ({
     defaultValues: getDefaultOrder(market),
   });
 
-  const [max, setMax] = useState<number | null>(null);
+  const emptyString = ' - ';
   const step = toDecimal(market.positionDecimalPlaces);
   const orderType = watch('type');
   const orderTimeInForce = watch('timeInForce');
   const orderSide = watch('side');
   const orderSize = watch('size');
   const order = watch();
-  const estCloseOut = useOrderCloseOut({ order, market, partyData });
+  const { message: invalidText, isDisabled } = useOrderValidation({
+    market,
+    orderType,
+    orderTimeInForce,
+    fieldErrors: errors,
+  });
+  const { submit, transaction, finalizedOrder, Dialog } = useOrderSubmit();
   const { keypair } = useVegaWallet();
   const estMargin = useOrderMargin({
     order,
     market,
     partyId: keypair?.pub || '',
   });
-  const value = new BigNumber(orderSize).toNumber();
-  const price =
-    market.depth.lastTrade &&
-    addDecimal(market.depth.lastTrade.price, market.decimalPlaces);
-  const emptyString = ' - ';
-
-  const [notionalSize, setNotionalSize] = useState<string | null>(null);
-  const [fees, setFees] = useState<string | null>(null);
 
   const maxTrade = useMaximumPositionSize({
     partyId: keypair?.pub || '',
@@ -94,46 +94,48 @@ export const DealTicketSteps = ({
     price: market?.depth?.lastTrade?.price,
     order,
   });
+
+  const estCloseOut = useOrderCloseOut({ order, market, partyData });
   const slippage = useCalculateSlippage({ marketId: market.id, order });
-  useEffect(() => {
-    setMax(
-      new BigNumber(maxTrade)
-        .decimalPlaces(market.positionDecimalPlaces)
-        .toNumber()
-    );
-  }, [maxTrade, market.positionDecimalPlaces]);
-
-  const { message: invalidText, isDisabled } = useOrderValidation({
-    market,
-    orderType,
-    orderTimeInForce,
-    fieldErrors: errors,
-  });
-
-  const { submit, transaction, finalizedOrder, TransactionDialog } =
-    useOrderSubmit();
-
-  const onSizeChange = (value: number[]) => {
-    const newVal = new BigNumber(value[0])
-      .decimalPlaces(market.positionDecimalPlaces)
-      .toString();
-    const isValid = validateSize(step)(newVal);
-    if (isValid !== 'step') {
-      setValue('size', newVal);
-    }
-  };
+  const [slippageValue, setSlippageValue] = useState(
+    slippage ? parseFloat(slippage) : 0
+  );
+  const transactionStatus =
+    transaction.status === VegaTxStatus.Requested ||
+    transaction.status === VegaTxStatus.Pending
+      ? 'pending'
+      : 'default';
 
   useEffect(() => {
-    if (market?.depth?.lastTrade?.price) {
-      const size = new BigNumber(market.depth.lastTrade.price)
-        .multipliedBy(value)
+    setSlippageValue(slippage ? parseFloat(slippage) : 0);
+  }, [slippage]);
+
+  const price = useMemo(() => {
+    if (slippage && market?.depth?.lastTrade?.price) {
+      const isLong = order.side === Side.SIDE_BUY;
+      const multiplier = new BigNumber(1)[isLong ? 'plus' : 'minus'](
+        parseFloat(slippage) / 100
+      );
+      return new BigNumber(market?.depth?.lastTrade?.price)
+        .multipliedBy(multiplier)
         .toNumber();
-
-      setNotionalSize(addDecimal(size, market.decimalPlaces));
     }
-  }, [market, value]);
+    return null;
+  }, [market?.depth?.lastTrade?.price, order.side, slippage]);
 
-  useEffect(() => {
+  const formattedPrice =
+    price && addDecimalsFormatNumber(price, market.decimalPlaces);
+
+  const notionalSize = useMemo(() => {
+    if (price) {
+      const size = new BigNumber(price).multipliedBy(orderSize).toNumber();
+
+      return addDecimalsFormatNumber(size, market.decimalPlaces);
+    }
+    return null;
+  }, [market.decimalPlaces, orderSize, price]);
+
+  const fees = useMemo(() => {
     if (estMargin?.fees && notionalSize) {
       const percentage = new BigNumber(estMargin?.fees)
         .dividedBy(notionalSize)
@@ -141,17 +143,66 @@ export const DealTicketSteps = ({
         .decimalPlaces(2)
         .toString();
 
-      setFees(`${estMargin.fees} (${percentage}%)`);
+      return `${estMargin.fees} (${percentage}%)`;
     }
-  }, [estMargin, notionalSize]);
 
-  const transactionStatus =
-    transaction.status === VegaTxStatus.Requested ||
-    transaction.status === VegaTxStatus.Pending
-      ? 'pending'
-      : 'default';
+    return null;
+  }, [estMargin?.fees, notionalSize]);
 
-  const onSubmit = React.useCallback(
+  const max = useMemo(() => {
+    return new BigNumber(maxTrade)
+      .decimalPlaces(market.positionDecimalPlaces)
+      .toNumber();
+  }, [market.positionDecimalPlaces, maxTrade]);
+
+  const onSizeChange = useCallback(
+    (value: number) => {
+      const newVal = new BigNumber(value)
+        .decimalPlaces(market.positionDecimalPlaces)
+        .toString();
+      const isValid = validateSize(step)(newVal);
+      if (isValid !== 'step') {
+        setValue('size', newVal);
+      }
+    },
+    [market.positionDecimalPlaces, setValue, step]
+  );
+
+  const onSlippageChange = useCallback(
+    (value: number) => {
+      if (market?.depth?.lastTrade?.price) {
+        if (value) {
+          const isLong = order.side === Side.SIDE_BUY;
+          const multiplier = new BigNumber(1)[isLong ? 'plus' : 'minus'](
+            value / 100
+          );
+          const bestAskPrice = new BigNumber(market?.depth?.lastTrade?.price)
+            .multipliedBy(multiplier)
+            .decimalPlaces(market.decimalPlaces)
+            .toString();
+
+          setValue('price', bestAskPrice);
+
+          if (orderType === OrderType.TYPE_MARKET) {
+            setValue('type', OrderType.TYPE_LIMIT);
+          }
+        } else {
+          setValue('type', OrderType.TYPE_MARKET);
+          setValue('price', market?.depth?.lastTrade?.price);
+        }
+      }
+      setSlippageValue(value);
+    },
+    [
+      market.decimalPlaces,
+      market?.depth?.lastTrade?.price,
+      order.side,
+      orderType,
+      setValue,
+    ]
+  );
+
+  const onSubmit = useCallback(
     (order: Order) => {
       if (transactionStatus !== 'pending') {
         submit({
@@ -180,7 +231,7 @@ export const DealTicketSteps = ({
           ItemRenderer={MarketNameRenderer}
         />
       ),
-      value: market.name,
+      value: market.tradableInstrument.instrument.name,
     },
     {
       label: t('Select Direction'),
@@ -199,25 +250,30 @@ export const DealTicketSteps = ({
       label: t('Choose Position Size'),
       component:
         max !== null ? (
-          <DealTicketSize
-            step={step}
-            min={step}
-            max={max}
-            onValueChange={onSizeChange}
-            value={new BigNumber(orderSize).toNumber()}
-            name="size"
-            price={price || emptyString}
-            positionDecimalPlaces={market.positionDecimalPlaces}
-            quoteName={
-              market.tradableInstrument.instrument.product.settlementAsset
-                .symbol
-            }
-            notionalSize={notionalSize || emptyString}
-            estCloseOut={estCloseOut}
-            fees={fees || emptyString}
-            estMargin={estMargin?.margin || emptyString}
-            slippage={slippage}
-          />
+          <>
+            <DealTicketSize
+              step={step}
+              min={step}
+              max={max}
+              onSizeChange={onSizeChange}
+              size={new BigNumber(orderSize).toNumber()}
+              name="size"
+              price={formattedPrice || emptyString}
+              positionDecimalPlaces={market.positionDecimalPlaces}
+              quoteName={
+                market.tradableInstrument.instrument.product.settlementAsset
+                  .symbol
+              }
+              notionalSize={notionalSize || emptyString}
+              estCloseOut={estCloseOut}
+              fees={fees || emptyString}
+              estMargin={estMargin?.margin || emptyString}
+            />
+            <DealTicketSlippage
+              value={slippageValue}
+              onValueChange={onSlippageChange}
+            />
+          </>
         ) : (
           'loading...'
         ),
@@ -241,21 +297,22 @@ export const DealTicketSteps = ({
             order={order}
             estCloseOut={estCloseOut}
             estMargin={estMargin?.margin || emptyString}
-            price={price || emptyString}
+            price={formattedPrice || emptyString}
             quoteName={
               market.tradableInstrument.instrument.product.settlementAsset
                 .symbol
             }
             notionalSize={notionalSize || emptyString}
             fees={fees || emptyString}
+            slippage={slippageValue}
           />
-          <TransactionDialog
+          <Dialog
             title={getOrderDialogTitle(finalizedOrder?.status)}
             intent={getOrderDialogIntent(finalizedOrder?.status)}
             icon={getOrderDialogIcon(finalizedOrder?.status)}
           >
             <OrderFeedback transaction={transaction} order={finalizedOrder} />
-          </TransactionDialog>
+          </Dialog>
         </div>
       ),
       disabled: true,

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

@@ -6,7 +6,7 @@ import {
 } from '@vegaprotocol/ui-toolkit';
 import * as React from 'react';
 import classNames from 'classnames';
-import type { DealTicketQuery_market } from '@vegaprotocol/deal-ticket';
+import type { DealTicketMarketFragment } from '@vegaprotocol/deal-ticket';
 import type { Order } from '@vegaprotocol/orders';
 import { SIDE_NAMES } from './side-selector';
 import SimpleMarketExpires from '../simple-market-list/simple-market-expires';
@@ -33,7 +33,7 @@ export const MARKET_TAGS_QUERY = gql`
 `;
 
 interface Props {
-  market: DealTicketQuery_market;
+  market: DealTicketMarketFragment;
   isDisabled: boolean;
   transactionStatus?: string;
   order: Order;
@@ -43,6 +43,7 @@ interface Props {
   price: string;
   fees: string;
   notionalSize: string;
+  slippage: number;
 }
 
 export default ({
@@ -55,6 +56,7 @@ export default ({
   fees,
   price,
   notionalSize,
+  slippage,
 }: Props) => {
   const { data: tagsData } = useQuery<MarketTags, MarketTagsVariables>(
     MARKET_TAGS_QUERY,
@@ -105,6 +107,7 @@ export default ({
         fees={fees}
         estCloseOut={estCloseOut}
         notionalSize={notionalSize}
+        slippage={slippage.toString()}
       />
 
       <div className="mt-12 max-w-sm">

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

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

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

@@ -3,15 +3,17 @@
 // @generated
 // This file was automatically generated and should not be edited.
 
+import { AssetStatus } from "@vegaprotocol/types";
+
 // ====================================================
-// GraphQL query operation: Deposits
+// GraphQL query operation: DepositAssets
 // ====================================================
 
-export interface Deposits_assetsConnection_edges_node_source_BuiltinAsset {
+export interface DepositAssets_assetsConnection_edges_node_source_BuiltinAsset {
   __typename: "BuiltinAsset";
 }
 
-export interface Deposits_assetsConnection_edges_node_source_ERC20 {
+export interface DepositAssets_assetsConnection_edges_node_source_ERC20 {
   __typename: "ERC20";
   /**
    * The address of the ERC20 contract
@@ -19,9 +21,9 @@ export interface Deposits_assetsConnection_edges_node_source_ERC20 {
   contractAddress: string;
 }
 
-export type Deposits_assetsConnection_edges_node_source = Deposits_assetsConnection_edges_node_source_BuiltinAsset | Deposits_assetsConnection_edges_node_source_ERC20;
+export type DepositAssets_assetsConnection_edges_node_source = DepositAssets_assetsConnection_edges_node_source_BuiltinAsset | DepositAssets_assetsConnection_edges_node_source_ERC20;
 
-export interface Deposits_assetsConnection_edges_node {
+export interface DepositAssets_assetsConnection_edges_node {
   __typename: "Asset";
   /**
    * The ID of the asset
@@ -39,28 +41,35 @@ export interface Deposits_assetsConnection_edges_node {
    * The precision of the asset. Should match the decimal precision of the asset on its native chain, e.g: for ERC20 assets, it is often 18
    */
   decimals: number;
+  /**
+   * The status of the asset in the Vega network
+   */
+  status: AssetStatus;
   /**
    * The origin source of the asset (e.g: an ERC20 asset)
    */
-  source: Deposits_assetsConnection_edges_node_source;
+  source: DepositAssets_assetsConnection_edges_node_source;
 }
 
-export interface Deposits_assetsConnection_edges {
+export interface DepositAssets_assetsConnection_edges {
   __typename: "AssetEdge";
-  node: Deposits_assetsConnection_edges_node;
+  /**
+   * The asset information
+   */
+  node: DepositAssets_assetsConnection_edges_node;
 }
 
-export interface Deposits_assetsConnection {
+export interface DepositAssets_assetsConnection {
   __typename: "AssetsConnection";
   /**
    * The assets
    */
-  edges: (Deposits_assetsConnection_edges | null)[] | null;
+  edges: (DepositAssets_assetsConnection_edges | null)[] | null;
 }
 
-export interface Deposits {
+export interface DepositAssets {
   /**
    * The list of all assets in use in the Vega network or the specified asset if ID is provided
    */
-  assetsConnection: Deposits_assetsConnection;
+  assetsConnection: DepositAssets_assetsConnection | null;
 }

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

@@ -0,0 +1,57 @@
+import { Schema as Types } from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type DepositAssetsQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type DepositAssetsQuery = { __typename?: 'Query', assetsConnection?: { __typename?: 'AssetsConnection', edges?: Array<{ __typename?: 'AssetEdge', node: { __typename?: 'Asset', id: string, name: string, symbol: string, decimals: number, source: { __typename?: 'BuiltinAsset' } | { __typename?: 'ERC20', contractAddress: string } } } | null> | null } | null };
+
+
+export const DepositAssetsDocument = gql`
+    query DepositAssets {
+  assetsConnection {
+    edges {
+      node {
+        id
+        name
+        symbol
+        decimals
+        source {
+          ... on ERC20 {
+            contractAddress
+          }
+        }
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useDepositAssetsQuery__
+ *
+ * To run a query within a React component, call `useDepositAssetsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useDepositAssetsQuery` 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 } = useDepositAssetsQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useDepositAssetsQuery(baseOptions?: Apollo.QueryHookOptions<DepositAssetsQuery, DepositAssetsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<DepositAssetsQuery, DepositAssetsQueryVariables>(DepositAssetsDocument, options);
+      }
+export function useDepositAssetsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<DepositAssetsQuery, DepositAssetsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<DepositAssetsQuery, DepositAssetsQueryVariables>(DepositAssetsDocument, options);
+        }
+export type DepositAssetsQueryHookResult = ReturnType<typeof useDepositAssetsQuery>;
+export type DepositAssetsLazyQueryHookResult = ReturnType<typeof useDepositAssetsLazyQuery>;
+export type DepositAssetsQueryResult = Apollo.QueryResult<DepositAssetsQuery, DepositAssetsQueryVariables>;

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

@@ -1,15 +1,14 @@
 import { gql, useQuery } from '@apollo/client';
 import { DepositManager } from '@vegaprotocol/deposits';
-import { t } from '@vegaprotocol/react-helpers';
+import { getEnabledAssets, t } from '@vegaprotocol/react-helpers';
 import { Networks, useEnvironment } from '@vegaprotocol/environment';
 import { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { Web3Container } from '@vegaprotocol/web3';
-import { assetsConnectionToAssets } from '@vegaprotocol/react-helpers';
-import type { Deposits } from './__generated__/Deposits';
+import type { DepositAssets } from './__generated__/DepositAssets';
 
 const DEPOSITS_QUERY = gql`
-  query Deposits {
+  query DepositAssets {
     assetsConnection {
       edges {
         node {
@@ -17,6 +16,7 @@ const DEPOSITS_QUERY = gql`
           name
           symbol
           decimals
+          status
           source {
             ... on ERC20 {
               contractAddress
@@ -35,15 +35,15 @@ export const DepositContainer = () => {
   const { VEGA_ENV } = useEnvironment();
   const { keypair } = useVegaWallet();
 
-  const { data, loading, error } = useQuery<Deposits>(DEPOSITS_QUERY, {
+  const { data, loading, error } = useQuery<DepositAssets>(DEPOSITS_QUERY, {
     variables: { partyId: keypair?.pub },
     skip: !keypair?.pub,
   });
 
-  const assets = assetsConnectionToAssets(data?.assetsConnection);
+  const assets = getEnabledAssets(data);
 
   return (
-    <AsyncRenderer<Deposits> data={data} loading={loading} error={error}>
+    <AsyncRenderer<DepositAssets> data={data} loading={loading} error={error}>
       {assets.length ? (
         <Web3Container>
           <DepositManager

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

@@ -22,9 +22,8 @@ export const NavigationDrawer = ({
   const width = 'w-full md:w-auto md:min-w-[15%] shrink-0';
   const position = 'absolute inset-0 h-full z-10 md:static';
   const background = 'bg-black/50 dark:bg-white/50';
-  const border = 'border-r border-neutral-300 dark:border-neutral-700';
   const flex = 'flex justify-end overflow-hidden';
-  const joinedClasses = [flex, width, position, background, border].join(' ');
+  const joinedClasses = [flex, width, position, background].join(' ');
 
   const outerStyles = classNames(joinedClasses, {
     visible: isMenuOpen,

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

@@ -12,7 +12,7 @@ const Header = () => {
   } = useContext(LocalContext);
   return (
     <div
-      className="flex items-stretch pr-6 py-6 bg-black text-neutral-400 border-b border-neutral-300 dark:border-neutral-700"
+      className="dark flex items-stretch pr-6 py-6 bg-black text-neutral-400"
       data-testid="header"
     >
       <Logo />
@@ -21,12 +21,7 @@ const Header = () => {
           setConnectDialog={setConnect}
           setManageDialog={setManage}
         />
-        <ThemeSwitcher
-          theme={theme}
-          onToggle={toggleTheme}
-          className="-my-4"
-          fixedBg="dark"
-        />
+        <ThemeSwitcher theme={theme} onToggle={toggleTheme} className="-my-4" />
       </div>
     </div>
   );

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

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

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

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

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

@@ -1,20 +1,19 @@
 import React, { useCallback, useState } from 'react';
+import type { ReactNode } from 'react';
 import { t } from '@vegaprotocol/react-helpers';
 import { Input } from '@vegaprotocol/ui-toolkit';
 import type { InputProps } from '@vegaprotocol/ui-toolkit';
 
 interface InputSetterProps {
   buttonLabel?: string;
-  value: string | number;
   isInputVisible?: boolean;
-  onValueChange?: () => string;
+  children?: ReactNode;
 }
 
 export const InputSetter = ({
   buttonLabel = t('set'),
-  value = '',
   isInputVisible = false,
-  onValueChange,
+  children,
   ...props
 }: InputSetterProps & InputProps) => {
   const [isInputToggled, setIsInputToggled] = useState(isInputVisible);
@@ -35,7 +34,7 @@ export const InputSetter = ({
 
   return isInputToggled ? (
     <div className="flex items-center">
-      <Input {...props} value={value} onKeyDown={onInputEnter} />
+      <Input {...props} onKeyDown={onInputEnter} />
       <button
         type="button"
         className="no-underline hover:underline text-blue ml-2"
@@ -47,10 +46,10 @@ export const InputSetter = ({
   ) : (
     <button
       type="button"
-      className="no-underline hover:underline text-blue"
+      className="no-underline hover:underline text-blue py-1.5"
       onClick={toggleInput}
     >
-      {value}
+      {children || props.value}
     </button>
   );
 };

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

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

apps/console-lite/src/app/components/portfolio/accounts/accounts.tsx

@@ -0,0 +1,63 @@
+import { useMemo, useRef } from 'react';
+import { useOutletContext } from 'react-router-dom';
+import type { AgGridReact } from 'ag-grid-react';
+import { PriceCell, useDataProvider } from '@vegaprotocol/react-helpers';
+import type {
+  AccountFieldsFragment,
+  AccountEventsSubscription,
+} from '@vegaprotocol/accounts';
+import {
+  accountsDataProvider,
+  accountsManagerUpdate,
+  getId,
+} from '@vegaprotocol/accounts';
+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 '.';
+
+interface AccountObj extends AccountFieldsFragment {
+  id: string;
+}
+
+const AccountsManager = () => {
+  const { partyId = '' } = useOutletContext<{ partyId: string }>();
+  const { isOpen, symbol, setOpen } = useAssetDetailsDialogStore();
+  const gridRef = useRef<AgGridReact | null>(null);
+  const variables = useMemo(() => ({ partyId }), [partyId]);
+  const update = useMemo(() => accountsManagerUpdate(gridRef), []);
+  const { data, error, loading } = useDataProvider<
+    AccountFieldsFragment[],
+    AccountEventsSubscription['accounts']
+  >({ dataProvider: accountsDataProvider, update, variables });
+  const { columnDefs, defaultColDef } = useAccountColumnDefinitions();
+  return (
+    <>
+      <AsyncRenderer
+        loading={loading}
+        error={error}
+        data={data}
+        noDataMessage={NO_DATA_MESSAGE}
+      >
+        <ConsoleLiteGrid<AccountObj>
+          rowData={data as AccountObj[]}
+          columnDefs={columnDefs}
+          defaultColDef={defaultColDef}
+          components={{ PriceCell }}
+          getRowId={({ data }) => getId(data)}
+        />
+      </AsyncRenderer>
+      <AssetDetailsDialog
+        assetSymbol={symbol}
+        open={isOpen}
+        onChange={(open) => setOpen(open)}
+      />
+    </>
+  );
+};
+
+export default AccountsManager;

apps/console-lite/src/app/components/portfolio/accounts/index.ts

@@ -0,0 +1,2 @@
+export { default as AccountManager } from './accounts';
+export { default as useAccountColumnDefinitions } from './use-column-definitions';

apps/console-lite/src/app/components/portfolio/accounts/use-column-definitions.tsx

@@ -0,0 +1,111 @@
+import React, { useMemo } from 'react';
+import { addDecimalsFormatNumber, t } from '@vegaprotocol/react-helpers';
+import type { SummaryRow } from '@vegaprotocol/react-helpers';
+import type { AccountFieldsFragment } from '@vegaprotocol/accounts';
+import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
+import type {
+  ColDef,
+  GroupCellRendererParams,
+  ValueFormatterParams,
+} from 'ag-grid-community';
+import type { AccountType } from '@vegaprotocol/types';
+import { AccountTypeMapping } from '@vegaprotocol/types';
+
+interface AccountsTableValueFormatterParams extends ValueFormatterParams {
+  data: AccountFieldsFragment;
+}
+
+const comparator = (
+  valueA: string,
+  valueB: string,
+  nodeA: { data: AccountFieldsFragment & SummaryRow },
+  nodeB: { data: AccountFieldsFragment & SummaryRow },
+  isInverted: boolean
+) => {
+  if (valueA < valueB) {
+    return -1;
+  }
+
+  if (valueA > valueB) {
+    return 1;
+  }
+
+  if (nodeA.data.__summaryRow) {
+    return isInverted ? -1 : 1;
+  }
+
+  if (nodeB.data.__summaryRow) {
+    return isInverted ? 1 : -1;
+  }
+
+  return 0;
+};
+
+const useAccountColumnDefinitions = () => {
+  const { open } = useAssetDetailsDialogStore();
+  const columnDefs: ColDef[] = useMemo(() => {
+    return [
+      {
+        colId: 'account-asset',
+        headerName: t('Asset'),
+        field: 'asset.symbol',
+        comparator,
+        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: 'type',
+        headerName: t('Type'),
+        field: 'type',
+        cellClass: 'uppercase !flex h-full items-center',
+        valueFormatter: ({ value }: ValueFormatterParams) =>
+          value ? AccountTypeMapping[value as AccountType] : '-',
+      },
+      {
+        colId: 'market',
+        headerName: t('Market'),
+        cellClass: 'uppercase !flex h-full items-center',
+        field: 'market.tradableInstrument.instrument.name',
+        valueFormatter: "value || '—'",
+      },
+      {
+        colId: 'balance',
+        headerName: t('Balance'),
+        field: 'balance',
+        cellClass: 'uppercase !flex h-full items-center',
+        cellRenderer: 'PriceCell',
+        valueFormatter: ({ value, data }: AccountsTableValueFormatterParams) =>
+          addDecimalsFormatNumber(value, data.asset.decimals),
+      },
+    ];
+  }, [open]);
+
+  const defaultColDef = useMemo(() => {
+    return {
+      sortable: true,
+      unSortIcon: true,
+      headerClass: 'uppercase',
+      editable: false,
+    };
+  }, []);
+  return { columnDefs, defaultColDef };
+};
+
+export default useAccountColumnDefinitions;

apps/console-lite/src/app/components/portfolio/constants.ts

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

apps/console-lite/src/app/components/portfolio/fills/fills.tsx

@@ -0,0 +1,53 @@
+import { useRef } from 'react';
+import { useOutletContext } from 'react-router-dom';
+import type { AgGridReact } from 'ag-grid-react';
+import type { TradeWithMarket } 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<TradeWithMarket>
+        ref={gridRef}
+        rowModelType="infinite"
+        datasource={{ getRows }}
+        onBodyScrollEnd={onBodyScrollEnd}
+        onBodyScroll={onBodyScroll}
+        columnDefs={columnDefs}
+        defaultColDef={defaultColDef}
+      />
+    </AsyncRenderer>
+  );
+};
+
+export default FillsManager;

apps/console-lite/src/app/components/portfolio/fills/index.ts

@@ -0,0 +1 @@
+export { default as FillsManager } from './fills';

apps/console-lite/src/app/components/portfolio/fills/use-column-definitions.tsx

@@ -0,0 +1,190 @@
+import { useMemo } from 'react';
+import type { ColDef, ValueFormatterParams } from 'ag-grid-community';
+import type { TradeWithMarket } 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 { Side } 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: TradeWithMarket }) => {
+          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 === Side.SIDE_BUY) {
+                return taker;
+              } else {
+                return maker;
+              }
+            } else if (data?.seller.id === partyId) {
+              if (value === 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;

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

@@ -1 +1,6 @@
 export * from './portfolio';
+export * from './accounts';
+export * from './fills';
+export * from './orders';
+export * from './positions';
+export * as constants from './constants';

apps/console-lite/src/app/components/portfolio/orders/index.ts

@@ -0,0 +1 @@
+export { default as OrdersManager } from './orders';

apps/console-lite/src/app/components/portfolio/orders/orders.tsx

@@ -0,0 +1,101 @@
+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 { OrderWithMarket } 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<OrderWithMarket | 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<OrderWithMarket>
+        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.cancelledOrder?.status)}
+        intent={getCancelDialogIntent(orderCancel.cancelledOrder?.status)}
+      >
+        <OrderFeedback
+          transaction={orderCancel.transaction}
+          order={orderCancel.cancelledOrder}
+        />
+      </orderCancel.Dialog>
+      <orderEdit.Dialog
+        title={getEditDialogTitle(orderEdit.updatedOrder?.status)}
+      >
+        <OrderFeedback
+          transaction={orderEdit.transaction}
+          order={orderEdit.updatedOrder}
+        />
+      </orderEdit.Dialog>
+      {editOrder && (
+        <OrderEditDialog
+          isOpen={Boolean(editOrder)}
+          onChange={(isOpen) => {
+            if (!isOpen) setEditOrder(null);
+          }}
+          order={editOrder}
+          onSubmit={(fields) => {
+            setEditOrder(null);
+            orderEdit.edit({ price: fields.entryPrice });
+          }}
+        />
+      )}
+    </AsyncRenderer>
+  );
+};
+
+export default OrdersManager;

apps/console-lite/src/app/components/portfolio/orders/use-column-definitions.tsx

@@ -0,0 +1,287 @@
+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 {
+  Orders_party_ordersConnection_edges_node,
+  OrderWithMarket,
+  CancelOrderArgs,
+} from '@vegaprotocol/orders';
+import { isOrderActive } from '@vegaprotocol/orders';
+import {
+  OrderRejectionReasonMapping,
+  OrderStatus,
+  OrderType,
+  OrderStatusMapping,
+  OrderTypeMapping,
+  Side,
+  OrderTimeInForce,
+  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: OrderWithMarket) => void;
+  orderCancel: {
+    cancel: (args: CancelOrderArgs) => 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: Orders_party_ordersConnection_edges_node;
+          }) => data?.side === Side.SIDE_BUY,
+          [negativeClassNames]: ({
+            data,
+          }: {
+            data: Orders_party_ordersConnection_edges_node;
+          }) => data?.side === Side.SIDE_SELL,
+        },
+        valueFormatter: ({ value, data }: ValueFormatterParams) => {
+          if (value && data && data.market) {
+            const prefix = data
+              ? data.side === Side.SIDE_BUY
+                ? '+'
+                : '-'
+              : '';
+            return (
+              prefix + addDecimal(value, data.market.positionDecimalPlaces)
+            );
+          }
+          return '-';
+        },
+      },
+      {
+        colId: 'type',
+        field: 'type',
+        width: 80,
+        valueFormatter: ({
+          value,
+        }: ValueFormatterParams & {
+          value?: Orders_party_ordersConnection_edges_node['type'];
+        }) => OrderTypeMapping[value as 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 === 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?: Orders_party_ordersConnection_edges_node['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?: Orders_party_ordersConnection_edges_node['price'];
+        }) => {
+          if (
+            value === undefined ||
+            !data ||
+            !data.market ||
+            data.type === 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 === 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?: Orders_party_ordersConnection_edges_node['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?: Orders_party_ordersConnection_edges_node['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;

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

@@ -1,16 +1,15 @@
-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();
+  const { pathname } = useLocation();
+  const module = pathname.split('/portfolio/')?.[1] ?? '';
+  const outlet = useOutlet({ partyId: keypair?.pub || '' });
   if (!keypair) {
     return (
       <section className="xl:w-1/2">
@@ -18,23 +17,11 @@ export const Portfolio = () => {
       </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>
   );
 };

apps/console-lite/src/app/components/portfolio/positions/index.ts

@@ -0,0 +1 @@
+export { default as PositionsManager } from './positions';

apps/console-lite/src/app/components/portfolio/positions/positions-asset.tsx

@@ -0,0 +1,58 @@
+import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
+import { useRef } from 'react';
+import type { AgGridReact } from 'ag-grid-react';
+import type { Position } from '@vegaprotocol/positions';
+import { PriceFlashCell, t } from '@vegaprotocol/react-helpers';
+import { AssetBalance } from '@vegaprotocol/accounts';
+import { usePositionsData } from '@vegaprotocol/positions';
+import { ConsoleLiteGrid } from '../../console-lite-grid';
+import useColumnDefinitions from './use-column-definitions';
+
+interface Props {
+  partyId: string;
+  assetSymbol: string;
+}
+
+const getRowId = ({ data }: { data: Position }) => data.marketId;
+
+const PositionsAsset = ({ partyId, assetSymbol }: Props) => {
+  const gridRef = useRef<AgGridReact | null>(null);
+  const { data, error, loading, getRows } = usePositionsData(
+    partyId,
+    gridRef,
+    assetSymbol
+  );
+  const { columnDefs, defaultColDef } = useColumnDefinitions();
+  return (
+    <AsyncRenderer loading={loading} error={error} data={data}>
+      <div
+        data-testid={`positions-asset-${assetSymbol}`}
+        className="flex justify-between items-center px-4 pt-3 pb-1"
+      >
+        <h4>
+          {assetSymbol} {t('markets')}
+        </h4>
+        <div className="text-sm text-neutral-500 dark:text-neutral-300">
+          {assetSymbol} {t('balance')}:
+          <span data-testid="balance" className="pl-1 font-mono">
+            <AssetBalance partyId={partyId} assetSymbol={assetSymbol} />
+          </span>
+        </div>
+      </div>
+      <ConsoleLiteGrid<Position & { id: undefined }>
+        ref={gridRef}
+        domLayout="autoHeight"
+        classNamesParam="h-auto"
+        columnDefs={columnDefs}
+        defaultColDef={defaultColDef}
+        getRowId={getRowId}
+        rowModelType={data?.length ? 'infinite' : 'clientSide'}
+        rowData={data?.length ? undefined : []}
+        datasource={{ getRows }}
+        components={{ PriceFlashCell }}
+      />
+    </AsyncRenderer>
+  );
+};
+
+export default PositionsAsset;

apps/console-lite/src/app/components/portfolio/positions/positions.tsx

@@ -0,0 +1,28 @@
+import { useOutletContext } from 'react-router-dom';
+import { t } from '@vegaprotocol/react-helpers';
+import { usePositionsAssets } from '@vegaprotocol/positions';
+import { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit';
+import PositionsAsset from './positions-asset';
+
+const Positions = () => {
+  const { partyId } = useOutletContext<{ partyId: string }>();
+  const { data, error, loading, assetSymbols } = usePositionsAssets(partyId);
+  return (
+    <AsyncRenderer loading={loading} error={error} data={data}>
+      {assetSymbols && assetSymbols.length > 0 && (
+        <div className="w-full, h-max">
+          {assetSymbols?.map((assetSymbol) => (
+            <PositionsAsset
+              key={assetSymbol}
+              partyId={partyId}
+              assetSymbol={assetSymbol}
+            />
+          ))}
+        </div>
+      )}
+      {assetSymbols?.length === 0 && <Splash>{t('No data to display')}</Splash>}
+    </AsyncRenderer>
+  );
+};
+
+export default Positions;

apps/console-lite/src/app/components/portfolio/positions/use-column-definitions.tsx

@@ -0,0 +1,291 @@
+import { useMemo } from 'react';
+import {
+  addDecimalsFormatNumber,
+  formatNumber,
+  getDateTimeFormat,
+  PriceFlashCell,
+  signedNumberCssClassRules,
+  t,
+} from '@vegaprotocol/react-helpers';
+import type {
+  PositionsTableValueFormatterParams,
+  Position,
+} from '@vegaprotocol/positions';
+import { AmountCell, ProgressBarCell } from '@vegaprotocol/positions';
+import type {
+  CellRendererSelectorResult,
+  ICellRendererParams,
+  ValueGetterParams,
+  GroupCellRendererParams,
+  ColDef,
+} from 'ag-grid-community';
+import { MarketTradingMode } from '@vegaprotocol/types';
+import { Intent } 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,
+        }: PositionsTableValueFormatterParams & {
+          value: 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,
+        }: PositionsTableValueFormatterParams & {
+          value: Position['markPrice'];
+        }) => {
+          if (
+            data &&
+            value &&
+            node?.rowPinned &&
+            data.marketTradingMode ===
+              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,
+        }: PositionsTableValueFormatterParams & {
+          value: 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,
+        }: PositionsTableValueFormatterParams & {
+          value: Position['realisedPNL'];
+        }) =>
+          value === 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,
+        }: PositionsTableValueFormatterParams & {
+          value: Position['unrealisedPNL'];
+        }) =>
+          value === 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,
+        }: PositionsTableValueFormatterParams & {
+          value: 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;

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

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

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

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

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

@@ -1,133 +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_data_market {
-  __typename: "Market";
-  /**
-   * Market ID
-   */
-  id: string;
-  /**
-   * Current state of the market
-   */
-  state: MarketState;
-}
-
-export interface SimpleMarkets_markets_data {
-  __typename: "MarketData";
-  /**
-   * market ID of the associated mark price
-   */
-  market: SimpleMarkets_markets_data_market;
-}
-
-export interface SimpleMarkets_markets_tradableInstrument_instrument_metadata {
-  __typename: "InstrumentMetadata";
-  /**
-   * 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;
-  /**
-   * 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;
-  /**
-   * Market full name
-   */
-  name: string;
-  /**
-   * Current state of the market
-   */
-  state: MarketState;
-  /**
-   * marketData for the given market
-   */
-  data: SimpleMarkets_markets_data | null;
-  /**
-   * An instance of, or reference to, a tradable instrument.
-   */
-  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;
-}

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

@@ -0,0 +1,43 @@
+import { Schema as Types } from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type CandleLiveSubscriptionVariables = Types.Exact<{
+  marketId: Types.Scalars['ID'];
+}>;
+
+
+export type CandleLiveSubscription = { __typename?: 'Subscription', candles: { __typename?: 'Candle', close: string } };
+
+
+export const CandleLiveDocument = gql`
+    subscription CandleLive($marketId: ID!) {
+  candles(marketId: $marketId, interval: INTERVAL_I1H) {
+    close
+  }
+}
+    `;
+
+/**
+ * __useCandleLiveSubscription__
+ *
+ * To run a query within a React component, call `useCandleLiveSubscription` and pass it any options that fit your needs.
+ * When your component renders, `useCandleLiveSubscription` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the subscription, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useCandleLiveSubscription({
+ *   variables: {
+ *      marketId: // value for 'marketId'
+ *   },
+ * });
+ */
+export function useCandleLiveSubscription(baseOptions: Apollo.SubscriptionHookOptions<CandleLiveSubscription, CandleLiveSubscriptionVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useSubscription<CandleLiveSubscription, CandleLiveSubscriptionVariables>(CandleLiveDocument, options);
+      }
+export type CandleLiveSubscriptionHookResult = ReturnType<typeof useCandleLiveSubscription>;
+export type CandleLiveSubscriptionResult = Apollo.SubscriptionResult<CandleLiveSubscription>;

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

@@ -1,9 +1,9 @@
 import { t } from '@vegaprotocol/react-helpers';
 import { themelite as theme } from '@vegaprotocol/tailwindcss-config';
 import { MarketState } from '@vegaprotocol/types';
-import { IS_MARKET_TRADABLE } from '../../constants';
-import type { SimpleMarkets_markets } from './__generated__/SimpleMarkets';
 import colors from 'tailwindcss/colors';
+import type { Market } from '@vegaprotocol/market-list';
+import { IS_MARKET_TRADABLE } from '../../constants';
 
 export const STATES_FILTER = [
   { value: 'all', text: t('All') },
@@ -192,6 +192,17 @@ export const agGridDarkVariables = `
 `;
 
 export const ROW_CLASS_RULES = {
-  'cursor-pointer': ({ data }: { data: SimpleMarkets_markets }) =>
+  'cursor-pointer': ({ data }: { data: Market }) =>
     IS_MARKET_TRADABLE(data || {}),
 };
+
+export const LARGE_SCREENS = ['xl', 'xxl'];
+
+export const ALL_PRODUCTS_ITEM = {
+  name: t('All Markets'),
+  id: 'allmarkets',
+  cssClass: 'text-pink',
+  color: theme.colors.pink,
+};
+
+export const AG_GRID_CONTAINER_STYLES = { width: '100%', height: '100%' };

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

@@ -1,105 +0,0 @@
-import produce from 'immer';
-import { gql } from '@apollo/client';
-import { makeDataProvider } from '@vegaprotocol/react-helpers';
-import type {
-  SimpleMarkets,
-  SimpleMarkets_markets,
-} from './__generated__/SimpleMarkets';
-import type {
-  SimpleMarketDataSub,
-  SimpleMarketDataSub_marketData,
-} from './__generated__/SimpleMarketDataSub';
-
-const MARKET_DATA_FRAGMENT = gql`
-  fragment SimpleMarketDataFields on MarketData {
-    market {
-      id
-      state
-    }
-  }
-`;
-
-export const MARKETS_QUERY = gql`
-  ${MARKET_DATA_FRAGMENT}
-  query SimpleMarkets($CandleSince: String!) {
-    markets {
-      id
-      name
-      state
-      data {
-        ...SimpleMarketDataFields
-      }
-      tradableInstrument {
-        instrument {
-          code
-          metadata {
-            tags
-          }
-          product {
-            __typename
-            ... on Future {
-              quoteName
-              settlementAsset {
-                symbol
-              }
-            }
-          }
-        }
-      }
-      candles(interval: INTERVAL_I1H, since: $CandleSince) {
-        open
-        close
-      }
-    }
-  }
-`;
-
-const MARKET_DATA_SUB = gql`
-  ${MARKET_DATA_FRAGMENT}
-  subscription SimpleMarketDataSub {
-    marketData {
-      ...SimpleMarketDataFields
-    }
-  }
-`;
-
-export const CANDLE_SUB = gql`
-  subscription CandleLive($marketId: ID!) {
-    candles(marketId: $marketId, interval: INTERVAL_I1H) {
-      close
-    }
-  }
-`;
-
-const update = (
-  data: SimpleMarkets_markets[],
-  delta: SimpleMarketDataSub_marketData
-) => {
-  return produce(data, (draft) => {
-    const index = draft.findIndex((m) => m.id === delta.market.id);
-    if (index !== -1) {
-      draft[index].data = delta;
-    }
-    // @TODO - else push new market to draft
-  });
-};
-
-const getData = (responseData: SimpleMarkets) => responseData.markets;
-const getDelta = (
-  subscriptionData: SimpleMarketDataSub
-): SimpleMarketDataSub_marketData => subscriptionData.marketData;
-
-export const dataProvider = makeDataProvider<
-  SimpleMarkets,
-  SimpleMarkets_markets[],
-  SimpleMarketDataSub,
-  SimpleMarketDataSub_marketData
->({
-  query: MARKETS_QUERY,
-  subscriptionQuery: MARKET_DATA_SUB,
-  update,
-  getData,
-  getDelta,
-});
-
-export default dataProvider;

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

@@ -4,19 +4,14 @@ import {
   render,
   screen,
   waitFor,
-  cleanup,
   getAllByRole,
+  fireEvent,
 } from '@testing-library/react';
 import { MockedProvider } from '@apollo/client/testing';
-import type { MockedResponse } from '@apollo/client/testing';
 import { BrowserRouter } from 'react-router-dom';
-import SimpleMarketList from './simple-market-list';
-import { MARKETS_QUERY } from './data-provider';
-import type {
-  SimpleMarkets_markets,
-  SimpleMarkets,
-} from './__generated__/SimpleMarkets';
 import { MarketState } from '@vegaprotocol/types';
+import type { Market } from '@vegaprotocol/market-list';
+import SimpleMarketList from './simple-market-list';
 
 const mockedNavigate = jest.fn();
 
@@ -26,100 +21,75 @@ jest.mock('react-router-dom', () => ({
   useParams: () => ({}),
 }));
 
-jest.mock('date-fns', () => ({
-  subDays: () => new Date('2022-06-02T11:11:21.721Z'),
+jest.mock('./simple-market-percent-change', () => jest.fn());
+
+let marketsMock = [
+  {
+    id: 'MARKET_A',
+    state: MarketState.STATE_ACTIVE,
+    tradableInstrument: {
+      instrument: {
+        product: {
+          settlementAsset: {
+            symbol: 'tUSD',
+          },
+        },
+        metadata: {
+          tags: [],
+        },
+      },
+    },
+  },
+  {
+    id: 'MARKET_B',
+    state: MarketState.STATE_ACTIVE,
+    tradableInstrument: {
+      instrument: {
+        product: {
+          settlementAsset: {
+            symbol: 'ETH',
+          },
+        },
+        metadata: {
+          tags: [],
+        },
+      },
+    },
+  },
+] as unknown as Market[];
+
+const LIB = '@vegaprotocol/market-list';
+const useMarketList = () => {
+  return {
+    data: {
+      markets: marketsMock,
+      marketsData: [],
+      marketsCandles: [],
+    },
+    loading: false,
+    error: false,
+  };
+};
+jest.mock(LIB, () => ({
+  ...jest.requireActual(LIB),
+  useMarketList: jest.fn(() => useMarketList()),
+}));
+
+const mockIsTradable = jest.fn((_arg) => true);
+jest.mock('../../constants', () => ({
+  ...jest.requireActual('../../constants'),
+  IS_MARKET_TRADABLE: jest.fn((arg) => mockIsTradable(arg)),
 }));
 
 describe('SimpleMarketList', () => {
   afterEach(() => {
     jest.clearAllMocks();
-    cleanup();
-  });
-
-  it('should be properly renderer as empty', async () => {
-    const mocks: MockedResponse<SimpleMarkets> = {
-      request: {
-        query: MARKETS_QUERY,
-        variables: {
-          CandleSince: '2022-06-02T11:11:21.721Z',
-        },
-      },
-      result: {
-        data: { markets: [] },
-      },
-    };
-    await act(async () => {
-      render(
-        <MockedProvider mocks={[mocks]}>
-          <SimpleMarketList />
-        </MockedProvider>,
-        { wrapper: BrowserRouter }
-      );
-      await new Promise((resolve) => setTimeout(resolve, 0));
-    });
-    await waitFor(() => {
-      expect(screen.getByText('No data to display')).toBeInTheDocument();
-    });
   });
 
   it('should be properly rendered with some data', async () => {
-    const data = [
-      {
-        id: '1',
-        data: {
-          market: {
-            state: MarketState.STATE_ACTIVE,
-          },
-        },
-        tradableInstrument: {
-          instrument: {
-            product: {
-              settlementAsset: {
-                symbol: 'tUSD',
-              },
-            },
-            metadata: {
-              tags: [],
-            },
-          },
-        },
-      },
-      {
-        id: '2',
-        data: {
-          market: {
-            state: MarketState.STATE_ACTIVE,
-          },
-        },
-        tradableInstrument: {
-          instrument: {
-            product: {
-              settlementAsset: {
-                symbol: 'ETH',
-              },
-            },
-            metadata: {
-              tags: [],
-            },
-          },
-        },
-      },
-    ] as unknown as SimpleMarkets_markets[];
-
-    const mocks: MockedResponse<SimpleMarkets> = {
-      request: {
-        query: MARKETS_QUERY,
-        variables: {
-          CandleSince: '2022-06-02T11:11:21.721Z',
-        },
-      },
-      result: {
-        data: { markets: data },
-      },
-    };
     await act(async () => {
       render(
-        <MockedProvider mocks={[mocks]}>
+        <MockedProvider mocks={[]}>
           <SimpleMarketList />
         </MockedProvider>,
         { wrapper: BrowserRouter }
@@ -130,10 +100,52 @@ describe('SimpleMarketList', () => {
       expect(
         document.querySelector('.ag-center-cols-container')
       ).toBeInTheDocument();
-    });
-    await waitFor(() => {
       const container = document.querySelector('.ag-center-cols-container');
       expect(getAllByRole(container as HTMLDivElement, 'row')).toHaveLength(2);
     });
   });
+
+  it('click on row should be properly handled', async () => {
+    await act(async () => {
+      render(
+        <MockedProvider mocks={[]}>
+          <SimpleMarketList />
+        </MockedProvider>,
+        { wrapper: BrowserRouter }
+      );
+    });
+    mockIsTradable.mockClear();
+    const container = document.querySelector('.ag-center-cols-container');
+    const firstRow = getAllByRole(container as HTMLDivElement, 'row')[0];
+    expect(firstRow).toHaveAttribute('row-id', marketsMock[0].id);
+    await act(async () => {
+      fireEvent.click(firstRow);
+    });
+    await waitFor(() => {
+      expect(mockIsTradable).toHaveBeenCalledWith(
+        expect.objectContaining({
+          id: marketsMock[0].id,
+          state: MarketState.STATE_ACTIVE,
+        })
+      );
+      expect(mockedNavigate).toHaveBeenCalledWith(
+        `/trading/${marketsMock[0].id}`
+      );
+    });
+  });
+
+  it('should be properly renderer as empty', async () => {
+    marketsMock = [];
+    await act(async () => {
+      render(
+        <MockedProvider mocks={[]}>
+          <SimpleMarketList />
+        </MockedProvider>,
+        { wrapper: BrowserRouter }
+      );
+    });
+    await waitFor(() => {
+      expect(screen.getByText('No data to display')).toBeInTheDocument();
+    });
+  });
 });

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

@@ -1,40 +1,18 @@
-import React, {
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useRef,
-} from 'react';
+import React, { useCallback, useEffect, useRef } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
-import { subDays } from 'date-fns';
 import type { AgGridReact } from 'ag-grid-react';
-import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
-import {
-  useDataProvider,
-  useScreenDimensions,
-} from '@vegaprotocol/react-helpers';
-import { t } from '@vegaprotocol/react-helpers';
+import { useScreenDimensions } from '@vegaprotocol/react-helpers';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
-import { ThemeContext } from '@vegaprotocol/react-helpers';
 import type { MarketState } from '@vegaprotocol/types';
-import useMarketsFilterData from '../../hooks/use-markets-filter-data';
-import useColumnDefinitions from '../../hooks/use-column-definitions';
-import dataProvider from './data-provider';
-import * as constants from './constants';
+import useMarketsFilterData from './use-markets-filter-data';
+import useColumnDefinitions from './use-column-definitions';
 import SimpleMarketToolbar from './simple-market-toolbar';
-import type { SimpleMarkets_markets } from './__generated__/SimpleMarkets';
-import type { SimpleMarketDataSub_marketData } from './__generated__/SimpleMarketDataSub';
 import { IS_MARKET_TRADABLE } from '../../constants';
-import type {
-  CellKeyDownEvent,
-  FullWidthCellKeyDownEvent,
-} from 'ag-grid-community/dist/lib/events';
-import type {
-  GetRowIdParams,
-  TabToNextCellParams,
-} from 'ag-grid-community/dist/lib/entities/iCallbackParams';
+import { ConsoleLiteGrid } from '../console-lite-grid';
+import type { Market, MarketsListData } from '@vegaprotocol/market-list';
+import { useMarketList } from '@vegaprotocol/market-list';
 
-export type SimpleMarketsType = SimpleMarkets_markets & {
+export type MarketWithPercentChange = Market & {
   percentChange?: number | '-';
 };
 
@@ -48,30 +26,11 @@ const SimpleMarketList = () => {
   const { isMobile } = useScreenDimensions();
   const navigate = useNavigate();
   const params = useParams<RouterParams>();
-  const theme = useContext(ThemeContext);
   const statusesRef = useRef<Record<string, MarketState | ''>>({});
   const gridRef = useRef<AgGridReact | null>(null);
-  const variables = useMemo(
-    () => ({
-      CandleSince: subDays(Date.now(), 1).toJSON(),
-    }),
-    []
-  );
-  const update = useCallback(
-    ({ delta }: { delta: SimpleMarketDataSub_marketData }) =>
-      statusesRef.current[delta.market.id] === delta.market.state,
-    [statusesRef]
-  );
 
-  const { data, error, loading } = useDataProvider({
-    dataProvider,
-    update,
-    variables,
-  });
-  const localData: Array<SimpleMarketsType> = useMarketsFilterData(
-    data || [],
-    params
-  );
+  const { data, error, loading } = useMarketList();
+  const localData = useMarketsFilterData(data as MarketsListData, params);
 
   const handleOnGridReady = useCallback(() => {
     gridRef.current?.api?.sizeColumnsToFit();
@@ -79,8 +38,8 @@ const SimpleMarketList = () => {
 
   useEffect(() => {
     const statuses: Record<string, MarketState | ''> = {};
-    data?.forEach((market) => {
-      statuses[market.id] = market.data?.market.state || '';
+    data?.markets?.forEach((market) => {
+      statuses[market.id] = market.state || '';
     });
     statusesRef.current = statuses;
   }, [data, statusesRef]);
@@ -92,10 +51,8 @@ const SimpleMarketList = () => {
 
   const { columnDefs, defaultColDef } = useColumnDefinitions({ isMobile });
 
-  const getRowId = useCallback(({ data }: GetRowIdParams) => data.id, []);
-
   const handleRowClicked = useCallback(
-    ({ data }: { data: SimpleMarketsType }) => {
+    ({ data }: { data: Market }) => {
       if (IS_MARKET_TRADABLE(data)) {
         navigate(`/trading/${data.id}`);
       }
@@ -103,59 +60,16 @@ const SimpleMarketList = () => {
     [navigate]
   );
 
-  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 onCellKeyDown = useCallback(
-    (
-      params: (CellKeyDownEvent | FullWidthCellKeyDownEvent) & {
-        event: KeyboardEvent;
-      }
-    ) => {
-      const { event: { key = '' } = {}, data } = params;
-      if (key === 'Enter') {
-        handleRowClicked({ data });
-      }
-    },
-    [handleRowClicked]
-  );
-
   return (
     <div className="h-full p-4 md:p-6 grid grid-rows-[min-content,1fr]">
-      <SimpleMarketToolbar data={data || []} />
+      <SimpleMarketToolbar data={data?.markets || []} />
       <AsyncRenderer loading={loading} error={error} data={localData}>
-        <AgGrid
-          className="mb-32 min-h-[300px]"
-          defaultColDef={defaultColDef}
+        <ConsoleLiteGrid<MarketWithPercentChange>
+          classNamesParam="mb-32 min-h-[300px]"
           columnDefs={columnDefs}
           rowData={localData}
-          rowHeight={60}
-          customThemeParams={
-            theme === 'dark'
-              ? constants.agGridDarkVariables
-              : constants.agGridLightVariables
-          }
-          onGridReady={handleOnGridReady}
-          onRowClicked={handleRowClicked}
-          rowClass={isMobile ? 'mobile' : ''}
-          rowClassRules={constants.ROW_CLASS_RULES}
-          ref={gridRef}
-          overlayNoRowsTemplate={t('No data to display')}
-          suppressContextMenu
-          getRowId={getRowId}
-          suppressMovableColumns
-          suppressRowTransform
-          onCellKeyDown={onCellKeyDown}
-          tabToNextCell={onTabToNextCell}
+          defaultColDef={defaultColDef}
+          handleRowClicked={handleRowClicked}
         />
       </AsyncRenderer>
     </div>

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

@@ -2,10 +2,10 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { MockedProvider } from '@apollo/react-testing';
 import SimpleMarketPercentChange from './simple-market-percent-change';
-import type { SimpleMarkets_markets_candles } from './__generated__/SimpleMarkets';
+import type { Candle } from '@vegaprotocol/market-list';
 
 describe('SimpleMarketPercentChange should parse proper change', () => {
-  let candles: (SimpleMarkets_markets_candles | null)[] | null;
+  let candles: (Candle | null)[] | null;
   const setValue = () => undefined;
   it('empty array', () => {
     candles = [];
@@ -34,11 +34,7 @@ describe('SimpleMarketPercentChange should parse proper change', () => {
     expect(screen.getByText('-')).toBeInTheDocument();
   });
   it('an appreciated one', () => {
-    candles = [
-      { open: '50' } as SimpleMarkets_markets_candles,
-      { close: '100' } as SimpleMarkets_markets_candles,
-      null,
-    ];
+    candles = [{ open: '50' } as Candle, { close: '100' } as Candle, null];
     render(
       <MockedProvider>
         <SimpleMarketPercentChange
@@ -54,11 +50,7 @@ describe('SimpleMarketPercentChange should parse proper change', () => {
     );
   });
   it('a depreciated one', () => {
-    candles = [
-      { open: '100' } as SimpleMarkets_markets_candles,
-      { close: '50' } as SimpleMarkets_markets_candles,
-      null,
-    ];
+    candles = [{ open: '100' } as Candle, { close: '50' } as Candle, null];
     render(
       <MockedProvider>
         <SimpleMarketPercentChange

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

@@ -1,26 +1,20 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import classNames from 'classnames';
 import { InView } from 'react-intersection-observer';
-import { useSubscription } from '@apollo/client';
-import type { SimpleMarkets_markets_candles } from './__generated__/SimpleMarkets';
-import type {
-  CandleLive,
-  CandleLiveVariables,
-} from './__generated__/CandleLive';
-import { CANDLE_SUB } from './data-provider';
+import { useDataProvider } from '@vegaprotocol/react-helpers';
+import type { Candle } from '@vegaprotocol/market-list';
+import { marketCandlesProvider } from '@vegaprotocol/market-list';
+import { Interval } from '@vegaprotocol/types';
 
 interface Props {
-  candles: (SimpleMarkets_markets_candles | null)[] | null;
+  candles: (Candle | null)[] | null;
   marketId: string;
   setValue: (arg: unknown) => void;
 }
 
 const EMPTY_VALUE = ' - ';
 
-const getChange = (
-  candles: (SimpleMarkets_markets_candles | null)[] | null,
-  lastClose?: string
-) => {
+const getChange = (candles: (Candle | null)[] | null, lastClose?: string) => {
   if (candles) {
     const first = parseInt(candles.find((item) => item?.open)?.open || '-1');
     const last =
@@ -74,11 +68,19 @@ const SimpleMarketPercentChangeWrapper = (props: Props) => {
 };
 
 const SimpleMarketPercentChange = ({ candles, marketId, setValue }: Props) => {
-  const { data: { candles: { close = undefined } = {} } = {} } =
-    useSubscription<CandleLive, CandleLiveVariables>(CANDLE_SUB, {
-      variables: { marketId },
-    });
-  const change = getChange(candles, close);
+  const yesterday = Math.round(new Date().getTime() / 1000) - 24 * 3600;
+  const { data } = useDataProvider({
+    dataProvider: marketCandlesProvider,
+    variables: {
+      marketId,
+      interval: Interval.INTERVAL_I1D,
+      since: new Date(yesterday * 1000).toISOString(),
+    },
+  });
+
+  const close = data?.map((m) => m.close);
+
+  const change = getChange(candles, close?.[0]);
   const colorClasses = getClassColor(change);
   useEffect(() => {
     const value = parseFloat(change);

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

@@ -0,0 +1,36 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MarketState } from '@vegaprotocol/types';
+import MarketNameRenderer from './simple-market-renderer';
+import type { Market } from '@vegaprotocol/market-list';
+
+describe('SimpleMarketRenderer', () => {
+  const market = {
+    id: 'MARKET_A',
+    state: MarketState.STATE_ACTIVE,
+    tradableInstrument: {
+      instrument: {
+        code: 'MARKET_A_CODE',
+        name: 'MARKET_A_NAME',
+        product: {
+          quoteName: 'MARKET_A_QUOTE_NAME',
+        },
+        metadata: {
+          tags: null,
+        },
+      },
+    },
+  } as Market;
+
+  it('should properly render not mobile', () => {
+    render(<MarketNameRenderer market={market} isMobile={false} />);
+    expect(screen.getByText('MARKET_A_NAME')).toBeInTheDocument();
+    expect(screen.getByText('MARKET_A_QUOTE_NAME')).toBeInTheDocument();
+  });
+
+  it('should properly render mobile', () => {
+    render(<MarketNameRenderer market={market} isMobile={true} />);
+    expect(screen.getByText('MARKET_A_CODE')).toBeInTheDocument();
+    expect(screen.getByText('MARKET_A_QUOTE_NAME')).toBeInTheDocument();
+  });
+});

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

@@ -1,10 +1,9 @@
-import React from 'react';
 import classNames from 'classnames';
-import type { MarketNames_markets } from '@vegaprotocol/deal-ticket';
 import SimpleMarketExpires from './simple-market-expires';
+import type { Market } from '@vegaprotocol/market-list';
 
 interface Props {
-  market: MarketNames_markets;
+  market: Market;
   isMobile?: boolean;
 }
 
@@ -17,7 +16,9 @@ const MarketNameRenderer = ({ market, isMobile }: Props) => {
         )}
       />
       <div className="col-span-2 uppercase justify-start text-black dark:text-white text-ui-small md:text-market self-end">
-        {isMobile ? market.tradableInstrument.instrument.code : market.name}{' '}
+        {isMobile
+          ? market.tradableInstrument.instrument.code
+          : market.tradableInstrument.instrument.name}{' '}
         <SimpleMarketExpires
           tags={market.tradableInstrument.instrument.metadata.tags}
         />

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

@@ -1,11 +1,35 @@
 import React from 'react';
-import { useLocation, useRoutes, BrowserRouter } from 'react-router-dom';
-import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import {
+  useLocation,
+  useRoutes,
+  BrowserRouter,
+  useParams,
+} from 'react-router-dom';
+import {
+  render,
+  screen,
+  fireEvent,
+  waitFor,
+  act,
+  getAllByText,
+} from '@testing-library/react';
 import { MockedProvider } from '@apollo/react-testing';
+import { MarketState } from '@vegaprotocol/types';
 import SimpleMarketToolbar from './simple-market-toolbar';
 import type { SimpleMarkets_markets } from './__generated__/SimpleMarkets';
 import { markets as filterData } from './mocks/market-filters.json';
 
+const mockedNavigate = jest.fn();
+
+jest.mock('react-router-dom', () => {
+  const actualRouter = jest.requireActual('react-router-dom');
+  return {
+    ...actualRouter,
+    useNavigate: () => mockedNavigate,
+    useParams: jest.fn(() => actualRouter.useParams()),
+  };
+});
+
 describe('SimpleMarketToolbar', () => {
   const WrappedCompForTest = () => {
     const routes = useRoutes([
@@ -60,9 +84,8 @@ describe('SimpleMarketToolbar', () => {
       </>
     );
   };
-
   afterEach(() => {
-    jest.resetAllMocks();
+    jest.clearAllMocks();
   });
 
   it('should be properly rendered', async () => {
@@ -83,7 +106,7 @@ describe('SimpleMarketToolbar', () => {
       expect(screen.getByTestId('market-assets-menu').children).toHaveLength(6);
     });
     fireEvent.click(screen.getByTestId('state-trigger'));
-    waitFor(() => {
+    await waitFor(() => {
       expect(screen.getByRole('menu')).toBeInTheDocument();
       expect(screen.getByRole('menu').children).toHaveLength(10);
     });
@@ -104,7 +127,7 @@ describe('SimpleMarketToolbar', () => {
 
     await waitFor(() => {
       expect(screen.getByTestId('location-display')).toHaveTextContent(
-        '/markets/STATE_ACTIVE/Future'
+        `/markets/${MarketState.STATE_ACTIVE}/Future`
       );
     });
 
@@ -115,17 +138,91 @@ describe('SimpleMarketToolbar', () => {
     );
     await waitFor(() => {
       expect(screen.getByTestId('location-display')).toHaveTextContent(
-        '/markets/STATE_ACTIVE/Future/tEURO'
+        `/markets/${MarketState.STATE_ACTIVE}/Future/tEURO`
       );
     });
 
     fireEvent.click(screen.getByTestId('state-trigger'));
-    waitFor(() => {
+    await waitFor(() => {
       expect(screen.getByRole('menu')).toBeInTheDocument();
-      fireEvent.click(screen.getByText('Pending'));
-      expect(screen.getByTestId('location-display')).toHaveTextContent(
-        '/markets/Pending/Future/tEURO'
+    });
+    const menu = screen.getByRole('menu');
+    const pending = getAllByText(menu, 'Pending')[0];
+    await act(() => {
+      fireEvent.click(pending);
+    });
+    await waitFor(() => {
+      expect(mockedNavigate).toHaveBeenCalledWith(
+        `/markets/${MarketState.STATE_PENDING}/Future/tEURO`
       );
     });
   });
+
+  it('stateChange callback should work well', async () => {
+    (useParams as jest.Mock).mockImplementation(() => ({
+      asset: 'asset1',
+      product: 'product1',
+      state: 'state1',
+    }));
+    render(
+      <MockedProvider mocks={[]} addTypename={false}>
+        <SimpleMarketToolbar data={filterData as SimpleMarkets_markets[]} />
+      </MockedProvider>,
+      { wrapper: BrowserRouter }
+    );
+    fireEvent.click(screen.getByTestId('state-trigger'));
+    await waitFor(() => {
+      expect(screen.getByRole('menu')).toBeInTheDocument();
+    });
+    const menu = screen.getByRole('menu');
+    const suspended = getAllByText(menu, 'Suspended')[0];
+    fireEvent.click(suspended);
+
+    expect(mockedNavigate).toHaveBeenCalledWith(
+      `/markets/${MarketState.STATE_SUSPENDED}/product1/asset1`
+    );
+  });
+
+  it('stateChange callback should call navigate with url with state only', async () => {
+    (useParams as jest.Mock).mockImplementation(() => ({}));
+    render(
+      <MockedProvider mocks={[]} addTypename={false}>
+        <SimpleMarketToolbar data={filterData as SimpleMarkets_markets[]} />
+      </MockedProvider>,
+      { wrapper: BrowserRouter }
+    );
+    fireEvent.click(screen.getByTestId('state-trigger'));
+    await waitFor(() => {
+      expect(screen.getByRole('menu')).toBeInTheDocument();
+    });
+    const menu = screen.getByRole('menu');
+    const closed = getAllByText(menu, 'Closed')[0];
+    fireEvent.click(closed);
+
+    expect(mockedNavigate).toHaveBeenCalledWith(
+      `/markets/${MarketState.STATE_CLOSED}`
+    );
+  });
+
+  it('stateChange callback should call navigate with no asset', async () => {
+    (useParams as jest.Mock).mockImplementation(() => ({
+      asset: 'all',
+      state: 'state1',
+    }));
+    render(
+      <MockedProvider mocks={[]} addTypename={false}>
+        <SimpleMarketToolbar data={filterData as SimpleMarkets_markets[]} />
+      </MockedProvider>,
+      { wrapper: BrowserRouter }
+    );
+    fireEvent.click(screen.getByTestId('state-trigger'));
+    await waitFor(() => {
+      expect(screen.getByRole('menu')).toBeInTheDocument();
+    });
+
+    const menu = screen.getByRole('menu');
+    const active = getAllByText(menu, 'Active')[0];
+    fireEvent.click(active);
+    expect(mockedNavigate).toHaveBeenCalledWith('/markets');
+  });
 });

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

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import classNames from 'classnames';
 import { useNavigate, useParams, Link } from 'react-router-dom';
 import {
@@ -7,7 +7,6 @@ import {
 } from '@radix-ui/react-dropdown-menu';
 import { IconNames } from '@blueprintjs/icons';
 import { t } from '@vegaprotocol/react-helpers';
-import { themelite as theme } from '@vegaprotocol/tailwindcss-config';
 import {
   DropdownMenuCheckboxItem,
   DropdownMenuContent,
@@ -16,11 +15,13 @@ import {
 } from '@vegaprotocol/ui-toolkit';
 import { MarketState } from '@vegaprotocol/types';
 import useMarketFiltersData from '../../hooks/use-markets-filter';
-import { STATES_FILTER } from './constants';
-import type { SimpleMarkets_markets } from './__generated__/SimpleMarkets';
+import type { Markets_marketsConnection_edges_node } from '@vegaprotocol/market-list';
+import { HorizontalMenu } from '../horizontal-menu';
+import type { HorizontalMenuItem } from '../horizontal-menu';
+import * as constants from './constants';
 
 interface Props {
-  data: SimpleMarkets_markets[];
+  data: Markets_marketsConnection_edges_node[];
 }
 
 const SimpleMarketToolbar = ({ data }: Props) => {
@@ -28,37 +29,6 @@ const SimpleMarketToolbar = ({ data }: Props) => {
   const params = useParams();
   const { products, assetsPerProduct } = useMarketFiltersData(data);
   const [isOpen, setOpen] = useState(false);
-  const [activeNumber, setActiveNumber] = useState(
-    products?.length ? products.indexOf(params.product || '') + 1 : -1
-  );
-
-  const [sliderStyles, setSliderStyles] = useState<Record<string, string>>({});
-  const slideContRef = useRef<HTMLUListElement | null>(null);
-
-  useEffect(() => {
-    if (products.length) {
-      setActiveNumber(products.indexOf(params.product || '') + 1);
-    } else {
-      setActiveNumber(-1);
-    }
-  }, [params, products, setActiveNumber]);
-
-  useEffect(() => {
-    const contStyles = (
-      slideContRef.current as HTMLUListElement
-    ).getBoundingClientRect();
-    const selectedStyles = (slideContRef.current as HTMLUListElement).children[
-      activeNumber
-    ]?.getBoundingClientRect();
-    const styles: Record<string, string> = selectedStyles
-      ? {
-          backgroundColor: activeNumber ? '' : theme.colors.pink,
-          width: `${selectedStyles.width}px`,
-          left: `${selectedStyles.left - contStyles.left}px`,
-        }
-      : {};
-    setSliderStyles(styles);
-  }, [activeNumber, slideContRef]);
 
   const onStateChange = useCallback(
     (activeState: string) => {
@@ -74,62 +44,43 @@ const SimpleMarketToolbar = ({ data }: Props) => {
     [params, navigate]
   );
 
+  const productItems = useMemo(() => {
+    const currentState = params.state || MarketState.STATE_ACTIVE;
+    const noStateSkip = currentState !== MarketState.STATE_ACTIVE;
+    const items: HorizontalMenuItem[] = [
+      {
+        ...constants.ALL_PRODUCTS_ITEM,
+        url: `/markets${noStateSkip ? '/' + currentState : ''}`,
+      },
+    ];
+    products.forEach((product) =>
+      items.push({
+        name: product,
+        id: product,
+        url: `/markets/${currentState}/${product}`,
+      })
+    );
+    return items;
+  }, [params, products]);
+
   return (
-    <div className="w-full max-w-full mb-4 font-alpha">
-      <ul
-        ref={slideContRef}
-        className="grid grid-flow-col auto-cols-min gap-4 relative pb-2 mb-2"
+    <div className="w-full max-w-full mb-2 md:mb-8 font-alpha">
+      <HorizontalMenu
+        active={params.product || constants.ALL_PRODUCTS_ITEM.id}
+        items={productItems}
         data-testid="market-products-menu"
         aria-label={t('Product type')}
-      >
-        <li key="all-markets" className="md:mr-2 whitespace-nowrap">
-          <Link
-            to={`/markets${
-              params.state && params.state !== MarketState.STATE_ACTIVE
-                ? '/' + params.state
-                : ''
-            }`}
-            aria-label={t('All markets')}
-            className={classNames('pl-0 text-pink hover:opacity-75', {
-              active: !activeNumber,
-            })}
-          >
-            {t('All Markets')}
-          </Link>
-        </li>
-        {products.map((product, i) => (
-          <li key={product} className="mx-2 whitespace-nowrap">
-            <Link
-              to={`/markets/${
-                params.state || MarketState.STATE_ACTIVE
-              }/${product}`}
-              className={classNames(
-                'hover:opacity-75 text-black dark:text-white',
-                {
-                  active: activeNumber - 1 === i,
-                }
-              )}
-              aria-label={product}
-            >
-              {product}
-            </Link>
-          </li>
-        ))}
-        <li
-          className="absolute bottom-0 h-[2px] transition-left duration-300 dark:bg-white bg-black"
-          key="slider"
-          style={sliderStyles}
-        />
-      </ul>
-      <div className="grid gap-8 pb-4 mt-6 md:grid-cols-[min-content,min-content,1fr]">
-        <div className="pb-8">
-          <DropdownMenu onOpenChange={(open) => setOpen(open)}>
+      />
+      <div className="grid gap-4 pb-2 mt-2 md:mt-6 md:grid-cols-[min-content,min-content,1fr]">
+        <div className="pb-2">
+          <DropdownMenu open={isOpen} onOpenChange={(open) => setOpen(open)}>
             <DropdownMenuTrigger
               className="mr-2 w-auto text-capMenu text-black dark:text-white"
               data-testid="state-trigger"
+              onClick={() => setOpen(!isOpen)}
             >
               <div className="w-full justify-between uppercase inline-flex items-center justify-center box-border">
-                {STATES_FILTER.find(
+                {constants.STATES_FILTER.find(
                   (state) =>
                     state.value === params.state ||
                     (!params.state && state.value === MarketState.STATE_ACTIVE)
@@ -146,9 +97,9 @@ const SimpleMarketToolbar = ({ data }: Props) => {
               </div>
             </DropdownMenuTrigger>
             <DropdownMenuContent>
-              {STATES_FILTER.map(({ value, text }) => (
+              {constants.STATES_FILTER.map(({ value, text }) => (
                 <DropdownMenuCheckboxItem
-                  className="uppercase text-ui dark:text-white"
+                  className="uppercase text-ui"
                   key={value}
                   checked={
                     value === params.state ||
@@ -168,9 +119,9 @@ const SimpleMarketToolbar = ({ data }: Props) => {
         <div className="hidden md:block text-deemphasise dark:text-midGrey">
           |
         </div>
-        {activeNumber > 0 && (
+        {params.product && (
           <ul
-            className="md:gap-6 gap-4 pb-4 md:ml-2 flex flex-wrap"
+            className="md:gap-x-6 gap-x-4 gap-y-1 pb-2 md:ml-2 flex flex-wrap"
             data-testid="market-assets-menu"
             aria-label={t('Asset on the market')}
           >
@@ -188,7 +139,7 @@ const SimpleMarketToolbar = ({ data }: Props) => {
                 {t('All')}
               </Link>
             </li>
-            {assetsPerProduct[products[activeNumber - 1]]?.map((asset) => (
+            {assetsPerProduct[params?.product]?.map((asset) => (
               <li key={asset}>
                 <Link
                   to={`/markets/${params.state}/${params.product}/${asset}`}

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

@@ -1,14 +1,13 @@
-import React, { useMemo } from 'react';
+import { useMemo } from 'react';
 import classNames from 'classnames';
 import { t } from '@vegaprotocol/react-helpers';
-import type { SimpleMarkets_markets } from '../components/simple-market-list/__generated__/SimpleMarkets';
-import MarketNameRenderer from '../components/simple-market-list/simple-market-renderer';
-import SimpleMarketPercentChange from '../components/simple-market-list/simple-market-percent-change';
+import MarketNameRenderer from './simple-market-renderer';
+import SimpleMarketPercentChange from './simple-market-percent-change';
 import { Icon } from '@vegaprotocol/ui-toolkit';
 import type { ValueSetterParams } from 'ag-grid-community';
-import type { SimpleMarketsType } from '../components/simple-market-list/simple-market-list';
 import { IconNames } from '@blueprintjs/icons';
-import { IS_MARKET_TRADABLE, MARKET_STATES_MAP } from '../constants';
+import { IS_MARKET_TRADABLE, MARKET_STATES_MAP } from '../../constants';
+import type { Candle, Market } from '@vegaprotocol/market-list';
 
 interface Props {
   isMobile: boolean;
@@ -22,9 +21,9 @@ const useColumnDefinitions = ({ isMobile }: Props) => {
         headerName: t('Markets'),
         headerClass: 'uppercase',
         minWidth: isMobile ? 160 : 350,
-        field: 'name',
+        field: 'tradableInstrument.instrument.name',
         cellClass: 'overflow-visible',
-        cellRenderer: ({ data }: { data: SimpleMarketsType }) => (
+        cellRenderer: ({ data }: { data: Market }) => (
           <MarketNameRenderer market={data} isMobile={isMobile} />
         ),
       },
@@ -35,7 +34,7 @@ const useColumnDefinitions = ({ isMobile }: Props) => {
         minWidth: isMobile ? 50 : 80,
         cellClass: 'uppercase flex h-full items-center',
         field: 'tradableInstrument.instrument.product.settlementAsset.symbol',
-        cellRenderer: ({ data }: { data: SimpleMarketsType }) => (
+        cellRenderer: ({ data }: { data: Market }) => (
           <div
             className="grid h-full items-center text-center"
             title={
@@ -70,7 +69,7 @@ const useColumnDefinitions = ({ isMobile }: Props) => {
           data,
           setValue,
         }: {
-          data: SimpleMarketsType;
+          data: { id: string; candles: Candle[] };
           setValue: (arg: unknown) => void;
         }) => (
           <SimpleMarketPercentChange
@@ -93,13 +92,13 @@ const useColumnDefinitions = ({ isMobile }: Props) => {
       {
         colId: 'status',
         headerName: t('Status'),
-        field: 'data.market.state',
+        field: 'state',
         headerClass: 'uppercase',
         minWidth: 100,
-        cellRenderer: ({ data }: { data: SimpleMarkets_markets }) => (
+        cellRenderer: ({ data }: { data: Market }) => (
           <div className="uppercase flex h-full items-center justify-center">
-            <div className="border text-center px-2 md:px-8 leading-4 md:leading-6">
-              {MARKET_STATES_MAP[data.data?.market.state || '']}
+            <div className="border text-center px-2 md:px-6 leading-4 md:leading-6">
+              {MARKET_STATES_MAP[data.state || '']}
             </div>
           </div>
         ),
@@ -110,7 +109,7 @@ const useColumnDefinitions = ({ isMobile }: Props) => {
         headerClass: 'uppercase',
         sortable: false,
         width: isMobile ? 35 : 100,
-        cellRenderer: ({ data }: { data: SimpleMarkets_markets }) => (
+        cellRenderer: ({ data }: { data: Market }) => (
           <div className="h-full flex h-full items-center justify-end">
             <div className="uppercase text-center pr-2">
               {!isMobile && t('Trade')}

apps/console-lite/src/app/components/simple-market-list/use-markets-filter-data.ts

@@ -0,0 +1,52 @@
+import { useMemo } from 'react';
+import { MarketState } from '@vegaprotocol/types';
+import type { MarketsListData } from '@vegaprotocol/market-list';
+import type { RouterParams } from './simple-market-list';
+
+const useMarketsFilterData = (data: MarketsListData, params: RouterParams) => {
+  return useMemo(() => {
+    const markets =
+      data?.markets?.filter((item) => {
+        if (
+          params.product &&
+          params.product !==
+            item.tradableInstrument.instrument.product.__typename
+        ) {
+          return false;
+        }
+        if (
+          params.asset &&
+          params.asset !== 'all' &&
+          params.asset !==
+            item.tradableInstrument.instrument.product.settlementAsset.symbol
+        ) {
+          return false;
+        }
+        const state =
+          params.state === 'all'
+            ? ''
+            : params.state
+            ? params.state
+            : MarketState.STATE_ACTIVE;
+        if (state && state !== item.state) {
+          return false;
+        }
+        return true;
+      }) || [];
+
+    return markets.map((market) => ({
+      ...market,
+      candles: (data?.marketsCandles || [])
+        .filter((c) => c.marketId === market.id)
+        .map((c) => c.candles),
+    }));
+  }, [
+    data?.marketsCandles,
+    data?.markets,
+    params.product,
+    params.asset,
+    params.state,
+  ]);
+};
+
+export default useMarketsFilterData;

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

@@ -88,7 +88,7 @@ export const Stepper = ({ steps }: StepperProps) => {
                         'md:mt-0 font-alpha uppercase text-black dark:text-white',
                         {
                           'mt-2 text-md md:text-2xl': isActive,
-                          'mt-4 text-sm md:text-lg md:ml-8': !isActive,
+                          'mt-4 text-sm md:text-lg md:ml-2': !isActive,
                         }
                       )}
                     >

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

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

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import type { ReactNode } from 'react';
+import classNames from 'classnames';
+
+interface TrafficLightProps {
+  value: number;
+  q1: number;
+  q2: number;
+  children: ReactNode;
+}
+
+export const TrafficLight = ({
+  value,
+  q1,
+  q2,
+  children,
+}: TrafficLightProps) => {
+  const slippageClassName = classNames({
+    'text-darkerGreen dark:text-lightGreen': value < q1,
+    'text-amber': value >= q1 && value < q2,
+    'text-vega-red': value >= q2,
+  });
+
+  return <div className={slippageClassName}>{children || value}</div>;
+};

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

@@ -1,6 +1,6 @@
-import type { SimpleMarkets_markets } from '../components/simple-market-list/__generated__/SimpleMarkets';
 import { MarketState } from '@vegaprotocol/types';
 import { t } from '@vegaprotocol/react-helpers';
+import type { Market } from '@vegaprotocol/market-list';
 
 export const DATE_FORMAT = 'dd MMMM yyyy HH:mm';
 export const EXPIRE_DATE_FORMAT = 'MMM dd';
@@ -9,8 +9,8 @@ export const TRADABLE_STATES = {
   [MarketState.STATE_ACTIVE]: true,
 };
 
-export const IS_MARKET_TRADABLE = (market: SimpleMarkets_markets) =>
-  Boolean((market.data?.market.state ?? '') in TRADABLE_STATES && market?.id);
+export const IS_MARKET_TRADABLE = (market: Market) =>
+  Boolean((market.state ?? '') in TRADABLE_STATES && market?.id);
 
 export const MARKET_STATES_MAP: Record<MarketState | '', string> = {
   [MarketState.STATE_ACTIVE]: t('Active'),
@@ -24,3 +24,5 @@ export const MARKET_STATES_MAP: Record<MarketState | '', string> = {
   [MarketState.STATE_TRADING_TERMINATED]: t('TradingTerminated'),
   '': t('Unknown'),
 };
+
+export const NO_DATA_MESSAGE = t('No data to display');

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

@@ -0,0 +1,30 @@
+query EstimateOrder(
+  $marketId: ID!
+  $partyId: ID!
+  $price: String
+  $size: String!
+  $side: Side!
+  $timeInForce: OrderTimeInForce!
+  $expiration: String
+  $type: OrderType!
+) {
+  estimateOrder(
+    marketId: $marketId
+    partyId: $partyId
+    price: $price
+    size: $size
+    side: $side
+    timeInForce: $timeInForce
+    expiration: $expiration
+    type: $type
+  ) {
+    fee {
+      makerFee
+      infrastructureFee
+      liquidityFee
+    }
+    marginLevels {
+      initialLevel
+    }
+  }
+}

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

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