[MNY-344] Dashboard: Add swap-widget iframe #8603
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
WalkthroughAdds a new swap-widget route (layout + page) and a client SwapWidgetEmbed that initializes a thirdweb SwapWidget with optional prefill and posts success/error to the parent; introduces NEXT_PUBLIC_SWAP_IFRAME_CLIENT_ID, updates CSP headers for swap-widget paths, and removes wallet auto-connect from CheckoutWidgetEmbed. Changes
Sequence Diagram(s)mermaid Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Pre-merge checks and finishing touches❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (3 passed)
✨ Finishing touches
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
Comment |
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. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Fix all issues with AI Agents 🤖
In @apps/dashboard/src/app/bridge/swap-widget/layout.tsx:
- Around line 1-27: The file is missing a server-only marker and the layout
should be an async server component: add the top-level import "server-only"; and
change the exported function signature to "export default async function
SwapWidgetLayout(...)" (keep the same props shape and body, no 'use client'
directive); ensure existing symbols like SwapWidgetLayout and fontSans remain
unchanged so the component remains a server-only async layout.
In @apps/dashboard/src/app/bridge/swap-widget/page.tsx:
- Around line 1-26: This server component file is missing the required
server-only directive; add import "server-only"; as the very first line before
any other imports in this module (where symbols like metadata, SwapWidgetEmbed,
and BridgeProviders are defined/imported) to ensure the file is treated as
server-only and avoid client bundling.
In @apps/dashboard/src/app/bridge/swap-widget/SwapWidgetEmbed.client.tsx:
- Line 6: The component is importing and using
NEXT_PUBLIC_CHECKOUT_IFRAME_CLIENT_ID but should use
NEXT_PUBLIC_SWAP_IFRAME_CLIENT_ID; update the import statement to import
NEXT_PUBLIC_SWAP_IFRAME_CLIENT_ID and replace all usages of
NEXT_PUBLIC_CHECKOUT_IFRAME_CLIENT_ID in SwapWidgetEmbed (the client component
in SwapWidgetEmbed.client.tsx) with NEXT_PUBLIC_SWAP_IFRAME_CLIENT_ID so the
swap widget uses the correct client ID for configuration, authentication, and
telemetry.
- Around line 97-104: The sendMessageToParent function currently uses "*" as
targetOrigin which is insecure; change it to validate and supply a specific
origin: derive targetOrigin from a trusted source (preferably a parentOrigin
prop passed into SwapWidgetEmbed or, if unavailable, sanitize
document.referrer), check it against an allowlist of trusted origins, log and
abort if not allowed, and only then call window.parent.postMessage(content,
targetOrigin); if you must fall back to "*" document the tradeoff and ensure the
content excludes any sensitive fields (amounts, addresses, user identifiers).
🧹 Nitpick comments (1)
apps/dashboard/src/app/bridge/swap-widget/page.tsx (1)
86-104: Consider earlier validation of the required environment variable.The validation of
NEXT_PUBLIC_SWAP_IFRAME_CLIENT_IDhappens at render time, which could result in a runtime error after the page has started processing. Consider validating required environment variables at build time or module initialization.Alternative approach
Move the validation to the top level of the module:
if (!NEXT_PUBLIC_SWAP_IFRAME_CLIENT_ID) { throw new Error("NEXT_PUBLIC_SWAP_IFRAME_CLIENT_ID is not set"); } function Providers({ children, theme, }: { children: React.ReactNode; theme: string; }) { return ( <BridgeProviders clientId={NEXT_PUBLIC_SWAP_IFRAME_CLIENT_ID} forcedTheme={theme} > {children} </BridgeProviders> ); }This provides earlier failure feedback during development and build processes.
📜 Review details
Configuration used: Organization 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 selected for processing (6)
apps/dashboard/next.config.tsapps/dashboard/src/@/constants/public-envs.tsapps/dashboard/src/app/bridge/checkout-widget/CheckoutWidgetEmbed.client.tsxapps/dashboard/src/app/bridge/swap-widget/SwapWidgetEmbed.client.tsxapps/dashboard/src/app/bridge/swap-widget/layout.tsxapps/dashboard/src/app/bridge/swap-widget/page.tsx
💤 Files with no reviewable changes (1)
- apps/dashboard/src/app/bridge/checkout-widget/CheckoutWidgetEmbed.client.tsx
🧰 Additional context used
📓 Path-based instructions (11)
**/*.{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@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes in TypeScript
Avoidanyandunknownin 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/bridge/swap-widget/layout.tsxapps/dashboard/src/app/bridge/swap-widget/SwapWidgetEmbed.client.tsxapps/dashboard/src/app/bridge/swap-widget/page.tsxapps/dashboard/src/@/constants/public-envs.tsapps/dashboard/next.config.ts
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
Usecn()from@/lib/utilsfor conditional Tailwind class merging
Use design system tokens for styling (backgrounds:bg-card, borders:border-border, muted text:text-muted-foreground)
ExposeclassNameprop on root element for component overrides
Files:
apps/dashboard/src/app/bridge/swap-widget/layout.tsxapps/dashboard/src/app/bridge/swap-widget/SwapWidgetEmbed.client.tsxapps/dashboard/src/app/bridge/swap-widget/page.tsxapps/dashboard/src/@/constants/public-envs.ts
apps/dashboard/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/dashboard/src/**/*.{ts,tsx}: UseNavLinkfor internal navigation with automatic active states in dashboard
Start server component files withimport "server-only";in Next.js
Read cookies/headers withnext/headersin server components
Access server-only environment variables in server components
Perform heavy data fetching in server components
Implement redirect logic withredirect()fromnext/navigationin 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 callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader for API calls – never embed tokens in URLs
Return typed results (Project[],User[]) from server-side data fetches – avoidany
Wrap client-side API calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysin React Query for 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 – only use analytics client-side
Files:
apps/dashboard/src/app/bridge/swap-widget/layout.tsxapps/dashboard/src/app/bridge/swap-widget/SwapWidgetEmbed.client.tsxapps/dashboard/src/app/bridge/swap-widget/page.tsxapps/dashboard/src/@/constants/public-envs.ts
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 likeButton,Input,Select,Tabs,Card,Sidebar,Separator,Badge
UseNavLinkfrom@/components/ui/NavLinkfor internal navigation to ensure active states are handled automatically
For notices and skeletons, rely onAnnouncementBanner,GenericLoadingPage, andEmptyStateCardcomponents
Import icons fromlucide-reactor the project-specific…/iconsexports; 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 withcnfrom@/lib/utilsto keep conditional logic readable
Stick to design tokens: usebg-card,border-border,text-muted-foregroundand 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 viacn, and exposeclassNameprop if useful in components
Use React Query (@tanstack/react-query) for all client-side data fetching with typed hooks
Files:
apps/dashboard/src/app/bridge/swap-widget/layout.tsxapps/dashboard/src/app/bridge/swap-widget/SwapWidgetEmbed.client.tsxapps/dashboard/src/app/bridge/swap-widget/page.tsxapps/dashboard/src/@/constants/public-envs.tsapps/dashboard/next.config.ts
apps/dashboard/**/layout.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
apps/dashboard/**/layout.{ts,tsx}: ReuseSidebarLayoutorFullWidthSidebarLayoutfrom@/components/blocks/SidebarLayoutfor all layouts
Export default async functions without'use client';in server components; they run on the Node edge
Files:
apps/dashboard/src/app/bridge/swap-widget/layout.tsx
**/*.{js,jsx,ts,tsx,json}
📄 CodeRabbit inference engine (AGENTS.md)
Biome governs formatting and linting; its rules live in biome.json. Run
pnpm fix&pnpm lintbefore committing, ensure there are no linting errors
Files:
apps/dashboard/src/app/bridge/swap-widget/layout.tsxapps/dashboard/src/app/bridge/swap-widget/SwapWidgetEmbed.client.tsxapps/dashboard/src/app/bridge/swap-widget/page.tsxapps/dashboard/src/@/constants/public-envs.tsapps/dashboard/next.config.ts
apps/{dashboard,playground}/**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{tsx,ts}: Import UI primitives from @/components/ui/_ (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in Dashboard and Playground apps
Use NavLink for internal navigation so active states are handled automatically
Use Tailwind CSS for styling – no inline styles or CSS modules
Merge class names with cn() from @/lib/utils to keep conditional logic readable
Stick to design tokens for styling: backgrounds (bg-card), borders (border-border), muted text (text-muted-foreground), etc.
Server Components: Read cookies/headers with next/headers, access server-only environment variables or secrets, perform heavy data fetching, implement redirect logic with redirect() from next/navigation, and start files with import 'server-only'; to prevent client bundling
Client Components: Begin files with 'use client'; before imports, handle interactive UI relying on React hooks (useState, useEffect, React Query, wallet hooks), access browser APIs (localStorage, window, IntersectionObserver, etc.), and support fast transitions with client-side data prefetching
For client-side data fetching: Wrap calls in React Query (@tanstack/react-query), use descriptive and stable queryKeys for cache hits, configure staleTime / cacheTime based on freshness requirements (default ≥ 60 s), and keep tokens secret by calling internal API routes or server actions
Files:
apps/dashboard/src/app/bridge/swap-widget/layout.tsxapps/dashboard/src/app/bridge/swap-widget/SwapWidgetEmbed.client.tsxapps/dashboard/src/app/bridge/swap-widget/page.tsxapps/dashboard/src/@/constants/public-envs.tsapps/dashboard/next.config.ts
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: For server-side data fetching: Always call getAuthToken() to retrieve the JWT from cookies and inject the token as an Authorization: Bearer header – never embed it in the URL. Return typed results (Project[], User[], …) – avoid any
Never import posthog-js in server components; analytics reporting is client-side only
Files:
apps/dashboard/src/app/bridge/swap-widget/layout.tsxapps/dashboard/src/app/bridge/swap-widget/SwapWidgetEmbed.client.tsxapps/dashboard/src/app/bridge/swap-widget/page.tsxapps/dashboard/src/@/constants/public-envs.tsapps/dashboard/next.config.ts
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Lazy-import optional features; avoid top-level side-effects
Files:
apps/dashboard/src/app/bridge/swap-widget/layout.tsxapps/dashboard/src/app/bridge/swap-widget/SwapWidgetEmbed.client.tsxapps/dashboard/src/app/bridge/swap-widget/page.tsxapps/dashboard/src/@/constants/public-envs.tsapps/dashboard/next.config.ts
apps/dashboard/**/*.client.tsx
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
apps/dashboard/**/*.client.tsx: Name component files after the component in PascalCase; append.client.tsxwhen the component is interactive
Client components must start with'use client';directive before imports
Files:
apps/dashboard/src/app/bridge/swap-widget/SwapWidgetEmbed.client.tsx
apps/dashboard/**/page.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
Use the
containerclass with amax-w-7xlcap for consistent page width
Files:
apps/dashboard/src/app/bridge/swap-widget/page.tsx
🧬 Code graph analysis (2)
apps/dashboard/src/app/bridge/swap-widget/SwapWidgetEmbed.client.tsx (2)
apps/dashboard/src/@/constants/thirdweb.server.ts (1)
getConfiguredThirdwebClient(26-97)apps/dashboard/src/@/constants/public-envs.ts (1)
NEXT_PUBLIC_CHECKOUT_IFRAME_CLIENT_ID(48-49)
apps/dashboard/src/app/bridge/swap-widget/page.tsx (5)
apps/dashboard/src/app/bridge/_common/parseQueryParams.ts (3)
parseQueryParams(3-11)onlyNumber(14-15)onlyAddress(13-13)apps/dashboard/src/app/bridge/_common/isValidCurrency.ts (1)
isValidCurrency(3-10)apps/dashboard/src/app/bridge/swap-widget/SwapWidgetEmbed.client.tsx (1)
SwapWidgetEmbed(9-95)apps/dashboard/src/@/constants/public-envs.ts (1)
NEXT_PUBLIC_SWAP_IFRAME_CLIENT_ID(51-52)apps/dashboard/src/app/bridge/(general)/components/client/Providers.client.tsx (1)
BridgeProviders(9-42)
⏰ 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). (1)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (4)
apps/dashboard/next.config.ts (1)
182-199: LGTM! CSP headers properly configured for the new swap widget routes.The Content-Security-Policy headers for
/bridge/swap-widgetand/bridge/swap-widget/:path*follow the established pattern used by other widget routes, correctly applyingEmbedContentSecurityPolicywithframe-ancestors *to allow iframe embedding.apps/dashboard/src/@/constants/public-envs.ts (1)
51-52: LGTM! Environment variable export follows established pattern.The new
NEXT_PUBLIC_SWAP_IFRAME_CLIENT_IDexport is consistent with the existing iframe client ID variables and is properly validated at runtime in the page component.apps/dashboard/src/app/bridge/swap-widget/page.tsx (1)
31-84: LGTM! Query parameter parsing and page structure are well-implemented.The page correctly:
- Parses and validates all swap-related query parameters
- Provides type-safe defaults for optional parameters
- Uses proper async/await for searchParams
- Renders the SwapWidgetEmbed within appropriate providers
apps/dashboard/src/app/bridge/swap-widget/SwapWidgetEmbed.client.tsx (1)
40-70: LGTM! Prefill logic correctly constructs token data from optional parameters.The prefill memo properly handles optional buy/sell parameters and only includes non-undefined values in the result, returning
undefinedwhen no parameters are provided.
apps/dashboard/src/app/bridge/swap-widget/SwapWidgetEmbed.client.tsx
Outdated
Show resolved
Hide resolved
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8603 +/- ##
=======================================
Coverage 53.19% 53.19%
=======================================
Files 922 922
Lines 61480 61480
Branches 4032 4032
=======================================
Hits 32706 32706
Misses 28676 28676
Partials 98 98
🚀 New features to boost your workflow:
|
size-limit report 📦
|
Merge activity
|
<!--
## 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 introduces a new `NEXT_PUBLIC_SWAP_IFRAME_CLIENT_ID` constant and enhances the swap functionality with a `SwapWidgetEmbed` component, while refactoring the existing `Providers` component to `BridgeProvidersLite`. It also adds necessary headers for security and updates layout components.
### Detailed summary
- Added `NEXT_PUBLIC_SWAP_IFRAME_CLIENT_ID` constant in `public-envs.ts`.
- Updated `next.config.ts` to include security headers for swap widget routes.
- Introduced `BridgeProvidersLite` component in `Providers.client.tsx`.
- Created `SwapWidgetEmbed` component for swap functionality.
- Refactored `page.tsx` to utilize `BridgeProvidersLite` and `SwapWidgetEmbed`.
- Removed the old `Providers` component logic.
> ✨ 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
* **New Features**
* Added a cross‑chain swap widget with page, embed component and layout, URL-prefill support, theming, and fiat currency options.
* Added a lightweight provider wrapper for embed usage.
* **Changes**
* Checkout widget no longer auto-connects preconfigured wallets; provider usage unified to the lightweight wrapper.
* **Chores**
* Added CSP headers for swap widget routes.
* Introduced public env var for swap iframe client ID.
<sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub>
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
mny-344
branch
from
a6340c1 to
9f265bf
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
Fix all issues with AI Agents 🤖
In @apps/dashboard/src/app/bridge/swap-widget/SwapWidgetEmbed.client.tsx:
- Around line 30-38: The code calls getConfiguredThirdwebClient with
NEXT_PUBLIC_SWAP_IFRAME_CLIENT_ID without validating it; add a check at
component initialization (before useMemo or inside it) to verify
NEXT_PUBLIC_SWAP_IFRAME_CLIENT_ID is defined and non-empty, and if not either
throw a clear error or render an error fallback UI (follow the invalid
configuration handling pattern used in checkout-widget/page.tsx lines ~80-115);
update the useMemo call that creates the client (getConfiguredThirdwebClient) to
only run when the validated clientId exists and include a descriptive log or
error message to aid debugging.
♻️ Duplicate comments (1)
apps/dashboard/src/app/bridge/swap-widget/SwapWidgetEmbed.client.tsx (1)
97-104: Security concern already flagged in previous review.The use of wildcard origin
"*"inpostMessagehas been identified as a security issue in the previous review comments. Please refer to the existing recommendations for implementing origin validation.
📜 Review details
Configuration used: Organization 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 selected for processing (8)
apps/dashboard/next.config.tsapps/dashboard/src/@/constants/public-envs.tsapps/dashboard/src/app/bridge/(general)/components/client/Providers.client.tsxapps/dashboard/src/app/bridge/checkout-widget/CheckoutWidgetEmbed.client.tsxapps/dashboard/src/app/bridge/checkout-widget/page.tsxapps/dashboard/src/app/bridge/swap-widget/SwapWidgetEmbed.client.tsxapps/dashboard/src/app/bridge/swap-widget/layout.tsxapps/dashboard/src/app/bridge/swap-widget/page.tsx
💤 Files with no reviewable changes (1)
- apps/dashboard/src/app/bridge/checkout-widget/CheckoutWidgetEmbed.client.tsx
🚧 Files skipped from review as they are similar to previous changes (3)
- apps/dashboard/next.config.ts
- apps/dashboard/src/app/bridge/swap-widget/layout.tsx
- apps/dashboard/src/app/bridge/swap-widget/page.tsx
🧰 Additional context used
📓 Path-based instructions (12)
**/*.{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@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes in TypeScript
Avoidanyandunknownin 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/bridge/(general)/components/client/Providers.client.tsxapps/dashboard/src/@/constants/public-envs.tsapps/dashboard/src/app/bridge/checkout-widget/page.tsxapps/dashboard/src/app/bridge/swap-widget/SwapWidgetEmbed.client.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
Usecn()from@/lib/utilsfor conditional Tailwind class merging
Use design system tokens for styling (backgrounds:bg-card, borders:border-border, muted text:text-muted-foreground)
ExposeclassNameprop on root element for component overrides
Files:
apps/dashboard/src/app/bridge/(general)/components/client/Providers.client.tsxapps/dashboard/src/@/constants/public-envs.tsapps/dashboard/src/app/bridge/checkout-widget/page.tsxapps/dashboard/src/app/bridge/swap-widget/SwapWidgetEmbed.client.tsx
apps/dashboard/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/dashboard/src/**/*.{ts,tsx}: UseNavLinkfor internal navigation with automatic active states in dashboard
Start server component files withimport "server-only";in Next.js
Read cookies/headers withnext/headersin server components
Access server-only environment variables in server components
Perform heavy data fetching in server components
Implement redirect logic withredirect()fromnext/navigationin 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 callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader for API calls – never embed tokens in URLs
Return typed results (Project[],User[]) from server-side data fetches – avoidany
Wrap client-side API calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysin React Query for 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 – only use analytics client-side
Files:
apps/dashboard/src/app/bridge/(general)/components/client/Providers.client.tsxapps/dashboard/src/@/constants/public-envs.tsapps/dashboard/src/app/bridge/checkout-widget/page.tsxapps/dashboard/src/app/bridge/swap-widget/SwapWidgetEmbed.client.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 likeButton,Input,Select,Tabs,Card,Sidebar,Separator,Badge
UseNavLinkfrom@/components/ui/NavLinkfor internal navigation to ensure active states are handled automatically
For notices and skeletons, rely onAnnouncementBanner,GenericLoadingPage, andEmptyStateCardcomponents
Import icons fromlucide-reactor the project-specific…/iconsexports; 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 withcnfrom@/lib/utilsto keep conditional logic readable
Stick to design tokens: usebg-card,border-border,text-muted-foregroundand 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 viacn, and exposeclassNameprop if useful in components
Use React Query (@tanstack/react-query) for all client-side data fetching with typed hooks
Files:
apps/dashboard/src/app/bridge/(general)/components/client/Providers.client.tsxapps/dashboard/src/@/constants/public-envs.tsapps/dashboard/src/app/bridge/checkout-widget/page.tsxapps/dashboard/src/app/bridge/swap-widget/SwapWidgetEmbed.client.tsx
apps/dashboard/**/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
Add
classNameprop to the root element of every component to allow external overrides
Files:
apps/dashboard/src/app/bridge/(general)/components/client/Providers.client.tsx
apps/dashboard/**/*.client.tsx
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
apps/dashboard/**/*.client.tsx: Name component files after the component in PascalCase; append.client.tsxwhen the component is interactive
Client components must start with'use client';directive before imports
Files:
apps/dashboard/src/app/bridge/(general)/components/client/Providers.client.tsxapps/dashboard/src/app/bridge/swap-widget/SwapWidgetEmbed.client.tsx
**/*.{js,jsx,ts,tsx,json}
📄 CodeRabbit inference engine (AGENTS.md)
Biome governs formatting and linting; its rules live in biome.json. Run
pnpm fix&pnpm lintbefore committing, ensure there are no linting errors
Files:
apps/dashboard/src/app/bridge/(general)/components/client/Providers.client.tsxapps/dashboard/src/@/constants/public-envs.tsapps/dashboard/src/app/bridge/checkout-widget/page.tsxapps/dashboard/src/app/bridge/swap-widget/SwapWidgetEmbed.client.tsx
apps/{dashboard,playground}/**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{tsx,ts}: Import UI primitives from @/components/ui/_ (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in Dashboard and Playground apps
Use NavLink for internal navigation so active states are handled automatically
Use Tailwind CSS for styling – no inline styles or CSS modules
Merge class names with cn() from @/lib/utils to keep conditional logic readable
Stick to design tokens for styling: backgrounds (bg-card), borders (border-border), muted text (text-muted-foreground), etc.
Server Components: Read cookies/headers with next/headers, access server-only environment variables or secrets, perform heavy data fetching, implement redirect logic with redirect() from next/navigation, and start files with import 'server-only'; to prevent client bundling
Client Components: Begin files with 'use client'; before imports, handle interactive UI relying on React hooks (useState, useEffect, React Query, wallet hooks), access browser APIs (localStorage, window, IntersectionObserver, etc.), and support fast transitions with client-side data prefetching
For client-side data fetching: Wrap calls in React Query (@tanstack/react-query), use descriptive and stable queryKeys for cache hits, configure staleTime / cacheTime based on freshness requirements (default ≥ 60 s), and keep tokens secret by calling internal API routes or server actions
Files:
apps/dashboard/src/app/bridge/(general)/components/client/Providers.client.tsxapps/dashboard/src/@/constants/public-envs.tsapps/dashboard/src/app/bridge/checkout-widget/page.tsxapps/dashboard/src/app/bridge/swap-widget/SwapWidgetEmbed.client.tsx
apps/{dashboard,playground}/**/components/**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/components/**/*.{tsx,ts}: Group feature-specific components under feature/components/_ and expose a barrel index.ts when necessary
Expose a className prop on the root element of every component for styling overrides
Files:
apps/dashboard/src/app/bridge/(general)/components/client/Providers.client.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: For server-side data fetching: Always call getAuthToken() to retrieve the JWT from cookies and inject the token as an Authorization: Bearer header – never embed it in the URL. Return typed results (Project[], User[], …) – avoid any
Never import posthog-js in server components; analytics reporting is client-side only
Files:
apps/dashboard/src/app/bridge/(general)/components/client/Providers.client.tsxapps/dashboard/src/@/constants/public-envs.tsapps/dashboard/src/app/bridge/checkout-widget/page.tsxapps/dashboard/src/app/bridge/swap-widget/SwapWidgetEmbed.client.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Lazy-import optional features; avoid top-level side-effects
Files:
apps/dashboard/src/app/bridge/(general)/components/client/Providers.client.tsxapps/dashboard/src/@/constants/public-envs.tsapps/dashboard/src/app/bridge/checkout-widget/page.tsxapps/dashboard/src/app/bridge/swap-widget/SwapWidgetEmbed.client.tsx
apps/dashboard/**/page.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
Use the
containerclass with amax-w-7xlcap for consistent page width
Files:
apps/dashboard/src/app/bridge/checkout-widget/page.tsx
🧬 Code graph analysis (1)
apps/dashboard/src/app/bridge/checkout-widget/page.tsx (1)
apps/dashboard/src/app/bridge/(general)/components/client/Providers.client.tsx (1)
BridgeProvidersLite(44-64)
⏰ 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). (7)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Build Packages
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Size
- GitHub Check: Unit Tests
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (5)
apps/dashboard/src/@/constants/public-envs.ts (1)
51-52: LGTM! Consistent with existing iframe client ID exports.The new environment variable follows the same pattern as
NEXT_PUBLIC_BRIDGE_IFRAME_CLIENT_IDandNEXT_PUBLIC_CHECKOUT_IFRAME_CLIENT_ID, maintaining consistency across the codebase.apps/dashboard/src/app/bridge/(general)/components/client/Providers.client.tsx (1)
44-64: LGTM! Clean refactor for lightweight embedding scenarios.The
BridgeProvidersLitecomponent appropriately removes auto-connect and toaster functionality while maintaining consistent theming configuration. This is a sensible pattern for iframe embed contexts where wallet auto-connect behavior is not desired.apps/dashboard/src/app/bridge/checkout-widget/page.tsx (1)
12-12: LGTM! Provider refactor aligns with iframe embedding requirements.The migration from
BridgeProviderstoBridgeProvidersLiteremoves wallet auto-connect functionality from the checkout widget flow, which is appropriate for iframe embed scenarios. TheforcedThemeprop correctly propagates the theme preference through the provider chain.Also applies to: 81-114, 119-138
apps/dashboard/src/app/bridge/swap-widget/SwapWidgetEmbed.client.tsx (2)
40-70: LGTM! Prefill logic is clean and correctly structured.The conditional construction of
buyTokenandsellTokenbased on the presence of their respectivechainIdparameters is appropriate, and the dependency array correctly captures all inputs. Returningundefinedwhen no tokens are specified is the right behavior for the SwapWidget's prefill prop.
72-95: LGTM! SwapWidget integration follows standard patterns.The widget configuration and event handlers are correctly implemented. The
onSuccessandonErrorcallbacks appropriately notify the parent window of swap outcomes.
| const client = useMemo( | ||
| () => | ||
| getConfiguredThirdwebClient({ | ||
| clientId: NEXT_PUBLIC_SWAP_IFRAME_CLIENT_ID, | ||
| secretKey: undefined, | ||
| teamId: undefined, | ||
| }), | ||
| [], | ||
| ); |
There was a problem hiding this comment.
Critical: Missing validation for required environment variable.
NEXT_PUBLIC_SWAP_IFRAME_CLIENT_ID is used without validation at line 33. If this environment variable is undefined, the swap widget will fail to initialize properly, likely resulting in authentication or connection errors that are difficult to debug.
🔎 Recommended validation pattern
Add validation at component initialization:
export function SwapWidgetEmbed({
buyChainId,
buyTokenAddress,
buyAmount,
sellChainId,
sellTokenAddress,
sellAmount,
showThirdwebBranding,
theme,
currency,
}: {
buyChainId?: number;
buyTokenAddress?: Address;
buyAmount?: string;
sellChainId?: number;
sellTokenAddress?: Address;
sellAmount?: string;
showThirdwebBranding?: boolean;
theme: "light" | "dark";
currency?: SupportedFiatCurrency;
}) {
+ if (!NEXT_PUBLIC_SWAP_IFRAME_CLIENT_ID) {
+ throw new Error(
+ "NEXT_PUBLIC_SWAP_IFRAME_CLIENT_ID environment variable is required"
+ );
+ }
+
const client = useMemo(
() =>
getConfiguredThirdwebClient({
clientId: NEXT_PUBLIC_SWAP_IFRAME_CLIENT_ID,
secretKey: undefined,
teamId: undefined,
}),
[],
);Alternatively, render an error UI similar to the invalid configuration handling in checkout-widget/page.tsx (lines 80-115).
Committable suggestion skipped: line range outside the PR's diff.
🤖 Prompt for AI Agents
In @apps/dashboard/src/app/bridge/swap-widget/SwapWidgetEmbed.client.tsx around
lines 30-38, The code calls getConfiguredThirdwebClient with
NEXT_PUBLIC_SWAP_IFRAME_CLIENT_ID without validating it; add a check at
component initialization (before useMemo or inside it) to verify
NEXT_PUBLIC_SWAP_IFRAME_CLIENT_ID is defined and non-empty, and if not either
throw a clear error or render an error fallback UI (follow the invalid
configuration handling pattern used in checkout-widget/page.tsx lines ~80-115);
update the useMemo call that creates the client (getConfiguredThirdwebClient) to
only run when the validated clientId exists and include a descriptive log or
error message to aid debugging.
PR-Codex overview
This PR introduces a new
NEXT_PUBLIC_SWAP_IFRAME_CLIENT_IDconstant, updates security policies for swap widgets, and refactors theProviderscomponent toBridgeProvidersLite. It also adds theSwapWidgetEmbedcomponent for handling token swaps.Detailed summary
NEXT_PUBLIC_SWAP_IFRAME_CLIENT_IDinpublic-envs.ts.next.config.tswith new content security policies for swap widgets.BridgeProvidersLitecomponent inProviders.client.tsx.SwapWidgetEmbedcomponent for token swaps inSwapWidgetEmbed.client.tsx.BridgeProvidersLiteinstead ofProviders.Summary by CodeRabbit
New Features
Changes
Chores
✏️ Tip: You can customize this high-level summary in your review settings.