Changed timestamp from age to date (#596)

* Changed timestamp from age to date * Showing relative date consistantly * Added relative date to transaction row * Removed second comp prop * Added tooltip on dates * Forgot about this file
Taraxa-project · Oct 23, 2023 · 27a7035 · 27a7035
1 parent 5ca54f4
commit 27a7035
Show file tree

Hide file tree

Showing 15 changed files with 216 additions and 38 deletions.
diff --git a/packages/taraxa-ui/src/components/BaseTooltip/BaseTooltip.css b/packages/taraxa-ui/src/components/BaseTooltip/BaseTooltip.css
@@ -0,0 +1,42 @@
+.has-tooltip {
+  /*position: relative;*/
+  display: inline;
+}
+.tooltip-wrapper {
+  position: absolute;
+  visibility: hidden;
+}
+.has-tooltip:hover .tooltip-wrapper {
+  visibility: visible;
+  opacity: 0.7;
+  /*top: 30px;*/
+  /*left: 50%;*/
+  /*margin-left: -76px;*/
+  /* z-index: 999; defined above with value of 5 */
+}
+
+.tooltip {
+  display: block;
+  position: relative;
+  top: 2em;
+  right: 100%;
+  /*margin-left: -76px;*/
+  color: #ffffff;
+  background: #000000;
+  text-align: center;
+  border-radius: 3px;
+  padding: 5px;
+  font-size: 12px;
+}
+.tooltip:after {
+  content: '';
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  margin-left: -8px;
+  width: 0;
+  height: 0;
+  border-bottom: 8px solid #000000;
+  border-right: 8px solid transparent;
+  border-left: 8px solid transparent;
+}
diff --git a/packages/taraxa-ui/src/components/BaseTooltip/BaseTooltip.tsx b/packages/taraxa-ui/src/components/BaseTooltip/BaseTooltip.tsx
@@ -0,0 +1,18 @@
+import React, { ReactNode } from 'react';
+import './BaseTooltip.css';
+
+interface BaseTooltipProps {
+  text: string;
+  children: ReactNode;
+}
+
+export const BaseTooltip: React.FC<BaseTooltipProps> = ({ text, children }) => {
+  return (
+    <div className='has-tooltip'>
+      {children}
+      <span className='tooltip-wrapper'>
+        <span className='tooltip'>{text}</span>
+      </span>
+    </div>
+  );
+};
diff --git a/packages/taraxa-ui/src/components/BaseTooltip/index.ts b/packages/taraxa-ui/src/components/BaseTooltip/index.ts
@@ -0,0 +1 @@
+export * from './BaseTooltip';
diff --git a/packages/taraxa-ui/src/components/TransactionDetails/TransactionDetails.tsx b/packages/taraxa-ui/src/components/TransactionDetails/TransactionDetails.tsx
@@ -6,7 +6,7 @@ import { Block, Route } from '../Icons';
 export interface TransactionDetailsProps {
   hash: string;
   transactionCount: number;
-  timeSince: string;
+  timeSince: React.ReactNode;
   hashElement?: React.ReactNode;
   level?: string;
   blockNumber?: string;

diff --git a/packages/taraxa-ui/src/index.ts b/packages/taraxa-ui/src/index.ts
@@ -66,6 +66,7 @@ import TaraxaThemeProvider from './TaraxaThemeProvider';
 import ButtonGroup from './components/ButtonGroup';
 import BaseToggleButtonGroup from './components/BaseToggleButtonGroup';
 import Dropdown from './components/Dropdown';
+import { BaseTooltip } from './components/BaseTooltip';
 
 import {
   Paper,
@@ -175,4 +176,5 @@ export {
   ButtonGroup,
   BaseToggleButtonGroup,
   Dropdown,
+  BaseTooltip,
 };
diff --git a/services/explorer/src/components/Tables/BlocksTable.tsx b/services/explorer/src/components/Tables/BlocksTable.tsx
@@ -10,11 +10,15 @@ import {
   TableBody,
   TablePagination,
   TableContainer,
+  BaseTooltip,
 } from '@taraxa_project/taraxa-ui';
 import { HashLink } from '..';
 import { BlockData } from '../../models';
-import { HashLinkType } from '../../utils';
-import { timestampToAge } from '../../utils/TransactionRow';
+import {
+  HashLinkType,
+  timestampToDate,
+  timestampToFormattedTime,
+} from '../../utils';
 
 export const BlocksTable: React.FC<{
   blocksData: BlockData[];
@@ -97,7 +101,9 @@ export const BlocksTable: React.FC<{
               blocksData.map((block, i) => (
                 <TableRow key={`${block.hash}-${i}`}>
                   <TableCell variant='body'>
-                    {timestampToAge(block.timestamp)}
+                    <BaseTooltip text={timestampToDate(block.timestamp)}>
+                      {timestampToFormattedTime(block.timestamp)}
+                    </BaseTooltip>
                   </TableCell>
                   {type === 'dag' && (
                     <TableCell variant='body'>{block.level}</TableCell>

diff --git a/services/explorer/src/components/Tables/TransactionsTable.tsx b/services/explorer/src/components/Tables/TransactionsTable.tsx
@@ -11,10 +11,17 @@ import {
   Icons,
   EmptyTable,
   theme,
+  BaseTooltip,
 } from '@taraxa_project/taraxa-ui';
 import { AddressLink, HashLink } from '../Links';
-import { statusToLabel, timestampToAge } from '../../utils/TransactionRow';
-import { formatTransactionStatus, HashLinkType, zeroX } from '../../utils';
+import { statusToLabel } from '../../utils/TransactionRow';
+import {
+  formatTransactionStatus,
+  HashLinkType,
+  timestampToDate,
+  timestampToFormattedTime,
+  zeroX,
+} from '../../utils';
 import { Transaction as TransactionBase } from '../../models';
 
 export interface Transaction extends TransactionBase {
@@ -175,7 +182,15 @@ export const TransactionsTable: React.FC<TransactionsTableProps> = ({
                     {statusToLabel(formatTransactionStatus(tx.status))}
                   </TableCell>
                   <TableCell variant='body' width='5rem !important'>
-                    {timestampToAge(tx.block?.timestamp || tx.timestamp)}
+                    <BaseTooltip
+                      text={timestampToDate(
+                        tx.block?.timestamp || tx.timestamp
+                      )}
+                    >
+                      {timestampToFormattedTime(
+                        tx.block?.timestamp || tx.timestamp
+                      )}
+                    </BaseTooltip>
                   </TableCell>
                   <TableCell variant='body' width='5rem !important'>
                     {tx.value?.toString()}

diff --git a/services/explorer/src/models/TableData.ts b/services/explorer/src/models/TableData.ts
@@ -17,22 +17,22 @@ export interface TransactionTableData {
 }
 
 export interface TransactionTableRow {
-  timestamp: string;
+  timestamp: JSX.Element;
   block: JSX.Element;
   status: JSX.Element;
   txHash: JSX.Element;
   value: string;
 }
 
 export interface DagTableRow {
-  timestamp: string;
+  timestamp: JSX.Element;
   level: number;
   hash: JSX.Element;
   transactionCount: number;
 }
 
 export interface PbftTableRow {
-  timestamp: string;
+  timestamp: JSX.Element;
   block: JSX.Element;
   hash: JSX.Element;
   transactionCount: number;

diff --git a/services/explorer/src/pages/BlockData/DAGDataContainer.tsx b/services/explorer/src/pages/BlockData/DAGDataContainer.tsx
@@ -6,8 +6,8 @@ import {
   Typography,
   CopyTo,
   Icons,
+  BaseTooltip,
 } from '@taraxa_project/taraxa-ui';
-import moment from 'moment';
 import { useNavigate, useParams } from 'react-router-dom';
 import {
   DataRow,
@@ -17,7 +17,13 @@ import {
   TransactionIcon,
 } from '../../components';
 import { useDAGDataContainerEffects } from './DAGDataContainer.effects';
-import { deZeroX, HashLinkType, zeroX } from '../../utils';
+import {
+  deZeroX,
+  HashLinkType,
+  timestampToDate,
+  timestampToFormattedTime,
+  zeroX,
+} from '../../utils';
 import { useCopyToClipboard } from '../../hooks/useCopyToClipboard';
 import { TableTabsProps } from '../../models';
 import useStyles from './DAGDataContainer.styles';
@@ -144,9 +150,17 @@ const DAGDataContainer = (): JSX.Element => {
               {blockData.timestamp && (
                 <DataRow
                   title='Timestamp'
-                  data={`${moment
-                    .unix(+(blockData ? blockData.timestamp : 0))
-                    .format('ddd, D MMM gggg (HH:mm:ss)')} GMT`}
+                  data={
+                    <BaseTooltip
+                      text={timestampToDate(
+                        +(blockData ? blockData.timestamp : 0)
+                      )}
+                    >
+                      {timestampToFormattedTime(
+                        +(blockData ? blockData.timestamp : 0)
+                      )}
+                    </BaseTooltip>
+                  }
                 />
               )}
               {(blockData?.level ||

diff --git a/services/explorer/src/pages/Home/Home.effects.tsx b/services/explorer/src/pages/Home/Home.effects.tsx
@@ -3,9 +3,12 @@ import React, { useEffect, useState } from 'react';
 import { useQuery } from 'urql';
 import { useExplorerLoader } from '../../hooks/useLoader';
 import { useExplorerNetwork } from '../../hooks/useExplorerNetwork';
-import { timestampToAge } from '../../utils/TransactionRow';
 import { HashLink } from '../../components';
-import { HashLinkType } from '../../utils';
+import {
+  HashLinkType,
+  timestampToDate,
+  timestampToFormattedTime,
+} from '../../utils';
 import { useNodeStateContext } from '../../hooks';
 import {
   blocksQuery,
@@ -15,6 +18,7 @@ import {
 } from '../../api';
 import { DagBlock, PbftBlock } from '../../models';
 import cleanDeep from 'clean-deep';
+import { BaseTooltip } from '@taraxa_project/taraxa-ui';
 
 export const useHomeEffects = () => {
   const { finalBlock, dagBlockPeriod } = useNodeStateContext();
@@ -112,7 +116,11 @@ export const useHomeEffects = () => {
         level: tx.level?.toString(),
         hash: tx.hash,
         transactionCount: tx.transactionCount,
-        timeSince: timestampToAge(tx.timestamp),
+        timeSince: (
+          <BaseTooltip text={timestampToDate(tx.timestamp)}>
+            {timestampToFormattedTime(tx.timestamp)}
+          </BaseTooltip>
+        ),
         hashElement: <HashLink linkType={HashLinkType.BLOCKS} hash={tx.hash} />,
       };
     });
@@ -128,7 +136,11 @@ export const useHomeEffects = () => {
         blockNumber: tx.number?.toString(),
         hash: tx.hash,
         transactionCount: tx.transactionCount,
-        timeSince: timestampToAge(tx.timestamp),
+        timeSince: (
+          <BaseTooltip text={timestampToDate(tx.timestamp)}>
+            {timestampToFormattedTime(tx.timestamp)}
+          </BaseTooltip>
+        ),
         hashElement: <HashLink linkType={HashLinkType.PBFT} hash={tx.hash} />,
       };
     });

diff --git a/services/explorer/src/pages/PBFTData/PBFTDataContainer.tsx b/services/explorer/src/pages/PBFTData/PBFTDataContainer.tsx
@@ -6,8 +6,8 @@ import {
   Typography,
   CopyTo,
   Icons,
+  BaseTooltip,
 } from '@taraxa_project/taraxa-ui';
-import moment from 'moment';
 import { useParams } from 'react-router-dom';
 import {
   DataRow,
@@ -17,7 +17,13 @@ import {
   TransactionIcon,
 } from '../../components';
 import { usePBFTDataContainerEffects } from './PBFTDataContainer.effects';
-import { HashLinkType, unwrapIdentifier, zeroX } from '../../utils';
+import {
+  HashLinkType,
+  timestampToDate,
+  timestampToFormattedTime,
+  unwrapIdentifier,
+  zeroX,
+} from '../../utils';
 import { useCopyToClipboard } from '../../hooks/useCopyToClipboard';
 import { TableTabsProps } from '../../models';
 import useStyles from './PBFTDataContainer.styles';
@@ -173,9 +179,13 @@ const PBFTDataContainer = (): JSX.Element => {
           {blockData.timestamp && (
             <DataRow
               title='Timestamp'
-              data={`${moment
-                .unix(+(blockData.timestamp || 0))
-                .format('ddd, D MMM gggg (HH:mm:ss)')} GMT`}
+              data={
+                <BaseTooltip
+                  text={timestampToDate(+(blockData.timestamp || 0))}
+                >
+                  {timestampToFormattedTime(+(blockData.timestamp || 0))}
+                </BaseTooltip>
+              }
             />
           )}
           {(blockData.number || blockData.nonce || blockData.timestamp) && (

diff --git a/services/explorer/src/pages/TransactionData/TransactionData.tsx b/services/explorer/src/pages/TransactionData/TransactionData.tsx
@@ -5,6 +5,7 @@ import {
   Paper,
   Typography,
   CopyTo,
+  BaseTooltip,
 } from '@taraxa_project/taraxa-ui';
 import { useParams } from 'react-router-dom';
 import {
@@ -17,11 +18,12 @@ import {
 import {
   HashLinkType,
   statusToLabel,
-  timestampToAge,
   formatTransactionStatus,
   getTransactionType,
   TransactionType,
   displayWeiOrTara,
+  timestampToFormattedTime,
+  timestampToDate,
 } from '../../utils';
 import { useTransactionDataContainerEffects } from './TransactionData.effects';
 import { useCopyToClipboard } from '../../hooks/useCopyToClipboard';
@@ -116,7 +118,15 @@ const TransactionDataContainer = (): JSX.Element => {
               />
               <DataRow
                 title='Timestamp'
-                data={timestampToAge(transactionData?.block?.timestamp)}
+                data={
+                  <BaseTooltip
+                    text={timestampToDate(+transactionData?.block?.timestamp)}
+                  >
+                    {timestampToFormattedTime(
+                      +transactionData?.block?.timestamp
+                    )}
+                  </BaseTooltip>
+                }
               />
               <DataRow
                 title='Block'