fix(4438): repoint testnet default data-node to n00

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

.github/workflows/add-ipfs-notes-to-release.yml

@@ -7,7 +7,7 @@ on:
 jobs:
   after-release:
     runs-on: ubuntu-22.04
-    timeout-minutes: 30
+    timeout-minutes: 45
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -30,18 +30,20 @@ jobs:
           username: ${{ secrets.DOCKERHUB_USERNAME }}
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
+      - name: Wait for publish to complete
+        uses: lewagon/wait-on-check-action@v1.3.1
+        with:
+          ref: ${{ github.event.release.tag_name }}
+          check-name: '(CD) publish dist / trading'
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          wait-interval: 10
+
       - name: resolve ipfs hashes for release
         run: |
           echo "Name: ${{ github.event.release.name }}"
           echo "Description: ${{ github.event.release.body }}"
           echo "Tag: ${{ github.event.release.tag_name }}"
-          commit="$(git rev-list -n 1 ${{ github.event.release.tag_name }})"
-          echo "Commit: $commit"
-          until docker pull vegaprotocol/trading:$commit; do
-            echo "Image not pushed yet, waiting 60 seconds"
-            sleep 60
-          done
-          docker run --rm vegaprotocol/trading:$commit cat /ipfs-hash > ipfs-hash
+          docker run --rm vegaprotocol/trading:mainnet cat /ipfs-hash > ipfs-hash
           curl -L https://dist.ipfs.tech/kubo/v0.20.0/kubo_v0.20.0_linux-amd64.tar.gz -o kubo.tgz
           tar -xzf kubo.tgz
           export PATH="$PATH:$PWD/kubo"

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

@@ -120,6 +120,15 @@ jobs:
       preview_explorer: ${{ env.PREVIEW_EXPLORER }}
       preview_tools: ${{ env.PREVIEW_TOOLS }}
 
+  console-e2e:
+    needs: lint-test-build
+    name: '(CI) console python'
+    uses: ./.github/workflows/console-test-run.yml
+    secrets: inherit
+    if: ${{ contains(fromJSON(needs.lint-test-build.outputs.projects), 'trading') && github.event_name == 'pull_request' }}
+    with:
+      github-sha: ${{ github.event.pull_request.head.sha || github.sha }}
+
   cypress:
     needs: lint-test-build
     name: '(CI) cypress'

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

@@ -1,55 +1,138 @@
-name: console-test-run
+name: (CI) Console tests
+
 on:
   workflow_call:
     inputs:
       github-sha:
         required: true
         type: string
+
 jobs:
-  console-test:
-    timeout-minutes: 5
-    runs-on: self-hosted-runner
+  run-tests:
+    name: run-tests
+    runs-on: ubuntu-22.04
+    timeout-minutes: 25
     steps:
+      #----------------------------------------------
+      #       check-out frontend-monorepo
+      #----------------------------------------------
+      - name: Checkout console test repo
+        uses: actions/checkout@v3
+        with:
+          ref: ${{ inputs.github-sha }}
+      #----------------------------------------------
+      #       cache node modules
+      #----------------------------------------------
+      - name: Cache node modules
+        id: cache
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-cache-node-modules-${{ hashFiles('yarn.lock') }}
+          # comment out "restore-keys" if you need to rebuild yarn from 0
+          restore-keys: |
+            ${{ runner.os }}-cache-node-modules-
+      #----------------------------------------------
+      #       setup node
+      #----------------------------------------------
+      - name: Setup node
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          # https://stackoverflow.com/questions/61010294/how-to-cache-yarn-packages-in-github-actions
+          cache: yarn
+      #----------------------------------------------
+      #       install deps if cache missing
+      #----------------------------------------------
+      - name: yarn install
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: yarn install --pure-lockfile
+      #----------------------------------------------
+      #       build trading
+      #----------------------------------------------
+      - name: Build affected spec
+        run: |
+          yarn env-cmd -f ./apps/trading/.env.stagnet1 yarn nx export trading
+      #----------------------------------------------
+      #       run trading server
+      #----------------------------------------------
+      - name: Run trading server
+        run: |
+          docker run -d -p 80:4200 -v $PWD/docker/nginx.conf:/etc/nginx/conf.d/default.conf -v $PWD/dist/apps/trading/exported:/usr/share/nginx/html nginx:1.23-alpine@sha256:6318314189b40e73145a48060bff4783a116c34cc7241532d0d94198fb2c9629
+          sleep 5
+          docker ps
+      #----------------------------------------------
+      #       check if container persists between runs
+      #----------------------------------------------
+      - name: Check server
+        run: |
+          docker ps
+      #----------------------------------------------
+      #       check-out tests repo
+      #----------------------------------------------
       - name: Checkout console test repo
         uses: actions/checkout@v3
         with:
           repository: vegaprotocol/console-test
           path: './console-test'
-
-      - name: Set up Python
+      #----------------------------------------------
+      #       set-up python
+      #----------------------------------------------
+      - name: Set up python
+        id: setup-python
         uses: actions/setup-python@v4
         with:
           python-version: '3.10.11'
-
+      #----------------------------------------------
+      #  -----  install & configure poetry  -----
+      #----------------------------------------------
       - name: Install Poetry
         uses: snok/install-poetry@v1
-
+        with:
+          virtualenvs-create: true
+          virtualenvs-in-project: true
+          virtualenvs-path: console-test/.venv
+      #----------------------------------------------
+      #       load cached venv if cache exists
+      #----------------------------------------------
+      - name: Load cached venv
+        id: cached-poetry-dependencies
+        uses: actions/cache@v3
+        with:
+          path: console-test/.venv
+          key: venv-${{ runner.os }}-${{ steps.setup-python.outputs.python-version }}-${{ hashFiles('**/poetry.lock') }}
+      #----------------------------------------------
+      # install dependencies if cache does not exist
+      #----------------------------------------------
       - name: Install dependencies
-        run: |
-          poetry install --no-root
         working-directory: ./console-test
-
-      - name: load Binaries
-        run: |
-          poetry run python -m vega_sim.tools.load_binaries
+        if: steps.cached-poetry-dependencies.outputs.cache-hit != 'true'
+        run: poetry install --no-interaction --no-root
+      #----------------------------------------------
+      # install vega binaries
+      #----------------------------------------------
+      - name: Install vega binaries
         working-directory: ./console-test
-
-      - name: pull console
-        run: |
-          poetry run docker pull ghcr.io/vegaprotocol/frontend/trading:${{ inputs.github-sha }}
-
-      - name: Update container_name in config.py
-        run: |
-          sed -i "s/container_name = \".*\"/container_name = \"vegaprotocol\/frontend\/trading:${{ inputs.github-sha }}\"/g" config.py
-
+        run: poetry run python -m vega_sim.tools.load_binaries --force
+      #----------------------------------------------
+      # install playwright
+      #----------------------------------------------
       - name: install playwright
         run: poetry run playwright install
         working-directory: ./console-test
