[Dashboard] improve wallet stats (#7880)

Author: joaquim-verges

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

@@ -13,7 +13,6 @@ import type {
   UniversalBridgeWalletStats,
   UserOpStats,
   WalletStats,
-  WalletUserStats,
   WebhookLatencyStats,
   WebhookRequestStats,
   WebhookSummaryStats,
@@ -147,7 +146,13 @@ const cached_getWalletConnections = unstable_cache(
     }
 
     const json = await res.json();
-    return json.data as WalletStats[];
+    return (json.data as WalletStats[]).filter(
+      (w) =>
+        w.walletType !== "smart" &&
+        w.walletType !== "smartWallet" &&
+        w.walletType !== "inApp" &&
+        w.walletType !== "inAppWallet",
+    );
   },
   ["getWalletConnections"],
   {
@@ -398,44 +403,6 @@ export function getRpcUsageByType(
   return cached_getRpcUsageByType(normalizedParams(params), authToken);
 }
 
-const cached_getWalletUsers = unstable_cache(
-  async (
-    params: AnalyticsQueryParams,
-    authToken: string,
-  ): Promise<WalletUserStats[]> => {
-    const searchParams = buildSearchParams(params);
-    const res = await fetchAnalytics({
-      authToken,
-      url: `v2/sdk/wallet-connects/users?${searchParams.toString()}`,
-      init: {
-        method: "GET",
-      },
-    });
-
-    if (res?.status !== 200) {
-      const reason = await res?.text();
-      console.error(
-        `Failed to fetch wallet user stats: ${res?.status} - ${res.statusText} - ${reason}`,
-      );
-      return [];
-    }
-
-    const json = await res.json();
-    return json.data as WalletUserStats[];
-  },
-  ["getWalletUsers"],
-  {
-    revalidate: 60 * 60, // 1 hour
-  },
-);
-
-export function getWalletUsers(
-  params: AnalyticsQueryParams,
-  authToken: string,
-) {
-  return cached_getWalletUsers(normalizedParams(params), authToken);
-}
-
 type ActiveStatus = {
   bundler: boolean;
   storage: boolean;

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

@@ -7,17 +7,11 @@ export interface WalletStats {
   walletType: string;
 }
 
-export interface WalletUserStats {
-  date: string;
-  newUsers: number;
-  returningUsers: number;
-  totalUsers: number;
-}
-
 export interface InAppWalletStats {
   date: string;
   authenticationMethod: string;
   uniqueWalletsConnected: number;
+  newUsers: number;
 }
 
 export interface EcosystemWalletStats extends InAppWalletStats {

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

@@ -1,6 +1,6 @@
 import { subDays } from "date-fns";
 import { redirect } from "next/navigation";
-import { getWalletConnections } from "@/api/analytics";
+import { getInAppWalletUsage } from "@/api/analytics";
 import { getAuthToken } from "@/api/auth-token";
 import { getProjects, type Project } from "@/api/project/projects";
 import { getTeamBySlug } from "@/api/team/get-team";
@@ -90,7 +90,8 @@ async function getProjectsWithAnalytics(
         const today = new Date();
         const thirtyDaysAgo = subDays(today, 30);
 
-        const data = await getWalletConnections(
+        // TODO (stats): also add the external wallet usage?
+        const data = await getInAppWalletUsage(
           {
             from: thirtyDaysAgo,
             period: "all",

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

@@ -2,7 +2,7 @@
 
 import { useMemo } from "react";
 import { useSetResponsiveSearchParams } from "responsive-rsc";
-import type { UniversalBridgeStats, WalletUserStats } from "@/types/analytics";
+import type { InAppWalletStats, UniversalBridgeStats } from "@/types/analytics";
 import { CombinedBarChartCard } from "../../../../components/Analytics/CombinedBarChartCard";
 import { EmptyStateContent } from "../../../../components/Analytics/EmptyStateCard";
 
@@ -19,7 +19,7 @@ export function TeamHighlightsCard({
   selectedChart,
   selectedChartQueryParam,
 }: {
-  userStats: WalletUserStats[];
+  userStats: InAppWalletStats[];
   volumeStats: UniversalBridgeStats[];
   selectedChart: string | undefined;
   selectedChartQueryParam: string;
@@ -32,18 +32,6 @@ export function TeamHighlightsCard({
 
   const chartConfig = {
     activeUsers: { color: "hsl(var(--chart-1))", label: "Active Users" },
-    feesCollected: {
-      color: "hsl(var(--chart-4))",
-      emptyContent: (
-        <EmptyStateContent
-          description="Your apps haven't collected any fees yet."
-          link={"https://portal.thirdweb.com/payments"}
-          metric="Fees"
-        />
-      ),
-      isCurrency: true,
-      label: "Fee Revenue",
-    },
     newUsers: { color: "hsl(var(--chart-3))", label: "New Users" },
     totalVolume: {
       color: "hsl(var(--chart-2))",
@@ -57,6 +45,18 @@ export function TeamHighlightsCard({
       isCurrency: true,
       label: "Total Volume",
     },
+    feesCollected: {
+      color: "hsl(var(--chart-4))",
+      emptyContent: (
+        <EmptyStateContent
+          description="Your apps haven't collected any fees yet."
+          link={"https://portal.thirdweb.com/payments"}
+          metric="Fees"
+        />
+      ),
+      isCurrency: true,
+      label: "Fee Revenue",
+    },
   } as const;
 
   return (
@@ -96,33 +96,46 @@ type TimeSeriesMetrics = AggregatedMetrics & {
 };
 
 function processTimeSeriesData(
-  userStats: WalletUserStats[],
+  userStats: InAppWalletStats[],
   volumeStats: UniversalBridgeStats[],
 ): TimeSeriesMetrics[] {
   const metrics: TimeSeriesMetrics[] = [];
+  const dates = [...new Set(userStats.map((a) => a.date))];
+
+  for (const date of dates) {
+    const activeUsers = userStats
+      .filter(
+        (u) => new Date(u.date).toISOString() === new Date(date).toISOString(),
+      )
+      .reduce((acc, curr) => acc + curr.uniqueWalletsConnected, 0);
+
+    const newUsers = userStats
+      .filter(
+        (u) => new Date(u.date).toISOString() === new Date(date).toISOString(),
+      )
+      .reduce((acc, curr) => acc + curr.newUsers, 0);
 
-  for (const stat of userStats) {
     const volume = volumeStats
       .filter(
         (v) =>
-          new Date(v.date).toISOString() ===
-            new Date(stat.date).toISOString() && v.status === "completed",
+          new Date(v.date).toISOString() === new Date(date).toISOString() &&
+          v.status === "completed",
       )
       .reduce((acc, curr) => acc + curr.amountUsdCents / 100, 0);
 
     const fees = volumeStats
       .filter(
         (v) =>
-          new Date(v.date).toISOString() ===
-            new Date(stat.date).toISOString() && v.status === "completed",
+          new Date(v.date).toISOString() === new Date(date).toISOString() &&
+          v.status === "completed",
       )
       .reduce((acc, curr) => acc + curr.developerFeeUsdCents / 100, 0);
 
     metrics.push({
-      activeUsers: stat.totalUsers ?? 0,
-      date: stat.date,
+      activeUsers: activeUsers,
+      date: date,
       feesCollected: fees,
-      newUsers: stat.newUsers ?? 0,
+      newUsers: newUsers,
       totalVolume: volume,
     });
   }

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

@@ -13,7 +13,6 @@ import {
   getUniversalBridgeUsage,
   getUserOpUsage,
   getWalletConnections,
-  getWalletUsers,
 } from "@/api/analytics";
 import { getAuthToken } from "@/api/auth-token";
 import { getTeamBySlug } from "@/api/team/get-team";
@@ -193,7 +192,7 @@ async function AsyncTeamHighlightsCard(props: {
 }) {
   const [walletUserStatsTimeSeries, universalBridgeUsage] =
     await Promise.allSettled([
-      getWalletUsers(
+      getInAppWalletUsage(
         {
           from: props.range.from,
           period: props.interval,
@@ -216,7 +215,7 @@ async function AsyncTeamHighlightsCard(props: {
   if (
     walletUserStatsTimeSeries.status === "fulfilled" &&
     universalBridgeUsage.status === "fulfilled" &&
-    walletUserStatsTimeSeries.value.some((w) => w.totalUsers !== 0)
+    walletUserStatsTimeSeries.value.some((w) => w.uniqueWalletsConnected !== 0)
   ) {
     return (
       <TeamHighlightsCard
@@ -255,8 +254,8 @@ async function AsyncWalletDistributionCard(props: {
     <WalletDistributionCard data={walletConnections} />
   ) : (
     <EmptyStateCard
-      link="https://portal.thirdweb.com/wallets"
-      metric="Wallets"
+      link="https://portal.thirdweb.com/wallets/external-wallets"
+      metric="External Wallets"
     />
   );
 }
@@ -381,19 +380,17 @@ async function AsyncTotalSponsoredCard(props: {
 
 async function WalletDistributionCard({ data }: { data: WalletStats[] }) {
   const formattedData = await Promise.all(
-    data
-      .filter((w) => w.walletType !== "smart" && w.walletType !== "smartWallet")
-      .map(async (w) => {
-        const wallet = await getWalletInfo(w.walletType as WalletId).catch(
-          () => ({ name: w.walletType }),
-        );
-        return {
-          totalConnections: w.totalConnections,
-          uniqueWalletsConnected: w.uniqueWalletsConnected,
-          walletName: wallet.name,
-          walletType: w.walletType,
-        };
-      }),
+    data.map(async (w) => {
+      const wallet = await getWalletInfo(w.walletType as WalletId).catch(
+        () => ({ name: w.walletType }),
+      );
+      return {
+        totalConnections: w.totalConnections,
+        uniqueWalletsConnected: w.uniqueWalletsConnected,
+        walletName: wallet.name,
+        walletType: w.walletType,
+      };
+    }),
   );
 
   return (
@@ -404,7 +401,7 @@ async function WalletDistributionCard({ data }: { data: WalletStats[] }) {
           value: uniqueWalletsConnected,
         };
       })}
-      title="Wallets Connected"
+      title="External Wallets Connected"
     />
   );
 }

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

@@ -54,6 +54,7 @@ function ecosystemWalletStatsStub(
         date: formattedDate,
         ecosystemPartnerId: "123",
         uniqueWalletsConnected: Math.floor(Math.random() * 1000) + 1,
+        newUsers: Math.floor(Math.random() * 100) + 1,
       });
     }
   }