feat: adds AA summary to overview page

Author: gregfromstl

apps/dashboard/src/app/(dashboard)/dashboard/connect/analytics/[clientId]/page.tsx

@@ -51,7 +51,10 @@ export default async function Page(props: {
 
       <div className="h-4 lg:h-8" />
 
-      <ConnectAnalyticsDashboard clientId={apiKey.key} />
+      <ConnectAnalyticsDashboard
+        clientId={apiKey.key}
+        connectLayoutSlug="/dashboard/connect"
+      />
 
       <div className="h-4 lg:h-8" />
       <ConnectSDKCard description="Add the Connect SDK to your app to start collecting analytics." />

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/ConnectAnalyticsDashboard.tsx

@@ -1,5 +1,6 @@
 "use client";
 import {
+  useUserOpUsageAggregate,
   useWalletUsageAggregate,
   useWalletUsagePeriod,
 } from "@3rdweb-sdk/react/hooks/useApi";
@@ -15,6 +16,7 @@ import { ConnectAnalyticsDashboardUI } from "./ConnectAnalyticsDashboardUI";
 
 export function ConnectAnalyticsDashboard(props: {
   clientId: string;
+  connectLayoutSlug: string;
 }) {
   const [range, setRange] = useState<Range>(() =>
     getLastNDaysRange("last-120"),
@@ -39,6 +41,10 @@ export function ConnectAnalyticsDashboard(props: {
     to: range.to,
   });
 
+  const userOpAggregateQuery = useUserOpUsageAggregate({
+    clientId: props.clientId,
+  });
+
   return (
     <div>
       <div className="flex gap-3">
@@ -59,6 +65,8 @@ export function ConnectAnalyticsDashboard(props: {
       <ConnectAnalyticsDashboardUI
         walletUsage={walletUsageQuery.data || []}
         aggregateWalletUsage={walletUsageAggregateQuery.data || []}
+        aggregateUserOpUsageQuery={userOpAggregateQuery.data}
+        connectLayoutSlug={props.connectLayoutSlug}
         isPending={
           walletUsageQuery.isPending || walletUsageAggregateQuery.isPending
         }

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/ConnectAnalyticsDashboardUI.tsx

@@ -1,14 +1,20 @@
-import type { WalletStats } from "@3rdweb-sdk/react/hooks/useApi";
-import { Stat } from "components/analytics/stat";
+import type { UserOpStats, WalletStats } from "@3rdweb-sdk/react/hooks/useApi";
 import { CableIcon, WalletCardsIcon } from "lucide-react";
+import type React from "react";
 import { useMemo } from "react";
 import { DailyConnectionsChartCard } from "./_components/DailyConnectionsChartCard";
 import { WalletConnectorsChartCard } from "./_components/WalletConnectorsChartCard";
 import { WalletDistributionChartCard } from "./_components/WalletDistributionChartCard";
+import { Stat } from "components/analytics/stat";
+import { AccountAbstractionSummary } from "components/smart-wallets/AccountAbstractionAnalytics/AccountAbstractionSummary";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
 
 export function ConnectAnalyticsDashboardUI(props: {
   walletUsage: WalletStats[];
   aggregateWalletUsage: WalletStats[];
+  aggregateUserOpUsageQuery?: UserOpStats;
+  connectLayoutSlug: string;
   isPending: boolean;
 }) {
   const { totalWallets, uniqueWallets } = useMemo(() => {
@@ -34,6 +40,38 @@ export function ConnectAnalyticsDashboardUI(props: {
         />
       </div>
 
+      <div className="h-4">
+        <div className="w-full border-b border-muted" />
+      </div>
+
+      <div>
+        <div className="flex flex-col mb-4 gap-4 lg:flex-row lg:items-center lg:justify-between">
+          <div>
+            <h1 className="font-medium text-xl tracking-tight">
+              Account Abstraction
+            </h1>
+            <p className="text-muted-foreground">
+              Sponsor and batch transactions for your users.
+            </p>
+          </div>
+
+          <div>
+            <Button asChild variant="primary" size="sm" className="w-full">
+              <Link href={`${props.connectLayoutSlug}/account-abstraction`}>
+                View All
+              </Link>
+            </Button>
+          </div>
+        </div>
+        <AccountAbstractionSummary
+          aggregateUserOpUsageQuery={props.aggregateUserOpUsageQuery}
+        />
+      </div>
+
+      <div className="h-4">
+        <div className="w-full border-b border-muted" />
+      </div>
+
       <DailyConnectionsChartCard
         walletStats={props.walletUsage}
         isPending={props.isPending}

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/analytics/_components/ConnectAnalyticsDashboard.stories.tsx

@@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import { mobileViewport } from "../../../../../../../stories/utils";
 import { ConnectAnalyticsDashboardUI } from "../ConnectAnalyticsDashboardUI";
 import { createWalletStatsStub } from "./storyUtils";
+import { createUserOpStatsStub } from "components/smart-wallets/AccountAbstractionAnalytics/storyUtils";
 
 const meta = {
   title: "Charts/Connect/Analytics Dashboard",
@@ -31,6 +32,8 @@ function Component() {
       <ConnectAnalyticsDashboardUI
         walletUsage={createWalletStatsStub(30)}
         aggregateWalletUsage={createWalletStatsStub(30)}
+        aggregateUserOpUsageQuery={createUserOpStatsStub(1)[0]!}
+        connectLayoutSlug="connectLayoutSlug"
         isPending={false}
       />
     </div>

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

@@ -30,7 +30,10 @@ export default async function Page(props: {
       </div>
 
       <div className="h-6 lg:h-8" />
-      <ConnectAnalyticsDashboard clientId={project.publishableKey} />
+      <ConnectAnalyticsDashboard
+        clientId={project.publishableKey}
+        connectLayoutSlug={`/team/${props.params.team_slug}/${props.params.project_slug}/connect`}
+      />
       <div className="h-4 lg:h-8" />
       <ConnectSDKCard description="Add the Connect SDK to your app to get started collecting analytics." />
     </div>

apps/dashboard/src/components/smart-wallets/AccountAbstractionAnalytics/AccountAbstractionSummary.tsx

@@ -0,0 +1,28 @@
+import { UserOpStats } from "@3rdweb-sdk/react/hooks/useApi";
+import { Stat } from "components/analytics/stat";
+import { ActivityIcon, CoinsIcon } from "lucide-react";
+
+export function AccountAbstractionSummary(props: {
+  aggregateUserOpUsageQuery?: UserOpStats;
+}) {
+  return (
+    <div className="grid grid-cols-2 gap-4 lg:gap-6">
+      <Stat
+        label="Sponsored Transactions"
+        value={props.aggregateUserOpUsageQuery?.successful || 0}
+        icon={ActivityIcon}
+      />
+      <Stat
+        label="Total Sponsored"
+        value={props.aggregateUserOpUsageQuery?.sponsoredUsd || 0}
+        formatter={(value: number) =>
+          new Intl.NumberFormat("en-US", {
+            style: "currency",
+            currency: "USD",
+          }).format(value)
+        }
+        icon={CoinsIcon}
+      />
+    </div>
+  );
+}

apps/dashboard/src/components/smart-wallets/index.tsx

@@ -5,11 +5,10 @@ import {
   type ApiKeyService,
   useUserOpUsageAggregate,
 } from "@3rdweb-sdk/react/hooks/useApi";
-import { Stat } from "components/analytics/stat";
-import { ActivityIcon, CoinsIcon } from "lucide-react";
 import { AccountAbstractionAnalytics } from "./AccountAbstractionAnalytics";
 import { AccountFactories } from "./AccountFactories";
 import { AccountAbstractionSettingsPage } from "./SponsorshipPolicies";
+import { AccountAbstractionSummary } from "./AccountAbstractionAnalytics/AccountAbstractionSummary";
 
 interface SmartWalletsProps {
   apiKeyServices: ApiKeyService[];
@@ -32,24 +31,9 @@ export const SmartWallets: React.FC<SmartWalletsProps> = ({
 
   return (
     <div>
-      <div className="grid grid-cols-2 gap-4 lg:gap-6">
-        <Stat
-          label="Sponsored Transactions"
-          value={aggregateUserOpUsageQuery.data?.successful || 0}
-          icon={ActivityIcon}
-        />
-        <Stat
-          label="Total Sponsored"
-          value={aggregateUserOpUsageQuery.data?.sponsoredUsd || 0}
-          formatter={(value) =>
-            new Intl.NumberFormat("en-US", {
-              style: "currency",
-              currency: "USD",
-            }).format(value)
-          }
-          icon={CoinsIcon}
-        />
-      </div>
+      <AccountAbstractionSummary
+        aggregateUserOpUsageQuery={aggregateUserOpUsageQuery.data}
+      />
 
       <div className="h-12" />