feat: update key-to-key test

.github/ISSUE_TEMPLATE/feature-epic.md

@@ -1,29 +0,0 @@
----
-name: Feature Epic
-about: 
-  A template to capture and scope user requirements, high level process, and basic mockups for an upcoming feature as part of the initial core spec review process.
-title: 'Epic: '
-labels: feature-epic
----
-
-## Core Feature
-
-<Name>
-
-## Tasks
-
-- [ ] Define high level requirements
-- [ ] Create basic mockups
-- [ ] Update "API Requirements" in core spec
-- [ ] Update "User-Interface Spec" in relevant front end repo
-- [ ] Create detailed user stories using normal template
-
-## High Level Requirements
-
-## Basic Mockups
-
-## Link to API Requirements in Core spec
-
-## Link to User Interface Specs
-
-## Linked User Stories

.github/workflows/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>
-          <FilterLabel filters={filters} />
+        <DropdownMenuTrigger className="ml-0">
+          <Button size="xs" data-testid="filter-trigger">
+            <FilterLabel filters={filters} />
+          </Button>
         </DropdownMenuTrigger>
       }
     >
       <DropdownMenuContent>
-        {filters.size > 1 ? null : (
+        {filters.size > 0 ? null : (
           <>
             <DropdownMenuCheckboxItem
               onCheckedChange={() => setFilters(new Set(AllFilterOptions))}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

apps/governance/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/src/integration/charts-depth.cy.ts

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

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

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

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

@@ -4,7 +4,6 @@ const nodeHealthTrigger = 'node-health-trigger';
 
 describe('home', { tags: '@regression' }, () => {
   before(() => {
-    cy.setOnBoardingViewed();
     cy.mockTradingPage();
     cy.mockSubscription();
     cy.visit('/');

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -9,7 +9,6 @@ describe('markets proposed table', { tags: '@smoke' }, () => {
   before(() => {
     cy.mockTradingPage();
     cy.mockSubscription();
-    cy.setOnBoardingViewed();
     cy.visit('/#/markets/all');
     cy.get('[data-testid="Proposed markets"]').click();
   });
@@ -214,7 +213,6 @@ describe('no markets proposed', { tags: '@smoke', testIsolation: true }, () => {
       aliasGQLQuery(req, 'ProposalsList', proposal);
     });
     cy.mockSubscription();
-    cy.setOnBoardingViewed();
   });
 
   it('can see no markets message', () => {

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');
 });

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');
   });

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

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

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

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

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

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

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

@@ -5,15 +5,206 @@ 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.getByTestId(manageVegaWallet).click();
+    cy.getByTestId(walletTransfer).click();
+
+    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/.env.mainnet

@@ -20,4 +20,4 @@ NX_APP_VERSION=v0.20.21-core-0.71.6
 NX_SUCCESSOR_MARKETS=false
 NX_STOP_ORDERS=false
 # NX_ICEBERG_ORDERS
-# NX_PRODUCT_PERPETUALS
+# 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
-                    id="chart"
-                    name={t('Chart')}
-                    menu={<TradingViews.candles.menu />}
-                  >
+                  <Tab id="chart" name={t('Chart')}>
                     <TradingViews.candles.component marketId={marketId} />
                   </Tab>
                   <Tab id="depth" name={t('Depth')}>
@@ -98,48 +95,64 @@ const MainGrid = memo(
           <TradeGridChild>
             <Tabs storageKey="console-trade-grid-bottom">
               <Tab id="positions" name={t('Positions')}>
-                <TradingViews.positions.component
-                  onMarketClick={onMarketClick}
-                />
+                <VegaWalletContainer>
+                  <TradingViews.positions.component
+                    onMarketClick={onMarketClick}
+                  />
+                </VegaWalletContainer>
               </Tab>
               <Tab id="open-orders" name={t('Open')}>
-                <TradingViews.orders.component
-                  marketId={marketId}
-                  filter={Filter.Open}
-                />
+                <VegaWalletContainer>
+                  <TradingViews.orders.component
+                    marketId={marketId}
+                    filter={Filter.Open}
+                  />
+                </VegaWalletContainer>
               </Tab>
               <Tab id="closed-orders" name={t('Closed')}>
-                <TradingViews.orders.component
-                  marketId={marketId}
-                  filter={Filter.Closed}
-                />
+                <VegaWalletContainer>
+                  <TradingViews.orders.component
+                    marketId={marketId}
+                    filter={Filter.Closed}
+                  />
+                </VegaWalletContainer>
               </Tab>
               <Tab id="rejected-orders" name={t('Rejected')}>
-                <TradingViews.orders.component
-                  marketId={marketId}
-                  filter={Filter.Rejected}
-                />
+                <VegaWalletContainer>
+                  <TradingViews.orders.component
+                    marketId={marketId}
+                    filter={Filter.Rejected}
+                  />
+                </VegaWalletContainer>
               </Tab>
               <Tab id="orders" name={t('All')}>
-                <TradingViews.orders.component marketId={marketId} />
+                <VegaWalletContainer>
+                  <TradingViews.orders.component marketId={marketId} />
+                </VegaWalletContainer>
               </Tab>
               {FLAGS.STOP_ORDERS ? (
                 <Tab id="stop-orders" name={t('Stop orders')}>
-                  <TradingViews.stopOrders.component />
+                  <VegaWalletContainer>
+                    <TradingViews.stopOrders.component />
+                  </VegaWalletContainer>
                 </Tab>
               ) : null}
               <Tab id="fills" name={t('Fills')}>
-                <TradingViews.fills.component
-                  marketId={marketId}
-                  onMarketClick={onMarketClick}
-                />
+                <VegaWalletContainer>
+                  <TradingViews.fills.component
+                    marketId={marketId}
+                    onMarketClick={onMarketClick}
+                  />
+                </VegaWalletContainer>
               </Tab>
               <Tab id="accounts" name={t('Collateral')}>
-                <TradingViews.collateral.component
-                  pinnedAsset={pinnedAsset}
-                  onMarketClick={onMarketClick}
-                  hideButtons
-                />
+                <VegaWalletContainer>
+                  <TradingViews.collateral.component
+                    pinnedAsset={pinnedAsset}
+                    onMarketClick={onMarketClick}
+                    hideButtons
+                  />
+                </VegaWalletContainer>
               </Tab>
             </Tabs>
           </TradeGridChild>

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 {
-  CandlesChartContainer,
-  CandlesMenu,
-} from '@vegaprotocol/candles-chart';
+import { CandlesChartContainer } from '@vegaprotocol/candles-chart';
 import { Filter } from '@vegaprotocol/orders';
 import { NO_MARKET } from './constants';
 import { OrderbookContainer } from '../../components/orderbook-container';
@@ -38,7 +35,6 @@ export const TradingViews = {
   candles: {
     label: 'Candles',
     component: requiresMarket(CandlesChartContainer),
-    menu: CandlesMenu,
   },
   depth: {
     label: 'Depth',

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

@@ -18,7 +18,7 @@ export const MarketsPage = () => {
     <div className="h-full pt-0.5 pb-3 px-1.5">
       <div className="h-full my-1 border border-default rounded-sm">
         <Tabs storageKey="console-markets">
-          <Tab id="open-markets" name={t('Open markets')}>
+          <Tab id="all-markets" name={t('All markets')}>
             <Markets />
           </Tab>
           <Tab id="proposed-markets" name={t('Proposed markets')}>

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

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

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

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

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

@@ -7,6 +7,7 @@ import {
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { t } from '@vegaprotocol/i18n';
 import { useDataProvider } from '@vegaprotocol/data-provider';
+import { VegaWalletContainer } from '../../components/vega-wallet-container';
 import { ViewType, useSidebar } from '../../components/sidebar';
 
 export const WithdrawalsContainer = () => {
@@ -20,7 +21,7 @@ export const WithdrawalsContainer = () => {
   const { ready, delayed } = useIncompleteWithdrawals();
 
   return (
-    <>
+    <VegaWalletContainer>
       <div className="h-full relative">
         <WithdrawalsTable
           data-testid="withdrawals-history"
@@ -42,6 +43,6 @@ export const WithdrawalsContainer = () => {
           </Button>
         </div>
       )}
-    </>
+    </VegaWalletContainer>
   );
 };

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

@@ -1,8 +1,8 @@
 import { useCallback } from 'react';
 import { Button } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
-import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
+import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import type { PinnedAsset } from '@vegaprotocol/accounts';
 import { AccountManager } from '@vegaprotocol/accounts';

apps/trading/components/constants.ts

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

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

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

apps/trading/components/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/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

@@ -19,10 +19,6 @@ 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',

apps/trading/components/sidebar/sidebar.tsx

@@ -15,7 +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';
 
 const STORAGE_KEY = 'vega_sidebar_store';
 
@@ -185,7 +184,6 @@ export const SidebarContent = () => {
               setView({ type: ViewType.Deposit, assetId })
             }
           />
-          <GetStarted />
         </ContentWrapper>
       );
     } else {
@@ -209,7 +207,6 @@ export const SidebarContent = () => {
     return (
       <ContentWrapper title={t('Deposit')}>
         <DepositContainer assetId={view.assetId} />
-        <GetStarted />
       </ContentWrapper>
     );
   }
@@ -218,7 +215,6 @@ export const SidebarContent = () => {
     return (
       <ContentWrapper title={t('Withdraw')}>
         <WithdrawContainer assetId={view.assetId} />
-        <GetStarted />
       </ContentWrapper>
     );
   }
@@ -227,7 +223,6 @@ export const SidebarContent = () => {
     return (
       <ContentWrapper title={t('Transfer')}>
         <TransferContainer assetId={view.assetId} />
-        <GetStarted />
       </ContentWrapper>
     );
   }

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">
-        {walletInstalled ? t('Connect') : t('Get started')}
-      </span>
+      <span className="whitespace-nowrap uppercase">{t('Connect')}</span>
     </Button>
   );
 };

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

@@ -1,86 +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');
-  };
-
-  if (!pubKey && !isBrowserWalletInstalled()) {
-    return (
-      <div
-        className={classNames(
-          'flex flex-col bg-vega-blue-300 dark:bg-vega-blue-700 border border-vega-blue-350 dark:border-vega-blue-650 px-6 gap-4',
-          { 'py-4': lead },
-          { 'mt-8 py-6': !lead }
-        )}
-        data-testid="get-started-banner"
-      >
-        {lead && <h2>{lead}</h2>}
-        <h3>{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}
-            className="block w-full"
-            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>
-    );
-  }
-  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,230 +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';
-
-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 pb-2">
-      <div className="flex gap-8">
-        <div className="w-1/2 flex flex-col justify-between pt-3">
-          <ul className="ml-0">
-            <li className="my-3 flex gap-3 text-default">
-              <div className="shrink-0 pt-1.5">
-                <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>
-              </div>
-              <div>
-                <h3 className="text-lg">{t('Trade with no KYC')}</h3>
-                <span className="text-sm text-vega-clight-100 dark:text-vega-cdark-100 leading-4">
-                  {t(
-                    'Pseudonomously trade Futures markets. Spot and perps comming soon'
-                  )}
-                </span>
-              </div>
-            </li>
-            <li className="my-3 flex gap-3 text-vega-clight-50 dark:text-vega-cdark-50">
-              <div className="shrink-0 pt-1.5">
-                <svg
-                  width="40"
-                  height="40"
-                  viewBox="0 0 30 30"
-                  fill="currentColor"
-                >
-                  <g clip-path="url(#clip0_5168_49089)">
-                    <path d="M22 7H18V9H22V7Z" />
-                    <path d="M22 13H18V15H22V13Z" />
-                    <path d="M24 17H16V19H24V17Z" />
-                    <path d="M24 9H22V13H24V9Z" />
-                    <path d="M18 9H16V13H18V9Z" />
-                    <path d="M6 19H4V23H6V19Z" />
-                    <path d="M16 19H14V23H16V19Z" />
-                    <path d="M26 19H24V23H26V19Z" />
-                    <path d="M12 7H8V9H12V7Z" />
-                    <path d="M12 13H8V15H12V13Z" />
-                    <path d="M14 17H6V19H14V17Z" />
-                    <path d="M14 9H12V13H14V9Z" />
-                    <path d="M8 9H6V13H8V9Z" />
-                    <path d="M30 2H28V28H30V2Z" />
-                    <path d="M2 2H0V28H2V2Z" />
-                    <path d="M28 0H2V2H28V0Z" />
-                    <path d="M28 28H2V30H28V28Z" />
-                  </g>
-                  <defs>
-                    <clipPath id="clip0_5168_49089">
-                      <rect width="30" height="30" />
-                    </clipPath>
-                  </defs>
-                </svg>
-              </div>
-              <div>
-                <h3 className="text-lg">
-                  {t('Community generated trading pairs')}
-                </h3>
-                <span className="text-sm text-vega-clight-100 dark:text-vega-cdark-100 leading-4">
-                  {t('All markets are proposed and enacted by the community')}
-                </span>
-              </div>
-            </li>
-            <li className="my-3 flex gap-3 text-vega-clight-50 dark:text-vega-cdark-50">
-              <div className="shrink-0 pt-1.5">
-                <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>
-              </div>
-              <div>
-                <h3 className="text-lg">{t('Rewards')}</h3>
-                <span className="text-sm text-vega-clight-100 dark:text-vega-cdark-100 leading-4">
-                  {t(
-                    'Earn rewards for trading, market making and providing liquidity'
-                  )}
-                </span>
-              </div>
-            </li>
-          </ul>
-          <TradingButton
-            onClick={browseMarkets}
-            className="block w-full"
-            data-testid="browse-markets-button"
-          >
-            {t('Browse the markets')}
-          </TradingButton>
-        </div>
-        <div className="w-1/2 -mr-3 flex flex-grow">
-          <GetStarted lead={lead} />
-        </div>
-      </div>
-    </div>
-  );
-};

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

@@ -1,52 +1,68 @@
-import React from 'react';
-import { useNavigate } from 'react-router-dom';
-import { Dialog, Intent } from '@vegaprotocol/ui-toolkit';
+import React, { useCallback } from 'react';
+import { useLocation } from 'react-router-dom';
+import { Dialog } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
 import { useLocalStorage } from '@vegaprotocol/react-helpers';
-import { useEnvironment } from '@vegaprotocol/environment';
-import { isBrowserWalletInstalled } from '@vegaprotocol/wallet';
+import { useDataProvider } from '@vegaprotocol/data-provider';
+import { activeMarketsProvider } from '@vegaprotocol/markets';
 import * as constants from '../constants';
-import { WelcomeDialogContent } from './welcome-dialog-content';
-import { getConfig } from '@vegaprotocol/wallet';
-import { Links, Routes } from '../../pages/client-router';
+import { RiskNoticeDialog } from './risk-notice-dialog';
+import { WelcomeNoticeDialog } from './welcome-notice-dialog';
 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(
-    constants.ONBOARDING_VIEWED_KEY
-  );
-  const navigate = useNavigate();
-  const isOnboardingDialogNeeded =
-    onBoardingViewed !== 'true' && !isBrowserWalletInstalled() && !getConfig();
-  const marketId = useGlobalStore((store) => store.marketId);
+  const { pathname } = useLocation();
+  let dialogContent: React.ReactNode;
+  let title = '';
+  let size: 'small' | 'medium' = 'small';
+  let onClose: ((open: boolean) => void) | undefined = undefined;
+  const [riskAccepted] = useLocalStorage(constants.RISK_ACCEPTED_KEY);
+  const { data } = useDataProvider({
+    dataProvider: activeMarketsProvider,
+    variables: undefined,
+  });
 
-  const onClose = () => {
-    setOnboardingViewed('true');
-    const link = marketId
-      ? 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>
+  const update = useGlobalStore((store) => store.update);
+  const shouldDisplayWelcomeDialog = useGlobalStore(
+    (store) => store.shouldDisplayWelcomeDialog
   );
 
-  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/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/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) {

libs/announcements/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@vegaprotocol/announcements",
-  "version": "0.0.2"
+  "version": "0.0.1"
 }

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 } =
-    useCandlesChartSettings();
+  const settings = 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
-      dataSource={dataSource}
-      options={{
-        chartType,
-        overlays,
-        studies,
-        notEnoughDataText: (
-          <span className="text-xs text-center">{t('No data')}</span>
-        ),
-      }}
-      interval={interval}
-      theme={theme}
-      onOptionsChanged={(options) => {
-        merge({
-          overlays: options.overlays,
-          studies: options.studies,
-        });
-      }}
-    />
+    <div className="h-full flex flex-col">
+      <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">
+        <DropdownMenu
+          trigger={
+            <DropdownMenuTrigger>
+              {t(`Interval: ${intervalLabels[interval]}`)}
+            </DropdownMenuTrigger>
+          }
+        >
+          <DropdownMenuContent>
+            <DropdownMenuRadioGroup
+              value={interval}
+              onValueChange={(value) => {
+                settings.setInterval(value as Interval);
+              }}
+            >
+              {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>
   );
 };

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

@@ -1,17 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { CandlesMenu } from './candles-menu';
-
-describe('CandlesMenu', () => {
-  it('should render with volume study showing by default', async () => {
-    render(<CandlesMenu />);
-
-    await userEvent.click(
-      screen.getByText('Studies', {
-        selector: '[type="button"]',
-      })
-    );
-    expect(await screen.findByRole('menu')).toBeInTheDocument();
-    expect(screen.getByText('Volume')).toHaveAttribute('data-state', 'checked');
-  });
-});

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

@@ -1,160 +0,0 @@
-import 'pennant/dist/style.css';
-import {
-  ChartType,
-  Interval,
-  Overlay,
-  Study,
-  chartTypeLabels,
-  intervalLabels,
-  overlayLabels,
-  studyLabels,
-} from 'pennant';
-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';
-
-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 const CandlesMenu = () => {
-  const {
-    interval,
-    chartType,
-    studies,
-    overlays,
-    setInterval,
-    setType,
-    setStudies,
-    setOverlays,
-  } = useCandlesChartSettings();
-  const triggerClasses = 'text-xs';
-  const contentAlign = 'end';
-
-  return (
-    <>
-      <DropdownMenu
-        trigger={
-          <DropdownMenuTrigger className={triggerClasses}>
-            {t(`Interval: ${intervalLabels[interval]}`)}
-          </DropdownMenuTrigger>
-        }
-      >
-        <DropdownMenuContent align={contentAlign}>
-          <DropdownMenuRadioGroup
-            value={interval}
-            onValueChange={(value) => {
-              setInterval(value as Interval);
-            }}
-          >
-            {Object.values(Interval).map((timeInterval) => (
-              <DropdownMenuRadioItem
-                key={timeInterval}
-                inset
-                value={timeInterval}
-              >
-                {intervalLabels[timeInterval]}
-                <DropdownMenuItemIndicator />
-              </DropdownMenuRadioItem>
-            ))}
-          </DropdownMenuRadioGroup>
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu
-        trigger={
-          <DropdownMenuTrigger className={triggerClasses}>
-            <Icon name={chartTypeIcon.get(chartType) as IconName} />
-          </DropdownMenuTrigger>
-        }
-      >
-        <DropdownMenuContent align={contentAlign}>
-          <DropdownMenuRadioGroup
-            value={chartType}
-            onValueChange={(value) => {
-              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 className={triggerClasses}>
-            {t('Overlays')}
-          </DropdownMenuTrigger>
-        }
-      >
-        <DropdownMenuContent align={contentAlign}>
-          {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);
-
-                setOverlays(newOverlays);
-              }}
-            >
-              {overlayLabels[overlay]}
-              <DropdownMenuItemIndicator />
-            </DropdownMenuCheckboxItem>
-          ))}
-        </DropdownMenuContent>
-      </DropdownMenu>
-      <DropdownMenu
-        trigger={
-          <DropdownMenuTrigger className={triggerClasses}>
-            {t('Studies')}
-          </DropdownMenuTrigger>
-        }
-      >
-        <DropdownMenuContent align={contentAlign}>
-          {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);
-
-                setStudies(newStudies);
-              }}
-            >
-              {studyLabels[study]}
-              <DropdownMenuItemIndicator />
-            </DropdownMenuCheckboxItem>
-          ))}
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </>
-  );
-};

