feat: change default protocol countdown mode as thats what all apps use

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

.eslintrc.json

@@ -51,7 +51,8 @@
             "ul": ["list"],
             "ol": ["list"]
           }
-        ]
+        ],
+        "no-console": ["error", { "allow": ["warn", "error"] }]
       }
     },
     {

.github/workflows/ci-cd-trigger.yml

@@ -81,6 +81,22 @@ jobs:
         with:
           main-branch-name: develop
 
+      # See affected apps
+      - name: See affected apps
+        run: |
+          branch_slug="$(echo '${{ github.head_ref || github.ref_name }}' | sed -r s/[^a-zA-Z0-9]+/-/g | sed -r s/^-+\|-+$//g | cut -c 1-50 )"
+          python3 tools/ci/check-affected.py --github-ref="${{ github.ref }}" --branch-slug="$branch_slug" --event-name="${{ github.event_name }}"
+
+      - name: Verify script result
+        run: |
+          echo "Check outputs from script"
+          echo "projects: ${{ env.PROJECTS }}"
+          echo "projects-e2e: ${{ env.PROJECTS_E2E }}"
+          echo "preview_governance: ${{ env.PREVIEW_GOVERNANCE }}"
+          echo "preview_trading: ${{ env.PREVIEW_TRADING }}"
+          echo "preview_explorer: ${{ env.PREVIEW_EXPLORER }}"
+          echo "preview_tools: ${{ env.PREVIEW_TOOLS }}"
+
       - name: Check formatting
         run: yarn nx format:check
 
@@ -96,126 +112,6 @@ jobs:
       - name: Build affected
         run: yarn nx affected:build || (yarn install && yarn nx affected:build)
 
-      # See affected apps
-      - name: See affected apps
-        run: |
-          affected="$(yarn nx print-affected --base=${{ env.NX_BASE }} --head=${{ env.NX_HEAD }} --select=projects)"
-          branch_slug="$(echo '${{ github.head_ref || github.ref_name }}' | sed -r s/[^a-zA-Z0-9]+/-/g | sed -r s/^-+\|-+$//g | cut -c 1-50 )"
-
-          echo ">>>> debug"
-          echo "NX_BASE: ${{ env.NX_BASE }}"
-          echo "NX_HEAD: ${{ env.NX_HEAD }}"
-          echo "Affected: ${affected}"
-          echo "Branch slug: ${branch_slug}"
-          echo "Current ref: ${{ github.ref }}"
-          echo ">>>> eof debug"
-
-          projects_array=()
-
-          preview_governance="not deployed"
-          preview_trading="not deployed"
-          preview_explorer="not deployed"
-          preview_tools="not deployed"
-
-          # parse if affected is any of three main applications, if none - use all of them
-          if echo "$affected" | grep -q governance; then
-            echo "Governance is affected"
-            projects_array+=("governance")
-            preview_governance=$(printf "https://%s.%s.vega.rocks" "governance" "$branch_slug")
-          fi
-          if echo "$affected" | grep -q trading; then
-            echo "Trading is affected"
-            projects_array+=("trading")
-            preview_trading=$(printf "https://%s.%s.vega.rocks" "trading" "$branch_slug")
-          fi
-          if echo "$affected" | grep -q explorer; then
-            echo "Explorer is affected"
-            projects_array+=("explorer")
-            preview_explorer=$(printf "https://%s.%s.vega.rocks" "explorer" "$branch_slug")
-          fi
-          if [[ ${#projects_array[@]} -eq 0 ]]; then
-            projects_array=("governance" "trading" "explorer")
-            preview_governance=$(printf "https://%s.%s.vega.rocks" "governance" "$branch_slug")
-            preview_trading=$(printf "https://%s.%s.vega.rocks" "trading" "$branch_slug")
-            preview_explorer=$(printf "https://%s.%s.vega.rocks" "explorer" "$branch_slug")
-          fi
-
-          # applications parsed before this loop are applicable for running e2e-tests
-          projects_e2e_array=()
-          for project in "${projects_array[@]}"; do
-            projects_e2e_array+=("${project}-e2e")
-          done
-          # all applications below this loop are not applicable for running e2e-test
-
-          # check if pull request event to deploy tools
-          if [[ "${{ github.event_name }}" = "pull_request" ]]; then
-            if echo "$affected" | grep -q multisig-signer; then
-              echo "Tools are affected"
-              echo "Deploying tools on preview"
-              preview_tools=$(printf "https://%s.%s.vega.rocks" "tools" "$branch_slug")
-
-              projects_array+=("multisig-signer")
-            fi
-          # those apps deploy only from develop to mainnet
-          elif [[ "${{ github.ref }}" =~ .*develop$ ]]; then
-            if echo "$affected" | grep -q multisig-signer; then
-              echo "Tools are affected"
-              echo "Deploying tools on s3"
-
-              projects_array+=("multisig-signer")
-            fi
-            if echo "$affected" | grep -q static; then
-              echo "static is affected"
-              echo "Deploying static on s3"
-
-              projects_array+=("static")
-            fi
-            if echo "$affected" | grep -q ui-toolkit; then
-              echo "ui-toolkit is affected"
-              echo "Deploying ui-toolkit on s3"
-
-              projects_array+=("ui-toolkit")
-            fi
-          fi
-
-          # if branch starts with release/ and ends with trading / governance or explorer - overwrite the array of affected projects with fixed single application
-          if [[ "${{ github.ref }}" == *release* ]]; then
-            echo ">> This is a relase branch"
-            case "${{ github.ref }}" in
-              *trading)
-                echo ">> Only trading will be deployed"
-                projects_array=(trading)
-                projects_e2e_array=(trading)
-              ;;
-              *governance)
-                echo ">> Only governance will be deployed"
-                projects_array=(governance)
-                projects_e2e_array=(governance)
-              ;;
-              *explorer)
-                echo ">> Only explorer will be deployed"
-                projects_array=(explorer)
-                projects_e2e_array=(explorer)
-              ;;
-              *)
-                echo ">> All apps will be deployed"
-              ;;
-            esac
-          fi
-
-          echo "Projects: ${projects_array[@]}"
-          echo "Projects E2E: ${projects_e2e_array[@]}"
-          projects_json=$(jq -M --compact-output --null-input '$ARGS.positional' --args -- "${projects_array[@]}")
-          projects_e2e_json=$(jq -M --compact-output --null-input '$ARGS.positional' --args -- "${projects_e2e_array[@]}")
-
-          echo PROJECTS_E2E=$projects_e2e_json >> $GITHUB_ENV
-          echo PROJECTS=$projects_json >> $GITHUB_ENV
-
-          echo PREVIEW_GOVERNANCE=$preview_governance >> $GITHUB_ENV
-          echo PREVIEW_TRADING=$preview_trading >> $GITHUB_ENV
-          echo PREVIEW_EXPLORER=$preview_explorer >> $GITHUB_ENV
-          echo PREVIEW_TOOLS=$preview_tools >> $GITHUB_ENV
-
     outputs:
       projects: ${{ env.PROJECTS }}
       projects-e2e: ${{ env.PROJECTS_E2E }}

.github/workflows/publish-dist.yml

@@ -97,52 +97,13 @@ jobs:
       - name: Define dist variables
         if: ${{ github.event_name == 'push' }}
         run: |
-          envName=''
-          domain="vega.rocks"
-          bucketName=''
+          python3 tools/ci/define-dist-variables.py --github-ref="${{ github.ref }}" --app="${{ matrix.app }}"
 
-          if [[ "${{ github.ref }}" =~ .*release/.* ]]; then
-            # remove prefixing release/ and take the first string limited by - which is supposed to be name of the environment for releasing (format: release/testnet-trading)
-            envName="$(echo ${{ github.ref }} | sed -e "s|refs/heads/release/||" | cut -d '-' -f 1 )"
-          elif [[ "${{ github.ref }}" =~ .*develop$ ]]; then
-            envName="stagnet1"
-            if [[ "${{ matrix.app }}" = "multisig-signer" ]]; then
-              envName="mainnet"
-              bucketName="tools.vega.xyz"
-            fi
-            if [[ "${{ matrix.app }}" = "static" ]]; then
-              envName="mainnet"
-              bucketName="static.vega.xyz"
-            fi
-            if [[ "${{ matrix.app }}" = "ui-toolkit" ]]; then
-              envName="mainnet"
-              bucketName="ui.vega.rocks"
-            fi
-          elif [[ "${{ github.ref }}" =~ .*mainnet$ ]]; then
-            envName="mainnet"
-          fi
-
-          if [[ "${envName}" = "mainnet" ]]; then
-            domain="vega.xyz"
-            if [[ -z "${bucketName}" ]]; then
-              bucketName="${{ matrix.app }}.${domain}"
-            fi
-          elif [[ "${envName}" = "testnet" ]]; then
-            domain="fairground.wtf"
-            if [[ -z "${bucketName}" ]]; then
-              bucketName="${{ matrix.app }}.${domain}"
-            fi
-          fi
-
-          if [[ -z "${bucketName}" ]]; then
-            bucketName="${{ matrix.app }}.${envName}.${domain}"
-          fi
-
-          echo "bucket name: ${bucketName}"
-          echo "env name: ${envName}"
-
-          echo BUCKET_NAME=${bucketName} >> $GITHUB_ENV
-          echo ENV_NAME=${envName} >> $GITHUB_ENV
+      - name: Verify script result
+        if: ${{ github.event_name == 'push' }}
+        run: |
+          echo "BUCKET_NAME=${{ env.BUCKET_NAME }}"
+          echo "ENV_NAME=${{ env.ENV_NAME }}"
 
       - name: Build local dist
         run: |

apps/governance/.env

@@ -25,3 +25,5 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n01.stagnet1.vega.xyz/websocket
 CYPRESS_FAIRGROUND=false
 LC_ALL="en_US.UTF-8"
 
+# Cosmic elevator flags
+NX_SUCCESSOR_MARKETS=true

apps/governance/.env.capsule

@@ -25,3 +25,5 @@ NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26617/websocket
 #Test configuration variables
 CYPRESS_FAIRGROUND=false
 
+# Cosmic elevator flags
+NX_SUCCESSOR_MARKETS=false

apps/governance/.env.devnet

@@ -16,3 +16,6 @@ NX_SENTRY_DSN=https://4b8c8a8ba07742648aa4dfe1b8d17e40@o286262.ingest.sentry.io/
 
 NX_TENDERMINT_URL=https://tm.be.devnet1.vega.xyz/
 NX_TENDERMINT_WEBSOCKET_URL=wss://be.devnet1.vega.xyz/websocket
+
+# Cosmic elevator flags
+NX_SUCCESSOR_MARKETS=true

apps/governance/.env.mainnet

@@ -17,3 +17,6 @@ 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
+
+# Cosmic elevator flags
+NX_SUCCESSOR_MARKETS=false

apps/governance/.env.mainnet-mirror

@@ -16,3 +16,6 @@ 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
+
+# Cosmic elevator flags
+NX_SUCCESSOR_MARKETS=false

apps/governance/.env.stagnet1

@@ -11,4 +11,7 @@ NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/annou
 NX_VEGA_REST_URL=https://api.n00.stagnet1.vega.xyz/api/v2/
 
 NX_TENDERMINT_URL=https://tm.n01.stagnet1.vega.rocks
-NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n01.stagnet1.vega.xyz/websocket
+NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n01.stagnet1.vega.xyz/websocket
+
+# Cosmic elevator flags
+NX_SUCCESSOR_MARKETS=true

apps/governance/.env.testnet

@@ -16,4 +16,7 @@ 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
+NX_TENDERMINT_WEBSOCKET_URL=wss://be.testnet.vega.xyz/websocket
+
+# Cosmic elevator flags
+NX_SUCCESSOR_MARKETS=true

apps/governance/.env.validators-testnet

@@ -13,4 +13,7 @@ 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.
+NX_TENDERMINT_WEBSOCKET_URL=wss://be.validators-testnet.vega.
+
+# Cosmic elevator flags
+NX_SUCCESSOR_MARKETS=false

apps/governance/src/components/nav/nav.tsx

