fix: remove calt from nav and toasts

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

.github/workflows/cypress-live-test.yml

@@ -18,6 +18,12 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v2
 
+      - name: Use Node.js 16
+        id: Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16.15.1
+
       - name: Run Cypress tests
         uses: cypress-io/github-action@v4
         with:

.github/workflows/generate-queries.yml

@@ -19,7 +19,7 @@ jobs:
         id: Node
         uses: actions/setup-node@v2
         with:
-          node-version: 16.14.0
+          node-version: 16.15.1
       - name: Install root dependencies
         run: yarn install
       - name: Generate queries

.github/workflows/lint_pr.yml

@@ -16,7 +16,7 @@ jobs:
         id: Node
         uses: actions/setup-node@v2
         with:
-          node-version: 16.14.0
+          node-version: 16.15.1
       - name: Install root dependencies
         run: yarn install
       - name: Check PR title

.github/workflows/process-tranches.yml

@@ -19,7 +19,7 @@ jobs:
         id: Node
         uses: actions/setup-node@v2
         with:
-          node-version: 16.14.0
+          node-version: 16.15.1
       - name: Install root dependencies
         run: yarn install
       - name: Generate queries

.github/workflows/publish-npm.yml

@@ -0,0 +1,47 @@
+name: Publish libs to npm
+
+on:
+  workflow_dispatch:
+    inputs:
+      project:
+        description: 'Monorepo project to publish'
+        required: true
+        type: choice
+        options:
+          - ui-toolkit
+          - react-helpers
+          - tailwindcss-config
+          - types
+
+jobs:
+  publish:
+    name: Build & Publish - Tag
+    runs-on: ubuntu-latest
+    permissions:
+      contents: 'read'
+      actions: 'read'
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - name: User Node.js 16
+        id: Node
+        uses: actions/setup-node@v3
+        with:
+          node-version: 16.15.1
+      - name: Restore node_modules from cache
+        uses: actions/cache@v3
+        with:
+          path: '**/node_modules'
+          key: node_modules-${{ hashFiles('**/yarn.lock') }}
+      - name: Install root dependencies
+        run: yarn install --frozen-lockfile
+      - name: Build project
+        run: yarn nx build ${{inputs.project}}
+      - name: Publish project to @vegaprotocol
+        uses: JS-DevTools/npm-publish@v1
+        with:
+          token: ${{ secrets.NPM_TOKEN }}
+          package: dist/libs/${{inputs.project}}/package.json
+          access: public

.github/workflows/test.yml

@@ -26,7 +26,7 @@ jobs:
         id: Node
         uses: actions/setup-node@v3
         with:
-          node-version: 16.14.0
+          node-version: 16.15.1
       - name: Restore node_modules from cache
         uses: actions/cache@v3
         with:

.nvmrc

@@ -1 +1 @@
-16.14.0
+16.15.1

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

@@ -4,20 +4,11 @@ context('Asset page', { tags: '@regression' }, () => {
   describe('Verify elements on page', () => {
     before('Navigate to assets page', () => {
       cy.visit('/assets');
-
-      // Check we have enough enough assets
-      cy.getAssets().then((assets) => {
-        assert.isAtLeast(
-          Object.keys(assets).length,
-          5,
-          'Ensuring we have at least 5 assets to test'
-        );
-      });
     });
 
     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');
         });
       });
@@ -34,23 +25,23 @@ 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');
         });
       });
     });
 
-    it('should open details dialog when clicked on "View details"', () => {
+    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');
           cy.get(`[row-id="${asset.id}"] [col-id="actions"] button`)
             .eq(0)
             .click();
-          cy.getByTestId('dialog-content').should('be.visible');
-          cy.getByTestId('dialog-close').click();
+          cy.getByTestId('asset-header').should('have.text', asset.name);
+          cy.go('back');
         });
       });
     });

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/src/app/components/assets/assets-table.spec.tsx

