Refactor dedicated relayer to use new fleet analytics API

Replaces legacy analytics and fleet API calls with new endpoints for fleet transactions and summary. Updates the active state UI to show paginated transaction tables, summary stats, and chain filtering. Refactors types and hooks to match new API responses, removes unused code, and updates documentation links and UI copy for clarity.

Author: 0xFirekeeper

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/components/active-state.tsx

@@ -70,7 +70,7 @@ export function DedicatedRelayerEmptyState(
 
           <Button asChild size="lg" variant="outline">
             <Link
-              href="https://portal.thirdweb.com/transactions/relayer"
+              href="https://portal.thirdweb.com/wallets/server"
               rel="noopener noreferrer"
               target="_blank"
             >

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/components/empty-state.tsx

@@ -1,5 +1,4 @@
 export { DedicatedRelayerActiveState } from "./active-state";
 export { DedicatedRelayerEmptyState } from "./empty-state";
-export { DedicatedRelayerPageClient } from "./page-client";
 export { DedicatedRelayerPendingState } from "./pending-state";
 export { TierSelection } from "./tier-selection";

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/components/index.ts

@@ -2,26 +2,21 @@
 
 import { useState } from "react";
 import type { ThirdwebClient } from "thirdweb";
-import type { Project } from "@/api/project/projects";
-import type { Fleet, FleetExecutor, FleetStatus } from "../types";
+import type { Fleet, FleetStatus } from "../types";
 import { DedicatedRelayerActiveState } from "./active-state";
 import { DedicatedRelayerEmptyState } from "./empty-state";
 import { DedicatedRelayerPendingState } from "./pending-state";
 import type { RelayerTier } from "./tier-selection";
 
-// Mock executor address for demo
-const MOCK_EXECUTOR_ADDRESS = "0xE0F28D9d95143858Be492BDf3abBCA746d0d2272";
-
-// Chain IDs
-const BASE_MAINNET = 8453;
-const BASE_SEPOLIA = 84532;
-
 type DedicatedRelayerPageClientProps = {
-  project: Project;
-  authToken: string;
+  teamId: string;
+  projectId: string;
   teamSlug: string;
   projectSlug: string;
   client: ThirdwebClient;
+  fleetId: string;
+  from: string;
+  to: string;
   initialFleet: Fleet | null;
 };
 
@@ -33,51 +28,39 @@ export function DedicatedRelayerPageClient(
     getInitialStatus(props.initialFleet),
   );
 
-  const handlePurchaseTier = async (tier: RelayerTier) => {
-    // Simulate API call delay
-    await new Promise((resolve) => setTimeout(resolve, 1500));
-
-    // Create mock fleet based on tier (pending state - no executors yet)
+  // TODO-FLEET: Implement purchase flow
+  // 1. Call Stripe checkout API to create a checkout session for the selected tier
+  // 2. Redirect user to Stripe checkout
+  // 3. On success callback, call API server to provision fleet
+  // 4. API server should:
+  //    - Create fleet record in DB
+  //    - Call bundler service to provision executor wallets
+  //    - Update ProjectBundlerService with fleet config
+  // 5. Refetch fleet status and update UI
+  const handlePurchaseTier = async (_tier: RelayerTier) => {
+    // TODO-FLEET: Replace with actual Stripe + API server integration
+    // For now, simulate purchase by transitioning to pending-setup
     const mockFleet: Fleet = {
-      id: `fleet-${Date.now()}`,
-      tier,
-      chainIds: [BASE_MAINNET, BASE_SEPOLIA],
-      executors: [], // Empty initially - pending setup
-      createdAt: new Date().toISOString(),
-      updatedAt: new Date().toISOString(),
+      id: props.fleetId,
+      chainIds: [],
+      executors: [],
     };
-
     setFleet(mockFleet);
     setFleetStatus("pending-setup");
   };
 
+  // TODO-FLEET: This is a dev helper to skip purchase - remove in production
   const handleSkipSetup = () => {
-    if (!fleet) return;
-
-    const executorCount = fleet.tier === "starter" ? 1 : 10;
-    const executors: FleetExecutor[] = [];
-
-    for (let i = 0; i < executorCount; i++) {
-      executors.push({
-        address: MOCK_EXECUTOR_ADDRESS,
-        chainId: BASE_MAINNET,
-      });
-      executors.push({
-        address: MOCK_EXECUTOR_ADDRESS,
-        chainId: BASE_SEPOLIA,
+    // TODO-FLEET: Replace with actual setup completion flow
+    // For now, simulate setup completion by transitioning to active with mock executors
+    if (fleet) {
+      setFleet({
+        ...fleet,
+        executors: ["0x1234567890123456789012345678901234567890"],
+        chainIds: [1, 137],
       });
+      setFleetStatus("active");
     }
-
-    setFleet((prev) =>
-      prev
-        ? {
-            ...prev,
-            executors,
-            updatedAt: new Date().toISOString(),
-          }
-        : null,
-    );
-    setFleetStatus("active");
   };
 
   return (
@@ -99,11 +82,12 @@ export function DedicatedRelayerPageClient(
 
       {fleetStatus === "active" && fleet && (
         <DedicatedRelayerActiveState
-          authToken={props.authToken}
-          client={props.client}
           fleet={fleet}
-          project={props.project}
-          teamSlug={props.teamSlug}
+          teamId={props.teamId}
+          fleetId={props.fleetId}
+          client={props.client}
+          from={props.from}
+          to={props.to}
         />
       )}
     </div>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/components/page-client.tsx

@@ -83,7 +83,7 @@ export function DedicatedRelayerPendingState(
             <SetupStep
               completed={true}
               number={1}
-              title="Stripe subscription activated"
+              title="Subscription activated"
             />
             <SetupStep
               completed={false}

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/components/pending-state.tsx

@@ -37,23 +37,17 @@ export default async function Layout(props: {
         icon: WalletProductIcon,
         title: "Dedicated Relayer",
         description:
-          "Your own executor fleet for automatic transaction relaying at scale",
+          "Your own executor fleet for guaranteed transaction throughput",
         actions: null,
         client,
         links: [
           {
             type: "docs",
-            href: "https://portal.thirdweb.com/transactions/relayer",
+            href: "https://portal.thirdweb.com/wallets/server",
           },
         ],
       }}
-      tabs={[
-        {
-          name: "Overview",
-          path: `${basePath}`,
-          exactMatch: true,
-        },
-      ]}
+      tabs={[]}
     >
       {props.children}
     </ProjectPage>

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/layout.tsx

@@ -1,91 +1,75 @@
-import { NEXT_PUBLIC_THIRDWEB_API_HOST } from "@/constants/public-envs";
-import type { Fleet, FleetAnalytics } from "../types";
+"use server";
 
-type GetFleetParams = {
+import { analyticsServerProxy } from "@/actions/proxies";
+import type { FleetTransaction, FleetTransactionsSummary } from "../types";
+
+type GetFleetTransactionsParams = {
   teamId: string;
-  projectId: string;
-  authToken: string;
+  fleetId: string;
+  from: string;
+  to: string;
+  limit: number;
+  offset: number;
+  chainId?: number;
 };
 
 /**
- * Fetches the fleet data for a project.
- * Returns null if no fleet exists (dev hasn't purchased).
+ * Fetches paginated fleet transactions from the analytics service.
  */
-export async function getFleet(params: GetFleetParams): Promise<Fleet | null> {
-  try {
-    const response = await fetch(
-      `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${params.teamId}/projects/${params.projectId}/fleet`,
-      {
-        headers: {
-          Authorization: `Bearer ${params.authToken}`,
-          "Content-Type": "application/json",
-        },
-        method: "GET",
-      },
-    );
-
-    if (response.status === 404) {
-      // Fleet not purchased yet
-      return null;
-    }
+export async function getFleetTransactions(params: GetFleetTransactionsParams) {
+  const res = await analyticsServerProxy<{
+    data: FleetTransaction[];
+    meta: { total: number };
+  }>({
+    method: "GET",
+    pathname: "/v2/bundler/fleet-transactions",
+    searchParams: {
+      teamId: params.teamId,
+      fleetId: params.fleetId,
+      from: params.from,
+      to: params.to,
+      limit: params.limit.toString(),
+      offset: params.offset.toString(),
+      ...(params.chainId && { chainId: params.chainId.toString() }),
+    },
+  });
 
-    if (!response.ok) {
-      console.error("Error fetching fleet:", response.status);
-      return null;
-    }
-
-    const data = await response.json();
-    return data.result as Fleet;
-  } catch (error) {
-    console.error("Error fetching fleet:", error);
-    return null;
+  if (!res.ok) {
+    throw new Error(res.error);
   }
+
+  return res.data;
 }
 
-export type GetFleetAnalyticsParams = {
+type GetFleetTransactionsSummaryParams = {
   teamId: string;
-  projectId: string;
-  authToken: string;
-  startDate?: string;
-  endDate?: string;
+  fleetId: string;
+  from: string;
+  to: string;
 };
 
 /**
- * Fetches analytics for a fleet.
- * Only call this when fleet has executors (active state).
+ * Fetches fleet transactions summary from the analytics service.
  */
-export async function getFleetAnalytics(
-  params: GetFleetAnalyticsParams,
-): Promise<FleetAnalytics | null> {
-  try {
-    const url = new URL(
-      `${NEXT_PUBLIC_THIRDWEB_API_HOST}/v1/teams/${params.teamId}/projects/${params.projectId}/fleet/analytics`,
-    );
+export async function getFleetTransactionsSummary(
+  params: GetFleetTransactionsSummaryParams,
+) {
+  const res = await analyticsServerProxy<{
+    data: FleetTransactionsSummary;
+  }>({
+    method: "GET",
+    pathname: "/v2/bundler/fleet-transactions/summary",
+    searchParams: {
+      teamId: params.teamId,
+      fleetId: params.fleetId,
+      from: params.from,
+      to: params.to,
+    },
+  });
 
-    if (params.startDate) {
-      url.searchParams.set("startDate", params.startDate);
-    }
-    if (params.endDate) {
-      url.searchParams.set("endDate", params.endDate);
-    }
-
-    const response = await fetch(url.toString(), {
-      headers: {
-        Authorization: `Bearer ${params.authToken}`,
-        "Content-Type": "application/json",
-      },
-      method: "GET",
-    });
-
-    if (!response.ok) {
-      console.error("Error fetching fleet analytics:", response.status);
-      return null;
-    }
-
-    const data = await response.json();
-    return data.result as FleetAnalytics;
-  } catch (error) {
-    console.error("Error fetching fleet analytics:", error);
-    return null;
+  if (!res.ok) {
+    throw new Error(res.error);
   }
+
+  return res.data;
 }

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/lib/api.ts

@@ -1,21 +1,46 @@
 "use client";
 
-import { useQuery } from "@tanstack/react-query";
-import { type GetFleetAnalyticsParams, getFleetAnalytics } from "./api";
+import { keepPreviousData, useQuery } from "@tanstack/react-query";
+import { getFleetTransactions, getFleetTransactionsSummary } from "./api";
 
-export function useFleetAnalytics(
-  params: GetFleetAnalyticsParams & { enabled?: boolean },
+type UseFleetTransactionsParams = {
+  teamId: string;
+  fleetId: string;
+  from: string;
+  to: string;
+  limit: number;
+  offset: number;
+  chainId?: number;
+};
+
+/**
+ * React Query hook for fetching paginated fleet transactions.
+ */
+export function useFleetTransactions(params: UseFleetTransactionsParams) {
+  return useQuery({
+    queryKey: ["fleet-transactions", params],
+    queryFn: () => getFleetTransactions(params),
+    placeholderData: keepPreviousData,
+    refetchOnWindowFocus: false,
+  });
+}
+
+type UseFleetTransactionsSummaryParams = {
+  teamId: string;
+  fleetId: string;
+  from: string;
+  to: string;
+};
+
+/**
+ * React Query hook for fetching fleet transactions summary.
+ */
+export function useFleetTransactionsSummary(
+  params: UseFleetTransactionsSummaryParams,
 ) {
   return useQuery({
-    queryKey: [
-      "fleet-analytics",
-      params.teamId,
-      params.projectId,
-      params.startDate,
-      params.endDate,
-    ],
-    queryFn: () => getFleetAnalytics(params),
+    queryKey: ["fleet-transactions-summary", params],
+    queryFn: () => getFleetTransactionsSummary(params),
     refetchOnWindowFocus: false,
-    enabled: params.enabled ?? true,
   });
 }