block num and timestamp

.eslintrc.js

+const RESTRICTED_MODULES = {
+  paths: [
+    { name: 'dayjs', message: 'Please use lib/date/dayjs.ts' },
+  ],
+};
 module.exports = {
   env: {
     es6: true,
@@ -195,6 +200,8 @@ module.exports = {
       },
     ],
 
+    'no-restricted-imports': [ 'error', RESTRICTED_MODULES ],
+
     'react/jsx-key': 'error',
     'react/jsx-no-bind': [ 'error', {
       ignoreRefs: true,

icons/clock.svg

+<svg viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.5 11a7.5 7.5 0 1 1 15 0 7.5 7.5 0 0 1-15 0ZM11 1C5.477 1 1 5.477 1 11s4.477 10 10 10 10-4.477 10-10S16.523 1 11 1Zm1.25 5a1.25 1.25 0 1 0-2.5 0v5c0 .69.56 1.25 1.25 1.25h5a1.25 1.25 0 1 0 0-2.5h-3.75V6Z" fill="#718096" stroke="#fff" stroke-width=".6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

lib/date/dayjs.ts

+// eslint-disable-next-line no-restricted-imports
+import dayjs from 'dayjs';
+import localizedFormat from 'dayjs/plugin/localizedFormat';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import updateLocale from 'dayjs/plugin/updateLocale';
+
+dayjs.locale('en');
+
+dayjs.extend(relativeTime);
+dayjs.extend(updateLocale);
+dayjs.extend(localizedFormat);
+
+dayjs.updateLocale('en', {
+  formats: {
+    LLLL: 'MMMM-DD-YYYY HH:mm:ss A Z UTC',
+  },
+});
+
+export default dayjs;

package.json

@@ -25,6 +25,7 @@
     "@tanstack/react-query": "^4.0.10",
     "@tanstack/react-query-devtools": "^4.0.10",
     "@types/react-scroll": "^1.8.4",
+    "dayjs": "^1.11.5",
     "framer-motion": "^6",
     "lodash": "^4.0.0",
     "next": "12.2.5",

ui/shared/DetailsInfoItem.tsx

@@ -12,7 +12,7 @@ interface Props {
 const DetailsInfoItem = ({ title, hint, children }: Props) => {
   return (
     <>
-      <GridItem>
+      <GridItem py={ 2 }>
         <Flex columnGap={ 2 } alignItems="center">
           <Tooltip
             label={ hint }
@@ -26,7 +26,7 @@ const DetailsInfoItem = ({ title, hint, children }: Props) => {
           <Text fontWeight={ 500 } whiteSpace="nowrap">{ title }</Text>
         </Flex>
       </GridItem>
-      <GridItem display="flex" alignItems="center">{ children }</GridItem>
+      <GridItem display="flex" alignItems="center" py={ 2 }>{ children }</GridItem>
     </>
   );
 };

ui/tx/TxDetails.tsx

-import { Grid } from '@chakra-ui/react';
+import { Grid, Text, Icon } from '@chakra-ui/react';
 import React from 'react';
 
 import { tx } from 'data/tx';
+import clockIcon from 'icons/clock.svg';
+import dayjs from 'lib/date/dayjs';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import type { Props as TxStatusProps } from 'ui/tx/TxStatus';
 import TxStatus from 'ui/tx/TxStatus';
 
 const TxDetails = () => {
+  const leftSeparatorStyles = {
+    ml: 3,
+    pl: 3,
+    borderLeftWidth: '1px',
+    borderLeftColor: 'gray.700',
+  };
+
   return (
     <Grid columnGap={ 8 } rowGap={ 3 } templateColumns="auto 1fr">
       <DetailsInfoItem
@@ -23,6 +32,26 @@ const TxDetails = () => {
       >
         <TxStatus status={ tx.status as TxStatusProps['status'] }/>
       </DetailsInfoItem>
+      <DetailsInfoItem
+        title="Block"
+        hint="Block number containing the transaction."
+      >
+        <Text>{ tx.block_num }</Text>
+        <Text { ...leftSeparatorStyles } borderLeftColor="gray.500" variant="secondary">
+          { tx.confirmation_num } Block confirmations
+        </Text>
+      </DetailsInfoItem>
+      <DetailsInfoItem
+        title="Timestamp"
+        hint="Date & time of transaction inclusion, including length of time for confirmation."
+      >
+        <Icon as={ clockIcon } boxSize={ 5 }/>
+        <Text ml={ 1 }>{ dayjs(tx.timestamp).fromNow() }</Text>
+        <Text { ...leftSeparatorStyles }>{ dayjs(tx.timestamp).format('LLLL') }</Text>
+        <Text { ...leftSeparatorStyles } borderLeftColor="gray.500" variant="secondary">
+          Confirmed within { tx.confirmation_duration } secs
+        </Text>
+      </DetailsInfoItem>
     </Grid>
   );
 };

yarn.lock

@@ -2485,6 +2485,11 @@ data-uri-to-buffer@^4.0.0:
   resolved "https://registry.yarnpkg.com/data-uri-to-buffer/-/data-uri-to-buffer-4.0.0.tgz#b5db46aea50f6176428ac05b73be39a57701a64b"
   integrity sha512-Vr3mLBA8qWmcuschSLAOogKgQ/Jwxulv3RNE4FXnYWRGujzrRWQI4m12fQqRkwX06C0KanhLr4hK+GydchZsaA==
 
+dayjs@^1.11.5:
+  version "1.11.5"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.5.tgz#00e8cc627f231f9499c19b38af49f56dc0ac5e93"
+  integrity sha512-CAdX5Q3YW3Gclyo5Vpqkgpj8fSdLQcRuzfX6mC6Phy0nfJ0eGYOeS7m4mt2plDWLAtA4TqTakvbboHvUxfe4iA==
+
 debug@4, debug@^4.1.0, debug@^4.1.1, debug@^4.3.2, debug@^4.3.4:
   version "4.3.4"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"