test: failing rapport job after cypress error

Signed-off-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

.github/workflows/cypress-manual-trigger.yml

@@ -11,7 +11,7 @@ on:
         type: choice
         options:
           - explorer-e2e
-          - token-e2e
+          - governance-e2e
           - trading-e2e
       tags:
         description: 'Test tags to run'

.github/workflows/cypress-nightly.yml

@@ -10,5 +10,5 @@ jobs:
     uses: ./.github/workflows/cypress-run.yml
     secrets: inherit
     with:
-      projects: '["explorer-e2e","token-e2e","trading-e2e"]'
+      projects: '["explorer-e2e","governance-e2e","trading-e2e"]'
       tags: '@smoke @regression @slow'

.github/workflows/cypress-pr.yml

@@ -42,10 +42,10 @@ jobs:
           affected=$(yarn nx print-affected --base=${{ env.NX_BASE }} --head=${{ env.NX_HEAD }} --select=projects)
           echo -n "Affected projects: $affected"
           projects=""
-          if [[ $affected == *"token"* ]]; then projects+='"token-e2e" '; fi
+          if [[ $affected == *"governance"* ]]; then projects+='"governance-e2e" '; fi
           if [[ $affected == *"trading"* ]]; then projects+='"trading-e2e" '; fi
           if [[ $affected == *"explorer"* ]]; then projects+='"explorer-e2e" '; fi
