ghost-portal/packages/react-query/src/TimeNow.tsx
Arjun Porwal 9c1c4ee96f
Improve block time handling for chains with elastic scaling (#11876)
* fix: last block timer

* refactor: update BlockHeader and BlockHeaders to use AugmentedBlockHeader type and add blockTime calculation

* refactor: remove isLast prop from BlockHeader and update BlockHeaders mapping
fix: update label in Summary component from 'target' to 'slot'
fix: improve block time calculation in BlockAuthors context

* refactor: update BlockHeader to accept multiple headers and group by timestamp in BlockHeaders

* refactor: update BlockHeader time formatting and adjust display value units

* refactor: simplify BlockAuthorsCtxRoot by removing blockTime calculation and parent timestamp retrieval

* feat: enhance calcDelay function to handle elastic scaling and distribute delays across blocks
2025-10-06 09:55:47 +05:30

35 lines
835 B
TypeScript

// Copyright 2017-2025 @polkadot/react-query authors & contributors
// SPDX-License-Identifier: Apache-2.0
import type { Moment } from '@polkadot/types/interfaces';
import React, { useMemo } from 'react';
import Elapsed from './Elapsed.js';
interface Props {
children?: React.ReactNode;
className?: string;
label?: React.ReactNode;
value?: Moment;
}
function TimeNow ({ children, className = '', label, value }: Props): React.ReactElement<Props> {
const timestamp = Date.now();
const [now, hasValue] = useMemo(
() => [value || timestamp, !!(value || timestamp)],
[timestamp, value]
);
return (
<div className={`${className} ${hasValue ? '' : '--tmp'}`}>
{label || ''}
<Elapsed value={hasValue ? now : Date.now()} />
{children}
</div>
);
}
export default React.memo(TimeNow);