diff --git a/src/pages/Dashboard/OverviewCard.tsx b/src/pages/Dashboard/OverviewCard.tsx index a9800a8ac7..a944d84db1 100644 --- a/src/pages/Dashboard/OverviewCard.tsx +++ b/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({ ); } - -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(" "); -} diff --git a/src/pages/Dashboard/getFormattedFeesDuration.spec.ts b/src/pages/Dashboard/getFormattedFeesDuration.spec.ts new file mode 100644 index 0000000000..303c22b7e5 --- /dev/null +++ b/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 + }); +}); diff --git a/src/pages/Dashboard/getFormattedFeesDuration.ts b/src/pages/Dashboard/getFormattedFeesDuration.ts new file mode 100644 index 0000000000..6e0c26963d --- /dev/null +++ b/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(" "); +}