[MNY-346] Playground: Add CheckoutWidget iframe #8591
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
WalkthroughAdds optional Changes
Sequence Diagram(s)mermaid Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 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 |
github-actions
bot
added
Dashboard
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. |
MananTank
changed the title
![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 (3)
apps/playground-web/src/app/bridge/components/buildCheckoutIframeUrl.ts (1)
6-9: Unused parameter_typeshould be documented or removed.The
_typeparameter is prefixed with underscore indicating it's intentionally unused, but its purpose isn't clear. Consider adding a comment explaining why it exists (perhaps for future use or API consistency) or removing it if not needed.💡 Suggested improvement
export function buildCheckoutIframeUrl( options: BridgeComponentsPlaygroundOptions, - _type: "code" | "preview", + _type: "code" | "preview", // Reserved for future differentiation between code and preview URLs ) {apps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsx (2)
35-46: Consider handling the undefined case explicitly.On line 42, if
tabisundefined, this would set?tab=(empty string) in the URL. While this edge case may be unreachable in the current usage (sinceintegrationTypeis always set from defaults or props), adding an explicit guard would make the intent clearer.🔎 Suggested improvement
function updatePageUrl( tab: BridgeComponentsPlaygroundOptions["integrationType"], ) { + if (!tab) return; + const url = new URL(window.location.href); if (tab === defaultOptions.integrationType) { url.searchParams.delete("tab"); } else { - url.searchParams.set("tab", tab || ""); + url.searchParams.set("tab", tab); } window.history.replaceState({}, "", url.toString()); }
58-67: Consider usingresolvedThemefor accurate theme detection.The
useThemehook from next-themes provides boththeme(which can be"system") andresolvedTheme(the actual applied theme). Whenthemeis"system", the current logic defaults to"light", which may not match the user's actual system preference.🔎 Suggested improvement
export function CheckoutPlayground(props: { defaultTab?: "iframe" | "react" }) { - const { theme } = useTheme(); + const { resolvedTheme } = useTheme(); const [options, setOptions] = useState<BridgeComponentsPlaygroundOptions>( () => ({ ...defaultOptions, integrationType: props.defaultTab || defaultOptions.integrationType, }), ); // Change theme on global theme change useEffect(() => { setOptions((prev) => ({ ...prev, theme: { ...prev.theme, - type: theme === "dark" ? "dark" : "light", + type: resolvedTheme === "dark" ? "dark" : "light", }, })); - }, [theme]); + }, [resolvedTheme]);
📜 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 (10)
apps/dashboard/src/app/bridge/checkout-widget/CheckoutWidgetEmbed.client.tsxapps/dashboard/src/app/bridge/checkout-widget/page.tsxapps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsxapps/playground-web/src/app/bridge/checkout-widget/page.tsxapps/playground-web/src/app/bridge/components/CodeGen.tsxapps/playground-web/src/app/bridge/components/LeftSection.tsxapps/playground-web/src/app/bridge/components/RightSection.tsxapps/playground-web/src/app/bridge/components/buildCheckoutIframeUrl.tsapps/playground-web/src/app/bridge/components/types.tsapps/portal/src/app/bridge/checkout-widget/iframe/page.mdx
🧰 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@/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/playground-web/src/app/bridge/components/LeftSection.tsxapps/playground-web/src/app/bridge/checkout-widget/page.tsxapps/dashboard/src/app/bridge/checkout-widget/CheckoutWidgetEmbed.client.tsxapps/playground-web/src/app/bridge/components/CodeGen.tsxapps/playground-web/src/app/bridge/components/RightSection.tsxapps/playground-web/src/app/bridge/components/types.tsapps/playground-web/src/app/bridge/components/buildCheckoutIframeUrl.tsapps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsxapps/dashboard/src/app/bridge/checkout-widget/page.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/playground-web/src/app/bridge/components/LeftSection.tsxapps/playground-web/src/app/bridge/checkout-widget/page.tsxapps/dashboard/src/app/bridge/checkout-widget/CheckoutWidgetEmbed.client.tsxapps/playground-web/src/app/bridge/components/CodeGen.tsxapps/playground-web/src/app/bridge/components/RightSection.tsxapps/playground-web/src/app/bridge/components/types.tsapps/playground-web/src/app/bridge/components/buildCheckoutIframeUrl.tsapps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsxapps/dashboard/src/app/bridge/checkout-widget/page.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/playground-web/src/app/bridge/components/LeftSection.tsxapps/playground-web/src/app/bridge/checkout-widget/page.tsxapps/dashboard/src/app/bridge/checkout-widget/CheckoutWidgetEmbed.client.tsxapps/playground-web/src/app/bridge/components/CodeGen.tsxapps/playground-web/src/app/bridge/components/RightSection.tsxapps/playground-web/src/app/bridge/components/types.tsapps/playground-web/src/app/bridge/components/buildCheckoutIframeUrl.tsapps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsxapps/dashboard/src/app/bridge/checkout-widget/page.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Lazy-import optional features; avoid top-level side-effects
Files:
apps/playground-web/src/app/bridge/components/LeftSection.tsxapps/playground-web/src/app/bridge/checkout-widget/page.tsxapps/dashboard/src/app/bridge/checkout-widget/CheckoutWidgetEmbed.client.tsxapps/playground-web/src/app/bridge/components/CodeGen.tsxapps/playground-web/src/app/bridge/components/RightSection.tsxapps/playground-web/src/app/bridge/components/types.tsapps/playground-web/src/app/bridge/components/buildCheckoutIframeUrl.tsapps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsxapps/dashboard/src/app/bridge/checkout-widget/page.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/checkout-widget/CheckoutWidgetEmbed.client.tsxapps/dashboard/src/app/bridge/checkout-widget/page.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/checkout-widget/CheckoutWidgetEmbed.client.tsxapps/dashboard/src/app/bridge/checkout-widget/page.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/checkout-widget/CheckoutWidgetEmbed.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/checkout-widget/CheckoutWidgetEmbed.client.tsxapps/dashboard/src/app/bridge/checkout-widget/page.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/checkout-widget/CheckoutWidgetEmbed.client.tsxapps/dashboard/src/app/bridge/checkout-widget/page.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 (7)
apps/playground-web/src/app/bridge/components/LeftSection.tsx (1)
apps/playground-web/src/app/wallets/sign-in/components/ColorFormGroup.tsx (1)
ColorFormGroup(9-111)
apps/playground-web/src/app/bridge/checkout-widget/page.tsx (1)
apps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsx (1)
CheckoutPlayground(48-105)
apps/playground-web/src/app/bridge/components/CodeGen.tsx (2)
apps/playground-web/src/app/bridge/components/types.ts (1)
BridgeComponentsPlaygroundOptions(33-63)apps/playground-web/src/app/bridge/components/buildCheckoutIframeUrl.ts (1)
buildCheckoutIframeUrl(6-66)
apps/playground-web/src/app/bridge/components/RightSection.tsx (1)
apps/playground-web/src/app/bridge/components/buildCheckoutIframeUrl.ts (1)
buildCheckoutIframeUrl(6-66)
apps/playground-web/src/app/bridge/components/buildCheckoutIframeUrl.ts (1)
apps/playground-web/src/app/bridge/components/types.ts (1)
BridgeComponentsPlaygroundOptions(33-63)
apps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsx (3)
apps/playground-web/src/app/bridge/components/types.ts (1)
BridgeComponentsPlaygroundOptions(33-63)apps/playground-web/src/app/bridge/components/LeftSection.tsx (1)
LeftSection(21-521)apps/playground-web/src/app/bridge/components/RightSection.tsx (1)
RightSection(30-183)
apps/dashboard/src/app/bridge/checkout-widget/page.tsx (1)
apps/dashboard/src/app/bridge/_common/parseQueryParams.ts (1)
parseQueryParams(3-11)
⏰ 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, webpack)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Build Packages
- GitHub Check: Unit Tests
- GitHub Check: Lint Packages
- GitHub Check: Size
- GitHub Check: Analyze (javascript)
🔇 Additional comments (18)
apps/portal/src/app/bridge/checkout-widget/iframe/page.mdx (1)
132-154: LGTM! Documentation clearly explains the new payment methods parameter.The documentation accurately describes the new
paymentMethodsquery parameter with clear examples. The structure is consistent with other sections and the examples effectively demonstrate both crypto-only and card-only modes.apps/playground-web/src/app/bridge/components/types.ts (1)
34-34: LGTM! Clean type extension.The optional
integrationTypefield is well-typed with a clear union type and enables the iframe/React rendering modes introduced in this PR.apps/playground-web/src/app/bridge/components/LeftSection.tsx (1)
487-500: LGTM! Appropriate conditional rendering for iframe mode.The ColorFormGroup is correctly hidden when the checkout widget is in iframe mode, as color customization isn't applicable to iframe integrations. The comment clarifies the intent.
apps/playground-web/src/app/bridge/components/RightSection.tsx (1)
160-175: LGTM! Proper iframe integration with appropriate fallback.The conditional rendering correctly switches between iframe and React widget based on integration type. The iframe attributes are well-configured with smooth animation.
apps/playground-web/src/app/bridge/components/CodeGen.tsx (3)
29-30: LGTM! Clean conditional flag.The
isIframeflag correctly determines when to generate iframe code based on widget type and integration type.
37-42: LGTM! Proper conditional code generation.The code generation appropriately switches between iframe HTML and React/TypeScript code based on the integration type, with correct language specification for syntax highlighting.
49-59: LGTM! Clean iframe HTML generation.The
getIframeCodefunction generates well-formatted HTML with appropriate iframe attributes. The use ofbuildCheckoutIframeUrlensures consistency with the preview rendering.apps/playground-web/src/app/bridge/components/buildCheckoutIframeUrl.ts (1)
54-63: Verify behavior when no payment methods are selected.The logic only adds the
paymentMethodsparameter when exactly one method is selected. If both are selected or neither is selected, no parameter is added. Confirm this aligns with the API behavior—specifically, ensure that an emptypaymentMethodsarray is handled correctly by the widget.apps/dashboard/src/app/bridge/checkout-widget/page.tsx (2)
71-77: LGTM! Clean parameter parsing with proper validation.The
paymentMethodsquery parameter is correctly parsed and validated, returning a typed array for valid values ("crypto" or "card") and undefined otherwise. The single-method constraint aligns with the iframe URL builder implementation.
136-136: LGTM! Parameter properly propagated to CheckoutWidgetEmbed.The parsed
paymentMethodsvalue is correctly passed to the CheckoutWidgetEmbed component.apps/playground-web/src/app/bridge/checkout-widget/page.tsx (4)
13-14: LGTM! Proper type-safe tab definitions.The
validTabsconstant withas constand derivedValidTabstype provide strong typing for the tab validation logic.
25-36: LGTM! Correct async implementation for Next.js 15.The page component properly handles the async searchParams Promise as required by Next.js 15. The tab extraction and validation logic correctly handles edge cases and provides type safety.
44-44: Verify the documentation link update is intentional.The
docsLinkwas changed from a previous path tohttps://portal.thirdweb.com/bridge/checkout-widget?utm_source=playground. Confirm this new URL is correct and the documentation exists at this location.
46-46: LGTM! Tab preference correctly passed to playground.The validated tab is properly passed as
defaultTabto enable URL-driven tab selection between iframe and React modes.apps/dashboard/src/app/bridge/checkout-widget/CheckoutWidgetEmbed.client.tsx (1)
37-37: LGTM!Clean prop forwarding implementation. The
paymentMethodsprop is correctly typed as an optional array of string literals and properly passed through to the underlyingCheckoutWidgetcomponent.Also applies to: 52-52, 84-84
apps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsx (3)
3-12: LGTM!Imports follow the coding guidelines with
TabButtonsfrom@/components/ui/*. TheintegrationTypedefault is correctly initialized.
75-89: LGTM!The tab switching implementation is clean with proper active state tracking via
isActiveand controlled state updates.
91-101: LGTM!The layout follows mobile-first responsive design with Tailwind utilities. The
LeftSectionandRightSectionare properly wired with state management props.
MananTank
force-pushed
the
12-29-playground_add_checkoutwidget_iframe
branch
from
d5397aa to
8b9bf79
Compare
There was a problem hiding this comment.
Actionable comments posted: 3
🧹 Nitpick comments (1)
apps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsx (1)
79-79: State update pattern may lose concurrent updates.Using object spread with the current
optionsfrom closure can lose concurrent state updates. Use the functional setState pattern to ensure all updates are based on the latest state.🔎 Proposed fix
{ name: "React", - onClick: () => setOptions({ ...options, integrationType: "react" }), + onClick: () => setOptions(prev => ({ ...prev, integrationType: "react" })), isActive: options.integrationType === "react", }, { name: "Iframe", - onClick: () => - setOptions({ ...options, integrationType: "iframe" }), + onClick: () => setOptions(prev => ({ ...prev, integrationType: "iframe" })), isActive: options.integrationType === "iframe", },Also applies to: 84-85
📜 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 (10)
apps/dashboard/src/app/bridge/checkout-widget/CheckoutWidgetEmbed.client.tsxapps/dashboard/src/app/bridge/checkout-widget/page.tsxapps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsxapps/playground-web/src/app/bridge/checkout-widget/page.tsxapps/playground-web/src/app/bridge/components/CodeGen.tsxapps/playground-web/src/app/bridge/components/LeftSection.tsxapps/playground-web/src/app/bridge/components/RightSection.tsxapps/playground-web/src/app/bridge/components/buildCheckoutIframeUrl.tsapps/playground-web/src/app/bridge/components/types.tsapps/portal/src/app/bridge/checkout-widget/iframe/page.mdx
🚧 Files skipped from review as they are similar to previous changes (5)
- apps/dashboard/src/app/bridge/checkout-widget/page.tsx
- apps/playground-web/src/app/bridge/components/RightSection.tsx
- apps/playground-web/src/app/bridge/components/CodeGen.tsx
- apps/playground-web/src/app/bridge/components/types.ts
- apps/portal/src/app/bridge/checkout-widget/iframe/page.mdx
🧰 Additional context used
📓 Path-based instructions (9)
**/*.{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/checkout-widget/CheckoutWidgetEmbed.client.tsxapps/playground-web/src/app/bridge/components/buildCheckoutIframeUrl.tsapps/playground-web/src/app/bridge/checkout-widget/page.tsxapps/playground-web/src/app/bridge/components/LeftSection.tsxapps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.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/checkout-widget/CheckoutWidgetEmbed.client.tsxapps/playground-web/src/app/bridge/components/buildCheckoutIframeUrl.tsapps/playground-web/src/app/bridge/checkout-widget/page.tsxapps/playground-web/src/app/bridge/components/LeftSection.tsxapps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.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/checkout-widget/CheckoutWidgetEmbed.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/checkout-widget/CheckoutWidgetEmbed.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/checkout-widget/CheckoutWidgetEmbed.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/checkout-widget/CheckoutWidgetEmbed.client.tsxapps/playground-web/src/app/bridge/components/buildCheckoutIframeUrl.tsapps/playground-web/src/app/bridge/checkout-widget/page.tsxapps/playground-web/src/app/bridge/components/LeftSection.tsxapps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.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/checkout-widget/CheckoutWidgetEmbed.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/checkout-widget/CheckoutWidgetEmbed.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/checkout-widget/CheckoutWidgetEmbed.client.tsxapps/playground-web/src/app/bridge/components/buildCheckoutIframeUrl.tsapps/playground-web/src/app/bridge/checkout-widget/page.tsxapps/playground-web/src/app/bridge/components/LeftSection.tsxapps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsx
🧬 Code graph analysis (3)
apps/playground-web/src/app/bridge/components/buildCheckoutIframeUrl.ts (1)
apps/playground-web/src/app/bridge/components/types.ts (1)
BridgeComponentsPlaygroundOptions(33-63)
apps/playground-web/src/app/bridge/checkout-widget/page.tsx (1)
apps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsx (1)
CheckoutPlayground(48-105)
apps/playground-web/src/app/bridge/components/LeftSection.tsx (1)
apps/playground-web/src/app/wallets/sign-in/components/ColorFormGroup.tsx (1)
ColorFormGroup(9-111)
⏰ 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). (6)
- GitHub Check: Lint Packages
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Unit Tests
- GitHub Check: Size
- GitHub Check: Build Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (5)
apps/dashboard/src/app/bridge/checkout-widget/CheckoutWidgetEmbed.client.tsx (1)
37-37: LGTM! Clean prop forwarding for payment methods.The addition of the optional
paymentMethodsprop is correctly typed and forwarded to the underlyingCheckoutWidgetcomponent.Also applies to: 52-52, 84-84
apps/playground-web/src/app/bridge/components/LeftSection.tsx (1)
487-500: LGTM! Appropriate conditional rendering for iframe mode.Hiding the color customization UI when using iframe integration makes sense, as the iframe likely doesn't support theme color overrides (only light/dark mode selection is available).
apps/playground-web/src/app/bridge/checkout-widget/page.tsx (2)
13-14: LGTM! Correct Next.js 15 async searchParams handling.The implementation correctly:
- Uses async function with Promise-based searchParams (Next.js 15 requirement)
- Validates tab against allowed values with proper type guards
- Handles edge cases (array values, undefined, invalid strings)
- Falls back to undefined for invalid tabs
Also applies to: 25-36
44-44: Documentation link is valid and accessible.The URL correctly points to published documentation that covers checkout widget iframe integration. No action required.
apps/playground-web/src/app/bridge/components/buildCheckoutIframeUrl.ts (1)
54-62: The single payment method restriction is intentional but silently fails with multiple methods.The iframe API only supports a single payment method via the
paymentMethodsquery parameter. The code correctly avoids passing invalid data when multiple methods are configured, but this creates a silent failure: if an array has 2+ elements, nothing is sent to the iframe (defaulting to both methods enabled).The documentation references "comma-separated" values, but the iframe endpoint doesn't parse them—it only accepts single string values ("crypto" or "card"). Consider either:
- Documenting that only single-method configuration is supported
- Supporting comma-separated values in the iframe parser if the API can handle multiple methods
- Warning developers when they attempt multi-method configuration on the iframe URL builder
apps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsx
Show resolved
Hide resolved
apps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsx
Show resolved
Hide resolved
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8591 +/- ##
=======================================
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 support for customizable payment methods in the `checkout` widget, allowing users to select between "crypto" and "card" options. It also refines the integration type handling and enhances the iframe functionality for the checkout experience.
### Detailed summary
- Added `integrationType` option to `BridgeComponentsPlaygroundOptions`.
- Introduced `paymentMethods` parsing in `page.tsx` for checkout widget.
- Updated `LeftSection` to conditionally render `ColorFormGroup`.
- Enhanced `CheckoutWidgetEmbed` to accept `paymentMethods`.
- Modified `RightSection` to support iframe rendering for checkout.
- Created `buildCheckoutIframeUrl` function to generate URLs with payment methods.
- Updated `CodeGen` to handle iframe code generation.
- Added documentation for payment methods in `iframe` page.
- Adjusted `CheckoutPlayground` to manage integration types and theme changes.
> ✨ 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**
* Checkout widget: optional paymentMethods filter (crypto or card) and iframe integration.
* Playground: tab-based switcher (React / Iframe), URL state persistence, and theme-aware preview.
* Preview/code generation: iframe-specific preview and HTML snippet export for iframe integration.
* **Documentation**
* Added "Payment Methods" docs for iframe integration with examples.
<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
12-29-playground_add_checkoutwidget_iframe
branch
from
8b9bf79 to
805b838
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (2)
apps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsx (2)
35-46: Add explicit return type annotation.Following TypeScript best practices, add a
voidreturn type to the function declaration.🔎 Proposed fix
function updatePageUrl( tab: BridgeComponentsPlaygroundOptions["integrationType"], -) { +): void {Based on coding guidelines, explicit return types should be added to function declarations.
59-67: Theme sync may override user selections.The global theme sync unconditionally updates the playground theme whenever the system/global theme changes. This means if a user explicitly selects a theme in the playground but their system theme switches, their selection will be overridden.
Consider tracking whether the user has explicitly set a theme and skip sync if they have, or make this behavior opt-in with a toggle.
📜 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 (10)
apps/dashboard/src/app/bridge/checkout-widget/CheckoutWidgetEmbed.client.tsxapps/dashboard/src/app/bridge/checkout-widget/page.tsxapps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsxapps/playground-web/src/app/bridge/checkout-widget/page.tsxapps/playground-web/src/app/bridge/components/CodeGen.tsxapps/playground-web/src/app/bridge/components/LeftSection.tsxapps/playground-web/src/app/bridge/components/RightSection.tsxapps/playground-web/src/app/bridge/components/buildCheckoutIframeUrl.tsapps/playground-web/src/app/bridge/components/types.tsapps/portal/src/app/bridge/checkout-widget/iframe/page.mdx
🚧 Files skipped from review as they are similar to previous changes (7)
- apps/dashboard/src/app/bridge/checkout-widget/page.tsx
- apps/dashboard/src/app/bridge/checkout-widget/CheckoutWidgetEmbed.client.tsx
- apps/playground-web/src/app/bridge/components/buildCheckoutIframeUrl.ts
- apps/playground-web/src/app/bridge/components/LeftSection.tsx
- apps/playground-web/src/app/bridge/components/CodeGen.tsx
- apps/playground-web/src/app/bridge/components/types.ts
- apps/portal/src/app/bridge/checkout-widget/iframe/page.mdx
🧰 Additional context used
📓 Path-based instructions (4)
**/*.{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/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsxapps/playground-web/src/app/bridge/checkout-widget/page.tsxapps/playground-web/src/app/bridge/components/RightSection.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/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsxapps/playground-web/src/app/bridge/checkout-widget/page.tsxapps/playground-web/src/app/bridge/components/RightSection.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/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsxapps/playground-web/src/app/bridge/checkout-widget/page.tsxapps/playground-web/src/app/bridge/components/RightSection.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Lazy-import optional features; avoid top-level side-effects
Files:
apps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsxapps/playground-web/src/app/bridge/checkout-widget/page.tsxapps/playground-web/src/app/bridge/components/RightSection.tsx
🧬 Code graph analysis (3)
apps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsx (3)
apps/playground-web/src/app/bridge/components/types.ts (1)
BridgeComponentsPlaygroundOptions(33-63)apps/playground-web/src/app/bridge/components/LeftSection.tsx (1)
LeftSection(21-521)apps/playground-web/src/app/bridge/components/RightSection.tsx (1)
RightSection(30-183)
apps/playground-web/src/app/bridge/checkout-widget/page.tsx (1)
apps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsx (1)
CheckoutPlayground(48-105)
apps/playground-web/src/app/bridge/components/RightSection.tsx (1)
apps/playground-web/src/app/bridge/components/buildCheckoutIframeUrl.ts (1)
buildCheckoutIframeUrl(6-65)
⏰ 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, esbuild)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Size
- GitHub Check: Lint Packages
- GitHub Check: Build Packages
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Unit Tests
- GitHub Check: Analyze (javascript)
🔇 Additional comments (8)
apps/playground-web/src/app/bridge/components/RightSection.tsx (1)
18-18: LGTM!The import is correctly added and used in the iframe rendering logic below.
apps/playground-web/src/app/bridge/checkout-widget/page.tsx (3)
13-14: LGTM!Good use of const assertion to derive the union type from the array values, ensuring type safety and a single source of truth.
25-36: LGTM!The async/await pattern correctly follows Next.js 15's async searchParams API. The validation logic safely narrows the type with the
includescheck before the type assertion.
46-46: LGTM!The validated
defaultTabis correctly passed toCheckoutPlayground, withundefinedas a safe fallback when no valid tab is present.apps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsx (4)
3-6: LGTM!All new imports are correctly used:
useThemefor theme synchronization,useEffectfor side effects, andTabButtonsfor the tab UI.
12-12: LGTM!Setting
"react"as the default integration type is appropriate and aligns with the component's initial rendering behavior.
48-56: LGTM!The component signature correctly accepts an optional
defaultTabprop, and state initialization properly falls back to the default value when the prop is undefined.
74-103: LGTM!The tab-driven UI structure is well-implemented with proper state management and responsive layout classes. The object spread pattern in the onClick handlers correctly ensures immutable state updates.
| {previewTab === "ui" && | ||
| (props.widget === "checkout" && | ||
| props.options.integrationType === "iframe" ? ( | ||
| <iframe | ||
| src={buildCheckoutIframeUrl(props.options)} | ||
| height="700px" | ||
| width="100%" | ||
| title="Checkout Widget" | ||
| className="fade-in-0 animate-in rounded-xl duration-500" | ||
| style={{ | ||
| border: "0", | ||
| }} | ||
| /> | ||
| ) : ( | ||
| embed | ||
| ))} |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Replace inline style with Tailwind class.
The inline style prop at lines 169-171 violates the coding guidelines, which require Tailwind CSS only with no inline styles.
🔎 Proposed fix
<iframe
src={buildCheckoutIframeUrl(props.options)}
height="700px"
width="100%"
title="Checkout Widget"
- className="fade-in-0 animate-in rounded-xl duration-500"
- style={{
- border: "0",
- }}
+ className="fade-in-0 animate-in rounded-xl border-0 duration-500"
/>Based on coding guidelines, inline styles should be avoided in favor of Tailwind utility classes.
🤖 Prompt for AI Agents
In apps/playground-web/src/app/bridge/components/RightSection.tsx around lines
160 to 175, the iframe uses an inline style prop (style={{ border: "0" }}),
which violates the Tailwind-only guideline; remove the style prop and add the
equivalent Tailwind utility (e.g., include "border-0") to the iframe's className
string, ensuring you preserve the existing classes ("fade-in-0 animate-in
rounded-xl duration-500") and spacing when updating className.
PR-Codex overview
This PR introduces support for customizable payment methods in the
CheckoutWidget, allowing users to specify whether to accept crypto, card payments, or both. It also enhances the integration type options for the widget and improves the iframe embedding functionality.Detailed summary
integrationTypeoption toBridgeComponentsPlaygroundOptions("iframe"|"react").paymentMethodsparameter for specifying accepted payment types.CheckoutWidgetEmbedto accept and utilizepaymentMethods.RightSectionto render an iframe for the checkout widget based on integration type.CodeGento generate iframe code dynamically.buildCheckoutIframeUrlto include payment methods in the generated URL.CheckoutPlaygroundto manage integration type and update the page URL accordingly.Summary by CodeRabbit
New Features
Documentation
✏️ Tip: You can customize this high-level summary in your review settings.