chore: error suggestion

Co-authored-by: Joe Tsang <30622993+jtsang586@users.noreply.github.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/components/txs/details/tx-details-wrapper.tsx

@@ -11,6 +11,7 @@ import { TxDetailsBatch } from './tx-batch';
 import { TxDetailsChainEvent } from './tx-chain-event';
 import { TxDetailsNodeVote } from './tx-node-vote';
 import { TxDetailsOrderCancel } from './tx-order-cancel';
+import { TxDetailsStopOrderCancel } from './tx-stop-order-cancel';
 import { TxDetailsOrderAmend } from './tx-order-amend';
 import { TxDetailsWithdrawSubmission } from './tx-withdraw-submission';
 import { TxDetailsDelegate } from './tx-delegation';
@@ -85,6 +86,8 @@ function getTransactionComponent(txData?: BlockExplorerTransactionResult) {
       return TxDetailsProtocolUpgrade;
     case 'Cancel Order':
       return TxDetailsOrderCancel;
+    case 'Stop Orders Cancellation':
+      return TxDetailsStopOrderCancel;
     case 'Amend Order':
       return TxDetailsOrderAmend;
     case 'Validator Heartbeat':

apps/explorer/src/app/components/txs/details/tx-stop-order-cancel.tsx

@@ -0,0 +1,60 @@
+import { t } from '@vegaprotocol/i18n';
+import type { BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
+import { MarketLink } from '../../links/';
+import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
+import { TxDetailsShared } from './shared/tx-details-shared';
+import { TableCell, TableRow, TableWithTbody } from '../../table';
+import { CancelSummary } from '../../order-summary/order-cancellation';
+import Hash from '../../links/hash';
+import type { components } from '../../../../types/explorer';
+
+export type StopOrderCancellationTransaction =
+  components['schemas']['v1StopOrdersCancellation'];
+
+interface TxDetailsStopOrderCancelProps {
+  txData: BlockExplorerTransactionResult | undefined;
+  pubKey: string | undefined;
+  blockData: TendermintBlocksResponse | undefined;
+}
+
+/**
+ * Someone cancelled a stop order
+ */
+export const TxDetailsStopOrderCancel = ({
+  txData,
+  pubKey,
+  blockData,
+}: TxDetailsStopOrderCancelProps) => {
+  if (!txData || !txData.command) {
+    return <>{t('Awaiting Block Explorer transaction details')}</>;
+  }
+
+  const command: StopOrderCancellationTransaction =
+    txData.command.stopOrdersCancellation;
+
+  const { marketId, stopOrderId } = command;
+
+  return (
+    <TableWithTbody className="mb-8" allowWrap={true}>
+      <TxDetailsShared txData={txData} pubKey={pubKey} blockData={blockData} />
+      <TableRow modifier="bordered">
+        <TableCell>{t('Cancel stop order')}</TableCell>
+        <TableCell>
+          {stopOrderId ? (
+            <Hash text={stopOrderId} />
+          ) : (
+            <CancelSummary orderId={stopOrderId} marketId={marketId} />
+          )}
+        </TableCell>
+      </TableRow>
+      {marketId ? (
+        <TableRow modifier="bordered">
+          <TableCell>{t('Market')}</TableCell>
+          <TableCell>
+            <MarketLink id={marketId} />
+          </TableCell>
+        </TableRow>
+      ) : null}
+    </TableWithTbody>
+  );
+};

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

@@ -34,6 +34,7 @@ export type FilterOption =
   | 'Protocol Upgrade'
   | 'Register new Node'
   | 'State Variable Proposal'
+  | 'Stop Orders Cancellation'
   | 'Submit Oracle Data'
   | 'Submit Order'
   | 'Transfer Funds'
@@ -53,6 +54,7 @@ export const PrimaryFilterOptions: FilterOption[] = [
   'Delegate',
   'Liquidity Provision Order',
   'Proposal',
+  'Stop Orders Cancellation',
   'Submit Oracle Data',
   'Submit Order',
   'Transfer Funds',

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/src/i18n/translations/dev.json

@@ -626,7 +626,8 @@
   "status-tendermint": "Consensus",
   "status-ersatz": "Standby",
   "status-pending": "Candidate",
-  "ersatzDescription": "To be promoted, a standby validator must have more than the lowest consensus stake, plus a bonus given to existing validators. This currently requires a minimum of {{stakeNeededForPromotion}} stake assuming no penalties. Only one validator per epoch can be promoted.",
+  "ersatzDescription1": "To be promoted, a standby validator must have more than the lowest consensus stake, plus a bonus given to existing validators, and only one standby validator can be promoted per epoch. Currently this requires a minimum of",
+  "ersatzDescription2": "stake assuming no performance penalty incurred.",
   "pendingDescription1": "Anyone can",
   "pendingDescriptionLinkText": "set up and run a node on Vega",
   "pendingDescription2": ". A node can move from being a candidate into standby based on how much nomination it attracts, assuming it has proven reliability by sending heartbeats to the network.",
@@ -784,6 +785,7 @@
   "PerformancePenaltyDescription": "Performance score is a measure of how often a validator proposed blocks in the last epoch relative to how many they should be expected to propose based on their voting power. Performance penalty is applied for having a performance score of less than 1",
   "UnnormalisedVotingPowerDescription": "The voting power of the validator based on their final validator score after all penalties have been applied",
   "NormalisedVotingPowerDescription": "The voting power of the validator, adjusted to ensure all validator scores sum to 1, used for distribution of rewards",
+  "NonConsensusVotingPowerDescription": "The voting power of the validator. Only consensus validators have voting power",
   "Score": "Score",
   "performancePenalty": "Performance penalty",
   "overstaked": "Overstaked",

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/governance/src/routes/staking/home/validator-tables/consensus-validators-table.tsx

@@ -389,10 +389,10 @@ export const ConsensusValidatorsTable = ({
         },
         {
           field: ValidatorFields.NORMALISED_VOTING_POWER,
-          headerName: t(ValidatorFields.NORMALISED_VOTING_POWER).toString(),
+          headerName: t('votingPower').toString(),
           headerTooltip: t('NormalisedVotingPowerDescription').toString(),
           cellRenderer: VotingPowerRenderer,
-          width: 200,
+          width: 120,
         },
         {
           field: ValidatorFields.TOTAL_PENALTIES,

apps/governance/src/routes/staking/home/validator-tables/standby-pending-validators-table.tsx

@@ -20,6 +20,7 @@ import {
   TotalStakeRenderer,
   StakeShareRenderer,
   PendingStakeRenderer,
+  VotingPowerRenderer,
 } from './shared';
 import type { AgGridReact } from 'ag-grid-react';
 import type { ColDef } from 'ag-grid-community';
@@ -39,7 +40,6 @@ interface StandbyPendingValidatorsTableProps extends ValidatorsTableProps {
 export const StandbyPendingValidatorsTable = ({
   data,
   previousEpochData,
-  totalStake,
   stakeNeededForPromotion,
   stakeNeededForPromotionDescription,
   validatorsView,
@@ -132,6 +132,8 @@ export const StandbyPendingValidatorsTable = ({
               name,
             },
             [ValidatorFields.STAKE]: stakedTotal,
+            [ValidatorFields.NORMALISED_VOTING_POWER]: '0%',
+            [ValidatorFields.UNNORMALISED_VOTING_POWER]: '0%',
             [ValidatorFields.STAKE_NEEDED_FOR_PROMOTION]:
               individualStakeNeededForPromotion || null,
             [ValidatorFields.STAKE_NEEDED_FOR_PROMOTION_DESCRIPTION]:
@@ -223,7 +225,14 @@ export const StandbyPendingValidatorsTable = ({
           headerName: t(ValidatorFields.STAKE_SHARE).toString(),
           headerTooltip: t('StakeShareDescription').toString(),
           cellRenderer: StakeShareRenderer,
-          width: 100,
+          width: 120,
+        },
+        {
+          field: ValidatorFields.NORMALISED_VOTING_POWER,
+          headerName: t('votingPower').toString(),
+          headerTooltip: t('NonConsensusVotingPowerDescription').toString(),
+          cellRenderer: VotingPowerRenderer,
+          width: 120,
         },
         // {
         //   field: ValidatorFields.STAKE_NEEDED_FOR_PROMOTION,

apps/governance/src/routes/staking/home/validator-tables/validator-tables.tsx

@@ -17,6 +17,10 @@ import type { PreviousEpochQuery } from '../../__generated__/PreviousEpoch';
 import type { StakingQuery } from '../../__generated__/Staking';
 import type { StakingDelegationFieldsFragment } from '../../__generated__/Staking';
 import type { ValidatorWithUserData } from './shared';
+import {
+  NetworkParams,
+  useNetworkParams,
+} from '@vegaprotocol/network-parameters';
 
 export interface ValidatorsTableProps {
   nodesData: NodesQuery | undefined;
@@ -41,6 +45,9 @@ export const ValidatorTables = ({
   const {
     appState: { decimals },
   } = useAppState();
+  const { params } = useNetworkParams([
+    NetworkParams.network_validators_incumbentBonus,
+  ]);
 
   const [validatorsView, setValidatorsView] = useState<ValidatorsView>('all');
   const totalStake = useMemo(
@@ -52,6 +59,10 @@ export const ValidatorTables = ({
     () => userStakingData?.party?.stakingSummary.currentStakeAvailable || '0',
     [userStakingData?.party?.stakingSummary.currentStakeAvailable]
   );
+  const incumbentBonus = useMemo(
+    () => new BigNumber(params?.network_validators_incumbentBonus),
+    [params?.network_validators_incumbentBonus]
+  );
 
   let stakeNeededForPromotion = undefined;
   let delegations: StakingDelegationFieldsFragment[] | undefined = undefined;
@@ -126,28 +137,23 @@ export const ValidatorTables = ({
     consensusValidators.length &&
     (standbyValidators.length || pendingValidators.length)
   ) {
-    const lowestRankingConsensusScore = consensusValidators.reduce(
+    const lowestConsensusStake = consensusValidators.reduce(
       (lowest: ValidatorWithUserData, validator: ValidatorWithUserData) => {
-        if (
-          Number(validator.rankingScore.rankingScore) <
-          Number(lowest.rankingScore.rankingScore)
-        ) {
+        if (Number(validator.stakedTotal) < Number(lowest.stakedTotal)) {
           lowest = validator;
         }
         return lowest;
       }
-    ).rankingScore.rankingScore;
+    ).stakedTotal;
 
-    const lowestRankingBigNum = toBigNum(lowestRankingConsensusScore, 0);
-    const consensusStakedTotal = consensusValidators.reduce((acc, cur) => {
-      return acc.plus(toBigNum(cur.stakedTotal, decimals));
-    }, new BigNumber(0));
+    const lowestRankingBigNum = toBigNum(lowestConsensusStake, decimals);
 
     stakeNeededForPromotion = formatNumber(
-      lowestRankingBigNum.times(consensusStakedTotal),
+      lowestRankingBigNum.multipliedBy(incumbentBonus.plus(1)),
       2
     ).toString();
   }
+
   return (
     <section data-testid="validator-tables">
       <div className="grid w-full justify-end">
@@ -187,12 +193,18 @@ export const ValidatorTables = ({
         <div className="mb-10">
           <SubHeading title={t('status-ersatz')} />
           <p>
-            <Trans
-              i18nKey="ersatzDescription"
-              values={{
-                stakeNeededForPromotion,
-              }}
-            />
+            <span>
+              <Trans i18nKey="ersatzDescription1" />
+            </span>
+
+            <span className="text-white font-bold">
+              {' '}
+              {stakeNeededForPromotion}{' '}
+            </span>
+
+            <span>
+              <Trans i18nKey="ersatzDescription2" />
+            </span>
           </p>
           <StandbyPendingValidatorsTable
             data={standbyValidators}

apps/governance/src/routes/staking/shared.ts

@@ -68,7 +68,7 @@ export const calculateOverstakedPenalty = (nodeId: string, nodes: Node[]) => {
   }
   const penalty = new BigNumber(1)
     .minus(
-      new BigNumber(node.rewardScore?.rawValidatorScore || 0).dividedBy(tts)
+      new BigNumber(node.rewardScore?.rawValidatorScore || 1).dividedBy(tts)
     )
     .times(100);
   return penalty.isLessThan(0) ? new BigNumber(0) : penalty;

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

@@ -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-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', () => {
@@ -447,8 +452,7 @@ describe('amend and cancel order', { tags: '@smoke' }, () => {
       liquidityProvisionId: null,
     });
     cy.get(`[row-id=${orderId}]`)
-      .find('[data-testid="edit"]')
-      .should('have.text', 'Edit')
+      .find('[data-testid="icon-edit"]')
       .then(($btn) => {
         cy.wrap($btn).click();
         cy.getByTestId('dialog-title').should('have.text', 'Edit order');
@@ -476,8 +480,7 @@ describe('amend and cancel order', { tags: '@smoke' }, () => {
       liquidityProvisionId: null,
     });
     cy.get(`[row-id=${orderId}]`)
-      .find(`[data-testid="cancel"]`)
-      .should('have.text', 'Cancel')
+      .find(`[data-testid="icon-cross"]`)
       .then(($btn) => {
         cy.wrap($btn).click({ force: true });
         const order: OrderCancellation = {
@@ -514,8 +517,7 @@ describe('amend and cancel order', { tags: '@smoke' }, () => {
       liquidityProvisionId: null,
     });
     cy.get(`[row-id=${orderId}]`)
-      .find('[data-testid="edit"]')
-      .should('have.text', 'Edit')
+      .find('[data-testid="icon-edit"]')
       .then(($btn) => {
         cy.wrap($btn).click({ force: true });
         cy.getByTestId('dialog-title').should('have.text', 'Edit order');

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

@@ -1,372 +0,0 @@
-import { checkSorting, aliasGQLQuery } from '@vegaprotocol/cypress';
-import { marketsDataQuery } from '@vegaprotocol/mock';
-import { positionsQuery } from '@vegaprotocol/mock';
-
-// #region consts
-const closePosition = 'close-position';
-const dialogCloseX = 'dialog-close';
-const dialogContent = 'dialog-content';
-const dropDownMenu = 'dropdown-menu';
-const marketActionsContent = 'position-actions-content';
-const positions = 'Positions';
-const tabPositions = 'tab-positions';
-const toastContent = 'toast-content';
-const tooltipContent = 'tooltip-content';
-// #endregion
-
-describe('positions', { tags: '@smoke', testIsolation: true }, () => {
-  beforeEach(() => {
-    cy.mockTradingPage();
-    cy.mockSubscription();
-    cy.setVegaWallet();
-  });
-  it('renders positions on trading page', () => {
-    visitAndClickPositions();
-    // 7004-POSI-001
-    // 7004-POSI-002
-    validatePositionsDisplayed();
-  });
-
-  // TODO: move this to sim, its flakey
-  it.skip('renders positions on portfolio page', () => {
-    cy.mockGQL((req) => {
-      const positions = positionsQuery();
-      if (positions.positions?.edges) {
-        positions.positions.edges.push(
-          ...positions.positions.edges.map((edge) => ({
-            ...edge,
-            node: {
-              ...edge.node,
-              party: {
-                ...edge.node.party,
-                id: 'vega-1',
-              },
-            },
-          }))
-        );
-      }
-      aliasGQLQuery(req, 'Positions', positions);
-    });
-    visitAndClickPositions();
-    // 7004-POSI-001
-    // 7004-POSI-002
-    validatePositionsDisplayed(true);
-  });
-
-  it('Close my position', () => {
-    visitAndClickPositions();
-    cy.getByTestId(closePosition).first().click();
-    // 7004-POSI-010
-    cy.getByTestId(toastContent).should(
-      'contain.text',
-      'Awaiting confirmation'
-    );
-  });
-});
-
-describe('positions', { tags: '@regression', testIsolation: true }, () => {
-  beforeEach(() => {
-    cy.mockTradingPage();
-    cy.mockSubscription();
-    cy.setVegaWallet();
-  });
-
-  it('rows should be displayed despite errors', () => {
-    const errors = [
-      {
-        message:
-          'no market data for market: 9c55fb644c6f7de5422d40d691a62bffd5898384c70135bab29ba1e3e2e5280a',
-        path: ['marketsConnection', 'edges'],
-        extensions: {
-          code: 13,
-          type: 'Internal',
-        },
-      },
-    ];
-    const marketData = marketsDataQuery();
-    const edges = marketData.marketsConnection?.edges.map((market) => {
-      const replace =
-        market.node.data?.market.id === 'market-2' ? null : market.node.data;
-      return { ...market, node: { ...market.node, data: replace } };
-    });
-    const overrides = {
-      ...marketData,
-      marketsConnection: { ...marketData.marketsConnection, edges },
-    };
-    cy.mockGQL((req) => {
-      aliasGQLQuery(req, 'MarketsData', overrides, errors);
-    });
-    cy.visit('/#/markets/market-0');
-    const emptyCells = [
-      'notional',
-      'markPrice',
-      'currentLeverage',
-      'averageEntryPrice',
-    ];
-    cy.getByTestId(tabPositions)
-      .first()
-      .within(() => {
-        cy.get(
-          '[row-id="02eceaba4df2bef76ea10caf728d8a099a2aa846cced25737cccaa9812342f65-market-2"]'
-        )
-          .eq(0)
-          .within(() => {
-            emptyCells.forEach((cell) => {
-              cy.get(`[col-id="${cell}"]`).should('contain.text', '-');
-            });
-          });
-      });
-  });
-
-  it('error message should be displayed', () => {
-    const errors = [
-      {
-        message:
-          'no market data for asset: 9c55fb644c6f7de5422d40d691a62bffd5898384c70135bab29ba1e3e2e5280a',
-        path: ['assets', 'edges'],
-        extensions: {
-          code: 13,
-          type: 'Internal',
-        },
-      },
-    ];
-    const overrides = {
-      marketsConnection: { edges: [] },
-    };
-    cy.mockGQL((req) => {
-      aliasGQLQuery(req, 'MarketsData', overrides, errors);
-    });
-    cy.visit('/#/markets/market-0');
-    cy.getByTestId(tabPositions).contains('no market data');
-  });
-
-  it('sorting by Market', () => {
-    visitAndClickPositions();
-    const marketsSortedDefault = [
-      'AAPL.MF21',
-      'BTCUSD.MF21',
-      'ETHBTC.QM21',
-      'SOLUSD',
-    ];
-    const marketsSortedAsc = [
-      'AAPL.MF21',
-      'BTCUSD.MF21',
-      'ETHBTC.QM21',
-      'SOLUSD',
-    ];
-    const marketsSortedDesc = [
-      'SOLUSD',
-      'ETHBTC.QM21',
-      'BTCUSD.MF21',
-      'AAPL.MF21',
-    ];
-    cy.getByTestId(positions).click();
-    // 7004-POSI-003
-    checkSorting(
-      'marketName',
-      marketsSortedDefault,
-      marketsSortedAsc,
-      marketsSortedDesc,
-      ' [data-testid="market-code"]'
-    );
-  });
-
-  // let elementWidth: number;
-
-  it('Resize column', () => {
-    visitAndClickPositions();
-    cy.get('.ag-overlay-loading-wrapper').should('not.be.visible');
-    cy.get('.ag-header-container').within(() => {
-      cy.get(`[col-id="marketName"]`)
-        .find('.ag-header-cell-resize')
-        .realMouseDown()
-        .realMouseMove(250, 0)
-        .realMouseUp();
-    });
-
-    // 7004-POSI-006
-    cy.get(`[col-id="marketName"]`)
-      .invoke('width')
-      .should('be.greaterThan', 250);
-  });
-
-  // This test depends on the previous one
-  it('Has persisted column widths', () => {
-    const width = 400;
-
-    cy.window().then((win) => {
-      win.localStorage.setItem(
-        'vega_positions_store',
-        JSON.stringify({
-          state: {
-            gridStore: {
-              columnState: [{ colId: 'marketName', width }],
-            },
-          },
-        })
-      );
-    });
-
-    visitAndClickPositions();
-
-    // 7004-POSI-012
-    cy.get('.ag-center-cols-container .ag-row')
-      .first()
-      .find('[col-id="marketName"]')
-      .invoke('outerWidth')
-      .should('equal', width);
-  });
-
-  it('Scroll horizontally', () => {
-    visitAndClickPositions();
-
-    cy.get('.ag-header-container').within(() => {
-      cy.get(`[col-id="marketName"]`)
-        .find('.ag-header-cell-resize')
-        .realMouseDown()
-        .realMouseMove(400, 0)
-        .realMouseUp();
-    });
-    cy.get('[col-id="marketName"]').should('be.visible');
-    cy.get('.ag-body-horizontal-scroll-viewport').realMouseWheel({
-      deltaX: 500,
-    });
-    // 7004-POSI-004
-    cy.get('[col-id="unrealisedPNL"]').should('be.visible');
-  });
-
-  it('Drag and drop columns', () => {
-    visitAndClickPositions();
-    cy.get('.ag-overlay-loading-wrapper').should('not.be.visible');
-    cy.get('[col-id="marketName"]')
-      .realMouseDown()
-      .realMouseMove(700, 15)
-      .realMouseUp();
-
-    // 7004-POSI-005
-    cy.get('[col-id="marketName"]').should(($element) => {
-      const attributeValue = $element.attr('aria-colindex');
-      expect(attributeValue).not.to.equal('1');
-    });
-  });
-
-  it('I can see warnings', () => {
-    visitAndClickPositions();
-
-    cy.get('[col-id="openVolume"]')
-      .eq(3)
-      .within(() => {
-        cy.get('[aria-label="warning-sign icon"]')
-          .should('be.visible')
-          .realHover();
-      });
-    // 7004-POSI-011
-    cy.getByTestId(tooltipContent).should('be.visible');
-  });
-
-  it('Positive and Negative color change', () => {
-    cy.visit('/#/markets/market-0');
-    cy.getByTestId(positions).click();
-    // 7004-POSI-007
-    cy.get('.ag-center-cols-container').within(() => {
-      assertPNLColor(
-        '[col-id="realisedPNL"]',
-        'text-market-green-600',
-        'text-market-red'
-      );
-    });
-    cy.get('.ag-center-cols-container').within(() => {
-      assertPNLColor(
-        '[col-id="unrealisedPNL"]',
-        'text-market-green-600',
-        'text-market-red'
-      );
-    });
-    cy.get('.ag-center-cols-container').within(() => {
-      assertPNLColor(
-        '[col-id="openVolume"]',
-        'text-market-green-600',
-        'text-market-red'
-      );
-    });
-  });
-
-  it('View settlement asset', () => {
-    visitAndClickPositions();
-    cy.get('[col-id="asset"]')
-      .eq(3)
-      .within(() => {
-        cy.get('button[type="button"]').click();
-      });
-    // 7004-POSI-008
-    cy.getByTestId(dialogContent).should('be.visible');
-    cy.getByTestId(dialogCloseX).click();
-    cy.getByTestId(dropDownMenu).first().click();
-    cy.getByTestId(marketActionsContent).click();
-    // 7004-POSI-009
-    cy.getByTestId(dialogContent).should('be.visible');
-  });
-});
-
-function validatePositionsDisplayed(multiKey = false) {
-  cy.getByTestId('tab-positions').should('be.visible');
-  cy.getByTestId('tab-positions')
-    .get('.ag-center-cols-container .ag-row')
-    .eq(multiKey ? 3 : 1)
-    .within(() => {
-      cy.get('[col-id="marketName"]')
-        .should('be.visible')
-        .invoke('text')
-        .should('not.be.empty');
-
-      cy.get('[col-id="openVolume"]').should('not.be.empty');
-
-      // includes average entry price, mark price, realised PNL & leverage
-      cy.getByTestId('flash-cell').should('not.be.empty');
-
-      if (!multiKey) {
-        cy.get('[col-id="currentLeverage"]').should('contain.text', '2,767.3');
-        cy.get('[col-id="marginAccountBalance"]') // margin allocated
-          .should('contain.text', '0.01');
-      }
-
-      cy.get('[col-id="unrealisedPNL"]').should('not.be.empty');
-      cy.get('[col-id="notional"]').should('contain.text', '276,761.40348'); // Total tDAI position
-      cy.get('[col-id="realisedPNL"]').should('contain.text', '2.30'); // Total Realised PNL
-      cy.get('[col-id="unrealisedPNL"]').should('contain.text', '8.95'); // Total Unrealised PNL
-    });
-
-  cy.get('.ag-header-row [col-id="notional"]')
-    .should('contain.text', 'Notional')
-    .realHover();
-  cy.get('.ag-popup').should('contain.text', 'Mark price x open volume');
-
-  cy.getByTestId('close-position').should('be.visible').and('have.length', 3);
-}
-
-function assertPNLColor(
-  pnlSelector: string,
-  positiveClass: string,
-  negativeClass: string
-) {
-  cy.get(pnlSelector).each(($el) => {
-    const value = parseFloat($el.text());
-
-    if (value > 0) {
-      cy.wrap($el).invoke('attr', 'class').should('contain', positiveClass);
-    } else if (value < 0) {
-      cy.wrap($el).invoke('attr', 'class').should('contain', negativeClass);
-    } else if (value == 0) {
-      cy.wrap($el)
-        .invoke('attr', 'class')
-        .should('not.contain', negativeClass, positiveClass);
-    } else {
-      throw new Error('Unexpected value');
-    }
-  });
-}
-
-function visitAndClickPositions() {
-  cy.visit('/#/markets/market-0');
-  cy.getByTestId(positions).click();
-}

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/market-selector/market-selector-item.tsx

@@ -89,17 +89,15 @@ const MarketData = ({
       ? addDecimalsFormatNumber(vol, market.positionDecimalPlaces)
       : '0.00';
 
+  const productType = market.tradableInstrument.instrument.product.__typename;
+
   return (
     <>
       <div className="w-2/5" role="gridcell">
         <h3 className="text-ellipsis text-sm lg:text-base whitespace-nowrap overflow-hidden">
           {market.tradableInstrument.instrument.code}{' '}
-          {allProducts && (
-            <MarketProductPill
-              productType={
-                market.tradableInstrument.instrument.product.__typename
-              }
-            />
+          {allProducts && productType && (
+            <MarketProductPill productType={productType} />
           )}
         </h3>
         {mode && (

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

@@ -2,7 +2,7 @@ import { t } from '@vegaprotocol/i18n';
 import uniqBy from 'lodash/uniqBy';
 import type { MarketMaybeWithDataAndCandles } from '@vegaprotocol/markets';
 import {
-  Input,
+  TradingInput,
   TinyScroll,
   VegaIcon,
   VegaIconNames,
@@ -57,7 +57,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/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/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"

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/cells/market-name-cell.tsx

@@ -2,28 +2,27 @@ import type { MouseEvent } from 'react';
 import { useCallback } from 'react';
 import get from 'lodash/get';
 import { Pill } from '@vegaprotocol/ui-toolkit';
-import type { Market } from '@vegaprotocol/types';
-
-const productTypeMap = {
-  Future: 'Futr',
-  FutureProduct: 'Futr',
-  Spot: 'Spot',
-  SpotProduct: 'Spot',
-  Perpetual: 'Perp',
-  PerpetualProduct: 'Perp',
-} as const;
-export type ProductType = keyof typeof productTypeMap | undefined;
+import {
+  ProductTypeShortName,
+  type Market,
+  type ProductType,
+  ProductTypeMapping,
+} from '@vegaprotocol/types';
 
 export const MarketProductPill = ({
   productType,
 }: {
-  productType?: ProductType;
+  productType: ProductType;
 }) => {
-  return productType ? (
-    <Pill size="xxs" className="uppercase ml-0.5" title={productType}>
-      {productTypeMap[productType] || productType}
+  return (
+    <Pill
+      size="xxs"
+      className="uppercase ml-0.5"
+      title={ProductTypeMapping[productType]}
+    >
+      {ProductTypeShortName[productType]}
     </Pill>
-  ) : null;
+  );
 };
 
 interface MarketNameCellProps {
@@ -66,7 +65,7 @@ export const MarketNameCell = ({
       <span data-testid="market-code" data-market-id={id}>
         {value}
       </span>
-      <MarketProductPill productType={productType} />
+      {productType && <MarketProductPill productType={productType} />}
     </>
   );
   return onMarketClick && id ? (

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-limit-amount.tsx

@@ -1,4 +1,8 @@
-import { FormGroup, Input, InputError } from '@vegaprotocol/ui-toolkit';
+import {
+  TradingFormGroup,
+  TradingInput,
+  TradingInputError,
+} from '@vegaprotocol/ui-toolkit';
 import { toDecimal, validateAmount } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import type { DealTicketAmountProps } from './deal-ticket-amount';
@@ -22,17 +26,17 @@ export const DealTicketLimitAmount = ({
   const renderError = () => {
     if (sizeError) {
       return (
-        <InputError testId="deal-ticket-error-message-size-limit">
+        <TradingInputError testId="deal-ticket-error-message-size-limit">
           {sizeError}
-        </InputError>
+        </TradingInputError>
       );
     }
 
     if (priceError) {
       return (
-        <InputError testId="deal-ticket-error-message-price-limit">
+        <TradingInputError testId="deal-ticket-error-message-price-limit">
           {priceError}
-        </InputError>
+        </TradingInputError>
       );
     }
 
@@ -43,7 +47,7 @@ export const DealTicketLimitAmount = ({
     <div className="mb-2">
       <div className="flex items-start gap-4">
         <div className="flex-1">
-          <FormGroup
+          <TradingFormGroup
             label={t('Size')}
             labelFor="input-order-size-limit"
             className="!mb-0"
@@ -59,8 +63,8 @@ export const DealTicketLimitAmount = ({
                 },
                 validate: validateAmount(sizeStep, 'Size'),
               }}
-              render={({ field }) => (
-                <Input
+              render={({ field, fieldState }) => (
+                <TradingInput
                   id="input-order-size-limit"
                   className="w-full"
                   type="number"
@@ -68,15 +72,16 @@ export const DealTicketLimitAmount = ({
                   min={sizeStep}
                   data-testid="order-size"
                   onWheel={(e) => e.currentTarget.blur()}
+                  hasError={!!fieldState.error}
                   {...field}
                 />
               )}
             />
-          </FormGroup>
+          </TradingFormGroup>
         </div>
-        <div className="pt-7 leading-10">@</div>
+        <div className="pt-5 leading-10">@</div>
         <div className="flex-1">
-          <FormGroup
+          <TradingFormGroup
             labelFor="input-price-quote"
             label={t(`Price (${quoteName})`)}
             labelAlign="right"
@@ -93,19 +98,20 @@ export const DealTicketLimitAmount = ({
                 },
                 validate: validateAmount(priceStep, 'Price'),
               }}
-              render={({ field }) => (
-                <Input
+              render={({ field, fieldState }) => (
+                <TradingInput
                   id="input-price-quote"
                   className="w-full"
                   type="number"
                   step={priceStep}
                   data-testid="order-price"
                   onWheel={(e) => e.currentTarget.blur()}
+                  hasError={!!fieldState.error}
                   {...field}
                 />
               )}
             />
-          </FormGroup>
+          </TradingFormGroup>
         </div>
       </div>
       {renderError()}

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

@@ -4,7 +4,11 @@ import {
   validateAmount,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import { Input, InputError, Tooltip } from '@vegaprotocol/ui-toolkit';
+import {
+  TradingInput,
+  TradingInputError,
+  Tooltip,
+} from '@vegaprotocol/ui-toolkit';
 import { isMarketInAuction } from '@vegaprotocol/markets';
 import type { DealTicketAmountProps } from './deal-ticket-amount';
 import { Controller } from 'react-hook-form';
@@ -33,7 +37,7 @@ export const DealTicketMarketAmount = ({
     <div className="mb-2">
       <div className="flex items-start gap-4">
         <div className="flex-1">
-          <div className="mb-2 text-sm">{t('Size')}</div>
+          <div className="mb-2 text-xs">{t('Size')}</div>
           <Controller
             name="size"
             control={control}
@@ -45,8 +49,8 @@ export const DealTicketMarketAmount = ({
               },
               validate: validateAmount(sizeStep, 'Size'),
             }}
-            render={({ field }) => (
-              <Input
+            render={({ field, fieldState }) => (
+              <TradingInput
                 id="input-order-size-market"
                 className="w-full"
                 type="number"
@@ -54,12 +58,13 @@ export const DealTicketMarketAmount = ({
                 min={sizeStep}
                 onWheel={(e) => e.currentTarget.blur()}
                 data-testid="order-size"
+                hasError={!!fieldState.error}
                 {...field}
               />
             )}
           />
         </div>
-        <div className="pt-7 leading-10">@</div>
+        <div className="pt-5 leading-10">@</div>
         <div className="flex-1 text-sm text-right">
           {inAuction && (
             <Tooltip
@@ -72,7 +77,7 @@ export const DealTicketMarketAmount = ({
           )}
           <div
             data-testid="last-price"
-            className={classNames('leading-10', { 'pt-7': !inAuction })}
+            className={classNames('leading-10', { 'pt-5': !inAuction })}
           >
             {priceFormatted && quoteName ? (
               <>
@@ -85,12 +90,12 @@ export const DealTicketMarketAmount = ({
         </div>
       </div>
       {sizeError && (
-        <InputError
+        <TradingInputError
           intent="danger"
           testId="deal-ticket-error-message-size-market"
         >
           {sizeError}
-        </InputError>
+        </TradingInputError>
       )}
     </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.tsx

@@ -10,13 +10,13 @@ import {
 import { useForm, Controller, useController } from 'react-hook-form';
 import * as Schema from '@vegaprotocol/types';
 import {
-  Radio,
-  RadioGroup,
-  Input,
-  Checkbox,
-  FormGroup,
-  InputError,
-  Select,
+  TradingRadio,
+  TradingRadioGroup,
+  TradingInput,
+  TradingCheckbox,
+  TradingFormGroup,
+  TradingInputError,
+  TradingSelect,
   Tooltip,
 } from '@vegaprotocol/ui-toolkit';
 import { getDerivedPrice, type Market } from '@vegaprotocol/markets';
@@ -187,9 +187,9 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
         }}
       />
       {errors.type && (
-        <InputError testId="stop-order-error-message-type">
+        <TradingInputError testId="stop-order-error-message-type">
           {errors.type.message}
-        </InputError>
+        </TradingInputError>
       )}
 
       <Controller
@@ -199,21 +199,21 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
           <SideSelector value={field.value} onValueChange={field.onChange} />
         )}
       />
-      <FormGroup label={t('Trigger')} compact={true} labelFor="">
+      <TradingFormGroup label={t('Trigger')} compact={true} labelFor="">
         <Controller
           name="triggerDirection"
           control={control}
           render={({ field }) => {
             const { onChange, value } = field;
             return (
-              <RadioGroup
+              <TradingRadioGroup
                 name="triggerDirection"
                 onChange={onChange}
                 value={value}
                 orientation="horizontal"
                 className="mb-2"
               >
-                <Radio
+                <TradingRadio
                   value={
                     Schema.StopOrderTriggerDirection
                       .TRIGGER_DIRECTION_RISES_ABOVE
@@ -221,7 +221,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
                   id="triggerDirection-risesAbove"
                   label={'Rises above'}
                 />
-                <Radio
+                <TradingRadio
                   value={
                     Schema.StopOrderTriggerDirection
                       .TRIGGER_DIRECTION_FALLS_BELOW
@@ -229,7 +229,7 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
                   id="triggerDirection-fallsBelow"
                   label={'Falls below'}
                 />
-              </RadioGroup>
+              </TradingRadioGroup>
             );
           }}
         />
@@ -246,16 +246,17 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
                 validate: validateAmount(priceStep, 'Price'),
               }}
               control={control}
-              render={({ field }) => {
+              render={({ field, fieldState }) => {
                 const { value, ...props } = field;
                 return (
                   <div className="mb-2">
-                    <Input
+                    <TradingInput
                       data-testid="triggerPrice"
                       type="number"
                       step={priceStep}
                       appendElement={asset.symbol}
                       value={value || ''}
+                      hasError={!!fieldState.error}
                       {...props}
                     />
                   </div>
@@ -263,9 +264,9 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
               }}
             />
             {errors.triggerPrice && (
-              <InputError testId="stop-order-error-message-trigger-price">
+              <TradingInputError testId="stop-order-error-message-trigger-price">
                 {errors.triggerPrice.message}
-              </InputError>
+              </TradingInputError>
             )}
           </div>
         )}
@@ -294,16 +295,17 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
                   'Trailing percentage offset'
                 ),
               }}
-              render={({ field }) => {
+              render={({ field, fieldState }) => {
                 const { value, ...props } = field;
                 return (
                   <div className="mb-2">
-                    <Input
+                    <TradingInput
                       type="number"
                       step={trailingPercentOffsetStep}
                       appendElement="%"
                       data-testid="triggerTrailingPercentOffset"
                       value={value || ''}
+                      hasError={!!fieldState.error}
                       {...props}
                     />
                   </div>
@@ -311,9 +313,9 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
               }}
             />
             {errors.triggerTrailingPercentOffset && (
-              <InputError testId="stop-order-error-message-trigger-trailing-percent-offset">
+              <TradingInputError testId="stop-order-error-message-trigger-trailing-percent-offset">
                 {errors.triggerTrailingPercentOffset.message}
-              </InputError>
+              </TradingInputError>
             )}
           </div>
         )}
@@ -324,25 +326,29 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
           render={({ field }) => {
             const { onChange, value } = field;
             return (
-              <RadioGroup
+              <TradingRadioGroup
                 onChange={onChange}
                 value={value}
                 orientation="horizontal"
               >
-                <Radio value="price" id="triggerType-price" label={'Price'} />
-                <Radio
+                <TradingRadio
+                  value="price"
+                  id="triggerType-price"
+                  label={'Price'}
+                />
+                <TradingRadio
                   value="trailingPercentOffset"
                   id="triggerType-trailingPercentOffset"
                   label={'Trailing Percent Offset'}
                 />
-              </RadioGroup>
+              </TradingRadioGroup>
             );
           }}
         />
-      </FormGroup>
+      </TradingFormGroup>
       <div className="mb-2">
         <div className="flex items-start gap-4">
-          <FormGroup
+          <TradingFormGroup
             labelFor="input-price-quote"
             label={t(`Size`)}
             className="!mb-0 flex-1"
@@ -358,10 +364,10 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
                 },
                 validate: validateAmount(sizeStep, 'Size'),
               }}
-              render={({ field }) => {
+              render={({ field, fieldState }) => {
                 const { value, ...props } = field;
                 return (
-                  <Input
+                  <TradingInput
                     id="order-size"
                     className="w-full"
                     type="number"
@@ -370,16 +376,17 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
                     onWheel={(e) => e.currentTarget.blur()}
                     data-testid="order-size"
                     value={value || ''}
+                    hasError={!!fieldState.error}
                     {...props}
                   />
                 );
               }}
             />
-          </FormGroup>
-          <div className="pt-7 leading-10">@</div>
+          </TradingFormGroup>
+          <div className="pt-5 leading-10">@</div>
           <div className="flex-1">
             {type === Schema.OrderType.TYPE_LIMIT ? (
-              <FormGroup
+              <TradingFormGroup
                 labelFor="input-price-quote"
                 label={t(`Price (${quoteName})`)}
                 labelAlign="right"
@@ -397,10 +404,10 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
                     },
                     validate: validateAmount(priceStep, 'Price'),
                   }}
-                  render={({ field }) => {
+                  render={({ field, fieldState }) => {
                     const { value, ...props } = field;
                     return (
-                      <Input
+                      <TradingInput
                         id="input-price-quote"
                         className="w-full"
                         type="number"
@@ -408,15 +415,16 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
                         data-testid="order-price"
                         onWheel={(e) => e.currentTarget.blur()}
                         value={value || ''}
+                        hasError={!!fieldState.error}
                         {...props}
                       />
                     );
                   }}
                 />
-              </FormGroup>
+              </TradingFormGroup>
             ) : (
               <div
-                className="text-sm text-right pt-7 leading-10"
+                className="text-sm text-right pt-5 leading-10"
                 data-testid="price"
               >
                 {priceFormatted && quoteName
@@ -427,21 +435,21 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
           </div>
         </div>
         {errors.size && (
-          <InputError testId="stop-order-error-message-size">
+          <TradingInputError testId="stop-order-error-message-size">
             {errors.size.message}
-          </InputError>
+          </TradingInputError>
         )}
 
         {!errors.size &&
           errors.price &&
           type === Schema.OrderType.TYPE_LIMIT && (
-            <InputError testId="stop-order-error-message-price">
+            <TradingInputError testId="stop-order-error-message-price">
               {errors.price.message}
-            </InputError>
+            </TradingInputError>
           )}
       </div>
       <div className="mb-2">
-        <FormGroup
+        <TradingFormGroup
           label={t('Time in force')}
           labelFor="select-time-in-force"
           compact={true}
@@ -449,11 +457,12 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
           <Controller
             name="timeInForce"
             control={control}
-            render={({ field }) => (
-              <Select
+            render={({ field, fieldState }) => (
+              <TradingSelect
                 id="select-time-in-force"
                 className="w-full"
                 data-testid="order-tif"
+                hasError={!!fieldState.error}
                 {...field}
               >
                 <option
@@ -468,14 +477,14 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
                 >
                   {timeInForceLabel(Schema.OrderTimeInForce.TIME_IN_FORCE_FOK)}
                 </option>
-              </Select>
+              </TradingSelect>
             )}
           />
-        </FormGroup>
+        </TradingFormGroup>
         {errors.timeInForce && (
-          <InputError testId="stop-error-message-tif">
+          <TradingInputError testId="stop-error-message-tif">
             {errors.timeInForce.message}
-          </InputError>
+          </TradingInputError>
         )}
       </div>
       <div className="flex gap-2 pb-2 justify-between">
@@ -485,29 +494,29 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
           render={({ field }) => {
             const { onChange: onCheckedChange, value } = field;
             return (
-              <Checkbox
+              <TradingCheckbox
                 onCheckedChange={onCheckedChange}
                 checked={value}
                 name="expire"
-                label={<span className="text-xs">{t('Expire')}</span>}
+                label={t('Expire')}
               />
             );
           }}
         />
-        <Checkbox
+        <TradingCheckbox
           name="reduce-only"
           checked={true}
           disabled={true}
           label={
             <Tooltip description={<span>{t(REDUCE_ONLY_TOOLTIP)}</span>}>
-              <span className="text-xs">{t('Reduce only')}</span>
+              <>{t('Reduce only')}</>
             </Tooltip>
           }
         />
       </div>
       {expire && (
         <>
-          <FormGroup
+          <TradingFormGroup
             label={t('Strategy')}
             labelFor="expiryStrategy"
             compact={true}
@@ -517,26 +526,26 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
               control={control}
               render={({ field }) => {
                 return (
-                  <RadioGroup orientation="horizontal" {...field}>
-                    <Radio
+                  <TradingRadioGroup orientation="horizontal" {...field}>
+                    <TradingRadio
                       value={
                         Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_SUBMIT
                       }
                       id="expiryStrategy-submit"
                       label={'Submit'}
                     />
-                    <Radio
+                    <TradingRadio
                       value={
                         Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_CANCELS
                       }
                       id="expiryStrategy-cancel"
                       label={'Cancel'}
                     />
-                  </RadioGroup>
+                  </TradingRadioGroup>
                 );
               }}
             />
-          </FormGroup>
+          </TradingFormGroup>
           <div className="mb-2">
             <Controller
               name="expiresAt"

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

@@ -17,8 +17,8 @@ import type { OrderSubmission } from '@vegaprotocol/wallet';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { mapFormValuesToOrderSubmission } from '../../utils/map-form-values-to-submission';
 import {
-  Checkbox,
-  InputError,
+  TradingCheckbox,
+  TradingInputError,
   Intent,
   Notification,
   Tooltip,
@@ -417,7 +417,7 @@ export const DealTicket = ({
           name="postOnly"
           control={control}
           render={({ field }) => (
-            <Checkbox
+            <TradingCheckbox
               name="post-only"
               checked={!disablePostOnlyCheckbox && field.value}
               disabled={disablePostOnlyCheckbox}
@@ -449,7 +449,7 @@ export const DealTicket = ({
           name="reduceOnly"
           control={control}
           render={({ field }) => (
-            <Checkbox
+            <TradingCheckbox
               name="reduce-only"
               checked={!disableReduceOnlyCheckbox && field.value}
               disabled={disableReduceOnlyCheckbox}
@@ -483,7 +483,7 @@ export const DealTicket = ({
               name="iceberg"
               control={control}
               render={({ field }) => (
-                <Checkbox
+                <TradingCheckbox
                   name="iceberg"
                   checked={field.value}
                   onCheckedChange={field.onChange}
@@ -572,11 +572,11 @@ export const NoWalletWarning = ({
   if (isReadOnly) {
     return (
       <div className="mb-2">
-        <InputError testId="deal-ticket-error-message-summary">
+        <TradingInputError testId="deal-ticket-error-message-summary">
           {
             'You need to connect your own wallet to start trading on this market'
           }
-        </InputError>
+        </TradingInputError>
       </div>
     );
   }
@@ -613,9 +613,9 @@ const SummaryMessage = memo(
     if (error?.message) {
       return (
         <div className="mb-2">
-          <InputError testId="deal-ticket-error-message-summary">
+          <TradingInputError testId="deal-ticket-error-message-summary">
             {error?.message}
-          </InputError>
+          </TradingInputError>
         </div>
       );
     }

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,25 @@ export const ExpirySelector = ({
   const dateFormatted = formatForInput(date);
   const minDate = formatForInput(date);
   return (
-    <FormGroup
+    <TradingFormGroup
       label={t('Expiry time/date')}
       labelFor="expiration"
       compact={true}
     >
-      <Input
+      <TradingInput
         data-testid="date-picker-field"
         id="expiration"
         type="datetime-local"
         value={dateFormatted}
         onChange={(e) => onSelect(e.target.value)}
         min={minDate}
+        hasError={!!errorMessage}
       />
       {errorMessage && (
-        <InputError testId="deal-ticket-error-message-expiry">
+        <TradingInputError testId="deal-ticket-error-message-expiry">
           {errorMessage}
-        </InputError>
+        </TradingInputError>
       )}
-    </FormGroup>
+    </TradingFormGroup>
   );
 };

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,12 +90,12 @@ export const TimeInForceSelector = ({
   };
 
   return (
-    <FormGroup
+    <TradingFormGroup
       label={t('Time in force')}
       labelFor="select-time-in-force"
       compact={true}
     >
-      <Select
+      <TradingSelect
         id="select-time-in-force"
         value={value}
         onChange={(e) => {
@@ -103,18 +103,19 @@ export const TimeInForceSelector = ({
         }}
         className="w-full"
         data-testid="order-tif"
+        hasError={!!errorMessage}
       >
         {options.map(([key, value]) => (
           <option key={key} value={value}>
             {timeInForceLabel(value)}
           </option>
         ))}
-      </Select>
+      </TradingSelect>
       {errorMessage && (
-        <InputError testId="deal-ticket-error-message-tif">
+        <TradingInputError testId="deal-ticket-error-message-tif">
           {renderError(errorMessage)}
-        </InputError>
+        </TradingInputError>
       )}
-    </FormGroup>
+    </TradingFormGroup>
   );
 };

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

@@ -1,5 +1,5 @@
 import {
-  InputError,
+  TradingInputError,
   SimpleGrid,
   Tooltip,
   TradingDropdown,
@@ -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/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/network-parameters/src/use-network-params.ts

@@ -107,6 +107,7 @@ export const NetworkParams = {
   market_liquidity_targetstake_triggering_ratio:
     'market_liquidity_targetstake_triggering_ratio',
   transfer_fee_factor: 'transfer_fee_factor',
+  network_validators_incumbentBonus: 'network_validators_incumbentBonus',
 } as const;
 
 type Params = typeof NetworkParams;

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,7 +7,14 @@ import {
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import * as Schema from '@vegaprotocol/types';
-import { ButtonLink } from '@vegaprotocol/ui-toolkit';
+import {
+  ActionsDropdown,
+  ButtonLink,
+  VegaIcon,
+  VegaIconNames,
+  DropdownMenuItem,
+  TradingDropdownCopyItem,
+} from '@vegaprotocol/ui-toolkit';
 import type { ForwardedRef } from 'react';
 import { memo, useMemo } from 'react';
 import {
@@ -28,6 +35,7 @@ import type {
 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,12 +46,13 @@ 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) => {
+>(({ onCancel, onView, onMarketClick, ...props }: StopOrdersTableProps) => {
   const showAllActions = !props.isReadOnly;
   const columnDefs: ColDef[] = useMemo(
     () => [
@@ -236,12 +245,32 @@ export const StopOrdersTable = memo<
                     {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 (

libs/positions/src/lib/liquidation-price.tsx

@@ -1,18 +1,18 @@
+import { Tooltip } from '@vegaprotocol/ui-toolkit';
 import { useEstimatePositionQuery } from './__generated__/Positions';
-import { formatRange } from '@vegaprotocol/utils';
+import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
+import { t } from '@vegaprotocol/i18n';
 
 export const LiquidationPrice = ({
   marketId,
   openVolume,
   collateralAvailable,
-  decimalPlaces,
-  formatDecimals,
+  marketDecimalPlaces,
 }: {
   marketId: string;
   openVolume: string;
   collateralAvailable: string;
-  decimalPlaces: number;
-  formatDecimals: number;
+  marketDecimalPlaces: number;
 }) => {
   const { data: currentData, previousData } = useEstimatePositionQuery({
     variables: {
@@ -23,38 +23,47 @@ export const LiquidationPrice = ({
     fetchPolicy: 'no-cache',
     skip: !openVolume || openVolume === '0',
   });
-  const data = currentData || previousData;
-  let value = '-';
 
-  if (data) {
-    const bestCase =
-      data.estimatePosition?.liquidation?.bestCase.open_volume_only.replace(
-        /\..*/,
-        ''
-      );
-    const worstCase =
-      data.estimatePosition?.liquidation?.worstCase.open_volume_only.replace(
-        /\..*/,
-        ''
-      );
-    value =
-      bestCase && worstCase && BigInt(bestCase) < BigInt(worstCase)
-        ? formatRange(
-            bestCase,
-            worstCase,
-            decimalPlaces,
-            undefined,
-            formatDecimals,
-            value
-          )
-        : formatRange(
-            worstCase,
-            bestCase,
-            decimalPlaces,
-            undefined,
-            formatDecimals,
-            value
-          );
+  const data = currentData || previousData;
+
+  if (!data?.estimatePosition?.liquidation) {
+    return <span>-</span>;
   }
-  return <span data-testid="liquidation-price">{value}</span>;
+
+  let bestCase = '-';
+  let worstCase = '-';
+
+  bestCase =
+    data.estimatePosition?.liquidation?.bestCase.open_volume_only.replace(
+      /\..*/,
+      ''
+    );
+  worstCase =
+    data.estimatePosition?.liquidation?.worstCase.open_volume_only.replace(
+      /\..*/,
+      ''
+    );
+  worstCase = addDecimalsFormatNumber(worstCase, marketDecimalPlaces);
+  bestCase = addDecimalsFormatNumber(bestCase, marketDecimalPlaces);
+
+  return (
+    <Tooltip
+      description={
+        <table>
+          <tbody>
+            <tr>
+              <th>{t('Worst case')}</th>
+              <td className="text-right font-mono pl-2">{worstCase}</td>
+            </tr>
+            <tr>
+              <th>{t('Best case')}</th>
+              <td className="text-right font-mono pl-2">{bestCase}</td>
+            </tr>
+          </tbody>
+        </table>
+      }
+    >
+      <span data-testid="liquidation-price">{worstCase}</span>
+    </Tooltip>
+  );
 };

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 = [
@@ -180,12 +185,12 @@ describe('getMetrics && rejoinPositionData', () => {
     expect(metrics[0].currentLeverage).toBeCloseTo(1.02);
     expect(metrics[0].marketDecimalPlaces).toEqual(5);
     expect(metrics[0].positionDecimalPlaces).toEqual(0);
-    expect(metrics[0].decimals).toEqual(5);
+    expect(metrics[0].assetDecimals).toEqual(5);
     expect(metrics[0].markPrice).toEqual('9431775');
     expect(metrics[0].marketId).toEqual(
       '5e6035fe6a6df78c9ec44b333c231e63d357acef0a0620d2c243f5865d1dc0d8'
     );
-    expect(metrics[0].marketName).toEqual('AAVEDAI.MF21');
+    expect(metrics[0].marketCode).toEqual('AAVEDAI.MF21');
     expect(metrics[0].marketTradingMode).toEqual(
       'TRADING_MODE_MONITORING_AUCTION'
     );
@@ -205,12 +210,12 @@ describe('getMetrics && rejoinPositionData', () => {
     expect(metrics[1].currentLeverage).toBeCloseTo(0.097);
     expect(metrics[1].marketDecimalPlaces).toEqual(5);
     expect(metrics[1].positionDecimalPlaces).toEqual(0);
-    expect(metrics[1].decimals).toEqual(5);
+    expect(metrics[1].assetDecimals).toEqual(5);
     expect(metrics[1].markPrice).toEqual('869762');
     expect(metrics[1].marketId).toEqual(
       '10c4b1114d2f6fda239b73d018bca55888b6018f0ac70029972a17fea0a6a56e'
     );
-    expect(metrics[1].marketName).toEqual('UNIDAI.MF21');
+    expect(metrics[1].marketCode).toEqual('UNIDAI.MF21');
     expect(metrics[1].marketTradingMode).toEqual('TRADING_MODE_CONTINUOUS');
     expect(metrics[1].notional).toEqual('86976200');
     expect(metrics[1].openVolume).toEqual('-100');
@@ -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']);
+  });
 });

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

@@ -26,21 +26,22 @@ import {
   PositionsDocument,
   PositionsSubscriptionDocument,
 } from './__generated__/Positions';
-import type { PositionStatus } from '@vegaprotocol/types';
+import type { PositionStatus, ProductType } from '@vegaprotocol/types';
 
 export interface Position {
   assetId: string;
   assetSymbol: string;
   averageEntryPrice: string;
   currentLeverage: number | undefined;
-  decimals: number;
+  assetDecimals: number;
   quantum: string;
   lossSocializationAmount: string;
   marginAccountBalance: string;
   marketDecimalPlaces: number;
   marketId: string;
-  marketName: string;
+  marketCode: string;
   marketTradingMode: Schema.MarketTradingMode;
+  marketState: Schema.MarketState;
   markPrice: string | undefined;
   notional: string | undefined;
   openVolume: string;
@@ -51,7 +52,7 @@ export interface Position {
   totalBalance: string;
   unrealisedPNL: string;
   updatedAt: string | null;
-  productType?: string;
+  productType: ProductType;
 }
 
 export const getMetrics = (
@@ -71,15 +72,10 @@ export const getMetrics = (
     const marginAccount = accounts?.find((account) => {
       return account.market?.id === market?.id;
     });
-    const {
-      decimals,
-      id: assetId,
-      symbol: assetSymbol,
-      quantum,
-    } = market.tradableInstrument.instrument.product.settlementAsset;
+    const asset = market.tradableInstrument.instrument.product.settlementAsset;
     const generalAccount = accounts?.find(
       (account) =>
-        account.asset.id === assetId &&
+        account.asset.id === asset.id &&
         account.type === Schema.AccountType.ACCOUNT_TYPE_GENERAL
     );
 
@@ -89,11 +85,11 @@ export const getMetrics = (
 
     const marginAccountBalance = toBigNum(
       marginAccount?.balance ?? 0,
-      decimals
+      asset.decimals
     );
     const generalAccountBalance = toBigNum(
       generalAccount?.balance ?? 0,
-      decimals
+      asset.decimals
     );
 
     const markPrice = marketData
@@ -112,18 +108,19 @@ export const getMetrics = (
         : notional.dividedBy(totalBalance)
       : undefined;
     metrics.push({
-      assetId,
-      assetSymbol,
+      assetId: asset.id,
+      assetSymbol: asset.symbol,
       averageEntryPrice: position.averageEntryPrice,
       currentLeverage: currentLeverage ? currentLeverage.toNumber() : undefined,
-      decimals,
-      quantum,
+      assetDecimals: asset.decimals,
+      quantum: asset.quantum,
       lossSocializationAmount: position.lossSocializationAmount || '0',
       marginAccountBalance: marginAccount?.balance ?? '0',
       marketDecimalPlaces,
       marketId: market.id,
-      marketName: market.tradableInstrument.instrument.code,
+      marketCode: market.tradableInstrument.instrument.code,
       marketTradingMode: market.tradingMode,
+      marketState: market.state,
       markPrice: marketData ? marketData.markPrice : undefined,
       notional: notional
         ? notional.multipliedBy(10 ** marketDecimalPlaces).toFixed(0)
@@ -133,10 +130,11 @@ export const getMetrics = (
       positionDecimalPlaces,
       realisedPNL: position.realisedPNL,
       status: position.positionStatus,
-      totalBalance: totalBalance.multipliedBy(10 ** decimals).toFixed(),
+      totalBalance: totalBalance.multipliedBy(10 ** asset.decimals).toFixed(),
       unrealisedPNL: position.unrealisedPNL,
       updatedAt: position.updatedAt || null,
-      productType: market?.tradableInstrument.instrument.product.__typename,
+      productType: market?.tradableInstrument.instrument.product
+        .__typename as ProductType,
     });
   });
   return metrics;
@@ -252,6 +250,26 @@ export const rejoinPositionData = (
   return null;
 };
 
+export const preparePositions = (metrics: Position[], showClosed: boolean) => {
+  return sortBy(metrics, 'marketCode').filter((p) => {
+    if (showClosed) {
+      return true;
+    }
+
+    if (
+      [
+        Schema.MarketState.STATE_ACTIVE,
+        Schema.MarketState.STATE_PENDING,
+        Schema.MarketState.STATE_SUSPENDED,
+      ].includes(p.marketState)
+    ) {
+      return true;
+    }
+
+    return false;
+  });
+};
+
 export const positionsMarketsProvider = makeDerivedDataProvider<
   string[],
   never,
@@ -269,7 +287,7 @@ export const positionsMarketsProvider = makeDerivedDataProvider<
 export const positionsMetricsProvider = makeDerivedDataProvider<
   Position[],
   Position[],
-  PositionsQueryVariables & { marketIds: string[] }
+  PositionsQueryVariables & { marketIds: string[]; showClosed: boolean }
 >(
   [
     (callback, client, variables) =>
@@ -285,10 +303,10 @@ export const positionsMetricsProvider = makeDerivedDataProvider<
         marketIds: variables.marketIds,
       }),
   ],
-  ([positions, accounts, marketsData]) => {
+  ([positions, accounts, marketsData], variables) => {
     const positionsData = rejoinPositionData(positions, marketsData);
     const metrics = getMetrics(positionsData, accounts as Account[] | null);
-    return sortBy(metrics, 'marketName');
+    return preparePositions(metrics, variables.showClosed);
   },
   (data, delta, previousData) =>
     data.filter((row) => {

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

@@ -15,7 +15,8 @@ interface PositionsManagerProps {
   partyIds: string[];
   onMarketClick?: (marketId: string) => void;
   isReadOnly: boolean;
-  gridProps: ReturnType<typeof useDataGridEvents>;
+  gridProps?: ReturnType<typeof useDataGridEvents>;
+  showClosed?: boolean;
 }
 
 export const PositionsManager = ({
@@ -23,6 +24,7 @@ export const PositionsManager = ({
   onMarketClick,
   isReadOnly,
   gridProps,
+  showClosed = false,
 }: PositionsManagerProps) => {
   const { pubKeys, pubKey } = useVegaWallet();
   const create = useVegaTransactionStore((store) => store.create);
@@ -60,7 +62,7 @@ export const PositionsManager = ({
 
   const { data, error } = useDataProvider({
     dataProvider: positionsMetricsProvider,
-    variables: { partyIds, marketIds: marketIds || [] },
+    variables: { partyIds, marketIds: marketIds || [], showClosed },
     skip: !marketIds,
   });
 
@@ -68,7 +70,7 @@ export const PositionsManager = ({
     <PositionsTable
       pubKey={pubKey}
       pubKeys={pubKeys}
-      rowData={error ? [] : data}
+      rowData={data}
       onMarketClick={onMarketClick}
       onClose={onClose}
       isReadOnly={isReadOnly}

libs/positions/src/lib/positions-table.spec.tsx

@@ -1,10 +1,9 @@
-import type { RenderResult } from '@testing-library/react';
 import { act, render, screen, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import PositionsTable, { OpenVolumeCell, PNLCell } from './positions-table';
+import { PositionsTable, OpenVolumeCell, PNLCell } from './positions-table';
 import type { Position } from './positions-data-providers';
 import * as Schema from '@vegaprotocol/types';
-import { PositionStatus, PositionStatusMapping } from '@vegaprotocol/types';
+import { PositionStatus } from '@vegaprotocol/types';
 import type { ICellRendererParams } from 'ag-grid-community';
 import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
 
@@ -20,14 +19,15 @@ const singleRow: Position = {
   assetSymbol: 'BTC',
   averageEntryPrice: '133',
   currentLeverage: 1.1,
-  decimals: 2, // this is settlementAsset.decimals
+  assetDecimals: 2, // this is settlementAsset.decimals
   quantum: '0.1',
   lossSocializationAmount: '0',
   marginAccountBalance: '12345600',
   marketDecimalPlaces: 1,
   marketId: 'string',
-  marketName: 'ETH/BTC (31 july 2022)',
+  marketCode: 'ETHBTC.QM21',
   marketTradingMode: Schema.MarketTradingMode.TRADING_MODE_CONTINUOUS,
+  marketState: Schema.MarketState.STATE_ACTIVE,
   markPrice: '123',
   notional: '12300',
   openVolume: '100',
@@ -40,9 +40,13 @@ const singleRow: Position = {
   productType: 'Future',
 };
 
-const singleRowData = [singleRow];
-
 describe('Positions', () => {
+  const renderComponent = async (rowData: Position) => {
+    await act(async () => {
+      render(<PositionsTable rowData={[rowData]} isReadOnly={false} />);
+    });
+  };
+
   it('should render successfully', async () => {
     await act(async () => {
       const { baseElement } = render(
@@ -53,158 +57,132 @@ describe('Positions', () => {
   });
 
   it('render correct columns', async () => {
-    await act(async () => {
-      render(<PositionsTable rowData={singleRowData} isReadOnly={true} />);
-    });
-
-    const headers = screen.getAllByRole('columnheader');
-    expect(headers).toHaveLength(11);
-    expect(
-      headers.map((h) => h.querySelector('[ref="eText"]')?.textContent?.trim())
-    ).toEqual([
+    const expectedHeaders = [
       'Market',
-      'Notional',
-      'Open volume',
-      'Mark price',
-      'Liquidation price',
-      'Asset',
-      'Entry price',
-      'Leverage',
+      'Size / Notional',
+      'Entry / Mark',
       'Margin',
+      'Liquidation',
       'Realised PNL',
       'Unrealised PNL',
-    ]);
+    ];
+
+    await renderComponent(singleRow);
+
+    const headers = screen.getAllByRole('columnheader');
+    expect(headers).toHaveLength(expectedHeaders.length);
+    expect(
+      headers.map((h) => h.querySelector('[ref="eText"]')?.textContent?.trim())
+    ).toEqual(expectedHeaders);
   });
 
-  it('renders market name', async () => {
-    await act(async () => {
-      render(<PositionsTable rowData={singleRowData} isReadOnly={false} />);
-    });
-    expect(screen.getByText('ETH/BTC (31 july 2022)')).toBeTruthy();
+  it('renders market code', async () => {
+    await renderComponent(singleRow);
+    expect(screen.getByText(singleRow.marketCode)).toBeTruthy();
     expect(screen.getByText('Futr')).toBeInTheDocument();
   });
 
   it('Does not fail if the market name does not match the split pattern', async () => {
     const breakingMarketName = 'OP/USD AUG-SEP22 - Incentive';
-    const row = [
-      Object.assign({}, singleRow, { marketName: breakingMarketName }),
-    ];
-    await act(async () => {
-      render(<PositionsTable rowData={row} isReadOnly={false} />);
-    });
-
+    await renderComponent({ ...singleRow, marketCode: breakingMarketName });
     expect(screen.getByText(breakingMarketName)).toBeTruthy();
   });
 
-  it('add color and sign to amount, displays positive notional value', async () => {
-    let result: RenderResult;
-    await act(async () => {
-      result = render(
-        <PositionsTable rowData={singleRowData} isReadOnly={false} />
-      );
-    });
-    let cells = screen.getAllByRole('gridcell');
+  it('displays size / notional correctly for long position', async () => {
+    await renderComponent(singleRow);
+    const cells = screen.getAllByRole('gridcell');
+    const cell = cells[1];
 
-    expect(cells[2].classList.contains('text-market-green-600')).toBeTruthy();
-    expect(cells[2].classList.contains('text-market-red')).toBeFalsy();
-    expect(cells[2].textContent).toEqual('+100');
-    expect(cells[1].textContent).toEqual('1,230.0');
-    await act(async () => {
-      result.rerender(
-        <PositionsTable
-          rowData={[{ ...singleRow, openVolume: '-100' }]}
-          isReadOnly={false}
-        />
-      );
-    });
-    cells = screen.getAllByRole('gridcell');
-    expect(cells[2].classList.contains('text-market-green-600')).toBeFalsy();
-    expect(cells[2].classList.contains('text-market-red')).toBeTruthy();
-    expect(cells[2].textContent?.startsWith('-100')).toBeTruthy();
-    expect(cells[1].textContent).toEqual('1,230.0');
+    expect(cell).toHaveClass('text-market-green-600');
+    expect(cell).not.toHaveClass('text-market-red');
+
+    expect(within(cell).getByTestId('stack-cell-primary')).toHaveTextContent(
+      '+100'
+    );
+    expect(within(cell).getByTestId('stack-cell-secondary')).toHaveTextContent(
+      '1,230.0'
+    );
   });
 
-  it('displays mark price', async () => {
-    let result: RenderResult;
-    await act(async () => {
-      result = render(
-        <PositionsTable rowData={singleRowData} isReadOnly={false} />
-      );
+  it('displays size / notional correctly for short position', async () => {
+    await renderComponent({ ...singleRow, openVolume: '-100' });
+    const cells = screen.getAllByRole('gridcell');
+    const cell = cells[1];
+
+    expect(cell).not.toHaveClass('text-market-green-600');
+    expect(cell).toHaveClass('text-market-red');
+
+    expect(within(cell).getByTestId('stack-cell-primary')).toHaveTextContent(
+      '-100'
+    );
+    expect(within(cell).getByTestId('stack-cell-secondary')).toHaveTextContent(
+      '1,230.0'
+    );
+  });
+
+  it('displays entry / mark price', async () => {
+    await renderComponent(singleRow);
+    const cells = screen.getAllByRole('gridcell');
+    const cell = within(cells[2]);
+    expect(cell.getByTestId('stack-cell-primary')).toHaveTextContent('13.3');
+    expect(cell.getByTestId('stack-cell-secondary')).toHaveTextContent('12.3');
+  });
+
+  it('doesnt render entry / mark if market is in opening auction', async () => {
+    await renderComponent({
+      ...singleRow,
+      marketTradingMode: Schema.MarketTradingMode.TRADING_MODE_OPENING_AUCTION,
     });
 
-    let cells = screen.getAllByRole('gridcell');
-    expect(cells[3].textContent).toEqual('12.3');
-
-    await act(async () => {
-      result.rerender(
-        <PositionsTable
-          rowData={[
-            {
-              ...singleRow,
-              marketTradingMode:
-                Schema.MarketTradingMode.TRADING_MODE_OPENING_AUCTION,
-            },
-          ]}
-          isReadOnly={false}
-        />
-      );
-    });
-
-    cells = screen.getAllByRole('gridcell');
-    expect(cells[3].textContent).toEqual('-');
+    const cells = screen.getAllByRole('gridcell');
+    expect(cells[2].textContent).toEqual('-');
   });
 
   it('displays liquidation price', async () => {
-    await act(async () => {
-      render(<PositionsTable rowData={singleRowData} isReadOnly={false} />);
-    });
+    await renderComponent(singleRow);
     const cells = screen.getAllByRole('gridcell');
     expect(cells[4].textContent).toEqual('liquidation price');
   });
 
-  it('displays leverage', async () => {
-    await act(async () => {
-      render(<PositionsTable rowData={singleRowData} isReadOnly={false} />);
-    });
+  it('displays margin and leverage', async () => {
+    await renderComponent(singleRow);
     const cells = screen.getAllByRole('gridcell');
-    expect(cells[7].textContent).toEqual('1.1');
-  });
 
-  it('displays allocated margin', async () => {
-    await act(async () => {
-      render(<PositionsTable rowData={singleRowData} isReadOnly={false} />);
-    });
-    const cells = screen.getAllByRole('gridcell');
-    const cell = cells[8];
-    expect(cell.textContent).toEqual('123,456.00');
+    // margin
+    expect(
+      within(cells[3]).getByTestId('stack-cell-primary')
+    ).toHaveTextContent('123,456.00');
+
+    // leverage
+    expect(
+      within(cells[3]).getByTestId('stack-cell-secondary')
+    ).toHaveTextContent('1.1');
   });
 
   it('displays realised and unrealised PNL', async () => {
     // pnl cells should be rendered with asset dps
     const expectedRealised = addDecimalsFormatNumber(
       singleRow.realisedPNL,
-      singleRow.decimals
+      singleRow.assetDecimals
     );
     const expectedUnrealised = addDecimalsFormatNumber(
       singleRow.unrealisedPNL,
-      singleRow.decimals
+      singleRow.assetDecimals
     );
 
-    await act(async () => {
-      render(<PositionsTable rowData={singleRowData} isReadOnly={false} />);
-    });
+    await renderComponent(singleRow);
 
     const cells = screen.getAllByRole('gridcell');
-    expect(cells[9].textContent).toEqual(expectedRealised);
-    expect(cells[10].textContent).toEqual(expectedUnrealised);
+    expect(cells[5]).toHaveTextContent(expectedRealised);
+    expect(cells[6]).toHaveTextContent(expectedUnrealised);
   });
 
   it('displays close button', async () => {
     await act(async () => {
       render(
         <PositionsTable
-          rowData={singleRowData}
-          pubKey={singleRowData[0].partyId}
+          rowData={[singleRow]}
+          pubKey={singleRow.partyId}
           onClose={() => {
             return;
           }}
@@ -212,24 +190,15 @@ describe('Positions', () => {
         />
       );
     });
-    const cells = screen.getAllByRole('gridcell');
-    expect(cells[11].textContent).toEqual('');
+
+    expect(screen.getByTestId('close-position')).toBeInTheDocument();
   });
 
   it('do not display close button if openVolume is zero', async () => {
-    await act(async () => {
-      render(
-        <PositionsTable
-          rowData={[{ ...singleRow, openVolume: '0' }]}
-          onClose={() => {
-            return;
-          }}
-          isReadOnly={false}
-        />
-      );
-    });
-    const cells = screen.getAllByRole('gridcell');
-    expect(cells[11].textContent).toEqual('');
+    await renderComponent({ ...singleRow, openVolume: '0' });
+    expect(
+      screen.queryByRole('button', { name: 'Close' })
+    ).not.toBeInTheDocument();
   });
 
   describe('PNLCell', () => {
@@ -249,40 +218,27 @@ describe('Positions', () => {
           lossSocialisationAmount: '0',
         },
         valueFormatted: '100',
-      };
-      render(<PNLCell {...(props as ICellRendererParams)} />);
-      expect(screen.getByText(props.valueFormatted)).toBeInTheDocument();
-      expect(screen.queryByRole('img')).not.toBeInTheDocument();
+      } as ICellRendererParams;
+      render(<PNLCell {...props} />);
+      expect(
+        screen.getByText(props.valueFormatted as string)
+      ).toBeInTheDocument();
+      expect(screen.queryByTestId(/icon-/)).not.toBeInTheDocument();
     });
 
-    it('renders value with warning tooltip if loss socialisation occurred', async () => {
+    it('renders value with warning icon if loss socialisation occurred', () => {
       const props = {
         data: {
           ...singleRow,
           lossSocializationAmount: '500',
-          decimals: 2,
+          assetDecimals: 2,
         },
         valueFormatted: '100',
       };
       render(<PNLCell {...(props as ICellRendererParams)} />);
       const content = screen.getByText(props.valueFormatted);
       expect(content).toBeInTheDocument();
-      expect(screen.getByRole('img')).toBeInTheDocument();
-
-      await userEvent.hover(content);
-      const tooltip = await screen.findByRole('tooltip');
-      expect(tooltip).toBeInTheDocument();
-      expect(
-        // using within as radix renders tooltip content twice
-        within(tooltip).getByText(
-          'Lifetime loss socialisation deductions: 5.00'
-        )
-      ).toBeInTheDocument();
-      expect(
-        within(tooltip).getByText(
-          `You received less BTC in gains that you should have when the market moved in your favour. This occurred because one or more other trader(s) were closed out and did not have enough funds to cover their losses, and the market's insurance pool was empty.`
-        )
-      ).toBeInTheDocument();
+      expect(screen.getByTestId(/icon-/)).toBeInTheDocument();
     });
   });
 
@@ -290,9 +246,10 @@ describe('Positions', () => {
     const props = {
       data: undefined,
       valueFormatted: '100',
-    };
+    } as ICellRendererParams;
+
     it('renders a dash if no data', () => {
-      render(<OpenVolumeCell {...(props as ICellRendererParams)} />);
+      render(<OpenVolumeCell {...props} />);
       expect(screen.getByText('-')).toBeInTheDocument();
     });
 
@@ -306,36 +263,21 @@ describe('Positions', () => {
       };
       render(<OpenVolumeCell {...(props as ICellRendererParams)} />);
       expect(screen.getByText(props.valueFormatted)).toBeInTheDocument();
-      expect(screen.queryByRole('img')).not.toBeInTheDocument();
+      expect(screen.queryByTestId(/icon-/)).not.toBeInTheDocument();
     });
 
-    it('renders status with warning tooltip if orders were closed', async () => {
+    it('renders status with warning tooltip if orders were closed', () => {
       const props = {
         data: {
           ...singleRow,
           status: PositionStatus.POSITION_STATUS_ORDERS_CLOSED,
         },
         valueFormatted: '100',
-      };
-      render(<OpenVolumeCell {...(props as ICellRendererParams)} />);
-      const content = screen.getByText(props.valueFormatted);
+      } as ICellRendererParams;
+      render(<OpenVolumeCell {...props} />);
+      const content = screen.getByText(props.valueFormatted as string);
       expect(content).toBeInTheDocument();
-      expect(screen.getByRole('img')).toBeInTheDocument();
-      await userEvent.hover(content);
-      const tooltip = await screen.findByRole('tooltip');
-      expect(tooltip).toBeInTheDocument();
-      expect(
-        // using within as radix renders tooltip content twice
-        within(tooltip).getByText(
-          `Status: ${PositionStatusMapping[props.data.status]}`
-        )
-      ).toBeInTheDocument();
-      expect(
-        // using within as radix renders tooltip content twice
-        within(tooltip).getByText(
-          'The position was distressed, but removing open orders from the book brought the margin level back to a point where the open position could be maintained.'
-        )
-      ).toBeInTheDocument();
+      expect(screen.getByTestId(/icon-/)).toBeInTheDocument();
     });
 
     it('renders status with warning tooltip if position was closed out', async () => {
@@ -345,24 +287,71 @@ describe('Positions', () => {
           status: PositionStatus.POSITION_STATUS_CLOSED_OUT,
         },
         valueFormatted: '100',
-      };
-      render(<OpenVolumeCell {...(props as ICellRendererParams)} />);
-      const content = screen.getByText(props.valueFormatted);
+      } as ICellRendererParams;
+      render(<OpenVolumeCell {...props} />);
+      const content = screen.getByText(props.valueFormatted as string);
       expect(content).toBeInTheDocument();
-      expect(screen.getByRole('img')).toBeInTheDocument();
-      await userEvent.hover(content);
-      const tooltip = await screen.findByRole('tooltip');
-      expect(tooltip).toBeInTheDocument();
+      expect(screen.getByTestId(/icon-/)).toBeInTheDocument();
+    });
+  });
+
+  describe('position status from size column', () => {
+    it('does not show if position status is normal', async () => {
+      await renderComponent({
+        ...singleRow,
+        status: PositionStatus.POSITION_STATUS_UNSPECIFIED,
+      });
+      const cells = screen.getAllByRole('gridcell');
+      const cell = cells[1];
+      await userEvent.hover(cell);
+      expect(screen.queryByRole('tooltip')).not.toBeInTheDocument();
+    });
+
+    it.each([
+      {
+        status: PositionStatus.POSITION_STATUS_CLOSED_OUT,
+        text: 'Your position was closed.',
+      },
+      {
+        status: PositionStatus.POSITION_STATUS_ORDERS_CLOSED,
+        text: 'Your open orders were cancelled.',
+      },
+      {
+        status: PositionStatus.POSITION_STATUS_DISTRESSED,
+        text: 'Your position is distressed.',
+      },
+    ])('renders content for $status', async (data) => {
+      await renderComponent({
+        ...singleRow,
+        status: data.status,
+      });
+      const cells = screen.getAllByRole('gridcell');
+      const cell = cells[1];
+      await userEvent.hover(cell);
+      const tooltip = within(await screen.findByRole('tooltip'));
+      expect(tooltip.getByText(data.text)).toBeInTheDocument();
+    });
+  });
+
+  describe('loss socialization from realised pnl column', () => {
+    it('renders', async () => {
+      await renderComponent({
+        ...singleRow,
+        lossSocializationAmount: '500',
+        assetDecimals: 2,
+      });
+      const cells = screen.getAllByRole('gridcell');
+      const cell = cells[5];
+
+      await userEvent.hover(cell);
+      const tooltip = within(await screen.findByRole('tooltip'));
+      expect(tooltip.getByText('Realised PNL: 1.23')).toBeInTheDocument();
       expect(
-        // using within as radix renders tooltip content twice
-        within(tooltip).getByText(
-          `Status: ${PositionStatusMapping[props.data.status]}`
-        )
+        tooltip.getByText('Lifetime loss socialisation deductions: 5.00')
       ).toBeInTheDocument();
       expect(
-        // using within as radix renders tooltip content twice
-        within(tooltip).getByText(
-          'You did not have enough BTC collateral to meet the maintenance margin requirements for your position, so it was closed by the network.'
+        tooltip.getByText(
+          `You received less BTC in gains that you should have when the market moved in your favour. This occurred because one or more other trader(s) were closed out and did not have enough funds to cover their losses, and the market's insurance pool was empty.`
         )
       ).toBeInTheDocument();
     });

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

@@ -1,46 +1,46 @@
-import classNames from 'classnames';
 import { useMemo } from 'react';
 import type { CSSProperties, ReactNode } from 'react';
-import type { ColDef } from 'ag-grid-community';
+import type { ColDef, ITooltipParams } from 'ag-grid-community';
 import type {
   VegaValueFormatterParams,
   VegaValueGetterParams,
   TypedDataAgGrid,
   VegaICellRendererParams,
 } from '@vegaprotocol/datagrid';
-import { COL_DEFS } from '@vegaprotocol/datagrid';
-import { ProgressBarCell } from '@vegaprotocol/datagrid';
 import {
   AgGridLazy as AgGrid,
+  COL_DEFS,
   PriceFlashCell,
-  signedNumberCssClass,
   signedNumberCssClassRules,
   MarketNameCell,
+  ProgressBarCell,
+  MarketProductPill,
 } from '@vegaprotocol/datagrid';
 import {
   ButtonLink,
-  Tooltip,
   TooltipCellComponent,
   ExternalLink,
-  Icon,
-  VegaIconNames,
   VegaIcon,
+  VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
 import {
   volumePrefix,
   toBigNum,
   formatNumber,
   addDecimalsFormatNumber,
+  addDecimalsFormatNumberQuantum,
 } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import type { Position } from './positions-data-providers';
-import * as Schema from '@vegaprotocol/types';
-import { PositionStatus, PositionStatusMapping } from '@vegaprotocol/types';
+import {
+  MarketTradingMode,
+  PositionStatus,
+  PositionStatusMapping,
+} from '@vegaprotocol/types';
 import { DocsLinks } from '@vegaprotocol/environment';
 import { PositionActionsDropdown } from './position-actions-dropdown';
-import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
-import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
 import { LiquidationPrice } from './liquidation-price';
+import { StackedCell } from './stacked-cell';
 
 interface Props extends TypedDataAgGrid<Position> {
   onClose?: (data: Position) => void;
@@ -48,44 +48,25 @@ interface Props extends TypedDataAgGrid<Position> {
   style?: CSSProperties;
   isReadOnly: boolean;
   multipleKeys?: boolean;
-  pubKeys?: VegaWalletContextShape['pubKeys'];
-  pubKey?: VegaWalletContextShape['pubKey'];
+  pubKeys?: Array<{ name: string; publicKey: string }> | null;
+  pubKey?: string | null;
 }
 
-export interface AmountCellProps {
-  valueFormatted?: Pick<
-    Position,
-    'openVolume' | 'marketDecimalPlaces' | 'positionDecimalPlaces' | 'notional'
-  >;
-}
-
-export const AmountCell = ({ valueFormatted }: AmountCellProps) => {
-  if (!valueFormatted) {
-    return null;
-  }
-  const { openVolume, positionDecimalPlaces, marketDecimalPlaces, notional } =
-    valueFormatted;
-  return valueFormatted && notional ? (
-    <div className="leading-tight font-mono">
-      <div
-        className={classNames('text-right', signedNumberCssClass(openVolume))}
-      >
-        {volumePrefix(
-          addDecimalsFormatNumber(openVolume, positionDecimalPlaces)
-        )}
-      </div>
-      <div className="text-right">
-        {addDecimalsFormatNumber(notional, marketDecimalPlaces)}
-      </div>
-    </div>
-  ) : null;
-};
-
-AmountCell.displayName = 'AmountCell';
-
 export const getRowId = ({ data }: { data: Position }) =>
   `${data.partyId}-${data.marketId}`;
 
+const realisedPNLValueGetter = ({ data }: { data: Position }) => {
+  return !data
+    ? undefined
+    : toBigNum(data.realisedPNL, data.assetDecimals).toNumber();
+};
+
+const unrealisedPNLValueGetter = ({ data }: { data: Position }) => {
+  return !data
+    ? undefined
+    : toBigNum(data.unrealisedPNL, data.assetDecimals).toNumber();
+};
+
 const defaultColDef = {
   sortable: true,
   filter: true,
@@ -103,7 +84,6 @@ export const PositionsTable = ({
   pubKey,
   ...props
 }: Props) => {
-  const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
   return (
     <AgGrid
       overlayNoRowsTemplate={t('No positions')}
@@ -111,11 +91,11 @@ export const PositionsTable = ({
       tooltipShowDelay={500}
       defaultColDef={defaultColDef}
       components={{
-        AmountCell,
         PriceFlashCell,
         ProgressBarCell,
         MarketNameCell,
       }}
+      rowHeight={45}
       columnDefs={useMemo<ColDef[]>(() => {
         const columnDefs: (ColDef | null)[] = [
           multipleKeys
@@ -132,41 +112,37 @@ export const PositionsTable = ({
             : null,
           {
             headerName: t('Market'),
-            field: 'marketName',
-            cellRenderer: 'MarketNameCell',
-            cellRendererParams: { idPath: 'marketId', onMarketClick },
-          },
-          {
-            headerName: t('Notional'),
-            headerTooltip: t('Mark price x open volume.'),
-            field: 'notional',
-            type: 'rightAligned',
-            cellClass: 'font-mono text-right',
-            filter: 'agNumberColumnFilter',
-            valueGetter: ({ data }: VegaValueGetterParams<Position>) => {
-              return !data?.notional
-                ? undefined
-                : toBigNum(data.notional, data.marketDecimalPlaces).toNumber();
+            field: 'marketCode',
+            onCellClicked: ({ data }) => {
+              if (!onMarketClick) return;
+              onMarketClick(data.marketId);
             },
-            valueFormatter: ({
+            cellRenderer: ({
+              value,
               data,
-            }: VegaValueFormatterParams<Position, 'notional'>) => {
-              return !data || !data.notional
-                ? '-'
-                : addDecimalsFormatNumber(
-                    data.notional,
-                    data.marketDecimalPlaces
-                  );
+            }: VegaICellRendererParams<Position, 'marketCode'>) => {
+              if (!data || !value) return '-';
+              return (
+                <StackedCell
+                  primary={value}
+                  secondary={
+                    <>
+                      {data?.assetSymbol}
+                      <MarketProductPill productType={data.productType} />
+                    </>
+                  }
+                />
+              );
             },
           },
           {
-            headerName: t('Open volume'),
+            headerName: t('Size / Notional'),
             field: 'openVolume',
             type: 'rightAligned',
             cellClass: 'font-mono text-right',
             cellClassRules: signedNumberCssClassRules,
             filter: 'agNumberColumnFilter',
-            valueGetter: ({ data }: VegaValueGetterParams<Position>) => {
+            valueGetter: ({ data }: { data: Position }) => {
               return data?.openVolume === undefined
                 ? undefined
                 : toBigNum(
@@ -174,165 +150,205 @@ export const PositionsTable = ({
                     data.positionDecimalPlaces
                   ).toNumber();
             },
+            tooltipValueGetter: ({ data }: ITooltipParams<Position>) => {
+              if (
+                !data ||
+                data.status === PositionStatus.POSITION_STATUS_UNSPECIFIED
+              ) {
+                return null;
+              }
+              return data.status;
+            },
             valueFormatter: ({
               data,
             }: VegaValueFormatterParams<Position, 'openVolume'>): string => {
-              return data?.openVolume === undefined
-                ? ''
-                : volumePrefix(
-                    addDecimalsFormatNumber(
-                      data.openVolume,
-                      data.positionDecimalPlaces
-                    )
+              if (!data?.openVolume) return '-';
+
+              const vol = volumePrefix(
+                addDecimalsFormatNumber(
+                  data.openVolume,
+                  data.positionDecimalPlaces
+                )
+              );
+
+              return vol;
+            },
+            tooltipComponent: (args: ITooltipParams<Position>) => {
+              if (!args.data) {
+                return null;
+              }
+              const POSITION_RESOLUTION_LINK =
+                DocsLinks?.POSITION_RESOLUTION ?? '';
+              let primaryTooltip;
+              switch (args.data.status) {
+                case PositionStatus.POSITION_STATUS_CLOSED_OUT:
+                  primaryTooltip = t('Your position was closed.');
+                  break;
+                case PositionStatus.POSITION_STATUS_ORDERS_CLOSED:
+                  primaryTooltip = t('Your open orders were cancelled.');
+                  break;
+                case PositionStatus.POSITION_STATUS_DISTRESSED:
+                  primaryTooltip = t('Your position is distressed.');
+                  break;
+              }
+
+              let secondaryTooltip;
+              switch (args.data.status) {
+                case PositionStatus.POSITION_STATUS_CLOSED_OUT:
+                  secondaryTooltip = t(
+                    `You did not have enough %s collateral to meet the maintenance margin requirements for your position, so it was closed by the network.`,
+                    args.data.assetSymbol
                   );
+                  break;
+                case PositionStatus.POSITION_STATUS_ORDERS_CLOSED:
+                  secondaryTooltip = t(
+                    'The position was distressed, but removing open orders from the book brought the margin level back to a point where the open position could be maintained.'
+                  );
+                  break;
+                case PositionStatus.POSITION_STATUS_DISTRESSED:
+                  secondaryTooltip = t(
+                    'The position was distressed, but could not be closed out - orders were removed from the book, and the open volume will be closed out once there is sufficient volume on the book.'
+                  );
+                  break;
+                default:
+                  secondaryTooltip = t('Maintained by network');
+              }
+              return (
+                <TooltipCellComponent
+                  {...args}
+                  value={
+                    <>
+                      <p className="mb-2">{primaryTooltip}</p>
+                      <p className="mb-2">{secondaryTooltip}</p>
+                      <p className="mb-2">
+                        {t(
+                          'Status: %s',
+                          PositionStatusMapping[args.data.status]
+                        )}
+                      </p>
+                      {POSITION_RESOLUTION_LINK && (
+                        <ExternalLink href={POSITION_RESOLUTION_LINK}>
+                          {t('Read more about position resolution')}
+                        </ExternalLink>
+                      )}
+                    </>
+                  }
+                />
+              );
             },
             cellRenderer: OpenVolumeCell,
           },
           {
-            headerName: t('Mark price'),
+            headerName: t('Entry / Mark'),
             field: 'markPrice',
             type: 'rightAligned',
-            cellRenderer: PriceFlashCell,
+            cellClass: 'font-mono text-right',
+            cellRenderer: ({
+              data,
+            }: VegaICellRendererParams<Position, 'markPrice'>) => {
+              if (
+                !data?.averageEntryPrice ||
+                !data?.markPrice ||
+                !data?.marketDecimalPlaces
+              ) {
+                return <>-</>;
+              }
+
+              if (
+                data.marketTradingMode ===
+                MarketTradingMode.TRADING_MODE_OPENING_AUCTION
+              ) {
+                return <>-</>;
+              }
+
+              const entry = addDecimalsFormatNumber(
+                data.averageEntryPrice,
+                data.marketDecimalPlaces
+              );
+              const mark = addDecimalsFormatNumber(
+                data.markPrice,
+                data.marketDecimalPlaces
+              );
+              return (
+                <StackedCell
+                  primary={entry}
+                  secondary={
+                    <PriceFlashCell
+                      value={Number(data.markPrice)}
+                      valueFormatted={mark}
+                    />
+                  }
+                />
+              );
+            },
             filter: 'agNumberColumnFilter',
             valueGetter: ({ data }: VegaValueGetterParams<Position>) => {
               return !data ||
                 !data.markPrice ||
                 data.marketTradingMode ===
-                  Schema.MarketTradingMode.TRADING_MODE_OPENING_AUCTION
+                  MarketTradingMode.TRADING_MODE_OPENING_AUCTION
                 ? undefined
                 : toBigNum(data.markPrice, data.marketDecimalPlaces).toNumber();
             },
-            valueFormatter: ({
-              data,
-            }: VegaValueFormatterParams<Position, 'markPrice'>) => {
-              if (!data) {
-                return '';
-              }
+          },
+          {
+            headerName: t('Margin'),
+            colId: 'margin',
+            type: 'rightAligned',
+            cellClass: 'font-mono text-right',
+            filter: 'agNumberColumnFilter',
+            valueGetter: ({ data }: VegaValueGetterParams<Position>) => {
+              return !data
+                ? undefined
+                : toBigNum(
+                    data.marginAccountBalance,
+                    data.assetDecimals
+                  ).toNumber();
+            },
+            cellRenderer: ({ data }: VegaICellRendererParams<Position>) => {
               if (
-                !data.markPrice ||
-                data.marketTradingMode ===
-                  Schema.MarketTradingMode.TRADING_MODE_OPENING_AUCTION
+                !data ||
+                !data.marginAccountBalance ||
+                !data.marketDecimalPlaces
               ) {
-                return '-';
+                return null;
               }
-              return addDecimalsFormatNumber(
-                data.markPrice,
-                data.marketDecimalPlaces
+              const margin = addDecimalsFormatNumberQuantum(
+                data.marginAccountBalance,
+                data.assetDecimals,
+                data.quantum
+              );
+
+              const lev = data?.currentLeverage ? data.currentLeverage : 1;
+              const leverage = formatNumber(Math.max(1, lev), 1);
+              return (
+                <StackedCell primary={margin} secondary={leverage + 'x'} />
               );
             },
           },
           {
-            headerName: t('Liquidation price'),
             colId: 'liquidationPrice',
-            type: 'rightAligned',
+            headerName: 'Liquidation',
+            headerTooltip: t('Worst case liquidation price'),
             cellClass: 'font-mono text-right',
+            type: 'rightAligned',
+            // Cannot be sortable as data is fetched within the cell
+            sortable: false,
+            filter: false,
             cellRenderer: ({ data }: VegaICellRendererParams<Position>) => {
-              if (!data) return null;
+              if (!data) {
+                return '-';
+              }
               return (
                 <LiquidationPrice
                   marketId={data.marketId}
                   openVolume={data.openVolume}
                   collateralAvailable={data.totalBalance}
-                  decimalPlaces={data.decimals}
-                  formatDecimals={data.marketDecimalPlaces}
+                  marketDecimalPlaces={data.marketDecimalPlaces}
                 />
               );
             },
           },
-          {
-            headerName: t('Asset'),
-            field: 'assetSymbol',
-            colId: 'asset',
-            cellRenderer: ({ data }: VegaICellRendererParams<Position>) => {
-              if (!data) return null;
-              return (
-                <ButtonLink
-                  title={t('View settlement asset details')}
-                  onClick={(e) => {
-                    openAssetDetailsDialog(
-                      data.assetId,
-                      e.target as HTMLElement
-                    );
-                  }}
-                >
-                  {data?.assetSymbol}
-                </ButtonLink>
-              );
-            },
-          },
-          {
-            headerName: t('Entry price'),
-            field: 'averageEntryPrice',
-            type: 'rightAligned',
-            cellRenderer: PriceFlashCell,
-            filter: 'agNumberColumnFilter',
-            valueGetter: ({ data }: VegaValueGetterParams<Position>) => {
-              return data?.markPrice === undefined || !data
-                ? undefined
-                : toBigNum(
-                    data.averageEntryPrice,
-                    data.marketDecimalPlaces
-                  ).toNumber();
-            },
-            valueFormatter: ({
-              data,
-            }: VegaValueFormatterParams<
-              Position,
-              'averageEntryPrice'
-            >): string => {
-              if (!data) {
-                return '';
-              }
-              return addDecimalsFormatNumber(
-                data.averageEntryPrice,
-                data.marketDecimalPlaces
-              );
-            },
-          },
-          multipleKeys
-            ? null
-            : {
-                headerName: t('Leverage'),
-                field: 'currentLeverage',
-                type: 'rightAligned',
-                filter: 'agNumberColumnFilter',
-                cellRenderer: PriceFlashCell,
-                valueFormatter: ({
-                  value,
-                }: VegaValueFormatterParams<Position, 'currentLeverage'>) =>
-                  value === undefined ? '' : formatNumber(value.toString(), 1),
-              },
-          multipleKeys
-            ? null
-            : {
-                headerName: t('Margin'),
-                field: 'marginAccountBalance',
-                type: 'rightAligned',
-                filter: 'agNumberColumnFilter',
-                cellRenderer: PriceFlashCell,
-                valueGetter: ({ data }: VegaValueGetterParams<Position>) => {
-                  return !data
-                    ? undefined
-                    : toBigNum(
-                        data.marginAccountBalance,
-                        data.decimals
-                      ).toNumber();
-                },
-                valueFormatter: ({
-                  data,
-                }: VegaValueFormatterParams<
-                  Position,
-                  'marginAccountBalance'
-                >): string => {
-                  if (!data) {
-                    return '';
-                  }
-                  return addDecimalsFormatNumber(
-                    data.marginAccountBalance,
-                    data.decimals
-                  );
-                },
-              },
           {
             headerName: t('Realised PNL'),
             field: 'realisedPNL',
@@ -340,17 +356,71 @@ export const PositionsTable = ({
             cellClassRules: signedNumberCssClassRules,
             cellClass: 'font-mono text-right',
             filter: 'agNumberColumnFilter',
-            valueGetter: ({ data }: VegaValueGetterParams<Position>) => {
-              return !data
-                ? undefined
-                : toBigNum(data.realisedPNL, data.decimals).toNumber();
+            valueGetter: realisedPNLValueGetter,
+            // @ts-ignore no type overlap, but the functions are identical
+            tooltipValueGetter: realisedPNLValueGetter,
+            tooltipComponent: (args: ITooltipParams) => {
+              const LOSS_SOCIALIZATION_LINK =
+                DocsLinks?.LOSS_SOCIALIZATION ?? '';
+
+              if (!args.data) {
+                return <>-</>;
+              }
+
+              const losses = parseInt(
+                args.data?.lossSocializationAmount ?? '0'
+              );
+
+              if (losses <= 0) {
+                // eslint-disable-next-line react/jsx-no-useless-fragment
+                return <>{args.valueFormatted}</>;
+              }
+
+              const lossesFormatted = addDecimalsFormatNumber(
+                args.data.lossSocializationAmount,
+                args.data.assetDecimals
+              );
+
+              return (
+                <TooltipCellComponent
+                  {...args}
+                  value={
+                    <>
+                      <p className="mb-2">
+                        {t('Realised PNL: %s', args.value)}
+                      </p>
+                      <p className="mb-2">
+                        {t(
+                          'Lifetime loss socialisation deductions: %s',
+                          lossesFormatted
+                        )}
+                      </p>
+                      <p className="mb-2">
+                        {t(
+                          `You received less %s in gains that you should have when the market moved in your favour. This occurred because one or more other trader(s) were closed out and did not have enough funds to cover their losses, and the market's insurance pool was empty.`,
+                          args.data.assetSymbol
+                        )}
+                      </p>
+                      {LOSS_SOCIALIZATION_LINK && (
+                        <ExternalLink href={LOSS_SOCIALIZATION_LINK}>
+                          {t('Read more about loss socialisation')}
+                        </ExternalLink>
+                      )}
+                    </>
+                  }
+                />
+              );
             },
             valueFormatter: ({
               data,
             }: VegaValueFormatterParams<Position, 'realisedPNL'>) => {
               return !data
                 ? ''
-                : addDecimalsFormatNumber(data.realisedPNL, data.decimals);
+                : addDecimalsFormatNumberQuantum(
+                    data.realisedPNL,
+                    data.assetDecimals,
+                    data.quantum
+                  );
             },
             headerTooltip: t(
               'Profit or loss is realised whenever your position is reduced to zero and the margin is released back to your collateral balance. P&L excludes any fees paid.'
@@ -364,21 +434,22 @@ export const PositionsTable = ({
             cellClassRules: signedNumberCssClassRules,
             cellClass: 'font-mono text-right',
             filter: 'agNumberColumnFilter',
-            valueGetter: ({ data }: VegaValueGetterParams<Position>) => {
-              return !data
-                ? undefined
-                : toBigNum(data.unrealisedPNL, data.decimals).toNumber();
-            },
+            valueGetter: unrealisedPNLValueGetter,
+            // @ts-ignore no type overlap but function can be identical
+            tooltipValueGetter: unrealisedPNLValueGetter,
             valueFormatter: ({
               data,
             }: VegaValueFormatterParams<Position, 'unrealisedPNL'>) =>
               !data
                 ? ''
-                : addDecimalsFormatNumber(data.unrealisedPNL, data.decimals),
+                : addDecimalsFormatNumberQuantum(
+                    data.unrealisedPNL,
+                    data.assetDecimals,
+                    data.quantum
+                  ),
             headerTooltip: t(
               'Unrealised profit is the current profit on your open position. Margin is still allocated to your position.'
             ),
-            cellRenderer: PNLCell,
           },
           onClose && !isReadOnly
             ? {
@@ -402,36 +473,24 @@ export const PositionsTable = ({
                     </div>
                   );
                 },
-                minWidth: 75,
-                maxWidth: 75,
+                minWidth: 55,
+                maxWidth: 55,
               }
             : null,
         ];
         return columnDefs.filter<ColDef>(
           (colDef: ColDef | null): colDef is ColDef => colDef !== null
         );
-      }, [
-        isReadOnly,
-        multipleKeys,
-        onClose,
-        onMarketClick,
-        openAssetDetailsDialog,
-        pubKey,
-        pubKeys,
-      ])}
+      }, [isReadOnly, multipleKeys, onClose, onMarketClick, pubKey, pubKeys])}
       {...props}
     />
   );
 };
 
-export default PositionsTable;
-
 export const PNLCell = ({
   valueFormatted,
   data,
 }: VegaICellRendererParams<Position, 'realisedPNL'>) => {
-  const LOSS_SOCIALIZATION_LINK = DocsLinks?.LOSS_SOCIALIZATION ?? '';
-
   if (!data) {
     return <>-</>;
   }
@@ -442,121 +501,62 @@ export const PNLCell = ({
     return <>{valueFormatted}</>;
   }
 
-  const lossesFormatted = addDecimalsFormatNumber(
-    data.lossSocializationAmount,
-    data.decimals
-  );
-
-  return (
-    <WarningCell
-      tooltipContent={
-        <>
-          <p className="mb-2">
-            {t('Lifetime loss socialisation deductions: %s', lossesFormatted)}
-          </p>
-          <p className="mb-2">
-            {t(
-              `You received less %s in gains that you should have when the market moved in your favour. This occurred because one or more other trader(s) were closed out and did not have enough funds to cover their losses, and the market's insurance pool was empty.`,
-              [data.assetSymbol]
-            )}
-          </p>
-          {LOSS_SOCIALIZATION_LINK && (
-            <ExternalLink href={LOSS_SOCIALIZATION_LINK}>
-              {t('Read more about loss socialisation')}
-            </ExternalLink>
-          )}
-        </>
-      }
-    >
-      {valueFormatted}
-    </WarningCell>
-  );
+  return <WarningCell>{valueFormatted}</WarningCell>;
 };
 
 export const OpenVolumeCell = ({
   valueFormatted,
   data,
 }: VegaICellRendererParams<Position, 'openVolume'>) => {
-  if (!data) {
+  if (!valueFormatted || !data || !data.notional) {
     return <>-</>;
   }
 
-  const POSITION_RESOLUTION_LINK = DocsLinks?.POSITION_RESOLUTION ?? '';
+  const notional = addDecimalsFormatNumber(
+    data.notional,
+    data.marketDecimalPlaces
+  );
 
-  let primaryTooltip;
-  switch (data.status) {
-    case PositionStatus.POSITION_STATUS_CLOSED_OUT:
-      primaryTooltip = t('Your position was closed.');
-      break;
-    case PositionStatus.POSITION_STATUS_ORDERS_CLOSED:
-      primaryTooltip = t('Your open orders were cancelled.');
-      break;
-    case PositionStatus.POSITION_STATUS_DISTRESSED:
-      primaryTooltip = t('Your position is distressed.');
-      break;
+  const cellContent = (
+    <StackedCell primary={valueFormatted} secondary={notional} />
+  );
+
+  if (data.status === PositionStatus.POSITION_STATUS_UNSPECIFIED) {
+    // eslint-disable-next-line react/jsx-no-useless-fragment
+    return <>{cellContent}</>;
   }
 
-  let secondaryTooltip;
-  switch (data.status) {
-    case PositionStatus.POSITION_STATUS_CLOSED_OUT:
-      secondaryTooltip = t(
-        `You did not have enough %s collateral to meet the maintenance margin requirements for your position, so it was closed by the network.`,
-        [data.assetSymbol]
-      );
-      break;
-    case PositionStatus.POSITION_STATUS_ORDERS_CLOSED:
-      secondaryTooltip = t(
-        'The position was distressed, but removing open orders from the book brought the margin level back to a point where the open position could be maintained.'
-      );
-      break;
-    case PositionStatus.POSITION_STATUS_DISTRESSED:
-      secondaryTooltip = t(
-        'The position was distressed, but could not be closed out - orders were removed from the book, and the open volume will be closed out once there is sufficient volume on the book.'
-      );
-      break;
-    default:
-      secondaryTooltip = t('Maintained by network');
-  }
   return (
     <WarningCell
-      showIcon={data.status !== PositionStatus.POSITION_STATUS_UNSPECIFIED}
-      tooltipContent={
-        <>
-          <p className="mb-2">{primaryTooltip}</p>
-          <p className="mb-2">{secondaryTooltip}</p>
-          <p className="mb-2">
-            {t('Status: %s', PositionStatusMapping[data.status])}
-          </p>
-          {POSITION_RESOLUTION_LINK && (
-            <ExternalLink href={POSITION_RESOLUTION_LINK}>
-              {t('Read more about position resolution')}
-            </ExternalLink>
-          )}
-        </>
+      showIcon={
+        // not sure why but data.status has become a union of all the enum values
+        // rather than just being the enum itself
+        (data.status as PositionStatus) !==
+        PositionStatus.POSITION_STATUS_UNSPECIFIED
       }
     >
-      {valueFormatted}
+      {cellContent}
     </WarningCell>
   );
 };
 
 const WarningCell = ({
   children,
-  tooltipContent,
   showIcon = true,
 }: {
   children: ReactNode;
-  tooltipContent: ReactNode;
   showIcon?: boolean;
 }) => {
   return (
-    <Tooltip description={tooltipContent}>
-      <div className="w-full flex items-center justify-between underline decoration-dashed underline-offest-2">
-        <span className="text-black dark:text-white mr-1">
-          {showIcon && <Icon name="warning-sign" size={3} />}
+    <div className="flex justify-end items-center">
+      {showIcon && (
+        <span className="text-black dark:text-white mr-2">
+          <VegaIcon name={VegaIconNames.EXCLAIMATION_MARK} size={12} />
         </span>
-        <span className="text-ellipsis overflow-hidden">{children}</span>
-      </div>
-    </Tooltip>
+      )}
+      <span className="overflow-hidden whitespace-nowrap text-ellipsis">
+        {children}
+      </span>
+    </div>
   );
 };

libs/positions/src/lib/stacked-cell.tsx

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+
+export const StackedCell = ({
+  primary,
+  secondary,
+}: {
+  primary: ReactNode;
+  secondary: ReactNode;
+}) => {
+  return (
+    <div className="leading-4 text-ellipsis whitespace-nowrap overflow-hidden">
+      <div data-testid="stack-cell-primary">{primary}</div>
+      <div data-testid="stack-cell-secondary" className="text-muted">
+        {secondary}
+      </div>
+    </div>
+  );
+};

libs/proposals/src/components/proposals-list/use-column-defs.tsx

@@ -5,7 +5,6 @@ import {
   CenteredGridCellWrapper,
   COL_DEFS,
   DateRangeFilter,
-  MarketProductPill,
   SetFilter,
 } from '@vegaprotocol/datagrid';
 import compact from 'lodash/compact';
@@ -20,13 +19,15 @@ import type {
   VegaICellRendererParams,
   VegaValueFormatterParams,
 } from '@vegaprotocol/datagrid';
-import { ExternalLink } from '@vegaprotocol/ui-toolkit';
-import type { InstrumentConfiguration } from '@vegaprotocol/types';
-import { ProposalStateMapping } from '@vegaprotocol/types';
+import { ExternalLink, Pill } from '@vegaprotocol/ui-toolkit';
+import {
+  ProposalProductTypeMapping,
+  ProposalProductTypeShortName,
+  ProposalStateMapping,
+} from '@vegaprotocol/types';
 import type { ProposalListFieldsFragment } from '../../lib/proposals-data-provider/__generated__/Proposals';
 import { VoteProgress } from '../voting-progress';
 import { ProposalActionsDropdown } from '../proposal-actions-dropdown';
-import { getMarketProductType } from '../../utils/get-market-product-type';
 
 export const MarketNameProposalCell = ({
   value,
@@ -38,13 +39,19 @@ export const MarketNameProposalCell = ({
   const { VEGA_TOKEN_URL } = useEnvironment();
   const { change } = data?.terms || {};
   if (change?.__typename === 'NewMarket' && VEGA_TOKEN_URL) {
-    const productType = getMarketProductType(
-      change.instrument as InstrumentConfiguration
-    );
+    const type = change.instrument.futureProduct?.__typename;
     const content = (
       <>
         <span data-testid="market-code">{value as string}</span>
-        <MarketProductPill productType={productType} />
+        {type && (
+          <Pill
+            size="xxs"
+            className="uppercase ml-0.5"
+            title={ProposalProductTypeMapping[type]}
+          >
+            {ProposalProductTypeShortName[type]}
+          </Pill>
+        )}
       </>
     );
     if (data?.id) {

libs/proposals/src/lib/proposals-data-provider/proposals-data-provider.tsx

@@ -17,4 +17,17 @@ export const proposalsDataProvider = makeDataProvider<
   never,
   never,
   ProposalsListQueryVariables
->({ query: ProposalsListDocument, getData });
+>({
+  query: ProposalsListDocument,
+  getData,
+  /**
+   * Ignores errors for not found settlement asset for NewMarket proposals.
+   *
+   * It can happen that a NewMarket proposal is incomplete and does not contain
+   * `futureProduct` details. This guard protects against that.
+   *
+   * GQL Path: `terms.change.instrument.futureProduct.settlementAsset`
+   */
+  errorPolicyGuard: (errors) =>
+    errors.every((e) => e.message.match(/failed to get asset for ID/)),
+});

libs/proposals/src/lib/protocol-upgrade-proposals/use-time-to-upgrade.spec.ts

@@ -1,5 +1,9 @@
 import { renderHook, waitFor } from '@testing-library/react';
-import { useTimeToUpgrade } from './use-time-to-upgrade';
+import {
+  ERR_NO_TIME_UNITS,
+  parseDuration,
+  useTimeToUpgrade,
+} from './use-time-to-upgrade';
 
 jest.mock('./__generated__/BlockStatistics', () => ({
   ...jest.requireActual('./__generated__/BlockStatistics'),
@@ -8,7 +12,7 @@ jest.mock('./__generated__/BlockStatistics', () => ({
       data: {
         statistics: {
           blockHeight: 1,
-          blockDuration: 500,
+          blockDuration: '500ms',
         },
       },
     };
@@ -30,3 +34,25 @@ describe('useTimeToUpgrade', () => {
     });
   });
 });
+
+describe('parseDuration', () => {
+  it.each([
+    ['1000000ns', 1],
+    ['1000µs', 1],
+    ['1ms', 1],
+    ['1s', 1000],
+    ['1m', 60 * 1000],
+    ['1h', 60 * 60 * 1000],
+    // below test cases are from vega
+    ['3.3s', 3300],
+    ['4m5s', 4 * 60 * 1000 + 5 * 1000],
+    ['4m5.001s', 4 * 60 * 1000 + 5001],
+    ['5h6m7.001s', 5 * 60 * 60 * 1000 + 6 * 60 * 1000 + 7001],
+    ['8m0.000000001s', 8 * 60 * 1000 + 1 / 1000000],
+  ])('parses %s to %d milliseconds', (input, output) => {
+    expect(parseDuration(input)).toEqual(output);
+  });
+  it('throws an error when given corrupted data', () => {
+    expect(() => parseDuration('blah')).toThrow(ERR_NO_TIME_UNITS);
+  });
+});

libs/proposals/src/lib/protocol-upgrade-proposals/use-time-to-upgrade.ts

@@ -7,6 +7,52 @@ const DEFAULT_POLLS = 10;
 const INTERVAL = 1000;
 const durations = [] as number[];
 
+export const ERR_NO_TIME_UNITS = new Error(
+  'could not parse block duration value - no time units detected'
+);
+
+/**
+ * Parses block duration value and output a number of milliseconds.
+ * @param input The block duration input from the API, e.g. 4m5.001s
+ * @returns A number of milliseconds
+ */
+export const parseDuration = (input: string) => {
+  // h  -> 60*60*1000
+  // m  -> 60*1000
+  // s  -> 1000
+  // ms -> 1
+  // µs -> 1/1000
+  // ns -> 1/1000000
+  let H = 0;
+  let M = 0;
+  let S = 0;
+  const lessThanSecond = /^[0-9.]+[nµm]*s$/gu.test(input);
+  const exp = /(?<hours>[0-9.]+h)?(?<minutes>[0-9.]+m)?(?<seconds>[0-9.]+s)?/gu;
+  const m = exp.exec(input);
+
+  const hours = m?.groups?.['hours'];
+  const minutes = m?.groups?.['minutes'];
+  const seconds = lessThanSecond ? input : m?.groups?.['seconds'];
+  if (!lessThanSecond && !hours && !minutes && !seconds) {
+    throw ERR_NO_TIME_UNITS;
+  }
+
+  if (seconds) {
+    S = parseFloat(seconds);
+    if (seconds.includes('ns')) S /= 1000 * 1000;
+    else if (seconds.includes('µs')) S /= 1000;
+    else if (seconds.includes('ms')) S *= 1;
+    else if (seconds.includes('s')) S *= 1000;
+  }
+  if (minutes && !lessThanSecond) {
+    M = parseFloat(minutes) * 60 * 1000;
+  }
+  if (hours && !lessThanSecond) {
+    H = parseFloat(hours) * 60 * 60 * 1000;
+  }
+  return H + M + S;
+};
+
 const useAverageBlockDuration = (polls = DEFAULT_POLLS) => {
   const [avg, setAvg] = useState<number | undefined>(undefined);
   const { data, startPolling, stopPolling, error } = useBlockStatisticsQuery({
@@ -28,7 +74,11 @@ const useAverageBlockDuration = (polls = DEFAULT_POLLS) => {
 
   useEffect(() => {
     if (durations.length < polls && data) {
-      durations.push(parseFloat(data.statistics.blockDuration));
+      try {
+        durations.push(parseDuration(data.statistics.blockDuration)); // ms
+      } catch (err) {
+        // NOOP - do not add unparsed value to AVG
+      }
     }
     if (durations.length === polls) {
       const averageBlockDuration = sum(durations) / durations.length; // ms

libs/proposals/src/utils/get-market-product-type.spec.ts

@@ -1,58 +0,0 @@
-import type { InstrumentConfiguration } from '@vegaprotocol/types';
-import { getMarketProductType } from './get-market-product-type';
-
-describe('getMarketProductType', () => {
-  it('should resolve product type properly', () => {
-    expect(
-      getMarketProductType({
-        futureProduct: {
-          quoteName: 'Market 1',
-        },
-      } as InstrumentConfiguration)
-    ).toEqual('Future');
-    expect(
-      getMarketProductType({
-        spotProduct: {
-          quoteName: 'Market 1',
-        },
-      } as unknown as InstrumentConfiguration)
-    ).toEqual('Spot');
-    expect(
-      getMarketProductType({
-        perpetualProduct: {
-          quoteName: 'Market 1',
-        },
-      } as unknown as InstrumentConfiguration)
-    ).toEqual('Perpetual');
-    expect(
-      getMarketProductType({
-        product: {
-          __typename: 'Perpetual',
-        },
-        futureProduct: {
-          quoteName: 'Market 1',
-        },
-      } as unknown as InstrumentConfiguration)
-    ).toEqual('Perpetual');
-    expect(
-      getMarketProductType({
-        product: {
-          __typename: 'Spot',
-        },
-        futureProduct: {
-          quoteName: 'Market 1',
-        },
-      } as unknown as InstrumentConfiguration)
-    ).toEqual('Spot');
-    expect(
-      getMarketProductType({
-        product: {
-          __typename: 'Future',
-        },
-        perpetualProduct: {
-          quoteName: 'Market 1',
-        },
-      } as unknown as InstrumentConfiguration)
-    ).toEqual('Future');
-  });
-});

libs/proposals/src/utils/get-market-product-type.ts

@@ -1,16 +0,0 @@
-import type { InstrumentConfiguration, Product } from '@vegaprotocol/types';
-
-// it needs to be adjusted after deploy this https://github.com/vegaprotocol/vega/pull/9003
-export const getMarketProductType = (
-  instrumentConfiguration: InstrumentConfiguration
-) => {
-  return 'product' in instrumentConfiguration
-    ? (instrumentConfiguration.product as Product).__typename
-    : 'futureProduct' in instrumentConfiguration
-    ? 'Future'
-    : 'spotProduct' in instrumentConfiguration
-    ? 'Spot'
-    : 'perpetualProduct' in instrumentConfiguration
-    ? 'Perpetual'
-    : undefined;
-};

libs/react-helpers/package.json

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

libs/tailwindcss-config/src/theme.js

@@ -172,7 +172,7 @@ module.exports = {
         900: '#F9FAFA',
       },
     },
-    danger: '#FF077F',
+    danger: '#EC003C',
     warning: '#FF8700',
     success: '#00F780',
   },

libs/types/package.json

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

libs/types/src/__generated__/types.ts

@@ -4364,6 +4364,8 @@ export type StopOrder = {
   marketId: Scalars['ID'];
   /** If OCO (one-cancels-other) order, the ID of the associated order. */
   ocoLinkId?: Maybe<Scalars['ID']>;
+  /** The order that was created when triggered. */
+  order?: Maybe<Order>;
   /** Party that submitted the stop order. */
   partyId: Scalars['ID'];
   /** Status of the stop order */
@@ -4371,7 +4373,7 @@ export type StopOrder = {
   /** Order to submit when the stop order is triggered. */
   submission: OrderSubmission;
   /** Price movement that will trigger the stop order */
-  trigger?: Maybe<StopOrderTrigger>;
+  trigger: StopOrderTrigger;
   /** Direction the price is moving to trigger the stop order. */
   triggerDirection: StopOrderTriggerDirection;
   /** Time the stop order was last updated. */

libs/types/src/global-types-mappings.ts

@@ -25,6 +25,7 @@ import type {
   DispatchMetric,
   StopOrderStatus,
 } from './__generated__/types';
+import type { ProductType, ProposalProductType } from './product';
 
 export const AccountTypeMapping: {
   [T in AccountType]: string;
@@ -513,3 +514,20 @@ export const PeggedReferenceMapping: { [R in PeggedReference]: string } = {
   PEGGED_REFERENCE_BEST_BID: 'Bid',
   PEGGED_REFERENCE_MID: 'Mid',
 };
+
+export const ProductTypeMapping: Record<ProductType, string> = {
+  Future: 'Future',
+};
+
+export const ProductTypeShortName: Record<ProductType, string> = {
+  Future: 'Futr',
+};
+
+export const ProposalProductTypeMapping: Record<ProposalProductType, string> = {
+  FutureProduct: 'Future',
+};
+
+export const ProposalProductTypeShortName: Record<ProposalProductType, string> =
+  {
+    FutureProduct: 'Futr',
+  };

libs/types/src/index.ts

@@ -1,3 +1,4 @@
 export * from './__generated__/types';
 export * from './candle';
 export * from './global-types-mappings';
+export * from './product';

libs/types/src/product.ts

@@ -0,0 +1,7 @@
+import type { Product } from './__generated__/types';
+
+export type ProductType = NonNullable<Product['__typename']>;
+
+// TODO: Update to be dynamically created for ProductionConfiguration union when schema
+// changes make it to stagnet1
+export type ProposalProductType = 'FutureProduct';

libs/ui-toolkit/package.json

@@ -1,4 +1,8 @@
 {
   "name": "@vegaprotocol/ui-toolkit",
-  "version": "0.12.7"
+  "version": "0.12.8",
+  "peerDependencies": {
+    "react": "18.2.0",
+    "react-dom": "18.2.0"
+  }
 }

libs/ui-toolkit/src/components/index.ts

@@ -16,8 +16,8 @@ export * from './form-group';
 export * from './healthbar';
 export * from './icon';
 export * from './indicator';
-export * from './input-error';
 export * from './input';
+export * from './input-error';
 export * from './key-value-table';
 export * from './link';
 export * from './loader';
@@ -48,10 +48,18 @@ export * from './tiny-scroll';
 export * from './toast';
 export * from './toggle';
 export * from './tooltip';
-export * from './trading-button';
-export * from './trading-dropdown';
 export * from './traffic-light';
 export * from './vega-icons';
 export * from './vega-logo';
 export * from './viewing-as-user';
 export * from './pill';
+
+// Trading specific components
+export * from './trading-button';
+export * from './trading-checkbox';
+export * from './trading-dropdown';
+export * from './trading-form-group';
+export * from './trading-input-error';
+export * from './trading-input';
+export * from './trading-radio-group';
+export * from './trading-select';

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

@@ -60,5 +60,9 @@ export const Tooltip = ({
   );
 
 export const TooltipCellComponent = (props: ITooltipParams) => {
-  return <p className={tooltipContentClasses}>{props.value}</p>;
+  return (
+    <div className={tooltipContentClasses} role="tooltip">
+      {props.value}
+    </div>
+  );
 };

libs/ui-toolkit/src/components/trading-checkbox/checkbox.spec.tsx

@@ -0,0 +1,40 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { TradingCheckbox } from './checkbox';
+
+describe('Checkbox', () => {
+  it('should render checkbox with label successfully', () => {
+    render(<TradingCheckbox label="test" />);
+    expect(screen.getByText('test')).toBeInTheDocument();
+  });
+
+  it('should render a checked checkbox if specified in state', () => {
+    render(<TradingCheckbox label="label" checked={true} />);
+    expect(screen.getByTestId(/icon-/)).toBeInTheDocument();
+  });
+
+  it('should render an unchecked checkbox if specified in state', () => {
+    render(<TradingCheckbox label="unchecked" checked={false} />);
+    expect(screen.queryByTestId(/icon-/)).not.toBeInTheDocument();
+  });
+
+  it('should render an indeterminate checkbox if specified in state', () => {
+    render(<TradingCheckbox label="indeterminate" checked="indeterminate" />);
+    expect(screen.getByTestId('indeterminate-icon')).toBeInTheDocument();
+  });
+
+  it('fires callback on change if provided', () => {
+    const callback = jest.fn();
+
+    render(
+      <TradingCheckbox
+        name="test"
+        label="onchange"
+        onCheckedChange={callback}
+      />
+    );
+
+    const checkbox = screen.getByText('onchange');
+    fireEvent.click(checkbox);
+    expect(callback).toHaveBeenCalled();
+  });
+});

libs/ui-toolkit/src/components/trading-checkbox/checkbox.stories.tsx

@@ -0,0 +1,38 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import type { TradingCheckboxProps } from './checkbox';
+import { TradingCheckbox } from './checkbox';
+
+export default {
+  component: TradingCheckbox,
+  title: 'Checkbox',
+} as Meta<typeof TradingCheckbox>;
+
+const Template: StoryFn<TradingCheckboxProps> = (args) => (
+  <TradingCheckbox {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  name: 'default',
+  label: 'Regular checkbox',
+};
+
+export const Overflow = Template.bind({});
+Overflow.args = {
+  name: 'overflow',
+  label:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  label: 'Disabled',
+};
+
+export const Indeterminate = Template.bind({});
+Indeterminate.args = {
+  name: 'default',
+  checked: 'indeterminate',
+  label: 'Indeterminate checkbox',
+};

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

@@ -0,0 +1,63 @@
+import { VegaIcon, VegaIconNames } from '../icon';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import classNames from 'classnames';
+import type { ReactNode } from 'react';
+
+type CheckedState = boolean | 'indeterminate';
+export interface TradingCheckboxProps {
+  checked?: CheckedState;
+  label?: ReactNode;
+  name?: string;
+  onCheckedChange?: (checked: CheckedState) => void;
+  disabled?: boolean;
+}
+
+export const TradingCheckbox = ({
+  checked,
+  label,
+  name,
+  onCheckedChange,
+  disabled = false,
+}: TradingCheckboxProps) => {
+  const rootClasses = classNames(
+    'relative flex justify-center items-center w-3 h-3',
+    'border rounded-sm overflow-hidden',
+    'border-vega-clight-500 dark:border-vega-cdark-500',
+    'aria-checked:border-vega-clight-400 dark:aria-checked:border-vega-cdark-400',
+    'disabled:border-vega-clight-600 dark:disabled:border-vega-cdark-600',
+    'bg-vega-clight-700 dark:bg-vega-cdark-700'
+  );
+
+  return (
+    <div className="flex gap-1.5 items-center">
+      <CheckboxPrimitive.Root
+        name={name}
+        id={name}
+        className={rootClasses}
+        checked={checked}
+        onCheckedChange={onCheckedChange}
+        disabled={disabled}
+        data-testid={name}
+      >
+        <CheckboxPrimitive.CheckboxIndicator className="flex justify-center items-center w-3 h-3">
+          {checked === 'indeterminate' ? (
+            <span
+              data-testid="indeterminate-icon"
+              className="absolute w-[8px] h-[2px] bg-vega-clight-50 dark:bg-vega-cdark-50"
+            />
+          ) : (
+            <VegaIcon name={VegaIconNames.TICK} size={10} />
+          )}
+        </CheckboxPrimitive.CheckboxIndicator>
+      </CheckboxPrimitive.Root>
+      <label
+        htmlFor={name}
+        className={classNames('text-xs flex-1', {
+          'text-vega-clight-200 dark:text-vega-cdark-200': disabled,
+        })}
+      >
+        {label}
+      </label>
+    </div>
+  );
+};

libs/ui-toolkit/src/components/trading-checkbox/index.ts

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

libs/ui-toolkit/src/components/trading-form-group/form-group.spec.tsx

@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react';
+
+import { TradingFormGroup } from './form-group';
+
+describe('FormGroup', () => {
+  it('should render label if given a label', () => {
+    render(
+      <TradingFormGroup label="label" labelFor="test">
+        <input id="test"></input>
+      </TradingFormGroup>
+    );
+    expect(screen.getByLabelText('label')).toBeInTheDocument();
+  });
+
+  it('should render children', () => {
+    render(
+      <TradingFormGroup label="label" labelFor="test">
+        <input data-testid="foo" id="test"></input>
+      </TradingFormGroup>
+    );
+    expect(screen.getByTestId('foo')).toBeInTheDocument();
+  });
+});

libs/ui-toolkit/src/components/trading-form-group/form-group.tsx

@@ -0,0 +1,53 @@
+import classNames from 'classnames';
+import type { ReactNode } from 'react';
+
+export interface TradingFormGroupProps {
+  children: ReactNode;
+  className?: string;
+  label: string | ReactNode; // For accessibility reasons this must always be set for screen readers. If you want it to not show, then use the hideLabel prop"
+  labelFor: string; // Same as above
+  hideLabel?: boolean;
+  disabled?: boolean;
+  labelDescription?: string;
+  labelAlign?: 'left' | 'right';
+  compact?: boolean;
+}
+
+export const TradingFormGroup = ({
+  children,
+  className,
+  label,
+  labelFor,
+  labelDescription,
+  labelAlign = 'left',
+  hideLabel = false,
+  compact = false,
+  disabled = false,
+}: TradingFormGroupProps) => {
+  const wrapperClasses = classNames(
+    'relative',
+    {
+      'mb-2': compact,
+      'mb-4': !compact,
+    },
+    className
+  );
+  const labelClasses = classNames('block mb-2 text-xs', {
+    'text-right': labelAlign === 'right',
+    'sr-only': hideLabel,
+    'text-muted': disabled,
+  });
+  return (
+    <div data-testid="form-group" className={wrapperClasses}>
+      {label && (
+        <label htmlFor={labelFor} className={labelClasses}>
+          {label}
+          {labelDescription && (
+            <div className="font-light mt-1">{labelDescription}</div>
+          )}
+        </label>
+      )}
+      {children}
+    </div>
+  );
+};

libs/ui-toolkit/src/components/trading-form-group/from-group.stories.tsx

@@ -0,0 +1,47 @@
+import type { StoryFn, Meta } from '@storybook/react';
+import { TradingInput } from '../trading-input';
+import type { TradingFormGroupProps } from './form-group';
+import { TradingFormGroup } from './form-group';
+export default {
+  component: TradingFormGroup,
+  title: 'FormGroup',
+  argTypes: {
+    label: {
+      type: 'string',
+    },
+    labelFor: {
+      type: 'string',
+    },
+    labelDescription: {
+      type: 'string',
+    },
+    className: {
+      type: 'string',
+    },
+    hasError: {
+      type: 'boolean',
+    },
+    disabled: {
+      type: 'boolean',
+    },
+  },
+} as Meta;
+
+const Template: StoryFn<TradingFormGroupProps> = (args) => (
+  <TradingFormGroup {...args}>
+    <TradingInput id="labelFor" />
+  </TradingFormGroup>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  label: 'Label',
+  labelFor: 'labelFor',
+};
+
+export const WithLabelDescription = Template.bind({});
+WithLabelDescription.args = {
+  label: 'Label',
+  labelFor: 'labelFor',
+  labelDescription: 'Description text',
+};

libs/ui-toolkit/src/components/trading-form-group/index.tsx

@@ -0,0 +1 @@
+export * from './form-group';

libs/ui-toolkit/src/components/trading-input-error/index.ts

@@ -0,0 +1 @@
+export * from './input-error';

libs/ui-toolkit/src/components/trading-input-error/input-error.spec.tsx

@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import { TradingInputError } from './input-error';
+
+describe('InputError', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<TradingInputError />);
+    expect(baseElement).toBeTruthy();
+  });
+});

libs/ui-toolkit/src/components/trading-input-error/input-error.stories.tsx

@@ -0,0 +1,20 @@
+import type { StoryFn, Meta } from '@storybook/react';
+import { TradingInputError } from './input-error';
+
+export default {
+  component: TradingInputError,
+  title: 'InputError',
+} as Meta;
+
+const Template: StoryFn = (args) => <TradingInputError {...args} />;
+
+export const Danger = Template.bind({});
+Danger.args = {
+  children: 'An error that might have happened',
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  intent: 'warning',
+  children: 'Something that might be an issue',
+};