chore: formatting

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

.github/workflows/cypress-pr.yml

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

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

@@ -1,150 +1,57 @@
-context('Asset page', { tags: '@regression' }, function () {
-  before('gather system asset information', function () {
-    cy.get_asset_information().as('assetsInfo');
-  });
-
-  describe('Verify elements on page', function () {
-    const assetsNavigation = 'a[href="/assets"]';
-    const assetHeader = '[data-testid="asset-header"]';
-    const jsonSection = '.language-json';
-
-    before('Navigate to assets page', function () {
-      cy.visit('/');
-      cy.get(assetsNavigation).click();
+context('Asset page', { tags: '@regression' }, () => {
+  const columns = ['symbol', 'name', 'id', 'type', 'status', 'actions'];
+  const hiddenOnMobile = ['id', 'type', 'status'];
+  describe('Verify elements on page', () => {
+    before('Navigate to assets page', () => {
+      cy.visit('/assets');
 
       // Check we have enough enough assets
-      const assetNames = Object.keys(this.assetsInfo);
-      assert.isAtLeast(
-        assetNames.length,
-        5,
-        'Ensuring we have at least 5 assets to test'
-      );
-    });
-
-    it('should be able to see assets page sections', function () {
-      const assetNames = Object.keys(this.assetsInfo);
-      assetNames.forEach((assetName) => {
-        cy.get(assetHeader)
-          .contains(assetName)
-          .should('be.visible')
-          .next()
-          .within(() => {
-            cy.get(jsonSection).should('not.be.empty');
-          });
+      cy.getAssets().then((assets) => {
+        assert.isAtLeast(
+          Object.keys(assets).length,
+          5,
+          'Ensuring we have at least 5 assets to test'
+        );
       });
     });
 
-    it('should be able to see all asset details displayed in JSON', function () {
-      const assetNames = Object.keys(this.assetsInfo);
-      assetNames.forEach((assetName) => {
-        cy.get(assetHeader)
-          .contains(assetName)
-          .next()
-          .within(() => {
-            cy.get(jsonSection)
-              .invoke('text')
-              .convert_string_json_to_js_object()
-              .then((assetsListedInJson) => {
-                const assetInfo = this.assetsInfo[assetName];
-
-                assert.equal(assetsListedInJson.name, assetInfo.node.name);
-                assert.equal(assetsListedInJson.id, assetInfo.node.id);
-                assert.equal(
-                  assetsListedInJson.decimals,
-                  assetInfo.node.decimals
-                );
-                assert.equal(assetsListedInJson.symbol, assetInfo.node.symbol);
-                assert.equal(
-                  assetsListedInJson.source.__typename,
-                  assetInfo.node.source.__typename
-                );
-
-                if (assetInfo.node.source.__typename == 'ERC20') {
-                  assert.equal(
-                    assetsListedInJson.source.contractAddress,
-                    assetInfo.node.source.contractAddress
-                  );
-                }
-
-                if (assetInfo.node.source.__typename == 'BuiltinAsset') {
-                  assert.equal(
-                    assetsListedInJson.source.maxFaucetAmountMint,
-                    assetInfo.node.source.maxFaucetAmountMint
-                  );
-                }
-
-                let knownAssetTypes = ['BuiltinAsset', 'ERC20'];
-                assert.include(
-                  knownAssetTypes,
-                  assetInfo.node.source.__typename,
-                  `Checking that current asset type of ${assetInfo.node.source.__typename} /
-                  is one of: ${knownAssetTypes}: /
-                  If fail then we need to add extra tests for un-encountered asset types`
-                );
-              });
-          });
-      });
-    });
-
-    it('should be able to switch assets between light and dark mode', function () {
-      const whiteThemeSelectedMenuOptionColor = 'rgb(255, 7, 127)';
-      const whiteThemeJsonFieldBackColor = 'rgb(255, 255, 255)';
-      const whiteThemeSideMenuBackgroundColor = 'rgb(255, 255, 255)';
-      const darkThemeSelectedMenuOptionColor = 'rgb(215, 251, 80)';
-      const darkThemeJsonFieldBackColor = 'rgb(38, 38, 38)';
-      const darkThemeSideMenuBackgroundColor = 'rgb(0, 0, 0)';
-      const themeSwitcher = '[data-testid="theme-switcher"]';
-      const jsonFields = '.hljs';
-      const sideMenuBackground = '.absolute';
-
-      // Engage dark mode if not allready set
-      cy.get(sideMenuBackground)
-        .should('have.css', 'background-color')
-        .then((background_color) => {
-          if (background_color.includes(whiteThemeSideMenuBackgroundColor))
-            cy.get(themeSwitcher).click();
+    it('should be able to see full assets list', () => {
+      cy.getAssets().then((assets) => {
+        Object.values(assets).forEach((asset) => {
+          cy.get(`[row-id="${asset.id}"]`).should('be.visible');
         });
-
-      // Engage white mode
-      cy.get(themeSwitcher).click();
-
-      // White Mode
-      cy.get(assetsNavigation)
-        .should('have.css', 'background-color')
-        .and('include', whiteThemeSelectedMenuOptionColor);
-      cy.get(jsonFields)
-        .should('have.css', 'background-color')
-        .and('include', whiteThemeJsonFieldBackColor);
-      cy.get(sideMenuBackground)
-        .should('have.css', 'background-color')
-        .and('include', whiteThemeSideMenuBackgroundColor);
-
-      // Dark Mode
-      cy.get(themeSwitcher).click();
-      cy.get(assetsNavigation)
-        .should('have.css', 'background-color')
-        .and('include', darkThemeSelectedMenuOptionColor);
-      cy.get(jsonFields)
-        .should('have.css', 'background-color')
-        .and('include', darkThemeJsonFieldBackColor);
-      cy.get(sideMenuBackground)
-        .should('have.css', 'background-color')
-        .and('include', darkThemeSideMenuBackgroundColor);
+      });
+      columns.forEach((col) => {
+        cy.get(`[col-id="${col}"]`).should('be.visible');
+      });
     });
 
-    it('should be able to see assets page displayed in mobile', function () {
-      cy.common_switch_to_mobile_and_click_toggle();
-      cy.get(assetsNavigation).click();
+    it('should be able to see assets page displayed in mobile', () => {
+      cy.switchToMobile();
 
-      const assetNames = Object.keys(this.assetsInfo);
-      assetNames.forEach((assetName) => {
-        cy.get(assetHeader)
-          .contains(assetName)
-          .should('be.visible')
-          .next()
-          .within(() => {
-            cy.get(jsonSection).should('not.be.empty');
-          });
+      hiddenOnMobile.forEach((col) => {
+        cy.get(`[col-id="${col}"]`).should('have.length', 0);
+      });
+
+      cy.getAssets().then((assets) => {
+        Object.values(assets).forEach((asset) => {
+          cy.get(`[row-id="${asset.id}"]`).should('be.visible');
+        });
+      });
+    });
+
+    it('should open details dialog when clicked on "View details"', () => {
+      cy.getAssets().then((assets) => {
+        Object.values(assets).forEach((asset) => {
+          cy.get(`[row-id="${asset.id}"] [col-id="actions"] button`)
+            .eq(0)
+            .should('contain.text', 'View details');
+          cy.get(`[row-id="${asset.id}"] [col-id="actions"] button`)
+            .eq(0)
+            .click();
+          cy.getByTestId('dialog-content').should('be.visible');
+          cy.getByTestId('dialog-close').click();
+        });
       });
     });
   });

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

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

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

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

apps/explorer/.env.devnet

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

apps/explorer/.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.n01.sandbox.vega.xyz
-NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n01.sandbox.vega.xyz/websocket
+NX_TENDERMINT_URL=https://tm.sandbox.vega.xyz
+NX_TENDERMINT_WEBSOCKET_URL=wss://tm.sandbox.vega.xyz/websocket
 NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_VEGA_GOVERNANCE_URL=https://sandbox.token.vega.xyz

apps/explorer/src/app/app.tsx

@@ -9,6 +9,23 @@ import { TendermintWebsocketProvider } from './contexts/websocket/tendermint-web
 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);
@@ -56,6 +73,8 @@ function App() {
           <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,21 +17,17 @@ const AssetBalance = ({
   price,
   showAssetLink = true,
 }: AssetBalanceProps) => {
-  const { data } = useExplorerAssetQuery({
-    variables: { id: assetId },
-  });
+  const { data: asset } = useAssetDataProvider(assetId);
 
   const label =
-    data && data.asset?.decimals
-      ? addDecimalsFormatNumber(price, data.asset.decimals)
+    asset && asset.decimals
+      ? addDecimalsFormatNumber(price, asset.decimals)
       : price;
 
   return (
     <div className="inline-block">
       <span>{label}</span>{' '}
-      {showAssetLink && data?.asset?.id ? (
-        <AssetLink id={data.asset.id} />
-      ) : null}
+      {showAssetLink && asset?.id ? <AssetLink assetId={assetId} /> : null}
     </div>
   );
 };

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

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

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

@@ -0,0 +1,115 @@
+import type { AssetFieldsFragment } from '@vegaprotocol/assets';
+import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
+import { AssetTypeMapping, AssetStatusMapping } from '@vegaprotocol/assets';
+import { t } from '@vegaprotocol/react-helpers';
+import type { VegaICellRendererParams } from '@vegaprotocol/ui-toolkit';
+import { ButtonLink } from '@vegaprotocol/ui-toolkit';
+import type { AgGridReact } from 'ag-grid-react';
+import { AgGridColumn } from 'ag-grid-react';
+import { AgGridDynamic as AgGrid } from '@vegaprotocol/ui-toolkit';
+import { useRef, useLayoutEffect } from 'react';
+import { BREAKPOINT_MD } from '../../config/breakpoints';
+
+type AssetsTableProps = {
+  data: AssetFieldsFragment[] | null;
+};
+export const AssetsTable = ({ data }: AssetsTableProps) => {
+  const openAssetDetailsDialog = useAssetDetailsDialogStore(
+    (state) => state.open
+  );
+
+  const ref = useRef<AgGridReact>(null);
+  const showColumnsOnDesktop = () => {
+    ref.current?.columnApi.setColumnsVisible(
+      ['id', 'type', 'status'],
+      window.innerWidth > BREAKPOINT_MD
+    );
+  };
+
+  useLayoutEffect(() => {
+    window.addEventListener('resize', showColumnsOnDesktop);
+    return () => {
+      window.removeEventListener('resize', showColumnsOnDesktop);
+    };
+  }, []);
+
+  return (
+    <AgGrid
+      ref={ref}
+      rowData={data}
+      getRowId={({ data }: { data: AssetFieldsFragment }) => data.id}
+      overlayNoRowsTemplate={t('This chain has no assets')}
+      domLayout="autoHeight"
+      defaultColDef={{
+        flex: 1,
+        resizable: true,
+        sortable: true,
+        filter: true,
+        filterParams: { buttons: ['reset'] },
+        autoHeight: true,
+      }}
+      suppressCellFocus={true}
+      onGridReady={() => {
+        showColumnsOnDesktop();
+      }}
+    >
+      <AgGridColumn headerName={t('Symbol')} field="symbol" />
+      <AgGridColumn headerName={t('Name')} field="name" />
+      <AgGridColumn flex="2" headerName={t('ID')} field="id" />
+      <AgGridColumn
+        colId="type"
+        headerName={t('Type')}
+        field="source.__typename"
+        valueFormatter={({ value }: { value?: string }) =>
+          value && AssetTypeMapping[value].value
+        }
+      />
+      <AgGridColumn
+        headerName={t('Status')}
+        field="status"
+        valueFormatter={({ value }: { value?: string }) =>
+          value && AssetStatusMapping[value].value
+        }
+      />
+      <AgGridColumn
+        colId="actions"
+        headerName=""
+        sortable={false}
+        filter={false}
+        resizable={false}
+        wrapText={true}
+        field="id"
+        cellRenderer={({
+          value,
+        }: VegaICellRendererParams<AssetFieldsFragment, 'id'>) =>
+          value ? (
+            <div className="pb-1">
+              <ButtonLink
+                onClick={(e) => {
+                  openAssetDetailsDialog(value, e.target as HTMLElement);
+                }}
+              >
+                {t('View details')}
+              </ButtonLink>{' '}
+              <span className="max-md:hidden">
+                <ButtonLink
+                  onClick={(e) => {
+                    openAssetDetailsDialog(
+                      value,
+                      e.target as HTMLElement,
+                      true
+                    );
+                  }}
+                >
+                  {t('View JSON')}
+                </ButtonLink>
+              </span>
+            </div>
+          ) : (
+            ''
+          )
+        }
+      />
+    </AgGrid>
+  );
+};

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

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

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

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

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

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

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

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

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

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

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

@@ -2,6 +2,7 @@ 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, 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, 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 const ExplorerMarketDocument = gql`
@@ -16,6 +16,7 @@ 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,6 +55,7 @@ describe('Market link component', () => {
           market: {
             id: '123',
             decimalPlaces: 5,
+            positionDecimalPlaces: 2,
             state: 'irrelevant-test-data',
             tradableInstrument: {
               instrument: {

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

@@ -19,6 +19,7 @@ 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, 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, positionDecimalPlaces: 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, 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, positionDecimalPlaces: 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,6 +35,7 @@ export const ExplorerDeterministicOrderFieldsFragmentDoc = gql`
   market {
     id
     decimalPlaces
+    positionDecimalPlaces
     tradableInstrument {
       instrument {
         name

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

@@ -61,6 +61,7 @@ function renderExistingAmend(id: string, version: number, amend: Amend) {
               __typename: 'Market',
               id: '789',
               state: 'STATUS_ACTIVE',
+              positionDecimalPlaces: 2,
               decimalPlaces: '5',
               tradableInstrument: {
                 instrument: {
@@ -88,6 +89,7 @@ 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,6 +4,7 @@ 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;
@@ -90,7 +91,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">
-                {o.size}
+                <SizeInMarket size={o.size} marketId={o.market.id} />
               </h5>
             </div>
 

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

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

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

@@ -90,6 +90,7 @@ describe('Order TX Summary component', () => {
           market: {
             id: '123',
             decimalPlaces: 2,
+            positionDecimalPlaces: 2,
             state: 'irrelevant-test-data',
             tradableInstrument: {
               instrument: {
@@ -111,13 +112,14 @@ describe('Order TX Summary component', () => {
     const res = renderComponent(o, [mock]);
     expect(res.queryByTestId('order-summary')).toBeInTheDocument();
     expect(res.getByText('Buy')).toBeInTheDocument();
-    expect(res.getByText('10')).toBeInTheDocument();
 
-    // Initially renders price alone
+    // Initially renders price and size unformatted
     expect(res.getByText('333')).toBeInTheDocument();
+    expect(res.getByText('10')).toBeInTheDocument();
 
     // After fetch renders formatted price and asset quotename
     expect(await res.findByText('3.33')).toBeInTheDocument();
     expect(await res.findByText('TEST')).toBeInTheDocument();
+    expect(await res.getByText('0.10')).toBeInTheDocument();
   });
 });

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

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

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

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

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

@@ -66,7 +66,9 @@ export const Search = () => {
             className="text-white"
             hasError={Boolean(error?.message)}
             type="text"
-            placeholder={t('Enter block number, party id or transaction hash')}
+            placeholder={t(
+              'Enter block number, public key 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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -20,6 +20,9 @@ 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;
@@ -67,6 +70,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':
@@ -99,6 +106,8 @@ function getTransactionComponent(txData?: BlockExplorerTransactionResult) {
       return TxDetailsDelegate;
     case 'Undelegate':
       return TxDetailsUndelegate;
+    case 'State Variable Proposal':
+      return TxDetailsStateVariable;
     default:
       return TxDetailsGeneric;
   }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,4 +1,5 @@
 import '@vegaprotocol/cypress';
+import 'cypress-real-events/support';
 
 import './common.functions.js';
 import './staking.functions.js';

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

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

apps/token-e2e/tsconfig.json

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

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

@@ -32,7 +32,9 @@ export function TemplateSidebar({ children, sidebar }: TemplateSidebarProps) {
         <ViewingAsBanner pubKey={pubKey} disconnect={disconnect} />
       ) : null}
       <div className="w-full border-b border-neutral-700 lg:grid lg:grid-rows-[1fr] lg:grid-cols-[1fr_450px]">
-        <main className="col-start-1 p-4">{children}</main>
+        <main className="max-w-[100vw] col-start-1 p-4 overflow-auto">
+          {children}
+        </main>
         <aside className="col-start-2 row-start-1 row-span-2 hidden lg:block p-4 bg-banner bg-contain border-l border-neutral-700">
           {sidebar.map((Component, i) => (
             <section className="mb-4 last:mb-0" key={i}>

apps/token/src/hooks/use-refresh-after-epoch.ts

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

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

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

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

@@ -8,7 +8,7 @@ import {
   RoundedWrapper,
 } from '@vegaprotocol/ui-toolkit';
 import { useDocumentTitle } from '../../hooks/use-document-title';
-import { useRefreshValidators } from '../../hooks/use-refresh-validators';
+import { useRefreshAfterEpoch } from '../../hooks/use-refresh-after-epoch';
 import { ProposalsListItem } from '../proposals/components/proposals-list-item';
 import Routes from '../routes';
 import {
@@ -156,7 +156,7 @@ const GovernanceHome = ({ name }: RouteChildProps) => {
     refetch,
   } = useNodesQuery();
 
-  useRefreshValidators(validatorsData?.epoch.timestamps.expiry, refetch);
+  useRefreshAfterEpoch(validatorsData?.epoch.timestamps.expiry, refetch);
 
   const proposals = useMemo(
     () =>