Skip to content

Commit 7883127

Browse files
MananTankMananTank
committed
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 -->
1 parent 53d0d74 commit 7883127

File tree

24 files changed

+1230
-699
lines changed

24 files changed

+1230
-699
lines changed

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

Lines changed: 741 additions & 414 deletions
Large diffs are not rendered by default.

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

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,10 @@ export default async function Page(props: {
3838
});
3939

4040
const projects = await getProjects(params.team_slug);
41-
const projectsWithTotalWallets = await getProjectsWithAnalytics(projects);
41+
const projectsWithTotalWallets = await getProjectsWithAnalytics(
42+
projects,
43+
authToken,
44+
);
4245

4346
return (
4447
<div className="flex grow flex-col">
@@ -78,20 +81,24 @@ export default async function Page(props: {
7881

7982
async function getProjectsWithAnalytics(
8083
projects: Project[],
84+
authToken: string,
8185
): Promise<Array<ProjectWithAnalytics>> {
8286
return Promise.all(
8387
projects.map(async (project) => {
8488
try {
8589
const today = new Date();
8690
const thirtyDaysAgo = subDays(today, 30);
8791

88-
const data = await getWalletConnections({
89-
from: thirtyDaysAgo,
90-
period: "all",
91-
projectId: project.id,
92-
teamId: project.teamId,
93-
to: today,
94-
});
92+
const data = await getWalletConnections(
93+
{
94+
from: thirtyDaysAgo,
95+
period: "all",
96+
projectId: project.id,
97+
teamId: project.teamId,
98+
to: today,
99+
},
100+
authToken,
101+
);
95102

96103
let uniqueWalletsConnected = 0;
97104
for (const d of data) {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,7 @@ export function TeamHighlightsCard({
7373
activeChart={
7474
selectedChart && selectedChart in chartConfig
7575
? (selectedChart as keyof AggregatedMetrics)
76-
: "totalVolume"
76+
: "activeUsers"
7777
}
7878
aggregateFn={(_data, key) => {
7979
if (key === "activeUsers") {

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

Lines changed: 94 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
getWalletConnections,
1616
getWalletUsers,
1717
} from "@/api/analytics";
18+
import { getAuthToken } from "@/api/auth-token";
1819
import { getTeamBySlug } from "@/api/team/get-team";
1920
import type {
2021
DurationId,
@@ -28,6 +29,7 @@ import type {
2829
UserOpStats,
2930
WalletStats,
3031
} from "@/types/analytics";
32+
import { loginRedirect } from "@/utils/redirects";
3133
import { PieChartCard } from "../../../../components/Analytics/PieChartCard";
3234
import { TotalSponsoredChartCardUI } from "../../_components/TotalSponsoredCard";
3335
import { TransactionsChartCardWithChainMapping } from "../../_components/transaction-card-with-chain-mapping";
@@ -53,6 +55,12 @@ export default async function TeamOverviewPage(props: {
5355
props.searchParams,
5456
]);
5557

58+
const authToken = await getAuthToken();
59+
60+
if (!authToken) {
61+
loginRedirect(`/team/${params.team_slug}/~/analytics`);
62+
}
63+
5664
const team = await getTeamBySlug(params.team_slug);
5765

5866
if (!team) {
@@ -91,6 +99,7 @@ export default async function TeamOverviewPage(props: {
9199
fallback={<LoadingChartState className="h-[458px] border" />}
92100
>
93101
<AsyncTeamHighlightsCard
102+
authToken={authToken}
94103
selectedChartQueryParam="appHighlights"
95104
interval={interval}
96105
range={range}
@@ -108,7 +117,11 @@ export default async function TeamOverviewPage(props: {
108117
fallback={<LoadingChartState className="h-[431px] border" />}
109118
searchParamsUsed={["from", "to"]}
110119
>
111-
<AsyncWalletDistributionCard range={range} teamId={team.id} />
120+
<AsyncWalletDistributionCard
121+
range={range}
122+
teamId={team.id}
123+
authToken={authToken}
124+
/>
112125
</ResponsiveSuspense>
113126

114127
<ResponsiveSuspense
@@ -118,6 +131,7 @@ export default async function TeamOverviewPage(props: {
118131
<AsyncAuthMethodDistributionCard
119132
range={range}
120133
teamId={team.id}
134+
authToken={authToken}
121135
/>
122136
</ResponsiveSuspense>
123137
</div>
@@ -133,6 +147,7 @@ export default async function TeamOverviewPage(props: {
133147
>
134148
<AsyncTransactionsChartCard
135149
selectedChartQueryParam="client_transactions"
150+
authToken={authToken}
136151
interval={interval}
137152
range={range}
138153
selectedChart={
@@ -149,6 +164,7 @@ export default async function TeamOverviewPage(props: {
149164
searchParamsUsed={["from", "to", "interval", "userOpUsage"]}
150165
>
151166
<AsyncTotalSponsoredCard
167+
authToken={authToken}
152168
selectedChartQueryParam="userOpUsage"
153169
interval={interval}
154170
range={range}
@@ -173,21 +189,28 @@ async function AsyncTeamHighlightsCard(props: {
173189
interval: "day" | "week";
174190
selectedChart: string | undefined;
175191
selectedChartQueryParam: string;
192+
authToken: string;
176193
}) {
177194
const [walletUserStatsTimeSeries, universalBridgeUsage] =
178195
await Promise.allSettled([
179-
getWalletUsers({
180-
from: props.range.from,
181-
period: props.interval,
182-
teamId: props.teamId,
183-
to: props.range.to,
184-
}),
185-
getUniversalBridgeUsage({
186-
from: props.range.from,
187-
period: props.interval,
188-
teamId: props.teamId,
189-
to: props.range.to,
190-
}),
196+
getWalletUsers(
197+
{
198+
from: props.range.from,
199+
period: props.interval,
200+
teamId: props.teamId,
201+
to: props.range.to,
202+
},
203+
props.authToken,
204+
),
205+
getUniversalBridgeUsage(
206+
{
207+
from: props.range.from,
208+
period: props.interval,
209+
teamId: props.teamId,
210+
to: props.range.to,
211+
},
212+
props.authToken,
213+
),
191214
]);
192215

193216
if (
@@ -216,13 +239,17 @@ async function AsyncTeamHighlightsCard(props: {
216239
async function AsyncWalletDistributionCard(props: {
217240
teamId: string;
218241
range: Range;
242+
authToken: string;
219243
}) {
220-
const walletConnections = await getWalletConnections({
221-
from: props.range.from,
222-
period: "all",
223-
teamId: props.teamId,
224-
to: props.range.to,
225-
}).catch(() => undefined);
244+
const walletConnections = await getWalletConnections(
245+
{
246+
from: props.range.from,
247+
period: "all",
248+
teamId: props.teamId,
249+
to: props.range.to,
250+
},
251+
props.authToken,
252+
).catch(() => undefined);
226253

227254
return walletConnections && walletConnections.length > 0 ? (
228255
<WalletDistributionCard data={walletConnections} />
@@ -237,13 +264,17 @@ async function AsyncWalletDistributionCard(props: {
237264
async function AsyncAuthMethodDistributionCard(props: {
238265
teamId: string;
239266
range: Range;
267+
authToken: string;
240268
}) {
241-
const inAppWalletUsage = await getInAppWalletUsage({
242-
from: props.range.from,
243-
period: "all",
244-
teamId: props.teamId,
245-
to: props.range.to,
246-
}).catch(() => undefined);
269+
const inAppWalletUsage = await getInAppWalletUsage(
270+
{
271+
from: props.range.from,
272+
period: "all",
273+
teamId: props.teamId,
274+
to: props.range.to,
275+
},
276+
props.authToken,
277+
).catch(() => undefined);
247278

248279
return inAppWalletUsage && inAppWalletUsage.length > 0 ? (
249280
<AuthMethodDistributionCard data={inAppWalletUsage} />
@@ -261,21 +292,28 @@ async function AsyncTransactionsChartCard(props: {
261292
interval: "day" | "week";
262293
selectedChart: string | undefined;
263294
selectedChartQueryParam: string;
295+
authToken: string;
264296
}) {
265297
const [clientTransactionsTimeSeries, clientTransactions] =
266298
await Promise.allSettled([
267-
getClientTransactions({
268-
from: props.range.from,
269-
period: props.interval,
270-
teamId: props.teamId,
271-
to: props.range.to,
272-
}),
273-
getClientTransactions({
274-
from: props.range.from,
275-
period: "all",
276-
teamId: props.teamId,
277-
to: props.range.to,
278-
}),
299+
getClientTransactions(
300+
{
301+
from: props.range.from,
302+
period: props.interval,
303+
teamId: props.teamId,
304+
to: props.range.to,
305+
},
306+
props.authToken,
307+
),
308+
getClientTransactions(
309+
{
310+
from: props.range.from,
311+
period: "all",
312+
teamId: props.teamId,
313+
to: props.range.to,
314+
},
315+
props.authToken,
316+
),
279317
]);
280318

281319
return clientTransactionsTimeSeries.status === "fulfilled" &&
@@ -301,20 +339,27 @@ async function AsyncTotalSponsoredCard(props: {
301339
interval: "day" | "week";
302340
selectedChart: string | undefined;
303341
selectedChartQueryParam: string;
342+
authToken: string;
304343
}) {
305344
const [userOpUsageTimeSeries, userOpUsage] = await Promise.allSettled([
306-
getUserOpUsage({
307-
from: props.range.from,
308-
period: props.interval,
309-
teamId: props.teamId,
310-
to: props.range.to,
311-
}),
312-
getUserOpUsage({
313-
from: props.range.from,
314-
period: "all",
315-
teamId: props.teamId,
316-
to: props.range.to,
317-
}),
345+
getUserOpUsage(
346+
{
347+
from: props.range.from,
348+
period: props.interval,
349+
teamId: props.teamId,
350+
to: props.range.to,
351+
},
352+
props.authToken,
353+
),
354+
getUserOpUsage(
355+
{
356+
from: props.range.from,
357+
period: "all",
358+
teamId: props.teamId,
359+
to: props.range.to,
360+
},
361+
props.authToken,
362+
),
318363
]);
319364

320365
return userOpUsageTimeSeries.status === "fulfilled" &&

0 commit comments

Comments
 (0)