Files
explore/ui/shared/DetailsTimestamp.tsx
T
tom goriunovandGitHub d0c66e1e3f Graceful service degradation: tx details tab (#1525)
* display main data

* display rest of tx fields

* placeholder data

* always show tabs

* manage error and retries on details tab

* don't retry if degraded view is active

* fix tests

* fix tx receipt

* change styles and wording for warning

* tweaks

* gray alert style change and update screenshots

* add retries to RPC call

* fixes after merge
2024-01-30 10:39:23 +04:00

30 lines
815 B
TypeScript

import { Skeleton } from '@chakra-ui/react';
import React from 'react';
import dayjs from 'lib/date/dayjs';
import IconSvg from 'ui/shared/IconSvg';
import TextSeparator from 'ui/shared/TextSeparator';
type Props = {
// should be string, will be fixed on the back-end
timestamp: string | number;
isLoading?: boolean;
}
const DetailsTimestamp = ({ timestamp, isLoading }: Props) => {
return (
<>
<IconSvg name="clock" boxSize={ 5 } color="gray.500" isLoading={ isLoading }/>
<Skeleton isLoaded={ !isLoading } ml={ 2 }>
{ dayjs(timestamp).fromNow() }
</Skeleton>
<TextSeparator color="gray.500"/>
<Skeleton isLoaded={ !isLoading } whiteSpace="normal">
{ dayjs(timestamp).format('llll') }
</Skeleton>
</>
);
};
export default DetailsTimestamp;