[Dashboard] Feature: Add Universal Bridge to analytics dashboard (#7051)

Co-authored-by: Claude <[email protected]>

Author: gregfromstl

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

@@ -48,15 +48,15 @@ async function fetchAnalytics(
     );
   }
   // client id DEBUG OVERRIDE
-  // ANALYTICS_SERVICE_URL.searchParams.delete("projectId");
-  // ANALYTICS_SERVICE_URL.searchParams.delete("teamId");
-  // ANALYTICS_SERVICE_URL.searchParams.append(
+  // analyticsServiceUrl.searchParams.delete("projectId");
+  // analyticsServiceUrl.searchParams.delete("teamId");
+  // analyticsServiceUrl.searchParams.append(
   //   "teamId",
-  //   "team_clmb33q9w00gn1x0u2ri8z0k0",
+  //   "team_cm0lde33r02344w129k5hm2xz",
   // );
-  // ANALYTICS_SERVICE_URL.searchParams.append(
+  // analyticsServiceUrl.searchParams.append(
   //   "projectId",
-  //   "prj_clyqwud5y00u1na7nzxnzlz7o",
+  //   "prj_cm4rqwx9b002qrnsnr37wqpo6",
   // );
 
   return fetch(analyticsServiceUrl, {
@@ -377,7 +377,7 @@ export async function getEcosystemWalletUsage(args: {
 
 export async function getUniversalBridgeUsage(args: {
   teamId: string;
-  projectId: string;
+  projectId?: string;
   from?: Date;
   to?: Date;
   period?: "day" | "week" | "month" | "year" | "all";
@@ -395,11 +395,10 @@ export async function getUniversalBridgeUsage(args: {
     console.error(
       `Failed to fetch universal bridge stats: ${res?.status} - ${res.statusText} - ${reason}`,
     );
-    return null;
+    return [];
   }
 
   const json = await res.json();
-
   return json.data as UniversalBridgeStats[];
 }
 
@@ -430,6 +429,5 @@ export async function getUniversalBridgeWalletUsage(args: {
   }
 
   const json = await res.json();
-
   return json.data as UniversalBridgeWalletStats[];
 }

apps/dashboard/src/@/components/ui/chart.tsx

@@ -12,6 +12,7 @@ export type ChartConfig = {
   [k in string]: {
     label?: React.ReactNode;
     icon?: React.ComponentType;
+    isCurrency?: boolean;
   } & (
     | { color?: string; theme?: never }
     | { color?: never; theme: Record<keyof typeof THEMES, string> }

apps/dashboard/src/@/lib/time.ts

@@ -39,9 +39,10 @@ export function getFiltersFromSearchParams(params: {
         };
 
   const defaultInterval =
-    differenceInCalendarDays(range.to, range.from) > 30
-      ? "week"
-      : ("day" as const);
+    params.interval ??
+    (differenceInCalendarDays(range.to, range.from) > 30
+      ? ("week" as const)
+      : ("day" as const));
 
   return {
     range,
@@ -50,6 +51,6 @@ export function getFiltersFromSearchParams(params: {
         ? ("day" as const)
         : params.interval === "week"
           ? ("week" as const)
-          : defaultInterval,
+          : (defaultInterval as "day" | "week"),
   };
 }

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

@@ -1,6 +1,7 @@
 import {
   getClientTransactions,
   getInAppWalletUsage,
+  getUniversalBridgeUsage,
   getUserOpUsage,
   getWalletConnections,
   getWalletUsers,
@@ -14,6 +15,7 @@ import { redirect } from "next/navigation";
 import { type WalletId, getWalletInfo } from "thirdweb/wallets";
 import type {
   InAppWalletStats,
+  UniversalBridgeStats,
   WalletStats,
   WalletUserStats,
 } from "types/analytics";
@@ -24,7 +26,10 @@ import { PieChartCard } from "../../../../components/Analytics/PieChartCard";
 
 import { getTeamBySlug } from "@/api/team";
 import { GenericLoadingPage } from "@/components/blocks/skeletons/GenericLoadingPage";
-import { EmptyStateCard } from "app/(app)/team/components/Analytics/EmptyStateCard";
+import {
+  EmptyStateCard,
+  EmptyStateContent,
+} from "app/(app)/team/components/Analytics/EmptyStateCard";
 import { Suspense } from "react";
 import { TotalSponsoredChartCardUI } from "../../_components/TotalSponsoredCard";
 import { TransactionsChartCardUI } from "../../_components/TransactionsCard";
@@ -100,6 +105,7 @@ async function OverviewPageContent(props: {
     userOpUsage,
     clientTransactionsTimeSeries,
     clientTransactions,
+    universalBridgeUsage,
   ] = await Promise.all([
     // Aggregated wallet connections
     getWalletConnections({
@@ -148,6 +154,13 @@ async function OverviewPageContent(props: {
       to: range.to,
       period: "all",
     }),
+    // Universal Bridge
+    getUniversalBridgeUsage({
+      teamId: teamId,
+      from: range.from,
+      to: range.to,
+      period: interval,
+    }),
   ]);
 
   const isEmpty =
@@ -164,8 +177,9 @@ async function OverviewPageContent(props: {
     <div className="flex grow flex-col gap-6">
       {walletUserStatsTimeSeries.some((w) => w.totalUsers !== 0) ? (
         <div className="">
-          <UsersChartCard
+          <AppHighlightsCard
             userStats={walletUserStatsTimeSeries}
+            volumeStats={universalBridgeUsage}
             searchParams={searchParams}
           />
         </div>
@@ -218,70 +232,96 @@ async function OverviewPageContent(props: {
   );
 }
 
-type UserMetrics = {
-  totalUsers: number;
+type AggregatedMetrics = {
   activeUsers: number;
   newUsers: number;
-  returningUsers: number;
+  totalVolume: number;
+  feesCollected: number;
 };
 
-type TimeSeriesMetrics = UserMetrics & {
+type TimeSeriesMetrics = AggregatedMetrics & {
   date: string;
 };
 
 function processTimeSeriesData(
   userStats: WalletUserStats[],
+  volumeStats: UniversalBridgeStats[],
 ): TimeSeriesMetrics[] {
   const metrics: TimeSeriesMetrics[] = [];
 
-  let cumulativeUsers = 0;
   for (const stat of userStats) {
-    cumulativeUsers += stat.newUsers ?? 0;
+    const volume = volumeStats
+      .filter((v) => v.date === stat.date && v.status === "completed")
+      .reduce((acc, curr) => acc + curr.amountUsdCents / 100, 0);
+
+    const fees = volumeStats
+      .filter((v) => v.date === stat.date && v.status === "completed")
+      .reduce((acc, curr) => acc + curr.developerFeeUsdCents / 100, 0);
+
     metrics.push({
       date: stat.date,
       activeUsers: stat.totalUsers ?? 0,
-      returningUsers: stat.returningUsers ?? 0,
       newUsers: stat.newUsers ?? 0,
-      totalUsers: cumulativeUsers,
+      totalVolume: volume,
+      feesCollected: fees,
     });
   }
 
   return metrics;
 }
 
-function UsersChartCard({
+function AppHighlightsCard({
   userStats,
+  volumeStats,
   searchParams,
 }: {
   userStats: WalletUserStats[];
+  volumeStats: UniversalBridgeStats[];
   searchParams?: { [key: string]: string | string[] | undefined };
 }) {
-  const timeSeriesData = processTimeSeriesData(userStats);
+  const timeSeriesData = processTimeSeriesData(userStats, volumeStats);
 
   const chartConfig = {
-    activeUsers: { label: "Active Users", color: "hsl(var(--chart-1))" },
-    totalUsers: { label: "Total Users", color: "hsl(var(--chart-2))" },
-    newUsers: { label: "New Users", color: "hsl(var(--chart-3))" },
-    returningUsers: {
-      label: "Returning Users",
+    totalVolume: {
+      label: "Total Volume",
+      color: "hsl(var(--chart-2))",
+      isCurrency: true,
+      emptyContent: (
+        <EmptyStateContent
+          metric="Payments"
+          description="Onramp, swap, and bridge with thirdweb's Universal Bridge."
+          link="https://portal.thirdweb.com/connect/pay/overview"
+        />
+      ),
+    },
+    feesCollected: {
+      label: "Fee Revenue",
       color: "hsl(var(--chart-4))",
+      isCurrency: true,
+      emptyContent: (
+        <EmptyStateContent
+          metric="Fees"
+          description="Your apps haven't collected any fees yet."
+          link={"https://portal.thirdweb.com/connect/pay/fees"}
+        />
+      ),
     },
+    activeUsers: { label: "Active Users", color: "hsl(var(--chart-1))" },
+    newUsers: { label: "New Users", color: "hsl(var(--chart-3))" },
   } as const;
 
   return (
     <CombinedBarChartCard
       className="max-md:rounded-none max-md:border-r-0 max-md:border-l-0"
-      title="Users"
+      title="App Highlights"
       chartConfig={chartConfig}
       activeChart={
-        (searchParams?.usersChart as keyof UserMetrics) ?? "activeUsers"
+        (searchParams?.appHighlights as keyof AggregatedMetrics) ??
+        "totalVolume"
       }
       data={timeSeriesData}
       aggregateFn={(_data, key) =>
-        // If there is only one data point, use that one, otherwise use the previous
-        timeSeriesData.filter((d) => (d[key] as number) > 0).length >= 2
-          ? timeSeriesData[timeSeriesData.length - 2]?.[key]
-          : timeSeriesData[timeSeriesData.length - 1]?.[key]
+        timeSeriesData.reduce((acc, curr) => acc + curr[key], 0)
       }
       // Get the trend from the last two COMPLETE periods
       trendFn={(data, key) =>
@@ -291,7 +331,7 @@ function UsersChartCard({
             1
           : undefined
       }
-      queryKey="usersChart"
+      queryKey="appHighlights"
       existingQueryParams={searchParams}
     />
   );

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/connect/universal-bridge/page.tsx

@@ -14,11 +14,11 @@ export default async function Page(props: {
     team_slug: string;
     project_slug: string;
   }>;
-  searchParams: {
+  searchParams: Promise<{
     from?: string | undefined | string[];
     to?: string | undefined | string[];
     interval?: string | undefined | string[];
-  };
+  }>;
 }) {
   const params = await props.params;
   const project = await getProject(params.team_slug, params.project_slug);
@@ -36,7 +36,7 @@ export default async function Page(props: {
   });
 
   return (
-    <ResponsiveSearchParamsProvider value={props.searchParams}>
+    <ResponsiveSearchParamsProvider value={searchParams}>
       <div>
         <div className="mb-4 flex justify-start">
           <PayAnalyticsFilter />