-          if [[ -z "$projects" ]]; then projects+='"token-e2e" "trading-e2e" "explorer-e2e" '; fi
+          if [[ -z "$projects" ]]; then projects+='"governance-e2e" "trading-e2e" "explorer-e2e" '; fi
           projects=${projects%?}
           projects=[${projects// /,}]
           echo PROJECTS=$projects >> $GITHUB_ENV

.github/workflows/cypress-run.yml

@@ -87,7 +87,7 @@ jobs:
         run: ls -alsh /home/runner/.vegacapsule/testnet/logs/
 
       - uses: actions/upload-artifact@v3
-        if: ${{ always() }}
+        if: ${{ failure() }}
         with:
           name: logs-${{ matrix.project }}
           path: /home/runner/.vegacapsule/testnet/logs

.github/workflows/publish-npm.yml

@@ -12,6 +12,8 @@ on:
           - react-helpers
           - tailwindcss-config
           - types
+          - utils
+          - i18n
 
 jobs:
   publish:

README.md

@@ -161,7 +161,7 @@ In order to setup and run vegawallet for e2e capsule tests, in a separate termin
 bash setup-vegawallet.sh
 ```
 
-3. copy generated `api-token` and paste the token into `CYPRESS_VEGA_WALLET_API_TOKEN` environment variable in either `apps/token-e2e/.env` or `apps/explorer-e2e/.env` depending on which project needs testing.
+3. copy generated `api-token` and paste the token into `CYPRESS_VEGA_WALLET_API_TOKEN` environment variable in either `apps/governance-e2e/.env` or `apps/explorer-e2e/.env` depending on which project needs testing.
 
 Note: The script is only needed if capsule was built for first time or fresh. To run existing wallet service for capsule:
 

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

@@ -8,7 +8,7 @@ context('Asset page', { tags: '@regression' }, () => {
 
     it('should be able to see full assets list', () => {
       cy.getAssets().then((assets) => {
-        Object.values(assets).forEach((asset) => {
+        assets.forEach((asset) => {
           cy.get(`[row-id="${asset.id}"]`).should('be.visible');
         });
       });
@@ -25,7 +25,7 @@ context('Asset page', { tags: '@regression' }, () => {
       });
 
       cy.getAssets().then((assets) => {
-        Object.values(assets).forEach((asset) => {
+        assets.forEach((asset) => {
           cy.get(`[row-id="${asset.id}"]`).should('be.visible');
         });
       });
@@ -33,7 +33,7 @@ context('Asset page', { tags: '@regression' }, () => {
 
     it('should open details page when clicked on "View details"', () => {
       cy.getAssets().then((assets) => {
-        Object.values(assets).forEach((asset) => {
+        assets.forEach((asset) => {
           cy.get(`[row-id="${asset.id}"] [col-id="actions"] button`)
             .eq(0)
             .should('contain.text', 'View details');

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

@@ -1,303 +1,15 @@
 context('Validator page', { tags: '@smoke' }, function () {
-  const validatorMenuHeading = 'a[href="/validators"]';
-  const tendermintDataHeader = '[data-testid="tendermint-header"]';
-  const vegaDataHeader = '[data-testid="vega-header"]';
-  const jsonSection = '.language-json';
-
   before('Visit validators page and obtain data', function () {
-    cy.visit('/');
-    cy.get(validatorMenuHeading).click();
-    cy.get_validators().as('validators');
-    cy.get_nodes().as('nodes');
+    cy.visit('/validators');
   });
 
   describe('Verify elements on page', function () {
-    before('Ensure at least two validators are present', function () {
-      assert.isAtLeast(
-        this.validators.length,
-        2,
-        'Ensuring at least two validators exist'
-      );
-    });
-
-    it('should be able to see validator page sections', function () {
-      cy.get(vegaDataHeader)
-        .contains('Vega data')
-        .and('is.visible')
-        .next()
-        .within(() => {
-          cy.get(jsonSection).should('not.be.empty');
-        });
-
-      cy.get(tendermintDataHeader)
-        .contains('Tendermint data')
-        .and('is.visible')
-        .next()
-        .within(() => {
-          cy.get(jsonSection).should('not.be.empty');
-        });
-    });
-
-    it('should be able to see relevant validator information in tendermint section', function () {
-      cy.get(tendermintDataHeader)
-        .contains('Tendermint data')
-        .next()
-        .within(() => {
-          cy.get(jsonSection)
-            .invoke('text')
-            .convert_string_json_to_js_object()
-            .then((validatorsInJson) => {
-              this.validators.forEach((validator, index) => {
-                const validatorInJson =
-                  validatorsInJson.result.validators[index];
-
-                assert.equal(
-                  validatorInJson.address,
-                  validator.address,
-                  `Checking that validator address shown in json matches system data`
-                );
-                cy.contains(validator.address).should('be.visible');
-
-                assert.equal(
-                  validatorInJson.pub_key.type,
-                  validator.pub_key.type,
-                  `Checking that validator public key type shown in json matches system data`
-                );
-                cy.contains(validator.pub_key.type).should('be.visible');
-
-                assert.equal(
-                  validatorInJson.pub_key.value,
-                  validator.pub_key.value,
-                  `Checking that validator public key value shown in json matches system data`
-                );
-                cy.contains(validator.pub_key.value).should('be.visible');
-
-                assert.equal(
-                  validatorInJson.voting_power,
-                  validator.voting_power,
-                  `Checking that validator voting power in json matches system data`
-                );
-                cy.contains(validator.voting_power).should('be.visible');
-
-                // Proposer priority can change frequently mid test
-                // Therefore only checking the field name is present.
-                cy.contains('proposer_priority').should('be.visible');
-              });
-            });
-        });
-    });
-
-    // Test disabled 2022/11/15 during the 0.62.1 upgrade. The JSON structure changed, and
-    // this test failed. Rather than fix it, it will be replaced when the validator view displays
-    // something useful rather than just dumping out the JSON.
-    xit('should be able to see relevant node information in vega data section', function () {
-      cy.get(vegaDataHeader)
-        .contains('Vega data')
-        .next()
-        .within(() => {
-          cy.get(jsonSection)
-            .invoke('text')
-            .convert_string_json_to_js_object()
-            .then((nodesInJson) => {
-              this.nodes.forEach((node, index) => {
-                const nodeInJson = nodesInJson.edges[index].node;
-
-                // Vegacapsule shows no info or null for following fields:
-                // name, infoURL, avatarUrl, location, epoch data
-                // Therefore, these values remain unchecked.
-
-                assert.equal(
-                  nodeInJson.__typename,
-                  node.__typename,
-                  `Checking that node __typename shown in json matches system data`
-                );
-                cy.contains(node.__typename).should('be.visible');
-
-                assert.equal(
-                  nodeInJson.id,
-                  node.id,
-                  `Checking that node id shown in json matches system data`
-                );
-                cy.contains(node.id).should('be.visible');
-
-                assert.equal(
-                  nodeInJson.pubkey,
-                  node.pubkey,
-                  `Checking that node pubkey shown in json matches system data`
-                );
-                cy.contains(node.pubkey).should('be.visible');
-
-                assert.equal(
-                  nodeInJson.tmPubkey,
-                  node.tmPubkey,
-                  `Checking that node tmPubkey shown in json matches system data`
-                );
-                cy.contains(node.tmPubkey).should('be.visible');
-
-                assert.equal(
-                  nodeInJson.ethereumAddress,
-                  node.ethereumAddress,
-                  `Checking that node ethereumAddress shown in json matches system data`
-                );
-                cy.contains(node.ethereumAddress).should('be.visible');
-
-                assert.equal(
-                  nodeInJson.stakedByOperator,
-                  node.stakedByOperator,
-                  `Checking that node stakedByOperator value shown in json matches system data`
-                );
-                cy.contains(node.stakedByOperator).should('be.visible');
-
-                assert.equal(
-                  nodeInJson.stakedByDelegates,
-                  node.stakedByDelegates,
-                  `Checking that node stakedByDelegates value shown in json matches system data`
-                );
-                cy.contains(node.stakedByDelegates).should('be.visible');
-
-                assert.equal(
-                  nodeInJson.stakedTotal,
-                  node.stakedTotal,
-                  `Checking that node stakedTotal shown in json matches system data`
-                );
-                cy.contains(node.stakedTotal).should('be.visible');
-
-                assert.equal(
-                  nodeInJson.pendingStake,
-                  node.pendingStake,
-                  `Checking that node pendingStake shown in json matches system data`
-                );
-                cy.contains(node.pendingStake).should('be.visible');
-
-                assert.equal(
-                  nodeInJson.status,
-                  node.status,
-                  `Checking that node status shown in json matches system data`
-                );
-                cy.contains(node.status).should('be.visible');
-              });
-            });
-        });
-    });
-
-    it('should be able to see validator page displayed on mobile', function () {
-      cy.common_switch_to_mobile_and_click_toggle();
-      cy.get(validatorMenuHeading).click();
-      cy.get(vegaDataHeader)
-        .contains('Vega data')
-        .and('is.visible')
-        .next()
-        .within(() => {
-          cy.get(jsonSection).should('not.be.empty');
-        });
-
-      cy.get(tendermintDataHeader)
-        .contains('Tendermint data')
-        .and('is.visible')
-        .next()
-        .within(() => {
-          cy.get(jsonSection).should('not.be.empty');
-        });
-
-      cy.get(tendermintDataHeader)
-        .contains('Tendermint data')
-        .next()
-        .within(() => {
-          this.validators.forEach((validator) => {
-            cy.contains(validator.address).should('be.visible');
-            cy.contains(validator.pub_key.type).should('be.visible');
-            cy.contains(validator.pub_key.value).should('be.visible');
-            cy.contains(validator.voting_power).should('be.visible');
-            // Proposer priority can change frequently mid test
-            // Therefore only checking the field name is present.
-            cy.contains('proposer_priority').should('be.visible');
-          });
-        });
-    });
-
-    it('should be able to switch validator page between light and dark mode', function () {
-      const whiteThemeSelectedMenuOptionColor = 'rgb(255, 7, 127)';
-      const whiteThemeJsonFieldBackColor = 'rgb(255, 255, 255)';
-      const whiteThemeSideMenuBackgroundColor = 'rgb(255, 255, 255)';
-      const darkThemeSelectedMenuOptionColor = 'rgb(215, 251, 80)';
-      const darkThemeJsonFieldBackColor = 'rgb(38, 38, 38)';
-      const darkThemeSideMenuBackgroundColor = 'rgb(0, 0, 0)';
-      const themeSwitcher = '[data-testid="theme-switcher"]';
-      const jsonFields = '.hljs';
-      const sideMenuBackground = '.absolute';
-
-      // Engage dark mode if not allready set
-      cy.get(sideMenuBackground)
-        .should('have.css', 'background-color')
-        .then((background_color) => {
-          if (background_color.includes(whiteThemeSideMenuBackgroundColor))
-            cy.get(themeSwitcher).click();
-        });
-
-      // Engage white mode
-      cy.get(themeSwitcher).click();
-
-      // White Mode
-      cy.get(validatorMenuHeading)
-        .should('have.css', 'background-color')
-        .and('include', whiteThemeSelectedMenuOptionColor);
-      cy.get(jsonFields)
-        .should('have.css', 'background-color')
-        .and('include', whiteThemeJsonFieldBackColor);
-      cy.get(sideMenuBackground)
-        .should('have.css', 'background-color')
-        .and('include', whiteThemeSideMenuBackgroundColor);
-
-      // Dark Mode
-      cy.get(themeSwitcher).click();
-      cy.get(validatorMenuHeading)
-        .should('have.css', 'background-color')
-        .and('include', darkThemeSelectedMenuOptionColor);
-      cy.get(jsonFields)
-        .should('have.css', 'background-color')
-        .and('include', darkThemeJsonFieldBackColor);
-      cy.get(sideMenuBackground)
-        .should('have.css', 'background-color')
-        .and('include', darkThemeSideMenuBackgroundColor);
-    });
-
-    Cypress.Commands.add('get_validators', () => {
-      cy.request({
-        method: 'GET',
-        url: `http://localhost:26617/validators`,
-        headers: { 'content-type': 'application/json' },
-      })
-        .its(`body.result.validators`)
-        .then(function (response) {
-          let validators = [];
-          response.forEach((account, index) => {
-            validators[index] = account;
-          });
-          return validators;
-        });
-    });
-
-    Cypress.Commands.add('get_nodes', () => {
-      const mutation =
-        '{nodesConnection { edges { node { id name infoUrl avatarUrl pubkey tmPubkey ethereumAddress \
-          location stakedByOperator stakedByDelegates stakedTotal pendingStake \
-          epochData { total offline online __typename } status name __typename}}}}';
-      cy.request({
-        method: 'POST',
-        url: `http://localhost:3028/query`,
-        body: {
-          query: mutation,
-        },
-        headers: { 'content-type': 'application/json' },
-      })
-        .its(`body.data.nodesConnection.edges`)
-        .then(function (response) {
-          let nodes = [];
-          response.forEach((node) => {
-            nodes.push(node);
-          });
-          return nodes;
+    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');
         });
+      });
     });
   });
 });

apps/explorer/.env