libs/candles-chart/src/lib/index.ts

@@ -1,5 +1,4 @@
 export * from './__generated__/Candles';
 export * from './__generated__/Chart';
 export * from './candles-chart';
-export * from './candles-menu';
 export * from './data-source';

libs/candles-chart/src/lib/use-candles-chart-settings.ts

@@ -1,99 +0,0 @@
-import { getValidItem, getValidSubset } from '@vegaprotocol/react-helpers';
-import { ChartType, Interval, Study } from 'pennant';
-import { Overlay } from 'pennant';
-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[];
-}
-
-const DEFAULT_CHART_SETTINGS = {
-  interval: Interval.I15M,
-  type: ChartType.CANDLE,
-  overlays: [],
-  studies: [Study.VOLUME],
-};
-
-export const useCandlesChartSettingsStore = create<
-  StoredSettings & {
-    merge: (settings: Partial<StoredSettings>) => void;
-    setType: (type: ChartType) => void;
-    setInterval: (interval: Interval) => void;
-    setOverlays: (overlays: Overlay[]) => void;
-    setStudies: (studies: Study[]) => void;
-  }
->()(
-  persist(
-    immer((set) => ({
-      ...DEFAULT_CHART_SETTINGS,
-      merge: (settings: Partial<StoredSettings>) =>
-        set((state) => {
-          Object.assign(state, settings);
-        }),
-      setType: (type) =>
-        set((state) => {
-          state.type = type;
-        }),
-      setInterval: (interval) =>
-        set((state) => {
-          state.interval = interval;
-        }),
-      setOverlays: (overlays) =>
-        set((state) => {
-          state.overlays = overlays;
-        }),
-      setStudies: (studies) =>
-        set((state) => {
-          state.studies = studies;
-        }),
-    })),
-    {
-      name: 'vega_candles_chart_store',
-    }
-  )
-);
-
-export const useCandlesChartSettings = () => {
-  const settings = useCandlesChartSettingsStore();
-
-  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]
-  );
-
-  return {
-    interval,
-    chartType,
-    overlays,
-    studies,
-    setInterval: settings.setInterval,
-    setType: settings.setType,
-    setStudies: settings.setStudies,
-    setOverlays: settings.setOverlays,
-    merge: settings.merge,
-  };
-};

