update block timestamp in list view

lib/consts.ts

@@ -4,3 +4,9 @@ export const WEI = new BigNumber(10 ** 18);
 export const GWEI = new BigNumber(10 ** 9);
 export const WEI_IN_GWEI = WEI.dividedBy(GWEI);
 export const ZERO = new BigNumber(0);
+
+export const SECOND = 1_000;
+export const MINUTE = 60 * SECOND;
+export const HOUR = 60 * MINUTE;
+export const DAY = 24 * HOUR;
+export const WEEK = 7 * DAY;

lib/hooks/useTimeAgoIncrement.tsx

+import React from 'react';
+
+import { DAY, HOUR, MINUTE, SECOND } from 'lib/consts';
+import dayjs from 'lib/date/dayjs';
+
+function getUnits(diff: number) {
+  if (diff < MINUTE) {
+    return [ SECOND, MINUTE ];
+  }
+
+  if (diff < HOUR) {
+    return [ MINUTE, HOUR ];
+  }
+
+  if (diff < DAY) {
+    return [ HOUR, DAY ];
+  }
+
+  return [ DAY, 2 * DAY ];
+}
+
+function getUpdateParams(ts: string) {
+  const timeDiff = Date.now() - new Date(ts).getTime();
+  const [ unit, higherUnit ] = getUnits(timeDiff);
+
+  if (unit === DAY) {
+    return { interval: DAY };
+  }
+
+  const leftover = unit - timeDiff % unit;
+
+  return {
+    startTimeout: unit === SECOND ?
+      0 :
+      // here we assume that in current dayjs locale time difference is rounded by Math.round function
+      // so we have to update displayed value whenever time comes over the middle of the unit interval
+      // since it will be rounded to the upper bound
+      (leftover < unit / 2 ? leftover + unit / 2 : leftover - unit / 2) + SECOND,
+    endTimeout: higherUnit - timeDiff + SECOND,
+    interval: unit,
+  };
+}
+
+export default function useTimeAgoIncrement(ts: string, isEnabled?: boolean) {
+  const [ value, setValue ] = React.useState(dayjs(ts).fromNow());
+
+  React.useEffect(() => {
+    const timeouts: Array<number> = [];
+    const intervals: Array<number> = [];
+
+    const startIncrement = () => {
+      const { startTimeout, interval, endTimeout } = getUpdateParams(ts);
+      if (!startTimeout && !endTimeout) {
+        return;
+      }
+
+      let intervalId: number;
+
+      const startTimeoutId = window.setTimeout(() => {
+        setValue(dayjs(ts).fromNow());
+
+        intervalId = window.setInterval(() => {
+          setValue(dayjs(ts).fromNow());
+        }, interval);
+
+        intervals.push(intervalId);
+      }, startTimeout);
+
+      const endTimeoutId = window.setTimeout(() => {
+        window.clearInterval(intervalId);
+        startIncrement();
+      }, endTimeout);
+
+      timeouts.push(startTimeoutId);
+      timeouts.push(endTimeoutId);
+    };
+
+    isEnabled && startIncrement();
+
+    return () => {
+      timeouts.forEach(window.clearTimeout);
+      intervals.forEach(window.clearInterval);
+    };
+  }, [ isEnabled, ts ]);
+
+  return value;
+}

ui/blocks/BlocksList.tsx

