feat(explorer): iceberg details on order tx

feat(trading): design changes (#4264 )
Co-authored-by: Art <artur@vegaprotocol.io> Co-authored-by: Bartłomiej Głownia <bglownia@gmail.com> Co-authored-by: Dariusz Majcherczyk <dariusz.majcherczyk@gmail.com>
2023-07-25 12:01:28 +01:00 · 2023-07-24 09:37:18 +01:00 · 2023-07-20 17:55:21 +01:00 · 2023-07-20 12:52:33 +01:00 · 2023-07-20 12:52:13 +01:00 · 2023-07-20 10:52:49 +02:00
167 changed files with 2436 additions and 1036 deletions
@@ -6,7 +6,7 @@ name: 'Add Issues To Project Board'
    types:
      - opened
 env:
-  GH_TOKEN: ${{ secrets.GH_NEW_CARD_TO_PROJECT }}
+  GH_TOKEN: ${{ secrets.PROJECT_MANAGE_ACTION }}
  PROJECT_ID: ${{ secrets.FRONT_END_PROJECT_ID }}
  ISSUE_ID: ${{ github.event.issue.node_id }}
  USER: ${{ github.actor }}
@@ -28,7 +28,7 @@ jobs:
          echo IS_MAINNET_RELEASE=false >> $GITHUB_ENV
          echo IS_TESTNET_RELEASE=false >> $GITHUB_ENV
          echo IS_IPFS_RELEASE=false >> $GITHUB_ENV
-          echo IS_S3_RELASE=false >> $GITHUB_ENV
+          echo IS_S3_RELEASE=false >> $GITHUB_ENV

      - name: Is PR
        if: ${{ github.event_name == 'pull_request' }}
@@ -51,9 +51,9 @@ jobs:
          echo IS_IPFS_RELEASE=true >> $GITHUB_ENV

      - name: Is S3 Release
-        if: ${{ env.IS_IPFS_RELASE == 'false' && github.event_name == 'push' }}
+        if: ${{ env.IS_IPFS_RELEASE == 'false' && github.event_name == 'push' }}
        run: |
-          echo IS_S3_RELASE=true >> $GITHUB_ENV
+          echo IS_S3_RELEASE=true >> $GITHUB_ENV

      - name: Set up QEMU
        id: quemu
@@ -251,7 +251,7 @@ jobs:
      - name: Publish dist to s3
        uses: jakejarvis/s3-sync-action@master
        # s3 releases are not happening for trading on mainnet - it's IPFS
-        if: ${{ env.IS_S3_RELASE == 'true' }}
+        if: ${{ env.IS_S3_RELEASE == 'true' }}
        with:
          args: --acl private --follow-symlinks --delete
        env:
@@ -262,11 +262,11 @@ jobs:
          SOURCE_DIR: 'dist-result'

      - name: Install aws CLI
-        if: ${{ env.IS_S3_RELASE == 'true' }}
+        if: ${{ env.IS_S3_RELEASE == 'true' }}
        uses: unfor19/install-aws-cli-action@master

      - name: Perform cache invalidation
-        if: ${{ env.IS_S3_RELASE == 'true' }}
+        if: ${{ env.IS_S3_RELEASE == 'true' }}
        env:
          AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
          AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
@@ -40,7 +40,7 @@ context.skip('Transactions page', function () {
            .first()
            .click({ force: true });
        } else {
-          cy.slack('Unable to find any transactions on page');
+          cy.log('Unable to find any transactions on page');
          cy.screenshot();
        }
      });
@@ -78,7 +78,7 @@ context.skip('Transactions page', function () {
              }
            });
        } else {
-          cy.slack('Unable to find any transactions on page');
+          cy.log('Unable to find any transactions on page');
          cy.screenshot();
        }
      });
@@ -4,7 +4,7 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://be.mainnet-mirror.vega.rocks/websocket
 NX_SENTRY_DSN=https://4b8c8a8ba07742648aa4dfe1b8d17e40@o286262.ingest.sentry.io/5882996
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/mainnet-mirror/vegawallet-mainnet-mirror.toml
 NX_VEGA_URL=https://api.mainnet-mirror.vega.rocks/graphql
