From a7fd4e51a31102381bcf94ef779112fd4560ff2a Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Thu, 3 Apr 2025 13:09:56 +0000
Subject: [PATCH] [TOOL-3946] Dashboard: Fix in-app wallet users chart
 timestamp incorrect ordering (#6635)

---
 .../Analytics/InAppWalletUsersChartCard.stories.tsx   | 11 ++++++++++-
 .../Analytics/InAppWalletUsersChartCard.tsx           |  5 +++--
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/apps/dashboard/src/components/embedded-wallets/Analytics/InAppWalletUsersChartCard.stories.tsx b/apps/dashboard/src/components/embedded-wallets/Analytics/InAppWalletUsersChartCard.stories.tsx
index 7a7ecbc8b3f..6bf670da1cd 100644
--- a/apps/dashboard/src/components/embedded-wallets/Analytics/InAppWalletUsersChartCard.stories.tsx
+++ b/apps/dashboard/src/components/embedded-wallets/Analytics/InAppWalletUsersChartCard.stories.tsx
@@ -50,6 +50,15 @@ function Component() {
         />
       </BadgeContainer>
 
+      <BadgeContainer label="120 days">
+        <InAppWalletUsersChartCardUI
+          inAppWalletStats={createInAppWalletStatsStub(120)}
+          isPending={false}
+          title={title}
+          description={description}
+        />
+      </BadgeContainer>
+
       <BadgeContainer label="10 days">
         <InAppWalletUsersChartCardUI
           inAppWalletStats={createInAppWalletStatsStub(10)}
@@ -117,7 +126,7 @@ function createInAppWalletStatsStub(days: number): InAppWalletStats[] {
   while (d !== 0) {
     const uniqueWallets = Math.floor(Math.random() * 100);
     stubbedData.push({
-      date: new Date(2024, 1, d).toLocaleString(),
+      date: new Date(2024, 11, d).toLocaleString(),
       uniqueWalletsConnected: uniqueWallets,
       authenticationMethod: pickRandomAuthMethod(),
     });
diff --git a/apps/dashboard/src/components/embedded-wallets/Analytics/InAppWalletUsersChartCard.tsx b/apps/dashboard/src/components/embedded-wallets/Analytics/InAppWalletUsersChartCard.tsx
index 26d55aa0ffb..f13efde09ec 100644
--- a/apps/dashboard/src/components/embedded-wallets/Analytics/InAppWalletUsersChartCard.tsx
+++ b/apps/dashboard/src/components/embedded-wallets/Analytics/InAppWalletUsersChartCard.tsx
@@ -17,7 +17,7 @@ import { TypeScriptIcon } from "components/icons/brand-icons/TypeScriptIcon";
 import { UnityIcon } from "components/icons/brand-icons/UnityIcon";
 import { UnrealIcon } from "components/icons/brand-icons/UnrealIcon";
 import { DocLink } from "components/shared/DocLink";
-import { format } from "date-fns";
+import { formatDate } from "date-fns";
 import { useMemo } from "react";
 import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from "recharts";
 import type { InAppWalletStats } from "types/analytics";
@@ -49,7 +49,7 @@ export function InAppWalletUsersChartCardUI(props: {
       // if no data for current day - create new entry
       if (!chartData && stat.uniqueWalletsConnected > 0) {
         _chartDataMap.set(stat.date, {
-          time: format(new Date(stat.date), "MMM dd"),
+          time: stat.date,
           [authenticationMethod || defaultLabel]: stat.uniqueWalletsConnected,
         } as ChartData);
       } else if (chartData) {
@@ -196,6 +196,7 @@ export function InAppWalletUsersChartCardUI(props: {
               tickLine={false}
               tickMargin={10}
               axisLine={false}
+              tickFormatter={(value) => formatDate(new Date(value), "MMM d")}
             />
 
             <YAxis