display ON epoch instead of Unix epoch (#466)

Author: andreip136

src/components/chart/use-custom-tooltip.tsx

@@ -1,4 +1,5 @@
 import { ChartTypeEnum } from '@/components/chart/chart-type';
+import config from '@/config';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import ReactDOM from 'react-dom';
 
@@ -14,6 +15,23 @@ type UseCustomTooltipProps = {
   labelKey: string;
 };
 
+const EpochLabel: React.FC<{
+  children: React.ReactNode;
+  epoch: number;
+}> = ({ children, epoch }) => {
+  const onEpoch = epoch - config.epochDiff;
+  return (
+    <div>
+      <div>
+        {onEpoch < 1 ? <span>ON Testing Phase</span> : <span>ON Epoch {onEpoch.toLocaleString()}</span>}
+        :&nbsp;
+        <span>{children}</span>
+      </div>
+      <div className="text10 textSecondary">Unix epoch {epoch.toLocaleString()}</div>
+    </div>
+  );
+};
+
 const RechartsTooltipContent = ({ active, payload, label, cardIdRef, setTooltipInfo, mousePositionRef }: any) => {
   const prevActiveRef = useRef(active);
   const prevPayloadRef = useRef(payload);
@@ -88,7 +106,7 @@ export const useCustomTooltip = ({ chartType, labelKey }: UseCustomTooltipProps)
         mousePositionRef={mousePositionRef}
       />
     ),
-    [cardIdRef, setTooltipInfo, mousePositionRef]
+    []
   );
 
   const renderTooltipPortal = useCallback(() => {
@@ -137,9 +155,9 @@ export const useCustomTooltip = ({ chartType, labelKey }: UseCustomTooltipProps)
           tooltipContent = null;
         } else {
           tooltipContent = (
-            <div>
-              Epoch {label}: {Number(value).toLocaleString()} jobs
-            </div>
+            <EpochLabel epoch={Number(label)}>
+              <strong>{Number(value).toLocaleString()}</strong> jobs
+            </EpochLabel>
           );
         }
         break;
@@ -149,9 +167,9 @@ export const useCustomTooltip = ({ chartType, labelKey }: UseCustomTooltipProps)
           tooltipContent = null;
         } else {
           tooltipContent = (
-            <div>
-              Epoch {label}: USDC {Number(value).toLocaleString()}
-            </div>
+            <EpochLabel epoch={Number(label)}>
+              USDC <strong>{Number(value).toLocaleString()}</strong>
+            </EpochLabel>
           );
         }
         break;

src/components/chart/v-bar-chart.tsx

@@ -66,13 +66,9 @@ const VBarChart = ({ axisKey, barKey, chartType, data, footer, minBars, title }:
   }, [axisKey, barKey, data, minBars]);
 
   return (
-    <div className={styles.chartWrapper}>
+    <div className={styles.chartWrapper} onMouseLeave={handleMouseLeave}>
       <h3 className={styles.heading}>{title}</h3>
-      <div
-        onMouseMove={handleMouseMove}
-        onMouseLeave={handleMouseLeave}
-        style={{ width: '100%', height: '100%', position: 'relative' }}
-      >
+      <div onMouseMove={handleMouseMove} style={{ width: '100%', height: '100%', position: 'relative' }}>
         <ResponsiveContainer width="100%" height="100%">
           <RechartsBarChart
             barGap={-8}

src/config.ts

@@ -48,6 +48,13 @@ type Config = {
     [key: string]: string;
   };
   supportEmail: string;
+  /**
+   * Diff between ON Epoch 1 and Unix 0.
+   * ON Epoch is displayed to users in the UI.
+   * Unix epoch is used in data.
+   * 1 epoch = 7 days.
+   */
+  epochDiff: number;
 };
 
 const config: Config = {
@@ -99,6 +106,11 @@ const config: Config = {
   cookies: {
     accessToken: 'access_token',
   },
+  /**
+   * Unix epoch 0 from 1970-01-01.
+   * ON Epoch 1 from 2026-02-26.
+   */
+  epochDiff: 2929,
 };
 
 export default config;

src/styles/globals.css

@@ -264,6 +264,18 @@ a {
   gap: 32px;
 }
 
+.text10 {
+  font-size: 10px;
+}
+.text12 {
+  font-size: 12px;
+}
+.text14 {
+  font-size: 14px;
+}
+.text16 {
+  font-size: 16px;
+}
 .textAccent1 {
   color: var(--accent1);
 }