-NX_VEGA_ENV=MAINNET-MIRROR
+NX_VEGA_ENV=MAINNET_MIRROR
 NX_BLOCK_EXPLORER=https://be.mainnet-mirror.vega.rocks/rest
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_VEGA_GOVERNANCE_URL=https://governance.mainnet-mirror.vega.rocks
@@ -137,7 +137,7 @@ export const ProposalsTable = ({ data }: ProposalsTableProps) => {
        hide: window.innerWidth <= BREAKPOINT_MD,
        headerName: t('Enactment date'),
        field: 'terms.enactmentDatetime',
-        valueFormatte: ({
+        valueFormatter: ({
          value,
        }: VegaValueFormatterParams<
          ProposalListFieldsFragment,
@@ -0,0 +1,52 @@
+import { t } from '@vegaprotocol/i18n';
+import type { components } from '../../../../../types/explorer';
+import { Tooltip } from '@vegaprotocol/ui-toolkit';
+
+export interface TxDetailsOrderIcebergDetailsProps {
+  iceberg: components['schemas']['v1IcebergOpts'];
+  size: components['schemas']['v1OrderSubmission']['size'];
+}
+
+/**
+
+.iceberg .sub {
+  vertical-align: bottom;
+  color: #954F01;
+}
+
+.iceberg .sup {
+  vertical-align: top;
+  color: #515E1E;
+}
+
+ */
+
+/**
+ * Visualises the iceberg details of an order, showing the minimum visible size,
+ * the full size and the peak size.
+ */
+export const TxOrderIcebergDetails = ({
+  iceberg,
+  size,
+}: TxDetailsOrderIcebergDetailsProps) => {
+  return (
+    <div
+      className="inline-block iceberg bg-vega-blue-300 border-vega-blue-350 border-[1px] text-[70%] font-mono py-[2px] pl-2 pr-3 height-[1em] leading-[1em] cursor-pointer"
+      style={{ clipPath: 'polygon(10% 0%, 100% 0%, 90% 100%, 0% 100%)' }}
+    >
+      <Tooltip description={t('Iceberg: Minimum visible size')}>
+        <span className="align-bottom text-vega-orange-650">
+          {iceberg.minimumVisibleSize || '-'}
+        </span>
+      </Tooltip>
+      <Tooltip description={t('Iceberg: Total size')}>
+        <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">
+          {iceberg.peakSize || '-'}
+        </span>
+      </Tooltip>
+    </div>
+  );
+};
@@ -8,6 +8,7 @@ import { txSignatureToDeterministicId } from '../lib/deterministic-ids';
 import DeterministicOrderDetails from '../../order-details/deterministic-order-details';
 import Hash from '../../links/hash';
 import { TxOrderPeggedReferenceRow } from './order/tx-order-peg';
+import { TxOrderIcebergDetails } from './order/tx-order-iceberg';

 interface TxDetailsOrderProps {
  txData: BlockExplorerTransactionResult | undefined;
@@ -32,6 +33,8 @@ export const TxDetailsOrder = ({
  const marketId = txData.command.orderSubmission.marketId || '-';
  const reference = txData.command.orderSubmission.peggedOrder;
  const side = txData.command.orderSubmission.side;
+  const iceberg = txData.command.orderSubmission.icebergOpts;
+  const size = txData.command.orderSubmission.size;

  let deterministicId = '';

@@ -74,6 +77,14 @@ export const TxDetailsOrder = ({
            marketId={marketId}
          />
        ) : null}
+        {iceberg ? (
+          <TableRow modifier="bordered">
+            <TableCell>{t('Iceberg details')}</TableCell>
+            <TableCell>
+              <TxOrderIcebergDetails iceberg={iceberg} size={size} />
+            </TableCell>
+          </TableRow>
+        ) : null}
      </TableWithTbody>

      {deterministicId.length > 0 ? (
@@ -166,6 +166,7 @@ export const TxOrderType = ({ orderType, command }: TxOrderTypeProps) => {
    'text-white dark:text-white bg-vega-dark-150 dark:bg-vega-dark-250';

  // This will get unwieldy and should probably produce a different colour of tag
+  // Note that colours are currently arbitrary
  if (type === 'Chain Event' && !!command?.chainEvent) {
    type = getLabelForChainEvent(command.chainEvent);
    colours = 'text-white dark-text-white bg-vega-pink dark:bg-vega-pink';
@@ -177,6 +178,9 @@ export const TxOrderType = ({ orderType, command }: TxOrderTypeProps) => {
      type = getLabelForProposal(command.proposalSubmission);
    }
    colours = 'text-black bg-vega-yellow';
+  } else if (type === 'Order' && command) {
+    type = getLabelForOrderType(orderType, command);
+    colours = 'text-white dark-text-white bg-vega-blue dark:bg-vega-blue';
  }

  if (type === 'Vote on Proposal') {
@@ -1,7 +1,5 @@
 import { Link, useParams } from 'react-router-dom';
-import { DATA_SOURCES } from '../../../config';
 import { getDateTimeFormat } from '@vegaprotocol/utils';
-import type { TendermintBlocksResponse } from '../tendermint-blocks-response';
 import { RouteTitle } from '../../../components/route-title';
 import { TimeAgo } from '../../../components/time-ago';
 import {
@@ -14,7 +12,7 @@ import { TxsPerBlock } from '../../../components/txs/txs-per-block';
 import { AsyncRenderer, Button } from '@vegaprotocol/ui-toolkit';
 import { Routes } from '../../route-names';
 import { t } from '@vegaprotocol/i18n';
-import { useFetch } from '@vegaprotocol/react-helpers';
+import { useBlockInfo } from '@vegaprotocol/tendermint';
 import { NodeLink } from '../../../components/links';
 import { useDocumentTitle } from '../../../hooks/use-document-title';
 import EmptyList from '../../../components/empty-list/empty-list';
@@ -24,10 +22,7 @@ const Block = () => {
  useDocumentTitle(['Blocks', `Block #${block}`]);
  const {
    state: { data: blockData, loading, error },
-  } = useFetch<TendermintBlocksResponse>(
-    `${DATA_SOURCES.tendermintUrl}/block?height=${block}`,
-    { cache: 'force-cache' }
-  );
+  } = useBlockInfo(Number(block));

  return (
    <section>
@@ -54,7 +54,7 @@ export const PartyBlockStake = ({
      {p?.stakingSummary.currentStakeAvailable ? (
        <KeyValueTable>
          <KeyValueTableRow noBorder={true}>
-            <div>{t('Available stake')}</div>
+            <div>{t('Associated to key')}</div>
            <div>
              <GovernanceAssetBalance
                price={p.stakingSummary.currentStakeAvailable}
@@ -62,7 +62,7 @@ export const PartyBlockStake = ({
            </div>
          </KeyValueTableRow>
          <KeyValueTableRow noBorder={true}>
-            <div>{t('Active stake')}</div>
+            <div>{t('Staked to validator')}</div>
            <div>
              <GovernanceAssetBalance price={linkedStake || '0'} />
            </div>
@@ -67,7 +67,7 @@ const Party = () => {
            text: t('Go back'),
            action: () => navigate(-1),
            className: 'py-1',
-            size: 'sm',
+            size: 'small',
          }}
        />
      </div>
@@ -18,6 +18,10 @@ NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/annou
 NX_WALLETCONNECT_PROJECT_ID=fe8091dc35738863e509fc4947525c72
 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
+
 #Test configuration variables
 CYPRESS_FAIRGROUND=false
 LC_ALL="en_US.UTF-8"
+
@@ -19,6 +19,9 @@ NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-stagnet1-k8s.ops.vega.xyz
 NX_VEGA_REST_URL=http://localhost:3008/api/v2/

+NX_TENDERMINT_URL=http://localhost:26617
+NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26617/websocket
+
 #Test configuration variables
 CYPRESS_FAIRGROUND=false

@@ -13,3 +13,6 @@ NX_TRANCHES_SERVICE_URL=https://tranches-devnet1-k8s.ops.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_REST_URL=https://api.n00.devnet1.vega.xyz/api/v2/
 NX_SENTRY_DSN=https://4b8c8a8ba07742648aa4dfe1b8d17e40@o286262.ingest.sentry.io/5882996
+
+NX_TENDERMINT_URL=https://tm.be.devnet1.vega.xyz/
+NX_TENDERMINT_WEBSOCKET_URL=wss://be.devnet1.vega.xyz/websocket
@@ -14,3 +14,6 @@ NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-mainnet-k8s.ops.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json
 NX_VEGA_REST_URL=https://api.vega.community/api/v2/
+
+NX_TENDERMINT_URL=https://be.vega.community
+NX_TENDERMINT_WEBSOCKET_URL=wss://be.vega.community/websocket
@@ -1,8 +1,8 @@
 # App configuration variables
-NX_VEGA_ENV=MAINNET-MIRROR
+NX_VEGA_ENV=MAINNET_MIRROR
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/mainnet-mirror/vegawallet-mainnet-mirror.toml
 NX_VEGA_URL=https://api.mainnet-mirror.vega.rocks/graphql
-NX_VEGA_NETWORKS='{"DEVNET":"https://dev.governance.vega.xyz","TESTNET":"https://governance.fairground.wtf","MAINNET":"https://governance.vega.xyz","MAINNET-MIRROR":"https://governance.mainnet-mirror.vega.rocks","STAGNET1":"https://trading.stagnet1.vega.rocks"}'
+NX_VEGA_NETWORKS='{"DEVNET":"https://dev.governance.vega.xyz","TESTNET":"https://governance.fairground.wtf","MAINNET":"https://governance.vega.xyz","MAINNET_MIRROR":"https://governance.mainnet-mirror.vega.rocks","STAGNET1":"https://trading.stagnet1.vega.rocks"}'
 NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
@@ -13,3 +13,6 @@ NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-mainnet-mirror-k8s.ops.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json
 NX_VEGA_REST_URL=https://api.mainnet-mirror.vega.rocks/api/v2/
+
+NX_TENDERMINT_URL=https://be.mainnet-mirror.vega.rocks
+NX_TENDERMINT_WEBSOCKET_URL=wss://be.mainnet-mirror.vega.rocks/websocket
@@ -9,3 +9,6 @@ NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-stagnet1-k8s.ops.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_REST_URL=https://api.n00.stagnet1.vega.xyz/api/v2/
+
+NX_TENDERMINT_URL=https://tm.n01.stagnet1.vega.rocks
+NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n01.stagnet1.vega.xyz/websocket
@@ -14,3 +14,6 @@ NX_TRANCHES_SERVICE_URL=https://tranches-testnet-k8s.ops.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_REST_URL=https://api.n07.testnet.vega.xyz/api/v2/
 NX_SENTRY_DSN=https://4b8c8a8ba07742648aa4dfe1b8d17e40@o286262.ingest.sentry.io/5882996
+
+NX_TENDERMINT_URL=https://tm.be.testnet.vega.xyz
+NX_TENDERMINT_WEBSOCKET_URL=wss://be.testnet.vega.xyz/websocket
@@ -11,3 +11,6 @@ NX_VEGA_EXPLORER_URL=https://explorer.validators-testnet.vega.rocks/
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_REST_URL=https://api-validators-testnet.vega.rocks/api/v2/
 NX_SENTRY_DSN=https://4b8c8a8ba07742648aa4dfe1b8d17e40@o286262.ingest.sentry.io/5882996
+
+NX_TENDERMINT_URL=https://tm.be.validators-testnet.vega.rocks
+NX_TENDERMINT_WEBSOCKET_URL=wss://be.validators-testnet.vega.
@@ -18,6 +18,10 @@ import { VegaWallet } from '../vega-wallet';
 import { useLocation, useMatch } from 'react-router-dom';
 import { useEffect } from 'react';
 import { useTelemetryDialog } from '../telemetry-dialog/telemetry-dialog';
+import {
+  ProtocolUpgradeCountdown,
+  ProtocolUpgradeCountdownMode,
+} from '@vegaprotocol/proposals';

 export const SettingsLink = () => {
  const { open, isOpen, close } = useTelemetryDialog();
@@ -61,7 +65,14 @@ export const Nav = ({ theme }: Pick<NavigationProps, 'theme'>) => {
      appName="Governance"
      theme={theme}
      breakpoints={[458, 959]}
-      actions={<SettingsLink />}
+      actions={
+        <>
+          <SettingsLink />
+          <ProtocolUpgradeCountdown
+            mode={ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING}
+          />
+        </>
+      }
    >
      <NavigationList
        className="[.drawer-content_&]:border-b [.drawer-content_&]:border-b-vega-light-200 dark:[.drawer-content_&]:border-b-vega-dark-200 [.drawer-content_&]:pb-8 [.drawer-content_&]:mb-2"
@@ -4,7 +4,11 @@ import type { ReactNode } from 'react';
 import { AnnouncementBanner } from '@vegaprotocol/announcements';
 import { Nav } from '../nav';
 import { Networks, useEnvironment } from '@vegaprotocol/environment';
-import React from 'react';
+import {
+  ProtocolUpgradeCountdownMode,
+  ProtocolUpgradeProposalNotification,
+} from '@vegaprotocol/proposals';
+import { ViewingAsBanner } from '@vegaprotocol/ui-toolkit';

 interface AppLayoutProps {
  children: ReactNode;
@@ -31,8 +35,23 @@ export const AppLayout = ({ children }: AppLayoutProps) => {
          />
        )}
        <Nav theme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'dark'} />
+        <NotificationsContainer />
      </div>
      <div className={AppLayoutClasses}>{children}</div>
    </div>
  );
 };
+
+const NotificationsContainer = () => {
+  const { isReadOnly, pubKey, disconnect } = useVegaWallet();
+  return (
+    <div data-testid="banners">
+      <ProtocolUpgradeProposalNotification
+        mode={ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING}
+      />
+      {isReadOnly ? (
+        <ViewingAsBanner pubKey={pubKey} disconnect={disconnect} />
+      ) : null}
+    </div>
+  );
+};
@@ -1,5 +1,3 @@
-import { ViewingAsBanner } from '@vegaprotocol/ui-toolkit';
-import { useVegaWallet } from '@vegaprotocol/wallet';
 import React from 'react';

 export interface TemplateSidebarProps {
@@ -8,24 +6,18 @@ export interface TemplateSidebarProps {
 }

 export function TemplateSidebar({ children, sidebar }: TemplateSidebarProps) {
-  const { isReadOnly, pubKey, disconnect } = useVegaWallet();
  return (
-    <>
-      {isReadOnly ? (
-        <ViewingAsBanner pubKey={pubKey} disconnect={disconnect} />
-      ) : null}
-      <div className="w-full border-b border-neutral-700 lg:grid lg:grid-rows-[1fr] lg:grid-cols-[1fr_450px]">
-        <main className="max-w-[100vw] col-start-1 p-4 overflow-auto">
-          {children}
-        </main>
-        <aside className="col-start-2 row-start-1 row-span-2 hidden lg:block p-4 bg-banner bg-contain border-l border-neutral-700">
-          {sidebar.map((Component, i) => (
-            <section className="mb-4 last:mb-0" key={i}>
-              {Component}
-            </section>
-          ))}
-        </aside>
-      </div>
-    </>
+    <div className="w-full border-b border-neutral-700 lg:grid lg:grid-rows-[1fr] lg:grid-cols-[1fr_450px]">
+      <main className="max-w-[100vw] col-start-1 p-4 overflow-auto">
+        {children}
+      </main>
+      <aside className="col-start-2 row-start-1 row-span-2 hidden lg:block p-4 bg-banner bg-contain border-l border-neutral-700">
+        {sidebar.map((Component, i) => (
+          <section className="mb-4 last:mb-0" key={i}>
+            {Component}
+          </section>
+        ))}
+      </aside>
+    </div>
  );
 }
@@ -25,6 +25,10 @@ export const ContractAddresses: {
    claimAddress: customClaimAddress ?? '0x0',
    lockedAddress: customLockedAddress ?? '0x0',
  },
+  MAINNET_MIRROR: {
+    claimAddress: '0x8Cef746ab7C83B61F6461cC92882bD61AB65a994', // TODO not deployed to this env, but random address so app doesn't error
+    lockedAddress: '0x0', // TODO not deployed to this env
+  },
  DEVNET: {
    claimAddress: '0x8Cef746ab7C83B61F6461cC92882bD61AB65a994', // TODO not deployed to this env, but random address so app doesn't error
    lockedAddress: '0x0', // TODO not deployed to this env
@@ -837,5 +837,7 @@
  "RejectedProposals": "Rejected proposals",
  "networkGovernance": "Network governance",
  "networkUpgrades": "Network upgrades",
-  "assetSpecification": "Asset specification"
+  "assetSpecification": "Asset specification",
+  "Estimated time to upgrade": "Estimated time to upgrade",
+  "Upgraded at": "Upgraded at"
 }
@@ -31,6 +31,7 @@ import {
  orderByDate,
  orderByUpgradeBlockHeight,
 } from '../proposals/components/proposals-list/proposals-list';
+import { BigNumber } from '../../lib/bignumber';

 const nodesToShow = 6;

@@ -248,6 +249,8 @@ const GovernanceHome = ({ name }: RouteChildProps) => {

  const activeNodes = removePaginationWrapper(
    validatorsData?.nodesConnection.edges
+  ).filter((node) =>
+    new BigNumber(node.rankingScore.performanceScore).isGreaterThan(0)
  );

  const trimmedActiveNodes = activeNodes?.slice(0, nodesToShow);
@@ -4,16 +4,20 @@ import { render } from '@testing-library/react';
 import { ProtocolUpgradeProposalStatus } from '@vegaprotocol/types';
 import { ProtocolUpgradeProposalDetailInfo } from './protocol-upgrade-proposal-detail-info';

-const renderComponent = () =>
+const PROPOSAL = {
+  vegaReleaseTag: 'v0.1.234',
+  status:
+    ProtocolUpgradeProposalStatus.PROTOCOL_UPGRADE_PROPOSAL_STATUS_PENDING,
+  upgradeBlockHeight: '12345',
+  approvers: [],
+};
+
+const renderComponent = (lastBlockHeight?: string, time?: string) =>
  render(
    <ProtocolUpgradeProposalDetailInfo
-      proposal={{
-        vegaReleaseTag: 'v0.1.234',
-        status:
-          ProtocolUpgradeProposalStatus.PROTOCOL_UPGRADE_PROPOSAL_STATUS_PENDING,
-        upgradeBlockHeight: '12345',
-        approvers: [],
-      }}
+      proposal={PROPOSAL}
+      lastBlockHeight={lastBlockHeight}
+      time={time}
    />
  );

@@ -43,4 +47,28 @@ describe('ProtocolUpgradeProposalDetailInfo', () => {
      'v0.1.234'
    );
  });
+
+  it('should display estimated time if proposal is still pending', () => {
+    const { getByTestId } = renderComponent('12', 'time');
+    expect(getByTestId('protocol-upgrade-time-label')).toHaveTextContent(
+      'Estimated time to upgrade'
+    );
+    expect(getByTestId('protocol-upgrade-time')).toHaveTextContent('time');
+  });
+
+  it('should display upgraded at if proposal is done', () => {
+    const { getByTestId } = renderComponent('123456', 'time');
+    expect(getByTestId('protocol-upgrade-time-label')).toHaveTextContent(
+      'Upgraded at'
+    );
+    expect(getByTestId('protocol-upgrade-time')).toHaveTextContent('time');
+  });
+
+  it('should not display time if none provided', () => {
+    const { queryByTestId } = renderComponent('123456', undefined);
+    expect(
+      queryByTestId('protocol-upgrade-time-label')
+    ).not.toBeInTheDocument();
+    expect(queryByTestId('protocol-upgrade-time')).not.toBeInTheDocument();
+  });
 });
@@ -5,19 +5,33 @@ import {
  RoundedWrapper,
 } from '@vegaprotocol/ui-toolkit';
 import { SubHeading } from '../../../../components/heading';
-import type { ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
+import { type ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
+import * as Types from '@vegaprotocol/types';
+import type { ReactNode } from 'react';

 export interface ProtocolUpgradeProposalDetailInfoProps {
  proposal: ProtocolUpgradeProposalFieldsFragment;
  lastBlockHeight?: string;
+  time?: string | ReactNode;
 }

 export const ProtocolUpgradeProposalDetailInfo = ({
  proposal,
  lastBlockHeight,
+  time,
 }: ProtocolUpgradeProposalDetailInfoProps) => {
  const { t } = useTranslation();

+  const shouldShowUpgradeTime =
+    ![
+      Types.ProtocolUpgradeProposalStatus
+        .PROTOCOL_UPGRADE_PROPOSAL_STATUS_REJECTED,
+      Types.ProtocolUpgradeProposalStatus
+        .PROTOCOL_UPGRADE_PROPOSAL_STATUS_UNSPECIFIED,
+    ].includes(proposal.status) && time;
+
+  const pending = Number(proposal.upgradeBlockHeight) > Number(lastBlockHeight);
+
  return (
    <div className="mb-10">
      <SubHeading title={t('proposal')} />
@@ -29,13 +43,26 @@ export const ProtocolUpgradeProposalDetailInfo = ({
            <span data-testid="protocol-upgrade-block-height">
              {proposal.upgradeBlockHeight}{' '}
              {lastBlockHeight && (
-                <>
+                <span className="text-vega-light-300 dark:text-vega-dark-300">
                  ({t('currently')} {lastBlockHeight})
-                </>
+                </span>
              )}
            </span>
          </KeyValueTableRow>

+          {shouldShowUpgradeTime && (
+            <KeyValueTableRow>
+              <span
+                data-testid="protocol-upgrade-time-label"
+                className="uppercase"
+              >
+                {pending ? t('Estimated time to upgrade') : t('Upgraded at')}
+              </span>
+
+              <span data-testid="protocol-upgrade-time">{time}</span>
+            </KeyValueTableRow>
+          )}
+
          <KeyValueTableRow>
            <span className="uppercase">{t('state')}</span>

@@ -3,12 +3,12 @@ import * as Types from '@vegaprotocol/types';
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
 const defaultOptions = {} as const;
-export type ProposalFieldsFragment = { __typename?: 'Proposal', id?: string | null, reference: string, state: Types.ProposalState, datetime: any, rejectionReason?: Types.ProposalRejectionReason | null, errorDetails?: string | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string }, party: { __typename?: 'Party', id: string }, terms: { __typename?: 'ProposalTerms', closingDatetime: any, enactmentDatetime?: any | null, change: { __typename: 'NewAsset', name: string, symbol: string, decimals: number, quantum: string, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string, withdrawThreshold: string, lifetimeLimit: string } } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket', instrument: { __typename?: 'InstrumentConfiguration', name: string, code: string, futureProduct?: { __typename?: 'FutureProduct', settlementAsset: { __typename?: 'Asset', symbol: string } } | null } } | { __typename?: 'UpdateAsset', quantum: string, assetId: string, source: { __typename?: 'UpdateERC20', lifetimeLimit: string, withdrawThreshold: string } } | { __typename?: 'UpdateMarket', marketId: string } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } }, votes: { __typename?: 'ProposalVotes', yes: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string }, no: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string } } };
+export type ProposalFieldsFragment = { __typename?: 'Proposal', id?: string | null, reference: string, state: Types.ProposalState, datetime: any, rejectionReason?: Types.ProposalRejectionReason | null, errorDetails?: string | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string }, party: { __typename?: 'Party', id: string }, terms: { __typename?: 'ProposalTerms', closingDatetime: any, enactmentDatetime?: any | null, change: { __typename?: 'CancelTransfer' } | { __typename: 'NewAsset', name: string, symbol: string, decimals: number, quantum: string, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string, withdrawThreshold: string, lifetimeLimit: string } } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket', instrument: { __typename?: 'InstrumentConfiguration', name: string, code: string, futureProduct?: { __typename?: 'FutureProduct', settlementAsset: { __typename?: 'Asset', symbol: string } } | null } } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset', quantum: string, assetId: string, source: { __typename?: 'UpdateERC20', lifetimeLimit: string, withdrawThreshold: string } } | { __typename?: 'UpdateMarket', marketId: string } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } }, votes: { __typename?: 'ProposalVotes', yes: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string }, no: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string } } };

 export type ProposalsQueryVariables = Types.Exact<{ [key: string]: never; }>;


-export type ProposalsQuery = { __typename?: 'Query', proposalsConnection?: { __typename?: 'ProposalsConnection', edges?: Array<{ __typename?: 'ProposalEdge', node: { __typename?: 'Proposal', id?: string | null, reference: string, state: Types.ProposalState, datetime: any, rejectionReason?: Types.ProposalRejectionReason | null, errorDetails?: string | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string }, party: { __typename?: 'Party', id: string }, terms: { __typename?: 'ProposalTerms', closingDatetime: any, enactmentDatetime?: any | null, change: { __typename: 'NewAsset', name: string, symbol: string, decimals: number, quantum: string, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string, withdrawThreshold: string, lifetimeLimit: string } } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket', instrument: { __typename?: 'InstrumentConfiguration', name: string, code: string, futureProduct?: { __typename?: 'FutureProduct', settlementAsset: { __typename?: 'Asset', symbol: string } } | null } } | { __typename?: 'UpdateAsset', quantum: string, assetId: string, source: { __typename?: 'UpdateERC20', lifetimeLimit: string, withdrawThreshold: string } } | { __typename?: 'UpdateMarket', marketId: string } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } }, votes: { __typename?: 'ProposalVotes', yes: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string }, no: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string } } } } | null> | null } | null };
+export type ProposalsQuery = { __typename?: 'Query', proposalsConnection?: { __typename?: 'ProposalsConnection', edges?: Array<{ __typename?: 'ProposalEdge', node: { __typename?: 'Proposal', id?: string | null, reference: string, state: Types.ProposalState, datetime: any, rejectionReason?: Types.ProposalRejectionReason | null, errorDetails?: string | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string }, party: { __typename?: 'Party', id: string }, terms: { __typename?: 'ProposalTerms', closingDatetime: any, enactmentDatetime?: any | null, change: { __typename?: 'CancelTransfer' } | { __typename: 'NewAsset', name: string, symbol: string, decimals: number, quantum: string, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string, withdrawThreshold: string, lifetimeLimit: string } } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket', instrument: { __typename?: 'InstrumentConfiguration', name: string, code: string, futureProduct?: { __typename?: 'FutureProduct', settlementAsset: { __typename?: 'Asset', symbol: string } } | null } } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset', quantum: string, assetId: string, source: { __typename?: 'UpdateERC20', lifetimeLimit: string, withdrawThreshold: string } } | { __typename?: 'UpdateMarket', marketId: string } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } }, votes: { __typename?: 'ProposalVotes', yes: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string }, no: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, totalEquityLikeShareWeight: string } } } } | null> | null } | null };

 export const ProposalFieldsFragmentDoc = gql`
    fragment ProposalFields on Proposal {
@@ -1,14 +1,23 @@
 import { useEffect, useMemo } from 'react';
 import { useParams } from 'react-router-dom';
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
-import { removePaginationWrapper, stripFullStops } from '@vegaprotocol/utils';
+import {
+  convertToCountdownString,
+  formatDateWithLocalTimezone,
+  removePaginationWrapper,
+  stripFullStops,
+} from '@vegaprotocol/utils';
 import * as Schema from '@vegaprotocol/types';

 import { ProtocolUpgradeProposal } from './protocol-upgrade-proposal';
 import { ProposalNotFound } from '../components/proposal-not-found';
 import { useNodesQuery } from '../../staking/home/__generated__/Nodes';
 import { useRefreshAfterEpoch } from '../../../hooks/use-refresh-after-epoch';
-import { useProtocolUpgradeProposalsQuery } from '@vegaprotocol/proposals';
+import {
+  useProtocolUpgradeProposalsQuery,
+  useTimeToUpgrade,
+} from '@vegaprotocol/proposals';
+import { useBlockInfo } from '@vegaprotocol/tendermint';

 export const ProtocolUpgradeProposalContainer = () => {
  const params = useParams<{ proposalReleaseTag: string }>();
@@ -58,6 +67,20 @@ export const ProtocolUpgradeProposalContainer = () => {
    );
  }, [nodesData]);

+  const pending =
+    Number(protocolUpgradeProposal?.upgradeBlockHeight) >
+    Number(data?.lastBlockHeight);
+
+  const {
+    state: { data: blockInfo },
+  } = useBlockInfo(
+    Number(protocolUpgradeProposal?.upgradeBlockHeight),
+    !pending
+  );
+  const time = useTimeToUpgrade(
+    Number(protocolUpgradeProposal?.upgradeBlockHeight)
+  );
+
  return (
    <AsyncRenderer
      loading={loading || nodesLoading}
@@ -69,6 +92,19 @@ export const ProtocolUpgradeProposalContainer = () => {
          proposal={protocolUpgradeProposal}
          lastBlockHeight={data?.lastBlockHeight}
          consensusValidators={consensusValidators}
+          time={
+            pending && time ? (
+              convertToCountdownString(time, '0:00:00:00')
+            ) : blockInfo?.result ? (
+              <span title={blockInfo.result.block.header.time}>
+                {formatDateWithLocalTimezone(
+                  new Date(blockInfo.result.block.header.time)
+                )}
+              </span>
+            ) : (
+              '-'
+            )
+          }
        />
      ) : (
        <ProposalNotFound />
@@ -1,10 +1,11 @@
 import { useMemo } from 'react';
+import type { ReactNode } from 'react';
 import { ProtocolUpgradeProposalDetailHeader } from '../components/protocol-upgrade-proposal-detail-header';
 import { ProtocolUpdateProposalDetailApprovals } from '../components/protocol-upgrade-proposal-detail-approvals';
 import { ProtocolUpgradeProposalDetailInfo } from '../components/protocol-upgrade-proposal-detail-info';
 import { getNormalisedVotingPower } from '../../staking/shared';
 import type { NodesFragmentFragment } from '../../staking/home/__generated__/Nodes';
-import type { ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
+import { type ProtocolUpgradeProposalFieldsFragment } from '@vegaprotocol/proposals';
 import { useVegaRelease } from '@vegaprotocol/environment';
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { useTranslation } from 'react-i18next';
@@ -13,6 +14,7 @@ export interface ProtocolUpgradeProposalProps {
  proposal: ProtocolUpgradeProposalFieldsFragment;
  consensusValidators: NodesFragmentFragment[] | null;
  lastBlockHeight?: string;
+  time?: string | ReactNode;
 }

 export const getConsensusApprovals = (
@@ -44,6 +46,7 @@ export const ProtocolUpgradeProposal = ({
  proposal,
  lastBlockHeight,
  consensusValidators,
+  time,
 }: ProtocolUpgradeProposalProps) => {
  const { t } = useTranslation();
  const releaseInfo = useVegaRelease(proposal.vegaReleaseTag);
@@ -73,6 +76,7 @@ export const ProtocolUpgradeProposal = ({
      <ProtocolUpgradeProposalDetailInfo
        proposal={proposal}
        lastBlockHeight={lastBlockHeight}
+        time={time}
      />

      {consensusValidators && consensusApprovals && (
@@ -216,7 +216,7 @@ export const StakingForm = ({
                  text: t('associateVegaNow'),
                  action: () => navigate(Routes.ASSOCIATE),
                  className: 'py-1',
-                  size: 'sm',
+                  size: 'small',
                }}
              />
            )}
@@ -54,7 +54,7 @@ describe('capsule - without MultiSign', { tags: '@slow' }, () => {

  it('can deposit', function () {
    cy.visit('/#/portfolio');
-    cy.get('main[data-testid="/portfolio"]').should('exist');
+    cy.get('[data-testid="pathname-/portfolio"]').should('exist');

    // 1001-DEPO-001
    // 1001-DEPO-002
@@ -117,7 +117,7 @@ describe('capsule - without MultiSign', { tags: '@slow' }, () => {
  it('can key to key transfers', function () {
    // 1003-TRAN-023
    // 1003-TRAN-006
-    cy.get('main[data-testid="/portfolio"]').should('exist');
+    cy.get('[data-testid="pathname-/portfolio"]').should('exist');

    cy.getByTestId(collateralTab).click();
    cy.getByTestId('open-transfer').click();
@@ -344,7 +344,7 @@ describe('capsule', { tags: '@slow', testIsolation: true }, () => {
    const ethWalletAddress = Cypress.env('ETHEREUM_WALLET_ADDRESS');

    cy.visit('/#/portfolio');
-    cy.get('main[data-testid="/portfolio"]').should('exist');
+    cy.get('[data-testid="pathname-/portfolio"]').should('exist');
    cy.getByTestId(toastCloseBtn, txTimeout).click();
    cy.getByTestId('Withdrawals').click();
    cy.getByTestId('withdraw-dialog-button').click();
@@ -431,7 +431,7 @@ describe('capsule', { tags: '@slow', testIsolation: true }, () => {
    // 1001-DEPO-006
    // 1001-DEPO-007
    cy.visit('/#/portfolio');
-    cy.get('main[data-testid="/portfolio"]').should('exist');
+    cy.get('[data-testid="pathname-/portfolio"]').should('exist');
    cy.getByTestId(toastCloseBtn, txTimeout).click();
    cy.getByTestId(depositsTab).click();
    cy.getByTestId('deposit-button').click();
@@ -453,7 +453,7 @@ describe('capsule', { tags: '@slow', testIsolation: true }, () => {
    // 1002-WITH-007

    cy.visit('/#/portfolio');
-    cy.get('main[data-testid="/portfolio"]', txTimeout).should('exist');
+    cy.get('[data-testid="pathname-/portfolio"]', txTimeout).should('exist');
    cy.getByTestId(toastCloseBtn, txTimeout).click();
    cy.getByTestId(depositsTab).click();
    cy.getByTestId('deposit-button').click();
@@ -351,12 +351,6 @@ describe('Closed markets', { tags: '@smoke' }, () => {
        )
      );

-    // 6001-MARK-017
-    cy.get(rowSelector)
-      .first()
-      .find('[col-id="realisedPNL"]')
-      .should('have.text', '-');
-
    // 6001-MARK-018
    cy.get(rowSelector)
      .first()
@@ -369,6 +363,10 @@ describe('Closed markets', { tags: '@smoke' }, () => {
      .first()
      .find('button svg')
      .should('exist');
+    cy.get(rowSelector)
+      .find('[col-id="successorMarketID"]')
+      .first()
+      .should('have.text', ' - ');
  });

  // test market list for market in terminated state
@@ -17,7 +17,7 @@ describe('deposit form validation', { tags: '@smoke' }, () => {
    cy.mockTradingPage();
    cy.setVegaWallet();
    cy.visit('/#/portfolio');
-    cy.get('main[data-testid="/portfolio"]').should('exist');
+    cy.get('[data-testid="pathname-/portfolio"]').should('exist');
    cy.getByTestId('Deposits').click();
    cy.getByTestId('deposit-button').click();
    connectEthereumWallet('MetaMask');
@@ -106,7 +106,7 @@ describe('home', { tags: '@regression' }, () => {
      cy.visit('/');
      cy.wait('@Markets');

-      cy.get('main[data-testid^="/markets/"]');
+      cy.get('[data-testid^="pathname-/markets/"]');

      // the choose market overlay is no longer showing
      cy.contains('Loading...').should('not.exist');
@@ -37,27 +37,23 @@ describe('markets selector', { tags: '@smoke' }, () => {
    const data = [
      {
        code: 'SOLUSD',
-        markPrice: 'XYZalpha84.41',
-        change: '',
-        vol: '24h vol0.00',
+        markPrice: '84.41',
+        vol: '0.00',
      },
      {
        code: 'ETHBTC.QM21',
-        markPrice: 'tBTC46,126.90058',
-        change: '',
-        vol: '24h vol0.00',
+        markPrice: '46,126.90058',
+        vol: '0.00',
      },
      {
        code: 'BTCUSD.MF21',
-        markPrice: 'tDAI46,126.90058',
-        change: '',
-        vol: '24h vol0.00',
+        markPrice: '46,126.90058',
+        vol: '0.00',
      },
      {
        code: 'AAPL.MF21',
-        markPrice: 'tUSDC46,126.90058',
-        change: '',
-        vol: '24h vol0.00',
+        markPrice: '46,126.90058',
+        vol: '0.00',
      },
    ];
    cy.getByTestId('header-title').should('be.visible').click();
@@ -69,16 +65,12 @@ describe('markets selector', { tags: '@smoke' }, () => {
        // 6001-MARK-022
        expect(item.find('h3').text()).equals(market.code);
        expect(
-          item.find('[data-testid="market-selector-data-row"]').eq(0).text()
+          item.find('[data-testid="market-selector-volume"]').text()
        ).contains(market.vol);
        // 6001-MARK-024
        expect(
-          item.find('[data-testid="market-selector-data-row"]').eq(1).text()
+          item.find('[data-testid="market-selector-price"]').text()
        ).contains(market.markPrice);
-        // 6001-MARK-023
-        expect(item.find('[data-testid="market-item-change"]').text()).equals(
-          market.change
-        );
        // 6001-MARK-025
        expect(item.find('[data-testid="sparkline-svg"]')).to.not.exist;
      });
@@ -9,6 +9,7 @@ const bidCumulative = 'cumulative-vol-9889001';
 const midPrice = 'middle-mark-price-4612690000';
 const priceResolution = 'resolution';
 const dealTicketPrice = 'order-price';
+const dealTicketSize = 'order-size';
 const resPrice = 'price-990';

 describe('order book', { tags: '@smoke' }, () => {
@@ -74,6 +75,18 @@ describe('order book', { tags: '@smoke' }, () => {
    cy.getByTestId(dealTicketPrice).should('have.value', '98.94185');
  });

+  it('copy size to deal ticket form', () => {
+    // 6003-ORDB-009
+    cy.getByTestId(bidCumulative).click();
+    cy.getByTestId(dealTicketSize).should('have.value', '7');
+  });
+
+  it('copy size to deal ticket form', () => {
+    // 6003-ORDB-009
+    cy.getByTestId(bidVolume).click();
+    cy.getByTestId(dealTicketSize).should('have.value', '1');
+  });
+
  it('change price resolution', () => {
    // 6003-ORDB-008
    const resolutions = [
@@ -88,13 +101,14 @@ describe('order book', { tags: '@smoke' }, () => {
      '1,000',
      '10,000',
    ];
-    cy.getByTestId(priceResolution)
-      .find('option')
+    cy.getByTestId(priceResolution).click();
+    cy.get('[role="menu"]')
+      .find('[role="menuitem"]')
      .each(($el, index) => {
        expect($el.text()).to.equal(resolutions[index]);
      });

-    cy.getByTestId(priceResolution).select('0.0');
+    cy.get('[role="menuitem"]').eq(4).click();
    cy.getByTestId(resPrice).should('have.text', '99.0');
    cy.getByTestId(askPrice).should('not.exist');
    cy.getByTestId(bidPrice).should('not.exist');
@@ -14,6 +14,12 @@ describe('deal ticker order validation', { tags: '@smoke' }, () => {
    cy.mockSubscription();
    cy.visit('/#/markets/market-0');
    cy.wait('@Markets');
+
+    cy.get('[data-testid="deal-ticket-form"]').then(($form) => {
+      if (!$form.length) {
+        cy.getByTestId('Order').click();
+      }
+    });
  });

  beforeEach(() => {
@@ -59,6 +59,12 @@ describe(
        cy.mockSubscription();
        cy.visit('/#/markets/market-0');
        cy.wait('@Markets');
+
+        cy.get('[data-testid="deal-ticket-form"]').then(($form) => {
+          if (!$form.length) {
+            cy.getByTestId('Order').click();
+          }
+        });
      });

      it('should display info and button for deposit', () => {
@@ -37,7 +37,7 @@ describe('fills', { tags: '@regression' }, () => {

  it('renders fills on portfolio page', () => {
    cy.visit('/#/portfolio');
-    cy.get('main[data-testid="/portfolio"]').should('exist');
+    cy.get('[data-testid="pathname-/portfolio"]').should('exist');
    cy.getByTestId('Fills').click();
    validateFillsDisplayed();
  });
@@ -50,7 +50,7 @@ describe('Portfolio page', { tags: '@smoke' }, () => {
      cy.get('fieldset.ag-simple-filter-body-wrapper')
        .should('be.visible')
        .within((fields) => {
-          cy.wrap(fields).find('label').should('have.length', 16);
+          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');
@@ -10,7 +10,7 @@ describe('ethereum wallet', { tags: '@smoke', testIsolation: true }, () => {
    cy.mockSubscription();
    cy.setVegaWallet();
    cy.visit('/#/portfolio');
-    cy.get('main[data-testid="/portfolio"]').should('exist');
+    cy.get('[data-testid="pathname-/portfolio"]').should('exist');
    cy.getByTestId('Withdrawals').click();
  });

@@ -17,7 +17,7 @@ describe(
      cy.visit('/#/portfolio');
      cy.mockTradingPage();
      cy.mockSubscription();
-      cy.get('main[data-testid="/portfolio"]').should('exist');
+      cy.get('[data-testid="pathname-/portfolio"]').should('exist');
    });

    it('can connect', () => {
@@ -122,7 +122,7 @@ describe('connect vega wallet', { tags: '@smoke', testIsolation: true }, () => {
    cy.visit('/#/portfolio');
    cy.mockTradingPage();
    cy.mockSubscription();
-    cy.get('main[data-testid="/portfolio"]').should('exist');
+    cy.get('[data-testid="pathname-/portfolio"]').should('exist');
  });

  it('can connect', () => {
@@ -1,5 +1,5 @@
 import { selectAsset } from '../support/helpers';
-// #region consts
+
 const amountField = 'input[name="amount"]';
 const amountShortName = 'input[name="amount"] + div + span.text-xs';
 const assetSelection = 'select-asset';
@@ -26,7 +26,6 @@ const ASSET_SEPOLIA_TBTC = 2;
 const collateralTab = 'Collateral';
 const toastCloseBtn = 'toast-close';
 const toastContent = 'toast-content';
-// #endregion

 describe('transfer fees', { tags: '@regression', testIsolation: true }, () => {
  beforeEach(() => {
@@ -37,17 +36,17 @@ describe('transfer fees', { tags: '@regression', testIsolation: true }, () => {

    cy.visit('/');

+    cy.wait('@Assets');
+    cy.wait('@Accounts');
+
+    cy.mockVegaWalletTransaction();
+
    // Only click if not already active otherwise sidebar will close
    cy.get('[data-testid="sidebar-content"]').then(($sidebarContent) => {
      if ($sidebarContent.find('h2').text() !== 'Transfer') {
        cy.get('[data-testid="sidebar"] [data-testid="Transfer"]').click();
      }
    });
-
-    cy.wait('@Assets');
-    cy.wait('@Accounts');
-
-    cy.mockVegaWalletTransaction();
  });

  it('transfer fees tooltips', () => {
@@ -3,9 +3,9 @@ NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_SENTRY_DSN=https://2ffce43721964aafa78277c50654ece4@o286262.ingest.sentry.io/6300613
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/mainnet-mirror/vegawallet-mainnet-mirror.toml
-NX_VEGA_ENV=MAINNET-MIRROR
+NX_VEGA_ENV=MAINNET_MIRROR
 NX_VEGA_EXPLORER_URL=https://explorer.mainnet-mirror.vega.rocks
-NX_VEGA_NETWORKS={\"MAINNET\":\"https://console.vega.xyz\",\"TESTNET\":\"https://console.fairground.wtf\",\"STAGNET1\":\"https://trading.stagnet1.vega.rocks\",\"MAINNET-MIRROR\":\"https://trading.mainnet-mirror.vega.rocks\"}
+NX_VEGA_NETWORKS={\"MAINNET\":\"https://console.vega.xyz\",\"TESTNET\":\"https://console.fairground.wtf\",\"STAGNET1\":\"https://trading.stagnet1.vega.rocks\",\"MAINNET_MIRROR\":\"https://trading.mainnet-mirror.vega.rocks\"}
 NX_VEGA_TOKEN_URL=https://governance.mainnet-mirror.vega.rocks
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/mainnet
@@ -1,29 +1,10 @@
-import {
-  matchFilter,
-  lpAggregatedDataProvider,
-  useCheckLiquidityStatus,
-} from '@vegaprotocol/liquidity';
-import { tooltipMapping } from '@vegaprotocol/markets';
-import {
-  addDecimalsFormatNumber,
-  formatNumberPercentage,
-} from '@vegaprotocol/utils';
+import { matchFilter, lpAggregatedDataProvider } from '@vegaprotocol/liquidity';
 import { t } from '@vegaprotocol/i18n';
-import {
-  NetworkParams,
-  useNetworkParams,
-} from '@vegaprotocol/network-parameters';
 import { useDataProvider } from '@vegaprotocol/data-provider';
-import { Tab, Tabs, Indicator, ExternalLink } from '@vegaprotocol/ui-toolkit';
+import { Tab, Tabs } from '@vegaprotocol/ui-toolkit';
 import { useVegaWallet } from '@vegaprotocol/wallet';
-import { memo, useEffect, useState } from 'react';
-
-import { Header, HeaderStat, HeaderTitle } from '../../components/header';
-
+import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
-
-import { useMarket, useStaticMarketData } from '@vegaprotocol/markets';
-import { DocsLinks } from '@vegaprotocol/environment';
 import { LiquidityContainer } from '../../components/liquidity-container';

 const enum LiquidityTabs {
@@ -38,92 +19,6 @@ export const Liquidity = () => {
  return <LiquidityViewContainer marketId={marketId} />;
 };

-const LiquidityViewHeader = memo(({ marketId }: { marketId?: string }) => {
-  const { data: market } = useMarket(marketId);
-  const { data: marketData } = useStaticMarketData(marketId);
-  const targetStake = marketData?.targetStake;
-  const suppliedStake = marketData?.suppliedStake;
-  const assetDecimalPlaces =
-    market?.tradableInstrument.instrument.product.settlementAsset.decimals || 0;
-  const symbol =
-    market?.tradableInstrument.instrument.product.settlementAsset.symbol;
-
-  const { params } = useNetworkParams([
-    NetworkParams.market_liquidity_stakeToCcyVolume,
-    NetworkParams.market_liquidity_targetstake_triggering_ratio,
-  ]);
-  const triggeringRatio =
-    params.market_liquidity_targetstake_triggering_ratio || '1';
-
-  const { percentage, status } = useCheckLiquidityStatus({
-    suppliedStake: suppliedStake || 0,
-    targetStake: targetStake || 0,
-    triggeringRatio,
-  });
-
-  return (
-    <Header
-      title={
-        market?.tradableInstrument.instrument.code &&
-        marketId && (
-          <HeaderTitle>
-            {market.tradableInstrument.instrument.code &&
-              t(
-                '%s liquidity provision',
-                market.tradableInstrument.instrument.code
-              )}
-          </HeaderTitle>
-        )
-      }
-    >
-      <HeaderStat
-        heading={t('Target stake')}
-        description={tooltipMapping['targetStake']}
-        testId="target-stake"
-      >
-        <div>
-          {targetStake
-            ? `${addDecimalsFormatNumber(
-                targetStake,
-                assetDecimalPlaces ?? 0
-              )} ${symbol}`
-            : '-'}
-        </div>
-      </HeaderStat>
-      <HeaderStat
-        heading={t('Supplied stake')}
-        description={tooltipMapping['suppliedStake']}
-        testId="supplied-stake"
-      >
-        <div>
-          {suppliedStake
-            ? `${addDecimalsFormatNumber(
-                suppliedStake,
-                assetDecimalPlaces ?? 0
-              )} ${symbol}`
-            : '-'}
-        </div>
-      </HeaderStat>
-      <HeaderStat heading={t('Liquidity supplied')} testId="liquidity-supplied">
-        <Indicator variant={status} /> {formatNumberPercentage(percentage, 2)}
-      </HeaderStat>
-      <HeaderStat heading={t('Market ID')} testId="liquidity-market-id">
-        <div className="break-word">{marketId}</div>
-      </HeaderStat>
-      <HeaderStat heading={t('Learn more')} testId="liquidity-learn-more">
-        {DocsLinks ? (
-          <ExternalLink href={DocsLinks.LIQUIDITY}>
-            {t('Providing liquidity')}
-          </ExternalLink>
-        ) : (
-          (null as React.ReactNode)
-        )}
-      </HeaderStat>
-    </Header>
-  );
-});
-LiquidityViewHeader.displayName = 'LiquidityViewHeader';
-
 export const LiquidityViewContainer = ({
  marketId,
 }: {
@@ -154,35 +49,29 @@ export const LiquidityViewContainer = ({
  }, [data, pubKey]);

  return (
-    <div className="h-full grid grid-rows-[min-content_1fr]">
-      <LiquidityViewHeader marketId={marketId} />
-      <div className="p-1">
-        <div className="h-full border border-default">
-          <Tabs value={tab || LiquidityTabs.Active} onValueChange={setTab}>
-            <Tab
-              id={LiquidityTabs.MyLiquidityProvision}
-              name={t('My liquidity provision')}
-              hidden={!pubKey}
-            >
-              <LiquidityContainer
-                marketId={marketId}
-                filter={{ partyId: pubKey || undefined }}
-              />
-            </Tab>
-            <Tab id={LiquidityTabs.Active} name={t('Active')}>
-              <LiquidityContainer
-                marketId={marketId}
-                filter={{ active: true }}
-              />
-            </Tab>
-            <Tab id={LiquidityTabs.Inactive} name={t('Inactive')}>
-              <LiquidityContainer
-                marketId={marketId}
-                filter={{ active: false }}
-              />
-            </Tab>
-          </Tabs>
-        </div>
+    <div className="h-full p-1.5">
+      <div className="h-full border border-default">
+        <Tabs value={tab || LiquidityTabs.Active} onValueChange={setTab}>
+          <Tab
+            id={LiquidityTabs.MyLiquidityProvision}
+            name={t('My liquidity provision')}
+            hidden={!pubKey}
+          >
+            <LiquidityContainer
+              marketId={marketId}
+              filter={{ partyId: pubKey || undefined }}
+            />
+          </Tab>
+          <Tab id={LiquidityTabs.Active} name={t('Active')}>
+            <LiquidityContainer marketId={marketId} filter={{ active: true }} />
+          </Tab>
+          <Tab id={LiquidityTabs.Inactive} name={t('Inactive')}>
+            <LiquidityContainer
+              marketId={marketId}
+              filter={{ active: false }}
+            />
+          </Tab>
+        </Tabs>
      </div>
    </div>
  );
@@ -2,12 +2,9 @@ import React, { useEffect, useMemo } from 'react';
 import { addDecimalsFormatNumber, titlefy } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import { useScreenDimensions } from '@vegaprotocol/react-helpers';
-import {
-  useDataProvider,
-  useThrottledDataProvider,
-} from '@vegaprotocol/data-provider';
+import { useThrottledDataProvider } from '@vegaprotocol/data-provider';
 import { AsyncRenderer, ExternalLink, Splash } from '@vegaprotocol/ui-toolkit';
-import { marketProvider, marketDataProvider } from '@vegaprotocol/markets';
+import { marketDataProvider, useMarket } from '@vegaprotocol/markets';
 import { useGlobalStore, usePageTitleStore } from '../../stores';
 import { TradeGrid } from './trade-grid';
 import { TradePanels } from './trade-panels';
@@ -70,11 +67,7 @@ export const MarketPage = () => {

  const onSelect = useMarketClickHandler();

-  const { data, error, loading } = useDataProvider({
-    dataProvider: marketProvider,
-    variables: { marketId: marketId || '' },
-    skip: !marketId,
-  });
+  const { data, error, loading } = useMarket(marketId);

  useEffect(() => {
    if (data?.id && data.id !== lastMarketId) {
@@ -8,16 +8,9 @@ import { t } from '@vegaprotocol/i18n';
 import { OracleBanner } from '@vegaprotocol/markets';
 import type { Market } from '@vegaprotocol/markets';
 import { Filter } from '@vegaprotocol/orders';
-import {
-  Popover,
-  Tab,
-  LocalStoragePersistTabs as Tabs,
-  VegaIcon,
-  VegaIconNames,
-} from '@vegaprotocol/ui-toolkit';
+import { Tab, LocalStoragePersistTabs as Tabs } from '@vegaprotocol/ui-toolkit';
 import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
 import { VegaWalletContainer } from '../../components/vega-wallet-container';
-import { Header, HeaderTitle } from '../../components/header';
 import {
  ResizableGrid,
  ResizableGridPanel,
@@ -25,8 +18,6 @@ import {
 } from '../../components/resizable-grid';
 import { TradingViews } from './trade-views';
 import { MarketSuccessorBanner } from '../../components/market-banner';
-import { MarketSelector } from './market-selector';
-import { MarketHeaderStats } from './market-header-stats';
 interface TradeGridProps {
  market: Market | null;
  onSelect: (marketId: string, metaKey?: boolean) => void;
@@ -163,32 +154,16 @@ MainGrid.displayName = 'MainGrid';
 export const TradeGrid = ({ market, pinnedAsset }: TradeGridProps) => {
  const wrapperClasses = classNames(
    'h-full grid',
-    'grid-rows-[min-content_min-content_1fr]'
+    'grid-rows-[min-content_1fr]'
  );

  return (
    <div className={wrapperClasses}>
-      <Header
-        title={
-          <Popover
-            trigger={
-              <HeaderTitle>
-                {market?.tradableInstrument.instrument.code}
-                <VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={14} />
-              </HeaderTitle>
-            }
-          >
-            <MarketSelector currentMarketId={market?.id} />
-          </Popover>
-        }
-      >
-        <MarketHeaderStats market={market} />
-      </Header>
-      <div className="bg-vega-green">
+      <div>
        <MarketSuccessorBanner market={market} />
        <OracleBanner marketId={market?.id || ''} />
      </div>
-      <div className="min-h-0 py-0.5">
+      <div className="min-h-0 p-0.5">
        <MainGrid marketId={market?.id || ''} pinnedAsset={pinnedAsset} />
      </div>
    </div>
@@ -8,19 +8,11 @@ import {
 import type { TradingView } from './trade-views';
 import { TradingViews } from './trade-views';
 import { memo, useState } from 'react';
-import {
-  Popover,
-  Splash,
-  VegaIcon,
-  VegaIconNames,
-} from '@vegaprotocol/ui-toolkit';
+import { Splash } from '@vegaprotocol/ui-toolkit';
 import { NO_MARKET } from './constants';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import classNames from 'classnames';
-import { Header, HeaderTitle } from '../../components/header';
-import { MarketSelector } from './market-selector';
 import { MarketSuccessorBanner } from '../../components/market-banner';
-import { MarketHeaderStats } from './market-header-stats';

 interface TradePanelsProps {
  market: Market | null;
@@ -70,23 +62,7 @@ export const TradePanels = ({
  };

  return (
-    <div className="h-full grid grid-rows-[min-content_min-content_1fr_min-content]">
-      <Header
-        title={
-          <Popover
-            trigger={
-              <HeaderTitle>
-                {market?.tradableInstrument.instrument.code}
-                <VegaIcon name={VegaIconNames.CHEVRON_DOWN} />
-              </HeaderTitle>
-            }
-          >
-            <MarketSelector currentMarketId={market?.id} />
-          </Popover>
-        }
-      >
-        <MarketHeaderStats market={market} />
-      </Header>
+    <div className="h-full grid grid-rows-[min-content_1fr_min-content]">
      <div>
        <MarketSuccessorBanner market={market} />
        <OracleBanner marketId={market?.id || ''} />
@@ -3,9 +3,9 @@ import { Splash } from '@vegaprotocol/ui-toolkit';
 import { TradesContainer } from '@vegaprotocol/trades';
 import { DepthChartContainer } from '@vegaprotocol/market-depth';
 import { CandlesChartContainer } from '@vegaprotocol/candles-chart';
-import { OrderbookContainer } from '@vegaprotocol/market-depth';
 import { Filter } from '@vegaprotocol/orders';
 import { NO_MARKET } from './constants';
+import { OrderbookContainer } from '../../components/orderbook-container';
 import { FillsContainer } from '../../components/fills-container';
 import { PositionsContainer } from '../../components/positions-container';
 import { AccountsContainer } from '../../components/accounts-container';
@@ -1,7 +1,7 @@
-import { act, render, screen, within } from '@testing-library/react';
+import { act, render, screen, within, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
 import { Closed } from './closed';
 import { MarketStateMapping, PropertyKeyType } from '@vegaprotocol/types';
-import { PositionStatus } from '@vegaprotocol/types';
 import { MarketState } from '@vegaprotocol/types';
 import { subDays } from 'date-fns';
 import type { MockedResponse } from '@apollo/client/testing';
@@ -18,11 +18,6 @@ import {
 } from '@vegaprotocol/markets';
 import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
 import { VegaWalletContext } from '@vegaprotocol/wallet';
-import type {
-  PositionsQuery,
-  PositionFieldsFragment,
-} from '@vegaprotocol/positions';
-import { PositionsDocument } from '@vegaprotocol/positions';
 import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
 import {
  createMarketFragment,
@@ -160,45 +155,6 @@ describe('Closed', () => {
    },
  };

-  // Create mock position
-  const createPosition = (): PositionFieldsFragment => {
-    return {
-      __typename: 'Position' as const,
-      realisedPNL: '1000',
-      unrealisedPNL: '2000',
-      openVolume: '3000',
-      averageEntryPrice: '100',
-      updatedAt: new Date().toISOString(),
-      positionStatus: PositionStatus.POSITION_STATUS_UNSPECIFIED,
-      lossSocializationAmount: '1000',
-      market: {
-        __typename: 'Market',
-        id: marketId,
-      },
-      party: {
-        __typename: 'Party',
-        id: pubKey,
-      },
-    };
-  };
-  const position = createPosition();
-  const positionsMock: MockedResponse<PositionsQuery> = {
-    request: {
-      query: PositionsDocument,
-      variables: {
-        partyIds: [pubKey],
-      },
-    },
-    result: {
-      data: {
-        positions: {
-          __typename: 'PositionConnection',
-          edges: [{ __typename: 'PositionEdge', node: position }],
-        },
-      },
-    },
-  };
-
  beforeAll(() => {
    originalNow = Date.now;
    Date.now = jest.fn().mockReturnValue(mockNowTimestamp);
@@ -211,15 +167,17 @@ describe('Closed', () => {
  it('renders correctly formatted and filtered rows', async () => {
    await act(async () => {
      render(
-        <MockedProvider
-          mocks={[marketsMock, marketsDataMock, positionsMock, oracleDataMock]}
-        >
-          <VegaWalletContext.Provider
-            value={{ pubKey } as VegaWalletContextShape}
+        <MemoryRouter>
+          <MockedProvider
+            mocks={[marketsMock, marketsDataMock, oracleDataMock]}
          >
-            <Closed />
-          </VegaWalletContext.Provider>
-        </MockedProvider>
+            <VegaWalletContext.Provider
+              value={{ pubKey } as VegaWalletContextShape}
+            >
+              <Closed />
+            </VegaWalletContext.Provider>
+          </MockedProvider>
+        </MemoryRouter>
      );
    });
    // screen.debug(document, Infinity);
@@ -230,11 +188,11 @@ describe('Closed', () => {
      'Description',
      'Status',
      'Settlement date',
+      'Successor market',
      'Best bid',
      'Best offer',
      'Mark price',
      'Settlement price',
-      'Realised PNL',
      'Settlement asset',
      '', // actions row
    ];
@@ -247,6 +205,7 @@ describe('Closed', () => {
      market.tradableInstrument.instrument.name,
      MarketStateMapping[market.state],
      '3 days ago',
+      '-',
      /* eslint-disable @typescript-eslint/no-non-null-assertion */
      addDecimalsFormatNumber(marketsData.bestBidPrice, market.decimalPlaces),
      addDecimalsFormatNumber(
@@ -256,7 +215,6 @@ describe('Closed', () => {
      addDecimalsFormatNumber(marketsData!.markPrice, market.decimalPlaces),
      /* eslint-enable @typescript-eslint/no-non-null-assertion */
      addDecimalsFormatNumber(property.value, market.decimalPlaces),
-      addDecimalsFormatNumber(position.realisedPNL, market.decimalPlaces),
      market.tradableInstrument.instrument.product.settlementAsset.symbol,
      '', // actions row
    ];
@@ -315,20 +273,17 @@ describe('Closed', () => {
    };
    await act(async () => {
      render(
-        <MockedProvider
-          mocks={[
-            mixedMarketsMock,
-            marketsDataMock,
-            positionsMock,
-            oracleDataMock,
-          ]}
-        >
-          <VegaWalletContext.Provider
-            value={{ pubKey } as VegaWalletContextShape}
+        <MemoryRouter>
+          <MockedProvider
+            mocks={[mixedMarketsMock, marketsDataMock, oracleDataMock]}
          >
-            <Closed />
-          </VegaWalletContext.Provider>
-        </MockedProvider>
+            <VegaWalletContext.Provider
+              value={{ pubKey } as VegaWalletContextShape}
+            >
+              <Closed />
+            </VegaWalletContext.Provider>
+          </MockedProvider>
+        </MemoryRouter>
      );
    });

@@ -359,4 +314,69 @@ describe('Closed', () => {
      });
    expect(cells).toEqual(expectedRows.map((m) => m.node.id));
  });
+
+  it('successor marked should be visible', async () => {
+    const mixedMarkets = [
+      {
+        __typename: 'MarketEdge' as const,
+        node: createMarketFragment({
+          id: 'include-0',
+          state: MarketState.STATE_SETTLED,
+          successorMarketID: 'successorMarketID',
+        }),
+      },
+      {
+        __typename: 'MarketEdge' as const,
+        node: {
+          ...createMarketFragment({
+            id: 'successorMarketID',
+            state: MarketState.STATE_ACTIVE,
+          }),
+          tradableInstrument: {
+            ...createMarketFragment().tradableInstrument,
+            instrument: {
+              ...createMarketFragment().tradableInstrument.instrument,
+              id: 'successorAssset',
+              name: 'Successor Market Name',
+              code: 'SuccessorCode',
+            },
+          },
+        },
+      },
+    ];
+
+    const mixedMarketsMock: MockedResponse<MarketsQuery> = {
+      request: {
+        query: MarketsDocument,
+      },
+      result: {
+        data: {
+          marketsConnection: {
+            __typename: 'MarketConnection',
+            edges: mixedMarkets,
+          },
+        },
+      },
+    };
+
+    render(
+      <MemoryRouter>
+        <MockedProvider
+          mocks={[mixedMarketsMock, marketsDataMock, oracleDataMock]}
+        >
+          <VegaWalletContext.Provider
+            value={{ pubKey } as VegaWalletContextShape}
+          >
+            <Closed />
+          </VegaWalletContext.Provider>
+        </MockedProvider>
+      </MemoryRouter>
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', { name: 'SuccessorCode' })
+      ).toBeInTheDocument();
+    });
+  });
 });
@@ -4,7 +4,11 @@ import type {
  VegaICellRendererParams,
  VegaValueFormatterParams,
 } from '@vegaprotocol/datagrid';
-import { AgGridLazy as AgGrid, COL_DEFS } from '@vegaprotocol/datagrid';
+import {
+  AgGridLazy as AgGrid,
+  COL_DEFS,
+  MarketNameCell,
+} from '@vegaprotocol/datagrid';
 import { useMemo } from 'react';
 import { t } from '@vegaprotocol/i18n';
 import { MarketState, MarketStateMapping } from '@vegaprotocol/types';
@@ -12,7 +16,6 @@ import {
  addDecimalsFormatNumber,
  getMarketExpiryDate,
 } from '@vegaprotocol/utils';
-import { usePositionsQuery } from '@vegaprotocol/positions';
 import type {
  DataSourceFilterFragment,
  MarketMaybeWithData,
@@ -20,13 +23,14 @@ import type {
 import {
  MarketActionsDropdown,
  closedMarketsWithDataProvider,
+  marketProvider,
 } from '@vegaprotocol/markets';
-import { useVegaWallet } from '@vegaprotocol/wallet';
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
 import type { ColDef } from 'ag-grid-community';
 import { SettlementDateCell } from './settlement-date-cell';
 import { SettlementPriceCell } from './settlement-price-cell';
 import { useDataProvider } from '@vegaprotocol/data-provider';
+import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';

 type SettlementAsset =
  MarketMaybeWithData['tradableInstrument']['instrument']['product']['settlementAsset'];
@@ -47,33 +51,18 @@ interface Row {
  setlementDataSourceFilter: DataSourceFilterFragment | undefined;
  tradingTerminationOracleId: string;
  settlementAsset: SettlementAsset;
-  realisedPNL: string | undefined;
+  successorMarketID: string | undefined | null;
 }

 export const Closed = () => {
-  const { pubKey } = useVegaWallet();
-  const {
-    data: marketData,
-    error,
-    reload,
-  } = useDataProvider({
+  const { data: marketData, error } = useDataProvider({
    dataProvider: closedMarketsWithDataProvider,
    variables: undefined,
  });
-  const { data: positionData } = usePositionsQuery({
-    variables: {
-      partyIds: pubKey ? [pubKey] : [],
-    },
-    skip: !pubKey,
-  });

  // find a position for each market and add the realised pnl to
  // a normalized object
  const rowData = compact(marketData).map((market) => {
-    const position = positionData?.positions?.edges?.find((edge) => {
-      return edge.node.market.id === market.id;
-    });
-
    const instrument = market.tradableInstrument.instrument;

    const spec =
@@ -108,26 +97,46 @@ export const Closed = () => {
      tradingTerminationOracleId:
        instrument.product.dataSourceSpecForTradingTermination.id,
      settlementAsset: instrument.product.settlementAsset,
-      realisedPNL: position?.node.realisedPNL,
+      successorMarketID: market.successorMarketID,
    };

    return row;
  });
  return (
    <div className="h-full relative">
-      <ClosedMarketsDataGrid rowData={rowData} error={error} reload={reload} />
+      <ClosedMarketsDataGrid rowData={rowData} error={error} />
    </div>
  );
 };

+export const SuccessorMarketRenderer = ({
+  value,
+}: VegaICellRendererParams<Row, 'successorMarketID'>) => {
+  const { data } = useDataProvider({
+    dataProvider: marketProvider,
+    variables: {
+      marketId: value || '',
+    },
+    skip: !value,
+  });
+  const onMarketClick = useMarketClickHandler();
+  return data ? (
+    <MarketNameCell
+      value={data.tradableInstrument.instrument.code}
+      data={data}
+      onMarketClick={onMarketClick}
+    />
+  ) : (
+    ' - '
+  );
+};
+
 const ClosedMarketsDataGrid = ({
  rowData,
  error,
-  reload,
 }: {
  rowData: Row[];
  error: Error | undefined;
-  reload: () => void;
 }) => {
  const openAssetDialog = useAssetDetailsDialogStore((store) => store.open);
  const colDefs = useMemo(() => {
@@ -199,6 +208,11 @@ const ClosedMarketsDataGrid = ({
          },
        },
      },
+      {
+        headerName: t('Successor market'),
+        field: 'successorMarketID',
+        cellRenderer: 'SuccessorMarketRenderer',
+      },
      {
        headerName: t('Best bid'),
        field: 'bestBidPrice',
@@ -254,25 +268,11 @@ const ClosedMarketsDataGrid = ({
          />
        ),
      },
-      {
-        headerName: t('Realised PNL'),
-        field: 'realisedPNL',
-        cellClass: 'font-mono ag-right-aligned-cell',
-        type: 'numericColumn',
-        valueFormatter: ({
-          value,
-          data,
-        }: VegaValueFormatterParams<Row, 'realisedPNL'>) => {
-          if (!value || !data) return '-';
-          return addDecimalsFormatNumber(value, data.decimalPlaces);
-        },
-      },
      {
        headerName: t('Settlement asset'),
        field: 'settlementAsset',
        cellRenderer: ({
          value,
-          data,
        }: VegaValueFormatterParams<Row, 'settlementAsset'>) => (
          <button
            className="underline"
@@ -311,7 +311,9 @@ const ClosedMarketsDataGrid = ({
      defaultColDef={{
        resizable: true,
        minWidth: 100,
+        flex: 1,
      }}
+      components={{ SuccessorMarketRenderer }}
      overlayNoRowsTemplate={error ? error.message : t('No markets')}
    />
  );
@@ -15,7 +15,7 @@ export const MarketsPage = () => {
    updateTitle(titlefy(['Markets']));
  }, [updateTitle]);
  return (
-    <div className="h-full pt-0.5 pb-3 px-1">
+    <div className="h-full pt-0.5 pb-3 px-1.5">
      <div className="h-full my-1 border border-default rounded-sm">
        <Tabs storageKey="console-markets">
          <Tab id="all-markets" name={t('All markets')}>
@@ -54,7 +54,7 @@ export const Portfolio = () => {

  const onMarketClick = useMarketClickHandler(true);
  const [sizes, handleOnLayoutChange] = usePaneLayout({ id: 'portfolio' });
-  const wrapperClasses = 'py-0.5 h-full max-h-full flex flex-col';
+  const wrapperClasses = 'p-0.5 h-full max-h-full flex flex-col';
  return (
    <div className={wrapperClasses}>
      <ResizableGrid vertical onChange={handleOnLayoutChange}>
@@ -12,19 +12,17 @@ export const Header = ({ title, children }: TradeMarketHeaderProps) => {
    'grid',
    'grid-rows-[min-content_min-content]',
    'xl:grid-cols-[min-content_1fr]',
-    'lg:border-x border-b border-default',
+    'border-b border-default',
    'bg-vega-clight-800 dark:bg-vega-cdark-800'
  );
  return (
-    <header className="lg:px-1">
-      <div className={headerClasses}>
-        <div className="flex flex-col justify-center items-start pl-3 lg:pl-4 pt-2 xl:pb-2 pb-0">
-          {title}
-        </div>
-        <div data-testid="header-summary" className="min-w-0">
-          <div className="px-3 lg:px-4 py-2 flex flex-nowrap gap-4 items-center text-xs overflow-x-auto">
-            {children}
-          </div>
+    <header className={headerClasses}>
+      <div className="flex flex-col justify-center items-start pl-3 lg:pl-4 pt-2 xl:pb-2 pb-0">
+        {title}
+      </div>
+      <div data-testid="header-summary" className="min-w-0">
+        <div className="px-3 lg:px-4 py-2 flex flex-nowrap gap-4 items-center text-xs overflow-x-auto">
+          {children}
        </div>
      </div>
    </header>
@@ -1,6 +1,9 @@
-import { Outlet } from 'react-router-dom';
+import { Outlet, Routes, Route } from 'react-router-dom';
 import { Sidebar, SidebarContent, useSidebar } from '../sidebar';
 import classNames from 'classnames';
+import { Routes as AppRoutes } from '../../pages/client-router';
+import { MarketHeader } from '../market-header';
+import { LiquidityHeader } from '../liquidity-header';

 export const LayoutWithSidebar = () => {
  const sidebarView = useSidebar((store) => store.view);
@@ -8,28 +11,35 @@ export const LayoutWithSidebar = () => {

  const gridClasses = classNames(
    'h-full relative z-0 grid',
+    'grid-rows-[min-content_1fr]',
    'grid-cols-[1fr_45px]',
    'lg:grid-cols-[1fr_350px_45px]'
  );

  return (
    <div className={gridClasses}>
-      <section
+      <div className="col-span-full">
+        <Routes>
+          <Route path={AppRoutes.MARKET} element={<MarketHeader />} />
+          <Route path={AppRoutes.LIQUIDITY} element={<LiquidityHeader />} />
+        </Routes>
+      </div>
+      <main
        className={classNames('col-start-1 col-end-1', {
          'lg:col-end-3': !sidebarOpen,
          'hidden lg:block lg:col-end-2': sidebarOpen,
        })}
      >
        <Outlet />
-      </section>
-      <div
+      </main>
+      <aside
        // min-h-0 is needed as this element is part of a grid, we want the content to be scrollable, without it it will push the grid element taller
        className={classNames('col-start-1 lg:col-start-2 min-h-0', {
          hidden: !sidebarOpen,
        })}
      >
        <SidebarContent />
-      </div>
+      </aside>
      <div className="col-start-2 lg:col-start-3 bg-vega-clight-800 dark:bg-vega-cdark-800 border-l border-default">
        <Sidebar />
      </div>
@@ -0,0 +1 @@
+export * from './liquidity-header';
@@ -0,0 +1,107 @@
+import {
+  tooltipMapping,
+  useMarket,
+  useStaticMarketData,
+} from '@vegaprotocol/markets';
+import { Header, HeaderStat, HeaderTitle } from '../header';
+import {
+  addDecimalsFormatNumber,
+  formatNumberPercentage,
+} from '@vegaprotocol/utils';
+import { t } from '@vegaprotocol/i18n';
+import { ExternalLink, Indicator } from '@vegaprotocol/ui-toolkit';
+import { DocsLinks } from '@vegaprotocol/environment';
+import {
+  NetworkParams,
+  useNetworkParams,
+} from '@vegaprotocol/network-parameters';
+import { useCheckLiquidityStatus } from '@vegaprotocol/liquidity';
+import { useParams } from 'react-router-dom';
+
+export const LiquidityHeader = () => {
+  const { marketId } = useParams();
+  const { data: market } = useMarket(marketId);
+  const { data: marketData } = useStaticMarketData(marketId);
+  const targetStake = marketData?.targetStake;
+  const suppliedStake = marketData?.suppliedStake;
+  const assetDecimalPlaces =
+    market?.tradableInstrument.instrument.product.settlementAsset.decimals || 0;
+  const symbol =
+    market?.tradableInstrument.instrument.product.settlementAsset.symbol;
+
+  const { params } = useNetworkParams([
+    NetworkParams.market_liquidity_stakeToCcyVolume,
+    NetworkParams.market_liquidity_targetstake_triggering_ratio,
+  ]);
+  const triggeringRatio =
+    params.market_liquidity_targetstake_triggering_ratio || '1';
+
+  const { percentage, status } = useCheckLiquidityStatus({
+    suppliedStake: suppliedStake || 0,
+    targetStake: targetStake || 0,
+    triggeringRatio,
+  });
+
+  console.log(market);
+
+  return (
+    <Header
+      title={
+        market?.tradableInstrument.instrument.code &&
+        marketId && (
+          <HeaderTitle>
+            {market.tradableInstrument.instrument.code &&
+              t(
+                '%s liquidity provision',
+                market.tradableInstrument.instrument.code
+              )}
+          </HeaderTitle>
+        )
+      }
+    >
+      <HeaderStat
+        heading={t('Target stake')}
+        description={tooltipMapping['targetStake']}
+        testId="target-stake"
+      >
+        <div>
+          {targetStake
+            ? `${addDecimalsFormatNumber(
+                targetStake,
+                assetDecimalPlaces ?? 0
+              )} ${symbol}`
+            : '-'}
+        </div>
+      </HeaderStat>
+      <HeaderStat
+        heading={t('Supplied stake')}
+        description={tooltipMapping['suppliedStake']}
+        testId="supplied-stake"
+      >
+        <div>
+          {suppliedStake
+            ? `${addDecimalsFormatNumber(
+                suppliedStake,
+                assetDecimalPlaces ?? 0
+              )} ${symbol}`
+            : '-'}
+        </div>
+      </HeaderStat>
+      <HeaderStat heading={t('Liquidity supplied')} testId="liquidity-supplied">
+        <Indicator variant={status} /> {formatNumberPercentage(percentage, 2)}
+      </HeaderStat>
+      <HeaderStat heading={t('Market ID')} testId="liquidity-market-id">
+        <div className="break-word">{marketId}</div>
+      </HeaderStat>
+      <HeaderStat heading={t('Learn more')} testId="liquidity-learn-more">
+        {DocsLinks ? (
+          <ExternalLink href={DocsLinks.LIQUIDITY}>
+            {t('Providing liquidity')}
+          </ExternalLink>
+        ) : (
+          (null as React.ReactNode)
+        )}
+      </HeaderStat>
+    </Header>
+  );
+};
@@ -0,0 +1 @@
+export * from './market-header';
@@ -0,0 +1,33 @@
+import { Popover, VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
+import { Header, HeaderTitle } from '../header';
+import { useParams } from 'react-router-dom';
+import { MarketSelector } from '../../components/market-selector/market-selector';
+import { MarketHeaderStats } from '../../client-pages/market/market-header-stats';
+import { useMarket } from '@vegaprotocol/markets';
+
+export const MarketHeader = () => {
+  const { marketId } = useParams();
+  const { data } = useMarket(marketId);
+
+  if (!data) return null;
+
+  return (
+    <Header
+      title={
+        <Popover
+          trigger={
+            <HeaderTitle>
+              {data.tradableInstrument.instrument.code}
+              <VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={14} />
+            </HeaderTitle>
+          }
+          alignOffset={-10}
+        >
+          <MarketSelector currentMarketId={marketId} />
+        </Popover>
+      }
+    >
+      <MarketHeaderStats market={data} />
+    </Header>
+  );
+};
@@ -19,7 +19,6 @@ describe('AssetDropdown', () => {
        checkedAssets={[]}
        assets={assets}
        onSelect={mockOnSelect}
-        onReset={jest.fn()}
      />
    );
    await userEvent.click(screen.getByRole('button'));
@@ -39,7 +38,6 @@ describe('AssetDropdown', () => {
        checkedAssets={[assets[0].id]}
        assets={assets}
        onSelect={mockOnSelect}
-        onReset={jest.fn()}
      />
    );
    await userEvent.click(screen.getByRole('button'));
@@ -48,35 +46,9 @@ describe('AssetDropdown', () => {
    expect(mockOnSelect).toHaveBeenCalledWith(assets[0].id, false);
  });

-  it('can be reset clearing all assets', async () => {
-    const mockOnSelect = jest.fn();
-    const mockOnReset = jest.fn();
-    render(
-      <AssetDropdown
-        checkedAssets={assets.map((a) => a.id)}
-        assets={assets}
-        onSelect={mockOnSelect}
-        onReset={mockOnReset}
-      />
-    );
-    await userEvent.click(screen.getByRole('button'));
-    const items = screen.getAllByRole('menuitemcheckbox');
-    // all should be checked
-    items.forEach((item) => {
-      expect(item).toBeChecked();
-    });
-    await userEvent.click(screen.getByText('Reset'));
-    expect(mockOnReset).toHaveBeenCalled();
-  });
-
  it('doesnt render if no assets provided', async () => {
    const { container } = render(
-      <AssetDropdown
-        checkedAssets={[]}
-        assets={[]}
-        onSelect={jest.fn()}
-        onReset={jest.fn()}
-      />
+      <AssetDropdown checkedAssets={[]} assets={[]} onSelect={jest.fn()} />
    );
    expect(container).toBeEmptyDOMElement();
  });
@@ -3,10 +3,10 @@ import {
  DropdownMenu,
  DropdownMenuCheckboxItem,
  DropdownMenuContent,
-  DropdownMenuItem,
  DropdownMenuItemIndicator,
  DropdownMenuTrigger,
-  DropdownMenuSeparator,
+  VegaIcon,
+  VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';

 type Assets = Array<{ id: string; symbol: string }>;
@@ -15,12 +15,10 @@ export const AssetDropdown = ({
  assets,
  checkedAssets,
  onSelect,
-  onReset,
 }: {
  assets: Assets | undefined;
  checkedAssets: string[];
  onSelect: (id: string, checked: boolean) => void;
-  onReset: () => void;
 }) => {
  if (!assets?.length) {
    return null;
@@ -35,8 +33,6 @@ export const AssetDropdown = ({
      }
    >
      <DropdownMenuContent>
-        <DropdownMenuItem onClick={onReset}>{t('Reset')}</DropdownMenuItem>
-        <DropdownMenuSeparator />
        {assets?.map((a) => {
          return (
            <DropdownMenuCheckboxItem
@@ -66,15 +62,19 @@ const TriggerText = ({
  assets: Assets;
  checkedAssets: string[];
 }) => {
-  let text = t('Asset');
+  let text = t('Assets');

  if (checkedAssets.length === 1) {
    const assetId = checkedAssets[0];
    const asset = assets.find((a) => a.id === assetId);
    text = asset ? asset.symbol : t('Asset (1)');
  } else if (checkedAssets.length > 1) {
-    text = t(`Asset (${checkedAssets.length})`);
+    text = t(`${checkedAssets.length} Assets`);
  }

-  return <span className="px-1">{text}</span>;
+  return (
+    <span className="flex justify-between items-center">
+      {text} <VegaIcon name={VegaIconNames.CHEVRON_DOWN} />
+    </span>
+  );
 };
@@ -0,0 +1,2 @@
+export * from './market-selector';
+export * from './market-selector-item';
@@ -169,7 +169,7 @@ describe('MarketSelectorItem', () => {
    // link renders and is styled
    expect(link).toHaveAttribute('href', '/markets/' + market.id);

-    expect(link.parentNode).toHaveClass('bg-vega-light-100');
+    expect(link).toHaveClass('bg-vega-clight-600');

    expect(screen.getByTitle('24h vol')).toHaveTextContent('0.00');
    expect(screen.getByTitle(symbol)).toHaveTextContent('-');
@@ -22,7 +22,6 @@ export const MarketSelectorItem = ({
  style: CSSProperties;
  currentMarketId?: string;
 }) => {
-  // 'py-1 px-2',
  return (
    <div style={style} role="row">
      <Link
@@ -80,7 +79,7 @@ const MarketData = ({ market }: { market: MarketMaybeWithDataAndCandles }) => {

  return (
    <>
-      <div className="w-1/4" role="gridcell">
+      <div className="w-2/5" role="gridcell">
        <h3 className="text-ellipsis whitespace-nowrap overflow-hidden">
          {market.tradableInstrument.instrument.code}
        </h3>
@@ -91,25 +90,25 @@ const MarketData = ({ market }: { market: MarketMaybeWithDataAndCandles }) => {
        )}
      </div>
      <div
-        className="w-1/4 text-sm"
+        className="w-1/5 text-sm whitespace-nowrap text-ellipsis overflow-hidden"
        title={instrument.product.settlementAsset.symbol}
-        data-testid="market-selector-data-row"
+        data-testid="market-selector-price"
        role="gridcell"
      >
        {price} {instrument.product.settlementAsset.symbol}
      </div>
      <div
-        className="w-1/4 text-sm text-right"
+        className="w-1/5 text-sm text-right whitespace-nowrap text-ellipsis overflow-hidden"
        title={t('24h vol')}
-        data-testid="market-selector-data-row"
+        data-testid="market-selector-volume"
        role="gridcell"
      >
        {volume}
      </div>
-      <div className="w-1/4" role="gridcell">
+      <div className="w-1/5 flex justify-end" role="gridcell">
        {oneDayCandles && (
          <Sparkline
-            width={70}
+            width={64}
            height={15}
            data={oneDayCandles.map((c) => Number(c.close))}
          />
@@ -240,7 +240,7 @@ describe('MarketSelector', () => {

    await userEvent.click(screen.getByTestId('sort-trigger'));
    const options = screen.getAllByTestId(/sort-item/);
-    expect(options.map((o) => o.textContent)).toEqual(
+    expect(options.map((o) => o.textContent?.trim())).toEqual(
      Object.entries(Sort)
        .filter(([key]) => key !== Sort.None)
        .map(([key]) => SortTypeMapping[key as SortType])
@@ -8,7 +8,7 @@ import {
  VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
 import type { CSSProperties } from 'react';
-import { useCallback, useState, useMemo } from 'react';
+import { useCallback, useState, useMemo, useRef } from 'react';
 import { FixedSizeList } from 'react-window';
 import { useMarketSelectorList } from './use-market-selector-list';
 import type { ProductType } from './product-selector';
@@ -66,20 +66,7 @@ export const MarketSelector = ({
              placeholder={t('Search')}
              data-testid="search-term"
              className="w-full"
-              appendElement={
-                filter.searchTerm.length ? (
-                  <button
-                    onClick={() =>
-                      setFilter((curr) => ({ ...curr, searchTerm: '' }))
-                    }
-                    className="text-secondary"
-                  >
-                    <VegaIcon name={VegaIconNames.CROSS} />
-                  </button>
-                ) : (
-                  <span />
-                )
-              }
+              prependElement={<VegaIcon name={VegaIconNames.SEARCH} />}
            />
          </div>
          <AssetDropdown
@@ -109,7 +96,6 @@ export const MarketSelector = ({
                return curr;
              });
            }}
-            onReset={() => setFilter((curr) => ({ ...curr, assets: [] }))}
          />
          <SortDropdown
            currentSort={filter.sort}
@@ -124,7 +110,6 @@ export const MarketSelector = ({
                };
              });
            }}
-            onReset={() => setFilter((curr) => ({ ...curr, sort: Sort.None }))}
          />
        </div>
      </div>
@@ -165,9 +150,18 @@ const MarketList = ({
  onSelect?: (marketId: string) => void;
  noItems: string;
 }) => {
+  const itemSize = 45;
+  const listRef = useRef<HTMLDivElement | null>(null);
+  const rect = listRef.current?.getBoundingClientRect();
+  // allow virtualized list to grow until it runs out of space
+  const height = rect
+    ? Math.min(data.length * itemSize, window.innerHeight - rect.y)
+    : 400;
+
  if (error) {
    return <div>{error.message}</div>;
  }
+
  return (
    <TinyScroll>
      <div
@@ -177,25 +171,28 @@ const MarketList = ({
          'p-2 mx-2 border-b border-default text-xs text-secondary'
        )}
      >
-        <div className="w-1/4" role="columnheader">
+        <div className="w-2/5" role="columnheader">
          {t('Name')}
        </div>
-        <div className="w-1/4" role="columnheader">
+        <div className="w-1/5" role="columnheader">
          {t('Price')}
        </div>
-        <div className="w-1/4 text-right" role="columnheader">
+        <div className="w-1/5 text-right" role="columnheader">
          {t('24h volume')}
        </div>
-        <div className="w-1/4" role="columnheader" />
+        <div className="w-1/5" role="columnheader" />
+      </div>
+      <div ref={listRef}>
+        <List
+          data={data}
+          loading={loading}
+          height={height}
+          itemSize={itemSize}
+          currentMarketId={currentMarketId}
+          onSelect={onSelect}
+          noItems={noItems}
+        />
      </div>
-      <List
-        data={data}
-        loading={loading}
-        height={400}
-        currentMarketId={currentMarketId}
-        onSelect={onSelect}
-        noItems={noItems}
-      />
    </TinyScroll>
  );
 };
@@ -226,12 +223,14 @@ const List = ({
  data,
  loading,
  height,
+  itemSize,
  onSelect,
  noItems,
  currentMarketId,
 }: ListItemData & {
  loading: boolean;
  height: number;
+  itemSize: number;
  noItems: string;
 }) => {
  const itemKey = useCallback(
@@ -264,7 +263,7 @@ const List = ({
      className="vega-scrollbar"
      itemCount={data.length}
      itemData={itemData}
-      itemSize={45}
+      itemSize={itemSize}
      itemKey={itemKey}
      width="100%"
      height={height}
@@ -2,12 +2,12 @@ import { t } from '@vegaprotocol/i18n';
 import {
  DropdownMenu,
  DropdownMenuContent,
-  DropdownMenuItem,
  DropdownMenuItemIndicator,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
-  DropdownMenuSeparator,
+  VegaIcon,
+  VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';

 export const Sort = {
@@ -28,22 +28,32 @@ export const SortTypeMapping: {
  [Sort.New]: 'New markets',
 };

+const SortIconMapping: {
+  [key in SortType]: VegaIconNames;
+} = {
+  [Sort.None]: null as unknown as VegaIconNames, // not shown in list
+  [Sort.Gained]: VegaIconNames.TREND_UP,
+  [Sort.Lost]: VegaIconNames.TREND_DOWN,
+  [Sort.New]: VegaIconNames.STAR,
+};
+
 export const SortDropdown = ({
  currentSort,
  onSelect,
-  onReset,
 }: {
  currentSort: SortType;
  onSelect: (sort: SortType) => void;
-  onReset: () => void;
 }) => {
  return (
    <DropdownMenu
      trigger={
        <DropdownMenuTrigger data-testid="sort-trigger">
-          {currentSort === SortTypeMapping.None
-            ? t('Sort')
-            : SortTypeMapping[currentSort]}
+          <span className="flex justify-between items-center">
+            {currentSort === SortTypeMapping.None
+              ? t('Sort')
+              : SortTypeMapping[currentSort]}{' '}
+            <VegaIcon name={VegaIconNames.CHEVRON_DOWN} />
+          </span>
        </DropdownMenuTrigger>
      }
    >
@@ -52,8 +62,6 @@ export const SortDropdown = ({
          value={currentSort}
          onValueChange={(value) => onSelect(value as SortType)}
        >
-          <DropdownMenuItem onClick={onReset}>{t('Reset')}</DropdownMenuItem>
-          <DropdownMenuSeparator />
          {Object.keys(Sort)
            .filter((s) => s !== Sort.None)
            .map((key) => {
@@ -64,7 +72,10 @@ export const SortDropdown = ({
                  value={key}
                  data-testid={`sort-item-${key}`}
                >
-                  {SortTypeMapping[key as SortType]}
+                  <span className="flex gap-2">
+                    <VegaIcon name={SortIconMapping[key as SortType]} />{' '}
+                    {SortTypeMapping[key as SortType]}
+                  </span>
                  <DropdownMenuItemIndicator />
                </DropdownMenuRadioItem>
              );
@@ -4,12 +4,12 @@ import {
  isMarketActive,
  useMarketSelectorList,
 } from './use-market-selector-list';
-import { Product } from './product-selector';
+import { Product } from '../../components/market-selector/product-selector';
 import { Sort } from './sort-dropdown';
 import { createMarketFragment } from '@vegaprotocol/mock';
 import { MarketState } from '@vegaprotocol/types';
 import { useMarketList } from '@vegaprotocol/markets';
-import type { Filter } from './market-selector';
+import type { Filter } from '../../components/market-selector';
 import { subDays } from 'date-fns';

 jest.mock('@vegaprotocol/markets');
@@ -3,7 +3,7 @@ import orderBy from 'lodash/orderBy';
 import { MarketState } from '@vegaprotocol/types';
 import { calcCandleVolume, useMarketList } from '@vegaprotocol/markets';
 import { priceChangePercentage } from '@vegaprotocol/utils';
-import type { Filter } from './market-selector';
+import type { Filter } from '../../components/market-selector/market-selector';
 import { Sort } from './sort-dropdown';

 // Used for sort order and filter
@@ -16,7 +16,7 @@ export const NodeHealthContainer = () => {
    <Tooltip
      description={
        <div
-          className="flex flex-col gap-2 p-4 text-sm"
+          className="flex flex-col gap-2 p-2 text-sm"
          data-testid="node-health"
        >
          <div className="flex items-center gap-2">
@@ -37,8 +37,9 @@ export const NodeHealthContainer = () => {
        </div>
      }
      align="end"
-      side="right"
-      sideOffset={10}
+      side="left"
+      sideOffset={18}
+      arrow={false}
    >
      <button
        className="flex justify-center items-center p-2 rounded hover:bg-vega-light-200 hover:dark:bg-vega-dark-200"
@@ -0,0 +1 @@
+export * from './orderbook-container';
@@ -0,0 +1,23 @@
+import { OrderbookManager } from '@vegaprotocol/market-depth';
+import { useCreateOrderStore } from '@vegaprotocol/orders';
+import { ViewType, useSidebar } from '../sidebar';
+
+export const OrderbookContainer = ({ marketId }: { marketId: string }) => {
+  const useOrderStoreRef = useCreateOrderStore();
+  const updateOrder = useOrderStoreRef((store) => store.update);
+  const setView = useSidebar((store) => store.setView);
+  return (
+    <OrderbookManager
+      marketId={marketId}
+      onClick={({ price, size }) => {
+        if (price) {
+          updateOrder(marketId, { price });
+        }
+        if (size) {
+          updateOrder(marketId, { size });
+        }
+        setView({ type: ViewType.Order });
+      }}
+    />
+  );
+};
@@ -20,6 +20,7 @@ export interface TooltipProps {
  side?: 'top' | 'right' | 'bottom' | 'left';
  sideOffset?: number;
  delayDuration?: number;
+  arrow?: boolean;
 }

 // Conditionally rendered tooltip if description content is provided.
@@ -31,6 +32,7 @@ export const Tooltip = ({
  align = 'start',
  side = 'bottom',
  delayDuration = 200,
+  arrow = true,
 }: TooltipProps) =>
  description ? (
    <Provider delayDuration={delayDuration} skipDelayDuration={100}>
@@ -53,11 +55,13 @@ export const Tooltip = ({
              <div className="relative z-0" data-testid="tooltip-content">
                {description}
              </div>
-              <Arrow
-                width={16}
-                height={8}
-                className="fill-vega-clight-500 dark:fill-vega-cdark-500"
-              />
+              {arrow && (
+                <Arrow
+                  width={16}
+                  height={8}
+                  className="fill-vega-clight-500 dark:fill-vega-cdark-500"
+                />
+              )}
            </Content>
          </Portal>
        )}
@@ -95,9 +95,9 @@ function AppBody({ Component }: AppProps) {
          <ViewingBanner />
          <UpgradeBanner showVersionChange={true} />
        </div>
-        <main data-testid={location.pathname}>
+        <div data-testid={`pathname-${location.pathname}`}>
          <Component />
-        </main>
+        </div>
      </div>
      <DialogsContainer />
      <ToastsManager />
@@ -61,18 +61,18 @@ html.dark {
 html [data-theme='dark'],
 html [data-theme='light'] {
  /* sell candles only use stroke as the candle is solid (without border) */
-  --pennant-color-sell-stroke: theme('colors.market.red.500');
+  --pennant-color-sell-stroke: theme(colors.market.red.DEFAULT);

  /* studies */
-  --pennant-color-eldar-ray-bear-power: theme('colors.market.red.500');
-  --pennant-color-eldar-ray-bull-power: theme('colors.market.green.600');
+  --pennant-color-eldar-ray-bear-power: theme(colors.market.red.DEFAULT);
+  --pennant-color-eldar-ray-bull-power: theme(colors.market.green.600);

-  --pennant-color-macd-divergence-buy: theme('colors.market.green.600');
-  --pennant-color-macd-divergence-sell: theme('colors.market.red.500');
-  --pennant-color-macd-signal: theme('colors.vega.blue.500');
-  --pennant-color-macd-macd: theme('colors.vega.yellow.500');
+  --pennant-color-macd-divergence-buy: theme(colors.market.green.600);
+  --pennant-color-macd-divergence-sell: theme(colors.market.red.DEFAULT);
+  --pennant-color-macd-signal: theme(colors.vega.blue.DEFAULT);
+  --pennant-color-macd-macd: theme(colors.vega.yellow.500);

-  --pennant-color-volume-sell: theme('colors.market.red.500');
+  --pennant-color-volume-sell: theme(colors.market.red.DEFAULT);
 }

 html [data-theme='light'] {
@@ -80,20 +80,20 @@ html [data-theme='light'] {
  --pennant-background-surface-color: theme(colors.vega.clight.900);

  /* candles */
-  --pennant-color-buy-fill: theme(colors.market.green.500);
+  --pennant-color-buy-fill: theme(colors.market.green.DEFAULT);
  --pennant-color-buy-stroke: theme(colors.market.green.600);

  /* sell uses stroke for fill and stroke */
-  --pennant-color-sell-stroke: theme(colors.market.red.500);
+  --pennant-color-sell-stroke: theme(colors.market.red.DEFAULT);

  /* depth chart */
-  --pennant-color-depth-buy-fill: theme(colors.market.green.500);
+  --pennant-color-depth-buy-fill: theme(colors.market.green.DEFAULT);
  --pennant-color-depth-buy-stroke: theme(colors.market.green.600);
-  --pennant-color-depth-sell-fill: theme(colors.market.red.500);
-  --pennant-color-depth-sell-stroke: theme(colors.market.red.600);
+  --pennant-color-depth-sell-fill: theme(colors.market.red.DEFAULT);
+  --pennant-color-depth-sell-stroke: theme(colors.market.red.650);

-  --pennant-color-volume-buy: theme(colors.market.green.400);
-  --pennant-color-volume-sell: theme(colors.market.red.400);
+  --pennant-color-volume-buy: theme(colors.market.green.300);
+  --pennant-color-volume-sell: theme(colors.market.red.300);
 }

 html [data-theme='dark'] {
@@ -102,19 +102,19 @@ html [data-theme='dark'] {

  /* candles */
  --pennant-color-buy-fill: theme(colors.market.green.600);
-  --pennant-color-buy-stroke: theme(colors.market.green.500);
+  --pennant-color-buy-stroke: theme(colors.market.green.DEFAULT);

  /* sell uses stroke for fill and stroke */
-  --pennant-color-sell-stroke: theme(colors.market.red.500);
+  --pennant-color-sell-stroke: theme(colors.market.red.DEFAULT);

  /* depth chart */
  --pennant-color-depth-buy-fill: theme(colors.market.green.600);
-  --pennant-color-depth-buy-stroke: theme(colors.market.green.500);
-  --pennant-color-depth-sell-fill: theme(colors.market.red.600);
-  --pennant-color-depth-sell-stroke: theme(colors.market.red.500);
+  --pennant-color-depth-buy-stroke: theme(colors.market.green.DEFAULT);
+  --pennant-color-depth-sell-fill: theme(colors.market.red.650);
+  --pennant-color-depth-sell-stroke: theme(colors.market.red.DEFAULT);

  --pennant-color-volume-buy: theme(colors.market.green.600);
-  --pennant-color-volume-sell: theme(colors.market.red.600);
+  --pennant-color-volume-sell: theme(colors.market.red.650);
 }

 /**
@@ -91,7 +91,7 @@ export const TransferContainer = ({ assetId }: { assetId?: string }) => {
              text: t('Connect wallet'),
              action: openVegaWalletDialog,
              dataTestId: 'order-connect-wallet',
-              size: 'sm',
+              size: 'small',
            }}
          />
        </div>
@@ -3,7 +3,6 @@ import { addMockGQLCommand } from './lib/mock-gql';
 import { addMockSubscription } from './lib/mock-ws';
 import { addMockWalletCommand } from './lib/mock-rest';
 import { addMockWeb3ProviderCommand } from './lib/commands/mock-web3-provider';
-import { addSlackCommand } from './lib/commands/slack';
 import { addHighlightLog } from './lib/commands/highlight-log';
 import { addGetAssets } from './lib/commands/get-assets';
 import { addVegaWalletReceiveFaucetedAsset } from './lib/commands/vega-wallet-receive-fauceted-asset';
@@ -26,7 +25,6 @@ import { addVegaWalletTopUpRewardsPool } from './lib/commands/vega-wallet-top-up
 import { addAssociateTokensToVegaWallet } from './lib/commands/associate-tokens-to-vega-wallet';

 addGetTestIdcommand();
-addSlackCommand();
 addMockGQLCommand();
 addMockSubscription();
 addMockWalletCommand();
@@ -59,7 +57,14 @@ export { aliasGQLQuery } from './lib/mock-gql';
 export { aliasWalletQuery } from './lib/mock-rest';
 export * from './lib/utils';

-Cypress.on(
-  'uncaught:exception',
-  (err) => !err.message.includes('ResizeObserver loop limit exceeded')
-);
+Cypress.on('uncaught:exception', (err) => {
+  if (
+    err.message.includes('ResizeObserver loop limit exceeded') ||
+    err.message.includes(
+      'ResizeObserver loop completed with undelivered notifications'
+    )
+  ) {
+    return false;
+  }
+  return true;
+});
@@ -1,28 +0,0 @@
-declare global {
-  // eslint-disable-next-line @typescript-eslint/no-namespace
-  namespace Cypress {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    interface Chainable<Subject> {
-      slack(message: string): void;
-    }
-  }
-}
-
-export function addSlackCommand() {
-  // @ts-ignore - ignoring Cypress type error which gets resolved when Cypress uses the command
-  Cypress.Commands.add('slack', (message) => {
-    const text = `${message}: ${JSON.stringify(Cypress.spec)}`;
-
-    cy.log('NOTIFYING SLACK');
-
-    const webhook = Cypress.env('SLACK_WEBHOOK');
-
-    if (!webhook) {
-      return;
-    }
-
-    cy.request('POST', webhook, {
-      text,
-    });
-  });
-}
@@ -23,6 +23,11 @@ export const OrderTypeCell = ({
      return undefined;
    }
    if (!value) return '-';
+
+    if (order?.icebergOrder) {
+      return t('%s (Iceberg)', [Schema.OrderTypeMapping[value]]);
+    }
+
    if (order?.peggedOrder) {
      const reference =
        Schema.PeggedReferenceMapping[order.peggedOrder?.reference];
@@ -34,6 +39,7 @@ export const OrderTypeCell = ({
      );
      return t('%s %s %s Peg limit', [reference, side, offset]);
    }
+
    if (order?.liquidityProvision) {
      return t('Liquidity provision');
    }
@@ -30,7 +30,7 @@ export const MarginWarning = ({ margin, balance, asset, onDeposit }: Props) => {
        text: t(`Deposit ${asset.symbol}`),
        action: () => onDeposit(asset.id),
        dataTestId: 'deal-ticket-deposit-dialog-button',
-        size: 'sm',
+        size: 'small',
      }}
    />
  );
@@ -35,9 +35,11 @@ export const ZeroBalanceError = ({
      }
      buttonProps={{
        text: t(`Make a deposit`),
-        action: () => onDeposit(asset.id),
+        action: () => {
+          onDeposit(asset.id);
+        },
        dataTestId: 'deal-ticket-deposit-dialog-button',
-        size: 'sm',
+        size: 'small',
      }}
    />
  );
@@ -10,7 +10,7 @@ export const DealTicketButton = ({ side }: Props) => {
  const buttonClasses = classNames(
    'px-10 py-2 uppercase rounded-md text-white w-full',
    {
-      'bg-market-red-500': side === Side.SIDE_SELL,
+      'bg-market-red': side === Side.SIDE_SELL,
      'bg-market-green-550': side === Side.SIDE_BUY,
    }
  );
@@ -0,0 +1,195 @@
+import { Controller, type Control } from 'react-hook-form';
+import type { Market } from '@vegaprotocol/markets';
+import type { OrderObj } from '@vegaprotocol/orders';
+import type { OrderFormFields } from '../../hooks/use-order-form';
+import { toDecimal, validateAmount } from '@vegaprotocol/utils';
+import { t } from '@vegaprotocol/i18n';
+import {
+  FormGroup,
+  Input,
+  InputError,
+  Tooltip,
+} from '@vegaprotocol/ui-toolkit';
+
+export interface DealTicketSizeIcebergProps {
+  control: Control<OrderFormFields>;
+  market: Market;
+  peakSizeError?: string;
+  minimumVisibleSizeError?: string;
+  update: (obj: Partial<OrderObj>) => void;
+  peakSize: string;
+  minimumVisibleSize: string;
+  size: string;
+}
+
+export const DealTicketSizeIceberg = ({
+  control,
+  market,
+  update,
+  peakSizeError,
+  minimumVisibleSizeError,
+  peakSize,
+  minimumVisibleSize,
+  size,
+}: DealTicketSizeIcebergProps) => {
+  const sizeStep = toDecimal(market?.positionDecimalPlaces);
+
+  const renderPeakSizeError = () => {
+    if (peakSizeError) {
+      return (
+        <InputError testId="deal-ticket-peak-error-message-size-limit">
+          {peakSizeError}
+        </InputError>
+      );
+    }
+
+    return null;
+  };
+
+  const renderMinimumSizeError = () => {
+    if (minimumVisibleSizeError) {
+      return (
+        <InputError testId="deal-ticket-minimum-error-message-size-limit">
+          {minimumVisibleSizeError}
+        </InputError>
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <div className="mb-2">
+      <div className="flex items-center gap-4">
+        <div className="flex-1">
+          <FormGroup
+            label={
+              <Tooltip
+                description={
+                  <div>
+                    {t(
+                      'The maximum volume that can be traded at once. Must be less than the total size of the order.'
+                    )}
+                  </div>
+                }
+              >
+                <span className="text-xs">{t('Peak size')}</span>
+              </Tooltip>
+            }
+            labelFor="input-order-peak-size"
+            className="!mb-1"
+          >
+            <Controller
+              name="icebergOpts.peakSize"
+              control={control}
+              rules={{
+                required: t('You need to provide a peak size'),
+                min: {
+                  value: sizeStep,
+                  message: t('Peak size cannot be lower than ' + sizeStep),
+                },
+                max: {
+                  value: size,
+                  message: t(
+                    'Peak size cannot be greater than the size (%s) ',
+                    [size]
+                  ),
+                },
+                validate: validateAmount(sizeStep, 'peakSize'),
+              }}
+              render={() => (
+                <Input
+                  id="input-order-peak-size"
+                  className="w-full"
+                  type="number"
+                  value={peakSize}
+                  onChange={(e) =>
+                    update({
+                      icebergOpts: {
+                        peakSize: e.target.value,
+                        minimumVisibleSize,
+                      },
+                    })
+                  }
+                  step={sizeStep}
+                  min={sizeStep}
+                  max={size}
+                  data-testid="order-peak-size"
+                  onWheel={(e) => e.currentTarget.blur()}
+                />
+              )}
+            />
+          </FormGroup>
+        </div>
+        <div className="flex-0 items-center">
+          <div className="flex"></div>
+          <div className="flex"></div>
+        </div>
+        <div className="flex-1">
+          <FormGroup
+            label={
+              <Tooltip
+                description={
+                  <div>
+                    {t(
+                      'When the order trades and its size falls below this threshold, it will be reset to the peak size and moved to the back of the priority order. Must be less than or equal to peak size, and greater than 0.'
+                    )}
+                  </div>
+                }
+              >
+                <span className="text-xs">{t('Minimum size')}</span>
+              </Tooltip>
+            }
+            labelFor="input-order-minimum-size"
+            className="!mb-1"
+          >
+            <Controller
+              name="icebergOpts.minimumVisibleSize"
+              control={control}
+              rules={{
+                required: t('You need to provide a minimum visible size'),
+                min: {
+                  value: sizeStep,
+                  message: t(
+                    'Minimum visible size cannot be lower than ' + sizeStep
+                  ),
+                },
+                max: {
+                  value: peakSize,
+                  message: t(
+                    'Minimum visible size cannot be greater than the peak size (%s)',
+                    [peakSize]
+                  ),
+                },
+                validate: validateAmount(sizeStep, 'minimumVisibleSize'),
+              }}
+              render={() => (
+                <Input
+                  id="input-order-minimum-size"
+                  className="w-full"
+                  type="number"
+                  value={minimumVisibleSize}
+                  onChange={(e) =>
+                    update({
+                      icebergOpts: {
+                        peakSize,
+                        minimumVisibleSize: e.target.value,
+                      },
+                    })
+                  }
+                  step={sizeStep}
+                  min={sizeStep}
+                  max={peakSize}
+                  data-testid="order-minimum-size"
+                  onWheel={(e) => e.currentTarget.blur()}
+                />
+              )}
+            />
+          </FormGroup>
+        </div>
+      </div>
+      {renderPeakSizeError()}
+      {renderMinimumSizeError()}
+    </div>
+  );
+};
@@ -229,6 +229,109 @@ describe('DealTicket', () => {
    expect(screen.getByTestId('reduce-only')).not.toBeChecked();
  });

+  it('should set values for a persistent post only iceberg order and disable reduce only checkbox', () => {
+    const expectedOrder = {
+      marketId: market.id,
+      type: Schema.OrderType.TYPE_LIMIT,
+      side: Schema.Side.SIDE_SELL,
+      size: '10',
+      price: '300.22',
+      timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_GTC,
+      persist: true,
+      reduceOnly: false,
+      postOnly: true,
+      iceberg: true,
+      icebergOpts: {
+        peakSize: '5',
+        minimumVisibleSize: '7',
+      },
+    };
+
+    useOrderStore.setState({
+      orders: {
+        [expectedOrder.marketId]: expectedOrder,
+      },
+    });
+
+    render(generateJsx());
+
+    // Assert correct defaults are used from store
+    expect(
+      screen
+        .getByTestId(`order-type-${Schema.OrderType.TYPE_LIMIT}`)
+        .querySelector('input')
+    ).toBeChecked();
+    expect(
+      screen.queryByTestId('order-side-SIDE_SELL')?.querySelector('input')
+    ).toBeChecked();
+    expect(
+      screen.queryByTestId('order-side-SIDE_BUY')?.querySelector('input')
+    ).not.toBeChecked();
+    expect(screen.getByTestId('order-size')).toHaveDisplayValue(
+      expectedOrder.size
+    );
+    expect(screen.getByTestId('order-tif')).toHaveValue(
+      expectedOrder.timeInForce
+    );
+    expect(screen.getByTestId('order-price')).toHaveDisplayValue(
+      expectedOrder.price
+    );
+    expect(screen.getByTestId('post-only')).toBeEnabled();
+    expect(screen.getByTestId('reduce-only')).toBeDisabled();
+    expect(screen.getByTestId('post-only')).toBeChecked();
+    expect(screen.getByTestId('reduce-only')).not.toBeChecked();
+    expect(screen.getByTestId('iceberg')).toBeEnabled();
+    expect(screen.getByTestId('iceberg')).toBeChecked();
+  });
+
+  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,
+      side: Schema.Side.SIDE_SELL,
+      size: '0.1',
+      price: '300.22',
+      timeInForce: Schema.OrderTimeInForce.TIME_IN_FORCE_IOC,
+      persist: false,
+      reduceOnly: false,
+      postOnly: false,
+    };
+    useOrderStore.setState({
+      orders: {
+        [expectedOrder.marketId]: expectedOrder,
+      },
+    });
+
+    render(generateJsx());
+
+    // Assert correct defaults are used from store
+    expect(
+      screen
+        .getByTestId(`order-type-${Schema.OrderType.TYPE_LIMIT}`)
+        .querySelector('input')
+    ).toBeChecked();
+    expect(
+      screen.queryByTestId('order-side-SIDE_SELL')?.querySelector('input')
+    ).toBeChecked();
+    expect(
+      screen.queryByTestId('order-side-SIDE_BUY')?.querySelector('input')
+    ).not.toBeChecked();
+    expect(screen.getByTestId('order-size')).toHaveDisplayValue(
+      expectedOrder.size
+    );
+    expect(screen.getByTestId('order-tif')).toHaveValue(
+      expectedOrder.timeInForce
+    );
+    expect(screen.getByTestId('order-price')).toHaveDisplayValue(
+      expectedOrder.price
+    );
+    expect(screen.getByTestId('post-only')).toBeDisabled();
+    expect(screen.getByTestId('reduce-only')).toBeEnabled();
+    expect(screen.getByTestId('reduce-only')).not.toBeChecked();
+    expect(screen.getByTestId('post-only')).not.toBeChecked();
+    expect(screen.getByTestId('iceberg')).not.toBeChecked();
+  });
+
  it('handles TIF select box dependent on order type', async () => {
    render(generateJsx());

@@ -53,6 +53,7 @@ import {
 import { OrderTimeInForce, OrderType } from '@vegaprotocol/types';
 import { useOrderForm } from '../../hooks/use-order-form';
 import { useDataProvider } from '@vegaprotocol/data-provider';
+import { DealTicketSizeIceberg } from './deal-ticket-size-iceberg';

 export interface DealTicketProps {
  market: Market;
@@ -267,7 +268,11 @@ export const DealTicket = ({
  if (!order || !normalizedOrder) return null;

  return (
-    <form onSubmit={isReadOnly ? undefined : handleSubmit(onSubmit)} noValidate>
+    <form
+      onSubmit={isReadOnly ? undefined : handleSubmit(onSubmit)}
+      noValidate
+      data-testid="deal-ticket-form"
+    >
      <Controller
        name="type"
        control={control}
@@ -288,6 +293,22 @@ export const DealTicket = ({
                timeInForce: lastTIF[type] || order.timeInForce,
                postOnly:
                  type === OrderType.TYPE_MARKET ? false : order.postOnly,
+                iceberg:
+                  type === OrderType.TYPE_MARKET ||
+                  [
+                    OrderTimeInForce.TIME_IN_FORCE_FOK,
+                    OrderTimeInForce.TIME_IN_FORCE_IOC,
+                  ].includes(lastTIF[type] || order.timeInForce)
+                    ? false
+                    : order.iceberg,
+                icebergOpts:
+                  type === OrderType.TYPE_MARKET ||
+                  [
+                    OrderTimeInForce.TIME_IN_FORCE_FOK,
+                    OrderTimeInForce.TIME_IN_FORCE_IOC,
+                  ].includes(lastTIF[type] || order.timeInForce)
+                    ? undefined
+                    : order.icebergOpts,
                reduceOnly:
                  type === OrderType.TYPE_LIMIT &&
                  ![
@@ -459,6 +480,51 @@ export const DealTicket = ({
          )}
        />
      </div>
+      <div className="flex gap-2 pb-2 justify-between">
+        {order.type === Schema.OrderType.TYPE_LIMIT && (
+          <Controller
+            name="iceberg"
+            control={control}
+            render={() => (
+              <Checkbox
+                name="iceberg"
+                checked={order.iceberg}
+                onCheckedChange={() => {
+                  update({ iceberg: !order.iceberg, icebergOpts: undefined });
+                }}
+                label={
+                  <Tooltip
+                    description={
+                      <p>
+                        {t(`Trade only a fraction of the order size at once.
+                            After the peak size of the order has traded, the size is reset. This is repeated until the order is cancelled, expires, or its full volume trades away.
+                            For example, an iceberg order with a size of 1000 and a peak size of 100 will effectively be split into 10 orders with a size of 100 each.
+                            Note that the full volume of the order is not hidden and is still reflected in the order book.`)}
+                      </p>
+                    }
+                  >
+                    <span className="text-xs">{t('Iceberg')}</span>
+                  </Tooltip>
+                }
+              />
+            )}
+          />
+        )}
+      </div>
+      {order.iceberg && (
+        <DealTicketSizeIceberg
+          update={update}
+          market={market}
+          peakSizeError={errors.icebergOpts?.peakSize?.message}
+          minimumVisibleSizeError={
+            errors.icebergOpts?.minimumVisibleSize?.message
+          }
+          control={control}
+          size={order.size}
+          peakSize={order.icebergOpts?.peakSize || ''}
+          minimumVisibleSize={order.icebergOpts?.minimumVisibleSize || ''}
+        />
+      )}
      <SummaryMessage
        errorMessage={errors.summary?.message}
        asset={asset}
@@ -551,7 +617,7 @@ const SummaryMessage = memo(
              text: t('Connect wallet'),
              action: openVegaWalletDialog,
              dataTestId: 'order-connect-wallet',
-              size: 'sm',
+              size: 'small',
            }}
          />
        </div>
@@ -4,7 +4,6 @@ import { getDefaultOrder, useOrder } from '@vegaprotocol/orders';
 import { useEffect } from 'react';
 import { useForm } from 'react-hook-form';
 import type { OrderSubmission } from '@vegaprotocol/wallet';
-import type { Exact } from 'type-fest';

 export type OrderFormFields = OrderObj & {
  summary: string;
@@ -51,13 +50,11 @@ export const useOrderForm = (marketId: string) => {
    }
  }, [order, isSubmitted, getValues, setValue]);

-  const handleSubmitWrapper = (
-    cb: <T>(o: Exact<OrderSubmission, T>) => void
-  ) => {
+  const handleSubmitWrapper = (cb: (o: OrderSubmission) => void) => {
    return handleSubmit(() => {
-      // remove the persist key from the order in the store, the wallet will reject
+      // remove the persist and iceberg key from the order in the store, the wallet will reject
      // an order that contains unrecognized additional keys
-      cb(omit(order, 'persist'));
+      cb(omit(order, 'persist', 'iceberg'));
    });
  };

@@ -55,7 +55,7 @@ export const ApproveNotification = ({
          selectedAsset?.symbol
        )}
        buttonProps={{
-          size: 'sm',
+          size: 'small',
          text: t('Approve %s', selectedAsset?.symbol),
          action: onApprove,
          dataTestId: 'approve-submit',
@@ -73,7 +73,7 @@ export const ApproveNotification = ({
          formatNumber(balances.allowance.toString())
        )}
        buttonProps={{
-          size: 'sm',
+          size: 'small',
          text: t('Approve %s', selectedAsset?.symbol),
          action: onApprove,
          dataTestId: 'reapprove-submit',
@@ -1,7 +1,6 @@
 import { Networks, useEnvironment } from '@vegaprotocol/environment';
-import { AsyncRenderer, Splash } from '@vegaprotocol/ui-toolkit';
+import { AsyncRendererInline } from '@vegaprotocol/ui-toolkit';
 import { DepositManager } from './deposit-manager';
-import { t } from '@vegaprotocol/i18n';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { enabledAssetsProvider } from '@vegaprotocol/assets';

@@ -16,18 +15,14 @@ export const DepositContainer = ({ assetId }: { assetId?: string }) => {
  });

  return (
-    <AsyncRenderer data={data} loading={loading} error={error}>
-      {data && data.length ? (
+    <AsyncRendererInline data={data} loading={loading} error={error}>
+      {data && data.length && (
        <DepositManager
          assetId={assetId}
          assets={data}
          isFaucetable={VEGA_ENV !== Networks.MAINNET}
        />
-      ) : (
-        <Splash>
-          <p>{t('No assets on this network')}</p>
-        </Splash>
      )}
-    </AsyncRenderer>
+    </AsyncRendererInline>
  );
 };
@@ -90,7 +90,6 @@ export const DepositForm = ({
  const [approveNotificationIntent, setApproveNotificationIntent] =
    useState<Intent>(Intent.Warning);
  const [persistedDeposit] = usePersistentDeposit(selectedAsset?.id);
-  console.log('deposit-form', account);
  const {
    register,
    handleSubmit,
@@ -163,6 +163,7 @@ describe('Network switcher', () => {
        [Networks.MAINNET]: 'https://main.net',
        [Networks.TESTNET]: 'https://test.net',
        [Networks.VALIDATOR_TESTNET]: 'https://validator-test.net',
+        [Networks.MAINNET_MIRROR]: 'https://mainnet-mirror.net',
        [Networks.DEVNET]: 'https://dev.net',
        [Networks.STAGNET1]: 'https://stag1.net',
      };
@@ -209,6 +210,7 @@ describe('Network switcher', () => {
      [Networks.CUSTOM]: undefined,
      [Networks.MAINNET]: 'https://main.net',
      [Networks.VALIDATOR_TESTNET]: 'https://validator-test.net',
+      [Networks.MAINNET_MIRROR]: 'https://mainnet-mirror.net',
      [Networks.TESTNET]: 'https://test.net',
      [Networks.DEVNET]: 'https://dev.net',
      [Networks.STAGNET1]: 'https://stag1.net',
@@ -240,6 +242,7 @@ describe('Network switcher', () => {
      [Networks.CUSTOM]: undefined,
      [Networks.MAINNET]: undefined,
      [Networks.VALIDATOR_TESTNET]: 'https://validator-test.net',
+      [Networks.MAINNET_MIRROR]: 'https://mainnet-mirror.net',
      [Networks.TESTNET]: 'https://test.net',
      [Networks.DEVNET]: 'https://dev.net',
      [Networks.STAGNET1]: 'https://stag1.net',
@@ -16,6 +16,7 @@ import classNames from 'classnames';

 export const envNameMapping: Record<Networks, string> = {
  [Networks.VALIDATOR_TESTNET]: t('VALIDATOR_TESTNET'),
+  [Networks.MAINNET_MIRROR]: t('Mainnet-mirror'),
  [Networks.CUSTOM]: t('Custom'),
  [Networks.DEVNET]: t('Devnet'),
  [Networks.STAGNET1]: t('Stagnet'),
@@ -31,6 +32,7 @@ export const envTriggerMapping: Record<Networks, string> = {
 export const envDescriptionMapping: Record<Networks, string> = {
  [Networks.CUSTOM]: '',
  [Networks.VALIDATOR_TESTNET]: t('The validator deployed testnet'),
+  [Networks.MAINNET_MIRROR]: t('The mainnet-mirror network'),
  [Networks.DEVNET]: t('The latest Vega code auto-deployed'),
  [Networks.STAGNET1]: t('A release candidate for the staging environment'),
  [Networks.TESTNET]: t(
@@ -359,6 +359,14 @@ function compileEnvVars() {
    ),
    APP_VERSION: windowOrDefault('APP_VERSION', process.env['NX_APP_VERSION']),
    SENTRY_DSN: windowOrDefault('SENTRY_DSN', process.env['NX_SENTRY_DSN']),
+    TENDERMINT_URL: windowOrDefault(
+      'NX_TENDERMINT_URL',
+      process.env['NX_TENDERMINT_URL']
+    ),
+    TENDERMINT_WEBSOCKET_URL: windowOrDefault(
+      'NX_TENDERMINT_WEBSOCKET_URL',
+      process.env['NX_TENDERMINT_WEBSOCKET_URL']
+    ),
  };

  return env;
@@ -20,6 +20,7 @@ type DAppLinks = {

 const EmptyLinks: DAppLinks = {
  [Networks.VALIDATOR_TESTNET]: '',
+  [Networks.MAINNET_MIRROR]: '',
  [Networks.DEVNET]: '',
  [Networks.STAGNET1]: '',
  [Networks.TESTNET]: '',
@@ -31,6 +32,7 @@ const ExplorerLinks = {
  [Networks.TESTNET]: 'https://explorer.fairground.wtf',
  [Networks.VALIDATOR_TESTNET]:
    'https://explorer.validators-testnet.vega.rocks',
+  [Networks.MAINNET_MIRROR]: 'https://explorer.mainnet-mirror.vega.rocks/',
  [Networks.MAINNET]: 'https://explorer.vega.xyz',
 };

@@ -39,6 +41,7 @@ const ConsoleLinks = {
  [Networks.STAGNET1]: 'https://trading.stagnet1.vega.rocks',
  [Networks.TESTNET]: 'https://console.fairground.wtf',
  [Networks.MAINNET]: 'https://console.vega.xyz',
+  [Networks.MAINNET_MIRROR]: 'https://console.mainnet-mirror.vega.rocks/',
 };

 const TokenLinks = {
@@ -47,6 +50,7 @@ const TokenLinks = {
  [Networks.TESTNET]: 'https://governance.fairground.wtf',
  [Networks.VALIDATOR_TESTNET]:
    'https://governance.validators-testnet.vega.rocks',
+  [Networks.MAINNET_MIRROR]: 'https://governance.mainnet-mirror.vega.rocks/',
  [Networks.MAINNET]: 'https://governance.vega.xyz',
 };

@@ -4,6 +4,7 @@ import type { envSchema } from './utils/validate-environment';

 export enum Networks {
  VALIDATOR_TESTNET = 'VALIDATOR_TESTNET',
+  MAINNET_MIRROR = 'MAINNET_MIRROR',
  CUSTOM = 'CUSTOM',
  TESTNET = 'TESTNET',
  STAGNET1 = 'STAGNET1',
@@ -2,6 +2,7 @@ import z from 'zod';

 export enum Networks {
  VALIDATOR_TESTNET = 'VALIDATOR_TESTNET',
+  MAINNET_MIRROR = 'MAINNET_MIRROR',
  CUSTOM = 'CUSTOM',
  TESTNET = 'TESTNET',
  STAGNET1 = 'STAGNET1',
@@ -53,6 +54,8 @@ const schemaObject = {
  VEGA_INCIDENT_URL: z.optional(z.string()),
  APP_VERSION: z.optional(z.string()),
  SENTRY_DSN: z.optional(z.string()),
+  TENDERMINT_URL: z.optional(z.string()),
+  TENDERMINT_WEBSOCKET_URL: z.optional(z.string()),
 };

 // combine schema above with custom rule to ensure either
@@ -3,14 +3,14 @@ import * as Types from '@vegaprotocol/types';
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
 const defaultOptions = {} as const;
-export type LiquidityProvisionFieldsFragment = { __typename?: 'LiquidityProvision', id?: string | null, createdAt: any, updatedAt?: any | null, commitmentAmount: string, fee: string, status: Types.LiquidityProvisionStatus, party: { __typename?: 'Party', id: string, accountsConnection?: { __typename?: 'AccountsConnection', edges?: Array<{ __typename?: 'AccountEdge', node: { __typename?: 'AccountBalance', type: Types.AccountType, balance: string } } | null> | null } | null } };
+export type LiquidityProvisionFieldsFragment = { __typename?: 'LiquidityProvision', id: string, createdAt: any, updatedAt?: any | null, commitmentAmount: string, fee: string, status: Types.LiquidityProvisionStatus, party: { __typename?: 'Party', id: string, accountsConnection?: { __typename?: 'AccountsConnection', edges?: Array<{ __typename?: 'AccountEdge', node: { __typename?: 'AccountBalance', type: Types.AccountType, balance: string } } | null> | null } | null } };

 export type LiquidityProvisionsQueryVariables = Types.Exact<{
  marketId: Types.Scalars['ID'];
 }>;


-export type LiquidityProvisionsQuery = { __typename?: 'Query', market?: { __typename?: 'Market', liquidityProvisionsConnection?: { __typename?: 'LiquidityProvisionsConnection', edges?: Array<{ __typename?: 'LiquidityProvisionsEdge', node: { __typename?: 'LiquidityProvision', id?: string | null, createdAt: any, updatedAt?: any | null, commitmentAmount: string, fee: string, status: Types.LiquidityProvisionStatus, party: { __typename?: 'Party', id: string, accountsConnection?: { __typename?: 'AccountsConnection', edges?: Array<{ __typename?: 'AccountEdge', node: { __typename?: 'AccountBalance', type: Types.AccountType, balance: string } } | null> | null } | null } } } | null> | null } | null } | null };
+export type LiquidityProvisionsQuery = { __typename?: 'Query', market?: { __typename?: 'Market', liquidityProvisionsConnection?: { __typename?: 'LiquidityProvisionsConnection', edges?: Array<{ __typename?: 'LiquidityProvisionsEdge', node: { __typename?: 'LiquidityProvision', id: string, createdAt: any, updatedAt?: any | null, commitmentAmount: string, fee: string, status: Types.LiquidityProvisionStatus, party: { __typename?: 'Party', id: string, accountsConnection?: { __typename?: 'AccountsConnection', edges?: Array<{ __typename?: 'AccountEdge', node: { __typename?: 'AccountBalance', type: Types.AccountType, balance: string } } | null> | null } | null } } } | null> | null } | null } | null };

 export type LiquidityProvisionsUpdateSubscriptionVariables = Types.Exact<{
  partyId?: Types.InputMaybe<Types.Scalars['ID']>;
@@ -18,7 +18,7 @@ export type LiquidityProvisionsUpdateSubscriptionVariables = Types.Exact<{
 }>;


-export type LiquidityProvisionsUpdateSubscription = { __typename?: 'Subscription', liquidityProvisions?: Array<{ __typename?: 'LiquidityProvisionUpdate', id?: string | null, partyID: string, createdAt: any, updatedAt?: any | null, marketID: string, commitmentAmount: string, fee: string, status: Types.LiquidityProvisionStatus }> | null };
+export type LiquidityProvisionsUpdateSubscription = { __typename?: 'Subscription', liquidityProvisions?: Array<{ __typename?: 'LiquidityProvisionUpdate', id: string, partyID: string, createdAt: any, updatedAt?: any | null, marketID: string, commitmentAmount: string, fee: string, status: Types.LiquidityProvisionStatus }> | null };

 export type LiquidityProviderFeeShareFieldsFragment = { __typename?: 'LiquidityProviderFeeShare', equityLikeShare: string, averageEntryValuation: string, party: { __typename?: 'Party', id: string } };

@@ -180,4 +180,4 @@ export function useLiquidityProviderFeeShareLazyQuery(baseOptions?: Apollo.LazyQ
        }
 export type LiquidityProviderFeeShareQueryHookResult = ReturnType<typeof useLiquidityProviderFeeShareQuery>;
 export type LiquidityProviderFeeShareLazyQueryHookResult = ReturnType<typeof useLiquidityProviderFeeShareLazyQuery>;
-export type LiquidityProviderFeeShareQueryResult = Apollo.QueryResult<LiquidityProviderFeeShareQuery, LiquidityProviderFeeShareQueryVariables>;
+export type LiquidityProviderFeeShareQueryResult = Apollo.QueryResult<LiquidityProviderFeeShareQuery, LiquidityProviderFeeShareQueryVariables>;
@@ -1,7 +1,6 @@
 export * from './__generated__/MarketDepth';
 export * from './depth-chart';
 export * from './market-depth-provider';
-export * from './orderbook-container';
 export * from './orderbook-data';
 export * from './orderbook-manager';
 export * from './orderbook-row';
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Edd	6169e4cfda	feat(explorer): iceberg details on order tx	2023-07-25 12:01:28 +01:00
Matthew Russell Art Bartłomiej Głownia Dariusz Majcherczyk	c1675e4b49	feat(trading): design changes (#4264 ) Co-authored-by: Art <artur@vegaprotocol.io> Co-authored-by: Bartłomiej Głownia <bglownia@gmail.com> Co-authored-by: Dariusz Majcherczyk <dariusz.majcherczyk@gmail.com>	2023-07-24 09:37:18 +01:00
Matthew Russell	f8c4d39b93	fix(positions): fix valueGetter for realisedPNL in positions table	2023-07-20 17:55:21 +01:00
Matthew Russell	e55cf5ecc6	chore(trading): cherry pick position pnl formatting fix (#4347 )	2023-07-20 12:52:33 +01:00
Matthew Russell	406cf22810	chore(trading): remove user pnl from closed market list (#4312 )	2023-07-20 12:52:13 +01:00
Edd	8ff46bab5b	fix(explorer): fix valueformatter in enactment date on proposal table (#4358 )	2023-07-20 10:52:49 +02:00
Art	5f177785b6	feat(governance): protocol upgrade notification, est. time (#4289 )	2023-07-20 10:27:43 +02:00
Mikołaj Młodzikowski	06779f36ca	feat(ci): fix typo	2023-07-19 16:42:47 +02:00
Sam Keen	29991015b5	fix(governance): filtered out nodes with 0 performance score from homepage list (#4267 )	2023-07-19 13:32:57 +01:00
Matthew Russell	071a6ff8bb	chore(explorer): clear out slack webhook (#4320 )	2023-07-19 11:36:34 +01:00
Maciek Ben Mikołaj Młodzikowski Joe Tsang Dexter Edwards m.ray Art Bartłomiej Głownia Gordsport	5b8df4c414	chore(trading): orderbook adjustments (#4293 ) Co-authored-by: Ben <ben@vega.xyz> Co-authored-by: Mikołaj Młodzikowski <mikolaj.mlodzikowski@gmail.com> Co-authored-by: Joe Tsang <30622993+jtsang586@users.noreply.github.com> Co-authored-by: Dexter Edwards <dexter.edwards93@gmail.com> Co-authored-by: m.ray <16125548+MadalinaRaicu@users.noreply.github.com> Co-authored-by: Art <artur@vegaprotocol.io> Co-authored-by: Bartłomiej Głownia <bglownia@gmail.com> Co-authored-by: Gordsport <83510148+gordsport@users.noreply.github.com>	2023-07-18 14:48:51 +00:00
Daniel	ce6873fe54	feat(environment): add mainnet mirror config (#4287 )	2023-07-18 12:23:58 +01:00
Gordsport	d0e64364e3	chore: update the PM action secret token (#4325 )	2023-07-18 12:16:57 +01:00
Bartłomiej Głownia	737ffb4c35	feat(trading): copy order book volume value to deal ticket (#4333 )	2023-07-18 12:16:07 +01:00
Maciek	53048ac8ef	chore(trading): 4134 see if a closed market was succeeded (#4336 )	2023-07-18 09:37:25 +00:00
Art	05ca1a09b9	chore(explorer): align staking terminology (#4290 )	2023-07-18 09:03:48 +00:00
m.ray	94e398dd1c	feat(trading): submit iceberg orders (#4230 )	2023-07-17 14:24:51 +00:00
m.ray	7c0a4f61e9	fix(trading): add internal termination oracle (#4208 )	2023-07-17 13:33:52 +00:00
m.ray	056d3215e8	feat(trading): view iceberg orders (#4207 )	2023-07-17 13:04:03 +00:00
Dexter Edwards	a68b2093e4	fix(ui-toolkit): toolkit bugs (#4329 )	2023-07-17 10:59:22 +00:00