chore: remove undefined fields from payload

.github/ISSUE_TEMPLATE/feature-epic.md

@@ -1,28 +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/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' }}
@@ -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>
+        <DropdownMenuTrigger className="ml-0">
-          <FilterLabel filters={filters} />
+          <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>
+          <TxsInfiniteListItem
-            <tbody>
+            type="testType"
-              <TxsInfiniteListItem
+            submitter="testPubKey"
-                type="testType"
+            hash="testTxHash"
-                submitter="testPubKey"
+            block="1"
-                hash="testTxHash"
+            code={0}
-                block="1"
+            command={{}}
-                code={0}
+          />
-                command={{}}
-              />
-            </tbody>
-          </table>
         </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 { useCallback, useEffect, useState } from 'react';
-import type { URLSearchParamsInit } from 'react-router-dom';
-import { useCallback } 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>) {
+export interface TxsStateProps {
-  if (!filters) {
+  txsData: BlockExplorerTransactionResult[];
-    return '';
+  hasMoreTxs: boolean;
-  } else if (filters.size > 1) {
+  cursor: string;
-    return '';
+  previousCursors: string[];
-  }
+  hasPreviousPage: boolean;
-
-  const forcedSingleFilter = Array.from(filters)[0];
-  return `filters[cmd.type]=${forcedSingleFilter}`;
 }
 
 export interface IUseTxsData {
-  count?: number;
+  limit: number;
-  before?: string;
+  filters?: string;
-  after?: string;
-  party?: string;
-  filters?: Set<FilterOption>;
 }
 
-export const useTxsData = ({
+interface IGetTxsDataUrl {
-  count = 25,
+  limit: string;
-  before,
+  filters?: string;
-  after,
+}
-  filters,
-  party,
-}: IUseTxsData) => {
-  const [, setSearchParams] = useSearchParams();
-  let hasMoreTxs = true;
-  let txsData: BlockExplorerTransactionResult[] = [];
 
-  const url = getTxsDataUrl({
+export const getTxsDataUrl = ({ limit, filters }: IGetTxsDataUrl) => {
-    filters: getTypeFilters(filters),
+  const url = new URL(`${DATA_SOURCES.blockExplorerUrl}/transactions`);
-    count,
+
-    before,
+  if (limit) {
-    after,
+    url.searchParams.append('limit', limit);
-    party,
+  }
+
+  // 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)) {
+  useEffect(() => {
-    hasMoreTxs = data.transactions.length >= count;
+    if (!loading && data && isNumber(data.transactions.length)) {
-    txsData = data.transactions;
+      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 c = data?.transactions.at(0)?.cursor;
-    const params: URLSearchParamsInit = { after };
+    const newPreviousCursors = c ? [...previousCursors, c] : previousCursors;
-    if (filters) {
+
-      params.filters = Array.from(filters).join(',');
+    setTxsState((prev) => ({
-    }
+      ...prev,
-    setSearchParams(params);
+      hasPreviousPage: true,
-  }, [filters, data, setSearchParams]);
+      previousCursors: newPreviousCursors,
+    }));
+
+    return refetch({
+      limit,
+      before: cursor,
+    });
+  }, [data, previousCursors, cursor, limit, refetch]);
 
   const previousPage = useCallback(() => {
-    const before = data?.transactions[0]?.cursor || '';
+    const previousCursor = [...previousCursors].pop();
-    const params: URLSearchParamsInit = { before };
+    const newPreviousCursors = previousCursors.slice(0, -1);
-    if (filters && filters.size > 0 && filters.size === 1) {
+    setTxsState((prev) => ({
-      params.filters = Array.from(filters)[0];
+      ...prev,
-    }
+      hasPreviousPage: newPreviousCursors.length > 0,
-    setSearchParams(params);
+      previousCursors: newPreviousCursors,
-  }, [filters, data, setSearchParams]);
+    }));
+    return refetch({
+      limit,
+      before: previousCursor,
+    });
+  }, [previousCursors, limit, refetch]);
 
   const refreshTxs = useCallback(async () => {
-    const params: URLSearchParamsInit = {};
+    setTxsState(() => ({
-    if (filters && filters.size > 0 && filters.size === 1) {
+      txsData: [],
-      params.filters = Array.from(filters)[0];
+      cursor: '',
-    }
+      previousCursors: [],
-    setSearchParams(params);
+      hasMoreTxs: false,
+      hasPreviousPage: false,
+    }));
 
-    refetch({ count: BE_TXS_PER_REQUEST });
+    refetch({ limit });
-  }, [setSearchParams, refetch, filters]);
+  }, [setTxsState, limit, refetch, filters]); // eslint-disable-line react-hooks/exhaustive-deps
-
-  const updateFilters = useCallback(
-    (newFilters: Set<FilterOption>) => {
-      const params: URLSearchParamsInit = {};
-      if (newFilters && newFilters.size === 1) {
-        params.filters = Array.from(newFilters)[0];
-      }
-
-      setSearchParams(params);
-    },
-    [setSearchParams]
-  );
 
   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,
+    hasPreviousPage,
-    updateFilters,
   } = useTxsData({
-    filters: filters.size === 1 ? filters : undefined,
+    limit: 25,
-    before: params.get('before') || undefined,
+    filters: f,
-    after: !params.get('before') ? params.get('after') || undefined : undefined,
-    party: partyId,
   });
 
   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
+        <TxsFilter filters={filters} setFilters={setFilters} />
-          filters={filters}
-          setFilters={(f) => {
-            setFilters(f);
-            updateFilters(f as Set<FilterOption>);
-          }}
-        />
       </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 { AllFilterOptions, TxsFilter } from '../../../components/txs/tx-filter';
