Remove '.git' from .dockerignore; the Vega build process uses git commands ('rev-parse') to navigate

Co-authored-by: Dariusz Majcherczyk <dariusz.majcherczyk@gmail.com>

.dockerignore

@@ -4,6 +4,5 @@ tmp/*
 .dockerignore
 dockerfiles
 node_modules
-.git
 .github
 .vscode

.github/workflows/ci-cd-trigger.yml

@@ -196,9 +196,9 @@ jobs:
   cypress:
     needs: [build-sources, check-e2e-needed]
     name: '(CI) cypress'
-    if: ${{ needs.check-e2e-needed.outputs.run-tests == 'true' }}
     uses: ./.github/workflows/cypress-run.yml
     secrets: inherit
+    if: needs.check-e2e-needed.outputs.run-tests == 'true' && (contains(needs.build-sources.outputs.projects, 'governance') || contains(needs.build-sources.outputs.projects, 'explorer'))
     with:
       projects: ${{ needs.build-sources.outputs.projects-e2e }}
       tags: '@smoke'
@@ -287,6 +287,7 @@ jobs:
     steps:
       - run: |
           result="${{ needs.cypress.result }}"
+          echo "Result: $result"
           if [[ $result == "success" || $result == "skipped" ]]; then
             exit 0
           else

.github/workflows/console-test-run.yml

@@ -10,7 +10,7 @@ on:
     inputs:
       console-test-branch:
         type: choice
-        description: 'main: v0.73.5, develop: v0.73.5'
+        description: 'main: v0.73.13, develop: v0.74.0'
         options:
           - main
           - develop
@@ -205,7 +205,7 @@ jobs:
       # run tests
       #----------------------------------------------
       - name: Run tests
-        run: CONSOLE_IMAGE_NAME=ci/trading:local poetry run pytest -v -s --numprocesses 1 --dist loadfile --durations=45
+        run: CONSOLE_IMAGE_NAME=ci/trading:local poetry run pytest -v --numprocesses 4 --dist loadfile --durations=45
         working-directory: apps/trading/e2e
       #----------------------------------------------
       # upload traces

.github/workflows/cypress-live-test.yml

@@ -1,36 +0,0 @@
-name: Cypress Console tests -- live environment
-
-# This workflow runs using provided url
-
-on:
-  workflow_dispatch:
-    inputs:
-      url:
-        description: 'Url'
-        required: true
-        type: string
-
-jobs:
-  cypress-run:
-    name: Run Cypress Trading tests -- live environment
-    runs-on: ubuntu-22.04
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v2
-
-      - name: Use Node.js 20
-        id: Node
-        uses: actions/setup-node@v4
-        with:
-          node-version-file: '.nvmrc'
-
-      - name: Run Cypress tests
-        uses: cypress-io/github-action@v4
-        with:
-          browser: chrome
-          record: true
-          project: ./apps/trading-e2e
-          config: baseUrl=${{ github.event.inputs.url }}
-          env: grepTags=@live
-        env:
-          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/cypress-manual-trigger.yml

@@ -12,7 +12,6 @@ on:
         options:
           - explorer-e2e
           - governance-e2e
-          - trading-e2e
       tags:
         description: 'Test tags to run'
         required: true

.github/workflows/cypress-nightly.yml

@@ -10,5 +10,5 @@ jobs:
     uses: ./.github/workflows/cypress-run.yml
     secrets: inherit
     with:
-      projects: '["explorer-e2e","governance-e2e","trading-e2e"]'
+      projects: '["explorer-e2e","governance-e2e"]'
       tags: '@smoke @regression @slow'

.github/workflows/lint-pr.yml

@@ -25,7 +25,7 @@ jobs:
       - name: Install dependencies
         run: |
           rm package.json
-          npm install --no-save @commitlint/cli @commitlint/config-conventional @commitlint/config-nx-scopes nx
+          npm install --no-save @commitlint/cli@16.3.0 @commitlint/config-conventional@18.6.1 @commitlint/config-nx-scopes@18.6.1 nx@17.1.2
 
       - name: Check PR title
-        run: echo "${{ github.event.pull_request.title }}" | npx commitlint --config ./commitlint.config-ci.js
+        run: echo "${{ github.event.pull_request.title }}" | npx @commitlint/cli@16.3.0 --config ./commitlint.config-ci.js

.verdaccio/config.yml

@@ -0,0 +1,28 @@
+# path to a directory with all packages
+storage: ../tmp/local-registry/storage
+
+# a list of other known repositories we can talk to
+uplinks:
+  npmjs:
+    url: https://registry.yarnpkg.com
+    maxage: 60m
+
+packages:
+  '**':
+    # give all users (including non-authenticated users) full access
+    # because it is a local registry
+    access: $all
+    publish: $all
+    unpublish: $all
+
+    # if package is not available locally, proxy requests to npm registry
+    proxy: npmjs
+
+# log settings
+logs:
+  type: stdout
+  format: pretty
+  level: warn
+
+publish:
+  allow_offline: true # set offline to true to allow publish offline

README.md

@@ -4,7 +4,7 @@ The front-end monorepo provides a toolkit for building apps that interact with V
 
 This repository is managed using [Nx](https://nx.dev).
 
-# 🔎 Applications in this repo
+## 🔎 Applications in this repo
 
 ### [Block explorer](./apps/explorer)
 
@@ -30,7 +30,7 @@ Hosting for static content being shared across apps, for example fonts.
 
 The utility dApp for validators wishing to add or remove themselves as a signer of the multisig contract.
 
-# 🧱 Libraries in this repo
+## 🧱 Libraries in this repo
 
 ### [UI toolkit](./libs/ui-toolkit)
 
@@ -53,7 +53,7 @@ A utility library for connecting to the Ethereum network and interacting with Ve
 
 Generic react helpers that can be used across multiple applications, along with other utilities.
 
-# 💻 Develop
+## 💻 Develop
 
 ### Set up
 
@@ -103,7 +103,7 @@ In CI linting, formatting and also run. These checks can be seen in the [CI work
 
 Visit the [Nx Documentation](https://nx.dev/getting-started/intro) to learn more.
 
-# 🐋 Hosting a console
+## 🐋 Hosting a console
 
 To host a console there are two possible build scenarios for running the frontends: nx performed **outside** or **inside** docker build. For specific build instructions follow [build instructions](#build-instructions).
 
@@ -226,6 +226,6 @@ Note: The script is only needed if capsule was built for first time or fresh. To
 vega wallet service run -n DV --load-tokens --tokens-passphrase-file passphrase --no-version-check --automatic-consent --home ~/.vegacapsule/testnet/wallet
 ```
 
-# 📑 License
+## 📑 License
 
 [MIT](./LICENSE)

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

@@ -1,7 +1,7 @@
 import { getNewAssetTxBody } from '../support/governance.functions';
 
 context('Proposal page', { tags: '@smoke' }, function () {
-  describe('Verify elements on page', function () {
+  describe.skip('Verify elements on page', function () {
     const proposalHeading = 'proposals-heading';
     const dateTimeRegex =
       /(\d{1,2})\/(\d{1,2})\/(\d{4}), (\d{1,2}):(\d{1,2}):(\d{1,2})/gm;
@@ -24,10 +24,6 @@ context('Proposal page', { tags: '@smoke' }, function () {
           cy.get_element_by_col_id('title').should('have.text', proposalTitle);
           cy.get_element_by_col_id('type').should('have.text', 'NewMarket');
           cy.get_element_by_col_id('state').should('have.text', 'Enacted');
-          cy.getByTestId('vote-progress').should('be.visible');
-          cy.getByTestId('vote-progress-bar-for')
-            .invoke('attr', 'style')
-            .should('eq', 'width: 100%;');
           cy.get('[col-id="cDate"]')
             .invoke('text')
             .should('match', dateTimeRegex);
@@ -73,10 +69,6 @@ context('Proposal page', { tags: '@smoke' }, function () {
             'have.text',
             'Waiting for Node Vote'
           );
-          cy.getByTestId('vote-progress').should('be.visible');
-          cy.getByTestId('vote-progress-bar-against')
-            .invoke('attr', 'style')
-            .should('eq', 'width: 100%;');
           cy.get('[col-id="cDate"]')
             .invoke('text')
             .should('match', dateTimeRegex);

apps/explorer/.env

@@ -1,5 +1,4 @@
 NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
-NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.rocks
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/stagnet1/vegawallet-stagnet1.toml
 NX_VEGA_ENV=STAGNET1
@@ -9,7 +8,6 @@ NX_VEGA_WALLET_URL=http://localhost:1789
 NX_TENDERMINT_URL=https://tm.n01.stagnet1.vega.rocks
 NX_TENDERMINT_WEBSOCKET_URL=wss://tm.n01.stagnet1.vega.xyz/websocket
 NX_BLOCK_EXPLORER=https://be.stagnet1.vega.rocks/rest
-NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_ORACLE_PROOFS_URL=https://raw.githubusercontent.com/vegaprotocol/well-known/main/__generated__/oracle-proofs.json
 NX_VEGA_GOVERNANCE_URL=https://governance.stagnet1.vega.rocks
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json

apps/explorer/.env.capsule

@@ -1,6 +1,5 @@
 # App configuration variables
 NX_VEGA_ENV=CUSTOM
-NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/test/announcements.json
 NX_VEGA_EXPLORER_URL=/
 NX_ORACLE_PROOFS_URL=https://raw.githubusercontent.com/vegaprotocol/well-known/main/__generated__/oracle-proofs.json

apps/explorer/.env.devnet

@@ -2,7 +2,6 @@
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/devnet1/vegawallet-devnet1.toml
 NX_VEGA_ENV=DEVNET
 NX_BLOCK_EXPLORER=https://be.devnet1.vega.xyz/rest
-NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_VEGA_GOVERNANCE_URL=https://dev.governance.vega.xyz
 NX_VEGA_URL=https://api.devnet1.vega.xyz/graphql
 NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-internal/main/devnet1/vegawallet-devnet1.toml

apps/explorer/.env.mainnet

@@ -4,7 +4,6 @@ NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks/maste
 NX_VEGA_URL=https://api.vega.community/graphql
 NX_VEGA_ENV=MAINNET
 NX_BLOCK_EXPLORER=https://be.vega.community/rest
-NX_ETHERSCAN_URL=https://etherscan.io
 NX_VEGA_GOVERNANCE_URL=https://governance.vega.xyz
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json
 NX_VEGA_EXPLORER_URL=https://explorer.vega.xyz/

apps/explorer/.env.mainnet-mirror

@@ -4,7 +4,6 @@ NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-inter
 NX_VEGA_URL=https://api.mainnet-mirror.vega.rocks/graphql
 NX_VEGA_ENV=MAINNET_MIRROR
 NX_BLOCK_EXPLORER=https://be.mainnet-mirror.vega.rocks/rest
-NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_VEGA_GOVERNANCE_URL=https://governance.mainnet-mirror.vega.rocks
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/mainnet/announcements.json
 NX_VEGA_EXPLORER_URL=https://explorer.mainnet-mirror.vega.rocks/

apps/explorer/.env.testnet

@@ -4,7 +4,6 @@ NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks-inter
 NX_VEGA_ENV=TESTNET
 NX_VEGA_URL=https://api.n07.testnet.vega.xyz/graphql
 NX_HOSTED_WALLET_URL=https://wallet.testnet.vega.xyz
-NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_VEGA_GOVERNANCE_URL=https://governance.fairground.wtf
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 NX_VEGA_EXPLORER_URL=https://explorer.fairground.wtf

apps/explorer/.env.validators-testnet

@@ -4,7 +4,6 @@ NX_VEGA_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/networks/maste
 NX_VEGA_URL=https://api-validators-testnet.vega.rocks/graphql
 NX_VEGA_REST=https://api-validators-testnet.vega.rocks/
 NX_ETHEREUM_PROVIDER_URL=https://sepolia.infura.io/v3/4f846e79e13f44d1b51bbd7ed9edefb8
-NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/fairground/announcements.json
 
 NX_BLOCK_EXPLORER=https://be.validators-testnet.vega.rocks/rest

apps/explorer/.env.vegacapsule

@@ -3,7 +3,6 @@ NX_TENDERMINT_URL=http://localhost:26607/
 NX_TENDERMINT_WEBSOCKET_URL=wss://localhost:26607/websocket
 NX_VEGA_ENV=CUSTOM
 NX_BLOCK_EXPLORER=
-NX_ETHERSCAN_URL=https://sepolia.etherscan.io
 NX_ANNOUNCEMENTS_CONFIG_URL=https://raw.githubusercontent.com/vegaprotocol/announcements/test/announcements.json
 NX_VEGA_EXPLORER_URL=/
 NX_ORACLE_PROOFS_URL=https://raw.githubusercontent.com/vegaprotocol/well-known/main/__generated__/oracle-proofs.json

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

@@ -7,6 +7,7 @@ export type AssetBalanceProps = {
   price: string;
   showAssetLink?: boolean;
   showAssetSymbol?: boolean;
+  rounded?: boolean;
 };
 
 /**
@@ -18,12 +19,17 @@ const AssetBalance = ({
   price,
   showAssetLink = true,
   showAssetSymbol = false,
+  rounded = false,
 }: AssetBalanceProps) => {
   const { data: asset, loading } = useAssetDataProvider(assetId);
 
   const label =
     !loading && asset && asset.decimals
-      ? addDecimalsFixedFormatNumber(price, asset.decimals)
+      ? addDecimalsFixedFormatNumber(
+          price,
+          asset.decimals,
+          rounded ? 0 : undefined
+        )
       : price;
 
   return (

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

@@ -41,6 +41,7 @@ export const Header = () => {
       Routes.ASSETS,
       Routes.MARKETS,
       Routes.GOVERNANCE,
+      Routes.TREASURY,
       Routes.NETWORK_PARAMETERS,
       Routes.GENESIS,
     ].map((n) => pages.find((r) => r.path === n))

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

@@ -1,34 +0,0 @@
-import React from 'react';
-
-import { DATA_SOURCES } from '../../../config';
-import Hash from '../hash';
-
-export enum EthExplorerLinkTypes {
-  block = 'block',
-  address = 'address',
-  tx = 'tx',
-}
-
-export type EthExplorerLinkProps = Partial<typeof HTMLAnchorElement> & {
-  id: string;
-  type: EthExplorerLinkTypes;
-};
-
-export const EthExplorerLink = ({
-  id,
-  type,
-  ...props
-}: EthExplorerLinkProps) => {
-  const link = `${DATA_SOURCES.ethExplorerUrl}/${type}/${id}`;
-  return (
-    <a
-      className="underline external font-mono"
-      target="_blank"
-      rel="noopener noreferrer"
-      {...props}
-      href={link}
-    >
-      <Hash text={id} />
-    </a>
-  );
-};

apps/explorer/src/app/components/links/external-explorer-link/external-chain-icon.tsx

@@ -0,0 +1,34 @@
+import type { ChainIdMapping } from './external-chain';
+import { SUPPORTED_CHAIN_IDS, SUPPORTED_CHAIN_LABELS } from './external-chain';
+
+export const SUPPORTED_CHAIN_ICON_URLS: ChainIdMapping = {
+  '1': '/assets/chain-eth-logo.svg',
+  '100': '/assets/chain-gno-logo.svg',
+  '42161': '/assets/chain-arb-logo.svg',
+  '11155111': '/assets/chain-eth-logo.svg',
+};
+
+export type ExternalChainIconProps = {
+  chainId?: string;
+};
+
+export const ExternalChainIcon = ({
+  // If chainID is not provided, default to a non-existent chain
+  chainId = '-1',
+}: ExternalChainIconProps) => {
+  if (SUPPORTED_CHAIN_IDS.includes(chainId)) {
+    const url = SUPPORTED_CHAIN_ICON_URLS[chainId];
+    const alt = SUPPORTED_CHAIN_LABELS[chainId];
+
+    return (
+      <img
+        src={url}
+        className="inline-block w-4 h-4 mr-1 dark:invert"
+        alt={alt}
+        title={alt}
+      />
+    );
+  } else {
+    return null;
+  }
+};

apps/explorer/src/app/components/links/external-explorer-link/external-chain.ts

@@ -0,0 +1,38 @@
+export type ChainIdMapping = {
+  [K in typeof SUPPORTED_CHAIN_IDS[number]]: string;
+};
+export const SUPPORTED_CHAIN_IDS: string[] = ['1', '100', '42161', '11155111'];
+
+export const SUPPORTED_CHAIN_LABELS: ChainIdMapping = {
+  '1': 'Ethereum',
+  '100': 'Gnosis',
+  '42161': 'Arbitrum',
+  '11155111': 'Sepolia',
+};
+
+export function getExternalExplorerLink(chainId: string, type: string) {
+  if (SUPPORTED_CHAIN_IDS.includes(chainId)) {
+    switch (chainId) {
+      case '1':
+        return 'https://etherscan.io';
+      case '100':
+        return 'https://gnosisscan.io';
+      case '42161':
+        return 'https://arbiscan.io';
+      case '11155111':
+        return 'https://sepolia.etherscan.io';
+      default:
+        return '#';
+    }
+  } else {
+    return '#';
+  }
+}
+
+export function getExternalChainLabel(chainId?: string) {
+  if (chainId && SUPPORTED_CHAIN_IDS.includes(chainId)) {
+    return SUPPORTED_CHAIN_LABELS[chainId];
+  } else {
+    return 'Custom Chain';
+  }
+}

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

@@ -0,0 +1,41 @@
+import Hash from '../hash';
+import { getExternalExplorerLink } from './external-chain';
+import { ExternalChainIcon } from './external-chain-icon';
+
+export enum EthExplorerLinkTypes {
+  block = 'block',
+  address = 'address',
+  tx = 'tx',
+}
+
+export type ExternalExplorerLinkProps = Partial<typeof HTMLAnchorElement> & {
+  id: string;
+  type: EthExplorerLinkTypes;
+  // Defaults to Ethereum Mainnet, as chain support was added late
+  chain?: string;
+  code?: boolean;
+};
+
+export const ExternalExplorerLink = ({
+  id,
+  type,
+  chain = '1',
+  code = false,
+  ...props
+}: ExternalExplorerLinkProps) => {
+  const link = `${getExternalExplorerLink(chain, type)}/${type}/${id}${
+    code ? '#code' : ''
+  }`;
+  return (
+    <a
+      className="underline external font-mono"
+      target="_blank"
+      rel="noopener noreferrer"
+      {...props}
+      href={link}
+    >
+      <ExternalChainIcon chainId={chain} />
+      <Hash text={id} />
+    </a>
+  );
+};

apps/explorer/src/app/components/links/hash.tsx

@@ -1,4 +1,4 @@
-export type HashProps = {
+export type HashProps = React.HTMLProps<HTMLSpanElement> & {
   text: string;
   truncate?: boolean;
 };

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

@@ -2,4 +2,5 @@ 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 NetworkParameterLink } from './network-parameter-link/network-parameter-link';
 export * from './asset-link/asset-link';

apps/explorer/src/app/components/links/network-parameter-link/network-parameter-link.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Routes } from '../../../routes/route-names';
+import { Link } from 'react-router-dom';
+
+import type { ComponentProps } from 'react';
+import Hash from '../hash';
+
+export type NetworkParameterLinkProps = Partial<ComponentProps<typeof Link>> & {
+  parameter: string;
+};
+
+/**
+ * Links a given network parameter to the relevant page and anchor on the page
+ */
+const NetworkParameterLink = ({
+  parameter,
+  ...props
+}: NetworkParameterLinkProps) => {
+  return (
+    <Link
+      className="underline"
+      {...props}
+      to={`/${Routes.NETWORK_PARAMETERS}#${parameter}`}
+    >
+      <Hash text={parameter} />
+    </Link>
+  );
+};
+
+export default NetworkParameterLink;

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

