chore: multi click for toast

.github/workflows/cypress-run.yml

@@ -64,11 +64,12 @@ jobs:
       ######
 
       - name: Run Cypress tests
-        run: yarn nx run ${{ matrix.project }}:e2e ${{ env.SKIP_CACHE }} --record --key ${{ secrets.CYPRESS_RECORD_KEY }} --browser chrome --env.grepTags="${{ inputs.tags }}"
+        run: yarn nx run ${{ matrix.project }}:e2e ${{ env.SKIP_CACHE }} --record --key ${{ secrets.CYPRESS_RECORD_KEY }} --browser chrome
         working-directory: frontend-monorepo
         env:
           CYPRESS_SLACK_WEBHOOK: ${{ secrets.CYPRESS_SLACK_WEBHOOK }}
           CYPRESS_VEGA_WALLET_API_TOKEN: ${{ steps.setup-vega.outputs.token }}
+          CYPRESS_grepTags: ${{ inputs.tags }}
 
       ######
       ## Upload logs
@@ -82,10 +83,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:

.github/workflows/lint_pr.yml

@@ -8,16 +8,14 @@ jobs:
   lint_pr:
     runs-on: ubuntu-latest
     steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-        with:
-          fetch-depth: 0
       - name: Use Node.js 16
         id: Node
         uses: actions/setup-node@v2
         with:
           node-version: 16.14.0
-      - name: Install root dependencies
-        run: yarn install
+      - name: Install commitlint cli and config
+        run: npm install @commitlint/cli @commitlint/config-conventional
+      - name: Create config
+        run: echo "module.exports = {extends:['@commitlint/config-conventional']};" > commitlint.config.js
       - name: Check PR title
-        run: echo "${{ github.event.pull_request.title }}" | npx commitlint --config ./commitlint.config-ci.js
+        run: echo "${{ github.event.pull_request.title }}" | npx commitlint

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/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/.env.sandbox

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

apps/explorer/.env.stagnet3

@@ -6,4 +6,3 @@ NX_VEGA_ENV=STAGNET3
 NX_GITHUB_FEEDBACK_URL=https://github.com/vegaprotocol/feedback/discussions
 NX_BLOCK_EXPLORER=https://be.stagnet3.vega.xyz/rest
 NX_VEGA_GOVERNANCE_URL=https://stagnet3.token.vega.xyz
-NX_VEGA_REPO_URL=https://github.com/vegaprotocol/vega-dev-releases/releases/

apps/explorer/src/app/app.tsx

