migrate analytics endpoints from v1 to v2 (#6326)

Author: jnsdls

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

@@ -1,6 +1,7 @@
 import { fetchAnalytics } from "data/analytics/fetch-analytics";
 import type {
   AnalyticsQueryParams,
+  AnalyticsQueryParamsV2,
   InAppWalletStats,
   RpcMethodStats,
   TransactionStats,
@@ -9,14 +10,28 @@ import type {
   WalletUserStats,
 } from "types/analytics";
 
-function buildSearchParams(params: AnalyticsQueryParams): URLSearchParams {
+function buildSearchParams(
+  params: AnalyticsQueryParams | AnalyticsQueryParamsV2,
+): URLSearchParams {
   const searchParams = new URLSearchParams();
-  if (params.clientId) {
+
+  // v1 params
+  if ("clientId" in params && params.clientId) {
     searchParams.append("clientId", params.clientId);
   }
-  if (params.accountId) {
+  if ("accountId" in params && params.accountId) {
     searchParams.append("accountId", params.accountId);
   }
+
+  // v2 params
+  if ("teamId" in params && params.teamId) {
+    searchParams.append("teamId", params.teamId);
+  }
+  if ("projectId" in params && params.projectId) {
+    searchParams.append("projectId", params.projectId);
+  }
+
+  // shared params
   if (params.from) {
     searchParams.append("from", params.from.toISOString());
   }
@@ -30,16 +45,22 @@ function buildSearchParams(params: AnalyticsQueryParams): URLSearchParams {
 }
 
 export async function getWalletConnections(
-  params: AnalyticsQueryParams,
+  params: AnalyticsQueryParamsV2,
 ): Promise<WalletStats[]> {
   const searchParams = buildSearchParams(params);
-  const res = await fetchAnalytics(`v1/wallets?${searchParams.toString()}`, {
-    method: "GET",
-    headers: { "Content-Type": "application/json" },
-  });
+  const res = await fetchAnalytics(
+    `v2/sdk/wallet-connects?${searchParams.toString()}`,
+    {
+      method: "GET",
+      headers: { "Content-Type": "application/json" },
+    },
+  );
 
   if (res?.status !== 200) {
-    console.error("Failed to fetch wallet connections");
+    const reason = await res?.text();
+    console.error(
+      `Failed to fetch wallet connections, ${res?.status} - ${res.statusText} - ${reason}`,
+    );
     return [];
   }
 
@@ -48,19 +69,22 @@ export async function getWalletConnections(
 }
 
 export async function getInAppWalletUsage(
-  params: AnalyticsQueryParams,
+  params: AnalyticsQueryParamsV2,
 ): Promise<InAppWalletStats[]> {
   const searchParams = buildSearchParams(params);
   const res = await fetchAnalytics(
-    `v1/wallets/in-app?${searchParams.toString()}`,
+    `v2/wallet/connects?${searchParams.toString()}`,
     {
       method: "GET",
       headers: { "Content-Type": "application/json" },
     },
   );
 
   if (res?.status !== 200) {
-    console.error("Failed to fetch in-app wallet usage");
+    const reason = await res?.text();
+    console.error(
+      `Failed to fetch in-app wallet usage, ${res?.status} - ${res.statusText} - ${reason}`,
+    );
     return [];
   }
 
@@ -90,11 +114,11 @@ export async function getUserOpUsage(
 }
 
 export async function getClientTransactions(
-  params: AnalyticsQueryParams,
+  params: AnalyticsQueryParamsV2,
 ): Promise<TransactionStats[]> {
   const searchParams = buildSearchParams(params);
   const res = await fetchAnalytics(
-    `v1/transactions/client?${searchParams.toString()}`,
+    `v2/sdk/contract-transactions?${searchParams.toString()}`,
     {
       method: "GET",
       headers: { "Content-Type": "application/json" },
@@ -147,7 +171,10 @@ export async function getWalletUsers(
   );
 
   if (res?.status !== 200) {
-    console.error("Failed to fetch wallet user stats");
+    const reason = await res?.text();
+    console.error(
+      `Failed to fetch wallet user stats: ${res?.status} - ${res.statusText} - ${reason}`,
+    );
     return [];
   }
 
@@ -165,7 +192,10 @@ export async function isProjectActive(
   });
 
   if (res?.status !== 200) {
-    console.error("Failed to fetch project active status");
+    const reason = await res?.text();
+    console.error(
+      `Failed to fetch project active status: ${res?.status} - ${res.statusText} - ${reason}`,
+    );
     return false;
   }
 

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

@@ -42,13 +42,14 @@ async function getProjectsWithAnalytics(
   projects: Project[],
 ): Promise<Array<ProjectWithAnalytics>> {
   return Promise.all(
-    projects.map(async (p) => {
+    projects.map(async (project) => {
       try {
         const today = new Date();
         const thirtyDaysAgo = subDays(today, 30);
 
         const data = await getWalletConnections({
-          clientId: p.publishableKey,
+          teamId: project.teamId,
+          projectId: project.id,
           period: "all",
           from: thirtyDaysAgo,
           to: today,
@@ -60,12 +61,12 @@ async function getProjectsWithAnalytics(
         }
 
         return {
-          ...p,
+          ...project,
           monthlyActiveUsers: uniqueWalletsConnected,
         };
       } catch {
         return {
-          ...p,
+          ...project,
           monthlyActiveUsers: 0,
         };
       }

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

@@ -34,9 +34,6 @@ import { Suspense } from "react";
 import { TotalSponsoredChartCardUI } from "../../_components/TotalSponsoredCard";
 import { TransactionsChartCardUI } from "../../_components/TransactionsCard";
 
-// revalidate every 5 minutes
-export const maxDuration = 300;
-
 type SearchParams = {
   usersChart?: string;
   from?: string;
@@ -77,6 +74,7 @@ export default async function TeamOverviewPage(props: {
       <div className="flex grow flex-col justify-between gap-10 md:container md:pt-8 md:pb-16">
         <Suspense fallback={<GenericLoadingPage />}>
           <OverviewPageContent
+            teamId={team.id}
             account={account}
             range={range}
             interval={interval}
@@ -89,12 +87,13 @@ export default async function TeamOverviewPage(props: {
 }
 
 async function OverviewPageContent(props: {
+  teamId: string;
   account: Account;
   range: Range;
   interval: "day" | "week";
   searchParams: SearchParams;
 }) {
-  const { account, range, interval, searchParams } = props;
+  const { teamId, account, range, interval, searchParams } = props;
 
   const [
     walletConnections,
@@ -107,7 +106,7 @@ async function OverviewPageContent(props: {
   ] = await Promise.all([
     // Aggregated wallet connections
     getWalletConnections({
-      accountId: account.id,
+      teamId: teamId,
       from: range.from,
       to: range.to,
       period: "all",
@@ -121,7 +120,7 @@ async function OverviewPageContent(props: {
     }),
     // In-app wallet usage
     getInAppWalletUsage({
-      accountId: account.id,
+      teamId: teamId,
       from: range.from,
       to: range.to,
       period: "all",
@@ -141,13 +140,13 @@ async function OverviewPageContent(props: {
     }),
     // Client transactions
     getClientTransactions({
-      accountId: account.id,
+      teamId: teamId,
       from: range.from,
       to: range.to,
       period: interval,
     }),
     getClientTransactions({
-      accountId: account.id,
+      teamId: teamId,
       from: range.from,
       to: range.to,
       period: "all",

apps/dashboard/src/app/team/[team_slug]/(team)/~/ecosystem/[slug]/(active)/analytics/components/EcosystemAnalyticsPage.tsx

@@ -9,10 +9,12 @@ import { EcosystemWalletsSummary } from "./Summary";
 
 export async function EcosystemAnalyticsPage({
   ecosystemSlug,
+  teamId,
   interval,
   range,
 }: {
   ecosystemSlug: string;
+  teamId: string;
   interval: "day" | "week";
   range?: Range;
 }) {
@@ -22,20 +24,23 @@ export async function EcosystemAnalyticsPage({
 
   const allTimeStatsPromise = getEcosystemWalletUsage({
     ecosystemSlug,
+    teamId,
     from: new Date(2022, 0, 1),
     to: new Date(),
     period: "all",
   });
 
   const monthlyStatsPromise = getEcosystemWalletUsage({
     ecosystemSlug,
+    teamId,
     from: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
     to: new Date(),
     period: "month",
   });
 
   const statsPromise = getEcosystemWalletUsage({
     ecosystemSlug,
+    teamId,
     from: range.from,
     to: range.to,
     period: interval,

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

@@ -1,5 +1,6 @@
 import type { Range } from "components/analytics/date-range-selector";
 import { redirect } from "next/navigation";
+import { getTeamBySlug } from "../../../../../../../../../@/api/team";
 import { getAuthToken } from "../../../../../../../../api/lib/getAuthToken";
 import { fetchEcosystem } from "../../../utils/fetchEcosystem";
 import { EcosystemAnalyticsPage } from "./components/EcosystemAnalyticsPage";
@@ -26,15 +27,23 @@ export default async function Page(props: {
     redirect(ecosystemLayoutPath);
   }
 
-  const ecosystem = await fetchEcosystem(params.slug, authToken);
+  const [ecosystem, team] = await Promise.all([
+    fetchEcosystem(params.slug, authToken),
+    getTeamBySlug(params.team_slug),
+  ]);
 
   if (!ecosystem) {
     redirect(ecosystemLayoutPath);
   }
 
+  if (!team) {
+    redirect("/team");
+  }
+
   return (
     <EcosystemAnalyticsPage
       ecosystemSlug={ecosystem.slug}
+      teamId={team.id}
       interval={searchParams.interval || "week"}
       range={searchParams.range}
     />

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

@@ -1,5 +1,4 @@
 import { getTeamBySlug } from "@/api/team";
-import { getValidAccount } from "../../../../../account/settings/getAccount";
 import { getAuthToken } from "../../../../../api/lib/getAuthToken";
 import { loginRedirect } from "../../../../../login/loginRedirect";
 import { NebulaAnalyticsPage } from "../../../[project_slug]/nebula/components/analytics/nebula-analytics-page";
@@ -20,8 +19,7 @@ export default async function Page(props: {
     props.searchParams,
   ]);
 
-  const [account, authToken, team] = await Promise.all([
-    getValidAccount(),
+  const [authToken, team] = await Promise.all([
     getAuthToken(),
     getTeamBySlug(params.team_slug),
   ]);
@@ -35,7 +33,7 @@ export default async function Page(props: {
   if (hasNebulaAccess) {
     return (
       <NebulaAnalyticsPage
-        accountId={account.id}
+        teamId={team.id}
         authToken={authToken}
         searchParams={searchParams}
       />

apps/dashboard/src/app/team/[team_slug]/(team)/~/usage/overview/components/Usage.tsx

@@ -92,12 +92,14 @@ export const Usage: React.FC<UsageProps> = ({
   return (
     <div className="flex grow flex-col gap-8">
       <InAppWalletUsersChartCard
+        teamId={team.id}
         accountId={account.id}
         from={currentPeriodStart}
         to={currentPeriodEnd}
       />
 
       <TotalSponsoredCard
+        teamId={team.id}
         accountId={account.id}
         from={currentPeriodStart}
         to={currentPeriodEnd}
@@ -138,6 +140,7 @@ export const Usage: React.FC<UsageProps> = ({
 type ChartCardProps = {
   from: Date;
   to: Date;
+  teamId: string;
   accountId: string;
 };
 
@@ -176,7 +179,7 @@ async function AsyncInAppWalletUsersChartCard(
     period: "day",
     from: props.from,
     to: props.to,
-    accountId: props.accountId,
+    teamId: props.teamId,
   }).catch(() => null);
 
   return (

apps/dashboard/src/app/team/[team_slug]/[project_slug]/components/Transactions/index.tsx

@@ -1,11 +1,11 @@
 import { LoadingChartState } from "components/analytics/empty-chart-state";
 import { Suspense } from "react";
-import type { AnalyticsQueryParams } from "types/analytics";
+import type { AnalyticsQueryParamsV2 } from "types/analytics";
 import { getClientTransactions } from "../../../../../../@/api/analytics";
 import { TransactionsChartsUI } from "./TransactionCharts";
 
 export function TransactionsCharts(
-  props: AnalyticsQueryParams & {
+  props: AnalyticsQueryParamsV2 & {
     searchParams: { [key: string]: string | string[] | undefined };
   },
 ) {
@@ -24,7 +24,7 @@ export function TransactionsCharts(
 }
 
 async function TransactionsChartCardAsync(
-  props: AnalyticsQueryParams & {
+  props: AnalyticsQueryParamsV2 & {
     searchParams: { [key: string]: string | string[] | undefined };
   },
 ) {