relayer updates #8541

0xFirekeeper · 2025-12-11T22:19:21Z

PR-Codex overview

This PR focuses on updating the DedicatedRelayer components to improve clarity in messaging, adjust chain limits based on selected tiers, and enhance the user interface for better usability.

Detailed summary

Renamed requiredChains to maxChains in empty-state.tsx.
Updated text to indicate a maximum of chains for the dedicated relayer.
Adjusted button disable logic to reflect the new chain limits.
Added isCheckingActivity state in page-client.tsx.
Modified conditions for displaying DedicatedRelayerPendingState and DedicatedRelayerActiveState.
Updated tier descriptions and chain support numbers in tier-selection.tsx.
Enhanced layout and organization of active-state.tsx to separate Executors and Chains.
Simplified transaction hash display logic in active-state.tsx.
Improved formatting of transaction fee display in active-state.tsx.
Adjusted class names for better styling control in active-state.tsx.

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

Summary by CodeRabbit

Improvements
- Redesigned dedicated relayer configuration dashboard with enhanced two-panel layout for managing executors and chains.
- Updated tier descriptions and chain support limits for improved clarity.
- Enhanced transaction information display with improved formatting.
- Refined chain selection validation to allow flexible chain counts based on tier requirements.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

changeset-bot · 2025-12-11T22:19:25Z

⚠️ No Changeset found

Latest commit: b18ad00

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel · 2025-12-11T22:19:25Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
thirdweb-www	Ready	Preview	Comment	Dec 11, 2025 10:27pm

4 Skipped Deployments

Project	Deployment	Updated (UTC)
docs-v2	Skipped	Dec 11, 2025 10:27pm
nebula	Skipped	Dec 11, 2025 10:27pm
thirdweb_playground	Skipped	Dec 11, 2025 10:27pm
wallet-ui	Skipped	Dec 11, 2025 10:27pm

coderabbitai · 2025-12-11T22:19:39Z

Walkthrough

This PR updates the dedicated relayer UI components with layout restructuring, validation logic adjustments, and messaging refinements. Changes include a two-panel Executors/Chains layout, adjusted transaction cell formatting, relaxed chain selection validation, and generalized tier descriptions.

Changes

Cohort / File(s)	Summary
UI Layout & Formatting `apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/components/active-state.tsx`	Restructured Executors section into a two-panel layout (Executors + Chains grid), updated TransactionHashCell to always link to thirdweb URL, refined TransactionFeeCell formatting with tighter threshold (0.001), adjusted ChainFilter popover width, removed unused CopyTextButton import.
Validation & State Logic `empty-state.tsx`, `page-client.tsx`	Renamed chain limit from requiredChains to maxChains (1 for standard tier, 2 otherwise), updated purchase button validation to allow 1..maxChains chains instead of exact match, added isCheckingActivity state tracking and reworked active fleet status rendering logic to show pending only when no transactions and not checking activity.
Content & Messaging `tier-selection.tsx`	Generalized tier descriptions from transaction-volume-specific wording to scale-based messaging (e.g., "with moderate transaction volume" instead of "less than 10,000 transactions per day"), adjusted chain support feature lines (Standard: 2→1, Premium: 4→2), updated Custom tier description for global-scale applications.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

active-state.tsx may require extra attention due to UI restructuring and transaction cell logic changes (verify layout intent and thirdweb URL linking behavior)
Validation threshold changes in empty-state.tsx should be checked against product requirements for chain selection limits
State management addition in page-client.tsx requires confirmation that isCheckingActivity correctly reflects query pending state

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 14.29% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.
Title check	❓ Inconclusive	The title 'relayer updates' is vague and generic, lacking specificity about what updates were made to the relayer components.	Use a more descriptive title that highlights the main changes, such as 'Update DedicatedRelayer UI messaging, chain limits, and layouts' or similar.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Description check	✅ Passed	The description provides a detailed summary of all changes across multiple files, clearly explaining modifications to chain limits, UI messaging, state management, and component layouts.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch firekeeper/relayer-updates

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

codecov · 2025-12-11T22:21:55Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 54.67%. Comparing base (57ccadb) to head (b18ad00).
⚠️ Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #8541   +/-   ##
=======================================
  Coverage   54.67%   54.67%           
=======================================
  Files         921      921           
  Lines       61163    61163           
  Branches     4153     4153           
=======================================
  Hits        33439    33439           
  Misses      27622    27622           
  Partials      102      102

Flag	Coverage Δ
packages	`54.67% <ø> (ø)`

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

coderabbitai

Actionable comments posted: 0

🧹 Nitpick comments (4)

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

74-75: Chain cap logic and validation look correct; consider deriving maxChains from tier config

maxChains and the updated copy/disabled condition correctly allow 1..maxChains chains and keep enterprise routed to contact-us only. The behavior matches the tier labels (Standard = 1 chain, Premium = up to 2 chains). The only downside is the duplication of chain caps across this file and TIERS in tier-selection.tsx. If this is likely to evolve, consider deriving maxChains from a shared tier config (e.g., a maxChains field on TierConfig) so UI text and validation stay in sync automatically.

Also applies to: 93-93, 105-109

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

113-132: Two-panel Executors/Chains layout is sound; consider empty-state handling for clarity

