fix: flakely test had welcome dialog blocking trading interface

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

.github/workflows/cypress-run.yml

@@ -82,6 +82,10 @@ 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,150 +1,57 @@
-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();
+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');
 
       // 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 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');
-          });
+      cy.getAssets().then((assets) => {
+        assert.isAtLeast(
+          Object.keys(assets).length,
+          5,
+          'Ensuring we have at least 5 assets to test'
+        );
       });
     });
 
-    it('should be able to see 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];
-
-                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
-                );
-
-                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 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();
+    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');
         });
-
-      // 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);
+      });
+      columns.forEach((col) => {
+        cy.get(`[col-id="${col}"]`).should('be.visible');
+      });
     });
 
-    it('should be able to see assets page displayed in mobile', function () {
-      cy.common_switch_to_mobile_and_click_toggle();
-      cy.get(assetsNavigation).click();
+    it('should be able to see assets page displayed in mobile', () => {
+      cy.switchToMobile();
 
-      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');
-          });
+      hiddenOnMobile.forEach((col) => {
+        cy.get(`[col-id="${col}"]`).should('have.length', 0);
+      });
+
+      cy.getAssets().then((assets) => {
+        Object.values(assets).forEach((asset) => {
+          cy.get(`[row-id="${asset.id}"]`).should('be.visible');
+        });
+      });
+    });
+
+    it('should open details dialog 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('dialog-content').should('be.visible');
+          cy.getByTestId('dialog-close').click();
+        });
       });
     });
   });

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

@@ -247,7 +247,7 @@ context('Network parameters page', { tags: '@smoke' }, function () {
         .and('include', darkThemeSideMenuBackgroundColor);
     });
 
