+ {/* Summary Stats */}
+
+ );
+}
+
+function StatCard(props: {
+ title: string;
+ value: string;
+ isLoading?: boolean;
+}) {
+ return (
+
+
+
+ {/* Executors Info */}
+
+
+
+ {/* Transactions Table */}
+
+
+ + Fleet Executors +
+
+
+
+ {fleet.executors.map((address) => (
+
+
+
+ ))}
+
+
+
+
+
+
+ {!transactionsQuery.isPending &&
+ (transactionsQuery.isError ? (
+
+
+
+
+ Fleet Transactions
+
+ {
+ setChainIdFilter(chainId);
+ setPage(1);
+ }}
+ client={client}
+ />
+
+
+
+ ) : transactionsQuery.data?.data.length === 0 ? (
+
+
+
+
+ + Failed to load transactions +
+
+
+ ) : null)}
+
+ {totalPages > 1 && (
+
+
+
+
+ + No transactions yet +
+
+
+ )}
+
+
+ );
+}
+
+function TransactionRow(props: {
+ transaction: FleetTransaction;
+ client: ThirdwebClient;
+}) {
+ const { transaction, client } = props;
+ const utcTimestamp = transaction.timestamp.endsWith("Z")
+ ? transaction.timestamp
+ : `${transaction.timestamp}Z`;
+
+ return (
+ {props.title}
+ {props.isLoading ? ( +{props.value}
+ )} +
+
+ );
+}
+
+function TransactionFeeCell(props: { usdValue: number }) {
+ return (
+
+ ${props.usdValue < 0.01 ? "<0.01" : props.usdValue.toFixed(2)}
+
+ );
+}
+
+function ChainFilter(props: {
+ chainId: number | undefined;
+ setChainId: (chainId: number | undefined) => void;
+ client: ThirdwebClient;
+}) {
+ return (
+
+ props.setChainId(chainId)}
+ popoverContentClassName="z-[10001]"
+ align="end"
+ placeholder="All Chains"
+ className="min-w-[150px]"
+ />
+
+ );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/components/empty-state.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/components/empty-state.tsx
new file mode 100644
index 00000000000..af1f07381a1
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/components/empty-state.tsx
@@ -0,0 +1,177 @@
+"use client";
+
+import { Img } from "@workspace/ui/components/img";
+import { useTheme } from "next-themes";
+import { useState } from "react";
+import { toast } from "sonner";
+import type { ThirdwebClient } from "thirdweb";
+import { MultiNetworkSelector } from "@/components/blocks/NetworkSelectors";
+import { Button } from "@/components/ui/button";
+import {
+ Dialog,
+ DialogContent,
+ DialogFooter,
+ DialogHeader,
+ DialogTitle,
+} from "@/components/ui/dialog";
+import { cn } from "@/lib/utils";
+import type { DedicatedRelayerSKU } from "@/types/billing";
+import { RELAYER_SUPPORTED_CHAINS } from "../constants";
+import { PlanSection } from "./tier-selection";
+
+type DedicatedRelayerEmptyStateProps = {
+ teamSlug: string;
+ projectSlug: string;
+ onPurchaseTier: (
+ tier: DedicatedRelayerSKU,
+ chainIds: number[],
+ ) => Promise
+
+ );
+}
+
+function FeatureSection() {
+ return (
+
+
+ );
+}
+
+function FeatureCard(props: {
+ title: string;
+ description: string;
+ className?: string;
+ images: {
+ darkSrc: string;
+ lightSrc: string;
+ };
+}) {
+ const { resolvedTheme } = useTheme();
+ const imageSrc =
+ resolvedTheme === "light" ? props.images.lightSrc : props.images.darkSrc;
+
+ return (
+
+ 
+
+ );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/components/page-client.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/components/page-client.tsx
new file mode 100644
index 00000000000..4e90c38aa65
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/components/page-client.tsx
@@ -0,0 +1,131 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import type { ThirdwebClient } from "thirdweb";
+import type { DedicatedRelayerSKU } from "@/types/billing";
+import { getAbsoluteUrl } from "@/utils/vercel";
+import { useFleetStatus, useFleetTransactionsSummary } from "../lib/hooks";
+import type { Fleet, FleetStatus } from "../types";
+import { DedicatedRelayerActiveState } from "./active-state";
+import { DedicatedRelayerEmptyState } from "./empty-state";
+import { DedicatedRelayerPendingState } from "./pending-state";
+
+type DedicatedRelayerPageClientProps = {
+ teamId: string;
+ projectId: string;
+ teamSlug: string;
+ projectSlug: string;
+ client: ThirdwebClient;
+ fleetId: string;
+ from: string;
+ to: string;
+ initialFleet: Fleet | null;
+};
+
+export function DedicatedRelayerPageClient(
+ props: DedicatedRelayerPageClientProps,
+) {
+ const [fleet, _setFleet] = useState
+
+ + {props.title} +
++ {props.description} +
+
+ {fleetStatus === "not-purchased" && (
+
+ );
+}
+
+function getInitialStatus(fleet: Fleet | null): FleetStatus {
+ if (!fleet) {
+ return "not-purchased";
+ }
+ if (fleet.executors.length === 0) {
+ return "pending-setup";
+ }
+ return "active";
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/components/pending-state.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/components/pending-state.tsx
new file mode 100644
index 00000000000..2e9cefdb052
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/components/pending-state.tsx
@@ -0,0 +1,201 @@
+"use client";
+
+import { ClockIcon, Loader2Icon } from "lucide-react";
+import { CodeClient } from "@/components/ui/code/code.client";
+import { useV5DashboardChain } from "@/hooks/chains/v5-adapter";
+import { cn } from "@/lib/utils";
+import type { Fleet } from "../types";
+
+type DedicatedRelayerPendingStateProps = {
+ fleet: Fleet;
+ hasTransactions?: boolean;
+ className?: string;
+};
+
+/**
+ * Pending state shown when fleet is purchased but executors are not yet set up.
+ * Shows the requested chain IDs and a "setting up" status.
+ */
+export function DedicatedRelayerPendingState(
+ props: DedicatedRelayerPendingStateProps,
+) {
+ const { fleet, hasTransactions } = props;
+ const hasExecutors = fleet.executors.length > 0;
+
+ return (
+
+ {/* Status Banner */}
+
+ );
+}
+
+function ChainBadge(props: { chainId: number }) {
+ const chain = useV5DashboardChain(props.chainId);
+ const label = chain?.name ?? `Chain ${props.chainId}`;
+ return (
+
+ {label}
+
+ );
+}
+
+function SetupStep(props: {
+ number: number;
+ title: string;
+ completed: boolean;
+ inProgress?: boolean;
+}) {
+ return (
+
+
+
+ {/* Fleet Details Preview */}
+
+
+ + {hasExecutors + ? "Waiting for first transaction" + : "Setting up your dedicated relayer"} +
++ {hasExecutors + ? "Your dedicated relayer is ready. Waiting for the first transaction to appear." + : "Your relayer is being provisioned. This usually takes 48 to 72 hours."} +
+
+
+
+ {/* What to Expect */}
+
+
+
+ + Fleet Configuration +
+
+
+
+ {/* Requested Chains */}
+
+
+
+
+ {/* Status */}
+ + Requested Chains +
+
+ {fleet.chainIds.map((chainId) => (
+
+
+
+ + Status +
+
+
+
+
+
+ {/* Test Transaction Snippet */}
+ {hasExecutors && (
+
+
+
+ + What to Expect +
+
+
+ -
+
+
+ )}
+
+
+ + Send a Test Transaction +
+
+
+
+ You can send a test transaction using the thirdweb API. Replace{" "}
+
+ YOUR_SECRET_KEY
+ {" "}
+ with your actual secret key.
+
+ {props.inProgress ? (
+
+
+ {props.title}
+
+
+
+ );
+}
+
+function PlanCard(props: {
+ tier: TierConfig;
+ onSelect: () => void;
+ isLoading?: boolean;
+ isDisabled?: boolean;
+ className?: string;
+ isRecommended?: boolean;
+}) {
+ const { tier } = props;
+ const isEnterprise = tier.id === "product:dedicated_relayer_enterprise";
+
+ return (
+
+
+ Select a plan
+
+ {TIERS.map((tier, index) => (
+ props.onSelectTier(tier.id)}
+ className={
+ index !== 0
+ ? "border-t lg:border-t-0 lg:border-l border-dashed"
+ : ""
+ }
+ isRecommended={tier.isRecommended}
+ />
+ ))}
+
+
+
+ );
+}
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/constants.ts b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/constants.ts
new file mode 100644
index 00000000000..37bb552eac6
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/constants.ts
@@ -0,0 +1,72 @@
+export const RELAYER_SUPPORTED_CHAINS = [
+ // MAINNETS
+ 1, // ethereum mainnet
+ 100, // gnosis mainnet
+ 56, // bsc mainnet
+ 10, // optimism mainnet
+ 8453, // base mainnet
+ 57073, // ink mainnet
+ 130, // unichain mainnet
+ 7777777, // zora mainnet
+ 1868, // soneium mainnet
+ 34443, // mode mainnet
+ 534352, // scroll mainnet
+ 42161, // arbitrum mainnet
+ 80094, // berachain mainnet
+ 137, // polygon mainnet
+ 185, // Mint Mainnet mainnet
+ 747, // EVM on Flow mainnet
+ 1135, // Lisk mainnet
+ 2020, // Ronin mainnet
+ 5330, // Superseed mainnet
+ 7897, // Arena-Z mainnet
+ 42170, // Arbitrum Nova mainnet
+ 60808, // BOB mainnet
+ 747474, // Katana mainnet
+ 1628, // T-REX mainnet
+ 466, // Appchain mainnet
+ 80888, // Onyx mainnet
+ 42220, // Celo mainnet
+ 1329, // Sei mainnet
+ 42793, // Etherlink mainnet
+ 143, // Monad mainnet
+ 252, // Fraxtal mainnet
+ // TESTNETS
+ 11155111, // sepolia testnet
+ 10200, // gnosis chiado testnet
+ 97, // bsc testnet
+ 11155420, // op sepolia testnet
+ 84532, // base sepolia testnet
+ 763373, // ink sepolia testnet
+ 1301, // unichain sepolia testnet
+ 999999999, // zora sepolia testnet
+ 1946, // soneium minato testnet
+ 919, // mode sepolia testnet
+ 534351, // scroll sepolia testnet
+ 421614, // arbitrum sepolia testnet
+ 80069, // berachain bepolia testnet
+ 9899, // Arena-Z Testnet testnet testnet
+ 1962, // T-Rex testnet testnet
+ 545, // EVM on Flow Testnet testnet
+ 1001, // Kaia Testnet Kairos testnet
+ 2021, // Saigon testnet testnet
+ 4202, // Lisk Sepolia Testnet testnet
+ 14853, // Humanode Testnet 5 Israfel testnet
+ 53302, // Superseed Sepolia Testnet testnet
+ 59141, // Linea Sepolia testnet
+ 129399, // Tatara testnet
+ 808813, // BOB Sepolia testnet
+ 1992, // Sanko Testnet testnet
+ 2030232745, // Lumia Beam Testnet testnet
+ 11142220, // Celo Sepolia Testnet testnet
+ 4661, // Appchain Testnet
+ 1328, // Sei Testnet
+ 128123, // Etherlink Testnet
+ 123420001114, // Basecamp testnet
+ 5042002, // Arc Testnet (Circle USDC Native)
+ 127823, // Etherlink Shadownet Testnet
+ 10143, // Monad Testnet (MON)
+ 1417429182, // Zephyr Testnet
+ 42429, // Tempo Testnet
+ 2523, // Fraxtal Testnet testnet
+];
diff --git a/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/layout.tsx b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/layout.tsx
new file mode 100644
index 00000000000..93318436f87
--- /dev/null
+++ b/apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/layout.tsx
@@ -0,0 +1,55 @@
+import { redirect } from "next/navigation";
+import { getAuthToken } from "@/api/auth-token";
+import { getProject } from "@/api/project/projects";
+import { ProjectPage } from "@/components/blocks/project-page/project-page";
+import { getClientThirdwebClient } from "@/constants/thirdweb-client.client";
+import { WalletProductIcon } from "@/icons/WalletProductIcon";
+import { loginRedirect } from "@/utils/redirects";
+
+export default async function Layout(props: {
+ children: React.ReactNode;
+ params: Promise<{ team_slug: string; project_slug: string }>;
+}) {
+ const params = await props.params;
+ const basePath = `/team/${params.team_slug}/${params.project_slug}/wallets/dedicated-relayer`;
+
+ const [authToken, project] = await Promise.all([
+ getAuthToken(),
+ getProject(params.team_slug, params.project_slug),
+ ]);
+
+ if (!authToken) {
+ loginRedirect(basePath);
+ }
+
+ if (!project) {
+ redirect(`/team/${params.team_slug}`);
+ }
+
+ const client = getClientThirdwebClient({
+ jwt: authToken,
+ teamId: project.teamId,
+ });
+
+ return (
+
+
+
+
+
+
+
+
+
+ + {tier.name} +
+ {props.isRecommended && ( + + Recommended + + )} ++ {tier.description} +
+
+
+ {tier.price}
+
+ {tier.isPerMonth && (
+ / month
+ )}
+
+
+ Includes:
+ +-
+ {tier.features.map((feature) => (
+
-
+
+ {feature.label} +
+ ))}
+