2025 wrapped

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

@@ -702,3 +702,21 @@ export function reportTokenRowClicked(params: {
 }) {
   posthog.capture("token row clicked", params);
 }
+
+/**
+ * ### Why do we need to report this event?
+ * - To track engagement with the year-in-review/rewind feature
+ * - To measure how many users view their yearly stats
+ * - To understand the impact of this marketing feature
+ *
+ * ### Who is responsible for this event?
+ * @thirdweb
+ */
+export function reportRewindViewed(properties: {
+  year: number;
+  totalRpcRequests: number;
+  totalWalletConnections: number;
+  totalMainnetSponsoredTransactions: number;
+}) {
+  posthog.capture("rewind viewed", properties);
+}

apps/dashboard/src/@/api/rewind/get-year-in-review.ts

@@ -0,0 +1,166 @@
+import "server-only";
+import {
+  getAggregateUserOpUsage,
+  getEOAAndInAppWalletConnections,
+  getRpcUsageByType,
+} from "@/api/analytics";
+
+export type YearInReviewStats = {
+  totalRpcRequests: number;
+  totalWalletConnections: number;
+  totalMainnetSponsoredTransactions: number;
+  year: number;
+};
+
+/**
+ * Get year-in-review statistics for the current user across all their teams
+ * Hardcoded to 2025 (Jan 1, 2025 - Dec 31, 2025)
+ */
+export async function getYearInReview(
+  authToken: string,
+  teamIds: string[],
+): Promise<YearInReviewStats> {
+  const year = 2025;
+
+  if (!authToken || teamIds.length === 0) {
+    return {
+      totalRpcRequests: 0,
+      totalWalletConnections: 0,
+      totalMainnetSponsoredTransactions: 0,
+      year,
+    };
+  }
+
+  // Hardcoded to 2025: Jan 1, 2025 - Dec 31, 2025
+  const yearStart = new Date(2025, 0, 1);
+  const yearEnd = new Date(2025, 11, 31, 23, 59, 59, 999);
+
+  // Fetch all data in parallel across all teams
+  const [rpcRequests, walletConnections, sponsoredTxs] = await Promise.all([
+    // Get total RPC requests across all teams
+    getTotalRpcRequests(teamIds, authToken, yearStart, yearEnd),
+    // Get total wallet connections across all teams
+    getTotalWalletConnections(teamIds, authToken, yearStart, yearEnd),
+    // Get total mainnet sponsored transactions across all teams
+    getTotalMainnetSponsoredTransactions(
+      teamIds,
+      authToken,
+      yearStart,
+      yearEnd,
+    ),
+  ]);
+
+  return {
+    totalRpcRequests: rpcRequests,
+    totalWalletConnections: walletConnections,
+    totalMainnetSponsoredTransactions: sponsoredTxs,
+    year,
+  };
+}
+
+async function getTotalRpcRequests(
+  teamIds: string[],
+  authToken: string,
+  from: Date,
+  to: Date,
+): Promise<number> {
+  try {
+    // Aggregate RPC requests across all teams using the same API as analytics
+    const requests = await Promise.all(
+      teamIds.map(async (teamId) => {
+        try {
+          // Use getRpcUsageByType without projectId to get team-level data
+          // This matches the format used in the analytics pages
+          const usageData = await getRpcUsageByType(
+            {
+              teamId,
+              from,
+              to,
+              period: "all",
+            },
+            authToken,
+          );
+
+          // Sum up all counts from the usage data
+          return usageData.reduce((sum, item) => sum + (item.count || 0), 0);
+        } catch (error) {
+          console.error(`Failed to fetch RPC usage for team ${teamId}:`, error);
+          return 0;
+        }
+      }),
+    );
+
+    return requests.reduce((sum, count) => sum + count, 0);
+  } catch (error) {
+    console.error("Failed to fetch RPC requests:", error);
+    return 0;
+  }
+}
+
+async function getTotalWalletConnections(
+  teamIds: string[],
+  authToken: string,
+  from: Date,
+  to: Date,
+): Promise<number> {
+  try {
+    // Aggregate wallet connections across all teams
+    const connections = await Promise.all(
+      teamIds.map(async (teamId) => {
+        const walletStats = await getEOAAndInAppWalletConnections(
+          {
+            teamId,
+            from,
+            to,
+            period: "all",
+          },
+          authToken,
+        );
+
+        // Sum unique wallets connected (for "onboarded users" metric)
+        // Note: With period: "all", this should be a single aggregated stat,
+        // but we sum in case there are multiple stats (e.g., by wallet type)
+        return walletStats.reduce(
+          (sum, stat) => sum + (stat.uniqueWalletsConnected || 0),
+          0,
+        );
+      }),
+    );
+
+    return connections.reduce((sum, count) => sum + count, 0);
+  } catch (error) {
+    console.error("Failed to fetch wallet connections:", error);
+    return 0;
+  }
+}
+
+async function getTotalMainnetSponsoredTransactions(
+  teamIds: string[],
+  authToken: string,
+  from: Date,
+  to: Date,
+): Promise<number> {
+  try {
+    // Aggregate mainnet sponsored transactions across all teams
+    // getAggregateUserOpUsage filters out testnets automatically
+    const transactions = await Promise.all(
+      teamIds.map(async (teamId) => {
+        const aggregateStats = await getAggregateUserOpUsage(
+          {
+            teamId,
+            from,
+            to,
+          },
+          authToken,
+        );
+
+        return aggregateStats.successful || 0;
+      }),
+    );
+
+    return transactions.reduce((sum, count) => sum + count, 0);
+  } catch (error) {
+    console.error("Failed to fetch mainnet sponsored transactions:", error);
+    return 0;
+  }
+}

