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

 <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

 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

 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

-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 }

ui/shared/TokenTransfer/TokenTransferListItem.tsx

@@ -12,11 +12,10 @@ import NftEntity from 'ui/shared/entities/nft/NftEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
 
-import TimeAgoWithTooltip from '../TimeAgoWithTooltip';
-
 type Props = TokenTransfer & {
   baseAddress?: string;
   showTxInfo?: boolean;
@@ -78,7 +77,7 @@ const TokenTransferListItem = ({
             truncation="constant_long"
             fontWeight="700"
           />
-          <TimeAgoWithTooltip
+          <TimeWithTooltip
             timestamp={ timestamp }
             enableIncrement={ enableTimeIncrement }
             isLoading={ isLoading }

ui/shared/TokenTransfer/TokenTransferTable.tsx

@@ -5,6 +5,7 @@ import type { TokenTransfer } from 'types/api/tokenTransfer';
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
+import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 import TokenTransferTableItem from 'ui/shared/TokenTransfer/TokenTransferTableItem';
 
 interface Props {
@@ -39,7 +40,12 @@ const TokenTransferTable = ({
             { showTxInfo && <TableColumnHeader width="44px"></TableColumnHeader> }
             <TableColumnHeader width="230px">Token</TableColumnHeader>
             <TableColumnHeader width="160px">Token ID</TableColumnHeader>
-            { showTxInfo && <TableColumnHeader width="200px">Txn hash</TableColumnHeader> }
+            { showTxInfo && (
+              <TableColumnHeader width="200px">
+                Txn hash
+                <TimeFormatToggle/>
+              </TableColumnHeader>
+            ) }
             <TableColumnHeader width="60%">From/To</TableColumnHeader>
             <TableColumnHeader width="40%" isNumeric>Value</TableColumnHeader>
           </TableRow>

ui/shared/TokenTransfer/TokenTransferTableItem.tsx

@@ -12,11 +12,10 @@ import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
 
-import TimeAgoWithTooltip from '../TimeAgoWithTooltip';
-
 type Props = TokenTransfer & {
   baseAddress?: string;
   showTxInfo?: boolean;
@@ -91,7 +90,7 @@ const TokenTransferTableItem = ({
             mt="7px"
             truncation="constant_long"
           />
-          <TimeAgoWithTooltip
+          <TimeWithTooltip
             timestamp={ timestamp }
             enableIncrement={ enableTimeIncrement }
             isLoading={ isLoading }

ui/shared/time/TimeFormatToggle.tsx

+import React from 'react';
+
+import { useSettingsContext } from 'lib/contexts/settings';
+import { IconButton } from 'toolkit/chakra/icon-button';
+import type { IconButtonProps } from 'toolkit/chakra/icon-button';
+import { Tooltip } from 'toolkit/chakra/tooltip';
+import IconSvg from 'ui/shared/IconSvg';
+
+interface Props extends IconButtonProps {}
+
+const TimeFormatToggle = (props: Props) => {
+  const settings = useSettingsContext();
+  const timeFormat = settings?.timeFormat || 'relative';
+
+  return (
+    <Tooltip content="Toggle time format">
+      <IconButton
+        aria-label="Toggle time format"
+        variant="icon_secondary"
+        onClick={ settings?.toggleTimeFormat }
+        boxSize={ 5 }
+        selected={ timeFormat === 'absolute' }
+        borderRadius="sm"
+        ml={ 2 }
+        verticalAlign="bottom"
+        { ...props }
+      >
+        <IconSvg name="clock-light" boxSize="14px"/>
+      </IconButton>
+    </Tooltip>
+  );
+};
+
+export default React.memo(TimeFormatToggle);

ui/shared/TimeAgoWithTooltip.tsx → ui/shared/time/TimeWithTooltip.tsx

 import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import type { TimeFormat } from 'types/settings';
+
+import { useSettingsContext } from 'lib/contexts/settings';
 import dayjs from 'lib/date/dayjs';
 import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
 import { Skeleton } from 'toolkit/chakra/skeleton';
@@ -12,17 +15,30 @@ type Props = {
   isLoading?: boolean;
   enableIncrement?: boolean;
   className?: string;
+  timeFormat?: TimeFormat;
 };
 
-const TimeAgoWithTooltip = ({ timestamp, fallbackText, isLoading, enableIncrement, className }: Props) => {
-  const timeAgo = useTimeAgoIncrement(timestamp || '', enableIncrement && !isLoading);
+const TimeWithTooltip = ({ timestamp, fallbackText, isLoading, enableIncrement, className, timeFormat: timeFormatProp }: Props) => {
+
+  const settings = useSettingsContext();
+  const timeFormat = timeFormatProp || settings?.timeFormat || 'relative';
+  const timeAgo = useTimeAgoIncrement(timestamp || '', enableIncrement && !isLoading && timeFormat === 'relative');
+
   if (!timestamp && !fallbackText) {
     return null;
   }
 
-  const content = timestamp ?
-    <Tooltip content={ dayjs(timestamp).format('llll') }><span>{ timeAgo }</span></Tooltip> :
-    <span>{ fallbackText }</span>;
+  const content = (() => {
+    if (!timestamp) {
+      return fallbackText;
+    }
+
+    if (timeFormat === 'relative') {
+      return <Tooltip content={ dayjs(timestamp).format('llll') }><span>{ timeAgo }</span></Tooltip>;
+    }
+
+    return <Tooltip content={ timeAgo }><span>{ dayjs(timestamp).format('lll') }</span></Tooltip>;
+  })();
 
   return (
     <Skeleton loading={ isLoading } className={ className }>
@@ -31,4 +47,4 @@ const TimeAgoWithTooltip = ({ timestamp, fallbackText, isLoading, enableIncremen
   );
 };
 
-export default chakra(TimeAgoWithTooltip);
+export default chakra(TimeWithTooltip);

ui/token/TokenTransfer/TokenTransferListItem.tsx

@@ -12,7 +12,7 @@ import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
 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';
 import TruncatedValue from 'ui/shared/TruncatedValue';
 
 type Props = TokenTransfer & { tokenId?: string; isLoading?: boolean; instance?: TokenInstance };
@@ -46,7 +46,7 @@ const TokenTransferListItem = ({
           truncation="constant_long"
           fontWeight="700"
         />
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ timestamp }
           enableIncrement
           isLoading={ isLoading }

ui/token/TokenTransfer/TokenTransferTable.tsx

@@ -7,6 +7,7 @@ import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
 import { NFT_TOKEN_TYPE_IDS } from 'lib/token/tokenTypes';
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
+import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 import TruncatedValue from 'ui/shared/TruncatedValue';
 import TokenTransferTableItem from 'ui/token/TokenTransfer/TokenTransferTableItem';
 
@@ -31,7 +32,10 @@ const TokenTransferTable = ({ data, top, showSocketInfo, socketInfoAlert, socket
       <TableRoot minW="950px">
         <TableHeaderSticky top={ top }>
           <TableRow>
-            <TableColumnHeader width="280px">Txn hash</TableColumnHeader>
+            <TableColumnHeader width="280px">
+              Txn hash
+              <TimeFormatToggle/>
+            </TableColumnHeader>
             <TableColumnHeader width="200px">Method</TableColumnHeader>
             <TableColumnHeader width={{ lg: '224px', xl: '380px' }}>From/To</TableColumnHeader>
             { (NFT_TOKEN_TYPE_IDS.includes(tokenType)) &&

ui/token/TokenTransfer/TokenTransferTableItem.tsx

@@ -12,7 +12,7 @@ import { TableCell, TableRow } from 'toolkit/chakra/table';
 import AddressFromTo from 'ui/shared/address/AddressFromTo';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 type Props = TokenTransfer & { tokenId?: string; isLoading?: boolean; instance?: TokenInstance };
 
@@ -39,7 +39,7 @@ const TokenTransferTableItem = ({
   return (
     <TableRow alignItems="top">
       <TableCell>
-        <Flex alignItems="center" py="7px">
+        <Flex flexDirection="column" alignItems="flex-start" mt="5px" rowGap={ 3 }>
           <TxEntity
             hash={ txHash }
             isLoading={ isLoading }
@@ -47,14 +47,13 @@ const TokenTransferTableItem = ({
             noIcon
             truncation="constant_long"
           />
-          <TimeAgoWithTooltip
+          <TimeWithTooltip
             timestamp={ timestamp }
             enableIncrement
             isLoading={ isLoading }
             display="inline-block"
             color="gray.500"
             fontWeight="400"
-            ml="10px"
           />
         </Flex>
       </TableCell>

ui/tokenTransfers/TokenTransfersListItem.tsx

@@ -13,7 +13,7 @@ import NftEntity from 'ui/shared/entities/nft/NftEntity';
 import TokenEntity from 'ui/shared/entities/token/TokenEntity';
 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';
 
 type Props = {
   item: TokenTransfer;
@@ -39,7 +39,7 @@ const TokenTransfersListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.timestamp }
           enableIncrement
           isLoading={ isLoading }

ui/tokenTransfers/TokenTransfersTable.tsx

@@ -4,6 +4,7 @@ import type { TokenTransfer } from 'types/api/tokenTransfer';
 
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
+import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 import TokenTransferTableItem from 'ui/tokenTransfers/TokenTransfersTableItem';
 
 interface Props {
@@ -18,7 +19,10 @@ const TokenTransferTable = ({ items, top, isLoading }: Props) => {
       <TableRoot minW="950px" tableLayout="auto">
         <TableHeaderSticky top={ top }>
           <TableRow>
-            <TableColumnHeader>Txn hash</TableColumnHeader>
+            <TableColumnHeader>
+              Txn hash
+              <TimeFormatToggle/>
+            </TableColumnHeader>
             <TableColumnHeader>Method</TableColumnHeader>
             <TableColumnHeader>Block</TableColumnHeader>
             <TableColumnHeader>From/To</TableColumnHeader>

ui/tokenTransfers/TokenTransfersTableItem.tsx

@@ -13,7 +13,7 @@ import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import NftEntity from 'ui/shared/entities/nft/NftEntity';
 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';
 
 type Props = {
   item: TokenTransfer;
@@ -39,7 +39,7 @@ const TokenTransferTableItem = ({ item, isLoading }: Props) => {
           noIcon
           truncation="constant_long"
         />
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.timestamp }
           enableIncrement
           isLoading={ isLoading }

ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesListItem.tsx

@@ -13,7 +13,7 @@ import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 import ArbitrumL2TxnBatchStatus from 'ui/shared/statusTag/ArbitrumL2TxnBatchStatus';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 const rollupFeature = config.features.rollup;
 
@@ -69,7 +69,7 @@ const ArbitrumL2TxnBatchesListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.commitment_transaction.timestamp }
           fallbackText="Undefined"
           isLoading={ isLoading }

ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTable.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { ArbitrumL2TxnBatchesItem } from 'types/api/arbitrumL2';
 
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
+import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
 import ArbitrumL2TxnBatchesTableItem from './ArbitrumL2TxnBatchesTableItem';
 
@@ -22,7 +23,10 @@ const ArbitrumL2TxnBatchesTable = ({ items, top, isLoading }: Props) => {
           <TableColumnHeader>L1 block</TableColumnHeader>
           <TableColumnHeader>Block count</TableColumnHeader>
           <TableColumnHeader>L1 transaction</TableColumnHeader>
-          <TableColumnHeader>Age</TableColumnHeader>
+          <TableColumnHeader>
+            Timestamp
+            <TimeFormatToggle/>
+          </TableColumnHeader>
           <TableColumnHeader>Txn count</TableColumnHeader>
         </TableRow>
       </TableHeaderSticky>

ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchesTableItem.tsx

@@ -14,7 +14,7 @@ import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import ArbitrumL2TxnBatchStatus from 'ui/shared/statusTag/ArbitrumL2TxnBatchStatus';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 const rollupFeature = config.features.rollup;
 
@@ -58,7 +58,7 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
         />
       </TableCell>
       <TableCell verticalAlign="middle">
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.commitment_transaction.timestamp }
           fallbackText="Undefined"
           isLoading={ isLoading }

ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesListItem.tsx

@@ -10,7 +10,7 @@ import { Skeleton } from 'toolkit/chakra/skeleton';
 import OptimisticL2TxnBatchDA from 'ui/shared/batch/OptimisticL2TxnBatchDA';
 import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
 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;
 
@@ -42,7 +42,7 @@ const OptimisticL2TxnBatchesListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.l1_timestamp }
           isLoading={ isLoading }
           display="inline-block"

ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTable.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { OptimisticL2TxnBatchesItem } from 'types/api/optimisticL2';
 
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
+import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
 import OptimisticL2TxnBatchesTableItem from './OptimisticL2TxnBatchesTableItem';
 
@@ -19,7 +20,10 @@ const OptimisticL2TxnBatchesTable = ({ items, top, isLoading }: Props) => {
         <TableRow>
           <TableColumnHeader>Batch ID</TableColumnHeader>
           <TableColumnHeader>Storage</TableColumnHeader>
-          <TableColumnHeader>Age</TableColumnHeader>
+          <TableColumnHeader>
+            Timestamp
+            <TimeFormatToggle/>
+          </TableColumnHeader>
           <TableColumnHeader isNumeric>L1 txn count</TableColumnHeader>
           <TableColumnHeader isNumeric>L2 blocks</TableColumnHeader>
           <TableColumnHeader isNumeric>Txn</TableColumnHeader>

ui/txnBatches/optimisticL2/OptimisticL2TxnBatchesTableItem.tsx

@@ -10,7 +10,7 @@ import { Skeleton } from 'toolkit/chakra/skeleton';
 import { TableCell, TableRow } from 'toolkit/chakra/table';
 import OptimisticL2TxnBatchDA from 'ui/shared/batch/OptimisticL2TxnBatchDA';
 import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 const rollupFeature = config.features.rollup;
 
@@ -30,7 +30,7 @@ const OptimisticL2TxnBatchesTableItem = ({ item, isLoading }: Props) => {
         { item.batch_data_container ? <OptimisticL2TxnBatchDA container={ item.batch_data_container } isLoading={ isLoading }/> : '-' }
       </TableCell>
       <TableCell verticalAlign="middle">
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.l1_timestamp }
           isLoading={ isLoading }
           display="inline-block"

ui/txnBatches/scrollL2/ScrollL2TxnBatchesListItem.tsx

@@ -13,7 +13,7 @@ import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 import ScrollL2TxnBatchStatus from 'ui/shared/statusTag/ScrollL2TxnBatchStatus';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 const rollupFeature = config.features.rollup;
 
@@ -64,7 +64,7 @@ const ScrollL2TxnBatchesListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.commitment_transaction.timestamp }
           fallbackText="Undefined"
           isLoading={ isLoading }

ui/txnBatches/scrollL2/ScrollL2TxnBatchesTable.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { ScrollL2TxnBatch } from 'types/api/scrollL2';
 
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
+import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
 import ScrollL2TxnBatchesTableItem from './ScrollL2TxnBatchesTableItem';
 
@@ -22,7 +23,10 @@ const ScrollL2TxnBatchesTable = ({ items, top, isLoading }: Props) => {
           <TableColumnHeader>Status</TableColumnHeader>
           <TableColumnHeader>Committed block</TableColumnHeader>
           <TableColumnHeader>Committed txn hash</TableColumnHeader>
-          <TableColumnHeader>Age</TableColumnHeader>
+          <TableColumnHeader>
+            Timestamp
+            <TimeFormatToggle/>
+          </TableColumnHeader>
           <TableColumnHeader>Finalized block</TableColumnHeader>
           <TableColumnHeader>Finalized txn hash</TableColumnHeader>
           <TableColumnHeader isNumeric>Blocks</TableColumnHeader>

ui/txnBatches/scrollL2/ScrollL2TxnBatchesTableItem.tsx

@@ -13,7 +13,7 @@ import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
 import BlockEntityL1 from 'ui/shared/entities/block/BlockEntityL1';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import ScrollL2TxnBatchStatus from 'ui/shared/statusTag/ScrollL2TxnBatchStatus';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 const rollupFeature = config.features.rollup;
 
@@ -54,7 +54,7 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
         />
       </TableCell>
       <TableCell verticalAlign="middle">
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.commitment_transaction.timestamp }
           fallbackText="Undefined"
           isLoading={ isLoading }

ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesListItem.tsx

@@ -11,7 +11,7 @@ import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 import ZkEvmL2TxnBatchStatus from 'ui/shared/statusTag/ZkEvmL2TxnBatchStatus';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 const rollupFeature = config.features.rollup;
 
@@ -42,7 +42,7 @@ const ZkEvmTxnBatchesListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.timestamp }
           fallbackText="Undefined"
           isLoading={ isLoading }

ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTable.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { ZkEvmL2TxnBatchesItem } from 'types/api/zkEvmL2';
 
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
+import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
 import ZkEvmTxnBatchesTableItem from './ZkEvmTxnBatchesTableItem';
 
@@ -14,13 +15,16 @@ type Props = {
 
 const TxnBatchesTable = ({ items, top, isLoading }: Props) => {
   return (
-    <TableRoot minW="1000px">
+    <TableRoot minW="1100px">
       <TableHeaderSticky top={ top }>
         <TableRow>
-          <TableColumnHeader width="33%">Batch #</TableColumnHeader>
-          <TableColumnHeader width="33%">Status</TableColumnHeader>
-          <TableColumnHeader width="150px">Age</TableColumnHeader>
-          <TableColumnHeader width="150px">Txn count</TableColumnHeader>
+          <TableColumnHeader width="40%">Batch #</TableColumnHeader>
+          <TableColumnHeader width="60%">Status</TableColumnHeader>
+          <TableColumnHeader width="180px">
+            Timestamp
+            <TimeFormatToggle/>
+          </TableColumnHeader>
+          <TableColumnHeader width="100px">Txn count</TableColumnHeader>
           <TableColumnHeader width="230px">Verify tx hash</TableColumnHeader>
           <TableColumnHeader width="230px">Sequence hash</TableColumnHeader>
         </TableRow>

ui/txnBatches/zkEvmL2/ZkEvmTxnBatchesTableItem.tsx

@@ -11,7 +11,7 @@ import { TableCell, TableRow } from 'toolkit/chakra/table';
 import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import ZkEvmL2TxnBatchStatus from 'ui/shared/statusTag/ZkEvmL2TxnBatchStatus';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 const rollupFeature = config.features.rollup;
 
@@ -37,7 +37,7 @@ const TxnBatchesTableItem = ({ item, isLoading }: Props) => {
         <ZkEvmL2TxnBatchStatus status={ item.status } isLoading={ isLoading }/>
       </TableCell>
       <TableCell verticalAlign="middle">
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.timestamp }
           fallbackText="Undefined"
           isLoading={ isLoading }

ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesListItem.tsx

@@ -11,7 +11,7 @@ import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
 import ZkSyncL2TxnBatchStatus from 'ui/shared/statusTag/ZkSyncL2TxnBatchStatus';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 const rollupFeature = config.features.rollup;
 
@@ -42,7 +42,7 @@ const ZkSyncTxnBatchesListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.timestamp }
           fallbackText="Undefined"
           isLoading={ isLoading }

ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesTable.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { ZkSyncBatchesItem } from 'types/api/zkSyncL2';
 
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
+import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
 import ZkSyncTxnBatchesTableItem from './ZkSyncTxnBatchesTableItem';
 
@@ -19,8 +20,11 @@ const ZkSyncTxnBatchesTable = ({ items, top, isLoading }: Props) => {
         <TableRow>
           <TableColumnHeader width="40%">Batch #</TableColumnHeader>
           <TableColumnHeader width="60%">Status</TableColumnHeader>
-          <TableColumnHeader width="150px">Age</TableColumnHeader>
-          <TableColumnHeader width="150px">Txn count</TableColumnHeader>
+          <TableColumnHeader width="180px">
+            Timestamp
+            <TimeFormatToggle/>
+          </TableColumnHeader>
+          <TableColumnHeader width="120px">Txn count</TableColumnHeader>
           <TableColumnHeader width="210px">Commit tx</TableColumnHeader>
           <TableColumnHeader width="210px">Prove tx</TableColumnHeader>
         </TableRow>

ui/txnBatches/zkSyncL2/ZkSyncTxnBatchesTableItem.tsx

@@ -11,7 +11,7 @@ import { TableCell, TableRow } from 'toolkit/chakra/table';
 import BatchEntityL2 from 'ui/shared/entities/block/BatchEntityL2';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
 import ZkSyncL2TxnBatchStatus from 'ui/shared/statusTag/ZkSyncL2TxnBatchStatus';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 const rollupFeature = config.features.rollup;
 
@@ -37,7 +37,7 @@ const ZkSyncTxnBatchesTableItem = ({ item, isLoading }: Props) => {
         <ZkSyncL2TxnBatchStatus status={ item.status } isLoading={ isLoading }/>
       </TableCell>
       <TableCell verticalAlign="middle">
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.timestamp }
           fallbackText="Undefined"
           isLoading={ isLoading }

ui/txs/TxsListItem.tsx

@@ -17,7 +17,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 TxFee from 'ui/shared/tx/TxFee';
 import TxWatchListTags from 'ui/shared/tx/TxWatchListTags';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
@@ -65,7 +65,7 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
             name: tx.transaction_types.includes('blob_transaction') ? 'blob' : undefined,
           }}
         />
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ tx.timestamp }
           enableIncrement={ enableTimeIncrement }
           isLoading={ isLoading }

ui/txs/TxsTable.tsx

@@ -9,6 +9,7 @@ import useInitialList from 'lib/hooks/useInitialList';
 import useLazyRenderedList from 'lib/hooks/useLazyRenderedList';
 import { currencyUnits } from 'lib/units';
 import { TableBody, TableColumnHeader, TableColumnHeaderSortable, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
+import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
 import TxsSocketNotice from './socket/TxsSocketNotice';
 import TxsTableItem from './TxsTableItem';
@@ -53,7 +54,10 @@ const TxsTable = ({
         <TableHeaderSticky top={ top }>
           <TableRow>
             <TableColumnHeader width="54px"></TableColumnHeader>
-            <TableColumnHeader width="180px">Txn hash</TableColumnHeader>
+            <TableColumnHeader width="180px">
+              Txn hash
+              <TimeFormatToggle/>
+            </TableColumnHeader>
             <TableColumnHeader width="160px">Type</TableColumnHeader>
             <TableColumnHeader width="20%">Method</TableColumnHeader>
             { showBlockInfo && (

ui/txs/TxsTableItem.tsx

@@ -11,7 +11,7 @@ import CurrencyValue from 'ui/shared/CurrencyValue';
 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 TxFee from 'ui/shared/tx/TxFee';
 import TxWatchListTags from 'ui/shared/tx/TxWatchListTags';
 import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
@@ -46,7 +46,7 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
             maxW="100%"
             truncation="constant_long"
           />
-          <TimeAgoWithTooltip
+          <TimeWithTooltip
             timestamp={ tx.timestamp }
             enableIncrement={ enableTimeIncrement }
             isLoading={ isLoading }

ui/userOps/UserOpsListItem.tsx

@@ -9,7 +9,7 @@ import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 import UserOpStatus from 'ui/shared/userOps/UserOpStatus';
 
 type Props = {
@@ -30,7 +30,7 @@ const UserOpsListItem = ({ item, isLoading, showTx, showSender }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.timestamp }
           isLoading={ isLoading }
           color="text.secondary"

ui/userOps/UserOpsTable.tsx

@@ -4,6 +4,7 @@ import type { UserOpsItem } from 'types/api/userOps';
 
 import config from 'configs/app';
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
+import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
 import UserOpsTableItem from './UserOpsTableItem';
 
@@ -21,7 +22,10 @@ const UserOpsTable = ({ items, isLoading, top, showTx, showSender }: Props) => {
       <TableHeaderSticky top={ top }>
         <TableRow>
           <TableColumnHeader w="60%">User op hash</TableColumnHeader>
-          <TableColumnHeader w="110px">Age</TableColumnHeader>
+          <TableColumnHeader w="180px">
+            Timestamp
+            <TimeFormatToggle/>
+          </TableColumnHeader>
           <TableColumnHeader w="140px">Status</TableColumnHeader>
           { showSender && <TableColumnHeader w="160px">Sender</TableColumnHeader> }
           { showTx && <TableColumnHeader w="160px">Tx hash</TableColumnHeader> }

ui/userOps/UserOpsTableItem.tsx

@@ -9,7 +9,7 @@ import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrPara
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
 import UserOpEntity from 'ui/shared/entities/userOp/UserOpEntity';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 import UserOpStatus from 'ui/shared/userOps/UserOpStatus';
 
  type Props = {
@@ -26,7 +26,7 @@ const UserOpsTableItem = ({ item, isLoading, showTx, showSender }: Props) => {
         <UserOpEntity hash={ item.hash } isLoading={ isLoading } noIcon fontWeight={ 700 } truncation="constant_long"/>
       </TableCell>
       <TableCell verticalAlign="middle">
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.timestamp }
           isLoading={ isLoading }
           color="text.secondary"

ui/verifiedContracts/VerifiedContractsListItem.tsx

@@ -13,7 +13,7 @@ import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 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 TruncatedValue from 'ui/shared/TruncatedValue';
 
 interface Props {
@@ -102,7 +102,7 @@ const VerifiedContractsListItem = ({ data, isLoading }: Props) => {
         <Skeleton loading={ isLoading } fontWeight={ 500 }>Verified</Skeleton>
         <Flex alignItems="center" columnGap={ 2 }>
           <IconSvg name="status/success" boxSize={ 4 } color="green.500" isLoading={ isLoading }/>
-          <TimeAgoWithTooltip
+          <TimeWithTooltip
             timestamp={ data.verified_at }
             isLoading={ isLoading }
             color="text.secondary"

ui/verifiedContracts/VerifiedContractsTable.tsx

@@ -7,6 +7,7 @@ import { currencyUnits } from 'lib/units';
 import { TableBody, TableColumnHeader, TableColumnHeaderSortable, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 import { ACTION_BAR_HEIGHT_DESKTOP } from 'ui/shared/ActionBar';
 import getNextSortValue from 'ui/shared/sort/getNextSortValue';
+import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 import { SORT_SEQUENCE } from 'ui/verifiedContracts/utils';
 
 import VerifiedContractsTableItem from './VerifiedContractsTableItem';
@@ -25,7 +26,7 @@ const VerifiedContractsTable = ({ data, sort, setSorting, isLoading }: Props) =>
   }, [ sort, setSorting ]);
 
   return (
-    <TableRoot minW="950px">
+    <TableRoot minW="1100px">
       <TableHeaderSticky top={ ACTION_BAR_HEIGHT_DESKTOP }>
         <TableRow>
           <TableColumnHeader width="50%">Contract</TableColumnHeader>
@@ -51,7 +52,10 @@ const VerifiedContractsTable = ({ data, sort, setSorting, isLoading }: Props) =>
           </TableColumnHeaderSortable>
           <TableColumnHeader width="50%">Language / Compiler version</TableColumnHeader>
           <TableColumnHeader width="80px">Settings</TableColumnHeader>
-          <TableColumnHeader width="150px">Verified</TableColumnHeader>
+          <TableColumnHeader width="200px">
+            Verified
+            <TimeFormatToggle/>
+          </TableColumnHeader>
           <TableColumnHeader width="130px">License</TableColumnHeader>
         </TableRow>
       </TableHeaderSticky>

ui/verifiedContracts/VerifiedContractsTableItem.tsx

@@ -13,7 +13,7 @@ import { Tooltip } from 'toolkit/chakra/tooltip';
 import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import IconSvg from 'ui/shared/IconSvg';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 import TruncatedValue from 'ui/shared/TruncatedValue';
 
 interface Props {
@@ -111,7 +111,7 @@ const VerifiedContractsTableItem = ({ data, isLoading }: Props) => {
       <TableCell>
         <Flex alignItems="center" columnGap={ 2 } my={ 1 }>
           <IconSvg name="status/success" boxSize={ 4 } color="green.500" isLoading={ isLoading }/>
-          <TimeAgoWithTooltip
+          <TimeWithTooltip
             timestamp={ data.verified_at }
             isLoading={ isLoading }
             color="text.secondary"

ui/withdrawals/beaconChain/BeaconChainWithdrawalsListItem.tsx

@@ -11,7 +11,7 @@ import CurrencyValue from 'ui/shared/CurrencyValue';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import ListItemMobileGrid from 'ui/shared/ListItemMobile/ListItemMobileGrid';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 const feature = config.features.beaconChain;
 
@@ -73,7 +73,7 @@ const BeaconChainWithdrawalsListItem = ({ item, isLoading, view }: Props) => {
         <>
           <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
-            <TimeAgoWithTooltip
+            <TimeWithTooltip
               timestamp={ item.timestamp }
               isLoading={ isLoading }
               display="inline-block"

ui/withdrawals/beaconChain/BeaconChainWithdrawalsTable.tsx

@@ -7,6 +7,7 @@ import type { WithdrawalsItem } from 'types/api/withdrawals';
 import config from 'configs/app';
 import useLazyRenderedList from 'lib/hooks/useLazyRenderedList';
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
+import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
 import BeaconChainWithdrawalsTableItem from './BeaconChainWithdrawalsTableItem';
 
@@ -37,12 +38,12 @@ const BeaconChainWithdrawalsTable = ({ items, isLoading, top, view }: Props) =>
     <TableRoot style={{ tableLayout: 'auto' }} minW="950px">
       <TableHeaderSticky top={ top }>
         <TableRow>
-          <TableColumnHeader minW="140px">Index</TableColumnHeader>
-          <TableColumnHeader minW="200px">Validator index</TableColumnHeader>
-          { view !== 'block' && <TableColumnHeader w="25%">Block</TableColumnHeader> }
-          { view !== 'address' && <TableColumnHeader w="25%">To</TableColumnHeader> }
-          { view !== 'block' && <TableColumnHeader w="25%">Age</TableColumnHeader> }
-          <TableColumnHeader w="25%">{ `Value ${ feature.currency.symbol }` }</TableColumnHeader>
+          <TableColumnHeader>Index</TableColumnHeader>
+          <TableColumnHeader>Validator index</TableColumnHeader>
+          { view !== 'block' && <TableColumnHeader>Block</TableColumnHeader> }
+          { view !== 'address' && <TableColumnHeader>To</TableColumnHeader> }
+          { view !== 'block' && <TableColumnHeader>Timestamp<TimeFormatToggle/></TableColumnHeader> }
+          <TableColumnHeader>{ `Value ${ feature.currency.symbol }` }</TableColumnHeader>
         </TableRow>
       </TableHeaderSticky>
       <TableBody>

ui/withdrawals/beaconChain/BeaconChainWithdrawalsTableItem.tsx

@@ -9,7 +9,7 @@ import { TableCell, TableRow } from 'toolkit/chakra/table';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
-import TimeAgoWithTooltip from 'ui/shared/TimeAgoWithTooltip';
+import TimeWithTooltip from 'ui/shared/time/TimeWithTooltip';
 
 type Props = ({
   item: WithdrawalsItem;
@@ -52,7 +52,7 @@ const BeaconChainWithdrawalsTableItem = ({ item, view, isLoading }: Props) => {
       ) }
       { view !== 'block' && (
         <TableCell verticalAlign="middle" pr={ 12 }>
-          <TimeAgoWithTooltip
+          <TimeWithTooltip
             timestamp={ item.timestamp }
             isLoading={ isLoading }
             color="text.secondary"

ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsListItem.tsx

@@ -10,7 +10,7 @@ import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 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;
 
@@ -59,7 +59,7 @@ const OptimisticL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
         <>
           <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
           <ListItemMobileGrid.Value>
-            <TimeAgoWithTooltip
+            <TimeWithTooltip
               timestamp={ item.l2_timestamp }
               isLoading={ isLoading }
               display="inline-block"

ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTable.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import type { OptimisticL2WithdrawalsItem } from 'types/api/optimisticL2';
 
 import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
+import TimeFormatToggle from 'ui/shared/time/TimeFormatToggle';
 
 import OptimisticL2WithdrawalsTableItem from './OptimisticL2WithdrawalsTableItem';
 
@@ -20,7 +21,10 @@ const OptimisticL2WithdrawalsTable = ({ items, top, isLoading }: Props) => {
           <TableColumnHeader>Msg nonce</TableColumnHeader>
           <TableColumnHeader>From</TableColumnHeader>
           <TableColumnHeader>L2 txn hash</TableColumnHeader>
-          <TableColumnHeader>Age</TableColumnHeader>
+          <TableColumnHeader>
+            Timestamp
+            <TimeFormatToggle/>
+          </TableColumnHeader>
           <TableColumnHeader>Status</TableColumnHeader>
           <TableColumnHeader>L1 txn hash</TableColumnHeader>
           <TableColumnHeader>Time left</TableColumnHeader>

ui/withdrawals/optimisticL2/OptimisticL2WithdrawalsTableItem.tsx

@@ -10,7 +10,7 @@ import { TableCell, TableRow } from 'toolkit/chakra/table';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 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;
 
@@ -46,7 +46,7 @@ const OptimisticL2WithdrawalsTableItem = ({ item, isLoading }: Props) => {
         />
       </TableCell>
       <TableCell verticalAlign="middle" pr={ 12 }>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.l2_timestamp }
           fallbackText="N/A"
           isLoading={ isLoading }

ui/withdrawals/scrollL2/ScrollL2WithdrawalsListItem.tsx

@@ -10,7 +10,7 @@ import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 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 ScrollL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.origination_timestamp }
           isLoading={ isLoading }
           display="inline-block"

ui/withdrawals/scrollL2/ScrollL2WithdrawalsTable.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 ScrollL2WithdrawalsTableItem from './ScrollL2WithdrawalsTableItem';
 
@@ -21,7 +22,10 @@ const ScrollL2WithdrawalsTable = ({ items, top, isLoading }: Props) => {
           <TableColumnHeader>L2 block</TableColumnHeader>
           <TableColumnHeader>Index</TableColumnHeader>
           <TableColumnHeader>L2 txn hash</TableColumnHeader>
-          <TableColumnHeader>Age</TableColumnHeader>
+          <TableColumnHeader>
+            Timestamp
+            <TimeFormatToggle/>
+          </TableColumnHeader>
           <TableColumnHeader>L1 txn hash</TableColumnHeader>
           <TableColumnHeader isNumeric>{ `Value ${ config.chain.currency.symbol }` }</TableColumnHeader>
         </TableRow>

ui/withdrawals/scrollL2/ScrollL2WithdrawalsTableItem.tsx

@@ -10,7 +10,7 @@ import { TableCell, TableRow } from 'toolkit/chakra/table';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 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;
 
@@ -46,7 +46,7 @@ const ScrollL2WithdrawalsTableItem = ({ item, isLoading }: Props) => {
         />
       </TableCell>
       <TableCell verticalAlign="middle" pr={ 12 }>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.origination_timestamp }
           isLoading={ isLoading }
           color="text.secondary"

ui/withdrawals/shibarium/WithdrawalsListItem.tsx

@@ -8,7 +8,7 @@ import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 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;
 
@@ -63,7 +63,7 @@ const WithdrawalsListItem = ({ item, isLoading }: Props) => {
       </ListItemMobileGrid.Value>
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.timestamp }
           isLoading={ isLoading }
           display="inline-block"

ui/withdrawals/shibarium/WithdrawalsTable.tsx

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

ui/withdrawals/shibarium/WithdrawalsTableItem.tsx

@@ -8,7 +8,7 @@ import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrPara
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 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;
 
@@ -54,7 +54,7 @@ const WithdrawalsTableItem = ({ item, isLoading }: Props) => {
         />
       </TableCell>
       <TableCell verticalAlign="middle" pr={ 12 }>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.timestamp }
           isLoading={ isLoading }
           display="inline-block"

ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsListItem.tsx

@@ -10,7 +10,7 @@ import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 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 ZkEvmL2WithdrawalsListItem = ({ item, isLoading }: Props) => {
 
       <ListItemMobileGrid.Label isLoading={ isLoading }>Age</ListItemMobileGrid.Label>
       <ListItemMobileGrid.Value>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.timestamp }
           isLoading={ isLoading }
           display="inline-block"

ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTable.tsx

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

ui/withdrawals/zkEvmL2/ZkEvmL2WithdrawalsTableItem.tsx

@@ -10,7 +10,7 @@ import { TableCell, TableRow } from 'toolkit/chakra/table';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 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 ZkEvmL2WithdrawalsTableItem = ({ item, isLoading }: Props) => {
         />
       </TableCell>
       <TableCell verticalAlign="middle" pr={ 12 }>
-        <TimeAgoWithTooltip
+        <TimeWithTooltip
           timestamp={ item.timestamp }
           isLoading={ isLoading }
           color="text.secondary"