feat(explorer): add node announce tx view (#2888)

apps/explorer/.env.devnet

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

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

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

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

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