diff --git a/apps/explorer/src/app/components/time-ago/index.tsx b/apps/explorer/src/app/components/time-ago/index.tsx index e1b4ce672..7c342c8ff 100644 --- a/apps/explorer/src/app/components/time-ago/index.tsx +++ b/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')}; } diff --git a/apps/explorer/src/app/components/txs/details/tx-details-wrapper.tsx b/apps/explorer/src/app/components/txs/details/tx-details-wrapper.tsx index 69d089fe2..351e7e001 100644 --- a/apps/explorer/src/app/components/txs/details/tx-details-wrapper.tsx +++ b/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( + `${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 = ; + child = ( + + ); } else if (txData.type === 'Validator Heartbeat') { - child = ; + child = ( + + ); } else { child = {JSON.stringify(txData)}; } diff --git a/apps/explorer/src/app/components/txs/details/tx-hearbeat.tsx b/apps/explorer/src/app/components/txs/details/tx-hearbeat.tsx index 7d552e7d3..a64853f61 100644 --- a/apps/explorer/src/app/components/txs/details/tx-hearbeat.tsx +++ b/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 ( @@ -64,6 +71,20 @@ export const TxDetailsHeartbeat = ({ {t('Submitter')} {pubKey ? : '-'} + + {t('Block')} + + + + {t('Time')} + {time ? ( + + {time} ( ) + + ) : ( + '-' + )} + {t('Node')} diff --git a/apps/explorer/src/app/components/txs/details/tx-order.tsx b/apps/explorer/src/app/components/txs/details/tx-order.tsx index d050955c0..4cedf9d1d 100644 --- a/apps/explorer/src/app/components/txs/details/tx-order.tsx +++ b/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 ( @@ -32,6 +41,20 @@ export const TxDetailsOrder = ({ txData, pubKey }: TxDetailsOrderProps) => { {t('Submitter')} {pubKey ? : '-'} + + {t('Block')} + + + + {t('Time')} + {time ? ( + + {time} ( ) + + ) : ( + '-' + )} + {t('Market')} diff --git a/apps/explorer/src/app/routes/blocks/id/block.tsx b/apps/explorer/src/app/routes/blocks/id/block.tsx index 9d3dafd5e..39c916f6c 100644 --- a/apps/explorer/src/app/routes/blocks/id/block.tsx +++ b/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'; diff --git a/apps/explorer/src/app/routes/txs/id/tx-details.tsx b/apps/explorer/src/app/routes/txs/id/tx-details.tsx index a946f04c6..3e32ce880 100644 --- a/apps/explorer/src/app/routes/txs/id/tx-details.tsx +++ b/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 = ( ); @@ -36,19 +34,7 @@ export const TxDetails = ({ txData, pubKey, className }: TxDetailsProps) => { {truncatedSubmitter} - - -

- Block{' '} - - {txData.block} - - {', '} - Index {txData.index} -

+ ); };