fix(explorer): update sizeinmarket to handle undefined sizes

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

@@ -18,10 +18,6 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v2
 
-      - uses: actions/setup-node@v3
-        with:
-        node-version: 16
-
       - name: Run Cypress tests
         uses: cypress-io/github-action@v4
         with:

.github/workflows/cypress-pr.yml

@@ -50,6 +50,20 @@ jobs:
           projects=[${projects// /,}]
           echo PROJECTS=$projects >> $GITHUB_ENV
 
+      # Rename required because some of the files contains the colon character (in the dates)
+      - name: Rename files to allow archive
+        if: ${{ always() }}
+        run: |
+          while read -r file; do
+            mv "${file}" "$(echo ${file} | sed 's|:|-|g')"
+          done< <(find /home/runner/.vegacapsule/testnet/logs -type f)
+
+      - uses: actions/upload-artifact@v3
+        if: ${{ always() }}
+        with:
+          name: logs-${{ matrix.project }}
+          path: /home/runner/.vegacapsule/testnet/logs
+
     outputs:
       projects: ${{ env.PROJECTS }}
 

.github/workflows/cypress-run.yml

@@ -82,10 +82,6 @@ jobs:
             mv "${file}" "$(echo ${file} | sed 's|:|-|g')"
           done< <(find /home/runner/.vegacapsule/testnet/logs -type f)
 
-      - name: Print logs files
-        if: ${{ always() }}
-        run: ls -alsh /home/runner/.vegacapsule/testnet/logs/
-
       - uses: actions/upload-artifact@v3
         if: ${{ always() }}
         with:

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

@@ -1,48 +1,150 @@
-context('Asset page', { tags: '@regression' }, () => {
-  const columns = ['symbol', 'name', 'id', 'type', 'status', 'actions'];
-  const hiddenOnMobile = ['id', 'type', 'status'];
-  describe('Verify elements on page', () => {
-    before('Navigate to assets page', () => {
-      cy.visit('/assets');
+context('Asset page', { tags: '@regression' }, function () {
+  before('gather system asset information', function () {
+    cy.get_asset_information().as('assetsInfo');
+  });
+
+  describe('Verify elements on page', function () {
+    const assetsNavigation = 'a[href="/assets"]';
+    const assetHeader = '[data-testid="asset-header"]';
+    const jsonSection = '.language-json';
+
+    before('Navigate to assets page', function () {
+      cy.visit('/');
+      cy.get(assetsNavigation).click();
+
+      // Check we have enough enough assets
+      const assetNames = Object.keys(this.assetsInfo);
+      assert.isAtLeast(
+        assetNames.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) => {
-          cy.get(`[row-id="${asset.id}"]`).should('be.visible');
-        });
-      });
-      columns.forEach((col) => {
-        cy.get(`[col-id="${col}"]`).should('be.visible');
+    it('should be able to see assets page sections', function () {
+      const assetNames = Object.keys(this.assetsInfo);
+      assetNames.forEach((assetName) => {
+        cy.get(assetHeader)
+          .contains(assetName)
+          .should('be.visible')
+          .next()
+          .within(() => {
+            cy.get(jsonSection).should('not.be.empty');
+          });
       });
     });
 
-    it('should be able to see assets page displayed in mobile', () => {
-      cy.switchToMobile();
+    it('should be able to see all asset details displayed in JSON', function () {
+      const assetNames = Object.keys(this.assetsInfo);
+      assetNames.forEach((assetName) => {
+        cy.get(assetHeader)
+          .contains(assetName)
+          .next()
+          .within(() => {
+            cy.get(jsonSection)
+              .invoke('text')
+              .convert_string_json_to_js_object()
+              .then((assetsListedInJson) => {
+                const assetInfo = this.assetsInfo[assetName];
 
-      hiddenOnMobile.forEach((col) => {
-        cy.get(`[col-id="${col}"]`).should('have.length', 0);
-      });
+                assert.equal(assetsListedInJson.name, assetInfo.node.name);
+                assert.equal(assetsListedInJson.id, assetInfo.node.id);
+                assert.equal(
+                  assetsListedInJson.decimals,
+                  assetInfo.node.decimals
+                );
+                assert.equal(assetsListedInJson.symbol, assetInfo.node.symbol);
+                assert.equal(
+                  assetsListedInJson.source.__typename,
+                  assetInfo.node.source.__typename
+                );
 
-      cy.getAssets().then((assets) => {
-        Object.values(assets).forEach((asset) => {
-          cy.get(`[row-id="${asset.id}"]`).should('be.visible');
-        });
+                if (assetInfo.node.source.__typename == 'ERC20') {
+                  assert.equal(
+                    assetsListedInJson.source.contractAddress,
+                    assetInfo.node.source.contractAddress
+                  );
+                }
+
+                if (assetInfo.node.source.__typename == 'BuiltinAsset') {
+                  assert.equal(
+                    assetsListedInJson.source.maxFaucetAmountMint,
+                    assetInfo.node.source.maxFaucetAmountMint
+                  );
+                }
+
+                let knownAssetTypes = ['BuiltinAsset', 'ERC20'];
+                assert.include(
+                  knownAssetTypes,
+                  assetInfo.node.source.__typename,
+                  `Checking that current asset type of ${assetInfo.node.source.__typename} /
+                  is one of: ${knownAssetTypes}: /
+                  If fail then we need to add extra tests for un-encountered asset types`
+                );
+              });
+          });
       });
     });
 
-    it('should open details page when clicked on "View details"', () => {
-      cy.getAssets().then((assets) => {
-        Object.values(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('asset-header').should('have.text', asset.name);
-          cy.go('back');
+    it('should be able to switch assets 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(assetsNavigation)
+        .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(assetsNavigation)
+        .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);
+    });
+
+    it('should be able to see assets page displayed in mobile', function () {
+      cy.common_switch_to_mobile_and_click_toggle();
+      cy.get(assetsNavigation).click();
+
+      const assetNames = Object.keys(this.assetsInfo);
+      assetNames.forEach((assetName) => {
+        cy.get(assetHeader)
+          .contains(assetName)
+          .should('be.visible')
+          .next()
+          .within(() => {
+            cy.get(jsonSection).should('not.be.empty');
+          });
       });
     });
   });

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

@@ -247,7 +247,7 @@ context('Network parameters page', { tags: '@smoke' }, function () {
         .and('include', darkThemeSideMenuBackgroundColor);
     });
 
-    it.skip('should be able to see network parameters - on mobile', function () {
+    it('should be able to see network parameters - on mobile', function () {
       cy.common_switch_to_mobile_and_click_toggle();
       cy.get(networkParametersNavigation).click();
       cy.get_network_parameters().then((network_parameters) => {

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

@@ -123,7 +123,7 @@ context.skip('Parties page', { tags: '@regression' }, function () {
           .convert_string_json_to_js_object()
           .get_party_accounts_data_from_js_object()
           .then((accountsListedInJson) => {
-            cy.getAssets().then((assetsInfo) => {
+            cy.get_asset_information().then((assetsInfo) => {
               const assetInfo =
                 assetsInfo[accountsListedInJson[assetInTest].asset.name];
 
@@ -205,7 +205,7 @@ context.skip('Parties page', { tags: '@regression' }, function () {
     });
 
     Cypress.Commands.add('get_asset_decimals', (assetID) => {
-      cy.getAssets().then((assetsInfo) => {
+      cy.get_asset_information().then((assetsInfo) => {
         const assetDecimals = assetsInfo[assetData[assetID].name].decimals;
         let decimals = '';
         for (let i = 0; i < assetDecimals; i++) decimals += '0';

apps/explorer-e2e/src/support/common.functions.js

@@ -21,10 +21,6 @@ Cypress.Commands.add(
   }
 );
 
-Cypress.Commands.add('switchToMobile', () => {
-  cy.viewport('iphone-x');
-});
-
 Cypress.Commands.add('common_switch_to_mobile_and_click_toggle', function () {
   cy.viewport('iphone-x');
   cy.visit('/');

apps/explorer/.env.devnet

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

apps/explorer/src/app/app.tsx

@@ -1,68 +1,72 @@
 import classnames from 'classnames';
-import { NetworkLoader, useInitializeEnv } from '@vegaprotocol/environment';
+import { useState, useEffect } from 'react';
+import { useLocation } from 'react-router-dom';
+import { EnvironmentProvider, NetworkLoader } from '@vegaprotocol/environment';
 import { Nav } from './components/nav';
 import { Header } from './components/header';
 import { Main } from './components/main';
 import { TendermintWebsocketProvider } from './contexts/websocket/tendermint-websocket-provider';
+import type { InMemoryCacheConfig } from '@apollo/client';
 import { Footer } from './components/footer/footer';
 import { AnnouncementBanner, ExternalLink } from '@vegaprotocol/ui-toolkit';
-import {
-  AssetDetailsDialog,
-  useAssetDetailsDialogStore,
-} from '@vegaprotocol/assets';
-import { DEFAULT_CACHE_CONFIG } from '@vegaprotocol/apollo-client';
-
-const DialogsContainer = () => {
-  const { isOpen, id, trigger, asJson, setOpen } = useAssetDetailsDialogStore();
-  return (
-    <AssetDetailsDialog
-      assetId={id}
-      trigger={trigger || null}
-      asJson={asJson}
-      open={isOpen}
-      onChange={setOpen}
-    />
-  );
-};
 
 function App() {
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  const location = useLocation();
+
+  useEffect(() => {
+    setMenuOpen(false);
+  }, [location]);
+
+  const cacheConfig: InMemoryCacheConfig = {
+    typePolicies: {
+      statistics: {
+        keyFields: false,
+      },
+    },
+  };
+
   const layoutClasses = classnames(
     'grid grid-rows-[auto_1fr_auto] grid-cols-[1fr] md:grid-rows-[auto_minmax(700px,_1fr)_auto] md:grid-cols-[300px_1fr]',
     'min-h-[100vh] mx-auto my-0',
     'border-neutral-700 dark:border-neutral-300 lg:border-l lg:border-r',
     'bg-white dark:bg-black',
     'antialiased text-black dark:text-white',
-    'overflow-hidden relative'
+    {
+      'h-[100vh] min-h-auto overflow-hidden': menuOpen,
+    }
   );
 
   return (
     <TendermintWebsocketProvider>
-      <NetworkLoader cache={DEFAULT_CACHE_CONFIG}>
+      <NetworkLoader cache={cacheConfig}>
         <AnnouncementBanner>
           <div className="font-alpha calt uppercase text-center text-lg text-white">
-            <span className="pr-4">Mainnet sim 2 coming in March!</span>
+            <span className="pr-4">The Mainnet sims are live!</span>
             <ExternalLink href="https://fairground.wtf/">
-              Learn more
+              Come help stress test the network
             </ExternalLink>
           </div>
         </AnnouncementBanner>
 
         <div className={layoutClasses}>
-          <Header />
-          <Nav />
+          <Header menuOpen={menuOpen} setMenuOpen={setMenuOpen} />
+          <Nav menuOpen={menuOpen} />
           <Main />
           <Footer />
         </div>
-
-        <DialogsContainer />
       </NetworkLoader>
     </TendermintWebsocketProvider>
   );
 }
 
 const Wrapper = () => {
-  useInitializeEnv();
-  return <App />;
+  return (
+    <EnvironmentProvider>
+      <App />
+    </EnvironmentProvider>
+  );
 };
 
 export default Wrapper;

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

@@ -1,6 +1,6 @@
-import { useAssetDataProvider } from '@vegaprotocol/assets';
 import { addDecimalsFormatNumber } from '@vegaprotocol/react-helpers';
 import { AssetLink } from '../links';
+import { useExplorerAssetQuery } from '../links/asset-link/__generated__/Asset';
 
 export type AssetBalanceProps = {
   assetId: string;
@@ -17,17 +17,21 @@ const AssetBalance = ({
   price,
   showAssetLink = true,
 }: AssetBalanceProps) => {
-  const { data: asset } = useAssetDataProvider(assetId);
+  const { data } = useExplorerAssetQuery({
+    variables: { id: assetId },
+  });
 
   const label =
-    asset && asset.decimals
-      ? addDecimalsFormatNumber(price, asset.decimals)
+    data && data.asset?.decimals
+      ? addDecimalsFormatNumber(price, data.asset.decimals)
       : price;
 
   return (
     <div className="inline-block">
       <span>{label}</span>{' '}
-      {showAssetLink && asset?.id ? <AssetLink assetId={assetId} /> : null}
+      {showAssetLink && data?.asset?.id ? (
+        <AssetLink id={data.asset.id} />
+      ) : null}
     </div>
   );
 };

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

@@ -1,41 +0,0 @@
-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(
-      <MemoryRouter>
-        <AssetsTable data={null} />
-      </MemoryRouter>
-    );
-    expect(await res.findByText('Loading...')).toBeInTheDocument();
-  });
-
-  it('shows no data message if no assets found', async () => {
-    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(
-      <MemoryRouter>
-        <AssetsTable data={assetsList} />
-      </MemoryRouter>
-    );
-    await waitFor(() => {
-      const rowA1 = res.container.querySelector('[row-id="123"]');
-      expect(rowA1).toBeInTheDocument();
-
-      const rowA2 = res.container.querySelector('[row-id="456"]');
-      expect(rowA2).toBeInTheDocument();
-    });
-  });
-});

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

@@ -1,105 +0,0 @@
-import type { AssetFieldsFragment } from '@vegaprotocol/assets';
-import { AssetTypeMapping, AssetStatusMapping } from '@vegaprotocol/assets';
-import { t } from '@vegaprotocol/react-helpers';
-import type { VegaICellRendererParams } from '@vegaprotocol/ui-toolkit';
-import { ButtonLink } from '@vegaprotocol/ui-toolkit';
-import type { AgGridReact } from 'ag-grid-react';
-import { AgGridColumn } from 'ag-grid-react';
-import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
-import { 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 navigate = useNavigate();
-  const ref = useRef<AgGridReact>(null);
-  const showColumnsOnDesktop = () => {
-    ref.current?.columnApi.setColumnsVisible(
-      ['id', 'type', 'status'],
-      window.innerWidth > BREAKPOINT_MD
-    );
-  };
-
-  useLayoutEffect(() => {
-    window.addEventListener('resize', showColumnsOnDesktop);
-    return () => {
-      window.removeEventListener('resize', showColumnsOnDesktop);
-    };
-  }, []);
-
-  return (
-    <AgGrid
-      ref={ref}
-      rowData={data}
-      getRowId={({ data }: { data: AssetFieldsFragment }) => data.id}
-      overlayNoRowsTemplate={t('This chain has no assets')}
-      domLayout="autoHeight"
-      defaultColDef={{
-        flex: 1,
-        resizable: true,
-        sortable: true,
-        filter: true,
-        filterParams: { buttons: ['reset'] },
-        autoHeight: true,
-      }}
-      suppressCellFocus={true}
-      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"
-        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
-        }
-      />
-      <AgGridColumn
-        headerName={t('Status')}
-        field="status"
-        hide={window.innerWidth < BREAKPOINT_MD}
-        valueFormatter={({ value }: { value?: string }) =>
-          value && AssetStatusMapping[value].value
-        }
-      />
-      <AgGridColumn
-        colId="actions"
-        headerName=""
-        sortable={false}
-        filter={false}
-        resizable={false}
-        wrapText={true}
-        field="id"
-        cellRenderer={({
-          value,
-        }: VegaICellRendererParams<AssetFieldsFragment, 'id'>) =>
-          value ? (
-            <ButtonLink
-              onClick={(e) => {
-                navigate(value);
-              }}
-            >
-              {t('View details')}
-            </ButtonLink>
-          ) : (
-            ''
-          )
-        }
-      />
-    </AgGrid>
-  );
-};

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

@@ -1,56 +0,0 @@
-import { t } from '@vegaprotocol/react-helpers';
-import {
-  Button,
-  Dialog,
-  Icon,
-  SyntaxHighlighter,
-} from '@vegaprotocol/ui-toolkit';
-
-type JsonViewerDialogProps = {
-  title: string;
-  content: unknown;
-  open: boolean;
-  onChange: (isOpen: boolean) => void;
-  trigger?: HTMLElement;
-};
-export const JsonViewerDialog = ({
-  title,
-  content,
-  open,
-  onChange,
-  trigger,
-}: JsonViewerDialogProps) => {
-  return (
-    <Dialog
-      size="medium"
-      title={title}
-      icon={<Icon name="info-sign"></Icon>}
-      open={open}
-      onChange={(isOpen) => onChange(isOpen)}
-      onCloseAutoFocus={(e) => {
-        /**
-         * This mimics radix's default behaviour that focuses the dialog's
-         * trigger after closing itself
-         */
-        if (trigger) {
-          e.preventDefault();
-          trigger.focus();
-        }
-      }}
-    >
-      <div className="pr-8 mb-8 max-h-[70vh] overflow-y-scroll">
-        <SyntaxHighlighter size="smaller" data={content} />
-      </div>
-      <div className="w-1/4">
-        <Button
-          data-testid="close-asset-details-dialog"
-          fill={true}
-          size="sm"
-          onClick={() => onChange(false)}
-        >
-          {t('Close')}
-        </Button>
-      </div>
-    </Dialog>
-  );
-};

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

@@ -1,59 +1,39 @@
-import { NodeSwitcherDialog, useEnvironment } from '@vegaprotocol/environment';
-import { t, useScreenDimensions } from '@vegaprotocol/react-helpers';
-import { ExternalLink, Link } from '@vegaprotocol/ui-toolkit';
-import { useMemo, useState } from 'react';
-import { ENV } from '../../config/env';
+import { useEnvironment } from '@vegaprotocol/environment';
+import { t } from '@vegaprotocol/react-helpers';
+import { Link } from '@vegaprotocol/ui-toolkit';
 
 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]
-  );
-
+  const { VEGA_URL, GIT_COMMIT_HASH, GIT_ORIGIN_URL, setNodeSwitcherOpen } =
+    useEnvironment();
   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">
+    <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 && (
-            <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
-                  href={
-                    GIT_ORIGIN_URL
-                      ? `${GIT_ORIGIN_URL}/commit/${GIT_COMMIT_HASH}`
-                      : undefined
-                  }
-                  target={GIT_ORIGIN_URL ? '_blank' : undefined}
-                >
-                  {GIT_COMMIT_HASH}
-                </Link>
-              </p>
-            </div>
+            <p data-testid="git-commit-hash">
+              {t('Version')}:{' '}
+              <Link
+                href={
+                  GIT_ORIGIN_URL
+                    ? `${GIT_ORIGIN_URL}/commit/${GIT_COMMIT_HASH}`
+                    : undefined
+                }
+                target={GIT_ORIGIN_URL ? '_blank' : undefined}
+              >
+                {GIT_COMMIT_HASH}
+              </Link>
+            </p>
           )}
-
-          <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
-        open={nodeSwitcherOpen}
-        setOpen={setNodeSwitcherOpen}
-      />
-    </>
+
+        <div className="flex pl-2 content-center">
+          {VEGA_URL && <NodeUrl url={VEGA_URL} />}
+          <Link className="ml-2" onClick={setNodeSwitcherOpen}>
+            {t('Change')}
+          </Link>
+        </div>
+      </div>
+    </footer>
   );
 };
 

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

@@ -14,7 +14,7 @@ jest.mock('../search', () => ({
 
 const renderComponent = () => (
   <MemoryRouter>
-    <Header />
+    <Header menuOpen={false} setMenuOpen={jest.fn()} />
   </MemoryRouter>
 );
 

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

@@ -4,11 +4,15 @@ import { ThemeSwitcher, Icon } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/react-helpers';
 import { Search } from '../search';
 import { Routes } from '../../routes/route-names';
+import type { Dispatch, SetStateAction } from 'react';
 import { NetworkSwitcher } from '@vegaprotocol/environment';
-import { useNavStore } from '../nav';
 
-export const Header = () => {
-  const [open, toggle] = useNavStore((state) => [state.open, state.toggle]);
+interface ThemeToggleProps {
+  menuOpen: boolean;
+  setMenuOpen: Dispatch<SetStateAction<boolean>>;
+}
+
+export const Header = ({ menuOpen, setMenuOpen }: ThemeToggleProps) => {
   const headerClasses = classnames(
     'md:col-span-2',
     'grid grid-rows-2 md:grid-rows-1 grid-cols-[1fr_auto] md:grid-cols-[auto_1fr_auto] items-center',
@@ -32,9 +36,9 @@ export const Header = () => {
       <button
         data-testid="open-menu"
         className="md:hidden text-white"
-        onClick={() => toggle()}
+        onClick={() => setMenuOpen(!menuOpen)}
       >
-        <Icon name={open ? 'cross' : 'menu'} />
+        <Icon name={menuOpen ? 'cross' : 'menu'} />
       </button>
       <Search />
       <ThemeSwitcher className="-my-4" />

apps/explorer/src/app/components/links/asset-link/Asset.graphql

@@ -0,0 +1,8 @@
+query ExplorerAsset($id: ID!) {
+  asset(id: $id) {
+    id
+    name
+    status
+    decimals
+  }
+}

apps/explorer/src/app/components/links/asset-link/__generated__/Asset.ts

@@ -0,0 +1,51 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type ExplorerAssetQueryVariables = Types.Exact<{
+  id: Types.Scalars['ID'];
+}>;
+
+
+export type ExplorerAssetQuery = { __typename?: 'Query', asset?: { __typename?: 'Asset', id: string, name: string, status: Types.AssetStatus, decimals: number } | null };
+
+
+export const ExplorerAssetDocument = gql`
+    query ExplorerAsset($id: ID!) {
+  asset(id: $id) {
+    id
+    name
+    status
+    decimals
+  }
+}
+    `;
+
+/**
+ * __useExplorerAssetQuery__
+ *
+ * To run a query within a React component, call `useExplorerAssetQuery` and pass it any options that fit your needs.
+ * When your component renders, `useExplorerAssetQuery` 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 } = useExplorerAssetQuery({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useExplorerAssetQuery(baseOptions: Apollo.QueryHookOptions<ExplorerAssetQuery, ExplorerAssetQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ExplorerAssetQuery, ExplorerAssetQueryVariables>(ExplorerAssetDocument, options);
+      }
+export function useExplorerAssetLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerAssetQuery, ExplorerAssetQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ExplorerAssetQuery, ExplorerAssetQueryVariables>(ExplorerAssetDocument, options);
+        }
+export type ExplorerAssetQueryHookResult = ReturnType<typeof useExplorerAssetQuery>;
+export type ExplorerAssetLazyQueryHookResult = ReturnType<typeof useExplorerAssetLazyQuery>;
+export type ExplorerAssetQueryResult = Apollo.QueryResult<ExplorerAssetQuery, ExplorerAssetQueryVariables>;

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

@@ -1,37 +1,63 @@
 import { MemoryRouter } from 'react-router-dom';
 import { MockedProvider } from '@apollo/client/testing';
 import type { MockedResponse } from '@apollo/client/testing';
-import { render, waitFor } from '@testing-library/react';
-import { AssetLink } from './asset-link';
-import { mockAssetA1 } from '../../../mocks/assets';
+import { render } from '@testing-library/react';
+import AssetLink from './asset-link';
+import { ExplorerAssetDocument } from './__generated__/Asset';
 
 function renderComponent(id: string, mock: MockedResponse[]) {
   return (
-    <MockedProvider mocks={mock} addTypename={false}>
+    <MockedProvider mocks={mock}>
       <MemoryRouter>
-        <AssetLink assetId={id} />
+        <AssetLink id={id} />
       </MemoryRouter>
     </MockedProvider>
   );
 }
 
-describe('AssetLink', () => {
-  it('renders the asset id when not found and makes the button disabled', async () => {
+describe('Asset link component', () => {
+  it('Renders the ID at first', () => {
     const res = render(renderComponent('123', []));
     expect(res.getByText('123')).toBeInTheDocument();
-    expect(await res.findByTestId('asset-link')).toBeDisabled();
-    await waitFor(async () => {
-      expect(await res.queryByText('A ONE')).toBeFalsy();
-    });
   });
 
-  it('renders the asset name when found and make the button enabled', async () => {
-    const res = render(renderComponent('123', [mockAssetA1]));
-    expect(res.getByText('123')).toBeInTheDocument();
+  it('Renders the asset name when the query returns a result', async () => {
+    const mock = {
+      request: {
+        query: ExplorerAssetDocument,
+        variables: {
+          id: '123',
+        },
+      },
+      result: {
+        data: {
+          asset: {
+            id: '123',
+            name: 'test-label',
+            status: 'irrelevant-test-data',
+            decimals: 18,
+          },
+        },
+      },
+    };
 
-    await waitFor(async () => {
-      expect(await res.findByText('A ONE')).toBeInTheDocument();
-      expect(await res.findByTestId('asset-link')).not.toBeDisabled();
-    });
+    const res = render(renderComponent('123', [mock]));
+    expect(res.getByText('123')).toBeInTheDocument();
+    expect(await res.findByText('test-label')).toBeInTheDocument();
+  });
+
+  it('Leaves the asset id when the asset is not found', async () => {
+    const mock = {
+      request: {
+        query: ExplorerAssetDocument,
+        variables: {
+          id: '123',
+        },
+      },
+      error: new Error('No such asset'),
+    };
+
+    const res = render(renderComponent('123', [mock]));
+    expect(await res.findByText('123')).toBeInTheDocument();
   });
 });

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

@@ -1,43 +1,36 @@
+import React from 'react';
+import { Routes } from '../../../routes/route-names';
+import { useExplorerAssetQuery } from './__generated__/Asset';
+import { Link } from 'react-router-dom';
+
 import type { ComponentProps } from 'react';
 import Hash from '../hash';
-import { ButtonLink } from '@vegaprotocol/ui-toolkit';
-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;
+export type AssetLinkProps = Partial<ComponentProps<typeof Link>> & {
+  id: string;
 };
 
 /**
  * Given an asset ID, it will fetch the asset name and show that,
- * with a link to the assets modal. If the name does not come back
+ * with a link to the assets list. If the name does not come back
  * it will use the ID instead.
  */
-export const AssetLink = ({ assetId, asDialog, ...props }: AssetLinkProps) => {
-  const { data: asset } = useAssetDataProvider(assetId);
+const AssetLink = ({ id, ...props }: AssetLinkProps) => {
+  const { data } = useExplorerAssetQuery({
+    variables: { id },
+  });
+
+  let label: string = id;
+
+  if (data?.asset?.name) {
+    label = data.asset.name;
+  }
 
-  const open = useAssetDetailsDialogStore((state) => state.open);
-  const navigate = useNavigate();
-  const label = asset?.name ? asset.name : assetId;
   return (
-    <ButtonLink
-      data-testid="asset-link"
-      disabled={!asset}
-      onClick={(e) => {
-        if (asDialog) {
-          open(assetId, e.target as HTMLElement);
-        } else {
-          navigate(`${Routes.ASSETS}/${asset?.id}`);
-        }
-      }}
-      {...props}
-    >
+    <Link className="underline" {...props} to={`/${Routes.ASSETS}#${id}`}>
       <Hash text={label} />
-    </ButtonLink>
+    </Link>
   );
 };
+
+export default AssetLink;

apps/explorer/src/app/components/links/index.ts

@@ -2,4 +2,4 @@ export { default as BlockLink } from './block-link/block-link';
 export { default as PartyLink } from './party-link/party-link';
 export { default as NodeLink } from './node-link/node-link';
 export { default as MarketLink } from './market-link/market-link';
-export * from './asset-link/asset-link';
+export { default as AssetLink } from './asset-link/asset-link';

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

@@ -2,7 +2,7 @@ import { AppRouter } from '../../routes';
 
 export const Main = () => {
   return (
-    <main className="p-4">
+    <main className="p-4 overflow-scroll">
       <AppRouter />
     </main>
   );

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

@@ -1,246 +0,0 @@
-import {
-  addDecimalsFormatNumber,
-  formatNumberPercentage,
-  getMarketExpiryDateFormatted,
-  t,
-} from '@vegaprotocol/react-helpers';
-import type { MarketInfoNoCandlesQuery } from '@vegaprotocol/market-info';
-import { MarketInfoTable } from '@vegaprotocol/market-info';
-import pick from 'lodash/pick';
-import {
-  MarketStateMapping,
-  MarketTradingModeMapping,
-} from '@vegaprotocol/types';
-import { AssetDetailsTable, useAssetDataProvider } from '@vegaprotocol/assets';
-import { Splash } from '@vegaprotocol/ui-toolkit';
-import BigNumber from 'bignumber.js';
-import { useMemo } from 'react';
-import { Link } from 'react-router-dom';
-
-export const MarketDetails = ({
-  market,
-}: {
-  market: MarketInfoNoCandlesQuery['market'];
-}) => {
-  const assetSymbol =
-    market?.tradableInstrument.instrument.product?.settlementAsset.symbol;
-  const assetId = useMemo(
-    () => market?.tradableInstrument.instrument.product?.settlementAsset.id,
-    [market]
-  );
-  const { data: asset } = useAssetDataProvider(assetId ?? '');
-
-  if (!market) return null;
-
-  const keyDetails = {
-    ...pick(market, 'decimalPlaces', 'positionDecimalPlaces', 'tradingMode'),
-    state: MarketStateMapping[market.state],
-  };
-  const assetDecimals =
-    market.tradableInstrument.instrument.product.settlementAsset.decimals;
-
-  const panels = [
-    {
-      title: t('Key details'),
-      content: (
-        <MarketInfoTable
-          noBorder={false}
-          data={{
-            name: market.tradableInstrument.instrument.name,
-            marketID: market.id,
-            tradingMode:
-              keyDetails.tradingMode &&
-              MarketTradingModeMapping[keyDetails.tradingMode],
-            marketDecimalPlaces: market.decimalPlaces,
-            positionDecimalPlaces: market.positionDecimalPlaces,
-            settlementAssetDecimalPlaces: assetDecimals,
-          }}
-        />
-      ),
-    },
-    {
-      title: t('Instrument'),
-      content: (
-        <MarketInfoTable
-          noBorder={false}
-          data={{
-            marketName: market.tradableInstrument.instrument.name,
-            code: market.tradableInstrument.instrument.code,
-            productType:
-              market.tradableInstrument.instrument.product.__typename,
-            ...market.tradableInstrument.instrument.product,
-          }}
-        />
-      ),
-    },
-    {
-      title: t('Settlement asset'),
-      content: asset ? (
-        <AssetDetailsTable
-          asset={asset}
-          inline={true}
-          noBorder={false}
-          dtClassName="text-black dark:text-white text-ui !px-0 !font-normal"
-          ddClassName="text-black dark:text-white text-ui !px-0 !font-normal max-w-full"
-        />
-      ) : (
-        <Splash>{t('No data')}</Splash>
-      ),
-    },
-    {
-      title: t('Metadata'),
-      content: (
-        <MarketInfoTable
-          noBorder={false}
-          data={{
-            expiryDate: getMarketExpiryDateFormatted(
-              market.tradableInstrument.instrument.metadata.tags
-            ),
-            ...market.tradableInstrument.instrument.metadata.tags
-              ?.map((tag) => {
-                const [key, value] = tag.split(':');
-                return { [key]: value };
-              })
-              .reduce((acc, curr) => ({ ...acc, ...curr }), {}),
-          }}
-        />
-      ),
-    },
-    {
-      title: t('Risk model'),
-      content: (
-        <MarketInfoTable
-          noBorder={false}
-          data={market.tradableInstrument.riskModel}
-          unformatted={true}
-          omits={[]}
-        />
-      ),
-    },
-    {
-      title: t('Risk parameters'),
-      content: (
-        <MarketInfoTable
-          noBorder={false}
-          data={market.tradableInstrument.riskModel.params}
-          unformatted={true}
-          omits={[]}
-        />
-      ),
-    },
-    {
-      title: t('Risk factors'),
-      content: (
-        <MarketInfoTable
-          noBorder={false}
-          data={market.riskFactors}
-          unformatted={true}
-          omits={['market', '__typename']}
-        />
-      ),
-    },
-    ...(market.priceMonitoringSettings?.parameters?.triggers || []).map(
-      (trigger, i) => ({
-        title: t(`Price monitoring trigger ${i + 1}`),
-        content: <MarketInfoTable noBorder={false} data={trigger} />,
-      })
-    ),
-    ...(market.data?.priceMonitoringBounds || []).map((trigger, i) => ({
-      title: t(`Price monitoring bound ${i + 1}`),
-      content: (
-        <>
-          <MarketInfoTable
-            noBorder={false}
-            data={trigger}
-            decimalPlaces={market.decimalPlaces}
-            omits={['referencePrice', '__typename']}
-          />
-          <MarketInfoTable
-            noBorder={false}
-            data={{ referencePrice: trigger.referencePrice }}
-            decimalPlaces={assetDecimals}
-          />
-        </>
-      ),
-    })),
-    {
-      title: t('Liquidity monitoring parameters'),
-      content: (
-        <MarketInfoTable
-          noBorder={false}
-          data={{
-            triggeringRatio:
-              market.liquidityMonitoringParameters.triggeringRatio,
-            ...market.liquidityMonitoringParameters.targetStakeParameters,
-          }}
-        />
-      ),
-    },
-    {
-      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>
-      ),
-    },
-    {
-      title: t('Oracle'),
-      content: (
-        <MarketInfoTable
-          noBorder={false}
-          data={
-            market.tradableInstrument.instrument.product.dataSourceSpecBinding
-          }
-        >
-          <Link
-            className="text-xs hover:underline"
-            to={`/oracles#${market.tradableInstrument.instrument.product.dataSourceSpecForSettlementData.id}`}
-          >
-            {t('View settlement data oracle specification')}
-          </Link>
-          <Link
-            className="text-xs hover:underline"
-            to={`/oracles#${market.tradableInstrument.instrument.product.dataSourceSpecForTradingTermination.id}`}
-          >
-            {t('View termination oracle specification')}
-          </Link>
-        </MarketInfoTable>
-      ),
-    },
-  ];
-
-  return (
-    <>
-      {panels.map((p) => (
-        <div className="mb-3">
-          <h2 className="font-alpha text-xl">{p.title}</h2>
-          {p.content}
-        </div>
-      ))}
-    </>
-  );
-};

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

@@ -1,132 +0,0 @@
-import type { MarketFieldsFragment } from '@vegaprotocol/market-list';
-import { t } from '@vegaprotocol/react-helpers';
-import type {
-  VegaICellRendererParams,
-  VegaValueGetterParams,
-} from '@vegaprotocol/ui-toolkit';
-import { ButtonLink } from '@vegaprotocol/ui-toolkit';
-import type { AgGridReact } from 'ag-grid-react';
-import { AgGridColumn } from 'ag-grid-react';
-import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
-import { useRef, useLayoutEffect } from 'react';
-import { BREAKPOINT_MD } from '../../config/breakpoints';
-import { MarketStateMapping } from '@vegaprotocol/types';
-import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
-import type { RowClickedEvent } from 'ag-grid-community';
-import { Link, useNavigate } from 'react-router-dom';
-
-type MarketsTableProps = {
-  data: MarketFieldsFragment[] | null;
-};
-export const MarketsTable = ({ data }: MarketsTableProps) => {
-  const openAssetDetailsDialog = useAssetDetailsDialogStore(
-    (state) => state.open
-  );
-
-  const navigate = useNavigate();
-
-  const gridRef = useRef<AgGridReact>(null);
-  useLayoutEffect(() => {
-    const showColumnsOnDesktop = () => {
-      gridRef.current?.columnApi.setColumnsVisible(
-        ['id', 'state', 'asset'],
-        window.innerWidth > BREAKPOINT_MD
-      );
-    };
-    window.addEventListener('resize', showColumnsOnDesktop);
-    return () => {
-      window.removeEventListener('resize', showColumnsOnDesktop);
-    };
-  }, []);
-
-  return (
-    <AgGrid
-      ref={gridRef}
-      rowData={data}
-      getRowId={({ data }: { data: MarketFieldsFragment }) => data.id}
-      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') {
-          navigate(data.id);
-        }
-      }}
-    >
-      <AgGridColumn
-        colId="code"
-        headerName={t('Code')}
-        field="tradableInstrument.instrument.code"
-      />
-      <AgGridColumn
-        colId="name"
-        headerName={t('Name')}
-        field="tradableInstrument.instrument.name"
-      />
-      <AgGridColumn
-        headerName={t('Status')}
-        field="state"
-        hide={window.innerWidth <= BREAKPOINT_MD}
-        valueGetter={({
-          data,
-        }: VegaValueGetterParams<MarketFieldsFragment, 'state'>) => {
-          return data?.state ? MarketStateMapping[data?.state] : '-';
-        }}
-      />
-      <AgGridColumn
-        colId="asset"
-        headerName={t('Settlement asset')}
-        field="tradableInstrument.instrument.product.settlementAsset"
-        hide={window.innerWidth <= BREAKPOINT_MD}
-        cellRenderer={({
-          value,
-        }: VegaICellRendererParams<
-          MarketFieldsFragment,
-          'tradableInstrument.instrument.product.settlementAsset'
-        >) =>
-          value ? (
-            <ButtonLink
-              onClick={(e) => {
-                openAssetDetailsDialog(value.id, e.target as HTMLElement);
-              }}
-            >
-              {value.symbol}
-            </ButtonLink>
-          ) : (
-            ''
-          )
-        }
-      />
-      <AgGridColumn
-        flex={2}
-        headerName={t('Market ID')}
-        field="id"
-        hide={window.innerWidth <= BREAKPOINT_MD}
-      />
-      <AgGridColumn
-        colId="actions"
-        headerName=""
-        field="id"
-        cellRenderer={({
-          value,
-        }: VegaICellRendererParams<MarketFieldsFragment, 'id'>) =>
-          value ? (
-            <Link className="underline" to={value}>
-              {t('View details')}
-            </Link>
-          ) : (
-            ''
-          )
-        }
-      />
-    </AgGrid>
-  );
-};

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

@@ -1 +1,45 @@
-export * from './nav';
+import { NavLink } from 'react-router-dom';
+import routerConfig from '../../routes/router-config';
+import classnames from 'classnames';
+
+interface NavProps {
+  menuOpen: boolean;
+}
+
+export const Nav = ({ menuOpen }: NavProps) => {
+  return (
+    <nav className="relative">
+      <div
+        className={classnames(
+          'absolute top-0 z-50 md:static',
+          'w-full p-4 md:border-r border-neutral-700 dark:border-neutral-300',
+          'bg-white dark:bg-black',
+          'transition-[right]',
+          {
+            'right-0 h-[100vh]': menuOpen,
+            'right-[200vw] h-full': !menuOpen,
+          }
+        )}
+      >
+        {routerConfig.map((r) => (
+          <NavLink
+            key={r.name}
+            to={r.path}
+            className={({ isActive }) =>
+              classnames(
+                'block mb-2 px-2',
+                'text-lg hover:bg-vega-pink dark:hover:bg-vega-yellow hover:text-white dark:hover:text-black',
+                {
+                  'bg-vega-pink text-white dark:bg-vega-yellow dark:text-black':
+                    isActive,
+                }
+              )
+            }
+          >
+            {r.text}
+          </NavLink>
+        ))}
+      </div>
+    </nav>
+  );
+};

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

@@ -1,181 +0,0 @@
-import { NavLink, useLocation } from 'react-router-dom';
-import type { Navigable } from '../../routes/router-config';
-import routerConfig from '../../routes/router-config';
-import classnames from 'classnames';
-import { create } from 'zustand';
-import {
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-} from 'react';
-import { Icon } from '@vegaprotocol/ui-toolkit';
-import first from 'lodash/first';
-import last from 'lodash/last';
-import { BREAKPOINT_MD } from '../../config/breakpoints';
-
-type NavStore = {
-  open: boolean;
-  toggle: () => void;
-  hide: () => void;
-};
-
-export const useNavStore = create<NavStore>((set, get) => ({
-  open: false,
-  toggle: () => set({ open: !get().open }),
-  hide: () => set({ open: false }),
-}));
-
-const NavLinks = ({ links }: { links: Navigable[] }) => {
-  const navLinks = links.map((r) => (
-    <li key={r.name}>
-      <NavLink
-        to={r.path}
-        className={({ isActive }) =>
-          classnames(
-            'block mb-2 px-2',
-            'text-lg hover:bg-vega-pink dark:hover:bg-vega-yellow hover:text-white dark:hover:text-black',
-            {
-              'bg-vega-pink text-white dark:bg-vega-yellow dark:text-black':
-                isActive,
-            }
-          )
-        }
-      >
-        {r.text}
-      </NavLink>
-    </li>
-  ));
-
-  return <ul className="pr-8 md:pr-0">{navLinks}</ul>;
-};
-
-export const Nav = () => {
-  const [open, hide] = useNavStore((state) => [state.open, state.hide]);
-  const location = useLocation();
-
-  const navRef = useRef<HTMLElement>(null);
-  const btnRef = useRef<HTMLButtonElement>(null);
-
-  const focusable = useMemo(
-    () =>
-      navRef.current
-        ? [
-            ...(navRef.current.querySelectorAll(
-              'a, button'
-            ) as NodeListOf<HTMLElement>),
-          ]
-        : [],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [navRef.current] // do not remove `navRef.current` from deps
-  );
-
-  const closeNav = useCallback(() => {
-    hide();
-    console.log(focusable);
-    focusable.forEach((fe) =>
-      fe.setAttribute(
-        'tabindex',
-        window.innerWidth > BREAKPOINT_MD ? '0' : '-1'
-      )
-    );
-  }, [focusable, hide]);
-
-  // close navigation when location changes
-  useEffect(() => {
-    closeNav();
-  }, [closeNav, location]);
-
-  useLayoutEffect(() => {
-    if (open) {
-      focusable.forEach((fe) => fe.setAttribute('tabindex', '0'));
-    }
-
-    document.body.style.overflow = open ? 'hidden' : '';
-    const offset =
-      document.querySelector('header')?.getBoundingClientRect().top || 0;
-    if (navRef.current) {
-      navRef.current.style.height = `calc(100vh - ${offset}px)`;
-    }
-
-    // focus current by default
-    if (navRef.current && open) {
-      (navRef.current.querySelector('a[aria-current]') as HTMLElement)?.focus();
-    }
-
-    const closeOnEsc = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
-        closeNav();
-      }
-    };
-
-    // tabbing loop
-    const focusLast = (e: FocusEvent) => {
-      e.preventDefault();
-      const isNavElement =
-        e.relatedTarget && navRef.current?.contains(e.relatedTarget as Node);
-      if (!isNavElement && open) {
-        last(focusable)?.focus();
-      }
-    };
-    const focusFirst = (e: FocusEvent) => {
-      e.preventDefault();
-      const isNavElement =
-        e.relatedTarget && navRef.current?.contains(e.relatedTarget as Node);
-      if (!isNavElement && open) {
-        first(focusable)?.focus();
-      }
-    };
-
-    const resetOnDesktop = () => {
-      focusable.forEach((fe) =>
-        fe.setAttribute(
-          'tabindex',
-          window.innerWidth > BREAKPOINT_MD ? '0' : '-1'
-        )
-      );
-    };
-
-    window.addEventListener('resize', resetOnDesktop);
-
-    first(focusable)?.addEventListener('focusout', focusLast);
-    last(focusable)?.addEventListener('focusout', focusFirst);
-
-    document.addEventListener('keydown', closeOnEsc);
-    return () => {
-      window.removeEventListener('resize', resetOnDesktop);
-      document.removeEventListener('keydown', closeOnEsc);
-      first(focusable)?.removeEventListener('focusout', focusLast);
-      last(focusable)?.removeEventListener('focusout', focusFirst);
-    };
-  }, [closeNav, focusable, open]);
-
-  return (
-    <nav
-      ref={navRef}
-      className={classnames(
-        'absolute top-0 z-20 overflow-y-auto',
-        'transition-[right]',
-        {
-          'right-[-200vw] h-full': !open,
-          'right-0 h-[100vh]': open,
-        },
-        'w-full p-4  border-neutral-700 dark:border-neutral-300',
-        'bg-white dark:bg-black',
-        'md:static md:border-r'
-      )}
-    >
-      <NavLinks links={routerConfig} />
-      <button
-        ref={btnRef}
-        className="absolute top-0 right-0 p-4 md:hidden"
-        onClick={() => {
-          closeNav();
-        }}
-      >
-        <Icon name="cross" />
-      </button>
-    </nav>
-  );
-};

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

@@ -1,227 +0,0 @@
-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/table/index.tsx

@@ -3,7 +3,6 @@ import React from 'react';
 import classnames from 'classnames';
 
 interface TableProps {
-  allowWrap?: boolean;
   children: React.ReactNode;
   className?: string;
 }
@@ -26,15 +25,8 @@ interface TableCellProps extends ThHTMLAttributes<HTMLTableCellElement> {
   modifier?: 'bordered' | 'background';
 }
 
-export const Table = ({
-  allowWrap,
-  children,
-  className,
-  ...props
-}: TableProps) => {
-  const classes = allowWrap
-    ? className
-    : classnames(className, 'overflow-x-auto whitespace-nowrap');
+export const Table = ({ children, className, ...props }: TableProps) => {
+  const classes = classnames(className, 'overflow-x-auto whitespace-nowrap');
   return (
     <div className={classes}>
       <table className="w-full" {...props}>
@@ -45,14 +37,11 @@ export const Table = ({
 };
 
 export const TableWithTbody = ({
-  allowWrap,
   children,
   className,
   ...props
 }: TableProps) => {
-  const classes = allowWrap
-    ? className
-    : classnames(className, 'overflow-x-auto whitespace-nowrap');
+  const classes = classnames(className, 'overflow-x-auto whitespace-nowrap');
   return (
     <div className={classes}>
       <table className="w-full" {...props}>

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

@@ -76,7 +76,9 @@ describe('Chain Event: Builtin asset deposit', () => {
     if (!assetLink.parentElement) {
       throw new Error('Asset link does not exist');
     }
-    expect(assetLink.parentElement.tagName).toEqual('BUTTON');
-    expect(assetLink.parentElement.textContent).toEqual(fullMock.vegaAssetId);
+    expect(assetLink.parentElement.tagName).toEqual('A');
+    expect(assetLink.parentElement.getAttribute('href')).toEqual(
+      `/assets#${fullMock.vegaAssetId}`
+    );
   });
 });

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

@@ -34,7 +34,7 @@ export const TxDetailsChainEventBuiltinDeposit = ({
       <TableRow modifier="bordered">
         <TableCell>{t('Asset')}</TableCell>
         <TableCell>
-          <AssetLink assetId={deposit.vegaAssetId} /> ({t('built in asset')})
+          <AssetLink id={deposit.vegaAssetId} /> ({t('built in asset')})
         </TableCell>
       </TableRow>
       <TableRow modifier="bordered">

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

@@ -82,7 +82,9 @@ describe('Chain Event: Builtin asset withdrawal', () => {
     if (!assetLink.parentElement) {
       throw new Error('Asset link does not exist');
     }
-    expect(assetLink.parentElement.tagName).toEqual('BUTTON');
-    expect(assetLink.parentElement.textContent).toEqual(fullMock.vegaAssetId);
+    expect(assetLink.parentElement.tagName).toEqual('A');
+    expect(assetLink.parentElement.getAttribute('href')).toEqual(
+      `/assets#${fullMock.vegaAssetId}`
+    );
   });
 });

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

@@ -39,8 +39,8 @@ export const TxDetailsChainEventBuiltinWithdrawal = ({
       <TableRow modifier="bordered">
         <TableCell>{t('Asset')}</TableCell>
         <TableCell>
-          <AssetLink assetId={withdrawal.vegaAssetId || ''} /> (
-          {t('built in asset')})
+          <AssetLink id={withdrawal.vegaAssetId || ''} /> ({t('built in asset')}
+          )
         </TableCell>
       </TableRow>
       <TableRow modifier="bordered">

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

@@ -63,7 +63,9 @@ describe('Chain Event: ERC20 Asset Delist', () => {
     if (!assetLink.parentElement) {
       throw new Error('Asset link does not exist');
     }
-    expect(assetLink.parentElement.tagName).toEqual('BUTTON');
-    expect(assetLink.parentElement.textContent).toEqual(fullMock.vegaAssetId);
+    expect(assetLink.parentElement.tagName).toEqual('A');
+    expect(assetLink.parentElement.getAttribute('href')).toEqual(
+      `/assets#${fullMock.vegaAssetId}`
+    );
   });
 });

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

@@ -29,7 +29,7 @@ export const TxDetailsChainEventErc20AssetDelist = ({
       <TableRow modifier="bordered">
         <TableCell>{t('Removed Vega asset')}</TableCell>
         <TableCell>
-          <AssetLink assetId={assetDelist.vegaAssetId || ''} />
+          <AssetLink id={assetDelist.vegaAssetId || ''} />
         </TableCell>
       </TableRow>
     </>

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

@@ -79,8 +79,10 @@ describe('Chain Event: ERC20 Asset limits updated', () => {
     if (!assetLink.parentElement) {
       throw new Error('Asset link does not exist');
     }
-    expect(assetLink.parentElement.tagName).toEqual('BUTTON');
-    expect(assetLink.parentElement.textContent).toEqual(fullMock.vegaAssetId);
+    expect(assetLink.parentElement.tagName).toEqual('A');
+    expect(assetLink.parentElement.getAttribute('href')).toEqual(
+      `/assets#${fullMock.vegaAssetId}`
+    );
 
     expect(screen.getByText(t('ERC20 asset'))).toBeInTheDocument();
     const ethLink = screen.getByText(`${fullMock.sourceEthereumAddress}`);

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

@@ -51,7 +51,7 @@ export const TxDetailsChainEventErc20AssetLimitsUpdated = ({
       <TableRow modifier="bordered">
         <TableCell>{t('Vega asset')}</TableCell>
         <TableCell>
-          <AssetLink assetId={assetLimitsUpdated.vegaAssetId} />
+          <AssetLink id={assetLimitsUpdated.vegaAssetId} />
         </TableCell>
       </TableRow>
       <TableRow modifier="bordered">

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

@@ -65,8 +65,10 @@ describe('Chain Event: ERC20 Asset List', () => {
     if (!assetLink.parentElement) {
       throw new Error('Asset link does not exist');
     }
-    expect(assetLink.parentElement.tagName).toEqual('BUTTON');
-    expect(assetLink.parentElement.textContent).toEqual(fullMock.vegaAssetId);
+    expect(assetLink.parentElement.tagName).toEqual('A');
+    expect(assetLink.parentElement.getAttribute('href')).toEqual(
+      `/assets#${fullMock.vegaAssetId}`
+    );
 
     expect(screen.getByText(t('Source'))).toBeInTheDocument();
     const ethLink = screen.getByText(`${fullMock.assetSource}`);

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

@@ -41,7 +41,7 @@ export const TxDetailsChainEventErc20AssetList = ({
       <TableRow modifier="bordered">
         <TableCell>{t('Added Vega asset')}</TableCell>
         <TableCell>
-          <AssetLink assetId={assetList.vegaAssetId} />
+          <AssetLink id={assetList.vegaAssetId} />
         </TableCell>
       </TableRow>
     </>

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

@@ -75,8 +75,10 @@ describe('Chain Event: ERC20 asset deposit', () => {
     if (!assetLink.parentElement) {
       throw new Error('Asset link does not exist');
     }
-    expect(assetLink.parentElement.tagName).toEqual('BUTTON');
-    expect(assetLink.parentElement.textContent).toEqual(fullMock.vegaAssetId);
+    expect(assetLink.parentElement.tagName).toEqual('A');
+    expect(assetLink.parentElement.getAttribute('href')).toEqual(
+      `/assets#${fullMock.vegaAssetId}`
+    );
 
     expect(screen.getByText(t('Source'))).toBeInTheDocument();
     const ethLink = screen.getByText(`${fullMock.sourceEthereumAddress}`);

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

@@ -51,7 +51,7 @@ export const TxDetailsChainEventDeposit = ({
       <TableRow modifier="bordered">
         <TableCell>{t('Asset')}</TableCell>
         <TableCell>
-          <AssetLink assetId={deposit.vegaAssetId} />
+          <AssetLink id={deposit.vegaAssetId} />
         </TableCell>
       </TableRow>
       <TableRow modifier="bordered">

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

@@ -60,8 +60,10 @@ describe('Chain Event: ERC20 asset deposit', () => {
     if (!assetLink.parentElement) {
       throw new Error('Asset link does not exist');
     }
-    expect(assetLink.parentElement.tagName).toEqual('BUTTON');
-    expect(assetLink.parentElement.textContent).toEqual(fullMock.vegaAssetId);
+    expect(assetLink.parentElement.tagName).toEqual('A');
+    expect(assetLink.parentElement.getAttribute('href')).toEqual(
+      `/assets#${fullMock.vegaAssetId}`
+    );
 
     expect(screen.getByText(t('Recipient'))).toBeInTheDocument();
     const ethLink = screen.getByText(`${fullMock.targetEthereumAddress}`);

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

@@ -45,7 +45,7 @@ export const TxDetailsChainEventWithdrawal = ({
       <TableRow modifier="bordered">
         <TableCell>{t('Asset')}</TableCell>
         <TableCell>
-          <AssetLink assetId={withdrawal.vegaAssetId} />
+          <AssetLink id={withdrawal.vegaAssetId} />
         </TableCell>
       </TableRow>
     </>

apps/explorer/src/app/components/txs/details/state-variable/bound-factors.spec.tsx

@@ -1,108 +0,0 @@
-import { getValues } from './bound-factors';
-import type { components } from '../../../../../types/explorer';
-
-type KeyValueBundle = components['schemas']['vegaKeyValueBundle'][];
-
-describe('getValues', () => {
-  it('handles an empty array by returning a dashed template', () => {
-    const res = getValues([]);
-    expect(res).toHaveProperty('down');
-    expect(res.down).toHaveProperty('tolerance', '-');
-    expect(res.down).toHaveProperty('value', '-');
-    expect(res).toHaveProperty('up');
-    expect(res.up).toHaveProperty('tolerance', '-');
-    expect(res.up).toHaveProperty('value', '-');
-  });
-
-  it('handles undefined', () => {
-    const res = getValues(undefined as unknown as KeyValueBundle);
-    expect(res).toHaveProperty('down');
-    expect(res.down).toHaveProperty('tolerance', '-');
-    expect(res.down).toHaveProperty('value', '-');
-    expect(res).toHaveProperty('up');
-    expect(res.up).toHaveProperty('tolerance', '-');
-    expect(res.up).toHaveProperty('value', '-');
-  });
-
-  it('handles a kvb that only has one side (should not happen)', () => {
-    const k: KeyValueBundle = [
-      {
-        key: 'up',
-        tolerance: '0.1',
-        value: { vectorVal: { value: ['0.123'] } },
-      },
-    ];
-
-    const res = getValues(k);
-    expect(res).toHaveProperty('down');
-    expect(res.down).toHaveProperty('tolerance', '-');
-    expect(res.down).toHaveProperty('value', '-');
-    expect(res).toHaveProperty('up');
-    expect(res.up).toHaveProperty('tolerance', '0.1');
-    expect(res.up).toHaveProperty('value', '0.123');
-  });
-
-  it('handles a kvb that has a matrixVal instead of a scalarval by ignoring it', () => {
-    const k: KeyValueBundle = [
-      {
-        key: 'up',
-        tolerance: '0.1',
-        value: { matrixVal: { value: [{ value: ['0.123'] }] } },
-      },
-    ];
-
-    const res = getValues(k);
-    expect(res).toHaveProperty('down');
-    expect(res.down).toHaveProperty('tolerance', '-');
-    expect(res.down).toHaveProperty('value', '-');
-    expect(res).toHaveProperty('up');
-    expect(res.up).toHaveProperty('tolerance', '0.1');
-    expect(res.up).toHaveProperty('value', '-');
-  });
-
-  it('ignores unexpected extra values in the kvb', () => {
-    const k: KeyValueBundle = [
-      {
-        key: 'up',
-        tolerance: '0.1',
-        value: { vectorVal: { value: ['0.123', '0.77'] } },
-      },
-      {
-        key: 'down',
-        tolerance: '0.001',
-        value: { vectorVal: { value: ['0.321'] } },
-      },
-    ];
-
-    const res = getValues(k);
-    expect(res).toHaveProperty('down');
-    expect(res.down).toHaveProperty('tolerance', '0.001');
-    expect(res.down).toHaveProperty('value', '0.321');
-    expect(res).toHaveProperty('up');
-    expect(res.up).toHaveProperty('tolerance', '0.1');
-    expect(res.up).toHaveProperty('value', '0.123');
-  });
-
-  it('handles a full kvb', () => {
-    const k: KeyValueBundle = [
-      {
-        key: 'up',
-        tolerance: '0.1',
-        value: { vectorVal: { value: ['0.123'] } },
-      },
-      {
-        key: 'down',
-        tolerance: '0.001',
-        value: { vectorVal: { value: ['0.321'] } },
-      },
-    ];
-
-    const res = getValues(k);
-    expect(res).toHaveProperty('down');
-    expect(res.down).toHaveProperty('tolerance', '0.001');
-    expect(res.down).toHaveProperty('value', '0.321');
-    expect(res).toHaveProperty('up');
-    expect(res.up).toHaveProperty('tolerance', '0.1');
-    expect(res.up).toHaveProperty('value', '0.123');
-  });
-});

apps/explorer/src/app/components/txs/details/state-variable/bound-factors.tsx

@@ -1,87 +0,0 @@
-import { t } from '@vegaprotocol/react-helpers';
-import type { components } from '../../../../../types/explorer';
-import { Table, TableRow, TableHeader, TableCell } from '../../../table';
-
-interface StateVariableProposalBoundFactorsProps {
-  kvb: readonly components['schemas']['vegaKeyValueBundle'][];
-}
-
-/**
- * A dumb as rocks function completely tied to what the structure of this variable should be
- * @param kvb The key/value bundle
- * @returns Object
- */
-export function getValues(kvb: StateVariableProposalBoundFactorsProps['kvb']) {
-  const template = {
-    up: {
-      tolerance: '-',
-      value: '-',
-    },
-    down: {
-      tolerance: '-',
-      value: '-',
-    },
-  };
-
-  if (kvb && kvb.length > 0) {
-    kvb.forEach((v) => {
-      if (v.key === 'up') {
-        template.up.tolerance = v.tolerance || '-';
-        template.up.value = v.value?.vectorVal?.value
-          ? v.value?.vectorVal.value[0]
-          : '-';
-      } else if (v.key === 'down') {
-        template.down.tolerance = v.tolerance || '-';
-        template.down.value = v.value?.vectorVal?.value
-          ? v.value?.vectorVal.value[0]
-          : '-';
-      }
-    });
-  }
-
-  return template;
-}
-
-/**
- * State Variable proposals updating Bound Factors. This contains two bundles,
- * an up vector and a down vector
- *
- * This is nearly identical to risk factors.
- */
-export const StateVariableProposalBoundFactors = ({
-  kvb,
-}: StateVariableProposalBoundFactorsProps) => {
-  const v = getValues(kvb);
-
-  return (
-    <Table allowWrap={true} className="w-1/3">
-      <thead>
-        <TableRow modifier="bordered">
-          <TableHeader align="left">{t('Parameter')}</TableHeader>
-          <TableHeader align="center">{t('New value')}</TableHeader>
-          <TableHeader align="right">{t('Tolerance')}</TableHeader>
-        </TableRow>
-      </thead>
-      <tbody>
-        <TableRow modifier="bordered">
-          <TableCell>{t('Up')}</TableCell>
-          <TableCell align="right" className="font-mono">
-            {v.up.value}
-          </TableCell>
-          <TableCell align="right" className="font-mono">
-            {v.up.tolerance}
-          </TableCell>
-        </TableRow>
-        <TableRow modifier="bordered">
-          <TableCell>{t('Down')}</TableCell>
-          <TableCell align="right" className="font-mono">
-            {v.down.value}
-          </TableCell>
-          <TableCell align="right" className="font-mono">
-            {v.down.tolerance}
-          </TableCell>
-        </TableRow>
-      </tbody>
-    </Table>
-  );
-};

apps/explorer/src/app/components/txs/details/state-variable/data-wrapper.tsx

@@ -1,31 +0,0 @@
-import type { components } from '../../../../../types/explorer';
-import { StateVariableProposalUnknown } from './unknown';
-import { StateVariableProposalBoundFactors } from './bound-factors';
-import { StateVariableProposalRiskFactors } from './risk-factors';
-
-interface StateVariableProposalWrapperProps {
-  stateVariable: string | undefined;
-  kvb: readonly components['schemas']['vegaKeyValueBundle'][] | undefined;
-}
-
-/**
- * State Variable proposals
- */
-export const StateVariableProposalWrapper = ({
-  stateVariable,
-  kvb,
-}: StateVariableProposalWrapperProps) => {
-  if (!stateVariable || !kvb || kvb.length === 0) {
-    return null;
-  }
-
-  if (stateVariable.indexOf('bound-factors') !== -1) {
-    return <StateVariableProposalBoundFactors kvb={kvb} />;
-  } else if (stateVariable.indexOf('risk-factors') !== -1) {
-    return <StateVariableProposalRiskFactors kvb={kvb} />;
-  } else if (stateVariable.indexOf('probability_of_trading') !== -1) {
-    return <StateVariableProposalRiskFactors kvb={kvb} />;
-  } else {
-    return <StateVariableProposalUnknown kvb={kvb} />;
-  }
-};

apps/explorer/src/app/components/txs/details/state-variable/risk-factors.tsx

@@ -1,124 +0,0 @@
-import { t } from '@vegaprotocol/react-helpers';
-import zip from 'lodash/zip';
-import type { components } from '../../../../../types/explorer';
-import { Table, TableRow, TableHeader, TableCell } from '../../../table';
-import { StateVariableProposalUnknown } from './unknown';
-
-interface StateVariableProposalRiskFactorsProps {
-  kvb: readonly components['schemas']['vegaKeyValueBundle'][];
-}
-
-/**
- * A dumb as rocks function completely tied to what the structure of this variable should be
- *
- * @param kvb The key/value bundle
- * @returns Object
- */
-export function getValues(kvb: StateVariableProposalRiskFactorsProps['kvb']) {
-  try {
-    const template = {
-      bid: {
-        offsetTolerance: '-',
-        probabilityTolerance: '-',
-        offset: [] as Readonly<string[]>,
-        probability: [] as Readonly<string[]>,
-        rows: [] as [string | undefined, string | undefined][],
-      },
-      ask: {
-        offsetTolerance: '-',
-        probabilityTolerance: '-',
-        offset: [] as Readonly<string[]>,
-        probability: [] as Readonly<string[]>,
-        rows: [] as [string | undefined, string | undefined][],
-      },
-    };
-
-    kvb.forEach((v) => {
-      if (v.key === 'bidOffset') {
-        template.bid.offsetTolerance = v.tolerance || '-';
-        template.bid.offset = v.value?.vectorVal?.value
-          ? v.value?.vectorVal?.value
-          : ['0'];
-      } else if (v.key === 'bidProbability') {
-        template.bid.probabilityTolerance = v.tolerance || '-';
-        template.bid.probability = v.value?.vectorVal?.value
-          ? v.value?.vectorVal?.value
-          : ['0'];
-      } else if (v.key === 'askOffset') {
-        template.ask.offsetTolerance = v.tolerance || '-';
-        template.ask.offset = v.value?.vectorVal?.value
-          ? v.value?.vectorVal?.value
-          : ['0'];
-      } else if (v.key === 'askProbability') {
-        template.ask.probabilityTolerance = v.tolerance || '-';
-        template.ask.probability = v.value?.vectorVal?.value
-          ? v.value?.vectorVal?.value
-          : ['0'];
-      }
-    });
-
-    // Bundles up offset and probability in to a row
-    if (template.bid.offset.length > 0 && template.bid.probability.length > 0) {
-      template.bid.rows = zip(template.bid.offset, template.bid.probability);
-    }
-    if (template.ask.offset.length > 0 && template.ask.probability.length > 0) {
-      template.ask.rows = zip(template.ask.offset, template.ask.probability);
-    }
-
-    return template;
-  } catch (e) {
-    // This will result in the table not being rendered
-    return null;
-  }
-}
-
-/**
- * State Variable proposals updating Risk Factors. This contains two bundles,
- * a long vector and a short vector
- */
-export const StateVariableProposalRiskFactors = ({
-  kvb,
-}: StateVariableProposalRiskFactorsProps) => {
-  const v = getValues(kvb);
-  const all = v ? zip(v.bid.rows, v.ask.rows) : [];
-
-  if (all.length === 0) {
-    // Give up, do a JSON view
-    return <StateVariableProposalUnknown kvb={kvb} />;
-  }
-
-  return (
-    <Table allowWrap={true} className="text-xs lg:text-base max-w-2xl">
-      <thead>
-        <TableRow modifier="bordered">
-          <TableHeader align="left">{t('Mid offset')}</TableHeader>
-          <TableHeader align="right">{t('Bid probability')}</TableHeader>
-          <TableHeader align="right" className="pl-2">
-            {t('Ask probability')}
-          </TableHeader>
-        </TableRow>
-      </thead>
-      <tbody>
-        {all.map((r) => {
-          // Simple remapping of the data to protect against undefineds
-          const row = {
-            o: r[0] ? r[0][0] : r[1] ? r[1][0] : '-',
-            b: r[0] ? r[0][1] : '-',
-            a: r[1] ? r[1][1] : '-',
-          };
-          return (
-            <TableRow key={`${row.o}${row.b}${row.a}`}>
-              <TableCell align="left">{row.o}</TableCell>
-              <TableCell align="right" className="font-mono">
-                {row.b}
-              </TableCell>
-              <TableCell align="right" className="pl-2 font-mono">
-                {row.a}
-              </TableCell>
-            </TableRow>
-          );
-        })}
-      </tbody>
-    </Table>
-  );
-};

apps/explorer/src/app/components/txs/details/state-variable/rist-factors.spec.tsx

@@ -1,168 +0,0 @@
-import { getValues, StateVariableProposalRiskFactors } from './risk-factors';
-import type { components } from '../../../../../types/explorer';
-import { render } from '@testing-library/react';
-
-type kvb = components['schemas']['vegaKeyValueBundle'][];
-
-describe('Risk Factors: getValues', () => {
-  it('returns null if null is passed in', () => {
-    const res = getValues(null as unknown as kvb);
-    expect(res).toBeNull();
-  });
-
-  it('returns a blank template if kvb is empty', () => {
-    const res = getValues([]);
-    expect(res).not.toBeNull();
-    expect(res?.bid.offsetTolerance).toEqual('-');
-    expect(res?.bid.probabilityTolerance).toEqual('-');
-    expect(res?.bid.probability).toEqual([]);
-    expect(res?.bid.offset).toEqual([]);
-    expect(res?.bid.rows.length).toEqual(0);
-
-    expect(res?.ask.offsetTolerance).toEqual('-');
-    expect(res?.ask.probabilityTolerance).toEqual('-');
-    expect(res?.ask.probability).toEqual([]);
-    expect(res?.ask.offset).toEqual([]);
-    expect(res?.ask.rows.length).toEqual(0);
-  });
-
-  it('parses out a correct bid offset and probability', () => {
-    const k: kvb = [
-      {
-        key: 'bidOffset',
-        value: { vectorVal: { value: ['1'] } },
-      },
-      {
-        key: 'bidProbability',
-        value: { vectorVal: { value: ['2'] } },
-      },
-    ];
-
-    const res = getValues(k);
-    expect(res?.bid.offset).toEqual(['1']);
-    expect(res?.bid.probability).toEqual(['2']);
-    expect(res?.bid.rows).toEqual([['1', '2']]);
-  });
-
-  it('parses out a correct ask offset and probability', () => {
-    const k: kvb = [
-      {
-        key: 'askOffset',
-        value: { vectorVal: { value: ['1'] } },
-      },
-      {
-        key: 'askProbability',
-        value: { vectorVal: { value: ['2'] } },
-      },
-    ];
-
-    const res = getValues(k);
-    expect(res?.ask.offset).toEqual(['1']);
-    expect(res?.ask.probability).toEqual(['2']);
-    expect(res?.ask.rows).toEqual([['1', '2']]);
-  });
-
-  it('parses out a correct ask/bid offset and probability', () => {
-    const k: kvb = [
-      {
-        key: 'askOffset',
-        value: { vectorVal: { value: ['1'] } },
-      },
-      {
-        key: 'askProbability',
-        value: { vectorVal: { value: ['2'] } },
-      },
-      {
-        key: 'bidOffset',
-        value: { vectorVal: { value: ['3'] } },
-      },
-      {
-        key: 'bidProbability',
-        value: { vectorVal: { value: ['4'] } },
-      },
-    ];
-
-    const res = getValues(k);
-    expect(res?.ask.rows).toEqual([['1', '2']]);
-    expect(res?.bid.rows).toEqual([['3', '4']]);
-  });
-});
-
-describe('Risk Factors: component', () => {
-  it('renders 3 rows correctly', () => {
-    const k: kvb = [
-      {
-        key: 'askOffset',
-        value: { vectorVal: { value: ['1.1', '1.2', '1.3'] } },
-      },
-      {
-        key: 'askProbability',
-        value: { vectorVal: { value: ['2.2', '2.3', '2.4'] } },
-      },
-      {
-        key: 'bidOffset',
-        value: { vectorVal: { value: ['1.1', '1.2', '1.3'] } },
-      },
-      {
-        key: 'bidProbability',
-        value: { vectorVal: { value: ['4.4', '4.5', '4.6'] } },
-      },
-    ];
-
-    const screen = render(<StateVariableProposalRiskFactors kvb={k} />);
-    expect(screen.getByText('Mid offset')).toBeInTheDocument();
-    expect(screen.getByText('Bid probability')).toBeInTheDocument();
-    expect(screen.getByText('Ask probability')).toBeInTheDocument();
-    // First row
-    expect(screen.getByText('1.1')).toBeInTheDocument();
-    expect(screen.getByText('2.2')).toBeInTheDocument();
-    expect(screen.getByText('4.4')).toBeInTheDocument();
-    // Second row
-    expect(screen.getByText('1.2')).toBeInTheDocument();
-    expect(screen.getByText('2.3')).toBeInTheDocument();
-    expect(screen.getByText('4.5')).toBeInTheDocument();
-    // Third row
-    expect(screen.getByText('1.3')).toBeInTheDocument();
-    expect(screen.getByText('2.4')).toBeInTheDocument();
-    expect(screen.getByText('4.6')).toBeInTheDocument();
-  });
-
-  it('renders uneven row counts correctly', () => {
-    const k: kvb = [
-      {
-        key: 'askOffset',
-        value: { vectorVal: { value: ['1.1'] } },
-      },
-      {
-        key: 'askProbability',
-        value: { vectorVal: { value: ['2.2'] } },
-      },
-      {
-        key: 'bidOffset',
-        value: { vectorVal: { value: ['1.1', '1.2', '1.3'] } },
-      },
-      {
-        key: 'bidProbability',
-        value: { vectorVal: { value: ['4.4', '4.5', '4.6'] } },
-      },
-    ];
-
-    const screen = render(<StateVariableProposalRiskFactors kvb={k} />);
-    expect(screen.getByText('Mid offset')).toBeInTheDocument();
-    expect(screen.getByText('Bid probability')).toBeInTheDocument();
-    expect(screen.getByText('Ask probability')).toBeInTheDocument();
-    // First row, as previous test
-    expect(screen.getByText('1.1')).toBeInTheDocument();
-    expect(screen.getByText('2.2')).toBeInTheDocument();
-    expect(screen.getByText('4.4')).toBeInTheDocument();
-    // Second row - offset comes from bid, not ask
-    expect(screen.getByText('1.2')).toBeInTheDocument();
-    expect(screen.getByText('4.5')).toBeInTheDocument();
-    // Third row
-    expect(screen.getByText('1.3')).toBeInTheDocument();
-    expect(screen.getByText('4.6')).toBeInTheDocument();
-
-    // The askOffset levels without a probability render -
-    expect(screen.getAllByText('-')).toHaveLength(2);
-  });
-});

apps/explorer/src/app/components/txs/details/state-variable/trading-probability.tsx

@@ -1,52 +0,0 @@
-import { t } from '@vegaprotocol/react-helpers';
-import type { components } from '../../../../../types/explorer';
-import { Table, TableRow, TableHeader, TableCell } from '../../../table';
-import { getValues } from './bound-factors';
-
-interface StateVariableProposalBoundFactorsProps {
-  kvb: readonly components['schemas']['vegaKeyValueBundle'][];
-}
-
-/**
- * State Variable proposals updating Bound Factors. This contains two bundles,
- * an up vector and a down vector
- *
- * This is nearly identical to risk factors.
- */
-export const StateVariableProposalBoundFactors = ({
-  kvb,
-}: StateVariableProposalBoundFactorsProps) => {
-  const v = getValues(kvb);
-
-  return (
-    <Table allowWrap={true} className="w-1/3">
-      <thead>
-        <TableRow modifier="bordered">
-          <TableHeader align="left">{t('Parameter')}</TableHeader>
-          <TableHeader align="center">{t('New value')}</TableHeader>
-          <TableHeader align="right">{t('Tolerance')}</TableHeader>
-        </TableRow>
-      </thead>
-      <tbody>
-        <TableRow modifier="bordered">
-          <TableCell>{t('Up')}</TableCell>
-          <TableCell align="right" className="font-mono">
-            {v.up.value}
-          </TableCell>
-          <TableCell align="right" className="font-mono">
-            {v.up.tolerance}
-          </TableCell>
-        </TableRow>
-        <TableRow modifier="bordered">
-          <TableCell>{t('Down')}</TableCell>
-          <TableCell align="right" className="font-mono">
-            {v.down.value}
-          </TableCell>
-          <TableCell align="right" className="font-mono">
-            {v.down.tolerance}
-          </TableCell>
-        </TableRow>
-      </tbody>
-    </Table>
-  );
-};

apps/explorer/src/app/components/txs/details/state-variable/unknown.tsx

@@ -1,16 +0,0 @@
-import { SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
-import type { components } from '../../../../../types/explorer';
-
-interface StateVariableProposalUnknownProps {
-  kvb: readonly components['schemas']['vegaKeyValueBundle'][];
-}
-
-/**
- * State Variable proposals of an unknown type. Let's just dump
- * it out.
- */
-export const StateVariableProposalUnknown = ({
-  kvb,
-}: StateVariableProposalUnknownProps) => {
-  return <SyntaxHighlighter data={kvb} />;
-};

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

@@ -53,7 +53,7 @@ export const TxDetailsBatch = ({
   let index = 0;
   return (
     <div key={`tx-${index}`}>
-      <TableWithTbody className="mb-8" allowWrap={true}>
+      <TableWithTbody className="mb-8">
         <TxDetailsShared
           txData={txData}
           pubKey={pubKey}

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

@@ -32,7 +32,7 @@ export const TxDetailsChainEvent = ({
   }
 
   return (
-    <TableWithTbody className="mb-8" allowWrap={true}>
+    <TableWithTbody className="mb-8">
       <TxDetailsShared txData={txData} pubKey={pubKey} blockData={blockData} />
       <ChainEvent txData={txData} />
     </TableWithTbody>

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

@@ -38,7 +38,7 @@ export const TxDetailsDataSubmission = ({
 
   return (
     <>
-      <TableWithTbody className="mb-8" allowWrap={true}>
+      <TableWithTbody className="mb-8">
         <TxDetailsShared
           txData={txData}
           pubKey={pubKey}

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

@@ -35,7 +35,7 @@ export const TxDetailsDelegate = ({
     txData.command.delegateSubmission;
 
   return (
-    <TableWithTbody className="mb-8" allowWrap={true}>
+    <TableWithTbody className="mb-8">
       <TxDetailsShared txData={txData} pubKey={pubKey} blockData={blockData} />
       {d.nodeId ? (
         <TableRow modifier="bordered">

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

@@ -21,8 +21,6 @@ import { TxDetailsDataSubmission } from './tx-data-submission';
 import { TxProposalVote } from './tx-proposal-vote';
 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';
 
 interface TxDetailsWrapperProps {
   txData: BlockExplorerTransactionResult | undefined;
@@ -70,8 +68,6 @@ function getTransactionComponent(txData?: BlockExplorerTransactionResult) {
 
   // These come from https://github.com/vegaprotocol/vega/blob/develop/core/txn/command.go#L72-L98
   switch (txData.type) {
-    case 'Register new Node':
-      return TxDetailsNodeAnnounce;
     case 'Issue Signatures':
       return TxDetailsIssueSignatures;
     case 'Submit Order':
@@ -106,8 +102,6 @@ function getTransactionComponent(txData?: BlockExplorerTransactionResult) {
       return TxDetailsDelegate;
     case 'Undelegate':
       return TxDetailsUndelegate;
-    case 'State Variable Proposal':
-      return TxDetailsStateVariable;
     default:
       return TxDetailsGeneric;
   }

apps/explorer/src/app/components/txs/details/tx-eth-key-rotate.tsx

@@ -1,80 +0,0 @@
-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 { TxDetailsShared } from './shared/tx-details-shared';
-import { TableCell, TableRow, TableWithTbody } from '../../table';
-import type { components } from '../../../../types/explorer';
-import {
-  EthExplorerLink,
-  EthExplorerLinkTypes,
-} from '../../links/eth-explorer-link/eth-explorer-link';
-import { BlockLink } from '../../links';
-
-type EthKeyRotate = components['schemas']['v1EthereumKeyRotateSubmission'];
-interface TxDetailsEthKeyRotateProps {
-  txData: BlockExplorerTransactionResult | undefined;
-  pubKey: string | undefined;
-  blockData: TendermintBlocksResponse | undefined;
-}
-
-/**
- * A node is changing ethereum key
- */
-export const TxDetailsEthKeyRotate = ({
-  txData,
-  pubKey,
-  blockData,
-}: TxDetailsEthKeyRotateProps) => {
-  if (!txData) {
-    return <>{t('Awaiting Block Explorer transaction details')}</>;
-  }
-
-  const k: EthKeyRotate = txData.command;
-
-  return (
-    <TableWithTbody className="mb-8">
-      <TxDetailsShared txData={txData} pubKey={pubKey} blockData={blockData} />
-      {k.targetBlock ? (
-        <TableRow modifier="bordered">
-          <TableCell>{t('Target block')}</TableCell>
-          <TableCell>
-            <BlockLink height={k.targetBlock} />
-          </TableCell>
-        </TableRow>
-      ) : null}
-      {k.currentAddress ? (
-        <TableRow modifier="bordered">
-          <TableCell>{t('Old Address')}</TableCell>
-          <TableCell>
-            <EthExplorerLink
-              type={EthExplorerLinkTypes.address}
-              id={k.currentAddress}
-            />
-          </TableCell>
-        </TableRow>
-      ) : null}
-      {k.newAddress ? (
-        <TableRow modifier="bordered">
-          <TableCell>{t('New Address')}</TableCell>
-          <TableCell>
-            <EthExplorerLink
-              type={EthExplorerLinkTypes.address}
-              id={k.newAddress}
-            />
-          </TableCell>
-        </TableRow>
-      ) : null}
-      {k.submitterAddress ? (
-        <TableRow modifier="bordered">
-          <TableCell>{t('Submitter address')}</TableCell>
-          <TableCell>
-            <EthExplorerLink
-              type={EthExplorerLinkTypes.address}
-              id={k.submitterAddress}
-            />
-          </TableCell>
-        </TableRow>
-      ) : null}
-    </TableWithTbody>
-  );
-};

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

@@ -23,7 +23,7 @@ export const TxDetailsGeneric = ({
   }
 
   return (
-    <TableWithTbody className="mb-8" allowWrap={true}>
+    <TableWithTbody className="mb-8">
       <TxDetailsShared txData={txData} pubKey={pubKey} blockData={blockData} />
     </TableWithTbody>
   );

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

@@ -60,7 +60,7 @@ export const TxDetailsHeartbeat = ({
   const blockHeight = txData.command.blockHeight || '';
 
   return (
-    <TableWithTbody className="mb-8" allowWrap={true}>
+    <TableWithTbody className="mb-8">
       <TxDetailsShared txData={txData} pubKey={pubKey} blockData={blockData} />
       <TableRow modifier="bordered">
         <TableCell>{t('Node')}</TableCell>

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

@@ -1,67 +0,0 @@
-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 { TxDetailsShared } from './shared/tx-details-shared';
-import { TableCell, TableRow, TableWithTbody } from '../../table';
-import type { components } from '../../../../types/explorer';
-import { BlockLink, PartyLink } from '../../links';
-
-type KeyRotate = components['schemas']['v1KeyRotateSubmission'];
-interface TxDetailsKeyRotateProps {
-  txData: BlockExplorerTransactionResult | undefined;
-  pubKey: string | undefined;
-  blockData: TendermintBlocksResponse | undefined;
-}
-
-/**
- * A node is changing Vega key
- */
-export const TxDetailsKeyRotate = ({
-  txData,
-  pubKey,
-  blockData,
-}: TxDetailsKeyRotateProps) => {
-  if (!txData) {
-    return <>{t('Awaiting Block Explorer transaction details')}</>;
-  }
-
-  const k: KeyRotate = txData.command;
-
-  return (
-    <TableWithTbody className="mb-8">
-      <TxDetailsShared txData={txData} pubKey={pubKey} blockData={blockData} />
-      {k.targetBlock ? (
-        <TableRow modifier="bordered">
-          <TableCell>{t('Target block')}</TableCell>
-          <TableCell>
-            <BlockLink height={k.targetBlock} />
-          </TableCell>
-        </TableRow>
-      ) : null}
-      {k.currentPubKeyHash ? (
-        <TableRow modifier="bordered">
-          <TableCell>{t('Old Address')}</TableCell>
-          <TableCell>
-            <PartyLink id={k.currentPubKeyHash} />
-          </TableCell>
-        </TableRow>
-      ) : null}
-      {k.currentPubKeyHash ? (
-        <TableRow modifier="bordered">
-          <TableCell>{t('New Address')}</TableCell>
-          <TableCell>
-            <PartyLink id={k.currentPubKeyHash} />
-          </TableCell>
-        </TableRow>
-      ) : null}
-      {k.newPubKeyIndex ? (
-        <TableRow modifier="bordered">
-          <TableCell>{t('Key index')}</TableCell>
-          <TableCell>
-            <code>{k.newPubKeyIndex}</code>
-          </TableCell>
-        </TableRow>
-      ) : null}
-    </TableWithTbody>
-  );
-};

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

@@ -36,7 +36,7 @@ export const TxDetailsLiquidityAmendment = ({
 
   return (
     <>
-      <TableWithTbody className="mb-8" allowWrap={true}>
+      <TableWithTbody className="mb-8">
         <TxDetailsShared
           txData={txData}
           pubKey={pubKey}

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

@@ -37,7 +37,7 @@ export const TxDetailsLiquidityCancellation = ({
   const marketId: string = cancel.marketId || '-';
 
   return (
-    <TableWithTbody className="mb-8" allowWrap={true}>
+    <TableWithTbody className="mb-8">
       <TxDetailsShared txData={txData} pubKey={pubKey} blockData={blockData} />
       <TableRow modifier="bordered">
         <TableCell>{t('Market')}</TableCell>

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

@@ -35,7 +35,7 @@ export const TxDetailsLiquiditySubmission = ({
 
   return (
     <>
-      <TableWithTbody className="mb-8" allowWrap={true}>
+      <TableWithTbody className="mb-8">
         <TxDetailsShared
           txData={txData}
           pubKey={pubKey}

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

@@ -1,112 +0,0 @@
-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 { TxDetailsShared } from './shared/tx-details-shared';
-import { TableRow, TableCell, TableWithTbody } from '../../table';
-
-import type { components } from '../../../../types/explorer';
-import {
-  EthExplorerLink,
-  EthExplorerLinkTypes,
-} from '../../links/eth-explorer-link/eth-explorer-link';
-import { PartyLink } from '../../links';
-import Hash from '../../links/hash';
-import { ExternalLink } from '@vegaprotocol/ui-toolkit';
-
-type Command = components['schemas']['v1AnnounceNode'];
-
-interface TxDetailsNodeAnnounceProps {
-  txData: BlockExplorerTransactionResult | undefined;
-  pubKey: string | undefined;
-  blockData: TendermintBlocksResponse | undefined;
-}
-
-/**
- * When a new potential validator node comes online, it announces
- * itself with this transaction.
- *
- * Design decisions:
- * - Signatures are not rendered. You can still access them via the
- *   TX details. This is consistent with explorers for other chains
- * - The avatar icon is rendered as a link rather than embedding
- */
-export const TxDetailsNodeAnnounce = ({
-  txData,
-  pubKey,
-  blockData,
-}: TxDetailsNodeAnnounceProps) => {
-  if (!txData) {
-    return <>{t('Awaiting Block Explorer transaction details')}</>;
-  }
-
-  const cmd: Command = txData.command.announceNode;
-
-  return (
-    <TableWithTbody className="mb-8">
-      <TxDetailsShared txData={txData} pubKey={pubKey} blockData={blockData} />
-      {cmd.name ? (
-        <TableRow modifier="bordered">
-          <TableCell>{t('Name')}</TableCell>
-          <TableCell>
-            <span>{cmd.name}</span>
-          </TableCell>
-        </TableRow>
-      ) : null}
-      {cmd.id ? (
-        <TableRow modifier="bordered">
-          <TableCell>{t('ID')}</TableCell>
-          <TableCell>
-            <Hash text={cmd.id} />
-          </TableCell>
-        </TableRow>
-      ) : null}
-      {cmd.chainPubKey ? (
-        <TableRow modifier="bordered">
-          <TableCell>{t('Chain public key')}</TableCell>
-          <TableCell>
-            <Hash text={cmd.chainPubKey} />
-          </TableCell>
-        </TableRow>
-      ) : null}
-      {cmd.ethereumAddress ? (
-        <TableRow modifier="bordered">
-          <TableCell>{t('Ethereum Address')}</TableCell>
-          <TableCell>
-            <EthExplorerLink
-              type={EthExplorerLinkTypes.address}
-              id={cmd.ethereumAddress}
-            />
-          </TableCell>
-        </TableRow>
-      ) : null}
-      {cmd.vegaPubKey ? (
-        <TableRow modifier="bordered">
-          <TableCell>{t('Vega public key')}</TableCell>
-          <TableCell>
-            <PartyLink id={cmd.vegaPubKey} />
-          </TableCell>
-        </TableRow>
-      ) : null}
-      {cmd.avatarUrl ? (
-        <TableRow modifier="bordered">
-          <TableCell>{t('Avatar URL')}</TableCell>
-          <TableCell>
-            <ExternalLink href={cmd.avatarUrl} rel="noreferrer noopener">
-              {cmd.avatarUrl}
-            </ExternalLink>
-          </TableCell>
-        </TableRow>
-      ) : null}
-      {cmd.infoUrl ? (
-        <TableRow modifier="bordered">
-          <TableCell>{t('Info link')}</TableCell>
-          <TableCell>
-            <ExternalLink href={cmd.infoUrl} rel="noreferrer noopener">
-              {cmd.infoUrl}
-            </ExternalLink>
-          </TableCell>
-        </TableRow>
-      ) : null}
-    </TableWithTbody>
-  );
-};

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

@@ -42,7 +42,7 @@ export const TxDetailsNodeVote = ({
   }
 
   return (
-    <TableWithTbody className="mb-8" allowWrap={true}>
+    <TableWithTbody className="mb-8">
       <TxDetailsShared txData={txData} pubKey={pubKey} blockData={blockData} />
       {data && !!data.deposit
         ? TxDetailsNodeVoteDeposit({ deposit: data })

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

@@ -29,7 +29,7 @@ export const TxDetailsOrderAmend = ({
 
   return (
     <>
-      <TableWithTbody className="mb-8" allowWrap={true}>
+      <TableWithTbody className="mb-8">
         <TxDetailsShared
           txData={txData}
           pubKey={pubKey}

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

@@ -29,7 +29,7 @@ export const TxDetailsOrderCancel = ({
 
   return (
     <>
-      <TableWithTbody className="mb-8" allowWrap={true}>
+      <TableWithTbody className="mb-8">
         <TxDetailsShared
           txData={txData}
           pubKey={pubKey}

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

@@ -39,7 +39,7 @@ export const TxDetailsOrder = ({
 
   return (
     <>
-      <TableWithTbody className="mb-8" allowWrap={true}>
+      <TableWithTbody className="mb-8">
         <TxDetailsShared
           txData={txData}
           pubKey={pubKey}

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

@@ -32,7 +32,7 @@ export const TxProposalVote = ({
 
   const vote = txData.command.voteSubmission.value ? '👍' : '👎';
   return (
-    <TableWithTbody className="mb-8" allowWrap={true}>
+    <TableWithTbody className="mb-8">
       <TxDetailsShared txData={txData} pubKey={pubKey} blockData={blockData} />
       <TableRow modifier="bordered">
         <TableCell>{t('Proposal ID')}</TableCell>

apps/explorer/src/app/components/txs/details/tx-state-variable-proposal.spec.tsx

@@ -1,57 +0,0 @@
-import {
-  hackyGetMarketFromStateVariable,
-  hackyGetVariableFromStateVariable,
-} from './tx-state-variable-proposal';
-
-describe('Hacky Get market from state variable', () => {
-  it('Extracts a market id from a known state variable proposal id', () => {
-    const knownId =
-      '84fff099818dc4f5319477f0812b4341565cfb32ccf735beede734e386b8108f_5d69ff4a485a9f963272c8614c1d0d84bb8ea57886f5b11aad53f0ccc77731ba_probability_of_trading';
-    const res = hackyGetMarketFromStateVariable(knownId);
-    expect(res).toEqual(
-      '5d69ff4a485a9f963272c8614c1d0d84bb8ea57886f5b11aad53f0ccc77731ba'
-    );
-  });
-
-  it('Returns null if the string looks a bit like the known one, but with different segments', () => {
-    const knownId =
-      '5d69ff4a485a9f963272c8614c1d0d84bb8ea57886f5b11aad53f0ccc77731ba_probability_of_trading';
-    const res = hackyGetMarketFromStateVariable(knownId);
-    expect(res).toEqual(null);
-  });
-
-  it('Handles empty/weird data', () => {
-    expect(hackyGetMarketFromStateVariable(null as unknown as string)).toEqual(
-      null
-    );
-    expect(hackyGetMarketFromStateVariable('')).toEqual(null);
-    expect(
-      hackyGetMarketFromStateVariable(undefined as unknown as string)
-    ).toEqual(null);
-    expect(hackyGetMarketFromStateVariable(2 as unknown as string)).toEqual(
-      null
-    );
-  });
-});
-
-describe('Hacky Get Variable from state variable proposal id', () => {
-  it('Extracts an variable name from a known state variable proposal id', () => {
-    const knownId =
-      '84fff099818dc4f5319477f0812b4341565cfb32ccf735beede734e386b8108f_5d69ff4a485a9f963272c8614c1d0d84bb8ea57886f5b11aad53f0ccc77731ba_probability_of_trading';
-    const res = hackyGetVariableFromStateVariable(knownId);
-    expect(res).toEqual('probability of trading');
-  });
-
-  it('Handles empty/weird data', () => {
-    expect(
-      hackyGetVariableFromStateVariable(null as unknown as string)
-    ).toEqual(null);
-    expect(hackyGetVariableFromStateVariable('')).toEqual(null);
-    expect(
-      hackyGetVariableFromStateVariable(undefined as unknown as string)
-    ).toEqual(null);
-    expect(hackyGetVariableFromStateVariable(2 as unknown as string)).toEqual(
-      null
-    );
-  });
-});

apps/explorer/src/app/components/txs/details/tx-state-variable-proposal.tsx

@@ -1,113 +0,0 @@
-import { t } from '@vegaprotocol/react-helpers';
-import { TxDetailsShared } from './shared/tx-details-shared';
-import { TableCell, TableRow, TableWithTbody } from '../../table';
-import { MarketLink } from '../../links';
-
-import type { components } from '../../../../types/explorer';
-import type { BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
-import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
-import { StateVariableProposalWrapper } from './state-variable/data-wrapper';
-
-interface TxDetailsStateVariableProps {
-  txData: BlockExplorerTransactionResult | undefined;
-  pubKey: string | undefined;
-  blockData: TendermintBlocksResponse | undefined;
-}
-
-/**
- * There is no market ID in the event, but it appears to be encoded in to the variable
- * ID so let's pull it out. MarketLink component will handle if it isn't a real market.
- *
- * Given how liable to break this is, it's wrapped in a try catch
- *
- * @param stateVarId The full state variable proposal variable name
- * @returns null or a string market id
- */
-export function hackyGetMarketFromStateVariable(
-  stateVarId?: string
-): string | null {
-  try {
-    const res = stateVarId ? stateVarId.split('_')[1] : null;
-    return res && res.length === 64 ? res : null;
-  } catch (e) {
-    return null;
-  }
-}
-
-/**
- * There is no event name in the event, but it appears to be encoded in to the variable
- * ID so let's pull it out. Will display nothing if it doesn't parse as expected
- *
- * Given how liable to break this is, it's wrapped in a try catch
- *
- * @param stateVarId The full state variable proposal variable name
- * @returns null or a string variable name
- */
-export function hackyGetVariableFromStateVariable(
-  stateVarId?: string
-): string | null {
-  try {
-    if (!stateVarId) {
-      return null;
-    }
-
-    return stateVarId.split('_').slice(2).join(' ').replace('-', ' ');
-  } catch (e) {
-    return null;
-  }
-}
-
-/**
- * State Variable proposals
- */
-export const TxDetailsStateVariable = ({
-  txData,
-  pubKey,
-  blockData,
-}: TxDetailsStateVariableProps) => {
-  if (!txData) {
-    return <>{t('Awaiting Block Explorer transaction details')}</>;
-  }
-
-  const command: components['schemas']['v1StateVariableProposal'] =
-    txData.command.stateVariableProposal;
-
-  const variable = hackyGetVariableFromStateVariable(
-    command.proposal?.stateVarId
-  );
-  const marketId = hackyGetMarketFromStateVariable(
-    command.proposal?.stateVarId
-  );
-
-  return (
-    <>
-      <TableWithTbody className="mb-8" allowWrap={true}>
-        <TxDetailsShared
-          txData={txData}
-          pubKey={pubKey}
-          blockData={blockData}
-        />
-        {marketId ? (
-          <TableRow modifier="bordered">
-            <TableCell>{t('Market')}</TableCell>
-            <TableCell>
-              <MarketLink id={marketId} />
-            </TableCell>
-          </TableRow>
-        ) : null}
-        <TableRow modifier="bordered">
-          <TableCell>{t('Variable')}</TableCell>
-          <TableCell className="capitalize">
-            <span>{variable}</span>
-          </TableCell>
-        </TableRow>
-      </TableWithTbody>
-      <section>
-        <StateVariableProposalWrapper
-          stateVariable={command.proposal?.stateVarId}
-          kvb={command.proposal?.kvb}
-        />
-      </section>
-    </>
-  );
-};

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

@@ -46,7 +46,7 @@ export const TxDetailsUndelegate = ({
     txData.command.undelegateSubmission;
 
   return (
-    <TableWithTbody className="mb-8" allowWrap={true}>
+    <TableWithTbody className="mb-8">
       <TxDetailsShared txData={txData} pubKey={pubKey} blockData={blockData} />
       {u.nodeId ? (
         <TableRow modifier="bordered">

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

@@ -41,7 +41,7 @@ export const TxDetailsWithdrawSubmission = ({
 
   return (
     <>
-      <TableWithTbody className="mb-8" allowWrap={true}>
+      <TableWithTbody className="mb-8">
         <TxDetailsShared
           txData={txData}
           pubKey={pubKey}

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

@@ -1,4 +0,0 @@
-/**
- * Equivalent of tailwind's `md` modifier
- */
-export const BREAKPOINT_MD = 768;

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

@@ -33,7 +33,4 @@ 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/mocks/assets.ts

@@ -1,134 +0,0 @@
-import type { AssetFieldsFragment } from '@vegaprotocol/assets';
-import { AssetDocument } from '@vegaprotocol/assets';
-import { AssetsDocument } from '@vegaprotocol/assets';
-import { AssetStatus } from '@vegaprotocol/types';
-
-const A1: AssetFieldsFragment = {
-  __typename: 'Asset',
-  id: '123',
-  name: 'A ONE',
-  symbol: 'A1',
-  decimals: 0,
-  quantum: '',
-  status: AssetStatus.STATUS_ENABLED,
-  source: {
-    __typename: 'BuiltinAsset',
-    maxFaucetAmountMint: '',
-  },
-  infrastructureFeeAccount: {
-    __typename: 'AccountBalance',
-    balance: '',
-  },
-  globalRewardPoolAccount: {
-    __typename: 'AccountBalance',
-    balance: '',
-  },
-  lpFeeRewardAccount: {
-    __typename: 'AccountBalance',
-    balance: '',
-  },
-  makerFeeRewardAccount: {
-    __typename: 'AccountBalance',
-    balance: '',
-  },
-  marketProposerRewardAccount: {
-    __typename: 'AccountBalance',
-    balance: '',
-  },
-  takerFeeRewardAccount: {
-    __typename: 'AccountBalance',
-    balance: '',
-  },
-};
-
-const A2: AssetFieldsFragment = {
-  __typename: 'Asset',
-  id: '456',
-  name: 'A TWO',
-  symbol: 'A2',
-  decimals: 0,
-  quantum: '',
-  status: AssetStatus.STATUS_ENABLED,
-  source: {
-    __typename: 'BuiltinAsset',
-    maxFaucetAmountMint: '',
-  },
-  infrastructureFeeAccount: {
-    __typename: 'AccountBalance',
-    balance: '',
-  },
-  globalRewardPoolAccount: {
-    __typename: 'AccountBalance',
-    balance: '',
-  },
-  lpFeeRewardAccount: {
-    __typename: 'AccountBalance',
-    balance: '',
-  },
-  makerFeeRewardAccount: {
-    __typename: 'AccountBalance',
-    balance: '',
-  },
-  marketProposerRewardAccount: {
-    __typename: 'AccountBalance',
-    balance: '',
-  },
-  takerFeeRewardAccount: {
-    __typename: 'AccountBalance',
-    balance: '',
-  },
-};
-
-export const assetsList = [A1, A2];
-
-export const mockAssetsList = {
-  request: {
-    query: AssetsDocument,
-  },
-  result: {
-    data: {
-      assetsConnection: {
-        __typename: 'AssetsConnection',
-        edges: [
-          {
-            __typename: 'AssetEdge',
-            node: A1,
-          },
-          {
-            __typename: 'AssetEdge',
-            node: A2,
-          },
-        ],
-      },
-    },
-  },
-};
-
-export const mockEmptyAssetsList = {
-  request: {
-    query: AssetsDocument,
-  },
-  result: { data: null },
-};
-
-export const mockAssetA1 = {
-  request: {
-    query: AssetDocument,
-    variables: {
-      assetId: '123',
-    },
-  },
-  result: {
-    data: {
-      assetsConnection: {
-        __typename: 'AssetsConnection',
-        edges: [
-          {
-            __typename: 'AssetEdge',
-            node: A1,
-          },
-        ],
-      },
-    },
-  },
-};

apps/explorer/src/app/routes/assets/Assets.graphql

@@ -0,0 +1,32 @@
+fragment AssetsFields on Asset {
+  id
+  name
+  symbol
+  decimals
+  source {
+    ... on ERC20 {
+      contractAddress
+    }
+    ... on BuiltinAsset {
+      maxFaucetAmountMint
+    }
+  }
+
+  infrastructureFeeAccount {
+    type
+    balance
+    market {
+      id
+    }
+  }
+}
+
+query ExplorerAssets {
+  assetsConnection {
+    edges {
+      node {
+        ...AssetsFields
+      }
+    }
+  }
+}

apps/explorer/src/app/routes/assets/__generated__/Assets.ts

@@ -0,0 +1,73 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type AssetsFieldsFragment = { __typename?: 'Asset', id: string, name: string, symbol: string, decimals: number, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string }, infrastructureFeeAccount?: { __typename?: 'AccountBalance', type: Types.AccountType, balance: string, market?: { __typename?: 'Market', id: string } | null } | null };
+
+export type ExplorerAssetsQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type ExplorerAssetsQuery = { __typename?: 'Query', assetsConnection?: { __typename?: 'AssetsConnection', edges?: Array<{ __typename?: 'AssetEdge', node: { __typename?: 'Asset', id: string, name: string, symbol: string, decimals: number, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string }, infrastructureFeeAccount?: { __typename?: 'AccountBalance', type: Types.AccountType, balance: string, market?: { __typename?: 'Market', id: string } | null } | null } } | null> | null } | null };
+
+export const AssetsFieldsFragmentDoc = gql`
+    fragment AssetsFields on Asset {
+  id
+  name
+  symbol
+  decimals
+  source {
+    ... on ERC20 {
+      contractAddress
+    }
+    ... on BuiltinAsset {
+      maxFaucetAmountMint
+    }
+  }
+  infrastructureFeeAccount {
+    type
+    balance
+    market {
+      id
+    }
+  }
+}
+    `;
+export const ExplorerAssetsDocument = gql`
+    query ExplorerAssets {
+  assetsConnection {
+    edges {
+      node {
+        ...AssetsFields
+      }
+    }
+  }
+}
+    ${AssetsFieldsFragmentDoc}`;
+
+/**
+ * __useExplorerAssetsQuery__
+ *
+ * To run a query within a React component, call `useExplorerAssetsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useExplorerAssetsQuery` 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 } = useExplorerAssetsQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useExplorerAssetsQuery(baseOptions?: Apollo.QueryHookOptions<ExplorerAssetsQuery, ExplorerAssetsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ExplorerAssetsQuery, ExplorerAssetsQueryVariables>(ExplorerAssetsDocument, options);
+      }
+export function useExplorerAssetsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerAssetsQuery, ExplorerAssetsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ExplorerAssetsQuery, ExplorerAssetsQueryVariables>(ExplorerAssetsDocument, options);
+        }
+export type ExplorerAssetsQueryHookResult = ReturnType<typeof useExplorerAssetsQuery>;
+export type ExplorerAssetsLazyQueryHookResult = ReturnType<typeof useExplorerAssetsLazyQuery>;
+export type ExplorerAssetsQueryResult = Apollo.QueryResult<ExplorerAssetsQuery, ExplorerAssetsQueryVariables>;

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

@@ -1,50 +0,0 @@
-import { t } from '@vegaprotocol/react-helpers';
-import { RouteTitle } from '../../components/route-title';
-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';
-
-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">
-        <RouteTitle data-testid="asset-header">{title}</RouteTitle>
-        <AsyncRenderer
-          noDataMessage={t('Asset not found')}
-          data={data}
-          loading={loading}
-          error={error}
-        >
-          <div className="absolute top-0 right-0">
-            <Button size="xs" onClick={() => setDialogOpen(true)}>
-              {t('View JSON')}
-            </Button>
-          </div>
-          <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

@@ -1,30 +0,0 @@
-import { t } from '@vegaprotocol/react-helpers';
-import { RouteTitle } from '../../components/route-title';
-import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
-import { useScrollToLocation } from '../../hooks/scroll-to-location';
-import { useDocumentTitle } from '../../hooks/use-document-title';
-import { useAssetsDataProvider } from '@vegaprotocol/assets';
-import { AssetsTable } from '../../components/assets/assets-table';
-
-export const AssetsPage = () => {
-  useDocumentTitle(['Assets']);
-  useScrollToLocation();
-
-  const { data, loading, error } = useAssetsDataProvider();
-
-  return (
-    <section>
-      <RouteTitle data-testid="assets-header">{t('Assets')}</RouteTitle>
-      <AsyncRenderer
-        noDataMessage={t('This chain has no assets')}
-        data={data}
-        loading={loading}
-        error={error}
-      >
-        <div className="h-full relative">
-          <AssetsTable data={data} />
-        </div>
-      </AsyncRenderer>
-    </section>
-  );
-};

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

@@ -0,0 +1,44 @@
+import { MockedProvider } from '@apollo/client/testing';
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import Assets from './index';
+import type { MockedResponse } from '@apollo/client/testing';
+import { ExplorerAssetDocument } from '../../components/links/asset-link/__generated__/Asset';
+
+function renderComponent(mock: MockedResponse[]) {
+  return (
+    <MemoryRouter>
+      <MockedProvider mocks={mock}>
+        <Assets />
+      </MockedProvider>
+    </MemoryRouter>
+  );
+}
+
+describe('Assets index', () => {
+  it('Renders loader when loading', async () => {
+    const mock = {
+      request: {
+        query: ExplorerAssetDocument,
+      },
+      result: {
+        data: {},
+      },
+    };
+    const res = render(renderComponent([mock]));
+    expect(await res.findByTestId('loader')).toBeInTheDocument();
+  });
+
+  it('Renders EmptyList when loading completes and there are no results', async () => {
+    const mock = {
+      request: {
+        query: ExplorerAssetDocument,
+      },
+      result: {
+        data: {},
+      },
+    };
+    const res = render(renderComponent([mock]));
+    expect(await res.findByTestId('emptylist')).toBeInTheDocument();
+  });
+});

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

@@ -1,2 +1,53 @@
-export * from './assets-page';
-export * from './asset-page';
+import { getNodes, 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 { useExplorerAssetsQuery } from './__generated__/Assets';
+import type { AssetsFieldsFragment } from './__generated__/Assets';
+import { useScrollToLocation } from '../../hooks/scroll-to-location';
+import { useDocumentTitle } from '../../hooks/use-document-title';
+import EmptyList from '../../components/empty-list/empty-list';
+
+const Assets = () => {
+  const { data, loading } = useExplorerAssetsQuery();
+  useDocumentTitle(['Assets']);
+
+  useScrollToLocation();
+
+  const assets = getNodes<AssetsFieldsFragment>(data?.assetsConnection);
+
+  if (!assets || assets.length === 0) {
+    if (!loading) {
+      return (
+        <section>
+          <RouteTitle data-testid="assets-header">{t('Assets')}</RouteTitle>
+          <EmptyList
+            heading={t('This chain has no assets')}
+            label={t('0 assets')}
+          />
+        </section>
+      );
+    } else {
+      return <Loader />;
+    }
+  }
+
+  return (
+    <section>
+      <RouteTitle data-testid="assets-header">{t('Assets')}</RouteTitle>
+      {assets.map((a) => {
+        return (
+          <React.Fragment key={a.id}>
+            <SubHeading data-testid="asset-header" id={a.id}>
+              {a.name} ({a.symbol})
+            </SubHeading>
+            <SyntaxHighlighter data={a} />
+          </React.Fragment>
+        );
+      })}
+    </section>
+  );
+};
+
+export default Assets;

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

@@ -0,0 +1,82 @@
+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

@@ -0,0 +1,122 @@
+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 +1,63 @@
-export * from './proposals-page';
+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;

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

@@ -1,33 +0,0 @@
-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/Markets.graphql

@@ -0,0 +1,140 @@
+query ExplorerMarkets {
+  marketsConnection {
+    edges {
+      node {
+        id
+        fees {
+          factors {
+            makerFee
+            infrastructureFee
+            liquidityFee
+          }
+        }
+        tradableInstrument {
+          instrument {
+            name
+            metadata {
+              tags
+            }
+            code
+            product {
+              ... on Future {
+                settlementAsset {
+                  id
+                  name
+                  decimals
+                  globalRewardPoolAccount {
+                    balance
+                  }
+                }
+              }
+            }
+          }
+          riskModel {
+            ... on LogNormalRiskModel {
+              tau
+              riskAversionParameter
+              params {
+                r
+                sigma
+                mu
+              }
+            }
+            ... on SimpleRiskModel {
+              params {
+                factorLong
+                factorShort
+              }
+            }
+          }
+          marginCalculator {
+            scalingFactors {
+              searchLevel
+              initialMargin
+              collateralRelease
+            }
+          }
+        }
+        decimalPlaces
+        openingAuction {
+          durationSecs
+          volume
+        }
+        priceMonitoringSettings {
+          parameters {
+            triggers {
+              horizonSecs
+              probability
+              auctionExtensionSecs
+            }
+          }
+        }
+        liquidityMonitoringParameters {
+          triggeringRatio
+          targetStakeParameters {
+            timeWindow
+            scalingFactor
+          }
+        }
+        tradingMode
+        state
+        proposal {
+          id
+        }
+        state
+        accountsConnection {
+          edges {
+            node {
+              asset {
+                id
+                name
+              }
+              balance
+              type
+            }
+          }
+        }
+        data {
+          markPrice
+          bestBidPrice
+          bestBidVolume
+          bestOfferPrice
+          bestOfferVolume
+          bestStaticBidPrice
+          bestStaticBidVolume
+          bestStaticOfferPrice
+          bestStaticOfferVolume
+          midPrice
+          staticMidPrice
+          timestamp
+          openInterest
+          auctionEnd
+          auctionStart
+          indicativePrice
+          indicativeVolume
+          trigger
+          extensionTrigger
+          targetStake
+          suppliedStake
+          priceMonitoringBounds {
+            minValidPrice
+            maxValidPrice
+            trigger {
+              auctionExtensionSecs
+              probability
+            }
+            referencePrice
+          }
+          marketValueProxy
+          liquidityProviderFeeShare {
+            party {
+              id
+            }
+            equityLikeShare
+            averageEntryValuation
+          }
+        }
+      }
+    }
+  }
+}

apps/explorer/src/app/routes/markets/__generated__/Markets.ts

@@ -0,0 +1,180 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type ExplorerMarketsQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type ExplorerMarketsQuery = { __typename?: 'Query', marketsConnection?: { __typename?: 'MarketConnection', edges: Array<{ __typename?: 'MarketEdge', node: { __typename?: 'Market', id: string, decimalPlaces: number, tradingMode: Types.MarketTradingMode, state: Types.MarketState, fees: { __typename?: 'Fees', factors: { __typename?: 'FeeFactors', makerFee: string, infrastructureFee: string, liquidityFee: string } }, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, code: string, metadata: { __typename?: 'InstrumentMetadata', tags?: Array<string> | null }, product: { __typename?: 'Future', settlementAsset: { __typename?: 'Asset', id: string, name: string, decimals: number, globalRewardPoolAccount?: { __typename?: 'AccountBalance', balance: string } | null } } }, riskModel: { __typename?: 'LogNormalRiskModel', tau: number, riskAversionParameter: number, params: { __typename?: 'LogNormalModelParams', r: number, sigma: number, mu: number } } | { __typename?: 'SimpleRiskModel', params: { __typename?: 'SimpleRiskModelParams', factorLong: number, factorShort: number } }, marginCalculator?: { __typename?: 'MarginCalculator', scalingFactors: { __typename?: 'ScalingFactors', searchLevel: number, initialMargin: number, collateralRelease: number } } | null }, openingAuction: { __typename?: 'AuctionDuration', durationSecs: number, volume: number }, priceMonitoringSettings: { __typename?: 'PriceMonitoringSettings', parameters?: { __typename?: 'PriceMonitoringParameters', triggers?: Array<{ __typename?: 'PriceMonitoringTrigger', horizonSecs: number, probability: number, auctionExtensionSecs: number }> | null } | null }, liquidityMonitoringParameters: { __typename?: 'LiquidityMonitoringParameters', triggeringRatio: string, targetStakeParameters: { __typename?: 'TargetStakeParameters', timeWindow: number, scalingFactor: number } }, proposal?: { __typename?: 'Proposal', id?: string | null } | null, accountsConnection?: { __typename?: 'AccountsConnection', edges?: Array<{ __typename?: 'AccountEdge', node: { __typename?: 'AccountBalance', balance: string, type: Types.AccountType, asset: { __typename?: 'Asset', id: string, name: string } } } | null> | null } | null, data?: { __typename?: 'MarketData', markPrice: string, bestBidPrice: string, bestBidVolume: string, bestOfferPrice: string, bestOfferVolume: string, bestStaticBidPrice: string, bestStaticBidVolume: string, bestStaticOfferPrice: string, bestStaticOfferVolume: string, midPrice: string, staticMidPrice: string, timestamp: any, openInterest: string, auctionEnd?: string | null, auctionStart?: string | null, indicativePrice: string, indicativeVolume: string, trigger: Types.AuctionTrigger, extensionTrigger: Types.AuctionTrigger, targetStake?: string | null, suppliedStake?: string | null, marketValueProxy: string, priceMonitoringBounds?: Array<{ __typename?: 'PriceMonitoringBounds', minValidPrice: string, maxValidPrice: string, referencePrice: string, trigger: { __typename?: 'PriceMonitoringTrigger', auctionExtensionSecs: number, probability: number } }> | null, liquidityProviderFeeShare?: Array<{ __typename?: 'LiquidityProviderFeeShare', equityLikeShare: string, averageEntryValuation: string, party: { __typename?: 'Party', id: string } }> | null } | null } }> } | null };
+
+
+export const ExplorerMarketsDocument = gql`
+    query ExplorerMarkets {
+  marketsConnection {
+    edges {
+      node {
+        id
+        fees {
+          factors {
+            makerFee
+            infrastructureFee
+            liquidityFee
+          }
+        }
+        tradableInstrument {
+          instrument {
+            name
+            metadata {
+              tags
+            }
+            code
+            product {
+              ... on Future {
+                settlementAsset {
+                  id
+                  name
+                  decimals
+                  globalRewardPoolAccount {
+                    balance
+                  }
+                }
+              }
+            }
+          }
+          riskModel {
+            ... on LogNormalRiskModel {
+              tau
+              riskAversionParameter
+              params {
+                r
+                sigma
+                mu
+              }
+            }
+            ... on SimpleRiskModel {
+              params {
+                factorLong
+                factorShort
+              }
+            }
+          }
+          marginCalculator {
+            scalingFactors {
+              searchLevel
+              initialMargin
+              collateralRelease
+            }
+          }
+        }
+        decimalPlaces
+        openingAuction {
+          durationSecs
+          volume
+        }
+        priceMonitoringSettings {
+          parameters {
+            triggers {
+              horizonSecs
+              probability
+              auctionExtensionSecs
+            }
+          }
+        }
+        liquidityMonitoringParameters {
+          triggeringRatio
+          targetStakeParameters {
+            timeWindow
+            scalingFactor
+          }
+        }
+        tradingMode
+        state
+        proposal {
+          id
+        }
+        state
+        accountsConnection {
+          edges {
+            node {
+              asset {
+                id
+                name
+              }
+              balance
+              type
+            }
+          }
+        }
+        data {
+          markPrice
+          bestBidPrice
+          bestBidVolume
+          bestOfferPrice
+          bestOfferVolume
+          bestStaticBidPrice
+          bestStaticBidVolume
+          bestStaticOfferPrice
+          bestStaticOfferVolume
+          midPrice
+          staticMidPrice
+          timestamp
+          openInterest
+          auctionEnd
+          auctionStart
+          indicativePrice
+          indicativeVolume
+          trigger
+          extensionTrigger
+          targetStake
+          suppliedStake
+          priceMonitoringBounds {
+            minValidPrice
+            maxValidPrice
+            trigger {
+              auctionExtensionSecs
+              probability
+            }
+            referencePrice
+          }
+          marketValueProxy
+          liquidityProviderFeeShare {
+            party {
+              id
+            }
+            equityLikeShare
+            averageEntryValuation
+          }
+        }
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useExplorerMarketsQuery__
+ *
+ * To run a query within a React component, call `useExplorerMarketsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useExplorerMarketsQuery` 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 } = useExplorerMarketsQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useExplorerMarketsQuery(baseOptions?: Apollo.QueryHookOptions<ExplorerMarketsQuery, ExplorerMarketsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ExplorerMarketsQuery, ExplorerMarketsQueryVariables>(ExplorerMarketsDocument, options);
+      }
+export function useExplorerMarketsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerMarketsQuery, ExplorerMarketsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ExplorerMarketsQuery, ExplorerMarketsQueryVariables>(ExplorerMarketsDocument, options);
+        }
+export type ExplorerMarketsQueryHookResult = ReturnType<typeof useExplorerMarketsQuery>;
+export type ExplorerMarketsLazyQueryHookResult = ReturnType<typeof useExplorerMarketsLazyQuery>;
+export type ExplorerMarketsQueryResult = Apollo.QueryResult<ExplorerMarketsQuery, ExplorerMarketsQueryVariables>;

apps/explorer/src/app/routes/markets/index.spec.tsx

@@ -0,0 +1,48 @@
+import { MockedProvider } from '@apollo/client/testing';
+import { render } from '@testing-library/react';
+import { MemoryRouter } from 'react-router-dom';
+import Markets from './index';
+import type { MockedResponse } from '@apollo/client/testing';
+import { ExplorerMarketsDocument } from './__generated__/Markets';
+
+function renderComponent(mock: MockedResponse[]) {
+  return (
+    <MemoryRouter>
+      <MockedProvider mocks={mock}>
+        <Markets />
+      </MockedProvider>
+    </MemoryRouter>
+  );
+}
+
+describe('Markets index', () => {
+  it('Renders loader when loading', async () => {
+    const mock = {
+      request: {
+        query: ExplorerMarketsDocument,
+      },
+      result: {
+        data: {
+          marketsConnection: [],
+        },
+      },
+    };
+    const res = render(renderComponent([mock]));
+    expect(await res.findByTestId('loader')).toBeInTheDocument();
+  });
+
+  it('Renders EmptyList when loading completes and there are no results', async () => {
+    const mock = {
+      request: {
+        query: ExplorerMarketsDocument,
+      },
+      result: {
+        data: {
+          marketsConnection: [],
+        },
+      },
+    };
+    const res = render(renderComponent([mock]));
+    expect(await res.findByTestId('emptylist')).toBeInTheDocument();
+  });
+});

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

@@ -1,2 +1,44 @@
-export * from './markets-page';
-export * from './market-page';
+import React from 'react';
+import { Loader, SyntaxHighlighter } from '@vegaprotocol/ui-toolkit';
+import { RouteTitle } from '../../components/route-title';
+import { SubHeading } from '../../components/sub-heading';
+import { t } from '@vegaprotocol/react-helpers';
+import { useExplorerMarketsQuery } from './__generated__/Markets';
+import { useScrollToLocation } from '../../hooks/scroll-to-location';
+import { useDocumentTitle } from '../../hooks/use-document-title';
+import EmptyList from '../../components/empty-list/empty-list';
+
+const Markets = () => {
+  const { data, loading } = useExplorerMarketsQuery();
+
+  useScrollToLocation();
+  useDocumentTitle(['Markets']);
+
+  const m = data?.marketsConnection?.edges;
+
+  return (
+    <section key="markets">
+      <RouteTitle data-testid="markets-heading">{t('Markets')}</RouteTitle>
+
+      {m ? (
+        m.map((e) => (
+          <React.Fragment key={e.node.id}>
+            <SubHeading data-testid="markets-header" id={e.node.id}>
+              {e.node.tradableInstrument.instrument.name}
+            </SubHeading>
+            <SyntaxHighlighter data={e.node} />
+          </React.Fragment>
+        ))
+      ) : loading ? (
+        <Loader />
+      ) : (
+        <EmptyList
+          heading={t('This chain has no markets')}
+          label={t('0 markets')}
+        />
+      )}
+    </section>
+  );
+};
+
+export default Markets;

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

@@ -1,68 +0,0 @@
-import { t, useDataProvider } from '@vegaprotocol/react-helpers';
-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';
-
-export const MarketPage = () => {
-  useScrollToLocation();
-
-  const { marketId } = useParams<{ marketId: string }>();
-
-  const variables = useMemo(
-    () => ({
-      marketId,
-    }),
-    [marketId]
-  );
-
-  const { data, loading, error } = useDataProvider({
-    dataProvider: marketInfoNoCandlesDataProvider,
-    skipUpdates: true,
-    variables,
-  });
-
-  useDocumentTitle(
-    compact([
-      'Market details',
-      data?.market?.tradableInstrument.instrument.name,
-    ])
-  );
-
-  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
-
-  return (
-    <>
-      <section className="relative">
-        <RouteTitle data-testid="markets-heading">
-          {data?.market?.tradableInstrument.instrument.name}
-        </RouteTitle>
-        <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>
-      <JsonViewerDialog
-        open={dialogOpen}
-        onChange={(isOpen) => setDialogOpen(isOpen)}
-        title={data?.market?.tradableInstrument.instrument.name || ''}
-        content={data?.market}
-      />
-    </>
-  );
-};

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

@@ -1,31 +0,0 @@
-import { useScrollToLocation } from '../../hooks/scroll-to-location';
-import { useDocumentTitle } from '../../hooks/use-document-title';
-import { marketsProvider } from '@vegaprotocol/market-list';
-import { RouteTitle } from '../../components/route-title';
-import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
-import { t, useDataProvider } from '@vegaprotocol/react-helpers';
-import { MarketsTable } from '../../components/markets/markets-table';
-
-export const MarketsPage = () => {
-  useDocumentTitle(['Markets']);
-  useScrollToLocation();
-
-  const { data, loading, error } = useDataProvider({
-    dataProvider: marketsProvider,
-    skipUpdates: true,
-  });
-
-  return (
-    <section>
-      <RouteTitle data-testid="markets-heading">{t('Markets')}</RouteTitle>
-      <AsyncRenderer
-        noDataMessage={t('This chain has no markets')}
-        data={data}
-        loading={loading}
-        error={error}
-      >
-        <MarketsTable data={data} />
-      </AsyncRenderer>
-    </section>
-  );
-};

apps/explorer/src/app/routes/parties/id/components/party-accounts.tsx

@@ -71,7 +71,7 @@ export const PartyAccounts = ({ accounts }: PartyAccountsProps) => {
                 />
               </td>
               <td className="text-md">
-                <AssetLink assetId={account.asset.id} />
+                <AssetLink id={account.asset.id} />
               </td>
             </TableRow>
           );

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

@@ -1,7 +1,8 @@
-import { AssetPage, AssetsPage } from './assets';
+import Assets from './assets';
 import BlockPage from './blocks';
-import { Proposals } from './governance';
+import Governance from './governance';
 import Home from './home';
+import Markets from './markets';
 import OraclePage from './oracles';
 import Oracles from './oracles/home';
 import { Oracle } from './oracles/id';
@@ -20,13 +21,8 @@ import flags from '../config/flags';
 import { t } from '@vegaprotocol/react-helpers';
 import { Routes } from './route-names';
 import { NetworkParameters } from './network-parameters';
-import type { RouteObject } from 'react-router-dom';
-import { MarketPage, MarketsPage } from './markets';
 
-export type Navigable = { path: string; name: string; text: string };
-type Route = RouteObject & Navigable;
-
-const partiesRoutes: Route[] = flags.parties
+const partiesRoutes = flags.parties
   ? [
       {
         path: Routes.PARTIES,
@@ -47,27 +43,18 @@ const partiesRoutes: Route[] = flags.parties
     ]
   : [];
 
-const assetsRoutes: Route[] = flags.assets
+const assetsRoutes = flags.assets
   ? [
       {
         path: Routes.ASSETS,
         text: t('Assets'),
         name: 'Assets',
-        children: [
-          {
-            index: true,
-            element: <AssetsPage />,
-          },
-          {
-            path: ':assetId',
-            element: <AssetPage />,
-          },
-        ],
+        element: <Assets />,
       },
     ]
   : [];
 
-const genesisRoutes: Route[] = flags.genesis
+const genesisRoutes = flags.genesis
   ? [
       {
         path: Routes.GENESIS,
@@ -78,38 +65,29 @@ const genesisRoutes: Route[] = flags.genesis
     ]
   : [];
 
-const governanceRoutes: Route[] = flags.governance
+const governanceRoutes = flags.governance
   ? [
       {
         path: Routes.GOVERNANCE,
         name: 'Governance proposals',
         text: t('Governance Proposals'),
-        element: <Proposals />,
+        element: <Governance />,
       },
     ]
   : [];
 
-const marketsRoutes: Route[] = flags.markets
+const marketsRoutes = flags.markets
   ? [
       {
         path: Routes.MARKETS,
         name: 'Markets',
         text: t('Markets'),
-        children: [
-          {
-            index: true,
-            element: <MarketsPage />,
-          },
-          {
-            path: ':marketId',
-            element: <MarketPage />,
-          },
-        ],
+        element: <Markets />,
       },
     ]
   : [];
 
-const networkParametersRoutes: Route[] = flags.networkParameters
+const networkParametersRoutes = flags.networkParameters
   ? [
       {
         path: Routes.NETWORK_PARAMETERS,
@@ -119,7 +97,7 @@ const networkParametersRoutes: Route[] = flags.networkParameters
       },
     ]
   : [];
-const validators: Route[] = flags.validators
+const validators = flags.validators
   ? [
       {
         path: Routes.VALIDATORS,
@@ -130,7 +108,7 @@ const validators: Route[] = flags.validators
     ]
   : [];
 
-const routerConfig: Route[] = [
+const routerConfig = [
   {
     path: Routes.HOME,
     name: 'Home',

apps/explorer/tailwind.config.js

@@ -1,6 +1,9 @@
 const { join } = require('path');
 const { createGlobPatternsForDependencies } = require('@nrwl/next/tailwind');
 const theme = require('../../libs/tailwindcss-config/src/theme');
+const {
+  VegaColours,
+} = require('../../libs/tailwindcss-config/src/vega-colours');
 const vegaCustomClasses = require('../../libs/tailwindcss-config/src/vega-custom-classes');
 
 module.exports = {
@@ -11,7 +14,12 @@ module.exports = {
   ],
   darkMode: 'class',
   theme: {
-    extend: theme,
+    extend: {
+      ...theme,
+      colors: {
+        vega: VegaColours,
+      },
+    },
   },
   plugins: [vegaCustomClasses],
 };

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

@@ -1,5 +1,3 @@
-import type { InMemoryCacheConfig } from '@apollo/client';
-import { NetworkLoader, useInitializeEnv } from '@vegaprotocol/environment';
 import { useRoutes } from 'react-router-dom';
 
 import '../styles.scss';
@@ -7,40 +5,14 @@ import { Navbar } from './components/navbar';
 
 import { routerConfig } from './routes/router-config';
 
-const cache: InMemoryCacheConfig = {
-  typePolicies: {
-    Market: {
-      merge: true,
-    },
-    Party: {
-      merge: true,
-    },
-    Query: {},
-    Account: {
-      keyFields: false,
-      fields: {
-        balanceFormatted: {},
-      },
-    },
-    Node: {
-      keyFields: false,
-    },
-    Instrument: {
-      keyFields: false,
-    },
-  },
-};
 const AppRouter = () => useRoutes(routerConfig);
 
 export function App() {
-  useInitializeEnv();
   return (
-    <NetworkLoader cache={cache}>
-      <div className="max-h-full min-h-full bg-white">
-        <Navbar />
-        <AppRouter />
-      </div>
-    </NetworkLoader>
+    <div className="max-h-full min-h-full bg-white">
+      <Navbar />
+      <AppRouter />
+    </div>
   );
 }
 

apps/liquidity-provision-dashboard/src/main.tsx

@@ -1,15 +1,44 @@
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
+import { EnvironmentProvider, NetworkLoader } from '@vegaprotocol/environment';
 
 import App from './app/app';
+import type { InMemoryCacheConfig } from '@apollo/client';
 
 const rootElement = document.getElementById('root');
 const root = rootElement && createRoot(rootElement);
+const cache: InMemoryCacheConfig = {
+  typePolicies: {
+    Market: {
+      merge: true,
+    },
+    Party: {
+      merge: true,
+    },
+    Query: {},
+    Account: {
+      keyFields: false,
+      fields: {
+        balanceFormatted: {},
+      },
+    },
+    Node: {
+      keyFields: false,
+    },
+    Instrument: {
+      keyFields: false,
+    },
+  },
+};
 root?.render(
   <StrictMode>
     <BrowserRouter>
-      <App />
+      <EnvironmentProvider>
+        <NetworkLoader cache={cache}>
+          <App />
+        </NetworkLoader>
+      </EnvironmentProvider>
     </BrowserRouter>
   </StrictMode>
 );

apps/multisig-signer/.env

@@ -2,4 +2,3 @@ NX_VEGA_URL=https://api.stagnet3.vega.xyz/graphql
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/stagnet3-network.json
 NX_VEGA_NETWORKS='{"TESTNET":"https://multisig-signer.fairground.wtf","MAINNET":"https://multisig-signer.vega.xyz"}'
 NX_VEGA_ENV=STAGNET3
-

apps/multisig-signer/src/app/app.tsx

@@ -3,9 +3,9 @@ import classnames from 'classnames';
 import { useEffect, useMemo, useState } from 'react';
 import { BrowserTracing } from '@sentry/tracing';
 import {
+  EnvironmentProvider,
   NetworkLoader,
   useEnvironment,
-  useInitializeEnv,
 } from '@vegaprotocol/environment';
 import { AsyncRenderer, Button, Lozenge } from '@vegaprotocol/ui-toolkit';
 import type { EthereumConfig } from '@vegaprotocol/web3';
@@ -64,7 +64,6 @@ function App() {
       environment: VEGA_ENV,
     });
   }, [VEGA_ENV]);
-
   const Connectors = useMemo(() => {
     if (config?.chain_id) {
       return createConnectors(ETHEREUM_PROVIDER_URL, Number(config.chain_id));
@@ -108,11 +107,12 @@ const Wrapper = () => {
       },
     },
   };
-  useInitializeEnv();
   return (
-    <NetworkLoader cache={cache}>
-      <App />
-    </NetworkLoader>
+    <EnvironmentProvider>
+      <NetworkLoader cache={cache}>
+        <App />
+      </NetworkLoader>
+    </EnvironmentProvider>
   );
 };
 

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

@@ -0,0 +1,952 @@
+/// <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 closedProposals = '[data-testid="closed-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 proposalStatus = '[data-testid="proposal-status"]';
+const rawProposalData = '[data-testid="proposal-data"]';
+const votesTable = '[data-testid="votes-table"]';
+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');
+      });
+
+      // 3001-VOTE-006
+      it('Able to view enacted proposal', function () {
+        cy.createMarket();
+        cy.reload();
+        cy.wait_for_spinner();
+        cy.get(closedProposals).within(() => {
+          cy.get(proposalDetailsTitle).should(
+            'have.text',
+            'Add Lorem Ipsum market'
+          );
+          cy.get(proposalStatus).should('have.text', 'Enacted ');
+          cy.get(viewProposalButton).click();
+        });
+        cy.getByTestId('proposal-type').should('have.text', 'New market');
+        cy.get_proposal_information_from_table('State')
+          .contains('Enacted')
+          .and('be.visible');
+        cy.get(votesTable).within(() => {
+          cy.contains('Vote passed.').should('be.visible');
+          cy.contains('Voting has ended.').should('be.visible');
+        });
+      });
+
+      // 3001-VOTE-047
+      it('Able to enact freeform proposal', function () {
+        const proposalTitle = 'Add New free form proposal with short enactment';
+        cy.ensure_specified_unstaked_tokens_are_associated(
+          this.minProposerBalance
+        );
+        cy.sendWalletTxFreeFormProposal();
+        cy.navigate_to('proposals');
+        cy.reload();
+        cy.wait_for_spinner();
+        cy.contains(proposalTitle)
+          .parentsUntil('[data-testid="proposals-list-item"]')
+          .within(() => cy.get(viewProposalButton).click());
+        cy.get_proposal_information_from_table('State')
+          .contains('Open')
+          .and('be.visible');
+        cy.vote_for_proposal('for');
+        cy.get_proposal_information_from_table('State')
+          .contains('Enacted', epochTimeout)
+          .and('be.visible');
+      });
+
+      // 3001-VOTE-046 3001-VOTE-044 3001-VOTE-074 3001-VOTE-074
+      it('Able to enact proposal by voting', function () {
+        const proposalTitle = 'Add New proposal with short enactment';
+        cy.ensure_specified_unstaked_tokens_are_associated(
+          this.minProposerBalance
+        );
+        cy.sendWalletTxUpdateNetworkProposal();
+        cy.navigate_to('proposals');
+        cy.reload();
+        cy.wait_for_spinner();
+        cy.contains(proposalTitle)
+          .parentsUntil('[data-testid="proposals-list-item"]')
+          .within(() => cy.get(viewProposalButton).click());
+        cy.get_proposal_information_from_table('State')
+          .contains('Open')
+          .and('be.visible');
+        cy.vote_for_proposal('for');
+        cy.get_proposal_information_from_table('State') // 3001-VOTE-047
+          .contains('Passed', txTimeout)
+          .and('be.visible');
+        cy.get_proposal_information_from_table('State')
+          .contains('Enacted', epochTimeout)
+          .and('be.visible');
+        cy.get(votesTable).within(() => {
+          cy.contains('Vote passed.').should('be.visible');
+          cy.contains('Voting has ended.').should('be.visible');
+        });
+        cy.get(proposalVoteProgressForPercentage)
+          .contains('100.00%')
+          .and('be.visible');
+      });
+
+      // 3001-VOTE-048 3001-VOTE-049
+      it('Able to fail proposal due to lack of participation', function () {
+        const proposalTitle = 'Add New free form proposal with short enactment';
+        cy.ensure_specified_unstaked_tokens_are_associated(
+          this.minProposerBalance
+        );
+        cy.sendWalletTxFreeFormProposal();
+        cy.navigate_to('proposals');
+        cy.reload();
+        cy.wait_for_spinner();
+        cy.contains(proposalTitle)
+          .parentsUntil('[data-testid="proposals-list-item"]')
+          .within(() => cy.get(viewProposalButton).click());
+        cy.get_proposal_information_from_table('State')
+          .contains('Open')
+          .and('be.visible');
+        cy.get_proposal_information_from_table('State') // 3001-VOTE-047
+          .contains('Declined', txTimeout)
+          .and('be.visible');
+        cy.get_proposal_information_from_table('Rejection reason')
+          .contains('PROPOSAL_ERROR_PARTICIPATION_THRESHOLD_NOT_REACHED')
+          .and('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/governance-forms-flow.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');