[MNY-345] Portal: Add Checkout widget iframe docs #8581
Conversation
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughRefactors checkout embed messaging to send a single structured content object; adds an iframe code-preview React component; introduces MDX docs for Checkout and Swap widgets; updates swap image extensions; and reorganizes the portal sidebar to surface widget docs and links. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Pre-merge checks and finishing touches❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
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. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8581 +/- ##
=======================================
Coverage 53.24% 53.24%
=======================================
Files 922 922
Lines 61414 61414
Branches 4026 4026
=======================================
Hits 32699 32699
Misses 28617 28617
Partials 98 98
🚀 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: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/dashboard/src/app/bridge/checkout-widget/CheckoutWidgetEmbed.client.tsx (1)
103-110: Improve type safety for message payload.The
content: objectparameter is too loose and bypasses TypeScript's type checking. Consider defining a proper type for the message structure to ensure type safety and document the expected payload shape.🔎 Proposed fix
+type CheckoutWidgetMessage = + | { source: "checkout-widget"; type: "success" } + | { source: "checkout-widget"; type: "error"; message: string }; + -function sendMessageToParent(content: object) { +function sendMessageToParent(content: CheckoutWidgetMessage): void { try { window.parent.postMessage(content, "*"); } catch (error) { console.error("Failed to send post message to parent window"); console.error(error); } }Based on coding guidelines: "Avoid any and unknown unless unavoidable" and "Write idiomatic TypeScript with explicit function declarations and return types"
📜 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 ignored due to path filters (2)
apps/portal/src/app/bridge/checkout-widget/checkout-widget-dark.jpgis excluded by!**/*.jpgapps/portal/src/app/bridge/checkout-widget/checkout-widget.jpgis excluded by!**/*.jpg
📒 Files selected for processing (6)
apps/dashboard/src/app/bridge/checkout-widget/CheckoutWidgetEmbed.client.tsx(1 hunks)apps/portal/src/app/bridge/checkout-widget/iframe/iframe-code-preview.tsx(1 hunks)apps/portal/src/app/bridge/checkout-widget/iframe/page.mdx(1 hunks)apps/portal/src/app/bridge/checkout-widget/page.mdx(1 hunks)apps/portal/src/app/bridge/checkout-widget/react/page.mdx(1 hunks)apps/portal/src/app/bridge/sidebar.tsx(2 hunks)
🧰 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/portal/src/app/bridge/checkout-widget/iframe/iframe-code-preview.tsxapps/dashboard/src/app/bridge/checkout-widget/CheckoutWidgetEmbed.client.tsxapps/portal/src/app/bridge/sidebar.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/portal/src/app/bridge/checkout-widget/iframe/iframe-code-preview.tsxapps/dashboard/src/app/bridge/checkout-widget/CheckoutWidgetEmbed.client.tsxapps/portal/src/app/bridge/sidebar.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Lazy-import optional features; avoid top-level side-effects
Files:
apps/portal/src/app/bridge/checkout-widget/iframe/iframe-code-preview.tsxapps/dashboard/src/app/bridge/checkout-widget/CheckoutWidgetEmbed.client.tsxapps/portal/src/app/bridge/sidebar.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.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
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
⏰ 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, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Lint Packages
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Unit Tests
- GitHub Check: Analyze (javascript)
🔇 Additional comments (6)
apps/portal/src/app/bridge/sidebar.tsx (1)
22-102: LGTM! Navigation restructuring is well-organized.The sidebar restructuring clearly separates Widgets (Bridge Widget, Checkout Widget) from Guides, and the nested link structure is consistent and follows established patterns.
apps/dashboard/src/app/bridge/checkout-widget/CheckoutWidgetEmbed.client.tsx (1)
86-98: LGTM! Message structure is well-designed.The refactored message structure with explicit
sourceandtypefields is clean and matches the documentation examples in the iframe page. The error handling includes the error message appropriately.apps/portal/src/app/bridge/checkout-widget/react/page.mdx (1)
1-98: LGTM! Documentation is clear and well-structured.The React component documentation provides clear examples, proper metadata, and helpful links to API reference and playground. The code examples are syntactically correct and demonstrate both basic usage and ThirdwebProvider setup.
apps/portal/src/app/bridge/checkout-widget/page.mdx (1)
1-71: LGTM! Overview page provides clear navigation.The overview page effectively introduces the Checkout widget features and provides clear navigation to integration options (iframe and React component). The metadata and structure are consistent with other documentation pages.
apps/portal/src/app/bridge/checkout-widget/iframe/page.mdx (2)
139-157: LGTM! Event listening documentation matches implementation perfectly.The postMessage event structure documented here (checking
source,type, andmessagefields) aligns exactly with the payload structure sent byCheckoutWidgetEmbed.client.tsx. The origin verification is also a good security practice.
1-157: Well-documented iframe integration guide.The page provides comprehensive documentation for iframe integration, including required parameters, customization options, and event handling. The examples using
IframeCodePrevieweffectively demonstrate both code and live previews.
apps/portal/src/app/bridge/checkout-widget/iframe/iframe-code-preview.tsx
Show resolved
Hide resolved
apps/portal/src/app/bridge/checkout-widget/iframe/iframe-code-preview.tsx
Show resolved
Hide resolved
size-limit report 📦
|
There was a problem hiding this comment.
Actionable comments posted: 0
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
apps/portal/src/app/bridge/sidebar.tsx (1)
116-125: Fix React reference link across multiple sidebar files.Both TypeScript and React entries incorrectly link to
/references/typescript/v5. No/references/reactdocumentation exists in the codebase. This pattern appears in multiple sidebar files (bridge, x402, wallets, react/v5). Either provide React reference documentation at a distinct URL, or clarify the intended behavior with a comment if the shared reference is intentional.
🧹 Nitpick comments (1)
apps/portal/src/app/bridge/checkout-widget/iframe/page.mdx (1)
139-156: Consider improving code indentation in the event listener example.The nested
ifblocks inside the origin check have inconsistent indentation, which may confuse readers. The innerifstatements appear at the same indentation level as the outer block's body.🔎 Suggested formatting improvement
window.addEventListener("message", (event) => { - // verify that message is from thirdweb checkout widget iframe if ( event.origin === "https://thirdweb.com" && event.data.source === "checkout-widget" ) { - - if (event.data.type === "success") { - console.log("Purchase successful!"); - } - - if (event.data.type === "error") { - console.error("Purchase failed with error:", event.data.message); - } + if (event.data.type === "success") { + console.log("Purchase successful!"); + } + + if (event.data.type === "error") { + console.error("Purchase failed with error:", event.data.message); + } } - });
📜 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 ignored due to path filters (6)
apps/portal/src/app/bridge/checkout-widget/checkout-widget-dark.jpgis excluded by!**/*.jpgapps/portal/src/app/bridge/checkout-widget/checkout-widget.jpgis excluded by!**/*.jpgapps/portal/src/app/bridge/swap/swap-dark.jpgis excluded by!**/*.jpgapps/portal/src/app/bridge/swap/swap-dark.pngis excluded by!**/*.pngapps/portal/src/app/bridge/swap/swap-light.jpgis excluded by!**/*.jpgapps/portal/src/app/bridge/swap/swap-light.pngis excluded by!**/*.png
📒 Files selected for processing (8)
apps/dashboard/src/app/bridge/checkout-widget/CheckoutWidgetEmbed.client.tsx(1 hunks)apps/portal/src/app/bridge/checkout-widget/iframe/iframe-code-preview.tsx(1 hunks)apps/portal/src/app/bridge/checkout-widget/iframe/page.mdx(1 hunks)apps/portal/src/app/bridge/checkout-widget/page.mdx(1 hunks)apps/portal/src/app/bridge/checkout-widget/react/page.mdx(1 hunks)apps/portal/src/app/bridge/sidebar.tsx(2 hunks)apps/portal/src/app/bridge/swap-widget/page.mdx(1 hunks)apps/portal/src/app/bridge/swap/page.mdx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- apps/portal/src/app/bridge/swap/page.mdx
🚧 Files skipped from review as they are similar to previous changes (4)
- apps/dashboard/src/app/bridge/checkout-widget/CheckoutWidgetEmbed.client.tsx
- apps/portal/src/app/bridge/checkout-widget/react/page.mdx
- apps/portal/src/app/bridge/checkout-widget/iframe/iframe-code-preview.tsx
- apps/portal/src/app/bridge/checkout-widget/page.mdx
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{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/portal/src/app/bridge/sidebar.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/portal/src/app/bridge/sidebar.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Lazy-import optional features; avoid top-level side-effects
Files:
apps/portal/src/app/bridge/sidebar.tsx
🪛 Gitleaks (8.30.0)
apps/portal/src/app/bridge/swap-widget/page.mdx
[high] 84-84: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
[high] 115-115: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
[high] 130-130: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
⏰ 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, vite)
- 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 (3)
apps/portal/src/app/bridge/swap-widget/page.mdx (1)
1-157: LGTM!The documentation is well-structured with clear examples covering ThirdwebProvider setup, default token configuration, and various prefill options. The metadata export follows the established pattern.
Note: The static analysis warnings about "Generic API Key" on lines 84, 115, and 130 are false positives - these are well-known public ERC20 token contract addresses (Base USDC:
0x833589fcd6edb6e08f4c7c32d4f71b54bda02913), not secret keys.apps/portal/src/app/bridge/sidebar.tsx (1)
21-61: LGTM!The navigation restructuring is well-organized with clear groupings for Widgets (Bridge Widget, Checkout Widget, Swap Widget) and a separate Guides section. The nested link structure is consistent across widget types.
apps/portal/src/app/bridge/checkout-widget/iframe/page.mdx (1)
1-63: LGTM!The documentation is comprehensive, covering iframe integration parameters, customization options, and the IframeCodePreview component usage. The metadata export follows the established pattern.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/portal/src/app/bridge/sidebar.tsx (1)
63-72: Minor formatting nit: stray empty line in array.Line 72 has an empty line inside the
linksarray. Per the coding guidelines, runningpnpm fixshould normalize formatting if this is unintentional.🔎 Suggested fix
{ href: `${bridgeSlug}/swap`, name: "Swap Tokens", }, - { href: `${bridgeSlug}/fund`,
📜 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 ignored due to path filters (6)
apps/portal/src/app/bridge/checkout-widget/checkout-widget-dark.jpgis excluded by!**/*.jpgapps/portal/src/app/bridge/checkout-widget/checkout-widget.jpgis excluded by!**/*.jpgapps/portal/src/app/bridge/swap/swap-dark.jpgis excluded by!**/*.jpgapps/portal/src/app/bridge/swap/swap-dark.pngis excluded by!**/*.pngapps/portal/src/app/bridge/swap/swap-light.jpgis excluded by!**/*.jpgapps/portal/src/app/bridge/swap/swap-light.pngis excluded by!**/*.png
📒 Files selected for processing (8)
apps/dashboard/src/app/bridge/checkout-widget/CheckoutWidgetEmbed.client.tsx(1 hunks)apps/portal/src/app/bridge/checkout-widget/iframe/iframe-code-preview.tsx(1 hunks)apps/portal/src/app/bridge/checkout-widget/iframe/page.mdx(1 hunks)apps/portal/src/app/bridge/checkout-widget/page.mdx(1 hunks)apps/portal/src/app/bridge/checkout-widget/react/page.mdx(1 hunks)apps/portal/src/app/bridge/sidebar.tsx(2 hunks)apps/portal/src/app/bridge/swap-widget/page.mdx(1 hunks)apps/portal/src/app/bridge/swap/page.mdx(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- apps/portal/src/app/bridge/swap/page.mdx
🚧 Files skipped from review as they are similar to previous changes (4)
- apps/portal/src/app/bridge/checkout-widget/page.mdx
- apps/portal/src/app/bridge/checkout-widget/iframe/page.mdx
- apps/dashboard/src/app/bridge/checkout-widget/CheckoutWidgetEmbed.client.tsx
- apps/portal/src/app/bridge/checkout-widget/react/page.mdx
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{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/portal/src/app/bridge/sidebar.tsxapps/portal/src/app/bridge/checkout-widget/iframe/iframe-code-preview.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/portal/src/app/bridge/sidebar.tsxapps/portal/src/app/bridge/checkout-widget/iframe/iframe-code-preview.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Lazy-import optional features; avoid top-level side-effects
Files:
apps/portal/src/app/bridge/sidebar.tsxapps/portal/src/app/bridge/checkout-widget/iframe/iframe-code-preview.tsx
🪛 Gitleaks (8.30.0)
apps/portal/src/app/bridge/swap-widget/page.mdx
[high] 84-84: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
[high] 115-115: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
[high] 130-130: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
⏰ 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: E2E Tests (pnpm, vite)
- GitHub Check: Lint Packages
- GitHub Check: Unit Tests
- GitHub Check: Build Packages
- GitHub Check: Size
- GitHub Check: Analyze (javascript)
🔇 Additional comments (10)
apps/portal/src/app/bridge/sidebar.tsx (3)
22-42: LGTM!The section rename to "Widgets" and the Bridge Widget nested link structure are well-organized and follow the established patterns in the file.
43-56: LGTM!The Checkout Widget section is well-structured and follows the same pattern as Bridge Widget, maintaining consistency across widget documentation entries.
57-61: LGTM!The Swap Widget entry is appropriately structured as a simple link without nested sub-pages, which is fine if it's a single-page documentation entry.
apps/portal/src/app/bridge/checkout-widget/iframe/iframe-code-preview.tsx (2)
1-1: LGTM!The imports are clean and all components are used within the file.
3-34: Component structure is clean; existing comments remain applicable.The component follows single-responsibility principle and provides a clear code/preview experience. The implementation is straightforward and well-organized.
Note: Previous review comments about the missing explicit return type (line 3) and height consistency (lines 15, 26) are still applicable.
apps/portal/src/app/bridge/swap-widget/page.mdx (5)
1-18: LGTM!The imports and metadata are properly structured. The image format change from PNG to JPG aligns with the PR objectives.
20-39: LGTM!The introduction and features section is clear and comprehensive.
40-69: LGTM!The setup examples are clear and demonstrate proper usage patterns for the SwapWidget component.
71-138: Configuration examples are well-structured; Gitleaks warnings are false positives.The examples clearly demonstrate different configuration scenarios. The Gitleaks warnings on lines 84, 115, and 130 are false positives—these are public Ethereum contract addresses (Base USDC: 0x833589fcd6edb6e08f4c7c32d4f71b54bda02913), not API keys or secrets.
140-157: LGTM!The API reference and playground links provide helpful next steps for users.
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 focuses on updating the `Checkout Widget` and `Swap Widget` components to enhance their functionality and improve user experience, including new image formats, additional features, and documentation updates.
### Detailed summary
- Replaced `.png` images with `.jpg` for `swap-dark` and `swap-light`.
- Added `IframeCodePreview` component for iframe integration in `Checkout Widget`.
- Updated `sendMessageToParent` function to use a single object parameter.
- Enhanced sidebar with new links for `Checkout Widget` and `Swap Widget`.
- Expanded documentation for `Checkout Widget` and `Swap Widget` with features, examples, and API references.
> ✨ 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 an iframe code-preview component with "Code" and "Preview" tabs for live iframe examples.
* **Documentation**
* New Checkout Widget docs (React + iframe) with integration guides, examples, options, and event-listening examples.
* New Swap Widget docs with usage examples and API reference.
* Swap page asset updates (image format changes).
* **Improvements**
* Reorganized sidebar to surface Widgets (Bridge, Checkout, Swap).
* Updated widget postMessage event payload shape — consumers should verify event format.
<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-345
branch
from
afdf71f to
800503d
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (2)
apps/dashboard/src/app/bridge/checkout-widget/CheckoutWidgetEmbed.client.tsx (1)
103-109: Consider restrictingtargetOriginand adding a stricter type forcontent.
Using
"*"astargetOriginallows any window to receive these messages. If the parent origin is known or configurable, restricting it would improve security.The
objecttype is quite permissive. Consider defining a union type for the expected message shapes:🔎 Suggested type improvement
+type CheckoutWidgetMessage = + | { source: "checkout-widget"; type: "success" } + | { source: "checkout-widget"; type: "error"; message: string }; -function sendMessageToParent(content: object) { +function sendMessageToParent(content: CheckoutWidgetMessage) { try { window.parent.postMessage(content, "*");apps/portal/src/app/bridge/checkout-widget/page.mdx (1)
1-6: Unused import:Details.The
Detailscomponent is imported but not used in this file.🔎 Suggested fix
import { - Details, createMetadata, DocImage, } from "@doc";
📜 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 ignored due to path filters (6)
apps/portal/src/app/bridge/checkout-widget/checkout-widget-dark.jpgis excluded by!**/*.jpgapps/portal/src/app/bridge/checkout-widget/checkout-widget.jpgis excluded by!**/*.jpgapps/portal/src/app/bridge/swap/swap-dark.jpgis excluded by!**/*.jpgapps/portal/src/app/bridge/swap/swap-dark.pngis excluded by!**/*.pngapps/portal/src/app/bridge/swap/swap-light.jpgis excluded by!**/*.jpgapps/portal/src/app/bridge/swap/swap-light.pngis excluded by!**/*.png
📒 Files selected for processing (8)
apps/dashboard/src/app/bridge/checkout-widget/CheckoutWidgetEmbed.client.tsx(1 hunks)apps/portal/src/app/bridge/checkout-widget/iframe/iframe-code-preview.tsx(1 hunks)apps/portal/src/app/bridge/checkout-widget/iframe/page.mdx(1 hunks)apps/portal/src/app/bridge/checkout-widget/page.mdx(1 hunks)apps/portal/src/app/bridge/checkout-widget/react/page.mdx(1 hunks)apps/portal/src/app/bridge/sidebar.tsx(2 hunks)apps/portal/src/app/bridge/swap-widget/page.mdx(1 hunks)apps/portal/src/app/bridge/swap/page.mdx(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (3)
- apps/portal/src/app/bridge/checkout-widget/iframe/iframe-code-preview.tsx
- apps/portal/src/app/bridge/swap/page.mdx
- 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/portal/src/app/bridge/sidebar.tsxapps/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/portal/src/app/bridge/sidebar.tsxapps/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/portal/src/app/bridge/sidebar.tsxapps/dashboard/src/app/bridge/checkout-widget/CheckoutWidgetEmbed.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/checkout-widget/CheckoutWidgetEmbed.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/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
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
🪛 Gitleaks (8.30.0)
apps/portal/src/app/bridge/swap-widget/page.mdx
[high] 84-84: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
[high] 115-115: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
[high] 130-130: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
⏰ 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: Unit Tests
- GitHub Check: Lint Packages
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Size
- GitHub Check: Build Packages
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (10)
apps/portal/src/app/bridge/swap-widget/page.mdx (5)
1-18: LGTM! Imports and metadata are well-structured.The imports are appropriate for a documentation page, and the metadata configuration follows the expected pattern. The image imports correctly reference the new
.jpgfiles mentioned in the PR objectives.
20-69: LGTM! Clear documentation structure and helpful examples.The introduction, feature list, and basic usage examples are well-organized and easy to follow. The progression from basic usage to provider setup is logical and will help users integrate the widget correctly.
140-157: LGTM! Helpful resource links provided.The API reference and playground links give users clear next steps for deeper exploration and hands-on testing.
84-84: Static analysis false positives - safe to ignore.The Gitleaks warnings for lines 84, 115, and 130 are false positives. These are Ethereum contract addresses (starting with
0x), not API keys. Contract addresses are public information and do not pose a security risk in documentation.Also applies to: 115-115, 130-130
71-138: All technical details in the configuration examples are accurate and do not require changes.Base is a blockchain network with chain ID 8453, and chain ID 137 uses the POL currency on Polygon Mainnet. The USDC token address
0x833589fcd6edb6e08f4c7c32d4f71b54bda02913is the native USDC token issued by Circle on Base. POL is the native token of Polygon, confirming the documentation's reference to "Polygon native token (POL)" is current and correct.apps/portal/src/app/bridge/checkout-widget/react/page.mdx (1)
1-98: LGTM!The documentation page is well-structured with clear examples, proper dark/light mode image handling, and appropriate links to the API reference and playground. The code samples demonstrate the essential setup with
ThirdwebProviderandCheckoutWidgetcomponents.apps/dashboard/src/app/bridge/checkout-widget/CheckoutWidgetEmbed.client.tsx (1)
86-98: LGTM!The structured message format with
sourceandtypefields provides a clean contract for parent window communication. The consistent"checkout-widget"source identifier enables reliable message filtering in multi-iframe scenarios.apps/portal/src/app/bridge/sidebar.tsx (2)
21-62: LGTM!The reorganized sidebar cleanly separates "Widgets" from "Guides", and the nested structure for Bridge Widget, Checkout Widget, and Swap Widget provides intuitive navigation. The URLs are consistent with the
bridgeSlugpattern.
117-125: The TypeScript and React entries under "API References" both reference/references/typescript/v5. A separate React reference page does not exist in the documentation structure. If you intend to create dedicated React documentation, update the href accordingly. Otherwise, this shared reference is likely intentional.Likely an incorrect or invalid review comment.
apps/portal/src/app/bridge/checkout-widget/page.mdx (1)
12-70: LGTM!The landing page provides a clear overview with proper metadata, dark/light mode images, feature list, and navigation to iframe and React integration options. The playground link is a nice addition for hands-on exploration.
vercel
bot
temporarily deployed
to
Production – thirdweb_playground
PR-Codex overview
This PR updates the
Checkout WidgetandSwap Widgetcomponents, enhancing their documentation and functionality. It replaces image formats, introduces a newIframeCodePreviewcomponent, and modifies sidebar links for better navigation.Detailed summary
swap-dark.pngandswap-light.pngwithswap-dark.jpgandswap-light.jpg.IframeCodePreviewcomponent iniframe-code-preview.tsx.sendMessageToParentfunction to send structured messages.WidgetsandCheckout Widget.Checkout WidgetandSwap Widgetwith new features and examples.Checkout widget iframedocumentation.Summary by CodeRabbit
New Features
Documentation
Improvements
✏️ Tip: You can customize this high-level summary in your review settings.