Add bridge widget iframe docs, update path, link to docs #8528
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
WalkthroughAdds Bridge widget integration: new docs and sidebar grouping, a badge link that reports a new analytics linkType, currency and token-persistence props flowed through embed components and widget page parsing, a small redirect, UI/styling tweaks, and a new iframe code-preview component. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
Comment |
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. |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (3)
apps/portal/src/app/bridge/bridge-widget/iframe/iframe-code-preview.tsx (2)
3-3: Add explicit return type annotation.Per the coding guidelines for TypeScript files, functions should have explicit return types.
Apply this diff:
-export function IframeCodePreview(props: { src: string }) { +export function IframeCodePreview(props: { src: string }): JSX.Element {
23-29: Consider exposing className prop for styling overrides.Per the coding guidelines: "Add
classNameprop to the root element of every component to allow external overrides." While this component may not need customization currently, exposing this prop would follow the established pattern.-export function IframeCodePreview(props: { src: string }): JSX.Element { +export function IframeCodePreview(props: { src: string; className?: string }): JSX.Element { return ( - <Tabs defaultValue="code"> + <Tabs defaultValue="code" className={props.className}>apps/dashboard/src/app/bridge/widget/page.tsx (1)
42-45: Simplify boolean parsing.The current implementation returns string literals
"true"or"false", then compares the result at Line 61. This can be simplified to return a boolean directly.Apply this diff:
- const persistTokenSelections = - parse(searchParams.persistTokenSelections, (v) => - v === "false" ? "false" : "true", - ) || "true"; + const persistTokenSelections = + parse(searchParams.persistTokenSelections, (v) => + v !== "false", + ) ?? true;Then update Line 61:
- persistTokenSelections={persistTokenSelections === "true"} + persistTokenSelections={persistTokenSelections}
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (3)
apps/dashboard/src/app/bridge/widget/opengraph-image.pngis excluded by!**/*.pngapps/portal/src/app/bridge/bridge-widget/bridge-widget-dark.pngis excluded by!**/*.pngapps/portal/src/app/bridge/bridge-widget/bridge-widget-light.pngis excluded by!**/*.png
📒 Files selected for processing (20)
apps/dashboard/src/@/analytics/report.ts(1 hunks)apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx(5 hunks)apps/dashboard/src/app/bridge/(general)/components/bridge-page.tsx(4 hunks)apps/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsx(2 hunks)apps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsx(1 hunks)apps/dashboard/src/app/bridge/(general)/components/header.tsx(1 hunks)apps/dashboard/src/app/bridge/(general)/page.tsx(1 hunks)apps/dashboard/src/app/bridge/widget/page.tsx(3 hunks)apps/portal/redirects.mjs(2 hunks)apps/portal/src/app/bridge/bridge-widget/iframe/iframe-code-preview.tsx(1 hunks)apps/portal/src/app/bridge/bridge-widget/iframe/page.mdx(1 hunks)apps/portal/src/app/bridge/bridge-widget/page.mdx(1 hunks)apps/portal/src/app/bridge/bridge-widget/react/page.mdx(1 hunks)apps/portal/src/app/bridge/bridge-widget/script/page.mdx(1 hunks)apps/portal/src/app/bridge/page.mdx(1 hunks)apps/portal/src/app/bridge/sidebar.tsx(1 hunks)apps/portal/src/app/bridge/swap/page.mdx(1 hunks)apps/portal/src/components/others/Sidebar.tsx(1 hunks)packages/thirdweb/src/exports/react.ts(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx(0 hunks)
💤 Files with no reviewable changes (1)
- packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
🧰 Additional context used
📓 Path-based instructions (17)
**/*.{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:
packages/thirdweb/src/exports/react.tsapps/dashboard/src/@/analytics/report.tsapps/portal/src/components/others/Sidebar.tsxapps/dashboard/src/app/bridge/(general)/components/header.tsxapps/portal/src/app/bridge/bridge-widget/iframe/iframe-code-preview.tsxapps/dashboard/src/app/bridge/(general)/page.tsxapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxapps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsxapps/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsxapps/dashboard/src/app/bridge/widget/page.tsxapps/dashboard/src/app/bridge/(general)/components/bridge-page.tsxapps/portal/src/app/bridge/sidebar.tsx
packages/thirdweb/src/exports/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
packages/thirdweb/src/exports/**/*.{ts,tsx}: Export everything viaexports/directory, grouped by feature in SDK development
Every public symbol must have comprehensive TSDoc with at least one@exampleblock that compiles and custom annotation tags (@beta,@internal,@experimental)Export everything in packages/thirdweb via the exports/ directory, grouped by feature. Every public symbol must have comprehensive TSDoc including at least one @example block that compiles and one custom annotation (@beta, @internal, @experimental, etc.)
Files:
packages/thirdweb/src/exports/react.ts
packages/thirdweb/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
packages/thirdweb/src/**/*.{ts,tsx}: Comment only ambiguous logic in SDK code; avoid restating TypeScript in prose
Load heavy dependencies inside async paths to keep initial bundle lean (e.g.const { jsPDF } = await import("jspdf");)Lazy-load heavy dependencies inside async paths to keep the initial bundle lean (e.g., const { jsPDF } = await import('jspdf');)
Files:
packages/thirdweb/src/exports/react.ts
**/*.{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:
packages/thirdweb/src/exports/react.tsapps/dashboard/src/@/analytics/report.tsapps/portal/src/components/others/Sidebar.tsxapps/dashboard/src/app/bridge/(general)/components/header.tsxapps/portal/src/app/bridge/bridge-widget/iframe/iframe-code-preview.tsxapps/dashboard/src/app/bridge/(general)/page.tsxapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxapps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsxapps/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsxapps/dashboard/src/app/bridge/widget/page.tsxapps/dashboard/src/app/bridge/(general)/components/bridge-page.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:
packages/thirdweb/src/exports/react.tsapps/dashboard/src/@/analytics/report.tsapps/portal/src/components/others/Sidebar.tsxapps/dashboard/src/app/bridge/(general)/components/header.tsxapps/portal/src/app/bridge/bridge-widget/iframe/iframe-code-preview.tsxapps/dashboard/src/app/bridge/(general)/page.tsxapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxapps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsxapps/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsxapps/dashboard/src/app/bridge/widget/page.tsxapps/dashboard/src/app/bridge/(general)/components/bridge-page.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/@/analytics/report.tsapps/dashboard/src/app/bridge/(general)/components/header.tsxapps/dashboard/src/app/bridge/(general)/page.tsxapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxapps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsxapps/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsxapps/dashboard/src/app/bridge/widget/page.tsxapps/dashboard/src/app/bridge/(general)/components/bridge-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/@/analytics/report.tsapps/dashboard/src/app/bridge/(general)/components/header.tsxapps/dashboard/src/app/bridge/(general)/page.tsxapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxapps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsxapps/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsxapps/dashboard/src/app/bridge/widget/page.tsxapps/dashboard/src/app/bridge/(general)/components/bridge-page.tsx
apps/dashboard/src/**/@/analytics/report.ts
📄 CodeRabbit inference engine (CLAUDE.md)
apps/dashboard/src/**/@/analytics/report.ts: Name analytics events with human-readable<subject> <verb>format (e.g. "contract deployed")
Name analytics event reporter functions asreport<Subject><Verb>in PascalCase
Include JSDoc comment explaining why the analytics event is needed and responsible person (@username) for maintenance
Files:
apps/dashboard/src/@/analytics/report.ts
apps/dashboard/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
apps/dashboard/**/*.{ts,tsx}: Always import from the central UI library under@/components/ui/*for reusable core UI components likeButton,Input,Select,Tabs,Card,Sidebar,Separator,Badge
UseNavLinkfrom@/components/ui/NavLinkfor internal navigation to ensure active states are handled automatically
For notices and skeletons, rely onAnnouncementBanner,GenericLoadingPage, andEmptyStateCardcomponents
Import icons fromlucide-reactor the project-specific…/iconsexports; never embed raw SVG
Keep components pure; fetch data outside using server components or hooks and pass it down via props
Use Tailwind CSS as the styling system; avoid inline styles or CSS modules
Merge class names withcnfrom@/lib/utilsto keep conditional logic readable
Stick to design tokens: usebg-card,border-border,text-muted-foregroundand other Tailwind variables instead of hard-coded colors
Use spacing utilities (px-*,py-*,gap-*) instead of custom margins
Follow mobile-first responsive design with Tailwind helpers (max-sm,md,lg,xl)
Never hard-code colors; always use Tailwind variables
Combine class names viacn, and exposeclassNameprop if useful in components
Use React Query (@tanstack/react-query) for all client-side data fetching with typed hooks
Files:
apps/dashboard/src/@/analytics/report.tsapps/dashboard/src/app/bridge/(general)/components/header.tsxapps/dashboard/src/app/bridge/(general)/page.tsxapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxapps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsxapps/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsxapps/dashboard/src/app/bridge/widget/page.tsxapps/dashboard/src/app/bridge/(general)/components/bridge-page.tsx
apps/dashboard/**/@/analytics/report.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
apps/dashboard/**/@/analytics/report.{ts,tsx}: Create reporting helper functions namedreport<Subject><Verb>in PascalCase undersrc/@/analytics/report.ts
Add mandatory JSDoc to analytics reporting functions explaining why the event exists and who owns it (@username)
Accept a single typedpropertiesobject in analytics reporting functions and pass it unchanged toposthog.capture
Files:
apps/dashboard/src/@/analytics/report.ts
apps/{dashboard,playground}/**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{tsx,ts}: Import UI primitives from @/components/ui/_ (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in Dashboard and Playground apps
Use NavLink for internal navigation so active states are handled automatically
Use Tailwind CSS for styling – no inline styles or CSS modules
Merge class names with cn() from @/lib/utils to keep conditional logic readable
Stick to design tokens for styling: backgrounds (bg-card), borders (border-border), muted text (text-muted-foreground), etc.
Server Components: Read cookies/headers with next/headers, access server-only environment variables or secrets, perform heavy data fetching, implement redirect logic with redirect() from next/navigation, and start files with import 'server-only'; to prevent client bundling
Client Components: Begin files with 'use client'; before imports, handle interactive UI relying on React hooks (useState, useEffect, React Query, wallet hooks), access browser APIs (localStorage, window, IntersectionObserver, etc.), and support fast transitions with client-side data prefetching
For client-side data fetching: Wrap calls in React Query (@tanstack/react-query), use descriptive and stable queryKeys for cache hits, configure staleTime / cacheTime based on freshness requirements (default ≥ 60 s), and keep tokens secret by calling internal API routes or server actions
Files:
apps/dashboard/src/@/analytics/report.tsapps/dashboard/src/app/bridge/(general)/components/header.tsxapps/dashboard/src/app/bridge/(general)/page.tsxapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxapps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsxapps/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsxapps/dashboard/src/app/bridge/widget/page.tsxapps/dashboard/src/app/bridge/(general)/components/bridge-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/@/analytics/report.tsapps/dashboard/src/app/bridge/(general)/components/header.tsxapps/dashboard/src/app/bridge/(general)/page.tsxapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxapps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsxapps/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsxapps/dashboard/src/app/bridge/widget/page.tsxapps/dashboard/src/app/bridge/(general)/components/bridge-page.tsx
apps/{dashboard,playground}/src/@/analytics/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Only add analytics events that answer a clear product or business question. Check src/@/analytics/report.ts first to avoid duplicates
Files:
apps/dashboard/src/@/analytics/report.ts
apps/{dashboard,playground}/src/@/analytics/report.ts
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/src/@/analytics/report.ts: Use the naming convention: Event name as human-readable phrase in the form ' ' (e.g., 'contract deployed'). Reporting function: 'report' (PascalCase). All reporting helpers live in the shared report.ts file
Add a JSDoc header to analytics event reporters explaining Why the event exists and Who owns it (@username). Accept a single typed properties object and forward it unchanged to posthog.capture()
Files:
apps/dashboard/src/@/analytics/report.ts
apps/dashboard/**/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
Add
classNameprop to the root element of every component to allow external overrides
Files:
apps/dashboard/src/app/bridge/(general)/components/header.tsxapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxapps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsxapps/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsxapps/dashboard/src/app/bridge/(general)/components/bridge-page.tsx
apps/{dashboard,playground}/**/components/**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/components/**/*.{tsx,ts}: Group feature-specific components under feature/components/_ and expose a barrel index.ts when necessary
Expose a className prop on the root element of every component for styling overrides
Files:
apps/dashboard/src/app/bridge/(general)/components/header.tsxapps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsxapps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsxapps/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsxapps/dashboard/src/app/bridge/(general)/components/bridge-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/(general)/page.tsxapps/dashboard/src/app/bridge/widget/page.tsx
🧬 Code graph analysis (3)
apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx (2)
packages/thirdweb/src/exports/react.ts (1)
SupportedFiatCurrency(1-1)packages/thirdweb/src/pay/convert/type.ts (1)
SupportedFiatCurrency(27-27)
apps/dashboard/src/app/bridge/widget/page.tsx (2)
packages/thirdweb/src/exports/react.ts (1)
SupportedFiatCurrency(1-1)apps/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsx (1)
UniversalBridgeEmbed(22-39)
apps/dashboard/src/app/bridge/(general)/components/bridge-page.tsx (1)
apps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsx (1)
AddBridgeWidgetLink(6-16)
🪛 LanguageTool
apps/portal/src/app/bridge/bridge-widget/iframe/page.mdx
[style] ~95-~95: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ..."Change default Sell and Buy Tokens"> Set USDC on Base as the default sell token ...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Lint Packages
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Build Packages
- GitHub Check: Unit Tests
- GitHub Check: Analyze (javascript)
🔇 Additional comments (20)
apps/portal/src/app/bridge/swap/page.mdx (1)
310-315: Feature documentation enhancements are well-aligned with implementation.The header simplification and new feature descriptions accurately reflect the swap widget capabilities demonstrated in the code examples. "Route optimization" correctly represents the
Bridge.Buy.prepare()routing logic, and "Status tracking" properly describes thewaitForCompletion()monitoring behavior. The feature descriptions maintain consistent formatting and clarity.apps/portal/redirects.mjs (2)
1096-1099: Bridge redirect definition looks correct and consistentThe new
bridgeRedirectsmap is syntactically correct, uses leading slashes for source/destination like the rest of the file, and follows the established naming pattern for redirect groups. No issues here.
1122-1122: Properly wired new bridge redirects into the Next.js redirects configIncluding
...createRedirects(bridgeRedirects)at the end of the redirects array keeps behavior consistent with other redirect groups and avoids ordering conflicts. This integration looks good.apps/dashboard/src/app/bridge/(general)/page.tsx (1)
63-63: LGTM! Minor font size adjustment.The heading font size reduction from
text-6xltotext-5xlon medium+ screens is a straightforward visual refinement that maintains the mobile-first responsive design pattern.apps/portal/src/components/others/Sidebar.tsx (1)
206-206: LGTM - Padding refactor.The padding removal from this inner div is intentional since the wrapper element at line 214 already applies
py-1.5 px-3. This consolidates padding on the parent, keeping the structure cleaner.apps/dashboard/src/@/analytics/report.ts (1)
685-689: LGTM - Analytics extension for bridge widget integration.The new
"integrate-bridge-widget"linkType appropriately extends the analytics tracking to support the new AddBridgeWidgetLink component mentioned in the PR objectives.apps/dashboard/src/app/bridge/(general)/components/header.tsx (1)
16-21: LGTM - Header styling refinements.The changes narrow the header container (max-w-5xl), adjust padding for better responsive behavior, and remove the border for a cleaner appearance. These align with the UI improvements mentioned in the PR objectives.
apps/portal/src/app/bridge/bridge-widget/iframe/page.mdx (1)
1-152: LGTM - Comprehensive iframe documentation.The documentation is well-structured with clear examples and comprehensive coverage of iframe integration options. The static analysis hint about repeated "Set" at lines 78, 86, and 96 is a false positive—the repetition is intentional for consistency across the example descriptions.
apps/portal/src/app/bridge/bridge-widget/react/page.mdx (1)
1-83: LGTM - Clear React component documentation.The documentation provides a comprehensive guide for integrating the BridgeWidget React component, with clear examples and proper code structure. The API reference link appropriately directs users to detailed component documentation.
packages/thirdweb/src/exports/react.ts (1)
1-1: LGTM - Type export for currency support.The
SupportedFiatCurrencytype export appropriately supports the new currency prop additions mentioned in the PR objectives. The placement at the top of the file follows the established pattern for type exports.apps/portal/src/app/bridge/page.mdx (1)
130-131: LGTM - Helpful clientId documentation.The addition clearly guides users on how to obtain their clientId, improving the developer experience by linking directly to the dashboard where they can create a project.
apps/dashboard/src/app/bridge/(general)/components/bridge-page.tsx (1)
11-11: LGTM! Bridge widget link integration.The new
AddBridgeWidgetLinkcomponent is properly imported and rendered in a centered container with appropriate spacing. This aligns with the PR's goal of promoting widget integration.Also applies to: 33-37
apps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsx (1)
18-34: LGTM! Clean component implementation.The
BadgeLinkcomponent follows project conventions: uses Next.jsLink, applies design tokens for styling, and correctly handles external navigation withtarget="_blank".apps/portal/src/app/bridge/bridge-widget/script/page.mdx (1)
6-7: LGTM! Image path updates reflect directory restructuring.The import paths correctly updated from
"./bridge-widget-*.png"to"../bridge-widget-*.png", aligning with the new widget documentation hierarchy.apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx (2)
7-11: LGTM! Type-safe currency and persistence props.The new
currencyandpersistTokenSelectionsprops are properly typed usingSupportedFiatCurrencyfrom thirdweb/react. Making them optional maintains backward compatibility.Also applies to: 41-41, 73-73
127-127: LGTM! Props forwarded with sensible defaults.Both widgets receive the
currencyprop with a sensible"USD"fallback. ThepersistTokenSelectionsprop is correctly forwarded only toSwapWidget, which aligns with its intended use case for token swap persistence.Also applies to: 251-252
apps/portal/src/app/bridge/sidebar.tsx (1)
29-44: LGTM! Navigation restructured to support new widget documentation.The sidebar now presents a collapsible "Bridge Widget" group with three implementation options (Iframe, Script, React Component), which improves discoverability and aligns with the new documentation structure.
apps/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsx (1)
3-3: LGTM! Clean prop pass-through.The new
persistTokenSelectionsandcurrencyprops are properly typed and forwarded toBuyAndSwapEmbed. The implementation maintains the component's role as a configured wrapper.Also applies to: 23-23, 27-27, 31-32
apps/dashboard/src/app/bridge/widget/page.tsx (2)
118-126: LGTM! Reusable parsing utility.The
parsefunction is well-designed: it safely handlesstring | string[] | undefinedinputs, applies the transformation only for strings, and uses generics for type safety. This reduces duplication across the parameter parsing logic.
92-116: Remove this comment – the currency list is already synchronized.The
VALID_CURRENCIESconstant contains all 23 currencies defined in theSupportedFiatCurrencytype (which iskeyof typeof currencySymbolfrompackages/thirdweb/src/pay/convert/type.ts). No currencies are missing, and the lists are already complete and matched.
apps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsx
Outdated
Show resolved
Hide resolved
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8528 +/- ##
==========================================
- Coverage 54.67% 54.66% -0.01%
==========================================
Files 921 921
Lines 61163 61163
Branches 4150 4151 +1
==========================================
- Hits 33439 33435 -4
- Misses 27622 27627 +5
+ Partials 102 101 -1
🚀 New features to boost your workflow:
|
MananTank
force-pushed
the
12-10-add_bridge_iframe_docs_update_bridge_iframe_path
branch
from
a9c3b28 to
cf3da65
Compare
size-limit report 📦
|
MananTank
changed the title
MananTank
changed the title
MananTank
changed the title
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (3)
apps/portal/src/app/bridge/bridge-widget/page.mdx (2)
1-10: Remove unusedGridimport.The
Gridcomponent imported on line 8 is not used in this file.-import { ArticleIconCard, Grid } from "@doc"; +import { ArticleIconCard } from "@doc";
12-19: Revise metadata description to avoid redundant phrasing.Line 18 contains redundant wording: "Add a widget to add cross swaps…" should be more concise.
- description: "Add a widget to add cross swaps and fiat onramp to your app", + description: "Integrate cross-chain swaps and fiat onramp into your app",apps/dashboard/src/app/bridge/widget/page.tsx (1)
42-45: Simplify the persistTokenSelections parsing logic.The current implementation converts the search param to a string ("true" or "false") and then converts it back to a boolean. This intermediate string step is unnecessary and makes the code harder to follow.
Apply this diff to simplify:
- const persistTokenSelections = - parse(searchParams.persistTokenSelections, (v) => - v === "false" ? "false" : "true", - ) || "true"; + const persistTokenSelections = + parse(searchParams.persistTokenSelections, (v) => + v !== "false" + ) ?? true;Then update line 61:
- persistTokenSelections={persistTokenSelections === "true"} + persistTokenSelections={persistTokenSelections}Also applies to: 61-61
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (3)
apps/dashboard/src/app/bridge/widget/opengraph-image.pngis excluded by!**/*.pngapps/portal/src/app/bridge/bridge-widget/bridge-widget-dark.pngis excluded by!**/*.pngapps/portal/src/app/bridge/bridge-widget/bridge-widget-light.pngis excluded by!**/*.png
📒 Files selected for processing (20)
apps/dashboard/src/@/analytics/report.ts(1 hunks)apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx(5 hunks)apps/dashboard/src/app/bridge/(general)/components/bridge-page.tsx(4 hunks)apps/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsx(2 hunks)apps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsx(1 hunks)apps/dashboard/src/app/bridge/(general)/components/header.tsx(1 hunks)apps/dashboard/src/app/bridge/(general)/page.tsx(1 hunks)apps/dashboard/src/app/bridge/widget/page.tsx(3 hunks)apps/portal/redirects.mjs(2 hunks)apps/portal/src/app/bridge/bridge-widget/iframe/iframe-code-preview.tsx(1 hunks)apps/portal/src/app/bridge/bridge-widget/iframe/page.mdx(1 hunks)apps/portal/src/app/bridge/bridge-widget/page.mdx(1 hunks)apps/portal/src/app/bridge/bridge-widget/react/page.mdx(1 hunks)apps/portal/src/app/bridge/bridge-widget/script/page.mdx(1 hunks)apps/portal/src/app/bridge/page.mdx(1 hunks)apps/portal/src/app/bridge/sidebar.tsx(1 hunks)apps/portal/src/app/bridge/swap/page.mdx(1 hunks)apps/portal/src/components/others/Sidebar.tsx(1 hunks)packages/thirdweb/src/exports/react.ts(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx(0 hunks)
💤 Files with no reviewable changes (1)
- packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
🚧 Files skipped from review as they are similar to previous changes (11)
- apps/dashboard/src/app/bridge/(general)/page.tsx
- apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
- apps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsx
- apps/portal/src/app/bridge/bridge-widget/react/page.mdx
- apps/dashboard/src/@/analytics/report.ts
- apps/portal/src/components/others/Sidebar.tsx
- packages/thirdweb/src/exports/react.ts
- apps/portal/src/app/bridge/bridge-widget/script/page.mdx
- apps/dashboard/src/app/bridge/(general)/components/header.tsx
- apps/portal/src/app/bridge/bridge-widget/iframe/iframe-code-preview.tsx
- apps/portal/src/app/bridge/page.mdx
🧰 Additional context used
📓 Path-based instructions (11)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each TypeScript file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes in TypeScript
Avoidanyandunknownin TypeScript unless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.) in TypeScript
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity and testability
Re-use shared types from @/types or local types.ts barrel exports
Prefer type aliases over interface except for nominal shapes
Avoid any and unknown unless unavoidable; narrow generics whenever possible
Choose composition over inheritance; leverage utility types (Partial, Pick, etc.)
Comment only ambiguous logic in TypeScript files; avoid restating TypeScript types and signatures in prose
Files:
apps/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsxapps/dashboard/src/app/bridge/(general)/components/bridge-page.tsxapps/portal/src/app/bridge/sidebar.tsxapps/dashboard/src/app/bridge/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/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsxapps/dashboard/src/app/bridge/(general)/components/bridge-page.tsxapps/dashboard/src/app/bridge/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/(general)/components/client/UniversalBridgeEmbed.tsxapps/dashboard/src/app/bridge/(general)/components/bridge-page.tsxapps/dashboard/src/app/bridge/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/(general)/components/client/UniversalBridgeEmbed.tsxapps/dashboard/src/app/bridge/(general)/components/bridge-page.tsxapps/dashboard/src/app/bridge/widget/page.tsx
apps/dashboard/**/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
Add
classNameprop to the root element of every component to allow external overrides
Files:
apps/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsxapps/dashboard/src/app/bridge/(general)/components/bridge-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/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsxapps/dashboard/src/app/bridge/(general)/components/bridge-page.tsxapps/portal/src/app/bridge/sidebar.tsxapps/dashboard/src/app/bridge/widget/page.tsx
apps/{dashboard,playground}/**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{tsx,ts}: Import UI primitives from @/components/ui/_ (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in Dashboard and Playground apps
Use NavLink for internal navigation so active states are handled automatically
Use Tailwind CSS for styling – no inline styles or CSS modules
Merge class names with cn() from @/lib/utils to keep conditional logic readable
Stick to design tokens for styling: backgrounds (bg-card), borders (border-border), muted text (text-muted-foreground), etc.
Server Components: Read cookies/headers with next/headers, access server-only environment variables or secrets, perform heavy data fetching, implement redirect logic with redirect() from next/navigation, and start files with import 'server-only'; to prevent client bundling
Client Components: Begin files with 'use client'; before imports, handle interactive UI relying on React hooks (useState, useEffect, React Query, wallet hooks), access browser APIs (localStorage, window, IntersectionObserver, etc.), and support fast transitions with client-side data prefetching
For client-side data fetching: Wrap calls in React Query (@tanstack/react-query), use descriptive and stable queryKeys for cache hits, configure staleTime / cacheTime based on freshness requirements (default ≥ 60 s), and keep tokens secret by calling internal API routes or server actions
Files:
apps/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsxapps/dashboard/src/app/bridge/(general)/components/bridge-page.tsxapps/dashboard/src/app/bridge/widget/page.tsx
apps/{dashboard,playground}/**/components/**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/components/**/*.{tsx,ts}: Group feature-specific components under feature/components/_ and expose a barrel index.ts when necessary
Expose a className prop on the root element of every component for styling overrides
Files:
apps/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsxapps/dashboard/src/app/bridge/(general)/components/bridge-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/(general)/components/client/UniversalBridgeEmbed.tsxapps/dashboard/src/app/bridge/(general)/components/bridge-page.tsxapps/dashboard/src/app/bridge/widget/page.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Lazy-import optional features; avoid top-level side-effects
Files:
apps/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsxapps/dashboard/src/app/bridge/(general)/components/bridge-page.tsxapps/portal/src/app/bridge/sidebar.tsxapps/dashboard/src/app/bridge/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/widget/page.tsx
🧬 Code graph analysis (1)
apps/dashboard/src/app/bridge/(general)/components/bridge-page.tsx (1)
apps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsx (1)
AddBridgeWidgetLink(6-16)
🪛 LanguageTool
apps/portal/src/app/bridge/bridge-widget/iframe/page.mdx
[style] ~95-~95: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ..."Change default Sell and Buy Tokens"> Set USDC on Base as the default sell token ...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Lint Packages
- GitHub Check: Size
- GitHub Check: Analyze (javascript)
🔇 Additional comments (10)
apps/portal/src/app/bridge/swap/page.mdx (1)
310-315: Documentation improvements align well with described functionality.The heading simplification from "Key Features" to "Features" is a reasonable change that follows common documentation conventions. The two added feature bullets ("Route optimization" and "Status tracking") are supported by the documented APIs (
Bridge.Buy.prepare()for quote optimization andBridge.status()+waitForCompletion()for transaction tracking), making the feature list more complete and helpful to users.apps/portal/redirects.mjs (1)
1096-1098: LGTM! Bridge redirect correctly implemented.The new
bridgeRedirectsconstant and its integration follow the established pattern used by other redirect objects in the file. The redirect appropriately handles the path restructuring from/bridge/bridge-widget-scriptto/bridge/bridge-widget/script, which aligns with the PR's objective to update the bridge iframe path.Also applies to: 1122-1122
apps/portal/src/app/bridge/sidebar.tsx (1)
29-44: Bridge Widget nested navigation looks consistent and well-structuredThe new "Bridge Widget" group with Iframe / Script / React Component links is clearly organized, uses the shared
bridgeSlugcorrectly for all hrefs, and matches the existing sidebar link patterns. I don’t see any structural or typing concerns here.apps/portal/src/app/bridge/bridge-widget/page.mdx (1)
40-59: Approve the ArticleIconCard integration.The Get Started section with three integration cards (Iframe, Script, React Component) is well-structured and aligns with the PR objective to provide multiple integration paths for the Bridge widget.
apps/dashboard/src/app/bridge/(general)/components/bridge-page.tsx (2)
11-11: LGTM! Clean integration of the widget link.The AddBridgeWidgetLink component is properly imported and rendered in a centered container with appropriate spacing. This aligns with the PR objective to promote widget integration.
Also applies to: 33-37
53-53: LGTM! Consistent UI refinements.The spacing, sizing, and typography adjustments improve visual consistency. All Tailwind classes are correctly applied.
Also applies to: 91-93
apps/portal/src/app/bridge/bridge-widget/iframe/page.mdx (1)
112-151: LGTM! Comprehensive currency documentation.The currency options are well-documented and the supported currencies list matches the implementation in
page.tsx. The example clearly demonstrates the feature.apps/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsx (1)
3-3: LGTM! Clean prop forwarding with proper types.The new
persistTokenSelectionsandcurrencyprops are correctly typed usingSupportedFiatCurrencyfrom thirdweb/react and properly forwarded toBuyAndSwapEmbed. Making them optional ensures backward compatibility.Also applies to: 23-23, 27-27, 31-32
apps/dashboard/src/app/bridge/widget/page.tsx (2)
51-55: LGTM! Clean currency parsing with type-safe validation.The
parsehelper function is well-designed with proper generic typing, and the currency validation correctly filters invalid values against theVALID_CURRENCIESlist. The type narrowing withas SupportedFiatCurrencyis appropriate after the includes check.Also applies to: 118-126
92-116: TheVALID_CURRENCIESarray correctly validates search parameters against thirdweb's supported fiat currencies. SinceSupportedFiatCurrencyis a type-only construct (keyof typeof currencySymbol) and thirdweb does not export a runtime constant of currency keys, the manual array is the appropriate solution for runtime validation. The list matches thirdweb's internalcurrencySymboldefinition exactly. Given that this constant is used only in this file for parameter validation, keeping it local is acceptable.Likely an incorrect or invalid review comment.
MananTank
force-pushed
the
12-10-add_bridge_iframe_docs_update_bridge_iframe_path
branch
from
cf3da65 to
98eebf2
Compare
There was a problem hiding this comment.
Actionable comments posted: 3
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/bridge-widget/script/page.mdx (1)
31-36: Addalttext to bridge widget DocImage previewsThese
DocImageusages should provide alt text for accessibility:-<div className='dark-only'> -<DocImage src={bridgeWidgetDark} /> -</div> -<div className='light-only'> -<DocImage src={bridgeWidgetLight} /> -</div> +<div className="dark-only"> + <DocImage + src={bridgeWidgetDark} + alt="Bridge widget script — dark theme" + /> +</div> +<div className="light-only"> + <DocImage + src={bridgeWidgetLight} + alt="Bridge widget script — light theme" + /> +</div>
♻️ Duplicate comments (2)
apps/portal/src/app/bridge/bridge-widget/page.mdx (1)
26-31: Add descriptivealttext to DocImage for accessibilityBoth
DocImagecomponents lackalt, which hurts screen-reader accessibility. SinceDocImagesupportsalt, set concise, descriptive text:-<div className='dark-only'> -<DocImage src={bridgeWidgetDark} /> -</div> -<div className='light-only'> -<DocImage src={bridgeWidgetLight} /> -</div> +<div className="dark-only"> + <DocImage + src={bridgeWidgetDark} + alt="Bridge widget — dark theme" + /> +</div> +<div className="light-only"> + <DocImage + src={bridgeWidgetLight} + alt="Bridge widget — light theme" + /> +</div>apps/portal/src/app/bridge/bridge-widget/iframe/page.mdx (1)
17-17: Fix hyphenation for consistency and grammar.The term "cross chain" should be hyphenated as "cross-chain" to match standard usage and the correct form used elsewhere in the document (line 22).
Apply this diff:
- description: "Add a widget to add cross chain swaps and fiat onramp to your app using an iframe", + description: "Add a widget to add cross-chain swaps and fiat onramp to your app using an iframe",
🧹 Nitpick comments (5)
apps/dashboard/src/app/bridge/(general)/components/header.tsx (1)
16-21: Header layout change is fine; consider exposing rootclassNameThe container width/padding adjustments and removal of the outer border wrapper are safe and keep the header structure intact.
Given this file lives under a
componentspath, consider extending the props to include aclassNameapplied to the root<div>so callers can override spacing/background if needed:-export function BridgePageHeader(props: { containerClassName?: string }) { +export function BridgePageHeader(props: { + containerClassName?: string; + className?: string; +}) { return ( - <div> + <div className={cn(props.className)}> <header className={cn( "container flex max-w-5xl justify-between py-3 lg:py-5", props.containerClassName, )}apps/portal/src/app/bridge/bridge-widget/page.mdx (1)
12-19: Polish metadata description wording and hyphenationTo avoid the “Add a widget to add…” repetition and to follow “cross‑chain” hyphenation guidance, consider:
-export const metadata = createMetadata({ - image: { - title: "Bridge widget", - icon: "payments", - }, - title: "Bridge widget", - description: "Add a widget to add cross chain swaps and fiat onramp to your app", -}); +export const metadata = createMetadata({ + image: { + title: "Bridge widget", + icon: "payments", + }, + title: "Bridge widget", + description: + "Embed cross-chain swaps and fiat onramp in your app with a single widget", +});Based on static analysis hints.
apps/portal/src/app/bridge/bridge-widget/script/page.mdx (1)
9-16: Tighten metadata copy and fix “cross chain” hyphenationThe updated metadata and heading are good; you can also simplify the description and apply “cross‑chain”:
export const metadata = createMetadata({ image: { - title: "Bridge widget script", + title: "Bridge widget script", icon: "payments", }, - title: "Bridge widget script", - description: "Add a widget to add cross chain swaps and fiat onramp to your app using a script tag", + title: "Bridge widget script", + description: + "Embed cross-chain swaps and fiat onramp in your app using a script tag", }); @@ -# Bridge widget script - -The Bridge widget script makes it easy to embed cross-chain swaps and fiat onramp UI into your app. Just add a script tag to your HTML and get a fully customizable widget — no build setup required. +# Bridge widget script + +The Bridge widget script makes it easy to embed cross-chain swaps and fiat onramp UI into your app. Just add a script tag to your HTML to get a fully customizable widget — no build setup required.Based on static analysis hints.
Also applies to: 18-22
apps/portal/src/app/bridge/bridge-widget/react/page.mdx (1)
12-19: Clarify metadata description and use “cross‑chain”To keep wording consistent and avoid repetition:
export const metadata = createMetadata({ image: { title: "Bridge widget component", icon: "payments", }, title: "Bridge widget component", - description: "Add a widget to add cross chain swaps and fiat onramp to your app using a React component", + description: + "Add cross-chain swaps and fiat onramp to your app using a React component", });Based on static analysis hints.
apps/portal/src/app/bridge/bridge-widget/iframe/page.mdx (1)
76-100: Consider varying sentence structure across examples.All three example descriptions begin with "Set," which creates a repetitive pattern. Consider varying the phrasing to improve readability.
For example:
<Details summary="Change default Sell Token to ERC20 Token"> -Set USDC on Base as the default sell token. +This example configures USDC on Base as the default sell token.Or:
<Details summary="Change default Sell Token to Native Token"> -Set Base native token as the default sell token. +Use the Base native token as the default sell token.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (3)
apps/dashboard/src/app/bridge/widget/opengraph-image.pngis excluded by!**/*.pngapps/portal/src/app/bridge/bridge-widget/bridge-widget-dark.pngis excluded by!**/*.pngapps/portal/src/app/bridge/bridge-widget/bridge-widget-light.pngis excluded by!**/*.png
📒 Files selected for processing (20)
apps/dashboard/src/@/analytics/report.ts(1 hunks)apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx(5 hunks)apps/dashboard/src/app/bridge/(general)/components/bridge-page.tsx(4 hunks)apps/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsx(2 hunks)apps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsx(1 hunks)apps/dashboard/src/app/bridge/(general)/components/header.tsx(1 hunks)apps/dashboard/src/app/bridge/(general)/page.tsx(1 hunks)apps/dashboard/src/app/bridge/widget/page.tsx(3 hunks)apps/portal/redirects.mjs(2 hunks)apps/portal/src/app/bridge/bridge-widget/iframe/iframe-code-preview.tsx(1 hunks)apps/portal/src/app/bridge/bridge-widget/iframe/page.mdx(1 hunks)apps/portal/src/app/bridge/bridge-widget/page.mdx(1 hunks)apps/portal/src/app/bridge/bridge-widget/react/page.mdx(1 hunks)apps/portal/src/app/bridge/bridge-widget/script/page.mdx(1 hunks)apps/portal/src/app/bridge/page.mdx(1 hunks)apps/portal/src/app/bridge/sidebar.tsx(1 hunks)apps/portal/src/app/bridge/swap/page.mdx(1 hunks)apps/portal/src/components/others/Sidebar.tsx(1 hunks)packages/thirdweb/src/exports/react.ts(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx(0 hunks)
💤 Files with no reviewable changes (1)
- packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
🚧 Files skipped from review as they are similar to previous changes (8)
- apps/portal/src/components/others/Sidebar.tsx
- apps/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsx
- apps/portal/src/app/bridge/swap/page.mdx
- apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
- apps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsx
- apps/dashboard/src/app/bridge/(general)/components/bridge-page.tsx
- packages/thirdweb/src/exports/react.ts
- apps/dashboard/src/app/bridge/widget/page.tsx
🧰 Additional context used
📓 Path-based instructions (15)
**/*.{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/bridge-widget/iframe/iframe-code-preview.tsxapps/dashboard/src/app/bridge/(general)/page.tsxapps/dashboard/src/app/bridge/(general)/components/header.tsxapps/dashboard/src/@/analytics/report.tsapps/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/bridge-widget/iframe/iframe-code-preview.tsxapps/dashboard/src/app/bridge/(general)/page.tsxapps/dashboard/src/app/bridge/(general)/components/header.tsxapps/dashboard/src/@/analytics/report.tsapps/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/bridge-widget/iframe/iframe-code-preview.tsxapps/dashboard/src/app/bridge/(general)/page.tsxapps/dashboard/src/app/bridge/(general)/components/header.tsxapps/dashboard/src/@/analytics/report.tsapps/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/(general)/page.tsxapps/dashboard/src/app/bridge/(general)/components/header.tsxapps/dashboard/src/@/analytics/report.ts
apps/dashboard/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/dashboard/src/**/*.{ts,tsx}: UseNavLinkfor internal navigation with automatic active states in dashboard
Start server component files withimport "server-only";in Next.js
Read cookies/headers withnext/headersin server components
Access server-only environment variables in server components
Perform heavy data fetching in server components
Implement redirect logic withredirect()fromnext/navigationin server components
Begin client component files with'use client';directive in Next.js
Handle interactive UI with React hooks (useState,useEffect, React Query, wallet hooks) in client components
Access browser APIs (localStorage,window,IntersectionObserver) in client components
Support fast transitions with prefetched data in client components
Always callgetAuthToken()to retrieve JWT from cookies on server side
UseAuthorization: Bearerheader for API calls – never embed tokens in URLs
Return typed results (Project[],User[]) from server-side data fetches – avoidany
Wrap client-side API calls in React Query (@tanstack/react-query)
Use descriptive, stablequeryKeysin React Query for cache hits
ConfigurestaleTime/cacheTimein React Query based on freshness (default ≥ 60s)
Keep tokens secret via internal API routes or server actions
Never importposthog-jsin server components – only use analytics client-side
Files:
apps/dashboard/src/app/bridge/(general)/page.tsxapps/dashboard/src/app/bridge/(general)/components/header.tsxapps/dashboard/src/@/analytics/report.ts
apps/dashboard/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
apps/dashboard/**/*.{ts,tsx}: Always import from the central UI library under@/components/ui/*for reusable core UI components likeButton,Input,Select,Tabs,Card,Sidebar,Separator,Badge
UseNavLinkfrom@/components/ui/NavLinkfor internal navigation to ensure active states are handled automatically
For notices and skeletons, rely onAnnouncementBanner,GenericLoadingPage, andEmptyStateCardcomponents
Import icons fromlucide-reactor the project-specific…/iconsexports; never embed raw SVG
Keep components pure; fetch data outside using server components or hooks and pass it down via props
Use Tailwind CSS as the styling system; avoid inline styles or CSS modules
Merge class names withcnfrom@/lib/utilsto keep conditional logic readable
Stick to design tokens: usebg-card,border-border,text-muted-foregroundand other Tailwind variables instead of hard-coded colors
Use spacing utilities (px-*,py-*,gap-*) instead of custom margins
Follow mobile-first responsive design with Tailwind helpers (max-sm,md,lg,xl)
Never hard-code colors; always use Tailwind variables
Combine class names viacn, and exposeclassNameprop if useful in components
Use React Query (@tanstack/react-query) for all client-side data fetching with typed hooks
Files:
apps/dashboard/src/app/bridge/(general)/page.tsxapps/dashboard/src/app/bridge/(general)/components/header.tsxapps/dashboard/src/@/analytics/report.ts
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/(general)/page.tsx
apps/{dashboard,playground}/**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{tsx,ts}: Import UI primitives from @/components/ui/_ (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in Dashboard and Playground apps
Use NavLink for internal navigation so active states are handled automatically
Use Tailwind CSS for styling – no inline styles or CSS modules
Merge class names with cn() from @/lib/utils to keep conditional logic readable
Stick to design tokens for styling: backgrounds (bg-card), borders (border-border), muted text (text-muted-foreground), etc.
Server Components: Read cookies/headers with next/headers, access server-only environment variables or secrets, perform heavy data fetching, implement redirect logic with redirect() from next/navigation, and start files with import 'server-only'; to prevent client bundling
Client Components: Begin files with 'use client'; before imports, handle interactive UI relying on React hooks (useState, useEffect, React Query, wallet hooks), access browser APIs (localStorage, window, IntersectionObserver, etc.), and support fast transitions with client-side data prefetching
For client-side data fetching: Wrap calls in React Query (@tanstack/react-query), use descriptive and stable queryKeys for cache hits, configure staleTime / cacheTime based on freshness requirements (default ≥ 60 s), and keep tokens secret by calling internal API routes or server actions
Files:
apps/dashboard/src/app/bridge/(general)/page.tsxapps/dashboard/src/app/bridge/(general)/components/header.tsxapps/dashboard/src/@/analytics/report.ts
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: For server-side data fetching: Always call getAuthToken() to retrieve the JWT from cookies and inject the token as an Authorization: Bearer header – never embed it in the URL. Return typed results (Project[], User[], …) – avoid any
Never import posthog-js in server components; analytics reporting is client-side only
Files:
apps/dashboard/src/app/bridge/(general)/page.tsxapps/dashboard/src/app/bridge/(general)/components/header.tsxapps/dashboard/src/@/analytics/report.ts
apps/dashboard/**/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
Add
classNameprop to the root element of every component to allow external overrides
Files:
apps/dashboard/src/app/bridge/(general)/components/header.tsx
apps/{dashboard,playground}/**/components/**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/components/**/*.{tsx,ts}: Group feature-specific components under feature/components/_ and expose a barrel index.ts when necessary
Expose a className prop on the root element of every component for styling overrides
Files:
apps/dashboard/src/app/bridge/(general)/components/header.tsx
apps/dashboard/src/**/@/analytics/report.ts
📄 CodeRabbit inference engine (CLAUDE.md)
apps/dashboard/src/**/@/analytics/report.ts: Name analytics events with human-readable<subject> <verb>format (e.g. "contract deployed")
Name analytics event reporter functions asreport<Subject><Verb>in PascalCase
Include JSDoc comment explaining why the analytics event is needed and responsible person (@username) for maintenance
Files:
apps/dashboard/src/@/analytics/report.ts
apps/dashboard/**/@/analytics/report.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
apps/dashboard/**/@/analytics/report.{ts,tsx}: Create reporting helper functions namedreport<Subject><Verb>in PascalCase undersrc/@/analytics/report.ts
Add mandatory JSDoc to analytics reporting functions explaining why the event exists and who owns it (@username)
Accept a single typedpropertiesobject in analytics reporting functions and pass it unchanged toposthog.capture
Files:
apps/dashboard/src/@/analytics/report.ts
apps/{dashboard,playground}/src/@/analytics/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
Only add analytics events that answer a clear product or business question. Check src/@/analytics/report.ts first to avoid duplicates
Files:
apps/dashboard/src/@/analytics/report.ts
apps/{dashboard,playground}/src/@/analytics/report.ts
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/src/@/analytics/report.ts: Use the naming convention: Event name as human-readable phrase in the form ' ' (e.g., 'contract deployed'). Reporting function: 'report' (PascalCase). All reporting helpers live in the shared report.ts file
Add a JSDoc header to analytics event reporters explaining Why the event exists and Who owns it (@username). Accept a single typed properties object and forward it unchanged to posthog.capture()
Files:
apps/dashboard/src/@/analytics/report.ts
🪛 LanguageTool
apps/portal/src/app/bridge/bridge-widget/script/page.mdx
[grammar] ~15-~15: Use a hyphen to join words.
Context: ... description: "Add a widget to add cross chain swaps and fiat onramp to your app ...
(QB_NEW_EN_HYPHEN)
apps/portal/src/app/bridge/bridge-widget/react/page.mdx
[grammar] ~18-~18: Use a hyphen to join words.
Context: ... description: "Add a widget to add cross chain swaps and fiat onramp to your app ...
(QB_NEW_EN_HYPHEN)
apps/portal/src/app/bridge/bridge-widget/iframe/page.mdx
[grammar] ~17-~17: Use a hyphen to join words.
Context: ... description: "Add a widget to add cross chain swaps and fiat onramp to your app ...
(QB_NEW_EN_HYPHEN)
[style] ~95-~95: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ..."Change default Sell and Buy Tokens"> Set USDC on Base as the default sell token ...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
apps/portal/src/app/bridge/bridge-widget/page.mdx
[grammar] ~18-~18: Use a hyphen to join words.
Context: ... description: "Add a widget to add cross chain swaps and fiat onramp to your app"...
(QB_NEW_EN_HYPHEN)
⏰ 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). (5)
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Unit Tests
- GitHub Check: Lint Packages
- GitHub Check: Size
- GitHub Check: Analyze (javascript)
🔇 Additional comments (5)
apps/dashboard/src/app/bridge/(general)/page.tsx (1)
62-67: Heading size tweak looks goodReducing the md breakpoint heading size from
text-6xltotext-5xlis a safe, purely visual change; semantics and layout props remain intact and consistent with the existing Tailwind usage.apps/portal/src/app/bridge/page.mdx (1)
128-131: Client setup copy looks goodThe added sentence clearly explains how to obtain
clientIdfrom the dashboard; no further changes needed.apps/portal/redirects.mjs (1)
1096-1099: Bridge widget script redirect is consistent with existing patterns
/bridge/bridge-widget-scriptredirecting to/bridge/bridge-widget/scriptviabridgeRedirectsandcreateRedirectsmatches how other legacy paths are handled and should work correctly.Also applies to: 1122-1122
apps/dashboard/src/@/analytics/report.ts (1)
685-687: Analytics type extension aligns with new bridge widget linkAdding
"integrate-bridge-widget"tolinkTypekeeps the event typed and supports the new widget-integration link without affecting existing callers.apps/portal/src/app/bridge/sidebar.tsx (1)
29-44: Bridge Widget navigation grouping is coherentReplacing the single “BridgeWidget Script” entry with a “Bridge Widget” group and nested Iframe/Script/React links matches the new docs structure and keeps bridge widget entry points discoverable.
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 enhancing the `Bridge` and `Bridge Widget` functionalities, improving UI elements, adding new features, and updating documentation. It includes modifications to components, styling adjustments, and expanded capabilities for currency selection.
### Detailed summary
- Updated `Sidebar.tsx` to remove padding.
- Changed `page.mdx` headers from "Key Features" to "Features".
- Enhanced `reportBridgePageLinkClick` to include "integrate-bridge-widget".
- Modified `page.tsx` to include client ID instructions.
- Adjusted header font sizes in `header.tsx`.
- Improved `bridgeRedirects` to include new paths.
- Updated `bridge-widget` links in `sidebar.tsx`.
- Added `persistTokenSelections` and `currency` props to `UniversalBridgeEmbed`.
- Created `IframeCodePreview` component for iframe integration documentation.
- Added a new `BadgeLink` component for better user interaction.
- Expanded `BuyAndSwapEmbed` props to support currency and token selections.
- Updated documentation for `BridgeWidget` and `Iframe` integrations with examples.
- Enhanced `BridgePageUI` to include the new `AddBridgeWidgetLink`.
- Introduced multiple currency options for fiat values in widget interfaces.
> ✨ 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**
* Bridge widget available via Iframe, Script, and React component
* Fiat currency selection for buy/swap widgets
* Token selection persistence option
* "Add Bridge widget" integration link added to Bridge page
* **Documentation**
* New detailed guides and examples for Iframe, Script, and React integration
* Code preview and embedding examples added
* **Style**
* Typography, spacing, and layout refinements across Bridge pages
* Navigation reorganized into a Bridge Widget group
* **Chores**
* Added redirects for Bridge widget paths
<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-10-add_bridge_iframe_docs_update_bridge_iframe_path
branch
from
98eebf2 to
4191902
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (8)
apps/portal/src/app/bridge/bridge-widget/iframe/page.mdx (3)
17-17: Use hyphen for "cross-chain swaps" term.For consistency and grammatical correctness, "cross chain swaps" should be "cross-chain swaps" (hyphenated compound adjective).
Apply this diff:
- description: "Add a widget to add cross chain swaps and fiat onramp to your app using an iframe", + description: "Add a widget to add cross-chain swaps and fiat onramp to your app using an iframe",
33-39: Add alt text to DocImage components.The dark and light theme preview images need descriptive alt text for accessibility and SEO.
Apply this diff:
<div className='dark-only'> -<DocImage src={bridgeWidgetDark} /> +<DocImage src={bridgeWidgetDark} alt="Bridge widget iframe — dark theme" /> </div> <div className='light-only'> -<DocImage src={bridgeWidgetLight} /> +<DocImage src={bridgeWidgetLight} alt="Bridge widget iframe — light theme" /> </div>
107-107: Capitalize sentence start.Sentences should begin with a capital letter. The conditional statement starts with lowercase "if".
Apply this diff:
-if the custom default token selection is specified using the query params mentioned above, it overrides the last used tokens to ensure that configuration specified in query params is always respected. +If the custom default token selection is specified using the query params mentioned above, it overrides the last used tokens to ensure that configuration specified in query params is always respected.apps/portal/src/app/bridge/bridge-widget/script/page.mdx (1)
15-15: Use hyphen for "cross-chain swaps" term.For consistency and grammatical correctness, "cross chain swaps" should be "cross-chain swaps" (hyphenated compound adjective).
Apply this diff:
- description: "Add a widget to add cross chain swaps and fiat onramp to your app using a script tag", + description: "Add a widget to add cross-chain swaps and fiat onramp to your app using a script tag",apps/portal/src/app/bridge/bridge-widget/react/page.mdx (2)
18-18: Use hyphen for "cross-chain swaps" term.For consistency and grammatical correctness, "cross chain swaps" should be "cross-chain swaps" (hyphenated compound adjective).
Apply this diff:
- description: "Add a widget to add cross chain swaps and fiat onramp to your app using a React component", + description: "Add a widget to add cross-chain swaps and fiat onramp to your app using a React component",
34-39: Add alt text to DocImage components.The dark and light theme preview images need descriptive alt text for accessibility and SEO.
Apply this diff:
<div className='dark-only'> -<DocImage src={bridgeWidgetDark} /> +<DocImage src={bridgeWidgetDark} alt="Bridge widget React component — dark theme" /> </div> <div className='light-only'> -<DocImage src={bridgeWidgetLight} /> +<DocImage src={bridgeWidgetLight} alt="Bridge widget React component — light theme" /> </div>apps/portal/src/app/bridge/bridge-widget/page.mdx (2)
18-18: Use hyphen for "cross-chain swaps" term.For consistency and grammatical correctness, "cross chain swaps" should be "cross-chain swaps" (hyphenated compound adjective).
Apply this diff:
- description: "Add a widget to add cross chain swaps and fiat onramp to your app", + description: "Add a widget to add cross-chain swaps and fiat onramp to your app",
26-31: Add alt text to DocImage components.The dark and light theme preview images need descriptive alt text for accessibility and SEO.
Apply this diff:
<div className='dark-only'> -<DocImage src={bridgeWidgetDark} /> +<DocImage src={bridgeWidgetDark} alt="Bridge widget showcase — dark theme" /> </div> <div className='light-only'> -<DocImage src={bridgeWidgetLight} /> +<DocImage src={bridgeWidgetLight} alt="Bridge widget showcase — light theme" /> </div>
🧹 Nitpick comments (2)
apps/dashboard/src/app/bridge/widget/page.tsx (1)
42-45: Simplify the default logic forpersistTokenSelections.The current logic normalizes to
"true"or"false"strings, then compares again at line 61. This double-conversion is unnecessary.Apply this diff to streamline:
- const persistTokenSelections = - parse(searchParams.persistTokenSelections, (v) => - v === "false" ? "false" : "true", - ) || "true"; + const persistTokenSelections = + parse(searchParams.persistTokenSelections, (v) => v === "false" ? false : true) ?? true;Then at line 61:
- persistTokenSelections={persistTokenSelections === "true"} + persistTokenSelections={persistTokenSelections}apps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsx (1)
18-34: ExposeclassNameprop onBadgeLinkper coding guidelines.As per coding guidelines for
apps/{dashboard,playground}/**/components/**/*.{tsx,ts}: "Expose a className prop on the root element of every component for styling overrides."Apply this diff:
function BadgeLink(props: { href: string; label: string; onClick?: () => void; + className?: string; }) { return ( <Link href={props.href} - className="text-sm text-foreground bg-accent/50 rounded-full px-4 py-2 border hover:bg-accent flex items-center gap-2" + className={cn( + "text-sm text-foreground bg-accent/50 rounded-full px-4 py-2 border hover:bg-accent flex items-center gap-2", + props.className + )} target="_blank" onClick={props.onClick} >You'll also need to import
cnfrom@/lib/utils.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (3)
apps/dashboard/src/app/bridge/widget/opengraph-image.pngis excluded by!**/*.pngapps/portal/src/app/bridge/bridge-widget/bridge-widget-dark.pngis excluded by!**/*.pngapps/portal/src/app/bridge/bridge-widget/bridge-widget-light.pngis excluded by!**/*.png
📒 Files selected for processing (20)
apps/dashboard/src/@/analytics/report.ts(1 hunks)apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx(5 hunks)apps/dashboard/src/app/bridge/(general)/components/bridge-page.tsx(4 hunks)apps/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsx(2 hunks)apps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsx(1 hunks)apps/dashboard/src/app/bridge/(general)/components/header.tsx(1 hunks)apps/dashboard/src/app/bridge/(general)/page.tsx(1 hunks)apps/dashboard/src/app/bridge/widget/page.tsx(3 hunks)apps/portal/redirects.mjs(2 hunks)apps/portal/src/app/bridge/bridge-widget/iframe/iframe-code-preview.tsx(1 hunks)apps/portal/src/app/bridge/bridge-widget/iframe/page.mdx(1 hunks)apps/portal/src/app/bridge/bridge-widget/page.mdx(1 hunks)apps/portal/src/app/bridge/bridge-widget/react/page.mdx(1 hunks)apps/portal/src/app/bridge/bridge-widget/script/page.mdx(1 hunks)apps/portal/src/app/bridge/page.mdx(1 hunks)apps/portal/src/app/bridge/sidebar.tsx(1 hunks)apps/portal/src/app/bridge/swap/page.mdx(1 hunks)apps/portal/src/components/others/Sidebar.tsx(1 hunks)packages/thirdweb/src/exports/react.ts(1 hunks)packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx(0 hunks)
💤 Files with no reviewable changes (1)
- packages/thirdweb/src/react/web/ui/Bridge/bridge-widget/bridge-widget.tsx
🚧 Files skipped from review as they are similar to previous changes (10)
- apps/portal/src/components/others/Sidebar.tsx
- apps/dashboard/src/@/analytics/report.ts
- apps/portal/redirects.mjs
- apps/portal/src/app/bridge/bridge-widget/iframe/iframe-code-preview.tsx
- apps/portal/src/app/bridge/page.mdx
- apps/portal/src/app/bridge/swap/page.mdx
- apps/dashboard/src/@/components/blocks/BuyAndSwapEmbed.tsx
- apps/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsx
- apps/portal/src/app/bridge/sidebar.tsx
- packages/thirdweb/src/exports/react.ts
🧰 Additional context used
📓 Path-based instructions (11)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each TypeScript file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes in TypeScript
Avoidanyandunknownin TypeScript unless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.) in TypeScript
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity and testability
Re-use shared types from @/types or local types.ts barrel exports
Prefer type aliases over interface except for nominal shapes
Avoid any and unknown unless unavoidable; narrow generics whenever possible
Choose composition over inheritance; leverage utility types (Partial, Pick, etc.)
Comment only ambiguous logic in TypeScript files; avoid restating TypeScript types and signatures in prose
Files:
apps/dashboard/src/app/bridge/(general)/page.tsxapps/dashboard/src/app/bridge/widget/page.tsxapps/dashboard/src/app/bridge/(general)/components/header.tsxapps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsxapps/dashboard/src/app/bridge/(general)/components/bridge-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/dashboard/src/app/bridge/(general)/page.tsxapps/dashboard/src/app/bridge/widget/page.tsxapps/dashboard/src/app/bridge/(general)/components/header.tsxapps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsxapps/dashboard/src/app/bridge/(general)/components/bridge-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/(general)/page.tsxapps/dashboard/src/app/bridge/widget/page.tsxapps/dashboard/src/app/bridge/(general)/components/header.tsxapps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsxapps/dashboard/src/app/bridge/(general)/components/bridge-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/(general)/page.tsxapps/dashboard/src/app/bridge/widget/page.tsxapps/dashboard/src/app/bridge/(general)/components/header.tsxapps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsxapps/dashboard/src/app/bridge/(general)/components/bridge-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/(general)/page.tsxapps/dashboard/src/app/bridge/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/dashboard/src/app/bridge/(general)/page.tsxapps/dashboard/src/app/bridge/widget/page.tsxapps/dashboard/src/app/bridge/(general)/components/header.tsxapps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsxapps/dashboard/src/app/bridge/(general)/components/bridge-page.tsx
apps/{dashboard,playground}/**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{tsx,ts}: Import UI primitives from @/components/ui/_ (Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in Dashboard and Playground apps
Use NavLink for internal navigation so active states are handled automatically
Use Tailwind CSS for styling – no inline styles or CSS modules
Merge class names with cn() from @/lib/utils to keep conditional logic readable
Stick to design tokens for styling: backgrounds (bg-card), borders (border-border), muted text (text-muted-foreground), etc.
Server Components: Read cookies/headers with next/headers, access server-only environment variables or secrets, perform heavy data fetching, implement redirect logic with redirect() from next/navigation, and start files with import 'server-only'; to prevent client bundling
Client Components: Begin files with 'use client'; before imports, handle interactive UI relying on React hooks (useState, useEffect, React Query, wallet hooks), access browser APIs (localStorage, window, IntersectionObserver, etc.), and support fast transitions with client-side data prefetching
For client-side data fetching: Wrap calls in React Query (@tanstack/react-query), use descriptive and stable queryKeys for cache hits, configure staleTime / cacheTime based on freshness requirements (default ≥ 60 s), and keep tokens secret by calling internal API routes or server actions
Files:
apps/dashboard/src/app/bridge/(general)/page.tsxapps/dashboard/src/app/bridge/widget/page.tsxapps/dashboard/src/app/bridge/(general)/components/header.tsxapps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsxapps/dashboard/src/app/bridge/(general)/components/bridge-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/(general)/page.tsxapps/dashboard/src/app/bridge/widget/page.tsxapps/dashboard/src/app/bridge/(general)/components/header.tsxapps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsxapps/dashboard/src/app/bridge/(general)/components/bridge-page.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Lazy-import optional features; avoid top-level side-effects
Files:
apps/dashboard/src/app/bridge/(general)/page.tsxapps/dashboard/src/app/bridge/widget/page.tsxapps/dashboard/src/app/bridge/(general)/components/header.tsxapps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsxapps/dashboard/src/app/bridge/(general)/components/bridge-page.tsx
apps/dashboard/**/components/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
Add
classNameprop to the root element of every component to allow external overrides
Files:
apps/dashboard/src/app/bridge/(general)/components/header.tsxapps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsxapps/dashboard/src/app/bridge/(general)/components/bridge-page.tsx
apps/{dashboard,playground}/**/components/**/*.{tsx,ts}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/components/**/*.{tsx,ts}: Group feature-specific components under feature/components/_ and expose a barrel index.ts when necessary
Expose a className prop on the root element of every component for styling overrides
Files:
apps/dashboard/src/app/bridge/(general)/components/header.tsxapps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsxapps/dashboard/src/app/bridge/(general)/components/bridge-page.tsx
🧬 Code graph analysis (3)
apps/dashboard/src/app/bridge/widget/page.tsx (2)
packages/thirdweb/src/exports/react.ts (1)
SupportedFiatCurrency(1-1)apps/dashboard/src/app/bridge/(general)/components/client/UniversalBridgeEmbed.tsx (1)
UniversalBridgeEmbed(22-39)
apps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsx (1)
apps/dashboard/src/@/analytics/report.ts (1)
reportBridgePageLinkClick(685-689)
apps/dashboard/src/app/bridge/(general)/components/bridge-page.tsx (1)
apps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsx (1)
AddBridgeWidgetLink(6-16)
🪛 LanguageTool
apps/portal/src/app/bridge/bridge-widget/react/page.mdx
[grammar] ~18-~18: Use a hyphen to join words.
Context: ... description: "Add a widget to add cross chain swaps and fiat onramp to your app ...
(QB_NEW_EN_HYPHEN)
apps/portal/src/app/bridge/bridge-widget/page.mdx
[grammar] ~18-~18: Use a hyphen to join words.
Context: ... description: "Add a widget to add cross chain swaps and fiat onramp to your app"...
(QB_NEW_EN_HYPHEN)
apps/portal/src/app/bridge/bridge-widget/iframe/page.mdx
[grammar] ~17-~17: Use a hyphen to join words.
Context: ... description: "Add a widget to add cross chain swaps and fiat onramp to your app ...
(QB_NEW_EN_HYPHEN)
[style] ~95-~95: Three successive sentences begin with the same word. Consider rewording the sentence or use a thesaurus to find a synonym.
Context: ..."Change default Sell and Buy Tokens"> Set USDC on Base as the default sell token ...
(ENGLISH_WORD_REPEAT_BEGINNING_RULE)
apps/portal/src/app/bridge/bridge-widget/script/page.mdx
[grammar] ~15-~15: Use a hyphen to join words.
Context: ... description: "Add a widget to add cross chain swaps and fiat onramp to your app ...
(QB_NEW_EN_HYPHEN)
⏰ 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). (4)
- GitHub Check: Lint Packages
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Size
- GitHub Check: Analyze (javascript)
🔇 Additional comments (5)
apps/dashboard/src/app/bridge/(general)/page.tsx (1)
63-63: LGTM – Typography adjustment aligns with UI consistency updates.The heading size reduction on medium+ screens (text-6xl → text-5xl) is consistent with the broader UI refinements across the bridge pages.
apps/dashboard/src/app/bridge/(general)/components/header.tsx (1)
16-21: LGTM – Layout adjustments improve consistency.The narrower container (max-w-5xl) and increased padding align with the updated bridge page layout.
apps/dashboard/src/app/bridge/(general)/components/bridge-page.tsx (2)
33-37: LGTM – Badge link integration is clean and well-positioned.The
AddBridgeWidgetLinkplacement before the main heading provides good visibility for the widget integration call-to-action.
91-93: LGTM – DataSquare refinements improve visual consistency.The size reduction (220px → 200px), border radius adjustment (xl → 2xl), and typography changes (font-mono → font-semibold) create a more polished, uniform appearance.
apps/dashboard/src/app/bridge/(general)/components/client/badge-link.tsx (1)
6-16: LGTM – Analytics integration is correct.The
AddBridgeWidgetLinkproperly reports the "integrate-bridge-widget" event, which matches the extendedreportBridgePageLinkClicksignature.
| const VALID_CURRENCIES: SupportedFiatCurrency[] = [ | ||
| "USD", | ||
| "EUR", | ||
| "GBP", | ||
| "JPY", | ||
| "KRW", | ||
| "CNY", | ||
| "INR", | ||
| "NOK", | ||
| "SEK", | ||
| "CHF", | ||
| "AUD", | ||
| "CAD", | ||
| "NZD", | ||
| "MXN", | ||
| "BRL", | ||
| "CLP", | ||
| "CZK", | ||
| "DKK", | ||
| "HKD", | ||
| "HUF", | ||
| "IDR", | ||
| "ILS", | ||
| "ISK", | ||
| ]; |
There was a problem hiding this comment.
🧩 Analysis chain
🌐 Web query:
thirdweb/react SupportedFiatCurrency type latest version
💡 Result:
As of the latest thirdweb React/TypeScript SDK docs, SupportedFiatCurrency currently only supports "USD". [1][2]
Sources:
- convertFiatToCrypto / convertCryptoToFiat docs (showing parameter type SupportedFiatCurrency and noting only USD supported). [1]
- BuyWidget / widget docs referencing currency: SupportedFiatCurrency. [2]
References:
[1] thirdweb convertFiatToCrypto / convertCryptoToFiat docs.
[2] thirdweb BuyWidget / widget docs.
Remove or dramatically reduce VALID_CURRENCIES — the hardcoded list does not match actual library support.
The thirdweb/react library currently only supports "USD" as a fiat currency, but this list includes 23 currencies (EUR, GBP, JPY, KRW, CNY, etc.). Using this array for validation will incorrectly allow unsupported currencies, leading to runtime failures. Either maintain only the currencies actually supported by the underlying library, or fetch the supported list from the library at runtime if it provides an export for that.
graphite-app
bot
deleted the
12-10-add_bridge_iframe_docs_update_bridge_iframe_path
branch
PR-Codex overview
This PR focuses on enhancing the
Bridgefeatures in the application, including updates to the UI, functionality improvements, and new documentation for integrating theBridge widgetacross various platforms.Detailed summary
Sidebarcomponent styling.Key FeaturestoFeaturesin documentation.integrate-bridge-widgetlink type.UniversalBridgeEmbedto supportpersistTokenSelectionsandcurrency.IframeCodePreviewfor iframe integration.Bridge widgetandBridge widget component.Bridgefunctionality.Summary by CodeRabbit
New Features
Documentation
Style
Chores
Exports
✏️ Tip: You can customize this high-level summary in your review settings.