-import type { FilterOption } 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(new Set(AllFilterOptions));
-  const [filters, setFilters] = useState(getInitialFilters(params));
+
+  const f =
+    filters && filters.size === 1
+      ? `filters[cmd.type]=${Array.from(filters)[0]}`
+      : '';
 
   const {
+    hasMoreTxs,
     nextPage,
     previousPage,
     error,
     refreshTxs,
     loading,
     txsData,
-    hasMoreTxs,
+    hasPreviousPage,
-    updateFilters,
   } = useTxsData({
-    filters: filters.size === 1 ? filters : undefined,
+    limit: BE_TXS_PER_REQUEST,
-    before: params.get('before') || undefined,
+    filters: f,
-    after: !params.get('before') ? params.get('after') || undefined : undefined,
   });
 
   return (
@@ -51,17 +54,11 @@ export const TxsListFiltered = () => {
         refreshTxs={refreshTxs}
         nextPage={nextPage}
         previousPage={previousPage}
-        hasPreviousPage={true}
+        hasPreviousPage={hasPreviousPage}
         loading={loading}
         hasMoreTxs={hasMoreTxs}
       >
-        <TxsFilter
+        <TxsFilter filters={filters} setFilters={setFilters} />
-          filters={filters}
-          setFilters={(f) => {
-            setFilters(f);
-            updateFilters(f as Set<FilterOption>);
-          }}
-        />
       </TxsListNavigation>
       <TxsInfiniteList
         hasFilters={filters.size > 0}

apps/governance-e2e/src/fixtures/proposals/successor-market.json

@@ -1,107 +0,0 @@
-{
-  "changes": {
-    "decimalPlaces": "5",
-    "positionDecimalPlaces": "5",
-    "linearSlippageFactor": "0.001",
-    "quadraticSlippageFactor": "0",
-    "lpPriceRange": "10",
-    "instrument": {
-      "name": "Token test market",
-      "code": "Token.24h",
-      "future": {
-        "settlementAsset": "816af99af60d684502a40824758f6b5377e6af48e50a9ee8ef478ecb879ea8bc",
-        "quoteName": "fUSDC",
-        "dataSourceSpecForSettlementData": {
-          "external": {
-            "oracle": {
-              "signers": [
-                {
-                  "pubKey": {
-                    "key": "70d14a321e02e71992fd115563df765000ccc4775cbe71a0e2f9ff5a3b9dc680"
-                  }
-                }
-              ],
-              "filters": [
-                {
-                  "key": {
-                    "name": "prices.BTC.value",
-                    "type": "TYPE_INTEGER",
-                    "numberDecimalPlaces": "0"
-                  },
-                  "conditions": [
-                    {
-                      "operator": "OPERATOR_GREATER_THAN",
-                      "value": "0"
-                    }
-                  ]
-                }
-              ]
-            }
-          }
-        },
-        "dataSourceSpecForTradingTermination": {
-          "external": {
-            "oracle": {
-              "signers": [
-                {
-                  "pubKey": {
-                    "key": "70d14a321e02e71992fd115563df765000ccc4775cbe71a0e2f9ff5a3b9dc680"
-                  }
-                }
-              ],
-              "filters": [
-                {
-                  "key": {
-                    "name": "trading.terminated.ETH5",
-                    "type": "TYPE_BOOLEAN"
-                  },
-                  "conditions": [
-                    {
-                      "operator": "OPERATOR_EQUALS",
-                      "value": "true"
-                    }
-                  ]
-                }
-              ]
-            }
-          }
-        },
-        "dataSourceSpecBinding": {
-          "settlementDataProperty": "prices.BTC.value",
-          "tradingTerminationProperty": "trading.terminated.ETH5"
-        }
-      }
-    },
-    "metadata": ["sector:food", "sector:materials", "source:docs.vega.xyz"],
-    "priceMonitoringParameters": {
-      "triggers": [
-        {
-          "horizon": "43200",
-          "probability": "0.9999999",
-          "auctionExtension": "600"
-        }
-      ]
-    },
-    "liquidityMonitoringParameters": {
-      "targetStakeParameters": {
-        "timeWindow": "3600",
-        "scalingFactor": 10
-      },
-      "triggeringRatio": "0.7",
-      "auctionExtension": "1"
-    },
-    "logNormal": {
-      "tau": 0.0001140771161,
-      "riskAversionParameter": 0.001,
-      "params": {
-        "mu": 0,
-        "r": 0.016,
-        "sigma": 0.8
-      }
-    },
-    "successor": {
-      "parentMarketId": "",
-      "insurancePoolFraction": "0.75"
-    }
-  }
-}

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

@@ -220,7 +220,7 @@ context(
       function () {
         const proposalTitle = 'Test new market proposal';
         goToMakeNewProposal(governanceProposalType.NEW_MARKET);
-        cy.getByTestId(newProposalTitle).type(proposalTitle);
+        cy.getByTestId(newProposalTitle).type('Test new market proposal');
         cy.getByTestId(newProposalDescription).type('E2E test for proposals');
         cy.fixture('/proposals/new-market').then((newMarketProposal) => {
           const newMarketPayload = JSON.stringify(newMarketProposal);
@@ -606,94 +606,6 @@ context(
         });
     });
 
-    it('able to submit successor market proposal', function () {
-      const proposalTitle = 'Test successor market proposal';
-
-      cy.createMarket();
-      cy.reload();
-      waitForSpinner();
-      cy.getByTestId('closed-proposals').within(() => {
-        cy.contains('Add Lorem Ipsum market')
-          .parentsUntil(proposalListItem)
-          .last()
-          .within(() => {
-            cy.getByTestId(viewProposalBtn).click();
-          });
-      });
-      getProposalInformationFromTable('ID').invoke('text').as('parentMarketId');
-      goToMakeNewProposal(governanceProposalType.NEW_MARKET);
-      cy.getByTestId(newProposalTitle).type(proposalTitle);
-      cy.getByTestId(newProposalDescription).type(
-        'E2E test for successor market'
-      );
-      cy.fixture('/proposals/successor-market').then((newMarketProposal) => {
-        newMarketProposal.changes.successor.parentMarketId =
-          this.parentMarketId;
-        const newMarketPayload = JSON.stringify(newMarketProposal);
-        cy.getByTestId(newProposalTerms).type(newMarketPayload, {
-          parseSpecialCharSequences: false,
-          delay: 2,
-        });
-      });
-      cy.getByTestId(proposalDownloadBtn)
-        .should('be.visible')
-        .click()
-        .then(() => {
-          cy.wrap(
-            getDownloadedProposalJsonPath('vega-new-market-proposal-')
-          ).then((filePath) => {
-            goToMakeNewProposal(governanceProposalType.RAW);
-            submitUniqueRawProposal({ proposalBody: filePath });
-          });
-        });
-      navigateTo(navigation.proposals);
-      getProposalFromTitle(proposalTitle).within(() => {
-        // 3003-PMAN-008
-        cy.getByTestId('proposal-successor-info')
-          .should('have.text', 'Successor market to: TEST.24h')
-          .find('a')
-          .should('have.attr', 'href')
-          .and('contain', this.parentMarketId);
-        cy.getByTestId('view-proposal-btn').click();
-      });
-      // #3003-PMAN-010
-      cy.getByTestId(proposalJsonToggle).click();
-      cy.get('.language-json').within(() => {
-        cy.get('.hljs-attr').should('contain.text', 'parentMarketId');
-        cy.get('.hljs-string').should('contain.text', this.parentMarketId);
-        cy.get('.hljs-attr').should('contain.text', 'insurancePoolFraction');
-        cy.get('.hljs-string').should('contain.text', '0.75');
-      });
-      cy.getByTestId('proposal-market-data').within(() => {
-        cy.getByTestId('proposal-market-data-toggle').click();
-        cy.contains('Key details').click();
-        // 3003-PMAN-009
-        getMarketProposalDetailsFromTable('Parent Market ID').should(
-          'have.text',
-          this.parentMarketId
-        );
-        getMarketProposalDetailsFromTable('Insurance Pool Fraction').should(
-          'have.text',
-          '0.75'
-        );
-        getMarketProposalDetailsFromTable('Trading Mode').should(
-          'have.text',
-          'No trading'
-        );
-      });
-      // 3003-PMAN-011
-      cy.contains('Parent Market ID').realHover();
-      cy.getByTestId('tooltip-content').should(
-        'contain.text',
-        'The ID of the market this market succeeds.'
-      );
-      cy.contains('Insurance Pool Fraction').realHover();
-      cy.getByTestId('tooltip-content').should(
-        'contain.text',
-        'The fraction of the insurance pool balance that is carried over from the parent market to the successor.'
-      );
-    });
-
     after('Disassociate from second wallet key if present', function () {
       cy.reload();
       waitForSpinner();

apps/governance-e2e/src/integration/flow/rewards-flow.cy.ts

@@ -96,14 +96,12 @@ context('rewards - flow', { tags: '@slow' }, function () {
       .within(() => {
         cy.get('h2').first().should('contain.text', 'EPOCH');
         cy.getByTestId('individual-rewards-asset').should('have.text', 'Vega');
-        cy.getByTestId('ACCOUNT_TYPE_GLOBAL_REWARD', rewardsTimeOut).should(
+        cy.getByTestId('ACCOUNT_TYPE_GLOBAL_REWARD', rewardsTimeOut)
-          'contain.text',
+          .should('contain.text', '0.4415')
-          '0.4415'
+          .and('contain.text', '(44.15%)');
-        );
+        cy.getByTestId('ACCOUNT_TYPE_FEES_INFRASTRUCTURE')
-        cy.getByTestId('ACCOUNT_TYPE_FEES_INFRASTRUCTURE').should(
+          .should('contain.text', '0.0004')
-          'contain.text',
+          .and('contain.text', '(44.15%)');
-          '0.0004'
-        );
         cy.getByTestId('total').should('have.text', '0.4419');
       });
   });

apps/governance-e2e/src/integration/view/wallet-vega.cy.ts

@@ -339,7 +339,7 @@ context(
               cy.getByTestId(vegaWalletCurrencyTitle)
                 .contains(name)
                 .parent()
-                .siblings(txTimeout)
+                .siblings()
                 .should((elementAmount) => {
                   const displayedAmount = parseFloat(elementAmount.text());
                   expect(displayedAmount).be.gte(expectedAmount);

apps/governance-e2e/src/support/common.functions.ts

@@ -107,7 +107,7 @@ export function dissociateFromSecondWalletKey() {
   cy.getByTestId('vega-in-wallet')
     .first()
     .within(() => {
-      cy.getByTestId('eth-wallet-associated-balances', txTimeout)
+      cy.getByTestId('eth-wallet-associated-balances')
         .last()
         .within(() => {
           cy.getByTestId('associated-key')

apps/governance-e2e/src/support/staking.functions.ts

@@ -78,21 +78,13 @@ export function stakingPageAssociateTokens(
   }
   cy.get(tokenAmountInputBox, epochTimeout).type(amount);
   if (approve) {
-    cy.getByTestId('wallet-associate').then((walletAssociateField) => {
+    cy.get(tokenInputApprove, txTimeout).should('be.enabled').click();
-      if (
+    cy.contains('Approve $VEGA Tokens for staking on Vega').should(
-        walletAssociateField.find('[data-testid="token-input-approve-button"]')
+      'be.visible'
-          .length
+    );
-      ) {
+    cy.contains('Approve $VEGA Tokens for staking on Vega', txTimeout).should(
-        cy.get(tokenInputApprove, txTimeout).should('be.enabled').click();
+      'not.exist'
-        cy.contains('Approve $VEGA Tokens for staking on Vega').should(
+    );
-          'be.visible'
-        );
-        cy.contains(
-          'Approve $VEGA Tokens for staking on Vega',
-          txTimeout
-        ).should('not.exist');
-      }
-    });
   }
   cy.get(tokenSubmitButton, txTimeout).should('be.enabled').click();
 

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/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/cypress.config.js

@@ -26,7 +26,6 @@ module.exports = defineConfig({
     requestTimeout: 20000,
     retries: 1,
     testIsolation: false,
-    experimentalMemoryManagement: true,
   },
   env: {
     ETHERSCAN_URL: 'https://sepolia.etherscan.io',

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

@@ -2,14 +2,14 @@ describe('charts', { tags: '@smoke' }, () => {
   before(() => {
     cy.mockTradingPage();
     cy.mockSubscription();
-    cy.setOnBoardingViewed();
     cy.visit('/#/markets/market-0');
     cy.wait('@Markets');
+    cy.getByTestId('Depth').click();
   });
 
   it('can see market depth chart', () => {
     // 6006-DEPC-001
-    cy.getByTestId('Depth').click();
     cy.getByTestId('tab-depth').should('be.visible');
+    cy.get('.depth-chart-module_canvas__260De').should('be.visible');
   });
 });

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('/');

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-notice-title').should(
-      cy.getByTestId('welcome-title').should('contain.text', 'Console CUSTOM');
+        'contain.text',
-      cy.getByTestId('browse-markets-button').should('not.be.disabled');
+        'Welcome to Console'
-      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'
-        );
-      });
     });
+  });
 
-    it('click browse markets button should redirect to market/all', () => {
+  describe('no proposal nor markets found', () => {
-      cy.getByTestId('welcome-dialog').should('be.visible');
+    it('there are welcome text and a link to propose market', () => {
-      cy.getByTestId('browse-markets-button').click();
+      cy.mockGQL((req) => {
-      cy.url().should('eq', Cypress.config().baseUrl + `/#/markets/all`);
+        const data = {
-      cy.window().then((window) => {
+          marketsConnection: {
-        expect(window.localStorage.getItem('vega_onboarding_viewed')).to.equal(
+            __typename: 'MarketConnection',
-          'true'
+            edges: [],
-        );
+          },
+        };
+        aliasGQLQuery(req, 'Markets', data);
+        aliasGQLQuery(req, 'MarketsData', data);
+        aliasGQLQuery(req, 'ProposalsList', {
+          proposalsConnection: {
+            __typename: 'ProposalsConnection',
+            edges: null,
+          },
+        });
       });
-    });
+      cy.visit('/');
-
+      cy.wait('@Markets');
-    it('click get started button should open connect dialog', () => {
+      cy.wait('@MarketsData');
-      cy.getByTestId('welcome-dialog').should('be.visible');
+      cy.getByTestId('welcome-notice-title').should(
-      cy.getByTestId('get-started-button').click();
+        'contain.text',
-      cy.url().should('eq', Cypress.config().baseUrl + `/#/markets/all`);
+        'Welcome to Console'
-      cy.window().then((window) => {
+      );
-        expect(window.localStorage.getItem('vega_onboarding_viewed')).to.equal(
+      cy.getByTestId('external-link')
-          'true'
+        .contains('Propose a market')
-        );
+        .should('exist');
-      });
-      cy.getByTestId('wallet-dialog-title').should('contain.text', 'Connect');
     });
   });
 
@@ -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();
   });
@@ -101,6 +100,7 @@ describe('markets proposed table', { tags: '@smoke' }, () => {
           'VEGA_TOKEN_URL'
         )}/proposals/e9ec6d5c46a7e7bcabf9ba7a893fa5a5eeeec08b731f06f7a6eb7bf0e605b829`
       );
+    cy.getByTestId('proposal-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/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');
 });
@@ -155,10 +154,7 @@ describe(
         { name: 'Volume', infoText: 'Volume: 55,000' },
       ];
       cy.get(indicatorInfo).eq(1).realHover();
-      cy.get('.chart__wrapper [data-testid="split-view-view"]')
+      cy.get('.close-button-module_closeButton__2ifkl').click({ force: true });
-        .last()
-        .find('[role="button"][title="Close"]')
-        .click({ force: true });
       cy.get(indicatorInfo).should('have.length', 1);
 
       checkMenuItemCheckbox('Studies', studyInfo);

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');
   });
@@ -22,36 +21,37 @@ describe('deal ticket basics', { tags: '@smoke' }, () => {
   it('must show place order button and connect wallet if wallet is not connected', () => {
     // 0003-WTXN-001
     cy.getByTestId('connect-vega-wallet'); // Not connected
+    cy.getByTestId('order-connect-wallet').should('exist');
     cy.getByTestId(placeOrderBtn).should('exist');
-    cy.getByTestId('get-started-button').should('exist');
+    cy.getByTestId('deal-ticket-connect-wallet').should('exist');
   });
 
   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(toggleShort).click().children('input').should('be.checked');
-    cy.getByTestId(toggleLong).click().next('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(toggleLimit).click().children('input').should('be.checked');
-    cy.getByTestId(toggleMarket).click().next('input').should('be.checked');
+    cy.getByTestId(toggleMarket).click().children('input').should('be.checked');
   });
 
   it('order connect vega wallet button should connect', () => {
     mockConnectWallet();
     cy.getByTestId(toggleLimit).click();
     cy.getByTestId(orderPriceField).clear().type('101');
-    cy.getByTestId('get-started-button').click();
+    cy.getByTestId('order-connect-wallet').click();
     cy.getByTestId('dialog-content').should('be.visible');
     cy.getByTestId('connectors-list')
       .find('[data-testid="connector-jsonRpc"]')
       .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

@@ -251,13 +251,11 @@ describe('positions', { tags: '@regression', testIsolation: true }, () => {
   it('I can see warnings', () => {
     visitAndClickPositions();
 
-    cy.get('[col-id="openVolume"]')
+    cy.get('[col-id="openVolume"]').within(() => {
-      .eq(3)
+      cy.get('[aria-label="warning-sign icon"]')
-      .within(() => {
+        .should('be.visible')
-        cy.get('[aria-label="warning-sign icon"]')
+        .realHover();
-          .should('be.visible')
+    });
-          .realHover();
-      });
     // 7004-POSI-011
     cy.getByTestId(tooltipContent).should('be.visible');
   });

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-fees.cy.ts

@@ -1,111 +0,0 @@
-import { selectAsset } from '../support/helpers';
-
-const amountField = 'input[name="amount"]';
-const includeTransferFeeRadioBtn = 'include-transfer-fee';
-const manageVegaWallet = 'manage-vega-wallet';
-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_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');
-  });
-});

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

@@ -1,91 +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 keyID = `[data-testid="${transferText}"] > .rounded-md`;
-const manageVegaWallet = 'manage-vega-wallet';
-const submitTransferBtn = '[type="submit"]';
-const toAddressField = '[name="toAddress"]';
-const transferForm = 'transfer-form';
-const walletTransfer = 'wallet-transfer';
-
-const ASSET_EURO = 1;
-const ASSET_SEPOLIA_TBTC = 2;
-
-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');
-
-      cy.mockVegaWalletTransaction();
-    });
-
-    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(
+  cy.getByTestId(`order-type-${type}`).click();
-    `order-type-${type === OrderType.TYPE_LIMIT ? 'Limit' : 'Market'}`
-  ).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 toggleLimit = 'order-type-TYPE_LIMIT';
-export const toggleMarket = 'order-type-Market';
+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

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=true
+# 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/deposit/deposit.tsx

@@ -1,19 +0,0 @@
-import { DepositContainer } from '@vegaprotocol/deposits';
-import { GetStarted } from '../../components/welcome-dialog';
-import { t } from '@vegaprotocol/i18n';
-
-export const Deposit = () => {
-  return (
-    <div className="py-16 px-8 flex w-full justify-center">
-      <div className="lg:min-w-[700px] min-w-[300px] max-w-[700px]">
-        <h1 className="text-4xl xl:text-5xl uppercase font-alpha calt">
-          {t('Deposit')}
-        </h1>
-        <div className="mt-10">
-          <DepositContainer />
-          <GetStarted />
-        </div>
-      </div>
-    </div>
-  );
-};

apps/trading/client-pages/deposit/index.ts

@@ -1,3 +0,0 @@
-import { Deposit } from './deposit';
-
-export default Deposit;

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,6 +10,7 @@ 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,
@@ -57,11 +58,7 @@ const MainGrid = memo(
             >
               <TradeGridChild>
                 <Tabs storageKey="console-trade-grid-main-left">
-                  <Tab
+                  <Tab id="chart" name={t('Chart')}>
-                    id="chart"
-                    name={t('Chart')}
-                    menu={<TradingViews.candles.menu />}
-                  >
                     <TradingViews.candles.component marketId={marketId} />
                   </Tab>
                   <Tab id="depth" name={t('Depth')}>
@@ -98,48 +95,57 @@ const MainGrid = memo(
           <TradeGridChild>
             <Tabs storageKey="console-trade-grid-bottom">
               <Tab id="positions" name={t('Positions')}>
-                <TradingViews.positions.component
+                <VegaWalletContainer>
-                  onMarketClick={onMarketClick}
+                  <TradingViews.positions.component
-                />
+                    onMarketClick={onMarketClick}
+                  />
+                </VegaWalletContainer>
               </Tab>
               <Tab id="open-orders" name={t('Open')}>
-                <TradingViews.orders.component
+                <VegaWalletContainer>
-                  marketId={marketId}
+                  <TradingViews.orders.component
-                  filter={Filter.Open}
+                    marketId={marketId}
-                />
+                    filter={Filter.Open}
+                  />
+                </VegaWalletContainer>
               </Tab>
               <Tab id="closed-orders" name={t('Closed')}>
-                <TradingViews.orders.component
+                <VegaWalletContainer>
-                  marketId={marketId}
+                  <TradingViews.orders.component
-                  filter={Filter.Closed}
+                    marketId={marketId}
-                />
+                    filter={Filter.Closed}
+                  />
+                </VegaWalletContainer>
               </Tab>
               <Tab id="rejected-orders" name={t('Rejected')}>
-                <TradingViews.orders.component
+                <VegaWalletContainer>
-                  marketId={marketId}
+                  <TradingViews.orders.component
-                  filter={Filter.Rejected}
+                    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
+                <VegaWalletContainer>
-                  marketId={marketId}
+                  <TradingViews.fills.component
-                  onMarketClick={onMarketClick}
+                    marketId={marketId}
-                />
+                    onMarketClick={onMarketClick}
+                  />
+                </VegaWalletContainer>
               </Tab>
               <Tab id="accounts" name={t('Collateral')}>
-                <TradingViews.collateral.component
+                <VegaWalletContainer>
-                  pinnedAsset={pinnedAsset}
+                  <TradingViews.collateral.component
-                  onMarketClick={onMarketClick}
+                    pinnedAsset={pinnedAsset}
-                  hideButtons
+                    onMarketClick={onMarketClick}
-                />
+                    hideButtons
+                  />
+                </VegaWalletContainer>
               </Tab>
             </Tabs>
           </TradeGridChild>

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

@@ -37,7 +37,6 @@ export const TradePanels = ({
   const onOrderTypeClick = useMarketLiquidityClickHandler();
 
   const [view, setView] = useState<TradingView>('candles');
-
   const renderView = () => {
     const Component = memo<{
       marketId: string;
@@ -66,23 +65,8 @@ 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 && (
           <>
@@ -92,7 +76,6 @@ export const TradePanels = ({
         )}
         <OracleBanner marketId={market?.id || ''} />
       </div>
-      <div>{renderMenu()}</div>
       <div className="h-full">
         <AutoSizer>
           {({ width, height }) => (

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 {
+import { CandlesChartContainer } from '@vegaprotocol/candles-chart';
-  CandlesChartContainer,
-  CandlesMenu,
-} 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/deposits-container.tsx

@@ -1,12 +1,15 @@
-import { Button, Splash } from '@vegaprotocol/ui-toolkit';
+import { Button } from '@vegaprotocol/ui-toolkit';
 import { DepositsTable } from '@vegaprotocol/deposits';
 import { depositsProvider } from '@vegaprotocol/deposits';
 import { t } from '@vegaprotocol/i18n';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { useVegaWallet } from '@vegaprotocol/wallet';
+import { useRef } from 'react';
+import type { AgGridReact } from 'ag-grid-react';
 import { useSidebar, ViewType } from '../../components/sidebar';
 
 export const DepositsContainer = () => {
+  const gridRef = useRef<AgGridReact | null>(null);
   const { pubKey, isReadOnly } = useVegaWallet();
   const { data, error } = useDataProvider({
     dataProvider: depositsProvider,
@@ -14,13 +17,11 @@ export const DepositsContainer = () => {
     skip: !pubKey,
   });
   const setView = useSidebar((store) => store.setView);
-  if (!pubKey) {
-    return <Splash>{t('Please connect Vega wallet')}</Splash>;
-  }
   return (
     <div className="h-full">
       <DepositsTable
         rowData={data}
+        ref={gridRef}
         overlayNoRowsTemplate={error ? error.message : t('No deposits')}
       />
       {!isReadOnly && (

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

@@ -1,4 +1,4 @@
-import { Button, Splash } from '@vegaprotocol/ui-toolkit';
+import { Button } from '@vegaprotocol/ui-toolkit';
 import {
   withdrawalProvider,
   WithdrawalsTable,
@@ -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 = () => {
@@ -18,11 +19,9 @@ export const WithdrawalsContainer = () => {
   });
   const setView = useSidebar((store) => store.setView);
   const { ready, delayed } = useIncompleteWithdrawals();
-  if (!pubKey) {
+
-    return <Splash>{t('Please connect Vega wallet')}</Splash>;
-  }
   return (
-    <>
+    <VegaWalletContainer>
       <div className="h-full relative">
         <WithdrawalsTable
           data-testid="withdrawals-history"
@@ -44,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/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/navbar/navbar.tsx

@@ -52,9 +52,6 @@ export const Navbar = ({
           'bg-vega-yellow text-vega-clight-50': theme === 'yellow',
           'text-default': theme === 'system',
         })}
-        style={{
-          background: theme === 'yellow' ? 'url(/testnet-logo-bg.png' : 'none',
-        }}
       >
         <VLogo className="w-4" />
       </NavLink>

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 {
+import { Sidebar, SidebarContent, ViewType, useSidebar } from './sidebar';
-  Sidebar,
-  SidebarButton,
-  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]}>
-          <MemoryRouter initialEntries={[path]}>
+          <Sidebar />
-            <Sidebar />
+        </MemoryRouter>
-          </MemoryRouter>
-        </VegaWalletProvider>
       );
 
-      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']}>
-        <MemoryRouter initialEntries={['/markets/ABC']}>
+        <Sidebar />
-          <Sidebar />
+      </MemoryRouter>
-        </MemoryRouter>
-      </VegaWalletProvider>
     );
 
-    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']}>
-        <MemoryRouter initialEntries={['/markets/ABC']}>
+        <Sidebar />
-          <Sidebar />
+      </MemoryRouter>
-        </MemoryRouter>
-      </VegaWalletProvider>
     );
 
     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']}>
-        <MemoryRouter initialEntries={['/markets/ABC']}>
+        <Routes>
-          <Routes>
+          <Route path="/markets/:marketId" element={<SidebarContent />} />
-            <Route path="/markets/:marketId" element={<SidebarContent />} />
+        </Routes>
-          </Routes>
+      </MemoryRouter>
-        </MemoryRouter>
-      </VegaWalletProvider>
     );
 
     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']}>
-        <MemoryRouter initialEntries={['/portfolio']}>
+        <Routes>
-          <Routes>
+          <Route path="/portfolio" element={<SidebarContent />} />
-            <Route path="/portfolio" element={<SidebarContent />} />
+        </Routes>
-          </Routes>
+      </MemoryRouter>
-        </MemoryRouter>
-      </VegaWalletProvider>
     );
 
     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 =
@@ -55,8 +52,6 @@ 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}>
@@ -109,16 +104,6 @@ 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)}
-        />
-
         <SidebarButton
           view={ViewType.Settings}
           icon={VegaIconNames.COG}
@@ -130,43 +115,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 buttonClasses = classNames('flex items-center p-1 rounded', {
-  const onSelect = (view: SidebarView['type']) => {
+    'text-vega-clight-200 dark:text-vega-cdark-200 hover:bg-vega-clight-500 dark:hover:bg-vega-cdark-500':
-    if (view === currView?.type) {
+      view !== currView?.type,
-      setView(null);
+    'bg-vega-yellow hover:bg-vega-yellow-550 text-black':
-    } else {
+      view === currView?.type,
-      setView({ type: view });
+  });
-    }
-  };
-
-  const buttonClasses = classNames(
-    'flex items-center p-1 rounded',
-    'disabled:cursor-not-allowed disabled:text-vega-clight-500 dark:disabled:text-vega-cdark-500',
-    {
-      'text-vega-clight-200 dark:text-vega-cdark-200 enabled:hover:bg-vega-clight-500 dark:enabled:hover:bg-vega-cdark-500':
-        !view || view !== currView?.type,
-      'bg-vega-yellow enabled:hover:bg-vega-yellow-550 text-black':
-        view && view === currView?.type,
-    }
-  );
-
   return (
     <Tooltip
       description={tooltip}
@@ -178,8 +145,13 @@ export const SidebarButton = ({
       <button
         className={buttonClasses}
         data-testid={view}
-        onClick={onClick || (() => onSelect(view as SidebarView['type']))}
+        onClick={() => {
-        disabled={disabled}
+          if (view === currView?.type) {
+            setView(null);
+          } else {
+            setView({ type: view });
+          }
+        }}
       >
         <VegaIcon name={icon} size={20} />
       </button>
@@ -212,7 +184,6 @@ export const SidebarContent = () => {
               setView({ type: ViewType.Deposit, assetId })
             }
           />
-          <GetStarted />
         </ContentWrapper>
       );
     } else {
@@ -236,7 +207,6 @@ export const SidebarContent = () => {
     return (
       <ContentWrapper title={t('Deposit')}>
         <DepositContainer assetId={view.assetId} />
-        <GetStarted />
       </ContentWrapper>
     );
   }
@@ -245,7 +215,6 @@ export const SidebarContent = () => {
     return (
       <ContentWrapper title={t('Withdraw')}>
         <WithdrawContainer assetId={view.assetId} />
-        <GetStarted />
       </ContentWrapper>
     );
   }
@@ -254,7 +223,6 @@ export const SidebarContent = () => {
     return (
       <ContentWrapper title={t('Transfer')}>
         <TransferContainer assetId={view.assetId} />
-        <GetStarted />
       </ContentWrapper>
     );
   }
@@ -309,7 +277,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';

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

@@ -1,41 +0,0 @@
-import { useDataGridEvents } from '@vegaprotocol/datagrid';
-import { t } from '@vegaprotocol/i18n';
-import { StopOrdersManager } from '@vegaprotocol/orders';
-import { Splash } from '@vegaprotocol/ui-toolkit';
-import { useVegaWallet } from '@vegaprotocol/wallet';
-import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
-import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
-import type { DataGridSlice } from '../../stores/datagrid-store-slice';
-import { createDataGridSlice } from '../../stores/datagrid-store-slice';
-
-export const StopOrdersContainer = () => {
-  const { pubKey, isReadOnly } = useVegaWallet();
-  const onMarketClick = useMarketClickHandler(true);
-
-  const gridStore = useStopOrdersStore((store) => store.gridStore);
-  const updateGridStore = useStopOrdersStore((store) => store.updateGridStore);
-
-  const gridStoreCallbacks = useDataGridEvents(gridStore, (colState) => {
-    updateGridStore(colState);
-  });
-
-  if (!pubKey) {
-    return <Splash>{t('Please connect Vega wallet')}</Splash>;
-  }
-
-  return (
-    <StopOrdersManager
-      partyId={pubKey}
-      onMarketClick={onMarketClick}
-      isReadOnly={isReadOnly}
-      gridProps={gridStoreCallbacks}
-    />
-  );
-};
-
-const useStopOrdersStore = create<DataGridSlice>()(
-  persist(createDataGridSlice, {
-    name: 'vega_fills_store',
-  })
-);

apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.spec.tsx

@@ -27,16 +27,6 @@ describe('VegaWalletConnectButton', () => {
   it('should fire dialog when not connected', () => {
     render(generateJsx({ pubKey: null } as VegaWalletContextShape));
 
-    const button = screen.getByTestId('connect-vega-wallet');
-    expect(button).toHaveTextContent('Get started');
-    fireEvent.click(button);
-    expect(mockUpdateDialogOpen).toHaveBeenCalled();
-  });
-
-  it('should render "Connect" when browser wallet is detected', () => {
-    window.vega = window.vega || ({} as Vega);
-    render(generateJsx({ pubKey: null } as VegaWalletContextShape));
-
     const button = screen.getByTestId('connect-vega-wallet');
     expect(button).toHaveTextContent('Connect');
     fireEvent.click(button);

apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx

@@ -1,6 +1,5 @@
 import { useMemo, useState } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import { isBrowserWalletInstalled } from '@vegaprotocol/wallet';
 import { truncateByChars } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import {
@@ -38,7 +37,7 @@ export const VegaWalletConnectButton = () => {
     fetchPubKeys,
   } = useVegaWallet();
   const isConnected = pubKey !== null;
-  const walletInstalled = isBrowserWalletInstalled();
+
   const activeKey = useMemo(() => {
     return pubKeys?.find((pk) => pk.publicKey === pubKey);
   }, [pubKey, pubKeys]);
@@ -119,9 +118,7 @@ export const VegaWalletConnectButton = () => {
       intent={Intent.None}
       icon={<VegaIcon name={VegaIconNames.ARROW_RIGHT} size={14} />}
     >
-      <span className="whitespace-nowrap uppercase">
+      <span className="whitespace-nowrap uppercase">{t('Connect')}</span>
-        {walletInstalled ? t('Connect') : t('Get started')}
-      </span>
     </Button>
   );
 };

apps/trading/components/welcome-dialog/get-started.tsx

@@ -1,108 +0,0 @@
-import classNames from 'classnames';
-import { t } from '@vegaprotocol/i18n';
-import { ExternalLink, Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
-import {
-  useVegaWallet,
-  useVegaWalletDialogStore,
-  isBrowserWalletInstalled,
-} from '@vegaprotocol/wallet';
-import { Networks, useEnvironment } from '@vegaprotocol/environment';
-import { useLocalStorage } from '@vegaprotocol/react-helpers';
-import * as constants from '../constants';
-
-interface Props {
-  lead?: string;
-}
-
-export const GetStarted = ({ lead }: Props) => {
-  const { pubKey } = useVegaWallet();
-
-  const { VEGA_ENV, VEGA_NETWORKS } = useEnvironment();
-  const CANONICAL_URL = VEGA_NETWORKS[VEGA_ENV] || 'https://console.vega.xyz';
-
-  const [, setOnboardingViewed] = useLocalStorage(
-    constants.ONBOARDING_VIEWED_KEY
-  );
-
-  const openVegaWalletDialog = useVegaWalletDialogStore(
-    (store) => store.openVegaWalletDialog
-  );
-
-  const onButtonClick = () => {
-    openVegaWalletDialog();
-    setOnboardingViewed('true');
-  };
-
-  const wrapperClasses = classNames(
-    'flex flex-col py-4 px-6 gap-4 rounded',
-    'bg-vega-blue-300 dark:bg-vega-blue-700',
-    'border border-vega-blue-350 dark:border-vega-blue-650',
-    { 'mt-8': !lead }
-  );
-
-  if (!isBrowserWalletInstalled()) {
-    return (
-      <div className={wrapperClasses} data-testid="get-started-banner">
-        {lead && <h2>{lead}</h2>}
-        <h3 className="text-lg">{t('Get started')}</h3>
-        <div>
-          <ul className="list-decimal list-inside">
-            <li>{t('Get a Vega wallet')}</li>
-            <li>{t('Connect')}</li>
-            <li>{t('Deposit funds')}</li>
-            <li>{t('Open a position')}</li>
-          </ul>
-        </div>
-        <div>
-          <TradingButton
-            intent={Intent.Info}
-            onClick={onButtonClick}
-            data-testid="get-started-button"
-          >
-            {t('Get started')}
-          </TradingButton>
-        </div>
-        {VEGA_ENV === Networks.MAINNET && (
-          <p className="text-sm">
-            {t('Experiment for free with virtual assets on')}{' '}
-            <ExternalLink href={CANONICAL_URL}>
-              {t('Fairground Testnet')}
-            </ExternalLink>
-          </p>
-        )}
-        {VEGA_ENV === Networks.TESTNET && (
-          <p className="text-sm">
-            {t('Ready to trade with real funds?')}{' '}
-            <ExternalLink href={CANONICAL_URL}>
-              {t('Switch to Mainnet')}
-            </ExternalLink>
-          </p>
-        )}
-      </div>
-    );
-  }
-
-  if (!pubKey) {
-    return (
-      <div className={wrapperClasses}>
-        <p className="text-sm mb-1">
-          You need a{' '}
-          <ExternalLink href="https://vega.xyz/wallet">
-            Vega wallet
-          </ExternalLink>{' '}
-          to start trading in this market.
-        </p>
-        <TradingButton
-          onClick={openVegaWalletDialog}
-          size="small"
-          data-testid="order-connect-wallet"
-          intent={Intent.Info}
-        >
-          {t('Connect wallet')}
-        </TradingButton>
-      </div>
-    );
-  }
-
-  return null;
-};

apps/trading/components/welcome-dialog/index.ts

@@ -1,3 +1,2 @@
 export * from './welcome-dialog';
 export * from './risk-message';
-export * from './get-started';

apps/trading/components/welcome-dialog/risk-notice-dialog.spec.tsx

@@ -0,0 +1,50 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Networks, useEnvironment } from '@vegaprotocol/environment';
+import { RiskNoticeDialog } from './risk-notice-dialog';
+
+jest.mock('@vegaprotocol/environment');
+
+const mockEnvDefinitions = {
+  VEGA_CONFIG_URL: 'https://config.url',
+  VEGA_URL: 'https://test.url',
+  VEGA_NETWORKS: JSON.stringify({}),
+};
+
+describe('Risk notice dialog', () => {
+  const mockOnClose = jest.fn();
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it.each`
+    assertion     | network
+    ${'displays'} | ${Networks.CUSTOM}
+    ${'displays'} | ${Networks.DEVNET}
+    ${'displays'} | ${Networks.TESTNET}
+  `(
+    '$assertion a generic message on $network',
+    async ({ assertion, network }) => {
+      // @ts-ignore ignore mock implementation
+      useEnvironment.mockImplementation(() => ({
+        ...mockEnvDefinitions,
+        VEGA_ENV: network,
+      }));
+
+      render(<RiskNoticeDialog onClose={mockOnClose} network={network} />);
+
+      expect(
+        screen.getByText(
+          new RegExp(
+            `This application for trading on Vega is connected to ${network}`
+          )
+        )
+      ).toBeInTheDocument();
+
+      const button = screen.getByRole('button', {
+        name: 'Continue',
+      });
+      fireEvent.click(button);
+      expect(mockOnClose).toHaveBeenCalled();
+    }
+  );
+});

apps/trading/components/welcome-dialog/risk-notice-dialog.tsx

@@ -0,0 +1,89 @@
+import { t } from '@vegaprotocol/i18n';
+import {
+  Button,
+  Link,
+  VegaIcon,
+  VegaIconNames,
+} from '@vegaprotocol/ui-toolkit';
+import { RISK_ACCEPTED_KEY } from '../constants';
+import { TelemetryApproval } from './telemetry-approval';
+import type { Networks } from '@vegaprotocol/environment';
+import {
+  useEnvironment,
+  DocsLinks,
+  ExternalLinks,
+} from '@vegaprotocol/environment';
+import { useLocalStorage } from '@vegaprotocol/react-helpers';
+
+interface Props {
+  onClose: () => void;
+  network: Networks;
+}
+export const RiskNoticeDialog = ({ onClose, network }: Props) => {
+  const [, setValue] = useLocalStorage(RISK_ACCEPTED_KEY);
+
+  const handleAcceptRisk = () => {
+    onClose();
+    setValue('true');
+  };
+
+  return (
+    <TestnetContent network={network} handleAcceptRisk={handleAcceptRisk} />
+  );
+};
+
+const TestnetContent = ({
+  network,
+  handleAcceptRisk,
+}: {
+  network: Networks;
+  handleAcceptRisk: () => void;
+}) => {
+  const { GITHUB_FEEDBACK_URL } = useEnvironment();
+  return (
+    <>
+      <p className="mb-4">
+        {t(
+          'This application for trading on Vega is connected to %s, meaning you are free to try out trading with virtual assets and no risk.',
+          [network]
+        )}
+      </p>
+      <p className="mb-4">
+        {t(
+          'Your Vega wallet must also be connected to %s, and your Ethereum wallet must be connected to Sepolia.',
+          [network]
+        )}
+      </p>
+      {GITHUB_FEEDBACK_URL && DocsLinks && (
+        <ul className="list-disc pl-4">
+          <li className="mb-1">
+            <Link href={ExternalLinks.VEGA_WALLET_URL} target="_blank">
+              <span className="underline">{t('Get a Vega Wallet')}</span>{' '}
+              <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
+            </Link>
+          </li>
+          <li className="mb-1">
+            <Link href={DocsLinks.VEGA_WALLET_TOOLS_URL} target="_blank">
+              <span className="underline">{t('Learn about Vega Wallet')}</span>{' '}
+              <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
+            </Link>
+          </li>
+          <li className="mb-1">
+            <Link href={GITHUB_FEEDBACK_URL} target="_blank">
+              <span className="underline">{t('Provide feedback')}</span>{' '}
+              <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
+            </Link>
+          </li>
+        </ul>
+      )}
+      <div className="my-4">
+        <TelemetryApproval
+          helpText={t(
+            'Help identify bugs and improve the service by sharing anonymous usage data. You can change this in your settings at any time.'
+          )}
+        />
+      </div>
+      <Button onClick={handleAcceptRisk}>{t('Continue')}</Button>
+    </>
+  );
+};

apps/trading/components/welcome-dialog/welcome-dialog-content.tsx

@@ -1,159 +0,0 @@
-import { t } from '@vegaprotocol/i18n';
-import { GetStarted } from './get-started';
-import { TradingButton } from '@vegaprotocol/ui-toolkit';
-import { useNavigate } from 'react-router-dom';
-import { Links, Routes } from '../../pages/client-router';
-import { useLocalStorage } from '@vegaprotocol/react-helpers';
-import * as constants from '../constants';
-import { Networks, useEnvironment } from '@vegaprotocol/environment';
-import type { ReactNode } from 'react';
-
-export const WelcomeDialogContent = () => {
-  const { VEGA_ENV } = useEnvironment();
-  const [, setOnboardingViewed] = useLocalStorage(
-    constants.ONBOARDING_VIEWED_KEY
-  );
-  const navigate = useNavigate();
-  const browseMarkets = () => {
-    const link = Links[Routes.MARKETS]();
-    navigate(link);
-    setOnboardingViewed('true');
-  };
-  const lead =
-    VEGA_ENV === Networks.MAINNET
-      ? t('Start trading on the worlds most advanced decentralised exchange.')
-      : t(
-          'Free from the risks of real trading, Fairground is a safe and fun place to try out Vega yourself with virtual assets.'
-        );
-  return (
-    <div className="flex flex-col sm:flex-row gap-8">
-      <div className="sm:w-1/2 flex flex-col justify-between pt-3">
-        <ul className="ml-0">
-          <ListItemContent
-            icon={<NonCustodialIcon />}
-            title={t('Non-custodial and pseudonymous')}
-            text={t('No third party has access to your funds.')}
-          />
-          <ListItemContent
-            icon={<PurposeBuiltIcon />}
-            title={t('Purpose built proof of stake blockchain')}
-            text={t(
-              'Fully decentralised high performance peer-to-network trading.'
-            )}
-          />
-          <ListItemContent
-            icon={<RewardIcon />}
-            title={t('Low fees and no cost to place orders')}
-            text={t(
-              'Fees work like a CEX with no per-transaction gas for orders'
-            )}
-          />
-        </ul>
-        <TradingButton
-          onClick={browseMarkets}
-          className="block w-full"
-          data-testid="browse-markets-button"
-        >
-          {t('Browse the markets')}
-        </TradingButton>
-      </div>
-      <div className="sm:w-1/2">
-        <GetStarted lead={lead} />
-      </div>
-    </div>
-  );
-};
-
-const ListItemContent = ({
-  icon,
-  title,
-  text,
-}: {
-  icon: ReactNode;
-  title: string;
-  text: string;
-}) => {
-  return (
-    <li className="my-4 flex gap-3">
-      <div className="shrink-0 pt-1">{icon}</div>
-      <div>
-        <h3 className="text-lg leading-snug mb-2">{title}</h3>
-        <p className="text-sm text-secondary">{text}</p>
-      </div>
-    </li>
-  );
-};
-
-const PurposeBuiltIcon = () => {
-  return (
-    <svg width="40" height="40" viewBox="0 0 30 30" fill="currentColor">
-      <rect x="14" y="20" width="2" height="2" />
-      <rect x="12" y="18" width="2" height="2" />
-      <rect x="10" y="8" width="2" height="10" />
-      <rect x="16" y="18" width="2" height="2" />
-      <rect x="20" y="16" width="2" height="2" />
-      <rect x="18" y="8" width="2" height="8" />
-      <rect x="28" y="2" width="2" height="26" />
-      <rect y="2" width="2" height="26" />
-      <rect x="28" width="2" height="26" transform="rotate(90 28 0)" />
-      <rect x="28" y="28" width="2" height="26" transform="rotate(90 28 28)" />
-    </svg>
-  );
-};
-
-const NonCustodialIcon = () => {
-  return (
-    <svg width="40" height="40" viewBox="0 0 30 30" className="fill-current">
-      <rect x="8" y="22" width="14" height="2" />
-      <rect x="8" y="12" width="14" height="2" />
-      <rect
-        x="22"
-        y="24"
-        width="2"
-        height="12"
-        transform="rotate(-180 22 24)"
-      />
-      <rect
-        x="10"
-        y="24"
-        width="2"
-        height="12"
-        transform="rotate(-180 10 24)"
-      />
-      <rect x="12" y="12" width="2" height="2" transform="rotate(-180 12 12)" />
-      <rect x="20" y="12" width="2" height="2" transform="rotate(-180 20 12)" />
-      <rect x="12" y="10" width="2" height="2" transform="rotate(-180 12 10)" />
-      <rect x="20" y="10" width="2" height="2" transform="rotate(-180 20 10)" />
-      <rect x="18" y="8" width="2" height="2" transform="rotate(-180 18 8)" />
-      <rect x="14" y="8" width="2" height="2" transform="rotate(-180 14 8)" />
-      <rect x="16" y="8" width="2" height="2" transform="rotate(-180 16 8)" />
-      <rect x="28" y="2" width="2" height="26" />
-      <rect y="2" width="2" height="26" />
-      <rect x="28" width="2" height="26" transform="rotate(90 28 0)" />
-      <rect x="28" y="28" width="2" height="26" transform="rotate(90 28 28)" />
-    </svg>
-  );
-};
-
-const RewardIcon = () => {
-  return (
-    <svg width="40" height="40" viewBox="0 0 30 30" fill="currentColor">
-      <rect x="6" y="16" width="4" height="2" />
-      <rect x="10" y="14" width="2" height="2" />
-      <rect x="12" y="24" width="4" height="2" transform="rotate(-90 12 24)" />
-      <rect x="10" y="20" width="2" height="2" transform="rotate(-90 10 20)" />
-      <rect x="20" y="18" width="4" height="2" transform="rotate(-180 20 18)" />
-      <rect x="16" y="20" width="2" height="2" transform="rotate(-180 16 20)" />
-      <rect x="16" y="14" width="2" height="2" transform="rotate(90 16 14)" />
-      <rect x="22" y="10" width="2" height="2" transform="rotate(90 22 10)" />
-      <rect x="20" y="8" width="2" height="2" transform="rotate(90 20 8)" />
-      <rect x="24" y="8" width="2" height="2" transform="rotate(90 24 8)" />
-      <rect x="22" y="6" width="2" height="2" transform="rotate(90 22 6)" />
-      <rect x="12" y="10" width="2" height="4" />
-      <rect x="28" y="2" width="2" height="26" />
-      <rect y="2" width="2" height="26" />
-      <rect x="28" width="2" height="26" transform="rotate(90 28 0)" />
-      <rect x="28" y="28" width="2" height="26" transform="rotate(90 28 28)" />
-    </svg>
-  );
-};

apps/trading/components/welcome-dialog/welcome-dialog.tsx

@@ -1,52 +1,68 @@
-import React from 'react';
+import React, { useCallback } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
-import { Dialog, Intent } from '@vegaprotocol/ui-toolkit';
+import { Dialog } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
 import { useLocalStorage } from '@vegaprotocol/react-helpers';
-import { useEnvironment } from '@vegaprotocol/environment';
+import { useDataProvider } from '@vegaprotocol/data-provider';
-import { isBrowserWalletInstalled } from '@vegaprotocol/wallet';
+import { activeMarketsProvider } from '@vegaprotocol/markets';
 import * as constants from '../constants';
-import { WelcomeDialogContent } from './welcome-dialog-content';
+import { RiskNoticeDialog } from './risk-notice-dialog';
-import { getConfig } from '@vegaprotocol/wallet';
+import { WelcomeNoticeDialog } from './welcome-notice-dialog';
-import { Links, Routes } from '../../pages/client-router';
 import { useGlobalStore } from '../../stores';
+import { useEnvironment } from '@vegaprotocol/environment';
+import { Networks } from '@vegaprotocol/environment';
+import { isTestEnv } from '@vegaprotocol/utils';
 
 export const WelcomeDialog = () => {
   const { VEGA_ENV } = useEnvironment();
-  const [onBoardingViewed, setOnboardingViewed] = useLocalStorage(
+  const { pathname } = useLocation();
-    constants.ONBOARDING_VIEWED_KEY
+  let dialogContent: React.ReactNode;
-  );
+  let title = '';
-  const navigate = useNavigate();
+  let size: 'small' | 'medium' = 'small';
-  const isOnboardingDialogNeeded =
+  let onClose: ((open: boolean) => void) | undefined = undefined;
-    onBoardingViewed !== 'true' && !isBrowserWalletInstalled() && !getConfig();
+  const [riskAccepted] = useLocalStorage(constants.RISK_ACCEPTED_KEY);
-  const marketId = useGlobalStore((store) => store.marketId);
+  const { data } = useDataProvider({
+    dataProvider: activeMarketsProvider,
+    variables: undefined,
+  });
 
-  const onClose = () => {
+  const update = useGlobalStore((store) => store.update);
-    setOnboardingViewed('true');
+  const shouldDisplayWelcomeDialog = useGlobalStore(
-    const link = marketId
+    (store) => store.shouldDisplayWelcomeDialog
-      ? Links[Routes.MARKET](marketId)
-      : Links[Routes.HOME]();
-    navigate(link);
-  };
-  const title = (
-    <span className="font-alpha calt" data-testid="welcome-title">
-      {t('Console')}{' '}
-      <span className="text-vega-clight-100 dark:text-vega-cdark-100">
-        {VEGA_ENV}
-      </span>
-    </span>
   );
 
-  return isOnboardingDialogNeeded ? (
+  const isRiskDialogNeeded =
+    riskAccepted !== 'true' && VEGA_ENV !== Networks.MAINNET && !isTestEnv();
+
+  const isWelcomeDialogNeeded = pathname === '/' || shouldDisplayWelcomeDialog;
+
+  const onCloseDialog = useCallback(() => {
+    update({
+      shouldDisplayWelcomeDialog: isRiskDialogNeeded,
+    });
+  }, [update, isRiskDialogNeeded]);
+
+  if (isRiskDialogNeeded) {
+    dialogContent = (
+      <RiskNoticeDialog onClose={onCloseDialog} network={VEGA_ENV} />
+    );
+    title = t('Vega Console');
+    size = 'medium';
+  } else if (isWelcomeDialogNeeded && data?.length === 0) {
+    dialogContent = <WelcomeNoticeDialog />;
+    onClose = onCloseDialog;
+  } else {
+    dialogContent = null as React.ReactNode;
+  }
+
+  return (
     <Dialog
-      open
+      open={Boolean(dialogContent)}
       title={title}
-      size="medium"
+      size={size}
       onChange={onClose}
-      intent={Intent.None}
-      dataTestId="welcome-dialog"
     >
-      <WelcomeDialogContent />
+      {dialogContent}
     </Dialog>
-  ) : null;
+  );
 };

apps/trading/components/welcome-dialog/welcome-notice-dialog.tsx

@@ -0,0 +1,71 @@
+import { ExternalLink } from '@vegaprotocol/ui-toolkit';
+import { t } from '@vegaprotocol/i18n';
+import {
+  DApp,
+  Networks,
+  TOKEN_NEW_MARKET_PROPOSAL,
+  TOKEN_PROPOSALS,
+  useEnvironment,
+  useLinks,
+  ExternalLinks,
+} from '@vegaprotocol/environment';
+import { ProposedMarkets } from './proposed-markets';
+import { TelemetryApproval } from './telemetry-approval';
+
+export const WelcomeNoticeDialog = () => {
+  const { VEGA_ENV } = useEnvironment();
+  const tokenLink = useLinks(DApp.Token);
+  const consoleFairgroundLink = useLinks(DApp.Console, Networks.TESTNET);
+  const isMainnet = VEGA_ENV === Networks.MAINNET;
+  return (
+    <>
+      <h1
+        data-testid="welcome-notice-title"
+        className="text-2xl uppercase mb-6 text-center font-alpha calt"
+      >
+        {t('Welcome to Console')}
+      </h1>
+      <p className="leading-6 mb-4">
+        {t(
+          'There are no markets to trade on right now. Trading on Vega is now live, but markets need to pass a governance vote before they can be traded on. In the meantime:'
+        )}
+      </p>
+      <ul className="list-[square] pl-4 mb-4">
+        {isMainnet && (
+          <li className="mb-1">
+            <ExternalLink target="_blank" href={consoleFairgroundLink()}>
+              {t('Try out Console')}
+            </ExternalLink>
+            {t(' on Fairground, our Testnet')}
+          </li>
+        )}
+        <li className="mb-1">
+          <ExternalLink target="_blank" href={tokenLink(TOKEN_PROPOSALS)}>
+            {t('View and vote for proposed markets')}
+          </ExternalLink>
+        </li>
+        <li className="mb-1">
+          <ExternalLink
+            target="_blank"
+            href={tokenLink(TOKEN_NEW_MARKET_PROPOSAL)}
+          >
+            {t('Propose a market')}
+          </ExternalLink>
+        </li>
+        <li className="mb-1">
+          <ExternalLink target="_blank" href={ExternalLinks.BLOG}>
+            {t('Read about the mainnet launch')}
+          </ExternalLink>
+        </li>
+      </ul>
+      {isMainnet && (
+        <TelemetryApproval
+          helpText={t(
+            'Help identify bugs and improve the service by sharing anonymous usage data. You can change this in your settings at any time.'
+          )}
+        />
+      )}
+      <ProposedMarkets />
+    </>
+  );
+};

apps/trading/lib/vega-connectors.ts

@@ -3,13 +3,16 @@ import {
   JsonRpcConnector,
   ViewConnector,
   InjectedConnector,
+  SnapConnector,
 } from '@vegaprotocol/wallet';
 
 export const rest = new RestConnector();
 export const jsonRpc = new JsonRpcConnector();
 export const injected = new InjectedConnector();
+export const snap = new SnapConnector();
 
 let view: ViewConnector;
+
 if (typeof window !== 'undefined') {
   const urlParams = new URLSearchParams(window.location.hash.split('?')[1]);
   view = new ViewConnector(urlParams.get('address'));
@@ -22,4 +25,5 @@ export const Connectors = {
   rest,
   jsonRpc,
   view,
+  snap,
 };

apps/trading/pages/client-router.tsx

@@ -31,10 +31,6 @@ const LazyDisclaimer = dynamic(() => import('../client-pages/disclaimer'), {
   ssr: false,
 });
 
-const LazyDeposit = dynamic(() => import('../client-pages/deposit'), {
-  ssr: false,
-});
-
 export enum Routes {
   HOME = '/',
   MARKET = '/markets/:marketId',
@@ -42,7 +38,6 @@ export enum Routes {
   PORTFOLIO = '/portfolio',
   LIQUIDITY = '/liquidity/:marketId',
   DISCLAIMER = '/disclaimer',
-  DEPOSIT = '/deposit',
 }
 
 type ConsoleLinks = { [r in Routes]: (...args: string[]) => string };
@@ -56,7 +51,6 @@ export const Links: ConsoleLinks = {
   [Routes.LIQUIDITY]: (marketId: string) =>
     trimEnd(Routes.LIQUIDITY.replace(':marketId', marketId)),
   [Routes.DISCLAIMER]: () => Routes.DISCLAIMER,
-  [Routes.DEPOSIT]: () => Routes.DEPOSIT,
 };
 
 const routerConfig: RouteObject[] = [
@@ -103,7 +97,6 @@ const routerConfig: RouteObject[] = [
     path: Routes.DISCLAIMER,
     element: <LazyDisclaimer />,
   },
-  { path: Routes.DEPOSIT, element: <LazyDeposit /> },
   {
     path: '*',
     element: (

apps/trading/pages/dialogs-container.tsx

@@ -2,7 +2,7 @@ import {
   AssetDetailsDialog,
   useAssetDetailsDialogStore,
 } from '@vegaprotocol/assets';
-import { VegaConnectDialog, ViewAsDialog } from '@vegaprotocol/wallet';
+import { VegaConnectDialog } from '@vegaprotocol/wallet';
 import { Connectors } from '../lib/vega-connectors';
 import {
   Web3ConnectUncontrolledDialog,
@@ -19,7 +19,6 @@ const DialogsContainer = () => {
         connectors={Connectors}
         riskMessage={<RiskMessage />}
       />
-      <ViewAsDialog connector={Connectors.view} />
       <AssetDetailsDialog
         assetId={id}
         trigger={trigger || null}

apps/trading/stores/global.ts

@@ -5,6 +5,7 @@ import produce from 'immer';
 interface GlobalStore {
   marketId: string | null;
   update: (store: Partial<Omit<GlobalStore, 'update'>>) => void;
+  shouldDisplayWelcomeDialog: boolean;
 }
 
 interface PageTitleStore {
@@ -14,6 +15,7 @@ interface PageTitleStore {
 
 export const useGlobalStore = create<GlobalStore>()((set) => ({
   marketId: LocalStorage.getItem('marketId') || null,
+  shouldDisplayWelcomeDialog: false,
   update: (newState) => {
     set(
       produce((state: GlobalStore) => {

libs/accounts/src/lib/accounts-manager.tsx

@@ -75,7 +75,7 @@ export const AccountBreakdownDialog = memo(
   }) => {
     return (
       <Dialog
-        size="large"
+        size="medium"
         open={Boolean(assetId)}
         onChange={(isOpen) => {
           if (!isOpen) {
@@ -118,6 +118,7 @@ export const AccountManager = ({
   onMarketClick,
   gridProps,
 }: AccountManagerProps) => {
+  const gridRef = useRef<AgGridReact | null>(null);
   const [breakdownAssetId, setBreakdownAssetId] = useState<string>();
   const { data, error } = useDataProvider({
     dataProvider: aggregatedAccountsDataProvider,
@@ -137,6 +138,7 @@ export const AccountManager = ({
   return (
     <div className="relative h-full">
       <AccountTable
+        ref={gridRef}
         rowData={data}
         onClickAsset={onClickAsset}
         onClickDeposit={onClickDeposit}

libs/accounts/src/lib/accounts-table.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useCallback } from 'react';
+import { forwardRef, useMemo, useCallback } from 'react';
 import {
   addDecimalsFormatNumber,
   addDecimalsFormatNumberQuantum,
@@ -21,7 +21,7 @@ import type {
   RowHeightParams,
   ColDef,
 } from 'ag-grid-community';
-import type { AgGridReactProps } from 'ag-grid-react';
+import type { AgGridReact, AgGridReactProps } from 'ag-grid-react';
 import type { AccountFields } from './accounts-data-provider';
 import type { Asset } from '@vegaprotocol/types';
 import { CenteredGridCellWrapper } from '@vegaprotocol/datagrid';
@@ -75,250 +75,256 @@ export interface AccountTableProps extends AgGridReactProps {
   pinnedAsset?: PinnedAsset;
 }
 
-export const AccountTable = ({
+export const AccountTable = forwardRef<AgGridReact, AccountTableProps>(
-  onClickAsset,
+  (
-  onClickWithdraw,
+    {
-  onClickDeposit,
+      onClickAsset,
-  onClickBreakdown,
+      onClickWithdraw,
-  onClickTransfer,
+      onClickDeposit,
-  rowData,
+      onClickBreakdown,
-  isReadOnly,
+      onClickTransfer,
-  pinnedAsset,
+      rowData,
-  ...props
+      isReadOnly,
-}: AccountTableProps) => {
+      pinnedAsset,
-  const pinnedRow = useMemo(() => {
+      ...props
-    if (!pinnedAsset) {
-      return;
-    }
-    const currentPinnedAssetRow = rowData?.find(
-      (row) => row.asset.id === pinnedAsset?.id
-    );
-    if (!currentPinnedAssetRow) {
-      return {
-        asset: pinnedAsset,
-        available: '0',
-        used: '0',
-        total: '0',
-        balance: '0',
-      };
-    }
-    return currentPinnedAssetRow;
-  }, [pinnedAsset, rowData]);
-
-  const { getRowHeight } = props;
-
-  const getPinnedAssetRowHeight = useCallback(
-    (params: RowHeightParams) => {
-      if (
-        params.node.rowPinned &&
-        params.data.asset.id === pinnedAsset?.id &&
-        new BigNumber(params.data.total).isLessThanOrEqualTo(0)
-      ) {
-        return 32;
-      }
-      return getRowHeight ? getRowHeight(params) : undefined;
     },
-    [pinnedAsset?.id, getRowHeight]
+    ref
-  );
+  ) => {
+    const pinnedRow = useMemo(() => {
+      if (!pinnedAsset) {
+        return;
+      }
+      const currentPinnedAssetRow = rowData?.find(
+        (row) => row.asset.id === pinnedAsset?.id
+      );
+      if (!currentPinnedAssetRow) {
+        return {
+          asset: pinnedAsset,
+          available: '0',
+          used: '0',
+          total: '0',
+          balance: '0',
+        };
+      }
+      return currentPinnedAssetRow;
+    }, [pinnedAsset, rowData]);
 
-  const showDepositButton = pinnedRow?.balance === '0';
+    const { getRowHeight } = props;
 
-  const colDefs = useMemo(() => {
+    const getPinnedAssetRowHeight = useCallback(
-    const defs: ColDef[] = [
+      (params: RowHeightParams) => {
-      {
+        if (
-        headerName: t('Asset'),
+          params.node.rowPinned &&
-        field: 'asset.symbol',
+          params.data.asset.id === pinnedAsset?.id &&
-        headerTooltip: t(
+          new BigNumber(params.data.total).isLessThanOrEqualTo(0)
-          'Asset is the collateral that is deposited into the Vega protocol.'
+        ) {
-        ),
+          return 32;
-        cellClass: 'underline',
+        }
-        onCellClicked: ({ data }) => {
+        return getRowHeight ? getRowHeight(params) : undefined;
-          if (data) {
-            onClickAsset(data.asset.id);
-          }
-        },
       },
-      {
+      [pinnedAsset?.id, getRowHeight]
-        headerName: t('Used'),
+    );
-        type: 'rightAligned',
+
-        field: 'used',
+    const showDepositButton = pinnedRow?.balance === '0';
-        headerTooltip: t(
+
-          'Currently allocated to a market as margin or bond. Check the breakdown for details.'
+    const colDefs = useMemo(() => {
-        ),
+      const defs: ColDef[] = [
-        tooltipValueGetter: ({ value, data }) => {
+        {
-          if (!value || !data) return null;
+          headerName: t('Asset'),
-          return addDecimalsFormatNumber(value, data.asset.decimals);
+          field: 'asset.symbol',
+          headerTooltip: t(
+            'Asset is the collateral that is deposited into the Vega protocol.'
+          ),
+          cellClass: 'underline',
+          onCellClicked: ({ data }) => {
+            if (data) {
+              onClickAsset(data.asset.id);
+            }
+          },
         },
-        onCellClicked: ({ data }) => {
+        {
-          if (!data || !onClickBreakdown) return;
+          headerName: t('Used'),
-          onClickBreakdown(data.asset.id);
+          type: 'rightAligned',
-        },
+          field: 'used',
-        cellRenderer: ({
+          headerTooltip: t(
-          data,
+            'Currently allocated to a market as margin or bond. Check the breakdown for details.'
-          value,
+          ),
-        }: VegaICellRendererParams<AccountFields, 'used'>) => {
+          tooltipValueGetter: ({ value, data }) => {
-          if (!value || !data) return '-';
+            if (!value || !data) return null;
-          const percentageUsed = percentageValue(value, data.total);
+            return addDecimalsFormatNumber(value, data.asset.decimals);
-          const valueFormatted = addDecimalsFormatNumberQuantum(
+          },
+          onCellClicked: ({ data }) => {
+            if (!data || !onClickBreakdown) return;
+            onClickBreakdown(data.asset.id);
+          },
+          cellRenderer: ({
+            data,
             value,
-            data.asset.decimals,
+          }: VegaICellRendererParams<AccountFields, 'used'>) => {
-            data.asset.quantum
+            if (!value || !data) return '-';
-          );
+            const percentageUsed = percentageValue(value, data.total);
-
+            const valueFormatted = addDecimalsFormatNumberQuantum(
-          return data.breakdown ? (
+              value,
-            <>
+              data.asset.decimals,
-              <span className="underline">{valueFormatted}</span>
+              data.asset.quantum
-              <span
-                className={classNames(
-                  colorClass(percentageUsed),
-                  'ml-1 inline-block w-14'
-                )}
-              >
-                {percentageUsed.toFixed(2)}%
-              </span>
-            </>
-          ) : (
-            <>
-              <span className="underline">{valueFormatted}</span>
-              <span className="ml-2 inline-block w-14 text-muted">
-                {t('0.00%')}
-              </span>
-            </>
-          );
-        },
-      },
-      {
-        headerName: t('Available'),
-        field: 'available',
-        type: 'rightAligned',
-        headerTooltip: t(
-          'Deposited on the network, but not allocated to a market. Free to use for placing orders or providing liquidity.'
-        ),
-        tooltipValueGetter: ({ value, data }) => {
-          if (!value || !data) return null;
-          return addDecimalsFormatNumber(value, data.asset.decimals);
-        },
-        cellClass: ({ data }) => {
-          const percentageUsed = percentageValue(data?.used, data?.total);
-          return colorClass(percentageUsed, true);
-        },
-        valueFormatter: ({
-          value,
-          data,
-        }: VegaValueFormatterParams<AccountFields, 'available'>) => {
-          if (!value || !data) return '-';
-          return addDecimalsFormatNumberQuantum(
-            value,
-            data.asset.decimals,
-            data.asset.quantum
-          );
-        },
-      },
-
-      {
-        headerName: t('Total'),
-        type: 'rightAligned',
-        field: 'total',
-        headerTooltip: t(
-          'The total amount of each asset on this key. Includes used and available collateral.'
-        ),
-        tooltipValueGetter: ({ value, data }) => {
-          if (!value || !data) return null;
-          return addDecimalsFormatNumber(value, data.asset.decimals);
-        },
-        valueFormatter: ({
-          data,
-          value,
-        }: VegaValueFormatterParams<AccountFields, 'total'>) => {
-          if (!data || !value) return '-';
-          return addDecimalsFormatNumberQuantum(
-            value,
-            data.asset.decimals,
-            data.asset.quantum
-          );
-        },
-      },
-      {
-        colId: 'accounts-actions',
-        field: 'asset.id',
-        ...COL_DEFS.actions,
-        minWidth: showDepositButton ? 130 : COL_DEFS.actions.minWidth,
-        maxWidth: showDepositButton ? 130 : COL_DEFS.actions.maxWidth,
-        cellRenderer: ({
-          value: assetId,
-          node,
-        }: VegaICellRendererParams<AccountFields, 'asset.id'>) => {
-          if (!assetId) return null;
-          if (node.rowPinned && node.data?.total === '0') {
-            return (
-              <CenteredGridCellWrapper className="h-[30px] justify-end py-1">
-                <Button
-                  size="xs"
-                  variant="primary"
-                  data-testid="deposit"
-                  onClick={() => {
-                    onClickDeposit && onClickDeposit(assetId);
-                  }}
-                >
-                  <VegaIcon name={VegaIconNames.DEPOSIT} /> {t('Deposit')}
-                </Button>
-              </CenteredGridCellWrapper>
             );
-          }
+
-          return isReadOnly ? null : (
+            return data.breakdown ? (
-            <AccountsActionsDropdown
+              <>
-              assetId={assetId}
+                <span className="underline">{valueFormatted}</span>
-              assetContractAddress={
+                <span
-                node.data?.asset.source?.__typename === 'ERC20'
+                  className={classNames(
-                  ? node.data.asset.source.contractAddress
+                    colorClass(percentageUsed),
-                  : undefined
+                    'ml-1 inline-block w-14'
-              }
+                  )}
-              onClickDeposit={() => {
+                >
-                onClickDeposit && onClickDeposit(assetId);
+                  {percentageUsed.toFixed(2)}%
-              }}
+                </span>
-              onClickWithdraw={() => {
+              </>
-                onClickWithdraw && onClickWithdraw(assetId);
+            ) : (
-              }}
+              <>
-              onClickBreakdown={() => {
+                <span className="underline">{valueFormatted}</span>
-                onClickBreakdown && onClickBreakdown(assetId);
+                <span className="ml-2 inline-block w-14 text-muted">
-              }}
+                  {t('0.00%')}
-              onClickTransfer={() => {
+                </span>
-                onClickTransfer && onClickTransfer(assetId);
+              </>
-              }}
+            );
-            />
+          },
-          );
+        },
+        {
+          headerName: t('Available'),
+          field: 'available',
+          type: 'rightAligned',
+          headerTooltip: t(
+            'Deposited on the network, but not allocated to a market. Free to use for placing orders or providing liquidity.'
+          ),
+          tooltipValueGetter: ({ value, data }) => {
+            if (!value || !data) return null;
+            return addDecimalsFormatNumber(value, data.asset.decimals);
+          },
+          cellClass: ({ data }) => {
+            const percentageUsed = percentageValue(data?.used, data?.total);
+            return colorClass(percentageUsed, true);
+          },
+          valueFormatter: ({
+            value,
+            data,
+          }: VegaValueFormatterParams<AccountFields, 'available'>) => {
+            if (!value || !data) return '-';
+            return addDecimalsFormatNumberQuantum(
+              value,
+              data.asset.decimals,
+              data.asset.quantum
+            );
+          },
         },
-      },
-    ];
-    return defs;
-  }, [
-    onClickAsset,
-    onClickBreakdown,
-    onClickDeposit,
-    onClickWithdraw,
-    onClickTransfer,
-    isReadOnly,
-    showDepositButton,
-  ]);
 
-  const data = rowData?.filter((data) => data.asset.id !== pinnedAsset?.id);
+        {
+          headerName: t('Total'),
+          type: 'rightAligned',
+          field: 'total',
+          headerTooltip: t(
+            'The total amount of each asset on this key. Includes used and available collateral.'
+          ),
+          tooltipValueGetter: ({ value, data }) => {
+            if (!value || !data) return null;
+            return addDecimalsFormatNumber(value, data.asset.decimals);
+          },
+          valueFormatter: ({
+            data,
+            value,
+          }: VegaValueFormatterParams<AccountFields, 'total'>) => {
+            if (!data || !value) return '-';
+            return addDecimalsFormatNumberQuantum(
+              value,
+              data.asset.decimals,
+              data.asset.quantum
+            );
+          },
+        },
+        {
+          colId: 'accounts-actions',
+          field: 'asset.id',
+          ...COL_DEFS.actions,
+          minWidth: showDepositButton ? 130 : COL_DEFS.actions.minWidth,
+          maxWidth: showDepositButton ? 130 : COL_DEFS.actions.maxWidth,
+          cellRenderer: ({
+            value: assetId,
+            node,
+          }: VegaICellRendererParams<AccountFields, 'asset.id'>) => {
+            if (!assetId) return null;
+            if (node.rowPinned && node.data?.total === '0') {
+              return (
+                <CenteredGridCellWrapper className="h-[30px] justify-end py-1">
+                  <Button
+                    size="xs"
+                    variant="primary"
+                    data-testid="deposit"
+                    onClick={() => {
+                      onClickDeposit && onClickDeposit(assetId);
+                    }}
+                  >
+                    <VegaIcon name={VegaIconNames.DEPOSIT} /> {t('Deposit')}
+                  </Button>
+                </CenteredGridCellWrapper>
+              );
+            }
+            return isReadOnly ? null : (
+              <AccountsActionsDropdown
+                assetId={assetId}
+                assetContractAddress={
+                  node.data?.asset.source?.__typename === 'ERC20'
+                    ? node.data.asset.source.contractAddress
+                    : undefined
+                }
+                onClickDeposit={() => {
+                  onClickDeposit && onClickDeposit(assetId);
+                }}
+                onClickWithdraw={() => {
+                  onClickWithdraw && onClickWithdraw(assetId);
+                }}
+                onClickBreakdown={() => {
+                  onClickBreakdown && onClickBreakdown(assetId);
+                }}
+                onClickTransfer={() => {
+                  onClickTransfer && onClickTransfer(assetId);
+                }}
+              />
+            );
+          },
+        },
+      ];
+      return defs;
+    }, [
+      onClickAsset,
+      onClickBreakdown,
+      onClickDeposit,
+      onClickWithdraw,
+      onClickTransfer,
+      isReadOnly,
+      showDepositButton,
+    ]);
 
-  return (
+    const data = rowData?.filter((data) => data.asset.id !== pinnedAsset?.id);
-    <AgGrid
+
-      {...props}
+    return (
-      style={{ width: '100%', height: '100%' }}
+      <AgGrid
-      getRowId={({ data }: { data: AccountFields }) => data.asset.id}
+        {...props}
-      tooltipShowDelay={500}
+        style={{ width: '100%', height: '100%' }}
-      rowData={data}
+        getRowId={({ data }: { data: AccountFields }) => data.asset.id}
-      defaultColDef={{
+        ref={ref}
-        resizable: true,
+        tooltipShowDelay={500}
-        tooltipComponent: TooltipCellComponent,
+        rowData={data}
-        sortable: true,
+        defaultColDef={{
-        comparator: accountValuesComparator,
+          resizable: true,
-      }}
+          tooltipComponent: TooltipCellComponent,
-      columnDefs={colDefs}
+          sortable: true,
-      getRowHeight={getPinnedAssetRowHeight}
+          comparator: accountValuesComparator,
-      pinnedTopRowData={pinnedRow ? [pinnedRow] : undefined}
+        }}
-    />
+        columnDefs={colDefs}
-  );
+        getRowHeight={getPinnedAssetRowHeight}
-};
+        pinnedTopRowData={pinnedRow ? [pinnedRow] : undefined}
+      />
+    );
+  }
+);

libs/accounts/src/lib/use-account-balance.tsx

@@ -23,7 +23,7 @@ export const useAccountBalance = (assetId?: string) => {
     },
     [assetId]
   );
-  const { loading, error } = useDataProvider({
+  useDataProvider({
     dataProvider: accountsDataProvider,
     variables,
     skip: !pubKey || !assetId,
@@ -34,9 +34,7 @@ export const useAccountBalance = (assetId?: string) => {
     () => ({
       accountBalance: pubKey ? accountBalance : '',
       accountDecimals: pubKey ? accountDecimals : null,
-      loading,
-      error,
     }),
-    [accountBalance, accountDecimals, pubKey, loading, error]
+    [accountBalance, accountDecimals, pubKey]
   );
 };

libs/accounts/src/lib/use-market-account-balance.tsx

@@ -22,7 +22,7 @@ export const useMarketAccountBalance = (marketId: string) => {
     },
     [marketId]
   );
-  const { loading, error } = useDataProvider({
+  useDataProvider({
     dataProvider: accountsDataProvider,
     variables: { partyId: pubKey || '' },
     skip: !pubKey || !marketId,
@@ -33,9 +33,7 @@ export const useMarketAccountBalance = (marketId: string) => {
     () => ({
       accountBalance: pubKey ? accountBalance : '',
       accountDecimals: pubKey ? accountDecimals : null,
-      loading,
-      error,
     }),
-    [accountBalance, accountDecimals, pubKey, loading, error]
+    [accountBalance, accountDecimals, pubKey]
   );
 };

libs/candles-chart/jest.config.ts

@@ -4,25 +4,9 @@ export default {
   preset: '../../jest.preset.js',
   transform: {
     '^(?!.*\\.(js|jsx|ts|tsx|css|json)$)': '@nx/react/plugins/jest',
-    '^.+\\.[tj]sx?$': [
+    '^.+\\.[tj]sx?$': ['babel-jest', { presets: ['@nx/react/babel'] }],
-      'babel-jest',
-      {
-        presets: ['@nx/react/babel'],
-        // required for pennant to work in jest, due to having untranspiled exports
-        plugins: [
-          [
-            '@babel/plugin-proposal-private-methods',
-            {
-              loose: true,
-            },
-          ],
-        ],
-      },
-    ],
   },
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
   coverageDirectory: '../../coverage/libs/candles-chart',
   setupFilesAfterEnv: ['./src/setup-tests.ts'],
-  // dont ignore pennant from transpilation
-  transformIgnorePatterns: ['<rootDir>/node_modules/pennant'],
 };

libs/candles-chart/src/lib/candles-chart.spec.tsx

@@ -0,0 +1,71 @@
+import { CandlesChartContainer } from './candles-chart';
+import { render, screen, waitFor, act } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { MockedProvider } from '@apollo/client/testing';
+import { VegaWalletContext } from '@vegaprotocol/wallet';
+import { CandlesEventsDocument } from './__generated__/Candles';
+import type { CandlesEventsSubscription } from './__generated__/Candles';
+
+const candles: CandlesEventsSubscription = {
+  candles: {
+    lastUpdateInPeriod: 0,
+    periodStart: 0,
+    open: '0',
+    high: '0',
+    low: '0',
+    close: '0',
+    volume: '0',
+  },
+};
+const mocks = [
+  {
+    request: {
+      query: CandlesEventsDocument,
+      variables: { marketId: 'market-id', interval: 'INTERVAL_I15M' },
+    },
+    result: { data: candles },
+  },
+];
+
+describe('TradingChart', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(
+      <MockedProvider>
+        <VegaWalletContext.Provider value={{} as never}>
+          <CandlesChartContainer marketId={'market-id'} />
+        </VegaWalletContext.Provider>
+      </MockedProvider>
+    );
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('volume study should be preselected', async () => {
+    act(() => {
+      render(
+        <MockedProvider mocks={mocks}>
+          <VegaWalletContext.Provider value={{} as never}>
+            <CandlesChartContainer marketId={'market-id'} />
+          </VegaWalletContext.Provider>
+        </MockedProvider>
+      );
+    });
+    await waitFor(() => {
+      expect(
+        screen.getByText('Studies', {
+          selector: '[type="button"]',
+        })
+      ).toBeInTheDocument();
+    });
+    act(() => {
+      userEvent.click(
+        screen.getByText('Studies', {
+          selector: '[type="button"]',
+        })
+      );
+    });
+    await waitFor(() => {
+      expect(screen.getByRole('menu')).toBeInTheDocument();
+    });
+    expect(screen.getByText('Volume')).toHaveAttribute('data-state', 'checked');
+  });
+});

libs/candles-chart/src/lib/candles-chart.tsx

@@ -1,12 +1,92 @@
 import 'pennant/dist/style.css';
-import { CandlestickChart } from 'pennant';
+import {
+  CandlestickChart,
+  ChartType,
+  Interval,
+  Overlay,
+  Study,
+  chartTypeLabels,
+  intervalLabels,
+  overlayLabels,
+  studyLabels,
+} from 'pennant';
 import { VegaDataSource } from './data-source';
 import { useApolloClient } from '@apollo/client';
 import { useMemo } from 'react';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import { useThemeSwitcher } from '@vegaprotocol/react-helpers';
+import {
+  useThemeSwitcher,
+  getValidItem,
+  getValidSubset,
+} from '@vegaprotocol/react-helpers';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItemIndicator,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuTrigger,
+  Icon,
+} from '@vegaprotocol/ui-toolkit';
+import type { IconName } from '@blueprintjs/icons';
+import { IconNames } from '@blueprintjs/icons';
 import { t } from '@vegaprotocol/i18n';
-import { useCandlesChartSettings } from './use-candles-chart-settings';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
+import { immer } from 'zustand/middleware/immer';
+
+interface StoredSettings {
+  interval?: Interval;
+  type?: ChartType;
+  overlays?: Overlay[];
+  studies?: Study[];
+}
+
+export const useCandlesChartSettings = create<
+  StoredSettings & {
+    merge: (settings: StoredSettings) => void;
+    setType: (type: ChartType) => void;
+    setInterval: (interval: Interval) => void;
+    setOverlays: (overlays: Overlay[]) => void;
+    setStudies: (studies: Study[]) => void;
+  }
+>()(
+  persist(
+    immer((set) => ({
+      merge: (settings: StoredSettings) =>
+        set((state) => {
+          Object.assign(state, settings);
+        }),
+      setType: (type: ChartType) =>
+        set((state) => {
+          state.type = type;
+        }),
+      setInterval: (interval: Interval) =>
+        set((state) => {
+          state.interval = interval;
+        }),
+      setOverlays: (overlays: Overlay[]) =>
+        set((state) => {
+          state.overlays = overlays;
+        }),
+      setStudies: (studies: Study[]) =>
+        set((state) => {
+          state.studies = studies;
+        }),
+    })),
+    {
+      name: 'console-candles',
+    }
+  )
+);
+
+const chartTypeIcon = new Map<ChartType, IconName>([
+  [ChartType.AREA, IconNames.TIMELINE_AREA_CHART],
+  [ChartType.CANDLE, IconNames.WATERFALL_CHART],
+  [ChartType.LINE, IconNames.TIMELINE_LINE_CHART],
+  [ChartType.OHLC, IconNames.WATERFALL_CHART],
+]);
 
 export type CandlesChartContainerProps = {
   marketId: string;
@@ -19,32 +99,161 @@ export const CandlesChartContainer = ({
   const { pubKey } = useVegaWallet();
   const { theme } = useThemeSwitcher();
 
-  const { interval, chartType, overlays, studies, merge } =
+  const settings = useCandlesChartSettings();
-    useCandlesChartSettings();
+
+  const interval: Interval = getValidItem(
+    settings.interval,
+    Object.values(Interval),
+    Interval.I15M
+  );
+
+  const chartType: ChartType = getValidItem(
+    settings.type,
+    Object.values(ChartType),
+    ChartType.CANDLE
+  );
+
+  const overlays: Overlay[] = getValidSubset(
+    settings.overlays,
+    Object.values(Overlay),
+    []
+  );
+
+  const studies: Study[] = getValidSubset(
+    settings.studies,
+    Object.values(Study),
+    [Study.VOLUME]
+  );
 
   const dataSource = useMemo(() => {
     return new VegaDataSource(client, marketId, pubKey);
   }, [client, marketId, pubKey]);
 
   return (
-    <CandlestickChart
+    <div className="h-full flex flex-col">
-      dataSource={dataSource}
+      <div className="px-3 lg:px-4 py-2 flex flex-row flex-wrap gap-2 bg-vega-clight-700 dark:bg-vega-cdark-700">
-      options={{
+        <DropdownMenu
-        chartType,
+          trigger={
-        overlays,
+            <DropdownMenuTrigger>
-        studies,
+              {t(`Interval: ${intervalLabels[interval]}`)}
-        notEnoughDataText: (
+            </DropdownMenuTrigger>
-          <span className="text-xs text-center">{t('No data')}</span>
+          }
-        ),
+        >
-      }}
+          <DropdownMenuContent>
-      interval={interval}
+            <DropdownMenuRadioGroup
-      theme={theme}
+              value={interval}
-      onOptionsChanged={(options) => {
+              onValueChange={(value) => {
-        merge({
+                settings.setInterval(value as Interval);
-          overlays: options.overlays,
+              }}
-          studies: options.studies,
+            >
-        });
+              {Object.values(Interval).map((timeInterval) => (
-      }}
+                <DropdownMenuRadioItem
-    />
+                  key={timeInterval}
+                  inset
+                  value={timeInterval}
+                >
+                  {intervalLabels[timeInterval]}
+                  <DropdownMenuItemIndicator />
+                </DropdownMenuRadioItem>
+              ))}
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <DropdownMenu
+          trigger={
+            <DropdownMenuTrigger>
+              <Icon name={chartTypeIcon.get(chartType) as IconName} />
+            </DropdownMenuTrigger>
+          }
+        >
+          <DropdownMenuContent>
+            <DropdownMenuRadioGroup
+              value={chartType}
+              onValueChange={(value) => {
+                settings.setType(value as ChartType);
+              }}
+            >
+              {Object.values(ChartType).map((type) => (
+                <DropdownMenuRadioItem key={type} inset value={type}>
+                  {chartTypeLabels[type]}
+                  <DropdownMenuItemIndicator />
+                </DropdownMenuRadioItem>
+              ))}
+            </DropdownMenuRadioGroup>
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <DropdownMenu
+          trigger={<DropdownMenuTrigger>{t('Overlays')}</DropdownMenuTrigger>}
+        >
+          <DropdownMenuContent>
+            {Object.values(Overlay).map((overlay) => (
+              <DropdownMenuCheckboxItem
+                key={overlay}
+                checked={overlays.includes(overlay)}
+                onCheckedChange={() => {
+                  const newOverlays = [...overlays];
+                  const index = overlays.findIndex((item) => item === overlay);
+
+                  index !== -1
+                    ? newOverlays.splice(index, 1)
+                    : newOverlays.push(overlay);
+
+                  settings.setOverlays(newOverlays);
+                }}
+              >
+                {overlayLabels[overlay]}
+                <DropdownMenuItemIndicator />
+              </DropdownMenuCheckboxItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+        <DropdownMenu
+          trigger={<DropdownMenuTrigger>{t('Studies')}</DropdownMenuTrigger>}
+        >
+          <DropdownMenuContent>
+            {Object.values(Study).map((study) => (
+              <DropdownMenuCheckboxItem
+                key={study}
+                checked={studies.includes(study)}
+                onCheckedChange={() => {
+                  const newStudies = [...studies];
+                  const index = studies.findIndex((item) => item === study);
+
+                  index !== -1
+                    ? newStudies.splice(index, 1)
+                    : newStudies.push(study);
+
+                  settings.setStudies(newStudies);
+                }}
+              >
+                {studyLabels[study]}
+                <DropdownMenuItemIndicator />
+              </DropdownMenuCheckboxItem>
+            ))}
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+      <div className="flex-1">
+        <CandlestickChart
+          dataSource={dataSource}
+          options={{
+            chartType: chartType,
+            overlays: overlays,
+            studies: studies,
+            notEnoughDataText: (
+              <span className="text-xs text-center">{t('No data')}</span>
+            ),
+          }}
+          interval={interval}
+          theme={theme}
+          onOptionsChanged={(options) => {
+            settings.merge({
+              overlays: options.overlays,
+              studies: options.studies,
+            });
+          }}
+        />
+      </div>
+    </div>
   );
 };