ghost-portal/packages/react-query/src/TimeNow.tsx
Jaco 8a95b1a93b
Handle BN type-only imports correctly (#5428)
* Handle BN type-only imports correctly

* lint fixes
2021-06-03 10:41:55 +02:00

43 lines
1004 B
TypeScript

// Copyright 2017-2021 @polkadot/react-query authors & contributors
// SPDX-License-Identifier: Apache-2.0
import type BN from 'bn.js';
import type { Moment } from '@polkadot/types/interfaces';
import React, { useEffect, useState } from 'react';
import { useApi, useCall } from '@polkadot/react-hooks';
import Elapsed from './Elapsed';
interface Props {
children?: React.ReactNode;
className?: string;
label?: React.ReactNode;
value?: Moment;
}
function TimeNow ({ children, className = '', label, value }: Props): React.ReactElement<Props> | null {
const { api } = useApi();
const timestamp = useCall<Moment>(!value && api.query.timestamp?.now);
const [now, setNow] = useState<BN | undefined>();
useEffect((): void => {
setNow(value || timestamp);
}, [timestamp, value]);
if (!now) {
return null;
}
return (
<div className={className}>
{label || ''}
<Elapsed value={now} />
{children}
</div>
);
}
export default React.memo(TimeNow);