fix(ci): publish of static dist

.eslintrc.json

@@ -51,8 +51,7 @@
             "ul": ["list"],
             "ol": ["list"]
           }
-        ],
-        "no-console": ["error", { "allow": ["warn", "error"] }]
+        ]
       }
     },
     {

.github/ISSUE_TEMPLATE/feature-epic.md

@@ -1,29 +0,0 @@
----
-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: '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

.github/workflows/add-ipfs-notes-to-release.yml

@@ -7,7 +7,7 @@ on:
 jobs:
   after-release:
     runs-on: ubuntu-22.04
-    timeout-minutes: 45
+    timeout-minutes: 30
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -30,20 +30,18 @@ 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 }}"
-          docker run --rm vegaprotocol/trading:mainnet cat /ipfs-hash > ipfs-hash
+          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
           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"

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

@@ -120,15 +120,6 @@ 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'

.github/workflows/console-test-run.yml

@@ -1,138 +1,55 @@
-name: (CI) Console tests
-
+name: console-test-run
 on:
   workflow_call:
     inputs:
       github-sha:
         required: true
         type: string
-
 jobs:
-  run-tests:
-    name: run-tests
-    runs-on: ubuntu-22.04
-    timeout-minutes: 25
+  console-test:
+    timeout-minutes: 5
+    runs-on: self-hosted-runner
     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'
-      #----------------------------------------------
-      #       set-up python
-      #----------------------------------------------
-      - name: Set up python
-        id: setup-python
+
+      - name: Set up 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
-        if: steps.cached-poetry-dependencies.outputs.cache-hit != 'true'
-        run: poetry install --no-interaction --no-root
-      #----------------------------------------------
-      # install vega binaries
-      #----------------------------------------------
-      - name: Install vega binaries
+
+      - name: load Binaries
+        run: |
+          poetry run python -m vega_sim.tools.load_binaries
         working-directory: ./console-test
-        run: poetry run python -m vega_sim.tools.load_binaries --force
-      #----------------------------------------------
-      # install playwright
-      #----------------------------------------------
+
+      - 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
+
       - name: install playwright
         run: poetry run playwright install
         working-directory: ./console-test
-      #----------------------------------------------
-      # run tests
-      #----------------------------------------------
-      - name: Run tests
-        working-directory: ./console-test
+
+      - name: run tests
         run: poetry run pytest --numprocesses auto
-      - name: Check files
-        run: |
-          ls -al .
-          ls -al console-test
-      #----------------------------------------------
-      # upload traces
-      #----------------------------------------------
+        working-directory: ./console-test
+
       - name: Upload Playwright Trace
         uses: actions/upload-artifact@v3
         if: always()

.github/workflows/publish-dist.yml

@@ -29,12 +29,6 @@ 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' }}
@@ -42,7 +36,7 @@ jobs:
           echo IS_PR=true >> $GITHUB_ENV
 
       - name: Is mainnet release
-        if: ${{ contains(github.ref, 'release/mainnet') && !contains(github.ref, 'mirror') }}
+        if: ${{ contains(github.ref, 'release/mainnnet') && !contains(github.ref, 'mirror') }}
         run: |
           echo IS_MAINNET_RELEASE=true >> $GITHUB_ENV
 
@@ -81,7 +75,7 @@ jobs:
 
       - name: Log in to the Container registry (docker hub)
         uses: docker/login-action@v2
-        if: ${{ env.IS_IPFS_RELEASE == 'true' || env.IS_DEV_IMAGE == 'true' }}
+        if: ${{ env.IS_IPFS_RELEASE == 'true' }}
         with:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
@@ -179,7 +173,7 @@ jobs:
         uses: docker/build-push-action@v3
         continue-on-error: true
         id: dockerhub-push
-        if: ${{ env.IS_IPFS_RELEASE == 'true' || env.IS_DEV_IMAGE == 'true'  }}
+        if: ${{ env.IS_IPFS_RELEASE == 'true' }}
         with:
           context: .
           file: docker/node-outside-docker.Dockerfile
@@ -189,7 +183,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' || env.IS_DEV_IMAGE == 'true' && 'develop' || '' }}
+            vegaprotocol/${{ matrix.app }}:${{ env.IS_MAINNET_RELEASE == 'true' && 'mainnet' || env.IS_TESTNET_RELEASE == 'true' && 'testnet' || '' }}
 
       - name: Publish dist as docker image (ghcr - retry)
         uses: docker/build-push-action@v3

apps/explorer-e2e/src/integration/proposal.cy.js

@@ -1,46 +0,0 @@
-context('Proposal page', { tags: '@smoke' }, function () {
-  describe('Verify elements on page', function () {
-    const proposalHeading = 'proposals-heading';
-    const dateTimeRegex =
-      /(\d{1,2})\/(\d{1,2})\/(\d{4}), (\d{1,2}):(\d{1,2}):(\d{1,2})/gm;
-    const proposalTitle = 'Add Lorem Ipsum market';
-
-    before('Create market proposal', function () {
-      cy.visit('/');
-      cy.createMarket();
-    });
-
-    it('Able to view proposal', function () {
-      cy.navigate_to('governanceProposals');
-      cy.getByTestId(proposalHeading).should('be.visible');
-      // get first proposal in list
-      cy.get('[row-index="0"]').within(() => {
-        cy.get_element_by_col_id('title').should('have.text', proposalTitle);
-        cy.get_element_by_col_id('type').should('have.text', 'NewMarket');
-        cy.get_element_by_col_id('state').should('have.text', 'Enacted');
-        cy.getByTestId('vote-progress').should('be.visible');
-        cy.get('[col-id="cDate"]')
-          .invoke('text')
-          .should('match', dateTimeRegex);
-        cy.get('[col-id="eDate"]')
-          .invoke('text')
-          .should('match', dateTimeRegex);
-        cy.getByTestId('external-link')
-          .should('have.attr', 'href')
-          .and('contains', 'https://governance.fairground.wtf/proposals/');
-        cy.contains('View terms').should('exist').click();
-      });
-      cy.getByTestId('dialog-title').should('have.text', proposalTitle);
-      cy.get('.language-json').should('exist');
-    });
-
-    it('Proposal page displayed on mobile', function () {
-      cy.common_switch_to_mobile_and_click_toggle();
-      cy.navigate_to('governanceProposals', true);
-      cy.getByTestId(proposalHeading).should('be.visible');
-      cy.get('[row-index="0"]').within(() => {
-        cy.get_element_by_col_id('title').should('have.text', proposalTitle);
-      });
-    });
-  });
-});

apps/explorer/src/app/components/txs/tx-filter.tsx

@@ -10,6 +10,7 @@ import {
   DropdownMenuTrigger,
   DropdownMenuSubContent,
   Icon,
+  Button,
 } from '@vegaprotocol/ui-toolkit';
 import type { Dispatch, SetStateAction } from 'react';
 import { FilterLabel } from './tx-filter-label';
