chore: use Vega chevron for type selector dropdown

Co-authored-by: Matthew Russell <mattrussell36@gmail.com>

.github/ISSUE_TEMPLATE/feature-epic.md

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

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

@@ -0,0 +1,46 @@
+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,7 +10,6 @@ import {
   DropdownMenuTrigger,
   DropdownMenuSubContent,
   Icon,
-  Button,
 } from '@vegaprotocol/ui-toolkit';
 import type { Dispatch, SetStateAction } from 'react';
 import { FilterLabel } from './tx-filter-label';
@@ -100,15 +99,13 @@ export const TxsFilter = ({ filters, setFilters }: TxFilterProps) => {
     <DropdownMenu
       modal={false}
       trigger={
-        <DropdownMenuTrigger className="ml-0">
-          <Button size="xs" data-testid="filter-trigger">
-            <FilterLabel filters={filters} />
-          </Button>
+        <DropdownMenuTrigger>
+          <FilterLabel filters={filters} />
         </DropdownMenuTrigger>
       }
     >
       <DropdownMenuContent>
-        {filters.size > 0 ? null : (
+        {filters.size > 1 ? 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 || loading}
+            disabled={!hasMoreTxs}
             onClick={() => {
               nextPage();
             }}

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

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

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

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

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

@@ -5,11 +5,17 @@ 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: '0F8B98DA0923A50786B852D9CA11E051CACC4C733E1DB93D535C7D81DBD10F6F',
+    hash: generateHash(),
     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/use-txs-data';
+import { getTxsDataUrl } from '../../hooks/get-txs-data-url';
 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({ limit: txCount.toString(), filters });
+  const url = getTxsDataUrl({ filters, count: txCount });
   const {
     state: { data, loading, error },
   } = useFetch<BlockExplorerTransactions>(url);

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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,48 @@
+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,130 +1,141 @@
-import { useCallback, useEffect, useState } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import type { URLSearchParamsInit } from 'react-router-dom';
+import { useCallback } from 'react';
 import { useFetch } from '@vegaprotocol/react-helpers';
 import type {
   BlockExplorerTransactionResult,
   BlockExplorerTransactions,
 } from '../routes/types/block-explorer-response';
-import { DATA_SOURCES } from '../config';
 import isNumber from 'lodash/isNumber';
+import { AllFilterOptions } from '../components/txs/tx-filter';
+import type { FilterOption } from '../components/txs/tx-filter';
+import { BE_TXS_PER_REQUEST, getTxsDataUrl } from './get-txs-data-url';
 
-export interface TxsStateProps {
-  txsData: BlockExplorerTransactionResult[];
-  hasMoreTxs: boolean;
-  cursor: string;
-  previousCursors: string[];
-  hasPreviousPage: boolean;
+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 IUseTxsData {
-  limit: number;
-  filters?: string;
+  count?: number;
+  before?: string;
+  after?: string;
+  party?: string;
+  filters?: Set<FilterOption>;
 }
 
-interface IGetTxsDataUrl {
-  limit: string;
-  filters?: string;
-}
+export const useTxsData = ({
+  count = 25,
+  before,
+  after,
+  filters,
+  party,
+}: IUseTxsData) => {
+  const [, setSearchParams] = useSearchParams();
+  let hasMoreTxs = true;
+  let txsData: BlockExplorerTransactionResult[] = [];
 
-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({
+    filters: getTypeFilters(filters),
+    count,
+    before,
+    after,
+    party,
   });
 
-  const url = getTxsDataUrl({ limit: limit.toString(), filters });
-
   const {
     state: { data, error, loading },
     refetch,
   } = useFetch<BlockExplorerTransactions>(url, {}, true);
 
-  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]);
+  if (!loading && data && isNumber(data.transactions.length)) {
+    hasMoreTxs = data.transactions.length >= count;
+    txsData = data.transactions;
+  }
 
   const nextPage = useCallback(() => {
-    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 after = data?.transactions.at(-1)?.cursor || '';
+    const params: URLSearchParamsInit = { after };
+    if (filters) {
+      params.filters = Array.from(filters).join(',');
+    }
+    setSearchParams(params);
+  }, [filters, data, setSearchParams]);
 
   const previousPage = useCallback(() => {
-    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 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 refreshTxs = useCallback(async () => {
-    setTxsState(() => ({
-      txsData: [],
-      cursor: '',
-      previousCursors: [],
-      hasMoreTxs: false,
-      hasPreviousPage: false,
-    }));
+    const params: URLSearchParamsInit = {};
+    if (filters && filters.size > 0 && filters.size === 1) {
+      params.filters = Array.from(filters)[0];
+    }
+    setSearchParams(params);
 
-    refetch({ limit });
-  }, [setTxsState, limit, refetch, filters]); // eslint-disable-line react-hooks/exhaustive-deps
+    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]
+  );
 
   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,6 +204,7 @@ 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,9 +15,13 @@ 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 }>();
 
@@ -27,24 +31,21 @@ 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,
-    hasPreviousPage,
+    hasMoreTxs,
+    updateFilters,
   } = useTxsData({
-    limit: 25,
-    filters: f,
+    filters: filters.size === 1 ? filters : undefined,
+    before: params.get('before') || undefined,
+    after: !params.get('before') ? params.get('after') || undefined : undefined,
+    party: partyId,
   });
 
   const variables = useMemo(() => ({ partyId }), [partyId]);
@@ -102,15 +103,21 @@ const Party = () => {
         refreshTxs={refreshTxs}
         nextPage={nextPage}
         previousPage={previousPage}
-        hasPreviousPage={hasPreviousPage}
+        hasPreviousPage={true}
         loading={loading}
         hasMoreTxs={hasMoreTxs}
       >
-        <TxsFilter filters={filters} setFilters={setFilters} />
+        <TxsFilter
+          filters={filters}
+          setFilters={(f) => {
+            setFilters(f);
+            updateFilters(f as Set<FilterOption>);
+          }}
+        />
       </TxsListNavigation>
       {!error && txsData ? (
         <TxsInfiniteList
-          hasMoreTxs={hasMoreTxs}
+          hasMoreTxs={true}
           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 } from '../../../hooks/use-txs-data';
+import { useTxsData, getInitialFilters } from '../../../hooks/use-txs-data';
 import { useDocumentTitle } from '../../../hooks/use-document-title';
 
 import { useState } from 'react';
-import { AllFilterOptions, TxsFilter } from '../../../components/txs/tx-filter';
+import { TxsFilter } from '../../../components/txs/tx-filter';
+import type { FilterOption } from '../../../components/txs/tx-filter';
 import { TxsListNavigation } from '../../../components/txs/tx-list-navigation';
-
-const BE_TXS_PER_REQUEST = 25;
+import { useSearchParams } from 'react-router-dom';
 
 export const TxsList = () => {
   useDocumentTitle(['Transactions']);
@@ -27,25 +27,22 @@ export const TxsList = () => {
  * @returns {JSX.Element} Transaction List and controls
  */
 export const TxsListFiltered = () => {
-  const [filters, setFilters] = useState(new Set(AllFilterOptions));
-
-  const f =
-    filters && filters.size === 1
-      ? `filters[cmd.type]=${Array.from(filters)[0]}`
-      : '';
+  const [params] = useSearchParams();
+  const [filters, setFilters] = useState(getInitialFilters(params));
 
   const {
-    hasMoreTxs,
     nextPage,
     previousPage,
     error,
     refreshTxs,
     loading,
     txsData,
-    hasPreviousPage,
+    hasMoreTxs,
+    updateFilters,
   } = useTxsData({
-    limit: BE_TXS_PER_REQUEST,
-    filters: f,
+    filters: filters.size === 1 ? filters : undefined,
+    before: params.get('before') || undefined,
+    after: !params.get('before') ? params.get('after') || undefined : undefined,
   });
 
   return (
@@ -54,11 +51,17 @@ export const TxsListFiltered = () => {
         refreshTxs={refreshTxs}
         nextPage={nextPage}
         previousPage={previousPage}
-        hasPreviousPage={hasPreviousPage}
+        hasPreviousPage={true}
         loading={loading}
         hasMoreTxs={hasMoreTxs}
       >
-        <TxsFilter filters={filters} setFilters={setFilters} />
+        <TxsFilter
+          filters={filters}
+          setFilters={(f) => {
+            setFilters(f);
+            updateFilters(f as Set<FilterOption>);
+          }}
+        />
       </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="medium"
+        size="large"
         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="medium" open={isOpen} onChange={onChange}>
+    <Dialog size="large" 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,6 +2,7 @@ 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,6 +202,7 @@ describe('Closed markets', { tags: '@smoke' }, () => {
   const specDataConnection = createDataConnection();
 
   before(() => {
+    cy.setOnBoardingViewed();
     cy.mockGQL((req) => {
       aliasGQLQuery(req, 'ChainId', chainIdQuery());
       aliasGQLQuery(req, 'Statistics', statisticsQuery());
@@ -455,6 +456,7 @@ 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,6 +4,7 @@ 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 = 'dialog-content';
+const dialogContent = 'welcome-dialog';
 
 const generateProposal = (code: string): ProposalListFieldsFragment => ({
   __typename: 'Proposal',
@@ -140,43 +140,43 @@ describe('home', { tags: '@regression' }, () => {
       cy.wait('@MarketsData');
     });
 
-    it('redirects to market/all and displays welcome notice', () => {
+    it('close welcome dialog should redirect to market/all', () => {
       cy.url().should('eq', Cypress.config().baseUrl + `/#/markets/all`);
-      cy.getByTestId('welcome-notice-title').should(
-        'contain.text',
-        'Welcome to Console'
-      );
-    });
-  });
-
-  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,
-          },
-        });
+      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.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');
+    });
+
+    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'
+        );
+      });
+    });
+
+    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');
     });
   });
 
@@ -185,7 +185,7 @@ describe('home', { tags: '@regression' }, () => {
       cy.window().then((window) => {
         window.localStorage.setItem('marketId', 'market-1');
         cy.visit('/');
-        cy.wait('@Markets');
+        cy.getByTestId('dialog-close').click();
         cy.location('hash').should('equal', '#/markets/market-1');
         cy.getByTestId(dialogContent).should('not.exist');
       });
@@ -199,6 +199,7 @@ 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,12 +3,13 @@ import type { MarketsQuery } from '@vegaprotocol/markets';
 import * as Schema from '@vegaprotocol/types';
 
 const rowSelector =
-  '[data-testid="tab-all-markets"] .ag-center-cols-container .ag-row';
+  '[data-testid="tab-open-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,
@@ -34,7 +35,7 @@ describe('markets all table', { tags: '@smoke' }, () => {
       'Settlement asset',
       '',
     ];
-    cy.getByTestId('tab-all-markets').within(($headers) => {
+    cy.getByTestId('tab-open-markets').within(($headers) => {
       cy.wrap($headers)
         .get('.ag-header-cell-text')
         .each(($header, i) => {
@@ -44,7 +45,7 @@ describe('markets all table', { tags: '@smoke' }, () => {
   });
 
   it('markets tab should be rendered properly', () => {
-    cy.get('[data-testid="All markets"]').should(
+    cy.get('[data-testid="Open markets"]').should(
       'have.attr',
       'data-state',
       'active'
@@ -166,7 +167,7 @@ describe('markets all table', { tags: '@smoke' }, () => {
       'ETHBTC.QM21',
       'SOLUSD',
     ];
-    cy.get('[data-testid="All markets"]').click({ force: true });
+    cy.get('[data-testid="Open 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
@@ -191,7 +192,7 @@ describe('markets all table', { tags: '@smoke' }, () => {
   });
 });
 
-describe('no all markets', { tags: '@smoke', testIsolation: true }, () => {
+describe('no open markets', { tags: '@smoke', testIsolation: true }, () => {
   before(() => {
     cy.mockTradingPage();
     const markets: MarketsQuery = {};
@@ -199,11 +200,12 @@ describe('no all 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-all-markets').should('contain.text', 'No markets');
+    cy.getByTestId('tab-open-markets').should('contain.text', 'No markets');
   });
 });

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

@@ -21,6 +21,7 @@ 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,6 +36,7 @@ const headers = [
 
 describe('liquidity table - trading', { tags: '@smoke' }, () => {
   before(() => {
+    cy.setOnBoardingViewed();
     cy.mockSubscription();
     cy.mockTradingPage(
       Schema.MarketState.STATE_ACTIVE,
@@ -119,6 +120,7 @@ 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,6 +12,7 @@ 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,6 +30,7 @@ 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,6 +9,7 @@ describe('markets proposed table', { tags: '@smoke' }, () => {
   before(() => {
     cy.mockTradingPage();
     cy.mockSubscription();
+    cy.setOnBoardingViewed();
     cy.visit('/#/markets/all');
     cy.get('[data-testid="Proposed markets"]').click();
   });
@@ -100,7 +101,6 @@ describe('markets proposed table', { tags: '@smoke' }, () => {
           'VEGA_TOKEN_URL'
         )}/proposals/e9ec6d5c46a7e7bcabf9ba7a893fa5a5eeeec08b731f06f7a6eb7bf0e605b829`
       );
-    cy.getByTestId('proposal-actions-content').click();
   });
 
   // 6001-MARK-060
@@ -214,11 +214,13 @@ describe('no markets proposed', { tags: '@smoke', testIsolation: true }, () => {
       aliasGQLQuery(req, 'ProposalsList', proposal);
     });
     cy.mockSubscription();
-    cy.visit('/#/markets/all');
-    cy.get('[data-testid="Proposed markets"]').click();
+    cy.setOnBoardingViewed();
   });
 
   it('can see no markets message', () => {
+    cy.visit('/#/markets/all');
+    cy.get('[data-testid="Proposed markets"]').click();
+
     // 6001-MARK-061
     cy.getByTestId('tab-proposed-markets').should('contain.text', 'No markets');
   });

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

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

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

@@ -15,6 +15,7 @@ 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,6 +9,7 @@ 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,6 +17,7 @@ describe(
       cy.visit('/#/portfolio');
       cy.mockTradingPage();
       cy.mockSubscription();
+      cy.setOnBoardingViewed();
       cy.get('[data-testid="pathname-/portfolio"]').should('exist');
     });
 
@@ -122,6 +123,7 @@ 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

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

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

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

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

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

apps/trading/.env

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

apps/trading/.env.capsule

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

apps/trading/.env.devnet

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

apps/trading/.env.mainnet

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

apps/trading/.env.mainnet-mirror

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

apps/trading/.env.stagnet1

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

apps/trading/.env.testnet

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

apps/trading/.env.validators-testnet

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

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

@@ -0,0 +1,19 @@
+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

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

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

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

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

@@ -37,6 +37,7 @@ export const TradePanels = ({
   const onOrderTypeClick = useMarketLiquidityClickHandler();
 
   const [view, setView] = useState<TradingView>('candles');
+
   const renderView = () => {
     const Component = memo<{
       marketId: string;
@@ -65,8 +66,23 @@ 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_1fr_min-content]">
+    <div className="h-full grid grid-rows-[min-content_min-content_1fr_min-content]">
       <div>
         {FLAGS.SUCCESSOR_MARKETS && (
           <>
@@ -76,6 +92,7 @@ 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,7 +2,10 @@ import type { ComponentProps } from 'react';
 import { Splash } from '@vegaprotocol/ui-toolkit';
 import { TradesContainer } from '@vegaprotocol/trades';
 import { DepthChartContainer } from '@vegaprotocol/market-depth';
-import { CandlesChartContainer } from '@vegaprotocol/candles-chart';
+import {
+  CandlesChartContainer,
+  CandlesMenu,
+} from '@vegaprotocol/candles-chart';
 import { Filter } from '@vegaprotocol/orders';
 import { NO_MARKET } from './constants';
 import { OrderbookContainer } from '../../components/orderbook-container';
@@ -12,6 +15,7 @@ import { AccountsContainer } from '../../components/accounts-container';
 import { LiquidityContainer } from '../../components/liquidity-container';
 import type { OrderContainerProps } from '../../components/orders-container';
 import { OrdersContainer } from '../../components/orders-container';
+import { StopOrdersContainer } from '../../components/stop-orders-container';
 
 type MarketDependantView =
   | typeof CandlesChartContainer
@@ -34,6 +38,7 @@ export const TradingViews = {
   candles: {
     label: 'Candles',
     component: requiresMarket(CandlesChartContainer),
+    menu: CandlesMenu,
   },
   depth: {
     label: 'Depth',
@@ -74,6 +79,10 @@ export const TradingViews = {
     label: 'All',
     component: OrdersContainer,
   },
+  stopOrders: {
+    label: 'Stop',
+    component: StopOrdersContainer,
+  },
   collateral: { label: 'Collateral', component: AccountsContainer },
   fills: { label: 'Fills', component: FillsContainer },
 };

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

@@ -18,7 +18,7 @@ export const MarketsPage = () => {
     <div className="h-full pt-0.5 pb-3 px-1.5">
       <div className="h-full my-1 border border-default rounded-sm">
         <Tabs storageKey="console-markets">
-          <Tab id="all-markets" name={t('All markets')}>
+          <Tab id="open-markets" name={t('Open 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('Connect wallet')}</Splash>;
+    return <Splash>{t('Please connect Vega wallet')}</Splash>;
   }
 
   return (

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

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

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

@@ -7,7 +7,6 @@ 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 = () => {
@@ -21,7 +20,7 @@ export const WithdrawalsContainer = () => {
   const { ready, delayed } = useIncompleteWithdrawals();
 
   return (
-    <VegaWalletContainer>
+    <>
       <div className="h-full relative">
         <WithdrawalsTable
           data-testid="withdrawals-history"
@@ -43,6 +42,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 { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
 import { Splash } from '@vegaprotocol/ui-toolkit';
+import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
 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 RISK_ACCEPTED_KEY = 'vega_risk_accepted';
+export const ONBOARDING_VIEWED_KEY = 'vega_onboarding_viewed';
 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,10 +12,9 @@ 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, useRef } from 'react';
+import { useEffect } from 'react';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 
@@ -26,8 +25,6 @@ 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);
 
@@ -60,7 +57,6 @@ 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,6 +52,9 @@ export const Navbar = ({
           'bg-vega-yellow text-vega-clight-50': theme === 'yellow',
           'text-default': theme === 'system',
         })}
+        style={{
+          background: theme === 'yellow' ? 'url(/testnet-logo-bg.png' : 'none',
+        }}
       >
         <VLogo className="w-4" />
       </NavLink>

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

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

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

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

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

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

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

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

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

@@ -27,6 +27,16 @@ 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,5 +1,6 @@
 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 {
@@ -37,7 +38,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]);
@@ -118,7 +119,9 @@ export const VegaWalletConnectButton = () => {
       intent={Intent.None}
       icon={<VegaIcon name={VegaIconNames.ARROW_RIGHT} size={14} />}
     >
-      <span className="whitespace-nowrap uppercase">{t('Connect')}</span>
+      <span className="whitespace-nowrap uppercase">
+        {walletInstalled ? t('Connect') : t('Get started')}
+      </span>
     </Button>
   );
 };

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

@@ -0,0 +1,86 @@
+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,2 +1,3 @@
 export * from './welcome-dialog';
 export * from './risk-message';
+export * from './get-started';

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

@@ -1,50 +0,0 @@
-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

@@ -1,89 +0,0 @@
-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

@@ -0,0 +1,230 @@
+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,68 +1,52 @@
-import React, { useCallback } from 'react';
-import { useLocation } from 'react-router-dom';
-import { Dialog } from '@vegaprotocol/ui-toolkit';
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import { Dialog, Intent } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
 import { useLocalStorage } from '@vegaprotocol/react-helpers';
-import { useDataProvider } from '@vegaprotocol/data-provider';
-import { activeMarketsProvider } from '@vegaprotocol/markets';
-import * as constants from '../constants';
-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';
+import { isBrowserWalletInstalled } from '@vegaprotocol/wallet';
+import * as constants from '../constants';
+import { WelcomeDialogContent } from './welcome-dialog-content';
+import { getConfig } from '@vegaprotocol/wallet';
+import { Links, Routes } from '../../pages/client-router';
+import { useGlobalStore } from '../../stores';
 
 export const WelcomeDialog = () => {
   const { VEGA_ENV } = useEnvironment();
-  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 [onBoardingViewed, setOnboardingViewed] = useLocalStorage(
+    constants.ONBOARDING_VIEWED_KEY
+  );
+  const navigate = useNavigate();
+  const isOnboardingDialogNeeded =
+    onBoardingViewed !== 'true' && !isBrowserWalletInstalled() && !getConfig();
+  const marketId = useGlobalStore((store) => store.marketId);
 
-  const update = useGlobalStore((store) => store.update);
-  const shouldDisplayWelcomeDialog = useGlobalStore(
-    (store) => store.shouldDisplayWelcomeDialog
+  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 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 (
+  return isOnboardingDialogNeeded ? (
     <Dialog
-      open={Boolean(dialogContent)}
+      open
       title={title}
-      size={size}
+      size="medium"
       onChange={onClose}
+      intent={Intent.None}
+      dataTestId="welcome-dialog"
     >
-      {dialogContent}
+      <WelcomeDialogContent />
     </Dialog>
-  );
+  ) : null;
 };

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

@@ -1,71 +0,0 @@
-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,6 +31,10 @@ 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',
@@ -38,6 +42,7 @@ export enum Routes {
   PORTFOLIO = '/portfolio',
   LIQUIDITY = '/liquidity/:marketId',
   DISCLAIMER = '/disclaimer',
+  DEPOSIT = '/deposit',
 }
 
 type ConsoleLinks = { [r in Routes]: (...args: string[]) => string };
@@ -51,6 +56,7 @@ 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[] = [
@@ -97,6 +103,7 @@ const routerConfig: RouteObject[] = [
     path: Routes.DISCLAIMER,
     element: <LazyDisclaimer />,
   },
+  { path: Routes.DEPOSIT, element: <LazyDeposit /> },
   {
     path: '*',
     element: (

apps/trading/stores/global.ts

@@ -5,7 +5,6 @@ import produce from 'immer';
 interface GlobalStore {
   marketId: string | null;
   update: (store: Partial<Omit<GlobalStore, 'update'>>) => void;
-  shouldDisplayWelcomeDialog: boolean;
 }
 
 interface PageTitleStore {
@@ -15,7 +14,6 @@ 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="medium"
+        size="large"
         open={Boolean(assetId)}
         onChange={(isOpen) => {
           if (!isOpen) {

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

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

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

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

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

@@ -1,71 +0,0 @@
-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,92 +1,12 @@
 import 'pennant/dist/style.css';
-import {
-  CandlestickChart,
-  ChartType,
-  Interval,
-  Overlay,
-  Study,
-  chartTypeLabels,
-  intervalLabels,
-  overlayLabels,
-  studyLabels,
-} from 'pennant';
+import { CandlestickChart } from 'pennant';
 import { VegaDataSource } from './data-source';
 import { useApolloClient } from '@apollo/client';
 import { useMemo } from 'react';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-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 { useThemeSwitcher } from '@vegaprotocol/react-helpers';
 import { t } from '@vegaprotocol/i18n';
-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],
-]);
+import { useCandlesChartSettings } from './use-candles-chart-settings';
 
 export type CandlesChartContainerProps = {
   marketId: string;
@@ -99,161 +19,32 @@ export const CandlesChartContainer = ({
   const { pubKey } = useVegaWallet();
   const { theme } = useThemeSwitcher();
 
-  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 { interval, chartType, overlays, studies, merge } =
+    useCandlesChartSettings();
 
   const dataSource = useMemo(() => {
     return new VegaDataSource(client, marketId, pubKey);
   }, [client, marketId, pubKey]);
 
   return (
-    <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>
+    <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,
+        });
+      }}
+    />
   );
 };

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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,160 @@
+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,4 +1,5 @@
 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

@@ -0,0 +1,99 @@
+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,6 +12,7 @@ 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';
@@ -38,6 +39,7 @@ addGetNetworkParameters();
 addUpdateCapsuleMultiSig();
 addVegaWalletConnect();
 addSetVegaWallet();
+addSetOnBoardingViewed();
 addMockTransactionResponse();
 addCreateMarket();
 addConnectPublicKey();

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

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

libs/datagrid/src/lib/cells/market-name-cell.tsx

@@ -3,7 +3,7 @@ import { useCallback } from 'react';
 import get from 'lodash/get';
 
 interface MarketNameCellProps {
-  value?: string;
+  value?: string | null;
   data?: { id?: string; marketId?: string; market?: { id: string } };
   idPath?: string;
   onMarketClick?: (marketId: string, metaKey?: boolean) => void;

libs/deal-ticket/src/components/deal-ticket/deal-ticket-amount.tsx

@@ -1,5 +1,5 @@
 import type { Control } from 'react-hook-form';
-import type { Market, MarketData } from '@vegaprotocol/markets';
+import type { Market, StaticMarketData } from '@vegaprotocol/markets';
 import { DealTicketMarketAmount } from './deal-ticket-market-amount';
 import { DealTicketLimitAmount } from './deal-ticket-limit-amount';
 import * as Schema from '@vegaprotocol/types';
@@ -9,7 +9,8 @@ import type { OrderFormFields } from '../../hooks/use-order-form';
 export interface DealTicketAmountProps {
   control: Control<OrderFormFields>;
   orderType: Schema.OrderType;
-  marketData: MarketData;
+  marketData: StaticMarketData;
+  marketPrice?: string;
   market: Market;
   sizeError?: string;
   priceError?: string;
@@ -21,11 +22,18 @@ export interface DealTicketAmountProps {
 export const DealTicketAmount = ({
   orderType,
   marketData,
+  marketPrice,
   ...props
 }: DealTicketAmountProps) => {
   switch (orderType) {
     case Schema.OrderType.TYPE_MARKET:
-      return <DealTicketMarketAmount {...props} marketData={marketData} />;
+      return (
+        <DealTicketMarketAmount
+          {...props}
+          marketData={marketData}
+          marketPrice={marketPrice}
+        />
+      );
     case Schema.OrderType.TYPE_LIMIT:
       return <DealTicketLimitAmount {...props} />;
     default: {

libs/deal-ticket/src/components/deal-ticket/deal-ticket-button.tsx

@@ -4,9 +4,10 @@ import classNames from 'classnames';
 
 interface Props {
   side: Side;
+  label?: string;
 }
 
-export const DealTicketButton = ({ side }: Props) => {
+export const DealTicketButton = ({ side, label }: Props) => {
   const buttonClasses = classNames(
     'px-10 py-2 uppercase rounded-md text-white w-full',
     {
@@ -17,7 +18,7 @@ export const DealTicketButton = ({ side }: Props) => {
   return (
     <div className="mb-2">
       <button type="submit" data-testid="place-order" className={buttonClasses}>
-        {t('Place order')}
+        {label || t('Place order')}
       </button>
     </div>
   );

libs/deal-ticket/src/components/deal-ticket/deal-ticket-container.tsx

@@ -1,11 +1,20 @@
+import { useVegaTransactionStore } from '@vegaprotocol/wallet';
+import {
+  DealTicketType,
+  useDealTicketTypeStore,
+} from '../../hooks/use-type-store';
+import { StopOrder } from './deal-ticket-stop-order';
+import {
+  useStaticMarketData,
+  useMarket,
+  useMarketPrice,
+} from '@vegaprotocol/markets';
 import { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
-import { useThrottledDataProvider } from '@vegaprotocol/data-provider';
-import { useVegaTransactionStore } from '@vegaprotocol/wallet';
-import { useMarket, marketDataProvider } from '@vegaprotocol/markets';
 import { DealTicket } from './deal-ticket';
+import { FLAGS } from '@vegaprotocol/environment';
 
-export interface DealTicketContainerProps {
+interface DealTicketContainerProps {
   marketId: string;
   onMarketClick?: (marketId: string, metaKey?: boolean) => void;
   onClickCollateral?: () => void;
@@ -14,10 +23,9 @@ export interface DealTicketContainerProps {
 
 export const DealTicketContainer = ({
   marketId,
-  onMarketClick,
-  onClickCollateral,
-  onDeposit,
+  ...props
 }: DealTicketContainerProps) => {
+  const type = useDealTicketTypeStore((state) => state.type[marketId]);
   const {
     data: market,
     error: marketError,
@@ -29,15 +37,9 @@ export const DealTicketContainer = ({
     error: marketDataError,
     loading: marketDataLoading,
     reload,
-  } = useThrottledDataProvider(
-    {
-      dataProvider: marketDataProvider,
-      variables: { marketId },
-    },
-    1000
-  );
+  } = useStaticMarketData(marketId);
+  const { data: marketPrice } = useMarketPrice(market?.id);
   const create = useVegaTransactionStore((state) => state.create);
-
   return (
     <AsyncRenderer
       data={market && marketData}
@@ -46,14 +48,23 @@ export const DealTicketContainer = ({
       reload={reload}
     >
       {market && marketData ? (
-        <DealTicket
-          market={market}
-          marketData={marketData}
-          submit={(orderSubmission) => create({ orderSubmission })}
-          onClickCollateral={onClickCollateral}
-          onMarketClick={onMarketClick}
-          onDeposit={onDeposit}
-        />
+        FLAGS.STOP_ORDERS &&
+        (type === DealTicketType.StopLimit ||
+          type === DealTicketType.StopMarket) ? (
+          <StopOrder
+            market={market}
+            marketPrice={marketPrice}
+            submit={(stopOrdersSubmission) => create({ stopOrdersSubmission })}
+          />
+        ) : (
+          <DealTicket
+            {...props}
+            market={market}
+            marketPrice={marketPrice}
+            marketData={marketData}
+            submit={(orderSubmission) => create({ orderSubmission })}
+          />
+        )
       ) : (
         <Splash>
           <p>{t('Could not load market')}</p>

libs/deal-ticket/src/components/deal-ticket/deal-ticket-fee-details.tsx

@@ -4,11 +4,11 @@ import classnames from 'classnames';
 import type { ReactNode } from 'react';
 import { t } from '@vegaprotocol/i18n';
 import { FeesBreakdown } from '@vegaprotocol/markets';
+import type { OrderSubmissionBody } from '@vegaprotocol/wallet';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 
 import type { Market } from '@vegaprotocol/markets';
 import type { EstimatePositionQuery } from '@vegaprotocol/positions';
-import type { EstimateFeesQuery } from '../../hooks/__generated__/EstimateOrder';
 import { AccountBreakdownDialog } from '@vegaprotocol/accounts';
 
 import { formatRange, formatValue } from '@vegaprotocol/utils';
@@ -24,6 +24,7 @@ import {
   EST_TOTAL_MARGIN_TOOLTIP_TEXT,
   MARGIN_ACCOUNT_TOOLTIP_TEXT,
 } from '../../constants';
+import { useEstimateFees } from '../../hooks';
 
 const emptyValue = '-';
 
@@ -76,26 +77,82 @@ export const DealTicketFeeDetail = ({
 };
 
 export interface DealTicketFeeDetailsProps {
+  assetSymbol: string;
+  order: OrderSubmissionBody['orderSubmission'];
+  market: Market;
+  notionalSize: string | null;
+}
+
+export const DealTicketFeeDetails = ({
+  assetSymbol,
+  order,
+  market,
+  notionalSize,
+}: DealTicketFeeDetailsProps) => {
+  const feeEstimate = useEstimateFees(order);
+  const { settlementAsset: asset } =
+    market.tradableInstrument.instrument.product;
+  const { decimals: assetDecimals, quantum } = asset;
+  const marketDecimals = market.decimalPlaces;
+  const quoteName = market.tradableInstrument.instrument.product.quoteName;
+
+  return (
+    <>
+      <DealTicketFeeDetail
+        label={t('Notional')}
+        value={formatValue(notionalSize, marketDecimals)}
+        formattedValue={formatValue(notionalSize, marketDecimals)}
+        symbol={quoteName}
+        labelDescription={NOTIONAL_SIZE_TOOLTIP_TEXT(quoteName)}
+      />
+      <DealTicketFeeDetail
+        label={t('Fees')}
+        value={
+          feeEstimate?.totalFeeAmount &&
+          `~${formatValue(feeEstimate?.totalFeeAmount, assetDecimals)}`
+        }
+        formattedValue={
+          feeEstimate?.totalFeeAmount &&
+          `~${formatValue(feeEstimate?.totalFeeAmount, assetDecimals, quantum)}`
+        }
+        labelDescription={
+          <>
+            <span>
+              {t(
+                `An estimate of the most you would be expected to pay in fees, in the market's settlement asset ${assetSymbol}.`
+              )}
+            </span>
+            <FeesBreakdown
+              fees={feeEstimate?.fees}
+              feeFactors={market.fees.factors}
+              symbol={assetSymbol}
+              decimals={assetDecimals}
+            />
+          </>
+        }
+        symbol={assetSymbol}
+      />
+    </>
+  );
+};
+
+export interface DealTicketMarginDetailsProps {
   generalAccountBalance?: string;
   marginAccountBalance?: string;
   market: Market;
   onMarketClick?: (marketId: string, metaKey?: boolean) => void;
   assetSymbol: string;
-  notionalSize: string | null;
-  feeEstimate: EstimateFeesQuery['estimateFees'] | undefined;
   positionEstimate: EstimatePositionQuery['estimatePosition'];
 }
 
-export const DealTicketFeeDetails = ({
+export const DealTicketMarginDetails = ({
   marginAccountBalance,
   generalAccountBalance,
   assetSymbol,
-  feeEstimate,
   market,
   onMarketClick,
-  notionalSize,
   positionEstimate,
-}: DealTicketFeeDetailsProps) => {
+}: DealTicketMarginDetailsProps) => {
   const [breakdownDialog, setBreakdownDialog] = useState(false);
   const { pubKey: partyId } = useVegaWallet();
   const { data: currentMargins } = useDataProvider({
@@ -110,7 +167,6 @@ export const DealTicketFeeDetails = ({
   const { settlementAsset: asset } =
     market.tradableInstrument.instrument.product;
   const { decimals: assetDecimals, quantum } = asset;
-  const marketDecimals = market.decimalPlaces;
   let marginRequiredBestCase: string | undefined = undefined;
   let marginRequiredWorstCase: string | undefined = undefined;
   if (marginEstimate) {
@@ -251,41 +307,7 @@ export const DealTicketFeeDetails = ({
   const quoteName = market.tradableInstrument.instrument.product.quoteName;
 
   return (
-    <div>
-      <DealTicketFeeDetail
-        label={t('Notional')}
-        value={formatValue(notionalSize, marketDecimals)}
-        formattedValue={formatValue(notionalSize, marketDecimals)}
-        symbol={quoteName}
-        labelDescription={NOTIONAL_SIZE_TOOLTIP_TEXT(quoteName)}
-      />
-      <DealTicketFeeDetail
-        label={t('Fees')}
-        value={
-          feeEstimate?.totalFeeAmount &&
-          `~${formatValue(feeEstimate?.totalFeeAmount, assetDecimals)}`
-        }
-        formattedValue={
-          feeEstimate?.totalFeeAmount &&
-          `~${formatValue(feeEstimate?.totalFeeAmount, assetDecimals, quantum)}`
-        }
-        labelDescription={
-          <>
-            <span>
-              {t(
-                `An estimate of the most you would be expected to pay in fees, in the market's settlement asset ${assetSymbol}.`
-              )}
-            </span>
-            <FeesBreakdown
-              fees={feeEstimate?.fees}
-              feeFactors={market.fees.factors}
-              symbol={assetSymbol}
-              decimals={assetDecimals}
-            />
-          </>
-        }
-        symbol={assetSymbol}
-      />
+    <>
       <DealTicketFeeDetail
         label={t('Margin required')}
         value={formatRange(
@@ -351,6 +373,6 @@ export const DealTicketFeeDetails = ({
           onClose={onAccountBreakdownDialogClose}
         />
       )}
-    </div>
+    </>
   );
 };

libs/deal-ticket/src/components/deal-ticket/deal-ticket-limit-amount.tsx

@@ -44,12 +44,12 @@ export const DealTicketLimitAmount = ({
 
   return (
     <div className="mb-2">
-      <div className="flex items-center gap-4">
+      <div className="flex items-start gap-4">
         <div className="flex-1">
           <FormGroup
             label={t('Size')}
             labelFor="input-order-size-limit"
-            className="!mb-1"
+            className="!mb-0"
           >
             <Controller
               name="size"
@@ -78,16 +78,13 @@ export const DealTicketLimitAmount = ({
             />
           </FormGroup>
         </div>
-        <div className="flex-0 items-center">
-          <div className="flex">&nbsp;</div>
-          <div className="flex">@</div>
-        </div>
+        <div className="pt-7 leading-10">@</div>
         <div className="flex-1">
           <FormGroup
             labelFor="input-price-quote"
             label={t(`Price (${quoteName})`)}
             labelAlign="right"
-            className="!mb-1"
+            className="!mb-0"
           >
             <Controller
               name="price"

libs/deal-ticket/src/components/deal-ticket/deal-ticket-market-amount.tsx

@@ -5,10 +5,10 @@ import {
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import { Input, InputError, Tooltip } from '@vegaprotocol/ui-toolkit';
-import { isMarketInAuction } from '../../utils';
+import { isMarketInAuction } from '@vegaprotocol/markets';
 import type { DealTicketAmountProps } from './deal-ticket-amount';
-import { getMarketPrice } from '../../utils/get-price';
 import { Controller } from 'react-hook-form';
+import classNames from 'classnames';
 
 export type DealTicketMarketAmountProps = Omit<
   DealTicketAmountProps,
@@ -19,37 +19,26 @@ export const DealTicketMarketAmount = ({
   control,
   market,
   marketData,
+  marketPrice,
   sizeError,
   update,
   size,
 }: DealTicketMarketAmountProps) => {
   const quoteName = market.tradableInstrument.instrument.product.quoteName;
   const sizeStep = toDecimal(market?.positionDecimalPlaces);
-  const price = getMarketPrice(marketData);
+  const price = marketPrice;
 
   const priceFormatted = price
     ? addDecimalsFormatNumber(price, market.decimalPlaces)
     : undefined;
 
+  const inAuction = isMarketInAuction(marketData.marketTradingMode);
+
   return (
     <div className="mb-2">
-      <div className="flex items-end gap-4 mb-2">
-        <div className="flex-1 text-sm">{t('Size')}</div>
-        <div />
-        <div className="flex-2 text-sm text-right">
-          {isMarketInAuction(marketData.marketTradingMode) && (
-            <Tooltip
-              description={t(
-                'This market is in auction. The uncrossing price is an indication of what the price is expected to be when the auction ends.'
-              )}
-            >
-              <div>{t(`Indicative price`)}</div>
-            </Tooltip>
-          )}
-        </div>
-      </div>
-      <div className="flex items-center gap-4">
+      <div className="flex items-start gap-4">
         <div className="flex-1">
+          <div className="mb-2 text-sm">{t('Size')}</div>
           <Controller
             name="size"
             control={control}
@@ -76,15 +65,29 @@ export const DealTicketMarketAmount = ({
             )}
           />
         </div>
-        <div>@</div>
-        <div className="flex-1 text-sm text-right" data-testid="last-price">
-          {priceFormatted && quoteName ? (
-            <>
-              ~{priceFormatted} {quoteName}
-            </>
-          ) : (
-            '-'
+        <div className="pt-7 leading-10">@</div>
+        <div className="flex-1 text-sm text-right">
+          {inAuction && (
+            <Tooltip
+              description={t(
+                'This market is in auction. The uncrossing price is an indication of what the price is expected to be when the auction ends.'
+              )}
+            >
+              <div className="mb-2">{t(`Indicative price`)}</div>
+            </Tooltip>
           )}
+          <div
+            data-testid="last-price"
+            className={classNames('leading-10', { 'pt-7': !inAuction })}
+          >
+            {priceFormatted && quoteName ? (
+              <>
+                ~{priceFormatted} {quoteName}
+              </>
+            ) : (
+              '-'
+            )}
+          </div>
         </div>
       </div>
       {sizeError && (

libs/deal-ticket/src/components/deal-ticket/deal-ticket-stop-order.spec.tsx

@@ -0,0 +1,314 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { VegaWalletContext } from '@vegaprotocol/wallet';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { generateMarket } from '../../test-helpers';
+import { StopOrder } from './deal-ticket-stop-order';
+import * as Schema from '@vegaprotocol/types';
+import { MockedProvider } from '@apollo/client/testing';
+import type { StopOrderFormValues } from '../../hooks/use-stop-order-form-values';
+import { useStopOrderFormValues } from '../../hooks/use-stop-order-form-values';
+import type { FeatureFlags } from '@vegaprotocol/environment';
+
+jest.mock('zustand');
+jest.mock('./deal-ticket-fee-details', () => ({
+  DealTicketFeeDetails: () => <div data-testid="deal-ticket-fee-details" />,
+}));
+
+jest.mock('@vegaprotocol/environment', () => {
+  const actual = jest.requireActual('@vegaprotocol/environment');
+  return {
+    ...actual,
+    FLAGS: {
+      ...actual.FLAGS,
+      STOP_ORDERS: true,
+    } as FeatureFlags,
+  };
+});
+
+const marketPrice = '200';
+const market = generateMarket();
+const submit = jest.fn();
+
+function generateJsx(pubKey: string | null = 'pubKey', isReadOnly = false) {
+  return (
+    <MockedProvider>
+      <VegaWalletContext.Provider value={{ pubKey, isReadOnly } as any}>
+        <StopOrder market={market} marketPrice={marketPrice} submit={submit} />
+      </VegaWalletContext.Provider>
+    </MockedProvider>
+  );
+}
+
+const submitButton = 'place-order';
+const sizeInput = 'order-size';
+const priceInput = 'order-price';
+const triggerPriceInput = 'triggerPrice';
+const triggerTrailingPercentOffsetInput = 'triggerTrailingPercentOffset';
+
+const orderTypeTrigger = 'order-type-Stop';
+const orderTypeLimit = 'order-type-StopLimit';
+const orderTypeMarket = 'order-type-StopMarket';
+
+const orderSideBuy = 'order-side-SIDE_BUY';
+const orderSideSell = 'order-side-SIDE_SELL';
+
+const triggerDirectionRisesAbove = 'triggerDirection-risesAbove';
+// const triggerDirectionFallsBelow = 'triggerDirection-fallsBelow';
+
+const expiryStrategySubmit = 'expiryStrategy-submit';
+const expiryStrategyCancel = 'expiryStrategy-cancel';
+
+const triggerTypePrice = 'triggerType-price';
+const triggerTypeTrailingPercentOffset = 'triggerType-trailingPercentOffset';
+
+const expire = 'expire';
+const datePicker = 'date-picker-field';
+const timeInForce = 'order-tif';
+
+const sizeErrorMessage = 'stop-order-error-message-size';
+const priceErrorMessage = 'stop-order-error-message-price';
+const triggerPriceErrorMessage = 'stop-order-error-message-trigger-price';
+const triggerTrailingPercentOffsetErrorMessage =
+  'stop-order-error-message-trigger-trailing-percent-offset';
+
+describe('StopOrder', () => {
+  beforeEach(() => {
+    localStorage.clear();
+  });
+
+  afterEach(() => {
+    localStorage.clear();
+    jest.clearAllMocks();
+  });
+
+  it('should display ticket defaults', async () => {
+    render(generateJsx());
+    // place order button should always be enabled
+    expect(screen.getByTestId(submitButton)).toBeEnabled();
+
+    // Assert defaults are used
+    await userEvent.click(screen.getByTestId(orderTypeTrigger));
+    expect(screen.getByTestId(orderTypeLimit).dataset.state).toEqual('checked');
+    await userEvent.click(screen.getByTestId(orderTypeLimit));
+    expect(screen.getByTestId(orderSideBuy).dataset.state).toEqual('checked');
+    expect(screen.getByTestId(sizeInput)).toHaveDisplayValue('0');
+    expect(screen.getByTestId(timeInForce)).toHaveValue(
+      Schema.OrderTimeInForce.TIME_IN_FORCE_FOK
+    );
+    expect(
+      screen.getByTestId(triggerDirectionRisesAbove).dataset.state
+    ).toEqual('checked');
+    expect(screen.getByTestId(triggerTypePrice).dataset.state).toEqual(
+      'checked'
+    );
+    expect(screen.getByTestId(expire).dataset.state).toEqual('unchecked');
+    await userEvent.click(screen.getByTestId(expire));
+    await waitFor(() => {
+      expect(screen.getByTestId(expiryStrategySubmit).dataset.state).toEqual(
+        'checked'
+      );
+    });
+  });
+
+  it('should display trigger price as price for market type order', async () => {
+    render(generateJsx());
+    await userEvent.click(screen.getByTestId(orderTypeTrigger));
+    await userEvent.click(screen.getByTestId(orderTypeMarket));
+    await userEvent.type(screen.getByTestId(triggerPriceInput), '10');
+    expect(screen.getByTestId('price')).toHaveTextContent('10.0');
+  });
+
+  it('should use local storage state for initial values', async () => {
+    const values: Partial<StopOrderFormValues> = {
+      type: Schema.OrderType.TYPE_LIMIT,
+      side: Schema.Side.SIDE_SELL,
+      size: '0.1',
+      price: '300.22',
+      timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_IOC,
+      expire: true,
+      expiryStrategy: Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_CANCELS,
+      expiresAt: '2023-07-27T16:43:27.000',
+    };
+
+    useStopOrderFormValues.setState({
+      formValues: {
+        [market.id]: values,
+      },
+    });
+
+    render(generateJsx());
+    // Assert correct defaults are used from store
+    await userEvent.click(screen.getByTestId(orderTypeTrigger));
+    expect(screen.queryByTestId(orderTypeLimit)).toBeChecked();
+    expect(screen.getByTestId(orderSideSell).dataset.state).toEqual('checked');
+    expect(screen.getByTestId(sizeInput)).toHaveDisplayValue(
+      values.size as string
+    );
+    expect(screen.getByTestId('order-tif')).toHaveValue(values.timeInForce);
+    expect(screen.getByTestId(priceInput)).toHaveDisplayValue(
+      values.price as string
+    );
+    expect(screen.getByTestId(expire).dataset.state).toEqual('checked');
+    expect(screen.getByTestId(expiryStrategyCancel).dataset.state).toEqual(
+      'checked'
+    );
+    expect(screen.getByTestId(datePicker)).toHaveDisplayValue(
+      values.expiresAt as string
+    );
+  });
+
+  it('shows no wallet warning and do not submit if no wallet connected', async () => {
+    render(generateJsx(null));
+    await userEvent.type(screen.getByTestId(sizeInput), '1');
+    await userEvent.type(screen.getByTestId(priceInput), '1');
+    await userEvent.type(screen.getByTestId(triggerPriceInput), '1');
+    await userEvent.click(screen.getByTestId(submitButton));
+    expect(submit).not.toBeCalled();
+    expect(
+      screen.getByTestId('deal-ticket-connect-wallet')
+    ).toBeInTheDocument();
+  });
+
+  it('calls submit if form is valid', async () => {
+    render(generateJsx());
+    await userEvent.type(screen.getByTestId(sizeInput), '1');
+    await userEvent.type(screen.getByTestId(priceInput), '1');
+    await userEvent.type(screen.getByTestId(triggerPriceInput), '1');
+    await userEvent.click(screen.getByTestId(submitButton));
+    expect(submit).toBeCalled();
+  });
+
+  it('validates size field', async () => {
+    render(generateJsx());
+
+    await userEvent.click(screen.getByTestId(submitButton));
+
+    // default value should be invalid
+    expect(screen.getByTestId(sizeErrorMessage)).toBeInTheDocument();
+    // to small value should be invalid
+    await userEvent.type(screen.getByTestId(sizeInput), '0.01');
+    expect(screen.getByTestId(sizeErrorMessage)).toBeInTheDocument();
+
+    // clear and fill using valid value
+    await userEvent.clear(screen.getByTestId(sizeInput));
+    await userEvent.type(screen.getByTestId(sizeInput), '0.1');
+    expect(screen.queryByTestId(sizeErrorMessage)).toBeNull();
+  });
+
+  it('validates price field', async () => {
+    render(generateJsx());
+
+    await userEvent.click(screen.getByTestId(submitButton));
+    // price error message should not show if size has error
+    expect(screen.queryByTestId(priceErrorMessage)).toBeNull();
+    await userEvent.type(screen.getByTestId(sizeInput), '0.1');
+    expect(screen.getByTestId(priceErrorMessage)).toBeInTheDocument();
+    await userEvent.type(screen.getByTestId(priceInput), '0.001');
+    expect(screen.getByTestId(priceErrorMessage)).toBeInTheDocument();
+
+    // switch to market order type error should disappear
+    await userEvent.click(screen.getByTestId(orderTypeTrigger));
+    await userEvent.click(screen.getByTestId(orderTypeMarket));
+    expect(screen.queryByTestId(priceErrorMessage)).toBeNull();
+
+    // switch back to limit type
+    await userEvent.click(screen.getByTestId(orderTypeTrigger));
+    await userEvent.click(screen.getByTestId(orderTypeLimit));
+    expect(screen.getByTestId(priceErrorMessage)).toBeInTheDocument();
+
+    // to small value should be invalid
+    await userEvent.type(screen.getByTestId(priceInput), '0.001');
+    expect(screen.getByTestId(priceErrorMessage)).toBeInTheDocument();
+
+    // clear and fill using valid value
+    await userEvent.clear(screen.getByTestId(priceInput));
+    await userEvent.type(screen.getByTestId(priceInput), '0.01');
+    expect(screen.queryByTestId(priceErrorMessage)).toBeNull();
+  });
+
+  it('validates trigger price field', async () => {
+    render(generateJsx());
+
+    await userEvent.click(screen.getByTestId(submitButton));
+    expect(screen.getByTestId(triggerPriceErrorMessage)).toBeInTheDocument();
+
+    // switch to trailing percentage offset trigger type
+    await userEvent.click(screen.getByTestId(triggerTypeTrailingPercentOffset));
+    expect(screen.queryByTestId(triggerPriceErrorMessage)).toBeNull();
+
+    // switch back to price trigger type
+    await userEvent.click(screen.getByTestId(triggerTypePrice));
+    expect(screen.getByTestId(triggerPriceErrorMessage)).toBeInTheDocument();
+
+    // to small value should be invalid
+    await userEvent.type(screen.getByTestId(triggerPriceInput), '0.001');
+    expect(screen.getByTestId(triggerPriceErrorMessage)).toBeInTheDocument();
+
+    // clear and fill using valid value
+    await userEvent.clear(screen.getByTestId(triggerPriceInput));
+    await userEvent.type(screen.getByTestId(triggerPriceInput), '0.01');
+    expect(screen.queryByTestId(triggerPriceErrorMessage)).toBeNull();
+  });
+
+  it('validates trigger trailing percentage offset field', async () => {
+    render(generateJsx());
+
+    // should not show error with default form values
+    await userEvent.click(screen.getByTestId(submitButton));
+    expect(
+      screen.queryByTestId(triggerTrailingPercentOffsetErrorMessage)
+    ).toBeNull();
+
+    // switch to trailing percentage offset trigger type
+    await userEvent.click(screen.getByTestId(triggerTypeTrailingPercentOffset));
+    expect(
+      screen.getByTestId(triggerTrailingPercentOffsetErrorMessage)
+    ).toBeInTheDocument();
+
+    // to small value should be invalid
+    await userEvent.type(
+      screen.getByTestId(triggerTrailingPercentOffsetInput),
+      '0.09'
+    );
+    expect(
+      screen.getByTestId(triggerTrailingPercentOffsetErrorMessage)
+    ).toBeInTheDocument();
+
+    // clear and fill using valid value
+    await userEvent.clear(
+      screen.getByTestId(triggerTrailingPercentOffsetInput)
+    );
+    await userEvent.type(
+      screen.getByTestId(triggerTrailingPercentOffsetInput),
+      '0.1'
+    );
+    expect(
+      screen.queryByTestId(triggerTrailingPercentOffsetErrorMessage)
+    ).toBeNull();
+
+    // to big value should be invalid
+    await userEvent.clear(
+      screen.getByTestId(triggerTrailingPercentOffsetInput)
+    );
+    await userEvent.type(
+      screen.getByTestId(triggerTrailingPercentOffsetInput),
+      '99.91'
+    );
+    expect(
+      screen.getByTestId(triggerTrailingPercentOffsetErrorMessage)
+    ).toBeInTheDocument();
+
+    // clear and fill using valid value
+    await userEvent.clear(
+      screen.getByTestId(triggerTrailingPercentOffsetInput)
+    );
+    await userEvent.type(
+      screen.getByTestId(triggerTrailingPercentOffsetInput),
+      '99.9'
+    );
+    expect(
+      screen.queryByTestId(triggerTrailingPercentOffsetErrorMessage)
+    ).toBeNull();
+  });
+});