-    it('should be able to see network parameters - on mobile', function () {
+    it.skip('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.get_asset_information().then((assetsInfo) => {
+            cy.getAssets().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.get_asset_information().then((assetsInfo) => {
+      cy.getAssets().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,6 +21,10 @@ 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,10 +1,12 @@
 # App configuration variables
-NX_TENDERMINT_URL=https://n04.d.vega.xyz/tm
-NX_TENDERMINT_WEBSOCKET_URL=wss://n04.d.vega.xyz/tm/websocket
+NX_TENDERMINT_URL=https://tm.be.devnet1.vega.xyz/tm
+NX_TENDERMINT_WEBSOCKET_URL=wss://tm.be.devnet1.vega.xyz/websocket
 NX_VEGA_CONFIG_URL=https://static.vega.xyz/assets/devnet-network.json
 NX_VEGA_NETWORKS={\"MAINNET"\:\"https://explorer.vega.xyz"\,\"TESTNET\":\"https://explorer.fairground.wtf\"}
 NX_VEGA_ENV=DEVNET
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_BLOCK_EXPLORER=https://be.devnet1.vega.xyz/rest
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
-NX_VEGA_GOVERNANCE_URL=https://dev.token.vega.xyz
+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

apps/explorer/src/app/app.tsx

@@ -1,72 +1,68 @@
 import classnames from 'classnames';
-import { useState, useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
-import { EnvironmentProvider, NetworkLoader } from '@vegaprotocol/environment';
+import { NetworkLoader, useInitializeEnv } 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',
-    {
-      'h-[100vh] min-h-auto overflow-hidden': menuOpen,
-    }
+    'overflow-hidden relative'
   );
 
   return (
     <TendermintWebsocketProvider>
-      <NetworkLoader cache={cacheConfig}>
+      <NetworkLoader cache={DEFAULT_CACHE_CONFIG}>
         <AnnouncementBanner>
           <div className="font-alpha calt uppercase text-center text-lg text-white">
-            <span className="pr-4">The Mainnet sims are live!</span>
+            <span className="pr-4">Mainnet sim 2 coming in March!</span>
             <ExternalLink href="https://fairground.wtf/">
-              Come help stress test the network
+              Learn more
             </ExternalLink>
           </div>
         </AnnouncementBanner>
 
         <div className={layoutClasses}>
-          <Header menuOpen={menuOpen} setMenuOpen={setMenuOpen} />
-          <Nav menuOpen={menuOpen} />
+          <Header />
+          <Nav />
           <Main />
           <Footer />
         </div>
+
+        <DialogsContainer />
       </NetworkLoader>
     </TendermintWebsocketProvider>
   );
 }
 
 const Wrapper = () => {
-  return (
-    <EnvironmentProvider>
-      <App />
-    </EnvironmentProvider>
-  );
+  useInitializeEnv();
+  return <App />;
 };
 
 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,21 +17,17 @@ const AssetBalance = ({
   price,
   showAssetLink = true,
 }: AssetBalanceProps) => {
-  const { data } = useExplorerAssetQuery({
-    variables: { id: assetId },
-  });
+  const { data: asset } = useAssetDataProvider(assetId);
 
   const label =
-    data && data.asset?.decimals
-      ? addDecimalsFormatNumber(price, data.asset.decimals)
+    asset && asset.decimals
+      ? addDecimalsFormatNumber(price, asset.decimals)
       : price;
 
   return (
     <div className="inline-block">
       <span>{label}</span>{' '}
-      {showAssetLink && data?.asset?.id ? (
-        <AssetLink id={data.asset.id} />
-      ) : null}
+      {showAssetLink && asset?.id ? <AssetLink assetId={assetId} /> : null}
     </div>
   );
 };

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

@@ -0,0 +1,28 @@
+import { render, waitFor } from '@testing-library/react';
+import { assetsList } from '../../mocks/assets';
+import { AssetsTable } from './assets-table';
+
+describe('AssetsTable', () => {
+  it('shows loading message on first render', async () => {
+    const res = render(<AssetsTable data={null} />);
+    expect(await res.findByText('Loading...')).toBeInTheDocument();
+  });
+
+  it('shows no data message if no assets found', async () => {
+    const res = render(<AssetsTable data={[]} />);
+    expect(
+      await res.findByText('This chain has no assets')
+    ).toBeInTheDocument();
+  });
+
+  it('shows a table/list with all the assets', async () => {
+    const res = render(<AssetsTable data={assetsList} />);
+    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

@@ -0,0 +1,115 @@
+import type { AssetFieldsFragment } from '@vegaprotocol/assets';
+import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
+import { AssetTypeMapping, AssetStatusMapping } from '@vegaprotocol/assets';
+import { t } from '@vegaprotocol/react-helpers';
+import type { VegaICellRendererParams } from '@vegaprotocol/ui-toolkit';
+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';
+
+type AssetsTableProps = {
+  data: AssetFieldsFragment[] | null;
+};
+export const AssetsTable = ({ data }: AssetsTableProps) => {
+  const openAssetDetailsDialog = useAssetDetailsDialogStore(
+    (state) => state.open
+  );
+
+  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}
+      onGridReady={() => {
+        showColumnsOnDesktop();
+      }}
+    >
+      <AgGridColumn headerName={t('Symbol')} field="symbol" />
+      <AgGridColumn headerName={t('Name')} field="name" />
+      <AgGridColumn flex="2" headerName={t('ID')} field="id" />
+      <AgGridColumn
+        colId="type"
+        headerName={t('Type')}
+        field="source.__typename"
+        valueFormatter={({ value }: { value?: string }) =>
+          value && AssetTypeMapping[value].value
+        }
+      />
+      <AgGridColumn
+        headerName={t('Status')}
+        field="status"
+        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 ? (
+            <div className="pb-1">
+              <ButtonLink
+                onClick={(e) => {
+                  openAssetDetailsDialog(value, e.target as HTMLElement);
+                }}
+              >
+                {t('View details')}
+              </ButtonLink>{' '}
+              <span className="max-md:hidden">
+                <ButtonLink
+                  onClick={(e) => {
+                    openAssetDetailsDialog(
+                      value,
+                      e.target as HTMLElement,
+                      true
+                    );
+                  }}
+                >
+                  {t('View JSON')}
+                </ButtonLink>
+              </span>
+            </div>
+          ) : (
+            ''
+          )
+        }
+      />
+    </AgGrid>
+  );
+};

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

@@ -0,0 +1,56 @@
+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,39 +1,46 @@
-import { useEnvironment } from '@vegaprotocol/environment';
+import { NodeSwitcherDialog, useEnvironment } from '@vegaprotocol/environment';
 import { t } from '@vegaprotocol/react-helpers';
 import { Link } from '@vegaprotocol/ui-toolkit';
+import { useState } from 'react';
 
 export const Footer = () => {
-  const { VEGA_URL, GIT_COMMIT_HASH, GIT_ORIGIN_URL, setNodeSwitcherOpen } =
-    useEnvironment();
+  const { VEGA_URL, GIT_COMMIT_HASH, GIT_ORIGIN_URL } = useEnvironment();
+  const [nodeSwitcherOpen, setNodeSwitcherOpen] = useState(false);
   return (
-    <footer className="grid grid-rows-2 grid-cols-[1fr_auto] text-xs md:text-md md:flex md:col-span-2 px-4 py-2 gap-4 border-t border-neutral-700 dark:border-neutral-300">
-      <div className="flex justify-between gap-2 align-middle">
-        <div className="content-center flex border-r border-neutral-700 dark:border-neutral-300 pr-4">
-          {GIT_COMMIT_HASH && (
-            <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>
+    <>
+      <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 && (
+              <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>
 
-        <div className="flex pl-2 content-center">
-          {VEGA_URL && <NodeUrl url={VEGA_URL} />}
-          <Link className="ml-2" onClick={setNodeSwitcherOpen}>
-            {t('Change')}
-          </Link>
+          <div className="flex pl-2 content-center">
+            {VEGA_URL && <NodeUrl url={VEGA_URL} />}
+            <Link className="ml-2" onClick={() => setNodeSwitcherOpen(true)}>
+              {t('Change')}
+            </Link>
+          </div>
         </div>
-      </div>
-    </footer>
+      </footer>
+      <NodeSwitcherDialog
+        open={nodeSwitcherOpen}
+        setOpen={setNodeSwitcherOpen}
+      />
+    </>
   );
 };
 

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

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

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

@@ -4,15 +4,11 @@ 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';
 
-interface ThemeToggleProps {
-  menuOpen: boolean;
-  setMenuOpen: Dispatch<SetStateAction<boolean>>;
-}
-
-export const Header = ({ menuOpen, setMenuOpen }: ThemeToggleProps) => {
+export const Header = () => {
+  const [open, toggle] = useNavStore((state) => [state.open, state.toggle]);
   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',
@@ -36,9 +32,9 @@ export const Header = ({ menuOpen, setMenuOpen }: ThemeToggleProps) => {
       <button
         data-testid="open-menu"
         className="md:hidden text-white"
-        onClick={() => setMenuOpen(!menuOpen)}
+        onClick={() => toggle()}
       >
-        <Icon name={menuOpen ? 'cross' : 'menu'} />
+        <Icon name={open ? 'cross' : 'menu'} />
       </button>
       <Search />
       <ThemeSwitcher className="-my-4" />

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

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

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

@@ -1,51 +0,0 @@
-import * as Types from '@vegaprotocol/types';
-
-import { gql } from '@apollo/client';
-import * as Apollo from '@apollo/client';
-const defaultOptions = {} as const;
-export type 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,63 +1,37 @@
 import { MemoryRouter } from 'react-router-dom';
 import { MockedProvider } from '@apollo/client/testing';
 import type { MockedResponse } from '@apollo/client/testing';
-import { render } from '@testing-library/react';
-import AssetLink from './asset-link';
-import { ExplorerAssetDocument } from './__generated__/Asset';
+import { render, waitFor } from '@testing-library/react';
+import { AssetLink } from './asset-link';
+import { mockAssetA1 } from '../../../mocks/assets';
 
 function renderComponent(id: string, mock: MockedResponse[]) {
   return (
-    <MockedProvider mocks={mock}>
+    <MockedProvider mocks={mock} addTypename={false}>
       <MemoryRouter>
-        <AssetLink id={id} />
+        <AssetLink assetId={id} />
       </MemoryRouter>
     </MockedProvider>
   );
 }
 
-describe('Asset link component', () => {
-  it('Renders the ID at first', () => {
+describe('AssetLink', () => {
+  it('renders the asset id when not found and makes the button disabled', async () => {
     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 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,
-          },
-        },
-      },
-    };
-
-    const res = render(renderComponent('123', [mock]));
+  it('renders the asset name when found and make the button enabled', async () => {
+    const res = render(renderComponent('123', [mockAssetA1]));
     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();
+    await waitFor(async () => {
+      expect(await res.findByText('A ONE')).toBeInTheDocument();
+      expect(await res.findByTestId('asset-link')).not.toBeDisabled();
+    });
   });
 });

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

@@ -1,36 +1,35 @@
-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';
 
-export type AssetLinkProps = Partial<ComponentProps<typeof Link>> & {
-  id: string;
+export type AssetLinkProps = Partial<ComponentProps<typeof ButtonLink>> & {
+  assetId: string;
 };
 
 /**
  * Given an asset ID, it will fetch the asset name and show that,
- * with a link to the assets list. If the name does not come back
+ * with a link to the assets modal. If the name does not come back
  * it will use the ID instead.
  */
-const AssetLink = ({ id, ...props }: AssetLinkProps) => {
-  const { data } = useExplorerAssetQuery({
-    variables: { id },
-  });
-
-  let label: string = id;
-
-  if (data?.asset?.name) {
-    label = data.asset.name;
-  }
+export const AssetLink = ({ assetId, ...props }: AssetLinkProps) => {
+  const { data: asset } = useAssetDataProvider(assetId);
 
+  const open = useAssetDetailsDialogStore((state) => state.open);
+  const label = asset?.name ? asset.name : assetId;
   return (
-    <Link className="underline" {...props} to={`/${Routes.ASSETS}#${id}`}>
+    <ButtonLink
+      data-testid="asset-link"
+      disabled={!asset}
+      onClick={(e) => {
+        open(assetId, e.target as HTMLElement);
+      }}
+      {...props}
+    >
       <Hash text={label} />
-    </Link>
+    </ButtonLink>
   );
 };
-
-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 { default as AssetLink } from './asset-link/asset-link';
+export * 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 overflow-scroll">
+    <main className="p-4">
       <AppRouter />
     </main>
   );

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

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

@@ -0,0 +1,132 @@
+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,45 +1 @@
-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>
-  );
-};
+export * from './nav';

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

@@ -0,0 +1,181 @@
+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/order-summary/order-summary.tsx

@@ -1,6 +1,7 @@
 import { useExplorerDeterministicOrderQuery } from '../order-details/__generated__/Order';
 import PriceInMarket from '../price-in-market/price-in-market';
 import { sideText } from '../order-details/lib/order-labels';
+import SizeInMarket from '../size-in-market/size-in-market';
 
 // Note: Edited has no style currently
 export type OrderSummaryModifier = 'cancelled' | 'edited';
@@ -41,7 +42,8 @@ const OrderSummary = ({ id, modifier }: OrderSummaryProps) => {
   return (
     <div data-testid="order-summary" className={getClassName(modifier)}>
       <span>{sideText[order.side]}</span>&nbsp;
-      <span>{order.size}</span>&nbsp;<i>@</i>&nbsp;
+      <SizeInMarket marketId={order.market.id} size={order.size} />
+      &nbsp;<i>@</i>&nbsp;
       <PriceInMarket marketId={order.market.id} price={order.price} />
     </div>
   );

apps/explorer/src/app/components/order-summary/order-tx-summary.spec.tsx

@@ -112,13 +112,14 @@ describe('Order TX Summary component', () => {
     const res = renderComponent(o, [mock]);
     expect(res.queryByTestId('order-summary')).toBeInTheDocument();
     expect(res.getByText('Buy')).toBeInTheDocument();
-    expect(res.getByText('10')).toBeInTheDocument();
 
-    // Initially renders price alone
+    // Initially renders price and size unformatted
     expect(res.getByText('333')).toBeInTheDocument();
+    expect(res.getByText('10')).toBeInTheDocument();
 
     // After fetch renders formatted price and asset quotename
     expect(await res.findByText('3.33')).toBeInTheDocument();
     expect(await res.findByText('TEST')).toBeInTheDocument();
+    expect(await res.getByText('0.10')).toBeInTheDocument();
   });
 });

apps/explorer/src/app/components/order-summary/order-tx-summary.tsx

@@ -2,6 +2,7 @@ import type { components } from '../../../types/explorer';
 
 import PriceInMarket from '../price-in-market/price-in-market';
 import { sideText } from '../order-details/lib/order-labels';
+import SizeInMarket from '../size-in-market/size-in-market';
 
 export type OrderSummaryProps = {
   order: components['schemas']['v1OrderSubmission'];
@@ -29,7 +30,12 @@ const OrderTxSummary = ({ order }: OrderSummaryProps) => {
   return (
     <div data-testid="order-summary">
       <span>{sideText[order.side]}</span>&nbsp;
-      <span>{order.size}</span>&nbsp;<i className="text-xs">@</i>&nbsp;
+      {order.size ? (
+        <SizeInMarket size={order.size} marketId={order.marketId} />
+      ) : (
+        '-'
+      )}
+      &nbsp;<i className="text-xs">@</i>&nbsp;
       <PriceInMarket
         marketId={order.marketId}
         price={order.price}

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

@@ -7,7 +7,7 @@ import type { DecimalSource } from './size-in-market';
 import { ExplorerMarketDocument } from '../links/market-link/__generated__/Market';
 
 function renderComponent(
-  price: string,
+  size: string | undefined,
   marketId: string,
   mocks: MockedResponse[],
   decimalSource: DecimalSource = 'MARKET'
@@ -17,7 +17,7 @@ function renderComponent(
       <MemoryRouter>
         <SizeInMarket
           marketId={marketId}
-          size={price}
+          size={size}
           decimalSource={decimalSource}
         />
       </MemoryRouter>
@@ -57,6 +57,11 @@ const fullMock = {
 };
 
 describe('Size in Market component', () => {
+  it('Renders a dash size when there is no size', () => {
+    const res = render(renderComponent(undefined, '123', []));
+    expect(res.getByText('-')).toBeInTheDocument();
+  });
+
   it('Renders the raw size when there is no market data', () => {
     const res = render(renderComponent('100', '123', []));
     expect(res.getByText('100')).toBeInTheDocument();

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

@@ -5,7 +5,7 @@ export type DecimalSource = 'MARKET';
 
 export type PriceInMarketProps = {
   marketId: string;
-  size: string | number;
+  size?: string | number;
   decimalSource?: DecimalSource;
 };
 
@@ -22,6 +22,9 @@ const SizeInMarket = ({
     variables: { id: marketId },
     fetchPolicy: 'cache-first',
   });
+  if (!size) {
+    return <span>-</span>;
+  }
 
   let label = size;
 

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

@@ -3,6 +3,7 @@ import React from 'react';
 import classnames from 'classnames';
 
 interface TableProps {
+  allowWrap?: boolean;
   children: React.ReactNode;
   className?: string;
 }
@@ -25,8 +26,15 @@ interface TableCellProps extends ThHTMLAttributes<HTMLTableCellElement> {
   modifier?: 'bordered' | 'background';
 }
 
-export const Table = ({ children, className, ...props }: TableProps) => {
-  const classes = classnames(className, 'overflow-x-auto whitespace-nowrap');
+export const Table = ({
+  allowWrap,
+  children,
+  className,
+  ...props
+}: TableProps) => {
+  const classes = allowWrap
+    ? className
+    : classnames(className, 'overflow-x-auto whitespace-nowrap');
   return (
     <div className={classes}>
       <table className="w-full" {...props}>
@@ -37,11 +45,14 @@ export const Table = ({ children, className, ...props }: TableProps) => {
 };
 
 export const TableWithTbody = ({
+  allowWrap,
   children,
   className,
   ...props
 }: TableProps) => {
-  const classes = classnames(className, 'overflow-x-auto whitespace-nowrap');
+  const classes = allowWrap
+    ? className
+    : 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,9 +76,7 @@ describe('Chain Event: Builtin asset deposit', () => {
     if (!assetLink.parentElement) {
       throw new Error('Asset link does not exist');
     }
-    expect(assetLink.parentElement.tagName).toEqual('A');
-    expect(assetLink.parentElement.getAttribute('href')).toEqual(
-      `/assets#${fullMock.vegaAssetId}`
-    );
+    expect(assetLink.parentElement.tagName).toEqual('BUTTON');
+    expect(assetLink.parentElement.textContent).toEqual(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 id={deposit.vegaAssetId} /> ({t('built in asset')})
+          <AssetLink assetId={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,9 +82,7 @@ describe('Chain Event: Builtin asset withdrawal', () => {
     if (!assetLink.parentElement) {
       throw new Error('Asset link does not exist');
     }
-    expect(assetLink.parentElement.tagName).toEqual('A');
-    expect(assetLink.parentElement.getAttribute('href')).toEqual(
-      `/assets#${fullMock.vegaAssetId}`
-    );
+    expect(assetLink.parentElement.tagName).toEqual('BUTTON');
+    expect(assetLink.parentElement.textContent).toEqual(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 id={withdrawal.vegaAssetId || ''} /> ({t('built in asset')}
-          )
+          <AssetLink assetId={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,9 +63,7 @@ describe('Chain Event: ERC20 Asset Delist', () => {
     if (!assetLink.parentElement) {
       throw new Error('Asset link does not exist');
     }
-    expect(assetLink.parentElement.tagName).toEqual('A');
-    expect(assetLink.parentElement.getAttribute('href')).toEqual(
-      `/assets#${fullMock.vegaAssetId}`
-    );
+    expect(assetLink.parentElement.tagName).toEqual('BUTTON');
+    expect(assetLink.parentElement.textContent).toEqual(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 id={assetDelist.vegaAssetId || ''} />
+          <AssetLink assetId={assetDelist.vegaAssetId || ''} />
         </TableCell>
       </TableRow>
     </>

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

@@ -79,10 +79,8 @@ describe('Chain Event: ERC20 Asset limits updated', () => {
     if (!assetLink.parentElement) {
       throw new Error('Asset link does not exist');
     }
-    expect(assetLink.parentElement.tagName).toEqual('A');
-    expect(assetLink.parentElement.getAttribute('href')).toEqual(
-      `/assets#${fullMock.vegaAssetId}`
-    );
+    expect(assetLink.parentElement.tagName).toEqual('BUTTON');
+    expect(assetLink.parentElement.textContent).toEqual(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 id={assetLimitsUpdated.vegaAssetId} />
+          <AssetLink assetId={assetLimitsUpdated.vegaAssetId} />
         </TableCell>
       </TableRow>
       <TableRow modifier="bordered">

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

@@ -65,10 +65,8 @@ describe('Chain Event: ERC20 Asset List', () => {
     if (!assetLink.parentElement) {
       throw new Error('Asset link does not exist');
     }
-    expect(assetLink.parentElement.tagName).toEqual('A');
-    expect(assetLink.parentElement.getAttribute('href')).toEqual(
-      `/assets#${fullMock.vegaAssetId}`
-    );
+    expect(assetLink.parentElement.tagName).toEqual('BUTTON');
+    expect(assetLink.parentElement.textContent).toEqual(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 id={assetList.vegaAssetId} />
+          <AssetLink assetId={assetList.vegaAssetId} />
         </TableCell>
       </TableRow>
     </>

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

@@ -75,10 +75,8 @@ describe('Chain Event: ERC20 asset deposit', () => {
     if (!assetLink.parentElement) {
       throw new Error('Asset link does not exist');
     }
-    expect(assetLink.parentElement.tagName).toEqual('A');
-    expect(assetLink.parentElement.getAttribute('href')).toEqual(
-      `/assets#${fullMock.vegaAssetId}`
-    );
+    expect(assetLink.parentElement.tagName).toEqual('BUTTON');
+    expect(assetLink.parentElement.textContent).toEqual(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 id={deposit.vegaAssetId} />
+          <AssetLink assetId={deposit.vegaAssetId} />
         </TableCell>
       </TableRow>
       <TableRow modifier="bordered">

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

@@ -60,10 +60,8 @@ describe('Chain Event: ERC20 asset deposit', () => {
     if (!assetLink.parentElement) {
       throw new Error('Asset link does not exist');
     }
-    expect(assetLink.parentElement.tagName).toEqual('A');
-    expect(assetLink.parentElement.getAttribute('href')).toEqual(
-      `/assets#${fullMock.vegaAssetId}`
-    );
+    expect(assetLink.parentElement.tagName).toEqual('BUTTON');
+    expect(assetLink.parentElement.textContent).toEqual(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 id={withdrawal.vegaAssetId} />
+          <AssetLink assetId={withdrawal.vegaAssetId} />
         </TableCell>
       </TableRow>
     </>

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

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

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

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

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

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

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

@@ -0,0 +1,16 @@
+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">
+      <TableWithTbody className="mb-8" allowWrap={true}>
         <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">
+    <TableWithTbody className="mb-8" allowWrap={true}>
       <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">
+      <TableWithTbody className="mb-8" allowWrap={true}>
         <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">
+    <TableWithTbody className="mb-8" allowWrap={true}>
       <TxDetailsShared txData={txData} pubKey={pubKey} blockData={blockData} />
       {d.nodeId ? (
         <TableRow modifier="bordered">

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

@@ -21,6 +21,8 @@ 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;
@@ -68,6 +70,8 @@ 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':
@@ -102,6 +106,8 @@ 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

@@ -0,0 +1,80 @@
+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">
+    <TableWithTbody className="mb-8" allowWrap={true}>
       <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">
+    <TableWithTbody className="mb-8" allowWrap={true}>
       <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

@@ -0,0 +1,67 @@
+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">
+      <TableWithTbody className="mb-8" allowWrap={true}>
         <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">
+    <TableWithTbody className="mb-8" allowWrap={true}>
       <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">
+      <TableWithTbody className="mb-8" allowWrap={true}>
         <TxDetailsShared
           txData={txData}
           pubKey={pubKey}

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

@@ -0,0 +1,112 @@
+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">
+    <TableWithTbody className="mb-8" allowWrap={true}>
       <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">
+      <TableWithTbody className="mb-8" allowWrap={true}>
         <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">
+      <TableWithTbody className="mb-8" allowWrap={true}>
         <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">
+      <TableWithTbody className="mb-8" allowWrap={true}>
         <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">
+    <TableWithTbody className="mb-8" allowWrap={true}>
       <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

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

@@ -0,0 +1,113 @@
+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">
+    <TableWithTbody className="mb-8" allowWrap={true}>
       <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">
+      <TableWithTbody className="mb-8" allowWrap={true}>
         <TxDetailsShared
           txData={txData}
           pubKey={pubKey}

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

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

apps/explorer/src/app/mocks/assets.ts

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

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

@@ -1,73 +0,0 @@
-import * as Types from '@vegaprotocol/types';
-
-import { gql } from '@apollo/client';
-import * as Apollo from '@apollo/client';
-const defaultOptions = {} as const;
-export type 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/assets.tsx

@@ -0,0 +1,30 @@
+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 Assets = () => {
+  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

@@ -1,44 +0,0 @@
-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,53 +1 @@
-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;
+export * from './assets';

apps/explorer/src/app/routes/markets/Markets.graphql

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

@@ -1,180 +0,0 @@
-import * as Types from '@vegaprotocol/types';
-
-import { gql } from '@apollo/client';
-import * as Apollo from '@apollo/client';
-const defaultOptions = {} as const;
-export type 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

@@ -1,48 +0,0 @@
-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,44 +1,2 @@
-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;
+export * from './markets-page';
+export * from './market-page';

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

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

@@ -0,0 +1,31 @@
+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 id={account.asset.id} />
+                <AssetLink assetId={account.asset.id} />
               </td>
             </TableRow>
           );

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

@@ -1,8 +1,7 @@
-import Assets from './assets';
+import { Assets } from './assets';
 import BlockPage from './blocks';
 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';
@@ -21,8 +20,13 @@ 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';
 
-const partiesRoutes = flags.parties
+export type Navigable = { path: string; name: string; text: string };
+type Route = RouteObject & Navigable;
+
+const partiesRoutes: Route[] = flags.parties
   ? [
       {
         path: Routes.PARTIES,
@@ -43,7 +47,7 @@ const partiesRoutes = flags.parties
     ]
   : [];
 
-const assetsRoutes = flags.assets
+const assetsRoutes: Route[] = flags.assets
   ? [
       {
         path: Routes.ASSETS,
@@ -54,7 +58,7 @@ const assetsRoutes = flags.assets
     ]
   : [];
 
-const genesisRoutes = flags.genesis
+const genesisRoutes: Route[] = flags.genesis
   ? [
       {
         path: Routes.GENESIS,
@@ -65,7 +69,7 @@ const genesisRoutes = flags.genesis
     ]
   : [];
 
-const governanceRoutes = flags.governance
+const governanceRoutes: Route[] = flags.governance
   ? [
       {
         path: Routes.GOVERNANCE,
@@ -76,18 +80,27 @@ const governanceRoutes = flags.governance
     ]
   : [];
 
-const marketsRoutes = flags.markets
+const marketsRoutes: Route[] = flags.markets
   ? [
       {
         path: Routes.MARKETS,
         name: 'Markets',
         text: t('Markets'),
-        element: <Markets />,
+        children: [
+          {
+            index: true,
+            element: <MarketsPage />,
+          },
+          {
+            path: ':marketId',
+            element: <MarketPage />,
+          },
+        ],
       },
     ]
   : [];
 
-const networkParametersRoutes = flags.networkParameters
+const networkParametersRoutes: Route[] = flags.networkParameters
   ? [
       {
         path: Routes.NETWORK_PARAMETERS,
@@ -97,7 +110,7 @@ const networkParametersRoutes = flags.networkParameters
       },
     ]
   : [];
-const validators = flags.validators
+const validators: Route[] = flags.validators
   ? [
       {
         path: Routes.VALIDATORS,
@@ -108,7 +121,7 @@ const validators = flags.validators
     ]
   : [];
 
-const routerConfig = [
+const routerConfig: Route[] = [
   {
     path: Routes.HOME,
     name: 'Home',

apps/explorer/tailwind.config.js

@@ -1,9 +1,6 @@
 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 = {
@@ -14,12 +11,7 @@ module.exports = {
   ],
   darkMode: 'class',
   theme: {
-    extend: {
-      ...theme,
-      colors: {
-        vega: VegaColours,
-      },
-    },
+    extend: theme,
   },
   plugins: [vegaCustomClasses],
 };

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

@@ -1,3 +1,5 @@
+import type { InMemoryCacheConfig } from '@apollo/client';
+import { NetworkLoader, useInitializeEnv } from '@vegaprotocol/environment';
 import { useRoutes } from 'react-router-dom';
 
 import '../styles.scss';
@@ -5,14 +7,40 @@ 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 (
-    <div className="max-h-full min-h-full bg-white">
-      <Navbar />
-      <AppRouter />
-    </div>
+    <NetworkLoader cache={cache}>
+      <div className="max-h-full min-h-full bg-white">
+        <Navbar />
+        <AppRouter />
+      </div>
+    </NetworkLoader>
   );
 }
 

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

@@ -39,10 +39,8 @@ export const MarketList = () => {
 
   const getRowId = useCallback(({ data }: GetRowIdParams) => data.id, []);
 
-  const localData = data?.markets;
-
   return (
-    <AsyncRenderer loading={loading} error={error} data={localData}>
+    <AsyncRenderer loading={loading} error={error} data={data}>
       <div
         className="grow w-full"
         style={{ minHeight: 500, overflow: 'hidden' }}
@@ -57,7 +55,7 @@ export const MarketList = () => {
               );
             },
           }}
-          rowData={localData}
+          rowData={data}
           defaultColDef={{
             resizable: true,
             sortable: true,

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

@@ -1,44 +1,15 @@
 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>
-      <EnvironmentProvider>
-        <NetworkLoader cache={cache}>
-          <App />
-        </NetworkLoader>
-      </EnvironmentProvider>
+      <App />
     </BrowserRouter>
   </StrictMode>
 );

apps/multisig-signer/.env

@@ -2,3 +2,4 @@ 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,6 +64,7 @@ function App() {
       environment: VEGA_ENV,
     });
   }, [VEGA_ENV]);
+
   const Connectors = useMemo(() => {
     if (config?.chain_id) {
       return createConnectors(ETHEREUM_PROVIDER_URL, Number(config.chain_id));
@@ -107,12 +108,11 @@ const Wrapper = () => {
       },
     },
   };
+  useInitializeEnv();
   return (
-    <EnvironmentProvider>
-      <NetworkLoader cache={cache}>
-        <App />
-      </NetworkLoader>
-    </EnvironmentProvider>
+    <NetworkLoader cache={cache}>
+      <App />
+    </NetworkLoader>
   );
 };
 

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

@@ -0,0 +1,143 @@
+/// <reference types="cypress" />
+
+import {
+  createUpdateNetworkProposalTxBody,
+  createFreeFormProposalTxBody,
+} from '../../support/proposal.functions';
+
+const closedProposals = '[data-testid="closed-proposals"]';
+const proposalStatus = '[data-testid="proposal-status"]';
+const viewProposalButton = '[data-testid="view-proposal-btn"]';
+const votesTable = '[data-testid="votes-table"]';
+const openProposals = '[data-testid="open-proposals"]';
+const proposalVoteProgressForPercentage =
+  '[data-testid="vote-progress-indicator-percentage-for"]';
+const proposalTimeout = { timeout: 8000 };
+
+context(
+  'Proposal flow - with proposals enacted or failed',
+  { tags: '@slow' },
+  function () {
+    before('Connect wallets and set approval', function () {
+      cy.visit('/');
+      cy.vega_wallet_set_specified_approval_amount('1000');
+      cy.connectVegaWallet();
+      cy.ethereum_wallet_connect();
+      cy.ensure_specified_unstaked_tokens_are_associated(1);
+      cy.clearLocalStorage();
+    });
+
+    beforeEach('visit proposals', function () {
+      cy.reload();
+      cy.wait_for_spinner();
+      cy.connectVegaWallet();
+      cy.ethereum_wallet_connect();
+      cy.navigate_to('proposals');
+    });
+
+    // 3001-VOTE-006
+    it('Able to view enacted proposal', function () {
+      const proposalTitle = 'Add Lorem Ipsum market';
+
+      cy.createMarket();
+      cy.reload();
+      cy.wait_for_spinner();
+      cy.get(closedProposals).within(() => {
+        cy.contains(proposalTitle)
+          .parentsUntil('[data-testid="proposals-list-item"]')
+          .within(() => {
+            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-046 3001-VOTE-044 3001-VOTE-074 3001-VOTE-074
+    it('Able to enact proposal by voting', function () {
+      const proposalTitle = 'Add New proposal with short enactment';
+      const proposalTx = createUpdateNetworkProposalTxBody();
+
+      cy.VegaWalletSubmitProposal(proposalTx);
+      cy.navigate_to('proposals');
+      cy.reload();
+      cy.wait_for_spinner();
+      cy.get(openProposals).within(() => {
+        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', proposalTimeout)
+        .and('be.visible');
+      cy.get_proposal_information_from_table('State')
+        .contains('Enacted', proposalTimeout)
+        .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-047
+    it('Able to enact freeform proposal', function () {
+      const proposalTitle = 'Add New free form proposal with short enactment';
+      const proposalTx = createFreeFormProposalTxBody();
+
+      cy.VegaWalletSubmitProposal(proposalTx);
+      cy.navigate_to('proposals');
+      cy.reload();
+      cy.wait_for_spinner();
+      cy.get(openProposals).within(() => {
+        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', proposalTimeout)
+        .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';
+      const proposalTx = createFreeFormProposalTxBody();
+      cy.VegaWalletSubmitProposal(proposalTx);
+      cy.navigate_to('proposals');
+      cy.reload();
+      cy.wait_for_spinner();
+      cy.get(openProposals).within(() => {
+        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', proposalTimeout)
+        .and('be.visible');
+      cy.get_proposal_information_from_table('Rejection reason')
+        .contains('PROPOSAL_ERROR_PARTICIPATION_THRESHOLD_NOT_REACHED')
+        .and('be.visible');
+    });
+  }
+);

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

@@ -1,4 +1,5 @@
 /// <reference types="cypress" />
+
 const vegaWalletUnstakedBalance =
   '[data-testid="vega-wallet-balance-unstaked"]';
 const vegaWalletStakedBalances =
@@ -11,7 +12,6 @@ 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 =
@@ -23,9 +23,7 @@ const proposalVoteProgressAgainstTokens =
 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"]';
@@ -787,107 +785,6 @@ context(
         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);

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

@@ -866,6 +866,10 @@ context(
 
         cy.get(stakeTokenSubmitButton).should('contain', 'Add 1 $VEGA tokens');
       });
+
+      after('teardown wallet', function () {
+        cy.vega_wallet_teardown();
+      });
     });
   }
 );

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

@@ -7,26 +7,9 @@ const navWithdraw = '[href="/token/withdraw"]';
 const navGovernance = '[href="/proposals"]';
 const navRedeem = '[href="/token/redeem"]';
 
-const tokenDetailsTable = '.token-details';
-const address = '[data-testid="token-address"]';
-const contract = '[data-testid="token-contract"]';
-const totalSupply = '[data-testid="total-supply"]';
-const circulatingSupply = '[data-testid="circulating-supply"]';
-const staked = '[data-testid="staked"]';
-const tranchesLink = '[data-testid="tranches-link"]';
-const redeemBtn = '[data-testid="check-vesting-page-btn"]';
-const getVegaWalletLink = '[data-testid="get-vega-wallet-link"]';
-const associateVegaLink =
-  '[data-testid="associate-vega-tokens-link-on-homepage"]';
-const stakingBtn = '[data-testid="staking-button-on-homepage"]';
-const governanceBtn = '[data-testid="governance-button-on-homepage"]';
-
-const vegaTokenAddress = Cypress.env('vegaTokenAddress');
-const vegaTokenContractAddress = Cypress.env('vegaTokenContractAddress');
-
 context('Home Page - verify elements on page', { tags: '@smoke' }, function () {
   before('visit token home page', function () {
-    cy.visit('/token');
+    cy.visit('/');
   });
 
   describe('with wallets disconnected', function () {
@@ -54,7 +37,7 @@ context('Home Page - verify elements on page', { tags: '@smoke' }, function () {
       describe('Token dropdown', function () {
         before('click on token dropdown', function () {
           cy.get(navSection).within(() => {
-            cy.getByTestId('state-trigger').click();
+            cy.getByTestId('state-trigger').realClick();
           });
         });
         it('should have token dropdown', function () {
@@ -72,80 +55,73 @@ context('Home Page - verify elements on page', { tags: '@smoke' }, function () {
       });
     });
 
-    describe('THE $VEGA TOKEN table', function () {
-      it('should have TOKEN ADDRESS', function () {
-        cy.get(tokenDetailsTable).within(() => {
-          cy.get(address)
-            .should('be.visible')
-            .invoke('text')
-            .should('be.equal', vegaTokenAddress);
+    describe('Links and buttons', function () {
+      it('should have link for proposal page', function () {
+        cy.getByTestId('home-proposals').within(() => {
+          cy.get('[href="/proposals"]')
+            .should('exist')
+            .and('have.text', 'Browse, vote, and propose');
         });
       });
-      it('should have VESTING CONTRACT', function () {
-        // 1004-ASSO-001
-        cy.get(tokenDetailsTable).within(() => {
-          cy.get(contract)
-            .should('be.visible')
-            .invoke('text')
-            .should('be.equal', vegaTokenContractAddress);
+      it('should have external link for governance', function () {
+        cy.getByTestId('home-proposals').within(() => {
+          cy.getByTestId('external-link')
+            .should('have.attr', 'href')
+            .and('contain', 'https://vega.xyz/governance');
         });
       });
-      it('should have TOTAL SUPPLY', function () {
-        cy.get(tokenDetailsTable).within(() => {
-          cy.get(totalSupply).should('be.visible');
+      it('should have link for validator page', function () {
+        cy.getByTestId('home-validators').within(() => {
+          cy.get('[href="/validators"]')
+            .first()
+            .should('exist')
+            .and('have.text', 'Browse, and stake');
         });
       });
-      it('should have CIRCULATING SUPPLY', function () {
-        cy.get(tokenDetailsTable).within(() => {
-          cy.get(circulatingSupply).should('be.visible');
+      it('should have external link for validators', function () {
+        cy.getByTestId('home-validators').within(() => {
+          cy.getByTestId('external-link')
+            .should('have.attr', 'href')
+            .and(
+              'contain',
+              'https://community.vega.xyz/c/mainnet-validator-candidates'
+            );
         });
       });
-      it('should have STAKED $VEGA', function () {
-        cy.get(tokenDetailsTable).within(() => {
-          cy.get(staked).should('be.visible');
+      it('should have information on active nodes', function () {
+        cy.getByTestId('node-information')
+          .first()
+          .should('contain.text', '2')
+          .and('contain.text', 'active nodes');
+      });
+      it('should have information on consensus nodes', function () {
+        cy.getByTestId('node-information')
+          .last()
+          .should('contain.text', '2')
+          .and('contain.text', 'consensus nodes');
+      });
+      it('should contain link to specific validators', function () {
+        cy.getByTestId('validators')
+          .should('have.length', '2')
+          .each(($validator) => {
+            cy.wrap($validator).find('a').should('have.attr', 'href');
+          });
+      });
+      it('should have link for rewards page', function () {
+        cy.getByTestId('home-rewards').within(() => {
+          cy.get('[href="/rewards"]')
+            .first()
+            .should('exist')
+            .and('have.text', 'See rewards');
         });
       });
-    });
-
-    describe('links and buttons', function () {
-      it('should have TRANCHES link', function () {
-        cy.get(tranchesLink)
-          .should('be.visible')
-          .and('have.attr', 'href')
-          .and('equal', '/token/tranches');
-      });
-      it('should have REDEEM button', function () {
-        cy.get(redeemBtn)
-          .should('be.visible')
-          .parent()
-          .should('have.attr', 'href')
-          .and('equal', '/token/redeem');
-      });
-      it('should have GET VEGA WALLET link', function () {
-        cy.get(getVegaWalletLink)
-          .should('be.visible')
-          .and('have.attr', 'href')
-          .and('equal', 'https://vega.xyz/wallet');
-      });
-      it('should have ASSOCIATE VEGA TOKENS link', function () {
-        cy.get(associateVegaLink)
-          .should('be.visible')
-          .and('have.attr', 'href')
-          .and('equal', '/token/associate');
-      });
-      it('should have STAKING button', function () {
-        cy.get(stakingBtn)
-          .should('be.visible')
-          .parent()
-          .should('have.attr', 'href')
-          .and('equal', '/validators');
-      });
-      it('should have GOVERNANCE button', function () {
-        cy.get(governanceBtn)
-          .should('be.visible')
-          .parent()
-          .should('have.attr', 'href')
-          .and('equal', '/proposals');
+      it('should have link for withdrawal page', function () {
+        cy.getByTestId('home-vega-token').within(() => {
+          cy.get('[href="/token/withdraw"]')
+            .first()
+            .should('exist')
+            .and('have.text', 'Manage tokens');
+        });
       });
     });
   });

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

@@ -1,4 +1,4 @@
-const connectToVegaBtn = '[data-testid="connect-to-vega-wallet-btn"]';
+const viewToggle = '[data-testid="epoch-reward-view-toggle-total"]';
 const warning = '[data-testid="callout"]';
 
 context(
@@ -15,7 +15,7 @@ context(
       });
 
       it('should have rewards header visible', function () {
-        cy.verify_page_header('Rewards');
+        cy.verify_page_header('Rewards and fees');
       });
 
       it('should have epoch warning', function () {
@@ -27,10 +27,8 @@ context(
           );
       });
 
-      it('should have connect Vega wallet button', function () {
-        cy.get(connectToVegaBtn)
-          .should('be.visible')
-          .and('have.text', 'Connect Vega wallet');
+      it('should have toggle for seeing total vs individual rewards', function () {
+        cy.get(viewToggle).should('be.visible');
       });
     });
   }