feat(dashboard): adds ecosystem wallet summary analytics

Author: gregfromstl

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

@@ -16,7 +16,7 @@ export async function EcosystemAnalyticsPage({
   }
 
   const stats = await getEcosystemWalletUsage({
-    ecosystemId: "e7f67837-6fa4-49fa-9f86-00546788e3d5",
+    ecosystemId,
     from: range.from,
     to: range.to,
     period: interval,

apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/analytics/components/EcosystemWalletUsersChartCard.tsx

@@ -109,15 +109,17 @@ export function EcosystemWalletUsersChartCard(props: {
   const disableActions =
     props.isPending ||
     chartData.length === 0 ||
-    chartData.every((data) => data.sponsoredUsd === 0);
+    uniqueAuthMethods.every((authMethod) =>
+      chartData.every((data) => data[authMethod] === 0),
+    );
 
   return (
     <div className="relative w-full rounded-lg border border-border bg-muted/50 p-4 md:p-6">
       <h3 className="mb-1 font-semibold text-xl tracking-tight md:text-2xl">
         Unique Users
       </h3>
       <p className="mb-3 text-muted-foreground text-sm">
-        The total number of active users in your ecosystem.
+        The total number of active users in your ecosystem for each period.
       </p>
 
       <div className="top-6 right-6 mb-4 grid grid-cols-2 items-center gap-2 md:absolute md:mb-0 md:flex">
@@ -148,7 +150,9 @@ export function EcosystemWalletUsersChartCard(props: {
         {props.isPending ? (
           <LoadingChartState />
         ) : chartData.length === 0 ||
-          chartData.every((data) => data.sponsoredUsd === 0) ? (
+          uniqueAuthMethods.every((authMethod) =>
+            chartData.every((data) => data[authMethod] === 0),
+          ) ? (
           <EmptyChartState>
             <div className="flex flex-col items-center justify-center">
               <span className="mb-6 text-lg">

apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/analytics/components/Summary.tsx

@@ -1,10 +1,10 @@
-import type { InAppWalletStats } from "@3rdweb-sdk/react/hooks/useApi";
+import type { EcosystemWalletStats } from "@3rdweb-sdk/react/hooks/useApi";
 import { Stat } from "components/analytics/stat";
 import { ActivityIcon, UserIcon } from "lucide-react";
 
-export function InAppWalletsSummary(props: {
-  allTimeStats: InAppWalletStats[] | undefined;
-  monthlyStats: InAppWalletStats[] | undefined;
+export function EcosystemWalletsSummary(props: {
+  allTimeStats: EcosystemWalletStats[] | undefined;
+  monthlyStats: EcosystemWalletStats[] | undefined;
 }) {
   const allTimeStats = props.allTimeStats?.reduce(
     (acc, curr) => {

apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/components/EcosystemSlugLayout.tsx

@@ -4,6 +4,7 @@ import { redirect } from "next/navigation";
 import { getAddress } from "thirdweb";
 import { fetchEcosystem } from "../../../utils/fetchEcosystem";
 import { EcosystemHeader } from "./ecosystem-header.client";
+import { getEcosystemWalletUsage } from "data/analytics/wallets/ecosystem";
 
 export async function EcosystemLayoutSlug({
   children,
@@ -30,11 +31,32 @@ export async function EcosystemLayoutSlug({
     redirect(ecosystemLayoutPath);
   }
 
+  const allTimeStatsPromise = getEcosystemWalletUsage({
+    ecosystemId: ecosystem.id,
+    from: new Date(2022, 0, 1),
+    to: new Date(),
+    period: "all",
+  });
+
+  const monthlyStatsPromise = getEcosystemWalletUsage({
+    ecosystemId: ecosystem.id,
+    from: new Date(new Date().getFullYear(), new Date().getMonth(), 1),
+    to: new Date(),
+    period: "month",
+  });
+
+  const [allTimeStats, monthlyStats] = await Promise.all([
+    allTimeStatsPromise,
+    monthlyStatsPromise,
+  ]);
+
   return (
     <div className="flex w-full flex-col gap-10">
       <EcosystemHeader
         ecosystem={ecosystem}
         ecosystemLayoutPath={ecosystemLayoutPath}
+        allTimeStats={allTimeStats || []}
+        monthlyStats={monthlyStats || []}
       />
       {children}
     </div>

apps/dashboard/src/app/(dashboard)/dashboard/connect/ecosystem/[slug]/(active)/components/ecosystem-header.client.tsx

@@ -27,6 +27,8 @@ import { usePathname } from "next/navigation";
 import { useEcosystemList } from "../../../hooks/use-ecosystem-list";
 import type { Ecosystem } from "../../../types";
 import { useEcosystem } from "../hooks/use-ecosystem";
+import { EcosystemWalletStats } from "@3rdweb-sdk/react/hooks/useApi";
+import { EcosystemWalletsSummary } from "../analytics/components/Summary";
 
 function EcosystemAlertBanner({ ecosystem }: { ecosystem: Ecosystem }) {
   switch (ecosystem.status) {
@@ -110,6 +112,8 @@ function EcosystemSelect(props: {
 export function EcosystemHeader(props: {
   ecosystem: Ecosystem;
   ecosystemLayoutPath: string;
+  allTimeStats: EcosystemWalletStats[];
+  monthlyStats: EcosystemWalletStats[];
 }) {
   const pathname = usePathname();
   const { data: fetchedEcosystem } = useEcosystem({
@@ -193,6 +197,10 @@ export function EcosystemHeader(props: {
             />
           </div>
         </div>
+        <EcosystemWalletsSummary
+          allTimeStats={props.allTimeStats}
+          monthlyStats={props.monthlyStats}
+        />
         <TabLinks
           links={[
             {

apps/dashboard/src/data/analytics/wallets/ecosystem.ts

@@ -1,4 +1,4 @@
-import type { InAppWalletStats } from "@3rdweb-sdk/react/hooks/useApi";
+import type { EcosystemWalletStats } from "@3rdweb-sdk/react/hooks/useApi";
 import { fetchAnalytics } from "../fetch-analytics";
 
 export async function getEcosystemWalletUsage(args: {
@@ -36,5 +36,5 @@ export async function getEcosystemWalletUsage(args: {
 
   const json = await res.json();
 
-  return json.data as InAppWalletStats[];
+  return json.data as EcosystemWalletStats[];
 }