apps/dashboard/src/app/(app)/account/components/AccountHeaderUI.tsx

@@ -11,6 +11,7 @@ import { MobileBurgerMenuButton } from "../../components/MobileBurgerMenuButton"
 import { ThirdwebMiniLogo } from "../../components/ThirdwebMiniLogo";
 import { TeamAndProjectSelectorPopoverButton } from "../../team/components/TeamHeader/TeamAndProjectSelectorPopoverButton";
 import { TeamSelectorMobileMenuButton } from "../../team/components/TeamHeader/TeamSelectorMobileMenuButton";
+import { RewindBadge } from "./RewindBadge";
 
 export type AccountHeaderCompProps = {
   className?: string;
@@ -36,6 +37,7 @@ export function AccountHeaderDesktopUI(props: AccountHeaderCompProps) {
         <Link href="/team">
           <ThirdwebMiniLogo className="h-5" />
         </Link>
+        <RewindBadge />
 
         <SlashSeparator />
 

apps/dashboard/src/app/(app)/account/components/RewindBadge.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import { ChevronsLeftIcon } from "lucide-react";
+import { useState } from "react";
+import { cn } from "@/lib/utils";
+import { RewindModal } from "../rewind/RewindModal";
+
+export function RewindBadge({ className }: { className?: string }) {
+  const [open, setOpen] = useState(false);
+  const year = 2025; // Hardcoded to 2025
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        className={cn(
+          "inline-flex items-center gap-1.5 rounded-md bg-gradient-to-r from-blue-500 to-purple-500 px-2.5 py-1 text-xs font-semibold text-white transition-opacity hover:opacity-90",
+          className,
+        )}
+      >
+        <ChevronsLeftIcon className="h-3 w-3" />
+        <span>{year.toString().slice(-2)}</span>
+      </button>
+      <RewindModal open={open} onOpenChange={setOpen} />
+    </>
+  );
+}

apps/dashboard/src/app/(app)/account/layout.tsx

@@ -78,6 +78,10 @@ async function HeaderAndNav(props: {
             name: "Overview",
             path: "/account",
           },
+          {
+            name: "Rewind",
+            path: "/account/rewind",
+          },
           {
             name: "Settings",
             path: "/account/settings",

apps/dashboard/src/app/(app)/account/page.tsx

@@ -6,6 +6,7 @@ import { getMemberByAccountId } from "@/api/team/team-members";
 import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
 import { loginRedirect } from "@/utils/redirects";
 import { AccountTeamsUI } from "./overview/AccountTeamsUI";
+import { RewindModalClient } from "./rewind/RewindModalClient";
 
 export default async function Page() {
   const [authToken, account, teams] = await Promise.all([
@@ -49,6 +50,8 @@ export default async function Page() {
       <div className="container flex max-w-[950px] grow flex-col py-8">
         <AccountTeamsUI client={client} teamsWithRole={teamsWithRole} />
       </div>
+
+      <RewindModalClient />
     </div>
   );
 }