@@ -1,22 +1,35 @@
 import { render, waitFor } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
 import { assetsList } from '../../mocks/assets';
 import { AssetsTable } from './assets-table';
 
 describe('AssetsTable', () => {
   it('shows loading message on first render', async () => {
-    const res = render(<AssetsTable data={null} />);
+    const res = render(
+      <MemoryRouter>
+        <AssetsTable data={null} />
+      </MemoryRouter>
+    );
     expect(await res.findByText('Loading...')).toBeInTheDocument();
   });
 
   it('shows no data message if no assets found', async () => {
-    const res = render(<AssetsTable data={[]} />);
+    const res = render(
+      <MemoryRouter>
+        <AssetsTable data={[]} />
+      </MemoryRouter>
+    );
     expect(
       await res.findByText('This chain has no assets')
     ).toBeInTheDocument();
   });
 
   it('shows a table/list with all the assets', async () => {
-    const res = render(<AssetsTable data={assetsList} />);
+    const res = render(
+      <MemoryRouter>
+        <AssetsTable data={assetsList} />
+      </MemoryRouter>
+    );
     await waitFor(() => {
       const rowA1 = res.container.querySelector('[row-id="123"]');
       expect(rowA1).toBeInTheDocument();

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

@@ -1,5 +1,4 @@
 import type { AssetFieldsFragment } from '@vegaprotocol/assets';
-import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
 import { AssetTypeMapping, AssetStatusMapping } from '@vegaprotocol/assets';
 import { t } from '@vegaprotocol/react-helpers';
 import type { VegaICellRendererParams } from '@vegaprotocol/ui-toolkit';
@@ -9,15 +8,14 @@ import { AgGridColumn } from 'ag-grid-react';
 import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
 import { useRef, useLayoutEffect } from 'react';
 import { BREAKPOINT_MD } from '../../config/breakpoints';
+import { useNavigate } from 'react-router-dom';
+import type { RowClickedEvent } from 'ag-grid-community';
 
 type AssetsTableProps = {
   data: AssetFieldsFragment[] | null;
 };
 export const AssetsTable = ({ data }: AssetsTableProps) => {
-  const openAssetDetailsDialog = useAssetDetailsDialogStore(
-    (state) => state.open
-  );
-
+  const navigate = useNavigate();
   const ref = useRef<AgGridReact>(null);
   const showColumnsOnDesktop = () => {
     ref.current?.columnApi.setColumnsVisible(
@@ -49,17 +47,23 @@ export const AssetsTable = ({ data }: AssetsTableProps) => {
         autoHeight: true,
       }}
       suppressCellFocus={true}
-      onGridReady={() => {
-        showColumnsOnDesktop();
+      onRowClicked={({ data }: RowClickedEvent) => {
+        navigate(data.id);
       }}
     >
       <AgGridColumn headerName={t('Symbol')} field="symbol" />
       <AgGridColumn headerName={t('Name')} field="name" />
-      <AgGridColumn flex="2" headerName={t('ID')} field="id" />
+      <AgGridColumn
+        flex="2"
+        headerName={t('ID')}
+        field="id"
+        hide={window.innerWidth < BREAKPOINT_MD}
+      />
       <AgGridColumn
         colId="type"
         headerName={t('Type')}
         field="source.__typename"
+        hide={window.innerWidth < BREAKPOINT_MD}
         valueFormatter={({ value }: { value?: string }) =>
           value && AssetTypeMapping[value].value
         }
@@ -67,6 +71,7 @@ export const AssetsTable = ({ data }: AssetsTableProps) => {
       <AgGridColumn
         headerName={t('Status')}
         field="status"
+        hide={window.innerWidth < BREAKPOINT_MD}
         valueFormatter={({ value }: { value?: string }) =>
           value && AssetStatusMapping[value].value
         }
@@ -83,28 +88,13 @@ export const AssetsTable = ({ data }: AssetsTableProps) => {
           value,
         }: VegaICellRendererParams<AssetFieldsFragment, 'id'>) =>
           value ? (
-            <div className="pb-1">
-              <ButtonLink
-                onClick={(e) => {
-                  openAssetDetailsDialog(value, e.target as HTMLElement);
-                }}
-              >
-                {t('View details')}
-              </ButtonLink>{' '}
-              <span className="max-md:hidden">
-                <ButtonLink
-                  onClick={(e) => {
-                    openAssetDetailsDialog(
-                      value,
-                      e.target as HTMLElement,
-                      true
-                    );
-                  }}
-                >
-                  {t('View JSON')}
-                </ButtonLink>
-              </span>
-            </div>
+            <ButtonLink
+              onClick={(e) => {
+                navigate(value);
+              }}
+            >
+              {t('View details')}
+            </ButtonLink>
           ) : (
             ''
           )

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

@@ -0,0 +1,50 @@
+query ExplorerEpoch($id: ID!) {
+  epoch(id: $id) {
+    id
+    timestamps {
+      start
+      end
+      firstBlock
+      lastBlock
+    }
+  }
+}
+
+query ExplorerFutureEpoch {
+  networkParameter(key: "validators.epoch.length") {
+    value
+  }
+
+  epoch {
+    id
+    timestamps {
+      start
+    }
+  }
+}
+
+# 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/__generated__/Epoch.ts

@@ -0,0 +1,99 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type ExplorerEpochQueryVariables = Types.Exact<{
+  id: Types.Scalars['ID'];
+}>;
+
+
+export type ExplorerEpochQuery = { __typename?: 'Query', epoch: { __typename?: 'Epoch', id: string, timestamps: { __typename?: 'EpochTimestamps', start?: any | null, end?: any | null, firstBlock: string, lastBlock?: string | null } } };
+
+export type ExplorerFutureEpochQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type ExplorerFutureEpochQuery = { __typename?: 'Query', networkParameter?: { __typename?: 'NetworkParameter', value: string } | null, epoch: { __typename?: 'Epoch', id: string, timestamps: { __typename?: 'EpochTimestamps', start?: any | null } } };
+
+
+export const ExplorerEpochDocument = gql`
+    query ExplorerEpoch($id: ID!) {
+  epoch(id: $id) {
+    id
+    timestamps {
+      start
+      end
+      firstBlock
+      lastBlock
+    }
+  }
+}
+    `;
+
+/**
+ * __useExplorerEpochQuery__
+ *
+ * To run a query within a React component, call `useExplorerEpochQuery` and pass it any options that fit your needs.
+ * When your component renders, `useExplorerEpochQuery` 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 } = useExplorerEpochQuery({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useExplorerEpochQuery(baseOptions: Apollo.QueryHookOptions<ExplorerEpochQuery, ExplorerEpochQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ExplorerEpochQuery, ExplorerEpochQueryVariables>(ExplorerEpochDocument, options);
+      }
+export function useExplorerEpochLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerEpochQuery, ExplorerEpochQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ExplorerEpochQuery, ExplorerEpochQueryVariables>(ExplorerEpochDocument, options);
+        }
+export type ExplorerEpochQueryHookResult = ReturnType<typeof useExplorerEpochQuery>;
+export type ExplorerEpochLazyQueryHookResult = ReturnType<typeof useExplorerEpochLazyQuery>;
+export type ExplorerEpochQueryResult = Apollo.QueryResult<ExplorerEpochQuery, ExplorerEpochQueryVariables>;
+export const ExplorerFutureEpochDocument = gql`
+    query ExplorerFutureEpoch {
+  networkParameter(key: "validators.epoch.length") {
+    value
+  }
+  epoch {
+    id
+    timestamps {
+      start
+    }
+  }
+}
+    `;
+
+/**
+ * __useExplorerFutureEpochQuery__
+ *
+ * To run a query within a React component, call `useExplorerFutureEpochQuery` and pass it any options that fit your needs.
+ * When your component renders, `useExplorerFutureEpochQuery` 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 } = useExplorerFutureEpochQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useExplorerFutureEpochQuery(baseOptions?: Apollo.QueryHookOptions<ExplorerFutureEpochQuery, ExplorerFutureEpochQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ExplorerFutureEpochQuery, ExplorerFutureEpochQueryVariables>(ExplorerFutureEpochDocument, options);
+      }
+export function useExplorerFutureEpochLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerFutureEpochQuery, ExplorerFutureEpochQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ExplorerFutureEpochQuery, ExplorerFutureEpochQueryVariables>(ExplorerFutureEpochDocument, options);
+        }
+export type ExplorerFutureEpochQueryHookResult = ReturnType<typeof useExplorerFutureEpochQuery>;
+export type ExplorerFutureEpochLazyQueryHookResult = ReturnType<typeof useExplorerFutureEpochLazyQuery>;
+export type ExplorerFutureEpochQueryResult = Apollo.QueryResult<ExplorerFutureEpochQuery, ExplorerFutureEpochQueryVariables>;

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

@@ -0,0 +1,56 @@
+import { render } from '@testing-library/react';
+import { IconForEpoch } from './epoch';
+
+const THE_PAST = 'Monday, 17 February 2022 11:44:09';
+const THE_FUTURE = 'Monday, 17 February 3023 11:44:09';
+
+describe('IconForEpoch', () => {
+  it('Handles malformed dates', () => {
+    const start = 'This is n0t a d4te';
+    const end = '📅';
+    const screen = render(<IconForEpoch start={start} end={end} />);
+
+    expect(screen.getByRole('img')).toHaveAttribute(
+      'aria-label',
+      'calendar icon'
+    );
+  });
+
+  it('defaults to a calendar icon', () => {
+    const start = null as unknown as string;
+    const end = null as unknown as string;
+    const screen = render(<IconForEpoch start={start} end={end} />);
+
+    expect(screen.getByRole('img')).toHaveAttribute(
+      'aria-label',
+      'calendar icon'
+    );
+  });
+
+  it('if start and end are both in the future, stick with calendar', () => {
+    const screen = render(<IconForEpoch start={THE_FUTURE} end={THE_FUTURE} />);
+
+    expect(screen.getByRole('img')).toHaveAttribute(
+      'aria-label',
+      'calendar icon'
+    );
+  });
+
+  it('if start is in the past and end is in the future, this is currently active', () => {
+    const screen = render(<IconForEpoch start={THE_PAST} end={THE_FUTURE} />);
+
+    expect(screen.getByRole('img')).toHaveAttribute(
+      'aria-label',
+      'circle icon'
+    );
+  });
+
+  it('if start and end are in the paste, this is done', () => {
+    const screen = render(<IconForEpoch start={THE_PAST} end={THE_PAST} />);
+
+    expect(screen.getByRole('img')).toHaveAttribute(
+      'aria-label',
+      'tick-circle icon'
+    );
+  });
+});

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

@@ -0,0 +1,125 @@
+import { MockedProvider } from '@apollo/client/testing';
+import { render } from '@testing-library/react';
+import EpochMissingOverview, { calculateEpochData } from './epoch-missing';
+import { getSecondsFromInterval } from '@vegaprotocol/react-helpers';
+const START_DATE_PAST = 'Monday, 17 February 2022 11:44:09';
+
+describe('getSecondsFromInterval', () => {
+  it('returns 0 for bad data', () => {
+    expect(getSecondsFromInterval(null as unknown as string)).toEqual(0);
+    expect(getSecondsFromInterval('')).toEqual(0);
+    expect(getSecondsFromInterval('🧙')).toEqual(0);
+    expect(getSecondsFromInterval(2 as unknown as string)).toEqual(0);
+  });
+
+  it('parses out months from a capital M', () => {
+    expect(getSecondsFromInterval('2M')).toEqual(5184000);
+  });
+
+  it('parses out days from a capital D', () => {
+    expect(getSecondsFromInterval('1D')).toEqual(86400);
+  });
+
+  it('parses out hours from a lower case h', () => {
+    expect(getSecondsFromInterval('11h')).toEqual(39600);
+  });
+
+  it('parses out minutes from a lower case m', () => {
+    expect(getSecondsFromInterval('10m')).toEqual(600);
+  });
+
+  it('parses out seconds from a lower case s', () => {
+    expect(getSecondsFromInterval('99s')).toEqual(99);
+  });
+
+  it('parses complex examples', () => {
+    expect(getSecondsFromInterval('24h')).toEqual(86400);
+    expect(getSecondsFromInterval('1h30m')).toEqual(5400);
+    expect(getSecondsFromInterval('1D1h30m1s')).toEqual(91801);
+  });
+});
+
+describe('calculateEpochData', () => {
+  it('Handles bad data', () => {
+    const currentEpochId = null as unknown as string;
+    const missingEpochId = null as unknown as string;
+    const epochStart = null as unknown as string;
+    const epochLength = null as unknown as string;
+    const res = calculateEpochData(
+      currentEpochId,
+      missingEpochId,
+      epochStart,
+      epochLength
+    );
+
+    expect(res).toHaveProperty('label', 'Missing data');
+    expect(res).toHaveProperty('isInFuture', false);
+  });
+
+  it('Calculates that a bigger epoch number is in the future from basic data', () => {
+    const currentEpochId = '10';
+    const missingEpochId = '20';
+    const epochStart = '';
+    const epochLength = '';
+    const res = calculateEpochData(
+      currentEpochId,
+      missingEpochId,
+      epochStart,
+      epochLength
+    );
+
+    expect(res).toHaveProperty('isInFuture', true);
+  });
+
+  it('If it has an epoch length and a start time, it provides an estimate', () => {
+    const currentEpochId = '10';
+    const missingEpochId = '20';
+    const epochStart = START_DATE_PAST;
+    const epochLength = '1s';
+    const res = calculateEpochData(
+      currentEpochId,
+      missingEpochId,
+      epochStart,
+      epochLength
+    );
+
+    // 'Estimate: 17/02/2022, 11:44:19 - in less than a minute')
+    expect(res).toHaveProperty('label');
+    expect(res.label).toMatch(/^Estimate/);
+    expect(res.label).toMatch(/in less than a minute$/);
+  });
+
+  it('Provide decent string for past', () => {
+    const currentEpochId = '20';
+    const missingEpochId = '10';
+    const epochStart = START_DATE_PAST;
+    const epochLength = '1s';
+    const res = calculateEpochData(
+      currentEpochId,
+      missingEpochId,
+      epochStart,
+      epochLength
+    );
+
+    // 'Estimate: 17/02/2022, 11:44:19 - in less than a minute')
+    expect(res).toHaveProperty('label');
+    expect(res.label).toMatch(/^Estimate/);
+    expect(res.label).toMatch(/less than a minute ago$/);
+  });
+});
+
+describe('EpochMissingOverview', () => {
+  function renderComponent(missingEpochId: string) {
+    return render(
+      <MockedProvider>
+        <EpochMissingOverview missingEpochId={missingEpochId} />
+      </MockedProvider>
+    );
+  }
+
+  it('renders a - if no id is provided', () => {
+    const n = null as unknown as string;
+    const screen = renderComponent(n);
+    expect(screen.getByTestId('empty')).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,111 @@
+import { useExplorerFutureEpochQuery } from './__generated__/Epoch';
+
+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';
+
+export type EpochMissingOverviewProps = {
+  missingEpochId?: string;
+};
+
+/**
+ * Renders a set of details for an epoch that has no representation in the
+ * data node. This is primarily for one of two reasons:
+ *
+ * 1. The epoch hasn't happened yet
+ * 2. The epoch happened before a snapshot, and thus the details don't exist
+ *
+ * This component is used when the API has responded with no data for an epoch
+ * by ID, so we already know that we can't display start time/block etc.
+ *
+ * We can detect 1 if the epoch is a higher number than the current epoch
+ * We can detect 2 if the epoch is in the past, but we still get no response.
+ */
+const EpochMissingOverview = ({
+  missingEpochId,
+}: EpochMissingOverviewProps) => {
+  const { data, error, loading } = useExplorerFutureEpochQuery();
+
+  // This should not happen, but it's easily handled
+  if (!missingEpochId) {
+    return <span data-testid="empty">-</span>;
+  }
+
+  // No data should also not happen - we've requested the current epoch. This
+  // could happen at chain restart, but shouldn't. If it does, fallback.
+  if (!data || loading || error) {
+    return <span data-testid="empty">{missingEpochId}</span>;
+  }
+
+  // If we have enough information to predict a future or past block time, let's do it
+  if (
+    !missingEpochId ||
+    !data.epoch.id ||
+    !data.epoch.timestamps.start ||
+    !data?.networkParameter?.value
+  ) {
+    return <span data-testid="empty">{missingEpochId}</span>;
+  }
+
+  const { label, isInFuture } = calculateEpochData(
+    data.epoch.id,
+    missingEpochId,
+    data.epoch.timestamps.start,
+    data.networkParameter.value
+  );
+
+  return (
+    <Tooltip description={<p className="text-xs m-2">{label}</p>}>
+      <p>
+        {isInFuture ? (
+          <Icon name="calendar" className="mr-1" />
+        ) : (
+          <Icon name="outdated" className="mr-1" />
+        )}
+        {missingEpochId}
+      </p>
+    </Tooltip>
+  );
+};
+
+export function calculateEpochData(
+  currentEpochId: string,
+  missingEpochId: string,
+  epochStart: string,
+  epochLength: string
+) {
+  // Blank string will be return 0 seconds from getSecondsFromInterval
+  const epochLengthInSeconds = getSecondsFromInterval(epochLength);
+
+  if (!epochStart || !epochLength) {
+    // Let's just take a guess
+    return {
+      label: 'Missing data',
+      isInFuture: parseInt(missingEpochId) > parseInt(currentEpochId),
+    };
+  }
+
+  const startFrom = new Date(epochStart);
+
+  const diff = parseInt(missingEpochId) - parseInt(currentEpochId);
+  const futureDate = addSeconds(startFrom, diff * epochLengthInSeconds);
+
+  const label =
+    isValidDate(futureDate) && isValidDate(startFrom)
+      ? `Estimate: ${futureDate.toLocaleString()} - ${formatDistance(
+          futureDate,
+          startFrom,
+          { addSuffix: true }
+        )}`
+      : 'Missing data';
+
+  return {
+    label,
+    isInFuture: isFuture(futureDate),
+  };
+}
+
+export default EpochMissingOverview;

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

@@ -0,0 +1,127 @@
+import { useExplorerEpochQuery } from './__generated__/Epoch';
+
+import { t } from '@vegaprotocol/react-helpers';
+import { BlockLink } from '../links';
+import { Time } from '../time';
+import { TimeAgo } from '../time-ago';
+import EpochMissingOverview from './epoch-missing';
+import { Icon, Tooltip } from '@vegaprotocol/ui-toolkit';
+import type { IconProps } from '@vegaprotocol/ui-toolkit';
+import isPast from 'date-fns/isPast';
+
+const borderClass =
+  'border-solid border-2 border-vega-dark-200 border-collapse';
+
+export type EpochOverviewProps = {
+  id?: string;
+};
+
+/**
+ * Displays detailed information about an epoch, given an ID. This
+ * works for past epochs and current epochs - future epochs, and a
+ * few other situations (see epoch-missing) will not return us
+ * enough information to render this.
+ *
+ * The details are hidden in a tooltip, behind the epoch number
+ */
+const EpochOverview = ({ id }: EpochOverviewProps) => {
+  const { data, error, loading } = useExplorerEpochQuery({
+    variables: { id: id || '' },
+  });
+
+  const ti = data?.epoch.timestamps;
+  if (
+    error?.message &&
+    error.message.includes('no resource corresponding to this id')
+  ) {
+    return <EpochMissingOverview missingEpochId={id} />;
+  }
+
+  if (!ti || loading || error) {
+    return <span>{id}</span>;
+  }
+
+  const description = (
+    <table className="text-xs m-2">
+      <thead>
+        <tr>
+          <th></th>
+          <th className={`text-center ${borderClass}`}>{t('Block')}</th>
+          <th className={`text-center ${borderClass}`}>{t('Time')}</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th className={`px-2 ${borderClass}`}>{t('Start')}</th>
+          <td className={`px-2 ${borderClass}`}>
+            {ti.firstBlock ? <BlockLink height={ti.firstBlock} /> : '-'}
+          </td>
+          <td className={`px-2 ${borderClass}`}>
+            <Time date={ti.start} />
+            <br />
+            <TimeAgo date={ti.start} />
+          </td>
+        </tr>
+        <tr>
+          <th className={`px-2 ${borderClass}`}>{t('End')}</th>
+          <td className={`px-2 ${borderClass}`}>
+            {ti.lastBlock ? (
+              <BlockLink height={ti.lastBlock} />
+            ) : (
+              t('In progress')
+            )}
+          </td>
+          <td className={`px-2 ${borderClass}`}>
+            {ti.end ? (
+              <>
+                <Time date={ti.end} />
+                <br />
+                <TimeAgo date={ti.end} />
+              </>
+            ) : (
+              <span>{t('-')}</span>
+            )}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  );
+
+  return (
+    <Tooltip description={description}>
+      <p>
+        <IconForEpoch start={ti.start} end={ti.end} />
+        {id}
+      </p>
+    </Tooltip>
+  );
+};
+
+export type IconForEpochProps = {
+  start: string;
+  end: string;
+};
+
+/**
+ * Chooses an icon to display next to the epoch number, representing
+ * when the epoch is relative to now (i.e. not yet started, started,
+ * finished)
+ */
+export function IconForEpoch({ start, end }: IconForEpochProps) {
+  const startHasPassed = start ? isPast(new Date(start)) : false;
+  const endHasPassed = end ? isPast(new Date(end)) : false;
+
+  let i: IconProps['name'] = 'calendar';
+
+  if (!startHasPassed && !endHasPassed) {
+    i = 'calendar';
+  } else if (startHasPassed && !endHasPassed) {
+    i = 'circle';
+  } else if (startHasPassed && endHasPassed) {
+    i = 'tick-circle';
+  }
+
+  return <Icon name={i} className="mr-2" />;
+}
+
+export default EpochOverview;

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

@@ -1,17 +1,24 @@
 import { NodeSwitcherDialog, useEnvironment } from '@vegaprotocol/environment';
-import { t } from '@vegaprotocol/react-helpers';
-import { Link } from '@vegaprotocol/ui-toolkit';
-import { useState } from 'react';
+import { t, useScreenDimensions } from '@vegaprotocol/react-helpers';
+import { ExternalLink, Link } from '@vegaprotocol/ui-toolkit';
+import { useMemo, useState } from 'react';
+import { ENV } from '../../config/env';
 
 export const Footer = () => {
   const { VEGA_URL, GIT_COMMIT_HASH, GIT_ORIGIN_URL } = useEnvironment();
   const [nodeSwitcherOpen, setNodeSwitcherOpen] = useState(false);
+  const { screenSize } = useScreenDimensions();
+  const showFullFeedbackLabel = useMemo(
+    () => ['lg', 'xl'].includes(screenSize),
+    [screenSize]
+  );
+
   return (
     <>
       <footer className="grid grid-rows-2 grid-cols-[1fr_auto] text-xs md:text-md md:flex md:col-span-2 px-4 py-2 gap-4 border-t border-neutral-700 dark:border-neutral-300">
         <div className="flex justify-between gap-2 align-middle">
-          <div className="content-center flex border-r border-neutral-700 dark:border-neutral-300 pr-4">
-            {GIT_COMMIT_HASH && (
+          {GIT_COMMIT_HASH && (
+            <div className="content-center flex border-r border-neutral-700 dark:border-neutral-300 pr-4">
               <p data-testid="git-commit-hash">
                 {t('Version')}:{' '}
                 <Link
@@ -25,15 +32,21 @@ export const Footer = () => {
                   {GIT_COMMIT_HASH}
                 </Link>
               </p>
-            )}
-          </div>
+            </div>
+          )}
 
-          <div className="flex pl-2 content-center">
+          <div className="content-center flex pl-2 md:border-r border-neutral-700 dark:border-neutral-300 pr-4">
             {VEGA_URL && <NodeUrl url={VEGA_URL} />}
             <Link className="ml-2" onClick={() => setNodeSwitcherOpen(true)}>
               {t('Change')}
             </Link>
           </div>
+
+          <div className="flex pl-2 content-center">
+            <ExternalLink href={ENV.addresses.feedback}>
+              {showFullFeedbackLabel ? t('Share your feedback') : t('Feedback')}
+            </ExternalLink>
+          </div>
         </div>
       </footer>
       <NodeSwitcherDialog

apps/explorer/src/app/components/info-block/info-block.tsx

@@ -11,14 +11,14 @@ export const InfoBlock = ({ title, subtitle, tooltipInfo }: InfoBlockProps) => {
   return (
     <div className="flex flex-col text-center	">
       <h3 className="text-4xl">{title}</h3>
-      <p className="text-zinc-800 dark:text-zinc-300">
+      <p className="text-vega-dark-100 dark:text-vega-light-200">
         {subtitle}
         {tooltipInfo ? (
           <Tooltip description={tooltipInfo} align="center">
             <span>
               <Icon
                 name="info-sign"
-                className="ml-2 text-zinc-400 dark:text-zinc-600"
+                className="ml-2 text-vega-light-300 dark:text-vega-dark-300"
               />
             </span>
           </Tooltip>

apps/explorer/src/app/components/info-panel/info-panel.tsx

@@ -44,12 +44,12 @@ export const InfoPanel = ({
                 text={id}
                 startChars={visibleChars}
                 endChars={visibleChars}
-                className="text-black dark:text-zinc-200"
+                className="text-vega-dark-100 dark:text-vega-light-200"
               />
             ) : (
               <p
                 title={id}
-                className="text-black dark:text-zinc-200 truncate ..."
+                className="text-vega-dark-100 dark:text-vega-light-200 truncate ..."
               >
                 {id}
               </p>
@@ -70,7 +70,7 @@ export const InfoPanel = ({
         </div>
         {copy && (
           <CopyWithTooltip text={id}>
-            <button className="bg-zinc-100 dark:bg-zinc-900 rounded-sm py-2 px-3">
+            <button className="bg-vega-light-100 dark:bg-vega-dark-100 rounded-sm py-2 px-3">
               <Icon name="duplicate" />
             </button>
           </CopyWithTooltip>

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

@@ -5,9 +5,13 @@ import {
   useAssetDataProvider,
   useAssetDetailsDialogStore,
 } from '@vegaprotocol/assets';
+import { useNavigate } from 'react-router-dom';
+import { Routes } from '../../../routes/route-names';
 
 export type AssetLinkProps = Partial<ComponentProps<typeof ButtonLink>> & {
   assetId: string;
+  asDialog?: boolean;
+  showAssetSymbol?: boolean;
 };
 
 /**
@@ -15,17 +19,32 @@ export type AssetLinkProps = Partial<ComponentProps<typeof ButtonLink>> & {
  * with a link to the assets modal. If the name does not come back
  * it will use the ID instead.
  */
-export const AssetLink = ({ assetId, ...props }: AssetLinkProps) => {
+export const AssetLink = ({
+  assetId,
+  asDialog,
+  showAssetSymbol = false,
+  ...props
+}: AssetLinkProps) => {
   const { data: asset } = useAssetDataProvider(assetId);
 
   const open = useAssetDetailsDialogStore((state) => state.open);
-  const label = asset?.name ? asset.name : assetId;
+  const navigate = useNavigate();
+  const label = asset
+    ? showAssetSymbol
+      ? asset?.symbol
+      : asset?.name
+    : assetId;
+
   return (
     <ButtonLink
       data-testid="asset-link"
       disabled={!asset}
       onClick={(e) => {
-        open(assetId, e.target as HTMLElement);
+        if (asDialog) {
+          open(assetId, e.target as HTMLElement);
+        } else {
+          navigate(`${Routes.ASSETS}/${asset?.id}`);
+        }
       }}
       {...props}
     >

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

@@ -48,7 +48,7 @@ const MarketLink = ({
       <Link
         className="underline"
         {...props}
-        to={`/${Routes.MARKETS}#${id}`}
+        to={`/${Routes.MARKETS}/${id}`}
         title={id}
       >
         {label}
@@ -56,7 +56,7 @@ const MarketLink = ({
     );
   } else {
     return (
-      <Link className="underline" {...props} to={`/${Routes.MARKETS}#${id}`}>
+      <Link className="underline" {...props} to={`/${Routes.MARKETS}/${id}`}>
         <Hash text={id} />
       </Link>
     );

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

@@ -0,0 +1,39 @@
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import PartyLink from './party-link';
+
+describe('PartyLink', () => {
+  it('renders Network for 000.000 party', () => {
+    const zeroes =
+      '0000000000000000000000000000000000000000000000000000000000000000';
+    const screen = render(<PartyLink id={zeroes} />);
+    expect(screen.getByText('Network')).toBeInTheDocument();
+  });
+
+  it('renders Network for network party', () => {
+    const screen = render(<PartyLink id="network" />);
+    expect(screen.getByText('Network')).toBeInTheDocument();
+  });
+
+  it('renders ID with no link for invalid party', () => {
+    const screen = render(<PartyLink id="this-party-is-not-valid" />);
+    expect(screen.getByTestId('invalid-party')).toBeInTheDocument();
+  });
+
+  it('links a valid party to the party page', () => {
+    const aValidParty =
+      '13464e35bcb8e8a2900ca0f87acaf252d50cf2ab2fc73694845a16b7c8a0dc6e';
+
+    const screen = render(
+      <MemoryRouter>
+        <PartyLink id={aValidParty} />
+      </MemoryRouter>
+    );
+
+    const el = screen.getByText(aValidParty);
+    expect(el).toBeInTheDocument();
+    // The text should be a link that points to the party's page
+    expect(el.parentElement?.tagName).toEqual('A');
+    expect(el.parentElement?.getAttribute('href')).toContain(aValidParty);
+  });
+});

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

@@ -3,19 +3,47 @@ import { Link } from 'react-router-dom';
 
 import type { ComponentProps } from 'react';
 import Hash from '../hash';
+import { t } from '@vegaprotocol/react-helpers';
+import { isValidPartyId } from '../../../routes/parties/id/components/party-id-error';
+import { truncateMiddle } from '@vegaprotocol/ui-toolkit';
+
+export const SPECIAL_CASE_NETWORK_ID =
+  '0000000000000000000000000000000000000000000000000000000000000000';
+export const SPECIAL_CASE_NETWORK = 'network';
 
 export type PartyLinkProps = Partial<ComponentProps<typeof Link>> & {
   id: string;
+  truncate?: boolean;
 };
 
-const PartyLink = ({ id, ...props }: PartyLinkProps) => {
+const PartyLink = ({ id, truncate = false, ...props }: PartyLinkProps) => {
+  // Some transactions will involve the 'network' party, which is alias for  '000...000'
+  // The party page does not handle this nicely, so in this case we render the word 'Network'
+  if (id === SPECIAL_CASE_NETWORK || id === SPECIAL_CASE_NETWORK_ID) {
+    return (
+      <span className="font-mono" data-testid="network">
+        {t('Network')}
+      </span>
+    );
+  }
+
+  // If the party doesn't look correct, there's no point in linking to id. Just render
+  // the ID as it was given to us
+  if (!isValidPartyId(id)) {
+    return (
+      <span className="font-mono" data-testid="invalid-party">
+        {id}
+      </span>
+    );
+  }
+
   return (
     <Link
       className="underline font-mono"
       {...props}
       to={`/${Routes.PARTIES}/${id}`}
     >
-      <Hash text={id} />
+      <Hash text={truncate ? truncateMiddle(id) : id} />
     </Link>
   );
 };

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

@@ -22,8 +22,7 @@ export const MarketDetails = ({
 }: {
   market: MarketInfoNoCandlesQuery['market'];
 }) => {
-  const assetSymbol =
-    market?.tradableInstrument.instrument.product?.settlementAsset.symbol;
+  const quoteUnit = market?.tradableInstrument.instrument.product.quoteName;
   const assetId = useMemo(
     () => market?.tradableInstrument.instrument.product?.settlementAsset.id,
     [market]
@@ -39,6 +38,10 @@ export const MarketDetails = ({
   const assetDecimals =
     market.tradableInstrument.instrument.product.settlementAsset.decimals;
 
+  const liquidityPriceRange = formatNumberPercentage(
+    new BigNumber(market.lpPriceRange).times(100)
+  );
+
   const panels = [
     {
       title: t('Key details'),
@@ -179,32 +182,40 @@ export const MarketDetails = ({
     {
       title: t('Liquidity price range'),
       content: (
-        <MarketInfoTable
-          noBorder={false}
-          data={{
-            liquidityPriceRange: formatNumberPercentage(
-              new BigNumber(market.lpPriceRange).times(100)
-            ),
-            LPVolumeMin:
-              market.data?.midPrice &&
-              `${addDecimalsFormatNumber(
-                new BigNumber(1)
-                  .minus(market.lpPriceRange)
-                  .times(market.data.midPrice)
-                  .toString(),
-                market.decimalPlaces
-              )} ${assetSymbol}`,
-            LPVolumeMax:
-              market.data?.midPrice &&
-              `${addDecimalsFormatNumber(
-                new BigNumber(1)
-                  .plus(market.lpPriceRange)
-                  .times(market.data.midPrice)
-                  .toString(),
-                market.decimalPlaces
-              )} ${assetSymbol}`,
-          }}
-        ></MarketInfoTable>
+        <>
+          <p className="text-xs mb-4">
+            {`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
+        price.`}
+          </p>
+          <MarketInfoTable
+            noBorder={false}
+            data={{
+              liquidityPriceRange: `${liquidityPriceRange} of mid price`,
+              lowestPrice:
+                market.data?.midPrice &&
+                `${addDecimalsFormatNumber(
+                  new BigNumber(1)
+                    .minus(market.lpPriceRange)
+                    .times(market.data.midPrice)
+                    .toString(),
+                  market.decimalPlaces
+                )} ${quoteUnit}`,
+              highestPrice:
+                market.data?.midPrice &&
+                `${addDecimalsFormatNumber(
+                  new BigNumber(1)
+                    .plus(market.lpPriceRange)
+                    .times(market.data.midPrice)
+                    .toString(),
+                  market.decimalPlaces
+                )} ${quoteUnit}`,
+            }}
+          ></MarketInfoTable>
+        </>
       ),
     },
     {
@@ -237,7 +248,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/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/deterministic-order-details.tsx

@@ -13,7 +13,7 @@ export interface DeterministicOrderDetailsProps {
 }
 
 export const wrapperClasses =
-  'grid lg:grid-cols-1 flex items-center max-w-xl border border-zinc-200 dark:border-zinc-800 rounded-md pv-2 ph-5 mb-5';
+  'grid lg:grid-cols-1 flex items-center max-w-xl border border-vega-light-200 dark:border-vega-dark-150 rounded-md pv-2 ph-5 mb-5';
 
 /**
  * This component renders the *current* details for an order
@@ -42,7 +42,7 @@ const DeterministicOrderDetails = ({
             <h2 className="text-3xl font-bold mb-4 display-5">
               {t('Order not found')}
             </h2>
-            <p className="text-gray-500 mb-12">
+            <p className="text-vega-light-400 mb-12">
               {t('No order created from this transaction')}
             </p>
           </div>

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>
@@ -38,7 +38,7 @@ export const PageHeader = ({
         </h2>
         {copy && (
           <CopyWithTooltip data-testid="copy-to-clipboard" text={title}>
-            <button className="bg-zinc-100 dark:bg-zinc-900 rounded-sm py-2 px-3">
+            <button className="bg-vega-light-100 dark:bg-vega-dark-100 rounded-sm py-2 px-3">
               <Icon name="duplicate" className="" />
             </button>
           </CopyWithTooltip>

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/panel/panel.tsx

@@ -8,7 +8,7 @@ interface PanelProps {
 export const Panel = ({ children, className }: PanelProps) => (
   <div
     className={classNames(
-      'border border-zinc-200 dark:border-zinc-800 rounded-md p-5 mb-5',
+      'border border-vega-light-150 dark:border-vega-dark-150 rounded-md p-5 mb-5',
       className
     )}
   >

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

@@ -0,0 +1,227 @@
+import type { ProposalListFieldsFragment } from '@vegaprotocol/governance';
+import { VoteProgress } from '@vegaprotocol/governance';
+import type { AgGridReact } from 'ag-grid-react';
+import { AgGridColumn } from 'ag-grid-react';
+import type {
+  VegaICellRendererParams,
+  VegaValueFormatterParams,
+} from '@vegaprotocol/ui-toolkit';
+import { ExternalLink } from '@vegaprotocol/ui-toolkit';
+import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
+import { useLayoutEffect, useMemo, useRef, useState } from 'react';
+import type { RowClickedEvent } from 'ag-grid-community';
+import {
+  getDateTimeFormat,
+  NetworkParams,
+  t,
+  useNetworkParams,
+} from '@vegaprotocol/react-helpers';
+import { ProposalStateMapping } from '@vegaprotocol/types';
+import BigNumber from 'bignumber.js';
+import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
+import { BREAKPOINT_MD } from '../../config/breakpoints';
+import { JsonViewerDialog } from '../dialogs/json-viewer-dialog';
+
+type ProposalTermsDialog = {
+  open: boolean;
+  title: string;
+  content: unknown;
+};
+type ProposalsTableProps = {
+  data: ProposalListFieldsFragment[] | null;
+};
+export const ProposalsTable = ({ data }: ProposalsTableProps) => {
+  const { params } = useNetworkParams([
+    NetworkParams.governance_proposal_market_requiredMajority,
+  ]);
+  const tokenLink = useLinks(DApp.Token);
+  const requiredMajorityPercentage = useMemo(() => {
+    const requiredMajority =
+      params?.governance_proposal_market_requiredMajority ?? 1;
+    return new BigNumber(requiredMajority).times(100);
+  }, [params?.governance_proposal_market_requiredMajority]);
+
+  const gridRef = useRef<AgGridReact>(null);
+  useLayoutEffect(() => {
+    const showColumnsOnDesktop = () => {
+      gridRef.current?.columnApi.setColumnsVisible(
+        ['voting', 'cDate', 'eDate', 'type'],
+        window.innerWidth > BREAKPOINT_MD
+      );
+      gridRef.current?.columnApi.setColumnWidth(
+        'actions',
+        window.innerWidth > BREAKPOINT_MD ? 221 : 80
+      );
+    };
+    window.addEventListener('resize', showColumnsOnDesktop);
+    return () => {
+      window.removeEventListener('resize', showColumnsOnDesktop);
+    };
+  }, []);
+
+  const [dialog, setDialog] = useState<ProposalTermsDialog>({
+    open: false,
+    title: '',
+    content: null,
+  });
+
+  return (
+    <>
+      <AgGrid
+        ref={gridRef}
+        rowData={data}
+        getRowId={({ data }: { data: ProposalListFieldsFragment }) =>
+          data.id || data.rationale.title
+        }
+        overlayNoRowsTemplate={t('This chain has no markets')}
+        domLayout="autoHeight"
+        defaultColDef={{
+          flex: 1,
+          resizable: true,
+          sortable: true,
+          filter: true,
+          filterParams: { buttons: ['reset'] },
+          autoHeight: true,
+        }}
+        suppressCellFocus={true}
+        onRowClicked={({ data, event }: RowClickedEvent) => {
+          if (
+            (event?.target as HTMLElement).tagName.toUpperCase() !== 'BUTTON'
+          ) {
+            const proposalPage = tokenLink(
+              TOKEN_PROPOSAL.replace(':id', data.id)
+            );
+            window.open(proposalPage, '_blank');
+          }
+        }}
+      >
+        <AgGridColumn
+          colId="title"
+          headerName={t('Title')}
+          field="rationale.title"
+          flex={2}
+          wrapText={true}
+        />
+        <AgGridColumn
+          colId="type"
+          maxWidth={180}
+          hide={window.innerWidth <= BREAKPOINT_MD}
+          headerName={t('Type')}
+          field="terms.change.__typename"
+        />
+        <AgGridColumn
+          maxWidth={100}
+          headerName={t('State')}
+          field="state"
+          valueFormatter={({
+            value,
+          }: VegaValueFormatterParams<ProposalListFieldsFragment, 'state'>) => {
+            return value ? ProposalStateMapping[value] : '-';
+          }}
+        />
+        <AgGridColumn
+          colId="voting"
+          maxWidth={100}
+          hide={window.innerWidth <= BREAKPOINT_MD}
+          headerName={t('Voting')}
+          cellRenderer={({
+            data,
+          }: VegaICellRendererParams<ProposalListFieldsFragment>) => {
+            if (data) {
+              const yesTokens = new BigNumber(data.votes.yes.totalTokens);
+              const noTokens = new BigNumber(data.votes.no.totalTokens);
+              const totalTokensVoted = yesTokens.plus(noTokens);
+              const yesPercentage = totalTokensVoted.isZero()
+                ? new BigNumber(0)
+                : yesTokens.multipliedBy(100).dividedBy(totalTokensVoted);
+              return (
+                <div className="uppercase flex h-full items-center justify-center pt-2">
+                  <VoteProgress
+                    threshold={requiredMajorityPercentage}
+                    progress={yesPercentage}
+                  />
+                </div>
+              );
+            }
+            return '-';
+          }}
+        />
+        <AgGridColumn
+          colId="cDate"
+          maxWidth={150}
+          hide={window.innerWidth <= BREAKPOINT_MD}
+          headerName={t('Closing date')}
+          field="terms.closingDatetime"
+          valueFormatter={({
+            value,
+          }: VegaValueFormatterParams<
+            ProposalListFieldsFragment,
+            'terms.closingDatetime'
+          >) => {
+            return value ? getDateTimeFormat().format(new Date(value)) : '-';
+          }}
+        />
+        <AgGridColumn
+          colId="eDate"
+          maxWidth={150}
+          hide={window.innerWidth <= BREAKPOINT_MD}
+          headerName={t('Enactment date')}
+          field="terms.enactmentDatetime"
+          valueFormatter={({
+            value,
+          }: VegaValueFormatterParams<
+            ProposalListFieldsFragment,
+            'terms.enactmentDatetime'
+          >) => {
+            return value ? getDateTimeFormat().format(new Date(value)) : '-';
+          }}
+        />
+        <AgGridColumn
+          colId="actions"
+          minWidth={window.innerWidth > BREAKPOINT_MD ? 221 : 80}
+          maxWidth={221}
+          sortable={false}
+          filter={false}
+          resizable={false}
+          cellRenderer={({
+            data,
+          }: VegaICellRendererParams<ProposalListFieldsFragment>) => {
+            const proposalPage = tokenLink(
+              TOKEN_PROPOSAL.replace(':id', data?.id || '')
+            );
+            const openDialog = () => {
+              if (!data) return;
+              setDialog({
+                open: true,
+                title: data.rationale.title,
+                content: data.terms,
+              });
+            };
+            return (
+              <div className="pb-1">
+                <button
+                  className="underline max-md:hidden"
+                  onClick={openDialog}
+                >
+                  {t('View terms')}
+                </button>{' '}
+                <ExternalLink className="max-md:hidden" href={proposalPage}>
+                  {t('Open in Governance')}
+                </ExternalLink>
+                <ExternalLink className="md:hidden" href={proposalPage}>
+                  {t('Open')}
+                </ExternalLink>
+              </div>
+            );
+          }}
+        />
+      </AgGrid>
+      <JsonViewerDialog
+        open={dialog.open}
+        onChange={(isOpen) => setDialog({ ...dialog, open: isOpen })}
+        title={dialog.title}
+        content={dialog.content}
+      />
+    </>
+  );
+};

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/size-in-asset/size-in-asset.tsx

@@ -0,0 +1,43 @@
+import { useAssetDataProvider } from '@vegaprotocol/assets';
+import { addDecimalsFormatNumber } from '@vegaprotocol/react-helpers';
+import { AssetLink } from '../links';
+
+export type DecimalSource = 'ASSET';
+
+export type SizeInAssetProps = {
+  assetId: string;
+  size?: string | number;
+  decimalSource?: DecimalSource;
+};
+
+/**
+ * Given a market ID and an order size it will fetch the market
+ * order size, and format the size accordingly
+ */
+const SizeInAsset = ({
+  assetId,
+  size,
+  decimalSource = 'ASSET',
+}: SizeInAssetProps) => {
+  const { data } = useAssetDataProvider(assetId);
+  if (!size) {
+    return <span>-</span>;
+  }
+
+  let label = size;
+
+  if (data) {
+    if (decimalSource === 'ASSET' && data.decimals) {
+      label = addDecimalsFormatNumber(size, data.decimals);
+    }
+  }
+
+  return (
+    <p>
+      <span>{label}</span>&nbsp;
+      <AssetLink assetId={assetId} showAssetSymbol={true} asDialog={true} />
+    </p>
+  );
+};
+
+export default SizeInAsset;

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

@@ -3,7 +3,7 @@ import { useExplorerMarketQuery } from '../links/market-link/__generated__/Marke
 
 export type DecimalSource = 'MARKET';
 
-export type PriceInMarketProps = {
+export type SizeInMarketProps = {
   marketId: string;
   size?: string | number;
   decimalSource?: DecimalSource;
@@ -17,7 +17,7 @@ const SizeInMarket = ({
   marketId,
   size,
   decimalSource = 'MARKET',
-}: PriceInMarketProps) => {
+}: SizeInMarketProps) => {
   const { data } = useExplorerMarketQuery({
     variables: { id: marketId },
     fetchPolicy: 'cache-first',

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/txs/details/chain-events/tx-builtin-deposit.spec.tsx

@@ -10,7 +10,7 @@ import { MemoryRouter } from 'react-router-dom';
 type Deposit = components['schemas']['vegaBuiltinAssetDeposit'];
 
 const fullMock: Deposit = {
-  partyId: 'party123',
+  partyId: '0000000000000000000000000000000000000000000000000000000000000001',
   vegaAssetId: 'asset123',
   amount: 'amount123',
 };

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

@@ -10,7 +10,7 @@ import { MemoryRouter } from 'react-router-dom';
 type Withdrawal = components['schemas']['vegaBuiltinAssetWithdrawal'];
 
 const fullMock: Withdrawal = {
-  partyId: 'party123',
+  partyId: '0000000000000000000000000000000000000000000000000000000000000001',
   vegaAssetId: 'asset123',
   amount: 'amount123',
 };
@@ -67,11 +67,12 @@ describe('Chain Event: Builtin asset withdrawal', () => {
     expect(screen.getByText(`${fullMock.amount}`)).toBeInTheDocument();
 
     expect(screen.getByText(t('Recipient'))).toBeInTheDocument();
+
     const partyLink = screen.getByText(`${fullMock.partyId}`);
-    expect(partyLink).toBeInTheDocument();
     if (!partyLink.parentElement) {
       throw new Error('Party link does not exist');
     }
+
     expect(partyLink.parentElement.tagName).toEqual('A');
     expect(partyLink.parentElement.getAttribute('href')).toEqual(
       `/parties/${fullMock.partyId}`

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

@@ -10,10 +10,12 @@ import { TxDetailsChainEventDeposit } from './tx-erc20-deposit';
 type Deposit = components['schemas']['vegaERC20Deposit'];
 
 const fullMock: Deposit = {
-  vegaAssetId: 'asset123',
+  vegaAssetId:
+    '0000000000000000000000000000000000000000000000000000000000000002',
   amount: 'amount123',
   sourceEthereumAddress: 'eth123',
-  targetPartyId: 'vega123',
+  targetPartyId:
+    '0000000000000000000000000000000000000000000000000000000000000001',
 };
 
 describe('Chain Event: ERC20 asset deposit', () => {

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

@@ -13,7 +13,8 @@ const fullMock: Deposit = {
   amount: 'amount123',
   blockTime: 'block123',
   ethereumAddress: 'eth123',
-  vegaPublicKey: 'vega123',
+  vegaPublicKey:
+    '0000000000000000000000000000000000000000000000000000000000000001',
 };
 
 describe('Chain Event: Stake deposit', () => {

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

@@ -13,7 +13,8 @@ const fullMock: Remove = {
   amount: 'amount123',
   blockTime: 'block123',
   ethereumAddress: 'eth123',
-  vegaPublicKey: 'vega123',
+  vegaPublicKey:
+    '0000000000000000000000000000000000000000000000000000000000000001',
 };
 
 describe('Chain Event: Stake remove', () => {

apps/explorer/src/app/components/txs/details/chain-response-code/chain-reponse.code.tsx

@@ -36,7 +36,7 @@ export const ChainResponseCode = ({
     error && error.length > 100 ? error.replace(/,/g, ',\r\n') : error;
 
   return (
-    <div title={`Response code: ${code} - ${label}`}>
+    <div title={`Response code: ${code} - ${label}`} className="inline-block">
       <span
         className="mr-2"
         aria-label={isSuccess ? 'Success' : 'Warning'}

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

@@ -14,10 +14,14 @@ interface TxDetailsSharedProps {
   txData: BlockExplorerTransactionResult | undefined;
   pubKey: string | undefined;
   blockData: TendermintBlocksResponse | undefined;
+
+  // A transitional property used in some complex TX types to display more detailed type information
+  // than the shared component can derive
+  hideTypeRow?: boolean;
 }
 
 // Applied to all header cells
-const sharedHeaderProps = {
+export const sharedHeaderProps = {
   // Ensures that multi line contents still have the header aligned to the first line
   className: 'align-top',
 };
@@ -31,6 +35,7 @@ export const TxDetailsShared = ({
   txData,
   pubKey,
   blockData,
+  hideTypeRow = false,
 }: TxDetailsSharedProps) => {
   if (!txData) {
     return <>{t('Awaiting Block Explorer transaction details')}</>;
@@ -41,10 +46,12 @@ export const TxDetailsShared = ({
 
   return (
     <>
-      <TableRow modifier="bordered">
-        <TableCell {...sharedHeaderProps}>{t('Type')}</TableCell>
-        <TableCell>{txData.type}</TableCell>
-      </TableRow>
+      {hideTypeRow === false ? (
+        <TableRow modifier="bordered">
+          <TableCell {...sharedHeaderProps}>{t('Type')}</TableCell>
+          <TableCell>{txData.type}</TableCell>
+        </TableRow>
+      ) : null}
       <TableRow modifier="bordered">
         <TableCell {...sharedHeaderProps}>{t('Hash')}</TableCell>
         <TableCell>

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

@@ -0,0 +1,138 @@
+import { t } from '@vegaprotocol/react-helpers';
+import { Icon, Tooltip } from '@vegaprotocol/ui-toolkit';
+import { PartyLink } from '../../../../links';
+import {
+  SPECIAL_CASE_NETWORK,
+  SPECIAL_CASE_NETWORK_ID,
+} from '../../../../links/party-link/party-link';
+import SizeInAsset from '../../../../size-in-asset/size-in-asset';
+import { AccountTypeMapping } from '@vegaprotocol/types';
+import { AccountType } from '@vegaprotocol/types';
+import { headerClasses, wrapperClasses } from '../transfer-details';
+import type { Transfer } from '../transfer-details';
+
+interface TransferParticipantsProps {
+  transfer: Transfer;
+  from: string;
+}
+
+/**
+ * Renders a box containing the To, From and amount of a
+ * transfer. This is shown for all transfers, including
+ * recurring and reward transfers.
+ *
+ * @param transfer A recurring transfer object
+ * @param from The sender is not in the transaction, but comes from the Transaction submitter
+ */
+export function TransferParticipants({
+  transfer,
+  from,
+}: TransferParticipantsProps) {
+  // This mapping is required as the global account types require a type to be set, while
+  // the underlying protobufs allow for every field to be undefined.
+  const fromAcct =
+    transfer.fromAccountType &&
+    transfer.fromAccountType !== 'ACCOUNT_TYPE_UNSPECIFIED'
+      ? AccountType[transfer.fromAccountType]
+      : AccountType.ACCOUNT_TYPE_GENERAL;
+  const fromAccountTypeLabel = transfer.fromAccountType
+    ? AccountTypeMapping[fromAcct]
+    : 'Unknown';
+
+  const toAcct =
+    transfer.toAccountType &&
+    transfer.toAccountType !== 'ACCOUNT_TYPE_UNSPECIFIED'
+      ? AccountType[transfer.toAccountType]
+      : AccountType.ACCOUNT_TYPE_GENERAL;
+  const toAccountTypeLabel = transfer.fromAccountType
+    ? AccountTypeMapping[toAcct]
+    : 'Unknown';
+
+  return (
+    <div className={wrapperClasses}>
+      <h2 className={headerClasses}>{t('Transfer')}</h2>
+      <div className="relative block rounded-lg py-6 text-center">
+        <PartyLink id={from} truncate={true} />
+        <Tooltip
+          description={
+            <p>{`${t('From account')}:  ${fromAccountTypeLabel}`}</p>
+          }
+        >
+          <span>
+            <Icon className="ml-3" name={'bank-account'} />
+          </span>
+        </Tooltip>
+        <br />
+
+        {/* This block of divs is used to render the inset arrow containing the transfer amount */}
+        <div className="bg-vega-light-200 dark:vega-dark-200 flex items-center justify-center my-4 relative">
+          <div className="bg-vega-light-200 dark:bg-vega-dark-200 border w-full pt-5 pb-3 px-3 border-vega-light-200 dark:border-vega-dark-150 relative">
+            <div className="text-xs z-20 relative leading-none">
+              {transfer.asset ? (
+                <SizeInAsset assetId={transfer.asset} size={transfer.amount} />
+              ) : null}
+            </div>
+
+            {/* Empty divs for the top arrow and the bottom arrow of the transfer inset */}
+            <div className="z-10 absolute top-[-1px] left-1/2 w-4 h-4">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 16 9"
+                className="fill-vega-light-100 dark:fill-black"
+              >
+                <path d="M0,0L8,9l8,-9Z" />
+              </svg>
+            </div>
+            <div className="z-10 absolute bottom-[-16px] left-1/2 w-4 h-4">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 16 9"
+                className="fill-vega-light-100 dark:fill-vega-dark-200"
+              >
+                <path d="M0,0L8,9l8,-9Z" />
+              </svg>
+            </div>
+            {/*
+            <div className="z-10 absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-1/2 rotate-45 w-4 h-4 dark:border-vega-dark-200 border-vega-light-200 bg-white dark:bg-black border-r border-b"></div>
+            <div className="z-10 absolute bottom-0 left-1/2 transform -translate-x-1/2 translate-y-1/2 rotate-45 w-4 h-4 border-vega-light-200 dark:border-vega-dark-200 bg-vega-light-200 dark:bg-vega-dark-200 border-r border-b"></div>
+              */}
+          </div>
+        </div>
+
+        <TransferRecurringRecipient to={transfer.to} />
+        <Tooltip
+          description={<p>{`${t('To account')}: ${toAccountTypeLabel}`}</p>}
+        >
+          <span>
+            <Icon className="ml-3" name={'bank-account'} />
+          </span>
+        </Tooltip>
+        <br />
+      </div>
+    </div>
+  );
+}
+
+interface TransferRecurringRecipientProps {
+  to?: string;
+}
+
+/**
+ * If the transfer is to 000...000, then this is a transfer to the
+ * Rewards Pool rather than the network. This component saves this
+ * logic from complicating the To section of the participants block
+ *
+ * @param markets String[] IDs of markets for this dispatch strategy
+ */
+export function TransferRecurringRecipient({
+  to,
+}: TransferRecurringRecipientProps) {
+  if (to === SPECIAL_CASE_NETWORK || to === SPECIAL_CASE_NETWORK_ID) {
+    return <span>{t('Rewards pool')}</span>;
+  } else if (to) {
+    return <PartyLink id={to} truncate={true} />;
+  }
+
+  // Fallback should not happen
+  return null;
+}

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

@@ -0,0 +1,86 @@
+import { t } from '@vegaprotocol/react-helpers';
+import { Icon } from '@vegaprotocol/ui-toolkit';
+import EpochOverview from '../../../../epoch-overview/epoch';
+import { useExplorerFutureEpochQuery } from '../../../../epoch-overview/__generated__/Epoch';
+import { headerClasses, wrapperClasses } from '../transfer-details';
+import type { IconProps } from '@vegaprotocol/ui-toolkit';
+import type { Recurring } from '../transfer-details';
+
+interface TransferRepeatProps {
+  recurring: Recurring;
+}
+
+/**
+ * Renderer for a transfer. These can vary quite
+ * widely, essentially every field can be null.
+ *
+ * @param transfer A recurring transfer object
+ */
+export function TransferRepeat({ recurring }: TransferRepeatProps) {
+  const { data } = useExplorerFutureEpochQuery();
+
+  if (!recurring) {
+    return null;
+  }
+
+  return (
+    <div className={wrapperClasses}>
+      <h2 className={headerClasses}>{t('Active epochs')}</h2>
+      <div className="relative block rounded-lg py-6 text-center p-6">
+        <p>
+          <EpochOverview id={recurring.startEpoch} />
+        </p>
+        <p className="leading-10 my-2">
+          <IconForEpoch
+            start={recurring.startEpoch}
+            end={recurring.endEpoch}
+            current={data?.epoch.id}
+          />
+        </p>
+        <p>
+          {recurring.endEpoch ? (
+            <EpochOverview id={recurring.endEpoch} />
+          ) : (
+            <span>{t('Forever')}</span>
+          )}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export type IconForTransferProps = {
+  current?: string;
+  start?: string;
+  end?: string;
+};
+
+/**
+ * Pick an icon rto represent the state of the repetition for this recurring
+ * transfer. It can be unstarted, in progress, or complete.
+ *
+ * @param start The epoch in which the transfer first occurs
+ * @param end The last epoch in which the transfer occurs
+ * @param current The current epoch
+ */
+function IconForEpoch({ start, end, current }: IconForTransferProps) {
+  let i: IconProps['name'] = 'repeat';
+
+  if (current && start && end) {
+    const startEpoch = parseInt(start);
+    const endEpoch = parseInt(end);
+    const currentEpoch = parseInt(current);
+
+    if (currentEpoch > endEpoch) {
+      // If we've finished
+      i = 'updated';
+    } else if (startEpoch > currentEpoch) {
+      // If we haven't yet started
+      i = 'time';
+    } else if (startEpoch < currentEpoch && endEpoch > currentEpoch) {
+      i = 'repeat';
+    }
+  }
+
+  return <Icon name={i} className="mr-2" />;
+}

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

@@ -0,0 +1,97 @@
+import { t } from '@vegaprotocol/react-helpers';
+import { AssetLink, MarketLink } from '../../../../links';
+import { headerClasses, wrapperClasses } from '../transfer-details';
+import type { components } from '../../../../../../types/explorer';
+import type { Recurring } from '../transfer-details';
+import { DispatchMetricLabels } from '@vegaprotocol/types';
+
+export type Metric = components['schemas']['vegaDispatchMetric'];
+export type Strategy = components['schemas']['vegaDispatchStrategy'];
+
+const metricLabels = {
+  DISPATCH_METRIC_UNSPECIFIED: 'Unknown metric',
+  ...DispatchMetricLabels,
+};
+
+interface TransferRewardsProps {
+  recurring: Recurring;
+}
+
+/**
+ * Renderer for a transfer. These can vary quite
+ * widely, essentially every field can be null.
+ *
+ * @param transfer A recurring transfer object
+ */
+export function TransferRewards({ recurring }: TransferRewardsProps) {
+  const metric =
+    recurring?.dispatchStrategy?.metric || 'DISPATCH_METRIC_UNSPECIFIED';
+
+  if (!recurring || !recurring.dispatchStrategy) {
+    return null;
+  }
+
+  return (
+    <div className={wrapperClasses}>
+      <h2 className={headerClasses}>{t('Reward metrics')}</h2>
+      <ul className="relative block rounded-lg py-6 text-center p-6">
+        {recurring.dispatchStrategy.assetForMetric ? (
+          <li>
+            <strong>{t('Asset')}</strong>:{' '}
+            <AssetLink assetId={recurring.dispatchStrategy.assetForMetric} />
+          </li>
+        ) : null}
+        <li>
+          <strong>{t('Metric')}</strong>: {metricLabels[metric]}
+        </li>
+        {recurring.dispatchStrategy.markets &&
+        recurring.dispatchStrategy.markets.length > 0 ? (
+          <li>
+            <strong>{t('Markets in scope')}</strong>:
+            <ul>
+              {recurring.dispatchStrategy.markets.map((m) => (
+                <li key={m}>
+                  <MarketLink id={m} />
+                </li>
+              ))}
+            </ul>
+          </li>
+        ) : null}
+        <li>
+          <strong>{t('Factor')}</strong>: {recurring.factor}
+        </li>
+      </ul>
+    </div>
+  );
+}
+
+interface TransferRecurringStrategyProps {
+  strategy: Strategy;
+}
+
+/**
+ * Simple renderer for a dispatch strategy in a recurring transfer
+ *
+ * @param strategy Dispatch strategy object
+ */
+export function TransferRecurringStrategy({
+  strategy,
+}: TransferRecurringStrategyProps) {
+  if (!strategy) {
+    return null;
+  }
+
+  return (
+    <>
+      {strategy.assetForMetric ? (
+        <li>
+          <strong>{t('Asset for metric')}</strong>:{' '}
+          <AssetLink assetId={strategy.assetForMetric} />
+        </li>
+      ) : null}
+      <li>
+        <strong>{t('Metric')}</strong>: {strategy.metric}
+      </li>
+    </>
+  );
+}

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

@@ -0,0 +1,39 @@
+import type { components } from '../../../../../types/explorer';
+import { TransferRepeat } from './blocks/transfer-repeat';
+import { TransferRewards } from './blocks/transfer-rewards';
+import { TransferParticipants } from './blocks/transfer-participants';
+
+export type Recurring = components['schemas']['v1RecurringTransfer'];
+export type Metric = components['schemas']['vegaDispatchMetric'];
+
+export const wrapperClasses =
+  'border border-vega-light-150 dark:border-vega-dark-200 rounded-md pv-2 mb-5 w-full sm:w-1/4 min-w-[200px] ';
+export const headerClasses =
+  'bg-solid bg-vega-light-150 dark:bg-vega-dark-150 border-vega-light-150 text-center text-xl py-2 font-alpha calt';
+
+export type Transfer = components['schemas']['commandsv1Transfer'];
+
+interface TransferDetailsProps {
+  transfer: Transfer;
+  from: string;
+}
+
+/**
+ * Renderer for a transfer. These can vary quite
+ * widely, essentially every field can be null.
+ *
+ * @param transfer A recurring transfer object
+ */
+export function TransferDetails({ transfer, from }: TransferDetailsProps) {
+  const recurring = transfer.recurring;
+
+  return (
+    <div className="flex gap-5 flex-wrap">
+      <TransferParticipants from={from} transfer={transfer} />
+      {recurring ? <TransferRepeat recurring={transfer.recurring} /> : null}
+      {recurring && recurring.dispatchStrategy ? (
+        <TransferRewards recurring={transfer.recurring} />
+      ) : null}
+    </div>
+  );
+}

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

@@ -23,6 +23,7 @@ import { TxDetailsProtocolUpgrade } from './tx-details-protocol-upgrade';
 import { TxDetailsIssueSignatures } from './tx-issue-signatures';
 import { TxDetailsNodeAnnounce } from './tx-node-announce';
 import { TxDetailsStateVariable } from './tx-state-variable-proposal';
+import { TxDetailsTransfer } from './tx-transfer';
 
 interface TxDetailsWrapperProps {
   txData: BlockExplorerTransactionResult | undefined;
@@ -108,6 +109,8 @@ function getTransactionComponent(txData?: BlockExplorerTransactionResult) {
       return TxDetailsUndelegate;
     case 'State Variable Proposal':
       return TxDetailsStateVariable;
+    case 'Transfer Funds':
+      return TxDetailsTransfer;
     default:
       return TxDetailsGeneric;
   }

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

@@ -0,0 +1,125 @@
+import { t } from '@vegaprotocol/react-helpers';
+import type { BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
+import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
+import { sharedHeaderProps, TxDetailsShared } from './shared/tx-details-shared';
+import { TableRow, TableCell, TableWithTbody } from '../../table';
+
+import type { components } from '../../../../types/explorer';
+import { PartyLink } from '../../links';
+import SizeInAsset from '../../size-in-asset/size-in-asset';
+import { TransferDetails } from './transfer/transfer-details';
+import {
+  SPECIAL_CASE_NETWORK,
+  SPECIAL_CASE_NETWORK_ID,
+} from '../../links/party-link/party-link';
+
+type Transfer = components['schemas']['commandsv1Transfer'];
+
+interface TxDetailsNodeAnnounceProps {
+  txData: BlockExplorerTransactionResult | undefined;
+  pubKey: string | undefined;
+  blockData: TendermintBlocksResponse | undefined;
+}
+
+/**
+ * Displays the details of a transfer. Broadly there are three distinct
+ * types of transfer, listed below in order of complexity:
+ *
+ * - A one off transfer
+ * - A recurring transfer
+ * - A recurring rewards pool transfer
+ *
+ * One off transfers are simple, really the important data is the amount
+ * and who sent it to whom. This is rendered as one distinct box.
+ *
+ * A recurring transfer has two components - the same as above, and an
+ * additional box that shows details about how it repeats. This is defined
+ * as a start epoch and and end epoch. The Epoch/MissingEpoch components
+ * render slightly differently depending on if the epoch is in the past,
+ * current or in the future.
+ *
+ * Finally rewards pool transfers get the two boxes above, and an additional
+ * one that describes how the reward is distributed.
+ *
+ * The information is split up in to three boxes to allow for the reuse across
+ * all the types of transfer above.
+ */
+export const TxDetailsTransfer = ({
+  txData,
+  pubKey,
+  blockData,
+}: TxDetailsNodeAnnounceProps) => {
+  if (!txData) {
+    return <>{t('Awaiting Block Explorer transaction details')}</>;
+  }
+
+  const transfer: Transfer = txData.command.transfer;
+  if (!transfer) {
+    return <>{t('Transfer data missing')}</>;
+  }
+
+  const from = txData.submitter;
+
+  return (
+    <>
+      <TableWithTbody className="mb-8" allowWrap={true}>
+        <TableRow modifier="bordered">
+          <TableCell {...sharedHeaderProps}>{t('Type')}</TableCell>
+          <TableCell>{getTypeLabelForTransfer(transfer)}</TableCell>
+        </TableRow>
+        <TxDetailsShared
+          txData={txData}
+          pubKey={pubKey}
+          blockData={blockData}
+          hideTypeRow={true}
+        />
+        {from ? (
+          <TableRow modifier="bordered">
+            <TableCell>{t('From')}</TableCell>
+            <TableCell>
+              <PartyLink id={from} />
+            </TableCell>
+          </TableRow>
+        ) : null}
+        {transfer.to ? (
+          <TableRow modifier="bordered">
+            <TableCell>{t('To')}</TableCell>
+            <TableCell>
+              <PartyLink id={transfer.to} />
+            </TableCell>
+          </TableRow>
+        ) : null}
+        {transfer.asset && transfer.amount ? (
+          <TableRow modifier="bordered">
+            <TableCell>{t('Amount')}</TableCell>
+            <TableCell>
+              <SizeInAsset assetId={transfer.asset} size={transfer.amount} />
+            </TableCell>
+          </TableRow>
+        ) : null}
+      </TableWithTbody>
+      <TransferDetails from={from} transfer={transfer} />
+    </>
+  );
+};
+
+/**
+ * Gets a string description of this transfer
+ * @param txData A full transfer
+ * @returns string Transfer label
+ */
+export function getTypeLabelForTransfer(tx: Transfer) {
+  if (tx.to === SPECIAL_CASE_NETWORK || tx.to === SPECIAL_CASE_NETWORK_ID) {
+    if (tx.recurring && tx.recurring.dispatchStrategy) {
+      return 'Reward top up transfer';
+    }
+    // Else: we don't know that it's a reward transfer, so let's not guess
+  } else if (tx.recurring) {
+    return 'Recurring transfer';
+  } else if (tx.oneOff) {
+    // Currently redundant, but could be used to indicate something more specific
+    return 'Transfer';
+  }
+
+  return 'Transfer';
+}

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

@@ -14,14 +14,17 @@ interface StringMap {
 // Using https://github.com/vegaprotocol/protos/blob/e0f646ce39aab1fc66a9200ceec0262306d3beb3/commands/transaction.go#L93 as a reference
 const displayString: StringMap = {
   OrderSubmission: 'Order Submission',
+  'Submit Order': 'Order',
   OrderCancellation: 'Order Cancellation',
   OrderAmendment: 'Order Amendment',
   VoteSubmission: 'Vote Submission',
   WithdrawSubmission: 'Withdraw Submission',
   Withdraw: 'Withdraw Request',
-  LiquidityProvisionSubmission: 'Liquidity Provision',
-  LiquidityProvisionCancellation: 'Liquidity Cancellation',
-  LiquidityProvisionAmendment: 'Liquidity Amendment',
+  LiquidityProvisionSubmission: 'LP order',
+  'Liquidity Provision Order': 'LP order',
+  LiquidityProvisionCancellation: 'LP cancel',
+  LiquidityProvisionAmendment: 'LP update',
+  'Amend LiquidityProvision Order': 'Amend LP',
   ProposalSubmission: 'Governance Proposal',
   AnnounceNode: 'Node Announcement',
   NodeVote: 'Node Vote',
@@ -31,10 +34,11 @@ const displayString: StringMap = {
   DelegateSubmission: 'Delegation',
   UndelegateSubmission: 'Undelegation',
   KeyRotateSubmission: 'Key Rotation',
-  StateVariableProposal: 'State Variable Proposal',
+  StateVariableProposal: 'State Variable',
   Transfer: 'Transfer',
   CancelTransfer: 'Cancel Transfer',
-  ValidatorHeartbeat: 'Validator Heartbeat',
+  ValidatorHeartbeat: 'Heartbeat',
+  'Batch Market Instructions': 'Batch',
 };
 
 /**
@@ -132,7 +136,8 @@ export function getLabelForChainEvent(
 export const TxOrderType = ({ orderType, command }: TxOrderTypeProps) => {
   let type = displayString[orderType] || orderType;
 
-  let colours = 'text-white dark:text-white bg-zinc-800 dark:bg-zinc-800';
+  let colours =
+    'text-white dark:text-white bg-vega-dark-150 dark:bg-vega-dark-150';
 
   // This will get unwieldy and should probably produce a different colour of tag
   if (type === 'Chain Event' && !!command?.chainEvent) {

apps/explorer/src/app/components/txs/tx-transfer.spec.tsx

@@ -0,0 +1,58 @@
+import { getTypeLabelForTransfer } from './details/tx-transfer';
+import type { components } from '../../../types/explorer';
+
+type Transfer = components['schemas']['commandsv1Transfer'];
+
+describe('TX: Transfer: getLabelForTransfer', () => {
+  it('renders reward top up label if the TO party is 000', () => {
+    const mock: Transfer = {
+      to: '0000000000000000000000000000000000000000000000000000000000000000',
+      recurring: {
+        dispatchStrategy: {},
+      },
+    };
+
+    expect(getTypeLabelForTransfer(mock)).toEqual('Reward top up transfer');
+  });
+
+  it('renders reward top up label if the TO party is network', () => {
+    const mock = {
+      to: 'network',
+      recurring: {
+        dispatchStrategy: {},
+      },
+    };
+
+    expect(getTypeLabelForTransfer(mock)).toEqual('Reward top up transfer');
+  });
+
+  it('renders recurring label if the tx has a recurring property', () => {
+    const mock: Transfer = {
+      to: '0000000000000000000000000000000000000000000000000000000000000001',
+      recurring: {
+        startEpoch: '0',
+      },
+    };
+
+    expect(getTypeLabelForTransfer(mock)).toEqual('Recurring transfer');
+  });
+
+  it('renders one off label if the tx has a oneOff property', () => {
+    const mock: Transfer = {
+      to: '0000000000000000000000000000000000000000000000000000000000000001',
+      oneOff: {
+        deliverOn: '0',
+      },
+    };
+
+    expect(getTypeLabelForTransfer(mock)).toEqual('Transfer');
+  });
+
+  it('renders one off label otherwise', () => {
+    const mock: Transfer = {
+      to: '0000000000000000000000000000000000000000000000000000000000000001',
+    };
+
+    expect(getTypeLabelForTransfer(mock)).toEqual('Transfer');
+  });
+});

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

@@ -37,7 +37,9 @@ export const TxsInfiniteListItem = ({
         className="text-sm col-span-10 xl:col-span-3 leading-none"
         data-testid="tx-hash"
       >
-        <span className="xl:hidden uppercase text-zinc-500">ID:&nbsp;</span>
+        <span className="xl:hidden uppercase text-vega-dark-300">
+          ID:&nbsp;
+        </span>
         <TruncatedLink
           to={`/${Routes.TX}/${toHex(hash)}`}
           text={hash}
@@ -49,7 +51,9 @@ export const TxsInfiniteListItem = ({
         className="text-sm col-span-10 xl:col-span-3 leading-none"
         data-testid="pub-key"
       >
-        <span className="xl:hidden uppercase text-zinc-500">By:&nbsp;</span>
+        <span className="xl:hidden uppercase text-vega-dark-300">
+          By:&nbsp;
+        </span>
         <TruncatedLink
           to={`/${Routes.PARTIES}/${submitter}`}
           text={submitter}
@@ -64,7 +68,9 @@ export const TxsInfiniteListItem = ({
         className="text-sm col-span-3 xl:col-span-1 leading-none flex items-center"
         data-testid="tx-block"
       >
-        <span className="xl:hidden uppercase text-zinc-500">Block:&nbsp;</span>
+        <span className="xl:hidden uppercase text-vega-dark-300">
+          Block:&nbsp;
+        </span>
         <TruncatedLink
           to={`/${Routes.BLOCKS}/${block}`}
           text={block}
@@ -76,7 +82,7 @@ export const TxsInfiniteListItem = ({
         className="text-sm col-span-2 xl:col-span-1 leading-none flex items-center"
         data-testid="tx-success"
       >
-        <span className="xl:hidden uppercase text-zinc-500">
+        <span className="xl:hidden uppercase text-vega-dark-300">
           Success:&nbsp;
         </span>
         {isNumber(code) ? (

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

@@ -94,7 +94,7 @@ export const TxsInfiniteList = ({
 
   return (
     <div className={className} data-testid="transactions-list">
-      <div className="xl:grid grid-cols-10 w-full mb-3 hidden text-zinc-500 uppercase">
+      <div className="xl:grid grid-cols-10 w-full mb-3 hidden text-vega-dark-300 uppercase">
         <div className="col-span-3">
           <span className="hidden xl:inline">Transaction &nbsp;</span>
           <span>ID</span>

apps/explorer/src/app/config/env.ts

@@ -33,4 +33,7 @@ export const ENV = {
     parties: truthy.includes(windowOrDefault('NX_EXPLORER_PARTIES')),
     validators: truthy.includes(windowOrDefault('NX_EXPLORER_VALIDATORS')),
   },
+  addresses: {
+    feedback: windowOrDefault('NX_GITHUB_FEEDBACK_URL'),
+  },
 };

apps/explorer/src/app/hooks/use-tendermint-validators.ts

@@ -0,0 +1,55 @@
+import { useFetch } from '@vegaprotocol/react-helpers';
+import { useEffect, useRef } from 'react';
+import { DATA_SOURCES } from '../config';
+
+type PubKey = {
+  type: string;
+  value: string;
+};
+
+type Validator = {
+  address: string;
+  pub_key: PubKey;
+  voting_power: string;
+  proposer_priority: string;
+};
+
+type Result = {
+  block_height: string;
+  validators: Validator[];
+  count: string;
+  total: string;
+};
+
+type TendermintValidatorsResponse = {
+  jsonrpc: string;
+  id: number;
+  result: Result;
+};
+
+export const useTendermintValidators = (pollInterval?: number) => {
+  const {
+    state: { data, loading, error },
+    refetch,
+  } = useFetch<TendermintValidatorsResponse>(
+    `${DATA_SOURCES.tendermintUrl}/validators`
+  );
+
+  const ref = useRef<TendermintValidatorsResponse | undefined>(undefined);
+  useEffect(() => {
+    if (data) ref.current = data;
+  }, [data]);
+
+  useEffect(() => {
+    const interval =
+      pollInterval &&
+      setInterval(() => {
+        refetch();
+      }, pollInterval);
+    return () => {
+      clearInterval(interval);
+    };
+  }, [pollInterval, refetch]);
+
+  return { data: ref.current, loading, error, refetch };
+};

apps/explorer/src/app/routes/assets/asset-page.tsx

@@ -0,0 +1,57 @@
+import { t } from '@vegaprotocol/react-helpers';
+import { AsyncRenderer, Button } from '@vegaprotocol/ui-toolkit';
+import { useScrollToLocation } from '../../hooks/scroll-to-location';
+import { useDocumentTitle } from '../../hooks/use-document-title';
+import type { AssetFieldsFragment } from '@vegaprotocol/assets';
+import { AssetDetailsTable, useAssetDataProvider } from '@vegaprotocol/assets';
+import { useParams } from 'react-router-dom';
+import { JsonViewerDialog } from '../../components/dialogs/json-viewer-dialog';
+import { useState } from 'react';
+import { PageTitle } from '../../components/page-helpers/page-title';
+
+export const AssetPage = () => {
+  useDocumentTitle(['Assets']);
+  useScrollToLocation();
+
+  const { assetId } = useParams<{ assetId: string }>();
+  const { data, loading, error } = useAssetDataProvider(assetId || '');
+
+  const title = data ? data.name : error ? t('Asset not found') : '';
+  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
+
+  return (
+    <>
+      <section className="relative">
+        <PageTitle
+          data-testid="asset-header"
+          title={title}
+          actions={
+            <Button
+              disabled={!data}
+              size="xs"
+              onClick={() => setDialogOpen(true)}
+            >
+              {t('View JSON')}
+            </Button>
+          }
+        />
+        <AsyncRenderer
+          noDataMessage={t('Asset not found')}
+          data={data}
+          loading={loading}
+          error={error}
+        >
+          <div className="h-full relative">
+            <AssetDetailsTable asset={data as AssetFieldsFragment} />
+          </div>
+        </AsyncRenderer>
+      </section>
+      <JsonViewerDialog
+        open={dialogOpen}
+        onChange={(isOpen) => setDialogOpen(isOpen)}
+        title={data?.name || ''}
+        content={data}
+      />
+    </>
+  );
+};

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

@@ -6,7 +6,7 @@ import { useDocumentTitle } from '../../hooks/use-document-title';
 import { useAssetsDataProvider } from '@vegaprotocol/assets';
 import { AssetsTable } from '../../components/assets/assets-table';
 
-export const Assets = () => {
+export const AssetsPage = () => {
   useDocumentTitle(['Assets']);
   useScrollToLocation();
 

apps/explorer/src/app/routes/assets/index.tsx

@@ -1 +1,2 @@
-export * from './assets';
+export * from './assets-page';
+export * from './asset-page';

apps/explorer/src/app/routes/governance/Proposals.graphql

@@ -1,82 +0,0 @@
-query ExplorerProposals {
-  proposalsConnection {
-    edges {
-      node {
-        id
-        rationale {
-          title
-          description
-        }
-        reference
-        state
-        datetime
-        rejectionReason
-        party {
-          id
-        }
-        terms {
-          closingDatetime
-          enactmentDatetime
-          change {
-            ... on NewMarket {
-              instrument {
-                name
-              }
-            }
-            ... on UpdateMarket {
-              marketId
-            }
-            ... on NewAsset {
-              __typename
-              symbol
-              source {
-                ... on BuiltinAsset {
-                  maxFaucetAmountMint
-                }
-                ... on ERC20 {
-                  contractAddress
-                }
-              }
-            }
-            ... on UpdateNetworkParameter {
-              networkParameter {
-                key
-                value
-              }
-            }
-          }
-        }
-        votes {
-          yes {
-            totalTokens
-            totalNumber
-            votes {
-              value
-              party {
-                id
-                stakingSummary {
-                  currentStakeAvailable
-                }
-              }
-              datetime
-            }
-          }
-          no {
-            totalTokens
-            totalNumber
-            votes {
-              value
-              party {
-                id
-                stakingSummary {
-                  currentStakeAvailable
-                }
-              }
-              datetime
-            }
-          }
-        }
-      }
-    }
-  }
-}

apps/explorer/src/app/routes/governance/__generated__/Proposals.ts

@@ -1,122 +0,0 @@
-import * as Types from '@vegaprotocol/types';
-
-import { gql } from '@apollo/client';
-import * as Apollo from '@apollo/client';
-const defaultOptions = {} as const;
-export type ExplorerProposalsQueryVariables = Types.Exact<{ [key: string]: never; }>;
-
-
-export type ExplorerProposalsQuery = { __typename?: 'Query', proposalsConnection?: { __typename?: 'ProposalsConnection', edges?: Array<{ __typename?: 'ProposalEdge', node: { __typename?: 'Proposal', id?: string | null, reference: string, state: Types.ProposalState, datetime: any, rejectionReason?: Types.ProposalRejectionReason | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string }, party: { __typename?: 'Party', id: string }, terms: { __typename?: 'ProposalTerms', closingDatetime: any, enactmentDatetime?: any | null, change: { __typename: 'NewAsset', symbol: string, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string } } | { __typename?: 'NewFreeform' } | { __typename?: 'NewMarket', instrument: { __typename?: 'InstrumentConfiguration', name: string } } | { __typename?: 'UpdateAsset' } | { __typename?: 'UpdateMarket', marketId: string } | { __typename?: 'UpdateNetworkParameter', networkParameter: { __typename?: 'NetworkParameter', key: string, value: string } } }, votes: { __typename?: 'ProposalVotes', yes: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, votes?: Array<{ __typename?: 'Vote', value: Types.VoteValue, datetime: any, party: { __typename?: 'Party', id: string, stakingSummary: { __typename?: 'StakingSummary', currentStakeAvailable: string } } }> | null }, no: { __typename?: 'ProposalVoteSide', totalTokens: string, totalNumber: string, votes?: Array<{ __typename?: 'Vote', value: Types.VoteValue, datetime: any, party: { __typename?: 'Party', id: string, stakingSummary: { __typename?: 'StakingSummary', currentStakeAvailable: string } } }> | null } } } } | null> | null } | null };
-
-
-export const ExplorerProposalsDocument = gql`
-    query ExplorerProposals {
-  proposalsConnection {
-    edges {
-      node {
-        id
-        rationale {
-          title
-          description
-        }
-        reference
-        state
-        datetime
-        rejectionReason
-        party {
-          id
-        }
-        terms {
-          closingDatetime
-          enactmentDatetime
-          change {
-            ... on NewMarket {
-              instrument {
-                name
-              }
-            }
-            ... on UpdateMarket {
-              marketId
-            }
-            ... on NewAsset {
-              __typename
-              symbol
-              source {
-                ... on BuiltinAsset {
-                  maxFaucetAmountMint
-                }
-                ... on ERC20 {
-                  contractAddress
-                }
-              }
-            }
-            ... on UpdateNetworkParameter {
-              networkParameter {
-                key
-                value
-              }
-            }
-          }
-        }
-        votes {
-          yes {
-            totalTokens
-            totalNumber
-            votes {
-              value
-              party {
-                id
-                stakingSummary {
-                  currentStakeAvailable
-                }
-              }
-              datetime
-            }
-          }
-          no {
-            totalTokens
-            totalNumber
-            votes {
-              value
-              party {
-                id
-                stakingSummary {
-                  currentStakeAvailable
-                }
-              }
-              datetime
-            }
-          }
-        }
-      }
-    }
-  }
-}
-    `;
-
-/**
- * __useExplorerProposalsQuery__
- *
- * To run a query within a React component, call `useExplorerProposalsQuery` and pass it any options that fit your needs.
- * When your component renders, `useExplorerProposalsQuery` 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 } = useExplorerProposalsQuery({
- *   variables: {
- *   },
- * });
- */
-export function useExplorerProposalsQuery(baseOptions?: Apollo.QueryHookOptions<ExplorerProposalsQuery, ExplorerProposalsQueryVariables>) {
-        const options = {...defaultOptions, ...baseOptions}
-        return Apollo.useQuery<ExplorerProposalsQuery, ExplorerProposalsQueryVariables>(ExplorerProposalsDocument, options);
-      }
-export function useExplorerProposalsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerProposalsQuery, ExplorerProposalsQueryVariables>) {
-          const options = {...defaultOptions, ...baseOptions}
-          return Apollo.useLazyQuery<ExplorerProposalsQuery, ExplorerProposalsQueryVariables>(ExplorerProposalsDocument, options);
-        }
-export type ExplorerProposalsQueryHookResult = ReturnType<typeof useExplorerProposalsQuery>;
-export type ExplorerProposalsLazyQueryHookResult = ReturnType<typeof useExplorerProposalsLazyQuery>;
-export type ExplorerProposalsQueryResult = Apollo.QueryResult<ExplorerProposalsQuery, ExplorerProposalsQueryVariables>;

apps/explorer/src/app/routes/governance/index.tsx

@@ -1,63 +1 @@
-import { t } from '@vegaprotocol/react-helpers';
-import React from 'react';
-import { RouteTitle } from '../../components/route-title';
-import { SubHeading } from '../../components/sub-heading';
-import { Loader, SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
-import { useExplorerProposalsQuery } from './__generated__/Proposals';
-import { useDocumentTitle } from '../../hooks/use-document-title';
-import EmptyList from '../../components/empty-list/empty-list';
-
-const Governance = () => {
-  const { data, loading } = useExplorerProposalsQuery({
-    errorPolicy: 'ignore',
-  });
-
-  useDocumentTitle();
-
-  if (!data || !data.proposalsConnection || !data.proposalsConnection.edges) {
-    if (!loading) {
-      return (
-        <section>
-          <RouteTitle data-testid="governance-header">
-            {t('Governance Proposals')}
-          </RouteTitle>
-
-          <EmptyList
-            heading={t('This chain has no proposals')}
-            label={t('0 proposals')}
-          />
-        </section>
-      );
-    } else {
-      return <Loader />;
-    }
-  }
-
-  const proposals = data?.proposalsConnection?.edges.map((e) => {
-    return e?.node;
-  });
-
-  return (
-    <section>
-      <RouteTitle data-testid="governance-header">
-        {t('Governance Proposals')}
-      </RouteTitle>
-      {proposals.map((p) => {
-        if (!p || !p.id) {
-          return null;
-        }
-
-        return (
-          <React.Fragment key={p.id}>
-            <SubHeading>
-              {p.rationale.title || p.rationale.description}
-            </SubHeading>
-            <SyntaxHighlighter data={p} />
-          </React.Fragment>
-        );
-      })}
-    </section>
-  );
-};
-
-export default Governance;
+export * from './proposals-page';

apps/explorer/src/app/routes/governance/proposals-page.tsx

@@ -0,0 +1,33 @@
+import { proposalsDataProvider } from '@vegaprotocol/governance';
+import { t, useDataProvider } from '@vegaprotocol/react-helpers';
+import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
+import { ProposalsTable } from '../../components/proposals/proposals-table';
+import { RouteTitle } from '../../components/route-title';
+import { useScrollToLocation } from '../../hooks/scroll-to-location';
+import { useDocumentTitle } from '../../hooks/use-document-title';
+
+export const Proposals = () => {
+  useScrollToLocation();
+
+  const { data, loading, error } = useDataProvider({
+    dataProvider: proposalsDataProvider,
+  });
+
+  useDocumentTitle([t('Governance Proposals')]);
+
+  return (
+    <section>
+      <RouteTitle data-testid="proposals-heading">
+        {t('Governance proposals')}
+      </RouteTitle>
+      <AsyncRenderer
+        noDataMessage={t('This chain has no proposals')}
+        data={data}
+        loading={loading}
+        error={error}
+      >
+        <ProposalsTable data={data} />
+      </AsyncRenderer>
+    </section>
+  );
+};

apps/explorer/src/app/routes/markets/market-page.tsx

@@ -3,12 +3,12 @@ import { AsyncRenderer, Button } from '@vegaprotocol/ui-toolkit';
 import { useMemo, useState } from 'react';
 import { useParams } from 'react-router-dom';
 import { MarketDetails } from '../../components/markets/market-details';
-import { RouteTitle } from '../../components/route-title';
 import { useScrollToLocation } from '../../hooks/scroll-to-location';
 import { useDocumentTitle } from '../../hooks/use-document-title';
 import compact from 'lodash/compact';
 import { JsonViewerDialog } from '../../components/dialogs/json-viewer-dialog';
 import { marketInfoNoCandlesDataProvider } from '@vegaprotocol/market-info';
+import { PageTitle } from '../../components/page-helpers/page-title';
 
 export const MarketPage = () => {
   useScrollToLocation();
@@ -40,20 +40,25 @@ export const MarketPage = () => {
   return (
     <>
       <section className="relative">
-        <RouteTitle data-testid="markets-heading">
-          {data?.market?.tradableInstrument.instrument.name}
-        </RouteTitle>
+        <PageTitle
+          data-testid="markets-heading"
+          title={data?.market?.tradableInstrument.instrument.name || ''}
+          actions={
+            <Button
+              disabled={!data?.market}
+              size="xs"
+              onClick={() => setDialogOpen(true)}
+            >
+              {t('View JSON')}
+            </Button>
+          }
+        />
         <AsyncRenderer
           noDataMessage={t('This chain has no markets')}
           data={data}
           loading={loading}
           error={error}
         >
-          <div className="absolute top-0 right-0">
-            <Button size="xs" onClick={() => setDialogOpen(true)}>
-              {t('View JSON')}
-            </Button>
-          </div>
           <MarketDetails market={data?.market} />
         </AsyncRenderer>
       </section>

apps/explorer/src/app/routes/parties/id/index.tsx

@@ -68,7 +68,7 @@ const Party = () => {
   return (
     <section>
       <h1
-        className="font-alpha uppercase font-xl mb-4 text-zinc-800 dark:text-zinc-200"
+        className="font-alpha calt uppercase font-xl mb-4 text-vega-dark-100 dark:text-vega-light-100"
         data-testid="parties-header"
       >
         {t('Public key')}

apps/explorer/src/app/routes/router-config.tsx

@@ -1,6 +1,6 @@
-import { Assets } from './assets';
+import { AssetPage, AssetsPage } from './assets';
 import BlockPage from './blocks';
-import Governance from './governance';
+import { Proposals } from './governance';
 import Home from './home';
 import OraclePage from './oracles';
 import Oracles from './oracles/home';
@@ -9,7 +9,7 @@ import Party from './parties';
 import { Parties } from './parties/home';
 import { Party as PartySingle } from './parties/id';
 import Txs from './txs';
-import Validators from './validators';
+import { ValidatorsPage } from './validators';
 import Genesis from './genesis';
 import { Block } from './blocks/id';
 import { Blocks } from './blocks/home';
@@ -53,7 +53,16 @@ const assetsRoutes: Route[] = flags.assets
         path: Routes.ASSETS,
         text: t('Assets'),
         name: 'Assets',
-        element: <Assets />,
+        children: [
+          {
+            index: true,
+            element: <AssetsPage />,
+          },
+          {
+            path: ':assetId',
+            element: <AssetPage />,
+          },
+        ],
       },
     ]
   : [];
@@ -75,7 +84,7 @@ const governanceRoutes: Route[] = flags.governance
         path: Routes.GOVERNANCE,
         name: 'Governance proposals',
         text: t('Governance Proposals'),
-        element: <Governance />,
+        element: <Proposals />,
       },
     ]
   : [];
@@ -116,7 +125,7 @@ const validators: Route[] = flags.validators
         path: Routes.VALIDATORS,
         name: 'Validators',
         text: t('Validators'),
-        element: <Validators />,
+        element: <ValidatorsPage />,
       },
     ]
   : [];

apps/explorer/src/app/routes/validators/index.tsx

@@ -1,47 +1 @@
-import { t } from '@vegaprotocol/react-helpers';
-import { RouteTitle } from '../../components/route-title';
-import { SubHeading } from '../../components/sub-heading';
-import { Loader, SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
-import { DATA_SOURCES } from '../../config';
-import { useFetch } from '@vegaprotocol/react-helpers';
-import type { TendermintValidatorsResponse } from './tendermint-validator-response';
-import { useExplorerNodesQuery } from './__generated__/Nodes';
-import { useDocumentTitle } from '../../hooks/use-document-title';
-
-const Validators = () => {
-  const {
-    state: { data: validators },
-  } = useFetch<TendermintValidatorsResponse>(
-    `${DATA_SOURCES.tendermintUrl}/validators`
-  );
-
-  useDocumentTitle(['Validators']);
-
-  const { data } = useExplorerNodesQuery();
-
-  return (
-    <section>
-      <RouteTitle data-testid="validators-header">{t('Validators')}</RouteTitle>
-      {data ? (
-        <>
-          <SubHeading data-testid="vega-header">{t('Vega data')}</SubHeading>
-          <SyntaxHighlighter data-testid="vega-data" data={data} />
-        </>
-      ) : (
-        <Loader />
-      )}
-      {validators ? (
-        <>
-          <SubHeading data-testid="tendermint-header">
-            {t('Tendermint data')}
-          </SubHeading>
-          <SyntaxHighlighter data-testid="tendermint-data" data={validators} />
-        </>
-      ) : (
-        <Loader />
-      )}
-    </section>
-  );
-};
-
-export default Validators;
+export * from './validators-page';

apps/explorer/src/app/routes/validators/tendermint-validator-response.tsx

@@ -1,24 +0,0 @@
-export interface PubKey {
-  type: string;
-  value: string;
-}
-
-export interface Validator {
-  address: string;
-  pub_key: PubKey;
-  voting_power: string;
-  proposer_priority: string;
-}
-
-export interface Result {
-  block_height: string;
-  validators: Validator[];
-  count: string;
-  total: string;
-}
-
-export interface TendermintValidatorsResponse {
-  jsonrpc: string;
-  id: number;
-  result: Result;
-}

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

@@ -0,0 +1,340 @@
+import { countryCodeToFlagEmoji, t } from '@vegaprotocol/react-helpers';
+import {
+  AsyncRenderer,
+  Button,
+  CopyWithTooltip,
+  ExternalLink,
+  Icon,
+  KeyValueTable,
+  KeyValueTableRow,
+  Tooltip,
+  truncateMiddle,
+} from '@vegaprotocol/ui-toolkit';
+
+import { useExplorerNodesQuery } from './__generated__/Nodes';
+import { useDocumentTitle } from '../../hooks/use-document-title';
+import compact from 'lodash/compact';
+import { useTendermintValidators } from '../../hooks/use-tendermint-validators';
+import { useMemo, useState } from 'react';
+import { JsonViewerDialog } from '../../components/dialogs/json-viewer-dialog';
+import { PageTitle } from '../../components/page-helpers/page-title';
+import BigNumber from 'bignumber.js';
+import {
+  ContractAddressLink,
+  DApp,
+  TOKEN_VALIDATOR,
+  useLinks,
+} from '@vegaprotocol/environment';
+import classNames from 'classnames';
+import { NodeStatus, NodeStatusMapping } from '@vegaprotocol/types';
+
+type RateProps = {
+  value: BigNumber | number | undefined;
+  className?: string;
+  colour?: 'green' | 'blue' | 'pink' | 'orange';
+  asPoint?: boolean;
+  zero?: boolean;
+};
+const Rate = ({
+  value,
+  className,
+  colour = 'blue',
+  asPoint = false,
+}: RateProps) => {
+  const val =
+    typeof value === 'undefined'
+      ? new BigNumber(0)
+      : typeof value === 'number'
+      ? new BigNumber(value)
+      : value;
+  const bar = asPoint
+    ? {
+        right: `${val.times(100).toFixed(2)}%`,
+      }
+    : { width: `${val.times(100).toFixed(2)}%` };
+  return (
+    <div
+      className={classNames(
+        'overflow-hidden rounded h-[9px] flex w-full bg-vega-light-100 dark:bg-vega-dark-150',
+        { 'pl-[9px]': asPoint },
+        {
+          'bg-gradient-to-l to-vega-orange-500 dark:to-vega-orange-550 from-vega-light-100 dark:from-vega-dark-150':
+            asPoint && colour === 'orange',
+        }
+      )}
+    >
+      <div className="relative w-full">
+        <div
+          className={classNames(
+            'w-[9px] h-[9px] absolute top-0 right-0 transition-all rounded',
+            {
+              'bg-vega-green-550 dark:bg-vega-green-500': colour === 'green',
+              'bg-vega-blue-550 dark:bg-vega-blue-500': colour === 'blue',
+              'bg-vega-pink-550 dark:bg-vega-pink-500': colour === 'pink',
+              'bg-vega-orange-550 dark:bg-vega-orange-500': colour === 'orange',
+            },
+            'bg-vega',
+            className
+          )}
+          style={bar}
+        ></div>
+      </div>
+    </div>
+  );
+};
+
+export const ValidatorsPage = () => {
+  useDocumentTitle(['Validators']);
+
+  const { data: tmData } = useTendermintValidators(5000);
+  const { data, loading, error, refetch } = useExplorerNodesQuery();
+
+  const validators = compact(data?.nodesConnection.edges?.map((e) => e?.node));
+
+  // voting power
+  const powers = compact(tmData?.result.validators).map(
+    (v) => new BigNumber(v.voting_power)
+  );
+  const totalVotingPower = BigNumber.sum(...powers);
+
+  // proposer priority
+  const priorities = compact(tmData?.result.validators).map(
+    (v) => new BigNumber(v.proposer_priority)
+  );
+  const absoluteProposerPriority = BigNumber.max(
+    ...priorities.map((p) => p.abs())
+  );
+
+  const tmValidators = useMemo(() => {
+    return tmData?.result.validators.map((v) => {
+      const data = {
+        key: v.pub_key.value,
+        votingPower: new BigNumber(v.voting_power),
+        proposerPriority: new BigNumber(v.proposer_priority),
+      };
+      return {
+        ...data,
+        votingPowerRatio: data.votingPower.dividedBy(totalVotingPower),
+        proposerPriorityRatio: absoluteProposerPriority
+          .plus(data.proposerPriority)
+          .dividedBy(absoluteProposerPriority.times(2)),
+      };
+    });
+  }, [tmData?.result.validators, totalVotingPower, absoluteProposerPriority]);
+
+  const totalStaked = BigNumber.sum(
+    ...validators.map((v) => new BigNumber(v.stakedTotal))
+  );
+
+  const [vegaDialog, setVegaDialog] = useState<boolean>(false);
+  const [tmDialog, setTmDialog] = useState<boolean>(false);
+
+  const tokenLink = useLinks(DApp.Token);
+
+  return (
+    <>
+      <section>
+        <PageTitle
+          title={t('Validators')}
+          actions={
+            <>
+              <Button
+                disabled={Boolean(!data)}
+                size="xs"
+                onClick={() => setVegaDialog(true)}
+              >
+                {t('View JSON')}
+              </Button>
+              {
+                <Button
+                  disabled={Boolean(!tmData)}
+                  size="xs"
+                  onClick={() => setTmDialog(true)}
+                >
+                  {t('View tendermint as JSON')}
+                </Button>
+              }
+            </>
+          }
+        />
+        <AsyncRenderer
+          data={validators}
+          loading={loading}
+          error={error}
+          reload={refetch}
+        >
+          <ul className="md:columns-2">
+            {validators.map((v) => {
+              const tm = tmValidators?.find((tmv) => tmv.key === v.tmPubkey);
+              const stakedRatio = new BigNumber(v.stakedTotal).dividedBy(
+                totalStaked
+              );
+              const validatorPage = tokenLink(
+                TOKEN_VALIDATOR.replace(':id', v.id)
+              );
+              const validatorName =
+                v.name && v.name.length > 0 ? v.name : truncateMiddle(v.id);
+              return (
+                <li className="mb-5" key={v.id}>
+                  <div
+                    data-testid="validator-tile"
+                    validator-id={v.id}
+                    className="border border-vega-light-200 dark:border-vega-dark-200 rounded p-2 overflow-hidden relative flex gap-2 items-start justify-between"
+                  >
+                    {v.avatarUrl && (
+                      <div className="w-20">
+                        <ExternalLink href={validatorPage}>
+                          <img
+                            className="w-full"
+                            src={v.avatarUrl}
+                            alt={validatorName}
+                          />
+                        </ExternalLink>
+                      </div>
+                    )}
+                    <div className="w-full">
+                      <h2 className="font-alpha text-2xl">
+                        <ExternalLink href={validatorPage}>
+                          {validatorName}
+                        </ExternalLink>
+                      </h2>
+                      <KeyValueTable>
+                        <KeyValueTableRow>
+                          <div>{t('ID')}</div>
+                          <div className="break-all text-xs">{v.id}</div>
+                        </KeyValueTableRow>
+                        <KeyValueTableRow>
+                          <div>{t('Status')}</div>
+                          <div className="break-all text-xs">
+                            <span
+                              className={classNames('mr-1', {
+                                'text-vega-green-550 dark:vega-green-500':
+                                  v.status === NodeStatus.NODE_STATUS_VALIDATOR,
+                                'text-vega-pink-550 dark:vega-pink-500':
+                                  v.status ===
+                                  NodeStatus.NODE_STATUS_NON_VALIDATOR,
+                              })}
+                            >
+                              <Icon name="tick-circle" size={3} />
+                            </span>
+                            {NodeStatusMapping[v.status]}
+                          </div>
+                        </KeyValueTableRow>
+                        <KeyValueTableRow>
+                          <div>{t('Location')}</div>
+                          <div>
+                            {countryCodeToFlagEmoji(v.location)}{' '}
+                            <span className="text-[10px]">{v.location}</span>
+                          </div>
+                        </KeyValueTableRow>
+                        <KeyValueTableRow>
+                          <div>{t('Public key')}</div>
+                          <div className="break-all text-xs">{v.pubkey}</div>
+                        </KeyValueTableRow>
+                        <KeyValueTableRow>
+                          <div>{t('Ethereum address')}</div>
+                          <div className="break-all text-xs">
+                            <ContractAddressLink address={v.ethereumAddress} />{' '}
+                            <CopyWithTooltip text={v.ethereumAddress}>
+                              <button title={t('Copy address to clipboard')}>
+                                <Icon size={3} name="duplicate" />
+                              </button>
+                            </CopyWithTooltip>
+                          </div>
+                        </KeyValueTableRow>
+                        <KeyValueTableRow>
+                          <div>{t('Tendermint public key')}</div>
+                          <div className="break-all text-xs">{v.tmPubkey}</div>
+                        </KeyValueTableRow>
+
+                        <KeyValueTableRow>
+                          <div>{t('Voting power')}</div>
+                          <div className="w-44 text-right">
+                            <Rate value={tm?.votingPowerRatio} />
+                            <div className="text-[10px] leading-3">
+                              {tm?.votingPowerRatio.times(100).toFixed(2)}
+                              {'% '}({tm?.votingPower.toString()})
+                            </div>
+                          </div>
+                        </KeyValueTableRow>
+                        <KeyValueTableRow>
+                          <div>{t('Proposer priority')}</div>
+                          <div className="w-44 text-right">
+                            <Rate
+                              value={tm?.proposerPriorityRatio}
+                              colour="orange"
+                              asPoint={true}
+                              zero={true}
+                            />
+                            <div className="text-[10px] leading-3">
+                              {tm?.proposerPriority.toString()}
+                            </div>
+                          </div>
+                        </KeyValueTableRow>
+
+                        <KeyValueTableRow>
+                          <div>{t('Stake share')}</div>
+                          <div className="w-44 text-right">
+                            <Rate value={stakedRatio} colour="green" />
+                            <div className="text-[10px] leading-3">
+                              <Tooltip
+                                description={
+                                  <KeyValueTable
+                                    numerical={true}
+                                    className="mb-1"
+                                  >
+                                    <KeyValueTableRow
+                                      className="text-xs"
+                                      noBorder={true}
+                                    >
+                                      <div>{t('Staked by operator')}</div>
+                                      <div>{v.stakedByOperator}</div>
+                                    </KeyValueTableRow>
+                                    <KeyValueTableRow
+                                      className="text-xs"
+                                      noBorder={true}
+                                    >
+                                      <div>{t('Staked by delegates')}</div>
+                                      <div>{v.stakedByDelegates}</div>
+                                    </KeyValueTableRow>
+                                    <KeyValueTableRow
+                                      className="text-xs"
+                                      noBorder={true}
+                                    >
+                                      <div>{t('Staked (total)')}</div>
+                                      <div>{v.stakedTotal}</div>
+                                    </KeyValueTableRow>
+                                  </KeyValueTable>
+                                }
+                              >
+                                <span>
+                                  {stakedRatio.times(100).toFixed(2)}%
+                                </span>
+                              </Tooltip>
+                            </div>
+                          </div>
+                        </KeyValueTableRow>
+                      </KeyValueTable>
+                    </div>
+                  </div>
+                </li>
+              );
+            })}
+          </ul>
+        </AsyncRenderer>
+      </section>
+      <JsonViewerDialog
+        open={vegaDialog}
+        onChange={(isOpen) => setVegaDialog(isOpen)}
+        title={t('Vega Validators')}
+        content={data}
+      />
+      <JsonViewerDialog
+        open={tmDialog}
+        onChange={(isOpen) => setTmDialog(isOpen)}
+        title={t('Tendermint Validators')}
+        content={tmData}
+      />
+    </>
+  );
+};

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

@@ -15,6 +15,7 @@ type OneOf<T extends any[]> = T extends [infer Only]
   ? OneOf<[XOR<A, B>, ...Rest]>
   : never;
 /* eslint-enable @typescript-eslint/no-explicit-any */
+
 export interface paths {
   '/info': {
     /**
@@ -40,8 +41,6 @@ export interface paths {
   };
 }
 
-export type webhooks = Record<string, never>;
-
 export interface components {
   schemas: {
     /**
@@ -66,7 +65,7 @@ export interface components {
       | 'OPERATOR_LESS_THAN'
       | 'OPERATOR_LESS_THAN_OR_EQUAL';
     /**
-     * The supported Oracle sources
+     * The supported oracle sources
      * @description - ORACLE_SOURCE_UNSPECIFIED: The default value
      *  - ORACLE_SOURCE_OPEN_ORACLE: Specifies that the payload will be base64 encoded JSON conforming to the Open Oracle standard
      *  - ORACLE_SOURCE_JSON: Specifies that the payload will be base64 encoded JSON, but does not specify the shape of the data
@@ -174,7 +173,7 @@ export interface components {
       readonly '@type'?: string;
       [key: string]: unknown | undefined;
     };
-    /** Used announce a node as a new pending validator */
+    /** Used to announce a node as a new pending validator */
     readonly v1AnnounceNode: {
       /** AvatarURL of the validator */
       readonly avatarUrl?: string;
@@ -269,13 +268,13 @@ export interface components {
     readonly v1ETHAddress: {
       readonly address?: string;
     };
-    /** A transaction to allow validator to rotate their ethereum keys */
+    /** A transaction to allow a validator to rotate their ethereum keys */
     readonly v1EthereumKeyRotateSubmission: {
       /** Currently used public address */
       readonly currentAddress?: string;
       /** Signature that can be verified using the new ethereum address */
       readonly ethereumSignature?: components['schemas']['v1Signature'];
-      /** The new adress to rotate to */
+      /** The new address to rotate to */
       readonly newAddress?: string;
       /** Ethereum public key to use as a submitter to allow automatic signature generation */
       readonly submitterAddress?: string;
@@ -309,7 +308,9 @@ export interface components {
       readonly version?: string;
     };
     readonly v1InputData: {
+      /** A command used by a node operator to announce its node as a pending validator */
       readonly announceNode?: components['schemas']['v1AnnounceNode'];
+      /** A command to submit a batch of order instructions to a market */
       readonly batchMarketInstructions?: components['schemas']['v1BatchMarketInstructions'];
       /**
        * Format: uint64
@@ -323,17 +324,35 @@ export interface components {
        * `block_height` prevents replay attacks in conjunction with `nonce` (see above).
        */
       readonly blockHeight?: string;
+      /** A command to request cancelling a recurring transfer */
       readonly cancelTransfer?: components['schemas']['v1CancelTransfer'];
+      /**
+       * Command used by a validator to submit an event forwarded to the Vega network to provide information
+       * on events happening on other networks, to be used by a foreign chain
+       * to recognise a decision taken by the Vega network
+       */
       readonly chainEvent?: components['schemas']['v1ChainEvent'];
+      /** Command to delegate tokens to a validator */
       readonly delegateSubmission?: components['schemas']['v1DelegateSubmission'];
+      /** Command used by a validator to allow given validator to rotate their Ethereum keys */
       readonly ethereumKeyRotateSubmission?: components['schemas']['v1EthereumKeyRotateSubmission'];
+      /** Command used by a validator to submit signatures to a smart contract */
       readonly issueSignatures?: components['schemas']['v1IssueSignatures'];
+      /** Command used by a validator to allow given validator to rotate their Vega keys */
       readonly keyRotateSubmission?: components['schemas']['v1KeyRotateSubmission'];
+      /** Command to request amending a liquidity commitment */
       readonly liquidityProvisionAmendment?: components['schemas']['v1LiquidityProvisionAmendment'];
+      /** Command to request cancelling a liquidity commitment */
       readonly liquidityProvisionCancellation?: components['schemas']['v1LiquidityProvisionCancellation'];
+      /** Command to submit a liquidity commitment */
       readonly liquidityProvisionSubmission?: components['schemas']['v1LiquidityProvisionSubmission'];
+      /** Command used by a validator to submit a signature, to be used by a foreign chain to recognise a decision taken by the Vega network */
       readonly nodeSignature?: components['schemas']['v1NodeSignature'];
-      /** Validator commands */
+      /**
+       * Validator commands
+       * Command used by a validator when a node votes for validating that a given resource exists or is valid,
+       * for example, an ERC20 deposit is valid and exists on ethereum
+       */
       readonly nodeVote?: components['schemas']['v1NodeVote'];
       /**
        * Format: uint64
@@ -349,30 +368,50 @@ export interface components {
        * slightly differently, causing a different hash.
        */
       readonly nonce?: string;
-      /** Oracles */
+      /**
+       * Oracles
+       * Command to submit new oracle data from third party providers
+       */
       readonly oracleDataSubmission?: components['schemas']['v1OracleDataSubmission'];
+      /** Command to amend an order */
       readonly orderAmendment?: components['schemas']['v1OrderAmendment'];
+      /**
+       * User commands
+       * Command to cancel an order
+       */
       readonly orderCancellation?: components['schemas']['v1OrderCancellation'];
-      /** User commands */
+      /** A command for submitting an order */
       readonly orderSubmission?: components['schemas']['v1OrderSubmission'];
+      /** Command to submit a governance proposal */
       readonly proposalSubmission?: components['schemas']['v1ProposalSubmission'];
+      /** Command used by a validator to propose a protocol upgrade */
       readonly protocolUpgradeProposal?: components['schemas']['v1ProtocolUpgradeProposal'];
+      /** Command used by a validator to submit a floating point value */
       readonly stateVariableProposal?: components['schemas']['v1StateVariableProposal'];
+      /** Command to submit a transfer */
       readonly transfer?: components['schemas']['commandsv1Transfer'];
+      /** Command to remove tokens delegated to a validator */
       readonly undelegateSubmission?: components['schemas']['v1UndelegateSubmission'];
+      /**
+       * Command used by a validator to signal they are still online and validating blocks
+       * or ready to validate blocks when they are still a pending validator
+       */
       readonly validatorHeartbeat?: components['schemas']['v1ValidatorHeartbeat'];
+      /** Command to submit a vote on a governance proposal */
       readonly voteSubmission?: components['schemas']['v1VoteSubmission'];
+      /** Command to submit a withdrawal */
       readonly withdrawSubmission?: components['schemas']['v1WithdrawSubmission'];
     };
+    /** A transaction for a validator to submit signatures to a smart contract */
     readonly v1IssueSignatures: {
       /** The kind of signatures to generate, namely for whether a signer is being added or removed */
       readonly kind?: components['schemas']['v1NodeSignatureKind'];
-      /** The ethereum address which will submit the signatures to the smart-contract */
+      /** The ethereum address which will submit the signatures to the smart contract */
       readonly submitter?: string;
-      /** The ID of the node that will be signed in or out of the smartcontract */
+      /** The ID of the node that will be signed in or out of the smart contract */
       readonly validatorNodeId?: string;
     };
-    /** A transaction to allow validator to rotate their Vega keys */
+    /** A transaction to allow a validator to rotate their Vega keys */
     readonly v1KeyRotateSubmission: {
       /** Hash of currently used public key */
       readonly currentPubKeyHash?: string;
@@ -496,8 +535,8 @@ export interface components {
     /** Specific details for a one off transfer */
     readonly v1OneOffTransfer: {
       /**
-       * A unix timestamp in second. Time at which the
-       * transfer should be delivered in the to account
+       * A unix timestamp in seconds. Time at which the
+       * transfer should be delivered into the To account
        * Format: int64
        */
       readonly deliverOn?: string;
@@ -512,7 +551,7 @@ export interface components {
       readonly payload?: string;
       /**
        * @description The source from which the data is coming from. Must be base64 encoded.
-       * Oracle data a type of external data source data.
+       * Oracle data is a type of external data source data.
        */
       readonly source?: components['schemas']['OracleDataSubmissionOracleSource'];
     };
@@ -603,7 +642,7 @@ export interface components {
       /** Type for the order, required field - See `Order.Type` */
       readonly type?: components['schemas']['vegaOrderType'];
     };
-    /** @description PropertyKey describes the property key contained in an data source data. */
+    /** @description PropertyKey describes the property key contained in data source data. */
     readonly v1PropertyKey: {
       /** @description name is the name of the property. */
       readonly name?: string;
@@ -650,6 +689,7 @@ export interface components {
       /** Proposal configuration and the actual change that is meant to be executed when proposal is enacted */
       readonly terms?: components['schemas']['vegaProposalTerms'];
     };
+    /** A transaction for a validator to suggest a protocol upgrade */
     readonly v1ProtocolUpgradeProposal: {
       /**
        * The block height at which to perform the upgrade
@@ -708,6 +748,7 @@ export interface components {
        */
       readonly pubKey?: components['schemas']['v1PubKey'];
     };
+    /** A transaction for a validator to submit a floating point value */
     readonly v1StateVariableProposal: {
       /** The state value proposal details */
       readonly proposal?: components['schemas']['vegaStateValueProposal'];
@@ -969,7 +1010,7 @@ export interface components {
       readonly sourceEthereumAddress?: string;
       /** The Vega network internal identifier of the asset */
       readonly vegaAssetId?: string;
-      /** The updated withdraw threshold */
+      /** The updated withdrawal threshold */
       readonly withdrawThreshold?: string;
     };
     /** An asset allow-listing for an ERC20 token */
@@ -1064,7 +1105,7 @@ export interface components {
       /** The ethereum address of the old signer */
       readonly oldSigner?: string;
     };
-    /** The threshold have been updated on the multisigcontrol */
+    /** The threshold has been updated on the multisig control */
     readonly vegaERC20ThresholdSet: {
       /**
        * Format: int64
@@ -1078,13 +1119,13 @@ export interface components {
        * Format: int64
        */
       readonly newThreshold?: number;
-      /** The nonce create by the vega network */
+      /** The nonce created by the Vega network */
       readonly nonce?: string;
     };
     readonly vegaERC20Update: {
       /**
        * The lifetime limits deposit per address.
-       * This is will be interpreted against the asset decimals.
+       * This will be interpreted against the asset decimals.
        * note: this is a temporary measure that can be changed by governance
        */
       readonly lifetimeLimit?: string;
@@ -1237,7 +1278,7 @@ export interface components {
        * price levels over which automated liquidity provision orders will be deployed
        */
       readonly lpPriceRange?: string;
-      /** Optional new market meta data, tags */
+      /** Optional new market metadata, tags */
       readonly metadata?: readonly string[];
       /**
        * Decimal places for order sizes, sets what size the smallest order / position on the market can be

apps/liquidity-provision-dashboard/src/app/components/dashboard/dashboard.tsx

@@ -8,7 +8,7 @@ export function Dashboard() {
     <>
       <div className="px-16 pt-20 pb-12 bg-greys-light-100">
         <div className="max-w-screen-xl mx-auto">
-          <h1 className="font-alpha uppercase text-5xl mb-8">
+          <h1 className="font-alpha calt uppercase text-5xl mb-8">
             {t('Top liquidity opportunities')}
           </h1>
 

apps/liquidity-provision-dashboard/src/app/components/dashboard/intro/intro.tsx

@@ -30,7 +30,7 @@ type Network = 'testnet' | 'mainnet';
 export const Intro = ({ network = 'testnet' }: { network?: Network }) => {
   return (
     <div>
-      <p className="font-alpha text-2xl font-medium mb-2">
+      <p className="font-alpha calt text-2xl font-medium mb-2">
         {t(
           'Become a liquidity provider and earn a cut of the fees paid during trading.'
         )}

apps/liquidity-provision-dashboard/src/app/components/detail/detail.tsx

@@ -92,7 +92,7 @@ export const Detail = () => {
             )}
           </div>
           <div>
-            <h2 className="font-alpha text-2xl mb-4">
+            <h2 className="font-alpha calt text-2xl mb-4">
               {t('Current Liquidity Provision')}
             </h2>
             <LPProvidersGrid

apps/liquidity-provision-dashboard/src/app/components/detail/header/header.tsx

@@ -14,13 +14,13 @@ export const Header = ({
       <div className="mb-6">
         <Link to="/">
           <Icon name="chevron-left" className="mr-2" />
-          <span className="underline font-alpha text-lg font-medium">
+          <span className="underline font-alpha calt text-lg font-medium">
             {t('Liquidity opportunities')}
           </span>
         </Link>
       </div>
-      <h1 className="font-alpha text-5xl mb-6">{name}</h1>
-      <p className="font-alpha text-4xl">{symbol}</p>
+      <h1 className="font-alpha calt text-5xl mb-6">{name}</h1>
+      <p className="font-alpha calt text-4xl">{symbol}</p>
     </div>
   );
 };

apps/liquidity-provision-dashboard/src/app/components/detail/market/market.tsx

@@ -44,7 +44,7 @@ export const Market = ({
         <table className="w-full">
           <thead>
             <tr
-              className="text-sm text-greys-light-400 text-left font-alpha"
+              className="text-sm text-greys-light-400 text-left font-alpha calt"
               style={{ fontFeatureSettings: "'liga' off, 'calt' off" }}
             >
               <th className="font-medium px-4">{t('Volume (24h)')}</th>

apps/liquidity-provision-dashboard/src/app/components/grid/grid.tsx

@@ -36,7 +36,7 @@ export const Grid = ({ isRowClickable, children, ...props }: Props) => {
 
   return (
     <AgGridReact
-      className={classNames('ag-theme-alpine h-full font-alpha', {
+      className={classNames('ag-theme-alpine h-full font-alpha calt', {
         'row-hover': isRowClickable,
       })}
       rowHeight={92}

apps/liquidity-provision-dashboard/src/app/components/health-bar/health-bar.tsx

@@ -13,7 +13,7 @@ const Remainder = () => (
 );
 
 const COPY_CLASS =
-  'text-sm font-medium whitespace-nowrap text-white font-alpha';
+  'text-sm font-medium whitespace-nowrap text-white font-alpha calt';
 
 const Tooltip = ({
   children,

apps/liquidity-provision-dashboard/src/app/components/health-dialog/health-dialog.tsx

@@ -59,10 +59,10 @@ const ROWS = [
 export const HealthDialog = ({ onChange, isOpen }: HealthDialogProps) => {
   return (
     <Dialog size="medium" open={isOpen} onChange={onChange}>
-      <h1 className="text-2xl mb-5 pr-2 font-medium font-alpha uppercase liga-0-calt-0">
+      <h1 className="text-2xl mb-5 pr-2 font-medium font-alpha uppercase">
         {t('Health')}
       </h1>
-      <p className="text-lg font-medium font-alpha mb-8 liga-0-calt-0">
+      <p className="text-lg font-medium font-alpha mb-8">
         {t(
           'Market health is a representation of market and liquidity status and how close that market is to moving from one fee level to another.'
         )}
@@ -70,10 +70,10 @@ export const HealthDialog = ({ onChange, isOpen }: HealthDialogProps) => {
 
       <table className="table-fixed">
         <thead className="border-b border-greys-light-300">
-          <th className="w-1/2 text-left font-medium font-alpha text-base pb-4 uppercase liga-0-calt-0">
+          <th className="w-1/2 text-left font-medium font-alpha text-base pb-4 uppercase">
             {t('Market status')}
           </th>
-          <th className="w-1/2 text-lef font-medium font-alpha text-base pb-4 uppercase liga-0-calt-0">
+          <th className="w-1/2 text-lef font-medium font-alpha text-base pb-4 uppercase">
             {t('Liquidity status')}
           </th>
         </thead>
@@ -85,12 +85,10 @@ export const HealthDialog = ({ onChange, isOpen }: HealthDialogProps) => {
                 <td
                   className={classNames('pr-4 pb-10', { 'pt-8': isFirstRow })}
                 >
-                  <h2 className="font-medium font-alpha uppercase text-base liga-0-calt-0">
+                  <h2 className="font-medium font-alpha uppercase text-base">
                     {t(r.title)}
                   </h2>
-                  <p className="font-medium font-alpha text-lg liga-0-calt-0">
-                    {t(r.copy)}
-                  </p>
+                  <p className="font-medium font-alpha text-lg">{t(r.copy)}</p>
                 </td>
                 <td
                   className={classNames('pl-4 pb-10', { 'pt-8': isFirstRow })}

apps/static/src/assets/devnet-tranches.json

@@ -1 +0,0 @@
-[]

apps/static/src/assets/mirror-tranches.json

@@ -1 +0,0 @@
-[]

apps/static/src/assets/sandbox-tranches.json

@@ -1 +0,0 @@
-[]

apps/static/src/assets/stagnet1-tranches.json

@@ -1 +0,0 @@
-[]

apps/static/src/assets/stagnet3-tranches.json

@@ -1 +0,0 @@
-[]

apps/static/src/assets/testnet-tranches.json

@@ -1 +0,0 @@
-[]

apps/token-e2e/.env

@@ -12,6 +12,7 @@ NX_ETH_WALLET_MNEMONIC=ozone access unlock valid olympic save include omit suppl
 NX_LOCAL_PROVIDER_URL=http://localhost:8545/
 NX_VEGA_WALLET_URL=http://localhost:1789
 NX_VEGA_DOCS_URL=https://docs.vega.xyz/mainnet
+NX_TRANCHES_SERVICE_URL=https://tranches-stagnet3-k8s.ops.vega.xyz
 
 #Test configuration variables
 CYPRESS_FAIRGROUND=false

apps/token-e2e/src/integration/flow/governance-flow.cy.js

@@ -1,849 +0,0 @@
-/// <reference types="cypress" />
-
-const vegaWalletUnstakedBalance =
-  '[data-testid="vega-wallet-balance-unstaked"]';
-const vegaWalletStakedBalances =
-  '[data-testid="vega-wallet-balance-staked-validators"]';
-const vegaWalletAssociatedBalance = '[data-testid="currency-value"]';
-const vegaWalletNameElement = '[data-testid="wallet-name"]';
-const vegaWallet = '[data-testid="vega-wallet"]';
-const connectToVegaWalletButton = '[data-testid="connect-to-vega-wallet-btn"]';
-const newProposalSubmitButton = '[data-testid="proposal-submit"]';
-const dialogCloseButton = '[data-testid="dialog-close"]';
-const viewProposalButton = '[data-testid="view-proposal-btn"]';
-const openProposals = '[data-testid="open-proposals"]';
-const proposalVoteProgressForPercentage =
-  '[data-testid="vote-progress-indicator-percentage-for"]';
-const proposalVoteProgressAgainstPercentage =
-  '[data-testid="vote-progress-indicator-percentage-against"]';
-const proposalVoteProgressForTokens =
-  '[data-testid="vote-progress-indicator-tokens-for"]';
-const proposalVoteProgressAgainstTokens =
-  '[data-testid="vote-progress-indicator-tokens-against"]';
-const changeVoteButton = '[data-testid="change-vote-button"]';
-const proposalDetailsTitle = '[data-testid="proposal-title"]';
-const proposalDetailsDescription = '[data-testid="proposal-description"]';
-const rawProposalData = '[data-testid="proposal-data"]';
-const minVoteButton = '[data-testid="min-vote"]';
-const maxVoteButton = '[data-testid="max-vote"]';
-const voteButtons = '[data-testid="vote-buttons"]';
-const votingDate = '[data-testid="voting-date"]';
-const voteTwoMinExtraNote = '[data-testid="voting-2-mins-extra"]';
-const voteStatus = '[data-testid="vote-status"]';
-const rejectProposalsLink = '[href="/proposals/rejected"]';
-const feedbackError = '[data-testid="Error"]';
-const noOpenProposals = '[data-testid="no-open-proposals"]';
-const noClosedProposals = '[data-testid="no-closed-proposals"]';
-const txTimeout = Cypress.env('txTimeout');
-const epochTimeout = Cypress.env('epochTimeout');
-const proposalTimeout = { timeout: 14000 };
-
-const minCloseDays = 2;
-const maxCloseDays = 3;
-const requiredParticipation = 0.001;
-
-const governanceProposalType = {
-  NETWORK_PARAMETER: 'Network parameter',
-  NEW_MARKET: 'New market',
-  UPDATE_MARKET: 'Update market',
-  NEW_ASSET: 'New asset',
-  FREEFORM: 'Freeform',
-  RAW: 'raw proposal',
-};
-
-context(
-  'Governance flow - with eth and vega wallets connected',
-  { tags: '@slow' },
-  function () {
-    before('connect wallets and set approval limit', function () {
-      cy.visit('/');
-      cy.get_network_parameters().then((network_parameters) => {
-        cy.wrap(
-          network_parameters['spam.protection.proposal.min.tokens'] /
-            1000000000000000000
-        ).as('minProposerBalance');
-        cy.wrap(
-          network_parameters['spam.protection.voting.min.tokens'] /
-            1000000000000000000
-        ).as('minVoterBalance');
-        cy.wrap(
-          network_parameters['governance.proposal.freeform.requiredMajority'] *
-            100
-        ).as('requiredMajority');
-        cy.wrap(
-          network_parameters['governance.proposal.freeform.minClose'].split(
-            'h'
-          )[0]
-        ).as('minCloseHours');
-        cy.wrap(
-          network_parameters['governance.proposal.freeform.maxClose'].split(
-            'h'
-          )[0]
-        ).as('maxCloseHours');
-      });
-      cy.vega_wallet_set_specified_approval_amount('1000');
-    });
-
-    describe('Eth wallet - contains VEGA tokens', function () {
-      before(
-        'checking network parameters (therefore environment) is fit for test',
-        function () {
-          assert.isAtLeast(
-            parseInt(this.minProposerBalance),
-            0.00001,
-            'Asserting that value is at least 0.00001 for network parameter minProposerBalance'
-          );
-          assert.isAtLeast(
-            parseInt(this.minVoterBalance),
-            0.00001,
-            'Asserting that value is at least 0.00001 for network parameter minVoterBalance'
-          );
-          // workaround for first eth tx hanging
-          associateTokenStartOfTests();
-        }
-      );
-
-      beforeEach('visit governance tab', function () {
-        cy.reload();
-        cy.wait_for_spinner();
-        cy.connectVegaWallet();
-        cy.ethereum_wallet_connect();
-        cy.navigate_to('proposals');
-      });
-
-      it('Should be able to see that no proposals exist', function () {
-        // 3001-VOTE-003
-        cy.get(noOpenProposals)
-          .should('be.visible')
-          .and('have.text', 'There are no open or yet to enact proposals');
-        cy.get(noClosedProposals)
-          .should('be.visible')
-          .and('have.text', 'There are no enacted or rejected proposals');
-      });
-
-      // 3002-PROP-002
-      // 3002-PROP-003
-      it('Submit a proposal form - shows how many vega tokens are required to make a proposal', function () {
-        // 3002-PROP-005
-        cy.go_to_make_new_proposal(governanceProposalType.NEW_MARKET);
-        cy.contains(
-          `You must have at least ${this.minProposerBalance} VEGA associated to make a proposal`
-        ).should('be.visible');
-      });
-
-      // 3002-PROP-011
-      it('Able to submit a valid freeform proposal - with minimum required tokens associated', function () {
-        cy.ensure_specified_unstaked_tokens_are_associated(
-          this.minProposerBalance
-        );
-        cy.go_to_make_new_proposal(governanceProposalType.FREEFORM);
-        cy.get(minVoteButton).should('be.visible'); // 3002-PROP-008
-        cy.get(maxVoteButton).should('be.visible');
-        cy.get(votingDate).should('not.be.empty');
-        cy.get(voteTwoMinExtraNote).should(
-          'contain.text',
-          'we add 2 minutes of extra time'
-        );
-        cy.enter_unique_freeform_proposal_body('50', generateProposalTitle());
-        cy.get(newProposalSubmitButton).should('be.visible').click();
-        // 3002-PROP-012
-        // 3002-PROP-016
-        cy.wait_for_proposal_submitted();
-      });
-
-      it('Newly created proposals list - proposals closest to closing date appear higher in list', function () {
-        // 3001-VOTE-005
-        cy.ensure_specified_unstaked_tokens_are_associated(
-          this.minProposerBalance
-        );
-        let proposalDays = [
-          minCloseDays + 1,
-          maxCloseDays,
-          minCloseDays + 3,
-          minCloseDays + 2,
-        ];
-        for (var index = 0; index < proposalDays.length; index++) {
-          cy.go_to_make_new_proposal(governanceProposalType.RAW);
-          cy.create_ten_digit_unix_timestamp_for_specified_days(
-            proposalDays[index]
-          ).then((closingDateTimestamp) => {
-            cy.enter_raw_proposal_body(closingDateTimestamp);
-          });
-          cy.get(newProposalSubmitButton).should('be.visible').click();
-          cy.contains('Awaiting network confirmation', epochTimeout).should(
-            'be.visible'
-          );
-          cy.contains('Proposal submitted', proposalTimeout).should(
-            'be.visible'
-          );
-          cy.get(dialogCloseButton).click();
-          cy.wait_for_proposal_sync();
-        }
-
-        let arrayOfProposals = [];
-
-        cy.navigate_to('proposals');
-        cy.get(proposalDetailsTitle)
-          .each((proposalTitleElement) => {
-            arrayOfProposals.push(proposalTitleElement.text());
-          })
-          .then(() => {
-            cy.get_sort_order_of_supplied_array(arrayOfProposals).should(
-              'equal',
-              'descending'
-            );
-          });
-      });
-
-      it('Able to submit a valid freeform proposal - with minimum required tokens associated - but also staked', function () {
-        cy.ensure_specified_unstaked_tokens_are_associated('2');
-        cy.navigate_to_page_if_not_already_loaded('proposals');
-        cy.get(vegaWalletUnstakedBalance, txTimeout).should('contain', '2');
-        cy.navigate_to('validators');
-        cy.click_on_validator_from_list(0);
-        cy.staking_validator_page_add_stake('2');
-        cy.close_staking_dialog();
-
-        cy.get(vegaWalletStakedBalances, txTimeout).should('contain', '2');
-
-        cy.navigate_to('proposals');
-        cy.go_to_make_new_proposal(governanceProposalType.FREEFORM);
-        cy.enter_unique_freeform_proposal_body('50', generateProposalTitle());
-        cy.get(newProposalSubmitButton).should('be.visible').click();
-        cy.wait_for_proposal_submitted();
-      });
-
-      it('Newly created proposals list - able to filter by proposerID to show it in list', function () {
-        const proposerId = Cypress.env('vegaWalletPublicKey');
-        const proposalTitle = generateProposalTitle();
-
-        createFreeformProposal(this.minProposerBalance, proposalTitle);
-        cy.get_proposal_id_from_list(proposalTitle);
-        cy.get('@proposalIdText').then((proposalId) => {
-          cy.get('[data-testid="set-proposals-filter-visible"]').click();
-          cy.get('[data-testid="filter-input"]').type(proposerId);
-          cy.get(`#${proposalId}`).should('contain', proposalId);
-        });
-      });
-
-      it('Newly created proposals list - shows title and portion of summary', function () {
-        createRawProposal(this.minProposerBalance); // 3001-VOTE-052
-        cy.get('@rawProposal').then((rawProposal) => {
-          cy.get_proposal_id_from_list(rawProposal.rationale.title);
-          cy.get('@proposalIdText').then((proposalId) => {
-            cy.get(openProposals).within(() => {
-              // 3001-VOTE-008
-              // 3001-VOTE-034
-              cy.get(`#${proposalId}`)
-                // 3001-VOTE-097
-                .should('contain', rawProposal.rationale.title)
-                .and('be.visible');
-              cy.get(`#${proposalId}`)
-                .should(
-                  'contain',
-                  rawProposal.rationale.description.substring(0, 59)
-                )
-                .and('be.visible');
-            });
-          });
-        });
-      });
-
-      it('Newly created proposals list - shows open proposals in an open state', function () {
-        // 3001-VOTE-004
-        // 3001-VOTE-035
-        createRawProposal(this.minProposerBalance);
-        cy.get('@rawProposal').then((rawProposal) => {
-          cy.get_submitted_proposal_from_proposal_list(
-            rawProposal.rationale.title
-          ).within(() => {
-            cy.get(viewProposalButton).should('be.visible').click();
-          });
-          cy.get('@proposalIdText').then((proposalId) => {
-            cy.get_proposal_information_from_table('ID')
-              .contains(proposalId)
-              .and('be.visible');
-          });
-          cy.get_proposal_information_from_table('State')
-            .contains('Open')
-            .and('be.visible');
-          cy.get_proposal_information_from_table('Type')
-            .contains('Freeform')
-            .and('be.visible');
-        });
-      });
-
-      // 3001-VOTE-071
-      it('Newly created freeform proposals list - shows proposal participation - both met and not', function () {
-        const proposalTitle = generateProposalTitle();
-        createFreeformProposal(this.minProposerBalance, proposalTitle);
-
-        cy.get_submitted_proposal_from_proposal_list(proposalTitle)
-          .as('submittedProposal')
-          .within(() => {
-            // 3001-VOTE-039
-            cy.get(voteStatus).should('have.text', 'Participation not reached');
-            cy.get(viewProposalButton).click();
-          });
-        cy.vote_for_proposal('for');
-        cy.get_proposal_information_from_table('Total Supply')
-          .invoke('text')
-          .then((totalSupply) => {
-            let tokensRequiredToAchieveResult = parseFloat(
-              (totalSupply.replace(/,/g, '') * requiredParticipation) / 100
-            ).toFixed(2);
-            cy.ensure_specified_unstaked_tokens_are_associated(
-              tokensRequiredToAchieveResult
-            );
-            cy.navigate_to_page_if_not_already_loaded('proposals');
-            cy.get('@submittedProposal').within(() =>
-              cy.get(viewProposalButton).click()
-            );
-            cy.get_proposal_information_from_table('Token participation met')
-              .contains('👍')
-              .should('be.visible');
-            cy.navigate_to('proposals');
-            cy.get('@submittedProposal').within(() =>
-              cy.get(voteStatus).should('have.text', 'Set to pass')
-            );
-          });
-      });
-
-      // 3001-VOTE-055
-      it('Newly created raw proposal details - shows proposal title and full description', function () {
-        createRawProposal(this.minProposerBalance);
-        cy.get('@rawProposal').then((rawProposal) => {
-          cy.get_proposal_id_from_list(rawProposal.rationale.title);
-          cy.get('@proposalIdText').then((proposalId) => {
-            cy.get(openProposals).within(() => {
-              cy.get(`#${proposalId}`).within(() => {
-                cy.get(viewProposalButton).should('be.visible').click();
-              });
-            });
-          });
-          cy.get(proposalDetailsTitle)
-            .should('contain', rawProposal.rationale.title)
-            .and('be.visible');
-          cy.get(proposalDetailsDescription)
-            .should('contain', rawProposal.rationale.description)
-            .and('be.visible');
-        });
-        // 3001-VOTE-052
-        cy.get('code.language-json')
-          .should('exist')
-          .within(() => {
-            cy.get('.hljs-string').eq(0).should('have.text', '"ProposalTerms"');
-          });
-      });
-
-      // 3001-VOTE-043
-      it('Newly created freeform proposal details - shows proposed and closing dates', function () {
-        const closingVoteHrs = '72';
-        const proposalTitle = generateProposalTitle();
-        cy.ensure_specified_unstaked_tokens_are_associated(
-          this.minProposerBalance
-        );
-        cy.go_to_make_new_proposal(governanceProposalType.FREEFORM);
-        cy.create_ten_digit_unix_timestamp_for_specified_days('3').then(
-          (closingDateTimestamp) => {
-            cy.enter_unique_freeform_proposal_body(
-              closingVoteHrs,
-              proposalTitle
-            );
-            cy.get(newProposalSubmitButton).should('be.visible').click();
-
-            cy.wait_for_proposal_submitted();
-            cy.wait_for_proposal_sync();
-            cy.navigate_to('proposals');
-            cy.get_submitted_proposal_from_proposal_list(proposalTitle).within(
-              () => cy.get(viewProposalButton).click()
-            );
-            cy.convert_unix_timestamp_to_governance_data_table_date_format(
-              closingDateTimestamp
-            ).then((closingDate) => {
-              cy.get_proposal_information_from_table('Closes on')
-                .contains(closingDate)
-                .should('be.visible');
-            });
-          }
-        );
-        cy.get_governance_proposal_date_format_for_specified_days('0').then(
-          (proposalDate) => {
-            cy.get_proposal_information_from_table('Proposed on')
-              .contains(proposalDate)
-              .should('be.visible');
-          }
-        );
-      });
-
-      it('Newly created proposal details - shows default status set to fail', function () {
-        // 3001-VOTE-037
-        // 3001-VOTE-040
-        // 3001-VOTE-067
-        createRawProposal(this.minProposerBalance);
-        cy.get('@rawProposal').then((rawProposal) => {
-          cy.get_submitted_proposal_from_proposal_list(
-            rawProposal.rationale.title
-          ).within(() => cy.get(viewProposalButton).click());
-        });
-        cy.contains('Participation: Not Met 0.00 0.00%(0.00% Required)').should(
-          'be.visible'
-        );
-        cy.get_proposal_information_from_table('Expected to pass')
-          .contains('👎')
-          .should('be.visible');
-        // 3001-VOTE-062
-        // 3001-VOTE-040
-        // 3001-VOTE-070
-        cy.get_proposal_information_from_table('Token majority met')
-          .contains('👎')
-          .should('be.visible');
-        // 3001-VOTE-068
-        cy.get_proposal_information_from_table('Token participation met')
-          .contains('👎')
-          .should('be.visible');
-      });
-
-      // 3001-VOTE-080 3001-VOTE-090 3001-VOTE-069 3001-VOTE-072 3001-VOTE-073
-      it('Newly created proposal details - ability to vote for and against proposal - with minimum required tokens associated', function () {
-        createRawProposal(this.minProposerBalance);
-        cy.get('@rawProposal').then((rawProposal) => {
-          cy.get_submitted_proposal_from_proposal_list(
-            rawProposal.rationale.title
-          ).within(() => cy.get(viewProposalButton).click());
-        });
-        // 3001-VOTE-080
-        cy.get(voteButtons).contains('against').should('be.visible');
-        cy.get(voteButtons).contains('for').should('be.visible');
-        cy.vote_for_proposal('for');
-        cy.get_governance_proposal_date_format_for_specified_days(
-          '0',
-          'shortMonth'
-        ).then((votedDate) => {
-          // 3001-VOTE-051
-          // 3001-VOTE-093
-          cy.contains('You voted:')
-            .siblings()
-            .contains('For')
-            .siblings()
-            .contains(votedDate)
-            .should('be.visible');
-        });
-        cy.get(proposalVoteProgressForPercentage) // 3001-VOTE-072
-          .contains('100.00%')
-          .and('be.visible');
-        cy.get(proposalVoteProgressAgainstPercentage)
-          .contains('0.00%')
-          .and('be.visible');
-        cy.get(proposalVoteProgressForTokens)
-          .contains('1.00')
-          .and('be.visible');
-        cy.get(proposalVoteProgressAgainstTokens)
-          .contains('0.00')
-          .and('be.visible');
-        cy.get_proposal_information_from_table('Tokens for proposal')
-          .should('have.text', parseFloat(this.minProposerBalance).toFixed(2))
-          .and('be.visible');
-        cy.get_proposal_information_from_table('Tokens against proposal')
-          .should('have.text', '0.00')
-          .and('be.visible');
-        // 3001-VOTE-061
-        cy.get_proposal_information_from_table('Participation required')
-          .contains(`${requiredParticipation}%`)
-          .should('be.visible');
-        // 3001-VOTE-066
-        cy.get_proposal_information_from_table('Majority Required') // 3001-VOTE-073
-          .contains(`${parseFloat(this.requiredMajority).toFixed(2)}%`)
-          .should('be.visible');
-        cy.get_proposal_information_from_table('Number of voting parties')
-          .should('have.text', '1')
-          .and('be.visible');
-        cy.get(changeVoteButton).should('be.visible').click();
-        cy.vote_for_proposal('for');
-        // 3001-VOTE-064
-        cy.get_proposal_information_from_table('Tokens for proposal')
-          .should('have.text', parseFloat(this.minProposerBalance).toFixed(2))
-          .and('be.visible');
-        cy.get(changeVoteButton).should('be.visible').click();
-        cy.vote_for_proposal('against');
-        cy.get(proposalVoteProgressAgainstPercentage)
-          .contains('100.00%')
-          .and('be.visible');
-        cy.get_proposal_information_from_table('Tokens against proposal')
-          .should('have.text', parseFloat(this.minProposerBalance).toFixed(2))
-          .and('be.visible');
-        cy.get_proposal_information_from_table('Number of voting parties')
-          .should('have.text', '1')
-          .and('be.visible');
-      });
-
-      // 3001-VOTE-042, 3001-VOTE-057, 3001-VOTE-058, 3001-VOTE-059, 3001-VOTE-060
-      it('Newly created proposal details - ability to increase associated tokens - by voting again after association', function () {
-        createRawProposal(this.minProposerBalance);
-        cy.get('@rawProposal').then((rawProposal) => {
-          cy.get_submitted_proposal_from_proposal_list(
-            rawProposal.rationale.title
-          )
-            .as('submittedProposal')
-            .within(() => cy.get(viewProposalButton).click());
-        });
-        cy.vote_for_proposal('for');
-        // 3001-VOTE-079
-        cy.contains('You voted: For').should('be.visible');
-        cy.get(proposalVoteProgressForTokens).contains('1').and('be.visible');
-        cy.get_proposal_information_from_table('Total Supply')
-          .invoke('text')
-          .then((totalSupply) => {
-            let tokensRequiredToAchieveResult = parseFloat(
-              (totalSupply.replace(/,/g, '') * requiredParticipation) / 100
-            ).toFixed(2);
-            cy.ensure_specified_unstaked_tokens_are_associated(
-              tokensRequiredToAchieveResult
-            );
-            cy.navigate_to_page_if_not_already_loaded('proposals');
-            cy.get('@submittedProposal').within(() =>
-              cy.get(viewProposalButton).click()
-            );
-            cy.get(proposalVoteProgressForPercentage)
-              .contains('100.00%')
-              .and('be.visible');
-            cy.get(proposalVoteProgressAgainstPercentage)
-              .contains('0.00%')
-              .and('be.visible');
-            // 3001-VOTE-065
-            cy.get(changeVoteButton).should('be.visible').click();
-            cy.vote_for_proposal('for');
-            cy.get(proposalVoteProgressForTokens)
-              .contains(tokensRequiredToAchieveResult)
-              .and('be.visible');
-            cy.get(proposalVoteProgressAgainstTokens)
-              .contains('0.00')
-              .and('be.visible');
-            cy.get_proposal_information_from_table(
-              'Total tokens voted percentage'
-            )
-              .should('have.text', '0.00%')
-              .and('be.visible');
-            cy.get_proposal_information_from_table('Tokens for proposal')
-              .should('have.text', tokensRequiredToAchieveResult)
-              .and('be.visible');
-            cy.get_proposal_information_from_table('Tokens against proposal')
-              .should('have.text', '0.00')
-              .and('be.visible');
-            cy.get_proposal_information_from_table('Number of voting parties')
-              .should('have.text', '1')
-              .and('be.visible');
-            cy.get_proposal_information_from_table('Expected to pass')
-              .contains('👍')
-              .should('be.visible');
-            // 3001-VOTE-062
-            cy.get_proposal_information_from_table('Token majority met')
-              .contains('👍')
-              .should('be.visible');
-            cy.get_proposal_information_from_table('Token participation met')
-              .contains('👍')
-              .should('be.visible');
-            cy.get_proposal_information_from_table('Tokens for proposal')
-              .contains(tokensRequiredToAchieveResult)
-              .and('be.visible');
-          });
-      });
-
-      it('Creating a proposal - proposal rejected - when closing time sooner than system default', function () {
-        cy.ensure_specified_unstaked_tokens_are_associated(
-          this.minProposerBalance
-        );
-        cy.go_to_make_new_proposal(governanceProposalType.FREEFORM);
-        cy.enter_unique_freeform_proposal_body('40', generateProposalTitle());
-        cy.get(newProposalSubmitButton).should('be.visible').click();
-        cy.contains('Awaiting network confirmation', epochTimeout).should(
-          'not.exist'
-        );
-      });
-
-      it('Creating a proposal - proposal rejected - when closing time later than system default', function () {
-        cy.ensure_specified_unstaked_tokens_are_associated(
-          this.minProposerBalance
-        );
-        cy.go_to_make_new_proposal(governanceProposalType.FREEFORM);
-        cy.enter_unique_freeform_proposal_body(
-          '100000',
-          generateProposalTitle()
-        );
-        cy.get(newProposalSubmitButton).should('be.visible').click();
-        cy.contains('Awaiting network confirmation', epochTimeout).should(
-          'not.exist'
-        );
-      });
-
-      // 3001-VOTE-006
-      it('Creating a proposal - proposal rejected - able to access rejected proposals', function () {
-        cy.ensure_specified_unstaked_tokens_are_associated(
-          this.minProposerBalance
-        );
-        cy.go_to_make_new_proposal(governanceProposalType.RAW);
-        cy.create_ten_digit_unix_timestamp_for_specified_days('1000').then(
-          (closingDateTimestamp) => {
-            cy.enter_raw_proposal_body(closingDateTimestamp).as('rawProposal');
-          }
-        );
-        cy.get(newProposalSubmitButton).should('be.visible').click();
-        cy.contains('Awaiting network confirmation', epochTimeout).should(
-          'be.visible'
-        );
-        cy.contains('Proposal rejected', proposalTimeout).should('be.visible');
-        cy.get(dialogCloseButton).click();
-        cy.wait_for_proposal_sync();
-        cy.navigate_to('proposals');
-        cy.get(rejectProposalsLink).click();
-        cy.get('@rawProposal').then((rawProposal) => {
-          cy.get_submitted_proposal_from_proposal_list(
-            rawProposal.rationale.title
-          ).within(() => {
-            cy.contains('Rejected').should('be.visible');
-            cy.contains('Close time too late').should('be.visible');
-            cy.get(viewProposalButton).click();
-          });
-        });
-        cy.get_proposal_information_from_table('State')
-          .contains('Rejected')
-          .and('be.visible');
-        cy.get_proposal_information_from_table('Rejection reason')
-          .contains('PROPOSAL_ERROR_CLOSE_TIME_TOO_LATE')
-          .and('be.visible');
-        cy.get_proposal_information_from_table('Error details')
-          .contains('proposal closing time too late')
-          .and('be.visible');
-      });
-
-      // 0005-ETXN-004
-      it('Unable to create a proposal - when no tokens are associated', function () {
-        cy.vega_wallet_teardown();
-        cy.get(vegaWalletAssociatedBalance, txTimeout).contains(
-          '0.00',
-          txTimeout
-        );
-        cy.go_to_make_new_proposal(governanceProposalType.RAW);
-        cy.create_ten_digit_unix_timestamp_for_specified_days('8').then(
-          (closingDateTimestamp) => {
-            cy.enter_raw_proposal_body(closingDateTimestamp).as;
-          }
-        );
-        cy.get(newProposalSubmitButton).should('be.visible').click();
-        cy.contains('Transaction failed', proposalTimeout).should('be.visible');
-        cy.get(feedbackError).should(
-          'have.text',
-          'Network error: the network blocked the transaction through the spam protection'
-        );
-        cy.get(dialogCloseButton).click();
-      });
-
-      // 3002-PROP-009
-      it('Unable to create a proposal - when some but not enough tokens are associated', function () {
-        cy.ensure_specified_unstaked_tokens_are_associated(
-          this.minProposerBalance - 0.000001
-        );
-        cy.go_to_make_new_proposal(governanceProposalType.RAW);
-        cy.create_ten_digit_unix_timestamp_for_specified_days('8').then(
-          (closingDateTimestamp) => {
-            cy.enter_raw_proposal_body(closingDateTimestamp);
-          }
-        );
-        cy.get(newProposalSubmitButton).should('be.visible').click();
-        cy.contains('Transaction failed', proposalTimeout).should('be.visible');
-        cy.get(feedbackError).should(
-          'have.text',
-          'Network error: the network blocked the transaction through the spam protection'
-        );
-        cy.get(dialogCloseButton).click();
-      });
-
-      it('Unable to create a freeform proposal - when json parent section contains unexpected field', function () {
-        // 3001-VOTE-038 3002-PROP-013 3002-PROP-014
-        cy.ensure_specified_unstaked_tokens_are_associated(
-          this.minProposerBalance
-        );
-        cy.go_to_make_new_proposal(governanceProposalType.RAW);
-        cy.create_ten_digit_unix_timestamp_for_specified_days('8').then(
-          (closingDateTimestamp) => {
-            cy.fixture('/proposals/raw.json').then((freeformProposal) => {
-              freeformProposal.terms.closingTimestamp = closingDateTimestamp;
-              freeformProposal.unexpected = `i shouldn't be here`;
-              let proposalPayload = JSON.stringify(freeformProposal);
-              cy.get(rawProposalData).type(proposalPayload, {
-                parseSpecialCharSequences: false,
-                delay: 2,
-              });
-            });
-          }
-        );
-        cy.get(newProposalSubmitButton).should('be.visible').click();
-
-        cy.contains('Transaction failed', proposalTimeout).should('be.visible');
-        cy.get(feedbackError).should(
-          'have.text',
-          'Invalid params: the transaction is malformed'
-        );
-        cy.get(dialogCloseButton).click();
-        cy.get(rawProposalData)
-          .invoke('val')
-          .should('contain', "i shouldn't be here");
-      });
-
-      it('Unable to create a freeform proposal - when json terms section contains unexpected field', function () {
-        // 3001-VOTE-038
-        cy.ensure_specified_unstaked_tokens_are_associated(
-          this.minProposerBalance
-        );
-        cy.go_to_make_new_proposal(governanceProposalType.RAW);
-        cy.create_ten_digit_unix_timestamp_for_specified_days('8').then(
-          (closingDateTimestamp) => {
-            cy.fixture('/proposals/raw.json').then((rawProposal) => {
-              rawProposal.terms.closingTimestamp = closingDateTimestamp;
-              rawProposal.terms.unexpectedField = `i shouldn't be here`;
-              let proposalPayload = JSON.stringify(rawProposal);
-
-              cy.get(rawProposalData).type(proposalPayload, {
-                parseSpecialCharSequences: false,
-                delay: 2,
-              });
-            });
-          }
-        );
-        cy.get(newProposalSubmitButton).should('be.visible').click();
-
-        cy.contains('Transaction failed', proposalTimeout).should('be.visible');
-        cy.get(feedbackError).should(
-          'have.text',
-          'Invalid params: the transaction is malformed'
-        );
-        cy.get(dialogCloseButton).click();
-      });
-
-      // 1005-PROP-009
-      it.skip(
-        'Unable to vote on a freeform proposal - when some but not enough vega associated',
-        { tags: '@smoke' },
-        function () {
-          const proposalTitle = generateProposalTitle();
-
-          cy.vega_wallet_teardown();
-          cy.ensure_specified_unstaked_tokens_are_associated(
-            this.minProposerBalance
-          );
-          cy.go_to_make_new_proposal(governanceProposalType.FREEFORM);
-          cy.enter_unique_freeform_proposal_body('50', proposalTitle);
-          cy.get(newProposalSubmitButton).should('be.visible').click();
-          cy.wait_for_proposal_submitted();
-          cy.staking_page_disassociate_tokens('0.0001');
-          cy.get(vegaWallet).within(() => {
-            cy.get(vegaWalletAssociatedBalance, txTimeout).should(
-              'contain',
-              '0.9999'
-            );
-          });
-          cy.navigate_to('proposals');
-          cy.get_submitted_proposal_from_proposal_list(proposalTitle).within(
-            () => cy.get(viewProposalButton).click()
-          );
-          cy.contains('Vote breakdown').should('be.visible', {
-            timeout: 10000,
-          });
-          cy.get(voteButtons).should('not.exist');
-          cy.getByTestId('min-proposal-requirements').should(
-            'have.text',
-            `You must have at least ${this.minVoterBalance} VEGA associated to vote on this proposal`
-          );
-        }
-      );
-
-      it('Unable to vote on a proposal - when vega wallet disconnected - option to connect from within', function () {
-        createRawProposal(this.minProposerBalance);
-        cy.get('[data-testid="manage-vega-wallet"]').click();
-        cy.get('[data-testid="disconnect"]').click();
-        cy.get('@rawProposal').then((rawProposal) => {
-          cy.get_submitted_proposal_from_proposal_list(
-            rawProposal.rationale.title
-          ).within(() => cy.get(viewProposalButton).click());
-        });
-        // 3001-VOTE-075
-        // 3001-VOTE-076
-        cy.get(connectToVegaWalletButton)
-          .should('be.visible')
-          .and('have.text', 'Connect Vega wallet')
-          .click();
-        cy.getByTestId('connector-jsonRpc').click();
-        cy.get(vegaWalletNameElement).should('be.visible');
-        cy.get(connectToVegaWalletButton).should('not.exist');
-        // 3001-VOTE-100
-        cy.get(vegaWalletAssociatedBalance, txTimeout).contains(
-          '1.00',
-          txTimeout
-        );
-        cy.vote_for_proposal('against');
-        // 3001-VOTE-079
-        cy.contains('You voted: Against').should('be.visible');
-      });
-
-      function createRawProposal(proposerBalance) {
-        if (proposerBalance)
-          cy.ensure_specified_unstaked_tokens_are_associated(proposerBalance);
-        cy.go_to_make_new_proposal(governanceProposalType.RAW);
-        cy.create_ten_digit_unix_timestamp_for_specified_days('8').then(
-          (closingDateTimestamp) => {
-            cy.enter_raw_proposal_body(closingDateTimestamp).as('rawProposal');
-          }
-        );
-        cy.get(newProposalSubmitButton).should('be.visible').click();
-        cy.wait_for_proposal_submitted();
-        cy.wait_for_proposal_sync();
-        cy.navigate_to('proposals');
-      }
-
-      function createFreeformProposal(proposerBalance, proposalTitle) {
-        cy.ensure_specified_unstaked_tokens_are_associated(proposerBalance);
-        cy.go_to_make_new_proposal(governanceProposalType.FREEFORM);
-        cy.enter_unique_freeform_proposal_body('50', proposalTitle);
-        cy.get(newProposalSubmitButton).should('be.visible').click();
-        cy.wait_for_proposal_submitted();
-        cy.wait_for_proposal_sync();
-        cy.get(proposalDetailsTitle).invoke('text').as('proposalTitle');
-        cy.navigate_to('proposals');
-      }
-
-      function generateProposalTitle() {
-        const randomNum = Math.floor(Math.random() * 1000) + 1;
-        return randomNum + ': Freeform e2e proposal';
-      }
-
-      // This is a workaround function to begin tests with associating tokens without failing
-      // Should be removed when eth transaction bug is fixed
-      function associateTokenStartOfTests() {
-        cy.highlight(`Associating tokens for first time`);
-        cy.ethereum_wallet_connect();
-        cy.connectVegaWallet();
-        cy.get('[href="/token/associate"]').first().click();
-        cy.getByTestId('associate-radio-wallet', { timeout: 30000 }).click();
-        cy.getByTestId('token-amount-input', epochTimeout).type('1');
-        cy.getByTestId('token-input-submit-button', txTimeout)
-          .should('be.enabled')
-          .click();
-        cy.contains(
-          `Associating with Vega key. Waiting for ${Cypress.env(
-            'blockConfirmations'
-          )} more confirmations..`,
-          txTimeout
-        ).should('be.visible');
-        cy.getByTestId('associated-amount', txTimeout).should(
-          'contain.text',
-          '1'
-        );
-        // Wait is needed to allow time for transaction to complete
-        // eslint-disable-next-line cypress/no-unnecessary-waiting
-        cy.wait(10000);
-        cy.vega_wallet_teardown();
-        cy.clearLocalStorage();
-      }
-    });
-  }
-);

apps/token-e2e/src/integration/flow/proposal-details.cy.js

@@ -0,0 +1,273 @@
+import { associateTokenStartOfTests } from '../../support/common.functions';
+import {
+  createRawProposal,
+  generateFreeFormProposalTitle,
+  governanceProposalType,
+} from '../../support/governance.functions';
+
+const proposalVoteProgressForPercentage =
+  '[data-testid="vote-progress-indicator-percentage-for"]';
+const proposalVoteProgressAgainstPercentage =
+  '[data-testid="vote-progress-indicator-percentage-against"]';
+const proposalVoteProgressForTokens =
+  '[data-testid="vote-progress-indicator-tokens-for"]';
+const proposalVoteProgressAgainstTokens =
+  '[data-testid="vote-progress-indicator-tokens-against"]';
+const changeVoteButton = '[data-testid="change-vote-button"]';
+const proposalDetailsTitle = '[data-testid="proposal-title"]';
+const proposalDetailsDescription = '[data-testid="proposal-description"]';
+const openProposals = '[data-testid="open-proposals"]';
+const viewProposalButton = '[data-testid="view-proposal-btn"]';
+
+describe(
+  'Governance flow for proposal details',
+  { tags: '@slow' },
+  function () {
+    before('connect wallets and set approval limit', function () {
+      cy.visit('/');
+      cy.vega_wallet_set_specified_approval_amount('1000');
+      associateTokenStartOfTests();
+    });
+
+    beforeEach('visit proposals tab', function () {
+      cy.reload();
+      cy.wait_for_spinner();
+      cy.connectVegaWallet();
+      cy.ethereum_wallet_connect();
+      cy.ensure_specified_unstaked_tokens_are_associated(1);
+      cy.navigate_to_page_if_not_already_loaded('proposals');
+    });
+
+    // 3001-VOTE-055
+    it('Newly created raw proposal details - shows proposal title and full description', function () {
+      createRawProposal();
+      cy.get('@rawProposal').then((rawProposal) => {
+        cy.get_proposal_id_from_list(rawProposal.rationale.title);
+        cy.get('@proposalIdText').then((proposalId) => {
+          cy.get(openProposals).within(() => {
+            cy.get(`#${proposalId}`).within(() => {
+              cy.get(viewProposalButton).should('be.visible').click();
+            });
+          });
+        });
+        cy.get(proposalDetailsTitle)
+          .should('contain', rawProposal.rationale.title)
+          .and('be.visible');
+        cy.get(proposalDetailsDescription)
+          .should('contain', rawProposal.rationale.description)
+          .and('be.visible');
+      });
+      // 3001-VOTE-052
+      cy.get('code.language-json')
+        .should('exist')
+        .within(() => {
+          cy.get('.hljs-string').eq(0).should('have.text', '"ProposalTerms"');
+        });
+    });
+
+    // 3001-VOTE-043
+    it('Newly created freeform proposal details - shows proposed and closing dates', function () {
+      const closingVoteHrs = '72';
+      const proposalTitle = generateFreeFormProposalTitle();
+
+      cy.go_to_make_new_proposal(governanceProposalType.FREEFORM);
+      cy.create_ten_digit_unix_timestamp_for_specified_days('3').then(
+        (closingDateTimestamp) => {
+          cy.enter_unique_freeform_proposal_body(closingVoteHrs, proposalTitle);
+
+          cy.wait_for_proposal_submitted();
+          cy.wait_for_proposal_sync();
+          cy.navigate_to('proposals');
+          cy.get_submitted_proposal_from_proposal_list(proposalTitle).within(
+            () => cy.get(viewProposalButton).click()
+          );
+          cy.convert_unix_timestamp_to_governance_data_table_date_format(
+            closingDateTimestamp
+          ).then((closingDate) => {
+            cy.get_proposal_information_from_table('Closes on')
+              .contains(closingDate)
+              .should('be.visible');
+          });
+        }
+      );
+      cy.get_governance_proposal_date_format_for_specified_days('0').then(
+        (proposalDate) => {
+          cy.get_proposal_information_from_table('Proposed on')
+            .contains(proposalDate)
+            .should('be.visible');
+        }
+      );
+    });
+
+    it('Newly created proposal details - shows default status set to fail', function () {
+      // 3001-VOTE-037
+      // 3001-VOTE-040
+      // 3001-VOTE-067
+      createRawProposal();
+      cy.get('@rawProposal').then((rawProposal) => {
+        cy.get_submitted_proposal_from_proposal_list(
+          rawProposal.rationale.title
+        ).within(() => cy.get(viewProposalButton).click());
+      });
+      cy.contains('Participation: Not Met 0.00 0.00%(0.00% Required)').should(
+        'be.visible'
+      );
+      cy.get_proposal_information_from_table('Expected to pass')
+        .contains('👎')
+        .should('be.visible');
+      // 3001-VOTE-062
+      // 3001-VOTE-040
+      // 3001-VOTE-070
+      cy.get_proposal_information_from_table('Token majority met')
+        .contains('👎')
+        .should('be.visible');
+      // 3001-VOTE-068
+      cy.get_proposal_information_from_table('Token participation met')
+        .contains('👎')
+        .should('be.visible');
+    });
+
+    // 3001-VOTE-080 3001-VOTE-090 3001-VOTE-069 3001-VOTE-072 3001-VOTE-073
+    it('Newly created proposal details - ability to vote for and against proposal - with minimum required tokens associated', function () {
+      createRawProposal();
+      cy.get('@rawProposal').then((rawProposal) => {
+        cy.get_submitted_proposal_from_proposal_list(
+          rawProposal.rationale.title
+        ).within(() => cy.get(viewProposalButton).click());
+      });
+      // 3001-VOTE-080
+      cy.getByTestId('vote-buttons').contains('against').should('be.visible');
+      cy.getByTestId('vote-buttons').contains('for').should('be.visible');
+      cy.vote_for_proposal('for');
+      cy.get_governance_proposal_date_format_for_specified_days(
+        '0',
+        'shortMonth'
+      ).then((votedDate) => {
+        // 3001-VOTE-051
+        // 3001-VOTE-093
+        cy.contains('You voted:')
+          .siblings()
+          .contains('For')
+          .siblings()
+          .contains(votedDate)
+          .should('be.visible');
+      });
+      cy.get(proposalVoteProgressForPercentage) // 3001-VOTE-072
+        .contains('100.00%')
+        .and('be.visible');
+      cy.get(proposalVoteProgressAgainstPercentage)
+        .contains('0.00%')
+        .and('be.visible');
+      cy.get(proposalVoteProgressForTokens).contains('1.00').and('be.visible');
+      cy.get(proposalVoteProgressAgainstTokens)
+        .contains('0.00')
+        .and('be.visible');
+      cy.get_proposal_information_from_table('Tokens for proposal')
+        .should('have.text', parseFloat(1).toFixed(2))
+        .and('be.visible');
+      cy.get_proposal_information_from_table('Tokens against proposal')
+        .should('have.text', '0.00')
+        .and('be.visible');
+      // 3001-VOTE-061
+      cy.get_proposal_information_from_table('Participation required')
+        .contains(0.001)
+        .should('be.visible');
+      // 3001-VOTE-066
+      cy.get_proposal_information_from_table('Majority Required') // 3001-VOTE-073
+        .contains(`${parseFloat(100).toFixed(2)}%`)
+        .should('be.visible');
+      cy.get_proposal_information_from_table('Number of voting parties')
+        .should('have.text', '1')
+        .and('be.visible');
+      cy.get(changeVoteButton).should('be.visible').click();
+      cy.vote_for_proposal('for');
+      // 3001-VOTE-064
+      cy.get_proposal_information_from_table('Tokens for proposal')
+        .should('have.text', parseFloat(1).toFixed(2))
+        .and('be.visible');
+      cy.get(changeVoteButton).should('be.visible').click();
+      cy.vote_for_proposal('against');
+      cy.get(proposalVoteProgressAgainstPercentage)
+        .contains('100.00%')
+        .and('be.visible');
+      cy.get_proposal_information_from_table('Tokens against proposal')
+        .should('have.text', parseFloat(1).toFixed(2))
+        .and('be.visible');
+      cy.get_proposal_information_from_table('Number of voting parties')
+        .should('have.text', '1')
+        .and('be.visible');
+    });
+
+    // 3001-VOTE-042, 3001-VOTE-057, 3001-VOTE-058, 3001-VOTE-059, 3001-VOTE-060
+    it('Newly created proposal details - ability to increase associated tokens - by voting again after association', function () {
+      createRawProposal();
+      cy.get('@rawProposal').then((rawProposal) => {
+        cy.get_submitted_proposal_from_proposal_list(
+          rawProposal.rationale.title
+        )
+          .as('submittedProposal')
+          .within(() => cy.get(viewProposalButton).click());
+      });
+      cy.vote_for_proposal('for');
+      // 3001-VOTE-079
+      cy.contains('You voted: For').should('be.visible');
+      cy.get(proposalVoteProgressForTokens).contains('1').and('be.visible');
+      cy.get_proposal_information_from_table('Total Supply')
+        .invoke('text')
+        .then((totalSupply) => {
+          let tokensRequiredToAchieveResult = parseFloat(
+            (totalSupply.replace(/,/g, '') * 0.001) / 100
+          ).toFixed(2);
+          cy.ensure_specified_unstaked_tokens_are_associated(
+            tokensRequiredToAchieveResult
+          );
+          cy.navigate_to_page_if_not_already_loaded('proposals');
+          cy.get('@submittedProposal').within(() =>
+            cy.get(viewProposalButton).click()
+          );
+          cy.get(proposalVoteProgressForPercentage)
+            .contains('100.00%')
+            .and('be.visible');
+          cy.get(proposalVoteProgressAgainstPercentage)
+            .contains('0.00%')
+            .and('be.visible');
+          // 3001-VOTE-065
+          cy.get(changeVoteButton).should('be.visible').click();
+          cy.vote_for_proposal('for');
+          cy.get(proposalVoteProgressForTokens)
+            .contains(tokensRequiredToAchieveResult)
+            .and('be.visible');
+          cy.get(proposalVoteProgressAgainstTokens)
+            .contains('0.00')
+            .and('be.visible');
+          cy.get_proposal_information_from_table(
+            'Total tokens voted percentage'
+          )
+            .should('have.text', '0.00%')
+            .and('be.visible');
+          cy.get_proposal_information_from_table('Tokens for proposal')
+            .should('have.text', tokensRequiredToAchieveResult)
+            .and('be.visible');
+          cy.get_proposal_information_from_table('Tokens against proposal')
+            .should('have.text', '0.00')
+            .and('be.visible');
+          cy.get_proposal_information_from_table('Number of voting parties')
+            .should('have.text', '1')
+            .and('be.visible');
+          cy.get_proposal_information_from_table('Expected to pass')
+            .contains('👍')
+            .should('be.visible');
+          // 3001-VOTE-062
+          cy.get_proposal_information_from_table('Token majority met')
+            .contains('👍')
+            .should('be.visible');
+          cy.get_proposal_information_from_table('Token participation met')
+            .contains('👍')
+            .should('be.visible');
+          cy.get_proposal_information_from_table('Tokens for proposal')
+            .contains(tokensRequiredToAchieveResult)
+            .and('be.visible');
+        });
+    });
+  }
+);

apps/token-e2e/src/integration/flow/proposal-enacted.cy.js

@@ -1,4 +1,5 @@
 /// <reference types="cypress" />
+import { associateTokenStartOfTests } from '../../support/governance.functions';
 
 import {
   createUpdateNetworkProposalTxBody,
@@ -21,6 +22,7 @@ context(
     before('Connect wallets and set approval', function () {
       cy.visit('/');
       cy.vega_wallet_set_specified_approval_amount('1000');
+      associateTokenStartOfTests();
       cy.connectVegaWallet();
       cy.ethereum_wallet_connect();
       cy.ensure_specified_unstaked_tokens_are_associated(1);

apps/token-e2e/src/integration/flow/proposal-flow.cy.js

@@ -0,0 +1,347 @@
+/// <reference types="cypress" />
+import {
+  createRawProposal,
+  generateFreeFormProposalTitle,
+  governanceProposalType,
+} from '../../support/governance.functions';
+
+import { associateTokenStartOfTests } from '../../support/common.functions';
+
+const vegaWalletUnstakedBalance =
+  '[data-testid="vega-wallet-balance-unstaked"]';
+const vegaWalletStakedBalances =
+  '[data-testid="vega-wallet-balance-staked-validators"]';
+const vegaWalletAssociatedBalance = '[data-testid="currency-value"]';
+const vegaWalletNameElement = '[data-testid="wallet-name"]';
+const vegaWallet = '[data-testid="vega-wallet"]';
+const connectToVegaWalletButton = '[data-testid="connect-to-vega-wallet-btn"]';
+const newProposalSubmitButton = '[data-testid="proposal-submit"]';
+const dialogCloseButton = '[data-testid="dialog-close"]';
+const viewProposalButton = '[data-testid="view-proposal-btn"]';
+const rawProposalData = '[data-testid="proposal-data"]';
+const minVoteButton = '[data-testid="min-vote"]';
+const maxVoteButton = '[data-testid="max-vote"]';
+const voteButtons = '[data-testid="vote-buttons"]';
+const votingDate = '[data-testid="voting-date"]';
+const voteTwoMinExtraNote = '[data-testid="voting-2-mins-extra"]';
+const rejectProposalsLink = '[href="/proposals/rejected"]';
+const feedbackError = '[data-testid="Error"]';
+const noOpenProposals = '[data-testid="no-open-proposals"]';
+const noClosedProposals = '[data-testid="no-closed-proposals"]';
+const txTimeout = Cypress.env('txTimeout');
+const epochTimeout = Cypress.env('epochTimeout');
+const proposalTimeout = { timeout: 14000 };
+
+context(
+  'Governance flow - with eth and vega wallets connected',
+  { tags: '@slow' },
+  function () {
+    before('connect wallets and set approval limit', function () {
+      cy.visit('/');
+      cy.get_network_parameters().then((network_parameters) => {
+        cy.wrap(
+          network_parameters['spam.protection.proposal.min.tokens'] /
+            1000000000000000000
+        ).as('minProposerBalance');
+        cy.wrap(
+          network_parameters['spam.protection.voting.min.tokens'] /
+            1000000000000000000
+        ).as('minVoterBalance');
+        cy.wrap(
+          network_parameters['governance.proposal.freeform.requiredMajority'] *
+            100
+        ).as('requiredMajority');
+      });
+
+      cy.vega_wallet_set_specified_approval_amount('1000');
+      associateTokenStartOfTests();
+    });
+
+    beforeEach('visit governance tab', function () {
+      cy.reload();
+      cy.wait_for_spinner();
+      cy.connectVegaWallet();
+      cy.ethereum_wallet_connect();
+      cy.ensure_specified_unstaked_tokens_are_associated(1);
+      cy.navigate_to_page_if_not_already_loaded('proposals');
+    });
+
+    it('Should be able to see that no proposals exist', function () {
+      // 3001-VOTE-003
+      cy.get(noOpenProposals)
+        .should('be.visible')
+        .and('have.text', 'There are no open or yet to enact proposals');
+      cy.get(noClosedProposals)
+        .should('be.visible')
+        .and('have.text', 'There are no enacted or rejected proposals');
+    });
+
+    // 3002-PROP-002
+    // 3002-PROP-003
+    it('Submit a proposal form - shows how many vega tokens are required to make a proposal', function () {
+      // 3002-PROP-005
+      cy.go_to_make_new_proposal(governanceProposalType.NEW_MARKET);
+      cy.contains(
+        `You must have at least 1 VEGA associated to make a proposal`
+      ).should('be.visible');
+    });
+
+    // 3002-PROP-011
+    it('Able to submit a valid freeform proposal - with minimum required tokens associated', function () {
+      cy.go_to_make_new_proposal(governanceProposalType.FREEFORM);
+      cy.get(minVoteButton).should('be.visible'); // 3002-PROP-008
+      cy.get(maxVoteButton).should('be.visible');
+      cy.get(votingDate).should('not.be.empty');
+      cy.get(voteTwoMinExtraNote).should(
+        'contain.text',
+        'we add 2 minutes of extra time'
+      );
+      cy.enter_unique_freeform_proposal_body(
+        '50',
+        generateFreeFormProposalTitle()
+      );
+      // 3002-PROP-012
+      // 3002-PROP-016
+      cy.wait_for_proposal_submitted();
+    });
+
+    it('Able to submit a valid freeform proposal - with minimum required tokens associated - but also staked', function () {
+      cy.ensure_specified_unstaked_tokens_are_associated('2');
+      cy.get(vegaWalletUnstakedBalance, txTimeout).should('contain', '2');
+      cy.navigate_to('validators');
+      cy.click_on_validator_from_list(0);
+      cy.staking_validator_page_add_stake('2');
+      cy.close_staking_dialog();
+
+      cy.get(vegaWalletStakedBalances, txTimeout).should('contain', '2');
+
+      cy.navigate_to('proposals');
+      cy.go_to_make_new_proposal(governanceProposalType.FREEFORM);
+      cy.enter_unique_freeform_proposal_body(
+        '50',
+        generateFreeFormProposalTitle()
+      );
+      cy.wait_for_proposal_submitted();
+    });
+
+    it('Creating a proposal - proposal rejected - when closing time sooner than system default', function () {
+      cy.go_to_make_new_proposal(governanceProposalType.FREEFORM);
+      cy.enter_unique_freeform_proposal_body(
+        '0.1',
+        generateFreeFormProposalTitle()
+      );
+      cy.contains('Awaiting network confirmation', epochTimeout).should(
+        'not.exist'
+      );
+      cy.get('input:invalid')
+        .invoke('prop', 'validationMessage')
+        .should('equal', 'Value must be greater than or equal to 1.');
+    });
+
+    it('Creating a proposal - proposal rejected - when closing time later than system default', function () {
+      cy.go_to_make_new_proposal(governanceProposalType.FREEFORM);
+      cy.enter_unique_freeform_proposal_body(
+        '100000',
+        generateFreeFormProposalTitle()
+      );
+      cy.contains('Awaiting network confirmation', epochTimeout).should(
+        'not.exist'
+      );
+      cy.get('input:invalid')
+        .invoke('prop', 'validationMessage')
+        .should('equal', 'Value must be less than or equal to 8760.');
+    });
+
+    // 3001-VOTE-006
+    it('Creating a proposal - proposal rejected - able to access rejected proposals', function () {
+      cy.go_to_make_new_proposal(governanceProposalType.RAW);
+      cy.create_ten_digit_unix_timestamp_for_specified_days('1000').then(
+        (closingDateTimestamp) => {
+          cy.enter_raw_proposal_body(closingDateTimestamp).as('rawProposal');
+        }
+      );
+      cy.contains('Awaiting network confirmation', epochTimeout).should(
+        'be.visible'
+      );
+      cy.contains('Proposal rejected', proposalTimeout).should('be.visible');
+      cy.get(dialogCloseButton).click();
+      cy.wait_for_proposal_sync();
+      cy.navigate_to('proposals');
+      cy.get(rejectProposalsLink).click();
+      cy.get('@rawProposal').then((rawProposal) => {
+        cy.get_submitted_proposal_from_proposal_list(
+          rawProposal.rationale.title
+        ).within(() => {
+          cy.contains('Rejected').should('be.visible');
+          cy.contains('Close time too late').should('be.visible');
+          cy.get(viewProposalButton).click();
+        });
+      });
+      cy.get_proposal_information_from_table('State')
+        .contains('Rejected')
+        .and('be.visible');
+      cy.get_proposal_information_from_table('Rejection reason')
+        .contains('PROPOSAL_ERROR_CLOSE_TIME_TOO_LATE')
+        .and('be.visible');
+      cy.get_proposal_information_from_table('Error details')
+        .contains('proposal closing time too late')
+        .and('be.visible');
+    });
+
+    // 0005-ETXN-004
+    it('Unable to create a proposal - when no tokens are associated', function () {
+      cy.vega_wallet_teardown();
+      cy.get(vegaWalletAssociatedBalance, txTimeout).contains(
+        '0.00',
+        txTimeout
+      );
+      cy.go_to_make_new_proposal(governanceProposalType.RAW);
+      cy.create_ten_digit_unix_timestamp_for_specified_days('8').then(
+        (closingDateTimestamp) => {
+          cy.enter_raw_proposal_body(closingDateTimestamp).as;
+        }
+      );
+      cy.contains('Transaction failed', proposalTimeout).should('be.visible');
+      cy.get(feedbackError).should(
+        'have.text',
+        'Network error: the network blocked the transaction through the spam protection'
+      );
+      cy.get(dialogCloseButton).click();
+    });
+
+    // 3002-PROP-009
+    it('Unable to create a proposal - when some but not enough tokens are associated', function () {
+      cy.ensure_specified_unstaked_tokens_are_associated(0.000001);
+      cy.go_to_make_new_proposal(governanceProposalType.RAW);
+      cy.create_ten_digit_unix_timestamp_for_specified_days('8').then(
+        (closingDateTimestamp) => {
+          cy.enter_raw_proposal_body(closingDateTimestamp);
+        }
+      );
+      cy.contains('Transaction failed', proposalTimeout).should('be.visible');
+      cy.get(feedbackError).should(
+        'have.text',
+        'Network error: the network blocked the transaction through the spam protection'
+      );
+      cy.get(dialogCloseButton).click();
+    });
+
+    it('Unable to create a freeform proposal - when json parent section contains unexpected field', function () {
+      // 3001-VOTE-038 3002-PROP-013 3002-PROP-014
+      cy.go_to_make_new_proposal(governanceProposalType.RAW);
+      cy.create_ten_digit_unix_timestamp_for_specified_days('8').then(
+        (closingDateTimestamp) => {
+          cy.fixture('/proposals/raw.json').then((freeformProposal) => {
+            freeformProposal.terms.closingTimestamp = closingDateTimestamp;
+            freeformProposal.unexpected = `i shouldn't be here`;
+            let proposalPayload = JSON.stringify(freeformProposal);
+            cy.get(rawProposalData).type(proposalPayload, {
+              parseSpecialCharSequences: false,
+              delay: 2,
+            });
+          });
+        }
+      );
+      cy.get(newProposalSubmitButton).should('be.visible').click();
+
+      cy.contains('Transaction failed', proposalTimeout).should('be.visible');
+      cy.get(feedbackError).should(
+        'have.text',
+        'Invalid params: the transaction is malformed'
+      );
+      cy.get(dialogCloseButton).click();
+      cy.get(rawProposalData)
+        .invoke('val')
+        .should('contain', "i shouldn't be here");
+    });
+
+    it('Unable to create a freeform proposal - when json terms section contains unexpected field', function () {
+      // 3001-VOTE-038
+      cy.go_to_make_new_proposal(governanceProposalType.RAW);
+      cy.create_ten_digit_unix_timestamp_for_specified_days('8').then(
+        (closingDateTimestamp) => {
+          cy.fixture('/proposals/raw.json').then((rawProposal) => {
+            rawProposal.terms.closingTimestamp = closingDateTimestamp;
+            rawProposal.terms.unexpectedField = `i shouldn't be here`;
+            let proposalPayload = JSON.stringify(rawProposal);
+
+            cy.get(rawProposalData).type(proposalPayload, {
+              parseSpecialCharSequences: false,
+              delay: 2,
+            });
+          });
+        }
+      );
+      cy.get(newProposalSubmitButton).should('be.visible').click();
+
+      cy.contains('Transaction failed', proposalTimeout).should('be.visible');
+      cy.get(feedbackError).should(
+        'have.text',
+        'Invalid params: the transaction is malformed'
+      );
+      cy.get(dialogCloseButton).click();
+    });
+
+    // 1005-PROP-009
+    it.skip(
+      'Unable to vote on a freeform proposal - when some but not enough vega associated',
+      { tags: '@smoke' },
+      function () {
+        const proposalTitle = generateFreeFormProposalTitle();
+
+        cy.ensure_specified_unstaked_tokens_are_associated(1);
+        cy.go_to_make_new_proposal(governanceProposalType.FREEFORM);
+        cy.enter_unique_freeform_proposal_body('50', proposalTitle);
+        cy.wait_for_proposal_submitted();
+        cy.staking_page_disassociate_tokens('0.0001');
+        cy.get(vegaWallet).within(() => {
+          cy.get(vegaWalletAssociatedBalance).should('have.length', 1);
+          cy.get(vegaWalletAssociatedBalance, txTimeout).should(
+            'contain',
+            '0.9999'
+          );
+        });
+        cy.navigate_to('proposals');
+        cy.get_submitted_proposal_from_proposal_list(proposalTitle).within(() =>
+          cy.get(viewProposalButton).click()
+        );
+        cy.contains('Vote breakdown').should('be.visible', {
+          timeout: 10000,
+        });
+        cy.get(voteButtons).should('not.exist');
+        cy.getByTestId('min-proposal-requirements').should(
+          'have.text',
+          `You must have at least ${this.minVoterBalance} VEGA associated to vote on this proposal`
+        );
+      }
+    );
+
+    it('Unable to vote on a proposal - when vega wallet disconnected - option to connect from within', function () {
+      createRawProposal();
+      cy.get('[data-testid="manage-vega-wallet"]').click();
+      cy.get('[data-testid="disconnect"]').click();
+      cy.get('@rawProposal').then((rawProposal) => {
+        cy.get_submitted_proposal_from_proposal_list(
+          rawProposal.rationale.title
+        ).within(() => cy.get(viewProposalButton).click());
+      });
+      // 3001-VOTE-075
+      // 3001-VOTE-076
+      cy.get(connectToVegaWalletButton)
+        .should('be.visible')
+        .and('have.text', 'Connect Vega wallet')
+        .click();
+      cy.getByTestId('connector-jsonRpc').click();
+      cy.get(vegaWalletNameElement).should('be.visible');
+      cy.get(connectToVegaWalletButton).should('not.exist');
+      // 3001-VOTE-100
+      cy.get(vegaWalletAssociatedBalance, txTimeout).contains(
+        '1.00',
+        txTimeout
+      );
+      cy.vote_for_proposal('against');
+      // 3001-VOTE-079
+      cy.contains('You voted: Against').should('be.visible');
+    });
+  }
+);

apps/token-e2e/src/integration/flow/proposal-forms.cy.js

@@ -54,11 +54,11 @@ context(
       cy.wait_for_spinner();
       cy.connectVegaWallet();
       cy.ethereum_wallet_connect();
+      cy.ensure_specified_unstaked_tokens_are_associated('1');
       cy.navigate_to('proposals');
     });
 
     it('Able to submit valid update network parameter proposal', function () {
-      cy.ensure_specified_unstaked_tokens_are_associated('1');
       cy.go_to_make_new_proposal(governanceProposalType.NETWORK_PARAMETER);
       // 3002-PROP-006
       cy.get(newProposalTitle).type('Test update network parameter proposal');

apps/token-e2e/src/integration/flow/proposal-list.cy.js

@@ -0,0 +1,162 @@
+import {
+  createFreeformProposal,
+  createRawProposal,
+  generateFreeFormProposalTitle,
+  governanceProposalType,
+} from '../../support/governance.functions';
+
+const proposalDetailsTitle = '[data-testid="proposal-title"]';
+const openProposals = '[data-testid="open-proposals"]';
+const voteStatus = '[data-testid="vote-status"]';
+const viewProposalButton = '[data-testid="view-proposal-btn"]';
+
+describe('Governance flow for proposal list', { tags: '@slow' }, function () {
+  before('connect wallets and set approval limit', function () {
+    cy.vega_wallet_set_specified_approval_amount('1000');
+    cy.visit('/');
+  });
+
+  beforeEach('visit proposals tab', function () {
+    cy.reload();
+    cy.wait_for_spinner();
+    cy.connectVegaWallet();
+    cy.ethereum_wallet_connect();
+    cy.ensure_specified_unstaked_tokens_are_associated(1);
+    cy.navigate_to_page_if_not_already_loaded('proposals');
+  });
+
+  it('Newly created proposals list - proposals closest to closing date appear higher in list', function () {
+    const minCloseDays = 2;
+    const maxCloseDays = 3;
+
+    // 3001-VOTE-005
+    let proposalDays = [
+      minCloseDays + 1,
+      maxCloseDays,
+      minCloseDays + 3,
+      minCloseDays + 2,
+    ];
+    for (var index = 0; index < proposalDays.length; index++) {
+      cy.go_to_make_new_proposal(governanceProposalType.RAW);
+      cy.create_ten_digit_unix_timestamp_for_specified_days(
+        proposalDays[index]
+      ).then((closingDateTimestamp) => {
+        cy.enter_raw_proposal_body(closingDateTimestamp);
+      });
+      cy.wait_for_proposal_submitted();
+      cy.wait_for_proposal_sync();
+    }
+
+    let arrayOfProposals = [];
+
+    cy.navigate_to('proposals');
+    cy.get(proposalDetailsTitle)
+      .each((proposalTitleElement) => {
+        arrayOfProposals.push(proposalTitleElement.text());
+      })
+      .then(() => {
+        cy.get_sort_order_of_supplied_array(arrayOfProposals).should(
+          'equal',
+          'descending'
+        );
+      });
+  });
+
+  it('Newly created proposals list - able to filter by proposerID to show it in list', function () {
+    const proposerId = Cypress.env('vegaWalletPublicKey');
+    const proposalTitle = generateFreeFormProposalTitle();
+
+    createFreeformProposal(proposalTitle);
+    cy.get_proposal_id_from_list(proposalTitle);
+    cy.get('@proposalIdText').then((proposalId) => {
+      cy.get('[data-testid="set-proposals-filter-visible"]').click();
+      cy.get('[data-testid="filter-input"]').type(proposerId);
+      cy.get(`#${proposalId}`).should('contain', proposalId);
+    });
+  });
+
+  it('Newly created proposals list - shows title and portion of summary', function () {
+    createRawProposal(this.minProposerBalance); // 3001-VOTE-052
+    cy.get('@rawProposal').then((rawProposal) => {
+      cy.get_proposal_id_from_list(rawProposal.rationale.title);
+      cy.get('@proposalIdText').then((proposalId) => {
+        cy.get(openProposals).within(() => {
+          // 3001-VOTE-008
+          // 3001-VOTE-034
+          cy.get(`#${proposalId}`)
+            // 3001-VOTE-097
+            .should('contain', rawProposal.rationale.title)
+            .and('be.visible');
+          cy.get(`#${proposalId}`)
+            .should(
+              'contain',
+              rawProposal.rationale.description.substring(0, 59)
+            )
+            .and('be.visible');
+        });
+      });
+    });
+  });
+
+  it('Newly created proposals list - shows open proposals in an open state', function () {
+    // 3001-VOTE-004
+    // 3001-VOTE-035
+    createRawProposal(this.minProposerBalance);
+    cy.get('@rawProposal').then((rawProposal) => {
+      cy.get_submitted_proposal_from_proposal_list(
+        rawProposal.rationale.title
+      ).within(() => {
+        cy.get(viewProposalButton).should('be.visible').click();
+      });
+      cy.get('@proposalIdText').then((proposalId) => {
+        cy.get_proposal_information_from_table('ID')
+          .contains(proposalId)
+          .and('be.visible');
+      });
+      cy.get_proposal_information_from_table('State')
+        .contains('Open')
+        .and('be.visible');
+      cy.get_proposal_information_from_table('Type')
+        .contains('Freeform')
+        .and('be.visible');
+    });
+  });
+
+  // 3001-VOTE-071
+  it('Newly created freeform proposals list - shows proposal participation - both met and not', function () {
+    const proposalTitle = generateFreeFormProposalTitle();
+    const requiredParticipation = 0.001;
+
+    createFreeformProposal(proposalTitle);
+
+    cy.get_submitted_proposal_from_proposal_list(proposalTitle)
+      .as('submittedProposal')
+      .within(() => {
+        // 3001-VOTE-039
+        cy.get(voteStatus).should('have.text', 'Participation not reached');
+        cy.get(viewProposalButton).click();
+      });
+    cy.vote_for_proposal('for');
+    cy.get_proposal_information_from_table('Total Supply')
+      .invoke('text')
+      .then((totalSupply) => {
+        let tokensRequiredToAchieveResult = parseFloat(
+          (totalSupply.replace(/,/g, '') * requiredParticipation) / 100
+        ).toFixed(2);
+        cy.ensure_specified_unstaked_tokens_are_associated(
+          tokensRequiredToAchieveResult
+        );
+        cy.navigate_to_page_if_not_already_loaded('proposals');
+        cy.get('@submittedProposal').within(() =>
+          cy.get(viewProposalButton).click()
+        );
+        cy.get_proposal_information_from_table('Token participation met')
+          .contains('👍')
+          .should('be.visible');
+        cy.navigate_to('proposals');
+        cy.get('@submittedProposal').within(() =>
+          cy.get(voteStatus).should('have.text', 'Set to pass')
+        );
+      });
+  });
+});

apps/token-e2e/src/integration/view/home.cy.js

@@ -63,6 +63,39 @@ context('Home Page - verify elements on page', { tags: '@smoke' }, function () {
             .and('have.text', 'Browse, vote, and propose');
         });
       });
+      it('should show open or enacted proposals with proposal summary', function () {
+        cy.get('body').then(($body) => {
+          if (!$body.find('[data-testid="proposals-list-item"]').length) {
+            cy.createMarket();
+            cy.reload();
+            cy.wait_for_spinner();
+          }
+        });
+        cy.getByTestId('proposals-list-item')
+          .should('have.length.at.least', 1)
+          .first()
+          .within(() => {
+            cy.getByTestId('proposal-title')
+              .invoke('text')
+              .should('not.be.empty');
+            cy.getByTestId('proposal-type')
+              .invoke('text')
+              .should('not.be.empty');
+            cy.getByTestId('proposal-description')
+              .invoke('text')
+              .should('not.be.empty');
+            cy.getByTestId('proposal-details')
+              .invoke('text')
+              .should('not.be.empty');
+            cy.getByTestId('proposal-status')
+              .invoke('text')
+              .should('not.be.empty');
+            cy.getByTestId('vote-details')
+              .invoke('text')
+              .should('not.be.empty');
+            cy.getByTestId('view-proposal-btn').should('be.visible');
+          });
+      });
       it('should have external link for governance', function () {
         cy.getByTestId('home-proposals').within(() => {
           cy.getByTestId('external-link')

apps/token-e2e/src/integration/view/pubkey-view.cy.js

@@ -38,7 +38,6 @@ context('View functionality with public key', { tags: '@smoke' }, function () {
     cy.navigate_to('proposals');
     cy.go_to_make_new_proposal('Freeform');
     cy.enter_unique_freeform_proposal_body('50', 'pub key proposal test');
-    cy.getByTestId('proposal-submit').should('be.visible').click();
     cy.getByTestId('dialog-content').within(() => {
       cy.get('h1').should('have.text', 'Transaction failed');
       cy.getByTestId('Error').should('have.text', expectedErrorTxt);

apps/token-e2e/src/integration/view/validators.cy.js

@@ -30,11 +30,11 @@ context('Staking Page - verify elements on page', function () {
 
   describe('with wallets disconnected', { tags: '@smoke' }, function () {
     describe('description section', function () {
-      it('Should have staking tab highlighted', function () {
+      it('Should have validators tab highlighted', function () {
         cy.verify_tab_highlighted('validators');
       });
 
-      it('Should have STAKING ON VEGA header visible', function () {
+      it('Should have validators ON VEGA header visible', function () {
         cy.verify_page_header('Validators');
       });
 
@@ -201,12 +201,21 @@ context('Staking Page - verify elements on page', function () {
         cy.get(stakeShare)
           .invoke('text')
           .then(($stakePercentage) => {
-            if ($stakePercentage != '-') {
-              cy.wrap($stakePercentage).should(
-                'match',
-                /\b(?<!\.)(?!0+(?:\.0+)?%)(?:\d|[1-9]\d|100)(?:(?<!100)\.\d+)?%/
-              );
-            }
+            // The pattern must start at a word boundary (\b).
+            // The pattern cannot be immediately preceded by a dot ((?<!\.)).
+            // The pattern can be one of the following:
+            // A percentage value of zero (0%), or
+            // A non-zero percentage value that can be:
+            // A single digit (\d) between 0 and 9, or
+            // A two-digit number between 0 and 99 (\d{1,2}), or
+            // The number 100.
+            // The pattern can optionally include a decimal point and one or more digits after the decimal point ((?:(?<!100)\.\d+)?). However, if the number is 100, it cannot have a decimal point.
+            // The pattern must end with a percentage sign (%).
+
+            cy.wrap($stakePercentage).should(
+              'match',
+              /\b(?<!\.)(?:0+(?:\.0+)?%|(?:\d|\d{1,2}|100)(?:(?<!100)\.\d+)?)%/
+            );
           });
       });
 

apps/token-e2e/src/integration/view/vesting.cy.js

@@ -1,4 +1,3 @@
-const connectPrompt = '[data-testid="eth-connect-prompt"]';
 const connectButton = '[data-testid="connect-to-eth-btn"]';
 
 context(
@@ -18,7 +17,7 @@ context(
       });
 
       it('should have connect Eth wallet info', function () {
-        cy.get(connectPrompt).should('be.visible');
+        cy.get(connectButton).should('be.visible');
       });
 
       it('should have connect Eth wallet button', function () {

apps/token-e2e/src/integration/view/wallet-vega.cy.js

@@ -338,8 +338,8 @@ context(
               .contains(currency.id)
               .parent()
               .siblings()
-              .within(() => cy.contains_exactly('10.00').should('be.visible'));
-
+              .invoke('text')
+              .should('not.be.empty');
             cy.get(vegaWalletCurrencyTitle)
               .contains(currency.id)
               .parent()