@@ -18,10 +18,7 @@ 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';
+import { ProtocolUpgradeCountdown } from '@vegaprotocol/proposals';
 
 export const SettingsLink = () => {
   const { open, isOpen, close } = useTelemetryDialog();
@@ -68,9 +65,7 @@ export const Nav = ({ theme }: Pick<NavigationProps, 'theme'>) => {
       actions={
         <>
           <SettingsLink />
-          <ProtocolUpgradeCountdown
-            mode={ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING}
-          />
+          <ProtocolUpgradeCountdown />
         </>
       }
     >

apps/governance/src/lib/download-json.ts

@@ -20,6 +20,6 @@ export const downloadJson = (jsonString: string, proposalTitle: string) => {
     window.URL.revokeObjectURL(url);
     document.body.removeChild(a);
   } catch (error) {
-    console.log(error);
+    console.error(error);
   }
 };

apps/governance/src/routes/proposals/components/proposal-detail-header/proposal-header.spec.tsx

@@ -22,6 +22,16 @@ import {
 } from '../../test-helpers/mocks';
 import type { ProposalQuery } from '../../proposal/__generated__/Proposal';
 import type { MockedResponse } from '@apollo/client/testing';
+import { FLAGS } from '@vegaprotocol/environment';
+import { BrowserRouter } from 'react-router-dom';
+
+jest.mock('@vegaprotocol/proposals', () => ({
+  ...jest.requireActual('@vegaprotocol/proposals'),
+  useSuccessorMarketProposalDetails: () => ({
+    code: 'PARENT_CODE',
+    parentMarketId: 'PARENT_ID',
+  }),
+}));
 
 const renderComponent = (
   proposal: ProposalQuery['proposal'],
@@ -30,20 +40,27 @@ const renderComponent = (
 ) =>
   render(
     <AppStateProvider>
-      <MockedProvider mocks={mocks}>
-        <VegaWalletContext.Provider value={mockWalletContext}>
-          <ProposalHeader
-            proposal={proposal}
-            isListItem={isListItem}
-            networkParams={mockNetworkParams}
-          />
-        </VegaWalletContext.Provider>
-      </MockedProvider>
+      <BrowserRouter>
+        <MockedProvider mocks={mocks}>
+          <VegaWalletContext.Provider value={mockWalletContext}>
+            <ProposalHeader
+              proposal={proposal}
+              isListItem={isListItem}
+              networkParams={mockNetworkParams}
+            />
+          </VegaWalletContext.Provider>
+        </MockedProvider>
+      </BrowserRouter>
     </AppStateProvider>
   );
 
 describe('Proposal header', () => {
+  afterAll(() => {
+    jest.clearAllMocks();
+  });
   it('Renders New market proposal', () => {
+    const mockedFlags = jest.mocked(FLAGS);
+    mockedFlags.SUCCESSOR_MARKETS = true;
     renderComponent(
       generateProposal({
         rationale: {
@@ -76,6 +93,9 @@ describe('Proposal header', () => {
     expect(screen.getByTestId('proposal-details')).toHaveTextContent(
       'tGBP settled future.'
     );
+    expect(screen.getByTestId('proposal-successor-info')).toHaveTextContent(
+      'PARENT_CODE'
+    );
   });
 
   it('Renders Update market proposal', () => {

apps/governance/src/routes/proposals/components/proposal-detail-header/proposal-header.tsx

@@ -11,6 +11,10 @@ import { ProposalInfoLabel } from '../proposal-info-label';
 import { useUserVote } from '../vote-details/use-user-vote';
 import { ProposalVotingStatus } from '../proposal-voting-status';
 import type { NetworkParamsResult } from '@vegaprotocol/network-parameters';
+import { useSuccessorMarketProposalDetails } from '@vegaprotocol/proposals';
+import { FLAGS } from '@vegaprotocol/environment';
+import Routes from '../../../routes';
+import { Link } from 'react-router-dom';
 
 export const ProposalHeader = ({
   proposal,
@@ -39,6 +43,9 @@ export const ProposalHeader = ({
       fallbackTitle = t('NewMarketProposal');
       details = (
         <>
+          {FLAGS.SUCCESSOR_MARKETS && (
+            <SuccessorCode proposalId={proposal?.id} />
+          )}
           <span>
             {t('Code')}: {change.instrument.code}.
           </span>{' '}
@@ -138,7 +145,7 @@ export const ProposalHeader = ({
               className="flex items-center gap-2"
               data-testid={`user-voted-${voteState.toLowerCase()}`}
             >
-              <div className="text-vega-green">
+              <div className="text-vega-green" data-testid="you-voted-icon">
                 <VegaIcon name={VegaIconNames.VOTE} size={24} />
               </div>
               <div>
@@ -181,3 +188,20 @@ export const ProposalHeader = ({
     </>
   );
 };
+
+const SuccessorCode = ({ proposalId }: { proposalId?: string | null }) => {
+  const { t } = useTranslation();
+  const successor = useSuccessorMarketProposalDetails(proposalId);
+
+  return successor.parentMarketId || successor.code ? (
+    <span className="block" data-testid="proposal-successor-info">
+      {t('Successor market to')}:{' '}
+      <Link
+        to={`${Routes.PROPOSALS}/${successor.parentMarketId}`}
+        className="hover:underline"
+      >
+        {successor.code || successor.parentMarketId}
+      </Link>
+    </span>
+  ) : null;
+};

apps/governance/src/routes/proposals/components/proposals-list-item/proposals-list-item-details.tsx

@@ -1,5 +1,5 @@
 import { Link } from 'react-router-dom';
-import { Button, VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
+import { Button } from '@vegaprotocol/ui-toolkit';
 import { differenceInHours, format, formatDistanceToNowStrict } from 'date-fns';
 import { useTranslation } from 'react-i18next';
 import { DATE_FORMAT_DETAILED } from '../../../../lib/date-formats';
@@ -115,10 +115,6 @@ export const ProposalsListItemDetails = ({
 
   return (
     <div className="mt-4 items-start text-sm">
-      <div className="text-vega-green">
-        <VegaIcon size={16} name={VegaIconNames.VOTE} />
-        <VegaIcon size={16} name={VegaIconNames.TICKET} />
-      </div>
       <div className="flex items-center gap-2 text-vega-light-300 mb-2">
         {voteDetails && <span data-testid="vote-details">{voteDetails}</span>}
         {voteDetails && voteStatus && <span>&middot;</span>}

apps/governance/src/routes/rewards/home/rewards-page.tsx

@@ -61,8 +61,6 @@ export const RewardsPage = () => {
     error: paramsError,
   } = useNetworkParams([NetworkParams.reward_staking_delegation_payoutDelay]);
 
-  console.log('params', params);
-
   const payoutDuration = useMemo(() => {
     if (!params) {
       return 0;

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

@@ -535,6 +535,7 @@ function checkIfDataAndTimeOfCreationAndUpdateIsEqual(date: string) {
       // unexpected latency
       const minBefore = subSeconds(new Date(), 5);
       const maxAfter = addSeconds(new Date(), 5);
+      // eslint-disable-next-line no-console
       console.log(maxAfter);
       const date = new Date($dateTime.toString());
       expect(isAfter(date, minBefore) && isBefore(date, maxAfter)).to.equal(

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

@@ -363,12 +363,11 @@ describe('Closed markets', { tags: '@smoke' }, () => {
       .first()
       .find('button svg')
       .should('exist');
-
     if (Cypress.env('NX_SUCCESSOR_MARKETS')) {
       cy.get(rowSelector)
-        .find('[col-id="successorMarketID"]')
+        .find('[col-id="successorMarket"]')
         .first()
-        .should('have.text', ' - ');
+        .should('have.text', '-');
     }
   });
 

apps/trading-e2e/src/integration/home-node-network.cy.ts

@@ -68,22 +68,4 @@ describe('home', { tags: '@regression' }, () => {
       cy.getByTestId('connect').click();
     });
   });
-
-  describe('Network switcher', () => {
-    before(() => {
-      cy.mockTradingPage();
-      cy.mockSubscription();
-      cy.visit('/');
-    });
-
-    it('switch to fairground network and check status & incidents link', () => {
-      // 0006-NETW-002
-      // 0006-NETW-003
-      cy.getByTestId('navigation')
-        .find('[data-testid="network-switcher"]')
-        .should('have.text', 'Custom')
-        .click();
-      cy.getByTestId('network-item').contains('Fairground testnet');
-    });
-  });
 });

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

@@ -27,6 +27,7 @@ describe('markets all table', { tags: '@smoke' }, () => {
       'Description',
       'Trading mode',
       'Status',
+      'Successor market',
       'Best bid',
       'Best offer',
       'Mark price',

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

@@ -1,5 +1,6 @@
 import { MarketTradingModeMapping } from '@vegaprotocol/types';
 import { MarketState } from '@vegaprotocol/types';
+import compact from 'lodash/compact';
 
 const accordionContent = 'accordion-content';
 const blockExplorerLink = 'block-explorer-link';
@@ -66,20 +67,24 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
     // 6002-MDET-201
     cy.getByTestId(marketTitle).contains('Key details').click();
 
-    validateMarketDataRow(0, 'Name', 'BTCUSD Monthly (30 Jun 2022)');
-    validateMarketDataRow(1, 'Market ID', 'market-0');
+    const rows: [string, string][] = compact([
+      ['Name', 'BTCUSD Monthly (30 Jun 2022)'],
+      ['Market ID', 'market-0'],
+      Cypress.env('NX_SUCCESSOR_MARKETS') && ['Parent Market ID', 'PARENT-A'],
+      Cypress.env('NX_SUCCESSOR_MARKETS') && [
+        'Insurance Pool Fraction',
+        '0.75',
+      ],
+      ['Trading Mode', MarketTradingModeMapping.TRADING_MODE_CONTINUOUS],
+      ['Market Decimal Places', '5'],
+      ['Position Decimal Places', '0'],
+      ['Settlement Asset Decimal Places', '5'],
+    ]);
 
-    if (Cypress.env('NX_SUCCESSOR_MARKETS')) {
-      validateMarketDataRow(2, 'Parent Market ID', 'PARENT-A');
+    for (const rowNumber in rows) {
+      const [name, value] = rows[rowNumber];
+      validateMarketDataRow(Number(rowNumber), name, value);
     }
-    validateMarketDataRow(
-      3,
-      'Trading Mode',
-      MarketTradingModeMapping.TRADING_MODE_CONTINUOUS
-    );
-    validateMarketDataRow(4, 'Market Decimal Places', '5');
-    validateMarketDataRow(5, 'Position Decimal Places', '0');
-    validateMarketDataRow(6, 'Settlement Asset Decimal Places', '5');
   });
 
   it('instrument displayed', () => {

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

@@ -19,6 +19,7 @@ describe('markets proposed table', { tags: '@smoke' }, () => {
       'Description',
       'Settlement asset',
       'State',
+      'Parent market',
       'Voting',
       'Closing date',
       'Enactment date',
@@ -83,7 +84,7 @@ describe('markets proposed table', { tags: '@smoke' }, () => {
       .find('button')
       .click();
 
-    const dropdownContent = '[data-testid="market-actions-content"]';
+    const dropdownContent = '[data-testid="proposal-actions-content"]';
     const dropdownContentItem = '[role="menuitem"]';
 
     // 6001-MARK-059
@@ -99,7 +100,7 @@ describe('markets proposed table', { tags: '@smoke' }, () => {
           'VEGA_TOKEN_URL'
         )}/proposals/e9ec6d5c46a7e7bcabf9ba7a893fa5a5eeeec08b731f06f7a6eb7bf0e605b829`
       );
-    cy.getByTestId('market-actions-content').click();
+    cy.getByTestId('proposal-actions-content').click();
   });
 
   // 6001-MARK-060

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

@@ -1,114 +0,0 @@
-import { mockConnectWallet } from '@vegaprotocol/cypress';
-
-describe('Navbar', { tags: '@smoke' }, () => {
-  beforeEach(() => {
-    cy.clearAllLocalStorage();
-    cy.mockTradingPage();
-    cy.mockSubscription();
-    cy.visit('/');
-    cy.wait('@Markets');
-    cy.wait('@MarketsData');
-  });
-
-  const pages = [
-    { name: 'Markets', link: '#/markets/all' },
-    { name: 'Trading', link: '#/markets' },
-    { name: 'Portfolio', link: '#/portfolio' },
-  ];
-
-  describe('desktop view', () => {
-    pages.forEach(({ name, link }) => {
-      it(`${name} should be correctly rendered`, () => {
-        cy.get('nav')
-          .find(`a[data-testid=${name}]:visible`)
-          .then((element) => {
-            cy.wrap(element).click();
-            cy.location('hash').should('contain', link);
-          });
-      });
-    });
-
-    it('Resources dropdown should be correctly rendered', () => {
-      const resourceSelector = 'ul li:contains(Resources)';
-      ['Docs', 'Give Feedback'].forEach((text, index) => {
-        cy.get('nav').find(resourceSelector).contains('Resources').click();
-        cy.get('nav')
-          .find(resourceSelector)
-          .find('.navigation-content li')
-          .eq(index)
-          .find('a')
-          .then((element) => {
-            expect(element.attr('target')).to.eq('_blank');
-            expect(element.attr('href')).to.not.be.empty;
-            expect(element.text()).to.eq(text);
-          });
-      });
-    });
-
-    it('Disclaimer should be presented after choosing from menu', () => {
-      cy.get('nav')
-        .find('ul li:contains(Resources)')
-        .contains('Resources')
-        .click();
-      cy.getByTestId('Disclaimer').eq(0).click();
-      cy.location('hash').should('equal', '#/disclaimer');
-      cy.get('p').contains(
-        'Vega is a decentralised peer-to-peer protocol that can be used to trade derivatives with cryptoassets.'
-      );
-    });
-  });
-
-  describe('mobile view', () => {
-    const viewportHeight = Cypress.config('viewportHeight');
-    const viewportWidth = Cypress.config('viewportWidth');
-    before(() => {
-      // a little hack to keep the viewport size between tests (cypress bug)
-      Cypress.config({
-        viewportWidth: 560,
-        viewportHeight: 890,
-      });
-      cy.viewport(560, 890);
-    });
-
-    describe('wallet drawer', () => {
-      it('wallet drawer should be correctly rendered', () => {
-        mockConnectWallet();
-        cy.connectVegaWallet(true);
-        cy.getByTestId('connect-vega-wallet-mobile').click();
-        cy.getByTestId('wallets-drawer').should('be.visible');
-        cy.getByTestId('wallets-drawer').within((el) => {
-          cy.wrap(el).get('button').contains('Disconnect').click();
-        });
-        cy.getByTestId('wallets-drawer').should('not.be.visible');
-      });
-    });
-
-    describe('menu drawer', () => {
-      pages.forEach(({ name, link }) => {
-        it(`${name} should be correctly rendered`, () => {
-          cy.getByTestId('button-menu-drawer').click();
-          cy.getByTestId('menu-drawer').should('be.visible');
-          cy.getByTestId('menu-drawer').within((el) => {
-            cy.wrap(el).getByTestId(name).click();
-            cy.location('hash').should('contain', link);
-          });
-        });
-      });
-
-      it('Menu drawer should not be visible until opened', () => {
-        cy.getByTestId('menu-drawer').should('not.be.visible');
-        cy.getByTestId('button-menu-drawer').click();
-        cy.getByTestId('menu-drawer').should('be.visible');
-        cy.getByTestId('button-menu-drawer').click();
-        cy.getByTestId('menu-drawer').should('not.be.visible');
-      });
-    });
-    after(() => {
-      // a little hack to keep the viewport size between tests (cypress bug)
-      Cypress.config({
-        viewportWidth,
-        viewportHeight,
-      });
-    });
-  });
-});

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

@@ -127,7 +127,7 @@ describe(
         {
           name: 'Price monitoring bounds',
           infoText:
-            'Price Monitoring Bounds: Min 162.56291Max 182.96869Reference 172.47489',
+            'Price Monitoring Bounds 1: Min 162.56291Max 182.96869Reference 172.47489',
         },
       ];
 
@@ -171,6 +171,7 @@ describe(
         .invoke('text')
         .then((text) => {
           const actualDate = text.slice(0, -67);
+          // eslint-disable-next-line no-console
           console.log(actualDate);
           const actualOhlc = text.slice(-67);
           assert.isTrue(expectedDateRegex.test(actualDate));

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

@@ -7,7 +7,7 @@ const closePosition = 'close-position';
 const dialogCloseX = 'dialog-close';
 const dialogContent = 'dialog-content';
 const dropDownMenu = 'dropdown-menu';
-const marketActionsContent = 'market-actions-content';
+const marketActionsContent = 'position-actions-content';
 const positions = 'Positions';
 const tabPositions = 'tab-positions';
 const toastContent = 'toast-content';

apps/trading-e2e/src/support/trading.ts

@@ -36,6 +36,7 @@ import {
   successorMarketQuery,
   parentMarketIdQuery,
   successorMarketIdsQuery,
+  successorMarketProposalDetailsQuery,
 } from '@vegaprotocol/mock';
 import type { PartialDeep } from 'type-fest';
 import type { MarketDataQuery, MarketsQuery } from '@vegaprotocol/markets';
@@ -186,6 +187,11 @@ const mockTradingPage = (
   aliasGQLQuery(req, 'SuccessorMarket', successorMarketQuery());
   aliasGQLQuery(req, 'ParentMarketId', parentMarketIdQuery());
   aliasGQLQuery(req, 'SuccessorMarketIds', successorMarketIdsQuery());
+  aliasGQLQuery(
+    req,
+    'SuccessorMarketProposalDetails',
+    successorMarketProposalDetailsQuery()
+  );
 };
 declare global {
   // eslint-disable-next-line @typescript-eslint/no-namespace

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

@@ -80,9 +80,12 @@ export const TradePanels = ({
       <div className="flex flex-nowrap overflow-x-auto max-w-full border-t border-default">
         {Object.keys(TradingViews).map((key) => {
           const isActive = view === key;
-          const className = classNames('p-4 min-w-[100px] capitalize', {
-            'bg-vega-clight-500 dark:bg-vega-cdark-500': isActive,
-          });
+          const className = classNames(
+            'py-2 px-4 min-w-[100px] capitalize text-sm',
+            {
+              'bg-vega-clight-500 dark:bg-vega-cdark-500': isActive,
+            }
+          );
           return (
             <button
               data-testid={key}

apps/trading/client-pages/markets/closed.spec.tsx

@@ -10,15 +10,18 @@ import type {
   OracleSpecDataConnectionQuery,
   MarketsDataQuery,
   MarketsQuery,
+  SuccessorMarketIdsQuery,
 } from '@vegaprotocol/markets';
 import {
   OracleSpecDataConnectionDocument,
   MarketsDataDocument,
   MarketsDocument,
+  SuccessorMarketIdsDocument,
 } from '@vegaprotocol/markets';
 import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
 import { VegaWalletContext } from '@vegaprotocol/wallet';
 import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
+import { FLAGS } from '@vegaprotocol/environment';
 import {
   createMarketFragment,
   marketsQuery,
@@ -46,10 +49,16 @@ jest.mock('@vegaprotocol/markets', () => ({
       : { data: undefined },
 }));
 
-jest.mock('@vegaprotocol/environment', () => ({
-  ...jest.requireActual('@vegaprotocol/environment'),
-  FLAGS: { SUCCESSOR_MARKETS: true } as Partial<FeatureFlags>,
-}));
+jest.mock('@vegaprotocol/environment', () => {
+  const actual = jest.requireActual('@vegaprotocol/environment');
+  return {
+    ...actual,
+    FLAGS: {
+      ...actual.FLAGS,
+      SUCCESSOR_MARKETS: true,
+    } as FeatureFlags,
+  };
+});
 
 describe('Closed', () => {
   let originalNow: typeof Date.now;
@@ -349,8 +358,25 @@ describe('Closed', () => {
           state: MarketState.STATE_SETTLED,
         }),
       },
+      {
+        __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,
@@ -364,11 +390,36 @@ describe('Closed', () => {
         },
       },
     };
-
+    const successorMarketsMock: MockedResponse<SuccessorMarketIdsQuery> = {
+      request: {
+        query: SuccessorMarketIdsDocument,
+      },
+      result: {
+        data: {
+          marketsConnection: {
+            __typename: 'MarketConnection',
+            edges: [
+              {
+                node: {
+                  id: 'include-0',
+                  successorMarketID: 'successorMarketID',
+                  parentMarketID: '',
+                },
+              },
+            ],
+          },
+        },
+      },
+    };
     render(
       <MemoryRouter>
         <MockedProvider
-          mocks={[mixedMarketsMock, marketsDataMock, oracleDataMock]}
+          mocks={[
+            mixedMarketsMock,
+            marketsDataMock,
+            oracleDataMock,
+            successorMarketsMock,
+          ]}
         >
           <VegaWalletContext.Provider
             value={{ pubKey } as VegaWalletContextShape}
@@ -384,5 +435,107 @@ describe('Closed', () => {
         screen.getByRole('button', { name: 'SuccessorCode' })
       ).toBeInTheDocument();
     });
+    expect(
+      screen.getByRole('columnheader', {
+        name: (_name, element) =>
+          element.getAttribute('col-id') === 'successorMarket',
+      })
+    ).toBeInTheDocument();
+  });
+
+  it('feature flag should hide successors', async () => {
+    const mockedFlags = jest.mocked(FLAGS);
+    mockedFlags.SUCCESSOR_MARKETS = false;
+
+    const mixedMarkets = [
+      {
+        __typename: 'MarketEdge' as const,
+        node: createMarketFragment({
+          id: 'include-0',
+          state: MarketState.STATE_SETTLED,
+        }),
+      },
+      {
+        __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,
+          },
+        },
+      },
+    };
+    const successorMarketsMock: MockedResponse<SuccessorMarketIdsQuery> = {
+      request: {
+        query: SuccessorMarketIdsDocument,
+      },
+      result: {
+        data: {
+          marketsConnection: {
+            __typename: 'MarketConnection',
+            edges: [
+              {
+                node: {
+                  id: 'include-0',
+                  successorMarketID: 'successorMarketID',
+                  parentMarketID: '',
+                },
+              },
+            ],
+          },
+        },
+      },
+    };
+    render(
+      <MemoryRouter>
+        <MockedProvider
+          mocks={[
+            mixedMarketsMock,
+            marketsDataMock,
+            oracleDataMock,
+            successorMarketsMock,
+          ]}
+        >
+          <VegaWalletContext.Provider
+            value={{ pubKey } as VegaWalletContextShape}
+          >
+            <Closed />
+          </VegaWalletContext.Provider>
+        </MockedProvider>
+      </MemoryRouter>
+    );
+    await waitFor(() => {
+      expect(
+        screen.getByRole('columnheader', {
+          name: (_name, element) =>
+            element.getAttribute('col-id') === 'settlementDate',
+        })
+      ).toBeInTheDocument();
+    });
+    screen.getAllByRole('columnheader').forEach((element) => {
+      expect(element.getAttribute('col-id')).not.toEqual('successorMarket');
+    });
   });
 });

apps/trading/client-pages/markets/closed.tsx

@@ -4,11 +4,7 @@ import type {
   VegaICellRendererParams,
   VegaValueFormatterParams,
 } from '@vegaprotocol/datagrid';
-import {
-  AgGridLazy as AgGrid,
-  COL_DEFS,
-  MarketNameCell,
-} from '@vegaprotocol/datagrid';
+import { AgGridLazy as AgGrid, COL_DEFS } from '@vegaprotocol/datagrid';
 import { useMemo } from 'react';
 import { t } from '@vegaprotocol/i18n';
 import { MarketState, MarketStateMapping } from '@vegaprotocol/types';
@@ -23,15 +19,14 @@ import type {
 import {
   MarketActionsDropdown,
   closedMarketsWithDataProvider,
-  useSuccessorMarket,
 } from '@vegaprotocol/markets';
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
 import type { ColDef } from 'ag-grid-community';
+import { FLAGS } from '@vegaprotocol/environment';
 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';
-import { FLAGS } from '@vegaprotocol/environment';
+import { SuccessorMarketRenderer } from './successor-market-cell';
 
 type SettlementAsset =
   MarketMaybeWithData['tradableInstrument']['instrument']['product']['settlementAsset'];
@@ -106,22 +101,6 @@ export const Closed = () => {
   );
 };
 
-export const SuccessorMarketRenderer = ({
-  value,
-}: VegaICellRendererParams<Row, 'id'>) => {
-  const { data } = useSuccessorMarket(value);
-  const onMarketClick = useMarketClickHandler();
-  return data ? (
-    <MarketNameCell
-      value={data.tradableInstrument.instrument.code}
-      data={data}
-      onMarketClick={onMarketClick}
-    />
-  ) : (
-    ' - '
-  );
-};
-
 const ClosedMarketsDataGrid = ({
   rowData,
   error,
@@ -202,8 +181,8 @@ const ClosedMarketsDataGrid = ({
       },
       FLAGS.SUCCESSOR_MARKETS && {
         headerName: t('Successor market'),
-        colId: 'successorMarketID',
         field: 'id',
+        colId: 'successorMarket',
         cellRenderer: 'SuccessorMarketRenderer',
       },
       {

apps/trading/client-pages/markets/markets.tsx

@@ -1,7 +1,13 @@
 import { MarketsContainer } from '@vegaprotocol/markets';
 import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
+import { SuccessorMarketRenderer } from './successor-market-cell';
 
 export const Markets = () => {
   const handleOnSelect = useMarketClickHandler();
-  return <MarketsContainer onSelect={handleOnSelect} />;
+  return (
+    <MarketsContainer
+      onSelect={handleOnSelect}
+      SuccessorMarketRenderer={SuccessorMarketRenderer}
+    />
+  );
 };

apps/trading/client-pages/markets/proposed.tsx

@@ -6,6 +6,7 @@ import {
 } from '@vegaprotocol/environment';
 import { ProposalsList } from '@vegaprotocol/proposals';
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
+import { SuccessorMarketRenderer } from './successor-market-cell';
 
 export const Proposed = () => {
   const tokenLink = useLinks(DApp.Token);
@@ -13,7 +14,7 @@ export const Proposed = () => {
   return (
     <>
       <div className="h-[400px]">
-        <ProposalsList />
+        <ProposalsList SuccessorMarketRenderer={SuccessorMarketRenderer} />
       </div>
       <ExternalLink className="py-4 px-[11px] text-sm" href={externalLink}>
         {t('Propose a new market')}

apps/trading/client-pages/markets/successor-market-cell.tsx

@@ -0,0 +1,40 @@
+import { MarketNameCell } from '@vegaprotocol/datagrid';
+import { useDataProvider } from '@vegaprotocol/data-provider';
+import { marketProvider, useSuccessorMarketIds } from '@vegaprotocol/markets';
+import { useMarketClickHandler } from '../../lib/hooks/use-market-click-handler';
+import React from 'react';
+
+export const SuccessorMarketRenderer = ({
+  value,
+  parent,
+}: {
+  value: string;
+  parent?: boolean;
+}) => {
+  const successors = useSuccessorMarketIds(value);
+  const onMarketClick = useMarketClickHandler();
+
+  const lookupValue = successors
+    ? parent
+      ? successors.parentMarketID
+      : successors.successorMarketID
+    : '';
+
+  const { data } = useDataProvider({
+    dataProvider: marketProvider,
+    variables: {
+      marketId: lookupValue || '',
+    },
+    skip: !lookupValue,
+  });
+
+  return data ? (
+    <MarketNameCell
+      value={data.tradableInstrument.instrument.code}
+      data={data}
+      onMarketClick={onMarketClick}
+    />
+  ) : (
+    '-'
+  );
+};

apps/trading/components/header/header.tsx

@@ -17,7 +17,7 @@ export const Header = ({ title, children }: TradeMarketHeaderProps) => {
   );
   return (
     <header className={headerClasses}>
-      <div className="flex flex-col justify-center items-start pl-3 lg:pl-4 pt-2 xl:pb-2 pb-0">
+      <div className="hidden lg: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">

apps/trading/components/icons/wallet.tsx

@@ -1,10 +1,12 @@
+import classNames from 'classnames';
+
 export const WalletIcon = ({ className }: { className?: string }) => {
   return (
     <svg
       width="26"
       height="18"
       viewBox="0 0 26 18"
-      className={className}
+      className={classNames('fill-current', className)}
       data-testid="wallet-icon"
     >
       <path d="M4.77437 17.7499H4.74987C3.6504 17.7368 2.77439 16.8489 2.77439 15.7772V12.8495V12.6343L2.5615 12.6023C1.59672 12.4575 0.849609 11.6116 0.849609 10.6266V7.40064C0.849609 6.39018 1.59509 5.56985 2.56147 5.4249L2.77439 5.39297V5.17767V2.24998C2.77439 1.14102 3.66537 0.25 4.77437 0.25H23.7501C24.8591 0.25 25.7501 1.14098 25.7501 2.24998V15.7499C25.7501 16.8588 24.8591 17.7499 23.7501 17.7499H4.77437ZM4.44917 12.5992H4.19917L4.77441 16.075V16.325H4.77466H23.7502C24.0778 16.325 24.3254 16.0777 24.3254 15.7497V2.24984C24.3254 1.9222 24.0782 1.6746 23.7502 1.6746H4.77441C4.44677 1.6746 4.19917 1.92182 4.19917 2.24984V5.12306V5.37306H4.44917H7.0244C8.51139 5.37306 9.67508 6.56094 9.67508 8.02374V9.94852C9.67508 11.4355 8.4872 12.5992 7.0244 12.5992H4.44917ZM2.84963 6.8253C2.52199 6.8253 2.27439 7.07253 2.27439 7.40054V10.6264C2.27439 10.9541 2.52161 11.2017 2.84962 11.2017L7.02419 11.2019C7.73619 11.2019 8.25009 10.6515 8.25009 9.97598V8.0512C8.25009 7.3392 7.69976 6.8253 7.0242 6.8253H2.84963Z" />

apps/trading/components/layouts/layout-with-sidebar.tsx

@@ -11,9 +11,9 @@ 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]'
+    'grid-rows-[min-content_1fr_40px]',
+    'lg:grid-rows-[min-content_1fr]',
+    'lg:grid-cols-[1fr_350px_40px]'
   );
 
   return (
@@ -40,7 +40,14 @@ export const LayoutWithSidebar = () => {
       >
         <SidebarContent />
       </aside>
-      <div className="col-start-2 lg:col-start-3 bg-vega-clight-800 dark:bg-vega-cdark-800 border-l border-default">
+      <div
+        className={classNames(
+          'bg-vega-clight-800 dark:bg-vega-cdark-800',
+          'border-t lg:border-l lg:border-t-0 border-default',
+          'row-start-3 col-start-1 cols-span-full',
+          'lg:row-start-2 lg:row-span-full lg:col-start-3'
+        )}
+      >
         <Sidebar />
       </div>
     </div>

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

@@ -42,8 +42,6 @@ export const LiquidityHeader = () => {
     triggeringRatio,
   });
 
-  console.log(market);
-
   return (
     <Header
       title={

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

@@ -4,10 +4,12 @@ import { useParams } from 'react-router-dom';
 import { MarketSelector } from '../../components/market-selector/market-selector';
 import { MarketHeaderStats } from '../../client-pages/market/market-header-stats';
 import { useMarket } from '@vegaprotocol/markets';
+import { useState } from 'react';
 
 export const MarketHeader = () => {
   const { marketId } = useParams();
   const { data } = useMarket(marketId);
+  const [open, setOpen] = useState(false);
 
   if (!data) return null;
 
@@ -15,6 +17,8 @@ export const MarketHeader = () => {
     <Header
       title={
         <Popover
+          open={open}
+          onChange={setOpen}
           trigger={
             <HeaderTitle>
               {data.tradableInstrument.instrument.code}
@@ -23,7 +27,10 @@ export const MarketHeader = () => {
           }
           alignOffset={-10}
         >
-          <MarketSelector currentMarketId={marketId} />
+          <MarketSelector
+            currentMarketId={marketId}
+            onSelect={() => setOpen(false)}
+          />
         </Popover>
       }
     >

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

@@ -98,6 +98,7 @@ describe('MarketSelectorItem', () => {
             market={market}
             currentMarketId={market.id}
             style={{}}
+            onSelect={jest.fn()}
           />
         </MockedProvider>
       </MemoryRouter>

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

@@ -17,10 +17,12 @@ export const MarketSelectorItem = ({
   market,
   style,
   currentMarketId,
+  onSelect,
 }: {
   market: MarketMaybeWithDataAndCandles;
   style: CSSProperties;
   currentMarketId?: string;
+  onSelect: (marketId: string) => void;
 }) => {
   return (
     <div style={style} role="row">
@@ -32,6 +34,7 @@ export const MarketSelectorItem = ({
           'bg-vega-clight-600 dark:bg-vega-cdark-600':
             market.id === currentMarketId,
         })}
+        onClick={() => onSelect(market.id)}
       >
         <MarketData market={market} />
       </Link>
@@ -80,7 +83,7 @@ const MarketData = ({ market }: { market: MarketMaybeWithDataAndCandles }) => {
   return (
     <>
       <div className="w-2/5" role="gridcell">
-        <h3 className="text-ellipsis whitespace-nowrap overflow-hidden">
+        <h3 className="text-ellipsis text-sm lg:text-base whitespace-nowrap overflow-hidden">
           {market.tradableInstrument.instrument.code}
         </h3>
         {mode && (
@@ -90,7 +93,7 @@ const MarketData = ({ market }: { market: MarketMaybeWithDataAndCandles }) => {
         )}
       </div>
       <div
-        className="w-1/5 text-sm whitespace-nowrap text-ellipsis overflow-hidden"
+        className="w-1/5 text-xs lg:text-sm whitespace-nowrap text-ellipsis overflow-hidden"
         title={instrument.product.settlementAsset.symbol}
         data-testid="market-selector-price"
         role="gridcell"
@@ -98,7 +101,7 @@ const MarketData = ({ market }: { market: MarketMaybeWithDataAndCandles }) => {
         {price} {instrument.product.settlementAsset.symbol}
       </div>
       <div
-        className="w-1/5 text-sm text-right whitespace-nowrap text-ellipsis overflow-hidden"
+        className="w-1/5 text-xs lg:text-sm text-right whitespace-nowrap text-ellipsis overflow-hidden"
         title={t('24h vol')}
         data-testid="market-selector-volume"
         role="gridcell"

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

@@ -137,7 +137,7 @@ describe('MarketSelector', () => {
   it('renders only active markets', () => {
     render(
       <MemoryRouter>
-        <MarketSelector currentMarketId="market-0" />
+        <MarketSelector currentMarketId="market-0" onSelect={jest.fn()} />
       </MemoryRouter>
     );
     expect(screen.getAllByTestId(/market-\d/)).toHaveLength(
@@ -148,7 +148,7 @@ describe('MarketSelector', () => {
   it('filters by product type', async () => {
     render(
       <MemoryRouter>
-        <MarketSelector currentMarketId="market-0" />
+        <MarketSelector currentMarketId="market-0" onSelect={jest.fn()} />
       </MemoryRouter>
     );
 
@@ -174,7 +174,7 @@ describe('MarketSelector', () => {
   it('filters by search term', async () => {
     render(
       <MemoryRouter>
-        <MarketSelector currentMarketId="market-0" />
+        <MarketSelector currentMarketId="market-0" onSelect={jest.fn()} />
       </MemoryRouter>
     );
 
@@ -202,7 +202,7 @@ describe('MarketSelector', () => {
   it('filters by asset', async () => {
     render(
       <MemoryRouter>
-        <MarketSelector currentMarketId="market-0" />
+        <MarketSelector currentMarketId="market-0" onSelect={jest.fn()} />
       </MemoryRouter>
     );
 
@@ -234,7 +234,7 @@ describe('MarketSelector', () => {
   it('sorts by gained', async () => {
     render(
       <MemoryRouter>
-        <MarketSelector currentMarketId="market-0" />
+        <MarketSelector currentMarketId="market-0" onSelect={jest.fn()} />
       </MemoryRouter>
     );
 
@@ -256,7 +256,7 @@ describe('MarketSelector', () => {
   it('sorts by lost', async () => {
     render(
       <MemoryRouter>
-        <MarketSelector currentMarketId="market-0" />
+        <MarketSelector currentMarketId="market-0" onSelect={jest.fn()} />
       </MemoryRouter>
     );
 
@@ -272,7 +272,7 @@ describe('MarketSelector', () => {
   it('sorts by new', async () => {
     render(
       <MemoryRouter>
-        <MarketSelector currentMarketId="market-0" />
+        <MarketSelector currentMarketId="market-0" onSelect={jest.fn()} />
       </MemoryRouter>
     );
 

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

@@ -35,7 +35,7 @@ export const MarketSelector = ({
   onSelect,
 }: {
   currentMarketId?: string;
-  onSelect?: (marketId: string) => void;
+  onSelect: (marketId: string) => void;
 }) => {
   const [filter, setFilter] = useState<Filter>({
     searchTerm: '',
@@ -48,7 +48,7 @@ export const MarketSelector = ({
 
   return (
     <div data-testid="market-selector">
-      <div className="pt-2 px-2 mb-2 w-[320px] lg:w-[584px]">
+      <div className="pt-2 px-2 mb-2">
         <ProductSelector
           product={filter.product}
           onSelect={(product) => {
@@ -147,16 +147,17 @@ const MarketList = ({
   loading: boolean;
   searchTerm: string;
   currentMarketId?: string;
-  onSelect?: (marketId: string) => void;
+  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
+  const computedHeight = rect
     ? Math.min(data.length * itemSize, window.innerHeight - rect.y)
     : 400;
+  const height = Math.max(computedHeight, 45);
 
   if (error) {
     return <div>{error.message}</div>;
@@ -199,7 +200,7 @@ const MarketList = ({
 
 interface ListItemData {
   data: MarketMaybeWithDataAndCandles[];
-  onSelect?: (marketId: string) => void;
+  onSelect: (marketId: string) => void;
   currentMarketId?: string;
 }
 
@@ -216,6 +217,7 @@ const ListItem = ({
     market={data.data[index]}
     currentMarketId={data.currentMarketId}
     style={style}
+    onSelect={data.onSelect}
   />
 );
 
@@ -252,7 +254,11 @@ const List = ({
 
   if (!data.length) {
     return (
-      <div style={{ height }} data-testid="no-items">
+      <div
+        style={{ height }}
+        className="flex items-center"
+        data-testid="no-items"
+      >
         <div className="mx-4 my-2 text-sm">{noItems}</div>
       </div>
     );

apps/trading/components/navbar/index.tsx

@@ -1 +1,2 @@
 export * from './navbar';
+export * from './nav-header';

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

@@ -0,0 +1,66 @@
+import { VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
+import { MarketSelector } from '../market-selector';
+import { useMarket } from '@vegaprotocol/markets';
+import { t } from '@vegaprotocol/i18n';
+import { useParams } from 'react-router-dom';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import { useState } from 'react';
+
+/**
+ * This is only rendered for the mobile navigation
+ */
+export const NavHeader = () => {
+  const { marketId } = useParams();
+  const { data } = useMarket(marketId);
+  const [open, setOpen] = useState(false);
+
+  if (!marketId) return null;
+
+  return (
+    <FullScreenPopover
+      open={open}
+      onOpenChange={(x) => {
+        setOpen(x);
+      }}
+      trigger={
+        <h1 className="flex gap-1 sm:gap-2 md:gap-4 items-center text-default text-lg whitespace-nowrap xl:pr-4 xl:border-r border-default">
+          {data ? data.tradableInstrument.instrument.code : t('Select market')}
+          <VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={20} />
+        </h1>
+      }
+    >
+      <MarketSelector
+        currentMarketId={marketId}
+        onSelect={() => setOpen(false)}
+      />
+    </FullScreenPopover>
+  );
+};
+
+export interface PopoverProps extends PopoverPrimitive.PopoverProps {
+  trigger: React.ReactNode | string;
+}
+
+export const FullScreenPopover = ({
+  trigger,
+  children,
+  open,
+  onOpenChange,
+}: PopoverProps) => {
+  return (
+    <PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      <PopoverPrimitive.Trigger data-testid="popover-trigger">
+        {trigger}
+      </PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal>
+        <PopoverPrimitive.Content
+          data-testid="popover-content"
+          className="w-screen bg-vega-clight-800 dark:bg-vega-cdark-800 text-default border border-default"
+          sideOffset={5}
+        >
+          {children}
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  );
+};

apps/trading/components/navbar/navbar.spec.tsx

@@ -1,42 +1,158 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { MemoryRouter } from 'react-router-dom';
-import { MockedProvider } from '@apollo/client/testing';
 import type { VegaWalletContextShape } from '@vegaprotocol/wallet';
 import { VegaWalletContext } from '@vegaprotocol/wallet';
 import { Navbar } from './navbar';
+import { useGlobalStore } from '../../stores';
+
+jest.mock('@vegaprotocol/proposals', () => ({
+  ProtocolUpgradeCountdown: () => null,
+}));
 
 describe('Navbar', () => {
-  const pubKey = 'pubKey';
-  it('should be properly rendered', () => {
-    render(
-      <MockedProvider>
-        <MemoryRouter>
-          <VegaWalletContext.Provider
-            value={{ pubKey } as VegaWalletContextShape}
-          >
-            <Navbar theme="dark" />
-          </VegaWalletContext.Provider>
-        </MemoryRouter>
-      </MockedProvider>
+  const pubKey = '000';
+  const pubKeys = [
+    {
+      publicKey: pubKey,
+      name: 'Pub key 0',
+    },
+    {
+      publicKey: '111',
+      name: 'Pub key 1',
+    },
+  ];
+  const marketId = 'abc';
+  const navbarContent = 'navbar-menu-content';
+
+  const renderComponent = (
+    initialEntries?: string[],
+    walletContext?: Partial<VegaWalletContextShape>
+  ) => {
+    const context = {
+      pubKey,
+      pubKeys,
+      selectPubKey: jest.fn(),
+      disconnect: jest.fn(),
+      ...walletContext,
+    } as VegaWalletContextShape;
+    return render(
+      <MemoryRouter initialEntries={initialEntries}>
+        <VegaWalletContext.Provider value={context}>
+          <Navbar />
+        </VegaWalletContext.Provider>
+      </MemoryRouter>
     );
-    expect(screen.getByTestId('Markets')).toBeInTheDocument();
-    expect(screen.getByTestId('Trading')).toBeInTheDocument();
-    expect(screen.getByTestId('Portfolio')).toBeInTheDocument();
+  };
+
+  beforeAll(() => {
+    useGlobalStore.setState({ marketId });
+  });
+
+  it('should be properly rendered', () => {
+    renderComponent();
+
+    const expectedLinks = [
+      ['/', ''],
+      ['/markets/all', 'Markets'],
+      [`/markets/${marketId}`, 'Trading'],
+      ['/portfolio', 'Portfolio'],
+    ];
+
+    const links = screen.getAllByRole('link');
+
+    links.forEach((link, i) => {
+      const [href, text] = expectedLinks[i];
+      expect(link).toHaveAttribute('href', href);
+      expect(link).toHaveTextContent(text);
+    });
   });
 
   it('Markets page route should not match empty market page', () => {
-    render(
-      <MockedProvider>
-        <MemoryRouter initialEntries={['/markets/all']}>
-          <VegaWalletContext.Provider
-            value={{ pubKey } as VegaWalletContextShape}
-          >
-            <Navbar theme="dark" />
-          </VegaWalletContext.Provider>
-        </MemoryRouter>
-      </MockedProvider>
+    renderComponent(['/markets/all']);
+    expect(screen.getByRole('link', { name: 'Markets' })).toHaveClass('active');
+    expect(screen.getByRole('link', { name: 'Trading' })).not.toHaveClass(
+      'active'
     );
-    expect(screen.getByTestId('Markets')).toHaveClass('active');
-    expect(screen.getByTestId('Trading')).not.toHaveClass('active');
+  });
+
+  it('can open menu and navigate on small screens', async () => {
+    renderComponent();
+    await userEvent.click(screen.getByRole('button', { name: 'Menu' }));
+
+    const menuEl = screen.getByTestId(navbarContent);
+    expect(menuEl).toBeInTheDocument();
+    const menu = within(menuEl);
+
+    const expectedLinks = [
+      ['/markets/all', 'Markets'],
+      [`/markets/${marketId}`, 'Trading'],
+      ['/portfolio', 'Portfolio'],
+    ];
+    const links = menu.getAllByRole('link');
+    links.forEach((link, i) => {
+      const [href, text] = expectedLinks[i];
+      expect(link).toHaveAttribute('href', href);
+      expect(link).toHaveTextContent(text);
+    });
+
+    await userEvent.click(screen.getByRole('button', { name: 'Close menu' }));
+    expect(screen.queryByTestId(navbarContent)).not.toBeInTheDocument();
+  });
+
+  it('can close menu by clicking overlay', async () => {
+    renderComponent();
+    await userEvent.click(screen.getByRole('button', { name: 'Menu' }));
+    expect(screen.getByTestId(navbarContent)).toBeInTheDocument();
+    await userEvent.click(screen.getByTestId('navbar-menu-overlay'));
+    expect(screen.queryByTestId(navbarContent)).not.toBeInTheDocument();
+  });
+
+  it('can open wallet menu on small screens and change pubkey', async () => {
+    const mockSelectPubKey = jest.fn();
+    renderComponent(undefined, { selectPubKey: mockSelectPubKey });
+    await userEvent.click(screen.getByRole('button', { name: 'Wallet' }));
+
+    const menuEl = screen.getByTestId(navbarContent);
+    expect(menuEl).toBeInTheDocument();
+    const menu = within(menuEl);
+
+    expect(menu.getAllByTestId(/key-\d+-mobile/)).toHaveLength(pubKeys.length);
+
+    const activeKey = within(menu.getByTestId('key-000-mobile'));
+    expect(activeKey.getByText(pubKeys[0].name)).toBeInTheDocument();
+    expect(activeKey.getByTestId('icon-tick')).toBeInTheDocument();
+
+    const inactiveKey = within(menu.getByTestId('key-111-mobile'));
+    await userEvent.click(inactiveKey.getByText(pubKeys[1].name));
+    expect(mockSelectPubKey).toHaveBeenCalledWith(pubKeys[1].publicKey);
+  });
+
+  it('can transfer and close menu', async () => {
+    renderComponent();
+    await userEvent.click(screen.getByRole('button', { name: 'Wallet' }));
+
+    const menuEl = screen.getByTestId(navbarContent);
+    expect(menuEl).toBeInTheDocument();
+    const menu = within(menuEl);
+
+    await userEvent.click(menu.getByText('Transfer'));
+
+    expect(screen.queryByTestId(navbarContent)).not.toBeInTheDocument();
+  });
+
+  it('can disconnect and close menu', async () => {
+    const mockDisconnect = jest.fn();
+    renderComponent(undefined, { disconnect: mockDisconnect });
+    await userEvent.click(screen.getByRole('button', { name: 'Wallet' }));
+
+    const menuEl = screen.getByTestId(navbarContent);
+    expect(menuEl).toBeInTheDocument();
+    const menu = within(menuEl);
+
+    await userEvent.click(menu.getByText('Disconnect'));
+
+    expect(mockDisconnect).toHaveBeenCalled();
+    expect(screen.queryByTestId(navbarContent)).not.toBeInTheDocument();
   });
 });

apps/trading/components/navbar/navbar.tsx

@@ -1,140 +1,400 @@
-import type { ComponentProps, ReactNode } from 'react';
-import {
-  DApp,
-  NetworkSwitcher,
-  TOKEN_GOVERNANCE,
-  useEnvironment,
-  useLinks,
-  DocsLinks,
-} from '@vegaprotocol/environment';
+import type { ButtonHTMLAttributes, LiHTMLAttributes, ReactNode } from 'react';
+import { useState } from 'react';
+import { useEnvironment, DocsLinks, Networks } from '@vegaprotocol/environment';
 import { t } from '@vegaprotocol/i18n';
 import { useGlobalStore } from '../../stores';
 import { VegaWalletConnectButton } from '../vega-wallet-connect-button';
-import {
-  Navigation,
-  NavigationList,
-  NavigationItem,
-  NavigationLink,
-  ExternalLink,
-  NavigationBreakpoint,
-  NavigationTrigger,
-  NavigationContent,
-  VegaIconNames,
-  VegaIcon,
-} from '@vegaprotocol/ui-toolkit';
+import { VegaIconNames, VegaIcon, VLogo } from '@vegaprotocol/ui-toolkit';
+import * as N from '@radix-ui/react-navigation-menu';
+import * as D from '@radix-ui/react-dialog';
+import { NavLink } from 'react-router-dom';
 
 import { Links, Routes } from '../../pages/client-router';
-import {
-  ProtocolUpgradeCountdown,
-  ProtocolUpgradeCountdownMode,
-} from '@vegaprotocol/proposals';
+import classNames from 'classnames';
+import { VegaWalletMenu } from '../vega-wallet';
+import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
+import { WalletIcon } from '../icons/wallet';
+import { ProtocolUpgradeCountdown } from '@vegaprotocol/proposals';
+
+type MenuState = 'wallet' | 'nav' | null;
+type Theme = 'system' | 'yellow';
 
 export const Navbar = ({
+  children,
   theme = 'system',
 }: {
-  theme: ComponentProps<typeof Navigation>['theme'];
+  children?: ReactNode;
+  theme?: Theme;
 }) => {
-  const { GITHUB_FEEDBACK_URL } = useEnvironment();
-  const tokenLink = useLinks(DApp.Token);
+  // menu state for small screens
+  const [menu, setMenu] = useState<MenuState>(null);
+
+  const { pubKey } = useVegaWallet();
+
+  const openVegaWalletDialog = useVegaWalletDialogStore(
+    (store) => store.openVegaWalletDialog
+  );
+
+  const isConnected = pubKey !== null;
+
+  const navTextClasses = 'text-vega-clight-200 dark:text-vega-cdark-200';
+  const rootClasses = classNames(
+    navTextClasses,
+    'flex gap-3 h-10 pr-1',
+    'border-b border-default',
+    'bg-vega-clight-800 dark:bg-vega-cdark-800'
+  );
+  return (
+    <N.Root className={rootClasses}>
+      <NavLink
+        to="/"
+        className={classNames('flex items-center px-3', {
+          'bg-vega-yellow text-vega-clight-50': theme === 'yellow',
+          'text-default': theme === 'system',
+        })}
+      >
+        <VLogo className="w-4" />
+      </NavLink>
+      {/* Left section */}
+      <div className="lg:hidden flex items-center">{children}</div>
+      {/* Used to show header in nav on mobile */}
+      <div className="hidden lg:block">
+        <NavbarMenu onClick={() => setMenu(null)} />
+      </div>
+
+      {/* Right section */}
+      <div className="ml-auto flex justify-end items-center gap-2">
+        <ProtocolUpgradeCountdown />
+        <NavbarMobileButton
+          onClick={() => {
+            if (isConnected) {
+              setMenu((x) => (x === 'wallet' ? null : 'wallet'));
+            } else {
+              openVegaWalletDialog();
+            }
+          }}
+          data-testid="navbar-mobile-wallet"
+        >
+          <span className="sr-only">{t('Wallet')}</span>
+          <WalletIcon className="w-6" />
+        </NavbarMobileButton>
+        <NavbarMobileButton
+          onClick={() => {
+            setMenu((x) => (x === 'nav' ? null : 'nav'));
+          }}
+          data-testid="navbar-mobile-burger"
+        >
+          <span className="sr-only">{t('Menu')}</span>
+          <BurgerIcon />
+        </NavbarMobileButton>
+        <div className="hidden lg:block">
+          <VegaWalletConnectButton />
+        </div>
+      </div>
+      {menu !== null && (
+        <D.Root
+          open={menu !== null}
+          onOpenChange={(open) => setMenu((x) => (open ? x : null))}
+        >
+          <D.Overlay
+            className="lg:hidden fixed inset-0 dark:bg-black/80 bg-black/50 z-20"
+            data-testid="navbar-menu-overlay"
+          />
+          <D.Content
+            className={classNames(
+              'lg:hidden',
+              'fixed top-0 right-0 z-20 w-3/4 h-screen border-l border-default bg-vega-clight-700 dark:bg-vega-cdark-700',
+              navTextClasses
+            )}
+            data-testid="navbar-menu-content"
+          >
+            <div className="flex justify-end items-center h-10 p-1">
+              <NavbarMobileButton onClick={() => setMenu(null)}>
+                <span className="sr-only">{t('Close menu')}</span>
+                <VegaIcon name={VegaIconNames.CROSS} size={24} />
+              </NavbarMobileButton>
+            </div>
+            {menu === 'nav' && <NavbarMenu onClick={() => setMenu(null)} />}
+            {menu === 'wallet' && <VegaWalletMenu setMenu={setMenu} />}
+          </D.Content>
+        </D.Root>
+      )}
+    </N.Root>
+  );
+};
+
+/**
+ * List of links or dropdown triggers to show in the main section
+ * of the navigation
+ */
+const NavbarMenu = ({ onClick }: { onClick: () => void }) => {
+  const { VEGA_ENV, VEGA_NETWORKS, GITHUB_FEEDBACK_URL } = useEnvironment();
   const marketId = useGlobalStore((store) => store.marketId);
 
+  // If we have a stored marketId make Trade link go to that market
+  // otherwise always go to /markets/all
   const tradingPath = marketId
     ? Links[Routes.MARKET](marketId)
-    : Links[Routes.MARKET]();
+    : Links[Routes.MARKET]('');
 
   return (
-    <Navigation
-      appName="console"
-      theme={theme}
-      actions={
-        <>
-          <ProtocolUpgradeCountdown
-            mode={ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING}
-          />
-          <VegaWalletConnectButton />
-        </>
-      }
-      breakpoints={[521, 1122]}
-    >
-      <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"
-        hide={[NavigationBreakpoint.Small]}
-      >
-        <NavigationItem className="[.drawer-content_&]:w-full">
-          <NetworkSwitcher className="[.drawer-content_&]:w-full" />
-        </NavigationItem>
-      </NavigationList>
-      <NavigationList
-        hide={[NavigationBreakpoint.Narrow, NavigationBreakpoint.Small]}
-      >
-        <NavigationItem>
-          <NavigationLink data-testid="Markets" to={Links[Routes.MARKETS]()}>
+    <div className="lg:flex lg:h-full gap-3">
+      <NavbarList>
+        <NavbarItem>
+          <NavbarTrigger data-testid="navbar-network-switcher-trigger">
+            {envNameMapping[VEGA_ENV]}
+          </NavbarTrigger>
+          <NavbarContent data-testid="navbar-content-network-switcher">
+            <ul className="lg:p-4">
+              {[Networks.MAINNET, Networks.TESTNET].map((n) => {
+                const url = VEGA_NETWORKS[n];
+                if (!url) return;
+                return (
+                  <NavbarSubItem key={n}>
+                    <NavbarLink to={url}>{envNameMapping[n]}</NavbarLink>
+                  </NavbarSubItem>
+                );
+              })}
+            </ul>
+          </NavbarContent>
+        </NavbarItem>
+      </NavbarList>
+      <NavbarListDivider />
+      <NavbarList>
+        <NavbarItem>
+          <NavbarLink to={Links[Routes.MARKETS]()} onClick={onClick}>
             {t('Markets')}
-          </NavigationLink>
-        </NavigationItem>
-        <NavigationItem>
-          <NavigationLink data-testid="Trading" to={tradingPath} end>
+          </NavbarLink>
+        </NavbarItem>
+        <NavbarItem>
+          <NavbarLink to={tradingPath} onClick={onClick}>
             {t('Trading')}
-          </NavigationLink>
-        </NavigationItem>
-        <NavigationItem>
-          <NavigationLink
-            data-testid="Portfolio"
-            to={Links[Routes.PORTFOLIO]()}
-          >
+          </NavbarLink>
+        </NavbarItem>
+        <NavbarItem>
+          <NavbarLink to={Links[Routes.PORTFOLIO]()} onClick={onClick}>
             {t('Portfolio')}
-          </NavigationLink>
-        </NavigationItem>
-        <NavigationItem>
-          <NavExternalLink href={tokenLink(TOKEN_GOVERNANCE)}>
-            {t('Governance')}
-          </NavExternalLink>
-        </NavigationItem>
-        {DocsLinks?.NEW_TO_VEGA && GITHUB_FEEDBACK_URL && (
-          <NavigationItem>
-            <NavigationTrigger>{t('Resources')}</NavigationTrigger>
-            <NavigationContent>
-              <NavigationList>
-                <NavigationItem>
-                  <NavExternalLink href={DocsLinks.NEW_TO_VEGA}>
+          </NavbarLink>
+        </NavbarItem>
+        <NavbarItem>
+          <NavbarTrigger>{t('Resources')}</NavbarTrigger>
+          <NavbarContent data-testid="navbar-content-resources">
+            <ul className="lg:p-4">
+              {DocsLinks?.NEW_TO_VEGA && (
+                <NavbarSubItem>
+                  <NavbarLinkExternal to={DocsLinks?.NEW_TO_VEGA}>
                     {t('Docs')}
-                  </NavExternalLink>
-                </NavigationItem>
-                <NavigationItem>
-                  <NavExternalLink href={GITHUB_FEEDBACK_URL}>
+                  </NavbarLinkExternal>
+                </NavbarSubItem>
+              )}
+              {GITHUB_FEEDBACK_URL && (
+                <NavbarSubItem>
+                  <NavbarLinkExternal to={GITHUB_FEEDBACK_URL}>
                     {t('Give Feedback')}
-                  </NavExternalLink>
-                </NavigationItem>
-                <NavigationItem>
-                  <NavigationLink
-                    data-testid="Disclaimer"
-                    to={Links[Routes.DISCLAIMER]()}
-                  >
-                    {t('Disclaimer')}
-                  </NavigationLink>
-                </NavigationItem>
-              </NavigationList>
-            </NavigationContent>
-          </NavigationItem>
-        )}
-      </NavigationList>
-    </Navigation>
+                  </NavbarLinkExternal>
+                </NavbarSubItem>
+              )}
+              <NavbarSubItem>
+                <NavbarLink to={Links[Routes.DISCLAIMER]()} onClick={onClick}>
+                  {t('Disclaimer')}
+                </NavbarLink>
+              </NavbarSubItem>
+            </ul>
+          </NavbarContent>
+        </NavbarItem>
+      </NavbarList>
+    </div>
   );
 };
 
-const NavExternalLink = ({
+/**
+ * Wrapper for radix-ux Trigger for consistent styles
+ */
+const NavbarTrigger = ({
   children,
-  href,
+  ...props
+}: N.NavigationMenuTriggerProps) => {
+  return (
+    <N.Trigger
+      {...props}
+      onPointerMove={preventHover}
+      onPointerLeave={preventHover}
+      className={classNames(
+        'w-full lg:w-auto lg:h-full',
+        'flex items-center justify-between lg:justify-center gap-2 px-6 py-2 lg:p-0',
+        'text-lg lg:text-sm',
+        'hover:text-vega-clight-100 dark:hover:text-vega-cdark-100'
+      )}
+    >
+      {children}
+      <VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={14} />
+    </N.Trigger>
+  );
+};
+
+/**
+ * Wrapper for react-router-dom NavLink for consistent styles
+ */
+const NavbarLink = ({
+  children,
+  to,
+  onClick,
 }: {
   children: ReactNode;
-  href: string;
+  to: string;
+  onClick?: () => void;
 }) => {
   return (
-    <ExternalLink href={href}>
-      <span className="flex items-center gap-2">
-        <span>{children}</span>
-        <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
-      </span>
-    </ExternalLink>
+    <N.Link asChild={true}>
+      <NavLink
+        to={to}
+        className={classNames(
+          'block lg:flex lg:h-full flex-col justify-center',
+          'px-6 py-2 lg:p-0 text-lg lg:text-sm',
+          'hover:text-vega-clight-100 dark:hover:text-vega-cdark-100'
+        )}
+        onClick={onClick}
+      >
+        {({ isActive }) => {
+          const borderClasses = {
+            'border-b-2': true,
+            'border-transparent': !isActive,
+            'border-vega-yellow lg:group-[.navbar-content]:border-transparent':
+              isActive,
+          };
+          return (
+            <>
+              <span
+                className={classNames('lg:border-0', borderClasses, {
+                  'text-vega-clight-50 dark:text-vega-cdark-50': isActive,
+                })}
+              >
+                {children}
+              </span>
+              <span
+                className={classNames(
+                  'hidden lg:block absolute left-0 bottom-0 w-full h-0',
+                  borderClasses
+                )}
+              />
+            </>
+          );
+        }}
+      </NavLink>
+    </N.Link>
   );
 };
+
+const NavbarItem = (props: N.NavigationMenuItemProps) => {
+  return <N.Item {...props} className="relative" />;
+};
+
+const NavbarSubItem = (props: LiHTMLAttributes<HTMLElement>) => {
+  return <li {...props} className="lg:mb-4 lg:last:mb-0" />;
+};
+
+const NavbarList = (props: N.NavigationMenuListProps) => {
+  return <N.List {...props} className="lg:flex lg:h-full gap-6" />;
+};
+
+/**
+ * Content that gets rendered when a sub section of the navbar is shown
+ */
+const NavbarContent = (props: N.NavigationMenuContentProps) => {
+  return (
+    <N.Content
+      {...props}
+      className={classNames(
+        'group navbar-content',
+        'lg:absolute lg:mt-2 pl-2 lg:pl-0 z-20 lg:min-w-[290px]',
+        'lg:bg-vega-clight-700 lg:dark:bg-vega-cdark-700',
+        'lg:border border-vega-clight-500 dark:border-vega-cdark-500 lg:rounded'
+      )}
+      onPointerEnter={preventHover}
+      onPointerLeave={preventHover}
+    />
+  );
+};
+
+/**
+ * NavbarLink with OPEN_EXTERNAL icon
+ */
+const NavbarLinkExternal = ({
+  children,
+  to,
+  onClick,
+}: {
+  children: ReactNode;
+  to: string;
+  onClick?: () => void;
+}) => {
+  return (
+    <N.Link asChild={true}>
+      <NavLink
+        to={to}
+        className={classNames(
+          'flex lg:inline-flex gap-2 justify-between items-center relative',
+          'px-6 py-2 lg:p-0 text-lg lg:text-sm',
+          'hover:text-vega-clight-100 dark:hover:text-vega-cdark-100'
+        )}
+        onClick={onClick}
+        target="_blank"
+      >
+        <span>{children}</span>
+        <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} />
+      </NavLink>
+    </N.Link>
+  );
+};
+
+const BurgerIcon = () => (
+  <svg
+    width="20"
+    height="20"
+    viewBox="0 0 16 16"
+    className="w-full stroke-current"
+  >
+    <line x1={0.5} x2={15.5} y1={3.5} y2={3.5} />
+    <line x1={0.5} x2={15.5} y1={11.5} y2={11.5} />
+  </svg>
+);
+
+const NavbarListDivider = () => {
+  return (
+    <div className="py-2 px-6 lg:px-0" role="separator">
+      <div className="h-px lg:h-full w-full lg:w-px bg-vega-clight-500 dark:bg-vega-cdark-500" />
+    </div>
+  );
+};
+
+/**
+ * Button component to avoid repeating styles for buttons shown on small screens
+ */
+const NavbarMobileButton = (props: ButtonHTMLAttributes<HTMLButtonElement>) => {
+  return (
+    <button
+      {...props}
+      className={classNames(
+        'w-8 h-8 lg:hidden flex items-center p-1 rounded ',
+        'hover:bg-vega-clight-500 dark:hover:bg-vega-cdark-500',
+        'hover:text-vega-clight-50 dark:hover:text-vega-cdark-50'
+      )}
+    />
+  );
+};
+
+const envNameMapping: Record<Networks, string> = {
+  [Networks.VALIDATOR_TESTNET]: t('VALIDATOR_TESTNET'),
+  [Networks.CUSTOM]: t('Custom'),
+  [Networks.DEVNET]: t('Devnet'),
+  [Networks.STAGNET1]: t('Stagnet'),
+  [Networks.TESTNET]: t('Fairground testnet'),
+  [Networks.MAINNET_MIRROR]: t('Mirror'),
+  [Networks.MAINNET]: t('Mainnet'),
+};
+
+// https://github.com/radix-ui/primitives/issues/1630
+// eslint-disable-next-line
+const preventHover = (e: any) => {
+  e.preventDefault();
+};

apps/trading/components/sidebar/sidebar.tsx

@@ -51,9 +51,10 @@ type SidebarView =
     };
 
 export const Sidebar = () => {
+  const navClasses = 'flex lg:flex-col items-center gap-2 lg:gap-4 p-1';
   return (
-    <div className="flex flex-col gap-2 h-full py-1" data-testid="sidebar">
-      <nav className="flex flex-col items-center gap-4 p-1">
+    <div className="flex lg:flex-col gap-2 h-full p-1" data-testid="sidebar">
+      <nav className={navClasses}>
         {/* sidebar options that always show */}
         <SidebarButton
           view={ViewType.Deposit}
@@ -102,7 +103,7 @@ export const Sidebar = () => {
           />
         </Routes>
       </nav>
-      <nav className="mt-auto flex flex-col items-center gap-4 p-1">
+      <nav className={classNames(navClasses, 'ml-auto lg:mt-auto lg:ml-0')}>
         <SidebarButton
           view={ViewType.Settings}
           icon={VegaIconNames.COG}
@@ -161,7 +162,7 @@ const SidebarButton = ({
 const SidebarDivider = () => {
   return (
     <div
-      className="bg-vega-clight-600 dark:bg-vega-cdark-600 w-4 h-px"
+      className="bg-vega-clight-600 dark:bg-vega-cdark-600 w-px h-4 lg:w-4 lg:h-px"
       role="separator"
     />
   );

apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.spec.tsx

@@ -28,7 +28,7 @@ describe('VegaWalletConnectButton', () => {
     render(generateJsx({ pubKey: null } as VegaWalletContextShape));
 
     const button = screen.getByTestId('connect-vega-wallet');
-    expect(button).toHaveTextContent('Connect Vega wallet');
+    expect(button).toHaveTextContent('Connect');
     fireEvent.click(button);
     expect(mockUpdateDialogOpen).toHaveBeenCalled();
   });

apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx

@@ -1,148 +1,26 @@
-import { useCallback, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import classNames from 'classnames';
 import { truncateByChars } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import {
-  Button,
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuItemIndicator,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuTrigger,
-  Drawer,
-  DropdownMenuSeparator,
   VegaIcon,
   VegaIconNames,
+  TradingButton as Button,
+  Intent,
+  TradingDropdown,
+  TradingDropdownTrigger,
+  TradingDropdownContent,
+  TradingDropdownRadioGroup,
+  TradingDropdownSeparator,
+  TradingDropdownItem,
+  TradingDropdownRadioItem,
+  TradingDropdownItemIndicator,
 } from '@vegaprotocol/ui-toolkit';
 import type { PubKey } from '@vegaprotocol/wallet';
 import { useVegaWallet, useVegaWalletDialogStore } from '@vegaprotocol/wallet';
-import { Networks, useEnvironment } from '@vegaprotocol/environment';
-import { WalletIcon } from '../icons/wallet';
 import { useCopyTimeout } from '@vegaprotocol/react-helpers';
 import { ViewType, useSidebar } from '../sidebar';
-
-const MobileWalletButton = ({
-  isConnected,
-  activeKey,
-}: {
-  isConnected?: boolean;
-  activeKey?: PubKey;
-}) => {
-  const { pubKeys, selectPubKey, disconnect, fetchPubKeys } = useVegaWallet();
-  const openVegaWalletDialog = useVegaWalletDialogStore(
-    (store) => store.openVegaWalletDialog
-  );
-  const setView = useSidebar((store) => store.setView);
-  const { VEGA_ENV } = useEnvironment();
-  const isYellow = VEGA_ENV === Networks.TESTNET;
-  const [drawerOpen, setDrawerOpen] = useState(false);
-  const mobileDisconnect = useCallback(() => {
-    setDrawerOpen(false);
-    disconnect();
-  }, [disconnect]);
-  const openDrawer = useCallback(() => {
-    if (!isConnected) {
-      openVegaWalletDialog();
-      setDrawerOpen(false);
-    } else {
-      if (fetchPubKeys) {
-        fetchPubKeys();
-      }
-      setDrawerOpen(!drawerOpen);
-    }
-  }, [drawerOpen, fetchPubKeys, isConnected, openVegaWalletDialog]);
-
-  const iconClass = drawerOpen
-    ? 'hidden'
-    : isYellow
-    ? 'fill-black'
-    : 'fill-white';
-  const [container, setContainer] = useState<HTMLElement | null>(null);
-
-  const walletButton = (
-    <button
-      className="my-2 transition-all flex flex-col justify-around gap-3 p-2 relative h-[34px]"
-      onClick={openDrawer}
-      data-testid="connect-vega-wallet-mobile"
-    >
-      <WalletIcon className={iconClass} />
-    </button>
-  );
-  const onSelectItem = useCallback(
-    (pubkey: string) => {
-      setDrawerOpen(false);
-      selectPubKey(pubkey);
-    },
-    [selectPubKey]
-  );
-  return (
-    <div className="lg:hidden overflow-hidden flex" ref={setContainer}>
-      <Drawer
-        dataTestId="wallets-drawer"
-        open={drawerOpen}
-        onChange={setDrawerOpen}
-        container={container}
-        trigger={walletButton}
-      >
-        <div className="border-l border-default p-2 gap-4 flex flex-col w-full h-full bg-white dark:bg-black dark:text-white justify-between">
-          <div className="flex h-5 justify-end">
-            <button
-              className="transition-all flex flex-col justify-around gap-3 p-2 relative h-[34px]"
-              onClick={() => setDrawerOpen(false)}
-              data-testid="connect-vega-wallet-mobile-close"
-            >
-              <>
-                <div
-                  className={classNames(
-                    'w-[26px] h-[2px] bg-black dark:bg-white transition-all translate-y-[7.5px] rotate-45',
-                    {
-                      hidden: !drawerOpen,
-                    }
-                  )}
-                />
-                <div
-                  className={classNames(
-                    'w-[26px] h-[2px] bg-black dark:bg-white transition-all -translate-y-[7.5px] -rotate-45',
-                    {
-                      hidden: !drawerOpen,
-                    }
-                  )}
-                />
-              </>
-            </button>
-          </div>
-          <div className="grow my-4" role="list">
-            {(pubKeys || []).map((pk) => (
-              <KeypairListItem
-                key={pk.publicKey}
-                pk={pk}
-                isActive={activeKey?.publicKey === pk.publicKey}
-                onSelectItem={onSelectItem}
-              />
-            ))}
-          </div>
-          <div className="flex flex-col gap-2 m-4">
-            <Button
-              onClick={() => {
-                setDrawerOpen(false);
-                setView({ type: ViewType.Transfer });
-              }}
-              fill
-            >
-              {t('Transfer')}
-            </Button>
-            <Button onClick={mobileDisconnect} fill>
-              {t('Disconnect')}
-            </Button>
-          </div>
-        </div>
-      </Drawer>
-    </div>
-  );
-};
+import classNames from 'classnames';
 
 export const VegaWalletConnectButton = () => {
   const [dropdownOpen, setDropdownOpen] = useState(false);
@@ -166,96 +44,101 @@ export const VegaWalletConnectButton = () => {
 
   if (isConnected && pubKeys) {
     return (
-      <>
-        <div className="hidden lg:block">
-          <DropdownMenu
-            open={dropdownOpen}
-            trigger={
-              <DropdownMenuTrigger
-                data-testid="manage-vega-wallet"
+      <TradingDropdown
+        open={dropdownOpen}
+        trigger={
+          <TradingDropdownTrigger
+            data-testid="manage-vega-wallet"
+            onClick={() => {
+              if (fetchPubKeys) {
+                fetchPubKeys();
+              }
+              setDropdownOpen(!dropdownOpen);
+            }}
+          >
+            <Button
+              size="small"
+              icon={<VegaIcon name={VegaIconNames.CHEVRON_DOWN} size={14} />}
+            >
+              {activeKey && <span className="uppercase">{activeKey.name}</span>}
+              {' | '}
+              {truncateByChars(pubKey)}
+            </Button>
+          </TradingDropdownTrigger>
+        }
+      >
+        <TradingDropdownContent
+          onInteractOutside={() => setDropdownOpen(false)}
+          sideOffset={12}
+          side="bottom"
+          align="end"
+          onEscapeKeyDown={() => setDropdownOpen(false)}
+        >
+          <div className="min-w-[340px]" data-testid="keypair-list">
+            <TradingDropdownRadioGroup
+              value={pubKey}
+              onValueChange={(value) => {
+                selectPubKey(value);
+              }}
+            >
+              {pubKeys.map((pk) => (
+                <KeypairItem
+                  key={pk.publicKey}
+                  pk={pk}
+                  active={pk.publicKey === pubKey}
+                />
+              ))}
+            </TradingDropdownRadioGroup>
+            <TradingDropdownSeparator />
+            {!isReadOnly && (
+              <TradingDropdownItem
+                data-testid="wallet-transfer"
                 onClick={() => {
-                  if (fetchPubKeys) {
-                    fetchPubKeys();
-                  }
-                  setDropdownOpen(!dropdownOpen);
+                  setView({ type: ViewType.Transfer });
+                  setDropdownOpen(false);
                 }}
               >
-                {activeKey && (
-                  <span className="uppercase">{activeKey.name}</span>
-                )}
-                {': '}
-                {truncateByChars(pubKey)}
-              </DropdownMenuTrigger>
-            }
-          >
-            <DropdownMenuContent
-              onInteractOutside={() => setDropdownOpen(false)}
-              sideOffset={17}
-              side="bottom"
-              align="end"
-              onEscapeKeyDown={() => setDropdownOpen(false)}
-            >
-              <div className="min-w-[340px]" data-testid="keypair-list">
-                <DropdownMenuRadioGroup
-                  value={pubKey}
-                  onValueChange={(value) => {
-                    selectPubKey(value);
-                  }}
-                >
-                  {pubKeys.map((pk) => (
-                    <KeypairItem key={pk.publicKey} pk={pk} />
-                  ))}
-                </DropdownMenuRadioGroup>
-                <DropdownMenuSeparator />
-                {!isReadOnly && (
-                  <DropdownMenuItem
-                    data-testid="wallet-transfer"
-                    onClick={() => {
-                      setView({ type: ViewType.Transfer });
-                      setDropdownOpen(false);
-                    }}
-                  >
-                    {t('Transfer')}
-                  </DropdownMenuItem>
-                )}
-                <DropdownMenuItem data-testid="disconnect" onClick={disconnect}>
-                  {t('Disconnect')}
-                </DropdownMenuItem>
-              </div>
-            </DropdownMenuContent>
-          </DropdownMenu>
-        </div>
-        <MobileWalletButton isConnected activeKey={activeKey} />
-      </>
+                {t('Transfer')}
+              </TradingDropdownItem>
+            )}
+            <TradingDropdownItem data-testid="disconnect" onClick={disconnect}>
+              {t('Disconnect')}
+            </TradingDropdownItem>
+          </div>
+        </TradingDropdownContent>
+      </TradingDropdown>
     );
   }
 
   return (
-    <>
-      <Button
-        data-testid="connect-vega-wallet"
-        onClick={openVegaWalletDialog}
-        size="sm"
-        className="hidden lg:block"
-      >
-        <span className="whitespace-nowrap">{t('Connect Vega wallet')}</span>
-      </Button>
-      <MobileWalletButton />
-    </>
+    <Button
+      data-testid="connect-vega-wallet"
+      onClick={openVegaWalletDialog}
+      size="small"
+      intent={Intent.None}
+      icon={<VegaIcon name={VegaIconNames.ARROW_RIGHT} size={14} />}
+    >
+      <span className="whitespace-nowrap uppercase">{t('Connect')}</span>
+    </Button>
   );
 };
 
-const KeypairItem = ({ pk }: { pk: PubKey }) => {
+const KeypairItem = ({ pk, active }: { pk: PubKey; active: boolean }) => {
   const [copied, setCopied] = useCopyTimeout();
 
   return (
-    <DropdownMenuRadioItem value={pk.publicKey}>
-      <div className="flex-1 mr-2" data-testid={`key-${pk.publicKey}`}>
-        <span className="mr-2">
-          <span>
-            <span className="uppercase">{pk.name}</span>:{' '}
-            {truncateByChars(pk.publicKey)}
-          </span>
+    <TradingDropdownRadioItem value={pk.publicKey}>
+      <div
+        className={classNames('flex-1 mr-2', {
+          'text-default': active,
+          'text-muted': !active,
+        })}
+        data-testid={`key-${pk.publicKey}`}
+      >
+        <span className={classNames('mr-2 uppercase')}>
+          {pk.name}
+          {' | '}
+          {truncateByChars(pk.publicKey)}
         </span>
         <span className="inline-flex items-center gap-1">
           <CopyToClipboard text={pk.publicKey} onCopy={() => setCopied(true)}>
@@ -270,46 +153,7 @@ const KeypairItem = ({ pk }: { pk: PubKey }) => {
           {copied && <span className="text-xs">{t('Copied')}</span>}
         </span>
       </div>
-      <DropdownMenuItemIndicator />
-    </DropdownMenuRadioItem>
-  );
-};
-
-const KeypairListItem = ({
-  pk,
-  isActive,
-  onSelectItem,
-}: {
-  pk: PubKey;
-  isActive: boolean;
-  onSelectItem: (pk: string) => void;
-}) => {
-  const [copied, setCopied] = useCopyTimeout();
-
-  return (
-    <div
-      className="flex flex-col w-full ml-4 mr-2 mb-4"
-      data-testid={`key-${pk.publicKey}-mobile`}
-    >
-      <span className="flex gap-2 items-center mr-2">
-        <button onClick={() => onSelectItem(pk.publicKey)}>
-          <span className="uppercase">{pk.name}</span>
-        </button>
-        {isActive && <VegaIcon name={VegaIconNames.TICK} />}
-      </span>
-      <span className="flex gap-2 items-center">
-        {truncateByChars(pk.publicKey)}{' '}
-        <CopyToClipboard text={pk.publicKey} onCopy={() => setCopied(true)}>
-          <button
-            data-testid="copy-vega-public-key"
-            onClick={(e) => e.stopPropagation()}
-          >
-            <span className="sr-only">{t('Copy')}</span>
-            <VegaIcon name={VegaIconNames.COPY} />
-          </button>
-        </CopyToClipboard>
-        {copied && <span className="text-xs">{t('Copied')}</span>}
-      </span>
-    </div>
+      <TradingDropdownItemIndicator />
+    </TradingDropdownRadioItem>
   );
 };

apps/trading/components/vega-wallet/index.ts

@@ -0,0 +1 @@
+export { VegaWalletMenu } from './vega-wallet-menu';

apps/trading/components/vega-wallet/vega-wallet-menu.tsx

@@ -0,0 +1,106 @@
+import { t } from '@vegaprotocol/i18n';
+import { useCopyTimeout } from '@vegaprotocol/react-helpers';
+import {
+  TradingButton as Button,
+  VegaIcon,
+  VegaIconNames,
+} from '@vegaprotocol/ui-toolkit';
+import { truncateByChars } from '@vegaprotocol/utils';
+import { useVegaWallet, type PubKey } from '@vegaprotocol/wallet';
+import { useCallback, useMemo } from 'react';
+import CopyToClipboard from 'react-copy-to-clipboard';
+import { ViewType, useSidebar } from '../sidebar';
+
+export const VegaWalletMenu = ({
+  setMenu,
+}: {
+  setMenu: (open: 'nav' | 'wallet' | null) => void;
+}) => {
+  const { pubKey, pubKeys, selectPubKey, disconnect } = useVegaWallet();
+  const setView = useSidebar((store) => store.setView);
+
+  const activeKey = useMemo(() => {
+    return pubKeys?.find((pk) => pk.publicKey === pubKey);
+  }, [pubKey, pubKeys]);
+
+  const onSelectItem = useCallback(
+    (pubkey: string) => {
+      selectPubKey(pubkey);
+    },
+    [selectPubKey]
+  );
+
+  return (
+    <div>
+      <div className="grow my-4" role="list">
+        {(pubKeys || []).map((pk) => (
+          <KeypairListItem
+            key={pk.publicKey}
+            pk={pk}
+            isActive={activeKey?.publicKey === pk.publicKey}
+            onSelectItem={onSelectItem}
+          />
+        ))}
+      </div>
+
+      <div className="flex flex-col gap-2 m-4">
+        <Button
+          onClick={() => {
+            setView({ type: ViewType.Transfer });
+            setMenu(null);
+          }}
+        >
+          {t('Transfer')}
+        </Button>
+        <Button
+          onClick={async () => {
+            await disconnect();
+            setMenu(null);
+          }}
+        >
+          {t('Disconnect')}
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+const KeypairListItem = ({
+  pk,
+  isActive,
+  onSelectItem,
+}: {
+  pk: PubKey;
+  isActive: boolean;
+  onSelectItem: (pk: string) => void;
+}) => {
+  const [copied, setCopied] = useCopyTimeout();
+
+  return (
+    <div
+      className="flex flex-col w-full ml-4 mr-2 mb-4"
+      data-testid={`key-${pk.publicKey}-mobile`}
+    >
+      <span className="flex gap-2 items-center mr-2">
+        <button type="button" onClick={() => onSelectItem(pk.publicKey)}>
+          <span className="uppercase">{pk.name}</span>
+        </button>
+        {isActive && <VegaIcon name={VegaIconNames.TICK} />}
+      </span>
+      <span className="flex gap-2 items-center">
+        {truncateByChars(pk.publicKey)}{' '}
+        <CopyToClipboard text={pk.publicKey} onCopy={() => setCopied(true)}>
+          <button
+            type="button"
+            data-testid="copy-vega-public-key"
+            onClick={(e) => e.stopPropagation()}
+          >
+            <span className="sr-only">{t('Copy')}</span>
+            <VegaIcon name={VegaIconNames.COPY} />
+          </button>
+        </CopyToClipboard>
+        {copied && <span className="text-xs">{t('Copied')}</span>}
+      </span>
+    </div>
+  );
+};

apps/trading/pages/_app.page.tsx

@@ -16,6 +16,7 @@ import {
 } from '@vegaprotocol/web3';
 import {
   envTriggerMapping,
+  Networks,
   NodeSwitcherDialog,
   useEnvironment,
   useInitializeEnv,
@@ -25,7 +26,13 @@ import './styles.css';
 import { usePageTitleStore } from '../stores';
 import DialogsContainer from './dialogs-container';
 import ToastsManager from './toasts-manager';
-import { HashRouter, useLocation, useSearchParams } from 'react-router-dom';
+import {
+  HashRouter,
+  useLocation,
+  Route,
+  Routes,
+  useSearchParams,
+} from 'react-router-dom';
 import { Connectors } from '../lib/vega-connectors';
 import { AppLoader, DynamicLoader } from '../components/app-loader';
 import { useDataProvider } from '@vegaprotocol/data-provider';
@@ -39,6 +46,8 @@ import {
   ProtocolUpgradeProposalNotification,
 } from '@vegaprotocol/proposals';
 import { ViewingBanner } from '../components/viewing-banner';
+import { NavHeader } from '../components/navbar/nav-header';
+import { Routes as AppRoutes } from './client-router';
 
 const DEFAULT_TITLE = t('Welcome to Vega trading!');
 
@@ -74,6 +83,7 @@ const InitializeHandlers = () => {
 
 function AppBody({ Component }: AppProps) {
   const location = useLocation();
+  const { VEGA_ENV } = useEnvironment();
   const gridClasses = classNames(
     'h-full relative z-0 grid',
     'grid-rows-[repeat(3,min-content),minmax(0,1fr)]'
@@ -87,7 +97,16 @@ function AppBody({ Component }: AppProps) {
       <Title />
       <div className={gridClasses}>
         <AnnouncementBanner />
-        <Navbar theme="system" />
+        <Navbar theme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'system'}>
+          <Routes>
+            <Route
+              path={AppRoutes.MARKETS}
+              // render nothing for markets/all, otherwise markets/:marketId will match with markets/all
+              element={null}
+            />
+            <Route path={AppRoutes.MARKET} element={<NavHeader />} />
+          </Routes>
+        </Navbar>
         <div data-testid="banners">
           <ProtocolUpgradeProposalNotification
             mode={ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING}

libs/candles-chart/src/lib/data-source.ts

@@ -110,25 +110,22 @@ export class VegaDataSource implements DataSource {
         this._decimalPlaces = data.market.decimalPlaces;
         this._positionDecimalPlaces = data.market.positionDecimalPlaces;
 
-        let priceMonitoringBounds: PriceMonitoringBounds | undefined;
+        let priceMonitoringBounds: PriceMonitoringBounds[] | undefined;
 
-        if (
-          data.market.data.priceMonitoringBounds &&
-          data.market.data.priceMonitoringBounds.length > 0
-        ) {
-          const bounds = data.market.data.priceMonitoringBounds[0];
-
-          priceMonitoringBounds = {
-            maxValidPrice: Number(
-              addDecimal(bounds.maxValidPrice, this._decimalPlaces)
-            ),
-            minValidPrice: Number(
-              addDecimal(bounds.minValidPrice, this._decimalPlaces)
-            ),
-            referencePrice: Number(
-              addDecimal(bounds.referencePrice, this._decimalPlaces)
-            ),
-          };
+        if (data.market.data.priceMonitoringBounds) {
+          priceMonitoringBounds = data.market.data.priceMonitoringBounds.map(
+            (bounds) => ({
+              maxValidPrice: Number(
+                addDecimal(bounds.maxValidPrice, this._decimalPlaces)
+              ),
+              minValidPrice: Number(
+                addDecimal(bounds.minValidPrice, this._decimalPlaces)
+              ),
+              referencePrice: Number(
+                addDecimal(bounds.referencePrice, this._decimalPlaces)
+              ),
+            })
+          );
         }
 
         return {

libs/cypress/src/lib/capsule/logging.ts

@@ -1,5 +1,6 @@
 export function createLog(name: string) {
   return (message: string) => {
+    // eslint-disable-next-line no-console
     console.log(`[${name}]: ${message}`);
   };
 }

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

@@ -160,7 +160,7 @@ export function waitForProposal(id: string): Promise<{ id: string }> {
           resolve(res.proposal);
         }
       } catch (err) {
-        console.log(err);
+        console.error(err);
       }
 
       tick++;

libs/cypress/src/lib/commands/import-node-wallets.ts

@@ -15,6 +15,7 @@ export const addImportNodeWallets = () => {
       .its('stdout')
       .then((result) => {
         const obj = JSON.parse(result);
+        // eslint-disable-next-line no-console
         console.log(obj);
         cy.writeFile(
           './src/fixtures/wallet/node0RecoveryPhrase',

libs/cypress/src/lib/commands/validators-self-delegate.ts

@@ -30,6 +30,7 @@ export const addValidatorsSelfDelegate = () => {
           .its('stdout')
           .then((result) => {
             const obj = JSON.parse(result);
+            // eslint-disable-next-line no-console
             console.log(obj);
             cy.writeFile(
               './src/fixtures/wallet/node0RecoveryPhrase',

libs/cypress/src/lib/commands/vega-wallet-top-up-rewards-pool.ts

@@ -30,8 +30,10 @@ export function addVegaWalletTopUpRewardsPool() {
             transferStartEpoch = Number(epochText.replace('Epoch', '')) + 5;
             transferEndEpoch = transferStartEpoch + 100;
 
+            /* eslint-disable no-console */
             console.log(transferStartEpoch);
             console.log(transferEndEpoch);
+            /* eslint-enable */
           });
       })
       .then(() => {

libs/cypress/src/lib/eip1193-bridge.ts

@@ -9,12 +9,14 @@ export class CustomizedBridge extends Eip1193Bridge {
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   async sendAsync(...args: any) {
+    // eslint-disable-next-line no-console
     console.debug('sendAsync called', ...args);
     return this.send(...args);
   }
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   override async send(...args: any) {
+    // eslint-disable-next-line no-console
     console.debug('send called', ...args);
     const isCallbackForm =
       typeof args[0] === 'object' && typeof args[1] === 'function';
@@ -89,6 +91,7 @@ export class CustomizedBridge extends Eip1193Bridge {
         // All other transactions the base class works for
         result = await super.send(method, params);
       }
+      // eslint-disable-next-line no-console
       console.debug('result received', method, params, result);
       if (isCallbackForm) {
         callback(null, { result });
@@ -96,6 +99,7 @@ export class CustomizedBridge extends Eip1193Bridge {
         return result;
       }
     } catch (error) {
+      // eslint-disable-next-line no-console
       console.log(error);
       if (isCallbackForm) {
         callback(error, null);

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

@@ -1,13 +1,23 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 import { VegaWalletContext } from '@vegaprotocol/wallet';
-import { act, render, renderHook, screen } from '@testing-library/react';
+import {
+  act,
+  render,
+  renderHook,
+  screen,
+  waitFor,
+} from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { generateMarket, generateMarketData } from '../../test-helpers';
 import { DealTicket } from './deal-ticket';
 import * as Schema from '@vegaprotocol/types';
+import type { MockedResponse } from '@apollo/client/testing';
 import { MockedProvider } from '@apollo/client/testing';
 import { addDecimal } from '@vegaprotocol/utils';
+import type { OrdersQuery } from '@vegaprotocol/orders';
 import { useCreateOrderStore } from '@vegaprotocol/orders';
+import * as positionsTools from '@vegaprotocol/positions';
+import { OrdersDocument } from '@vegaprotocol/orders';
 
 jest.mock('zustand');
 jest.mock('./deal-ticket-fee-details', () => ({
@@ -19,9 +29,9 @@ const market = generateMarket();
 const marketData = generateMarketData();
 const submit = jest.fn();
 
-function generateJsx() {
+function generateJsx(mocks: MockedResponse[] = []) {
   return (
-    <MockedProvider>
+    <MockedProvider mocks={[...mocks]}>
       <VegaWalletContext.Provider value={{ pubKey, isReadOnly: false } as any}>
         <DealTicket
           market={market}
@@ -39,12 +49,68 @@ describe('DealTicket', () => {
   const useOrderStore = result.current;
 
   beforeEach(() => {
+    jest.clearAllMocks();
     localStorage.clear();
   });
 
-  afterEach(() => {
-    localStorage.clear();
-    jest.clearAllMocks();
+  it('check filtering of active orders', async () => {
+    const mockOrders: OrdersQuery = {
+      party: {
+        id: 'pubKey',
+        ordersConnection: {
+          edges: [
+            {
+              node: {
+                id: 'order-id-1',
+                remaining: '101010',
+                market: {
+                  id: 'market-id',
+                },
+              },
+            },
+            {
+              node: {
+                id: 'order-id-2',
+                remaining: '1111',
+                market: {
+                  id: 'other-market-id',
+                },
+              },
+            },
+          ],
+        },
+      },
+    } as unknown as OrdersQuery;
+    const orderMocks = {
+      request: {
+        query: OrdersDocument,
+        variables: {
+          partyId: 'pubKey',
+          filter: { liveOnly: true },
+          pagination: { first: 5000 },
+        },
+      },
+      result: {
+        data: mockOrders,
+      },
+    };
+    jest.spyOn(positionsTools, 'useEstimatePositionQuery');
+    render(generateJsx([orderMocks]));
+    await waitFor(() => {
+      expect(screen.getByTestId('deal-ticket-fee-details')).toBeInTheDocument();
+      expect(
+        (positionsTools.useEstimatePositionQuery as jest.Mock).mock.lastCall[0]
+          .variables.orders
+      ).toHaveLength(2);
+      expect(
+        (positionsTools.useEstimatePositionQuery as jest.Mock).mock.lastCall[0]
+          .variables.orders[0].remaining
+      ).toEqual('101010');
+      expect(
+        (positionsTools.useEstimatePositionQuery as jest.Mock).mock.lastCall[0]
+          .variables.orders[1].remaining
+      ).toEqual('0');
+    });
   });
 
   it('should display ticket defaults', () => {

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

@@ -142,7 +142,7 @@ export const DealTicket = ({
   );
   const { data: activeOrders } = useDataProvider({
     dataProvider: activeOrdersProvider,
-    variables: { partyId: pubKey || '' },
+    variables: { partyId: pubKey || '', marketId: market.id },
     skip: !pubKey,
   });
   const openVolume = useOpenVolume(pubKey, market.id) ?? '0';

libs/fills/src/lib/fill-actions-dropdown.tsx

@@ -1,6 +1,6 @@
 import {
   ActionsDropdown,
-  DropdownMenuCopyItem,
+  TradingDropdownCopyItem,
 } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
 
@@ -14,10 +14,13 @@ export const FillActionsDropdown = ({
   sellOrderId: string;
 }) => {
   return (
-    <ActionsDropdown data-testid="market-actions-content">
-      <DropdownMenuCopyItem value={tradeId} text={t('Copy trade ID')} />
-      <DropdownMenuCopyItem value={buyOrderId} text={t('Copy buy order ID')} />
-      <DropdownMenuCopyItem
+    <ActionsDropdown data-testid="fill-actions-content">
+      <TradingDropdownCopyItem value={tradeId} text={t('Copy trade ID')} />
+      <TradingDropdownCopyItem
+        value={buyOrderId}
+        text={t('Copy buy order ID')}
+      />
+      <TradingDropdownCopyItem
         value={sellOrderId}
         text={t('Copy sell order ID')}
       />

libs/logger/src/lib/local-logger.spec.ts

@@ -48,6 +48,7 @@ describe('LocalLogger', () => {
       const consoleMethod = methodToConsoleMethod[i];
       jest.spyOn(console, consoleMethod).mockImplementation();
       logger[method]('test', 'test2');
+      // eslint-disable-next-line no-console
       expect(console[consoleMethod]).toHaveBeenCalledWith(
         `trading:${methodToLevel[i]}: `,
         'test',
@@ -100,10 +101,14 @@ describe('LocalLogger', () => {
     const logger = localLoggerFactory({ logLevel: 'info' });
     jest.spyOn(console, 'debug').mockImplementation();
     logger.debug('test', 'test1');
+
+    // eslint-disable-next-line no-console
     expect(console.debug).not.toHaveBeenCalled();
 
     logger.setLogLevel('debug');
     logger.debug('test', 'test1');
+
+    // eslint-disable-next-line no-console
     expect(console.debug).toHaveBeenCalledWith(
       'trading:debug: ',
       'test',

libs/logger/src/lib/local-logger.ts

@@ -99,6 +99,7 @@ export class LocalLogger {
       this.numberLogLevel <= LocalLogger.levelLogMap[level] // &&
       //!global.__LOGGER_SILENT_MODE__
     ) {
+      // eslint-disable-next-line no-console
       console[logMethod].apply(console, [
         `${this._application}:${level}: `,
         ...args,

libs/markets/src/lib/SuccessorMarket.graphql

@@ -16,6 +16,7 @@ query SuccessorMarketIds {
       node {
         id
         successorMarketID
+        parentMarketID
       }
     }
   }

libs/markets/src/lib/__generated__/SuccessorMarket.ts

@@ -20,7 +20,7 @@ export type ParentMarketIdQuery = { __typename?: 'Query', market?: { __typename?
 export type SuccessorMarketIdsQueryVariables = Types.Exact<{ [key: string]: never; }>;
 
 
-export type SuccessorMarketIdsQuery = { __typename?: 'Query', marketsConnection?: { __typename?: 'MarketConnection', edges: Array<{ __typename?: 'MarketEdge', node: { __typename?: 'Market', id: string, successorMarketID?: string | null } }> } | null };
+export type SuccessorMarketIdsQuery = { __typename?: 'Query', marketsConnection?: { __typename?: 'MarketConnection', edges: Array<{ __typename?: 'MarketEdge', node: { __typename?: 'Market', id: string, successorMarketID?: string | null, parentMarketID?: string | null } }> } | null };
 
 export type SuccessorMarketQueryVariables = Types.Exact<{
   marketId: Types.Scalars['ID'];
@@ -107,6 +107,7 @@ export const SuccessorMarketIdsDocument = gql`
       node {
         id
         successorMarketID
+        parentMarketID
       }
     }
   }
@@ -182,4 +183,4 @@ export function useSuccessorMarketLazyQuery(baseOptions?: Apollo.LazyQueryHookOp
         }
 export type SuccessorMarketQueryHookResult = ReturnType<typeof useSuccessorMarketQuery>;
 export type SuccessorMarketLazyQueryHookResult = ReturnType<typeof useSuccessorMarketLazyQuery>;
-export type SuccessorMarketQueryResult = Apollo.QueryResult<SuccessorMarketQuery, SuccessorMarketQueryVariables>;
+export type SuccessorMarketQueryResult = Apollo.QueryResult<SuccessorMarketQuery, SuccessorMarketQueryVariables>;

libs/markets/src/lib/components/market-info/market-info-panels.tsx

@@ -30,6 +30,7 @@ import { useOracleProofs } from '../../hooks';
 import { OracleDialog } from '../oracle-dialog/oracle-dialog';
 import { useDataProvider } from '@vegaprotocol/data-provider';
 import { useParentMarketIdQuery } from '../../__generated__';
+import { useSuccessorMarketProposalDetailsQuery } from '@vegaprotocol/proposals';
 
 type MarketInfoProps = {
   market: MarketInfo;
@@ -144,6 +145,14 @@ export const KeyDetailsInfoPanel = ({ market }: MarketInfoProps) => {
     },
     skip: !FLAGS.SUCCESSOR_MARKETS,
   });
+
+  const { data: successor } = useSuccessorMarketProposalDetailsQuery({
+    variables: {
+      proposalId: market.proposal?.id || '',
+    },
+    skip: !FLAGS.SUCCESSOR_MARKETS || !market.proposal?.id,
+  });
+
   const assetDecimals =
     market.tradableInstrument.instrument.product.settlementAsset.decimals;
 
@@ -155,6 +164,11 @@ export const KeyDetailsInfoPanel = ({ market }: MarketInfoProps) => {
               name: market.tradableInstrument.instrument.name,
               marketID: market.id,
               parentMarketID: parentData?.market?.parentMarketID || '-',
+              insurancePoolFraction:
+                (successor?.proposal?.terms.change.__typename === 'NewMarket' &&
+                  successor.proposal.terms.change.successorConfiguration
+                    ?.insurancePoolFraction) ||
+                '-',
               tradingMode:
                 market.tradingMode &&
                 MarketTradingModeMapping[market.tradingMode],

libs/markets/src/lib/components/market-info/tooltip-mapping.tsx

@@ -102,5 +102,8 @@ export const tooltipMapping: Record<string, ReactNode> = {
     `The market's liquidity requirement which is derived from the maximum open interest observed over a rolling time window.`
   ),
   suppliedStake: t('The current amount of liquidity supplied for this market.'),
-  parentMarketID: t('The ID of the market this market succeeds'),
+  parentMarketID: t('The ID of the market this market succeeds.'),
+  insurancePoolFraction: t(
+    'The fraction of the insurance pool balance that is carried over from the parent market to the successor.'
+  ),
 };

libs/markets/src/lib/components/markets-container/market-list-table.tsx

@@ -1,4 +1,4 @@
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import type { TypedDataAgGrid } from '@vegaprotocol/datagrid';
 import {
   AgGridLazy as AgGrid,
@@ -48,10 +48,15 @@ export const MarketListTable = forwardRef<
   AgGridReact,
   TypedDataAgGrid<MarketMaybeWithData> & {
     onMarketClick: (marketId: string, metaKey?: boolean) => void;
+    SuccessorMarketRenderer?: React.FC<{ value: string }>;
   }
->(({ onMarketClick, ...props }, ref) => {
+>(({ onMarketClick, SuccessorMarketRenderer, ...props }, ref) => {
   const columnDefs = useColumnDefs({ onMarketClick });
-
+  const components = {
+    PriceFlashCell,
+    MarketName,
+    ...(SuccessorMarketRenderer ? { SuccessorMarketRenderer } : null),
+  };
   return (
     <AgGrid
       style={{ width: '100%', height: '100%' }}
@@ -60,7 +65,7 @@ export const MarketListTable = forwardRef<
       defaultColDef={defaultColDef}
       columnDefs={columnDefs}
       suppressCellFocus
-      components={{ PriceFlashCell, MarketName }}
+      components={components}
       {...props}
     />
   );

libs/markets/src/lib/components/markets-container/market-table-actions.tsx

@@ -1,7 +1,7 @@
 import { t } from '@vegaprotocol/i18n';
 import {
-  DropdownMenuItem,
-  DropdownMenuCopyItem,
+  TradingDropdownItem,
+  TradingDropdownCopyItem,
   Link,
   VegaIcon,
   VegaIconNames,
@@ -22,8 +22,8 @@ export const MarketActionsDropdown = ({
 
   return (
     <ActionsDropdown data-testid="market-actions-content">
-      <DropdownMenuCopyItem value={marketId} text={t('Copy Market ID')} />
-      <DropdownMenuItem>
+      <TradingDropdownCopyItem value={marketId} text={t('Copy Market ID')} />
+      <TradingDropdownItem>
         <Link
           href={linkCreator(EXPLORER_MARKET.replace(':id', marketId))}
           target="_blank"
@@ -33,15 +33,15 @@ export const MarketActionsDropdown = ({
             {t('View on Explorer')}
           </span>
         </Link>
-      </DropdownMenuItem>
-      <DropdownMenuItem
+      </TradingDropdownItem>
+      <TradingDropdownItem
         onClick={(e) => {
           open(assetId, e.target as HTMLElement);
         }}
       >
         <VegaIcon name={VegaIconNames.INFO} size={16} />
         {t('View settlement asset details')}
-      </DropdownMenuItem>
+      </TradingDropdownItem>
     </ActionsDropdown>
   );
 };

libs/markets/src/lib/components/markets-container/markets-container.spec.tsx

@@ -4,6 +4,21 @@ import * as DataProviders from '@vegaprotocol/data-provider';
 import { MockedProvider } from '@apollo/react-testing';
 import type { MarketMaybeWithData } from '../../markets-provider';
 import { MarketsContainer } from './markets-container';
+import { FLAGS } from '@vegaprotocol/environment';
+
+jest.mock('@vegaprotocol/environment', () => {
+  const actual = jest.requireActual('@vegaprotocol/environment');
+  return {
+    ...actual,
+    FLAGS: {
+      ...actual.FLAGS,
+      SUCCESSOR_MARKETS: true,
+    },
+  };
+});
+const SuccessorMarketRenderer = ({ value }: { value: string }) => {
+  return '-';
+};
 
 const market = {
   id: 'id-1',
@@ -22,8 +37,10 @@ const market = {
 } as unknown as MarketMaybeWithData;
 
 describe('MarketsContainer', () => {
-  it('context menu should stay open', async () => {
-    const spyOnSelect = jest.fn();
+  const spyOnSelect = jest.fn();
+  beforeEach(() => {
+    jest.clearAllMocks();
+
     jest
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       .spyOn<typeof DataProviders, any>(DataProviders, 'useDataProvider')
@@ -34,12 +51,16 @@ describe('MarketsContainer', () => {
           data: [market],
         };
       });
-
+  });
+  it('context menu should stay open', async () => {
     let rerenderRef: (ui: React.ReactElement) => void;
     await act(async () => {
       const { rerender } = render(
         <MockedProvider>
-          <MarketsContainer onSelect={spyOnSelect} />
+          <MarketsContainer
+            onSelect={spyOnSelect}
+            SuccessorMarketRenderer={SuccessorMarketRenderer}
+          />
         </MockedProvider>
       );
       rerenderRef = rerender;
@@ -63,7 +84,7 @@ describe('MarketsContainer', () => {
       screen.getByRole('button', {
         name: (_name, element) =>
           (element.parentNode as Element)?.getAttribute('id') ===
-          'cell-market-actions-8',
+          'cell-market-actions-9',
       })
     );
 
@@ -104,4 +125,55 @@ describe('MarketsContainer', () => {
       ).toBeInTheDocument();
     }
   });
+
+  it('SuccessorMarketRenderer should be rendered', async () => {
+    const successorMarketName = 'Successor Market Name';
+    const spySuccessorMarketRenderer = jest
+      .fn()
+      .mockReturnValue(successorMarketName);
+
+    render(
+      <MockedProvider>
+        <MarketsContainer
+          onSelect={spyOnSelect}
+          SuccessorMarketRenderer={spySuccessorMarketRenderer}
+        />
+      </MockedProvider>
+    );
+
+    expect(spySuccessorMarketRenderer).toHaveBeenCalled();
+    expect(
+      screen.getByRole('columnheader', {
+        name: (_name, element) =>
+          element.getAttribute('col-id') === 'successorMarketID',
+      })
+    ).toBeInTheDocument();
+    expect(
+      screen.getByRole('presentation', {
+        name: (_name, element) =>
+          element.getAttribute('id') === 'cell-successorMarketID-14',
+      })
+    ).toHaveTextContent(successorMarketName);
+  });
+
+  it('feature flag should hide successorMarketID column', async () => {
+    const mockedFlags = jest.mocked(FLAGS);
+    mockedFlags.SUCCESSOR_MARKETS = false;
+
+    const spySuccessorMarketRenderer = jest.fn();
+
+    render(
+      <MockedProvider>
+        <MarketsContainer
+          onSelect={spyOnSelect}
+          SuccessorMarketRenderer={spySuccessorMarketRenderer}
+        />
+      </MockedProvider>
+    );
+
+    expect(spySuccessorMarketRenderer).not.toHaveBeenCalled();
+    screen.getAllByRole('columnheader').forEach((element) => {
+      expect(element.getAttribute('col-id')).not.toEqual('successorMarketID');
+    });
+  });
 });

libs/markets/src/lib/components/markets-container/markets-container.tsx

@@ -1,5 +1,5 @@
 import type { MouseEvent } from 'react';
-import { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import type { AgGridReact } from 'ag-grid-react';
 import type { CellClickedEvent } from 'ag-grid-community';
 import { t } from '@vegaprotocol/i18n';
@@ -11,9 +11,13 @@ import type { MarketMaybeWithData } from '../../markets-provider';
 const POLLING_TIME = 2000;
 interface MarketsContainerProps {
   onSelect: (marketId: string, metaKey?: boolean) => void;
+  SuccessorMarketRenderer?: React.FC<{ value: string }>;
 }
 
-export const MarketsContainer = ({ onSelect }: MarketsContainerProps) => {
+export const MarketsContainer = ({
+  onSelect,
+  SuccessorMarketRenderer,
+}: MarketsContainerProps) => {
   const gridRef = useRef<AgGridReact | null>(null);
 
   const { data, error, reload } = useDataProvider({
@@ -46,6 +50,7 @@ export const MarketsContainer = ({ onSelect }: MarketsContainerProps) => {
               'tradableInstrument.instrument.code',
               'tradableInstrument.instrument.product.settlementAsset',
               'tradableInstrument.instrument.product.settlementAsset.symbol',
+              'market-actions',
             ].includes(colId)
           ) {
             return;
@@ -58,6 +63,7 @@ export const MarketsContainer = ({ onSelect }: MarketsContainerProps) => {
         }}
         onMarketClick={onSelect}
         overlayNoRowsTemplate={error ? error.message : t('No markets')}
+        SuccessorMarketRenderer={SuccessorMarketRenderer}
       />
     </div>
   );

libs/markets/src/lib/components/markets-container/use-column-defs.tsx

@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import type { ColDef } from 'ag-grid-community';
+import compact from 'lodash/compact';
 import { t } from '@vegaprotocol/i18n';
 import type {
   VegaICellRendererParams,
@@ -11,6 +12,7 @@ import * as Schema from '@vegaprotocol/types';
 import { addDecimalsFormatNumber, toBigNum } from '@vegaprotocol/utils';
 import { ButtonLink } from '@vegaprotocol/ui-toolkit';
 import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
+import { FLAGS } from '@vegaprotocol/environment';
 import type { MarketMaybeWithData } from '../../markets-provider';
 import { MarketActionsDropdown } from './market-table-actions';
 
@@ -22,166 +24,183 @@ const { MarketTradingMode, AuctionTrigger } = Schema;
 
 export const useColumnDefs = ({ onMarketClick }: Props) => {
   const { open: openAssetDetailsDialog } = useAssetDetailsDialogStore();
-
   return useMemo<ColDef[]>(
-    () => [
-      {
-        headerName: t('Market'),
-        field: 'tradableInstrument.instrument.code',
-        cellRenderer: 'MarketName',
-        cellRendererParams: { onMarketClick },
-      },
-      {
-        headerName: t('Description'),
-        field: 'tradableInstrument.instrument.name',
-      },
-      {
-        headerName: t('Trading mode'),
-        field: 'tradingMode',
-        minWidth: 170,
-        valueFormatter: ({
-          data,
-        }: VegaValueFormatterParams<MarketMaybeWithData, 'data'>) => {
-          if (!data?.data) return '-';
-          const { trigger, marketTradingMode } = data.data;
-          return marketTradingMode ===
-            MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
-            trigger &&
-            trigger !== AuctionTrigger.AUCTION_TRIGGER_UNSPECIFIED
-            ? `${Schema.MarketTradingModeMapping[marketTradingMode]}
+    () =>
+      compact([
+        {
+          headerName: t('Market'),
+          field: 'tradableInstrument.instrument.code',
+          cellRenderer: 'MarketName',
+          cellRendererParams: { onMarketClick },
+        },
+        {
+          headerName: t('Description'),
+          field: 'tradableInstrument.instrument.name',
+        },
+        {
+          headerName: t('Trading mode'),
+          field: 'tradingMode',
+          minWidth: 170,
+          valueFormatter: ({
+            data,
+          }: VegaValueFormatterParams<MarketMaybeWithData, 'data'>) => {
+            if (!data?.data) return '-';
+            const { trigger, marketTradingMode } = data.data;
+            return marketTradingMode ===
+              MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
+              trigger &&
+              trigger !== AuctionTrigger.AUCTION_TRIGGER_UNSPECIFIED
+              ? `${Schema.MarketTradingModeMapping[marketTradingMode]}
             - ${Schema.AuctionTriggerMapping[trigger]}`
-            : Schema.MarketTradingModeMapping[marketTradingMode];
+              : Schema.MarketTradingModeMapping[marketTradingMode];
+          },
+          filter: SetFilter,
+          filterParams: {
+            set: Schema.MarketTradingModeMapping,
+          },
         },
-        filter: SetFilter,
-        filterParams: {
-          set: Schema.MarketTradingModeMapping,
+        {
+          headerName: t('Status'),
+          field: 'state',
+          valueFormatter: ({
+            data,
+          }: VegaValueFormatterParams<MarketMaybeWithData, 'state'>) => {
+            return data?.state ? Schema.MarketStateMapping[data.state] : '-';
+          },
+          filter: SetFilter,
+          filterParams: {
+            set: Schema.MarketStateMapping,
+          },
         },
-      },
-      {
-        headerName: t('Status'),
-        field: 'state',
-        valueFormatter: ({
-          data,
-        }: VegaValueFormatterParams<MarketMaybeWithData, 'state'>) => {
-          return data?.state ? Schema.MarketStateMapping[data.state] : '-';
+        FLAGS.SUCCESSOR_MARKETS && {
+          headerName: t('Successor market'),
+          field: 'successorMarketID',
+          cellRenderer: 'SuccessorMarketRenderer',
         },
-        filter: SetFilter,
-        filterParams: {
-          set: Schema.MarketStateMapping,
+        {
+          headerName: t('Best bid'),
+          field: 'data.bestBidPrice',
+          type: 'rightAligned',
+          cellRenderer: 'PriceFlashCell',
+          filter: 'agNumberColumnFilter',
+          valueGetter: ({
+            data,
+          }: VegaValueGetterParams<MarketMaybeWithData>) => {
+            return data?.data?.bestBidPrice === undefined
+              ? undefined
+              : toBigNum(
+                  data?.data?.bestBidPrice,
+                  data.decimalPlaces
+                ).toNumber();
+          },
+          valueFormatter: ({
+            data,
+          }: VegaValueFormatterParams<
+            MarketMaybeWithData,
+            'data.bestBidPrice'
+          >) =>
+            data?.data?.bestBidPrice === undefined
+              ? '-'
+              : addDecimalsFormatNumber(
+                  data.data.bestBidPrice,
+                  data.decimalPlaces
+                ),
         },
-      },
-      {
-        headerName: t('Best bid'),
-        field: 'data.bestBidPrice',
-        type: 'rightAligned',
-        cellRenderer: 'PriceFlashCell',
-        filter: 'agNumberColumnFilter',
-        valueGetter: ({ data }: VegaValueGetterParams<MarketMaybeWithData>) => {
-          return data?.data?.bestBidPrice === undefined
-            ? undefined
-            : toBigNum(data?.data?.bestBidPrice, data.decimalPlaces).toNumber();
+        {
+          headerName: t('Best offer'),
+          field: 'data.bestOfferPrice',
+          type: 'rightAligned',
+          cellRenderer: 'PriceFlashCell',
+          filter: 'agNumberColumnFilter',
+          valueGetter: ({
+            data,
+          }: VegaValueGetterParams<MarketMaybeWithData>) => {
+            return data?.data?.bestOfferPrice === undefined
+              ? undefined
+              : toBigNum(
+                  data?.data?.bestOfferPrice,
+                  data.decimalPlaces
+                ).toNumber();
+          },
+          valueFormatter: ({
+            data,
+          }: VegaValueFormatterParams<
+            MarketMaybeWithData,
+            'data.bestOfferPrice'
+          >) =>
+            data?.data?.bestOfferPrice === undefined
+              ? '-'
+              : addDecimalsFormatNumber(
+                  data.data.bestOfferPrice,
+                  data.decimalPlaces
+                ),
         },
-        valueFormatter: ({
-          data,
-        }: VegaValueFormatterParams<
-          MarketMaybeWithData,
-          'data.bestBidPrice'
-        >) =>
-          data?.data?.bestBidPrice === undefined
-            ? '-'
-            : addDecimalsFormatNumber(
-                data.data.bestBidPrice,
-                data.decimalPlaces
-              ),
-      },
-      {
-        headerName: t('Best offer'),
-        field: 'data.bestOfferPrice',
-        type: 'rightAligned',
-        cellRenderer: 'PriceFlashCell',
-        filter: 'agNumberColumnFilter',
-        valueGetter: ({ data }: VegaValueGetterParams<MarketMaybeWithData>) => {
-          return data?.data?.bestOfferPrice === undefined
-            ? undefined
-            : toBigNum(
-                data?.data?.bestOfferPrice,
-                data.decimalPlaces
-              ).toNumber();
+        {
+          headerName: t('Mark price'),
+          field: 'data.markPrice',
+          type: 'rightAligned',
+          cellRenderer: 'PriceFlashCell',
+          filter: 'agNumberColumnFilter',
+          valueGetter: ({
+            data,
+          }: VegaValueGetterParams<MarketMaybeWithData>) => {
+            return data?.data?.markPrice === undefined
+              ? undefined
+              : toBigNum(data?.data?.markPrice, data.decimalPlaces).toNumber();
+          },
+          valueFormatter: ({
+            data,
+          }: VegaValueFormatterParams<MarketMaybeWithData, 'data.markPrice'>) =>
+            data?.data?.bestOfferPrice === undefined
+              ? '-'
+              : addDecimalsFormatNumber(
+                  data.data.markPrice,
+                  data.decimalPlaces
+                ),
         },
-        valueFormatter: ({
-          data,
-        }: VegaValueFormatterParams<
-          MarketMaybeWithData,
-          'data.bestOfferPrice'
-        >) =>
-          data?.data?.bestOfferPrice === undefined
-            ? '-'
-            : addDecimalsFormatNumber(
-                data.data.bestOfferPrice,
-                data.decimalPlaces
-              ),
-      },
-      {
-        headerName: t('Mark price'),
-        field: 'data.markPrice',
-        type: 'rightAligned',
-        cellRenderer: 'PriceFlashCell',
-        filter: 'agNumberColumnFilter',
-        valueGetter: ({ data }: VegaValueGetterParams<MarketMaybeWithData>) => {
-          return data?.data?.markPrice === undefined
-            ? undefined
-            : toBigNum(data?.data?.markPrice, data.decimalPlaces).toNumber();
+        {
+          headerName: t('Settlement asset'),
+          field: 'tradableInstrument.instrument.product.settlementAsset.symbol',
+          cellRenderer: ({
+            data,
+          }: VegaICellRendererParams<
+            MarketMaybeWithData,
+            'tradableInstrument.instrument.product.settlementAsset.symbol'
+          >) => {
+            const value =
+              data?.tradableInstrument.instrument.product.settlementAsset;
+            return value ? (
+              <ButtonLink
+                onClick={(e) => {
+                  openAssetDetailsDialog(value.id, e.target as HTMLElement);
+                }}
+              >
+                {value.symbol}
+              </ButtonLink>
+            ) : (
+              ''
+            );
+          },
         },
-        valueFormatter: ({
-          data,
-        }: VegaValueFormatterParams<MarketMaybeWithData, 'data.markPrice'>) =>
-          data?.data?.bestOfferPrice === undefined
-            ? '-'
-            : addDecimalsFormatNumber(data.data.markPrice, data.decimalPlaces),
-      },
-      {
-        headerName: t('Settlement asset'),
-        field: 'tradableInstrument.instrument.product.settlementAsset.symbol',
-        cellRenderer: ({
-          data,
-        }: VegaICellRendererParams<
-          MarketMaybeWithData,
-          'tradableInstrument.instrument.product.settlementAsset.symbol'
-        >) => {
-          const value =
-            data?.tradableInstrument.instrument.product.settlementAsset;
-          return value ? (
-            <ButtonLink
-              onClick={(e) => {
-                openAssetDetailsDialog(value.id, e.target as HTMLElement);
-              }}
-            >
-              {value.symbol}
-            </ButtonLink>
-          ) : (
-            ''
-          );
+        {
+          colId: 'market-actions',
+          field: 'id',
+          ...COL_DEFS.actions,
+          cellRenderer: ({
+            data,
+          }: VegaICellRendererParams<MarketMaybeWithData>) => {
+            if (!data) return null;
+            return (
+              <MarketActionsDropdown
+                marketId={data.id}
+                assetId={
+                  data.tradableInstrument.instrument.product.settlementAsset.id
+                }
+              />
+            );
+          },
         },
-      },
-      {
-        colId: 'market-actions',
-        field: 'id',
-        ...COL_DEFS.actions,
-        cellRenderer: ({
-          data,
-        }: VegaICellRendererParams<MarketMaybeWithData>) => {
-          if (!data) return null;
-          return (
-            <MarketActionsDropdown
-              marketId={data.id}
-              assetId={
-                data.tradableInstrument.instrument.product.settlementAsset.id
-              }
-            />
-          );
-        },
-      },
-    ],
+      ]),
     [onMarketClick, openAssetDetailsDialog]
   );
 };

libs/markets/src/lib/markets-provider.ts

@@ -27,8 +27,9 @@ import {
   filterAndSortMarkets,
 } from './market-utils';
 import { MarketsDocument } from './__generated__/markets';
-
 import type { Candle } from './market-candles-provider';
+import type { SuccessorMarketIdsQuery } from './__generated__/SuccessorMarket';
+import { SuccessorMarketIdsDocument } from './__generated__';
 
 export type Market = MarketFieldsFragment;
 
@@ -82,7 +83,6 @@ export const marketProvider = makeDerivedDataProvider<
 );
 
 export const useMarket = (marketId?: string) => {
-  console.log(marketId);
   const variables = useMemo(() => ({ marketId: marketId || '' }), [marketId]);
   return useDataProvider({
     dataProvider: marketProvider,
@@ -240,3 +240,34 @@ export const useMarketList = () => {
     reload,
   };
 };
+
+export type MarketSuccessors = {
+  __typename?: 'Market';
+  id: string;
+  successorMarketID?: string | null;
+  parentMarketID?: string | null;
+};
+const getMarketSuccessorData = (
+  responseData: SuccessorMarketIdsQuery | null
+): MarketSuccessors[] | null =>
+  responseData?.marketsConnection?.edges.map((edge) => edge.node) || null;
+
+export const marketSuccessorProvider = makeDataProvider<
+  SuccessorMarketIdsQuery,
+  MarketSuccessors[],
+  never,
+  never
+>({
+  query: SuccessorMarketIdsDocument,
+  getData: getMarketSuccessorData,
+  fetchPolicy: 'no-cache',
+});
+
+export const useSuccessorMarketIds = (marketId: string) => {
+  const { data } = useDataProvider({
+    dataProvider: marketSuccessorProvider,
+    variables: undefined,
+    skip: !marketId,
+  });
+  return data?.find((item) => item.id === marketId) ?? null;
+};

libs/orders/src/lib/components/order-actions-dropdown/order-actions-dropdown.tsx

@@ -1,13 +1,13 @@
 import {
   ActionsDropdown,
-  DropdownMenuCopyItem,
+  TradingDropdownCopyItem,
 } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/i18n';
 
 export const OrderActionsDropdown = ({ id }: { id: string }) => {
   return (
-    <ActionsDropdown data-testid="market-actions-content">
-      <DropdownMenuCopyItem value={id} text={t('Copy order ID')} />
+    <ActionsDropdown data-testid="order-actions-content">
+      <TradingDropdownCopyItem value={id} text={t('Copy order ID')} />
     </ActionsDropdown>
   );
 };

libs/positions/src/lib/position-actions-dropdown.tsx

@@ -1,7 +1,7 @@
 import { t } from '@vegaprotocol/i18n';
 import {
   ActionsDropdown,
-  DropdownMenuItem,
+  TradingDropdownItem,
   VegaIcon,
   VegaIconNames,
 } from '@vegaprotocol/ui-toolkit';
@@ -11,15 +11,15 @@ export const PositionActionsDropdown = ({ assetId }: { assetId: string }) => {
   const open = useAssetDetailsDialogStore((store) => store.open);
 
   return (
-    <ActionsDropdown data-testid="market-actions-content">
-      <DropdownMenuItem
+    <ActionsDropdown data-testid="position-actions-content">
+      <TradingDropdownItem
         onClick={(e) => {
           open(assetId, e.target as HTMLElement);
         }}
       >
         <VegaIcon name={VegaIconNames.INFO} size={16} />
         {t('View settlement asset details')}
-      </DropdownMenuItem>
+      </TradingDropdownItem>
     </ActionsDropdown>
   );
 };

libs/proposals/src/components/proposal-actions-dropdown.tsx

@@ -1,5 +1,5 @@
 import {
-  DropdownMenuItem,
+  TradingDropdownItem,
   VegaIcon,
   VegaIconNames,
   Link,
@@ -12,8 +12,8 @@ export const ProposalActionsDropdown = ({ id }: { id: string }) => {
   const linkCreator = useLinks(DApp.Token);
 
   return (
-    <ActionsDropdown data-testid="market-actions-content">
-      <DropdownMenuItem>
+    <ActionsDropdown data-testid="proposal-actions-content">
+      <TradingDropdownItem>
         <Link
           href={linkCreator(TOKEN_PROPOSAL.replace(':id', id))}
           target="_blank"
@@ -21,7 +21,7 @@ export const ProposalActionsDropdown = ({ id }: { id: string }) => {
           <VegaIcon name={VegaIconNames.OPEN_EXTERNAL} size={16} />
           {t('View proposal')}
         </Link>
-      </DropdownMenuItem>
+      </TradingDropdownItem>
     </ActionsDropdown>
   );
 };

libs/proposals/src/components/proposals-list/proposal-list.spec.tsx

@@ -14,6 +14,23 @@ import { createProposalListFieldsFragment } from '../../lib/proposals-data-provi
 import type { ProposalsListQuery } from '../../lib';
 import { ProposalsListDocument } from '../../lib';
 import type { PartialDeep } from 'type-fest';
+import { FLAGS } from '@vegaprotocol/environment';
+
+jest.mock('@vegaprotocol/environment', () => {
+  const actual = jest.requireActual('@vegaprotocol/environment');
+  return {
+    ...actual,
+    FLAGS: {
+      ...actual.FLAGS,
+      SUCCESSOR_MARKETS: true,
+    },
+  };
+});
+
+const successorMarketName = 'Successor Market Name';
+const spySuccessorMarketRenderer = jest
+  .fn()
+  .mockReturnValue(successorMarketName);
 
 describe('ProposalsList', () => {
   const createProposalsMock = (override?: PartialDeep<ProposalsListQuery>) => {
@@ -64,13 +81,15 @@ describe('ProposalsList', () => {
 
     return mock;
   };
-
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
   it('should be properly rendered', async () => {
     const mock = createProposalsMock();
     await act(() => {
       render(
         <MockedProvider mocks={[mock]}>
-          <ProposalsList />
+          <ProposalsList SuccessorMarketRenderer={spySuccessorMarketRenderer} />
         </MockedProvider>
       );
     });
@@ -82,31 +101,55 @@ describe('ProposalsList', () => {
   });
 
   it('some of states should be filtered out', async () => {
+    const proposalNode = createProposalListFieldsFragment({
+      id: 'id-1',
+      state: Types.ProposalState.STATE_ENACTED,
+    });
+
     const mock = createProposalsMock({
       proposalsConnection: {
         edges: [
           {
             __typename: 'ProposalEdge',
-            node: createProposalListFieldsFragment({
-              id: 'id-1',
-              state: Types.ProposalState.STATE_ENACTED,
-            }),
+            node: {
+              ...proposalNode,
+              terms: {
+                ...proposalNode.terms,
+                change: {
+                  ...proposalNode.terms.change,
+                },
+              },
+            },
           },
         ],
       },
-    });
+    } as PartialDeep<ProposalsListQuery>);
     await act(() => {
       render(
         <MockedProvider mocks={[mock]}>
-          <ProposalsList />
+          <ProposalsList SuccessorMarketRenderer={spySuccessorMarketRenderer} />
         </MockedProvider>
       );
     });
     const container = document.querySelector('.ag-center-cols-container');
     await waitFor(() => {
       expect(container).toBeInTheDocument();
+      expect(getAllByRole(container as HTMLDivElement, 'row')).toHaveLength(2);
     });
-    expect(getAllByRole(container as HTMLDivElement, 'row')).toHaveLength(2);
+
+    expect(spySuccessorMarketRenderer).toHaveBeenCalled();
+    expect(
+      screen.getByRole('columnheader', {
+        name: (_name, element) =>
+          element.getAttribute('col-id') === 'parentMarket',
+      })
+    ).toBeInTheDocument();
+    expect(
+      screen.getAllByRole('gridcell', {
+        name: (name, element) =>
+          element.getAttribute('col-id') === 'parentMarket',
+      })[0]
+    ).toHaveTextContent(successorMarketName);
   });
 
   it('empty response should causes no data message display', async () => {
@@ -129,10 +172,55 @@ describe('ProposalsList', () => {
     await act(() => {
       render(
         <MockedProvider mocks={[mock]}>
-          <ProposalsList />
+          <ProposalsList SuccessorMarketRenderer={spySuccessorMarketRenderer} />
         </MockedProvider>
       );
     });
     expect(await screen.findByText('No markets')).toBeInTheDocument();
+
+    expect(
+      screen.getByRole('columnheader', {
+        name: (_name, element) =>
+          element.getAttribute('col-id') === 'parentMarket',
+      })
+    ).toBeInTheDocument();
+  });
+
+  it('feature flag should hide parent marketcolumn', async () => {
+    const mockedFlags = jest.mocked(FLAGS);
+    mockedFlags.SUCCESSOR_MARKETS = false;
+    const mock: MockedResponse<ProposalsListQuery> = {
+      request: {
+        query: ProposalsListDocument,
+        variables: {
+          proposalType: Types.ProposalType.TYPE_NEW_MARKET,
+        },
+      },
+      result: {
+        data: {
+          proposalsConnection: {
+            __typename: 'ProposalsConnection',
+            edges: [],
+          },
+        },
+      },
+    };
+    await act(() => {
+      render(
+        <MockedProvider mocks={[mock]}>
+          <ProposalsList SuccessorMarketRenderer={spySuccessorMarketRenderer} />
+        </MockedProvider>
+      );
+    });
+    await waitFor(() => {
+      expect(
+        screen.getByRole('columnheader', {
+          name: (_name, element) => element.getAttribute('col-id') === 'market',
+        })
+      ).toBeInTheDocument();
+    });
+    screen.getAllByRole('columnheader').forEach((element) => {
+      expect(element.getAttribute('col-id')).not.toEqual('parentMarket');
+    });
   });
 });

libs/proposals/src/components/proposals-list/proposals-list.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import { useRef } from 'react';
 import { AgGridLazy as AgGrid } from '@vegaprotocol/datagrid';
 import { t } from '@vegaprotocol/i18n';
@@ -17,7 +18,13 @@ export const getNewMarketProposals = (data: ProposalListFieldsFragment[]) =>
     ].includes(proposal.state)
   );
 
-export const ProposalsList = () => {
+interface ProposalListProps {
+  SuccessorMarketRenderer: React.FC<{ value: string }>;
+}
+
+export const ProposalsList = ({
+  SuccessorMarketRenderer,
+}: ProposalListProps) => {
   const gridRef = useRef<AgGridReact | null>(null);
   const { data } = useProposalsListQuery({
     variables: {
@@ -41,6 +48,7 @@ export const ProposalsList = () => {
         getRowId={({ data }) => data.id}
         style={{ width: '100%', height: '100%' }}
         overlayNoRowsTemplate={t('No markets')}
+        components={{ SuccessorMarketRenderer }}
       />
     </div>
   );

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

@@ -2,7 +2,8 @@ import { useMemo } from 'react';
 import BigNumber from 'bignumber.js';
 import type { ColDef } from 'ag-grid-community';
 import { COL_DEFS, DateRangeFilter, SetFilter } from '@vegaprotocol/datagrid';
-import { useEnvironment } from '@vegaprotocol/environment';
+import compact from 'lodash/compact';
+import { useEnvironment, FLAGS } from '@vegaprotocol/environment';
 import { getDateTimeFormat } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
 import {
@@ -32,7 +33,7 @@ export const useColumnDefs = () => {
 
   const cellCss = 'grid h-full items-center';
   const columnDefs: ColDef[] = useMemo(() => {
-    return [
+    return compact([
       {
         colId: 'market',
         headerName: t('Market'),
@@ -83,6 +84,13 @@ export const useColumnDefs = () => {
           set: ProposalStateMapping,
         },
       },
+      FLAGS.SUCCESSOR_MARKETS && {
+        headerName: t('Parent market'),
+        field: 'id',
+        colId: 'parentMarket',
+        cellRenderer: 'SuccessorMarketRenderer',
+        cellRendererParams: { parent: true },
+      },
       {
         colId: 'voting',
         headerName: t('Voting'),
@@ -146,7 +154,7 @@ export const useColumnDefs = () => {
         },
         flex: 1,
       },
-    ];
+    ]);
   }, [VEGA_TOKEN_URL, requiredMajorityPercentage]);
 
   const defaultColDef: ColDef = useMemo(() => {

libs/proposals/src/components/protocol-upgrade-countdown.tsx

@@ -1,20 +1,25 @@
 import { t } from '@vegaprotocol/i18n';
 import { useNextProtocolUpgradeProposal, useTimeToUpgrade } from '../lib';
 import { convertToCountdownString } from '@vegaprotocol/utils';
-import { IconNames } from '@blueprintjs/icons';
 import classNames from 'classnames';
-import { Icon, NavigationContext } from '@vegaprotocol/ui-toolkit';
+import {
+  NavigationContext,
+  VegaIcon,
+  VegaIconNames,
+} from '@vegaprotocol/ui-toolkit';
 import { useProtocolUpgradeProposalLink } from '@vegaprotocol/environment';
 import { useContext } from 'react';
+
 export enum ProtocolUpgradeCountdownMode {
   IN_BLOCKS,
   IN_ESTIMATED_TIME_REMAINING,
 }
+
 type ProtocolUpgradeCountdownProps = {
   mode?: ProtocolUpgradeCountdownMode;
 };
 export const ProtocolUpgradeCountdown = ({
-  mode = ProtocolUpgradeCountdownMode.IN_BLOCKS,
+  mode = ProtocolUpgradeCountdownMode.IN_ESTIMATED_TIME_REMAINING,
 }: ProtocolUpgradeCountdownProps) => {
   const { theme } = useContext(NavigationContext);
   const { data, lastBlockHeight } = useNextProtocolUpgradeProposal();
@@ -75,20 +80,17 @@ export const ProtocolUpgradeCountdown = ({
       <div
         data-testid="protocol-upgrade-counter"
         className={classNames(
-          'flex flex-nowrap items-center text-xs py-2 px-4',
+          'flex flex-nowrap gap-1 items-center text-xs py-1 px-2 lg:px-4 h-8',
           'border rounded',
           'border-vega-orange-500 dark:border-vega-orange-500',
           'bg-vega-orange-300 dark:bg-vega-orange-700',
+          'text-default',
           {
             '!bg-transparent !border-black': theme === 'yellow',
           }
         )}
       >
-        <Icon
-          name={IconNames.WARNING_SIGN}
-          size={3}
-          className={classNames('mr-2', emphasis)}
-        />{' '}
+        <VegaIcon name={VegaIconNames.EXCLAIMATION_MARK} size={12} />{' '}
         <span className="flex gap-1 flex-nowrap whitespace-nowrap">
           <span>{t('Network upgrade in')} </span>
           {countdown}

libs/proposals/src/lib/proposals-data-provider/proposals.mock.ts

@@ -5,6 +5,7 @@ import type {
 import * as Schema from '@vegaprotocol/types';
 import type { PartialDeep } from 'type-fest';
 import merge from 'lodash/merge';
+import type { SuccessorMarketProposalDetailsQuery } from '../proposals-hooks';
 
 export const proposalListQuery = (
   override?: PartialDeep<ProposalsListQuery>
@@ -1284,3 +1285,27 @@ const proposalListFields: ProposalListFieldsFragment[] = [
     __typename: 'Proposal',
   },
 ];
+
+export const successorMarketProposalDetailsQuery = (
+  override?: SuccessorMarketProposalDetailsQuery
+): SuccessorMarketProposalDetailsQuery =>
+  merge(
+    {
+      __typename: 'Query',
+      proposal: {
+        __typename: 'Proposal',
+        terms: {
+          __typename: 'ProposalTerms',
+          change: {
+            __typename: 'NewMarket',
+            successorConfiguration: {
+              __typename: 'SuccessorConfiguration',
+              insurancePoolFraction: '0.75',
+              parentMarketId: 'PARENT-A',
+            },
+          },
+        },
+      },
+    },
+    override
+  );

libs/proposals/src/lib/proposals-hooks/Proposal.graphql

@@ -40,3 +40,30 @@ query ProposalOfMarket($marketId: ID!) {
     }
   }
 }
+
+query SuccessorMarketProposalDetails($proposalId: ID!) {
+  proposal(id: $proposalId) {
+    id
+    terms {
+      change {
+        ... on NewMarket {
+          successorConfiguration {
+            parentMarketId
+            insurancePoolFraction
+          }
+        }
+      }
+    }
+  }
+}
+
+query InstrumentDetails($marketId: ID!) {
+  market(id: $marketId) {
+    tradableInstrument {
+      instrument {
+        code
+        name
+      }
+    }
+  }
+}

libs/proposals/src/lib/proposals-hooks/__generated__/Proposal.ts

@@ -27,6 +27,20 @@ export type ProposalOfMarketQueryVariables = Types.Exact<{
 
 export type ProposalOfMarketQuery = { __typename?: 'Query', proposal?: { __typename?: 'Proposal', id?: string | null, terms: { __typename?: 'ProposalTerms', enactmentDatetime?: any | null } } | null };
 
+export type SuccessorMarketProposalDetailsQueryVariables = Types.Exact<{
+  proposalId: Types.Scalars['ID'];
+}>;
+
+
+export type SuccessorMarketProposalDetailsQuery = { __typename?: 'Query', proposal?: { __typename?: 'Proposal', id?: string | null, terms: { __typename?: 'ProposalTerms', change: { __typename?: 'CancelTransfer' } | { __typename?: 'NewAsset' } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket', successorConfiguration?: { __typename?: 'SuccessorConfiguration', parentMarketId: string, insurancePoolFraction: string } | null } | { __typename?: 'NewTransfer' } | { __typename?: 'UpdateAsset' } | { __typename?: 'UpdateMarket' } | { __typename?: 'UpdateNetworkParameter' } } } | null };
+
+export type InstrumentDetailsQueryVariables = Types.Exact<{
+  marketId: Types.Scalars['ID'];
+}>;
+
+
+export type InstrumentDetailsQuery = { __typename?: 'Query', market?: { __typename?: 'Market', tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', code: string, name: string } } } | null };
+
 export const ProposalEventFieldsFragmentDoc = gql`
     fragment ProposalEventFields on Proposal {
   id
@@ -147,4 +161,89 @@ export function useProposalOfMarketLazyQuery(baseOptions?: Apollo.LazyQueryHookO
         }
 export type ProposalOfMarketQueryHookResult = ReturnType<typeof useProposalOfMarketQuery>;
 export type ProposalOfMarketLazyQueryHookResult = ReturnType<typeof useProposalOfMarketLazyQuery>;
-export type ProposalOfMarketQueryResult = Apollo.QueryResult<ProposalOfMarketQuery, ProposalOfMarketQueryVariables>;
+export type ProposalOfMarketQueryResult = Apollo.QueryResult<ProposalOfMarketQuery, ProposalOfMarketQueryVariables>;
+export const SuccessorMarketProposalDetailsDocument = gql`
+    query SuccessorMarketProposalDetails($proposalId: ID!) {
+  proposal(id: $proposalId) {
+    id
+    terms {
+      change {
+        ... on NewMarket {
+          successorConfiguration {
+            parentMarketId
+            insurancePoolFraction
+          }
+        }
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useSuccessorMarketProposalDetailsQuery__
+ *
+ * To run a query within a React component, call `useSuccessorMarketProposalDetailsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useSuccessorMarketProposalDetailsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useSuccessorMarketProposalDetailsQuery({
+ *   variables: {
+ *      proposalId: // value for 'proposalId'
+ *   },
+ * });
+ */
+export function useSuccessorMarketProposalDetailsQuery(baseOptions: Apollo.QueryHookOptions<SuccessorMarketProposalDetailsQuery, SuccessorMarketProposalDetailsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<SuccessorMarketProposalDetailsQuery, SuccessorMarketProposalDetailsQueryVariables>(SuccessorMarketProposalDetailsDocument, options);
+      }
+export function useSuccessorMarketProposalDetailsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<SuccessorMarketProposalDetailsQuery, SuccessorMarketProposalDetailsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<SuccessorMarketProposalDetailsQuery, SuccessorMarketProposalDetailsQueryVariables>(SuccessorMarketProposalDetailsDocument, options);
+        }
+export type SuccessorMarketProposalDetailsQueryHookResult = ReturnType<typeof useSuccessorMarketProposalDetailsQuery>;
+export type SuccessorMarketProposalDetailsLazyQueryHookResult = ReturnType<typeof useSuccessorMarketProposalDetailsLazyQuery>;
+export type SuccessorMarketProposalDetailsQueryResult = Apollo.QueryResult<SuccessorMarketProposalDetailsQuery, SuccessorMarketProposalDetailsQueryVariables>;
+export const InstrumentDetailsDocument = gql`
+    query InstrumentDetails($marketId: ID!) {
+  market(id: $marketId) {
+    tradableInstrument {
+      instrument {
+        code
+        name
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useInstrumentDetailsQuery__
+ *
+ * To run a query within a React component, call `useInstrumentDetailsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useInstrumentDetailsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useInstrumentDetailsQuery({
+ *   variables: {
+ *      marketId: // value for 'marketId'
+ *   },
+ * });
+ */
+export function useInstrumentDetailsQuery(baseOptions: Apollo.QueryHookOptions<InstrumentDetailsQuery, InstrumentDetailsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<InstrumentDetailsQuery, InstrumentDetailsQueryVariables>(InstrumentDetailsDocument, options);
+      }
+export function useInstrumentDetailsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<InstrumentDetailsQuery, InstrumentDetailsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<InstrumentDetailsQuery, InstrumentDetailsQueryVariables>(InstrumentDetailsDocument, options);
+        }
+export type InstrumentDetailsQueryHookResult = ReturnType<typeof useInstrumentDetailsQuery>;
+export type InstrumentDetailsLazyQueryHookResult = ReturnType<typeof useInstrumentDetailsLazyQuery>;
+export type InstrumentDetailsQueryResult = Apollo.QueryResult<InstrumentDetailsQuery, InstrumentDetailsQueryVariables>;

libs/proposals/src/lib/proposals-hooks/index.ts

@@ -3,3 +3,4 @@ export * from './use-proposal-event';
 export * from './use-proposal-submit';
 export * from './use-update-proposal';
 export * from './use-update-network-paramaters-toasts';
+export * from './use-successor-market-proposal-details';

libs/proposals/src/lib/proposals-hooks/use-successor-market-proposal-details.ts

@@ -0,0 +1,39 @@
+import omit from 'lodash/omit';
+import {
+  useInstrumentDetailsQuery,
+  useSuccessorMarketProposalDetailsQuery,
+} from './__generated__/Proposal';
+
+export const useSuccessorMarketProposalDetails = (
+  proposalId?: string | null
+) => {
+  const { data: proposal } = useSuccessorMarketProposalDetailsQuery({
+    variables: {
+      proposalId: proposalId || '',
+    },
+    skip: !proposalId || proposalId.length === 0,
+  });
+
+  const successorDetails =
+    (proposal?.proposal &&
+      proposal.proposal?.terms.change.__typename === 'NewMarket' &&
+      proposal.proposal.terms.change.successorConfiguration) ||
+    undefined;
+
+  const { data: market } = useInstrumentDetailsQuery({
+    variables: {
+      marketId: successorDetails?.parentMarketId || '',
+    },
+    skip:
+      !successorDetails?.parentMarketId ||
+      successorDetails.parentMarketId.length === 0,
+  });
+
+  const details = {
+    ...successorDetails,
+    code: market?.market?.tradableInstrument.instrument.code,
+    name: market?.market?.tradableInstrument.instrument.name,
+  };
+
+  return omit(details, '__typename');
+};

libs/tailwindcss-config/src/theme.js

@@ -152,7 +152,7 @@ module.exports = {
         200: '#7C7E83',
         300: '#626469',
         400: '#44464B',
-        500: '#323339', // surface-container-highest
+        500: '#323339', // surface-container-highest, outline-surface-default
         600: '#292B30',
         700: '#202227',
         800: '#17191E', // surface-container

libs/ui-toolkit/src/components/dropdown-menu/actions-dropdown.tsx

@@ -1,26 +0,0 @@
-import { VegaIcon, VegaIconNames } from '../icon';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuTrigger,
-} from './dropdown-menu';
-
-export const ActionsDropdownTrigger = () => {
-  return (
-    <DropdownMenuTrigger
-      className='hover:bg-vega-light-200 dark:hover:bg-vega-dark-200 [&[aria-expanded="true"]]:bg-vega-light-200 dark:[&[aria-expanded="true"]]:bg-vega-dark-200 p-0.5 rounded-full'
-      data-testid="dropdown-menu"
-    >
-      <VegaIcon name={VegaIconNames.KEBAB} />
-    </DropdownMenuTrigger>
-  );
-};
-
-type ActionMenuContentProps = React.ComponentProps<typeof DropdownMenuContent>;
-export const ActionsDropdown = (props: ActionMenuContentProps) => {
-  return (
-    <DropdownMenu trigger={<ActionsDropdownTrigger />}>
-      <DropdownMenuContent {...props}></DropdownMenuContent>
-    </DropdownMenu>
-  );
-};

libs/ui-toolkit/src/components/dropdown-menu/dropdown-menu.stories.tsx

@@ -26,7 +26,6 @@ export const CheckboxItems = () => {
     { label: 'Moving average', state: useState(false) },
     { label: 'Price monitoring bands', state: useState(false) },
   ];
-  console.log(checkboxItems);
 
   return (
     <DropdownMenu
@@ -68,6 +67,7 @@ export const RadioItems = () => {
         }
       >
         <DropdownMenuContent>
+          {/* eslint-disable no-console */}
           <DropdownMenuItem onSelect={() => console.log('minimize')}>
             Minimize window
           </DropdownMenuItem>
@@ -77,6 +77,7 @@ export const RadioItems = () => {
           <DropdownMenuItem onSelect={() => console.log('smaller')}>
             Smaller
           </DropdownMenuItem>
+          {/* eslint-enable */}
           <DropdownMenuSeparator />
           <DropdownMenuRadioGroup value={selected} onValueChange={setSelected}>
             {files.map((file) => (

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

@@ -1,2 +1 @@
 export * from './dropdown-menu';
-export * from './actions-dropdown';

libs/ui-toolkit/src/components/icon/vega-icons/svg-icons/icon-exclaimation-mark.tsx

@@ -0,0 +1,7 @@
+export const IconExclaimationMark = ({ size = 16 }: { size: number }) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 16 16">
+      <path d="M8 0.879997L7.57 1.63L0.130005 14.5H15.87L8 0.879997ZM8.75 12H7.25V10.5H8.75V12ZM7.25 9.5V6H8.75V9.5H7.25Z" />
+    </svg>
+  );
+};

libs/ui-toolkit/src/components/icon/vega-icons/vega-icon-record.ts

@@ -11,6 +11,7 @@ import { IconCopy } from './svg-icons/icon-copy';
 import { IconCross } from './svg-icons/icon-cross';
 import { IconDeposit } from './svg-icons/icon-deposit';
 import { IconEdit } from './svg-icons/icon-edit';
+import { IconExclaimationMark } from './svg-icons/icon-exclaimation-mark';
 import { IconForum } from './svg-icons/icon-forum';
 import { IconGlobe } from './svg-icons/icon-globe';
 import { IconInfo } from './svg-icons/icon-info';
@@ -46,6 +47,7 @@ export enum VegaIconNames {
   CROSS = 'cross',
   DEPOSIT = 'deposit',
   EDIT = 'edit',
+  EXCLAIMATION_MARK = 'exclaimation-mark',
   FORUM = 'forum',
   GLOBE = 'globe',
   INFO = 'info',
@@ -85,6 +87,7 @@ export const VegaIconNameMap: Record<
   cross: IconCross,
   deposit: IconDeposit,
   edit: IconEdit,
+  'exclaimation-mark': IconExclaimationMark,
   forum: IconForum,
   globe: IconGlobe,
   info: IconInfo,

libs/ui-toolkit/src/components/icon/vega-icons/vega-icon.tsx

@@ -16,7 +16,7 @@ export const VegaIcon = ({ size = 16, name }: VegaIconProps) => {
   );
   const Element = VegaIconNameMap[name];
   return (
-    <span className={effectiveClassName}>
+    <span className={effectiveClassName} data-testid={`icon-${name}`}>
       <Element size={size} />
     </span>
   );

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

@@ -49,6 +49,7 @@ export * from './toast';
 export * from './toggle';
 export * from './tooltip';
 export * from './trading-button';
+export * from './trading-dropdown';
 export * from './traffic-light';
 export * from './vega-icons';
 export * from './vega-logo';

libs/ui-toolkit/src/components/nav-dropdown/dropdown-menu.stories.tsx

@@ -19,6 +19,7 @@ export const RadioItems = () => {
           <span>Open</span>
         </NavDropdownMenuTrigger>
         <NavDropdownMenuContent>
+          {/* eslint-disable no-console */}
           <NavDropdownMenuItem onSelect={() => console.log('minimize')}>
             Minimize window
           </NavDropdownMenuItem>
@@ -28,6 +29,7 @@ export const RadioItems = () => {
           <NavDropdownMenuItem onSelect={() => console.log('smaller')}>
             Smaller
           </NavDropdownMenuItem>
+          {/* eslint-enable */}
         </NavDropdownMenuContent>
       </NavDropdownMenu>
     </div>

libs/ui-toolkit/src/components/select/select.stories.tsx

@@ -46,6 +46,7 @@ RichDefaultSelect.args = {
   name: 'rich',
   placeholder: 'Select an option',
   onValueChange: (v: string) => {
+    // eslint-disable-next-line no-console
     console.log(v);
   },
   children: (

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

@@ -8,7 +8,7 @@ import type {
 import { Intent } from '../../utils/intent';
 
 type TradingButtonProps = {
-  size: 'large' | 'medium' | 'small';
+  size?: 'large' | 'medium' | 'small';
   intent?: Intent;
   children?: ReactNode;
   icon?: ReactNode;
@@ -24,7 +24,7 @@ const getClassName = (
   className?: string
 ) =>
   classNames(
-    'flex items-center justify-center rounded',
+    'flex gap-2 items-center justify-center rounded',
     // size
     {
       'h-12': !subLabel && size === 'large',

libs/ui-toolkit/src/components/trading-dropdown/actions-dropdown.tsx

@@ -0,0 +1,31 @@
+import { VegaIcon, VegaIconNames } from '../icon';
+import {
+  TradingDropdown,
+  TradingDropdownContent,
+  TradingDropdownTrigger,
+} from './trading-dropdown';
+
+export const ActionsDropdownTrigger = () => {
+  return (
+    <TradingDropdownTrigger
+      className='hover:bg-vega-light-200 dark:hover:bg-vega-dark-200 [&[aria-expanded="true"]]:bg-vega-light-200 dark:[&[aria-expanded="true"]]:bg-vega-dark-200 p-0.5 rounded-full'
+      data-testid="dropdown-menu"
+    >
+      <button type="button">
+        <VegaIcon name={VegaIconNames.KEBAB} />
+      </button>
+    </TradingDropdownTrigger>
+  );
+};
+
+type ActionMenuContentProps = React.ComponentProps<
+  typeof TradingDropdownContent
+>;
+
+export const ActionsDropdown = (props: ActionMenuContentProps) => {
+  return (
+    <TradingDropdown trigger={<ActionsDropdownTrigger />}>
+      <TradingDropdownContent {...props} side="bottom" align="end" />
+    </TradingDropdown>
+  );
+};

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

@@ -0,0 +1,2 @@
+export * from './trading-dropdown';
+export * from './actions-dropdown';

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

@@ -0,0 +1,38 @@
+import {
+  TradingDropdown,
+  TradingDropdownContent,
+  TradingDropdownTrigger,
+} from './trading-dropdown';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+describe('DropdownMenu', () => {
+  const text = 'Dropdown menu content';
+
+  // Upgrade from @radix-ui/react-dropdown-menu 0.1.6 to 2.0.2 renders
+  // dropdowns inline (rather than portals). Currently not using a portal
+  // will break the UI due to z-index issues
+  it('renders using a portal', async () => {
+    render(
+      <div className="test-wrapper">
+        <TradingDropdown
+          trigger={
+            <TradingDropdownTrigger>
+              <button>Trigger</button>
+            </TradingDropdownTrigger>
+          }
+        >
+          <TradingDropdownContent>
+            <p>{text}</p>
+          </TradingDropdownContent>
+        </TradingDropdown>
+      </div>
+    );
+
+    userEvent.click(screen.getByText(/trigger/i));
+    const contentElement = await screen.findByText(text);
+    expect(contentElement).toBeInTheDocument();
+    // if content is within .test-wrapper then its not been rendered in a portal
+    expect(contentElement.closest('.test-wrapper')).toBe(null);
+  });
+});