[FEDEV-2128] GMX Account PnL – clarify UTC vs local time in UI

package.json

@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "@apollo/client": "3.5.6",
+    "@date-fns/tz": "1.4.1",
     "@davatar/react": "1.8.1",
     "@floating-ui/dom": "1.6.7",
     "@floating-ui/react": "0.26.19",
@@ -67,7 +68,7 @@
     "classnames": "2.3.1",
     "core-js": "3.39.0",
     "crypto-js": "4.2.0",
-    "date-fns": "2.27.0",
+    "date-fns": "4.1.0",
     "env-cmd": "^10.1.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-config-recommended": "4.1.0",
@@ -112,7 +113,8 @@
     "@coinbase/wallet-sdk": "4.3.0",
     "[email protected]": "patch:ethers@npm:6.12.1#.yarn/patches/ethers-npm-6.12.1-7d4a09a25c",
     "jest-runner": "patch:jest-runner@npm:27.5.1#.yarn/patches/jest-runner-npm-27.5.1-2ed2c1cda8",
-    "[email protected]": "patch:viem@npm:2.39.0#.yarn/patches/viem-npm-2.39.0-c113f391fd"
+    "[email protected]": "patch:viem@npm:2.39.0#.yarn/patches/viem-npm-2.39.0-c113f391fd",
+    "date-fns": "4.1.0"
   },
   "eslintConfig": {
     "extends": [

src/components/Claims/ClaimHistoryRow/ClaimCollateralHistoryRow.tsx

@@ -20,7 +20,7 @@ import NewLink20ReactComponent from "img/ic_new_link_20.svg?react";
 import { getFormattedTotalClaimAction } from "./getFormattedTotalClaimAction";
 import {
   formatTradeActionTimestamp,
-  formatTradeActionTimestampISO,
+  formatTradeActionTimestampUTC,
 } from "../../TradeHistory/TradeHistoryRow/utils/shared";
 
 export type ClaimCollateralHistoryRowProps = {
@@ -58,7 +58,7 @@ export function ClaimCollateralHistoryRow(p: ClaimCollateralHistoryRowProps) {
   const formattedTimestamp = useMemo(() => formatTradeActionTimestamp(claimAction.timestamp), [claimAction.timestamp]);
 
   const renderIsoTimestamp = useCallback(() => {
-    return formatTradeActionTimestampISO(claimAction.timestamp);
+    return formatTradeActionTimestampUTC(claimAction.timestamp);
   }, [claimAction.timestamp]);
 
   const sizeContent = useMemo(() => {

src/components/Claims/ClaimHistoryRow/ClaimFundingFeesHistoryRow.tsx

@@ -16,7 +16,7 @@ import { TableTd, TableTr } from "components/Table/Table";
 import TooltipWithPortal from "components/Tooltip/TooltipWithPortal";
 import {
   formatTradeActionTimestamp,
-  formatTradeActionTimestampISO,
+  formatTradeActionTimestampUTC,
 } from "components/TradeHistory/TradeHistoryRow/utils/shared";
 
 import NewLink20ReactComponent from "img/ic_new_link_20.svg?react";
@@ -42,7 +42,7 @@ export function ClaimFundingFeesHistoryRow({ claimAction }: ClaimFundingFeesHist
   const formattedTimestamp = useMemo(() => formatTradeActionTimestamp(claimAction.timestamp), [claimAction.timestamp]);
 
   const renderIsoTimestamp = useCallback(() => {
-    return formatTradeActionTimestampISO(claimAction.timestamp);
+    return formatTradeActionTimestampUTC(claimAction.timestamp);
   }, [claimAction.timestamp]);
 
   const marketContent = useMemo(() => {

src/components/Claims/ClaimsHistory.tsx

@@ -1,6 +1,6 @@
 import { t, Trans } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
-import formatDate from "date-fns/format";
+import { format as formatDate } from "date-fns/format";
 import { useCallback, useEffect, useState } from "react";
 
 import { getExplorerUrl } from "config/chains";

src/components/DateRangeSelect/DateRangeSelect.tsx

@@ -3,17 +3,15 @@ import { Popover, Portal } from "@headlessui/react";
 import type { MessageDescriptor } from "@lingui/core";
 import { msg, t } from "@lingui/macro";
 import { useLingui } from "@lingui/react";
-import { sub, type Locale as DateLocale } from "date-fns";
-import addYears from "date-fns/addYears";
-import format from "date-fns/format";
-import dateDe from "date-fns/locale/de";
-import dateEn from "date-fns/locale/en-US";
-import dateEs from "date-fns/locale/es";
-import dateFr from "date-fns/locale/fr";
-import dateJa from "date-fns/locale/ja";
-import dateKo from "date-fns/locale/ko";
-import dateRu from "date-fns/locale/ru";
-import dateZh from "date-fns/locale/zh-CN";
+import { sub, type Locale as DateLocale, type Duration, format, addYears } from "date-fns";
+import { de as dateDe } from "date-fns/locale/de";
+import { enUS as dateEn } from "date-fns/locale/en-US";
+import { es as dateEs } from "date-fns/locale/es";
+import { fr as dateFr } from "date-fns/locale/fr";
+import { ja as dateJa } from "date-fns/locale/ja";
+import { ko as dateKo } from "date-fns/locale/ko";
+import { ru as dateRu } from "date-fns/locale/ru";
+import { zhCN as dateZh } from "date-fns/locale/zh-CN";
 import { useCallback, useMemo } from "react";
 import Calendar from "react-calendar";
 import "react-calendar/dist/Calendar.css";

src/components/MarketStats/MarketGraphs.tsx

@@ -1,7 +1,7 @@
 import { MessageDescriptor } from "@lingui/core";
 import { msg, t, Trans } from "@lingui/macro";
 import cx from "classnames";
-import format from "date-fns/format";
+import { format } from "date-fns/format";
 import { ReactNode, useEffect, useMemo, useState } from "react";
 import { Area, AreaChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
 

src/components/TradeHistory/TradeHistoryRow/TradeHistoryRow.tsx

@@ -133,7 +133,7 @@ export function TradeHistoryRow({ minCollateralUsd, tradeAction, shouldDisplayAc
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isSwapOrderType(tradeAction.orderType!) && marketsInfoData, minCollateralUsd.toString(), tradeAction.id]);
 
-  const renderTimestamp = useCallback(() => msg.timestampISO, [msg.timestampISO]);
+  const renderTimestamp = useCallback(() => msg.timestampUTC, [msg.timestampUTC]);
 
   const renderMarketContent = useCallback(() => {
     if (msg.indexName) {

src/components/TradeHistory/TradeHistoryRow/utils.spec.ts

@@ -51,7 +51,7 @@ describe("TradeHistoryRow helpers", () => {
         "priceImpact": undefined,
         "size": "+$\u200a1,054.88",
         "timestamp": "08 Feb 2024, 10:50",
-        "timestampISO": "2024-02-08T10:50:50+04:00",
+        "timestampUTC": "UTC: 2024-02-08 06:50:50",
       }
     `);
 
@@ -74,7 +74,7 @@ describe("TradeHistoryRow helpers", () => {
         "priceImpact": undefined,
         "size": "12.34 USDC",
         "timestamp": "15 Feb 2024, 18:34",
-        "timestampISO": "2024-02-15T18:34:48+04:00",
+        "timestampUTC": "UTC: 2024-02-15 14:34:48",
       }
     `);
 
@@ -97,7 +97,7 @@ describe("TradeHistoryRow helpers", () => {
         "priceImpact": undefined,
         "size": "0.050 DAI",
         "timestamp": "15 Feb 2024, 21:30",
-        "timestampISO": "2024-02-15T21:30:44+04:00",
+        "timestampUTC": "UTC: 2024-02-15 17:30:44",
       }
     `);
 
@@ -120,7 +120,7 @@ describe("TradeHistoryRow helpers", () => {
         "priceImpact": undefined,
         "size": "-$ 266.23",
         "timestamp": "15 Sep 2023, 13:29",
-        "timestampISO": "2023-09-15T13:29:36+04:00",
+        "timestampUTC": "UTC: 2023-09-15 09:29:36",
         "triggerPrice": ">  $ 30,000.00",
       }
     `);
@@ -144,7 +144,7 @@ describe("TradeHistoryRow helpers", () => {
         "priceImpact": undefined,
         "size": "+$ 4.11",
         "timestamp": "15 Sep 2023, 13:37",
-        "timestampISO": "2023-09-15T13:37:13+04:00",
+        "timestampUTC": "UTC: 2023-09-15 09:37:13",
         "triggerPrice": "<  $ 1,629.40",
       }
     `);
@@ -168,7 +168,7 @@ describe("TradeHistoryRow helpers", () => {
         "priceImpact": undefined,
         "size": "+$ 2.64",
         "timestamp": "15 Sep 2023, 14:54",
-        "timestampISO": "2023-09-15T14:54:04+04:00",
+        "timestampUTC": "UTC: 2023-09-15 10:54:04",
         "triggerPrice": "<  $ 1.00",
       }
     `);
@@ -204,7 +204,7 @@ describe("TradeHistoryRow helpers", () => {
         "priceImpact": "-$ 16.82",
         "size": "+$ 2,070.19",
         "timestamp": "18 Sep 2023, 16:43",
-        "timestampISO": "2023-09-18T16:43:18+04:00",
+        "timestampUTC": "UTC: 2023-09-18 12:43:18",
       }
     `);
 
@@ -239,7 +239,7 @@ describe("TradeHistoryRow helpers", () => {
         "priceImpact": "-$ 9,488.99",
         "size": "+$ 1,348.83",
         "timestamp": "18 Sep 2023, 15:14",
-        "timestampISO": "2023-09-18T15:14:09+04:00",
+        "timestampUTC": "UTC: 2023-09-18 11:14:09",
       }
     `);
 
@@ -258,7 +258,7 @@ describe("TradeHistoryRow helpers", () => {
         "priceImpact": undefined,
         "size": "-$\u200a4,954.24",
         "timestamp": "18 Sep 2023, 11:52",
-        "timestampISO": "2023-09-18T11:52:39+04:00",
+        "timestampUTC": "UTC: 2023-09-18 07:52:39",
       }
     `);
 
@@ -347,7 +347,7 @@ describe("TradeHistoryRow helpers", () => {
         "priceImpact": undefined,
         "size": "-$ 6,441.90",
         "timestamp": "04 Sep 2023, 06:38",
-        "timestampISO": "2023-09-04T06:38:49+04:00",
+        "timestampUTC": "UTC: 2023-09-04 02:38:49",
       }
     `);
 
@@ -378,7 +378,7 @@ describe("TradeHistoryRow helpers", () => {
         "priceImpact": "-$ 0.09",
         "size": "+$ 49.83",
         "timestamp": "21 Sep 2023, 19:32",
-        "timestampISO": "2023-09-21T19:32:40+04:00",
+        "timestampUTC": "UTC: 2023-09-21 15:32:40",
       }
     `);
 
@@ -394,15 +394,15 @@ describe("TradeHistoryRow helpers", () => {
         "market": "Long BTC/USD",
         "marketPrice": undefined,
         "poolName": "BTC-USDC",
-        "price": ">  $\u200a95,600.00",
+        "price": ">  $ 95,600.00",
         "priceComment": [
           "Trigger price for the order.",
         ],
         "priceImpact": undefined,
-        "size": "+$\u200a3.62",
+        "size": "+$ 3.62",
         "timestamp": "18 Sep 2023, 16:43",
-        "timestampISO": "2023-09-18T16:43:18+04:00",
-        "triggerPrice": ">  $\u200a95,600.00",
+        "timestampUTC": "UTC: 2023-09-18 12:43:18",
+        "triggerPrice": ">  $ 95,600.00",
       }
     `);
 
@@ -437,7 +437,7 @@ describe("TradeHistoryRow helpers", () => {
         "priceImpact": "< +$ 0.01",
         "size": "+$ 3.62",
         "timestamp": "18 Sep 2023, 16:43",
-        "timestampISO": "2023-09-18T16:43:18+04:00",
+        "timestampUTC": "UTC: 2023-09-18 12:43:18",
       }
     `);
   });
@@ -462,7 +462,7 @@ describe("TradeHistoryRow helpers", () => {
         "swapToTokenAmount": "39.88",
         "swapToTokenSymbol": "USDC",
         "timestamp": "02 Oct 2023, 18:35",
-        "timestampISO": "2023-10-02T18:35:16+04:00",
+        "timestampUTC": "UTC: 2023-10-02 14:35:16",
       }
     `);
     expect(formatSwapMessage(executeSwap)).toMatchInlineSnapshot(`
@@ -488,7 +488,7 @@ describe("TradeHistoryRow helpers", () => {
         "swapToTokenAmount": "1.1196",
         "swapToTokenSymbol": "ETH",
         "timestamp": "02 Oct 2023, 06:08",
-        "timestampISO": "2023-10-02T06:08:40+04:00",
+        "timestampUTC": "UTC: 2023-10-02 02:08:40",
       }
     `);
     // LIMIT SWAPS
@@ -515,7 +515,7 @@ describe("TradeHistoryRow helpers", () => {
         "swapToTokenAmount": "0.36987",
         "swapToTokenSymbol": "BTC",
         "timestamp": "29 Sep 2023, 10:46",
-        "timestampISO": "2023-09-29T10:46:39+04:00",
+        "timestampUTC": "UTC: 2023-09-29 06:46:39",
       }
     `);
     expect(formatSwapMessage(failedSwap)).toMatchInlineSnapshot(`
@@ -548,7 +548,7 @@ describe("TradeHistoryRow helpers", () => {
         "swapToTokenAmount": "0.0004863",
         "swapToTokenSymbol": "ETH",
         "timestamp": "14 Feb 2024, 13:33",
-        "timestampISO": "2024-02-14T13:33:19+04:00",
+        "timestampUTC": "UTC: 2024-02-14 09:33:19",
       }
     `);
   });

src/components/TradeHistory/TradeHistoryRow/utils/position.ts

@@ -27,7 +27,7 @@ import {
   MakeOptional,
   RowDetails,
   formatTradeActionTimestamp,
-  formatTradeActionTimestampISO,
+  formatTradeActionTimestampUTC,
   getErrorTooltipTitle,
   infoRow,
   lines,
@@ -143,7 +143,7 @@ export const formatPositionMessage = (
 
   const action = getActionTitle(tradeAction.orderType, tradeAction.eventName, Boolean(tradeAction.twapParams));
   const timestamp = formatTradeActionTimestamp(tradeAction.timestamp, relativeTimestamp);
-  const timestampISO = formatTradeActionTimestampISO(tradeAction.timestamp);
+  const timestampUTC = formatTradeActionTimestampUTC(tradeAction.timestamp);
 
   const market = `${longShortText} ${indexName}`;
 
@@ -177,7 +177,7 @@ export const formatPositionMessage = (
     displayedPriceImpact = formatDeltaUsd(tradeAction.totalImpactUsd);
   }
 
-  let result: MakeOptional<RowDetails, "action" | "market" | "timestamp" | "timestampISO" | "price" | "size">;
+  let result: MakeOptional<RowDetails, "action" | "market" | "timestamp" | "timestampUTC" | "price" | "size">;
 
   //#region MarketIncrease
   if (ot === OrderType.MarketIncrease && ev === TradeActionType.OrderCreated) {
@@ -686,7 +686,7 @@ export const formatPositionMessage = (
     indexTokenSymbol,
     fullMarket,
     timestamp,
-    timestampISO,
+    timestampUTC,
     price: formattedMarketPrice || "",
     size: sizeDeltaText,
     marketPrice: formattedMarketPrice,

src/components/TradeHistory/TradeHistoryRow/utils/shared.ts

@@ -1,10 +1,10 @@
+import { tz } from "@date-fns/tz";
 import { i18n } from "@lingui/core";
 import { t } from "@lingui/macro";
 import type { Locale as DateLocale } from "date-fns";
-import format from "date-fns/format";
-import formatISO from "date-fns/formatISO";
-import formatRelative from "date-fns/formatRelative";
-import dateEn from "date-fns/locale/en-US";
+import { format } from "date-fns/format";
+import { formatRelative } from "date-fns/formatRelative";
+import { enUS as dateEn } from "date-fns/locale/en-US";
 import { BytesLike, ethers } from "ethers";
 import words from "lodash/words";
 
@@ -86,7 +86,7 @@ export type RowDetails = {
   actionComment?: TooltipContent;
   isActionError?: boolean;
   timestamp: string;
-  timestampISO: string;
+  timestampUTC: string;
   market: string;
   fullMarket?: string;
   indexName?: string;
@@ -121,9 +121,9 @@ const CUSTOM_DATE_LOCALES = Object.fromEntries(
 
     const customDateLocale = {
       ...dateLocale,
-      formatRelative: (...args) => {
+      formatRelative: (...args: Parameters<typeof originalFormatRelative>) => {
         const token = args[0];
-        // @see docs for patterns https://date-fns.org/v3.6.0/docs/format
+        // @see docs for patterns https://date-fns.org/v4.1.0/docs/format
 
         if (token === "other" || !originalFormatRelative) {
           return "dd MMM yyyy, HH:mm";
@@ -160,8 +160,10 @@ export function formatTradeActionTimestamp(timestamp: number, relativeTimestamp
   });
 }
 
-export function formatTradeActionTimestampISO(timestamp: number) {
-  return formatISO(new Date(timestamp * 1000), { representation: "complete" });
+export function formatTradeActionTimestampUTC(timestamp: number) {
+  return `UTC: ${format(timestamp * 1000, "yyyy-MM-dd HH:mm:ss", {
+    in: tz("UTC"),
+  })}`;
 }
 
 export type MakeOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;

src/components/TradeHistory/TradeHistoryRow/utils/swap.ts

@@ -16,7 +16,7 @@ import {
   MakeOptional,
   RowDetails,
   formatTradeActionTimestamp,
-  formatTradeActionTimestampISO,
+  formatTradeActionTimestampUTC,
   getErrorTooltipTitle,
   infoRow,
   lines,
@@ -111,7 +111,7 @@ export const formatSwapMessage = (
 
   let actionText = getActionTitle(tradeAction.orderType, tradeAction.eventName, Boolean(tradeAction.twapParams));
 
-  let result: MakeOptional<RowDetails, "action" | "market" | "timestamp" | "timestampISO">;
+  let result: MakeOptional<RowDetails, "action" | "market" | "timestamp" | "timestampUTC">;
 
   const ot = tradeAction.orderType;
   const ev = tradeAction.eventName;
@@ -304,7 +304,7 @@ export const formatSwapMessage = (
     market: market,
     fullMarket: fullMarket,
     timestamp: formatTradeActionTimestamp(tradeAction.timestamp, relativeTimestamp),
-    timestampISO: formatTradeActionTimestampISO(tradeAction.timestamp),
+    timestampUTC: formatTradeActionTimestampUTC(tradeAction.timestamp),
     acceptablePrice: `${acceptablePriceInequality}${acceptableRate}`,
     executionPrice: executionRate,
     fullMarketNames,

src/components/TradeHistory/useDownloadAsCsv.tsx

@@ -1,5 +1,5 @@
 import { t, Trans } from "@lingui/macro";
-import dateFnsFormat from "date-fns/format";
+import { format as dateFnsFormat } from "date-fns/format";
 import { useCallback, useState } from "react";
 import { withRetry } from "viem";