@@ -8,24 +8,6 @@ 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';
-
-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);
@@ -58,23 +40,12 @@ function App() {
   return (
     <TendermintWebsocketProvider>
       <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>
-            <ExternalLink href="https://fairground.wtf/">
-              Learn more
-            </ExternalLink>
-          </div>
-        </AnnouncementBanner>
-
         <div className={layoutClasses}>
           <Header menuOpen={menuOpen} setMenuOpen={setMenuOpen} />
           <Nav menuOpen={menuOpen} />
           <Main />
           <Footer />
         </div>
-
-        <DialogsContainer />
       </NetworkLoader>
     </TendermintWebsocketProvider>
   );

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/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/links/market-link/Market.graphql

@@ -2,7 +2,6 @@ query ExplorerMarket($id: ID!) {
   market(id: $id) {
     id
     decimalPlaces
-    positionDecimalPlaces
     tradableInstrument {
       instrument {
         name

apps/explorer/src/app/components/links/market-link/__generated__/Market.ts

@@ -8,7 +8,7 @@ export type ExplorerMarketQueryVariables = Types.Exact<{
 }>;
 
 
-export type ExplorerMarketQuery = { __typename?: 'Query', market?: { __typename?: 'Market', id: string, decimalPlaces: number, positionDecimalPlaces: number, state: Types.MarketState, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, product: { __typename?: 'Future', quoteName: string, settlementAsset: { __typename?: 'Asset', decimals: number } } } } } | null };
+export type ExplorerMarketQuery = { __typename?: 'Query', market?: { __typename?: 'Market', id: string, decimalPlaces: number, state: Types.MarketState, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, product: { __typename?: 'Future', quoteName: string, settlementAsset: { __typename?: 'Asset', decimals: number } } } } } | null };
 
 
 export const ExplorerMarketDocument = gql`
@@ -16,7 +16,6 @@ export const ExplorerMarketDocument = gql`
   market(id: $id) {
     id
     decimalPlaces
-    positionDecimalPlaces
     tradableInstrument {
       instrument {
         name

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

@@ -55,7 +55,6 @@ describe('Market link component', () => {
           market: {
             id: '123',
             decimalPlaces: 5,
-            positionDecimalPlaces: 2,
             state: 'irrelevant-test-data',
             tradableInstrument: {
               instrument: {

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

@@ -117,7 +117,7 @@ const NestedDataListItem = ({
           )}
         </h4>
         {!hasChildren && (
-          <code className="text-vega-light-100 mb-2 last:mb-0 dark:text-vega-dark-100 break-all">
+          <code className="text-vega-light-400 mb-2 last:mb-0 dark:text-vega-dark-400 break-all">
             {JSON.stringify(value, null, '  ')}
           </code>
         )}

apps/explorer/src/app/components/order-details/Order.graphql

@@ -19,7 +19,6 @@ fragment ExplorerDeterministicOrderFields on Order {
   market {
     id
     decimalPlaces
-    positionDecimalPlaces
     tradableInstrument {
       instrument {
         name

apps/explorer/src/app/components/order-details/__generated__/Order.ts

@@ -3,7 +3,7 @@ import * as Types from '@vegaprotocol/types';
 import { gql } from '@apollo/client';
 import * as Apollo from '@apollo/client';
 const defaultOptions = {} as const;
-export type ExplorerDeterministicOrderFieldsFragment = { __typename?: 'Order', id: string, type?: Types.OrderType | null, reference: string, status: Types.OrderStatus, version: string, createdAt: any, updatedAt?: any | null, expiresAt?: any | null, timeInForce: Types.OrderTimeInForce, price: string, side: Types.Side, remaining: string, size: string, rejectionReason?: Types.OrderRejectionReason | null, party: { __typename?: 'Party', id: string }, market: { __typename?: 'Market', id: string, decimalPlaces: number, positionDecimalPlaces: number, state: Types.MarketState, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, product: { __typename?: 'Future', quoteName: string } } } } };
+export type ExplorerDeterministicOrderFieldsFragment = { __typename?: 'Order', id: string, type?: Types.OrderType | null, reference: string, status: Types.OrderStatus, version: string, createdAt: any, updatedAt?: any | null, expiresAt?: any | null, timeInForce: Types.OrderTimeInForce, price: string, side: Types.Side, remaining: string, size: string, rejectionReason?: Types.OrderRejectionReason | null, party: { __typename?: 'Party', id: string }, market: { __typename?: 'Market', id: string, decimalPlaces: number, state: Types.MarketState, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, product: { __typename?: 'Future', quoteName: string } } } } };
 
 export type ExplorerDeterministicOrderQueryVariables = Types.Exact<{
   orderId: Types.Scalars['ID'];
@@ -11,7 +11,7 @@ export type ExplorerDeterministicOrderQueryVariables = Types.Exact<{
 }>;
 
 
-export type ExplorerDeterministicOrderQuery = { __typename?: 'Query', orderByID: { __typename?: 'Order', id: string, type?: Types.OrderType | null, reference: string, status: Types.OrderStatus, version: string, createdAt: any, updatedAt?: any | null, expiresAt?: any | null, timeInForce: Types.OrderTimeInForce, price: string, side: Types.Side, remaining: string, size: string, rejectionReason?: Types.OrderRejectionReason | null, party: { __typename?: 'Party', id: string }, market: { __typename?: 'Market', id: string, decimalPlaces: number, positionDecimalPlaces: number, state: Types.MarketState, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, product: { __typename?: 'Future', quoteName: string } } } } } };
+export type ExplorerDeterministicOrderQuery = { __typename?: 'Query', orderByID: { __typename?: 'Order', id: string, type?: Types.OrderType | null, reference: string, status: Types.OrderStatus, version: string, createdAt: any, updatedAt?: any | null, expiresAt?: any | null, timeInForce: Types.OrderTimeInForce, price: string, side: Types.Side, remaining: string, size: string, rejectionReason?: Types.OrderRejectionReason | null, party: { __typename?: 'Party', id: string }, market: { __typename?: 'Market', id: string, decimalPlaces: number, state: Types.MarketState, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', name: string, product: { __typename?: 'Future', quoteName: string } } } } } };
 
 export const ExplorerDeterministicOrderFieldsFragmentDoc = gql`
     fragment ExplorerDeterministicOrderFields on Order {
@@ -35,7 +35,6 @@ export const ExplorerDeterministicOrderFieldsFragmentDoc = gql`
   market {
     id
     decimalPlaces
-    positionDecimalPlaces
     tradableInstrument {
       instrument {
         name

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

@@ -61,7 +61,6 @@ function renderExistingAmend(id: string, version: number, amend: Amend) {
               __typename: 'Market',
               id: '789',
               state: 'STATUS_ACTIVE',
-              positionDecimalPlaces: 2,
               decimalPlaces: '5',
               tradableInstrument: {
                 instrument: {
@@ -89,7 +88,6 @@ function renderExistingAmend(id: string, version: number, amend: Amend) {
           market: {
             id: '789',
             decimalPlaces: 5,
-            positionDecimalPlaces: 2,
             state: 'irrelevant-test-data',
             tradableInstrument: {
               instrument: {

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

@@ -4,7 +4,6 @@ import { MarketLink } from '../links';
 import PriceInMarket from '../price-in-market/price-in-market';
 import { Time } from '../time';
 import { sideText, statusText, tifFull, tifShort } from './lib/order-labels';
-import SizeInMarket from '../size-in-market/size-in-market';
 
 export interface DeterministicOrderDetailsProps {
   id: string;
@@ -91,7 +90,7 @@ const DeterministicOrderDetails = ({
             <div className="mb-12 md:mb-0">
               <h2 className="text-2xl font-bold text-dark mb-4">{t('Size')}</h2>
               <h5 className="text-lg font-medium text-gray-500 mb-0">
-                <SizeInMarket size={o.size} marketId={o.market.id} />
+                {o.size}
               </h5>
             </div>
 

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

@@ -38,7 +38,6 @@ const mock = {
           __typename: 'Market',
           id: '789',
           state: 'STATE_ACTIVE',
-          positionDecimalPlaces: 2,
           decimalPlaces: 2,
           tradableInstrument: {
             instrument: {

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

@@ -90,7 +90,6 @@ describe('Order TX Summary component', () => {
           market: {
             id: '123',
             decimalPlaces: 2,
-            positionDecimalPlaces: 2,
             state: 'irrelevant-test-data',
             tradableInstrument: {
               instrument: {
@@ -112,14 +111,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/price-in-market/price-in-market.spec.tsx

@@ -37,7 +37,6 @@ const fullMock = {
       market: {
         id: '123',
         decimalPlaces: 2,
-        positionDecimalPlaces: 2,
         state: 'irrelevant-test-data',
         tradableInstrument: {
           instrument: {

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

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

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

@@ -66,9 +66,7 @@ export const Search = () => {
             className="text-white"
             hasError={Boolean(error?.message)}
             type="text"
-            placeholder={t(
-              'Enter block number, public key or transaction hash'
-            )}
+            placeholder={t('Enter block number, party id or transaction hash')}
           />
           {error?.message && (
             <div className="bg-white border border-t-0 border-accent absolute top-[100%] flex-1 w-full pb-2 px-2 rounded-b text-black">

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

@@ -1,74 +0,0 @@
-import { MemoryRouter } from 'react-router-dom';
-import { MockedProvider } from '@apollo/client/testing';
-import type { MockedResponse } from '@apollo/client/testing';
-import { render } from '@testing-library/react';
-import SizeInMarket from './size-in-market';
-import type { DecimalSource } from './size-in-market';
-import { ExplorerMarketDocument } from '../links/market-link/__generated__/Market';
-
-function renderComponent(
-  size: string | undefined,
-  marketId: string,
-  mocks: MockedResponse[],
-  decimalSource: DecimalSource = 'MARKET'
-) {
-  return (
-    <MockedProvider mocks={mocks} addTypename={false}>
-      <MemoryRouter>
-        <SizeInMarket
-          marketId={marketId}
-          size={size}
-          decimalSource={decimalSource}
-        />
-      </MemoryRouter>
-    </MockedProvider>
-  );
-}
-
-const fullMock = {
-  request: {
-    query: ExplorerMarketDocument,
-    variables: {
-      id: '123',
-    },
-  },
-  result: {
-    data: {
-      market: {
-        id: '123',
-        decimalPlaces: 2,
-        positionDecimalPlaces: 2,
-        state: 'irrelevant-test-data',
-        tradableInstrument: {
-          instrument: {
-            name: 'test dai',
-            product: {
-              __typename: 'Future',
-              quoteName: 'dai',
-              settlementAsset: {
-                decimals: 18,
-              },
-            },
-          },
-        },
-      },
-    },
-  },
-};
-
-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();
-  });
-
-  it('Renders the formatted size when market data is fetched', async () => {
-    const res = render(renderComponent('100', '123', [fullMock]));
-    expect(await res.findByText('1.00')).toBeInTheDocument();
-  });
-});

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

@@ -1,44 +0,0 @@
-import { addDecimalsFormatNumber } from '@vegaprotocol/react-helpers';
-import { useExplorerMarketQuery } from '../links/market-link/__generated__/Market';
-
-export type DecimalSource = 'MARKET';
-
-export type PriceInMarketProps = {
-  marketId: string;
-  size?: string | number;
-  decimalSource?: DecimalSource;
-};
-
-/**
- * Given a market ID and an order size it will fetch the market
- * order size, and format the size accordingly
- */
-const SizeInMarket = ({
-  marketId,
-  size,
-  decimalSource = 'MARKET',
-}: PriceInMarketProps) => {
-  const { data } = useExplorerMarketQuery({
-    variables: { id: marketId },
-    fetchPolicy: 'cache-first',
-  });
-  if (!size) {
-    return <span>-</span>;
-  }
-
-  let label = size;
-
-  if (data) {
-    if (decimalSource === 'MARKET' && data.market?.positionDecimalPlaces) {
-      label = addDecimalsFormatNumber(size, data.market.positionDecimalPlaces);
-    }
-  }
-
-  return (
-    <label>
-      <span>{label}</span>
-    </label>
-  );
-};
-
-export default SizeInMarket;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,62 +0,0 @@
-import { t } from '@vegaprotocol/react-helpers';
-import { TxDetailsShared } from './shared/tx-details-shared';
-import { TableCell, TableRow, TableWithTbody } from '../../table';
-import { BlockLink } from '../../links';
-import { StatusMessage } from '../../status-message';
-import { ENV } from '../../../config/env';
-import { ExternalLink } from '@vegaprotocol/ui-toolkit';
-
-import type { BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
-import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
-import type { components } from '../../../../types/explorer';
-
-interface TxDetailsProtocolUpgradeProps {
-  txData: BlockExplorerTransactionResult | undefined;
-  pubKey: string | undefined;
-  blockData: TendermintBlocksResponse | undefined;
-}
-
-/**
- * Validator event: Protocol Upgrade proposal
- */
-export const TxDetailsProtocolUpgrade = ({
-  txData,
-  pubKey,
-  blockData,
-}: TxDetailsProtocolUpgradeProps) => {
-  if (!txData) {
-    return <>{t('Awaiting Block Explorer transaction details')}</>;
-  }
-
-  const upgrade: components['schemas']['v1ProtocolUpgradeProposal'] =
-    txData.command.protocolUpgradeProposal;
-
-  if (!upgrade || !upgrade.upgradeBlockHeight || !upgrade.vegaReleaseTag) {
-    return (
-      <StatusMessage>{t('Invalid upgrade proposal format')}</StatusMessage>
-    );
-  }
-
-  const urlBase = ENV.dataSources.vegaRepoUrl;
-  const release = upgrade.vegaReleaseTag;
-
-  return (
-    <TableWithTbody className="mb-8">
-      <TxDetailsShared txData={txData} pubKey={pubKey} blockData={blockData} />
-      <TableRow modifier="bordered">
-        <TableCell>{t('Upgrade at block')}</TableCell>
-        <TableCell>
-          <BlockLink height={upgrade.upgradeBlockHeight} />
-        </TableCell>
-      </TableRow>
-      <TableRow modifier="bordered">
-        <TableCell>{t('Upgrade to')}</TableCell>
-        <TableCell>
-          <ExternalLink href={`${urlBase}${release}`}>
-            {upgrade.vegaReleaseTag}
-          </ExternalLink>
-        </TableCell>
-      </TableRow>
-    </TableWithTbody>
-  );
-};

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

@@ -19,10 +19,6 @@ import { TxDetailsLiquidityAmendment } from './tx-liquidity-amend';
 import { TxDetailsLiquidityCancellation } from './tx-liquidity-cancel';
 import { TxDetailsDataSubmission } from './tx-data-submission';
 import { TxProposalVote } from './tx-proposal-vote';
-import { TxDetailsProtocolUpgrade } from './tx-details-protocol-upgrade';
-import { TxDetailsIssueSignatures } from './tx-issue-signatures';
-import { TxDetailsNodeAnnounce } from './tx-node-announce';
-import { TxDetailsStateVariable } from './tx-state-variable-proposal';
 
 interface TxDetailsWrapperProps {
   txData: BlockExplorerTransactionResult | undefined;
@@ -70,16 +66,10 @@ 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':
       return TxDetailsOrder;
     case 'Submit Oracle Data':
       return TxDetailsDataSubmission;
-    case 'Protocol Upgrade':
-      return TxDetailsProtocolUpgrade;
     case 'Cancel Order':
       return TxDetailsOrderCancel;
     case 'Amend Order':
@@ -106,8 +96,6 @@ function getTransactionComponent(txData?: BlockExplorerTransactionResult) {
       return TxDetailsDelegate;
     case 'Undelegate':
       return TxDetailsUndelegate;
-    case 'State Variable Proposal':
-      return TxDetailsStateVariable;
     default:
       return TxDetailsGeneric;
   }

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

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

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

@@ -11,7 +11,8 @@ interface TxDetailsGenericProps {
 }
 
 /**
- * A node is
+ * If there is not yet a custom component for a transaction, just display
+ * the basic details. This allows someone to view the decoded transaction.
  */
 export const TxDetailsGeneric = ({
   txData,
@@ -23,7 +24,7 @@ export const TxDetailsGeneric = ({
   }
 
   return (
-    <TableWithTbody className="mb-8" allowWrap={true}>
+    <TableWithTbody className="mb-8">
       <TxDetailsShared txData={txData} pubKey={pubKey} blockData={blockData} />
     </TableWithTbody>
   );

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

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

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

@@ -1,77 +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 { NodeLink } from '../../links';
-
-type Command = components['schemas']['v1IssueSignatures'];
-
-const kind: Record<components['schemas']['v1NodeSignatureKind'], string> = {
-  NODE_SIGNATURE_KIND_UNSPECIFIED: 'Unspecified',
-  NODE_SIGNATURE_KIND_ASSET_NEW: 'New asset',
-  NODE_SIGNATURE_KIND_ASSET_WITHDRAWAL: 'Asset withdrawal',
-  NODE_SIGNATURE_KIND_ASSET_UPDATE: ' Asset update',
-  NODE_SIGNATURE_KIND_ERC20_MULTISIG_SIGNER_ADDED: 'Multisig signer added',
-  NODE_SIGNATURE_KIND_ERC20_MULTISIG_SIGNER_REMOVED: 'Multisig signer removed',
-};
-
-interface TxDetailsGenericProps {
-  txData: BlockExplorerTransactionResult | undefined;
-  pubKey: string | undefined;
-  blockData: TendermintBlocksResponse | undefined;
-}
-
-/**
- * If there is not yet a custom component for a transaction, just display
- * the basic details. This allows someone to view the decoded transaction.
- */
-export const TxDetailsIssueSignatures = ({
-  txData,
-  pubKey,
-  blockData,
-}: TxDetailsGenericProps) => {
-  if (!txData) {
-    return <>{t('Awaiting Block Explorer transaction details')}</>;
-  }
-
-  const cmd: Command = txData.command;
-  const k = cmd.kind ? kind[cmd.kind] : null;
-
-  return (
-    <TableWithTbody className="mb-8">
-      <TxDetailsShared txData={txData} pubKey={pubKey} blockData={blockData} />
-      {k ? (
-        <TableRow modifier="bordered">
-          <TableCell>{t('Kind')}</TableCell>
-          <TableCell>{k}</TableCell>
-        </TableRow>
-      ) : null}
-      {cmd.submitter ? (
-        <TableRow modifier="bordered">
-          <TableCell>{t('ETH key')}</TableCell>
-          <TableCell>
-            <EthExplorerLink
-              id={cmd.submitter}
-              type={EthExplorerLinkTypes.address}
-            />
-          </TableCell>
-        </TableRow>
-      ) : null}
-      {cmd.validatorNodeId ? (
-        <TableRow modifier="bordered">
-          <TableCell>{t('Validator')}</TableCell>
-          <TableCell>
-            <NodeLink id={cmd.validatorNodeId} />
-          </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-liquidity-amend.tsx

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

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

@@ -1,11 +1,10 @@
 import { t } from '@vegaprotocol/react-helpers';
+import type { BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
 import { MarketLink } from '../../links';
+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 type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
-import type { BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
 
 export type LiquidityCancellation =
   components['schemas']['v1LiquidityProvisionCancellation'];
@@ -37,7 +36,7 @@ export const TxDetailsLiquidityCancellation = ({
   const marketId: string = cancel.marketId || '-';
 
   return (
-    <TableWithTbody className="mb-8" allowWrap={true}>
+    <TableWithTbody className="mb-8">
       <TxDetailsShared txData={txData} pubKey={pubKey} blockData={blockData} />
       <TableRow modifier="bordered">
         <TableCell>{t('Market')}</TableCell>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -63,7 +63,7 @@ export const TxDataView = ({ txData, blockData }: TxDataViewProps) => {
           <Select
             placeholder="View as..."
             onChange={(v) => setShowTxData(v.target.value as ShowTxDataType)}
-            value={showTxData}
+            value={'JSON'}
           >
             <option value={'JSON'}>JSON</option>
             <option value={'base64'}>Base64</option>

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

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

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

@@ -10,7 +10,6 @@ const truthy = ['1', 'true'];
 export const ENV = {
   // Data sources
   // Environment
-  env: windowOrDefault('NX_VEGA_ENV'),
   dsn: windowOrDefault('NX_EXPLORER_SENTRY_DSN'),
   dataSources: {
     blockExplorerUrl: windowOrDefault('NX_BLOCK_EXPLORER'),
@@ -18,7 +17,6 @@ export const ENV = {
     tendermintWebsocketUrl: windowOrDefault('NX_TENDERMINT_WEBSOCKET_URL'),
     ethExplorerUrl: windowOrDefault('NX_ETHERSCAN_URL'),
     governanceUrl: windowOrDefault('NX_VEGA_GOVERNANCE_URL'),
-    vegaRepoUrl: windowOrDefault('NX_VEGA_REPO_URL'),
   },
   flags: {
     assets: truthy.includes(windowOrDefault('NX_EXPLORER_ASSETS')),

apps/explorer/src/app/hooks/use-txs-data.ts

@@ -5,7 +5,6 @@ import type {
   BlockExplorerTransactions,
 } from '../routes/types/block-explorer-response';
 import { DATA_SOURCES } from '../config';
-import isNumber from 'lodash/isNumber';
 
 export interface TxsStateProps {
   txsData: BlockExplorerTransactionResult[];
@@ -55,15 +54,15 @@ export const useTxsData = ({ limit, filters }: IUseTxsData) => {
   } = useFetch<BlockExplorerTransactions>(url, {}, false);
 
   useEffect(() => {
-    if (data && isNumber(data?.transactions?.length)) {
+    if (data?.transactions?.length) {
       setTxsState((prev) => ({
         txsData: [...prev.txsData, ...data.transactions],
-        hasMoreTxs: data.transactions.length > 0,
+        hasMoreTxs: true,
         lastCursor:
-          data.transactions[data.transactions.length - 1]?.cursor || '',
+          data.transactions[data.transactions.length - 1].cursor || '',
       }));
     }
-  }, [setTxsState, data]);
+  }, [setTxsState, data?.transactions]);
 
   const loadTxs = useCallback(() => {
     return refetch({

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/oracles/__generated__/Oracles.ts

@@ -10,7 +10,7 @@ export type ExplorerOracleDataConnectionFragment = { __typename?: 'OracleSpec',
 export type ExplorerOracleSpecsQueryVariables = Types.Exact<{ [key: string]: never; }>;
 
 
-export type ExplorerOracleSpecsQuery = { __typename?: 'Query', oracleSpecsConnection?: { __typename?: 'OracleSpecsConnection', pageInfo: { __typename?: 'PageInfo', hasNextPage: boolean }, edges?: Array<{ __typename?: 'OracleSpecEdge', node: { __typename?: 'OracleSpec', dataSourceSpec: { __typename?: 'ExternalDataSourceSpec', spec: { __typename?: 'DataSourceSpec', id: string, createdAt: any, updatedAt?: any | null, status: Types.DataSourceSpecStatus, data: { __typename?: 'DataSourceDefinition', sourceType: { __typename?: 'DataSourceDefinitionExternal', sourceType: { __typename?: 'DataSourceSpecConfiguration', signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, filters?: Array<{ __typename?: 'Filter', key: { __typename?: 'PropertyKey', name?: string | null, type: Types.PropertyKeyType }, conditions?: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator }> | null }> | null } } | { __typename?: 'DataSourceDefinitionInternal', sourceType: { __typename?: 'DataSourceSpecConfigurationTime', conditions: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator } | null> } } } } } } } | null> | null } | null };
+export type ExplorerOracleSpecsQuery = { __typename?: 'Query', oracleSpecsConnection?: { __typename?: 'OracleSpecsConnection', pageInfo: { __typename?: 'PageInfo', hasNextPage: boolean }, edges?: Array<{ __typename?: 'OracleSpecEdge', node: { __typename?: 'OracleSpec', dataSourceSpec: { __typename?: 'ExternalDataSourceSpec', spec: { __typename?: 'DataSourceSpec', id: string, createdAt: any, updatedAt?: any | null, status: Types.DataSourceSpecStatus, data: { __typename?: 'DataSourceDefinition', sourceType: { __typename?: 'DataSourceDefinitionExternal', sourceType: { __typename?: 'DataSourceSpecConfiguration', signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, filters?: Array<{ __typename?: 'Filter', key: { __typename?: 'PropertyKey', name?: string | null, type: Types.PropertyKeyType }, conditions?: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator }> | null }> | null } } | { __typename?: 'DataSourceDefinitionInternal', sourceType: { __typename?: 'DataSourceSpecConfigurationTime', conditions: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator } | null> } } } } }, dataConnection: { __typename?: 'OracleDataConnection', pageInfo: { __typename?: 'PageInfo', hasNextPage: boolean }, edges?: Array<{ __typename?: 'OracleDataEdge', node: { __typename?: 'OracleData', externalData: { __typename?: 'ExternalData', data: { __typename?: 'Data', matchedSpecIds?: Array<string> | null, broadcastAt: any, signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, data?: Array<{ __typename?: 'Property', name: string, value: string }> | null } } } } | null> | null } } } | null> | null } | null };
 
 export type ExplorerOracleSpecByIdQueryVariables = Types.Exact<{
   id: Types.Scalars['ID'];
@@ -73,7 +73,7 @@ export const ExplorerOracleDataSourceFragmentDoc = gql`
     `;
 export const ExplorerOracleDataConnectionFragmentDoc = gql`
     fragment ExplorerOracleDataConnection on OracleSpec {
-  dataConnection {
+  dataConnection(pagination: {first: 1}) {
     pageInfo {
       hasNextPage
     }
@@ -113,11 +113,13 @@ export const ExplorerOracleSpecsDocument = gql`
     edges {
       node {
         ...ExplorerOracleDataSource
+        ...ExplorerOracleDataConnection
       }
     }
   }
 }
-    ${ExplorerOracleDataSourceFragmentDoc}`;
+    ${ExplorerOracleDataSourceFragmentDoc}
+${ExplorerOracleDataConnectionFragmentDoc}`;
 
 /**
  * __useExplorerOracleSpecsQuery__

apps/explorer/src/app/routes/oracles/components/oracle.tsx

@@ -22,7 +22,7 @@ export type SourceType =
 interface OracleDetailsProps {
   id: string;
   dataSource: ExplorerOracleDataSourceFragment;
-  dataConnection?: ExplorerOracleDataConnectionFragment;
+  dataConnection: ExplorerOracleDataConnectionFragment;
   // Defaults to false. Hides the count of 'broadcasts' this oracle has seen
   showBroadcasts?: boolean;
 }
@@ -41,8 +41,7 @@ export const OracleDetails = ({
   showBroadcasts = false,
 }: OracleDetailsProps) => {
   const sourceType = dataSource.dataSourceSpec.spec.data.sourceType;
-  const reportsCount: number =
-    dataConnection?.dataConnection.edges?.length || 0;
+  const reportsCount: number = dataConnection.dataConnection.edges?.length || 0;
 
   return (
     <div>
@@ -64,9 +63,7 @@ export const OracleDetails = ({
         </TableRow>
       </TableWithTbody>
       <OracleFilter data={dataSource} />
-      {showBroadcasts && dataConnection ? (
-        <OracleData data={dataConnection} />
-      ) : null}
+      {showBroadcasts ? <OracleData data={dataConnection} /> : null}
     </div>
   );
 };

apps/explorer/src/app/routes/oracles/home/index.tsx

@@ -28,7 +28,7 @@ const Oracles = () => {
                 <OracleDetails
                   id={id}
                   dataSource={o?.node}
-                  showBroadcasts={false}
+                  dataConnection={o?.node}
                 />
                 <details>
                   <summary className="pointer">JSON</summary>

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

@@ -10,7 +10,7 @@ import { useDocumentTitle } from '../../../hooks/use-document-title';
 export const JumpToParty = () => {
   const navigate = useNavigate();
 
-  useDocumentTitle(['Public keys']);
+  useDocumentTitle(['Parties']);
 
   const handleSubmit = (e: React.SyntheticEvent) => {
     e.preventDefault();
@@ -27,8 +27,8 @@ export const JumpToParty = () => {
   };
   return (
     <JumpTo
-      label={t('Go to public key')}
-      placeholder={t('Public key')}
+      label={t('Go to party')}
+      placeholder={t('Party id')}
       inputId="party-input"
       inputType="text"
       inputName="partyId"
@@ -40,7 +40,7 @@ export const JumpToParty = () => {
 const Parties = () => {
   return (
     <section>
-      <RouteTitle data-testid="parties-header">{t('Public keys')}</RouteTitle>
+      <RouteTitle data-testid="parties-header">{t('Parties')}</RouteTitle>
       <JumpToParty />
     </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/parties/id/components/party-id-error.tsx

@@ -14,7 +14,7 @@ type PartyIdErrorProps = {
 const PartyIdError = ({ id, error }: PartyIdErrorProps) => {
   const end = isValidPartyId(id)
     ? t('No accounts or transactions found for: ')
-    : 'Invalid public key: ';
+    : 'Invalid party id: ';
   return (
     <section>
       <p>

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

@@ -16,7 +16,7 @@ import { PartyAccounts } from './components/party-accounts';
 const Party = () => {
   const { party } = useParams<{ party: string }>();
 
-  useDocumentTitle(['Public keys', party || '-']);
+  useDocumentTitle(['Parties', party || '-']);
   const partyId = toNonHex(party ? party : '');
   const { isMobile } = useScreenDimensions();
   const visibleChars = useMemo(() => (isMobile ? 10 : 14), [isMobile]);
@@ -44,7 +44,7 @@ const Party = () => {
     />
   ) : (
     <Panel>
-      <p>No data found for public key {party}</p>
+      <p>No party found for key {party}</p>
     </Panel>
   );
 
@@ -71,7 +71,7 @@ const Party = () => {
         className="font-alpha uppercase font-xl mb-4 text-zinc-800 dark:text-zinc-200"
         data-testid="parties-header"
       >
-        {t('Public key')}
+        {t('Party')}
       </h1>
       {partyRes.data ? (
         <>

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

@@ -1,4 +1,4 @@
-import { Assets } from './assets';
+import Assets from './assets';
 import BlockPage from './blocks';
 import Governance from './governance';
 import Home from './home';

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

@@ -38,7 +38,7 @@ const Tx = () => {
         to={`/${Routes.TX}`}
       >
         <Icon
-          className="text-vega-light-150 dark:text-vega-light-150"
+          className="text-vega-light-300 dark:text-vega-light-300"
           name={IconNames.CHEVRON_LEFT}
         />
         All Transactions

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],
 };