fix(explorer): fix nesting for test mock

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,6 +1,6 @@
 # Related issues 🔗
 
-Issue: #[Issue number here]
+Closes #[Issue number here]
 
 # Description ℹ️
 

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

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

.github/workflows/publish-npm.yml

@@ -15,7 +15,6 @@ on:
           - types
           - utils
           - i18n
-          - wallet
 
 jobs:
   publish:

apps/explorer-e2e/src/fixtures/mocks/new-asset-proposal.json

@@ -1,26 +0,0 @@
-{
-  "proposalSubmission": {
-    "rationale": {
-      "title": "Test new asset proposal",
-      "description": "E2E test for proposals"
-    },
-    "terms": {
-      "newAsset": {
-        "changes": {
-          "name": "USDT Coin",
-          "symbol": "USDT",
-          "decimals": "18",
-          "quantum": "1",
-          "erc20": {
-            "contractAddress": "0xb404c51bbc10dcbe948077f18a4b8e553d160084",
-            "withdrawThreshold": "10",
-            "lifetimeLimit": "10"
-          }
-        }
-      },
-      "closingTimestamp": 1724339572,
-      "enactmentTimestamp": 1724339572,
-      "validationTimestamp": 1692799617
-    }
-  }
-}

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

@@ -1,10 +1,9 @@
-import { getNewAssetTxBody } from '../support/governance.functions';
-
 context('Proposal page', { tags: '@smoke' }, function () {
   describe('Verify elements on page', function () {
     const proposalHeading = 'proposals-heading';
     const dateTimeRegex =
       /(\d{1,2})\/(\d{1,2})\/(\d{4}), (\d{1,2}):(\d{1,2}):(\d{1,2})/gm;
+    const proposalTitle = 'Add Lorem Ipsum market';
 
     before('Create market proposal', function () {
       cy.visit('/');
@@ -12,8 +11,6 @@ context('Proposal page', { tags: '@smoke' }, function () {
     });
 
     it('Able to view proposal', function () {
-      const proposalTitle = 'Add Lorem Ipsum market';
-
       cy.navigate_to('governanceProposals');
       cy.getByTestId(proposalHeading).should('be.visible');
       cy.contains(proposalTitle)
@@ -25,9 +22,6 @@ context('Proposal page', { tags: '@smoke' }, function () {
           cy.get_element_by_col_id('type').should('have.text', 'NewMarket');
           cy.get_element_by_col_id('state').should('have.text', 'Enacted');
           cy.getByTestId('vote-progress').should('be.visible');
-          cy.getByTestId('vote-progress-bar-for')
-            .invoke('attr', 'style')
-            .should('eq', 'width: 100%;');
           cy.get('[col-id="cDate"]')
             .invoke('text')
             .should('match', dateTimeRegex);
@@ -41,12 +35,9 @@ context('Proposal page', { tags: '@smoke' }, function () {
         });
       cy.getByTestId('dialog-title').should('have.text', proposalTitle);
       cy.get('.language-json').should('exist');
-      cy.getByTestId('icon-cross').click();
     });
 
     it.skip('Proposal page displayed on mobile', function () {
-      const proposalTitle = 'Add Lorem Ipsum market';
-
       cy.common_switch_to_mobile_and_click_toggle();
       cy.navigate_to('governanceProposals', true);
       cy.getByTestId(proposalHeading).should('be.visible');
@@ -54,40 +45,5 @@ context('Proposal page', { tags: '@smoke' }, function () {
         cy.get_element_by_col_id('title').should('have.text', proposalTitle);
       });
     });
-
-    it('Able to view new asset proposal', function () {
-      const proposalTitle = 'Test new asset proposal';
-      const newAssetProposalBody = getNewAssetTxBody();
-      cy.VegaWalletSubmitProposal(newAssetProposalBody);
-
-      cy.visit('/');
-      cy.navigate_to('governanceProposals');
-      cy.contains(proposalTitle)
-        .parent()
-        .parent()
-        .parent()
-        .within(() => {
-          cy.get_element_by_col_id('title').should('have.text', proposalTitle);
-          cy.get_element_by_col_id('type').should('have.text', 'NewAsset');
-          cy.get_element_by_col_id('state').should(
-            'have.text',
-            'Waiting for Node Vote'
-          );
-          cy.getByTestId('vote-progress').should('be.visible');
-          cy.getByTestId('vote-progress-bar-against')
-            .invoke('attr', 'style')
-            .should('eq', 'width: 100%;');
-          cy.get('[col-id="cDate"]')
-            .invoke('text')
-            .should('match', dateTimeRegex);
-          cy.get('[col-id="eDate"]')
-            .invoke('text')
-            .should('match', dateTimeRegex);
-          cy.getByTestId('external-link')
-            .should('have.attr', 'href')
-            .and('contains', 'https://governance.fairground.wtf/proposals/');
-          cy.contains('View terms').should('exist').click();
-        });
-    });
   });
 });

apps/explorer-e2e/src/support/governance.functions.js

@@ -1,18 +1,8 @@
-import { addSeconds, millisecondsToSeconds } from 'date-fns';
-
 export function createSuccessorMarketProposal(parentMarketId) {
   cy.VegaWalletSubmitProposal(getSuccessorTxBody(parentMarketId));
 }
 
 function getSuccessorTxBody(parentMarketId) {
-  const MIN_CLOSE_SEC = 500;
-  const MIN_ENACT_SEC = 700;
-
-  const closingDate = addSeconds(new Date(), MIN_CLOSE_SEC);
-  const enactmentDate = addSeconds(closingDate, MIN_ENACT_SEC);
-  const closingTimestamp = millisecondsToSeconds(closingDate.getTime());
-  const enactmentTimestamp = millisecondsToSeconds(enactmentDate.getTime());
-
   return {
     proposalSubmission: {
       rationale: {
@@ -132,49 +122,8 @@ function getSuccessorTxBody(parentMarketId) {
             },
           },
         },
-        closingTimestamp,
-        enactmentTimestamp,
-      },
-    },
-  };
-}
-
-export function getNewAssetTxBody() {
-  const MIN_CLOSE_SEC = 500;
-  const MIN_ENACT_SEC = 700;
-  const MIN_VALID_SEC = 60;
-
-  const closingDate = addSeconds(new Date(), MIN_CLOSE_SEC);
-  const enactmentDate = addSeconds(closingDate, MIN_ENACT_SEC);
-  const validationDate = addSeconds(new Date(), MIN_VALID_SEC);
-
-  const closingTimestamp = millisecondsToSeconds(closingDate.getTime());
-  const enactmentTimestamp = millisecondsToSeconds(enactmentDate.getTime());
-  const validationTimestamp = millisecondsToSeconds(validationDate.getTime());
-
-  return {
-    proposalSubmission: {
-      rationale: {
-        title: 'Test new asset proposal',
-        description: 'E2E test for proposals',
-      },
-      terms: {
-        newAsset: {
-          changes: {
-            name: 'USDT Coin',
-            symbol: 'USDT',
-            decimals: '18',
-            quantum: '1',
-            erc20: {
-              contractAddress: '0xb404c51bbc10dcbe948077f18a4b8e553d160084',
-              withdrawThreshold: '10',
-              lifetimeLimit: '10',
-            },
-          },
-        },
-        closingTimestamp,
-        enactmentTimestamp,
-        validationTimestamp,
+        closingTimestamp: 1695666618,
+        enactmentTimestamp: 1695666618,
       },
     },
   };

apps/explorer/project.json

@@ -77,7 +77,7 @@
       "executor": "nx:run-commands",
       "options": {
         "commands": [
-          "npx openapi-typescript https://raw.githubusercontent.com/vegaprotocol/documentation/main/specs/v0.72.3/blockexplorer.openapi.json --output apps/explorer/src/types/explorer.d.ts --immutable-types"
+          "npx openapi-typescript https://raw.githubusercontent.com/vegaprotocol/documentation/spec-update-v0.72.0-preview.2/specs/v0.72.0-preview.2/blockexplorer.openapi.json --output apps/explorer/src/types/explorer.d.ts --immutable-types"
         ]
       }
     },

apps/explorer/src/app/components/order-details/StopOrder.graphql

@@ -1,25 +0,0 @@
-fragment ExplorerStopOrderFields on StopOrder {
-  id
-  status
-  createdAt
-  trigger {
-    ... on StopOrderPrice {
-      price
-    }
-    ... on StopOrderTrailingPercentOffset {
-      trailingPercentOffset
-    }
-  }
-  createdAt
-  ocoLinkId
-  triggerDirection
-  order {
-    id
-  }
-}
-
-query ExplorerStopOrder($stopOrderId: ID!) {
-  stopOrder(id: $stopOrderId) {
-    ...ExplorerStopOrderFields
-  }
-}

apps/explorer/src/app/components/order-details/__generated__/StopOrder.ts

@@ -1,70 +0,0 @@
-import * as Types from '@vegaprotocol/types';
-
-import { gql } from '@apollo/client';
-import * as Apollo from '@apollo/client';
-const defaultOptions = {} as const;
-export type ExplorerStopOrderFieldsFragment = { __typename?: 'StopOrder', id: string, status: Types.StopOrderStatus, createdAt: any, ocoLinkId?: string | null, triggerDirection: Types.StopOrderTriggerDirection, trigger: { __typename?: 'StopOrderPrice', price: string } | { __typename?: 'StopOrderTrailingPercentOffset', trailingPercentOffset: string }, order?: { __typename?: 'Order', id: string } | null };
-
-export type ExplorerStopOrderQueryVariables = Types.Exact<{
-  stopOrderId: Types.Scalars['ID'];
-}>;
-
-
-export type ExplorerStopOrderQuery = { __typename?: 'Query', stopOrder?: { __typename?: 'StopOrder', id: string, status: Types.StopOrderStatus, createdAt: any, ocoLinkId?: string | null, triggerDirection: Types.StopOrderTriggerDirection, trigger: { __typename?: 'StopOrderPrice', price: string } | { __typename?: 'StopOrderTrailingPercentOffset', trailingPercentOffset: string }, order?: { __typename?: 'Order', id: string } | null } | null };
-
-export const ExplorerStopOrderFieldsFragmentDoc = gql`
-    fragment ExplorerStopOrderFields on StopOrder {
-  id
-  status
-  createdAt
-  trigger {
-    ... on StopOrderPrice {
-      price
-    }
-    ... on StopOrderTrailingPercentOffset {
-      trailingPercentOffset
-    }
-  }
-  createdAt
-  ocoLinkId
-  triggerDirection
-  order {
-    id
-  }
-}
-    `;
-export const ExplorerStopOrderDocument = gql`
-    query ExplorerStopOrder($stopOrderId: ID!) {
-  stopOrder(id: $stopOrderId) {
-    ...ExplorerStopOrderFields
-  }
-}
-    ${ExplorerStopOrderFieldsFragmentDoc}`;
-
-/**
- * __useExplorerStopOrderQuery__
- *
- * To run a query within a React component, call `useExplorerStopOrderQuery` and pass it any options that fit your needs.
- * When your component renders, `useExplorerStopOrderQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = useExplorerStopOrderQuery({
- *   variables: {
- *      stopOrderId: // value for 'stopOrderId'
- *   },
- * });
- */
-export function useExplorerStopOrderQuery(baseOptions: Apollo.QueryHookOptions<ExplorerStopOrderQuery, ExplorerStopOrderQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<ExplorerStopOrderQuery, ExplorerStopOrderQueryVariables>(ExplorerStopOrderDocument, options);
-      }
-export function useExplorerStopOrderLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerStopOrderQuery, ExplorerStopOrderQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<ExplorerStopOrderQuery, ExplorerStopOrderQueryVariables>(ExplorerStopOrderDocument, options);
-        }
-export type ExplorerStopOrderQueryHookResult = ReturnType<typeof useExplorerStopOrderQuery>;
-export type ExplorerStopOrderLazyQueryHookResult = ReturnType<typeof useExplorerStopOrderLazyQuery>;
-export type ExplorerStopOrderQueryResult = Apollo.QueryResult<ExplorerStopOrderQuery, ExplorerStopOrderQueryVariables>;

apps/explorer/src/app/components/order-summary/order-tx-summary.spec.tsx

@@ -33,7 +33,7 @@ describe('Order TX Summary component', () => {
     expect(res.queryByTestId('order-summary')).not.toBeInTheDocument();
   });
 
-  it('Renders "Market Price" if the order passed lacks a price', () => {
+  it('Renders nothing if the order passed lacks a price', () => {
     const o: Order = {
       marketId: '123',
       side: 'SIDE_BUY',
@@ -41,7 +41,7 @@ describe('Order TX Summary component', () => {
       size: '10',
     };
     const res = renderComponent(o);
-    expect(res.queryByText('Market Price')).toBeInTheDocument();
+    expect(res.queryByTestId('order-summary')).not.toBeInTheDocument();
   });
 
   it('Renders nothing if the order has an unspecified side', () => {

apps/explorer/src/app/components/order-summary/order-tx-summary.tsx

@@ -3,7 +3,6 @@ import type { components } from '../../../types/explorer';
 import PriceInMarket from '../price-in-market/price-in-market';
 import { sideText } from '../order-details/lib/order-labels';
 import SizeInMarket from '../size-in-market/size-in-market';
-import { t } from '@vegaprotocol/i18n';
 
 export type OrderSummaryProps = {
   order: components['schemas']['v1OrderSubmission'];
@@ -21,6 +20,7 @@ const OrderTxSummary = ({ order }: OrderSummaryProps) => {
   if (
     !order ||
     !order.marketId ||
+    !order.price ||
     !order.side ||
     order.side === 'SIDE_UNSPECIFIED'
   ) {
@@ -36,14 +36,10 @@ const OrderTxSummary = ({ order }: OrderSummaryProps) => {
         '-'
       )}
       &nbsp;<i className="text-xs">@</i>&nbsp;
-      {order.price ? (
-        <PriceInMarket
-          marketId={order.marketId}
-          price={order.price}
-        ></PriceInMarket>
-      ) : (
-        t('Market Price')
-      )}
+      <PriceInMarket
+        marketId={order.marketId}
+        price={order.price}
+      ></PriceInMarket>
     </div>
   );
 };

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

@@ -1,139 +0,0 @@
-import { t } from '@vegaprotocol/i18n';
-import type { components } from '../../../../../types/explorer';
-import { formatNumberPercentage } from '@vegaprotocol/utils';
-import BigNumber from 'bignumber.js';
-import PriceInMarket from '../../../price-in-market/price-in-market';
-import StopOrderTriggerSummary from './stop-order-trigger';
-import { Tooltip } from '@vegaprotocol/ui-toolkit';
-import fromUnixTime from 'date-fns/fromUnixTime';
-
-const wrapperClasses =
-  'flex-1 max-w-xs items-center border border-vega-light-200 dark:border-vega-dark-150 rounded-md pv-2 ph-5 mb-5';
-
-export type StopOrderType = 'RisesAbove' | 'FallsBelow' | 'OCO';
-type V1OrderSetup = components['schemas']['v1StopOrderSetup'];
-
-interface StopOrderSetupProps extends V1OrderSetup {
-  type: StopOrderType;
-  deterministicId: string;
-}
-
-export function getExpiryTypeLabel(
-  expiryStrategy: V1OrderSetup['expiryStrategy']
-): string {
-  switch (expiryStrategy) {
-    case 'EXPIRY_STRATEGY_CANCELS':
-      return t('Cancels');
-    case 'EXPIRY_STRATEGY_SUBMIT':
-      return t('Submit');
-  }
-
-  return expiryStrategy || t('Unknown');
-}
-
-export interface ExpiryTriggerProps {
-  trailingPercentOffset?: string;
-  price?: string;
-  marketId?: string;
-}
-
-export function ExpiryTrigger({
-  trailingPercentOffset,
-  price,
-  marketId,
-}: ExpiryTriggerProps) {
-  if (price && marketId) {
-    return <PriceInMarket price={price} marketId={marketId} />;
-  }
-  if (trailingPercentOffset) {
-    return (
-      <span>
-        {formatNumberPercentage(new BigNumber(trailingPercentOffset))}{' '}
-        (trailing)
-      </span>
-    );
-  }
-
-  return null;
-}
-
-export function getMovePrefix(
-  type: StopOrderType,
-  trailingPercentOffset?: string
-): string {
-  if (type === 'RisesAbove') {
-    if (trailingPercentOffset) {
-      return '+';
-    } else {
-      return '>';
-    }
-  } else {
-    if (trailingPercentOffset) {
-      return '-';
-    } else {
-      return '<';
-    }
-  }
-}
-
-export const TypeLabel = {
-  RisesAbove: t('Rises above ↗'),
-  FallsBelow: t('Falls below ↘'),
-  OCO: '',
-};
-
-/**
- */
-export const StopOrderSetup = ({
-  type,
-  price,
-  orderSubmission,
-  expiresAt,
-  expiryStrategy,
-  trailingPercentOffset,
-  deterministicId,
-}: StopOrderSetupProps) => {
-  let d = 'Unknown';
-  try {
-    d = expiresAt
-      ? fromUnixTime(parseInt(expiresAt) / 1000000000).toLocaleString()
-      : t('Unknown');
-  } catch (e) {
-    d = t('Unknown');
-  }
-
-  return (
-    <div className={wrapperClasses}>
-      <div className="mb-12 lg:mb-0">
-        <div className="bg-slate-100 text-slate-900 px-6 py-2 md:px-6 flex">
-          <div className="flex-1">
-            <strong className="font-bold mb-1">{TypeLabel[type]} </strong>
-            <p className=" font-xs mb-0">
-              {getMovePrefix(type, trailingPercentOffset)}
-              <ExpiryTrigger
-                trailingPercentOffset={trailingPercentOffset}
-                price={price}
-                marketId={orderSubmission?.marketId}
-              />
-            </p>
-          </div>
-
-          {expiresAt && expiryStrategy ? (
-            <div className="flex-1">
-              <strong className="font-bold mb-1">{t('Expiry Type')}</strong>
-              <p className=" font-xs mb-0">
-                <Tooltip description={<span>{d}</span>}>
-                  <span>{getExpiryTypeLabel(expiryStrategy)}</span>
-                </Tooltip>
-              </p>
-            </div>
-          ) : null}
-        </div>
-        <StopOrderTriggerSummary
-          id={deterministicId}
-          orderSubmission={orderSubmission}
-        />
-      </div>
-    </div>
-  );
-};

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

@@ -1,108 +0,0 @@
-import { StopOrderStatus } from '@vegaprotocol/types';
-import { useExplorerStopOrderQuery } from '../../../order-details/__generated__/StopOrder';
-import type { ExplorerStopOrderQuery } from '../../../order-details/__generated__/StopOrder';
-import { t } from '@vegaprotocol/i18n';
-import { Icon } from '@vegaprotocol/ui-toolkit';
-import type { IconName } from '@vegaprotocol/ui-toolkit';
-import OrderTxSummary from '../../../order-summary/order-tx-summary';
-import type { components } from '../../../../../types/explorer';
-import type { ApolloError } from '@apollo/client';
-
-export const StatusLabel: Record<StopOrderStatus, string> = {
-  [StopOrderStatus.STATUS_CANCELLED]: t('Cancelled'),
-  [StopOrderStatus.STATUS_EXPIRED]: t('Expired'),
-  [StopOrderStatus.STATUS_PENDING]: t('Pending'),
-  [StopOrderStatus.STATUS_REJECTED]: t('Rejected'),
-  [StopOrderStatus.STATUS_STOPPED]: t('Stopped'),
-  [StopOrderStatus.STATUS_TRIGGERED]: t('Triggered'),
-  [StopOrderStatus.STATUS_UNSPECIFIED]: t('Status unknown'),
-};
-
-export const StatusIcon: Record<StopOrderStatus, IconName> = {
-  [StopOrderStatus.STATUS_CANCELLED]: 'disable',
-  [StopOrderStatus.STATUS_EXPIRED]: 'outdated',
-  [StopOrderStatus.STATUS_PENDING]: 'circle',
-  [StopOrderStatus.STATUS_REJECTED]: 'cross',
-  [StopOrderStatus.STATUS_STOPPED]: 'stop',
-  [StopOrderStatus.STATUS_TRIGGERED]: 'tick',
-  [StopOrderStatus.STATUS_UNSPECIFIED]: 'help',
-};
-
-export const StatusMidColor: Record<StopOrderStatus, string> = {
-  [StopOrderStatus.STATUS_CANCELLED]: 'bg-red-100 text-red-900',
-  [StopOrderStatus.STATUS_EXPIRED]: 'bg-red-100 text-red-900',
-  [StopOrderStatus.STATUS_PENDING]: 'bg-yellow-100 text-yellow-900',
-  [StopOrderStatus.STATUS_REJECTED]: 'bg-red-100 text-red-900',
-  [StopOrderStatus.STATUS_STOPPED]: 'bg-red-100 text-red-900',
-  [StopOrderStatus.STATUS_TRIGGERED]: 'bg-green-100 text-green-900',
-  [StopOrderStatus.STATUS_UNSPECIFIED]: 'bg-yellow-100 text-yellow-900',
-};
-
-export const StatusBottomColor: Record<StopOrderStatus, string> = {
-  [StopOrderStatus.STATUS_CANCELLED]: 'bg-red-50 text-red-900 line-through',
-  [StopOrderStatus.STATUS_EXPIRED]: 'bg-red-50 text-red-900 line-through',
-  [StopOrderStatus.STATUS_PENDING]: 'bg-yellow-50 text-yellow-900',
-  [StopOrderStatus.STATUS_REJECTED]: 'bg-red-50 text-red-900 line-through',
-  [StopOrderStatus.STATUS_STOPPED]: 'bg-red-50 text-red-900 line-through',
-  [StopOrderStatus.STATUS_TRIGGERED]: 'bg-green-50 text-green-900',
-  [StopOrderStatus.STATUS_UNSPECIFIED]:
-    'bg-yellow-50 text-yellow-900 line-through',
-};
-
-export function getStopOrderTriggerStatus(
-  data?: ExplorerStopOrderQuery,
-  error?: ApolloError
-) {
-  if (data && data.stopOrder) {
-    return data.stopOrder.status;
-  }
-
-  return StopOrderStatus.STATUS_UNSPECIFIED;
-}
-
-export interface StopOrderTriggerSummaryProps {
-  id: string;
-  orderSubmission?: components['schemas']['v1OrderSubmission'];
-}
-
-/**
- */
-const StopOrderTriggerSummary = ({
-  id,
-  orderSubmission,
-}: StopOrderTriggerSummaryProps) => {
-  const { data, error } = useExplorerStopOrderQuery({
-    variables: { stopOrderId: id },
-  });
-
-  const status = getStopOrderTriggerStatus(data, error);
-
-  return (
-    <>
-      <div
-        className={`${StatusMidColor[status]} px-3 py-2 md:px-6 flex space-x-4`}
-      >
-        <p className="m-0 p-0 align-top">
-          <Icon
-            size={6}
-            name={StatusIcon[status]}
-            className="inline-block mr-2"
-          />
-          <span className="align-top">{StatusLabel[status]}</span>
-        </p>
-      </div>
-
-      <div
-        className={`${StatusBottomColor[status]} px-3 py-2 md:px-6 flex space-x-4`}
-      >
-        {orderSubmission && (
-          <p className="text-vega-grey-400 strike">
-            <OrderTxSummary order={orderSubmission} />
-          </p>
-        )}
-      </div>
-    </>
-  );
-};
-
-export default StopOrderTriggerSummary;

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

@@ -1,12 +1,10 @@
 import { t } from '@vegaprotocol/i18n';
 import type { components } from '../../../../../types/explorer';
 import { Tooltip } from '@vegaprotocol/ui-toolkit';
-import SizeInMarket from '../../../size-in-market/size-in-market';
 
 export interface TxDetailsOrderIcebergDetailsProps {
   iceberg: components['schemas']['v1IcebergOpts'];
   size: components['schemas']['v1OrderSubmission']['size'];
-  marketId?: string;
 }
 
 /**
@@ -30,7 +28,6 @@ export interface TxDetailsOrderIcebergDetailsProps {
 export const TxOrderIcebergDetails = ({
   iceberg,
   size,
-  marketId,
 }: TxDetailsOrderIcebergDetailsProps) => {
   return (
     <div
@@ -39,28 +36,15 @@ export const TxOrderIcebergDetails = ({
     >
       <Tooltip description={t('Iceberg: Minimum visible size')}>
         <span className="align-bottom text-vega-orange-650">
-          {marketId ? (
-            <SizeInMarket
-              size={iceberg.minimumVisibleSize}
-              marketId={marketId}
-            />
-          ) : (
-            iceberg.minimumVisibleSize
-          )}
+          {iceberg.minimumVisibleSize || '-'}
         </span>
       </Tooltip>
       <Tooltip description={t('Iceberg: Total size')}>
-        <span className="text-sm text-vega-blue-600 mx-3">
-          {marketId ? <SizeInMarket size={size} marketId={marketId} /> : size}
-        </span>
+        <span className="text-sm text-vega-blue-600 mx-3">{size}</span>
       </Tooltip>
       <Tooltip description={t('Iceberg: Visible peak')}>
         <span className="align-top text-vega-yellow-600">
-          {marketId ? (
-            <SizeInMarket size={iceberg.peakSize} marketId={marketId} />
-          ) : (
-            iceberg.peakSize
-          )}
+          {iceberg.peakSize || '-'}
         </span>
       </Tooltip>
     </div>

apps/explorer/src/app/components/txs/details/shared/tx-details-shared.tsx

@@ -26,11 +26,6 @@ export const sharedHeaderProps = {
   className: 'align-top',
 };
 
-const Labels: Record<BlockExplorerTransactionResult['type'], string> = {
-  'Stop Orders Submission': 'Stop Order',
-  'Stop Orders Cancellation': 'Cancel Stop Order',
-};
-
 /**
  * These rows are shown for every transaction type, providing a consistent set of rows for the top
  * of a transaction details row. The order is relatively arbitrary but felt right - it might need to
@@ -49,14 +44,12 @@ export const TxDetailsShared = ({
   const time: string = blockData?.result.block.header.time || '';
   const height: string = blockData?.result.block.header.height || txData.block;
 
-  const type = Labels[txData.type] || txData.type;
-
   return (
     <>
       {hideTypeRow === false ? (
         <TableRow modifier="bordered">
           <TableCell {...sharedHeaderProps}>{t('Type')}</TableCell>
-          <TableCell>{type}</TableCell>
+          <TableCell>{txData.type}</TableCell>
         </TableRow>
       ) : null}
       <TableRow modifier="bordered">

apps/explorer/src/app/components/txs/details/transfer/blocks/transfer-participants.tsx

@@ -31,8 +31,6 @@ const AccountType: Record<AccountTypes, string> = {
   ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES: 'LP Received Fees',
   ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS: 'Market Proposers',
   ACCOUNT_TYPE_HOLDING: 'Holding',
-  ACCOUNT_TYPE_LIQUIDITY_FEES_BONUS_DISTRIBUTION: 'Bonus Distribution',
-  ACCOUNT_TYPE_LP_LIQUIDITY_FEES: 'LP Liquidity Fees',
 };
 
 interface TransferParticipantsProps {

apps/explorer/src/app/components/txs/details/tx-details-wrapper.tsx

@@ -27,7 +27,6 @@ import { TxDetailsNodeAnnounce } from './tx-node-announce';
 import { TxDetailsStateVariable } from './tx-state-variable-proposal';
 import { TxProposal } from './tx-proposal';
 import { TxDetailsTransfer } from './tx-transfer';
-import { TxDetailsStopOrderSubmission } from './tx-stop-order-submission';
 
 interface TxDetailsWrapperProps {
   txData: BlockExplorerTransactionResult | undefined;
@@ -117,8 +116,6 @@ function getTransactionComponent(txData?: BlockExplorerTransactionResult) {
       return TxDetailsUndelegate;
     case 'State Variable Proposal':
       return TxDetailsStateVariable;
-    case 'Stop Orders Submission':
-      return TxDetailsStopOrderSubmission;
     case 'Transfer Funds':
       return TxDetailsTransfer;
     default:

apps/explorer/src/app/components/txs/details/tx-issue-signatures.tsx

@@ -41,7 +41,7 @@ export const TxDetailsIssueSignatures = ({
     return <>{t('Awaiting Block Explorer transaction details')}</>;
   }
 
-  const cmd: Command = txData.command.issueSignatures;
+  const cmd: Command = txData.command;
   const k = cmd.kind ? kind[cmd.kind] : null;
 
   return (

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

@@ -81,11 +81,7 @@ export const TxDetailsOrder = ({
           <TableRow modifier="bordered">
             <TableCell>{t('Iceberg details')}</TableCell>
             <TableCell>
-              <TxOrderIcebergDetails
-                iceberg={iceberg}
-                size={size}
-                marketId={marketId}
-              />
+              <TxOrderIcebergDetails iceberg={iceberg} size={size} />
             </TableCell>
           </TableRow>
         ) : null}

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

@@ -1,148 +0,0 @@
-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 {
-  getStopOrderIds,
-  stopOrdersSignatureToDeterministicId,
-} from '../lib/deterministic-ids';
-import type { components } from '../../../../types/explorer';
-import { StopOrderSetup } from './order/stop-order-setup';
-
-type StopOrderSetup = components['schemas']['v1StopOrderSetup'];
-
-interface TxDetailsOrderProps {
-  txData: BlockExplorerTransactionResult | undefined;
-  pubKey: string | undefined;
-  blockData: TendermintBlocksResponse | undefined;
-}
-
-export function getStopTypeLabel(
-  risesAbove: StopOrderSetup | undefined,
-  fallsBelow: StopOrderSetup | undefined
-): string {
-  if (risesAbove && fallsBelow) {
-    return t('OCO (One Cancels Other)');
-  } else if (fallsBelow) {
-    return t('Falls Below ↘');
-  } else if (risesAbove) {
-    return t('Rises Above ↗');
-  } else {
-    return t('Stop Order');
-  }
-}
-
-export interface StopMarketIdProps {
-  risesAbove: StopOrderSetup | undefined;
-  fallsBelow: StopOrderSetup | undefined;
-  showMarketName?: boolean;
-}
-
-export function StopMarketId({
-  risesAbove,
-  fallsBelow,
-  showMarketName = false,
-}: StopMarketIdProps) {
-  const raMarketId = risesAbove?.orderSubmission?.marketId;
-  const fbMarketId = fallsBelow?.orderSubmission?.marketId;
-
-  if (raMarketId && fbMarketId) {
-    if (raMarketId === fbMarketId) {
-      return <MarketLink id={raMarketId} showMarketName={showMarketName} />;
-    } else {
-      return (
-        <>
-          <MarketLink id={raMarketId} showMarketName={showMarketName} />,
-          <MarketLink id={fbMarketId} showMarketName={showMarketName} />
-        </>
-      );
-    }
-  } else if (raMarketId) {
-    return <MarketLink id={raMarketId} showMarketName={showMarketName} />;
-  } else if (fbMarketId) {
-    return <MarketLink id={fbMarketId} showMarketName={showMarketName} />;
-  } else {
-    return '-';
-  }
-}
-
-/**
- */
-export const TxDetailsStopOrderSubmission = ({
-  txData,
-  pubKey,
-  blockData,
-}: TxDetailsOrderProps) => {
-  if (!txData || !txData.command.stopOrdersSubmission) {
-    return <>{t('Awaiting Block Explorer transaction details')}</>;
-  }
-
-  const tx: components['schemas']['v1StopOrdersSubmission'] =
-    txData.command.stopOrdersSubmission;
-
-  const orderIds = stopOrdersSignatureToDeterministicId(
-    txData?.signature?.value
-  );
-
-  const { risesAboveId, fallsBelowId } = getStopOrderIds(
-    orderIds,
-    tx.risesAbove,
-    tx.fallsBelow
-  );
-
-  return (
-    <>
-      <TableWithTbody className="mb-8" allowWrap={true}>
-        <TxDetailsShared
-          txData={txData}
-          pubKey={pubKey}
-          blockData={blockData}
-        />
-        <TableRow modifier="bordered">
-          <TableCell>{t('Market ID')}</TableCell>
-          <TableCell>
-            <StopMarketId
-              risesAbove={tx.risesAbove}
-              fallsBelow={tx.fallsBelow}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow modifier="bordered">
-          <TableCell>{t('Market')}</TableCell>
-          <TableCell>
-            <StopMarketId
-              risesAbove={tx.risesAbove}
-              fallsBelow={tx.fallsBelow}
-              showMarketName={true}
-            />
-          </TableCell>
-        </TableRow>
-        <TableRow modifier="bordered">
-          <TableCell>{t('Trigger')}</TableCell>
-          <TableCell>
-            {getStopTypeLabel(tx.risesAbove, tx.fallsBelow)}
-          </TableCell>
-        </TableRow>
-      </TableWithTbody>
-      <div className="flex gap-2">
-        {tx.fallsBelow && fallsBelowId && (
-          <StopOrderSetup
-            type={'FallsBelow'}
-            {...tx.fallsBelow}
-            deterministicId={fallsBelowId}
-          />
-        )}
-
-        {tx.risesAbove && risesAboveId && (
-          <StopOrderSetup
-            type={'RisesAbove'}
-            {...tx.risesAbove}
-            deterministicId={risesAboveId}
-          />
-        )}
-      </div>
-    </>
-  );
-};

apps/explorer/src/app/components/txs/lib/deterministic-ids.spec.ts

@@ -1,8 +1,4 @@
-import {
-  hexToString,
-  txSignatureToDeterministicId,
-  stopOrdersSignatureToDeterministicId,
-} from './deterministic-ids';
+import { hexToString, txSignatureToDeterministicId } from './deterministic-ids';
 
 it('txSignatureToDeterministicId Turns a known signature in to a known deterministic ID', () => {
   const signature =
@@ -24,24 +20,3 @@ it('hexToString encodes a known good value as bytes', () => {
   const res = hexToString(hex);
   expect(res).toEqual([14, 221]);
 });
-
-describe('stopOrdersSignatureToDeterministicId', () => {
-  it('should return empty object if no signature is provided', () => {
-    const result = stopOrdersSignatureToDeterministicId();
-    expect(result.length).toEqual(0);
-  });
-
-  it('should return valid deterministic ids if a signature is provided', () => {
-    const signature = 'deadb33f';
-    const result = stopOrdersSignatureToDeterministicId(signature);
-
-    expect(result.length).toEqual(2);
-
-    expect(result[0]).toBe(
-      '4c45b67a8c08cbf1982883a75beaf309bf172461d04bd427623d6cd3d9ab0e91'
-    );
-    expect(result[1]).toBe(
-      'afe7509ff90d8f26339a0ab81e4d3e1fb6c4d44e94419aa5e13ae7659d894da1'
-    );
-  });
-});

apps/explorer/src/app/components/txs/lib/deterministic-ids.ts

@@ -1,6 +1,4 @@
-import type { components } from '../../../../types/explorer';
 import { sha3_256 } from 'js-sha3';
-type StopOrderSetup = components['schemas']['v1StopOrderSetup'];
 
 /**
  * Encodes a string as bytes
@@ -39,58 +37,3 @@ export function txSignatureToDeterministicId(signature: string): string {
 
   return hash.hex();
 }
-
-/**
- * Given a stop order signature string, returns the deterministic IDs of both potential
- * Stop Orders. A stop order is not an order per se, but a trigger for an order. The order
- * created by the stop order will have another ID based on the market event that hit the
- * trigger, and as such is not deterministic.
- *
- * @param signature
- * @returns string[]
- */
-export function stopOrdersSignatureToDeterministicId(
-  signature?: string
-): string[] {
-  if (!signature) {
-    return [];
-  }
-
-  const firstId = txSignatureToDeterministicId(signature);
-  return [firstId, txSignatureToDeterministicId(firstId)];
-}
-
-export type stopSignatures = {
-  risesAboveId: string | undefined;
-  fallsBelowId: string | undefined;
-};
-
-/**
- * In 0.72.10 the way stop order IDs are determined is a little tricky. It will be stabilised
- * in a future release.
- * @param deterministicIds Output of stopORdersSignatureToDeterministicId
- * @param risesAbove Stop order setup
- * @param fallsBelow Stop order setup
- * @returns Object containing the deterministic IDs of the stop orders
- */
-export function getStopOrderIds(
-  deterministicIds: string[],
-  risesAbove: StopOrderSetup | undefined,
-  fallsBelow: StopOrderSetup | undefined
-) {
-  if (risesAbove && fallsBelow) {
-    return {
-      risesAboveId: deterministicIds[0],
-      fallsBelowId: deterministicIds[1],
-    };
-  } else if (!fallsBelow && risesAbove) {
-    return {
-      risesAboveId: deterministicIds[0],
-    };
-  } else {
-    return {
-      fallsBelowId: deterministicIds[0] || undefined,
-      risesAboveId: deterministicIds[1] || undefined,
-    };
-  }
-}

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

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

apps/explorer/src/app/components/txs/tx-order-type.tsx

@@ -50,25 +50,6 @@ const displayString: StringMap = {
   'Stop Orders Cancellation': 'Cancel stop',
 };
 
-export function getLabelForStopOrderType(
-  orderType: string,
-  command: components['schemas']['v1InputData']
-): string {
-  if (command.stopOrdersSubmission) {
-    if (
-      command.stopOrdersSubmission.risesAbove &&
-      command.stopOrdersSubmission.fallsBelow
-    ) {
-      return 'Stop ⇅';
-    } else if (command.stopOrdersSubmission.risesAbove) {
-      return 'Stop ↗';
-    } else if (command.stopOrdersSubmission.fallsBelow) {
-      return 'Stop ↘';
-    }
-  }
-  return 'Stop';
-}
-
 export function getLabelForOrderType(
   orderType: string,
   command: components['schemas']['v1InputData']
@@ -204,9 +185,6 @@ export const TxOrderType = ({ orderType, command }: TxOrderTypeProps) => {
   } else if (type === 'Order' && command) {
     type = getLabelForOrderType(orderType, command);
     colours = 'text-white dark-text-white bg-vega-blue dark:bg-vega-blue';
-  } else if (type === 'Stop' && command) {
-    type = getLabelForStopOrderType(orderType, command);
-    colours = 'text-white dark-text-white bg-vega-blue dark:bg-vega-blue';
   }
 
   if (type === 'Vote on Proposal') {

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

@@ -55,7 +55,7 @@ export const TxsInfiniteList = ({
   }
 
   return (
-    <div>
+    <div className="overflow-scroll">
       <table className={className} data-testid="transactions-list">
         <thead>
           <tr className="w-full mb-3 text-vega-dark-300 uppercase text-left">

apps/explorer/src/types/explorer.d.ts

@@ -920,8 +920,6 @@ export interface components {
      *  - ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES: Per asset reward account for fees received by liquidity providers
      *  - ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS: Per asset reward account for market proposers when the market goes above some trading threshold
      *  - ACCOUNT_TYPE_HOLDING: Per asset account for holding in-flight unfilled orders' funds
-     *  - ACCOUNT_TYPE_LP_LIQUIDITY_FEES: Network controlled liquidity provider's account, per market, to hold accrued liquidity fees.
-     *  - ACCOUNT_TYPE_LIQUIDITY_FEES_BONUS_DISTRIBUTION: Network controlled liquidity fees bonus distribution account, per market.
      * @default ACCOUNT_TYPE_UNSPECIFIED
      * @enum {string}
      */
@@ -943,9 +941,7 @@ export interface components {
       | 'ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES'
       | 'ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES'
       | 'ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS'
-      | 'ACCOUNT_TYPE_HOLDING'
-      | 'ACCOUNT_TYPE_LP_LIQUIDITY_FEES'
-      | 'ACCOUNT_TYPE_LIQUIDITY_FEES_BONUS_DISTRIBUTION';
+      | 'ACCOUNT_TYPE_HOLDING';
     /** Vega representation of an external asset */
     readonly vegaAssetDetails: {
       /** @description Vega built-in asset. */

apps/governance-e2e/.env

@@ -20,10 +20,6 @@ NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72
 NX_VEGA_REST_URL=http://localhost:3008/api/v2/
 NX_SUCCESSOR_MARKETS=true
 
-NX_VEGA_EXPLORER_URL=https://explorer.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
-
 #Test configuration variables
 CYPRESS_FAIRGROUND=false
 CYPRESS_VEGA_URL=http://localhost:3008/graphql

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

@@ -11,9 +11,6 @@ import {
   getDateFormatForSpecifiedDays,
   getProposalFromTitle,
   getProposalInformationFromTable,
-  goToMakeNewProposal,
-  governanceProposalType,
-  longProposalDescription,
   proposalChangeType,
   submitUniqueRawProposal,
   validateProposalDetailsDiff,
@@ -46,6 +43,7 @@ const proposalDetailsTitle = 'proposal-title';
 const proposalDetailsDescription = 'proposal-description';
 const openProposals = 'open-proposals';
 const viewProposalButton = 'view-proposal-btn';
+const proposalDescriptionToggle = 'proposal-description-toggle';
 const voteBreakdownToggle = 'vote-breakdown-toggle';
 const proposalTermsToggle = 'proposal-json-toggle';
 const marketDataToggle = 'proposal-market-data-toggle';
@@ -73,13 +71,10 @@ describe(
 
     // 3001-VOTE-050 3001-VOTE-054 3001-VOTE-055 3002-PROP-019
     it('Newly created raw proposal details - shows proposal title and full description', function () {
-      const proposalDetails = longProposalDescription;
+      const proposalDescription =
+        'I propose that everyone evaluate the following IPFS document and vote Yes if they agree. bafybeigwwctpv37xdcwacqxvekr6e4kaemqsrv34em6glkbiceo3fcy4si';
 
-      goToMakeNewProposal(governanceProposalType.RAW);
-      submitUniqueRawProposal({
-        proposalTitle: 'raw proposal with long description',
-        proposalDescription: proposalDetails,
-      });
+      createRawProposal();
       cy.get<testFreeformProposal>('@rawProposal').then((rawProposal) => {
         cy.getByTestId(openProposals).within(() => {
           getProposalFromTitle(rawProposal.rationale.title).within(() => {
@@ -90,17 +85,12 @@ describe(
           'contain.text',
           rawProposal.rationale.title
         );
+        cy.getByTestId(proposalDescriptionToggle).click();
+        cy.getByTestId('proposal-description-toggle');
+        cy.getByTestId(proposalDetailsDescription)
+          .find('p')
+          .should('have.text', proposalDescription);
       });
-      cy.getByTestId(proposalDetailsDescription).within(() => {
-        cy.get('p').should('not.have.text', 'Hyperlink text');
-        cy.getByTestId('show-more-btn').click();
-        cy.get('p')
-          .invoke('text')
-          .should('have.have.length', 2194) // Full description is displayed
-          .and('contain', 'Hyperlink text');
-        cy.get('a').should('have.attr', 'href');
-      });
-
       // 3001-VOTE-008
       getProposalInformationFromTable('ID')
         .invoke('text')
@@ -371,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();
@@ -407,8 +425,7 @@ describe(
       // 3003-PMAN-011 3003-PMAN-012
       cy.getByTestId(marketDataToggle).click();
       cy.getByTestId('proposal-market-data').within(() => {
-        // Assert that all toggles are removed
-        cy.getByTestId('accordion-toggle').should('not.exist');
+        cy.contains('Key details').click();
         validateProposalDetailsDiff(
           'Name',
           proposalChangeType.UPDATED,
@@ -432,6 +449,7 @@ describe(
           'Opening auction'
         );
 
+        cy.contains('Instrument').click();
         validateProposalDetailsDiff(
           'Market Name',
           proposalChangeType.UPDATED,
@@ -439,6 +457,7 @@ describe(
           'Test market 1'
         );
 
+        cy.contains('Metadata').click();
         validateProposalDetailsDiff(
           'Sector',
           proposalChangeType.UPDATED,

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

@@ -274,6 +274,3 @@ export enum proposalChangeType {
   UPDATED = 'Updated',
   ADDED = 'Added',
 }
-
-export const longProposalDescription =
-  'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam bibendum orci augue, vel imperdiet augue ultrices sed. In hac habitasse platea dictumst. Sed eget elit vitae nisl tincidunt faucibus. Donec pellentesque mauris nec viverra blandit. Aenean eros diam, tempor eu luctus nec, rhoncus non massa. Mauris libero diam, mattis et enim ut, lobortis pharetra elit. Phasellus vel metus accumsan, rhoncus tellus finibus, blandit mi. In sollicitudin ex ac tortor ornare interdum. Sed est ipsum, vestibulum eget dolor vel, porta luctus elit. Fusce justo nibh, placerat eget sollicitudin eleifend, rhoncus id lorem. Fusce vitae magna vel urna faucibus accumsan quis id purus.\nPraesent convallis dolor sed ante ultricies tempor. Proin sed risus ut libero euismod semper. Duis quis quam sed lacus viverra blandit vel scelerisque diam. Donec interdum, ipsum eget imperdiet ornare, risus augue faucibus lectus, ullamcorper scelerisque erat sapien in purus. Nunc molestie tincidunt felis dignissim vestibulum. Quisque quis ornare enim, non dignissim lectus. Mauris mollis, massa ut maximus consectetur, sem mi lobortis quam, vel malesuada eros tortor nec ex. Cras ac nunc sed erat malesuada varius a quis nulla. Curabitur cursus nec sem sit amet aliquet. Ut tristique tortor neque, a dignissim lectus dictum vel. Praesent sollicitudin bibendum vulputate.\nAenean bibendum tristique diam laoreet posuere. Curabitur ornare lectus ut diam ultricies, ut sodales eros lacinia. Maecenas mauris turpis, gravida non arcu ac, interdum auctor sapien. Vestibulum sed tortor quam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec finibus pulvinar magna, non laoreet lectus molestie nec. Vestibulum tempus mattis vehicula. Praesent in orci lectus. In commodo sollicitudin lacus, et lobortis eros placerat vitae. Proin mi libero, feugiat id pretium posuere, rhoncus ut augue. Cras massa tortor, rutrum sed ex vitae, posuere pretium augue. Donec pellentesque suscipit dignissim. Vivamus convallis a odio vitae sodales. Nullam non eleifend mauris, sed iaculis lectus. Cras facilisis justo at ante.\n[Hyperlink text](https://dweb.link/ipfs/bafybeigwwctpv37xdcwacqxvekr6e4kaemqsrv34em6glkbiceo3fcy4si)';

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
@@ -31,4 +29,3 @@ LC_ALL="en_US.UTF-8"
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
-NX_METAMASK_SNAPS=true

apps/governance/.env.capsule

@@ -30,4 +30,3 @@ CYPRESS_FAIRGROUND=false
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=false
-NX_METAMASK_SNAPS=false

apps/governance/.env.devnet

@@ -22,4 +22,3 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://be.devnet1.vega.xyz/websocket
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
-NX_METAMASK_SNAPS=true

apps/governance/.env.mainnet

@@ -22,4 +22,3 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://be.vega.community/websocket
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=false
-NX_METAMASK_SNAPS=false

apps/governance/.env.mainnet-mirror

@@ -21,4 +21,3 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://be.mainnet-mirror.vega.rocks/websocket
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=false
-NX_METAMASK_SNAPS=false

apps/governance/.env.stagnet1

@@ -18,4 +18,3 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n01.stagnet1.vega.xyz/websocket
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
-NX_METAMASK_SNAPS=true

apps/governance/.env.testnet

@@ -23,4 +23,3 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://be.testnet.vega.xyz/websocket
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=true
-NX_METAMASK_SNAPS=true

apps/governance/.env.validators-testnet

@@ -20,4 +20,3 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://be.validators-testnet.vega.
 
 # Cosmic elevator flags
 NX_SUCCESSOR_MARKETS=false
-NX_METAMASK_SNAPS=false

apps/governance/src/app.tsx

@@ -41,7 +41,6 @@ import {
   AppFailure,
   NodeSwitcherDialog,
   useNodeSwitcherStore,
-  DocsLinks,
 } from '@vegaprotocol/environment';
 import { ENV } from './config';
 import type { InMemoryCacheConfig } from '@apollo/client';
@@ -110,17 +109,8 @@ const Web3Container = ({
     store.connectors,
     store.initialize,
   ]);
-  const {
-    ETHEREUM_PROVIDER_URL,
-    ETH_LOCAL_PROVIDER_URL,
-    ETH_WALLET_MNEMONIC,
-    VEGA_ENV,
-    VEGA_URL,
-    VEGA_EXPLORER_URL,
-    CHROME_EXTENSION_URL,
-    MOZILLA_EXTENSION_URL,
-    VEGA_WALLET_URL,
-  } = useEnvironment();
+  const { ETHEREUM_PROVIDER_URL, ETH_LOCAL_PROVIDER_URL, ETH_WALLET_MNEMONIC } =
+    useEnvironment();
   useEffect(() => {
     if (chainId) {
       return initializeConnectors(
@@ -149,33 +139,10 @@ const Web3Container = ({
     return <SplashLoader />;
   }
 
-  if (
-    !VEGA_URL ||
-    !VEGA_WALLET_URL ||
-    !VEGA_EXPLORER_URL ||
-    !DocsLinks ||
-    !CHROME_EXTENSION_URL ||
-    !MOZILLA_EXTENSION_URL
-  ) {
-    return null;
-  }
-
   return (
     <Web3Provider connectors={connectors}>
       <Web3Connector connectors={connectors} chainId={Number(chainId)}>
-        <VegaWalletProvider
-          config={{
-            network: VEGA_ENV,
-            vegaUrl: VEGA_URL,
-            vegaWalletServiceUrl: VEGA_WALLET_URL,
-            links: {
-              explorer: VEGA_EXPLORER_URL,
-              concepts: DocsLinks?.VEGA_WALLET_CONCEPTS_URL,
-              chromeExtensionUrl: CHROME_EXTENSION_URL,
-              mozillaExtensionUrl: MOZILLA_EXTENSION_URL,
-            },
-          }}
-        >
+        <VegaWalletProvider>
           <ContractsProvider>
             <AppLoader>
               <BalanceManager>
@@ -308,7 +275,7 @@ const AppContainer = () => {
     <Router>
       <ScrollToTop />
       <AppStateProvider>
-        <div className="min-h-full text-white grid">
+        <div className="grid min-h-full text-white">
           <NodeGuard
             skeleton={<div>{t('Loading')}</div>}
             failure={

apps/governance/src/lib/vega-connectors.ts

@@ -1,25 +1,17 @@
-import { FLAGS } from '@vegaprotocol/environment';
 import {
   JsonRpcConnector,
   ViewConnector,
   InjectedConnector,
-  SnapConnector,
-  DEFAULT_SNAP_ID,
 } from '@vegaprotocol/wallet';
 
 const urlParams = new URLSearchParams(window.location.search);
 
-export const jsonRpc = new JsonRpcConnector();
 export const injected = new InjectedConnector();
+export const jsonRpc = new JsonRpcConnector();
 export const view = new ViewConnector(urlParams.get('address'));
 
-export const snap = FLAGS.METAMASK_SNAPS
-  ? new SnapConnector(DEFAULT_SNAP_ID)
-  : undefined;
-
 export const Connectors = {
   injected,
   jsonRpc,
   view,
-  snap,
 };

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

@@ -1,27 +1,44 @@
 import ReactMarkdown from 'react-markdown';
-import { RoundedWrapper, ShowMore } from '@vegaprotocol/ui-toolkit';
+import { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { RoundedWrapper } from '@vegaprotocol/ui-toolkit';
+import { SubHeading } from '../../../../components/heading';
+import { CollapsibleToggle } from '../../../../components/collapsible-toggle';
 
 export const ProposalDescription = ({
   description,
 }: {
   description: string;
-}) => (
-  <section data-testid="proposal-description">
-    <RoundedWrapper paddingBottom={true} marginBottomLarge={true}>
-      <div className="p-2">
-        <ShowMore>
-          <ReactMarkdown
-            className="react-markdown-container"
-            /* Prevents HTML embedded in the description from rendering */
-            skipHtml={true}
-            /* Stops users embedding images which could be used for tracking  */
-            disallowedElements={['img']}
-            linkTarget="_blank"
-          >
-            {description}
-          </ReactMarkdown>
-        </ShowMore>
-      </div>
-    </RoundedWrapper>
-  </section>
-);
+}) => {
+  const { t } = useTranslation();
+  const [showDescription, setShowDescription] = useState(false);
+
+  return (
+    <section data-testid="proposal-description">
+      <CollapsibleToggle
+        toggleState={showDescription}
+        setToggleState={setShowDescription}
+        dataTestId={'proposal-description-toggle'}
+      >
+        <SubHeading title={t('proposalDescription')} />
+      </CollapsibleToggle>
+
+      {showDescription && (
+        <RoundedWrapper paddingBottom={true} marginBottomLarge={true}>
+          <div className="p-2">
+            <ReactMarkdown
+              className="react-markdown-container"
+              /* Prevents HTML embedded in the description from rendering */
+              skipHtml={true}
+              /* Stops users embedding images which could be used for tracking  */
+              disallowedElements={['img']}
+              linkTarget="_blank"
+            >
+              {description}
+            </ReactMarkdown>
+          </div>
+        </RoundedWrapper>
+      )}
+    </section>
+  );
+};

apps/governance/src/routes/proposals/components/proposal-market-data/proposal-market-data.tsx

@@ -15,6 +15,8 @@ import {
   SettlementAssetInfoPanel,
 } from '@vegaprotocol/markets';
 import {
+  Accordion,
+  AccordionItem,
   Button,
   CopyWithTooltip,
   Dialog,
@@ -41,9 +43,6 @@ export const useMarketDataDialogStore = create<MarketDataDialogState>(
   })
 );
 
-const marketDataHeaderStyles =
-  'font-alpha calt text-base border-b border-vega-dark-200 mt-2 py-2';
-
 export const ProposalMarketData = ({
   marketData,
   parentMarketData,
@@ -77,14 +76,6 @@ export const ProposalMarketData = ({
     parentTerminationData !== undefined &&
     isEqual(terminationData, parentTerminationData);
 
-  const showParentPriceMonitoringBounds =
-    parentMarketData?.priceMonitoringSettings?.parameters?.triggers !==
-      undefined &&
-    !isEqual(
-      marketData.priceMonitoringSettings?.parameters?.triggers,
-      parentMarketData?.priceMonitoringSettings?.parameters?.triggers
-    );
-
   const getSigners = (data: DataSourceDefinition) => {
     if (data.sourceType.__typename === 'DataSourceDefinitionExternal') {
       const signers = data.sourceType.sourceType.signers || [];
@@ -117,141 +108,164 @@ export const ProposalMarketData = ({
             </Button>
           </div>
           <div className="mb-10">
-            <h2 className={marketDataHeaderStyles}>{t('Key details')}</h2>
-            <KeyDetailsInfoPanel
-              market={marketData}
-              parentMarket={parentMarketData}
-            />
-
-            <h2 className={marketDataHeaderStyles}>{t('Instrument')}</h2>
-            <InstrumentInfoPanel
-              market={marketData}
-              parentMarket={parentMarketData}
-            />
-
-            {isEqual(
-              getSigners(settlementData),
-              getSigners(terminationData)
-            ) ? (
-              <>
-                <h2 className={marketDataHeaderStyles}>{t('Oracle')}</h2>
-
-                <OracleInfoPanel
-                  market={marketData}
-                  type="settlementData"
-                  parentMarket={
-                    isParentSettlementDataEqual ? undefined : parentMarketData
+            <Accordion>
+              <AccordionItem
+                itemId="key-details"
+                title={t('Key details')}
+                content={
+                  <KeyDetailsInfoPanel
+                    market={marketData}
+                    parentMarket={parentMarketData}
+                  />
+                }
+              />
+              <AccordionItem
+                itemId="instrument"
+                title={t('Instrument')}
+                content={
+                  <InstrumentInfoPanel
+                    market={marketData}
+                    parentMarket={parentMarketData}
+                  />
+                }
+              />
+              {isEqual(
+                getSigners(settlementData),
+                getSigners(terminationData)
+              ) ? (
+                <AccordionItem
+                  itemId="oracles"
+                  title={t('Oracle')}
+                  content={
+                    <OracleInfoPanel
+                      market={marketData}
+                      type="settlementData"
+                      parentMarket={
+                        isParentSettlementDataEqual
+                          ? undefined
+                          : parentMarketData
+                      }
+                    />
                   }
                 />
-              </>
-            ) : (
-              <>
-                <h2 className={marketDataHeaderStyles}>
-                  {t('Settlement Oracle')}
-                </h2>
-                <OracleInfoPanel
-                  market={marketData}
-                  type="settlementData"
-                  parentMarket={
-                    isParentSettlementDataEqual ? undefined : parentMarketData
-                  }
-                />
-
-                <h2 className={marketDataHeaderStyles}>
-                  {t('Termination Oracle')}
-                </h2>
-                <OracleInfoPanel
-                  market={marketData}
-                  type="termination"
-                  parentMarket={
-                    isParentTerminationDataEqual ? undefined : parentMarketData
-                  }
-                />
-              </>
-            )}
-
-            {/*Note: successor markets will not differ in their settlement*/}
-            {/*assets, so no need to pass in parent market data for comparison.*/}
-
-            <h2 className={marketDataHeaderStyles}>{t('Settlement assets')}</h2>
-            <SettlementAssetInfoPanel
-              market={marketData}
-              parentMarket={parentMarketData}
-            />
-
-            <h2 className={marketDataHeaderStyles}>{t('Metadata')}</h2>
-            <MetadataInfoPanel
-              market={marketData}
-              parentMarket={parentMarketData}
-            />
-
-            <h2 className={marketDataHeaderStyles}>{t('Risk model')}</h2>
-            <RiskModelInfoPanel
-              market={marketData}
-              parentMarket={parentMarketData}
-            />
-
-            <h2 className={marketDataHeaderStyles}>{t('Risk parameters')}</h2>
-            <RiskParametersInfoPanel
-              market={marketData}
-              parentMarket={parentMarketData}
-            />
-
-            <h2 className={marketDataHeaderStyles}>{t('Risk factors')}</h2>
-            <RiskFactorsInfoPanel
-              market={marketData}
-              parentMarket={parentMarketData}
-            />
-
-            {showParentPriceMonitoringBounds &&
-              (
-                parentMarketData?.priceMonitoringSettings?.parameters
-                  ?.triggers || []
-              ).map((_, triggerIndex) => (
+              ) : (
                 <>
-                  <h2 className={marketDataHeaderStyles}>
-                    {t(`Parent price monitoring bounds ${triggerIndex + 1}`)}
-                  </h2>
+                  <AccordionItem
+                    itemId="settlement-oracle"
+                    title={t('Settlement Oracle')}
+                    content={
+                      <OracleInfoPanel
+                        market={marketData}
+                        type="settlementData"
+                        parentMarket={
+                          isParentSettlementDataEqual
+                            ? undefined
+                            : parentMarketData
+                        }
+                      />
+                    }
+                  />
 
-                  <div className="text-vega-dark-300 line-through">
+                  <AccordionItem
+                    itemId="termination-oracle"
+                    title={t('Termination Oracle')}
+                    content={
+                      <OracleInfoPanel
+                        market={marketData}
+                        type="termination"
+                        parentMarket={
+                          isParentTerminationDataEqual
+                            ? undefined
+                            : parentMarketData
+                        }
+                      />
+                    }
+                  />
+                </>
+              )}
+              {/*Note: successor markets will not differ in their settlement*/}
+              {/*assets, so no need to pass in parent market data for comparison.*/}
+              <AccordionItem
+                itemId="settlement-asset"
+                title={t('Settlement asset')}
+                content={<SettlementAssetInfoPanel market={marketData} />}
+              />
+              <AccordionItem
+                itemId="metadata"
+                title={t('Metadata')}
+                content={
+                  <MetadataInfoPanel
+                    market={marketData}
+                    parentMarket={parentMarketData}
+                  />
+                }
+              />
+              <AccordionItem
+                itemId="risk-model"
+                title={t('Risk model')}
+                content={
+                  <RiskModelInfoPanel
+                    market={marketData}
+                    parentMarket={parentMarketData}
+                  />
+                }
+              />
+              <AccordionItem
+                itemId="risk-parameters"
+                title={t('Risk parameters')}
+                content={
+                  <RiskParametersInfoPanel
+                    market={marketData}
+                    parentMarket={parentMarketData}
+                  />
+                }
+              />
+              <AccordionItem
+                itemId="risk-factors"
+                title={t('Risk factors')}
+                content={
+                  <RiskFactorsInfoPanel
+                    market={marketData}
+                    parentMarket={parentMarketData}
+                  />
+                }
+              />
+              {(
+                marketData.priceMonitoringSettings?.parameters?.triggers || []
+              ).map((_, triggerIndex) => (
+                <AccordionItem
+                  itemId={`trigger-${triggerIndex}`}
+                  title={t(`Price monitoring bounds ${triggerIndex + 1}`)}
+                  content={
                     <PriceMonitoringBoundsInfoPanel
-                      market={parentMarketData}
+                      market={marketData}
+                      parentMarket={parentMarketData}
                       triggerIndex={triggerIndex}
                     />
-                  </div>
-                </>
-              ))}
-
-            {(
-              marketData.priceMonitoringSettings?.parameters?.triggers || []
-            ).map((_, triggerIndex) => (
-              <>
-                <h2 className={marketDataHeaderStyles}>
-                  {t(`Price monitoring bounds ${triggerIndex + 1}`)}
-                </h2>
-
-                <PriceMonitoringBoundsInfoPanel
-                  market={marketData}
-                  triggerIndex={triggerIndex}
+                  }
                 />
-              </>
-            ))}
-
-            <h2 className={marketDataHeaderStyles}>
-              {t('Liquidity monitoring parameters')}
-            </h2>
-            <LiquidityMonitoringParametersInfoPanel
-              market={marketData}
-              parentMarket={parentMarketData}
-            />
-
-            <h2 className={marketDataHeaderStyles}>
-              {t('Liquidity price range')}
-            </h2>
-            <LiquidityPriceRangeInfoPanel
-              market={marketData}
-              parentMarket={parentMarketData}
-            />
+              ))}
+              <AccordionItem
+                itemId="liqudity-monitoring-parameters"
+                title={t('Liquidity monitoring parameters')}
+                content={
+                  <LiquidityMonitoringParametersInfoPanel
+                    market={marketData}
+                    parentMarket={parentMarketData}
+                  />
+                }
+              />
+              <AccordionItem
+                itemId="liquidity-price-range"
+                title={t('Liquidity price range')}
+                content={
+                  <LiquidityPriceRangeInfoPanel
+                    market={marketData}
+                    parentMarket={parentMarketData}
+                  />
+                }
+              />
+            </Accordion>
           </div>
         </>
       )}

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

@@ -1,7 +1,6 @@
 import { MemoryRouter } from 'react-router-dom';
 import { MockedProvider } from '@apollo/client/testing';
 import { VegaWalletProvider } from '@vegaprotocol/wallet';
-import type { VegaWalletConfig } from '@vegaprotocol/wallet';
 import { render, screen } from '@testing-library/react';
 import { generateProposal } from '../../test-helpers/generate-proposals';
 import { Proposal } from './proposal';
@@ -44,23 +43,11 @@ jest.mock('../list-asset', () => ({
   ListAsset: () => <div data-testid="proposal-list-asset"></div>,
 }));
 
-const vegaWalletConfig: VegaWalletConfig = {
-  network: 'TESTNET',
-  vegaUrl: 'https://vega.xyz',
-  vegaWalletServiceUrl: 'https://wallet.vega.xyz',
-  links: {
-    explorer: 'explorer',
-    concepts: 'concepts',
-    chromeExtensionUrl: 'chrome',
-    mozillaExtensionUrl: 'mozilla',
-  },
-};
-
 const renderComponent = (proposal: ProposalQuery['proposal']) => {
   render(
     <MemoryRouter>
       <MockedProvider>
-        <VegaWalletProvider config={vegaWalletConfig}>
+        <VegaWalletProvider>
           <Proposal
             restData={{}}
             proposal={proposal as ProposalQuery['proposal']}

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

@@ -4,7 +4,6 @@ import { VoteButtons } from './vote-buttons';
 import { VoteState } from './use-user-vote';
 import { ProposalState } from '@vegaprotocol/types';
 import { VegaWalletContext } from '@vegaprotocol/wallet';
-import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
 import { mockWalletContext } from '../../test-helpers/mocks';
 import { AppStateProvider } from '../../../../contexts/app-state/app-state-provider';
 import { MockedProvider } from '@apollo/react-testing';
@@ -68,7 +67,7 @@ describe('Vote buttons', () => {
       disconnect: jest.fn(),
       selectPubKey: jest.fn(),
       connector: null,
-    } as unknown as VegaWalletContextShape;
+    };
 
     render(
       <AppStateProvider>

apps/governance/src/routes/proposals/propose/raw/proposal-raw.spec.tsx

@@ -114,7 +114,6 @@ describe('Raw proposal form', () => {
               {
                 pubKey,
                 sendTx: mockSendTx,
-                links: { explorer: 'explorer' },
               } as unknown as VegaWalletContextShape
             }
           >

apps/governance/src/routes/proposals/test-helpers/mocks.ts

@@ -1,7 +1,7 @@
 import { NetworkParamsDocument } from '@vegaprotocol/network-parameters';
 import type { MockedResponse } from '@apollo/client/testing';
 import type { NetworkParamsQuery } from '@vegaprotocol/network-parameters';
-import type { PubKey, VegaWalletContextShape } from '@vegaprotocol/wallet';
+import type { PubKey } from '@vegaprotocol/wallet';
 import type { VoteValue } from '@vegaprotocol/types';
 import type { UserVoteQuery } from '../components/vote-details/__generated__/Vote';
 import { UserVoteDocument } from '../components/vote-details/__generated__/Vote';
@@ -21,7 +21,7 @@ export const mockWalletContext = {
   disconnect: jest.fn(),
   selectPubKey: jest.fn(),
   connector: null,
-} as unknown as VegaWalletContextShape;
+};
 
 const mockEthereumConfig = {
   network_id: '3',

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

@@ -0,0 +1,475 @@
+import { aliasGQLQuery } from '@vegaprotocol/cypress';
+import type { DataSourceDefinition } from '@vegaprotocol/types';
+import {
+  MarketState,
+  MarketStateMapping,
+  PropertyKeyType,
+} from '@vegaprotocol/types';
+import { addDays, subDays } from 'date-fns';
+import {
+  chainIdQuery,
+  statisticsQuery,
+  createDataConnection,
+  oracleSpecDataConnectionQuery,
+  createMarketFragment,
+  marketsQuery,
+  marketsDataQuery,
+  createMarketsDataFragment,
+  assetQuery,
+  networkParamsQuery,
+  nodeGuardQuery,
+} from '@vegaprotocol/mock';
+import {
+  addDecimalsFormatNumber,
+  getDateTimeFormat,
+} from '@vegaprotocol/utils';
+
+describe('Closed markets', { tags: '@smoke' }, () => {
+  const settlementDataProperty = 'settlement-data-property';
+  const settlementDataPropertyKey = {
+    __typename: 'PropertyKey' as const,
+    name: settlementDataProperty,
+    type: PropertyKeyType.TYPE_INTEGER,
+    numberDecimalPlaces: 2,
+  };
+  const settlementDataSourceData: DataSourceDefinition = {
+    sourceType: {
+      sourceType: {
+        filters: [
+          {
+            __typename: 'Filter',
+            key: settlementDataPropertyKey,
+          },
+        ],
+      },
+    },
+  };
+  const rowSelector =
+    '[data-testid="tab-closed-markets"] .ag-center-cols-container .ag-row';
+
+  const assetsResult = assetQuery();
+  // @ts-ignore asset definitely exists
+  const settlementAsset = assetsResult.assetsConnection.edges[0].node;
+
+  const settledMarket = createMarketFragment({
+    id: '0',
+    state: MarketState.STATE_SETTLED,
+    marketTimestamps: {
+      open: subDays(new Date(), 10).toISOString(),
+      close: subDays(new Date(), 4).toISOString(),
+    },
+    tradableInstrument: {
+      instrument: {
+        product: {
+          dataSourceSpecBinding: {
+            settlementDataProperty,
+          },
+          dataSourceSpecForTradingTermination: {
+            id: 'market-1-trading-termination-oracle-id',
+          },
+          dataSourceSpecForSettlementData: {
+            id: 'market-1-settlement-data-oracle-id',
+            data: settlementDataSourceData,
+          },
+          settlementAsset,
+        },
+      },
+    },
+  });
+
+  const terminatedMarket = createMarketFragment({
+    id: '1',
+    state: MarketState.STATE_TRADING_TERMINATED,
+    marketTimestamps: {
+      open: subDays(new Date(), 10).toISOString(),
+      close: null, // market
+    },
+    tradableInstrument: {
+      instrument: {
+        metadata: {
+          tags: [
+            `settlement-expiry-date:${addDays(new Date(), 4).toISOString()}`,
+          ],
+        },
+        product: {
+          dataSourceSpecBinding: {
+            settlementDataProperty,
+          },
+          dataSourceSpecForSettlementData: {
+            id: 'market-1-settlement-data-oracle-id',
+            data: settlementDataSourceData,
+          },
+        },
+      },
+    },
+  });
+
+  const delayedSettledMarket = createMarketFragment({
+    id: '2',
+    state: MarketState.STATE_TRADING_TERMINATED,
+    marketTimestamps: {
+      open: subDays(new Date(), 10).toISOString(),
+      close: null, // market
+    },
+    tradableInstrument: {
+      instrument: {
+        metadata: {
+          tags: [
+            `settlement-expiry-date:${subDays(new Date(), 2).toISOString()}`,
+          ],
+        },
+        product: {
+          dataSourceSpecBinding: {
+            settlementDataProperty,
+          },
+          dataSourceSpecForSettlementData: {
+            id: 'market-1-settlement-data-oracle-id',
+            data: settlementDataSourceData,
+          },
+        },
+      },
+    },
+  });
+
+  const unknownMarket = createMarketFragment({
+    id: '3',
+    state: MarketState.STATE_SETTLED,
+  });
+
+  const closedMarketsResult = [
+    {
+      node: settledMarket,
+    },
+    {
+      node: terminatedMarket,
+    },
+    {
+      node: delayedSettledMarket,
+    },
+    { node: unknownMarket },
+    {
+      node: createMarketFragment({ id: '4', state: MarketState.STATE_PENDING }),
+    },
+    {
+      node: createMarketFragment({ id: '5', state: MarketState.STATE_ACTIVE }),
+    },
+  ];
+
+  const settledMarketData = createMarketsDataFragment({
+    market: {
+      id: settledMarket.id,
+    },
+    bestBidPrice: '1000',
+    bestOfferPrice: '2000',
+    markPrice: '1500',
+  });
+
+  const closedMarketsDataResult = [
+    {
+      node: {
+        data: settledMarketData,
+      },
+    },
+    {
+      node: {
+        data: createMarketsDataFragment({
+          market: {
+            id: terminatedMarket.id,
+          },
+        }),
+      },
+    },
+    {
+      node: {
+        data: createMarketsDataFragment({
+          market: {
+            id: delayedSettledMarket.id,
+          },
+        }),
+      },
+    },
+    {
+      node: {
+        data: createMarketsDataFragment({
+          market: {
+            id: unknownMarket.id,
+          },
+        }),
+      },
+    },
+  ];
+
+  const specDataConnection = createDataConnection();
+
+  before(() => {
+    cy.setOnBoardingViewed();
+    cy.mockGQL((req) => {
+      aliasGQLQuery(req, 'ChainId', chainIdQuery());
+      aliasGQLQuery(req, 'Statistics', statisticsQuery());
+      aliasGQLQuery(req, 'NodeGuard', nodeGuardQuery());
+      aliasGQLQuery(req, 'NetworkParams', networkParamsQuery());
+      aliasGQLQuery(
+        req,
+        'Markets',
+        marketsQuery({
+          marketsConnection: {
+            edges: closedMarketsResult,
+          },
+        })
+      );
+      aliasGQLQuery(
+        req,
+        'MarketsData',
+        marketsDataQuery({
+          marketsConnection: {
+            edges: closedMarketsDataResult,
+          },
+        })
+      );
+      aliasGQLQuery(
+        req,
+        'OracleSpecDataConnection',
+        oracleSpecDataConnectionQuery()
+      );
+    });
+
+    cy.mockSubscription();
+
+    cy.visit('/#/markets/all');
+    cy.get('[data-testid="Closed markets"]').click();
+  });
+
+  it('renders a settled market', () => {
+    const expectedMarkets = closedMarketsResult.filter((edge) => {
+      return [
+        MarketState.STATE_SETTLED,
+        MarketState.STATE_TRADING_TERMINATED,
+      ].includes(edge.node.state);
+    });
+    const product = settledMarket.tradableInstrument.instrument.product;
+
+    // rows should be filtered to only include settled/terminated markets
+    cy.get(rowSelector).should('have.length', expectedMarkets.length);
+
+    // check each column in the first row renders correctly
+    // 6001-MARK-001
+    cy.get(rowSelector)
+      .first()
+      .find('[col-id="code"]')
+      .find('[data-testid="market-code"]')
+      .should('have.text', settledMarket.tradableInstrument.instrument.code);
+
+    // 6001-MARK-071
+    cy.get(rowSelector)
+      .first()
+      .find('[title="Future"]')
+      .should('have.text', 'Futr');
+
+    // 6001-MARK-002
+    cy.get(rowSelector)
+      .first()
+      .find('[col-id="name"]')
+      .should('have.text', settledMarket.tradableInstrument.instrument.name);
+
+    // 6001-MARK-003
+    cy.get(rowSelector)
+      .first()
+      .find('[col-id="state"]')
+      .should('have.text', MarketStateMapping[settledMarket.state]);
+
+    // 6001-MARK-004
+    // 6001-MARK-005
+    // 6001-MARK-009
+    // 6001-MARK-008
+    // 6001-MARK-010
+    cy.get(rowSelector)
+      .first()
+      .find('[col-id="settlementDate"]')
+      .find('[data-testid="link"]')
+      .should(($el) => {
+        const href = $el.attr('href');
+        expect(href).to.match(
+          new RegExp(
+            `/oracles/${product.dataSourceSpecForTradingTermination.id}`
+          )
+        );
+      })
+      .should('have.text', '4 days ago')
+      .should(
+        'have.attr',
+        'title',
+        getDateTimeFormat().format(
+          new Date(settledMarket.marketTimestamps.close)
+        )
+      );
+
+    // 6001-MARK-011
+    cy.get(rowSelector)
+      .first()
+      .find('[col-id="bestBidPrice"]')
+      .should(
+        'have.text',
+        addDecimalsFormatNumber(
+          settledMarketData.bestBidPrice,
+          settledMarket.decimalPlaces
+        )
+      );
+
+    // 6001-MARK-012
+    cy.get(rowSelector)
+      .first()
+      .find('[col-id="bestOfferPrice"]')
+      .should(
+        'have.text',
+        addDecimalsFormatNumber(
+          settledMarketData.bestOfferPrice,
+          settledMarket.decimalPlaces
+        )
+      );
+
+    // 6001-MARK-013
+    cy.get(rowSelector).first().find('[col-id="markPrice"]').should(
+      'have.text',
+
+      addDecimalsFormatNumber(
+        settledMarketData.markPrice,
+        settledMarket.decimalPlaces
+      )
+    );
+
+    // 6001-MARK-014
+    // 6001-MARK-015
+    // 6001-MARK-016
+    cy.get(rowSelector)
+      .first()
+      .find('[col-id="settlementDataOracleId"]')
+      .find('[data-testid="link"]')
+      .should(($el) => {
+        const href = $el.attr('href');
+        expect(href).to.match(
+          new RegExp(`/oracles/${product.dataSourceSpecForSettlementData.id}`)
+        );
+      })
+      .should(
+        'have.text',
+        addDecimalsFormatNumber(
+          // @ts-ignore cannot deep un-partial
+          specDataConnection.externalData.data.data[0].value,
+          settlementDataPropertyKey.numberDecimalPlaces
+        )
+      );
+
+    // 6001-MARK-018
+    cy.get(rowSelector)
+      .first()
+      .find('[col-id="settlementAsset"]')
+      .should('have.text', product.settlementAsset.symbol);
+
+    // 6001-MARK-020
+    cy.get('.ag-pinned-right-cols-container')
+      .find('[col-id="market-actions"]')
+      .first()
+      .find('button svg')
+      .should('exist');
+    if (Cypress.env('NX_SUCCESSOR_MARKETS')) {
+      cy.get(rowSelector)
+        .find('[col-id="successorMarket"]')
+        .first()
+        .should('have.text', '-');
+    }
+  });
+
+  // test market list for market in terminated state
+  it('renders a terminated market', () => {
+    cy.get(rowSelector)
+      .eq(1)
+      .find('[col-id="state"]')
+      .should('have.text', MarketStateMapping[terminatedMarket.state]);
+
+    // 6001-MARK-006
+    // 6001-MARK-007
+    cy.get(rowSelector)
+      .eq(1)
+      .find('[col-id="settlementDate"]')
+      .find('[data-testid="link"]')
+      .should('have.text', 'Expected in 4 days');
+  });
+
+  it('renders a terminated market which was expected to have settled', () => {
+    cy.get(rowSelector)
+      .eq(2)
+      .find('[col-id="settlementDate"]')
+      .should('have.class', 'text-danger')
+      .find('[data-testid="link"]')
+      .should('have.text', 'Expected 2 days ago');
+  });
+
+  it('renders terminated market which doesnt have settlement date metadata', () => {
+    cy.get(rowSelector)
+      .eq(3)
+      .find('[col-id="settlementDate"]')
+      .find('[data-testid="link"]')
+      .should('have.text', 'Unknown');
+  });
+
+  it('can open asset detail dialog', () => {
+    cy.mockGQL((req) => {
+      aliasGQLQuery(req, 'Asset', assetsResult);
+    });
+
+    cy.get(rowSelector)
+      .first()
+      .find('[col-id="settlementAsset"]')
+      .find('button')
+      .click();
+
+    // 6001-MARK-019
+    cy.get('[data-testid="dialog-title"]').should(
+      'have.text',
+      `Asset details - ${settlementAsset.symbol}`
+    );
+
+    cy.get('[data-testid="dialog-close"]').click();
+  });
+
+  it('can open row actions', () => {
+    cy.get('.ag-pinned-right-cols-container')
+      .find('[col-id="market-actions"]')
+      .first()
+      .find('button')
+      .click();
+
+    const dropdownContent = '[data-testid="market-actions-content"]';
+    const dropdownContentItem = '[role="menuitem"]';
+    cy.get(dropdownContent)
+      .find(dropdownContentItem)
+      .eq(0)
+      // Cannot click the copy button as it falls back to window.prompt, blocking the test.
+      .should('have.text', 'Copy Market ID');
+
+    cy.get(dropdownContent)
+      .find(dropdownContentItem)
+      .eq(1)
+      .find('a')
+      .then(($el) => {
+        const href = $el.attr('href');
+        expect(/\/markets\/0/.test(href || '')).to.equal(true);
+      })
+      .should('have.text', 'View on Explorer');
+  });
+});
+
+describe('no closed markets', { tags: '@smoke', testIsolation: true }, () => {
+  before(() => {
+    cy.mockTradingPage();
+    cy.mockSubscription();
+    cy.setOnBoardingViewed();
+    cy.visit('/#/markets/all');
+    cy.get('[data-testid="Closed markets"]').click();
+  });
+
+  it('can see no markets message', () => {
+    // 6001-MARK-034
+    cy.getByTestId('tab-closed-markets').should('contain.text', 'No markets');
+  });
+});

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

@@ -0,0 +1,218 @@
+import { aliasGQLQuery } from '@vegaprotocol/cypress';
+import type { MarketsQuery } from '@vegaprotocol/markets';
+import * as Schema from '@vegaprotocol/types';
+
+const rowSelector =
+  '[data-testid="tab-open-markets"] .ag-center-cols-container .ag-row';
+const colInstrumentCode =
+  '[col-id="tradableInstrument.instrument.code"] [data-testid="market-code"]';
+
+describe('markets all table', { tags: '@smoke' }, () => {
+  beforeEach(() => {
+    cy.clearLocalStorage().then(() => {
+      cy.setOnBoardingViewed();
+      cy.mockTradingPage(
+        Schema.MarketState.STATE_ACTIVE,
+        Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION,
+        Schema.AuctionTrigger.AUCTION_TRIGGER_LIQUIDITY_TARGET_NOT_MET
+      );
+      cy.mockSubscription();
+      cy.visit('/#/markets/all');
+    });
+  });
+
+  it('can see table headers', () => {
+    cy.wait('@Markets');
+    cy.wait('@MarketsData');
+    const headers = [
+      'Market',
+      'Description',
+      'Trading mode',
+      'Status',
+      'Successor market',
+      'Best bid',
+      'Best offer',
+      'Mark price',
+      'Settlement asset',
+      '',
+    ];
+    cy.getByTestId('tab-open-markets').within(($headers) => {
+      cy.wrap($headers)
+        .get('.ag-header-cell-text')
+        .each(($header, i) => {
+          cy.wrap($header).should('have.text', headers[i]);
+        });
+    });
+  });
+
+  it('markets tab should be rendered properly', () => {
+    cy.get('[data-testid="Open markets"]').should(
+      'have.attr',
+      'data-state',
+      'active'
+    );
+    cy.get('[data-testid="Proposed markets"]').should(
+      'have.attr',
+      'data-state',
+      'inactive'
+    );
+    cy.get('[data-testid="Closed markets"]').should(
+      'have.attr',
+      'data-state',
+      'inactive'
+    );
+  });
+  it('renders markets correctly', () => {
+    // 6001-MARK-035
+    cy.get(rowSelector)
+      .first()
+      .find(colInstrumentCode)
+      .should('have.text', 'SOLUSD');
+
+    // 6001-MARK-073
+    cy.get(rowSelector)
+      .first()
+      .find('[title="Future"]')
+      .should('have.text', 'Futr');
+
+    //  6001-MARK-036
+    cy.get(rowSelector)
+      .first()
+      .find('[col-id="tradableInstrument.instrument.name"]')
+      .should('have.text', 'SUSPENDED MARKET');
+
+    //  6001-MARK-037
+    cy.get(rowSelector)
+      .first()
+      .find('[col-id="tradingMode"]')
+      .should('have.text', 'Continuous');
+
+    //  6001-MARK-038
+    cy.get(rowSelector)
+      .first()
+      .find('[col-id="state"]')
+      .should('have.text', 'Active');
+
+    //  6001-MARK-039
+    cy.get(rowSelector)
+      .first()
+      .find('[col-id="data.bestBidPrice"]')
+      .should('have.text', '0.00');
+
+    //  6001-MARK-040
+    cy.get(rowSelector)
+      .first()
+      .find('[col-id="data.bestOfferPrice"]')
+      .should('have.text', '0.00');
+
+    //  6001-MARK-041
+    cy.get(rowSelector)
+      .first()
+      .find('[col-id="data.markPrice"]')
+      .should('have.text', '84.41');
+
+    //  6001-MARK-042
+    cy.get(rowSelector)
+      .first()
+      .find(
+        '[col-id="tradableInstrument.instrument.product.settlementAsset.symbol"]'
+      )
+      .should('have.text', 'XYZalpha');
+
+    // 6001-MARK-043
+    cy.get(rowSelector)
+      .first()
+      .find(
+        '[col-id="tradableInstrument.instrument.product.settlementAsset.symbol"] button'
+      )
+      .click();
+    cy.getByTestId('dialog-title').should('have.text', 'Asset details - tEURO');
+    cy.getByTestId('close-asset-details-dialog').click();
+  });
+
+  it('can open row actions', () => {
+    // 6001-MARK-044
+    cy.get('.ag-pinned-right-cols-container')
+      .find('[col-id="market-actions"]')
+      .first()
+      .find('button')
+      .click();
+
+    // 6001-MARK-045
+    const dropdownContent = '[data-testid="market-actions-content"]';
+    const dropdownContentItem = '[role="menuitem"]';
+    cy.get(dropdownContent)
+      .find(dropdownContentItem)
+      .eq(0)
+      // Cannot click the copy button as it falls back to window.prompt, blocking the test.
+      .should('have.text', 'Copy Market ID');
+
+    // 6001-MARK-046
+    cy.get(dropdownContent)
+      .find(dropdownContentItem)
+      .eq(1)
+      .find('a')
+      .then(($el) => {
+        const href = $el.attr('href');
+        expect(/\/markets\/market-1/.test(href || '')).to.equal(true);
+      })
+      .should('have.text', 'View on Explorer');
+
+    // 6001-MARK-047
+    cy.get(dropdownContent)
+      .find(dropdownContentItem)
+      .eq(2)
+      .should('have.text', 'View settlement asset details');
+    cy.getByTestId('market-actions-content').click();
+  });
+
+  it('able to open and sort full market list - market page', () => {
+    // 6001-MARK-064
+    const ExpectedSortedMarkets = [
+      'AAPL.MF21',
+      'BTCUSD.MF21',
+      'ETHBTC.QM21',
+      'SOLUSD',
+    ];
+    cy.get('[data-testid="Open markets"]').click({ force: true });
+    cy.url().should('eq', Cypress.config('baseUrl') + '/#/markets/all');
+    cy.contains('AAPL.MF21').should('be.visible');
+    cy.get('.ag-header-cell-label').contains('Market').click(); // sort by market name
+    for (let i = 0; i < ExpectedSortedMarkets.length; i++) {
+      cy.get(`[row-index=${i}]`)
+        .find(colInstrumentCode)
+        .should('have.text', ExpectedSortedMarkets[i]);
+    }
+  });
+
+  it('can drag and drop columns', () => {
+    // 6001-MARK-065
+    cy.get('.ag-overlay-loading-wrapper').should('not.be.visible');
+    cy.get(colInstrumentCode)
+      .realMouseDown()
+      .realMouseMove(700, 15)
+      .realMouseUp();
+    cy.get(colInstrumentCode).should(($element) => {
+      const attributeValue = $element.attr('aria-colindex');
+      expect(attributeValue).not.to.equal('1');
+    });
+  });
+});
+
+describe('no open markets', { tags: '@smoke', testIsolation: true }, () => {
+  before(() => {
+    cy.mockTradingPage();
+    const markets: MarketsQuery = {};
+    cy.mockGQL((req) => {
+      aliasGQLQuery(req, 'Markets', markets);
+    });
+    cy.mockSubscription();
+    cy.setOnBoardingViewed();
+    cy.visit('/#/markets/all');
+  });
+
+  it.skip('can see no markets message', () => {
+    // 6001-MARK-048
+    cy.getByTestId('tab-open-markets').should('contain.text', 'No markets');
+  });
+});

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

@@ -0,0 +1,239 @@
+import { aliasGQLQuery, checkSorting } from '@vegaprotocol/cypress';
+import type { ProposalsListQuery } from '@vegaprotocol/proposals';
+
+const rowSelector =
+  '[data-testid="tab-proposed-markets"] .ag-center-cols-container .ag-row';
+const colMarketId = '[col-id="market"] [data-testid="market-code"]';
+
+describe('markets proposed table', { tags: '@smoke' }, () => {
+  before(() => {
+    cy.mockTradingPage();
+    cy.mockSubscription();
+    cy.setOnBoardingViewed();
+    cy.visit('/#/markets/all');
+    cy.get('[data-testid="Proposed markets"]').click();
+  });
+
+  it('can see table headers', () => {
+    const headers = [
+      'Market',
+      'Description',
+      'Settlement asset',
+      'State',
+      'Parent market',
+      'Voting',
+      'Closing date',
+      'Enactment date',
+      '',
+    ];
+    cy.getByTestId('tab-proposed-markets').within(($headers) => {
+      cy.wrap($headers)
+        .get('.ag-header-cell-text')
+        .each(($header, i) => {
+          cy.wrap($header).should('have.text', headers[i]);
+        });
+    });
+  });
+
+  it('renders markets correctly', () => {
+    // 6001-MARK-049
+    cy.get(rowSelector).first().find(colMarketId).should('have.text', 'ETHUSD');
+
+    //  6001-MARK-050
+    cy.get(rowSelector)
+      .first()
+      .find('[col-id="description"]')
+      .should('have.text', 'ETHUSD');
+
+    //  6001-MARK-074
+    cy.get(rowSelector)
+      .first()
+      .find('[title="Future"]')
+      .should('have.text', 'Futr');
+
+    //  6001-MARK-051
+    cy.get(rowSelector)
+      .first()
+      .find('[col-id="asset"]')
+      .should('have.text', 'tDAI TEST');
+
+    //  6001-MARK-052
+    //  6001-MARK-053
+    cy.get(rowSelector)
+      .first()
+      .find('[col-id="state"]')
+      .should('have.text', 'Open');
+
+    //  6001-MARK-054
+    cy.get(rowSelector)
+      .first()
+      .find('[col-id="voting"]')
+      .should('have.text', '');
+
+    //  6001-MARK-056
+    cy.get(rowSelector)
+      .first()
+      .find('[col-id="closing-date"]')
+      .should('not.be.empty');
+
+    //  6001-MARK-057
+    cy.get(rowSelector)
+      .first()
+      .find('[col-id="enactment-date"]')
+      .should('not.be.empty');
+  });
+
+  it('can open row actions', () => {
+    // 6001-MARK-058
+    cy.get('.ag-pinned-right-cols-container')
+      .find('[col-id="proposal-actions"]')
+      .first()
+      .find('button')
+      .click();
+
+    const dropdownContent = '[data-testid="proposal-actions-content"]';
+    const dropdownContentItem = '[role="menuitem"]';
+
+    // 6001-MARK-059
+    cy.get(dropdownContent)
+      .find(dropdownContentItem)
+      .eq(0)
+      .find('a')
+      .should('have.text', 'View proposal')
+      .and(
+        'have.attr',
+        'href',
+        `${Cypress.env(
+          'VEGA_TOKEN_URL'
+        )}/proposals/e9ec6d5c46a7e7bcabf9ba7a893fa5a5eeeec08b731f06f7a6eb7bf0e605b829`
+      );
+  });
+
+  // 6001-MARK-060
+  it('can see proposed market link', () => {
+    cy.getByTestId('tab-proposed-markets')
+      .find('[data-testid="external-link"]')
+      .should('have.length', 11)
+      .last()
+      .should('have.text', 'Propose a new market')
+      .and(
+        'have.attr',
+        'href',
+        `${Cypress.env('VEGA_TOKEN_URL')}/proposals/propose/new-market`
+      );
+  });
+  it('proposed markets tab should be sorted properly', () => {
+    // 6001-MARK-062
+    cy.get('[data-testid="Proposed markets"]').click({ force: true });
+    const marketColDefault = [
+      'ETHUSD',
+      'LINKUSD',
+      'ETHUSD',
+      'ETHDAI.MF21',
+      'AAPL.MF21',
+      'BTCUSD.MF21',
+      'TSLA.QM21',
+      'AAVEDAI.MF21',
+      'ETHBTC.QM21',
+      'UNIDAI.MF21',
+    ];
+    const marketColAsc = [
+      'AAPL.MF21',
+      'AAVEDAI.MF21',
+      'BTCUSD.MF21',
+      'ETHBTC.QM21',
+      'ETHDAI.MF21',
+      'ETHUSD',
+      'ETHUSD',
+      'LINKUSD',
+      'TSLA.QM21',
+      'UNIDAI.MF21',
+    ];
+    const marketColDesc = [
+      'UNIDAI.MF21',
+      'TSLA.QM21',
+      'LINKUSD',
+      'ETHUSD',
+      'ETHUSD',
+      'ETHDAI.MF21',
+      'ETHBTC.QM21',
+      'BTCUSD.MF21',
+      'AAVEDAI.MF21',
+      'AAPL.MF21',
+    ];
+    checkSorting(
+      'market',
+      marketColDefault,
+      marketColAsc,
+      marketColDesc,
+      ' [data-testid="market-code"]'
+    );
+
+    const stateColDefault = [
+      'Open',
+      'Passed',
+      'Waiting for Node Vote',
+      'Open',
+      'Passed',
+      'Open',
+      'Passed',
+      'Open',
+      'Waiting for Node Vote',
+      'Open',
+    ];
+    const stateColAsc = [
+      'Open',
+      'Open',
+      'Open',
+      'Open',
+      'Open',
+      'Passed',
+      'Passed',
+      'Passed',
+      'Waiting for Node Vote',
+      'Waiting for Node Vote',
+    ];
+    const stateColDesc = [
+      'Waiting for Node Vote',
+      'Waiting for Node Vote',
+      'Passed',
+      'Passed',
+      'Passed',
+      'Open',
+      'Open',
+      'Open',
+      'Open',
+      'Open',
+    ];
+    checkSorting('state', stateColDefault, stateColAsc, stateColDesc);
+  });
+
+  it('can drag and drop columns', () => {
+    // 6001-MARK-063
+    cy.get(colMarketId).realMouseDown().realMouseMove(700, 15).realMouseUp();
+    cy.get(colMarketId).should(($element) => {
+      const attributeValue = $element.attr('aria-colindex');
+      expect(attributeValue).not.to.equal('1');
+    });
+  });
+});
+
+describe('no markets proposed', { tags: '@smoke', testIsolation: true }, () => {
+  before(() => {
+    cy.mockTradingPage();
+    const proposal: ProposalsListQuery = {};
+    cy.mockGQL((req) => {
+      aliasGQLQuery(req, 'ProposalsList', proposal);
+    });
+    cy.mockSubscription();
+    cy.setOnBoardingViewed();
+  });
+
+  it.skip('can see no markets message', () => {
+    cy.visit('/#/markets/all');
+    cy.get('[data-testid="Proposed markets"]').click();
+
+    // 6001-MARK-061
+    cy.getByTestId('tab-proposed-markets').should('contain.text', 'No markets');
+  });
+});

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

@@ -0,0 +1,110 @@
+import * as Schema from '@vegaprotocol/types';
+import { testOrderSubmission } from '../support/order-validation';
+import type { OrderSubmission } from '@vegaprotocol/wallet';
+import { createOrder } from '../support/create-order';
+
+describe.skip('must submit order', { tags: '@smoke' }, () => {
+  // 7002-SORD-039
+  before(() => {
+    cy.setVegaWallet();
+    cy.mockTradingPage();
+    cy.mockSubscription();
+    cy.visit('/#/markets/market-0');
+    cy.wait('@Markets');
+  });
+
+  beforeEach(() => {
+    cy.setVegaWallet();
+  });
+
+  it('successfully places market buy order', () => {
+    // 7002-SORD-010
+    // 0003-WTXN-012
+    // 0003-WTXN-003
+    cy.mockVegaWalletTransaction();
+    const order: OrderSubmission = {
+      marketId: 'market-0',
+      type: Schema.OrderType.TYPE_MARKET,
+      side: Schema.Side.SIDE_BUY,
+      timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_FOK,
+      postOnly: false,
+      reduceOnly: false,
+      size: '100',
+    };
+    createOrder(order);
+    testOrderSubmission(order);
+  });
+
+  it('successfully places market sell order', () => {
+    cy.mockVegaWalletTransaction();
+    const order: OrderSubmission = {
+      marketId: 'market-0',
+      type: Schema.OrderType.TYPE_MARKET,
+      side: Schema.Side.SIDE_SELL,
+      timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_IOC,
+      size: '100',
+      postOnly: false,
+      reduceOnly: false,
+    };
+    createOrder(order);
+    testOrderSubmission(order);
+  });
+
+  it('successfully places limit buy order', () => {
+    // 7002-SORD-017
+    cy.mockVegaWalletTransaction();
+    const order: OrderSubmission = {
+      marketId: 'market-0',
+      type: Schema.OrderType.TYPE_LIMIT,
+      side: Schema.Side.SIDE_BUY,
+      timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
+      size: '100',
+      postOnly: false,
+      reduceOnly: false,
+      price: '200',
+    };
+    createOrder(order);
+    testOrderSubmission(order, { price: '20000000' });
+  });
+
+  it('successfully places limit sell order', () => {
+    cy.mockVegaWalletTransaction();
+    const order: OrderSubmission = {
+      marketId: 'market-0',
+      type: Schema.OrderType.TYPE_LIMIT,
+      side: Schema.Side.SIDE_SELL,
+      timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GFN,
+      size: '100',
+      postOnly: false,
+      reduceOnly: false,
+      price: '50000',
+    };
+    createOrder(order);
+    testOrderSubmission(order, { price: '5000000000' });
+  });
+
+  it('successfully places GTT limit buy order', () => {
+    cy.mockVegaWalletTransaction();
+    const expiresAt = new Date(Date.now() + 24 * 60 * 60 * 1000);
+    const order: OrderSubmission = {
+      marketId: 'market-0',
+      type: Schema.OrderType.TYPE_LIMIT,
+      side: Schema.Side.SIDE_SELL,
+      timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTT,
+      size: '100',
+      price: '1.00',
+      expiresAt: expiresAt.toISOString().substring(0, 16),
+      postOnly: false,
+      reduceOnly: false,
+    };
+
+    createOrder(order);
+    testOrderSubmission(order, {
+      price: '100000',
+      expiresAt:
+        new Date(order.expiresAt as string).getTime().toString() + '000000',
+      postOnly: false,
+      reduceOnly: false,
+    });
+  });
+});

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

@@ -33,7 +33,9 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
 
     it('must see the price unit', function () {
       // 7002-SORD-018
-      cy.getByTestId(orderPriceField).next().should('have.text', 'DAI');
+      cy.getByTestId(orderPriceField)
+        .siblings('label')
+        .should('have.text', 'Price (DAI)');
     });
 
     it('must see warning when placing an order with expiry date in past', () => {
@@ -62,7 +64,7 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
       cy.getByTestId(orderSizeField).clear().type('1');
       cy.getByTestId(orderPriceField).clear().type('1.123456');
       cy.getByTestId(placeOrderBtn).click();
-      cy.getByTestId('deal-ticket-error-message-price').should(
+      cy.getByTestId('deal-ticket-error-message-price-limit').should(
         'have.text',
         'Price accepts up to 5 decimal places'
       );
@@ -85,7 +87,7 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
       cy.getByTestId(orderSizeField).clear().type('1.234');
       // 7002-SORD-060
       cy.getByTestId(placeOrderBtn).should('be.enabled');
-      cy.getByTestId('deal-ticket-error-message-size').should(
+      cy.getByTestId('deal-ticket-error-message-size-market').should(
         'have.text',
         'Size must be whole numbers for this market'
       );
@@ -94,7 +96,7 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
     it('must warn if order size is set to 0', function () {
       cy.getByTestId(orderSizeField).clear().type('0');
       cy.getByTestId(placeOrderBtn).should('be.enabled');
-      cy.getByTestId('deal-ticket-error-message-size').should(
+      cy.getByTestId('deal-ticket-error-message-size-market').should(
         'have.text',
         'Size cannot be lower than 1'
       );

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

@@ -1,25 +1,59 @@
 import { aliasGQLQuery } from '@vegaprotocol/cypress';
-import { partyAssetsQuery } from '@vegaprotocol/mock';
+import { ledgerEntriesQuery } from '@vegaprotocol/mock';
 
 describe('Portfolio page', { tags: '@smoke' }, () => {
   beforeEach(() => {
-    cy.mockGQL((req) => {
-      aliasGQLQuery(req, 'PartyAssets', partyAssetsQuery());
-    });
     cy.mockTradingPage();
+    cy.mockGQL((req) => {
+      aliasGQLQuery(req, 'LedgerEntries', ledgerEntriesQuery());
+    });
     cy.mockSubscription();
     cy.setVegaWallet();
   });
   describe('Ledger entries', () => {
-    it('Download form should be properly rendered', () => {
-      // 7007-LEEN-001
+    it('List should be properly rendered', () => {
       cy.visit('/#/portfolio');
       cy.getByTestId('"Ledger entries"').click();
+      const headers = [
+        'Sender',
+        'Account type',
+        'Market',
+        'Receiver',
+        'Account type',
+        'Market',
+        'Transfer type',
+        'Quantity',
+        'Asset',
+        'Sender account balance',
+        'Receiver account balance',
+        'Vega time',
+      ];
       cy.getByTestId('tab-ledger-entries').within(($headers) => {
         cy.wrap($headers)
-          .getByTestId('ledger-download-button')
-          .should('be.visible');
+          .get('.ag-header-cell-text')
+          .each(($header, i) => {
+            cy.wrap($header).should('have.text', headers[i]);
+          });
       });
+      cy.get(
+        '[data-testid="tab-ledger-entries"] .ag-center-cols-container .ag-row'
+      ).should('have.length', ledgerEntriesQuery().ledgerEntries.edges.length);
+    });
+
+    it('account filters should be callable', () => {
+      cy.visit('/#/portfolio');
+      cy.getByTestId('"Ledger entries"').click();
+      cy.get('[role="columnheader"][col-id="fromAccountType"]').realHover();
+      cy.get(
+        '[role="columnheader"][col-id="fromAccountType"] .ag-header-cell-menu-button'
+      ).click();
+      cy.get('fieldset.ag-simple-filter-body-wrapper')
+        .should('be.visible')
+        .within((fields) => {
+          cy.wrap(fields).find('label').should('have.length', 18);
+        });
+      cy.getByTestId('"Ledger entries"').click();
+      cy.get('fieldset.ag-simple-filter-body-wrapper').should('not.exist');
     });
   });
 });

apps/trading/.env

@@ -12,8 +12,6 @@ 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
@@ -21,7 +19,6 @@ NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true
 # NX_ICEBERG_ORDERS
 # NX_PRODUCT_PERPETUALS
-NX_METAMASK_SNAPS=true
 
 NX_TENDERMINT_URL=https://tm.n01.stagnet1.vega.rocks
 NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n01.stagnet1.vega.xyz/websocket

apps/trading/.env.capsule

@@ -23,7 +23,6 @@ NX_SUCCESSOR_MARKETS=false
 NX_STOP_ORDERS=false
 # NX_ICEBERG_ORDERS
 # NX_PRODUCT_PERPETUALS
-NX_METAMASK_SNAPS=false
 
 NX_TENDERMINT_URL=http://localhost:26617
 NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26617/websocket

apps/trading/.env.devnet

@@ -21,7 +21,6 @@ NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true
 # NX_ICEBERG_ORDERS
 # NX_PRODUCT_PERPETUALS
-NX_METAMASK_SNAPS=true
 
 NX_TENDERMINT_URL=https://tm.be.devnet1.vega.xyz/
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.devnet1.vega.xyz/websocket

apps/trading/.env.mainnet

@@ -23,7 +23,6 @@ NX_SUCCESSOR_MARKETS=false
 NX_STOP_ORDERS=false
 # NX_ICEBERG_ORDERS
 # NX_PRODUCT_PERPETUALS
-NX_METAMASK_SNAPS=false
 
 NX_TENDERMINT_URL=https://be.vega.community
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.vega.community/websocket

apps/trading/.env.mainnet-mirror

@@ -23,7 +23,6 @@ NX_SUCCESSOR_MARKETS=false
 NX_STOP_ORDERS=false
 # NX_ICEBERG_ORDERS
 # NX_PRODUCT_PERPETUALS
-NX_METAMASK_SNAPS=false
 
 NX_TENDERMINT_URL=https://be.mainnet-mirror.vega.rocks
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.mainnet-mirror.vega.rocks/websocket

apps/trading/.env.stagnet1

@@ -21,4 +21,3 @@ NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true
 # NX_ICEBERG_ORDERS
 # NX_PRODUCT_PERPETUALS
-NX_METAMASK_SNAPS=true

apps/trading/.env.testnet

@@ -22,7 +22,6 @@ NX_SUCCESSOR_MARKETS=true
 NX_STOP_ORDERS=true
 NX_ICEBERG_ORDERS=true
 # NX_PRODUCT_PERPETUALS
-NX_METAMASK_SNAPS=false
 
 NX_TENDERMINT_URL=https://tm.be.testnet.vega.xyz
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.testnet.vega.xyz/websocket

apps/trading/.env.validators-testnet

@@ -23,7 +23,6 @@ NX_SUCCESSOR_MARKETS=false
 NX_STOP_ORDERS=false
 # NX_ICEBERG_ORDERS
 # NX_PRODUCT_PERPETUALS
-NX_METAMASK_SNAPS=false
 
 NX_TENDERMINT_URL=https://tm.be.validators-testnet.vega.rocks
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.validators-testnet.vega.xyz/websocket

apps/trading/components/app-loader/app-loader.tsx

@@ -1,7 +1,6 @@
 import type { InMemoryCacheConfig } from '@apollo/client';
 import {
   AppFailure,
-  DocsLinks,
   NetworkLoader,
   NodeGuard,
   useEnvironment,
@@ -18,32 +17,16 @@ export const DynamicLoader = dynamic(() => import('../preloader/preloader'), {
 });
 
 export const AppLoader = ({ children }: { children: ReactNode }) => {
-  const {
-    error,
-    VEGA_URL,
-    VEGA_ENV,
-    VEGA_WALLET_URL,
-    VEGA_EXPLORER_URL,
-    MAINTENANCE_PAGE,
-    MOZILLA_EXTENSION_URL,
-    CHROME_EXTENSION_URL,
-  } = useEnvironment();
+  const { error, VEGA_URL, MAINTENANCE_PAGE } = useEnvironment((store) => ({
+    error: store.error,
+    VEGA_URL: store.VEGA_URL,
+    MAINTENANCE_PAGE: store.MAINTENANCE_PAGE,
+  }));
 
   if (MAINTENANCE_PAGE) {
     return <MaintenancePage />;
   }
 
-  if (
-    !VEGA_URL ||
-    !VEGA_WALLET_URL ||
-    !VEGA_EXPLORER_URL ||
-    !CHROME_EXTENSION_URL ||
-    !MOZILLA_EXTENSION_URL ||
-    !DocsLinks
-  ) {
-    return null;
-  }
-
   return (
     <NetworkLoader
       cache={cacheConfig}
@@ -57,21 +40,7 @@ export const AppLoader = ({ children }: { children: ReactNode }) => {
         failure={<AppFailure title={t(`Node: ${VEGA_URL} is unsuitable`)} />}
       >
         <Web3Provider>
-          <VegaWalletProvider
-            config={{
-              network: VEGA_ENV,
-              vegaUrl: VEGA_URL,
-              vegaWalletServiceUrl: VEGA_WALLET_URL,
-              links: {
-                explorer: VEGA_EXPLORER_URL,
-                concepts: DocsLinks.VEGA_WALLET_CONCEPTS_URL,
-                chromeExtensionUrl: CHROME_EXTENSION_URL,
-                mozillaExtensionUrl: MOZILLA_EXTENSION_URL,
-              },
-            }}
-          >
-            {children}
-          </VegaWalletProvider>
+          <VegaWalletProvider>{children}</VegaWalletProvider>
         </Web3Provider>
       </NodeGuard>
     </NetworkLoader>

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

@@ -1,29 +1,22 @@
+import { useDataGridEvents } from '@vegaprotocol/datagrid';
 import { t } from '@vegaprotocol/i18n';
-import { LedgerExportForm } from '@vegaprotocol/ledger';
-import { Loader, Splash } from '@vegaprotocol/ui-toolkit';
+import { LedgerManager } from '@vegaprotocol/ledger';
+import { Splash } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import { useEnvironment } from '@vegaprotocol/environment';
-import type { PartyAssetFieldsFragment } from '@vegaprotocol/assets';
-import { usePartyAssetsQuery } from '@vegaprotocol/assets';
+import type { DataGridSlice } from '../../stores/datagrid-store-slice';
+import { createDataGridSlice } from '../../stores/datagrid-store-slice';
+import { create } from 'zustand';
+import { persist } from 'zustand/middleware';
 
 export const LedgerContainer = () => {
-  const VEGA_URL = useEnvironment((store) => store.VEGA_URL);
   const { pubKey } = useVegaWallet();
-  const { data, loading } = usePartyAssetsQuery({
-    variables: { partyId: pubKey || '' },
-    skip: !pubKey,
-  });
 
-  const assets = (data?.party?.accountsConnection?.edges ?? [])
-    .map<PartyAssetFieldsFragment>(
-      (item) => item?.node?.asset ?? ({} as PartyAssetFieldsFragment)
-    )
-    .reduce((aggr, item) => {
-      if ('id' in item && 'symbol' in item) {
-        aggr[item.id as string] = item.symbol as string;
-      }
-      return aggr;
-    }, {} as Record<string, string>);
+  const gridStore = useLedgerStore((store) => store.gridStore);
+  const updateGridStore = useLedgerStore((store) => store.updateGridStore);
+
+  const gridStoreCallbacks = useDataGridEvents(gridStore, (colState) => {
+    updateGridStore(colState);
+  });
 
   if (!pubKey) {
     return (
@@ -33,31 +26,11 @@ export const LedgerContainer = () => {
     );
   }
 
-  if (!VEGA_URL) {
-    return (
-      <Splash>
-        <p>{t('Environment not configured')}</p>
-      </Splash>
-    );
-  }
-
-  if (loading) {
-    return (
-      <div className="relative flex items-center justify-center w-full h-full">
-        <Loader />
-      </div>
-    );
-  }
-
-  if (!Object.keys(assets).length) {
-    return (
-      <Splash>
-        <p>{t('No ledger entries to export')}</p>
-      </Splash>
-    );
-  }
-
-  return (
-    <LedgerExportForm partyId={pubKey} vegaUrl={VEGA_URL} assets={assets} />
-  );
+  return <LedgerManager partyId={pubKey} gridProps={gridStoreCallbacks} />;
 };
+
+const useLedgerStore = create<DataGridSlice>()(
+  persist(createDataGridSlice, {
+    name: 'vega_ledger_store',
+  })
+);

apps/trading/components/sidebar/sidebar.spec.tsx

@@ -9,8 +9,7 @@ import {
 } from './sidebar';
 import { MemoryRouter, Route, Routes } from 'react-router-dom';
 import { VegaIconNames } from '@vegaprotocol/ui-toolkit';
-import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
-import { VegaWalletContext } from '@vegaprotocol/wallet';
+import { VegaWalletProvider } from '@vegaprotocol/wallet';
 
 jest.mock('../node-health', () => ({
   NodeHealthContainer: () => <span data-testid="node-health" />,
@@ -32,20 +31,16 @@ jest.mock('../welcome-dialog', () => ({
   GetStarted: () => <div data-testid="get-started" />,
 }));
 
-const walletContext = {
-  pubKeys: [{ publicKey: 'pubkey' }],
-} as VegaWalletContextShape;
-
 describe('Sidebar', () => {
   it.each(['/markets/all', '/portfolio'])(
     'does not render ticket and info',
     (path) => {
       render(
-        <VegaWalletContext.Provider value={walletContext}>
+        <VegaWalletProvider>
           <MemoryRouter initialEntries={[path]}>
             <Sidebar />
           </MemoryRouter>
-        </VegaWalletContext.Provider>
+        </VegaWalletProvider>
       );
 
       expect(screen.getByTestId(ViewType.ViewAs)).toBeInTheDocument();
@@ -63,11 +58,11 @@ describe('Sidebar', () => {
 
   it('renders ticket and info on market pages', () => {
     render(
-      <VegaWalletContext.Provider value={walletContext}>
+      <VegaWalletProvider>
         <MemoryRouter initialEntries={['/markets/ABC']}>
           <Sidebar />
         </MemoryRouter>
-      </VegaWalletContext.Provider>
+      </VegaWalletProvider>
     );
 
     expect(screen.getByTestId(ViewType.ViewAs)).toBeInTheDocument();
@@ -84,11 +79,11 @@ describe('Sidebar', () => {
 
   it('renders selected state', async () => {
     render(
-      <VegaWalletContext.Provider value={walletContext}>
+      <VegaWalletProvider>
         <MemoryRouter initialEntries={['/markets/ABC']}>
           <Sidebar />
         </MemoryRouter>
-      </VegaWalletContext.Provider>
+      </VegaWalletProvider>
     );
 
     const settingsButton = screen.getByTestId(ViewType.Settings);
@@ -112,13 +107,13 @@ describe('Sidebar', () => {
 describe('SidebarContent', () => {
   it('renders the correct content', () => {
     const { container } = render(
-      <VegaWalletContext.Provider value={walletContext}>
+      <VegaWalletProvider>
         <MemoryRouter initialEntries={['/markets/ABC']}>
           <Routes>
             <Route path="/markets/:marketId" element={<SidebarContent />} />
           </Routes>
         </MemoryRouter>
-      </VegaWalletContext.Provider>
+      </VegaWalletProvider>
     );
 
     expect(container).toBeEmptyDOMElement();
@@ -138,13 +133,13 @@ describe('SidebarContent', () => {
 
   it('closes sidebar if market id is required but not present', () => {
     const { container } = render(
-      <VegaWalletContext.Provider value={walletContext}>
+      <VegaWalletProvider>
         <MemoryRouter initialEntries={['/portfolio']}>
           <Routes>
             <Route path="/portfolio" element={<SidebarContent />} />
           </Routes>
         </MemoryRouter>
-      </VegaWalletContext.Provider>
+      </VegaWalletProvider>
     );
 
     act(() => {

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

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

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

@@ -29,7 +29,6 @@ interface Props {
 }
 
 const GetStartedButton = ({ step }: { step: OnboardingStep }) => {
-  const { CHROME_EXTENSION_URL, MOZILLA_EXTENSION_URL } = useEnvironment();
   const navigate = useNavigate();
   const [, setOnboardingViewed] = useLocalStorage(
     constants.ONBOARDING_VIEWED_KEY
@@ -47,13 +46,7 @@ const GetStartedButton = ({ step }: { step: OnboardingStep }) => {
     openVegaWalletDialog();
   };
   if (step === OnboardingStep.ONBOARDING_WALLET_STEP) {
-    return (
-      <GetWalletButton
-        className="justify-between"
-        chromeExtensionUrl={CHROME_EXTENSION_URL}
-        mozillaExtensionUrl={MOZILLA_EXTENSION_URL}
-      />
-    );
+    return <GetWalletButton className="justify-between" />;
   } else if (step === OnboardingStep.ONBOARDING_CONNECT_STEP) {
     buttonText = t('Connect');
   } else if (step === OnboardingStep.ONBOARDING_DEPOSIT_STEP) {
@@ -112,29 +105,38 @@ export const GetStarted = ({ lead }: Props) => {
         {lead && <h2>{lead}</h2>}
         <h3 className="text-lg">{t('Get started')}</h3>
         <div>
-          <ul className="list-none">
-            <Step
-              step={1}
-              text={t('Get a Vega wallet')}
-              complete={currentStep > OnboardingStep.ONBOARDING_WALLET_STEP}
-            />
-            <Step
-              step={2}
-              text={t('Connect')}
-              complete={Boolean(
-                currentStep > OnboardingStep.ONBOARDING_CONNECT_STEP || pubKey
-              )}
-            />
-            <Step
-              step={3}
-              text={t('Deposit funds')}
-              complete={currentStep > OnboardingStep.ONBOARDING_DEPOSIT_STEP}
-            />
-            <Step
-              step={4}
-              text={t('Open a position')}
-              complete={currentStep > OnboardingStep.ONBOARDING_ORDER_STEP}
-            />
+          <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>
@@ -163,7 +165,7 @@ export const GetStarted = ({ lead }: Props) => {
   if (!pubKey) {
     return (
       <div className={wrapperClasses}>
-        <p className="mb-1 text-sm">
+        <p className="text-sm mb-1">
           You need a{' '}
           <ExternalLink href="https://vega.xyz/wallet">
             Vega wallet
@@ -184,34 +186,3 @@ export const GetStarted = ({ lead }: Props) => {
 
   return null;
 };
-
-const Step = ({
-  step,
-  text,
-  complete,
-}: {
-  step: number;
-  text: string;
-  complete: boolean;
-}) => {
-  return (
-    <li
-      className={classNames('flex', {
-        'text-vega-clight-200 dark:text-vega-cdark-200': complete,
-      })}
-    >
-      <div className="flex justify-center w-5">
-        {complete ? <Tick /> : <span>{step}.</span>}
-      </div>
-      <div className="ml-1">{text}</div>
-    </li>
-  );
-};
-
-const Tick = () => {
-  return (
-    <span className="relative right-[2px]">
-      <VegaIcon name={VegaIconNames.TICK} size={18} />
-    </span>
-  );
-};

apps/trading/lib/vega-connectors.ts

@@ -1,10 +1,7 @@
-import { FLAGS } from '@vegaprotocol/environment';
 import {
   JsonRpcConnector,
   ViewConnector,
   InjectedConnector,
-  SnapConnector,
-  DEFAULT_SNAP_ID,
 } from '@vegaprotocol/wallet';
 
 export const jsonRpc = new JsonRpcConnector();
@@ -18,13 +15,8 @@ if (typeof window !== 'undefined') {
   view = new ViewConnector();
 }
 
-export const snap = FLAGS.METAMASK_SNAPS
-  ? new SnapConnector(DEFAULT_SNAP_ID)
-  : undefined;
-
 export const Connectors = {
   injected,
   jsonRpc,
   view,
-  snap,
 };

apps/trading/pages/styles.css

@@ -15,10 +15,6 @@ body,
   @apply h-full;
 }
 
-.font-mono {
-  @apply tracking-tighter;
-}
-
 .text-default {
   @apply text-vega-clight-50 dark:text-vega-cdark-50;
 }
@@ -64,10 +60,6 @@ html.dark {
 
 html [data-theme='dark'],
 html [data-theme='light'] {
-  /* fonts */
-  --pennant-font-family-base: theme(fontFamily.alpha);
-  --pennant-font-family-monospace: theme(fontFamily.mono);
-
   /* sell candles only use stroke as the candle is solid (without border) */
   --pennant-color-sell-stroke: theme(colors.market.red.DEFAULT);
 
@@ -155,7 +147,7 @@ html [data-theme='dark'] {
 }
 
 .vega-ag-grid .ag-header-row {
-  @apply font-normal font-alpha;
+  @apply font-alpha font-normal;
 }
 
 /* Light variables */
@@ -217,15 +209,3 @@ html [data-theme='dark'] {
   box-shadow: inset 0 0 6px rgb(0 0 0 / 30%);
   background-color: #999;
 }
-
-/* Chrome, Safari, Edge, Opera */
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
-  -webkit-appearance: none;
-  margin: 0;
-}
-
-/* Firefox */
-input[type='number'] {
-  -moz-appearance: textfield;
-}

libs/assets/src/lib/Assets.graphql

@@ -24,26 +24,3 @@ query Assets {
     }
   }
 }
-
-fragment PartyAssetFields on Asset {
-  id
-  name
-  symbol
-  status
-}
-
-query PartyAssets($partyId: ID!) {
-  party(id: $partyId) {
-    id
-    accountsConnection {
-      edges {
-        node {
-          type
-          asset {
-            ...PartyAssetFields
-          }
-        }
-      }
-    }
-  }
-}

libs/assets/src/lib/__generated__/Assets.ts

@@ -10,15 +10,6 @@ export type AssetsQueryVariables = Types.Exact<{ [key: string]: never; }>;
 
 export type AssetsQuery = { __typename?: 'Query', assetsConnection?: { __typename?: 'AssetsConnection', edges?: Array<{ __typename?: 'AssetEdge', node: { __typename?: 'Asset', id: string, name: string, symbol: string, decimals: number, quantum: string, status: Types.AssetStatus, source: { __typename: 'BuiltinAsset' } | { __typename: 'ERC20', contractAddress: string, lifetimeLimit: string, withdrawThreshold: string } } } | null> | null } | null };
 
-export type PartyAssetFieldsFragment = { __typename?: 'Asset', id: string, name: string, symbol: string, status: Types.AssetStatus };
-
-export type PartyAssetsQueryVariables = Types.Exact<{
-  partyId: Types.Scalars['ID'];
-}>;
-
-
-export type PartyAssetsQuery = { __typename?: 'Query', party?: { __typename?: 'Party', id: string, accountsConnection?: { __typename?: 'AccountsConnection', edges?: Array<{ __typename?: 'AccountEdge', node: { __typename?: 'AccountBalance', type: Types.AccountType, asset: { __typename?: 'Asset', id: string, name: string, symbol: string, status: Types.AssetStatus } } } | null> | null } | null } | null };
-
 export const AssetListFieldsFragmentDoc = gql`
     fragment AssetListFields on Asset {
   id
@@ -37,14 +28,6 @@ export const AssetListFieldsFragmentDoc = gql`
   status
 }
     `;
-export const PartyAssetFieldsFragmentDoc = gql`
-    fragment PartyAssetFields on Asset {
-  id
-  name
-  symbol
-  status
-}
-    `;
 export const AssetsDocument = gql`
     query Assets {
   assetsConnection {
@@ -82,49 +65,4 @@ export function useAssetsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<Ass
         }
 export type AssetsQueryHookResult = ReturnType<typeof useAssetsQuery>;
 export type AssetsLazyQueryHookResult = ReturnType<typeof useAssetsLazyQuery>;
-export type AssetsQueryResult = Apollo.QueryResult<AssetsQuery, AssetsQueryVariables>;
-export const PartyAssetsDocument = gql`
-    query PartyAssets($partyId: ID!) {
-  party(id: $partyId) {
-    id
-    accountsConnection {
-      edges {
-        node {
-          type
-          asset {
-            ...PartyAssetFields
-          }
-        }
-      }
-    }
-  }
-}
-    ${PartyAssetFieldsFragmentDoc}`;
-
-/**
- * __usePartyAssetsQuery__
- *
- * To run a query within a React component, call `usePartyAssetsQuery` and pass it any options that fit your needs.
- * When your component renders, `usePartyAssetsQuery` returns an object from Apollo Client that contains loading, error, and data properties
- * you can use to render your UI.
- *
- * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
- *
- * @example
- * const { data, loading, error } = usePartyAssetsQuery({
- *   variables: {
- *      partyId: // value for 'partyId'
- *   },
- * });
- */
-export function usePartyAssetsQuery(baseOptions: Apollo.QueryHookOptions<PartyAssetsQuery, PartyAssetsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<PartyAssetsQuery, PartyAssetsQueryVariables>(PartyAssetsDocument, options);
-      }
-export function usePartyAssetsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<PartyAssetsQuery, PartyAssetsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<PartyAssetsQuery, PartyAssetsQueryVariables>(PartyAssetsDocument, options);
-        }
-export type PartyAssetsQueryHookResult = ReturnType<typeof usePartyAssetsQuery>;
-export type PartyAssetsLazyQueryHookResult = ReturnType<typeof usePartyAssetsLazyQuery>;
-export type PartyAssetsQueryResult = Apollo.QueryResult<PartyAssetsQuery, PartyAssetsQueryVariables>;
+export type AssetsQueryResult = Apollo.QueryResult<AssetsQuery, AssetsQueryVariables>;

libs/assets/src/lib/party-assets.mock.ts

@@ -1,47 +0,0 @@
-import merge from 'lodash/merge';
-import type { PartyAssetsQuery } from './__generated__/Assets';
-import * as Types from '@vegaprotocol/types';
-import type { PartialDeep } from 'type-fest';
-
-export const partyAssetsQuery = (
-  override?: PartialDeep<PartyAssetsQuery>
-): PartyAssetsQuery => {
-  const defaultAssets: PartyAssetsQuery = {
-    party: {
-      __typename: 'Party',
-      id: 'partyId',
-      accountsConnection: {
-        edges: partyAccountFields.map((node) => ({
-          __typename: 'AccountEdge',
-          node,
-        })),
-      },
-    },
-  };
-  return merge(defaultAssets, override);
-};
-
-const partyAccountFields = [
-  {
-    __typename: 'AccountBalance',
-    type: Types.AccountType.ACCOUNT_TYPE_MARGIN,
-    asset: {
-      __typename: 'Asset',
-      id: 'asset-id',
-      symbol: 'tEURO',
-      name: 'Euro',
-      status: Types.AssetStatus.STATUS_ENABLED,
-    },
-  },
-  {
-    __typename: 'AccountBalance',
-    type: Types.AccountType.ACCOUNT_TYPE_MARGIN,
-    asset: {
-      __typename: 'Asset',
-      id: 'asset-id-2',
-      symbol: 'tDAI',
-      name: 'DAI',
-      status: Types.AssetStatus.STATUS_ENABLED,
-    },
-  },
-] as const;

libs/cypress/mock.ts

@@ -2,7 +2,6 @@
 export * from '../accounts/src/lib/accounts.mock';
 export * from '../assets/src/lib/asset.mock';
 export * from '../assets/src/lib/assets.mock';
-export * from '../assets/src/lib/party-assets.mock';
 export * from '../candles-chart/src/lib/candles.mock';
 export * from '../candles-chart/src/lib/chart.mock';
 export * from '../deal-ticket/src/hooks/estimate-order.mock';
@@ -11,6 +10,7 @@ export * from '../environment/src/utils/node.mock';
 export * from '../environment/src/components/node-guard/node-guard.mock';
 export * from '../fills/src/lib/fills.mock';
 export * from '../proposals/src/lib/proposals-data-provider/proposals.mock';
+export * from '../ledger/src/lib/ledger-entries.mock';
 export * from '../market-depth/src/lib/market-depth.mock';
 export * from '../markets/src/lib/components/market-info/market-info.mock';
 export * from '../markets/src/lib/market-candles.mock';

libs/cypress/src/lib/capsule/propose-market.ts

@@ -153,10 +153,8 @@ export function waitForProposal(id: string): Promise<{ id: string }> {
       try {
         const res = await getProposal(id);
         if (
-          (res.proposal !== null &&
-            res.proposal.state === Schema.ProposalState.STATE_OPEN) ||
-          res.proposal.state ===
-            Schema.ProposalState.STATE_WAITING_FOR_NODE_VOTE
+          res.proposal !== null &&
+          res.proposal.state === Schema.ProposalState.STATE_OPEN
         ) {
           clearInterval(interval);
           resolve(res.proposal);

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

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

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

@@ -0,0 +1,25 @@
+import { t } from '@vegaprotocol/i18n';
+import { Side } from '@vegaprotocol/types';
+import classNames from 'classnames';
+
+interface Props {
+  side: Side;
+  label?: string;
+}
+
+export const DealTicketButton = ({ side, label }: Props) => {
+  const buttonClasses = classNames(
+    'px-10 py-2 uppercase rounded-md text-white w-full',
+    {
+      'bg-market-red': side === Side.SIDE_SELL,
+      'bg-market-green-550': side === Side.SIDE_BUY,
+    }
+  );
+  return (
+    <div className="mb-2">
+      <button type="submit" data-testid="place-order" className={buttonClasses}>
+        {label || t('Place order')}
+      </button>
+    </div>
+  );
+};

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

@@ -1,4 +1,7 @@
 import { useCallback, useState } from 'react';
+import { Tooltip } from '@vegaprotocol/ui-toolkit';
+import classnames from 'classnames';
+import type { ReactNode } from 'react';
 import { t } from '@vegaprotocol/i18n';
 import { FeesBreakdown } from '@vegaprotocol/markets';
 import type { OrderSubmissionBody } from '@vegaprotocol/wallet';
@@ -13,6 +16,7 @@ import { marketMarginDataProvider } from '@vegaprotocol/accounts';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 
 import {
+  NOTIONAL_SIZE_TOOLTIP_TEXT,
   MARGIN_DIFF_TOOLTIP_TEXT,
   DEDUCTION_FROM_COLLATERAL_TOOLTIP_TEXT,
   TOTAL_MARGIN_AVAILABLE,
@@ -21,54 +25,114 @@ import {
   MARGIN_ACCOUNT_TOOLTIP_TEXT,
 } from '../../constants';
 import { useEstimateFees } from '../../hooks';
-import { KeyValue } from './key-value';
 
 const emptyValue = '-';
 
+export interface DealTicketFeeDetailPros {
+  label: string;
+  value?: string | null | undefined;
+  symbol: string;
+  indent?: boolean | undefined;
+  labelDescription?: ReactNode;
+  formattedValue?: string;
+  onClick?: () => void;
+}
+
+export const DealTicketFeeDetail = ({
+  label,
+  value,
+  labelDescription,
+  symbol,
+  indent,
+  onClick,
+  formattedValue,
+}: DealTicketFeeDetailPros) => {
+  const displayValue = `${formattedValue ?? '-'} ${symbol || ''}`;
+  const valueElement = onClick ? (
+    <button onClick={onClick} className="text-muted">
+      {displayValue}
+    </button>
+  ) : (
+    <div className="text-muted">{displayValue}</div>
+  );
+  return (
+    <div
+      data-testid={
+        'deal-ticket-fee-' + label.toLocaleLowerCase().replace(/\s/g, '-')
+      }
+      key={typeof label === 'string' ? label : 'value-dropdown'}
+      className={classnames(
+        'text-xs mt-2 flex justify-between items-center gap-4 flex-wrap',
+        { 'ml-2': indent }
+      )}
+    >
+      <Tooltip description={labelDescription}>
+        <div>{label}</div>
+      </Tooltip>
+      <Tooltip description={`${value ?? '-'} ${symbol || ''}`}>
+        {valueElement}
+      </Tooltip>
+    </div>
+  );
+};
+
 export interface DealTicketFeeDetailsProps {
   assetSymbol: string;
   order: OrderSubmissionBody['orderSubmission'];
   market: Market;
+  notionalSize: string | null;
 }
 
 export const DealTicketFeeDetails = ({
   assetSymbol,
   order,
   market,
+  notionalSize,
 }: DealTicketFeeDetailsProps) => {
   const feeEstimate = useEstimateFees(order);
   const { settlementAsset: asset } =
     market.tradableInstrument.instrument.product;
   const { decimals: assetDecimals, quantum } = asset;
+  const marketDecimals = market.decimalPlaces;
+  const quoteName = market.tradableInstrument.instrument.product.quoteName;
 
   return (
-    <KeyValue
-      label={t('Fees')}
-      value={
-        feeEstimate?.totalFeeAmount &&
-        `~${formatValue(feeEstimate?.totalFeeAmount, assetDecimals)}`
-      }
-      formattedValue={
-        feeEstimate?.totalFeeAmount &&
-        `~${formatValue(feeEstimate?.totalFeeAmount, assetDecimals, quantum)}`
-      }
-      labelDescription={
-        <>
-          <span>
-            {t(
-              `An estimate of the most you would be expected to pay in fees, in the market's settlement asset ${assetSymbol}.`
-            )}
-          </span>
-          <FeesBreakdown
-            fees={feeEstimate?.fees}
-            feeFactors={market.fees.factors}
-            symbol={assetSymbol}
-            decimals={assetDecimals}
-          />
-        </>
-      }
-      symbol={assetSymbol}
-    />
+    <>
+      <DealTicketFeeDetail
+        label={t('Notional')}
+        value={formatValue(notionalSize, marketDecimals)}
+        formattedValue={formatValue(notionalSize, marketDecimals)}
+        symbol={quoteName}
+        labelDescription={NOTIONAL_SIZE_TOOLTIP_TEXT(quoteName)}
+      />
+      <DealTicketFeeDetail
+        label={t('Fees')}
+        value={
+          feeEstimate?.totalFeeAmount &&
+          `~${formatValue(feeEstimate?.totalFeeAmount, assetDecimals)}`
+        }
+        formattedValue={
+          feeEstimate?.totalFeeAmount &&
+          `~${formatValue(feeEstimate?.totalFeeAmount, assetDecimals, quantum)}`
+        }
+        labelDescription={
+          <>
+            <span>
+              {t(
+                `An estimate of the most you would be expected to pay in fees, in the market's settlement asset ${assetSymbol}.`
+              )}
+            </span>
+            <FeesBreakdown
+              fees={feeEstimate?.fees}
+              feeFactors={market.fees.factors}
+              symbol={assetSymbol}
+              decimals={assetDecimals}
+            />
+          </>
+        }
+        symbol={assetSymbol}
+      />
+    </>
   );
 };
 
@@ -145,7 +209,7 @@ export const DealTicketMarginDetails = ({
       BigInt(marginAccountBalance);
 
     deductionFromCollateral = (
-      <KeyValue
+      <DealTicketFeeDetail
         indent
         label={t('Deduction from collateral')}
         value={formatRange(
@@ -172,7 +236,7 @@ export const DealTicketMarginDetails = ({
       />
     );
     projectedMargin = (
-      <KeyValue
+      <DealTicketFeeDetail
         label={t('Projected margin')}
         value={formatRange(
           marginEstimate?.bestCase.initialLevel,
@@ -244,7 +308,7 @@ export const DealTicketMarginDetails = ({
 
   return (
     <>
-      <KeyValue
+      <DealTicketFeeDetail
         label={t('Margin required')}
         value={formatRange(
           marginRequiredBestCase,
@@ -260,7 +324,7 @@ export const DealTicketMarginDetails = ({
         labelDescription={MARGIN_DIFF_TOOLTIP_TEXT(assetSymbol)}
         symbol={assetSymbol}
       />
-      <KeyValue
+      <DealTicketFeeDetail
         label={t('Total margin available')}
         indent
         value={formatValue(totalMarginAvailable, assetDecimals)}
@@ -278,7 +342,7 @@ export const DealTicketMarginDetails = ({
         )}
       />
       {deductionFromCollateral}
-      <KeyValue
+      <DealTicketFeeDetail
         label={t('Current margin allocation')}
         indent
         onClick={
@@ -294,7 +358,7 @@ export const DealTicketMarginDetails = ({
         )}
       />
       {projectedMargin}
-      <KeyValue
+      <DealTicketFeeDetail
         label={t('Liquidation price estimate')}
         value={liquidationPriceEstimate}
         formattedValue={liquidationPriceEstimate}

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

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

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

@@ -0,0 +1,102 @@
+import {
+  addDecimalsFormatNumber,
+  toDecimal,
+  validateAmount,
+} from '@vegaprotocol/utils';
+import { t } from '@vegaprotocol/i18n';
+import {
+  TradingInput,
+  TradingInputError,
+  Tooltip,
+} from '@vegaprotocol/ui-toolkit';
+import { isMarketInAuction } from '@vegaprotocol/markets';
+import type { DealTicketAmountProps } from './deal-ticket-amount';
+import { Controller } from 'react-hook-form';
+import classNames from 'classnames';
+
+export type DealTicketMarketAmountProps = Omit<DealTicketAmountProps, 'type'>;
+
+export const DealTicketMarketAmount = ({
+  control,
+  market,
+  marketData,
+  marketPrice,
+  sizeError,
+}: DealTicketMarketAmountProps) => {
+  const quoteName = market.tradableInstrument.instrument.product.quoteName;
+  const sizeStep = toDecimal(market?.positionDecimalPlaces);
+  const price = marketPrice;
+
+  const priceFormatted = price
+    ? addDecimalsFormatNumber(price, market.decimalPlaces)
+    : undefined;
+
+  const inAuction = isMarketInAuction(marketData.marketTradingMode);
+
+  return (
+    <div className="mb-2">
+      <div className="flex items-start gap-4">
+        <div className="flex-1">
+          <div className="mb-2 text-xs">{t('Size')}</div>
+          <Controller
+            name="size"
+            control={control}
+            rules={{
+              required: t('You need to provide a size'),
+              min: {
+                value: sizeStep,
+                message: t('Size cannot be lower than ' + sizeStep),
+              },
+              validate: validateAmount(sizeStep, 'Size'),
+            }}
+            render={({ field, fieldState }) => (
+              <TradingInput
+                id="input-order-size-market"
+                className="w-full"
+                type="number"
+                step={sizeStep}
+                min={sizeStep}
+                onWheel={(e) => e.currentTarget.blur()}
+                data-testid="order-size"
+                hasError={!!fieldState.error}
+                {...field}
+              />
+            )}
+          />
+        </div>
+        <div className="pt-5 leading-10">@</div>
+        <div className="flex-1 text-sm text-right">
+          {inAuction && (
+            <Tooltip
+              description={t(
+                'This market is in auction. The uncrossing price is an indication of what the price is expected to be when the auction ends.'
+              )}
+            >
+              <div className="mb-2">{t(`Indicative price`)}</div>
+            </Tooltip>
+          )}
+          <div
+            data-testid="last-price"
+            className={classNames('leading-10', { 'pt-5': !inAuction })}
+          >
+            {priceFormatted && quoteName ? (
+              <>
+                ~{priceFormatted} {quoteName}
+              </>
+            ) : (
+              '-'
+            )}
+          </div>
+        </div>
+      </div>
+      {sizeError && (
+        <TradingInputError
+          intent="danger"
+          testId="deal-ticket-error-message-size-market"
+        >
+          {sizeError}
+        </TradingInputError>
+      )}
+    </div>
+  );
+};

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

@@ -32,7 +32,7 @@ export const DealTicketSizeIceberg = ({
   const renderPeakSizeError = () => {
     if (peakSizeError) {
       return (
-        <TradingInputError testId="deal-ticket-peak-error-message">
+        <TradingInputError testId="deal-ticket-peak-error-message-size-limit">
           {peakSizeError}
         </TradingInputError>
       );
@@ -44,7 +44,7 @@ export const DealTicketSizeIceberg = ({
   const renderMinimumSizeError = () => {
     if (minimumVisibleSizeError) {
       return (
-        <TradingInputError testId="deal-ticket-minimum-error-message">
+        <TradingInputError testId="deal-ticket-minimum-error-message-size-limit">
           {minimumVisibleSizeError}
         </TradingInputError>
       );

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

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { VegaWalletContext } from '@vegaprotocol/wallet';
-import { fireEvent, render, screen, waitFor } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { generateMarket } from '../../test-helpers';
 import { StopOrder } from './deal-ticket-stop-order';
@@ -12,7 +12,6 @@ import {
   useDealTicketFormValues,
 } from '../../hooks/use-form-values';
 import type { FeatureFlags } from '@vegaprotocol/environment';
-import { formatForInput } from '@vegaprotocol/utils';
 
 jest.mock('zustand');
 jest.mock('./deal-ticket-fee-details', () => ({
@@ -58,7 +57,7 @@ const orderSideBuy = 'order-side-SIDE_BUY';
 const orderSideSell = 'order-side-SIDE_SELL';
 
 const triggerDirectionRisesAbove = 'triggerDirection-risesAbove';
-const triggerDirectionFallsBelow = 'triggerDirection-fallsBelow';
+// const triggerDirectionFallsBelow = 'triggerDirection-fallsBelow';
 
 const expiryStrategySubmit = 'expiryStrategy-submit';
 const expiryStrategyCancel = 'expiryStrategy-cancel';
@@ -66,7 +65,6 @@ const expiryStrategyCancel = 'expiryStrategy-cancel';
 const triggerTypePrice = 'triggerType-price';
 const triggerTypeTrailingPercentOffset = 'triggerType-trailingPercentOffset';
 
-const oco = 'oco';
 const expire = 'expire';
 const datePicker = 'date-picker-field';
 const timeInForce = 'order-tif';
@@ -74,12 +72,9 @@ const timeInForce = 'order-tif';
 const sizeErrorMessage = 'stop-order-error-message-size';
 const priceErrorMessage = 'stop-order-error-message-price';
 const triggerPriceErrorMessage = 'stop-order-error-message-trigger-price';
-const triggerPriceWarningMessage = 'stop-order-warning-message-trigger-price';
 const triggerTrailingPercentOffsetErrorMessage =
   'stop-order-error-message-trigger-trailing-percent-offset';
 
-const ocoPostfix = (id: string, postfix = true) => (postfix ? `${id}-oco` : id);
-
 describe('StopOrder', () => {
   beforeEach(() => {
     localStorage.clear();
@@ -111,7 +106,6 @@ describe('StopOrder', () => {
       'checked'
     );
     expect(screen.getByTestId(expire).dataset.state).toEqual('unchecked');
-    expect(screen.getByTestId(oco).dataset.state).toEqual('unchecked');
     await userEvent.click(screen.getByTestId(expire));
     await waitFor(() => {
       expect(screen.getByTestId(expiryStrategySubmit).dataset.state).toEqual(
@@ -120,30 +114,12 @@ describe('StopOrder', () => {
     });
   });
 
-  it('calculate notional for market limit', async () => {
-    render(generateJsx());
-    await userEvent.type(screen.getByTestId(sizeInput), '10');
-    await userEvent.type(screen.getByTestId(priceInput), '10');
-    expect(screen.getByTestId('deal-ticket-fee-notional')).toHaveTextContent(
-      'Notional100.00 BTC'
-    );
-  });
-
-  it('calculates notional for limit order', async () => {
+  it('should display trigger price as price for market type order', async () => {
     render(generateJsx());
     await userEvent.click(screen.getByTestId(orderTypeTrigger));
     await userEvent.click(screen.getByTestId(orderTypeMarket));
-    await userEvent.type(screen.getByTestId(sizeInput), '10');
-    // price trigger is selected but it's empty, calculate base on size and marketPrice prop
-    expect(screen.getByTestId('deal-ticket-fee-notional')).toHaveTextContent(
-      'Notional20.00 BTC'
-    );
-
-    await userEvent.type(screen.getByTestId(triggerPriceInput), '3');
-    // calculate base on size and price trigger
-    expect(screen.getByTestId('deal-ticket-fee-notional')).toHaveTextContent(
-      'Notional30.00 BTC'
-    );
+    await userEvent.type(screen.getByTestId(triggerPriceInput), '10');
+    expect(screen.getByTestId('price')).toHaveTextContent('10.0');
   });
 
   it('should use local storage state for initial values', async () => {
@@ -156,11 +132,6 @@ describe('StopOrder', () => {
       expire: true,
       expiryStrategy: Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_CANCELS,
       expiresAt: '2023-07-27T16:43:27.000',
-      oco: true,
-      ocoType: Schema.OrderType.TYPE_LIMIT,
-      ocoSize: '0.2',
-      ocoPrice: '300.23',
-      ocoTimeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_FOK,
     };
 
     useDealTicketFormValues.setState({
@@ -179,22 +150,10 @@ describe('StopOrder', () => {
     expect(screen.getByTestId(sizeInput)).toHaveDisplayValue(
       values.size as string
     );
-    expect(screen.getByTestId(timeInForce)).toHaveValue(values.timeInForce);
+    expect(screen.getByTestId('order-tif')).toHaveValue(values.timeInForce);
     expect(screen.getByTestId(priceInput)).toHaveDisplayValue(
       values.price as string
     );
-
-    expect(screen.getByTestId(ocoPostfix(sizeInput))).toHaveDisplayValue(
-      values.ocoSize as string
-    );
-    expect(screen.getByTestId(ocoPostfix(timeInForce))).toHaveValue(
-      values.ocoTimeInForce
-    );
-    expect(screen.getByTestId(ocoPostfix(priceInput))).toHaveDisplayValue(
-      values.ocoPrice as string
-    );
-    expect(screen.getByTestId('ocoTypeLimit').dataset.state).toEqual('checked');
-
     expect(screen.getByTestId(expire).dataset.state).toEqual('checked');
     expect(screen.getByTestId(expiryStrategyCancel).dataset.state).toEqual(
       'checked'
@@ -202,9 +161,6 @@ describe('StopOrder', () => {
     expect(screen.getByTestId(datePicker)).toHaveDisplayValue(
       values.expiresAt as string
     );
-
-    await userEvent.click(screen.getByTestId(orderTypeMarket));
-    expect(screen.getByTestId(oco).dataset.state).toEqual('unchecked');
   });
 
   it('does not submit if no wallet connected', async () => {
@@ -225,239 +181,138 @@ describe('StopOrder', () => {
     expect(submit).toBeCalled();
   });
 
-  it.each([
-    { fieldName: 'size', ocoValue: false },
-    { fieldName: 'ocoSize', ocoValue: true },
-  ])('validates $fieldName field', async ({ ocoValue }) => {
+  it('validates size field', async () => {
     render(generateJsx());
-    if (ocoValue) {
-      await userEvent.click(screen.getByTestId(oco));
-    }
+
     await userEvent.click(screen.getByTestId(submitButton));
-    const getByTestId = (id: string) =>
-      screen.getByTestId(ocoPostfix(id, ocoValue));
-    const queryByTestId = (id: string) =>
-      screen.queryByTestId(ocoPostfix(id, ocoValue));
+
     // default value should be invalid
-    expect(getByTestId(sizeErrorMessage)).toBeInTheDocument();
+    expect(screen.getByTestId(sizeErrorMessage)).toBeInTheDocument();
     // to small value should be invalid
-    await userEvent.type(getByTestId(sizeInput), '0.01');
-    expect(getByTestId(sizeErrorMessage)).toBeInTheDocument();
+    await userEvent.type(screen.getByTestId(sizeInput), '0.01');
+    expect(screen.getByTestId(sizeErrorMessage)).toBeInTheDocument();
 
     // clear and fill using valid value
-    await userEvent.clear(getByTestId(sizeInput));
-    await userEvent.type(getByTestId(sizeInput), '0.1');
-    expect(queryByTestId(sizeErrorMessage)).toBeNull();
+    await userEvent.clear(screen.getByTestId(sizeInput));
+    await userEvent.type(screen.getByTestId(sizeInput), '0.1');
+    expect(screen.queryByTestId(sizeErrorMessage)).toBeNull();
   });
 
-  it.each([
-    { fieldName: 'price', ocoValue: false },
-    { fieldName: 'ocoPrice', ocoValue: true },
-  ])('validates $fieldName field', async ({ ocoValue }) => {
+  it('validates price field', async () => {
     render(generateJsx());
-    if (ocoValue) {
-      await userEvent.click(screen.getByTestId(oco));
-    }
+
     await userEvent.click(screen.getByTestId(submitButton));
-
-    const getByTestId = (id: string) =>
-      screen.getByTestId(ocoPostfix(id, ocoValue));
-    const queryByTestId = (id: string) =>
-      screen.queryByTestId(ocoPostfix(id, ocoValue));
-
-    expect(getByTestId(priceErrorMessage)).toBeInTheDocument();
-    await userEvent.type(getByTestId(priceInput), '0.001');
-    expect(getByTestId(priceErrorMessage)).toBeInTheDocument();
+    // price error message should not show if size has error
+    expect(screen.queryByTestId(priceErrorMessage)).toBeNull();
+    await userEvent.type(screen.getByTestId(sizeInput), '0.1');
+    expect(screen.getByTestId(priceErrorMessage)).toBeInTheDocument();
+    await userEvent.type(screen.getByTestId(priceInput), '0.001');
+    expect(screen.getByTestId(priceErrorMessage)).toBeInTheDocument();
 
     // switch to market order type error should disappear
     await userEvent.click(screen.getByTestId(orderTypeTrigger));
     await userEvent.click(screen.getByTestId(orderTypeMarket));
     await userEvent.click(screen.getByTestId(submitButton));
-    expect(queryByTestId(priceErrorMessage)).toBeNull();
+    expect(screen.queryByTestId(priceErrorMessage)).toBeNull();
 
     // switch back to limit type
     await userEvent.click(screen.getByTestId(orderTypeTrigger));
     await userEvent.click(screen.getByTestId(orderTypeLimit));
     await userEvent.click(screen.getByTestId(submitButton));
-    expect(getByTestId(priceErrorMessage)).toBeInTheDocument();
+    expect(screen.getByTestId(priceErrorMessage)).toBeInTheDocument();
 
     // to small value should be invalid
-    await userEvent.type(getByTestId(priceInput), '0.001');
-    expect(getByTestId(priceErrorMessage)).toBeInTheDocument();
+    await userEvent.type(screen.getByTestId(priceInput), '0.001');
+    expect(screen.getByTestId(priceErrorMessage)).toBeInTheDocument();
 
     // clear and fill using valid value
-    await userEvent.clear(getByTestId(priceInput));
-    await userEvent.type(getByTestId(priceInput), '0.01');
-    expect(queryByTestId(priceErrorMessage)).toBeNull();
+    await userEvent.clear(screen.getByTestId(priceInput));
+    await userEvent.type(screen.getByTestId(priceInput), '0.01');
+    expect(screen.queryByTestId(priceErrorMessage)).toBeNull();
   });
 
-  it.each([
-    { fieldName: 'triggerPrice', ocoValue: false },
-    { fieldName: 'ocoTriggerPrice', ocoValue: true },
-  ])('validates $fieldName field', async ({ ocoValue }) => {
+  it('validates trigger price field', async () => {
     render(generateJsx());
 
-    if (ocoValue) {
-      await userEvent.click(screen.getByTestId(oco));
-      await userEvent.click(screen.getByTestId(triggerDirectionFallsBelow));
-    }
     await userEvent.click(screen.getByTestId(submitButton));
-    const getByTestId = (id: string) =>
-      screen.getByTestId(ocoPostfix(id, ocoValue));
-    const queryByTestId = (id: string) =>
-      screen.queryByTestId(ocoPostfix(id, ocoValue));
-    expect(getByTestId(triggerPriceErrorMessage)).toBeInTheDocument();
+    expect(screen.getByTestId(triggerPriceErrorMessage)).toBeInTheDocument();
 
     // switch to trailing percentage offset trigger type
-    await userEvent.click(getByTestId(triggerTypeTrailingPercentOffset));
-    expect(queryByTestId(triggerPriceErrorMessage)).toBeNull();
+    await userEvent.click(screen.getByTestId(triggerTypeTrailingPercentOffset));
+    expect(screen.queryByTestId(triggerPriceErrorMessage)).toBeNull();
 
     // switch back to price trigger type
-    await userEvent.click(getByTestId(triggerTypePrice));
-    expect(getByTestId(triggerPriceErrorMessage)).toBeInTheDocument();
+    await userEvent.click(screen.getByTestId(triggerTypePrice));
+    expect(screen.getByTestId(triggerPriceErrorMessage)).toBeInTheDocument();
 
     // to small value should be invalid
-    await userEvent.type(getByTestId(triggerPriceInput), '0.001');
-    expect(getByTestId(triggerPriceErrorMessage)).toBeInTheDocument();
+    await userEvent.type(screen.getByTestId(triggerPriceInput), '0.001');
+    expect(screen.getByTestId(triggerPriceErrorMessage)).toBeInTheDocument();
 
-    // clear and fill using value causing immediate trigger
-    await userEvent.clear(getByTestId(triggerPriceInput));
-    await userEvent.type(getByTestId(triggerPriceInput), '0.01');
-    expect(queryByTestId(triggerPriceErrorMessage)).toBeNull();
-    expect(queryByTestId(triggerPriceWarningMessage)).toBeInTheDocument();
-
-    // change to correct value
-    await userEvent.type(getByTestId(triggerPriceInput), '2');
-    expect(queryByTestId(triggerPriceWarningMessage)).toBeNull();
+    // clear and fill using valid value
+    await userEvent.clear(screen.getByTestId(triggerPriceInput));
+    await userEvent.type(screen.getByTestId(triggerPriceInput), '0.01');
+    expect(screen.queryByTestId(triggerPriceErrorMessage)).toBeNull();
   });
 
-  it.each([
-    { fieldName: 'trailingPercentageOffset', ocoValue: false },
-    { fieldName: 'ocoTrailingPercentageOffset', ocoValue: true },
-  ])('validates $fieldName field', async ({ ocoValue }) => {
+  it('validates trigger trailing percentage offset field', async () => {
     render(generateJsx());
-    if (ocoValue) {
-      await userEvent.click(screen.getByTestId(oco));
-    }
-    await userEvent.click(screen.getByTestId(submitButton));
-    const getByTestId = (id: string) =>
-      screen.getByTestId(ocoPostfix(id, ocoValue));
-    const queryByTestId = (id: string) =>
-      screen.queryByTestId(ocoPostfix(id, ocoValue));
 
     // should not show error with default form values
-    expect(queryByTestId(triggerTrailingPercentOffsetErrorMessage)).toBeNull();
+    await userEvent.click(screen.getByTestId(submitButton));
+    expect(
+      screen.queryByTestId(triggerTrailingPercentOffsetErrorMessage)
+    ).toBeNull();
 
     // switch to trailing percentage offset trigger type
-    await userEvent.click(getByTestId(triggerTypeTrailingPercentOffset));
+    await userEvent.click(screen.getByTestId(triggerTypeTrailingPercentOffset));
     expect(
-      getByTestId(triggerTrailingPercentOffsetErrorMessage)
+      screen.getByTestId(triggerTrailingPercentOffsetErrorMessage)
     ).toBeInTheDocument();
 
     // to small value should be invalid
     await userEvent.type(
-      getByTestId(triggerTrailingPercentOffsetInput),
+      screen.getByTestId(triggerTrailingPercentOffsetInput),
       '0.09'
     );
     expect(
-      getByTestId(triggerTrailingPercentOffsetErrorMessage)
+      screen.getByTestId(triggerTrailingPercentOffsetErrorMessage)
     ).toBeInTheDocument();
 
     // clear and fill using valid value
-    await userEvent.clear(getByTestId(triggerTrailingPercentOffsetInput));
-    await userEvent.type(getByTestId(triggerTrailingPercentOffsetInput), '0.1');
-    expect(queryByTestId(triggerTrailingPercentOffsetErrorMessage)).toBeNull();
+    await userEvent.clear(
+      screen.getByTestId(triggerTrailingPercentOffsetInput)
+    );
+    await userEvent.type(
+      screen.getByTestId(triggerTrailingPercentOffsetInput),
+      '0.1'
+    );
+    expect(
+      screen.queryByTestId(triggerTrailingPercentOffsetErrorMessage)
+    ).toBeNull();
 
     // to big value should be invalid
-    await userEvent.clear(getByTestId(triggerTrailingPercentOffsetInput));
+    await userEvent.clear(
+      screen.getByTestId(triggerTrailingPercentOffsetInput)
+    );
     await userEvent.type(
-      getByTestId(triggerTrailingPercentOffsetInput),
+      screen.getByTestId(triggerTrailingPercentOffsetInput),
       '99.91'
     );
     expect(
-      getByTestId(triggerTrailingPercentOffsetErrorMessage)
+      screen.getByTestId(triggerTrailingPercentOffsetErrorMessage)
     ).toBeInTheDocument();
 
     // clear and fill using valid value
-    await userEvent.clear(getByTestId(triggerTrailingPercentOffsetInput));
+    await userEvent.clear(
+      screen.getByTestId(triggerTrailingPercentOffsetInput)
+    );
     await userEvent.type(
-      getByTestId(triggerTrailingPercentOffsetInput),
+      screen.getByTestId(triggerTrailingPercentOffsetInput),
       '99.9'
     );
-    expect(queryByTestId(triggerTrailingPercentOffsetErrorMessage)).toBeNull();
-  });
-
-  it('sync oco trigger', async () => {
-    render(generateJsx());
-    await userEvent.click(screen.getByTestId(oco));
     expect(
-      screen.getByTestId(triggerDirectionRisesAbove).dataset.state
-    ).toEqual('checked');
-    expect(
-      screen.getByTestId(ocoPostfix(triggerDirectionFallsBelow)).dataset.state
-    ).toEqual('checked');
-    await userEvent.click(screen.getByTestId(triggerDirectionFallsBelow));
-    expect(
-      screen.getByTestId(triggerDirectionRisesAbove).dataset.state
-    ).toEqual('unchecked');
-    expect(
-      screen.getByTestId(ocoPostfix(triggerDirectionFallsBelow)).dataset.state
-    ).toEqual('unchecked');
-    await userEvent.click(
-      screen.getByTestId(ocoPostfix(triggerDirectionFallsBelow))
-    );
-    expect(
-      screen.getByTestId(triggerDirectionRisesAbove).dataset.state
-    ).toEqual('checked');
-    expect(
-      screen.getByTestId(ocoPostfix(triggerDirectionFallsBelow)).dataset.state
-    ).toEqual('checked');
-  });
-
-  it('disables submit expiry strategy when OCO selected', async () => {
-    render(generateJsx());
-    await userEvent.click(screen.getByTestId(expire));
-    await userEvent.click(screen.getByTestId(expiryStrategySubmit));
-    await userEvent.click(screen.getByTestId(oco));
-    expect(screen.getByTestId(expiryStrategySubmit).dataset.state).toEqual(
-      'unchecked'
-    );
-    expect(screen.getByTestId(expiryStrategySubmit)).toBeDisabled();
-    await userEvent.click(screen.getByTestId(oco));
-    await userEvent.click(screen.getByTestId(expiryStrategySubmit));
-    expect(screen.getByTestId(expiryStrategySubmit).dataset.state).toEqual(
-      'checked'
-    );
-    expect(screen.getByTestId(expiryStrategySubmit)).not.toBeDisabled();
-  });
-
-  it('sets expiry time/date to now if expiry is changed to checked', async () => {
-    const now = Math.round(Date.now() / 1000) * 1000;
-    render(generateJsx());
-    jest.spyOn(global.Date, 'now').mockImplementationOnce(() => now);
-    await userEvent.click(screen.getByTestId(expire));
-
-    // expiry time/date was empty it should be set to now
-    expect(
-      new Date(screen.getByTestId<HTMLInputElement>(datePicker).value).getTime()
-    ).toEqual(now);
-
-    // set to the value in the past (now - 1s)
-    fireEvent.change(screen.getByTestId<HTMLInputElement>(datePicker), {
-      target: { value: formatForInput(new Date(now - 1000)) },
-    });
-    expect(
-      new Date(
-        screen.getByTestId<HTMLInputElement>(datePicker).value
-      ).getTime() + 1000
-    ).toEqual(now);
-
-    // switch expiry off and on
-    await userEvent.click(screen.getByTestId(expire));
-    await userEvent.click(screen.getByTestId(expire));
-    // expiry time/date was in the past it should be set to now
-    expect(
-      new Date(screen.getByTestId<HTMLInputElement>(datePicker).value).getTime()
-    ).toEqual(now);
+      screen.queryByTestId(triggerTrailingPercentOffsetErrorMessage)
+    ).toBeNull();
   });
 });

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

@@ -1,18 +1,13 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { VegaWalletContext } from '@vegaprotocol/wallet';
-import {
-  act,
-  fireEvent,
-  render,
-  screen,
-  waitFor,
-} from '@testing-library/react';
+import { act, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { generateMarket, generateMarketData } from '../../test-helpers';
 import { DealTicket } from './deal-ticket';
 import * as Schema from '@vegaprotocol/types';
 import type { MockedResponse } from '@apollo/client/testing';
 import { MockedProvider } from '@apollo/client/testing';
+import { addDecimal } from '@vegaprotocol/utils';
 import type { OrdersQuery } from '@vegaprotocol/orders';
 import {
   DealTicketType,
@@ -20,7 +15,6 @@ import {
 } from '../../hooks/use-form-values';
 import * as positionsTools from '@vegaprotocol/positions';
 import { OrdersDocument } from '@vegaprotocol/orders';
-import { formatForInput } from '@vegaprotocol/utils';
 
 jest.mock('zustand');
 jest.mock('./deal-ticket-fee-details', () => ({
@@ -141,6 +135,20 @@ describe('DealTicket', () => {
     );
   });
 
+  it('should display last price for market type order', () => {
+    render(generateJsx());
+    act(() => {
+      screen.getByTestId('order-type-Market').click();
+    });
+    // Assert last price is shown
+    expect(screen.getByTestId('last-price')).toHaveTextContent(
+      // eslint-disable-next-line
+      `~${addDecimal(marketPrice, market.decimalPlaces)} ${
+        market.tradableInstrument.instrument.product.quoteName
+      }`
+    );
+  });
+
   it('should use local storage state for initial values', () => {
     const expectedOrder = {
       marketId: market.id,
@@ -321,7 +329,7 @@ describe('DealTicket', () => {
     expect(screen.getByTestId('iceberg')).toBeChecked();
   });
 
-  it('should set values for a non-persistent order and disable post only checkbox', () => {
+  it('should set values for a non-persistent iceberg order and disable post only checkbox', () => {
     const expectedOrder = {
       marketId: market.id,
       type: Schema.OrderType.TYPE_LIMIT,
@@ -364,7 +372,6 @@ describe('DealTicket', () => {
     expect(screen.getByTestId('reduce-only')).not.toBeChecked();
     expect(screen.getByTestId('post-only')).not.toBeChecked();
     expect(screen.getByTestId('iceberg')).not.toBeChecked();
-    expect(screen.getByTestId('iceberg')).toBeDisabled();
   });
 
   // eslint-disable-next-line jest/no-disabled-tests
@@ -481,150 +488,4 @@ describe('DealTicket', () => {
       Object.keys(Schema.OrderTimeInForce).length
     );
   });
-
-  it('validates size field', async () => {
-    render(generateJsx());
-    const sizeErrorMessage = 'deal-ticket-error-message-size';
-    const sizeInput = 'order-size';
-    await userEvent.click(screen.getByTestId('place-order'));
-    // default value should be invalid
-    expect(screen.getByTestId(sizeErrorMessage)).toBeInTheDocument();
-    // to small value should be invalid
-    await userEvent.type(screen.getByTestId(sizeInput), '0.01');
-    expect(screen.getByTestId(sizeErrorMessage)).toBeInTheDocument();
-
-    // clear and fill using valid value
-    await userEvent.clear(screen.getByTestId(sizeInput));
-    await userEvent.type(screen.getByTestId(sizeInput), '0.1');
-    expect(screen.queryByTestId(sizeErrorMessage)).toBeNull();
-  });
-
-  it('validates price field', async () => {
-    const priceErrorMessage = 'deal-ticket-error-message-price';
-    const priceInput = 'order-price';
-    const submitButton = 'place-order';
-    const orderTypeMarket = 'order-type-Market';
-    const orderTypeLimit = 'order-type-Limit';
-    render(generateJsx());
-
-    await userEvent.click(screen.getByTestId(submitButton));
-
-    expect(screen.getByTestId(priceErrorMessage)).toBeInTheDocument();
-    await userEvent.type(screen.getByTestId(priceInput), '0.001');
-    expect(screen.getByTestId(priceErrorMessage)).toBeInTheDocument();
-
-    // switch to market order type error should disappear
-    await userEvent.click(screen.getByTestId(orderTypeMarket));
-    await userEvent.click(screen.getByTestId(submitButton));
-    expect(screen.queryByTestId(priceErrorMessage)).toBeNull();
-
-    // switch back to limit type
-    await userEvent.click(screen.getByTestId(orderTypeLimit));
-    await userEvent.click(screen.getByTestId(submitButton));
-    expect(screen.getByTestId(priceErrorMessage)).toBeInTheDocument();
-
-    // to small value should be invalid
-    await userEvent.type(screen.getByTestId(priceInput), '0.001');
-    expect(screen.getByTestId(priceErrorMessage)).toBeInTheDocument();
-
-    // clear and fill using valid value
-    await userEvent.clear(screen.getByTestId(priceInput));
-    await userEvent.type(screen.getByTestId(priceInput), '0.01');
-    expect(screen.queryByTestId(priceErrorMessage)).toBeNull();
-  });
-
-  it('validates iceberg field', async () => {
-    const peakSizeErrorMessage = 'deal-ticket-peak-error-message';
-    const minimumSizeErrorMessage = 'deal-ticket-minimum-error-message';
-    const sizeInput = 'order-size';
-    const peakSizeInput = 'order-peak-size';
-    const minimumSizeInput = 'order-minimum-size';
-    const submitButton = 'place-order';
-
-    render(generateJsx());
-    await userEvent.selectOptions(
-      screen.getByTestId('order-tif'),
-      Schema.OrderTimeInForce.TIME_IN_FORCE_GFA
-    );
-    await userEvent.click(screen.getByTestId('iceberg'));
-    await userEvent.click(screen.getByTestId(submitButton));
-
-    // validate empty fields
-    expect(screen.getByTestId(peakSizeErrorMessage)).toBeInTheDocument();
-    expect(screen.getByTestId(minimumSizeErrorMessage)).toBeInTheDocument();
-
-    await userEvent.type(screen.getByTestId(peakSizeInput), '0.01');
-    await userEvent.type(screen.getByTestId(minimumSizeInput), '0.01');
-
-    // validate value smaller than step
-    expect(screen.getByTestId(peakSizeErrorMessage)).toBeInTheDocument();
-    expect(screen.getByTestId(minimumSizeErrorMessage)).toBeInTheDocument();
-
-    await userEvent.clear(screen.getByTestId(peakSizeInput));
-    await userEvent.type(screen.getByTestId(peakSizeInput), '0.5');
-    await userEvent.clear(screen.getByTestId(minimumSizeInput));
-    await userEvent.type(screen.getByTestId(minimumSizeInput), '0.7');
-
-    await userEvent.clear(screen.getByTestId(sizeInput));
-    await userEvent.type(screen.getByTestId(sizeInput), '0.1');
-
-    // validate value higher than size
-    expect(screen.getByTestId(peakSizeErrorMessage)).toBeInTheDocument();
-    expect(screen.getByTestId(minimumSizeErrorMessage)).toBeInTheDocument();
-
-    await userEvent.clear(screen.getByTestId(sizeInput));
-    await userEvent.type(screen.getByTestId(sizeInput), '1');
-    // validate peak higher than minimum
-    expect(screen.queryByTestId(peakSizeErrorMessage)).toBeNull();
-    expect(screen.getByTestId(minimumSizeErrorMessage)).toBeInTheDocument();
-
-    await userEvent.clear(screen.getByTestId(peakSizeInput));
-    await userEvent.type(screen.getByTestId(peakSizeInput), '1');
-    await userEvent.clear(screen.getByTestId(minimumSizeInput));
-    await userEvent.type(screen.getByTestId(minimumSizeInput), '1');
-
-    // validate correct values
-    expect(screen.queryByTestId(peakSizeErrorMessage)).toBeNull();
-    expect(screen.queryByTestId(minimumSizeErrorMessage)).toBeNull();
-  });
-
-  it('sets expiry time/date to now if expiry is changed to checked', async () => {
-    const datePicker = 'date-picker-field';
-    const now = Math.round(Date.now() / 1000) * 1000;
-    render(generateJsx());
-    jest.spyOn(global.Date, 'now').mockImplementationOnce(() => now);
-    await userEvent.selectOptions(
-      screen.getByTestId('order-tif'),
-      Schema.OrderTimeInForce.TIME_IN_FORCE_GTT
-    );
-
-    // expiry time/date was empty it should be set to now
-    expect(
-      new Date(screen.getByTestId<HTMLInputElement>(datePicker).value).getTime()
-    ).toEqual(now);
-
-    // set to the value in the past (now - 1s)
-    fireEvent.change(screen.getByTestId<HTMLInputElement>(datePicker), {
-      target: { value: formatForInput(new Date(now - 1000)) },
-    });
-    expect(
-      new Date(
-        screen.getByTestId<HTMLInputElement>(datePicker).value
-      ).getTime() + 1000
-    ).toEqual(now);
-
-    // switch expiry off and on
-    await userEvent.selectOptions(
-      screen.getByTestId('order-tif'),
-      Schema.OrderTimeInForce.TIME_IN_FORCE_GFA
-    );
-    await userEvent.selectOptions(
-      screen.getByTestId('order-tif'),
-      Schema.OrderTimeInForce.TIME_IN_FORCE_GTT
-    );
-    // expiry time/date was in the past it should be set to now
-    expect(
-      new Date(screen.getByTestId<HTMLInputElement>(datePicker).value).getTime()
-    ).toEqual(now);
-  });
 });

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

@@ -3,6 +3,8 @@ import * as Schema from '@vegaprotocol/types';
 import type { FormEventHandler } from 'react';
 import { memo, useCallback, useEffect, useRef, useMemo } from 'react';
 import { Controller, useController, useForm } from 'react-hook-form';
+import { DealTicketAmount } from './deal-ticket-amount';
+import { DealTicketButton } from './deal-ticket-button';
 import {
   DealTicketFeeDetails,
   DealTicketMarginDetails,
@@ -15,31 +17,22 @@ import type { OrderSubmission } from '@vegaprotocol/wallet';
 import { useVegaWallet } from '@vegaprotocol/wallet';
 import { mapFormValuesToOrderSubmission } from '../../utils/map-form-values-to-submission';
 import {
-  TradingInput as Input,
-  TradingCheckbox as Checkbox,
-  TradingFormGroup as FormGroup,
-  TradingInputError as InputError,
+  TradingCheckbox,
+  TradingInputError,
   Intent,
   Notification,
   Tooltip,
-  TradingButton as Button,
-  Pill,
 } from '@vegaprotocol/ui-toolkit';
 
 import {
   useEstimatePositionQuery,
   useOpenVolume,
 } from '@vegaprotocol/positions';
-import {
-  toBigNum,
-  removeDecimal,
-  validateAmount,
-  toDecimal,
-  formatForInput,
-  formatValue,
-} from '@vegaprotocol/utils';
+import { toBigNum, removeDecimal } from '@vegaprotocol/utils';
 import { activeOrdersProvider } from '@vegaprotocol/orders';
 import { getDerivedPrice } from '@vegaprotocol/markets';
+import type { OrderInfo } from '@vegaprotocol/types';
+
 import {
   validateExpiration,
   validateMarketState,
@@ -48,10 +41,7 @@ import {
   validateType,
 } from '../../utils';
 import { ZeroBalanceError } from '../deal-ticket-validation/zero-balance-error';
-import {
-  NOTIONAL_SIZE_TOOLTIP_TEXT,
-  SummaryValidationType,
-} from '../../constants';
+import { SummaryValidationType } from '../../constants';
 import type {
   Market,
   MarketData,
@@ -62,6 +52,8 @@ import {
   useMarketAccountBalance,
   useAccountBalance,
 } from '@vegaprotocol/accounts';
+
+import { OrderType } from '@vegaprotocol/types';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import {
   DealTicketType,
@@ -72,8 +64,6 @@ import type { OrderFormValues } from '../../hooks/use-form-values';
 import { useDealTicketFormValues } from '../../hooks/use-form-values';
 import { DealTicketSizeIceberg } from './deal-ticket-size-iceberg';
 import noop from 'lodash/noop';
-import { isNonPersistentOrder } from '../../utils/time-in-force-persistance';
-import { KeyValue } from './key-value';
 
 export const REDUCE_ONLY_TOOLTIP =
   '"Reduce only" will ensure that this order will not increase the size of an open position. When the order is matched, it will only trade enough volume to bring your open volume towards 0 but never change the direction of your position. If applied to a limit order that is not instantly filled, the order will be stopped.';
@@ -124,11 +114,6 @@ const getDefaultValues = (
   ...storedValues,
 });
 
-export const getAssetUnit = (tags?: string[] | null) =>
-  tags
-    ?.find((tag) => tag.startsWith('base:') || tag.startsWith('ticker:'))
-    ?.replace(/^[^:]*:/, '');
-
 export const DealTicket = ({
   market,
   onMarketClick,
@@ -183,7 +168,6 @@ export const DealTicket = ({
   const rawPrice = watch('price');
   const iceberg = watch('iceberg');
   const peakSize = watch('peakSize');
-  const expiresAt = watch('expiresAt');
 
   useEffect(() => {
     const size = storedFormValues?.[dealTicketType]?.size;
@@ -238,8 +222,8 @@ export const DealTicket = ({
   });
   const openVolume = useOpenVolume(pubKey, market.id) ?? '0';
   const orders = activeOrders
-    ? activeOrders.map<Schema.OrderInfo>((order) => ({
-        isMarketOrder: order.type === Schema.OrderType.TYPE_MARKET,
+    ? activeOrders.map<OrderInfo>((order) => ({
+        isMarketOrder: order.type === OrderType.TYPE_MARKET,
         price: order.price,
         remaining: order.remaining,
         side: order.side,
@@ -247,7 +231,7 @@ export const DealTicket = ({
     : [];
   if (normalizedOrder) {
     orders.push({
-      isMarketOrder: normalizedOrder.type === Schema.OrderType.TYPE_MARKET,
+      isMarketOrder: normalizedOrder.type === OrderType.TYPE_MARKET,
       price: normalizedOrder.price ?? '0',
       remaining: normalizedOrder.size,
       side: normalizedOrder.side,
@@ -268,10 +252,6 @@ export const DealTicket = ({
   const assetSymbol =
     market.tradableInstrument.instrument.product.settlementAsset.symbol;
 
-  const assetUnit = getAssetUnit(
-    market.tradableInstrument.instrument.metadata.tags
-  );
-
   const summaryError = useMemo(() => {
     if (!pubKey) {
       return {
@@ -319,10 +299,12 @@ export const DealTicket = ({
     pubKey,
   ]);
 
-  const nonPersistentOrder = isNonPersistentOrder(timeInForce);
-  const disablePostOnlyCheckbox = nonPersistentOrder;
-  const disableReduceOnlyCheckbox = !nonPersistentOrder;
-  const disableIcebergCheckbox = nonPersistentOrder;
+  const disablePostOnlyCheckbox = [
+    Schema.OrderTimeInForce.TIME_IN_FORCE_IOC,
+    Schema.OrderTimeInForce.TIME_IN_FORCE_FOK,
+  ].includes(timeInForce);
+
+  const disableReduceOnlyCheckbox = !disablePostOnlyCheckbox;
 
   const onSubmit = useCallback(
     (formValues: OrderFormValues) => {
@@ -350,11 +332,6 @@ export const DealTicket = ({
     },
   });
 
-  const priceStep = toDecimal(market?.decimalPlaces);
-  const sizeStep = toDecimal(market?.positionDecimalPlaces);
-  const quoteName = market.tradableInstrument.instrument.product.quoteName;
-  const isLimitType = type === Schema.OrderType.TYPE_LIMIT;
-
   return (
     <form
       onSubmit={
@@ -389,97 +366,15 @@ export const DealTicket = ({
           <SideSelector value={field.value} onValueChange={field.onChange} />
         )}
       />
-
-      <Controller
-        name="size"
+      <DealTicketAmount
+        type={type}
         control={control}
-        rules={{
-          required: t('You need to provide a size'),
-          min: {
-            value: sizeStep,
-            message: t('Size cannot be lower than ' + sizeStep),
-          },
-          validate: validateAmount(sizeStep, 'Size'),
-          deps: ['peakSize', 'minimumVisibleSize'],
-        }}
-        render={({ field, fieldState }) => (
-          <div className={isLimitType ? 'mb-4' : 'mb-2'}>
-            <FormGroup label={t('Size')} labelFor="order-size" compact>
-              <Input
-                id="order-size"
-                className="w-full"
-                type="number"
-                appendElement={assetUnit && <Pill size="xs">{assetUnit}</Pill>}
-                step={sizeStep}
-                min={sizeStep}
-                data-testid="order-size"
-                onWheel={(e) => e.currentTarget.blur()}
-                {...field}
-              />
-            </FormGroup>
-            {fieldState.error && (
-              <InputError testId="deal-ticket-error-message-size">
-                {fieldState.error.message}
-              </InputError>
-            )}
-          </div>
-        )}
+        market={market}
+        marketData={marketData}
+        marketPrice={marketPrice || undefined}
+        sizeError={errors.size?.message}
+        priceError={errors.price?.message}
       />
-      {isLimitType && (
-        <Controller
-          name="price"
-          control={control}
-          rules={{
-            required: t('You need provide a price'),
-            min: {
-              value: priceStep,
-              message: t('Price cannot be lower than ' + priceStep),
-            },
-            validate: validateAmount(priceStep, 'Price'),
-          }}
-          render={({ field, fieldState }) => (
-            <div className="mb-2">
-              <FormGroup
-                labelFor="input-price-quote"
-                label={t('Price')}
-                compact
-              >
-                <Input
-                  id="input-price-quote"
-                  appendElement={<Pill size="xs">{quoteName}</Pill>}
-                  className="w-full"
-                  type="number"
-                  step={priceStep}
-                  data-testid="order-price"
-                  onWheel={(e) => e.currentTarget.blur()}
-                  {...field}
-                />
-              </FormGroup>
-              {fieldState.error && (
-                <InputError testId="deal-ticket-error-message-price">
-                  {fieldState.error.message}
-                </InputError>
-              )}
-            </div>
-          )}
-        />
-      )}
-      <div className="mb-4">
-        <KeyValue
-          label={t('Notional')}
-          value={formatValue(notionalSize, market.decimalPlaces)}
-          formattedValue={formatValue(notionalSize, market.decimalPlaces)}
-          symbol={quoteName}
-          labelDescription={NOTIONAL_SIZE_TOOLTIP_TEXT(quoteName)}
-        />
-        <DealTicketFeeDetails
-          order={
-            normalizedOrder && { ...normalizedOrder, price: price || undefined }
-          }
-          assetSymbol={assetSymbol}
-          market={market}
-        />
-      </div>
       <Controller
         name="timeInForce"
         control={control}
@@ -493,38 +388,19 @@ export const DealTicket = ({
           <TimeInForceSelector
             value={field.value}
             orderType={type}
-            onSelect={(value) => {
-              // If GTT is selected and no expiresAt time is set, or its
-              // behind current time then reset the value to current time
-              if (
-                value === Schema.OrderTimeInForce.TIME_IN_FORCE_GTT &&
-                (!expiresAt || new Date(expiresAt).getTime() < Date.now())
-              ) {
-                setValue('expiresAt', formatForInput(new Date()), {
-                  shouldValidate: true,
-                });
-              }
-
-              // iceberg orders must be persistent orders, so if user
-              // switches to a non persistent tif value, remove iceberg selection
-              if (iceberg && isNonPersistentOrder(value)) {
-                setValue('iceberg', false);
-              }
-              field.onChange(value);
-            }}
+            onSelect={field.onChange}
             market={market}
             marketData={marketData}
             errorMessage={errors.timeInForce?.message}
           />
         )}
       />
-      {isLimitType &&
+      {type === Schema.OrderType.TYPE_LIMIT &&
         timeInForce === Schema.OrderTimeInForce.TIME_IN_FORCE_GTT && (
           <Controller
             name="expiresAt"
             control={control}
             rules={{
-              required: t('You need provide a expiry time/date'),
               validate: validateExpiration,
             }}
             render={({ field }) => (
@@ -536,12 +412,12 @@ export const DealTicket = ({
             )}
           />
         )}
-      <div className="flex justify-between pb-2 gap-2">
+      <div className="flex gap-2 pb-2 justify-between">
         <Controller
           name="postOnly"
           control={control}
           render={({ field }) => (
-            <Checkbox
+            <TradingCheckbox
               name="post-only"
               checked={!disablePostOnlyCheckbox && field.value}
               disabled={disablePostOnlyCheckbox}
@@ -573,7 +449,7 @@ export const DealTicket = ({
           name="reduceOnly"
           control={control}
           render={({ field }) => (
-            <Checkbox
+            <TradingCheckbox
               name="reduce-only"
               checked={!disableReduceOnlyCheckbox && field.value}
               disabled={disableReduceOnlyCheckbox}
@@ -600,18 +476,17 @@ export const DealTicket = ({
           )}
         />
       </div>
-      {isLimitType && (
+      {type === Schema.OrderType.TYPE_LIMIT && (
         <>
-          <div className="flex justify-between pb-2 gap-2">
+          <div className="flex gap-2 pb-2 justify-between">
             <Controller
               name="iceberg"
               control={control}
               render={({ field }) => (
-                <Checkbox
+                <TradingCheckbox
                   name="iceberg"
                   checked={field.value}
                   onCheckedChange={field.onChange}
-                  disabled={disableIcebergCheckbox}
                   label={
                     <Tooltip
                       description={
@@ -655,29 +530,15 @@ export const DealTicket = ({
         pubKey={pubKey}
         onDeposit={onDeposit}
       />
-      <Button
-        data-testid="place-order"
-        type="submit"
-        className="w-full"
-        intent={side === Schema.Side.SIDE_BUY ? Intent.Success : Intent.Danger}
-        subLabel={`${formatValue(
-          normalizedOrder.size,
-          market.positionDecimalPlaces
-        )} ${assetUnit} @ ${
-          type === Schema.OrderType.TYPE_MARKET
-            ? 'market'
-            : `${formatValue(
-                normalizedOrder.price,
-                market.decimalPlaces
-              )} ${quoteName}`
-        }`}
-      >
-        {t(
-          type === Schema.OrderType.TYPE_MARKET
-            ? 'Place market order'
-            : 'Place limit order'
-        )}
-      </Button>
+      <DealTicketButton side={side} />
+      <DealTicketFeeDetails
+        order={
+          normalizedOrder && { ...normalizedOrder, price: price || undefined }
+        }
+        notionalSize={notionalSize}
+        assetSymbol={assetSymbol}
+        market={market}
+      />
       <DealTicketMarginDetails
         onMarketClick={onMarketClick}
         assetSymbol={assetSymbol}
@@ -711,11 +572,11 @@ export const NoWalletWarning = ({
   if (isReadOnly) {
     return (
       <div className="mb-2">
-        <InputError testId="deal-ticket-error-message-summary">
+        <TradingInputError testId="deal-ticket-error-message-summary">
           {
             'You need to connect your own wallet to start trading on this market'
           }
-        </InputError>
+        </TradingInputError>
       </div>
     );
   }
@@ -752,9 +613,9 @@ const SummaryMessage = memo(
     if (error?.message) {
       return (
         <div className="mb-2">
-          <InputError testId="deal-ticket-error-message-summary">
+          <TradingInputError testId="deal-ticket-error-message-summary">
             {error?.message}
-          </InputError>
+          </TradingInputError>
         </div>
       );
     }

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

@@ -18,30 +18,30 @@ export const ExpirySelector = ({
   onSelect,
   errorMessage,
 }: ExpirySelectorProps) => {
-  const minDateRef = useRef(new Date());
-
+  const now = useRef(new Date());
+  const date = value ? new Date(value) : now.current;
+  const dateFormatted = formatForInput(date);
+  const minDate = formatForInput(date);
   return (
-    <div className="mb-4">
-      <TradingFormGroup
-        label={t('Expiry time/date')}
-        labelFor="expiration"
-        compact
-      >
-        <TradingInput
-          data-testid="date-picker-field"
-          id="expiration"
-          type="datetime-local"
-          value={value && formatForInput(new Date(value))}
-          onChange={(e) => onSelect(e.target.value)}
-          min={formatForInput(minDateRef.current)}
-          hasError={!!errorMessage}
-        />
-        {errorMessage && (
-          <TradingInputError testId="deal-ticket-error-message-expiry">
-            {errorMessage}
-          </TradingInputError>
-        )}
-      </TradingFormGroup>
-    </div>
+    <TradingFormGroup
+      label={t('Expiry time/date')}
+      labelFor="expiration"
+      compact={true}
+    >
+      <TradingInput
+        data-testid="date-picker-field"
+        id="expiration"
+        type="datetime-local"
+        value={dateFormatted}
+        onChange={(e) => onSelect(e.target.value)}
+        min={minDate}
+        hasError={!!errorMessage}
+      />
+      {errorMessage && (
+        <TradingInputError testId="deal-ticket-error-message-expiry">
+          {errorMessage}
+        </TradingInputError>
+      )}
+    </TradingFormGroup>
   );
 };

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

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

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

@@ -1,51 +0,0 @@
-import { Tooltip } from '@vegaprotocol/ui-toolkit';
-import classnames from 'classnames';
-import type { ReactNode } from 'react';
-
-export interface KeyValuePros {
-  label: string;
-  value?: string | null | undefined;
-  symbol: string;
-  indent?: boolean | undefined;
-  labelDescription?: ReactNode;
-  formattedValue?: string;
-  onClick?: () => void;
-}
-
-export const KeyValue = ({
-  label,
-  value,
-  labelDescription,
-  symbol,
-  indent,
-  onClick,
-  formattedValue,
-}: KeyValuePros) => {
-  const displayValue = `${formattedValue ?? '-'} ${symbol || ''}`;
-  const valueElement = onClick ? (
-    <button onClick={onClick} className="text-muted">
-      {displayValue}
-    </button>
-  ) : (
-    <div className="text-muted">{displayValue}</div>
-  );
-  return (
-    <div
-      data-testid={
-        'deal-ticket-fee-' + label.toLocaleLowerCase().replace(/\s/g, '-')
-      }
-      key={typeof label === 'string' ? label : 'value-dropdown'}
-      className={classnames(
-        'text-xs mt-2 flex justify-between items-center gap-4 flex-wrap',
-        { 'ml-2': indent }
-      )}
-    >
-      <Tooltip description={labelDescription}>
-        <div>{label}</div>
-      </Tooltip>
-      <Tooltip description={`${value ?? '-'} ${symbol || ''}`}>
-        {valueElement}
-      </Tooltip>
-    </div>
-  );
-};

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

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

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

@@ -76,7 +76,7 @@ export const TypeToggle = ({
             <TradingDropdownTrigger
               data-testid="order-type-Stop"
               className={classNames(
-                'rounded px-2 flex flex-nowrap items-center justify-center',
+                'rounded px-3 flex flex-nowrap items-center justify-center',
                 {
                   'bg-vega-clight-500 dark:bg-vega-cdark-500': selectedOption,
                 }

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

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

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

@@ -9,7 +9,6 @@ import type {
 } from '../hooks/use-form-values';
 import * as Schema from '@vegaprotocol/types';
 import { removeDecimal, toNanoSeconds } from '@vegaprotocol/utils';
-import { isPersistentOrder } from './time-in-force-persistance';
 
 export const mapFormValuesToOrderSubmission = (
   order: OrderFormValues,
@@ -42,8 +41,11 @@ export const mapFormValuesToOrderSubmission = (
       ? false
       : order.reduceOnly,
   icebergOpts:
-    order.type === Schema.OrderType.TYPE_LIMIT &&
-    isPersistentOrder(order.timeInForce) &&
+    (order.type === Schema.OrderType.TYPE_MARKET ||
+      [
+        Schema.OrderTimeInForce.TIME_IN_FORCE_FOK,
+        Schema.OrderTimeInForce.TIME_IN_FORCE_IOC,
+      ].includes(order.timeInForce)) &&
     order.iceberg &&
     order.peakSize &&
     order.minimumVisibleSize
@@ -57,22 +59,6 @@ export const mapFormValuesToOrderSubmission = (
       : undefined,
 });
 
-const setTrigger = (
-  stopOrderSetup: StopOrderSetup,
-  triggerType: StopOrderFormValues['triggerPrice'],
-  triggerPrice: StopOrderFormValues['triggerPrice'],
-  triggerTrailingPercentOffset: StopOrderFormValues['triggerTrailingPercentOffset'],
-  decimalPlaces: number
-) => {
-  if (triggerType === 'price') {
-    stopOrderSetup.price = removeDecimal(triggerPrice ?? '', decimalPlaces);
-  } else if (triggerType === 'trailingPercentOffset') {
-    stopOrderSetup.trailingPercentOffset = (
-      Number(triggerTrailingPercentOffset) / 100
-    ).toFixed(3);
-  }
-};
-
 export const mapFormValuesToStopOrdersSubmission = (
   data: StopOrderFormValues,
   marketId: string,
@@ -95,46 +81,31 @@ export const mapFormValuesToStopOrdersSubmission = (
       positionDecimalPlaces
     ),
   };
-  setTrigger(
-    stopOrderSetup,
-    data.triggerType,
-    data.triggerPrice,
-    data.triggerTrailingPercentOffset,
-    decimalPlaces
-  );
-  let oppositeStopOrderSetup: StopOrderSetup | undefined = undefined;
-  if (data.oco) {
-    oppositeStopOrderSetup = {
-      orderSubmission: mapFormValuesToOrderSubmission(
-        {
-          type: data.ocoType,
-          side: data.side,
-          size: data.ocoSize,
-          timeInForce: data.ocoTimeInForce,
-          price: data.ocoPrice,
-          reduceOnly: true,
-        },
-        marketId,
-        decimalPlaces,
-        positionDecimalPlaces
-      ),
-    };
-    setTrigger(
-      oppositeStopOrderSetup,
-      data.ocoTriggerType,
-      data.ocoTriggerPrice,
-      data.ocoTriggerTrailingPercentOffset,
+  if (data.triggerType === 'price') {
+    stopOrderSetup.price = removeDecimal(
+      data.triggerPrice ?? '',
       decimalPlaces
     );
+  } else if (data.triggerType === 'trailingPercentOffset') {
+    stopOrderSetup.trailingPercentOffset = (
+      Number(data.triggerTrailingPercentOffset) / 100
+    ).toFixed(3);
   }
 
   if (data.expire) {
-    const expiresAt = data.expiresAt && toNanoSeconds(data.expiresAt);
-    stopOrderSetup.expiresAt = expiresAt;
-    stopOrderSetup.expiryStrategy = data.expiryStrategy;
-    if (oppositeStopOrderSetup) {
-      oppositeStopOrderSetup.expiresAt = expiresAt;
-      oppositeStopOrderSetup.expiryStrategy = data.expiryStrategy;
+    stopOrderSetup.expiresAt = data.expiresAt && toNanoSeconds(data.expiresAt);
+    if (
+      data.expiryStrategy ===
+      Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_CANCELS
+    ) {
+      stopOrderSetup.expiryStrategy =
+        Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_CANCELS;
+    } else if (
+      data.expiryStrategy ===
+      Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_SUBMIT
+    ) {
+      stopOrderSetup.expiryStrategy =
+        Schema.StopOrderExpiryStrategy.EXPIRY_STRATEGY_SUBMIT;
     }
   }
 
@@ -143,14 +114,12 @@ export const mapFormValuesToStopOrdersSubmission = (
     Schema.StopOrderTriggerDirection.TRIGGER_DIRECTION_RISES_ABOVE
   ) {
     submission.risesAbove = stopOrderSetup;
-    submission.fallsBelow = oppositeStopOrderSetup;
   }
   if (
     data.triggerDirection ===
     Schema.StopOrderTriggerDirection.TRIGGER_DIRECTION_FALLS_BELOW
   ) {
     submission.fallsBelow = stopOrderSetup;
-    submission.risesAbove = oppositeStopOrderSetup;
   }
 
   return submission;

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

@@ -1,8 +1,6 @@
 import type { OrderSubmissionBody } from '@vegaprotocol/wallet';
 import { mapFormValuesToOrderSubmission } from './map-form-values-to-submission';
 import * as Schema from '@vegaprotocol/types';
-import { OrderTimeInForce, OrderType } from '@vegaprotocol/types';
-import type { OrderFormValues } from '../hooks';
 
 describe('mapFormValuesToOrderSubmission', () => {
   it('sets and formats price only for limit orders', () => {
@@ -27,7 +25,7 @@ describe('mapFormValuesToOrderSubmission', () => {
     ).toEqual('10000');
   });
 
-  it('sets and formats expiresAt only for GTT orders', () => {
+  it('sets and formats expiresAt only for time in force orders', () => {
     expect(
       mapFormValuesToOrderSubmission(
         {
@@ -51,41 +49,6 @@ describe('mapFormValuesToOrderSubmission', () => {
     ).toEqual('1640995200000000000');
   });
 
-  it('sets and formats icebergOpts only for persisted orders', () => {
-    expect(
-      mapFormValuesToOrderSubmission(
-        {
-          type: OrderType.TYPE_LIMIT,
-          timeInForce: OrderTimeInForce.TIME_IN_FORCE_FOK,
-          iceberg: true,
-          peakSize: '10.00',
-          minimumVisibleSize: '10.00',
-        } as OrderFormValues,
-        'marketId',
-        2,
-        2
-      ).icebergOpts
-    ).toEqual(undefined);
-
-    expect(
-      mapFormValuesToOrderSubmission(
-        {
-          type: OrderType.TYPE_LIMIT,
-          timeInForce: OrderTimeInForce.TIME_IN_FORCE_GTC,
-          iceberg: true,
-          peakSize: '10.00',
-          minimumVisibleSize: '10.00',
-        } as OrderFormValues,
-        'marketId',
-        2,
-        2
-      ).icebergOpts
-    ).toEqual({
-      peakSize: '1000',
-      minimumVisibleSize: '1000',
-    });
-  });
-
   it('formats size', () => {
     expect(
       mapFormValuesToOrderSubmission(

libs/deal-ticket/src/utils/time-in-force-persistance.spec.ts

@@ -1,23 +0,0 @@
-import { OrderTimeInForce } from '@vegaprotocol/types';
-import {
-  isNonPersistentOrder,
-  isPersistentOrder,
-} from './time-in-force-persistance';
-
-it('isNonPeristentOrder', () => {
-  expect(isNonPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_FOK)).toBe(true);
-  expect(isNonPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_IOC)).toBe(true);
-  expect(isNonPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_GTC)).toBe(false);
-  expect(isNonPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_GTT)).toBe(false);
-  expect(isNonPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_GFA)).toBe(false);
-  expect(isNonPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_GFN)).toBe(false);
-});
-
-it('isPeristentOrder', () => {
-  expect(isPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_FOK)).toBe(false);
-  expect(isPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_IOC)).toBe(false);
-  expect(isPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_GTC)).toBe(true);
-  expect(isPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_GTT)).toBe(true);
-  expect(isPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_GFA)).toBe(true);
-  expect(isPersistentOrder(OrderTimeInForce.TIME_IN_FORCE_GFN)).toBe(true);
-});

libs/deal-ticket/src/utils/time-in-force-persistance.ts

@@ -1,12 +0,0 @@
-import { OrderTimeInForce } from '@vegaprotocol/types';
-
-export const isNonPersistentOrder = (timeInForce: OrderTimeInForce) => {
-  return [
-    OrderTimeInForce.TIME_IN_FORCE_FOK,
-    OrderTimeInForce.TIME_IN_FORCE_IOC,
-  ].includes(timeInForce);
-};
-
-export const isPersistentOrder = (timeInForce: OrderTimeInForce) => {
-  return !isNonPersistentOrder(timeInForce);
-};

libs/environment/src/hooks/use-environment.ts

@@ -408,12 +408,6 @@ function compileFeatureFlags(): FeatureFlags {
         process.env['NX_PRODUCT_PERPETUALS']
       ) as string
     ),
-    METAMASK_SNAPS: TRUTHY.includes(
-      windowOrDefault(
-        'NX_METAMASK_SNAPS',
-        process.env['NX_METAMASK_SNAPS']
-      ) as string
-    ),
   };
   const EXPLORER_FLAGS = {
     EXPLORER_ASSETS: TRUTHY.includes(

libs/environment/src/types.ts

@@ -18,11 +18,7 @@ export type Environment = z.infer<typeof envSchema>;
 export type FeatureFlags = z.infer<typeof featureFlagsSchema>;
 export type CosmicElevatorFlags = Pick<
   FeatureFlags,
-  | 'ICEBERG_ORDERS'
-  | 'STOP_ORDERS'
-  | 'SUCCESSOR_MARKETS'
-  | 'PRODUCT_PERPETUALS'
-  | 'METAMASK_SNAPS'
+  'ICEBERG_ORDERS' | 'STOP_ORDERS' | 'SUCCESSOR_MARKETS' | 'PRODUCT_PERPETUALS'
 >;
 export type Configuration = z.infer<typeof tomlConfigSchema>;
 export const CUSTOM_NODE_KEY = 'custom' as const;

libs/environment/src/utils/validate-environment.ts

@@ -77,7 +77,6 @@ const COSMIC_ELEVATOR_FLAGS = {
   STOP_ORDERS: z.optional(z.boolean()),
   ICEBERG_ORDERS: z.optional(z.boolean()),
   PRODUCT_PERPETUALS: z.optional(z.boolean()),
-  METAMASK_SNAPS: z.optional(z.boolean()),
 };
 
 const EXPLORER_FLAGS = {

libs/ledger/src/index.ts

@@ -1 +1,2 @@
-export * from './lib/ledger-export-form';
+export * from './lib/ledger-manager';
+export * from './lib/__generated__/LedgerEntries';

libs/ledger/src/lib/LedgerEntries.graphql

@@ -0,0 +1,47 @@
+fragment LedgerEntry on AggregatedLedgerEntry {
+  vegaTime
+  quantity
+  assetId
+  transferType
+  toAccountType
+  toAccountMarketId
+  toAccountPartyId
+  toAccountBalance
+  fromAccountType
+  fromAccountMarketId
+  fromAccountPartyId
+  fromAccountBalance
+}
+
+query LedgerEntries(
+  $partyId: ID!
+  $pagination: Pagination
+  $dateRange: DateRange
+  $fromAccountType: [AccountType!]
+  $toAccountType: [AccountType!]
+) {
+  ledgerEntries(
+    filter: {
+      FromAccountFilter: {
+        partyIds: [$partyId]
+        accountTypes: $fromAccountType
+      }
+      ToAccountFilter: { partyIds: [$partyId], accountTypes: $toAccountType }
+    }
+    pagination: $pagination
+    dateRange: $dateRange
+  ) {
+    edges {
+      node {
+        ...LedgerEntry
+      }
+      cursor
+    }
+    pageInfo {
+      startCursor
+      endCursor
+      hasNextPage
+      hasPreviousPage
+    }
+  }
+}

libs/ledger/src/lib/__generated__/LedgerEntries.ts

@@ -0,0 +1,88 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type LedgerEntryFragment = { __typename?: 'AggregatedLedgerEntry', vegaTime: any, quantity: string, assetId?: string | null, transferType?: Types.TransferType | null, toAccountType?: Types.AccountType | null, toAccountMarketId?: string | null, toAccountPartyId?: string | null, toAccountBalance: string, fromAccountType?: Types.AccountType | null, fromAccountMarketId?: string | null, fromAccountPartyId?: string | null, fromAccountBalance: string };
+
+export type LedgerEntriesQueryVariables = Types.Exact<{
+  partyId: Types.Scalars['ID'];
+  pagination?: Types.InputMaybe<Types.Pagination>;
+  dateRange?: Types.InputMaybe<Types.DateRange>;
+  fromAccountType?: Types.InputMaybe<Array<Types.AccountType> | Types.AccountType>;
+  toAccountType?: Types.InputMaybe<Array<Types.AccountType> | Types.AccountType>;
+}>;
+
+
+export type LedgerEntriesQuery = { __typename?: 'Query', ledgerEntries: { __typename?: 'AggregatedLedgerEntriesConnection', edges: Array<{ __typename?: 'AggregatedLedgerEntriesEdge', cursor: string, node: { __typename?: 'AggregatedLedgerEntry', vegaTime: any, quantity: string, assetId?: string | null, transferType?: Types.TransferType | null, toAccountType?: Types.AccountType | null, toAccountMarketId?: string | null, toAccountPartyId?: string | null, toAccountBalance: string, fromAccountType?: Types.AccountType | null, fromAccountMarketId?: string | null, fromAccountPartyId?: string | null, fromAccountBalance: string } } | null>, pageInfo: { __typename?: 'PageInfo', startCursor: string, endCursor: string, hasNextPage: boolean, hasPreviousPage: boolean } } };
+
+export const LedgerEntryFragmentDoc = gql`
+    fragment LedgerEntry on AggregatedLedgerEntry {
+  vegaTime
+  quantity
+  assetId
+  transferType
+  toAccountType
+  toAccountMarketId
+  toAccountPartyId
+  toAccountBalance
+  fromAccountType
+  fromAccountMarketId
+  fromAccountPartyId
+  fromAccountBalance
+}
+    `;
+export const LedgerEntriesDocument = gql`
+    query LedgerEntries($partyId: ID!, $pagination: Pagination, $dateRange: DateRange, $fromAccountType: [AccountType!], $toAccountType: [AccountType!]) {
+  ledgerEntries(
+    filter: {FromAccountFilter: {partyIds: [$partyId], accountTypes: $fromAccountType}, ToAccountFilter: {partyIds: [$partyId], accountTypes: $toAccountType}}
+    pagination: $pagination
+    dateRange: $dateRange
+  ) {
+    edges {
+      node {
+        ...LedgerEntry
+      }
+      cursor
+    }
+    pageInfo {
+      startCursor
+      endCursor
+      hasNextPage
+      hasPreviousPage
+    }
+  }
+}
+    ${LedgerEntryFragmentDoc}`;
+
+/**
+ * __useLedgerEntriesQuery__
+ *
+ * To run a query within a React component, call `useLedgerEntriesQuery` and pass it any options that fit your needs.
+ * When your component renders, `useLedgerEntriesQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useLedgerEntriesQuery({
+ *   variables: {
+ *      partyId: // value for 'partyId'
+ *      pagination: // value for 'pagination'
+ *      dateRange: // value for 'dateRange'
+ *      fromAccountType: // value for 'fromAccountType'
+ *      toAccountType: // value for 'toAccountType'
+ *   },
+ * });
+ */
+export function useLedgerEntriesQuery(baseOptions: Apollo.QueryHookOptions<LedgerEntriesQuery, LedgerEntriesQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<LedgerEntriesQuery, LedgerEntriesQueryVariables>(LedgerEntriesDocument, options);
+      }
+export function useLedgerEntriesLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<LedgerEntriesQuery, LedgerEntriesQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<LedgerEntriesQuery, LedgerEntriesQueryVariables>(LedgerEntriesDocument, options);
+        }
+export type LedgerEntriesQueryHookResult = ReturnType<typeof useLedgerEntriesQuery>;
+export type LedgerEntriesLazyQueryHookResult = ReturnType<typeof useLedgerEntriesLazyQuery>;
+export type LedgerEntriesQueryResult = Apollo.QueryResult<LedgerEntriesQuery, LedgerEntriesQueryVariables>;

libs/ledger/src/lib/ledger-entries-data-provider.ts

@@ -0,0 +1,77 @@
+import type { Asset } from '@vegaprotocol/assets';
+import { assetsMapProvider } from '@vegaprotocol/assets';
+import type { Market } from '@vegaprotocol/markets';
+import { marketsMapProvider } from '@vegaprotocol/markets';
+import {
+  makeDataProvider,
+  makeDerivedDataProvider,
+} from '@vegaprotocol/data-provider';
+
+import type {
+  LedgerEntriesQuery,
+  LedgerEntriesQueryVariables,
+  LedgerEntryFragment,
+} from './__generated__/LedgerEntries';
+import { LedgerEntriesDocument } from './__generated__/LedgerEntries';
+
+export type LedgerEntry = LedgerEntryFragment & {
+  asset: Asset | null | undefined;
+  marketSender: Market | null | undefined;
+  marketReceiver: Market | null | undefined;
+};
+
+type Edge = LedgerEntriesQuery['ledgerEntries']['edges'][number];
+
+const isLedgerEntryEdge = (entry: Edge): entry is NonNullable<Edge> =>
+  entry !== null;
+
+const getData = (responseData: LedgerEntriesQuery | null) => {
+  return (
+    responseData?.ledgerEntries?.edges
+      .filter(isLedgerEntryEdge)
+      .map((edge) => edge.node) || []
+  );
+};
+
+const ledgerEntriesOnlyProvider = makeDataProvider<
+  LedgerEntriesQuery,
+  ReturnType<typeof getData>,
+  never,
+  never,
+  LedgerEntriesQueryVariables
+>({
+  query: LedgerEntriesDocument,
+  getData,
+  additionalContext: {
+    isEnlargedTimeout: true,
+  },
+});
+
+export const ledgerEntriesProvider = makeDerivedDataProvider<
+  LedgerEntry[],
+  never,
+  LedgerEntriesQueryVariables
+>(
+  [
+    ledgerEntriesOnlyProvider,
+    (callback, client) => assetsMapProvider(callback, client, undefined),
+    (callback, client) => marketsMapProvider(callback, client, undefined),
+  ],
+  (partsData) => {
+    const entries = partsData[0] as ReturnType<typeof getData>;
+    const assets = partsData[1] as Record<string, Asset>;
+    const markets = partsData[2] as Record<string, Market>;
+    return entries.map((entry) => {
+      const asset = entry.assetId
+        ? (assets as Record<string, Asset>)[entry.assetId]
+        : null;
+      const marketSender = entry.fromAccountMarketId
+        ? markets[entry.fromAccountMarketId]
+        : null;
+      const marketReceiver = entry.toAccountMarketId
+        ? markets[entry.toAccountMarketId]
+        : null;
+      return { ...entry, asset, marketSender, marketReceiver };
+    });
+  }
+);

libs/ledger/src/lib/ledger-entries.mock.ts

@@ -0,0 +1,247 @@
+import type {
+  LedgerEntriesQuery,
+  LedgerEntryFragment,
+} from './__generated__/LedgerEntries';
+import * as Schema from '@vegaprotocol/types';
+import type { PartialDeep } from 'type-fest';
+import merge from 'lodash/merge';
+
+export const ledgerEntriesQuery = (
+  override?: PartialDeep<LedgerEntriesQuery>
+): LedgerEntriesQuery => {
+  const defaultResult: LedgerEntriesQuery = {
+    __typename: 'Query',
+    ledgerEntries: {
+      __typename: 'AggregatedLedgerEntriesConnection',
+      edges: ledgerEntries.map((node) => ({
+        __typename: 'AggregatedLedgerEntriesEdge',
+        node,
+        cursor: 'cursor-1',
+      })),
+      pageInfo: {
+        startCursor:
+          'eyJ2ZWdhX3RpbWUiOiIyMDIyLTExLTIzVDE3OjI3OjU2LjczNDM2NFoifQ==',
+        endCursor:
+          'eyJ2ZWdhX3RpbWUiOiIyMDIyLTExLTIzVDEzOjExOjE2LjU0NjM2M1oifQ==',
+        hasNextPage: false,
+        hasPreviousPage: false,
+        __typename: 'PageInfo',
+      },
+    },
+  };
+  return merge(defaultResult, override);
+};
+
+export const ledgerEntries: LedgerEntryFragment[] = [
+  {
+    vegaTime: '1669224476734364000',
+    quantity: '0',
+    assetId: 'asset-id',
+    transferType: Schema.TransferType.TRANSFER_TYPE_MARGIN_HIGH,
+    toAccountType: Schema.AccountType.ACCOUNT_TYPE_EXTERNAL,
+    toAccountMarketId: 'market-1',
+    toAccountPartyId: 'network',
+    fromAccountType: Schema.AccountType.ACCOUNT_TYPE_GENERAL,
+    fromAccountMarketId: 'market-0',
+    fromAccountPartyId:
+      '2e1ef32e5804e14232406aebaad719087d326afa5c648b7824d0823d8a46c8d1',
+    __typename: 'AggregatedLedgerEntry',
+    toAccountBalance: '0',
+    fromAccountBalance: '0',
+  },
+  {
+    vegaTime: '1669221452175594000',
+    quantity: '0',
+    assetId: 'asset-id-2',
+    transferType: Schema.TransferType.TRANSFER_TYPE_MARGIN_HIGH,
+    toAccountType: Schema.AccountType.ACCOUNT_TYPE_EXTERNAL,
+    toAccountMarketId: 'market-0',
+    toAccountPartyId: 'network',
+    fromAccountType: Schema.AccountType.ACCOUNT_TYPE_GENERAL,
+    fromAccountMarketId: 'market-2',
+    fromAccountPartyId:
+      '2e1ef32e5804e14232406aebaad719087d326afa5c648b7824d0823d8a46c8d1',
+    __typename: 'AggregatedLedgerEntry',
+    toAccountBalance: '0',
+    fromAccountBalance: '0',
+  },
+  {
+    vegaTime: '1669209347054198000',
+    quantity: '0',
+    assetId: 'asset-id',
+    transferType: Schema.TransferType.TRANSFER_TYPE_MARGIN_HIGH,
+    toAccountType: Schema.AccountType.ACCOUNT_TYPE_EXTERNAL,
+    toAccountMarketId: 'market-3',
+    toAccountPartyId: 'network',
+    fromAccountType: Schema.AccountType.ACCOUNT_TYPE_GENERAL,
+    fromAccountMarketId: 'market-2',
+    fromAccountPartyId: 'sender party id',
+    __typename: 'AggregatedLedgerEntry',
+    toAccountBalance: '0',
+    fromAccountBalance: '0',
+  },
+  {
+    vegaTime: '1669209345512806000',
+    quantity: '0',
+    assetId: 'asset-id',
+    transferType: Schema.TransferType.TRANSFER_TYPE_MARGIN_HIGH,
+    __typename: 'AggregatedLedgerEntry',
+    toAccountBalance: '0',
+    fromAccountBalance: '0',
+  },
+  {
+    vegaTime: '1669209316163397000',
+    quantity: '0',
+    assetId: 'asset-id-2',
+    transferType: Schema.TransferType.TRANSFER_TYPE_MARGIN_HIGH,
+    __typename: 'AggregatedLedgerEntry',
+    toAccountBalance: '0',
+    fromAccountBalance: '0',
+  },
+  {
+    vegaTime: '1669209299051286000',
+    quantity: '1326783',
+    assetId: 'asset-id-2',
+    transferType: Schema.TransferType.TRANSFER_TYPE_MTM_WIN,
+    __typename: 'AggregatedLedgerEntry',
+    toAccountBalance: '0',
+    fromAccountBalance: '0',
+  },
+  {
+    vegaTime: '1669209151328614000',
+    quantity: '0',
+    assetId: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c',
+    transferType: Schema.TransferType.TRANSFER_TYPE_MARGIN_HIGH,
+    __typename: 'AggregatedLedgerEntry',
+    toAccountBalance: '0',
+    fromAccountBalance: '0',
+  },
+  {
+    vegaTime: '1669209117655380000',
+    quantity: '0',
+    assetId: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c',
+    transferType: Schema.TransferType.TRANSFER_TYPE_MARGIN_HIGH,
+    __typename: 'AggregatedLedgerEntry',
+    toAccountBalance: '0',
+    fromAccountBalance: '0',
+  },
+  {
+    vegaTime: '1669209082788024000',
+    quantity: '1326783',
+    assetId: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c',
+    transferType: Schema.TransferType.TRANSFER_TYPE_MTM_WIN,
+    __typename: 'AggregatedLedgerEntry',
+    toAccountBalance: '0',
+    fromAccountBalance: '0',
+  },
+  {
+    vegaTime: '1669209076546363000',
+    quantity: '0',
+    assetId: 'cee709223217281d7893b650850ae8ee8a18b7539b5658f9b4cc24de95dd18ad',
+    transferType: Schema.TransferType.TRANSFER_TYPE_MARGIN_HIGH,
+    __typename: 'AggregatedLedgerEntry',
+    toAccountBalance: '0',
+    fromAccountBalance: '0',
+  },
+  {
+    vegaTime: '2022-11-24T13:36:42.13989Z',
+    quantity: '9078407730948615',
+    assetId: 'cee709223217281d7893b650850ae8ee8a18b7539b5658f9b4cc24de95dd18ad',
+    transferType: Schema.TransferType.TRANSFER_TYPE_MARGIN_LOW,
+    toAccountType: Schema.AccountType.ACCOUNT_TYPE_GENERAL,
+    toAccountMarketId: null,
+    toAccountPartyId:
+      '2e1ef32e5804e14232406aebaad719087d326afa5c648b7824d0823d8a46c8d1',
+    fromAccountType: Schema.AccountType.ACCOUNT_TYPE_MARGIN,
+    fromAccountMarketId:
+      '0942d767cb2cb5a795e14216e8e53c2b6f75e46dc1732c5aeda8a5aba4ad193d',
+    fromAccountPartyId:
+      '2e1ef32e5804e14232406aebaad719087d326afa5c648b7824d0823d8a46c8d1',
+    __typename: 'AggregatedLedgerEntry',
+    toAccountBalance: '0',
+    fromAccountBalance: '0',
+  },
+
+  {
+    vegaTime: '2022-11-24T13:35:49.257039Z',
+    quantity: '263142253070974',
+    assetId: 'cee709223217281d7893b650850ae8ee8a18b7539b5658f9b4cc24de95dd18ad',
+    transferType: Schema.TransferType.TRANSFER_TYPE_MARGIN_LOW,
+    toAccountType: Schema.AccountType.ACCOUNT_TYPE_GENERAL,
+    toAccountMarketId: null,
+    toAccountPartyId:
+      '2e1ef32e5804e14232406aebaad719087d326afa5c648b7824d0823d8a46c8d1',
+    fromAccountType: Schema.AccountType.ACCOUNT_TYPE_MARGIN,
+    fromAccountMarketId:
+      '0942d767cb2cb5a795e14216e8e53c2b6f75e46dc1732c5aeda8a5aba4ad193d',
+    fromAccountPartyId:
+      '2e1ef32e5804e14232406aebaad719087d326afa5c648b7824d0823d8a46c8d1',
+    __typename: 'AggregatedLedgerEntry',
+    toAccountBalance: '0',
+    fromAccountBalance: '0',
+  },
+  {
+    vegaTime: '2022-11-24T12:41:22.054428Z',
+    quantity: '1000000000',
+    assetId: '4e4e80abff30cab933b8c4ac6befc618372eb76b2cbddc337eff0b4a3a4d25b8',
+    transferType: Schema.TransferType.TRANSFER_TYPE_DEPOSIT,
+    toAccountType: Schema.AccountType.ACCOUNT_TYPE_EXTERNAL,
+    toAccountMarketId: null,
+    toAccountPartyId: 'network',
+    fromAccountType: Schema.AccountType.ACCOUNT_TYPE_GENERAL,
+    fromAccountMarketId: null,
+    fromAccountPartyId:
+      '2e1ef32e5804e14232406aebaad719087d326afa5c648b7824d0823d8a46c8d1',
+    __typename: 'AggregatedLedgerEntry',
+    toAccountBalance: '0',
+    fromAccountBalance: '0',
+  },
+  {
+    vegaTime: '2022-11-24T12:39:11.516154Z',
+    quantity: '1000000000000',
+    assetId: 'c9fe6fc24fce121b2cc72680543a886055abb560043fda394ba5376203b7527d',
+    transferType: Schema.TransferType.TRANSFER_TYPE_DEPOSIT,
+    toAccountType: Schema.AccountType.ACCOUNT_TYPE_EXTERNAL,
+    toAccountMarketId: null,
+    toAccountPartyId: 'network',
+    fromAccountType: Schema.AccountType.ACCOUNT_TYPE_GENERAL,
+    fromAccountMarketId: null,
+    fromAccountPartyId:
+      '2e1ef32e5804e14232406aebaad719087d326afa5c648b7824d0823d8a46c8d1',
+    __typename: 'AggregatedLedgerEntry',
+    toAccountBalance: '0',
+    fromAccountBalance: '0',
+  },
+  {
+    vegaTime: '2022-11-24T12:37:26.832226Z',
+    quantity: '10000000000000000000000',
+    assetId: 'c9fe6fc24fce121b2cc72680543a886055abb560043fda394ba5376203b7527d',
+    transferType: Schema.TransferType.TRANSFER_TYPE_DEPOSIT,
+    toAccountType: Schema.AccountType.ACCOUNT_TYPE_EXTERNAL,
+    toAccountMarketId: null,
+    toAccountPartyId: 'network',
+    fromAccountType: Schema.AccountType.ACCOUNT_TYPE_GENERAL,
+    fromAccountMarketId: null,
+    fromAccountPartyId:
+      '2e1ef32e5804e14232406aebaad719087d326afa5c648b7824d0823d8a46c8d1',
+    __typename: 'AggregatedLedgerEntry',
+    toAccountBalance: '0',
+    fromAccountBalance: '0',
+  },
+  {
+    vegaTime: '2022-11-24T12:24:52.844901Z',
+    quantity: '49390000000000000000000',
+    assetId: 'c9fe6fc24fce121b2cc72680543a886055abb560043fda394ba5376203b7527d',
+    transferType: Schema.TransferType.TRANSFER_TYPE_DEPOSIT,
+    toAccountType: Schema.AccountType.ACCOUNT_TYPE_EXTERNAL,
+    toAccountMarketId: null,
+    toAccountPartyId: 'network',
+    fromAccountType: Schema.AccountType.ACCOUNT_TYPE_GENERAL,
+    fromAccountMarketId: null,
+    fromAccountPartyId:
+      '2e1ef32e5804e14232406aebaad719087d326afa5c648b7824d0823d8a46c8d1',
+    __typename: 'AggregatedLedgerEntry',
+    toAccountBalance: '0',
+    fromAccountBalance: '0',
+  },
+];

libs/ledger/src/lib/ledger-export-form.spec.tsx

@@ -1,215 +0,0 @@
-import { render, screen, waitFor, fireEvent } from '@testing-library/react';
-import { createDownloadUrl, LedgerExportForm } from './ledger-export-form';
-import { formatForInput, toNanoSeconds } from '@vegaprotocol/utils';
-
-const vegaUrl = 'https://vega-url.co.uk/querystuff';
-
-const mockResponse = {
-  headers: { get: jest.fn() },
-  blob: () => '',
-};
-global.fetch = jest.fn().mockResolvedValue(mockResponse);
-
-const assetsMock = {
-  ['a'.repeat(64)]: 'symbol asset-id',
-  ['b'.repeat(64)]: 'symbol asset-id-2',
-};
-
-describe('LedgerExportForm', () => {
-  const partyId = 'c'.repeat(64);
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  beforeAll(() => {
-    jest.useFakeTimers().setSystemTime(new Date('2023-08-10T10:10:10.000Z'));
-  });
-
-  afterAll(() => {
-    jest.useRealTimers();
-  });
-
-  it('should be properly rendered', async () => {
-    render(
-      <LedgerExportForm
-        partyId={partyId}
-        vegaUrl={vegaUrl}
-        assets={assetsMock}
-      />
-    );
-    expect(screen.getByText('symbol asset-id')).toBeInTheDocument();
-
-    // userEvent does not work with faked timers
-    fireEvent.click(screen.getByTestId('ledger-download-button'));
-
-    expect(screen.getByTestId('download-spinner')).toBeInTheDocument();
-
-    await waitFor(() => {
-      expect(global.fetch).toHaveBeenCalledWith(
-        `https://vega-url.co.uk/api/v2/ledgerentry/export?partyId=${partyId}&assetId=${
-          Object.keys(assetsMock)[0]
-        }&dateRange.startTimestamp=1691057410000000000`
-      );
-    });
-    await waitFor(() => {
-      expect(screen.queryByTestId('download-spinner')).not.toBeInTheDocument();
-    });
-  });
-
-  it('assetID should be properly change request url', async () => {
-    render(
-      <LedgerExportForm
-        partyId={partyId}
-        vegaUrl={vegaUrl}
-        assets={assetsMock}
-      />
-    );
-    expect(screen.getByText('symbol asset-id')).toBeInTheDocument();
-
-    fireEvent.change(screen.getByTestId('select-ledger-asset'), {
-      target: { value: Object.keys(assetsMock)[1] },
-    });
-
-    expect(screen.getByText('symbol asset-id-2')).toBeInTheDocument();
-
-    fireEvent.click(screen.getByTestId('ledger-download-button'));
-
-    expect(screen.getByTestId('download-spinner')).toBeInTheDocument();
-
-    await waitFor(() => {
-      expect(global.fetch).toHaveBeenCalledWith(
-        `https://vega-url.co.uk/api/v2/ledgerentry/export?partyId=${partyId}&assetId=${
-          Object.keys(assetsMock)[1]
-        }&dateRange.startTimestamp=1691057410000000000`
-      );
-    });
-    await waitFor(() => {
-      expect(screen.queryByTestId('download-spinner')).not.toBeInTheDocument();
-    });
-  });
-
-  it('date-from should properly change request url', async () => {
-    const newDate = new Date(1691230210000);
-    render(
-      <LedgerExportForm
-        partyId={partyId}
-        vegaUrl={vegaUrl}
-        assets={assetsMock}
-      />
-    );
-    expect(screen.getByLabelText('Date from')).toBeInTheDocument();
-
-    fireEvent.change(screen.getByLabelText('Date from'), {
-      target: { value: formatForInput(newDate) },
-    });
-
-    expect(screen.getByTestId('date-from')).toHaveValue(
-      `${formatForInput(newDate)}.000`
-    );
-
-    fireEvent.click(screen.getByTestId('ledger-download-button'));
-
-    expect(screen.getByTestId('download-spinner')).toBeInTheDocument();
-
-    await waitFor(() => {
-      expect(global.fetch).toHaveBeenCalledWith(
-        `https://vega-url.co.uk/api/v2/ledgerentry/export?partyId=${partyId}&assetId=${
-          Object.keys(assetsMock)[0]
-        }&dateRange.startTimestamp=${toNanoSeconds(newDate)}`
-      );
-    });
-
-    await waitFor(() => {
-      expect(screen.queryByTestId('download-spinner')).not.toBeInTheDocument();
-    });
-  });
-
-  it('date-to should properly change request url', async () => {
-    const newDate = new Date(1691230210000);
-    render(
-      <LedgerExportForm
-        partyId={partyId}
-        vegaUrl={vegaUrl}
-        assets={assetsMock}
-      />
-    );
-
-    expect(screen.getByLabelText('Date to')).toBeInTheDocument();
-
-    fireEvent.change(screen.getByLabelText('Date to'), {
-      target: { value: formatForInput(newDate) },
-    });
-
-    expect(screen.getByTestId('date-to')).toHaveValue(
-      `${formatForInput(newDate)}.000`
-    );
-
-    fireEvent.click(screen.getByTestId('ledger-download-button'));
-
-    await waitFor(() => {
-      expect(global.fetch).toHaveBeenCalledWith(
-        `https://vega-url.co.uk/api/v2/ledgerentry/export?partyId=${partyId}&assetId=${
-          Object.keys(assetsMock)[0]
-        }&dateRange.startTimestamp=1691057410000000000&dateRange.endTimestamp=${toNanoSeconds(
-          newDate
-        )}`
-      );
-    });
-
-    await waitFor(() => {
-      expect(screen.queryByTestId('download-spinner')).not.toBeInTheDocument();
-    });
-  });
-});
-
-describe('createDownloadUrl', () => {
-  const fromTimestamp = 1690848000000;
-  const toTimestamp = 1691107200000;
-  const args = {
-    protohost: 'https://vega-url.co.uk',
-    partyId: 'a'.repeat(64),
-    assetId: 'b'.repeat(64),
-    dateFrom: new Date(fromTimestamp).toISOString(),
-  };
-
-  it('formats url with without an end date', () => {
-    expect(createDownloadUrl(args)).toEqual(
-      `${args.protohost}/api/v2/ledgerentry/export?partyId=${
-        args.partyId
-      }&assetId=${args.assetId}&dateRange.startTimestamp=${toNanoSeconds(
-        args.dateFrom
-      )}`
-    );
-  });
-
-  it('formats url with with an end date', () => {
-    const dateTo = new Date(toTimestamp).toISOString();
-    expect(
-      createDownloadUrl({
-        ...args,
-        dateTo,
-      })
-    ).toEqual(
-      `${args.protohost}/api/v2/ledgerentry/export?partyId=${
-        args.partyId
-      }&assetId=${args.assetId}&dateRange.startTimestamp=${toNanoSeconds(
-        args.dateFrom
-      )}&dateRange.endTimestamp=${toNanoSeconds(dateTo)}`
-    );
-  });
-
-  it('should throw if invalid args are provided', () => {
-    // invalid url
-    expect(() => {
-      // @ts-ignore override z.infer type
-      createDownloadUrl({ ...args, protohost: 'foo' });
-    }).toThrow();
-
-    // invalid partyId
-    expect(() => {
-      // @ts-ignore override z.infer type
-      createDownloadUrl({ ...args, partyId: 'z'.repeat(64) });
-    }).toThrow();
-  });
-});