The new configuration grid cleanly exposes executor addresses and fleet chains using existing building blocks (WalletAddress, ChainCell). This should make the active configuration much more discoverable. One possible polish: when fleet.executors or fleet.chainIds is empty (e.g., during transient states or misconfig), consider rendering a short “No executors configured yet” / “No chains configured yet” helper instead of just an empty area to make the state unambiguous.

Also applies to: 134-149

367-367: Fee formatting and chain filter width are reasonable; consider shared currency formatting later

Displaying < $0.001 for very small fees and $<value.toFixed(3)> otherwise is consistent and easy to scan, and the fixed popover width on the chain selector should stabilize the layout. Longer term, you might want to centralize currency formatting (e.g., using Intl.NumberFormat or a shared helper) so money display stays consistent across the dashboard.

Also applies to: 384-384

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

76-76: Activity gating logic for active fleets is consistent and avoids regressions to pending

The split into isCheckingActivity and hasTransactions with the two conditions:

pending-state when active && fleet && !hasTransactions && !isCheckingActivity

active-state when active && fleet && (hasTransactions || isCheckingActivity)

correctly gives you:

dashboard visible while the initial 120‑day activity check is running,

“pending” UI when that check completes with zero total tx,

and a stable “active” dashboard once any tx has ever occurred, independent of the user’s current date range.

The two branches are mutually exclusive, so you won’t double-render. If you want to make the intent even clearer to future readers, you could consider renaming isCheckingActivity to something like isInitialActivityCheckPending, but functionally this looks solid.

Also applies to: 121-142

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

Linear integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 57ccadb and b18ad00.

📒 Files selected for processing (4)

apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/components/active-state.tsx (4 hunks)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/components/empty-state.tsx (3 hunks)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/components/page-client.tsx (2 hunks)
apps/dashboard/src/app/(app)/team/[team_slug]/[project_slug]/(sidebar)/wallets/dedicated-relayer/components/tier-selection.tsx (3 hunks)

🧰 Additional context used

📓 Path-based instructions (10)

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each TypeScript file to one stateless, single-responsibility function for clarity
Re-use shared types from @/types or local types.ts barrels
Prefer type aliases over interface except for nominal shapes in TypeScript
Avoid any and unknown in TypeScript unless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial, Pick, etc.) in TypeScript

**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity and testability
Re-use shared types from @/types or local types.ts barrel exports
Prefer type aliases over interface except for nominal shapes
Avoid any and unknown unless unavoidable; narrow generics whenever possible
Choose composition over inheritance; leverage utility types (Partial, Pick, etc.)
Comment only ambiguous logic in TypeScript files; avoid restating TypeScript types and signatures in prose

Files:

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

apps/{dashboard,playground-web}/src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

apps/{dashboard,playground-web}/src/**/*.{ts,tsx}: Import UI component primitives from @/components/ui/* (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground
Use Tailwind CSS only – no inline styles or CSS modules in dashboard and playground
Use cn() from @/lib/utils for conditional Tailwind class merging
Use design system tokens for styling (backgrounds: bg-card, borders: border-border, muted text: text-muted-foreground)
Expose className prop on root element for component overrides

Files:

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

apps/dashboard/src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

apps/dashboard/src/**/*.{ts,tsx}: Use NavLink for internal navigation with automatic active states in dashboard
Start server component files with import "server-only"; in Next.js
Read cookies/headers with next/headers in server components
Access server-only environment variables in server components
Perform heavy data fetching in server components
Implement redirect logic with redirect() from next/navigation in server components
Begin client component files with 'use client'; directive in Next.js
Handle interactive UI with React hooks (useState, useEffect, React Query, wallet hooks) in client components
Access browser APIs (localStorage, window, IntersectionObserver) in client components
Support fast transitions with prefetched data in client components
Always call getAuthToken() to retrieve JWT from cookies on server side
Use Authorization: Bearer header for API calls – never embed tokens in URLs
Return typed results (Project[], User[]) from server-side data fetches – avoid any
Wrap client-side API calls in React Query (@tanstack/react-query)
Use descriptive, stable queryKeys in React Query for cache hits
Configure staleTime/cacheTime in React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never import posthog-js in server components – only use analytics client-side

Files:

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

apps/dashboard/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)

apps/dashboard/**/*.{ts,tsx}: Always import from the central UI library under @/components/ui/* for reusable core UI components like Button, Input, Select, Tabs, Card, Sidebar, Separator, Badge
Use NavLink from @/components/ui/NavLink for internal navigation to ensure active states are handled automatically
For notices and skeletons, rely on AnnouncementBanner, GenericLoadingPage, and EmptyStateCard components
Import icons from lucide-react or the project-specific …/icons exports; never embed raw SVG
Keep components pure; fetch data outside using server components or hooks and pass it down via props
Use Tailwind CSS as the styling system; avoid inline styles or CSS modules
Merge class names with cn from @/lib/utils to keep conditional logic readable
Stick to design tokens: use bg-card, border-border, text-muted-foreground and other Tailwind variables instead of hard-coded colors
Use spacing utilities (px-*, py-*, gap-*) instead of custom margins
Follow mobile-first responsive design with Tailwind helpers (max-sm, md, lg, xl)
Never hard-code colors; always use Tailwind variables
Combine class names via cn, and expose className prop if useful in components
Use React Query (@tanstack/react-query) for all client-side data fetching with typed hooks

Files:

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

apps/dashboard/**/components/**/*.{ts,tsx}

📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)

Add className prop to the root element of every component to allow external overrides

Files:

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

**/*.{js,jsx,ts,tsx,json}