Time format toggle for table views (#2729)

* cookie for storing time format value

* rename TimeAgo component

* add toggle to tables (pt. 1)

* move TimeWithTooltip component

* add toggle to tables (pt. 2)

* change implementation of toggle component

* remove unnecessary timestamp label

* update screenshots

* more screenshot updates

* [skip ci] update clock icon

* update screenshots

icons/clock-light.svg

@@ -1,3 +1,4 @@
 <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M4.444 18.315a10 10 0 1 0 11.112-16.63 10 10 0 0 0-11.112 16.63ZM5.3 2.965a8.462 8.462 0 1 1 9.402 14.07A8.462 8.462 0 0 1 5.3 2.965Zm8.637 11.978a.768.768 0 0 0 .295.057.769.769 0 0 0 .546-1.315l-4.008-4V3.846a.769.769 0 1 0-1.538 0V10a.77.77 0 0 0 .223.546l4.23 4.23a.77.77 0 0 0 .252.167Z" fill="currentColor"/>
+  <path d="M8.05.194a10 10 0 1 1 3.903 19.614A10 10 0 0 1 8.049.194ZM10 1.539a8.462 8.462 0 1 0 0 16.925 8.462 8.462 0 0 0 0-16.925Zm0 1.538a.77.77 0 0 1 .77.77v5.838l4.007 4a.771.771 0 0 1 .169.841.772.772 0 0 1-1.01.417.77.77 0 0 1-.251-.165l-4.23-4.232A.77.77 0 0 1 9.23 10V3.847a.77.77 0 0 1 .77-.77Z" fill="currentColor"/>
+  <path d="M19.697 9.64a9.704 9.704 0 0 0-1.434-4.73l-.194-.303a9.705 9.705 0 0 0-4.026-3.43l-.33-.143A9.703 9.703 0 0 0 8.461.419l-.354.064a9.705 9.705 0 0 0-4.71 2.405l-.259.25a9.705 9.705 0 0 0-2.58 4.618l-.075.35a9.705 9.705 0 0 0 .552 5.607l.143.33a9.704 9.704 0 0 0 3.43 4.025l.303.194a9.706 9.706 0 0 0 5.09 1.442l.48-.012a9.704 9.704 0 0 0 6.38-2.83l.332-.349A9.706 9.706 0 0 0 19.703 10l-.006-.359Zm-1.518-.047a8.189 8.189 0 0 0-2.11-5.09l-.28-.293a8.188 8.188 0 0 0-5.383-2.389L10 1.811a8.19 8.19 0 0 0-4.294 1.217l-.256.163A8.19 8.19 0 0 0 2.556 6.59l-.121.278a8.19 8.19 0 0 0-.466 4.73l.065.297A8.188 8.188 0 0 0 4.21 15.79l.218.21a8.19 8.19 0 0 0 3.974 2.03l.298.054a8.19 8.19 0 0 0 4.433-.52l.278-.12a8.19 8.19 0 0 0 3.397-2.895l.164-.255a8.19 8.19 0 0 0 1.216-4.295l-.01-.406ZM10.61 3.937a.61.61 0 0 0-.102-.339l-.077-.092a.61.61 0 0 0-.311-.168L10 3.327a.61.61 0 0 0-.338.102l-.093.077a.61.61 0 0 0-.179.43V10c0 .08.015.16.045.235l.056.105a.618.618 0 0 0 .075.092l4.17 4.17c.056.055.123.1.198.13l.115.035c.039.008.079.01.118.01h.002l.119-.01a.615.615 0 0 0 .115-.035l.107-.056a.601.601 0 0 0 .092-.075l.077-.093a.609.609 0 0 0 .057-.106l.035-.114.011-.12c0-.041-.004-.082-.011-.12l-.035-.115a.61.61 0 0 0-.134-.198L10.61 9.75V3.937Zm7.869 6.376a8.486 8.486 0 0 1-1.255 4.136l-.17.264a8.486 8.486 0 0 1-3.52 2.999l-.287.126a8.486 8.486 0 0 1-4.594.538l-.309-.055a8.484 8.484 0 0 1-4.117-2.104L4 15.999a8.485 8.485 0 0 1-2.254-4.037l-.068-.307a8.486 8.486 0 0 1 .484-4.902l.126-.288a8.486 8.486 0 0 1 2.999-3.52l.263-.17A8.486 8.486 0 0 1 10 1.516l.42.01A8.485 8.485 0 0 1 16 4l.289.305A8.484 8.484 0 0 1 18.485 10l-.006.314Zm1.509.182a10.002 10.002 0 0 1-2.575 6.216l-.342.36a10.001 10.001 0 0 1-6.575 2.916L10 20a10 10 0 0 1-5.244-1.486l-.311-.2A10.002 10.002 0 0 1 .91 14.166l-.148-.34a10.001 10.001 0 0 1-.57-5.777l.079-.362A10.002 10.002 0 0 1 2.928 2.93l.268-.257A10.001 10.001 0 0 1 8.049.192l.365-.065a10 10 0 0 1 5.413.634l.34.148a10.003 10.003 0 0 1 4.148 3.535l.2.312A10.002 10.002 0 0 1 20 9.999l-.012.496Zm-9.081-.869 3.904 3.899a.907.907 0 0 1 .198.294l.03.085c.026.085.04.174.04.263l-.005.09a.903.903 0 0 1-.035.174l-.03.085a.908.908 0 0 1-.138.229l-.06.066a.896.896 0 0 1-.216.157l-.08.037a.907.907 0 0 1-.61.03l-.083-.03a.904.904 0 0 1-.295-.194l-4.17-4.169a.914.914 0 0 1-.157-.214l-.038-.081a.91.91 0 0 1-.068-.349V3.937c0-.24.096-.471.265-.64l.067-.06A.906.906 0 0 1 10 3.03l.09.005c.207.021.402.113.551.261l.06.066a.906.906 0 0 1 .206.575v5.69Z" fill="currentColor"/>
 </svg>

lib/contexts/settings.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import type { TimeFormat } from 'types/settings';
 import { ADDRESS_FORMATS, type AddressFormat } from 'types/views/address';
 
 import * as cookies from 'lib/cookies';
@@ -13,6 +14,8 @@ interface SettingsProviderProps {
 interface TSettingsContext {
   addressFormat: AddressFormat;
   toggleAddressFormat: () => void;
+  timeFormat: TimeFormat;
+  toggleTimeFormat: () => void;
 }
 
 export const SettingsContext = React.createContext<TSettingsContext | null>(null);
@@ -25,6 +28,10 @@ export function SettingsContextProvider({ children }: SettingsProviderProps) {
     initialAddressFormat && ADDRESS_FORMATS.includes(initialAddressFormat as AddressFormat) ? initialAddressFormat as AddressFormat : 'base16',
   );
 
+  const [ timeFormat, setTimeFormat ] = React.useState<TimeFormat>(
+    cookies.get(cookies.NAMES.TIME_FORMAT, appCookies) as TimeFormat || 'relative',
+  );
+
   const toggleAddressFormat = React.useCallback(() => {
     setAddressFormat(prev => {
       const nextValue = prev === 'base16' ? 'bech32' : 'base16';
@@ -33,12 +40,22 @@ export function SettingsContextProvider({ children }: SettingsProviderProps) {
     });
   }, []);
 
+  const toggleTimeFormat = React.useCallback(() => {
+    setTimeFormat(prev => {
+      const nextValue = prev === 'relative' ? 'absolute' : 'relative';
+      cookies.set(cookies.NAMES.TIME_FORMAT, nextValue);
+      return nextValue;
+    });
+  }, []);
+
   const value = React.useMemo(() => {
     return {
       addressFormat,
       toggleAddressFormat,
+      timeFormat,
+      toggleTimeFormat,
     };
-  }, [ addressFormat, toggleAddressFormat ]);
+  }, [ addressFormat, toggleAddressFormat, timeFormat, toggleTimeFormat ]);
 
   return (
     <SettingsContext.Provider value={ value }>

lib/cookies.ts

@@ -12,6 +12,7 @@ export enum NAMES {
   COLOR_MODE_HEX = 'chakra-ui-color-mode-hex',
   ADDRESS_IDENTICON_TYPE = 'address_identicon_type',
   ADDRESS_FORMAT = 'address_format',
+  TIME_FORMAT = 'time_format',
   INDEXING_ALERT = 'indexing_alert',
   ADBLOCK_DETECTED = 'adblock_detected',
   MIXPANEL_DEBUG = '_mixpanel_debug',

toolkit/chakra/table.tsx

@@ -37,10 +37,11 @@ export interface TableColumnHeaderSortableProps<F extends string> extends TableC
   onSortToggle: (sortField: F) => void;
   disabled?: boolean;
   indicatorPosition?: 'left' | 'right';
+  contentAfter?: React.ReactNode;
 }
 
 export const TableColumnHeaderSortable = <F extends string>(props: TableColumnHeaderSortableProps<F>) => {
-  const { sortField, sortValue, onSortToggle, children, disabled, indicatorPosition = 'left', ...rest } = props;
+  const { sortField, sortValue, onSortToggle, children, disabled, indicatorPosition = 'left', contentAfter, ...rest } = props;
 
   const handleSortToggle = React.useCallback(() => {
     onSortToggle(sortField);
@@ -64,6 +65,7 @@ export const TableColumnHeaderSortable = <F extends string>(props: TableColumnHe
         ) }
         { children }
       </Link>
+      { contentAfter }
     </TableColumnHeader>
   );
 };

types/settings.ts

@@ -1,2 +1,5 @@
 export const COLOR_THEME_IDS = [ 'light', 'dim', 'midnight', 'dark' ] as const;
 export type ColorThemeId = typeof COLOR_THEME_IDS[number];
+
+export const TIME_FORMAT = [ 'relative', 'absolute' ] as const;
+export type TimeFormat = typeof TIME_FORMAT[number];

ui/address/AddressBlocksValidated.tsx

@@ -20,6 +20,7 @@ import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
 import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
+import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
 import AddressBlocksValidatedListItem from './blocksValidated/AddressBlocksValidatedListItem';
 import AddressBlocksValidatedTableItem from './blocksValidated/AddressBlocksValidatedTableItem';
@@ -103,11 +104,14 @@ const AddressBlocksValidated = ({ shouldRender = true, isQueryEnabled = true }:
   const content = query.data?.items ? (
     <>
       <Box hideBelow="lg">
-        <TableRoot style={{ tableLayout: 'auto' }}>
+        <TableRoot tableLayout="auto">
           <TableHeaderSticky top={ query.pagination.isVisible ? ACTION_BAR_HEIGHT_DESKTOP : 0 }>
             <TableRow>
               <TableColumnHeader>Block</TableColumnHeader>
-              <TableColumnHeader>Age</TableColumnHeader>
+              <TableColumnHeader>
+                Timestamp
+                <TimeFormatToggle/>
+              </TableColumnHeader>
               <TableColumnHeader>Txn</TableColumnHeader>
               <TableColumnHeader>Gas used</TableColumnHeader>
               { !config.UI.views.block.hiddenFields?.total_reward && !config.features.rollup.isEnabled &&

ui/address/AddressTxs.pw.tsx

@@ -41,7 +41,10 @@ test.describe('base view', () => {
     );
   });
 
-  test('desktop', async() => {
+  test('desktop', async({ page }) => {
+    await expect(component).toHaveScreenshot();
+    await component.locator('button[aria-label="Toggle time format"]').click();
+    await page.mouse.move(0, 0);
     await expect(component).toHaveScreenshot();
   });
 

ui/address/accountHistory/AddressAccountHistoryListItem.tsx

@@ -8,7 +8,7 @@ import { Skeleton } from 'toolkit/chakra/skeleton';
 import IconSvg from 'ui/shared/IconSvg';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import NovesFromTo from 'ui/shared/Noves/NovesFromTo';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 type Props = {
   isPlaceholderData: boolean;
@@ -41,7 +41,7 @@ const AddressAccountHistoryListItem = (props: Props) => {
               Action
             </Text>
           </Flex>
-          <TimeAgoWithTooltip
+          <TimeWithTooltip
             timestamp={ props.tx.rawTransactionData.timestamp * 1000 }
             color="text.secondary"
             borderRadius="sm"

ui/address/accountHistory/AddressAccountHistoryTableItem.tsx

@@ -8,7 +8,7 @@ import { Skeleton } from 'toolkit/chakra/skeleton';
 import { TableCell, TableRow } from 'toolkit/chakra/table';
 import IconSvg from 'ui/shared/IconSvg';
 import NovesFromTo from 'ui/shared/Noves/NovesFromTo';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 type Props = {
   isPlaceholderData: boolean;
@@ -27,7 +27,7 @@ const AddressAccountHistoryTableItem = (props: Props) => {
   return (
     <TableRow>
       <TableCell px={ 3 } py="18px" fontSize="sm" >
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ props.tx.rawTransactionData.timestamp * 1000 }
           isLoading={ props.isPlaceholderData }
           color="text.secondary"

ui/address/blocksValidated/AddressBlocksValidatedListItem.tsx

@@ -11,7 +11,7 @@ import { Skeleton } from 'toolkit/chakra/skeleton';
 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';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 type Props = Block & {
   page: number;
@@ -30,7 +30,7 @@ const AddressBlocksValidatedListItem = (props: Props) => {
           noIcon
           fontWeight={ 700 }
         />
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ props.timestamp }
           enableIncrement={ props.page === 1 }
           isLoading={ props.isLoading }

ui/address/blocksValidated/AddressBlocksValidatedTableItem.tsx

@@ -10,7 +10,7 @@ import { Skeleton } from 'toolkit/chakra/skeleton';
 import { TableCell, TableRow } from 'toolkit/chakra/table';
 import BlockGasUsed from 'ui/shared/block/BlockGasUsed';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 type Props = Block & {
   page: number;
@@ -32,7 +32,7 @@ const AddressBlocksValidatedTableItem = (props: Props) => {
         />
       </TableCell>
       <TableCell>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ props.timestamp }
           enableIncrement={ props.page === 1 }
           isLoading={ props.isLoading }

ui/address/coinBalance/AddressCoinBalanceHistory.tsx

@@ -11,6 +11,7 @@ import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow }
 import ActionBar, { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import DataListDisplay from 'ui/shared/DataListDisplay';
 import Pagination from 'ui/shared/pagination/Pagination';
+import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
 import AddressCoinBalanceListItem from './AddressCoinBalanceListItem';
 import AddressCoinBalanceTableItem from './AddressCoinBalanceTableItem';
@@ -31,7 +32,10 @@ const AddressCoinBalanceHistory = ({ query }: Props) => {
             <TableRow>
               <TableColumnHeader width="20%">Block</TableColumnHeader>
               <TableColumnHeader width="20%">Txn</TableColumnHeader>
-              <TableColumnHeader width="20%">Age</TableColumnHeader>
+              <TableColumnHeader width="20%">
+                Timestamp
+                <TimeFormatToggle/>
+              </TableColumnHeader>
               <TableColumnHeader width="20%" isNumeric pr={ 1 }>Balance { currencyUnits.ether }</TableColumnHeader>
               <TableColumnHeader width="20%" isNumeric>Delta</TableColumnHeader>
             </TableRow>

ui/address/coinBalance/AddressCoinBalanceListItem.tsx

@@ -10,7 +10,7 @@ import { WEI, ZERO } from 'toolkit/utils/consts';
 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';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 type Props = AddressCoinBalanceHistoryItem & {
   page: number;
@@ -59,7 +59,7 @@ const AddressCoinBalanceListItem = (props: Props) => {
       ) }
       <Flex columnGap={ 2 } w="100%">
         <Skeleton loading={ props.isLoading } fontWeight={ 500 } flexShrink={ 0 }>Age</Skeleton>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ props.block_timestamp }
           enableIncrement={ props.page === 1 }
           isLoading={ props.isLoading }

ui/address/coinBalance/AddressCoinBalanceTableItem.tsx

@@ -9,7 +9,7 @@ import { TableCell, TableRow } from 'toolkit/chakra/table';
 import { WEI, ZERO } from 'toolkit/utils/consts';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 type Props = AddressCoinBalanceHistoryItem & {
   page: number;
@@ -42,7 +42,7 @@ const AddressCoinBalanceTableItem = (props: Props) => {
         ) }
       </TableCell>
       <TableCell>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ props.block_timestamp }
           enableIncrement={ props.page === 1 }
           isLoading={ props.isLoading }

ui/address/epochRewards/AddressEpochRewardsListItem.tsx

@@ -9,7 +9,7 @@ import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import EpochRewardTypeTag from 'ui/shared/EpochRewardTypeTag';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 type Props = {
   item: AddressEpochRewardsItem;
@@ -39,7 +39,7 @@ const AddressEpochRewardsListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.block_timestamp }
           isLoading={ isLoading }
           color="text.secondary"

ui/address/epochRewards/AddressEpochRewardsTable.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { AddressEpochRewardsItem } from 'types/api/address';
 
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
+import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
 import AddressEpochRewardsTableItem from './AddressEpochRewardsTableItem';
 
@@ -17,7 +18,10 @@ const AddressEpochRewardsTable = ({ items, isLoading, top }: Props) => {
     <TableRoot minW="1000px" style={{ tableLayout: 'auto' }}>
       <TableHeaderSticky top={ top }>
         <TableRow>
-          <TableColumnHeader>Block</TableColumnHeader>
+          <TableColumnHeader>
+            Block
+            <TimeFormatToggle/>
+          </TableColumnHeader>
           <TableColumnHeader>Reward type</TableColumnHeader>
           <TableColumnHeader>Associated address</TableColumnHeader>
           <TableColumnHeader isNumeric>Value</TableColumnHeader>

ui/address/epochRewards/AddressEpochRewardsTableItem.tsx

@@ -10,7 +10,7 @@ import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import EpochRewardTypeTag from 'ui/shared/EpochRewardTypeTag';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
  type Props = {
    item: AddressEpochRewardsItem;
@@ -27,7 +27,7 @@ const AddressEpochRewardsTableItem = ({ item, isLoading }: Props) => {
           <Skeleton loading={ isLoading }>
             <Text color="text.secondary" fontWeight={ 600 }>{ `Epoch # ${ item.epoch_number }` }</Text>
           </Skeleton>
-          <TimeAgoWithTooltip timestamp={ item.block_timestamp } isLoading={ isLoading } color="text.secondary" fontWeight={ 400 }/>
+          <TimeWithTooltip timestamp={ item.block_timestamp } isLoading={ isLoading } color="text.secondary" fontWeight={ 400 }/>
         </Flex>
       </TableCell>
       <TableCell verticalAlign="middle">

ui/advancedFilter/ItemByColumn.tsx

@@ -12,7 +12,7 @@ import AddressFromToIcon from 'ui/shared/address/AddressFromToIcon';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 import { ADVANCED_FILTER_TYPES } from './constants';
 
@@ -36,7 +36,7 @@ const ItemByColumn = ({ item, column, isLoading }: Props) => {
     case 'method':
       return item.method ? <Badge loading={ isLoading } truncated>{ item.method }</Badge> : null;
     case 'age':
-      return <TimeAgoWithTooltip timestamp={ item.timestamp } isLoading={ isLoading } color="text.secondary" fontWeight={ 400 }/>;
+      return <TimeWithTooltip timestamp={ item.timestamp } isLoading={ isLoading } color="text.secondary" fontWeight={ 400 }/>;
     case 'from':
       return (
         <Flex w="100%">

ui/advancedFilter/constants.ts

@@ -30,7 +30,7 @@ export const TABLE_COLUMNS: Array<TxTableColumn> = [
   {
     id: 'age',
     name: 'Age',
-    width: '80px',
+    width: '190px',
   },
   {
     id: 'from',

ui/blocks/BlocksListItem.tsx

@@ -20,7 +20,7 @@ import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import IconSvg from 'ui/shared/IconSvg';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
 import { getBaseFeeValue } from './utils';
@@ -57,7 +57,7 @@ const BlocksListItem = ({ data, isLoading, enableTimeIncrement, animation }: Pro
             </Tooltip>
           ) }
         </Flex>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ data.timestamp }
           enableIncrement={ enableTimeIncrement }
           isLoading={ isLoading }

ui/blocks/BlocksTable.tsx

@@ -11,6 +11,7 @@ import { currencyUnits } from 'lib/units';
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import BlocksTableItem from 'ui/blocks/BlocksTableItem';
 import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
+import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
 interface Props {
   data: Array<Block>;
@@ -44,10 +45,13 @@ const BlocksTable = ({ data, isLoading, top, page, showSocketInfo, socketInfoNum
 
   return (
     <AddressHighlightProvider>
-      <TableRoot minWidth="1040px" fontWeight={ 500 }>
+      <TableRoot minWidth="1070px" fontWeight={ 500 }>
         <TableHeaderSticky top={ top }>
           <TableRow>
-            <TableColumnHeader width="150px">Block</TableColumnHeader>
+            <TableColumnHeader width="180px">
+              Block
+              <TimeFormatToggle/>
+            </TableColumnHeader>
             <TableColumnHeader width="120px">Size, bytes</TableColumnHeader>
             { !config.UI.views.block.hiddenFields?.miner && (
               <TableColumnHeader width={ `${ VALIDATOR_COL_WEIGHT / widthBase * 100 }%` } minW="160px">

ui/blocks/BlocksTableItem.tsx

@@ -17,7 +17,7 @@ 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 TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
 import { getBaseFeeValue } from './utils';
@@ -58,7 +58,7 @@ const BlocksTableItem = ({ data, isLoading, enableTimeIncrement, animation }: Pr
             </span>
           </Tooltip>
         </Flex>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ data.timestamp }
           enableIncrement={ enableTimeIncrement }
           isLoading={ isLoading }

ui/deposits/optimisticL2/OptimisticDepositsListItem.tsx

@@ -10,7 +10,7 @@ import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 const rollupFeature = config.features.rollup;
 
@@ -44,7 +44,7 @@ const OptimisticDepositsListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.l1_block_timestamp }
           isLoading={ isLoading }
           display="inline-block"

ui/deposits/optimisticL2/OptimisticDepositsTable.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { OptimisticL2DepositsItem } from 'types/api/optimisticL2';
 
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
+import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
 import OptimisticDepositsTableItem from './OptimisticDepositsTableItem';
 
@@ -19,7 +20,10 @@ const OptimisticDepositsTable = ({ items, top, isLoading }: Props) => {
         <TableRow>
           <TableColumnHeader>L1 block No</TableColumnHeader>
           <TableColumnHeader>L2 txn hash</TableColumnHeader>
-          <TableColumnHeader>Age</TableColumnHeader>
+          <TableColumnHeader>
+            Timestamp
+            <TimeFormatToggle/>
+          </TableColumnHeader>
           <TableColumnHeader>L1 txn hash</TableColumnHeader>
           <TableColumnHeader>L1 txn origin</TableColumnHeader>
           <TableColumnHeader isNumeric>Gas limit</TableColumnHeader>

ui/deposits/optimisticL2/OptimisticDepositsTableItem.tsx

@@ -10,7 +10,7 @@ import AddressEntityL1 from 'ui/shared/entities/address/AddressEntityL1';
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 const rollupFeature = config.features.rollup;
 
@@ -41,7 +41,7 @@ const OptimisticDepositsTableItem = ({ item, isLoading }: Props) => {
         />
       </TableCell>
       <TableCell verticalAlign="middle" pr={ 12 }>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.l1_block_timestamp }
           isLoading={ isLoading }
           color="text.secondary"

ui/deposits/scrollL2/ScrollL2DepositsListItem.tsx

@@ -10,7 +10,7 @@ import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 const rollupFeature = config.features.rollup;
 
@@ -53,7 +53,7 @@ const ScrollL2DepositsListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.origination_timestamp }
           isLoading={ isLoading }
           display="inline-block"

ui/deposits/scrollL2/ScrollL2DepositsTable.tsx

@@ -4,6 +4,7 @@ import type { ScrollL2MessageItem } from 'types/api/scrollL2';
 
 import config from 'configs/app';
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
+import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
 import ScrollL2DepositsTableItem from './ScrollL2DepositsTableItem';
 
@@ -21,7 +22,10 @@ const ScrollL2DepositsTable = ({ items, top, isLoading }: Props) => {
           <TableColumnHeader>L1 block</TableColumnHeader>
           <TableColumnHeader>Index</TableColumnHeader>
           <TableColumnHeader>L1 txn hash</TableColumnHeader>
-          <TableColumnHeader>Age</TableColumnHeader>
+          <TableColumnHeader>
+            Timestamp
+            <TimeFormatToggle/>
+          </TableColumnHeader>
           <TableColumnHeader>L2 txn hash</TableColumnHeader>
           <TableColumnHeader isNumeric>Value { config.chain.currency.symbol }</TableColumnHeader>
         </TableRow>

ui/deposits/scrollL2/ScrollL2DepositsTableItem.tsx

@@ -10,7 +10,7 @@ import { TableCell, TableRow } from 'toolkit/chakra/table';
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 const rollupFeature = config.features.rollup;
 
@@ -47,7 +47,7 @@ const ScrollL2DepositsTableItem = ({ item, isLoading }: Props) => {
         />
       </TableCell>
       <TableCell verticalAlign="middle" pr={ 12 }>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.origination_timestamp }
           isLoading={ isLoading }
           color="text.secondary"

ui/deposits/shibarium/DepositsListItem.tsx

@@ -8,7 +8,7 @@ import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 const feature = config.features.rollup;
 
@@ -64,7 +64,7 @@ const DepositsListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.timestamp }
           isLoading={ isLoading }
           display="inline-block"

ui/deposits/shibarium/DepositsTable.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { ShibariumDepositsItem } from 'types/api/shibarium';
 
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
+import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
 import DepositsTableItem from './DepositsTableItem';
 
@@ -21,7 +22,10 @@ const DepositsTable = ({ items, top, isLoading }: Props) => {
           <TableColumnHeader>L1 txn hash</TableColumnHeader>
           <TableColumnHeader>L2 txn hash</TableColumnHeader>
           <TableColumnHeader>User</TableColumnHeader>
-          <TableColumnHeader>Age</TableColumnHeader>
+          <TableColumnHeader>
+            Timestamp
+            <TimeFormatToggle/>
+          </TableColumnHeader>
         </TableRow>
       </TableHeaderSticky>
       <TableBody>

ui/deposits/shibarium/DepositsTableItem.tsx

@@ -8,7 +8,7 @@ import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrPara
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 const feature = config.features.rollup;
 
@@ -55,7 +55,7 @@ const DepositsTableItem = ({ item, isLoading }: Props) => {
         />
       </TableCell>
       <TableCell verticalAlign="middle" pr={ 12 }>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.timestamp }
           isLoading={ isLoading }
           color="text.secondary"

ui/deposits/zkEvmL2/ZkEvmL2DepositsListItem.tsx

@@ -10,7 +10,7 @@ import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 const rollupFeature = config.features.rollup;
 
@@ -53,7 +53,7 @@ const ZkEvmL2DepositsListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.timestamp }
           isLoading={ isLoading }
           display="inline-block"

ui/deposits/zkEvmL2/ZkEvmL2DepositsTable.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { ZkEvmL2DepositsItem } from 'types/api/zkEvmL2';
 
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
+import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
 import ZkEvmL2DepositsTableItem from './ZkEvmL2DepositsTableItem';
 
@@ -20,7 +21,10 @@ const ZkEvmL2DepositsTable = ({ items, top, isLoading }: Props) => {
           <TableColumnHeader>L1 block</TableColumnHeader>
           <TableColumnHeader>Index</TableColumnHeader>
           <TableColumnHeader>L1 txn hash</TableColumnHeader>
-          <TableColumnHeader>Age</TableColumnHeader>
+          <TableColumnHeader>
+            Timestamp
+            <TimeFormatToggle/>
+          </TableColumnHeader>
           <TableColumnHeader>L2 txn hash</TableColumnHeader>
           <TableColumnHeader isNumeric>Value</TableColumnHeader>
           <TableColumnHeader>Token</TableColumnHeader>

ui/deposits/zkEvmL2/ZkEvmL2DepositsTableItem.tsx

@@ -10,7 +10,7 @@ import { TableCell, TableRow } from 'toolkit/chakra/table';
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 const rollupFeature = config.features.rollup;
 
@@ -47,7 +47,7 @@ const ZkEvmL2DepositsTableItem = ({ item, isLoading }: Props) => {
         />
       </TableCell>
       <TableCell verticalAlign="middle" pr={ 12 }>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.timestamp }
           isLoading={ isLoading }
           color="text.secondary"

ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesListItem.tsx

@@ -8,7 +8,7 @@ import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
 import HashStringShorten from 'ui/shared/HashStringShorten';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 const rollupFeature = config.features.rollup;
 
@@ -51,7 +51,7 @@ const OptimisticL2DisputeGamesListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.created_at }
           isLoading={ isLoading }
           display="inline-block"
@@ -66,7 +66,7 @@ const OptimisticL2DisputeGamesListItem = ({ item, isLoading }: Props) => {
       { item.resolved_at && (
         <>
           <ListItemMobileGrid.Label isLoading={ isLoading }>Resolution age</ListItemMobileGrid.Label><ListItemMobileGrid.Value>
-            <TimeAgoWithTooltip
+            <TimeWithTooltip
               timestamp={ item.resolved_at }
               isLoading={ isLoading }
               display="inline-block"

ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTable.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { OptimisticL2DisputeGamesItem } from 'types/api/optimisticL2';
 
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
+import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
 import OptimisticL2DisputeGamesTableItem from './OptimisticL2DisputeGamesTableItem';
 
@@ -21,9 +22,15 @@ const OptimisticL2DisputeGamesTable = ({ items, top, isLoading }: Props) => {
           <TableColumnHeader>Game type</TableColumnHeader>
           <TableColumnHeader>Address</TableColumnHeader>
           <TableColumnHeader>L2 block #</TableColumnHeader>
-          <TableColumnHeader>Age</TableColumnHeader>
+          <TableColumnHeader>
+            Timestamp
+            <TimeFormatToggle/>
+          </TableColumnHeader>
           <TableColumnHeader>Status</TableColumnHeader>
-          <TableColumnHeader>Resolution age</TableColumnHeader>
+          <TableColumnHeader>
+            Resolved
+            <TimeFormatToggle/>
+          </TableColumnHeader>
         </TableRow>
       </TableHeaderSticky>
       <TableBody>

ui/disputeGames/optimisticL2/OptimisticL2DisputeGamesTableItem.tsx

@@ -9,7 +9,7 @@ import { TableCell, TableRow } from 'toolkit/chakra/table';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
 import HashStringShorten from 'ui/shared/HashStringShorten';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 const faultProofSystemFeature = config.features.faultProofSystem;
 
@@ -44,7 +44,7 @@ const OptimisticL2DisputeGamesTableItem = ({ item, isLoading }: Props) => {
         />
       </TableCell>
       <TableCell verticalAlign="middle">
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.created_at }
           isLoading={ isLoading }
           display="inline-block"
@@ -54,7 +54,7 @@ const OptimisticL2DisputeGamesTableItem = ({ item, isLoading }: Props) => {
         <Skeleton loading={ isLoading } display="inline-block">{ item.status }</Skeleton>
       </TableCell>
       <TableCell>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.resolved_at }
           fallbackText="N/A"
           isLoading={ isLoading }

ui/home/LatestBlocksItem.tsx

@@ -11,7 +11,7 @@ import { Tooltip } from 'toolkit/chakra/tooltip';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import IconSvg from 'ui/shared/IconSvg';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 type Props = {
   block: Block;
@@ -43,9 +43,10 @@ const LatestBlocksItem = ({ block, isLoading, animation }: Props) => {
             <IconSvg name="checkered_flag" boxSize={ 5 } p="1px" ml={ 2 } isLoading={ isLoading } flexShrink={ 0 }/>
           </Tooltip>
         ) }
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ block.timestamp }
           enableIncrement={ !isLoading }
+          timeFormat="relative"
           isLoading={ isLoading }
           color="text.secondary"
           display="inline-block"

ui/home/LatestTxsItem.tsx

@@ -16,7 +16,7 @@ import { Skeleton } from 'toolkit/chakra/skeleton';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxStatus from 'ui/shared/statusTag/TxStatus';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 import TxFee from 'ui/shared/tx/TxFee';
 import TxWatchListTags from 'ui/shared/tx/TxWatchListTags';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
@@ -63,9 +63,10 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
               hash={ tx.hash }
               fontWeight="700"
             />
-            <TimeAgoWithTooltip
+            <TimeWithTooltip
               timestamp={ tx.timestamp }
               enableIncrement
+              timeFormat="relative"
               isLoading={ isLoading }
               color="text.secondary"
               textStyle="sm"

ui/home/LatestTxsItemMobile.tsx

@@ -15,7 +15,7 @@ import { Skeleton } from 'toolkit/chakra/skeleton';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxStatus from 'ui/shared/statusTag/TxStatus';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 import TxFee from 'ui/shared/tx/TxFee';
 import TxWatchListTags from 'ui/shared/tx/TxWatchListTags';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
@@ -58,9 +58,10 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
           fontWeight="700"
           truncation="constant_long"
         />
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ tx.timestamp }
           enableIncrement
+          timeFormat="relative"
           isLoading={ isLoading }
           color="text.secondary"
           fontWeight="400"

ui/home/latestBatches/LatestBatchItem.tsx

@@ -6,7 +6,7 @@ import { route } from 'nextjs-routes';
 import { Link } from 'toolkit/chakra/link';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 type Props = {
   number: number;
@@ -35,9 +35,10 @@ const LatestBatchItem = ({ number, timestamp, txCount, status, isLoading, animat
           fontWeight={ 500 }
           mr="auto"
         />
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ timestamp }
           enableIncrement={ !isLoading }
+          timeFormat="relative"
           isLoading={ isLoading }
           color="text.secondary"
           display="inline-block"

ui/home/latestDeposits/LatestDeposits.tsx

@@ -15,7 +15,7 @@ import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 type DepositsItem = {
   l1BlockNumber: number | null;
@@ -89,8 +89,9 @@ const LatestDepositsItem = ({ item, isLoading }: ItemProps) => {
           <Flex justifyContent="space-between" alignItems="center" mb={ 1 }>
             { l1BlockLink }
             { item.timestamp ? (
-              <TimeAgoWithTooltip
+              <TimeWithTooltip
                 timestamp={ item.timestamp }
+                timeFormat="relative"
                 isLoading={ isLoading }
                 color="text.secondary"
               />
@@ -118,8 +119,9 @@ const LatestDepositsItem = ({ item, isLoading }: ItemProps) => {
         </Skeleton>
         { l1TxLink }
         { item.timestamp ? (
-          <TimeAgoWithTooltip
+          <TimeWithTooltip
             timestamp={ item.timestamp }
+            timeFormat="relative"
             isLoading={ isLoading }
             color="text.secondary"
             w="fit-content"

ui/home/latestDeposits/LatestDepositsItem.tsx

@@ -10,7 +10,7 @@ import { Skeleton } from 'toolkit/chakra/skeleton';
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 type Props = {
   l1BlockNumber: number;
@@ -59,8 +59,9 @@ const LatestDepositsItem = ({ l1BlockNumber, l1TxHash, l2TxHash, timestamp, isLo
         <>
           <Flex justifyContent="space-between" alignItems="center" mb={ 1 }>
             { l1BlockLink }
-            <TimeAgoWithTooltip
+            <TimeWithTooltip
               timestamp={ timestamp }
+              timeFormat="relative"
               isLoading={ isLoading }
               color="text.secondary"
             />
@@ -86,8 +87,9 @@ const LatestDepositsItem = ({ l1BlockNumber, l1TxHash, l2TxHash, timestamp, isLo
           L1 txn
         </Skeleton>
         { l1TxLink }
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ timestamp }
+          timeFormat="relative"
           isLoading={ isLoading }
           color="text.secondary"
           w="fit-content"

ui/internalTxs/InternalTxsListItem.tsx

@@ -13,7 +13,7 @@ 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 TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 
 type Props = InternalTransaction & { currentAddress?: string; isLoading?: boolean };
@@ -48,7 +48,7 @@ const InternalTxsListItem = ({
           fontWeight={ 700 }
           truncation="constant_long"
         />
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ timestamp }
           isLoading={ isLoading }
           color="text.secondary"

ui/internalTxs/InternalTxsTable.tsx

@@ -5,6 +5,7 @@ import type { InternalTransaction } from 'types/api/internalTransaction';
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
 import { currencyUnits } from 'lib/units';
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
+import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
 import InternalTxsTableItem from './InternalTxsTableItem';
 
@@ -20,7 +21,10 @@ const InternalTxsTable = ({ data, currentAddress, isLoading }: Props) => {
       <TableRoot minW="900px">
         <TableHeaderSticky top={ 68 }>
           <TableRow>
-            <TableColumnHeader width="180px">Parent txn hash</TableColumnHeader>
+            <TableColumnHeader width="280px">
+              Parent txn hash
+              <TimeFormatToggle/>
+            </TableColumnHeader>
             <TableColumnHeader width="15%">Type</TableColumnHeader>
             <TableColumnHeader width="15%">Block</TableColumnHeader>
             <TableColumnHeader width="50%">From/To</TableColumnHeader>

ui/internalTxs/InternalTxsTableItem.tsx

@@ -11,7 +11,7 @@ import AddressFromTo from 'ui/shared/address/AddressFromTo';
 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 TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 import TruncatedValue from 'ui/shared/TruncatedValue';
 import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
 
@@ -45,13 +45,14 @@ const InternalTxsTableItem = ({
             noIcon
             truncation="constant_long"
           />
-          <TimeAgoWithTooltip
+          <TimeWithTooltip
             timestamp={ timestamp }
             enableIncrement
             isLoading={ isLoading }
             color="text.secondary"
             fontWeight="400"
             fontSize="sm"
+            w="fit-content"
           />
         </Flex>
       </TableCell>

ui/interopMessages/InteropMessagesListItem.tsx

@@ -8,7 +8,7 @@ import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import AddressEntityInterop from 'ui/shared/entities/address/AddressEntityInterop';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import InteropMessageStatus from 'ui/shared/statusTag/InteropMessageStatus';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 import InteropMessageAdditionalInfo from './InteropMessageAdditionalInfo';
 import InteropMessageDestinationTx from './InteropMessageDestinationTx';
@@ -29,7 +29,7 @@ const InteropMessagesListItem = ({ item, isLoading }: Props) => {
       <Flex alignItems="flex-start" flexDirection="column" gap={ 2 } w="100%">
         <HStack w="100%">
           <Text fontWeight={ 500 } flexGrow={ 1 }>#{ item.nonce }</Text>
-          <TimeAgoWithTooltip timestamp={ item.timestamp } isLoading={ isLoading } color="text.secondary"/>
+          <TimeWithTooltip timestamp={ item.timestamp } isLoading={ isLoading } color="text.secondary"/>
         </HStack>
         <Grid templateColumns="120px 1fr" rowGap={ 2 }>
           <Text as="span" color="text.secondary">Source tx</Text>

ui/interopMessages/InteropMessagesTable.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { InteropMessage } from 'types/api/interop';
 
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
+import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
 import InteropMessagesTableItem from './InteropMessagesTableItem';
 
@@ -19,7 +20,10 @@ const InteropMessagesTable = ({ items, top, isLoading }: Props) => {
         <TableRow>
           <TableColumnHeader/>
           <TableColumnHeader>Message</TableColumnHeader>
-          <TableColumnHeader>Age</TableColumnHeader>
+          <TableColumnHeader>
+            Timestamp
+            <TimeFormatToggle/>
+          </TableColumnHeader>
           <TableColumnHeader>Status</TableColumnHeader>
           <TableColumnHeader>Source tx</TableColumnHeader>
           <TableColumnHeader>Destination tx</TableColumnHeader>

ui/interopMessages/InteropMessagesTableItem.tsx

@@ -8,7 +8,7 @@ import AddressFromToIcon from 'ui/shared/address/AddressFromToIcon';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import AddressEntityInterop from 'ui/shared/entities/address/AddressEntityInterop';
 import InteropMessageStatus from 'ui/shared/statusTag/InteropMessageStatus';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 import InteropMessageAdditionalInfo from './InteropMessageAdditionalInfo';
 import InteropMessageDestinationTx from './InteropMessageDestinationTx';
@@ -31,7 +31,7 @@ const InteropMessagesTableItem = ({ item, isLoading }: Props) => {
         </Skeleton>
       </TableCell>
       <TableCell>
-        <TimeAgoWithTooltip timestamp={ item.timestamp } isLoading={ isLoading } color="text.secondary"/>
+        <TimeWithTooltip timestamp={ item.timestamp } isLoading={ isLoading } color="text.secondary"/>
       </TableCell>
       <TableCell>
         <InteropMessageStatus status={ item.status } isLoading={ isLoading }/>

ui/messages/ArbitrumL2MessagesListItem.tsx

@@ -14,7 +14,7 @@ import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 import ArbitrumL2MessageStatus from 'ui/shared/statusTag/ArbitrumL2MessageStatus';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 import type { MessagesDirection } from './ArbitrumL2Messages';
 
@@ -88,7 +88,7 @@ const ArbitrumL2MessagesListItem = ({ item, isLoading, direction }: Props) => {
         <>
           <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
-            <TimeAgoWithTooltip
+            <TimeWithTooltip
               timestamp={ item.origination_timestamp }
               isLoading={ isLoading }
               display="inline-block"

ui/messages/ArbitrumL2MessagesTable.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { ArbitrumL2MessagesItem } from 'types/api/arbitrumL2';
 
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
+import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
 import type { MessagesDirection } from './ArbitrumL2Messages';
 import ArbitrumL2MessagesTableItem from './ArbitrumL2MessagesTableItem';
@@ -23,7 +24,10 @@ const ArbitrumL2MessagesTable = ({ items, direction, top, isLoading }: Props) =>
           { direction === 'from-rollup' && <TableColumnHeader>From</TableColumnHeader> }
           <TableColumnHeader>Message #</TableColumnHeader>
           <TableColumnHeader>L2 transaction</TableColumnHeader>
-          <TableColumnHeader>Age</TableColumnHeader>
+          <TableColumnHeader>
+            Timestamp
+            <TimeFormatToggle/>
+          </TableColumnHeader>
           <TableColumnHeader>Status</TableColumnHeader>
           <TableColumnHeader>L1 transaction</TableColumnHeader>
         </TableRow>

ui/messages/ArbitrumL2MessagesTableItem.tsx

@@ -14,7 +14,7 @@ import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import ArbitrumL2MessageStatus from 'ui/shared/statusTag/ArbitrumL2MessageStatus';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 import type { MessagesDirection } from './ArbitrumL2Messages';
 
@@ -74,7 +74,7 @@ const ArbitrumL2MessagesTableItem = ({ item, direction, isLoading }: Props) => {
         ) }
       </TableCell>
       <TableCell verticalAlign="middle" pr={ 12 }>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.origination_timestamp }
           isLoading={ isLoading }
           color="text.secondary"

ui/nameDomain/history/NameDomainHistoryListItem.tsx

@@ -10,7 +10,7 @@ import { stripTrailingSlash } from 'toolkit/utils/url';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 interface Props {
   event: bens.DomainEvent;
@@ -37,7 +37,7 @@ const NameDomainHistoryListItem = ({ isLoading, domain, event }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ event.timestamp }
           isLoading={ isLoading }
           color="text.secondary"

ui/nameDomain/history/NameDomainHistoryTable.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type * as bens from '@blockscout/bens-types';
 
 import { TableBody, TableColumnHeader, TableColumnHeaderSortable, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
+import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
 import NameDomainHistoryTableItem from './NameDomainHistoryTableItem';
 import type { SortField, Sort } from './utils';
@@ -28,8 +29,9 @@ const NameDomainHistoryTable = ({ history, domain, isLoading, sort, onSortToggle
             sortField="timestamp"
             sortValue={ sort }
             onSortToggle={ onSortToggle }
+            contentAfter={ <TimeFormatToggle/> }
           >
-            Age
+            Timestamp
           </TableColumnHeaderSortable>
           <TableColumnHeader width="25%">From</TableColumnHeader>
           <TableColumnHeader width="25%">Method</TableColumnHeader>

ui/nameDomain/history/NameDomainHistoryTableItem.tsx

@@ -10,7 +10,7 @@ import { TableCell, TableRow } from 'toolkit/chakra/table';
 import { stripTrailingSlash } from 'toolkit/utils/url';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 interface Props {
   event: bens.DomainEvent;
@@ -41,7 +41,7 @@ const NameDomainHistoryTableItem = ({ isLoading, event, domain }: Props) => {
         />
       </TableCell>
       <TableCell pl={ 9 } verticalAlign="middle">
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ event.timestamp }
           isLoading={ isLoading }
           color="text.secondary"

ui/nameDomains/NameDomainsTable.tsx

@@ -4,6 +4,7 @@ import type * as bens from '@blockscout/bens-types';
 
 import { TableBody, TableColumnHeader, TableColumnHeaderSortable, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
+import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
 import NameDomainsTableItem from './NameDomainsTableItem';
 import type { SortField, Sort } from './utils';
@@ -28,10 +29,14 @@ const NameDomainsTable = ({ data, isLoading, sort, onSortToggle }: Props) => {
             sortField="registration_date"
             sortValue={ sort }
             onSortToggle={ onSortToggle }
+            contentAfter={ <TimeFormatToggle/> }
           >
-            Registered on
+            Registered
           </TableColumnHeaderSortable>
-          <TableColumnHeader width="25%">Expiration date</TableColumnHeader>
+          <TableColumnHeader width="25%">
+            Expires
+            <TimeFormatToggle/>
+          </TableColumnHeader>
         </TableRow>
       </TableHeaderSticky>
       <TableBody>

ui/nameDomains/NameDomainsTableItem.tsx

@@ -1,14 +1,12 @@
-import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
 import type * as bens from '@blockscout/bens-types';
 
 import dayjs from 'lib/date/dayjs';
-import { Skeleton } from 'toolkit/chakra/skeleton';
 import { TableCell, TableRow } from 'toolkit/chakra/table';
-import NameDomainExpiryStatus from 'ui/nameDomain/NameDomainExpiryStatus';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import EnsEntity from 'ui/shared/entities/ens/EnsEntity';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 type Props = bens.Domain & {
   isLoading?: boolean;
@@ -32,20 +30,14 @@ const NameDomainsTableItem = ({
         { resolvedAddress && <AddressEntity address={ resolvedAddress } isLoading={ isLoading } fontWeight={ 500 }/> }
       </TableCell>
       <TableCell verticalAlign="middle" pl={ 9 }>
-        { registrationDate && (
-          <Skeleton loading={ isLoading }>
-            { dayjs(registrationDate).format('lll') }
-            <chakra.span color="text.secondary"> { dayjs(registrationDate).fromNow() }</chakra.span>
-          </Skeleton>
-        ) }
+        <TimeWithTooltip timestamp={ registrationDate } isLoading={ isLoading }/>
       </TableCell>
       <TableCell verticalAlign="middle">
-        { expiryDate && (
-          <Skeleton loading={ isLoading }>
-            <span>{ dayjs(expiryDate).format('lll') } </span>
-            <NameDomainExpiryStatus date={ expiryDate }/>
-          </Skeleton>
-        ) }
+        <TimeWithTooltip
+          timestamp={ expiryDate }
+          isLoading={ isLoading }
+          color={ expiryDate && dayjs(expiryDate).diff(dayjs(), 'day') < 30 ? 'red.600' : 'inherit' }
+        />
       </TableCell>
     </TableRow>
   );

ui/outputRoots/optimisticL2/OptimisticL2OutputRootsListItem.tsx

@@ -10,7 +10,7 @@ import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import HashStringShorten from 'ui/shared/HashStringShorten';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 const rollupFeature = config.features.rollup;
 
@@ -31,7 +31,7 @@ const OptimisticL2OutputRootsListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.l1_timestamp }
           isLoading={ isLoading }
           display="inline-block"

ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTable.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { OptimisticL2OutputRootsItem } from 'types/api/optimisticL2';
 
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
+import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
 import OptimisticL2OutputRootsTableItem from './OptimisticL2OutputRootsTableItem';
 
@@ -18,7 +19,10 @@ const OptimisticL2OutputRootsTable = ({ items, top, isLoading }: Props) => {
       <TableHeaderSticky top={ top }>
         <TableRow>
           <TableColumnHeader width="160px">L2 output index</TableColumnHeader>
-          <TableColumnHeader width="20%">Age</TableColumnHeader>
+          <TableColumnHeader width="20%">
+            Timestamp
+            <TimeFormatToggle/>
+          </TableColumnHeader>
           <TableColumnHeader width="20%">L2 block #</TableColumnHeader>
           <TableColumnHeader width="30%">L1 txn hash</TableColumnHeader>
           <TableColumnHeader width="30%">Output root</TableColumnHeader>

ui/outputRoots/optimisticL2/OptimisticL2OutputRootsTableItem.tsx

@@ -10,7 +10,7 @@ import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import BlockEntityL2 from 'ui/shared/entities/block/BlockEntityL2';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import HashStringShorten from 'ui/shared/HashStringShorten';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 const rollupFeature = config.features.rollup;
 
@@ -27,7 +27,7 @@ const OptimisticL2OutputRootsTableItem = ({ item, isLoading }: Props) => {
         <Skeleton loading={ isLoading } display="inline-block">{ item.l2_output_index }</Skeleton>
       </TableCell>
       <TableCell verticalAlign="middle">
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.l1_timestamp }
           isLoading={ isLoading }
           display="inline-block"

ui/pages/AdvancedFilter.tsx

@@ -37,6 +37,7 @@ import IconSvg from 'ui/shared/IconSvg';
 import PageTitle from 'ui/shared/Page/PageTitle';
 import Pagination from 'ui/shared/pagination/Pagination';
 import useQueryWithPages from 'ui/shared/pagination/useQueryWithPages';
+import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
 const COLUMNS_CHECKED = {} as Record<ColumnsIds, boolean>;
 TABLE_COLUMNS.forEach(c => COLUMNS_CHECKED[c.id] = true);
@@ -151,7 +152,12 @@ const AdvancedFilter = () => {
                     wordBreak="break-word"
                     whiteSpace="normal"
                   >
-                    { Boolean(column.name) && <chakra.span mr={ 2 } lineHeight="24px">{ column.name }</chakra.span> }
+                    { Boolean(column.name) && (
+                      <chakra.span mr={ 2 } lineHeight="24px" verticalAlign="middle">
+                        { column.id === 'age' ? 'Timestamp' : column.name }
+                      </chakra.span>
+                    ) }
+                    { column.id === 'age' && <TimeFormatToggle ml={ 0 } mr={ 1 } verticalAlign="middle"/> }
                     <FilterByColumn
                       column={ column.id }
                       columnName={ column.name }