@@ -99,13 +100,15 @@ export const TxsFilter = ({ filters, setFilters }: TxFilterProps) => {
     <DropdownMenu
       modal={false}
       trigger={
-        <DropdownMenuTrigger>
-          <FilterLabel filters={filters} />
+        <DropdownMenuTrigger className="ml-0">
+          <Button size="xs" data-testid="filter-trigger">
+            <FilterLabel filters={filters} />
+          </Button>
         </DropdownMenuTrigger>
       }
     >
       <DropdownMenuContent>
-        {filters.size > 1 ? null : (
+        {filters.size > 0 ? null : (
           <>
             <DropdownMenuCheckboxItem
               onCheckedChange={() => setFilters(new Set(AllFilterOptions))}

apps/explorer/src/app/components/txs/tx-list-navigation.tsx

@@ -44,7 +44,7 @@ export const TxsListNavigation = ({
           </Button>
           <Button
             size="xs"
-            disabled={!hasMoreTxs}
+            disabled={!hasMoreTxs || loading}
             onClick={() => {
               nextPage();
             }}

apps/explorer/src/app/components/txs/txs-infinite-list-item.spec.tsx

@@ -86,18 +86,14 @@ describe('Txs infinite list item', () => {
     render(
       <MockedProvider>
         <MemoryRouter>
-          <table>
-            <tbody>
-              <TxsInfiniteListItem
-                type="testType"
-                submitter="testPubKey"
-                hash="testTxHash"
-                block="1"
-                code={0}
-                command={{}}
-              />
-            </tbody>
-          </table>
+          <TxsInfiniteListItem
+            type="testType"
+            submitter="testPubKey"
+            hash="testTxHash"
+            block="1"
+            code={0}
+            command={{}}
+          />
         </MemoryRouter>
       </MockedProvider>
     );

apps/explorer/src/app/components/txs/txs-infinite-list-item.tsx

@@ -14,9 +14,9 @@ const DEFAULT_TRUNCATE_LENGTH = 7;
 
 export function getIdTruncateLength(screen: Screen): number {
   if (['xxxl', 'xxl'].includes(screen)) {
-    return 32;
+    return 64;
   } else if (['xl', 'lg', 'md'].includes(screen)) {
-    return 16;
+    return 32;
   }
   return DEFAULT_TRUNCATE_LENGTH;
 }

apps/explorer/src/app/components/txs/txs-infinite-list.spec.tsx

@@ -5,17 +5,11 @@ import type { BlockExplorerTransactionResult } from '../../routes/types/block-ex
 import { Side } from '@vegaprotocol/types';
 import { MockedProvider } from '@apollo/client/testing';
 
-const generateHash = (): string =>
-  Array.from(
-    { length: 64 },
-    () => '0123456789ABCDEF'[Math.floor(Math.random() * 16)]
-  ).join('');
-
 const generateTxs = (number: number): BlockExplorerTransactionResult[] => {
   return Array.from(Array(number)).map((_) => ({
     block: '87901',
     index: 2,
-    hash: generateHash(),
+    hash: '0F8B98DA0923A50786B852D9CA11E051CACC4C733E1DB93D535C7D81DBD10F6F',
     submitter:
       '4b782482f587d291e8614219eb9a5ee9280fa2c58982dee71d976782a9be1964',
     type: 'Submit Order',

apps/explorer/src/app/components/txs/txs-per-block.tsx

@@ -2,7 +2,7 @@ import { Table, TableRow } from '../table';
 import { t } from '@vegaprotocol/i18n';
 import { useFetch } from '@vegaprotocol/react-helpers';
 import type { BlockExplorerTransactions } from '../../routes/types/block-explorer-response';
-import { getTxsDataUrl } from '../../hooks/get-txs-data-url';
+import { getTxsDataUrl } from '../../hooks/use-txs-data';
 import { AsyncRenderer, Loader } from '@vegaprotocol/ui-toolkit';
 import EmptyList from '../empty-list/empty-list';
 import { TxsInfiniteListItem } from './txs-infinite-list-item';
@@ -14,7 +14,7 @@ interface TxsPerBlockProps {
 
 export const TxsPerBlock = ({ blockHeight, txCount }: TxsPerBlockProps) => {
   const filters = `filters[block.height]=${blockHeight}`;
-  const url = getTxsDataUrl({ filters, count: txCount });
+  const url = getTxsDataUrl({ limit: txCount.toString(), filters });
   const {
     state: { data, loading, error },
   } = useFetch<BlockExplorerTransactions>(url);

apps/explorer/src/app/hooks/get-txs-data-url.ts

@@ -1,59 +0,0 @@
-import { DATA_SOURCES } from '../config';
-
-type IGetTxsDataFirstPage = {
-  baseUrl?: string;
-  count?: number;
-  party?: string;
-  filters?: string;
-};
-
-interface IGetTxsDataPrevious extends IGetTxsDataFirstPage {
-  before: string;
-}
-
-interface IGetTxsDataNext extends IGetTxsDataFirstPage {
-  after: string;
-}
-
-type IGetTxsDataUrl =
-  | IGetTxsDataPrevious
-  | IGetTxsDataNext
-  | IGetTxsDataFirstPage;
-
-export const BE_TXS_PER_REQUEST = 25;
-
-/**
- * Properly encodes the filters and parameters for a request to the block explorer
- * API for transactions. As the API uses a slightly less common format for encoding
- * filters, some of it is more manual than you might expect.
- *
- * @param params An object containing the pagination and filters
- * @returns string URL to call
- */
-export const getTxsDataUrl = (params: IGetTxsDataUrl) => {
-  const baseUrl =
-    params.baseUrl || `${DATA_SOURCES.blockExplorerUrl}/transactions`;
-  const url = new URL(baseUrl);
-  const count = `${params.count || BE_TXS_PER_REQUEST}`;
-
-  if ('before' in params && params.before?.length > 0) {
-    url.searchParams.append('last', count);
-    url.searchParams.append('before', params.before);
-  } else if ('after' in params && params.after?.length > 0) {
-    url.searchParams.append('first', count);
-    url.searchParams.append('after', params.after);
-  } else {
-    url.searchParams.append('first', count);
-  }
-
-  // Hacky fix for param as array
-  let urlAsString = url.toString();
-  if (params.filters && params.filters?.length > 0) {
-    urlAsString += '&' + params.filters.replaceAll(' ', '%20');
-  }
-  if (params.party && params.party?.length > 0) {
-    urlAsString += `&filters[tx.submitter]=${params.party}`;
-  }
-
-  return urlAsString;
-};

apps/explorer/src/app/hooks/get-txs-data-urls.spec.ts

@@ -1,48 +0,0 @@
-import { getTxsDataUrl } from './get-txs-data-url'; // import the function to be tested
-
-describe('getTxsDataUrl', () => {
-  it('should return the correct URL without filters and party', () => {
-    const params = {
-      count: 10,
-      baseUrl: 'https://example.com/transactions',
-    };
-    const expectedUrl = 'https://example.com/transactions?first=10';
-
-    expect(getTxsDataUrl(params)).toEqual(expectedUrl);
-  });
-
-  it('should return the correct URL with "before" in params', () => {
-    const params = {
-      count: 5,
-      before: '100.1',
-      baseUrl: 'https://example.com/transactions',
-    };
-    const expectedUrl = 'https://example.com/transactions?last=5&before=100.1';
-
-    expect(getTxsDataUrl(params)).toEqual(expectedUrl);
-  });
-
-  it('should return the correct URL with "after" in params', () => {
-    const params = {
-      count: 5,
-      after: '222.1',
-      baseUrl: 'https://example.com/transactions',
-    };
-    const expectedUrl = 'https://example.com/transactions?first=5&after=222.1';
-
-    expect(getTxsDataUrl(params)).toEqual(expectedUrl);
-  });
-
-  it('should return the correct URL with filters and party', () => {
-    const params = {
-      count: 10,
-      filters: 'filters[cmd.type]=Made Up Transaction',
-      party: '1234',
-      baseUrl: 'https://example.com/transactions',
-    };
-    const expectedUrl =
-      'https://example.com/transactions?first=10&filters[cmd.type]=Made%20Up%20Transaction&filters[tx.submitter]=1234';
-
-    expect(getTxsDataUrl(params)).toEqual(expectedUrl);
-  });
-});

apps/explorer/src/app/hooks/use-txs-data.ts

@@ -1,141 +1,130 @@
-import { useSearchParams } from 'react-router-dom';
-import type { URLSearchParamsInit } from 'react-router-dom';
-import { useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { useFetch } from '@vegaprotocol/react-helpers';
 import type {
   BlockExplorerTransactionResult,
   BlockExplorerTransactions,
 } from '../routes/types/block-explorer-response';
+import { DATA_SOURCES } from '../config';
 import isNumber from 'lodash/isNumber';
-import { AllFilterOptions } from '../components/txs/tx-filter';
-import type { FilterOption } from '../components/txs/tx-filter';
-import { BE_TXS_PER_REQUEST, getTxsDataUrl } from './get-txs-data-url';
 
-export function getTypeFilters(filters?: Set<FilterOption>) {
-  if (!filters) {
-    return '';
-  } else if (filters.size > 1) {
-    return '';
-  }
-
-  const forcedSingleFilter = Array.from(filters)[0];
-  return `filters[cmd.type]=${forcedSingleFilter}`;
+export interface TxsStateProps {
+  txsData: BlockExplorerTransactionResult[];
+  hasMoreTxs: boolean;
+  cursor: string;
+  previousCursors: string[];
+  hasPreviousPage: boolean;
 }
 
 export interface IUseTxsData {
-  count?: number;
-  before?: string;
-  after?: string;
-  party?: string;
-  filters?: Set<FilterOption>;
+  limit: number;
+  filters?: string;
 }
 
-export const useTxsData = ({
-  count = 25,
-  before,
-  after,
-  filters,
-  party,
-}: IUseTxsData) => {
-  const [, setSearchParams] = useSearchParams();
-  let hasMoreTxs = true;
-  let txsData: BlockExplorerTransactionResult[] = [];
+interface IGetTxsDataUrl {
+  limit: string;
+  filters?: string;
+}
 
-  const url = getTxsDataUrl({
-    filters: getTypeFilters(filters),
-    count,
-    before,
-    after,
-    party,
+export const getTxsDataUrl = ({ limit, filters }: IGetTxsDataUrl) => {
+  const url = new URL(`${DATA_SOURCES.blockExplorerUrl}/transactions`);
+
+  if (limit) {
+    url.searchParams.append('limit', limit);
+  }
+
+  // Hacky fix for param as array
+  let urlAsString = url.toString();
+  if (filters) {
+    urlAsString += '&' + filters.replace(' ', '%20');
+  }
+
+  return urlAsString;
+};
+
+export const useTxsData = ({ limit, filters }: IUseTxsData) => {
+  const [
+    { txsData, hasMoreTxs, cursor, previousCursors, hasPreviousPage },
+    setTxsState,
+  ] = useState<TxsStateProps>({
+    txsData: [],
+    hasMoreTxs: false,
+    previousCursors: [],
+    cursor: '',
+    hasPreviousPage: false,
   });
 
+  const url = getTxsDataUrl({ limit: limit.toString(), filters });
+
   const {
     state: { data, error, loading },
     refetch,
   } = useFetch<BlockExplorerTransactions>(url, {}, true);
 
-  if (!loading && data && isNumber(data.transactions.length)) {
-    hasMoreTxs = data.transactions.length >= count;
-    txsData = data.transactions;
-  }
+  useEffect(() => {
+    if (!loading && data && isNumber(data.transactions.length)) {
+      setTxsState((prev) => {
+        return {
+          ...prev,
+          txsData: data.transactions,
+          hasMoreTxs: data.transactions.length >= limit,
+          cursor: data?.transactions.at(-1)?.cursor || '',
+        };
+      });
+    }
+  }, [loading, setTxsState, data, limit]);
 
   const nextPage = useCallback(() => {
-    const after = data?.transactions.at(-1)?.cursor || '';
-    const params: URLSearchParamsInit = { after };
-    if (filters) {
-      params.filters = Array.from(filters).join(',');
-    }
-    setSearchParams(params);
-  }, [filters, data, setSearchParams]);
+    const c = data?.transactions.at(0)?.cursor;
+    const newPreviousCursors = c ? [...previousCursors, c] : previousCursors;
+
+    setTxsState((prev) => ({
+      ...prev,
+      hasPreviousPage: true,
+      previousCursors: newPreviousCursors,
+    }));
+
+    return refetch({
+      limit,
+      before: cursor,
+    });
+  }, [data, previousCursors, cursor, limit, refetch]);
 
   const previousPage = useCallback(() => {
-    const before = data?.transactions[0]?.cursor || '';
-    const params: URLSearchParamsInit = { before };
-    if (filters && filters.size > 0 && filters.size === 1) {
-      params.filters = Array.from(filters)[0];
-    }
-    setSearchParams(params);
-  }, [filters, data, setSearchParams]);
+    const previousCursor = [...previousCursors].pop();
+    const newPreviousCursors = previousCursors.slice(0, -1);
+    setTxsState((prev) => ({
+      ...prev,
+      hasPreviousPage: newPreviousCursors.length > 0,
+      previousCursors: newPreviousCursors,
+    }));
+    return refetch({
+      limit,
+      before: previousCursor,
+    });
+  }, [previousCursors, limit, refetch]);
 
   const refreshTxs = useCallback(async () => {
-    const params: URLSearchParamsInit = {};
-    if (filters && filters.size > 0 && filters.size === 1) {
-      params.filters = Array.from(filters)[0];
-    }
-    setSearchParams(params);
+    setTxsState(() => ({
+      txsData: [],
+      cursor: '',
+      previousCursors: [],
+      hasMoreTxs: false,
+      hasPreviousPage: false,
+    }));
 
-    refetch({ count: BE_TXS_PER_REQUEST });
-  }, [setSearchParams, refetch, filters]);
-
-  const updateFilters = useCallback(
-    (newFilters: Set<FilterOption>) => {
-      const params: URLSearchParamsInit = {};
-      if (newFilters && newFilters.size === 1) {
-        params.filters = Array.from(newFilters)[0];
-      }
-
-      setSearchParams(params);
-    },
-    [setSearchParams]
-  );
+    refetch({ limit });
+  }, [setTxsState, limit, refetch, filters]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return {
-    updateFilters,
     txsData,
     loading,
     error,
     hasMoreTxs,
+    hasPreviousPage,
+    previousCursors,
+    cursor,
     refreshTxs,
     nextPage,
     previousPage,
   };
 };
-
-/**
- * Returns a Set of filters based on the URLSearchParams, or
- * defaults to all.
- * @param params
- * @returns Set
- */
-export function getInitialFilters(params: URLSearchParams): Set<FilterOption> {
-  const defaultFilters = new Set(AllFilterOptions);
-
-  const p = params.get('filters');
-
-  if (!p) {
-    return defaultFilters;
-  }
-
-  const filters = new Set<FilterOption>();
-  p.split(',').forEach((f) => {
-    if (AllFilterOptions.includes(f as FilterOption)) {
-      filters.add(f as FilterOption);
-    }
-  });
-
-  if (filters.size === 0) {
-    return defaultFilters;
-  }
-
-  return filters;
-}

apps/explorer/src/app/routes/blocks/id/block.spec.tsx

@@ -204,7 +204,6 @@ describe('Block', () => {
     (useFetch as jest.Mock).mockReturnValue({
       state: { data: createBlockResponse(1), loading: false, error: null },
     });
-
     render(renderComponent(1));
     await waitFor(() => screen.getByTestId('block-header'));
     expect(screen.getByTestId('previous-block-button')).toHaveAttribute(

apps/explorer/src/app/routes/parties/id/index.tsx

@@ -15,13 +15,9 @@ import { PartyBlockAccounts } from './components/party-block-accounts';
 import { isValidPartyId } from './components/party-id-error';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { TxsListNavigation } from '../../../components/txs/tx-list-navigation';
-import type { FilterOption } from '../../../components/txs/tx-filter';
 import { AllFilterOptions, TxsFilter } from '../../../components/txs/tx-filter';
-import { useSearchParams } from 'react-router-dom';
 
 const Party = () => {
-  const [params] = useSearchParams();
-
   const [filters, setFilters] = useState(new Set(AllFilterOptions));
   const { party } = useParams<{ party: string }>();
 
@@ -31,21 +27,24 @@ const Party = () => {
   const partyId = toNonHex(party ? party : '');
   const { isMobile } = useScreenDimensions();
   const visibleChars = useMemo(() => (isMobile ? 10 : 14), [isMobile]);
+  const baseFilters = `filters[tx.submitter]=${partyId}`;
+  const f =
+    filters && filters.size === 1
+      ? `${baseFilters}&filters[cmd.type]=${Array.from(filters)[0]}`
+      : baseFilters;
 
   const {
+    hasMoreTxs,
     nextPage,
-    refreshTxs,
     previousPage,
     error,
+    refreshTxs,
     loading,
     txsData,
-    hasMoreTxs,
-    updateFilters,
+    hasPreviousPage,
   } = useTxsData({
-    filters: filters.size === 1 ? filters : undefined,
-    before: params.get('before') || undefined,
-    after: !params.get('before') ? params.get('after') || undefined : undefined,
-    party: partyId,
+    limit: 25,
+    filters: f,
   });
 
   const variables = useMemo(() => ({ partyId }), [partyId]);
@@ -103,21 +102,15 @@ const Party = () => {
         refreshTxs={refreshTxs}
         nextPage={nextPage}
         previousPage={previousPage}
-        hasPreviousPage={true}
+        hasPreviousPage={hasPreviousPage}
         loading={loading}
         hasMoreTxs={hasMoreTxs}
       >
-        <TxsFilter
-          filters={filters}
-          setFilters={(f) => {
-            setFilters(f);
-            updateFilters(f as Set<FilterOption>);
-          }}
-        />
+        <TxsFilter filters={filters} setFilters={setFilters} />
       </TxsListNavigation>
       {!error && txsData ? (
         <TxsInfiniteList
-          hasMoreTxs={true}
+          hasMoreTxs={hasMoreTxs}
           areTxsLoading={loading}
           txs={txsData}
           loadMoreTxs={nextPage}

apps/explorer/src/app/routes/txs/home/index.tsx

@@ -1,14 +1,14 @@
 import { t } from '@vegaprotocol/i18n';
 import { RouteTitle } from '../../../components/route-title';
 import { TxsInfiniteList } from '../../../components/txs';
-import { useTxsData, getInitialFilters } from '../../../hooks/use-txs-data';
+import { useTxsData } from '../../../hooks/use-txs-data';
 import { useDocumentTitle } from '../../../hooks/use-document-title';
 
 import { useState } from 'react';
-import { TxsFilter } from '../../../components/txs/tx-filter';
-import type { FilterOption } from '../../../components/txs/tx-filter';
+import { AllFilterOptions, TxsFilter } from '../../../components/txs/tx-filter';
 import { TxsListNavigation } from '../../../components/txs/tx-list-navigation';
-import { useSearchParams } from 'react-router-dom';
+
+const BE_TXS_PER_REQUEST = 25;
 
 export const TxsList = () => {
   useDocumentTitle(['Transactions']);
@@ -27,22 +27,25 @@ export const TxsList = () => {
  * @returns {JSX.Element} Transaction List and controls
  */
 export const TxsListFiltered = () => {
-  const [params] = useSearchParams();
-  const [filters, setFilters] = useState(getInitialFilters(params));
+  const [filters, setFilters] = useState(new Set(AllFilterOptions));
+
+  const f =
+    filters && filters.size === 1
+      ? `filters[cmd.type]=${Array.from(filters)[0]}`
+      : '';
 
   const {
+    hasMoreTxs,
     nextPage,
     previousPage,
     error,
     refreshTxs,
     loading,
     txsData,
-    hasMoreTxs,
-    updateFilters,
+    hasPreviousPage,
   } = useTxsData({
-    filters: filters.size === 1 ? filters : undefined,
-    before: params.get('before') || undefined,
-    after: !params.get('before') ? params.get('after') || undefined : undefined,
+    limit: BE_TXS_PER_REQUEST,
+    filters: f,
   });
 
   return (
@@ -51,17 +54,11 @@ export const TxsListFiltered = () => {
         refreshTxs={refreshTxs}
         nextPage={nextPage}
         previousPage={previousPage}
-        hasPreviousPage={true}
+        hasPreviousPage={hasPreviousPage}
         loading={loading}
         hasMoreTxs={hasMoreTxs}
       >
-        <TxsFilter
-          filters={filters}
-          setFilters={(f) => {
-            setFilters(f);
-            updateFilters(f as Set<FilterOption>);
-          }}
-        />
+        <TxsFilter filters={filters} setFilters={setFilters} />
       </TxsListNavigation>
       <TxsInfiniteList
         hasFilters={filters.size > 0}

apps/governance-e2e/src/integration/flow/proposal-details.cy.ts

@@ -218,33 +218,17 @@ describe(
       getProposalInformationFromTable('Tokens for proposal')
         .should('have.text', (1).toFixed(2))
         .and('be.visible');
-      navigateTo(navigation.proposals);
-      cy.get<testFreeformProposal>('@rawProposal').then((rawProposal) => {
-        getProposalFromTitle(rawProposal.rationale.title).within(() => {
-          // 3002-PROP-021
-          cy.getByTestId('user-voted-yes').should('exist');
-          cy.getByTestId(viewProposalButton).click();
-        });
-      });
       cy.getByTestId(changeVoteButton).should('be.visible').click();
       voteForProposal('against');
       cy.getByTestId(proposalVoteProgressAgainstPercentage)
         .contains('100.00%')
         .and('be.visible');
-      cy.getByTestId(voteBreakdownToggle).click();
       getProposalInformationFromTable('Tokens against proposal')
         .should('have.text', (1).toFixed(2))
         .and('be.visible');
       getProposalInformationFromTable('Number of voting parties')
         .should('have.text', '1')
         .and('be.visible');
-      navigateTo(navigation.proposals);
-      cy.get<testFreeformProposal>('@rawProposal').then((rawProposal) => {
-        getProposalFromTitle(rawProposal.rationale.title).within(() => {
-          cy.getByTestId('user-voted-no').should('exist');
-          cy.getByTestId(viewProposalButton).click();
-        });
-      });
     });
 
     // 3001-VOTE-042, 3001-VOTE-057, 3001-VOTE-058, 3001-VOTE-059, 3001-VOTE-060

apps/governance-e2e/src/integration/flow/proposal-enacted.cy.ts

@@ -26,8 +26,6 @@ const votesTable = 'votes-table';
 const openProposals = 'open-proposals';
 const proposalVoteProgressForPercentage =
   'vote-progress-indicator-percentage-for';
-const majorityVoteReached = 'majority-reached';
-const minParticipationReached = 'participation-reached';
 const proposalTimeout = { timeout: 8000 };
 
 context(
@@ -74,7 +72,7 @@ context(
       });
     });
 
-    // 3001-VOTE-020 3001-VOTE-021 3001-VOTE-046 3001-VOTE-044 3001-VOTE-074 3001-VOTE-074
+    // 3001-VOTE-046 3001-VOTE-044 3001-VOTE-074 3001-VOTE-074
     it('Able to enact proposal by voting', function () {
       const proposalTitle = 'Add New proposal with short enactment';
       const proposalTx = createUpdateNetworkProposalTxBody();
@@ -87,18 +85,10 @@ context(
         cy.contains(proposalTitle)
           .parentsUntil(proposalListItem)
           .last()
-          .within(() => {
-            // 3001-VOTE-019 time to vote is highlighted red
-            cy.getByTestId('vote-details')
-              .find('span')
-              .should('have.class', 'text-vega-pink');
-            cy.getByTestId(viewProposalButton).click();
-          });
+          .within(() => cy.getByTestId(viewProposalButton).click());
       });
       cy.getByTestId(proposalStatus).should('have.text', 'Open');
       voteForProposal('for');
-      cy.getByTestId(majorityVoteReached).should('exist');
-      cy.getByTestId(minParticipationReached).should('exist');
       cy.getByTestId(proposalStatus, proposalTimeout)
         .should('have.text', 'Passed')
         .then(() => {
@@ -114,14 +104,6 @@ context(
       cy.getByTestId(proposalVoteProgressForPercentage)
         .contains('100.00%')
         .and('be.visible');
-      navigateTo(navigation.proposals);
-      cy.contains(proposalTitle)
-        .parentsUntil(proposalListItem)
-        .last()
-        .within(() => {
-          cy.getByTestId(majorityVoteReached).should('exist');
-          cy.getByTestId(minParticipationReached).should('exist');
-        });
     });
 
     // 3001-VOTE-047

apps/governance-e2e/src/integration/flow/proposal-list.cy.ts

@@ -49,8 +49,8 @@ describe('Governance flow for proposal list', { tags: '@slow' }, function () {
     navigateTo(navigation.proposals);
   });
 
-  // 3001-VOTE-018
   it('Newly created proposals list - proposals closest to closing date appear higher in list', function () {
+    // 3001-VOTE-005
     const proposalDays = [364, 50, 2];
     for (let index = 0; index < proposalDays.length; index++) {
       goToMakeNewProposal(governanceProposalType.RAW);
@@ -120,24 +120,16 @@ describe('Governance flow for proposal list', { tags: '@slow' }, function () {
     submitUniqueRawProposal({ proposalTitle: proposalTitle });
     getProposalFromTitle(proposalTitle).within(() => {
       // 3001-VOTE-039
-      cy.getByTestId('participation-not-reached').should(
+      cy.getByTestId(voteStatus).should(
         'have.text',
-        'Min. participation not reached'
+        'Participation not reached'
       );
       cy.getByTestId(viewProposalButton).click();
     });
     voteForProposal('for');
     navigateTo(navigation.proposals);
     getProposalFromTitle(proposalTitle).within(() => {
-      cy.getByTestId(voteStatus).should(
-        'have.text',
-        'Currently expected to  pass'
-      );
-      cy.getByTestId('user-voted-yes').should('exist');
-      cy.getByTestId('participation-reached').should(
-        'have.text',
-        'Min. participation reached'
-      );
+      cy.getByTestId(voteStatus).should('have.text', 'Set to pass');
       cy.getByTestId(viewProposalButton).click();
     });
     cy.getByTestId(voteBreakDownToggle).click();

apps/governance-e2e/src/integration/flow/token-association-flow.cy.ts

@@ -351,12 +351,6 @@ context(
         );
         stakingPageDisassociateAllTokens();
       });
-
-      it('Able to associate over 1 million tokens', function () {
-        cy.get(ethWalletAssociateButton).click();
-        stakingPageAssociateTokens('2000000', { approve: true });
-        stakingPageDisassociateAllTokens();
-      });
     });
   }
 );

apps/governance-e2e/src/integration/view/proposal.cy.ts

@@ -17,7 +17,6 @@ const governanceDocsUrl = 'https://vega.xyz/governance';
 const networkUpgradeProposalListItem = 'protocol-upgrade-proposals-list-item';
 const closedProposals = 'closed-proposals';
 const closedProposalToggle = 'closed-proposals-toggle-networkUpgrades';
-const protocolUpgradeTime = 'protocol-upgrade-time';
 
 context(
   'Governance Page - verify elements on page',
@@ -175,7 +174,6 @@ context(
       });
     });
 
-    // 3009-NTWU-003 3009-NTWU-004 3009-NTWU-007
     it('should see details of network upgrade proposal', function () {
       mockNetworkUpgradeProposal();
       navigateTo(navigation.proposals);
@@ -230,7 +228,6 @@ context(
       cy.getByTestId(closedProposalToggle).should('not.exist');
     });
 
-    // 3009-NTWU-001 3009-NTWU-002 3009-NTWU-006 3009-NTWU-009
     it('should display network upgrade banner with estimate', function () {
       mockNetworkUpgradeProposal();
       cy.visit('/');
@@ -262,18 +259,10 @@ context(
         .as('displayedEstimate');
       cy.get('@displayedEstimate').then((estimateText) => {
         // Estimated time should automatically update every second
-        cy.getByTestId(protocolUpgradeTime)
+        cy.getByTestId('protocol-upgrade-time')
           .invoke('text')
           .should('not.eq', estimateText);
       });
-      // time estimate on proposal detail
-      cy.getByTestId('protocol-upgrade-proposal').within(() => {
-        cy.get('@displayedEstimate').then((estimateText) => {
-          cy.getByTestId(protocolUpgradeTime)
-            .invoke('text')
-            .should('not.eq', estimateText);
-        });
-      });
     });
   }
 );

apps/governance/src/components/nav/nav.tsx

@@ -18,7 +18,10 @@ 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 } from '@vegaprotocol/proposals';
+import {
+  ProtocolUpgradeCountdown,
+  ProtocolUpgradeCountdownMode,
+} from '@vegaprotocol/proposals';
 
 export const SettingsLink = () => {
   const { open, isOpen, close } = useTelemetryDialog();
@@ -65,7 +68,9 @@ export const Nav = ({ theme }: Pick<NavigationProps, 'theme'>) => {
       actions={
         <>
           <SettingsLink />
-          <ProtocolUpgradeCountdown />
+          <ProtocolUpgradeCountdown
+            mode={ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING}
+          />
         </>
       }
     >

apps/governance/src/lib/download-json.ts

@@ -20,6 +20,6 @@ export const downloadJson = (jsonString: string, proposalTitle: string) => {
     window.URL.revokeObjectURL(url);
     document.body.removeChild(a);
   } catch (error) {
-    console.error(error);
+    console.log(error);
   }
 };

apps/governance/src/routes/proposals/components/proposal-market-data/proposal-market-data.tsx

@@ -200,7 +200,7 @@ export const ProposalMarketData = ({
         title={marketData.tradableInstrument.instrument.code}
         open={isOpen}
         onChange={(isOpen) => (isOpen ? open() : close())}
-        size="large"
+        size="medium"
         dataTestId="market-json-dialog"
       >
         <CopyWithTooltip text={JSON.stringify(marketData)}>

apps/governance/src/routes/rewards/epoch-individual-rewards/epoch-individual-rewards-table.tsx

@@ -5,6 +5,7 @@ import {
   RewardsTable,
 } from '../shared-rewards-table-assets/shared-rewards-table-assets';
 import type { EpochIndividualReward } from './generate-epoch-individual-rewards-list';
+import { useTranslation } from 'react-i18next';
 
 interface EpochIndividualRewardsGridProps {
   data: EpochIndividualReward;
@@ -21,11 +22,14 @@ interface RewardItemProps {
 const DisplayReward = ({
   reward,
   decimals,
+  percentageOfTotal,
 }: {
   reward: string;
   decimals: number;
   percentageOfTotal?: string;
 }) => {
+  const { t } = useTranslation();
+
   if (Number(reward) === 0) {
     return <span className="text-vega-dark-300">-</span>;
   }
@@ -35,12 +39,23 @@ const DisplayReward = ({
       description={
         <div className="flex flex-col items-start">
           <span>{formatNumber(toBigNum(reward, decimals), decimals)}</span>
+          {percentageOfTotal && (
+            <span className="text-vega-dark-300">
+              ({percentageOfTotal}% {t('ofTotalDistributed')})
+            </span>
+          )}
         </div>
       }
     >
       <button>
         <div className="flex flex-col items-start">
           <span>{formatNumber(toBigNum(reward, decimals), 4)}</span>
+          {percentageOfTotal && (
+            <span className="text-vega-dark-300">
+              ({formatNumber(percentageOfTotal, 4).toString()}
+              %)
+            </span>
+          )}
         </div>
       </button>
     </Tooltip>

apps/governance/src/routes/rewards/epoch-individual-rewards/generate-epoch-individual-rewards-list.spec.ts

@@ -168,6 +168,17 @@ describe('generateEpochIndividualRewardsList', () => {
     expect(result2[1].epoch).toEqual(1);
   });
 
+  it('correctly calculates the total value of rewards for an asset', () => {
+    const rewards = [reward1, reward4];
+    const result = generateEpochIndividualRewardsList({
+      rewards,
+      epochId: 1,
+      epochRewardSummaries: [],
+    });
+
+    expect(result[0].rewards[0].totalAmount).toEqual('200');
+  });
+
   it('returns data in the expected shape', () => {
     // Just sanity checking the whole structure here
     const rewards = [reward1, reward2, reward3, reward4];
@@ -447,4 +458,69 @@ describe('generateEpochIndividualRewardsList', () => {
       },
     ]);
   });
+
+  it('correctly calculates the percentage of two or more rewards by referencing the total rewards amount', () => {
+    const result = generateEpochIndividualRewardsList({
+      rewards: [
+        // reward1 is 100 usd, which is 10% of the total rewards amount
+        reward1,
+        {
+          rewardType: AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
+          amount: '200',
+          percentageOfTotal: '0.2',
+          receivedAt: new Date(),
+          asset: { id: 'usd', symbol: 'USD', name: 'USD', decimals: 6 },
+          party: { id: 'blah' },
+          epoch: { id: '1' },
+        },
+      ],
+      epochId: 1,
+      epochRewardSummaries: [
+        {
+          __typename: 'EpochRewardSummary',
+          epoch: 1,
+          assetId: 'usd',
+          amount: '1000',
+          rewardType: AccountType.ACCOUNT_TYPE_GLOBAL_REWARD,
+        },
+      ],
+    });
+
+    expect(result[0]).toEqual({
+      epoch: 1,
+      rewards: [
+        {
+          asset: 'USD',
+          decimals: 6,
+          totalAmount: '300',
+          rewardTypes: {
+            [AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE]: {
+              amount: '0',
+              percentageOfTotal: '0',
+            },
+            [AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES]: {
+              amount: '0',
+              percentageOfTotal: '0',
+            },
+            [AccountType.ACCOUNT_TYPE_GLOBAL_REWARD]: {
+              amount: '300',
+              percentageOfTotal: '30',
+            },
+            [AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES]: {
+              amount: '0',
+              percentageOfTotal: '0',
+            },
+            [AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES]: {
+              amount: '0',
+              percentageOfTotal: '0',
+            },
+            [AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS]: {
+              amount: '0',
+              percentageOfTotal: '0',
+            },
+          },
+        },
+      ],
+    });
+  });
 });

apps/governance/src/routes/rewards/epoch-individual-rewards/generate-epoch-individual-rewards-list.ts

@@ -59,6 +59,7 @@ export const generateEpochIndividualRewardsList = ({
   const epochIndividualRewards = rewards.reduce((acc, reward) => {
     const epochId = reward.epoch.id;
     const assetName = reward.asset.name;
+    const assetId = reward.asset.id;
     const assetDecimals = reward.asset.decimals;
     const rewardType = reward.rewardType;
     const amount = reward.amount;
@@ -76,6 +77,13 @@ export const generateEpochIndividualRewardsList = ({
     const epoch = acc.get(epochId);
 
     // matchingTotalReward is the total awarded for all users for the reward type in the epoch of the asset
+    const matchingTotalRewardAmount = epochRewardSummaries.find(
+      (summary) =>
+        summary.epoch === Number(epochId) &&
+        summary.assetId === assetId &&
+        summary.rewardType === rewardType
+    )?.amount;
+
     let asset = epoch?.rewards.find((r) => r.asset === assetName);
 
     if (!asset) {
@@ -98,7 +106,14 @@ export const generateEpochIndividualRewardsList = ({
 
       asset.rewardTypes[rewardType] = {
         amount: newAmount,
-        percentageOfTotal: percentageOfTotal,
+        percentageOfTotal: matchingTotalRewardAmount
+          ? new BigNumber(newAmount)
+              .dividedBy(matchingTotalRewardAmount)
+              .multipliedBy(100)
+              .toString()
+          : // this should never be reached, if there's an individual reward there should
+            // always be a reward total from the api too, but set it as a fallback just in case
+            percentageOfTotal,
       };
     }
 

apps/governance/src/routes/rewards/home/rewards-page.tsx

@@ -61,6 +61,8 @@ export const RewardsPage = () => {
     error: paramsError,
   } = useNetworkParams([NetworkParams.reward_staking_delegation_payoutDelay]);
 
+  console.log('params', params);
+
   const payoutDuration = useMemo(() => {
     if (!params) {
       return 0;

apps/governance/src/routes/staking/associate/wallet-associate.tsx

@@ -8,10 +8,9 @@ import { TxState } from '../../../hooks/transaction-reducer';
 import { useTransaction } from '../../../hooks/use-transaction';
 import { BigNumber } from '../../../lib/bignumber';
 import { AssociateInfo } from './associate-info';
-import { toBigNum } from '@vegaprotocol/utils';
+import { removeDecimal, 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,
@@ -43,7 +42,7 @@ export const WalletAssociate = ({
   } = useTransaction(() => {
     return token.approve(
       ethereumConfig.staking_bridge_contract.address,
-      MaxUint256.toString()
+      removeDecimal('1000000', decimals).toString()
     );
   });
 

apps/liquidity-provision-dashboard/src/app/components/health-dialog/health-dialog.tsx

@@ -57,7 +57,7 @@ const ROWS = [
 
 export const HealthDialog = ({ onChange, isOpen }: HealthDialogProps) => {
   return (
-    <Dialog size="large" open={isOpen} onChange={onChange}>
+    <Dialog size="medium" open={isOpen} onChange={onChange}>
       <h1 className="text-2xl mb-5 pr-2 font-medium font-alpha uppercase">
         {t('Health')}
       </h1>

apps/trading-e2e/src/integration/capsule.cy.ts

@@ -535,7 +535,6 @@ function checkIfDataAndTimeOfCreationAndUpdateIsEqual(date: string) {
       // unexpected latency
       const minBefore = subSeconds(new Date(), 5);
       const maxAfter = addSeconds(new Date(), 5);
-      // eslint-disable-next-line no-console
       console.log(maxAfter);
       const date = new Date($dateTime.toString());
       expect(isAfter(date, minBefore) && isBefore(date, maxAfter)).to.equal(

apps/trading-e2e/src/integration/charts-depth.cy.ts

@@ -2,7 +2,6 @@ describe('charts', { tags: '@smoke' }, () => {
   before(() => {
     cy.mockTradingPage();
     cy.mockSubscription();
-    cy.setOnBoardingViewed();
     cy.visit('/#/markets/market-0');
     cy.wait('@Markets');
     cy.getByTestId('Depth').click();

apps/trading-e2e/src/integration/closed-markets.cy.ts

@@ -202,7 +202,6 @@ describe('Closed markets', { tags: '@smoke' }, () => {
   const specDataConnection = createDataConnection();
 
   before(() => {
-    cy.setOnBoardingViewed();
     cy.mockGQL((req) => {
       aliasGQLQuery(req, 'ChainId', chainIdQuery());
       aliasGQLQuery(req, 'Statistics', statisticsQuery());
@@ -456,7 +455,6 @@ describe('no closed markets', { tags: '@smoke', testIsolation: true }, () => {
   before(() => {
     cy.mockTradingPage();
     cy.mockSubscription();
-    cy.setOnBoardingViewed();
     cy.visit('/#/markets/all');
     cy.get('[data-testid="Closed markets"]').click();
   });

apps/trading-e2e/src/integration/home-node-network.cy.ts

@@ -4,7 +4,6 @@ const nodeHealthTrigger = 'node-health-trigger';
 
 describe('home', { tags: '@regression' }, () => {
   before(() => {
-    cy.setOnBoardingViewed();
     cy.mockTradingPage();
     cy.mockSubscription();
     cy.visit('/');
@@ -69,4 +68,22 @@ describe('home', { tags: '@regression' }, () => {
       cy.getByTestId('connect').click();
     });
   });
+
+  describe('Network switcher', () => {
+    before(() => {
+      cy.mockTradingPage();
+      cy.mockSubscription();
+      cy.visit('/');
+    });
+
+    it('switch to fairground network and check status & incidents link', () => {
+      // 0006-NETW-002
+      // 0006-NETW-003
+      cy.getByTestId('navigation')
+        .find('[data-testid="network-switcher"]')
+        .should('have.text', 'Custom')
+        .click();
+      cy.getByTestId('network-item').contains('Fairground testnet');
+    });
+  });
 });

apps/trading-e2e/src/integration/home.cy.ts

@@ -2,7 +2,7 @@ import { aliasGQLQuery } from '@vegaprotocol/cypress';
 import type { ProposalListFieldsFragment } from '@vegaprotocol/proposals';
 import * as Schema from '@vegaprotocol/types';
 
-const dialogContent = 'welcome-dialog';
+const dialogContent = 'dialog-content';
 
 const generateProposal = (code: string): ProposalListFieldsFragment => ({
   __typename: 'Proposal',
@@ -140,43 +140,43 @@ describe('home', { tags: '@regression' }, () => {
       cy.wait('@MarketsData');
     });
 
-    it('close welcome dialog should redirect to market/all', () => {
+    it('redirects to market/all and displays welcome notice', () => {
       cy.url().should('eq', Cypress.config().baseUrl + `/#/markets/all`);
-      cy.getByTestId('welcome-dialog').should('be.visible');
-      cy.getByTestId('welcome-title').should('contain.text', 'Console CUSTOM');
-      cy.getByTestId('browse-markets-button').should('not.be.disabled');
-      cy.getByTestId('get-started-banner').should('be.visible');
-      cy.getByTestId('get-started-button').should('not.be.disabled');
-      cy.getByTestId('dialog-close').click();
-      cy.url().should('eq', Cypress.config().baseUrl + `/#/markets/all`);
-      cy.window().then((window) => {
-        expect(window.localStorage.getItem('vega_onboarding_viewed')).to.equal(
-          'true'
-        );
-      });
+      cy.getByTestId('welcome-notice-title').should(
+        'contain.text',
+        'Welcome to Console'
+      );
     });
+  });
 
-    it('click browse markets button should redirect to market/all', () => {
-      cy.getByTestId('welcome-dialog').should('be.visible');
-      cy.getByTestId('browse-markets-button').click();
-      cy.url().should('eq', Cypress.config().baseUrl + `/#/markets/all`);
-      cy.window().then((window) => {
-        expect(window.localStorage.getItem('vega_onboarding_viewed')).to.equal(
-          'true'
-        );
+  describe('no proposal nor markets found', () => {
+    it('there are welcome text and a link to propose market', () => {
+      cy.mockGQL((req) => {
+        const data = {
+          marketsConnection: {
+            __typename: 'MarketConnection',
+            edges: [],
+          },
+        };
+        aliasGQLQuery(req, 'Markets', data);
+        aliasGQLQuery(req, 'MarketsData', data);
+        aliasGQLQuery(req, 'ProposalsList', {
+          proposalsConnection: {
+            __typename: 'ProposalsConnection',
+            edges: null,
+          },
+        });
       });
-    });
-
-    it('click get started button should open connect dialog', () => {
-      cy.getByTestId('welcome-dialog').should('be.visible');
-      cy.getByTestId('get-started-button').click();
-      cy.url().should('eq', Cypress.config().baseUrl + `/#/markets/all`);
-      cy.window().then((window) => {
-        expect(window.localStorage.getItem('vega_onboarding_viewed')).to.equal(
-          'true'
-        );
-      });
-      cy.getByTestId('wallet-dialog-title').should('contain.text', 'Connect');
+      cy.visit('/');
+      cy.wait('@Markets');
+      cy.wait('@MarketsData');
+      cy.getByTestId('welcome-notice-title').should(
+        'contain.text',
+        'Welcome to Console'
+      );
+      cy.getByTestId('external-link')
+        .contains('Propose a market')
+        .should('exist');
     });
   });
 
@@ -185,7 +185,7 @@ describe('home', { tags: '@regression' }, () => {
       cy.window().then((window) => {
         window.localStorage.setItem('marketId', 'market-1');
         cy.visit('/');
-        cy.getByTestId('dialog-close').click();
+        cy.wait('@Markets');
         cy.location('hash').should('equal', '#/markets/market-1');
         cy.getByTestId(dialogContent).should('not.exist');
       });
@@ -199,7 +199,6 @@ describe('home', { tags: '@regression' }, () => {
         });
         cy.visit('/');
         cy.wait('@Markets');
-        cy.getByTestId('dialog-close').click();
         cy.location('hash').should('equal', '#/markets/market-not-existing');
         cy.getByTestId(dialogContent).should('not.exist');
       });

apps/trading-e2e/src/integration/market-all.cy.ts

@@ -3,13 +3,12 @@ import type { MarketsQuery } from '@vegaprotocol/markets';
 import * as Schema from '@vegaprotocol/types';
 
 const rowSelector =
-  '[data-testid="tab-open-markets"] .ag-center-cols-container .ag-row';
+  '[data-testid="tab-all-markets"] .ag-center-cols-container .ag-row';
 const colInstrumentCode = '[col-id="tradableInstrument.instrument.code"]';
 
 describe('markets all table', { tags: '@smoke' }, () => {
   beforeEach(() => {
     cy.clearLocalStorage().then(() => {
-      cy.setOnBoardingViewed();
       cy.mockTradingPage(
         Schema.MarketState.STATE_ACTIVE,
         Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION,
@@ -35,7 +34,7 @@ describe('markets all table', { tags: '@smoke' }, () => {
       'Settlement asset',
       '',
     ];
-    cy.getByTestId('tab-open-markets').within(($headers) => {
+    cy.getByTestId('tab-all-markets').within(($headers) => {
       cy.wrap($headers)
         .get('.ag-header-cell-text')
         .each(($header, i) => {
@@ -45,7 +44,7 @@ describe('markets all table', { tags: '@smoke' }, () => {
   });
 
   it('markets tab should be rendered properly', () => {
-    cy.get('[data-testid="Open markets"]').should(
+    cy.get('[data-testid="All markets"]').should(
       'have.attr',
       'data-state',
       'active'
@@ -167,7 +166,7 @@ describe('markets all table', { tags: '@smoke' }, () => {
       'ETHBTC.QM21',
       'SOLUSD',
     ];
-    cy.get('[data-testid="Open markets"]').click({ force: true });
+    cy.get('[data-testid="All markets"]').click({ force: true });
     cy.url().should('eq', Cypress.config('baseUrl') + '/#/markets/all');
     cy.contains('AAPL.MF21').should('be.visible');
     cy.get('.ag-header-cell-label').contains('Market').click(); // sort by market name
@@ -192,7 +191,7 @@ describe('markets all table', { tags: '@smoke' }, () => {
   });
 });
 
-describe('no open markets', { tags: '@smoke', testIsolation: true }, () => {
+describe('no all markets', { tags: '@smoke', testIsolation: true }, () => {
   before(() => {
     cy.mockTradingPage();
     const markets: MarketsQuery = {};
@@ -200,12 +199,11 @@ describe('no open markets', { tags: '@smoke', testIsolation: true }, () => {
       aliasGQLQuery(req, 'Markets', markets);
     });
     cy.mockSubscription();
-    cy.setOnBoardingViewed();
     cy.visit('/#/markets/all');
   });
 
   it.skip('can see no markets message', () => {
     // 6001-MARK-048
-    cy.getByTestId('tab-open-markets').should('contain.text', 'No markets');
+    cy.getByTestId('tab-all-markets').should('contain.text', 'No markets');
   });
 });

apps/trading-e2e/src/integration/market-info.cy.ts

@@ -21,7 +21,6 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
   });
 
   before(() => {
-    cy.setOnBoardingViewed();
     cy.mockTradingPage(MarketState.STATE_ACTIVE);
     cy.mockSubscription();
     cy.visit('/#/markets/market-0');

apps/trading-e2e/src/integration/market-liquidity.cy.ts

@@ -36,7 +36,6 @@ const headers = [
 
 describe('liquidity table - trading', { tags: '@smoke' }, () => {
   before(() => {
-    cy.setOnBoardingViewed();
     cy.mockSubscription();
     cy.mockTradingPage(
       Schema.MarketState.STATE_ACTIVE,
@@ -120,7 +119,6 @@ describe('liquidity table - trading', { tags: '@smoke' }, () => {
 
 describe('liquidity table view', { tags: '@smoke' }, () => {
   before(() => {
-    cy.setOnBoardingViewed();
     cy.mockSubscription();
     cy.mockTradingPage(
       Schema.MarketState.STATE_ACTIVE,

apps/trading-e2e/src/integration/market-selector.cy.ts

@@ -12,7 +12,6 @@ describe('markets selector', { tags: '@smoke' }, () => {
     cy.window().then((window) => {
       window.localStorage.setItem('marketId', 'market-1');
     });
-    cy.setOnBoardingViewed();
     cy.mockTradingPage(
       MarketState.STATE_ACTIVE,
       MarketTradingMode.TRADING_MODE_MONITORING_AUCTION,

apps/trading-e2e/src/integration/market-summary.cy.ts

@@ -30,7 +30,6 @@ describe('Market trading page', () => {
       Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY_TARGET_NOT_MET
     );
     cy.mockSubscription();
-    cy.setOnBoardingViewed();
     cy.visit('/#/markets/market-0');
     cy.wait('@MarketData');
     cy.getByTestId(marketSummaryBlock).should('be.visible');

apps/trading-e2e/src/integration/markets-proposed.cy.ts

@@ -9,7 +9,6 @@ describe('markets proposed table', { tags: '@smoke' }, () => {
   before(() => {
     cy.mockTradingPage();
     cy.mockSubscription();
-    cy.setOnBoardingViewed();
     cy.visit('/#/markets/all');
     cy.get('[data-testid="Proposed markets"]').click();
   });
@@ -85,7 +84,7 @@ describe('markets proposed table', { tags: '@smoke' }, () => {
       .find('button')
       .click();
 
-    const dropdownContent = '[data-testid="proposal-actions-content"]';
+    const dropdownContent = '[data-testid="market-actions-content"]';
     const dropdownContentItem = '[role="menuitem"]';
 
     // 6001-MARK-059
@@ -101,6 +100,7 @@ describe('markets proposed table', { tags: '@smoke' }, () => {
           'VEGA_TOKEN_URL'
         )}/proposals/e9ec6d5c46a7e7bcabf9ba7a893fa5a5eeeec08b731f06f7a6eb7bf0e605b829`
       );
+    cy.getByTestId('market-actions-content').click();
   });
 
   // 6001-MARK-060
@@ -214,13 +214,11 @@ describe('no markets proposed', { tags: '@smoke', testIsolation: true }, () => {
       aliasGQLQuery(req, 'ProposalsList', proposal);
     });
     cy.mockSubscription();
-    cy.setOnBoardingViewed();
+    cy.visit('/#/markets/all');
+    cy.get('[data-testid="Proposed markets"]').click();
   });
 
   it('can see no markets message', () => {
-    cy.visit('/#/markets/all');
-    cy.get('[data-testid="Proposed markets"]').click();
-
     // 6001-MARK-061
     cy.getByTestId('tab-proposed-markets').should('contain.text', 'No markets');
   });

apps/trading-e2e/src/integration/markets.cy.ts

@@ -12,7 +12,6 @@ describe('markets table', { tags: '@smoke' }, () => {
         Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY_TARGET_NOT_MET
       );
       cy.mockSubscription();
-      cy.setOnBoardingViewed();
       cy.visit('/#/markets/all');
     });
   });

apps/trading-e2e/src/integration/navbar.cy.ts

@@ -0,0 +1,114 @@
+import { mockConnectWallet } from '@vegaprotocol/cypress';
+
+describe('Navbar', { tags: '@smoke' }, () => {
+  beforeEach(() => {
+    cy.clearAllLocalStorage();
+    cy.mockTradingPage();
+    cy.mockSubscription();
+    cy.visit('/');
+    cy.wait('@Markets');
+    cy.wait('@MarketsData');
+  });
+
+  const pages = [
+    { name: 'Markets', link: '#/markets/all' },
+    { name: 'Trading', link: '#/markets' },
+    { name: 'Portfolio', link: '#/portfolio' },
+  ];
+
+  describe('desktop view', () => {
+    pages.forEach(({ name, link }) => {
+      it(`${name} should be correctly rendered`, () => {
+        cy.get('nav')
+          .find(`a[data-testid=${name}]:visible`)
+          .then((element) => {
+            cy.wrap(element).click();
+            cy.location('hash').should('contain', link);
+          });
+      });
+    });
+
+    it('Resources dropdown should be correctly rendered', () => {
+      const resourceSelector = 'ul li:contains(Resources)';
+      ['Docs', 'Give Feedback'].forEach((text, index) => {
+        cy.get('nav').find(resourceSelector).contains('Resources').click();
+        cy.get('nav')
+          .find(resourceSelector)
+          .find('.navigation-content li')
+          .eq(index)
+          .find('a')
+          .then((element) => {
+            expect(element.attr('target')).to.eq('_blank');
+            expect(element.attr('href')).to.not.be.empty;
+            expect(element.text()).to.eq(text);
+          });
+      });
+    });
+
+    it('Disclaimer should be presented after choosing from menu', () => {
+      cy.get('nav')
+        .find('ul li:contains(Resources)')
+        .contains('Resources')
+        .click();
+      cy.getByTestId('Disclaimer').eq(0).click();
+      cy.location('hash').should('equal', '#/disclaimer');
+      cy.get('p').contains(
+        'Vega is a decentralised peer-to-peer protocol that can be used to trade derivatives with cryptoassets.'
+      );
+    });
+  });
+
+  describe('mobile view', () => {
+    const viewportHeight = Cypress.config('viewportHeight');
+    const viewportWidth = Cypress.config('viewportWidth');
+    before(() => {
+      // a little hack to keep the viewport size between tests (cypress bug)
+      Cypress.config({
+        viewportWidth: 560,
+        viewportHeight: 890,
+      });
+      cy.viewport(560, 890);
+    });
+
+    describe('wallet drawer', () => {
+      it('wallet drawer should be correctly rendered', () => {
+        mockConnectWallet();
+        cy.connectVegaWallet(true);
+        cy.getByTestId('connect-vega-wallet-mobile').click();
+        cy.getByTestId('wallets-drawer').should('be.visible');
+        cy.getByTestId('wallets-drawer').within((el) => {
+          cy.wrap(el).get('button').contains('Disconnect').click();
+        });
+        cy.getByTestId('wallets-drawer').should('not.be.visible');
+      });
+    });
+
+    describe('menu drawer', () => {
+      pages.forEach(({ name, link }) => {
+        it(`${name} should be correctly rendered`, () => {
+          cy.getByTestId('button-menu-drawer').click();
+          cy.getByTestId('menu-drawer').should('be.visible');
+          cy.getByTestId('menu-drawer').within((el) => {
+            cy.wrap(el).getByTestId(name).click();
+            cy.location('hash').should('contain', link);
+          });
+        });
+      });
+
+      it('Menu drawer should not be visible until opened', () => {
+        cy.getByTestId('menu-drawer').should('not.be.visible');
+        cy.getByTestId('button-menu-drawer').click();
+        cy.getByTestId('menu-drawer').should('be.visible');
+        cy.getByTestId('button-menu-drawer').click();
+        cy.getByTestId('menu-drawer').should('not.be.visible');
+      });
+    });
+    after(() => {
+      // a little hack to keep the viewport size between tests (cypress bug)
+      Cypress.config({
+        viewportWidth,
+        viewportHeight,
+      });
+    });
+  });
+});

apps/trading-e2e/src/integration/oracle.cy.ts

@@ -6,7 +6,6 @@ const oracleFullProfile = 'oracle-full-profile';
 
 describe('oracle information', { tags: '@smoke' }, () => {
   before(() => {
-    cy.setOnBoardingViewed();
     cy.mockTradingPage(
       MarketState.STATE_ACTIVE,
       undefined,

apps/trading-e2e/src/integration/order-book.cy.ts

@@ -14,7 +14,6 @@ const resPrice = 'price-990';
 
 describe('order book', { tags: '@smoke' }, () => {
   before(() => {
-    cy.setOnBoardingViewed();
     cy.mockTradingPage();
     cy.mockSubscription();
     cy.visit('/#/markets/market-0');

apps/trading-e2e/src/integration/settings.cy.ts

@@ -4,7 +4,6 @@ describe('Settings page', { tags: '@smoke' }, () => {
 
     cy.mockTradingPage();
     cy.mockSubscription();
-    cy.setOnBoardingViewed();
     cy.visit('/');
 
     // Only click if not already active otherwise sidebar will close

apps/trading-e2e/src/integration/trading-chart.cy.ts

@@ -77,7 +77,6 @@ function getButtonSelectorByText(text: string): string {
 beforeEach(() => {
   cy.mockTradingPage();
   cy.mockSubscription();
-  cy.setOnBoardingViewed();
   cy.visit('/#/markets/market-0');
   cy.wait('@Markets');
 });
@@ -172,7 +171,6 @@ describe(
         .invoke('text')
         .then((text) => {
           const actualDate = text.slice(0, -67);
-          // eslint-disable-next-line no-console
           console.log(actualDate);
           const actualOhlc = text.slice(-67);
           assert.isTrue(expectedDateRegex.test(actualDate));

apps/trading-e2e/src/integration/trading-deal-ticket-basics.cy.ts

@@ -14,7 +14,6 @@ describe('deal ticket basics', { tags: '@smoke' }, () => {
     cy.mockTradingPage();
     cy.mockSubscription();
     cy.clearAllLocalStorage();
-    cy.setOnBoardingViewed();
     cy.visit('/#/markets/market-0');
     cy.wait('@Markets');
   });
@@ -29,16 +28,16 @@ describe('deal ticket basics', { tags: '@smoke' }, () => {
 
   it('must be able to select order direction - long/short', function () {
     // 7002-SORD-004
-    cy.getByTestId(toggleShort).click().next('input').should('be.checked');
-    cy.getByTestId(toggleLong).click().next('input').should('be.checked');
+    cy.getByTestId(toggleShort).click().children('input').should('be.checked');
+    cy.getByTestId(toggleLong).click().children('input').should('be.checked');
   });
 
   it('must be able to select order type - limit/market', function () {
     // 7002-SORD-005
     // 7002-SORD-006
     // 7002-SORD-007
-    cy.getByTestId(toggleLimit).click().next('input').should('be.checked');
-    cy.getByTestId(toggleMarket).click().next('input').should('be.checked');
+    cy.getByTestId(toggleLimit).click().children('input').should('be.checked');
+    cy.getByTestId(toggleMarket).click().children('input').should('be.checked');
   });
 
   it('order connect vega wallet button should connect', () => {
@@ -52,7 +51,7 @@ describe('deal ticket basics', { tags: '@smoke' }, () => {
       .click();
     cy.wait('@walletReq');
     cy.getByTestId(placeOrderBtn).should('be.visible');
-    cy.getByTestId(toggleLimit).next('input').should('be.checked');
+    cy.getByTestId(toggleLimit).children('input').should('be.checked');
     cy.getByTestId(orderPriceField).should('have.value', '101');
   });
 });

apps/trading-e2e/src/integration/trading-deal-ticket-time-in-force.cy.ts

@@ -15,7 +15,6 @@ describe('time in force validation', { tags: '@smoke' }, () => {
     cy.mockTradingPage();
     cy.mockSubscription();
     cy.clearAllLocalStorage();
-    cy.setOnBoardingViewed();
     cy.visit('/#/markets/market-0');
     cy.wait('@Markets');
   });

apps/trading-e2e/src/integration/trading-positions.cy.ts

@@ -7,7 +7,7 @@ const closePosition = 'close-position';
 const dialogCloseX = 'dialog-close';
 const dialogContent = 'dialog-content';
 const dropDownMenu = 'dropdown-menu';
-const marketActionsContent = 'position-actions-content';
+const marketActionsContent = 'market-actions-content';
 const positions = 'Positions';
 const tabPositions = 'tab-positions';
 const toastContent = 'toast-content';

apps/trading-e2e/src/integration/trading-trades.cy.ts

@@ -9,7 +9,6 @@ describe('trades', { tags: '@smoke' }, () => {
   before(() => {
     cy.mockTradingPage();
     cy.mockSubscription();
-    cy.setOnBoardingViewed();
     cy.intercept('POST', '/graphql', (req) => {
       if (req.body.operationName === 'Trades') {
         req.alias = '@Trades';

apps/trading-e2e/src/integration/wallet-vega.cy.ts

@@ -17,7 +17,6 @@ describe(
       cy.visit('/#/portfolio');
       cy.mockTradingPage();
       cy.mockSubscription();
-      cy.setOnBoardingViewed();
       cy.get('[data-testid="pathname-/portfolio"]').should('exist');
     });
 
@@ -123,7 +122,6 @@ describe('connect vega wallet', { tags: '@smoke', testIsolation: true }, () => {
     cy.visit('/#/portfolio');
     cy.mockTradingPage();
     cy.mockSubscription();
-    cy.setOnBoardingViewed();
     cy.get('[data-testid="pathname-/portfolio"]').should('exist');
   });
 

apps/trading-e2e/src/integration/withdraw-key-to-key-validation.cy.ts

@@ -1,191 +0,0 @@
-import { selectAsset } from '../support/helpers';
-
-const amountField = 'input[name="amount"]';
-const transferText = 'transfer-intro-text';
-const errorText = 'input-error-text';
-const formFieldError = 'input-error-text';
-const includeTransferFeeRadioBtn = 'include-transfer-fee';
-const keyID = `[data-testid="${transferText}"] > .rounded-md`;
-const manageVegaWallet = 'manage-vega-wallet';
-const submitTransferBtn = '[type="submit"]';
-const toAddressField = '[name="toAddress"]';
-const totalTransferfee = 'total-transfer-fee';
-const transferAmount = 'transfer-amount';
-const transferForm = 'transfer-form';
-const transferFee = 'transfer-fee';
-const walletTransfer = 'wallet-transfer';
-
-const ASSET_EURO = 1;
-const ASSET_SEPOLIA_TBTC = 2;
-
-describe('transfer fees', { tags: '@regression', testIsolation: true }, () => {
-  beforeEach(() => {
-    cy.mockWeb3Provider();
-    cy.mockTradingPage();
-    cy.mockSubscription();
-    cy.setVegaWallet();
-
-    cy.visit('/');
-    cy.getByTestId(manageVegaWallet).click();
-    cy.getByTestId(walletTransfer).click();
-
-    cy.wait('@Assets');
-    cy.wait('@Accounts');
-
-    cy.mockVegaWalletTransaction();
-  });
-
-  it('transfer fees tooltips', () => {
-    // 1003-TRAN-015
-    // 1003-TRAN-016
-    // 1003-TRAN-017
-    // 1003-TRAN-018
-    // 1003-TRAN-019
-    cy.getByTestId(transferForm);
-    cy.contains('Enter manually').click();
-    cy.getByTestId(transferForm)
-      .find(toAddressField)
-      .type('7f9cf07d3a9905b1a61a1069f7a758855da428bc0f4a97de87f48644bfc25535');
-    selectAsset(ASSET_SEPOLIA_TBTC);
-    cy.getByTestId(transferForm)
-      .find(amountField)
-      .type('1', { delay: 100, force: true });
-
-    /// Check Include Transfer Fee tooltip
-    cy.get('label[for="include-transfer-fee"] div').realHover();
-    cy.get('[data-side="bottom"] div')
-      .should('be.visible')
-      .should('not.be.empty');
-
-    //Check Transfer Fee tooltip
-    cy.contains('div', 'Transfer fee').realHover();
-    cy.get('[data-side="bottom"] div')
-      .should('be.visible')
-      .should('not.be.empty');
-
-    //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');
-
-    //Check Total amount (with fee) tooltip
-    cy.contains('div', 'Total amount (with fee)').realHover();
-    cy.get('[data-side="bottom"] div')
-      .should('be.visible')
-      .should('not.be.empty');
-  });
-
-  it('transfer fees', () => {
-    // 1003-TRAN-020
-    // 1003-TRAN-021
-    // 1003-TRAN-022
-    // 1003-TRAN-023
-    cy.getByTestId(transferForm);
-    cy.contains('Enter manually').click();
-
-    cy.getByTestId(transferForm)
-      .find(toAddressField)
-      .type('7f9cf07d3a9905b1a61a1069f7a758855da428bc0f4a97de87f48644bfc25535');
-    selectAsset(ASSET_SEPOLIA_TBTC);
-    cy.getByTestId(includeTransferFeeRadioBtn).should('be.disabled');
-
-    cy.getByTestId(transferForm)
-      .find(amountField)
-      .type('1', { delay: 100, force: true });
-
-    cy.getByTestId(transferFee)
-      .should('be.visible')
-      .should('contain.text', '0.01');
-    cy.getByTestId(transferAmount)
-      .should('be.visible')
-      .should('contain.text', '1.00');
-    cy.getByTestId(totalTransferfee)
-      .should('be.visible')
-      .should('contain.text', '1.01');
-    cy.getByTestId(includeTransferFeeRadioBtn).click();
-    cy.getByTestId(transferFee)
-      .should('be.visible')
-      .should('contain.text', '0.01');
-    cy.getByTestId(transferAmount)
-      .should('be.visible')
-      .should('contain.text', '0.99');
-    cy.getByTestId(totalTransferfee)
-      .should('be.visible')
-      .should('contain.text', '1.00');
-  });
-});
-
-describe(
-  'transfer form validation',
-  { tags: '@regression', testIsolation: true },
-  () => {
-    beforeEach(() => {
-      cy.mockWeb3Provider();
-      cy.mockTradingPage();
-      cy.mockSubscription();
-      cy.setVegaWallet();
-
-      cy.visit('/#/portfolio');
-      cy.getByTestId(manageVegaWallet).click();
-      cy.getByTestId(walletTransfer).click();
-
-      cy.wait('@Accounts');
-      cy.wait('@Assets');
-    });
-
-    it('transfer Text', () => {
-      // 1003-TRAN-003
-      cy.getByTestId(transferText)
-        .should('exist')
-        .get(keyID)
-        .invoke('text')
-        .should('match', /[\w.]{6}…[\w.]{6}/);
-    });
-
-    it('invalid vega key validation', () => {
-      //1003-TRAN-013
-      //1003-TRAN-004
-      cy.getByTestId(transferForm).should('be.visible');
-      cy.contains('Enter manually').click();
-      cy.getByTestId(transferForm).find(toAddressField).type('asd');
-      cy.getByTestId(transferForm).find(submitTransferBtn).click();
-      cy.getByTestId(formFieldError).should('contain.text', 'Invalid Vega key');
-      cy.contains('label', 'Vega key').should('be.visible');
-      cy.contains('label', 'Asset').should('be.visible');
-      cy.contains('label', 'Amount').should('be.visible');
-    });
-
-    it('empty fields', () => {
-      // 1003-TRAN-012
-      cy.getByTestId(transferForm).find(submitTransferBtn).click();
-      cy.getByTestId(formFieldError).should('contain.text', 'Required');
-      cy.getByTestId(formFieldError).should('have.length', 3);
-    });
-
-    it('min amount', () => {
-      // 1002-WITH-010
-      // 1003-TRAN-014
-      selectAsset(ASSET_SEPOLIA_TBTC);
-      cy.get(amountField).clear().type('0');
-      cy.getByTestId(transferForm).find(submitTransferBtn).click();
-      cy.getByTestId(errorText).should(
-        'contain.text',
-        'Value is below minimum'
-      );
-    });
-
-    it('max amount', () => {
-      // 1003-TRAN-002
-      // 1003-TRAN-011
-      // 1003-TRAN-002
-      selectAsset(ASSET_EURO); // Will be above maximum because the vega wallet doesn't have any collateral
-      cy.get(amountField).clear().type('1001', { delay: 100 });
-      cy.getByTestId(transferForm).find(submitTransferBtn).click();
-      cy.getByTestId(errorText).should(
-        'contain.text',
-        'You cannot transfer more than your available collateral'
-      );
-    });
-  }
-);

apps/trading-e2e/src/integration/withdraw-key-to-key.cy.ts

@@ -5,15 +5,205 @@ 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 errorText = 'input-error-text';
+const formFieldError = 'input-error-text';
+const includeTransferFeeRadioBtn = 'include-transfer-fee';
+const keyID = `[data-testid="${transferText}"] > .rounded-md`;
+const manageVegaWallet = 'manage-vega-wallet';
 const openTransferButton = 'open-transfer';
 const submitTransferBtn = '[type="submit"]';
 const toAddressField = '[name="toAddress"]';
+const totalTransferfee = 'total-transfer-fee';
+const transferAmount = 'transfer-amount';
 const transferForm = 'transfer-form';
+const transferFee = 'transfer-fee';
+const walletTransfer = 'wallet-transfer';
+
+const ASSET_EURO = 1;
 const ASSET_SEPOLIA_TBTC = 2;
+
 const collateralTab = 'Collateral';
 const toastCloseBtn = 'toast-close';
 const toastContent = 'toast-content';
 
+describe('transfer fees', { tags: '@regression', testIsolation: true }, () => {
+  beforeEach(() => {
+    cy.mockWeb3Provider();
+    cy.mockTradingPage();
+    cy.mockSubscription();
+    cy.setVegaWallet();
+
+    cy.visit('/');
+
+    cy.wait('@Assets');
+    cy.wait('@Accounts');
+
+    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', () => {
+    // 1003-TRAN-015
+    // 1003-TRAN-016
+    // 1003-TRAN-017
+    // 1003-TRAN-018
+    // 1003-TRAN-019
+    cy.getByTestId(transferForm);
+    cy.contains('Enter manually').click();
+
+    cy.getByTestId(transferForm)
+      .find(toAddressField)
+      .type('7f9cf07d3a9905b1a61a1069f7a758855da428bc0f4a97de87f48644bfc25535');
+    selectAsset(ASSET_SEPOLIA_TBTC);
+    cy.getByTestId(transferForm)
+      .find(amountField)
+      .type('1', { delay: 100, force: true });
+
+    /// Check Include Transfer Fee tooltip
+    cy.get('label[for="include-transfer-fee"] div').realHover();
+    cy.get('[data-side="bottom"] div')
+      .should('be.visible')
+      .should('not.be.empty');
+
+    //Check Transfer Fee tooltip
+    cy.contains('div', 'Transfer fee').realHover();
+    cy.get('[data-side="bottom"] div')
+      .should('be.visible')
+      .should('not.be.empty');
+
+    //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');
+
+    //Check Total amount (with fee) tooltip
+    cy.contains('div', 'Total amount (with fee)').realHover();
+    cy.get('[data-side="bottom"] div')
+      .should('be.visible')
+      .should('not.be.empty');
+  });
+
+  it('transfer fees', () => {
+    // 1003-TRAN-020
+    // 1003-TRAN-021
+    // 1003-TRAN-022
+    // 1003-TRAN-023
+    cy.getByTestId(transferForm);
+    cy.contains('Enter manually').click();
+
+    cy.getByTestId(transferForm)
+      .find(toAddressField)
+      .type('7f9cf07d3a9905b1a61a1069f7a758855da428bc0f4a97de87f48644bfc25535');
+    selectAsset(ASSET_SEPOLIA_TBTC);
+    cy.getByTestId(includeTransferFeeRadioBtn).should('be.disabled');
+
+    cy.getByTestId(transferForm)
+      .find(amountField)
+      .type('1', { delay: 100, force: true });
+
+    cy.getByTestId(transferFee)
+      .should('be.visible')
+      .should('contain.text', '0.01');
+    cy.getByTestId(transferAmount)
+      .should('be.visible')
+      .should('contain.text', '1.00');
+    cy.getByTestId(totalTransferfee)
+      .should('be.visible')
+      .should('contain.text', '1.01');
+    cy.getByTestId(includeTransferFeeRadioBtn).click();
+    cy.getByTestId(transferFee)
+      .should('be.visible')
+      .should('contain.text', '0.01');
+    cy.getByTestId(transferAmount)
+      .should('be.visible')
+      .should('contain.text', '0.99');
+    cy.getByTestId(totalTransferfee)
+      .should('be.visible')
+      .should('contain.text', '1.00');
+  });
+});
+
+describe(
+  'transfer form validation',
+  { tags: '@regression', testIsolation: true },
+  () => {
+    beforeEach(() => {
+      cy.mockWeb3Provider();
+      cy.mockTradingPage();
+      cy.mockSubscription();
+      cy.setVegaWallet();
+
+      cy.visit('/#/portfolio');
+      cy.getByTestId(manageVegaWallet).click();
+      cy.getByTestId(walletTransfer).click();
+
+      cy.wait('@Accounts');
+      cy.wait('@Assets');
+    });
+
+    it('transfer Text', () => {
+      // 1003-TRAN-003
+      cy.getByTestId(transferText)
+        .should('exist')
+        .get(keyID)
+        .invoke('text')
+        .should('match', /[\w.]{6}…[\w.]{6}/);
+    });
+
+    it('invalid vega key validation', () => {
+      //1003-TRAN-013
+      //1003-TRAN-004
+      cy.getByTestId(transferForm).should('be.visible');
+      cy.contains('Enter manually').click();
+      cy.getByTestId(transferForm).find(toAddressField).type('asd');
+      cy.getByTestId(transferForm).find(submitTransferBtn).click();
+      cy.getByTestId(formFieldError).should('contain.text', 'Invalid Vega key');
+      cy.contains('label', 'Vega key').should('be.visible');
+      cy.contains('label', 'Asset').should('be.visible');
+      cy.contains('label', 'Amount').should('be.visible');
+    });
+
+    it('empty fields', () => {
+      // 1003-TRAN-012
+      cy.getByTestId(transferForm).find(submitTransferBtn).click();
+      cy.getByTestId(formFieldError).should('contain.text', 'Required');
+      cy.getByTestId(formFieldError).should('have.length', 3);
+    });
+
+    it('min amount', () => {
+      // 1002-WITH-010
+      // 1003-TRAN-014
+      selectAsset(ASSET_SEPOLIA_TBTC);
+      cy.get(amountField).clear().type('0');
+      cy.getByTestId(transferForm).find(submitTransferBtn).click();
+      cy.getByTestId(errorText).should(
+        'contain.text',
+        'Value is below minimum'
+      );
+    });
+
+    it('max amount', () => {
+      // 1003-TRAN-002
+      // 1003-TRAN-011
+      // 1003-TRAN-002
+      selectAsset(ASSET_EURO); // Will be above maximum because the vega wallet doesn't have any collateral
+      cy.get(amountField).clear().type('1001', { delay: 100 });
+      cy.getByTestId(transferForm).find(submitTransferBtn).click();
+      cy.getByTestId(errorText).should(
+        'contain.text',
+        'You cannot transfer more than your available collateral'
+      );
+    });
+  }
+);
 describe('withdraw actions', { tags: '@smoke', testIsolation: true }, () => {
   beforeEach(() => {
     cy.mockWeb3Provider();

apps/trading-e2e/src/support/create-order.ts

@@ -1,4 +1,3 @@
-import { OrderType } from '@vegaprotocol/types';
 import type { OrderSubmission } from '@vegaprotocol/wallet';
 
 const orderSizeField = 'order-size';
@@ -10,9 +9,7 @@ export const createOrder = (order: OrderSubmission): void => {
   cy.log('Placing order', order);
   const { type, side, size, price, timeInForce, expiresAt } = order;
 
-  cy.getByTestId(
-    `order-type-${type === OrderType.TYPE_LIMIT ? 'Limit' : 'Market'}`
-  ).click();
+  cy.getByTestId(`order-type-${type}`).click();
   cy.getByTestId(`order-side-${side}`).click();
   cy.getByTestId(orderSizeField).clear().type(size);
   if (price) {

apps/trading-e2e/src/support/deal-ticket.ts

@@ -6,8 +6,8 @@ export const orderTIFDropDown = 'order-tif';
 export const placeOrderBtn = 'place-order';
 export const toggleShort = 'order-side-SIDE_SELL';
 export const toggleLong = 'order-side-SIDE_BUY';
-export const toggleLimit = 'order-type-Limit';
-export const toggleMarket = 'order-type-Market';
+export const toggleLimit = 'order-type-TYPE_LIMIT';
+export const toggleMarket = 'order-type-TYPE_MARKET';
 
 export const TIFlist = Object.values(Schema.OrderTimeInForce).map((value) => {
   return {

apps/trading/.env

@@ -16,6 +16,6 @@ NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
-NX_STOP_ORDERS=true
+# NX_STOP_ORDERS
 # NX_ICEBERG_ORDERS
 # NX_PRODUCT_PERPETUALS

apps/trading/.env.capsule

@@ -18,6 +18,6 @@ NX_ETH_WALLET_MNEMONIC="ozone access unlock valid olympic save include omit supp
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=false
-NX_STOP_ORDERS=false
+# NX_STOP_ORDERS
 # NX_ICEBERG_ORDERS
 # NX_PRODUCT_PERPETUALS

apps/trading/.env.devnet

@@ -16,6 +16,6 @@ NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
-NX_STOP_ORDERS=true
+# NX_STOP_ORDERS
 # NX_ICEBERG_ORDERS
 # NX_PRODUCT_PERPETUALS

apps/trading/.env.mainnet

@@ -18,6 +18,6 @@ NX_APP_VERSION=v0.20.21-core-0.71.6
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=false
-NX_STOP_ORDERS=false
+# NX_STOP_ORDERS
 # NX_ICEBERG_ORDERS
-# NX_PRODUCT_PERPETUALS
+# NX_PRODUCT_PERPETUALS

apps/trading/.env.mainnet-mirror

@@ -18,6 +18,6 @@ NX_APP_VERSION=v0.20.19-core-0.71.6
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=false
-NX_STOP_ORDERS=false
+# NX_STOP_ORDERS
 # NX_ICEBERG_ORDERS
 # NX_PRODUCT_PERPETUALS

apps/trading/.env.stagnet1

@@ -16,6 +16,6 @@ NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
-NX_STOP_ORDERS=true
+# NX_STOP_ORDERS
 # NX_ICEBERG_ORDERS
 # NX_PRODUCT_PERPETUALS

apps/trading/.env.testnet

@@ -17,6 +17,6 @@ NX_VEGA_CONSOLE_URL=https://console.fairground.wtf
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
-NX_STOP_ORDERS=true
+# NX_STOP_ORDERS
 # NX_ICEBERG_ORDERS
 # NX_PRODUCT_PERPETUALS

apps/trading/.env.validators-testnet

@@ -17,6 +17,6 @@ NX_VEGA_CONSOLE_URL=https://trading.validators-testnet.vega.rocks
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=false
-NX_STOP_ORDERS=false
+# NX_STOP_ORDERS
 # NX_ICEBERG_ORDERS
 # NX_PRODUCT_PERPETUALS

apps/trading/client-pages/home/home.tsx

@@ -23,6 +23,7 @@ export const Home = () => {
         replace: true,
       });
     } else if (data) {
+      update({ shouldDisplayWelcomeDialog: true });
       const marketDataId = data[0]?.id;
       if (marketDataId) {
         navigate(Links[Routes.MARKET](marketDataId), {

apps/trading/client-pages/market/trade-grid.tsx

@@ -10,16 +10,14 @@ import type { Market } from '@vegaprotocol/markets';
 import { Filter } from '@vegaprotocol/orders';
 import { Tab, LocalStoragePersistTabs as Tabs } from '@vegaprotocol/ui-toolkit';
 import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
+import { VegaWalletContainer } from '../../components/vega-wallet-container';
 import {
   ResizableGrid,
   ResizableGridPanel,
   usePaneLayout,
 } from '../../components/resizable-grid';
 import { TradingViews } from './trade-views';
-import {
-  MarketSuccessorBanner,
-  MarketSuccessorProposalBanner,
-} from '../../components/market-banner';
+import { MarketSuccessorBanner } from '../../components/market-banner';
 import { FLAGS } from '@vegaprotocol/environment';
 
 interface TradeGridProps {
@@ -57,11 +55,7 @@ const MainGrid = memo(
             >
               <TradeGridChild>
                 <Tabs storageKey="console-trade-grid-main-left">
-                  <Tab
-                    id="chart"
-                    name={t('Chart')}
-                    menu={<TradingViews.candles.menu />}
-                  >
+                  <Tab id="chart" name={t('Chart')}>
                     <TradingViews.candles.component marketId={marketId} />
                   </Tab>
                   <Tab id="depth" name={t('Depth')}>
@@ -98,48 +92,57 @@ const MainGrid = memo(
           <TradeGridChild>
             <Tabs storageKey="console-trade-grid-bottom">
               <Tab id="positions" name={t('Positions')}>
-                <TradingViews.positions.component
-                  onMarketClick={onMarketClick}
-                />
+                <VegaWalletContainer>
+                  <TradingViews.positions.component
+                    onMarketClick={onMarketClick}
+                  />
+                </VegaWalletContainer>
               </Tab>
               <Tab id="open-orders" name={t('Open')}>
-                <TradingViews.orders.component
-                  marketId={marketId}
-                  filter={Filter.Open}
-                />
+                <VegaWalletContainer>
+                  <TradingViews.orders.component
+                    marketId={marketId}
+                    filter={Filter.Open}
+                  />
+                </VegaWalletContainer>
               </Tab>
               <Tab id="closed-orders" name={t('Closed')}>
-                <TradingViews.orders.component
-                  marketId={marketId}
-                  filter={Filter.Closed}
-                />
+                <VegaWalletContainer>
+                  <TradingViews.orders.component
+                    marketId={marketId}
+                    filter={Filter.Closed}
+                  />
+                </VegaWalletContainer>
               </Tab>
               <Tab id="rejected-orders" name={t('Rejected')}>
-                <TradingViews.orders.component
-                  marketId={marketId}
-                  filter={Filter.Rejected}
-                />
+                <VegaWalletContainer>
+                  <TradingViews.orders.component
+                    marketId={marketId}
+                    filter={Filter.Rejected}
+                  />
+                </VegaWalletContainer>
               </Tab>
               <Tab id="orders" name={t('All')}>
-                <TradingViews.orders.component marketId={marketId} />
+                <VegaWalletContainer>
+                  <TradingViews.orders.component marketId={marketId} />
+                </VegaWalletContainer>
               </Tab>
-              {FLAGS.STOP_ORDERS ? (
-                <Tab id="stop-orders" name={t('Stop orders')}>
-                  <TradingViews.stopOrders.component />
-                </Tab>
-              ) : null}
               <Tab id="fills" name={t('Fills')}>
-                <TradingViews.fills.component
-                  marketId={marketId}
-                  onMarketClick={onMarketClick}
-                />
+                <VegaWalletContainer>
+                  <TradingViews.fills.component
+                    marketId={marketId}
+                    onMarketClick={onMarketClick}
+                  />
+                </VegaWalletContainer>
               </Tab>
               <Tab id="accounts" name={t('Collateral')}>
-                <TradingViews.collateral.component
-                  pinnedAsset={pinnedAsset}
-                  onMarketClick={onMarketClick}
-                  hideButtons
-                />
+                <VegaWalletContainer>
+                  <TradingViews.collateral.component
+                    pinnedAsset={pinnedAsset}
+                    onMarketClick={onMarketClick}
+                    hideButtons
+                  />
+                </VegaWalletContainer>
               </Tab>
             </Tabs>
           </TradeGridChild>
@@ -159,12 +162,7 @@ export const TradeGrid = ({ market, pinnedAsset }: TradeGridProps) => {
   return (
     <div className={wrapperClasses}>
       <div>
-        {FLAGS.SUCCESSOR_MARKETS && (
-          <>
-            <MarketSuccessorBanner market={market} />
-            <MarketSuccessorProposalBanner marketId={market?.id} />
-          </>
-        )}
+        {FLAGS.SUCCESSOR_MARKETS && <MarketSuccessorBanner market={market} />}
         <OracleBanner marketId={market?.id || ''} />
       </div>
       <div className="min-h-0 p-0.5">

apps/trading/client-pages/market/trade-panels.tsx

@@ -12,10 +12,7 @@ import { Splash } from '@vegaprotocol/ui-toolkit';
 import { NO_MARKET } from './constants';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import classNames from 'classnames';
-import {
-  MarketSuccessorBanner,
-  MarketSuccessorProposalBanner,
-} from '../../components/market-banner';
+import { MarketSuccessorBanner } from '../../components/market-banner';
 import { FLAGS } from '@vegaprotocol/environment';
 
 interface TradePanelsProps {
@@ -37,7 +34,6 @@ export const TradePanels = ({
   const onOrderTypeClick = useMarketLiquidityClickHandler();
 
   const [view, setView] = useState<TradingView>('candles');
-
   const renderView = () => {
     const Component = memo<{
       marketId: string;
@@ -66,33 +62,12 @@ export const TradePanels = ({
     );
   };
 
-  const renderMenu = () => {
-    const viewCfg = TradingViews[view];
-
-    if ('menu' in viewCfg) {
-      const Menu = viewCfg.menu;
-      return (
-        <div className="flex gap-1 p-1 bg-vega-clight-800 dark:bg-vega-cdark-800 border-b border-default">
-          <Menu />
-        </div>
-      );
-    }
-
-    return null;
-  };
-
   return (
-    <div className="h-full grid grid-rows-[min-content_min-content_1fr_min-content]">
+    <div className="h-full grid grid-rows-[min-content_1fr_min-content]">
       <div>
-        {FLAGS.SUCCESSOR_MARKETS && (
-          <>
-            <MarketSuccessorBanner market={market} />
-            <MarketSuccessorProposalBanner marketId={market?.id} />
-          </>
-        )}
+        {FLAGS.SUCCESSOR_MARKETS && <MarketSuccessorBanner market={market} />}
         <OracleBanner marketId={market?.id || ''} />
       </div>
-      <div>{renderMenu()}</div>
       <div className="h-full">
         <AutoSizer>
           {({ width, height }) => (
@@ -105,12 +80,9 @@ export const TradePanels = ({
       <div className="flex flex-nowrap overflow-x-auto max-w-full border-t border-default">
         {Object.keys(TradingViews).map((key) => {
           const isActive = view === key;
-          const className = classNames(
-            'py-2 px-4 min-w-[100px] capitalize text-sm',
-            {
-              'bg-vega-clight-500 dark:bg-vega-cdark-500': isActive,
-            }
-          );
+          const className = classNames('p-4 min-w-[100px] capitalize', {
+            'bg-vega-clight-500 dark:bg-vega-cdark-500': isActive,
+          });
           return (
             <button
               data-testid={key}

apps/trading/client-pages/market/trade-views.tsx

@@ -2,10 +2,7 @@ import type { ComponentProps } from 'react';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { TradesContainer } from '@vegaprotocol/trades';
 import { DepthChartContainer } from '@vegaprotocol/market-depth';
-import {
-  CandlesChartContainer,
-  CandlesMenu,
-} from '@vegaprotocol/candles-chart';
+import { CandlesChartContainer } from '@vegaprotocol/candles-chart';
 import { Filter } from '@vegaprotocol/orders';
 import { NO_MARKET } from './constants';
 import { OrderbookContainer } from '../../components/orderbook-container';
@@ -15,7 +12,6 @@ import { AccountsContainer } from '../../components/accounts-container';
 import { LiquidityContainer } from '../../components/liquidity-container';
 import type { OrderContainerProps } from '../../components/orders-container';
 import { OrdersContainer } from '../../components/orders-container';
-import { StopOrdersContainer } from '../../components/stop-orders-container';
 
 type MarketDependantView =
   | typeof CandlesChartContainer
@@ -38,7 +34,6 @@ export const TradingViews = {
   candles: {
     label: 'Candles',
     component: requiresMarket(CandlesChartContainer),
-    menu: CandlesMenu,
   },
   depth: {
     label: 'Depth',
@@ -79,10 +74,6 @@ export const TradingViews = {
     label: 'All',
     component: OrdersContainer,
   },
-  stopOrders: {
-    label: 'Stop',
-    component: StopOrdersContainer,
-  },
   collateral: { label: 'Collateral', component: AccountsContainer },
   fills: { label: 'Fills', component: FillsContainer },
 };

apps/trading/client-pages/markets/markets-page.tsx

@@ -18,7 +18,7 @@ export const MarketsPage = () => {
     <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="open-markets" name={t('Open markets')}>
+          <Tab id="all-markets" name={t('All markets')}>
             <Markets />
           </Tab>
           <Tab id="proposed-markets" name={t('Proposed markets')}>

apps/trading/client-pages/portfolio/account-history-container.tsx

@@ -71,7 +71,7 @@ export const AccountHistoryContainer = () => {
   const { data: assets } = useAssetsDataProvider();
 
   if (!pubKey) {
-    return <Splash>{t('Please connect Vega wallet')}</Splash>;
+    return <Splash>{t('Connect wallet')}</Splash>;
   }
 
   return (

apps/trading/client-pages/portfolio/portfolio.tsx

@@ -13,6 +13,7 @@ import { FillsContainer } from '../../components/fills-container';
 import { PositionsContainer } from '../../components/positions-container';
 import { WithdrawalsContainer } from './withdrawals-container';
 import { OrdersContainer } from '../../components/orders-container';
+import { VegaWalletContainer } from '../../components/vega-wallet-container';
 import { LedgerContainer } from '../../components/ledger-container';
 import { AccountHistoryContainer } from './account-history-container';
 import {
@@ -61,19 +62,29 @@ export const Portfolio = () => {
           <PortfolioGridChild>
             <Tabs storageKey="console-portfolio-top">
               <Tab id="account-history" name={t('Account history')}>
-                <AccountHistoryContainer />
+                <VegaWalletContainer>
+                  <AccountHistoryContainer />
+                </VegaWalletContainer>
               </Tab>
               <Tab id="positions" name={t('Positions')}>
-                <PositionsContainer onMarketClick={onMarketClick} allKeys />
+                <VegaWalletContainer>
+                  <PositionsContainer onMarketClick={onMarketClick} allKeys />
+                </VegaWalletContainer>
               </Tab>
               <Tab id="orders" name={t('Orders')}>
-                <OrdersContainer />
+                <VegaWalletContainer>
+                  <OrdersContainer />
+                </VegaWalletContainer>
               </Tab>
               <Tab id="fills" name={t('Fills')}>
-                <FillsContainer onMarketClick={onMarketClick} />
+                <VegaWalletContainer>
+                  <FillsContainer onMarketClick={onMarketClick} />
+                </VegaWalletContainer>
               </Tab>
               <Tab id="ledger-entries" name={t('Ledger entries')}>
-                <LedgerContainer />
+                <VegaWalletContainer>
+                  <LedgerContainer />
+                </VegaWalletContainer>
               </Tab>
             </Tabs>
           </PortfolioGridChild>
@@ -86,10 +97,14 @@ export const Portfolio = () => {
           <PortfolioGridChild>
             <Tabs storageKey="console-portfolio-bottom">
               <Tab id="collateral" name={t('Collateral')}>
-                <AccountsContainer />
+                <VegaWalletContainer>
+                  <AccountsContainer />
+                </VegaWalletContainer>
               </Tab>
               <Tab id="deposits" name={t('Deposits')}>
-                <DepositsContainer />
+                <VegaWalletContainer>
+                  <DepositsContainer />
+                </VegaWalletContainer>
               </Tab>
               <Tab
                 id="withdrawals"

apps/trading/client-pages/portfolio/withdrawals-container.tsx

@@ -7,6 +7,7 @@ import {
 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 = () => {
@@ -20,7 +21,7 @@ export const WithdrawalsContainer = () => {
   const { ready, delayed } = useIncompleteWithdrawals();
 
   return (
-    <>
+    <VegaWalletContainer>
       <div className="h-full relative">
         <WithdrawalsTable
           data-testid="withdrawals-history"
@@ -42,6 +43,6 @@ export const WithdrawalsContainer = () => {
           </Button>
         </div>
       )}
-    </>
+    </VegaWalletContainer>
   );
 };

apps/trading/components/accounts-container/accounts-container.tsx

@@ -1,8 +1,8 @@
 import { useCallback } from 'react';
 import { Button } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
-import { Splash } from '@vegaprotocol/ui-toolkit';
 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';

apps/trading/components/constants.ts

@@ -1,7 +1,7 @@
 import { t } from '@vegaprotocol/i18n';
 
 export const THROTTLE_UPDATE_TIME = 500;
-export const ONBOARDING_VIEWED_KEY = 'vega_onboarding_viewed';
+export const RISK_ACCEPTED_KEY = 'vega_risk_accepted';
 export const MAINNET_WELCOME_HEADER = t(
   'Trade cash settled futures on the fully decentralised Vega network.'
 );

apps/trading/components/fills-container/fills-container.tsx

@@ -1,10 +1,10 @@
+import { t } from '@vegaprotocol/i18n';
+import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { FillsManager } from '@vegaprotocol/fills';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { useDataGridEvents } from '@vegaprotocol/datagrid';
-import { t } from '@vegaprotocol/i18n';
-import { Splash } from '@vegaprotocol/ui-toolkit';
 import type { DataGridSlice } from '../../stores/datagrid-store-slice';
 import { createDataGridSlice } from '../../stores/datagrid-store-slice';
 

apps/trading/components/header/header.tsx

@@ -17,7 +17,7 @@ export const Header = ({ title, children }: TradeMarketHeaderProps) => {
   );
   return (
     <header className={headerClasses}>
-      <div className="hidden lg:flex flex-col justify-center items-start pl-3 lg:pl-4 pt-2 xl:pb-2 pb-0">
+      <div className="flex flex-col justify-center items-start pl-3 lg:pl-4 pt-2 xl:pb-2 pb-0">
         {title}
       </div>
       <div data-testid="header-summary" className="min-w-0">

apps/trading/components/icons/wallet.tsx

@@ -1,12 +1,10 @@
-import classNames from 'classnames';
-
 export const WalletIcon = ({ className }: { className?: string }) => {
   return (
     <svg
       width="26"
       height="18"
       viewBox="0 0 26 18"
-      className={classNames('fill-current', className)}
+      className={className}
       data-testid="wallet-icon"
     >
       <path d="M4.77437 17.7499H4.74987C3.6504 17.7368 2.77439 16.8489 2.77439 15.7772V12.8495V12.6343L2.5615 12.6023C1.59672 12.4575 0.849609 11.6116 0.849609 10.6266V7.40064C0.849609 6.39018 1.59509 5.56985 2.56147 5.4249L2.77439 5.39297V5.17767V2.24998C2.77439 1.14102 3.66537 0.25 4.77437 0.25H23.7501C24.8591 0.25 25.7501 1.14098 25.7501 2.24998V15.7499C25.7501 16.8588 24.8591 17.7499 23.7501 17.7499H4.77437ZM4.44917 12.5992H4.19917L4.77441 16.075V16.325H4.77466H23.7502C24.0778 16.325 24.3254 16.0777 24.3254 15.7497V2.24984C24.3254 1.9222 24.0782 1.6746 23.7502 1.6746H4.77441C4.44677 1.6746 4.19917 1.92182 4.19917 2.24984V5.12306V5.37306H4.44917H7.0244C8.51139 5.37306 9.67508 6.56094 9.67508 8.02374V9.94852C9.67508 11.4355 8.4872 12.5992 7.0244 12.5992H4.44917ZM2.84963 6.8253C2.52199 6.8253 2.27439 7.07253 2.27439 7.40054V10.6264C2.27439 10.9541 2.52161 11.2017 2.84962 11.2017L7.02419 11.2019C7.73619 11.2019 8.25009 10.6515 8.25009 9.97598V8.0512C8.25009 7.3392 7.69976 6.8253 7.0242 6.8253H2.84963Z" />

apps/trading/components/layouts/layout-with-sidebar.tsx

@@ -11,9 +11,9 @@ export const LayoutWithSidebar = () => {
 
   const gridClasses = classNames(
     'h-full relative z-0 grid',
-    'grid-rows-[min-content_1fr_40px]',
-    'lg:grid-rows-[min-content_1fr]',
-    'lg:grid-cols-[1fr_350px_40px]'
+    'grid-rows-[min-content_1fr]',
+    'grid-cols-[1fr_45px]',
+    'lg:grid-cols-[1fr_350px_45px]'
   );
 
   return (
@@ -40,14 +40,7 @@ export const LayoutWithSidebar = () => {
       >
         <SidebarContent />
       </aside>
-      <div
-        className={classNames(
-          'bg-vega-clight-800 dark:bg-vega-cdark-800',
-          'border-t lg:border-l lg:border-t-0 border-default',
-          'row-start-3 col-start-1 cols-span-full',
-          'lg:row-start-2 lg:row-span-full lg:col-start-3'
-        )}
-      >
+      <div className="col-start-2 lg:col-start-3 bg-vega-clight-800 dark:bg-vega-cdark-800 border-l border-default">
         <Sidebar />
       </div>
     </div>

apps/trading/components/liquidity-container/liquidity-container.tsx

@@ -12,9 +12,10 @@ import {
   NetworkParams,
   useNetworkParams,
 } from '@vegaprotocol/network-parameters';
+import type { AgGridReact } from 'ag-grid-react';
 import type { DataGridSlice } from '../../stores/datagrid-store-slice';
 import { createDataGridSlice } from '../../stores/datagrid-store-slice';
-import { useEffect } from 'react';
+import { useEffect, useRef } from 'react';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 
@@ -25,6 +26,8 @@ export const LiquidityContainer = ({
   marketId: string | undefined;
   filter?: Filter;
 }) => {
+  const gridRef = useRef<AgGridReact | null>(null);
+
   const gridStore = useLiquidityStore((store) => store.gridStore);
   const updateGridStore = useLiquidityStore((store) => store.updateGridStore);
 
@@ -57,6 +60,7 @@ export const LiquidityContainer = ({
   return (
     <div className="h-full relative">
       <LiquidityTable
+        ref={gridRef}
         rowData={data}
         symbol={symbol}
         assetDecimalPlaces={assetDecimalPlaces}

apps/trading/components/liquidity-header/liquidity-header.tsx

@@ -42,6 +42,8 @@ export const LiquidityHeader = () => {
     triggeringRatio,
   });
 
+  console.log(market);
+
   return (
     <Header
       title={

apps/trading/components/market-banner/index.ts

@@ -1,2 +1 @@
 export * from './market-successor-banner';
-export * from './market-successor-proposal-banner';

apps/trading/components/market-banner/market-successor-proposal-banner.spec.tsx

@@ -1,155 +0,0 @@
-import { act, render, screen, waitFor } from '@testing-library/react';
-import type { SingleExecutionResult } from '@apollo/client';
-import type { MockedResponse } from '@apollo/react-testing';
-import { MockedProvider } from '@apollo/react-testing';
-import { MarketSuccessorProposalBanner } from './market-successor-proposal-banner';
-import type { SuccessorProposalsListQuery } from '@vegaprotocol/proposals';
-import { SuccessorProposalsListDocument } from '@vegaprotocol/proposals';
-
-const marketProposalMock: MockedResponse<SuccessorProposalsListQuery> = {
-  request: {
-    query: SuccessorProposalsListDocument,
-  },
-  result: {
-    data: {
-      proposalsConnection: {
-        edges: [
-          {
-            node: {
-              __typename: 'Proposal',
-              id: 'proposal-1',
-              terms: {
-                __typename: 'ProposalTerms',
-                change: {
-                  __typename: 'NewMarket',
-                  instrument: {
-                    name: 'New proposal of the market successor',
-                  },
-                  successorConfiguration: {
-                    parentMarketId: 'marketId',
-                  },
-                },
-              },
-            },
-          },
-        ],
-      },
-    },
-  },
-};
-
-describe('MarketSuccessorProposalBanner', () => {
-  it('should display single proposal', async () => {
-    render(
-      <MockedProvider mocks={[marketProposalMock]}>
-        <MarketSuccessorProposalBanner marketId="marketId" />
-      </MockedProvider>
-    );
-    await waitFor(() => {
-      expect(
-        screen.getByText('A successors to this market has been proposed')
-      ).toBeInTheDocument();
-    });
-    expect(
-      screen
-        .getByRole('link')
-        .getAttribute('href')
-        ?.endsWith('/proposals/proposal-1') ?? false
-    ).toBe(true);
-  });
-  it('should display plural proposals', async () => {
-    const dualProposalMock = {
-      ...marketProposalMock,
-      result: {
-        ...marketProposalMock.result,
-        data: {
-          proposalsConnection: {
-            edges: [
-              ...((
-                marketProposalMock?.result as SingleExecutionResult<SuccessorProposalsListQuery>
-              )?.data?.proposalsConnection?.edges ?? []),
-              {
-                node: {
-                  __typename: 'Proposal',
-                  id: 'proposal-2',
-                  terms: {
-                    __typename: 'ProposalTerms',
-                    change: {
-                      __typename: 'NewMarket',
-                      instrument: {
-                        name: 'New second proposal of the market successor',
-                      },
-                      successorConfiguration: {
-                        parentMarketId: 'marketId',
-                      },
-                    },
-                  },
-                },
-              },
-            ],
-          },
-        },
-      },
-    };
-
-    render(
-      <MockedProvider mocks={[dualProposalMock]}>
-        <MarketSuccessorProposalBanner marketId="marketId" />
-      </MockedProvider>
-    );
-    await waitFor(() => {
-      expect(
-        screen.getByText('Successors to this market have been proposed')
-      ).toBeInTheDocument();
-    });
-    expect(
-      screen
-        .getAllByRole('link')[0]
-        .getAttribute('href')
-        ?.endsWith('/proposals/proposal-1') ?? false
-    ).toBe(true);
-    expect(
-      screen
-        .getAllByRole('link')[1]
-        .getAttribute('href')
-        ?.endsWith('/proposals/proposal-2') ?? false
-    ).toBe(true);
-  });
-
-  it('banner should be hidden because no proposals', () => {
-    const { container } = render(
-      <MockedProvider>
-        <MarketSuccessorProposalBanner marketId="marketId" />
-      </MockedProvider>
-    );
-    expect(container).toBeEmptyDOMElement();
-  });
-
-  it('banner should be hidden because no proposals for the market', () => {
-    const { container } = render(
-      <MockedProvider mocks={[marketProposalMock]}>
-        <MarketSuccessorProposalBanner marketId="otherMarketId" />
-      </MockedProvider>
-    );
-    expect(container).toBeEmptyDOMElement();
-  });
-
-  it('banner should be hidden after user close click', async () => {
-    const { container } = render(
-      <MockedProvider mocks={[marketProposalMock]}>
-        <MarketSuccessorProposalBanner marketId="marketId" />
-      </MockedProvider>
-    );
-    await waitFor(() => {
-      expect(
-        screen.getByText('A successors to this market has been proposed')
-      ).toBeInTheDocument();
-    });
-    await act(() => {
-      screen.getByTestId('notification-banner-close').click();
-    });
-    await waitFor(() => {
-      expect(container).toBeEmptyDOMElement();
-    });
-  });
-});

apps/trading/components/market-banner/market-successor-proposal-banner.tsx

@@ -1,71 +0,0 @@
-import { useState } from 'react';
-import type {
-  SuccessorProposalListFieldsFragment,
-  NewMarketSuccessorFieldsFragment,
-} from '@vegaprotocol/proposals';
-import { useSuccessorProposalsListQuery } from '@vegaprotocol/proposals';
-import {
-  ExternalLink,
-  Intent,
-  NotificationBanner,
-} from '@vegaprotocol/ui-toolkit';
-import { t } from '@vegaprotocol/i18n';
-import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
-
-export const MarketSuccessorProposalBanner = ({
-  marketId,
-}: {
-  marketId?: string;
-}) => {
-  const { data: proposals } = useSuccessorProposalsListQuery({
-    skip: !marketId,
-  });
-  const successors =
-    proposals?.proposalsConnection?.edges
-      ?.map((item) => item?.node as SuccessorProposalListFieldsFragment)
-      .filter(
-        (item: SuccessorProposalListFieldsFragment) =>
-          (item.terms?.change as NewMarketSuccessorFieldsFragment)
-            ?.successorConfiguration?.parentMarketId === marketId
-      ) ?? [];
-  const [visible, setVisible] = useState(true);
-  const tokenLink = useLinks(DApp.Token);
-  if (visible && successors.length) {
-    return (
-      <NotificationBanner
-        intent={Intent.Primary}
-        onClose={() => {
-          setVisible(false);
-        }}
-      >
-        <div className="uppercase mb-1">
-          {successors.length === 1
-            ? t('A successors to this market has been proposed')
-            : t('Successors to this market have been proposed')}
-        </div>
-        <div>
-          {successors.length === 1
-            ? t('Check out the terms of the proposal and vote:')
-            : t('Check out the terms of the proposals and vote:')}{' '}
-          {successors.map((item, i) => {
-            const externalLink = tokenLink(
-              TOKEN_PROPOSAL.replace(':id', item.id || '')
-            );
-            return (
-              <>
-                <ExternalLink href={externalLink} key={i}>
-                  {
-                    (item.terms?.change as NewMarketSuccessorFieldsFragment)
-                      ?.instrument.name
-                  }
-                </ExternalLink>
-                {i < successors.length - 1 && ', '}
-              </>
-            );
-          })}
-        </div>
-      </NotificationBanner>
-    );
-  }
-  return null;
-};

apps/trading/components/market-header/market-header.tsx

@@ -4,12 +4,10 @@ import { useParams } from 'react-router-dom';
 import { MarketSelector } from '../../components/market-selector/market-selector';
 import { MarketHeaderStats } from '../../client-pages/market/market-header-stats';
 import { useMarket } from '@vegaprotocol/markets';
-import { useState } from 'react';
 
 export const MarketHeader = () => {
   const { marketId } = useParams();
   const { data } = useMarket(marketId);
-  const [open, setOpen] = useState(false);
 
   if (!data) return null;
 
@@ -17,8 +15,6 @@ export const MarketHeader = () => {
     <Header
       title={
         <Popover
-          open={open}
-          onChange={setOpen}
           trigger={
             <HeaderTitle>
               {data.tradableInstrument.instrument.code}
@@ -27,10 +23,7 @@ export const MarketHeader = () => {
           }
           alignOffset={-10}
         >
-          <MarketSelector
-            currentMarketId={marketId}
-            onSelect={() => setOpen(false)}
-          />
+          <MarketSelector currentMarketId={marketId} />
         </Popover>
       }
     >

apps/trading/components/market-selector/market-selector-item.spec.tsx

@@ -98,7 +98,6 @@ describe('MarketSelectorItem', () => {
             market={market}
             currentMarketId={market.id}
             style={{}}
-            onSelect={jest.fn()}
           />
         </MockedProvider>
       </MemoryRouter>

apps/trading/components/market-selector/market-selector-item.tsx

@@ -17,12 +17,10 @@ export const MarketSelectorItem = ({
   market,
   style,
   currentMarketId,
-  onSelect,
 }: {
   market: MarketMaybeWithDataAndCandles;
   style: CSSProperties;
   currentMarketId?: string;
-  onSelect: (marketId: string) => void;
 }) => {
   return (
     <div style={style} role="row">
@@ -34,7 +32,6 @@ export const MarketSelectorItem = ({
           'bg-vega-clight-600 dark:bg-vega-cdark-600':
             market.id === currentMarketId,
         })}
-        onClick={() => onSelect(market.id)}
       >
         <MarketData market={market} />
       </Link>
@@ -83,7 +80,7 @@ const MarketData = ({ market }: { market: MarketMaybeWithDataAndCandles }) => {
   return (
     <>
       <div className="w-2/5" role="gridcell">
-        <h3 className="text-ellipsis text-sm lg:text-base whitespace-nowrap overflow-hidden">
+        <h3 className="text-ellipsis whitespace-nowrap overflow-hidden">
           {market.tradableInstrument.instrument.code}
         </h3>
         {mode && (
@@ -93,7 +90,7 @@ const MarketData = ({ market }: { market: MarketMaybeWithDataAndCandles }) => {
         )}
       </div>
       <div
-        className="w-1/5 text-xs lg:text-sm whitespace-nowrap text-ellipsis overflow-hidden"
+        className="w-1/5 text-sm whitespace-nowrap text-ellipsis overflow-hidden"
         title={instrument.product.settlementAsset.symbol}
         data-testid="market-selector-price"
         role="gridcell"
@@ -101,7 +98,7 @@ const MarketData = ({ market }: { market: MarketMaybeWithDataAndCandles }) => {
         {price} {instrument.product.settlementAsset.symbol}
       </div>
       <div
-        className="w-1/5 text-xs lg:text-sm text-right whitespace-nowrap text-ellipsis overflow-hidden"
+        className="w-1/5 text-sm text-right whitespace-nowrap text-ellipsis overflow-hidden"
         title={t('24h vol')}
         data-testid="market-selector-volume"
         role="gridcell"

apps/trading/components/market-selector/market-selector.spec.tsx

@@ -137,7 +137,7 @@ describe('MarketSelector', () => {
   it('renders only active markets', () => {
     render(
       <MemoryRouter>
-        <MarketSelector currentMarketId="market-0" onSelect={jest.fn()} />
+        <MarketSelector currentMarketId="market-0" />
       </MemoryRouter>
     );
     expect(screen.getAllByTestId(/market-\d/)).toHaveLength(
@@ -148,7 +148,7 @@ describe('MarketSelector', () => {
   it('filters by product type', async () => {
     render(
       <MemoryRouter>
-        <MarketSelector currentMarketId="market-0" onSelect={jest.fn()} />
+        <MarketSelector currentMarketId="market-0" />
       </MemoryRouter>
     );
 
@@ -174,7 +174,7 @@ describe('MarketSelector', () => {
   it('filters by search term', async () => {
     render(
       <MemoryRouter>
-        <MarketSelector currentMarketId="market-0" onSelect={jest.fn()} />
+        <MarketSelector currentMarketId="market-0" />
       </MemoryRouter>
     );
 
@@ -202,7 +202,7 @@ describe('MarketSelector', () => {
   it('filters by asset', async () => {
     render(
       <MemoryRouter>
-        <MarketSelector currentMarketId="market-0" onSelect={jest.fn()} />
+        <MarketSelector currentMarketId="market-0" />
       </MemoryRouter>
     );
 
@@ -234,7 +234,7 @@ describe('MarketSelector', () => {
   it('sorts by gained', async () => {
     render(
       <MemoryRouter>
-        <MarketSelector currentMarketId="market-0" onSelect={jest.fn()} />
+        <MarketSelector currentMarketId="market-0" />
       </MemoryRouter>
     );
 
@@ -256,7 +256,7 @@ describe('MarketSelector', () => {
   it('sorts by lost', async () => {
     render(
       <MemoryRouter>
-        <MarketSelector currentMarketId="market-0" onSelect={jest.fn()} />
+        <MarketSelector currentMarketId="market-0" />
       </MemoryRouter>
     );
 
@@ -272,7 +272,7 @@ describe('MarketSelector', () => {
   it('sorts by new', async () => {
     render(
       <MemoryRouter>
-        <MarketSelector currentMarketId="market-0" onSelect={jest.fn()} />
+        <MarketSelector currentMarketId="market-0" />
       </MemoryRouter>
     );
 

apps/trading/components/market-selector/market-selector.tsx

@@ -35,7 +35,7 @@ export const MarketSelector = ({
   onSelect,
 }: {
   currentMarketId?: string;
-  onSelect: (marketId: string) => void;
+  onSelect?: (marketId: string) => void;
 }) => {
   const [filter, setFilter] = useState<Filter>({
     searchTerm: '',
@@ -48,7 +48,7 @@ export const MarketSelector = ({
 
   return (
     <div data-testid="market-selector">
-      <div className="pt-2 px-2 mb-2">
+      <div className="pt-2 px-2 mb-2 w-[320px] lg:w-[584px]">
         <ProductSelector
           product={filter.product}
           onSelect={(product) => {
@@ -147,17 +147,16 @@ const MarketList = ({
   loading: boolean;
   searchTerm: string;
   currentMarketId?: string;
-  onSelect: (marketId: string) => void;
+  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 computedHeight = rect
+  const height = rect
     ? Math.min(data.length * itemSize, window.innerHeight - rect.y)
     : 400;
-  const height = Math.max(computedHeight, 45);
 
   if (error) {
     return <div>{error.message}</div>;
@@ -200,7 +199,7 @@ const MarketList = ({
 
 interface ListItemData {
   data: MarketMaybeWithDataAndCandles[];
-  onSelect: (marketId: string) => void;
+  onSelect?: (marketId: string) => void;
   currentMarketId?: string;
 }
 
@@ -217,7 +216,6 @@ const ListItem = ({
     market={data.data[index]}
     currentMarketId={data.currentMarketId}
     style={style}
-    onSelect={data.onSelect}
   />
 );
 
@@ -254,11 +252,7 @@ const List = ({
 
   if (!data.length) {
     return (
-      <div
-        style={{ height }}
-        className="flex items-center"
-        data-testid="no-items"
-      >
+      <div style={{ height }} data-testid="no-items">
         <div className="mx-4 my-2 text-sm">{noItems}</div>
       </div>
     );

apps/trading/components/navbar/index.tsx

@@ -1,2 +1 @@
 export * from './navbar';
-export * from './nav-header';

apps/trading/components/navbar/nav-header.tsx

@@ -1,66 +0,0 @@
-import { VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
-import { MarketSelector } from '../market-selector';
-import { useMarket } from '@vegaprotocol/markets';
-import { t } from '@vegaprotocol/i18n';
-import { useParams } from 'react-router-dom';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
-import { useState } from 'react';
-
-/**
- * This is only rendered for the mobile navigation
- */
-export const NavHeader = () => {
-  const { marketId } = useParams();
-  const { data } = useMarket(marketId);
-  const [open, setOpen] = useState(false);
-
-  if (!marketId) return null;
-
-  return (
-    <FullScreenPopover
-      open={open}
-      onOpenChange={(x) => {
-        setOpen(x);
-      }}
-      trigger={
-        <h1 className="flex gap-1 sm:gap-2 md:gap-4 items-center text-default text-lg whitespace-nowrap xl:pr-4 xl:border-r border-default">
-          {data ? data.tradableInstrument.instrument.code : t('Select market')}
-          <VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={20} />
-        </h1>
-      }
-    >
-      <MarketSelector
-        currentMarketId={marketId}
-        onSelect={() => setOpen(false)}
-      />
-    </FullScreenPopover>
-  );
-};
-
-export interface PopoverProps extends PopoverPrimitive.PopoverProps {
-  trigger: React.ReactNode | string;
-}
-
-export const FullScreenPopover = ({
-  trigger,
-  children,
-  open,
-  onOpenChange,
-}: PopoverProps) => {
-  return (
-    <PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>
-      <PopoverPrimitive.Trigger data-testid="popover-trigger">
-        {trigger}
-      </PopoverPrimitive.Trigger>
-      <PopoverPrimitive.Portal>
-        <PopoverPrimitive.Content
-          data-testid="popover-content"
-          className="w-screen bg-vega-clight-800 dark:bg-vega-cdark-800 text-default border border-default"
-          sideOffset={5}
-        >
-          {children}
-        </PopoverPrimitive.Content>
-      </PopoverPrimitive.Portal>
-    </PopoverPrimitive.Root>
-  );
-};

apps/trading/components/navbar/navbar.spec.tsx

@@ -1,158 +1,42 @@
-import { render, screen, within } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
+import { render, screen } from '@testing-library/react';
 import { MemoryRouter } from 'react-router-dom';
+import { MockedProvider } from '@apollo/client/testing';
 import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
 import { VegaWalletContext } from '@vegaprotocol/wallet';
 import { Navbar } from './navbar';
-import { useGlobalStore } from '../../stores';
-
-jest.mock('@vegaprotocol/proposals', () => ({
-  ProtocolUpgradeCountdown: () => null,
-}));
 
 describe('Navbar', () => {
-  const pubKey = '000';
-  const pubKeys = [
-    {
-      publicKey: pubKey,
-      name: 'Pub key 0',
-    },
-    {
-      publicKey: '111',
-      name: 'Pub key 1',
-    },
-  ];
-  const marketId = 'abc';
-  const navbarContent = 'navbar-menu-content';
-
-  const renderComponent = (
-    initialEntries?: string[],
-    walletContext?: Partial<VegaWalletContextShape>
-  ) => {
-    const context = {
-      pubKey,
-      pubKeys,
-      selectPubKey: jest.fn(),
-      disconnect: jest.fn(),
-      ...walletContext,
-    } as VegaWalletContextShape;
-    return render(
-      <MemoryRouter initialEntries={initialEntries}>
-        <VegaWalletContext.Provider value={context}>
-          <Navbar />
-        </VegaWalletContext.Provider>
-      </MemoryRouter>
-    );
-  };
-
-  beforeAll(() => {
-    useGlobalStore.setState({ marketId });
-  });
-
+  const pubKey = 'pubKey';
   it('should be properly rendered', () => {
-    renderComponent();
-
-    const expectedLinks = [
-      ['/', ''],
-      ['/markets/all', 'Markets'],
-      [`/markets/${marketId}`, 'Trading'],
-      ['/portfolio', 'Portfolio'],
-    ];
-
-    const links = screen.getAllByRole('link');
-
-    links.forEach((link, i) => {
-      const [href, text] = expectedLinks[i];
-      expect(link).toHaveAttribute('href', href);
-      expect(link).toHaveTextContent(text);
-    });
+    render(
+      <MockedProvider>
+        <MemoryRouter>
+          <VegaWalletContext.Provider
+            value={{ pubKey } as VegaWalletContextShape}
+          >
+            <Navbar theme="dark" />
+          </VegaWalletContext.Provider>
+        </MemoryRouter>
+      </MockedProvider>
+    );
+    expect(screen.getByTestId('Markets')).toBeInTheDocument();
+    expect(screen.getByTestId('Trading')).toBeInTheDocument();
+    expect(screen.getByTestId('Portfolio')).toBeInTheDocument();
   });
 
   it('Markets page route should not match empty market page', () => {
-    renderComponent(['/markets/all']);
-    expect(screen.getByRole('link', { name: 'Markets' })).toHaveClass('active');
-    expect(screen.getByRole('link', { name: 'Trading' })).not.toHaveClass(
-      'active'
+    render(
+      <MockedProvider>
+        <MemoryRouter initialEntries={['/markets/all']}>
+          <VegaWalletContext.Provider
+            value={{ pubKey } as VegaWalletContextShape}
+          >
+            <Navbar theme="dark" />
+          </VegaWalletContext.Provider>
+        </MemoryRouter>
+      </MockedProvider>
     );
-  });
-
-  it('can open menu and navigate on small screens', async () => {
-    renderComponent();
-    await userEvent.click(screen.getByRole('button', { name: 'Menu' }));
-
-    const menuEl = screen.getByTestId(navbarContent);
-    expect(menuEl).toBeInTheDocument();
-    const menu = within(menuEl);
-
-    const expectedLinks = [
-      ['/markets/all', 'Markets'],
-      [`/markets/${marketId}`, 'Trading'],
-      ['/portfolio', 'Portfolio'],
-    ];
-    const links = menu.getAllByRole('link');
-    links.forEach((link, i) => {
-      const [href, text] = expectedLinks[i];
-      expect(link).toHaveAttribute('href', href);
-      expect(link).toHaveTextContent(text);
-    });
-
-    await userEvent.click(screen.getByRole('button', { name: 'Close menu' }));
-    expect(screen.queryByTestId(navbarContent)).not.toBeInTheDocument();
-  });
-
-  it('can close menu by clicking overlay', async () => {
-    renderComponent();
-    await userEvent.click(screen.getByRole('button', { name: 'Menu' }));
-    expect(screen.getByTestId(navbarContent)).toBeInTheDocument();
-    await userEvent.click(screen.getByTestId('navbar-menu-overlay'));
-    expect(screen.queryByTestId(navbarContent)).not.toBeInTheDocument();
-  });
-
-  it('can open wallet menu on small screens and change pubkey', async () => {
-    const mockSelectPubKey = jest.fn();
-    renderComponent(undefined, { selectPubKey: mockSelectPubKey });
-    await userEvent.click(screen.getByRole('button', { name: 'Wallet' }));
-
-    const menuEl = screen.getByTestId(navbarContent);
-    expect(menuEl).toBeInTheDocument();
-    const menu = within(menuEl);
-
-    expect(menu.getAllByTestId(/key-\d+-mobile/)).toHaveLength(pubKeys.length);
-
-    const activeKey = within(menu.getByTestId('key-000-mobile'));
-    expect(activeKey.getByText(pubKeys[0].name)).toBeInTheDocument();
-    expect(activeKey.getByTestId('icon-tick')).toBeInTheDocument();
-
-    const inactiveKey = within(menu.getByTestId('key-111-mobile'));
-    await userEvent.click(inactiveKey.getByText(pubKeys[1].name));
-    expect(mockSelectPubKey).toHaveBeenCalledWith(pubKeys[1].publicKey);
-  });
-
-  it('can transfer and close menu', async () => {
-    renderComponent();
-    await userEvent.click(screen.getByRole('button', { name: 'Wallet' }));
-
-    const menuEl = screen.getByTestId(navbarContent);
-    expect(menuEl).toBeInTheDocument();
-    const menu = within(menuEl);
-
-    await userEvent.click(menu.getByText('Transfer'));
-
-    expect(screen.queryByTestId(navbarContent)).not.toBeInTheDocument();
-  });
-
-  it('can disconnect and close menu', async () => {
-    const mockDisconnect = jest.fn();
-    renderComponent(undefined, { disconnect: mockDisconnect });
-    await userEvent.click(screen.getByRole('button', { name: 'Wallet' }));
-
-    const menuEl = screen.getByTestId(navbarContent);
-    expect(menuEl).toBeInTheDocument();
-    const menu = within(menuEl);
-
-    await userEvent.click(menu.getByText('Disconnect'));
-
-    expect(mockDisconnect).toHaveBeenCalled();
-    expect(screen.queryByTestId(navbarContent)).not.toBeInTheDocument();
+    expect(screen.getByTestId('Markets')).toHaveClass('active');
+    expect(screen.getByTestId('Trading')).not.toHaveClass('active');
   });
 });

apps/trading/components/navbar/navbar.tsx

@@ -1,400 +1,140 @@
-import type { ButtonHTMLAttributes, LiHTMLAttributes, ReactNode } from 'react';
-import { useState } from 'react';
-import { useEnvironment, DocsLinks, Networks } from '@vegaprotocol/environment';
+import type { ComponentProps, ReactNode } from 'react';
+import {
+  DApp,
+  NetworkSwitcher,
+  TOKEN_GOVERNANCE,
+  useEnvironment,
+  useLinks,
+  DocsLinks,
+} from '@vegaprotocol/environment';
 import { t } from '@vegaprotocol/i18n';
 import { useGlobalStore } from '../../stores';
 import { VegaWalletConnectButton } from '../vega-wallet-connect-button';
-import { VegaIconNames, VegaIcon, VLogo } from '@vegaprotocol/ui-toolkit';
-import * as N from '@radix-ui/react-navigation-menu';
-import * as D from '@radix-ui/react-dialog';
-import { NavLink } from 'react-router-dom';
+import {
+  Navigation,
+  NavigationList,
+  NavigationItem,
+  NavigationLink,
+  ExternalLink,
+  NavigationBreakpoint,
+  NavigationTrigger,
+  NavigationContent,
+  VegaIconNames,
+  VegaIcon,
+} from '@vegaprotocol/ui-toolkit';
 
 import { Links, Routes } from '../../pages/client-router';
-import classNames from 'classnames';
-import { VegaWalletMenu } from '../vega-wallet';
-import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
-import { WalletIcon } from '../icons/wallet';
-import { ProtocolUpgradeCountdown } from '@vegaprotocol/proposals';
-
-type MenuState = 'wallet' | 'nav' | null;
-type Theme = 'system' | 'yellow';
+import {
+  ProtocolUpgradeCountdown,
+  ProtocolUpgradeCountdownMode,
+} from '@vegaprotocol/proposals';
 
 export const Navbar = ({
-  children,
   theme = 'system',
 }: {
-  children?: ReactNode;
-  theme?: Theme;
+  theme: ComponentProps<typeof Navigation>['theme'];
 }) => {
-  // menu state for small screens
-  const [menu, setMenu] = useState<MenuState>(null);
-
-  const { pubKey } = useVegaWallet();
-
-  const openVegaWalletDialog = useVegaWalletDialogStore(
-    (store) => store.openVegaWalletDialog
-  );
-
-  const isConnected = pubKey !== null;
-
-  const navTextClasses = 'text-vega-clight-200 dark:text-vega-cdark-200';
-  const rootClasses = classNames(
-    navTextClasses,
-    'flex gap-3 h-10 pr-1',
-    'border-b border-default',
-    'bg-vega-clight-800 dark:bg-vega-cdark-800'
-  );
-  return (
-    <N.Root className={rootClasses}>
-      <NavLink
-        to="/"
-        className={classNames('flex items-center px-3', {
-          'bg-vega-yellow text-vega-clight-50': theme === 'yellow',
-          'text-default': theme === 'system',
-        })}
-      >
-        <VLogo className="w-4" />
-      </NavLink>
-      {/* Left section */}
-      <div className="lg:hidden flex items-center">{children}</div>
-      {/* Used to show header in nav on mobile */}
-      <div className="hidden lg:block">
-        <NavbarMenu onClick={() => setMenu(null)} />
-      </div>
-
-      {/* Right section */}
-      <div className="ml-auto flex justify-end items-center gap-2">
-        <ProtocolUpgradeCountdown />
-        <NavbarMobileButton
-          onClick={() => {
-            if (isConnected) {
-              setMenu((x) => (x === 'wallet' ? null : 'wallet'));
-            } else {
-              openVegaWalletDialog();
-            }
-          }}
-          data-testid="navbar-mobile-wallet"
-        >
-          <span className="sr-only">{t('Wallet')}</span>
-          <WalletIcon className="w-6" />
-        </NavbarMobileButton>
-        <NavbarMobileButton
-          onClick={() => {
-            setMenu((x) => (x === 'nav' ? null : 'nav'));
-          }}
-          data-testid="navbar-mobile-burger"
-        >
-          <span className="sr-only">{t('Menu')}</span>
-          <BurgerIcon />
-        </NavbarMobileButton>
-        <div className="hidden lg:block">
-          <VegaWalletConnectButton />
-        </div>
-      </div>
-      {menu !== null && (
-        <D.Root
-          open={menu !== null}
-          onOpenChange={(open) => setMenu((x) => (open ? x : null))}
-        >
-          <D.Overlay
-            className="lg:hidden fixed inset-0 dark:bg-black/80 bg-black/50 z-20"
-            data-testid="navbar-menu-overlay"
-          />
-          <D.Content
-            className={classNames(
-              'lg:hidden',
-              'fixed top-0 right-0 z-20 w-3/4 h-screen border-l border-default bg-vega-clight-700 dark:bg-vega-cdark-700',
-              navTextClasses
-            )}
-            data-testid="navbar-menu-content"
-          >
-            <div className="flex justify-end items-center h-10 p-1">
-              <NavbarMobileButton onClick={() => setMenu(null)}>
-                <span className="sr-only">{t('Close menu')}</span>
-                <VegaIcon name={VegaIconNames.CROSS} size={24} />
-              </NavbarMobileButton>
-            </div>
-            {menu === 'nav' && <NavbarMenu onClick={() => setMenu(null)} />}
-            {menu === 'wallet' && <VegaWalletMenu setMenu={setMenu} />}
-          </D.Content>
-        </D.Root>
-      )}
-    </N.Root>
-  );
-};
-
-/**
- * List of links or dropdown triggers to show in the main section
- * of the navigation
- */
-const NavbarMenu = ({ onClick }: { onClick: () => void }) => {
-  const { VEGA_ENV, VEGA_NETWORKS, GITHUB_FEEDBACK_URL } = useEnvironment();
+  const { GITHUB_FEEDBACK_URL } = useEnvironment();
+  const tokenLink = useLinks(DApp.Token);
   const marketId = useGlobalStore((store) => store.marketId);
 
-  // If we have a stored marketId make Trade link go to that market
-  // otherwise always go to /markets/all
   const tradingPath = marketId
     ? Links[Routes.MARKET](marketId)
-    : Links[Routes.MARKET]('');
+    : Links[Routes.MARKET]();
 
   return (
-    <div className="lg:flex lg:h-full gap-3">
-      <NavbarList>
-        <NavbarItem>
-          <NavbarTrigger data-testid="navbar-network-switcher-trigger">
-            {envNameMapping[VEGA_ENV]}
-          </NavbarTrigger>
-          <NavbarContent data-testid="navbar-content-network-switcher">
-            <ul className="lg:p-4">
-              {[Networks.MAINNET, Networks.TESTNET].map((n) => {
-                const url = VEGA_NETWORKS[n];
-                if (!url) return;
-                return (
-                  <NavbarSubItem key={n}>
-                    <NavbarLink to={url}>{envNameMapping[n]}</NavbarLink>
-                  </NavbarSubItem>
-                );
-              })}
-            </ul>
-          </NavbarContent>
-        </NavbarItem>
-      </NavbarList>
-      <NavbarListDivider />
-      <NavbarList>
-        <NavbarItem>
-          <NavbarLink to={Links[Routes.MARKETS]()} onClick={onClick}>
-            {t('Markets')}
-          </NavbarLink>
-        </NavbarItem>
-        <NavbarItem>
-          <NavbarLink to={tradingPath} onClick={onClick}>
-            {t('Trading')}
-          </NavbarLink>
-        </NavbarItem>
-        <NavbarItem>
-          <NavbarLink to={Links[Routes.PORTFOLIO]()} onClick={onClick}>
-            {t('Portfolio')}
-          </NavbarLink>
-        </NavbarItem>
-        <NavbarItem>
-          <NavbarTrigger>{t('Resources')}</NavbarTrigger>
-          <NavbarContent data-testid="navbar-content-resources">
-            <ul className="lg:p-4">
-              {DocsLinks?.NEW_TO_VEGA && (
-                <NavbarSubItem>
-                  <NavbarLinkExternal to={DocsLinks?.NEW_TO_VEGA}>
-                    {t('Docs')}
-                  </NavbarLinkExternal>
-                </NavbarSubItem>
-              )}
-              {GITHUB_FEEDBACK_URL && (
-                <NavbarSubItem>
-                  <NavbarLinkExternal to={GITHUB_FEEDBACK_URL}>
-                    {t('Give Feedback')}
-                  </NavbarLinkExternal>
-                </NavbarSubItem>
-              )}
-              <NavbarSubItem>
-                <NavbarLink to={Links[Routes.DISCLAIMER]()} onClick={onClick}>
-                  {t('Disclaimer')}
-                </NavbarLink>
-              </NavbarSubItem>
-            </ul>
-          </NavbarContent>
-        </NavbarItem>
-      </NavbarList>
-    </div>
-  );
-};
-
-/**
- * Wrapper for radix-ux Trigger for consistent styles
- */
-const NavbarTrigger = ({
-  children,
-  ...props
-}: N.NavigationMenuTriggerProps) => {
-  return (
-    <N.Trigger
-      {...props}
-      onPointerMove={preventHover}
-      onPointerLeave={preventHover}
-      className={classNames(
-        'w-full lg:w-auto lg:h-full',
-        'flex items-center justify-between lg:justify-center gap-2 px-6 py-2 lg:p-0',
-        'text-lg lg:text-sm',
-        'hover:text-vega-clight-100 dark:hover:text-vega-cdark-100'
-      )}
+    <Navigation
+      appName="console"
+      theme={theme}
+      actions={
+        <>
+          <ProtocolUpgradeCountdown
+            mode={ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING}
+          />
+          <VegaWalletConnectButton />
+        </>
+      }
+      breakpoints={[521, 1122]}
     >
-      {children}
-      <VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={14} />
-    </N.Trigger>
+      <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"
+        hide={[NavigationBreakpoint.Small]}
+      >
+        <NavigationItem className="[.drawer-content_&]:w-full">
+          <NetworkSwitcher className="[.drawer-content_&]:w-full" />
+        </NavigationItem>
+      </NavigationList>
+      <NavigationList
+        hide={[NavigationBreakpoint.Narrow, NavigationBreakpoint.Small]}
+      >
+        <NavigationItem>
+          <NavigationLink data-testid="Markets" to={Links[Routes.MARKETS]()}>
+            {t('Markets')}
+          </NavigationLink>
+        </NavigationItem>
+        <NavigationItem>
+          <NavigationLink data-testid="Trading" to={tradingPath} end>
+            {t('Trading')}
+          </NavigationLink>
+        </NavigationItem>
+        <NavigationItem>
+          <NavigationLink
+            data-testid="Portfolio"
+            to={Links[Routes.PORTFOLIO]()}
+          >
+            {t('Portfolio')}
+          </NavigationLink>
+        </NavigationItem>
+        <NavigationItem>
+          <NavExternalLink href={tokenLink(TOKEN_GOVERNANCE)}>
+            {t('Governance')}
+          </NavExternalLink>
+        </NavigationItem>
+        {DocsLinks?.NEW_TO_VEGA && GITHUB_FEEDBACK_URL && (
+          <NavigationItem>
+            <NavigationTrigger>{t('Resources')}</NavigationTrigger>
+            <NavigationContent>
+              <NavigationList>
+                <NavigationItem>
+                  <NavExternalLink href={DocsLinks.NEW_TO_VEGA}>
+                    {t('Docs')}
+                  </NavExternalLink>
+                </NavigationItem>
+                <NavigationItem>
+                  <NavExternalLink href={GITHUB_FEEDBACK_URL}>
+                    {t('Give Feedback')}
+                  </NavExternalLink>
+                </NavigationItem>
+                <NavigationItem>
+                  <NavigationLink
+                    data-testid="Disclaimer"
+                    to={Links[Routes.DISCLAIMER]()}
+                  >
+                    {t('Disclaimer')}
+                  </NavigationLink>
+                </NavigationItem>
+              </NavigationList>
+            </NavigationContent>
+          </NavigationItem>
+        )}
+      </NavigationList>
+    </Navigation>
   );
 };
 
-/**
- * Wrapper for react-router-dom NavLink for consistent styles
- */
-const NavbarLink = ({
+const NavExternalLink = ({
   children,
-  to,
-  onClick,
+  href,
 }: {
   children: ReactNode;
-  to: string;
-  onClick?: () => void;
+  href: string;
 }) => {
   return (
-    <N.Link asChild={true}>
-      <NavLink
-        to={to}
-        className={classNames(
-          'block lg:flex lg:h-full flex-col justify-center',
-          'px-6 py-2 lg:p-0 text-lg lg:text-sm',
-          'hover:text-vega-clight-100 dark:hover:text-vega-cdark-100'
-        )}
-        onClick={onClick}
-      >
-        {({ isActive }) => {
-          const borderClasses = {
-            'border-b-2': true,
-            'border-transparent': !isActive,
-            'border-vega-yellow lg:group-[.navbar-content]:border-transparent':
-              isActive,
-          };
-          return (
-            <>
-              <span
-                className={classNames('lg:border-0', borderClasses, {
-                  'text-vega-clight-50 dark:text-vega-cdark-50': isActive,
-                })}
-              >
-                {children}
-              </span>
-              <span
-                className={classNames(
-                  'hidden lg:block absolute left-0 bottom-0 w-full h-0',
-                  borderClasses
-                )}
-              />
-            </>
-          );
-        }}
-      </NavLink>
-    </N.Link>
-  );
-};
-
-const NavbarItem = (props: N.NavigationMenuItemProps) => {
-  return <N.Item {...props} className="relative" />;
-};
-
-const NavbarSubItem = (props: LiHTMLAttributes<HTMLElement>) => {
-  return <li {...props} className="lg:mb-4 lg:last:mb-0" />;
-};
-
-const NavbarList = (props: N.NavigationMenuListProps) => {
-  return <N.List {...props} className="lg:flex lg:h-full gap-6" />;
-};
-
-/**
- * Content that gets rendered when a sub section of the navbar is shown
- */
-const NavbarContent = (props: N.NavigationMenuContentProps) => {
-  return (
-    <N.Content
-      {...props}
-      className={classNames(
-        'group navbar-content',
-        'lg:absolute lg:mt-2 pl-2 lg:pl-0 z-20 lg:min-w-[290px]',
-        'lg:bg-vega-clight-700 lg:dark:bg-vega-cdark-700',
-        'lg:border border-vega-clight-500 dark:border-vega-cdark-500 lg:rounded'
-      )}
-      onPointerEnter={preventHover}
-      onPointerLeave={preventHover}
-    />
-  );
-};
-
-/**
- * NavbarLink with OPEN_EXTERNAL icon
- */
-const NavbarLinkExternal = ({
-  children,
-  to,
-  onClick,
-}: {
-  children: ReactNode;
-  to: string;
-  onClick?: () => void;
-}) => {
-  return (
-    <N.Link asChild={true}>
-      <NavLink
-        to={to}
-        className={classNames(
-          'flex lg:inline-flex gap-2 justify-between items-center relative',
-          'px-6 py-2 lg:p-0 text-lg lg:text-sm',
-          'hover:text-vega-clight-100 dark:hover:text-vega-cdark-100'
-        )}
-        onClick={onClick}
-        target="_blank"
-      >
+    <ExternalLink href={href}>
+      <span className="flex items-center gap-2">
         <span>{children}</span>
         <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
-      </NavLink>
-    </N.Link>
+      </span>
+    </ExternalLink>
   );
 };
-
-const BurgerIcon = () => (
-  <svg
-    width="20"
-    height="20"
-    viewBox="0 0 16 16"
-    className="w-full stroke-current"
-  >
-    <line x1={0.5} x2={15.5} y1={3.5} y2={3.5} />
-    <line x1={0.5} x2={15.5} y1={11.5} y2={11.5} />
-  </svg>
-);
-
-const NavbarListDivider = () => {
-  return (
-    <div className="py-2 px-6 lg:px-0" role="separator">
-      <div className="h-px lg:h-full w-full lg:w-px bg-vega-clight-500 dark:bg-vega-cdark-500" />
-    </div>
-  );
-};
-
-/**
- * Button component to avoid repeating styles for buttons shown on small screens
- */
-const NavbarMobileButton = (props: ButtonHTMLAttributes<HTMLButtonElement>) => {
-  return (
-    <button
-      {...props}
-      className={classNames(
-        'w-8 h-8 lg:hidden flex items-center p-1 rounded ',
-        'hover:bg-vega-clight-500 dark:hover:bg-vega-cdark-500',
-        'hover:text-vega-clight-50 dark:hover:text-vega-cdark-50'
-      )}
-    />
-  );
-};
-
-const envNameMapping: Record<Networks, string> = {
-  [Networks.VALIDATOR_TESTNET]: t('VALIDATOR_TESTNET'),
-  [Networks.CUSTOM]: t('Custom'),
-  [Networks.DEVNET]: t('Devnet'),
-  [Networks.STAGNET1]: t('Stagnet'),
-  [Networks.TESTNET]: t('Fairground testnet'),
-  [Networks.MAINNET_MIRROR]: t('Mirror'),
-  [Networks.MAINNET]: t('Mainnet'),
-};
-
-// https://github.com/radix-ui/primitives/issues/1630
-// eslint-disable-next-line
-const preventHover = (e: any) => {
-  e.preventDefault();
-};

apps/trading/components/orderbook-container/orderbook-container.tsx

@@ -1,14 +1,10 @@
 import { OrderbookManager } from '@vegaprotocol/market-depth';
 import { useCreateOrderStore } from '@vegaprotocol/orders';
 import { ViewType, useSidebar } from '../sidebar';
-import { useStopOrderFormValues } from '@vegaprotocol/deal-ticket';
 
 export const OrderbookContainer = ({ marketId }: { marketId: string }) => {
   const useOrderStoreRef = useCreateOrderStore();
   const updateOrder = useOrderStoreRef((store) => store.update);
-  const updateStoredFormValues = useStopOrderFormValues(
-    (state) => state.update
-  );
   const setView = useSidebar((store) => store.setView);
   return (
     <OrderbookManager
@@ -16,11 +12,9 @@ export const OrderbookContainer = ({ marketId }: { marketId: string }) => {
       onClick={({ price, size }) => {
         if (price) {
           updateOrder(marketId, { price });
-          updateStoredFormValues(marketId, { price });
         }
         if (size) {
           updateOrder(marketId, { size });
-          updateStoredFormValues(marketId, { size });
         }
         setView({ type: ViewType.Order });
       }}

apps/trading/components/orders-container/orders-container.tsx

@@ -1,6 +1,7 @@
 import { useDataGridEvents } from '@vegaprotocol/datagrid';
-import { Filter, OrderListManager } from '@vegaprotocol/orders';
 import { t } from '@vegaprotocol/i18n';
+import { Filter } from '@vegaprotocol/orders';
+import { OrderListManager } from '@vegaprotocol/orders';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import {

apps/trading/components/sidebar/sidebar.spec.tsx

@@ -1,15 +1,7 @@
 import { act, render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import {
-  Sidebar,
-  SidebarButton,
-  SidebarContent,
-  ViewType,
-  useSidebar,
-} from './sidebar';
+import { Sidebar, SidebarContent, ViewType, useSidebar } from './sidebar';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
-import { VegaIconNames } from '@vegaprotocol/ui-toolkit';
-import { VegaWalletProvider } from '@vegaprotocol/wallet';
 
 jest.mock('../node-health', () => ({
   NodeHealthContainer: () => <span data-testid="node-health" />,
@@ -27,23 +19,16 @@ jest.mock('../settings', () => ({
   Settings: () => <div data-testid="settings" />,
 }));
 
-jest.mock('../welcome-dialog', () => ({
-  GetStarted: () => <div data-testid="get-started" />,
-}));
-
 describe('Sidebar', () => {
   it.each(['/markets/all', '/portfolio'])(
     'does not render ticket and info',
     (path) => {
       render(
-        <VegaWalletProvider>
-          <MemoryRouter initialEntries={[path]}>
-            <Sidebar />
-          </MemoryRouter>
-        </VegaWalletProvider>
+        <MemoryRouter initialEntries={[path]}>
+          <Sidebar />
+        </MemoryRouter>
       );
 
-      expect(screen.getByTestId(ViewType.ViewAs)).toBeInTheDocument();
       expect(screen.getByTestId(ViewType.Settings)).toBeInTheDocument();
       expect(screen.getByTestId(ViewType.Transfer)).toBeInTheDocument();
       expect(screen.getByTestId(ViewType.Deposit)).toBeInTheDocument();
@@ -58,14 +43,11 @@ describe('Sidebar', () => {
 
   it('renders ticket and info on market pages', () => {
     render(
-      <VegaWalletProvider>
-        <MemoryRouter initialEntries={['/markets/ABC']}>
-          <Sidebar />
-        </MemoryRouter>
-      </VegaWalletProvider>
+      <MemoryRouter initialEntries={['/markets/ABC']}>
+        <Sidebar />
+      </MemoryRouter>
     );
 
-    expect(screen.getByTestId(ViewType.ViewAs)).toBeInTheDocument();
     expect(screen.getByTestId(ViewType.Settings)).toBeInTheDocument();
     expect(screen.getByTestId(ViewType.Transfer)).toBeInTheDocument();
     expect(screen.getByTestId(ViewType.Deposit)).toBeInTheDocument();
@@ -79,11 +61,9 @@ describe('Sidebar', () => {
 
   it('renders selected state', async () => {
     render(
-      <VegaWalletProvider>
-        <MemoryRouter initialEntries={['/markets/ABC']}>
-          <Sidebar />
-        </MemoryRouter>
-      </VegaWalletProvider>
+      <MemoryRouter initialEntries={['/markets/ABC']}>
+        <Sidebar />
+      </MemoryRouter>
     );
 
     const settingsButton = screen.getByTestId(ViewType.Settings);
@@ -107,13 +87,11 @@ describe('Sidebar', () => {
 describe('SidebarContent', () => {
   it('renders the correct content', () => {
     const { container } = render(
-      <VegaWalletProvider>
-        <MemoryRouter initialEntries={['/markets/ABC']}>
-          <Routes>
-            <Route path="/markets/:marketId" element={<SidebarContent />} />
-          </Routes>
-        </MemoryRouter>
-      </VegaWalletProvider>
+      <MemoryRouter initialEntries={['/markets/ABC']}>
+        <Routes>
+          <Route path="/markets/:marketId" element={<SidebarContent />} />
+        </Routes>
+      </MemoryRouter>
     );
 
     expect(container).toBeEmptyDOMElement();
@@ -133,13 +111,11 @@ describe('SidebarContent', () => {
 
   it('closes sidebar if market id is required but not present', () => {
     const { container } = render(
-      <VegaWalletProvider>
-        <MemoryRouter initialEntries={['/portfolio']}>
-          <Routes>
-            <Route path="/portfolio" element={<SidebarContent />} />
-          </Routes>
-        </MemoryRouter>
-      </VegaWalletProvider>
+      <MemoryRouter initialEntries={['/portfolio']}>
+        <Routes>
+          <Route path="/portfolio" element={<SidebarContent />} />
+        </Routes>
+      </MemoryRouter>
     );
 
     act(() => {
@@ -161,25 +137,3 @@ describe('SidebarContent', () => {
     expect(container).toBeEmptyDOMElement();
   });
 });
-
-describe('SidebarButton', () => {
-  it.each([ViewType.Info, ViewType.Deposit, ViewType.ViewAs])(
-    'runs given callback regardless of requested view (%s)',
-    async (view) => {
-      const onClick = jest.fn();
-      render(
-        <SidebarButton
-          icon={VegaIconNames.INFO}
-          tooltip="INFO"
-          onClick={onClick}
-          view={view}
-        />
-      );
-
-      const btn = screen.getByTestId(view);
-      await userEvent.click(btn);
-
-      expect(onClick).toBeCalled();
-    }
-  );
-});

apps/trading/components/sidebar/sidebar.tsx

@@ -15,8 +15,6 @@ import { Tooltip } from '../../components/tooltip';
 import { WithdrawContainer } from '../withdraw-container';
 import { Routes as AppRoutes } from '../../pages/client-router';
 import { persist } from 'zustand/middleware';
-import { GetStarted } from '../welcome-dialog';
-import { useVegaWallet, useViewAsDialog } from '@vegaprotocol/wallet';
 
 const STORAGE_KEY = 'vega_sidebar_store';
 
@@ -27,7 +25,6 @@ export enum ViewType {
   Withdraw = 'Withdraw',
   Transfer = 'Transfer',
   Settings = 'Settings',
-  ViewAs = 'ViewAs',
 }
 
 type SidebarView =
@@ -54,12 +51,9 @@ type SidebarView =
     };
 
 export const Sidebar = () => {
-  const navClasses = 'flex lg:flex-col items-center gap-2 lg:gap-4 p-1';
-  const setViewAsDialogOpen = useViewAsDialog((state) => state.setOpen);
-  const { pubKeys } = useVegaWallet();
   return (
-    <div className="flex lg:flex-col gap-2 h-full p-1" data-testid="sidebar">
-      <nav className={navClasses}>
+    <div className="flex flex-col gap-2 h-full py-1" data-testid="sidebar">
+      <nav className="flex flex-col items-center gap-4 p-1">
         {/* sidebar options that always show */}
         <SidebarButton
           view={ViewType.Deposit}
@@ -108,17 +102,7 @@ export const Sidebar = () => {
           />
         </Routes>
       </nav>
-      <nav className={classNames(navClasses, 'ml-auto lg:mt-auto lg:ml-0')}>
-        <SidebarButton
-          view={ViewType.ViewAs}
-          onClick={() => {
-            setViewAsDialogOpen(true);
-          }}
-          icon={VegaIconNames.EYE}
-          tooltip={t('View as party')}
-          disabled={Boolean(pubKeys)}
-        />
-
+      <nav className="mt-auto flex flex-col items-center gap-4 p-1">
         <SidebarButton
           view={ViewType.Settings}
           icon={VegaIconNames.COG}
@@ -130,41 +114,25 @@ export const Sidebar = () => {
   );
 };
 
-export const SidebarButton = ({
+const SidebarButton = ({
   view,
   icon,
   tooltip,
-  disabled = false,
-  onClick,
 }: {
-  view?: ViewType;
+  view: ViewType;
   icon: VegaIconNames;
   tooltip: string;
-  disabled?: boolean;
-  onClick?: () => void;
 }) => {
   const { currView, setView } = useSidebar((store) => ({
     currView: store.view,
     setView: store.setView,
   }));
-
-  const onSelect = (view: SidebarView['type']) => {
-    if (view === currView?.type) {
-      setView(null);
-    } else {
-      setView({ type: view });
-    }
-  };
-
   const buttonClasses = classNames('flex items-center p-1 rounded', {
     'text-vega-clight-200 dark:text-vega-cdark-200 hover:bg-vega-clight-500 dark:hover:bg-vega-cdark-500':
-      !view || view !== currView?.type,
+      view !== currView?.type,
     'bg-vega-yellow hover:bg-vega-yellow-550 text-black':
-      view && view === currView?.type,
-    'cursor-not-allowed text-vega-clight-500 hover:bg-inherit dark:text-vega-cdark-500 dark:hover:bg-inherit':
-      disabled,
+      view === currView?.type,
   });
-
   return (
     <Tooltip
       description={tooltip}
@@ -176,8 +144,13 @@ export const SidebarButton = ({
       <button
         className={buttonClasses}
         data-testid={view}
-        onClick={onClick || (() => onSelect(view as SidebarView['type']))}
-        disabled={disabled}
+        onClick={() => {
+          if (view === currView?.type) {
+            setView(null);
+          } else {
+            setView({ type: view });
+          }
+        }}
       >
         <VegaIcon name={icon} size={20} />
       </button>
@@ -188,7 +161,7 @@ export const SidebarButton = ({
 const SidebarDivider = () => {
   return (
     <div
-      className="bg-vega-clight-600 dark:bg-vega-cdark-600 w-px h-4 lg:w-4 lg:h-px"
+      className="bg-vega-clight-600 dark:bg-vega-cdark-600 w-4 h-px"
       role="separator"
     />
   );
@@ -210,7 +183,6 @@ export const SidebarContent = () => {
               setView({ type: ViewType.Deposit, assetId })
             }
           />
-          <GetStarted />
         </ContentWrapper>
       );
     } else {
@@ -234,7 +206,6 @@ export const SidebarContent = () => {
     return (
       <ContentWrapper title={t('Deposit')}>
         <DepositContainer assetId={view.assetId} />
-        <GetStarted />
       </ContentWrapper>
     );
   }
@@ -243,7 +214,6 @@ export const SidebarContent = () => {
     return (
       <ContentWrapper title={t('Withdraw')}>
         <WithdrawContainer assetId={view.assetId} />
-        <GetStarted />
       </ContentWrapper>
     );
   }
@@ -252,7 +222,6 @@ export const SidebarContent = () => {
     return (
       <ContentWrapper title={t('Transfer')}>
         <TransferContainer assetId={view.assetId} />
-        <GetStarted />
       </ContentWrapper>
     );
   }
@@ -307,7 +276,7 @@ export const useSidebar = create<{
       view: null,
       setView: (x) =>
         set(() => {
-          if (x == null) {
+          if (x === null) {
             return { view: null, init: false };
           }
 

apps/trading/components/stop-orders-container/index.ts

@@ -1 +0,0 @@
-export * from './stop-orders-container';