/dashboard fees duration refactor

src/pages/Dashboard/OverviewCard.tsx

@@ -6,7 +6,7 @@ import { getServerUrl } from "config/backend";
 import { ARBITRUM, AVALANCHE } from "config/chains";
 import { USD_DECIMALS } from "config/factors";
 import { useGmxPrice, useTotalGmxStaked } from "domain/legacy";
-import { getCurrentEpochStartedTimestamp, useV1FeesInfo, useVolumeInfo } from "domain/stats";
+import { useV1FeesInfo, useVolumeInfo } from "domain/stats";
 import useV2Stats from "domain/synthetics/stats/useV2Stats";
 import { bigMath } from "lib/bigmath";
 import { useChainId } from "lib/chains";
@@ -16,6 +16,7 @@ import { expandDecimals, formatAmount } from "lib/numbers";
 import { sumBigInts } from "lib/sumBigInts";
 import useWallet from "lib/wallets/useWallet";
 import { ACTIVE_CHAIN_IDS } from "./DashboardV2";
+import { getFormattedFeesDuration } from "./getFormattedFeesDuration";
 import { getPositionStats } from "./getPositionStats";
 import type { ChainStats } from "./useDashboardChainStatsMulticall";
 
@@ -252,11 +253,11 @@ export function OverviewCard({
     [v1ArbitrumWeeklyFees, v1AvalancheWeeklyFees, v2ArbitrumWeeklyFees, v2AvalancheWeeklyFees]
   );
 
-  const [formattedDuration, setFormattedDuration] = useState(() => getFormattedDuration());
+  const [formattedDuration, setFormattedDuration] = useState(() => getFormattedFeesDuration());
 
   useEffect(() => {
     const interval = setInterval(() => {
-      setFormattedDuration(getFormattedDuration());
+      setFormattedDuration(getFormattedFeesDuration());
     }, 1000 * 60);
     return () => clearInterval(interval);
   }, []);
@@ -412,18 +413,3 @@ export function OverviewCard({
     </div>
   );
 }
-
-function getFormattedDuration() {
-  const epochStartedTimestamp = getCurrentEpochStartedTimestamp();
-
-  const now = Date.now() / 1000;
-  const days = Math.floor((now - epochStartedTimestamp) / (3600 * 24));
-  let restHours = Math.round((now - epochStartedTimestamp) / 3600) - days * 24;
-  if (days === 0) {
-    restHours = Math.max(restHours, 1);
-  }
-
-  const daysStr = days > 0 ? `${days}d` : "";
-  const hoursStr = restHours > 0 ? `${restHours}h` : "";
-  return [daysStr, hoursStr].filter(Boolean).join(" ");
-}

src/pages/Dashboard/getFormattedFeesDuration.spec.ts

@@ -0,0 +1,57 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { getFormattedFeesDuration } from "./getFormattedFeesDuration";
+
+describe("getFormattedFeesDuration", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("should return only hours when less than 24 hours passed", () => {
+    // Set current time to Wednesday 15:00 UTC
+    const now = new Date("2024-03-20T15:00:00Z");
+    vi.setSystemTime(now);
+
+    const result = getFormattedFeesDuration();
+    expect(result).toBe("15h");
+  });
+
+  it("should return days and hours when more than 24 hours passed", () => {
+    // Set current time to Friday 15:00 UTC
+    const now = new Date("2024-03-22T15:00:00Z");
+    vi.setSystemTime(now);
+
+    const result = getFormattedFeesDuration();
+    expect(result).toBe("2d 15h");
+  });
+
+  it("should return only days when hours are 0", () => {
+    // Set current time to Friday 00:00 UTC
+    const now = new Date("2024-03-22T00:00:00Z");
+    vi.setSystemTime(now);
+
+    const result = getFormattedFeesDuration();
+    expect(result).toBe("2d");
+  });
+
+  it("should return minimum 1h when less than an hour passed", () => {
+    // Set current time to Wednesday 00:30 UTC
+    const now = new Date("2024-03-20T00:30:00Z");
+    vi.setSystemTime(now);
+
+    const result = getFormattedFeesDuration();
+    expect(result).toBe("1h");
+  });
+
+  it("should start counting from Wednesday 00:00 UTC", () => {
+    // Set current time to exact Wednesday 00:00 UTC
+    const now = new Date("2024-03-20T00:00:00Z");
+    vi.setSystemTime(now);
+
+    const result = getFormattedFeesDuration();
+    expect(result).toBe("1h"); // Minimum 1h even at start
+  });
+});

src/pages/Dashboard/getFormattedFeesDuration.ts

@@ -0,0 +1,18 @@
+import { differenceInDays, differenceInHours } from "date-fns";
+import { getCurrentEpochStartedTimestamp } from "domain/stats";
+
+export function getFormattedFeesDuration() {
+  const epochStartedTimestamp = getCurrentEpochStartedTimestamp();
+
+  const now = new Date();
+  const epochStartedDate = new Date(epochStartedTimestamp * 1000);
+  const days = differenceInDays(now, epochStartedDate);
+  let restHours = differenceInHours(now, epochStartedDate, { roundingMethod: "round" }) - days * 24;
+  if (days === 0) {
+    restHours = Math.max(restHours, 1);
+  }
+
+  const daysStr = days > 0 ? `${days}d` : "";
+  const hoursStr = restHours > 0 ? `${restHours}h` : "";
+  return [daysStr, hoursStr].filter(Boolean).join(" ");
+}