-
-      - name: run tests
-        run: poetry run pytest --numprocesses auto
+      #----------------------------------------------
+      # run tests
+      #----------------------------------------------
+      - name: Run tests
         working-directory: ./console-test
-
+        run: poetry run pytest --numprocesses auto
+      - name: Check files
+        run: |
+          ls -al .
+          ls -al console-test
+      #----------------------------------------------
+      # upload traces
+      #----------------------------------------------
       - name: Upload Playwright Trace
         uses: actions/upload-artifact@v3
         if: always()

.github/workflows/publish-dist.yml

@@ -36,7 +36,7 @@ jobs:
           echo IS_PR=true >> $GITHUB_ENV
 
       - name: Is mainnet release
-        if: ${{ contains(github.ref, 'release/mainnnet') && !contains(github.ref, 'mirror') }}
+        if: ${{ contains(github.ref, 'release/mainnet') && !contains(github.ref, 'mirror') }}
         run: |
           echo IS_MAINNET_RELEASE=true >> $GITHUB_ENV
 
@@ -118,8 +118,12 @@ jobs:
           elif [ "${{ matrix.app }}" = "ui-toolkit" ]; then
             NODE_ENV=production yarn nx run ui-toolkit:build-storybook
             DIST_LOCATION=dist/storybook/ui-toolkit
+          elif [ "${{ matrix.app }}" = "static" ]; then
+            yarn nx build static || (yarn install && yarn nx build static)
           else
             $envCmd yarn nx build ${{ matrix.app }} || (yarn install && $envCmd yarn nx build ${{ matrix.app }})
+          fi
+          if [[ -z "$DIST_LOCATION" ]]; then
             DIST_LOCATION=dist/apps/${{ matrix.app }}
           fi
           mv $DIST_LOCATION dist-result

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

