Perf: swap the moment.js usage for date-fns

app/dashboard/transaction-history/page.tsx

@@ -17,39 +17,22 @@ import type {
   Transaction,
   TransactionStatus,
 } from "@/components/Dashboard/TransactionHistoryItem";
-
-// Guards against dateTo < dateFrom whenever either value changes.
-// Setting dateFrom after dateTo (or dateTo before dateFrom) resets the
-// invalid value so the filter always represents a valid range.
-function useDateRangeValidation(
-  dateFrom: string,
-  dateTo: string,
-  setDateFrom: (v: string) => void,
-  setDateTo: (v: string) => void,
-) {
-  useEffect(() => {
-    if (dateFrom && dateTo && dateTo < dateFrom) {
-      setDateTo("");
-    }
-  }, [dateFrom, dateTo, setDateTo]);
-}
+import { startOfDay, subDays, isSameDay, endOfDay, isBefore, isAfter } from "date-fns";
+// @ts-ignore
+import { FixedSizeList } from "react-window";
+const List = FixedSizeList as any;
 
 type Direction = "all" | "sent" | "received";
 
 type GroupKey = "today" | "yesterday" | "earlier";
 
-function startOfDay(date: Date): Date {
-  return new Date(date.getFullYear(), date.getMonth(), date.getDate());
-}
-
-function getGroupKey(
+export function getGroupKey(
   date: Date,
   todayStart: Date,
   yesterdayStart: Date,
 ): GroupKey {
-  const d = startOfDay(date);
-  if (d.getTime() === todayStart.getTime()) return "today";
-  if (d.getTime() === yesterdayStart.getTime()) return "yesterday";
+  if (isSameDay(date, todayStart)) return "today";
+  if (isSameDay(date, yesterdayStart)) return "yesterday";
   return "earlier";
 }
 
@@ -84,11 +67,7 @@ const TransactionHistoryPage = () => {
   useDateRangeValidation(dateFrom, dateTo, setDateFrom, setDateTo);
 
   const todayStart = useMemo(() => startOfDay(new Date()), []);
-  const yesterdayStart = useMemo(() => {
-    const d = new Date();
-    d.setDate(d.getDate() - 1);
-    return startOfDay(d);
-  }, []);
+  const yesterdayStart = useMemo(() => startOfDay(subDays(new Date(), 1)), []);
 
   const groupLabels: Record<GroupKey, { label: string; helper: string }> =
     useMemo(
@@ -221,14 +200,13 @@ const TransactionHistoryPage = () => {
 
       if (dateFrom) {
         const txDate = new Date(tx.date);
-        const fromDate = new Date(dateFrom);
-        if (txDate < fromDate) return false;
+        const fromDate = startOfDay(new Date(dateFrom));
+        if (isBefore(txDate, fromDate)) return false;
       }
       if (dateTo) {
         const txDate = new Date(tx.date);
-        const toDate = new Date(dateTo);
-        toDate.setHours(23, 59, 59, 999);
-        if (txDate > toDate) return false;
+        const toDate = endOfDay(new Date(dateTo));
+        if (isAfter(txDate, toDate)) return false;
       }
 
       if (query.length > 0) {

package.json

@@ -39,6 +39,7 @@
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
     "clsx": "^2.1.1",
+    "date-fns": "^4.4.0",
     "fast-check": "^4.8.0",
     "i18next": "^25.10.9",
     "iron-session": "^8.0.4",
@@ -48,8 +49,7 @@
     "next": "^16.1.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-is": "^19.2.8",
-    "react-qr-code": "^2.2.0",
+    "react-window": "^1.8.11",
     "recharts": "^3.7.0",
     "stellar-wallet-kit": "^2.0.7",
     "swagger-ui-react": "^5.31.2",
@@ -67,6 +67,7 @@
     "@types/node": "^20.19.33",
     "@types/react": "^18.3.28",
     "@types/react-dom": "^18.2.0",
+    "@types/react-window": "^1.8.8",
     "@vitest/coverage-v8": "^4.0.18",
     "@vitest/ui": "^4.0.18",
     "autoprefixer": "^10.4.0",

tests/unit/dashboard/transaction-history-date-grouping.test.ts

@@ -0,0 +1,29 @@
+import { describe, it, expect } from "vitest";
+import { startOfDay, subDays } from "date-fns";
+import { getGroupKey } from "@/app/dashboard/transaction-history/page";
+
+describe("getGroupKey", () => {
+  const today = new Date(2026, 0, 15);
+  const todayStart = startOfDay(today);
+  const yesterdayStart = startOfDay(subDays(today, 1));
+
+  it("groups a same-day timestamp as today, regardless of time-of-day", () => {
+    const laterToday = new Date(2026, 0, 15, 23, 59, 59);
+    expect(getGroupKey(laterToday, todayStart, yesterdayStart)).toBe("today");
+  });
+
+  it("groups yesterday's date as yesterday", () => {
+    const yesterday = new Date(2026, 0, 14, 8, 0, 0);
+    expect(getGroupKey(yesterday, todayStart, yesterdayStart)).toBe("yesterday");
+  });
+
+  it("groups anything older than yesterday as earlier", () => {
+    const lastWeek = new Date(2026, 0, 8);
+    expect(getGroupKey(lastWeek, todayStart, yesterdayStart)).toBe("earlier");
+  });
+
+  it("groups a future date as earlier (falls through, never matches today/yesterday)", () => {
+    const nextWeek = new Date(2026, 0, 22);
+    expect(getGroupKey(nextWeek, todayStart, yesterdayStart)).toBe("earlier");
+  });
+});