feat(deal-ticket): missing pieces

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

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

@@ -125,7 +125,7 @@ jobs:
       #----------------------------------------------
       - name: Run tests
         working-directory: ./console-test
-        run: poetry run pytest -s --numprocesses auto
+        run: poetry run pytest -s --numprocesses auto --dist loadfile
       - name: Check files
         run: |
           ls -al .

apps/explorer/src/app/routes/parties/id/Party-assets.graphql

@@ -48,9 +48,11 @@ query ExplorerPartyAssets($partyId: ID!) {
         }
         stakingSummary {
           currentStakeAvailable
-          linkings(pagination: { first: 100 }) {
+          linkings(pagination: { last: 100 }) {
             edges {
               node {
+                type
+                status
                 amount
               }
             }

apps/explorer/src/app/routes/parties/id/__generated__/Party-assets.ts

@@ -10,7 +10,7 @@ export type ExplorerPartyAssetsQueryVariables = Types.Exact<{
 }>;
 
 
-export type ExplorerPartyAssetsQuery = { __typename?: 'Query', partiesConnection?: { __typename?: 'PartyConnection', edges: Array<{ __typename?: 'PartyEdge', node: { __typename?: 'Party', id: string, delegationsConnection?: { __typename?: 'DelegationsConnection', edges?: Array<{ __typename?: 'DelegationEdge', node: { __typename?: 'Delegation', amount: string, epoch: number, node: { __typename?: 'Node', id: string, name: string } } } | null> | null } | null, stakingSummary: { __typename?: 'StakingSummary', currentStakeAvailable: string, linkings: { __typename?: 'StakesConnection', edges?: Array<{ __typename?: 'StakeLinkingEdge', node: { __typename?: 'StakeLinking', amount: string } } | null> | null } }, accountsConnection?: { __typename?: 'AccountsConnection', edges?: Array<{ __typename?: 'AccountEdge', node: { __typename?: 'AccountBalance', type: Types.AccountType, balance: string, asset: { __typename?: 'Asset', name: string, id: string, decimals: number, symbol: string, source: { __typename: 'BuiltinAsset' } | { __typename: 'ERC20', contractAddress: string } }, market?: { __typename?: 'Market', id: string, decimalPlaces: number, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, product: { __typename?: 'Future', quoteName: string } } } } | null } } | null> | null } | null } }> } | null };
+export type ExplorerPartyAssetsQuery = { __typename?: 'Query', partiesConnection?: { __typename?: 'PartyConnection', edges: Array<{ __typename?: 'PartyEdge', node: { __typename?: 'Party', id: string, delegationsConnection?: { __typename?: 'DelegationsConnection', edges?: Array<{ __typename?: 'DelegationEdge', node: { __typename?: 'Delegation', amount: string, epoch: number, node: { __typename?: 'Node', id: string, name: string } } } | null> | null } | null, stakingSummary: { __typename?: 'StakingSummary', currentStakeAvailable: string, linkings: { __typename?: 'StakesConnection', edges?: Array<{ __typename?: 'StakeLinkingEdge', node: { __typename?: 'StakeLinking', type: Types.StakeLinkingType, status: Types.StakeLinkingStatus, amount: string } } | null> | null } }, accountsConnection?: { __typename?: 'AccountsConnection', edges?: Array<{ __typename?: 'AccountEdge', node: { __typename?: 'AccountBalance', type: Types.AccountType, balance: string, asset: { __typename?: 'Asset', name: string, id: string, decimals: number, symbol: string, source: { __typename: 'BuiltinAsset' } | { __typename: 'ERC20', contractAddress: string } }, market?: { __typename?: 'Market', id: string, decimalPlaces: number, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, product: { __typename?: 'Future', quoteName: string } } } } | null } } | null> | null } | null } }> } | null };
 
 export const ExplorerPartyAssetsAccountsFragmentDoc = gql`
     fragment ExplorerPartyAssetsAccounts on AccountBalance {
@@ -64,9 +64,11 @@ export const ExplorerPartyAssetsDocument = gql`
         }
         stakingSummary {
           currentStakeAvailable
-          linkings(pagination: {first: 100}) {
+          linkings(pagination: {last: 100}) {
             edges {
               node {
+                type
+                status
                 amount
               }
             }

apps/explorer/src/app/routes/parties/id/components/party-block-stake.tsx

@@ -42,9 +42,15 @@ export const PartyBlockStake = ({
     linkedLength && linkedLength > 0
       ? p?.stakingSummary?.linkings?.edges
           ?.reduce((total, e) => {
-            return new BigNumber(total).plus(
-              new BigNumber(e?.node.amount || 0)
-            );
+            const accumulator = new BigNumber(total);
+            const diff = new BigNumber(e?.node.amount || 0);
+            if (e?.node.type === 'TYPE_LINK') {
+              return accumulator.plus(diff);
+            } else if (e?.node.type === 'TYPE_UNLINK') {
+              return accumulator.minus(diff);
+            } else {
+              return accumulator;
+            }
           }, new BigNumber(0))
           .toString()
       : '0';

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

@@ -220,6 +220,7 @@ describe(
       cy.getByTestId(changeVoteButton).should('be.visible').click();
       voteForProposal('for');
       // 3001-VOTE-064
+      cy.getByTestId('user-voted-yes').should('exist');
       getProposalInformationFromTable('Tokens for proposal')
         .should('have.text', (1).toFixed(2))
         .and('be.visible');
@@ -360,6 +361,34 @@ describe(
       stakingPageDisassociateAllTokens();
     });
 
+    it('Error message should be displayed if error returned from wallet when voting', function () {
+      const errorMsg =
+        'Application error: party has already submitted the maximum number of transactions of this type per epoch (3)';
+
+      createRawProposal();
+      cy.get<testFreeformProposal>('@rawProposal').then((rawProposal) => {
+        getProposalFromTitle(rawProposal.rationale.title).within(() =>
+          cy.getByTestId(viewProposalButton).click()
+        );
+        cy.intercept('POST', '/api/v2/requests', {
+          jsonrpc: '2.0',
+          error: {
+            code: 2001,
+            message: 'Application error',
+            data: 'party has already submitted the maximum number of transactions of this type per epoch (3)',
+          },
+          id: '-PK5EGmErnjLhAmzMeclC',
+        });
+        cy.contains('Vote breakdown').should('be.visible', { timeout: 10000 });
+        cy.getByTestId('vote-buttons').contains('for').click();
+        cy.getByTestId('dialog-title').should(
+          'have.text',
+          'Transaction failed'
+        );
+        cy.getByTestId('Error').should('have.text', errorMsg);
+      });
+    });
+
     it('Able to see successor market details with new and updated values', function () {
       cy.createMarket();
       cy.reload();

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

@@ -119,6 +119,7 @@ context('Home Page - verify elements on page', { tags: '@smoke' }, function () {
       });
     });
 
+    // 0006-NETW-001 0006-NETW-002
     it('should display network data', function () {
       cy.getByTestId('git-network-data')
         .should('contain.text', 'Reading network data from')
@@ -130,6 +131,37 @@ context('Home Page - verify elements on page', { tags: '@smoke' }, function () {
         });
     });
 
+    // 0006-NETW-003 0006-NETW-008 0006-NETW-009 0006-NETW-010 0006-NETW-012 0006-NETW-013 0006-NETW-017 0006-NETW-018 0006-NETW-019 0006-NETW-020
+    it('should have option to switch to different network node', function () {
+      cy.getByTestId('git-network-data').within(() => {
+        cy.getByTestId('link').click();
+      });
+      cy.getByTestId('node-row').within(() => {
+        cy.getByTestId('node-url-0')
+          .parent()
+          .should('have.text', 'http://localhost:3008/graphql');
+        cy.getByTestId('response-time-cell')
+          .invoke('text')
+          .should('not.be.empty')
+          .and('not.eq', 'Checking');
+        cy.getByTestId('block-height-cell')
+          .invoke('text')
+          .should('not.be.empty')
+          .then((currentBlockHeight) => {
+            // Check that block height updates automatically
+            cy.getByTestId('block-height-cell')
+              .invoke('text')
+              .should('not.eq', currentBlockHeight);
+          });
+        cy.getByTestId('subscription-cell').should('have.text', 'Yes');
+      });
+      cy.getByTestId('connect').should('be.disabled');
+      cy.getByTestId('node-url-custom').click();
+      cy.get('input').should('exist');
+      cy.getByTestId('connect').should('be.disabled');
+      cy.getByTestId('icon-cross').click();
+    });
+
     it('should display eth data', function () {
       cy.getByTestId('git-eth-data')
         .should('contain.text', 'Reading Ethereum data from')
@@ -138,6 +170,7 @@ context('Home Page - verify elements on page', { tags: '@smoke' }, function () {
         });
     });
 
+    // 0006-NETW-011
     it('should contain link for known issues on Github', function () {
       cy.getByTestId('git-info').within(() => {
         cy.contains('Known issues and feedback on')

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

@@ -182,7 +182,7 @@ export function clickOnValidatorFromList(
   } else {
     cy.get(`[row-id="${validatorNumber}"]`)
       .should('be.visible')
-      .find(stakeValidatorListName)
+      .first()
       .as('validatorOnList');
     cy.get('@validatorOnList').click();
   }

apps/governance/.env

@@ -22,8 +22,6 @@ NX_VEGA_REST_URL=https://api.n00.stagnet1.vega.xyz/api/v2/
 NX_TENDERMINT_URL=https://tm.n01.stagnet1.vega.rocks
 NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n01.stagnet1.vega.xyz/websocket
 
-NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
-NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet
 
 #Test configuration variables
 CYPRESS_FAIRGROUND=false

apps/governance/.env.capsule

@@ -19,6 +19,9 @@ NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-stagnet1-k8s.ops.vega.xyz
 NX_VEGA_REST_URL=http://localhost:3008/api/v2/
 
+NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
+NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet
+
 NX_TENDERMINT_URL=http://localhost:26617
 NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26617/websocket
 
@@ -26,4 +29,4 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26617/websocket
 CYPRESS_FAIRGROUND=false
 
 # Cosmic elevator flags
-NX_SUCCESSOR_MARKETS=false
+NX_SUCCESSOR_MARKETS=false

apps/governance/.env.devnet

@@ -14,8 +14,11 @@ NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/annou
 NX_VEGA_REST_URL=https://api.n00.devnet1.vega.xyz/api/v2/
 NX_SENTRY_DSN=https://4b8c8a8ba07742648aa4dfe1b8d17e40@o286262.ingest.sentry.io/5882996
 
+NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
+NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet
+
 NX_TENDERMINT_URL=https://tm.be.devnet1.vega.xyz/
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.devnet1.vega.xyz/websocket
 
 # Cosmic elevator flags
-NX_SUCCESSOR_MARKETS=true
+NX_SUCCESSOR_MARKETS=true

apps/governance/.env.mainnet

@@ -14,9 +14,11 @@ NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-mainnet-k8s.ops.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json
 NX_VEGA_REST_URL=https://api.vega.community/api/v2/
+NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
+NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet
 
 NX_TENDERMINT_URL=https://be.vega.community
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.vega.community/websocket
 
 # Cosmic elevator flags
-NX_SUCCESSOR_MARKETS=false
+NX_SUCCESSOR_MARKETS=false

apps/governance/.env.mainnet-mirror

@@ -13,9 +13,11 @@ NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-mainnet-mirror-k8s.ops.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json
 NX_VEGA_REST_URL=https://api.mainnet-mirror.vega.rocks/api/v2/
+NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
+NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet
 
 NX_TENDERMINT_URL=https://be.mainnet-mirror.vega.rocks
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.mainnet-mirror.vega.rocks/websocket
 
 # Cosmic elevator flags
-NX_SUCCESSOR_MARKETS=false
+NX_SUCCESSOR_MARKETS=false

apps/governance/.env.stagnet1

@@ -10,8 +10,11 @@ NX_TRANCHES_SERVICE_URL=https://tranches-stagnet1-k8s.ops.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_REST_URL=https://api.n00.stagnet1.vega.xyz/api/v2/
 
+NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
+NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet
+
 NX_TENDERMINT_URL=https://tm.n01.stagnet1.vega.rocks
 NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n01.stagnet1.vega.xyz/websocket
 
 # Cosmic elevator flags
-NX_SUCCESSOR_MARKETS=true
+NX_SUCCESSOR_MARKETS=true

apps/governance/.env.testnet

@@ -15,8 +15,11 @@ NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/annou
 NX_VEGA_REST_URL=https://api.n07.testnet.vega.xyz/api/v2/
 NX_SENTRY_DSN=https://4b8c8a8ba07742648aa4dfe1b8d17e40@o286262.ingest.sentry.io/5882996
 
+NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
+NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet
+
 NX_TENDERMINT_URL=https://tm.be.testnet.vega.xyz
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.testnet.vega.xyz/websocket
 
 # Cosmic elevator flags
-NX_SUCCESSOR_MARKETS=true
+NX_SUCCESSOR_MARKETS=true

apps/governance/.env.validators-testnet

@@ -12,8 +12,11 @@ NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/annou
 NX_VEGA_REST_URL=https://api-validators-testnet.vega.rocks/api/v2/
 NX_SENTRY_DSN=https://4b8c8a8ba07742648aa4dfe1b8d17e40@o286262.ingest.sentry.io/5882996
 
+NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
+NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet
+
 NX_TENDERMINT_URL=https://tm.be.validators-testnet.vega.rocks
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.validators-testnet.vega.
 
 # Cosmic elevator flags
-NX_SUCCESSOR_MARKETS=false
+NX_SUCCESSOR_MARKETS=false

apps/governance/src/routes/proposals/components/proposal/proposal.tsx

@@ -55,7 +55,7 @@ export const Proposal = ({
   mostRecentlyEnactedAssociatedMarketProposal,
 }: ProposalProps) => {
   const { t } = useTranslation();
-  const { submit, Dialog, finalizedVote } = useVoteSubmit();
+  const { submit, Dialog, finalizedVote, transaction } = useVoteSubmit();
   const { voteState, voteDatetime } = useUserVote(proposal?.id, finalizedVote);
 
   if (!proposal) {
@@ -215,6 +215,7 @@ export const Proposal = ({
               }
               submit={submit}
               dialog={Dialog}
+              transaction={transaction}
               voteState={voteState}
               voteDatetime={voteDatetime}
             />

apps/governance/src/routes/proposals/components/vote-details/vega-transaction-dialog.spec.tsx

@@ -0,0 +1,110 @@
+import { render, screen } from '@testing-library/react';
+import { VoteTransactionDialog } from './vote-transaction-dialog';
+import { VoteState } from './use-user-vote';
+import { VegaTxStatus } from '@vegaprotocol/wallet';
+
+describe('VoteTransactionDialog', () => {
+  const mockTransactionDialog = jest.fn(({ title, content }) => (
+    <div>
+      <div>{title}</div>
+      <div>{content?.Complete}</div>
+    </div>
+  ));
+
+  it('renders without crashing', () => {
+    render(
+      <VoteTransactionDialog
+        voteState={VoteState.Yes}
+        transaction={null}
+        TransactionDialog={mockTransactionDialog}
+      />
+    );
+
+    expect(screen.getByTestId('vote-transaction-dialog')).toBeInTheDocument();
+  });
+
+  it('renders with txRequested title when voteState is Requested', () => {
+    render(
+      <VoteTransactionDialog
+        voteState={VoteState.Requested}
+        transaction={null}
+        TransactionDialog={mockTransactionDialog}
+      />
+    );
+
+    expect(screen.getByText('txRequested')).toBeInTheDocument();
+  });
+
+  it('renders with votePending title when voteState is Pending', () => {
+    render(
+      <VoteTransactionDialog
+        voteState={VoteState.Pending}
+        transaction={null}
+        TransactionDialog={mockTransactionDialog}
+      />
+    );
+
+    expect(screen.getByText('votePending')).toBeInTheDocument();
+  });
+
+  it('renders with no title when voteState is neither Requested nor Pending', () => {
+    render(
+      <VoteTransactionDialog
+        voteState={VoteState.Yes} // or any other state other than Requested or Pending
+        transaction={null}
+        TransactionDialog={mockTransactionDialog}
+      />
+    );
+
+    expect(screen.queryByText('txRequested')).not.toBeInTheDocument();
+    expect(screen.queryByText('votePending')).not.toBeInTheDocument();
+  });
+
+  it('renders custom error message when voteState is Failed and error message exists', () => {
+    render(
+      <VoteTransactionDialog
+        voteState={VoteState.Failed}
+        transaction={{
+          error: { message: 'Custom error test message', name: 'blah' },
+          txHash: null,
+          signature: null,
+          status: VegaTxStatus.Error,
+          dialogOpen: false,
+        }}
+        TransactionDialog={mockTransactionDialog}
+      />
+    );
+
+    expect(screen.getByText('Custom error test message')).toBeInTheDocument();
+  });
+
+  it('renders default error message when voteState is failed and no error message exists on the tx', () => {
+    render(
+      <VoteTransactionDialog
+        voteState={VoteState.Failed}
+        transaction={{
+          error: null,
+          txHash: null,
+          signature: null,
+          status: VegaTxStatus.Error,
+          dialogOpen: false,
+        }}
+        TransactionDialog={mockTransactionDialog}
+      />
+    );
+
+    expect(screen.getByText('voteError')).toBeInTheDocument();
+  });
+
+  it('renders default ui (i.e. not error) when not in a failed state', () => {
+    render(
+      <VoteTransactionDialog
+        voteState={VoteState.Yes}
+        transaction={null}
+        TransactionDialog={mockTransactionDialog}
+      />
+    );
+
+    expect(screen.queryByText('voteError')).not.toBeInTheDocument();
+  });
+});

apps/governance/src/routes/proposals/components/vote-details/vote-buttons.spec.tsx

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from '@testing-library/react';
+import { fireEvent, render, screen } from '@testing-library/react';
 import BigNumber from 'bignumber.js';
 import { VoteButtons } from './vote-buttons';
 import { VoteState } from './use-user-vote';
@@ -24,6 +24,7 @@ describe('Vote buttons', () => {
               currentStakeAvailable={new BigNumber(1)}
               dialog={() => <div>Blah</div>}
               submit={() => Promise.resolve()}
+              transaction={null}
             />
           </VegaWalletContext.Provider>
         </MockedProvider>
@@ -47,6 +48,7 @@ describe('Vote buttons', () => {
               currentStakeAvailable={new BigNumber(1)}
               dialog={() => <div>Blah</div>}
               submit={() => Promise.resolve()}
+              transaction={null}
             />
           </VegaWalletContext.Provider>
         </MockedProvider>
@@ -81,6 +83,7 @@ describe('Vote buttons', () => {
               currentStakeAvailable={new BigNumber(1)}
               dialog={() => <div>Blah</div>}
               submit={() => Promise.resolve()}
+              transaction={null}
             />
           </VegaWalletContext.Provider>
         </MockedProvider>
@@ -105,6 +108,7 @@ describe('Vote buttons', () => {
               currentStakeAvailable={new BigNumber(0)}
               dialog={() => <div>Blah</div>}
               submit={() => Promise.resolve()}
+              transaction={null}
             />
           </VegaWalletContext.Provider>
         </MockedProvider>
@@ -132,6 +136,7 @@ describe('Vote buttons', () => {
               currentStakeAvailable={new BigNumber(1)}
               dialog={() => <div>Blah</div>}
               submit={() => Promise.resolve()}
+              transaction={null}
             />
           </VegaWalletContext.Provider>
         </MockedProvider>
@@ -159,6 +164,7 @@ describe('Vote buttons', () => {
               currentStakeAvailable={new BigNumber(10)}
               dialog={() => <div>Blah</div>}
               submit={() => Promise.resolve()}
+              transaction={null}
             />
           </VegaWalletContext.Provider>
         </MockedProvider>
@@ -183,6 +189,7 @@ describe('Vote buttons', () => {
               currentStakeAvailable={new BigNumber(10)}
               dialog={() => <div>Blah</div>}
               submit={() => Promise.resolve()}
+              transaction={null}
             />
           </VegaWalletContext.Provider>
         </MockedProvider>

apps/governance/src/routes/proposals/components/vote-details/vote-buttons.tsx

@@ -17,7 +17,7 @@ import { VoteState } from './use-user-vote';
 import { ProposalMinRequirements, ProposalUserAction } from '../shared';
 import { VoteTransactionDialog } from './vote-transaction-dialog';
 import { useVoteButtonsQuery } from './__generated__/Stake';
-import type { DialogProps } from '@vegaprotocol/wallet';
+import type { DialogProps, VegaTxState } from '@vegaprotocol/wallet';
 
 interface VoteButtonsContainerProps {
   voteState: VoteState | null;
@@ -27,6 +27,7 @@ interface VoteButtonsContainerProps {
   minVoterBalance: string | null | undefined;
   spamProtectionMinTokens: string | null | undefined;
   submit: (voteValue: VoteValue, proposalId: string | null) => Promise<void>;
+  transaction: VegaTxState | null;
   dialog: (props: DialogProps) => JSX.Element;
   className?: string;
 }
@@ -67,6 +68,7 @@ export const VoteButtons = ({
   minVoterBalance,
   spamProtectionMinTokens,
   submit,
+  transaction,
   dialog: Dialog,
 }: VoteButtonsProps) => {
   const { t } = useTranslation();
@@ -208,7 +210,11 @@ export const VoteButtons = ({
           </p>
         )
       )}
-      <VoteTransactionDialog voteState={voteState} TransactionDialog={Dialog} />
+      <VoteTransactionDialog
+        voteState={voteState}
+        transaction={transaction}
+        TransactionDialog={Dialog}
+      />
     </>
   );
 };

apps/governance/src/routes/proposals/components/vote-details/vote-details.tsx

@@ -12,7 +12,7 @@ import { VoteButtonsContainer } from './vote-buttons';
 import { SubHeading } from '../../../../components/heading';
 import { ProposalType } from '../proposal/proposal';
 import type { VoteValue } from '@vegaprotocol/types';
-import type { DialogProps } from '@vegaprotocol/wallet';
+import type { DialogProps, VegaTxState } from '@vegaprotocol/wallet';
 import type { ProposalFieldsFragment } from '../../proposals/__generated__/Proposals';
 import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 import type { VoteState } from './use-user-vote';
@@ -22,6 +22,7 @@ interface VoteDetailsProps {
   minVoterBalance: string | null | undefined;
   spamProtectionMinTokens: string | null | undefined;
   proposalType: ProposalType | null;
+  transaction: VegaTxState | null;
   submit: (voteValue: VoteValue, proposalId: string | null) => Promise<void>;
   dialog: (props: DialogProps) => JSX.Element;
   voteState: VoteState | null;
@@ -34,6 +35,7 @@ export const VoteDetails = ({
   spamProtectionMinTokens,
   proposalType,
   submit,
+  transaction,
   dialog,
   voteState,
   voteDatetime,
@@ -228,6 +230,7 @@ export const VoteDetails = ({
                 spamProtectionMinTokens={spamProtectionMinTokens}
                 className="flex"
                 submit={submit}
+                transaction={transaction}
                 dialog={dialog}
               />
             )

apps/governance/src/routes/proposals/components/vote-details/vote-transaction-dialog.tsx

@@ -1,9 +1,10 @@
 import { t } from '@vegaprotocol/i18n';
 import { VoteState } from './use-user-vote';
-import type { DialogProps } from '@vegaprotocol/wallet';
+import type { DialogProps, VegaTxState } from '@vegaprotocol/wallet';
 
 interface VoteTransactionDialogProps {
   voteState: VoteState;
+  transaction: VegaTxState | null;
   TransactionDialog: (props: DialogProps) => JSX.Element;
 }
 
@@ -20,12 +21,15 @@ const dialogTitle = (voteState: VoteState): string | undefined => {
 
 export const VoteTransactionDialog = ({
   voteState,
+  transaction,
   TransactionDialog,
 }: VoteTransactionDialogProps) => {
   // Render a custom message if the voting fails otherwise
   // pass undefined so that the default vega transaction dialog UI gets used
   const customMessage =
-    voteState === VoteState.Failed ? <p>{t('voteError')}</p> : undefined;
+    voteState === VoteState.Failed ? (
+      <p>{transaction?.error?.message || t('voteError')}</p>
+    ) : undefined;
 
   return (
     <div data-testid="vote-transaction-dialog">

apps/trading-e2e/.env

@@ -36,4 +36,4 @@ CYPRESS_VEGA_WALLET_API_TOKEN=
 
 # Cosmic elevator flags (MUST be doubled with CYPRESS_ prefix)
 NX_SUCCESSOR_MARKETS=true
-CYPRESS_NX_SUCCESSOR_MARKETS=true
+CYPRESS_NX_SUCCESSOR_MARKETS=true

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

@@ -259,6 +259,12 @@ describe('Closed markets', { tags: '@smoke' }, () => {
       .find('[data-testid="market-code"]')
       .should('have.text', settledMarket.tradableInstrument.instrument.code);
 
+    // 6001-MARK-071
+    cy.get(rowSelector)
+      .first()
+      .find('[title="Future"]')
+      .should('have.text', 'Futr');
+
     // 6001-MARK-002
     cy.get(rowSelector)
       .first()

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

@@ -69,6 +69,12 @@ describe('markets all table', { tags: '@smoke' }, () => {
       .find(colInstrumentCode)
       .should('have.text', 'SOLUSD');
 
+    // 6001-MARK-073
+    cy.get(rowSelector)
+      .first()
+      .find('[title="Future"]')
+      .should('have.text', 'Futr');
+
     //  6001-MARK-036
     cy.get(rowSelector)
       .first()

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

@@ -1,136 +0,0 @@
-import {
-  AuctionTrigger,
-  MarketState,
-  MarketTradingMode,
-} from '@vegaprotocol/types';
-
-describe('markets selector', { tags: '@smoke' }, () => {
-  const list = 'market-selector-list';
-  const searchInput = 'search-term';
-
-  beforeEach(() => {
-    cy.window().then((window) => {
-      window.localStorage.setItem('marketId', 'market-1');
-    });
-    cy.setOnBoardingViewed();
-    cy.mockTradingPage(
-      MarketState.STATE_ACTIVE,
-      MarketTradingMode.TRADING_MODE_MONITORING_AUCTION,
-      AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY_TARGET_NOT_MET
-    );
-    cy.mockSubscription();
-    cy.visit('/');
-
-    cy.wait('@Markets');
-    cy.wait('@MarketsData');
-  });
-
-  // 6001-MARK-066
-  it('can open popover to view markets', () => {
-    cy.getByTestId('market-selector').should('not.exist');
-    cy.getByTestId('header-title').should('be.visible').click();
-    cy.getByTestId('market-selector').should('be.visible');
-  });
-
-  // need function keyword as we need 'this' to access market data
-  it('displays data as expected', () => {
-    // TODO: load data from mocks in. Using alias and wrap intermittently fails
-    const data = [
-      {
-        code: 'SOLUSD',
-        markPrice: '84.41',
-        vol: '0.00',
-        productType: 'Futr',
-      },
-      {
-        code: 'ETHBTC.QM21',
-        markPrice: '46,126.90058',
-        vol: '0.00',
-        productType: 'Futr',
-      },
-      {
-        code: 'BTCUSD.MF21',
-        markPrice: '46,126.90058',
-        vol: '0.00',
-        productType: 'Futr',
-      },
-      {
-        code: 'AAPL.MF21',
-        markPrice: '46,126.90058',
-        vol: '0.00',
-        productType: 'Futr',
-      },
-    ];
-    cy.getByTestId('header-title').should('be.visible').click();
-    cy.getByTestId(list)
-      .find('a')
-      .each((item, i) => {
-        const market = data[i];
-        // 6001-MARK-021
-        // 6001-MARK-022
-        expect(item.find('h3').text()).equals(
-          `${market.code} ${market.productType}`
-        );
-        expect(
-          item.find('[data-testid="market-selector-volume"]').text()
-        ).contains(market.vol);
-        // 6001-MARK-024
-        expect(
-          item.find('[data-testid="market-selector-price"]').text()
-        ).contains(market.markPrice);
-        // 6001-MARK-025
-        expect(item.find('[data-testid="sparkline-svg"]')).to.not.exist;
-      });
-  });
-
-  it('can use the filter options', () => {
-    cy.getByTestId('header-title').should('be.visible').click();
-
-    // 6001-MARK-027
-    // product type
-    cy.getByTestId('product-Spot').click();
-    cy.getByTestId(list).contains('Spot markets coming soon.');
-    cy.getByTestId('product-Perpetual').click();
-    cy.getByTestId(list).contains('Perpetual markets coming soon.');
-    cy.getByTestId('product-Future').click();
-    cy.getByTestId(list).find('a').should('have.length', 4);
-
-    // 6001-MARK-029
-    cy.getByTestId(searchInput).clear().type('btc');
-    cy.getByTestId(list).find('a').should('have.length', 2);
-    cy.getByTestId(list).find('a').eq(1).contains('BTCUSD.MF21');
-    cy.getByTestId(list).find('a').eq(0).contains('ETHBTC.QM21');
-
-    cy.getByTestId(searchInput).clear();
-    cy.getByTestId(list).find('a').should('have.length', 4);
-  });
-
-  it('can sort by by top gaining and top losing market', () => {
-    cy.getByTestId('header-title').should('be.visible').click();
-
-    // 6001-MARK-030
-    // 6001-MARK-031
-    // 6001-MARK-032
-    // 6001-MARK-033
-    cy.getByTestId(' sort-trigger').click();
-    cy.getByTestId('sort-item-Gained')
-      .contains('Top gaining')
-      .should('be.visible');
-    cy.getByTestId('sort-item-Lost')
-      .contains('Top losing')
-      .should('be.visible');
-    cy.getByTestId('sort-item-New')
-      .contains('New markets')
-      .should('be.visible');
-  });
-
-  it('can filter by settlement asset', () => {
-    cy.getByTestId('header-title').should('be.visible').click();
-
-    // 6001-MARK-028
-    cy.getByTestId('asset-trigger').click();
-    cy.getByTestId('asset-id-asset-3').contains('tBTC').click();
-    cy.getByTestId(list).find('a').should('have.length', 1);
-    cy.getByTestId(list).find('a').eq(0).contains('ETHBTC.QM21');
-  });
-});

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

@@ -45,6 +45,12 @@ describe('markets proposed table', { tags: '@smoke' }, () => {
       .find('[col-id="description"]')
       .should('have.text', 'ETHUSD');
 
+    //  6001-MARK-074
+    cy.get(rowSelector)
+      .first()
+      .find('[title="Future"]')
+      .should('have.text', 'Futr');
+
     //  6001-MARK-051
     cy.get(rowSelector)
       .first()

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

@@ -1,30 +0,0 @@
-describe('Settings page', { tags: '@smoke' }, () => {
-  beforeEach(() => {
-    cy.clearLocalStorage();
-
-    cy.mockTradingPage();
-    cy.mockSubscription();
-    cy.setOnBoardingViewed();
-    cy.visit('/');
-
-    // Only click if not already active otherwise sidebar will close
-    cy.get('[data-testid="sidebar-content"]').then(($sidebarContent) => {
-      if ($sidebarContent.find('h2').text() !== 'Settings') {
-        cy.get('[data-testid="sidebar"] [data-testid="Settings"]').click();
-      }
-    });
-  });
-
-  it('telemetry checkbox should work well', () => {
-    const telemetrySwitch = '#switch-settings-telemetry-switch';
-    cy.get(telemetrySwitch).should('have.attr', 'data-state', 'unchecked');
-    cy.get(telemetrySwitch).click();
-    cy.get(telemetrySwitch).should('have.attr', 'data-state', 'checked');
-    cy.reload();
-    cy.get(telemetrySwitch).should('have.attr', 'data-state', 'checked');
-    cy.get(telemetrySwitch).click();
-    cy.get(telemetrySwitch).should('have.attr', 'data-state', 'unchecked');
-    cy.reload();
-    cy.get(telemetrySwitch).should('have.attr', 'data-state', 'unchecked');
-  });
-});

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

@@ -1,186 +0,0 @@
-interface ItemInfoType {
-  name: string;
-  infoText: string;
-}
-
-type CheckMenuItemsFnType = (
-  triggerSelector: string,
-  validTexts: string[],
-  clickItem?: string
-) => void;
-type CheckMenuItemCheckboxFnType = (
-  buttonText: string,
-  items: ItemInfoType[]
-) => void;
-
-const menuItemRadio = 'div[role="menuitemradio"]';
-const menuItemCheckbox = 'div[role="menuitemcheckbox"]';
-const button = 'button';
-const indicatorInfo = '.indicator-info-wrapper';
-
-const checkMenuItems: CheckMenuItemsFnType = (
-  triggerSelector,
-  validTexts,
-  clickItem
-) => {
-  cy.get(triggerSelector).click();
-
-  cy.get(menuItemRadio)
-    .should('have.length', validTexts.length)
-    .each(($el, index) => {
-      const text = $el.text().trim();
-      expect(text).to.equal(validTexts[index]);
-    });
-
-  if (clickItem) {
-    cy.contains(menuItemRadio, clickItem).click();
-    cy.get(triggerSelector).click();
-    cy.get(`${menuItemRadio}[data-state="checked"]`)
-      .invoke('text')
-      .then((text: string) => {
-        expect(text.trim()).to.equal(clickItem);
-      });
-  }
-};
-
-const checkMenuItemCheckbox: CheckMenuItemCheckboxFnType = (
-  buttonText,
-  items
-) => {
-  items.forEach((item) => {
-    cy.contains(button, buttonText).click();
-    cy.contains(menuItemCheckbox, item.name).click();
-  });
-
-  cy.contains(button, buttonText).click();
-  cy.get(menuItemCheckbox)
-    .should('have.length', items.length)
-    .each(($el, index) => {
-      const text = $el.text();
-      expect(text).to.equal(items[index].name);
-    });
-
-  items.forEach((item, index) => {
-    cy.get(indicatorInfo)
-      .eq(index + 1)
-      .invoke('text')
-      .should('eq', item.infoText);
-  });
-
-  cy.contains(button, buttonText).click({ force: true });
-};
-
-function getButtonSelectorByText(text: string): string {
-  return `${button}[aria-haspopup="menu"]:contains(${text})`;
-}
-
-beforeEach(() => {
-  cy.mockTradingPage();
-  cy.mockSubscription();
-  cy.setOnBoardingViewed();
-  cy.visit('/#/markets/market-0');
-  cy.wait('@Markets');
-});
-
-describe(
-  'chart display options',
-  { tags: '@smoke', testIsolation: true },
-  () => {
-    it('change time interval', () => {
-      // 6004-CHAR-001
-      checkMenuItems(
-        getButtonSelectorByText('Interval:'),
-        ['1m', '5m', '15m', '1H', '6H', '1D'],
-        '1m'
-      );
-    });
-
-    it('change display type', () => {
-      // 6004-CHAR-002
-      // 6004-CHAR-003
-      checkMenuItems(
-        '[aria-label$="chart icon"]',
-        ['Mountain', 'Candlestick', 'Line', 'OHLC'],
-        'Mountain'
-      );
-    });
-
-    it('Overlays', () => {
-      // 6004-CHAR-004
-      // 6004-CHAR-008
-      // 6004-CHAR-009
-      // 6004-CHAR-034
-      // 6004-CHAR-037
-      // 6004-CHAR-039
-      // 6004-CHAR-041
-
-      const overlayInfo: ItemInfoType[] = [
-        {
-          name: 'Bollinger bands',
-          infoText: 'Bollinger: Upper 174.78590Lower 173.38014',
-        },
-        {
-          name: 'Envelope',
-          infoText: 'Envelope: Upper 191.29000Lower 156.51000',
-        },
-        { name: 'EMA', infoText: 'EMA: 174.06793' },
-        { name: 'Moving average', infoText: 'Moving average: 174.08302' },
-        {
-          name: 'Price monitoring bounds',
-          infoText:
-            'Price Monitoring Bounds 1: Min 162.56291Max 182.96869Reference 172.47489',
-        },
-      ];
-
-      checkMenuItemCheckbox('Overlays', overlayInfo);
-    });
-
-    it('Studies', () => {
-      // 6004-CHAR-005
-      // 6004-CHAR-006
-      // 6004-CHAR-007
-      // 6004-CHAR-042
-      // 6004-CHAR-045
-      // 6004-CHAR-047
-      // 6004-CHAR-049
-      // 6004-CHAR-051
-      const studyInfo: ItemInfoType[] = [
-        {
-          name: 'Eldar-ray',
-          infoText: 'Eldar-ray: Bull -0.08376Bear -0.58376',
-        },
-        { name: 'Force index', infoText: 'Force index: 987.48858' },
-        { name: 'MACD', infoText: 'MACD: S -0.06420D 0.00359MACD -0.06062' },
-        { name: 'RSI', infoText: 'RSI: 47.08648' },
-        { name: 'Volume', infoText: 'Volume: 55,000' },
-      ];
-      cy.get(indicatorInfo).eq(1).realHover();
-      cy.get('.chart__wrapper [data-testid="split-view-view"]')
-        .last()
-        .find('[role="button"][title="Close"]')
-        .click({ force: true });
-      cy.get(indicatorInfo).should('have.length', 1);
-
-      checkMenuItemCheckbox('Studies', studyInfo);
-    });
-
-    it('price details', () => {
-      // 6004-CHAR-010
-      const expectedDateRegex = new RegExp(
-        /^\d{2}:\d{2} \d{2} [A-Za-z]{3} \d{4}$/
-      );
-      const expectedOhlc = `O 173.60000H 174.00000L 173.50000C 173.90000Change −0.60000(−0.34%)`;
-      cy.get(indicatorInfo)
-        .eq(0)
-        .invoke('text')
-        .then((text) => {
-          const actualDate = text.slice(0, -67);
-          // eslint-disable-next-line no-console
-          console.log(actualDate);
-          const actualOhlc = text.slice(-67);
-          assert.isTrue(expectedDateRegex.test(actualDate));
-          assert.strictEqual(actualOhlc, expectedOhlc);
-        });
-    });
-  }
-);

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

@@ -3,7 +3,7 @@ import { testOrderSubmission } from '../support/order-validation';
 import type { OrderSubmission } from '@vegaprotocol/wallet';
 import { createOrder } from '../support/create-order';
 
-describe('must submit order', { tags: '@smoke' }, () => {
+describe.skip('must submit order', { tags: '@smoke' }, () => {
   // 7002-SORD-039
   before(() => {
     cy.setVegaWallet();

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

@@ -23,7 +23,7 @@ describe('deal ticket basics', { tags: '@smoke' }, () => {
     // 0003-WTXN-001
     cy.getByTestId('connect-vega-wallet'); // Not connected
     cy.getByTestId(placeOrderBtn).should('exist');
-    cy.getByTestId('get-started-button').should('exist');
+    cy.getByTestId('order-connect-wallet').should('exist');
   });
 
   it('must be able to select order direction - long/short', function () {
@@ -44,7 +44,7 @@ describe('deal ticket basics', { tags: '@smoke' }, () => {
     mockConnectWallet();
     cy.getByTestId(toggleLimit).click();
     cy.getByTestId(orderPriceField).clear().type('101');
-    cy.getByTestId('get-started-button').click();
+    cy.getByTestId('order-connect-wallet').click();
     cy.getByTestId('dialog-content').should('be.visible');
     cy.getByTestId('connectors-list')
       .find('[data-testid="connector-jsonRpc"]')
@@ -54,6 +54,15 @@ describe('deal ticket basics', { tags: '@smoke' }, () => {
     cy.getByTestId(toggleLimit).next('input').should('be.checked');
     cy.getByTestId(orderPriceField).should('have.value', '101');
   });
+
+  it('sidebar should be open after reload', () => {
+    cy.mockTradingPage();
+    cy.getByTestId('deal-ticket-form').should('be.visible');
+    cy.getByTestId('Order').click();
+    cy.getByTestId('deal-ticket-form').should('not.exist');
+    cy.reload();
+    cy.getByTestId('deal-ticket-form').should('be.visible');
+  });
 });
 
 describe(

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

@@ -64,7 +64,7 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
       cy.getByTestId(orderSizeField).clear().type('1');
       cy.getByTestId(orderPriceField).clear().type('1.123456');
       cy.getByTestId(placeOrderBtn).click();
-      cy.getByTestId('deal-ticket-error-message-price-limit').should(
+      cy.getByTestId('deal-ticket-error-message-price').should(
         'have.text',
         'Price accepts up to 5 decimal places'
       );
@@ -87,7 +87,7 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
       cy.getByTestId(orderSizeField).clear().type('1.234');
       // 7002-SORD-060
       cy.getByTestId(placeOrderBtn).should('be.enabled');
-      cy.getByTestId('deal-ticket-error-message-size-market').should(
+      cy.getByTestId('deal-ticket-error-message-size').should(
         'have.text',
         'Size must be whole numbers for this market'
       );
@@ -96,7 +96,7 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
     it('must warn if order size is set to 0', function () {
       cy.getByTestId(orderSizeField).clear().type('0');
       cy.getByTestId(placeOrderBtn).should('be.enabled');
-      cy.getByTestId('deal-ticket-error-message-size-market').should(
+      cy.getByTestId('deal-ticket-error-message-size').should(
         'have.text',
         'Size cannot be lower than 1'
       );

apps/trading-e2e/src/integration/trading-deal-ticket-submit-account-validation.cy.ts

@@ -0,0 +1,87 @@
+import { aliasGQLQuery } from '@vegaprotocol/cypress';
+import {
+  accountsQuery,
+  amendGeneralAccountBalance,
+  amendMarginAccountBalance,
+} from '@vegaprotocol/mock';
+
+describe.skip(
+  'account validation',
+  { tags: '@regression', testIsolation: true },
+  () => {
+    describe('zero balance error', () => {
+      beforeEach(() => {
+        cy.setVegaWallet();
+        cy.mockTradingPage();
+        let accounts = accountsQuery();
+        accounts = amendMarginAccountBalance(accounts, 'market-0', '1000');
+        accounts = amendGeneralAccountBalance(accounts, 'market-0', '0');
+        cy.mockGQL((req) => {
+          aliasGQLQuery(req, 'Accounts', accounts);
+        });
+        cy.mockSubscription();
+        cy.visit('/#/markets/market-0');
+        cy.wait('@Markets');
+      });
+
+      it('should show an error if your balance is zero', () => {
+        const accounts = accountsQuery();
+        amendMarginAccountBalance(accounts, 'market-0', '0');
+        cy.mockGQL((req) => {
+          aliasGQLQuery(req, 'Accounts', accounts);
+        });
+        // 7002-SORD-060
+        cy.getByTestId('place-order').should('be.enabled');
+        // 7002-SORD-003
+        cy.getByTestId('deal-ticket-error-message-zero-balance').should(
+          'have.text',
+          'You need ' +
+            'tDAI' +
+            ' in your wallet to trade in this market. See all your collateral.Make a deposit'
+        );
+        cy.getByTestId('deal-ticket-deposit-dialog-button').should('exist');
+      });
+    });
+
+    describe('not enough balance warning', () => {
+      beforeEach(() => {
+        cy.setVegaWallet();
+        cy.mockTradingPage();
+        let accounts = accountsQuery();
+        accounts = amendMarginAccountBalance(accounts, 'market-0', '1000');
+        accounts = amendGeneralAccountBalance(accounts, 'market-0', '1');
+        cy.mockGQL((req) => {
+          aliasGQLQuery(req, 'Accounts', accounts);
+        });
+        cy.mockSubscription();
+        cy.visit('/#/markets/market-0');
+        cy.wait('@Markets');
+
+        cy.get('[data-testid="deal-ticket-form"]').then(($form) => {
+          if (!$form.length) {
+            cy.getByTestId('Order').click();
+          }
+        });
+      });
+
+      it('should display info and button for deposit', () => {
+        // 7002-SORD-003
+
+        // warning should show immediately
+        cy.getByTestId('deal-ticket-warning-margin').should(
+          'contain.text',
+          'You may not have enough margin available to open this position'
+        );
+        cy.getByTestId('deal-ticket-warning-margin').should(
+          'contain.text',
+          'You may not have enough margin available to open this position. 5.00 tDAI is currently required. You have only 0.01001 tDAI available.'
+        );
+        cy.getByTestId('deal-ticket-deposit-dialog-button').click();
+        cy.getByTestId('sidebar-content')
+          .find('h2')
+          .eq(0)
+          .should('have.text', 'Deposit');
+      });
+    });
+  }
+);

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

@@ -8,7 +8,7 @@ import {
 import type { OrderSubmission } from '@vegaprotocol/wallet';
 import { createOrder } from '../support/create-order';
 
-describe(
+describe.skip(
   'account validation',
   { tags: '@regression', testIsolation: true },
   () => {

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

@@ -222,12 +222,17 @@ describe('subscribe orders', { tags: '@smoke' }, () => {
 
   it('must see a filled order', () => {
     // 7002-SORD-046
+    // 7003-MORD-020
     // NOT COVERED:  Must be able to see/link to all trades that were created from this order
     updateOrder({
       id: orderId,
       status: Schema.OrderStatus.STATUS_FILLED,
     });
     cy.getByTestId(`order-status-${orderId}`).should('have.text', 'Filled');
+    cy.get('[col-id="market.tradableInstrument.instrument.code"]').contains(
+      '[title="Future"]',
+      'Futr'
+    );
   });
 
   it('must see a rejected order', () => {

apps/trading/.env

@@ -12,8 +12,7 @@ NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/main/announcements.json
 NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72
-NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
-NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet
+
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true

apps/trading/.env.capsule

@@ -12,6 +12,8 @@ NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/test/announcements.json
+NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
+NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet
 
 NX_ETH_LOCAL_PROVIDER_URL=http://localhost:8545/
 NX_ETH_WALLET_MNEMONIC="ozone access unlock valid olympic save include omit supply green clown session"

apps/trading/.env.devnet

@@ -13,6 +13,8 @@ NX_VEGA_DOCS_URL=#
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega-dev-releases/releases
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
+NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
+NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true

apps/trading/.env.mainnet

@@ -13,6 +13,8 @@ NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json
 NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
 NX_VEGA_CONSOLE_URL=https://console.vega.xyz
+NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-mainnet/codfcglpplgmmlokgilfkpcjnmkbfiel
+NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet-mainnet
 # TAG name of the current app version - TODO: bump to the latest upon release
 NX_APP_VERSION=v0.20.21-core-0.71.6
 

apps/trading/.env.mainnet-mirror

@@ -13,6 +13,8 @@ NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json
 NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
 NX_VEGA_CONSOLE_URL=https://console.mainnet-mirror.vega.rocks
+NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-mainnet/codfcglpplgmmlokgilfkpcjnmkbfiel
+NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet-mainnet
 # TAG name of the current app version - TODO: bump to the latest upon release
 NX_APP_VERSION=v0.20.19-core-0.71.6
 

apps/trading/.env.stagnet1

@@ -13,9 +13,11 @@ NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
+NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
+NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true
 # NX_ICEBERG_ORDERS
-# NX_PRODUCT_PERPETUALS
+# NX_PRODUCT_PERPETUALS

apps/trading/.env.testnet

@@ -14,6 +14,8 @@ NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega/releases
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
 NX_VEGA_CONSOLE_URL=https://console.fairground.wtf
+NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
+NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
@@ -22,4 +24,4 @@ NX_ICEBERG_ORDERS=true
 # NX_PRODUCT_PERPETUALS
 
 NX_TENDERMINT_URL=https://tm.be.testnet.vega.xyz
-NX_TENDERMINT_WEBSOCKET_URL=wss://be.testnet.vega.xyz/websocket
+NX_TENDERMINT_WEBSOCKET_URL=wss://be.testnet.vega.xyz/websocket

apps/trading/.env.validators-testnet

@@ -15,6 +15,9 @@ NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/annou
 NX_VEGA_INCIDENT_URL=https://blog.vega.xyz/tagged/vega-incident-reports
 NX_VEGA_CONSOLE_URL=https://trading.validators-testnet.vega.rocks
 
+NX_CHROME_EXTENSION_URL=https://chrome.google.com/webstore/detail/vega-wallet-fairground/nmmjkiafpmphlikhefgjbblebfgclikn
+NX_MOZILLA_EXTENSION_URL=https://addons.mozilla.org/pl/firefox/addon/vega-wallet
+
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=false
 NX_STOP_ORDERS=false

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

@@ -94,7 +94,11 @@ const MainGrid = memo(
         >
           <TradeGridChild>
             <Tabs storageKey="console-trade-grid-bottom">
-              <Tab id="positions" name={t('Positions')}>
+              <Tab
+                id="positions"
+                name={t('Positions')}
+                menu={<TradingViews.positions.menu />}
+              >
                 <TradingViews.positions.component />
               </Tab>
               <Tab

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

@@ -17,6 +17,7 @@ import type { OrderContainerProps } from '../../components/orders-container';
 import { OrdersContainer } from '../../components/orders-container';
 import { StopOrdersContainer } from '../../components/stop-orders-container';
 import { AccountsMenu } from '../../components/accounts-menu';
+import { PositionsMenu } from '../../components/positions-menu';
 
 type MarketDependantView =
   | typeof CandlesChartContainer
@@ -57,7 +58,11 @@ export const TradingViews = {
     label: 'Trades',
     component: requiresMarket(TradesContainer),
   },
-  positions: { label: 'Positions', component: PositionsContainer },
+  positions: {
+    label: 'Positions',
+    component: PositionsContainer,
+    menu: PositionsMenu,
+  },
   activeOrders: {
     label: 'Active',
     component: (props: OrderContainerProps) => (

apps/trading/components/constants.ts

@@ -1,10 +1,2 @@
-import { t } from '@vegaprotocol/i18n';
-
 export const THROTTLE_UPDATE_TIME = 500;
 export const ONBOARDING_VIEWED_KEY = 'vega_onboarding_viewed';
-export const MAINNET_WELCOME_HEADER = t(
-  'Trade cash settled futures on the fully decentralised Vega network.'
-);
-export const TESTNET_WELCOME_HEADER = t(
-  'Try out trading cash settled futures on the fully decentralised Vega network (Testnet).'
-);

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

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { Fragment, useState } from 'react';
 import type {
   SuccessorProposalListFieldsFragment,
   NewMarketSuccessorFieldsFragment,
@@ -52,7 +52,7 @@ export const MarketSuccessorProposalBanner = ({
               TOKEN_PROPOSAL.replace(':id', item.id || '')
             );
             return (
-              <>
+              <Fragment key={i}>
                 <ExternalLink href={externalLink} key={i}>
                   {
                     (item.terms?.change as NewMarketSuccessorFieldsFragment)
@@ -60,7 +60,7 @@ export const MarketSuccessorProposalBanner = ({
                   }
                 </ExternalLink>
                 {i < successors.length - 1 && ', '}
-              </>
+              </Fragment>
             );
           })}
         </div>

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

@@ -3,7 +3,7 @@ import { Header, HeaderTitle } from '../header';
 import { useParams } from 'react-router-dom';
 import { MarketSelector } from '../../components/market-selector/market-selector';
 import { MarketHeaderStats } from '../../client-pages/market/market-header-stats';
-import { useMarket } from '@vegaprotocol/markets';
+import { useMarket, useMarketList } from '@vegaprotocol/markets';
 import { useState } from 'react';
 
 export const MarketHeader = () => {
@@ -11,6 +11,10 @@ export const MarketHeader = () => {
   const { data } = useMarket(marketId);
   const [open, setOpen] = useState(false);
 
+  // Ensure that markets are kept cached so opening the list
+  // shows all markets instantly
+  useMarketList();
+
   if (!data) return null;
 
   return (

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

@@ -132,6 +132,7 @@ describe('MarketSelector', () => {
     data: markets,
     loading: false,
     error: undefined,
+    reload: jest.fn(),
   });
 
   it('Button "All" should be selected by default', () => {

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

@@ -1,14 +1,14 @@
 import { t } from '@vegaprotocol/i18n';
 import uniqBy from 'lodash/uniqBy';
-import type { MarketMaybeWithDataAndCandles } from '@vegaprotocol/markets';
+import { type MarketMaybeWithDataAndCandles } from '@vegaprotocol/markets';
 import {
-  Input,
+  TradingInput,
   TinyScroll,
   VegaIcon,
   VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
 import type { CSSProperties } from 'react';
-import { useCallback, useState, useMemo, useRef } from 'react';
+import { useCallback, useState, useMemo, useRef, useEffect } from 'react';
 import { FixedSizeList } from 'react-window';
 import { useMarketSelectorList } from './use-market-selector-list';
 import type { ProductType } from './product-selector';
@@ -44,7 +44,12 @@ export const MarketSelector = ({
     assets: [],
   });
   const allProducts = filter.product === Product.All;
-  const { markets, data, loading, error } = useMarketSelectorList(filter);
+  const { markets, data, loading, error, reload } =
+    useMarketSelectorList(filter);
+
+  useEffect(() => {
+    reload();
+  }, [reload]);
 
   return (
     <div data-testid="market-selector">
@@ -57,7 +62,7 @@ export const MarketSelector = ({
         />
         <div className="text-sm grid grid-cols-[2fr_1fr_1fr] gap-1 ">
           <div className="flex-1">
-            <Input
+            <TradingInput
               onChange={(e) =>
                 setFilter((curr) => ({ ...curr, searchTerm: e.target.value }))
               }

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

@@ -15,6 +15,7 @@ export const Sort = {
   Gained: 'Gained',
   Lost: 'Lost',
   New: 'New',
+  TopTraded: 'TopTraded',
 } as const;
 
 export type SortType = keyof typeof Sort;
@@ -26,6 +27,7 @@ export const SortTypeMapping: {
   [Sort.Gained]: 'Top gaining',
   [Sort.Lost]: 'Top losing',
   [Sort.New]: 'New markets',
+  [Sort.TopTraded]: 'Top traded',
 };
 
 const SortIconMapping: {
@@ -35,6 +37,7 @@ const SortIconMapping: {
   [Sort.Gained]: VegaIconNames.TREND_UP,
   [Sort.Lost]: VegaIconNames.TREND_DOWN,
   [Sort.New]: VegaIconNames.STAR,
+  [Sort.TopTraded]: VegaIconNames.ARROW_UP,
 };
 
 export const SortDropdown = ({

apps/trading/components/market-selector/use-market-selector-list.ts

@@ -1,7 +1,11 @@
 import { useMemo } from 'react';
 import orderBy from 'lodash/orderBy';
 import { MarketState } from '@vegaprotocol/types';
-import { calcCandleVolume, useMarketList } from '@vegaprotocol/markets';
+import {
+  calcCandleVolume,
+  calcTradedFactor,
+  useMarketList,
+} from '@vegaprotocol/markets';
 import { priceChangePercentage } from '@vegaprotocol/utils';
 import type { Filter } from '../../components/market-selector/market-selector';
 import { Sort } from './sort-dropdown';
@@ -20,7 +24,7 @@ export const useMarketSelectorList = ({
   sort,
   searchTerm,
 }: Filter) => {
-  const { data, loading, error } = useMarketList();
+  const { data, loading, error, reload } = useMarketList();
 
   const markets = useMemo(() => {
     if (!data?.length) return [];
@@ -94,10 +98,14 @@ export const useMarketSelectorList = ({
       );
     }
 
+    if (sort === Sort.TopTraded) {
+      return orderBy(markets, [(m) => calcTradedFactor(m)], ['desc']);
+    }
+
     return markets;
   }, [data, product, searchTerm, assets, sort]);
 
-  return { markets, data, loading, error };
+  return { markets, data, loading, error, reload };
 };
 
 export const isMarketActive = (state: MarketState) => {

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

@@ -1,6 +1,6 @@
 import { VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
 import { MarketSelector } from '../market-selector';
-import { useMarket } from '@vegaprotocol/markets';
+import { useMarket, useMarketList } from '@vegaprotocol/markets';
 import { t } from '@vegaprotocol/i18n';
 import { useParams } from 'react-router-dom';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
@@ -14,6 +14,10 @@ export const NavHeader = () => {
   const { data } = useMarket(marketId);
   const [open, setOpen] = useState(false);
 
+  // Ensure that markets are kept cached so opening the list
+  // shows all markets instantly
+  useMarketList();
+
   if (!marketId) return null;
 
   return (

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

@@ -5,6 +5,7 @@ import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import type { DataGridSlice } from '../../stores/datagrid-store-slice';
 import { createDataGridSlice } from '../../stores/datagrid-store-slice';
+import type { StateCreator } from 'zustand';
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
@@ -13,6 +14,7 @@ export const PositionsContainer = ({ allKeys }: { allKeys?: boolean }) => {
   const onMarketClick = useMarketClickHandler(true);
   const { pubKey, pubKeys, isReadOnly } = useVegaWallet();
 
+  const showClosed = usePositionsStore((store) => store.showClosedMarkets);
   const gridStore = usePositionsStore((store) => store.gridStore);
   const updateGridStore = usePositionsStore((store) => store.updateGridStore);
   const gridStoreCallbacks = useDataGridEvents(gridStore, updateGridStore);
@@ -40,12 +42,35 @@ export const PositionsContainer = ({ allKeys }: { allKeys?: boolean }) => {
       onMarketClick={onMarketClick}
       isReadOnly={isReadOnly}
       gridProps={gridStoreCallbacks}
+      showClosed={showClosed}
     />
   );
 };
 
-const usePositionsStore = create<DataGridSlice>()(
-  persist(createDataGridSlice, {
-    name: 'vega_positions_store',
-  })
+type PositionsStoreSlice = {
+  showClosedMarkets: boolean;
+  toggleClosedMarkets: () => void;
+};
+
+const createPositionStoreSlice: StateCreator<PositionsStoreSlice> = (set) => ({
+  showClosedMarkets: false,
+  toggleClosedMarkets: () => {
+    set((curr) => {
+      return {
+        showClosedMarkets: !curr.showClosedMarkets,
+      };
+    });
+  },
+});
+
+export const usePositionsStore = create<PositionsStoreSlice & DataGridSlice>()(
+  persist(
+    (...args) => ({
+      ...createPositionStoreSlice(...args),
+      ...createDataGridSlice(...args),
+    }),
+    {
+      name: 'vega_positions_store',
+    }
+  )
 );

apps/trading/components/positions-menu/index.ts

@@ -0,0 +1 @@
+export * from './positions-menu';

apps/trading/components/positions-menu/positions-menu.tsx

@@ -0,0 +1,18 @@
+import { t } from '@vegaprotocol/i18n';
+import { Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
+import { usePositionsStore } from '../positions-container';
+
+export const PositionsMenu = () => {
+  const showClosed = usePositionsStore((store) => store.showClosedMarkets);
+  const toggle = usePositionsStore((store) => store.toggleClosedMarkets);
+  return (
+    <TradingButton
+      intent={Intent.Primary}
+      size="extra-small"
+      data-testid="open-transfer"
+      onClick={toggle}
+    >
+      {showClosed ? t('Hide closed markets') : t('Show closed markets')}
+    </TradingButton>
+  );
+};

apps/trading/components/sidebar/sidebar.tsx

@@ -14,12 +14,9 @@ import { Settings } from '../settings';
 import { Tooltip } from '../../components/tooltip';
 import { WithdrawContainer } from '../withdraw-container';
 import { Routes as AppRoutes } from '../../pages/client-router';
-import { persist } from 'zustand/middleware';
 import { GetStarted } from '../welcome-dialog';
 import { useVegaWallet, useViewAsDialog } from '@vegaprotocol/wallet';
 
-const STORAGE_KEY = 'vega_sidebar_store';
-
 export enum ViewType {
   Order = 'Order',
   Info = 'Info',
@@ -302,22 +299,14 @@ export const useSidebar = create<{
   init: boolean;
   view: SidebarView | null;
   setView: (view: SidebarView | null) => void;
-}>()(
-  persist(
-    (set) => ({
-      init: true,
-      view: null,
-      setView: (x) =>
-        set(() => {
-          if (x == null) {
-            return { view: null, init: false };
-          }
-
-          return { view: x, init: false };
-        }),
+}>()((set) => ({
+  init: true,
+  view: null,
+  setView: (x) =>
+    set(() => {
+      if (x == null) {
+        return { view: null, init: false };
+      }
+      return { view: x, init: false };
     }),
-    {
-      name: STORAGE_KEY,
-    }
-  )
-);
+}));

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

@@ -36,6 +36,6 @@ export const StopOrdersContainer = () => {
 
 const useStopOrdersStore = create<DataGridSlice>()(
   persist(createDataGridSlice, {
-    name: 'vega_fills_store',
+    name: 'vega_stop_orders_store',
   })
 );

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

@@ -1,16 +1,36 @@
+import { MemoryRouter } from 'react-router-dom';
 import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
 import { VegaWalletContext } from '@vegaprotocol/wallet';
 import { GetStarted } from './get-started';
 import { render, screen } from '@testing-library/react';
 
+let mockStep = 1;
+jest.mock('./use-get-onboarding-step', () => ({
+  ...jest.requireActual('./use-get-onboarding-step'),
+  useGetOnboardingStep: jest.fn(() => mockStep),
+}));
+
 describe('GetStarted', () => {
   const renderComponent = (context: Partial<VegaWalletContextShape> = {}) => {
     return render(
-      <VegaWalletContext.Provider value={context as VegaWalletContextShape}>
-        <GetStarted />
-      </VegaWalletContext.Provider>
+      <MemoryRouter>
+        <VegaWalletContext.Provider value={context as VegaWalletContextShape}>
+          <GetStarted />
+        </VegaWalletContext.Provider>
+      </MemoryRouter>
     );
   };
+  const checkTicks = (elements: Element[]) => {
+    elements.forEach((item, i) => {
+      if (i + 1 < mockStep) {
+        expect(item.querySelector('[data-testid="icon-tick"]')).toBeTruthy();
+      }
+    });
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
 
   it('renders full get started content if not connected and no browser wallet detected', () => {
     renderComponent();
@@ -20,12 +40,71 @@ describe('GetStarted', () => {
   it('renders connect prompt if no pubKey but wallet installed', () => {
     globalThis.window.vega = {} as Vega;
     renderComponent();
-    expect(screen.getByTestId('order-connect-wallet')).toBeInTheDocument();
+    expect(screen.getByTestId('get-started-banner')).toBeInTheDocument();
     globalThis.window.vega = undefined as unknown as Vega;
   });
 
   it('renders nothing if connected', () => {
+    mockStep = 0;
     const { container } = renderComponent({ pubKey: 'my-pubkey' });
     expect(container).toBeEmptyDOMElement();
   });
+
+  it('steps should be ticked', () => {
+    const navigatorGetter: jest.SpyInstance = jest.spyOn(
+      window.navigator,
+      'userAgent',
+      'get'
+    );
+    navigatorGetter.mockReturnValue('Chrome');
+    mockStep = 1;
+    const { rerender, container } = renderComponent();
+    expect(screen.queryByTestId('icon-tick')).not.toBeInTheDocument();
+    expect(screen.getByTestId('get-wallet-button')).toBeInTheDocument();
+
+    mockStep = 2;
+    rerender(
+      <MemoryRouter>
+        <VegaWalletContext.Provider value={{} as VegaWalletContextShape}>
+          <GetStarted />
+        </VegaWalletContext.Provider>
+      </MemoryRouter>
+    );
+    checkTicks(screen.getAllByRole('listitem'));
+    expect(screen.getByRole('button', { name: 'Connect' })).toBeInTheDocument();
+
+    mockStep = 3;
+    rerender(
+      <MemoryRouter>
+        <VegaWalletContext.Provider value={{} as VegaWalletContextShape}>
+          <GetStarted />
+        </VegaWalletContext.Provider>
+      </MemoryRouter>
+    );
+    checkTicks(screen.getAllByRole('listitem'));
+    expect(screen.getByRole('button', { name: 'Deposit' })).toBeInTheDocument();
+
+    mockStep = 4;
+    rerender(
+      <MemoryRouter>
+        <VegaWalletContext.Provider value={{} as VegaWalletContextShape}>
+          <GetStarted />
+        </VegaWalletContext.Provider>
+      </MemoryRouter>
+    );
+    checkTicks(screen.getAllByRole('listitem'));
+    expect(screen.getByRole('button', { name: 'Dismiss' })).toBeInTheDocument();
+
+    mockStep = 5;
+    rerender(
+      <MemoryRouter>
+        <VegaWalletContext.Provider
+          value={{ pubKey: 'my-pubkey' } as VegaWalletContextShape}
+        >
+          <GetStarted />
+        </VegaWalletContext.Provider>
+      </MemoryRouter>
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
 });

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

@@ -1,36 +1,96 @@
 import classNames from 'classnames';
 import { t } from '@vegaprotocol/i18n';
-import { ExternalLink, Intent, TradingButton } from '@vegaprotocol/ui-toolkit';
 import {
+  ExternalLink,
+  Intent,
+  TradingButton,
+  VegaIcon,
+  VegaIconNames,
+} from '@vegaprotocol/ui-toolkit';
+import {
+  GetWalletButton,
   useVegaWallet,
   useVegaWalletDialogStore,
-  isBrowserWalletInstalled,
 } from '@vegaprotocol/wallet';
 import { Networks, useEnvironment } from '@vegaprotocol/environment';
 import { useLocalStorage } from '@vegaprotocol/react-helpers';
+import { useNavigate } from 'react-router-dom';
+import {
+  OnboardingStep,
+  useGetOnboardingStep,
+} from './use-get-onboarding-step';
+import { Links, Routes } from '../../pages/client-router';
+import { useGlobalStore } from '../../stores';
+import { useSidebar, ViewType } from '../sidebar';
 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 GetStartedButton = ({ step }: { step: OnboardingStep }) => {
+  const navigate = useNavigate();
   const [, setOnboardingViewed] = useLocalStorage(
     constants.ONBOARDING_VIEWED_KEY
   );
 
+  const update = useGlobalStore((store) => store.update);
+  const marketId = useGlobalStore((store) => store.marketId);
+  const link = marketId ? Links[Routes.MARKET](marketId) : Links[Routes.HOME]();
+  const openVegaWalletDialog = useVegaWalletDialogStore(
+    (store) => store.openVegaWalletDialog
+  );
+  const setView = useSidebar((store) => store.setView);
+  let buttonText = t('Get started');
+  let onClickHandle = () => {
+    openVegaWalletDialog();
+  };
+  if (step === OnboardingStep.ONBOARDING_WALLET_STEP) {
+    return <GetWalletButton className="justify-between" />;
+  } else if (step === OnboardingStep.ONBOARDING_CONNECT_STEP) {
+    buttonText = t('Connect');
+  } else if (step === OnboardingStep.ONBOARDING_DEPOSIT_STEP) {
+    buttonText = t('Deposit');
+    onClickHandle = () => {
+      navigate(link);
+      setView({ type: ViewType.Deposit });
+      update({ onBoardingDismissed: true });
+    };
+  } else if (step === OnboardingStep.ONBOARDING_ORDER_STEP) {
+    buttonText = t('Dismiss');
+    onClickHandle = () => {
+      navigate(link);
+      setView({ type: ViewType.Order });
+      setOnboardingViewed('true');
+    };
+  }
+
+  return (
+    <TradingButton
+      onClick={onClickHandle}
+      size="small"
+      data-testid="get-started-button"
+      intent={Intent.Info}
+    >
+      {buttonText}
+    </TradingButton>
+  );
+};
+
+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 [onBoardingViewed] = useLocalStorage(constants.ONBOARDING_VIEWED_KEY);
+  const currentStep = useGetOnboardingStep();
   const openVegaWalletDialog = useVegaWalletDialogStore(
     (store) => store.openVegaWalletDialog
   );
 
-  const onButtonClick = () => {
-    openVegaWalletDialog();
-    setOnboardingViewed('true');
-  };
+  const getStartedNeeded =
+    onBoardingViewed !== 'true' &&
+    currentStep &&
+    currentStep < OnboardingStep.ONBOARDING_COMPLETE_STEP;
 
   const wrapperClasses = classNames(
     'flex flex-col py-4 px-6 gap-4 rounded',
@@ -39,27 +99,48 @@ export const GetStarted = ({ lead }: Props) => {
     { 'mt-8': !lead }
   );
 
-  if (!pubKey && !isBrowserWalletInstalled()) {
+  if (getStartedNeeded) {
     return (
       <div className={wrapperClasses} data-testid="get-started-banner">
         {lead && <h2>{lead}</h2>}
         <h3 className="text-lg">{t('Get started')}</h3>
         <div>
-          <ul className="list-decimal list-inside">
-            <li>{t('Get a Vega wallet')}</li>
-            <li>{t('Connect')}</li>
-            <li>{t('Deposit funds')}</li>
-            <li>{t('Open a position')}</li>
+          <ul className="list-inside -ml-5" role="list">
+            <li className="flex">
+              <div className="w-5">
+                {currentStep > OnboardingStep.ONBOARDING_WALLET_STEP && (
+                  <VegaIcon name={VegaIconNames.TICK} size={20} />
+                )}
+              </div>
+              <div className="ml-1">1. {t('Get a Vega wallet')}</div>
+            </li>
+            <li className="flex">
+              <div className="w-5">
+                {(currentStep > OnboardingStep.ONBOARDING_CONNECT_STEP ||
+                  pubKey) && <VegaIcon name={VegaIconNames.TICK} size={20} />}
+              </div>
+              <div className="ml-1">2. {t('Connect')}</div>
+            </li>
+            <li className="flex">
+              <div className="w-5">
+                {currentStep > OnboardingStep.ONBOARDING_DEPOSIT_STEP && (
+                  <VegaIcon name={VegaIconNames.TICK} size={20} />
+                )}
+              </div>
+              <div className="ml-1">3. {t('Deposit funds')}</div>
+            </li>
+            <li className="flex">
+              <div className="w-5">
+                {currentStep > OnboardingStep.ONBOARDING_ORDER_STEP && (
+                  <VegaIcon name={VegaIconNames.TICK} size={20} />
+                )}
+              </div>
+              <div className="ml-1">4. {t('Open a position')}</div>
+            </li>
           </ul>
         </div>
         <div>
-          <TradingButton
-            intent={Intent.Info}
-            onClick={onButtonClick}
-            data-testid="get-started-button"
-          >
-            {t('Get started')}
-          </TradingButton>
+          <GetStartedButton step={currentStep} />
         </div>
         {VEGA_ENV === Networks.MAINNET && (
           <p className="text-sm">

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

@@ -1,4 +1,4 @@
-import { Checkbox } from '@vegaprotocol/ui-toolkit';
+import { TradingCheckbox } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
 import { useTelemetryApproval } from '../../lib/hooks/use-telemetry-approval';
 
@@ -7,7 +7,7 @@ export const TelemetryApproval = ({ helpText }: { helpText: string }) => {
   return (
     <div className="flex flex-col py-3">
       <div className="mr-4" role="form">
-        <Checkbox
+        <TradingCheckbox
           label={<span className="text-lg pl-1">{t('Share usage data')}</span>}
           checked={isApproved}
           name="telemetry-approval"

apps/trading/components/welcome-dialog/use-get-onboarding-step.spec.tsx

@@ -0,0 +1,97 @@
+import type { ReactNode } from 'react';
+import { renderHook } from '@testing-library/react';
+import {
+  useGetOnboardingStep,
+  OnboardingStep,
+} from './use-get-onboarding-step';
+import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
+import { VegaWalletContext } from '@vegaprotocol/wallet';
+import { useDataProvider } from '@vegaprotocol/data-provider';
+import { depositsProvider } from '@vegaprotocol/deposits';
+import { aggregatedAccountsDataProvider } from '@vegaprotocol/accounts';
+import { ordersWithMarketProvider } from '@vegaprotocol/orders';
+import { positionsDataProvider } from '@vegaprotocol/positions';
+
+let mockData: object[] | null = [{ id: 'item-id' }];
+jest.mock('@vegaprotocol/data-provider', () => ({
+  ...jest.requireActual('@vegaprotocol/data-provider'),
+  useDataProvider: jest.fn(() => ({ data: mockData })),
+}));
+
+let mockContext: Partial<VegaWalletContextShape> = { pubKey: 'test-pubkey' };
+
+describe('useGetOnboardingStep', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockData = [{ id: 'item-id' }];
+    mockContext = { pubKey: 'test-pubkey' };
+    globalThis.window.vega = {} as Vega;
+  });
+
+  const wrapper = ({ children }: { children: ReactNode }) => (
+    <VegaWalletContext.Provider
+      value={mockContext as unknown as VegaWalletContextShape}
+    >
+      {children}
+    </VegaWalletContext.Provider>
+  );
+
+  it('should return properly ONBOARDING_UNKNOWN_STEP', () => {
+    mockData = null;
+    const { result } = renderHook(() => useGetOnboardingStep(), { wrapper });
+    expect(result.current).toEqual(OnboardingStep.ONBOARDING_UNKNOWN_STEP);
+  });
+
+  it('should return properly ONBOARDING_WALLET_STEP', () => {
+    // @ts-ignore test only purpose
+    globalThis.window.vega = undefined;
+    const { result } = renderHook(() => useGetOnboardingStep(), { wrapper });
+    expect(result.current).toEqual(OnboardingStep.ONBOARDING_WALLET_STEP);
+  });
+
+  it('should return properly ONBOARDING_CONNECT_STEP', () => {
+    mockContext = { pubKey: null };
+    const { result } = renderHook(() => useGetOnboardingStep(), { wrapper });
+    expect(result.current).toEqual(OnboardingStep.ONBOARDING_CONNECT_STEP);
+  });
+
+  it('should return properly ONBOARDING_DEPOSIT_STEP', async () => {
+    (useDataProvider as jest.Mock).mockImplementation((args) => {
+      if (
+        args.dataProvider === depositsProvider ||
+        args.dataProvider === aggregatedAccountsDataProvider
+      ) {
+        return { data: [] };
+      }
+      return { data: mockData };
+    });
+    const { result } = renderHook(() => useGetOnboardingStep(), { wrapper });
+    await expect(result.current).toEqual(
+      OnboardingStep.ONBOARDING_DEPOSIT_STEP
+    );
+  });
+
+  it('should return properly ONBOARDING_ORDER_STEP', async () => {
+    (useDataProvider as jest.Mock).mockImplementation((args) => {
+      if (
+        args.dataProvider === ordersWithMarketProvider ||
+        args.dataProvider === positionsDataProvider
+      ) {
+        return { data: [] };
+      }
+      return { data: mockData };
+    });
+    const { result } = renderHook(() => useGetOnboardingStep(), { wrapper });
+    await expect(result.current).toEqual(OnboardingStep.ONBOARDING_ORDER_STEP);
+  });
+
+  it('should return properly ONBOARDING_COMPLETE_STEP', async () => {
+    (useDataProvider as jest.Mock).mockImplementation(() => {
+      return { data: mockData };
+    });
+    const { result } = renderHook(() => useGetOnboardingStep(), { wrapper });
+    await expect(result.current).toEqual(
+      OnboardingStep.ONBOARDING_COMPLETE_STEP
+    );
+  });
+});

apps/trading/components/welcome-dialog/use-get-onboarding-step.ts

@@ -0,0 +1,82 @@
+import { isBrowserWalletInstalled, useVegaWallet } from '@vegaprotocol/wallet';
+import { depositsProvider } from '@vegaprotocol/deposits';
+import { useDataProvider } from '@vegaprotocol/data-provider';
+import { ordersWithMarketProvider } from '@vegaprotocol/orders';
+import * as Types from '@vegaprotocol/types';
+import { aggregatedAccountsDataProvider } from '@vegaprotocol/accounts';
+import { positionsDataProvider } from '@vegaprotocol/positions';
+import { useGlobalStore } from '../../stores';
+
+export enum OnboardingStep {
+  ONBOARDING_UNKNOWN_STEP,
+  ONBOARDING_WALLET_STEP,
+  ONBOARDING_CONNECT_STEP,
+  ONBOARDING_DEPOSIT_STEP,
+  ONBOARDING_ORDER_STEP,
+  ONBOARDING_COMPLETE_STEP,
+}
+
+export const useGetOnboardingStep = () => {
+  const connecting = useGlobalStore((store) => store.eagerConnecting);
+  const { pubKey = '', pubKeys } = useVegaWallet();
+  const { data: depositsData } = useDataProvider({
+    dataProvider: depositsProvider,
+    variables: { partyId: pubKey || '' },
+    skip: !pubKey,
+  });
+  const { data: collateralData } = useDataProvider({
+    dataProvider: aggregatedAccountsDataProvider,
+    variables: { partyId: pubKey || '' },
+    skip: !pubKey,
+  });
+  const collaterals = Boolean(collateralData?.length);
+  const deposits =
+    depositsData?.some(
+      (item) => item.status === Types.DepositStatus.STATUS_FINALIZED
+    ) || false;
+  const { data: ordersData } = useDataProvider({
+    dataProvider: ordersWithMarketProvider,
+    variables: {
+      partyId: pubKey || '',
+      pagination: {
+        first: 1,
+      },
+    },
+    skip: !pubKey,
+  });
+  const orders = Boolean(ordersData?.length);
+
+  const partyIds = pubKeys?.map((item) => item.publicKey) || [];
+  const { data: positionsData } = useDataProvider({
+    dataProvider: positionsDataProvider,
+    variables: {
+      partyIds,
+    },
+    skip: !partyIds?.length,
+  });
+  const positions = Boolean(positionsData?.length);
+
+  const isLoading = Boolean(
+    (connecting || pubKey) &&
+      (depositsData === null ||
+        ordersData === null ||
+        collateralData === null ||
+        positionsData === null)
+  );
+  if (isLoading) {
+    return OnboardingStep.ONBOARDING_UNKNOWN_STEP;
+  }
+  if (!isBrowserWalletInstalled()) {
+    return OnboardingStep.ONBOARDING_WALLET_STEP;
+  }
+  if (!pubKey) {
+    return OnboardingStep.ONBOARDING_CONNECT_STEP;
+  }
+  if (!deposits && !collaterals) {
+    return OnboardingStep.ONBOARDING_DEPOSIT_STEP;
+  }
+  if (!orders && !positions) {
+    return OnboardingStep.ONBOARDING_ORDER_STEP;
+  }
+  return OnboardingStep.ONBOARDING_COMPLETE_STEP;
+};

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

@@ -3,21 +3,19 @@ import { GetStarted } from './get-started';
 import { TradingButton } from '@vegaprotocol/ui-toolkit';
 import { useNavigate } from 'react-router-dom';
 import { Links, Routes } from '../../pages/client-router';
-import { useLocalStorage } from '@vegaprotocol/react-helpers';
-import * as constants from '../constants';
 import { Networks, useEnvironment } from '@vegaprotocol/environment';
 import type { ReactNode } from 'react';
+import { useGlobalStore } from '../../stores';
 
 export const WelcomeDialogContent = () => {
   const { VEGA_ENV } = useEnvironment();
-  const [, setOnboardingViewed] = useLocalStorage(
-    constants.ONBOARDING_VIEWED_KEY
-  );
+
+  const update = useGlobalStore((store) => store.update);
   const navigate = useNavigate();
   const browseMarkets = () => {
     const link = Links[Routes.MARKETS]();
     navigate(link);
-    setOnboardingViewed('true');
+    update({ onBoardingDismissed: true });
   };
   const lead =
     VEGA_ENV === Networks.MAINNET
@@ -57,7 +55,7 @@ export const WelcomeDialogContent = () => {
           {t('Browse the markets')}
         </TradingButton>
       </div>
-      <div className="sm:w-1/2">
+      <div className="sm:w-1/2 flex grow">
         <GetStarted lead={lead} />
       </div>
     </div>

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

@@ -2,31 +2,38 @@ 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 { useEnvironment } from '@vegaprotocol/environment';
-import { isBrowserWalletInstalled } from '@vegaprotocol/wallet';
-import * as constants from '../constants';
+import { useLocalStorage } from '@vegaprotocol/react-helpers';
 import { WelcomeDialogContent } from './welcome-dialog-content';
-import { getConfig } from '@vegaprotocol/wallet';
 import { Links, Routes } from '../../pages/client-router';
 import { useGlobalStore } from '../../stores';
+import {
+  useGetOnboardingStep,
+  OnboardingStep,
+} from './use-get-onboarding-step';
+import * as constants from '../constants';
 
 export const WelcomeDialog = () => {
   const { VEGA_ENV } = useEnvironment();
-  const [onBoardingViewed, setOnboardingViewed] = useLocalStorage(
-    constants.ONBOARDING_VIEWED_KEY
-  );
+  const [onBoardingViewed] = useLocalStorage(constants.ONBOARDING_VIEWED_KEY);
+  const update = useGlobalStore((store) => store.update);
+  const dismissed = useGlobalStore((store) => store.onBoardingDismissed);
+  const currentStep = useGetOnboardingStep();
+
   const navigate = useNavigate();
   const isOnboardingDialogNeeded =
-    onBoardingViewed !== 'true' && !isBrowserWalletInstalled() && !getConfig();
+    onBoardingViewed !== 'true' &&
+    currentStep &&
+    currentStep < OnboardingStep.ONBOARDING_COMPLETE_STEP &&
+    !dismissed;
   const marketId = useGlobalStore((store) => store.marketId);
 
   const onClose = () => {
-    setOnboardingViewed('true');
     const link = marketId
       ? Links[Routes.MARKET](marketId)
       : Links[Routes.HOME]();
     navigate(link);
+    update({ onBoardingDismissed: true });
   };
   const title = (
     <span className="font-alpha calt" data-testid="welcome-title">

apps/trading/pages/_app.page.tsx

@@ -1,4 +1,4 @@
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import Head from 'next/head';
 import type { AppProps } from 'next/app';
 import { t } from '@vegaprotocol/i18n';
@@ -23,7 +23,7 @@ import {
   useNodeSwitcherStore,
 } from '@vegaprotocol/environment';
 import './styles.css';
-import { usePageTitleStore } from '../stores';
+import { useGlobalStore, usePageTitleStore } from '../stores';
 import DialogsContainer from './dialogs-container';
 import ToastsManager from './toasts-manager';
 import {
@@ -170,7 +170,8 @@ const PartyData = () => {
 
 const MaybeConnectEagerly = () => {
   const { VEGA_ENV, SENTRY_DSN } = useEnvironment();
-  useVegaEagerConnect(Connectors);
+  const update = useGlobalStore((store) => store.update);
+  const eagerConnecting = useVegaEagerConnect(Connectors);
   const [isTelemetryApproved] = useTelemetryApproval();
   useEthereumEagerConnect(
     isTelemetryApproved ? { dsn: SENTRY_DSN, env: VEGA_ENV } : {}
@@ -182,5 +183,8 @@ const MaybeConnectEagerly = () => {
   if (query && !pubKey) {
     connect(Connectors['view']);
   }
+  useEffect(() => {
+    update({ eagerConnecting });
+  }, [update, eagerConnecting]);
   return null;
 };

apps/trading/pages/_document.page.tsx

@@ -1,40 +1,10 @@
-import { Html, Head, Main, NextScript } from 'next/document';
+import { Head, Html, Main, NextScript } from 'next/document';
 
 export default function Document() {
   return (
-    <Html>
+    <>
       <Head>
         <link rel="stylesheet" href="https://static.vega.xyz/fonts.css" />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <meta charSet="utf-8" />
-        <link
-          rel="icon"
-          type="image/x-icon"
-          href="https://static.vega.xyz/favicon.ico"
-        />
-        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <meta name="theme-color" content="#000000" />
-        <meta name="description" content="Vega Protocol - VEGA Console" />
-        <meta name="og:type" content="website" />
-        <meta name="og:url" content="https://console.vega.xyz/" />
-        <meta name="og:title" content="Vega Protocol - Console" />
-        <meta name="og:site_name" content="Vega Protocol - Console" />
-        <meta name="og:image" content="https://static.vega.xyz/favicon.ico" />
-
-        <meta
-          name="twitter:card"
-          content="https://static.vega.xyz/favicon.ico"
-        />
-        <meta name="twitter:title" content="Vega Protocol - Console" />
-        <meta name="twitter:description" content="Vega Protocol - Console" />
-        <meta
-          name="twitter:image"
-          content="https://static.vega.xyz/favicon.ico"
-        />
-        <meta name="twitter:image:alt" content="VEGA logo" />
-        <meta name="twitter:site" content="@vegaprotocol" />
-
-        <meta name="description" content="Vega Protocol - Console" />
         <link
           rel="apple-touch-icon"
           content="https://static.vega.xyz/favicon.ico"
@@ -45,8 +15,6 @@ export default function Document() {
           as="font"
           type="font/woff2"
         />
-        {/* eslint-disable-next-line @next/next/no-css-tags */}
-        <link rel="stylesheet" href="/preloader.css" media="all" />
         <link
           rel="icon"
           type="image/x-icon"
@@ -54,10 +22,12 @@ export default function Document() {
         />
         <script src="/theme-setter.js" type="text/javascript" async />
       </Head>
-      <body className="bg-white dark:bg-vega-cdark-900 text-default font-alpha">
-        <Main />
-        <NextScript />
-      </body>
-    </Html>
+      <Html>
+        <body className="bg-white dark:bg-vega-cdark-900 text-default font-alpha">
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    </>
   );
 }

apps/trading/pages/index.page.tsx

@@ -1,3 +1,4 @@
+import Head from 'next/head';
 import { ClientRouter } from './client-router';
 
 /**
@@ -6,5 +7,60 @@ import { ClientRouter } from './client-router';
  * have to serve a static site via next export
  */
 export default function Index() {
-  return <ClientRouter />;
+  return (
+    <>
+      <Head>
+        <link rel="stylesheet" href="https://static.vega.xyz/fonts.css" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta charSet="utf-8" />
+        <link
+          rel="icon"
+          type="image/x-icon"
+          href="https://static.vega.xyz/favicon.ico"
+        />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <meta name="theme-color" content="#000000" />
+        <meta name="description" content="Vega Protocol - VEGA Console" />
+        <meta name="og:type" content="website" />
+        <meta name="og:url" content="https://console.vega.xyz/" />
+        <meta name="og:title" content="Vega Protocol - Console" />
+        <meta name="og:site_name" content="Vega Protocol - Console" />
+        <meta name="og:image" content="https://static.vega.xyz/favicon.ico" />
+
+        <meta
+          name="twitter:card"
+          content="https://static.vega.xyz/favicon.ico"
+        />
+        <meta name="twitter:title" content="Vega Protocol - Console" />
+        <meta name="twitter:description" content="Vega Protocol - Console" />
+        <meta
+          name="twitter:image"
+          content="https://static.vega.xyz/favicon.ico"
+        />
+        <meta name="twitter:image:alt" content="VEGA logo" />
+        <meta name="twitter:site" content="@vegaprotocol" />
+
+        <meta name="description" content="Vega Protocol - Console" />
+        <link
+          rel="apple-touch-icon"
+          content="https://static.vega.xyz/favicon.ico"
+        />
+        <link
+          rel="preload"
+          href="https://static.vega.xyz/AlphaLyrae-Medium.woff2"
+          as="font"
+          type="font/woff2"
+        />
+        {/* eslint-disable-next-line @next/next/no-css-tags */}
+        <link rel="stylesheet" href="/preloader.css" media="all" />
+        <link
+          rel="icon"
+          type="image/x-icon"
+          href="https://static.vega.xyz/favicon.ico"
+        />
+        <script src="/theme-setter.js" type="text/javascript" async />
+      </Head>
+      <ClientRouter />
+    </>
+  );
 }

apps/trading/pages/styles.css

@@ -209,3 +209,15 @@ html [data-theme='dark'] {
   box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
   background-color: #999;
 }
+
+/* Chrome, Safari, Edge, Opera */
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Firefox */
+input[type='number'] {
+  -moz-appearance: textfield;
+}

apps/trading/stores/global.ts

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

libs/accounts/src/lib/transfer-form.tsx

@@ -9,13 +9,13 @@ import {
 import { t } from '@vegaprotocol/i18n';
 import {
   Button,
-  FormGroup,
-  Input,
-  InputError,
-  RichSelect,
-  Select,
+  TradingFormGroup,
+  TradingInput,
+  TradingInputError,
+  TradingRichSelect,
+  TradingSelect,
   Tooltip,
-  Checkbox,
+  TradingCheckbox,
 } from '@vegaprotocol/ui-toolkit';
 import type { Transfer } from '@vegaprotocol/wallet';
 import { normalizeTransfer } from '@vegaprotocol/wallet';
@@ -130,12 +130,16 @@ export const TransferForm = ({
       className="text-sm"
       data-testid="transfer-form"
     >
-      <FormGroup label="Vega key" labelFor="to-address">
+      <TradingFormGroup label="Vega key" labelFor="to-address">
         <AddressField
           pubKeys={pubKeys}
           onChange={() => setValue('toAddress', '')}
           select={
-            <Select {...register('toAddress')} id="to-address" defaultValue="">
+            <TradingSelect
+              {...register('toAddress')}
+              id="to-address"
+              defaultValue=""
+            >
               <option value="" disabled={true}>
                 {t('Please select')}
               </option>
@@ -147,10 +151,10 @@ export const TransferForm = ({
                       {pk}
                     </option>
                   ))}
-            </Select>
+            </TradingSelect>
           }
           input={
-            <Input
+            <TradingInput
               // eslint-disable-next-line jsx-a11y/no-autofocus
               autoFocus={true} // focus input immediately after is shown
               id="to-address"
@@ -171,12 +175,12 @@ export const TransferForm = ({
           }
         />
         {errors.toAddress?.message && (
-          <InputError forInput="to-address">
+          <TradingInputError forInput="to-address">
             {errors.toAddress.message}
-          </InputError>
+          </TradingInputError>
         )}
-      </FormGroup>
-      <FormGroup label="Asset" labelFor="asset">
+      </TradingFormGroup>
+      <TradingFormGroup label="Asset" labelFor="asset">
         <Controller
           control={control}
           name="asset"
@@ -186,7 +190,7 @@ export const TransferForm = ({
             },
           }}
           render={({ field }) => (
-            <RichSelect
+            <TradingRichSelect
               data-testid="select-asset"
               id={field.name}
               name={field.name}
@@ -208,15 +212,17 @@ export const TransferForm = ({
                   }
                 />
               ))}
-            </RichSelect>
+            </TradingRichSelect>
           )}
         />
         {errors.asset?.message && (
-          <InputError forInput="asset">{errors.asset.message}</InputError>
+          <TradingInputError forInput="asset">
+            {errors.asset.message}
+          </TradingInputError>
         )}
-      </FormGroup>
-      <FormGroup label="Amount" labelFor="amount">
-        <Input
+      </TradingFormGroup>
+      <TradingFormGroup label="Amount" labelFor="amount">
+        <TradingInput
           id="amount"
           autoComplete="off"
           appendElement={
@@ -239,11 +245,13 @@ export const TransferForm = ({
           })}
         />
         {errors.amount?.message && (
-          <InputError forInput="amount">{errors.amount.message}</InputError>
+          <TradingInputError forInput="amount">
+            {errors.amount.message}
+          </TradingInputError>
         )}
-      </FormGroup>
+      </TradingFormGroup>
       <div className="mb-4">
-        <Checkbox
+        <TradingCheckbox
           name="include-transfer-fee"
           disabled={!transferAmount}
           label={

libs/announcements/package.json

@@ -1,4 +1,8 @@
 {
   "name": "@vegaprotocol/announcements",
-  "version": "0.0.2"
+  "version": "0.0.2",
+  "peerDependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  }
 }

libs/assets/src/lib/asset-option.tsx

@@ -1,4 +1,4 @@
-import { Option } from '@vegaprotocol/ui-toolkit';
+import { TradingOption } from '@vegaprotocol/ui-toolkit';
 import type { AssetFieldsFragment } from './__generated__/Asset';
 import classNames from 'classnames';
 import { t } from '@vegaprotocol/i18n';
@@ -28,7 +28,7 @@ export const Balance = ({
 
 export const AssetOption = ({ asset, balance }: AssetOptionProps) => {
   return (
-    <Option key={asset.id} value={asset.id}>
+    <TradingOption key={asset.id} value={asset.id}>
       <div className="flex flex-col items-start">
         <div className="flex flex-row align-baseline gap-2">
           <span>{asset.name}</span>{' '}
@@ -49,6 +49,6 @@ export const AssetOption = ({ asset, balance }: AssetOptionProps) => {
           </span>
         </div>
       </div>
-    </Option>
+    </TradingOption>
   );
 };

libs/datagrid/src/lib/filters/date-range-filter.tsx

@@ -15,7 +15,7 @@ import {
 } from 'date-fns';
 import { formatForInput } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import { InputError } from '@vegaprotocol/ui-toolkit';
+import { TradingInputError } from '@vegaprotocol/ui-toolkit';
 
 const defaultValue: Schema.DateRange = {};
 export interface DateRangeFilterProps extends IFilterParams {
@@ -195,7 +195,7 @@ export const DateRangeFilter = forwardRef(
     }, [value, props]);
 
     const notification = useMemo(() => {
-      const not = error ? <InputError>{error}</InputError> : null;
+      const not = error ? <TradingInputError>{error}</TradingInputError> : null;
       return (
         <div className="ag-filter-apply-panel flex min-h-[2rem]">{not}</div>
       );

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

@@ -1,39 +0,0 @@
-import type { Control } from 'react-hook-form';
-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';
-import type { OrderFormValues } from '../../hooks/use-form-values';
-
-export interface DealTicketAmountProps {
-  control: Control<OrderFormValues>;
-  type: Schema.OrderType;
-  marketData: StaticMarketData;
-  marketPrice?: string;
-  market: Market;
-  sizeError?: string;
-  priceError?: string;
-}
-
-export const DealTicketAmount = ({
-  type,
-  marketData,
-  marketPrice,
-  ...props
-}: DealTicketAmountProps) => {
-  switch (type) {
-    case Schema.OrderType.TYPE_MARKET:
-      return (
-        <DealTicketMarketAmount
-          {...props}
-          marketData={marketData}
-          marketPrice={marketPrice}
-        />
-      );
-    case Schema.OrderType.TYPE_LIMIT:
-      return <DealTicketLimitAmount {...props} />;
-    default: {
-      throw new Error('Invalid ticket type ' + type);
-    }
-  }
-};

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

@@ -1,114 +0,0 @@
-import { FormGroup, Input, InputError } from '@vegaprotocol/ui-toolkit';
-import { toDecimal, validateAmount } from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
-import type { DealTicketAmountProps } from './deal-ticket-amount';
-import { Controller } from 'react-hook-form';
-
-export type DealTicketLimitAmountProps = Omit<
-  DealTicketAmountProps,
-  'marketData' | 'type'
->;
-
-export const DealTicketLimitAmount = ({
-  control,
-  market,
-  sizeError,
-  priceError,
-}: DealTicketLimitAmountProps) => {
-  const priceStep = toDecimal(market?.decimalPlaces);
-  const sizeStep = toDecimal(market?.positionDecimalPlaces);
-  const quoteName = market.tradableInstrument.instrument.product.quoteName;
-
-  const renderError = () => {
-    if (sizeError) {
-      return (
-        <InputError testId="deal-ticket-error-message-size-limit">
-          {sizeError}
-        </InputError>
-      );
-    }
-
-    if (priceError) {
-      return (
-        <InputError testId="deal-ticket-error-message-price-limit">
-          {priceError}
-        </InputError>
-      );
-    }
-
-    return null;
-  };
-
-  return (
-    <div className="mb-2">
-      <div className="flex items-start gap-4">
-        <div className="flex-1">
-          <FormGroup
-            label={t('Size')}
-            labelFor="input-order-size-limit"
-            className="!mb-0"
-          >
-            <Controller
-              name="size"
-              control={control}
-              rules={{
-                required: t('You need to provide a size'),
-                min: {
-                  value: sizeStep,
-                  message: t('Size cannot be lower than ' + sizeStep),
-                },
-                validate: validateAmount(sizeStep, 'Size'),
-              }}
-              render={({ field }) => (
-                <Input
-                  id="input-order-size-limit"
-                  className="w-full"
-                  type="number"
-                  step={sizeStep}
-                  min={sizeStep}
-                  data-testid="order-size"
-                  onWheel={(e) => e.currentTarget.blur()}
-                  {...field}
-                />
-              )}
-            />
-          </FormGroup>
-        </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-0"
-          >
-            <Controller
-              name="price"
-              control={control}
-              rules={{
-                required: t('You need provide a price'),
-                min: {
-                  value: priceStep,
-                  message: t('Price cannot be lower than ' + priceStep),
-                },
-                validate: validateAmount(priceStep, 'Price'),
-              }}
-              render={({ field }) => (
-                <Input
-                  id="input-price-quote"
-                  className="w-full"
-                  type="number"
-                  step={priceStep}
-                  data-testid="order-price"
-                  onWheel={(e) => e.currentTarget.blur()}
-                  {...field}
-                />
-              )}
-            />
-          </FormGroup>
-        </div>
-      </div>
-      {renderError()}
-    </div>
-  );
-};

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

@@ -1,97 +0,0 @@
-import {
-  addDecimalsFormatNumber,
-  toDecimal,
-  validateAmount,
-} from '@vegaprotocol/utils';
-import { t } from '@vegaprotocol/i18n';
-import { Input, InputError, Tooltip } from '@vegaprotocol/ui-toolkit';
-import { isMarketInAuction } from '@vegaprotocol/markets';
-import type { DealTicketAmountProps } from './deal-ticket-amount';
-import { Controller } from 'react-hook-form';
-import classNames from 'classnames';
-
-export type DealTicketMarketAmountProps = Omit<DealTicketAmountProps, 'type'>;
-
-export const DealTicketMarketAmount = ({
-  control,
-  market,
-  marketData,
-  marketPrice,
-  sizeError,
-}: DealTicketMarketAmountProps) => {
-  const quoteName = market.tradableInstrument.instrument.product.quoteName;
-  const sizeStep = toDecimal(market?.positionDecimalPlaces);
-  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-start gap-4">
-        <div className="flex-1">
-          <div className="mb-2 text-sm">{t('Size')}</div>
-          <Controller
-            name="size"
-            control={control}
-            rules={{
-              required: t('You need to provide a size'),
-              min: {
-                value: sizeStep,
-                message: t('Size cannot be lower than ' + sizeStep),
-              },
-              validate: validateAmount(sizeStep, 'Size'),
-            }}
-            render={({ field }) => (
-              <Input
-                id="input-order-size-market"
-                className="w-full"
-                type="number"
-                step={sizeStep}
-                min={sizeStep}
-                onWheel={(e) => e.currentTarget.blur()}
-                data-testid="order-size"
-                {...field}
-              />
-            )}
-          />
-        </div>
-        <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 && (
-        <InputError
-          intent="danger"
-          testId="deal-ticket-error-message-size-market"
-        >
-          {sizeError}
-        </InputError>
-      )}
-    </div>
-  );
-};

libs/deal-ticket/src/components/deal-ticket/deal-ticket-size-iceberg.tsx

@@ -4,9 +4,9 @@ import type { OrderFormValues } from '../../hooks/use-form-values';
 import { toDecimal, validateAmount } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import {
-  FormGroup,
-  Input,
-  InputError,
+  TradingFormGroup,
+  TradingInput,
+  TradingInputError,
   Tooltip,
 } from '@vegaprotocol/ui-toolkit';
 
@@ -32,9 +32,9 @@ export const DealTicketSizeIceberg = ({
   const renderPeakSizeError = () => {
     if (peakSizeError) {
       return (
-        <InputError testId="deal-ticket-peak-error-message-size-limit">
+        <TradingInputError testId="deal-ticket-peak-error-message-size-limit">
           {peakSizeError}
-        </InputError>
+        </TradingInputError>
       );
     }
 
@@ -44,9 +44,9 @@ export const DealTicketSizeIceberg = ({
   const renderMinimumSizeError = () => {
     if (minimumVisibleSizeError) {
       return (
-        <InputError testId="deal-ticket-minimum-error-message-size-limit">
+        <TradingInputError testId="deal-ticket-minimum-error-message-size-limit">
           {minimumVisibleSizeError}
-        </InputError>
+        </TradingInputError>
       );
     }
 
@@ -57,7 +57,7 @@ export const DealTicketSizeIceberg = ({
     <div className="mb-2">
       <div className="flex items-center gap-4">
         <div className="flex-1">
-          <FormGroup
+          <TradingFormGroup
             label={
               <Tooltip
                 description={
@@ -93,7 +93,7 @@ export const DealTicketSizeIceberg = ({
                 validate: validateAmount(sizeStep, 'peakSize'),
               }}
               render={({ field }) => (
-                <Input
+                <TradingInput
                   id="input-order-peak-size"
                   className="w-full"
                   type="number"
@@ -106,14 +106,14 @@ export const DealTicketSizeIceberg = ({
                 />
               )}
             />
-          </FormGroup>
+          </TradingFormGroup>
         </div>
         <div className="flex-0 items-center">
           <div className="flex"></div>
           <div className="flex"></div>
         </div>
         <div className="flex-1">
-          <FormGroup
+          <TradingFormGroup
             label={
               <Tooltip
                 description={
@@ -151,7 +151,7 @@ export const DealTicketSizeIceberg = ({
                 validate: validateAmount(sizeStep, 'minimumVisibleSize'),
               }}
               render={({ field }) => (
-                <Input
+                <TradingInput
                   id="input-order-minimum-size"
                   className="w-full"
                   type="number"
@@ -164,7 +164,7 @@ export const DealTicketSizeIceberg = ({
                 />
               )}
             />
-          </FormGroup>
+          </TradingFormGroup>
         </div>
       </div>
       {renderPeakSizeError()}

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

@@ -72,6 +72,7 @@ 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 triggerPriceWarningMessage = 'stop-order-warning-message-trigger-price';
 const triggerTrailingPercentOffsetErrorMessage =
   'stop-order-error-message-trigger-trailing-percent-offset';
 
@@ -114,14 +115,6 @@ describe('StopOrder', () => {
     });
   });
 
-  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,
@@ -203,8 +196,8 @@ describe('StopOrder', () => {
 
     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.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();
@@ -249,10 +242,17 @@ describe('StopOrder', () => {
     await userEvent.type(screen.getByTestId(triggerPriceInput), '0.001');
     expect(screen.getByTestId(triggerPriceErrorMessage)).toBeInTheDocument();
 
-    // clear and fill using valid value
+    // clear and fill using value causing immediate trigger
     await userEvent.clear(screen.getByTestId(triggerPriceInput));
     await userEvent.type(screen.getByTestId(triggerPriceInput), '0.01');
     expect(screen.queryByTestId(triggerPriceErrorMessage)).toBeNull();
+    expect(
+      screen.queryByTestId(triggerPriceWarningMessage)
+    ).toBeInTheDocument();
+
+    // change to correct value
+    await userEvent.type(screen.getByTestId(triggerPriceInput), '2');
+    expect(screen.queryByTestId(triggerPriceWarningMessage)).toBeNull();
   });
 
   it('validates trigger trailing percentage offset field', async () => {

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

@@ -1,22 +1,18 @@
 import { useRef, useCallback, useEffect } from 'react';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import type { StopOrdersSubmission } from '@vegaprotocol/wallet';
-import {
-  formatNumber,
-  removeDecimal,
-  toDecimal,
-  validateAmount,
-} from '@vegaprotocol/utils';
+import { removeDecimal, toDecimal, validateAmount } from '@vegaprotocol/utils';
+import type { Control, UseFormWatch } from 'react-hook-form';
 import { useForm, Controller, useController } from 'react-hook-form';
 import * as Schema from '@vegaprotocol/types';
 import {
-  Radio,
-  RadioGroup,
-  Input,
-  Checkbox,
-  FormGroup,
-  InputError,
-  Select,
+  TradingRadio as Radio,
+  TradingRadioGroup as RadioGroup,
+  TradingInput as Input,
+  TradingCheckbox as Checkbox,
+  TradingFormGroup as FormGroup,
+  TradingInputError as InputError,
+  TradingSelect as Select,
   Tooltip,
 } from '@vegaprotocol/ui-toolkit';
 import { getDerivedPrice, type Market } from '@vegaprotocol/markets';
@@ -49,6 +45,8 @@ export interface StopOrderProps {
   submit: (order: StopOrdersSubmission) => void;
 }
 
+const trailingPercentOffsetStep = '0.1';
+
 const getDefaultValues = (
   type: Schema.OrderType,
   storedValues?: Partial<StopOrderFormValues>
@@ -62,9 +60,425 @@ const getDefaultValues = (
   expire: false,
   expiryStrategy: Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_SUBMIT,
   size: '0',
+  ocoType: type,
+  ocoTimeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_FOK,
+  ocoTriggerType: 'price',
+  ocoSize: '0',
   ...storedValues,
 });
 
+const Trigger = ({
+  control,
+  watch,
+  priceStep,
+  assetSymbol,
+  oco,
+  marketPrice,
+  decimalPlaces,
+}: {
+  control: Control<StopOrderFormValues>;
+  watch: UseFormWatch<StopOrderFormValues>;
+  priceStep: string;
+  assetSymbol: string;
+  oco?: boolean;
+  marketPrice?: string | null;
+  decimalPlaces: number;
+}) => {
+  const triggerType = watch(oco ? 'ocoTriggerType' : 'triggerType');
+  const triggerDirection = watch('triggerDirection');
+  const isPriceTrigger = triggerType === 'price';
+  return (
+    <FormGroup label={t('Trigger')} labelFor="">
+      <Controller
+        name="triggerDirection"
+        control={control}
+        render={({ field }) => {
+          const { value, onChange } = field;
+          return (
+            <RadioGroup
+              name="triggerDirection"
+              onChange={onChange}
+              value={value}
+              orientation="horizontal"
+              className="mb-2"
+            >
+              <Radio
+                value={
+                  oco
+                    ? Schema.StopOrderTriggerDirection
+                        .TRIGGER_DIRECTION_FALLS_BELOW
+                    : Schema.StopOrderTriggerDirection
+                        .TRIGGER_DIRECTION_RISES_ABOVE
+                }
+                id={`triggerDirection-risesAbove${oco ? '-oco' : ''}`}
+                label={'Rises above'}
+              />
+              <Radio
+                value={
+                  !oco
+                    ? Schema.StopOrderTriggerDirection
+                        .TRIGGER_DIRECTION_FALLS_BELOW
+                    : Schema.StopOrderTriggerDirection
+                        .TRIGGER_DIRECTION_RISES_ABOVE
+                }
+                id={`triggerDirection-fallsBelow${oco ? '-oco' : ''}`}
+                label={'Falls below'}
+              />
+            </RadioGroup>
+          );
+        }}
+      />
+      {isPriceTrigger && (
+        <div className="mb-2">
+          <Controller
+            name={oco ? 'ocoTriggerPrice' : 'triggerPrice'}
+            rules={{
+              required: t('You need provide a price'),
+              min: {
+                value: priceStep,
+                message: t('Price cannot be lower than ' + priceStep),
+              },
+              validate: validateAmount(priceStep, 'Price'),
+            }}
+            control={control}
+            render={({ field, fieldState }) => {
+              const { value, ...props } = field;
+              let triggerWarning = false;
+
+              if (marketPrice && value) {
+                const condition =
+                  (!oco &&
+                    triggerDirection ===
+                      Schema.StopOrderTriggerDirection
+                        .TRIGGER_DIRECTION_RISES_ABOVE) ||
+                  (oco &&
+                    triggerDirection ===
+                      Schema.StopOrderTriggerDirection
+                        .TRIGGER_DIRECTION_FALLS_BELOW)
+                    ? '>'
+                    : '<';
+                const diff =
+                  BigInt(marketPrice) -
+                  BigInt(removeDecimal(value, decimalPlaces));
+                if (
+                  (condition === '>' && diff > 0) ||
+                  (condition === '<' && diff < 0)
+                ) {
+                  triggerWarning = true;
+                }
+              }
+              return (
+                <>
+                  <div className="mb-2">
+                    <Input
+                      data-testid={`triggerPrice${oco ? '-oco' : ''}`}
+                      type="number"
+                      step={priceStep}
+                      appendElement={assetSymbol}
+                      value={value || ''}
+                      hasError={!!fieldState.error}
+                      {...props}
+                    />
+                  </div>
+                  {fieldState.error && (
+                    <InputError
+                      testId={`stop-order-error-message-trigger-price${
+                        oco ? '-oco' : ''
+                      }`}
+                    >
+                      {fieldState.error.message}
+                    </InputError>
+                  )}
+                  {!fieldState.error && triggerWarning && (
+                    <InputError
+                      intent="warning"
+                      testId={`stop-order-warning-message-trigger-price${
+                        oco ? '-oco' : ''
+                      }`}
+                    >
+                      {t('Stop order will be triggered immediately')}
+                    </InputError>
+                  )}
+                </>
+              );
+            }}
+          />
+        </div>
+      )}
+      {!isPriceTrigger && (
+        <div className="mb-2">
+          <Controller
+            name={
+              oco
+                ? 'ocoTriggerTrailingPercentOffset'
+                : 'triggerTrailingPercentOffset'
+            }
+            control={control}
+            rules={{
+              required: t('You need provide a trailing percent offset'),
+              min: {
+                value: trailingPercentOffsetStep,
+                message: t(
+                  'Trailing percent offset cannot be lower than ' +
+                    trailingPercentOffsetStep
+                ),
+              },
+              max: {
+                value: '99.9',
+                message: t(
+                  'Trailing percent offset cannot be higher than 99.9'
+                ),
+              },
+              validate: validateAmount(
+                trailingPercentOffsetStep,
+                'Trailing percentage offset'
+              ),
+            }}
+            render={({ field, fieldState }) => {
+              const { value, ...props } = field;
+              return (
+                <>
+                  <div className="mb-2">
+                    <Input
+                      type="number"
+                      step={trailingPercentOffsetStep}
+                      appendElement="%"
+                      data-testid={`triggerTrailingPercentOffset${
+                        oco ? '-oco' : ''
+                      }`}
+                      value={value || ''}
+                      hasError={!!fieldState.error}
+                      {...props}
+                    />
+                  </div>
+                  {fieldState.error && (
+                    <InputError
+                      testId={`stop-order-error-message-trigger-trailing-percent-offset${
+                        oco ? '-oco' : ''
+                      }`}
+                    >
+                      {fieldState.error.message}
+                    </InputError>
+                  )}
+                </>
+              );
+            }}
+          />
+        </div>
+      )}
+      <Controller
+        name={oco ? 'ocoTriggerType' : 'triggerType'}
+        control={control}
+        rules={{
+          deps: oco
+            ? ['ocoTriggerTrailingPercentOffset', 'ocoTriggerPrice']
+            : ['triggerTrailingPercentOffset', 'triggerPrice'],
+        }}
+        render={({ field }) => {
+          const { onChange, value } = field;
+          return (
+            <RadioGroup
+              onChange={onChange}
+              value={value}
+              orientation="horizontal"
+            >
+              <Radio
+                value="price"
+                id={`triggerType-price${oco ? '-oco' : ''}`}
+                label={'Price'}
+              />
+              <Radio
+                value="trailingPercentOffset"
+                id={`triggerType-trailingPercentOffset${oco ? '-oco' : ''}`}
+                label={'Trailing Percent Offset'}
+              />
+            </RadioGroup>
+          );
+        }}
+      />
+    </FormGroup>
+  );
+};
+
+const Size = ({
+  control,
+  sizeStep,
+  oco,
+}: {
+  control: Control<StopOrderFormValues>;
+  sizeStep: string;
+  oco?: boolean;
+}) => {
+  return (
+    <Controller
+      name={oco ? 'ocoSize' : 'size'}
+      control={control}
+      rules={{
+        required: t('You need to provide a size'),
+        min: {
+          value: sizeStep,
+          message: t('Size cannot be lower than ' + sizeStep),
+        },
+        validate: validateAmount(sizeStep, 'Size'),
+      }}
+      render={({ field, fieldState }) => {
+        const { value, ...props } = field;
+        const id = `order-size${oco ? '-oco' : ''}`;
+        return (
+          <div className="mb-4">
+            <FormGroup labelFor={id} label={t(`Size`)} compact>
+              <Input
+                id={id}
+                className="w-full"
+                type="number"
+                step={sizeStep}
+                min={sizeStep}
+                onWheel={(e) => e.currentTarget.blur()}
+                data-testid={id}
+                value={value || ''}
+                hasError={!!fieldState.error}
+                {...props}
+              />
+            </FormGroup>
+            {fieldState.error && (
+              <InputError
+                testId={`stop-order-error-message-size${oco ? '-oco' : ''}`}
+              >
+                {fieldState.error.message}
+              </InputError>
+            )}
+          </div>
+        );
+      }}
+    />
+  );
+};
+
+const Price = ({
+  control,
+  watch,
+  priceStep,
+  quoteName,
+  oco,
+}: {
+  control: Control<StopOrderFormValues>;
+  watch: UseFormWatch<StopOrderFormValues>;
+  priceStep: string;
+  quoteName: string;
+  oco?: boolean;
+}) => {
+  if (watch(oco ? 'ocoType' : 'type') === Schema.OrderType.TYPE_MARKET) {
+    return null;
+  }
+  return (
+    <Controller
+      name={oco ? 'ocoPrice' : 'price'}
+      control={control}
+      rules={{
+        deps: 'type',
+        required: t('You need provide a price'),
+        min: {
+          value: priceStep,
+          message: t('Price cannot be lower than ' + priceStep),
+        },
+        validate: validateAmount(priceStep, 'Price'),
+      }}
+      render={({ field, fieldState }) => {
+        const { value, ...props } = field;
+        const id = `order-price${oco ? '-oco' : ''}`;
+        return (
+          <div className="mb-4">
+            <FormGroup
+              labelFor={id}
+              label={t(`Price (${quoteName})`)}
+              compact={true}
+            >
+              <Input
+                id={id}
+                className="w-full"
+                type="number"
+                step={priceStep}
+                data-testid={id}
+                onWheel={(e) => e.currentTarget.blur()}
+                value={value || ''}
+                hasError={!!fieldState.error}
+                {...props}
+              />
+            </FormGroup>
+            {fieldState.error && (
+              <InputError
+                testId={`stop-order-error-message-price${oco ? '-oco' : ''}`}
+              >
+                {fieldState.error.message}
+              </InputError>
+            )}
+          </div>
+        );
+      }}
+    />
+  );
+};
+
+const TimeInForce = ({
+  control,
+  oco,
+}: {
+  control: Control<StopOrderFormValues>;
+  oco?: boolean;
+}) => (
+  <Controller
+    name="timeInForce"
+    control={control}
+    render={({ field, fieldState }) => {
+      const id = `select-time-in-force${oco ? '-oco' : ''}`;
+      return (
+        <div className="mb-2">
+          <FormGroup label={t('Time in force')} labelFor={id} compact={true}>
+            <Select
+              id={id}
+              className="w-full"
+              data-testid="order-tif"
+              hasError={!!fieldState.error}
+              {...field}
+            >
+              <option
+                key={Schema.OrderTimeInForce.TIME_IN_FORCE_IOC}
+                value={Schema.OrderTimeInForce.TIME_IN_FORCE_IOC}
+              >
+                {timeInForceLabel(Schema.OrderTimeInForce.TIME_IN_FORCE_IOC)}
+              </option>
+              <option
+                key={Schema.OrderTimeInForce.TIME_IN_FORCE_FOK}
+                value={Schema.OrderTimeInForce.TIME_IN_FORCE_FOK}
+              >
+                {timeInForceLabel(Schema.OrderTimeInForce.TIME_IN_FORCE_FOK)}
+              </option>
+            </Select>
+          </FormGroup>
+          {fieldState.error && (
+            <InputError testId={`stop-error-message-tif${oco ? '-oco' : ''}`}>
+              {fieldState.error.message}
+            </InputError>
+          )}
+        </div>
+      );
+    }}
+  />
+);
+
+const ReduceOnly = () => (
+  <Checkbox
+    name="reduce-only"
+    checked={true}
+    disabled={true}
+    label={
+      <Tooltip description={<span>{t(REDUCE_ONLY_TOOLTIP)}</span>}>
+        <>{t('Reduce only')}</>
+      </Tooltip>
+    }
+  />
+);
+
 export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
   const { pubKey, isReadOnly } = useVegaWallet();
   const setType = useDealTicketFormValues((state) => state.setType);
@@ -107,6 +521,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
   const timeInForce = watch('timeInForce');
   const rawPrice = watch('price');
   const rawSize = watch('size');
+  const oco = watch('oco');
 
   useEffect(() => {
     const size = storedFormValues?.[dealTicketType]?.size;
@@ -155,12 +570,6 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
 
   const sizeStep = toDecimal(market?.positionDecimalPlaces);
   const priceStep = toDecimal(market?.decimalPlaces);
-  const trailingPercentOffsetStep = '0.1';
-
-  const priceFormatted =
-    isPriceTrigger && triggerPrice
-      ? formatNumber(triggerPrice, market.decimalPlaces)
-      : undefined;
 
   useController({
     name: 'type',
@@ -199,286 +608,110 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
           <SideSelector value={field.value} onValueChange={field.onChange} />
         )}
       />
-      <FormGroup label={t('Trigger')} compact={true} labelFor="">
+      <Trigger
+        control={control}
+        watch={watch}
+        priceStep={priceStep}
+        assetSymbol={asset.symbol}
+        marketPrice={marketPrice}
+        decimalPlaces={market.decimalPlaces}
+      />
+      <hr className="mb-4 border-vega-clight-500 dark:border-vega-cdark-500" />
+      <Price
+        control={control}
+        watch={watch}
+        priceStep={priceStep}
+        quoteName={quoteName}
+      />
+      <Size control={control} sizeStep={sizeStep} />
+      <TimeInForce control={control} />
+      <div className="flex gap-2 pb-3 justify-end">
+        <ReduceOnly />
+      </div>
+      <hr className="mb-4 border-vega-clight-500 dark:border-vega-cdark-500" />
+      <div className="flex gap-2 pb-2 justify-between">
         <Controller
-          name="triggerDirection"
+          name="oco"
           control={control}
           render={({ field }) => {
             const { onChange, value } = field;
             return (
-              <RadioGroup
-                name="triggerDirection"
-                onChange={onChange}
-                value={value}
-                orientation="horizontal"
-                className="mb-2"
-              >
-                <Radio
-                  value={
-                    Schema.StopOrderTriggerDirection
-                      .TRIGGER_DIRECTION_RISES_ABOVE
-                  }
-                  id="triggerDirection-risesAbove"
-                  label={'Rises above'}
-                />
-                <Radio
-                  value={
-                    Schema.StopOrderTriggerDirection
-                      .TRIGGER_DIRECTION_FALLS_BELOW
-                  }
-                  id="triggerDirection-fallsBelow"
-                  label={'Falls below'}
-                />
-              </RadioGroup>
+              <Checkbox
+                onCheckedChange={(state) => {
+                  onChange(state);
+                  setValue(
+                    'expiryStrategy',
+                    Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_CANCELS
+                  );
+                }}
+                checked={value}
+                name="oco"
+                label={
+                  <Tooltip
+                    description={<span>{t('One cancels another')}</span>}
+                  >
+                    <>{t('OCO')}</>
+                  </Tooltip>
+                }
+              />
             );
           }}
         />
-        {isPriceTrigger && (
-          <div className="mb-2">
+      </div>
+      {oco && (
+        <>
+          <FormGroup label={t('Type')} labelFor="">
             <Controller
-              name="triggerPrice"
-              rules={{
-                required: t('You need provide a price'),
-                min: {
-                  value: priceStep,
-                  message: t('Price cannot be lower than ' + priceStep),
-                },
-                validate: validateAmount(priceStep, 'Price'),
-              }}
+              name={`ocoType`}
               control={control}
               render={({ field }) => {
-                const { value, ...props } = field;
+                const { onChange, value } = field;
                 return (
-                  <div className="mb-2">
-                    <Input
-                      data-testid="triggerPrice"
-                      type="number"
-                      step={priceStep}
-                      appendElement={asset.symbol}
-                      value={value || ''}
-                      {...props}
+                  <RadioGroup
+                    onChange={onChange}
+                    value={value}
+                    orientation="horizontal"
+                  >
+                    <Radio
+                      value={Schema.OrderType.TYPE_MARKET}
+                      id={`ocoTypeMarket`}
+                      label={'Market'}
                     />
-                  </div>
-                );
-              }}
-            />
-            {errors.triggerPrice && (
-              <InputError testId="stop-order-error-message-trigger-price">
-                {errors.triggerPrice.message}
-              </InputError>
-            )}
-          </div>
-        )}
-        {!isPriceTrigger && (
-          <div className="mb-2">
-            <Controller
-              name="triggerTrailingPercentOffset"
-              control={control}
-              rules={{
-                required: t('You need provide a trailing percent offset'),
-                min: {
-                  value: trailingPercentOffsetStep,
-                  message: t(
-                    'Trailing percent offset cannot be lower than ' +
-                      trailingPercentOffsetStep
-                  ),
-                },
-                max: {
-                  value: '99.9',
-                  message: t(
-                    'Trailing percent offset cannot be higher than 99.9'
-                  ),
-                },
-                validate: validateAmount(
-                  trailingPercentOffsetStep,
-                  'Trailing percentage offset'
-                ),
-              }}
-              render={({ field }) => {
-                const { value, ...props } = field;
-                return (
-                  <div className="mb-2">
-                    <Input
-                      type="number"
-                      step={trailingPercentOffsetStep}
-                      appendElement="%"
-                      data-testid="triggerTrailingPercentOffset"
-                      value={value || ''}
-                      {...props}
+                    <Radio
+                      value={Schema.OrderType.TYPE_LIMIT}
+                      id={`ocoTypeLimit`}
+                      label={'Limit'}
                     />
-                  </div>
-                );
-              }}
-            />
-            {errors.triggerTrailingPercentOffset && (
-              <InputError testId="stop-order-error-message-trigger-trailing-percent-offset">
-                {errors.triggerTrailingPercentOffset.message}
-              </InputError>
-            )}
-          </div>
-        )}
-        <Controller
-          name="triggerType"
-          control={control}
-          rules={{ deps: ['triggerTrailingPercentOffset', 'triggerPrice'] }}
-          render={({ field }) => {
-            const { onChange, value } = field;
-            return (
-              <RadioGroup
-                onChange={onChange}
-                value={value}
-                orientation="horizontal"
-              >
-                <Radio value="price" id="triggerType-price" label={'Price'} />
-                <Radio
-                  value="trailingPercentOffset"
-                  id="triggerType-trailingPercentOffset"
-                  label={'Trailing Percent Offset'}
-                />
-              </RadioGroup>
-            );
-          }}
-        />
-      </FormGroup>
-      <div className="mb-2">
-        <div className="flex items-start gap-4">
-          <FormGroup
-            labelFor="input-price-quote"
-            label={t(`Size`)}
-            className="!mb-0 flex-1"
-          >
-            <Controller
-              name="size"
-              control={control}
-              rules={{
-                required: t('You need to provide a size'),
-                min: {
-                  value: sizeStep,
-                  message: t('Size cannot be lower than ' + sizeStep),
-                },
-                validate: validateAmount(sizeStep, 'Size'),
-              }}
-              render={({ field }) => {
-                const { value, ...props } = field;
-                return (
-                  <Input
-                    id="order-size"
-                    className="w-full"
-                    type="number"
-                    step={sizeStep}
-                    min={sizeStep}
-                    onWheel={(e) => e.currentTarget.blur()}
-                    data-testid="order-size"
-                    value={value || ''}
-                    {...props}
-                  />
+                  </RadioGroup>
                 );
               }}
             />
           </FormGroup>
-          <div className="pt-7 leading-10">@</div>
-          <div className="flex-1">
-            {type === Schema.OrderType.TYPE_LIMIT ? (
-              <FormGroup
-                labelFor="input-price-quote"
-                label={t(`Price (${quoteName})`)}
-                labelAlign="right"
-                className="!mb-0"
-              >
-                <Controller
-                  name="price"
-                  control={control}
-                  rules={{
-                    deps: 'type',
-                    required: t('You need provide a price'),
-                    min: {
-                      value: priceStep,
-                      message: t('Price cannot be lower than ' + priceStep),
-                    },
-                    validate: validateAmount(priceStep, 'Price'),
-                  }}
-                  render={({ field }) => {
-                    const { value, ...props } = field;
-                    return (
-                      <Input
-                        id="input-price-quote"
-                        className="w-full"
-                        type="number"
-                        step={priceStep}
-                        data-testid="order-price"
-                        onWheel={(e) => e.currentTarget.blur()}
-                        value={value || ''}
-                        {...props}
-                      />
-                    );
-                  }}
-                />
-              </FormGroup>
-            ) : (
-              <div
-                className="text-sm text-right pt-7 leading-10"
-                data-testid="price"
-              >
-                {priceFormatted && quoteName
-                  ? `~${priceFormatted} ${quoteName}`
-                  : '-'}
-              </div>
-            )}
-          </div>
-        </div>
-        {errors.size && (
-          <InputError testId="stop-order-error-message-size">
-            {errors.size.message}
-          </InputError>
-        )}
-
-        {!errors.size &&
-          errors.price &&
-          type === Schema.OrderType.TYPE_LIMIT && (
-            <InputError testId="stop-order-error-message-price">
-              {errors.price.message}
-            </InputError>
-          )}
-      </div>
-      <div className="mb-2">
-        <FormGroup
-          label={t('Time in force')}
-          labelFor="select-time-in-force"
-          compact={true}
-        >
-          <Controller
-            name="timeInForce"
+          <Trigger
             control={control}
-            render={({ field }) => (
-              <Select
-                id="select-time-in-force"
-                className="w-full"
-                data-testid="order-tif"
-                {...field}
-              >
-                <option
-                  key={Schema.OrderTimeInForce.TIME_IN_FORCE_IOC}
-                  value={Schema.OrderTimeInForce.TIME_IN_FORCE_IOC}
-                >
-                  {timeInForceLabel(Schema.OrderTimeInForce.TIME_IN_FORCE_IOC)}
-                </option>
-                <option
-                  key={Schema.OrderTimeInForce.TIME_IN_FORCE_FOK}
-                  value={Schema.OrderTimeInForce.TIME_IN_FORCE_FOK}
-                >
-                  {timeInForceLabel(Schema.OrderTimeInForce.TIME_IN_FORCE_FOK)}
-                </option>
-              </Select>
-            )}
+            watch={watch}
+            priceStep={priceStep}
+            assetSymbol={asset.symbol}
+            marketPrice={marketPrice}
+            decimalPlaces={market.decimalPlaces}
+            oco
           />
-        </FormGroup>
-        {errors.timeInForce && (
-          <InputError testId="stop-error-message-tif">
-            {errors.timeInForce.message}
-          </InputError>
-        )}
-      </div>
-      <div className="flex gap-2 pb-2 justify-between">
+          <hr className="mb-2 border-vega-clight-500 dark:border-vega-cdark-500" />
+          <Price
+            control={control}
+            watch={watch}
+            priceStep={priceStep}
+            quoteName={quoteName}
+            oco
+          />
+          <Size control={control} sizeStep={sizeStep} oco />
+          <TimeInForce control={control} oco />
+          <div className="flex gap-2 mb-2 justify-end">
+            <ReduceOnly />
+          </div>
+        </>
+      )}
+      <div className="mb-2">
         <Controller
           name="expire"
           control={control}
@@ -489,36 +722,28 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
                 onCheckedChange={onCheckedChange}
                 checked={value}
                 name="expire"
-                label={<span className="text-xs">{t('Expire')}</span>}
+                label={t('Expire')}
               />
             );
           }}
         />
-        <Checkbox
-          name="reduce-only"
-          checked={true}
-          disabled={true}
-          label={
-            <Tooltip description={<span>{t(REDUCE_ONLY_TOOLTIP)}</span>}>
-              <span className="text-xs">{t('Reduce only')}</span>
-            </Tooltip>
-          }
-        />
       </div>
       {expire && (
         <>
-          <FormGroup
-            label={t('Strategy')}
-            labelFor="expiryStrategy"
-            compact={true}
-          >
+          <FormGroup label={t('Strategy')} labelFor="expiryStrategy">
             <Controller
               name="expiryStrategy"
               control={control}
               render={({ field }) => {
+                const { onChange, value } = field;
                 return (
-                  <RadioGroup orientation="horizontal" {...field}>
+                  <RadioGroup
+                    onChange={onChange}
+                    value={value}
+                    orientation="horizontal"
+                  >
                     <Radio
+                      disabled={oco}
                       value={
                         Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_SUBMIT
                       }
@@ -537,7 +762,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
               }}
             />
           </FormGroup>
-          <div className="mb-2">
+          <div className="mb-4">
             <Controller
               name="expiresAt"
               control={control}

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

@@ -7,7 +7,6 @@ import { DealTicket } from './deal-ticket';
 import * as Schema from '@vegaprotocol/types';
 import type { MockedResponse } from '@apollo/client/testing';
 import { MockedProvider } from '@apollo/client/testing';
-import { addDecimal } from '@vegaprotocol/utils';
 import type { OrdersQuery } from '@vegaprotocol/orders';
 import {
   DealTicketType,
@@ -135,20 +134,6 @@ describe('DealTicket', () => {
     );
   });
 
-  it('should display last price for market type order', () => {
-    render(generateJsx());
-    act(() => {
-      screen.getByTestId('order-type-Market').click();
-    });
-    // Assert last price is shown
-    expect(screen.getByTestId('last-price')).toHaveTextContent(
-      // eslint-disable-next-line
-      `~${addDecimal(marketPrice, market.decimalPlaces)} ${
-        market.tradableInstrument.instrument.product.quoteName
-      }`
-    );
-  });
-
   it('should use local storage state for initial values', () => {
     const expectedOrder = {
       marketId: market.id,

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

@@ -3,7 +3,6 @@ import * as Schema from '@vegaprotocol/types';
 import type { FormEventHandler } from 'react';
 import { memo, useCallback, useEffect, useRef, useMemo } from 'react';
 import { Controller, useController, useForm } from 'react-hook-form';
-import { DealTicketAmount } from './deal-ticket-amount';
 import { DealTicketButton } from './deal-ticket-button';
 import {
   DealTicketFeeDetails,
@@ -17,8 +16,10 @@ import type { OrderSubmission } from '@vegaprotocol/wallet';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { mapFormValuesToOrderSubmission } from '../../utils/map-form-values-to-submission';
 import {
-  Checkbox,
-  InputError,
+  TradingInput as Input,
+  TradingCheckbox as Checkbox,
+  TradingFormGroup as FormGroup,
+  TradingInputError as InputError,
   Intent,
   Notification,
   Tooltip,
@@ -28,7 +29,12 @@ import {
   useEstimatePositionQuery,
   useOpenVolume,
 } from '@vegaprotocol/positions';
-import { toBigNum, removeDecimal } from '@vegaprotocol/utils';
+import {
+  toBigNum,
+  removeDecimal,
+  validateAmount,
+  toDecimal,
+} from '@vegaprotocol/utils';
 import { activeOrdersProvider } from '@vegaprotocol/orders';
 import { getDerivedPrice } from '@vegaprotocol/markets';
 import type { OrderInfo } from '@vegaprotocol/types';
@@ -332,6 +338,10 @@ export const DealTicket = ({
     },
   });
 
+  const priceStep = toDecimal(market?.decimalPlaces);
+  const sizeStep = toDecimal(market?.positionDecimalPlaces);
+  const quoteName = market.tradableInstrument.instrument.product.quoteName;
+
   return (
     <form
       onSubmit={
@@ -366,15 +376,82 @@ export const DealTicket = ({
           <SideSelector value={field.value} onValueChange={field.onChange} />
         )}
       />
-      <DealTicketAmount
-        type={type}
+
+      <Controller
+        name="size"
         control={control}
-        market={market}
-        marketData={marketData}
-        marketPrice={marketPrice || undefined}
-        sizeError={errors.size?.message}
-        priceError={errors.price?.message}
+        rules={{
+          required: t('You need to provide a size'),
+          min: {
+            value: sizeStep,
+            message: t('Size cannot be lower than ' + sizeStep),
+          },
+          validate: validateAmount(sizeStep, 'Size'),
+        }}
+        render={({ field, fieldState }) => (
+          <div className="mb-4">
+            <FormGroup
+              label={t('Size')}
+              labelFor="input-order-size-limit"
+              compact
+            >
+              <Input
+                id="input-order-size-limit"
+                className="w-full"
+                type="number"
+                step={sizeStep}
+                min={sizeStep}
+                data-testid="order-size"
+                onWheel={(e) => e.currentTarget.blur()}
+                {...field}
+              />
+            </FormGroup>
+            {fieldState.error && (
+              <InputError testId="deal-ticket-error-message-size">
+                {fieldState.error.message}
+              </InputError>
+            )}
+          </div>
+        )}
       />
+      {type === Schema.OrderType.TYPE_LIMIT && (
+        <Controller
+          name="price"
+          control={control}
+          rules={{
+            required: t('You need provide a price'),
+            min: {
+              value: priceStep,
+              message: t('Price cannot be lower than ' + priceStep),
+            },
+            validate: validateAmount(priceStep, 'Price'),
+          }}
+          render={({ field, fieldState }) => (
+            <div className="mb-4">
+              <FormGroup
+                labelFor="input-price-quote"
+                label={t(`Price (${quoteName})`)}
+                compact
+              >
+                <Input
+                  id="input-price-quote"
+                  className="w-full"
+                  type="number"
+                  step={priceStep}
+                  data-testid="order-price"
+                  onWheel={(e) => e.currentTarget.blur()}
+                  {...field}
+                />
+              </FormGroup>
+              {fieldState.error && (
+                <InputError testId="deal-ticket-error-message-price">
+                  {fieldState.error.message}
+                </InputError>
+              )}
+            </div>
+          )}
+        />
+      )}
       <Controller
         name="timeInForce"
         control={control}

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

@@ -1,4 +1,8 @@
-import { FormGroup, Input, InputError } from '@vegaprotocol/ui-toolkit';
+import {
+  TradingFormGroup,
+  TradingInput,
+  TradingInputError,
+} from '@vegaprotocol/ui-toolkit';
 import { formatForInput } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import { useRef } from 'react';
@@ -19,24 +23,27 @@ export const ExpirySelector = ({
   const dateFormatted = formatForInput(date);
   const minDate = formatForInput(date);
   return (
-    <FormGroup
-      label={t('Expiry time/date')}
-      labelFor="expiration"
-      compact={true}
-    >
-      <Input
-        data-testid="date-picker-field"
-        id="expiration"
-        type="datetime-local"
-        value={dateFormatted}
-        onChange={(e) => onSelect(e.target.value)}
-        min={minDate}
-      />
-      {errorMessage && (
-        <InputError testId="deal-ticket-error-message-expiry">
-          {errorMessage}
-        </InputError>
-      )}
-    </FormGroup>
+    <div className="mb-4">
+      <TradingFormGroup
+        label={t('Expiry time/date')}
+        labelFor="expiration"
+        compact
+      >
+        <TradingInput
+          data-testid="date-picker-field"
+          id="expiration"
+          type="datetime-local"
+          value={dateFormatted}
+          onChange={(e) => onSelect(e.target.value)}
+          min={minDate}
+          hasError={!!errorMessage}
+        />
+        {errorMessage && (
+          <TradingInputError testId="deal-ticket-error-message-expiry">
+            {errorMessage}
+          </TradingInputError>
+        )}
+      </TradingFormGroup>
+    </div>
   );
 };

libs/deal-ticket/src/components/deal-ticket/index.ts

@@ -1,7 +1,4 @@
-export * from './deal-ticket-amount';
 export * from './deal-ticket-container';
-export * from './deal-ticket-limit-amount';
-export * from './deal-ticket-market-amount';
 export * from './deal-ticket';
 export * from './deal-ticket-stop-order';
 export * from './deal-ticket-container';

libs/deal-ticket/src/components/deal-ticket/time-in-force-selector.tsx

@@ -1,7 +1,7 @@
 import {
-  FormGroup,
-  InputError,
-  Select,
+  TradingFormGroup,
+  TradingInputError,
+  TradingSelect,
   Tooltip,
   SimpleGrid,
 } from '@vegaprotocol/ui-toolkit';
@@ -90,31 +90,34 @@ export const TimeInForceSelector = ({
   };
 
   return (
-    <FormGroup
-      label={t('Time in force')}
-      labelFor="select-time-in-force"
-      compact={true}
-    >
-      <Select
-        id="select-time-in-force"
-        value={value}
-        onChange={(e) => {
-          onSelect(e.target.value as Schema.OrderTimeInForce);
-        }}
-        className="w-full"
-        data-testid="order-tif"
+    <div className="mb-4">
+      <TradingFormGroup
+        label={t('Time in force')}
+        labelFor="select-time-in-force"
+        compact={true}
       >
-        {options.map(([key, value]) => (
-          <option key={key} value={value}>
-            {timeInForceLabel(value)}
-          </option>
-        ))}
-      </Select>
-      {errorMessage && (
-        <InputError testId="deal-ticket-error-message-tif">
-          {renderError(errorMessage)}
-        </InputError>
-      )}
-    </FormGroup>
+        <TradingSelect
+          id="select-time-in-force"
+          value={value}
+          onChange={(e) => {
+            onSelect(e.target.value as Schema.OrderTimeInForce);
+          }}
+          className="w-full"
+          data-testid="order-tif"
+          hasError={!!errorMessage}
+        >
+          {options.map(([key, value]) => (
+            <option key={key} value={value}>
+              {timeInForceLabel(value)}
+            </option>
+          ))}
+        </TradingSelect>
+        {errorMessage && (
+          <TradingInputError testId="deal-ticket-error-message-tif">
+            {renderError(errorMessage)}
+          </TradingInputError>
+        )}
+      </TradingFormGroup>
+    </div>
   );
 };

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

@@ -1,5 +1,5 @@
 import {
-  InputError,
+  TradingInputError,
   SimpleGrid,
   Tooltip,
   TradingDropdown,
@@ -76,7 +76,7 @@ export const TypeToggle = ({
             <TradingDropdownTrigger
               data-testid="order-type-Stop"
               className={classNames(
-                'rounded px-3 flex flex-nowrap items-center justify-center',
+                'rounded px-2 flex flex-nowrap items-center justify-center',
                 {
                   'bg-vega-clight-500 dark:bg-vega-cdark-500': selectedOption,
                 }
@@ -178,9 +178,9 @@ export const TypeSelector = ({
         value={value}
       />
       {errorMessage && (
-        <InputError testId="deal-ticket-error-message-type">
+        <TradingInputError testId="deal-ticket-error-message-type">
           {renderError(errorMessage as MarketModeValidationType)}
-        </InputError>
+        </TradingInputError>
       )}
     </>
   );

libs/deal-ticket/src/hooks/use-form-values.ts

@@ -28,6 +28,17 @@ export interface StopOrderFormValues {
   expire: boolean;
   expiryStrategy?: Schema.StopOrderExpiryStrategy;
   expiresAt?: string;
+
+  oco?: boolean;
+
+  ocoTriggerType: 'price' | 'trailingPercentOffset';
+  ocoTriggerPrice?: string;
+  ocoTriggerTrailingPercentOffset?: string;
+
+  ocoType: OrderType;
+  ocoSize: string;
+  ocoTimeInForce: OrderTimeInForce;
+  ocoPrice?: string;
 }
 
 export type OrderFormValues = {
@@ -138,6 +149,7 @@ export const useDealTicketFormValues = create<Store>()(
       })),
       {
         name: 'vega_deal_ticket_store',
+        version: 1,
       }
     )
   )

libs/deal-ticket/src/utils/map-form-values-to-submission.ts

@@ -59,6 +59,22 @@ export const mapFormValuesToOrderSubmission = (
       : undefined,
 });
 
+const setTrigger = (
+  stopOrderSetup: StopOrderSetup,
+  triggerType: StopOrderFormValues['triggerPrice'],
+  triggerPrice: StopOrderFormValues['triggerPrice'],
+  triggerTrailingPercentOffset: StopOrderFormValues['triggerTrailingPercentOffset'],
+  decimalPlaces: number
+) => {
+  if (triggerType === 'price') {
+    stopOrderSetup.price = removeDecimal(triggerPrice ?? '', decimalPlaces);
+  } else if (triggerType === 'trailingPercentOffset') {
+    stopOrderSetup.trailingPercentOffset = (
+      Number(triggerTrailingPercentOffset) / 100
+    ).toFixed(3);
+  }
+};
+
 export const mapFormValuesToStopOrdersSubmission = (
   data: StopOrderFormValues,
   marketId: string,
@@ -81,31 +97,46 @@ export const mapFormValuesToStopOrdersSubmission = (
       positionDecimalPlaces
     ),
   };
-  if (data.triggerType === 'price') {
-    stopOrderSetup.price = removeDecimal(
-      data.triggerPrice ?? '',
+  setTrigger(
+    stopOrderSetup,
+    data.triggerType,
+    data.triggerPrice,
+    data.triggerTrailingPercentOffset,
+    decimalPlaces
+  );
+  let oppositeStopOrderSetup: StopOrderSetup | undefined = undefined;
+  if (data.oco) {
+    oppositeStopOrderSetup = {
+      orderSubmission: mapFormValuesToOrderSubmission(
+        {
+          type: data.ocoType,
+          side: data.side,
+          size: data.ocoSize,
+          timeInForce: data.ocoTimeInForce,
+          price: data.ocoPrice,
+          reduceOnly: true,
+        },
+        marketId,
+        decimalPlaces,
+        positionDecimalPlaces
+      ),
+    };
+    setTrigger(
+      oppositeStopOrderSetup,
+      data.ocoTriggerType,
+      data.ocoTriggerPrice,
+      data.ocoTriggerTrailingPercentOffset,
       decimalPlaces
     );
-  } else if (data.triggerType === 'trailingPercentOffset') {
-    stopOrderSetup.trailingPercentOffset = (
-      Number(data.triggerTrailingPercentOffset) / 100
-    ).toFixed(3);
   }
 
   if (data.expire) {
-    stopOrderSetup.expiresAt = data.expiresAt && toNanoSeconds(data.expiresAt);
-    if (
-      data.expiryStrategy ===
-      Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_CANCELS
-    ) {
-      stopOrderSetup.expiryStrategy =
-        Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_CANCELS;
-    } else if (
-      data.expiryStrategy ===
-      Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_SUBMIT
-    ) {
-      stopOrderSetup.expiryStrategy =
-        Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_SUBMIT;
+    const expiresAt = data.expiresAt && toNanoSeconds(data.expiresAt);
+    stopOrderSetup.expiresAt = expiresAt;
+    stopOrderSetup.expiryStrategy = data.expiryStrategy;
+    if (oppositeStopOrderSetup) {
+      oppositeStopOrderSetup.expiresAt = expiresAt;
+      oppositeStopOrderSetup.expiryStrategy = data.expiryStrategy;
     }
   }
 
@@ -114,12 +145,14 @@ export const mapFormValuesToStopOrdersSubmission = (
     Schema.StopOrderTriggerDirection.TRIGGER_DIRECTION_RISES_ABOVE
   ) {
     submission.risesAbove = stopOrderSetup;
+    submission.fallsBelow = oppositeStopOrderSetup;
   }
   if (
     data.triggerDirection ===
     Schema.StopOrderTriggerDirection.TRIGGER_DIRECTION_FALLS_BELOW
   ) {
     submission.fallsBelow = stopOrderSetup;
+    submission.risesAbove = oppositeStopOrderSetup;
   }
 
   return submission;

libs/deposits/src/lib/deposit-form.tsx

@@ -14,14 +14,14 @@ import { t } from '@vegaprotocol/i18n';
 import { useLocalStorage } from '@vegaprotocol/react-helpers';
 import {
   Button,
-  FormGroup,
-  Input,
-  InputError,
-  RichSelect,
+  TradingFormGroup,
+  TradingInput,
+  TradingInputError,
+  TradingRichSelect,
   Notification,
   Intent,
   ButtonLink,
-  Select,
+  TradingSelect,
 } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useWeb3React } from '@web3-react/core';
@@ -151,7 +151,7 @@ export const DepositForm = ({
       noValidate={true}
       data-testid="deposit-form"
     >
-      <FormGroup
+      <TradingFormGroup
         label={t('From (Ethereum address)')}
         labelFor="ethereum-address"
       >
@@ -197,15 +197,17 @@ export const DepositForm = ({
           }}
         />
         {errors.from?.message && (
-          <InputError intent="danger">{errors.from.message}</InputError>
+          <TradingInputError intent="danger">
+            {errors.from.message}
+          </TradingInputError>
         )}
-      </FormGroup>
-      <FormGroup label={t('To (Vega key)')} labelFor="to">
+      </TradingFormGroup>
+      <TradingFormGroup label={t('To (Vega key)')} labelFor="to">
         <AddressField
           pubKeys={pubKeys}
           onChange={() => setValue('to', '')}
           select={
-            <Select {...register('to')} id="to" defaultValue="">
+            <TradingSelect {...register('to')} id="to" defaultValue="">
               <option value="" disabled>
                 {t('Please select')}
               </option>
@@ -215,10 +217,10 @@ export const DepositForm = ({
                     {pk}
                   </option>
                 ))}
-            </Select>
+            </TradingSelect>
           }
           input={
-            <Input
+            <TradingInput
               // eslint-disable-next-line jsx-a11y/no-autofocus
               autoFocus={true} // focus input immediately after is shown
               id="to"
@@ -233,12 +235,12 @@ export const DepositForm = ({
           }
         />
         {errors.to?.message && (
-          <InputError intent="danger" forInput="to">
+          <TradingInputError intent="danger" forInput="to">
             {errors.to.message}
-          </InputError>
+          </TradingInputError>
         )}
-      </FormGroup>
-      <FormGroup label={t('Asset')} labelFor="asset">
+      </TradingFormGroup>
+      <TradingFormGroup label={t('Asset')} labelFor="asset">
         <Controller
           control={control}
           name="asset"
@@ -248,7 +250,7 @@ export const DepositForm = ({
             },
           }}
           render={({ field }) => (
-            <RichSelect
+            <TradingRichSelect
               data-testid="select-asset"
               id={field.name}
               name={field.name}
@@ -271,13 +273,13 @@ export const DepositForm = ({
                     }
                   />
                 ))}
-            </RichSelect>
+            </TradingRichSelect>
           )}
         />
         {errors.asset?.message && (
-          <InputError intent="danger" forInput="asset">
+          <TradingInputError intent="danger" forInput="asset">
             {errors.asset.message}
-          </InputError>
+          </TradingInputError>
         )}
         {isActive && isFaucetable && selectedAsset && (
           <UseButton onClick={submitFaucet}>
@@ -296,7 +298,7 @@ export const DepositForm = ({
             {t('View asset details')}
           </button>
         )}
-      </FormGroup>
+      </TradingFormGroup>
       <FaucetNotification
         isActive={isActive}
         selectedAsset={selectedAsset}
@@ -308,8 +310,8 @@ export const DepositForm = ({
         </div>
       )}
       {approved && (
-        <FormGroup label={t('Amount')} labelFor="amount">
-          <Input
+        <TradingFormGroup label={t('Amount')} labelFor="amount">
+          <TradingInput
             type="number"
             autoComplete="off"
             id="amount"
@@ -374,9 +376,9 @@ export const DepositForm = ({
             })}
           />
           {errors.amount?.message && (
-            <InputError intent="danger" forInput="amount">
+            <TradingInputError intent="danger" forInput="amount">
               {errors.amount.message}
-            </InputError>
+            </TradingInputError>
           )}
           {selectedAsset && balances && (
             <UseButton
@@ -390,7 +392,7 @@ export const DepositForm = ({
               {t('Use maximum')}
             </UseButton>
           )}
-        </FormGroup>
+        </TradingFormGroup>
       )}
       <ApproveNotification
         isActive={isActive}

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

@@ -4,10 +4,10 @@ import { t } from '@vegaprotocol/i18n';
 import {
   Button,
   ButtonLink,
-  Input,
+  TradingInput,
   Loader,
-  Radio,
-  RadioGroup,
+  TradingRadio,
+  TradingRadioGroup,
 } from '@vegaprotocol/ui-toolkit';
 import { useEnvironment } from '../../hooks';
 import { CUSTOM_NODE_KEY } from '../../types';
@@ -76,7 +76,7 @@ export const NodeSwitcher = ({ closeDialog }: { closeDialog: () => void }) => {
               `This app will only work on ${VEGA_ENV}. Select a node to connect to.`
             )}
           </p>
-          <RadioGroup
+          <TradingRadioGroup
             value={nodeRadio}
             onChange={(value) => setNodeRadio(value)}
           >
@@ -112,7 +112,7 @@ export const NodeSwitcher = ({ closeDialog }: { closeDialog: () => void }) => {
                 />
               </div>
             </div>
-          </RadioGroup>
+          </TradingRadioGroup>
           <div className="mt-4">
             <Button
               fill={true}
@@ -161,7 +161,7 @@ const CustomRowWrapper = ({
     <LayoutRow dataTestId="custom-row">
       <div className="flex w-full mb-2">
         {nodes.length > 0 && (
-          <Radio
+          <TradingRadio
             id="node-url-custom"
             value={CUSTOM_NODE_KEY}
             label={nodeRadio === CUSTOM_NODE_KEY ? '' : t('Other')}
@@ -172,7 +172,7 @@ const CustomRowWrapper = ({
             data-testid="custom-node"
             className="flex items-center w-full gap-2"
           >
-            <Input
+            <TradingInput
               placeholder="https://"
               value={inputText}
               hasError={Boolean(error)}

libs/environment/src/components/node-switcher/row-data.tsx

@@ -2,7 +2,7 @@ import type { ApolloError } from '@apollo/client';
 import { useHeaderStore } from '@vegaprotocol/apollo-client';
 import { isValidUrl } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import { Radio } from '@vegaprotocol/ui-toolkit';
+import { TradingRadio } from '@vegaprotocol/ui-toolkit';
 import { useEffect, useState } from 'react';
 import { CUSTOM_NODE_KEY } from '../../types';
 import {
@@ -138,7 +138,7 @@ export const RowData = ({
     <>
       {id !== CUSTOM_NODE_KEY && (
         <div className="break-all" data-testid="node">
-          <Radio id={`node-url-${id}`} value={url} label={url} />
+          <TradingRadio id={`node-url-${id}`} value={url} label={url} />
         </div>
       )}
       <LayoutCell

libs/markets/src/lib/market-utils.spec.tsx

@@ -1,6 +1,10 @@
 import * as Schema from '@vegaprotocol/types';
-import type { Market } from './markets-provider';
-import { filterAndSortMarkets, totalFeesPercentage } from './market-utils';
+import type { Market, MarketMaybeWithDataAndCandles } from './markets-provider';
+import {
+  calcTradedFactor,
+  filterAndSortMarkets,
+  totalFeesPercentage,
+} from './market-utils';
 const { MarketState, MarketTradingMode } = Schema;
 
 const MARKET_A: Partial<Market> = {
@@ -77,3 +81,52 @@ describe('totalFees', () => {
     expect(totalFeesPercentage(i)).toEqual(o);
   });
 });
+
+describe('calcTradedFactor', () => {
+  const marketA = {
+    data: {
+      markPrice: '10',
+    },
+    candles: [
+      {
+        volume: '1000',
+      },
+    ],
+    tradableInstrument: {
+      instrument: {
+        product: {
+          settlementAsset: {
+            decimals: 18,
+            quantum: '1000000000000000000', // 1
+          },
+        },
+      },
+    },
+  };
+  const marketB = {
+    data: {
+      markPrice: '10',
+    },
+    candles: [
+      {
+        volume: '1000',
+      },
+    ],
+    tradableInstrument: {
+      instrument: {
+        product: {
+          settlementAsset: {
+            decimals: 18,
+            quantum: '1', // 0.0000000000000000001
+          },
+        },
+      },
+    },
+  };
+  it('a is "traded" more than b', () => {
+    const fa = calcTradedFactor(marketA as MarketMaybeWithDataAndCandles);
+    const fb = calcTradedFactor(marketB as MarketMaybeWithDataAndCandles);
+    // it should be true because market a's asset is "more valuable" than b's
+    expect(fa > fb).toBeTruthy();
+  });
+});

libs/markets/src/lib/market-utils.ts

@@ -1,8 +1,13 @@
-import { formatNumberPercentage } from '@vegaprotocol/utils';
+import { formatNumberPercentage, toBigNum } from '@vegaprotocol/utils';
 import * as Schema from '@vegaprotocol/types';
 import BigNumber from 'bignumber.js';
 import orderBy from 'lodash/orderBy';
-import type { Market, Candle, MarketMaybeWithData } from '../';
+import type {
+  Market,
+  Candle,
+  MarketMaybeWithData,
+  MarketMaybeWithDataAndCandles,
+} from '../';
 const { MarketState, MarketTradingMode } = Schema;
 
 export const totalFees = (fees: Market['fees']['factors']) => {
@@ -86,3 +91,18 @@ export const calcCandleHigh = (candles: Candle[]): string | undefined => {
 export const calcCandleVolume = (candles: Candle[]): string | undefined =>
   candles &&
   candles.reduce((acc, c) => new BigNumber(acc).plus(c.volume).toString(), '0');
+
+export const calcTradedFactor = (m: MarketMaybeWithDataAndCandles) => {
+  const volume = Number(calcCandleVolume(m.candles || []) || 0);
+  const price = m.data?.markPrice ? Number(m.data.markPrice) : 0;
+  const quantum = Number(
+    m.tradableInstrument.instrument.product.settlementAsset.quantum
+  );
+  const decimals = Number(
+    m.tradableInstrument.instrument.product.settlementAsset.decimals
+  );
+  const fp = toBigNum(price, decimals);
+  const fq = toBigNum(quantum, decimals);
+  const factor = fq.multipliedBy(fp).multipliedBy(volume);
+  return factor.toNumber();
+};

libs/orders/src/lib/components/order-data-provider/Orders.graphql

@@ -128,6 +128,9 @@ fragment StopOrderFields on StopOrder {
   updatedAt
   partyId
   marketId
+  order {
+    ...OrderFields
+  }
   trigger {
     ... on StopOrderPrice {
       price

libs/orders/src/lib/components/order-data-provider/__generated__/Orders.ts

@@ -34,22 +34,51 @@ export type OrdersUpdateSubscription = { __typename?: 'Subscription', orders?: A
 
 export type OrderSubmissionFieldsFragment = { __typename?: 'OrderSubmission', marketId: string, price: string, size: string, side: Types.Side, timeInForce: Types.OrderTimeInForce, expiresAt: any, type: Types.OrderType, reference?: string | null, postOnly?: boolean | null, reduceOnly?: boolean | null, peggedOrder?: { __typename?: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null };
 
-export type StopOrderFieldsFragment = { __typename?: 'StopOrder', id: string, ocoLinkId?: string | null, expiresAt?: any | null, expiryStrategy?: Types.StopOrderExpiryStrategy | null, triggerDirection: Types.StopOrderTriggerDirection, status: Types.StopOrderStatus, createdAt: any, updatedAt?: any | null, partyId: string, marketId: string, trigger?: { __typename?: 'StopOrderPrice', price: string } | { __typename?: 'StopOrderTrailingPercentOffset', trailingPercentOffset: string } | null, submission: { __typename?: 'OrderSubmission', marketId: string, price: string, size: string, side: Types.Side, timeInForce: Types.OrderTimeInForce, expiresAt: any, type: Types.OrderType, reference?: string | null, postOnly?: boolean | null, reduceOnly?: boolean | null, peggedOrder?: { __typename?: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null } };
+export type StopOrderFieldsFragment = { __typename?: 'StopOrder', id: string, ocoLinkId?: string | null, expiresAt?: any | null, expiryStrategy?: Types.StopOrderExpiryStrategy | null, triggerDirection: Types.StopOrderTriggerDirection, status: Types.StopOrderStatus, createdAt: any, updatedAt?: any | null, partyId: string, marketId: string, order?: { __typename?: 'Order', id: string, type?: Types.OrderType | null, side: Types.Side, size: string, status: Types.OrderStatus, rejectionReason?: Types.OrderRejectionReason | null, price: string, timeInForce: Types.OrderTimeInForce, remaining: string, expiresAt?: any | null, createdAt: any, updatedAt?: any | null, postOnly?: boolean | null, reduceOnly?: boolean | null, market: { __typename?: 'Market', id: string }, liquidityProvision?: { __typename: 'LiquidityProvision' } | null, peggedOrder?: { __typename: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null, icebergOrder?: { __typename: 'IcebergOrder', peakSize: string, minimumVisibleSize: string, reservedRemaining: string } | null } | null, trigger: { __typename?: 'StopOrderPrice', price: string } | { __typename?: 'StopOrderTrailingPercentOffset', trailingPercentOffset: string }, submission: { __typename?: 'OrderSubmission', marketId: string, price: string, size: string, side: Types.Side, timeInForce: Types.OrderTimeInForce, expiresAt: any, type: Types.OrderType, reference?: string | null, postOnly?: boolean | null, reduceOnly?: boolean | null, peggedOrder?: { __typename?: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null } };
 
 export type StopOrdersQueryVariables = Types.Exact<{
   partyId: Types.Scalars['ID'];
 }>;
 
 
-export type StopOrdersQuery = { __typename?: 'Query', stopOrders?: { __typename?: 'StopOrderConnection', edges?: Array<{ __typename?: 'StopOrderEdge', node?: { __typename?: 'StopOrder', id: string, ocoLinkId?: string | null, expiresAt?: any | null, expiryStrategy?: Types.StopOrderExpiryStrategy | null, triggerDirection: Types.StopOrderTriggerDirection, status: Types.StopOrderStatus, createdAt: any, updatedAt?: any | null, partyId: string, marketId: string, trigger?: { __typename?: 'StopOrderPrice', price: string } | { __typename?: 'StopOrderTrailingPercentOffset', trailingPercentOffset: string } | null, submission: { __typename?: 'OrderSubmission', marketId: string, price: string, size: string, side: Types.Side, timeInForce: Types.OrderTimeInForce, expiresAt: any, type: Types.OrderType, reference?: string | null, postOnly?: boolean | null, reduceOnly?: boolean | null, peggedOrder?: { __typename?: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null } } | null }> | null } | null };
+export type StopOrdersQuery = { __typename?: 'Query', stopOrders?: { __typename?: 'StopOrderConnection', edges?: Array<{ __typename?: 'StopOrderEdge', node?: { __typename?: 'StopOrder', id: string, ocoLinkId?: string | null, expiresAt?: any | null, expiryStrategy?: Types.StopOrderExpiryStrategy | null, triggerDirection: Types.StopOrderTriggerDirection, status: Types.StopOrderStatus, createdAt: any, updatedAt?: any | null, partyId: string, marketId: string, order?: { __typename?: 'Order', id: string, type?: Types.OrderType | null, side: Types.Side, size: string, status: Types.OrderStatus, rejectionReason?: Types.OrderRejectionReason | null, price: string, timeInForce: Types.OrderTimeInForce, remaining: string, expiresAt?: any | null, createdAt: any, updatedAt?: any | null, postOnly?: boolean | null, reduceOnly?: boolean | null, market: { __typename?: 'Market', id: string }, liquidityProvision?: { __typename: 'LiquidityProvision' } | null, peggedOrder?: { __typename: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null, icebergOrder?: { __typename: 'IcebergOrder', peakSize: string, minimumVisibleSize: string, reservedRemaining: string } | null } | null, trigger: { __typename?: 'StopOrderPrice', price: string } | { __typename?: 'StopOrderTrailingPercentOffset', trailingPercentOffset: string }, submission: { __typename?: 'OrderSubmission', marketId: string, price: string, size: string, side: Types.Side, timeInForce: Types.OrderTimeInForce, expiresAt: any, type: Types.OrderType, reference?: string | null, postOnly?: boolean | null, reduceOnly?: boolean | null, peggedOrder?: { __typename?: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null } } | null }> | null } | null };
 
 export type StopOrderByIdQueryVariables = Types.Exact<{
   stopOrderId: Types.Scalars['ID'];
 }>;
 
 
-export type StopOrderByIdQuery = { __typename?: 'Query', stopOrder?: { __typename?: 'StopOrder', id: string, ocoLinkId?: string | null, expiresAt?: any | null, expiryStrategy?: Types.StopOrderExpiryStrategy | null, triggerDirection: Types.StopOrderTriggerDirection, status: Types.StopOrderStatus, createdAt: any, updatedAt?: any | null, partyId: string, marketId: string, trigger?: { __typename?: 'StopOrderPrice', price: string } | { __typename?: 'StopOrderTrailingPercentOffset', trailingPercentOffset: string } | null, submission: { __typename?: 'OrderSubmission', marketId: string, price: string, size: string, side: Types.Side, timeInForce: Types.OrderTimeInForce, expiresAt: any, type: Types.OrderType, reference?: string | null, postOnly?: boolean | null, reduceOnly?: boolean | null, peggedOrder?: { __typename?: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null } } | null };
+export type StopOrderByIdQuery = { __typename?: 'Query', stopOrder?: { __typename?: 'StopOrder', id: string, ocoLinkId?: string | null, expiresAt?: any | null, expiryStrategy?: Types.StopOrderExpiryStrategy | null, triggerDirection: Types.StopOrderTriggerDirection, status: Types.StopOrderStatus, createdAt: any, updatedAt?: any | null, partyId: string, marketId: string, order?: { __typename?: 'Order', id: string, type?: Types.OrderType | null, side: Types.Side, size: string, status: Types.OrderStatus, rejectionReason?: Types.OrderRejectionReason | null, price: string, timeInForce: Types.OrderTimeInForce, remaining: string, expiresAt?: any | null, createdAt: any, updatedAt?: any | null, postOnly?: boolean | null, reduceOnly?: boolean | null, market: { __typename?: 'Market', id: string }, liquidityProvision?: { __typename: 'LiquidityProvision' } | null, peggedOrder?: { __typename: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null, icebergOrder?: { __typename: 'IcebergOrder', peakSize: string, minimumVisibleSize: string, reservedRemaining: string } | null } | null, trigger: { __typename?: 'StopOrderPrice', price: string } | { __typename?: 'StopOrderTrailingPercentOffset', trailingPercentOffset: string }, submission: { __typename?: 'OrderSubmission', marketId: string, price: string, size: string, side: Types.Side, timeInForce: Types.OrderTimeInForce, expiresAt: any, type: Types.OrderType, reference?: string | null, postOnly?: boolean | null, reduceOnly?: boolean | null, peggedOrder?: { __typename?: 'PeggedOrder', reference: Types.PeggedReference, offset: string } | null } } | null };
 
+export const OrderUpdateFieldsFragmentDoc = gql`
+    fragment OrderUpdateFields on OrderUpdate {
+  id
+  marketId
+  type
+  side
+  size
+  status
+  rejectionReason
+  price
+  timeInForce
+  remaining
+  expiresAt
+  createdAt
+  updatedAt
+  liquidityProvisionId
+  peggedOrder {
+    __typename
+    reference
+    offset
+  }
+  icebergOrder {
+    __typename
+    peakSize
+    minimumVisibleSize
+    reservedRemaining
+  }
+}
+    `;
 export const OrderFieldsFragmentDoc = gql`
     fragment OrderFields on Order {
   id
@@ -85,35 +114,6 @@ export const OrderFieldsFragmentDoc = gql`
   }
 }
     `;
-export const OrderUpdateFieldsFragmentDoc = gql`
-    fragment OrderUpdateFields on OrderUpdate {
-  id
-  marketId
-  type
-  side
-  size
-  status
-  rejectionReason
-  price
-  timeInForce
-  remaining
-  expiresAt
-  createdAt
-  updatedAt
-  liquidityProvisionId
-  peggedOrder {
-    __typename
-    reference
-    offset
-  }
-  icebergOrder {
-    __typename
-    peakSize
-    minimumVisibleSize
-    reservedRemaining
-  }
-}
-    `;
 export const OrderSubmissionFieldsFragmentDoc = gql`
     fragment OrderSubmissionFields on OrderSubmission {
   marketId
@@ -144,6 +144,9 @@ export const StopOrderFieldsFragmentDoc = gql`
   updatedAt
   partyId
   marketId
+  order {
+    ...OrderFields
+  }
   trigger {
     ... on StopOrderPrice {
       price
@@ -156,7 +159,8 @@ export const StopOrderFieldsFragmentDoc = gql`
     ...OrderSubmissionFields
   }
 }
-    ${OrderSubmissionFieldsFragmentDoc}`;
+    ${OrderFieldsFragmentDoc}
+${OrderSubmissionFieldsFragmentDoc}`;
 export const OrderByIdDocument = gql`
     query OrderById($orderId: ID!) {
   orderByID(id: $orderId) {

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

@@ -9,9 +9,9 @@ import { t } from '@vegaprotocol/i18n';
 import { Size } from '@vegaprotocol/datagrid';
 import * as Schema from '@vegaprotocol/types';
 import {
-  FormGroup,
-  Input,
-  InputError,
+  TradingFormGroup,
+  TradingInput,
+  TradingInputError,
   Button,
   Dialog,
   Icon,
@@ -102,8 +102,12 @@ export const OrderEditDialog = ({
         noValidate
       >
         <div className="flex flex-col md:flex-row gap-4">
-          <FormGroup label={t('Price')} labelFor="limitPrice" className="grow">
-            <Input
+          <TradingFormGroup
+            label={t('Price')}
+            labelFor="limitPrice"
+            className="grow"
+          >
+            <TradingInput
               type="number"
               step={step}
               {...register('limitPrice', {
@@ -119,13 +123,13 @@ export const OrderEditDialog = ({
               id="limitPrice"
             />
             {errors.limitPrice?.message && (
-              <InputError intent="danger">
+              <TradingInputError intent="danger">
                 {errors.limitPrice.message}
-              </InputError>
+              </TradingInputError>
             )}
-          </FormGroup>
-          <FormGroup label={t('Size')} labelFor="size" className="grow">
-            <Input
+          </TradingFormGroup>
+          <TradingFormGroup label={t('Size')} labelFor="size" className="grow">
+            <TradingInput
               type="number"
               step={stepSize}
               {...register('size', {
@@ -139,9 +143,11 @@ export const OrderEditDialog = ({
               id="size"
             />
             {errors.size?.message && (
-              <InputError intent="danger">{errors.size.message}</InputError>
+              <TradingInputError intent="danger">
+                {errors.size.message}
+              </TradingInputError>
             )}
-          </FormGroup>
+          </TradingFormGroup>
         </div>
         <Button variant="primary" size="md" type="submit">
           {t('Update')}

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

@@ -296,7 +296,7 @@ export const OrderListTable = memo<
                       </ButtonLink>
                     </>
                   )}
-                  <ActionsDropdown data-testid="market-actions-content">
+                  <ActionsDropdown data-testid="order-actions-content">
                     <TradingDropdownCopyItem
                       value={data.id}
                       text={t('Copy order ID')}

libs/orders/src/lib/components/stop-orders-manager/stop-orders-manager.tsx

@@ -1,11 +1,13 @@
 import { t } from '@vegaprotocol/i18n';
-import { useCallback, useEffect } from 'react';
+import { useCallback, useEffect, useState } from 'react';
 import { StopOrdersTable } from '../stop-orders-table/stop-orders-table';
 import type { useDataGridEvents } from '@vegaprotocol/datagrid';
 import { useVegaTransactionStore } from '@vegaprotocol/wallet';
 import type { StopOrder } from '../order-data-provider/stop-orders-data-provider';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { stopOrdersWithMarketProvider } from '../order-data-provider/stop-orders-data-provider';
+import { OrderViewDialog } from '../order-list/order-view-dialog';
+import type { Order } from '../order-data-provider';
 
 export interface StopOrdersManagerProps {
   partyId: string;
@@ -23,6 +25,7 @@ export const StopOrdersManager = ({
   gridProps,
 }: StopOrdersManagerProps) => {
   const create = useVegaTransactionStore((state) => state.create);
+  const [viewOrder, setViewOrder] = useState<Order | null>(null);
   const variables = { partyId };
 
   const { data, error, reload } = useDataProvider({
@@ -53,14 +56,25 @@ export const StopOrdersManager = ({
   );
 
   return (
-    <StopOrdersTable
-      rowData={data}
-      onCancel={cancel}
-      onMarketClick={onMarketClick}
-      isReadOnly={isReadOnly}
-      suppressAutoSize
-      overlayNoRowsTemplate={error ? error.message : t('No stop orders')}
-      {...gridProps}
-    />
+    <>
+      <StopOrdersTable
+        rowData={data}
+        onCancel={cancel}
+        onView={setViewOrder}
+        onMarketClick={onMarketClick}
+        isReadOnly={isReadOnly}
+        suppressAutoSize
+        overlayNoRowsTemplate={error ? error.message : t('No stop orders')}
+        {...gridProps}
+      />
+      {viewOrder && (
+        <OrderViewDialog
+          isOpen={Boolean(viewOrder)}
+          order={viewOrder}
+          onChange={() => setViewOrder(null)}
+          onMarketClick={onMarketClick}
+        />
+      )}
+    </>
   );
 };

libs/orders/src/lib/components/stop-orders-table/stop-orders-table.spec.tsx

@@ -4,6 +4,7 @@ import type { PartialDeep } from 'type-fest';
 import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
 import { VegaWalletContext } from '@vegaprotocol/wallet';
 import { MockedProvider } from '@apollo/client/testing';
+import userEvent from '@testing-library/user-event';
 import {
   StopOrdersTable,
   type StopOrdersTableProps,
@@ -27,6 +28,7 @@ jest.mock('@vegaprotocol/utils', () => ({
 }));
 
 const defaultProps: StopOrdersTableProps = {
+  onView: jest.fn(),
   rowData: [],
   onCancel: jest.fn(),
   isReadOnly: false,
@@ -104,6 +106,7 @@ const rowData = [
   generateStopOrder({
     id: 'stop-order-6',
     status: Schema.StopOrderStatus.STATUS_TRIGGERED,
+    order: { id: 'order-id' },
   }),
 ];
 
@@ -234,4 +237,37 @@ describe('StopOrdersTable', () => {
       );
     });
   });
+
+  it('shows actions dropdown only for triggered stop orders', async () => {
+    await act(async () => {
+      render(generateJsx({ rowData }));
+    });
+    const dropdownMenuButtons = screen.getAllByTestId('dropdown-menu');
+    expect(dropdownMenuButtons).toHaveLength(1);
+    dropdownMenuButtons.forEach((dropdownMenuButton) => {
+      const id = dropdownMenuButton
+        .closest('[role="row"]')
+        ?.getAttribute('row-id');
+      expect(rowData.find((row) => row.id === id)?.status).toEqual(
+        Schema.StopOrderStatus.STATUS_TRIGGERED
+      );
+    });
+  });
+
+  it('action dropdown has copy and view order actions', async () => {
+    const onView = jest.fn();
+    const user = userEvent.setup();
+    await act(async () => {
+      render(generateJsx({ rowData, onView }));
+    });
+    const dropdownMenuButtons = screen.getByTestId('dropdown-menu');
+    dropdownMenuButtons.click();
+    await user.click(dropdownMenuButtons as HTMLButtonElement);
+    const menuItems = screen.getAllByRole('menuitem');
+    expect(menuItems).toHaveLength(2);
+    expect(menuItems[0]).toHaveTextContent('Copy order ID');
+    expect(menuItems[1]).toHaveTextContent('View order details');
+    menuItems[1].click();
+    expect(onView).toBeCalled();
+  });
 });

libs/orders/src/lib/components/stop-orders-table/stop-orders-table.tsx

@@ -7,8 +7,15 @@ import {
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import * as Schema from '@vegaprotocol/types';
-import { ButtonLink } from '@vegaprotocol/ui-toolkit';
-import type { ForwardedRef } from 'react';
+import {
+  ActionsDropdown,
+  ButtonLink,
+  VegaIcon,
+  VegaIconNames,
+  DropdownMenuItem,
+  TradingDropdownCopyItem,
+  Pill,
+} from '@vegaprotocol/ui-toolkit';
 import { memo, useMemo } from 'react';
 import {
   AgGridLazy as AgGrid,
@@ -25,9 +32,9 @@ import type {
   VegaValueFormatterParams,
   VegaValueGetterParams,
 } from '@vegaprotocol/datagrid';
-import type { AgGridReact } from 'ag-grid-react';
 import type { StopOrder } from '../order-data-provider/stop-orders-data-provider';
 import type { ColDef } from 'ag-grid-community';
+import type { Order } from '../order-data-provider';
 
 const defaultColDef = {
   resizable: true,
@@ -38,219 +45,253 @@ const defaultColDef = {
 export type StopOrdersTableProps = TypedDataAgGrid<StopOrder> & {
   onCancel: (order: StopOrder) => void;
   onMarketClick?: (marketId: string, metaKey?: boolean) => void;
+  onView: (order: Order) => void;
   isReadOnly: boolean;
 };
 
-export const StopOrdersTable = memo<
-  StopOrdersTableProps & { ref?: ForwardedRef<AgGridReact> }
->(({ onCancel, onMarketClick, ...props }: StopOrdersTableProps) => {
-  const showAllActions = !props.isReadOnly;
-  const columnDefs: ColDef[] = useMemo(
-    () => [
-      {
-        headerName: t('Market'),
-        field: 'market.tradableInstrument.instrument.code',
-        cellRenderer: 'MarketNameCell',
-        cellRendererParams: { idPath: 'market.id', onMarketClick },
-      },
-      {
-        headerName: t('Trigger'),
-        field: 'trigger',
-        cellClass: 'font-mono text-right',
-        type: 'rightAligned',
-        sortable: false,
-        valueFormatter: ({
-          data,
-        }: VegaValueFormatterParams<StopOrder, 'trigger'>): string =>
-          data ? formatTrigger(data, data.market.decimalPlaces) : '',
-      },
-      {
-        field: 'expiresAt',
-        valueFormatter: ({
-          value,
-          data,
-        }: VegaValueFormatterParams<StopOrder, 'expiresAt'>) => {
-          if (
-            data &&
-            value &&
-            data?.expiryStrategy !==
-              Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_UNSPECIFIED
-          ) {
-            const expiresAt = getDateTimeFormat().format(new Date(value));
-            const expiryStrategy =
-              data.expiryStrategy ===
-              Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_SUBMIT
-                ? t('Submit')
-                : t('Cancels');
-            return `${expiryStrategy} ${expiresAt}`;
-          }
-          return '';
+export const StopOrdersTable = memo(
+  ({ onCancel, onMarketClick, onView, ...props }: StopOrdersTableProps) => {
+    const showAllActions = !props.isReadOnly;
+    const columnDefs: ColDef[] = useMemo(
+      () => [
+        {
+          headerName: t('Market'),
+          field: 'market.tradableInstrument.instrument.code',
+          cellRenderer: 'MarketNameCell',
+          cellRendererParams: { idPath: 'market.id', onMarketClick },
         },
-      },
-      {
-        headerName: t('Size'),
-        field: 'submission.size',
-        cellClass: 'font-mono text-right',
-        type: 'rightAligned',
-        cellClassRules: {
-          [positiveClassNames]: ({ data }: { data: StopOrder }) =>
-            data?.submission.size === Schema.Side.SIDE_BUY,
-          [negativeClassNames]: ({ data }: { data: StopOrder }) =>
-            data?.submission.size === Schema.Side.SIDE_SELL,
+        {
+          headerName: t('Trigger'),
+          field: 'trigger',
+          cellClass: 'font-mono text-right',
+          type: 'rightAligned',
+          sortable: false,
+          valueFormatter: ({
+            data,
+          }: VegaValueFormatterParams<StopOrder, 'trigger'>): string =>
+            data ? formatTrigger(data, data.market.decimalPlaces) : '',
         },
-        valueGetter: ({ data }: VegaValueGetterParams<StopOrder>) => {
-          return data?.submission.size && data.market
-            ? toBigNum(
-                data.submission.size,
-                data.market.positionDecimalPlaces ?? 0
-              )
-                .multipliedBy(
-                  data.submission.side === Schema.Side.SIDE_SELL ? -1 : 1
+        {
+          field: 'expiresAt',
+          valueFormatter: ({
+            value,
+            data,
+          }: VegaValueFormatterParams<StopOrder, 'expiresAt'>) => {
+            if (
+              data &&
+              value &&
+              data?.expiryStrategy !==
+                Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_UNSPECIFIED
+            ) {
+              const expiresAt = getDateTimeFormat().format(new Date(value));
+              const expiryStrategy =
+                data.expiryStrategy ===
+                Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_SUBMIT
+                  ? t('Submit')
+                  : t('Cancels');
+              return `${expiryStrategy} ${expiresAt}`;
+            }
+            return '';
+          },
+        },
+        {
+          headerName: t('Size'),
+          field: 'submission.size',
+          cellClass: 'font-mono text-right',
+          type: 'rightAligned',
+          cellClassRules: {
+            [positiveClassNames]: ({ data }: { data: StopOrder }) =>
+              data?.submission.size === Schema.Side.SIDE_BUY,
+            [negativeClassNames]: ({ data }: { data: StopOrder }) =>
+              data?.submission.size === Schema.Side.SIDE_SELL,
+          },
+          valueGetter: ({ data }: VegaValueGetterParams<StopOrder>) => {
+            return data?.submission.size && data.market
+              ? toBigNum(
+                  data.submission.size,
+                  data.market.positionDecimalPlaces ?? 0
                 )
-                .toNumber()
-            : undefined;
+                  .multipliedBy(
+                    data.submission.side === Schema.Side.SIDE_SELL ? -1 : 1
+                  )
+                  .toNumber()
+              : undefined;
+          },
+          valueFormatter: ({
+            data,
+          }: VegaValueFormatterParams<StopOrder, 'size'>) => {
+            if (!data) {
+              return '';
+            }
+            if (!data?.market || !isNumeric(data.submission.size)) {
+              return '-';
+            }
+            const prefix = data
+              ? data.submission.side === Schema.Side.SIDE_BUY
+                ? '+'
+                : '-'
+              : '';
+            return (
+              prefix +
+              addDecimalsFormatNumber(
+                data.submission.size,
+                data.market.positionDecimalPlaces
+              )
+            );
+          },
         },
-        valueFormatter: ({
-          data,
-        }: VegaValueFormatterParams<StopOrder, 'size'>) => {
-          if (!data) {
-            return '';
-          }
-          if (!data?.market || !isNumeric(data.submission.size)) {
-            return '-';
-          }
-          const prefix = data
-            ? data.submission.side === Schema.Side.SIDE_BUY
-              ? '+'
-              : '-'
-            : '';
-          return (
-            prefix +
-            addDecimalsFormatNumber(
-              data.submission.size,
-              data.market.positionDecimalPlaces
-            )
-          );
+        {
+          field: 'submission.type',
+          filter: SetFilter,
+          filterParams: {
+            set: Schema.OrderTypeMapping,
+          },
+          cellRenderer: ({
+            value,
+          }: VegaICellRendererParams<StopOrder, 'submission.type'>) =>
+            value ? Schema.OrderTypeMapping[value] : '',
         },
-      },
-      {
-        field: 'submission.type',
-        filter: SetFilter,
-        filterParams: {
-          set: Schema.OrderTypeMapping,
+        {
+          field: 'status',
+          filter: SetFilter,
+          filterParams: {
+            set: Schema.StopOrderStatusMapping,
+          },
+          valueFormatter: ({
+            value,
+          }: VegaValueFormatterParams<StopOrder, 'status'>) => {
+            return value ? Schema.StopOrderStatusMapping[value] : '';
+          },
+          cellRenderer: ({
+            valueFormatted,
+            data,
+          }: {
+            valueFormatted: string;
+            data: StopOrder;
+          }) => (
+            <>
+              <span data-testid={`order-status-${data?.id}`}>
+                {valueFormatted}
+              </span>
+              {data.ocoLinkId && (
+                <Pill
+                  size="xxs"
+                  className="uppercase ml-0.5"
+                  title={t('One Cancels the Other')}
+                >
+                  OCO
+                </Pill>
+              )}
+            </>
+          ),
         },
-        cellRenderer: ({
-          value,
-        }: VegaICellRendererParams<StopOrder, 'submission.type'>) =>
-          value ? Schema.OrderTypeMapping[value] : '',
-      },
-      {
-        field: 'status',
-        filter: SetFilter,
-        filterParams: {
-          set: Schema.StopOrderStatusMapping,
+        {
+          field: 'submission.price',
+          type: 'rightAligned',
+          cellClass: 'font-mono text-right',
+          valueFormatter: ({
+            value,
+            data,
+          }: VegaValueFormatterParams<StopOrder, 'submission.price'>) => {
+            if (!data) {
+              return '';
+            }
+            if (
+              !data?.market ||
+              data.submission.type === Schema.OrderType.TYPE_MARKET ||
+              !isNumeric(value)
+            ) {
+              return '-';
+            }
+            return addDecimalsFormatNumber(value, data.market.decimalPlaces);
+          },
         },
-        valueFormatter: ({
-          value,
-        }: VegaValueFormatterParams<StopOrder, 'status'>) => {
-          return value ? Schema.StopOrderStatusMapping[value] : '';
+        {
+          field: 'submission.timeInForce',
+          filter: SetFilter,
+          filterParams: {
+            set: Schema.OrderTimeInForceMapping,
+          },
+          valueFormatter: ({
+            value,
+          }: VegaValueFormatterParams<StopOrder, 'submission.timeInForce'>) => {
+            return value ? Schema.OrderTimeInForceCode[value] : '';
+          },
         },
-        cellRenderer: ({
-          valueFormatted,
-          data,
-        }: {
-          valueFormatted: string;
-          data: StopOrder;
-        }) => (
-          <span data-testid={`order-status-${data?.id}`}>{valueFormatted}</span>
-        ),
-      },
-      {
-        field: 'submission.price',
-        type: 'rightAligned',
-        cellClass: 'font-mono text-right',
-        valueFormatter: ({
-          value,
-          data,
-        }: VegaValueFormatterParams<StopOrder, 'submission.price'>) => {
-          if (!data) {
-            return '';
-          }
-          if (
-            !data?.market ||
-            data.submission.type === Schema.OrderType.TYPE_MARKET ||
-            !isNumeric(value)
-          ) {
-            return '-';
-          }
-          return addDecimalsFormatNumber(value, data.market.decimalPlaces);
+        {
+          field: 'updatedAt',
+          filter: DateRangeFilter,
+          valueGetter: ({ data }: VegaValueGetterParams<StopOrder>) =>
+            data?.updatedAt || data?.createdAt,
+          cellRenderer: ({
+            data,
+          }: VegaICellRendererParams<StopOrder, 'createdAt'>) => {
+            if (!data) {
+              return undefined;
+            }
+            const value = data.updatedAt || data.createdAt;
+            return (
+              <span data-value={value}>
+                {value ? getDateTimeFormat().format(new Date(value)) : '-'}
+              </span>
+            );
+          },
         },
-      },
-      {
-        field: 'submission.timeInForce',
-        filter: SetFilter,
-        filterParams: {
-          set: Schema.OrderTimeInForceMapping,
-        },
-        valueFormatter: ({
-          value,
-        }: VegaValueFormatterParams<StopOrder, 'submission.timeInForce'>) => {
-          return value ? Schema.OrderTimeInForceCode[value] : '';
-        },
-      },
-      {
-        field: 'updatedAt',
-        filter: DateRangeFilter,
-        valueGetter: ({ data }: VegaValueGetterParams<StopOrder>) =>
-          data?.updatedAt || data?.createdAt,
-        cellRenderer: ({
-          data,
-        }: VegaICellRendererParams<StopOrder, 'createdAt'>) => {
-          if (!data) {
-            return undefined;
-          }
-          const value = data.updatedAt || data.createdAt;
-          return (
-            <span data-value={value}>
-              {value ? getDateTimeFormat().format(new Date(value)) : '-'}
-            </span>
-          );
-        },
-      },
-      {
-        colId: 'actions',
-        ...COL_DEFS.actions,
-        minWidth: showAllActions ? 120 : COL_DEFS.actions.minWidth,
-        maxWidth: showAllActions ? 120 : COL_DEFS.actions.minWidth,
-        cellRenderer: ({ data }: { data?: StopOrder }) => {
-          if (!data) return null;
+        {
+          colId: 'actions',
+          ...COL_DEFS.actions,
+          minWidth: showAllActions ? 120 : COL_DEFS.actions.minWidth,
+          maxWidth: showAllActions ? 120 : COL_DEFS.actions.minWidth,
+          cellRenderer: ({ data }: { data?: StopOrder }) => {
+            if (!data) return null;
 
-          return (
-            <div className="flex gap-2 items-center justify-end">
-              {data.status === Schema.StopOrderStatus.STATUS_PENDING &&
-                !props.isReadOnly && (
-                  <ButtonLink
-                    data-testid="cancel"
-                    onClick={() => onCancel(data)}
-                  >
-                    {t('Cancel')}
-                  </ButtonLink>
-                )}
-            </div>
-          );
+            return (
+              <div className="flex gap-2 items-center justify-end">
+                {data.status === Schema.StopOrderStatus.STATUS_PENDING &&
+                  !props.isReadOnly && (
+                    <ButtonLink
+                      data-testid="cancel"
+                      onClick={() => onCancel(data)}
+                    >
+                      {t('Cancel')}
+                    </ButtonLink>
+                  )}
+                {data.status === Schema.StopOrderStatus.STATUS_TRIGGERED &&
+                  data.order && (
+                    <ActionsDropdown data-testid="stop-order-actions-content">
+                      <TradingDropdownCopyItem
+                        value={data.order.id}
+                        text={t('Copy order ID')}
+                      />
+                      <DropdownMenuItem
+                        key={'view-order'}
+                        data-testid="view-order"
+                        onClick={() =>
+                          data.order &&
+                          onView({ ...data.order, market: data.market })
+                        }
+                      >
+                        <VegaIcon name={VegaIconNames.INFO} size={16} />
+                        {t('View order details')}
+                      </DropdownMenuItem>
+                    </ActionsDropdown>
+                  )}
+              </div>
+            );
+          },
         },
-      },
-    ],
-    [onCancel, onMarketClick, props.isReadOnly, showAllActions]
-  );
+      ],
+      [onCancel, onMarketClick, onView, props.isReadOnly, showAllActions]
+    );
 
-  return (
-    <AgGrid
-      defaultColDef={defaultColDef}
-      columnDefs={columnDefs}
-      getRowId={({ data }) => data.id}
-      components={{ MarketNameCell }}
-      {...props}
-    />
-  );
-});
+    return (
+      <AgGrid
+        defaultColDef={defaultColDef}
+        columnDefs={columnDefs}
+        getRowId={({ data }) => data.id}
+        components={{ MarketNameCell }}
+        {...props}
+      />
+    );
+  }
+);

libs/positions/src/lib/positions-data-providers.spec.ts

@@ -2,7 +2,12 @@ import * as Schema from '@vegaprotocol/types';
 import type { Account } from '@vegaprotocol/accounts';
 import type { MarketWithData } from '@vegaprotocol/markets';
 import type { PositionFieldsFragment } from './__generated__/Positions';
-import { getMetrics, rejoinPositionData } from './positions-data-providers';
+import type { Position } from './positions-data-providers';
+import {
+  getMetrics,
+  preparePositions,
+  rejoinPositionData,
+} from './positions-data-providers';
 import { PositionStatus } from '@vegaprotocol/types';
 
 const accounts = [
@@ -223,4 +228,29 @@ describe('getMetrics && rejoinPositionData', () => {
     );
     expect(metrics[1].status).toEqual(positions[1].positionStatus);
   });
+
+  it('sorts and filters positions', () => {
+    const createPosition = (override?: Partial<Position>) =>
+      ({
+        marketState: Schema.MarketState.STATE_ACTIVE,
+        marketCode: 'a',
+        ...override,
+      } as Position);
+
+    const data = [
+      createPosition(),
+      createPosition({
+        marketCode: 'c',
+        marketState: Schema.MarketState.STATE_CANCELLED,
+      }),
+      createPosition({ marketCode: 'd' }),
+      createPosition({ marketCode: 'b' }),
+    ];
+
+    const withoutClosed = preparePositions(data, false);
+    expect(withoutClosed.map((p) => p.marketCode)).toEqual(['a', 'b', 'd']);
+
+    const withClosed = preparePositions(data, true);
+    expect(withClosed.map((p) => p.marketCode)).toEqual(['a', 'b', 'c', 'd']);
+  });
 });