@@ -32,9 +32,17 @@ export function getNameForParty(id: string, data?: ExplorerNodeNamesQuery) {
 export type PartyLinkProps = Partial<ComponentProps<typeof Link>> & {
   id: string;
   truncate?: boolean;
+  networkLabel?: string;
+  truncateLength?: number;
 };
 
-const PartyLink = ({ id, truncate = false, ...props }: PartyLinkProps) => {
+const PartyLink = ({
+  id,
+  truncate = false,
+  truncateLength = 4,
+  networkLabel = t('Network'),
+  ...props
+}: PartyLinkProps) => {
   const { data } = useExplorerNodeNamesQuery();
   const name = useMemo(() => getNameForParty(id, data), [data, id]);
   const useName = name !== id;
@@ -44,7 +52,7 @@ const PartyLink = ({ id, truncate = false, ...props }: PartyLinkProps) => {
   if (id === SPECIAL_CASE_NETWORK || id === SPECIAL_CASE_NETWORK_ID) {
     return (
       <span className="font-mono" data-testid="network">
-        {t('Network')}
+        {networkLabel}
       </span>
     );
   }
@@ -70,7 +78,11 @@ const PartyLink = ({ id, truncate = false, ...props }: PartyLinkProps) => {
         {useName ? (
           name
         ) : (
-          <Hash text={truncate ? truncateMiddle(id, 4, 4) : id} />
+          <Hash
+            text={
+              truncate ? truncateMiddle(id, truncateLength, truncateLength) : id
+            }
+          />
         )}
       </Link>
     </span>

apps/explorer/src/app/components/links/proposal-link/Proposal.graphql

@@ -1,9 +1,11 @@
 query ExplorerProposal($id: ID!) {
   proposal(id: $id) {
+    ... on Proposal {
       id
       rationale {
         title
         description
       }
     }
+  }
 }

apps/explorer/src/app/components/links/proposal-link/__generated__/Proposal.ts

@@ -8,18 +8,20 @@ export type ExplorerProposalQueryVariables = Types.Exact<{
 }>;
 
 
-export type ExplorerProposalQuery = { __typename?: 'Query', proposal?: { __typename?: 'Proposal', id?: string | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string } } | null };
+export type ExplorerProposalQuery = { __typename?: 'Query', proposal?: { __typename?: 'BatchProposal' } | { __typename?: 'Proposal', id?: string | null, rationale: { __typename?: 'ProposalRationale', title: string, description: string } } | null };
 
 
 export const ExplorerProposalDocument = gql`
     query ExplorerProposal($id: ID!) {
   proposal(id: $id) {
+    ... on Proposal {
       id
       rationale {
         title
         description
       }
     }
+  }
 }
     `;
 

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

@@ -3,7 +3,11 @@ import { MockedProvider } from '@apollo/client/testing';
 import type { MockedResponse } from '@apollo/client/testing';
 import { render } from '@testing-library/react';
 import ProposalLink from './proposal-link';
-import { ExplorerProposalDocument } from './__generated__/Proposal';
+import {
+  ExplorerProposalDocument,
+  type ExplorerProposalQuery,
+  type ExplorerProposalQueryVariables,
+} from './__generated__/Proposal';
 import { GraphQLError } from 'graphql';
 
 function renderComponent(id: string, mocks: MockedResponse[]) {
@@ -23,7 +27,10 @@ describe('Proposal link component', () => {
   });
 
   it('Renders the ID on error', async () => {
-    const mock = {
+    const mock: MockedResponse<
+      ExplorerProposalQuery,
+      ExplorerProposalQueryVariables
+    > = {
       request: {
         query: ExplorerProposalDocument,
         variables: {
@@ -40,17 +47,22 @@ describe('Proposal link component', () => {
   });
 
   it('Renders the proposal title when the query returns a result', async () => {
-    const mock = {
+    const proposalId = '123';
+    const mock: MockedResponse<
+      ExplorerProposalQuery,
+      ExplorerProposalQueryVariables
+    > = {
       request: {
         query: ExplorerProposalDocument,
         variables: {
-          id: '123',
+          id: proposalId,
         },
       },
       result: {
         data: {
           proposal: {
-            id: '123',
+            __typename: 'Proposal',
+            id: proposalId,
             rationale: {
               title: 'test-title',
               description: 'test description',
@@ -60,13 +72,16 @@ describe('Proposal link component', () => {
       },
     };
 
-    const res = render(renderComponent('123', [mock]));
+    const res = render(renderComponent(proposalId, [mock]));
-    expect(res.getByText('123')).toBeInTheDocument();
+    expect(res.getByText(proposalId)).toBeInTheDocument();
     expect(await res.findByText('test-title')).toBeInTheDocument();
   });
 
   it('Leaves the proposal id when the market is not found', async () => {
-    const mock = {
+    const mock: MockedResponse<
+      ExplorerProposalQuery,
+      ExplorerProposalQueryVariables
+    > = {
       request: {
         query: ExplorerProposalDocument,
         variables: {

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

@@ -1,7 +1,11 @@
-import { useExplorerProposalQuery } from './__generated__/Proposal';
+import {
+  useExplorerProposalQuery,
+  type ExplorerProposalQuery,
+} from './__generated__/Proposal';
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { ENV } from '../../../config/env';
 import Hash from '../hash';
+
 export type ProposalLinkProps = {
   id: string;
   text?: string;
@@ -16,8 +20,13 @@ const ProposalLink = ({ id, text }: ProposalLinkProps) => {
     variables: { id },
   });
 
+  const proposal = data?.proposal as Extract<
+    ExplorerProposalQuery['proposal'],
+    { __typename?: 'Proposal' }
+  >;
+
   const base = ENV.dataSources.governanceUrl;
-  const label = data?.proposal?.rationale.title || id;
+  const label = proposal?.rationale?.title || id;
 
   return (
     <ExternalLink href={`${base}/proposals/${id}`}>

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

@@ -1,6 +1,7 @@
 import { t } from '@vegaprotocol/i18n';
 import type { MarketInfoWithData } from '@vegaprotocol/markets';
 import {
+  LiquidationStrategyInfoPanel,
   LiquidityPriceRangeInfoPanel,
   LiquiditySLAParametersInfoPanel,
   MarginScalingFactorsPanel,
@@ -94,6 +95,8 @@ export const MarketDetails = ({ market }: { market: MarketInfoWithData }) => {
           </>
         )
       )}
+      <h2 className={headerClassName}>{t('Liquidation strategy')}</h2>
+      <LiquidationStrategyInfoPanel market={market} />
       <h2 className={headerClassName}>{t('Liquidity monitoring')}</h2>
       <LiquidityMonitoringParametersInfoPanel market={market} />
       <h2 className={headerClassName}>{t('Liquidity price range')}</h2>

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

@@ -175,6 +175,7 @@ describe('Amend order details', () => {
 
     const res = renderExistingAmend('123', 1, amend);
     expect(await res.findByText('New size')).toBeInTheDocument();
+    expect(await res.findByText('Size ±')).toBeInTheDocument();
   });
 
   it('Renders Reference if provided', async () => {

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

@@ -82,7 +82,7 @@ const AmendOrderDetails = ({ id, version, amend }: AmendOrderDetailsProps) => {
             {amend.sizeDelta && amend.sizeDelta !== '0' ? (
               <div className="mb-12 md:mb-0">
                 <h2 className="text-dark mb-4 text-2xl font-bold">
-                  {t('New size')}
+                  {t('Size ±')}
                 </h2>
                 <h5
                   className={`mb-0 text-lg font-medium capitalize text-gray-500 ${getSideDeltaColour(
@@ -93,6 +93,16 @@ const AmendOrderDetails = ({ id, version, amend }: AmendOrderDetailsProps) => {
                 </h5>
               </div>
             ) : null}
+            {o && (
+              <div className="">
+                <h2 className="text-dark mb-4 text-2xl font-bold">
+                  {t('New size')}
+                </h2>
+                <h5 className="mb-0 text-lg font-medium text-gray-500">
+                  {o ? o.size : null}
+                </h5>
+              </div>
+            )}
 
             {amend.price && amend.price !== '0' ? (
               <div className="">

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

@@ -1,5 +1,4 @@
 import { type ProposalListFieldsFragment } from '@vegaprotocol/proposals';
-import { VoteProgress } from '@vegaprotocol/proposals';
 import { type AgGridReact } from 'ag-grid-react';
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
 import { AgGrid } from '@vegaprotocol/datagrid';
@@ -12,12 +11,7 @@ import { type ColDef } from 'ag-grid-community';
 import type { RowClickedEvent } from 'ag-grid-community';
 import { getDateTimeFormat } from '@vegaprotocol/utils';
 import { t } from '@vegaprotocol/i18n';
-import {
-  NetworkParams,
-  useNetworkParams,
-} from '@vegaprotocol/network-parameters';
 import { ProposalStateMapping } from '@vegaprotocol/types';
-import BigNumber from 'bignumber.js';
 import { DApp, TOKEN_PROPOSAL, useLinks } from '@vegaprotocol/environment';
 import { BREAKPOINT_MD } from '../../config/breakpoints';
 import { JsonViewerDialog } from '../dialogs/json-viewer-dialog';
@@ -31,15 +25,7 @@ type ProposalsTableProps = {
   data: ProposalListFieldsFragment[] | null;
 };
 export const ProposalsTable = ({ data }: ProposalsTableProps) => {
-  const { params } = useNetworkParams([
-    NetworkParams.governance_proposal_market_requiredMajority,
-  ]);
   const tokenLink = useLinks(DApp.Governance);
-  const requiredMajorityPercentage = useMemo(() => {
-    const requiredMajority =
-      params?.governance_proposal_market_requiredMajority ?? 1;
-    return new BigNumber(requiredMajority).times(100);
-  }, [params?.governance_proposal_market_requiredMajority]);
 
   const gridRef = useRef<AgGridReact>(null);
   useLayoutEffect(() => {
@@ -90,33 +76,6 @@ export const ProposalsTable = ({ data }: ProposalsTableProps) => {
           return value ? ProposalStateMapping[value] : '-';
         },
       },
-      {
-        colId: 'voting',
-        maxWidth: 100,
-        hide: window.innerWidth <= BREAKPOINT_MD,
-        headerName: t('Voting'),
-        cellRenderer: ({
-          data,
-        }: VegaICellRendererParams<ProposalListFieldsFragment>) => {
-          if (data) {
-            const yesTokens = new BigNumber(data.votes.yes.totalTokens);
-            const noTokens = new BigNumber(data.votes.no.totalTokens);
-            const totalTokensVoted = yesTokens.plus(noTokens);
-            const yesPercentage = totalTokensVoted.isZero()
-              ? new BigNumber(0)
-              : yesTokens.multipliedBy(100).dividedBy(totalTokensVoted);
-            return (
-              <div className="flex h-full items-center justify-center pt-2 uppercase">
-                <VoteProgress
-                  threshold={requiredMajorityPercentage}
-                  progress={yesPercentage}
-                />
-              </div>
-            );
-          }
-          return '-';
-        },
-      },
       {
         colId: 'cDate',
         maxWidth: 150,
@@ -184,7 +143,7 @@ export const ProposalsTable = ({ data }: ProposalsTableProps) => {
         },
       },
     ],
-    [requiredMajorityPercentage, tokenLink]
+    [tokenLink]
   );
   return (
     <>

apps/explorer/src/app/components/txs/details/chain-events/tx-contract-call.tsx

@@ -1,9 +1,10 @@
 import { TableCell, TableRow } from '../../../table';
 import { t } from '@vegaprotocol/i18n';
 import {
-  EthExplorerLink,
+  ExternalExplorerLink,
   EthExplorerLinkTypes,
-} from '../../../links/eth-explorer-link/eth-explorer-link';
+} from '../../../links/external-explorer-link/external-explorer-link';
+import { getExternalChainLabel } from '../../../links/external-explorer-link/external-chain';
 import type { components } from '../../../../../types/explorer';
 import { defaultAbiCoder, base64 } from 'ethers/lib/utils';
 import { BigNumber } from 'ethers';
@@ -44,10 +45,10 @@ export const TxDetailsContractCall = ({
     },
   });
 
-  if (!contractCall || !contractCall.result) {
+  if (!contractCall) {
     return null;
   }
-
+  const chainLabel = getExternalChainLabel(contractCall.sourceChainId);
   return (
     <>
       {contractCall.specId && (
@@ -64,9 +65,12 @@ export const TxDetailsContractCall = ({
       )}
       {contractCall.blockHeight && (
         <TableRow modifier="bordered">
-          <TableCell>{t('ETH block')}</TableCell>
           <TableCell>
-            <EthExplorerLink
+            {chainLabel} {t('block')}
+          </TableCell>
+          <TableCell>
+            <ExternalExplorerLink
+              chain={contractCall.sourceChainId}
               id={contractCall.blockHeight}
               type={EthExplorerLinkTypes.block}
             />
@@ -75,14 +79,24 @@ export const TxDetailsContractCall = ({
       )}
       {data?.oracleSpec?.dataSourceSpec && (
         <OracleEthSource
+          chain={contractCall.sourceChainId}
           sourceType={data.oracleSpec.dataSourceSpec.spec.data.sourceType}
         />
       )}
 
+      {contractCall.error && (
+        <TableRow modifier="bordered">
+          <TableCell>{t('Call error')}</TableCell>
+          <TableCell>{contractCall.error}</TableCell>
+        </TableRow>
+      )}
+
+      {contractCall.result && (
         <TableRow modifier="bordered">
           <TableCell>{t('Result')}</TableCell>
           <TableCell>{decodeEthCallResult(contractCall.result)}</TableCell>
         </TableRow>
+      )}
     </>
   );
 };

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

@@ -3,9 +3,9 @@ import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import { AssetLink } from '../../../links';
 import {
-  EthExplorerLink,
+  ExternalExplorerLink,
   EthExplorerLinkTypes,
-} from '../../../links/eth-explorer-link/eth-explorer-link';
+} from '../../../links/external-explorer-link/external-explorer-link';
 
 interface TxDetailsChainEventErc20AssetLimitsUpdatedProps {
   assetLimitsUpdated: components['schemas']['vegaERC20AssetLimitsUpdated'];
@@ -42,7 +42,7 @@ export const TxDetailsChainEventErc20AssetLimitsUpdated = ({
       <TableRow modifier="bordered">
         <TableCell>{t('ERC20 asset')}</TableCell>
         <TableCell>
-          <EthExplorerLink
+          <ExternalExplorerLink
             id={assetLimitsUpdated.sourceEthereumAddress}
             type={EthExplorerLinkTypes.address}
           />

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

@@ -3,9 +3,9 @@ import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import { AssetLink } from '../../../links';
 import {
-  EthExplorerLink,
+  ExternalExplorerLink,
   EthExplorerLinkTypes,
-} from '../../../links/eth-explorer-link/eth-explorer-link';
+} from '../../../links/external-explorer-link/external-explorer-link';
 
 interface TxDetailsChainEventErc20AssetListProps {
   assetList: components['schemas']['vegaERC20AssetList'];
@@ -32,7 +32,7 @@ export const TxDetailsChainEventErc20AssetList = ({
       <TableRow modifier="bordered">
         <TableCell>{t('Source')}</TableCell>
         <TableCell>
-          <EthExplorerLink
+          <ExternalExplorerLink
             id={assetList.assetSource}
             type={EthExplorerLinkTypes.address}
           />

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

@@ -3,9 +3,9 @@ import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import { AssetLink, PartyLink } from '../../../links';
 import {
-  EthExplorerLink,
+  ExternalExplorerLink,
   EthExplorerLinkTypes,
-} from '../../../links/eth-explorer-link/eth-explorer-link';
+} from '../../../links/external-explorer-link/external-explorer-link';
 
 interface TxDetailsChainEventProps {
   deposit: components['schemas']['vegaERC20Deposit'];
@@ -36,7 +36,7 @@ export const TxDetailsChainEventDeposit = ({
       <TableRow modifier="bordered">
         <TableCell>{t('Source')}</TableCell>
         <TableCell>
-          <EthExplorerLink
+          <ExternalExplorerLink
             id={deposit.sourceEthereumAddress}
             type={EthExplorerLinkTypes.address}
           />

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

@@ -3,9 +3,9 @@ import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import { AssetLink } from '../../../links';
 import {
-  EthExplorerLink,
+  ExternalExplorerLink,
   EthExplorerLinkTypes,
-} from '../../../links/eth-explorer-link/eth-explorer-link';
+} from '../../../links/external-explorer-link/external-explorer-link';
 
 interface TxDetailsChainEventWithdrawalProps {
   withdrawal: components['schemas']['vegaERC20Withdrawal'];
@@ -35,7 +35,7 @@ export const TxDetailsChainEventWithdrawal = ({
       <TableRow modifier="bordered">
         <TableCell>{t('Recipient')}</TableCell>
         <TableCell>
-          <EthExplorerLink
+          <ExternalExplorerLink
             id={withdrawal.targetEthereumAddress}
             type={EthExplorerLinkTypes.address}
           />

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

@@ -3,9 +3,9 @@ import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import { PartyLink } from '../../../links';
 import {
-  EthExplorerLink,
+  ExternalExplorerLink,
   EthExplorerLinkTypes,
-} from '../../../links/eth-explorer-link/eth-explorer-link';
+} from '../../../links/external-explorer-link/external-explorer-link';
 
 interface TxDetailsChainEventStakeDepositProps {
   deposit: components['schemas']['vegaStakeDeposited'];
@@ -39,7 +39,7 @@ export const TxDetailsChainEventStakeDeposit = ({
       <TableRow modifier="bordered">
         <TableCell>{t('Source')}</TableCell>
         <TableCell>
-          <EthExplorerLink
+          <ExternalExplorerLink
             id={deposit.ethereumAddress}
             type={EthExplorerLinkTypes.address}
           />

apps/explorer/src/app/components/txs/details/chain-events/tx-stake-remove.tsx

@@ -3,9 +3,9 @@ import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import { PartyLink } from '../../../links';
 import {
-  EthExplorerLink,
+  ExternalExplorerLink,
   EthExplorerLinkTypes,
-} from '../../../links/eth-explorer-link/eth-explorer-link';
+} from '../../../links/external-explorer-link/external-explorer-link';
 
 interface TxDetailsChainEventStakeRemoveProps {
   remove: components['schemas']['vegaStakeRemoved'];
@@ -39,7 +39,7 @@ export const TxDetailsChainEventStakeRemove = ({
       <TableRow modifier="bordered">
         <TableCell>{t('Source')}</TableCell>
         <TableCell>
-          <EthExplorerLink
+          <ExternalExplorerLink
             id={remove.ethereumAddress}
             type={EthExplorerLinkTypes.address}
           />

apps/explorer/src/app/components/txs/details/chain-events/tx-stake-totalsupply.tsx

@@ -3,9 +3,9 @@ import { t } from '@vegaprotocol/i18n';
 import { TableRow, TableCell } from '../../../table';
 import type { components } from '../../../../../types/explorer';
 import {
-  EthExplorerLink,
+  ExternalExplorerLink,
   EthExplorerLinkTypes,
-} from '../../../links/eth-explorer-link/eth-explorer-link';
+} from '../../../links/external-explorer-link/external-explorer-link';
 
 interface TxDetailsChainEventStakeTotalSupplyProps {
   update: components['schemas']['vegaStakeTotalSupply'];
@@ -38,7 +38,7 @@ export const TxDetailsChainEventStakeTotalSupply = ({
       <TableRow modifier="bordered">
         <TableCell>{t('Source')}</TableCell>
         <TableCell>
-          <EthExplorerLink
+          <ExternalExplorerLink
             id={update.tokenAddress}
             type={EthExplorerLinkTypes.address}
           />

apps/explorer/src/app/components/txs/details/proposal/Proposal.graphql

@@ -1,7 +1,14 @@
 query ExplorerProposalStatus($id: ID!) {
   proposal(id: $id) {
+    ... on Proposal {
       id
       state
       rejectionReason
     }
+    ... on BatchProposal {
+      id
+      state
+      rejectionReason
+    }
+  }
 }

apps/explorer/src/app/components/txs/details/proposal/__generated__/Proposal.ts

@@ -8,16 +8,23 @@ export type ExplorerProposalStatusQueryVariables = Types.Exact<{
 }>;
 
 
-export type ExplorerProposalStatusQuery = { __typename?: 'Query', proposal?: { __typename?: 'Proposal', id?: string | null, state: Types.ProposalState, rejectionReason?: Types.ProposalRejectionReason | null } | null };
+export type ExplorerProposalStatusQuery = { __typename?: 'Query', proposal?: { __typename?: 'BatchProposal', id?: string | null, state: Types.ProposalState, rejectionReason?: Types.ProposalRejectionReason | null } | { __typename?: 'Proposal', id?: string | null, state: Types.ProposalState, rejectionReason?: Types.ProposalRejectionReason | null } | null };
 
 
 export const ExplorerProposalStatusDocument = gql`
     query ExplorerProposalStatus($id: ID!) {
   proposal(id: $id) {
+    ... on Proposal {
       id
       state
       rejectionReason
     }
+    ... on BatchProposal {
+      id
+      state
+      rejectionReason
+    }
+  }
 }
     `;
 

apps/explorer/src/app/components/txs/details/proposal/batch-item.spec.tsx

@@ -0,0 +1,257 @@
+import { render, screen } from '@testing-library/react';
+import { BatchItem } from './batch-item';
+import { MemoryRouter } from 'react-router-dom';
+import { MockedProvider } from '@apollo/client/testing';
+import type { components } from '../../../../../types/explorer';
+type Item = components['schemas']['vegaBatchProposalTermsChange'];
+
+describe('BatchItem', () => {
+  it('Renders "Unknown proposal type" by default', () => {
+    const item = {};
+    render(<BatchItem item={item} />);
+    expect(screen.getByText('Unknown proposal type')).toBeInTheDocument();
+  });
+
+  it('Renders "Unknown proposal type" for unknown items', () => {
+    const item = {
+      newLochNessMonster: {
+        location: 'Loch Ness',
+      },
+    } as unknown as Item;
+    render(<BatchItem item={item} />);
+    expect(screen.getByText('Unknown proposal type')).toBeInTheDocument();
+  });
+
+  it('Renders "New spot market"', () => {
+    const item = {
+      newSpotMarket: {},
+    };
+    render(<BatchItem item={item} />);
+    expect(screen.getByText('New spot market')).toBeInTheDocument();
+  });
+
+  it('Renders "Cancel transfer"', () => {
+    const item = {
+      cancelTransfer: {
+        changes: {
+          transferId: 'transfer123',
+        },
+      },
+    };
+    render(<BatchItem item={item} />);
+    expect(screen.getByText('Cancel transfer')).toBeInTheDocument();
+    expect(screen.getByText('transf')).toBeInTheDocument();
+  });
+
+  it('Renders "Cancel transfer" without an id', () => {
+    const item = {
+      cancelTransfer: {
+        changes: {},
+      },
+    };
+    render(<BatchItem item={item} />);
+    expect(screen.getByText('Cancel transfer')).toBeInTheDocument();
+  });
+
+  it('Renders "New freeform"', () => {
+    const item = {
+      newFreeform: {},
+    };
+    render(<BatchItem item={item} />);
+    expect(screen.getByText('New freeform proposal')).toBeInTheDocument();
+  });
+
+  it('Renders "New market"', () => {
+    const item = {
+      newMarket: {},
+    };
+    render(<BatchItem item={item} />);
+    expect(screen.getByText('New market')).toBeInTheDocument();
+  });
+
+  it('Renders "New transfer"', () => {
+    const item = {
+      newTransfer: {},
+    };
+    render(<BatchItem item={item} />);
+    expect(screen.getByText('New transfer')).toBeInTheDocument();
+  });
+
+  it('Renders "Update asset" with assetId', () => {
+    const item = {
+      updateAsset: {
+        assetId: 'asset123',
+      },
+    };
+    render(
+      <MemoryRouter>
+        <MockedProvider>
+          <BatchItem item={item} />
+        </MockedProvider>
+      </MemoryRouter>
+    );
+    expect(screen.getByText('Update asset')).toBeInTheDocument();
+    expect(screen.getByText('asset123')).toBeInTheDocument();
+  });
+
+  it('Renders "Update asset" even if assetId is not set', () => {
+    const item = {
+      updateAsset: {
+        assetId: undefined,
+      },
+    };
+    render(<BatchItem item={item} />);
+    expect(screen.getByText('Update asset')).toBeInTheDocument();
+  });
+
+  it('Renders "Update market state" with marketId', () => {
+    const item = {
+      updateMarketState: {
+        changes: {
+          marketId: 'market123',
+        },
+      },
+    };
+    render(
+      <MemoryRouter>
+        <MockedProvider>
+          <BatchItem item={item} />
+        </MockedProvider>
+      </MemoryRouter>
+    );
+    expect(screen.getByText('Update market state')).toBeInTheDocument();
+    expect(screen.getByText('market123')).toBeInTheDocument();
+  });
+
+  it('Renders "Update market state" even if marketId is not set', () => {
+    const item = {
+      updateMarketState: {
+        changes: {
+          marketId: undefined,
+        },
+      },
+    };
+    render(
+      <MemoryRouter>
+        <MockedProvider>
+          <BatchItem item={item} />
+        </MockedProvider>
+      </MemoryRouter>
+    );
+    expect(screen.getByText('Update market state')).toBeInTheDocument();
+  });
+
+  it('Renders "Update network parameter" with parameter', () => {
+    const item = {
+      updateNetworkParameter: {
+        changes: {
+          key: 'parameter123',
+        },
+      },
+    };
+    render(
+      <MockedProvider>
+        <MemoryRouter>
+          <BatchItem item={item} />
+        </MemoryRouter>
+      </MockedProvider>
+    );
+    expect(screen.getByText('Update network parameter')).toBeInTheDocument();
+    expect(screen.getByText('parameter123')).toBeInTheDocument();
+  });
+
+  it('Renders "Update network parameter" even if parameter is not set', () => {
+    const item = {
+      updateNetworkParameter: {
+        changes: {
+          key: undefined,
+        },
+      },
+    };
+    render(<BatchItem item={item} />);
+    expect(screen.getByText('Update network parameter')).toBeInTheDocument();
+  });
+
+  it('Renders "Update referral program"', () => {
+    const item = {
+      updateReferralProgram: {},
+    };
+    render(<BatchItem item={item} />);
+    expect(screen.getByText('Update referral program')).toBeInTheDocument();
+  });
+
+  it('Renders "Update spot market" with marketId', () => {
+    const item = {
+      updateSpotMarket: {
+        marketId: 'market123',
+      },
+    };
+    render(
+      <MemoryRouter>
+        <MockedProvider>
+          <BatchItem item={item} />
+        </MockedProvider>
+      </MemoryRouter>
+    );
+    expect(screen.getByText('Update spot market')).toBeInTheDocument();
+    expect(screen.getByText('market123')).toBeInTheDocument();
+  });
+
+  it('Renders "Update spot market" even if marketId is not set', () => {
+    const item = {
+      updateSpotMarket: {
+        marketId: undefined,
+      },
+    };
+    render(
+      <MemoryRouter>
+        <MockedProvider>
+          <BatchItem item={item} />
+        </MockedProvider>
+      </MemoryRouter>
+    );
+    expect(screen.getByText('Update spot market')).toBeInTheDocument();
+  });
+  it('Renders "Update market" with marketId', () => {
+    const item = {
+      updateMarket: {
+        marketId: 'market123',
+      },
+    };
+    render(
+      <MemoryRouter>
+        <MockedProvider>
+          <BatchItem item={item} />
+        </MockedProvider>
+      </MemoryRouter>
+    );
+    expect(screen.getByText('Update market')).toBeInTheDocument();
+    expect(screen.getByText('market123')).toBeInTheDocument();
+  });
+
+  it('Renders "Update market" even if marketId is not set', () => {
+    const item = {
+      updateMarket: {
+        marketId: undefined,
+      },
+    };
+    render(
+      <MemoryRouter>
+        <MockedProvider>
+          <BatchItem item={item} />
+        </MockedProvider>
+      </MemoryRouter>
+    );
+    expect(screen.getByText('Update market')).toBeInTheDocument();
+  });
+
+  it('Renders "Update volume discount program"', () => {
+    const item = {
+      updateVolumeDiscountProgram: {},
+    };
+    render(<BatchItem item={item} />);
+    expect(
+      screen.getByText('Update volume discount program')
+    ).toBeInTheDocument();
+  });
+});

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

@@ -0,0 +1,87 @@
+import { t } from '@vegaprotocol/i18n';
+import { AssetLink, MarketLink, NetworkParameterLink } from '../../../links';
+import type { components } from '../../../../../types/explorer';
+import Hash from '../../../links/hash';
+
+type Item = components['schemas']['vegaBatchProposalTermsChange'];
+
+export interface BatchItemProps {
+  item: Item;
+}
+
+/**
+ * Produces a one line summary for an item in a batch proposal. Could
+ * easily be adapted to summarise individual proposals, but there is no
+ * place for that yet.
+ *
+ * Details (like IDs) should be shown and linked if available, but handled
+ * if not available. This is adequate as the ProposalSummary component contains
+ * a JSON viewer for the full proposal.
+ */
+export const BatchItem = ({ item }: BatchItemProps) => {
+  if (item.cancelTransfer) {
+    const transferId = item?.cancelTransfer?.changes?.transferId || false;
+    return (
+      <span>
+        {t('Cancel transfer')}&nbsp;
+        {transferId && (
+          <Hash className="ml-1" truncate={true} text={transferId} />
+        )}
+      </span>
+    );
+  } else if (item.newFreeform) {
+    return <span>{t('New freeform proposal')}</span>;
+  } else if (item.newMarket) {
+    return <span>{t('New market')}</span>;
+  } else if (item.newSpotMarket) {
+    return <span>{t('New spot market')}</span>;
+  } else if (item.newTransfer) {
+    return <span>{t('New transfer')}</span>;
+  } else if (item.updateAsset) {
+    const assetId = item?.updateAsset?.assetId || false;
+    return (
+      <span>
+        {t('Update asset')}
+        {assetId && <AssetLink className="ml-1" assetId={assetId} />}
+      </span>
+    );
+  } else if (item.updateMarket) {
+    const marketId = item?.updateMarket?.marketId || false;
+    return (
+      <span>
+        {t('Update market')}{' '}
+        {marketId && <MarketLink className="ml-1" id={marketId} />}
+      </span>
+    );
+  } else if (item.updateMarketState) {
+    const marketId = item?.updateMarketState?.changes?.marketId || false;
+    return (
+      <span>
+        {t('Update market state')}
+        {marketId && <MarketLink className="ml-1" id={marketId} />}
+      </span>
+    );
+  } else if (item.updateNetworkParameter) {
+    const param = item?.updateNetworkParameter?.changes?.key || false;
+    return (
+      <span>
+        {t('Update network parameter')}
+        {param && <NetworkParameterLink className="ml-1" parameter={param} />}
+      </span>
+    );
+  } else if (item.updateReferralProgram) {
+    return <span>{t('Update referral program')}</span>;
+  } else if (item.updateSpotMarket) {
+    const marketId = item?.updateSpotMarket?.marketId || '';
+    return (
+      <span>
+        {t('Update spot market')}
+        <MarketLink className="ml-1" id={marketId} />
+      </span>
+    );
+  } else if (item.updateVolumeDiscountProgram) {
+    return <span>{t('Update volume discount program')}</span>;
+  }
+
+  return <span>{t('Unknown proposal type')}</span>;
+};

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

@@ -14,16 +14,18 @@ export function format(date: string | undefined, def: string) {
   return new Date().toLocaleDateString() || def;
 }
 
-export function getDate(
+type Proposal = Extract<
-  data: ExplorerProposalStatusQuery | undefined,
+  ExplorerProposalStatusQuery['proposal'],
-  terms: Terms
+  { __typename?: 'Proposal' }
-): string {
+>;
+
+export function getDate(proposal: Proposal | undefined, terms: Terms): string {
   const DEFAULT = t('Unknown');
-  if (!data?.proposal?.state) {
+  if (!proposal?.state) {
     return DEFAULT;
   }
 
-  switch (data.proposal.state) {
+  switch (proposal.state) {
     case 'STATE_DECLINED':
       return `${t('Rejected on')}: ${format(terms.closingTimestamp, DEFAULT)}`;
     case 'STATE_ENACTED':
@@ -62,9 +64,11 @@ export const ProposalDate = ({ terms, id }: ProposalDateProps) => {
     },
   });
 
+  const proposal = data?.proposal as Proposal;
+
   return (
     <Lozenge className="font-sans text-xs float-right">
-      {getDate(data, terms)}
+      {getDate(proposal, terms)}
     </Lozenge>
   );
 };

apps/explorer/src/app/components/txs/details/proposal/proposal-status-icon.tsx

@@ -2,17 +2,8 @@ import { Icon, Tooltip } from '@vegaprotocol/ui-toolkit';
 import type { IconProps } from '@vegaprotocol/ui-toolkit';
 import { useExplorerProposalStatusQuery } from './__generated__/Proposal';
 import type { ExplorerProposalStatusQuery } from './__generated__/Proposal';
-import type * as Apollo from '@apollo/client';
-import type * as Types from '@vegaprotocol/types';
 import { t } from '@vegaprotocol/i18n';
 
-type ProposalQueryResult = Apollo.QueryResult<
-  ExplorerProposalStatusQuery,
-  Types.Exact<{
-    id: string;
-  }>
->;
-
 interface ProposalStatusIconProps {
   id: string;
 }
@@ -29,29 +20,38 @@ type IconAndLabel = {
  * @param data a data result from useExplorerProposalStatusQuery
  * @returns Icon name
  */
-export function getIconAndLabelForStatus(
+export function useIconAndLabelForStatus(id: string): IconAndLabel {
-  res: ProposalQueryResult
+  const { data, loading, error } = useExplorerProposalStatusQuery({
-): IconAndLabel {
+    variables: {
+      id,
+    },
+  });
+
+  const proposal = data?.proposal as Extract<
+    ExplorerProposalStatusQuery['proposal'],
+    { __typename?: 'Proposal' }
+  >;
+
   const DEFAULT: IconAndLabel = {
     icon: 'error',
     label: t('Proposal state unknown'),
   };
 
-  if (res.loading) {
+  if (loading) {
     return {
       icon: 'more',
       label: t('Loading data'),
     };
   }
 
-  if (!res?.data?.proposal || res.error) {
+  if (!data?.proposal || error) {
     return {
       icon: 'error',
-      label: res.error?.message || DEFAULT.label,
+      label: error?.message || DEFAULT.label,
     };
   }
 
-  switch (res.data.proposal.state) {
+  switch (proposal.state) {
     case 'STATE_DECLINED':
       return {
         icon: 'stop',
@@ -99,13 +99,7 @@ export function getIconAndLabelForStatus(
 /**
  */
 export const ProposalStatusIcon = ({ id }: ProposalStatusIconProps) => {
-  const { icon, label } = getIconAndLabelForStatus(
+  const { icon, label } = useIconAndLabelForStatus(id);
-    useExplorerProposalStatusQuery({
-      variables: {
-        id,
-      },
-    })
-  );
 
   return (
     <div className="float-left mr-3">

apps/explorer/src/app/components/txs/details/proposal/summary.tsx

@@ -1,6 +1,4 @@
-import type { ProposalTerms } from '../tx-proposal';
 import { useState } from 'react';
-import type { components } from '../../../../../types/explorer';
 import { JsonViewerDialog } from '../../../dialogs/json-viewer-dialog';
 import ProposalLink from '../../../links/proposal-link/proposal-link';
 import truncate from 'lodash/truncate';
@@ -9,7 +7,12 @@ import ReactMarkdown from 'react-markdown';
 import { ProposalDate } from './proposal-date';
 import { t } from '@vegaprotocol/i18n';
 
+import type { ProposalTerms } from '../tx-proposal';
+import type { components } from '../../../../../types/explorer';
+import { BatchItem } from './batch-item';
+
 type Rationale = components['schemas']['vegaProposalRationale'];
+type Batch = components['schemas']['v1BatchProposalSubmissionTerms']['changes'];
 
 type ProposalTermsDialog = {
   open: boolean;
@@ -21,6 +24,7 @@ interface ProposalSummaryProps {
   id: string;
   rationale?: Rationale;
   terms?: ProposalTerms;
+  batch?: Batch;
 }
 
 /**
@@ -31,6 +35,7 @@ export const ProposalSummary = ({
   id,
   rationale,
   terms,
+  batch,
 }: ProposalSummaryProps) => {
   const [dialog, setDialog] = useState<ProposalTermsDialog>({
     open: false,
@@ -59,7 +64,9 @@ export const ProposalSummary = ({
   return (
     <div className="w-auto max-w-lg border-2 border-solid border-vega-light-100 dark:border-vega-dark-200 p-5">
       {id && <ProposalStatusIcon id={id} />}
-      {rationale?.title && <h1 className="text-xl pb-1">{rationale.title}</h1>}
+      {rationale?.title && (
+        <h1 className="text-xl pb-1 break-all">{rationale.title}</h1>
+      )}
       {rationale?.description && (
         <div className="pt-2 text-sm leading-tight">
           <ReactMarkdown
@@ -72,6 +79,18 @@ export const ProposalSummary = ({
           </ReactMarkdown>
         </div>
       )}
+      {batch && (
+        <section className="pt-2 text-sm leading-tight my-3">
+          <h2 className="text-lg pb-1">{t('Changes')}</h2>
+          <ol>
+            {batch.map((change, index) => (
+              <li className="ml-4 list-decimal" key={`batch-${index}`}>
+                <BatchItem item={change} />
+              </li>
+            ))}
+          </ol>
+        </section>
+      )}
       <div className="pt-5">
         <button className="underline max-md:hidden mr-5" onClick={openDialog}>
           {t('View terms')}

apps/explorer/src/app/components/txs/details/proposal/tx-update-party-profile.tsx

@@ -0,0 +1,46 @@
+import { t } from '@vegaprotocol/i18n';
+import { TxDetailsShared } from '../shared/tx-details-shared';
+import { TableWithTbody } from '../../../table';
+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 { TableCell, TableRow } from '../../../table';
+
+type Update = components['schemas']['v1UpdatePartyProfile'];
+
+interface TxDetailsUpdatePartyProfileProps {
+  txData: BlockExplorerTransactionResult | undefined;
+  pubKey: string | undefined;
+  blockData: TendermintBlocksResponse | undefined;
+}
+
+/**
+ * Party profiles can be an alias and arbitrary key/values pairs.
+ * This component displays the alias, if any, but not the metadata. When there is
+ * some wider usage, we can decide how to render it. For now, it's available in the
+ * full TX details.
+ */
+export const TxDetailsUpdatePartyProfile = ({
+  txData,
+  pubKey,
+  blockData,
+}: TxDetailsUpdatePartyProfileProps) => {
+  if (!txData?.command.updatePartyProfile) {
+    return <>{t('Awaiting Block Explorer transaction details')}</>;
+  }
+
+  const update: Update = txData.command.updatePartyProfile;
+
+  return (
+    <TableWithTbody className="mb-8" allowWrap={true}>
+      <TxDetailsShared txData={txData} pubKey={pubKey} blockData={blockData} />
+      {update.alias && (
+        <TableRow modifier="bordered">
+          <TableCell>{t('New alias')}</TableCell>
+          <TableCell>{update.alias}</TableCell>
+        </TableRow>
+      )}
+    </TableWithTbody>
+  );
+};

apps/explorer/src/app/components/txs/details/transfer/Transfer.graphql

@@ -0,0 +1,18 @@
+query ExplorerTransferStatus($id: ID!) {
+  transfer(id: $id) {
+    transfer {
+      reference
+      timestamp
+      status
+      reason
+      fromAccountType
+      from
+      to
+      toAccountType
+      asset {
+        id
+      }
+      amount
+    }
+  }
+}

apps/explorer/src/app/components/txs/details/transfer/__generated__/Transfer.ts

@@ -0,0 +1,61 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type ExplorerTransferStatusQueryVariables = Types.Exact<{
+  id: Types.Scalars['ID'];
+}>;
+
+
+export type ExplorerTransferStatusQuery = { __typename?: 'Query', transfer?: { __typename?: 'TransferNode', transfer: { __typename?: 'Transfer', reference?: string | null, timestamp: any, status: Types.TransferStatus, reason?: string | null, fromAccountType: Types.AccountType, from: string, to: string, toAccountType: Types.AccountType, amount: string, asset?: { __typename?: 'Asset', id: string } | null } } | null };
+
+
+export const ExplorerTransferStatusDocument = gql`
+    query ExplorerTransferStatus($id: ID!) {
+  transfer(id: $id) {
+    transfer {
+      reference
+      timestamp
+      status
+      reason
+      fromAccountType
+      from
+      to
+      toAccountType
+      asset {
+        id
+      }
+      amount
+    }
+  }
+}
+    `;
+
+/**
+ * __useExplorerTransferStatusQuery__
+ *
+ * To run a query within a React component, call `useExplorerTransferStatusQuery` and pass it any options that fit your needs.
+ * When your component renders, `useExplorerTransferStatusQuery` 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 } = useExplorerTransferStatusQuery({
+ *   variables: {
+ *      id: // value for 'id'
+ *   },
+ * });
+ */
+export function useExplorerTransferStatusQuery(baseOptions: Apollo.QueryHookOptions<ExplorerTransferStatusQuery, ExplorerTransferStatusQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ExplorerTransferStatusQuery, ExplorerTransferStatusQueryVariables>(ExplorerTransferStatusDocument, options);
+      }
+export function useExplorerTransferStatusLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerTransferStatusQuery, ExplorerTransferStatusQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ExplorerTransferStatusQuery, ExplorerTransferStatusQueryVariables>(ExplorerTransferStatusDocument, options);
+        }
+export type ExplorerTransferStatusQueryHookResult = ReturnType<typeof useExplorerTransferStatusQuery>;
+export type ExplorerTransferStatusLazyQueryHookResult = ReturnType<typeof useExplorerTransferStatusLazyQuery>;
+export type ExplorerTransferStatusQueryResult = Apollo.QueryResult<ExplorerTransferStatusQuery, ExplorerTransferStatusQueryVariables>;

apps/explorer/src/app/components/txs/details/transfer/blocks/transfer-participants.tsx

@@ -41,6 +41,7 @@ const AccountType: Record<AccountTypes, string> = {
   ACCOUNT_TYPE_REWARD_RETURN_VOLATILITY: 'Reward Return Volatility',
   ACCOUNT_TYPE_REWARD_VALIDATOR_RANKING: 'Reward Validator Ranking',
   ACCOUNT_TYPE_PENDING_FEE_REFERRAL_REWARD: 'Pending Fee Referral Reward',
+  ACCOUNT_TYPE_ORDER_MARGIN: 'Order Margin',
 };
 
 interface TransferParticipantsProps {
@@ -110,7 +111,7 @@ export function TransferParticipants({
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 16 9"
-                className="fill-vega-light-100 dark:fill-black"
+                className="fill-white dark:fill-black"
               >
                 <path d="M0,0L8,9l8,-9Z" />
               </svg>
@@ -119,7 +120,7 @@ export function TransferParticipants({
               <svg
                 xmlns="http://www.w3.org/2000/svg"
                 viewBox="0 0 16 9"
-                className="fill-vega-light-100 dark:fill-vega-dark-200"
+                className="fill-vega-light-200 dark:fill-vega-dark-200"
               >
                 <path d="M0,0L8,9l8,-9Z" />
               </svg>

apps/explorer/src/app/components/txs/details/transfer/blocks/transfer-rewards.tsx

@@ -1,97 +1,223 @@
 import { t } from '@vegaprotocol/i18n';
 import { AssetLink, MarketLink } from '../../../../links';
-import { headerClasses, wrapperClasses } from '../transfer-details';
 import type { components } from '../../../../../../types/explorer';
 import type { Recurring } from '../transfer-details';
-import { DispatchMetricLabels } from '@vegaprotocol/types';
+import {
-
+  DispatchMetricLabels,
+  DistributionStrategy,
+} from '@vegaprotocol/types';
+import { VegaIcon, VegaIconNames } from '@vegaprotocol/ui-toolkit';
+import { formatNumber } from '@vegaprotocol/utils';
 export type Metric = components['schemas']['vegaDispatchMetric'];
 export type Strategy = components['schemas']['vegaDispatchStrategy'];
 
+export const wrapperClasses = 'border pv-2 w-full flex-auto basis-full';
+export const headerClasses =
+  'bg-solid bg-vega-light-150 dark:bg-vega-dark-150 text-center text-xl py-2 font-alpha calt';
+
 const metricLabels: Record<Metric, string> = {
   DISPATCH_METRIC_UNSPECIFIED: 'Unknown metric',
   ...DispatchMetricLabels,
 };
 
+// Maps the two (non-null) values of entityScope to the icon that represents it
+const entityScopeIcons: Record<
+  string,
+  typeof VegaIconNames[keyof typeof VegaIconNames]
+> = {
+  ENTITY_SCOPE_INDIVIDUALS: VegaIconNames.MAN,
+  ENTITY_SCOPE_TEAMS: VegaIconNames.TEAM,
+};
+
+const distributionStrategyLabel: Record<DistributionStrategy, string> = {
+  [DistributionStrategy.DISTRIBUTION_STRATEGY_PRO_RATA]: 'Pro Rata',
+  [DistributionStrategy.DISTRIBUTION_STRATEGY_RANK]: 'Ranked',
+};
+
 interface TransferRewardsProps {
   recurring: Recurring;
 }
 
 /**
- * Renderer for a transfer. These can vary quite
+ * Renders recurring transfers/game details in a way that is, perhaps, easy to understand
- * widely, essentially every field can be null.
  *
  * @param transfer A recurring transfer object
  */
 export function TransferRewards({ recurring }: TransferRewardsProps) {
-  const metric =
-    recurring?.dispatchStrategy?.metric || 'DISPATCH_METRIC_UNSPECIFIED';
-
   if (!recurring || !recurring.dispatchStrategy) {
     return null;
   }
 
+  // Destructure to make things a bit more readable
+  const {
+    entityScope,
+    individualScope,
+    teamScope,
+    distributionStrategy,
+    lockPeriod,
+    markets,
+    stakingRequirement,
+    windowLength,
+    notionalTimeWeightedAveragePositionRequirement,
+    rankTable,
+    nTopPerformers,
+  } = recurring.dispatchStrategy;
+
   return (
     <div className={wrapperClasses}>
-      <h2 className={headerClasses}>{t('Reward metrics')}</h2>
+      <h2 className={headerClasses}>{getRewardTitle(entityScope)}</h2>
-      <ul className="relative block rounded-lg py-6 text-center p-6">
+      <ul className="relative block rounded-lg py-6 text-left p-6">
-        {recurring.dispatchStrategy.assetForMetric ? (
+        {entityScope && entityScopeIcons[entityScope] ? (
           <li>
-            <strong>{t('Asset')}</strong>:{' '}
+            <strong>{t('Scope')}</strong>:{' '}
-            <AssetLink assetId={recurring.dispatchStrategy.assetForMetric} />
+            <VegaIcon name={entityScopeIcons[entityScope]} />
+            &nbsp;
+            {individualScope ? individualScopeLabels[individualScope] : null}
+            {getScopeLabel(entityScope, teamScope)}
           </li>
         ) : null}
+        {recurring.dispatchStrategy &&
+          recurring.dispatchStrategy.assetForMetric && (
             <li>
-          <strong>{t('Metric')}</strong>: {metricLabels[metric]}
+              <strong>{t('Asset for metric')}</strong>:{' '}
+              <AssetLink assetId={recurring.dispatchStrategy.assetForMetric} />
             </li>
-        {recurring.dispatchStrategy.markets &&
+          )}
-        recurring.dispatchStrategy.markets.length > 0 ? (
+        {recurring.dispatchStrategy.metric &&
+          metricLabels[recurring.dispatchStrategy.metric] && (
+            <li>
+              <strong>{t('Metric')}</strong>:{' '}
+              {metricLabels[recurring.dispatchStrategy.metric]}
+            </li>
+          )}
+        {lockPeriod && (
+          <li>
+            <strong>{t('Reward lock')}</strong>:&nbsp;
+            {recurring.dispatchStrategy.lockPeriod}{' '}
+            {recurring.dispatchStrategy.lockPeriod === '1'
+              ? t('epoch')
+              : t('epochs')}
+          </li>
+        )}
+
+        {markets && markets.length > 0 ? (
           <li>
             <strong>{t('Markets in scope')}</strong>:
-            <ul>
+            <ul className="inline-block ml-1">
-              {recurring.dispatchStrategy.markets.map((m) => (
+              {markets.map((m) => (
-                <li key={m}>
+                <li key={m} className="inline-block mr-2">
                   <MarketLink id={m} />
                 </li>
               ))}
             </ul>
           </li>
         ) : null}
+
+        {stakingRequirement && stakingRequirement !== '0' ? (
           <li>
-          <strong>{t('Factor')}</strong>: {recurring.factor}
+            <strong>{t('Staking requirement')}</strong>: {stakingRequirement}
           </li>
+        ) : null}
+
+        {windowLength && windowLength !== '0' ? (
+          <li>
+            <strong>{t('Window length')}</strong>:{' '}
+            {recurring.dispatchStrategy.windowLength}{' '}
+            {recurring.dispatchStrategy.windowLength === '1'
+              ? t('epoch')
+              : t('epochs')}
+          </li>
+        ) : null}
+
+        {notionalTimeWeightedAveragePositionRequirement &&
+        notionalTimeWeightedAveragePositionRequirement !== '' ? (
+          <li>
+            <strong>{t('Notional TWAP')}</strong>:{' '}
+            {notionalTimeWeightedAveragePositionRequirement}
+          </li>
+        ) : null}
+
+        {nTopPerformers && (
+          <li>
+            <strong>{t('Elligible team members:')}</strong> top{' '}
+            {`${formatNumber(Number(nTopPerformers) * 100, 0)}%`}
+          </li>
+        )}
+
+        {distributionStrategy &&
+          distributionStrategy !== 'DISTRIBUTION_STRATEGY_UNSPECIFIED' && (
+            <li>
+              <strong>{t('Distribution strategy')}</strong>:{' '}
+              {distributionStrategyLabel[distributionStrategy]}
+            </li>
+          )}
       </ul>
+      <div className="px-6 pt-1 pb-5">
+        {rankTable && rankTable.length > 0 ? (
+          <table className="border-collapse border border-gray-400 ">
+            <thead>
+              <tr>
+                <th className="border border-gray-300 bg-gray-300 px-3">
+                  <strong>{t('Start rank')}</strong>
+                </th>
+                <th className="border border-gray-300 bg-gray-300 px-3">
+                  <strong>{t('Share of reward pool')}</strong>
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {rankTable.map((row, i) => {
+                return (
+                  <tr key={`rank-${i}`}>
+                    <td className="border border-slate-300 text-center">
+                      {row.startRank}
+                    </td>
+                    <td className="border border-slate-300 text-center">
+                      {row.shareRatio}
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        ) : null}
+      </div>
     </div>
   );
 }
 
-interface TransferRecurringStrategyProps {
+export function getScopeLabel(
-  strategy: Strategy;
+  scope: components['schemas']['vegaEntityScope'] | undefined,
-}
+  teamScope: readonly string[] | undefined
-
+): string {
-/**
+  if (scope === 'ENTITY_SCOPE_TEAMS') {
- * Simple renderer for a dispatch strategy in a recurring transfer
+    if (teamScope && teamScope.length !== 0) {
- *
+      return ` ${teamScope.length} teams`;
- * @param strategy Dispatch strategy object
+    } else {
- */
+      return t('All teams');
-export function TransferRecurringStrategy({
+    }
-  strategy,
+  } else if (scope === 'ENTITY_SCOPE_INDIVIDUALS') {
-}: TransferRecurringStrategyProps) {
+    return t('Individuals');
-  if (!strategy) {
+  } else {
-    return null;
+    return '';
   }
-
-  return (
-    <>
-      {strategy.assetForMetric ? (
-        <li>
-          <strong>{t('Asset for metric')}</strong>:{' '}
-          <AssetLink assetId={strategy.assetForMetric} />
-        </li>
-      ) : null}
-      <li>
-        <strong>{t('Metric')}</strong>: {strategy.metric}
-      </li>
-    </>
-  );
 }
+export function getRewardTitle(
+  scope?: components['schemas']['vegaEntityScope']
+) {
+  if (scope === 'ENTITY_SCOPE_TEAMS') {
+    return t('Game');
+  }
+  return t('Reward metrics');
+}
+
+const individualScopeLabels: Record<
+  components['schemas']['vegaIndividualScope'],
+  string
+> = {
+  // Unspecified and All are not rendered
+  INDIVIDUAL_SCOPE_UNSPECIFIED: '',
+  INDIVIDUAL_SCOPE_ALL: '',
+  INDIVIDUAL_SCOPE_IN_TEAM: '(in team)',
+  INDIVIDUAL_SCOPE_NOT_IN_TEAM: '(not in team)',
+};

apps/explorer/src/app/components/txs/details/transfer/blocks/transfer-status.tsx

@@ -0,0 +1,100 @@
+import { t } from '@vegaprotocol/i18n';
+import { headerClasses, wrapperClasses } from '../transfer-details';
+import { Icon, Loader } from '@vegaprotocol/ui-toolkit';
+import type { IconName } from '@vegaprotocol/ui-toolkit';
+import type { ApolloError } from '@apollo/client';
+import { TransferStatus, TransferStatusMapping } from '@vegaprotocol/types';
+import { IconNames } from '@blueprintjs/icons';
+
+interface TransferStatusProps {
+  status: TransferStatus | undefined;
+  error: ApolloError | undefined;
+  loading: boolean;
+}
+
+/**
+ * Renderer for a transfer. These can vary quite
+ * widely, essentially every field can be null.
+ *
+ * @param transfer A recurring transfer object
+ */
+export function TransferStatusView({ status, loading }: TransferStatusProps) {
+  if (!status) {
+    status = TransferStatus.STATUS_PENDING;
+  }
+
+  return (
+    <div className={wrapperClasses}>
+      <h2 className={headerClasses}>{t('Status')}</h2>
+      <div className="relative block rounded-lg py-6 text-center p-6">
+        {loading ? (
+          <div className="leading-10 mt-12">
+            <Loader size={'small'} />
+          </div>
+        ) : (
+          <>
+            <p className="leading-10 my-2">
+              <TransferStatusIcon status={status} />
+            </p>
+            <p className="leading-10 my-2">{TransferStatusMapping[status]}</p>
+          </>
+        )}
+      </div>
+    </div>
+  );
+}
+
+interface TransferStatusIconProps {
+  status: TransferStatus;
+}
+
+export function TransferStatusIcon({ status }: TransferStatusIconProps) {
+  return (
+    <span title={TransferStatusMapping[status]}>
+      <Icon
+        name={getIconForStatus(status)}
+        className={getColourForStatus(status)}
+      />
+    </span>
+  );
+}
+
+/**
+ * Simple mapping from status to icon name
+ * @param status TransferStatus
+ * @returns IconName
+ */
+export function getIconForStatus(status: TransferStatus): IconName {
+  switch (status) {
+    case TransferStatus.STATUS_PENDING:
+      return IconNames.TIME;
+    case TransferStatus.STATUS_DONE:
+      return IconNames.TICK;
+    case TransferStatus.STATUS_REJECTED:
+      return IconNames.CROSS;
+    case TransferStatus.STATUS_CANCELLED:
+      return IconNames.CROSS;
+    default:
+      return IconNames.TIME;
+  }
+}
+
+/**
+ * Simple mapping from status to colour
+ * @param status TransferStatus
+ * @returns string Tailwind classname
+ */
+export function getColourForStatus(status: TransferStatus): string {
+  switch (status) {
+    case TransferStatus.STATUS_PENDING:
+      return 'text-yellow-500';
+    case TransferStatus.STATUS_DONE:
+      return 'text-green-500';
+    case TransferStatus.STATUS_REJECTED:
+      return 'text-red-500';
+    case TransferStatus.STATUS_CANCELLED:
+      return 'text-red-600';
+    default:
+      return 'text-yellow-500';
+  }
+}

apps/explorer/src/app/components/txs/details/transfer/transfer-details.tsx

@@ -2,12 +2,15 @@ import type { components } from '../../../../../types/explorer';
 import { TransferRepeat } from './blocks/transfer-repeat';
 import { TransferRewards } from './blocks/transfer-rewards';
 import { TransferParticipants } from './blocks/transfer-participants';
+import { useExplorerTransferStatusQuery } from './__generated__/Transfer';
+import { TransferStatusView } from './blocks/transfer-status';
+import { TransferStatus } from '@vegaprotocol/types';
 
 export type Recurring = components['schemas']['commandsv1RecurringTransfer'];
 export type Metric = components['schemas']['vegaDispatchMetric'];
 
 export const wrapperClasses =
-  'border border-vega-light-150 dark:border-vega-dark-200 rounded-md pv-2 mb-5 w-full sm:w-1/4 min-w-[200px] ';
+  'border border-vega-light-150 dark:border-vega-dark-200 pv-2 w-full sm:w-1/3 basis-1/3';
 export const headerClasses =
   'bg-solid bg-vega-light-150 dark:bg-vega-dark-150 border-vega-light-150 text-center text-xl py-2 font-alpha calt';
 
@@ -16,6 +19,7 @@ export type Transfer = components['schemas']['commandsv1Transfer'];
 interface TransferDetailsProps {
   transfer: Transfer;
   from: string;
+  id: string;
 }
 
 /**
@@ -24,13 +28,24 @@ interface TransferDetailsProps {
  *
  * @param transfer A recurring transfer object
  */
-export function TransferDetails({ transfer, from }: TransferDetailsProps) {
+export function TransferDetails({ transfer, from, id }: TransferDetailsProps) {
   const recurring = transfer.recurring;
 
+  // Currently all this is passed in to TransferStatus, but the extra details
+  // may be useful in the future.
+  const { data, error, loading } = useExplorerTransferStatusQuery({
+    variables: { id },
+  });
+
+  const status = error
+    ? TransferStatus.STATUS_REJECTED
+    : data?.transfer?.transfer.status;
+
   return (
-    <div className="flex gap-5 flex-wrap">
+    <div className="flex flex-wrap">
       <TransferParticipants from={from} transfer={transfer} />
       {recurring ? <TransferRepeat recurring={transfer.recurring} /> : null}
+      <TransferStatusView status={status} error={error} loading={loading} />
       {recurring && recurring.dispatchStrategy ? (
         <TransferRewards recurring={transfer.recurring} />
       ) : null}

apps/explorer/src/app/components/txs/details/transfer/transfer-rewards.spec.tsx

@@ -0,0 +1,172 @@
+import {
+  getScopeLabel,
+  getRewardTitle,
+  TransferRewards,
+} from './blocks/transfer-rewards';
+import { render } from '@testing-library/react';
+import type { components } from '../../../../../types/explorer';
+import type { Recurring } from './transfer-details';
+import {
+  DispatchMetric,
+  DistributionStrategy,
+  EntityScope,
+  IndividualScope,
+} from '@vegaprotocol/types';
+import { MemoryRouter } from 'react-router-dom';
+import { MockedProvider } from '@apollo/client/testing';
+
+describe('getScopeLabel', () => {
+  it('should return the correct label for ENTITY_SCOPE_TEAMS with teamScope', () => {
+    const scope = 'ENTITY_SCOPE_TEAMS';
+    const teamScope = ['team1', 'team2', 'team3'];
+    const expectedLabel = ' 3 teams';
+
+    const result = getScopeLabel(scope, teamScope);
+
+    expect(result).toEqual(expectedLabel);
+  });
+
+  it('should return the correct label for ENTITY_SCOPE_TEAMS without teamScope', () => {
+    const scope = 'ENTITY_SCOPE_TEAMS';
+    const teamScope = undefined;
+    const expectedLabel = 'All teams';
+
+    const result = getScopeLabel(scope, teamScope);
+
+    expect(result).toEqual(expectedLabel);
+  });
+
+  it('should return the correct label for ENTITY_SCOPE_INDIVIDUALS', () => {
+    const scope = 'ENTITY_SCOPE_INDIVIDUALS';
+    const teamScope = undefined;
+    const expectedLabel = 'Individuals';
+
+    const result = getScopeLabel(scope, teamScope);
+
+    expect(result).toEqual(expectedLabel);
+  });
+
+  it('should return an empty string for unknown scope', () => {
+    const scope = 'UNKNOWN_SCOPE';
+    const teamScope = undefined;
+    const expectedLabel = '';
+
+    const result = getScopeLabel(
+      scope as unknown as components['schemas']['vegaEntityScope'],
+      teamScope
+    );
+
+    expect(result).toEqual(expectedLabel);
+  });
+});
+
+describe('getRewardTitle', () => {
+  it('should return the correct title for ENTITY_SCOPE_TEAMS', () => {
+    const scope = 'ENTITY_SCOPE_TEAMS';
+    const expectedTitle = 'Game';
+
+    const result = getRewardTitle(scope);
+
+    expect(result).toEqual(expectedTitle);
+  });
+
+  it('should return the correct title for other scopes', () => {
+    const scope = 'ENTITY_SCOPE_INDIVIDUALS';
+    const expectedTitle = 'Reward metrics';
+
+    const result = getRewardTitle(scope);
+
+    expect(result).toEqual(expectedTitle);
+  });
+});
+
+describe('TransferRewards', () => {
+  it('should render nothing if recurring dispatchStrategy is not provided', () => {
+    const { container } = render(
+      <TransferRewards recurring={null as unknown as Recurring} />
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should render nothing if recurring.dispatchStrategy is not provided', () => {
+    const { container } = render(
+      <TransferRewards recurring={{} as unknown as Recurring} />
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  it('should render the reward details correctly', () => {
+    const recurring = {
+      dispatchStrategy: {
+        metric: DispatchMetric.DISPATCH_METRIC_AVERAGE_POSITION,
+        assetForMetric: '123',
+        entityScope: EntityScope.ENTITY_SCOPE_TEAMS,
+        individualScope: IndividualScope.INDIVIDUAL_SCOPE_IN_TEAM,
+        teamScope: [],
+        distributionStrategy:
+          DistributionStrategy.DISTRIBUTION_STRATEGY_PRO_RATA,
+        lockPeriod: 'lockPeriod',
+        markets: ['market1', 'market2'],
+        stakingRequirement: '1',
+        windowLength: 'windowLength',
+        notionalTimeWeightedAveragePositionRequirement:
+          'notionalTimeWeightedAveragePositionRequirement',
+        rankTable: [
+          { startRank: 1, shareRatio: 0.2 },
+          { startRank: 2, shareRatio: 0.3 },
+        ],
+        nTopPerformers: 'nTopPerformers',
+      },
+    };
+
+    const { getByText } = render(
+      <MemoryRouter>
+        <MockedProvider>
+          <TransferRewards recurring={recurring} />
+        </MockedProvider>
+      </MemoryRouter>
+    );
+
+    expect(getByText('Game')).toBeInTheDocument();
+    expect(getByText('Scope')).toBeInTheDocument();
+    expect(getByText('Asset for metric')).toBeInTheDocument();
+    expect(getByText('Metric')).toBeInTheDocument();
+    expect(getByText('Reward lock')).toBeInTheDocument();
+    expect(getByText('Markets in scope')).toBeInTheDocument();
+    expect(getByText('Staking requirement')).toBeInTheDocument();
+    expect(getByText('Window length')).toBeInTheDocument();
+    expect(getByText('Notional TWAP')).toBeInTheDocument();
+    expect(getByText('Elligible team members:')).toBeInTheDocument();
+    expect(getByText('Distribution strategy')).toBeInTheDocument();
+    expect(getByText('Start rank')).toBeInTheDocument();
+    expect(getByText('Share of reward pool')).toBeInTheDocument();
+  });
+
+  it('should not render a rank table if recurring.dispatchStrategy.rankTable is not provided', () => {
+    const recurring = {
+      dispatchStrategy: {
+        entityScope: EntityScope.ENTITY_SCOPE_INDIVIDUALS,
+        individualScope: IndividualScope.INDIVIDUAL_SCOPE_ALL,
+        teamScope: ['team1', 'team2', 'team3'],
+        distributionStrategy:
+          DistributionStrategy.DISTRIBUTION_STRATEGY_PRO_RATA,
+        lockPeriod: 'lockPeriod',
+        markets: ['market1', 'market2'],
+        stakingRequirement: 'stakingRequirement',
+        windowLength: 'windowLength',
+        notionalTimeWeightedAveragePositionRequirement:
+          'notionalTimeWeightedAveragePositionRequirement',
+        nTopPerformers: 'nTopPerformers',
+      },
+    };
+
+    const { container } = render(
+      <MemoryRouter>
+        <MockedProvider>
+          <TransferRewards recurring={recurring} />
+        </MockedProvider>
+      </MemoryRouter>
+    );
+    expect(container.querySelector('table')).toBeNull();
+  });
+});

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

@@ -0,0 +1,75 @@
+import type { BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
+import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
+import { sharedHeaderProps, TxDetailsShared } from './shared/tx-details-shared';
+import { TableCell, TableRow, TableWithTbody } from '../../table';
+import type { components } from '../../../../types/explorer';
+import { txSignatureToDeterministicId } from '../lib/deterministic-ids';
+import { ProposalSummary } from './proposal/summary';
+import Hash from '../../links/hash';
+import { t } from '@vegaprotocol/i18n';
+
+export type Proposal = components['schemas']['v1BatchProposalSubmission'];
+export type ProposalTerms = components['schemas']['vegaProposalTerms'];
+
+interface TxBatchProposalProps {
+  txData: BlockExplorerTransactionResult | undefined;
+  pubKey: string | undefined;
+  blockData: TendermintBlocksResponse | undefined;
+}
+
+/**
+ *
+ */
+export const TxBatchProposal = ({
+  txData,
+  pubKey,
+  blockData,
+}: TxBatchProposalProps) => {
+  if (!txData || !txData.command.batchProposalSubmission) {
+    return <>{t('Awaiting Block Explorer transaction details')}</>;
+  }
+  let deterministicId = '';
+
+  const proposal: Proposal = txData.command.batchProposalSubmission;
+  const sig = txData?.signature?.value;
+  if (sig) {
+    deterministicId = txSignatureToDeterministicId(sig);
+  }
+
+  return (
+    <>
+      <TableWithTbody className="mb-8" allowWrap={true}>
+        <TableRow modifier="bordered">
+          <TableCell {...sharedHeaderProps}>{t('Type')}</TableCell>
+          <TableCell>{t('Batch proposal')}</TableCell>
+        </TableRow>
+        <TxDetailsShared
+          txData={txData}
+          pubKey={pubKey}
+          blockData={blockData}
+          hideTypeRow={true}
+        />
+        <TableRow modifier="bordered">
+          <TableCell>{t('Batch size')}</TableCell>
+          <TableCell>
+            {proposal.terms?.changes?.length || t('No changes')}
+          </TableCell>
+        </TableRow>
+        <TableRow modifier="bordered">
+          <TableCell>{t('Proposal ID')}</TableCell>
+          <TableCell>
+            <Hash text={deterministicId} />
+          </TableCell>
+        </TableRow>
+      </TableWithTbody>
+      {proposal && (
+        <ProposalSummary
+          id={deterministicId}
+          rationale={proposal?.rationale}
+          terms={proposal.terms}
+          batch={proposal.terms?.changes}
+        />
+      )}
+    </>
+  );
+};

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

@@ -32,6 +32,9 @@ import { TxDetailsCreateReferralSet } from './tx-create-referral-set';
 import { TxDetailsApplyReferralCode } from './tx-apply-referral-code';
 import { TxDetailsUpdateReferralSet } from './tx-update-referral-set';
 import { TxDetailsJoinTeam } from './tx-join-team';
+import { TxDetailsUpdateMarginMode } from './tx-update-margin-mode';
+import { TxBatchProposal } from './tx-batch-proposal';
+import { TxDetailsUpdatePartyProfile } from './proposal/tx-update-party-profile';
 
 interface TxDetailsWrapperProps {
   txData: BlockExplorerTransactionResult | undefined;
@@ -133,6 +136,12 @@ function getTransactionComponent(txData?: BlockExplorerTransactionResult) {
       return TxDetailsApplyReferralCode;
     case 'Join Team':
       return TxDetailsJoinTeam;
+    case 'Update Margin Mode':
+      return TxDetailsUpdateMarginMode;
+    case 'Batch Proposal':
+      return TxBatchProposal;
+    case 'Update Party Profile':
+      return TxDetailsUpdatePartyProfile;
     default:
       return TxDetailsGeneric;
   }

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

@@ -5,9 +5,9 @@ import { TxDetailsShared } from './shared/tx-details-shared';
 import { TableCell, TableRow, TableWithTbody } from '../../table';
 import type { components } from '../../../../types/explorer';
 import {
-  EthExplorerLink,
+  ExternalExplorerLink,
   EthExplorerLinkTypes,
-} from '../../links/eth-explorer-link/eth-explorer-link';
+} from '../../links/external-explorer-link/external-explorer-link';
 import { BlockLink } from '../../links';
 
 type EthKeyRotate = components['schemas']['v1EthereumKeyRotateSubmission'];
@@ -46,7 +46,7 @@ export const TxDetailsEthKeyRotate = ({
         <TableRow modifier="bordered">
           <TableCell>{t('Old Address')}</TableCell>
           <TableCell>
-            <EthExplorerLink
+            <ExternalExplorerLink
               type={EthExplorerLinkTypes.address}
               id={k.currentAddress}
             />
@@ -57,7 +57,7 @@ export const TxDetailsEthKeyRotate = ({
         <TableRow modifier="bordered">
           <TableCell>{t('New Address')}</TableCell>
           <TableCell>
-            <EthExplorerLink
+            <ExternalExplorerLink
               type={EthExplorerLinkTypes.address}
               id={k.newAddress}
             />
@@ -68,7 +68,7 @@ export const TxDetailsEthKeyRotate = ({
         <TableRow modifier="bordered">
           <TableCell>{t('Submitter address')}</TableCell>
           <TableCell>
-            <EthExplorerLink
+            <ExternalExplorerLink
               type={EthExplorerLinkTypes.address}
               id={k.submitterAddress}
             />

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

@@ -6,9 +6,9 @@ import { TableRow, TableCell, TableWithTbody } from '../../table';
 
 import type { components } from '../../../../types/explorer';
 import {
-  EthExplorerLink,
+  ExternalExplorerLink,
   EthExplorerLinkTypes,
-} from '../../links/eth-explorer-link/eth-explorer-link';
+} from '../../links/external-explorer-link/external-explorer-link';
 import { NodeLink } from '../../links';
 
 type Command = components['schemas']['v1IssueSignatures'];
@@ -57,7 +57,7 @@ export const TxDetailsIssueSignatures = ({
         <TableRow modifier="bordered">
           <TableCell>{t('ETH key')}</TableCell>
           <TableCell>
-            <EthExplorerLink
+            <ExternalExplorerLink
               id={cmd.submitter}
               type={EthExplorerLinkTypes.address}
             />

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

@@ -6,9 +6,9 @@ import { TableRow, TableCell, TableWithTbody } from '../../table';
 
 import type { components } from '../../../../types/explorer';
 import {
-  EthExplorerLink,
+  ExternalExplorerLink,
   EthExplorerLinkTypes,
-} from '../../links/eth-explorer-link/eth-explorer-link';
+} from '../../links/external-explorer-link/external-explorer-link';
 import { PartyLink } from '../../links';
 import Hash from '../../links/hash';
 import { ExternalLink } from '@vegaprotocol/ui-toolkit';
@@ -72,7 +72,7 @@ export const TxDetailsNodeAnnounce = ({
         <TableRow modifier="bordered">
           <TableCell>{t('Ethereum Address')}</TableCell>
           <TableCell>
-            <EthExplorerLink
+            <ExternalExplorerLink
               type={EthExplorerLinkTypes.address}
               id={cmd.ethereumAddress}
             />

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

@@ -8,9 +8,9 @@ import { useExplorerNodeVoteQuery } from './__generated__/Node-vote';
 import { PartyLink } from '../../links';
 import { Time } from '../../time';
 import {
-  EthExplorerLink,
+  ExternalExplorerLink,
   EthExplorerLinkTypes,
-} from '../../links/eth-explorer-link/eth-explorer-link';
+} from '../../links/external-explorer-link/external-explorer-link';
 
 interface TxDetailsNodeVoteProps {
   txData: BlockExplorerTransactionResult | undefined;
@@ -143,7 +143,7 @@ export function TxHash({ hash }: TxDetailsEthTxHashProps) {
     <TableRow modifier="bordered">
       <TableCell>Ethereum TX:</TableCell>
       <TableCell>
-        <EthExplorerLink id={hash} type={EthExplorerLinkTypes.tx} />
+        <ExternalExplorerLink id={hash} type={EthExplorerLinkTypes.tx} />
       </TableCell>
     </TableRow>
   );

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

@@ -12,6 +12,8 @@ import { ProposalSignatureBundleNewAsset } from './proposal/signature-bundle-new
 import { ProposalSignatureBundleUpdateAsset } from './proposal/signature-bundle-update';
 import { MarketLink } from '../../links';
 import { formatNumber } from '@vegaprotocol/utils';
+import { TransferDetails } from './transfer/transfer-details';
+import { proposalToTransfer } from '../lib/proposal-to-transfer';
 
 export type Proposal = components['schemas']['v1ProposalSubmission'];
 export type ProposalTerms = components['schemas']['vegaProposalTerms'];
@@ -104,6 +106,12 @@ export const TxProposal = ({ txData, pubKey, blockData }: TxProposalProps) => {
     ? ProposalSignatureBundleNewAsset
     : ProposalSignatureBundleUpdateAsset;
 
+  let transfer, from;
+  if (proposal.terms?.newTransfer?.changes) {
+    transfer = proposalToTransfer(proposal.terms?.newTransfer.changes);
+    from = proposal.terms.newTransfer.changes.source;
+  }
+
   return (
     <>
       <TableWithTbody className="mb-8" allowWrap={true}>
@@ -149,14 +157,26 @@ export const TxProposal = ({ txData, pubKey, blockData }: TxProposalProps) => {
           </>
         ) : null}
       </TableWithTbody>
+
       <ProposalSummary
         id={deterministicId}
         rationale={proposal.rationale}
         terms={proposal?.terms}
       />
+
       {proposalRequiresSignatureBundle(proposal) && (
         <SignatureBundleComponent id={deterministicId} tx={tx} />
       )}
+
+      {transfer && (
+        <div className="mt-8">
+          <TransferDetails
+            transfer={transfer}
+            from={from || ''}
+            id={deterministicId}
+          />
+        </div>
+      )}
     </>
   );
 };

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

@@ -13,6 +13,7 @@ import {
   SPECIAL_CASE_NETWORK_ID,
 } from '../../links/party-link/party-link';
 import { txSignatureToDeterministicId } from '../lib/deterministic-ids';
+import Hash from '../../links/hash';
 
 type Transfer = components['schemas']['commandsv1Transfer'];
 
@@ -60,7 +61,7 @@ export const TxDetailsTransfer = ({
   }
 
   const from = txData.submitter;
-
+  const id = txSignatureToDeterministicId(txData.signature.value);
   return (
     <>
       <TableWithTbody className="mb-8" allowWrap={true}>
@@ -71,7 +72,7 @@ export const TxDetailsTransfer = ({
         <TableRow modifier="bordered" data-testid="id">
           <TableCell {...sharedHeaderProps}>{t('Transfer ID')}</TableCell>
           <TableCell>
-            {txSignatureToDeterministicId(txData.signature.value)}
+            <Hash text={id} />
           </TableCell>
         </TableRow>
         <TxDetailsShared
@@ -105,7 +106,7 @@ export const TxDetailsTransfer = ({
           </TableRow>
         ) : null}
       </TableWithTbody>
-      <TransferDetails from={from} transfer={transfer} />
+      <TransferDetails from={from} transfer={transfer} id={id} />
     </>
   );
 };

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

@@ -8,7 +8,7 @@ import GovernanceAssetBalance from '../../asset-balance/governance-asset-balance
 import type { components } from '../../../../types/explorer';
 
 export const methodText: Record<
-  components['schemas']['UndelegateSubmissionMethod'],
+  components['schemas']['v1UndelegateSubmissionMethod'],
   string
 > = {
   METHOD_NOW: 'Immediate',

apps/explorer/src/app/components/txs/details/tx-update-margin-mode.tsx

@@ -0,0 +1,60 @@
+import { t } from '@vegaprotocol/i18n';
+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 { MarketLink } from '../../links';
+
+interface TxDetailsUpdateMarginModeProps {
+  txData: BlockExplorerTransactionResult | undefined;
+  pubKey: string | undefined;
+  blockData: TendermintBlocksResponse | undefined;
+}
+
+type Mode = components['schemas']['UpdateMarginModeMode'];
+
+const MarginModeLabels: Record<Mode, string> = {
+  MODE_CROSS_MARGIN: t('Cross margin'),
+  MODE_ISOLATED_MARGIN: t('Isolated margin'),
+  MODE_UNSPECIFIED: t('Unspecified'),
+};
+
+export const TxDetailsUpdateMarginMode = ({
+  txData,
+  pubKey,
+  blockData,
+}: TxDetailsUpdateMarginModeProps) => {
+  if (!txData || !txData.command.updateMarginMode) {
+    return <>{t('Awaiting Block Explorer transaction details')}</>;
+  }
+
+  const u: components['schemas']['v1UpdateMarginMode'] =
+    txData.command.updateMarginMode;
+
+  return (
+    <TableWithTbody className="mb-8" allowWrap={true}>
+      <TxDetailsShared txData={txData} pubKey={pubKey} blockData={blockData} />
+      {u.marketId && (
+        <TableRow modifier="bordered">
+          <TableCell>{t('Market ID')}</TableCell>
+          <TableCell>
+            <MarketLink id={u.marketId} />
+          </TableCell>
+        </TableRow>
+      )}
+      {u.mode && (
+        <TableRow modifier="bordered">
+          <TableCell>{t('New margin mode')}</TableCell>
+          <TableCell>{MarginModeLabels[u.mode]}</TableCell>
+        </TableRow>
+      )}
+      {u.marginFactor && (
+        <TableRow modifier="bordered">
+          <TableCell>{t('Margin factor')}</TableCell>
+          <TableCell>{u.marginFactor}</TableCell>
+        </TableRow>
+      )}
+    </TableWithTbody>
+  );
+};

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

@@ -4,9 +4,9 @@ import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint
 import { TxDetailsShared } from './shared/tx-details-shared';
 import { TableCell, TableRow, TableWithTbody } from '../../table';
 import {
-  EthExplorerLink,
+  ExternalExplorerLink,
   EthExplorerLinkTypes,
-} from '../../links/eth-explorer-link/eth-explorer-link';
+} from '../../links/external-explorer-link/external-explorer-link';
 import { txSignatureToDeterministicId } from '../lib/deterministic-ids';
 import AssetBalance from '../../asset-balance/asset-balance';
 import { useScrollToLocation } from '../../../hooks/scroll-to-location';
@@ -57,7 +57,7 @@ export const TxDetailsWithdrawSubmission = ({
         <TableRow modifier="bordered">
           <TableCell>{t('Recipient')}</TableCell>
           <TableCell>
-            <EthExplorerLink
+            <ExternalExplorerLink
               id={w.ext.erc20.receiverAddress}
               type={EthExplorerLinkTypes.address}
             />

apps/explorer/src/app/components/txs/lib/proposal-to-transfer.ts

@@ -0,0 +1,29 @@
+import type { components } from '../../../../types/explorer';
+
+type TransferProposal = components['schemas']['vegaNewTransferConfiguration'];
+type ActualTransfer = components['schemas']['commandsv1Transfer'];
+
+/**
+ * Converts a governance proposal for a transfer in to a transfer command that the
+ * TransferDetails component can then render. The types are very similar, but do not
+ * map precisely to each other due to some missing fields and some different field
+ * names.
+ *
+ * @param proposal Governance proposal for a transfer
+ * @returns transfer a Transfer object as if it had been submitted
+ */
+export function proposalToTransfer(proposal: TransferProposal): ActualTransfer {
+  return {
+    amount: proposal.amount,
+    asset: proposal.asset,
+    // On a transfer, 'from' is determined by the submitter, so there is no 'from' field
+    // fromAccountType does exist and is just named differently on the proposal
+    fromAccountType: proposal.sourceType,
+    oneOff: proposal.oneOff,
+    recurring: proposal.recurring,
+    // There is no reference applied on governance initiated transfers
+    reference: '',
+    to: proposal.destination,
+    toAccountType: proposal.destinationType,
+  };
+}

apps/explorer/src/app/components/txs/tx-filter.tsx

@@ -20,6 +20,7 @@ export type FilterOption =
   | 'Amend Order'
   | 'Apply Referral Code'
   | 'Batch Market Instructions'
+  | 'Batch Proposal'
   | 'Cancel LiquidityProvision Order'
   | 'Cancel Order'
   | 'Cancel Transfer Funds'
@@ -43,7 +44,9 @@ export type FilterOption =
   | 'Submit Order'
   | 'Transfer Funds'
   | 'Undelegate'
+  | 'Update Party Profile'
   | 'Update Referral Set'
+  | 'Update Margin Mode'
   | 'Validator Heartbeat'
   | 'Vote on Proposal'
   | 'Withdraw';
@@ -59,17 +62,25 @@ export const filterOptions: Record<string, FilterOption[]> = {
     'Stop Orders Submission',
     'Stop Orders Cancellation',
     'Submit Order',
+    'Update Margin Mode',
   ],
   'Transfers and Withdrawals': [
     'Transfer Funds',
     'Cancel Transfer Funds',
     'Withdraw',
   ],
-  Governance: ['Delegate', 'Undelegate', 'Vote on Proposal', 'Proposal'],
+  Governance: [
+    'Batch Proposal',
+    'Delegate',
+    'Undelegate',
+    'Vote on Proposal',
+    'Proposal',
+  ],
   Referrals: [
     'Apply Referral Code',
     'Create Referral Set',
     'Join Team',
+    'Update Party Profile',
     'Update Referral Set',
   ],
   'External Data': ['Chain Event', 'Submit Oracle Data'],

apps/explorer/src/app/components/txs/tx-list-navigation.spec.tsx

@@ -61,53 +61,4 @@ describe('TxsListNavigation', () => {
 
     expect(nextPageMock).toHaveBeenCalledTimes(1);
   });
-
-  it('disables "Older" button if hasMoreTxs is false', () => {
-    render(
-      <TxsListNavigation
-        refreshTxs={NOOP}
-        nextPage={NOOP}
-        previousPage={NOOP}
-        hasMoreTxs={false}
-        hasPreviousPage={false}
-      >
-        <span></span>
-      </TxsListNavigation>
-    );
-
-    expect(screen.getByText('Older')).toBeDisabled();
-  });
-
-  it('disables "Newer" button if hasPreviousPage is false', () => {
-    render(
-      <TxsListNavigation
-        refreshTxs={NOOP}
-        nextPage={NOOP}
-        previousPage={NOOP}
-        hasMoreTxs={true}
-        hasPreviousPage={false}
-      >
-        <span></span>
-      </TxsListNavigation>
-    );
-
-    expect(screen.getByText('Newer')).toBeDisabled();
-  });
-
-  it('disables both buttons when more and previous are false', () => {
-    render(
-      <TxsListNavigation
-        refreshTxs={NOOP}
-        nextPage={NOOP}
-        previousPage={NOOP}
-        hasMoreTxs={false}
-        hasPreviousPage={false}
-      >
-        <span></span>
-      </TxsListNavigation>
-    );
-
-    expect(screen.getByText('Newer')).toBeDisabled();
-    expect(screen.getByText('Older')).toBeDisabled();
-  });
 });

apps/explorer/src/app/components/txs/tx-list-navigation.tsx

@@ -10,7 +10,8 @@ export interface TxListNavigationProps {
   loading?: boolean;
   hasPreviousPage: boolean;
   hasMoreTxs: boolean;
-  children: React.ReactNode;
+  children?: React.ReactNode;
+  isEmpty?: boolean;
 }
 /**
  * Displays a list of transactions with filters and controls to navigate through the list.
@@ -21,9 +22,8 @@ export const TxsListNavigation = ({
   refreshTxs,
   nextPage,
   previousPage,
-  hasMoreTxs,
-  hasPreviousPage,
   children,
+  isEmpty,
   loading = false,
 }: TxListNavigationProps) => {
   return (
@@ -35,7 +35,6 @@ export const TxsListNavigation = ({
           <Button
             className="mr-2"
             size="xs"
-            disabled={!hasPreviousPage || loading}
             onClick={() => {
               previousPage();
             }}
@@ -44,7 +43,7 @@ export const TxsListNavigation = ({
           </Button>
           <Button
             size="xs"
-            disabled={!hasMoreTxs}
+            disabled={isEmpty}
             onClick={() => {
               nextPage();
             }}

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

@@ -1,6 +1,7 @@
 import { t } from '@vegaprotocol/i18n';
 import type { components } from '../../../types/explorer';
 import { VoteIcon } from '../vote-icon/vote-icon';
+import { ExternalChainIcon } from '../links/external-explorer-link/external-chain-icon';
 
 interface TxOrderTypeProps {
   orderType: string;
@@ -188,6 +189,9 @@ export function getLabelForChainEvent(
     }
     return t('Multisig update');
   } else if (chainEvent.contractCall) {
+    if (chainEvent.contractCall.error) {
+      return t('Call error');
+    }
     return t('Contract call');
   }
   return t('Chain Event');
@@ -257,6 +261,11 @@ export const TxOrderType = ({ orderType, command }: TxOrderTypeProps) => {
       data-testid="tx-type"
       className={`text-sm rounded-md leading-tight px-2 inline-block whitespace-nowrap ${colours}`}
     >
+      {command?.chainEvent && (
+        <ExternalChainIcon
+          chainId={command?.chainEvent?.contractCall?.sourceChainId}
+        />
+      )}
       {type}
     </div>
   );

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

@@ -14,7 +14,6 @@ export const ENV = {
     blockExplorerUrl: windowOrDefault('NX_BLOCK_EXPLORER'),
     tendermintUrl: windowOrDefault('NX_TENDERMINT_URL'),
     tendermintWebsocketUrl: windowOrDefault('NX_TENDERMINT_WEBSOCKET_URL'),
-    ethExplorerUrl: windowOrDefault('NX_ETHERSCAN_URL'),
     governanceUrl: windowOrDefault('NX_VEGA_GOVERNANCE_URL'),
     vegaRepoUrl: windowOrDefault('NX_VEGA_REPO_URL'),
   },

apps/explorer/src/app/hooks/get-txs-data-url.ts

@@ -43,7 +43,7 @@ export const getTxsDataUrl = (params: IGetTxsDataUrl) => {
     url.searchParams.append('first', count);
     url.searchParams.append('after', params.after);
   } else {
-    url.searchParams.append('last', count);
+    url.searchParams.append('first', count);
   }
 
   // Hacky fix for param as array

apps/explorer/src/app/hooks/get-txs-data-urls.spec.ts

@@ -6,7 +6,7 @@ describe('getTxsDataUrl', () => {
       count: 10,
       baseUrl: 'https://example.com/transactions',
     };
-    const expectedUrl = 'https://example.com/transactions?last=10';
+    const expectedUrl = 'https://example.com/transactions?first=10';
 
     expect(getTxsDataUrl(params)).toEqual(expectedUrl);
   });
@@ -41,7 +41,7 @@ describe('getTxsDataUrl', () => {
       baseUrl: 'https://example.com/transactions',
     };
     const expectedUrl =
-      'https://example.com/transactions?last=10&filters[cmd.type]=Made%20Up%20Transaction&filters[tx.submitter]=1234';
+      'https://example.com/transactions?first=10&filters[cmd.type]=Made%20Up%20Transaction&filters[tx.submitter]=1234';
 
     expect(getTxsDataUrl(params)).toEqual(expectedUrl);
   });

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

@@ -31,14 +31,14 @@ export interface IUseTxsData {
 }
 
 export const useTxsData = ({
-  count = 25,
+  count = 50,
   before,
   after,
   filters,
   party,
 }: IUseTxsData) => {
   const [, setSearchParams] = useSearchParams();
-  let hasMoreTxs = true;
+  let hasMoreTxs = false;
   let txsData: BlockExplorerTransactionResult[] = [];
 
   const url = getTxsDataUrl({
@@ -60,8 +60,8 @@ export const useTxsData = ({
   }
 
   const nextPage = useCallback(() => {
-    const after = data?.transactions.at(-1)?.cursor || '';
+    const before = data?.transactions.at(-1)?.cursor || '';
-    const params: URLSearchParamsInit = { after };
+    const params: URLSearchParamsInit = { before };
     if (filters) {
       params.filters = Array.from(filters).join(',');
     }
@@ -69,8 +69,8 @@ export const useTxsData = ({
   }, [filters, data, setSearchParams]);
 
   const previousPage = useCallback(() => {
-    const before = data?.transactions[0]?.cursor || '';
+    const after = data?.transactions[0]?.cursor || '';
-    const params: URLSearchParamsInit = { before };
+    const params: URLSearchParamsInit = { after };
     if (filters && filters.size > 0 && filters.size === 1) {
       params.filters = Array.from(filters)[0];
     }

apps/explorer/src/app/routes/oracles/Oracles.graphql

@@ -78,6 +78,7 @@ fragment ExplorerOracleDataSource on OracleSpec {
                     }
                   }
                 }
+                sourceChainId
                 filters {
                   key {
                     name
@@ -118,6 +119,7 @@ fragment ExplorerOracleDataSource on OracleSpec {
                 address
                 requiredConfirmations
                 method
+                sourceChainId
                 filters {
                   key {
                     type

apps/explorer/src/app/routes/oracles/OraclesForMarkets.graphql

@@ -67,6 +67,7 @@ fragment ExplorerOracleDataSourceSpec on ExternalDataSourceSpec {
           sourceType {
             ... on EthCallSpec {
               address
+              sourceChainId
             }
             ... on DataSourceSpecConfiguration {
               signers {

apps/explorer/src/app/routes/oracles/__generated__/Oracles.ts

@@ -5,19 +5,19 @@ import * as Apollo from '@apollo/client';
 const defaultOptions = {} as const;
 export type ExplorerOracleDataConnectionFragment = { __typename?: 'OracleSpec', dataConnection: { __typename?: 'OracleDataConnection', edges?: Array<{ __typename?: 'OracleDataEdge', node: { __typename?: 'OracleData', externalData: { __typename?: 'ExternalData', data: { __typename?: 'Data', matchedSpecIds?: Array<string> | null, broadcastAt: any, signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, data?: Array<{ __typename?: 'Property', name: string, value: string }> | null } } } } | null> | null } };
 
-export type ExplorerOracleDataSourceFragment = { __typename?: 'OracleSpec', dataSourceSpec: { __typename?: 'ExternalDataSourceSpec', spec: { __typename?: 'DataSourceSpec', id: string, createdAt: any, updatedAt?: any | null, status: Types.DataSourceSpecStatus, data: { __typename?: 'DataSourceDefinition', sourceType: { __typename?: 'DataSourceDefinitionExternal', sourceType: { __typename?: 'DataSourceSpecConfiguration', signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, filters?: Array<{ __typename?: 'Filter', key: { __typename?: 'PropertyKey', name?: string | null, type: Types.PropertyKeyType, numberDecimalPlaces?: number | null }, conditions?: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator }> | null }> | null } | { __typename?: 'EthCallSpec', abi?: Array<string> | null, args?: Array<string> | null, method: string, requiredConfirmations: number, address: string, normalisers?: Array<{ __typename?: 'Normaliser', name: string, expression: string }> | null, trigger: { __typename?: 'EthCallTrigger', trigger: { __typename?: 'EthTimeTrigger', initial?: any | null, every?: number | null, until?: any | null } }, filters?: Array<{ __typename?: 'Filter', key: { __typename?: 'PropertyKey', name?: string | null, type: Types.PropertyKeyType, numberDecimalPlaces?: number | null }, conditions?: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator }> | null }> | null } } | { __typename?: 'DataSourceDefinitionInternal', sourceType: { __typename?: 'DataSourceSpecConfigurationTime', conditions: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator } | null> } | { __typename?: 'DataSourceSpecConfigurationTimeTrigger', conditions: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator } | null>, triggers: Array<{ __typename?: 'InternalTimeTrigger', initial?: number | null, every?: number | null } | null> } } } } }, dataConnection: { __typename?: 'OracleDataConnection', edges?: Array<{ __typename?: 'OracleDataEdge', node: { __typename?: 'OracleData', externalData: { __typename?: 'ExternalData', data: { __typename?: 'Data', matchedSpecIds?: Array<string> | null, broadcastAt: any, signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, data?: Array<{ __typename?: 'Property', name: string, value: string }> | null } } } } | null> | null } };
+export type ExplorerOracleDataSourceFragment = { __typename?: 'OracleSpec', dataSourceSpec: { __typename?: 'ExternalDataSourceSpec', spec: { __typename?: 'DataSourceSpec', id: string, createdAt: any, updatedAt?: any | null, status: Types.DataSourceSpecStatus, data: { __typename?: 'DataSourceDefinition', sourceType: { __typename?: 'DataSourceDefinitionExternal', sourceType: { __typename?: 'DataSourceSpecConfiguration', signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, filters?: Array<{ __typename?: 'Filter', key: { __typename?: 'PropertyKey', name?: string | null, type: Types.PropertyKeyType, numberDecimalPlaces?: number | null }, conditions?: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator }> | null }> | null } | { __typename?: 'EthCallSpec', abi?: Array<string> | null, args?: Array<string> | null, method: string, requiredConfirmations: number, address: string, sourceChainId: number, normalisers?: Array<{ __typename?: 'Normaliser', name: string, expression: string }> | null, trigger: { __typename?: 'EthCallTrigger', trigger: { __typename?: 'EthTimeTrigger', initial?: any | null, every?: number | null, until?: any | null } }, filters?: Array<{ __typename?: 'Filter', key: { __typename?: 'PropertyKey', name?: string | null, type: Types.PropertyKeyType, numberDecimalPlaces?: number | null }, conditions?: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator }> | null }> | null } } | { __typename?: 'DataSourceDefinitionInternal', sourceType: { __typename?: 'DataSourceSpecConfigurationTime', conditions: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator } | null> } | { __typename?: 'DataSourceSpecConfigurationTimeTrigger', conditions: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator } | null>, triggers: Array<{ __typename?: 'InternalTimeTrigger', initial?: number | null, every?: number | null } | null> } } } } }, dataConnection: { __typename?: 'OracleDataConnection', edges?: Array<{ __typename?: 'OracleDataEdge', node: { __typename?: 'OracleData', externalData: { __typename?: 'ExternalData', data: { __typename?: 'Data', matchedSpecIds?: Array<string> | null, broadcastAt: any, signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, data?: Array<{ __typename?: 'Property', name: string, value: string }> | null } } } } | null> | null } };
 
 export type ExplorerOracleSpecsQueryVariables = Types.Exact<{ [key: string]: never; }>;
 
 
-export type ExplorerOracleSpecsQuery = { __typename?: 'Query', oracleSpecsConnection?: { __typename?: 'OracleSpecsConnection', pageInfo: { __typename?: 'PageInfo', hasNextPage: boolean }, edges?: Array<{ __typename?: 'OracleSpecEdge', node: { __typename?: 'OracleSpec', dataSourceSpec: { __typename?: 'ExternalDataSourceSpec', spec: { __typename?: 'DataSourceSpec', id: string, createdAt: any, updatedAt?: any | null, status: Types.DataSourceSpecStatus, data: { __typename?: 'DataSourceDefinition', sourceType: { __typename?: 'DataSourceDefinitionExternal', sourceType: { __typename?: 'DataSourceSpecConfiguration', signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, filters?: Array<{ __typename?: 'Filter', key: { __typename?: 'PropertyKey', name?: string | null, type: Types.PropertyKeyType, numberDecimalPlaces?: number | null }, conditions?: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator }> | null }> | null } | { __typename?: 'EthCallSpec', abi?: Array<string> | null, args?: Array<string> | null, method: string, requiredConfirmations: number, address: string, normalisers?: Array<{ __typename?: 'Normaliser', name: string, expression: string }> | null, trigger: { __typename?: 'EthCallTrigger', trigger: { __typename?: 'EthTimeTrigger', initial?: any | null, every?: number | null, until?: any | null } }, filters?: Array<{ __typename?: 'Filter', key: { __typename?: 'PropertyKey', name?: string | null, type: Types.PropertyKeyType, numberDecimalPlaces?: number | null }, conditions?: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator }> | null }> | null } } | { __typename?: 'DataSourceDefinitionInternal', sourceType: { __typename?: 'DataSourceSpecConfigurationTime', conditions: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator } | null> } | { __typename?: 'DataSourceSpecConfigurationTimeTrigger', conditions: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator } | null>, triggers: Array<{ __typename?: 'InternalTimeTrigger', initial?: number | null, every?: number | null } | null> } } } } }, dataConnection: { __typename?: 'OracleDataConnection', edges?: Array<{ __typename?: 'OracleDataEdge', node: { __typename?: 'OracleData', externalData: { __typename?: 'ExternalData', data: { __typename?: 'Data', matchedSpecIds?: Array<string> | null, broadcastAt: any, signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, data?: Array<{ __typename?: 'Property', name: string, value: string }> | null } } } } | null> | null } } } | null> | null } | null };
+export type ExplorerOracleSpecsQuery = { __typename?: 'Query', oracleSpecsConnection?: { __typename?: 'OracleSpecsConnection', pageInfo: { __typename?: 'PageInfo', hasNextPage: boolean }, edges?: Array<{ __typename?: 'OracleSpecEdge', node: { __typename?: 'OracleSpec', dataSourceSpec: { __typename?: 'ExternalDataSourceSpec', spec: { __typename?: 'DataSourceSpec', id: string, createdAt: any, updatedAt?: any | null, status: Types.DataSourceSpecStatus, data: { __typename?: 'DataSourceDefinition', sourceType: { __typename?: 'DataSourceDefinitionExternal', sourceType: { __typename?: 'DataSourceSpecConfiguration', signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, filters?: Array<{ __typename?: 'Filter', key: { __typename?: 'PropertyKey', name?: string | null, type: Types.PropertyKeyType, numberDecimalPlaces?: number | null }, conditions?: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator }> | null }> | null } | { __typename?: 'EthCallSpec', abi?: Array<string> | null, args?: Array<string> | null, method: string, requiredConfirmations: number, address: string, sourceChainId: number, normalisers?: Array<{ __typename?: 'Normaliser', name: string, expression: string }> | null, trigger: { __typename?: 'EthCallTrigger', trigger: { __typename?: 'EthTimeTrigger', initial?: any | null, every?: number | null, until?: any | null } }, filters?: Array<{ __typename?: 'Filter', key: { __typename?: 'PropertyKey', name?: string | null, type: Types.PropertyKeyType, numberDecimalPlaces?: number | null }, conditions?: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator }> | null }> | null } } | { __typename?: 'DataSourceDefinitionInternal', sourceType: { __typename?: 'DataSourceSpecConfigurationTime', conditions: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator } | null> } | { __typename?: 'DataSourceSpecConfigurationTimeTrigger', conditions: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator } | null>, triggers: Array<{ __typename?: 'InternalTimeTrigger', initial?: number | null, every?: number | null } | null> } } } } }, dataConnection: { __typename?: 'OracleDataConnection', edges?: Array<{ __typename?: 'OracleDataEdge', node: { __typename?: 'OracleData', externalData: { __typename?: 'ExternalData', data: { __typename?: 'Data', matchedSpecIds?: Array<string> | null, broadcastAt: any, signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, data?: Array<{ __typename?: 'Property', name: string, value: string }> | null } } } } | null> | null } } } | null> | null } | null };
 
 export type ExplorerOracleSpecByIdQueryVariables = Types.Exact<{
   id: Types.Scalars['ID'];
 }>;
 
 
-export type ExplorerOracleSpecByIdQuery = { __typename?: 'Query', oracleSpec?: { __typename?: 'OracleSpec', dataSourceSpec: { __typename?: 'ExternalDataSourceSpec', spec: { __typename?: 'DataSourceSpec', id: string, createdAt: any, updatedAt?: any | null, status: Types.DataSourceSpecStatus, data: { __typename?: 'DataSourceDefinition', sourceType: { __typename?: 'DataSourceDefinitionExternal', sourceType: { __typename?: 'DataSourceSpecConfiguration', signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, filters?: Array<{ __typename?: 'Filter', key: { __typename?: 'PropertyKey', name?: string | null, type: Types.PropertyKeyType, numberDecimalPlaces?: number | null }, conditions?: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator }> | null }> | null } | { __typename?: 'EthCallSpec', abi?: Array<string> | null, args?: Array<string> | null, method: string, requiredConfirmations: number, address: string, normalisers?: Array<{ __typename?: 'Normaliser', name: string, expression: string }> | null, trigger: { __typename?: 'EthCallTrigger', trigger: { __typename?: 'EthTimeTrigger', initial?: any | null, every?: number | null, until?: any | null } }, filters?: Array<{ __typename?: 'Filter', key: { __typename?: 'PropertyKey', name?: string | null, type: Types.PropertyKeyType, numberDecimalPlaces?: number | null }, conditions?: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator }> | null }> | null } } | { __typename?: 'DataSourceDefinitionInternal', sourceType: { __typename?: 'DataSourceSpecConfigurationTime', conditions: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator } | null> } | { __typename?: 'DataSourceSpecConfigurationTimeTrigger', conditions: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator } | null>, triggers: Array<{ __typename?: 'InternalTimeTrigger', initial?: number | null, every?: number | null } | null> } } } } }, dataConnection: { __typename?: 'OracleDataConnection', edges?: Array<{ __typename?: 'OracleDataEdge', node: { __typename?: 'OracleData', externalData: { __typename?: 'ExternalData', data: { __typename?: 'Data', matchedSpecIds?: Array<string> | null, broadcastAt: any, signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, data?: Array<{ __typename?: 'Property', name: string, value: string }> | null } } } } | null> | null } } | null };
+export type ExplorerOracleSpecByIdQuery = { __typename?: 'Query', oracleSpec?: { __typename?: 'OracleSpec', dataSourceSpec: { __typename?: 'ExternalDataSourceSpec', spec: { __typename?: 'DataSourceSpec', id: string, createdAt: any, updatedAt?: any | null, status: Types.DataSourceSpecStatus, data: { __typename?: 'DataSourceDefinition', sourceType: { __typename?: 'DataSourceDefinitionExternal', sourceType: { __typename?: 'DataSourceSpecConfiguration', signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, filters?: Array<{ __typename?: 'Filter', key: { __typename?: 'PropertyKey', name?: string | null, type: Types.PropertyKeyType, numberDecimalPlaces?: number | null }, conditions?: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator }> | null }> | null } | { __typename?: 'EthCallSpec', abi?: Array<string> | null, args?: Array<string> | null, method: string, requiredConfirmations: number, address: string, sourceChainId: number, normalisers?: Array<{ __typename?: 'Normaliser', name: string, expression: string }> | null, trigger: { __typename?: 'EthCallTrigger', trigger: { __typename?: 'EthTimeTrigger', initial?: any | null, every?: number | null, until?: any | null } }, filters?: Array<{ __typename?: 'Filter', key: { __typename?: 'PropertyKey', name?: string | null, type: Types.PropertyKeyType, numberDecimalPlaces?: number | null }, conditions?: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator }> | null }> | null } } | { __typename?: 'DataSourceDefinitionInternal', sourceType: { __typename?: 'DataSourceSpecConfigurationTime', conditions: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator } | null> } | { __typename?: 'DataSourceSpecConfigurationTimeTrigger', conditions: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator } | null>, triggers: Array<{ __typename?: 'InternalTimeTrigger', initial?: number | null, every?: number | null } | null> } } } } }, dataConnection: { __typename?: 'OracleDataConnection', edges?: Array<{ __typename?: 'OracleDataEdge', node: { __typename?: 'OracleData', externalData: { __typename?: 'ExternalData', data: { __typename?: 'Data', matchedSpecIds?: Array<string> | null, broadcastAt: any, signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null, data?: Array<{ __typename?: 'Property', name: string, value: string }> | null } } } } | null> | null } } | null };
 
 export const ExplorerOracleDataConnectionFragmentDoc = gql`
     fragment ExplorerOracleDataConnection on OracleSpec {
@@ -101,6 +101,7 @@ export const ExplorerOracleDataSourceFragmentDoc = gql`
                     }
                   }
                 }
+                sourceChainId
                 filters {
                   key {
                     name
@@ -141,6 +142,7 @@ export const ExplorerOracleDataSourceFragmentDoc = gql`
                 address
                 requiredConfirmations
                 method
+                sourceChainId
                 filters {
                   key {
                     type

apps/explorer/src/app/routes/oracles/__generated__/OraclesForMarkets.ts

@@ -9,12 +9,12 @@ export type ExplorerOracleFutureFragment = { __typename?: 'Future', dataSourceSp
 
 export type ExplorerOracleForMarketsMarketFragment = { __typename?: 'Market', id: string, state: Types.MarketState, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', product: { __typename?: 'Future', dataSourceSpecForSettlementData: { __typename?: 'DataSourceSpec', id: string, status: Types.DataSourceSpecStatus }, dataSourceSpecForTradingTermination: { __typename?: 'DataSourceSpec', id: string, status: Types.DataSourceSpecStatus } } | { __typename?: 'Perpetual', dataSourceSpecForSettlementData: { __typename?: 'DataSourceSpec', id: string, status: Types.DataSourceSpecStatus }, dataSourceSpecForSettlementSchedule: { __typename?: 'DataSourceSpec', id: string, status: Types.DataSourceSpecStatus } } | { __typename?: 'Spot' } } } };
 
-export type ExplorerOracleDataSourceSpecFragment = { __typename?: 'ExternalDataSourceSpec', spec: { __typename?: 'DataSourceSpec', id: string, status: Types.DataSourceSpecStatus, data: { __typename?: 'DataSourceDefinition', sourceType: { __typename?: 'DataSourceDefinitionExternal', sourceType: { __typename?: 'DataSourceSpecConfiguration', signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null } | { __typename?: 'EthCallSpec', address: string } } | { __typename?: 'DataSourceDefinitionInternal', sourceType: { __typename?: 'DataSourceSpecConfigurationTime', conditions: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator } | null> } | { __typename?: 'DataSourceSpecConfigurationTimeTrigger', conditions: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator } | null>, triggers: Array<{ __typename?: 'InternalTimeTrigger', initial?: number | null, every?: number | null } | null> } } } } };
+export type ExplorerOracleDataSourceSpecFragment = { __typename?: 'ExternalDataSourceSpec', spec: { __typename?: 'DataSourceSpec', id: string, status: Types.DataSourceSpecStatus, data: { __typename?: 'DataSourceDefinition', sourceType: { __typename?: 'DataSourceDefinitionExternal', sourceType: { __typename?: 'DataSourceSpecConfiguration', signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null } | { __typename?: 'EthCallSpec', address: string, sourceChainId: number } } | { __typename?: 'DataSourceDefinitionInternal', sourceType: { __typename?: 'DataSourceSpecConfigurationTime', conditions: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator } | null> } | { __typename?: 'DataSourceSpecConfigurationTimeTrigger', conditions: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator } | null>, triggers: Array<{ __typename?: 'InternalTimeTrigger', initial?: number | null, every?: number | null } | null> } } } } };
 
 export type ExplorerOracleFormMarketsQueryVariables = Types.Exact<{ [key: string]: never; }>;
 
 
-export type ExplorerOracleFormMarketsQuery = { __typename?: 'Query', marketsConnection?: { __typename?: 'MarketConnection', edges: Array<{ __typename?: 'MarketEdge', node: { __typename?: 'Market', id: string, state: Types.MarketState, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', product: { __typename?: 'Future', dataSourceSpecForSettlementData: { __typename?: 'DataSourceSpec', id: string, status: Types.DataSourceSpecStatus }, dataSourceSpecForTradingTermination: { __typename?: 'DataSourceSpec', id: string, status: Types.DataSourceSpecStatus } } | { __typename?: 'Perpetual', dataSourceSpecForSettlementData: { __typename?: 'DataSourceSpec', id: string, status: Types.DataSourceSpecStatus }, dataSourceSpecForSettlementSchedule: { __typename?: 'DataSourceSpec', id: string, status: Types.DataSourceSpecStatus } } | { __typename?: 'Spot' } } } } }> } | null, oracleSpecsConnection?: { __typename?: 'OracleSpecsConnection', edges?: Array<{ __typename?: 'OracleSpecEdge', node: { __typename?: 'OracleSpec', dataSourceSpec: { __typename?: 'ExternalDataSourceSpec', spec: { __typename?: 'DataSourceSpec', id: string, status: Types.DataSourceSpecStatus, data: { __typename?: 'DataSourceDefinition', sourceType: { __typename?: 'DataSourceDefinitionExternal', sourceType: { __typename?: 'DataSourceSpecConfiguration', signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null } | { __typename?: 'EthCallSpec', address: string } } | { __typename?: 'DataSourceDefinitionInternal', sourceType: { __typename?: 'DataSourceSpecConfigurationTime', conditions: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator } | null> } | { __typename?: 'DataSourceSpecConfigurationTimeTrigger', conditions: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator } | null>, triggers: Array<{ __typename?: 'InternalTimeTrigger', initial?: number | null, every?: number | null } | null> } } } } }, dataConnection: { __typename?: 'OracleDataConnection', edges?: Array<{ __typename?: 'OracleDataEdge', node: { __typename?: 'OracleData', externalData: { __typename?: 'ExternalData', data: { __typename?: 'Data', data?: Array<{ __typename?: 'Property', name: string, value: string }> | null } } } } | null> | null } } } | null> | null } | null };
+export type ExplorerOracleFormMarketsQuery = { __typename?: 'Query', marketsConnection?: { __typename?: 'MarketConnection', edges: Array<{ __typename?: 'MarketEdge', node: { __typename?: 'Market', id: string, state: Types.MarketState, tradableInstrument: { __typename?: 'TradableInstrument', instrument: { __typename?: 'Instrument', product: { __typename?: 'Future', dataSourceSpecForSettlementData: { __typename?: 'DataSourceSpec', id: string, status: Types.DataSourceSpecStatus }, dataSourceSpecForTradingTermination: { __typename?: 'DataSourceSpec', id: string, status: Types.DataSourceSpecStatus } } | { __typename?: 'Perpetual', dataSourceSpecForSettlementData: { __typename?: 'DataSourceSpec', id: string, status: Types.DataSourceSpecStatus }, dataSourceSpecForSettlementSchedule: { __typename?: 'DataSourceSpec', id: string, status: Types.DataSourceSpecStatus } } | { __typename?: 'Spot' } } } } }> } | null, oracleSpecsConnection?: { __typename?: 'OracleSpecsConnection', edges?: Array<{ __typename?: 'OracleSpecEdge', node: { __typename?: 'OracleSpec', dataSourceSpec: { __typename?: 'ExternalDataSourceSpec', spec: { __typename?: 'DataSourceSpec', id: string, status: Types.DataSourceSpecStatus, data: { __typename?: 'DataSourceDefinition', sourceType: { __typename?: 'DataSourceDefinitionExternal', sourceType: { __typename?: 'DataSourceSpecConfiguration', signers?: Array<{ __typename?: 'Signer', signer: { __typename?: 'ETHAddress', address?: string | null } | { __typename?: 'PubKey', key?: string | null } }> | null } | { __typename?: 'EthCallSpec', address: string, sourceChainId: number } } | { __typename?: 'DataSourceDefinitionInternal', sourceType: { __typename?: 'DataSourceSpecConfigurationTime', conditions: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator } | null> } | { __typename?: 'DataSourceSpecConfigurationTimeTrigger', conditions: Array<{ __typename?: 'Condition', value?: string | null, operator: Types.ConditionOperator } | null>, triggers: Array<{ __typename?: 'InternalTimeTrigger', initial?: number | null, every?: number | null } | null> } } } } }, dataConnection: { __typename?: 'OracleDataConnection', edges?: Array<{ __typename?: 'OracleDataEdge', node: { __typename?: 'OracleData', externalData: { __typename?: 'ExternalData', data: { __typename?: 'Data', data?: Array<{ __typename?: 'Property', name: string, value: string }> | null } } } } | null> | null } } } | null> | null } | null };
 
 export const ExplorerOracleFutureFragmentDoc = gql`
     fragment ExplorerOracleFuture on Future {
@@ -90,6 +90,7 @@ export const ExplorerOracleDataSourceSpecFragmentDoc = gql`
           sourceType {
             ... on EthCallSpec {
               address
+              sourceChainId
             }
             ... on DataSourceSpecConfiguration {
               signers {

apps/explorer/src/app/routes/oracles/components/oracle-details-type.tsx

@@ -28,7 +28,7 @@ export function isInternalSourceType(s: SourceType) {
 
 export function getExternalType(s: SourceType) {
   if (s.sourceType.__typename === 'EthCallSpec') {
-    return 'Ethereum Contract Call';
+    return 'Contract Call';
   } else {
     return 'External Data';
   }

apps/explorer/src/app/routes/oracles/components/oracle-eth-source.tsx

@@ -1,18 +1,24 @@
 import { TableRow, TableCell, TableHeader } from '../../../components/table';
 import type { SourceType } from './oracle';
 import {
-  EthExplorerLink,
+  ExternalExplorerLink,
   EthExplorerLinkTypes,
-} from '../../../components/links/eth-explorer-link/eth-explorer-link';
+} from '../../../components/links/external-explorer-link/external-explorer-link';
+import { getExternalChainLabel } from '../../../components/links/external-explorer-link/external-chain';
+import { t } from 'i18next';
 
 interface OracleDetailsEthSourceProps {
   sourceType: SourceType;
+  chain?: string;
 }
 /**
  * Given an Oracle that sources data from Ethereum, this component will render
  * a link to the smart contract and some basic details
  */
-export function OracleEthSource({ sourceType }: OracleDetailsEthSourceProps) {
+export function OracleEthSource({
+  sourceType,
+  chain = '1',
+}: OracleDetailsEthSourceProps) {
   if (
     sourceType.__typename !== 'DataSourceDefinitionExternal' ||
     sourceType.sourceType.__typename !== 'EthCallSpec'
@@ -26,11 +32,20 @@ export function OracleEthSource({ sourceType }: OracleDetailsEthSourceProps) {
     return null;
   }
 
+  const chainLabel = getExternalChainLabel(chain);
+
   return (
     <TableRow modifier="bordered">
-      <TableHeader scope="row">Ethereum Contract</TableHeader>
+      <TableHeader scope="row">
+        {chainLabel} {t('Contract')}
+      </TableHeader>
       <TableCell modifier="bordered">
-        <EthExplorerLink id={address} type={EthExplorerLinkTypes.address} />
+        <ExternalExplorerLink
+          chain={chain}
+          id={address}
+          type={EthExplorerLinkTypes.address}
+          code={true}
+        />
         <span className="mx-3">&rArr;</span>
         <code>{sourceType.sourceType.method}</code>
       </TableCell>

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

@@ -1,8 +1,8 @@
 import { PartyLink } from '../../../components/links';
 import {
-  EthExplorerLink,
+  ExternalExplorerLink,
   EthExplorerLinkTypes,
-} from '../../../components/links/eth-explorer-link/eth-explorer-link';
+} from '../../../components/links/external-explorer-link/external-explorer-link';
 import { TableRow, TableCell, TableHeader } from '../../../components/table';
 import { remove0x } from '@vegaprotocol/utils';
 
@@ -37,13 +37,15 @@ export function getAddressLink(signer: Signer) {
   }
 
   if (signer.__typename === 'ETHAddress') {
-    return <EthExplorerLink id={address} type={EthExplorerLinkTypes.address} />;
+    return (
+      <ExternalExplorerLink id={address} type={EthExplorerLinkTypes.address} />
+    );
   } else if (signer.__typename === 'PubKey' && address.length !== 64) {
     // This is a hack: some older oracles were submitted before proper checks stopped
     // ETH addresses being returned as Vega addresses
     // Hacky 0x prefixing as a bonus
     return (
-      <EthExplorerLink
+      <ExternalExplorerLink
         id={`0x${remove0x(address)}`}
         type={EthExplorerLinkTypes.address}
       />
@@ -61,7 +63,10 @@ interface OracleDetailsSignersProps {
 
 /**
  * Given an Oracle, this component will render either a link to Ethereum
- * or the Vega party depending on which type is specified
+ * or the Vega party depending on which type is specified.
+ *
+ * Note that this won't be shown for external contract calls as they do not
+ * have a signer in the same way.
  */
 export function OracleSigners({ sourceType }: OracleDetailsSignersProps) {
   if (sourceType.__typename !== 'DataSourceDefinitionExternal') {

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

@@ -42,6 +42,11 @@ export const OracleDetails = ({
   dataConnection,
 }: OracleDetailsProps) => {
   const sourceType = dataSource.dataSourceSpec.spec.data.sourceType;
+  const chain =
+    dataSource.dataSourceSpec.spec.data.sourceType.sourceType.__typename ===
+    'EthCallSpec'
+      ? dataSource.dataSourceSpec.spec.data.sourceType.sourceType.sourceChainId.toString()
+      : undefined;
 
   return (
     <div>
@@ -60,7 +65,7 @@ export const OracleDetails = ({
           </TableCell>
         </TableRow>
         <OracleSigners sourceType={sourceType} />
-        <OracleEthSource sourceType={sourceType} />
+        <OracleEthSource sourceType={sourceType} chain={chain} />
         <OracleMarkets id={id} />
         <TableRow modifier="bordered">
           <TableHeader scope="row">{t('Filter')}</TableHeader>

apps/explorer/src/app/routes/route-names.tsx

@@ -12,4 +12,5 @@ export const Routes = {
   ORACLES: 'oracles',
   NETWORK_PARAMETERS: 'network-parameters',
   DISCLAIMER: 'disclaimer',
+  TREASURY: 'treasury',
 };

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

@@ -30,6 +30,7 @@ import { PartyAccountsByAsset } from './parties/id/accounts';
 import { Disclaimer } from './pages/disclaimer';
 import { useFeatureFlags } from '@vegaprotocol/environment';
 import RestrictedPage from './restricted';
+import { NetworkTreasury } from './treasury';
 
 export type Navigable = {
   path: string;
@@ -229,6 +230,17 @@ export const useRouterConfig = () => {
         ]
       : [];
 
+  const treasuryRoutes: Route[] = [
+    {
+      path: Routes.TREASURY,
+      handle: {
+        name: t('Treasury'),
+        text: t('Treasury'),
+        breadcrumb: () => <Link to={Routes.TREASURY}>{t('Treasury')}</Link>,
+      },
+      element: <NetworkTreasury />,
+    },
+  ];
   const validators: Route[] = featureFlags.EXPLORER_VALIDATORS
     ? [
         {
@@ -358,6 +370,7 @@ export const useRouterConfig = () => {
         ...marketsRoutes,
         ...networkParametersRoutes,
         ...validators,
+        ...treasuryRoutes,
       ],
     },
     {

apps/explorer/src/app/routes/treasury/Treasury.graphql

@@ -0,0 +1,12 @@
+query ExplorerTreasury {
+  assetsConnection(pagination: { last: 1000 }) {
+    edges {
+      node {
+        id
+        networkTreasuryAccount {
+          balance
+        }
+      }
+    }
+  }
+}

apps/explorer/src/app/routes/treasury/TreasuryTransfers.graphql

@@ -0,0 +1,44 @@
+query ExplorerTreasuryTransfers {
+  transfersConnection(
+    partyId: "network"
+    direction: ToOrFrom
+    pagination: { last: 200 }
+  ) {
+    pageInfo {
+      hasNextPage
+    }
+    edges {
+      node {
+        transfer {
+          timestamp
+          from
+          amount
+          to
+          status
+          reason
+          toAccountType
+          fromAccountType
+          asset {
+            id
+          }
+          id
+          status
+          kind {
+            ... on OneOffTransfer {
+              deliverOn
+            }
+            ... on RecurringTransfer {
+              startEpoch
+            }
+            ... on OneOffGovernanceTransfer {
+              deliverOn
+            }
+            ... on RecurringGovernanceTransfer {
+              endEpoch
+            }
+          }
+        }
+      }
+    }
+  }
+}

apps/explorer/src/app/routes/treasury/__generated__/Treasury.ts

@@ -0,0 +1,52 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type ExplorerTreasuryQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type ExplorerTreasuryQuery = { __typename?: 'Query', assetsConnection?: { __typename?: 'AssetsConnection', edges?: Array<{ __typename?: 'AssetEdge', node: { __typename?: 'Asset', id: string, networkTreasuryAccount?: { __typename?: 'AccountBalance', balance: string } | null } } | null> | null } | null };
+
+
+export const ExplorerTreasuryDocument = gql`
+    query ExplorerTreasury {
+  assetsConnection(pagination: {last: 1000}) {
+    edges {
+      node {
+        id
+        networkTreasuryAccount {
+          balance
+        }
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useExplorerTreasuryQuery__
+ *
+ * To run a query within a React component, call `useExplorerTreasuryQuery` and pass it any options that fit your needs.
+ * When your component renders, `useExplorerTreasuryQuery` 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 } = useExplorerTreasuryQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useExplorerTreasuryQuery(baseOptions?: Apollo.QueryHookOptions<ExplorerTreasuryQuery, ExplorerTreasuryQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ExplorerTreasuryQuery, ExplorerTreasuryQueryVariables>(ExplorerTreasuryDocument, options);
+      }
+export function useExplorerTreasuryLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerTreasuryQuery, ExplorerTreasuryQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ExplorerTreasuryQuery, ExplorerTreasuryQueryVariables>(ExplorerTreasuryDocument, options);
+        }
+export type ExplorerTreasuryQueryHookResult = ReturnType<typeof useExplorerTreasuryQuery>;
+export type ExplorerTreasuryLazyQueryHookResult = ReturnType<typeof useExplorerTreasuryLazyQuery>;
+export type ExplorerTreasuryQueryResult = Apollo.QueryResult<ExplorerTreasuryQuery, ExplorerTreasuryQueryVariables>;

apps/explorer/src/app/routes/treasury/__generated__/TreasuryTransfers.ts

@@ -0,0 +1,84 @@
+import * as Types from '@vegaprotocol/types';
+
+import { gql } from '@apollo/client';
+import * as Apollo from '@apollo/client';
+const defaultOptions = {} as const;
+export type ExplorerTreasuryTransfersQueryVariables = Types.Exact<{ [key: string]: never; }>;
+
+
+export type ExplorerTreasuryTransfersQuery = { __typename?: 'Query', transfersConnection?: { __typename?: 'TransferConnection', pageInfo: { __typename?: 'PageInfo', hasNextPage: boolean }, edges?: Array<{ __typename?: 'TransferEdge', node: { __typename?: 'TransferNode', transfer: { __typename?: 'Transfer', timestamp: any, from: string, amount: string, to: string, status: Types.TransferStatus, reason?: string | null, toAccountType: Types.AccountType, fromAccountType: Types.AccountType, id: string, asset?: { __typename?: 'Asset', id: string } | null, kind: { __typename?: 'OneOffGovernanceTransfer', deliverOn?: any | null } | { __typename?: 'OneOffTransfer', deliverOn?: any | null } | { __typename?: 'RecurringGovernanceTransfer', endEpoch?: number | null } | { __typename?: 'RecurringTransfer', startEpoch: number } } } } | null> | null } | null };
+
+
+export const ExplorerTreasuryTransfersDocument = gql`
+    query ExplorerTreasuryTransfers {
+  transfersConnection(
+    partyId: "network"
+    direction: ToOrFrom
+    pagination: {last: 200}
+  ) {
+    pageInfo {
+      hasNextPage
+    }
+    edges {
+      node {
+        transfer {
+          timestamp
+          from
+          amount
+          to
+          status
+          reason
+          toAccountType
+          fromAccountType
+          asset {
+            id
+          }
+          id
+          status
+          kind {
+            ... on OneOffTransfer {
+              deliverOn
+            }
+            ... on RecurringTransfer {
+              startEpoch
+            }
+            ... on OneOffGovernanceTransfer {
+              deliverOn
+            }
+            ... on RecurringGovernanceTransfer {
+              endEpoch
+            }
+          }
+        }
+      }
+    }
+  }
+}
+    `;
+
+/**
+ * __useExplorerTreasuryTransfersQuery__
+ *
+ * To run a query within a React component, call `useExplorerTreasuryTransfersQuery` and pass it any options that fit your needs.
+ * When your component renders, `useExplorerTreasuryTransfersQuery` 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 } = useExplorerTreasuryTransfersQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+export function useExplorerTreasuryTransfersQuery(baseOptions?: Apollo.QueryHookOptions<ExplorerTreasuryTransfersQuery, ExplorerTreasuryTransfersQueryVariables>) {
+        const options = {...defaultOptions, ...baseOptions}
+        return Apollo.useQuery<ExplorerTreasuryTransfersQuery, ExplorerTreasuryTransfersQueryVariables>(ExplorerTreasuryTransfersDocument, options);
+      }
+export function useExplorerTreasuryTransfersLazyQuery(baseOptions?: Apollo.LazyQueryHookOptions<ExplorerTreasuryTransfersQuery, ExplorerTreasuryTransfersQueryVariables>) {
+          const options = {...defaultOptions, ...baseOptions}
+          return Apollo.useLazyQuery<ExplorerTreasuryTransfersQuery, ExplorerTreasuryTransfersQueryVariables>(ExplorerTreasuryTransfersDocument, options);
+        }
+export type ExplorerTreasuryTransfersQueryHookResult = ReturnType<typeof useExplorerTreasuryTransfersQuery>;
+export type ExplorerTreasuryTransfersLazyQueryHookResult = ReturnType<typeof useExplorerTreasuryTransfersLazyQuery>;
+export type ExplorerTreasuryTransfersQueryResult = Apollo.QueryResult<ExplorerTreasuryTransfersQuery, ExplorerTreasuryTransfersQueryVariables>;

apps/explorer/src/app/routes/treasury/components/asset-icon/index.tsx

@@ -0,0 +1,37 @@
+// NOTE: These are a temporary measure, pulled from an old branch on console.
+
+import { IconNames } from '@blueprintjs/icons';
+import { Icon } from '@vegaprotocol/ui-toolkit';
+import { USDc } from './usdc';
+import { Vega } from './vega';
+import { USDt } from './usdt';
+
+export interface AssetIconProps {
+  symbol: string;
+}
+
+/**
+ * A poorly implemented, limited support for asset icons.
+ *
+ * These are committed as 'deprecated' to discourage use outside the Treasury page. Rather
+ * than use this, a better approach would be to use source contract addresses to match assets.
+ * This will be done separately.
+ *
+ * @deprecated
+ */
+export function AssetIcon({ symbol }: AssetIconProps) {
+  const s = symbol.toLowerCase();
+  switch (s) {
+    case 'a4a16e250a09a86061ec83c2f9466fc9dc33d332f86876ee74b6f128a5cd6710': // mainnet
+    case 'c9fe6fc24fce121b2cc72680543a886055abb560043fda394ba5376203b7527d': // mainnet
+      return <USDc size={32} />;
+    case 'd1984e3d365faa05bcafbe41f50f90e3663ee7c0da22bb1e24b164e9532691b2': // mainnet
+    case 'fc7fd956078fb1fc9db5c19b88f0874c4299b2a7639ad05a47a28c0aef291b55': // testnet
+      return <Vega size={32} />;
+    case 'bf1e88d19db4b3ca0d1d5bdb73718a01686b18cf731ca26adedf3c8b83802bba': // mainnet
+    case 'ede4076aef07fd79502d14326c54ab3911558371baaf697a19d077f4f89de399': // testnet
+      return <USDt size={32} />;
+    default:
+      return <Icon name={IconNames.BANK_ACCOUNT} size={8} />;
+  }
+}

apps/explorer/src/app/routes/treasury/components/asset-icon/usdc.tsx

@@ -0,0 +1,24 @@
+/**
+ * See note in index.tsx. This component is intended as a placeholder for a
+ * better, more generic solution.
+ *
+ * @deprecated
+ */
+export const USDc = ({ size = 16 }: { size?: number }) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 2000 2000">
+      <path
+        d="M1000 2000c554.17 0 1000-445.83 1000-1000S1554.17 0 1000 0 0 445.83 0 1000s445.83 1000 1000 1000z"
+        fill="#2775ca"
+      />
+      <path
+        d="M1275 1158.33c0-145.83-87.5-195.83-262.5-216.66-125-16.67-150-50-150-108.34s41.67-95.83 125-95.83c75 0 116.67 25 137.5 87.5 4.17 12.5 16.67 20.83 29.17 20.83h66.66c16.67 0 29.17-12.5 29.17-29.16v-4.17c-16.67-91.67-91.67-162.5-187.5-170.83v-100c0-16.67-12.5-29.17-33.33-33.34h-62.5c-16.67 0-29.17 12.5-33.34 33.34v95.83c-125 16.67-204.16 100-204.16 204.17 0 137.5 83.33 191.66 258.33 212.5 116.67 20.83 154.17 45.83 154.17 112.5s-58.34 112.5-137.5 112.5c-108.34 0-145.84-45.84-158.34-108.34-4.16-16.66-16.66-25-29.16-25h-70.84c-16.66 0-29.16 12.5-29.16 29.17v4.17c16.66 104.16 83.33 179.16 220.83 200v100c0 16.66 12.5 29.16 33.33 33.33h62.5c16.67 0 29.17-12.5 33.34-33.33v-100c125-20.84 208.33-108.34 208.33-220.84z"
+        fill="#fff"
+      />
+      <path
+        d="M787.5 1595.83c-325-116.66-491.67-479.16-370.83-800 62.5-175 200-308.33 370.83-370.83 16.67-8.33 25-20.83 25-41.67V325c0-16.67-8.33-29.17-25-33.33-4.17 0-12.5 0-16.67 4.16-395.83 125-612.5 545.84-487.5 941.67 75 233.33 254.17 412.5 487.5 487.5 16.67 8.33 33.34 0 37.5-16.67 4.17-4.16 4.17-8.33 4.17-16.66v-58.34c0-12.5-12.5-29.16-25-37.5zM1229.17 295.83c-16.67-8.33-33.34 0-37.5 16.67-4.17 4.17-4.17 8.33-4.17 16.67v58.33c0 16.67 12.5 33.33 25 41.67 325 116.66 491.67 479.16 370.83 800-62.5 175-200 308.33-370.83 370.83-16.67 8.33-25 20.83-25 41.67V1700c0 16.67 8.33 29.17 25 33.33 4.17 0 12.5 0 16.67-4.16 395.83-125 612.5-545.84 487.5-941.67-75-237.5-258.34-416.67-487.5-491.67z"
+        fill="#fff"
+      />
+    </svg>
+  );
+};

apps/explorer/src/app/routes/treasury/components/asset-icon/usdt.tsx

@@ -0,0 +1,20 @@
+/**
+ * See note in index.tsx. This component is intended as a placeholder for a
+ * better, more generic solution.
+ *
+ * @deprecated
+ */
+export const USDt = ({ size = 16 }: { size?: number }) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 339.43 295.27">
+      <path
+        fill="#50af95"
+        d="M62.15,1.45l-61.89,130a2.52,2.52,0,0,0,.54,2.94L167.95,294.56a2.55,2.55,0,0,0,3.53,0L338.63,134.4a2.52,2.52,0,0,0,.54-2.94l-61.89-130A2.5,2.5,0,0,0,275,0H64.45a2.5,2.5,0,0,0-2.3,1.45h0Z"
+      />
+      <path
+        fill="#fff"
+        d="M191.19,144.8v0c-1.2.09-7.4,0.46-21.23,0.46-11,0-18.81-.33-21.55-0.46v0c-42.51-1.87-74.24-9.27-74.24-18.13s31.73-16.25,74.24-18.15v28.91c2.78,0.2,10.74.67,21.74,0.67,13.2,0,19.81-.55,21-0.66v-28.9c42.42,1.89,74.08,9.29,74.08,18.13s-31.65,16.24-74.08,18.12h0Zm0-39.25V79.68h59.2V40.23H89.21V79.68H148.4v25.86c-48.11,2.21-84.29,11.74-84.29,23.16s36.18,20.94,84.29,23.16v82.9h42.78V151.83c48-2.21,84.12-11.73,84.12-23.14s-36.09-20.93-84.12-23.15h0Zm0,0h0Z"
+      />
+    </svg>
+  );
+};

apps/explorer/src/app/routes/treasury/components/asset-icon/vega.tsx

@@ -0,0 +1,28 @@
+/**
+ * See note in index.tsx. This component is intended as a placeholder for a
+ * better, more generic solution.
+ *
+ * @deprecated
+ */
+export const Vega = ({ size = 16 }: { size?: number }) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 42 42">
+      <rect width="42" height="42" rx="21" fill="black" />
+      <path d="M13 27.2726H16.4545V10H13V27.2726Z" fill="white" />
+      <path d="M25.667 23.8181H29.1215V10H25.667V23.8181Z" fill="white" />
+      <path d="M19.333 33.6059H22.7875V30.1514H19.333V33.6059Z" fill="white" />
+      <path
+        d="M22.7871 30.7271H26.2416V27.2726H22.7871V30.7271Z"
+        fill="white"
+      />
+      <path
+        d="M29.1211 27.2726H31.9999V23.8181H29.1211V27.2726Z"
+        fill="white"
+      />
+      <path
+        d="M16.4551 30.7271H19.3339V27.2726H16.4551V30.7271Z"
+        fill="white"
+      />
+    </svg>
+  );
+};

apps/explorer/src/app/routes/treasury/components/network-accounts-table.spec.tsx

@@ -0,0 +1,171 @@
+import type { DeepPartial } from '@apollo/client/utilities';
+import { parseResultsToAccounts } from './network-accounts-table';
+import {
+  ExplorerTreasuryDocument,
+  type ExplorerTreasuryQuery,
+} from '../__generated__/Treasury';
+import { render, screen } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import { MemoryRouter } from 'react-router-dom';
+import { NetworkAccountsTable } from './network-accounts-table';
+
+describe('parseResultsToAccounts', () => {
+  it('should return an array of non-zero treasury accounts', () => {
+    const data: DeepPartial<ExplorerTreasuryQuery> = {
+      assetsConnection: {
+        edges: [
+          {
+            node: {
+              id: 'asset1',
+              networkTreasuryAccount: {
+                balance: '100',
+              },
+            },
+          },
+          {
+            node: {
+              id: 'has0assets',
+              networkTreasuryAccount: {
+                balance: '0',
+              },
+            },
+          },
+          {
+            node: {
+              id: 'asset3',
+              networkTreasuryAccount: {
+                balance: '50',
+              },
+            },
+          },
+          {
+            node: {
+              id: 'hasnonetworktreasuryaccount',
+            },
+          },
+        ],
+      },
+    };
+
+    const result = parseResultsToAccounts(data as ExplorerTreasuryQuery);
+
+    expect(result).toHaveLength(2);
+    expect(result).toEqual([
+      {
+        assetId: 'asset1',
+        balance: '100',
+        type: 'ACCOUNT_TYPE_NETWORK_TREASURY',
+      },
+      {
+        assetId: 'asset3',
+        balance: '50',
+        type: 'ACCOUNT_TYPE_NETWORK_TREASURY',
+      },
+    ]);
+  });
+
+  it('should return an empty array if no non-zero accounts are found', () => {
+    const data: DeepPartial<ExplorerTreasuryQuery> = {
+      assetsConnection: {
+        edges: [
+          {
+            node: {
+              id: 'asset1',
+              networkTreasuryAccount: {
+                balance: '0',
+              },
+            },
+          },
+          {
+            node: {
+              id: 'asset2',
+              networkTreasuryAccount: {
+                balance: '0',
+              },
+            },
+          },
+        ],
+      },
+    };
+
+    const result = parseResultsToAccounts(data as ExplorerTreasuryQuery);
+
+    expect(result).toHaveLength(0);
+    expect(result).toEqual([]);
+  });
+
+  it('should handle missing data', () => {
+    const result = parseResultsToAccounts(
+      undefined as unknown as ExplorerTreasuryQuery
+    );
+
+    expect(result).toHaveLength(0);
+    expect(result).toEqual([]);
+  });
+});
+
+describe('NetworkAccountsTable', () => {
+  const mockData: ExplorerTreasuryQuery = {
+    assetsConnection: {
+      edges: [
+        {
+          node: {
+            id: 'asset1',
+            networkTreasuryAccount: {
+              balance: '100',
+            },
+          },
+        },
+        {
+          node: {
+            id: 'asset2',
+            networkTreasuryAccount: {
+              balance: '50',
+            },
+          },
+        },
+      ],
+    },
+  };
+
+  const mocks = [
+    {
+      request: {
+        query: ExplorerTreasuryDocument,
+      },
+      result: {
+        data: mockData,
+      },
+    },
+  ];
+
+  it('should render network accounts (as many as match - often just 1)', async () => {
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <MemoryRouter>
+          <NetworkAccountsTable />
+        </MemoryRouter>
+      </MockedProvider>
+    );
+
+    // Wait for the data to load
+    await screen.findByText('Loading...');
+
+    // Assert that the network accounts are rendered
+    expect(screen.getByText('asset1')).toBeInTheDocument();
+    expect(screen.getByText('asset2')).toBeInTheDocument();
+  });
+
+  it('should handle loading state', async () => {
+    render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <MemoryRouter>
+          <NetworkAccountsTable />
+        </MemoryRouter>
+      </MockedProvider>
+    );
+
+    // Assert that the loading state is rendered
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+  });
+});

apps/explorer/src/app/routes/treasury/components/network-accounts-table.tsx

@@ -0,0 +1,87 @@
+import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
+import {
+  type ExplorerTreasuryQuery,
+  useExplorerTreasuryQuery,
+} from '../__generated__/Treasury';
+import AssetBalance from '../../../components/asset-balance/asset-balance';
+import { AssetLink } from '../../../components/links';
+import { useMemo } from 'react';
+import { useScreenDimensions } from '@vegaprotocol/react-helpers';
+import { AssetIcon } from './asset-icon';
+import { type NonZeroAccount } from '../network-treasury';
+import { AccountType } from '@vegaprotocol/types';
+import { removePaginationWrapper } from '@vegaprotocol/utils';
+
+export const NetworkAccountsTable = () => {
+  const { data, loading, error } = useExplorerTreasuryQuery({
+    // This needs to ignore error as old assets may no longer properly resolve
+    errorPolicy: 'ignore',
+  });
+  const { screenSize } = useScreenDimensions();
+  const shouldRound = useMemo(
+    () => ['xs', 'sm', 'md', 'lg'].includes(screenSize),
+    [screenSize]
+  );
+
+  return (
+    <AsyncRenderer
+      data={data}
+      loading={loading}
+      error={error}
+      render={(data) => {
+        const c = parseResultsToAccounts(data);
+        return (
+          <section className="md:flex md:flex-row flex-wrap">
+            {c.map((a) => (
+              <div className="basis-1/2 md:basis-1/4">
+                <div className="bg-white rounded overflow-hidden shadow-lg dark:bg-black dark:border-slate-500 dark:border">
+                  <div className="text-center p-6 bg-gray-100 dark:bg-slate-900 border-b dark:border-slate-500">
+                    <p className="flex justify-center">
+                      <AssetIcon symbol={a.assetId} />
+                    </p>
+                    <p className="mt-3" data-testid="name">
+                      <AssetLink assetId={a.assetId} />
+                    </p>
+                  </div>
+                  <div className="text-center py-5" data-testid="balance">
+                    <AssetBalance
+                      assetId={a.assetId}
+                      price={a.balance}
+                      showAssetSymbol={true}
+                      rounded={shouldRound}
+                    />
+                  </div>
+                </div>
+              </div>
+            ))}
+          </section>
+        );
+      }}
+    />
+  );
+};
+
+export function parseResultsToAccounts(
+  data: ExplorerTreasuryQuery
+): NonZeroAccount[] {
+  const nonZeroAccounts: NonZeroAccount[] = [];
+  if (data?.assetsConnection?.edges) {
+    const edges = removePaginationWrapper(data?.assetsConnection?.edges);
+    if (edges) {
+      edges.forEach((edge) => {
+        if (
+          edge.networkTreasuryAccount &&
+          edge.networkTreasuryAccount?.balance !== '0'
+        ) {
+          nonZeroAccounts.push({
+            assetId: edge.id,
+            balance: edge.networkTreasuryAccount?.balance,
+            type: AccountType.ACCOUNT_TYPE_NETWORK_TREASURY,
+          });
+        }
+      });
+    }
+  }
+
+  return nonZeroAccounts;
+}

apps/explorer/src/app/routes/treasury/components/network-transfers-table.spec.tsx

@@ -0,0 +1,262 @@
+import { AccountType } from '@vegaprotocol/types';
+import {
+  typeLabel,
+  getToAccountTypeLabel,
+  filterAccountTransfers,
+} from './network-transfers-table';
+import { render, screen } from '@testing-library/react';
+import { NetworkTransfersTable } from './network-transfers-table';
+import { MockedProvider } from '@apollo/client/testing';
+import { MemoryRouter } from 'react-router-dom';
+import {
+  ExplorerTreasuryTransfersDocument,
+  type ExplorerTreasuryTransfersQuery,
+} from '../__generated__/TreasuryTransfers';
+import type { DeepPartial } from '@apollo/client/utilities';
+
+describe('typeLabel', () => {
+  it('should return "Transfer" for "OneOffTransfer" kind', () => {
+    expect(typeLabel('OneOffTransfer')).toBe('Transfer');
+  });
+
+  it('should return "Transfer" for "RecurringTransfer" kind', () => {
+    expect(typeLabel('RecurringTransfer')).toBe('Transfer');
+  });
+
+  it('should return "Governance" for "OneOffGovernanceTransfer" kind', () => {
+    expect(typeLabel('OneOffGovernanceTransfer')).toBe('Governance');
+  });
+
+  it('should return "Governance" for "RecurringGovernanceTransfer" kind', () => {
+    expect(typeLabel('RecurringGovernanceTransfer')).toBe('Governance');
+  });
+
+  it('should return "Unknown" for unknown kind', () => {
+    expect(typeLabel()).toBe('Unknown');
+    expect(typeLabel('')).toBe('Unknown');
+    expect(typeLabel('InvalidKind')).toBe('Unknown');
+  });
+});
+
+describe('getToAccountTypeLabel', () => {
+  it('should return "Treasury" when type is ACCOUNT_TYPE_NETWORK_TREASURY', () => {
+    expect(
+      getToAccountTypeLabel(AccountType.ACCOUNT_TYPE_NETWORK_TREASURY)
+    ).toBe('Treasury');
+  });
+
+  it('should return "Fees" when type is any of the fee account types', () => {
+    expect(
+      getToAccountTypeLabel(AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE)
+    ).toBe('Fees');
+    expect(getToAccountTypeLabel(AccountType.ACCOUNT_TYPE_FEES_MAKER)).toBe(
+      'Fees'
+    );
+    expect(getToAccountTypeLabel(AccountType.ACCOUNT_TYPE_FEES_LIQUIDITY)).toBe(
+      'Fees'
+    );
+    expect(
+      getToAccountTypeLabel(AccountType.ACCOUNT_TYPE_LP_LIQUIDITY_FEES)
+    ).toBe('Fees');
+    expect(
+      getToAccountTypeLabel(
+        AccountType.ACCOUNT_TYPE_PENDING_FEE_REFERRAL_REWARD
+      )
+    ).toBe('Fees');
+  });
+
+  it('should return "Insurance" when type is ACCOUNT_TYPE_GLOBAL_INSURANCE', () => {
+    expect(
+      getToAccountTypeLabel(AccountType.ACCOUNT_TYPE_GLOBAL_INSURANCE)
+    ).toBe('Insurance');
+  });
+
+  it('should return "Rewards" when type is any of the reward account types', () => {
+    expect(getToAccountTypeLabel(AccountType.ACCOUNT_TYPE_GLOBAL_REWARD)).toBe(
+      'Rewards'
+    );
+    expect(
+      getToAccountTypeLabel(AccountType.ACCOUNT_TYPE_REWARD_AVERAGE_POSITION)
+    ).toBe('Rewards');
+    expect(
+      getToAccountTypeLabel(AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES)
+    ).toBe('Rewards');
+    expect(
+      getToAccountTypeLabel(AccountType.ACCOUNT_TYPE_REWARD_MAKER_PAID_FEES)
+    ).toBe('Rewards');
+    expect(
+      getToAccountTypeLabel(AccountType.ACCOUNT_TYPE_REWARD_MAKER_RECEIVED_FEES)
+    ).toBe('Rewards');
+    expect(
+      getToAccountTypeLabel(AccountType.ACCOUNT_TYPE_REWARD_MARKET_PROPOSERS)
+    ).toBe('Rewards');
+    expect(
+      getToAccountTypeLabel(AccountType.ACCOUNT_TYPE_REWARD_RELATIVE_RETURN)
+    ).toBe('Rewards');
+    expect(
+      getToAccountTypeLabel(AccountType.ACCOUNT_TYPE_REWARD_RETURN_VOLATILITY)
+    ).toBe('Rewards');
+    expect(
+      getToAccountTypeLabel(AccountType.ACCOUNT_TYPE_REWARD_VALIDATOR_RANKING)
+    ).toBe('Rewards');
+    expect(getToAccountTypeLabel(AccountType.ACCOUNT_TYPE_VESTED_REWARDS)).toBe(
+      'Rewards'
+    );
+    expect(
+      getToAccountTypeLabel(AccountType.ACCOUNT_TYPE_VESTING_REWARDS)
+    ).toBe('Rewards');
+  });
+
+  it('should return "Other" for any other type', () => {
+    expect(getToAccountTypeLabel(undefined)).toBe('Other');
+    expect(getToAccountTypeLabel('unknown' as AccountType)).toBe('Other');
+  });
+});
+
+describe('filterAccountTransfers', () => {
+  it('filters out transactions that are not to or from a treasury account', () => {
+    const data: DeepPartial<ExplorerTreasuryTransfersQuery> = {
+      transfersConnection: {
+        edges: [
+          {
+            node: {
+              transfer: {
+                toAccountType: AccountType.ACCOUNT_TYPE_NETWORK_TREASURY,
+                fromAccountType: AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
+              },
+            },
+          },
+          {
+            node: {
+              transfer: {
+                toAccountType: AccountType.ACCOUNT_TYPE_NETWORK_TREASURY,
+                fromAccountType:
+                  AccountType.ACCOUNT_TYPE_REWARD_AVERAGE_POSITION,
+              },
+            },
+          },
+          {
+            node: {
+              transfer: {
+                toAccountType: AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
+                fromAccountType: AccountType.ACCOUNT_TYPE_NETWORK_TREASURY,
+              },
+            },
+          },
+          {
+            node: {
+              transfer: {
+                toAccountType: AccountType.ACCOUNT_TYPE_REWARD_AVERAGE_POSITION,
+                fromAccountType:
+                  AccountType.ACCOUNT_TYPE_REWARD_LP_RECEIVED_FEES,
+              },
+            },
+          },
+        ],
+      },
+    };
+
+    const result = filterAccountTransfers(
+      data as ExplorerTreasuryTransfersQuery
+    );
+
+    expect(result).toHaveLength(3);
+  });
+
+  it('should return an empty array if no transfers match the filter', () => {
+    const data: DeepPartial<ExplorerTreasuryTransfersQuery> = {
+      transfersConnection: {
+        edges: [
+          {
+            node: {
+              transfer: {
+                toAccountType: AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
+                fromAccountType: AccountType.ACCOUNT_TYPE_FEES_INFRASTRUCTURE,
+              },
+            },
+          },
+          {
+            node: {
+              transfer: {
+                toAccountType: AccountType.ACCOUNT_TYPE_REWARD_AVERAGE_POSITION,
+                fromAccountType:
+                  AccountType.ACCOUNT_TYPE_REWARD_AVERAGE_POSITION,
+              },
+            },
+          },
+        ],
+      },
+    };
+
+    const result = filterAccountTransfers(
+      data as ExplorerTreasuryTransfersQuery
+    );
+
+    expect(result).toHaveLength(0);
+  });
+});
+
+describe('NetworkTransfersTable', () => {
+  it('renders table headers correctly', async () => {
+    const mocks = [
+      {
+        request: {
+          query: ExplorerTreasuryTransfersDocument,
+        },
+        result: {
+          data: {
+            transfersConnection: {
+              edges: [
+                {
+                  node: {
+                    transfer: {
+                      id: '123',
+                      toAccountType: AccountType.ACCOUNT_TYPE_NETWORK_TREASURY,
+                      fromAccountType:
+                        AccountType.ACCOUNT_TYPE_NETWORK_TREASURY,
+                      amount: '100',
+                      asset: {
+                        id: '1',
+                      },
+                      timestamp: '2022-01-01T00:00:00Z',
+                      from: 'network',
+                      to: '7100a8a82ef45adb9efa070cc821c6c5c48172d6dc5f842431549490fe5897a0',
+                      reason: '',
+                      status: 'COMPLETED',
+                      kind: {
+                        __typename: 'OneOffGovernanceTransfer',
+                        deliverOn: '123',
+                      },
+                    },
+                  },
+                },
+              ],
+            },
+          },
+        },
+      },
+    ];
+
+    render(
+      <MockedProvider mocks={mocks} addTypename={true}>
+        <MemoryRouter>
+          <NetworkTransfersTable />
+        </MemoryRouter>
+      </MockedProvider>
+    );
+
+    expect(await screen.findByText('Amount')).toBeInTheDocument();
+    expect(screen.getByText('Asset')).toBeInTheDocument();
+    expect(screen.getByText('Age')).toBeInTheDocument();
+    expect(screen.getByText('From')).toBeInTheDocument();
+    expect(screen.getByText('To')).toBeInTheDocument();
+    expect(screen.getByText('Status')).toBeInTheDocument();
+    expect(screen.getByText('Type')).toBeInTheDocument();
+
+    expect(screen.getByTestId('from-account').textContent).toEqual('Treasury');
+    expect(screen.getByTestId('to-account').textContent).toEqual('7100…97a0');
+    expect(screen.getByTestId('transfer-kind').textContent).toEqual(
+      'Governance'
+    );
+  });
+});