[MNY-356] Add tokenEditable and amountEditable props on BuyWidget #8621
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
🦋 Changeset detectedLatest commit: 8d4b6a1 The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
WalkthroughAdds two optional boolean props, Changes
Sequence Diagram(s)sequenceDiagram
actor User
participant IframePage as Page (iframe URL / query)
participant Embed as BuyWidgetEmbed
participant Widget as BuyWidget
participant Fund as FundWallet
participant TokenSec as TokenSection
User->>IframePage: opens iframe URL (may include amountEditable=false / tokenEditable=false)
IframePage->>Embed: parse query params -> props { amountEditable?, tokenEditable? }
Embed->>Widget: forward props
Widget->>Fund: forward props
Fund->>TokenSec: forward props
alt tokenEditable = false
TokenSec-->>User: render token selector disabled (no chevron, non-interactive)
else tokenEditable = true
TokenSec-->>User: render token selector interactive
end
alt amountEditable = false
Fund-->>User: render amount input & suggested buttons disabled/hidden
else amountEditable = true
Fund-->>User: render editable amount input and suggested buttons
end
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Warning Review ran into problems🔥 ProblemsErrors were encountered while retrieving linked issues. Errors (1)
Comment |
github-actions
bot
added
Dashboard
MananTank
changed the title
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: 0
🧹 Nitpick comments (3)
apps/playground-web/src/app/bridge/components/LeftSection.tsx (1)
268-281: Consider usinguseId()for checkbox IDs for consistency.Other checkboxes in this file (e.g.,
cryptoPaymentId,cardPaymentId) useuseId()for generating unique IDs. The hardcoded strings"token-editable"and"amount-editable"work but break the established pattern.♻️ Suggested refactor
Add to the existing
useId()declarations around line 66-67:const cryptoPaymentId = useId(); const cardPaymentId = useId(); + const tokenEditableId = useId(); + const amountEditableId = useId();Then update the checkbox IDs:
<Checkbox checked={payOptions.tokenEditable} - id="token-editable" + id={tokenEditableId} ... /> - <Label htmlFor="token-editable">Token Editable</Label> + <Label htmlFor={tokenEditableId}>Token Editable</Label><Checkbox checked={payOptions.amountEditable} - id="amount-editable" + id={amountEditableId} ... /> - <Label htmlFor="amount-editable">Amount Editable</Label> + <Label htmlFor={amountEditableId}>Amount Editable</Label>packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (1)
503-507: Consider using nullish coalescing for cleaner defaults.The explicit undefined check works correctly, but could be simplified using the nullish coalescing operator for consistency with common patterns.
♻️ Optional simplification
- const amountEditable = - props.amountEditable === undefined ? true : props.amountEditable; - - const tokenEditable = - props.tokenEditable === undefined ? true : props.tokenEditable; + const amountEditable = props.amountEditable ?? true; + const tokenEditable = props.tokenEditable ?? true;packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx (1)
562-595: Redundant disabled check in suggested amount buttons.The
props.amountEditable === falsecondition at line 569 is unnecessary since this entire block only renders whenprops.amountEditableis truthy (line 562). WhenamountEditableis true, this check will always evaluate to false.♻️ Suggested simplification
<Button - disabled={ - !props.selectedToken?.data || props.amountEditable === false - } + disabled={!props.selectedToken?.data} key={amount}
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (17)
.changeset/dirty-breads-swim.mdapps/dashboard/src/app/bridge/buy-widget/BuyWidgetEmbed.client.tsxapps/dashboard/src/app/bridge/buy-widget/page.tsxapps/playground-web/src/app/bridge/buy-widget/BuyPlayground.tsxapps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsxapps/playground-web/src/app/bridge/components/CodeGen.tsxapps/playground-web/src/app/bridge/components/LeftSection.tsxapps/playground-web/src/app/bridge/components/RightSection.tsxapps/playground-web/src/app/bridge/components/buildBuyIframeUrl.tsapps/playground-web/src/app/bridge/components/types.tsapps/playground-web/src/app/bridge/transaction-widget/TransactionPlayground.tsxapps/portal/src/app/bridge/buy-widget/iframe/page.mdxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/selected-token-button.tsxpackages/thirdweb/src/react/web/ui/components/buttons.tsxpackages/thirdweb/src/stories/BuyWidget.stories.tsx
🧰 Additional context used
📓 Path-based instructions (13)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each TypeScript file to one stateless, single-responsibility function for clarity
Re-use shared types from@/typesor localtypes.tsbarrels
Prefer type aliases over interface except for nominal shapes in TypeScript
Avoidanyandunknownin TypeScript unless unavoidable; narrow generics when possible
Choose composition over inheritance; leverage utility types (Partial,Pick, etc.) in TypeScript
**/*.{ts,tsx}: Write idiomatic TypeScript with explicit function declarations and return types
Limit each file to one stateless, single-responsibility function for clarity and testability
Re-use shared types from @/types or local types.ts barrel exports
Prefer type aliases over interface except for nominal shapes
Avoid any and unknown unless unavoidable; narrow generics whenever possible
Choose composition over inheritance; leverage utility types (Partial, Pick, etc.)
Comment only ambiguous logic in TypeScript files; avoid restating TypeScript types and signatures in prose
Files:
apps/playground-web/src/app/bridge/components/types.tsapps/playground-web/src/app/bridge/components/buildBuyIframeUrl.tspackages/thirdweb/src/stories/BuyWidget.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/selected-token-button.tsxpackages/thirdweb/src/react/web/ui/components/buttons.tsxapps/playground-web/src/app/bridge/components/LeftSection.tsxapps/playground-web/src/app/bridge/components/RightSection.tsxapps/playground-web/src/app/bridge/buy-widget/BuyPlayground.tsxapps/dashboard/src/app/bridge/buy-widget/page.tsxapps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsxapps/dashboard/src/app/bridge/buy-widget/BuyWidgetEmbed.client.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsxapps/playground-web/src/app/bridge/components/CodeGen.tsxapps/playground-web/src/app/bridge/transaction-widget/TransactionPlayground.tsx
apps/{dashboard,playground-web}/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/{dashboard,playground-web}/src/**/*.{ts,tsx}: Import UI component primitives from@/components/ui/*(Button, Input, Select, Tabs, Card, Sidebar, Badge, Separator) in dashboard and playground
Use Tailwind CSS only – no inline styles or CSS modules in dashboard and playground
Usecn()from@/lib/utilsfor conditional Tailwind class merging
Use design system tokens for styling (backgrounds:bg-card, borders:border-border, muted text:text-muted-foreground)
ExposeclassNameprop on root element for component overrides
Files:
apps/playground-web/src/app/bridge/components/types.tsapps/playground-web/src/app/bridge/components/buildBuyIframeUrl.tsapps/playground-web/src/app/bridge/components/LeftSection.tsxapps/playground-web/src/app/bridge/components/RightSection.tsxapps/playground-web/src/app/bridge/buy-widget/BuyPlayground.tsxapps/dashboard/src/app/bridge/buy-widget/page.tsxapps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsxapps/dashboard/src/app/bridge/buy-widget/BuyWidgetEmbed.client.tsxapps/playground-web/src/app/bridge/components/CodeGen.tsxapps/playground-web/src/app/bridge/transaction-widget/TransactionPlayground.tsx
**/*.{js,jsx,ts,tsx,json}
📄 CodeRabbit inference engine (AGENTS.md)
Biome governs formatting and linting; its rules live in biome.json. Run
pnpm fix&pnpm lintbefore committing, ensure there are no linting errors
Files:
apps/playground-web/src/app/bridge/components/types.tsapps/playground-web/src/app/bridge/components/buildBuyIframeUrl.tspackages/thirdweb/src/stories/BuyWidget.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/selected-token-button.tsxpackages/thirdweb/src/react/web/ui/components/buttons.tsxapps/playground-web/src/app/bridge/components/LeftSection.tsxapps/playground-web/src/app/bridge/components/RightSection.tsxapps/playground-web/src/app/bridge/buy-widget/BuyPlayground.tsxapps/dashboard/src/app/bridge/buy-widget/page.tsxapps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsxapps/dashboard/src/app/bridge/buy-widget/BuyWidgetEmbed.client.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsxapps/playground-web/src/app/bridge/components/CodeGen.tsxapps/playground-web/src/app/bridge/transaction-widget/TransactionPlayground.tsx
**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
Lazy-import optional features; avoid top-level side-effects
Files:
apps/playground-web/src/app/bridge/components/types.tsapps/playground-web/src/app/bridge/components/buildBuyIframeUrl.tspackages/thirdweb/src/stories/BuyWidget.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/selected-token-button.tsxpackages/thirdweb/src/react/web/ui/components/buttons.tsxapps/playground-web/src/app/bridge/components/LeftSection.tsxapps/playground-web/src/app/bridge/components/RightSection.tsxapps/playground-web/src/app/bridge/buy-widget/BuyPlayground.tsxapps/dashboard/src/app/bridge/buy-widget/page.tsxapps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsxapps/dashboard/src/app/bridge/buy-widget/BuyWidgetEmbed.client.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsxapps/playground-web/src/app/bridge/components/CodeGen.tsxapps/playground-web/src/app/bridge/transaction-widget/TransactionPlayground.tsx
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/stories/BuyWidget.stories.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/selected-token-button.tsxpackages/thirdweb/src/react/web/ui/components/buttons.tsxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx
**/*.stories.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
Add Storybook stories (
*.stories.tsx) alongside new UI components for documentation
Files:
packages/thirdweb/src/stories/BuyWidget.stories.tsx
**/*.stories.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
For new UI components, add Storybook stories (*.stories.tsx) alongside the code
Files:
packages/thirdweb/src/stories/BuyWidget.stories.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/buy-widget/page.tsxapps/dashboard/src/app/bridge/buy-widget/BuyWidgetEmbed.client.tsx
apps/dashboard/**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
apps/dashboard/**/*.{ts,tsx}: Always import from the central UI library under@/components/ui/*for reusable core UI components likeButton,Input,Select,Tabs,Card,Sidebar,Separator,Badge
UseNavLinkfrom@/components/ui/NavLinkfor internal navigation to ensure active states are handled automatically
For notices and skeletons, rely onAnnouncementBanner,GenericLoadingPage, andEmptyStateCardcomponents
Import icons fromlucide-reactor the project-specific…/iconsexports; never embed raw SVG
Keep components pure; fetch data outside using server components or hooks and pass it down via props
Use Tailwind CSS as the styling system; avoid inline styles or CSS modules
Merge class names withcnfrom@/lib/utilsto keep conditional logic readable
Stick to design tokens: usebg-card,border-border,text-muted-foregroundand other Tailwind variables instead of hard-coded colors
Use spacing utilities (px-*,py-*,gap-*) instead of custom margins
Follow mobile-first responsive design with Tailwind helpers (max-sm,md,lg,xl)
Never hard-code colors; always use Tailwind variables
Combine class names viacn, and exposeclassNameprop if useful in components
Use React Query (@tanstack/react-query) for all client-side data fetching with typed hooks
Files:
apps/dashboard/src/app/bridge/buy-widget/page.tsxapps/dashboard/src/app/bridge/buy-widget/BuyWidgetEmbed.client.tsx
apps/dashboard/**/page.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
Use the
containerclass with amax-w-7xlcap for consistent page width
Files:
apps/dashboard/src/app/bridge/buy-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/buy-widget/page.tsxapps/dashboard/src/app/bridge/buy-widget/BuyWidgetEmbed.client.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: For server-side data fetching: Always call getAuthToken() to retrieve the JWT from cookies and inject the token as an Authorization: Bearer header – never embed it in the URL. Return typed results (Project[], User[], …) – avoid any
Never import posthog-js in server components; analytics reporting is client-side only
Files:
apps/dashboard/src/app/bridge/buy-widget/page.tsxapps/dashboard/src/app/bridge/buy-widget/BuyWidgetEmbed.client.tsx
apps/dashboard/**/*.client.tsx
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
apps/dashboard/**/*.client.tsx: Name component files after the component in PascalCase; append.client.tsxwhen the component is interactive
Client components must start with'use client';directive before imports
Files:
apps/dashboard/src/app/bridge/buy-widget/BuyWidgetEmbed.client.tsx
🧬 Code graph analysis (4)
packages/thirdweb/src/stories/BuyWidget.stories.tsx (2)
packages/thirdweb/src/stories/utils.tsx (1)
storyClient(14-16)packages/thirdweb/src/exports/chains.ts (1)
base(18-18)
packages/thirdweb/src/react/web/ui/Bridge/common/selected-token-button.tsx (3)
packages/thirdweb/src/react/web/ui/components/buttons.tsx (1)
Button(27-161)packages/thirdweb/src/react/core/design-system/index.ts (3)
spacing(142-154)radius(156-164)iconSize(166-176)packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)
apps/playground-web/src/app/bridge/components/LeftSection.tsx (2)
packages/thirdweb/src/react/web/ui/components/formElements.tsx (1)
Label(20-28)apps/dashboard/src/@/components/ui/checkbox.tsx (1)
Checkbox(34-34)
apps/dashboard/src/app/bridge/buy-widget/page.tsx (1)
apps/dashboard/src/app/bridge/_common/parseQueryParams.ts (1)
parseQueryParams(3-11)
🪛 Gitleaks (8.30.0)
packages/thirdweb/src/stories/BuyWidget.stories.tsx
[high] 72-72: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
[high] 84-84: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
[high] 96-96: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (8)
- GitHub Check: Size
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: E2E Tests (pnpm, webpack)
- GitHub Check: Build Packages
- GitHub Check: Unit Tests
- GitHub Check: E2E Tests (pnpm, vite)
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (21)
packages/thirdweb/src/react/web/ui/components/buttons.tsx (1)
34-36: LGTM!Good fix to prevent the active state transform from applying when the button is disabled. This ensures consistent visual behavior for disabled buttons across the widget.
apps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsx (1)
27-28: LGTM!Sensible defaults with editability enabled by default. Note that the
LeftSectioncomponent only displays editability controls for the "buy" widget, not "checkout" - this appears intentional since checkout flows typically have fixed products and amounts.apps/playground-web/src/app/bridge/components/buildBuyIframeUrl.ts (1)
71-78: LGTM!The implementation correctly appends query parameters only when editability is explicitly disabled (
=== false), maintaining backward compatibility where the default behavior is editable. This pattern is consistent with other optional parameters in this file.apps/playground-web/src/app/bridge/components/LeftSection.tsx (1)
263-301: LGTM on the overall implementation.The "Editability Options" section is well-structured, correctly scoped to the "buy" widget, and the
onCheckedChangehandlers properly handle Radix'sCheckedStatetype by comparingchecked === true.packages/thirdweb/src/react/web/ui/Bridge/common/selected-token-button.tsx (2)
30-50: LGTM on the disabled state implementation.The implementation correctly:
- Removes hover background when disabled
- Passes the
disabledprop to the underlying Button- Overrides default disabled styling with
cursor: "default"andopacity: 1for a cleaner non-interactive appearance (rather than the typical "not-allowed" cursor and dimmed opacity)This provides a subtle indication that the field is locked rather than broken/unavailable, which aligns well with the "editability" concept.
174-189: Good UX decision.Hiding the chevron indicator when the button is disabled clearly communicates that the token selection is not interactive. This is better than showing a dropdown arrow on a non-clickable element.
apps/playground-web/src/app/bridge/components/RightSection.tsx (1)
73-74: LGTM!The
amountEditableandtokenEditableprops are correctly passed toBuyWidgetfrom the playground options. The placement alongside related props likereceiverAddressmaintains good code organization.apps/playground-web/src/app/bridge/components/CodeGen.tsx (1)
163-170: LGTM!The code generation logic correctly emits
amountEditableandtokenEditableonly when explicitly set tofalsefor the "buy" widget. The strict equality check (=== false) appropriately distinguishes betweenfalseandundefined, ensuring minimal generated code when defaults are used..changeset/dirty-breads-swim.md (1)
1-5: LGTM!The changeset correctly identifies this as a
patchrelease for additive, non-breaking props. The description clearly communicates the feature purpose.apps/playground-web/src/app/bridge/buy-widget/BuyPlayground.tsx (1)
27-28: LGTM!The default values of
truefor bothamountEditableandtokenEditablealign with the expected behavior where editing is enabled by default, and users can explicitly disable it.apps/playground-web/src/app/bridge/transaction-widget/TransactionPlayground.tsx (1)
24-25: No changes needed. TheamountEditableandtokenEditablecontrols inLeftSection.tsxare properly gated behindprops.widget === "buy"(line 159), so they are only displayed for the Buy widget and not for TransactionWidget. Users will not see these controls when using the transaction widget, avoiding any confusion.Likely an incorrect or invalid review comment.
apps/portal/src/app/bridge/buy-widget/iframe/page.mdx (1)
143-167: LGTM! Documentation is clear and well-structured.The new "Editability Options" section follows the existing documentation patterns, with appropriate examples showing the query parameters in context (including
chainfor token selection andamountfor amount editing).apps/dashboard/src/app/bridge/buy-widget/BuyWidgetEmbed.client.tsx (1)
23-24: LGTM! Clean prop forwarding implementation.The new
amountEditableandtokenEditableprops are correctly typed as optional booleans and properly forwarded to the underlyingBuyWidgetcomponent, consistent with the existing props pattern.Also applies to: 39-40, 75-76
packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx (1)
216-225: LGTM! Well-documented new props with clear JSDoc.The new
amountEditableandtokenEditableprops are properly typed and documented, clearly explaining the default behavior (editable by default).apps/dashboard/src/app/bridge/buy-widget/page.tsx (2)
76-82: LGTM! Query parameter parsing correctly implements the documented behavior.The parsing logic intentionally returns
falseonly when explicitly set to"false", andundefinedotherwise. This allows the downstreamBuyWidgetcomponent to apply its default (editable) behavior when the parameter is omitted, which aligns with the documentation.
101-102: Props correctly forwarded to BuyWidgetEmbed.packages/thirdweb/src/stories/BuyWidget.stories.tsx (1)
66-101: LGTM! Good test coverage for the new editability props.The three new story variants provide comprehensive coverage:
- Individual prop testing (
TokenNotEditable,AmountNotEditable)- Combined scenario (
TokenAndAmountNotEditable)The stories follow existing patterns and use the same Base USDC token address as other stories.
Note: The static analysis hints flagging the token address as a "Generic API Key" are false positives—this is the public USDC contract address on Base (0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913), not a secret.
apps/playground-web/src/app/bridge/components/types.ts (1)
62-65: LGTM!The new
amountEditableandtokenEditableboolean fields are properly typed and well-placed within thepayOptionsobject. The comment clearly indicates their purpose.packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx (3)
116-125: LGTM!The new props are well-documented with clear JSDoc comments explaining their purpose and default behavior. The props are correctly typed as required booleans, with the defaulting logic handled by the parent component (BuyWidget).
477-485: LGTM!The
tokenEditableprop is correctly used to disable the token selection button, preventing users from changing the token when editing is disabled.
489-507: LGTM!The token amount
DecimalInputis correctly disabled whenamountEditableis false, preventing user modification of the value.
Codecov Report❌ Patch coverage is Additional details and impacted files@@ Coverage Diff @@
## main #8621 +/- ##
==========================================
- Coverage 53.02% 53.00% -0.02%
==========================================
Files 924 924
Lines 61726 61746 +20
Branches 4035 4031 -4
==========================================
Hits 32730 32730
- Misses 28898 28918 +20
Partials 98 98
🚀 New features to boost your workflow:
|
size-limit report 📦
|
Merge activity
|
) <!-- ## title your PR with this format: "[SDK/Dashboard/Portal] Feature/Fix: Concise title for the changes" If you did not copy the branch name from Linear, paste the issue tag here (format is TEAM-0000): ## Notes for the reviewer Anything important to call out? Be sure to also clarify these in your comments. ## How to test Unit tests, playground, etc. --> <!-- start pr-codex --> --- ## PR-Codex overview This PR introduces two new properties, `amountEditable` and `tokenEditable`, to enhance the `BuyWidget` component, allowing control over editing options for token selection and amount. This improves user experience by providing flexibility in the widget's functionality. ### Detailed summary - Added `amountEditable` and `tokenEditable` properties to `BuyWidget`. - Updated `BuyPlayground.tsx`, `CheckoutPlayground.tsx`, and `TransactionPlayground.tsx` to use new props. - Modified `CodeGen.tsx` to incorporate editability options. - Updated URL generation in `buildBuyIframeUrl.ts` for new props. - Added editability options in `LeftSection.tsx`. - Enhanced `BuyWidgetEmbed` to accept new props. - Implemented stories in `BuyWidget.stories.tsx` for editable and non-editable states. - Added documentation in `iframe/page.mdx` for new features. - Adjusted `FundWallet.tsx` and `TokenSection.tsx` to respect new editability options. > ✨ 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 ## Release Notes * **New Features** * Added `amountEditable` and `tokenEditable` props to the BuyWidget component, allowing developers to disable token selection and/or amount editing in the buy flow. * Enhanced UI controls to prevent interaction with locked fields when these options are disabled. * Updated documentation with examples of how to use the new editability options. * **Tests** * Added story variants demonstrating token and amount lock scenarios. <sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
graphite-app
bot
force-pushed
the
mny-356
branch
from
37b801b to
8d4b6a1
Compare
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx (1)
562-595: Redundant disabled check inside conditionally rendered block.The
props.amountEditable === falsecheck in thedisabledcondition on line 569 is redundant because this entire block is already conditionally rendered only whenprops.amountEditableis truthy (line 562). The condition will always evaluate tofalse.Suggested simplification
<Button - disabled={ - !props.selectedToken?.data || props.amountEditable === false - } + disabled={!props.selectedToken?.data} key={amount}
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (17)
.changeset/dirty-breads-swim.mdapps/dashboard/src/app/bridge/buy-widget/BuyWidgetEmbed.client.tsxapps/dashboard/src/app/bridge/buy-widget/page.tsxapps/playground-web/src/app/bridge/buy-widget/BuyPlayground.tsxapps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsxapps/playground-web/src/app/bridge/components/CodeGen.tsxapps/playground-web/src/app/bridge/components/LeftSection.tsxapps/playground-web/src/app/bridge/components/RightSection.tsxapps/playground-web/src/app/bridge/components/buildBuyIframeUrl.tsapps/playground-web/src/app/bridge/components/types.tsapps/playground-web/src/app/bridge/transaction-widget/TransactionPlayground.tsxapps/portal/src/app/bridge/buy-widget/iframe/page.mdxpackages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsxpackages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsxpackages/thirdweb/src/react/web/ui/Bridge/common/selected-token-button.tsxpackages/thirdweb/src/react/web/ui/components/buttons.tsxpackages/thirdweb/src/stories/BuyWidget.stories.tsx
🚧 Files skipped from review as they are similar to previous changes (9)
- apps/playground-web/src/app/bridge/components/LeftSection.tsx
- apps/playground-web/src/app/bridge/components/RightSection.tsx
- packages/thirdweb/src/react/web/ui/Bridge/common/selected-token-button.tsx
- apps/playground-web/src/app/bridge/transaction-widget/TransactionPlayground.tsx
- apps/playground-web/src/app/bridge/components/buildBuyIframeUrl.ts
- apps/playground-web/src/app/bridge/checkout-widget/CheckoutPlayground.tsx
- apps/playground-web/src/app/bridge/buy-widget/BuyPlayground.tsx
- apps/playground-web/src/app/bridge/components/types.ts
- packages/thirdweb/src/react/web/ui/Bridge/BuyWidget.tsx
🧰 Additional context used
📓 Path-based instructions (13)
**/*.{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/buy-widget/BuyWidgetEmbed.client.tsxapps/playground-web/src/app/bridge/components/CodeGen.tsxpackages/thirdweb/src/react/web/ui/components/buttons.tsxpackages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsxapps/dashboard/src/app/bridge/buy-widget/page.tsxpackages/thirdweb/src/stories/BuyWidget.stories.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/buy-widget/BuyWidgetEmbed.client.tsxapps/playground-web/src/app/bridge/components/CodeGen.tsxapps/dashboard/src/app/bridge/buy-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/buy-widget/BuyWidgetEmbed.client.tsxapps/dashboard/src/app/bridge/buy-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/buy-widget/BuyWidgetEmbed.client.tsxapps/dashboard/src/app/bridge/buy-widget/page.tsx
apps/dashboard/**/*.client.tsx
📄 CodeRabbit inference engine (.cursor/rules/dashboard.mdc)
apps/dashboard/**/*.client.tsx: Name component files after the component in PascalCase; append.client.tsxwhen the component is interactive
Client components must start with'use client';directive before imports
Files:
apps/dashboard/src/app/bridge/buy-widget/BuyWidgetEmbed.client.tsx
**/*.{js,jsx,ts,tsx,json}
📄 CodeRabbit inference engine (AGENTS.md)
Biome governs formatting and linting; its rules live in biome.json. Run
pnpm fix&pnpm lintbefore committing, ensure there are no linting errors
Files:
apps/dashboard/src/app/bridge/buy-widget/BuyWidgetEmbed.client.tsxapps/playground-web/src/app/bridge/components/CodeGen.tsxpackages/thirdweb/src/react/web/ui/components/buttons.tsxpackages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsxapps/dashboard/src/app/bridge/buy-widget/page.tsxpackages/thirdweb/src/stories/BuyWidget.stories.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/buy-widget/BuyWidgetEmbed.client.tsxapps/dashboard/src/app/bridge/buy-widget/page.tsx
apps/{dashboard,playground}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
apps/{dashboard,playground}/**/*.{ts,tsx}: For server-side data fetching: Always call getAuthToken() to retrieve the JWT from cookies and inject the token as an Authorization: Bearer header – never embed it in the URL. Return typed results (Project[], User[], …) – avoid any
Never import posthog-js in server components; analytics reporting is client-side only
Files:
apps/dashboard/src/app/bridge/buy-widget/BuyWidgetEmbed.client.tsxapps/dashboard/src/app/bridge/buy-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/buy-widget/BuyWidgetEmbed.client.tsxapps/playground-web/src/app/bridge/components/CodeGen.tsxpackages/thirdweb/src/react/web/ui/components/buttons.tsxpackages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsxapps/dashboard/src/app/bridge/buy-widget/page.tsxpackages/thirdweb/src/stories/BuyWidget.stories.tsx
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/react/web/ui/components/buttons.tsxpackages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsxpackages/thirdweb/src/stories/BuyWidget.stories.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/buy-widget/page.tsx
**/*.stories.tsx
📄 CodeRabbit inference engine (CLAUDE.md)
Add Storybook stories (
*.stories.tsx) alongside new UI components for documentation
Files:
packages/thirdweb/src/stories/BuyWidget.stories.tsx
**/*.stories.{ts,tsx}
📄 CodeRabbit inference engine (AGENTS.md)
For new UI components, add Storybook stories (*.stories.tsx) alongside the code
Files:
packages/thirdweb/src/stories/BuyWidget.stories.tsx
🧬 Code graph analysis (3)
packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx (5)
packages/thirdweb/src/react/web/ui/components/Spacer.tsx (1)
Spacer(6-15)packages/thirdweb/src/react/web/ui/components/basic.tsx (1)
Container(80-193)packages/thirdweb/src/react/web/ui/components/buttons.tsx (1)
Button(27-161)packages/thirdweb/src/react/core/design-system/index.ts (3)
fontSize(132-140)radius(156-164)spacing(142-154)packages/thirdweb/src/pay/convert/type.ts (1)
getFiatSymbol(29-31)
apps/dashboard/src/app/bridge/buy-widget/page.tsx (1)
apps/dashboard/src/app/bridge/_common/parseQueryParams.ts (1)
parseQueryParams(3-11)
packages/thirdweb/src/stories/BuyWidget.stories.tsx (2)
packages/thirdweb/src/stories/utils.tsx (1)
storyClient(14-16)packages/thirdweb/src/exports/chains.ts (1)
base(18-18)
🪛 Gitleaks (8.30.0)
packages/thirdweb/src/stories/BuyWidget.stories.tsx
[high] 72-72: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
[high] 84-84: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
[high] 96-96: Detected a Generic API Key, potentially exposing access to various services and sensitive operations.
(generic-api-key)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
- GitHub Check: E2E Tests (pnpm, esbuild)
- GitHub Check: Size
- GitHub Check: Build Packages
- GitHub Check: Unit Tests
- GitHub Check: Lint Packages
- GitHub Check: Analyze (javascript)
🔇 Additional comments (9)
packages/thirdweb/src/react/web/ui/components/buttons.tsx (1)
34-36: LGTM! Good UX improvement.Scoping the active transform to exclude disabled buttons prevents misleading visual feedback when users click on non-interactive buttons.
packages/thirdweb/src/stories/BuyWidget.stories.tsx (1)
66-101: LGTM! Good story coverage for the new props.The three new variants properly exercise the
tokenEditableandamountEditableprops in isolation and combination, following the established pattern.Note: The static analysis warnings about "Generic API Key" on lines 72, 84, and 96 are false positives —
0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913is the public Base USDC contract address, not a secret.apps/playground-web/src/app/bridge/components/CodeGen.tsx (1)
163-170: LGTM! Clean conditional prop generation.The logic correctly limits these props to the "buy" widget and only emits them when explicitly
false, allowing the default editable behavior when omitted..changeset/dirty-breads-swim.md (1)
1-5: LGTM!Patch version is appropriate for these backward-compatible additions, and the description accurately summarizes the new props.
apps/portal/src/app/bridge/buy-widget/iframe/page.mdx (1)
143-168: LGTM! Well-structured documentation.The new "Editability Options" section follows the existing documentation patterns, with clear descriptions and practical examples. Good call including
amount=0.01in theamountEditable=falseexample to demonstrate the typical use case.apps/dashboard/src/app/bridge/buy-widget/BuyWidgetEmbed.client.tsx (1)
23-24: LGTM!The new
amountEditableandtokenEditableprops are cleanly added and forwarded to the underlyingBuyWidget. The optional boolean typing is appropriate, allowing the widget to use its default behavior when not specified.Also applies to: 39-40, 75-76
apps/dashboard/src/app/bridge/buy-widget/page.tsx (1)
76-82: LGTM!The parsing logic correctly returns
falseonly when explicitly set to"false", andundefinedotherwise. This allows the widget to apply its default behavior (editable) when the parameter is omitted or set to any other value. The approach is consistent between both new parameters.packages/thirdweb/src/react/web/ui/Bridge/FundWallet.tsx (2)
116-125: LGTM!The new props are well-documented with JSDoc comments explaining their purpose and default behavior.
484-484: LGTM!Using
=== falsecorrectly handles the case where the prop might be undefined at the call site, treating it as editable by default.
PR-Codex overview
This PR introduces two new properties,
amountEditableandtokenEditable, to enhance theBuyWidgetcomponent. These options allow developers to control the editability of the token selection and amount fields, providing greater flexibility in user interactions.Detailed summary
amountEditableandtokenEditableprops toBuyWidget.BuyPlayground,CheckoutPlayground, andTransactionPlaygroundcomponents to utilize the new props.BuyWidgetEmbedand related components to support new props.BuyWidget.stories.tsxto demonstrate new functionality.LeftSection.tsxfor controlling editability options.iframe/page.mdx.Summary by CodeRabbit
New Features
UI
Documentation
Tests
✏️ Tip: You can customize this high-level summary in your review settings.