@@ -12,7 +12,8 @@ interface Props {
 const BlocksList = ({ data }: Props) => {
   return (
     <Box mt={ 8 }>
-      { data.map((item) => <BlocksListItem key={ item.height } data={ item }/>) }
+      { /* TODO prop "enableTimeIncrement" should be set to false for second and later pages */ }
+      { data.map((item) => <BlocksListItem key={ item.height } data={ item } enableTimeIncrement/>) }
     </Box>
   );
 };

ui/blocks/BlocksListItem.tsx

@@ -8,7 +8,7 @@ import appConfig from 'configs/app/config';
 import flameIcon from 'icons/flame.svg';
 import getBlockReward from 'lib/block/getBlockReward';
 import { WEI } from 'lib/consts';
-import dayjs from 'lib/date/dayjs';
+import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import link from 'lib/link/link';
 import AccountListItemMobile from 'ui/shared/AccountListItemMobile';
 import AddressLink from 'ui/shared/address/AddressLink';
@@ -18,11 +18,13 @@ import Utilization from 'ui/shared/Utilization';
 interface Props {
   data: Block;
   isPending?: boolean;
+  enableTimeIncrement?: boolean;
 }
 
-const BlocksListItem = ({ data, isPending }: Props) => {
+const BlocksListItem = ({ data, isPending, enableTimeIncrement }: Props) => {
   const spinnerEmptyColor = useColorModeValue('blackAlpha.200', 'whiteAlpha.200');
   const { totalReward, burntFees, txFees } = getBlockReward(data);
+  const blockTimestampTimeAgo = useTimeAgoIncrement(data.timestamp, enableTimeIncrement);
 
   return (
     <AccountListItemMobile rowGap={ 3 }>
@@ -36,7 +38,7 @@ const BlocksListItem = ({ data, isPending }: Props) => {
             { data.height }
           </Link>
         </Flex>
-        <Text variant="secondary"fontWeight={ 400 }>{ dayjs(data.timestamp).fromNow() }</Text>
+        <Text variant="secondary"fontWeight={ 400 }>{ blockTimestampTimeAgo }</Text>
       </Flex>
       <Flex columnGap={ 2 }>
         <Text fontWeight={ 500 }>Size</Text>

ui/blocks/BlocksTable.tsx

@@ -27,7 +27,8 @@ const BlocksTable = ({ data }: Props) => {
           </Tr>
         </Thead>
         <Tbody>
-          { data.map((item) => <BlocksTableItem key={ item.height } data={ item }/>) }
+          { /* TODO prop "enableTimeIncrement" should be set to false for second and later pages */ }
+          { data.map((item) => <BlocksTableItem key={ item.height } data={ item } enableTimeIncrement/>) }
         </Tbody>
       </Table>
     </TableContainer>

ui/blocks/BlocksTableItem.tsx

@@ -7,7 +7,7 @@ import type { Block } from 'types/api/block';
 import flameIcon from 'icons/flame.svg';
 import getBlockReward from 'lib/block/getBlockReward';
 import { WEI } from 'lib/consts';
-import dayjs from 'lib/date/dayjs';
+import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import link from 'lib/link/link';
 import AddressLink from 'ui/shared/address/AddressLink';
 import GasUsedToTargetRatio from 'ui/shared/GasUsedToTargetRatio';
@@ -16,10 +16,12 @@ import Utilization from 'ui/shared/Utilization';
 interface Props {
   data: Block;
   isPending?: boolean;
+  enableTimeIncrement?: boolean;
 }
 
-const BlocksTableItem = ({ data, isPending }: Props) => {
+const BlocksTableItem = ({ data, isPending, enableTimeIncrement }: Props) => {
   const { totalReward, burntFees, txFees } = getBlockReward(data);
+  const blockTimestampTimeAgo = useTimeAgoIncrement(data.timestamp, enableTimeIncrement);
 
   return (
     <Tr>
@@ -35,7 +37,7 @@ const BlocksTableItem = ({ data, isPending }: Props) => {
             </Link>
           </Tooltip>
         </Flex>
-        <Text variant="secondary" mt={ 2 } fontWeight={ 400 }>{ dayjs(data.timestamp).fromNow() }</Text>
+        <Text variant="secondary" mt={ 2 } fontWeight={ 400 }>{ blockTimestampTimeAgo }</Text>
       </Td>
       <Td fontSize="sm">{ data.size.toLocaleString('en') } bytes</Td>
       <Td fontSize="sm">