@@ -1,7 +1,7 @@
 NX_TENDERMINT_URL=https://tm.n00.stagnet3.vega.xyz
 NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n00.stagnet3.vega.xyz/websocket
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/stagnet3-network.json
-NX_VEGA_NETWORKS={\"MAINNET"\:\"https://explorer.vega.xyz"\,\"TESTNET\":\"https://explorer.fairground.wtf\"}
+NX_VEGA_NETWORKS='{"SANDBOX":"https://sandbox.explorer.vega.xyz","STAGNET1":"https://stagnet1.token.vega.xyz", "STAGNET3":"https://stagnet3.explorer.vega.xyz","VALIDATOR_TESTNET":"https://validator-testnet.fairground.wtf","TESTNET":"https://token.fairground.wtf","MAINNET":"https://token.vega.xyz"}'
 NX_VEGA_ENV=STAGNET3
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz

apps/explorer/.env.capsule

@@ -1,9 +1,7 @@
 # App configuration variables
 NX_TENDERMINT_URL=http://localhost:26617
 NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26617/websocket
-NX_VEGA_NETWORKS={\"MAINNET"\:\"https://explorer.vega.xyz"\,\"TESTNET\":\"https://explorer.fairground.wtf\"}
 NX_VEGA_ENV=CUSTOM
-NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 
 # App flags

apps/explorer/.env.devnet

@@ -1,10 +1,8 @@
 # App configuration variables
 NX_TENDERMINT_URL=https://tm.be.devnet1.vega.xyz/tm
-NX_TENDERMINT_WEBSOCKET_URL=wss://tm.be.devnet1.vega.xyz/websocket
+NX_TENDERMINT_WEBSOCKET_URL=wss://be.devnet1.vega.xyz/websocket
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/devnet-network.json
-NX_VEGA_NETWORKS={\"MAINNET"\:\"https://explorer.vega.xyz"\,\"TESTNET\":\"https://explorer.fairground.wtf\"}
 NX_VEGA_ENV=DEVNET
-NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_BLOCK_EXPLORER=https://be.devnet1.vega.xyz/rest
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_VEGA_GOVERNANCE_URL=https://dev.token.vega.xyz

apps/explorer/.env.mainnet

@@ -1,10 +1,8 @@
 # App configuration variables
 NX_TENDERMINT_URL=https://be.explorer.vega.xyz
-NX_TENDERMINT_WEBSOCKET_URL=wss://be.explorer.vega.xyz
+NX_TENDERMINT_WEBSOCKET_URL=wss://be.explorer.vega.xyz/websocket
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/mainnet-network.json
-NX_VEGA_NETWORKS={\"MAINNET"\:\"https://explorer.vega.xyz"\,\"TESTNET\":\"https://explorer.fairground.wtf\"}
 NX_VEGA_ENV=MAINNET
-NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_BLOCK_EXPLORER=https://be.explorer.vega.xyz/rest/
 NX_ETHERSCAN_URL=https://etherscan.io
-NX_VEGA_GOVERNANCE_URL=https://token.vega.xyz
+NX_VEGA_GOVERNANCE_URL=https://token.vega.xyz

apps/explorer/.env.mirror

@@ -1,10 +1,8 @@
 # App configuration variables
 NX_TENDERMINT_URL=https://tm.be.mainnet-mirror.vega.xyz
-NX_TENDERMINT_WEBSOCKET_URL=https://tm.be.mainnet-mirror.vega.xyz
+NX_TENDERMINT_WEBSOCKET_URL=wss://be.mainnet-mirror.vega.xyz/websocket
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/mirror-network.json
-NX_VEGA_NETWORKS='{"DEVNET":"https://dev.token.vega.xyz","STAGNET3":"https://stagnet3.token.vega.xyz","TESTNET":"https://token.fairground.wtf","MAINNET":"https://token.vega.xyz"}'
 NX_VEGA_ENV=MIRROR
-NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_BLOCK_EXPLORER=https://be.mainnet-mirror.vega.xyz/rest/
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_VEGA_GOVERNANCE_URL=https://mainnet-mirror.token.vega.xyz

apps/explorer/.env.sandbox

@@ -5,8 +5,7 @@ NX_VEGA_EXPLORER_URL=https://sandbox.explorer.vega.xyz
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/testnet
 NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
-NX_VEGA_NETWORKS={\"MAINNET"\:\"https://explorer.vega.xyz"\,\"TESTNET\":\"https://explorer.fairground.wtf\"}
 NX_TENDERMINT_URL=https://tm.sandbox.vega.xyz
-NX_TENDERMINT_WEBSOCKET_URL=wss://tm.sandbox.vega.xyz/websocket
+NX_TENDERMINT_WEBSOCKET_URL=wss://be.sandbox.vega.xyz/websocket
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_VEGA_GOVERNANCE_URL=https://sandbox.token.vega.xyz

apps/explorer/.env.stagnet1

@@ -4,7 +4,6 @@ NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/stagnet1-network.json
 NX_VEGA_ENV=STAGNET1
 NX_VEGA_EXPLORER_URL=https://stagnet1.explorer.vega.xyz
-NX_VEGA_NETWORKS={\"MAINNET"\:\"https://explorer.vega.xyz"\,\"TESTNET\":\"https://explorer.fairground.wtf\"}
 NX_VEGA_TOKEN_URL=https://stagnet1.token.vega.xyz
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_TENDERMINT_URL=https://tm.n01.stagnet1.vega.xyz

apps/explorer/.env.stagnet3

@@ -1,9 +1,7 @@
 NX_TENDERMINT_URL=https://tm.n00.stagnet3.vega.xyz
-NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n00.stagnet3.vega.xyz/websocket
+NX_TENDERMINT_WEBSOCKET_URL=wss://be.stagnet3.vega.xyz/websocket
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/stagnet3-network.json
-NX_VEGA_NETWORKS={\"MAINNET"\:\"https://explorer.vega.xyz"\,\"TESTNET\":\"https://explorer.fairground.wtf\"}
 NX_VEGA_ENV=STAGNET3
-NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_BLOCK_EXPLORER=https://be.stagnet3.vega.xyz/rest
 NX_VEGA_GOVERNANCE_URL=https://stagnet3.token.vega.xyz
 NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega-dev-releases/releases/

apps/explorer/.env.testnet

@@ -1,13 +1,10 @@
 # App configuration variables
 NX_TENDERMINT_URL=https://tm.be.testnet.vega.xyz
 NX_BLOCK_EXPLORER=https://be.testnet.vega.xyz/rest
-NX_TENDERMINT_WEBSOCKET_URL=wss://tm.be.testnet.vega.xyz/websocket/
+NX_TENDERMINT_WEBSOCKET_URL=wss://be.testnet.vega.xyz/websocket
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/testnet-network.json
-NX_VEGA_NETWORKS={\"MAINNET"\:\"https://explorer.vega.xyz"\,\"TESTNET\":\"https://explorer.fairground.wtf\"}
 NX_VEGA_ENV=TESTNET
-NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_VEGA_URL=https://api.n07.testnet.vega.xyz/graphql
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
-NX_VEGA_NETWORKS={}
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
-NX_VEGA_GOVERNANCE_URL=https://token.fairground.wtf
+NX_VEGA_GOVERNANCE_URL=https://token.fairground.wtf

apps/explorer/.env.validator-testnet

@@ -0,0 +1,12 @@
+# App configuration variables
+NX_VEGA_ENV=VALIDATOR_TESTNET
+NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/validator-testnet-network.json
+NX_VEGA_URL=https://api.validators-testnet.vega.xyz/graphql
+NX_VEGA_REST=https://api.validators-testnet.vega.xyz/
+NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
+NX_ETHERSCAN_URL=https://sepolia.etherscan.io
+
+NX_VEGA_GOVERNANCE_URL=https://validator-testnet.governance.vega.xyz
+NX_TENDERMINT_URL=https://tm.be.validators-testnet.vega.xyz
+NX_BLOCK_EXPLORER=https://be.validators-testnet.vega.xyz/rest
+NX_TENDERMINT_WEBSOCKET_URL=wss://be.validators-testnet.vega.xyz/websocket

apps/explorer/.env.vegacapsule

@@ -2,6 +2,5 @@
 NX_TENDERMINT_URL=http://localhost:26607/
 NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26607/websocket
 NX_VEGA_ENV=CUSTOM
-NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_BLOCK_EXPLORER=
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io

apps/explorer/src/__mocks__/react-markdown.js

@@ -0,0 +1,5 @@
+function ReactMarkdown({ children }) {
+  return <div>{children}</div>;
+}
+
+export default ReactMarkdown;

apps/explorer/src/app/app.tsx

@@ -40,9 +40,9 @@ function App() {
       <NetworkLoader cache={DEFAULT_CACHE_CONFIG}>
         <AnnouncementBanner>
           <div className="font-alpha calt uppercase text-center text-lg text-white">
-            <span className="pr-4">Mainnet sim 2 coming in March!</span>
+            <span className="pr-4">Mainnet sim 2 is live!</span>
             <ExternalLink href="https://fairground.wtf/">
-              Learn more
+              Come help stress test the network
             </ExternalLink>
           </div>
         </AnnouncementBanner>

apps/explorer/src/app/components/asset-balance/asset-balance.tsx

@@ -1,5 +1,5 @@
 import { useAssetDataProvider } from '@vegaprotocol/assets';
-import { addDecimalsFormatNumber } from '@vegaprotocol/react-helpers';
+import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
 import { AssetLink } from '../links';
 
 export type AssetBalanceProps = {

apps/explorer/src/app/components/asset-balance/governance-asset-balance.tsx

@@ -1,4 +1,4 @@
-import { addDecimalsFormatNumber } from '@vegaprotocol/react-helpers';
+import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
 import { useExplorerGovernanceAssetQuery } from './__generated__/Governance-asset';
 import AssetBalance from './asset-balance';
 

apps/explorer/src/app/components/assets/assets-table.tsx

@@ -1,11 +1,11 @@
 import type { AssetFieldsFragment } from '@vegaprotocol/assets';
 import { AssetTypeMapping, AssetStatusMapping } from '@vegaprotocol/assets';
-import { t } from '@vegaprotocol/react-helpers';
-import type { VegaICellRendererParams } from '@vegaprotocol/ui-toolkit';
+import { t } from '@vegaprotocol/i18n';
 import { ButtonLink } from '@vegaprotocol/ui-toolkit';
 import type { AgGridReact } from 'ag-grid-react';
 import { AgGridColumn } from 'ag-grid-react';
-import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
+import { AgGridDynamic as AgGrid } from '@vegaprotocol/datagrid';
+import type { VegaICellRendererParams } from '@vegaprotocol/datagrid';
 import { useRef, useLayoutEffect } from 'react';
 import { BREAKPOINT_MD } from '../../config/breakpoints';
 import { useNavigate } from 'react-router-dom';

apps/explorer/src/app/components/blocks/block-data.tsx

@@ -2,11 +2,11 @@ import React from 'react';
 import type { BlockMeta } from '../../routes/blocks/tendermint-blockchain-response';
 import { Routes } from '../../routes/route-names';
 import { Link } from 'react-router-dom';
-import { getDateTimeFormat } from '@vegaprotocol/react-helpers';
+import { getDateTimeFormat } from '@vegaprotocol/utils';
 import { Tooltip } from '@vegaprotocol/ui-toolkit';
 import { TimeAgo } from '../time-ago';
 import { TableWithTbody, TableRow, TableCell } from '../table';
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 
 interface BlockProps {
   block: BlockMeta;

apps/explorer/src/app/components/blocks/blocks-data.tsx

@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import React from 'react';
 import type { TendermintBlockchainResponse } from '../../routes/blocks/tendermint-blockchain-response';
 import { BlockData } from './block-data';

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { FixedSizeList as List } from 'react-window';
 import InfiniteLoader from 'react-window-infinite-loader';
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import type { BlockMeta } from '../../routes/blocks/tendermint-blockchain-response';
 import { BlockData } from './block-data';
 import EmptyList from '../empty-list/empty-list';

apps/explorer/src/app/components/blocks/blocks-refetch.tsx

@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import { useTendermintWebsocket } from '../../hooks/use-tendermint-websocket';
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import { ButtonLink } from '@vegaprotocol/ui-toolkit';
 
 interface BlocksRefetchProps {

apps/explorer/src/app/components/dialogs/json-viewer-dialog.tsx

@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import {
   Button,
   Dialog,

apps/explorer/src/app/components/empty-list/empty-list.tsx

@@ -19,12 +19,12 @@ const EmptyList = ({ heading, label }: EmptyListProps) => {
 
       <div className="mt-4">
         {heading ? (
-          <h1 className="font-alpha text-xl uppercase text-center leading-relaxed">
+          <h1 className="font-alpha calt text-xl uppercase text-center leading-relaxed">
             {heading}
           </h1>
         ) : null}
         {label ? (
-          <p className="font-alpha text-gray-500 text-center">{label}</p>
+          <p className="font-alpha calt text-gray-500 text-center">{label}</p>
         ) : null}
       </div>
     </div>

apps/explorer/src/app/components/epoch-overview/Epoch.graphql

@@ -22,29 +22,3 @@ query ExplorerFutureEpoch {
     }
   }
 }
-
-# query ExplorerEpoch($id: ID!) {
-#
-##### This could be useful for calculating roughly when a future epoch will
-##### occur, but epoch not exist results in a total error
-#  networkParameter(key: "validators.epoch.length") {
-#    value
-# }
-#
-##### This could be useful for relating where we are in time, but as above
-##### the total failure caused by epoch(id) not existing
-##### means this is useful
-#  currentEpoch: epoch {
-#    id
-#  }
-#
-#  epoch(id: $id) {
-#    id
-#    timestamps {
-#      start
-#      end
-#      firstBlock
-#      lastBlock
-#    }
-#  }
-#}

apps/explorer/src/app/components/epoch-overview/epoch-missing.spec.tsx

@@ -1,7 +1,7 @@
 import { MockedProvider } from '@apollo/client/testing';
 import { render } from '@testing-library/react';
 import EpochMissingOverview, { calculateEpochData } from './epoch-missing';
-import { getSecondsFromInterval } from '@vegaprotocol/react-helpers';
+import { getSecondsFromInterval } from '@vegaprotocol/utils';
 const START_DATE_PAST = 'Monday, 17 February 2022 11:44:09';
 
 describe('getSecondsFromInterval', () => {

apps/explorer/src/app/components/epoch-overview/epoch-missing.tsx

@@ -4,8 +4,7 @@ import addSeconds from 'date-fns/addSeconds';
 import formatDistance from 'date-fns/formatDistance';
 import { Icon, Tooltip } from '@vegaprotocol/ui-toolkit';
 import isFuture from 'date-fns/isFuture';
-import { isValidDate } from '@vegaprotocol/react-helpers';
-import { getSecondsFromInterval } from '@vegaprotocol/react-helpers';
+import { getSecondsFromInterval, isValidDate } from '@vegaprotocol/utils';
 
 export type EpochMissingOverviewProps = {
   missingEpochId?: string;

apps/explorer/src/app/components/epoch-overview/epoch.tsx

@@ -1,6 +1,6 @@
 import { useExplorerEpochQuery } from './__generated__/Epoch';
 
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import { BlockLink } from '../links';
 import { Time } from '../time';
 import { TimeAgo } from '../time-ago';

apps/explorer/src/app/components/footer/footer.tsx

@@ -1,5 +1,6 @@
 import { NodeSwitcherDialog, useEnvironment } from '@vegaprotocol/environment';
-import { t, useScreenDimensions } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
+import { useScreenDimensions } from '@vegaprotocol/react-helpers';
 import { ExternalLink, Link } from '@vegaprotocol/ui-toolkit';
 import { useMemo, useState } from 'react';
 import { ENV } from '../../config/env';

apps/explorer/src/app/components/header/header.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames';
 import { Link } from 'react-router-dom';
 import { ThemeSwitcher, Icon } from '@vegaprotocol/ui-toolkit';
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import { Search } from '../search';
 import { Routes } from '../../routes/route-names';
 import { NetworkSwitcher } from '@vegaprotocol/environment';

apps/explorer/src/app/components/jump-to-block/index.tsx

@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Routes } from '../../routes/route-names';

apps/explorer/src/app/components/jump-to/index.tsx

@@ -1,6 +1,6 @@
 import type { HTMLInputTypeAttribute, SyntheticEvent } from 'react';
 import { Input, Button } from '@vegaprotocol/ui-toolkit';
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 
 interface JumpToProps {
   label: string;

apps/explorer/src/app/components/links/market-link/market-link.tsx

@@ -3,7 +3,7 @@ import { useExplorerMarketQuery } from './__generated__/Market';
 import { Link } from 'react-router-dom';
 
 import type { ComponentProps } from 'react';
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import Hash from '../hash';
 
 export type MarketLinkProps = Partial<ComponentProps<typeof Link>> & {

apps/explorer/src/app/components/links/party-link/party-link.tsx

@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom';
 
 import type { ComponentProps } from 'react';
 import Hash from '../hash';
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import { isValidPartyId } from '../../../routes/parties/id/components/party-id-error';
 import { truncateMiddle } from '@vegaprotocol/ui-toolkit';
 

apps/explorer/src/app/components/links/proposal-link/proposal-link.tsx

@@ -4,13 +4,14 @@ import { ENV } from '../../../config/env';
 import Hash from '../hash';
 export type ProposalLinkProps = {
   id: string;
+  text?: string;
 };
 
 /**
  * Given a proposal ID, generates an external link over to
  * the Governance page for more information
  */
-const ProposalLink = ({ id }: ProposalLinkProps) => {
+const ProposalLink = ({ id, text }: ProposalLinkProps) => {
   const { data } = useExplorerProposalQuery({
     variables: { id },
   });
@@ -20,7 +21,7 @@ const ProposalLink = ({ id }: ProposalLinkProps) => {
 
   return (
     <ExternalLink href={`${base}/proposals/${id}`}>
-      <Hash text={label} />
+      {text ? text : <Hash text={label} />}
     </ExternalLink>
   );
 };

apps/explorer/src/app/components/markets/market-details.tsx

@@ -2,11 +2,10 @@ import {
   addDecimalsFormatNumber,
   formatNumberPercentage,
   getMarketExpiryDateFormatted,
-  t,
-} from '@vegaprotocol/react-helpers';
-import type { MarketInfoNoCandlesQuery } from '@vegaprotocol/market-info';
+} from '@vegaprotocol/utils';
+import { t } from '@vegaprotocol/i18n';
+import type { MarketInfoWithData } from '@vegaprotocol/market-info';
 import { MarketInfoTable } from '@vegaprotocol/market-info';
-import pick from 'lodash/pick';
 import {
   MarketStateMapping,
   MarketTradingModeMapping,
@@ -17,11 +16,7 @@ import BigNumber from 'bignumber.js';
 import { useMemo } from 'react';
 import { Link } from 'react-router-dom';
 
-export const MarketDetails = ({
-  market,
-}: {
-  market: MarketInfoNoCandlesQuery['market'];
-}) => {
+export const MarketDetails = ({ market }: { market: MarketInfoWithData }) => {
   const quoteUnit = market?.tradableInstrument.instrument.product.quoteName;
   const assetId = useMemo(
     () => market?.tradableInstrument.instrument.product?.settlementAsset.id,
@@ -32,7 +27,9 @@ export const MarketDetails = ({
   if (!market) return null;
 
   const keyDetails = {
-    ...pick(market, 'decimalPlaces', 'positionDecimalPlaces', 'tradingMode'),
+    decimalPlaces: market.decimalPlaces,
+    positionDecimalPlaces: market.positionDecimalPlaces,
+    tradingMode: market.tradingMode,
     state: MarketStateMapping[market.state],
   };
   const assetDecimals =
@@ -184,9 +181,8 @@ export const MarketDetails = ({
       content: (
         <>
           <p className="text-xs mb-4">
-            {`For liquidity orders count towards a commitment they have to be
-        within either the liquidity or price monitoring bounds (whichever is
-        tighter).`}
+            {`For liquidity orders to count towards a commitment, they must be
+            within the liquidity monitoring bounds.`}
           </p>
           <p className="text-xs mb-4">
             {`The liquidity price range is a ${liquidityPriceRange} difference from the mid
@@ -249,7 +245,7 @@ export const MarketDetails = ({
     <>
       {panels.map((p) => (
         <div className="mb-3">
-          <h2 className="font-alpha text-xl">{p.title}</h2>
+          <h2 className="font-alpha calt text-xl">{p.title}</h2>
           {p.content}
         </div>
       ))}

apps/explorer/src/app/components/markets/markets-table.tsx

@@ -1,13 +1,13 @@
 import type { MarketFieldsFragment } from '@vegaprotocol/market-list';
-import { t } from '@vegaprotocol/react-helpers';
-import type {
-  VegaICellRendererParams,
-  VegaValueGetterParams,
-} from '@vegaprotocol/ui-toolkit';
+import { t } from '@vegaprotocol/i18n';
 import { ButtonLink } from '@vegaprotocol/ui-toolkit';
 import type { AgGridReact } from 'ag-grid-react';
 import { AgGridColumn } from 'ag-grid-react';
-import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
+import { AgGridDynamic as AgGrid } from '@vegaprotocol/datagrid';
+import type {
+  VegaICellRendererParams,
+  VegaValueGetterParams,
+} from '@vegaprotocol/datagrid';
 import { useRef, useLayoutEffect } from 'react';
 import { BREAKPOINT_MD } from '../../config/breakpoints';
 import { MarketStateMapping } from '@vegaprotocol/types';

apps/explorer/src/app/components/nested-data-list/nested-data-list.tsx

@@ -83,7 +83,7 @@ const NestedDataListItem = ({
   });
 
   const titleClasses = classNames({
-    'text-xl pl-4 border-l-4 font-alpha': hasChildren,
+    'text-xl pl-4 border-l-4 font-alpha calt': hasChildren,
     'text-base font-medium whitespace-nowrap': !hasChildren,
   });
 

apps/explorer/src/app/components/order-details/amend-order-details.tsx

@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import { useExplorerDeterministicOrderQuery } from './__generated__/Order';
 import { MarketLink } from '../links';
 import PriceInMarket from '../price-in-market/price-in-market';

apps/explorer/src/app/components/order-details/deterministic-order-details.tsx

@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import { useExplorerDeterministicOrderQuery } from './__generated__/Order';
 import { MarketLink } from '../links';
 import PriceInMarket from '../price-in-market/price-in-market';
@@ -101,7 +101,7 @@ const DeterministicOrderDetails = ({
                   {t('Remaining')}
                 </h2>
                 <h5 className="text-lg font-medium text-gray-500 mb-0">
-                  {o.remaining}
+                  <SizeInMarket size={o.remaining} marketId={o.market.id} />
                 </h5>
               </div>
             )}

apps/explorer/src/app/components/order-details/lib/order-labels.tsx

@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import type * as Schema from '@vegaprotocol/types';
 import type { components } from '../../../../types/explorer';
 

apps/explorer/src/app/components/page-header/page-header.tsx

@@ -20,7 +20,7 @@ export const PageHeader = ({
   copy = false,
   className,
 }: PageHeaderProps) => {
-  const titleClasses = 'text-4xl xl:text-5xl uppercase font-alpha';
+  const titleClasses = 'text-4xl xl:text-5xl uppercase font-alpha calt';
   return (
     <header className={className}>
       <span className={`${titleClasses} block`}>{prefix}</span>

apps/explorer/src/app/components/page-helpers/index.ts

@@ -0,0 +1 @@
+export * from './page-actions';

apps/explorer/src/app/components/page-helpers/page-actions.tsx

@@ -0,0 +1,10 @@
+import type { HTMLAttributes } from 'react';
+
+export const PageActions = ({
+  children,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) => (
+  <div className="flex flex-row items-start gap-1" {...props}>
+    {children}
+  </div>
+);

apps/explorer/src/app/components/page-helpers/page-title.tsx

@@ -0,0 +1,45 @@
+import classNames from 'classnames';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { useDocumentTitle } from '../../hooks/use-document-title';
+import { RouteTitle } from '../route-title';
+import { PageActions } from './page-actions';
+
+type PageTitleProps = {
+  /**
+   * The page title
+   * (also sets the document title unless overwritten by
+   * `documentTitle` property)
+   */
+  title: string;
+  /**
+   * The react node that consists of CTA buttons, links, etc.
+   */
+  actions?: ReactNode;
+  /**
+   * Overwrites the document title
+   */
+  documentTitle?: Parameters<typeof useDocumentTitle>[0];
+} & Omit<HTMLAttributes<HTMLHeadingElement>, 'children'>;
+
+export const PageTitle = ({
+  title,
+  actions,
+  documentTitle,
+  className,
+  ...props
+}: PageTitleProps) => {
+  useDocumentTitle(
+    documentTitle && documentTitle.length > 0 ? documentTitle : [title]
+  );
+  return (
+    <div
+      className="flex flex-col md:flex-row gap-1 justify-between content-start mb-8"
+      data-testid="page-title"
+    >
+      <RouteTitle className={classNames('mb-1', className)} {...props}>
+        {title}
+      </RouteTitle>
+      {actions && <PageActions>{actions}</PageActions>}
+    </div>
+  );
+};

apps/explorer/src/app/components/price-in-market/price-in-market.tsx

@@ -1,4 +1,5 @@
-import { addDecimalsFormatNumber, t } from '@vegaprotocol/react-helpers';
+import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
+import { t } from '@vegaprotocol/i18n';
 import isUndefined from 'lodash/isUndefined';
 import { useExplorerMarketQuery } from '../links/market-link/__generated__/Market';
 import get from 'lodash/get';

apps/explorer/src/app/components/proposals/proposals-table.tsx

@@ -1,21 +1,18 @@
-import type { ProposalListFieldsFragment } from '@vegaprotocol/governance';
-import { VoteProgress } from '@vegaprotocol/governance';
+import type { ProposalListFieldsFragment } from '@vegaprotocol/proposals';
+import { VoteProgress } from '@vegaprotocol/proposals';
 import type { AgGridReact } from 'ag-grid-react';
 import { AgGridColumn } from 'ag-grid-react';
+import { ExternalLink } from '@vegaprotocol/ui-toolkit';
+import { AgGridDynamic as AgGrid } from '@vegaprotocol/datagrid';
 import type {
   VegaICellRendererParams,
   VegaValueFormatterParams,
-} from '@vegaprotocol/ui-toolkit';
-import { ExternalLink } from '@vegaprotocol/ui-toolkit';
-import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
+} from '@vegaprotocol/datagrid';
 import { useLayoutEffect, useMemo, useRef, useState } from 'react';
 import type { RowClickedEvent } from 'ag-grid-community';
-import {
-  getDateTimeFormat,
-  NetworkParams,
-  t,
-  useNetworkParams,
-} from '@vegaprotocol/react-helpers';
+import { getDateTimeFormat } from '@vegaprotocol/utils';
+import { t } from '@vegaprotocol/i18n';
+import { NetworkParams, useNetworkParams } from '@vegaprotocol/react-helpers';
 import { ProposalStateMapping } from '@vegaprotocol/types';
 import BigNumber from 'bignumber.js';
 import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';

apps/explorer/src/app/components/render-fetched/index.tsx

@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import { StatusMessage } from '../status-message';
 
 interface RenderFetchedProps {

apps/explorer/src/app/components/route-title/index.tsx

@@ -13,7 +13,7 @@ export const RouteTitle = ({
   ...props
 }: RouteTitleProps) => {
   const classes = classnames(
-    'font-alpha',
+    'font-alpha calt',
     'text-4xl',
     'uppercase',
     'mb-8',

apps/explorer/src/app/components/router-error-boundary/index.tsx

@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import React from 'react';
 
 interface RouteErrorBoundaryProps {

apps/explorer/src/app/components/search/search.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useState } from 'react';
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import { Button, Input, InputError } from '@vegaprotocol/ui-toolkit';
 import { useForm } from 'react-hook-form';
 import { useNavigate } from 'react-router-dom';

apps/explorer/src/app/components/size-in-asset/size-in-asset.tsx

@@ -1,5 +1,5 @@
 import { useAssetDataProvider } from '@vegaprotocol/assets';
-import { addDecimalsFormatNumber } from '@vegaprotocol/react-helpers';
+import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
 import { AssetLink } from '../links';
 
 export type DecimalSource = 'ASSET';

apps/explorer/src/app/components/size-in-market/size-in-market.tsx

@@ -1,4 +1,4 @@
-import { addDecimalsFormatNumber } from '@vegaprotocol/react-helpers';
+import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
 import { useExplorerMarketQuery } from '../links/market-link/__generated__/Market';
 
 export type DecimalSource = 'MARKET';

apps/explorer/src/app/components/status-message/index.tsx

@@ -11,7 +11,7 @@ export const StatusMessage = ({
   className,
   ...props
 }: StatusMessageProps) => {
-  const classes = classnames('font-alpha text-2xl mb-28', className);
+  const classes = classnames('font-alpha calt text-2xl mb-28', className);
   return (
     <h3 className={classes} {...props}>
       {children}

apps/explorer/src/app/components/sub-heading/index.tsx

@@ -12,7 +12,7 @@ export const SubHeading = ({
   ...props
 }: SubHeadingProps) => {
   const classes = classnames(
-    'font-alpha',
+    'font-alpha calt',
     'text-2xl',
     'uppercase',
     'mt-8 mb-2',

apps/explorer/src/app/components/time-ago/index.tsx

@@ -1,5 +1,5 @@
 import { formatDistanceToNowStrict } from 'date-fns';
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import { useEffect, useState } from 'react';
 
 interface TimeAgoProps {

apps/explorer/src/app/components/time/index.tsx

@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 
 interface TimeProps {
   date: string | null | undefined;

apps/explorer/src/app/components/truncate/truncate.tsx

@@ -1,4 +1,4 @@
-import { truncateByChars } from '@vegaprotocol/react-helpers';
+import { truncateByChars } from '@vegaprotocol/utils';
 import * as React from 'react';
 
 interface TruncateInlineProps {

apps/explorer/src/app/components/txs/details/chain-events/tx-builtin-deposit.spec.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 import { TxDetailsChainEventBuiltinDeposit } from './tx-builtin-deposit';
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 
 import type { components } from '../../../../../types/explorer';
 import omit from 'lodash/omit';

apps/explorer/src/app/components/txs/details/chain-events/tx-builtin-deposit.tsx

@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import { AssetLink, PartyLink } from '../../../links';

apps/explorer/src/app/components/txs/details/chain-events/tx-builtin-withdrawal.spec.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 import { TxDetailsChainEventBuiltinWithdrawal } from './tx-builtin-withdrawal';
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 
 import type { components } from '../../../../../types/explorer';
 import omit from 'lodash/omit';

apps/explorer/src/app/components/txs/details/chain-events/tx-builtin-withdrawal.tsx

@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import { AssetLink, PartyLink } from '../../../links';

apps/explorer/src/app/components/txs/details/chain-events/tx-erc20-asset-delist.spec.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 
 import type { components } from '../../../../../types/explorer';
 import omit from 'lodash/omit';

apps/explorer/src/app/components/txs/details/chain-events/tx-erc20-asset-delist.tsx

@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import { AssetLink } from '../../../links';

apps/explorer/src/app/components/txs/details/chain-events/tx-erc20-asset-limits-updated.spec.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 
 import type { components } from '../../../../../types/explorer';
 import omit from 'lodash/omit';

apps/explorer/src/app/components/txs/details/chain-events/tx-erc20-asset-limits-updated.tsx

@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import { AssetLink } from '../../../links';

apps/explorer/src/app/components/txs/details/chain-events/tx-erc20-asset-list.spec.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 
 import type { components } from '../../../../../types/explorer';
 import omit from 'lodash/omit';

apps/explorer/src/app/components/txs/details/chain-events/tx-erc20-asset-list.tsx

@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import { AssetLink } from '../../../links';

apps/explorer/src/app/components/txs/details/chain-events/tx-erc20-bridge-pause.spec.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import { TxDetailsChainEventErc20BridgePause } from './tx-erc20-bridge-pause';
 
 describe('Chain Event: ERC20 bridge pause', () => {

apps/explorer/src/app/components/txs/details/chain-events/tx-erc20-bridge-pause.tsx

@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import { TableRow, TableCell } from '../../../table';
 
 export interface TxDetailsChainEventErc20BridgePauseProps {

apps/explorer/src/app/components/txs/details/chain-events/tx-erc20-deposit.spec.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 
 import type { components } from '../../../../../types/explorer';
 import omit from 'lodash/omit';

apps/explorer/src/app/components/txs/details/chain-events/tx-erc20-deposit.tsx

@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import { AssetLink, PartyLink } from '../../../links';

apps/explorer/src/app/components/txs/details/chain-events/tx-erc20-withdrawal.spec.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 
 import type { components } from '../../../../../types/explorer';
 import omit from 'lodash/omit';

apps/explorer/src/app/components/txs/details/chain-events/tx-erc20-withdrawal.tsx

@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import { AssetLink } from '../../../links';

apps/explorer/src/app/components/txs/details/chain-events/tx-multisig-signer.spec.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 
 import type { components } from '../../../../../types/explorer';
 import { MockedProvider } from '@apollo/client/testing';

apps/explorer/src/app/components/txs/details/chain-events/tx-multisig-signer.tsx

@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import { getBlockTime } from './lib/get-block-time';

apps/explorer/src/app/components/txs/details/chain-events/tx-multisig-threshold.spec.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 
 import type { components } from '../../../../../types/explorer';
 import { MockedProvider } from '@apollo/client/testing';

apps/explorer/src/app/components/txs/details/chain-events/tx-multisig-threshold.tsx

@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import isNumber from 'lodash/isNumber';

apps/explorer/src/app/components/txs/details/chain-events/tx-stake-deposit.spec.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 
 import type { components } from '../../../../../types/explorer';
 import omit from 'lodash/omit';

apps/explorer/src/app/components/txs/details/chain-events/tx-stake-deposit.tsx

@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import { PartyLink } from '../../../links';

apps/explorer/src/app/components/txs/details/chain-events/tx-stake-remove.spec.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 
 import type { components } from '../../../../../types/explorer';
 import omit from 'lodash/omit';

apps/explorer/src/app/components/txs/details/chain-events/tx-stake-remove.tsx

@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import { PartyLink } from '../../../links';

apps/explorer/src/app/components/txs/details/chain-events/tx-stake-totalsupply.spec.tsx

@@ -1,5 +1,5 @@
 import { render } from '@testing-library/react';
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 
 import type { components } from '../../../../../types/explorer';
 import omit from 'lodash/omit';

apps/explorer/src/app/components/txs/details/chain-events/tx-stake-totalsupply.tsx

@@ -1,4 +1,5 @@
-import { formatNumber, t, toBigNum } from '@vegaprotocol/react-helpers';
+import { formatNumber, toBigNum } from '@vegaprotocol/utils';
+import { t } from '@vegaprotocol/i18n';
 import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import {

apps/explorer/src/app/components/txs/details/liquidity-provision/components/liquidity-provision-details-row.tsx

@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 
 import type { components } from '../../../../../../types/explorer';
 import { TableRow } from '../../../../table';

apps/explorer/src/app/components/txs/details/liquidity-provision/components/liquidity-provision-offset.tsx

@@ -1,5 +1,5 @@
 import { useExplorerSettlementAssetForMarketQuery } from '../__generated__/Explorer-settlement-asset';
-import { addDecimalsFormatNumber } from '@vegaprotocol/react-helpers';
+import { addDecimalsFormatNumber } from '@vegaprotocol/utils';
 import type { ExplorerSettlementAssetForMarketQuery } from '../__generated__/Explorer-settlement-asset';
 import type { VegaSide } from './liquidity-provision-details-row';
 

apps/explorer/src/app/components/txs/details/liquidity-provision/liquidity-provision-details.tsx

@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 
 import type { components } from '../../../../../types/explorer';
 import type { LiquiditySubmission } from '../tx-liquidity-submission';

apps/explorer/src/app/components/txs/details/oracle-data/data-submission-json-oracle.tsx

@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 
 interface JSONOracleDataProps {
   payload: string;

apps/explorer/src/app/components/txs/details/oracle-data/data-submission-open-oracle.tsx

@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import { NestedDataList } from '../../../nested-data-list';
 import { OpenOraclePrices } from './open-oracle/open-oracle-prices';
 

apps/explorer/src/app/components/txs/details/oracle-data/open-oracle/open-oracle-prices.tsx

@@ -1,4 +1,4 @@
-import { t } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/i18n';
 import { CopyWithTooltip } from '@vegaprotocol/ui-toolkit';
 import { TableRow } from '../../../../table';
 import { TruncateInline } from '../../../../truncate/truncate';

apps/explorer/src/app/components/txs/details/proposal/Proposal.graphql

@@ -0,0 +1,7 @@
+query ExplorerProposalStatus($id: ID!) {
+  proposal(id: $id) {
+    id
+    state
+    rejectionReason
+  }
+}

apps/explorer/src/app/components/txs/details/proposal/SignatureBundle.graphql

@@ -0,0 +1,19 @@
+query ExplorerNewAssetSignatureBundle($id: ID!) {
+  erc20ListAssetBundle(assetId: $id) {
+    signatures
+    nonce
+  }
+  asset(id: $id) {
+    status
+  }
+}
+
+query ExplorerUpdateAssetSignatureBundle($id: ID!) {
+  erc20SetAssetLimitsBundle(proposalId: $id) {
+    signatures
+    nonce
+  }
+  asset(id: $id) {
+    status
+  }
+}

apps/explorer/src/app/components/txs/details/proposal/__generated__/Proposal.ts

@@ -0,0 +1,50 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type ExplorerProposalStatusQueryVariables = Types.Exact<{
+  id: Types.Scalars['ID'];
+}>;
+
+
+export type ExplorerProposalStatusQuery = { __typename?: 'Query', proposal?: { __typename?: 'Proposal', id?: string | null, state: Types.ProposalState, rejectionReason?: Types.ProposalRejectionReason | null } | null };
+
+
+export const ExplorerProposalStatusDocument = gql`
+    query ExplorerProposalStatus($id: ID!) {
+  proposal(id: $id) {
+    id
+    state
+    rejectionReason
+  }
+}
+    `;
+
+/**
+ * __useExplorerProposalStatusQuery__
+ *
+ * To run a query within a React component, call `useExplorerProposalStatusQuery` and pass it any options that fit your needs.
+ * When your component renders, `useExplorerProposalStatusQuery` 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 } = useExplorerProposalStatusQuery({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useExplorerProposalStatusQuery(baseOptions: Apollo.QueryHookOptions<ExplorerProposalStatusQuery, ExplorerProposalStatusQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ExplorerProposalStatusQuery, ExplorerProposalStatusQueryVariables>(ExplorerProposalStatusDocument, options);
+      }
+export function useExplorerProposalStatusLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerProposalStatusQuery, ExplorerProposalStatusQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ExplorerProposalStatusQuery, ExplorerProposalStatusQueryVariables>(ExplorerProposalStatusDocument, options);
+        }
+export type ExplorerProposalStatusQueryHookResult = ReturnType<typeof useExplorerProposalStatusQuery>;
+export type ExplorerProposalStatusLazyQueryHookResult = ReturnType<typeof useExplorerProposalStatusLazyQuery>;
+export type ExplorerProposalStatusQueryResult = Apollo.QueryResult<ExplorerProposalStatusQuery, ExplorerProposalStatusQueryVariables>;

apps/explorer/src/app/components/txs/details/proposal/__generated__/SignatureBundle.ts

@@ -0,0 +1,98 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type ExplorerNewAssetSignatureBundleQueryVariables = Types.Exact<{
+  id: Types.Scalars['ID'];
+}>;
+
+
+export type ExplorerNewAssetSignatureBundleQuery = { __typename?: 'Query', erc20ListAssetBundle?: { __typename?: 'Erc20ListAssetBundle', signatures: string, nonce: string } | null, asset?: { __typename?: 'Asset', status: Types.AssetStatus } | null };
+
+export type ExplorerUpdateAssetSignatureBundleQueryVariables = Types.Exact<{
+  id: Types.Scalars['ID'];
+}>;
+
+
+export type ExplorerUpdateAssetSignatureBundleQuery = { __typename?: 'Query', erc20SetAssetLimitsBundle: { __typename?: 'ERC20SetAssetLimitsBundle', signatures: string, nonce: string }, asset?: { __typename?: 'Asset', status: Types.AssetStatus } | null };
+
+
+export const ExplorerNewAssetSignatureBundleDocument = gql`
+    query ExplorerNewAssetSignatureBundle($id: ID!) {
+  erc20ListAssetBundle(assetId: $id) {
+    signatures
+    nonce
+  }
+  asset(id: $id) {
+    status
+  }
+}
+    `;
+
+/**
+ * __useExplorerNewAssetSignatureBundleQuery__
+ *
+ * To run a query within a React component, call `useExplorerNewAssetSignatureBundleQuery` and pass it any options that fit your needs.
+ * When your component renders, `useExplorerNewAssetSignatureBundleQuery` 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 } = useExplorerNewAssetSignatureBundleQuery({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useExplorerNewAssetSignatureBundleQuery(baseOptions: Apollo.QueryHookOptions<ExplorerNewAssetSignatureBundleQuery, ExplorerNewAssetSignatureBundleQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ExplorerNewAssetSignatureBundleQuery, ExplorerNewAssetSignatureBundleQueryVariables>(ExplorerNewAssetSignatureBundleDocument, options);
+      }
+export function useExplorerNewAssetSignatureBundleLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerNewAssetSignatureBundleQuery, ExplorerNewAssetSignatureBundleQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ExplorerNewAssetSignatureBundleQuery, ExplorerNewAssetSignatureBundleQueryVariables>(ExplorerNewAssetSignatureBundleDocument, options);
+        }
+export type ExplorerNewAssetSignatureBundleQueryHookResult = ReturnType<typeof useExplorerNewAssetSignatureBundleQuery>;
+export type ExplorerNewAssetSignatureBundleLazyQueryHookResult = ReturnType<typeof useExplorerNewAssetSignatureBundleLazyQuery>;
+export type ExplorerNewAssetSignatureBundleQueryResult = Apollo.QueryResult<ExplorerNewAssetSignatureBundleQuery, ExplorerNewAssetSignatureBundleQueryVariables>;
+export const ExplorerUpdateAssetSignatureBundleDocument = gql`
+    query ExplorerUpdateAssetSignatureBundle($id: ID!) {
+  erc20SetAssetLimitsBundle(proposalId: $id) {
+    signatures
+    nonce
+  }
+  asset(id: $id) {
+    status
+  }
+}
+    `;
+
+/**
+ * __useExplorerUpdateAssetSignatureBundleQuery__
+ *
+ * To run a query within a React component, call `useExplorerUpdateAssetSignatureBundleQuery` and pass it any options that fit your needs.
+ * When your component renders, `useExplorerUpdateAssetSignatureBundleQuery` 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 } = useExplorerUpdateAssetSignatureBundleQuery({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useExplorerUpdateAssetSignatureBundleQuery(baseOptions: Apollo.QueryHookOptions<ExplorerUpdateAssetSignatureBundleQuery, ExplorerUpdateAssetSignatureBundleQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ExplorerUpdateAssetSignatureBundleQuery, ExplorerUpdateAssetSignatureBundleQueryVariables>(ExplorerUpdateAssetSignatureBundleDocument, options);
+      }
+export function useExplorerUpdateAssetSignatureBundleLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerUpdateAssetSignatureBundleQuery, ExplorerUpdateAssetSignatureBundleQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ExplorerUpdateAssetSignatureBundleQuery, ExplorerUpdateAssetSignatureBundleQueryVariables>(ExplorerUpdateAssetSignatureBundleDocument, options);
+        }
+export type ExplorerUpdateAssetSignatureBundleQueryHookResult = ReturnType<typeof useExplorerUpdateAssetSignatureBundleQuery>;
+export type ExplorerUpdateAssetSignatureBundleLazyQueryHookResult = ReturnType<typeof useExplorerUpdateAssetSignatureBundleLazyQuery>;
+export type ExplorerUpdateAssetSignatureBundleQueryResult = Apollo.QueryResult<ExplorerUpdateAssetSignatureBundleQuery, ExplorerUpdateAssetSignatureBundleQueryVariables>;