Add possibility to change timestamp format (#3201)

* add global setting to change between local and utc time

* add control to change time format on detailed views

* tweaks

* adapt uptime graphs to work with utc time from settings

* fix tests

* add maxDiffPixels for SearchResults test

* fix test

Author: tom2drum

.vscode/tasks.json

@@ -341,6 +341,7 @@
               "localhost",
               "arbitrum",
               "arbitrum_sepolia",
+              "arbitrum_nova",
               "base",
               "blackfort_testnet",
               "celo",

configs/envs/.env.mega_eth

@@ -33,6 +33,8 @@ NEXT_PUBLIC_MARKETPLACE_CATEGORIES_URL=https://raw.githubusercontent.com/blocksc
 NEXT_PUBLIC_MARKETPLACE_ENABLED=true
 NEXT_PUBLIC_MARKETPLACE_SUBMIT_FORM=https://airtable.com/appiy5yijZpMMSKjT/shr6uMGPKjj1DK7NL
 NEXT_PUBLIC_MARKETPLACE_SUGGEST_IDEAS_FORM=https://airtable.com/appiy5yijZpMMSKjT/pag3t82DUCyhGRZZO/form
+NEXT_PUBLIC_MEGA_ETH_SOCKET_URL_METRICS=wss://testnetv2-dashboard.megaeth.com/metrics
+NEXT_PUBLIC_MEGA_ETH_SOCKET_URL_RPC=wss://megaeth-testnet-v2.blockscout.com/api/v2/proxy/3rdparty/ws_megaeth_testnet_2
 NEXT_PUBLIC_METADATA_SERVICE_API_HOST=https://metadata.services.blockscout.com
 NEXT_PUBLIC_MIXPANEL_CONFIG_OVERRIDES={"record_sessions_percent": 0.5,"record_heatmap_data": true}
 NEXT_PUBLIC_NETWORK_CURRENCY_DECIMALS=18

lib/contexts/settings.tsx

@@ -16,6 +16,8 @@ interface TSettingsContext {
   toggleAddressFormat: () => void;
   timeFormat: TimeFormat;
   toggleTimeFormat: () => void;
+  isLocalTime: boolean;
+  toggleIsLocalTime: () => void;
 }
 
 export const SettingsContext = React.createContext<TSettingsContext | null>(null);
@@ -32,6 +34,10 @@ export function SettingsContextProvider({ children }: SettingsProviderProps) {
     cookies.get(cookies.NAMES.TIME_FORMAT, appCookies) as TimeFormat || 'relative',
   );
 
+  const [ isLocalTime, setIsLocalTime ] = React.useState<boolean>(
+    (cookies.get(cookies.NAMES.LOCAL_TIME, appCookies) ?? 'true') === 'true',
+  );
+
   const toggleAddressFormat = React.useCallback(() => {
     setAddressFormat(prev => {
       const nextValue = prev === 'base16' ? 'bech32' : 'base16';
@@ -48,14 +54,24 @@ export function SettingsContextProvider({ children }: SettingsProviderProps) {
     });
   }, []);
 
+  const toggleIsLocalTime = React.useCallback(() => {
+    setIsLocalTime(prev => {
+      const nextValue = !prev;
+      cookies.set(cookies.NAMES.LOCAL_TIME, nextValue ? 'true' : 'false');
+      return nextValue;
+    });
+  }, []);
+
   const value = React.useMemo(() => {
     return {
       addressFormat,
       toggleAddressFormat,
       timeFormat,
       toggleTimeFormat,
+      isLocalTime,
+      toggleIsLocalTime,
     };
-  }, [ addressFormat, toggleAddressFormat, timeFormat, toggleTimeFormat ]);
+  }, [ addressFormat, toggleAddressFormat, timeFormat, toggleTimeFormat, isLocalTime, toggleIsLocalTime ]);
 
   return (
     <SettingsContext.Provider value={ value }>

lib/cookies.ts

@@ -14,6 +14,7 @@ export enum NAMES {
   ADDRESS_IDENTICON_TYPE = 'address_identicon_type',
   ADDRESS_FORMAT = 'address_format',
   TIME_FORMAT = 'time_format',
+  LOCAL_TIME = 'local_time',
   INDEXING_ALERT = 'indexing_alert',
   ADBLOCK_DETECTED = 'adblock_detected',
   MIXPANEL_DEBUG = '_mixpanel_debug',

lib/date/dayjs.ts

@@ -5,6 +5,7 @@ import localizedFormat from 'dayjs/plugin/localizedFormat';
 import minMax from 'dayjs/plugin/minMax';
 import relativeTime from 'dayjs/plugin/relativeTime';
 import updateLocale from 'dayjs/plugin/updateLocale';
+import utc from 'dayjs/plugin/utc';
 import weekOfYear from 'dayjs/plugin/weekOfYear';
 
 import { nbsp } from 'toolkit/utils/htmlEntities';
@@ -34,6 +35,7 @@ dayjs.extend(localizedFormat);
 dayjs.extend(duration);
 dayjs.extend(weekOfYear);
 dayjs.extend(minMax);
+dayjs.extend(utc);
 
 dayjs.updateLocale('en', {
   formats: {
@@ -63,3 +65,8 @@ dayjs.updateLocale('en', {
 dayjs.locale('en');
 
 export default dayjs;
+
+export const FORMATS = {
+  // the "lll" format with seconds
+  lll_s: 'MMM D, YYYY h:mm:ss A',
+};