migrate analytics params from clientId/accountId to teamId/projectId

Author: jnsdls

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

@@ -1,7 +1,6 @@
 import { fetchAnalytics } from "data/analytics/fetch-analytics";
 import type {
   AnalyticsQueryParams,
-  AnalyticsQueryParamsV2,
   InAppWalletStats,
   RpcMethodStats,
   TransactionStats,
@@ -11,24 +10,13 @@ import type {
 } from "types/analytics";
 import { getChains } from "./chain";
 
-function buildSearchParams(
-  params: AnalyticsQueryParams | AnalyticsQueryParamsV2,
-): URLSearchParams {
+function buildSearchParams(params: AnalyticsQueryParams): URLSearchParams {
   const searchParams = new URLSearchParams();
 
-  // v1 params
-  if ("clientId" in params && params.clientId) {
-    searchParams.append("clientId", params.clientId);
-  }
-  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("teamId", params.teamId);
+
+  if (params.projectId) {
     searchParams.append("projectId", params.projectId);
   }
 
@@ -46,7 +34,7 @@ function buildSearchParams(
 }
 
 export async function getWalletConnections(
-  params: AnalyticsQueryParamsV2,
+  params: AnalyticsQueryParams,
 ): Promise<WalletStats[]> {
   const searchParams = buildSearchParams(params);
   const res = await fetchAnalytics(
@@ -70,7 +58,7 @@ export async function getWalletConnections(
 }
 
 export async function getInAppWalletUsage(
-  params: AnalyticsQueryParamsV2,
+  params: AnalyticsQueryParams,
 ): Promise<InAppWalletStats[]> {
   const searchParams = buildSearchParams(params);
   const res = await fetchAnalytics(
@@ -94,7 +82,7 @@ export async function getInAppWalletUsage(
 }
 
 export async function getUserOpUsage(
-  params: AnalyticsQueryParamsV2,
+  params: AnalyticsQueryParams,
 ): Promise<UserOpStats[]> {
   const searchParams = buildSearchParams(params);
   const res = await fetchAnalytics(
@@ -118,7 +106,7 @@ export async function getUserOpUsage(
 }
 
 export async function getAggregateUserOpUsage(
-  params: Omit<AnalyticsQueryParamsV2, "period">,
+  params: Omit<AnalyticsQueryParams, "period">,
 ): Promise<UserOpStats> {
   const [userOpStats, chains] = await Promise.all([
     getUserOpUsage({ ...params, period: "all" }),
@@ -152,7 +140,7 @@ export async function getAggregateUserOpUsage(
 }
 
 export async function getClientTransactions(
-  params: AnalyticsQueryParamsV2,
+  params: AnalyticsQueryParams,
 ): Promise<TransactionStats[]> {
   const searchParams = buildSearchParams(params);
   const res = await fetchAnalytics(
@@ -180,7 +168,7 @@ export async function getRpcMethodUsage(
 ): Promise<RpcMethodStats[]> {
   const searchParams = buildSearchParams(params);
   const res = await fetchAnalytics(
-    `v1/rpc/evm-methods?${searchParams.toString()}`,
+    `v2/rpc/evm-methods?${searchParams.toString()}`,
     {
       method: "GET",
       headers: { "Content-Type": "application/json" },
@@ -201,7 +189,7 @@ export async function getWalletUsers(
 ): Promise<WalletUserStats[]> {
   const searchParams = buildSearchParams(params);
   const res = await fetchAnalytics(
-    `v1/wallets/users?${searchParams.toString()}`,
+    `v2/wallet-connects/users?${searchParams.toString()}`,
     {
       method: "GET",
       headers: { "Content-Type": "application/json" },
@@ -220,23 +208,47 @@ export async function getWalletUsers(
   return json.data as WalletUserStats[];
 }
 
+type ActiveStatus = {
+  bundler: boolean;
+  storage: boolean;
+  rpc: boolean;
+  nebula: boolean;
+  sdk: boolean;
+  insight: boolean;
+  pay: boolean;
+  inAppWallet: boolean;
+};
+
 export async function isProjectActive(
   params: AnalyticsQueryParams,
-): Promise<boolean> {
+): Promise<ActiveStatus> {
   const searchParams = buildSearchParams(params);
-  const res = await fetchAnalytics(`v1/active?${searchParams.toString()}`, {
-    method: "GET",
-    headers: { "Content-Type": "application/json" },
-  });
+  const res = await fetchAnalytics(
+    `v2/active-usage?${searchParams.toString()}`,
+    {
+      method: "GET",
+      headers: { "Content-Type": "application/json" },
+    },
+  );
 
   if (res?.status !== 200) {
     const reason = await res?.text();
     console.error(
       `Failed to fetch project active status: ${res?.status} - ${res.statusText} - ${reason}`,
     );
-    return false;
+    return {
+      bundler: false,
+      storage: false,
+      rpc: false,
+      nebula: false,
+      sdk: false,
+      insight: false,
+      pay: false,
+      inAppWallet: false,
+      ecosystemWallet: false,
+    } as ActiveStatus;
   }
 
   const json = await res.json();
-  return json.data.isActive as boolean;
+  return json.data as ActiveStatus;
 }

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

@@ -5,30 +5,25 @@ import {
   getWalletConnections,
   getWalletUsers,
 } from "@/api/analytics";
-import { redirect } from "next/navigation";
-
-import type {
-  InAppWalletStats,
-  WalletStats,
-  WalletUserStats,
-} from "types/analytics";
-
 import {
   type DurationId,
   type Range,
   getLastNDaysRange,
 } from "components/analytics/date-range-selector";
-
+import { redirect } from "next/navigation";
 import { type WalletId, getWalletInfo } from "thirdweb/wallets";
+import type {
+  InAppWalletStats,
+  WalletStats,
+  WalletUserStats,
+} from "types/analytics";
 import { AnalyticsHeader } from "../../../../components/Analytics/AnalyticsHeader";
 import { CombinedBarChartCard } from "../../../../components/Analytics/CombinedBarChartCard";
 import { EmptyState } from "../../../../components/Analytics/EmptyState";
 import { PieChartCard } from "../../../../components/Analytics/PieChartCard";
 
 import { getTeamBySlug } from "@/api/team";
 import { GenericLoadingPage } from "@/components/blocks/skeletons/GenericLoadingPage";
-import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
-import { getValidAccount } from "app/account/settings/getAccount";
 import { EmptyStateCard } from "app/team/components/Analytics/EmptyStateCard";
 import { Suspense } from "react";
 import { TotalSponsoredChartCardUI } from "../../_components/TotalSponsoredCard";
@@ -51,7 +46,6 @@ export default async function TeamOverviewPage(props: {
     props.searchParams,
   ]);
 
-  const account = await getValidAccount(`/team/${params.team_slug}`);
   const team = await getTeamBySlug(params.team_slug);
 
   if (!team) {
@@ -75,7 +69,6 @@ export default async function TeamOverviewPage(props: {
         <Suspense fallback={<GenericLoadingPage />}>
           <OverviewPageContent
             teamId={team.id}
-            account={account}
             range={range}
             interval={interval}
             searchParams={searchParams}
@@ -88,12 +81,11 @@ export default async function TeamOverviewPage(props: {
 
 async function OverviewPageContent(props: {
   teamId: string;
-  account: Account;
   range: Range;
   interval: "day" | "week";
   searchParams: SearchParams;
 }) {
-  const { teamId, account, range, interval, searchParams } = props;
+  const { teamId, range, interval, searchParams } = props;
 
   const [
     walletConnections,
@@ -113,7 +105,7 @@ async function OverviewPageContent(props: {
     }),
     // Time series data for wallet users
     getWalletUsers({
-      accountId: account.id,
+      teamId: teamId,
       from: range.from,
       to: range.to,
       period: interval,

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 { AnalyticsQueryParamsV2 } from "types/analytics";
+import type { AnalyticsQueryParams } from "types/analytics";
 import { getClientTransactions } from "../../../../../../@/api/analytics";
 import { TransactionsChartsUI } from "./TransactionCharts";
 
 export function TransactionsCharts(
-  props: AnalyticsQueryParamsV2 & {
+  props: AnalyticsQueryParams & {
     searchParams: { [key: string]: string | string[] | undefined };
   },
 ) {
@@ -24,7 +24,7 @@ export function TransactionsCharts(
 }
 
 async function TransactionsChartCardAsync(
-  props: AnalyticsQueryParamsV2 & {
+  props: AnalyticsQueryParams & {
     searchParams: { [key: string]: string | string[] | undefined };
   },
 ) {

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

@@ -70,7 +70,13 @@ export default async function ProjectOverviewPage(props: PageProps) {
     type: rangeType,
   };
 
-  const isActive = await isProjectActive({ clientId: project.publishableKey });
+  const activeStatus = await isProjectActive({
+    teamId: project.teamId,
+    projectId: project.id,
+  });
+
+  // is any analytics data active?
+  const isActive = Object.values(activeStatus).some((v) => !!v);
 
   return (
     <div className="flex grow flex-col">
@@ -127,7 +133,8 @@ async function ProjectAnalytics(props: {
     }),
     // Time series data for wallet users
     getWalletUsers({
-      clientId: project.publishableKey,
+      teamId: project.teamId,
+      projectId: project.id,
       from: range.from,
       to: range.to,
       period: interval,
@@ -227,7 +234,8 @@ async function ProjectAnalytics(props: {
         from={range.from}
         to={range.to}
         period={interval}
-        clientId={project.publishableKey}
+        teamId={project.teamId}
+        projectId={project.id}
       />
     </div>
   );

apps/dashboard/src/types/analytics.ts

@@ -42,17 +42,9 @@ export interface RpcMethodStats {
 }
 
 export interface AnalyticsQueryParams {
-  clientId?: string;
-  accountId?: string;
+  teamId: string;
+  projectId?: string;
   from?: Date;
   to?: Date;
   period?: "day" | "week" | "month" | "year" | "all";
 }
-
-export type AnalyticsQueryParamsV2 = Omit<
-  AnalyticsQueryParams,
-  "clientId" | "accountId"
-> & {
-  teamId: string;
-  projectId?: string;
-};