@@ -7,7 +7,11 @@ context('Validator page', { tags: '@smoke' }, function () {
     it('should be able to see validator tiles', function () {
       cy.getNodes().then((nodes) => {
         nodes.forEach((node) => {
-          cy.get(`[validator-id="${node.id}"]`).should('be.visible');
+          if (node.rankingScore.performanceScore > 0) {
+            cy.get(`[validator-id="${node.id}"]`).should('be.visible');
+          } else {
+            cy.get(`[validator-id="${node.id}"]`).should('not.exist');
+          }
         });
       });
     });

apps/explorer/src/app/routes/validators/Nodes.graphql

@@ -15,6 +15,9 @@ query ExplorerNodes {
         stakedByDelegates
         stakedTotal
         pendingStake
+        rankingScore {
+          performanceScore
+        }
         epochData {
           total
           offline

apps/explorer/src/app/routes/validators/__generated__/Nodes.ts

@@ -6,7 +6,7 @@ const defaultOptions = {} as const;
 export type ExplorerNodesQueryVariables = Types.Exact<{ [key: string]: never; }>;
 
 
-export type ExplorerNodesQuery = { __typename?: 'Query', nodesConnection: { __typename?: 'NodesConnection', edges?: Array<{ __typename?: 'NodeEdge', node: { __typename?: 'Node', id: string, name: string, infoUrl: string, avatarUrl?: string | null, pubkey: string, tmPubkey: string, ethereumAddress: string, location: string, status: Types.NodeStatus, stakedByOperator: string, stakedByDelegates: string, stakedTotal: string, pendingStake: string, epochData?: { __typename?: 'EpochData', total: number, offline: number, online: number } | null } } | null> | null } };
+export type ExplorerNodesQuery = { __typename?: 'Query', nodesConnection: { __typename?: 'NodesConnection', edges?: Array<{ __typename?: 'NodeEdge', node: { __typename?: 'Node', id: string, name: string, infoUrl: string, avatarUrl?: string | null, pubkey: string, tmPubkey: string, ethereumAddress: string, location: string, status: Types.NodeStatus, stakedByOperator: string, stakedByDelegates: string, stakedTotal: string, pendingStake: string, rankingScore: { __typename?: 'RankingScore', performanceScore: string }, epochData?: { __typename?: 'EpochData', total: number, offline: number, online: number } | null } } | null> | null } };
 
 
 export const ExplorerNodesDocument = gql`
@@ -27,6 +27,9 @@ export const ExplorerNodesDocument = gql`
         stakedByDelegates
         stakedTotal
         pendingStake
+        rankingScore {
+          performanceScore
+        }
         epochData {
           total
           offline

apps/explorer/src/app/routes/validators/validators-page.tsx

@@ -91,7 +91,15 @@ export const ValidatorsPage = () => {
   const { data: tmData } = useTendermintValidators(5000);
   const { data, loading, error, refetch } = useExplorerNodesQuery();
 
-  const validators = compact(data?.nodesConnection.edges?.map((e) => e?.node));
+  const validators = compact(
+    data?.nodesConnection.edges
+      ?.map((e) => e?.node)
+      .filter(
+        (node) =>
+          node?.rankingScore?.performanceScore &&
+          new BigNumber(node.rankingScore.performanceScore).isGreaterThan(0)
+      )
+  );
 
   // voting power
   const powers = compact(tmData?.result.validators).map(

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

@@ -218,17 +218,33 @@ describe(
       getProposalInformationFromTable('Tokens for proposal')
         .should('have.text', (1).toFixed(2))
         .and('be.visible');
+      navigateTo(navigation.proposals);
+      cy.get<testFreeformProposal>('@rawProposal').then((rawProposal) => {
+        getProposalFromTitle(rawProposal.rationale.title).within(() => {
+          // 3002-PROP-021
+          cy.getByTestId('user-voted-yes').should('exist');
+          cy.getByTestId(viewProposalButton).click();
+        });
+      });
       cy.getByTestId(changeVoteButton).should('be.visible').click();
       voteForProposal('against');
       cy.getByTestId(proposalVoteProgressAgainstPercentage)
         .contains('100.00%')
         .and('be.visible');
+      cy.getByTestId(voteBreakdownToggle).click();
       getProposalInformationFromTable('Tokens against proposal')
         .should('have.text', (1).toFixed(2))
         .and('be.visible');
       getProposalInformationFromTable('Number of voting parties')
         .should('have.text', '1')
         .and('be.visible');
+      navigateTo(navigation.proposals);
+      cy.get<testFreeformProposal>('@rawProposal').then((rawProposal) => {
+        getProposalFromTitle(rawProposal.rationale.title).within(() => {
+          cy.getByTestId('user-voted-no').should('exist');
+          cy.getByTestId(viewProposalButton).click();
+        });
+      });
     });
 
     // 3001-VOTE-042, 3001-VOTE-057, 3001-VOTE-058, 3001-VOTE-059, 3001-VOTE-060

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

@@ -26,6 +26,8 @@ const votesTable = 'votes-table';
 const openProposals = 'open-proposals';
 const proposalVoteProgressForPercentage =
   'vote-progress-indicator-percentage-for';
+const majorityVoteReached = 'majority-reached';
+const minParticipationReached = 'participation-reached';
 const proposalTimeout = { timeout: 8000 };
 
 context(
@@ -72,7 +74,7 @@ context(
       });
     });
 
-    // 3001-VOTE-046 3001-VOTE-044 3001-VOTE-074 3001-VOTE-074
+    // 3001-VOTE-020 3001-VOTE-021 3001-VOTE-046 3001-VOTE-044 3001-VOTE-074 3001-VOTE-074
     it('Able to enact proposal by voting', function () {
       const proposalTitle = 'Add New proposal with short enactment';
       const proposalTx = createUpdateNetworkProposalTxBody();
@@ -85,10 +87,18 @@ context(
         cy.contains(proposalTitle)
           .parentsUntil(proposalListItem)
           .last()
-          .within(() => cy.getByTestId(viewProposalButton).click());
+          .within(() => {
+            // 3001-VOTE-019 time to vote is highlighted red
+            cy.getByTestId('vote-details')
+              .find('span')
+              .should('have.class', 'text-vega-pink');
+            cy.getByTestId(viewProposalButton).click();
+          });
       });
       cy.getByTestId(proposalStatus).should('have.text', 'Open');
       voteForProposal('for');
+      cy.getByTestId(majorityVoteReached).should('exist');
+      cy.getByTestId(minParticipationReached).should('exist');
       cy.getByTestId(proposalStatus, proposalTimeout)
         .should('have.text', 'Passed')
         .then(() => {
@@ -104,6 +114,14 @@ context(
       cy.getByTestId(proposalVoteProgressForPercentage)
         .contains('100.00%')
         .and('be.visible');
+      navigateTo(navigation.proposals);
+      cy.contains(proposalTitle)
+        .parentsUntil(proposalListItem)
+        .last()
+        .within(() => {
+          cy.getByTestId(majorityVoteReached).should('exist');
+          cy.getByTestId(minParticipationReached).should('exist');
+        });
     });
 
     // 3001-VOTE-047

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

@@ -49,8 +49,8 @@ describe('Governance flow for proposal list', { tags: '@slow' }, function () {
     navigateTo(navigation.proposals);
   });
 
+  // 3001-VOTE-018
   it('Newly created proposals list - proposals closest to closing date appear higher in list', function () {
-    // 3001-VOTE-005
     const proposalDays = [364, 50, 2];
     for (let index = 0; index < proposalDays.length; index++) {
       goToMakeNewProposal(governanceProposalType.RAW);
@@ -120,16 +120,24 @@ describe('Governance flow for proposal list', { tags: '@slow' }, function () {
     submitUniqueRawProposal({ proposalTitle: proposalTitle });
     getProposalFromTitle(proposalTitle).within(() => {
       // 3001-VOTE-039
-      cy.getByTestId(voteStatus).should(
+      cy.getByTestId('participation-not-reached').should(
         'have.text',
-        'Participation not reached'
+        'Min. participation not reached'
       );
       cy.getByTestId(viewProposalButton).click();
     });
     voteForProposal('for');
     navigateTo(navigation.proposals);
     getProposalFromTitle(proposalTitle).within(() => {
-      cy.getByTestId(voteStatus).should('have.text', 'Set to pass');
+      cy.getByTestId(voteStatus).should(
+        'have.text',
+        'Currently expected to  pass'
+      );
+      cy.getByTestId('user-voted-yes').should('exist');
+      cy.getByTestId('participation-reached').should(
+        'have.text',
+        'Min. participation reached'
+      );
       cy.getByTestId(viewProposalButton).click();
     });
     cy.getByTestId(voteBreakDownToggle).click();

apps/governance-e2e/src/integration/flow/token-association-flow.cy.ts

@@ -351,6 +351,12 @@ context(
         );
         stakingPageDisassociateAllTokens();
       });
+
+      it('Able to associate over 1 million tokens', function () {
+        cy.get(ethWalletAssociateButton).click();
+        stakingPageAssociateTokens('2000000', { approve: true });
+        stakingPageDisassociateAllTokens();
+      });
     });
   }
 );

apps/governance-e2e/src/integration/view/proposal.cy.ts

@@ -17,6 +17,7 @@ const governanceDocsUrl = 'https://vega.xyz/governance';
 const networkUpgradeProposalListItem = 'protocol-upgrade-proposals-list-item';
 const closedProposals = 'closed-proposals';
 const closedProposalToggle = 'closed-proposals-toggle-networkUpgrades';
+const protocolUpgradeTime = 'protocol-upgrade-time';
 
 context(
   'Governance Page - verify elements on page',
@@ -174,6 +175,7 @@ context(
       });
     });
 
+    // 3009-NTWU-003 3009-NTWU-004 3009-NTWU-007
     it('should see details of network upgrade proposal', function () {
       mockNetworkUpgradeProposal();
       navigateTo(navigation.proposals);
@@ -228,6 +230,7 @@ context(
       cy.getByTestId(closedProposalToggle).should('not.exist');
     });
 
+    // 3009-NTWU-001 3009-NTWU-002 3009-NTWU-006 3009-NTWU-009
     it('should display network upgrade banner with estimate', function () {
       mockNetworkUpgradeProposal();
       cy.visit('/');
@@ -259,10 +262,18 @@ context(
         .as('displayedEstimate');
       cy.get('@displayedEstimate').then((estimateText) => {
         // Estimated time should automatically update every second
-        cy.getByTestId('protocol-upgrade-time')
+        cy.getByTestId(protocolUpgradeTime)
           .invoke('text')
           .should('not.eq', estimateText);
       });
+      // time estimate on proposal detail
+      cy.getByTestId('protocol-upgrade-proposal').within(() => {
+        cy.get('@displayedEstimate').then((estimateText) => {
+          cy.getByTestId(protocolUpgradeTime)
+            .invoke('text')
+            .should('not.eq', estimateText);
+        });
+      });
     });
   }
 );

apps/governance/.env.testnet

@@ -1,7 +1,7 @@
 # App configuration variables
 NX_VEGA_ENV=TESTNET
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/fairground/vegawallet-fairground.toml
-NX_VEGA_URL=https://api.n07.testnet.vega.xyz/graphql
+NX_VEGA_URL=https://api.n00.testnet.vega.xyz/graphql
 NX_VEGA_NETWORKS='{"DEVNET":"https://dev.governance.vega.xyz","TESTNET":"https://governance.fairground.wtf","MAINNET":"https://governance.vega.xyz"}'
 NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
@@ -12,11 +12,11 @@ NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_DELEGATIONS_PAGINATION=50
 NX_TRANCHES_SERVICE_URL=https://tranches-testnet-k8s.ops.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
-NX_VEGA_REST_URL=https://api.n07.testnet.vega.xyz/api/v2/
+NX_VEGA_REST_URL=https://api.n00.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
 
 # Cosmic elevator flags
-NX_SUCCESSOR_MARKETS=true
+NX_SUCCESSOR_MARKETS=true

apps/governance/src/components/json-diff/index.ts

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

apps/governance/src/components/json-diff/json-diff.spec.tsx

@@ -0,0 +1,30 @@
+import { render, screen, cleanup } from '@testing-library/react';
+import { JsonDiff } from './json-diff';
+
+describe('JsonDiff', () => {
+  afterEach(cleanup);
+
+  it('renders without crashing', () => {
+    render(<JsonDiff left={{}} right={{}} />);
+    expect(screen.getByTestId('json-diff')).toBeInTheDocument();
+  });
+
+  it('shows the correct message when both objects are identical', () => {
+    render(<JsonDiff left={{}} right={{}} />);
+    expect(screen.getByText('Data is identical')).toBeInTheDocument();
+  });
+
+  it('does not show the "identical" message when both objects are not identical', () => {
+    render(
+      <JsonDiff
+        left={{
+          name: 'test',
+        }}
+        right={{
+          name: 'test2',
+        }}
+      />
+    );
+    expect(screen.queryByText('Data is identical')).not.toBeInTheDocument();
+  });
+});

apps/governance/src/components/json-diff/json-diff.tsx

@@ -0,0 +1,46 @@
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { formatters, create } from 'jsondiffpatch';
+import 'jsondiffpatch/dist/formatters-styles/html.css';
+import 'jsondiffpatch/dist/formatters-styles/annotated.css';
+
+export type JsonValue =
+  | string
+  | number
+  | boolean
+  | null
+  | JsonValue[]
+  | { [key: string]: JsonValue };
+
+interface JsonDiffProps {
+  left: JsonValue;
+  right: JsonValue;
+  objectHash?: (obj: unknown) => string | undefined;
+}
+
+export const JsonDiff = ({ right, left, objectHash }: JsonDiffProps) => {
+  const { t } = useTranslation();
+  const [html, setHtml] = useState<string | undefined>();
+
+  useEffect(() => {
+    const delta = create({
+      objectHash,
+    }).diff(left, right);
+
+    if (delta) {
+      const deltaHtml = formatters.html.format(delta, left);
+
+      formatters.html.hideUnchanged();
+
+      setHtml(deltaHtml);
+    } else {
+      setHtml(undefined);
+    }
+  }, [right, left, objectHash]);
+
+  return html ? (
+    <div data-testid="json-diff" dangerouslySetInnerHTML={{ __html: html }} />
+  ) : (
+    <p data-testid="json-diff">{t('dataIsIdentical')}</p>
+  );
+};

apps/governance/src/i18n/translations/dev.json

@@ -853,5 +853,7 @@
   "consensusNodes": "consensus nodes",
   "activeNodes": "active nodes",
   "Estimated time to upgrade": "Estimated time to upgrade",
-  "Upgraded at": "Upgraded at"
+  "Upgraded at": "Upgraded at",
+  "dataIsIdentical": "Data is identical",
+  "updatesToMarket": "Updates to market"
 }

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

@@ -0,0 +1 @@
+export * from './proposal-market-changes';

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

@@ -0,0 +1,91 @@
+import { render, fireEvent } from '@testing-library/react';
+import {
+  ProposalMarketChanges,
+  applyImmutableKeysFromEarlierVersion,
+} from './proposal-market-changes';
+import type { JsonValue } from '../../../../components/json-diff';
+
+describe('applyImmutableKeysFromEarlierVersion', () => {
+  it('returns an empty object if any argument is not an object or null', () => {
+    const earlierVersion: JsonValue = null;
+    const updatedVersion: JsonValue = null;
+    expect(
+      applyImmutableKeysFromEarlierVersion(earlierVersion, updatedVersion)
+    ).toEqual({});
+  });
+
+  it('overrides updatedVersion with values from earlierVersion for immutable keys', () => {
+    const earlierVersion: JsonValue = {
+      decimalPlaces: 2,
+      positionDecimalPlaces: 3,
+      instrument: {
+        name: 'Instrument1',
+        future: {
+          settlementAsset: 'Asset1',
+        },
+      },
+    };
+
+    const updatedVersion: JsonValue = {
+      decimalPlaces: 3, // should be overridden by 2
+      positionDecimalPlaces: 4, // should be overridden by 3
+      instrument: {
+        name: 'Instrument2', // should be overridden by 'Instrument1'
+        future: {
+          settlementAsset: 'Asset2', // should be overridden by 'Asset1'
+        },
+      },
+    };
+
+    const expected: JsonValue = {
+      decimalPlaces: 2,
+      positionDecimalPlaces: 3,
+      instrument: {
+        name: 'Instrument1',
+        future: {
+          settlementAsset: 'Asset1',
+        },
+      },
+    };
+
+    expect(
+      applyImmutableKeysFromEarlierVersion(earlierVersion, updatedVersion)
+    ).toEqual(expected);
+  });
+});
+
+describe('ProposalMarketChanges', () => {
+  it('renders correctly', () => {
+    const { getByTestId } = render(
+      <ProposalMarketChanges
+        originalProposal={{}}
+        latestEnactedProposal={{}}
+        updatedProposal={{}}
+      />
+    );
+    expect(getByTestId('proposal-market-changes')).toBeInTheDocument();
+  });
+
+  it('JsonDiff is not visible when showChanges is false', () => {
+    const { queryByTestId } = render(
+      <ProposalMarketChanges
+        originalProposal={{}}
+        latestEnactedProposal={{}}
+        updatedProposal={{}}
+      />
+    );
+    expect(queryByTestId('json-diff')).not.toBeInTheDocument();
+  });
+
+  it('JsonDiff is visible when showChanges is true', async () => {
+    const { getByTestId } = render(
+      <ProposalMarketChanges
+        originalProposal={{}}
+        latestEnactedProposal={{}}
+        updatedProposal={{}}
+      />
+    );
+    fireEvent.click(getByTestId('proposal-market-changes-toggle'));
+    expect(getByTestId('json-diff')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,86 @@
+import cloneDeep from 'lodash/cloneDeep';
+import set from 'lodash/set';
+import get from 'lodash/get';
+import { JsonDiff } from '../../../../components/json-diff';
+import { useTranslation } from 'react-i18next';
+import { useState } from 'react';
+import { CollapsibleToggle } from '../../../../components/collapsible-toggle';
+import { SubHeading } from '../../../../components/heading';
+import type { JsonValue } from '../../../../components/json-diff';
+
+const immutableKeys = [
+  'decimalPlaces',
+  'positionDecimalPlaces',
+  'instrument.name',
+  'instrument.future.settlementAsset',
+];
+
+export const applyImmutableKeysFromEarlierVersion = (
+  earlierVersion: JsonValue,
+  updatedVersion: JsonValue
+) => {
+  if (
+    typeof earlierVersion !== 'object' ||
+    earlierVersion === null ||
+    typeof updatedVersion !== 'object' ||
+    updatedVersion === null
+  ) {
+    // If either version is not an object or is null, return null or throw an error
+    return {};
+  }
+
+  const updatedVersionCopy = cloneDeep(updatedVersion);
+
+  // Overwrite the immutable keys in the updatedVersionCopy with the earlier values
+  immutableKeys.forEach((key) => {
+    set(updatedVersionCopy, key, get(earlierVersion, key));
+  });
+
+  return updatedVersionCopy;
+};
+
+interface ProposalMarketChangesProps {
+  originalProposal: JsonValue;
+  latestEnactedProposal: JsonValue | undefined;
+  updatedProposal: JsonValue;
+}
+
+export const ProposalMarketChanges = ({
+  originalProposal,
+  latestEnactedProposal,
+  updatedProposal,
+}: ProposalMarketChangesProps) => {
+  const { t } = useTranslation();
+  const [showChanges, setShowChanges] = useState(false);
+
+  return (
+    <section data-testid="proposal-market-changes">
+      <CollapsibleToggle
+        toggleState={showChanges}
+        setToggleState={setShowChanges}
+        dataTestId={'proposal-market-changes-toggle'}
+      >
+        <SubHeading title={t('updatesToMarket')} />
+      </CollapsibleToggle>
+
+      {showChanges && (
+        <div className="mb-6">
+          <JsonDiff
+            left={latestEnactedProposal || originalProposal}
+            right={
+              latestEnactedProposal
+                ? applyImmutableKeysFromEarlierVersion(
+                    latestEnactedProposal,
+                    updatedProposal
+                  )
+                : applyImmutableKeysFromEarlierVersion(
+                    originalProposal,
+                    updatedProposal
+                  )
+            }
+          />
+        </div>
+      )}
+    </section>
+  );
+};

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

@@ -17,6 +17,7 @@ import type { MarketInfoWithData } from '@vegaprotocol/markets';
 import type { AssetQuery } from '@vegaprotocol/assets';
 import { removePaginationWrapper } from '@vegaprotocol/utils';
 import { ProposalState } from '@vegaprotocol/types';
+import { ProposalMarketChanges } from '../proposal-market-changes';
 import type { NetworkParamsResult } from '@vegaprotocol/network-parameters';
 
 export enum ProposalType {
@@ -34,6 +35,10 @@ export interface ProposalProps {
   assetData?: AssetQuery | null;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   restData: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  originalMarketProposalRestData?: any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  mostRecentlyEnactedAssociatedMarketProposal?: any;
 }
 
 export const Proposal = ({
@@ -42,6 +47,8 @@ export const Proposal = ({
   restData,
   newMarketData,
   assetData,
+  originalMarketProposalRestData,
+  mostRecentlyEnactedAssociatedMarketProposal,
 }: ProposalProps) => {
   const { t } = useTranslation();
 
@@ -154,6 +161,24 @@ export const Proposal = ({
           </div>
         )}
 
+        {proposal.terms.change.__typename === 'UpdateMarket' && (
+          <div className="mb-4">
+            <ProposalMarketChanges
+              originalProposal={
+                originalMarketProposalRestData?.data?.proposal?.terms?.newMarket
+                  ?.changes || {}
+              }
+              latestEnactedProposal={
+                mostRecentlyEnactedAssociatedMarketProposal?.node?.proposal
+                  ?.terms?.updateMarket?.changes || {}
+              }
+              updatedProposal={
+                restData?.data?.proposal?.terms?.updateMarket?.changes || {}
+              }
+            />
+          </div>
+        )}
+
         {(proposal.terms.change.__typename === 'NewAsset' ||
           proposal.terms.change.__typename === 'UpdateAsset') &&
           asset && (

apps/governance/src/routes/proposals/proposal/proposal-container.tsx

@@ -1,5 +1,5 @@
 import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
 
 import { Proposal } from '../components/proposal';
@@ -16,7 +16,12 @@ import {
 } from '@vegaprotocol/network-parameters';
 
 export const ProposalContainer = () => {
+  const [
+    mostRecentlyEnactedAssociatedMarketProposal,
+    setMostRecentlyEnactedAssociatedMarketProposal,
+  ] = useState(undefined);
   const params = useParams<{ proposalId: string }>();
+
   const {
     params: networkParams,
     loading: networkParamsLoading,
@@ -37,9 +42,11 @@ export const ProposalContainer = () => {
     NetworkParams.governance_proposal_updateNetParam_requiredMajority,
     NetworkParams.governance_proposal_freeform_requiredMajority,
   ]);
+
   const {
-    state: { data: restData },
+    state: { data: restData, loading: restLoading, error: restError },
   } = useFetch(`${ENV.rest}governance?proposalId=${params.proposalId}`);
+
   const { data, loading, error, refetch } = useProposalQuery({
     fetchPolicy: 'network-only',
     errorPolicy: 'ignore',
@@ -47,6 +54,35 @@ export const ProposalContainer = () => {
     skip: !params.proposalId,
   });
 
+  const {
+    state: {
+      data: originalMarketProposalRestData,
+      loading: originalMarketProposalRestLoading,
+      error: originalMarketProposalRestError,
+    },
+  } = useFetch(
+    `${ENV.rest}governance?proposalId=${
+      data?.proposal?.terms.change.__typename === 'UpdateMarket' &&
+      data?.proposal.terms.change.marketId
+    }`,
+    undefined,
+    true,
+    data?.proposal?.terms.change.__typename !== 'UpdateMarket'
+  );
+
+  const {
+    state: {
+      data: previouslyEnactedMarketProposalsRestData,
+      loading: previouslyEnactedMarketProposalsRestLoading,
+      error: previouslyEnactedMarketProposalsRestError,
+    },
+  } = useFetch(
+    `${ENV.rest}governances?proposalState=STATE_ENACTED&proposalType=TYPE_UPDATE_MARKET`,
+    undefined,
+    true,
+    data?.proposal?.terms.change.__typename !== 'UpdateMarket'
+  );
+
   const {
     data: newMarketData,
     loading: newMarketLoading,
@@ -79,6 +115,39 @@ export const ProposalContainer = () => {
     ),
   });
 
+  useEffect(() => {
+    if (
+      previouslyEnactedMarketProposalsRestData &&
+      data?.proposal?.terms.change.__typename === 'UpdateMarket'
+    ) {
+      const change = data?.proposal?.terms?.change as { marketId: string };
+
+      const filteredProposals =
+        // @ts-ignore rest data is not typed
+        previouslyEnactedMarketProposalsRestData.connection.edges.filter(
+          // @ts-ignore rest data is not typed
+          ({ node }) =>
+            node?.proposal?.terms?.updateMarket?.marketId === change.marketId
+        );
+
+      const sortedProposals = filteredProposals.sort(
+        // @ts-ignore rest data is not typed
+        (a, b) =>
+          new Date(a?.node?.terms?.enactmentTimestamp).getTime() -
+          new Date(b?.node?.terms?.enactmentTimestamp).getTime()
+      );
+
+      setMostRecentlyEnactedAssociatedMarketProposal(
+        sortedProposals[sortedProposals.length - 1]
+      );
+    }
+  }, [
+    previouslyEnactedMarketProposalsRestData,
+    params.proposalId,
+    data?.proposal?.terms.change.__typename,
+    data?.proposal?.terms.change,
+  ]);
+
   useEffect(() => {
     const interval = setInterval(refetch, 2000);
     return () => clearInterval(interval);
@@ -87,14 +156,39 @@ export const ProposalContainer = () => {
   return (
     <AsyncRenderer
       loading={
-        loading || newMarketLoading || assetLoading || networkParamsLoading
+        loading ||
+        newMarketLoading ||
+        assetLoading ||
+        networkParamsLoading ||
+        (restLoading ? (restLoading as boolean) : false) ||
+        (originalMarketProposalRestLoading
+          ? (originalMarketProposalRestLoading as boolean)
+          : false) ||
+        (previouslyEnactedMarketProposalsRestLoading
+          ? (previouslyEnactedMarketProposalsRestLoading as boolean)
+          : false)
+      }
+      error={
+        error ||
+        newMarketError ||
+        assetError ||
+        restError ||
+        originalMarketProposalRestError ||
+        previouslyEnactedMarketProposalsRestError ||
+        networkParamsError
       }
-      error={error || newMarketError || assetError || networkParamsError}
       data={{
         ...data,
         ...networkParams,
         ...(newMarketData ? { newMarketData } : {}),
         ...(assetData ? { assetData } : {}),
+        ...(restData ? { restData } : {}),
+        ...(originalMarketProposalRestData
+          ? { originalMarketProposalRestData }
+          : {}),
+        ...(previouslyEnactedMarketProposalsRestData
+          ? { previouslyEnactedMarketProposalsRestData }
+          : {}),
       }}
     >
       {data?.proposal ? (
@@ -104,6 +198,10 @@ export const ProposalContainer = () => {
           restData={restData}
           newMarketData={newMarketData}
           assetData={assetData}
+          originalMarketProposalRestData={originalMarketProposalRestData}
+          mostRecentlyEnactedAssociatedMarketProposal={
+            mostRecentlyEnactedAssociatedMarketProposal
+          }
         />
       ) : (
         <ProposalNotFound />

apps/governance/src/routes/staking/associate/wallet-associate.tsx

@@ -8,9 +8,10 @@ import { TxState } from '../../../hooks/transaction-reducer';
 import { useTransaction } from '../../../hooks/use-transaction';
 import { BigNumber } from '../../../lib/bignumber';
 import { AssociateInfo } from './associate-info';
-import { removeDecimal, toBigNum } from '@vegaprotocol/utils';
+import { toBigNum } from '@vegaprotocol/utils';
 import type { EthereumConfig } from '@vegaprotocol/web3';
 import { useBalances } from '../../../lib/balances/balances-store';
+import { MaxUint256 } from '@ethersproject/constants';
 
 export const WalletAssociate = ({
   perform,
@@ -42,7 +43,7 @@ export const WalletAssociate = ({
   } = useTransaction(() => {
     return token.approve(
       ethereumConfig.staking_bridge_contract.address,
-      removeDecimal('1000000', decimals).toString()
+      MaxUint256.toString()
     );
   });
 

apps/governance/src/styles.css

@@ -62,7 +62,7 @@
   cursor: pointer;
 }
 
-/* Styles required to (effectively) un-override the 
+/* Styles required to (effectively) un-override the
  * reset styles so that the Proposal description fields
  * render as you'd expect them to.
  *
@@ -97,3 +97,33 @@
 .react-markdown-container ul li {
   list-style: circle;
 }
+
+.jsondiffpatch-delta,
+.jsondiffpatch-delta pre {
+  font-family: 'Roboto Mono', monospace !important;
+}
+
+.jsondiffpatch-delta pre {
+  padding: 0 0.25em !important;
+}
+
+.jsondiffpatch-added .jsondiffpatch-property-name,
+.jsondiffpatch-added .jsondiffpatch-value pre,
+.jsondiffpatch-modified .jsondiffpatch-right-value pre,
+.jsondiffpatch-textdiff-added {
+  background: theme(colors.vega.green[650]) !important;
+  color: theme(colors.white) !important;
+}
+
+.jsondiffpatch-deleted .jsondiffpatch-property-name,
+.jsondiffpatch-deleted pre,
+.jsondiffpatch-modified .jsondiffpatch-left-value pre,
+.jsondiffpatch-textdiff-deleted {
+  background: theme(colors.vega.pink[650]) !important;
+  color: theme(colors.white) !important;
+}
+
+.jsondiffpatch-moved .jsondiffpatch-moved-destination {
+  background: theme(colors.vega.yellow[350]) !important;
+  color: theme(colors.vega.dark[200]) !important;
+}

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

@@ -17,7 +17,10 @@ import {
   usePaneLayout,
 } from '../../components/resizable-grid';
 import { TradingViews } from './trade-views';
-import { MarketSuccessorBanner } from '../../components/market-banner';
+import {
+  MarketSuccessorBanner,
+  MarketSuccessorProposalBanner,
+} from '../../components/market-banner';
 import { FLAGS } from '@vegaprotocol/environment';
 
 interface TradeGridProps {
@@ -162,7 +165,12 @@ export const TradeGrid = ({ market, pinnedAsset }: TradeGridProps) => {
   return (
     <div className={wrapperClasses}>
       <div>
-        {FLAGS.SUCCESSOR_MARKETS && <MarketSuccessorBanner market={market} />}
+        {FLAGS.SUCCESSOR_MARKETS && (
+          <>
+            <MarketSuccessorBanner market={market} />
+            <MarketSuccessorProposalBanner marketId={market?.id} />
+          </>
+        )}
         <OracleBanner marketId={market?.id || ''} />
       </div>
       <div className="min-h-0 p-0.5">

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

@@ -12,7 +12,10 @@ import { Splash } from '@vegaprotocol/ui-toolkit';
 import { NO_MARKET } from './constants';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import classNames from 'classnames';
-import { MarketSuccessorBanner } from '../../components/market-banner';
+import {
+  MarketSuccessorBanner,
+  MarketSuccessorProposalBanner,
+} from '../../components/market-banner';
 import { FLAGS } from '@vegaprotocol/environment';
 
 interface TradePanelsProps {
@@ -65,7 +68,12 @@ export const TradePanels = ({
   return (
     <div className="h-full grid grid-rows-[min-content_1fr_min-content]">
       <div>
-        {FLAGS.SUCCESSOR_MARKETS && <MarketSuccessorBanner market={market} />}
+        {FLAGS.SUCCESSOR_MARKETS && (
+          <>
+            <MarketSuccessorBanner market={market} />
+            <MarketSuccessorProposalBanner marketId={market?.id} />
+          </>
+        )}
         <OracleBanner marketId={market?.id || ''} />
       </div>
       <div className="h-full">

apps/trading/components/market-banner/index.ts

@@ -1 +1,2 @@
 export * from './market-successor-banner';
+export * from './market-successor-proposal-banner';

apps/trading/components/market-banner/market-successor-proposal-banner.spec.tsx

@@ -0,0 +1,155 @@
+import { act, render, screen, waitFor } from '@testing-library/react';
+import type { SingleExecutionResult } from '@apollo/client';
+import type { MockedResponse } from '@apollo/react-testing';
+import { MockedProvider } from '@apollo/react-testing';
+import { MarketSuccessorProposalBanner } from './market-successor-proposal-banner';
+import type { SuccessorProposalsListQuery } from '@vegaprotocol/proposals';
+import { SuccessorProposalsListDocument } from '@vegaprotocol/proposals';
+
+const marketProposalMock: MockedResponse<SuccessorProposalsListQuery> = {
+  request: {
+    query: SuccessorProposalsListDocument,
+  },
+  result: {
+    data: {
+      proposalsConnection: {
+        edges: [
+          {
+            node: {
+              __typename: 'Proposal',
+              id: 'proposal-1',
+              terms: {
+                __typename: 'ProposalTerms',
+                change: {
+                  __typename: 'NewMarket',
+                  instrument: {
+                    name: 'New proposal of the market successor',
+                  },
+                  successorConfiguration: {
+                    parentMarketId: 'marketId',
+                  },
+                },
+              },
+            },
+          },
+        ],
+      },
+    },
+  },
+};
+
+describe('MarketSuccessorProposalBanner', () => {
+  it('should display single proposal', async () => {
+    render(
+      <MockedProvider mocks={[marketProposalMock]}>
+        <MarketSuccessorProposalBanner marketId="marketId" />
+      </MockedProvider>
+    );
+    await waitFor(() => {
+      expect(
+        screen.getByText('A successors to this market has been proposed')
+      ).toBeInTheDocument();
+    });
+    expect(
+      screen
+        .getByRole('link')
+        .getAttribute('href')
+        ?.endsWith('/proposals/proposal-1') ?? false
+    ).toBe(true);
+  });
+  it('should display plural proposals', async () => {
+    const dualProposalMock = {
+      ...marketProposalMock,
+      result: {
+        ...marketProposalMock.result,
+        data: {
+          proposalsConnection: {
+            edges: [
+              ...((
+                marketProposalMock?.result as SingleExecutionResult<SuccessorProposalsListQuery>
+              )?.data?.proposalsConnection?.edges ?? []),
+              {
+                node: {
+                  __typename: 'Proposal',
+                  id: 'proposal-2',
+                  terms: {
+                    __typename: 'ProposalTerms',
+                    change: {
+                      __typename: 'NewMarket',
+                      instrument: {
+                        name: 'New second proposal of the market successor',
+                      },
+                      successorConfiguration: {
+                        parentMarketId: 'marketId',
+                      },
+                    },
+                  },
+                },
+              },
+            ],
+          },
+        },
+      },
+    };
+
+    render(
+      <MockedProvider mocks={[dualProposalMock]}>
+        <MarketSuccessorProposalBanner marketId="marketId" />
+      </MockedProvider>
+    );
+    await waitFor(() => {
+      expect(
+        screen.getByText('Successors to this market have been proposed')
+      ).toBeInTheDocument();
+    });
+    expect(
+      screen
+        .getAllByRole('link')[0]
+        .getAttribute('href')
+        ?.endsWith('/proposals/proposal-1') ?? false
+    ).toBe(true);
+    expect(
+      screen
+        .getAllByRole('link')[1]
+        .getAttribute('href')
+        ?.endsWith('/proposals/proposal-2') ?? false
+    ).toBe(true);
+  });
+
+  it('banner should be hidden because no proposals', () => {
+    const { container } = render(
+      <MockedProvider>
+        <MarketSuccessorProposalBanner marketId="marketId" />
+      </MockedProvider>
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('banner should be hidden because no proposals for the market', () => {
+    const { container } = render(
+      <MockedProvider mocks={[marketProposalMock]}>
+        <MarketSuccessorProposalBanner marketId="otherMarketId" />
+      </MockedProvider>
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it('banner should be hidden after user close click', async () => {
+    const { container } = render(
+      <MockedProvider mocks={[marketProposalMock]}>
+        <MarketSuccessorProposalBanner marketId="marketId" />
+      </MockedProvider>
+    );
+    await waitFor(() => {
+      expect(
+        screen.getByText('A successors to this market has been proposed')
+      ).toBeInTheDocument();
+    });
+    await act(() => {
+      screen.getByTestId('notification-banner-close').click();
+    });
+    await waitFor(() => {
+      expect(container).toBeEmptyDOMElement();
+    });
+  });
+});

apps/trading/components/market-banner/market-successor-proposal-banner.tsx

@@ -0,0 +1,71 @@
+import { useState } from 'react';
+import type {
+  SuccessorProposalListFieldsFragment,
+  NewMarketSuccessorFieldsFragment,
+} from '@vegaprotocol/proposals';
+import { useSuccessorProposalsListQuery } from '@vegaprotocol/proposals';
+import {
+  ExternalLink,
+  Intent,
+  NotificationBanner,
+} from '@vegaprotocol/ui-toolkit';
+import { t } from '@vegaprotocol/i18n';
+import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
+
+export const MarketSuccessorProposalBanner = ({
+  marketId,
+}: {
+  marketId?: string;
+}) => {
+  const { data: proposals } = useSuccessorProposalsListQuery({
+    skip: !marketId,
+  });
+  const successors =
+    proposals?.proposalsConnection?.edges
+      ?.map((item) => item?.node as SuccessorProposalListFieldsFragment)
+      .filter(
+        (item: SuccessorProposalListFieldsFragment) =>
+          (item.terms?.change as NewMarketSuccessorFieldsFragment)
+            ?.successorConfiguration?.parentMarketId === marketId
+      ) ?? [];
+  const [visible, setVisible] = useState(true);
+  const tokenLink = useLinks(DApp.Token);
+  if (visible && successors.length) {
+    return (
+      <NotificationBanner
+        intent={Intent.Primary}
+        onClose={() => {
+          setVisible(false);
+        }}
+      >
+        <div className="uppercase mb-1">
+          {successors.length === 1
+            ? t('A successors to this market has been proposed')
+            : t('Successors to this market have been proposed')}
+        </div>
+        <div>
+          {successors.length === 1
+            ? t('Check out the terms of the proposal and vote:')
+            : t('Check out the terms of the proposals and vote:')}{' '}
+          {successors.map((item, i) => {
+            const externalLink = tokenLink(
+              TOKEN_PROPOSAL.replace(':id', item.id || '')
+            );
+            return (
+              <>
+                <ExternalLink href={externalLink} key={i}>
+                  {
+                    (item.terms?.change as NewMarketSuccessorFieldsFragment)
+                      ?.instrument.name
+                  }
+                </ExternalLink>
+                {i < successors.length - 1 && ', '}
+              </>
+            );
+          })}
+        </div>
+      </NotificationBanner>
+    );
+  }
+  return null;
+};

libs/cypress/src/lib/commands/get-nodes.ts

@@ -29,6 +29,9 @@ export function addGetNodes() {
               location
               name
               pendingStake
+              rankingScore {
+                performanceScore
+              }
               pubkey
               stakedByDelegates
               stakedByOperator

libs/datagrid/src/lib/cells/centered-grid-cell.tsx

@@ -11,6 +11,6 @@ export const CenteredGridCellWrapper = ({
   <div
     className={classNames('flex h-[20px] p-0 justify-items-center', className)}
   >
-    <div className="self-center">{children}</div>
+    <div className="w-full self-center">{children}</div>
   </div>
 );

libs/market-depth/src/lib/orderbook-row.tsx

@@ -59,6 +59,7 @@ const CumulativeVol = memo(
   }) => {
     const volume = cumulativeValue ? (
       <NumericCell
+        testId={testId}
         value={cumulativeValue}
         valueFormatted={addDecimalsFixedFormatNumber(
           cumulativeValue,
@@ -69,7 +70,6 @@ const CumulativeVol = memo(
 
     return onClick && volume ? (
       <button
-        data-testid={testId}
         onClick={() => onClick(cumulativeValue)}
         className="hover:dark:bg-neutral-800 hover:bg-neutral-200 text-right pr-1"
       >

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

@@ -183,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/proposals/src/components/proposals-list/use-column-defs.tsx

@@ -1,7 +1,12 @@
 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 {
+  CenteredGridCellWrapper,
+  COL_DEFS,
+  DateRangeFilter,
+  SetFilter,
+} from '@vegaprotocol/datagrid';
 import compact from 'lodash/compact';
 import { useEnvironment, FLAGS } from '@vegaprotocol/environment';
 import { getDateTimeFormat } from '@vegaprotocol/utils';
@@ -31,7 +36,6 @@ export const useColumnDefs = () => {
     return new BigNumber(requiredMajority).times(100);
   }, [params?.governance_proposal_market_requiredMajority]);
 
-  const cellCss = 'grid h-full items-center';
   const columnDefs: ColDef[] = useMemo(() => {
     return compact([
       {
@@ -94,7 +98,6 @@ export const useColumnDefs = () => {
       {
         colId: 'voting',
         headerName: t('Voting'),
-        cellClass: 'flex justify-between leading-tight font-mono',
         cellRenderer: ({
           data,
         }: VegaICellRendererParams<ProposalListFieldsFragment>) => {
@@ -106,12 +109,12 @@ export const useColumnDefs = () => {
               ? new BigNumber(0)
               : yesTokens.multipliedBy(100).dividedBy(totalTokensVoted);
             return (
-              <div className="uppercase flex h-full items-center justify-center">
+              <CenteredGridCellWrapper>
                 <VoteProgress
                   threshold={requiredMajorityPercentage}
                   progress={yesPercentage}
                 />
-              </div>
+              </CenteredGridCellWrapper>
             );
           }
           return '-';
@@ -160,7 +163,6 @@ export const useColumnDefs = () => {
   const defaultColDef: ColDef = useMemo(() => {
     return {
       sortable: true,
-      cellClass: cellCss,
       resizable: true,
       filter: true,
       filterParams: { buttons: ['reset'] },

libs/proposals/src/lib/proposals-data-provider/Proposals.graphql

@@ -327,3 +327,33 @@ query ProposalsList($proposalType: ProposalType, $inState: ProposalState) {
     }
   }
 }
+
+fragment NewMarketSuccessorFields on NewMarket {
+  instrument {
+    name
+  }
+  successorConfiguration {
+    parentMarketId
+  }
+}
+
+fragment SuccessorProposalListFields on Proposal {
+  id
+  terms {
+    change {
+      ... on NewMarket {
+        ...NewMarketSuccessorFields
+      }
+    }
+  }
+}
+
+query SuccessorProposalsList {
+  proposalsConnection(proposalType: TYPE_NEW_MARKET, inState: STATE_OPEN) {
+    edges {
+      node {
+        ...SuccessorProposalListFields
+      }
+    }
+  }
+}

libs/react-helpers/src/hooks/use-fetch.ts

@@ -21,7 +21,8 @@ type Action<T> =
 export const useFetch = <T>(
   url: string,
   options?: RequestInit,
-  initialFetch = true
+  initialFetch = true,
+  skip?: boolean
 ): {
   state: State<T>;
   refetch: (
@@ -105,10 +106,10 @@ export const useFetch = <T>(
 
   useEffect(() => {
     cancelRequest.current = false;
-    if (initialFetch) {
+    if (initialFetch && !skip) {
       fetchCallback();
     }
-  }, [fetchCallback, initialFetch, url]);
+  }, [fetchCallback, initialFetch, skip, url]);
 
   useEffect(() => {
     // Use the cleanup function for avoiding a possibly...

package.json

@@ -67,6 +67,7 @@
     "immer": "^9.0.12",
     "iso8601-duration": "^2.1.1",
     "js-sha3": "^0.8.0",
+    "jsondiffpatch": "^0.4.1",
     "lodash": "^4.17.21",
     "next": "13.3.0",
     "pennant": "1.10.0",

yarn.lock

@@ -11274,7 +11274,7 @@ chalk@^1.0.0, chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0, chalk@^2.4.1:
+chalk@^2.0.0, chalk@^2.3.0, chalk@^2.4.1:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -12967,6 +12967,11 @@ didyoumean@^1.2.2:
   resolved "https://registry.yarnpkg.com/didyoumean/-/didyoumean-1.2.2.tgz#989346ffe9e839b4555ecf5666edea0d3e8ad037"
   integrity sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==
 
+diff-match-patch@^1.0.0:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/diff-match-patch/-/diff-match-patch-1.0.5.tgz#abb584d5f10cd1196dfc55aa03701592ae3f7b37"
+  integrity sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw==
+
 diff-sequences@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/diff-sequences/-/diff-sequences-27.5.1.tgz#eaecc0d327fd68c8d9672a1e64ab8dccb2ef5327"
@@ -17431,6 +17436,14 @@ jsonc-parser@3.2.0:
   resolved "https://registry.yarnpkg.com/jsonc-parser/-/jsonc-parser-3.2.0.tgz#31ff3f4c2b9793f89c67212627c51c6394f88e76"
   integrity sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==
 
+jsondiffpatch@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/jsondiffpatch/-/jsondiffpatch-0.4.1.tgz#9fb085036767f03534ebd46dcd841df6070c5773"
+  integrity sha512-t0etAxTUk1w5MYdNOkZBZ8rvYYN5iL+2dHCCx/DpkFm/bW28M6y5nUS83D4XdZiHy35Fpaw6LBb+F88fHZnVCw==
+  dependencies:
+    chalk "^2.3.0"
+    diff-match-patch "^1.0.0"
+
 jsonfile@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/jsonfile/-/jsonfile-4.0.0.tgz#8771aae0799b64076b76640fca058f9c10e33ecb"