feat(ci): try backward-testing

chore: bump mainet version for trading
feat(ci): fix deploy to mainnet
2023-09-05 11:40:55 +02:00 · 2023-07-31 11:18:38 +01:00 · 2023-07-28 18:22:00 +02:00 · 2023-07-28 16:33:37 +01:00 · 2023-07-28 11:15:21 +00:00 · 2023-07-13 12:00:37 +02:00
274 changed files with 3077 additions and 5270 deletions
@@ -0,0 +1,28 @@
+---
+name: Feature Epic
+about: A template to capture and scope user requirements, high level process, and basic mockups for an upcoming feature as part of the initial core spec review process.
+title: 'FEATURE EPIC: '
+labels: feature-epic
+---
+
+## Core Feature
+
+<Name>
+
+## Tasks
+
+- [ ] Define high level requirements
+- [ ] Create basic mockups
+- [ ] Update "API Requirements" in core spec
+- [ ] Update "User-Interface Spec" in relevant front end repo
+- [ ] Create detailed user stories using normal template
+
+## High Level Requirements
+
+## Basic Mockups
+
+## Link to API Requirements in Core spec
+
+## Link to User Interface Specs
+
+## Linked User Stories
@@ -1,6 +1,6 @@
 # Related issues 🔗

-Closes #[Issue number here]
+Issue: #[Issue number here]

 # Description ℹ️

@@ -7,7 +7,7 @@ on:
 jobs:
  after-release:
    runs-on: ubuntu-22.04
-    timeout-minutes: 30
+    timeout-minutes: 45
    steps:
      - name: Checkout
        uses: actions/checkout@v3
@@ -30,18 +30,20 @@ jobs:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}

+      - name: Wait for publish to complete
+        uses: lewagon/wait-on-check-action@v1.3.1
+        with:
+          ref: ${{ github.event.release.tag_name }}
+          check-name: '(CD) publish dist / trading'
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          wait-interval: 10
+
      - name: resolve ipfs hashes for release
        run: |
          echo "Name: ${{ github.event.release.name }}"
          echo "Description: ${{ github.event.release.body }}"
          echo "Tag: ${{ github.event.release.tag_name }}"
-          commit="$(git rev-list -n 1 ${{ github.event.release.tag_name }})"
-          echo "Commit: $commit"
-          until docker pull vegaprotocol/trading:$commit; do
-            echo "Image not pushed yet, waiting 60 seconds"
-            sleep 60
-          done
-          docker run --rm vegaprotocol/trading:$commit cat /ipfs-hash > ipfs-hash
+          docker run --rm vegaprotocol/trading:mainnet cat /ipfs-hash > ipfs-hash
          curl -L https://dist.ipfs.tech/kubo/v0.20.0/kubo_v0.20.0_linux-amd64.tar.gz -o kubo.tgz
          tar -xzf kubo.tgz
          export PATH="$PATH:$PWD/kubo"
@@ -81,6 +81,22 @@ jobs:
        with:
          main-branch-name: develop

+      # See affected apps
+      - name: See affected apps
+        run: |
+          branch_slug="$(echo '${{ github.head_ref || github.ref_name }}' | sed -r s/[^a-zA-Z0-9]+/-/g | sed -r s/^-+\|-+$//g | cut -c 1-50 )"
+          python3 tools/ci/check-affected.py --github-ref="${{ github.ref }}" --branch-slug="$branch_slug" --event-name="${{ github.event_name }}"
+
+      - name: Verify script result
+        run: |
+          echo "Check outputs from script"
+          echo "projects: ${{ env.PROJECTS }}"
+          echo "projects-e2e: ${{ env.PROJECTS_E2E }}"
+          echo "preview_governance: ${{ env.PREVIEW_GOVERNANCE }}"
+          echo "preview_trading: ${{ env.PREVIEW_TRADING }}"
+          echo "preview_explorer: ${{ env.PREVIEW_EXPLORER }}"
+          echo "preview_tools: ${{ env.PREVIEW_TOOLS }}"
+
      - name: Check formatting
        run: yarn nx format:check

@@ -96,126 +112,6 @@ jobs:
      - name: Build affected
        run: yarn nx affected:build || (yarn install && yarn nx affected:build)

-      # See affected apps
-      - name: See affected apps
-        run: |
-          affected="$(yarn nx print-affected --base=${{ env.NX_BASE }} --head=${{ env.NX_HEAD }} --select=projects)"
-          branch_slug="$(echo '${{ github.head_ref || github.ref_name }}' | sed -r s/[^a-zA-Z0-9]+/-/g | sed -r s/^-+\|-+$//g | cut -c 1-50 )"
-
-          echo ">>>> debug"
-          echo "NX_BASE: ${{ env.NX_BASE }}"
-          echo "NX_HEAD: ${{ env.NX_HEAD }}"
-          echo "Affected: ${affected}"
-          echo "Branch slug: ${branch_slug}"
-          echo "Current ref: ${{ github.ref }}"
-          echo ">>>> eof debug"
-
-          projects_array=()
-
-          preview_governance="not deployed"
-          preview_trading="not deployed"
-          preview_explorer="not deployed"
-          preview_tools="not deployed"
-
-          # parse if affected is any of three main applications, if none - use all of them
-          if echo "$affected" | grep -q governance; then
-            echo "Governance is affected"
-            projects_array+=("governance")
-            preview_governance=$(printf "https://%s.%s.vega.rocks" "governance" "$branch_slug")
-          fi
-          if echo "$affected" | grep -q trading; then
-            echo "Trading is affected"
-            projects_array+=("trading")
-            preview_trading=$(printf "https://%s.%s.vega.rocks" "trading" "$branch_slug")
-          fi
-          if echo "$affected" | grep -q explorer; then
-            echo "Explorer is affected"
-            projects_array+=("explorer")
-            preview_explorer=$(printf "https://%s.%s.vega.rocks" "explorer" "$branch_slug")
-          fi
-          if [[ ${#projects_array[@]} -eq 0 ]]; then
-            projects_array=("governance" "trading" "explorer")
-            preview_governance=$(printf "https://%s.%s.vega.rocks" "governance" "$branch_slug")
-            preview_trading=$(printf "https://%s.%s.vega.rocks" "trading" "$branch_slug")
-            preview_explorer=$(printf "https://%s.%s.vega.rocks" "explorer" "$branch_slug")
-          fi
-
-          # applications parsed before this loop are applicable for running e2e-tests
-          projects_e2e_array=()
-          for project in "${projects_array[@]}"; do
-            projects_e2e_array+=("${project}-e2e")
-          done
-          # all applications below this loop are not applicable for running e2e-test
-
-          # check if pull request event to deploy tools
-          if [[ "${{ github.event_name }}" = "pull_request" ]]; then
-            if echo "$affected" | grep -q multisig-signer; then
-              echo "Tools are affected"
-              echo "Deploying tools on preview"
-              preview_tools=$(printf "https://%s.%s.vega.rocks" "tools" "$branch_slug")
-
-              projects_array+=("multisig-signer")
-            fi
-          # those apps deploy only from develop to mainnet
-          elif [[ "${{ github.ref }}" =~ .*develop$ ]]; then
-            if echo "$affected" | grep -q multisig-signer; then
-              echo "Tools are affected"
-              echo "Deploying tools on s3"
-
-              projects_array+=("multisig-signer")
-            fi
-            if echo "$affected" | grep -q static; then
-              echo "static is affected"
-              echo "Deploying static on s3"
-
-              projects_array+=("static")
-            fi
-            if echo "$affected" | grep -q ui-toolkit; then
-              echo "ui-toolkit is affected"
-              echo "Deploying ui-toolkit on s3"
-
-              projects_array+=("ui-toolkit")
-            fi
-          fi
-
-          # if branch starts with release/ and ends with trading / governance or explorer - overwrite the array of affected projects with fixed single application
-          if [[ "${{ github.ref }}" == *release* ]]; then
-            echo ">> This is a relase branch"
-            case "${{ github.ref }}" in
-              *trading)
-                echo ">> Only trading will be deployed"
-                projects_array=(trading)
-                projects_e2e_array=(trading)
-              ;;
-              *governance)
-                echo ">> Only governance will be deployed"
-                projects_array=(governance)
-                projects_e2e_array=(governance)
-              ;;
-              *explorer)
-                echo ">> Only explorer will be deployed"
-                projects_array=(explorer)
-                projects_e2e_array=(explorer)
-              ;;
-              *)
-                echo ">> All apps will be deployed"
-              ;;
-            esac
-          fi
-
-          echo "Projects: ${projects_array[@]}"
-          echo "Projects E2E: ${projects_e2e_array[@]}"
-          projects_json=$(jq -M --compact-output --null-input '$ARGS.positional' --args -- "${projects_array[@]}")
-          projects_e2e_json=$(jq -M --compact-output --null-input '$ARGS.positional' --args -- "${projects_e2e_array[@]}")
-
-          echo PROJECTS_E2E=$projects_e2e_json >> $GITHUB_ENV
-          echo PROJECTS=$projects_json >> $GITHUB_ENV
-
-          echo PREVIEW_GOVERNANCE=$preview_governance >> $GITHUB_ENV
-          echo PREVIEW_TRADING=$preview_trading >> $GITHUB_ENV
-          echo PREVIEW_EXPLORER=$preview_explorer >> $GITHUB_ENV
-          echo PREVIEW_TOOLS=$preview_tools >> $GITHUB_ENV
-
    outputs:
      projects: ${{ env.PROJECTS }}
      projects-e2e: ${{ env.PROJECTS_E2E }}
@@ -224,6 +120,15 @@ jobs:
      preview_explorer: ${{ env.PREVIEW_EXPLORER }}
      preview_tools: ${{ env.PREVIEW_TOOLS }}

+  console-e2e:
+    needs: lint-test-build
+    name: '(CI) console python'
+    uses: ./.github/workflows/console-test-run.yml
+    secrets: inherit
+    if: ${{ contains(fromJSON(needs.lint-test-build.outputs.projects), 'trading') && github.event_name == 'pull_request' }}
+    with:
+      github-sha: ${{ github.event.pull_request.head.sha || github.sha }}
+
  cypress:
    needs: lint-test-build
    name: '(CI) cypress'
@@ -232,7 +137,7 @@ jobs:
    secrets: inherit
    with:
      projects: ${{ needs.lint-test-build.outputs.projects-e2e }}
-      tags: '@smoke @regression'
+      tags: '@smoke'

  publish-dist:
    needs: lint-test-build
@@ -1,55 +1,138 @@
-name: console-test-run
+name: (CI) Console tests
+
 on:
  workflow_call:
    inputs:
      github-sha:
        required: true
        type: string
+
 jobs:
-  console-test:
-    timeout-minutes: 5
-    runs-on: self-hosted-runner
+  run-tests:
+    name: run-tests
+    runs-on: 8-cores
+    timeout-minutes: 20
    steps:
+      #----------------------------------------------
+      #       check-out frontend-monorepo
+      #----------------------------------------------
+      - name: Checkout console test repo
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ inputs.github-sha }}
+      #----------------------------------------------
+      #       cache node modules
+      #----------------------------------------------
+      - name: Cache node modules
+        id: cache
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-cache-node-modules-${{ hashFiles('yarn.lock') }}
+          # comment out "restore-keys" if you need to rebuild yarn from 0
+          restore-keys: |
+            ${{ runner.os }}-cache-node-modules-
+      #----------------------------------------------
+      #       setup node
+      #----------------------------------------------
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          # https://stackoverflow.com/questions/61010294/how-to-cache-yarn-packages-in-github-actions
+          cache: yarn
+      #----------------------------------------------
+      #       install deps if cache missing
+      #----------------------------------------------
+      - name: yarn install
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: yarn install --pure-lockfile
+      #----------------------------------------------
+      #       build trading
+      #----------------------------------------------
+      - name: Build affected spec
+        run: |
+          yarn env-cmd -f ./apps/trading/.env.stagnet1 yarn nx export trading
+      #----------------------------------------------
+      #       run trading server
+      #----------------------------------------------
+      - name: Run trading server
+        run: |
+          docker run -d -p 80:4200 -v $PWD/docker/nginx.conf:/etc/nginx/conf.d/default.conf -v $PWD/dist/apps/trading/exported:/usr/share/nginx/html nginx:1.23-alpine@sha256:6318314189b40e73145a48060bff4783a116c34cc7241532d0d94198fb2c9629
+          sleep 5
+          docker ps
+      #----------------------------------------------
+      #       check if container persists between runs
+      #----------------------------------------------
+      - name: Check server
+        run: |
+          docker ps
+      #----------------------------------------------
+      #       check-out tests repo
+      #----------------------------------------------
      - name: Checkout console test repo
        uses: actions/checkout@v3
        with:
          repository: vegaprotocol/console-test
          path: './console-test'
-
-      - name: Set up Python
+      #----------------------------------------------
+      #       set-up python
+      #----------------------------------------------
+      - name: Set up python
+        id: setup-python
        uses: actions/setup-python@v4
        with:
          python-version: '3.10.11'
-
+      #----------------------------------------------
+      #  -----  install & configure poetry  -----
+      #----------------------------------------------
      - name: Install Poetry
        uses: snok/install-poetry@v1
-
+        with:
+          virtualenvs-create: true
+          virtualenvs-in-project: true
+          virtualenvs-path: console-test/.venv
+      #----------------------------------------------
+      #       load cached venv if cache exists
+      #----------------------------------------------
+      - name: Load cached venv
+        id: cached-poetry-dependencies
+        uses: actions/cache@v3
+        with:
+          path: console-test/.venv
+          key: venv-${{ runner.os }}-${{ steps.setup-python.outputs.python-version }}-${{ hashFiles('**/poetry.lock') }}
+      #----------------------------------------------
+      # install dependencies if cache does not exist
+      #----------------------------------------------
      - name: Install dependencies
-        run: |
-          poetry install --no-root
        working-directory: ./console-test
-
-      - name: load Binaries
-        run: |
-          poetry run python -m vega_sim.tools.load_binaries
+        if: steps.cached-poetry-dependencies.outputs.cache-hit != 'true'
+        run: poetry install --no-interaction --no-root
+      #----------------------------------------------
+      # install vega binaries
+      #----------------------------------------------
+      - name: Install vega binaries
        working-directory: ./console-test
-
-      - name: pull console
-        run: |
-          poetry run docker pull ghcr.io/vegaprotocol/frontend/trading:${{ inputs.github-sha }}
-
-      - name: Update container_name in config.py
-        run: |
-          sed -i "s/container_name = \".*\"/container_name = \"vegaprotocol\/frontend\/trading:${{ inputs.github-sha }}\"/g" config.py
-
+        run: poetry run python -m vega_sim.tools.load_binaries --force
+      #----------------------------------------------
+      # install playwright
+      #----------------------------------------------
      - name: install playwright
        run: poetry run playwright install
        working-directory: ./console-test
-
-      - name: run tests
-        run: poetry run pytest --numprocesses auto
+      #----------------------------------------------
+      # run tests
+      #----------------------------------------------
+      - name: Run tests
        working-directory: ./console-test
-
+        run: poetry run pytest -v -s --numprocesses auto --dist loadfile --durations=20
+      - name: Check files
+        run: |
+          ls -al .
+          ls -al console-test
+      #----------------------------------------------
+      # upload traces
+      #----------------------------------------------
      - name: Upload Playwright Trace
        uses: actions/upload-artifact@v3
        if: always()
@@ -20,7 +20,7 @@ jobs:
        project: ${{ fromJSON(inputs.projects) }}
    name: ${{ matrix.project }}
    runs-on: self-hosted-runner
-    timeout-minutes: 100
+    timeout-minutes: 120
    steps:
      # Checks if skip cache was requested
      - name: Set skip-nx-cache flag
@@ -29,6 +29,12 @@ jobs:
          echo IS_TESTNET_RELEASE=false >> $GITHUB_ENV
          echo IS_IPFS_RELEASE=false >> $GITHUB_ENV
          echo IS_S3_RELEASE=false >> $GITHUB_ENV
+          echo IS_DEV_IMAGE=false >> $GITHUB_ENV
+
+      - name: Is dev image
+        if: ${{ contains(github.ref, 'develop') && github.event_name == 'push' && matrix.app == 'trading' }}
+        run: |
+          echo IS_DEV_IMAGE=true >> $GITHUB_ENV

      - name: Is PR
        if: ${{ github.event_name == 'pull_request' }}
@@ -36,7 +42,7 @@ jobs:
          echo IS_PR=true >> $GITHUB_ENV

      - name: Is mainnet release
-        if: ${{ contains(github.ref, 'release/mainnnet') && !contains(github.ref, 'mirror') }}
+        if: ${{ contains(github.ref, 'release/mainnet') && !contains(github.ref, 'mirror') }}
        run: |
          echo IS_MAINNET_RELEASE=true >> $GITHUB_ENV

@@ -75,7 +81,7 @@ jobs:

      - name: Log in to the Container registry (docker hub)
        uses: docker/login-action@v2
-        if: ${{ env.IS_IPFS_RELEASE == 'true' }}
+        if: ${{ env.IS_IPFS_RELEASE == 'true' || env.IS_DEV_IMAGE == 'true' }}
        with:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}
@@ -97,52 +103,13 @@ jobs:
      - name: Define dist variables
        if: ${{ github.event_name == 'push' }}
        run: |
-          envName=''
-          domain="vega.rocks"
-          bucketName=''
+          python3 tools/ci/define-dist-variables.py --github-ref="${{ github.ref }}" --app="${{ matrix.app }}"

-          if [[ "${{ github.ref }}" =~ .*release/.* ]]; then
-            # remove prefixing release/ and take the first string limited by - which is supposed to be name of the environment for releasing (format: release/testnet-trading)
-            envName="$(echo ${{ github.ref }} | sed -e "s|refs/heads/release/||" | cut -d '-' -f 1 )"
-          elif [[ "${{ github.ref }}" =~ .*develop$ ]]; then
-            envName="stagnet1"
-            if [[ "${{ matrix.app }}" = "multisig-signer" ]]; then
-              envName="mainnet"
-              bucketName="tools.vega.xyz"
-            fi
-            if [[ "${{ matrix.app }}" = "static" ]]; then
-              envName="mainnet"
-              bucketName="static.vega.xyz"
-            fi
-            if [[ "${{ matrix.app }}" = "ui-toolkit" ]]; then
-              envName="mainnet"
-              bucketName="ui.vega.rocks"
-            fi
-          elif [[ "${{ github.ref }}" =~ .*mainnet$ ]]; then
-            envName="mainnet"
-          fi
-
-          if [[ "${envName}" = "mainnet" ]]; then
-            domain="vega.xyz"
-            if [[ -z "${bucketName}" ]]; then
-              bucketName="${{ matrix.app }}.${domain}"
-            fi
-          elif [[ "${envName}" = "testnet" ]]; then
-            domain="fairground.wtf"
-            if [[ -z "${bucketName}" ]]; then
-              bucketName="${{ matrix.app }}.${domain}"
-            fi
-          fi
-
-          if [[ -z "${bucketName}" ]]; then
-            bucketName="${{ matrix.app }}.${envName}.${domain}"
-          fi
-
-          echo "bucket name: ${bucketName}"
-          echo "env name: ${envName}"
-
-          echo BUCKET_NAME=${bucketName} >> $GITHUB_ENV
-          echo ENV_NAME=${envName} >> $GITHUB_ENV
+      - name: Verify script result
+        if: ${{ github.event_name == 'push' }}
+        run: |
+          echo "BUCKET_NAME=${{ env.BUCKET_NAME }}"
+          echo "ENV_NAME=${{ env.ENV_NAME }}"

      - name: Build local dist
        run: |
@@ -157,8 +124,12 @@ jobs:
          elif [ "${{ matrix.app }}" = "ui-toolkit" ]; then
            NODE_ENV=production yarn nx run ui-toolkit:build-storybook
            DIST_LOCATION=dist/storybook/ui-toolkit
+          elif [ "${{ matrix.app }}" = "static" ]; then
+            yarn nx build static || (yarn install && yarn nx build static)
          else
            $envCmd yarn nx build ${{ matrix.app }} || (yarn install && $envCmd yarn nx build ${{ matrix.app }})
+          fi
+          if [[ -z "$DIST_LOCATION" ]]; then
            DIST_LOCATION=dist/apps/${{ matrix.app }}
          fi
          mv $DIST_LOCATION dist-result
@@ -208,7 +179,7 @@ jobs:
        uses: docker/build-push-action@v3
        continue-on-error: true
        id: dockerhub-push
-        if: ${{ env.IS_IPFS_RELEASE == 'true' }}
+        if: ${{ env.IS_IPFS_RELEASE == 'true' || env.IS_DEV_IMAGE == 'true'  }}
        with:
          context: .
          file: docker/node-outside-docker.Dockerfile
@@ -218,7 +189,7 @@ jobs:
            ENV_NAME=${{ env.ENV_NAME }}
          tags: |
            vegaprotocol/${{ matrix.app }}:${{ github.sha }}
-            vegaprotocol/${{ matrix.app }}:${{ env.IS_MAINNET_RELEASE == 'true' && 'mainnet' || env.IS_TESTNET_RELEASE == 'true' && 'testnet' || '' }}
+            vegaprotocol/${{ matrix.app }}:${{ env.IS_MAINNET_RELEASE == 'true' && 'mainnet' || env.IS_TESTNET_RELEASE == 'true' && 'testnet' || env.IS_DEV_IMAGE == 'true' && 'develop' || '' }}

      - name: Publish dist as docker image (ghcr - retry)
        uses: docker/build-push-action@v3
@@ -15,6 +15,7 @@ on:
          - types
          - utils
          - i18n
+          - wallet

 jobs:
  publish:
@@ -40,7 +40,7 @@ context.skip('Transactions page', function () {
            .first()
            .click({ force: true });
        } else {
-          cy.log('Unable to find any transactions on page');
+          cy.slack('Unable to find any transactions on page');
          cy.screenshot();
        }
      });
@@ -78,7 +78,7 @@ context.skip('Transactions page', function () {
              }
            });
        } else {
-          cy.log('Unable to find any transactions on page');
+          cy.slack('Unable to find any transactions on page');
          cy.screenshot();
        }
      });
@@ -4,7 +4,7 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://be.mainnet-mirror.vega.rocks/websocket
 NX_SENTRY_DSN=https://4b8c8a8ba07742648aa4dfe1b8d17e40@o286262.ingest.sentry.io/5882996
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/mainnet-mirror/vegawallet-mainnet-mirror.toml
 NX_VEGA_URL=https://api.mainnet-mirror.vega.rocks/graphql
