[MNY-242] Dashboard: Remove animated background from bridge page #8219
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
How to use the Graphite Merge QueueAdd either label to this PR to merge it via the merge queue:
You must have a Graphite account in order to use the merge queue. Sign up using this link. An organization admin has enabled the Graphite Merge Queue in this repository. Please do not merge from GitHub as this will restart CI on PRs being processed by the merge queue. This stack of pull requests is managed by Graphite. Learn more about stacking. |
WalkthroughRemoved the ogl dependency and deleted the DarkVeil and BridgeVeil components; updated Bridge page/header styles and a Button size/class in BuyAndSwapEmbed. No runtime control-flow changes beyond removing the veil render path. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
participant Page as Bridge Page
participant UI as UI Layout
participant Veil as BridgeVeil (was)
participant Dark as DarkVeil (was)
rect rgba(220,230,241,0.35)
Note over Page,UI: Previous flow (before changes)
Page->>UI: render header & content
UI->>Veil: include BridgeVeil
Veil->>Dark: mount DarkVeil (WebGL / ogl)
Dark-->>Veil: render loop / uniforms
Veil-->>UI: visual overlay
end
rect rgba(237,245,233,0.35)
Note over Page,UI: New flow (after changes)
Page->>UI: render header & content (no veil)
UI-->>Page: No BridgeVeil / DarkVeil included
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Pre-merge checks and finishing touches❌ Failed checks (3 warnings)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
Comment |
size-limit report 📦
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8219 +/- ##
=======================================
Coverage 55.02% 55.03%
=======================================
Files 919 919
Lines 60583 60583
Branches 4127 4131 +4
=======================================
+ Hits 33335 33341 +6
+ Misses 27145 27138 -7
- Partials 103 104 +1
🚀 New features to boost your workflow:
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx (1)
235-253: Consider exposing aclassNameprop on TabButton.Per the coding guidelines for dashboard components, every component should expose a
classNameprop on its root element to allow style composition when needed. While not critical, adding this would align with the established pattern.Apply this diff to add className support:
function TabButton(props: { label: string; onClick: () => void; isActive: boolean; + className?: string; }) { return ( <Button onClick={props.onClick} size="sm" className={cn( "rounded-full text-muted-foreground px-4 bg-accent", props.isActive && "text-foreground border-foreground/50", + props.className, )} variant="outline" > {props.label} </Button> ); }As per coding guidelines.
apps/dashboard/src/app/bridge/page.tsx (1)
70-75: Addaria-hiddento decorative DotIcon.The DotIcon serves as a visual separator on mobile and is appropriately hidden on large screens with
lg:hidden. However, since it's purely decorative, it should includearia-hidden="true"to prevent screen readers from announcing it.Apply this diff:
- <DotIcon className="size-3 text-muted-foreground lg:hidden" /> + <DotIcon className="size-3 text-muted-foreground lg:hidden" aria-hidden="true" />
📜 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.
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (6)
apps/dashboard/package.json(0 hunks)apps/dashboard/src/@/components/DarkVeil.tsx(0 hunks)apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx(1 hunks)apps/dashboard/src/app/bridge/components/BridgeVeil.tsx(0 hunks)apps/dashboard/src/app/bridge/components/header.tsx(1 hunks)apps/dashboard/src/app/bridge/page.tsx(4 hunks)
💤 Files with no reviewable changes (3)
- apps/dashboard/src/@/components/DarkVeil.tsx
- apps/dashboard/src/app/bridge/components/BridgeVeil.tsx
- apps/dashboard/package.json
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxapps/dashboard/src/app/bridge/page.tsxapps/dashboard/src/app/bridge/components/header.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxapps/dashboard/src/app/bridge/page.tsxapps/dashboard/src/app/bridge/components/header.tsx
apps/{dashboard,playground-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/{dashboard,playground-web}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxapps/dashboard/src/app/bridge/page.tsxapps/dashboard/src/app/bridge/components/header.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/_(e.g., Button, Input, Tabs, Card)
UseNavLinkfor internal navigation to get active state handling
Use Tailwind CSS for styling; no inline styles
Merge class names withcn()from@/lib/utilsfor conditional classes
Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components must start withimport "server-only"; usenext/headers, server‑only env, heavy data fetching, andredirect()where appropriate
Client Components must start with'use client'; handle interactivity with hooks and browser APIs
Server-side data fetching: callgetAuthToken()from cookies, sendAuthorization: Bearer <token>header, and return typed results (avoidany)
Client-side data fetching: wrap calls in React Query with descriptive, stablequeryKeysand set sensiblestaleTime/cacheTime(≥ 60s default); keep tokens secret via internal routes or server actions
Do not importposthog-jsin server components (client-side only)
Files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxapps/dashboard/src/app/bridge/page.tsxapps/dashboard/src/app/bridge/components/header.tsx
apps/{dashboard,playground}/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Expose a
classNameprop on the root element of every component
Files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxapps/dashboard/src/app/bridge/page.tsxapps/dashboard/src/app/bridge/components/header.tsx
🧠 Learnings (1)
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
Applied to files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Size
- GitHub Check: Unit Tests
- GitHub Check: Build Packages
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (7)
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx (1)
243-246: LGTM! Button styling refined for cleaner UI.The changes—adding
size="sm", reducing padding frompx-5topx-4, and making the active border more subtle withborder-foreground/50—align well with the PR's objective to simplify and modernize the interface.apps/dashboard/src/app/bridge/components/header.tsx (1)
9-9: LGTM! Border simplification aligns with PR objectives.Removing the border opacity modifier (
border-border/50→border-border) simplifies the visual hierarchy and aligns with the goal of creating a cleaner, more utility-focused interface.apps/dashboard/src/app/bridge/page.tsx (5)
2-2: LGTM! Valid import from lucide-react.The
DotIconimport follows the recommended tree-shakable pattern for lucide-react and is properly utilized on line 72.Based on learnings
61-61: Mobile spacing optimization looks good; verify large-screen value consistency.The reduction from
h-20toh-12on mobile screens improves the mobile experience by reducing excessive whitespace. However, note the inconsistency in large-screen spacing values:
- Line 61:
lg:h-20- Line 78:
lg:h-16Verify whether the different large-screen spacing values (h-20 vs h-16) are intentional design choices or should be standardized for consistency.
Also applies to: 78-78
65-68: LGTM! Responsive typography improves mobile readability.The headline size reduction on mobile (from
text-5xltotext-3xl) while maintainingmd:text-6xlfor larger screens creates a better mobile experience. The explicit leading classes (leading-8 lg:leading-none) provide precise vertical rhythm control.
132-138: Excellent mobile-first responsive pattern.The DataPill implementation follows best practices by rendering as plain text on mobile and progressively enhancing with card styling, backdrop blur, and borders on large screens. This approach reduces visual clutter on smaller viewports while maintaining rich styling on desktop.
The use of design tokens (
text-muted-foreground,bg-card,border-border) and thelg:prefix pattern aligns with the coding guidelines.As per coding guidelines
140-155: LGTM! Background pattern changes align perfectly with PR objectives.The DotsBackgroundPattern updates address the core PR goals:
- Removes distracting colors: Pink accent colors replaced with neutral, theme-aware tokens (
text-foreground/20,text-muted-foreground/20)- Fixes mobile layout: Pattern hidden on mobile with
hidden lg:block, eliminating overlap issues mentioned in the PR objectives- Maintains desktop utility: Pattern remains visible on large screens at appropriate opacity
This change delivers the cleaner, utility-focused UI specified in the requirements.
Merge activity
|
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/dashboard/src/app/bridge/page.tsx (1)
132-138: Responsive styling looks good; consider adding className prop.The responsive design is well-implemented, showing plain text on mobile and styled pills on desktop. However, per coding guidelines, all components in dashboard apps should expose a
classNameprop on the root element.As per coding guidelines, consider adding a className prop:
-function DataPill(props: { children: React.ReactNode }) { +function DataPill(props: { children: React.ReactNode; className?: string }) { return ( - <p className="lg:bg-card flex items-center gap-1.5 text-muted-foreground text-xs lg:backdrop-blur-lg lg:border lg:border-border/70 rounded-full lg:px-3 lg:py-1.5 hover:text-foreground transition-colors duration-300"> + <p className={cn("lg:bg-card flex items-center gap-1.5 text-muted-foreground text-xs lg:backdrop-blur-lg lg:border lg:border-border/70 rounded-full lg:px-3 lg:py-1.5 hover:text-foreground transition-colors duration-300", props.className)}> {props.children} </p> ); }
📜 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.
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (6)
apps/dashboard/package.json(0 hunks)apps/dashboard/src/@/components/DarkVeil.tsx(0 hunks)apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx(1 hunks)apps/dashboard/src/app/bridge/components/BridgeVeil.tsx(0 hunks)apps/dashboard/src/app/bridge/components/header.tsx(1 hunks)apps/dashboard/src/app/bridge/page.tsx(4 hunks)
💤 Files with no reviewable changes (3)
- apps/dashboard/package.json
- apps/dashboard/src/app/bridge/components/BridgeVeil.tsx
- apps/dashboard/src/@/components/DarkVeil.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
apps/dashboard/src/app/bridge/page.tsxapps/dashboard/src/app/bridge/components/header.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/dashboard/src/app/bridge/page.tsxapps/dashboard/src/app/bridge/components/header.tsx
apps/{dashboard,playground-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/{dashboard,playground-web}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/app/bridge/page.tsxapps/dashboard/src/app/bridge/components/header.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/_(e.g., Button, Input, Tabs, Card)
UseNavLinkfor internal navigation to get active state handling
Use Tailwind CSS for styling; no inline styles
Merge class names withcn()from@/lib/utilsfor conditional classes
Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components must start withimport "server-only"; usenext/headers, server‑only env, heavy data fetching, andredirect()where appropriate
Client Components must start with'use client'; handle interactivity with hooks and browser APIs
Server-side data fetching: callgetAuthToken()from cookies, sendAuthorization: Bearer <token>header, and return typed results (avoidany)
Client-side data fetching: wrap calls in React Query with descriptive, stablequeryKeysand set sensiblestaleTime/cacheTime(≥ 60s default); keep tokens secret via internal routes or server actions
Do not importposthog-jsin server components (client-side only)
Files:
apps/dashboard/src/app/bridge/page.tsxapps/dashboard/src/app/bridge/components/header.tsx
apps/{dashboard,playground}/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Expose a
classNameprop on the root element of every component
Files:
apps/dashboard/src/app/bridge/page.tsxapps/dashboard/src/app/bridge/components/header.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Size
- GitHub Check: Unit Tests
- GitHub Check: Build Packages
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (6)
apps/dashboard/src/app/bridge/components/header.tsx (1)
9-9: LGTM! Simplified border styling.Removing the opacity modifier simplifies the styling and aligns with the PR's goal of cleaning up the UI.
apps/dashboard/src/app/bridge/page.tsx (5)
2-2: LGTM! Valid icon import.DotIcon is correctly imported from lucide-react and used as a visual separator in the pills section.
61-61: LGTM! Responsive spacing improvements.The reduced vertical spacing on mobile creates a more compact layout, addressing the mobile layout issues mentioned in the PR objectives.
Also applies to: 78-78
65-65: LGTM! Improved mobile typography.The reduced heading size on mobile (text-3xl) with appropriate line-height adjustments improves readability and aligns with the simplified design direction.
70-75: Verify the asymmetric dot placement.The DotIcon appears only between the first two pills (85+ Chains and 4500+ Tokens) but not between the second and third pills. This creates an asymmetric layout on mobile.
Is this intentional, or should dots separate all pills consistently?
140-155: LGTM! Improved design tokens and mobile visibility.The pattern now uses proper design system tokens and is hidden on mobile, creating a cleaner mobile experience while maintaining visual interest on desktop.
There was a problem hiding this comment.
Actionable comments posted: 1
📜 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.
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (6)
apps/dashboard/package.json(0 hunks)apps/dashboard/src/@/components/DarkVeil.tsx(0 hunks)apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx(1 hunks)apps/dashboard/src/app/bridge/components/BridgeVeil.tsx(0 hunks)apps/dashboard/src/app/bridge/components/header.tsx(1 hunks)apps/dashboard/src/app/bridge/page.tsx(4 hunks)
💤 Files with no reviewable changes (3)
- apps/dashboard/src/app/bridge/components/BridgeVeil.tsx
- apps/dashboard/package.json
- apps/dashboard/src/@/components/DarkVeil.tsx
🚧 Files skipped from review as they are similar to previous changes (2)
- apps/dashboard/src/app/bridge/components/header.tsx
- apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
apps/dashboard/src/app/bridge/page.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/dashboard/src/app/bridge/page.tsx
apps/{dashboard,playground-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/{dashboard,playground-web}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/app/bridge/page.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/_(e.g., Button, Input, Tabs, Card)
UseNavLinkfor internal navigation to get active state handling
Use Tailwind CSS for styling; no inline styles
Merge class names withcn()from@/lib/utilsfor conditional classes
Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components must start withimport "server-only"; usenext/headers, server‑only env, heavy data fetching, andredirect()where appropriate
Client Components must start with'use client'; handle interactivity with hooks and browser APIs
Server-side data fetching: callgetAuthToken()from cookies, sendAuthorization: Bearer <token>header, and return typed results (avoidany)
Client-side data fetching: wrap calls in React Query with descriptive, stablequeryKeysand set sensiblestaleTime/cacheTime(≥ 60s default); keep tokens secret via internal routes or server actions
Do not importposthog-jsin server components (client-side only)
Files:
apps/dashboard/src/app/bridge/page.tsx
apps/{dashboard,playground}/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Expose a
classNameprop on the root element of every component
Files:
apps/dashboard/src/app/bridge/page.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Lint Packages
- GitHub Check: Build Packages
- GitHub Check: Unit Tests
- GitHub Check: Analyze (javascript)
🔇 Additional comments (5)
apps/dashboard/src/app/bridge/page.tsx (5)
2-2: LGTM!The DotIcon import follows lucide-react best practices with a named import for optimal tree-shaking. Based on learnings, version 0.525.0 includes this icon.
61-61: Excellent responsive spacing improvements.Reducing header and section heights on mobile (h-12 vs h-20/h-16 on desktop) directly addresses the mobile layout issues mentioned in PR objectives while preserving desktop spacing.
Also applies to: 78-78
65-65: Well-executed responsive typography.The title now scales appropriately from mobile (text-3xl) to desktop (md:text-6xl) with proper line-height control (leading-8 lg:leading-none). The text-balance utility improves text wrapping across viewport sizes.
134-134: Excellent responsive pill pattern.The DataPill styling elegantly handles mobile vs desktop: plain text on small screens (lightweight), full pill styling on large screens (lg: prefixed classes). This follows design system tokens and aligns perfectly with the PR's goal to simplify mobile UI while maintaining visual polish on desktop.
144-144: Perfect alignment with PR objectives.Hiding the dots pattern on mobile (hidden lg:block) directly addresses the goal to "remove or tone down the moving gradient/animated background" that was overlapping the widget on mobile. The subtle opacity (foreground/20) on desktop keeps visual interest without distraction.
| <div className="flex flex-wrap gap-2 items-center justify-center"> | ||
| <DataPill>85+ Chains Supported</DataPill> | ||
| <DotIcon className="size-3 text-muted-foreground lg:hidden" /> | ||
| <DataPill>4500+ Tokens Supported</DataPill> | ||
| <DataPill>9+ Million Routes Available</DataPill> | ||
| </div> |
There was a problem hiding this comment.
🧩 Analysis chain
Add aria-hidden to the DotIcon and verify separator placement.
Two concerns:
-
Accessibility: The DotIcon is purely decorative and should include
aria-hidden="true"to prevent screen readers from announcing it. -
Asymmetric separator: Only one DotIcon appears between the first two pills, but not between the second and third. Is this intentional grouping, or should separators appear between all pills on small screens?
Apply this diff to add aria-hidden:
- <DotIcon className="size-3 text-muted-foreground lg:hidden" />
+ <DotIcon className="size-3 text-muted-foreground lg:hidden" aria-hidden="true" />To verify whether the separator placement is intentional or if additional separators are needed, please clarify the design intent for pill grouping on mobile.
📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className="flex flex-wrap gap-2 items-center justify-center"> | |
| <DataPill>85+ Chains Supported</DataPill> | |
| <DotIcon className="size-3 text-muted-foreground lg:hidden" /> | |
| <DataPill>4500+ Tokens Supported</DataPill> | |
| <DataPill>9+ Million Routes Available</DataPill> | |
| </div> | |
| <div className="flex flex-wrap gap-2 items-center justify-center"> | |
| <DataPill>85+ Chains Supported</DataPill> | |
| <DotIcon className="size-3 text-muted-foreground lg:hidden" aria-hidden="true" /> | |
| <DataPill>4500+ Tokens Supported</DataPill> | |
| <DataPill>9+ Million Routes Available</DataPill> | |
| </div> |
🤖 Prompt for AI Agents
In apps/dashboard/src/app/bridge/page.tsx around lines 70-75, the DotIcon is
decorative so add aria-hidden="true" to the element, and for consistent
small-screen separators insert the same DotIcon (with className="size-3
text-muted-foreground lg:hidden" and aria-hidden="true") between each DataPill
(i.e., after the first and second pills) so separators appear uniformly on small
screens while remaining hidden on large screens.
<!--
## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes"
If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000):
## Notes for the reviewer
Anything important to call out? Be sure to also clarify these in your comments.
## How to test
Unit tests, playground, etc.
-->
<!-- start pr-codex -->
---
## PR-Codex overview
This PR primarily focuses on code cleanup and improvements in the `apps/dashboard` project. It removes unused components and makes adjustments to existing components for better styling and functionality.
### Detailed summary
- Deleted `DarkVeil` and `BridgeVeil` components.
- Adjusted the styling of the `PageHeader` component.
- Modified button size and styles in `BuyAndSwapEmbed`.
- Updated `BridgePage` component layout and header styles.
- Improved `DataPill` component styles.
- Refined `DotsBackgroundPattern` visibility and styles.
- Updated dependency versions in `package.json` and `pnpm-lock.yaml`.
> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`
<!-- end pr-codex -->
<!-- This is an auto-generated comment: release notes by coderabbit.ai -->
## Summary by CodeRabbit
* **Style**
* Removed animated veil background and simplified header visuals; adjusted responsive typography, spacing, borders, paddings, and colors for improved light/dark contrast.
* Added a small dot icon beside the first pill on mobile, improved pill layout and muted pill text color on larger screens.
* Made tab buttons smaller and refined active-state styling.
* **Refactor**
* Removed legacy veil background components to simplify the UI.
* **Chores**
* Removed an unused graphics dependency from the dashboard.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
mny-242
branch
from
7409750 to
43b0680
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (1)
apps/dashboard/src/app/bridge/page.tsx (1)
70-75: Existing accessibility concern already flagged in previous review.A prior review comment already identified that the
DotIconat line 72 should includearia-hidden="true"since it's decorative. Please address that feedback.
🧹 Nitpick comments (1)
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx (1)
241-252: Align padding with thesmsize variant
Thesmvariant already appliespx-3; your explicitpx-4will override it. Remove the custompx-4(or switch to the default size) to rely on the variant’s padding.
📜 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.
⛔ Files ignored due to path filters (1)
pnpm-lock.yamlis excluded by!**/pnpm-lock.yaml
📒 Files selected for processing (6)
apps/dashboard/package.json(0 hunks)apps/dashboard/src/@/components/DarkVeil.tsx(0 hunks)apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx(1 hunks)apps/dashboard/src/app/bridge/components/BridgeVeil.tsx(0 hunks)apps/dashboard/src/app/bridge/components/header.tsx(1 hunks)apps/dashboard/src/app/bridge/page.tsx(4 hunks)
💤 Files with no reviewable changes (3)
- apps/dashboard/src/@/components/DarkVeil.tsx
- apps/dashboard/package.json
- apps/dashboard/src/app/bridge/components/BridgeVeil.tsx
🧰 Additional context used
📓 Path-based instructions (5)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.)
Comment only ambiguous logic; avoid restating TypeScript in prose
**/*.{ts,tsx}: Use explicit function declarations and explicit return types in TypeScript
Limit each file to one stateless, single‑responsibility function
Re‑use shared types from@/typeswhere applicable
Prefertypealiases overinterfaceexcept for nominal shapes
Avoidanyandunknownunless unavoidable; narrow generics when possible
Prefer composition over inheritance; use utility types (Partial, Pick, etc.)
Lazy‑import optional features and avoid top‑level side‑effects to reduce bundle size
Files:
apps/dashboard/src/app/bridge/components/header.tsxapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxapps/dashboard/src/app/bridge/page.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Load heavy dependencies inside async paths to keep initial bundle lean (lazy loading)
Files:
apps/dashboard/src/app/bridge/components/header.tsxapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxapps/dashboard/src/app/bridge/page.tsx
apps/{dashboard,playground-web}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/{dashboard,playground-web}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground apps
UseNavLinkfor internal navigation with automatic active states in dashboard and playground apps
Use Tailwind CSS only – no inline styles or CSS modules
Usecn()from@/lib/utilsfor conditional class logic
Use design system tokens (e.g.,bg-card,border-border,text-muted-foreground)
Server Components (Node edge): Start files withimport "server-only";
Client Components (browser): Begin files with'use client';
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader – never embed tokens in URLs
Return typed results (e.g.,Project[],User[]) – avoidany
Wrap client-side data fetching calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysfor React Query cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components
Files:
apps/dashboard/src/app/bridge/components/header.tsxapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxapps/dashboard/src/app/bridge/page.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: Import UI primitives from@/components/ui/_(e.g., Button, Input, Tabs, Card)
UseNavLinkfor internal navigation to get active state handling
Use Tailwind CSS for styling; no inline styles
Merge class names withcn()from@/lib/utilsfor conditional classes
Stick to design tokens (e.g., bg-card, border-border, text-muted-foreground)
Server Components must start withimport "server-only"; usenext/headers, server‑only env, heavy data fetching, andredirect()where appropriate
Client Components must start with'use client'; handle interactivity with hooks and browser APIs
Server-side data fetching: callgetAuthToken()from cookies, sendAuthorization: Bearer <token>header, and return typed results (avoidany)
Client-side data fetching: wrap calls in React Query with descriptive, stablequeryKeysand set sensiblestaleTime/cacheTime(≥ 60s default); keep tokens secret via internal routes or server actions
Do not importposthog-jsin server components (client-side only)
Files:
apps/dashboard/src/app/bridge/components/header.tsxapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxapps/dashboard/src/app/bridge/page.tsx
apps/{dashboard,playground}/**/*.tsx
📄 CodeRabbit inference engine (AGENTS.md)
Expose a
classNameprop on the root element of every component
Files:
apps/dashboard/src/app/bridge/components/header.tsxapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxapps/dashboard/src/app/bridge/page.tsx
🧠 Learnings (1)
📚 Learning: 2025-07-18T19:20:32.530Z
Learnt from: CR
PR: thirdweb-dev/js#0
File: .cursor/rules/dashboard.mdc:0-0
Timestamp: 2025-07-18T19:20:32.530Z
Learning: Applies to dashboard/**/*.{tsx,jsx} : Prefer composable primitives over custom markup: `Button`, `Input`, `Select`, `Tabs`, `Card`, `Sidebar`, `Separator`, `Badge`.
Applied to files:
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (7)
apps/dashboard/src/app/bridge/components/header.tsx (1)
9-9: LGTM!Removing the opacity modifier makes the border more prominent, aligning with the PR's goal to simplify the page design.
apps/dashboard/src/app/bridge/page.tsx (6)
2-2: LGTM!The
DotIconimport fromlucide-reactis correctly added to support the separator icon between data pills.Based on learnings.
61-61: LGTM!Reducing the header spacer height on small screens (
h-12) while maintaining the original height on large screens (lg:h-20) improves the mobile layout by conserving vertical space.
65-68: LGTM!The responsive typography adjustments improve readability across screen sizes:
- Smaller base size (
text-3xl) for mobile devices- Larger size (
md:text-6xl) for medium+ screens- Preserved line-height control and text balancing
78-78: LGTM!Consistent with the header spacer change, this reduces vertical spacing on small screens while maintaining the original spacing on large screens.
132-138: LGTM!The responsive styling for
DataPillis well-structured:
- Base styling (text, gap, hover) applies to all sizes
- Card background, backdrop blur, border, and padding apply only on large screens (
lg:prefix)- This creates a cleaner, text-only appearance on mobile while maintaining the pill visual on desktop
140-155: LGTM!The
DotsBackgroundPatternchanges align with the PR objectives:
- Updated to use semantic color tokens (
text-foreground/20anddark:text-muted-foreground/20)- Hidden on small screens (
hidden lg:block) to reduce visual clutter on mobile- Maintains the pattern effect on larger screens where it doesn't interfere with the widget
2 participants
PR-Codex overview
This PR primarily focuses on cleaning up the code by removing unused components and making adjustments to the styling and structure of existing components in the
apps/dashboarddirectory. It also updates dependencies in thepackage.jsonfile.Detailed summary
DarkVeil.tsxandBridgeVeil.tsxcomponents.<BridgeVeil />component fromBridgePage.PageHeaderandBridgePage.BuyAndSwapEmbed.BridgePage.DataPillandDotsBackgroundPatternstyles.package.json.Summary by CodeRabbit
Style
Refactor
Chores