libs/cypress/src/index.ts

@@ -12,7 +12,6 @@ import { addUpdateCapsuleMultiSig } from './lib/commands/add-validators-to-multi
 import {
   addVegaWalletConnect,
   addSetVegaWallet,
-  addSetOnBoardingViewed,
 } from './lib/commands/vega-wallet-connect';
 import { addMockTransactionResponse } from './lib/commands/mock-transaction-response';
 import { addCreateMarket } from './lib/commands/create-market';
@@ -39,7 +38,6 @@ addGetNetworkParameters();
 addUpdateCapsuleMultiSig();
 addVegaWalletConnect();
 addSetVegaWallet();
-addSetOnBoardingViewed();
 addMockTransactionResponse();
 addCreateMarket();
 addConnectPublicKey();

libs/cypress/src/lib/commands/vega-wallet-connect.ts

@@ -14,10 +14,6 @@ declare global {
     interface Chainable<Subject> {
       setVegaWallet(): void;
     }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    interface Chainable<Subject> {
-      setOnBoardingViewed(): void;
-    }
   }
 }
 
@@ -64,7 +60,7 @@ export function addVegaWalletConnect() {
 export function addSetVegaWallet() {
   Cypress.Commands.add('setVegaWallet', () => {
     cy.window().then((win) => {
-      win.localStorage.setItem('vega_onboarding_viewed', 'true');
+      win.localStorage.setItem('vega_risk_accepted', 'true');
       win.localStorage.setItem(
         'vega_wallet_config',
         JSON.stringify({
@@ -76,11 +72,3 @@ export function addSetVegaWallet() {
     });
   });
 }
-
-export function addSetOnBoardingViewed() {
-  Cypress.Commands.add('setOnBoardingViewed', () => {
-    cy.window().then((win) => {
-      win.localStorage.setItem('vega_onboarding_viewed', 'true');
-    });
-  });
-}

libs/deal-ticket/src/components/deal-ticket/side-selector.tsx

@@ -17,7 +17,7 @@ export const SideSelector = (props: SideSelectorProps) => {
   return (
     <RadioGroup.Root
       name="order-side"
-      className="mb-4 flex h-10 leading-10"
+      className="mb-2 flex h-10 leading-10"
       {...props}
     >
       {toggles.map(({ label, value }) => (

libs/deal-ticket/src/components/deal-ticket/type-selector.tsx

@@ -1,4 +1,5 @@
 import {
+  Icon,
   InputError,
   SimpleGrid,
   Tooltip,
@@ -9,8 +10,6 @@ import {
   TradingDropdownRadioGroup,
   TradingDropdownRadioItem,
   TradingDropdownTrigger,
-  VegaIcon,
-  VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
 import type { Market, StaticMarketData } from '@vegaprotocol/markets';
@@ -46,7 +45,7 @@ export const TypeToggle = ({
   return (
     <RadioGroup.Root
       name="order-type"
-      className={classNames('mb-2 grid h-8 leading-8 font-alpha text-xs', {
+      className={classNames('mb-2 grid h-8 leading-8 font-alpha text-sm', {
         'grid-cols-3': FLAGS.STOP_ORDERS,
         'grid-cols-2': !FLAGS.STOP_ORDERS,
       })}
@@ -82,11 +81,11 @@ export const TypeToggle = ({
                 }
               )}
             >
-              <button className="flex gap-1">
+              <button>
                 <span className="text-ellipsis whitespace-nowrap shrink overflow-hidden">
                   {t(selectedOption ? selectedOption.label : 'Stop')}
                 </span>
-                <VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={14} />
+                <Icon name="chevron-down" className="ml-1" />
               </button>
             </TradingDropdownTrigger>
           }

libs/environment/src/components/node-switcher/node-switcher-dialog.tsx

@@ -9,7 +9,7 @@ export const NodeSwitcherDialog = ({
   setOpen: (x: boolean) => void;
 }) => {
   return (
-    <Dialog open={open} onChange={setOpen} size="large">
+    <Dialog open={open} onChange={setOpen} size="medium">
       <NodeSwitcher closeDialog={() => setOpen(false)} />
     </Dialog>
   );

libs/i18n/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@vegaprotocol/i18n",
-  "version": "0.0.4",
+  "version": "0.0.3",
   "type": "commonjs"
 }

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

@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { forwardRef, useMemo } from 'react';
 import {
   addDecimalsFormatNumber,
   addDecimalsFormatNumberQuantum,
@@ -9,6 +9,7 @@ import { t } from '@vegaprotocol/i18n';
 import type { TypedDataAgGrid } from '@vegaprotocol/datagrid';
 import { AgGridLazy as AgGrid } from '@vegaprotocol/datagrid';
 import { TooltipCellComponent } from '@vegaprotocol/ui-toolkit';
+import type { AgGridReact } from 'ag-grid-react';
 import type {
   ColDef,
   ITooltipParams,
@@ -39,164 +40,168 @@ export interface LiquidityTableProps
   quantum?: string | number;
 }
 
-export const LiquidityTable = ({
-  symbol = '',
-  assetDecimalPlaces,
-  stakeToCcyVolume,
-  quantum,
-  ...props
-}: LiquidityTableProps) => {
-  const colDefs = useMemo(() => {
-    const assetDecimalsFormatter = ({ value }: ITooltipParams) => {
-      if (!value) return '-';
-      return `${addDecimalsFormatNumber(value, assetDecimalPlaces ?? 0)}`;
-    };
+export const LiquidityTable = forwardRef<AgGridReact, LiquidityTableProps>(
+  (
+    { symbol = '', assetDecimalPlaces, stakeToCcyVolume, quantum, ...props },
+    ref
+  ) => {
+    const colDefs = useMemo(() => {
+      const assetDecimalsFormatter = ({ value }: ITooltipParams) => {
+        if (!value) return '-';
+        return `${addDecimalsFormatNumber(value, assetDecimalPlaces ?? 0)}`;
+      };
 
-    const assetDecimalsQuantumFormatter = ({ value }: ValueFormatterParams) => {
-      if (!value) return '-';
-      return `${addDecimalsFormatNumberQuantum(
+      const assetDecimalsQuantumFormatter = ({
         value,
-        assetDecimalPlaces ?? 0,
-        quantum ?? 0
-      )}`;
-    };
+      }: ValueFormatterParams) => {
+        if (!value) return '-';
+        return `${addDecimalsFormatNumberQuantum(
+          value,
+          assetDecimalPlaces ?? 0,
+          quantum ?? 0
+        )}`;
+      };
 
-    const stakeToCcyVolumeFormatter = ({ value }: ITooltipParams) => {
-      if (!value) return '-';
-      const newValue = new BigNumber(value)
-        .times(Number(stakeToCcyVolume) || 1)
-        .toString();
-      return `${addDecimalsFormatNumber(newValue, assetDecimalPlaces ?? 0)}`;
-    };
+      const stakeToCcyVolumeFormatter = ({ value }: ITooltipParams) => {
+        if (!value) return '-';
+        const newValue = new BigNumber(value)
+          .times(Number(stakeToCcyVolume) || 1)
+          .toString();
+        return `${addDecimalsFormatNumber(newValue, assetDecimalPlaces ?? 0)}`;
+      };
 
-    const stakeToCcyVolumeQuantumFormatter = ({
-      value,
-    }: ValueFormatterParams) => {
-      if (!value) return '-';
-      const newValue = new BigNumber(value)
-        .times(Number(stakeToCcyVolume) || 1)
-        .toString();
-      return `${addDecimalsFormatNumberQuantum(
-        newValue,
-        assetDecimalPlaces ?? 0,
-        quantum ?? 0
-      )}`;
-    };
+      const stakeToCcyVolumeQuantumFormatter = ({
+        value,
+      }: ValueFormatterParams) => {
+        if (!value) return '-';
+        const newValue = new BigNumber(value)
+          .times(Number(stakeToCcyVolume) || 1)
+          .toString();
+        return `${addDecimalsFormatNumberQuantum(
+          newValue,
+          assetDecimalPlaces ?? 0,
+          quantum ?? 0
+        )}`;
+      };
 
-    const defs: ColDef[] = [
-      {
-        headerName: t('Party'),
-        field: 'party.id',
-        headerTooltip: t('The public key of the party making this commitment.'),
-      },
-      {
-        headerName: t(`Commitment (${symbol})`),
-        field: 'commitmentAmount',
-        type: 'rightAligned',
-        headerTooltip: t(
-          'The amount committed to the market by this liquidity provider.'
-        ),
-        valueFormatter: assetDecimalsQuantumFormatter,
-        tooltipValueGetter: assetDecimalsFormatter,
-      },
-      {
-        headerName: t(`Share`),
-        field: 'equityLikeShare',
-        type: 'rightAligned',
-        headerTooltip: t(
-          'The equity-like share of liquidity of the market used to determine allocation of LP fees. Calculated based on share of total liquidity, with a premium added for length of commitment.'
-        ),
-        valueFormatter: percentageFormatter,
-      },
-      {
-        headerName: t('Proposed fee'),
-        headerTooltip: t(
-          'The fee percentage (per trade) proposed by each liquidity provider.'
-        ),
-        field: 'fee',
-        type: 'rightAligned',
-        valueFormatter: percentageFormatter,
-      },
-      {
-        headerName: t('Market valuation at entry'),
-        field: 'averageEntryValuation',
-        type: 'rightAligned',
-        headerTooltip: t(
-          'The valuation of the market at the time the liquidity commitment was made. Commitments made at a lower valuation earlier in the lifetime of the market would be expected to have a higher equity-like share if the market has grown. If a commitment is amended, value will reflect the average of the market valuations across the lifetime of the commitment.'
-        ),
-        minWidth: 160,
-        valueFormatter: assetDecimalsQuantumFormatter,
-        tooltipValueGetter: assetDecimalsFormatter,
-      },
-      {
-        headerName: t('Obligation'),
-        field: 'commitmentAmount',
-        type: 'rightAligned',
-        headerTooltip: t(
-          `The liquidity provider's obligation to the market, calculated as the liquidity commitment amount multiplied by the value of the stake_to_ccy_volume network parameter to convert into units of liquidity volume. The obligation can be met by a combination of LP orders and limit orders on the order book.`
-        ),
-        valueFormatter: stakeToCcyVolumeQuantumFormatter,
-        tooltipValueGetter: stakeToCcyVolumeFormatter,
-      },
-      {
-        headerName: t('Supplied'),
-        field: 'balance',
-        type: 'rightAligned',
-        headerTooltip: t(
-          `The amount of liquidity volume supplied by the LP order in order to meet the obligation. If the obligation is already met in full by other limit orders from the same Vega key the LP order is not required and this value will be zero. Also note if the target stake for the market is less than the obligation the full value of the obligation may not be required.`
-        ),
-        valueFormatter: stakeToCcyVolumeQuantumFormatter,
-        tooltipValueGetter: stakeToCcyVolumeFormatter,
-      },
-      {
-        headerName: t('Status'),
-        headerTooltip: t('The current status of this liquidity provision.'),
-        field: 'status',
-        valueFormatter: ({ value }) => {
-          if (!value) return value;
-          return LiquidityProvisionStatusMapping[
-            value as LiquidityProvisionStatus
-          ];
+      const defs: ColDef[] = [
+        {
+          headerName: t('Party'),
+          field: 'party.id',
+          headerTooltip: t(
+            'The public key of the party making this commitment.'
+          ),
         },
-      },
-      {
-        headerName: t('Created'),
-        headerTooltip: t(
-          'The date and time this liquidity provision was created.'
-        ),
-        field: 'createdAt',
-        type: 'rightAligned',
-        valueFormatter: dateValueFormatter,
-      },
-      {
-        headerName: t('Updated'),
-        headerTooltip: t(
-          'The date and time this liquidity provision was last updated.'
-        ),
-        field: 'updatedAt',
-        type: 'rightAligned',
-        valueFormatter: dateValueFormatter,
-      },
-    ];
-    return defs;
-  }, [assetDecimalPlaces, quantum, stakeToCcyVolume, symbol]);
+        {
+          headerName: t(`Commitment (${symbol})`),
+          field: 'commitmentAmount',
+          type: 'rightAligned',
+          headerTooltip: t(
+            'The amount committed to the market by this liquidity provider.'
+          ),
+          valueFormatter: assetDecimalsQuantumFormatter,
+          tooltipValueGetter: assetDecimalsFormatter,
+        },
+        {
+          headerName: t(`Share`),
+          field: 'equityLikeShare',
+          type: 'rightAligned',
+          headerTooltip: t(
+            'The equity-like share of liquidity of the market used to determine allocation of LP fees. Calculated based on share of total liquidity, with a premium added for length of commitment.'
+          ),
+          valueFormatter: percentageFormatter,
+        },
+        {
+          headerName: t('Proposed fee'),
+          headerTooltip: t(
+            'The fee percentage (per trade) proposed by each liquidity provider.'
+          ),
+          field: 'fee',
+          type: 'rightAligned',
+          valueFormatter: percentageFormatter,
+        },
+        {
+          headerName: t('Market valuation at entry'),
+          field: 'averageEntryValuation',
+          type: 'rightAligned',
+          headerTooltip: t(
+            'The valuation of the market at the time the liquidity commitment was made. Commitments made at a lower valuation earlier in the lifetime of the market would be expected to have a higher equity-like share if the market has grown. If a commitment is amended, value will reflect the average of the market valuations across the lifetime of the commitment.'
+          ),
+          minWidth: 160,
+          valueFormatter: assetDecimalsQuantumFormatter,
+          tooltipValueGetter: assetDecimalsFormatter,
+        },
+        {
+          headerName: t('Obligation'),
+          field: 'commitmentAmount',
+          type: 'rightAligned',
+          headerTooltip: t(
+            `The liquidity provider's obligation to the market, calculated as the liquidity commitment amount multiplied by the value of the stake_to_ccy_volume network parameter to convert into units of liquidity volume. The obligation can be met by a combination of LP orders and limit orders on the order book.`
+          ),
+          valueFormatter: stakeToCcyVolumeQuantumFormatter,
+          tooltipValueGetter: stakeToCcyVolumeFormatter,
+        },
+        {
+          headerName: t('Supplied'),
+          field: 'balance',
+          type: 'rightAligned',
+          headerTooltip: t(
+            `The amount of liquidity volume supplied by the LP order in order to meet the obligation. If the obligation is already met in full by other limit orders from the same Vega key the LP order is not required and this value will be zero. Also note if the target stake for the market is less than the obligation the full value of the obligation may not be required.`
+          ),
+          valueFormatter: stakeToCcyVolumeQuantumFormatter,
+          tooltipValueGetter: stakeToCcyVolumeFormatter,
+        },
+        {
+          headerName: t('Status'),
+          headerTooltip: t('The current status of this liquidity provision.'),
+          field: 'status',
+          valueFormatter: ({ value }) => {
+            if (!value) return value;
+            return LiquidityProvisionStatusMapping[
+              value as LiquidityProvisionStatus
+            ];
+          },
+        },
+        {
+          headerName: t('Created'),
+          headerTooltip: t(
+            'The date and time this liquidity provision was created.'
+          ),
+          field: 'createdAt',
+          type: 'rightAligned',
+          valueFormatter: dateValueFormatter,
+        },
+        {
+          headerName: t('Updated'),
+          headerTooltip: t(
+            'The date and time this liquidity provision was last updated.'
+          ),
+          field: 'updatedAt',
+          type: 'rightAligned',
+          valueFormatter: dateValueFormatter,
+        },
+      ];
+      return defs;
+    }, [assetDecimalPlaces, quantum, stakeToCcyVolume, symbol]);
 
-  return (
-    <AgGrid
-      style={{ width: '100%', height: '100%' }}
-      overlayNoRowsTemplate={t('No liquidity provisions')}
-      getRowId={({ data }: { data: LiquidityProvisionData }) => data.id || ''}
-      tooltipShowDelay={500}
-      defaultColDef={{
-        resizable: true,
-        minWidth: 100,
-        tooltipComponent: TooltipCellComponent,
-        sortable: true,
-      }}
-      {...props}
-      columnDefs={colDefs}
-    />
-  );
-};
+    return (
+      <AgGrid
+        style={{ width: '100%', height: '100%' }}
+        overlayNoRowsTemplate={t('No liquidity provisions')}
+        getRowId={({ data }: { data: LiquidityProvisionData }) => data.id || ''}
+        ref={ref}
+        tooltipShowDelay={500}
+        defaultColDef={{
+          resizable: true,
+          minWidth: 100,
+          tooltipComponent: TooltipCellComponent,
+          sortable: true,
+        }}
+        {...props}
+        columnDefs={colDefs}
+      />
+    );
+  }
+);
 
 export default LiquidityTable;

libs/orders/src/lib/components/order-list/order-list.spec.tsx

@@ -6,7 +6,7 @@ import type { PartialDeep } from 'type-fest';
 import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
 import { VegaWalletContext } from '@vegaprotocol/wallet';
 import { MockedProvider } from '@apollo/client/testing';
-import type { OrderFieldsFragment, OrderListTableProps } from '../';
+import type { OrderListTableProps } from '../';
 import { OrderListTable } from '../';
 import {
   generateOrder,
@@ -110,39 +110,6 @@ describe('OrderListTable', () => {
     );
   });
 
-  it('should apply correct formatting applied for an iceberg order', async () => {
-    const icebergOrder = {
-      ...limitOrder,
-      icebergOrder: {
-        __typename: 'IcebergOrder',
-        minimumVisibleSize: '100',
-        peakSize: '50',
-        reservedRemaining: '50',
-      } as OrderFieldsFragment['icebergOrder'],
-    };
-    await act(async () => {
-      render(generateJsx({ rowData: [icebergOrder] }));
-    });
-    const cells = screen.getAllByRole('gridcell');
-    const expectedValues: string[] = [
-      icebergOrder.market?.tradableInstrument.instrument.code || '',
-      '0.05',
-      '0.10',
-      Schema.OrderTypeMapping[
-        icebergOrder.type || Schema.OrderType.TYPE_LIMIT
-      ] + ' (Iceberg)',
-      Schema.OrderStatusMapping[icebergOrder.status],
-      '-',
-      `${
-        Schema.OrderTimeInForceCode[icebergOrder.timeInForce]
-      }: ${getDateTimeFormat().format(new Date(icebergOrder.expiresAt ?? ''))}`,
-      getDateTimeFormat().format(new Date(icebergOrder.createdAt)),
-    ];
-    expectedValues.forEach((expectedValue, i) =>
-      expect(cells[i]).toHaveTextContent(expectedValue)
-    );
-  });
-
   it('should apply correct formatting for a rejected order', async () => {
     const rejectedOrder = {
       ...marketOrder,

libs/orders/src/lib/components/order-list/order-list.tsx

@@ -69,18 +69,6 @@ export const OrderListTable = memo<
             cellClass: 'font-mono text-right',
             type: 'rightAligned',
             valueGetter: ({ data }: VegaValueGetterParams<Order>) => {
-              if (data?.icebergOrder) {
-                return data?.size && data.market
-                  ? toBigNum(
-                      (
-                        BigInt(data.size) -
-                        BigInt(data.remaining) -
-                        BigInt(data.icebergOrder.reservedRemaining)
-                      ).toString(),
-                      data.market.positionDecimalPlaces ?? 0
-                    ).toNumber()
-                  : undefined;
-              }
               return data?.size && data.market
                 ? toBigNum(
                     (BigInt(data.size) - BigInt(data.remaining)).toString(),

libs/orders/src/lib/utils.spec.ts

@@ -7,125 +7,123 @@ import {
 } from './utils';
 import * as Types from '@vegaprotocol/types';
 
-describe('WithdrawalsTable', () => {
-  describe('getOrderToastTitle', () => {
-    it('should return the correct title', () => {
-      expect(getOrderToastTitle(Types.OrderStatus.STATUS_ACTIVE)).toBe(
-        'Order submitted'
-      );
-      expect(getOrderToastTitle(Types.OrderStatus.STATUS_FILLED)).toBe(
-        'Order filled'
-      );
-      expect(
-        getOrderToastTitle(Types.OrderStatus.STATUS_PARTIALLY_FILLED)
-      ).toBe('Order partially filled');
-      expect(getOrderToastTitle(Types.OrderStatus.STATUS_PARKED)).toBe(
-        'Order parked'
-      );
-      expect(getOrderToastTitle(Types.OrderStatus.STATUS_STOPPED)).toBe(
-        'Order stopped'
-      );
-      expect(getOrderToastTitle(Types.OrderStatus.STATUS_CANCELLED)).toBe(
-        'Order cancelled'
-      );
-      expect(getOrderToastTitle(Types.OrderStatus.STATUS_EXPIRED)).toBe(
-        'Order expired'
-      );
-      expect(getOrderToastTitle(Types.OrderStatus.STATUS_REJECTED)).toBe(
-        'Order rejected'
-      );
-      expect(getOrderToastTitle(undefined)).toBe(undefined);
-    });
+describe('getOrderToastTitle', () => {
+  it('should return the correct title', () => {
+    expect(getOrderToastTitle(Types.OrderStatus.STATUS_ACTIVE)).toBe(
+      'Order submitted'
+    );
+    expect(getOrderToastTitle(Types.OrderStatus.STATUS_FILLED)).toBe(
+      'Order filled'
+    );
+    expect(getOrderToastTitle(Types.OrderStatus.STATUS_PARTIALLY_FILLED)).toBe(
+      'Order partially filled'
+    );
+    expect(getOrderToastTitle(Types.OrderStatus.STATUS_PARKED)).toBe(
+      'Order parked'
+    );
+    expect(getOrderToastTitle(Types.OrderStatus.STATUS_STOPPED)).toBe(
+      'Order stopped'
+    );
+    expect(getOrderToastTitle(Types.OrderStatus.STATUS_CANCELLED)).toBe(
+      'Order cancelled'
+    );
+    expect(getOrderToastTitle(Types.OrderStatus.STATUS_EXPIRED)).toBe(
+      'Order expired'
+    );
+    expect(getOrderToastTitle(Types.OrderStatus.STATUS_REJECTED)).toBe(
+      'Order rejected'
+    );
+    expect(getOrderToastTitle(undefined)).toBe(undefined);
   });
+});
 
-  describe('getOrderToastIntent', () => {
-    it('should return the correct intent', () => {
-      expect(getOrderToastIntent(Types.OrderStatus.STATUS_PARKED)).toBe(
-        Intent.Warning
-      );
-      expect(getOrderToastIntent(Types.OrderStatus.STATUS_EXPIRED)).toBe(
-        Intent.Warning
-      );
-      expect(
-        getOrderToastIntent(Types.OrderStatus.STATUS_PARTIALLY_FILLED)
-      ).toBe(Intent.Warning);
-      expect(getOrderToastIntent(Types.OrderStatus.STATUS_REJECTED)).toBe(
-        Intent.Danger
-      );
-      expect(getOrderToastIntent(Types.OrderStatus.STATUS_STOPPED)).toBe(
-        Intent.Warning
-      );
-      expect(getOrderToastIntent(Types.OrderStatus.STATUS_FILLED)).toBe(
-        Intent.Success
-      );
-      expect(getOrderToastIntent(Types.OrderStatus.STATUS_ACTIVE)).toBe(
-        Intent.Success
-      );
-      expect(getOrderToastIntent(Types.OrderStatus.STATUS_CANCELLED)).toBe(
-        Intent.Success
-      );
-      expect(getOrderToastIntent(undefined)).toBe(undefined);
-    });
+describe('getOrderToastIntent', () => {
+  it('should return the correct intent', () => {
+    expect(getOrderToastIntent(Types.OrderStatus.STATUS_PARKED)).toBe(
+      Intent.Warning
+    );
+    expect(getOrderToastIntent(Types.OrderStatus.STATUS_EXPIRED)).toBe(
+      Intent.Warning
+    );
+    expect(getOrderToastIntent(Types.OrderStatus.STATUS_PARTIALLY_FILLED)).toBe(
+      Intent.Warning
+    );
+    expect(getOrderToastIntent(Types.OrderStatus.STATUS_REJECTED)).toBe(
+      Intent.Danger
+    );
+    expect(getOrderToastIntent(Types.OrderStatus.STATUS_STOPPED)).toBe(
+      Intent.Danger
+    );
+    expect(getOrderToastIntent(Types.OrderStatus.STATUS_FILLED)).toBe(
+      Intent.Success
+    );
+    expect(getOrderToastIntent(Types.OrderStatus.STATUS_ACTIVE)).toBe(
+      Intent.Success
+    );
+    expect(getOrderToastIntent(Types.OrderStatus.STATUS_CANCELLED)).toBe(
+      Intent.Success
+    );
+    expect(getOrderToastIntent(undefined)).toBe(undefined);
   });
+});
 
-  describe('getRejectionReason', () => {
-    it('should return the correct rejection reason for insufficient asset balance', () => {
-      expect(
-        getRejectionReason({
-          rejectionReason:
-            Types.OrderRejectionReason.ORDER_ERROR_INSUFFICIENT_ASSET_BALANCE,
-          status: Types.OrderStatus.STATUS_REJECTED,
-          id: '',
-          createdAt: undefined,
-          size: '',
-          price: '',
-          timeInForce: Types.OrderTimeInForce.TIME_IN_FORCE_FOK,
-          side: Types.Side.SIDE_BUY,
-          marketId: '',
-        })
-      ).toBe('Insufficient asset balance');
-    });
+describe('getRejectionReason', () => {
+  it('should return the correct rejection reason for insufficient asset balance', () => {
+    expect(
+      getRejectionReason({
+        rejectionReason:
+          Types.OrderRejectionReason.ORDER_ERROR_INSUFFICIENT_ASSET_BALANCE,
+        status: Types.OrderStatus.STATUS_REJECTED,
+        id: '',
+        createdAt: undefined,
+        size: '',
+        price: '',
+        timeInForce: Types.OrderTimeInForce.TIME_IN_FORCE_FOK,
+        side: Types.Side.SIDE_BUY,
+        marketId: '',
+      })
+    ).toBe('Insufficient asset balance');
+  });
 
-    it('should return the correct rejection reason when order is stopped', () => {
-      expect(
-        getRejectionReason({
-          rejectionReason: null,
-          status: Types.OrderStatus.STATUS_STOPPED,
-          id: '',
-          createdAt: undefined,
-          size: '',
-          price: '',
-          timeInForce: Types.OrderTimeInForce.TIME_IN_FORCE_FOK,
-          side: Types.Side.SIDE_BUY,
-          marketId: '',
-        })
-      ).toBe(
-        'Your Fill or Kill (FOK) order was not filled and it has been stopped'
-      );
-    });
+  it('should return the correct rejection reason when order is stopped', () => {
+    expect(
+      getRejectionReason({
+        rejectionReason: null,
+        status: Types.OrderStatus.STATUS_STOPPED,
+        id: '',
+        createdAt: undefined,
+        size: '',
+        price: '',
+        timeInForce: Types.OrderTimeInForce.TIME_IN_FORCE_FOK,
+        side: Types.Side.SIDE_BUY,
+        marketId: '',
+      })
+    ).toBe(
+      'Your Fill or Kill (FOK) order was not filled and it has been stopped'
+    );
   });
+});
 
-  describe('timeInForceLabel', () => {
-    it('should return the correct label for time in force', () => {
-      expect(timeInForceLabel(Types.OrderTimeInForce.TIME_IN_FORCE_FOK)).toBe(
-        `Fill or Kill (FOK)`
-      );
-      expect(timeInForceLabel(Types.OrderTimeInForce.TIME_IN_FORCE_GTC)).toBe(
-        `Good 'til Cancelled (GTC)`
-      );
-      expect(timeInForceLabel(Types.OrderTimeInForce.TIME_IN_FORCE_IOC)).toBe(
-        `Immediate or Cancel (IOC)`
-      );
-      expect(timeInForceLabel(Types.OrderTimeInForce.TIME_IN_FORCE_GTT)).toBe(
-        `Good 'til Time (GTT)`
-      );
-      expect(timeInForceLabel(Types.OrderTimeInForce.TIME_IN_FORCE_GFA)).toBe(
-        `Good for Auction (GFA)`
-      );
-      expect(timeInForceLabel(Types.OrderTimeInForce.TIME_IN_FORCE_GFN)).toBe(
-        `Good for Normal (GFN)`
-      );
-      expect(timeInForceLabel('')).toBe('');
-    });
+describe('timeInForceLabel', () => {
+  it('should return the correct label for time in force', () => {
+    expect(timeInForceLabel(Types.OrderTimeInForce.TIME_IN_FORCE_FOK)).toBe(
+      `Fill or Kill (FOK)`
+    );
+    expect(timeInForceLabel(Types.OrderTimeInForce.TIME_IN_FORCE_GTC)).toBe(
+      `Good 'til Cancelled (GTC)`
+    );
+    expect(timeInForceLabel(Types.OrderTimeInForce.TIME_IN_FORCE_IOC)).toBe(
+      `Immediate or Cancel (IOC)`
+    );
+    expect(timeInForceLabel(Types.OrderTimeInForce.TIME_IN_FORCE_GTT)).toBe(
+      `Good 'til Time (GTT)`
+    );
+    expect(timeInForceLabel(Types.OrderTimeInForce.TIME_IN_FORCE_GFA)).toBe(
+      `Good for Auction (GFA)`
+    );
+    expect(timeInForceLabel(Types.OrderTimeInForce.TIME_IN_FORCE_GFN)).toBe(
+      `Good for Normal (GFN)`
+    );
+    expect(timeInForceLabel('')).toBe('');
   });
 });

libs/orders/src/lib/utils.ts

@@ -36,7 +36,7 @@ export const getRejectionReason = (
     default:
       return order.rejectionReason
         ? t(Schema.OrderRejectionReasonMapping[order.rejectionReason])
-        : '';
+        : null;
   }
 };
 
@@ -79,9 +79,9 @@ export const getOrderToastIntent = (
     case Schema.OrderStatus.STATUS_PARKED:
     case Schema.OrderStatus.STATUS_EXPIRED:
     case Schema.OrderStatus.STATUS_PARTIALLY_FILLED:
-    case Schema.OrderStatus.STATUS_STOPPED:
       return Intent.Warning;
     case Schema.OrderStatus.STATUS_REJECTED:
+    case Schema.OrderStatus.STATUS_STOPPED:
       return Intent.Danger;
     case Schema.OrderStatus.STATUS_FILLED:
     case Schema.OrderStatus.STATUS_ACTIVE:

libs/react-helpers/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@vegaprotocol/react-helpers",
-  "version": "0.2.5"
+  "version": "0.2.4"
 }

libs/tailwindcss-config/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@vegaprotocol/tailwindcss-config",
-  "version": "0.0.4"
+  "version": "0.0.3"
 }

libs/tailwindcss-config/src/vega-custom-classes.js

@@ -51,12 +51,6 @@ const vegaCustomClasses = plugin(function ({ addUtilities }) {
     '.rtl-dir': {
       direction: 'rtl',
     },
-    '.dashed-background': {
-      background: `repeating-linear-gradient(0deg, transparent, transparent 2px, ${colors.neutral[900]} 2px, ${colors.neutral[900]} 4px)`,
-    },
-    '.dark .dashed-background': {
-      background: `repeating-linear-gradient(0deg, transparent, transparent 2px, ${colors.neutral[200]} 2px, ${colors.neutral[200]} 4px)`,
-    },
   });
 });
 

libs/types/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@vegaprotocol/types",
-  "version": "0.0.4"
+  "version": "0.0.3"
 }

libs/ui-toolkit/package.json

@@ -1,4 +1,4 @@
 {
   "name": "@vegaprotocol/ui-toolkit",
-  "version": "0.12.7"
+  "version": "0.12.6"
 }

libs/ui-toolkit/src/components/dialog/dialog.tsx

@@ -16,7 +16,7 @@ interface DialogProps {
   title?: string | ReactNode;
   icon?: ReactNode;
   intent?: Intent;
-  size?: 'small' | 'medium' | 'large';
+  size?: 'small' | 'medium';
   dataTestId?: string;
 }
 
@@ -46,8 +46,7 @@ export function Dialog({
     getIntentBorder(intent),
     {
       'w-[520px]': size === 'small',
-      'w-[680px]': size === 'medium',
-      'w-[720px] lg:w-[940px]': size === 'large',
+      'w-[720px] lg:w-[940px]': size === 'medium',
     }
   );
 

libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.tsx

@@ -43,18 +43,17 @@ export const DropdownMenuTrigger = forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,
   DropdownMenuPrimitive.DropdownMenuTriggerProps
 >(({ className, children, ...props }, forwardedRef) => {
-  const triggerClasses = classNames(
+  const defaultClasses = [
     'text-sm py-1 px-2 rounded bg-transparent border whitespace-nowrap',
     'border-vega-light-200 dark:border-vega-dark-200',
     'hover:border-vega-light-300 dark:hover:border-vega-dark-300',
-    className
-  );
+  ].join(' ');
 
   return (
     <DropdownMenuPrimitive.Trigger
       asChild={true}
       ref={forwardedRef}
-      className={triggerClasses}
+      className={className || defaultClasses}
       {...props}
     >
       <button>{children}</button>

libs/ui-toolkit/src/components/healthbar/healthbar.tsx

@@ -43,55 +43,7 @@ const Target = ({
       >
         <div
           className={classNames(
-            'health-target w-0.5 bg-vega-dark-100 dark:bg-vega-light-100 group-hover:scale-x-150 group-hover:scale-y-108',
-            {
-              'h-6': !isLarge,
-              'h-12': isLarge,
-            }
-          )}
-        />
-      </div>
-    </Tooltip>
-  );
-};
-
-const AuctionTarget = ({
-  trigger,
-  isLarge,
-  rangeLimit,
-  decimals,
-}: {
-  isLarge: boolean;
-  trigger: number;
-  rangeLimit: number;
-  decimals: number;
-}) => {
-  const leftPosition = new BigNumber(trigger).div(rangeLimit).multipliedBy(100);
-  return (
-    <Tooltip
-      description={
-        <div className="text-vega-dark-100 dark:text-vega-light-200">
-          <div className="mt-1.5 inline-flex">
-            <Indicator variant={Intent.None} />
-          </div>
-          <span>
-            {t('Auction Trigger stake')}{' '}
-            {addDecimalsFormatNumber(trigger, decimals)}
-          </span>
-        </div>
-      }
-    >
-      <div
-        className={classNames(
-          'absolute top-1/2 left-1/2 -translate-x-2/4 -translate-y-1/2 px-1.5 group'
-        )}
-        style={{
-          left: `${leftPosition}%`,
-        }}
-      >
-        <div
-          className={classNames(
-            'health-target w-0.5 group-hover:scale-x-150 group-hover:scale-y-108 dashed-background',
+            'health-target w-0.5 bg-black group-hover:scale-x-150 group-hover:scale-y-108',
             {
               'h-6': !isLarge,
               'h-12': isLarge,
@@ -181,21 +133,16 @@ export const HealthBar = ({
   levels,
   size = 'small',
   intent,
-  triggerRatio,
 }: {
   target: string;
   decimals: number;
   levels: Levels[];
   size?: 'small' | 'large';
   intent: Intent;
-  triggerRatio?: string;
 }) => {
   const targetNumber = parseInt(target, 10);
   const rangeLimit = targetNumber * 2;
 
-  const triggerRatioNumber = triggerRatio ? parseFloat(triggerRatio) : 0;
-  const auctionTrigger = targetNumber * triggerRatioNumber;
-
   let lastVisibleLevel = 0;
   const committedNumber = levels
     .reduce((total, current, index) => {
@@ -227,10 +174,7 @@ export const HealthBar = ({
         >
           <Full />
 
-          <div
-            className="health-bars h-[inherit] flex w-full
-              gap-0.5 outline outline-vega-light-200 dark:outline-vega-dark-200"
-          >
+          <div className="health-bars h-[inherit] flex w-full gap-0.5">
             {levels.map((p, index) => {
               const { commitmentAmount, fee } = p;
               const prevLevel = levels[index - 1]?.commitmentAmount;
@@ -262,15 +206,6 @@ export const HealthBar = ({
             )}
           </div>
         </div>
-        {triggerRatio && (
-          <AuctionTarget
-            isLarge={isLarge}
-            trigger={auctionTrigger}
-            rangeLimit={rangeLimit}
-            decimals={decimals}
-          />
-        )}
-
         <Target isLarge={isLarge} target={target} decimals={decimals} />
       </div>
     </div>

libs/ui-toolkit/src/components/tabs/tabs.spec.tsx

@@ -30,43 +30,4 @@ describe('Tabs', () => {
     await userEvent.click(screen.getByText('Tab two'));
     expect(await screen.getByText('Tab two content')).toBeInTheDocument();
   });
-
-  it('shows the menu component for the selected tab', async () => {
-    render(
-      <Tabs>
-        <Tab
-          id="one"
-          name="Tab one"
-          menu={
-            <>
-              <button>Tab 1 button 1</button>
-              <button>Tab 1 button 2</button>
-            </>
-          }
-        >
-          <p>Tab one content</p>
-        </Tab>
-        <Tab
-          id="two"
-          name="Tab two"
-          menu={
-            <>
-              <button>Tab 2 button 1</button>
-              <button>Tab 2 button 2</button>
-            </>
-          }
-        >
-          <p>Tab two content</p>
-        </Tab>
-      </Tabs>
-    );
-
-    expect(screen.getByText('Tab one content')).toBeInTheDocument();
-    expect(screen.getByText('Tab 1 button 1')).toBeInTheDocument();
-    expect(screen.getByText('Tab 1 button 2')).toBeInTheDocument();
-    await userEvent.click(screen.getByText('Tab two'));
-    expect(await screen.getByText('Tab two content')).toBeInTheDocument();
-    expect(screen.getByText('Tab 2 button 1')).toBeInTheDocument();
-    expect(screen.getByText('Tab 2 button 2')).toBeInTheDocument();
-  });
 });

libs/ui-toolkit/src/components/tabs/tabs.tsx

@@ -2,11 +2,10 @@ import * as TabsPrimitive from '@radix-ui/react-tabs';
 import {
   useLocalStorageSnapshot,
   getValidItem,
-  useResizeObserver,
 } from '@vegaprotocol/react-helpers';
 import classNames from 'classnames';
 import type { ReactElement, ReactNode } from 'react';
-import { Children, isValidElement, useRef, useState } from 'react';
+import { Children, isValidElement, useState } from 'react';
 export interface TabsProps extends TabsPrimitive.TabsProps {
   children: (ReactElement<TabProps> | null)[];
 }
@@ -25,19 +24,6 @@ export const Tabs = ({
     return children.find((v) => v)?.props.id;
   });
 
-  // Bunch of refs in order to detect wrapping in side the tabs so that we
-  // can apply a bg color
-  const wrapperRef = useRef<HTMLDivElement | null>(null);
-  const tabsRef = useRef<HTMLDivElement | null>(null);
-  const menuRef = useRef<HTMLDivElement | null>(null);
-  const [wrapped, setWrapped] = useState(() =>
-    isWrapped(tabsRef.current, menuRef.current)
-  );
-
-  useResizeObserver(wrapperRef.current, () => {
-    setWrapped(isWrapped(tabsRef.current, menuRef.current));
-  });
-
   return (
     <TabsPrimitive.Root
       {...props}
@@ -45,14 +31,10 @@ export const Tabs = ({
       onValueChange={onValueChange || setActiveTab}
       className="h-full grid grid-rows-[min-content_1fr]"
     >
-      <div
-        ref={wrapperRef}
-        className="flex flex-wrap justify-between border-b border-default min-w-0"
-      >
+      <div className="border-b border-default min-w-0">
         <TabsPrimitive.List
           className="flex flex-nowrap overflow-visible"
           role="tablist"
-          ref={tabsRef}
         >
           {Children.map(children, (child) => {
             if (!isValidElement(child) || child.props.hidden) return null;
@@ -85,27 +67,6 @@ export const Tabs = ({
             );
           })}
         </TabsPrimitive.List>
-        <div
-          ref={menuRef}
-          className={classNames('flex-1 p-1', {
-            'bg-vega-clight-700 dark:bg-vega-cdark-700': wrapped,
-            '': wrapped,
-          })}
-        >
-          {Children.map(children, (child) => {
-            if (!isValidElement(child) || child.props.hidden) return null;
-            return (
-              <TabsPrimitive.Content
-                value={child.props.id}
-                className={classNames('flex flex-nowrap gap-1', {
-                  'justify-end': !wrapped,
-                })}
-              >
-                {child.props.menu}
-              </TabsPrimitive.Content>
-            );
-          })}
-        </div>
       </div>
       <div className="h-full overflow-auto">
         {Children.map(children, (child) => {
@@ -131,7 +92,6 @@ interface TabProps {
   name: string;
   indicator?: ReactNode;
   hidden?: boolean;
-  menu?: ReactNode;
 }
 
 export const Tab = ({ children, ...props }: TabProps) => {
@@ -162,13 +122,3 @@ export const LocalStoragePersistTabs = ({
     />
   );
 };
-
-const isWrapped = (
-  tabs: HTMLDivElement | null,
-  menu: HTMLDivElement | null
-) => {
-  if (!tabs || !menu) return;
-  const listRect = tabs.getBoundingClientRect();
-  const menuRect = menu.getBoundingClientRect();
-  return menuRect.y > listRect.y;
-};

libs/ui-toolkit/src/components/trading-button/trading-button.tsx

@@ -24,7 +24,7 @@ const getClassName = (
   className?: string
 ) =>
   classNames(
-    'flex gap-2 items-center justify-center rounded disabled:opacity-40',
+    'flex gap-2 items-center justify-center rounded',
     // size
     {
       'h-12': !subLabel && size === 'large',
@@ -36,18 +36,12 @@ const getClassName = (
     },
     // colours
     {
-      'bg-vega-yellow hover:bg-vega-yellow-550 dark:bg-vega-yellow dark:hover:bg-vega-yellow-450':
-        intent === Intent.Primary,
-      'bg-vega-clight-500 hover:bg-vega-clight-400 dark:bg-vega-cdark-500 dark:hover:bg-vega-cdark-400':
-        intent === Intent.None,
-      'bg-vega-blue-350 hover:bg-vega-blue-400 dark:bg-vega-blue-650 dark:hover:bg-vega-blue-600':
-        intent === Intent.Info,
-      'bg-vega-orange-350 hover:bg-vega-orange-400 dark:bg-vega-orange-650 dark:hover:bg-vega-orange-600':
-        intent === Intent.Warning,
-      'bg-vega-red-350 hover:bg-vega-red-400 dark:bg-vega-red-650 dark:hover:bg-vega-red-600':
-        intent === Intent.Danger,
-      'bg-vega-green-350 hover:bg-vega-green-400 dark:bg-vega-green-650 dark:hover:bg-vega-green-600':
-        intent === Intent.Success,
+      'bg-vega-yellow dark:bg-vega-yellow': intent === Intent.Primary,
+      'bg-vega-clight-500 dark:bg-vega-cdark-500': intent === Intent.None,
+      'bg-vega-blue-350 dark:bg-vega-blue-650': intent === Intent.Info,
+      'bg-vega-orange-350 dark:bg-vega-orange-650': intent === Intent.Warning,
+      'bg-vega-red-350 dark:bg-vega-red-650': intent === Intent.Danger,
+      'bg-vega-green-350 dark:bg-vega-green-650': intent === Intent.Success,
       'text-vega-clight-50 dark:text-vega-cdark-50': intent !== Intent.Primary,
       'text-vega-clight-900 dark:text-vega-cdark-900':
         intent === Intent.Primary,

libs/utils/package.json

@@ -1,5 +1,5 @@
 {
   "name": "@vegaprotocol/utils",
-  "version": "0.0.7",
+  "version": "0.0.6",
   "type": "commonjs"
 }