Merge pull request #2095 from blockscout/fe-2049

Add tooltip with full date on "age" fields
blockscout · Jul 22, 2024 · bf34442 · bf34442
2 parents 7ecea8b + 8a49493
commit bf34442
Show file tree

Hide file tree

Showing 57 changed files with 460 additions and 305 deletions.
diff --git a/ui/address/accountHistory/AddressAccountHistoryListItem.tsx b/ui/address/accountHistory/AddressAccountHistoryListItem.tsx
@@ -3,11 +3,11 @@ import React, { useMemo } from 'react';
 
 import type { NovesResponseData } from 'types/api/noves';
 
-import dayjs from 'lib/date/dayjs';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkInternal from 'ui/shared/links/LinkInternal';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import NovesFromTo from 'ui/shared/Noves/NovesFromTo';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 type Props = {
   isPlaceholderData: boolean;
@@ -40,9 +40,12 @@ const AddressAccountHistoryListItem = (props: Props) => {
                 Action
             </Text>
           </Flex>
-          <Text color="text_secondary" fontSize="sm" fontWeight={ 500 }>
-            { dayjs(props.tx.rawTransactionData.timestamp * 1000).fromNow() }
-          </Text>
+          <TimeAgoWithTooltip
+            timestamp={ (props.tx.rawTransactionData.timestamp * 1000).toString() }
+            color="text_secondary"
+            borderRadius="sm"
+            fontWeight={ 500 }
+          />
         </Flex>
       </Skeleton>
       <Skeleton borderRadius="sm" isLoaded={ !props.isPlaceholderData }>

diff --git a/ui/address/accountHistory/AddressAccountHistoryTableItem.tsx b/ui/address/accountHistory/AddressAccountHistoryTableItem.tsx
@@ -1,12 +1,12 @@
-import { Td, Tr, Skeleton, Text, Box } from '@chakra-ui/react';
+import { Td, Tr, Skeleton, Box } from '@chakra-ui/react';
 import React, { useMemo } from 'react';
 
 import type { NovesResponseData } from 'types/api/noves';
 
-import dayjs from 'lib/date/dayjs';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkInternal from 'ui/shared/links/LinkInternal';
 import NovesFromTo from 'ui/shared/Noves/NovesFromTo';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 type Props = {
   isPlaceholderData: boolean;
@@ -25,11 +25,13 @@ const AddressAccountHistoryTableItem = (props: Props) => {
   return (
     <Tr>
       <Td px={ 3 } py="18px" fontSize="sm" >
-        <Skeleton borderRadius="sm" flexShrink={ 0 } isLoaded={ !props.isPlaceholderData }>
-          <Text as="span" color="text_secondary">
-            { dayjs(props.tx.rawTransactionData.timestamp * 1000).fromNow() }
-          </Text>
-        </Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ (props.tx.rawTransactionData.timestamp * 1000).toString() }
+          isLoading={ props.isPlaceholderData }
+          color="text_secondary"
+          borderRadius="sm"
+          flexShrink={ 0 }
+        />
       </Td>
       <Td px={ 3 } py="18px" fontSize="sm" >
         <Skeleton borderRadius="sm" isLoaded={ !props.isPlaceholderData }>

diff --git a/ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx b/ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx
@@ -6,19 +6,18 @@ import type { Block } from 'types/api/block';
 
 import config from 'configs/app';
 import getBlockTotalReward from 'lib/block/getBlockTotalReward';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import { currencyUnits } from 'lib/units';
 import BlockGasUsed from 'ui/shared/block/BlockGasUsed';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 type Props = Block & {
   page: number;
   isLoading: boolean;
 };
 
 const AddressBlocksValidatedListItem = (props: Props) => {
-  const timeAgo = useTimeAgoIncrement(props.timestamp, props.page === 1);
   const totalReward = getBlockTotalReward(props);
 
   return (
@@ -30,9 +29,13 @@ const AddressBlocksValidatedListItem = (props: Props) => {
           noIcon
           fontWeight={ 700 }
         />
-        <Skeleton isLoaded={ !props.isLoading } color="text_secondary" display="inline-block">
-          <span>{ timeAgo }</span>
-        </Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ props.timestamp }
+          enableIncrement={ props.page === 1 }
+          isLoading={ props.isLoading }
+          color="text_secondary"
+          display="inline-block"
+        />
       </Flex>
       <Flex columnGap={ 2 } w="100%">
         <Skeleton isLoaded={ !props.isLoading } fontWeight={ 500 } flexShrink={ 0 }>Txn</Skeleton>

diff --git a/ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx b/ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx
@@ -6,17 +6,16 @@ import type { Block } from 'types/api/block';
 
 import config from 'configs/app';
 import getBlockTotalReward from 'lib/block/getBlockTotalReward';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import BlockGasUsed from 'ui/shared/block/BlockGasUsed';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 type Props = Block & {
   page: number;
   isLoading: boolean;
 };
 
 const AddressBlocksValidatedTableItem = (props: Props) => {
-  const timeAgo = useTimeAgoIncrement(props.timestamp, props.page === 1);
   const totalReward = getBlockTotalReward(props);
 
   return (
@@ -32,9 +31,13 @@ const AddressBlocksValidatedTableItem = (props: Props) => {
         />
       </Td>
       <Td>
-        <Skeleton isLoaded={ !props.isLoading } color="text_secondary" display="inline-block">
-          <span>{ timeAgo }</span>
-        </Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ props.timestamp }
+          enableIncrement={ props.page === 1 }
+          isLoading={ props.isLoading }
+          color="text_secondary"
+          display="inline-block"
+        />
       </Td>
       <Td>
         <Skeleton isLoaded={ !props.isLoading } display="inline-block" fontWeight="500">

diff --git a/ui/address/coinBalance/AddressCoinBalanceListItem.tsx b/ui/address/coinBalance/AddressCoinBalanceListItem.tsx
@@ -5,11 +5,11 @@ import React from 'react';
 import type { AddressCoinBalanceHistoryItem } from 'types/api/address';
 
 import { WEI, ZERO } from 'lib/consts';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import { currencyUnits } from 'lib/units';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 type Props = AddressCoinBalanceHistoryItem & {
   page: number;
@@ -19,7 +19,6 @@ type Props = AddressCoinBalanceHistoryItem & {
 const AddressCoinBalanceListItem = (props: Props) => {
   const deltaBn = BigNumber(props.delta).div(WEI);
   const isPositiveDelta = deltaBn.gte(ZERO);
-  const timeAgo = useTimeAgoIncrement(props.block_timestamp, props.page === 1);
 
   return (
     <ListItemMobile rowGap={ 2 } isAnimated>
@@ -61,7 +60,12 @@ const AddressCoinBalanceListItem = (props: Props) => {
       ) }
       <Flex columnGap={ 2 } w="100%">
         <Skeleton isLoaded={ !props.isLoading } fontWeight={ 500 } flexShrink={ 0 }>Age</Skeleton>
-        <Skeleton isLoaded={ !props.isLoading } color="text_secondary"><span>{ timeAgo }</span></Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ props.block_timestamp }
+          enableIncrement={ props.page === 1 }
+          isLoading={ props.isLoading }
+          color="text_secondary"
+        />
       </Flex>
     </ListItemMobile>
   );

diff --git a/ui/address/coinBalance/AddressCoinBalanceTableItem.tsx b/ui/address/coinBalance/AddressCoinBalanceTableItem.tsx
@@ -5,9 +5,9 @@ import React from 'react';
 import type { AddressCoinBalanceHistoryItem } from 'types/api/address';
 
 import { WEI, ZERO } from 'lib/consts';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 
 type Props = AddressCoinBalanceHistoryItem & {
   page: number;
@@ -17,7 +17,6 @@ type Props = AddressCoinBalanceHistoryItem & {
 const AddressCoinBalanceTableItem = (props: Props) => {
   const deltaBn = BigNumber(props.delta).div(WEI);
   const isPositiveDelta = deltaBn.gte(ZERO);
-  const timeAgo = useTimeAgoIncrement(props.block_timestamp, props.page === 1);
 
   return (
     <Tr>
@@ -43,9 +42,13 @@ const AddressCoinBalanceTableItem = (props: Props) => {
         ) }
       </Td>
       <Td>
-        <Skeleton isLoaded={ !props.isLoading } color="text_secondary" display="inline-block">
-          <span>{ timeAgo }</span>
-        </Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ props.block_timestamp }
+          enableIncrement={ props.page === 1 }
+          isLoading={ props.isLoading }
+          color="text_secondary"
+          display="inline-block"
+        />
       </Td>
       <Td isNumeric pr={ 1 }>
         <Skeleton isLoaded={ !props.isLoading } color="text_secondary" display="inline-block">

diff --git a/ui/address/internals/AddressIntTxsListItem.tsx b/ui/address/internals/AddressIntTxsListItem.tsx
@@ -5,14 +5,14 @@ import React from 'react';
 import type { InternalTransaction } from 'types/api/internalTransaction';
 
 import config from 'configs/app';
-import dayjs from 'lib/date/dayjs';
 import { currencyUnits } from 'lib/units';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import Tag from 'ui/shared/chakra/Tag';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import TxStatus from 'ui/shared/statusTag/TxStatus';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 
 type Props = InternalTransaction & { currentAddress: string; isLoading?: boolean };
@@ -47,9 +47,13 @@ const TxInternalsListItem = ({
           fontWeight={ 700 }
           truncation="constant_long"
         />
-        <Skeleton isLoaded={ !isLoading } color="text_secondary" fontWeight="400" fontSize="sm">
-          <span>{ dayjs(timestamp).fromNow() }</span>
-        </Skeleton>
+        <TimeAgoWithTooltip
+          timestamp={ timestamp }
+          isLoading={ isLoading }
+          color="text_secondary"
+          fontWeight="400"
+          fontSize="sm"
+        />
       </Flex>
       <HStack spacing={ 1 }>
         <Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Block</Skeleton>

diff --git a/ui/address/internals/AddressIntTxsTableItem.tsx b/ui/address/internals/AddressIntTxsTableItem.tsx
@@ -5,12 +5,12 @@ import React from 'react';
 import type { InternalTransaction } from 'types/api/internalTransaction';
 
 import config from 'configs/app';
-import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import Tag from 'ui/shared/chakra/Tag';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxStatus from 'ui/shared/statusTag/TxStatus';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 
 type Props = InternalTransaction & { currentAddress: string; isLoading?: boolean }
@@ -32,8 +32,6 @@ const AddressIntTxsTableItem = ({
   const typeTitle = TX_INTERNALS_ITEMS.find(({ id }) => id === type)?.title;
   const toData = to ? to : createdContract;
 
-  const timeAgo = useTimeAgoIncrement(timestamp, true);
-
   return (
     <Tr alignItems="top">
       <Td verticalAlign="middle">
@@ -45,11 +43,14 @@ const AddressIntTxsTableItem = ({
             noIcon
             truncation="constant_long"
           />
-          { timestamp && (
-            <Skeleton isLoaded={ !isLoading } color="text_secondary" fontWeight="400" fontSize="sm">
-              <span>{ timeAgo }</span>
-            </Skeleton>
-          ) }
+          <TimeAgoWithTooltip
+            timestamp={ timestamp }
+            enableIncrement
+            isLoading={ isLoading }
+            color="text_secondary"
+            fontWeight="400"
+            fontSize="sm"
+          />
         </Flex>
       </Td>
       <Td verticalAlign="middle">

diff --git a/ui/blocks/BlockTimestamp.tsx b/ui/blocks/BlockTimestamp.tsx
diff --git a/ui/blocks/BlocksListItem.tsx b/ui/blocks/BlocksListItem.tsx
@@ -12,13 +12,13 @@ import getBlockTotalReward from 'lib/block/getBlockTotalReward';
 import { WEI } from 'lib/consts';
 import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
 import { currencyUnits } from 'lib/units';
-import BlockTimestamp from 'ui/blocks/BlockTimestamp';
 import BlockGasUsed from 'ui/shared/block/BlockGasUsed';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkInternal from 'ui/shared/links/LinkInternal';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
 interface Props {
@@ -46,7 +46,14 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
             fontWeight={ 600 }
           />
         </Flex>
-        <BlockTimestamp ts={ data.timestamp } isEnabled={ enableTimeIncrement } isLoading={ isLoading }/>
+        <TimeAgoWithTooltip
+          timestamp={ data.timestamp }
+          enableIncrement={ enableTimeIncrement }
+          isLoading={ isLoading }
+          color="text_secondary"
+          fontWeight={ 400 }
+          display="inline-block"
+        />
       </Flex>
       <Flex columnGap={ 2 }>
         <Text fontWeight={ 500 }>Size</Text>

diff --git a/ui/blocks/BlocksTableItem.tsx b/ui/blocks/BlocksTableItem.tsx
@@ -10,12 +10,12 @@ import { route } from 'nextjs-routes';
 import config from 'configs/app';
 import getBlockTotalReward from 'lib/block/getBlockTotalReward';
 import { WEI } from 'lib/consts';
-import BlockTimestamp from 'ui/blocks/BlockTimestamp';
 import BlockGasUsed from 'ui/shared/block/BlockGasUsed';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import IconSvg from 'ui/shared/IconSvg';
 import LinkInternal from 'ui/shared/links/LinkInternal';
+import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
 interface Props {
@@ -56,7 +56,14 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement }: Props) => {
             />
           </Tooltip>
         </Flex>
-        <BlockTimestamp ts={ data.timestamp } isEnabled={ enableTimeIncrement } isLoading={ isLoading }/>
+        <TimeAgoWithTooltip
+          timestamp={ data.timestamp }
+          enableIncrement={ enableTimeIncrement }
+          isLoading={ isLoading }
+          color="text_secondary"
+          fontWeight={ 400 }
+          display="inline-block"
+        />
       </Td>
       <Td fontSize="sm">
         <Skeleton isLoaded={ !isLoading } display="inline-block">