Merge branch 'develop' into feat/2120-announce-node-tx

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/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/table/index.tsx

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,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/static/src/assets/mainnet-tranches.json

@@ -115,7 +115,7 @@
     "tranche_end": "2023-12-05T00:00:00.000Z",
     "total_added": "86666.297",
     "total_removed": "0",
-    "locked_amount": "71112.3321837696257405828",
+    "locked_amount": "70697.358476038783010308",
     "deposits": [
       {
         "amount": "86666.297",
@@ -181,7 +181,7 @@
     "tranche_end": "2023-06-01T00:00:00.000Z",
     "total_added": "2500",
     "total_removed": "0",
-    "locked_amount": "1545.241751882377",
+    "locked_amount": "1521.2350872507125",
     "deposits": [
       {
         "amount": "2500",
@@ -568,8 +568,8 @@
     "tranche_start": "2023-02-01T00:00:00.000Z",
     "tranche_end": "2023-08-01T00:00:00.000Z",
     "total_added": "37500",
-    "total_removed": "183.137181525",
-    "locked_amount": "35944.80653391651375",
+    "total_removed": "328.1417856",
+    "locked_amount": "35582.71706184775875",
     "deposits": [
       {
         "amount": "7500",
@@ -587,6 +587,11 @@
         "amount": "183.137181525",
         "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
         "tx": "0x326ded5446d14472f79d487ece43dd7db760fec5df52e310342930db38fb5de1"
+      },
+      {
+        "amount": "145.004604075",
+        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+        "tx": "0x6171eb144528a90bd3a51c6aacec83d4f40d63ffee5388a1c0b8318bee460042"
       }
     ],
     "users": [
@@ -606,11 +611,17 @@
             "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
             "tranche_id": 34,
             "tx": "0x326ded5446d14472f79d487ece43dd7db760fec5df52e310342930db38fb5de1"
+          },
+          {
+            "amount": "145.004604075",
+            "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+            "tranche_id": 34,
+            "tx": "0x6171eb144528a90bd3a51c6aacec83d4f40d63ffee5388a1c0b8318bee460042"
           }
         ],
         "total_tokens": "7500",
-        "withdrawn_tokens": "183.137181525",
-        "remaining_tokens": "7316.862818475"
+        "withdrawn_tokens": "328.1417856",
+        "remaining_tokens": "7171.8582144"
       },
       {
         "address": "0x0B4e6fcE839B01ef43DA6F890FAC7B1Afb004600",
@@ -635,7 +646,7 @@
     "tranche_end": "2023-12-05T00:00:00.000Z",
     "total_added": "129999.45",
     "total_removed": "0",
-    "locked_amount": "71047.451128348659886215",
+    "locked_amount": "70632.856031912127156",
     "deposits": [
       {
         "amount": "129999.45",
@@ -701,7 +712,7 @@
     "tranche_end": "2023-09-03T00:00:00.000Z",
     "total_added": "62600",
     "total_removed": "0",
-    "locked_amount": "35415.06666032470672",
+    "locked_amount": "35115.32668061897062",
     "deposits": [
       {
         "amount": "10000",
@@ -894,7 +905,7 @@
     "tranche_end": "2023-09-17T00:00:00.000Z",
     "total_added": "5000",
     "total_removed": "0",
-    "locked_amount": "3020.4602676306445",
+    "locked_amount": "2996.519374682902",
     "deposits": [
       {
         "amount": "5000",
@@ -1105,7 +1116,7 @@
     "tranche_end": "2023-04-05T00:00:00.000Z",
     "total_added": "97499.58",
     "total_removed": "0",
-    "locked_amount": "12913.1328103802082906612",
+    "locked_amount": "12506.4536420561534866824",
     "deposits": [
       {
         "amount": "97499.58",
@@ -1138,7 +1149,7 @@
     "tranche_end": "2023-04-05T00:00:00.000Z",
     "total_added": "135173.4239508",
     "total_removed": "98230.390980249184455396",
-    "locked_amount": "17650.023192413700622871272848",
+    "locked_amount": "17094.162979544133231208218516",
     "deposits": [
       {
         "amount": "135173.4239508",
@@ -1184,7 +1195,7 @@
     "tranche_end": "2023-04-05T00:00:00.000Z",
     "total_added": "32499.86",
     "total_removed": "0",
-    "locked_amount": "5432.3319754511083747504",
+    "locked_amount": "5261.2490723107703745224",
     "deposits": [
       {
         "amount": "32499.86",
@@ -1217,7 +1228,7 @@
     "tranche_end": "2023-04-05T00:00:00.000Z",
     "total_added": "10833.29",
     "total_removed": "0",
-    "locked_amount": "1768.171343907611431555",
+    "locked_amount": "1712.4855190846272169196",
     "deposits": [
       {
         "amount": "10833.29",
@@ -1250,7 +1261,7 @@
     "tranche_end": "2023-04-05T00:00:00.000Z",
     "total_added": "22749.93",
     "total_removed": "0",
-    "locked_amount": "6609.8193974640044998578",
+    "locked_amount": "6401.6533470713355214011",
     "deposits": [
       {
         "amount": "6500",
@@ -1388,8 +1399,8 @@
     "tranche_start": "2022-11-01T00:00:00.000Z",
     "tranche_end": "2023-05-01T00:00:00.000Z",
     "total_added": "22500",
-    "total_removed": "3995.28612255",
-    "locked_amount": "10130.41983195211725",
+    "total_removed": "4140.290726625",
+    "locked_amount": "9913.1661487108665",
     "deposits": [
       {
         "amount": "7500",
@@ -1418,6 +1429,11 @@
         "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
         "tx": "0x3f253311d975a353930c10981b742ac3b0df52da085d437244f077b63ec32953"
       },
+      {
+        "amount": "145.004604075",
+        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+        "tx": "0x8050aa26e1965d26aa350efbc83e48c1b95f8c0933f35dee35fbcdd43cb08dcc"
+      },
       {
         "amount": "305.3119245",
         "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@@ -1499,6 +1515,12 @@
             "tranche_id": 33,
             "tx": "0x3f253311d975a353930c10981b742ac3b0df52da085d437244f077b63ec32953"
           },
+          {
+            "amount": "145.004604075",
+            "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+            "tranche_id": 33,
+            "tx": "0x8050aa26e1965d26aa350efbc83e48c1b95f8c0933f35dee35fbcdd43cb08dcc"
+          },
           {
             "amount": "305.3119245",
             "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@@ -1561,8 +1583,8 @@
           }
         ],
         "total_tokens": "7500",
-        "withdrawn_tokens": "3995.28612255",
-        "remaining_tokens": "3504.71387745"
+        "withdrawn_tokens": "4140.290726625",
+        "remaining_tokens": "3359.709273375"
       },
       {
         "address": "0x2539b51EbDE65a75672aBcfE9439a706a99D18D1",
@@ -1587,7 +1609,7 @@
     "tranche_end": "2023-06-02T00:00:00.000Z",
     "total_added": "1939928.38",
     "total_removed": "928642.9598472029154",
-    "locked_amount": "603203.9854527480689673466",
+    "locked_amount": "593915.2619183745624309166",
     "deposits": [
       {
         "amount": "1852091.69",
@@ -1938,7 +1960,7 @@
     "tranche_start": "2022-08-01T00:00:00.000Z",
     "tranche_end": "2023-02-01T00:00:00.000Z",
     "total_added": "42500",
-    "total_removed": "24434.0787288",
+    "total_removed": "30000",
     "locked_amount": "0",
     "deposits": [
       {
@@ -1953,6 +1975,11 @@
       }
     ],
     "withdrawals": [
+      {
+        "amount": "5565.9212712",
+        "user": "0x0B4e6fcE839B01ef43DA6F890FAC7B1Afb004600",
+        "tx": "0x1e37e1c281da391a5bb1ce5ad16cdcc78dba1cb97a1e46103dc4b07725f9ab9e"
+      },
       {
         "amount": "1982.0652174",
         "user": "0x0B4e6fcE839B01ef43DA6F890FAC7B1Afb004600",
@@ -2001,6 +2028,12 @@
           }
         ],
         "withdrawals": [
+          {
+            "amount": "5565.9212712",
+            "user": "0x0B4e6fcE839B01ef43DA6F890FAC7B1Afb004600",
+            "tranche_id": 17,
+            "tx": "0x1e37e1c281da391a5bb1ce5ad16cdcc78dba1cb97a1e46103dc4b07725f9ab9e"
+          },
           {
             "amount": "1982.0652174",
             "user": "0x0B4e6fcE839B01ef43DA6F890FAC7B1Afb004600",
@@ -2027,8 +2060,8 @@
           }
         ],
         "total_tokens": "30000",
-        "withdrawn_tokens": "24434.0787288",
-        "remaining_tokens": "5565.9212712"
+        "withdrawn_tokens": "30000",
+        "remaining_tokens": "0"
       }
     ]
   },
@@ -33570,7 +33603,7 @@
     "tranche_end": "2023-06-05T00:00:00.000Z",
     "total_added": "3732368.4671",
     "total_removed": "592998.0503546212334",
-    "locked_amount": "951415.83704816660962319369",
+    "locked_amount": "937142.30296588429147888632",
     "deposits": [
       {
         "amount": "1998.95815",
@@ -34895,8 +34928,8 @@
     "tranche_start": "2022-06-05T00:00:00.000Z",
     "tranche_end": "2023-12-05T00:00:00.000Z",
     "total_added": "15870102.715470999700000001",
-    "total_removed": "560497.18500562348693952",
-    "locked_amount": "8673347.0570783123228140520127045570383887",
+    "total_removed": "563236.46299044578477952",
+    "locked_amount": "8622734.02167102114525126607450796049608",
     "deposits": [
       {
         "amount": "16249.93",
@@ -35475,6 +35508,26 @@
         "user": "0xE6CacAE56Cca8dFdB7910b5A13578719D4E57DA0",
         "tx": "0x86280b4d0cccc9e251d0f18fce5af974d0e1fb31a1aaf219725a27efb0d607f4"
       },
+      {
+        "amount": "718.26845",
+        "user": "0xF4c75FdbAe821C6B5DBB9f001bB23cBA58D1bA37",
+        "tx": "0x71e2885c8c466c935c3fdcc7618896e149ebd155ff432f9c95b993c9f134547a"
+      },
+      {
+        "amount": "615.533659014901",
+        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+        "tx": "0x61b0366935b55d5f021bbf4c0e1c7595e1a8628fe24c135e62e66d82dc9cc021"
+      },
+      {
+        "amount": "429.5754139050275",
+        "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+        "tx": "0x2dc4f71aa0fc8695025203f3ecb4f64d0728c6b38f83796442443fdc3edb991a"
+      },
+      {
+        "amount": "975.90046190236934",
+        "user": "0xe3eB4CF43C072658401996b71D43eE26E573562D",
+        "tx": "0xb39a9645c363292992430b1ac8bd16052b46a7eb1624e7e8ba86a0d1663585b2"
+      },
       {
         "amount": "858.360074993579125",
         "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@@ -37100,6 +37153,18 @@
             "tranche_id": 2,
             "tx": "0xb6a33b8b8855789fbc2d0f9545ba5c2258e52f143d90bc75bbe2411bd2f9b4a5"
           },
+          {
+            "amount": "615.533659014901",
+            "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+            "tranche_id": 2,
+            "tx": "0x61b0366935b55d5f021bbf4c0e1c7595e1a8628fe24c135e62e66d82dc9cc021"
+          },
+          {
+            "amount": "429.5754139050275",
+            "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
+            "tranche_id": 2,
+            "tx": "0x2dc4f71aa0fc8695025203f3ecb4f64d0728c6b38f83796442443fdc3edb991a"
+          },
           {
             "amount": "858.360074993579125",
             "user": "0x20CD77B9FC2f1fEDfb6F184E25f7127BFE991C8b",
@@ -38188,8 +38253,8 @@
           }
         ],
         "total_tokens": "259998.8875",
-        "withdrawn_tokens": "117484.092376092228875",
-        "remaining_tokens": "142514.795123907771125"
+        "withdrawn_tokens": "118529.201449012157375",
+        "remaining_tokens": "141469.686050987842625"
       },
       {
         "address": "0x89051CAb67Bc7F8CC44F7e270c6EDaf1EC57676c",
@@ -38434,6 +38499,12 @@
             "tranche_id": 2,
             "tx": "0xb0d4e11c4f5aab1c4c65994c14d5272ecb4df9972ddee36ae5389de3731a3e35"
           },
+          {
+            "amount": "975.90046190236934",
+            "user": "0xe3eB4CF43C072658401996b71D43eE26E573562D",
+            "tranche_id": 2,
+            "tx": "0xb39a9645c363292992430b1ac8bd16052b46a7eb1624e7e8ba86a0d1663585b2"
+          },
           {
             "amount": "1293.67099136315494",
             "user": "0xe3eB4CF43C072658401996b71D43eE26E573562D",
@@ -38634,8 +38705,8 @@
           }
         ],
         "total_tokens": "150551.801",
-        "withdrawn_tokens": "67672.37507088538159",
-        "remaining_tokens": "82879.42592911461841"
+        "withdrawn_tokens": "68648.27553278775093",
+        "remaining_tokens": "81903.52546721224907"
       },
       {
         "address": "0x4d982Ab0823fD2f48e934a7be2bb0a5374a26148",
@@ -38849,6 +38920,12 @@
             "tranche_id": 2,
             "tx": "0x94fe358ee7c973dd1d28ca4c56250dfaccbcb718673872c8e9cf8651a22a1108"
           },
+          {
+            "amount": "718.26845",
+            "user": "0xF4c75FdbAe821C6B5DBB9f001bB23cBA58D1bA37",
+            "tranche_id": 2,
+            "tx": "0x71e2885c8c466c935c3fdcc7618896e149ebd155ff432f9c95b993c9f134547a"
+          },
           {
             "amount": "1099.300488",
             "user": "0xF4c75FdbAe821C6B5DBB9f001bB23cBA58D1bA37",
@@ -39031,8 +39108,8 @@
           }
         ],
         "total_tokens": "200000",
-        "withdrawn_tokens": "90095.748006",
-        "remaining_tokens": "109904.251994"
+        "withdrawn_tokens": "90814.016456",
+        "remaining_tokens": "109185.983544"
       },
       {
         "address": "0x1b956E6c00E238194B331eddEFF72Cb5f28A8d01",
@@ -40384,8 +40461,8 @@
     "tranche_start": "2021-11-05T00:00:00.000Z",
     "tranche_end": "2023-05-05T00:00:00.000Z",
     "total_added": "14597706.0446472999",
-    "total_removed": "3921707.576409189114087282",
-    "locked_amount": "2285733.39696055204772238928937325",
+    "total_removed": "3923097.864384523185862282",
+    "locked_amount": "2239007.76583982230552610140543878",
     "deposits": [
       {
         "amount": "129284.449",
@@ -40649,6 +40726,16 @@
         "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
         "tx": "0x0c292f2355b5cdc3b389ed35e6e138e593b1db9d91fcd58f132835343724bf90"
       },
+      {
+        "amount": "853.04613488184474475",
+        "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
+        "tx": "0xe2b3e0f908fa79636a02b919ede475f86857f0588badd6c85249eb97802fc331"
+      },
+      {
+        "amount": "537.24184045222703025",
+        "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
+        "tx": "0x58aa11462e034da8d46955c61b513f80de89ebcfd89a96860afc3f8da5bfa73e"
+      },
       {
         "amount": "8950.14985089483210984",
         "user": "0x66827bCD635f2bB1779d68c46aEB16541bCA6ba8",
@@ -43492,6 +43579,18 @@
             "tranche_id": 3,
             "tx": "0x0c292f2355b5cdc3b389ed35e6e138e593b1db9d91fcd58f132835343724bf90"
           },
+          {
+            "amount": "853.04613488184474475",
+            "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
+            "tranche_id": 3,
+            "tx": "0xe2b3e0f908fa79636a02b919ede475f86857f0588badd6c85249eb97802fc331"
+          },
+          {
+            "amount": "537.24184045222703025",
+            "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
+            "tranche_id": 3,
+            "tx": "0x58aa11462e034da8d46955c61b513f80de89ebcfd89a96860afc3f8da5bfa73e"
+          },
           {
             "amount": "1192.05386354121365675",
             "user": "0x4Aa3c35F6CC2d507E5C18205ee57099A4C80B19b",
@@ -45882,8 +45981,8 @@
           }
         ],
         "total_tokens": "359123.469575",
-        "withdrawn_tokens": "302309.38363864041348675",
-        "remaining_tokens": "56814.08593635958651325"
+        "withdrawn_tokens": "303699.67161397448526175",
+        "remaining_tokens": "55423.79796102551473825"
       },
       {
         "address": "0xBdd412797c1B78535Afc5F71503b91fAbD0160fB",
@@ -47221,7 +47320,7 @@
     "tranche_end": "2023-04-05T00:00:00.000Z",
     "total_added": "5778205.3912159303",
     "total_removed": "2730068.739915456784546642",
-    "locked_amount": "586203.563337309134341622543222115",
+    "locked_amount": "567742.106149360000910747830518459",
     "deposits": [
       {
         "amount": "552496.6455",
@@ -49204,7 +49303,7 @@
     "tranche_end": "2023-06-05T00:00:00.000Z",
     "total_added": "472355.6199999996",
     "total_removed": "32520.5457984892685",
-    "locked_amount": "150757.26292676673422831001319128",
+    "locked_amount": "148495.55483872828913703876509388",
     "deposits": [
       {
         "amount": "3000",

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/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/routes/staking/home/validator-tables/shared.tsx

@@ -126,10 +126,10 @@ export const VotingPowerRenderer = ({ data }: VotingPowerRendererProps) => {
     <Tooltip
       description={
         <>
-          <div>
+          <div data-testid="unnormalised-voting-power-tooltip">
             {t('unnormalisedVotingPower')}: {data.unnormalisedVotingPower}
           </div>
-          <div>
+          <div data-testid="normalised-voting-power-tooltip">
             {t('normalisedVotingPower')}: {data.normalisedVotingPower}
           </div>
         </>
@@ -155,13 +155,13 @@ export const TotalStakeRenderer = ({ data }: TotalStakeRendererProps) => {
     <Tooltip
       description={
         <>
-          <div>
+          <div data-testid="staked-operator-tooltip">
             {t('stakedByOperator')}: {data.stakedByOperator.toString()}
           </div>
-          <div>
+          <div data-testid="staked-delegates-tooltip">
             {t('stakedByDelegates')}: {data.stakedByDelegates.toString()}
           </div>
-          <div>
+          <div data-testid="total-staked-tooltip">
             {t('totalStake')}: <span className="font-bold">{data.stake}</span>
           </div>
         </>
@@ -191,13 +191,13 @@ export const TotalPenaltiesRenderer = ({
     <Tooltip
       description={
         <>
-          <div>
+          <div data-testid="performance-penalty-tooltip">
             {t('performancePenalty')}: {data.performancePenalty}
           </div>
-          <div>
+          <div data-testid="overstaked-penalty-tooltip">
             {t('overstakedPenalty')}: {data.overstakingPenalty}
           </div>
-          <div>
+          <div data-testid="total-penalty-tooltip">
             {t('totalPenalties')}:{' '}
             <span className="font-bold">{data.totalPenalties}</span>
           </div>

apps/trading-e2e/src/integration/capsule.cy.ts

@@ -32,11 +32,14 @@ const usdcSymbol = 'fUSDC';
 const toastContent = 'toast-content';
 const ordersTab = 'Orders';
 const depositsTab = 'Deposits';
+const collateralTab = 'Collateral';
 const toastCloseBtn = 'toast-close';
 const price = '390';
 const size = '0.0005';
 const newPrice = '200';
 const completeWithdrawalBtn = 'complete-withdrawal';
+const submitTransferBtn = '[type="submit"]';
+const transferForm = 'transfer-form';
 
 // Because the tests are run on a live network to optimize time, the tests are interdependent and must be run in the given order.
 describe('capsule - without MultiSign', { tags: '@slow' }, () => {
@@ -105,12 +108,39 @@ describe('capsule - without MultiSign', { tags: '@slow' }, () => {
       });
   });
 
+  it('can key to key transfers', function () {
+    cy.visit('/#/portfolio');
+    cy.get('main[data-testid="/portfolio"]').should('exist');
+
+    cy.getByTestId(collateralTab).click();
+    cy.getByTestId('open-transfer-dialog').click();
+    cy.getByTestId('transfer-form').should('be.visible');
+    cy.getByTestId('transfer-form').find('[name="toAddress"]').select(1);
+    cy.get('select option')
+      .contains('BTC')
+      .invoke('index')
+      .then((index) => {
+        cy.get(assetSelectField).select(index, { force: true });
+      });
+    cy.getByTestId(transferForm)
+      .find(amountField)
+      .focus()
+      .type('1', { delay: 100 });
+    cy.getByTestId(transferForm).find(submitTransferBtn).click();
+    cy.getByTestId(toastContent).should(
+      'contain.text',
+      'Transfer completeYour transaction has been confirmed TransferTo 7f9cf0…c255351.00 tBTC'
+    );
+    cy.getByTestId(toastCloseBtn).click();
+  });
+
   it('can not withdrawal because of no MultiSign', function () {
     // 1002-WITH-022
     // 1002-WITH-023
 
     cy.getByTestId('Withdrawals').click();
     cy.getByTestId('withdraw-dialog-button').click();
+    connectEthereumWallet('Unknown');
     cy.get(assetSelectField, txTimeout).select(btcName, { force: true });
     cy.get(amountField).clear().type('1');
     cy.getByTestId('submit-withdrawal').click();
@@ -118,7 +148,7 @@ describe('capsule - without MultiSign', { tags: '@slow' }, () => {
       'contain.text',
       'Funds unlocked'
     );
-
+    cy.getByTestId(toastCloseBtn).click();
     cy.getByTestId('tab-withdrawals').within(() => {
       cy.get('.ag-center-cols-container')
         .children()
@@ -135,6 +165,7 @@ describe('capsule - without MultiSign', { tags: '@slow' }, () => {
       'contain.text',
       'Error occurredprocessing response error'
     );
+    cy.getByTestId(toastCloseBtn).click({ multiple: true });
     cy.getByTestId(completeWithdrawalBtn).should(
       'contain.text',
       'Complete withdrawal'
@@ -227,8 +258,8 @@ describe('capsule', { tags: '@slow' }, () => {
         });
     });
   });
-
-  it('can edit order', function () {
+  // comment because of bug #2695
+  it.skip('can edit order', function () {
     cy.getByTestId(ordersTab).click();
     cy.getByTestId('edit').first().should('be.visible').click();
     cy.getByTestId('dialog-title').should('contain.text', 'Edit order');
@@ -253,8 +284,8 @@ describe('capsule', { tags: '@slow' }, () => {
         checkIfDataAndTimeOfCreationAndUpdateIsEqual(orderUpdatedAt);
       });
   });
-
-  it('can cancel order', function () {
+  // comment because of bug #2695
+  it.skip('can cancel order', function () {
     cy.getByTestId(ordersTab).click();
     cy.getByTestId('cancel').first().click();
     cy.getByTestId(toastContent).should(
@@ -301,7 +332,6 @@ describe('capsule', { tags: '@slow' }, () => {
       'contain.text',
       'Funds unlocked'
     );
-
     cy.getByTestId('tab-withdrawals').within(() => {
       cy.get('.ag-center-cols-container')
         .children()
@@ -318,8 +348,19 @@ describe('capsule', { tags: '@slow' }, () => {
       'contain.text',
       'Transaction confirmed'
     );
+    cy.getByTestId(toastCloseBtn).click({ multiple: true });
 
-    cy.getByTestId(completeWithdrawalBtn).eq(0, txTimeout).should('not.exist');
+    cy.wrap(null).then(() => {
+      try {
+        cy.getByTestId(completeWithdrawalBtn)
+          .eq(0, txTimeout)
+          .should('not.exist');
+      } catch (error) {
+        console.log(
+          'Assertion failed, but we are continuing because this is our wait to complete transaction'
+        );
+      }
+    });
 
     cy.get('[col-id="txHash"]', txTimeout)
       .should('have.length.above', 1)

apps/trading-e2e/src/integration/home.cy.ts

@@ -59,11 +59,9 @@ describe('home', { tags: '@regression' }, () => {
   describe('default market found', () => {
     it('redirects to a default market with the landing dialog open', () => {
       cy.visit('/');
-      cy.wait('@Market');
+      cy.wait('@Markets');
 
-      cy.get('main', { timeout: 20000 }).then((el) => {
-        expect(el.attr('data-testid')?.startsWith('/market')).to.equal(true);
-      }); // Wait for page to be rendered to before checking url
+      cy.get('main[data-testid^="/markets/"]');
 
       // Overlay should be shown
       cy.getByTestId(selectMarketOverlay).should('exist');
@@ -101,7 +99,7 @@ describe('home', { tags: '@regression' }, () => {
       // the choose market overlay is no longer showing
       cy.contains('Select a market to get started').should('not.exist');
       cy.contains('Loading...').should('not.exist');
-      cy.url().should('eq', Cypress.config().baseUrl + '/#/markets/market-0');
+      cy.url().should('eq', Cypress.config().baseUrl + '/#/markets/market-1');
     });
   });
 
@@ -125,7 +123,7 @@ describe('home', { tags: '@regression' }, () => {
         aliasGQLQuery(req, 'MarketsData', data);
       });
       cy.visit('/');
-      cy.wait('@Market');
+      cy.wait('@Markets');
       cy.getByTestId(selectMarketOverlay)
         .get('table')
         .invoke('outerWidth')
@@ -233,7 +231,7 @@ describe('home', { tags: '@regression' }, () => {
       cy.window().then((window) => {
         window.localStorage.setItem('marketId', 'market-1');
         cy.visit('/');
-        cy.wait('@Market');
+        cy.wait('@Markets');
         cy.location('hash').should('equal', '#/markets/market-1');
         cy.getByTestId('dialog-content').should('not.exist');
       });
@@ -246,7 +244,7 @@ describe('home', { tags: '@regression' }, () => {
           aliasGQLQuery(req, 'Market', null);
         });
         cy.visit('/');
-        cy.wait('@Market');
+        cy.wait('@Markets');
         cy.location('hash').should('equal', '#/markets/market-not-existing');
         cy.getByTestId('dialog-content').should('not.exist');
       });

apps/trading-e2e/src/integration/market-info.cy.ts

@@ -11,7 +11,7 @@ describe('market info is displayed', { tags: '@smoke' }, () => {
     cy.mockTradingPage();
     cy.mockSubscription();
     cy.visit('/#/markets/market-0');
-    cy.wait('@Market');
+    cy.wait('@Markets');
     cy.getByTestId(marketInfoBtn).click();
     cy.wait('@MarketInfo');
   });

apps/trading-e2e/src/integration/market-summary.cy.ts

@@ -237,7 +237,6 @@ describe('market states not accepting orders', { tags: '@smoke' }, function () {
         cy.mockSubscription();
         cy.setVegaWallet();
         cy.visit('/#/markets/market-0');
-        cy.wait('@Market');
       });
       it('must display that market is not accepting orders', function () {
         cy.getByTestId('place-order').click();

apps/trading-e2e/src/integration/markets.cy.ts

@@ -1,6 +1,6 @@
 import * as Schema from '@vegaprotocol/types';
 import { aliasGQLQuery } from '@vegaprotocol/cypress';
-import { marketQuery } from '@vegaprotocol/mock';
+import { marketsQuery } from '@vegaprotocol/mock';
 import { getDateTimeFormat } from '@vegaprotocol/react-helpers';
 
 describe('markets table', { tags: '@smoke' }, () => {
@@ -13,7 +13,6 @@ describe('markets table', { tags: '@smoke' }, () => {
       );
       cy.mockSubscription();
       cy.visit('/');
-      cy.wait('@Market');
       cy.wait('@Markets');
       cy.wait('@MarketsData');
       cy.wait('@MarketsCandles');
@@ -123,17 +122,24 @@ describe('markets table', { tags: '@smoke' }, () => {
     );
     cy.mockGQL((req) => {
       const override = {
-        market: {
-          tradableInstrument: {
-            instrument: {
-              name: `opening auction MARKET`,
+        marketsConnection: {
+          edges: [
+            {
+              node: {
+                tradableInstrument: {
+                  instrument: {
+                    name: `opening auction MARKET`,
+                  },
+                },
+                state: Schema.MarketState.STATE_ACTIVE,
+                tradingMode:
+                  Schema.MarketTradingMode.TRADING_MODE_OPENING_AUCTION,
+              },
             },
-          },
-          state: Schema.MarketState.STATE_ACTIVE,
-          tradingMode: Schema.MarketTradingMode.TRADING_MODE_OPENING_AUCTION,
+          ],
         },
       };
-      const market = marketQuery(override);
+      const market = marketsQuery(override);
       aliasGQLQuery(req, 'Market', market);
       aliasGQLQuery(req, 'ProposalOfMarket', {
         proposal: { terms: { enactmentDatetime: '2023-01-31 12:00:01' } },

apps/trading-e2e/src/integration/navbar.cy.ts

@@ -4,14 +4,15 @@ before(() => {
   cy.mockTradingPage();
   cy.mockSubscription();
   cy.visit('/');
-  cy.wait('@Market');
+  cy.wait('@Markets');
+  cy.wait('@MarketsData');
   cy.getByTestId('dialog-close').click();
 });
 
 describe('Desktop view', { tags: '@smoke' }, () => {
   describe('Navbar', () => {
     const links = ['Markets', 'Trading', 'Portfolio'];
-    const hashes = ['#/markets/all', '#/markets/market-0', '#/portfolio'];
+    const hashes = ['#/markets/all', '#/markets/market-1', '#/portfolio'];
 
     links.forEach((link, index) => {
       it(`${link} should be correctly rendered`, () => {
@@ -67,7 +68,7 @@ describe('Mobile view', { tags: '@smoke' }, () => {
       cy.getByTestId('button-menu-drawer').click();
       cy.getByTestId('menu-drawer').within((el) => {
         cy.wrap(el).getByTestId('Trading').click();
-        cy.location('hash').should('equal', '#/markets/market-0');
+        cy.location('hash').should('equal', '#/markets/market-1');
       });
     });
     it('Portfolio should be correctly rendered', () => {

apps/trading-e2e/src/integration/trading-deal-ticket.cy.ts

@@ -35,7 +35,7 @@ describe('time in force default values', () => {
     cy.mockTradingPage();
     cy.mockSubscription();
     cy.visit('/#/markets/market-0');
-    cy.wait('@Market');
+    cy.wait('@Markets');
   });
 
   it('must have market order set up to IOC by default', function () {
@@ -64,7 +64,7 @@ describe('must submit order', { tags: '@smoke' }, () => {
     cy.mockTradingPage();
     cy.mockSubscription();
     cy.visit('/#/markets/market-0');
-    cy.wait('@Market');
+    cy.wait('@Markets');
   });
 
   beforeEach(() => {
@@ -162,7 +162,7 @@ describe(
       );
       cy.mockSubscription();
       cy.visit('/#/markets/market-0');
-      cy.wait('@Market');
+      cy.wait('@Markets');
     });
 
     beforeEach(() => {
@@ -231,7 +231,7 @@ describe(
       );
       cy.mockSubscription();
       cy.visit('/#/markets/market-0');
-      cy.wait('@Market');
+      cy.wait('@Markets');
     });
 
     beforeEach(() => {
@@ -300,7 +300,7 @@ describe(
       );
       cy.mockSubscription();
       cy.visit('/#/markets/market-0');
-      cy.wait('@Market');
+      cy.wait('@Markets');
     });
 
     beforeEach(() => {
@@ -360,7 +360,7 @@ describe('deal ticket validation', { tags: '@smoke' }, () => {
   beforeEach(() => {
     cy.mockTradingPage();
     cy.visit('/#/markets/market-0');
-    cy.wait('@Market');
+    cy.wait('@Markets');
   });
 
   it('must not place an order if wallet is not connected', () => {
@@ -405,7 +405,7 @@ describe('deal ticket size validation', { tags: '@smoke' }, function () {
     cy.setVegaWallet();
     cy.mockTradingPage();
     cy.visit('/#/markets/market-0');
-    cy.wait('@Market');
+    cy.wait('@Markets');
   });
 
   it('must warn if order size input has too many digits after the decimal place', function () {
@@ -440,7 +440,7 @@ describe('limit order validations', { tags: '@smoke' }, () => {
     cy.mockTradingPage();
     cy.mockSubscription();
     cy.visit('/#/markets/market-0');
-    cy.wait('@Market');
+    cy.wait('@Markets');
     cy.getByTestId(toggleLimit).click();
   });
 
@@ -452,7 +452,7 @@ describe('limit order validations', { tags: '@smoke' }, () => {
     //7002-SORD-018
     cy.getByTestId(orderPriceField)
       .siblings('label')
-      .should('have.text', 'Price (BTC)');
+      .should('have.text', 'Price (DAI)');
   });
 
   it('must see warning when placing an order with expiry date in past', () => {
@@ -532,7 +532,7 @@ describe('market order validations', { tags: '@smoke' }, () => {
     cy.setVegaWallet();
     cy.mockTradingPage();
     cy.visit('/#/markets/market-0');
-    cy.wait('@Market');
+    cy.wait('@Markets');
     cy.getByTestId(toggleMarket).click();
   });
 
@@ -586,7 +586,7 @@ describe('suspended market validation', { tags: '@regression' }, () => {
     );
     cy.mockSubscription();
     cy.visit('/#/markets/market-0');
-    cy.wait('@Market');
+    cy.wait('@Markets');
   });
 
   beforeEach(() => {
@@ -648,7 +648,7 @@ describe('account validation', { tags: '@regression' }, () => {
                       market: null,
                       asset: {
                         __typename: 'Asset',
-                        id: '5cfa87844724df6069b94e4c8a6f03af21907d7bc251593d08e4251043ee9f7c',
+                        id: 'asset-0',
                       },
                     },
                   },
@@ -660,7 +660,7 @@ describe('account validation', { tags: '@regression' }, () => {
       });
       cy.mockSubscription();
       cy.visit('/#/markets/market-0');
-      cy.wait('@Market');
+      cy.wait('@Markets');
     });
 
     it('should show an error if your balance is zero', () => {
@@ -670,7 +670,7 @@ describe('account validation', { tags: '@regression' }, () => {
       //7002-SORD-003
       cy.getByTestId('dealticket-error-message-zero-balance').should(
         'have.text',
-        'Insufficient balance. Deposit ' + 'tBTC'
+        'Insufficient balance. Deposit ' + 'tDAI'
       );
       cy.getByTestId('deal-ticket-deposit-dialog-button').should('exist');
     });
@@ -696,7 +696,7 @@ describe('account validation', { tags: '@regression' }, () => {
       });
       cy.mockSubscription();
       cy.visit('/#/markets/market-0');
-      cy.wait('@Market');
+      cy.wait('@Markets');
     });
 
     it('should display info and button for deposit', () => {
@@ -708,7 +708,7 @@ describe('account validation', { tags: '@regression' }, () => {
       );
       cy.getByTestId('dealticket-warning-margin').should(
         'contain.text',
-        '9,999.99 tBTC currently required, 1,000.00 tBTC available'
+        '9,999.99 tDAI currently required, 1,000.00 tDAI available'
       );
       cy.getByTestId('deal-ticket-deposit-dialog-button').click();
       cy.getByTestId('dialog-content')

apps/trading-e2e/src/integration/trading-positions.cy.ts

@@ -1,3 +1,6 @@
+import { aliasGQLQuery } from '@vegaprotocol/cypress';
+import { marketsDataQuery } from '@vegaprotocol/mock';
+
 beforeEach(() => {
   cy.mockTradingPage();
   cy.mockSubscription();
@@ -17,6 +20,47 @@ describe('positions', { tags: '@smoke' }, () => {
     validatePositionsDisplayed();
   });
 
+  it('renders position among some graphql errors', () => {
+    const errors = [
+      {
+        message: 'no market data for market: market-2',
+        path: ['market', 'data'],
+        extensions: {
+          code: 13,
+          type: 'Internal',
+        },
+      },
+    ];
+    const marketData = marketsDataQuery();
+    const edges = marketData.marketsConnection?.edges.map((market) => {
+      const replace =
+        market.node.data?.market.id === 'market-2' ? null : market.node.data;
+      return { ...market, node: { ...market.node, data: replace } };
+    });
+    const overrides = {
+      ...marketData,
+      marketsConnection: { ...marketData.marketsConnection, edges },
+    };
+    cy.mockGQL((req) => {
+      aliasGQLQuery(req, 'MarketsData', overrides, errors);
+    });
+    cy.visit('/#/markets/market-0');
+    const emptyCells = [
+      'notional',
+      'markPrice',
+      'liquidationPrice',
+      'currentLeverage',
+      'averageEntryPrice',
+    ];
+    cy.getByTestId('tab-positions').within(() => {
+      cy.get('[row-id="market-2"]').within(() => {
+        emptyCells.forEach((cell) => {
+          cy.get(`[col-id="${cell}"]`).should('contain.text', '-');
+        });
+      });
+    });
+  });
+
   function validatePositionsDisplayed() {
     cy.getByTestId('tab-positions').should('be.visible');
     cy.getByTestId('tab-positions').within(() => {

apps/trading-e2e/src/integration/withdraw-key-to-key.cy.ts

@@ -0,0 +1,132 @@
+import { selectAsset } from '../support/helpers';
+
+const formFieldError = 'input-error-text';
+const toAddressField = '[name="toAddress"]';
+const amountField = 'input[name="amount"]';
+const submitTransferBtn = '[type="submit"]';
+const transferForm = 'transfer-form';
+const errorText = 'input-error-text';
+const openTransferDialog = 'open-transfer-dialog';
+const closeDialog = 'dialog-close';
+const dialogTransferText = 'dialog-transfer-text';
+
+const ASSET_SEPOLIA_TBTC = 2;
+const ASSET_EURO = 1;
+
+const toastContent = 'toast-content';
+const collateralTab = 'Collateral';
+const toastCloseBtn = 'toast-close';
+
+describe(
+  'transfer form validation and transfer from options',
+  { tags: '@smoke' },
+  () => {
+    before(() => {
+      cy.mockWeb3Provider();
+      cy.mockTradingPage();
+      cy.mockSubscription();
+      cy.setVegaWallet();
+
+      cy.visit('/#/portfolio');
+      cy.getByTestId(collateralTab).click();
+      cy.getByTestId(openTransferDialog).click();
+
+      cy.wait('@Accounts');
+      cy.wait('@Assets');
+    });
+
+    it('empty fields', () => {
+      cy.getByTestId(transferForm).find(submitTransferBtn).click();
+
+      cy.getByTestId(formFieldError).should('contain.text', 'Required');
+      // only 2 despite 3 fields because the ethereum address will be auto populated
+      cy.getByTestId(formFieldError).should('have.length', 3);
+    });
+    it('min amount', () => {
+      // 1002-WITH-010
+      selectAsset(ASSET_SEPOLIA_TBTC);
+      cy.get(amountField).clear().type('0');
+      cy.getByTestId(transferForm).find(submitTransferBtn).click();
+      cy.getByTestId(errorText).should(
+        'contain.text',
+        'Value is below minimum'
+      );
+    });
+    it('max amount', () => {
+      selectAsset(ASSET_EURO); // Will be above maximum because the vega wallet doesn't have any collateral
+      cy.get(amountField).clear().type('1001', { delay: 100 });
+      cy.getByTestId(transferForm).find(submitTransferBtn).click();
+      cy.getByTestId(errorText).should(
+        'contain.text',
+        'You cannot transfer more than your available collateral'
+      );
+    });
+
+    it('can start transfer from vega wallet', () => {
+      cy.getByTestId(closeDialog).click();
+      cy.getByTestId('manage-vega-wallet').click();
+      cy.getByTestId('wallet-transfer').should('have.text', 'Transfer').click();
+      cy.getByTestId(dialogTransferText).should(
+        'contain.text',
+        'Transfer funds to another Vega key from 02ecea…342f65 If you are at all unsure, stop and seek advice.'
+      );
+    });
+
+    it('can start transfer from trading collateral table', () => {
+      cy.getByTestId(closeDialog).click();
+      cy.getByTestId('Trading').first().click();
+      cy.getByTestId(collateralTab).click();
+      cy.getByTestId(openTransferDialog).click();
+      cy.getByTestId(dialogTransferText).should(
+        'contain.text',
+        'Transfer funds to another Vega key from 02ecea…342f65 If you are at all unsure, stop and seek advice.'
+      );
+    });
+  }
+);
+
+describe('withdraw actions', { tags: '@regression' }, () => {
+  beforeEach(() => {
+    cy.mockWeb3Provider();
+    cy.mockTradingPage();
+    cy.mockSubscription();
+    cy.setVegaWallet();
+
+    cy.visit('/#/portfolio');
+    cy.getByTestId(collateralTab).click();
+    cy.getByTestId(openTransferDialog).click();
+
+    cy.wait('@Accounts');
+    cy.wait('@Assets');
+    cy.mockVegaWalletTransaction();
+  });
+
+  it('key to key transfers by select key', function () {
+    cy.getByTestId(transferForm).should('be.visible');
+    cy.getByTestId(transferForm).find(toAddressField).select(1);
+    selectAsset(ASSET_SEPOLIA_TBTC);
+    cy.getByTestId(transferForm).find(amountField).type('1', { delay: 100 });
+    cy.getByTestId(transferForm).find(submitTransferBtn).click();
+    cy.getByTestId(toastContent).should(
+      'contain.text',
+      'Awaiting confirmation'
+    );
+    cy.getByTestId(toastCloseBtn).click();
+  });
+
+  it('key to key transfers by enter manual key', function () {
+    cy.getByTestId(transferForm).should('be.visible');
+    cy.contains('Enter manually').click();
+    cy.getByTestId(transferForm)
+      .find(toAddressField)
+      .type('7f9cf07d3a9905b1a61a1069f7a758855da428bc0f4a97de87f48644bfc25535');
+    selectAsset(ASSET_SEPOLIA_TBTC);
+    cy.getByTestId(transferForm).find(amountField).type('1', { delay: 100 });
+    cy.getByTestId(transferForm).find(submitTransferBtn).click();
+    cy.getByTestId(toastContent).should(
+      'contain.text',
+      'Awaiting confirmation'
+    );
+    cy.getByTestId(toastCloseBtn).click();
+  });
+});

apps/trading-e2e/src/support/trading.ts

@@ -15,7 +15,6 @@ import {
   marketDataQuery,
   marketDepthQuery,
   marketInfoQuery,
-  marketQuery,
   marketsCandlesQuery,
   marketsDataQuery,
   marketsQuery,
@@ -28,7 +27,7 @@ import {
   withdrawalsQuery,
 } from '@vegaprotocol/mock';
 import type { PartialDeep } from 'type-fest';
-import type { MarketDataQuery, MarketQuery } from '@vegaprotocol/market-list';
+import type { MarketDataQuery, MarketsQuery } from '@vegaprotocol/market-list';
 import type { MarketInfoQuery } from '@vegaprotocol/market-info';
 
 type MarketPageMockData = {
@@ -55,17 +54,18 @@ const marketDataOverride = (
   },
 });
 
-const marketQueryOverride = (
+const marketsDataOverride = (
   data: MarketPageMockData
-): PartialDeep<MarketQuery> => ({
-  market: {
-    tradableInstrument: {
-      instrument: {
-        name: `${data.state?.toUpperCase()} MARKET`,
+): PartialDeep<MarketsQuery> => ({
+  marketsConnection: {
+    edges: [
+      {
+        node: {
+          tradingMode: data.tradingMode,
+          state: data.state,
+        },
       },
-    },
-    state: data.state,
-    tradingMode: data.tradingMode,
+    ],
   },
 });
 
@@ -91,10 +91,9 @@ const mockTradingPage = (
   aliasGQLQuery(req, 'Statistics', statisticsQuery());
   aliasGQLQuery(
     req,
-    'Market',
-    marketQuery(marketQueryOverride({ state, tradingMode, trigger }))
+    'Markets',
+    marketsQuery(marketsDataOverride({ state, tradingMode, trigger }))
   );
-  aliasGQLQuery(req, 'Markets', marketsQuery());
   aliasGQLQuery(
     req,
     'MarketData',

apps/trading/client-pages/liquidity/liquidity.tsx

@@ -59,7 +59,7 @@ export const LiquidityContainer = ({
   marketId: string | undefined;
 }) => {
   const gridRef = useRef<AgGridReact | null>(null);
-  const market = useMarket(marketId);
+  const { data: market } = useMarket(marketId);
   const dataRef = useRef<LiquidityProvisionData[] | null>(null);
 
   // To be removed when liquidityProvision subscriptions are working
@@ -129,8 +129,8 @@ export const LiquidityViewContainer = ({
 }) => {
   const { pubKey } = useVegaWallet();
   const gridRef = useRef<AgGridReact | null>(null);
-  const market = useMarket(marketId);
-  const marketData = useStaticMarketData(marketId);
+  const { data: market } = useMarket(marketId);
+  const { data: marketData } = useStaticMarketData(marketId);
 
   const dataRef = useRef<LiquidityProvisionData[] | null>(null);
 

apps/trading/client-pages/market/market.tsx

@@ -9,9 +9,7 @@ import {
 } from '@vegaprotocol/react-helpers';
 import { AsyncRenderer, ExternalLink, Splash } from '@vegaprotocol/ui-toolkit';
 import type {
-  SingleMarketFieldsFragment,
   MarketData,
-  Candle,
   MarketDataUpdateFieldsFragment,
 } from '@vegaprotocol/market-list';
 
@@ -27,11 +25,6 @@ const calculatePrice = (markPrice?: string, decimalPlaces?: number) => {
     : '-';
 };
 
-export interface SingleMarketData extends SingleMarketFieldsFragment {
-  candles: Candle[];
-  data: MarketData;
-}
-
 const TitleUpdater = ({
   marketId,
   marketName,
@@ -89,12 +82,9 @@ export const MarketPage = () => {
     [marketId, navigate]
   );
 
-  const { data, error, loading } = useDataProvider<
-    SingleMarketFieldsFragment,
-    never
-  >({
+  const { data, error, loading } = useDataProvider({
     dataProvider: marketProvider,
-    variables: useMemo(() => ({ marketId: marketId || '' }), [marketId]),
+    variables: { marketId: marketId || '' },
     skip: !marketId,
   });
 
@@ -115,7 +105,7 @@ export const MarketPage = () => {
       <Splash>
         <span className="flex flex-col items-center gap-2">
           <p className="text-sm justify-center">
-            {t('This market URL is not available anymore.')}
+            {t('This market URL is not available any more.')}
           </p>
           <p className="text-sm justify-center">
             {t(`Please choose another market from the`)}{' '}
@@ -129,7 +119,7 @@ export const MarketPage = () => {
   }
 
   return (
-    <AsyncRenderer<SingleMarketFieldsFragment>
+    <AsyncRenderer
       loading={loading}
       error={error}
       data={data || undefined}

apps/trading/client-pages/market/trade-grid.tsx

@@ -21,7 +21,7 @@ import {
 } from '@vegaprotocol/ui-toolkit';
 import { t } from '@vegaprotocol/react-helpers';
 import { AccountsContainer } from '../../components/accounts-container';
-import type { SingleMarketFieldsFragment } from '@vegaprotocol/market-list';
+import type { Market } from '@vegaprotocol/market-list';
 import { VegaWalletContainer } from '../../components/vega-wallet-container';
 import { TradeMarketHeader } from './trade-market-header';
 import { NO_MARKET } from './constants';
@@ -63,7 +63,7 @@ const TradingViews = {
 type TradingView = keyof typeof TradingViews;
 
 interface TradeGridProps {
-  market: SingleMarketFieldsFragment | null;
+  market: Market | null;
   onSelect: (marketId: string) => void;
 }
 
@@ -207,7 +207,7 @@ const TradeGridChild = ({ children }: TradeGridChildProps) => {
 };
 
 interface TradePanelsProps {
-  market: SingleMarketFieldsFragment | null;
+  market: Market | null;
   onSelect: (marketId: string) => void;
   onMarketClick?: (marketId: string) => void;
 }

apps/trading/client-pages/market/trade-market-header.tsx

@@ -2,12 +2,12 @@ import { useAssetDetailsDialogStore } from '@vegaprotocol/assets';
 import { useEnvironment } from '@vegaprotocol/environment';
 import { ButtonLink, Link } from '@vegaprotocol/ui-toolkit';
 import { MarketProposalNotification } from '@vegaprotocol/governance';
+import type { Market } from '@vegaprotocol/market-list';
 import {
   getExpiryDate,
   getMarketExpiryDate,
   t,
 } from '@vegaprotocol/react-helpers';
-import type { SingleMarketFieldsFragment } from '@vegaprotocol/market-list';
 import {
   ColumnKind,
   SelectMarketPopover,
@@ -24,7 +24,7 @@ import { MarketLiquiditySupplied } from '../../components/liquidity-supplied';
 import { MarketState as State } from '@vegaprotocol/types';
 
 interface TradeMarketHeaderProps {
-  market: SingleMarketFieldsFragment | null;
+  market: Market | null;
   onSelect: (marketId: string) => void;
 }
 
@@ -124,7 +124,7 @@ export const TradeMarketHeader = ({
 };
 
 type ExpiryLabelProps = {
-  market: SingleMarketFieldsFragment | null;
+  market: Market | null;
 };
 
 const ExpiryLabel = ({ market }: ExpiryLabelProps) => {
@@ -140,7 +140,7 @@ const ExpiryLabel = ({ market }: ExpiryLabelProps) => {
 };
 
 type ExpiryTooltipContentProps = {
-  market: SingleMarketFieldsFragment;
+  market: Market;
   explorerUrl?: string;
 };
 

apps/trading/components/accounts-container/accounts-container.tsx

@@ -43,7 +43,11 @@ export const AccountsContainer = () => {
       </div>
       {!isReadOnly && (
         <div className="flex gap-2 justify-end p-2 px-[11px]">
-          <Button size="sm" onClick={() => openTransferDialog()}>
+          <Button
+            size="sm"
+            data-testid="open-transfer-dialog"
+            onClick={() => openTransferDialog()}
+          >
             {t('Transfer')}
           </Button>
           <Button size="sm" onClick={() => openDepositDialog()}>

apps/trading/components/liquidity-supplied/liquidity-supplied.tsx

@@ -10,7 +10,6 @@ import {
 import type {
   MarketData,
   MarketDataUpdateFieldsFragment,
-  SingleMarketFieldsFragment,
 } from '@vegaprotocol/market-list';
 import { marketDataProvider, marketProvider } from '@vegaprotocol/market-list';
 import { HeaderStat } from '../header';
@@ -44,12 +43,12 @@ export const MarketLiquiditySupplied = ({
 
   const variables = useMemo(
     () => ({
-      marketId: marketId,
+      marketId: marketId || '',
     }),
     [marketId]
   );
 
-  const { data } = useDataProvider<SingleMarketFieldsFragment, never>({
+  const { data } = useDataProvider({
     dataProvider: marketProvider,
     variables,
     skip: !marketId,

apps/trading/components/market-state/market-state.tsx

@@ -2,7 +2,7 @@ import throttle from 'lodash/throttle';
 import type {
   MarketData,
   MarketDataUpdateFieldsFragment,
-  SingleMarketFieldsFragment,
+  Market,
 } from '@vegaprotocol/market-list';
 import { marketDataProvider } from '@vegaprotocol/market-list';
 import { t, useDataProvider } from '@vegaprotocol/react-helpers';
@@ -11,11 +11,7 @@ import { HeaderStat } from '../header';
 import { useCallback, useMemo, useRef, useState } from 'react';
 import * as constants from '../constants';
 
-export const MarketState = ({
-  market,
-}: {
-  market: SingleMarketFieldsFragment | null;
-}) => {
+export const MarketState = ({ market }: { market: Market | null }) => {
   const [marketState, setMarketState] = useState<Schema.MarketState | null>(
     null
   );

apps/trading/components/market-trading-mode/market-trading-mode.tsx

@@ -1,37 +1,24 @@
 import type { RefObject } from 'react';
-import { useMemo } from 'react';
-import { t, useDataProvider } from '@vegaprotocol/react-helpers';
+import { t } from '@vegaprotocol/react-helpers';
 import { TradingModeTooltip } from '@vegaprotocol/deal-ticket';
 import { useInView } from 'react-intersection-observer';
 import * as Schema from '@vegaprotocol/types';
 import { HeaderStat } from '../header';
 import { Tooltip } from '@vegaprotocol/ui-toolkit';
-import { marketDataProvider } from '@vegaprotocol/market-list';
-
-// This will cause often re-rendering
-// Here it may not be a problem because the component is not very complex
-// In general, we should avoid using this marketData hook without any throttling
-const useMarketData = (marketId?: string, skip?: boolean) => {
-  const variables = useMemo(() => ({ marketId }), [marketId]);
-  const { data } = useDataProvider({
-    dataProvider: marketDataProvider,
-    variables,
-    skip: skip || !marketId,
-  });
-  return data;
-};
+import { useStaticMarketData } from '@vegaprotocol/market-list';
 
 const getTradingModeLabel = (
-  tradingMode?: Schema.MarketTradingMode,
+  marketTradingMode?: Schema.MarketTradingMode,
   trigger?: Schema.AuctionTrigger
 ) => {
   return (
-    (tradingMode === Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
+    (marketTradingMode ===
+      Schema.MarketTradingMode.TRADING_MODE_MONITORING_AUCTION &&
     trigger &&
     trigger !== Schema.AuctionTrigger.AUCTION_TRIGGER_UNSPECIFIED
-      ? `${Schema.MarketTradingModeMapping[tradingMode]} - ${Schema.AuctionTriggerMapping[trigger]}`
+      ? `${Schema.MarketTradingModeMapping[marketTradingMode]} - ${Schema.AuctionTriggerMapping[trigger]}`
       : Schema.MarketTradingModeMapping[
-          tradingMode as Schema.MarketTradingMode
+          marketTradingMode as Schema.MarketTradingMode
         ]) || '-'
   );
 };
@@ -49,8 +36,8 @@ export const HeaderStatMarketTradingMode = ({
   initialTradingMode,
   initialTrigger,
 }: HeaderStatMarketTradingModeProps) => {
-  const data = useMarketData(marketId);
-  const tradingMode = data?.marketTradingMode ?? initialTradingMode;
+  const { data } = useStaticMarketData(marketId);
+  const marketTradingMode = data?.marketTradingMode ?? initialTradingMode;
   const trigger = data?.trigger ?? initialTrigger;
 
   return (
@@ -61,7 +48,7 @@ export const HeaderStatMarketTradingMode = ({
       }
       testId="market-trading-mode"
     >
-      <div>{getTradingModeLabel(tradingMode, trigger)}</div>
+      <div>{getTradingModeLabel(marketTradingMode, trigger)}</div>
     </HeaderStat>
   );
 };
@@ -75,7 +62,7 @@ export const MarketTradingMode = ({
   inViewRoot?: RefObject<Element>;
 }) => {
   const [ref, inView] = useInView({ root: inViewRoot?.current });
-  const data = useMarketData(marketId, !inView);
+  const { data } = useStaticMarketData(marketId, !inView);
 
   return (
     <Tooltip

apps/trading/components/market-volume/market-volume.tsx

@@ -8,7 +8,6 @@ import {
 import type {
   MarketData,
   MarketDataUpdateFieldsFragment,
-  SingleMarketFieldsFragment,
 } from '@vegaprotocol/market-list';
 import { marketDataProvider, marketProvider } from '@vegaprotocol/market-list';
 import { HeaderStat } from '../header';
@@ -22,7 +21,7 @@ export const MarketVolume = ({ marketId }: { marketId: string }) => {
     }),
     [marketId]
   );
-  const { data } = useDataProvider<SingleMarketFieldsFragment, never>({
+  const { data } = useDataProvider({
     dataProvider: marketProvider,
     variables,
     skip: !marketId,

apps/trading/components/select-market/select-market-columns.tsx

@@ -14,10 +14,7 @@ import {
 import { Link as UILink, Sparkline, Tooltip } from '@vegaprotocol/ui-toolkit';
 import isNil from 'lodash/isNil';
 import type { CandleClose } from '@vegaprotocol/types';
-import type {
-  MarketWithData,
-  MarketWithCandles,
-} from '@vegaprotocol/market-list';
+import type { MarketMaybeWithDataAndCandles } from '@vegaprotocol/market-list';
 import { Link } from 'react-router-dom';
 import { MarketMarkPrice } from '../market-mark-price';
 import { Last24hPriceChange } from '../last-24h-price-change';
@@ -25,8 +22,6 @@ import { MarketTradingMode } from '../market-trading-mode';
 import { Last24hVolume } from '../last-24h-volume';
 import { Links, Routes } from '../../pages/client-router';
 
-type Market = MarketWithData & MarketWithCandles;
-
 const ellipsisClasses = 'whitespace-nowrap overflow-hidden text-ellipsis';
 export const cellClassNames = `py-1 first:text-left text-right ${ellipsisClasses}`;
 
@@ -171,7 +166,7 @@ export type OnCellClickHandler = (
 ) => void;
 
 export const columns = (
-  market: Market,
+  market: MarketMaybeWithDataAndCandles,
   onSelect: (id: string) => void,
   onCellClick: OnCellClickHandler,
   inViewRoot?: RefObject<HTMLElement>
@@ -359,7 +354,7 @@ export const columns = (
 };
 
 export const columnsPositionMarkets = (
-  market: Market,
+  market: MarketMaybeWithDataAndCandles,
   onSelect: (id: string) => void,
   inViewRoot?: RefObject<HTMLElement>,
   openVolume?: string,

apps/trading/components/select-market/select-market.spec.tsx

@@ -4,13 +4,13 @@ import * as Schema from '@vegaprotocol/types';
 import { SelectAllMarketsTableBody } from './select-market';
 
 import type {
-  MarketWithCandles,
-  MarketWithData,
+  MarketMaybeWithCandles,
+  MarketMaybeWithData,
   MarketData,
 } from '@vegaprotocol/market-list';
 import { MemoryRouter } from 'react-router-dom';
 import { MockedProvider } from '@apollo/client/testing';
-type Market = MarketWithCandles & MarketWithData;
+type Market = MarketMaybeWithCandles & MarketMaybeWithData;
 
 type PartialMarket = Partial<
   Omit<Market, 'data'> & { data: Partial<MarketData> }
@@ -34,9 +34,13 @@ const MARKET_A: PartialMarket = {
         settlementAsset: {
           __typename: 'Asset',
           id: 'asset-ABC',
+          name: '',
           decimals: 2,
           symbol: 'ABC',
         },
+        dataSourceSpecForTradingTermination: {
+          id: '',
+        },
       },
       metadata: {
         __typename: 'InstrumentMetadata',
@@ -106,9 +110,13 @@ const MARKET_B: PartialMarket = {
         settlementAsset: {
           __typename: 'Asset',
           id: 'asset-XYZ',
+          name: 'asset-XYZ',
           decimals: 2,
           symbol: 'XYZ',
         },
+        dataSourceSpecForTradingTermination: {
+          id: '',
+        },
       },
       metadata: {
         __typename: 'InstrumentMetadata',

apps/trading/components/select-market/select-market.tsx

@@ -17,10 +17,7 @@ import {
   SelectMarketTableRowSplash,
 } from './select-market-table';
 import type { ReactNode } from 'react';
-import type {
-  MarketWithCandles,
-  MarketWithData,
-} from '@vegaprotocol/market-list';
+import type { MarketMaybeWithDataAndCandles } from '@vegaprotocol/market-list';
 import type { PositionFieldsFragment } from '@vegaprotocol/positions';
 import type { Column, OnCellClickHandler } from './select-market-columns';
 import {
@@ -30,8 +27,6 @@ import {
 } from '@vegaprotocol/environment';
 import { HeaderTitle } from '../header';
 
-export type Market = MarketWithCandles & MarketWithData;
-
 export const SelectAllMarketsTableBody = ({
   markets,
   positions,
@@ -41,14 +36,14 @@ export const SelectAllMarketsTableBody = ({
   headers = columnHeaders,
   tableColumns = (market) => columns(market, onSelect, onCellClick, inViewRoot),
 }: {
-  markets?: Market[] | null;
+  markets?: MarketMaybeWithDataAndCandles[] | null;
   positions?: PositionFieldsFragment[];
   title?: string;
   onSelect: (id: string) => void;
   onCellClick: OnCellClickHandler;
   headers?: Column[];
   tableColumns?: (
-    market: Market,
+    market: MarketMaybeWithDataAndCandles,
     inViewRoot?: RefObject<HTMLDivElement>,
     openVolume?: string
   ) => Column[];

apps/trading/components/vega-wallet-connect-button/vega-wallet-connect-button.tsx

@@ -185,7 +185,10 @@ export const VegaWalletConnectButton = () => {
                   ))}
                 </DropdownMenuRadioGroup>
                 <DropdownMenuSeparator />
-                <DropdownMenuItem onClick={() => openTransferDialog(true)}>
+                <DropdownMenuItem
+                  data-testid="wallet-transfer"
+                  onClick={() => openTransferDialog(true)}
+                >
                   {t('Transfer')}
                 </DropdownMenuItem>
                 <DropdownMenuItem data-testid="disconnect" onClick={disconnect}>

apps/trading/components/welcome-dialog/welcome-landing-dialog.spec.tsx

@@ -3,13 +3,13 @@ import { MemoryRouter } from 'react-router-dom';
 import { MockedProvider } from '@apollo/client/testing';
 import * as Schema from '@vegaprotocol/types';
 import type {
-  MarketWithCandles,
-  MarketWithData,
+  MarketMaybeWithCandles,
+  MarketMaybeWithData,
   MarketData,
 } from '@vegaprotocol/market-list';
 import { SelectMarketLandingTable } from './welcome-landing-dialog';
 
-type Market = MarketWithCandles & MarketWithData;
+type Market = MarketMaybeWithCandles & MarketMaybeWithData;
 type PartialMarket = Partial<
   Omit<Market, 'data'> & { data: Partial<MarketData> }
 >;
@@ -32,9 +32,13 @@ const MARKET_A: PartialMarket = {
         settlementAsset: {
           __typename: 'Asset',
           id: 'asset-ABC',
+          name: 'asset-ABC',
           decimals: 2,
           symbol: 'ABC',
         },
+        dataSourceSpecForTradingTermination: {
+          id: '',
+        },
       },
       metadata: {
         __typename: 'InstrumentMetadata',
@@ -104,9 +108,13 @@ const MARKET_B: PartialMarket = {
         settlementAsset: {
           __typename: 'Asset',
           id: 'asset-XYZ',
+          name: 'asset-XYZ',
           decimals: 2,
           symbol: 'XYZ',
         },
+        dataSourceSpecForTradingTermination: {
+          id: '',
+        },
       },
       metadata: {
         __typename: 'InstrumentMetadata',