feat(explorer): add time to tx details

apps/explorer/src/app/components/time-ago/index.tsx

@@ -18,7 +18,7 @@ export const TimeAgo = ({ date, ...props }: TimeAgoProps) => {
     return () => clearInterval(int);
   }, [setDistanceToNow, date]);
 
-  if (!date) {
+  if (!date || date.length === 0) {
     return <>{t('Date unknown')}</>;
   }
 

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

@@ -1,15 +1,28 @@
 import React from 'react';
-import { t } from '@vegaprotocol/react-helpers';
+import { DATA_SOURCES } from '../../../config';
+import { t, useFetch } from '@vegaprotocol/react-helpers';
 import { TxDetailsOrder } from './tx-order';
 import type { BlockExplorerTransactionResult } from '../../../routes/types/block-explorer-response';
+import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
 import { TxDetailsHeartbeat } from './tx-hearbeat';
 
 interface TxDetailsWrapperProps {
   txData: BlockExplorerTransactionResult | undefined;
   pubKey: string | undefined;
+  height: string;
 }
 
-export const TxDetailsWrapper = ({ txData, pubKey }: TxDetailsWrapperProps) => {
+export const TxDetailsWrapper = ({
+  txData,
+  pubKey,
+  height,
+}: TxDetailsWrapperProps) => {
+  const {
+    state: { data: blockData, loading, error },
+  } = useFetch<TendermintBlocksResponse>(
+    `${DATA_SOURCES.tendermintUrl}/block?height=${height}`
+  );
+
   if (!txData) {
     return <>{t('Awaiting Block Explorer transaction details')}</>;
   }
@@ -17,9 +30,17 @@ export const TxDetailsWrapper = ({ txData, pubKey }: TxDetailsWrapperProps) => {
   let child;
 
   if (txData.type === 'Submit Order') {
-    child = <TxDetailsOrder txData={txData} pubKey={pubKey} />;
+    child = (
+      <TxDetailsOrder txData={txData} blockData={blockData} pubKey={pubKey} />
+    );
   } else if (txData.type === 'Validator Heartbeat') {
-    child = <TxDetailsHeartbeat txData={txData} pubKey={pubKey} />;
+    child = (
+      <TxDetailsHeartbeat
+        txData={txData}
+        blockData={blockData}
+        pubKey={pubKey}
+      />
+    );
   } else {
     child = <code>{JSON.stringify(txData)}</code>;
   }

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

@@ -6,6 +6,9 @@ import type {
   ValidatorHeartbeat,
 } from '../../../routes/types/block-explorer-response';
 import { BlockLink, NodeLink, PartyLink } from '../../links/';
+import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
+import { TimeAgo } from '../../time-ago';
+import { Block } from '../../../routes/blocks/id';
 
 /**
  * Returns an integer representing how fresh the signature is, ranging from 1 to 500.
@@ -31,6 +34,7 @@ export function scoreFreshness(
 interface TxDetailsHeartbeatProps {
   txData: BlockExplorerTransactionResult | undefined;
   pubKey: string | undefined;
+  blockData: TendermintBlocksResponse | undefined;
 }
 
 /**
@@ -51,12 +55,15 @@ interface TxDetailsHeartbeatProps {
 export const TxDetailsHeartbeat = ({
   txData,
   pubKey,
+  blockData,
 }: TxDetailsHeartbeatProps) => {
   if (!txData) {
     return <>{t('Awaiting Block Explorer transaction details')}</>;
   }
 
   const cmd = txData.command as ValidatorHeartbeat;
+  const time: string = blockData?.result.block.header.time || '';
+  const height: string = blockData?.result.block.header.height || '';
 
   return (
     <KeyValueTable>
@@ -64,6 +71,20 @@ export const TxDetailsHeartbeat = ({
         {t('Submitter')}
         {pubKey ? <PartyLink id={pubKey} /> : '-'}
       </KeyValueTableRow>
+      <KeyValueTableRow>
+        {t('Block')}
+        <BlockLink height={height} />
+      </KeyValueTableRow>
+      <KeyValueTableRow>
+        {t('Time')}
+        {time ? (
+          <span>
+            {time} (<TimeAgo date={time} /> )
+          </span>
+        ) : (
+          '-'
+        )}
+      </KeyValueTableRow>
       <KeyValueTableRow>
         {t('Node')}
         <NodeLink id={cmd.validatorHeartbeat.nodeId} />

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

@@ -5,12 +5,15 @@ import type {
   BlockExplorerTransactionResult,
   SubmitOrder,
 } from '../../../routes/types/block-explorer-response';
-import { PartyLink } from '../../links/';
+import { BlockLink, PartyLink } from '../../links/';
 import { MarketLink } from '../../links/';
+import type { TendermintBlocksResponse } from '../../../routes/blocks/tendermint-blocks-response';
+import { TimeAgo } from '../../time-ago';
 
 interface TxDetailsOrderProps {
   txData: BlockExplorerTransactionResult | undefined;
   pubKey: string | undefined;
+  blockData: TendermintBlocksResponse | undefined;
 }
 
 /**
@@ -19,12 +22,18 @@ interface TxDetailsOrderProps {
  * fetch the actual transaction and not more details about the order. So for now
  * this view is very basic
  */
-export const TxDetailsOrder = ({ txData, pubKey }: TxDetailsOrderProps) => {
+export const TxDetailsOrder = ({
+  txData,
+  pubKey,
+  blockData,
+}: TxDetailsOrderProps) => {
   if (!txData) {
     return <>{t('Awaiting Block Explorer transaction details')}</>;
   }
 
   const cmd = txData.command as SubmitOrder;
+  const time: string = blockData?.result.block.header.time || '';
+  const height: string = blockData?.result.block.header.height || '';
 
   return (
     <KeyValueTable>
@@ -32,6 +41,20 @@ export const TxDetailsOrder = ({ txData, pubKey }: TxDetailsOrderProps) => {
         {t('Submitter')}
         {pubKey ? <PartyLink id={pubKey} /> : '-'}
       </KeyValueTableRow>
+      <KeyValueTableRow>
+        {t('Block')}
+        <BlockLink height={height} />
+      </KeyValueTableRow>
+      <KeyValueTableRow>
+        {t('Time')}
+        {time ? (
+          <span>
+            {time} (<TimeAgo date={time} /> )
+          </span>
+        ) : (
+          '-'
+        )}
+      </KeyValueTableRow>
       <KeyValueTableRow>
         {t('Market')}
         <MarketLink id={cmd.orderSubmission.marketId} />

apps/explorer/src/app/routes/blocks/id/block.tsx

@@ -15,7 +15,6 @@ import { TxsPerBlock } from '../../../components/txs/txs-per-block';
 import { Button } from '@vegaprotocol/ui-toolkit';
 import { Routes } from '../../route-names';
 import { RenderFetched } from '../../../components/render-fetched';
-import { HighlightedLink } from '../../../components/highlighted-link';
 import { t, useFetch } from '@vegaprotocol/react-helpers';
 import { NodeLink } from '../../../components/links';
 

apps/explorer/src/app/routes/txs/id/tx-details.tsx

@@ -19,8 +19,6 @@ export const TxDetails = ({ txData, pubKey, className }: TxDetailsProps) => {
     return <>{t('Awaiting Block Explorer transaction details')}</>;
   }
 
-  console.log('---tx-details-re-render----');
-
   const truncatedSubmitter = (
     <TruncateInline text={pubKey || ''} startChars={5} endChars={5} />
   );
@@ -36,19 +34,7 @@ export const TxDetails = ({ txData, pubKey, className }: TxDetailsProps) => {
           {truncatedSubmitter}
         </Link>
       </h3>
-      <TxDetailsWrapper txData={txData} pubKey={pubKey} />
-
-      <p className="text-m xl:text-m uppercase">
-        Block{' '}
-        <Link
-          className="font-bold underline"
-          to={`/${Routes.BLOCKS}/${txData.block}`}
-        >
-          {txData.block}
-        </Link>
-        {', '}
-        Index {txData.index}
-      </p>
+      <TxDetailsWrapper height={txData.block} txData={txData} pubKey={pubKey} />
     </section>
   );
 };