-NX_VEGA_ENV=MAINNET_MIRROR
+NX_VEGA_ENV=MAINNET-MIRROR
 NX_BLOCK_EXPLORER=https://be.mainnet-mirror.vega.rocks/rest
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_VEGA_GOVERNANCE_URL=https://governance.mainnet-mirror.vega.rocks
@@ -137,7 +137,7 @@ export const ProposalsTable = ({ data }: ProposalsTableProps) => {
        hide: window.innerWidth <= BREAKPOINT_MD,
        headerName: t('Enactment date'),
        field: 'terms.enactmentDatetime',
-        valueFormatter: ({
+        valueFormatte: ({
          value,
        }: VegaValueFormatterParams<
          ProposalListFieldsFragment,
@@ -1,5 +1,7 @@
 import { Link, useParams } from 'react-router-dom';
+import { DATA_SOURCES } from '../../../config';
 import { getDateTimeFormat } from '@vegaprotocol/utils';
+import type { TendermintBlocksResponse } from '../tendermint-blocks-response';
 import { RouteTitle } from '../../../components/route-title';
 import { TimeAgo } from '../../../components/time-ago';
 import {
@@ -12,7 +14,7 @@ import { TxsPerBlock } from '../../../components/txs/txs-per-block';
 import { AsyncRenderer, Button } from '@vegaprotocol/ui-toolkit';
 import { Routes } from '../../route-names';
 import { t } from '@vegaprotocol/i18n';
-import { useBlockInfo } from '@vegaprotocol/tendermint';
+import { useFetch } from '@vegaprotocol/react-helpers';
 import { NodeLink } from '../../../components/links';
 import { useDocumentTitle } from '../../../hooks/use-document-title';
 import EmptyList from '../../../components/empty-list/empty-list';
@@ -22,7 +24,10 @@ const Block = () => {
  useDocumentTitle(['Blocks', `Block #${block}`]);
  const {
    state: { data: blockData, loading, error },
-  } = useBlockInfo(Number(block));
+  } = useFetch<TendermintBlocksResponse>(
+    `${DATA_SOURCES.tendermintUrl}/block?height=${block}`,
+    { cache: 'force-cache' }
+  );

  return (
    <section>
@@ -54,7 +54,7 @@ export const PartyBlockStake = ({
      {p?.stakingSummary.currentStakeAvailable ? (
        <KeyValueTable>
          <KeyValueTableRow noBorder={true}>
-            <div>{t('Associated to key')}</div>
+            <div>{t('Available stake')}</div>
            <div>
              <GovernanceAssetBalance
                price={p.stakingSummary.currentStakeAvailable}
@@ -62,7 +62,7 @@ export const PartyBlockStake = ({
            </div>
          </KeyValueTableRow>
          <KeyValueTableRow noBorder={true}>
-            <div>{t('Staked to validator')}</div>
+            <div>{t('Active stake')}</div>
            <div>
              <GovernanceAssetBalance price={linkedStake || '0'} />
            </div>
@@ -67,7 +67,7 @@ const Party = () => {
            text: t('Go back'),
            action: () => navigate(-1),
            className: 'py-1',
-            size: 'small',
+            size: 'sm',
          }}
        />
      </div>
@@ -320,8 +320,8 @@ context(
      // 3001-VOTE-076
      cy.getByTestId(connectToVegaWalletButton)
        .should('be.visible')
-        .and('have.text', 'Connect Vega wallet');
-      cy.getByTestId(connectToVegaWalletButton).click();
+        .and('have.text', 'Connect Vega wallet')
+        .click();
      cy.getByTestId('connector-jsonRpc').click();
      cy.getByTestId(vegaWalletNameElement).should('be.visible');
      cy.getByTestId(connectToVegaWalletButton).should('not.exist');
@@ -161,7 +161,7 @@ context('Home Page - verify elements on page', { tags: '@smoke' }, function () {
      cy.getByTestId('menu-drawer').should('be.visible');
    });

-    it('should have link for proposal page', function () {
+    it.skip('should have link for proposal page', function () {
      cy.getByTestId('menu-drawer').within(() => {
        cy.get('[href="/proposals"]')
          .should('exist')
@@ -1,12 +1,13 @@
 /// <reference types="cypress" />

 import {
+  navigateTo,
+  navigation,
  turnTelemetryOff,
  waitForSpinner,
 } from '../../support/common.functions';
 import {
-  createTenDigitUnixTimeStampForSpecifiedDays,
-  enterRawProposalBody,
+  enterUniqueFreeFormProposalBody,
  goToMakeNewProposal,
  governanceProposalType,
 } from '../../support/governance.functions';
@@ -46,11 +47,12 @@ context('View functionality with public key', { tags: '@smoke' }, function () {
      .and('contain.text', 'USDC (fake)');
  });

-  it('Unable to submit proposal with public key', function () {
+  it.skip('Unable to submit proposal with public key', function () {
    const expectedErrorTxt = `You are connected in a view only state for public key: ${vegaWalletPubKey}. In order to send transactions you must connect to a real wallet.`;

-    goToMakeNewProposal(governanceProposalType.RAW);
-    enterRawProposalBody(createTenDigitUnixTimeStampForSpecifiedDays(8));
+    navigateTo(navigation.proposals);
+    goToMakeNewProposal(governanceProposalType.FREEFORM);
+    enterUniqueFreeFormProposalBody('50', 'pub key proposal test');
    cy.getByTestId('dialog-content')
      .first()
      .within(() => {
@@ -78,7 +78,7 @@ context(
          cy.getByTestId('connector-jsonRpc')
            .should('be.visible')
            .and('have.text', 'Connect Vega wallet');
-          cy.getByTestId('connector-rest')
+          cy.getByTestId('connector-hosted')
            .should('be.visible')
            .and('have.text', 'Hosted Fairground wallet');
        });
@@ -94,7 +94,7 @@ context(
    describe('when rest connector form opened', function () {
      before('click hosted wallet app button', function () {
        cy.getByTestId(connectorsList).within(() => {
-          cy.getByTestId('connector-rest').click();
+          cy.getByTestId('connector-hosted').click();
        });
      });

@@ -18,10 +18,6 @@ NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/annou
 NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72
 NX_VEGA_REST_URL=https://api.n00.stagnet1.vega.xyz/api/v2/

-NX_TENDERMINT_URL=https://tm.n01.stagnet1.vega.rocks
-NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n01.stagnet1.vega.xyz/websocket
-
 #Test configuration variables
 CYPRESS_FAIRGROUND=false
 LC_ALL="en_US.UTF-8"
-
@@ -19,9 +19,6 @@ NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-stagnet1-k8s.ops.vega.xyz
 NX_VEGA_REST_URL=http://localhost:3008/api/v2/

-NX_TENDERMINT_URL=http://localhost:26617
-NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26617/websocket
-
 #Test configuration variables
 CYPRESS_FAIRGROUND=false

@@ -13,6 +13,3 @@ NX_TRANCHES_SERVICE_URL=https://tranches-devnet1-k8s.ops.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_REST_URL=https://api.n00.devnet1.vega.xyz/api/v2/
 NX_SENTRY_DSN=https://4b8c8a8ba07742648aa4dfe1b8d17e40@o286262.ingest.sentry.io/5882996
-
-NX_TENDERMINT_URL=https://tm.be.devnet1.vega.xyz/
-NX_TENDERMINT_WEBSOCKET_URL=wss://be.devnet1.vega.xyz/websocket
@@ -14,6 +14,3 @@ NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-mainnet-k8s.ops.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json
 NX_VEGA_REST_URL=https://api.vega.community/api/v2/
-
-NX_TENDERMINT_URL=https://be.vega.community
-NX_TENDERMINT_WEBSOCKET_URL=wss://be.vega.community/websocket
@@ -1,8 +1,8 @@
 # App configuration variables
-NX_VEGA_ENV=MAINNET_MIRROR
+NX_VEGA_ENV=MAINNET-MIRROR
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/mainnet-mirror/vegawallet-mainnet-mirror.toml
 NX_VEGA_URL=https://api.mainnet-mirror.vega.rocks/graphql
-NX_VEGA_NETWORKS='{"DEVNET":"https://dev.governance.vega.xyz","TESTNET":"https://governance.fairground.wtf","MAINNET":"https://governance.vega.xyz","MAINNET_MIRROR":"https://governance.mainnet-mirror.vega.rocks","STAGNET1":"https://trading.stagnet1.vega.rocks"}'
+NX_VEGA_NETWORKS='{"DEVNET":"https://dev.governance.vega.xyz","TESTNET":"https://governance.fairground.wtf","MAINNET":"https://governance.vega.xyz","MAINNET-MIRROR":"https://governance.mainnet-mirror.vega.rocks","STAGNET1":"https://trading.stagnet1.vega.rocks"}'
 NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
@@ -13,6 +13,3 @@ NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-mainnet-mirror-k8s.ops.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json
 NX_VEGA_REST_URL=https://api.mainnet-mirror.vega.rocks/api/v2/
-
-NX_TENDERMINT_URL=https://be.mainnet-mirror.vega.rocks
-NX_TENDERMINT_WEBSOCKET_URL=wss://be.mainnet-mirror.vega.rocks/websocket
@@ -9,6 +9,3 @@ NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-stagnet1-k8s.ops.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_REST_URL=https://api.n00.stagnet1.vega.xyz/api/v2/
-
-NX_TENDERMINT_URL=https://tm.n01.stagnet1.vega.rocks
-NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n01.stagnet1.vega.xyz/websocket
@@ -14,6 +14,3 @@ NX_TRANCHES_SERVICE_URL=https://tranches-testnet-k8s.ops.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_REST_URL=https://api.n07.testnet.vega.xyz/api/v2/
 NX_SENTRY_DSN=https://4b8c8a8ba07742648aa4dfe1b8d17e40@o286262.ingest.sentry.io/5882996
-
-NX_TENDERMINT_URL=https://tm.be.testnet.vega.xyz
-NX_TENDERMINT_WEBSOCKET_URL=wss://be.testnet.vega.xyz/websocket
@@ -11,6 +11,3 @@ NX_VEGA_EXPLORER_URL=https://explorer.validators-testnet.vega.rocks/
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_REST_URL=https://api-validators-testnet.vega.rocks/api/v2/
 NX_SENTRY_DSN=https://4b8c8a8ba07742648aa4dfe1b8d17e40@o286262.ingest.sentry.io/5882996
-
-NX_TENDERMINT_URL=https://tm.be.validators-testnet.vega.rocks
-NX_TENDERMINT_WEBSOCKET_URL=wss://be.validators-testnet.vega.
@@ -2,8 +2,13 @@ import { Button } from '@vegaprotocol/ui-toolkit';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useVegaWalletDialogStore } from '@vegaprotocol/wallet';
+import {
+  AppStateActionType,
+  useAppState,
+} from '../../contexts/app-state/app-state-context';

 export const ConnectToVega = () => {
+  const { appDispatch } = useAppState();
  const { t } = useTranslation();
  const { openVegaWalletDialog } = useVegaWalletDialogStore((store) => ({
    openVegaWalletDialog: store.openVegaWalletDialog,
@@ -11,6 +16,10 @@ export const ConnectToVega = () => {
  return (
    <Button
      onClick={() => {
+        appDispatch({
+          type: AppStateActionType.SET_VEGA_WALLET_OVERLAY,
+          isOpen: true,
+        });
        openVegaWalletDialog();
      }}
      data-testid="connect-to-vega-wallet-btn"
@@ -18,10 +18,6 @@ import { VegaWallet } from '../vega-wallet';
 import { useLocation, useMatch } from 'react-router-dom';
 import { useEffect } from 'react';
 import { useTelemetryDialog } from '../telemetry-dialog/telemetry-dialog';
-import {
-  ProtocolUpgradeCountdown,
-  ProtocolUpgradeCountdownMode,
-} from '@vegaprotocol/proposals';

 export const SettingsLink = () => {
  const { open, isOpen, close } = useTelemetryDialog();
@@ -65,14 +61,7 @@ export const Nav = ({ theme }: Pick<NavigationProps, 'theme'>) => {
      appName="Governance"
      theme={theme}
      breakpoints={[458, 959]}
-      actions={
-        <>
-          <SettingsLink />
-          <ProtocolUpgradeCountdown
-            mode={ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING}
-          />
-        </>
-      }
+      actions={<SettingsLink />}
    >
      <NavigationList
        className="[.drawer-content_&]:border-b [.drawer-content_&]:border-b-vega-light-200 dark:[.drawer-content_&]:border-b-vega-dark-200 [.drawer-content_&]:pb-8 [.drawer-content_&]:mb-2"
@@ -4,11 +4,7 @@ import type { ReactNode } from 'react';
 import { AnnouncementBanner } from '@vegaprotocol/announcements';
 import { Nav } from '../nav';
 import { Networks, useEnvironment } from '@vegaprotocol/environment';
-import {
-  ProtocolUpgradeCountdownMode,
-  ProtocolUpgradeProposalNotification,
-} from '@vegaprotocol/proposals';
-import { ViewingAsBanner } from '@vegaprotocol/ui-toolkit';
+import React from 'react';

 interface AppLayoutProps {
  children: ReactNode;
@@ -35,23 +31,8 @@ export const AppLayout = ({ children }: AppLayoutProps) => {
          />
        )}
        <Nav theme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'dark'} />
-        <NotificationsContainer />
      </div>
      <div className={AppLayoutClasses}>{children}</div>
    </div>
  );
 };
-
-const NotificationsContainer = () => {
-  const { isReadOnly, pubKey, disconnect } = useVegaWallet();
-  return (
-    <div data-testid="banners">
-      <ProtocolUpgradeProposalNotification
-        mode={ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING}
-      />
-      {isReadOnly ? (
-        <ViewingAsBanner pubKey={pubKey} disconnect={disconnect} />
-      ) : null}
-    </div>
-  );
-};
@@ -1,3 +1,5 @@
+import { ViewingAsBanner } from '@vegaprotocol/ui-toolkit';
+import { useVegaWallet } from '@vegaprotocol/wallet';
 import React from 'react';

 export interface TemplateSidebarProps {
@@ -6,18 +8,24 @@ export interface TemplateSidebarProps {
 }

 export function TemplateSidebar({ children, sidebar }: TemplateSidebarProps) {
+  const { isReadOnly, pubKey, disconnect } = useVegaWallet();
  return (
-    <div className="w-full border-b border-neutral-700 lg:grid lg:grid-rows-[1fr] lg:grid-cols-[1fr_450px]">
-      <main className="max-w-[100vw] col-start-1 p-4 overflow-auto">
-        {children}
-      </main>
-      <aside className="col-start-2 row-start-1 row-span-2 hidden lg:block p-4 bg-banner bg-contain border-l border-neutral-700">
-        {sidebar.map((Component, i) => (
-          <section className="mb-4 last:mb-0" key={i}>
-            {Component}
-          </section>
-        ))}
-      </aside>
-    </div>
+    <>
+      {isReadOnly ? (
+        <ViewingAsBanner pubKey={pubKey} disconnect={disconnect} />
+      ) : null}
+      <div className="w-full border-b border-neutral-700 lg:grid lg:grid-rows-[1fr] lg:grid-cols-[1fr_450px]">
+        <main className="max-w-[100vw] col-start-1 p-4 overflow-auto">
+          {children}
+        </main>
+        <aside className="col-start-2 row-start-1 row-span-2 hidden lg:block p-4 bg-banner bg-contain border-l border-neutral-700">
+          {sidebar.map((Component, i) => (
+            <section className="mb-4 last:mb-0" key={i}>
+              {Component}
+            </section>
+          ))}
+        </aside>
+      </div>
+    </>
  );
 }
@@ -3,6 +3,11 @@ import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
 import React from 'react';
 import { useTranslation } from 'react-i18next';

+import {
+  AppStateActionType,
+  useAppState,
+} from '../../contexts/app-state/app-state-context';
+
 interface VegaWalletContainerProps {
  children: (key: string) => React.ReactElement;
 }
@@ -10,6 +15,7 @@ interface VegaWalletContainerProps {
 export const VegaWalletContainer = ({ children }: VegaWalletContainerProps) => {
  const { t } = useTranslation();
  const { pubKey } = useVegaWallet();
+  const { appDispatch } = useAppState();
  const { openVegaWalletDialog } = useVegaWalletDialogStore((store) => ({
    openVegaWalletDialog: store.openVegaWalletDialog,
  }));
@@ -19,6 +25,10 @@ export const VegaWalletContainer = ({ children }: VegaWalletContainerProps) => {
      <Button
        data-testid="connect-to-vega-wallet-btn"
        onClick={() => {
+          appDispatch({
+            type: AppStateActionType.SET_VEGA_WALLET_OVERLAY,
+            isOpen: true,
+          });
          openVegaWalletDialog();
        }}
      >
@@ -71,6 +71,7 @@ export const VegaWallet = () => {

 const VegaWalletNotConnected = () => {
  const { t } = useTranslation();
+  const { appDispatch } = useAppState();
  const { openVegaWalletDialog } = useVegaWalletDialogStore((store) => ({
    openVegaWalletDialog: store.openVegaWalletDialog,
  }));
@@ -78,6 +79,10 @@ const VegaWalletNotConnected = () => {
    <>
      <Button
        onClick={() => {
+          appDispatch({
+            type: AppStateActionType.SET_VEGA_WALLET_OVERLAY,
+            isOpen: true,
+          });
          openVegaWalletDialog();
        }}
        fill={true}
@@ -25,10 +25,6 @@ export const ContractAddresses: {
    claimAddress: customClaimAddress ?? '0x0',
    lockedAddress: customLockedAddress ?? '0x0',
  },
-  MAINNET_MIRROR: {
-    claimAddress: '0x8Cef746ab7C83B61F6461cC92882bD61AB65a994', // TODO not deployed to this env, but random address so app doesn't error
-    lockedAddress: '0x0', // TODO not deployed to this env
-  },
  DEVNET: {
    claimAddress: '0x8Cef746ab7C83B61F6461cC92882bD61AB65a994', // TODO not deployed to this env, but random address so app doesn't error
    lockedAddress: '0x0', // TODO not deployed to this env
@@ -28,6 +28,9 @@ export interface AppState {
  /** Total number of VEGA Tokens, both vesting and unlocked, associated for staking */
  totalAssociated: BigNumber;

+  /** Whether or not the connect to VEGA wallet overlay is open */
+  vegaWalletOverlay: boolean;
+
  /** Whether or not the manage VEGA wallet overlay is open */
  vegaWalletManageOverlay: boolean;

@@ -49,7 +52,9 @@ export enum AppStateActionType {
  SET_TOKEN,
  SET_ALLOWANCE,
  REFRESH_BALANCES,
+  SET_VEGA_WALLET_OVERLAY,
  SET_VEGA_WALLET_MANAGE_OVERLAY,
+  SET_DRAWER,
  REFRESH_ASSOCIATED_BALANCES,
  SET_ASSOCIATION_BREAKDOWN,
  SET_TRANSACTION_OVERLAY,
@@ -64,10 +69,18 @@ export type AppStateAction =
      totalSupply: BigNumber;
      totalAssociated: BigNumber;
    }
+  | {
+      type: AppStateActionType.SET_VEGA_WALLET_OVERLAY;
+      isOpen: boolean;
+    }
  | {
      type: AppStateActionType.SET_VEGA_WALLET_MANAGE_OVERLAY;
      isOpen: boolean;
    }
+  | {
+      type: AppStateActionType.SET_DRAWER;
+      isOpen: boolean;
+    }
  | {
      type: AppStateActionType.SET_TRANSACTION_OVERLAY;
      isOpen: boolean;
@@ -14,6 +14,7 @@ const initialAppState: AppState = {
  totalAssociated: new BigNumber(0),
  decimals: 0,
  totalSupply: new BigNumber(0),
+  vegaWalletOverlay: false,
  vegaWalletManageOverlay: false,
  transactionOverlay: false,
  bannerMessage: '',
@@ -30,10 +31,23 @@ function appStateReducer(state: AppState, action: AppStateAction): AppState {
        totalAssociated: action.totalAssociated,
      };
    }
+    case AppStateActionType.SET_VEGA_WALLET_OVERLAY: {
+      return {
+        ...state,
+        vegaWalletOverlay: action.isOpen,
+      };
+    }
    case AppStateActionType.SET_VEGA_WALLET_MANAGE_OVERLAY: {
      return {
        ...state,
        vegaWalletManageOverlay: action.isOpen,
+        vegaWalletOverlay: action.isOpen ? false : state.vegaWalletOverlay,
+      };
+    }
+    case AppStateActionType.SET_DRAWER: {
+      return {
+        ...state,
+        vegaWalletOverlay: false,
      };
    }
    case AppStateActionType.SET_TRANSACTION_OVERLAY: {
@@ -837,7 +837,5 @@
  "RejectedProposals": "Rejected proposals",
  "networkGovernance": "Network governance",
  "networkUpgrades": "Network upgrades",
-  "assetSpecification": "Asset specification",
-  "Estimated time to upgrade": "Estimated time to upgrade",
-  "Upgraded at": "Upgraded at"
+  "assetSpecification": "Asset specification"
 }
@@ -7,9 +7,9 @@ import {

 const urlParams = new URLSearchParams(window.location.search);

-export const injected = new InjectedConnector();
 export const rest = new RestConnector();
 export const jsonRpc = new JsonRpcConnector();
+export const injected = new InjectedConnector();
 export const view = new ViewConnector(urlParams.get('address'));

 export const Connectors = {
@@ -31,7 +31,6 @@ import {
  orderByDate,
  orderByUpgradeBlockHeight,
 } from '../proposals/components/proposals-list/proposals-list';
-import { BigNumber } from '../../lib/bignumber';

 const nodesToShow = 6;

@@ -249,8 +248,6 @@ const GovernanceHome = ({ name }: RouteChildProps) => {

  const activeNodes = removePaginationWrapper(
    validatorsData?.nodesConnection.edges
-  ).filter((node) =>
-    new BigNumber(node.rankingScore.performanceScore).isGreaterThan(0)
  );

  const trimmedActiveNodes = activeNodes?.slice(0, nodesToShow);
@@ -4,20 +4,16 @@ import { render } from '@testing-library/react';
 import { ProtocolUpgradeProposalStatus } from '@vegaprotocol/types';
 import { ProtocolUpgradeProposalDetailInfo } from './protocol-upgrade-proposal-detail-info';

-const PROPOSAL = {
-  vegaReleaseTag: 'v0.1.234',
-  status:
-    ProtocolUpgradeProposalStatus.PROTOCOL_UPGRADE_PROPOSAL_STATUS_PENDING,
-  upgradeBlockHeight: '12345',
-  approvers: [],
-};
-
-const renderComponent = (lastBlockHeight?: string, time?: string) =>
+const renderComponent = () =>
  render(
    <ProtocolUpgradeProposalDetailInfo
-      proposal={PROPOSAL}
-      lastBlockHeight={lastBlockHeight}
-      time={time}
+      proposal={{
+        vegaReleaseTag: 'v0.1.234',
+        status:
+          ProtocolUpgradeProposalStatus.PROTOCOL_UPGRADE_PROPOSAL_STATUS_PENDING,
+        upgradeBlockHeight: '12345',
+        approvers: [],
+      }}
    />
  );

@@ -47,28 +43,4 @@ describe('ProtocolUpgradeProposalDetailInfo', () => {
      'v0.1.234'
    );
  });
-
-  it('should display estimated time if proposal is still pending', () => {
-    const { getByTestId } = renderComponent('12', 'time');
-    expect(getByTestId('protocol-upgrade-time-label')).toHaveTextContent(
-      'Estimated time to upgrade'
-    );
-    expect(getByTestId('protocol-upgrade-time')).toHaveTextContent('time');
-  });
-
-  it('should display upgraded at if proposal is done', () => {
-    const { getByTestId } = renderComponent('123456', 'time');
-    expect(getByTestId('protocol-upgrade-time-label')).toHaveTextContent(
-      'Upgraded at'
-    );
-    expect(getByTestId('protocol-upgrade-time')).toHaveTextContent('time');
-  });
-
-  it('should not display time if none provided', () => {
-    const { queryByTestId } = renderComponent('123456', undefined);
-    expect(
-      queryByTestId('protocol-upgrade-time-label')
-    ).not.toBeInTheDocument();
-    expect(queryByTestId('protocol-upgrade-time')).not.toBeInTheDocument();
-  });
 });
@@ -5,33 +5,19 @@ import {
  RoundedWrapper,
 } from '@vegaprotocol/ui-toolkit';
 import { SubHeading } from '../../../../components/heading';
-import { type ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
-import * as Types from '@vegaprotocol/types';
-import type { ReactNode } from 'react';
+import type { ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';

 export interface ProtocolUpgradeProposalDetailInfoProps {
  proposal: ProtocolUpgradeProposalFieldsFragment;
  lastBlockHeight?: string;
-  time?: string | ReactNode;
 }

 export const ProtocolUpgradeProposalDetailInfo = ({
  proposal,
  lastBlockHeight,
-  time,
 }: ProtocolUpgradeProposalDetailInfoProps) => {
  const { t } = useTranslation();

-  const shouldShowUpgradeTime =
-    ![
-      Types.ProtocolUpgradeProposalStatus
-        .PROTOCOL_UPGRADE_PROPOSAL_STATUS_REJECTED,
-      Types.ProtocolUpgradeProposalStatus
-        .PROTOCOL_UPGRADE_PROPOSAL_STATUS_UNSPECIFIED,
-    ].includes(proposal.status) && time;
-
-  const pending = Number(proposal.upgradeBlockHeight) > Number(lastBlockHeight);
-
  return (
    <div className="mb-10">
      <SubHeading title={t('proposal')} />
@@ -43,26 +29,13 @@ export const ProtocolUpgradeProposalDetailInfo = ({
            <span data-testid="protocol-upgrade-block-height">
              {proposal.upgradeBlockHeight}{' '}
              {lastBlockHeight && (
-                <span className="text-vega-light-300 dark:text-vega-dark-300">
+                <>
                  ({t('currently')} {lastBlockHeight})
-                </span>
+                </>
              )}
            </span>
          </KeyValueTableRow>

-          {shouldShowUpgradeTime && (
-            <KeyValueTableRow>
-              <span
-                data-testid="protocol-upgrade-time-label"
-                className="uppercase"
-              >
-                {pending ? t('Estimated time to upgrade') : t('Upgraded at')}
-              </span>
-
-              <span data-testid="protocol-upgrade-time">{time}</span>
-            </KeyValueTableRow>
-          )}
-
          <KeyValueTableRow>
            <span className="uppercase">{t('state')}</span>

@@ -10,7 +10,10 @@ import {
 } from '@vegaprotocol/ui-toolkit';
 import { addDecimal, toBigNum } from '@vegaprotocol/utils';
 import { ProposalState, VoteValue } from '@vegaprotocol/types';
-import { useAppState } from '../../../../contexts/app-state/app-state-context';
+import {
+  AppStateActionType,
+  useAppState,
+} from '../../../../contexts/app-state/app-state-context';
 import { BigNumber } from '../../../../lib/bignumber';
 import { DATE_FORMAT_LONG } from '../../../../lib/date-formats';
 import { VoteState } from './use-user-vote';
@@ -70,6 +73,7 @@ export const VoteButtons = ({
  dialog: Dialog,
 }: VoteButtonsProps) => {
  const { t } = useTranslation();
+  const { appDispatch } = useAppState();
  const { pubKey } = useVegaWallet();
  const { openVegaWalletDialog } = useVegaWalletDialogStore((store) => ({
    openVegaWalletDialog: store.openVegaWalletDialog,
@@ -94,6 +98,10 @@ export const VoteButtons = ({
        <div data-testid="connect-wallet">
          <ButtonLink
            onClick={() => {
+              appDispatch({
+                type: AppStateActionType.SET_VEGA_WALLET_OVERLAY,
+                isOpen: true,
+              });
              openVegaWalletDialog();
            }}
          >
@@ -134,6 +142,7 @@ export const VoteButtons = ({
    minVoterBalance,
    spamProtectionMinTokens,
    t,
+    appDispatch,
    openVegaWalletDialog,
  ]);

@@ -14,6 +14,7 @@ const mockAppState: AppState = {
  totalAssociated: new BigNumber('50063005'),
  decimals: 18,
  totalSupply: mockTotalSupply,
+  vegaWalletOverlay: false,
  vegaWalletManageOverlay: false,
  transactionOverlay: false,
  bannerMessage: '',
@@ -3,12 +3,12 @@ import * as Types from '@vegaprotocol/types';
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
 const defaultOptions = {} as const;
-export type ProposalFieldsFragment = { __typename?: 'Proposal', id?: string | null, reference: string, state: Types.ProposalState, datetime: any, rejectionReason?: Types.ProposalRejectionReason | null, errorDetails?: string | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string }, party: { __typename?: 'Party', id: string }, terms: { __typename?: 'ProposalTerms', closingDatetime: any, enactmentDatetime?: any | null, change: { __typename?: 'CancelTransfer' } | { __typename: 'NewAsset', name: string, symbol: string, decimals: number, quantum: string, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string, withdrawThreshold: string, lifetimeLimit: string } } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket', instrument: { __typename?: 'InstrumentConfiguration', name: string, code: string, futureProduct?: { __typename?: 'FutureProduct', settlementAsset: { __typename?: 'Asset', symbol: string } } | null } } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset', quantum: string, assetId: string, source: { __typename?: 'UpdateERC20', lifetimeLimit: string, withdrawThreshold: string } } | { __typename?: 'UpdateMarket', marketId: string } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } }, votes: { __typename?: 'ProposalVotes', yes: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string }, no: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string } } };
+export type ProposalFieldsFragment = { __typename?: 'Proposal', id?: string | null, reference: string, state: Types.ProposalState, datetime: any, rejectionReason?: Types.ProposalRejectionReason | null, errorDetails?: string | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string }, party: { __typename?: 'Party', id: string }, terms: { __typename?: 'ProposalTerms', closingDatetime: any, enactmentDatetime?: any | null, change: { __typename: 'NewAsset', name: string, symbol: string, decimals: number, quantum: string, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string, withdrawThreshold: string, lifetimeLimit: string } } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket', instrument: { __typename?: 'InstrumentConfiguration', name: string, code: string, futureProduct?: { __typename?: 'FutureProduct', settlementAsset: { __typename?: 'Asset', symbol: string } } | null } } | { __typename?: 'UpdateAsset', quantum: string, assetId: string, source: { __typename?: 'UpdateERC20', lifetimeLimit: string, withdrawThreshold: string } } | { __typename?: 'UpdateMarket', marketId: string } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } }, votes: { __typename?: 'ProposalVotes', yes: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string }, no: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string } } };

 export type ProposalsQueryVariables = Types.Exact<{ [key: string]: never; }>;


-export type ProposalsQuery = { __typename?: 'Query', proposalsConnection?: { __typename?: 'ProposalsConnection', edges?: Array<{ __typename?: 'ProposalEdge', node: { __typename?: 'Proposal', id?: string | null, reference: string, state: Types.ProposalState, datetime: any, rejectionReason?: Types.ProposalRejectionReason | null, errorDetails?: string | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string }, party: { __typename?: 'Party', id: string }, terms: { __typename?: 'ProposalTerms', closingDatetime: any, enactmentDatetime?: any | null, change: { __typename?: 'CancelTransfer' } | { __typename: 'NewAsset', name: string, symbol: string, decimals: number, quantum: string, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string, withdrawThreshold: string, lifetimeLimit: string } } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket', instrument: { __typename?: 'InstrumentConfiguration', name: string, code: string, futureProduct?: { __typename?: 'FutureProduct', settlementAsset: { __typename?: 'Asset', symbol: string } } | null } } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset', quantum: string, assetId: string, source: { __typename?: 'UpdateERC20', lifetimeLimit: string, withdrawThreshold: string } } | { __typename?: 'UpdateMarket', marketId: string } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } }, votes: { __typename?: 'ProposalVotes', yes: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string }, no: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string } } } } | null> | null } | null };
+export type ProposalsQuery = { __typename?: 'Query', proposalsConnection?: { __typename?: 'ProposalsConnection', edges?: Array<{ __typename?: 'ProposalEdge', node: { __typename?: 'Proposal', id?: string | null, reference: string, state: Types.ProposalState, datetime: any, rejectionReason?: Types.ProposalRejectionReason | null, errorDetails?: string | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string }, party: { __typename?: 'Party', id: string }, terms: { __typename?: 'ProposalTerms', closingDatetime: any, enactmentDatetime?: any | null, change: { __typename: 'NewAsset', name: string, symbol: string, decimals: number, quantum: string, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string, withdrawThreshold: string, lifetimeLimit: string } } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket', instrument: { __typename?: 'InstrumentConfiguration', name: string, code: string, futureProduct?: { __typename?: 'FutureProduct', settlementAsset: { __typename?: 'Asset', symbol: string } } | null } } | { __typename?: 'UpdateAsset', quantum: string, assetId: string, source: { __typename?: 'UpdateERC20', lifetimeLimit: string, withdrawThreshold: string } } | { __typename?: 'UpdateMarket', marketId: string } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } }, votes: { __typename?: 'ProposalVotes', yes: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string }, no: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string } } } } | null> | null } | null };

 export const ProposalFieldsFragmentDoc = gql`
    fragment ProposalFields on Proposal {
@@ -1,23 +1,14 @@
 import { useEffect, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
-import {
-  convertToCountdownString,
-  formatDateWithLocalTimezone,
-  removePaginationWrapper,
-  stripFullStops,
-} from '@vegaprotocol/utils';
+import { removePaginationWrapper, stripFullStops } from '@vegaprotocol/utils';
 import * as Schema from '@vegaprotocol/types';

 import { ProtocolUpgradeProposal } from './protocol-upgrade-proposal';
 import { ProposalNotFound } from '../components/proposal-not-found';
 import { useNodesQuery } from '../../staking/home/__generated__/Nodes';
 import { useRefreshAfterEpoch } from '../../../hooks/use-refresh-after-epoch';
-import {
-  useProtocolUpgradeProposalsQuery,
-  useTimeToUpgrade,
-} from '@vegaprotocol/proposals';
-import { useBlockInfo } from '@vegaprotocol/tendermint';
+import { useProtocolUpgradeProposalsQuery } from '@vegaprotocol/proposals';

 export const ProtocolUpgradeProposalContainer = () => {
  const params = useParams<{ proposalReleaseTag: string }>();
@@ -67,20 +58,6 @@ export const ProtocolUpgradeProposalContainer = () => {
    );
  }, [nodesData]);

-  const pending =
-    Number(protocolUpgradeProposal?.upgradeBlockHeight) >
-    Number(data?.lastBlockHeight);
-
-  const {
-    state: { data: blockInfo },
-  } = useBlockInfo(
-    Number(protocolUpgradeProposal?.upgradeBlockHeight),
-    !pending
-  );
-  const time = useTimeToUpgrade(
-    Number(protocolUpgradeProposal?.upgradeBlockHeight)
-  );
-
  return (
    <AsyncRenderer
      loading={loading || nodesLoading}
@@ -92,19 +69,6 @@ export const ProtocolUpgradeProposalContainer = () => {
          proposal={protocolUpgradeProposal}
          lastBlockHeight={data?.lastBlockHeight}
          consensusValidators={consensusValidators}
-          time={
-            pending && time ? (
-              convertToCountdownString(time, '0:00:00:00')
-            ) : blockInfo?.result ? (
-              <span title={blockInfo.result.block.header.time}>
-                {formatDateWithLocalTimezone(
-                  new Date(blockInfo.result.block.header.time)
-                )}
-              </span>
-            ) : (
-              '-'
-            )
-          }
        />
      ) : (
        <ProposalNotFound />
@@ -1,11 +1,10 @@
 import { useMemo } from 'react';
-import type { ReactNode } from 'react';
 import { ProtocolUpgradeProposalDetailHeader } from '../components/protocol-upgrade-proposal-detail-header';
 import { ProtocolUpdateProposalDetailApprovals } from '../components/protocol-upgrade-proposal-detail-approvals';
 import { ProtocolUpgradeProposalDetailInfo } from '../components/protocol-upgrade-proposal-detail-info';
 import { getNormalisedVotingPower } from '../../staking/shared';
 import type { NodesFragmentFragment } from '../../staking/home/__generated__/Nodes';
-import { type ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
+import type { ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
 import { useVegaRelease } from '@vegaprotocol/environment';
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { useTranslation } from 'react-i18next';
@@ -14,7 +13,6 @@ export interface ProtocolUpgradeProposalProps {
  proposal: ProtocolUpgradeProposalFieldsFragment;
  consensusValidators: NodesFragmentFragment[] | null;
  lastBlockHeight?: string;
-  time?: string | ReactNode;
 }

 export const getConsensusApprovals = (
@@ -46,7 +44,6 @@ export const ProtocolUpgradeProposal = ({
  proposal,
  lastBlockHeight,
  consensusValidators,
-  time,
 }: ProtocolUpgradeProposalProps) => {
  const { t } = useTranslation();
  const releaseInfo = useVegaRelease(proposal.vegaReleaseTag);
@@ -76,7 +73,6 @@ export const ProtocolUpgradeProposal = ({
      <ProtocolUpgradeProposalDetailInfo
        proposal={proposal}
        lastBlockHeight={lastBlockHeight}
-        time={time}
      />

      {consensusValidators && consensusApprovals && (
@@ -2,9 +2,14 @@ import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 import { useVegaWalletDialogStore } from '@vegaprotocol/wallet';
 import { Button } from '@vegaprotocol/ui-toolkit';
+import {
+  AppStateActionType,
+  useAppState,
+} from '../../contexts/app-state/app-state-context';
 import { SubHeading } from '../../components/heading';

 export const ConnectToSeeRewards = () => {
+  const { appDispatch } = useAppState();
  const { openVegaWalletDialog } = useVegaWalletDialogStore((store) => ({
    openVegaWalletDialog: store.openVegaWalletDialog,
  }));
@@ -21,6 +26,10 @@ export const ConnectToSeeRewards = () => {
      <Button
        data-testid="connect-to-vega-wallet-btn"
        onClick={() => {
+          appDispatch({
+            type: AppStateActionType.SET_VEGA_WALLET_OVERLAY,
+            isOpen: true,
+          });
          openVegaWalletDialog();
        }}
      >
@@ -8,9 +8,10 @@ import { TxState } from '../../../hooks/transaction-reducer';
 import { useTransaction } from '../../../hooks/use-transaction';
 import { BigNumber } from '../../../lib/bignumber';
 import { AssociateInfo } from './associate-info';
-import { removeDecimal, toBigNum } from '@vegaprotocol/utils';
+import { toBigNum } from '@vegaprotocol/utils';
 import type { EthereumConfig } from '@vegaprotocol/web3';
 import { useBalances } from '../../../lib/balances/balances-store';
+import { MaxUint256 } from '@ethersproject/constants';

 export const WalletAssociate = ({
  perform,
@@ -42,7 +43,7 @@ export const WalletAssociate = ({
  } = useTransaction(() => {
    return token.approve(
      ethereumConfig.staking_bridge_contract.address,
-      removeDecimal('1000000', decimals).toString()
+      MaxUint256.toString()
    );
  });

@@ -216,7 +216,7 @@ export const StakingForm = ({
                  text: t('associateVegaNow'),
                  action: () => navigate(Routes.ASSOCIATE),
                  className: 'py-1',
-                  size: 'small',
+                  size: 'sm',
                }}
              />
            )}
@@ -2,6 +2,7 @@ import { removeDecimal } from '@vegaprotocol/cypress';
 import * as Schema from '@vegaprotocol/types';
 import {
  OrderStatusMapping,
+  OrderTimeInForceMapping,
  OrderTypeMapping,
  Side,
 } from '@vegaprotocol/types';
@@ -16,6 +17,7 @@ const orderStatus = 'status';
 const orderRemaining = 'remaining';
 const orderPrice = 'price';
 const orderTimeInForce = 'timeInForce';
+const orderCreatedAt = 'createdAt';
 const orderUpdatedAt = 'updatedAt';
 const assetSelectField = 'select[name="asset"]';
 const amountField = 'input[name="amount"]';
@@ -54,7 +56,7 @@ describe('capsule - without MultiSign', { tags: '@slow' }, () => {

  it('can deposit', function () {
    cy.visit('/#/portfolio');
-    cy.get('[data-testid="pathname-/portfolio"]').should('exist');
+    cy.get('main[data-testid="/portfolio"]').should('exist');

    // 1001-DEPO-001
    // 1001-DEPO-002
@@ -117,10 +119,10 @@ describe('capsule - without MultiSign', { tags: '@slow' }, () => {
  it('can key to key transfers', function () {
    // 1003-TRAN-023
    // 1003-TRAN-006
-    cy.get('[data-testid="pathname-/portfolio"]').should('exist');
+    cy.get('main[data-testid="/portfolio"]').should('exist');

    cy.getByTestId(collateralTab).click();
-    cy.getByTestId('open-transfer').click();
+    cy.getByTestId('open-transfer-dialog').click();
    cy.getByTestId('transfer-form').should('be.visible');
    cy.getByTestId('transfer-form').find('[name="toAddress"]').select(1);
    cy.get('select option')
@@ -187,21 +189,19 @@ describe('capsule', { tags: '@slow', testIsolation: true }, () => {
    // 0006-NETW-010
    const market = this.market;
    cy.visit(`/#/markets/${market.id}`);
-    cy.getByTestId('node-health-trigger').realHover();
    cy.getByTestId('node-health')
      .children()
      .first()
      .should('contain.text', 'Operational')
+      .next()
+      .should('contain.text', new URL(Cypress.env('VEGA_URL')).hostname)
+      .next()
      .then(($el) => {
        const blockHeight = parseInt($el.text());
        // block height will increase over the course of the test run so best
        // we can do here is check that its showing something sensible
        expect(blockHeight).to.be.greaterThan(0);
      });
-    cy.getByTestId('node-health')
-      .children()
-      .eq(1)
-      .should('contain.text', new URL(Cypress.env('VEGA_URL')).hostname);
  });

  it('can place and receive an order', function () {
@@ -260,7 +260,10 @@ describe('capsule', { tags: '@slow', testIsolation: true }, () => {
            OrderStatusMapping.STATUS_ACTIVE
          );

-          cy.get(`[col-id='${orderRemaining}']`).should('contain.text', '0.00');
+          cy.get(`[col-id='${orderRemaining}']`).should(
+            'contain.text',
+            `0.00/${order.size}`
+          );

          cy.get(`[col-id='${orderPrice}']`).then(($price) => {
            expect(parseFloat($price.text())).to.equal(parseFloat(order.price));
@@ -268,10 +271,10 @@ describe('capsule', { tags: '@slow', testIsolation: true }, () => {

          cy.get(`[col-id='${orderTimeInForce}']`).should(
            'contain.text',
-            'GTC'
+            OrderTimeInForceMapping[order.timeInForce]
          );

-          checkIfDataAndTimeOfCreationAndUpdateIsEqual(orderUpdatedAt);
+          checkIfDataAndTimeOfCreationAndUpdateIsEqual(orderCreatedAt);
        });
    });
  });
@@ -344,7 +347,7 @@ describe('capsule', { tags: '@slow', testIsolation: true }, () => {
    const ethWalletAddress = Cypress.env('ETHEREUM_WALLET_ADDRESS');

    cy.visit('/#/portfolio');
-    cy.get('[data-testid="pathname-/portfolio"]').should('exist');
+    cy.get('main[data-testid="/portfolio"]').should('exist');
    cy.getByTestId(toastCloseBtn, txTimeout).click();
    cy.getByTestId('Withdrawals').click();
    cy.getByTestId('withdraw-dialog-button').click();
@@ -431,7 +434,7 @@ describe('capsule', { tags: '@slow', testIsolation: true }, () => {
    // 1001-DEPO-006
    // 1001-DEPO-007
    cy.visit('/#/portfolio');
-    cy.get('[data-testid="pathname-/portfolio"]').should('exist');
+    cy.get('main[data-testid="/portfolio"]').should('exist');
    cy.getByTestId(toastCloseBtn, txTimeout).click();
    cy.getByTestId(depositsTab).click();
    cy.getByTestId('deposit-button').click();
@@ -453,7 +456,7 @@ describe('capsule', { tags: '@slow', testIsolation: true }, () => {
    // 1002-WITH-007

    cy.visit('/#/portfolio');
-    cy.get('[data-testid="pathname-/portfolio"]', txTimeout).should('exist');
+    cy.get('main[data-testid="/portfolio"]', txTimeout).should('exist');
    cy.getByTestId(toastCloseBtn, txTimeout).click();
    cy.getByTestId(depositsTab).click();
    cy.getByTestId('deposit-button').click();
@@ -351,6 +351,12 @@ describe('Closed markets', { tags: '@smoke' }, () => {
        )
      );

+    // 6001-MARK-017
+    cy.get(rowSelector)
+      .first()
+      .find('[col-id="realisedPNL"]')
+      .should('have.text', '-');
+
    // 6001-MARK-018
    cy.get(rowSelector)
      .first()
@@ -363,10 +369,6 @@ describe('Closed markets', { tags: '@smoke' }, () => {
      .first()
      .find('button svg')
      .should('exist');
-    cy.get(rowSelector)
-      .find('[col-id="successorMarketID"]')
-      .first()
-      .should('have.text', ' - ');
  });

  // test market list for market in terminated state
@@ -17,11 +17,11 @@ describe('deposit form validation', { tags: '@smoke' }, () => {
    cy.mockTradingPage();
    cy.setVegaWallet();
    cy.visit('/#/portfolio');
-    cy.get('[data-testid="pathname-/portfolio"]').should('exist');
+    cy.get('main[data-testid="/portfolio"]').should('exist');
    cy.getByTestId('Deposits').click();
    cy.getByTestId('deposit-button').click();
-    connectEthereumWallet('MetaMask');
    cy.wait('@Assets');
+    connectEthereumWallet('MetaMask');
  }

  before(() => {
@@ -102,6 +102,8 @@ describe('deposit actions', { tags: '@smoke' }, () => {
    cy.mockSubscription();
    cy.setVegaWallet();
    cy.visit('/#/markets/market-1');
+    cy.wait('@MarketsCandles');
+    cy.getByTestId('dialog-close').click();
  });

  it('Deposit to trade is visble', () => {
@@ -1,6 +1,5 @@
 const dialogContent = 'dialog-content';
 const nodeHealth = 'node-health';
-const nodeHealthTrigger = 'node-health-trigger';

 describe('home', { tags: '@regression' }, () => {
  before(() => {
@@ -9,23 +8,22 @@ describe('home', { tags: '@regression' }, () => {
    cy.visit('/');
  });

-  describe('node health', () => {
+  describe('footer', () => {
    it('shows current block height', () => {
      // 0006-NETW-004
      // 0006-NETW-008
      // 0006-NETW-009
-      cy.getByTestId(nodeHealthTrigger).realHover();
+
      cy.getByTestId(nodeHealth)
        .children()
        .first()
        .should('contain.text', 'Operational', {
          timeout: 10000,
        })
+        .next()
+        .should('contain.text', new URL(Cypress.env('VEGA_URL')).hostname)
+        .next()
        .should('contain.text', '100'); // all mocked queries have x-block-height header set to 100
-      cy.getByTestId(nodeHealth)
-        .children()
-        .eq(1)
-        .should('contain.text', new URL(Cypress.env('VEGA_URL')).hostname);
    });

    it('shows node switcher details', () => {
@@ -34,7 +32,7 @@ describe('home', { tags: '@regression' }, () => {
      // 0006-NETW-014
      // 0006-NETW-015
      // 0006-NETW-016
-      cy.getByTestId(nodeHealthTrigger).click();
+      cy.getByTestId(nodeHealth).click();
      cy.getByTestId(dialogContent).should('contain.text', 'Connected node');
      cy.getByTestId(dialogContent).should(
        'contain.text',
@@ -58,7 +56,7 @@ describe('home', { tags: '@regression' }, () => {
      // 0006-NETW-018
      // 0006-NETW-019
      // 0006-NETW-020
-      cy.getByTestId(nodeHealthTrigger).click();
+      cy.getByTestId(nodeHealth).click();
      cy.getByTestId('connect').should('be.disabled');
      cy.getByTestId('node-url-custom').click();
      cy.getByTestId('connect').should('be.disabled');
@@ -106,7 +106,7 @@ describe('home', { tags: '@regression' }, () => {
      cy.visit('/');
      cy.wait('@Markets');

-      cy.get('[data-testid^="pathname-/markets/"]');
+      cy.get('main[data-testid^="/markets/"]');

      // the choose market overlay is no longer showing
      cy.contains('Loading...').should('not.exist');
@@ -68,15 +68,14 @@ describe('market info is displayed', { tags: '@smoke' }, () => {

    validateMarketDataRow(0, 'Name', 'BTCUSD Monthly (30 Jun 2022)');
    validateMarketDataRow(1, 'Market ID', 'market-0');
-    validateMarketDataRow(2, 'Parent Market ID', 'market-1');
    validateMarketDataRow(
-      3,
+      2,
      'Trading Mode',
      MarketTradingModeMapping.TRADING_MODE_CONTINUOUS
    );
-    validateMarketDataRow(4, 'Market Decimal Places', '5');
-    validateMarketDataRow(5, 'Position Decimal Places', '0');
-    validateMarketDataRow(6, 'Settlement Asset Decimal Places', '5');
+    validateMarketDataRow(3, 'Market Decimal Places', '5');
+    validateMarketDataRow(4, 'Position Decimal Places', '0');
+    validateMarketDataRow(5, 'Settlement Asset Decimal Places', '5');
  });

  it('instrument displayed', () => {
@@ -132,10 +132,9 @@ describe('liquidity table view', { tags: '@smoke' }, () => {
  it('can see header title', () => {
    // 5002-LIQP-004
    // 5002-LIQP-005
-    cy.getByTestId('header-title').should(
-      'contain.text',
-      'BTCUSD.MF21 liquidity provision'
-    );
+    cy.getByTestId('header-title')
+      .should('contain.text', 'BTCUSD.MF21 liquidity provision')
+      .and('contain.text', 'Go to trading');
  });

  it('can see target stake', () => {
@@ -172,7 +171,7 @@ describe('liquidity table view', { tags: '@smoke' }, () => {
      cy.getByTestId('liquidity-supplied').within(() => {
        cy.getByTestId(itemHeader).should('have.text', 'Liquidity supplied');
        cy.getByTestId('indicator').should('be.visible');
-        cy.getByTestId(itemValue).should('have.text', ' 0.10%').realHover();
+        cy.getByTestId(itemValue).should('have.text', '0.10%').realHover();
      });
    });
  });
@@ -22,12 +22,15 @@ describe('markets selector', { tags: '@smoke' }, () => {

    cy.wait('@Markets');
    cy.wait('@MarketsData');
+    cy.wait('@MarketsCandles');
  });

  // 6001-MARK-066
-  it('can open popover to view markets', () => {
+  it('can toggle the sidebar', () => {
+    cy.getByTestId('market-selector').should('be.visible');
+    cy.getByTestId('sidebar-toggle').click();
    cy.getByTestId('market-selector').should('not.exist');
-    cy.getByTestId('header-title').should('be.visible').click();
+    cy.getByTestId('sidebar-toggle').click();
    cy.getByTestId('market-selector').should('be.visible');
  });

@@ -37,26 +40,29 @@ describe('markets selector', { tags: '@smoke' }, () => {
    const data = [
      {
        code: 'SOLUSD',
-        markPrice: '84.41',
-        vol: '0.00',
+        markPrice: '84.41XYZalpha',
+        change: '',
+        vol: '0.0024h vol',
      },
      {
        code: 'ETHBTC.QM21',
-        markPrice: '46,126.90058',
-        vol: '0.00',
+        markPrice: '46,126.90058tBTC',
+        change: '',
+        vol: '0.0024h vol',
      },
      {
        code: 'BTCUSD.MF21',
-        markPrice: '46,126.90058',
-        vol: '0.00',
+        markPrice: '46,126.90058tDAI',
+        change: '',
+        vol: '0.0024h vol',
      },
      {
        code: 'AAPL.MF21',
-        markPrice: '46,126.90058',
-        vol: '0.00',
+        markPrice: '46,126.90058tUSDC',
+        change: '',
+        vol: '0.0024h vol',
      },
    ];
-    cy.getByTestId('header-title').should('be.visible').click();
    cy.getByTestId(list)
      .find('a')
      .each((item, i) => {
@@ -65,20 +71,33 @@ describe('markets selector', { tags: '@smoke' }, () => {
        // 6001-MARK-022
        expect(item.find('h3').text()).equals(market.code);
        expect(
-          item.find('[data-testid="market-selector-volume"]').text()
+          item.find('[data-testid="market-selector-data-row"]').eq(0).text()
        ).contains(market.vol);
        // 6001-MARK-024
        expect(
-          item.find('[data-testid="market-selector-price"]').text()
+          item.find('[data-testid="market-selector-data-row"]').eq(1).text()
        ).contains(market.markPrice);
+        // 6001-MARK-023
+        expect(item.find('[data-testid="market-item-change"]').text()).equals(
+          market.change
+        );
        // 6001-MARK-025
        expect(item.find('[data-testid="sparkline-svg"]')).to.not.exist;
      });
  });

-  it('can use the filter options', () => {
-    cy.getByTestId('header-title').should('be.visible').click();
+  it('can see all markets link', () => {
+    // 6001-MARK-026
+    cy.getByTestId('market-selector').within(() => {
+      cy.getByTestId('all-markets-link')
+        .should('be.visible')
+        .and('have.text', 'All markets')
+        .and('have.attr', 'href')
+        .and('contain', '#/markets/all');
+    });
+  });

+  it('can use the filter options', () => {
    // 6001-MARK-027
    // product type
    cy.getByTestId('product-Spot').click();
@@ -99,8 +118,6 @@ describe('markets selector', { tags: '@smoke' }, () => {
  });

  it('can sort by by top gaining and top losing market', () => {
-    cy.getByTestId('header-title').should('be.visible').click();
-
    // 6001-MARK-030
    // 6001-MARK-031
    // 6001-MARK-032
@@ -118,8 +135,6 @@ describe('markets selector', { tags: '@smoke' }, () => {
  });

  it('can filter by settlement asset', () => {
-    cy.getByTestId('header-title').should('be.visible').click();
-
    // 6001-MARK-028
    cy.getByTestId('asset-trigger').click();
    cy.getByTestId('asset-id-asset-3').contains('tBTC').click();
@@ -0,0 +1,71 @@
+describe('market bottom panel', { tags: '@smoke' }, () => {
+  before(() => {
+    cy.clearAllLocalStorage();
+    cy.mockTradingPage();
+    cy.mockSubscription();
+    cy.visit('/#/markets/market-0');
+    cy.wait('@MarketData');
+  });
+
+  it('on xxl screen should be splitted out into two tables', () => {
+    cy.getByTestId('tab-positions').should('have.attr', 'data-state', 'active');
+    cy.getByTestId('tab-open-orders').should(
+      'have.attr',
+      'data-state',
+      'inactive'
+    );
+    cy.getByTestId('tab-closed-orders').should(
+      'have.attr',
+      'data-state',
+      'inactive'
+    );
+    cy.getByTestId('tab-rejected-orders').should(
+      'have.attr',
+      'data-state',
+      'inactive'
+    );
+    cy.getByTestId('tab-orders').should('have.attr', 'data-state', 'inactive');
+    cy.getByTestId('tab-fills').should('have.attr', 'data-state', 'inactive');
+    cy.getByTestId('tab-accounts').should(
+      'have.attr',
+      'data-state',
+      'inactive'
+    );
+
+    cy.viewport(1801, 1000);
+    cy.getByTestId('tab-positions').should('have.attr', 'data-state', 'active');
+    cy.getByTestId('tab-open-orders').should(
+      'have.attr',
+      'data-state',
+      'inactive'
+    );
+    cy.getByTestId('tab-closed-orders').should(
+      'have.attr',
+      'data-state',
+      'inactive'
+    );
+    cy.getByTestId('tab-rejected-orders').should(
+      'have.attr',
+      'data-state',
+      'inactive'
+    );
+    cy.getByTestId('tab-orders').should('have.attr', 'data-state', 'inactive');
+    cy.getByTestId('tab-fills').should('have.attr', 'data-state', 'inactive');
+    cy.getByTestId('tab-accounts').should(
+      'have.attr',
+      'data-state',
+      'inactive'
+    );
+
+    cy.getByTestId('Fills').click();
+    cy.getByTestId('Collateral').click();
+    cy.getByTestId('tab-positions').should(
+      'have.attr',
+      'data-state',
+      'inactive'
+    );
+    cy.getByTestId('tab-orders').should('have.attr', 'data-state', 'inactive');
+    cy.getByTestId('tab-fills').should('have.attr', 'data-state', 'active');
+    cy.getByTestId('tab-accounts').should('have.attr', 'data-state', 'active');
+  });
+});
@@ -99,6 +99,9 @@ describe('Navbar', { tags: '@smoke' }, () => {
        cy.getByTestId('menu-drawer').should('not.be.visible');
        cy.getByTestId('button-menu-drawer').click();
        cy.getByTestId('menu-drawer').should('be.visible');
+        cy.getByTestId('menu-drawer')
+          .find('[data-testid="Settings"]')
+          .should('be.visible');
        cy.getByTestId('button-menu-drawer').click();
        cy.getByTestId('menu-drawer').should('not.be.visible');
      });
@@ -1,15 +1,14 @@
 const orderbookTab = 'Orderbook';
 const orderbookTable = 'tab-orderbook';
-const askPrice = 'price-9894185';
+const askPrice = 'price-9894585';
 const bidPrice = 'price-9889001';
-const askVolume = 'ask-vol-9894185';
+const askVolume = 'ask-vol-9894585';
 const bidVolume = 'bid-vol-9889001';
-const askCumulative = 'cumulative-vol-9894185';
+const askCumulative = 'cumulative-vol-9894585';
 const bidCumulative = 'cumulative-vol-9889001';
 const midPrice = 'middle-mark-price-4612690000';
 const priceResolution = 'resolution';
 const dealTicketPrice = 'order-price';
-const dealTicketSize = 'order-size';
 const resPrice = 'price-990';

 describe('order book', { tags: '@smoke' }, () => {
@@ -34,7 +33,7 @@ describe('order book', { tags: '@smoke' }, () => {

  it('show orders prices', () => {
    // 6003-ORDB-003
-    cy.getByTestId(askPrice).should('have.text', '98.94185');
+    cy.getByTestId(askPrice).should('have.text', '98.94585');
    cy.getByTestId(bidPrice).should('have.text', '98.89001');
  });

@@ -46,7 +45,7 @@ describe('order book', { tags: '@smoke' }, () => {

  it('show prices cumulative volumes', () => {
    // 6003-ORDB-005
-    cy.getByTestId(askCumulative).should('have.text', '38');
+    cy.getByTestId(askCumulative).should('have.text', '39');
    cy.getByTestId(bidCumulative).should('have.text', '7');
  });

@@ -72,19 +71,7 @@ describe('order book', { tags: '@smoke' }, () => {
  it('copy price to deal ticket form', () => {
    // 6003-ORDB-009
    cy.getByTestId(askPrice).click();
-    cy.getByTestId(dealTicketPrice).should('have.value', '98.94185');
-  });
-
-  it('copy size to deal ticket form', () => {
-    // 6003-ORDB-009
-    cy.getByTestId(bidCumulative).click();
-    cy.getByTestId(dealTicketSize).should('have.value', '7');
-  });
-
-  it('copy size to deal ticket form', () => {
-    // 6003-ORDB-009
-    cy.getByTestId(bidVolume).click();
-    cy.getByTestId(dealTicketSize).should('have.value', '1');
+    cy.getByTestId(dealTicketPrice).should('have.value', '98.94585');
  });

  it('change price resolution', () => {
@@ -101,14 +88,13 @@ describe('order book', { tags: '@smoke' }, () => {
      '1,000',
      '10,000',
    ];
-    cy.getByTestId(priceResolution).click();
-    cy.get('[role="menu"]')
-      .find('[role="menuitem"]')
+    cy.getByTestId(priceResolution)
+      .find('option')
      .each(($el, index) => {
        expect($el.text()).to.equal(resolutions[index]);
      });

-    cy.get('[role="menuitem"]').eq(4).click();
+    cy.getByTestId(priceResolution).select('0.0');
    cy.getByTestId(resPrice).should('have.text', '99.0');
    cy.getByTestId(askPrice).should('not.exist');
    cy.getByTestId(bidPrice).should('not.exist');
@@ -1,29 +1,42 @@
 describe('Settings page', { tags: '@smoke' }, () => {
  beforeEach(() => {
-    cy.clearLocalStorage();
-
-    cy.mockTradingPage();
-    cy.mockSubscription();
-    cy.visit('/');
-
-    // Only click if not already active otherwise sidebar will close
-    cy.get('[data-testid="sidebar-content"]').then(($sidebarContent) => {
-      if ($sidebarContent.find('h2').text() !== 'Settings') {
-        cy.get('[data-testid="sidebar"] [data-testid="Settings"]').click();
-      }
+    cy.clearLocalStorage().then(() => {
+      cy.mockTradingPage();
+      cy.mockSubscription();
+      cy.visit('/');
+      cy.get('[aria-label="cog icon"]').click();
    });
  });
-
  it('telemetry checkbox should work well', () => {
-    const telemetrySwitch = '#switch-settings-telemetry-switch';
-    cy.get(telemetrySwitch).should('have.attr', 'data-state', 'unchecked');
-    cy.get(telemetrySwitch).click();
-    cy.get(telemetrySwitch).should('have.attr', 'data-state', 'checked');
+    cy.location('hash').should('equal', '#/settings');
+    cy.getByTestId('telemetry-approval').should(
+      'have.attr',
+      'data-state',
+      'unchecked'
+    );
+    cy.get('[for="telemetry-approval"]').click();
+    cy.getByTestId('telemetry-approval').should(
+      'have.attr',
+      'data-state',
+      'checked'
+    );
    cy.reload();
-    cy.get(telemetrySwitch).should('have.attr', 'data-state', 'checked');
-    cy.get(telemetrySwitch).click();
-    cy.get(telemetrySwitch).should('have.attr', 'data-state', 'unchecked');
+    cy.getByTestId('telemetry-approval').should(
+      'have.attr',
+      'data-state',
+      'checked'
+    );
+    cy.get('[for="telemetry-approval"]').click();
+    cy.getByTestId('telemetry-approval').should(
+      'have.attr',
+      'data-state',
+      'unchecked'
+    );
    cy.reload();
-    cy.get(telemetrySwitch).should('have.attr', 'data-state', 'unchecked');
+    cy.getByTestId('telemetry-approval').should(
+      'have.attr',
+      'data-state',
+      'unchecked'
+    );
  });
 });
@@ -14,12 +14,6 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
    cy.mockSubscription();
    cy.visit('/#/markets/market-0');
    cy.wait('@Markets');
-
-    cy.get('[data-testid="deal-ticket-form"]').then(($form) => {
-      if (!$form.length) {
-        cy.getByTestId('Order').click();
-      }
-    });
  });

  beforeEach(() => {
@@ -12,7 +12,7 @@ describe(
  'account validation',
  { tags: '@regression', testIsolation: true },
  () => {
-    describe.skip('zero balance error', () => {
+    describe('zero balance error', () => {
      beforeEach(() => {
        cy.setVegaWallet();
        cy.mockTradingPage();
@@ -59,12 +59,6 @@ describe(
        cy.mockSubscription();
        cy.visit('/#/markets/market-0');
        cy.wait('@Markets');
-
-        cy.get('[data-testid="deal-ticket-form"]').then(($form) => {
-          if (!$form.length) {
-            cy.getByTestId('Order').click();
-          }
-        });
      });

      it('should display info and button for deposit', () => {
@@ -80,8 +74,8 @@ describe(
          'You may not have enough margin available to open this position. 5.00 tDAI is currently required. You have only 0.01001 tDAI available.'
        );
        cy.getByTestId('deal-ticket-deposit-dialog-button').click();
-        cy.getByTestId('sidebar-content')
-          .find('h2')
+        cy.getByTestId('dialog-content')
+          .find('h1')
          .eq(0)
          .should('have.text', 'Deposit');
      });
@@ -37,7 +37,7 @@ describe('fills', { tags: '@regression' }, () => {

  it('renders fills on portfolio page', () => {
    cy.visit('/#/portfolio');
-    cy.get('[data-testid="pathname-/portfolio"]').should('exist');
+    cy.get('main[data-testid="/portfolio"]').should('exist');
    cy.getByTestId('Fills').click();
    validateFillsDisplayed();
  });
@@ -431,8 +431,6 @@ describe('amend and cancel order', { tags: '@smoke' }, () => {
  });

  const orderId = '1234567890';
-
-  // this test is flakey
  it('must be able to amend the price of an order', () => {
    // 7003-MORD-007
    // 7003-MORD-012
@@ -50,7 +50,7 @@ describe('Portfolio page', { tags: '@smoke' }, () => {
      cy.get('fieldset.ag-simple-filter-body-wrapper')
        .should('be.visible')
        .within((fields) => {
-          cy.wrap(fields).find('label').should('have.length', 18);
+          cy.wrap(fields).find('label').should('have.length', 16);
        });
      cy.getByTestId('"Ledger entries"').click();
      cy.get('fieldset.ag-simple-filter-body-wrapper').should('not.exist');
@@ -10,7 +10,6 @@ describe('trades', { tags: '@smoke' }, () => {
    cy.mockTradingPage();
    cy.mockSubscription();
  });
-
  before(() => {
    cy.mockTradingPage();
    cy.mockSubscription();
@@ -28,50 +27,37 @@ describe('trades', { tags: '@smoke' }, () => {

  it('show trades prices', () => {
    // 6005-THIS-003
-    cy.getByTestId(tradesTable)
-      .get(`${colIdPrice} ${colHeader}`)
-      .first()
-      .should('have.text', 'Price');
-    cy.getByTestId(tradesTable)
-      .get(colIdPrice)
-      .each(($tradePrice) => {
-        cy.wrap($tradePrice).invoke('text').should('not.be.empty');
-      });
+    cy.get(`${colIdPrice} ${colHeader}`).first().should('have.text', 'Price');
+    cy.get(colIdPrice).each(($tradePrice) => {
+      cy.wrap($tradePrice).invoke('text').should('not.be.empty');
+    });
  });

  it('show trades sizes', () => {
    // 6005-THIS-004
-    cy.getByTestId(tradesTable)
-      .get(`${colIdSize} ${colHeader}`)
-      .first()
-      .should('have.text', 'Size');
-    cy.getByTestId(tradesTable)
-      .get(colIdSize)
-      .each(($tradeSize) => {
-        cy.wrap($tradeSize).invoke('text').should('not.be.empty');
-      });
+    cy.get(`${colIdSize} ${colHeader}`).first().should('have.text', 'Size');
+    cy.get(colIdSize).each(($tradeSize) => {
+      cy.wrap($tradeSize).invoke('text').should('not.be.empty');
+    });
  });

-  // This won't pass in CI, but does locally
-  it.skip('show trades date and time', () => {
+  it('show trades date and time', () => {
    // 6005-THIS-005
-    cy.getByTestId(tradesTable) // order table shares identical col id
-      .find(`${colIdCreatedAt} ${colHeader}`)
-      .should('have.text', 'Created at');
+    cy.get(`${colIdCreatedAt} ${colHeader}`).should('have.text', 'Created at');
    const dateTimeRegex =
      /(\d{1,2})\/(\d{1,2})\/(\d{4}), (\d{1,2}):(\d{1,2}):(\d{1,2})/gm;
-    cy.getByTestId(tradesTable)
-      .get(`.ag-center-cols-container ${colIdCreatedAt}`)
-      .each(($tradeDateTime) => {
+    cy.get(colIdCreatedAt).each(($tradeDateTime, index) => {
+      if (index != 0) {
+        //ignore header
        cy.wrap($tradeDateTime).invoke('text').should('match', dateTimeRegex);
-      });
+      }
+    });
  });

  it('trades are sorted descending by datetime', () => {
    // 6005-THIS-006
    const dateTimes: Date[] = [];
-    cy.getByTestId(tradesTable)
-      .find(colIdCreatedAt)
+    cy.get(colIdCreatedAt)
      .each(($tradeDateTime, index) => {
        if (index != 0) {
          //ignore header
@@ -85,15 +71,9 @@ describe('trades', { tags: '@smoke' }, () => {
      });
  });

-  // this passes locally but doesn't in CI
-  it.skip('copy price to deal ticket form', () => {
-    cy.getByTestId('order-type-TYPE_LIMIT').click(); // make sure on limit
+  it('copy price to deal ticket form', () => {
    // 6005-THIS-007
-    cy.getByTestId(tradesTable)
-      .find(colIdPrice)
-      .last()
-      .should('be.visible')
-      .click();
+    cy.get(colIdPrice).last().should('be.visible').click();
    cy.getByTestId('order-price').should('have.value', '171.16898');
  });
 });
@@ -10,7 +10,7 @@ describe('ethereum wallet', { tags: '@smoke', testIsolation: true }, () => {
    cy.mockSubscription();
    cy.setVegaWallet();
    cy.visit('/#/portfolio');
-    cy.get('[data-testid="pathname-/portfolio"]').should('exist');
+    cy.get('main[data-testid="/portfolio"]').should('exist');
    cy.getByTestId('Withdrawals').click();
  });

@@ -17,7 +17,7 @@ describe(
      cy.visit('/#/portfolio');
      cy.mockTradingPage();
      cy.mockSubscription();
-      cy.get('[data-testid="pathname-/portfolio"]').should('exist');
+      cy.get('main[data-testid="/portfolio"]').should('exist');
    });

    it('can connect', () => {
@@ -63,7 +63,7 @@ describe(
      cy.contains('Hosted Fairground wallet');

      cy.getByTestId('connectors-list')
-        .find('[data-testid="connector-rest"]')
+        .find('[data-testid="connector-hosted"]')
        .click();
      cy.getByTestId(form).find('#wallet').click().type('user');
      cy.getByTestId(form).find('#passphrase').click().type('pass');
@@ -89,7 +89,7 @@ describe(
      );
      cy.getByTestId(connectVegaBtn).click();
      cy.getByTestId('connectors-list')
-        .find('[data-testid="connector-rest"]')
+        .find('[data-testid="connector-hosted"]')
        .click();
      cy.getByTestId(form).find('#wallet').click().type('invalid name');
      cy.getByTestId(form).find('#passphrase').click().type('invalid password');
@@ -100,7 +100,7 @@ describe(
    it('doesnt connect with empty fields', () => {
      cy.getByTestId(connectVegaBtn).click();
      cy.getByTestId('connectors-list')
-        .find('[data-testid="connector-rest"]')
+        .find('[data-testid="connector-hosted"]')
        .click();

      cy.getByTestId('rest-connector-form').find('button[type=submit]').click();
@@ -122,7 +122,7 @@ describe('connect vega wallet', { tags: '@smoke', testIsolation: true }, () => {
    cy.visit('/#/portfolio');
    cy.mockTradingPage();
    cy.mockSubscription();
-    cy.get('[data-testid="pathname-/portfolio"]').should('exist');
+    cy.get('main[data-testid="/portfolio"]').should('exist');
  });

  it('can connect', () => {
@@ -1,20 +1,24 @@
 import { selectAsset } from '../support/helpers';
-
+// #region consts
 const amountField = 'input[name="amount"]';
 const amountShortName = 'input[name="amount"] + div + span.text-xs';
 const assetSelection = 'select-asset';
 const assetBalance = 'asset-balance';
 const assetOption = 'rich-select-option';
-const transferText = 'transfer-intro-text';
+const closeDialog = 'dialog-close';
+const dialogTitle = 'dialog-title';
+const dialogTransferText = 'dialog-transfer-text';
+const dropdownMenu = 'dropdown-menu';
 const errorText = 'input-error-text';
 const formFieldError = 'input-error-text';
 const includeTransferFeeRadioBtn = 'include-transfer-fee';
-const keyID = `[data-testid="${transferText}"] > .rounded-md`;
+const keyID = '[data-testid="dialog-transfer-text"] > .rounded-md';
 const manageVegaWallet = 'manage-vega-wallet';
-const openTransferButton = 'open-transfer';
+const openTransferDialog = 'open-transfer-dialog';
 const submitTransferBtn = '[type="submit"]';
 const toAddressField = '[name="toAddress"]';
 const totalTransferfee = 'total-transfer-fee';
+const transfer = 'transfer';
 const transferAmount = 'transfer-amount';
 const transferForm = 'transfer-form';
 const transferFee = 'transfer-fee';
@@ -26,6 +30,7 @@ const ASSET_SEPOLIA_TBTC = 2;
 const collateralTab = 'Collateral';
 const toastCloseBtn = 'toast-close';
 const toastContent = 'toast-content';
+// #endregion

 describe('transfer fees', { tags: '@regression', testIsolation: true }, () => {
  beforeEach(() => {
@@ -34,19 +39,15 @@ describe('transfer fees', { tags: '@regression', testIsolation: true }, () => {
    cy.mockSubscription();
    cy.setVegaWallet();

-    cy.visit('/');
+    cy.visit('/#/portfolio');
+    cy.getByTestId('Trading').first().click();
+    cy.getByTestId(collateralTab).click();
+    cy.getByTestId(dropdownMenu).first().click();
+    cy.getByTestId(transfer).click();

-    cy.wait('@Assets');
    cy.wait('@Accounts');
-
+    cy.wait('@Assets');
    cy.mockVegaWalletTransaction();
-
-    // Only click if not already active otherwise sidebar will close
-    cy.get('[data-testid="sidebar-content"]').then(($sidebarContent) => {
-      if ($sidebarContent.find('h2').text() !== 'Transfer') {
-        cy.get('[data-testid="sidebar"] [data-testid="Transfer"]').click();
-      }
-    });
  });

  it('transfer fees tooltips', () => {
@@ -71,18 +72,21 @@ describe('transfer fees', { tags: '@regression', testIsolation: true }, () => {
    cy.get('[data-side="bottom"] div')
      .should('be.visible')
      .should('not.be.empty');
+    cy.getByTestId(dialogTitle).click();

    //Check Transfer Fee tooltip
    cy.contains('div', 'Transfer fee').realHover();
    cy.get('[data-side="bottom"] div')
      .should('be.visible')
      .should('not.be.empty');
+    cy.getByTestId(dialogTitle).click();

    //Check Amount to be transferred tooltip
    cy.contains('div', 'Amount to be transferred').realHover();
    cy.get('[data-side="bottom"] div')
      .should('be.visible')
      .should('not.be.empty');
+    cy.getByTestId(dialogTitle).click();

    //Check Total amount (with fee) tooltip
    cy.contains('div', 'Total amount (with fee)').realHover();
@@ -130,7 +134,6 @@ describe('transfer fees', { tags: '@regression', testIsolation: true }, () => {
      .should('contain.text', '1.00');
  });
 });
-
 describe(
  'transfer form validation',
  { tags: '@regression', testIsolation: true },
@@ -151,7 +154,7 @@ describe(

    it('transfer Text', () => {
      // 1003-TRAN-003
-      cy.getByTestId(transferText)
+      cy.getByTestId(dialogTransferText)
        .should('exist')
        .get(keyID)
        .invoke('text')
@@ -201,6 +204,7 @@ describe(
        'contain.text',
        'You cannot transfer more than your available collateral'
      );
+      cy.getByTestId(closeDialog).click();
    });
  }
 );
@@ -213,7 +217,7 @@ describe('withdraw actions', { tags: '@smoke', testIsolation: true }, () => {

    cy.visit('/#/portfolio');
    cy.getByTestId(collateralTab).click();
-    cy.getByTestId(openTransferButton).click();
+    cy.getByTestId(openTransferDialog).click();

    cy.wait('@Accounts');
    cy.wait('@Assets');
@@ -21,7 +21,7 @@ describe('withdraw form validation', { tags: '@smoke' }, () => {
    cy.visit('/#/portfolio');
    cy.getByTestId('Withdrawals').click();

-    cy.getByTestId('Withdraw').click(); // sidebar item
+    cy.getByTestId('withdraw-dialog-button').click();

    // It also requires connection Ethereum wallet
    connectEthereumWallet('MetaMask');
@@ -87,17 +87,15 @@ describe(
      cy.setVegaWallet();

      cy.visit('/#/portfolio');
-
-      cy.wait('@Accounts');
-      cy.wait('@Assets');
-
      cy.getByTestId('Withdrawals').click();

-      cy.getByTestId('Withdraw').click();
+      cy.getByTestId('withdraw-dialog-button').click();

      // It also requires connection Ethereum wallet
      connectEthereumWallet('MetaMask');

+      cy.wait('@Accounts');
+      cy.wait('@Assets');
      cy.mockVegaWalletTransaction();
    });

@@ -14,4 +14,4 @@ NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/annou
 NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
 NX_VEGA_CONSOLE_URL=https://console.vega.xyz
 # TAG name of the current app version - TODO: bump to the latest upon release
-NX_APP_VERSION=v0.20.21-core-0.71.6
+NX_APP_VERSION=v0.20.23-core-0.71.6
@@ -3,9 +3,9 @@ NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_SENTRY_DSN=https://2ffce43721964aafa78277c50654ece4@o286262.ingest.sentry.io/6300613
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/mainnet-mirror/vegawallet-mainnet-mirror.toml
-NX_VEGA_ENV=MAINNET_MIRROR
+NX_VEGA_ENV=MAINNET-MIRROR
 NX_VEGA_EXPLORER_URL=https://explorer.mainnet-mirror.vega.rocks
-NX_VEGA_NETWORKS={\"MAINNET\":\"https://console.vega.xyz\",\"TESTNET\":\"https://console.fairground.wtf\",\"STAGNET1\":\"https://trading.stagnet1.vega.rocks\",\"MAINNET_MIRROR\":\"https://trading.mainnet-mirror.vega.rocks\"}
+NX_VEGA_NETWORKS={\"MAINNET\":\"https://console.vega.xyz\",\"TESTNET\":\"https://console.fairground.wtf\",\"STAGNET1\":\"https://trading.stagnet1.vega.rocks\",\"MAINNET-MIRROR\":\"https://trading.mainnet-mirror.vega.rocks\"}
 NX_VEGA_TOKEN_URL=https://governance.mainnet-mirror.vega.rocks
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/mainnet
@@ -1,10 +1,36 @@
-import { matchFilter, lpAggregatedDataProvider } from '@vegaprotocol/liquidity';
+import {
+  matchFilter,
+  lpAggregatedDataProvider,
+  useCheckLiquidityStatus,
+} from '@vegaprotocol/liquidity';
+import { tooltipMapping } from '@vegaprotocol/markets';
+import {
+  addDecimalsFormatNumber,
+  formatNumberPercentage,
+} from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
+import {
+  NetworkParams,
+  useNetworkParams,
+} from '@vegaprotocol/network-parameters';
 import { useDataProvider } from '@vegaprotocol/data-provider';
-import { Tab, Tabs } from '@vegaprotocol/ui-toolkit';
+import {
+  Tab,
+  Tabs,
+  Link as UiToolkitLink,
+  Indicator,
+  ExternalLink,
+} from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import { useEffect, useState } from 'react';
-import { useParams } from 'react-router-dom';
+import { memo, useEffect, useState } from 'react';
+
+import { Header, HeaderStat, HeaderTitle } from '../../components/header';
+
+import { Link, useParams } from 'react-router-dom';
+import { Links, Routes } from '../../pages/client-router';
+
+import { useMarket, useStaticMarketData } from '@vegaprotocol/markets';
+import { DocsLinks } from '@vegaprotocol/environment';
 import { LiquidityContainer } from '../../components/liquidity-container';

 const enum LiquidityTabs {
@@ -19,6 +45,98 @@ export const Liquidity = () => {
  return <LiquidityViewContainer marketId={marketId} />;
 };

+const LiquidityViewHeader = memo(({ marketId }: { marketId?: string }) => {
+  const { data: market } = useMarket(marketId);
+  const { data: marketData } = useStaticMarketData(marketId);
+  const targetStake = marketData?.targetStake;
+  const suppliedStake = marketData?.suppliedStake;
+  const assetDecimalPlaces =
+    market?.tradableInstrument.instrument.product.settlementAsset.decimals || 0;
+  const symbol =
+    market?.tradableInstrument.instrument.product.settlementAsset.symbol;
+
+  const { params } = useNetworkParams([
+    NetworkParams.market_liquidity_stakeToCcyVolume,
+    NetworkParams.market_liquidity_targetstake_triggering_ratio,
+  ]);
+  const triggeringRatio =
+    params.market_liquidity_targetstake_triggering_ratio || '1';
+
+  const { percentage, status } = useCheckLiquidityStatus({
+    suppliedStake: suppliedStake || 0,
+    targetStake: targetStake || 0,
+    triggeringRatio,
+  });
+
+  return (
+    <Header
+      title={
+        market?.tradableInstrument.instrument.name &&
+        market?.tradableInstrument.instrument.code &&
+        marketId && (
+          <HeaderTitle
+            primaryContent={`${market.tradableInstrument.instrument.code} ${t(
+              'liquidity provision'
+            )}`}
+            secondaryContent={
+              <Link to={Links[Routes.MARKET](marketId)}>
+                <UiToolkitLink>{t('Go to trading')}</UiToolkitLink>
+              </Link>
+            }
+          />
+        )
+      }
+    >
+      <HeaderStat
+        heading={t('Target stake')}
+        description={tooltipMapping['targetStake']}
+        testId="target-stake"
+      >
+        <div>
+          {targetStake
+            ? `${addDecimalsFormatNumber(
+                targetStake,
+                assetDecimalPlaces ?? 0
+              )} ${symbol}`
+            : '-'}
+        </div>
+      </HeaderStat>
+      <HeaderStat
+        heading={t('Supplied stake')}
+        description={tooltipMapping['suppliedStake']}
+        testId="supplied-stake"
+      >
+        <div>
+          {suppliedStake
+            ? `${addDecimalsFormatNumber(
+                suppliedStake,
+                assetDecimalPlaces ?? 0
+              )} ${symbol}`
+            : '-'}
+        </div>
+      </HeaderStat>
+      <HeaderStat heading={t('Liquidity supplied')} testId="liquidity-supplied">
+        <Indicator variant={status} />
+
+        {formatNumberPercentage(percentage, 2)}
+      </HeaderStat>
+      <HeaderStat heading={t('Market ID')} testId="liquidity-market-id">
+        <div className="break-word">{marketId}</div>
+      </HeaderStat>
+      <HeaderStat heading={t('Learn more')} testId="liquidity-learn-more">
+        {DocsLinks ? (
+          <ExternalLink href={DocsLinks.LIQUIDITY}>
+            {t('Providing liquidity')}
+          </ExternalLink>
+        ) : (
+          (null as React.ReactNode)
+        )}
+      </HeaderStat>
+    </Header>
+  );
+});
+LiquidityViewHeader.displayName = 'LiquidityViewHeader';
+
 export const LiquidityViewContainer = ({
  marketId,
 }: {
@@ -49,30 +167,26 @@ export const LiquidityViewContainer = ({
  }, [data, pubKey]);

  return (
-    <div className="h-full p-1.5">
-      <div className="h-full border border-default">
-        <Tabs value={tab || LiquidityTabs.Active} onValueChange={setTab}>
-          <Tab
-            id={LiquidityTabs.MyLiquidityProvision}
-            name={t('My liquidity provision')}
-            hidden={!pubKey}
-          >
-            <LiquidityContainer
-              marketId={marketId}
-              filter={{ partyId: pubKey || undefined }}
-            />
-          </Tab>
-          <Tab id={LiquidityTabs.Active} name={t('Active')}>
-            <LiquidityContainer marketId={marketId} filter={{ active: true }} />
-          </Tab>
-          <Tab id={LiquidityTabs.Inactive} name={t('Inactive')}>
-            <LiquidityContainer
-              marketId={marketId}
-              filter={{ active: false }}
-            />
-          </Tab>
-        </Tabs>
-      </div>
+    <div className="h-full grid grid-rows-[min-content_1fr]">
+      <LiquidityViewHeader marketId={marketId} />
+      <Tabs value={tab || LiquidityTabs.Active} onValueChange={setTab}>
+        <Tab
+          id={LiquidityTabs.MyLiquidityProvision}
+          name={t('My liquidity provision')}
+          hidden={!pubKey}
+        >
+          <LiquidityContainer
+            marketId={marketId}
+            filter={{ partyId: pubKey || undefined }}
+          />
+        </Tab>
+        <Tab id={LiquidityTabs.Active} name={t('Active')}>
+          <LiquidityContainer marketId={marketId} filter={{ active: true }} />
+        </Tab>
+        <Tab id={LiquidityTabs.Inactive} name={t('Inactive')}>
+          <LiquidityContainer marketId={marketId} filter={{ active: false }} />
+        </Tab>
+      </Tabs>
    </div>
  );
 };
@@ -19,6 +19,7 @@ describe('AssetDropdown', () => {
        checkedAssets={[]}
        assets={assets}
        onSelect={mockOnSelect}
+        onReset={jest.fn()}
      />
    );
    await userEvent.click(screen.getByRole('button'));
@@ -38,6 +39,7 @@ describe('AssetDropdown', () => {
        checkedAssets={[assets[0].id]}
        assets={assets}
        onSelect={mockOnSelect}
+        onReset={jest.fn()}
      />
    );
    await userEvent.click(screen.getByRole('button'));
@@ -46,9 +48,35 @@ describe('AssetDropdown', () => {
    expect(mockOnSelect).toHaveBeenCalledWith(assets[0].id, false);
  });

+  it('can be reset clearing all assets', async () => {
+    const mockOnSelect = jest.fn();
+    const mockOnReset = jest.fn();
+    render(
+      <AssetDropdown
+        checkedAssets={assets.map((a) => a.id)}
+        assets={assets}
+        onSelect={mockOnSelect}
+        onReset={mockOnReset}
+      />
+    );
+    await userEvent.click(screen.getByRole('button'));
+    const items = screen.getAllByRole('menuitemcheckbox');
+    // all should be checked
+    items.forEach((item) => {
+      expect(item).toBeChecked();
+    });
+    await userEvent.click(screen.getByText('Reset'));
+    expect(mockOnReset).toHaveBeenCalled();
+  });
+
  it('doesnt render if no assets provided', async () => {
    const { container } = render(
-      <AssetDropdown checkedAssets={[]} assets={[]} onSelect={jest.fn()} />
+      <AssetDropdown
+        checkedAssets={[]}
+        assets={[]}
+        onSelect={jest.fn()}
+        onReset={jest.fn()}
+      />
    );
    expect(container).toBeEmptyDOMElement();
  });
@@ -3,22 +3,22 @@ import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
+  DropdownMenuItem,
  DropdownMenuItemIndicator,
  DropdownMenuTrigger,
-  VegaIcon,
-  VegaIconNames,
+  DropdownMenuSeparator,
 } from '@vegaprotocol/ui-toolkit';

-type Assets = Array<{ id: string; symbol: string }>;
-
 export const AssetDropdown = ({
  assets,
  checkedAssets,
  onSelect,
+  onReset,
 }: {
-  assets: Assets | undefined;
+  assets: Array<{ id: string; symbol: string }> | undefined;
  checkedAssets: string[];
  onSelect: (id: string, checked: boolean) => void;
+  onReset: () => void;
 }) => {
  if (!assets?.length) {
    return null;
@@ -28,11 +28,13 @@ export const AssetDropdown = ({
    <DropdownMenu
      trigger={
        <DropdownMenuTrigger data-testid="asset-trigger">
-          <TriggerText assets={assets} checkedAssets={checkedAssets} />
+          <span className="px-1">$</span>
        </DropdownMenuTrigger>
      }
    >
      <DropdownMenuContent>
+        <DropdownMenuItem onClick={onReset}>{t('Reset')}</DropdownMenuItem>
+        <DropdownMenuSeparator />
        {assets?.map((a) => {
          return (
            <DropdownMenuCheckboxItem
@@ -54,27 +56,3 @@ export const AssetDropdown = ({
    </DropdownMenu>
  );
 };
-
-const TriggerText = ({
-  assets,
-  checkedAssets,
-}: {
-  assets: Assets;
-  checkedAssets: string[];
-}) => {
-  let text = t('Assets');
-
-  if (checkedAssets.length === 1) {
-    const assetId = checkedAssets[0];
-    const asset = assets.find((a) => a.id === assetId);
-    text = asset ? asset.symbol : t('Asset (1)');
-  } else if (checkedAssets.length > 1) {
-    text = t(`${checkedAssets.length} Assets`);
-  }
-
-  return (
-    <span className="flex justify-between items-center">
-      {text} <VegaIcon name={VegaIconNames.CHEVRON_DOWN} />
-    </span>
-  );
-};
@@ -5,85 +5,92 @@ import { MarketProposalNotification } from '@vegaprotocol/proposals';
 import type { Market } from '@vegaprotocol/markets';
 import { getExpiryDate, getMarketExpiryDate } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import { Last24hPriceChange, Last24hVolume } from '@vegaprotocol/markets';
-import { MarketState as State } from '@vegaprotocol/types';
 import { HeaderStat } from '../../components/header';
 import { MarketMarkPrice } from '../../components/market-mark-price';
-import { HeaderStatMarketTradingMode } from '../../components/market-trading-mode';
+import { Last24hPriceChange, Last24hVolume } from '@vegaprotocol/markets';
 import { MarketState } from '../../components/market-state';
+import { HeaderStatMarketTradingMode } from '../../components/market-trading-mode';
 import { MarketLiquiditySupplied } from '../../components/liquidity-supplied';
+import { MarketState as State } from '@vegaprotocol/types';

-interface MarketHeaderStatsProps {
+interface HeaderStatsProps {
  market: Market | null;
 }

-export const MarketHeaderStats = ({ market }: MarketHeaderStatsProps) => {
+export const HeaderStats = ({ market }: HeaderStatsProps) => {
  const { VEGA_EXPLORER_URL } = useEnvironment();
  const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();

  const asset = market?.tradableInstrument.instrument.product?.settlementAsset;

  return (
-    <>
-      <HeaderStat
-        heading={t('Expiry')}
-        description={
-          market && (
-            <ExpiryTooltipContent
-              market={market}
-              explorerUrl={VEGA_EXPLORER_URL}
-            />
-          )
-        }
-        testId="market-expiry"
-      >
-        <ExpiryLabel market={market} />
-      </HeaderStat>
-      <HeaderStat heading={t('Price')} testId="market-price">
-        <MarketMarkPrice
-          marketId={market?.id}
-          decimalPlaces={market?.decimalPlaces}
-        />
-      </HeaderStat>
-      <HeaderStat heading={t('Change (24h)')} testId="market-change">
-        <Last24hPriceChange
-          marketId={market?.id}
-          decimalPlaces={market?.decimalPlaces}
-        />
-      </HeaderStat>
-      <HeaderStat heading={t('Volume (24h)')} testId="market-volume">
-        <Last24hVolume
-          marketId={market?.id}
-          positionDecimalPlaces={market?.positionDecimalPlaces}
-        />
-      </HeaderStat>
-      <HeaderStatMarketTradingMode
-        marketId={market?.id}
-        initialTradingMode={market?.tradingMode}
-      />
-      <MarketState market={market} />
-      {asset ? (
-        <HeaderStat
-          heading={t('Settlement asset')}
-          testId="market-settlement-asset"
+    <div className="flex flex-col justify-end lg:pt-4">
+      <div className="xl:flex xl:gap-4 items-end">
+        <div
+          data-testid="header-summary"
+          className="flex flex-nowrap items-end xl:flex-1 w-full overflow-x-auto text-xs"
        >
-          <div>
-            <ButtonLink
-              onClick={(e) => {
-                openAssetDetailsDialog(asset.id, e.target as HTMLElement);
-              }}
+          <HeaderStat
+            heading={t('Expiry')}
+            description={
+              market && (
+                <ExpiryTooltipContent
+                  market={market}
+                  explorerUrl={VEGA_EXPLORER_URL}
+                />
+              )
+            }
+            testId="market-expiry"
+          >
+            <ExpiryLabel market={market} />
+          </HeaderStat>
+          <HeaderStat heading={t('Price')} testId="market-price">
+            <MarketMarkPrice
+              marketId={market?.id}
+              decimalPlaces={market?.decimalPlaces}
+            />
+          </HeaderStat>
+          <HeaderStat heading={t('Change (24h)')} testId="market-change">
+            <Last24hPriceChange
+              marketId={market?.id}
+              decimalPlaces={market?.decimalPlaces}
+            />
+          </HeaderStat>
+          <HeaderStat heading={t('Volume (24h)')} testId="market-volume">
+            <Last24hVolume
+              marketId={market?.id}
+              positionDecimalPlaces={market?.positionDecimalPlaces}
+            />
+          </HeaderStat>
+          <HeaderStatMarketTradingMode
+            marketId={market?.id}
+            initialTradingMode={market?.tradingMode}
+          />
+          <MarketState market={market} />
+          {asset ? (
+            <HeaderStat
+              heading={t('Settlement asset')}
+              testId="market-settlement-asset"
            >
-              {asset.symbol}
-            </ButtonLink>
-          </div>
-        </HeaderStat>
-      ) : null}
-      <MarketLiquiditySupplied
-        marketId={market?.id}
-        assetDecimals={asset?.decimals || 0}
-      />
-      <MarketProposalNotification marketId={market?.id} />
-    </>
+              <div>
+                <ButtonLink
+                  onClick={(e) => {
+                    openAssetDetailsDialog(asset.id, e.target as HTMLElement);
+                  }}
+                >
+                  {asset.symbol}
+                </ButtonLink>
+              </div>
+            </HeaderStat>
+          ) : null}
+          <MarketLiquiditySupplied
+            marketId={market?.id}
+            assetDecimals={asset?.decimals || 0}
+          />
+          <MarketProposalNotification marketId={market?.id} />
+        </div>
+      </div>
+    </div>
  );
 };

@@ -1,4 +1,5 @@
 import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { createMarketFragment } from '@vegaprotocol/mock';
 import { MarketSelectorItem } from './market-selector-item';
 import { MemoryRouter } from 'react-router-dom';
@@ -90,6 +91,8 @@ describe('MarketSelectorItem', () => {
    },
  ];

+  const mockOnSelect = jest.fn();
+
  const renderJsx = (mocks: MockedResponse[]) => {
    return render(
      <MemoryRouter>
@@ -98,6 +101,7 @@ describe('MarketSelectorItem', () => {
            market={market}
            currentMarketId={market.id}
            style={{}}
+            onSelect={mockOnSelect}
          />
        </MockedProvider>
      </MemoryRouter>
@@ -169,7 +173,7 @@ describe('MarketSelectorItem', () => {
    // link renders and is styled
    expect(link).toHaveAttribute('href', '/markets/' + market.id);

-    expect(link).toHaveClass('bg-vega-clight-600');
+    expect(link).toHaveClass('ring-1');

    expect(screen.getByTitle('24h vol')).toHaveTextContent('0.00');
    expect(screen.getByTitle(symbol)).toHaveTextContent('-');
@@ -179,6 +183,13 @@ describe('MarketSelectorItem', () => {
      expect(screen.getByTitle(symbol)).toHaveTextContent(
        addDecimalsFormatNumber(marketData.markPrice, market.decimalPlaces)
      );
+      expect(screen.getByTestId('market-item-change')).toHaveTextContent(
+        '+100.00%'
+      );
    });
+
+    await userEvent.click(link);
+
+    expect(mockOnSelect).toHaveBeenCalledWith(market.id);
  });
 });
@@ -0,0 +1,177 @@
+import type { CSSProperties, ReactNode } from 'react';
+import { Link } from 'react-router-dom';
+import classNames from 'classnames';
+import {
+  addDecimalsFormatNumber,
+  formatNumber,
+  priceChangePercentage,
+} from '@vegaprotocol/utils';
+import type { MarketMaybeWithDataAndCandles } from '@vegaprotocol/markets';
+import { calcCandleVolume } from '@vegaprotocol/markets';
+import { useCandles } from '@vegaprotocol/markets';
+import { useMarketDataUpdateSubscription } from '@vegaprotocol/markets';
+import { Sparkline } from '@vegaprotocol/ui-toolkit';
+import {
+  MarketTradingMode,
+  MarketTradingModeMapping,
+} from '@vegaprotocol/types';
+import { t } from '@vegaprotocol/i18n';
+
+export const MarketSelectorItem = ({
+  market,
+  style,
+  currentMarketId,
+  onSelect,
+}: {
+  market: MarketMaybeWithDataAndCandles;
+  style: CSSProperties;
+  currentMarketId?: string;
+  onSelect?: (marketId: string) => void;
+}) => {
+  const wrapperClasses = classNames(
+    'block bg-vega-light-100 dark:bg-vega-dark-100 rounded-lg p-4',
+    'min-h-[120px]',
+    {
+      'ring-1 ring-vega-light-300 dark:ring-vega-dark-300':
+        currentMarketId === market.id,
+    }
+  );
+  return (
+    <div style={style} className="my-0.5 px-4">
+      <Link
+        to={`/markets/${market.id}`}
+        className={wrapperClasses}
+        onClick={() => {
+          onSelect && onSelect(market.id);
+        }}
+      >
+        <MarketData market={market} />
+      </Link>
+    </div>
+  );
+};
+
+const MarketData = ({ market }: { market: MarketMaybeWithDataAndCandles }) => {
+  const { data } = useMarketDataUpdateSubscription({
+    variables: {
+      marketId: market.id,
+    },
+  });
+
+  const marketData = data?.marketsData[0];
+
+  // use market data price if available as this is comes from
+  // the subscription
+  const price = marketData
+    ? addDecimalsFormatNumber(marketData.markPrice, market.decimalPlaces)
+    : market.data
+    ? addDecimalsFormatNumber(market.data.markPrice, market.decimalPlaces)
+    : '-';
+
+  const marketTradingMode = marketData
+    ? marketData.marketTradingMode
+    : market.tradingMode;
+
+  const mode = [
+    MarketTradingMode.TRADING_MODE_BATCH_AUCTION,
+    MarketTradingMode.TRADING_MODE_MONITORING_AUCTION,
+    MarketTradingMode.TRADING_MODE_OPENING_AUCTION,
+  ].includes(marketTradingMode)
+    ? MarketTradingModeMapping[marketTradingMode]
+    : '';
+
+  const instrument = market.tradableInstrument.instrument;
+  const { oneDayCandles } = useCandles({ marketId: market.id });
+
+  const vol = oneDayCandles ? calcCandleVolume(oneDayCandles) : '0';
+  const volume =
+    vol && vol !== '0'
+      ? addDecimalsFormatNumber(vol, market.positionDecimalPlaces)
+      : '0.00';
+
+  return (
+    <>
+      <div className="flex items-end gap-1 mb-1">
+        <h3
+          className={classNames(
+            'overflow-hidden text-ellipsis whitespace-nowrap',
+            {
+              'w-1/2': mode, // make space for showing the trading mode
+            }
+          )}
+        >
+          {market.tradableInstrument.instrument.code}
+        </h3>
+        {mode && (
+          <p className="w-1/2 text-xs text-right text-vega-orange-500 dark:text-vega-orange-550">
+            {mode}
+          </p>
+        )}
+      </div>
+      <DataRow value={volume} label={t('24h vol')} />
+      <DataRow
+        value={price}
+        label={instrument.product.settlementAsset.symbol}
+      />
+      <div className="relative text-xs p-1">
+        {oneDayCandles && (
+          <PriceChange candles={oneDayCandles.map((c) => c.close)} />
+        )}
+
+        <div
+          // absolute so height is not larger than price change value
+          className="absolute right-0 bottom-0 w-[120px]"
+        >
+          {oneDayCandles && (
+            <Sparkline
+              width={120}
+              height={20}
+              data={oneDayCandles.map((c) => Number(c.close))}
+            />
+          )}
+        </div>
+      </div>
+    </>
+  );
+};
+
+const DataRow = ({
+  value,
+  label,
+}: {
+  value: string | ReactNode;
+  label: string;
+}) => {
+  return (
+    <div
+      className="text-ellipsis whitespace-nowrap overflow-hidden leading-tight"
+      data-testid="market-selector-data-row"
+    >
+      <span title={label} className="text-sm mr-1">
+        {value}
+      </span>
+      <span className="text-xs text-vega-light-300 dark:text-vega-light-300">
+        {label}
+      </span>
+    </div>
+  );
+};
+
+const PriceChange = ({ candles }: { candles: string[] }) => {
+  const priceChange = candles ? priceChangePercentage(candles) : undefined;
+  const priceChangeClasses = classNames('text-xs', {
+    'text-market-red': priceChange && priceChange < 0,
+    'text-market-green-600 dark:text-market-green':
+      priceChange && priceChange > 0,
+  });
+  let prefix = '';
+  if (priceChange && priceChange > 0) {
+    prefix = '+';
+  }
+  const formattedChange = formatNumber(Number(priceChange), 2);
+  return (
+    <div className={priceChangeClasses} data-testid="market-item-change">
+      {priceChange ? `${prefix}${formattedChange}%` : '-'}
+    </div>
+  );
+};
@@ -143,6 +143,7 @@ describe('MarketSelector', () => {
    expect(screen.getAllByTestId(/market-\d/)).toHaveLength(
      activeMarkets.length
    );
+    expect(screen.getByRole('link')).toHaveTextContent('All markets');
  });

  it('filters by product type', async () => {
@@ -240,7 +241,7 @@ describe('MarketSelector', () => {

    await userEvent.click(screen.getByTestId('sort-trigger'));
    const options = screen.getAllByTestId(/sort-item/);
-    expect(options.map((o) => o.textContent?.trim())).toEqual(
+    expect(options.map((o) => o.textContent)).toEqual(
      Object.entries(Sort)
        .filter(([key]) => key !== Sort.None)
        .map(([key]) => SortTypeMapping[key as SortType])
@@ -8,8 +8,10 @@ import {
  VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
 import type { CSSProperties } from 'react';
-import { useCallback, useState, useMemo, useRef } from 'react';
+import { useCallback, useState, useMemo } from 'react';
+import { Link } from 'react-router-dom';
 import { FixedSizeList } from 'react-window';
+import AutoSizer from 'react-virtualized-auto-sizer';
 import { useMarketSelectorList } from './use-market-selector-list';
 import type { ProductType } from './product-selector';
 import { Product, ProductSelector } from './product-selector';
@@ -17,7 +19,6 @@ import { AssetDropdown } from './asset-dropdown';
 import type { SortType } from './sort-dropdown';
 import { Sort, SortDropdown } from './sort-dropdown';
 import { MarketSelectorItem } from './market-selector-item';
-import classNames from 'classnames';

 export type Filter = {
  searchTerm: string;
@@ -47,15 +48,18 @@ export const MarketSelector = ({
  const { markets, data, loading, error } = useMarketSelectorList(filter);

  return (
-    <div data-testid="market-selector">
-      <div className="pt-2 px-2 mb-2 w-[320px] lg:w-[584px]">
+    <div
+      className="grid grid-rows-[min-content_1fr_min-content] h-full"
+      data-testid="market-selector"
+    >
+      <div className="px-4 pt-2 pb-4">
        <ProductSelector
          product={filter.product}
          onSelect={(product) => {
            setFilter((curr) => ({ ...curr, product }));
          }}
        />
-        <div className="text-sm grid grid-cols-[2fr_1fr_1fr] gap-1 ">
+        <div className="text-sm flex gap-1 items-stretch">
          <div className="flex-1">
            <Input
              onChange={(e) =>
@@ -66,7 +70,20 @@ export const MarketSelector = ({
              placeholder={t('Search')}
              data-testid="search-term"
              className="w-full"
-              prependElement={<VegaIcon name={VegaIconNames.SEARCH} />}
+              appendElement={
+                filter.searchTerm.length ? (
+                  <button
+                    onClick={() =>
+                      setFilter((curr) => ({ ...curr, searchTerm: '' }))
+                    }
+                    className="text-vega-light-200 dark:text-vega-dark-200"
+                  >
+                    <VegaIcon name={VegaIconNames.CROSS} />
+                  </button>
+                ) : (
+                  <span />
+                )
+              }
            />
          </div>
          <AssetDropdown
@@ -96,6 +113,7 @@ export const MarketSelector = ({
                return curr;
              });
            }}
+            onReset={() => setFilter((curr) => ({ ...curr, assets: [] }))}
          />
          <SortDropdown
            currentSort={filter.sort}
@@ -110,6 +128,7 @@ export const MarketSelector = ({
                };
              });
            }}
+            onReset={() => setFilter((curr) => ({ ...curr, sort: Sort.None }))}
          />
        </div>
      </div>
@@ -130,6 +149,18 @@ export const MarketSelector = ({
          }
        />
      </div>
+      <div className="px-4 py-2">
+        <span className="inline-block border-b border-black dark:border-white">
+          <Link
+            to={'/markets/all'}
+            data-testid="all-markets-link"
+            className="flex items-center gap-x-2"
+          >
+            {t('All markets')}
+            <VegaIcon name={VegaIconNames.ARROW_RIGHT} />
+          </Link>
+        </span>
+      </div>
    </div>
  );
 };
@@ -150,50 +181,25 @@ const MarketList = ({
  onSelect?: (marketId: string) => void;
  noItems: string;
 }) => {
-  const itemSize = 45;
-  const listRef = useRef<HTMLDivElement | null>(null);
-  const rect = listRef.current?.getBoundingClientRect();
-  // allow virtualized list to grow until it runs out of space
-  const height = rect
-    ? Math.min(data.length * itemSize, window.innerHeight - rect.y)
-    : 400;
-
  if (error) {
    return <div>{error.message}</div>;
  }
-
  return (
-    <TinyScroll>
-      <div
-        className={classNames(
-          'flex gap-2',
-          'bg-vega-clight-700 dark:bg-vega-cdark-700',
-          'p-2 mx-2 border-b border-default text-xs text-secondary'
-        )}
-      >
-        <div className="w-2/5" role="columnheader">
-          {t('Name')}
-        </div>
-        <div className="w-1/5" role="columnheader">
-          {t('Price')}
-        </div>
-        <div className="w-1/5 text-right" role="columnheader">
-          {t('24h volume')}
-        </div>
-        <div className="w-1/5" role="columnheader" />
-      </div>
-      <div ref={listRef}>
-        <List
-          data={data}
-          loading={loading}
-          height={height}
-          itemSize={itemSize}
-          currentMarketId={currentMarketId}
-          onSelect={onSelect}
-          noItems={noItems}
-        />
-      </div>
-    </TinyScroll>
+    <AutoSizer>
+      {({ width, height }) => (
+        <TinyScroll>
+          <List
+            data={data}
+            loading={loading}
+            width={width}
+            height={height}
+            currentMarketId={currentMarketId}
+            onSelect={onSelect}
+            noItems={noItems}
+          />
+        </TinyScroll>
+      )}
+    </AutoSizer>
  );
 };

@@ -216,21 +222,22 @@ const ListItem = ({
    market={data.data[index]}
    currentMarketId={data.currentMarketId}
    style={style}
+    onSelect={data.onSelect}
  />
 );

 const List = ({
  data,
  loading,
+  width,
  height,
-  itemSize,
  onSelect,
  noItems,
  currentMarketId,
 }: ListItemData & {
  loading: boolean;
+  width: number;
  height: number;
-  itemSize: number;
  noItems: string;
 }) => {
  const itemKey = useCallback(
@@ -243,7 +250,7 @@ const List = ({
  );
  if (!data || loading) {
    return (
-      <div style={{ height }}>
+      <div style={{ width, height }}>
        <Skeleton />
        <Skeleton />
      </div>
@@ -252,20 +259,24 @@ const List = ({

  if (!data.length) {
    return (
-      <div style={{ height }} data-testid="no-items">
-        <div className="mx-4 my-2 text-sm">{noItems}</div>
+      <div style={{ width, height }} data-testid="no-items">
+        <div className="mb-2 px-4">
+          <div className="text-sm bg-vega-light-100 dark:bg-vega-dark-100 rounded-lg px-4 py-2">
+            {noItems}
+          </div>
+        </div>
      </div>
    );
  }

  return (
    <FixedSizeList
-      className="vega-scrollbar"
+      className="virtualized-list"
      itemCount={data.length}
      itemData={itemData}
-      itemSize={itemSize}
+      itemSize={130}
      itemKey={itemKey}
-      width="100%"
+      width={width}
      height={height}
    >
      {ListItem}
@@ -2,16 +2,18 @@ import React, { useEffect, useMemo } from 'react';
 import { addDecimalsFormatNumber, titlefy } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import { useScreenDimensions } from '@vegaprotocol/react-helpers';
-import { useThrottledDataProvider } from '@vegaprotocol/data-provider';
+import {
+  useDataProvider,
+  useThrottledDataProvider,
+} from '@vegaprotocol/data-provider';
 import { AsyncRenderer, ExternalLink, Splash } from '@vegaprotocol/ui-toolkit';
-import { marketDataProvider, useMarket } from '@vegaprotocol/markets';
+import { marketProvider, marketDataProvider } from '@vegaprotocol/markets';
 import { useGlobalStore, usePageTitleStore } from '../../stores';
 import { TradeGrid } from './trade-grid';
 import { TradePanels } from './trade-panels';
 import { useNavigate, useParams } from 'react-router-dom';
 import { Links, Routes } from '../../pages/client-router';
 import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
-import { ViewType, useSidebar } from '../../components/sidebar';

 const calculatePrice = (markPrice?: string, decimalPlaces?: number) => {
  return markPrice && decimalPlaces
@@ -59,7 +61,7 @@ const TitleUpdater = ({
 export const MarketPage = () => {
  const { marketId } = useParams();
  const navigate = useNavigate();
-  const { init, view, setView } = useSidebar();
+
  const { screenSize } = useScreenDimensions();
  const largeScreen = ['lg', 'xl', 'xxl', 'xxxl'].includes(screenSize);
  const update = useGlobalStore((store) => store.update);
@@ -67,7 +69,11 @@ export const MarketPage = () => {

  const onSelect = useMarketClickHandler();

-  const { data, error, loading } = useMarket(marketId);
+  const { data, error, loading } = useDataProvider({
+    dataProvider: marketProvider,
+    variables: { marketId: marketId || '' },
+    skip: !marketId,
+  });

  useEffect(() => {
    if (data?.id && data.id !== lastMarketId) {
@@ -75,13 +81,6 @@ export const MarketPage = () => {
    }
  }, [update, lastMarketId, data?.id]);

-  // Make sidebar open on deal ticket by default
-  useEffect(() => {
-    if (init && view === null) {
-      setView({ type: ViewType.Order });
-    }
-  }, [init, view, setView]);
-
  const tradeView = useMemo(() => {
    if (largeScreen) {
      return (
@@ -1,8 +1,4 @@
 import classNames from 'classnames';
-import { Link } from 'react-router-dom';
-import { Routes } from '../../pages/client-router';
-import { t } from '@vegaprotocol/i18n';
-import { VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';

 // Make sure these match the available __typename properties on product
 export const Product = {
@@ -29,12 +25,12 @@ export const ProductSelector = ({
  onSelect: (product: ProductType) => void;
 }) => {
  return (
-    <div className="flex mb-2">
+    <div className="flex gap-3 mb-3">
      {Object.keys(Product).map((t) => {
-        const classes = classNames('px-3 py-1.5 rounded', {
-          'bg-vega-clight-500 dark:bg-vega-cdark-500 text-default':
-            t === product,
-          'text-secondary': t !== product,
+        const classes = classNames('py-1 border-b-2', {
+          'border-vega-yellow text-black dark:text-white': t === product,
+          'border-transparent text-vega-light-300 dark:text-vega-dark-300':
+            t !== product,
        });
        return (
          <button
@@ -49,10 +45,6 @@ export const ProductSelector = ({
          </button>
        );
      })}
-      <Link to={Routes.MARKETS} className="flex items-center gap-2 ml-auto">
-        <span className="underline underline-offset-4">{t('All markets')}</span>
-        <VegaIcon name={VegaIconNames.ARROW_RIGHT} />
-      </Link>
    </div>
  );
 };
@@ -2,10 +2,12 @@ import { t } from '@vegaprotocol/i18n';
 import {
  DropdownMenu,
  DropdownMenuContent,
+  DropdownMenuItem,
  DropdownMenuItemIndicator,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
+  DropdownMenuSeparator,
  VegaIcon,
  VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
@@ -28,32 +30,20 @@ export const SortTypeMapping: {
  [Sort.New]: 'New markets',
 };

-const SortIconMapping: {
-  [key in SortType]: VegaIconNames;
-} = {
-  [Sort.None]: null as unknown as VegaIconNames, // not shown in list
-  [Sort.Gained]: VegaIconNames.TREND_UP,
-  [Sort.Lost]: VegaIconNames.TREND_DOWN,
-  [Sort.New]: VegaIconNames.STAR,
-};
-
 export const SortDropdown = ({
  currentSort,
  onSelect,
+  onReset,
 }: {
  currentSort: SortType;
  onSelect: (sort: SortType) => void;
+  onReset: () => void;
 }) => {
  return (
    <DropdownMenu
      trigger={
        <DropdownMenuTrigger data-testid="sort-trigger">
-          <span className="flex justify-between items-center">
-            {currentSort === SortTypeMapping.None
-              ? t('Sort')
-              : SortTypeMapping[currentSort]}{' '}
-            <VegaIcon name={VegaIconNames.CHEVRON_DOWN} />
-          </span>
+          <VegaIcon name={VegaIconNames.TREND_UP} />
        </DropdownMenuTrigger>
      }
    >
@@ -62,6 +52,8 @@ export const SortDropdown = ({
          value={currentSort}
          onValueChange={(value) => onSelect(value as SortType)}
        >
+          <DropdownMenuItem onClick={onReset}>{t('Reset')}</DropdownMenuItem>
+          <DropdownMenuSeparator />
          {Object.keys(Sort)
            .filter((s) => s !== Sort.None)
            .map((key) => {
@@ -72,10 +64,7 @@ export const SortDropdown = ({
                  value={key}
                  data-testid={`sort-item-${key}`}
                >
-                  <span className="flex gap-2">
-                    <VegaIcon name={SortIconMapping[key as SortType]} />{' '}
-                    {SortTypeMapping[key as SortType]}
-                  </span>
+                  {SortTypeMapping[key as SortType]}
                  <DropdownMenuItemIndicator />
                </DropdownMenuRadioItem>
              );
@@ -1,5 +1,6 @@
-import { memo } from 'react';
+import { memo, useState } from 'react';
 import type { ReactNode } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { LayoutPriority } from 'allotment';
 import classNames from 'classnames';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -8,22 +9,177 @@ import { t } from '@vegaprotocol/i18n';
 import { OracleBanner } from '@vegaprotocol/markets';
 import type { Market } from '@vegaprotocol/markets';
 import { Filter } from '@vegaprotocol/orders';
-import { Tab, LocalStoragePersistTabs as Tabs } from '@vegaprotocol/ui-toolkit';
+import { useScreenDimensions } from '@vegaprotocol/react-helpers';
+import {
+  Tab,
+  LocalStoragePersistTabs as Tabs,
+  VegaIcon,
+  VegaIconNames,
+} from '@vegaprotocol/ui-toolkit';
 import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
 import { VegaWalletContainer } from '../../components/vega-wallet-container';
+import { HeaderTitle } from '../../components/header';
 import {
  ResizableGrid,
  ResizableGridPanel,
  usePaneLayout,
 } from '../../components/resizable-grid';
 import { TradingViews } from './trade-views';
-import { MarketSuccessorBanner } from '../../components/market-banner';
+import { MarketSelector } from './market-selector';
+import { HeaderStats } from './header-stats';
+
 interface TradeGridProps {
  market: Market | null;
  onSelect: (marketId: string, metaKey?: boolean) => void;
  pinnedAsset?: PinnedAsset;
 }

+interface BottomPanelProps {
+  marketId: string;
+  pinnedAsset?: PinnedAsset;
+}
+
+const MarketBottomPanel = memo(
+  ({ marketId, pinnedAsset }: BottomPanelProps) => {
+    const [sizes, handleOnLayoutChange] = usePaneLayout({ id: 'bottom' });
+    const { screenSize } = useScreenDimensions();
+    const onMarketClick = useMarketClickHandler(true);
+
+    return 'xxxl' === screenSize ? (
+      <ResizableGrid
+        proportionalLayout
+        minSize={200}
+        onChange={handleOnLayoutChange}
+      >
+        <ResizableGridPanel
+          priority={LayoutPriority.Low}
+          preferredSize={sizes[0] || '50%'}
+          minSize={50}
+        >
+          <TradeGridChild>
+            <Tabs storageKey="console-trade-grid-bottom-left">
+              <Tab id="open-orders" name={t('Open')}>
+                <VegaWalletContainer>
+                  <TradingViews.orders.component
+                    marketId={marketId}
+                    filter={Filter.Open}
+                  />
+                </VegaWalletContainer>
+              </Tab>
+              <Tab id="closed-orders" name={t('Closed')}>
+                <VegaWalletContainer>
+                  <TradingViews.orders.component
+                    marketId={marketId}
+                    filter={Filter.Closed}
+                  />
+                </VegaWalletContainer>
+              </Tab>
+              <Tab id="rejected-orders" name={t('Rejected')}>
+                <VegaWalletContainer>
+                  <TradingViews.orders.component
+                    marketId={marketId}
+                    filter={Filter.Rejected}
+                  />
+                </VegaWalletContainer>
+              </Tab>
+              <Tab id="orders" name={t('All')}>
+                <VegaWalletContainer>
+                  <TradingViews.orders.component marketId={marketId} />
+                </VegaWalletContainer>
+              </Tab>
+              <Tab id="fills" name={t('Fills')}>
+                <VegaWalletContainer>
+                  <TradingViews.fills.component onMarketClick={onMarketClick} />
+                </VegaWalletContainer>
+              </Tab>
+            </Tabs>
+          </TradeGridChild>
+        </ResizableGridPanel>
+        <ResizableGridPanel
+          priority={LayoutPriority.Low}
+          preferredSize={sizes[1] || '50%'}
+          minSize={50}
+        >
+          <TradeGridChild>
+            <Tabs storageKey="console-trade-grid-bottom-right">
+              <Tab id="positions" name={t('Positions')}>
+                <VegaWalletContainer>
+                  <TradingViews.positions.component
+                    onMarketClick={onMarketClick}
+                  />
+                </VegaWalletContainer>
+              </Tab>
+              <Tab id="accounts" name={t('Collateral')}>
+                <VegaWalletContainer>
+                  <TradingViews.collateral.component
+                    pinnedAsset={pinnedAsset}
+                    onMarketClick={onMarketClick}
+                    hideButtons
+                  />
+                </VegaWalletContainer>
+              </Tab>
+            </Tabs>
+          </TradeGridChild>
+        </ResizableGridPanel>
+      </ResizableGrid>
+    ) : (
+      <TradeGridChild>
+        <Tabs storageKey="console-trade-grid-bottom">
+          <Tab id="positions" name={t('Positions')}>
+            <VegaWalletContainer>
+              <TradingViews.positions.component onMarketClick={onMarketClick} />
+            </VegaWalletContainer>
+          </Tab>
+          <Tab id="open-orders" name={t('Open')}>
+            <VegaWalletContainer>
+              <TradingViews.orders.component
+                marketId={marketId}
+                filter={Filter.Open}
+              />
+            </VegaWalletContainer>
+          </Tab>
+          <Tab id="closed-orders" name={t('Closed')}>
+            <VegaWalletContainer>
+              <TradingViews.orders.component
+                marketId={marketId}
+                filter={Filter.Closed}
+              />
+            </VegaWalletContainer>
+          </Tab>
+          <Tab id="rejected-orders" name={t('Rejected')}>
+            <VegaWalletContainer>
+              <TradingViews.orders.component
+                marketId={marketId}
+                filter={Filter.Rejected}
+              />
+            </VegaWalletContainer>
+          </Tab>
+          <Tab id="orders" name={t('All')}>
+            <VegaWalletContainer>
+              <TradingViews.orders.component marketId={marketId} />
+            </VegaWalletContainer>
+          </Tab>
+          <Tab id="fills" name={t('Fills')}>
+            <VegaWalletContainer>
+              <TradingViews.fills.component onMarketClick={onMarketClick} />
+            </VegaWalletContainer>
+          </Tab>
+          <Tab id="accounts" name={t('Collateral')}>
+            <VegaWalletContainer>
+              <TradingViews.collateral.component
+                pinnedAsset={pinnedAsset}
+                onMarketClick={onMarketClick}
+                hideButtons
+              />
+            </VegaWalletContainer>
+          </Tab>
+        </Tabs>
+      </TradeGridChild>
+    );
+  }
+);
+MarketBottomPanel.displayName = 'MarketBottomPanel';
+
 const MainGrid = memo(
  ({
    marketId,
@@ -32,6 +188,7 @@ const MainGrid = memo(
    marketId: string;
    pinnedAsset?: PinnedAsset;
  }) => {
+    const navigate = useNavigate();
    const [sizes, handleOnLayoutChange] = usePaneLayout({ id: 'top' });
    const [sizesMiddle, handleOnMiddleLayoutChange] = usePaneLayout({
      id: 'middle-1',
@@ -46,6 +203,25 @@ const MainGrid = memo(
            minSize={200}
            onChange={handleOnMiddleLayoutChange}
          >
+            <ResizableGridPanel
+              preferredSize={sizesMiddle[0] || 330}
+              minSize={300}
+            >
+              <TradeGridChild>
+                <Tabs storageKey="console-trade-grid-main-center">
+                  <Tab id="ticket" name={t('Ticket')}>
+                    <TradingViews.ticket.component
+                      marketId={marketId}
+                      onMarketClick={onMarketClick}
+                      onClickCollateral={() => navigate('/portfolio')}
+                    />
+                  </Tab>
+                  <Tab id="info" name={t('Info')}>
+                    <TradingViews.info.component marketId={marketId} />
+                  </Tab>
+                </Tabs>
+              </TradeGridChild>
+            </ResizableGridPanel>
            <ResizableGridPanel
              priority={LayoutPriority.High}
              minSize={200}
@@ -87,63 +263,7 @@ const MainGrid = memo(
          preferredSize={sizes[1] || '25%'}
          minSize={50}
        >
-          <TradeGridChild>
-            <Tabs storageKey="console-trade-grid-bottom">
-              <Tab id="positions" name={t('Positions')}>
-                <VegaWalletContainer>
-                  <TradingViews.positions.component
-                    onMarketClick={onMarketClick}
-                  />
-                </VegaWalletContainer>
-              </Tab>
-              <Tab id="open-orders" name={t('Open')}>
-                <VegaWalletContainer>
-                  <TradingViews.orders.component
-                    marketId={marketId}
-                    filter={Filter.Open}
-                  />
-                </VegaWalletContainer>
-              </Tab>
-              <Tab id="closed-orders" name={t('Closed')}>
-                <VegaWalletContainer>
-                  <TradingViews.orders.component
-                    marketId={marketId}
-                    filter={Filter.Closed}
-                  />
-                </VegaWalletContainer>
-              </Tab>
-              <Tab id="rejected-orders" name={t('Rejected')}>
-                <VegaWalletContainer>
-                  <TradingViews.orders.component
-                    marketId={marketId}
-                    filter={Filter.Rejected}
-                  />
-                </VegaWalletContainer>
-              </Tab>
-              <Tab id="orders" name={t('All')}>
-                <VegaWalletContainer>
-                  <TradingViews.orders.component marketId={marketId} />
-                </VegaWalletContainer>
-              </Tab>
-              <Tab id="fills" name={t('Fills')}>
-                <VegaWalletContainer>
-                  <TradingViews.fills.component
-                    marketId={marketId}
-                    onMarketClick={onMarketClick}
-                  />
-                </VegaWalletContainer>
-              </Tab>
-              <Tab id="accounts" name={t('Collateral')}>
-                <VegaWalletContainer>
-                  <TradingViews.collateral.component
-                    pinnedAsset={pinnedAsset}
-                    onMarketClick={onMarketClick}
-                    hideButtons
-                  />
-                </VegaWalletContainer>
-              </Tab>
-            </Tabs>
-          </TradeGridChild>
+          <MarketBottomPanel marketId={marketId} pinnedAsset={pinnedAsset} />
        </ResizableGridPanel>
      </ResizableGrid>
    );
@@ -152,18 +272,61 @@ const MainGrid = memo(
 MainGrid.displayName = 'MainGrid';

 export const TradeGrid = ({ market, pinnedAsset }: TradeGridProps) => {
+  const [sidebarOpen, setSidebarOpen] = useState(true);
  const wrapperClasses = classNames(
    'h-full grid',
-    'grid-rows-[min-content_1fr]'
+    'grid-rows-[min-content_min-content_1fr]',
+    'grid-cols-[320px_1fr]'
  );
+  const paneWrapperClasses = classNames('min-h-0', {
+    'col-span-2 col-start-1': !sidebarOpen,
+  });

  return (
    <div className={wrapperClasses}>
-      <div>
-        <MarketSuccessorBanner market={market} />
+      <div className="border-b border-r border-default">
+        <div className="h-full flex gap-2 justify-between items-end px-4 pt-1 pb-3">
+          <HeaderTitle
+            primaryContent={market?.tradableInstrument.instrument.code}
+            secondaryContent={market?.tradableInstrument.instrument.name}
+          />
+          <button
+            onClick={() => setSidebarOpen((x) => !x)}
+            className="flex flex-col items-center text-xs w-12"
+            data-testid="sidebar-toggle"
+          >
+            {sidebarOpen ? (
+              <>
+                <VegaIcon name={VegaIconNames.CHEVRON_UP} />
+                <span className="text-vega-light-300 dark:text-vega-dark-300">
+                  {t('Close')}
+                </span>
+              </>
+            ) : (
+              <>
+                <VegaIcon name={VegaIconNames.CHEVRON_DOWN} />
+                <span className="text-vega-light-300 dark:text-vega-dark-300">
+                  {t('Markets')}
+                </span>
+              </>
+            )}
+          </button>
+        </div>
+      </div>
+      <div className="border-b border-default min-w-0">
+        <HeaderStats market={market} />
+      </div>
+      <div className="col-span-2">
        <OracleBanner marketId={market?.id || ''} />
      </div>
-      <div className="min-h-0 p-0.5">
+      {sidebarOpen && (
+        <div className="border-r border-default min-h-0">
+          <div className="h-full pb-8">
+            <MarketSelector currentMarketId={market?.id} />
+          </div>
+        </div>
+      )}
+      <div className={paneWrapperClasses}>
        <MainGrid marketId={market?.id || ''} pinnedAsset={pinnedAsset} />
      </div>
    </div>
@@ -176,16 +339,9 @@ interface TradeGridChildProps {

 const TradeGridChild = ({ children }: TradeGridChildProps) => {
  return (
-    <section className="h-full p-1">
+    <section className="h-full">
      <AutoSizer>
-        {({ width, height }) => (
-          <div
-            style={{ width, height }}
-            className="border border-default rounded-sm"
-          >
-            {children}
-          </div>
-        )}
+        {({ width, height }) => <div style={{ width, height }}>{children}</div>}
      </AutoSizer>
    </section>
  );
@@ -8,11 +8,19 @@ import {
 import type { TradingView } from './trade-views';
 import { TradingViews } from './trade-views';
 import { memo, useState } from 'react';
-import { Splash } from '@vegaprotocol/ui-toolkit';
+import {
+  Icon,
+  Splash,
+  VegaIcon,
+  VegaIconNames,
+} from '@vegaprotocol/ui-toolkit';
 import { NO_MARKET } from './constants';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import classNames from 'classnames';
-import { MarketSuccessorBanner } from '../../components/market-banner';
+import { HeaderStats } from './header-stats';
+import * as DialogPrimitives from '@radix-ui/react-dialog';
+import { HeaderTitle } from '../../components/header';
+import { MarketSelector } from './market-selector';

 interface TradePanelsProps {
  market: Market | null;
@@ -29,6 +37,7 @@ export const TradePanels = ({
  onClickCollateral,
  pinnedAsset,
 }: TradePanelsProps) => {
+  const [drawerOpen, setDrawerOpen] = useState(false);
  const onMarketClick = useMarketClickHandler(true);
  const onOrderTypeClick = useMarketLiquidityClickHandler();

@@ -62,9 +71,27 @@ export const TradePanels = ({
  };

  return (
-    <div className="h-full grid grid-rows-[min-content_1fr_min-content]">
+    <div className="h-full grid grid-rows-[min-content_min-content_1fr_min-content]">
+      <div className="border-b border-default min-w-0">
+        <div className="flex gap-4 items-center px-4 py-2">
+          <HeaderTitle
+            primaryContent={market?.tradableInstrument.instrument.code}
+            secondaryContent={market?.tradableInstrument.instrument.name}
+          />
+          <button onClick={() => setDrawerOpen((x) => !x)} className="p-2">
+            <span
+              className={classNames('block', {
+                'rotate-90 translate-x-1': !drawerOpen,
+                '-rotate-90 -translate-x-1': drawerOpen,
+              })}
+            >
+              <VegaIcon name={VegaIconNames.CHEVRON_UP} />
+            </span>
+          </button>
+        </div>
+        <HeaderStats market={market} />
+      </div>
      <div>
-        <MarketSuccessorBanner market={market} />
        <OracleBanner marketId={market?.id || ''} />
      </div>
      <div className="h-full">
@@ -80,7 +107,8 @@ export const TradePanels = ({
        {Object.keys(TradingViews).map((key) => {
          const isActive = view === key;
          const className = classNames('p-4 min-w-[100px] capitalize', {
-            'bg-vega-clight-500 dark:bg-vega-cdark-500': isActive,
+            'text-black dark:text-vega-yellow': isActive,
+            'bg-neutral-200 dark:bg-neutral-800': isActive,
          });
          return (
            <button
@@ -94,6 +122,25 @@ export const TradePanels = ({
          );
        })}
      </div>
+      <DialogPrimitives.Root open={drawerOpen} onOpenChange={setDrawerOpen}>
+        <DialogPrimitives.Portal>
+          <DialogPrimitives.Overlay />
+          <DialogPrimitives.Content
+            className={classNames(
+              'fixed h-full max-w-[500px] w-[90vw] z-10 top-0 left-0 transition-transform',
+              'bg-white dark:bg-black',
+              'border-r border-default'
+            )}
+          >
+            <DialogPrimitives.Close className="absolute top-0 right-0 p-2">
+              <Icon name="cross" />
+            </DialogPrimitives.Close>
+            {drawerOpen && (
+              <MarketSelector onSelect={() => setDrawerOpen(false)} />
+            )}
+          </DialogPrimitives.Content>
+        </DialogPrimitives.Portal>
+      </DialogPrimitives.Root>
    </div>
  );
 };
@@ -1,11 +1,13 @@
 import type { ComponentProps } from 'react';
 import { Splash } from '@vegaprotocol/ui-toolkit';
+import { DealTicketContainer } from '@vegaprotocol/deal-ticket';
+import { MarketInfoAccordionContainer } from '@vegaprotocol/markets';
 import { TradesContainer } from '@vegaprotocol/trades';
 import { DepthChartContainer } from '@vegaprotocol/market-depth';
 import { CandlesChartContainer } from '@vegaprotocol/candles-chart';
+import { OrderbookContainer } from '@vegaprotocol/market-depth';
 import { Filter } from '@vegaprotocol/orders';
 import { NO_MARKET } from './constants';
-import { OrderbookContainer } from '../../components/orderbook-container';
 import { FillsContainer } from '../../components/fills-container';
 import { PositionsContainer } from '../../components/positions-container';
 import { AccountsContainer } from '../../components/accounts-container';
@@ -16,6 +18,8 @@ import { OrdersContainer } from '../../components/orders-container';
 type MarketDependantView =
  | typeof CandlesChartContainer
  | typeof DepthChartContainer
+  | typeof DealTicketContainer
+  | typeof MarketInfoAccordionContainer
  | typeof OrderbookContainer
  | typeof TradesContainer;

@@ -43,6 +47,14 @@ export const TradingViews = {
    label: 'Liquidity',
    component: requiresMarket(LiquidityContainer),
  },
+  ticket: {
+    label: 'Ticket',
+    component: requiresMarket(DealTicketContainer),
+  },
+  info: {
+    label: 'Info',
+    component: requiresMarket(MarketInfoAccordionContainer),
+  },
  orderbook: {
    label: 'Orderbook',
    component: requiresMarket(OrderbookContainer),
@@ -4,12 +4,12 @@ import {
  isMarketActive,
  useMarketSelectorList,
 } from './use-market-selector-list';
-import { Product } from '../../components/market-selector/product-selector';
+import { Product } from './product-selector';
 import { Sort } from './sort-dropdown';
 import { createMarketFragment } from '@vegaprotocol/mock';
 import { MarketState } from '@vegaprotocol/types';
 import { useMarketList } from '@vegaprotocol/markets';
-import type { Filter } from '../../components/market-selector';
+import type { Filter } from './market-selector';
 import { subDays } from 'date-fns';

 jest.mock('@vegaprotocol/markets');
@@ -3,7 +3,7 @@ import orderBy from 'lodash/orderBy';
 import { MarketState } from '@vegaprotocol/types';
 import { calcCandleVolume, useMarketList } from '@vegaprotocol/markets';
 import { priceChangePercentage } from '@vegaprotocol/utils';
-import type { Filter } from '../../components/market-selector/market-selector';
+import type { Filter } from './market-selector';
 import { Sort } from './sort-dropdown';

 // Used for sort order and filter
@@ -1,7 +1,7 @@
-import { act, render, screen, within, waitFor } from '@testing-library/react';
-import { MemoryRouter } from 'react-router-dom';
+import { act, render, screen, within } from '@testing-library/react';
 import { Closed } from './closed';
 import { MarketStateMapping, PropertyKeyType } from '@vegaprotocol/types';
+import { PositionStatus } from '@vegaprotocol/types';
 import { MarketState } from '@vegaprotocol/types';
 import { subDays } from 'date-fns';
 import type { MockedResponse } from '@apollo/client/testing';
@@ -18,6 +18,11 @@ import {
 } from '@vegaprotocol/markets';
 import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
 import { VegaWalletContext } from '@vegaprotocol/wallet';
+import type {
+  PositionsQuery,
+  PositionFieldsFragment,
+} from '@vegaprotocol/positions';
+import { PositionsDocument } from '@vegaprotocol/positions';
 import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
 import {
  createMarketFragment,
@@ -155,6 +160,45 @@ describe('Closed', () => {
    },
  };

+  // Create mock position
+  const createPosition = (): PositionFieldsFragment => {
+    return {
+      __typename: 'Position' as const,
+      realisedPNL: '1000',
+      unrealisedPNL: '2000',
+      openVolume: '3000',
+      averageEntryPrice: '100',
+      updatedAt: new Date().toISOString(),
+      positionStatus: PositionStatus.POSITION_STATUS_UNSPECIFIED,
+      lossSocializationAmount: '1000',
+      market: {
+        __typename: 'Market',
+        id: marketId,
+      },
+      party: {
+        __typename: 'Party',
+        id: pubKey,
+      },
+    };
+  };
+  const position = createPosition();
+  const positionsMock: MockedResponse<PositionsQuery> = {
+    request: {
+      query: PositionsDocument,
+      variables: {
+        partyIds: [pubKey],
+      },
+    },
+    result: {
+      data: {
+        positions: {
+          __typename: 'PositionConnection',
+          edges: [{ __typename: 'PositionEdge', node: position }],
+        },
+      },
+    },
+  };
+
  beforeAll(() => {
    originalNow = Date.now;
    Date.now = jest.fn().mockReturnValue(mockNowTimestamp);
@@ -167,17 +211,15 @@ describe('Closed', () => {
  it('renders correctly formatted and filtered rows', async () => {
    await act(async () => {
      render(
-        <MemoryRouter>
-          <MockedProvider
-            mocks={[marketsMock, marketsDataMock, oracleDataMock]}
+        <MockedProvider
+          mocks={[marketsMock, marketsDataMock, positionsMock, oracleDataMock]}
+        >
+          <VegaWalletContext.Provider
+            value={{ pubKey } as VegaWalletContextShape}
          >
-            <VegaWalletContext.Provider
-              value={{ pubKey } as VegaWalletContextShape}
-            >
-              <Closed />
-            </VegaWalletContext.Provider>
-          </MockedProvider>
-        </MemoryRouter>
+            <Closed />
+          </VegaWalletContext.Provider>
+        </MockedProvider>
      );
    });
    // screen.debug(document, Infinity);
@@ -188,11 +230,11 @@ describe('Closed', () => {
      'Description',
      'Status',
      'Settlement date',
-      'Successor market',
      'Best bid',
      'Best offer',
      'Mark price',
      'Settlement price',
+      'Realised PNL',
      'Settlement asset',
      '', // actions row
    ];
@@ -205,7 +247,6 @@ describe('Closed', () => {
      market.tradableInstrument.instrument.name,
      MarketStateMapping[market.state],
      '3 days ago',
-      '-',
      /* eslint-disable @typescript-eslint/no-non-null-assertion */
      addDecimalsFormatNumber(marketsData.bestBidPrice, market.decimalPlaces),
      addDecimalsFormatNumber(
@@ -215,6 +256,7 @@ describe('Closed', () => {
      addDecimalsFormatNumber(marketsData!.markPrice, market.decimalPlaces),
      /* eslint-enable @typescript-eslint/no-non-null-assertion */
      addDecimalsFormatNumber(property.value, market.decimalPlaces),
+      addDecimalsFormatNumber(position.realisedPNL, market.decimalPlaces),
      market.tradableInstrument.instrument.product.settlementAsset.symbol,
      '', // actions row
    ];
@@ -273,17 +315,20 @@ describe('Closed', () => {
    };
    await act(async () => {
      render(
-        <MemoryRouter>
-          <MockedProvider
-            mocks={[mixedMarketsMock, marketsDataMock, oracleDataMock]}
+        <MockedProvider
+          mocks={[
+            mixedMarketsMock,
+            marketsDataMock,
+            positionsMock,
+            oracleDataMock,
+          ]}
+        >
+          <VegaWalletContext.Provider
+            value={{ pubKey } as VegaWalletContextShape}
          >
-            <VegaWalletContext.Provider
-              value={{ pubKey } as VegaWalletContextShape}
-            >
-              <Closed />
-            </VegaWalletContext.Provider>
-          </MockedProvider>
-        </MemoryRouter>
+            <Closed />
+          </VegaWalletContext.Provider>
+        </MockedProvider>
      );
    });

@@ -314,69 +359,4 @@ describe('Closed', () => {
      });
    expect(cells).toEqual(expectedRows.map((m) => m.node.id));
  });
-
-  it('successor marked should be visible', async () => {
-    const mixedMarkets = [
-      {
-        __typename: 'MarketEdge' as const,
-        node: createMarketFragment({
-          id: 'include-0',
-          state: MarketState.STATE_SETTLED,
-          successorMarketID: 'successorMarketID',
-        }),
-      },
-      {
-        __typename: 'MarketEdge' as const,
-        node: {
-          ...createMarketFragment({
-            id: 'successorMarketID',
-            state: MarketState.STATE_ACTIVE,
-          }),
-          tradableInstrument: {
-            ...createMarketFragment().tradableInstrument,
-            instrument: {
-              ...createMarketFragment().tradableInstrument.instrument,
-              id: 'successorAssset',
-              name: 'Successor Market Name',
-              code: 'SuccessorCode',
-            },
-          },
-        },
-      },
-    ];
-
-    const mixedMarketsMock: MockedResponse<MarketsQuery> = {
-      request: {
-        query: MarketsDocument,
-      },
-      result: {
-        data: {
-          marketsConnection: {
-            __typename: 'MarketConnection',
-            edges: mixedMarkets,
-          },
-        },
-      },
-    };
-
-    render(
-      <MemoryRouter>
-        <MockedProvider
-          mocks={[mixedMarketsMock, marketsDataMock, oracleDataMock]}
-        >
-          <VegaWalletContext.Provider
-            value={{ pubKey } as VegaWalletContextShape}
-          >
-            <Closed />
-          </VegaWalletContext.Provider>
-        </MockedProvider>
-      </MemoryRouter>
-    );
-
-    await waitFor(() => {
-      expect(
-        screen.getByRole('button', { name: 'SuccessorCode' })
-      ).toBeInTheDocument();
-    });
-  });
 });
@@ -4,11 +4,7 @@ import type {
  VegaICellRendererParams,
  VegaValueFormatterParams,
 } from '@vegaprotocol/datagrid';
-import {
-  AgGridLazy as AgGrid,
-  COL_DEFS,
-  MarketNameCell,
-} from '@vegaprotocol/datagrid';
+import { AgGridLazy as AgGrid, COL_DEFS } from '@vegaprotocol/datagrid';
 import { useMemo } from 'react';
 import { t } from '@vegaprotocol/i18n';
 import { MarketState, MarketStateMapping } from '@vegaprotocol/types';
@@ -16,6 +12,7 @@ import {
  addDecimalsFormatNumber,
  getMarketExpiryDate,
 } from '@vegaprotocol/utils';
+import { usePositionsQuery } from '@vegaprotocol/positions';
 import type {
  DataSourceFilterFragment,
  MarketMaybeWithData,
@@ -23,14 +20,13 @@ import type {
 import {
  MarketActionsDropdown,
  closedMarketsWithDataProvider,
-  marketProvider,
 } from '@vegaprotocol/markets';
+import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
 import type { ColDef } from 'ag-grid-community';
 import { SettlementDateCell } from './settlement-date-cell';
 import { SettlementPriceCell } from './settlement-price-cell';
 import { useDataProvider } from '@vegaprotocol/data-provider';
-import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';

 type SettlementAsset =
  MarketMaybeWithData['tradableInstrument']['instrument']['product']['settlementAsset'];
@@ -51,18 +47,33 @@ interface Row {
  setlementDataSourceFilter: DataSourceFilterFragment | undefined;
  tradingTerminationOracleId: string;
  settlementAsset: SettlementAsset;
-  successorMarketID: string | undefined | null;
+  realisedPNL: string | undefined;
 }

 export const Closed = () => {
-  const { data: marketData, error } = useDataProvider({
+  const { pubKey } = useVegaWallet();
+  const {
+    data: marketData,
+    error,
+    reload,
+  } = useDataProvider({
    dataProvider: closedMarketsWithDataProvider,
    variables: undefined,
  });
+  const { data: positionData } = usePositionsQuery({
+    variables: {
+      partyIds: pubKey ? [pubKey] : [],
+    },
+    skip: !pubKey,
+  });

  // find a position for each market and add the realised pnl to
  // a normalized object
  const rowData = compact(marketData).map((market) => {
+    const position = positionData?.positions?.edges?.find((edge) => {
+      return edge.node.market.id === market.id;
+    });
+
    const instrument = market.tradableInstrument.instrument;

    const spec =
@@ -97,46 +108,26 @@ export const Closed = () => {
      tradingTerminationOracleId:
        instrument.product.dataSourceSpecForTradingTermination.id,
      settlementAsset: instrument.product.settlementAsset,
-      successorMarketID: market.successorMarketID,
+      realisedPNL: position?.node.realisedPNL,
    };

    return row;
  });
  return (
    <div className="h-full relative">
-      <ClosedMarketsDataGrid rowData={rowData} error={error} />
+      <ClosedMarketsDataGrid rowData={rowData} error={error} reload={reload} />
    </div>
  );
 };

-export const SuccessorMarketRenderer = ({
-  value,
-}: VegaICellRendererParams<Row, 'successorMarketID'>) => {
-  const { data } = useDataProvider({
-    dataProvider: marketProvider,
-    variables: {
-      marketId: value || '',
-    },
-    skip: !value,
-  });
-  const onMarketClick = useMarketClickHandler();
-  return data ? (
-    <MarketNameCell
-      value={data.tradableInstrument.instrument.code}
-      data={data}
-      onMarketClick={onMarketClick}
-    />
-  ) : (
-    ' - '
-  );
-};
-
 const ClosedMarketsDataGrid = ({
  rowData,
  error,
+  reload,
 }: {
  rowData: Row[];
  error: Error | undefined;
+  reload: () => void;
 }) => {
  const openAssetDialog = useAssetDetailsDialogStore((store) => store.open);
  const colDefs = useMemo(() => {
@@ -208,11 +199,6 @@ const ClosedMarketsDataGrid = ({
          },
        },
      },
-      {
-        headerName: t('Successor market'),
-        field: 'successorMarketID',
-        cellRenderer: 'SuccessorMarketRenderer',
-      },
      {
        headerName: t('Best bid'),
        field: 'bestBidPrice',
@@ -268,11 +254,25 @@ const ClosedMarketsDataGrid = ({
          />
        ),
      },
+      {
+        headerName: t('Realised PNL'),
+        field: 'realisedPNL',
+        cellClass: 'font-mono ag-right-aligned-cell',
+        type: 'numericColumn',
+        valueFormatter: ({
+          value,
+          data,
+        }: VegaValueFormatterParams<Row, 'realisedPNL'>) => {
+          if (!value || !data) return '-';
+          return addDecimalsFormatNumber(value, data.decimalPlaces);
+        },
+      },
      {
        headerName: t('Settlement asset'),
        field: 'settlementAsset',
        cellRenderer: ({
          value,
+          data,
        }: VegaValueFormatterParams<Row, 'settlementAsset'>) => (
          <button
            className="underline"
@@ -311,9 +311,7 @@ const ClosedMarketsDataGrid = ({
      defaultColDef={{
        resizable: true,
        minWidth: 100,
-        flex: 1,
      }}
-      components={{ SuccessorMarketRenderer }}
      overlayNoRowsTemplate={error ? error.message : t('No markets')}
    />
  );
@@ -15,20 +15,16 @@ export const MarketsPage = () => {
    updateTitle(titlefy(['Markets']));
  }, [updateTitle]);
  return (
-    <div className="h-full pt-0.5 pb-3 px-1.5">
-      <div className="h-full my-1 border border-default rounded-sm">
-        <Tabs storageKey="console-markets">
-          <Tab id="all-markets" name={t('All markets')}>
-            <Markets />
-          </Tab>
-          <Tab id="proposed-markets" name={t('Proposed markets')}>
-            <Proposed />
-          </Tab>
-          <Tab id="closed-markets" name={t('Closed markets')}>
-            <Closed />
-          </Tab>
-        </Tabs>
-      </div>
-    </div>
+    <Tabs storageKey="console-markets">
+      <Tab id="all-markets" name={t('All markets')}>
+        <Markets />
+      </Tab>
+      <Tab id="proposed-markets" name={t('Proposed markets')}>
+        <Proposed />
+      </Tab>
+      <Tab id="closed-markets" name={t('Closed markets')}>
+        <Closed />
+      </Tab>
+    </Tabs>
  );
 };
@@ -1,12 +1,11 @@
 import { Button } from '@vegaprotocol/ui-toolkit';
-import { DepositsTable } from '@vegaprotocol/deposits';
+import { useDepositDialog, DepositsTable } from '@vegaprotocol/deposits';
 import { depositsProvider } from '@vegaprotocol/deposits';
 import { t } from '@vegaprotocol/i18n';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useRef } from 'react';
 import type { AgGridReact } from 'ag-grid-react';
-import { useSidebar, ViewType } from '../../components/sidebar';

 export const DepositsContainer = () => {
  const gridRef = useRef<AgGridReact | null>(null);
@@ -16,7 +15,7 @@ export const DepositsContainer = () => {
    variables: { partyId: pubKey || '' },
    skip: !pubKey,
  });
-  const setView = useSidebar((store) => store.setView);
+  const openDepositDialog = useDepositDialog((state) => state.open);
  return (
    <div className="h-full">
      <DepositsTable
@@ -25,11 +24,11 @@ export const DepositsContainer = () => {
        overlayNoRowsTemplate={error ? error.message : t('No deposits')}
      />
      {!isReadOnly && (
-        <div className="h-auto flex justify-end p-2 bottom-0 right-0 absolute dark:bg-black/75 bg-white/75 rounded">
+        <div className="h-auto flex justify-end px-[11px] py-2 bottom-0 right-3 absolute dark:bg-black/75 bg-white/75 rounded">
          <Button
            variant="primary"
            size="sm"
-            onClick={() => setView({ type: ViewType.Deposit })}
+            onClick={() => openDepositDialog()}
            data-testid="deposit-button"
          >
            {t('Deposit')}
@@ -21,7 +21,6 @@ import {
  ResizableGridPanel,
  usePaneLayout,
 } from '../../components/resizable-grid';
-import { ViewType, useSidebar } from '../../components/sidebar';

 const WithdrawalsIndicator = () => {
  const { ready } = useIncompleteWithdrawals();
@@ -29,14 +28,13 @@ const WithdrawalsIndicator = () => {
    return null;
  }
  return (
-    <span className="bg-vega-clight-500 dark:bg-vega-cdark-500 text-default rounded p-1 leading-none">
+    <span className="bg-vega-blue-450 text-white text-[10px] rounded p-[3px] pb-[2px] leading-none">
      {ready.length}
    </span>
  );
 };

 export const Portfolio = () => {
-  const { init, view, setView } = useSidebar();
  const { updateTitle } = usePageTitleStore((store) => ({
    updateTitle: store.updateTitle,
  }));
@@ -45,16 +43,9 @@ export const Portfolio = () => {
    updateTitle(titlefy([t('Portfolio')]));
  }, [updateTitle]);

-  // Make transfer sidebar open by default
-  useEffect(() => {
-    if (init && view === null) {
-      setView({ type: ViewType.Transfer });
-    }
-  }, [init, view, setView]);
-
  const onMarketClick = useMarketClickHandler(true);
  const [sizes, handleOnLayoutChange] = usePaneLayout({ id: 'portfolio' });
-  const wrapperClasses = 'p-0.5 h-full max-h-full flex flex-col';
+  const wrapperClasses = 'h-full max-h-full flex flex-col';
  return (
    <div className={wrapperClasses}>
      <ResizableGrid vertical onChange={handleOnLayoutChange}>
@@ -127,8 +118,8 @@ interface PortfolioGridChildProps {

 const PortfolioGridChild = ({ children }: PortfolioGridChildProps) => {
  return (
-    <section className="h-full p-1">
-      <div className="border border-default h-full rounded-sm">{children}</div>
+    <section className="bg-white dark:bg-black w-full h-full">
+      {children}
    </section>
  );
 };
@@ -1,6 +1,7 @@
 import { Button } from '@vegaprotocol/ui-toolkit';
 import {
  withdrawalProvider,
+  useWithdrawalDialog,
  WithdrawalsTable,
  useIncompleteWithdrawals,
 } from '@vegaprotocol/withdraws';
@@ -8,7 +9,6 @@ import { useVegaWallet } from '@vegaprotocol/wallet';
 import { t } from '@vegaprotocol/i18n';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { VegaWalletContainer } from '../../components/vega-wallet-container';
-import { ViewType, useSidebar } from '../../components/sidebar';

 export const WithdrawalsContainer = () => {
  const { pubKey, isReadOnly } = useVegaWallet();
@@ -17,7 +17,7 @@ export const WithdrawalsContainer = () => {
    variables: { partyId: pubKey || '' },
    skip: !pubKey,
  });
-  const setView = useSidebar((store) => store.setView);
+  const openWithdrawDialog = useWithdrawalDialog((state) => state.open);
  const { ready, delayed } = useIncompleteWithdrawals();

  return (
@@ -32,11 +32,11 @@ export const WithdrawalsContainer = () => {
        />
      </div>
      {!isReadOnly && (
-        <div className="h-auto flex justify-end p-2 bottom-0 right-0 absolute dark:bg-black/75 bg-white/75 rounded">
+        <div className="h-auto flex justify-end px-[11px] py-2 bottom-0 right-3 absolute dark:bg-black/75 bg-white/75 rounded">
          <Button
            variant="primary"
            size="sm"
-            onClick={() => setView({ type: ViewType.Withdraw })}
+            onClick={() => openWithdrawDialog()}
            data-testid="withdraw-dialog-button"
          >
            {t('Make withdrawal')}
@@ -0,0 +1,2 @@
+export { Settings as default } from './settings';
+export { SettingsButton } from './settings-button';
@@ -0,0 +1,16 @@
+import { Icon, NavigationLink } from '@vegaprotocol/ui-toolkit';
+import { t } from '@vegaprotocol/i18n';
+import { Links, Routes } from '../../pages/client-router';
+import { IconNames } from '@blueprintjs/icons';
+
+export const SettingsButton = ({ withMobile }: { withMobile?: boolean }) => {
+  return (
+    <NavigationLink data-testid="Settings" to={Links[Routes.SETTINGS]()}>
+      {withMobile ? (
+        t('Settings')
+      ) : (
+        <Icon name={IconNames.COG} className="!align-middle" />
+      )}
+    </NavigationLink>
+  );
+};
@@ -0,0 +1,52 @@
+import { t } from '@vegaprotocol/i18n';
+import { TelemetryApproval } from '../../components/welcome-dialog/telemetry-approval';
+import {
+  Divider,
+  RoundedWrapper,
+  Switch,
+  ThemeSwitcher,
+  ToastPositionSetter,
+} from '@vegaprotocol/ui-toolkit';
+import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
+
+export const Settings = () => {
+  const { theme, setTheme } = useThemeSwitcher();
+  const text = t(theme === 'dark' ? 'Light mode' : 'Dark mode');
+  return (
+    <div className="py-16 px-8 flex w-full justify-center">
+      <div className="lg:min-w-[700px] min-w-[300px]">
+        <h1 className="text-4xl xl:text-5xl uppercase font-alpha calt">
+          {t('Settings')}
+        </h1>
+        <div className="mt-8 text-base text-neutral-500 dark:text-neutral-400">
+          {t('Changes are applied automatically.')}
+        </div>
+        <div className="mt-10 w-full">
+          <RoundedWrapper paddingBottom>
+            <div className="flex justify-between py-3">
+              <div className="flex shrink">
+                <ThemeSwitcher />
+                <label htmlFor="theme-switcher" className="self-center text-lg">
+                  {text}
+                </label>
+              </div>
+              <Switch
+                name="settings-theme-switch"
+                onCheckedChange={() => setTheme()}
+                checked={theme === 'dark'}
+              />
+            </div>
+            <Divider />
+            <TelemetryApproval
+              helpText={t(
+                'Help identify bugs and improve the service by sharing anonymous usage data.'
+              )}
+            />
+            <Divider />
+            <ToastPositionSetter />
+          </RoundedWrapper>
+        </div>
+      </div>
+    </div>
+  );
+};
@@ -1,17 +1,18 @@
 import { useCallback } from 'react';
 import { Button } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
+import { useWithdrawalDialog } from '@vegaprotocol/withdraws';
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import type { PinnedAsset } from '@vegaprotocol/accounts';
-import { AccountManager } from '@vegaprotocol/accounts';
+import { AccountManager, useTransferDialog } from '@vegaprotocol/accounts';
+import { useDepositDialog } from '@vegaprotocol/deposits';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { useDataGridEvents } from '@vegaprotocol/datagrid';
 import type { DataGridSlice } from '../../stores/datagrid-store-slice';
 import { createDataGridSlice } from '../../stores/datagrid-store-slice';
-import { ViewType, useSidebar } from '../sidebar';

 export const AccountsContainer = ({
  pinnedAsset,
@@ -24,7 +25,9 @@ export const AccountsContainer = ({
 }) => {
  const { pubKey, isReadOnly } = useVegaWallet();
  const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
-  const setView = useSidebar((store) => store.setView);
+  const openWithdrawalDialog = useWithdrawalDialog((store) => store.open);
+  const openDepositDialog = useDepositDialog((store) => store.open);
+  const openTransferDialog = useTransferDialog((store) => store.open);

  const gridStore = useAccountStore((store) => store.gridStore);
  const updateGridStore = useAccountStore((store) => store.updateGridStore);
@@ -52,34 +55,27 @@ export const AccountsContainer = ({
      <AccountManager
        partyId={pubKey}
        onClickAsset={onClickAsset}
-        onClickWithdraw={(assetId) => {
-          setView({ type: ViewType.Withdraw, assetId });
-        }}
-        onClickDeposit={(assetId) => {
-          setView({ type: ViewType.Deposit, assetId });
-        }}
-        onClickTransfer={(assetId) => {
-          setView({ type: ViewType.Transfer, assetId });
-        }}
+        onClickWithdraw={openWithdrawalDialog}
+        onClickDeposit={openDepositDialog}
        onMarketClick={onMarketClick}
        isReadOnly={isReadOnly}
        pinnedAsset={pinnedAsset}
        gridProps={gridStoreCallbacks}
      />
      {!isReadOnly && !hideButtons && (
-        <div className="flex gap-2 justify-end p-2 absolute bottom-0 right-0 dark:bg-black/75 bg-white/75 rounded">
+        <div className="flex gap-2 justify-end p-2 px-[11px] absolute lg:fixed bottom-0 right-3 dark:bg-black/75 bg-white/75 rounded">
          <Button
            variant="primary"
            size="sm"
-            data-testid="open-transfer"
-            onClick={() => setView({ type: ViewType.Transfer })}
+            data-testid="open-transfer-dialog"
+            onClick={() => openTransferDialog()}
          >
            {t('Transfer')}
          </Button>
          <Button
            variant="primary"
            size="sm"
-            onClick={() => setView({ type: ViewType.Deposit })}
+            onClick={() => openDepositDialog()}
          >
            {t('Deposit')}
          </Button>
@@ -6,7 +6,7 @@ export const AnnouncementBanner = () => {
  // Return an empty div so that the grid layout in _app.page.ts
  // renders correctly
  if (!ANNOUNCEMENTS_CONFIG_URL) {
-    return null;
+    return <div />;
  }

  return <Banner app="console" configUrl={ANNOUNCEMENTS_CONFIG_URL} />;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Mikołaj Młodzikowski	4441dfe081	feat(ci): try backward-testing	2023-09-05 11:40:55 +02:00
Matthew Russell	220da79839	chore: bump mainet version for trading	2023-07-31 11:18:38 +01:00
Mikołaj Młodzikowski	3e839fc620	feat(ci): fix deploy to mainnet	2023-07-28 18:22:00 +02:00
Matthew RussellandSam Keen	baf150fcf5	chore(trading,governance): release mainnet (#4423 ) Co-authored-by: Sam Keen <samuel.kleinmann@gmail.com>	2023-07-28 16:33:37 +01:00
Sam Keen	8d08b6a615	feat(governance): remove max limit on associate function (#4429 )	2023-07-28 11:15:21 +00:00
Mikołaj Młodzikowski	1e222aba2d	feat(ci): update pipelines	2023-07-13 12:00:37 +02:00
Matthew Russell	61c5a7ba68	fix(positions): use asset decimals for pnl (#4291 )	2023-07-12 12:33:24 +01:00