Dashboard: Add caching to analytics charts (#7804)

<!--

## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"

If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):

## Notes for the reviewer

Anything important to call out? Be sure to also clarify these in your comments.

## How to test

Unit tests, playground, etc.

-->

<!-- start pr-codex -->

---

## PR-Codex overview
This PR focuses on enhancing the analytics functionality across various components by adding an `authToken` parameter to API calls, ensuring secure access to analytics data.

### Detailed summary
- Added `authToken` prop to multiple components for secure API access.
- Updated API functions to accept `authToken` for authentication.
- Modified analytics data fetching methods to include `authToken`.
- Changed default values and parameters in several functions for consistency.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

<!-- This is an auto-generated comment: release notes by coderabbit.ai -->

## Summary by CodeRabbit

* **New Features**
  * Analytics data fetching now uses caching for improved performance.
  * Authentication is enforced for all analytics-related pages and components, with users redirected to login if not authenticated.

* **Refactor**
  * All analytics API calls and related components now require an explicit authentication token, improving security and consistency.
  * Parameters for analytics functions and components are more consistently structured, often grouped into objects for clarity.

* **Style**
  * Default chart display updated from "totalVolume" to "activeUsers" in highlights cards for a more relevant initial view.

* **Bug Fixes**
  * Standardized error handling across analytics data requests.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Author: MananTank

apps/dashboard/src/@/api/analytics.ts

@@ -38,7 +38,10 @@ export default async function Page(props: {
   });
 
   const projects = await getProjects(params.team_slug);
