test(explorer): fix capitalisation of test value

.github/workflows/cypress-run.yml

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

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

@@ -1,57 +1,150 @@
-context('Asset page', { tags: '@regression' }, () => {
-  const columns = ['symbol', 'name', 'id', 'type', 'status', 'actions'];
-  const hiddenOnMobile = ['id', 'type', 'status'];
-  describe('Verify elements on page', () => {
-    before('Navigate to assets page', () => {
-      cy.visit('/assets');
+context('Asset page', { tags: '@regression' }, function () {
+  before('gather system asset information', function () {
+    cy.get_asset_information().as('assetsInfo');
+  });
+
+  describe('Verify elements on page', function () {
+    const assetsNavigation = 'a[href="/assets"]';
+    const assetHeader = '[data-testid="asset-header"]';
+    const jsonSection = '.language-json';
+
+    before('Navigate to assets page', function () {
+      cy.visit('/');
+      cy.get(assetsNavigation).click();
 
       // Check we have enough enough assets
-      cy.getAssets().then((assets) => {
-        assert.isAtLeast(
-          Object.keys(assets).length,
-          5,
-          'Ensuring we have at least 5 assets to test'
-        );
+      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');
+          });
       });
     });
 
-    it('should be able to see full assets list', () => {
-      cy.getAssets().then((assets) => {
-        Object.values(assets).forEach((asset) => {
-          cy.get(`[row-id="${asset.id}"]`).should('be.visible');
-        });
-      });
-      columns.forEach((col) => {
-        cy.get(`[col-id="${col}"]`).should('be.visible');
+    it('should be able to see 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 see assets page displayed in mobile', () => {
-      cy.switchToMobile();
+    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';
 
-      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');
+      // Engage dark mode if not allready set
+      cy.get(sideMenuBackground)
+        .should('have.css', 'background-color')
+        .then((background_color) => {
+          if (background_color.includes(whiteThemeSideMenuBackgroundColor))
+            cy.get(themeSwitcher).click();
         });
-      });
+
+      // Engage white mode
+      cy.get(themeSwitcher).click();
+
+      // White Mode
+      cy.get(assetsNavigation)
+        .should('have.css', 'background-color')
+        .and('include', whiteThemeSelectedMenuOptionColor);
+      cy.get(jsonFields)
+        .should('have.css', 'background-color')
+        .and('include', whiteThemeJsonFieldBackColor);
+      cy.get(sideMenuBackground)
+        .should('have.css', 'background-color')
+        .and('include', whiteThemeSideMenuBackgroundColor);
+
+      // Dark Mode
+      cy.get(themeSwitcher).click();
+      cy.get(assetsNavigation)
+        .should('have.css', 'background-color')
+        .and('include', darkThemeSelectedMenuOptionColor);
+      cy.get(jsonFields)
+        .should('have.css', 'background-color')
+        .and('include', darkThemeJsonFieldBackColor);
+      cy.get(sideMenuBackground)
+        .should('have.css', 'background-color')
+        .and('include', darkThemeSideMenuBackgroundColor);
     });
 
-    it('should 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();
-        });
+    it('should be able to see assets page displayed in mobile', function () {
+      cy.common_switch_to_mobile_and_click_toggle();
+      cy.get(assetsNavigation).click();
+
+      const assetNames = Object.keys(this.assetsInfo);
+      assetNames.forEach((assetName) => {
+        cy.get(assetHeader)
+          .contains(assetName)
+          .should('be.visible')
+          .next()
+          .within(() => {
+            cy.get(jsonSection).should('not.be.empty');
+          });
       });
     });
   });

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

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

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

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

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

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

apps/explorer/.env.devnet

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

apps/explorer/src/app/app.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,51 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type ExplorerAssetQueryVariables = Types.Exact<{
+  id: Types.Scalars['ID'];
+}>;
+
+
+export type ExplorerAssetQuery = { __typename?: 'Query', asset?: { __typename?: 'Asset', id: string, name: string, status: Types.AssetStatus, decimals: number } | null };
+
+
+export const ExplorerAssetDocument = gql`
+    query ExplorerAsset($id: ID!) {
+  asset(id: $id) {
+    id
+    name
+    status
+    decimals
+  }
+}
+    `;
+
+/**
+ * __useExplorerAssetQuery__
+ *
+ * To run a query within a React component, call `useExplorerAssetQuery` and pass it any options that fit your needs.
+ * When your component renders, `useExplorerAssetQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useExplorerAssetQuery({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useExplorerAssetQuery(baseOptions: Apollo.QueryHookOptions<ExplorerAssetQuery, ExplorerAssetQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ExplorerAssetQuery, ExplorerAssetQueryVariables>(ExplorerAssetDocument, options);
+      }
+export function useExplorerAssetLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerAssetQuery, ExplorerAssetQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ExplorerAssetQuery, ExplorerAssetQueryVariables>(ExplorerAssetDocument, options);
+        }
+export type ExplorerAssetQueryHookResult = ReturnType<typeof useExplorerAssetQuery>;
+export type ExplorerAssetLazyQueryHookResult = ReturnType<typeof useExplorerAssetLazyQuery>;
+export type ExplorerAssetQueryResult = Apollo.QueryResult<ExplorerAssetQuery, ExplorerAssetQueryVariables>;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,7 +1,6 @@
 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';
@@ -42,8 +41,7 @@ const OrderSummary = ({ id, modifier }: OrderSummaryProps) => {
   return (
     <div data-testid="order-summary" className={getClassName(modifier)}>
       <span>{sideText[order.side]}</span>&nbsp;
-      <SizeInMarket marketId={order.market.id} size={order.size} />
-      &nbsp;<i>@</i>&nbsp;
+      <span>{order.size}</span>&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,14 +112,13 @@ describe('Order TX Summary component', () => {
     const res = renderComponent(o, [mock]);
     expect(res.queryByTestId('order-summary')).toBeInTheDocument();
     expect(res.getByText('Buy')).toBeInTheDocument();
-
-    // Initially renders price and size unformatted
-    expect(res.getByText('333')).toBeInTheDocument();
     expect(res.getByText('10')).toBeInTheDocument();
 
+    // Initially renders price alone
+    expect(res.getByText('333')).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,7 +2,6 @@ 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'];
@@ -30,12 +29,7 @@ const OrderTxSummary = ({ order }: OrderSummaryProps) => {
   return (
     <div data-testid="order-summary">
       <span>{sideText[order.side]}</span>&nbsp;
-      {order.size ? (
-        <SizeInMarket size={order.size} marketId={order.marketId} />
-      ) : (
-        '-'
-      )}
-      &nbsp;<i className="text-xs">@</i>&nbsp;
+      <span>{order.size}</span>&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(
-  size: string | undefined,
+  price: string,
   marketId: string,
   mocks: MockedResponse[],
   decimalSource: DecimalSource = 'MARKET'
@@ -17,7 +17,7 @@ function renderComponent(
       <MemoryRouter>
         <SizeInMarket
           marketId={marketId}
-          size={size}
+          size={price}
           decimalSource={decimalSource}
         />
       </MemoryRouter>
@@ -57,11 +57,6 @@ 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,9 +22,6 @@ const SizeInMarket = ({
     variables: { id: marketId },
     fetchPolicy: 'cache-first',
   });
-  if (!size) {
-    return <span>-</span>;
-  }
 
   let label = size;
 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -21,7 +21,6 @@ import { TxDetailsDataSubmission } from './tx-data-submission';
 import { TxProposalVote } from './tx-proposal-vote';
 import { TxDetailsProtocolUpgrade } from './tx-details-protocol-upgrade';
 import { TxDetailsIssueSignatures } from './tx-issue-signatures';
-import { TxDetailsNodeAnnounce } from './tx-node-announce';
 import { TxDetailsStateVariable } from './tx-state-variable-proposal';
 
 interface TxDetailsWrapperProps {
@@ -70,8 +69,6 @@ function getTransactionComponent(txData?: BlockExplorerTransactionResult) {
 
   // These come from https://github.com/vegaprotocol/vega/blob/develop/core/txn/command.go#L72-L98
   switch (txData.type) {
-    case 'Register new Node':
-      return TxDetailsNodeAnnounce;
     case 'Issue Signatures':
       return TxDetailsIssueSignatures;
     case 'Submit Order':

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,73 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type AssetsFieldsFragment = { __typename?: 'Asset', id: string, name: string, symbol: string, decimals: number, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string }, infrastructureFeeAccount?: { __typename?: 'AccountBalance', type: Types.AccountType, balance: string, market?: { __typename?: 'Market', id: string } | null } | null };
+
+export type ExplorerAssetsQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type ExplorerAssetsQuery = { __typename?: 'Query', assetsConnection?: { __typename?: 'AssetsConnection', edges?: Array<{ __typename?: 'AssetEdge', node: { __typename?: 'Asset', id: string, name: string, symbol: string, decimals: number, source: { __typename?: 'BuiltinAsset', maxFaucetAmountMint: string } | { __typename?: 'ERC20', contractAddress: string }, infrastructureFeeAccount?: { __typename?: 'AccountBalance', type: Types.AccountType, balance: string, market?: { __typename?: 'Market', id: string } | null } | null } } | null> | null } | null };
+
+export const AssetsFieldsFragmentDoc = gql`
+    fragment AssetsFields on Asset {
+  id
+  name
+  symbol
+  decimals
+  source {
+    ... on ERC20 {
+      contractAddress
+    }
+    ... on BuiltinAsset {
+      maxFaucetAmountMint
+    }
+  }
+  infrastructureFeeAccount {
+    type
+    balance
+    market {
+      id
+    }
+  }
+}
+    `;
+export const ExplorerAssetsDocument = gql`
+    query ExplorerAssets {
+  assetsConnection {
+    edges {
+      node {
+        ...AssetsFields
+      }
+    }
+  }
+}
+    ${AssetsFieldsFragmentDoc}`;
+
+/**
+ * __useExplorerAssetsQuery__
+ *
+ * To run a query within a React component, call `useExplorerAssetsQuery` and pass it any options that fit your needs.
+ * When your component renders, `useExplorerAssetsQuery` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useExplorerAssetsQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useExplorerAssetsQuery(baseOptions?: Apollo.QueryHookOptions<ExplorerAssetsQuery, ExplorerAssetsQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ExplorerAssetsQuery, ExplorerAssetsQueryVariables>(ExplorerAssetsDocument, options);
+      }
+export function useExplorerAssetsLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerAssetsQuery, ExplorerAssetsQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ExplorerAssetsQuery, ExplorerAssetsQueryVariables>(ExplorerAssetsDocument, options);
+        }
+export type ExplorerAssetsQueryHookResult = ReturnType<typeof useExplorerAssetsQuery>;
+export type ExplorerAssetsLazyQueryHookResult = ReturnType<typeof useExplorerAssetsLazyQuery>;
+export type ExplorerAssetsQueryResult = Apollo.QueryResult<ExplorerAssetsQuery, ExplorerAssetsQueryVariables>;

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

@@ -1,30 +0,0 @@
-import { t } from '@vegaprotocol/react-helpers';
-import { RouteTitle } from '../../components/route-title';
-import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
-import { useScrollToLocation } from '../../hooks/scroll-to-location';
-import { useDocumentTitle } from '../../hooks/use-document-title';
-import { useAssetsDataProvider } from '@vegaprotocol/assets';
-import { AssetsTable } from '../../components/assets/assets-table';
-
-export const 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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,68 +0,0 @@
-import { t, useDataProvider } from '@vegaprotocol/react-helpers';
-import { AsyncRenderer, Button } from '@vegaprotocol/ui-toolkit';
-import { useMemo, useState } from 'react';
-import { useParams } from 'react-router-dom';
-import { MarketDetails } from '../../components/markets/market-details';
-import { RouteTitle } from '../../components/route-title';
-import { useScrollToLocation } from '../../hooks/scroll-to-location';
-import { useDocumentTitle } from '../../hooks/use-document-title';
-import compact from 'lodash/compact';
-import { JsonViewerDialog } from '../../components/dialogs/json-viewer-dialog';
-import { marketInfoNoCandlesDataProvider } from '@vegaprotocol/market-info';
-
-export const MarketPage = () => {
-  useScrollToLocation();
-
-  const { marketId } = useParams<{ marketId: string }>();
-
-  const variables = useMemo(
-    () => ({
-      marketId,
-    }),
-    [marketId]
-  );
-
-  const { data, loading, error } = useDataProvider({
-    dataProvider: marketInfoNoCandlesDataProvider,
-    skipUpdates: true,
-    variables,
-  });
-
-  useDocumentTitle(
-    compact([
-      'Market details',
-      data?.market?.tradableInstrument.instrument.name,
-    ])
-  );
-
-  const [dialogOpen, setDialogOpen] = useState<boolean>(false);
-
-  return (
-    <>
-      <section className="relative">
-        <RouteTitle data-testid="markets-heading">
-          {data?.market?.tradableInstrument.instrument.name}
-        </RouteTitle>
-        <AsyncRenderer
-          noDataMessage={t('This chain has no markets')}
-          data={data}
-          loading={loading}
-          error={error}
-        >
-          <div className="absolute top-0 right-0">
-            <Button size="xs" onClick={() => setDialogOpen(true)}>
-              {t('View JSON')}
-            </Button>
-          </div>
-          <MarketDetails market={data?.market} />
-        </AsyncRenderer>
-      </section>
-      <JsonViewerDialog
-        open={dialogOpen}
-        onChange={(isOpen) => setDialogOpen(isOpen)}
-        title={data?.market?.tradableInstrument.instrument.name || ''}
-        content={data?.market}
-      />
-    </>
-  );
-};

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

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

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

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

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

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

apps/explorer/tailwind.config.js

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

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

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

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

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

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

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

apps/multisig-signer/.env

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

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

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

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

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

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

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

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

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

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

@@ -1,145 +0,0 @@
-/// <reference types="cypress" />
-import { associateTokenStartOfTests } from '../../support/governance.functions';
-
-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');
-      associateTokenStartOfTests();
-      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/proposal-flow.cy.js

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

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

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

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

@@ -866,10 +866,6 @@ 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,9 +7,26 @@ 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('/');
+    cy.visit('/token');
   });
 
   describe('with wallets disconnected', function () {
@@ -37,7 +54,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').realClick();
+            cy.getByTestId('state-trigger').click();
           });
         });
         it('should have token dropdown', function () {
@@ -55,106 +72,80 @@ context('Home Page - verify elements on page', { tags: '@smoke' }, function () {
       });
     });
 
-    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');
+    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);
         });
       });
-      it('should show open or enacted proposals with proposal summary', function () {
-        cy.get('body').then(($body) => {
-          if (!$body.find('[data-testid="proposals-list-item"]').length) {
-            cy.createMarket();
-            cy.reload();
-            cy.wait_for_spinner();
-          }
-        });
-        cy.getByTestId('proposals-list-item')
-          .should('have.length.at.least', 1)
-          .first()
-          .within(() => {
-            cy.getByTestId('proposal-title')
-              .invoke('text')
-              .should('not.be.empty');
-            cy.getByTestId('proposal-type')
-              .invoke('text')
-              .should('not.be.empty');
-            cy.getByTestId('proposal-description')
-              .invoke('text')
-              .should('not.be.empty');
-            cy.getByTestId('proposal-details')
-              .invoke('text')
-              .should('not.be.empty');
-            cy.getByTestId('proposal-status')
-              .invoke('text')
-              .should('not.be.empty');
-            cy.getByTestId('vote-details')
-              .invoke('text')
-              .should('not.be.empty');
-            cy.getByTestId('view-proposal-btn').should('be.visible');
-          });
-      });
-      it('should have external link for governance', function () {
-        cy.getByTestId('home-proposals').within(() => {
-          cy.getByTestId('external-link')
-            .should('have.attr', 'href')
-            .and('contain', 'https://vega.xyz/governance');
+      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 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 TOTAL SUPPLY', function () {
+        cy.get(tokenDetailsTable).within(() => {
+          cy.get(totalSupply).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 CIRCULATING SUPPLY', function () {
+        cy.get(tokenDetailsTable).within(() => {
+          cy.get(circulatingSupply).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');
+      it('should have STAKED $VEGA', function () {
+        cy.get(tokenDetailsTable).within(() => {
+          cy.get(staked).should('be.visible');
         });
       });
-      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');
-        });
+    });
+
+    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');
       });
     });
   });

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

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

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

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

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

@@ -10,16 +10,6 @@ const pendingStake = '[data-testid="pending-stake"]';
 const stakedByOperator = '[data-testid="staked-by-operator"]';
 const stakedByDelegates = '[data-testid="staked-by-delegates"]';
 const stakeShare = '[data-testid="stake-percentage"]';
-const stakedByOperatorToolTip = "[data-testid='staked-operator-tooltip']";
-const stakedByDelegatesToolTip = "[data-testid='staked-delegates-tooltip']";
-const totalStakedToolTip = "[data-testid='total-staked-tooltip']";
-const unnormalisedVotingPowerToolTip =
-  "[data-testid='unnormalised-voting-power-tooltip']";
-const normalisedVotingPowerToolTip =
-  "[data-testid='normalised-voting-power-tooltip']";
-const performancePenaltyToolTip = "[data-testid='performance-penalty-tooltip']";
-const overstakedPenaltyToolTip = "[data-testid='overstaked-penalty-tooltip']";
-const totalPenaltyToolTip = "[data-testid='total-penalty-tooltip']";
 const epochCountDown = '[data-testid="epoch-countdown"]';
 const stakeNumberRegex = /^\d*\.?\d*$/;
 
@@ -30,11 +20,11 @@ context('Staking Page - verify elements on page', function () {
 
   describe('with wallets disconnected', { tags: '@smoke' }, function () {
     describe('description section', function () {
-      it('Should have validators tab highlighted', function () {
+      it('Should have staking tab highlighted', function () {
         cy.verify_tab_highlighted('validators');
       });
 
-      it('Should have validators ON VEGA header visible', function () {
+      it('Should have STAKING ON VEGA header visible', function () {
         cy.verify_page_header('Validators');
       });
 
@@ -66,70 +56,37 @@ context('Staking Page - verify elements on page', function () {
       });
 
       it('Should be able to see validator stake', function () {
-        cy.get('[col-id="stake"] > div > span > span')
+        cy.get('[col-id="stake"] > div > span')
           .should('have.length.at.least', 1)
           .each(($stake) => {
             cy.wrap($stake).should('not.be.empty');
           });
       });
 
-      it('Should be able to see validator stake tooltip', function () {
-        cy.get('[col-id="stake"] > div > span > span').first().realHover();
-
-        cy.get(stakedByOperatorToolTip)
-          .invoke('text')
-          .should('contain', 'Staked by operator: 0.00');
-        cy.get(stakedByDelegatesToolTip)
-          .invoke('text')
-          .should('contain', 'Staked by delegates: 0.00');
-        cy.get(totalStakedToolTip)
-          .invoke('text')
-          .should('contain', 'Total stake: 0.00');
-      });
-
       it('Should be able to see validator normalised voting power', function () {
-        cy.get('[col-id="normalisedVotingPower"] > div > span > span')
+        cy.get('[col-id="normalisedVotingPower"] > div > span')
           .should('have.length.at.least', 1)
           .each(($vPower) => {
             cy.wrap($vPower).should('not.be.empty');
           });
       });
 
-      it('Should be able to see validator voting power tooltip', function () {
-        cy.get('[col-id="normalisedVotingPower"] > div > span > span')
-          .first()
-          .realHover();
-
-        cy.get(unnormalisedVotingPowerToolTip)
-          .invoke('text')
-          .should('contain', 'Unnormalised voting power: 0.00%');
-        cy.get(normalisedVotingPowerToolTip)
-          .invoke('text')
-          .should('contain', 'Normalised voting power: 0.10%');
+      it('Should be able to see validator normalised voting power', function () {
+        cy.get('[col-id="normalisedVotingPower"] > div > span')
+          .should('have.length.at.least', 1)
+          .each(($vPower) => {
+            cy.wrap($vPower).should('not.be.empty');
+          });
       });
 
       it('Should be able to see validator total penalties', function () {
-        cy.get('[col-id="totalPenalties"] > div > span > span')
+        cy.get('[col-id="totalPenalties"] > div > span')
           .should('have.length.at.least', 1)
           .each(($penalties) => {
             cy.wrap($penalties).should('contain.text', '0%');
           });
       });
 
-      it('Should be able to see validator penalties tooltip', function () {
-        cy.get('[col-id="totalPenalties"] > div > span > span').realHover();
-
-        cy.get(performancePenaltyToolTip)
-          .invoke('text')
-          .should('contain', 'Performance penalty: 100.00%');
-        cy.get(overstakedPenaltyToolTip)
-          .invoke('text')
-          .should('contain', 'Overstaked penalty:'); // value not asserted due to #2886
-        cy.get(totalPenaltyToolTip)
-          .invoke('text')
-          .should('contain', 'Total penalties: 0.00%');
-      });
-
       it('Should be able to see validator pending stake', function () {
         cy.get('[col-id="pendingStake"] > div > span')
           .should('have.length.at.least', 1)

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

@@ -1,99 +0,0 @@
-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('Verify elements on Token page', { tags: '@smoke' }, function () {
-  before('Visit token page', function () {
-    cy.visit('/');
-    cy.navigate_to('token');
-  });
-  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);
-      });
-    });
-    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 TOTAL SUPPLY', function () {
-      cy.get(tokenDetailsTable).within(() => {
-        cy.get(totalSupply).should('be.visible');
-      });
-    });
-    it('should have CIRCULATING SUPPLY', function () {
-      cy.get(tokenDetailsTable).within(() => {
-        cy.get(circulatingSupply).should('be.visible');
-      });
-    });
-    it('should have STAKED $VEGA', function () {
-      cy.get(tokenDetailsTable).within(() => {
-        cy.get(staked).should('be.visible');
-      });
-    });
-  });
-
-  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');
-    });
-  });
-});

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

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

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

@@ -1,6 +1,3 @@
-const epochTimeout = Cypress.env('epochTimeout');
-const txTimeout = Cypress.env('txTimeout');
-
 Cypress.Commands.add(
   'convert_token_value_to_number',
   { prevSubject: true },
@@ -52,29 +49,3 @@ Cypress.Commands.add('wait_for_spinner', () => {
   cy.get(navigation.pageSpinner, Cypress.env('epochTimeout')).should('exist');
   cy.get(navigation.pageSpinner, { timeout: 20000 }).should('not.exist');
 });
-
-// This is a workaround function to begin tests with associating tokens without failing
-// Should be removed when eth transaction bug is fixed
-export function associateTokenStartOfTests() {
-  cy.highlight(`Associating tokens for first time`);
-  cy.ethereum_wallet_connect();
-  cy.connectVegaWallet();
-  cy.get('[href="/token/associate"]').first().click();
-  cy.getByTestId('associate-radio-wallet', { timeout: 30000 }).click();
-  cy.getByTestId('token-amount-input', epochTimeout).type('1');
-  cy.getByTestId('token-input-submit-button', txTimeout)
-    .should('be.enabled')
-    .click();
-  cy.contains(
-    `Associating with Vega key. Waiting for ${Cypress.env(
-      'blockConfirmations'
-    )} more confirmations..`,
-    txTimeout
-  ).should('be.visible');
-  cy.getByTestId('associated-amount', txTimeout).should('contain.text', '1');
-  // Wait is needed to allow time for transaction to complete
-  // eslint-disable-next-line cypress/no-unnecessary-waiting
-  cy.wait(10000);
-  cy.vega_wallet_teardown();
-  cy.clearLocalStorage();
-}

apps/token-e2e/src/support/governance.functions.js

@@ -8,7 +8,6 @@ const rawProposalData = '[data-testid="proposal-data"]';
 const voteButtons = '[data-testid="vote-buttons"]';
 const dialogTitle = '[data-testid="dialog-title"]';
 const proposalVoteDeadline = '[data-testid="proposal-vote-deadline"]';
-const newProposalSubmitButton = '[data-testid="proposal-submit"]';
 const dialogCloseButton = '[data-testid="dialog-close"]';
 const epochTimeout = Cypress.env('epochTimeout');
 const proposalTimeout = { timeout: 14000 };
@@ -62,7 +61,6 @@ Cypress.Commands.add('enter_raw_proposal_body', (timestamp) => {
       parseSpecialCharSequences: false,
       delay: 2,
     });
-    cy.get(newProposalSubmitButton).should('be.visible').click();
     cy.wrap(rawProposal);
   });
 });
@@ -75,7 +73,6 @@ Cypress.Commands.add(
       'this is a e2e freeform proposal description'
     );
     cy.get(proposalVoteDeadline).clear().click().type(timestamp);
-    cy.getByTestId('proposal-submit').should('be.visible').click();
   }
 );
 
@@ -188,40 +185,3 @@ Cypress.Commands.add('wait_for_proposal_submitted', () => {
   cy.contains('Proposal submitted', proposalTimeout).should('be.visible');
   cy.get(dialogCloseButton).click();
 });
-
-export function createRawProposal(proposerBalance) {
-  if (proposerBalance)
-    cy.ensure_specified_unstaked_tokens_are_associated(proposerBalance);
-  cy.go_to_make_new_proposal('raw proposal');
-  cy.create_ten_digit_unix_timestamp_for_specified_days('8').then(
-    (closingDateTimestamp) => {
-      cy.enter_raw_proposal_body(closingDateTimestamp).as('rawProposal');
-    }
-  );
-  cy.wait_for_proposal_submitted();
-  cy.wait_for_proposal_sync();
-  cy.navigate_to('proposals');
-}
-
-export function generateFreeFormProposalTitle() {
-  const randomNum = Math.floor(Math.random() * 1000) + 1;
-  return randomNum + ': Freeform e2e proposal';
-}
-
-export function createFreeformProposal(proposalTitle) {
-  cy.go_to_make_new_proposal(governanceProposalType.FREEFORM);
-  cy.enter_unique_freeform_proposal_body('50', proposalTitle);
-  cy.wait_for_proposal_submitted();
-  cy.wait_for_proposal_sync();
-  cy.getByTestId('proposal-title').invoke('text').as('proposalTitle');
-  cy.navigate_to('proposals');
-}
-
-export const governanceProposalType = {
-  NETWORK_PARAMETER: 'Network parameter',
-  NEW_MARKET: 'New market',
-  UPDATE_MARKET: 'Update market',
-  NEW_ASSET: 'New asset',
-  FREEFORM: 'Freeform',
-  RAW: 'raw proposal',
-};

apps/token-e2e/src/support/index.js

@@ -1,5 +1,4 @@
 import '@vegaprotocol/cypress';
-import 'cypress-real-events/support';
 
 import './common.functions.js';
 import './staking.functions.js';
@@ -7,7 +6,7 @@ import './governance.functions.js';
 import './wallet-eth.functions.js';
 import './wallet-teardown.functions.js';
 import './wallet-vega.functions.js';
-import './proposal.functions.ts';
+import './proposal.functions.js';
 import registerCypressGrep from '@cypress/grep';
 import { aliasGQLQuery } from '@vegaprotocol/cypress';
 import { chainIdQuery, statisticsQuery } from '@vegaprotocol/mock';

apps/token-e2e/src/support/proposal.functions.js

@@ -0,0 +1,103 @@
+import { addSeconds, millisecondsToSeconds } from 'date-fns';
+
+const walletName = Cypress.env('vegaWalletName');
+const walletPubKey = Cypress.env('vegaWalletPublicKey');
+const walletLocation = Cypress.env('vegaWalletLocation');
+const walletPassphraseFile = './src/fixtures/wallet/passphrase';
+
+Cypress.Commands.add('sendWalletTxUpdateNetworkProposal', () => {
+  const MIN_CLOSE_SEC = 8;
+  const MIN_ENACT_SEC = 5;
+
+  const closingDate = addSeconds(new Date(), MIN_CLOSE_SEC);
+  const enactmentDate = addSeconds(closingDate, MIN_ENACT_SEC);
+  const closingTimestamp = millisecondsToSeconds(closingDate.getTime());
+  const enactmentTimestamp = millisecondsToSeconds(enactmentDate.getTime());
+
+  cy.exec(
+    `vegawallet transaction send --wallet ${walletName} --pubkey ${walletPubKey} -p ${walletPassphraseFile} --network DV '{
+      "proposalSubmission": {
+        "rationale": {
+          "title": "Add New proposal with short enactment",
+          "description": "E2E enactment test"
+        },
+        "terms": {
+          "updateNetworkParameter": {
+              "changes": {
+                  "key": "governance.proposal.updateNetParam.minProposerBalance",
+                  "value": "2"
+              }
+          },
+          "closingTimestamp": ${closingTimestamp},
+          "enactmentTimestamp": ${enactmentTimestamp}
+      }
+      }
+     }' --home ${walletLocation}`,
+    { failOnNonZeroExit: false }
+  )
+    .its('stderr')
+    .should('contain', '');
+});
+
+Cypress.Commands.add('sendWalletTxUpdateAssetProposal', () => {
+  const MIN_CLOSE_SEC = 8;
+  const MIN_ENACT_SEC = 5;
+
+  const closingDate = addSeconds(new Date(), MIN_CLOSE_SEC);
+  const enactmentDate = addSeconds(closingDate, MIN_ENACT_SEC);
+  const closingTimestamp = millisecondsToSeconds(closingDate.getTime());
+  const enactmentTimestamp = millisecondsToSeconds(enactmentDate.getTime());
+
+  cy.exec(
+    `vegawallet transaction send --wallet ${walletName} --pubkey ${walletPubKey} -p ${walletPassphraseFile} --network DV '{
+      "proposalSubmission": {
+        "rationale": {
+          "title": "Update Asset set to fail",
+          "description": "E2E fail test"
+        },
+        "terms": {
+          "updateAsset": {
+            "assetId": "ebcd94151ae1f0d39a4bde3b21a9c7ae81a80ea4352fb075a92e07608d9c953d",
+            "changes": {
+                "quantum": "1",
+                "erc20": {
+                    "withdrawThreshold": "10",
+                    "lifetimeLimit": "10"
+                }
+            }
+        },
+          "closingTimestamp": ${closingTimestamp},
+          "enactmentTimestamp": ${enactmentTimestamp}
+      }
+      }
+     }' --home ${walletLocation}`,
+    { failOnNonZeroExit: false }
+  )
+    .its('stderr')
+    .should('contain', '');
+});
+
+Cypress.Commands.add('sendWalletTxFreeFormProposal', () => {
+  const MIN_CLOSE_SEC = 5;
+
+  const closingDate = addSeconds(new Date(), MIN_CLOSE_SEC);
+  const closingTimestamp = millisecondsToSeconds(closingDate.getTime());
+
+  cy.exec(
+    `vegawallet transaction send --wallet ${walletName} --pubkey ${walletPubKey} -p ${walletPassphraseFile} --network DV '{
+      "proposalSubmission": {
+        "rationale": {
+          "title": "Add New free form proposal with short enactment",
+          "description": "E2E enactment test"
+        },
+        "terms": {
+          "newFreeform": {},
+        "closingTimestamp": ${closingTimestamp}
+        }
+      }
+     }' --home ${walletLocation}`,
+    { failOnNonZeroExit: false }
+  )
+    .its('stderr')
+    .should('contain', '');
+});

apps/token-e2e/src/support/proposal.functions.ts

@@ -1,82 +0,0 @@
-import { addSeconds, millisecondsToSeconds } from 'date-fns';
-import type { ProposalSubmissionBody } from '@vegaprotocol/wallet';
-
-export function createUpdateNetworkProposalTxBody(): ProposalSubmissionBody {
-  const MIN_CLOSE_SEC = 5;
-  const MIN_ENACT_SEC = 7;
-
-  const closingDate = addSeconds(new Date(), MIN_CLOSE_SEC);
-  const enactmentDate = addSeconds(closingDate, MIN_ENACT_SEC);
-  const closingTimestamp = millisecondsToSeconds(closingDate.getTime());
-  const enactmentTimestamp = millisecondsToSeconds(enactmentDate.getTime());
-  return {
-    proposalSubmission: {
-      rationale: {
-        title: 'Add New proposal with short enactment',
-        description: 'E2E enactment test',
-      },
-      terms: {
-        updateNetworkParameter: {
-          changes: {
-            key: 'governance.proposal.updateNetParam.minProposerBalance',
-            value: '2',
-          },
-        },
-        closingTimestamp,
-        enactmentTimestamp,
-      },
-    },
-  };
-}
-
-export function createUpdateAssetProposalTxBody(): ProposalSubmissionBody {
-  const MIN_CLOSE_SEC = 5;
-  const MIN_ENACT_SEC = 7;
-
-  const closingDate = addSeconds(new Date(), MIN_CLOSE_SEC);
-  const enactmentDate = addSeconds(closingDate, MIN_ENACT_SEC);
-  const closingTimestamp = millisecondsToSeconds(closingDate.getTime());
-  const enactmentTimestamp = millisecondsToSeconds(enactmentDate.getTime());
-  return {
-    proposalSubmission: {
-      rationale: {
-        title: 'Update Asset set to fail',
-        description: 'E2E fail test',
-      },
-      terms: {
-        updateAsset: {
-          assetId:
-            'ebcd94151ae1f0d39a4bde3b21a9c7ae81a80ea4352fb075a92e07608d9c953d',
-          changes: {
-            quantum: '1',
-            erc20: {
-              withdrawThreshold: '10',
-              lifetimeLimit: '10',
-            },
-          },
-        },
-        closingTimestamp,
-        enactmentTimestamp,
-      },
-    },
-  };
-}
-
-export function createFreeFormProposalTxBody(): ProposalSubmissionBody {
-  const MIN_CLOSE_SEC = 7;
-
-  const closingDate = addSeconds(new Date(), MIN_CLOSE_SEC);
-  const closingTimestamp = millisecondsToSeconds(closingDate.getTime());
-  return {
-    proposalSubmission: {
-      rationale: {
-        title: 'Add New free form proposal with short enactment',
-        description: 'E2E enactment test',
-      },
-      terms: {
-        newFreeform: {},
-        closingTimestamp,
-      },
-    },
-  };
-}

apps/token-e2e/src/support/wallet-teardown.functions.js

@@ -95,15 +95,8 @@ Cypress.Commands.add('faucet_asset', function (assetEthAddress) {
 });
 
 Cypress.Commands.add('vega_wallet_teardown', function () {
-  cy.get('[data-testid="associated-amount"]')
-    .should('be.visible')
-    .invoke('text')
-    .as('associatedAmount');
   cy.get('body').then(($body) => {
-    if (
-      $body.find('[data-testid="eth-wallet-associated-balances"]').length ||
-      this.associatedAmount != '0.00'
-    ) {
+    if ($body.find('[data-testid="eth-wallet-associated-balances"]').length) {
       cy.vega_wallet_teardown_vesting(this.vestingContract);
       cy.vega_wallet_teardown_staking(this.stakingBridgeContract);
     }

apps/token-e2e/tsconfig.json

@@ -7,7 +7,7 @@
     "allowSyntheticDefaultImports": true,
     "outDir": "../../dist/out-tsc",
     "allowJs": true,
-    "types": ["cypress", "node", "cypress-real-events", "@cypress/grep"]
+    "types": ["cypress", "node", "@cypress/grep"]
   },
   "include": ["src/**/*.ts", "src/**/*.js"]
 }

apps/token/src/app.tsx

@@ -24,8 +24,8 @@ import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
 import { useEthereumConfig } from '@vegaprotocol/web3';
 import {
   useEnvironment,
+  EnvironmentProvider,
   NetworkLoader,
-  useInitializeEnv,
 } from '@vegaprotocol/environment';
 import { createConnectors } from './lib/web3-connectors';
 import { ENV } from './config/env';
@@ -166,12 +166,12 @@ const AppContainer = () => {
 };
 
 function App() {
-  useInitializeEnv();
-
   return (
-    <NetworkLoader cache={cache}>
-      <AppContainer />
-    </NetworkLoader>
+    <EnvironmentProvider>
+      <NetworkLoader cache={cache}>
+        <AppContainer />
+      </NetworkLoader>
+    </EnvironmentProvider>
   );
 }
 

apps/token/src/components/nav/nav-dropdown.tsx

@@ -18,7 +18,7 @@ export const NavDropDown = ({ navbarTheme }: { navbarTheme: NavbarTheme }) => {
       <AppNavLink
         name={
           <NavDropdownMenuTrigger
-            className="w-auto flex items-center -m-3 p-3 cursor-pointer"
+            className="w-auto flex items-center"
             data-testid="state-trigger"
             onClick={() => setOpen(!isOpen)}
           >

apps/token/src/components/nav/nav.spec.tsx

@@ -1,18 +1,23 @@
 import { render, screen, within } from '@testing-library/react';
+import { EnvironmentProvider, Networks } from '@vegaprotocol/environment';
 import { MemoryRouter } from 'react-router-dom';
 import { Nav } from './nav';
 
 jest.mock('@vegaprotocol/environment', () => ({
   ...jest.requireActual('@vegaprotocol/environment'),
   NetworkSwitcher: () => <div data-testid="network-switcher" />,
-  useEnvironment: () => ({ VEGA_ENV: 'MAINNET' }),
 }));
 
 const renderComponent = (initialEntries?: string[]) => {
   return render(
-    <MemoryRouter initialEntries={initialEntries}>
-      <Nav />
-    </MemoryRouter>
+    <EnvironmentProvider
+      definitions={{ VEGA_ENV: Networks.MAINNET }}
+      config={{ hosts: [] }}
+    >
+      <MemoryRouter initialEntries={initialEntries}>
+        <Nav />
+      </MemoryRouter>
+    </EnvironmentProvider>
   );
 };
 

apps/token/src/components/page-templates/template-sidebar.tsx

@@ -21,8 +21,10 @@ export function TemplateSidebar({ children, sidebar }: TemplateSidebarProps) {
     <>
       <AnnouncementBanner>
         <div className="font-alpha calt uppercase text-center text-lg text-white">
-          <span className="pr-4">Mainnet sim 2 coming in March!</span>
-          <ExternalLink href="https://fairground.wtf/">Learn more</ExternalLink>
+          <span className="pr-4">The Mainnet sims are live!</span>
+          <ExternalLink href="https://fairground.wtf/">
+            Come help stress test the network
+          </ExternalLink>
         </div>
       </AnnouncementBanner>
       <Nav navbarTheme={VEGA_ENV === Networks.TESTNET ? 'yellow' : 'dark'} />
@@ -30,9 +32,7 @@ export function TemplateSidebar({ children, sidebar }: TemplateSidebarProps) {
         <ViewingAsBanner pubKey={pubKey} disconnect={disconnect} />
       ) : null}
       <div className="w-full border-b border-neutral-700 lg:grid lg:grid-rows-[1fr] lg:grid-cols-[1fr_450px]">
-        <main className="max-w-[100vw] col-start-1 p-4 overflow-auto">
-          {children}
-        </main>
+        <main className="col-start-1 p-4">{children}</main>
         <aside className="col-start-2 row-start-1 row-span-2 hidden lg:block p-4 bg-banner bg-contain border-l border-neutral-700">
           {sidebar.map((Component, i) => (
             <section className="mb-4 last:mb-0" key={i}>

apps/token/src/hooks/use-refresh-validators.ts

@@ -1,7 +1,7 @@
 import type { ObservableQuery } from '@apollo/client';
 import { useEffect } from 'react';
 
-export const useRefreshAfterEpoch = (
+export const useRefreshValidators = (
   epochExpiry: string | undefined,
   refetch: ObservableQuery['refetch']
 ) => {

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

@@ -14,7 +14,7 @@
   "pageTitleProposals": "Proposals",
   "pageTitleDepositLp": "Deposit liquidity token for $VEGA rewards",
   "pageTitleWithdrawLp": "Withdraw SLP and Rewards",
-  "pageTitleRewards": "Rewards and fees",
+  "pageTitleRewards": "Rewards",
   "pageTitleRejectedProposals": "Rejected proposals",
   "pageTitleValidators": "Validators",
   "Vesting": "Vesting",
@@ -197,6 +197,10 @@
   "STATE_PASSED": "Passed",
   "STATE_OPEN": "Open",
   "STATE_WAITING_FOR_NODE_VOTE": "Waiting for node vote",
+  "NewMarket": "New market",
+  "UpdateMarket": "Update market",
+  "NewAsset": "New asset",
+  "UpdateAsset": "Update asset",
   "UpdateNetworkParameter": "Network parameter",
   "NewFreeform": "Freeform",
   "tokenVotes": "Token votes",
@@ -432,32 +436,12 @@
   "associatedWithVegaKeys": "Associated with Vega keys",
   "thisEpoch": "This Epoch",
   "nextEpoch": "Next epoch",
-  "rewardsIntro": "Earn rewards and infrastructure fees for trading and maintaining the network.",
+  "rewardsPara1": "Rewards are paid out from the treasury at the end of an epoch.",
+  "rewardsPara2": "This page lists all the rewards that your Vega key has received.",
+  "rewardsPara3": "This delay is set by a network parameter",
   "rewardsCallout": "Rewards are credited {{duration}} after the epoch ends.",
-  "rewardsCalloutDetail": "This delay is set by a network parameter",
   "noRewards": "The Vega key has not been credited any rewards since the previous network checkpoint.",
-  "seeHowRewardsAreCalculated": "See how rewards are calculated",
   "rewardType": "Reward type",
-  "rewardsAndFeesReceived": "Rewards and fees received",
-  "ThisDoesNotIncludeFeesReceivedForMakersOrLiquidityProviders": "This does not include fees received for makers or liquidity providers",
-  "totalDistributed": "TOTAL DISTRIBUTED",
-  "earnedByMe": "EARNED BY ME",
-  "noRewardsHaveBeenDistributedYet": "NO REWARDS HAVE BEEN DISTRIBUTED YET",
-  "rewardsColAssetHeader": "ASSET",
-  "rewardsColStakingHeader": "STAKING",
-  "rewardsColStakingTooltip": "Staking rewards supplement infrastructure fees in the early stages of the network, rewarding validators and those who stake them for maintaining the network",
-  "rewardsColInfraHeader": "INFRA FEES",
-  "rewardsColInfraTooltip": "Infrastructure fees are incurred across the network during trading. They are distributed to validators according to their share of total stake on the network, and passed onto those who stake them, proportionate to their own stake after validator commission is taken",
-  "rewardsColPriceTakingHeader": "PRICE TAKING",
-  "rewardsColPriceTakingTooltip": "Price taking rewards are based on the proportion of the total maker fees you paid while trading, on markets where there is a funded reward",
-  "rewardsColPriceMakingHeader": "PRICE MAKING",
-  "rewardsColPriceMakingTooltip": "Price making rewards are based on the proportion of the total maker fees you received while trading, on markets where there is a funded reward",
-  "rewardsColLiquidityProvisionHeader": "LIQUIDITY PROVISION",
-  "rewardsColLiquidityProvisionTooltip": "Liquidity provision rewards are distributed based on how much you have earned in liquidity fees, funded by a liquidity reward pool for that market",
-  "rewardsColMarketCreationHeader": "MARKET CREATION",
-  "rewardsColMarketCreationTooltip": "Market creation rewards are paid out to the creator of any market that exceeds a set threshold of cumulative volume in a given epoch, currently [rewards.marketCreationQuantumMultiple]",
-  "rewardsColTotalHeader": "TOTAL",
-  "checkBackSoon": "Check back soon",
   "yourStake": "Your stake",
   "reward": "Reward",
   "shareOfReward": "Share of reward",

apps/token/src/routes/home/index.tsx

@@ -8,7 +8,7 @@ import {
   RoundedWrapper,
 } from '@vegaprotocol/ui-toolkit';
 import { useDocumentTitle } from '../../hooks/use-document-title';
-import { useRefreshAfterEpoch } from '../../hooks/use-refresh-after-epoch';
+import { useRefreshValidators } from '../../hooks/use-refresh-validators';
 import { ProposalsListItem } from '../proposals/components/proposals-list-item';
 import Routes from '../routes';
 import {
@@ -94,10 +94,7 @@ const HomeNodes = ({
           <div key={index} className="col-span-3">
             <Link to={Routes.VALIDATORS}>
               <RoundedWrapper paddingBottom={true}>
-                <div
-                  data-testid="node-information"
-                  className="flex flex-col items-center m-[-1rem] px-4 py-6 hover:bg-neutral-800"
-                >
+                <div className="flex flex-col items-center m-[-1rem] px-4 py-6 hover:bg-neutral-800">
                   <span className="text-5xl">{length}</span>
                   <span className="text-sm uppercase text-neutral-400">
                     {title}
@@ -109,7 +106,7 @@ const HomeNodes = ({
         ))}
 
         {trimmedActiveNodes.map(({ id, avatarUrl, name }) => (
-          <div key={id} data-testid="validators" className="col-span-2">
+          <div key={id} className="col-span-2">
             <Link to={`${Routes.VALIDATORS}/${id}`}>
               <RoundedWrapper paddingBottom={true} border={false}>
                 <div className="flex items-center justify-center m-[-1rem] p-4 bg-neutral-900 hover:bg-neutral-800">
@@ -159,7 +156,7 @@ const GovernanceHome = ({ name }: RouteChildProps) => {
     refetch,
   } = useNodesQuery();
 
-  useRefreshAfterEpoch(validatorsData?.epoch.timestamps.expiry, refetch);
+  useRefreshValidators(validatorsData?.epoch.timestamps.expiry, refetch);
 
   const proposals = useMemo(
     () =>

apps/token/src/routes/rewards/epoch-individual-awards/reward-info.tsx

@@ -1,69 +0,0 @@
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
-import { removePaginationWrapper } from '@vegaprotocol/react-helpers';
-import { useRewardsQuery } from '../home/__generated__/Rewards';
-import { ENV } from '../../../config';
-import { useVegaWallet } from '@vegaprotocol/wallet';
-import { RewardTable } from './reward-table';
-
-export const RewardInfo = () => {
-  const { t } = useTranslation();
-  const { pubKey } = useVegaWallet();
-  const { delegationsPagination } = ENV;
-
-  const { data, loading, error } = useRewardsQuery({
-    variables: {
-      partyId: pubKey || '',
-      delegationsPagination: delegationsPagination
-        ? {
-            first: Number(delegationsPagination),
-          }
-        : undefined,
-    },
-    skip: !pubKey,
-  });
-
-  const rewards = useMemo(() => {
-    if (!data?.party || !data.party.rewardsConnection?.edges?.length) return [];
-
-    return removePaginationWrapper(data.party.rewardsConnection.edges);
-  }, [data]);
-
-  const delegations = useMemo(() => {
-    if (!data?.party || !data.party.delegationsConnection?.edges?.length) {
-      return [];
-    }
-
-    return removePaginationWrapper(data.party.delegationsConnection.edges);
-  }, [data]);
-
-  return (
-    <AsyncRenderer
-      loading={loading}
-      error={error}
-      data={data}
-      render={() => (
-        <div>
-          <p>
-            {t('Connected Vega key')}: {pubKey}
-          </p>
-          {rewards.length ? (
-            rewards.map((reward, i) => {
-              if (!reward) return null;
-              return (
-                <RewardTable
-                  key={i}
-                  reward={reward}
-                  delegations={delegations || []}
-                />
-              );
-            })
-          ) : (
-            <p>{t('noRewards')}</p>
-          )}
-        </div>
-      )}
-    />
-  );
-};

apps/token/src/routes/rewards/epoch-total-rewards/epoch-rewards.tsx

@@ -1,43 +0,0 @@
-import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
-import { useEpochAssetsRewardsQuery } from '../home/__generated__/Rewards';
-import { useRefreshAfterEpoch } from '../../../hooks/use-refresh-after-epoch';
-import { generateEpochTotalRewardsList } from './generate-epoch-total-rewards-list';
-import { NoRewards } from '../no-rewards';
-import { EpochTotalRewardsTable } from './epoch-total-rewards-table';
-
-export const EpochRewards = () => {
-  const { data, loading, error, refetch } = useEpochAssetsRewardsQuery({
-    variables: {
-      epochRewardSummariesPagination: {
-        first: 10,
-      },
-    },
-  });
-  useRefreshAfterEpoch(data?.epoch.timestamps.expiry, refetch);
-
-  const epochRewardSummaries = generateEpochTotalRewardsList(data) || [];
-
-  return (
-    <AsyncRenderer
-      loading={loading}
-      error={error}
-      data={data}
-      render={() => (
-        <div
-          className="max-w-full overflow-auto"
-          data-testid="epoch-rewards-total"
-        >
-          {epochRewardSummaries.length === 0 ? (
-            <NoRewards />
-          ) : (
-            <>
-              {epochRewardSummaries.map((aggregatedEpochSummary) => (
-                <EpochTotalRewardsTable data={aggregatedEpochSummary} />
-              ))}
-            </>
-          )}
-        </div>
-      )}
-    />
-  );
-};

apps/token/src/routes/rewards/epoch-total-rewards/epoch-total-rewards-table.spec.tsx

@@ -1,36 +0,0 @@
-import { render } from '@testing-library/react';
-import { EpochTotalRewardsTable } from './epoch-total-rewards-table';
-import { AccountType } from '@vegaprotocol/types';
-
-const mockData = {
-  epoch: 4431,
-  assetRewards: [
-    {
-      assetId:
-        'b340c130096819428a62e5df407fd6abe66e444b89ad64f670beb98621c9c663',
-      name: 'tDAI TEST',
-      rewards: [
-        {
-          rewardType: AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
-          amount: '295',
-        },
-      ],
-      totalAmount: '295',
-    },
-  ],
-};
-
-describe('EpochTotalRewardsTable', () => {
-  it('should render correctly', () => {
-    const { getByTestId } = render(<EpochTotalRewardsTable data={mockData} />);
-    expect(getByTestId('epoch-total-rewards-table')).toBeInTheDocument();
-    expect(getByTestId('asset')).toBeInTheDocument();
-    expect(getByTestId('global')).toBeInTheDocument();
-    expect(getByTestId('infra')).toBeInTheDocument();
-    expect(getByTestId('taker')).toBeInTheDocument();
-    expect(getByTestId('maker')).toBeInTheDocument();
-    expect(getByTestId('liquidity')).toBeInTheDocument();
-    expect(getByTestId('market-maker')).toBeInTheDocument();
-    expect(getByTestId('total')).toBeInTheDocument();
-  });
-});