[Dashboard] Feature: AA analytics tab (#5149)

<!-- start pr-codex -->

## PR-Codex overview
This PR focuses on enhancing the analytics dashboard for account abstraction by updating components, improving data handling, and adding new features for user operation statistics and wallet usage.

### Detailed summary
- Updated `clientId` handling in `ConnectAnalyticsDashboard` and `AccountAbstractionPage`.
- Introduced `connectLayoutSlug` prop in `ConnectAnalyticsDashboard`.
- Added `IntervalSelector` and `DateRangeSelector` components for better date management.
- Refactored `ConnectAnalyticsDashboardUI` to include `AccountAbstractionSummary`.
- Enhanced `TotalSponsoredChartCard` and `SponsoredTransactionsChartCard` with new chart states.
- Moved `createUserOpStatsStub` to a new location and cleaned up unused code.
- Improved data aggregation for user operation statistics in `useUserOpUsageAggregate`.

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->

Author: gregfromstl

apps/dashboard/src/@3rdweb-sdk/react/hooks/useApi.ts

@@ -435,7 +435,7 @@ export function useUserOpUsageAggregate(args: {
   const { clientId, from, to } = args;
   const { user, isLoggedIn } = useLoggedInUser();
 
-  return useQuery({
+  return useQuery<UserOpStats>({
     queryKey: accountKeys.userOpStats(
       user?.address as string,
       clientId as string,
@@ -444,12 +444,28 @@ export function useUserOpUsageAggregate(args: {
       "all",
     ),
     queryFn: async () => {
-      return getUserOpUsage({
+      const userOpStats: UserOpStats[] = await getUserOpUsage({
         clientId,
         from,
         to,
         period: "all",
       });
+
+      // Aggregate stats across wallet types
+      return userOpStats.reduce(
+        (acc, curr) => {
+          acc.successful += curr.successful;
+          acc.failed += curr.failed;
+          acc.sponsoredUsd += curr.sponsoredUsd;
+          return acc;
+        },
+        {
+          date: (from || new Date()).toISOString(),
+          successful: 0,
+          failed: 0,
+          sponsoredUsd: 0,
+        },
+      );
     },
     enabled: !!clientId && !!user?.address && isLoggedIn,
   });

apps/dashboard/src/app/(dashboard)/dashboard/connect/account-abstraction/[clientId]/page.tsx

@@ -44,7 +44,7 @@ export default async function Page(props: {
   );
 
   return (
-    <div className="flex flex-col gap-10">
+    <div className="flex flex-col gap-6">
       <div className="flex flex-col content-start justify-between gap-4 lg:flex-row">
         <PageHeader />
 
@@ -68,7 +68,9 @@ export default async function Page(props: {
       <SmartWallets
         apiKeyServices={apiKey.services || []}
         trackingCategory="smart-wallet"
-        defaultTab={props.searchParams.tab === "1" ? 1 : 0}
+        tab={props.searchParams.tab}
+        smartWalletsLayoutSlug={`/dashboard/connect/account-abstraction/${clientId}`}
+        clientId={apiKey.key}
       />
 
       <ConnectSDKCard

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/account-abstraction/AccountAbstractionPage.tsx

@@ -10,10 +10,10 @@ import {
 } from "@3rdweb-sdk/react/hooks/useApi";
 import { useLoggedInUser } from "@3rdweb-sdk/react/hooks/useLoggedInUser";
 import { SmartWalletsBillingAlert } from "components/settings/ApiKeys/Alerts";
+import { SmartWallets } from "components/smart-wallets";
 import { CircleAlertIcon } from "lucide-react";
 import { useMemo } from "react";
 import { useActiveWalletChain } from "thirdweb/react";
-import { AccountFactories } from "../../../../../../components/smart-wallets/AccountFactories";
 import { AAFooterSection } from "./AAFooterSection";
 import { isOpChainId } from "./isOpChain";
 
@@ -22,7 +22,11 @@ const TRACKING_CATEGORY = "smart-wallet";
 // TODO - the factories shown on this page is not project specific, need to revamp this page
 
 export function AccountAbstractionPage(props: {
+  projectSlug: string;
+  teamSlug: string;
+  projectKey: string;
   apiKeyServices: ApiKeyService[];
+  tab?: string;
 }) {
   const { apiKeyServices } = props;
   const looggedInUserQuery = useLoggedInUser();
@@ -48,7 +52,6 @@ export function AccountAbstractionPage(props: {
       <h1 className="mb-1 font-semibold text-2xl tracking-tight lg:text-3xl">
         Account Abstraction
       </h1>
-
       <p className="text-muted-foreground text-sm">
         Easily integrate Account abstraction (ERC-4337) compliant smart accounts
         into your apps.{" "}
@@ -62,9 +65,7 @@ export function AccountAbstractionPage(props: {
           View Documentation
         </TrackedLinkTW>
       </p>
-
       <div className="h-6" />
-
       {looggedInUserQuery.isPending ? (
         <div className="flex h-[400px] items-center justify-center rounded-lg border border-border">
           <Spinner className="size-14" />
@@ -89,10 +90,15 @@ export function AccountAbstractionPage(props: {
             )
           )}
 
-          <AccountFactories trackingCategory={TRACKING_CATEGORY} />
+          <SmartWallets
+            smartWalletsLayoutSlug={`/team/${props.teamSlug}/${props.projectSlug}/connect/account-abstraction`}
+            apiKeyServices={apiKeyServices}
+            trackingCategory={TRACKING_CATEGORY}
+            clientId={props.projectKey}
+            tab={props.tab}
+          />
         </div>
       )}
-
       <div className="h-14" />
       <AAFooterSection trackingCategory={TRACKING_CATEGORY} />
     </div>

apps/dashboard/src/app/team/[team_slug]/[project_slug]/connect/account-abstraction/page.tsx

@@ -6,6 +6,7 @@ import { AccountAbstractionPage } from "./AccountAbstractionPage";
 
 export default async function Page(props: {
   params: { team_slug: string; project_slug: string };
+  searchParams: { tab?: string };
 }) {
   const { team_slug, project_slug } = props.params;
   const project = await getProject(team_slug, project_slug);
@@ -22,7 +23,13 @@ export default async function Page(props: {
 
   return (
     <ChakraProviderSetup>
-      <AccountAbstractionPage apiKeyServices={apiKey.services || []} />
+      <AccountAbstractionPage
+        projectSlug={project.slug}
+        teamSlug={team_slug}
+        projectKey={project.publishableKey}
+        apiKeyServices={apiKey.services || []}
+        tab={props.searchParams.tab}
+      />
     </ChakraProviderSetup>
   );
 }

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

@@ -1,32 +1,29 @@
 "use client";
-import { DatePickerWithRange } from "@/components/ui/DatePickerWithRange";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
 import {
   useUserOpUsageAggregate,
-  useUserOpUsagePeriod,
   useWalletUsageAggregate,
   useWalletUsagePeriod,
 } from "@3rdweb-sdk/react/hooks/useApi";
-import { differenceInDays, format, subDays } from "date-fns";
+import {
+  DateRangeSelector,
+  type Range,
+  getLastNDaysRange,
+} from "components/analytics/date-range-selector";
+import { IntervalSelector } from "components/analytics/interval-selector";
+import { differenceInDays } from "date-fns";
 import { useState } from "react";
 import { ConnectAnalyticsDashboardUI } from "./ConnectAnalyticsDashboardUI";
 
 export function ConnectAnalyticsDashboard(props: {
   clientId: string;
+  connectLayoutSlug: string;
 }) {
   const [range, setRange] = useState<Range>(() =>
     getLastNDaysRange("last-120"),
   );
 
   // use date-fns to calculate the number of days in the range
   const daysInRange = differenceInDays(range.to, range.from);
-
   const [intervalType, setIntervalType] = useState<"day" | "week">(
     daysInRange > 30 ? "week" : "day",
   );
@@ -44,17 +41,8 @@ export function ConnectAnalyticsDashboard(props: {
     to: range.to,
   });
 
-  const userOpUsageQuery = useUserOpUsagePeriod({
-    clientId: props.clientId,
-    from: range.from,
-    to: range.to,
-    period: intervalType,
-  });
-
-  const userOpUsageAggregateQuery = useUserOpUsageAggregate({
+  const userOpAggregateQuery = useUserOpUsageAggregate({
     clientId: props.clientId,
-    from: range.from,
-    to: range.to,
   });
 
   return (
@@ -77,142 +65,12 @@ export function ConnectAnalyticsDashboard(props: {
       <ConnectAnalyticsDashboardUI
         walletUsage={walletUsageQuery.data || []}
         aggregateWalletUsage={walletUsageAggregateQuery.data || []}
-        userOpUsage={userOpUsageQuery.data || []}
-        aggregateUserOpUsage={userOpUsageAggregateQuery.data || []}
+        aggregateUserOpUsageQuery={userOpAggregateQuery.data}
+        connectLayoutSlug={props.connectLayoutSlug}
         isPending={
           walletUsageQuery.isPending || walletUsageAggregateQuery.isPending
         }
       />
     </div>
   );
 }
-
-const durationPresets = [
-  {
-    name: "Last 7 Days",
-    id: "last-7",
-    days: 7,
-  },
-  {
-    name: "Last 30 Days",
-    id: "last-30",
-    days: 30,
-  },
-  {
-    name: "Last 60 Days",
-    id: "last-60",
-    days: 60,
-  },
-  {
-    name: "Last 120 Days",
-    id: "last-120",
-    days: 120,
-  },
-] as const;
-
-type DurationId = (typeof durationPresets)[number]["id"];
-
-type Range = {
-  type: DurationId | "custom";
-  label?: string;
-  from: Date;
-  to: Date;
-};
-
-function getLastNDaysRange(id: DurationId) {
-  const durationInfo = durationPresets.find((preset) => preset.id === id);
-  if (!durationInfo) {
-    throw new Error("Invalid duration id");
-  }
-
-  const todayDate = new Date();
-
-  const value: Range = {
-    type: id,
-    from: subDays(todayDate, durationInfo.days),
-    to: todayDate,
-    label: durationInfo.name,
-  };
-
-  return value;
-}
-
-function DateRangeSelector(props: {
-  range: Range;
-  setRange: (range: Range) => void;
-}) {
-  const { range, setRange } = props;
-
-  return (
-    <DatePickerWithRange
-      from={range.from}
-      to={range.to}
-      setFrom={(from) =>
-        setRange({
-          from,
-          to: range.to,
-          type: "custom",
-        })
-      }
-      setTo={(to) =>
-        setRange({
-          from: range.from,
-          to,
-          type: "custom",
-        })
-      }
-      header={
-        <div className="mb-2 border-border border-b p-4">
-          <Select
-            value={range.type}
-            onValueChange={(id: DurationId) => {
-              setRange(getLastNDaysRange(id));
-            }}
-          >
-            <SelectTrigger className="flex bg-transparent">
-              <SelectValue placeholder="Select" />
-            </SelectTrigger>
-            <SelectContent position="popper">
-              {durationPresets.map((preset) => (
-                <SelectItem key={preset.id} value={preset.id}>
-                  {preset.name}
-                </SelectItem>
-              ))}
-
-              {range.type === "custom" && (
-                <SelectItem value="custom">
-                  {format(range.from, "LLL dd, y")} -{" "}
-                  {format(range.to, "LLL dd, y")}
-                </SelectItem>
-              )}
-            </SelectContent>
-          </Select>
-        </div>
-      }
-      labelOverride={range.label}
-      className="w-auto"
-    />
-  );
-}
-
-function IntervalSelector(props: {
-  intervalType: "day" | "week";
-  setIntervalType: (intervalType: "day" | "week") => void;
-}) {
-  return (
-    <Select
-      value={props.intervalType}
-      onValueChange={(value: "day" | "week") => {
-        props.setIntervalType(value);
-      }}
-    >
-      <SelectTrigger className="w-auto hover:bg-muted">
-        <SelectValue placeholder="Select" />
-      </SelectTrigger>
-      <SelectContent position="popper">
-        <SelectItem value="week"> Weekly </SelectItem>
-        <SelectItem value="day"> Daily</SelectItem>
-      </SelectContent>
-    </Select>
-  );
-}