-  const projectsWithTotalWallets = await getProjectsWithAnalytics(projects);
+  const projectsWithTotalWallets = await getProjectsWithAnalytics(
+    projects,
+    authToken,
+  );
 
   return (
     <div className="flex grow flex-col">
@@ -78,20 +81,24 @@ export default async function Page(props: {
 
 async function getProjectsWithAnalytics(
   projects: Project[],
+  authToken: string,
 ): Promise<Array<ProjectWithAnalytics>> {
   return Promise.all(
     projects.map(async (project) => {
       try {
         const today = new Date();
         const thirtyDaysAgo = subDays(today, 30);
 
-        const data = await getWalletConnections({
-          from: thirtyDaysAgo,
-          period: "all",
-          projectId: project.id,
-          teamId: project.teamId,
-          to: today,
-        });
+        const data = await getWalletConnections(
+          {
+            from: thirtyDaysAgo,
+            period: "all",
+            projectId: project.id,
+            teamId: project.teamId,
+            to: today,
+          },
+          authToken,
+        );
 
         let uniqueWalletsConnected = 0;
         for (const d of data) {

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/page.tsx

@@ -73,7 +73,7 @@ export function TeamHighlightsCard({
       activeChart={
         selectedChart && selectedChart in chartConfig
           ? (selectedChart as keyof AggregatedMetrics)
-          : "totalVolume"
+          : "activeUsers"
       }
       aggregateFn={(_data, key) => {
         if (key === "activeUsers") {

apps/dashboard/src/app/(app)/team/[team_slug]/(team)/~/analytics/highlights-card.tsx

@@ -15,6 +15,7 @@ import {
   getWalletConnections,
   getWalletUsers,
 } from "@/api/analytics";
+import { getAuthToken } from "@/api/auth-token";
 import { getTeamBySlug } from "@/api/team/get-team";
 import type {
   DurationId,
@@ -28,6 +29,7 @@ import type {
   UserOpStats,
   WalletStats,
 } from "@/types/analytics";
+import { loginRedirect } from "@/utils/redirects";
 import { PieChartCard } from "../../../../components/Analytics/PieChartCard";
 import { TotalSponsoredChartCardUI } from "../../_components/TotalSponsoredCard";
 import { TransactionsChartCardWithChainMapping } from "../../_components/transaction-card-with-chain-mapping";
@@ -53,6 +55,12 @@ export default async function TeamOverviewPage(props: {
     props.searchParams,
   ]);
 
+  const authToken = await getAuthToken();
+
+  if (!authToken) {
+    loginRedirect(`/team/${params.team_slug}/~/analytics`);
+  }
+
   const team = await getTeamBySlug(params.team_slug);
 
   if (!team) {
@@ -91,6 +99,7 @@ export default async function TeamOverviewPage(props: {
               fallback={<LoadingChartState className="h-[458px] border" />}
             >
               <AsyncTeamHighlightsCard
+                authToken={authToken}
                 selectedChartQueryParam="appHighlights"
                 interval={interval}
                 range={range}
@@ -108,7 +117,11 @@ export default async function TeamOverviewPage(props: {
                 fallback={<LoadingChartState className="h-[431px] border" />}
                 searchParamsUsed={["from", "to"]}
               >
-                <AsyncWalletDistributionCard range={range} teamId={team.id} />
+                <AsyncWalletDistributionCard
+                  range={range}
+                  teamId={team.id}
+                  authToken={authToken}
+                />
               </ResponsiveSuspense>
 
               <ResponsiveSuspense
@@ -118,6 +131,7 @@ export default async function TeamOverviewPage(props: {
                 <AsyncAuthMethodDistributionCard
                   range={range}
                   teamId={team.id}
+                  authToken={authToken}
                 />
               </ResponsiveSuspense>
             </div>
@@ -133,6 +147,7 @@ export default async function TeamOverviewPage(props: {
             >
               <AsyncTransactionsChartCard
                 selectedChartQueryParam="client_transactions"
+                authToken={authToken}
                 interval={interval}
                 range={range}
                 selectedChart={
@@ -149,6 +164,7 @@ export default async function TeamOverviewPage(props: {
               searchParamsUsed={["from", "to", "interval", "userOpUsage"]}
             >
               <AsyncTotalSponsoredCard
+                authToken={authToken}
                 selectedChartQueryParam="userOpUsage"
                 interval={interval}
                 range={range}
@@ -173,21 +189,28 @@ async function AsyncTeamHighlightsCard(props: {
   interval: "day" | "week";
   selectedChart: string | undefined;
   selectedChartQueryParam: string;
+  authToken: string;
 }) {
   const [walletUserStatsTimeSeries, universalBridgeUsage] =
     await Promise.allSettled([
-      getWalletUsers({
-        from: props.range.from,
-        period: props.interval,
-        teamId: props.teamId,
-        to: props.range.to,
-      }),
-      getUniversalBridgeUsage({
-        from: props.range.from,
-        period: props.interval,
-        teamId: props.teamId,
-        to: props.range.to,
-      }),
+      getWalletUsers(
+        {
+          from: props.range.from,
+          period: props.interval,
+          teamId: props.teamId,
+          to: props.range.to,
+        },
+        props.authToken,
+      ),
+      getUniversalBridgeUsage(
+        {
+          from: props.range.from,
+          period: props.interval,
+          teamId: props.teamId,
+          to: props.range.to,
+        },
+        props.authToken,
+      ),
     ]);
 
   if (
@@ -216,13 +239,17 @@ async function AsyncTeamHighlightsCard(props: {
 async function AsyncWalletDistributionCard(props: {
   teamId: string;
   range: Range;
+  authToken: string;
 }) {
-  const walletConnections = await getWalletConnections({
-    from: props.range.from,
-    period: "all",
-    teamId: props.teamId,
-    to: props.range.to,
-  }).catch(() => undefined);
+  const walletConnections = await getWalletConnections(
+    {
+      from: props.range.from,
+      period: "all",
+      teamId: props.teamId,
+      to: props.range.to,
+    },
+    props.authToken,
+  ).catch(() => undefined);
 
   return walletConnections && walletConnections.length > 0 ? (
     <WalletDistributionCard data={walletConnections} />
@@ -237,13 +264,17 @@ async function AsyncWalletDistributionCard(props: {
 async function AsyncAuthMethodDistributionCard(props: {
   teamId: string;
   range: Range;
+  authToken: string;
 }) {
-  const inAppWalletUsage = await getInAppWalletUsage({
-    from: props.range.from,
-    period: "all",
-    teamId: props.teamId,
-    to: props.range.to,
-  }).catch(() => undefined);
+  const inAppWalletUsage = await getInAppWalletUsage(
+    {
+      from: props.range.from,
+      period: "all",
+      teamId: props.teamId,
+      to: props.range.to,
+    },
+    props.authToken,
+  ).catch(() => undefined);
 
   return inAppWalletUsage && inAppWalletUsage.length > 0 ? (
     <AuthMethodDistributionCard data={inAppWalletUsage} />
@@ -261,21 +292,28 @@ async function AsyncTransactionsChartCard(props: {
   interval: "day" | "week";
   selectedChart: string | undefined;
   selectedChartQueryParam: string;
+  authToken: string;
 }) {
   const [clientTransactionsTimeSeries, clientTransactions] =
     await Promise.allSettled([
-      getClientTransactions({
-        from: props.range.from,
-        period: props.interval,
-        teamId: props.teamId,
-        to: props.range.to,
-      }),
-      getClientTransactions({
-        from: props.range.from,
-        period: "all",
-        teamId: props.teamId,
-        to: props.range.to,
-      }),
+      getClientTransactions(
+        {
+          from: props.range.from,
+          period: props.interval,
+          teamId: props.teamId,
+          to: props.range.to,
+        },
+        props.authToken,
+      ),
+      getClientTransactions(
+        {
+          from: props.range.from,
+          period: "all",
+          teamId: props.teamId,
+          to: props.range.to,
+        },
+        props.authToken,
+      ),
     ]);
 
   return clientTransactionsTimeSeries.status === "fulfilled" &&
@@ -301,20 +339,27 @@ async function AsyncTotalSponsoredCard(props: {
   interval: "day" | "week";
   selectedChart: string | undefined;
   selectedChartQueryParam: string;
+  authToken: string;
 }) {
   const [userOpUsageTimeSeries, userOpUsage] = await Promise.allSettled([
-    getUserOpUsage({
-      from: props.range.from,
-      period: props.interval,
-      teamId: props.teamId,
-      to: props.range.to,
-    }),
-    getUserOpUsage({
-      from: props.range.from,
-      period: "all",
-      teamId: props.teamId,
-      to: props.range.to,
-    }),
+    getUserOpUsage(
+      {
+        from: props.range.from,
+        period: props.interval,
+        teamId: props.teamId,
+        to: props.range.to,
+      },
+      props.authToken,
+    ),
+    getUserOpUsage(
+      {
+        from: props.range.from,
+        period: "all",
+        teamId: props.teamId,
+        to: props.range.to,
+      },
+      props.authToken,
+    ),
   ]);
 
   return userOpUsageTimeSeries.status === "fulfilled" &&