Merge remote-tracking branch 'origin/develop' into feat/4351-get-started-steps

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

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/.env

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

apps/governance/.env.capsule

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

apps/governance/.env.devnet

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

apps/governance/.env.mainnet

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

apps/governance/.env.mainnet-mirror

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

apps/governance/.env.stagnet1

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

apps/governance/.env.testnet

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

apps/governance/.env.validators-testnet

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

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

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

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

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

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

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

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

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

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

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

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

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

apps/trading-e2e/.env

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

apps/trading-e2e/src/integration/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/settings.cy.ts

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

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

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

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

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

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

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

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-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/.env

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

apps/trading/.env.capsule

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

apps/trading/.env.devnet

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

apps/trading/.env.mainnet

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

apps/trading/.env.mainnet-mirror

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

apps/trading/.env.stagnet1

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

apps/trading/.env.testnet

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

apps/trading/.env.validators-testnet

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

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

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

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

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

apps/trading/components/constants.ts

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

apps/trading/components/market-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/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/welcome-dialog/get-started.spec.tsx

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

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

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

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

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

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

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

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

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

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

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

apps/trading/pages/_app.page.tsx

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

apps/trading/stores/global.ts

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

libs/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/orders/src/lib/components/order-data-provider/__generated__/Orders.ts

@@ -34,21 +34,21 @@ 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, 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, 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, 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 OrderFieldsFragmentDoc = gql`
     fragment OrderFields on Order {

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;
@@ -183,7 +181,7 @@ const getSubscriptionVariables = (
 ): PositionsSubscriptionSubscriptionVariables[] =>
   ([] as string[]).concat(variables.partyIds).map((partyId) => ({ partyId }));
 
-const positionsDataProvider = makeDataProvider<
+export const positionsDataProvider = makeDataProvider<
   PositionsQuery,
   PositionFieldsFragment[],
   PositionsSubscriptionSubscription,
@@ -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/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/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/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/utils/src/lib/format/number.spec.ts

@@ -44,6 +44,8 @@ describe('number utils', () => {
       o: '12,345,678.91234568',
       q: '1',
     },
+    // USDT / USDC
+    { v: new BigNumber(12345678), d: 6, o: '12.35', q: 1000000 },
   ])(
     'formats with addDecimalsFormatNumberQuantum given number correctly',
     ({ v, d, o, q }) => {

libs/wallet/src/connect-dialog/connect-dialog.tsx

@@ -204,6 +204,7 @@ const ConnectorList = ({
   setWalletUrl: (value: string) => void;
   isDesktopWalletRunning: boolean | null;
 }) => {
+  const { pubKey } = useVegaWallet();
   const title = isBrowserWalletInstalled()
     ? t('Connect Vega wallet')
     : t('Get a Vega wallet');
@@ -234,7 +235,7 @@ const ConnectorList = ({
               onClick={() => onSelect('injected')}
             />
           ) : (
-            <GetWallet />
+            <GetWalletButton />
           )}
         </div>
         <div>
@@ -242,6 +243,7 @@ const ConnectorList = ({
             type="view"
             text={t('View as party')}
             onClick={() => onSelect('view')}
+            disabled={Boolean(pubKey)}
           />
         </div>
         <div className="last:mb-0">
@@ -318,7 +320,7 @@ const SelectedForm = ({
   throw new Error('No connector selected');
 };
 
-const GetWallet = () => {
+export const GetWalletButton = ({ className }: { className?: string }) => {
   const { MOZILLA_EXTENSION_URL, CHROME_EXTENSION_URL } = useEnvironment();
   const isItChrome = window.navigator.userAgent.includes('Chrome');
   const isItMozilla =
@@ -347,10 +349,13 @@ const GetWallet = () => {
 
   return !isItChrome && !isItMozilla ? (
     <div
-      className={classNames([
-        'bg-vega-blue-350 hover:bg-vega-blue-400 dark:bg-vega-blue-650 dark:hover:bg-vega-blue-600',
-        'flex gap-2 items-center justify-center rounded h-8 px-3 relative',
-      ])}
+      className={classNames(
+        [
+          'bg-vega-blue-350 hover:bg-vega-blue-400 dark:bg-vega-blue-650 dark:hover:bg-vega-blue-600',
+          'flex gap-2 items-center justify-center rounded h-8 px-3 relative',
+        ],
+        className
+      )}
       data-testid="get-wallet-button"
     >
       {buttonContent}
@@ -360,7 +365,7 @@ const GetWallet = () => {
       onClick={onClick}
       intent={Intent.Info}
       data-testid="get-wallet-button"
-      className="relative"
+      className={classNames('relative', className)}
       size="small"
       fill
     >
@@ -409,6 +414,7 @@ const CustomUrlInput = ({
   isDesktopWalletRunning: boolean | null;
   onSelect: (type: WalletType) => void;
 }) => {
+  const { pubKey } = useVegaWallet();
   const [urlInputExpanded, setUrlInputExpanded] = useState(false);
   return urlInputExpanded ? (
     <>
@@ -433,7 +439,7 @@ const CustomUrlInput = ({
         />
       </FormGroup>
       <ConnectionOption
-        disabled={!isDesktopWalletRunning}
+        disabled={!isDesktopWalletRunning || Boolean(pubKey)}
         type="jsonRpc"
         text={t('Connect the App/CLI')}
         onClick={() => onSelect('jsonRpc')}
@@ -442,7 +448,7 @@ const CustomUrlInput = ({
   ) : (
     <>
       <ConnectionOption
-        disabled={!isDesktopWalletRunning}
+        disabled={!isDesktopWalletRunning || Boolean(pubKey)}
         type="jsonRpc"
         text={t('Use the Desktop App/CLI')}
         onClick={() => onSelect('jsonRpc')}
@@ -453,6 +459,7 @@ const CustomUrlInput = ({
             <button
               className="underline text-default"
               onClick={() => setUrlInputExpanded(true)}
+              disabled={Boolean(pubKey)}
             >
               {t('Enter a custom wallet location')}{' '}
               <VegaIcon name={VegaIconNames.ARROW_RIGHT} />
@@ -467,6 +474,7 @@ const CustomUrlInput = ({
               <button
                 className="underline"
                 onClick={() => setUrlInputExpanded(true)}
+                disabled={Boolean(pubKey)}
               >
                 {t('custom wallet location')}
               </button>

libs/wallet/src/use-is-wallet-service-running.tsx

@@ -12,7 +12,9 @@ export const useIsWalletServiceRunning = (
 
   const checkState = useCallback(async () => {
     const connector = connectors['jsonRpc'] as JsonRpcConnector;
-    connector.url = url;
+    if (url && url !== connector.url) {
+      connector.url = url;
+    }
     try {
       await connector.checkCompat();
       const chainIdResult = await connector.getChainId();

nx.json

@@ -21,8 +21,7 @@
           "echo $NX_TENDERMINT_URL",
           "echo $NX_TENDERMINT_WEBSOCKET_URL",
           "echo $NX_ETHEREUM_PROVIDER_URL"
-        ],
-        "url": "https://cloud.nx.app"
+        ]
       }
     }
   },

specs/0007-FUGS-first-use-get-started.md

@@ -1,22 +1,34 @@
 # First use & get started steps
 
-## When first enter the app
+## "Onboarding" state is gradable and has following steps: (<a name="0007-FUGS-002" href="#0007-FUGS-002">0007-FUGS-003</a>)
+
+- New visitor - has no wallet nor any dapps running.
+  - I **must** see CTA button "Get started", which clicking launches the get wallet flow (wallet connection window with links to the Chrome and FF stores)
+- Has wallet - Once wallet detected set to this.
+  - I **must** see CTA button "Connect", which clicking launches the wallet connection
+- Has connected - Once user has connected set to this.
+  - I **must** see CTA button "Deposit", which clicking launches the deposit ticket.
+- Has deposited - Once user has made AT LEAST one deposit of ANY settlement asset set to this.
+  - I **must** see CTA button "Dismiss", which clicking updates the state to Ready to trade - Get started box should now disappear forever.
+- Ready to trade - Once user has made at least one deposit AND has dismissed the "Get Started" box in the ticket.
+  - Onboarding window nor contextual "Get started" banner should be not displayed anymore.
+
+## When first enter the app or next times, but I didn't accomplish all onboarding steps.
 
 - **Must** When I open Console for the first time I can see what it is i.e. a short description and key features in auto opened dialog window (first use popup) (<a name="0007-FUGS-001" href="#0007-FUGS-001">0007-FUGS-001</a>)
-- **Must** If my wallet is already connected I don't see the first use popup (<a name="0007-FUGS-002" href="#0007-FUGS-002">0007-FUGS-002</a>)
-- - **Must** If window.vega is detected (browser wallet is installed), don't open first use popup (<a name="0007-FUGS-003" href="#0007-FUGS-003">0007-FUGS-003</a>)
-- - **Must** If we detect previous connection using localStorage for desktop/cli wallet, don't open first use popup (<a name="0007-FUGS-004" href="#0007-FUGS-004">0007-FUGS-004</a>)
+- If full "onboarding" hasn't been accomplished yet, I **must** see the popup with my progress marked. (<a name="0007-FUGS-002" href="#0007-FUGS-002">0007-FUGS-002</a>)
 - **Must** There is a call to action to browse markets, linking to the market view market/all (<a name="0007-FUGS-005" href="#0007-FUGS-005">0007-FUGS-005</a>)
 - **Must** I can see the steps I need to take to get started trading (<a name="0007-FUGS-007" href="#0007-FUGS-006">0007-FUGS-006</a>)
 - **Must** There is a call to action to get started, triggering the connect modal (<a name="0007-FUGS-007" href="#0007-FUGS-007">0007-FUGS-007</a>)
 - **Must** There is a link to try out trading on Fairground when I'm on Mainnet (<a name="0007-FUGS-008" href="#0007-FUGS-008">0007-FUGS-008</a>)
 - **Must** There is a link to trade with real funds on Mainnet when I am on Fairground (<a name="0007-FUGS-010" href="#0007-FUGS-010">0007-FUGS-010</a>)
 - **Must** When I am on the Fairground version, I can see a warning / call out that this is Fairground meaning I can try out with virtual assets at no risk (<a name="0007-FUGS-011" href="#0007-FUGS-011">0007-FUGS-011</a>)
+- If I dismiss the popup, I **must** not see it unless I NOT accomplish full "onboarding"
 - If I dismiss the popup, I land on the default market (<a name="0007-FUGS-012" href="#0007-FUGS-012">0007-FUGS-012</a>)
 
-## When first use popup has been seen, but no browser wallet is installed
+## When the popup has been dismissed:
 
-- **Must** I can see the steps to get started with a visible call to action to "get started" in the context of the deal ticket, deposit, withdraw, transfer components in the sidebar (<a name="0007-FUGS-013" href="#0007-FUGS-013">0007-FUGS-013</a>)
+- **Must** I can see the steps to get started with a visible call to action (according to my progress) in the context of the deal ticket, deposit, withdraw, transfer components in the sidebar (<a name="0007-FUGS-013" href="#0007-FUGS-013">0007-FUGS-013</a>)
 - **Must** Remove buttons from pane containers that prompt to connect wallet (<a name="0007-FUGS-014" href="#0007-FUGS-014">0007-FUGS-014</a>)
 - **Must** We've replaced "connect wallet" in the top right with "get started" (<a name="0007-FUGS-015" href="#0007-FUGS-015">0007-FUGS-015</a>)
 - **Must** When I press the get started CTA, I see the wallet connect popup (<a name="0007-FUGS-016" href="#0007-FUGS-016">0007-FUGS-016</a>)

specs/1005-VEST-vesting.md

@@ -53,7 +53,6 @@ for the a given Ethereum wallet/address/key:
   - **must** see how many tokens in each tranche are locked <a name="1005-VEST-025" href="#1005-VEST-025">1005-VEST-025</a>
   - **must** see how many tokens in each tranche are redeemable <a name="1005-VEST-026" href="#1005-VEST-026">1005-VEST-026</a>
   - **must** see an option to redeem from tranche <a name="1005-VEST-027" href="#1005-VEST-027">1005-VEST-027</a>
-  - **must** be warned if amount that can be redeemed from that tranche is greater than the un-associated balance for that Eth key (because this will cause the redeem function to fail) <a name="1005-VEST-028" href="#1005-VEST-028">1005-VEST-028</a>
   - **should** see how many tokens I'd need to disassociate to be able to run the redeem function (this should be rounded up to avoid the transaction failing due to more tokens having unlocked since the user looked at the form)
   - **should** see link to [disassociate](1004-ASSO-associate.md)
 

specs/6001-MARK-find_markets.md

@@ -3,6 +3,7 @@
 ## Closed Markets
 
 - **Must** see market's instrument code (<a name="6001-MARK-001" href="#6001-MARK-001">6001-MARK-001</a>)
+- **Must** see market's product type (<a name="6001-MARK-071" href="#6001-MARK-071">6001-MARK-071</a>)
 - **Must** see market's instrument name (sometimes labelled 'description') (<a name="6001-MARK-002" href="#6001-MARK-002">6001-MARK-002</a>)
 - **Must** see status (<a name="6001-MARK-003" href="#6001-MARK-003">6001-MARK-003</a>)
 - **Must** see the settlement date (<a name="6001-MARK-004" href="#6001-MARK-004">6001-MARK-004</a>)
@@ -45,10 +46,12 @@
 - **Must** be able to close and open the market selector (<a name="6001-MARK-066" href="#6001-MARK-066">6001-MARK-066</a>)
 - **Must** must change color and have + or negative suffix of the price change and change color for the sparkline (<a name="6001-MARK-067" href="#6001-MARK-067">6001-MARK-067</a>)
 - **Must** be default tab "All" where there's no filtering by product. (<a name="6001-MARK-070" href="#6001-MARK-070">6001-MARK-070</a>)
+- If tab "All" is selected **Must** see product type (<a name="6001-MARK-072" href="#6001-MARK-072">6001-MARK-072</a>)
 
 ## All Markets
 
 - **Must** see market's instrument code (<a name="6001-MARK-035" href="#6001-MARK-035">6001-MARK-035</a>)
+- **Must** see product type (<a name="6001-MARK-073" href="#6001-MARK-073">6001-MARK-073</a>)
 - **Must** see market's instrument name (sometimes labelled 'description') (<a name="6001-MARK-036" href="#6001-MARK-036">6001-MARK-036</a>)
 - **Must** see Trading mode (<a name="6001-MARK-037" href="#6001-MARK-037">6001-MARK-037</a>)
 - **Must** see status (<a name="6001-MARK-038" href="#6001-MARK-038">6001-MARK-038</a>)
@@ -71,6 +74,7 @@
 ## Proposed markets
 
 - **Must** see market's instrument code (<a name="6001-MARK-049" href="#6001-MARK-049">6001-MARK-049</a>)
+- **Must** see product type (<a name="6001-MARK-074" href="#6001-MARK-074">6001-MARK-074</a>)
 - **Must** see market's instrument name (sometimes labelled 'description') (<a name="6001-MARK-050" href="#6001-MARK-050">6001-MARK-050</a>)
 - **Must** show the settlement asset (<a name="6001-MARK-051" href="#6001-MARK-051">6001-MARK-051</a>)
 - **Must** see state (<a name="6001-MARK-052" href="#6001-MARK-052">6001-MARK-052</a>)

specs/7001-COLL-collateral.md

@@ -13,16 +13,31 @@
   - **Must** show the asset symbol (<a name="7001-COLL-007" href="#7001-COLL-007">7001-COLL-007</a>)
   - **Must** provide a way to see the [full asset details](6501-ASSE-assets.md) (<a name="7001-COLL-008" href="#7001-COLL-008">7001-COLL-008</a>)
   - **Must** provide a way to see all accounts, their type, and their balance for a single asset (<a name="7001-COLL-009" href="#7001-COLL-009">7001-COLL-009</a>)
-    - **Could** have default sort order (<a name="7001-COLL-010" href="#7001-COLL-010">7001-COLL-010</a>)
-      - General
-      - Margin
-      - Bond
-      - Fees - Maker
-      - Fees - Liquidity
-      - Rewards - Maker Paid
-      - Rewards - Maker Received
-      - Rewards - Liquidity Provision Received Fees
-      - Rewards - Market Proposers
+  - **Could** have default sort order (<a name="7001-COLL-010" href="#7001-COLL-010">7001-COLL-010</a>)
+    - General
+    - Margin
+    - Bond
+    - Fees - Maker
+    - Fees - Liquidity
+    - Rewards - Maker Paid
+    - Rewards - Maker Received
+    - Rewards - Liquidity Provision Received Fees
+    - Rewards - Market Proposers
+
+## Accounts breakdown
+
+- **Must** be able to see a breakdown of accounts for a single asset (<a name="7001-COLL-013" href="#7001-COLL-013">7001-COLL-013</a>)
+- **Must** be able to see the total amount of the selected asset (<a name="7001-COLL-014" href="#7001-COLL-014">7001-COLL-014</a>)
+- **Must** be able to see market code of margin account (<a name="7001-COLL-015" href="#7001-COLL-015">7001-COLL-015</a>)
+- **Must** be able to see product type of the margin account's associated market (<a name="7001-COLL-016" href="#7001-COLL-016">7001-COLL-016</a>)
+- **Must** be able to see account type (<a name="7001-COLL-017" href="#7001-COLL-017">7001-COLL-017</a>)
+- **Must** be able to see account balance (<a name="7001-COLL-018" href="#7001-COLL-018">7001-COLL-018</a>)
+- **Must** be able to see what percentage of that assets total is used by a margin account (<a name="7001-COLL-019" href="#7001-COLL-019">7001-COLL-019</a>)
+- **Must** be able to see margin health if its a margin account (<a name="7001-COLL-020" href="#7001-COLL-020">7001-COLL-020</a>)
+
+### Margin health
+
+TODO
 
 ## Deal Ticket
 

specs/7003-MORD-manage_orders.md

@@ -51,6 +51,7 @@ When looking at a list of orders, I...
 
 - **must** see what [market](9001-DATA-data_display.md#market) an order is related to (either code, ID or name, preferable name) (<a name="7003-MORD-002" href="#7003-MORD-002">7003-MORD-002</a>)
   - **should** see what the `status` is of the market (particularly if it is not "normal")
+- **must** see product type of market's instrument (<a name="7003-MORD-020" href="#7003-MORD-020">7003-MORD-020</a>)
 - **must** see the [size](9001-DATA-data_display.md#size) of the order (<a name="7003-MORD-003" href="#7003-MORD-003">7003-MORD-003</a>)
 - **must** see the [direction/side](9001-DATA-data_display.md#direction--side) (Long or Short) of the order (this can be implied with a + or negative suffix on the size, + for Long, - for short) (<a name="7003-MORD-004" href="#7003-MORD-004">7003-MORD-004</a>)
 - **must** see [order type](9001-DATA-data_display.md#order-type) (<a name="7003-MORD-005" href="#7003-MORD-005">7003-MORD-005</a>)

specs/7004-POSI-positions.md

@@ -4,30 +4,37 @@
 
 - **Must** be able to view the following columns (<a name="7004-POSI-002" href="#7004-POSI-002">7004-POSI-002</a>):
 
-  - market
-  - notional
-  - open volume
-  - mark price
-  - settlement asset
-  - entry price
-  - leverage
-  - margin allocated
-  - realised PNL
-  - unrealised PNL
-  - Updated
+  - Market
+    - Code
+    - Settlement asset symbol
+    - Product type
+  - Size / Notional
+    - Size
+    - Notional
+  - Entry / Mark
+    - Entry
+    - Mark
+  - Margin
+    - Allocated
+    - Leverage
+  - Liquidation
+  - Realised PNL
+  - Unrealised PNL
 
 - **Must** be able to sort each column by asc and dsc (<a name="7004-POSI-003" href="#7004-POSI-003">7004-POSI-003</a>)
 
+  - If the cell shows two values the primary (top value) is used to sort (<a name="7004-POSI-014" href="#7004-POSI-014">7004-POSI-014</a>)
+
 - **Must** be able to scroll horizontally to see all columns if screen resolution isn't wide enough (<a name="7004-POSI-004" href="#7004-POSI-004">7004-POSI-004</a>)
 
 - **Must** be able to drag and drop column names to re order (<a name="7004-POSI-005" href="#7004-POSI-005">7004-POSI-005</a>)
 
+- **Must** be able to remove columns by dragging headers out of the table (<a name="7004-POSI-015" href="#7004-POSI-015">7004-POSI-015</a>)
+
 - **Must** be able to resize the width of the columns (<a name="7004-POSI-006" href="#7004-POSI-006">7004-POSI-006</a>)
 
 - **Must** The columns 'Open volume', 'realised PNL' and 'Unrealised PNL' must change color and have a + or - suffix depending on being positive/negative (<a name="7004-POSI-007" href="#7004-POSI-007">7004-POSI-007</a>)
 
-- **Must** be able to select settlement asset to view asset details (<a name="7004-POSI-008" href="#7004-POSI-008">7004-POSI-008</a>)
-
 - **Must** be able to select the 3 dots to view asset details (<a name="7004-POSI-009" href="#7004-POSI-009">7004-POSI-009</a>)
 
 - **Must** be able to select the close button to close my position (<a name="7004-POSI-010" href="#7004-POSI-010">7004-POSI-010</a>)
@@ -37,3 +44,15 @@
 - **Must** retain previous column sizing on refresh (<a name="7004-POSI-012" href="#7004-POSI-012">7004-POSI-012</a>)
 
 - **Must** notional column has a tooltip on hover (<a name="7004-POSI-013" href="#7004-POSI-013">7004-POSI-013</a>)
+
+- **Must** be able to see worst case liquidation price (<a name="7004-POSI-016" href="#7004-POSI-016">7004-POSI-016</a>)
+
+- **Must** be able to see best and worst case liquidation price when hovering (<a name="7004-POSI-017" href="#7004-POSI-017">7004-POSI-017</a>)
+
+- **Must** be able to see if your realised PnL was affected by loss socialisation (<a name="7004-POSI-018" href="#7004-POSI-018">7004-POSI-018</a>)
+
+- **Must** be able to see what type of product the position was opened on (<a name="7004-POSI-019" href="#7004-POSI-019">7004-POSI-019</a>)
+
+- **Must** not see positions on markets which are closed (<a name="7004-POSI-020" href="#7004-POSI-020">7004-POSI-020</a>)
+
+- **Must** be able to show closed markets (<a name="7004-POSI-021" href="#7004-POSI-021">7004-POSI-021</a>)

specs/9001-DATA-data_display.md

@@ -57,9 +57,13 @@ The quantum is a value that is used to define "The minimum economically meaningf
 ## Market
 
 Markets do not have names, technically it is the instrument within a market that has the name. Theoretically the same instrument can be traded in multiple markets. if/when this happens a user needs to be able to disambiguate between markets. Each market does have a unique ID, Note: this is a hash of the definition of the market when it was created.
+
 Instruments have both a Name and Code, see [market framework](../protocol/0001-MKTF-market_framework.md) for how these are used. Generally the Code can save space once a user is familiar with the market. The Name is more descriptive and should be the default when discovering markets. It remains to be seen how the community will use these exactly.
+
 Markets can have several statuses and it may be sensible when listing markets to highlight their status. e.g. if a market is usually in continuous trading mode, but is currently in an auction due to low liquidity. The market name field could be augmented to show the status (add an icon etc).
 
+Near to instrument code or name its product type should be shown using the short name (Futr, Spot, Perp) or if space allows for it, then the long name may be used (Future, Spot, Perpetual).
+
 ## Public keys
 
 > aka Party